/* ================================================================= * Aldernorth Capital Design System * * Activation: add class="anc-redesign" to on any page that * should pick up this design system. Pages without the class stay * on the legacy main.css styles. * * THEMING: dark is the default. `` flips * the palette; the toggle lives in assets/js/theme.js. Only the * colour tokens below change between themes - every component rule * further down reads from var(), so nothing else needs a light * variant. * ================================================================= */ /* Fonts are self-hosted in assets/fonts/font.css (Switzer + Host Grotesk). No @import here: the CSP allows no font CDN. */ /* ================================================================= * DESIGN TOKENS - scoped to .anc-redesign so legacy pages untouched * Brand palette: * #FF6D29 orange · #453027 brown · #161316 ink * #BABABA gray · #FFFFFF white * ================================================================= */ /* main.css:88 and :96 read the page font from these two names but nothing ever declared them, so `font-family` was invalid at computed-value time and fell back to inherit - which is why the preloaded Switzer woff2 was reported as unused. Declared on :root so a bare `body` selector resolves them. */ :root { --anc-font-body: 'Switzer', 'Host Grotesk', system-ui, -apple-system, sans-serif; --anc-font-display: 'Switzer', 'Host Grotesk', system-ui, -apple-system, sans-serif; } .anc-redesign { /* --- Brand constants (identical in both themes) ---------------- */ --brand-orange: #FF6D29; --brand-orange-hover: #FF8A52; --brand-brown: #453027; --brand-ink: #161316; --brand-gray: #BABABA; /* --- Colour: surfaces (DARK - default) ------------------------ */ --color-bg-page: #161316; --color-bg-dark: #0F0D0F; --color-bg-dark-40: rgba(15, 13, 15, 0.40); --color-surface-warm: #1E1A1B; --color-surface-warm-alt: #241E1F; --color-surface-card: #1E1A1B; /* Cards that sit ON a warm section need to be lighter than it, or the only thing defining them is a hairline at ~1.1:1. Matches --color-surface-warm-alt. */ --color-surface-card-raised: #241E1F; --color-surface-raised: #453027; /* --- Colour: ink ---------------------------------------------- */ --color-ink-primary: #FFFFFF; --color-ink-body: #EDE9E7; --color-ink-muted: #BABABA; --color-ink-white: #FFFFFF; --color-ink-on-accent: #161316; /* --- Colour: accents ------------------------------------------ */ --color-accent: #FF6D29; /* primary CTA + active state */ --color-accent-hover: #FF8A52; --color-accent-text: #FF6D29; /* accent used AS text/links */ --color-accent-soft: rgba(255, 109, 41, 0.14); --color-accent-dark: #FF6D29; /* legacy alias: CTA pill primary */ --color-accent-red: #FF6D29; /* legacy alias: brand mark */ /* --- Borders / hairlines -------------------------------------- */ --color-border: rgba(255, 255, 255, 0.10); --color-border-strong: rgba(255, 255, 255, 0.18); /* --- Status semantics ----------------------------------------- */ --status-success: #4ADE80; --status-warning: #FBBF24; --status-danger: #F87171; /* --- Typography ---------------------------------------------- */ --font-display: 'Switzer', 'Host Grotesk', system-ui, -apple-system, sans-serif; --font-body: 'Switzer', 'Host Grotesk', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, monospace; /* Type scale (px values from spec, kept literal) */ --text-h1: 58px; --text-h2: 32px; --text-h3: 28px; --text-stat: 56px; --text-body-lg: 20px; --text-body: 16px; --text-sm: 14px; /* Line-heights computed per spec */ --lh-h1: 68px; --lh-h2: 40px; --lh-h3: 32px; --lh-stat: 61.6px; --lh-body-lg: 24px; --lh-body: 22.4px; --lh-sm: 16.8px; /* Tracking */ --tracking-h1: -1.1px; --tracking-h2: -1px; --tracking-eyebrow: 0.5px; /* Weights - Crestmark uses 400 / 500 / 600 only */ --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; /* --- Spacing (4px base unit) -------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-15: 60px; --space-20: 80px; --space-30: 120px; /* Section + container */ --section-py: 60px; --section-py-hero: 120px; --container-max: 1200px; --container-px: 40px; --container-px-sm: 16px; /* --- Radii ---------------------------------------------------- */ --radius-card: 8px; --radius-input: 4px; --radius-pill: 30px; --radius-circle: 50%; /* --- Motion --------------------------------------------------- */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 180ms; --dur-base: 240ms; --dur-slow: 400ms; /* No shadows in spec - depth via contrast only. */ --shadow-none: none; } /* ================================================================= * LIGHT THEME OVERRIDES * * Only colour tokens are redeclared - every component rule in this * file reads from var(), so the whole system flips from here. * * Note --color-accent-text: #FF6D29 on white is ~2.8:1 and fails * WCAG AA for text. In light mode, accent-as-text darkens to * #C24608 (5.0:1) while fills/icons keep the true brand orange. * ================================================================= */ :root[data-theme="light"] .anc-redesign { --color-bg-page: #FFFFFF; --color-bg-dark: #161316; --color-bg-dark-40: rgba(22, 19, 22, 0.40); --color-surface-warm: #FAF8F7; --color-surface-warm-alt: #F5F1EF; --color-surface-card: #FFFFFF; --color-surface-card-raised: #FFFFFF; --color-surface-raised: #F2ECE9; --color-ink-primary: #161316; --color-ink-body: #241E1F; --color-ink-muted: #6B615C; --color-ink-white: #FFFFFF; /* Stays dark: the accent fill is the same orange in both themes, and #161316 on #FF6D29 is 6.6:1 where white is only 2.8:1. */ --color-ink-on-accent: #161316; --color-accent: #FF6D29; --color-accent-hover: #E85D18; --color-accent-text: #C24608; --color-accent-soft: rgba(255, 109, 41, 0.10); --color-accent-dark: #FF6D29; --color-accent-red: #C24608; --color-border: rgba(22, 19, 22, 0.10); --color-border-strong: rgba(22, 19, 22, 0.18); --status-success: #15803D; --status-warning: #B45309; --status-danger: #B91C1C; } /* ================================================================= * GLOBAL BASE - body, headings, links * ================================================================= */ .anc-redesign { font-family: var(--font-body); font-size: var(--text-body); font-weight: var(--fw-regular); line-height: var(--lh-body); color: var(--color-ink-body); background: var(--color-bg-page); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; margin: 0; } /* ================================================================= * MOTION - theme flip + page transitions * * Flipping data-theme rewrites the tokens above. Without this the page * and all its text snap instantly while the components that carry their * own transition lag behind, which reads as tearing. * ================================================================= */ .anc-redesign, .anc-redesign .section, .anc-redesign .plan-card, .anc-redesign .card-feature, .anc-redesign .form-card, .anc-redesign .footer { transition: background-color var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out); } /* Cross-document view transitions: Chrome/Edge and Safari 18+ crossfade between navigations, Firefox ignores the at-rule entirely. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root) { animation-duration: var(--dur-base); animation-timing-function: var(--ease-out); } @media (prefers-reduced-motion: reduce) { .anc-redesign, .anc-redesign .section, .anc-redesign .plan-card, .anc-redesign .card-feature, .anc-redesign .form-card, .anc-redesign .footer { transition: none; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; } } .anc-redesign *, .anc-redesign *::before, .anc-redesign *::after { box-sizing: border-box; } .anc-redesign h1, .anc-redesign h2, .anc-redesign h3, .anc-redesign h4, .anc-redesign h5, .anc-redesign h6 { font-family: var(--font-display); color: var(--color-ink-primary); margin: 0; font-weight: var(--fw-medium); } .anc-redesign h1 { font-size: var(--text-h1); line-height: var(--lh-h1); letter-spacing: var(--tracking-h1); font-weight: var(--fw-regular); } .anc-redesign h2 { font-size: var(--text-h2); line-height: var(--lh-h2); letter-spacing: var(--tracking-h2); } .anc-redesign h3 { font-size: var(--text-h3); line-height: var(--lh-h3); font-weight: var(--fw-semibold); } .anc-redesign p { margin: 0; color: var(--color-ink-body); } .anc-redesign a { color: inherit; text-decoration: none; } .anc-redesign img { max-width: 100%; height: auto; display: block; } .anc-redesign ul, .anc-redesign ol { margin: 0; padding: 0; list-style: none; } .anc-redesign button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } /* ================================================================= * LAYOUT PRIMITIVES - container + section * ================================================================= */ .anc-redesign .container { max-width: var(--container-max); margin: 0 auto; padding-left: var(--container-px); padding-right: var(--container-px); width: 100%; } .anc-redesign .section { padding-top: var(--section-py); padding-bottom: var(--section-py); } .anc-redesign .section--warm { background: var(--color-surface-warm); } .anc-redesign .section--white { background: var(--color-bg-page); } .anc-redesign .section--dark { background: var(--color-bg-dark); color: var(--color-ink-white); } .anc-redesign .section--dark h1, .anc-redesign .section--dark h2, .anc-redesign .section--dark h3, .anc-redesign .section--dark p { color: var(--color-ink-white); } /* ================================================================= * RESPONSIVE * Crestmark spec uses a fixed-width transform:scale() - we use real * breakpoints per the spec's rebuild guidance (Section H). * ================================================================= */ @media (max-width: 768px) { .anc-redesign { --text-h1: 40px; --text-h2: 26px; --text-stat: 44px; --lh-h1: 48px; --lh-h2: 32px; --lh-stat: 48px; --section-py: 48px; --section-py-hero: 80px; } .anc-redesign .container { padding-left: var(--container-px-sm); padding-right: var(--container-px-sm); } } /* ================================================================= * COMPONENTS * ================================================================= */ /* --- Button (D.3 / D.4) ------------------------------------------- */ .anc-redesign .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-body); font-size: var(--text-body); line-height: 1; font-weight: var(--fw-regular); padding: 10px 16px; border-radius: var(--radius-pill); border: none; cursor: pointer; text-decoration: none; transition: background-color var(--dur-base) var(--ease-out), color var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out); min-height: 42px; } .anc-redesign .btn:focus-visible { outline: 2px solid var(--color-accent-red); outline-offset: 2px; } /* Primary CTA - dark pill (used everywhere except nav) */ .anc-redesign .btn--primary { background: var(--color-accent); color: var(--color-ink-on-accent); } .anc-redesign .btn--primary:hover { background: var(--color-accent-hover); } /* Nav CTA - white pill */ .anc-redesign .btn--nav { background: var(--color-accent); color: var(--color-ink-on-accent); } .anc-redesign .btn--nav:hover { background: var(--color-accent-hover); } /* Ghost - for dark-bg secondary actions (404, hero secondary) */ .anc-redesign .btn--ghost { background: transparent; color: var(--color-ink-white); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.4); } .anc-redesign .btn--ghost:hover { background: rgba(255, 255, 255, 0.08); } /* Form-style submit (D.14) - rectangular, muted */ .anc-redesign .btn--submit { background: var(--color-ink-muted); color: var(--color-ink-white); padding: 12px 28px; border-radius: var(--radius-input); min-height: 46px; width: 100%; } .anc-redesign .btn--submit:hover { background: var(--color-ink-primary); } /* --- Eyebrow Label (D.1, with ANC mono divergence) ---------------- */ .anc-redesign .eyebrow { display: inline-flex; align-items: center; gap: var(--space-2); font-family: var(--font-mono); font-size: var(--text-sm); font-weight: var(--fw-regular); line-height: var(--lh-sm); letter-spacing: var(--tracking-eyebrow); text-transform: uppercase; color: var(--color-ink-muted); } .anc-redesign .eyebrow__icon { width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-accent-red); } .anc-redesign .eyebrow__icon svg { width: 100%; height: 100%; display: block; } /* --- Section Header Block (D.2) ----------------------------------- */ .anc-redesign .section-header { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-4); max-width: 760px; } .anc-redesign .section-header--center { align-items: center; margin-left: auto; margin-right: auto; text-align: center; } .anc-redesign .section-header__title { /* inherits h2 styles */ } .anc-redesign .section-header__body { font-size: var(--text-body); line-height: var(--lh-body); color: var(--color-ink-muted); } .anc-redesign .section-header__cta { margin-top: var(--space-2); } /* When the header sits in a 2-col layout with grid on the right, stretch helper drops the max-width cap. */ .anc-redesign .section-header--wide { max-width: none; } /* --- Card: Icon-Top Feature (D.5) --------------------------------- */ /* Raised fill + the stronger hairline. See the note on --color-surface-card-raised: in the dark theme --color-surface-warm and --color-surface-card are the SAME value (#1E1A1B), so a card with neither a raised fill nor a border is literally invisible on a .section--warm. This component had it worse than most - its background token was identical to the warm section's, so it was flat in BOTH themes. Same pattern as .plan-card. */ .anc-redesign .card-feature { background: var(--color-surface-card-raised); border: 1px solid var(--color-border-strong); border-radius: var(--radius-card); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); overflow: clip; } .anc-redesign .card-feature__icon { width: 20px; height: 20px; color: var(--color-ink-primary); } .anc-redesign .card-feature__icon svg { width: 100%; height: 100%; display: block; } .anc-redesign .card-feature__title { font-family: var(--font-display); font-size: var(--text-body-lg); font-weight: var(--fw-medium); line-height: var(--lh-body-lg); color: var(--color-ink-primary); } .anc-redesign .card-feature__desc { font-size: var(--text-body); line-height: var(--lh-body); color: var(--color-ink-muted); } /* --- Card: Image-Top Feature (D.6) -------------------------------- */ .anc-redesign .card-image { display: flex; flex-direction: column; overflow: clip; border-radius: var(--radius-card); } .anc-redesign .card-image__media { width: 100%; aspect-ratio: 470 / 250; overflow: clip; background: var(--color-surface-warm); } .anc-redesign .card-image__media img { width: 100%; height: 100%; object-fit: cover; } .anc-redesign .card-image__body { background: var(--color-surface-warm); padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-3); flex: 1; } .anc-redesign .card-image__icon { width: 20px; height: 20px; color: var(--color-ink-primary); } .anc-redesign .card-image__title { font-family: var(--font-display); font-size: var(--text-body-lg); font-weight: var(--fw-medium); line-height: var(--lh-body-lg); color: var(--color-ink-primary); } .anc-redesign .card-image__desc { font-size: var(--text-body); line-height: var(--lh-body); color: var(--color-ink-muted); } /* --- Card: Stat Counter (D.7) ------------------------------------- */ /* Sits on .section--warm on the home page - see the .card-feature note. */ .anc-redesign .card-stat { background: var(--color-surface-card-raised); border: 1px solid var(--color-border-strong); border-radius: var(--radius-card); padding: var(--space-6); display: flex; flex-direction: column; justify-content: space-between; min-height: 234px; position: relative; overflow: clip; } .anc-redesign .card-stat__icon { position: absolute; top: var(--space-6); right: var(--space-6); width: 24px; height: 35px; color: var(--color-ink-body); } .anc-redesign .card-stat__icon svg { width: 100%; height: 100%; display: block; } .anc-redesign .card-stat__desc { font-size: var(--text-body); line-height: var(--lh-body); color: var(--color-ink-muted); max-width: calc(100% - 40px); /* avoid clashing with the absolute icon */ } .anc-redesign .card-stat__value { font-family: var(--font-display); font-size: var(--text-stat); font-weight: var(--fw-medium); line-height: var(--lh-stat); color: var(--color-ink-primary); letter-spacing: -0.5px; } /* --- Grid utilities ----------------------------------------------- */ .anc-redesign .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-5); } .anc-redesign .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-5); } @media (max-width: 768px) { .anc-redesign .grid-2, .anc-redesign .grid-3 { grid-template-columns: 1fr; gap: var(--space-4); } } /* --- Testimonial Block (D.13) ------------------------------------- */ .anc-redesign .testimonial { display: grid; grid-template-columns: 1.5fr 1fr; gap: var(--space-10); align-items: flex-start; } .anc-redesign .testimonial__quote { font-family: var(--font-display); font-size: var(--text-h2); font-weight: var(--fw-medium); line-height: var(--lh-h2); letter-spacing: var(--tracking-h2); color: var(--color-ink-primary); } .anc-redesign .testimonial__attribution { display: flex; align-items: center; gap: var(--space-3); } .anc-redesign .testimonial__portrait { width: 40px; height: 40px; border-radius: var(--radius-input); object-fit: cover; flex-shrink: 0; } .anc-redesign .testimonial__name { font-size: var(--text-sm); line-height: var(--lh-sm); font-weight: var(--fw-regular); color: var(--color-ink-primary); } .anc-redesign .testimonial__role { font-size: var(--text-sm); line-height: var(--lh-sm); color: var(--color-ink-muted); } @media (max-width: 768px) { .anc-redesign .testimonial { grid-template-columns: 1fr; gap: var(--space-6); } .anc-redesign .testimonial__quote { font-size: 24px; line-height: 30px; } } /* --- FAQ Accordion (D.10) ----------------------------------------- */ .anc-redesign .accordion { max-width: 640px; margin: 0 auto; display: flex; flex-direction: column; gap: var(--space-3); } /* Sits on .section--warm - see the .card-feature note. The border lives on the item, not the trigger, so it wraps the answer too when the item is open. */ .anc-redesign .accordion__item { background: var(--color-surface-card-raised); border: 1px solid var(--color-border-strong); border-radius: var(--radius-card); overflow: hidden; } .anc-redesign .accordion__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); min-height: 60px; padding: var(--space-5); text-align: left; font-family: var(--font-body); font-size: var(--text-body); line-height: var(--lh-body); font-weight: var(--fw-regular); color: var(--color-ink-primary); /* Transparent so the item's raised fill shows through - two stacked opaque fills would hide the item's border-radius at the corners. */ background: transparent; border: none; cursor: pointer; } /* Separate the question from its answer once open. Without this the open item is one undifferentiated slab. */ .anc-redesign .accordion__item[open] .accordion__trigger { border-bottom: 1px solid var(--color-border); } .anc-redesign .accordion__icon { width: 26px; height: 26px; border-radius: var(--radius-circle); background: var(--color-ink-primary); color: var(--color-bg-page); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; position: relative; } /* The strokes must be the INVERSE of the circle fill. The circle is --color-ink-primary, which inverts (#FFFFFF dark / #161316 light). These used --color-ink-white, which is literal #FFFFFF in BOTH themes - so in dark mode it was white-on-white and the +/x glyph was completely invisible, leaving a bare white dot that never appeared to change on open/close. --color-bg-page is the exact inverse of --color-ink-primary in both themes. */ .anc-redesign .accordion__icon::before, .anc-redesign .accordion__icon::after { content: ''; position: absolute; background: var(--color-bg-page); border-radius: 1px; } .anc-redesign .accordion__icon::before { width: 10px; height: 2px; } .anc-redesign .accordion__icon::after { width: 2px; height: 10px; transition: transform var(--dur-base) var(--ease-out); } .anc-redesign .accordion__item[open] .accordion__icon::after, .anc-redesign .accordion__trigger[aria-expanded="true"] .accordion__icon::after { transform: rotate(90deg); /* + becomes × visually (- + crossed bar) */ } .anc-redesign .accordion__body { padding: 0 var(--space-5) var(--space-5); color: var(--color-ink-muted); font-size: var(--text-body); line-height: var(--lh-body); } /* --- Navbar (D.12) ------------------------------------------------ */ .anc-redesign .navbar { /* display is declared explicitly: main.css used to hide .navbar outright below 992px, which blanked the whole public header on phones. */ display: block; position: sticky; top: 0; z-index: 100; width: 100%; /* Fixed dark scrim, not a theme token: the nav sits over hero photography in both themes and the links/wordmark on top of it are always white. 0.40 was too light to carry white text over bright hero images. */ background: rgba(15, 13, 15, 0.58); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); transition: background-color var(--dur-base) var(--ease-out), backdrop-filter var(--dur-base) var(--ease-out); } /* When scrolled past hero - toggled by JS adding .is-scrolled */ .anc-redesign .navbar.is-scrolled { background: var(--color-bg-page); backdrop-filter: none; border-bottom: 1px solid var(--color-border); } /* When page has no hero behind (about, contact, etc.), solid from start */ .anc-redesign .navbar--solid { background: var(--color-bg-page); backdrop-filter: none; border-bottom: 1px solid var(--color-border); } /* Mobile menu open. Two things have to happen here: 1. backdrop-filter must go. It makes the navbar a containing block for position:fixed descendants, which collapsed the overlay's `inset: 0` down to the 66px bar instead of the viewport. 2. the translucent hero scrim must go solid, so the bar reads as part of the overlay rather than a dark stripe across a light-theme menu. Needs .navbar twice to outrank .navbar.is-scrolled above. */ .anc-redesign .navbar.navbar--open { background: var(--color-bg-page); backdrop-filter: none; -webkit-backdrop-filter: none; border-bottom-color: transparent; } .anc-redesign .navbar.navbar--open .navbar__brand { color: var(--color-ink-primary); } .anc-redesign .navbar__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-6); min-height: 66px; padding: var(--space-3) 0; } .anc-redesign .navbar__brand { display: inline-flex; align-items: center; gap: var(--space-2); color: var(--color-ink-white); } /* --color-ink-primary is white in dark theme and ink in light, so this tracks the nav background correctly in both. */ .anc-redesign .navbar.is-scrolled .navbar__brand, .anc-redesign .navbar--solid .navbar__brand { color: var(--color-ink-primary); } /* The mark is a square leaf icon, not the old 1714x308 wordmark strip, so it needs more height to read at the same optical weight beside the name. */ .anc-redesign .navbar__brand img { height: 30px; width: auto; } /* Company name as live text rather than baked into the image: it inherits the colour from .navbar__brand, which already tracks nav state and theme, so it can never end up invisible the way a second hardcoded image could. */ /* px, not rem: main.css sets `html { font-size: 10px }`, so a rem value here lands at ~2/3 the intended size. The whole type scale is px for this reason. */ .anc-redesign .navbar__wordmark { font-family: var(--font-display); font-size: 17px; font-weight: 600; letter-spacing: -0.015em; line-height: 1; white-space: nowrap; color: inherit; } /* Mark swaps with whatever is actually BEHIND it, which depends on both the nav state and the theme: - over a hero (default state) the nav is a dark scrim -> white mark - scrolled/solid, the nav is --color-bg-page, which is dark in the dark theme and white in the light theme -> follow the theme Keying only off the state (as this did before) left the ink wordmark invisible on every solid-nav page in the dark theme. */ .anc-redesign .navbar__logo { display: block; } .anc-redesign .navbar__logo--dark { display: none; } /* Light theme: solid/scrolled nav is white, so switch to the ink mark. */ :root[data-theme="light"] .anc-redesign .navbar.is-scrolled .navbar__logo--light, :root[data-theme="light"] .anc-redesign .navbar--solid .navbar__logo--light { display: none; } :root[data-theme="light"] .anc-redesign .navbar.is-scrolled .navbar__logo--dark, :root[data-theme="light"] .anc-redesign .navbar--solid .navbar__logo--dark { display: block; } /* Dark theme keeps the white mark in every nav state. */ .anc-redesign .navbar__links { display: flex; align-items: center; gap: var(--space-6); margin: 0; padding: 0; } .anc-redesign .navbar__link { font-size: var(--text-body); line-height: var(--lh-body); color: var(--color-ink-white); transition: color var(--dur-base) var(--ease-out), opacity var(--dur-base) var(--ease-out); } .anc-redesign .navbar.is-scrolled .navbar__link, .anc-redesign .navbar--solid .navbar__link { color: var(--color-ink-body); } .anc-redesign .navbar__link:hover { opacity: 0.7; } .anc-redesign .navbar__cta { /* dark pill on dark nav doesn't pop; nav uses white pill (D.4) */ } /* Set by main.js while the mobile overlay is open. */ body.anc-redesign.has-nav-open { overflow: hidden; } /* Mobile-only CTA that lives inside the overlay; the desktop CTA is .navbar__cta over in .navbar__actions. */ .anc-redesign .navbar__links-cta { display: none; } .anc-redesign .navbar__toggle { display: none; width: 40px; height: 40px; align-items: center; justify-content: center; padding: 0; border: 0; background: none; cursor: pointer; /* Sits on the dark hero scrim by default, so white; tracks the theme once the nav goes solid. Matches the .navbar__link treatment below. */ color: var(--color-ink-white); } .anc-redesign .navbar.is-scrolled .navbar__toggle, .anc-redesign .navbar--solid .navbar__toggle { color: var(--color-ink-primary); } .anc-redesign .navbar__toggle svg { width: 24px; height: 24px; } .anc-redesign .navbar__toggle svg line { transform-box: view-box; transform-origin: center; transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } /* Hamburger folds into an X while the overlay is open. */ .anc-redesign .navbar--open .navbar__toggle svg line:nth-child(1) { transform: translateY(6px) rotate(45deg); } .anc-redesign .navbar--open .navbar__toggle svg line:nth-child(2) { opacity: 0; } .anc-redesign .navbar--open .navbar__toggle svg line:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } @media (max-width: 768px) { .anc-redesign .navbar__toggle { display: inline-flex; } /* Desktop pill is replaced by the full-width button inside the overlay. */ .anc-redesign .navbar__cta { display: none; } /* The link list becomes the full-screen menu. z-index is below the nav's own 100 on purpose, so the brand, theme toggle and close button stay above it and stay clickable; the top padding clears the 66px bar. */ .anc-redesign .navbar__links { position: fixed; inset: 0; z-index: 90; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--space-1); padding: 90px var(--container-px-sm) var(--space-10); background: var(--color-bg-page); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transform: translateY(-8px); transition: opacity var(--dur-base) var(--ease-out), transform var(--dur-base) var(--ease-out), visibility var(--dur-base) linear; } .anc-redesign .navbar--open .navbar__links { opacity: 1; visibility: visible; transform: none; } /* The overlay is --color-bg-page, not the hero scrim, so links must track the theme rather than staying white. Extra .navbar in the selector beats the .is-scrolled / --solid link colours above. */ .anc-redesign .navbar .navbar__links .navbar__link { display: block; padding: var(--space-4) var(--space-3); font-size: 24px; line-height: 32px; font-weight: var(--fw-medium); color: var(--color-ink-primary); border-radius: var(--radius-input); transition: background var(--dur-fast) var(--ease-out); } .anc-redesign .navbar .navbar__links .navbar__link:hover, .anc-redesign .navbar .navbar__links .navbar__link:focus-visible { background: var(--color-accent-soft); opacity: 1; } .anc-redesign .navbar__links-cta { display: block; margin-top: var(--space-6); } .anc-redesign .navbar__links-cta .btn { width: 100%; justify-content: center; } /* Keep the toggle above the overlay it controls. */ .anc-redesign .navbar--open .navbar__toggle, .anc-redesign .navbar--open .navbar__brand, .anc-redesign .navbar--open .theme-toggle { position: relative; z-index: 91; } /* Overlay fill is --color-bg-page, so the ink wordmark is the readable one in the light theme even when the nav itself is the dark hero scrim. */ :root[data-theme="light"] .anc-redesign .navbar--open .navbar__logo--light { display: none; } :root[data-theme="light"] .anc-redesign .navbar--open .navbar__logo--dark { display: block; } .anc-redesign .navbar--open .navbar__toggle, .anc-redesign .navbar--open .theme-toggle { color: var(--color-ink-primary); } } @media (prefers-reduced-motion: reduce) { .anc-redesign .navbar__links, .anc-redesign .navbar__toggle svg line { transition: none; } } /* --- Forms (D.14 adapted) ----------------------------------------- */ /* The auth pages put this on .auth-page, whose fill is --color-surface-warm - identical to --color-surface-card in the dark theme, so the card had no edge at all. See the .card-feature note. */ .anc-redesign .form-card { background: var(--color-surface-card-raised); border: 1px solid var(--color-border-strong); border-radius: var(--radius-card); padding: var(--space-8); max-width: 480px; width: 100%; margin: 0 auto; } .anc-redesign .form-card--wide { max-width: 760px; } .anc-redesign .form-card__header { display: flex; flex-direction: column; align-items: center; text-align: center; gap: var(--space-2); margin-bottom: var(--space-8); } .anc-redesign .form-card__header h1 { font-size: 28px; line-height: 32px; letter-spacing: -0.4px; font-weight: var(--fw-medium); } .anc-redesign .form-card__header p { color: var(--color-ink-muted); } .anc-redesign .form-stack { display: flex; flex-direction: column; gap: var(--space-5); } .anc-redesign .form-field { display: flex; flex-direction: column; gap: var(--space-2); } .anc-redesign .form-field__label { font-size: var(--text-sm); font-weight: var(--fw-medium); color: var(--color-ink-body); } /* `border: 1px solid transparent` at rest meant the only thing separating a field from its card was a fill difference - and in the dark theme --color-surface-warm equals the card's fill exactly, so the inputs had no visible edge at all until focused. A real hairline at rest, the ink border still marking focus. background-color, not the `background` shorthand: the select rule below sets a caret via background-image, and the shorthand would wipe it. */ .anc-redesign .form-field__input { background-color: var(--color-surface-warm); border: 1px solid var(--color-border-strong); border-radius: var(--radius-input); padding: 12px 16px; height: 48px; font-family: inherit; font-size: var(--text-body); color: var(--color-ink-body); width: 100%; transition: border-color var(--dur-base) var(--ease-out), background-color var(--dur-base) var(--ease-out); } .anc-redesign .form-field__input:hover:not(:focus) { border-color: var(--color-ink-muted); } .anc-redesign .form-field__input:focus { outline: none; border-color: var(--color-accent); background-color: var(--color-bg-page); box-shadow: 0 0 0 3px var(--color-accent-soft); } .anc-redesign .form-field__input::placeholder { color: var(--color-ink-muted); } .anc-redesign textarea.form-field__input { min-height: 120px; resize: vertical; padding: 12px 16px; height: auto; line-height: 1.5; } /* --- Select ------------------------------------------------------ These had NO styling at all, so both contact selects rendered the OS dropdown arrow - a dark glyph on a dark field in the dark theme. The caret is an inline SVG data URI (no external asset: the CSP blocks CDNs), drawn in currentColor via a `stroke` the token can't reach, so it is duplicated per theme below. */ .anc-redesign select.form-field__input { appearance: none; -webkit-appearance: none; padding-right: 44px; cursor: pointer; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%23BABABA' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 16px center; } :root[data-theme="light"] .anc-redesign select.form-field__input { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9' fill='none'%3E%3Cpath d='M1 1L7 7L13 1' stroke='%236B615C' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* The native