/* ========================================================================== Veloura — Design Tokens & Base ========================================================================== */ /* Font stylesheet is linked directly in each page's (not @import'd here) so the browser's preload scanner can discover and fetch it in parallel with this stylesheet instead of after it. */ :root { /* Core palette */ --forest-deep: #0d1f17; --forest-light: #0f2a1c; --forest-gradient: linear-gradient(160deg, var(--forest-light) 0%, var(--forest-deep) 100%); --gold: #c9a24b; --gold-light: #d4af6a; --gold-deep: #93762f; /* AA-safe on marble/cream backgrounds */ --gold-gradient: linear-gradient(135deg, var(--gold) 0%, var(--gold-light) 100%); --cream: #f5f0e6; --marble: #e8e2d4; --marble-deep: #dcd4c1; --blush: #e0a8c4; --blush-gradient: linear-gradient(135deg, var(--gold-light) 0%, var(--blush) 100%); --ink: #14140f; /* Semantic */ --bg-dark: var(--forest-deep); --bg-light: var(--marble); --text-on-dark: var(--cream); --text-on-light: #241f16; --text-muted-dark: #b9c4bb; --text-muted-light: #6b6455; --border-hairline-dark: rgba(201, 162, 75, 0.35); --border-hairline-light: rgba(147, 118, 47, 0.28); /* Type */ --font-serif: 'Playfair Display', 'Cormorant Garamond', Georgia, serif; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* Motion */ --ease-out: cubic-bezier(0.16, 1, 0.3, 1); --dur-fast: 300ms; --dur-med: 450ms; --dur-slow: 700ms; /* Layout */ --container-max: 1320px; --nav-height: 84px; --radius-sm: 2px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } body { margin: 0; background: var(--bg-light); color: var(--text-on-light); font-family: var(--font-sans); font-weight: 300; line-height: 1.6; -webkit-font-smoothing: antialiased; opacity: 0; animation: page-in var(--dur-slow) var(--ease-out) forwards; } @keyframes page-in { from { opacity: 0; } to { opacity: 1; } } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 500; line-height: 1.15; margin: 0 0 0.5em; letter-spacing: 0.01em; } h1 { font-size: clamp(2.6rem, 5vw, 4.4rem); font-weight: 600; } h2 { font-size: clamp(2rem, 3.4vw, 2.9rem); } h3 { font-size: clamp(1.4rem, 2vw, 1.8rem); } p { margin: 0 0 1em; } .eyebrow { display: block; font-family: var(--font-sans); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--gold-deep); margin-bottom: 0.9em; } section[data-theme="dark"] .eyebrow { color: var(--gold-light); } .container { max-width: var(--container-max); margin: 0 auto; padding: 0 clamp(1.25rem, 4vw, 3rem); } .hairline { border: none; border-top: 1px solid var(--border-hairline-light); margin: 0; } section[data-theme="dark"] .hairline { border-top-color: var(--border-hairline-dark); } /* Buttons */ .btn { display: inline-flex; align-items: center; gap: 0.6em; padding: 0.95em 2.1em; font-family: var(--font-sans); font-size: 0.82rem; letter-spacing: 0.14em; text-transform: uppercase; border: 1px solid transparent; border-radius: var(--radius-sm); cursor: pointer; transition: box-shadow var(--dur-fast) var(--ease-out), background var(--dur-fast) var(--ease-out), color var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out); white-space: nowrap; } .btn-gold { background: var(--gold-gradient); color: var(--forest-deep); } .btn-gold:hover, .btn-gold:focus-visible { box-shadow: 0 0 0 1px var(--gold-light), 0 8px 30px -6px rgba(201, 162, 75, 0.65); transform: translateY(-1px); } .btn-outline { background: transparent; border-color: var(--gold-deep); color: var(--text-on-light); } .btn-outline:hover, .btn-outline:focus-visible { background: var(--gold-deep); color: var(--cream); } section[data-theme="dark"] .btn-outline { border-color: var(--gold-light); color: var(--cream); } section[data-theme="dark"] .btn-outline:hover { background: var(--gold-light); color: var(--forest-deep); } :focus-visible { outline: 2px solid var(--gold-deep); outline-offset: 3px; } /* ========================================================================== Header / Nav ========================================================================== */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-height); display: flex; align-items: center; /* Always-on scrim (independent of .scrolled) so the logo, nav links and mobile toggle stay legible over light regions of the hero media. */ background: linear-gradient(180deg, rgba(13, 31, 23, 0.5) 0%, rgba(13, 31, 23, 0.5) 65%, rgba(13, 31, 23, 0) 100%); transition: background var(--dur-med) var(--ease-out), backdrop-filter var(--dur-med) var(--ease-out), box-shadow var(--dur-med) var(--ease-out), height var(--dur-med) var(--ease-out); } .site-header.scrolled { height: 68px; background: rgba(13, 31, 23, 0.72); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); box-shadow: 0 1px 0 rgba(201, 162, 75, 0.25); } .site-header .container { display: flex; align-items: center; justify-content: space-between; width: 100%; } .logo { font-family: var(--font-serif); font-size: 1.5rem; letter-spacing: 0.14em; color: var(--cream); } .logo span { color: var(--gold-light); } .nav-links { display: flex; align-items: center; gap: clamp(1.4rem, 2.4vw, 2.6rem); list-style: none; margin: 0; padding: 0; } .nav-links a { font-size: 0.78rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--cream); opacity: 0.86; position: relative; padding: 0.4em 0; transition: opacity var(--dur-fast) var(--ease-out); } .nav-links a::after { content: ''; position: absolute; left: 0; right: 100%; bottom: -2px; height: 1px; background: var(--gold-light); transition: right var(--dur-med) var(--ease-out); } .nav-links a:hover, .nav-links a:focus-visible, .nav-links a[aria-current="page"] { opacity: 1; } .nav-links a:hover::after, .nav-links a:focus-visible::after, .nav-links a[aria-current="page"]::after { right: 0; } .nav-toggle { display: none; background: rgba(13, 31, 23, 0.4); backdrop-filter: blur(6px); border: 1px solid rgba(201, 162, 75, 0.5); border-radius: var(--radius-sm); width: 42px; height: 42px; cursor: pointer; position: relative; } .nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; left: 11px; right: 11px; height: 1px; background: var(--gold-light); transition: transform var(--dur-fast) var(--ease-out), opacity var(--dur-fast) var(--ease-out); } .nav-toggle span { top: 50%; transform: translateY(-50%); } .nav-toggle span::before { top: -8px; } .nav-toggle span::after { top: 8px; } .nav-toggle[aria-expanded="true"] span { background: transparent; } .nav-toggle[aria-expanded="true"] span::before { transform: rotate(45deg) translate(5px, 6px); } .nav-toggle[aria-expanded="true"] span::after { transform: rotate(-45deg) translate(5px, -6px); } @media (max-width: 860px) { .nav-toggle { display: block; } .nav-links { position: fixed; top: var(--nav-height); left: 0; right: 0; flex-direction: column; align-items: flex-start; gap: 0; background: rgba(13, 31, 23, 0.97); backdrop-filter: blur(16px); padding: 0.5rem clamp(1.25rem, 6vw, 3rem) 2rem; transform: translateY(-8px); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-med) var(--ease-out), transform var(--dur-med) var(--ease-out), visibility var(--dur-med); } .nav-links.open { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); } .nav-links li { width: 100%; border-top: 1px solid var(--border-hairline-dark); } .nav-links li:first-child { border-top: none; } .nav-links a { display: block; padding: 1.1em 0; } .nav-links a::after { display: none; } } /* ========================================================================== Footer ========================================================================== */ .site-footer { background: var(--forest-deep); color: var(--text-on-dark); padding: 5rem 0 2rem; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 2.5rem; padding-bottom: 3rem; } .footer-grid .logo { display: inline-block; margin-bottom: 1rem; } .footer-col h4 { font-family: var(--font-sans); font-size: 0.74rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--gold-light); margin-bottom: 1.1em; } .footer-col ul { list-style: none; margin: 0; padding: 0; } .footer-col li { margin-bottom: 0.7em; } .footer-col a, .footer-col p { color: var(--text-muted-dark); font-size: 0.92rem; } .footer-col a:hover { color: var(--gold-light); } .footer-bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 1rem; padding-top: 2rem; font-size: 0.76rem; color: var(--text-muted-dark); letter-spacing: 0.03em; } .footer-bottom .ai-credit { opacity: 0.55; font-size: 0.72rem; } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } } /* ========================================================================== Scroll reveal utility ========================================================================== */ .reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .reveal.in-view { opacity: 1; transform: translateY(0); } /* ========================================================================== Shipping banner ========================================================================== */ .shipping-banner { background: var(--gold-gradient); color: var(--forest-deep); text-align: center; font-size: 0.8rem; letter-spacing: 0.08em; padding: 0.7em 1em; } /* Page loading state to avoid layout jump before header.js injects nav */ [data-include] { min-height: 1px; }