/* GENERATED by tools/styles-sync.mjs — DO NOT EDIT. Source: @hollaco/style-center@2.0.0 Regenerate with: npm run styles:sync Layers, in dependency order: foundation/tokens.primitives.css foundation/tokens.semantic.css foundation/tokens.responsive.css foundation/buttons.css components/form.css */ /* ---------- foundation/tokens.primitives.css ---------- */ /* ========================================================================== HollaCo Style Center — Tier 1: Primitives -------------------------------------------------------------------------- Raw values. No meaning attached. Nothing in a component should reference a primitive directly — reach for a semantic token in tokens.semantic.css instead, so the value can move without touching every consumer. Naming: --hc--. Colour ramps run 100 (lightest) to 1600 (near-black); 25/50/75 exist only on the grey ramp for near-whites. ========================================================================== */ :root { /* ---------- Colour: neutrals ---------- */ --hc-color-gray-25: #fff; --hc-color-gray-50: #f8f8f8; --hc-color-gray-75: #f3f3f3; --hc-color-gray-100: #e9e9e9; --hc-color-gray-200: #e1e1e1; --hc-color-gray-300: #dadada; --hc-color-gray-400: #c6c6c6; --hc-color-gray-500: #8f8f8f; --hc-color-gray-600: #717171; --hc-color-gray-700: #505050; --hc-color-gray-800: #292929; --hc-color-gray-900: #131313; --hc-color-gray-1000: #000; /* ---------- Colour: brand teal ---------- Anchored on #188888, sampled from the H logo. The 500 step (#4ec3c3) is the bright teal used for section-heading bars and highlights; the 1000 step (#136a6a) is the accessible-on-white variant. Contrast against white: 900 = 4.27:1 (AA for large text and UI components, just under the 4.5:1 body-text threshold), 1000 = 6.37:1 (AA for body text). Use 900 for fills carrying white text at 18px+ or bold 14px+; drop to 1000 for teal text on a white background. */ --hc-color-teal-100: #eefafa; --hc-color-teal-200: #d7f4f4; --hc-color-teal-300: #b0e9e9; --hc-color-teal-400: #7fd9d9; --hc-color-teal-500: #4ec3c3; --hc-color-teal-600: #33aeae; --hc-color-teal-700: #229d9d; --hc-color-teal-800: #1b9292; --hc-color-teal-900: #188888; --hc-color-teal-1000: #136a6a; --hc-color-teal-1100: #105a5a; --hc-color-teal-1200: #0d4a4a; --hc-color-teal-1300: #0a3b3b; --hc-color-teal-1400: #072d2d; --hc-color-teal-1500: #052020; --hc-color-teal-1600: #020f0f; /* ---------- Colour: amber ---------- The warm secondary already in use across the footprint — com.hollaco.www calls it --amber, com.hollaco.collections calls it --gold-100/200/300. Same three values, one name from here on. */ --hc-color-amber-500: #ee9b00; --hc-color-amber-700: #cc6602; --hc-color-amber-900: #bc3e03; /* ---------- Colour: deep ground ---------- The dark teal-black behind full-width dark sections. Shared verbatim by com.hollaco.www (--dark) and com.hollaco.collections (--background). */ --hc-color-ground: #001219; --hc-color-ground-2: #000b1d; /* ---------- Colour: green ---------- */ --hc-color-green-100: #edfcf1; --hc-color-green-200: #d7f7e1; --hc-color-green-300: #adeec5; --hc-color-green-400: #6be3a2; --hc-color-green-500: #2bd17d; --hc-color-green-600: #12b867; --hc-color-green-700: #0ba45d; --hc-color-green-800: #079355; --hc-color-green-900: #05834e; --hc-color-green-1000: #036e45; --hc-color-green-1100: #025d3c; --hc-color-green-1200: #014c34; --hc-color-green-1300: #003d2c; --hc-color-green-1400: #002e22; --hc-color-green-1500: #002119; --hc-color-green-1600: #000f0c; /* ---------- Colour: blue ---------- */ --hc-color-blue-100: #f5f9ff; --hc-color-blue-200: #e5f0fe; --hc-color-blue-300: #cbe2fe; --hc-color-blue-400: #accffd; --hc-color-blue-500: #8eb9fc; --hc-color-blue-600: #729efd; --hc-color-blue-700: #5d89ff; --hc-color-blue-800: #4b75ff; --hc-color-blue-900: #3b63fb; --hc-color-blue-1000: #274dea; --hc-color-blue-1100: #1d3ecf; --hc-color-blue-1200: #1532ad; --hc-color-blue-1300: #10288c; --hc-color-blue-1400: #0c1f69; --hc-color-blue-1500: #0e1843; --hc-color-blue-1600: #070b1e; /* ---------- Colour: red ---------- */ --hc-color-red-100: #fff6f5; --hc-color-red-200: #ffebe8; --hc-color-red-300: #ffd6d1; --hc-color-red-400: #ffbcb4; --hc-color-red-500: #ff9d91; --hc-color-red-600: #ff7665; --hc-color-red-700: #ff513d; --hc-color-red-800: #f03823; --hc-color-red-900: #d73220; --hc-color-red-1000: #b72818; --hc-color-red-1100: #9c2113; --hc-color-red-1200: #811b0e; --hc-color-red-1300: #68150a; --hc-color-red-1400: #501006; --hc-color-red-1500: #3b0b04; --hc-color-red-1600: #1d0502; /* ---------- Colour: orange ---------- */ --hc-color-orange-100: #fff6e7; --hc-color-orange-200: #ffeccf; --hc-color-orange-300: #ffda9e; --hc-color-orange-400: #ffc15e; --hc-color-orange-500: #ffa213; --hc-color-orange-600: #fc7d00; --hc-color-orange-700: #e86a00; --hc-color-orange-800: #d45b00; --hc-color-orange-900: #c24e00; --hc-color-orange-1000: #a73e00; --hc-color-orange-1100: #903300; --hc-color-orange-1200: #762900; --hc-color-orange-1300: #5f2000; --hc-color-orange-1400: #491800; --hc-color-orange-1500: #341200; --hc-color-orange-1600: #190800; /* ---------- Colour: yellow ---------- */ --hc-color-yellow-100: #fff8cc; --hc-color-yellow-200: #fff197; --hc-color-yellow-300: #ffde2c; --hc-color-yellow-400: #f5c700; --hc-color-yellow-500: #e6af00; --hc-color-yellow-600: #d29500; --hc-color-yellow-700: #c18300; --hc-color-yellow-800: #af7400; --hc-color-yellow-900: #9e6600; --hc-color-yellow-1000: #865500; --hc-color-yellow-1100: #724800; --hc-color-yellow-1200: #5d3b00; --hc-color-yellow-1300: #4b2f00; --hc-color-yellow-1400: #382300; --hc-color-yellow-1500: #281900; --hc-color-yellow-1600: #120b00; /* ---------- Colour: transparencies ---------- For scrims, overlays and subtle borders that must sit over unknown backgrounds. Prefer these to a solid grey wherever content shows through. */ --hc-color-transparent-black-00: rgb(0 0 0 / 0); --hc-color-transparent-black-04: rgb(0 0 0 / 4%); --hc-color-transparent-black-08: rgb(0 0 0 / 8%); --hc-color-transparent-black-12: rgb(0 0 0 / 12%); --hc-color-transparent-black-16: rgb(0 0 0 / 16%); --hc-color-transparent-black-24: rgb(0 0 0 / 24%); --hc-color-transparent-black-32: rgb(0 0 0 / 32%); --hc-color-transparent-black-48: rgb(0 0 0 / 48%); --hc-color-transparent-black-64: rgb(0 0 0 / 64%); --hc-color-transparent-black-72: rgb(0 0 0 / 72%); --hc-color-transparent-black-80: rgb(0 0 0 / 80%); --hc-color-transparent-black-88: rgb(0 0 0 / 88%); --hc-color-transparent-black-96: rgb(0 0 0 / 96%); --hc-color-transparent-white-00: rgb(255 255 255 / 0); --hc-color-transparent-white-04: rgb(255 255 255 / 4%); --hc-color-transparent-white-08: rgb(255 255 255 / 8%); --hc-color-transparent-white-12: rgb(255 255 255 / 12%); --hc-color-transparent-white-16: rgb(255 255 255 / 16%); --hc-color-transparent-white-24: rgb(255 255 255 / 24%); --hc-color-transparent-white-32: rgb(255 255 255 / 32%); --hc-color-transparent-white-48: rgb(255 255 255 / 48%); --hc-color-transparent-white-64: rgb(255 255 255 / 64%); --hc-color-transparent-white-72: rgb(255 255 255 / 72%); --hc-color-transparent-white-80: rgb(255 255 255 / 80%); --hc-color-transparent-white-88: rgb(255 255 255 / 88%); --hc-color-transparent-white-96: rgb(255 255 255 / 96%); /* ---------- Border radius ---------- */ --hc-border-radius-0: 0; --hc-border-radius-2: 2px; --hc-border-radius-4: 4px; --hc-border-radius-8: 8px; --hc-border-radius-12: 12px; --hc-border-radius-16: 16px; --hc-border-radius-24: 24px; --hc-border-radius-32: 32px; --hc-border-radius-999: 999px; /* ---------- Border width ---------- */ --hc-border-width-0: 0; --hc-border-width-1: 1px; --hc-border-width-2: 2px; --hc-border-width-4: 4px; /* ---------- Opacity ---------- */ --hc-opacity-00: 0; --hc-opacity-08: 8%; --hc-opacity-16: 16%; --hc-opacity-24: 24%; --hc-opacity-32: 32%; --hc-opacity-48: 48%; --hc-opacity-64: 64%; --hc-opacity-100: 100%; /* ---------- Shadow ---------- Four elevation levels, each split into its parts so a consumer can override one axis without restating the whole shadow. */ --hc-shadow-level-1-x: 0; --hc-shadow-level-1-y: 1px; --hc-shadow-level-1-blur: 6px; --hc-shadow-level-1-spread: 0; --hc-shadow-level-1-color: var(--hc-color-transparent-black-12); --hc-shadow-level-2-x: 0; --hc-shadow-level-2-y: 2px; --hc-shadow-level-2-blur: 8px; --hc-shadow-level-2-spread: 0; --hc-shadow-level-2-color: var(--hc-color-transparent-black-16); --hc-shadow-level-3-x: 0; --hc-shadow-level-3-y: 4px; --hc-shadow-level-3-blur: 12px; --hc-shadow-level-3-spread: 0; --hc-shadow-level-3-color: var(--hc-color-transparent-black-16); --hc-shadow-level-4-x: 0; --hc-shadow-level-4-y: 6px; --hc-shadow-level-4-blur: 16px; --hc-shadow-level-4-spread: 0; --hc-shadow-level-4-color: var(--hc-color-transparent-black-16); /* ---------- Spacing ---------- */ --hc-spacing-0: 0; --hc-spacing-2: 2px; --hc-spacing-4: 4px; --hc-spacing-8: 8px; --hc-spacing-12: 12px; --hc-spacing-16: 16px; --hc-spacing-20: 20px; --hc-spacing-24: 24px; --hc-spacing-32: 32px; --hc-spacing-40: 40px; --hc-spacing-48: 48px; --hc-spacing-64: 64px; --hc-spacing-80: 80px; --hc-spacing-96: 96px; --hc-spacing-124: 124px; --hc-spacing-160: 160px; --hc-spacing-240: 240px; /* ---------- Type: families ---------- Inter is the house family — already loaded as --font-inter by the Next.js properties (com.hollaco.www, .blog, .collections). Webflow properties get it from Google Fonts. The stack degrades to the platform UI face so a failed font load still renders in something intentional. */ --hc-font-family-sans: Inter, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --hc-font-family-mono: ui-monospace, "Cascadia Code", "Source Code Pro", Menlo, monospace; /* ---------- Type: weights ---------- */ --hc-font-weight-regular: 400; --hc-font-weight-medium: 500; --hc-font-weight-bold: 700; --hc-font-weight-extrabold: 800; --hc-font-weight-black: 900; /* ---------- Type: letter spacing ---------- Negative tracking that tightens as type gets larger. */ --hc-font-letter-spacing-0: 0; --hc-font-letter-spacing-neg-0_16: -0.16px; --hc-font-letter-spacing-neg-0_2: -0.2px; --hc-font-letter-spacing-neg-0_48: -0.48px; --hc-font-letter-spacing-neg-0_96: -0.96px; --hc-font-letter-spacing-neg-1: -1px; --hc-font-letter-spacing-neg-1_2: -1.2px; --hc-font-letter-spacing-neg-1_44: -1.44px; --hc-font-letter-spacing-neg-1_68: -1.68px; --hc-font-letter-spacing-neg-2_88: -2.88px; --hc-font-letter-spacing-neg-3_2: -3.2px; --hc-font-letter-spacing-neg-3_84: -3.84px; /* ---------- Type: line heights ---------- */ --hc-font-line-height-16: 16px; --hc-font-line-height-18: 18px; --hc-font-line-height-20: 20px; --hc-font-line-height-21: 21px; --hc-font-line-height-24: 24px; --hc-font-line-height-32: 32px; --hc-font-line-height-40: 40px; --hc-font-line-height-48: 48px; --hc-font-line-height-56: 56px; --hc-font-line-height-69: 69px; --hc-font-line-height-76: 76px; --hc-font-line-height-92: 92px; /* ---------- Type: sizes ---------- rem-based so a user's browser font-size setting is respected. */ --hc-font-size-12: 0.75rem; --hc-font-size-14: 0.875rem; --hc-font-size-16: 1rem; --hc-font-size-18: 1.125rem; --hc-font-size-20: 1.25rem; --hc-font-size-24: 1.5rem; --hc-font-size-32: 2rem; --hc-font-size-36: 2.25rem; --hc-font-size-40: 2.5rem; --hc-font-size-48: 3rem; --hc-font-size-56: 3.5rem; --hc-font-size-64: 4rem; --hc-font-size-72: 4.5rem; --hc-font-size-80: 5rem; --hc-font-size-96: 6rem; /* ---------- Blur ---------- */ --hc-blur-8: 8px; --hc-blur-16: 16px; --hc-blur-24: 24px; --hc-blur-32: 32px; --hc-blur-64: 64px; --hc-blur-128: 128px; } /* ---------- foundation/tokens.semantic.css ---------- */ /* ========================================================================== HollaCo Style Center — Tier 2: Semantic -------------------------------------------------------------------------- Role names. This is the tier components should reference. A semantic token says what a value is *for* ("the default page background", "subtle body copy"), never what it *is* ("grey 50"), so the palette can move underneath without a component ever noticing. Colour semantics are theme-dependent: the light values live on :root, and .dark overrides only the ones that actually differ. Everything else here — spacing, radius, type — is theme-independent. ========================================================================== */ :root { /* ---------- Brand ---------- One name for the HollaCo teal. Change this line and every brand surface, border and accent across the footprint follows. */ --hc-color-brand: var(--hc-color-teal-900); --hc-color-brand-bright: var(--hc-color-teal-500); --hc-color-brand-deep: var(--hc-color-teal-1000); /* ---------- Border radius ---------- */ --hc-border-radius-none: var(--hc-border-radius-0); --hc-border-radius-2xs: var(--hc-border-radius-2); --hc-border-radius-xs: var(--hc-border-radius-4); --hc-border-radius-sm: var(--hc-border-radius-8); --hc-border-radius-md: var(--hc-border-radius-16); --hc-border-radius-lg: var(--hc-border-radius-32); --hc-border-radius-round: var(--hc-border-radius-999); /* ---------- Border width ---------- */ --hc-border-width-sm: var(--hc-border-width-1); --hc-border-width-md: var(--hc-border-width-2); --hc-border-width-lg: var(--hc-border-width-4); /* ---------- Opacity ---------- */ --hc-opacity-disabled: var(--hc-opacity-48); --hc-opacity-scrim-strong: var(--hc-opacity-64); --hc-opacity-scrim-subtle: var(--hc-opacity-32); /* ---------- Spacing ---------- */ --hc-spacing-none: var(--hc-spacing-0); --hc-spacing-3xs: var(--hc-spacing-2); --hc-spacing-2xs: var(--hc-spacing-4); --hc-spacing-xs: var(--hc-spacing-8); --hc-spacing-sm: var(--hc-spacing-12); --hc-spacing-md: var(--hc-spacing-16); --hc-spacing-lg: var(--hc-spacing-24); --hc-spacing-xl: var(--hc-spacing-32); --hc-spacing-2xl: var(--hc-spacing-40); --hc-spacing-3xl: var(--hc-spacing-48); --hc-spacing-4xl: var(--hc-spacing-64); /* ---------- Layout ---------- Larger than spacing: the gaps between major page regions. */ --hc-layout-sm: var(--hc-spacing-80); --hc-layout-md: var(--hc-spacing-96); --hc-layout-lg: var(--hc-spacing-124); --hc-layout-xl: var(--hc-spacing-160); --hc-layout-2xl: var(--hc-spacing-240); /* ---------- Type: families ---------- */ --hc-font-family-default: var(--hc-font-family-sans); --hc-font-family-heading: var(--hc-font-family-sans); /* Applied by reset.css to body and headings. Named separately from the family tokens above so a property can retarget headings alone. */ --hc-body-font-family: var(--hc-font-family-default); --hc-heading-font-family: var(--hc-font-family-heading); /* Offset for in-page anchor scrolling, so a target does not land under a sticky header. Raise it to the header height where one exists. */ --hc-scroll-padding-block: 0; /* ---------- Type: role weights ---------- */ --hc-font-weight-heading: var(--hc-font-weight-black); --hc-font-weight-body: var(--hc-font-weight-regular); --hc-font-weight-eyebrow: var(--hc-font-weight-bold); --hc-font-weight-label: var(--hc-font-weight-bold); --hc-font-weight-caption: var(--hc-font-weight-bold); /* ---------- Type: letter spacing ---------- Tightens as the step grows: xs is the largest display type, 6xl is body. */ --hc-font-letter-spacing-xs: var(--hc-font-letter-spacing-neg-3_84); --hc-font-letter-spacing-sm: var(--hc-font-letter-spacing-neg-3_2); --hc-font-letter-spacing-md: var(--hc-font-letter-spacing-neg-2_88); --hc-font-letter-spacing-lg: var(--hc-font-letter-spacing-neg-1_68); --hc-font-letter-spacing-xl: var(--hc-font-letter-spacing-neg-1_44); --hc-font-letter-spacing-2xl: var(--hc-font-letter-spacing-neg-1); --hc-font-letter-spacing-3xl: var(--hc-font-letter-spacing-neg-0_96); --hc-font-letter-spacing-4xl: var(--hc-font-letter-spacing-neg-0_48); --hc-font-letter-spacing-5xl: var(--hc-font-letter-spacing-neg-0_2); --hc-font-letter-spacing-6xl: var(--hc-font-letter-spacing-0); /* ---------- Type: line heights ---------- */ --hc-font-line-height-2xs: var(--hc-font-line-height-16); --hc-font-line-height-xs: var(--hc-font-line-height-18); --hc-font-line-height-sm: var(--hc-font-line-height-20); --hc-font-line-height-md: var(--hc-font-line-height-24); --hc-font-line-height-lg: var(--hc-font-line-height-32); --hc-font-line-height-xl: var(--hc-font-line-height-40); --hc-font-line-height-2xl: var(--hc-font-line-height-48); --hc-font-line-height-3xl: var(--hc-font-line-height-56); --hc-font-line-height-4xl: var(--hc-font-line-height-69); --hc-font-line-height-5xl: var(--hc-font-line-height-76); --hc-font-line-height-6xl: var(--hc-font-line-height-92); /* ---------- Type: sizes ---------- */ --hc-font-size-xs: var(--hc-font-size-12); --hc-font-size-sm: var(--hc-font-size-14); --hc-font-size-md: var(--hc-font-size-16); --hc-font-size-lg: var(--hc-font-size-18); --hc-font-size-xl: var(--hc-font-size-20); --hc-font-size-2xl: var(--hc-font-size-24); --hc-font-size-3xl: var(--hc-font-size-32); --hc-font-size-4xl: var(--hc-font-size-36); --hc-font-size-5xl: var(--hc-font-size-40); --hc-font-size-6xl: var(--hc-font-size-48); --hc-font-size-7xl: var(--hc-font-size-56); --hc-font-size-8xl: var(--hc-font-size-64); --hc-font-size-9xl: var(--hc-font-size-72); --hc-font-size-10xl: var(--hc-font-size-80); --hc-font-size-11xl: var(--hc-font-size-96); /* ---------- Blur ---------- */ --hc-blur-xs: var(--hc-blur-8); --hc-blur-sm: var(--hc-blur-16); --hc-blur-md: var(--hc-blur-32); --hc-blur-lg: var(--hc-blur-64); /* ---------- Colour: light theme ---------- */ /* Backgrounds. Two brand fills, because a fill that carries text owes more contrast than one that does not. Use -brand for decorative surfaces — rules, bars, a section ground. Use -brand-strong wherever text or an icon sits on the fill: it pairs with --hc-color-content-on-brand-strong and the two are guaranteed to clear WCAG AA together, in both themes. */ --hc-color-background-brand: var(--hc-color-brand); --hc-color-background-brand-strong: var(--hc-color-brand-deep); --hc-color-background-brand-strong-hover: var(--hc-color-teal-1100); --hc-color-background-brand-strong-active: var(--hc-color-teal-1200); --hc-color-background-default: var(--hc-color-gray-25); --hc-color-background-disabled: var(--hc-color-gray-50); --hc-color-background-inverse: var(--hc-color-gray-1000); --hc-color-background-knockout: var(--hc-color-gray-1000); --hc-color-background-subtle: var(--hc-color-gray-50); --hc-color-background-utility-error: var(--hc-color-red-900); /* Borders */ --hc-color-border-brand: var(--hc-color-brand); --hc-color-border-default: var(--hc-color-gray-800); --hc-color-border-disabled: var(--hc-color-gray-400); --hc-color-border-inverse: var(--hc-color-gray-25); --hc-color-border-knockout: var(--hc-color-gray-1000); --hc-color-border-strong: var(--hc-color-gray-900); --hc-color-border-subtle: var(--hc-color-gray-300); --hc-color-border-utility-error: var(--hc-color-red-900); /* Content (text, icons) */ --hc-color-content-default: var(--hc-color-gray-1000); --hc-color-content-strong: var(--hc-color-gray-900); --hc-color-content-subtle: var(--hc-color-transparent-black-64); --hc-color-content-disabled: var(--hc-color-gray-400); --hc-color-content-knockout: var(--hc-color-gray-25); --hc-color-content-inverse: var(--hc-color-content-knockout); --hc-color-content-brand: var(--hc-color-brand-deep); /* The text colour that belongs on --hc-color-background-brand-strong. Always read the pair together; picking one by hand is how the 1.0.0 CTA ended up at 4.27:1. */ --hc-color-content-on-brand-strong: var(--hc-color-gray-25); --hc-color-content-body-strong: var(--hc-color-content-strong); --hc-color-content-body-subtle: var(--hc-color-content-subtle); --hc-color-content-heading: var(--hc-color-content-default); --hc-color-content-subheading: var(--hc-color-gray-1000); --hc-color-content-eyebrow: var(--hc-color-transparent-black-64); --hc-color-content-label: var(--hc-color-content-default); --hc-color-content-caption: var(--hc-color-content-subtle); --hc-color-content-utility-error: var(--hc-color-red-900); /* Links. The upstream reference left these undefined behind a TODO, so link colour silently inherited. Defined here so links are theme-aware by default. */ --hc-color-link: var(--hc-color-blue-1000); --hc-color-link-hover: var(--hc-color-blue-1100); --hc-color-link-visited: var(--hc-color-blue-1200); /* Focus ring */ --hc-color-focus-ring-default: var(--hc-color-blue-900); --hc-color-focus-ring-knockout: var(--hc-color-gray-25); } /* ---------- Colour: dark theme ---------- Applied by adding .dark to any element — a single section, or for a whole-site dark mode. Only the tokens that differ are restated. */ .dark { --hc-color-background-default: var(--hc-color-gray-900); --hc-color-background-inverse: var(--hc-color-gray-25); --hc-color-background-subtle: var(--hc-color-gray-700); /* Disabled surfaces had no dark values at all, so a disabled control kept a near-white fill (gray-50) on a near-black ground. */ --hc-color-background-disabled: var(--hc-color-gray-800); /* The deep teal that carries white text on a light ground goes muddy against a dark one — it stops reading as a button. The pair inverts instead: bright teal, dark text, 9.92:1. */ --hc-color-background-brand-strong: var(--hc-color-brand-bright); /* Interaction brightens here rather than darkening — on a dark ground, "darker" reads as receding, not as pressed. */ --hc-color-background-brand-strong-hover: var(--hc-color-teal-400); --hc-color-background-brand-strong-active: var(--hc-color-teal-300); --hc-color-border-default: var(--hc-color-gray-300); --hc-color-border-inverse: var(--hc-color-gray-1000); --hc-color-border-knockout: var(--hc-color-gray-25); --hc-color-border-strong: var(--hc-color-gray-25); --hc-color-border-disabled: var(--hc-color-gray-700); --hc-color-content-default: var(--hc-color-gray-25); /* The captured source mapped this to grey 600, leaving "strong" content markedly dimmer than default content in dark mode — backwards. It now mirrors the light theme, sitting one step off default rather than six. */ --hc-color-content-strong: var(--hc-color-gray-100); --hc-color-content-subtle: var(--hc-color-transparent-white-64); --hc-color-content-inverse: var(--hc-color-gray-1000); --hc-color-content-heading: var(--hc-color-content-knockout); --hc-color-content-subheading: var(--hc-color-content-knockout); --hc-color-content-eyebrow: var(--hc-color-transparent-white-48); --hc-color-content-label: var(--hc-color-content-knockout); --hc-color-content-brand: var(--hc-color-brand-bright); --hc-color-content-on-brand-strong: var(--hc-color-gray-1000); --hc-color-content-disabled: var(--hc-color-gray-700); /* An alias declared on :root resolves there, once. Redefining the token it points at does not re-resolve it — the alias itself has to be restated. All three point at content-strong or content-subtle, both inverted above, so without these lines they stay *black* on a dark ground. Caption is the one that shows: it is the help text under a form field. */ --hc-color-content-body-strong: var(--hc-color-content-strong); --hc-color-content-body-subtle: var(--hc-color-content-subtle); --hc-color-content-caption: var(--hc-color-content-subtle); --hc-color-link: var(--hc-color-blue-500); --hc-color-link-hover: var(--hc-color-blue-400); --hc-color-link-visited: var(--hc-color-blue-600); --hc-color-focus-ring-default: var(--hc-color-blue-500); } /* ---------- foundation/tokens.responsive.css ---------- */ /* ========================================================================== HollaCo Style Center — Tier 3: Responsive -------------------------------------------------------------------------- Viewport-scaled roles. Type and vertical rhythm are not fixed values — a heading-1 is 40px on a phone and 80px on a wide desktop. Components bind to the role (--hc-typography-font-size-heading-1) and never restate the sizes, so a single change here re-scales the whole footprint. Mobile-first: :root holds the small-viewport values, each breakpoint restates only what changes. ========================================================================== */ :root { /* ---------- Small viewport (base) ---------- */ --hc-viewport-vertical-padding-none: var(--hc-spacing-none); --hc-viewport-vertical-padding-2xs: var(--hc-spacing-md); --hc-viewport-vertical-padding-xs: var(--hc-spacing-lg); --hc-viewport-vertical-padding-sm: var(--hc-spacing-xl); --hc-viewport-vertical-padding-md: var(--hc-spacing-2xl); --hc-viewport-vertical-padding-lg: var(--hc-spacing-4xl); --hc-viewport-vertical-padding-xl: var(--hc-layout-sm); --hc-layout-guide-gap: var(--hc-spacing-xs); --hc-typography-font-size-super: var(--hc-font-size-7xl); --hc-typography-font-size-heading-1: var(--hc-font-size-5xl); --hc-typography-font-size-heading-2: var(--hc-font-size-3xl); --hc-typography-font-size-heading-3: var(--hc-font-size-2xl); --hc-typography-font-size-heading-4: var(--hc-font-size-xl); --hc-typography-font-size-heading-5: var(--hc-font-size-lg); --hc-typography-font-size-heading-6: var(--hc-font-size-md); --hc-typography-font-size-body-xs: var(--hc-font-size-xs); --hc-typography-font-size-body-sm: var(--hc-font-size-sm); --hc-typography-font-size-body-md: var(--hc-font-size-md); --hc-typography-font-size-body-lg: var(--hc-font-size-md); --hc-typography-font-size-eyebrow: var(--hc-font-size-md); --hc-typography-font-size-label: var(--hc-font-size-sm); --hc-typography-font-size-caption: var(--hc-font-size-xs); --hc-typography-letter-spacing-super: var(--hc-font-letter-spacing-lg); --hc-typography-letter-spacing-heading-1: var(--hc-font-letter-spacing-lg); --hc-typography-letter-spacing-heading-2: var(--hc-font-letter-spacing-3xl); --hc-typography-letter-spacing-heading-3: var(--hc-font-letter-spacing-4xl); --hc-typography-letter-spacing-heading-4: var(--hc-font-letter-spacing-4xl); --hc-typography-letter-spacing-heading-5: var(--hc-font-letter-spacing-5xl); --hc-typography-letter-spacing-heading-6: var(--hc-font-letter-spacing-5xl); --hc-typography-letter-spacing-body-xs: var(--hc-font-letter-spacing-6xl); --hc-typography-letter-spacing-body-sm: var(--hc-font-letter-spacing-6xl); --hc-typography-letter-spacing-body-md: var(--hc-font-letter-spacing-6xl); --hc-typography-letter-spacing-body-lg: var(--hc-font-letter-spacing-6xl); --hc-typography-letter-spacing-eyebrow: var(--hc-font-letter-spacing-6xl); --hc-typography-letter-spacing-label: var(--hc-font-letter-spacing-6xl); --hc-typography-letter-spacing-caption: var(--hc-font-letter-spacing-6xl); --hc-typography-line-height-super: var(--hc-font-line-height-3xl); --hc-typography-line-height-heading-1: var(--hc-font-line-height-xl); --hc-typography-line-height-heading-2: var(--hc-font-line-height-lg); --hc-typography-line-height-heading-3: var(--hc-font-line-height-md); --hc-typography-line-height-heading-4: var(--hc-font-line-height-sm); --hc-typography-line-height-heading-5: var(--hc-font-line-height-sm); --hc-typography-line-height-heading-6: var(--hc-font-line-height-xs); --hc-typography-line-height-body-xs: var(--hc-font-line-height-xs); --hc-typography-line-height-body-sm: var(--hc-font-line-height-xs); --hc-typography-line-height-body-md: var(--hc-font-line-height-sm); --hc-typography-line-height-body-lg: var(--hc-font-line-height-sm); --hc-typography-line-height-eyebrow: var(--hc-font-line-height-sm); --hc-typography-line-height-label: var(--hc-font-line-height-xs); --hc-typography-line-height-caption: var(--hc-font-line-height-2xs); } /* ---------- Medium viewport (tablet) ---------- */ @media (width >= 1024px) { :root { --hc-viewport-vertical-padding-2xs: var(--hc-spacing-xl); --hc-viewport-vertical-padding-xs: var(--hc-spacing-2xl); --hc-viewport-vertical-padding-sm: var(--hc-spacing-4xl); --hc-viewport-vertical-padding-md: var(--hc-layout-sm); --hc-viewport-vertical-padding-lg: var(--hc-layout-lg); --hc-viewport-vertical-padding-xl: var(--hc-layout-xl); --hc-typography-font-size-super: var(--hc-font-size-9xl); --hc-typography-font-size-heading-1: var(--hc-font-size-7xl); --hc-typography-font-size-heading-2: var(--hc-font-size-6xl); --hc-typography-font-size-heading-3: var(--hc-font-size-3xl); --hc-typography-font-size-heading-4: var(--hc-font-size-2xl); --hc-typography-font-size-heading-5: var(--hc-font-size-xl); --hc-typography-font-size-body-xs: var(--hc-font-size-sm); --hc-typography-font-size-body-lg: var(--hc-font-size-lg); --hc-typography-letter-spacing-super: var(--hc-font-letter-spacing-md); --hc-typography-letter-spacing-heading-1: var(--hc-font-letter-spacing-sm); --hc-typography-letter-spacing-heading-2: var(--hc-font-letter-spacing-xl); --hc-typography-letter-spacing-heading-5: var(--hc-font-letter-spacing-4xl); --hc-typography-line-height-super: var(--hc-font-line-height-4xl); --hc-typography-line-height-heading-1: var(--hc-font-line-height-3xl); --hc-typography-line-height-heading-2: var(--hc-font-line-height-2xl); --hc-typography-line-height-heading-3: var(--hc-font-line-height-lg); --hc-typography-line-height-heading-4: var(--hc-font-line-height-md); --hc-typography-line-height-body-lg: var(--hc-font-line-height-md); } } /* ---------- Large viewport (desktop) ---------- */ @media (width >= 1280px) { :root { --hc-viewport-vertical-padding-xs: var(--hc-spacing-4xl); --hc-viewport-vertical-padding-sm: var(--hc-layout-sm); --hc-viewport-vertical-padding-md: var(--hc-layout-lg); --hc-viewport-vertical-padding-lg: var(--hc-layout-xl); --hc-viewport-vertical-padding-xl: var(--hc-layout-2xl); --hc-typography-font-size-super: var(--hc-font-size-11xl); --hc-typography-font-size-heading-1: var(--hc-font-size-10xl); --hc-typography-font-size-heading-2: var(--hc-font-size-7xl); --hc-typography-font-size-heading-3: var(--hc-font-size-6xl); --hc-typography-font-size-heading-4: var(--hc-font-size-4xl); --hc-typography-font-size-heading-5: var(--hc-font-size-2xl); --hc-typography-font-size-heading-6: var(--hc-font-size-lg); --hc-typography-font-size-body-lg: var(--hc-font-size-xl); --hc-typography-letter-spacing-super: var(--hc-font-letter-spacing-xs); --hc-typography-letter-spacing-heading-2: var(--hc-font-letter-spacing-lg); --hc-typography-letter-spacing-heading-3: var(--hc-font-letter-spacing-xl); --hc-typography-letter-spacing-heading-4: var(--hc-font-letter-spacing-2xl); --hc-typography-letter-spacing-heading-5: var(--hc-font-letter-spacing-3xl); --hc-typography-line-height-super: var(--hc-font-line-height-6xl); --hc-typography-line-height-heading-1: var(--hc-font-line-height-5xl); --hc-typography-line-height-heading-2: var(--hc-font-line-height-3xl); --hc-typography-line-height-heading-3: var(--hc-font-line-height-2xl); --hc-typography-line-height-heading-4: var(--hc-font-line-height-lg); --hc-typography-line-height-heading-5: var(--hc-font-line-height-md); } } /* ---------- Extra-large viewport ---------- */ @media (width >= 1440px) { :root { --hc-typography-letter-spacing-heading-5: var(--hc-font-letter-spacing-4xl); } } /* ---------- foundation/buttons.css ---------- */ /* ========================================================================== HollaCo Style Center — Buttons -------------------------------------------------------------------------- One base class, .con-button, plus fill variants. The base is an outlined pill; add .fill, .brand, .blue or .transparent to change how it reads. Everything is bound to semantic tokens, so the dark-theme block at the bottom only has to restate the handful of surfaces that actually invert. ========================================================================== */ .action-area { display: flex; flex-wrap: wrap; gap: var(--hc-spacing-xs); } .con-button { --hc-cta-backdrop-filter: blur(calc(var(--hc-blur-md) / 2)); box-sizing: border-box; background-color: var(--hc-color-transparent-black-00); backdrop-filter: var(--hc-cta-backdrop-filter); -webkit-backdrop-filter: var(--hc-cta-backdrop-filter); border-radius: var(--hc-border-radius-round); border: var(--hc-border-width-md) solid var(--hc-color-content-default); color: var(--hc-color-content-default); display: inline-flex; justify-content: center; align-items: center; gap: var(--hc-spacing-xs); font-size: var(--hc-typography-font-size-label); font-weight: var(--hc-font-weight-bold); line-height: var(--hc-typography-line-height-label); letter-spacing: var(--hc-typography-letter-spacing-label); text-decoration: none; height: var(--hc-spacing-2xl); padding: var(--hc-spacing-none) var(--hc-spacing-lg); transition: background-color 300ms var(--hc-parallax-easing), border-color 300ms var(--hc-parallax-easing), color 300ms var(--hc-parallax-easing); &:focus-visible { outline: var(--hc-border-width-2) solid var(--hc-color-border-knockout); outline-offset: var(--hc-border-width-2); box-shadow: 0 0 0 var(--hc-border-width-2) var(--hc-color-border-inverse); } &:is(:disabled, [aria-disabled="true"], .disabled) { pointer-events: none; opacity: 48%; cursor: not-allowed; } &.outline { &:hover { background-color: var(--hc-color-transparent-black-08); } &:active { background-color: var(--hc-color-gray-1000); color: var(--hc-color-gray-25); } } &.button-xs { padding: var(--hc-spacing-none) var(--hc-spacing-sm); height: var(--hc-spacing-lg); } /* The HollaCo teal call to action. This is the default primary button for the footprint; .blue is kept for properties that have not migrated yet. Bound to the -brand-strong pair, not --hc-color-brand: the label is bold 14px, which is not WCAG "large text" (that needs 14pt bold = 18.66px), so it owes the full 4.5:1. Both themes are carried by the tokens, which is why this block needs no .dark counterpart. */ &.brand { background-color: var(--hc-color-background-brand-strong); border-color: var(--hc-color-background-brand-strong); --hc-cta-backdrop-filter: none; color: var(--hc-color-content-on-brand-strong); &:hover { background-color: var(--hc-color-background-brand-strong-hover); border-color: var(--hc-color-background-brand-strong-hover); } &:active { background-color: var(--hc-color-background-brand-strong-active); border-color: var(--hc-color-background-brand-strong-active); } &:is(:disabled, [aria-disabled="true"], .disabled) { background-color: var(--hc-color-gray-1000); border-color: var(--hc-color-gray-1000); } } &.blue { background-color: var(--hc-color-blue-900); border-color: var(--hc-color-blue-900); --hc-cta-backdrop-filter: none; color: var(--hc-color-gray-25); &:hover { background-color: var(--hc-color-blue-1000); border-color: var(--hc-color-blue-1000); } &:active { background-color: var(--hc-color-blue-1100); border-color: var(--hc-color-blue-1100); } &:is(:disabled, [aria-disabled="true"], .disabled) { background-color: var(--hc-color-gray-1000); border-color: var(--hc-color-gray-1000); } } &.fill { background-color: var(--hc-color-gray-1000); border-color: var(--hc-color-gray-1000); --hc-cta-backdrop-filter: none; color: var(--hc-color-gray-25); &:hover { background-color: var(--hc-color-transparent-black-64); border-color: var(--hc-color-transparent-black-64); } &:active { background-color: var(--hc-color-gray-1000); border-color: var(--hc-color-gray-1000); } } &.transparent { border: none; --hc-cta-backdrop-filter: none; &:hover { background-color: var(--hc-color-transparent-black-08); } &:active { background-color: var(--hc-color-transparent-black-12); color: var(--hc-color-gray-1000); } } .icon { display: flex; align-items: center; svg { width: 12px; height: 12px; } } } /* Icon Button Styles */ .icon-button { align-items: center; background-color: var(--hc-color-transparent-white-16); block-size: 32px; border: var(--hc-border-width-sm) solid var(--hc-color-transparent-white-12); border-radius: 6px; /* No token */ box-sizing: border-box; display: inline-flex; flex-shrink: 0; inline-size: 32px; justify-content: center; transition: background-color 0.2s ease, border-color 0.2s ease; will-change: background-color, border-color; path { transition: fill 0.2s ease; will-change: fill; } } /* Promo CTA Styles */ .promo-cta { align-items: center; background: var(--hc-color-background-knockout); border-radius: var(--hc-border-radius-12); color: var(--hc-color-content-knockout); display: inline-flex; font-size: var(--hc-typography-font-size-eyebrow); font-weight: var(--hc-font-weight-eyebrow); gap: var(--hc-spacing-sm); letter-spacing: var(--hc-typography-letter-spacing-eyebrow); line-height: var(--hc-typography-line-height-eyebrow); padding: var(--hc-spacing-sm); text-decoration: none; white-space: nowrap; img { block-size: 32px; flex-shrink: 0; inline-size: 32px; object-fit: cover; overflow: hidden; } .icon-button { margin-inline-start: var(--hc-spacing-sm); } &:hover, &:focus { .icon-button { background-color: var(--hc-color-transparent-white-24); } } &:active { .icon-button { background-color: var(--hc-color-content-knockout); border-color: var(--hc-color-content-knockout); path { fill: var(--hc-color-background-knockout); } } } } .dark { .con-button { &.outline { background-color: var(--hc-color-transparent-white-00); border-color: var(--hc-color-gray-25); &:hover { background-color: var(--hc-color-transparent-white-64); color: var(--hc-color-gray-1000); } &:active { background-color: var(--hc-color-gray-25); color: var(--hc-color-gray-1000); } } &.fill { background-color: var(--hc-color-gray-25); border-color: var(--hc-color-gray-25); color: var(--hc-color-gray-1000); &:hover { background-color: var(--hc-color-transparent-white-64); } &:active { background-color: var(--hc-color-gray-25); } } &.transparent { background-color: var(--hc-color-transparent-white-00); color: var(--hc-color-gray-25); &:hover { background-color: var(--hc-color-transparent-white-12); color: var(--hc-color-gray-25); } &:active { background-color: var(--hc-color-transparent-white-16); color: var(--hc-color-gray-25); } } &.blue:is(:disabled, [aria-disabled="true"], .disabled) { border-color: var(--hc-color-gray-25); background-color: var(--hc-color-gray-25); color: var(--hc-color-gray-1000); } } } /* ---------- components/form.css ---------- */ /* ========================================================================== HollaCo Style Center — Form fields -------------------------------------------------------------------------- The primitives a sign-in, sign-up or profile form is built from: a labelled control, its help text, and its error state. Scope is deliberately narrow. This file owns the parts every HollaCo form shares — label, text control, select, help, error. It does NOT own one-off arrangements like a six-box verification-code row or a password-strength list; those stay with the property until a second property wants them. Markup shape:

We'll never share it.

The error state is driven by aria-invalid on the control, so the accessible name and the visual treatment cannot drift apart:

Enter a valid email address.

Colour is bound to semantic tokens throughout, so the dark theme falls out of the token tier. The one exception is the select chevron, which is a data URI and cannot resolve currentColor — see the note at .hc-field__select. ========================================================================== */ .hc-field { display: flex; flex-direction: column; gap: var(--hc-spacing-2xs); margin-block-end: var(--hc-spacing-md); } .hc-field__label { color: var(--hc-color-content-label); font-size: var(--hc-typography-font-size-label); font-weight: var(--hc-font-weight-label); line-height: var(--hc-typography-line-height-label); } /* One selector for every text-ish control plus the select, so a type change in the markup never silently drops the styling. */ .hc-field__input, .hc-field__select { box-sizing: border-box; width: 100%; min-height: var(--hc-spacing-2xl); padding: var(--hc-spacing-xs) var(--hc-spacing-sm); background-color: var(--hc-color-background-default); border: var(--hc-border-width-sm) solid var(--hc-color-border-default); border-radius: var(--hc-border-radius-xs); color: var(--hc-color-content-default); font-family: inherit; font-size: var(--hc-typography-font-size-body-md); line-height: var(--hc-typography-line-height-body-md); transition: border-color 200ms ease, box-shadow 200ms ease; &::placeholder { color: var(--hc-color-content-subtle); } /* :focus-visible alone would skip programmatic focus, which is exactly how a card-switching flow moves the caret into the first field. */ &:focus { outline: none; border-color: var(--hc-color-border-brand); box-shadow: 0 0 0 var(--hc-border-width-md) var(--hc-color-focus-ring-default); } &:disabled { background-color: var(--hc-color-background-disabled); border-color: var(--hc-color-border-disabled); color: var(--hc-color-content-disabled); cursor: not-allowed; } /* Driven by aria-invalid rather than a class, so assistive tech and the visual treatment cannot disagree about whether the field is in error. */ &[aria-invalid="true"] { border-color: var(--hc-color-border-utility-error); &:focus { box-shadow: 0 0 0 var(--hc-border-width-md) var(--hc-color-background-utility-error); } } } /* The chevron rides in a custom property rather than being repeated as a background declaration, so the dark theme overrides one line instead of restating the whole shorthand. A data URI cannot resolve currentColor, so the stroke is baked — same trade the concierge component already makes. */ .hc-field__select { --hc-field-chevron: url('data:image/svg+xml;utf8,'); appearance: none; padding-inline-end: var(--hc-spacing-xl); cursor: pointer; background-image: var(--hc-field-chevron); background-repeat: no-repeat; background-position: right var(--hc-spacing-sm) center; background-size: var(--hc-spacing-sm) var(--hc-spacing-sm); /* The chevron is a trailing affordance, so it swaps edges in RTL. */ &:dir(rtl) { background-position: left var(--hc-spacing-sm) center; } } .dark .hc-field__select { --hc-field-chevron: url('data:image/svg+xml;utf8,'); } .hc-field__help, .hc-field__error { margin: var(--hc-spacing-none); font-size: var(--hc-typography-font-size-body-sm); line-height: var(--hc-typography-line-height-body-sm); } .hc-field__help { color: var(--hc-color-content-caption); } .hc-field__error { color: var(--hc-color-content-utility-error); font-weight: var(--hc-font-weight-label); } /* Empty until the script writes a message, and an empty red line is a stray mark on a form nobody has touched yet. */ .hc-field__error:empty { display: none; }