/* * fauna — design tokens. * * Source of truth: the owner's redesign handoff * (design_handoff_faunamarket/README.md, "Design Tokens"). The prototypes ship * inline styles because of the tool they were drawn in; production must not copy * that. Everything the theme paints with lives here as a variable, so the * redesign is applied by using these — not by pasting hex codes into templates. * * Values are reconciled 1:1 with the handoff tables (2026-07-27): the surfaces, * mints, borders and every shadow were off before, which is why "styled with * tokens" screens still did not match the mockups. * * Brand: green primary, coral accent, amber for ratings/active variants. */ /* ---------------------------------------------------------------- font ---- * * Manrope 400–800, self-hosted (variable font, 4 unicode subsets). * Self-hosted, not fonts.googleapis.com: a third-party render-blocking request * in plus a privacy/consent problem for an EU-facing shop. The variable * file covers the whole 400–800 range the handoff uses in one download. */ @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/templates/fauna/_assets/fonts/manrope-cyrillic-ext.woff2') format('woff2'); unicode-range: U+0460-052F, U+1C80-1C8A, U+20B4, U+2DE0-2DFF, U+A640-A69F, U+FE2E-FE2F; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/templates/fauna/_assets/fonts/manrope-cyrillic.woff2') format('woff2'); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/templates/fauna/_assets/fonts/manrope-latin-ext.woff2') format('woff2'); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face { font-family: 'Manrope'; font-style: normal; font-weight: 400 800; font-display: swap; src: url('/templates/fauna/_assets/fonts/manrope-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } :root { /* --- typeface ----------------------------------------------------- */ --fa-font: 'Manrope', system-ui, -apple-system, sans-serif; /* --- brand ------------------------------------------------------- */ --fa-green-500: #2FA37C; /* CTA, active states, links, icons */ --fa-green-600: #237E5F; /* primary button hover */ --fa-green-700: #238E68; /* promo gradient stop */ --fa-coral-500: #EE5A46; /* discount badges, cart counter, required, errors */ --fa-coral-600: #E0442F; /* hover / gradient stop */ --fa-coral-700: #D8442F; /* text on light coral */ --fa-amber-500: #F5A623; /* rating stars, active variant */ /* --- neutrals ---------------------------------------------------- */ --fa-ink-900: #22302B; /* body text, dark top bar, dark panels */ --fa-ink-700: #48564F; /* secondary text */ --fa-ink-500: #5A6A63; /* paragraphs, footer links */ --fa-ink-400: #8A968F; /* tertiary text, field labels, dates */ --fa-ink-300: #9AA8A2; /* drawer section titles, SKU */ --fa-ink-200: #B3BDB8; /* struck-through old price, counters */ --fa-ink-100: #C4CCC8; /* idle delete icons */ /* --- surfaces ---------------------------------------------------- */ --fa-surface-0: #FFFFFF; /* cards, inputs, header */ --fa-surface-50: #F7F9F8; /* light backing (review form, tags) */ --fa-surface-100: #F4F6F5; /* mobile canvas, inactive pills */ --fa-surface-150: #F1F4F3; /* search field, secondary buttons */ --fa-surface-200: #EEF1F0; /* footer */ --fa-mint-50: #F1FAF6; /* review section, price block */ --fa-mint-100: #E9F6F0; /* icon plates, active lang pill, idle "add to cart" */ /* --- borders ----------------------------------------------------- */ --fa-border-100: #EEF1F0; /* card borders */ --fa-border-200: #E7EBE9; /* input/chip borders */ --fa-border-300: #E3E8E6; /* footer divider */ --fa-border-mint: #E4F0EA; /* review card border */ /* --- utility fills ---------------------------------------------- */ --fa-overlay: rgba(20, 35, 28, .45); /* modal/drawer scrim */ --fa-gradient-photo: linear-gradient(0deg, rgba(18,32,27,.72), rgba(18,32,27,.05) 62%); --fa-gradient-green: linear-gradient(120deg, #2FA37C, #238E68); --fa-gradient-coral: linear-gradient(120deg, #EE5A46, #E0442F); --fa-pay-visa: #1a1f71; --fa-pay-mc-red: #eb001b; --fa-pay-mc-yellow: #f79e1b; /* --- radii ------------------------------------------------------- */ --fa-radius-xs: 6px; /* small badges, tags, payment plates */ --fa-radius-sm: 8px; --fa-radius-btn: 11px; /* buttons, inputs, icon plates, thumbs */ --fa-radius-md: 12px; /* primary buttons, search field, delivery cards */ --fa-radius-lg: 16px; /* product cards, content blocks */ --fa-radius-xl: 18px; /* banners, big product gallery */ --fa-radius-sheet: 20px 20px 0 0; --fa-radius-pill: 999px; /* --- shadows (handoff values, not eyeballed) --------------------- */ --fa-shadow-card: 0 6px 16px rgba(20, 50, 40, .06); --fa-shadow-hover: 0 10px 24px rgba(20, 50, 40, .10); --fa-shadow-header: 0 1px 0 #E7EBE9, 0 4px 14px rgba(20, 50, 40, .04); --fa-shadow-sticky: 0 -6px 24px rgba(20, 50, 40, .12); --fa-shadow-sheet: 0 -12px 44px rgba(20, 50, 40, .24); --fa-shadow-drawer: 14px 0 44px rgba(20, 50, 40, .22); --fa-shadow-sticky-filters: 0 6px 12px -6px rgba(20, 50, 40, .12); --fa-shadow-mega: 0 18px 44px rgba(20, 50, 40, .16); /* --- type scale (desktop; the mobile step is in redesign.css) ---- */ --fa-fs-h1: clamp(22px, 2.4vw, 29px); --fa-fs-h1-cat: 32px; --fa-fs-h2: 25px; --fa-fs-h3: 18px; --fa-fs-card-title: 14px; --fa-fs-price-lg: 30px; --fa-fs-price-card: 19px; --fa-fs-body: 14.5px; --fa-fs-label: 12.5px; --fa-fs-micro: 11px; --fa-lh-body: 1.65; --fa-lh-title: 1.2; --fa-ls-title: -.02em; /* --- layout ------------------------------------------------------ */ --fa-container: 1280px; --fa-page-pad: 24px; /* desktop side padding */ --fa-page-pad-sm: 12px; /* mobile side padding */ --fa-gap-xs: 4px; --fa-gap-sm: 8px; --fa-gap-md: 16px; --fa-gap-lg: 24px; --fa-gap-xl: 32px; --fa-gap-2xl: 48px; --fa-section-gap: 44px; /* between home/category sections (36–60) */ --fa-section-gap-sm: 26px; --fa-tap-target: 44px; /* minimum touch target on mobile */ --fa-breakpoint-md: 768px; /* --- motion ------------------------------------------------------ */ --fa-ease: cubic-bezier(.4, 0, .2, 1); --fa-dur-fast: .16s; /* mega menu */ --fa-dur-base: .24s; /* drawer, toast */ --fa-dur-slow: .28s; /* bottom sheet */ --fa-dur-micro: .18s; /* colour, shadow, chevron */ } /* Named animations from the handoff, so components reference them by name. */ @keyframes fa-mega-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } @keyframes fa-drawer-left { from { transform: translateX(-100%); } to { transform: none; } } @keyframes fa-sheet-up { from { transform: translateY(100%); } to { transform: none; } } @keyframes fa-toast-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } } @keyframes fa-fade-in { from { opacity: 0; } to { opacity: 1; } } .fa-mega { animation: fa-mega-in var(--fa-dur-fast) var(--fa-ease); box-shadow: var(--fa-shadow-mega); } .fa-drawer { animation: fa-drawer-left var(--fa-dur-base) var(--fa-ease); box-shadow: var(--fa-shadow-drawer); } .fa-sheet { animation: fa-sheet-up var(--fa-dur-slow) var(--fa-ease); box-shadow: var(--fa-shadow-sheet); } .fa-toast { animation: fa-toast-up var(--fa-dur-base) var(--fa-ease); } .fa-overlay { animation: fa-fade-in .2s var(--fa-ease); background: var(--fa-overlay); }