/* ===================================================================== WFOE Company China | main.css | one file, native cascade layers --------------------------------------------------------------------- Layer order is declared once, here, and never fought again. Specificity stops mattering: a later layer always wins regardless of selector weight. No !important outside the utilities layer. If you reach for it elsewhere, the layer order is wrong, not the rule. Design system, tokens and the WCAG ratio table: design/design-plan.md. Every colour and size comes from a token. No hardcoded hex outside the token block below. ===================================================================== */ @layer reset, tokens, base, layout, components, utilities; /* ===================================================================== FONTS | Montserrat, self hosted, two weights, latin subset, woff2 --------------------------------------------------------------------- No Google Fonts CDN. A large share of the audience is behind the GFW where fonts.googleapis.com is unreliable, so this is functional, not a preference. Both weights are preloaded in . swap so text paints immediately in the fallback and reflows once, rather than blocking. tabular-nums is verified present and working in these subsets: the tnum feature substitutes all ten digits to an equal 700-unit advance. ===================================================================== */ @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 400; font-display: swap; src: url("/assets/fonts/montserrat-400.woff2?v=2026-09-03") format("woff2"); } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 500; font-display: swap; src: url("/assets/fonts/montserrat-500.woff2?v=2026-09-03") format("woff2"); } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/montserrat-600.woff2?v=2026-09-03") format("woff2"); } @font-face { font-family: "Montserrat"; font-style: normal; font-weight: 900; font-display: swap; src: url("/assets/fonts/montserrat-900.woff2?v=2026-09-03") format("woff2"); } /* One weight, self-hosted for the same GFW reason as Montserrat. Used only where a figure should read as official data rather than body prose: the pricing amounts, the estimator's output range, and the chop lettering. */ @font-face { font-family: "JetBrains Mono"; font-style: normal; font-weight: 600; font-display: swap; src: url("/assets/fonts/jetbrains-mono-600.woff2?v=2026-09-03") format("woff2"); } /* ===================================================================== TOKENS | light is base, dark is override Ground: cream paper. Ink: brick. Dark inverts the same idea. Every value verified against WCAG 2.1 AA by computation. Full ratio table (37 pairs x 2 themes, 74/74 pass) in design/design-plan.md. ===================================================================== */ @layer tokens { :root { color-scheme: light; /* Amplus warm palette. Ink is warm near-black, ground is cream, primary is a deep orange tuned to pass AA as text and buttons. Vivid orange lives in --accent-vivid for graphics only. */ --ink: #262322; --ink-soft: #57534E; --ink-mute: #6B655E; /* 4.94 on paper, passes as small text */ /* Warm cream ground, white cards, beige alt sections. */ --paper: #F4F2E8; --surface: #FFFFFF; --surface-2: #E8E4D6; --surface-3: #DED8C6; /* PRIMARY. Deep orange: 4.6 on cream, 5.08 white-on-it. */ --brick: #C2410C; --brick-hover:#9A3412; /* light: hover goes DARKER */ --brick-lift: #E8590C; --brick-wash: #F8E7DC; --on-brick: #FFFFFF; /* Buttons: vivid orange + near-black text. 5.9:1, vibrant and AA. */ --btn: #F96A2C; --btn-hover: #E85410; --on-btn: #241A15; --azure: #E8590C; /* graphics only */ --azure-wash: #FBEDE3; /* Vivid Amplus orange + pale yellow. Graphics and fills only. */ --accent-vivid:#F55107; --accent-2: #FEEA9D; /* Seal red. Signature and the price figure only. */ --seal: #C0392B; --seal-ink: #7A2118; /* engraved detail lines inside the chop */ --seal-wash: #F9EBE9; /* Review gold. Warm enough to sit inside the brick palette rather than fighting it, dark enough to read as a filled shape on cream. */ --star: #C0850C; /* WhatsApp brand green. Fixed corner widget only, not part of the site palette, so it is not re-themed in the dark blocks below: every real WhatsApp button on the web keeps this exact green regardless of the host page's theme, which is what makes it recognisable as "the WhatsApp button" at a glance. */ --whatsapp-green: #25D366; --whatsapp-green-dark: #1DA851; --line: #E2DED0; /* decorative only, WCAG 1.4.11 exempt */ --line-firm: #CDC6B4; /* decorative only, WCAG 1.4.11 exempt */ --line-control:#8C8069; /* interactive boundaries. 3.9 on white. */ --ok: #1B7A5A; --ok-wash: #E7F3EE; --warn: #8A5A0B; --warn-wash: #FBF1DE; --stop: #A3271B; /* form errors. NOT --seal. */ --stop-wash: #FBEAE8; --focus: #9A3412; --focus-halo: #FFFFFF; /* inner tone, covers filled components */ /* Fluid type scale. clamp() so there are no breakpoint jumps. */ --step--1: clamp(0.83rem, 0.80rem + 0.15vw, 0.90rem); --step-0: clamp(1.00rem, 0.96rem + 0.20vw, 1.09rem); --step-1: clamp(1.25rem, 1.18rem + 0.35vw, 1.45rem); --step-2: clamp(1.56rem, 1.44rem + 0.60vw, 1.94rem); --step-3: clamp(2.00rem, 1.70rem + 1.30vw, 2.90rem); --step-4: clamp(2.60rem, 2.05rem + 2.60vw, 4.30rem); --s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem; --s-6: 1.5rem; --s-8: 2rem; --s-12: 3rem; --s-16: 4rem; --s-24: 6rem; --s-32: 8rem; --radius: 8px; --radius-lg: 16px; --radius-pill: 999px; /* Icon scale. Every inline SVG glyph and every "icon in a rounded square" chip container picks the nearest of these three, so the same visual role never lands on a different pixel size in two components that sit near each other on the same page. */ --icon-sm: 18px; --icon-md: 22px; --icon-lg: 26px; --chip-sm: 44px; --chip-md: 48px; --chip-lg: 52px; --measure: 60ch; /* 60, not 68. Montserrat is wide. */ --wrap: 1200px; --gutter: var(--s-4); /* Depth. Theme-aware: soft, brick-tinted layering in light for a premium feel; near-absent in dark, where borders carry elevation (a bright shadow on ink reads wrong). Overridden in the dark blocks. */ --shadow-sm: 0 1px 2px rgba(38, 35, 34, .05), 0 2px 6px rgba(38, 35, 34, .05); --shadow: 0 2px 6px rgba(38, 35, 34, .06), 0 12px 28px rgba(38, 35, 34, .10); --shadow-lg: 0 8px 18px rgba(38, 35, 34, .10), 0 26px 56px rgba(38, 35, 34, .14); --shadow-brick: 0 8px 20px rgba(194, 65, 12, .26), 0 2px 6px rgba(194, 65, 12, .20); /* Warm accents. Button gradient stays dark enough that white text clears 4.5:1 at the lightest stop. The text gradient (hero highlight) uses deep-orange stops so it passes as text on cream. Glows are decorative background only. Overridden in the dark blocks. */ --grad-primary: linear-gradient(135deg, #C2410C 0%, #A5360A 100%); --grad-accent: linear-gradient(90deg, #F55107, #E8590C); --grad-text: linear-gradient(120deg, #C2410C 0%, #9A3412 100%); --glow: radial-gradient(58% 48% at 50% 0%, rgba(245, 81, 7, .10), transparent 72%); --glow-strong: radial-gradient(50% 55% at 50% 40%, rgba(245, 81, 7, .14), transparent 70%); --font: "Montserrat", system-ui, -apple-system, "Segoe UI", sans-serif; --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Consolas, monospace; --w-body: 400; --w-display: 600; /* Motion. One orchestrated moment (the chop). Everything else is a 150ms colour transition. The theme switch never animates. */ --t-quick: 150ms; --ease: cubic-bezier(.2, 0, 0, 1); /* The one exception to the 150ms colour-only budget: the chop's single landing moment. A back-out curve, so it overshoots slightly before settling, the way a real stamp presses past its rest point. */ --ease-land: cubic-bezier(.34, 1.56, .64, 1); } /* DARK TOKENS. Kept identical in both selectors below, on purpose: the @media query is the first-visit default (no stored choice), and the [data-theme="dark"] attribute is the explicit user choice written by the theme toggle. Both must carry the same values or the two paths drift. :not([data-theme="light"]) lets an explicit light choice beat the OS preference. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --ink: #F4F2E8; /* warm cream on warm ink */ --ink-soft: #C9C1B5; --ink-mute: #9A9082; --paper: #1A1714; --surface: #241F1B; --surface-2: #2E2823; --surface-3: #39322C; --brick: #FF8A4C; /* lifted orange: 7.7 on warm ink */ --brick-hover:#FFA366; /* dark: hover goes LIGHTER. Inverted. */ --brick-lift: #E8590C; --brick-wash: #2E211A; --on-brick: #1A1714; /* dark text on a light-orange button */ --btn: #FF8A4C; --btn-hover: #FFA366; --on-btn: #1A1714; --azure: #FF8A4C; --azure-wash: #2A1F18; --accent-vivid:#FF6B29; --accent-2: #FEEA9D; --seal: #F0857A; /* lifted red */ --seal-ink: #B8493D; --seal-wash: #2E1A1A; --star: #F0B93F; --line: #38312B; --line-firm: #4A4139; --line-control:#7A6E60; --ok: #4FBF95; --ok-wash: #16302A; --warn: #D9A441; --warn-wash: #332619; --stop: #F08579; --stop-wash: #33201D; --focus: #FFB380; --focus-halo: #1A1714; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .30); --shadow: 0 2px 8px rgba(0, 0, 0, .34), 0 12px 30px rgba(0, 0, 0, .40); --shadow-lg: 0 8px 24px rgba(0, 0, 0, .44), 0 24px 60px rgba(0, 0, 0, .52); --shadow-brick: 0 4px 14px rgba(0, 0, 0, .40); --grad-primary: linear-gradient(135deg, #FF9A5C 0%, #FF8A4C 100%); --grad-accent: linear-gradient(90deg, #FF8A4C, #FF6B29); --grad-text: linear-gradient(120deg, #FFA366 0%, #FF8A4C 100%); --glow: radial-gradient(58% 48% at 50% 0%, rgba(255, 138, 76, .14), transparent 72%); --glow-strong: radial-gradient(50% 55% at 50% 40%, rgba(255, 138, 76, .18), transparent 70%); } } :root[data-theme="dark"] { color-scheme: dark; --ink: #F4F2E8; --ink-soft: #C9C1B5; --ink-mute: #9A9082; --paper: #1A1714; --surface: #241F1B; --surface-2: #2E2823; --surface-3: #39322C; --brick: #FF8A4C; --brick-hover:#FFA366; --brick-lift: #E8590C; --brick-wash: #2E211A; --on-brick: #1A1714; --btn: #FF8A4C; --btn-hover: #FFA366; --on-btn: #1A1714; --azure: #FF8A4C; --azure-wash: #2A1F18; --accent-vivid:#FF6B29; --accent-2: #FEEA9D; --seal: #F0857A; --seal-ink: #B8493D; --seal-wash: #2E1A1A; --star: #F0B93F; --line: #38312B; --line-firm: #4A4139; --line-control:#7A6E60; --ok: #4FBF95; --ok-wash: #16302A; --warn: #D9A441; --warn-wash: #332619; --stop: #F08579; --stop-wash: #33201D; --focus: #FFB380; --focus-halo: #1A1714; --shadow-sm: 0 1px 2px rgba(0, 0, 0, .30); --shadow: 0 2px 8px rgba(0, 0, 0, .34), 0 12px 30px rgba(0, 0, 0, .40); --shadow-lg: 0 8px 24px rgba(0, 0, 0, .44), 0 24px 60px rgba(0, 0, 0, .52); --shadow-brick: 0 4px 14px rgba(0, 0, 0, .40); --grad-primary: linear-gradient(135deg, #FF9A5C 0%, #FF8A4C 100%); --grad-accent: linear-gradient(90deg, #FF8A4C, #FF6B29); --grad-text: linear-gradient(120deg, #FFA366 0%, #FF8A4C 100%); --glow: radial-gradient(58% 48% at 50% 0%, rgba(255, 138, 76, .14), transparent 72%); --glow-strong: radial-gradient(50% 55% at 50% 40%, rgba(255, 138, 76, .18), transparent 70%); } } /* ===================================================================== RESET | minimal, modern, no opinions the base layer will overturn ===================================================================== */ @layer reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { min-height: 100svh; line-height: 1.7; -webkit-font-smoothing: antialiased; } img, picture, svg, video { display: block; max-width: 100%; height: auto; } input, button, textarea, select { font: inherit; color: inherit; } button { background: none; border: 0; cursor: pointer; } a { color: inherit; } ul[class], ol[class] { list-style: none; padding: 0; } table { border-collapse: collapse; } :target { scroll-margin-top: calc(64px + var(--s-4)); } /* Reduced motion is a hard stop, not a suggestion. Kills the chop press and every transition. Set here so nothing in later layers can reintroduce motion for these users. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; } } } /* ===================================================================== BASE | element defaults. Type is set here, once. ===================================================================== */ @layer base { html { font-family: var(--font); } body { /* Paper grain: a tiled, low-opacity fractal-noise filter under the flat ground colour, not a raster asset (CSP img-src already allows data:). Alpha is deliberately near-invisible (max ~4%) -- this reads as "this is paper" at a glance, not as a texture anyone consciously notices, and it never touches the AA-verified flat colour beneath. */ background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.05 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E") repeat, var(--paper); color: var(--ink); font-weight: var(--w-body); font-size: var(--step-0); /* No overflow-x:hidden. That hides the bug rather than fixing it. Any element that would overflow scrolls inside its own region. */ } /* Headings. 900 only. Negative tracking grows with size or the geometric forms fall apart into circles at display sizes. */ h1, h2, h3, h4, h5, h6 { font-weight: var(--w-display); line-height: 1.12; text-wrap: balance; color: var(--ink); } /* Safety net, not a style choice: at a large heading size on a narrow phone, a single long word (e.g. "representative") can be wider than the column itself, and with no other break opportunity that alone forces the whole page to scroll horizontally. break-word only ever activates in that specific case -- every heading that already fits renders identically. Found on /{yiwu,shanghai}/company-changes/ at 320px, where "representative" is 311px wide in a 273px column. */ h1, h2, h3 { overflow-wrap: break-word; } h1 { font-size: var(--step-4); letter-spacing: -0.03em; } h2 { font-size: var(--step-3); letter-spacing: -0.03em; margin-block-start: var(--s-12); } h3 { font-size: var(--step-2); letter-spacing: -0.02em; margin-block-start: var(--s-8); } h4 { font-size: var(--step-1); letter-spacing: -0.01em; margin-block-start: var(--s-6); } h5, h6 { font-size: var(--step-0); letter-spacing: 0; margin-block-start: var(--s-4); } /* .l-prose is display:grid, so grid items never collapse margins the way normal block-flow siblings do. Left alone, a .c-eyebrow followed by a heading gets an 8px + 48px = 56px gap inside .l-prose sections, versus the 48px a plain .l-wrap section collapses the same pair down to. Subtracting the eyebrow's own margin-block-end here reproduces the collapsed 48px total in both wrapper types. */ .l-prose > .c-eyebrow + h2 { margin-block-start: calc(var(--s-12) - var(--s-2)); } .l-prose > .c-eyebrow + h3 { margin-block-start: calc(var(--s-8) - var(--s-2)); } p, ul, ol, blockquote, table, figure { margin-block-start: var(--s-4); } p, li { max-width: var(--measure); } li + li { margin-block-start: var(--s-2); } ul:not([class]) { padding-inline-start: var(--s-6); list-style: square; } ol:not([class]) { padding-inline-start: var(--s-6); } strong, b { font-weight: var(--w-display); } /* Links in prose. Brick, underlined by default so colour is not the only signal. Hover inverts per theme via the token, not a new value. */ main a:not([class]) { color: var(--brick); text-underline-offset: 0.15em; text-decoration-thickness: 1px; transition: color var(--t-quick) var(--ease); } main a:not([class]):hover { color: var(--brick-hover); } /* One focus ring, everywhere, two tone. A single tone cannot clear 3:1 on both --paper and a --brick fill (dark passes on paper and fails on brick, light does the reverse). Inner halo covers filled components, outer ring covers page grounds. Never outline:none. */ :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; box-shadow: 0 0 0 2px var(--focus-halo); border-radius: var(--radius); } /* Eyebrow. Uppercase, wide tracking, small. What Montserrat is for: it was drawn from Buenos Aires signage and this is where it wins. */ .c-eyebrow { font-size: var(--step--1); font-weight: var(--w-body); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-mute); margin-block-end: var(--s-2); } ::selection { background: var(--brick-wash); color: var(--ink); } } /* ===================================================================== LAYOUT | .l- page scaffolding ===================================================================== */ @layer layout { .l-wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } /* Section rhythm varies with content (design plan self-critique #3): a modifier shortens a section that has little to say. The default is generous; --tight and --flush are deliberate departures. */ /* Three tiers, one step apart on the spacing scale. Padding doesn't collapse the way margins do, so two adjacent full sections used to stack to 128px (mobile) / 192px (desktop) of pure whitespace at every boundary -- that was the default for most of the page, with only isolated single-line sections ever using --tight. Base is now the old --tight value; the old base becomes --generous, reserved for the handful of moments that should still read as a real break (e.g. right before the final CTA band). */ .l-section { padding-block: var(--s-12); } .l-section--tight { padding-block: var(--s-6); } .l-section--generous { padding-block: var(--s-16); } .l-section--flush { padding-block-start: 0; } @media (min-width: 1024px) { .l-section { padding-block: var(--s-16); } .l-section--tight { padding-block: var(--s-8); } .l-section--generous { padding-block: var(--s-24); } } /* Prose column, capped at the measure. Used for body-heavy pages. */ /* Content grid. Text sits in a centred column at the reading measure, so prose stays balanced on the page, while wide block components (tables, the estimator, the two-column fork) break out to the full section width and are also centred. This keeps a 6-column table from being squeezed to 60ch and forced to scroll on a wide desktop, without left-stranding the prose. The measure column uses min() so it never overflows a narrow viewport. */ .l-prose { max-width: none; display: grid; grid-template-columns: 1fr min(var(--measure), 100%) 1fr; } .l-prose > * { grid-column: 2; min-width: 0; } .l-prose > .c-est, .l-prose > .c-fork, /* The illustrated devices deliberately do NOT take the full-bleed escape hatch above. They sit in the measure column with the body copy, so every block on the page shares one left and right edge. */ /* Skip link. First focusable thing on every page. Visible on focus. */ .l-skip { position: absolute; left: var(--s-2); top: var(--s-2); z-index: 200; padding: var(--s-2) var(--s-4); background: var(--brick); color: var(--on-brick); border-radius: var(--radius); transform: translateY(-150%); transition: transform var(--t-quick) var(--ease); } .l-skip:focus { transform: translateY(0); } main { display: block; } } /* ===================================================================== COMPONENTS | .c- each block self contained, never reaches outside ===================================================================== */ @layer components { /* ---- Header ------------------------------------------------------ Sticky, 64px desktop / 56px mobile, surface ground, line bottom border, no shadow. On scroll the border firms via a data attr set by nav.js. That firming is the only change. */ .c-header { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--surface) 88%, transparent); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-block-end: 1px solid var(--line); transition: border-color var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease); } .c-header[data-scrolled="true"] { border-block-end-color: var(--line-firm); box-shadow: var(--shadow-sm); } .c-header__bar { position: relative; display: flex; align-items: center; gap: var(--s-4); min-height: 56px; } @media (min-width: 1024px) { .c-header__bar { min-height: 64px; } } .c-wordmark { display: inline-flex; align-items: center; gap: var(--s-2); font-weight: var(--w-display); font-size: var(--step-0); letter-spacing: -0.02em; color: var(--ink); text-decoration: none; margin-inline-end: auto; white-space: nowrap; } .c-wordmark__mark { width: 30px; height: 30px; border-radius: var(--radius); flex: none; } @media (min-width: 1024px) { .c-wordmark__mark { width: 34px; height: 34px; } } @media (min-width: 1024px) { .c-wordmark { font-size: var(--step-1); } } /* Mobile header carries only the wordmark and the burger. The theme toggle and the Book a call CTA live in the drawer and the sticky bar on small screens, so the top bar never crowds or wraps. */ .c-header .c-theme, .c-header__bar > .c-btn--primary { display: none; } @media (min-width: 1024px) { .c-header .c-theme { display: inline-flex; } .c-header__bar > .c-btn--primary { display: inline-flex; } } /* ---- Primary / ghost buttons ------------------------------------ */ .c-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--s-3); min-height: 52px; padding: 0 var(--s-6); font-weight: var(--w-display); font-size: var(--step-0); letter-spacing: -0.005em; line-height: 1; border: 1.5px solid transparent; border-radius: 12px; text-decoration: none; transition: background-color var(--t-quick) var(--ease), color var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease), transform var(--t-quick) var(--ease); } .c-btn:active { transform: translateY(0); } /* Sliding arrow, Amplus signature. */ .c-btn__arrow { flex: none; width: var(--icon-sm); height: var(--icon-sm); transition: transform var(--t-quick) var(--ease); } .c-btn:hover .c-btn__arrow { transform: translateX(4px); } .c-btn--primary { background: var(--btn); color: var(--on-btn); box-shadow: 0 1px 2px rgba(36, 26, 21, .12), 0 6px 16px rgba(233, 84, 16, .22); } .c-btn--primary:hover { background: var(--btn-hover); transform: translateY(-2px); box-shadow: 0 2px 4px rgba(36, 26, 21, .14), 0 12px 26px rgba(233, 84, 16, .30); } .c-btn--dark { background: var(--ink); color: var(--paper); } .c-btn--dark:hover { background: var(--btn); color: var(--on-btn); transform: translateY(-2px); box-shadow: 0 8px 18px rgba(233, 84, 16, .22); } /* Large CTA. */ .c-btn--lg { min-height: 56px; padding: 0 var(--s-8); font-size: var(--step-1); } .c-btn--ghost { background: var(--surface); color: var(--ink); border-color: var(--line-control); } .c-btn--ghost:hover { background: var(--ink); color: var(--paper); border-color: var(--ink); transform: translateY(-2px); box-shadow: var(--shadow); } .c-btn--channel { background: var(--surface); color: var(--ink); border: 1px solid var(--line-control); box-shadow: var(--shadow-sm); } .c-btn--channel:hover { background: var(--surface-2); transform: translateY(-2px); box-shadow: var(--shadow); } /* ---- Primary navigation + mega panel ----------------------------- Desktop nav is a flex row. Company Formation opens a click panel (never hover: hover menus are hostile on trackpads and unusable by keyboard). Panel state is aria-expanded, toggled by nav.js. With JS off the panel is a
and still works. */ .c-nav { display: none; } @media (min-width: 1024px) { .c-nav { display: flex; align-items: center; gap: var(--s-6); } .c-nav__link { color: var(--ink); text-decoration: none; font-size: var(--step-0); } .c-nav__link:hover { color: var(--brick); } } /* No position here: .c-mega__panel's containing block is deliberately .c-header__bar (a full-width, gutter-padded ancestor), not this narrow trigger wrapper, so the panel's clamped width always has genuine room to its right regardless of how far into the header the trigger itself sits. See .c-mega__panel. */ .c-mega__trigger { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--ink); font-size: var(--step-0); } .c-mega__trigger:hover { color: var(--brick); } .c-mega__trigger[aria-expanded="true"] .c-mega__chev { transform: rotate(180deg); } .c-mega__chev { transition: transform var(--t-quick) var(--ease); } .c-mega__panel { position: absolute; inset-inline-start: 0; inset-block-start: calc(100% + 8px); /* Clamped, not a bare min-width: at 1024-1200px viewports the header's own content (wordmark, nav, search, theme toggle, CTA) leaves too little room for a fixed 720px panel anchored at the trigger's position, and the site does not clip overflow-x, so an unclamped panel could push the whole page into a horizontal scrollbar. */ width: min(720px, calc(100vw - 2 * var(--gutter))); padding: var(--s-6) var(--s-8); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); display: grid; grid-template-columns: 1fr 1fr 1fr; gap: var(--s-6); } .c-mega__panel[hidden] { display: none; } .c-mega__col-head { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.12em; color: var(--ink-mute); font-weight: var(--w-body); padding-block-end: var(--s-2); margin-block-end: var(--s-2); border-block-end: 1px solid var(--line); text-decoration: none; display: block; } a.c-mega__col-head:hover { color: var(--brick); } .c-mega__link { display: block; padding-block: var(--s-1); color: var(--ink); text-decoration: none; font-size: var(--step-0); } .c-mega__link:hover { color: var(--brick); } .c-mega__note { display: block; font-size: var(--step--1); color: var(--ink-mute); } /* ---- Mobile drawer + toggle -------------------------------------- The burger sits next to .c-iconbtn (search) in the header, so it carries the same contained-pill treatment. A bare glyph beside a bordered circle read as an unfinished control rather than a pair. */ .c-burger { display: inline-flex; width: var(--chip-sm); height: var(--chip-sm); flex: none; align-items: center; justify-content: center; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line-control); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); transition: color var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease), background-color var(--t-quick) var(--ease); } .c-burger:hover { color: var(--brick); border-color: var(--brick); background: var(--brick-wash); } .c-burger svg { width: var(--icon-md); height: var(--icon-md); } @media (min-width: 1024px) { .c-burger { display: none; } } /* The drawer's own close button is on a plain ground and needs no pill. */ .c-drawer__head .c-burger { background: none; border-color: transparent; box-shadow: none; } .c-drawer { display: none; } .c-drawer[data-open="true"] { display: block; position: fixed; inset: 0; z-index: 150; background: var(--paper); padding: var(--s-4); overflow-y: auto; overscroll-behavior: contain; } .c-drawer__head { display: flex; align-items: center; justify-content: space-between; height: 56px; margin-block-end: var(--s-2); border-block-end: 1px solid var(--line); } /* Three depth tiers, one indent step each, so a glance tells you where you are: top level flush, city level +16px, service level +32px. Previously every row rendered its text at the same x, and the top-level links were indented FURTHER than the "Company Formation" summary they sit beside, which inverted the hierarchy. */ .c-drawer details { border-block-end: 1px solid var(--line); } .c-drawer summary { padding: var(--s-3) 0; min-height: var(--chip-sm); font-weight: var(--w-display); font-size: var(--step-1); list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: var(--s-3); } .c-drawer summary::-webkit-details-marker { display: none; } /* Expand affordance. summary already reserved the right-hand slot with space-between, but nothing was ever placed in it and the native marker is suppressed, so these rows looked like inert text. Drawn with borders rather than an asset, so it inherits colour and costs no request. */ .c-drawer summary::after { content: ""; flex: none; width: 9px; height: 9px; margin-inline-end: 2px; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: translateY(-3px) rotate(45deg); opacity: .5; transition: transform var(--t-quick) var(--ease), opacity var(--t-quick) var(--ease); } .c-drawer details[open] > summary::after { transform: translateY(2px) rotate(-135deg); opacity: .9; } .c-drawer details[open] > summary { color: var(--brick); } .c-drawer details details { border-block-end: 0; } .c-drawer details details summary { font-weight: var(--w-display); font-size: var(--step-0); padding-inline-start: var(--s-4); color: var(--ink-soft); } /* Links: 44px minimum touch target (they measured 43px). .c-wordmark is excluded: it is the drawer's masthead, not a nav row, and was inheriting the 32px indent, which pushed the brand name out of line with every item beneath it. */ .c-drawer a:not(.c-btn):not(.c-wordmark) { display: flex; align-items: center; min-height: var(--chip-sm); padding: var(--s-2) 0 var(--s-2) var(--s-8); color: var(--ink-soft); text-decoration: none; font-size: var(--step-0); } .c-drawer a:not(.c-btn):not(.c-wordmark):hover { color: var(--brick); } /* The drawer search box carries class="c-field", but .c-field is the flex COLUMN WRAPPER used around a label and an input; the input rules live in ".c-field input". Applied straight to the input it contributed nothing, leaving default browser chrome (2px inset border, square corners) in the middle of a themed panel. */ .c-drawer input[type="search"] { display: block; width: 100%; min-height: var(--chip-sm); padding: var(--s-2) var(--s-3); font: inherit; font-size: max(16px, var(--step-0)); background: var(--surface); color: var(--ink); border: 1px solid var(--line-control); border-radius: var(--radius); -webkit-appearance: none; appearance: none; } .c-drawer input[type="search"]::placeholder { color: var(--ink-mute); } /* Top-level links (Home, About, Contact) sit flush with the "Company Formation" summary they are siblings of, and carry the display weight and size so the two read as the same tier. */ /* Selector carries enough weight to beat .c-drawer a:not(.c-btn) above, which is (0,2,1); a bare .c-drawer__link would lose and keep the indent. */ .c-drawer a.c-drawer__link:not(.c-btn) { font-weight: var(--w-display); font-size: var(--step-1); color: var(--ink); padding-inline-start: 0; border-block-end: 1px solid var(--line); } /* Cities listed directly under Company Formation are one tier in. */ .c-drawer > .l-wrap > details > a:not(.c-btn) { padding-inline-start: var(--s-4); } .c-drawer__cta { position: sticky; bottom: 0; padding-block: var(--s-4); background: var(--paper); } /* ---- Theme toggle ------------------------------------------------ A contained, bordered pill so it reads as a deliberate control, not a floating icon. */ /* --chip-sm, not a one-off 42px: these sit directly beside .c-burger in the header, so a 2px difference between two bordered circles reads as a mistake. Also brings them onto the icon scale the rest of the site uses instead of drifting off it. */ .c-theme, .c-iconbtn { display: inline-flex; width: var(--chip-sm); height: var(--chip-sm); align-items: center; justify-content: center; color: var(--ink-soft); background: var(--surface); border: 1px solid var(--line-control); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); transition: color var(--t-quick) var(--ease), border-color var(--t-quick) var(--ease), background-color var(--t-quick) var(--ease), box-shadow var(--t-quick) var(--ease); } .c-iconbtn { flex: none; } .c-theme:hover, .c-iconbtn:hover { color: var(--brick); border-color: var(--brick); background: var(--brick-wash); box-shadow: var(--shadow); } /* Drawer variant: a labelled full-width row, not a bare icon square. The base .c-theme pill supplies a surface fill, a full border, a pill radius and a shadow. Only the radius was being overridden, so in the drawer this rendered as a white bordered box that read as a text input sitting among plain nav rows. All four are cleared here; the row is separated by a single hairline like the links above it. */ .c-theme--drawer { width: 100%; justify-content: flex-start; gap: var(--s-3); min-height: var(--chip-sm); padding: var(--s-3) 0; font-weight: var(--w-display); font-size: var(--step-1); color: var(--ink); background: none; border: 0; box-shadow: none; border-radius: 0; border-block-start: 1px solid var(--line); } .c-theme--drawer:hover { background: none; border-color: transparent; box-shadow: none; color: var(--brick); } .c-theme--drawer svg { width: var(--icon-md); height: var(--icon-md); } .c-theme__sun { display: none; } .c-theme__moon { display: block; } :root[data-theme="dark"] .c-theme__sun, :root:not([data-theme="light"]) .c-theme__sun { display: block; } :root[data-theme="dark"] .c-theme__moon, :root:not([data-theme="light"]) .c-theme__moon { display: none; } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .c-theme__sun { display: none; } :root:not([data-theme="dark"]) .c-theme__moon { display: block; } } /* ---- Breadcrumb --------------------------------------------------- */ .c-crumb { padding-block: var(--s-6) 0; } /* The ul[class]/ol[class] reset in @layer reset only fires on a list that carries its OWN class attribute. This
    doesn't (the class lives on the parent