/* ── typefaces ────────────────────────────────────────────────────────── The typography follows Anthropic's own system: a text serif carries the voice, a grotesque handles the interface. Their faces — Styrene and Tiempos / Copernicus — are licensed from Klim and cannot be embedded, so these are the closest open equivalents: SF Pro Display / Text — the system faces on Apple platforms, named first in --font-display / --font. Instrument Sans is the self-hosted stand-in everywhere else; Source Serif 4 was removed with the serif scale it served, and its two woff2 files no longer ship. Self-hosted latin subsets, 126 KB for all three — no third-party request on the critical path. `swap`, so text paints immediately in the fallback and reflows once. Weights are held to 400 Regular, 500 Medium and 600 Semibold — the whole SF Pro scale is built from those three. */ /* Host Grotesk is the grotesque in the supplied reference. It is on Google Fonts under the OFL, so the real face is self-hosted here rather than approximated — variable 300-800, so 600 is a drawn instance and not a synthesised bold. */ @font-face { font-family: 'Host Grotesk'; font-style: normal; font-weight: 300 800; font-display: swap; src: url('assets/fonts/host-grotesk-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212; } /* The editorial serif, used only for italic emphasis phrases — never for body copy. WHY THIS ONE. Six candidates were rendered against the sans at the same size and measured for ink density, advance width and stroke contrast. Instrument Serif, which was here before, came out at 0.79 the visual weight of the sans and the narrowest advance of the set — beside a 500 grotesque it read thin and cramped rather than as its equal. Bodoni Moda was worse at 0.56, the fragile fashion serif this must not be. DM Serif Display measures 0.98 against the sans: it carries the same visual weight, so the accent phrase stands beside the headline instead of shrinking away from it. Broad rather than condensed, real thick/thin contrast, sharp bracketed serifs, a genuine pronounced italic — and it ships one weight, 400, so there is no way to accidentally set it bold. SIL OFL, self-hosted; nothing leaves the origin at runtime. Only the italic is declared, since that is the only way it is ever used. */ @font-face { font-family: 'DM Serif Display'; font-style: italic; font-weight: 400; font-display: swap; src: url('assets/fonts/dm-serif-display-italic-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212; } @font-face { font-family: 'Instrument Sans'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('assets/fonts/instrument-sans-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+2000-206F, U+2122, U+2212; } /* Buttons and form controls do not inherit font-family from the document, so without this they fall back to the UA default — which is what had the burger's "Menu" / "Close" labels rendering in Arial. */ button, input, select, textarea { font-family: inherit; } /* ── theme tokens ───────────────────────────────────────────────────── */ :root { /* WHITE. The ground was a warm ivory; it is plain white now, and the site ships in this one theme — the toggle, the account-menu radios and the FAQ night-mode control are all gone, and the boot script pins data-theme to light. The dark rules further down no longer match anything; they are left in place rather than torn out of two thousand lines, and cost nothing unmatched. Cards used to lift off the ivory by being lighter than it. On white there is nothing lighter to be, so separation moves to the hairline and the shadow, and --surface-2 keeps just enough tone to read as a recessed band without tinting the page. */ --bg: #ffffff; --surface: #ffffff; /* raised: the hairline does the lifting now */ --surface-2: #f6f6f4; /* recessed, barely */ --ink: #1a1310; /* Body and caption text on light grounds is near-black, not grey. The ramp used to run #4a423b / #5d554e and, in the newer sections, into the #6E6E6E range; on request every one of those is taken down to near-black. Hierarchy is now carried by size, weight and space rather than by fading the colour out. Only the light theme moves. All four dark contexts — data-theme=dark and the nova, atlas and lab skins — redefine both tokens for their own grounds, so light-on-dark text is untouched. Checked before editing, because taking these to black there would have erased the text. */ --muted: #1C1C1C; /* near-black body copy, 16.9:1 on white */ --faint: #262626; /* near-black captions, 14.5:1 — still a step under --ink */ --line: #e6e4de; --line-soft: #efedE8; --line-strong: #cfcbc0; /* The site was re-themed to the logo's red, but only --accent-a/-b were repointed — --brand kept the pre-rebrand orange, so every control still reading it (the Get Started button, the carousel dots, focus rings) stayed orange on a red page. One family now. */ --brand: #ae0e20; --io-ground: #fafafa; /* the ground the cards sit on */ --io-pill: #f3f3f3; /* the pill starts a shade below it */ --io-dot-b: #4b0306; /* foot of the active dot's ramp */ --io-grey-a: #574d46; --io-grey-b: #70645a; /* 7.6:1 → 4.94:1 on white */ --io-red-a: #c01327; --io-red-b: #8a0007; /* 6.3:1 → 10.4:1 on white */ --brand-2: #c31428; --brand-soft: rgba(174,14,32,.08); --brand-line: #e8b9be; --on-brand: #ffffff; --grid: rgba(60,48,32,.09); --grid-hi: rgba(60,48,32,.34); /* dot lattice — mobile/tablet only (see the hero background override) */ --dot: rgba(60,48,32,.26); --hover: rgba(60,48,32,.055); --sh: 20,20,40; color-scheme: light; } :root[data-theme="dark"] { --bg: #141413; /* Anthropic slate */ --surface: #1f1e1d; --surface-2: #262624; --ink: #f6f3f1; --muted: #b0a49d; --faint: #988b83; /* 5.58:1 on slate, 4.59:1 on surface-2 */ --line: #35342f; --line-soft: #292825; --line-strong: #4a4842; --brand: #e2566b; /* lifted for the dark ground: 5.4:1 */ --io-ground: #191918; /* recessed from --surface so cards lift */ --io-pill: #141413; --io-dot-b: #8a2740; --io-grey-a: #c4b8b1; --io-grey-b: #988b83; --io-red-a: #f08698; --io-red-b: #e2566b; --brand-2: #f08496; --brand-soft: rgba(226,86,107,.15); --brand-line: #7d2735; --on-brand: #14100c; --grid: rgba(255,255,255,.075); --grid-hi: rgba(255,255,255,.30); --dot: rgba(255,255,255,.26); --hover: rgba(255,255,255,.06); --sh: 0,0,0; color-scheme: dark; --accent-ink: #f2707f; /* 5.9:1 on the dark card */ } :root { --font: -apple-system, BlinkMacSystemFont, 'SF Pro Text', system-ui, 'Instrument Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; /* display face: headline, section headings, the rotating term */ /* SF PRO. Apple licenses SF Pro for its own platforms only — it cannot be self-hosted or fetched from a CDN, and doing so would breach both the licence and Rules §9. It IS present as a system face on macOS and iOS, so the stack names it first and resolves to the real thing there. Everywhere else the already self-hosted Instrument Sans stands in: a grotesque of the same proportions, so the scale below holds either way. Display and Text are separate stacks because SF Pro ships as two optical sizes — Display is drawn for large type, Text for small. */ --font-display: -apple-system, BlinkMacSystemFont, 'SF Pro Display', system-ui, 'Instrument Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --ease: cubic-bezier(.22, 1, .36, 1); /* The feature-card glyphs. Lucide (ISC), self-hosted as masks like the rest of this set — the reference's own icon files are its brand assets, and these carry the same weight without borrowing them. Stroke is 2.4 rather than Lucide's 2 so they read solid at 34px, which is how the reference chips read. */ --i-wy1: url("data:image/svg+xml;utf8, "); --i-wy2: url("data:image/svg+xml;utf8, "); --i-wy3: url("data:image/svg+xml;utf8, "); --i-wy4: url("data:image/svg+xml;utf8, "); /* ── EDITORIAL TYPE SYSTEM ─────────────────────────────────────────── One place where the face, scale, tracking, leading and ink of the editorial treatment are defined. The hero consumes it today; the rest of the site still runs on --font / --font-display above and migrates section by section, which is why both systems are declared side by side rather than one overwriting the other. --font-sans names the self-hosted grotesque FIRST, unlike --font, which is deliberately system-first. The two coexist: --font is for the parts of the site not yet migrated. Every size is a clamp, so desktop, tablet and mobile interpolate rather than snapping at a breakpoint. The min of each is the mobile figure and the max is the desktop figure. */ --font-sans: 'Host Grotesk', 'Instrument Sans', -apple-system, BlinkMacSystemFont, system-ui, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-serif: 'DM Serif Display', ui-serif, Georgia, 'Times New Roman', Times, serif; /* A bare vw slope hits desktop and mobile but sags through the middle: at 4.6vw a 768px tablet computed 35px against a 48-58px target and just sat on the clamp floor. The px offset lifts the whole line so all three bands land where they should — 43 / 52 / 66 at 375 / 768 / 1440. */ --text-display: clamp(38px, 30px + 2.7vw, 66px); /* hero statement */ --text-h2: clamp(30px, 26px + 1.7vw, 50px); /* major statement */ --text-h3: clamp(26px, 22px + 1.2vw, 38px); --text-lead: clamp(18px, 15px + .5vw, 22px); /* supporting line */ --text-body: clamp(16px, 1.15vw, 17px); --text-ui: clamp(16px, 1.25vw, 17.6px); /* button labels */ --text-small: clamp(14px, 12px + .3vw, 16px); /* badges, micro labels */ /* large type is tracked in, small type is not — the tighter the closer to display size, which is what keeps big headlines from looking loose */ --tracking-display: -.032em; --tracking-tight: -.025em; --tracking-body: -.008em; --tracking-label: .01em; --leading-display: 1.02; --leading-tight: 1.12; --leading-h3: 1.2; --leading-lead: 1.45; --leading-body: 1.6; --leading-ui: 1.3; /* near-black rather than black, and a warm-shifted secondary so text on the sunrise frames does not read as cold grey */ --ink-primary: #212121; /* The reference sets its subline in a light terracotta (#945B4D). That colour needs a near-white sky behind it — theirs has one; ours is a photograph, and measured on it that terracotta reads at 2.15:1 against a 4.5:1 requirement, which is not legible. Same warm family, taken deep enough to hold on the clouds: 4.8:1 at the worst frame. */ --ink-secondary: #4e2c25; /* The accent is the reference's measured gradient, not a flat fill: a horizontal sweep that is brighter at both ends than in the middle, so the phrase reads as ink rather than as a highlighter. */ /* Sampled off the supplied logo gradient — #ae0e20 at the top of the tile, #8f0914 at its darkest. The previous pair (#9b0410 / #7a0006) was a shade darker and more orange, so the brand mark and the site did not quite agree with each other. */ --accent-a: #ae0e20; --accent-b: #8f0914; --ink-editorial: var(--accent-a); /* flat fallback where clip is absent */ /* The editorial accent for text on the PAGE, as opposed to on the hero. --accent-a is a deep crimson chosen against bright cloud; on a near-black panel it measures 1.75:1 and all but disappears. This one follows the theme: the same colour on light, a warm coral on dark. Anything printing the accent over page surfaces uses this, not --accent-a. */ --accent-ink: var(--accent-a); /* contact-card glyphs (lucide: mail, clock, help-circle, plus) */ --i-mail: url("data:image/svg+xml;utf8,"); --i-clock: url("data:image/svg+xml;utf8,"); --i-help: url("data:image/svg+xml;utf8,"); --i-wa: url("data:image/svg+xml;utf8,"); --i-call: url("data:image/svg+xml;utf8,"); --i-cam: url("data:image/svg+xml;utf8,"); --i-tick: url("data:image/svg+xml;utf8,"); --i-clock2: url("data:image/svg+xml;utf8,"); --i-warn: url("data:image/svg+xml;utf8,"); --i-plus: url("data:image/svg+xml;utf8,"); /* glyphs the illustration components mask against */ --i-chev: url("data:image/svg+xml;utf8,"); --i-doc: url("data:image/svg+xml;utf8,"); --i-up: url("data:image/svg+xml;utf8,"); --i-dn: url("data:image/svg+xml;utf8,"); --i-user: url("data:image/svg+xml;utf8,"); --i-stack:url("data:image/svg+xml;utf8,"); --i-cal: url("data:image/svg+xml;utf8,"); --i-lab: url("data:image/svg+xml;utf8,"); /* ── SECTION RHYTHM ──────────────────────────────────────────────── Section padding STACKS: a section's bottom meets the next one's top, so the visible band between two sections is twice this. At the old 108px every pair of .sec blocks was putting 216px of empty page between them, which is roughly double what a corporate site runs. 56px a side = a 112px band at desktop, 72px on a phone. One number, one place — every full-width section reads from it. */ --sec-y: clamp(36px, 4.2vw, 56px); /* ── PRODUCT-SECTION TOKENS ────────────────────────────────────────── The reference runs five near-identical darks (#212121 #242424 #383838 #474747) and two reds one digit apart (#B1060F / #B10612). That is an accident of a design that grew, not a scale — consolidated to four steps and one red before anything was built on it, so the section has a palette rather than a collection. One shadow colour throughout, at 5%: the reference's dozen fractional variants are all the same recipe scaled, not separate decisions. */ --pr-ground: #ffffff; /* the section and illustration ground */ --pr-card: #ffffff; --pr-chip: #f2f2f2; --pr-rail: #e7e7e7; --pr-dash: #c4c4c4; --pr-wire: #c8102a; /* the connectors — a step brighter than the ink red */ --pr-ink: #212121; /* headline, lead-ins */ --pr-ink-2: #3a3a3a; /* illustration labels */ --pr-ink-3: #3e3e3e; /* 10.8:1 on white */ /* secondary labels */ --pr-body: #474747; /* 9.1:1 on white */ /* every paragraph */ --pr-shadow: 0 4px 11px rgba(0, 0, 0, .05); --pr-shadow-s:0 1px 2px rgba(0, 0, 0, .05); --pr-bevel: inset 0 3px 0 rgba(255, 255, 255, .35); /* colour is released only where it encodes something */ --pr-ok: #047857; --pr-warn: #c2410c; --pr-note: #7e22ce; --pr-due: #be185d; --pr-idle: #6b7280; /* menu icons — masked so they inherit the brand colour (no icon library) */ --i-arrow: url('data:image/svg+xml;utf8,'); --i-board: url('data:image/svg+xml;utf8,'); --i-star: url('data:image/svg+xml;utf8,'); --i-book: url('data:image/svg+xml;utf8,'); --i-users: url('data:image/svg+xml;utf8,'); --i-chart: url('data:image/svg+xml;utf8,'); --i-shield: url('data:image/svg+xml;utf8,'); --i-bolt: url('data:image/svg+xml;utf8,'); --i-id: url('data:image/svg+xml;utf8,'); --i-clock: url('data:image/svg+xml;utf8,'); --i-cap: url('data:image/svg+xml;utf8,'); --i-lab: url('data:image/svg+xml;utf8,'); --i-building: url('data:image/svg+xml;utf8,'); --i-code: url('data:image/svg+xml;utf8,'); --i-doc: url('data:image/svg+xml;utf8,'); --i-search: url('data:image/svg+xml;utf8,'); --i-pen: url('data:image/svg+xml;utf8,'); --i-award: url('data:image/svg+xml;utf8,'); --i-tools: url('data:image/svg+xml;utf8,'); --i-sun: url('data:image/svg+xml;utf8,'); --i-moon: url('data:image/svg+xml;utf8,'); --i-bell: url('data:image/svg+xml;utf8,'); --i-out: url('data:image/svg+xml;utf8,'); --i-rocket: url('data:image/svg+xml;utf8,'); } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); -webkit-font-smoothing: antialiased; /* the Body rung is the document's baseline, so anything the role layer does not name still inherits a size that belongs to the scale */ font-size: 17px; line-height: 1.53; letter-spacing: 0; overflow-x: hidden; } /* ── hero shell + interactive lattice ───────────────────────────────── */ /* Two stacked copies of the same grid, perfectly aligned: ::before is the faint baseline you always see; ::after is a brighter copy revealed only inside a spotlight that follows the pointer. Geometry never moves — only visibility changes. */ .hero { position: relative; overflow: hidden; padding-bottom: clamp(48px, 6vw, 88px); --mx: 50%; --my: 26%; --spot: 300px; background: var(--bg); } .hero::before, .hero::after { content: ''; position: absolute; inset: 0; z-index: 0; pointer-events: none; background-size: 1cm 1cm; background-position: center top; } /* baseline — subtle, but genuinely visible */ .hero::before { background-image: linear-gradient(to right, var(--grid) 1px, transparent 1px), linear-gradient(to bottom, var(--grid) 1px, transparent 1px); -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 84%); mask-image: linear-gradient(to bottom, #000 0%, #000 58%, transparent 84%); } /* spotlight — the same black grid, just darker where the pointer is */ .hero::after { background-image: linear-gradient(to right, var(--grid-hi) 1px, transparent 1px), linear-gradient(to bottom, var(--grid-hi) 1px, transparent 1px); -webkit-mask-image: radial-gradient(circle var(--spot) at var(--mx) var(--my), #000 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.28) 62%, transparent 78%); mask-image: radial-gradient(circle var(--spot) at var(--mx) var(--my), #000 0%, rgba(0,0,0,.72) 38%, rgba(0,0,0,.28) 62%, transparent 78%); } /* ── mobile + tablet: video backdrop instead of the ruled grid ─────────── The component's background layer: a looping muted video pinned behind the content with object-fit: cover. Hidden entirely above 1024px, where the ruled lattice and its pointer spotlight are untouched. */ .hero-bg { position: absolute; inset: 0; z-index: 0; display: none; overflow: hidden; } .hero-bg video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: cover; /* the aurora lives on the left of the frame, and a tall hero crops `cover` horizontally — centred, the visible slice would be the empty side */ object-position: left center; } /* the scrim is what makes the copy readable on both themes: the video is a full-strength image, and neither near-white nor near-black text survives on top of one unaided. Each theme veils toward its own page colour, strongest behind the headline and clearing by the workspace window. */ .hero-scrim { position: absolute; inset: 0; display: block; pointer-events: none; background: linear-gradient(180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.16) 28%, rgba(255,255,255,.58) 52%, rgba(255,255,255,.92) 72%, var(--bg) 88%); } :root[data-theme="dark"] .hero-scrim { background: linear-gradient(180deg, rgba(13,11,10,.05) 0%, rgba(13,11,10,.30) 28%, rgba(13,11,10,.68) 52%, rgba(13,11,10,.93) 72%, var(--bg) 88%); } @media (max-width: 1024px) { /* the ruled grid and its pointer spotlight give way to the video */ .hero::before, .hero::after { display: none; } .hero-bg { display: block; } } /* text left, live workspace right — the window keeps its full scale and bleeds off the right edge rather than shrinking to fit the column */ .hero-inner { position: relative; z-index: 1; display: grid; grid-template-columns: minmax(0, clamp(400px, 26vw, 520px)) minmax(0, 1fr); /* the gap has to read as a deliberate column break, not a near-miss — it scales with the viewport instead of pinching shut on wide screens */ align-items: center; column-gap: clamp(48px, 4vw, 110px); /* the workspace column stops short of the screen edge, never touches it */ padding: clamp(32px, 4vw, 68px) var(--dash-edge) 0 var(--edge); } /* ── sticky header ──────────────────────────────────────────────────── */ /* ONE shell for the whole site. The header, the hero copy, the marquee, every section and the footer all resolve their left edge from these two values, so nothing on the page can drift out of alignment with anything else. */ :root { --hdr: 72px; --hdr-gap: 14px; --hdr-side: 16px; --shell: 1780px; --gutter: clamp(20px, 4vw, 48px); /* breathing room between the workspace window and the screen edge: 1–2cm (38–76px) across the whole desktop range */ --dash-edge: clamp(40px, 3vw, 72px); } /* distance from the viewport edge to the shell's content edge */ .hero-inner { --edge: calc(max(0px, (100% - var(--shell)) / 2) + var(--gutter)); } /* A floating, rounded bar — never a hard-edged box. It inches in and rounds further as you scroll rather than switching between two shapes, so the header reads as one object that settles. --hdr-gap drives both the inset here and the hero's pull-up below; the drawer breakpoint zeroes it, where a detached bar would just eat vertical space. */ .site-header { position: sticky; top: var(--hdr-gap); z-index: 60; width: calc(100% - var(--hdr-side) * 2); margin: var(--hdr-gap) auto 0; max-width: 1600px; /* opaque, always — a translucent bar lets the lattice read through the menu */ background: var(--surface); border-radius: 20px; box-shadow: 0 6px 22px -12px rgba(var(--sh), .18); transition: max-width .32s var(--ease), top .32s var(--ease), border-color .28s, box-shadow .28s, border-radius .32s var(--ease); } /* condensed state — set by JS past the scroll threshold */ .site-header.scrolled { max-width: 1120px; border-radius: 24px; box-shadow: 0 0 0 1px var(--line), 0 14px 40px -12px rgba(var(--sh), .16); } /* The bar is inset by --hdr-side, which would push the brand that far right of every other left edge on the page. Its padding gives the inset back. Past shell + 2*side the bar stops being edge-limited, its own centring absorbs the inset, and the compensation has to stop or it over-corrects. */ .hdr-inner { display: flex; align-items: center; gap: 32px; max-width: var(--shell); margin: 0 auto; height: var(--hdr); padding: 0 calc(var(--gutter) - var(--hdr-side)); transition: padding .32s var(--ease); } /* Once the viewport passes the shell, the page starts centring its content and the bar has to centre with it. It can only do that while its own content box is still at least a shell wide — so from that point the inset ramps in from zero rather than being a flat 16px, and the compensation above stops. Ramp and hand-off are both smooth; nothing steps. */ @media (min-width: 1520px) { :root { --hdr-side: min(16px, calc((100vw - var(--shell)) / 2)); } .hdr-inner { padding-inline: var(--gutter); } } .site-header.scrolled .hdr-inner { padding: 0 clamp(12px, 2vw, 20px); } /* hero slides under the header so the lattice runs behind it — and past the float gap as well, so the bar sits ON the hero rather than above a strip of page background */ .hero { margin-top: calc((var(--hdr) + var(--hdr-gap)) * -1); padding-top: calc(var(--hdr) + var(--hdr-gap)); } /* ── mobile toggle ──────────────────────────────────────────────────── */ .burger { display: none; margin-left: auto; width: 40px; height: 40px; border-radius: 10px; align-items: center; justify-content: center; border: 1px solid var(--line); background: var(--surface); color: var(--ink); cursor: pointer; } .menu-icon { width: 21px; height: 21px; transition: transform .3s ease-in-out; } .menu-icon .mi-morph { stroke-dasharray: 12 63; transition: stroke-dasharray .3s ease-in-out, stroke-dashoffset .3s ease-in-out; } .burger[aria-expanded="true"] .menu-icon { transform: rotate(-45deg); } .burger[aria-expanded="true"] .mi-morph { stroke-dasharray: 20 300; stroke-dashoffset: -32.42px; } /* ── mobile panel ───────────────────────────────────────────────────── */ .mobile-panel { position: fixed; inset: var(--hdr) 0 0; z-index: 55; display: flex; flex-direction: column; background: var(--surface); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-top: 1px solid var(--line); animation: mp-in .26s var(--ease) both; } .mobile-panel[hidden] { display: none; } @keyframes mp-in { from { opacity: 0; transform: scale(.985); } } .mp-scroll { flex: 1; overflow-y: auto; padding: 18px 20px 8px; -webkit-overflow-scrolling: touch; } .mp-scroll h6 { margin: 18px 0 6px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); } .mp-scroll h6:first-child { margin-top: 0; } /* ── mobile accordion ───────────────────────────────────────────────── */ .acc { border-bottom: 1px solid var(--line); } .acc-t { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; padding: 16px 4px; border: 0; background: none; font: inherit; font-family: var(--font-display); font-size: 18px; font-weight: 400; letter-spacing: 0; color: var(--ink); cursor: pointer; text-align: left; } .acc-t .chev { width: 14px; height: 14px; transition: transform .26s var(--ease); } .acc-t[aria-expanded="true"] .chev { transform: rotate(180deg); } /* grid-template-rows animates to auto-height without measuring in JS */ .acc-c { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .3s var(--ease); } .acc-t[aria-expanded="true"] + .acc-c { grid-template-rows: 1fr; } /* must be a single wrapper: 0fr sizes only the first row, so direct children beyond the first would stay visible when collapsed */ .acc-in { overflow: hidden; min-height: 0; } .acc-c a { display: flex; align-items: center; gap: 12px; padding: 9px 4px; text-decoration: none; color: var(--ink); } .acc-c a b { display: block; font-size: 14px; font-weight: 500; } .acc-c a em { display: block; font-style: normal; font-size: 12px; color: var(--muted); margin-top: 2px; } .mt { width: 38px; height: 38px; border-radius: 10px; flex: none; border: 1px solid var(--line); background: var(--surface-2); } .mt::after { inset: 10px; } .mp-plain { padding-top: 8px; } .mp-plain a { display: block; padding: 12px 4px; border-radius: 10px; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-size: 18px; font-weight: 400; letter-spacing: 0; } .mp-scroll a:active { background: var(--hover); } .mp-foot { flex: none; display: grid; gap: 10px; padding: 14px 20px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--line); } .mp-foot .btn { text-align: center; } /* ── nav ────────────────────────────────────────────────────────────── */ .nav { display: flex; align-items: center; gap: 32px; padding: 22px clamp(20px, 5vw, 64px); } /* The supplied lockup is a single flat ink throughout, so one alpha PNG masked and coloured by CSS covers every surface — orange on dark, white on the orange bar — instead of shipping and preloading two bitmaps. The still carries real text for screen readers and search engines. */ :root { --logo: #fe3100; } /* the lockup's own ink */ .brand { display: inline-flex; align-items: center; padding-block: 9px; /* thumb-sized hit area */ /* an with no colour falls back to the UA's link blue — invisible here only because the label is sr-only, but wrong the moment it is not */ text-decoration: none; color: var(--ink); font-size: 18px; font-weight: 600; letter-spacing: -0.01em; } /* if masking is unavailable, drop the graphic and let the wordmark show as text rather than leaving the header with no brand at all */ @supports not ((-webkit-mask-image: url('')) or (mask-image: url(''))) { .brand-mark { display: none; } .brand .sr-only, .ab-name .sr-only { position: static; width: auto; height: auto; margin: 0; clip: auto; overflow: visible; } } .brand-mark { display: block; width: 119px; height: 38px; /* 3.12:1, the artwork's own */ background: var(--logo-ink, var(--logo)); -webkit-mask: url('assets/wordmark.webp') no-repeat center / contain; mask: url('assets/wordmark.webp') no-repeat center / contain; } /* Entries are separated by a hairline rule rather than by spacing alone. The rule sits on the item, not between items, so the row stays a single flex line — and the first one is suppressed so the group opens cleanly against the brand. */ .nav-links { display: flex; align-items: stretch; gap: 0; margin-left: 18px; } .nav-links > .menu { display: flex; align-items: center; } /* Named rather than `* + *`: .nav-pill is a decorative 0×0 element sitting first, and counting it would put a rule before the opening item. These selectors also outrank the `border: 0` in the shared item rule below. */ .nav-links > .menu + .menu, .nav-links > .menu + a, .nav-links > a + a, .nav-links > a + .menu { border-left: 1px solid var(--line); } .nav-links > a, .menu-trigger { display: inline-flex; align-items: center; gap: 7px; padding: 8px 16px; margin: 0 4px; border-radius: 9px; color: var(--muted); text-decoration: none; font: inherit; font-size: 14px; background: none; border: 0; cursor: pointer; white-space: nowrap; transition: color .2s, background .2s; } .nav-links > a:hover, .menu-trigger:hover, .menu-trigger[aria-expanded="true"] { color: var(--ink); background: var(--hover); } .chev { width: 12px; height: 12px; opacity: .55; transition: transform .28s var(--ease), opacity .2s; } .menu-trigger:hover .chev { opacity: 1; } .menu-trigger[aria-expanded="true"] .chev { transform: rotate(180deg); opacity: 1; } /* A trigger whose menu has no items yet: shown, but it does not pretend to be operable. Remove `.is-empty` by giving the menu items in menu-data.mjs — build-menu.mjs then writes the panel and the aria. */ .menu-trigger.is-empty { cursor: default; } .menu-trigger.is-empty:hover { background: none; color: var(--muted); } .menu-trigger.is-empty:hover .chev { opacity: .55; } /* ── mega menu ──────────────────────────────────────────────────────── */ .menu { position: relative; } .menu-panel { position: absolute; top: calc(100% + 10px); left: 0; z-index: 40; width: max-content; max-width: min(560px, calc(100vw - 40px)); padding: 18px; border-radius: 16px; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 24px 60px rgba(var(--sh), .14), 0 2px 8px rgba(var(--sh), .05); opacity: 0; transform: translateY(-6px) scale(.985); transition: opacity .22s var(--ease), transform .22s var(--ease); } .menu-panel.wide { max-width: min(900px, calc(100vw - 40px)); } .menu-panel.open { opacity: 1; transform: none; } .menu-panel[hidden] { display: none; } .panel-grid { display: grid; grid-template-columns: 2fr 1fr; gap: 20px; } .panel-side { padding-left: 20px; border-left: 1px solid var(--line); } /* integrity line — the promise the copy has to keep */ .panel-note { margin: 16px -18px -18px; padding: 13px 28px; border-top: 1px solid var(--line); background: var(--surface-2); border-radius: 0 0 16px 16px; font-size: 12px; color: var(--muted); } .panel-note strong { color: var(--ink); font-weight: 600; } .menu-panel h6 { margin: 0 0 12px; padding-left: 10px; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); } .menu-panel ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 4px; } .panel-main ul, .panel-two { grid-template-columns: 1fr 1fr; } .menu-panel a { display: grid; grid-template-columns: auto 1fr; column-gap: 11px; row-gap: 4px; padding: 11px; border-radius: 11px; text-decoration: none; transition: background .18s; } .menu-panel a:hover, .menu-panel a:focus-visible { background: var(--hover); outline: none; } /* ── featured grid cards ────────────────────────────────────────────── */ .gcards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; } .menu-panel a.gcard { position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; gap: 10px; min-height: 148px; padding: 16px 17px; border: 1px solid var(--line); border-radius: 10px; background: var(--surface); transition: border-color .15s; } .menu-panel a.gcard:hover { background: var(--surface); border-color: var(--line-strong); } .gc-bg { position: absolute; inset: 0; z-index: -1; pointer-events: none; } /* skewed lattice that lifts on hover */ .gc-bg::before { content: ''; position: absolute; inset: -25%; background-image: linear-gradient(to right, var(--line) 1px, transparent 1px), linear-gradient(to bottom, var(--line) 1px, transparent 1px), /* a few filled cells, like the reference's random squares */ linear-gradient(var(--hover), var(--hover)), linear-gradient(var(--hover), var(--hover)), linear-gradient(var(--hover), var(--hover)); background-size: 30px 30px, 30px 30px, 29px 29px, 29px 29px, 29px 29px; background-position: 0 0, 0 0, 212px 61px, 272px 121px, 182px 151px; background-repeat: repeat, repeat, no-repeat, no-repeat, no-repeat; transform: skewY(-12deg) translateY(8px); transition: transform .18s ease-out; -webkit-mask-image: linear-gradient(225deg, #000, transparent); mask-image: linear-gradient(225deg, #000, transparent); } .menu-panel a.gcard:hover .gc-bg::before { transform: skewY(-12deg) translateY(0); } /* brand-tinted bloom, in place of the reference's pink/blue conic */ .gc-bg::after { content: ''; position: absolute; inset: -10%; background: conic-gradient(var(--brand) 0deg, var(--brand-2) 117deg, var(--brand-2) 180deg, #5182fc 240deg, var(--brand) 360deg); filter: blur(50px); opacity: 0; transition: opacity .18s; } .menu-panel a.gcard:hover .gc-bg::after { opacity: .13; } .gcard .mi { grid-row: auto; margin: 0; } /* both must be block — as inline spans a short title lets the description ride up onto the same line */ .gc-t { display: block; font-size: 13px; font-weight: 600; color: var(--ink); } .gc-d { display: block; margin-top: 5px; font-size: 12px; line-height: 1.4; color: var(--muted); font-style: normal; } .gcard .gc-txt { display: block; } /* ── small rows with a sliding arrow ────────────────────────────────── */ .menu-panel a.srow { display: flex; align-items: center; gap: 10px; padding: 10px 10px; border-radius: 9px; } .srow .mi { width: 22px; height: 22px; border-radius: 7px; } .srow .mi::after { inset: 4px; } .srow .s-t { font-size: 13px; color: var(--ink); } .srow .arw-i { margin-left: auto; width: 14px; height: 14px; flex: none; opacity: 0; transform: translateX(-6px); transition: opacity .2s var(--ease), transform .2s var(--ease); } .menu-panel a.srow:hover .arw-i, .menu-panel a.srow:focus-visible .arw-i { opacity: .6; transform: none; } .menu-panel b { grid-column: 2; align-self: center; font-size: 13px; font-weight: 600; color: var(--ink); } .menu-panel em { grid-column: 2; font-style: normal; font-size: 12px; line-height: 1.4; color: var(--muted); } .mi { grid-row: 1 / span 2; align-self: start; margin-top: 1px; width: 26px; height: 26px; border-radius: 8px; flex: none; background: var(--brand-soft); position: relative; } .mi::after { content: ''; position: absolute; inset: 5px; background: var(--brand); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; } .mi-board::after { -webkit-mask-image: var(--i-board); mask-image: var(--i-board); } .mi-star::after { -webkit-mask-image: var(--i-star); mask-image: var(--i-star); } .mi-book::after { -webkit-mask-image: var(--i-book); mask-image: var(--i-book); } .mi-users::after { -webkit-mask-image: var(--i-users); mask-image: var(--i-users); } .mi-chart::after { -webkit-mask-image: var(--i-chart); mask-image: var(--i-chart); } .mi-shield::after { -webkit-mask-image: var(--i-shield); mask-image: var(--i-shield); } .mi-bolt::after { -webkit-mask-image: var(--i-bolt); mask-image: var(--i-bolt); } .mi-id::after { -webkit-mask-image: var(--i-id); mask-image: var(--i-id); } .mi-clock::after { -webkit-mask-image: var(--i-clock); mask-image: var(--i-clock); } .mi-cap::after { -webkit-mask-image: var(--i-cap); mask-image: var(--i-cap); } .mi-lab::after { -webkit-mask-image: var(--i-lab); mask-image: var(--i-lab); } .mi-building::after { -webkit-mask-image: var(--i-building); mask-image: var(--i-building); } .mi-code::after { -webkit-mask-image: var(--i-code); mask-image: var(--i-code); } .mi-doc::after { -webkit-mask-image: var(--i-doc); mask-image: var(--i-doc); } .mi-search::after { -webkit-mask-image: var(--i-search); mask-image: var(--i-search); } .mi-pen::after { -webkit-mask-image: var(--i-pen); mask-image: var(--i-pen); } .mi-award::after { -webkit-mask-image: var(--i-award); mask-image: var(--i-award); } .mi-tools::after { -webkit-mask-image: var(--i-tools); mask-image: var(--i-tools); } .mi-rocket::after { -webkit-mask-image: var(--i-rocket); mask-image: var(--i-rocket); } .nav-cta { margin-left: auto; padding: 9px 18px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--ink); text-decoration: none; font-size: 14px; transition: background .2s, border-color .2s, color .2s; } .nav-cta:hover { background: var(--ink); color: var(--on-brand); border-color: var(--ink); } /* ── copy ───────────────────────────────────────────────────────────── */ .hero-copy { text-align: left; padding: 0; } /* ── hero type system ─────────────────────────────────────────────────── Four tiers, and every text in the hero belongs to exactly one: 1 display SF Pro Display 600 — h1, stat figures, rotating term 2 lede SF Pro Text 400, 20/1.5 — the paragraph under the headline 3 micro SF Pro Text 500, 13px, uppercase, +0.6px — every label 4 ui SF Pro Text 600, 15px — buttons and the assurance line The micro tier is what makes the section read corporate: pill, eyebrow, stat captions and the marquee label all speak in the same small voice instead of four slightly different greys. */ .pill-note { display: inline-flex; align-items: center; gap: 9px; padding: 8px 16px 8px 13px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); backdrop-filter: blur(6px); font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); text-decoration: none; transition: border-color .25s, transform .25s var(--ease); } .pill-note:hover { border-color: var(--brand-line); transform: translateY(-1px); } .ping { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); flex: none; } .ping::after { content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1.5px solid var(--brand); opacity: 0; animation: ping 2.4s var(--ease) infinite; } @keyframes ping { 0% { transform: scale(.5); opacity: .7; } 70%,100% { transform: scale(1.4); opacity: 0; } } .arw { color: var(--brand); font-weight: 600; } /* Size, weight and tracking here are inert — the SF Pro role layer owns all three with !important. What survives is the margin and the balance. */ .hero h1, .err-title, .hero-h1 { margin: 22px 0 0; font-family: var(--font-display); font-size: clamp(32px, 3.7vw, 52px); line-height: 1.12; letter-spacing: 0; font-weight: 400; text-wrap: balance; } /* keep the accent phrase whole — a hyphen break across lines reads as a typo */ .hero h1 em { font-style: italic; color: var(--brand); white-space: nowrap; } /* ── rotating discipline ──────────────────────────────────────────────── Sits above the workspace window and reads as its caption: a quiet lead-in, then the discipline itself at display size. Two lines rather than one, so the term always has the full column to itself and never fights the sentence for space. The word is typed in and out by hero-grid.js. */ .hero-right { display: flex; flex-direction: column; min-width: 0; } .hero-rot { display: grid; /* live block and sizer share one cell */ margin: 0 0 clamp(18px, 1.6vw, 26px); } .hero-rot > .hr-block { grid-area: 1 / 1; min-width: 0; } .hr-sizer { visibility: hidden; } /* A short brand tick marks the label. A full-width rule here would cut the hero in two right above the window — the seam this page is built to avoid. */ .hr-lead { display: block; position: relative; padding-top: 18px; font-size: 11px; font-weight: 600; line-height: 1.6; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); } .hr-lead::before { content: ''; position: absolute; top: 0; left: 0; width: 34px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--brand), var(--brand-2)); } .hr-term { display: block; margin-top: 6px; font-family: var(--font-display); font-size: clamp(26px, 2.8vw, 40px); line-height: 1.12; letter-spacing: 0; font-weight: 400; } /* the term carries the only gradient on the page — it earns it by being the one element that changes while you watch it */ .hr-word { /* a , so it inherits 700 — but the display face is loaded at 400 only and the browser would smear a synthetic bold across the gradient fill */ font-weight: 400; background: linear-gradient(96deg, var(--brand) 10%, var(--brand-2) 90%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hr-caret { display: inline-block; width: .06em; height: .82em; margin-left: .07em; background: var(--brand-2); vertical-align: -.06em; border-radius: 1px; animation: hr-blink 1.05s steps(1) infinite; } @keyframes hr-blink { 0%, 49% { opacity: 1; } 50%, 100% { opacity: 0; } } @media (prefers-reduced-motion: reduce) { .hr-caret { animation: none; opacity: .45; } } /* Anthropic sets running copy in the serif, not the grotesque — this is where the change is most visible. A serif needs a little more size and none of the negative tracking a sans wants at this scale. */ .sub { max-width: 52ch; margin: 22px 0 0; color: var(--muted); font-family: var(--font-display); font-size: clamp(16px, 1.65vw, 21px); line-height: 1.6; letter-spacing: 0; } .hero-cta { display: flex; gap: 12px; margin: 30px 0 0; flex-wrap: wrap; } .btn { padding: 15px 30px; border-radius: 999px; font-size: 14px; font-weight: 500; letter-spacing: 0; text-decoration: none; transition: transform .2s var(--ease), border-color .2s, box-shadow .2s; } .btn:hover { transform: translateY(-1px); } .btn-primary { background: var(--ink); color: var(--on-brand); font-weight: 500; box-shadow: 0 8px 22px rgba(var(--sh), .16); } .btn-ghost { border: 1px solid var(--line); color: var(--ink); background: var(--surface); backdrop-filter: blur(6px); } .btn-ghost:hover { border-color: var(--line-strong); } .assure { margin: 18px 0 0; max-width: 440px; font-size: 12px; line-height: 1.6; letter-spacing: 0; color: var(--faint); } /* ── stat row ───────────────────────────────────────────────────────── */ .stats { position: relative; list-style: none; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 16px; max-width: 520px; margin: clamp(26px, 3vw, 38px) 0 0; padding: clamp(24px, 2.8vw, 32px) 0 0; } /* fades out rather than stopping dead — the same hairline language as the eyebrow tick, so the hero has no hard rules anywhere in it */ .stats::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 1px; background: linear-gradient(90deg, var(--line-strong), var(--line) 55%, transparent); } .stats li { display: flex; flex-direction: column; gap: 6px; min-width: 0; } /* figures in the display face — a serif numeral reads considered where a grotesque one reads like a dashboard metric */ .stats b { font-family: var(--font-display); font-size: clamp(26px, 2.5vw, 32px); line-height: 1.12; font-weight: 400; letter-spacing: 0; color: var(--ink); } .stats span { font-size: 11px; font-weight: 600; line-height: 1.4; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); } /* ── video ──────────────────────────────────────────────────────────── */ .hero-video { margin: clamp(40px, 5vw, 72px) auto 0; max-width: 1600px; padding: 0 clamp(16px, 2vw, 28px); } /* the video IS the workspace window, cropped — so it carries the window's own rounding and shadow, and the page grid runs right up to its edge */ .video-wrap { position: relative; } .hero-video video { display: block; width: 100%; height: auto; border-radius: clamp(10px, 1.1vw, 18px); box-shadow: 0 24px 70px rgba(var(--sh), .12), 0 2px 8px rgba(var(--sh), .05); } .vid-toggle { position: absolute; right: 16px; bottom: 16px; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px 8px 11px; border-radius: 999px; border: 1px solid var(--line); background: rgba(255,255,255,.86); backdrop-filter: blur(8px); color: var(--ink); font: inherit; font-size: 12px; font-weight: 600; cursor: pointer; opacity: 0; transform: translateY(4px); transition: opacity .25s var(--ease), transform .25s var(--ease), border-color .2s, background .2s; } .video-wrap:hover .vid-toggle, .vid-toggle:focus-visible { opacity: 1; transform: none; } .vid-toggle:hover { border-color: var(--line-strong); background: var(--surface); } .vid-toggle svg { width: 13px; height: 13px; fill: currentColor; flex: none; } /* show whichever icon matches the *action* the button performs */ .vid-toggle .ic-play { display: none; } .vid-toggle[aria-pressed="false"] .ic-pause { display: none; } .vid-toggle[aria-pressed="false"] .ic-play { display: block; } /* keep it visible while paused, so the control is discoverable */ .vid-toggle[aria-pressed="false"] { opacity: 1; transform: none; } /* ── journal marquee ────────────────────────────────────────────────── */ /* lives inside the hero grid — span both columns, then sit on the shell */ .marquee { grid-column: 1 / -1; /* same content width as every .wrap section, so its right edge lines up too */ margin: clamp(36px, 4vw, 60px) 0 0; max-width: calc(var(--shell) - 2 * var(--gutter)); display: flex; align-items: center; gap: 22px; } .marquee-lbl { font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); white-space: nowrap; flex: none; } .marquee-track { flex: 1; min-width: 0; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); mask-image: linear-gradient(to right, transparent, #000 8%, #000 92%, transparent); } /* the run holds two identical sets; translating exactly one set width loops seamlessly */ .marquee-run { display: flex; width: max-content; animation: slide 30s linear infinite; } .mq-set { display: flex; gap: 30px; padding-right: 30px; } .marquee-track span { font-size: 13px; font-weight: 600; color: var(--faint); white-space: nowrap; } @keyframes slide { to { transform: translateX(-50%); } } /* the full nav (3 mega menus + 2 links + auth pair + theme) needs ~1000px of header before it starts wrapping onto two lines — hand over to the drawer well before that, which also puts iPad landscape on the drawer. At corporate sizing the six entries, the brand, the button pair and the theme toggle need ~1150px of content once the spacing clamps hit their lower bound — measured, not guessed. The handover sits at 1280. */ @media (max-width: 1280px) { /* the drawer is anchored to --hdr and measures from the viewport top, so the bar goes flush here — a floating one would leave a gap above the panel */ :root { --hdr-gap: 0px; --hdr-side: 0px; } .site-header { width: 100%; max-width: none; border-radius: 0; box-shadow: none; } /* the drawer carries its own Sign in / Get Started, so the header pair goes too */ .nav-links, .nav-cta, .nav-auth { display: none; } .burger { display: inline-flex; margin-left: auto; } .site-header.scrolled { max-width: none; border-radius: 0; } /* it is a full-width bar here, not a floating pill — so it keeps the shell gutter instead of the pill's tighter inset, which pushed the brand 20px left of every other element on the page */ .site-header.scrolled .hdr-inner { padding: 0 var(--gutter); } } /* Below this the two-column split leaves the workspace under ~950px, which is where its five stages stop being readable. Stacking hands it the full shell instead — a 1400px window with room to breathe beats a cramped 800px one. */ @media (max-width: 1599px) { .hero-inner { grid-template-columns: minmax(0, 1fr); max-width: var(--shell); margin-inline: auto; padding: clamp(28px, 5vw, 56px) var(--gutter) 0; row-gap: clamp(34px, 5vw, 52px); } /* full shell available now — the prose keeps its measure, but the stat row spreads out instead of huddling in a 660px column */ .hero-copy { max-width: none; } .sub, .assure { max-width: 660px; } .hero h1 { font-size: clamp(32px, 5.4vw, 52px); max-width: 20ch; } .stats { max-width: 880px; } } @media (max-width: 720px) { .hero-video { padding: 0 12px; } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 26px; } /* stacking drops the track out of the row, so `flex: 1` no longer caps its width and it grows to its 2200px content — clipped by .hero, but the fade mask ends up off-screen. Pin it back to the container. */ .marquee { flex-direction: column; align-items: stretch; gap: 12px; } .marquee-track { width: 100%; } } /* phones: the board is decorative at this size — keep it legible, not complete */ @media (max-width: 560px) { .hero h1 { font-size: clamp(26px, 8.4vw, 40px); } .hero-cta .btn { flex: 1 1 auto; text-align: center; } } @media (prefers-reduced-motion: reduce) { .ping::after, .marquee-run, .fp path { animation: none; } } /* ── mega panel (spans the header, columns of grouped links) ─────────── */ .hdr-inner { position: relative; } .menu { position: static; } .menu-panel.mega { left: 0; right: 0; width: auto; max-width: none; padding: 0; overflow: hidden; } .mega-head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; padding: 16px 22px 13px; border-bottom: 1px solid var(--line); background: var(--surface-2); } .mega-head h5 { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--faint); } .mega-all { font-size: 12px; font-weight: 600; color: var(--brand); text-decoration: none; white-space: nowrap; } .mega-all:hover { text-decoration: underline; } /* ── theme toggle ───────────────────────────────────────────────────── */ /* ── mobile sub-groups inside the accordion ─────────────────────────── */ .msub { padding: 6px 0 10px; } .msub-t { display: flex; align-items: center; gap: 9px; margin: 6px 0 4px; font-size: 12px; font-weight: 700; color: var(--ink); } .msub-t .mi { width: 22px; height: 22px; border-radius: 7px; } .msub-t .mi::after { inset: 5px; } /* Rows here match the desktop panel: a label, a hairline, nothing else. The left indent that used to clear an icon box is gone with it. */ .msub-l { display: grid; } .msub-l a { display: block; padding: 12px 2px; font-family: var(--font-display); font-size: 16px; font-weight: 400; line-height: 1.4; letter-spacing: 0; color: var(--ink); text-decoration: none; } .msub-l a + a { border-top: 1px solid var(--line); } .msub-l a:active { color: var(--brand); } /* the recorded demo is a light-background video; give it a frame in dark mode */ :root[data-theme="dark"] .hero-video video { border: 1px solid var(--line); } /* the panel spans the two triggers rather than the whole header */ /* mobile: overview items + a link through to the section */ .m-feat { display: block !important; margin-top: 6px; padding: 12px 4px !important; font-size: 14px; font-weight: 600; color: var(--brand) !important; } @media (max-width: 980px) { .ov-grid { grid-template-columns: 1fr; } .ov-side { border-left: 0; border-top: 1px solid var(--line); } } .ov-grid { grid-template-columns: 1fr 268px; } .menu-panel .ov-quick a.srow { display: flex; align-items: center; gap: 8px; padding: 9px 10px; border-radius: 8px; font-size: 13px; color: var(--muted); text-decoration: none; } .menu-panel .ov-quick a.srow:hover { color: var(--ink); background: var(--hover); } .ov-quick .s-t { flex: 1; } .ov-quick .ov-arw { margin-left: auto; } /* the mega panel has no padding, so the note's negative margins would push it outside overflow:hidden and clip the text */ .menu-panel.mega .panel-note { margin: 0; border-radius: 0; } .lr-d { -webkit-line-clamp: 3; } /* footer bar */ .mm-foot { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 24px; border-top: 1px solid var(--line); background: var(--surface-2); } .menu-panel a.mm-cta { display: inline-block; padding: 13px 26px; border-radius: 999px; /* --on-brand, not #fff — see .nav-start below */ background: var(--brand); color: var(--on-brand); text-decoration: none; font-size: 14px; font-weight: 600; transition: transform .2s var(--ease), box-shadow .2s; } .menu-panel a.mm-cta:hover { transform: translateY(-1px); box-shadow: 0 8px 22px -8px var(--brand); background: var(--brand); } .menu-panel a.mm-all { display: inline-flex; align-items: center; gap: 8px; padding: 8px 4px; color: var(--ink); text-decoration: none; font-size: 14px; font-weight: 600; } .menu-panel a.mm-all span { color: var(--brand); transition: transform .2s var(--ease); display: inline-block; } .menu-panel a.mm-all:hover span { transform: translateX(4px); } @media (max-width: 980px) { } /* ── mega menu: titled columns of plain rows ────────────────────────── Rows carry a label and nothing else. The descriptions and icon boxes that used to sit here made the panel dense enough to read as clutter; the one-liners now appear on the hub pages, where there is room for them. Separation is a hairline rule per row rather than a hover card, which is what keeps the panel calm. */ .menu-panel.mega { width: max-content; max-width: calc(100vw - 32px); left: 0; right: auto; padding: 0; } .mm-cols { display: flex; padding: 26px 0 22px; } .mm-col { min-width: 190px; flex: 1; padding: 0 30px; } .mm-col + .mm-col { border-left: 1px solid var(--line-soft); } .mm-col h3 { margin: 0 0 6px; padding: 0 0 12px; font-size: 11px; font-weight: 700; color: var(--faint); text-transform: uppercase; letter-spacing: 0.12em; } .mm-col ul { list-style: none; margin: 0; padding: 0; } .mm-col li + li { border-top: 1px solid var(--line); } .menu-panel .mm-col a { display: block; padding: 12px 0; text-decoration: none; font-size: 14px; font-weight: 500; line-height: 1.4; color: var(--ink); white-space: nowrap; transition: color .16s var(--ease); } /* The row itself does not move or fill on hover — only the label shifts colour, which is what a list this quiet can carry without noise. */ .menu-panel .mm-col a:hover, .menu-panel .mm-col a:focus-visible { color: var(--brand); outline: none; } .menu-panel .mm-col a:focus-visible { text-decoration: underline; text-underline-offset: 4px; } /* bordered square icon, as in the reference — tinted on hover, not filled blue */ .mm-ic { position: relative; width: 36px; height: 36px; flex: none; border: 1px solid var(--line); border-radius: 9px; background: var(--surface); transition: border-color .25s, background .25s; } .mm-ic::after { content: ''; position: absolute; inset: 9px; background: var(--ink); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-position: center; mask-position: center; transition: background .25s; } /* ── rich panel layouts ─────────────────────────────────────────────── Used by the `grid` and `split` panel layouts. The `columns` layout above stays a plain list of labels; these two carry the icon tile and the one-line description, for menus whose items need explaining rather than just naming. */ /* The panel is `width: max-content`, which mis-measures a grid using `fr` columns — it resolves against the items' max-content and lands twice as wide as the content needs. These layouts state their width outright. The modifier is `layout-*`, not `mm-*`: the panel and its inner