/* * SHAYNA design tokens. * * COLOURS come from the supplied handoff (02-DESIGN-AND-WORDPRESS-HANDOFF.md) * and the logo file, and nothing else. Measured WCAG 2.1 contrast, on the * paper ground unless stated: * * ink on paper 6.61 everything * ink on deep 5.84 everything * gold on paper 3.81 LARGE text (24px+, or 18.66px bold), rules, icons, focus * gold on deep 3.36 large text only * ink on sand 3.26 NEVER for text — the prototype did this * logo-black on sand 8.11 everything: the one text colour on the sand band * line on paper 1.45 decorative hairlines only, never a boundary a * reader needs to see (a field border is one) * * The handoff's second gold (#8D7044) and second paper (#F1EEE8) are within * one step of the first and are NOT carried: two nearly-identical tokens is * how a palette drifts. Tints are color-mix(), never a typed hex. */ :root { /* Palette */ --c-paper: #F3EFE8; /* warm paper — the ground */ --c-paper-deep: #E9E1D2; /* album pages, alternating ground */ --c-ink: #625140; /* body text, headings */ --c-gold: #927448; /* muted gold — large headings, rules, focus */ --c-sand: #B6A895; /* contact band */ --c-line: #D2C7B8; /* hairlines */ --c-logo-black: #000000; /* the logo's own black; text on sand */ /* Roles */ --color-bg: var(--c-paper); --color-text: var(--c-ink); /* 85%, not 75%: measured 4.62:1 on paper at 85% and 3.73:1 at 75%, and the dimmed siblings are 12–14px text. Re-measure on any ground but paper. */ --color-text-dim: color-mix(in srgb, var(--c-ink) 85%, transparent); --color-accent: var(--c-gold); --color-rule: var(--c-line); /* A field or button edge is a boundary the reader must see: 3:1 minimum. Measured on paper: 55% gave 2.47, 70% gives 3.34. */ --color-field-border: color-mix(in srgb, var(--c-ink) 70%, var(--c-paper)); --color-focus: var(--c-gold); /* Families — the :lang() switch in main.css chooses between them */ --ff-fa: "Yekan Bakh", Tahoma, sans-serif; --ff-en: "Poppins", "Helvetica Neue", Arial, sans-serif; --ff-en-display: "Cormorant Garamond", Georgia, serif; /* Weights */ --fw-light: 300; --fw-regular: 400; --fw-medium: 500; --font-stretch-normal: 100%; /* pins Yekan Bakh to normal width — see fonts.css */ /* Type scale — fluid between 390px and 1440px */ --fs-xs: 0.75rem; /* 12 — labels, eyebrow */ --fs-sm: 0.875rem; /* 14 — nav, meta */ --fs-base: 1rem; /* 16 — body */ --fs-lead: clamp(1.0625rem, 1rem + 0.3vw, 1.25rem); /* 17–20 */ --fs-h3: clamp(1.25rem, 1.1rem + 0.6vw, 1.5rem); /* 20–24 */ --fs-h2: clamp(1.625rem, 1.3rem + 1.4vw, 2.5rem); /* 26–40 */ --fs-h1: clamp(2.125rem, 1.5rem + 2.8vw, 4rem); /* 34–64 */ --lh-tight: 1.15; --lh-body-en: 1.7; --lh-body-fa: 1.95; --tracking-label: 0.18em; /* uppercase English labels, as the reference */ /* Spacing — 4px base */ --space-1: 0.25rem; --space-2: 0.5rem; --space-3: 0.75rem; --space-4: 1rem; --space-5: 1.5rem; --space-6: 2rem; --space-7: 3rem; --space-8: 4rem; --space-9: 6rem; --band-gap: clamp(3.5rem, 2rem + 5vw, 7.5rem); /* Layout */ --container: 1296px; --container-narrow: 720px; --gutter: clamp(1rem, 0.5rem + 3vw, 4.5rem); --header-h: 5.5rem; --target-min: 44px; /* every interactive target, per the brief */ /* Motion */ --dur-fast: 150ms; --dur-base: 250ms; --dur-slow: 600ms; --ease-out: cubic-bezier(0.2, 0.7, 0.2, 1); } /* * ---------- Liquid Glass ---------- * * Added for the iOS 26/27-style redesign (DESIGN-BRIEF.md). Same closed * palette as above — every glass tint, border and shadow is color-mix() * from --c-paper / --c-paper-deep / --c-ink / --c-gold, plus "white" used * only as an optical specular highlight, never as a text or fill colour. * * Rule from the brief: glass is for CHROME (header, order box, sheets, * offer/tracking cards, chips, album controls) — long text, tables and * form fields stay opaque on paper. Panel tints below are kept at ~80%+ * opacity for exactly that reason: measured against the worst case (full * ink text on the tint alone, no blur credit), ink still clears 4.5:1, * the blur is a bonus, not a requirement for legibility. * * Support: rules that apply backdrop-filter live inside * @supports (backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px)), * and are turned back off under prefers-reduced-transparency. Outside * that support query every glass surface already has a solid enough * --glass-bg-* to stand alone as the opaque paper-deep fallback the brief * asks for. */ :root { /* Radii — continuous, iOS-style rounding. 0 stays 0 for hairline-bordered data (tables, ladders) which the brief keeps plain. */ --radius-xs: 10px; /* small pills: lang items, badges, spec chips */ --radius-sm: 16px; /* buttons, cards, colour-pick items */ --radius-md: 22px; /* order box, offer, tracking card, drawer fields group */ --radius-lg: 28px; /* drawer / big floating panels */ --radius-pill: 999px; /* buttons, header toggle, album control bar */ /* Blur + saturation, three sizes so no more than ~3 blurred layers ever stack (brief: mobile performance). Turned up from a first pass that read as "flat cream with rounded corners" — real Liquid Glass needs enough blur radius AND enough colour underneath (see body::before in main.css) for the refraction to actually be visible. */ --glass-blur-sm: 20px; --glass-blur-md: 30px; --glass-blur-lg: 44px; --glass-saturate: 190%; --glass-contrast: 108%; /* Panel tints: text-bearing glass. Down from ~82% to ~68–72% opaque — still enough that ink text alone clears 4.5:1 against the tint (ink on paper is 6.61:1; at 70% mixed toward whatever warm colour is behind, the worst realistic case still clears 4.5), but open enough that the blurred ribbon behind actually reads through. */ --glass-bg-paper: color-mix(in srgb, var(--c-paper) 70%, transparent); --glass-bg-deep: color-mix(in srgb, var(--c-paper-deep) 72%, transparent); --glass-bg-header: color-mix(in srgb, var(--c-paper) 62%, transparent); /* Chip/decorative tints: no text sits directly on these, so they can be lighter and more "liquid". */ --glass-bg-chip: color-mix(in srgb, var(--c-paper) 42%, transparent); --glass-bg-pill: color-mix(in srgb, var(--c-paper-deep) 48%, transparent); /* A dark variant for glass that must sit over photos/the swatchbook. */ --glass-bg-on-dark: color-mix(in srgb, var(--c-paper) 80%, transparent); /* Hairline stroke + specular top highlight, the "edge" that reads as glass rather than a flat tint. */ --glass-border: color-mix(in srgb, white 60%, var(--c-paper) 40%); --glass-border-soft: color-mix(in srgb, white 38%, var(--c-paper-deep) 62%); --glass-highlight: inset 0 1.5px 0 0 color-mix(in srgb, white 85%, transparent), inset 0 0 0 1px color-mix(in srgb, white 25%, transparent); /* The reflective streak — a real specular highlight, not just a top hairline. Used as a background-image layer (stacks with the tint below it), so it respects border-radius with no extra markup. */ --glass-sheen-img: linear-gradient(135deg, color-mix(in srgb, white 65%, transparent) 0%, color-mix(in srgb, white 28%, transparent) 16%, transparent 42%, transparent 78%, color-mix(in srgb, white 20%, transparent) 100%); --glass-sheen-img-soft: linear-gradient(135deg, color-mix(in srgb, white 45%, transparent) 0%, transparent 32%); /* Ambient shadow, warm (ink-tinted, never plain black). */ --glass-shadow-sm: 0 6px 18px -8px color-mix(in srgb, var(--c-ink) 35%, transparent); --glass-shadow-md: 0 16px 40px -14px color-mix(in srgb, var(--c-ink) 40%, transparent); --glass-shadow-lg: 0 24px 60px -18px color-mix(in srgb, var(--c-ink) 45%, transparent); /* Focus ring stays the brand gold, just drawn on top of glass too. */ --glass-focus: var(--c-gold); } /* Reduced transparency: force every glass surface back to a flat, opaque paper-deep panel — no blur, no mixed alpha, no sheen. */ @media (prefers-reduced-transparency: reduce) { :root { --glass-bg-paper: var(--c-paper); --glass-bg-deep: var(--c-paper-deep); --glass-bg-header: var(--c-paper); --glass-bg-chip: var(--c-paper-deep); --glass-bg-pill: var(--c-paper-deep); --glass-bg-on-dark: var(--c-paper); --glass-saturate: 100%; --glass-contrast: 100%; --glass-sheen-img: none; --glass-sheen-img-soft: none; } } /* The WordPress toolbar (shown to a logged-in editor) sits above the page: full-height sections subtract it so they still fit one screen. */ .admin-bar { --admin-bar-h: 32px; } @media (max-width: 782px) { .admin-bar { --admin-bar-h: 46px; } }