/* ============ DQT — PC Optimization Service — original design ============ Theme: BLACK & GOLD - Near-black warm base → premium, focused, high-end feel - Gold accents → luxury, quality, "top tier" service - Brighter gold CTAs → the eye lands on the action - Green confirmations → safety / success signals */ /* ============================== web fonts ============================== Self-hosted from /assets/fonts, not fonts.googleapis.com. The bytes are the same OFL files Google serves; re-fetch them with `node fetch-fonts.js`, which documents the exact query behind each one. Serving them here buys three things the CDN could not: no DNS+TLS to two third-party origins before the first glyph can be asked for, no visitor IP handed to a third party, and a CSP that can say `font-src 'self'` instead of naming an outside host. THE SYSTEM ---------- Manrope — everything that is read: body, UI, buttons, labels. Space Grotesk — headings and the technical figures (--font-head). IBM Plex Sans Arabic / Hebrew — the same roles, in those scripts. Manrope replaces Inter as the text face. It is metrically near-identical (cap height 72 vs 73, x-height 54 vs 55 per 100px), so nothing that was tuned against Inter's proportions had to move — but it is a semi-geometric with flat-sided bowls, which rhymes with Space Grotesk's squared skeleton in a way Inter's neo-grotesque roundness never did. It is also half the weight: 24 KB against Inter's 47 KB for the same latin subset. WHY unicode-range MATTERS HERE ------------------------------ Each face declares only the codepoints it is for, so the Arabic and Hebrew files are fetched only by a reader who is actually looking at that script — an English visitor never pays for them, and no `html[lang]` rule is needed to arrange that. It also means a mixed-script string works properly: the "FPS" inside an Arabic sentence is Manrope, the Arabic around it is Plex. That is why the RTL faces are listed IN the shared stack below rather than behind a `html[lang="ar"]` override. The old override was defeated by every `font:` shorthand in this file (a shorthand resets font-family), which is why Arabic in the language button and the buttons rendered in whatever sans-serif the OS happened to offer. The Plex ranges are Google's own minus the punctuation that overlaps the latin subset (U+200C-200E, U+2010-2011, U+204F, U+2E41 for Arabic; U+0307-0308, U+200C-2010, U+25CC for Hebrew). Manrope is earlier in the stack and covers those already, so leaving them in could only ever cause a 40 KB download for a hyphen. WEIGHTS ------- Manrope and Space Grotesk are variable — one file each spans the range the design uses (400-800 and 500-700). Plex Arabic/Hebrew have no variable cut on Google Fonts, so they ship as two static weights per script. At ~42 KB an Arabic weight that is a real cost to a real reader, and CSS weight matching resolves the gaps cleanly: 500 picks 400, 600 and 800 pick 700. `font-display: swap` on every face: text paints immediately in the fallback and swaps when the file lands. Never `block` — a dark page with no text is worse than a dark page with the wrong text for 100ms. */ @font-face { font-family: "Manrope"; font-style: normal; font-weight: 400 800; font-display: swap; src: url("/assets/fonts/manrope-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Space Grotesk"; font-style: normal; font-weight: 500 700; font-display: swap; src: url("/assets/fonts/space-grotesk-latin-var.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-arabic-400.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "IBM Plex Sans Arabic"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-arabic-700.woff2") format("woff2"); unicode-range: U+0600-06FF, U+0750-077F, U+0870-088E, U+0890-0891, U+0897-08E1, U+08E3-08FF, U+FB50-FDFF, U+FE70-FE74, U+FE76-FEFC; } @font-face { font-family: "IBM Plex Sans Hebrew"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-hebrew-400.woff2") format("woff2"); unicode-range: U+0590-05FF, U+20AA, U+FB1D-FB4F; } @font-face { font-family: "IBM Plex Sans Hebrew"; font-style: normal; font-weight: 700; font-display: swap; src: url("/assets/fonts/ibm-plex-sans-hebrew-700.woff2") format("woff2"); unicode-range: U+0590-05FF, U+20AA, U+FB1D-FB4F; } :root { --bg: #070604; --bg-alt: #0d0b07; --surface: #14110a; --surface-2: #1c1810; --border: #2e2718; --text: #f7f3e8; --muted: #b0a68d; --faint: #988c72; --accent: #e3b341; /* The two gold stops, named so a second gradient can reuse them at a different angle without restating the palette. */ --gold-lo: #f7dd8a; --gold-hi: #c9921a; --accent-grad: linear-gradient(135deg, var(--gold-lo), var(--gold-hi)); /* Same gold, laid out horizontally: the tier meter samples slices of this across its whole width, so it needs a purely horizontal ramp. */ --tier-base-grad: linear-gradient(to right, var(--gold-lo), var(--gold-hi)); --cta-grad: linear-gradient(135deg, #ffd75e, #e8a318); /* One travelling gold sheen shared by the MOST POPULAR badge and the tier meter, so the two read as the same material rather than two golds. */ --gold-sheen: linear-gradient(110deg, #f7dd8a 20%, #c9921a 40%, #ffe9a8 50%, #c9921a 60%, #f7dd8a 80%); --on-gold: #1a1402; --success: #34d399; --danger: #f87171; --radius: 16px; --shadow: 0 10px 40px rgba(0, 0, 0, 0.55); --maxw: 1140px; /* Two roles. --font-text is the site's default and is set on ; --font-head is the display face, opted into by h1-h4 and by the technical figures. Every rule that used to name "Inter" directly now names one of these two, INCLUDING the `font:` shorthands — a shorthand resets font-family, which is why the old `html[lang="ar"] body` override never reached the buttons or the language picker. The RTL faces are NOT here. They are added to these same two variables by the html[lang] rules below, and the reason is measured: the language picker lists every language in its own script, so `العربية` and `עברית` are in the DOM of every page. Naming the Arabic family in the default stack made an English visitor download 47 KB of Arabic to render one menu item. Scoping it to the document language costs those two words the branded face on a page written in neither — a trade worth making, and the only place on the site where it applies. */ --font-text: "Manrope", system-ui, "Segoe UI", sans-serif; --font-head: "Space Grotesk", "Manrope", system-ui, "Segoe UI", sans-serif; /* ======================= THE BENCH LAYER ============================= Added by the homepage design pass. Nothing above this comment changed: the nine brand tokens (--bg, --surface, --surface-2, --border, --text, --muted, --accent, --on-gold, --radius) are exactly the values they were, because the identity is not what this pass is revising. What it adds is a SURFACE GRAMMAR the whole page can share, in place of the one opaque brown box that every card used to be. WHY FILMS AND NOT COLOURS ------------------------- Each level is an alpha film of the text colour over whatever is already behind it. A module nested inside a panel therefore agrees with its parent automatically instead of patching over it, and the same token works on the page ground, on a section-alt ground, and on top of one of the eight game photographs — none of which a fixed hex could do. THE LADDER ---------- PAGE --bg / --bg-alt the deck PANEL --surface (opaque) shells that must not let art through MODULE --sf-1 a thing seated in the panel ACTIVE --sf-2 selected, hovered, or one level deeper LIP --lip a lit machined edge along the top The lip replaces the drop shadow. A blurred shadow says "this card is floating above the page", which is the SaaS reading this pass is moving away from; a 1px inset highlight says "this part is raised out of the same piece of metal", which is what a bench instrument looks like. 1px and not the 0.5px hairline the references use: carries `zoom: var(--ui-scale)` at 0.95, which resolves 0.5px to 0.475px and drops the line entirely on a 1x display. */ --sf-1: rgba(247, 243, 232, 0.035); --sf-2: rgba(247, 243, 232, 0.06); --ring: rgba(247, 243, 232, 0.09); --ring-gold: rgba(227, 179, 65, 0.42); --lip: inset 0 1px 0 rgba(247, 243, 232, 0.05); --lip-lit: inset 0 1px 0 rgba(255, 240, 205, 0.18); /* The instrument register. Tail is --font-text, not `monospace`, so the RTL faces stay in the chain: the browser resolves per codepoint, so a Latin "FPS" or "ms" gets the mono face and the Arabic or Hebrew around it still gets Plex. Same trick as --font-text itself, see the html[lang] rules. */ --mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, var(--font-text); /* ----------------------------- motion ------------------------------ Three durations for the whole homepage, and no fourth. Before this pass the file carried 0.15s, 0.2s, 0.22s, 0.24s, 0.25s, 0.26s, 0.28s, 0.3s, 0.32s, 0.6s and more, all chosen locally, which is why nothing on the page felt like it belonged to one machine. FAST a switch closing under the finger UI a state changing: selection, hover, disclosure SECTION content arriving on scroll One easing for everything that travels. No overshoot anywhere: a bench instrument that springs past its reading is a broken instrument. */ --t-fast: 150ms; --t-ui: 200ms; --t-sec: 420ms; --ease: cubic-bezier(0.22, 1, 0.36, 1); /* Whole-site render scale. 1 = 100%, 0.95 = one browser-zoom step down. Change this single value to retune it; see the `zoom` rule on body. */ --ui-scale: 0.95; } /* Phones stay at 100%. Below 560px the layout is already a single column, so shrinking buys no extra content — it only costs text legibility and pushes tap targets further under the 44px minimum. */ @media (max-width: 560px) { :root { --ui-scale: 1; } } * { box-sizing: border-box; margin: 0; padding: 0; } /* The hidden attribute must always win, even over display:grid/flex rules below */ [hidden] { display: none !important; } html { scroll-behavior: smooth; } body { font-family: var(--font-text); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; /* ------------------------------ UI scale ------------------------------ Renders the site one browser-zoom step down (95%), so a little more fits on screen without touching a single size value anywhere else. `zoom` rather than `transform: scale()` on purpose: zoom participates in layout, so there is no leftover gap at the edges, no doubled scrollbar, and position:sticky/fixed keep working. A transform would create a containing block and break the sticky header. Applied to , not : zooming the root element changes the coordinate space media queries are evaluated in, which would shift every breakpoint by ~5% and could flip a layout right at the boundary. On the breakpoints stay honest. */ zoom: var(--ui-scale, 1); } img { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-head); } /* ------------------------- technical figures ----------------------------- Tabular figures, and only here. Both text faces default to PROPORTIONAL digits with a lot of spread — in Manrope a `1` is 39 units wide against an `8` at 58, in Space Grotesk 43.5 against 61.1 — which is right for a price sitting in a sentence and wrong for a number that changes in place. The hero counters animate from 0 to their final value, so with proportional digits the label under them shifts left and right the whole way up, and `1189 → 1471` in the results panel does not line up with the row above it. `tabular-nums` pins every digit to one advance and the movement stops. Not set globally: proportional digits are the better default in running prose, and this site has plenty of it. Applied per-slot instead, to the figures that are read as measurements. A happy accident worth keeping: Manrope and Space Grotesk have the SAME tabular advance (0.62em), so a price in the display face and its `/ session` suffix in the text face sit on one grid rather than two. Changing either family means re-checking that. */ .stat strong, .plan-price, .plan-was, .value-box-num, .mt-big-val, .mt-stat b, .result-big, .rec-price, .est-box b { font-variant-numeric: tabular-nums; } section { scroll-margin-top: 84px; } ::selection { background: var(--accent); color: var(--on-gold); } /* gold-tinted scrollbar */ ::-webkit-scrollbar { width: 11px; } ::-webkit-scrollbar-track { background: var(--bg-alt); } ::-webkit-scrollbar-thumb { background: var(--border); border-radius: 6px; } ::-webkit-scrollbar-thumb:hover { background: var(--accent); } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .container-narrow { max-width: 780px; } /* ------------------------------- buttons ------------------------------- */ /* --------------------------------- actions ------------------------------- The pair, and the rule the whole gold system rests on: FILLED GOLD IS AN ACTION AND NOTHING ELSE. Once the eyebrows, the metric tiles and the card outlines gave their gold back, there are exactly two filled gold objects left in a viewport — this button and, in the plans grid, the recommended plan's button — which is what makes them findable without a glow. PRIMARY is metal, not a coloured rectangle. Three layers, in this order: - the gold ramp; - `inset 0 1px 0` in warm white along the top edge, which is a lit bevel; - `inset 0 -1px 0` in dark gold along the bottom, which is the shadow the bevel implies. Without the second one the highlight reads as a stray line rather than as a formed edge. The 24px coloured drop shadow is gone. A gold button that glows is a gold button that is trying to be noticed; a gold button that is the only filled thing on the screen already has been. SECONDARY is a hairline, and it stays plainly interactive: it lights its ring and thickens its film on hover, the same illumination every other control on the page uses. Neither one moves any more. `translateY(-2px)` on hover, on a control the pointer has to travel across to reach, is a target that steps away from the cursor at the moment of arrival. The press state keeps its scale, because that one is a real report: the button was hit. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 20px; border-radius: 8px; border: 1px solid transparent; font: 600 14.5px/1 var(--font-text); cursor: pointer; white-space: nowrap; transition: background var(--t-ui) ease, border-color var(--t-ui) ease, color var(--t-ui) ease, box-shadow var(--t-ui) ease, filter var(--t-ui) ease; } .btn-lg { padding: 15px 26px; font-size: 15.5px; } .btn-primary { background: var(--cta-grad); color: var(--on-gold); box-shadow: inset 0 1px 0 rgba(255, 246, 219, 0.55), inset 0 -1px 0 rgba(120, 78, 0, 0.35); } .btn-primary:hover { filter: brightness(1.08); } .btn-ghost { background: var(--sf-1); border-color: var(--ring); color: var(--text); box-shadow: var(--lip); } .btn-ghost:hover { background: var(--sf-2); border-color: var(--ring-gold); color: var(--text); } .btn:active:not(:disabled) { transform: scale(0.96); transition-duration: 0.08s; } .btn:disabled { opacity: 0.6; cursor: wait; transform: none; } /* shared "picked" pop for toggles (chips, tabs) */ @keyframes pressPop { 40% { transform: scale(1.06); } } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* --------------------------------- nav --------------------------------- */ /* Compact and technical, not a glass slab. Two states: at rest — the header is a film over the hero, so the page starts at the hero and not at a bar. Hairline bottom edge only. scrolled — it becomes an opaque deck with a lit lip, because from here on there is content sliding underneath it that must not read through the labels. `.nav-solid` is set on by the scroll handler main.js already runs for the back-to-top button, so this costs no second listener. Without JS the header simply stays in its at-rest state, which is legible on every section ground the page has — verified against all eight. */ .nav { position: sticky; top: 0; z-index: 50; background: rgba(7, 6, 4, 0.72); backdrop-filter: blur(14px); border-bottom: 1px solid var(--ring); transition: background var(--t-ui) ease, border-color var(--t-ui) ease, box-shadow var(--t-ui) ease; } .nav-solid .nav { background: rgba(7, 6, 4, 0.94); border-bottom-color: var(--border); box-shadow: var(--lip); } .nav-inner { display: flex; align-items: center; justify-content: space-between; height: 66px; gap: 24px; } /* never let flex squeeze the logo — it must always render at its full aspect */ .brand { flex: none; display: flex; align-items: center; gap: 11px; } .brand img { height: 50px; width: auto; max-width: none; } .brand-text { display: flex; flex-direction: column; line-height: 1.05; } .brand-sub { font-size: 10.5px; font-weight: 700; letter-spacing: 2.5px; text-transform: uppercase; margin-top: 0; /* animated gold sheen, matching the hero H1 */ background: var(--gold-sheen); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradSheen 5.5s ease-in-out infinite; } .brand-lockup { display: inline-flex; align-items: center; gap: 11px; } .brand-lockup img { height: 46px; width: auto; } /* ---------------------------- the plan mark ------------------------------ FOUR MARKS AGAIN, ONE SYSTEM. The previous pass flattened all four tiers onto the single gold mark, on the argument that a logo which changes colour to mean "more expensive" is not a logo. That argument is sound about a LOGO — and wrong about what these four files are. They are not four brands: they are one silhouette, one geometry, one set of bevels, finished in four metals. A rack of instruments from the same manufacturer does exactly this, and the reason is legibility: at four cards across, the mark is the only element large enough to tell you which tier you are looking at before you have read a word. So the tint comes back, and this time it is SYSTEMATISED rather than four hand-tuned drop shadows. Each card declares one token — `--tier-rgb` — and everything tier-coloured on that card is derived from it: the mark's own finish (the .webp file: silver, blue, gold, red) the bloom behind it (.plan::before, a radial wash at 10%) the lit lip (inset hairline along the card's top edge) the resting ring (16%, so it reads at a glance and never shouts) the hover ring (38%) Five uses, one value, no per-card exceptions — which is what stops this being the four-companies problem it was before. What deliberately does NOT take the tint: the tier meter, the price, the feature ticks and the button. The meter is the shared instrument and stays gold on every card, the ticks stay green because they mean "included" and not "which tier", and gold fill still means action and nothing else. */ .plan { /* Warm silver. The free tier is the one that must not look like a colour grade of the paid ones, so it takes the neutral end of the same warm axis the whole palette sits on rather than a fifth hue. */ --tier-rgb: 198, 190, 172; } .plan--free { --tier-rgb: 198, 190, 172; } .plan--ignition { --tier-rgb: 62, 148, 255; } .plan--overdrive { --tier-rgb: 227, 179, 65; } .plan--apex { --tier-rgb: 255, 96, 96; } /* The one per-tier exception, and it is a property of the ASSET rather than a design decision. logo-mark-red.webp is a much paler file than its blue and gold siblings — screenshotted side by side it reads as dusty pink where the blue reads as blue — so Apex alone gets the mark's own colour pushed back up to where the other three already sit. Saturation and brightness only: the shadows are still the shared derived pair above, so nothing about how the tier system works is special-cased here, only how one PNG was exported. */ .plan--apex .plan-logo { filter: saturate(1.45) brightness(1.18) drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 12px rgba(var(--tier-rgb), 0.42)); } .plan-logo { display: block; height: 58px; width: auto; margin: 2px auto 14px; position: relative; z-index: 1; /* Two shadows, both derived: a black one for weight against the deck, and a tier-coloured one that is the mark's own light rather than a glow bolted on behind it. 0.42 and not the old 0.9 — at full strength the red and blue haloes were the brightest objects in the rack, brighter than the one gold button that is supposed to be. */ filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.55)) drop-shadow(0 0 12px rgba(var(--tier-rgb), 0.42)); } .nav-links { display: flex; gap: 26px; } /* The link is a slot with a lamp under it. The lamp is the state; the colour is the confirmation. Two channels, so the current section is still findable with the gold desaturated away. `inset-inline` + `scaleX` from the centre, so it needs no RTL twin: a bar that grows out of the middle grows the same way in both directions. */ .nav-links a { position: relative; color: var(--muted); font-size: 14.5px; font-weight: 500; padding-block: 6px; transition: color var(--t-ui) ease; } .nav-links a::after { content: ""; position: absolute; inset-inline: 0; bottom: -2px; height: 2px; border-radius: 2px; background: var(--accent-grad); transform: scaleX(0); transform-origin: center; transition: transform var(--t-ui) var(--ease); } .nav-links a:hover { color: var(--text); } .nav-links a.active { color: var(--accent); } .nav-links a.active::after { transform: scaleX(1); } .nav-cta { display: flex; align-items: center; gap: 12px; } /* A 44x44 INTERACTIVE area on a 36x33 visible one, and the split is the whole point. The obvious fix — min-inline-size: 44px on the button — was tried and reverted, because it is measurably wrong here. It grew the control by 6px, and the header row at 371px has 3.63px of slack in Hebrew and 4.71px in Arabic (see nav-rtl-narrow-overflow.test.mjs for the derivation). Measured after the change: `.nav-cta` started at x = -1 and the document scrolled to 375px in both languages. Fixing a touch target by re-opening a horizontal overflow is not a fix. A pseudo-element hit area costs the layout nothing. The button keeps the exact box it shipped with, so every figure the RTL fit arithmetic depends on is still valid, and the ::after extends the clickable region 4px past each edge and ~5.5px past the top and bottom to reach 44 square. It overlaps half of the 8px .nav-cta gap and nothing else, so no neighbouring control loses any of its own target. `position: relative` on a control that had none, and nothing else changes. */ .nav-burger { display: none; position: relative; background: none; border: 1px solid var(--border); color: var(--text); font-size: 18px; border-radius: 10px; padding: 6px 12px; cursor: pointer; } .nav-burger::after { content: ""; position: absolute; top: 50%; left: 50%; translate: -50% -50%; min-width: 44px; min-height: 44px; width: 100%; height: 100%; } /* ------------------- a third party's brand, hosted ---------------------- Discord blurple filled the whole control and threw a 24px blurple glow, and on a page whose entire palette is warm near-black and gold that made the single loudest colour in the header belong to somebody else's brand. What actually needs to be recognisable is the MARK, not the fill. So the button takes DQT's own material — the same recessed dark surface and hairline every secondary control on this site wears — and spends the blurple where it does the recognising: on the logo, which stays #5865f2 at full strength because `fill: #5865f2` on the svg rather than `currentColor` decouples it from the label beside it. The brand then comes forward on interaction rather than at rest: the border and the ring go blurple on hover and on focus, which is more Discord than the flat block was, and it happens at the moment somebody is reaching for it. */ .btn-discord { background: var(--sf-1); color: var(--text); border: 1px solid var(--ring); box-shadow: var(--lip); } .btn-discord:hover { background: var(--sf-2); color: var(--text); border-color: rgba(88, 101, 242, 0.75); box-shadow: var(--lip), 0 0 0 3px rgba(88, 101, 242, 0.18); } .btn-discord:focus-visible { border-color: rgba(88, 101, 242, 0.9); box-shadow: var(--lip), 0 0 0 3px rgba(88, 101, 242, 0.3); } .btn-discord svg { width: 20px; height: 20px; fill: #5865f2; flex: none; } .plan-discord { width: 100%; margin-top: auto; } .lang { position: relative; } .lang-btn { display: inline-flex; align-items: center; gap: 5px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); border-radius: 10px; padding: 8px 10px; font: 600 13px var(--font-text); cursor: pointer; transition: border-color 0.2s, box-shadow 0.2s; } .lang-btn:hover, .lang.open .lang-btn { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(227, 179, 65, 0.14); } .lang-caret { width: 13px; height: 13px; color: var(--muted); transition: transform 0.25s ease; } .lang.open .lang-caret { transform: rotate(180deg); } .lang-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 60; min-width: 130px; margin: 0; padding: 6px; list-style: none; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.45); opacity: 0; transform: translateY(-8px) scale(0.97); transform-origin: top; visibility: hidden; pointer-events: none; transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s; } .lang.open .lang-menu { opacity: 1; transform: none; visibility: visible; pointer-events: auto; } .lang-opt { padding: 9px 12px; border-radius: 8px; font: 600 13px var(--font-text); color: var(--muted); cursor: pointer; white-space: nowrap; text-align: start; transition: background 0.15s, color 0.15s; } .lang-opt:hover, .lang-opt:focus-visible { background: var(--surface); color: var(--text); outline: none; } .lang-opt[aria-selected="true"] { color: var(--accent); } /* ----------------------------- RTL typography --------------------------- The Arabic and Hebrew faces enter through the two font variables rather than through a `body { font-family: … }` override, so they reach every rule — including the `font:` shorthands that defeated the old override and left the language button and the buttons rendering in whatever the OS offered. Manrope stays FIRST in both stacks. Its unicode-range covers Latin only, so the browser resolves per codepoint: the "FPS" inside an Arabic sentence is Manrope, the Arabic around it is Plex. Putting Plex first would work too — it has its own Latin — but then the site's Latin would change identity depending on which page you were on. Set on html[lang] and not on [dir="rtl"]: the two RTL languages need different families, and `dir` cannot tell them apart. */ html[lang="ar"] { --font-text: "Manrope", "IBM Plex Sans Arabic", system-ui, "Segoe UI", sans-serif; --font-head: "Space Grotesk", "Manrope", "IBM Plex Sans Arabic", system-ui, sans-serif; } html[lang="he"] { --font-text: "Manrope", "IBM Plex Sans Hebrew", system-ui, "Segoe UI", sans-serif; --font-head: "Space Grotesk", "Manrope", "IBM Plex Sans Hebrew", system-ui, sans-serif; } /* --------------------------- RTL letter-spacing -------------------------- Every letter-spacing value in this file was chosen for Latin, and none of them should reach these scripts: Arabic is cursive, so positive tracking pulls joined letters apart and the word stops looking like a word; Hebrew has no case, so the "uppercase label" convention that justifies +2px on a kicker does not exist there either. The negative tracking on the headings is the same mistake in the other direction — -1px crowds a script whose legibility lives in its counters. Listed rather than applied with a blanket `[dir="rtl"] *`, so that adding a tracked element is a deliberate decision about whether it carries translated text. `.brand-sub` is deliberately absent: the wordmark is "PC Optimization Service" in every language, so it keeps its Latin tracking under RTL. */ /* `.pill` was missing from this list, and it is the hero eyebrow — 11.5px of translated copy at +0.11em. In Arabic that is +1.27px pulling apart the joins of "ضبط يدوي · إصلاح الأعطال · نتائج قابلة للقياس", which is the exact failure the list exists to prevent; it was only ever absent because `.pill` and `.kicker` are declared together but were listed apart. Measured at 390px before the fix: letter-spacing 1.265px in ar and he. `.result-state`, `.value-scenario` and `.fps-read i` are new in this pass and are added at the same time: all three are tracked mono labels carrying translated strings, which is the whole membership test for this rule. `.value-vs` replaces the three `.vf-*` register labels the value card used to carry (`.vf-cell dt`, `.vf-finding-label`, `.vf-ways`), which went with the scorecard. It is the same membership test: 11px mono at +0.14em, and it carries a translated word — "مقابل" in Arabic, "מול" in Hebrew — which at that tracking is two Hebrew letters pulled apart from each other. `.consent-always` is new with the consent panel and joins on the same test: 11px mono at +0.08em carrying a translated phrase — "دائماً" in Arabic, "תמיד" in Hebrew — which is exactly the shape this list protects. */ [dir="rtl"] :is(h1, h2, h3, h4, .pill, .kicker, .strip-label, .fps-card-title, .ticker-track span, .value-box-label, .mt-stat span, .sev, .est-label, .perf-state, .rail-label, .stat span, .tool-panel label:not(.chip) > span, .result-state, .value-scenario, .fps-read i, .value-vs, .plan-duration, .est-unit, .plan ul li:first-child, .badge-track, .footer-cols h4, .plan-flag, .plan-was, .consent-always) { letter-spacing: normal; } /* ---------------------------- Arabic hero leading ------------------------ The one place a script needed more room than the Latin design gives it. Measured ink extent (tallest ascender to deepest descender) of each language's actual hero string, as a multiple of the font size: en 0.92 es 0.92 he 0.93 ar 1.12 `.hero h1` sets line-height 1.08, which the first three clear with room to spare. Arabic does not — it needs 1.12em and gets 1.08em, so consecutive lines of the four-line Arabic headline overlap and a descender can land on the ascender below it. 1.25 clears the ink by 0.13em. Scoped to Arabic and to the hero on purpose. Hebrew at 0.93em would only pay for height it does not need, and every other heading either sets a looser line-height already or inherits the body's 1.6: the masthead h2 is the next tightest at 1.12 against Arabic ink of 0.99em, which clears. */ html[lang="ar"] .hero h1 { line-height: 1.25; } /* --------------------------------- hero -------------------------------- */ .hero { position: relative; overflow: hidden; background: radial-gradient(900px 500px at 85% -10%, rgba(201, 146, 26, 0.14), transparent 60%), radial-gradient(700px 400px at -10% 30%, rgba(247, 221, 138, 0.07), transparent 60%), var(--bg); } .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(rgba(227, 179, 65, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(227, 179, 65, 0.05) 1px, transparent 1px); background-size: 44px 44px; mask-image: radial-gradient(700px 460px at 70% 20%, #000 30%, transparent 75%); } /* Three areas, not two columns of stacked blocks. The metric strip, the ticker and the footnote used to be the tail of .hero-copy, which meant the phone had exactly one possible order: all of the copy, then all of the readout, then — at y=1317 on an 844px screen — the proof. Splitting the readout into its own grid AREA costs desktop nothing (row 2 of the copy column is where it already sat) and buys the phone the one reordering that matters: copy, PROOF, readout. `row-gap: 0` because the ticker and the strip carry their own margins; a grid gap here would add to them and re-open the height this pass exists to close. */ .hero-inner { position: relative; display: grid; grid-template-columns: 1.15fr 0.85fr; grid-template-areas: "copy visual" "readout visual"; column-gap: 48px; row-gap: 0; align-content: center; padding: 92px 24px 80px; } .hero-copy { grid-area: copy; } .hero-visual { grid-area: visual; align-self: center; } .hero-readout { grid-area: readout; } .hero-inner > div { min-width: 0; } /* let the ticker shrink instead of forcing overflow */ /* ------------------------------- the rail -------------------------------- The eyebrow, and the one element this design is built around. It replaces the filled pill that used to sit here and the filled gold pill on every section head, for a reason the research is unanimous about: Axiom reserves its accent for actions and active states and calls decorative use of it a mistake; Superlative goes further and keeps its accent OFF actions entirely, spending it only on functional indicators. A gold lozenge that says "FREE TOOLS" is neither. It is gold spent on a noun. What replaces it is an instrument label on a rail: a lit lamp, the label in the mono register, and a hairline that runs from the label out to the edge of the block. The lamp is the only gold, it is 6px across, and it means the same thing here as everywhere else on the page — this one is live. Built entirely from pseudo-elements on the existing element. It has to be: every one of these labels carries data-i18n, and build-ar.js replaces the whole inner content of a data-i18n element, so a wrapper would exist in English and be gone from /ar/. Nothing here adds a node, and no string changed in any of the four languages. */ .pill, .kicker { /* `start`, not `center`. These labels are one line at desktop and two on a 390px phone — "⚡ Manual tuning · Issue fixing · Measurable gains" wraps — and a centred lamp on a two-line label floats down beside the SECOND line, which reads as a stray dot rather than as a status light on the label. Aligning to the start pins the lamp and the rail to the first line at every width, and the margin below re-centres the lamp within that line box: (11.5px x 1.35 line-height - 6px lamp) / 2 = 4.7px. */ display: flex; align-items: flex-start; gap: 10px; padding: 0; border: 0; border-radius: 0; background: none; color: var(--faint); font-family: var(--mono); font-size: 11.5px; font-weight: 600; line-height: 1.35; text-transform: uppercase; letter-spacing: 0.11em; } /* The hero eyebrow carries a three-part sentence rather than a two-word section name, so it sits one step brighter than the quiet tier — readable as copy, still clearly a label. Its lamp is lit (see the promoted-lamp rule below), which is what puts it in the same tier as .kicker-main without giving a 60-character string the full gold. */ .pill { margin-bottom: 20px; color: var(--muted); } /* Base is the QUIET tier, exactly as it was before this pass: the three .svc-kicker labels introduce card groups rather than sections and must not out-shout the cards under them. The three tiers survive the change of material — they are now told apart by how brightly the lamp burns and how far the rail carries, instead of by how much gold the pill is filled with. */ /* The lamp. A filled core inside a dim halo, so it reads as lit rather than printed — the same two-part construction as the status dots in the proof card head, at a third of the size. */ .pill::before, .kicker::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; margin-block-start: 4.7px; background: rgba(227, 179, 65, 0.45); } .pill::before, .kicker.kicker-main::before, .kicker.kicker-special::before { background: var(--accent); box-shadow: 0 0 0 3px rgba(227, 179, 65, 0.14); } /* The rail. flex:1 rather than a fixed width, so it always reaches the end of whatever block the label sits in and never has to be re-measured for a longer translation. min-width lets it collapse rather than push a long Arabic label into overflow. */ /* The rail sits on the first line's optical centre for the same reason, and disappears rather than wrapping when the label takes the whole row: at min-width 0 a flex item with no content simply collapses. */ .pill::after, .kicker::after { content: ""; flex: 1 1 auto; min-width: 0; height: 1px; margin-block-start: 7.2px; background: linear-gradient(to right, var(--ring), transparent 88%); } [dir="rtl"] .pill::after, [dir="rtl"] .kicker::after { background: linear-gradient(to left, var(--ring), transparent 88%); } /* -------------------------- the hero headline ---------------------------- Four things, and the first is the one that matters. 1. `text-wrap: balance`. The headline is two translated strings in one h1 and it was breaking wherever the line box happened to run out — "Check your system before you / book" in the tools head, and a one-word fourth line in the hero at several common widths. Balance evens the lines by construction, in every language, and it costs nothing on a heading this short (the spec's 6-line cap is never approached). Chromium, Firefox and Safari all ship it; anything older simply gets the greedy break it got before. 2. A max width in `ch`, not px. The measure is a property of the type, so the limit has to be expressed in the type's own units or it changes meaning the moment a translation is set in a different face. 26ch is wider than the 570px hero column at desktop, so it does nothing there; it binds below 1000px, where the hero collapses to one column and the headline would otherwise run the full 710px container. 3. The clamp tops out at 44px, not the 60px it was, and that number is measured rather than chosen. The English headline is 73 characters in a 570px hero column, and the break pattern changes at 48px: 56px Gaming PC / Optimization Service / for FPS Boost, Lower / Latency & Stutter Fix 4 lines, 226px, first line a 263px stub 48px same four lines 193px 44px Gaming PC Optimization / Service for FPS Boost, / Lower Latency & Stutter Fix 3 lines, 133px, widths 463 / 426 / 531 44px is the largest size that fits three lines, and three lines is where the breaks land on phrase boundaries instead of stranding "Gaming PC" on a half-width first line. It also returns 93px of hero height, which is what keeps the primary action above the fold on a 1440x960 laptop with the promo bar showing. `balance` cannot fix a size that is simply too big for its column: it chooses WHERE to break, not how many lines to break into. Both settings were needed. 4. -0.02em instead of -1px. Tracking that is stated in pixels gets looser as the clamp scales up, which is backwards — larger type wants tighter tracking, not looser. The [dir="rtl"] reset already exempts h1. */ .hero h1 { font-size: clamp(32px, 3.6vw, 44px); font-weight: 700; line-height: 1.06; letter-spacing: -0.02em; text-wrap: balance; max-inline-size: 26ch; } .grad { background: var(--gold-sheen); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; color: transparent; animation: gradSheen 5.5s ease-in-out infinite; } @keyframes gradSheen { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } } /* `pretty` and not `balance`: on a paragraph, balance evens every line and makes running prose look like a poster. pretty only fixes the last line, which is the actual defect — a single stranded word under four full ones. */ .lead { color: var(--muted); font-size: 17px; margin: 22px 0 30px; max-inline-size: 54ch; text-wrap: pretty; } .hero-actions { display: flex; gap: 14px; flex-wrap: wrap; } /* ------------------------- the hero on a phone --------------------------- Everything below is one change with five parts, and the measurement it is answering is this: at 390x844, the copy stack ran 1148px and the benchmark started at y=1317 — a screen and a half of prose before the first piece of evidence. The five parts, in order of how much height each returns: the readout moves below the proof (grid areas, above) ~330px the service inventory drops out of the lead ~66px the headline steps down to 27px with a tighter measure ~34px the two actions stop being two equal 48px slabs ~55px the guarantee stops being a two-line pill ~21px None of it is a proportional scale-down: the h1 keeps its weight and its tracking, the primary action keeps its full size, and the guarantee keeps its sentence. What shrinks is what was repeating something the page says again a few hundred pixels later. */ @media (max-width: 720px) { /* 27px, not the 32px the clamp bottomed out at. The English headline is 73 characters; at 32px in a 342px column it sets five lines (136px + a stranded word), at 27px it sets four at 118px and the breaks land on phrase boundaries. 24ch is the measure that keeps them there — `balance` picks WHERE to break, never how many lines there are to break into. */ .hero-inner { padding-top: 48px; } .hero .pill { margin-bottom: 14px; } .hero h1 { font-size: 27px; line-height: 1.12; max-inline-size: 24ch; } .lead { font-size: 15.5px; margin: 16px 0 22px; } /* The service inventory. It is the ticker's entire content, verbatim, and the first three cards of "Everything we do" — the one sentence in the hero that is pure repetition on a screen this size. Nothing else in the lead is dropped: what DQT is, and what it costs if it does not work, both stay. */ .lead-detail { display: none; } /* One dominant action and one quiet one — but BOTH still actions. What this was: the secondary lost its fill, its border and its box shadow, dropped to `--muted` and sat flush against the column edge on 2px of side padding. It saved about 55px of hero height and it cost the hero its second action outright: at 390px "Discover your gains" rendered as a line of grey type between a gold slab and the guarantee badge, with no boundary, no surface and nothing but hover — which a phone does not have — to say it could be pressed. A control that only announces itself to a pointer is not a control on a touch device. It is a recessed glass button now. Quieter than the gold in every channel that matters: no fill, no bevel, a warm hairline instead of a ramp, and text at --text rather than --on-gold. But it has a boundary, a ground darker than the hero art behind it, the same width as the primary, and a 46px box — which is the 44px touch minimum with the 0.95 UI scale that applies between 561 and 720 already taken off (46 x 0.95 = 43.7; below 561 the scale is 1 and it is a true 46). The pair reads as an action and an alternative because of weight, not because one of them stopped looking like a button. */ .hero-actions { flex-direction: column; align-items: stretch; gap: 10px; } .hero-actions .btn-ghost { min-block-size: 46px; padding: 12px 20px; font-size: 15px; /* Opaque enough to stop the hero photograph. --sf-1 is a 0.035 film of the text colour, which over a lit circuit-board image is not a surface at all; a dark ground is what makes this read as recessed rather than as a rectangle drawn on the art. */ background: rgba(0, 0, 0, 0.42); border-color: rgba(227, 179, 65, 0.3); color: var(--text); /* A recess, not a lip: dark along the top edge, a hint of light along the bottom. The inverse of every raised object on the page, which is what says "this one is set into the surface". */ box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.5), inset 0 -1px 0 rgba(247, 243, 232, 0.05); } /* :active is the state a finger actually reaches. It warms the ground and lights the ring — the same illumination the pointer gets — so a tap is acknowledged before the anchor navigates. */ .hero-actions .btn-ghost:hover, .hero-actions .btn-ghost:active { background: rgba(227, 179, 65, 0.11); border-color: var(--ring-gold); color: var(--text); } /* A strip, not a lozenge: the radius comes down to the housing's own 4px, the padding halves, and the type steps down one notch. The sentence is unchanged — this is the guarantee, and shortening it would be shortening the offer. */ /* `.hero` in front of both: the base .guarantee-badge rule is declared 2700 lines further down (it is shared with the booking modal), and a media query adds no specificity — an unqualified copy here would simply lose on source order. */ .hero .guarantee-badge { margin-top: 16px; padding: 9px 12px; border-radius: 4px; gap: 9px; font-size: 12.5px; line-height: 1.45; } .hero .guarantee-badge .gbadge-ico { width: 17px; height: 17px; } } /* The hero's primary used to add a 30px gold bloom on top of the base button's own. Deleted rather than tuned: the base treatment is the whole design of this control, and a section-specific glow is exactly the kind of local override that made the old page read as several designs at once. */ /* services ticker */ .ticker { margin-top: 26px; max-width: min(540px, 100%); overflow: hidden; white-space: nowrap; mask-image: linear-gradient(90deg, transparent, #000 8%, #000 92%, transparent); } .ticker-track { display: inline-flex; width: max-content; animation: tickerMove 30s linear infinite; } .ticker-track span { color: var(--faint); font-size: 13.5px; font-weight: 600; letter-spacing: 0.5px; padding-inline-end: 6px; } @keyframes tickerMove { to { transform: translateX(-50%); } } [dir="rtl"] .ticker-track { animation-name: tickerMoveRtl; } @keyframes tickerMoveRtl { to { transform: translateX(50%); } } /* ---------------------------- the metric strip --------------------------- Three readings on one rail, divided by hairlines rather than by 40px of air. A flex row with a gap is three unrelated numbers that happen to be near each other; a ruled strip is one instrument with three channels, which is what these actually are. Grid, not flex, and minmax(0, …): the third stat is a PHRASE, not a counter, and under flex it set its own width and pushed the two real counters out of step with the captions under them. Equal columns pin all three to one grid at every width and in every language. */ .hero-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--ring); } .hero-stats .stat { padding-inline: 18px; border-inline-start: 1px solid var(--ring); } .hero-stats .stat:first-child { padding-inline-start: 0; border-inline-start: 0; } /* Below 560px the strip turns from three vertical channels into three READOUT ROWS — label at the inline start, value at the inline end, one hairline between them. Exactly the collapse .est-box and .mt-stat already make at 680px, so the page has one answer to "this row is too narrow" rather than three. It is also a bug fix. Three equal columns at 320px are 75px wide, and the third stat is a PHRASE — "Performance-first" measures 133px — so it overflowed its cell and was silently cut off by `.hero { overflow: hidden }`. The old flex row wrapped instead of clipping, which is what hid this until the strip was measured. `row-reverse` rather than reordering the DOM: flex direction is writing-mode aware, so row-reverse puts the caption at the inline start and the figure at the inline end in BOTH directions, while the DOM keeps reading "55" then "% avg. FPS gain*" to a screen reader. */ @media (max-width: 560px) { .hero-stats { grid-template-columns: minmax(0, 1fr); margin-top: 28px; } .hero-stats .stat { display: flex; flex-direction: row-reverse; align-items: baseline; justify-content: space-between; gap: 14px; padding-inline: 0; padding-block: 11px; border-inline-start: 0; border-top: 1px solid var(--ring); } .hero-stats .stat:first-child { border-top: 0; padding-top: 0; } .hero-stats .stat span { margin-top: 0; min-width: 0; } /* The phrase stat gets the counters' size back once it has a whole row to itself: the 20px override existed only to stop it stacking three lines deep inside a narrow column, and there is no narrow column any more. */ .stat-text strong { font-size: 22px; line-height: 1.2; text-align: end; } } /* 700, not the 800 this asked for: Space Grotesk tops out at 700, so a variable-font weight above that is clamped, not synthesised — 800 rendered exactly the same pixels while reading as if the counters were heavier than the h1 next to them. Declaring the weight that actually paints. */ .stat strong { font-size: 32px; font-weight: 700; color: var(--accent); font-family: var(--font-head); } /* THE FIGURE IS AN LTR RUN, WHATEVER THE PAGE IS. "1000+" ends in a bidi-neutral character. In an RTL paragraph a trailing neutral takes the paragraph's direction, so Arabic and Hebrew rendered the claim as "+1000" — the sign on the wrong side of the number, which reads as a different figure. `direction: ltr` + `unicode-bidi: isolate` pins the run itself to LTR (digits are LTR in all four languages here) without letting it leak into the caption beside it. Isolating alone was not enough: `text-align: start` then follows the element's own LTR direction and dragged the number to the LEFT edge of an Arabic column while its caption stayed right. So the box is sized to its content and positioned by the GRID instead — `justify-self: start` is resolved against the .stat's inherited direction, which puts the figure on the right in RTL and the left in LTR, exactly where it has always sat. Scoped to [data-count] so the third stat, which is a translated PHRASE and must keep the document's direction, is untouched. */ .stat strong[data-count] { direction: ltr; unicode-bidi: isolate; justify-self: start; width: max-content; } /* The third stat is a phrase, not a counter. At the counters' 32px it breaks at its own hyphen and stacks three lines deep on a 320px screen, so it gets a text size of its own — scoped to .stat-text, leaving the two real counters at 32px. The line box is pinned to the counters' own (32px x the inherited 1.6) so the three captions still sit on one baseline when they share a row. */ /* The third stat is a PHRASE, not a counter, and it wraps: "Performance-first" sets 175px wide at 20px against 164px of column, so it breaks at its own hyphen. The old rule handled that by pinning the line box to the counters' height (32px x 1.6 = 51.2px) so a ONE-line phrase would sit on their baseline — but a two-line phrase in a 51.2px line box opens a 50px hole between the two words and drops the caption far below its neighbours'. Bottom-aligning the whole strip fixes it at the level it actually belongs to: whatever height each value takes, the three captions still land on one line. The phrase can then wrap where it likes, in any language, and it looks deliberate rather than broken. */ .hero-stats .stat { display: grid; align-content: end; } .stat-text strong { font-size: 19px; line-height: 1.2; text-wrap: balance; } /* The caption is in the instrument register (see the shared rule above); all that is left here is the block layout and the gap to the figure. */ .stat span { display: block; margin-top: 5px; } .fineprint { color: var(--faint); font-size: 12px; margin-top: 14px; } /* ------------------------- the proof console ----------------------------- The strongest evidence on the page is a photograph of somebody's real benchmark, and until this pass it was mounted like a stock image: a bright white screenshot in a light card, with three readings floating OUTSIDE it on the corners. Two things were wrong with that, and neither was the screenshot. 1. The readings had no provenance. "632 FPS avg" hanging in the air beside a card is a marketing number; the same figure printed inside the bezel, one line above the caption that names the machine and the game it was measured on, is a reading. Nothing about the values changed — they are the same three numbers, off the same session, and they are still the ones written into the image's alt text. 2. The white had no frame. A 1175px screenshot of a light benchmark tool dropped into a near-black page reads as a paste-in unless something mediates the edge. What mediates it here is an inset shadow and a hairline drawn ON TOP of the image, which is what a screen behind glass actually looks like, plus a dark metadata band above and below so the white is a panel inside an instrument rather than the instrument. The traffic-light dots are gone with the chips. Three coloured circles borrowed from a macOS title bar say "this is a window"; the lamp that replaces them says "this channel is live", which is the same thing every other lamp on this page means. */ .fps-wrap { position: relative; } .fps-card { background: var(--sf-1); border: 1px solid var(--ring); border-radius: 12px; box-shadow: var(--lip); overflow: hidden; transition: transform var(--t-fast) ease-out; will-change: transform; } .fps-card-head { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border-bottom: 1px solid var(--ring); background: var(--sf-2); } /* The same 6px lamp the section labels and the FAQ rows wear, at the same two-part construction — filled core, dim halo. One signal, one meaning. */ .fps-card-lamp { flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 3px rgba(227, 179, 65, 0.14); } .fps-card-title { color: var(--accent); font-size: 11.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.6px; font-family: var(--font-head); } /* In the instrument register (shared rule above), so the provenance line under the benchmark reads as the machine's own caption rather than as a sentence someone added. Overrides only the two things that differ from the register: it is dimmer than a label and it has to wrap. */ /* Mono, because it is the machine's own caption on the benchmark above it — but NOT uppercase and NOT tracked, because it is a sentence with hardware names in it, and the register's Latin conventions stop being readable the moment the label becomes prose. The register rule deliberately does not list this selector for that reason. */ .fps-card-foot { padding: 12px 16px; border-top: 1px solid var(--ring); color: var(--faint); font: 400 11px/1.6 var(--mono); } /* --------------------- section ambience backgrounds --------------------- */ .section { position: relative; } .section > .container { position: relative; z-index: 1; } .section-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; } .section-bg img { width: 100%; height: 100%; object-fit: cover; opacity: 0.13; filter: saturate(0.85) brightness(0.9); transform: scale(1.12); animation: bgDrift 38s ease-in-out infinite alternate; will-change: transform; } .section-bg video { width: 100%; height: 100%; object-fit: cover; opacity: 0.18; filter: saturate(0.9); } /* ------------------------- art direction, by job ------------------------- One overlay strength everywhere is not art direction, it is a default. The artwork now sits at one of three levels, chosen by what the section is FOR: quiet 0.06 a section the visitor has to READ or DECIDE in — the calculator, the pricing rack, the contact form. Anything behind a feature list or a form field is interference. medium 0.13 the narrative sections between them — how it works, the value comparison, the FAQ, everything we do. This is the page's atmosphere and its transitions. strong 0.22 the one brand moment: studios & companies. The hero keeps its own level (video at 0.18) and the game rail keeps the loudest treatment on the page, which is not an overlay at all — it is the tags and the live ECG trace. */ .section-bg-quiet img { opacity: 0.06; filter: saturate(0.7) brightness(0.85); } .section-bg-strong img { opacity: 0.22; } .section-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, var(--bg) 0%, rgba(7, 6, 4, 0.3) 30%, rgba(7, 6, 4, 0.3) 70%, var(--bg) 100%); } .section-alt .section-bg::after { background: linear-gradient(180deg, var(--bg-alt) 0%, rgba(13, 11, 7, 0.3) 30%, rgba(13, 11, 7, 0.3) 70%, var(--bg-alt) 100%); } @keyframes bgDrift { from { transform: scale(1.12) translate3d(-1.4%, 0, 0); } to { transform: scale(1.12) translate3d(1.4%, -1.2%, 0); } } /* -------------------- studios & companies (special) --------------------- Subject is the badge itself, not `.section-head .kicker…`: the studios heading sits in its own masthead now (see "studios / creative services" below), so a descendant selector anchored to .section-head would silently stop matching the only element that ever wears this class. Every section wears the pill; only this one is special. It therefore adds nothing but the difference — the travelling sheen, a heavier glow and half a point of type — on top of the shared .kicker shape. Restating the padding and radius here is how the two would quietly drift apart later. The ✦ in front of the label is part of the translated string, not this rule, and it is deliberately the only starred label on the site. */ /* The studios badge keeps the top tier and keeps its star, which lives in the translated string and not in this rule. It is now the only label on the page whose rail carries the travelling sheen — the same one the MOST POPULAR flag and the tier meter use, so the three read as one material — and the only one whose text is at full brightness. Everything it adds is a difference on top of the shared shape; nothing here restates the base. */ .kicker.kicker-special { color: var(--text); } .kicker.kicker-special::after { background: var(--gold-sheen); background-size: 200% auto; animation: gradSheen 5.5s ease-in-out infinite; mask-image: linear-gradient(to right, #000, transparent 88%); -webkit-mask-image: linear-gradient(to right, #000, transparent 88%); } [dir="rtl"] .kicker.kicker-special::after { mask-image: linear-gradient(to left, #000, transparent 88%); -webkit-mask-image: linear-gradient(to left, #000, transparent 88%); } /* ------------------ hero video + gold-framed proof card ----------------- */ .hero { position: relative; overflow: hidden; } .hero > .container { position: relative; z-index: 1; } /* The proof card was framed in a 2px gold gradient border with a 38px gold bloom around it — the loudest object on the page, spent on a frame rather than on what is inside it. The photograph it holds is the single strongest piece of evidence DQT has, and it was competing with its own housing. Now the housing is the same module as everything else, one level brighter: hairline ring, lit lip, no bloom. The only gold left on it is the card title, which names what you are looking at. */ .hero .fps-card { border: 1px solid var(--ring); overflow: hidden; background: var(--sf-1); box-shadow: var(--lip-lit), 0 24px 60px rgba(0, 0, 0, 0.5); } /* The glass. The inset ring and shadow are painted by a pseudo-element over the image rather than as a border on it, because a border on the container would sit outside the white and change nothing about where the white meets the dark — the whole problem being solved is that edge. */ .fps-shot { position: relative; background: #fff; } .fps-shot img { display: block; width: 100%; height: auto; } .fps-shot::after { content: ""; position: absolute; inset: 0; pointer-events: none; box-shadow: inset 0 0 0 1px rgba(10, 8, 5, 0.18), inset 0 10px 22px -10px rgba(10, 8, 5, 0.5), inset 0 -10px 22px -10px rgba(10, 8, 5, 0.38); } /* The three readings, mounted. Same figures as the old floating chips, now inside the bezel and above the caption that names the session they came from. Grid rather than flex so the three channels are equal at every width and in every language, and hairlines rather than gaps so the strip reads as one instrument with three channels — the same construction as .hero-stats. Exactly one of the three is gold: the FPS average, which is the headline reading. The other two are warm white. Gold means "this is the measurement being reported", not "this is a number". */ .fps-readout { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-top: 1px solid var(--ring); background: var(--sf-2); } .fps-read { padding: 10px 12px; text-align: center; border-inline-start: 1px solid var(--ring); } .fps-read:first-child { border-inline-start: 0; } .fps-read b { display: block; font-family: var(--font-head); font-size: 19px; font-weight: 700; line-height: 1.1; letter-spacing: -0.01em; color: var(--text); font-variant-numeric: tabular-nums; } .fps-read:first-child b { color: var(--accent); } .fps-read i { display: block; margin-top: 3px; font-style: normal; color: var(--faint); font: 600 9.5px var(--mono); text-transform: uppercase; letter-spacing: 0.09em; } /* --------------------------- seo learn card ---------------------------- */ /* -------------------------------- strip -------------------------------- THE GAME RAIL. What was wrong with it: a centred label on one line and nine pills wrapped and centred on the line under it, spread across the full 1140px container. At desktop width that is two shallow bands of mostly air — the section was about 100px tall and carried perhaps 30% ink — and centre-aligned wrapping rows always read as an accident rather than a decision, because the ragged edge lands somewhere different at every viewport. It is now ONE horizontal rail: a label plate at the reading edge, a vertical hairline, then the titles running off it as keys on a deck. The composition is anchored at both ends instead of floating, it is about 40% shorter, and the ECG behind it finally has a rail to run along rather than a box to fill. The pills are gone with the centring. A 999px radius is a tag you click; a 7px radius on a recessed ground is a key on a panel, which is what these are — nine titles the bench is set up for, not nine filters. Same reasoning that turned the tools tabs into a segmented control two sections down. --------------------------------------------------------------------------- SECOND PASS. The rail above was right in principle and thin in practice. Measured at 1440 before this pass: 104px tall, nine chips wrapping 7 + 2, a two-item second row hanging off the end, and the ECG reading straight THROUGH every chip because their ground was rgba(0,0,0,0.3) — a trace you can see through a key does not read as a trace behind a key, it reads as a line someone forgot to mask. Four things change, and they are all the same idea: make the keys real objects and the rail a real bay. WRAP -> GRID. flex-wrap put 7 keys on row one and 2 on row two, at whatever widths their titles happened to be. The keys are now equal columns in an auto-fit grid, so row two lands UNDER row one on the same column centres. A partial last row in an aligned grid reads as an empty slot in a keypad; a ragged wrap reads as an accident. That is the whole "row balance" fix, and it costs one declaration. CHIP -> KEY. Each key gets an opaque cap and a recessed WELL under its glyph — the same figure/ground move the tool tabs make, one level down. The well is drawn on the itself (background + padding + radius on an SVG box) so no wrapper element had to be invented for it. OPACITY. The cap is opaque, so the ECG is genuinely occluded and visibly passes BETWEEN the keys instead of under them. THE PLATE STRETCHES. `align-items: stretch` turns the label's border-inline-end into a full-height divider instead of a 13px stub floating beside a two-row block. The rail now has a left bay and a key field, which is what it was always trying to be. The accent variation is inside the key rather than across the keys: at rest the glyph is gold at 0.62 and the title is a neutral grey, so every key has its own two-step hierarchy and the row does not read as nine identical brown chips. Hover promotes the whole object. Nothing here is a new colour; the gold is --accent at an alpha and the grey is a desaturated --muted. --------------------------------------------------------------------------- THIRD PASS supersedes the last two bullets above: the label bay and the grid are gone, and so is the ECG-behind-the-keys idea that the opaque cap was invented to serve. What survives from the second pass is the key itself — opaque cap, glyph in a well, warm mark over neutral title — and the channel tokens below. The layout reasoning lives at THE RAIL ITSELF, a few hundred lines down, and the two bullets are left standing because the tokens they explain are still the tokens in use. */ .strip { border-block: 1px solid var(--border); /* A shade below the page rather than above it: the rail is a slot milled into the deck between two sections, not a card sitting on top of one. */ background: var(--bg); box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.45); position: relative; overflow: hidden; /* ---- the rail's own channel ---------------------------------------- Scoped to `.strip`, and named --gr-* rather than reusing --sf-*: those are declared once in :root and are alpha films of the TEXT colour, which is exactly what this pass needs not to be. A film over the rail's ground cannot occlude the ECG running behind it; an opaque cap can. */ --gr-cap: #101012; /* the key's cap. opaque on purpose */ --gr-cap-lit: #191509; /* and its lit twin */ --gr-edge: rgba(238, 241, 247, 0.10); --gr-well: rgba(0, 0, 0, 0.5); /* the recess under the glyph */ /* The title at rest. A desaturated --muted rather than --muted itself: #b0a68d is a warm brown, and nine of them in a row is most of why this rail read as one flat brown band. Same luminance, no cast, so nothing about the contrast budget moves — 9.9:1 on the cap. */ --gr-ink: #b6b4b0; /* The glyph at rest. Gold, held back, and the only warm thing on a key that is not being hovered. Composites to #937530 over the well: 4.6:1, well over the 3:1 a graphic needs. */ --gr-glyph: rgba(227, 179, 65, 0.62); } /* Heart-monitor trace behind the game tags: the line itself stays put (dim), while a bright gold pulse sweeps along it like a live ECG reading. All three share one path; dasharray sum (1600) > path length, so exactly one "comet" travels the line per cycle and the loop is seamless. */ /* The trace gets a BAND, not the whole box. `inset: 0` handed a 64-unit viewBox the strip's full height with preserveAspectRatio="none", so every change to the rail's padding silently restretched the waveform — the peaks were about 25% taller than drawn, which is why the line read as decoration rather than as a reading. Pinning it to its own 64px track centred on the rail means the ECG is now drawn at its true proportions at every viewport, and the rail can get as compact as it likes without touching it. Centred with top:50% + translateY(-50%): both are symmetric, so there is no RTL twin to keep in step (the horizontal mask below is symmetric too — only the travel direction mirrors, which it already does). */ /* THIRD PASS: THE TRACE LEAVES THE BACKGROUND. It used to be an absolutely-positioned band centred on the whole rail, i.e. a waveform painted BEHIND nine opaque keys. Two things were wrong with that. The keys occluded almost all of it, so what the reader actually saw was a line entering from the left margin, disappearing, and coming back out on the right — decoration, not a reading. And it ran edge to edge through 200px of empty deck before it reached anything, which is what read as "a line someone forgot to mask". It is now a FLEX CHILD of the rail's header row, taking the slack between the nameplate and the far edge. That single move fixes all of it: the trace starts at the plate the lamp is on, it is never occluded, it is drawn at its own scale, and it needs no masking arithmetic to stay clear of the label in either reading direction — flex order does that in both. 64px of waveform on a ~17px row: the negative block margins let the trace keep the height it is drawn at without the header reserving it, so the peaks are true and the row is still a row. `.strip` is `overflow: hidden`, so the two extremes cannot escape the rail. */ .strip-pulse { position: relative; flex: 1 1 auto; min-width: 0; height: 64px; margin-block: -29px -17px; pointer-events: none; /* Fades at the FAR end only, so the signal reads as leaving the nameplate rather than materialising next to it. The one asymmetric rule in the rail, so it takes an RTL twin — and the comet already travels the other way there (`animation-direction: reverse`, below), so it still runs OUT. */ mask-image: linear-gradient(90deg, #000 62%, transparent); -webkit-mask-image: linear-gradient(90deg, #000 62%, transparent); } [dir="rtl"] .strip-pulse { mask-image: linear-gradient(270deg, #000 62%, transparent); -webkit-mask-image: linear-gradient(270deg, #000 62%, transparent); } .strip-pulse svg { width: 100%; height: 100%; display: block; } .strip-pulse use { fill: none; stroke-linejoin: round; stroke-linecap: round; } /* Deliberately NOT retuned by any pass, and the third one is the strongest case yet for leaving it alone. The first instinct each time the rail changes is to brighten the base line; it has been wrong each time, because `.strip-pulse` keeps its fixed 64px height (see above) whatever the rail does around it, so the trace is drawn at exactly the size it always was and 0.13 reads exactly as it did. What has changed twice is what sits in FRONT of it: the keys went opaque, and now nothing sits in front of it at all. */ .pulse-base { stroke: rgba(231, 192, 90, 0.13); stroke-width: 1.2; } .pulse-glow { stroke: rgba(231, 192, 90, 0.26); stroke-width: 3.6; stroke-dasharray: 150 1650; animation: pulseRun 5.5s linear infinite; } .pulse-head { stroke: #ffe9a8; stroke-width: 1.5; stroke-dasharray: 70 1730; animation: pulseRun 5.5s linear infinite; } @keyframes pulseRun { from { stroke-dashoffset: 1800; } to { stroke-dashoffset: 0; } } [dir="rtl"] .pulse-glow, [dir="rtl"] .pulse-head { animation-direction: reverse; } /* `infinite` above is meant literally, so main.js marks the two states where the frame buys nothing — the strip scrolled out of view (.strip-idle) and the tab in the background (.page-hidden) — and either one parks the comet. Doing the AND here rather than in JS keeps the two gates independent of each other. play-state only. `animation: none`, or any shorthand, would reset the name and the comet would restart from the left edge on resume instead of carrying on from where it stopped. Both selectors are (0,2,0) against the (0,1,0) rules that declare the shorthand, so this wins on specificity and not on source order. Neither class is ever authored into the markup, which is what keeps the animation running as originally designed when this JS does not get to run. Reduced motion drops the animation and the opacity entirely a few hundred lines down, leaving nothing here to act on. */ .strip-idle .pulse-glow, .strip-idle .pulse-head, .page-hidden .pulse-glow, .page-hidden .pulse-head { animation-play-state: paused; } /* ---------------------------- THE RAIL ITSELF ---------------------------- THIRD PASS: FROM A DECORATED STRIP TO A RACK OF PROFILES. The second pass made the keys real objects. What it could not fix from inside its own layout was the COMPOSITION, and measured at 1440 the numbers said so plainly: the rail was 1440px wide and its nine keys occupied x=409-1238. Everything to the reading side of that — a 200px full-bleed margin with a flat ECG lying in it, then a 187px nameplate bay — was empty. A quarter of a signature component doing nothing is why it read as a strip with some tags on it rather than as a rail. Three changes, and they are one idea: give the rail a HEAD and a RACK. THE NAMEPLATE GOES ON TOP. It was a side bay whose only job was to hold a divider; as a header it costs one text line and hands the whole container width back to the keys. The hairline it used to carry is now the trace itself (see `.strip-pulse` above), which is a better line for a rail that is making a live claim. THE KEYS BECOME PROFILE TILES. Glyph in a recessed well ON TOP, title under it, two lines of title reserved on every key so the rack is one height. A horizontal chip is a tag; a tile with its mark over its name is what a supported-profile key looks like, and it is also what lets nine of them stand in ONE row at desktop. THE RACK IS A TRAY. The keys are mounted in a recessed housing rather than floating on the deck, so the rail has a centre of gravity and a visible boundary. Two levels: the tray is darker than the deck, the caps are lighter than the tray. NINE KEYS, AND COLUMN COUNTS THAT DO NOT LEAVE A HOLE ---------------------------------------------------- The previous pass chose 5 columns above 1100 and shipped exactly the fault it was opened to fix: 5 + 4 leaves one empty slot at the end of row two. The fix is to stop using grid tracks and use a flex basis that IS a track: calc((100% - (n-1) * gap) / n) gives n identical columns, and `justify-content: center` then CENTRES a short last row instead of leaving a gap at its end. Every band is either exact or symmetric: 9 columns 9 one row, and the point of the pass 5 columns 5 + 4 centred a taper, not a hole 3 columns 3 + 3 + 3 exact 1080 IS MEASURED, and it is a physical viewport width — media queries are evaluated on , which `body { zoom: 0.95 }` does not touch, so the body sees 1080/0.95 = 1136.8px of layout there. Nine tracks then measure (1088.8 - 20 tray - 64 gaps) / 9 = 111.6px, and 111.6 sets "League of" on one line at 12px with room to spare. Below that the rack takes five, and below 500 three — 320 is the binding case for three and it comes out at 78.7px, which holds "Legends" at 11px. The titles are the one thing in this rail that is the same string in every language: they are proper nouns and carry no data-i18n. So unlike the label bay it replaced, the rack's arithmetic does not translate, and none of these numbers has a Spanish worst case. */ .strip-inner { padding: 26px 24px 28px; position: relative; } /* The head: nameplate, then the trace running out of it to the far edge. */ .strip-head { display: flex; align-items: center; gap: 16px; margin-block-end: 15px; } /* The nameplate. Same lit lamp as before — the 6px gold circle the value card's finding row uses — because this rail is a live statement about what the bench is set up for. What it no longer needs is the opaque background and the divider it used to carry: it is not standing in front of the trace any more, it is the thing the trace runs OUT of. */ .strip-label { flex: none; display: inline-flex; align-items: center; gap: 10px; color: var(--muted); font: 600 11.5px var(--mono); text-transform: uppercase; letter-spacing: 0.1em; } .strip-label::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 8px rgba(227, 179, 65, 0.5); } /* THE RACK. A recessed tray with the keys mounted in it. The inset shadow is two lines and not one: dark along the top edge is the wall the tray is cut into, light along the bottom is the far wall catching the deck light — the inverse of `--lip`, which is what a recess is. */ .strip-tags { --gr-cols: 3; --gr-gap: 7px; display: flex; flex-wrap: wrap; justify-content: center; gap: var(--gr-gap); padding: 10px; border-radius: 14px; background: rgba(0, 0, 0, 0.42); border: 1px solid rgba(238, 241, 247, 0.07); box-shadow: inset 0 3px 6px rgba(0, 0, 0, 0.6), inset 0 -1px 0 rgba(247, 243, 232, 0.045); } @media (min-width: 500px) { .strip-tags { --gr-cols: 5; --gr-gap: 8px; } } @media (min-width: 960px) { .strip-tags { --gr-cols: 9; --gr-gap: 8px; } } /* A key: an opaque cap, a glyph in a well, a title under it. `align-items` is deliberately left at `stretch` on the container, so every key in a row is the height of the tallest — and because the title block reserves two lines on every key, that height is the same in every row too. */ .strip-tags .gkey { flex: 0 0 calc((100% - (var(--gr-cols) - 1) * var(--gr-gap)) / var(--gr-cols)); display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; padding: 10px 6px 11px; border-radius: 10px; border: 1px solid var(--gr-edge); background: var(--gr-cap); box-shadow: var(--lip), 0 1px 2px rgba(0, 0, 0, 0.4); transition: background var(--t-ui) ease, border-color var(--t-ui) ease, box-shadow var(--t-ui) ease; } /* Two lines reserved on every key, always. "League of Legends" wraps at every column width this rail uses and the other eight do not, so without a reserve one key in the rack is taller than its neighbours — and stretch would then hand that height to its whole row and not to the rows above it. A fixed two-line box makes the rack one height at every breakpoint, which is the difference between a keypad and a wrap. `text-wrap: balance` so the two lines of the one title that uses both come out even rather than a full line over one stranded word. */ .strip-tags .gkey b { /* Top-aligned inside the reserved box, not centred. Centring put the one two-line title 5px higher than its eight one-line neighbours, so the row of names had no common line — which on a rack of identical keys is the first thing the eye catches. Aligned to the top, every FIRST line sits on one baseline and the title that needs a second one simply grows down into the reserve that was already there for it. */ display: flex; align-items: flex-start; justify-content: center; min-block-size: 2.5em; color: var(--gr-ink); font-size: 12px; font-weight: 600; line-height: 1.25; text-align: center; text-wrap: balance; transition: color var(--t-ui) ease; } /* The glyph sits in its own recess, and it is the key's figure — bigger than it was, because a tile has room for it and because the mark is what makes a profile key recognisable at a glance. Gold held back at rest, so every key carries its own two-step hierarchy (warm mark / neutral title) and the rack does not read as nine identical brown chips. */ .strip-tags .gkey svg { box-sizing: content-box; flex: none; width: 17px; height: 17px; padding: 6px; border-radius: 9px; background: var(--gr-well); box-shadow: inset 0 0 0 1px rgba(238, 241, 247, 0.05); color: var(--gr-glyph); transition: color var(--t-ui) ease, background var(--t-ui) ease, box-shadow var(--t-ui) ease; } /* Illuminates, does not lift. Nine keys that all jump under a pointer crossing the rack is the exact noise this design is removing from the page. The cap, the well and the title all warm together, so the key comes forward as one object rather than as a border that changed colour. */ .strip-tags .gkey:hover { background: var(--gr-cap-lit); border-color: var(--ring-gold); box-shadow: var(--lip-lit), 0 1px 2px rgba(0, 0, 0, 0.4); } .strip-tags .gkey:hover b { color: var(--text); } .strip-tags .gkey:hover svg { color: var(--accent); background: rgba(0, 0, 0, 0.45); box-shadow: inset 0 0 0 1px rgba(227, 179, 65, 0.28); } /* Phone. The rack tightens; it does not scroll. A horizontally scrolling rail would be the gaming-native answer and is deliberately not used — every key here is a plain with no tab stop, so a scroll container built out of them is one a keyboard cannot reach. Three columns still, down to 320. That is what the tile format buys: the old horizontal chip needed 104px to hold "League of Legends" beside a glyph and fell to two columns and FIVE rows at 320; a tile only has to hold "Legends" on one line, which fits in 78.7px, so the rack stays 3 x 3 on every phone. */ @media (max-width: 560px) { .strip-inner { padding: 20px 24px 22px; } .strip-head { gap: 12px; margin-block-end: 12px; } .strip-tags { padding: 8px; border-radius: 12px; } .strip-tags .gkey { padding: 8px 4px 9px; gap: 5px; border-radius: 9px; } .strip-tags .gkey b { font-size: 11px; line-height: 1.2; min-block-size: 2.4em; } .strip-tags .gkey svg { width: 14px; height: 14px; padding: 4px; border-radius: 7px; } } /* ------------------------------- sections ------------------------------ */ .section { padding: 88px 0; } .section-alt { background: var(--bg-alt); border-block: 1px solid var(--ring); } /* ---------------------------- the section head --------------------------- Off centre, and that is the point. Six of the seven heads on this page were the identical object — a centred 640px column of pill / h2 / paragraph — which is most of why the page read as `heading, paragraph, cards` seven times over. Moving the head to the inline start does three things at once: the rail now has an edge to run to, the h2 shares the text block's own measure instead of floating over the middle of it, and the eye starts every section in the same place it starts every paragraph. `--head-w` rather than a hardcoded max-width, so the split variant below can widen the head to the full container without restating anything else. */ /* --------------------------- section masthead ---------------------------- ONE pattern for every major section introduction on the page, centred on the container's own axis. Seven sections used to introduce themselves three different ways — a start-aligned stack, a two-column split that put the paragraph opposite the heading, and the studios masthead with its own rule — and the result was a homepage with no visual centre and a lot of weight pinned to one edge. Centred, and specifically centred HERE: `margin-inline: auto` on a block inside the section's own `.container`, so the masthead sits on the page's axis rather than on the axis of whatever column happens to be beneath it. That is the difference between this and centring inside a grid cell, and it is why the split variant had to go rather than be centred in place. The instrument identity survives the move intact — the lamp, the mono register, the tracked eyebrow, the warm-white heading and the muted description are all unchanged. What is dropped is the RAIL: a hairline that runs from the label to the edge of the block is a start-aligned device by construction, and the symmetric version of it (short rails either side) needs a third pseudo-element that .kicker does not have, on an element that cannot gain a wrapper without disappearing from /ar/ (build-ar.js replaces the whole inner content of a data-i18n element). A centred lamp and a centred label is the compact form, and it is one signal instead of two. The rhythm, in the terms the spacing system already uses: eyebrow → 14px → heading → 12px → description → 48px → content tightening to 10 / 10 / 34 below 720px. */ .section-head { --head-w: 660px; text-align: center; max-inline-size: var(--head-w); margin: 0 auto 48px; display: grid; justify-items: center; } /* Centring the label unit, lamp included. `justify-content: center` on the flex row moves the lamp and the text together, so the lamp stays welded to the first line — the same property that keeps it from floating beside a second line at 320px. Nothing directional, so RTL mirrors for free. */ .section-head .kicker { justify-content: center; } /* The rail, retired inside a masthead only. It is still the device that marks every SUBSECTION label (.svc-kicker) and the hero eyebrow, which are both start-aligned and both still want an edge to run to. */ .section-head .kicker::after { content: none; } /* Every label on the page wears this pill; the three tiers differ only in how they fill it. .kicker secondary — tint + hairline (this rule) .kicker.kicker-main a major section's own name — filled gold .kicker.kicker-special the studios badge — filled, sheened, starred Base is the *quiet* tier on purpose. The three `.svc-kicker` labels inside "Everything we do" introduce card groups, not sections, and they sit among the tune/repair/results grids where a filled pill would out-shout the cards it is only labelling. Anything that is not explicitly promoted stays here, which is the safe default: a new label added without thinking is quiet, not loud. Solid gold otherwise means interactive on this site — .btn-primary, the active .tool-tab, a chosen .chip — so .kicker-main has to be filled without reading as a control; see the distinctions listed on that rule. That constraint is why the quiet tier keeps the filled pill away from the subsection labels that sit nearest the actual buttons and tabs. The rule itself lives with the hero eyebrow further up the file, because .pill and .kicker are the same object and had to be declared together. What is left here is the doc comment, which is where a reader looking for the label hierarchy will come first. */ /* A major section's own name. Filled with the house gold so the top-level sections read louder than the subsection labels inside them — the tier this variant exists to create. It has to be filled *and* obviously not a control, so it takes the fill and drops everything that makes gold mean "press me": - no hover, no :active, no transform — a with no pointer cursor; - no CTA drop shadow. .btn-primary throws 0 6px 24px / 0.3; this glow is 0 2px 10px / 0.18, close to the surface and far dimmer; - an inset top highlight instead, which reads as a printed label rather than the flat pressed fill of .tool-tab.active (same --accent-grad, nothing else in common); - no travelling sheen and no animation — that stays exclusive to .kicker-special, which is what keeps the studios badge the loudest pill on the page and this one merely the second. `border-color: transparent`, not `border: none`, for the same reason .kicker-special does it: the pill keeps the base rule's border-box height, so promoting a label cannot shift the 10px gap to the h2 under it. Nothing here is directional, so RTL needs no counterpart. */ .kicker.kicker-main { color: var(--accent); } .kicker.kicker-main::after { background: linear-gradient(to right, var(--ring-gold), transparent 88%); } [dir="rtl"] .kicker.kicker-main::after { background: linear-gradient(to left, var(--ring-gold), transparent 88%); } /* Same three corrections as the hero h1, at section scale: balance so the break is designed rather than greedy, a measure in ch, and tracking in em so it stays proportional across the clamp. `Check your system before you / book` — the stranded word this pass was asked to fix — is a 34-character string that balance splits 17/17. */ .section-head h2 { font-size: clamp(27px, 3.2vw, 38px); font-weight: 700; margin: 14px auto 12px; letter-spacing: -0.015em; line-height: 1.12; text-wrap: balance; max-inline-size: 20ch; } /* 52ch rather than the 58 it was. A centred paragraph is read from both edges, so the measure that was comfortable when it was ragged-right on a fixed left edge is a little wide once both edges move — and the shorter measure is what makes the description look like part of the masthead instead of the first paragraph of the section. */ .section-head p { color: var(--muted); max-inline-size: 52ch; margin-inline: auto; /* `balance`, not the `pretty` a paragraph normally wants. These are one to three lines of centred introduction, and `pretty` only repairs the LAST line — which on a centred two-liner leaves "...and ends with proof / of gains." sitting under a full-width line as a two-word stub, dead centre. Balance evens all of them, and the 6-line cap the spec puts on it is never approached by a masthead description in any of the four languages. Running prose elsewhere on the page keeps `pretty`. */ text-wrap: balance; } @media (max-width: 720px) { .section-head { margin-bottom: 34px; } .section-head h2 { margin: 10px auto 10px; } } .grid { display: grid; gap: 22px; } .grid-3 { grid-template-columns: repeat(3, 1fr); } .grid-2 { grid-template-columns: 1fr 1fr; } /* --------------------------------- module -------------------------------- Was: an opaque brown box with a 16px radius and, on hover, a 32px black shadow and a 3px lift. Three separate SaaS tells in one rule. Now: a film with a hairline ring and a lit top lip. The radius comes down to 12px because 16 is the radius of a content card and this is a housing; the shadow is gone entirely, replaced by the lip, which says raised-out-of rather than floating-above; and hover ILLUMINATES instead of lifting — the ring warms and the film thickens. A page of cards that all jump under the pointer is the template look this pass is trying to leave behind, and it is also the thing the pointer keeps re-triggering as it crosses the grid. The lift survives in exactly one place, on the plan the visitor is choosing between (see .plan:hover), where a physical response to a decision is worth the movement. */ .card { background: var(--sf-1); border: 1px solid var(--ring); border-radius: 12px; padding: 26px; box-shadow: var(--lip); transition: background var(--t-ui) ease, border-color var(--t-ui) ease, box-shadow var(--t-ui) ease; } /* Note what is NOT here: `transform`. The old rule had to write `translateY(calc(var(--reveal-y) - 3px))` because it wanted a 3px lift and had to compose it with the reveal offset or one would cancel the other. This rule wants no lift, and the correct way to want no lift is to say nothing — then `.reveal`'s own `translateY(var(--reveal-y))` governs, at lower specificity, and there is no cascade interaction to get wrong. Writing `transform: none` here instead would out-rank the reveal and freeze every card at its settled position mid-animation. */ .card:hover { background: var(--sf-2); border-color: var(--ring-gold); box-shadow: var(--lip-lit); } /* ------------------------------ inline icons ---------------------------- */ .svg-ico { width: 100%; height: 100%; fill: none; stroke: var(--accent); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .feature-ico, .trust-ico, .repair-ico { width: 46px; height: 46px; padding: 10px; margin-bottom: 16px; border-radius: 10px; background: var(--sf-1); border: 1px solid var(--ring); box-shadow: var(--lip); transition: background var(--t-ui) ease, border-color var(--t-ui) ease, box-shadow var(--t-ui) ease; } /* The tile fills gold and the glyph flips dark — the same answer the studios cells give a pointer. These three classes appear only inside #services, so the class list is the section scope. Descendant selectors on purpose: the reveal-vs-hover cascade only bites rules whose whole subject is one class plus :hover and which set transform. Nothing here touches transform, so the card keeps its own lift untouched. */ /* The tile used to FILL with the gold gradient on hover and flip its glyph to near-black. Eleven cards on this page did that, which meant eleven gold fills competing with the one gold fill that is an actual button. It now lights instead: the ring warms, the film thickens, the glyph stays gold. Same hover grammar as every other module on the page. Descendant selectors on purpose: the reveal-vs-hover cascade only bites rules whose whole subject is one class plus :hover and which set transform. Nothing here touches transform. */ .feature:hover .feature-ico, .trust:hover .trust-ico, .repair-card:hover .repair-ico { background: var(--sf-2); border-color: var(--ring-gold); box-shadow: var(--lip-lit); } /* -------------------------------- steps -------------------------------- */ /* The three process cards were the loudest modules on the page: a gold-tinted border, a full-width gold bar across the top, a 4px lift and TWO shadows — a 42px black one and a 26px gold one — on hover. Three cards, each announcing itself as hard as the primary action. They are now the same module as everything else, with one difference that is earned: the top bar stays, because these three cards ARE a sequence and the bar is the only thing that says so at a glance. It is dimmed to the ring weight and only the hovered card's bar goes to full gold, which turns a permanent decoration into a pointer position. */ .step { padding-top: 22px; position: relative; overflow: hidden; transition: background var(--t-ui) ease, border-color var(--t-ui) ease, box-shadow var(--t-ui) ease; } .step::after { content: ""; position: absolute; top: 0; inset-inline: 18px; height: 2px; border-radius: 0 0 2px 2px; background: var(--accent-grad); opacity: 0.28; transition: opacity var(--t-ui) ease; } /* Deliberately declares no transform — see the note on .card:hover. */ .step:hover { border-color: var(--ring-gold); } .step:hover::after { opacity: 1; } .step-head { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; } .step-head .step-num { margin-bottom: 0; width: 38px; height: 38px; border-radius: 10px; flex: none; } .step-points { list-style: none; margin-top: 14px; display: grid; gap: 8px; padding: 0; } .step-points li { display: flex; align-items: flex-start; gap: 9px; color: var(--text); font-size: 13.5px; line-height: 1.45; } .step-points li::before { content: "✓"; flex: none; width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: rgba(52, 211, 153, 0.16); color: var(--success); } .how-note { margin-top: 26px; padding: 15px 22px; text-align: center; border: 1px solid rgba(227, 179, 65, 0.35); border-radius: 12px; background: linear-gradient(90deg, rgba(227, 179, 65, 0.09), rgba(227, 179, 65, 0.02)); color: var(--muted); font-size: 14.5px; } .step-art { height: 140px; margin: -20px -28px 18px; border-bottom: 1px solid rgba(227, 179, 65, 0.22); background: linear-gradient(180deg, rgba(227, 179, 65, 0.05), transparent); border-radius: var(--radius) var(--radius) 0 0; overflow: hidden; } .step-art svg { width: 100%; height: 100%; } .art-panel { fill: var(--surface-2); stroke: var(--border); stroke-width: 1.5; } .art-line { stroke: #564b30; stroke-width: 2; fill: none; stroke-linecap: round; } .art-line.thick { stroke-width: 4; stroke: #6a5d3c; } .art-dot-grid circle { fill: #564b30; } .art-knob { fill: url(#gBrand); } .art-meter { fill: none; stroke: #564b30; stroke-width: 2; } .art-badge { fill: var(--surface); stroke: url(#gBrand); stroke-width: 2.5; } .art-check { fill: none; stroke: url(#gBrand); stroke-width: 3.5; stroke-linecap: round; stroke-linejoin: round; } .art-bar { fill: #3a3422; } .art-bar-hot { fill: url(#gBrand); } .art-trend { fill: none; stroke: #ffd75e; stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .art-halo { fill: rgba(227, 179, 65, 0.055); } .art-outline { fill: var(--surface-2); stroke: #6a5d3c; stroke-width: 2; } .art-band { fill: url(#gBrand); opacity: 0.9; } .art-gold { fill: url(#gBrand); } /* knobs glide along their slider tracks like a live tuning session — mechanical ease, no cartoon scaling */ .art-knob { animation: knobSlideL 4.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite; transform-box: fill-box; transform-origin: center; } .art-knob.k2 { animation: knobSlideR 5.6s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite 0.7s; } .art-knob.k3 { animation: knobSlideL 6.4s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite 1.4s; } @keyframes knobSlideL { 50% { transform: translateX(-22px); } } @keyframes knobSlideR { 50% { transform: translateX(24px); } } /* benchmark bars rise into place when the card reveals, then breathe gently */ .art-bar, .art-bar-hot { transform-box: fill-box; transform-origin: bottom; } .art-bar { animation: barSurge 4.4s ease-in-out 1.6s infinite; } .step.visible .art-bar { animation: barGrow 0.7s cubic-bezier(0.22, 1, 0.36, 1) backwards, barSurge 4.4s ease-in-out 1.6s infinite; } .step.visible .art-bar + .art-bar { animation-delay: 0.12s, 1.75s; } .step.visible .art-bar + .art-bar + .art-bar { animation-delay: 0.24s, 1.9s; } .step.visible .art-bar + .art-bar + .art-bar + .art-bar { animation-delay: 0.36s, 2.05s; } .art-bar-hot { animation: barSurge 4.4s ease-in-out 2.3s infinite; } .step.visible .art-bar-hot { animation: barGrow 0.9s cubic-bezier(0.22, 1, 0.36, 1) 0.5s backwards, barSurge 4.4s ease-in-out 2.3s infinite; } @keyframes barGrow { from { transform: scaleY(0); } } @keyframes barSurge { 50% { transform: scaleY(1.06); } } /* result chip pops softly */ rect.art-gold, .art-chip-text { transform-box: fill-box; transform-origin: center; animation: chipPop 3.8s ease-in-out infinite 1.5s; } @keyframes chipPop { 10% { transform: scale(1.09); } 20% { transform: scale(1); } } /* glow dot lands at the end of the trend line, then pulses like a live reading */ .art-trend-dot { fill: #ffd75e; transform-box: fill-box; transform-origin: center; animation: dotPulse 3s ease-in-out 2s infinite; } .step.visible .art-trend-dot { animation: dotIn 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) 1.35s backwards, dotPulse 3s ease-in-out 2s infinite; } @keyframes dotIn { from { transform: scale(0); } } @keyframes dotPulse { 50% { transform: scale(1.45); opacity: 0.55; } } /* halo breathes softly behind each scene */ .art-halo { animation: haloBreathe 6s ease-in-out infinite; transform-box: fill-box; transform-origin: center; } @keyframes haloBreathe { 50% { transform: scale(1.05); opacity: 0.65; } } /* gold sheen sweeps across the artwork on hover */ .step-art { position: relative; } .step-art::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(105deg, transparent 42%, rgba(247, 221, 138, 0.12) 50%, transparent 58%); transform: translateX(-130%); } .step:hover .step-art::after { transform: translateX(130%); transition: transform 0.9s ease; } /* the checkmark and trend line draw themselves in when the card scrolls into view */ .art-check, .art-trend { stroke-dasharray: 160; } .step.visible .art-check { animation: strokeDraw 0.9s ease-out 0.35s backwards; } .step.visible .art-trend { animation: strokeDraw 1.2s ease-out 0.25s backwards; } @keyframes strokeDraw { from { stroke-dashoffset: 160; } to { stroke-dashoffset: 0; } } .art-needle { stroke: url(#gCta); stroke-width: 3.5; stroke-linecap: round; transform-box: fill-box; transform-origin: 0% 100%; animation: needleWiggle 3.2s ease-in-out infinite; } @keyframes needleWiggle { 0%, 100% { transform: rotate(-10deg); } 50% { transform: rotate(14deg); } } .art-chip-text { fill: var(--on-gold); font: 800 11px var(--font-text); } .step-num { font-size: 14px; font-weight: 800; color: var(--on-gold); background: var(--accent-grad); width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; margin-bottom: 18px; font-family: var(--font-head); box-shadow: 0 6px 18px rgba(227, 179, 65, 0.35); } .step h3, .feature h3, .trust h3 { font-size: 18px; margin-bottom: 10px; } .step p, .feature p, .trust p { color: var(--muted); font-size: 14.5px; } /* ------------------------------- repairs -------------------------------- */ .repair-card { position: relative; } .repair-card h3 { font-size: 20px; margin-bottom: 10px; } .repair-card > p { color: var(--muted); font-size: 14.5px; margin-bottom: 16px; } .repair-card > p b { color: var(--text); } .repair-list { list-style: none; display: grid; gap: 9px; margin-bottom: 8px; } .repair-list li { color: var(--muted); font-size: 14px; padding-inline-start: 28px; position: relative; line-height: 1.5; } .repair-list li::before { content: "✓"; position: absolute; inset-inline-start: 0; top: 1px; width: 18px; height: 18px; border-radius: 6px; display: grid; place-items: center; font-size: 11px; font-weight: 800; background: rgba(52, 211, 153, 0.16); color: var(--success); } /* -------------------------------- plans -------------------------------- */ /* 4 equal cards in one row; align-items:stretch keeps them the same height, the feature