/* Theme Name: Client Store Theme URI: https://example.com/client-store Author: Your Agency Author URI: https://example.com Description: Forkable WooCommerce + Ziina storefront — a clean, semantic, mobile-first classic theme. Re-skin per client by editing the DESIGN TOKENS below. Default skin: "Naila Maison" (ivory + gold luxury maison). Version: 1.2.0 Requires at least: 6.0 Requires PHP: 8.0 License: MIT License URI: https://opensource.org/licenses/MIT Text Domain: client-store WC requires at least: 8.0 WC tested up to: 10.9 */ @import url('https://fonts.googleapis.com/css2?family=Marcellus&family=Hanken+Grotesk:ital,wght@0,300;0,400;0,500;0,600;1,400&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400;1,500&display=swap'); /* =========================================================================== ▓▓▓ DESIGN TOKENS ▓▓▓ — THE RE-SKIN FILE. Change these :root values to rebrand the whole store for a new client. Fonts: update the @import above and the --f-* families together. =========================================================================== */ :root { --f-display: 'Marcellus', 'Times New Roman', serif; --f-body: 'Hanken Grotesk', system-ui, sans-serif; --f-accent: 'Cormorant Garamond', Georgia, serif; /* ===== THEME PALETTE — DARK is the DEFAULT (black + carbon + gold). ===== The light "ivory maison" palette is the switchable override at the bottom of this block (:root[data-theme="light"]). The header toggle sets data-theme="light" on ; a no-flash inline script (header.php) applies the saved choice before first paint. */ /* Neutral / faintly-warm CARBON GREY — never blue (R >= G >= B on every tone). */ --bg: #0a0a09; --bg-deep: #000000; --surface: #161514; --surface-2: #100f0e; --ink: #efece3; --ink-soft: #aba59a; --ink-faint: #767064; --gold: #c6a657; --gold-bright: #e7c982; --gold-deep: #a8853c; --line: rgba(198,166,87,0.28); --line-soft: rgba(255,255,255,0.06); /* One continuous carbon-grey → black vertical gradient down the whole page — no hard section blocks; bands are soft edge-fading tints (--band-tint). */ --carbon: linear-gradient(180deg, #1d1b18 0%, #110f0d 40%, #080706 76%, #030302 100%); --band-tint: rgba(255,255,255,0.022); --hero-tint: linear-gradient(135deg, #161514 0%, #201e1b 55%, #0c0b0a 100%); --ph-bg: linear-gradient(135deg, #161514 0%, #1e1c1a 100%); --scrim: linear-gradient(to top, rgba(0,0,0,0.86) 0%, rgba(0,0,0,0.34) 45%, rgba(0,0,0,0) 78%); --nav-blur: rgba(7,7,6,0.88); --shadow: 0 30px 70px -28px rgba(0,0,0,0.82); --shadow-card: 0 18px 44px -20px rgba(0,0,0,0.74); --toast-bg: #efece3; --toast-fg: #15140f; --watermark-filter: invert(1) brightness(1.7); /* Aliases + utility scale so the WooCommerce bridge stylesheet can reuse the palette and spacing without duplicating tokens. */ --color-primary: var(--gold); --color-primary-deep: var(--gold-deep); --color-primary-soft: var(--gold-bright); --color-accent: var(--gold-bright); --color-bg: var(--bg); --color-surface: var(--surface-2); --color-surface-2: var(--bg-deep); --color-ink: var(--ink); --color-ink-soft: var(--ink-soft); --color-line: var(--line-soft); --color-success: #5fae72; --color-error: #e06a76; --font-base: var(--f-body); --font-display: var(--f-display); --font-accent: var(--f-accent); --fs-2xs: 0.6875rem; --fs-xs: 0.8125rem; --fs-sm: 0.9375rem; --fs-base: 1rem; --fs-md: 1.25rem; --fs-lg: 1.75rem; --fs-xl: 2.5rem; --fs-2xl: 3.5rem; --lh-snug: 1.3; --lh-base: 1.6; --tracking-wide: 0.18em; --space-3xs: 0.25rem; --space-2xs: 0.5rem; --space-xs: 0.75rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 6rem; --radius-sm: 0px; --radius: 0px; --radius-lg: 0px; --radius-pill: 999px; --container: 1180px; --container-narrow: 760px; --gutter: clamp(1.4rem, 4vw, 3.5rem); --header-h: 64px; --shadow-sm: 0 1px 2px rgba(0,0,0,0.45); --transition: 280ms cubic-bezier(.4,0,.2,1); } /* ===== LIGHT THEME (switchable) — the original ivory maison palette. ===== */ :root[data-theme="light"] { --bg: #ffffff; --bg-deep: #efece4; --surface: #ffffff; --surface-2: #f7f4ee; --ink: #1d1b16; --ink-soft: #58534a; --ink-faint: #9b9384; --gold: #9a7d3f; --gold-bright: #bd9a52; --gold-deep: #7b6230; --line: rgba(154,125,63,0.30); --line-soft: rgba(29,27,22,0.10); --carbon: linear-gradient(135deg, #ffffff 0%, #faf7f1 60%, #f4efe6 100%); --hero-tint: linear-gradient(135deg, #ffffff 0%, #faf7f1 60%, #f4efe6 100%); --ph-bg: linear-gradient(135deg, #f1eee8 0%, #f7f4ee 100%); --scrim: linear-gradient(to top, rgba(26,21,12,0.74) 0%, rgba(26,21,12,0.18) 45%, rgba(26,21,12,0) 78%); --nav-blur: rgba(255,255,255,0.86); --shadow: 0 30px 70px -34px rgba(60,48,22,0.30); --shadow-card: 0 18px 44px -26px rgba(60,48,22,0.40); --toast-bg: #1d1b16; --toast-fg: #ffffff; --watermark-filter: none; --band-tint: rgba(154,125,63,0.06); --color-accent: var(--gold-deep); --color-success: #3f7d4f; --color-error: #b23a48; --shadow-sm: 0 1px 2px rgba(28,26,23,0.06); } /* Minimal layout helpers used by non-WooCommerce templates (blog, page, 404). */ .container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--gutter); } .container--narrow { max-width: var(--container-narrow); } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: #fff; padding: .5rem 1rem; z-index: 1000; } .skip-link:focus { left: 1rem; top: 1rem; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px,1px,1px,1px); clip-path: inset(50%); } :focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }