/** * Coffee Trade — Design tokens * ---------------------------------------------------------------------------- * Single source of truth for the brand palette and reusable design tokens. * Loaded first; every other child stylesheet consumes these custom properties. * * Palette is from the client brief ("Modernisering af Coffee Trade webshop"): * Cream #F6F6F5 primary background * Stone #C7C2BA cards / image fields / secondary surfaces * Taupe #AFA8A2 lines, filter areas, badges, supporting surfaces * Espresso#27170E primary text, strong CTAs, premium contrast * Walnut #5A3022 depth, warm sections, hover states * Bronze #C49D70 button accents, trust elements, exclusive accent * * GLOBAL COLOUR FORCING (client-approved): unlike the first iteration, we now * map the brand palette onto Astra's and Elementor's global-colour CSS custom * properties (see the ":root — forced global palette" block at the foot of this * file) so the whole front-end is on-brand without an admin step. The Customizer * Global Colors pickers still exist and stay editable in wp-admin; we only win on * the front-end via cascade order. A client who prefers to manage colours from the * Customizer can delete that block and instead enter the six hex values in * Appearance > Customize > Global > Colors and Elementor > Site Settings. */ :root { /* --- Brand palette --------------------------------------------------- */ --ctc-cream: #F6F6F5; --ctc-stone: #C7C2BA; --ctc-taupe: #AFA8A2; --ctc-espresso: #27170E; --ctc-walnut: #5A3022; --ctc-bronze: #C49D70; /* --- Semantic aliases ------------------------------------------------ */ --ctc-bg: var(--ctc-cream); --ctc-surface: var(--ctc-stone); /* cards, calm material fields */ --ctc-surface-muted: var(--ctc-taupe); /* filter bar, supporting blocks */ --ctc-text: var(--ctc-espresso); --ctc-text-muted: #6B6058; /* meta / secondary copy (AA on cream) */ --ctc-text-on-dark: var(--ctc-cream); --ctc-line: var(--ctc-taupe); /* hairlines, dividers, borders */ --ctc-accent: var(--ctc-bronze); /* premium accent / trust marks */ /* Primary call-to-action (strong, premium contrast) */ --ctc-cta-bg: var(--ctc-espresso); --ctc-cta-fg: var(--ctc-cream); --ctc-cta-hover-bg: var(--ctc-walnut); --ctc-cta-hover-fg: var(--ctc-cream); /* Secondary / advisory action (calm outline) */ --ctc-cta2-fg: var(--ctc-espresso); --ctc-cta2-border: var(--ctc-bronze); --ctc-cta2-hover-bg: var(--ctc-bronze); --ctc-cta2-hover-fg: var(--ctc-espresso); /* --- Spacing scale (rhythm / "more air") ----------------------------- */ --ctc-space-1: 0.25rem; --ctc-space-2: 0.5rem; --ctc-space-3: 0.75rem; --ctc-space-4: 1rem; --ctc-space-5: 1.5rem; --ctc-space-6: 2rem; --ctc-space-7: 3rem; --ctc-space-8: 4rem; --ctc-space-9: 6rem; /* --- Radius ---------------------------------------------------------- */ --ctc-radius-sm: 3px; --ctc-radius: 6px; --ctc-radius-lg: 12px; --ctc-radius-pill: 999px; /* --- Borders & lines ------------------------------------------------- */ --ctc-border-width: 1px; --ctc-border: var(--ctc-border-width) solid var(--ctc-line); /* --- Product imagery ------------------------------------------------- */ --ctc-card-ratio: 4 / 3; /* uniform product-card image format */ /* --- Elevation (subtle, premium) ------------------------------------- */ --ctc-shadow-sm: 0 1px 2px rgba(39, 23, 14, 0.05); --ctc-shadow: 0 6px 24px -14px rgba(39, 23, 14, 0.20); --ctc-shadow-lg: 0 20px 50px -28px rgba(39, 23, 14, 0.30); /* --- Motion ---------------------------------------------------------- */ --ctc-transition: 160ms ease; --ctc-transition-slow: 300ms ease; /* --- Typography refinement (slim, calm headings) --------------------- * * We refine weight/spacing/rhythm only — heading FONT SIZES and FAMILY * stay in Astra Customizer (Global > Typography) and remain configurable. */ --ctc-heading-weight: 500; --ctc-heading-weight-strong: 600; --ctc-heading-letter-spacing: -0.015em; --ctc-heading-line-height: 1.18; --ctc-body-line-height: 1.7; /* --- Badges (product category chip) ---------------------------------- */ --ctc-badge-bg: var(--ctc-taupe); --ctc-badge-fg: var(--ctc-espresso); --ctc-badge-font-size: 0.6875rem; /* 11px */ /* --- Accessible focus ring (bronze) ---------------------------------- */ --ctc-focus-ring: 0 0 0 3px rgba(196, 157, 112, 0.55); } /* ============================================================================ * :root — forced global palette * ---------------------------------------------------------------------------- * Map the brand palette onto Astra's and Elementor's global-colour custom * properties so the whole site (Astra front-end, WooCommerce, blocks, and any * remaining Elementor pages) renders on-brand with no Customizer step. * * Mechanics (verified against Astra 4.13.3 source): * - Astra emits --ast-global-color-0..8 inline on :root via * wp_add_inline_style('astra-theme-css', …). This stylesheet (ctc-tokens) * depends on 'astra-theme-css' and loads at priority 100, i.e. AFTER Astra's * inline CSS, so a same-selector (:root) redefinition wins on source order — * no !important needed. * - Astra's Elementor compat emits a SEPARATE family, * --e-global-color-astglobalcolor0..8 (fixed hex, not var() refs), so those * must be redefined too; otherwise Elementor pages keep the old colours. * * Slot roles (Astra): 0 link/theme, 1 link-hover, 2 heading, 3 body text, * 4/5 light surfaces, 6/7 borders, 8 subtle surface. We keep the two families * coherent (slot N gets the same brand value in both), matching how Astra itself * derives the Elementor palette from the same nine slots. * * Tune these on staging if a specific component reads a slot differently. ======= */ :root { /* Astra global palette */ --ast-global-color-0: var(--ctc-espresso); /* link / theme / primary accent */ --ast-global-color-1: var(--ctc-walnut); /* link hover */ --ast-global-color-2: var(--ctc-espresso); /* heading base */ --ast-global-color-3: var(--ctc-espresso); /* body text (dark, per brief) */ --ast-global-color-4: var(--ctc-cream); /* light section surface */ --ast-global-color-5: var(--ctc-cream); /* surface (cream over pure white) */ --ast-global-color-6: var(--ctc-taupe); /* border / hairline */ --ast-global-color-7: var(--ctc-stone); /* card / muted surface */ --ast-global-color-8: var(--ctc-cream); /* subtle surface */ /* Elementor global palette (mirrors the slots above) */ --e-global-color-astglobalcolor0: var(--ctc-espresso); --e-global-color-astglobalcolor1: var(--ctc-walnut); --e-global-color-astglobalcolor2: var(--ctc-espresso); --e-global-color-astglobalcolor3: var(--ctc-espresso); --e-global-color-astglobalcolor4: var(--ctc-cream); --e-global-color-astglobalcolor5: var(--ctc-cream); --e-global-color-astglobalcolor6: var(--ctc-taupe); --e-global-color-astglobalcolor7: var(--ctc-stone); --e-global-color-astglobalcolor8: var(--ctc-cream); } /* Cream page canvas (brief: cream is the premium alternative to pure white). * Safety net for the site background regardless of the Customizer setting. */ html body { background-color: var(--ctc-cream); }