/* ========================================================================== Jenny's Engraving & Co. — Design Tokens "Burin & Bullion" — light raking across an engraved metal surface. Single source of truth for every colour, space, type and easing value. ========================================================================== */ :root { /* ---- Core palette ---------------------------------------------------- */ --obsidian: #0B0D0F; /* page background */ --graphite: #14181C; /* elevated sections */ --graphite-soft: #191E23; /* card surface */ --steel: #2A3138; /* borders, engraved grooves */ --steel-light: #3A434C; /* hover borders */ --gold: #C9A227; /* primary accent — light on metal */ --gold-bright: #F0D77B; /* gradient highlight, hover glint */ --gold-deep: #8A6E1A; /* gradient shadow end */ --platinum: #E8E6E1; /* primary text */ --pewter: #9BA1A6; /* secondary text — 7.1:1 on obsidian */ --pewter-dim: #767C82; /* tertiary text — 4.6:1 on obsidian */ --patina: #2F6F6B; /* sparing secondary accent */ /* Brand red — sampled from the studio's own business card (the diamond device on the Google Business Profile photo). Used for the logo mark and sparingly as a secondary accent so the gold stays dominant. */ --ruby: #DD140A; --ruby-bright: #F0432F; --ruby-deep: #960D06; /* ---- Semantic roles -------------------------------------------------- RED + BLACK theme, taken from the studio's real logo. Ruby is the primary accent; gold survives only as a thin metallic hairline so the "engraved precious metal" character is not lost. ---------------------------------------------------------------------- */ --bg: var(--obsidian); --bg-elevated: var(--graphite); --surface: var(--graphite-soft); --border: var(--steel); --text: var(--platinum); --text-muted: var(--pewter); --text-dim: var(--pewter-dim); --accent: var(--ruby-bright); --accent-deep: var(--ruby); --accent-soft: rgba(221, 20, 10, 0.12); --accent-line: rgba(221, 20, 10, 0.34); --success: #4E9A73; --danger: #C4564B; /* ---- Metal gradients ------------------------------------------------- */ /* Primary CTA / foil gradient — polished ruby with a bright top facet. */ --grad-gold: linear-gradient(135deg, #8E0C05 0%, var(--ruby) 30%, #FF5A45 52%, var(--ruby) 74%, #8E0C05 100%); /* Retained for the few places that must read as literal gold metal. */ --grad-bullion: linear-gradient(135deg, var(--gold-deep) 0%, var(--gold) 28%, var(--gold-bright) 50%, var(--gold) 72%, var(--gold-deep) 100%); --grad-steel: linear-gradient(160deg, #323A42 0%, #1B2026 55%, #23292F 100%); --grad-surface: linear-gradient(165deg, rgba(255, 255, 255, 0.045) 0%, rgba(255, 255, 255, 0.012) 42%, rgba(255, 255, 255, 0) 100%); --grad-fade-r: linear-gradient(90deg, transparent, var(--gold), transparent); /* ---- Glass ----------------------------------------------------------- */ --glass-bg: rgba(20, 24, 28, 0.72); --glass-bg-strong: rgba(11, 13, 15, 0.88); --glass-border: rgba(232, 230, 225, 0.10); --glass-hairline: rgba(255, 255, 255, 0.06); --glass-blur: blur(16px) saturate(150%); /* ---- Multi-layer shadows (contact + ambient + soft + gold hairline) --- */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.55), 0 2px 6px rgba(0, 0, 0, 0.35); --shadow-md: 0 1px 2px rgba(0, 0, 0, 0.6), 0 4px 10px rgba(0, 0, 0, 0.42), 0 12px 28px rgba(0, 0, 0, 0.30); --shadow-lg: 0 1px 2px rgba(0, 0, 0, 0.65), 0 6px 16px rgba(0, 0, 0, 0.45), 0 20px 46px rgba(0, 0, 0, 0.38), inset 0 1px 0 rgba(255, 255, 255, 0.055); --shadow-xl: 0 2px 4px rgba(0, 0, 0, 0.7), 0 10px 26px rgba(0, 0, 0, 0.5), 0 34px 70px rgba(0, 0, 0, 0.44), inset 0 1px 0 rgba(255, 255, 255, 0.07); --shadow-gold: 0 8px 24px rgba(201, 162, 39, 0.22), 0 2px 6px rgba(201, 162, 39, 0.16), inset 0 1px 0 rgba(240, 215, 123, 0.42); --shadow-inset-groove: inset 0 1px 1px rgba(0, 0, 0, 0.85), inset 0 -1px 0 rgba(255, 255, 255, 0.045); /* ---- Typography ------------------------------------------------------ */ --font-display: "Playfair Display", "Cormorant Garamond", "Iowan Old Style", "Apple Garamond", Georgia, "Times New Roman", serif; --font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --font-script: "Learning Curve", "Snell Roundhand", "Apple Chancery", "Segoe Script", cursive; /* Fluid type scale — 360px → 1440px viewport */ --fs-xs: clamp(0.72rem, 0.70rem + 0.10vw, 0.78rem); --fs-sm: clamp(0.82rem, 0.79rem + 0.14vw, 0.90rem); --fs-base: clamp(1.00rem, 0.97rem + 0.16vw, 1.09rem); --fs-md: clamp(1.12rem, 1.06rem + 0.28vw, 1.30rem); --fs-lg: clamp(1.32rem, 1.20rem + 0.54vw, 1.70rem); --fs-xl: clamp(1.64rem, 1.40rem + 1.05vw, 2.40rem); --fs-2xl: clamp(2.05rem, 1.60rem + 1.95vw, 3.40rem); --fs-3xl: clamp(2.55rem, 1.75rem + 3.45vw, 4.80rem); --fs-hero: clamp(2.85rem, 1.70rem + 4.95vw, 6.20rem); --lh-tight: 1.08; --lh-snug: 1.28; --lh-body: 1.68; --lh-relaxed: 1.78; --ls-tight: -0.022em; --ls-normal: 0; --ls-wide: 0.06em; --ls-caps: 0.18em; /* ---- Spacing (8pt base) ---------------------------------------------- */ --sp-1: 0.25rem; --sp-2: 0.5rem; --sp-3: 0.75rem; --sp-4: 1rem; --sp-5: 1.5rem; --sp-6: 2rem; --sp-7: 2.5rem; --sp-8: 3rem; --sp-9: 4rem; --sp-10: 5rem; --sp-11: 6.5rem; --sp-12: 8rem; --section-y: clamp(4rem, 2.2rem + 7.5vw, 8.5rem); --gutter: clamp(1.15rem, 0.7rem + 2.1vw, 2.5rem); /* ---- Layout ---------------------------------------------------------- */ --container: 1280px; --container-wide: 1480px; --container-text: 68ch; /* 65–75 char measure */ --topbar-h: 42px; --header-h: 74px; --radius-sm: 4px; --radius: 10px; --radius-lg: 18px; --radius-xl: 26px; --radius-pill: 999px; /* ---- Motion ---------------------------------------------------------- */ --ease-out: cubic-bezier(0.22, 0.85, 0.30, 1); --ease-in-out: cubic-bezier(0.65, 0.02, 0.30, 1); --ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1); --dur-fast: 160ms; --dur: 260ms; --dur-slow: 420ms; --dur-page: 620ms; /* ---- Z-index scale (per UX guideline) -------------------------------- */ --z-base: 1; --z-raised: 10; --z-sticky: 20; --z-header: 40; --z-dropdown: 300; --z-overlay: 900; --z-modal: 999; --z-toast: 9999; } /* Motion-safety: neutralise durations globally for reduced-motion users. */ @media (prefers-reduced-motion: reduce) { :root { --dur-fast: 1ms; --dur: 1ms; --dur-slow: 1ms; --dur-page: 1ms; } }