/* ========================================================================== tokens.css — Cociniña design tokens (VARIABLES ONLY) -------------------------------------------------------------------------- This file controls NOTHING on its own. It only defines values that the other stylesheets use. Change a value here and it updates everywhere. ┌──────────────────────────────────────────────────────────────────────┐ │ HOW TO CUSTOMISE │ ├──────────────────────────────────────────────────────────────────────┤ │ COLOURS → section 1. Change --cn-page-bg, --cn-surface, │ │ --cn-accent or --cn-text and the whole page follows. │ │ READ THE CONTRAST NOTES before changing these; some │ │ combinations become unreadable. │ │ │ │ FONTS → section 3. Swap the family in --cn-font-display │ │ (headings) or --cn-font-body (everything else). │ │ If you change to a font that is not Cormorant │ │ Garamond or Manrope you must also add the @font-face │ │ rules in base.css and upload the files to │ │ astra-child/assets/fonts/. │ │ │ │ TEXT SIZES → section 4. Each uses clamp(min, fluid, max), so text │ │ scales smoothly between phone and desktop. To make │ │ something bigger everywhere, raise all three numbers. │ │ │ │ SPACING → section 5. The scale steps roughly 1.5x each time. │ │ --cn-space-md is the everyday gap. Raising │ │ --cn-card-pad alone makes the panels roomier. │ │ │ │ CORNERS → section 6 (--cn-radius-*). Set them all to 0 for a │ │ sharp-edged look, or raise --cn-radius-pill for │ │ rounder buttons. │ │ │ │ HEADER → section 9. --cn-header-h is the bar height AND the │ │ space pushed down when it turns sticky. One number. │ │ │ │ ANIMATION → section 8. --cn-dur is the standard speed. │ │ Set --cn-dur and --cn-dur-fast to 0ms to switch all │ │ motion off without touching any other file. │ └──────────────────────────────────────────────────────────────────────┘ Loaded on: the checkout page (Phase 1) and every page except the homepage (Phase 1.5 header). Later phases reuse the same file. ========================================================================== */ :root { /* ------------------------------------------------------------------ 1. BRAND COLOURS (the four decided brand colours + one for errors) ------------------------------------------------------------------ CONTRAST NOTES — verified, do not ignore: white on --cn-page-bg (#833D31) .... 7.85:1 PASS white on --cn-surface (#202E20) .... 14.26:1 PASS #202E20 on --cn-accent (#51B236) .... 5.28:1 PASS ← button labels white on --cn-accent (#51B236) .... 2.70:1 FAIL ← never do this --cn-accent on --cn-page-bg ......... 2.90:1 WEAK ← green buttons on the brick background always need a border or a dark card behind them, or they disappear. --cn-error on --cn-surface .......... 5.37:1 PASS --cn-error on --cn-page-bg .......... 2.90:1 FAIL ← this is why every notice sits on a --cn-surface panel, never directly on the page. ------------------------------------------------------------------ */ --cn-header-footer-bg: #202E20; /* deep green — header, footer, panels */ --cn-accent: #51B236; /* bright green — logo, primary buttons */ --cn-page-bg: #833D31; /* brick / terracotta — page background */ --cn-text: #FFFFFF; /* white — default text colour */ --cn-error: #E8836F; /* warm tint for errors; readable on the deep green panels only (see above) */ /* Semantic aliases — use these in the other files, not the raw names above. It means a panel can be re-coloured without hunting for every place the deep green was used. */ --cn-surface: var(--cn-header-footer-bg); /* card / panel background */ --cn-surface-raised: #2A3B2A; /* nested boxes inside a card (derived: --cn-header-footer-bg lightened) */ --cn-surface-sunken: #1A241A; /* darker inset (derived: darkened) */ --cn-page-bg-deep: #6B3228; /* darker brick, for gradient depth */ --cn-accent-dark: #3F8C2A; /* darker green — button gradient end and hover state */ --cn-accent-soft: rgba(81, 178, 54, 0.16); /* accent wash / tint */ /* Text tones — all derived from --cn-text so they stay in step */ --cn-text-muted: rgba(255, 255, 255, 0.72); /* 8.1:1 on surface */ --cn-text-faint: rgba(255, 255, 255, 0.54); /* decorative only */ --cn-hairline: rgba(255, 255, 255, 0.14); /* 1px editorial rules */ --cn-hairline-strong: rgba(255, 255, 255, 0.26); /* Form fields — dark text on a white field so typing stays readable */ --cn-field-bg: #FFFFFF; --cn-field-text: #202E20; --cn-field-placeholder: rgba(32, 46, 32, 0.52); --cn-field-border: rgba(32, 46, 32, 0.22); --cn-field-border-hover: rgba(32, 46, 32, 0.45); /* ------------------------------------------------------------------ 2. GRADIENTS — only ever built from the brand colours above ------------------------------------------------------------------ */ --cn-gradient-accent: linear-gradient(180deg, var(--cn-accent) 0%, var(--cn-accent-dark) 100%); --cn-gradient-page: linear-gradient(175deg, var(--cn-page-bg) 0%, var(--cn-page-bg-deep) 100%); /* ------------------------------------------------------------------ 3. FONT FAMILIES ------------------------------------------------------------------ */ --cn-font-display: "Cormorant Garamond", "Iowan Old Style", Georgia, "Times New Roman", serif; --cn-font-body: "Manrope", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* ------------------------------------------------------------------ 4. TYPE SCALE — clamp(smallest, fluid, largest) ------------------------------------------------------------------ */ --cn-text-2xs: 0.75rem; /* 12px micro-labels */ --cn-text-xs: 0.8125rem; /* 13px helper text */ --cn-text-sm: 0.875rem; /* 14px secondary */ --cn-text-base: 1rem; /* 16px body + INPUTS never go below 16px on inputs or iOS zooms the page when a field is tapped */ --cn-text-md: 1.0625rem; /* 17px */ --cn-text-lg: clamp(1.25rem, 0.5vw + 1.1rem, 1.5rem); --cn-text-xl: clamp(1.6rem, 1.2vw + 1.3rem, 2.1rem); /* section heads */ --cn-text-2xl: clamp(2.2rem, 2.6vw + 1.5rem, 3.4rem); /* page title */ --cn-text-total: clamp(1.75rem, 1.6vw + 1.3rem, 2.5rem); /* order total */ /* Order total inside a stat tile - smaller, so it never wraps mid-number */ --cn-text-total-tile: clamp(1.375rem, 0.9vw + 1.1rem, 1.875rem); --cn-leading-tight: 1.12; --cn-leading-snug: 1.35; --cn-leading-body: 1.6; --cn-tracking-tight: -0.02em; --cn-tracking-normal: 0; --cn-tracking-wide: 0.08em; /* small caps / eyebrow labels */ --cn-tracking-wider: 0.16em; --cn-weight-regular: 400; --cn-weight-medium: 500; --cn-weight-semibold: 600; --cn-weight-bold: 700; /* ------------------------------------------------------------------ 5. SPACING ------------------------------------------------------------------ */ --cn-space-3xs: 0.25rem; /* 4px */ --cn-space-2xs: 0.5rem; /* 8px */ --cn-space-xs: 0.75rem; /* 12px */ --cn-space-sm: 1rem; /* 16px */ --cn-space-md: 1.5rem; /* 24px */ --cn-space-lg: 2rem; /* 32px */ --cn-space-xl: 3rem; /* 48px */ --cn-space-2xl: 4rem; /* 64px */ --cn-space-3xl: 6rem; /* 96px */ --cn-card-pad: clamp(1.25rem, 2.5vw, 2.5rem); /* inside the panels */ --cn-page-gutter: clamp(1rem, 4vw, 3rem); /* page side margins */ --cn-column-gap: clamp(1.5rem, 3vw, 3rem); /* form ↔ summary gap */ --cn-checkout-max: 1240px; /* content max width */ /* Keeps content clear of the chat widget's bottom-right corner */ --cn-widget-safe: 6rem; /* 96px reserved zone */ /* The Order Pilot widget measured on the live site: a 155x50 pill inset 20px from the bottom-right at every width. The redesign never draws inside this box and never raises its own z-index near the widget. */ --cn-widget-w: 155px; --cn-widget-h: 50px; --cn-widget-inset: 20px; /* ------------------------------------------------------------------ 6. RADII ------------------------------------------------------------------ */ --cn-radius-sm: 4px; --cn-radius-md: 8px; --cn-radius-lg: 14px; --cn-radius-xl: 20px; --cn-radius-pill: 999px; /* ------------------------------------------------------------------ 7. SHADOWS & BORDERS ------------------------------------------------------------------ */ --cn-shadow-card: 0 18px 48px rgba(0, 0, 0, 0.28); --cn-shadow-raised: 0 10px 26px rgba(0, 0, 0, 0.22); --cn-shadow-button: 0 6px 18px rgba(32, 46, 32, 0.34); --cn-shadow-button-hover: 0 10px 26px rgba(32, 46, 32, 0.42); --cn-border-hair: 1px solid var(--cn-hairline); /* The white streak that sweeps across a button on hover. Lower the alpha for a subtler sweep, or set it to transparent to remove it. */ --cn-shimmer: rgba(255, 255, 255, 0.34); /* Focus ring — 2px bright green, used on every focusable element */ --cn-focus-ring: 2px solid var(--cn-accent); --cn-focus-ring-offset: 2px; /* ------------------------------------------------------------------ 8. MOTION ------------------------------------------------------------------ Set --cn-dur and --cn-dur-fast to 0ms to disable all animation. */ --cn-dur-fast: 200ms; --cn-dur: 400ms; --cn-dur-slow: 600ms; --cn-ease: cubic-bezier(0.22, 1, 0.36, 1); /* gentle ease-out */ --cn-ease-in-out: cubic-bezier(0.65, 0, 0.35, 1); --cn-reveal-dur: 300ms; /* card fade-up on load */ --cn-reveal-stagger: 60ms; /* delay between cards */ /* ------------------------------------------------------------------ 9. HEADER (Phase 1.5) ------------------------------------------------------------------ Two bars: a slim utility strip and the main bar. The main bar is the one that sticks; the utility strip scrolls away. Sticking is done with position:sticky on the header wrapper, so the bar never leaves the document flow. That is why there is no spacer and no body padding to keep in sync - the earlier version used body padding on top of Elementor own spacer and double-counted it. ------------------------------------------------------------------ */ --cn-util-h: 32px; /* utility strip height, desktop */ --cn-util-h-mobile: 30px; --cn-main-h: 64px; /* main bar height, desktop */ --cn-main-h-mobile: 60px; --cn-header-pad-x: clamp(1rem, 3vw, 2.5rem); /* side gutter, both bars */ /* Thin separator under the bar - a subtle tint of the bright green */ --cn-header-border: rgba(81, 178, 54, 0.28); /* Divider between the two bars - fainter still */ --cn-header-divider: rgba(81, 178, 54, 0.16); /* Utility strip text */ --cn-util-size: 12px; --cn-util-size-mobile: 10px; /* so the full promise fits 390px */ --cn-util-tracking: 0.09em; /* wide, small-caps feel */ /* Logo Sized from the bar height so it always fills the bar with a small, even margin. Change --cn-main-h and the logo follows automatically; change --cn-logo-inset to give it more or less breathing room. */ --cn-logo-inset: 4px; --cn-logo-h: calc(var(--cn-main-h) - (2 * var(--cn-logo-inset))); --cn-logo-h-mobile: calc(var(--cn-main-h-mobile) - (2 * var(--cn-logo-inset))); /* Main nav links */ --cn-nav-size: 13px; --cn-nav-size-mobile: 16px; /* >=16px so iOS never zooms on tap */ --cn-nav-weight: 600; --cn-nav-tracking: 0.075em; /* ~1px at 13px */ --cn-nav-gap: 28px; --cn-nav-gap-narrow: 18px; --cn-nav-tap-min: 44px; /* minimum tap target, never go lower */ /* Order Now CTA - bright green fill, deep green label (5.28:1). White on bright green is 2.70:1 and is never used. */ --cn-cta-pad-y: 9px; --cn-cta-pad-x: 20px; --cn-cta-size: 13px; /* ------------------------------------------------------------------ SCROLL EFFECT (sticky header, once past the utility strip) ------------------------------------------------------------------ Light frosted glass: half-opacity green over a backdrop blur, with a faint text shadow holding the menu against whatever scrolls past. Tune these and nothing else needs touching: --cn-fx-bg more opaque = safer over busy content --cn-fx-blur higher = softer backdrop --cn-fx-dur 0ms disables the fade entirely Opacity is written as a full rgba because a colour cannot be given an alpha channel later without color-mix(), which we avoid for reach. ------------------------------------------------------------------ */ --cn-fx-dur: 300ms; /* transition speed */ --cn-fx-blur: 12px; /* backdrop blur radius */ --cn-fx-bg: rgba(32, 46, 32, 0.50); /* Browsers without backdrop-filter get a much more opaque bar, because a 50% tint with no blur is not readable over arbitrary content. */ --cn-fx-bg-fallback: rgba(32, 46, 32, 0.86); --cn-fx-shadow: 0 6px 20px rgba(0, 0, 0, 0.28); --cn-fx-text-shadow: 0 1px 2px rgba(0, 0, 0, 0.55); --cn-fx-border: rgba(81, 178, 54, 0.18); /* WordPress admin bar height, for logged-in users only. Fallback for the rare case WordPress does not publish its own custom property. */ --cn-admin-bar-h: 32px; /* Sits far below the chat widget (2147483000) and under the 9999 cap */ --cn-header-z: 500; /* ------------------------------------------------------------------ CART (Phase 2) ------------------------------------------------------------------ */ --cn-cart-thumb: 96px; /* dish thumbnail, desktop */ --cn-cart-thumb-mobile: 72px; /* Quantity stepper. 44px is the minimum comfortable tap target and is what the minus/plus buttons are sized to. */ --cn-qty-btn: 44px; --cn-qty-field: 48px; /* the number between the buttons */ /* Sticky mobile checkout bar. Height feeds the body padding that stops it covering the last cart row. */ --cn-cart-bar-h: 76px; /* Upward shadow lifting the bar off the page content behind it */ --cn-shadow-bar: 0 -6px 20px rgba(0, 0, 0, 0.28); /* At 390px a full-width bar cannot fit a total and a button beside a 155px widget, so the bar is lifted to float ABOVE the widget instead of reserving a corner of itself. This is the clearance below it. */ --cn-cart-bar-lift: calc(var(--cn-widget-h) + var(--cn-widget-inset) + 12px); --cn-cart-bar-side: 12px; /* inset from the screen edges */ /* ------------------------------------------------------------------ PRODUCT CARD (Phase 2.1) The cn-product-card component. Phase 4 reuses it on the shop page, so nothing here mentions the cart. ------------------------------------------------------------------ */ --cn-card-thumb: 116px; /* dish photo, desktop */ --cn-card-thumb-mobile: 96px; --cn-card-pad: var(--cn-space-md); --cn-card-gap: var(--cn-space-md); /* between cards, both axes */ --cn-card-max: 960px; /* the grid stops widening here */ /* Category pill. The tint sits on --cn-surface, and the label is drawn in --cn-accent, which is 5.27:1 against that surface. */ --cn-tag-bg: rgba(81, 178, 54, 0.16); --cn-tag-border: rgba(81, 178, 54, 0.38); /* Lines of description kept before the text is clipped. */ --cn-card-desc-lines: 2; /* ------------------------------------------------------------------ SHOP (Phase 4) The shop page is deep green rather than brick, so cards sit on the raised surface to separate from it. CONTRAST on the shop, all verified: white on --cn-shop-bg (#202E20) ........ 14.26:1 PASS white on --cn-card-bg (#2A3B2A) ........ 11.96:1 PASS --cn-text-muted on --cn-card-bg ........ 8.1:1 PASS --cn-accent on --cn-shop-bg ............ 5.27:1 PASS --cn-accent on --cn-card-bg ............ 4.42:1 FAIL ← which is why the category pill and View details are WHITE on the card. Green is used there only for borders, the active filter pill and the add-to-cart fill, never for text on --cn-card-bg. --cn-header-footer-bg on --cn-accent ... 5.28:1 PASS ← button labels ------------------------------------------------------------------ */ --cn-shop-bg: var(--cn-header-footer-bg); /* #202E20 page */ --cn-card-bg: var(--cn-surface-raised); /* #2A3B2A card */ --cn-card-border: rgba(81, 178, 54, 0.30); /* green tint outline */ /* Shop dish cards are brick, as before the card rebuild, one step darker than --cn-page-bg (#833D31) so the green button clears 3:1 against the card (WCAG 1.4.11). On #7F3B30, all verified 2026-10-11: white ............................ 8.17:1 PASS name, price, links --cn-text-muted .................. 5.09:1 PASS description --cn-accent (button fill) ........ 3.02:1 PASS (#833D31: 2.90 FAIL) --cn-header-footer-bg on accent .. 5.28:1 PASS button label --cn-accent as text .............. 3.02:1 FAIL so no green text on the card: View details and more stay white. */ --cn-shop-card-bg: #7F3B30; /* Soft white glow around each shop card, lifting it off the deep green page. Built from the brand white (#FFFEFA). Raise the alpha for more glow, or set both to none to remove it. */ --cn-card-glow: 0 0 18px rgba(255, 254, 250, 0.25); --cn-card-glow-hover: 0 0 26px rgba(255, 254, 250, 0.38); /* Hero */ --cn-hero-h: clamp(15rem, 32vw, 29rem); /* 240px → 464px */ --cn-hero-h-mobile: clamp(12rem, 46vw, 17rem); /* shorter on phones */ --cn-hero-focus: 50% 62%; /* framed on the ingredients, not the top */ /* Hero text — the live /shop/ page's type (Elementor: Roboto 600 heading, 116px, normal tracking). The heading reaches exactly 116px from ~1250px up and scales down below that; live stays 116px on phones, which made its hero 1281px tall at 390px. The subtitle is Roboto 400; never under 16px, written in px because Astra shrinks the root font below 922px. */ --cn-hero-font: Roboto, sans-serif; --cn-hero-title-size: clamp(2.25rem, 1rem + 8vw, 116px); --cn-hero-intro-size: clamp(16px, 0.75rem + 0.9vw, 24px); /* Filter pills */ --cn-pill-gap: var(--cn-space-2xs); --cn-pill-pad: 0.55em 1.1em; /* Toast — clear of the chat widget's 155x50 pill at bottom 20 / right 20 */ --cn-toast-bottom: calc(var(--cn-widget-h) + var(--cn-widget-inset) * 2); /* ------------------------------------------------------------------ PRODUCT PAGE (Phase 5) The single product page sits on the brick gradient like the checkout. Everything a shopper acts on lives on a deep green panel, because green on brick is only 2.90:1. CONTRAST on the product page, all verified: white on --cn-page-bg (#833D31) ............ 7.84:1 PASS title, tabs, description text --cn-text-muted on --cn-page-bg ............ 4.93:1 PASS (6.02:1 on the darker --cn-page-bg-deep end of the gradient) white on --cn-surface (#202E20) ............ 14.26:1 PASS panel --cn-text-muted on --cn-surface ............ 8.10:1 PASS breadcrumb, short description --cn-accent on --cn-surface ................ 5.28:1 PASS category --cn-header-footer-bg on --cn-accent ....... 5.28:1 PASS button --cn-accent on --cn-surface-sunken (#1A241A) 5.93:1 PASS related band: the cards keep their green tag and link on --cn-surface, and the band behind them is darker so they still lift off it. ------------------------------------------------------------------ */ --cn-product-max: 1180px; /* content width */ --cn-product-gap: clamp(1.5rem, 4vw, 4rem); /* photo ↔ panel */ --cn-product-photo-r: var(--cn-radius-xl); /* 20px photo corners */ --cn-product-panel-bg: var(--cn-surface); --cn-product-panel-pad: clamp(1.25rem, 2.6vw, 2.25rem); --cn-product-title: clamp(2rem, 2.4vw + 1.3rem, 3rem); --cn-product-price: var(--cn-text-total); --cn-product-btn-h: 52px; /* Add to cart; >= 44px tap target */ --cn-product-qty-w: 88px; /* quantity field width */ --cn-product-tab-line: 2px; /* underline under the active tab */ --cn-product-band-bg: var(--cn-surface-sunken); /* related dishes */ /* Phones only: space kept free at the right of the Add to cart row so the button ends 8px before the chat launcher's column (launcher 48px + 20px inset + 8px, minus the ~35px the panel already sits in from the screen edge). */ --cn-product-widget-clear: 44px; /* ------------------------------------------------------------------ 9. LAYERING — never exceed 9999. The chat widget sits at 2147483000 and must always stay on top of anything here. ------------------------------------------------------------------ */ --cn-z-base: 1; --cn-z-sticky: 100; --cn-z-overlay: 9990; --cn-z-max: 9999; }