/* KAIT public homepage v2.1 — cinematic one-screen composition. Frozen brand tokens (Hi-Fi v1.2); reference: docs/design/homepage/ public-homepage-reference-v2.png (reproduced as code, never embedded). Visual stack: black environment -> mountain silhouettes -> gold glow/haze -> floating product shell -> opaque inner cards -> fully opaque text. */ :root{ --canvas-sunken:#030509;--canvas:#05080C;--surface-1:#11161E;--surface-2:#161C26; --border-subtle:#252B35;--border-strong:#313947; --text-primary:#F5F5F5;--text-secondary:#A0A6AE;--text-tertiary:#6A727D; --profit:#3FBF87;--loss:#F0564E;--live:#3FBF87; --brand:#F2C75B;--brand-hi:#F7DC85;--brand-dark:#B98522; --f:Inter,-apple-system,BlinkMacSystemFont,Helvetica,Arial,sans-serif; --ease:cubic-bezier(.4,0,.2,1); /* ---- HERO GEOMETRY CONTRACT ------------------------------------------ The reading block is placed BENEATH the kite, so it has to know where the kite ends. These four numbers were literals repeated across four media blocks; as properties there is one source of truth and the anchor cannot drift out of step with the header it measures from. --kite-ink is measured, not guessed: the PNG's alpha channel puts the body at y 0.00-0.45 of its square and the ribbon tail's last real ink at y 0.876. Anything below that line is transparent canvas. */ --hdr:76px; /* .bar height; the header adds its own 1px rule */ --hero-pad:22px; /* .cols padding-block */ --kite-top:clamp(84px,9vh,140px); --kite-size:clamp(132px,11vw,160px); --kite-ink:.876; --hero-breath:clamp(64px,9.6vh,128px); /* breathing room between the header and the product panel. The panel used to begin 8px ABOVE the header's bottom edge -- it tucked under the header instead of starting below it. */ --panel-top:clamp(26px,3.2vh,48px); /* where Gokait's measured centre crossing sits, per width band -- see the rail's own note. The base value serves the widest band. */ --gk-phase:-.045; } *{box-sizing:border-box;margin:0;padding:0} /* HORIZONTAL CLIPPING WITHOUT A SECOND SCROLL CONTAINER. `overflow-x:hidden` is not free: per spec, when one axis is not `visible` the other computes from `visible` to `auto`, so this one line silently made BODY a scroll container. It had 45px of real scrollable travel of its own (the decorative .glow bleeds past the content box), which meant a wheel or swipe starting anywhere in the page latched to BODY rather than the viewport -- body gave its 45px, stopped, and the browser would not chain a latched gesture to the viewport until the user lifted and started again. That is the "I have to click or retry before scrolling works" bug, and it fired everywhere because body is the nearest scrollable ancestor of everything. `clip` clips exactly the same way but is NOT a scrollport, so `overflow-y` stays `visible` and no nested scroller is created. `hidden` is kept first as the fallback for engines predating `clip` (Safari <16). */ html,body{overflow-x:hidden} html,body{overflow-x:clip} body{background:#000;color:var(--text-primary);font-family:var(--f);font-size:16px; line-height:1.55;-webkit-font-smoothing:antialiased;font-feature-settings:"tnum" 1; min-height:100svh;display:flex;flex-direction:column; /* Breathing room BELOW the bottom strip, before the scene ends. Padding on the flex CONTAINER, not on .strip: the strip is a bordered, backdrop-blurred band and growing its own box would have made the band taller instead of leaving space after it. .hero keeps flex:1, so a short viewport still puts the strip at the bottom with this gap under it. */ padding-bottom:var(--public-footer-bottom-breathing-room)} /* ANCHORS CLEAR THE PINNED BAR. Set on the scroll container so every anchor jump and every scrollIntoView clears it at once. The homepage carries no in-page anchors today -- About and the capital note are overlays, and the nav points at other routes -- so this is the rule that keeps the first one added correct without anybody remembering the header exists. */ html{scroll-padding-top:calc(var(--hdr) + 18px)} .num{font-variant-numeric:tabular-nums} a{color:inherit;text-decoration:none} button{font-family:var(--f)} .wrap{max-width:min(1760px,93vw);margin:0 auto;padding:0 30px;width:100%} .gold-text{background:linear-gradient(180deg,var(--brand-hi),var(--brand) 55%,var(--brand-dark)); -webkit-background-clip:text;background-clip:text;color:transparent} /* ============ cinematic environment (all local CSS/SVG, no assets) ============ */ .bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:#000} /* photographic mountain environment (public/mountain-environment.webp), integrated — never shown raw: darkened, graded, then relit by the overlay stack below. Slight overscan absorbs the parallax travel. */ .bg .env{position:absolute;inset:-2.5% -1.5%; background:url("mountain-environment.webp") center 66%/cover no-repeat; opacity:.8;filter:brightness(.84) saturate(.94) contrast(1.05); transform:translateX(var(--bx,0px)) scale(1.03); transition:transform .9s cubic-bezier(.22,1,.36,1)} /* dark overlay: keeps the left copy zone and header ink-black, grades the scene into the page instead of letting it read as a wallpaper */ .bg .shade{position:absolute;inset:0;background: radial-gradient(ellipse 30% 40% at 73% 47%,rgba(0,0,0,.42),transparent 72%), linear-gradient(90deg,rgba(0,0,0,.84) 0%,rgba(0,0,0,.46) 28%,rgba(0,0,0,.08) 54%,rgba(0,0,0,.18) 100%), linear-gradient(180deg,rgba(0,0,0,.8) 0%,rgba(0,0,0,.2) 24%,rgba(0,0,0,.02) 50%,rgba(0,0,0,.44) 100%)} /* golden radial glow: reinforces the picture's own sun behind the shell */ .bg .sky{position:absolute;inset:0;background: radial-gradient(ellipse 46% 56% at 72% 44%,rgba(242,199,91,.10),transparent 66%), radial-gradient(ellipse 40% 30% at 8% 102%,rgba(185,133,34,.07),transparent 72%)} /* haze: warm fog sitting on the ridge line, denser on the product side */ .bg .haze{position:absolute;left:0;right:0;bottom:4%;height:42%;filter:blur(46px); background:radial-gradient(ellipse 44% 62% at 72% 62%,rgba(242,199,91,.15),transparent 68%), radial-gradient(ellipse 58% 46% at 26% 92%,rgba(200,150,60,.07),transparent 70%); animation:breathe 9s ease-in-out infinite} /* ground glow / reflection under the shell */ .bg .ground{position:absolute;left:40%;right:-8%;bottom:0;height:22%;filter:blur(34px); background:radial-gradient(ellipse 62% 92% at 55% 100%,rgba(242,199,91,.20),transparent 72%)} .bg .vignette{position:absolute;inset:0;background: radial-gradient(ellipse 82% 78% at 50% 44%,transparent 56%,rgba(0,0,0,.62) 100%)} .bg .grain{position:absolute;inset:0;opacity:.05;pointer-events:none; background-image:url("data:image/svg+xml;utf8,")} /* sparse gold particles: slow rise + twinkle */ .bg .pt{position:absolute;border-radius:50%;background:var(--brand);opacity:0; animation:drift var(--pt,16s) ease-in-out infinite;animation-delay:var(--pd,0s)} @keyframes drift{ 0%{transform:translateY(0);opacity:0} 20%{opacity:var(--po,.5)} 80%{opacity:calc(var(--po,.5)*.4)} 100%{transform:translateY(-46px);opacity:0}} /* ---------- animated KAIT kite (official PNG, decorative sky layer, behind content) ---------- */ /* The PNG is one object on a transparent 1254x1254 canvas, but the artwork is NOT centred: the kite BODY lives top-right (canvas x .50-.98, y .05-.44, visual centre ~74% 23%) and its ribbon TAIL sweeps down-left to the lower-left corner. So we anchor the composition by where the BODY lands (not the square): top/left place the body in the open sky below the header and left of the dashboard; the tail then flows naturally down-left into the darker sky. */ .kite{position:absolute;top:var(--kite-top);left:21%;z-index:1;pointer-events:none; width:var(--kite-size); /* one source of truth: the reading block below is anchored to this same geometry, so the two can never drift apart. .bg is fixed and full-viewport, so the 9vh inside --kite-top resolves exactly as the 9% this rule used to carry -- verified identical at seven viewports. */ transform:translate3d(var(--kx,0),var(--ky,0),0); /* .kite = positioning + optional desktop parallax */ transition:transform .5s var(--ease);will-change:transform} .kite img{width:100%;height:auto;display:block; filter:drop-shadow(0 9px 13px rgba(0,0,0,.4))} /* subtle grounding shadow, no glow — the art has its own light */ .kite-in{animation:kaitFloat 16s cubic-bezier(.45,.05,.55,.95) infinite; transform-origin:74% 23%;will-change:transform} /* .kite-in = flight; pivot at the BODY so the tail trails, never spins */ /* slow, irregular wind: gentle drift + subtle tilt, no bounce/spin/pulse */ @keyframes kaitFloat{ 0%{transform:translate3d(0,0,0) rotate(-1.2deg) scale(1)} 22%{transform:translate3d(7px,-6px,0) rotate(.7deg) scale(1.004)} 45%{transform:translate3d(12px,4px,0) rotate(2.2deg) scale(1.007)} 68%{transform:translate3d(4px,9px,0) rotate(.2deg) scale(1.003)} 86%{transform:translate3d(-6px,3px,0) rotate(-1.7deg) scale(.999)} 100%{transform:translate3d(0,0,0) rotate(-1.2deg) scale(1)}} @keyframes kaitFloatSm{ 0%{transform:translate3d(0,0,0) rotate(-1deg)} 40%{transform:translate3d(6px,-4px,0) rotate(1.5deg)} 75%{transform:translate3d(-4px,4px,0) rotate(-1deg)} 100%{transform:translate3d(0,0,0) rotate(-1deg)}} /* ---------- header (page chrome ONLY — scoped so card-level
elements inherit their card surface instead of a dark strip) ---------- */ /* PINNED. `position:sticky` keeps the bar in normal flow -- it still occupies its own --hdr row above the hero, so nothing below moves, nothing needs a compensating offset, and there is no shift at the instant it starts sticking. z-index:20 was already declared here and was inert while the element was static; it is now the real layer, above the scene (-1), the content column (1) and the strip (2), and below the overlays (50) so a dialog still covers the bar. Backdrop blur and scrim are UNCHANGED: at scroll 0 the bar is pixel-for-pixel the accepted header. */ body>header{position:sticky;top:0; border-bottom:1px solid rgba(37,43,53,.5);background:rgba(0,0,0,.42); backdrop-filter:blur(10px);z-index:20} .bar{display:flex;align-items:center;height:var(--hdr);gap:40px} .brandblk{display:flex;align-items:center;gap:12px} .brandblk .mark{width:34px;height:34px} /* ONE word, so the wide two-word tracking is gone: at .28em "Gokait" read as spaced-out capitals and crowded the nav on phones. */ .brandblk .word{display:block;font-size:24px;font-weight:700;letter-spacing:.005em;line-height:1;white-space:nowrap} .brandblk .tag{display:block;font-size:10px;letter-spacing:.06em;color:var(--brand-dark);margin-top:3px} nav{display:flex;gap:10px} nav .navlink{display:inline-flex;align-items:center;color:var(--text-secondary); font-size:14.5px;padding:8px 12px;border-radius:8px; transition:color .15s var(--ease),background .15s var(--ease)} nav .navlink:hover{color:var(--text-primary);background:rgba(242,199,91,.05)} /* footer secondary link row */ .flinks{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center} /* Tap target (2026-08-26). All three controls measured 19px tall on every breakpoint -- under the 24x24 CSS-px minimum of WCAG 2.5.8 (Target Size, AA). The TEXT is deliberately unchanged at 12px: only the interactive box grows, via inline-flex + min-height, so the footer keeps its exact visual weight and the row gains 5px once rather than being restyled. One shared rule, no per-link exception, no inline style. */ .flinks a,.flinks button{font-size:12px;color:var(--text-tertiary); background:none;border:0;padding:0;cursor:pointer;font:inherit;font-size:12px; display:inline-flex;align-items:center;min-height:24px} .flinks a:hover,.flinks button:hover{color:var(--brand)} /* Same focus treatment the rest of the public site already uses. */ .flinks a:focus-visible,.flinks button:focus-visible{ outline:1px solid var(--brand-dark);outline-offset:2px} nav button{background:none;border:0;color:var(--text-secondary);font-size:14.5px;cursor:pointer; padding:8px 15px;border-radius:8px;transition:color .25s var(--ease),background .25s var(--ease)} nav button:hover{color:var(--text-primary);background:rgba(242,199,91,.05)} nav button:focus-visible{outline:1px solid var(--brand-dark);outline-offset:2px} /* mobile hamburger — hidden on desktop, shown <=760px; the 3 bars morph to an X */ .navtoggle{display:none;flex-direction:column;justify-content:center;gap:5px; width:44px;height:44px;padding:11px;margin-left:auto;border:0;border-radius:9px; background:none;cursor:pointer;transition:background .2s var(--ease)} .navtoggle span{display:block;width:22px;height:2px;border-radius:2px;background:var(--brand); transition:transform .28s var(--ease),opacity .2s var(--ease)} .navtoggle:hover{background:rgba(242,199,91,.07)} .navtoggle:focus-visible{outline:1px solid var(--brand-dark);outline-offset:2px} .navtoggle.open span:nth-child(1){transform:translateY(7px) rotate(45deg)} .navtoggle.open span:nth-child(2){opacity:0} .navtoggle.open span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* ---- CANONICAL HEADER BREAKPOINT ----------------------------------------- 860px, the same width the shared shell (site.css) collapses at, so the bar is the SAME object on the homepage and on every inner page. These rules used to live in this file's 760 block, which is why 761-860 showed a full nav row here and a hamburger everywhere else. */ @media (max-width:860px){ :root{--hdr:64px} .bar{gap:14px;position:relative} .navtoggle{display:flex} nav{display:none;position:absolute;top:100%;left:0;right:0;flex-direction:column;gap:0; padding:8px;background:rgba(6,8,12,.97);backdrop-filter:blur(16px); border-top:1px solid var(--border-subtle);border-bottom:1px solid var(--border-subtle); box-shadow:0 26px 50px rgba(0,0,0,.62)} nav.open{display:flex} nav .navlink,nav button{width:100%;text-align:start;padding:14px 18px;font-size:15.5px;border-radius:10px} nav>*:not(:last-child){border-bottom:1px solid rgba(242,199,91,.15)} /* gold separator */ .brandblk .tag{display:none} } /* buttons */ .btn-gold{display:inline-flex;align-items:center;gap:9px; background:linear-gradient(180deg,var(--brand-hi),var(--brand) 60%,var(--brand-dark)); color:#161302;border:0;border-radius:10px;padding:14px 28px;font-size:15px;font-weight:700; cursor:pointer;box-shadow:0 8px 26px rgba(242,199,91,.18); transition:transform .3s var(--ease),box-shadow .3s var(--ease),filter .3s var(--ease)} .btn-gold:hover{transform:translateY(-1px);filter:brightness(1.07); box-shadow:0 12px 34px rgba(242,199,91,.3)} .btn-gold svg{width:16px;height:16px;stroke:#161302;fill:none;stroke-width:2.2; stroke-linecap:round;stroke-linejoin:round} .btn-outline{display:inline-flex;align-items:center;gap:9px;border:1px solid rgba(242,199,91,.5); color:var(--brand);border-radius:10px;padding:13px 28px;font-size:15px;font-weight:600; background:rgba(242,199,91,.05);transition:background .3s var(--ease),transform .3s var(--ease)} .btn-outline:hover{background:rgba(242,199,91,.13);transform:translateY(-1px)} .btn-outline svg{width:15px;height:15px;stroke:var(--brand);fill:none;stroke-width:1.9; stroke-linecap:round;stroke-linejoin:round} /* ---------- hero: the one screen ---------- */ /* `overflow:clip` is what makes the strip the real END OF THE PAGE. .glow is inset -18% on .stage, so it hangs 189px BELOW the last content -- measured at 1280x720: content ended at 1305, the document scrolled to 1447. That 142px was not a margin anyone chose, it was the transparent tail of a blurred decoration, and it read on screen as a black dead zone after the footer. Clipping it here removes it from the document's scrollable overflow (`clip`, not `hidden`: no scroll container is created, so the pinned header above still resolves its sticky against the viewport). The GLOW ITSELF is untouched -- its radial gradient goes transparent at 74% of a 480px closest-side radius, i.e. ~355px + blur from the panel's centre, which lands well inside this box; only the invisible remainder is cut. `overflow-clip-margin` is deliberately NOT used: measured here, it puts the scrollable overflow straight back (1447 again) while doing nothing for the visible art. */ .hero{flex:1;display:flex;align-items:center;min-height:0;overflow:clip} .cols{display:grid;grid-template-columns:.72fr 1.28fr;gap:52px;align-items:center; padding-top:var(--hero-pad);padding-bottom:var(--hero-pad)} /* ---- THE READING BLOCK IS TUCKED UNDER THE ARTWORK ---------------------- Not centred. The hero's height comes from the product panel, so centring put the copy 180-245px below the kite's ink and let its top slide 39px between English and Arabic. Anchoring it below the measured ink line fixes both: the block reads as one group deliberately placed under the kite, and because the TOP is now fixed, a language with shorter copy changes only where the block ends -- never where it begins. max(0px, ...) is the guard. On a short or narrow viewport the kite sits high and the arithmetic can go negative; the block then simply starts at the top of its grid area rather than being pulled above it. Below 761px .cols is a single column, the panel is underneath rather than beside, and there is no artwork-and-copy relationship to preserve -- so the anchor does not apply there and the natural stack order is left alone. */ @media (min-width:761px){ .pitch{align-self:start; margin-top:max(0px,calc(var(--kite-top) + var(--kite-size) * var(--kite-ink) + var(--hero-breath) - var(--hdr) - var(--hero-pad)))} } /* THE READING COLUMN IS NOT A SCROLL ANCHOR. Its height is language-dependent -- the same three sentences measure 495px in English and 418px in Arabic -- and the columns are centred, so when the browser chose an anchor inside it and scrolled to hold that anchor still, everything ELSE moved instead: measured on live production, switching to Arabic slid the whole product panel, the technology rail, the lot ladder and the footer up by 39px in the viewport. Excluding this column from anchor selection leaves the scroll position alone, so the panel stays exactly where the reader left it and only the copy reflows -- which is the one thing that SHOULD change when you change language. */ .pitch{overflow-anchor:none} .pitch .eyebrow{display:flex;align-items:center;gap:10px;font-size:12.5px;letter-spacing:.22em; color:var(--brand);font-weight:600} .eyebrow .dot{width:18px;height:18px;border:1px solid var(--brand-dark);border-radius:50%; display:inline-flex;align-items:center;justify-content:center;flex:none} .eyebrow .dot i{width:6px;height:6px;background:var(--brand);border-radius:50%} h1{margin-top:24px;font-size:clamp(42px,4.8vw,72px);font-weight:700;line-height:1.12; letter-spacing:-.015em} h1 span{display:block} h1 .gold-text{position:relative; background:linear-gradient(180deg,#FBE9AE,var(--brand-hi) 30%,var(--brand) 62%,var(--brand-dark)); -webkit-background-clip:text;background-clip:text; filter:drop-shadow(0 0 26px rgba(242,199,91,.28))} .sub{margin-top:22px;max-width:475px;color:rgba(224,228,233,.88);font-size:17px; line-height:1.65} .cta{display:flex;gap:16px;margin-top:34px;flex-wrap:wrap} .points{display:flex;gap:28px;margin-top:32px;list-style:none;flex-wrap:wrap} .points li{display:flex;align-items:center;gap:9px;font-size:13.5px;color:var(--text-secondary)} .points svg{width:17px;height:17px;stroke:var(--brand);fill:none;stroke-width:1.8; stroke-linecap:round;stroke-linejoin:round;flex:none} /* ---------- floating product shell ---------- */ /* The panel is placed by LAYOUT vertically and NUDGED only horizontally. The -24px it used to carry was a visual lift that pulled its top edge above the header's bottom edge, and it could not simply be reversed: there are only 40-46px between the panel's bottom and the footer, so a purely visual move down would have collided. As a margin the row grows with it instead. */ .stage{position:relative;perspective:1700px;min-width:0; margin-top:var(--panel-top);transform:translate(18px,0)} .glow{position:absolute;inset:-18% -14%;z-index:-1;border-radius:50%;pointer-events:none; background:radial-gradient(closest-side,rgba(242,199,91,.30),transparent 74%); filter:blur(50px);animation:breathe 9s ease-in-out infinite} /* ground reflection under the shell */ .stage::after{content:"";position:absolute;left:4%;right:4%;bottom:-42px;height:66px; pointer-events:none; background:radial-gradient(ellipse 58% 100% at 50% 0%,rgba(242,199,91,.24),transparent 72%); filter:blur(16px)} /* FLAT panel. The Live-Price card is now a live INTERACTIVE canvas: a scaled + 3D-rotated ancestor makes the browser's pointer->canvas mapping non-1:1, so the crosshair drifts off the real mouse (worse near the edges, and it moved with the old mouse-parallax). A professional trading chart must be face-on. Decorative parallax still rides the background + kite, never this wrapper. */ .tiltwrap{transform:none} .window{position:relative;display:flex;border-radius:18px;min-height:712px; /* faint interior gold reflection (top-right) over the graphite base — the panel reads as lit by the surrounding gold environment, not a neon border */ background: radial-gradient(130% 78% at 80% -8%,rgba(242,199,91,.06),transparent 46%), linear-gradient(165deg,rgba(13,17,26,.84),rgba(8,11,17,.90)); backdrop-filter:blur(10px); border:1px solid rgba(242,199,91,.18); box-shadow:0 70px 140px rgba(0,0,0,.78),0 30px 60px rgba(0,0,0,.6), inset 0 0 0 1px rgba(4,6,10,.85), inset 0 1px 0 rgba(250,228,150,.06), /* warm top-edge highlight */ 0 0 110px rgba(242,199,91,.12); /* soft gold ambient, diffuse */ animation:float 8s ease-in-out infinite} /* gold rim: brightest along top + right, like the reference lighting */ .window::before{content:"";position:absolute;inset:-1px;border-radius:19px;padding:2px; background:linear-gradient(205deg,rgba(250,228,150,.95),rgba(242,199,91,.30) 28%, rgba(242,199,91,.08) 54%,rgba(185,133,34,.50) 100%); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none} /* (the travelling border sweep was removed: a premium/institutional panel is lit by ambient gold, not a scanning light — see the static rim + reflection above) */ .wmain{flex:1;min-width:0;display:flex;flex-direction:column} /* THE HEADER IS THREE COLUMNS, NOT A FLEX ROW WITH A GAP IN THE MIDDLE. The brand line has to sit on the panel's TRUE centre line, not merely in the space left over between XAUUSD and the market state -- a status that changes from PAUSED to MARKET CLOSED is 60px wider, and in a flex row that width would slide the phrase sideways on a live page every time the market opened. Two equal `1fr` side tracks put the `auto` centre track on the exact centre by construction, so neither side can ever move it, whatever it says. The side floors are `min-content`, NOT `max-content`, and the difference is a real one. Under ~340px of header -- a 320px phone -- XAUUSD plus MARKET CLOSED genuinely do not fit on one line at any centring. A `max-content` floor makes the tracks refuse to shrink and pushes the market state clean outside the panel's gold rim; `min-content` lets it wrap onto a second line inside the panel, which is exactly what the header did before this change. Neither floor binds at any width the phrase is actually shown at, so the centring above is unaffected either way -- this is purely the behaviour at the edge, and it stays the behaviour that was already there. All three cells are pinned explicitly: once the brand line moves to row two, auto-placement would otherwise pull the market state into the vacated middle column and un-anchor it from the right edge. */ .topbar{height:auto;min-height:50px;flex:none; /* header breathing: a FLOOR, not a fixed height. A single-row header measures under 50px so this holds it at exactly 50px and desktop is unchanged; a header that has genuinely stacked onto two rows is allowed to take the room it needs instead of overlapping inside a box that cannot hold it. */ display:grid;align-items:center;column-gap:16px;padding:0 20px; grid-template-columns:minmax(min-content,1fr) minmax(0,auto) minmax(min-content,1fr); border-bottom:1px solid var(--border-subtle); /* the header is asked about its OWN width below, never the viewport's: the same header is ~780px wide on a desktop and ~290px inside the stacked mobile panel, and it is the panel that it has to fit into. */ container-type:inline-size;container-name:topbar} .tsym{grid-area:1/1;justify-self:start;font-size:12.5px;letter-spacing:.14em;font-weight:600; display:inline-flex;align-items:center;gap:9px; /* gold to match the logo mark + the Gokait wordmark */ background:linear-gradient(180deg,var(--brand-hi),var(--brand) 55%,var(--brand-dark)); -webkit-background-clip:text;background-clip:text;color:transparent} .tsym .tlogo{width:20px;height:20px;flex:none} .tlive{grid-area:1/3;justify-self:end;font-size:10.5px;letter-spacing:.16em;font-weight:700;color:var(--text-tertiary); display:flex;align-items:center;gap:7px} /* MARKET PRESENCE -- the state the badge has always CARRIED but never SHOWED. setLiveBadge() has set .live / .closed from the canonical feed status since long before this rule existed, and the dot has always been in the markup; there was simply no declaration for either, so the dot painted at zero size and the text kept the grey .tlive base colour. Nothing here computes market hours: this is the presentation half of a state the payload already decides. OPEN green text + green dot, dot breathing on opacity alone (the existing `breathe` keyframes -- no scale, no halo, no reflow; the soft shadow rides the same opacity, and the TEXT never pulses). CLOSED red text + red dot, fully static: no animation, no glow. COLOUR IS NOT THE ONLY SIGNAL -- the badge always spells out MARKET OPEN or MARKET CLOSED -- and colour is deliberately declared OUTSIDE the animation, so reduced motion drops the pulse and never the state. */ .tlive i{width:6px;height:6px;border-radius:50%;background:currentColor; flex:none;opacity:1} .tlive.live{color:var(--profit)} .tlive.live i{box-shadow:0 0 6px rgba(63,191,135,.55); animation:breathe 2.6s var(--ease) infinite} .tlive.closed{color:var(--loss)} .tlive.closed i{box-shadow:none;animation:none} /* Reduced motion stops the BREATHING, never the STATE. The page-wide reduce block zeroes every animation with !important, so this is here to say the quiet part out loud: colour and dot survive, only the movement goes. */ @media (prefers-reduced-motion:reduce){ .tlive.live{color:var(--profit)} .tlive.live i{animation:none;opacity:1} .tlive.closed{color:var(--loss)} .tlive.closed i{animation:none;opacity:1} } /* the centre brand line. One weight lighter and one tone below the market state, so it reads as a signature rather than a third metric arguing with XAUUSD for the eye. No box, no background, no animation -- the restraint is the premium part. The wordmark takes the same tone as the sentence: a second gold on this row would argue with XAUUSD, which is the one thing the line is written not to do. IT WRAPS, DELIBERATELY. The line carries a sentence now, and `nowrap` was not merely a clipping risk here -- it was a LAYOUT risk. Once the line takes its own row spanning 1/-1, a nowrap item contributes its ENTIRE length as min-content to the two `minmax(min-content,1fr)` side columns, which inflated the grid past the panel and carried the line out of the window on every locale longer than English. Wrapping makes its min-content the longest WORD instead, so the columns collapse back to XAUUSD and the market state and the line stays inside the panel at every width and in all seven locales. Overflow stays as the backstop it always was; it is no longer reached. */ .tbrand{grid-area:1/2;justify-self:center;min-width:0;max-width:100%; font-size:11px;font-weight:400;letter-spacing:.055em;line-height:1.2; color:var(--text-tertiary);text-align:center; white-space:normal;overflow:hidden;text-overflow:ellipsis} /* the heart is the one thing on this line allowed any colour. It is drawn from the platform's colour-emoji font -- never from the gold gradient the panel clips for XAUUSD -- and carries an explicit red so a system with no emoji font shows a red heart rather than a grey outline. The nudge is optical: an emoji glyph sits fractionally low against Inter's x-height. */ .tbrand-heart{font-family:"Apple Color Emoji","Segoe UI Emoji","Noto Color Emoji", "Twemoji Mozilla","EmojiOne Color",sans-serif; font-size:.94em;letter-spacing:normal;color:#E5484D;vertical-align:-.04em} /* ---- THE BRAND SIGNATURE ----------------------------------------------- The line carries the only piece of pure brand copy on the page and it was set in the same tertiary grey as a caption. This gives it presence without giving it volume: the WORDMARK becomes the living element, the sentence becomes readable, and the market row keeps the header. The hierarchy is held by SIZE and WEIGHT, not by brightness. XAUUSD is 12.5px with a logo beside it; the market state is 700 in profit/loss colour; the wordmark is 600 at 10.5px and the sentence is 400. It is still the third thing you read, which is the point. Keyframes live beside the rule that uses them, as drift/kaitFloat do for the background and trust-scroll does for the rail. */ .tb-mark{ display:inline-block; /* transformable, and it never reflows */ position:relative; font-weight:600;letter-spacing:.04em; color:var(--brand); /* the canonical gold, #F2C75B */ transform-origin:50% 60%; /* optical centre of the glyphs */ /* a breath of gold, not a halo. STATIC -- it is never animated, so it costs no paint per frame and can never bloom over XAUUSD. */ text-shadow:0 0 5px rgba(242,199,91,.20)} /* THE SWEEP IS CLIPPED TO THE GLYPHS, NOT TO A BOX. A bar travelling behind the word would be exactly the glowing bar this is not allowed to be; clipping the highlight to the letterforms is what makes it read as light crossing polished metal instead. Two layers: the moving highlight over flat gold. With a 300%-wide highlight layer, `background-position:p` puts the band centre at 1.5W - 2Wp, so p=90% parks it clear of the left edge and p=10% carries it clear of the right -- both invisible, which is why the loop can jump between them with nothing to see, and why a browser with animations off simply shows unbroken gold. Guarded: without background-clip:text, `color:transparent` would erase the wordmark, so the plain gold above stands on its own. */ @supports ((-webkit-background-clip:text) or (background-clip:text)){ .tb-mark{ background-image: linear-gradient(105deg,transparent 44%,rgba(255,247,224,.92) 50%,transparent 56%), linear-gradient(var(--brand),var(--brand)); background-size:300% 100%,100% 100%; background-position:90% 0,0 0; background-repeat:no-repeat; -webkit-background-clip:text;background-clip:text; color:transparent; animation:kaitSigSweep 9s linear infinite, kaitSigBreath 9s ease-in-out infinite} } /* THE ACTIVE PHASE IS 1.35s OF EVERY 9s -- 15%. The other 7.65s are deliberate dead air: a signature that moved continuously would be a distraction sitting an inch from a live price. Only transform, opacity and background-position are touched, so the sequence never lays out and never reflows the header. */ @keyframes kaitSigSweep{ 0%{background-position:90% 0,0 0} 15%{background-position:10% 0,0 0} 100%{background-position:10% 0,0 0}} @keyframes kaitSigWarm{ 0%{color:var(--sig-warm)} 6%{color:#FBF3DC} 13%{color:#FBF3DC} 20%{color:var(--sig-warm)} 100%{color:var(--sig-warm)}} @keyframes kaitSigBreath{ 0%{transform:scale(1)} 5%{transform:scale(1.02)} 10%{transform:scale(1.02)} 15%{transform:scale(1)} 100%{transform:scale(1)}} /* the sentence. Champagne rather than white: 88% of --text-primary's channel value, warmed 12% toward the brand gold, so it reads as the wordmark's own family instead of a neutral caption that happens to sit beside it. Well clear of --text-tertiary #6A727D, and still below --text-primary #F5F5F5 so the market row outranks it. The dash keeps the old tertiary tone -- it is a separator, not content. */ .tbrand{--sig-ink:#D8DCE2;--sig-warm:#F1E4BC} .tb-line{color:var(--sig-ink)} /* the emphasis. Warmer and a shade brighter than the sentence, but well short of the wordmark's saturated gold, so the eye lands on Gokait first and on the promise second. 500 rather than 600 for the same reason: enough to separate it from the sentence, not enough to rival the brand. */ .tb-em{font-style:normal;font-weight:500;color:var(--sig-warm); animation:kaitSigWarm 9s ease-in-out infinite} .tb-dash{color:var(--text-tertiary)} /* REDUCED MOTION DROPS THE MOVEMENT AND KEEPS THE LOOK. The global sweep lower in this file already stops every animation on the page; what matters here is that the state it stops ON is the premium one, so it is asserted rather than assumed -- gold wordmark, champagne sentence, highlight parked off the glyphs, no hairline, no scale. Reduced motion must not return this line to grey, which is the whole reason these four declarations are written out. */ @media (prefers-reduced-motion:reduce){ .tb-mark{background-position:90% 0,0 0;transform:none} .tb-line{color:var(--sig-ink)} .tb-em{color:var(--sig-warm);animation:none} .tb-dash{color:var(--text-tertiary)} } /* THE TWO STEP-DOWNS ARE WRITTEN ON THE CHILDREN, DELIBERATELY. An element cannot answer its own @container query -- .topbar declares the container, so only its descendants may ask about it. That is a constraint worth designing to rather than around: expressing both step-downs purely as child placement means the header keeps ONE grid definition and ONE height at every width, so there is no second layout to drift out of sync and no header that changes size as the panel narrows. STEP 1 -- the panel is narrower than a laptop's. The brand line gives back a little size and tracking; XAUUSD and the market state are not touched. */ @container topbar (max-width:679px){ .tbrand{font-size:9.5px;letter-spacing:.04em} } /* STEP 1a -- the laptop band. `container-type:inline-size` queries the CONTENT box, so a 1280 viewport gives the panel 648px of content and lands inside STEP 1: without this, every 1024-1400 desktop would keep the phone's 9.5px while only 1440+ received the readable size, which is the opposite of what the signature needed. Measured at 1280 the widest locale (German) sets in 389px against 648px of content, and at 1024 in 389px against 431px -- both still one line, both still clear of XAUUSD and the market state. Below 420px of content the phone size stands, untouched. */ @container topbar (min-width:420px) and (max-width:679px){ .tbrand{font-size:10.5px;letter-spacing:.05em} } /* STEP 2 -- below this the three cannot share a line without crowding, so the brand line takes its own row underneath and spans the full width, where `justify-self:center` still puts it on the panel's true centre -- now with the whole width to be centred in. XAUUSD and the market state keep row one and their hierarchy; the header stays exactly 50px, the two rows sharing it. */ @container topbar (max-width:499px){ .tbrand{grid-column:1/-1;grid-row:2;justify-self:center; /* THE BREATHING. Written on the child because .topbar declares the container and cannot answer its own query -- the same constraint the two step-downs above are designed around. The brand line separates itself from row one and from the divider underneath, and the header (now a floor, not a fixed height) grows to hold both rows instead of letting them overlap. Centred text may wrap to a second line here and still clears everything. */ margin-top:8px;margin-bottom:10px;line-height:1.45;text-align:center} /* row one lifts off the top edge by the same amount, so the pair reads as a composed two-row header rather than content pushed against the border */ .tsym,.tlive{margin-top:10px} } /* STEP 3 -- on the narrowest panels the market state is the last thing still competing for room, and at .16em it wrapped onto a second line. Tracking is what gives way, not size or wording: the label stays MARKET OPEN / MARKET CLOSED at 10.5px and simply sets tighter, which keeps it on one line without turning it into a badge or shrinking it below the panel's smallest type. */ @container topbar (max-width:300px){ .tlive{letter-spacing:.06em;gap:5px} } /* a browser without container queries (pre-2023) sees neither step, so the stacked row comes from the viewport instead. Coarser -- it cannot know the panel's width -- but it is the same rule, so it cannot collide either. */ @supports not (container-type:inline-size){ @media (max-width:1180px){ .tbrand{font-size:9.5px;letter-spacing:.04em; grid-column:1/-1;grid-row:2;justify-self:center; margin-top:8px;margin-bottom:10px;line-height:1.45;text-align:center} .tsym,.tlive{margin-top:10px} } } /* inner dashboard: cool graphite-navy, more opaque than the shell */ /* THE QUERY CONTAINER for both selectors. Neither control can ask about its own width, and neither should ask about the viewport's: this box is 384px wide at a 480px viewport but 340px at 768px, because the hero goes two-column at tablet. The space the controls actually have is this. */ .cards{container-type:inline-size;container-name:cards; flex:1;display:grid;grid-template-columns:1fr 1fr;gap:14px;padding:18px; /* Two info cards were removed: the panel is now Hybrid + KLDXAU on top and a LARGE real chart below. Row 1 (fixed) holds the two mini trend sparks; the Live-Price chart (grid-column:1/-1) takes ALL remaining height, so it grows as the primary visual without lengthening the homepage. */ /* row 1: the shared performance-range strip (auto). row 2: the two result cards. row 3: the XAUUSD chart, which still spans 1/-1. */ grid-template-rows:auto 176px minmax(280px,1fr)} .card{background:linear-gradient(180deg,rgba(19,25,36,.985),rgba(9,12,20,.99)); border:1px solid var(--border-subtle);border-radius:12px;padding:15px 18px;min-width:0; display:flex;flex-direction:column;min-height:158px; /* soft inner top highlight + a low bottom depth shadow -> the cards read a touch deeper and more separated, still fully dark (never glassy) */ box-shadow:inset 0 1px 0 rgba(255,255,255,.045),0 3px 8px rgba(0,0,0,.30)} .card h3{font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--text-tertiary);font-weight:600;margin-bottom:7px} /* the two info cards (Intelligence Brief / Platform Health) were removed, along with their .row/.arch/.cico/.card.brief/.card.health styling. */ /* the LARGE primary Live-Price chart, spanning the full panel width */ .card.chart{grid-column:1/-1;display:flex;flex-direction:column;position:relative; /* SAME navy-ceramic family as the Hybrid/KLDXAU cards. The LWC chart layer is now transparent, so this ONE surface shows through the whole plot + scales — therefore the warm-gold depth is dialled to a WHISPER (was a visible bottom band that read as a seam through the plot). Clean navy ceramic; the gold comes from the CHART line drawn onto it, not from the surface. */ background: radial-gradient(120% 74% at 50% 116%,rgba(242,199,91,.05),transparent 60%), radial-gradient(120% 70% at 50% -12%,rgba(242,199,91,.035),transparent 58%), linear-gradient(180deg,rgba(19,25,36,.985),rgba(9,12,20,.99)); overflow:hidden; box-shadow:inset 0 1px 0 rgba(255,255,255,.05), inset 0 -18px 30px -20px rgba(242,199,91,.10), 0 3px 10px rgba(0,0,0,.32)} /* Lightweight Charts host: the LARGE primary chart. Fills all height the card gives it (flex:1); real right price axis + bottom time axis, so NO edge mask here (that would clip the axis labels). */ .card.chart .lwc{width:100%;flex:1;min-height:0;margin-top:10px;display:block;position:relative; cursor:default; /* fixed chart — no navigation cursor */ -webkit-user-select:none;user-select:none; touch-action:pan-y} /* the page always scrolls; the chart captures no gesture */ /* CSP-safe backstop for the library's attribution link (also disabled via the attributionLogo:false option) — our data is not a TradingView feed. */ .card.chart .lwc #tv-attr-logo{display:none!important} /* embedded travelling-energy + endpoint-glow overlay canvas (landing.js), sampled from the LWC line coordinates and painted over it. Never captures pointer input. */ .card.chart .lwc .c-energy{position:absolute;inset:0;pointer-events:none;z-index:2} /* The travelling comet + permanent endpoint glow for the two mini trend sparks (Hybrid, KLDXAU) is a canvas overlay (landing.js COMET) laid over each SVG. The Live Price card is a Lightweight Charts chart and does NOT use this. */ .comet-cv{position:absolute;pointer-events:none} /* ---- Live-Price chart header: title + change badge (left), timeframe strip 1m/15m/1H (right). In-flow, above the LARGE chart. ---- */ .chart-head{display:flex;align-items:center;gap:8px 10px;flex-wrap:wrap;padding:0 2px} /* min-width:0 is the fix for the clipping: a flex item defaults to min-width:auto, so this row could never shrink below its content and overflowed .chart-head (measured: 73px past it at 320, putting the badge 54px outside the card, where it was clipped). With it the row shrinks first and, only when the three parts genuinely cannot share a line, wraps -- so the badge is always fully visible instead of cut. */ .chart-title{display:flex;align-items:center;gap:6px 9px;margin-right:auto; min-width:0;flex-wrap:wrap} /* INLINE is the base composition: the title takes the slack and the strip sits at the header's trailing edge, which is where a chart toolbar belongs. The narrow variant lives in the container query further down -- so a wide card never pays for a phone's layout. No rule targets the strip itself. A flex child does not grow without an explicit flex:1, so it stays exactly as wide as its labels. A selector ending in the same class would also shadow the base rule for anything scanning this sheet by name, which is why none is written here. */ .chart-title{margin-right:auto;width:auto;justify-content:flex-start; text-align:start} .chart-head{justify-content:flex-start} .cslabel{font-size:11px;letter-spacing:.16em;text-transform:uppercase; color:var(--text-tertiary);font-weight:600;white-space:nowrap; -webkit-user-select:text;user-select:text} /* live XAUUSD price — the STRONGEST header element; reacts to each live tick (green up-tick / red down-tick) then settles to neutral off-white, like an MT5/terminal. Fast flash in, gentle settle out. */ .c-px{font-size:19px;line-height:1;font-weight:700;font-variant-numeric:tabular-nums; letter-spacing:.005em;color:#F2ECD8;transition:color .5s var(--ease); -webkit-user-select:text;user-select:text} .c-px.up{color:#16C784;transition:none} /* instant flash-in to the true tick colour */ .c-px.dn{color:#EA3943;transition:none} /* (base .c-px .5s handles the settle-out) */ /* daily change badge — compact institutional pill (visible even when closed) */ /* white-space:nowrap is the fix for the split arrow: the value is ONE text node, "-1.02% ", and the space before the arrow was a legal break opportunity, so the arrow dropped to a second line inside the pill (measured: badge 34px tall for a 15px line). It now always reads as one unit. flex:0 0 auto stops the pill being squeezed narrower than that unit, which would clip the text inside its own background. The clamps compact it on small screens WITHOUT a viewport hack: both land on their max well before tablet, so desktop and laptop keep the exact 10px / 1.5px 6px they have today, and it only tightens where the row is genuinely short of room. Sized off the value, not off any particular percentage, so a longer +12.34% behaves identically. */ .mkt-badge{display:inline-flex;align-items:center;flex:0 0 auto;white-space:nowrap; font-size:clamp(9px,2.4vw,10px);font-weight:700;letter-spacing:.01em; padding:1.5px clamp(4.5px,1.5vw,6px);border-radius:5px; background:rgba(255,255,255,.05);color:var(--text-secondary); font-variant-numeric:tabular-nums;-webkit-user-select:text;user-select:text} .mkt-badge.chg.up{color:var(--profit);background:rgba(63,191,135,.11)} .mkt-badge.chg.dn{color:var(--loss);background:rgba(240,86,78,.11)} .mkt-badge.flat{color:var(--text-tertiary)} /* timeframe selector — a compact PILL/OVAL ceramic control. Outer: dark rounded pill, thin restrained border, subtle inner depth. Active: warm gold/bronze ceramic oval with dark readable text (NOT bright yellow, NOT neon, NOT a big button). Smooth active transitions between 1m/15m/1H. */ .tfsel{display:flex;align-items:center;gap:2px;max-width:100%; overflow-x:auto;scrollbar-width:none;-ms-overflow-style:none; padding:3px;border-radius:999px;background:rgba(12,16,23,.85); border:1px solid rgba(255,255,255,.05); box-shadow:inset 0 1px 0 rgba(255,255,255,.03),inset 0 -1px 2px rgba(0,0,0,.35)} .tfsel::-webkit-scrollbar{display:none} .tfbtn{appearance:none;-webkit-appearance:none;border:0;margin:0;cursor:pointer; font-family:inherit;font-size:10.5px;font-weight:600;letter-spacing:.02em; padding:4px 13px;border-radius:999px;color:var(--text-tertiary);white-space:nowrap; background:transparent;transition:color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)} .tfbtn:hover{color:var(--text-secondary)} .tfbtn.is-on{color:#231703;font-weight:700; background:linear-gradient(180deg,#f2ca6e 0%,#e0ab48 55%,#c9973a 100%); box-shadow:inset 0 1px 0 rgba(255,244,214,.55),inset 0 -1px 2px rgba(120,80,20,.35), 0 1px 3px rgba(0,0,0,.35)} .tfbtn:focus-visible{outline:2px solid rgba(242,199,91,.55);outline-offset:1px} .cempty{position:absolute;left:0;right:0;bottom:44px;text-align:center;font-size:11px; color:var(--text-tertiary);letter-spacing:.1em;display:none} .cempty.show{display:block} /* the latest-price marker is the Lightweight Charts price line + axis label (gold) */ /* the live-line endpoint + the travelling energy are painted on the .c-energy overlay canvas (landing.js), sampled from the real LWC line coordinates. */ /* ---- SHARED PERFORMANCE RANGE (HYBRID + KlDxAu + Lot Flight Line) -------- Same segmented-pill family as the chart's .tfsel so it belongs to the page, but deliberately QUIETER and smaller: this is a secondary control sitting above two result cards, not the chart's primary timeframe strip. It spans the full grid width as its own auto row, with the label on the left and the pill hard right, so the association reads left-to-right and the pill never sits over the chart. */ .prsel-row{grid-column:1/-1;display:flex;align-items:center;flex-wrap:wrap; justify-content:space-between;gap:4px 10px;min-width:0;margin:-2px 0 -4px} /* Label leading, pill trailing -- the association reads along the line and the pill never sits over a card. The stacked+centred variant is in the container query below and applies only when the row genuinely cannot hold both, measured against the LONGEST locale rather than English. */ .prsel-label{width:auto;text-align:start} .prsel-label{font-size:9.5px;letter-spacing:.16em;text-transform:uppercase; color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .prsel{display:flex;align-items:center;gap:2px;flex:0 0 auto; padding:2px;border-radius:999px;background:rgba(12,16,23,.72); border:1px solid rgba(255,255,255,.045)} .prbtn{appearance:none;-webkit-appearance:none;border:0;margin:0;cursor:pointer; font-family:inherit;font-size:9.5px;font-weight:600;letter-spacing:.06em; padding:4px 10px;border-radius:999px;color:var(--text-tertiary);white-space:nowrap; background:transparent;min-height:24px; transition:color .2s var(--ease),background .2s var(--ease),box-shadow .2s var(--ease)} .prbtn:hover{color:var(--text-secondary)} .prbtn.is-on{color:#231703;font-weight:700; background:linear-gradient(180deg,#f2ca6e 0%,#e0ab48 55%,#c9973a 100%); box-shadow:inset 0 1px 0 rgba(255,244,214,.5),inset 0 -1px 2px rgba(120,80,20,.3), 0 1px 2px rgba(0,0,0,.3)} .prbtn:focus-visible{outline:2px solid rgba(242,199,91,.55);outline-offset:1px} /* a request that failed keeps the last valid figures and says so, quietly */ .prsel[data-state="stale"]{border-color:rgba(242,199,91,.34)} /* the passive echo under the Lot Flight Line subtitle */ .lotline-range{text-align:center;margin:-7px 0 11px;font-size:9.5px;letter-spacing:.34px; color:var(--text-tertiary);min-height:11px} .lotline-range:empty{display:none} /* ---- COMPACT, CENTRED SEGMENTED CONTROLS -------------------------------- Both strips are sized by their own content and centred on their line. A segmented control that stretches to fill a row reads as a navigation bar; these are settings, and they should occupy exactly the width of their labels. The two remain visually distinct -- the performance range carries its own uppercase label above it, the chart strip sits inside the chart header next to the price -- so they cannot be mistaken for one another. */ /* No rule is added for the strips themselves. Centring comes from the PARENT (.chart-head / .prsel-row put each control alone on its line and centre it), so the controls keep their own base rules untouched -- including the overflow-x scroll affordance and the symmetric padding the tfsel contract depends on, and with no margin that could push the chart. */ /* ---- NARROW-CONTAINER COMPOSITION --------------------------------------- Each control drops to its own centred row only when the CONTAINER cannot hold it inline. The two thresholds differ because the two rows have different content: the performance row needs 316px for its longest label (Spanish) plus the pill; the chart header needs 526px for its longest title (Russian) plus the strip. Sizing both from the worst locale is what keeps the composition identical in every language -- the layout changes at the same physical width whatever the words are. The query size is the container's CONTENT box, so these numbers are the space the row genuinely has: .cards carries 18px of padding a side, so a 480px viewport gives a 384px box but only 348px of content -- which is why 480 stacks and a 600px viewport (460px of content) does not. Comparing against the border box would have mis-set both switch points by 36px. Measured intrinsic widths are recorded in patch_phaseA.py. */ @container cards (max-width:359px){ .prsel-row{justify-content:center} .prsel-label{width:100%;text-align:center} } @container cards (max-width:599px){ .chart-head{justify-content:center} .chart-title{margin-right:0;width:100%;justify-content:center;text-align:center} } /* Container queries have been baseline for years, but a browser without them would otherwise get the INLINE layout at every size and clip on a phone -- the one failure mode worth a fallback. Viewport width is a poor proxy (see the 480/768 inversion above), so the fallback is deliberately generous: stack below 1080, which is the band where the stage is never roomy. */ @supports not (container-type:inline-size){ @media (max-width:1080px){ .prsel-row{justify-content:center} .prsel-label{width:100%;text-align:center} .chart-head{justify-content:center} .chart-title{margin-right:0;width:100%;justify-content:center;text-align:center} } } /* ==== DIRECTION CONTRACT ================================================= Arabic changes the language, not the physical product. Setting dir="rtl" on is right for text and wrong for structure: it mirrored the whole marketing shell, measured at 1280px as logo 67 -> 1164, XAUUSD panel 526 -> 85, technology rail 526 -> 85 and the result cards reordered. A visitor who switches language should not be shown a different product. Three layers, the same ones the dashboard shell already uses: 1. the SHELL is pinned to a fixed physical geometry; 2. the WORDS inside it are returned to the locale's direction; 3. canonical NUMBERS are isolated so bidi cannot reorder them. `direction` inherits and bidi applies per inline box, so pinning the containers is sufficient -- Arabic still renders right-to-left inside each one. ================================================================== */ [dir="rtl"] header,[dir="rtl"] .bar,[dir="rtl"] nav, [dir="rtl"] .hero,[dir="rtl"] .cols,[dir="rtl"] .stage, [dir="rtl"] .tiltwrap,[dir="rtl"] .window,[dir="rtl"] .wmain, [dir="rtl"] .cards,[dir="rtl"] .card,[dir="rtl"] .chart-head, [dir="rtl"] .prsel-row,[dir="rtl"] .topbar,[dir="rtl"] .trust, [dir="rtl"] .trust-rail,[dir="rtl"] .lotline-track, [dir="rtl"] .strip,[dir="rtl"] .srow,[dir="rtl"] .flinks, [dir="rtl"] .paygrp,[dir="rtl"] .pay-marks{direction:ltr} /* ...and the words inside the shell are the locale's, aligned to its own reading edge. text-align:start resolves against the element's OWN direction, so this is one rule for every language rather than a left/right pair. */ /* ALIGNMENT IS NOT SET HERE. It was, and that was a mistake: forcing text-align:start onto every prose element pushed .trust-h, .lotline-h and .lotline-sub -- which the English design CENTRES -- to the right edge in Arabic, changing the composition rather than the language. Because the base sheet leaves prose at its initial `start`, setting only `direction` is enough: start resolves against each element's OWN direction, so Arabic prose moves to its reading edge while a centred heading stays centred in all seven locales. */ /* STRUCTURAL, NOT A LIST. This used to name the elements to return -- .hero h1, .card p, .lotline-sub and so on -- and a list can only ever name what existed when it was written. Measured in Arabic: the header's two call-to-action buttons, the tagline bar, the market-state word, the "coming soon" flag, the capital heading, the sizing dialog and the footer byline were all still rendering LTR because nobody had added them. So the default is inverted. Inside the shell, text is the LOCALE'S; a container is left-to-right only when it is NAMED in the rule above. :where() makes this rule specificity-zero on its own selector, so every named container outranks it whatever the source order -- the range row keeps its physical button order while the words inside it read right-to-left. IT RESTORES TEXT, NEVER A CONTAINER. `direction` on a flex or grid container reverses the order of its children, so a rule broad enough to catch every paragraph is also broad enough to turn the product around. Measured when it was written as a plain descendant rule: the timeframe buttons, the range buttons, the 0.01 -> 0.05 ladder and the technology rail all came out mirrored against production. Naming the TEXT elements fixes that at the cause -- a
,
    ,