/* Outfit (Google Fonts) — loaded for the whole default theme. Must stay at the * very top: CSS requires @import before any style rule. Wired to the font tokens * in :root below (rules.md §11.1, Approach B). */ @import url("https://fonts.googleapis.com/css2?family=Outfit:wght@400;500;600;700&display=swap"); /* ============================================================================ * Default theme — storefront overrides * * Loaded AFTER the platform's prebuilt `base.css` (Tailwind v4 + the full * design-token system). This file's sole job is to redeclare any of the * documented `--brand-*` tokens (and the two `--font-*` aliases) to re-skin * the storefront. NO custom class library lives here anymore — every blade * in this theme styles itself with Tailwind utilities and design tokens. * * Full reference: see `themes/default/rules.md` §11. * ============================================================================ */ /* ---------------------------------------------------------------------------- * Custom fonts (Google Fonts & self-hosted) * * Two steps to use any custom font: (1) LOAD it, (2) point --font-primary / * --font-secondary at it (always keep a system fallback at the end of the * stack). --font-primary drives body copy + the `font-primary` utility; * --font-secondary drives every h1–h6 + the `font-secondary` utility. * * The default theme ships NO active font override (it inherits the platform * "Roboto", sans-serif default), so the snippets below are commented out. * Uncomment ONE approach and edit the family name. Full guide: rules.md §11.1. * * --- Approach A — Google Fonts, hosted (fastest): add to a layout ---- * @push('head') * * * * @endpush * …then set the variable in the :root block below. * * --- Approach B — Google Fonts, hosted via CSS @import (single file) -------- * Must be the VERY FIRST rule in this file (CSS requires @import first): * @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap"); * * --- Approach C — self-hosted (recommended; GDPR-safe, no Google request) --- * Drop the .woff2 files in assets/fonts/ then declare the faces here: * @font-face { * font-family: "Inter"; * font-style: normal; * font-weight: 400; * font-display: swap; * src: url("../fonts/inter-400.woff2") format("woff2"); * } * @font-face { * font-family: "Inter"; * font-style: normal; * font-weight: 700; * font-display: swap; * src: url("../fonts/inter-700.woff2") format("woff2"); * } * -------------------------------------------------------------------------- */ :root { /* Outfit (loaded via the @import at the top of this file) drives the WHOLE * theme: --font-primary is the base `body` font + the `font-primary` utility; * --font-secondary is every h1–h6 + the `font-secondary` utility. A system * fallback stays last so text renders before the web font arrives. */ --font-primary: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --font-secondary: "Outfit", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; /* ── Brand colors ────────────────────────────────────────────────────── * Re-skin the platform `--color-*` tokens by redeclaring the `--brand-*` * layer they fall back to. Setting these here (this file is served AFTER * the prebuilt base.css) recolors the WHOLE theme — buttons, links, focus * rings, badges, the dark header/footer surfaces and the login brand panel * — without rebuilding base.css. * * Primary: royal blue ramp anchored on #3260e7 (hue ~225°). The `50` tint * (#eef2fe) is the soft badge / subtle-surface background. */ --brand-color-primary-50: #eef2fe; --brand-color-primary-100: #dce5fd; --brand-color-primary-200: #bfcefb; --brand-color-primary-300: #93a9f6; --brand-color-primary-400: #6483f0; --brand-color-primary-500: #3260e7; --brand-color-primary-600: #2a4fc9; --brand-color-primary-700: #243fa0; --brand-color-primary-800: #1d3279; /* Secondary: cool slate-navy ramp (Tailwind Slate). The `800` shade * (#0f172a) is the darkest navy used for the header/footer chrome and the * login brand panel base; the mid shades drive muted text / borders. */ --brand-color-secondary-50: #f1f5f9; --brand-color-secondary-100: #e2e8f0; --brand-color-secondary-200: #cbd5e1; --brand-color-secondary-300: #94a3b8; --brand-color-secondary-400: #475569; --brand-color-secondary-500: #334155; --brand-color-secondary-600: #1e293b; --brand-color-secondary-700: #172033; --brand-color-secondary-800: #0f172a; } :root.dark { /* The platform base.css ships a complete dark palette (page + card * surfaces, text, borders, inputs, status subtles) under `.dark`, so the * whole storefront re-skins straight from the design tokens with no * per-element overrides. Hint native form controls / scrollbars for dark, * and redeclare any `--brand-*` token here to tune individual values. */ color-scheme: dark; } /* ---------------------------------------------------------------------------- * Light/dark asset swaps * * The logo (header, footer, login) and the header theme-toggle each ship a * light and a dark variant in the markup; CSS shows the one matching the * active `.dark` root class. Done in plain CSS (not `dark:` utilities) so it * is served live with NO base.css rebuild and flips the instant the root * class changes (server render, no-FOUC script, or live JS toggle). * * A logo without a dark variant ships no `--light` class, so it stays visible * in both schemes. * -------------------------------------------------------------------------- */ .storefront-logo--dark { display: none; } :root.dark .storefront-logo--light { display: none; } :root.dark .storefront-logo--dark { display: block; } .theme-toggle__to-light { display: none; } :root.dark .theme-toggle__to-dark { display: none; } :root.dark .theme-toggle__to-light { display: inline-flex; } /* ---------------------------------------------------------------------------- * Form controls — checkboxes * * The platform base.css ships native, browser-default checkboxes which read * small and inconsistent across the storefront. Re-skin every storefront * checkbox to match the B2B template (Figma): a larger rounded box with a * subtle border + shadow that fills with the brand primary and shows a white * check when selected. Colors reference the design tokens, so per-customer * branding (which overrides `--color-primary`) recolors the checked state too. * * `:not(.sr-only)` leaves visually-hidden checkboxes untouched — those may * drive custom visually-hidden patterns and must keep their native clipped box. * -------------------------------------------------------------------------- */ .storefront input[type="checkbox"]:not(.sr-only) { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 1.5rem; height: 1.5rem; margin: 0; padding: 0; border: 1px solid var(--color-border-subtle, #e5e8ee); border-radius: 0.375rem; background-color: var(--color-surface-card, #ffffff); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .storefront input[type="checkbox"]:not(.sr-only):checked { border-color: var(--color-primary, #3260e7); background-color: var(--color-primary, #3260e7); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' d='M3.5 8.5l3 3 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 1rem; } .storefront input[type="checkbox"]:not(.sr-only):focus-visible { outline: 2px solid var(--color-primary, #3260e7); outline-offset: 2px; } .storefront input[type="checkbox"]:not(.sr-only):disabled { cursor: not-allowed; opacity: 0.5; } /* ---------------------------------------------------------------------------- * Form controls — radio buttons * * Mirror the checkbox skin so every storefront radio is the same 24px control: * a circle that fills with the brand primary and shows a white center dot when * selected. Colors reference the design tokens, so per-customer branding * recolors the checked state too. `:not(.sr-only)` leaves visually-hidden radios * untouched. Native browser radios can't be resized reliably, so the size unification * requested for the storefront requires this `appearance: none` re-skin. * -------------------------------------------------------------------------- */ .storefront input[type="radio"]:not(.sr-only) { appearance: none; -webkit-appearance: none; flex-shrink: 0; width: 1.5rem; height: 1.5rem; margin: 0; padding: 0; border: 1px solid var(--color-border-subtle, #e5e8ee); border-radius: 9999px; background-color: var(--color-surface-card, #ffffff); box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.05); cursor: pointer; transition: background-color 0.15s ease, border-color 0.15s ease; } .storefront input[type="radio"]:not(.sr-only):checked { border-color: var(--color-primary, #3260e7); background-color: var(--color-primary, #3260e7); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Ccircle cx='8' cy='8' r='4.5' fill='white'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 1rem; } .storefront input[type="radio"]:not(.sr-only):focus-visible { outline: 2px solid var(--color-primary, #3260e7); outline-offset: 2px; } .storefront input[type="radio"]:not(.sr-only):disabled { cursor: not-allowed; opacity: 0.5; } /* ---------------------------------------------------------------------------- * Native centering * * The platform base.css ships Tailwind's Preflight, whose universal * `*, ::before, ::after { margin: 0 }` reset overrides the user-agent * `dialog { margin: auto }` rule that centers an open modal dialog. Without * this, every `showModal()` dialog (the canonical modal component plus the * inlined checkout / account dialogs) renders pinned to the top-left corner. * Re-assert the native centering here; an element selector outranks the `*` * reset, and this file loads after base.css. * * NOTE FOR CUSTOM THEMES: this rule is NOT in the platform base.css, so every * theme that uses `` modals MUST re-declare it in its own stylesheet * (see rules.md §9 "Modals" and §10.4). * -------------------------------------------------------------------------- */ dialog { margin: auto; } /* ---------------------------------------------------------------------------- * Checkout "deliver to my billing address" toggle * * The same-as-billing checkbox lives inside its