/* ========================================================================== Heavens Sweets Perfume — design tokens ("Grand Tour" shapes, "Glacier · Aurora" colours) The one place to change colours, type, spacing, shape and motion. site.css only reads these variables; it defines no colours or sizes of its own. ========================================================================== */ :root { /* ---- palette: "Glacier · Aurora" (chosen by the owner, 22 Oct 2026) --------------- Icy blue-grey grounds (calm, never white), panels in a soft aurora gradient (sky, lilac, peach), ink-navy text, cobalt for buttons and accents, and a night-navy for the drama sections with a violet and peach glow. No gold, no pink, no green. The old names are kept so every page follows: onyx = grounds, brass = cobalt, sand = light highlights, plum = the night-navy drama sections. */ --onyx-950: #c9d4de; /* offers bar, deepest light well */ --onyx-900: #dbe3ea; /* page ground: warm ivory */ --onyx-850: #cfd9e2; /* alternate sections: linen */ --onyx-800: #ebf0f4; /* raised panels, drawers, inputs */ --onyx-700: #cdd7e1; /* hover fills */ --sand-50: #f3f6f8; --sand-100: #ebf0f4; --sand-200: #cdd7e1; --sand-300: #a9b6c3; --brass-300: #c9c2ff; /* blush: accent on plum, selection */ --brass-400: #2643a0; /* rouge text on ivory (5.9:1) */ --brass-500: #2848a8; /* rouge fills, the main button (white text 5.8:1) */ --brass-600: #1f3a8a; /* hover, rules */ --brass-700: #1a3175; /* deep rouge text */ --rose: #2643a0; /* Arabic display accent on light grounds */ --faience: #4e8a80; /* decorative only: season dots */ --oud: #18222e; /* espresso: text */ --muted-100: #46525f; /* secondary text (6.4:1) */ --muted-200: #55616e; /* captions (5:1) */ --plum-900: #1a2547; /* deep plum panels */ --plum-800: #24305a; --on-plum: #edf2f8; --on-plum-muted: #b5c2d6; --blush: #dcd6ec; /* soft blush panels */ /* ---- semantic roles (site.css reads these) ---- */ --ground: var(--onyx-900); --ground-raised: var(--onyx-800); --ground-alt: var(--onyx-850); --ground-sunken: #c9d4de; --ink: var(--oud); --ink-muted: var(--muted-100); --ink-faint: var(--muted-200); --line: #c2cfdb; --line-strong: #6c7a8a; /* input, chip and checkbox borders: 3:1 on ivory */ --rule-brass: rgba(40, 72, 168, .26); --gold-300: var(--brass-300); --gold-400: var(--brass-400); --gold-500: var(--brass-500); --gold-600: var(--brass-600); --gold-700: var(--brass-700); --gold-text: var(--brass-400); --on-gold: #fffaf6; --action: var(--brass-500); --on-action: #fffaf6; --action-hover: var(--brass-600); --on-action-hover: #fffaf6; /* the soft light behind every bottle photo */ --vitrine: radial-gradient(ellipse 85% 70% at 50% 28%, #eef2f5 0%, #dde5ec 60%, #cdd8e2 100%); --on-vitrine: var(--oud); --whatsapp: #25d366; --on-whatsapp: #06270f; --danger: #b3412e; --focus: var(--brass-500); --scrim: rgba(24, 34, 46, .45); /* scent tones for note dots and accord bars */ --scent-fresh: #7fa79c; /* citrus, aquatic, green, aromatic */ --scent-floral: #d27a8c; /* floral, rose, iris, fruity */ --scent-warm: #c98a4b; /* spicy, amber, vanilla, gourmand */ --scent-deep: #7b5546; /* woods, oud, leather, tobacco, musk */ --liquid-amber: #d9a251; --liquid-wood: #b07f4d; --liquid-fresh: #6fbccb; --liquid-floral: #e08aa0; --liquid-sweet: #e6bd52; --liquid-musk: #cbc0dd; --shadow-overlay: 0 30px 80px rgba(24, 34, 46, .22), 0 2px 6px rgba(24, 34, 46, .06); --shadow-float: 0 12px 30px rgba(24, 34, 46, .13); --shadow-vitrine: 0 24px 50px rgba(24, 34, 46, .13); /* ---- type ---- Marcellus: inscriptional caps like the emblem's lettering (Latin headlines, wordmark). Alexandria: text in English and Arabic. Reem Kufi: Arabic headlines. All SIL OFL 1.1. */ --font-display: "Marcellus", "Trajan Pro", Georgia, serif; --font-sans: "Alexandria", system-ui, -apple-system, "Segoe UI", sans-serif; --font-ar-display: "Reem Kufi", "Alexandria", system-ui, sans-serif; --font-serif: var(--font-display); --font-lux: "Cormorant Garamond", "Marcellus", Georgia, serif; /* the home page serif, with a true italic */ --cream: linear-gradient(120deg, #cfe0ef 0%, #ddd4f0 52%, #f3dccd 100%); /* aurora: sky, lilac, peach */ /* the home page's light panels */ --cream-ink-muted: #3f3f5e; /* secondary text on cream (6.4:1) */ --text-xs: 12px; --text-sm: 14px; --text-md: 16px; --text-lg: 18px; --track-label: .2em; /* ---- spacing ---- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-16: 64px; --space-24: 96px; --space-32: 128px; /* ---- shape ---- */ --radius-0: 0px; --radius-sm: 4px; --radius-md: 10px; --radius-full: 999px; --frame: 3px; /* the gilded frame: square, with a softened corner */ --hairline: 1px; --container: 1240px; --measure: 60ch; --header-h: 72px; /* ---- motion: slow, quiet, purposeful ---- */ --ease: cubic-bezier(.2, .7, .2, 1); --dur-quick: .2s; --dur-base: .35s; --dur-slow: .6s; /* ---- motifs: Western European, from Paris, Milan, Venice and Barcelona ---- Marble (sand Calacatta behind bottles, black Portoro with brass veins on dark panels), the fluting of a classical column as a quiet texture, and a Parisian wrought-iron balcony rail. */ --marble-sand: url("img/brand/marble-sand.webp"); --marble-onyx: url("img/brand/marble-sand.webp"); /* light theme: the sand marble everywhere */ --fluting: repeating-linear-gradient(90deg, rgba(40, 72, 168, .26) 0 1px, transparent 1px 11px, rgba(255, 255, 255, .06) 11px 12px, transparent 12px 22px); --ironwork: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='32' height='28' viewBox='0 0 32 28'%3E%3Cg fill='none' stroke='%232848a8' stroke-width='1.1'%3E%3Cpath d='M0 2h32M0 5h32M0 23h32M0 26h32M.5 5v18M16 5v18M0 14h3.5M12.5 14h7M28.5 14h3.5M8 5v4.5M8 18.5V23M24 5v4.5M24 18.5V23'/%3E%3Ccircle cx='8' cy='14' r='4.5'/%3E%3Ccircle cx='24' cy='14' r='4.5'/%3E%3C/g%3E%3C/svg%3E"); }