/* * luova-brand.css * Shared design tokens & base styles for all Luova pages. * Link this in every page's BEFORE any page-specific styles: * * * What this file controls: * - CSS custom properties (colours, fonts, spacing) * - Base resets & html/body defaults * - Header & nav * - Footer * - Shared buttons (.btn, .btn-primary, .btn-ghost, .btn-auth) * - Shared eyebrow / section label pattern * - Scrollbar * - Noise overlay * - Section nav dots * - Auth modal * - Fade-in animation helpers * * Page-specific layout (hero grid, guide grid, product grid, etc.) * stays in index.html / guide.html etc. — don't put layout here. * ─────────────────────────────────────────────────────────────── */ /* ── Google Fonts ── */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,300;0,400;0,500;1,300;1,400&family=Playfair+Display:ital,wght@0,400;0,500;1,400&family=DM+Sans:wght@300;400;500&family=DM+Mono:wght@300;400&display=swap'); /* ════════════════════════════════════════════════════════════════ DESIGN TOKENS ════════════════════════════════════════════════════════════════ */ :root { /* ── Ink (text) ── */ --ink: #1a1814; --ink-mid: #2a2720; --ink-soft: #52524e; --ink-faint: #82827e; /* ── Backgrounds ── Changed from warm parchment (#f0ede6) to cool light grey. Use --bg-hero for the main page bg, --bg-secondary for panels. */ --bg-hero: #e8e8e6; /* ← was #e9e5dd */ --bg-secondary: #dfdfe0; /* ← was #e6e2da (guide, right panels) */ --bg-deep: #d4d4d5; /* ← was #dedad0 (deeper surfaces) */ --white: #fdfcfa; /* ── Brand accent ── Taupe/olive — replaces gold throughout UI text & decorative elements. The primary CTA button keeps moss green for clear call-to-action contrast. */ --accent: #656357; /* ← replaces --gold (#8a6930) */ --accent-light: #8a8778; /* ← replaces --gold-light (#c4a85a) — lighter tint for hover/secondary */ --accent-faint: rgba(101,99,87,0.12); /* tint for backgrounds */ /* ── Moss (CTA buttons only — keep distinct from accent) ── */ --moss: #4a5c3a; --moss-light: #6b7f57; /* ── Typography ── */ --serif: 'Cormorant Garamond', Georgia, serif; --display: 'Playfair Display', Georgia, serif; --sans: 'DM Sans', system-ui, sans-serif; --mono: 'DM Mono', monospace; /* ── Layout ── */ --px: 7rem; /* global side padding — override per page if needed */ } /* ════════════════════════════════════════════════════════════════ RESETS & BASE ════════════════════════════════════════════════════════════════ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { overflow-y: scroll; scroll-behavior: smooth; background: var(--bg-hero); color: var(--ink); font-family: var(--sans); font-weight: 300; line-height: 1.6; font-size: 16px; } body { overflow-x: hidden; } /* ════════════════════════════════════════════════════════════════ NOISE OVERLAY ════════════════════════════════════════════════════════════════ */ body::before { content: ''; position: fixed; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.03'/%3E%3C/svg%3E"); pointer-events: none; z-index: 9999; opacity: .3; } /* ════════════════════════════════════════════════════════════════ SNAP SCROLL (used on index.html) ════════════════════════════════════════════════════════════════ */ .snap-wrap { height: 100vh; overflow-y: scroll; scroll-snap-type: y mandatory; scroll-behavior: smooth; } .snap-section { scroll-snap-align: start; scroll-snap-stop: always; min-height: 100vh; position: relative; overflow: hidden; } footer.snap-section { min-height: unset; } /* ════════════════════════════════════════════════════════════════ SECTION NAV DOTS ════════════════════════════════════════════════════════════════ */ .section-dots { position: fixed; right: 1.8rem; top: 50%; transform: translateY(-50%); z-index: 300; display: flex; flex-direction: column; gap: .75rem; pointer-events: auto; } .section-dot { width: 8px; height: 8px; border-radius: 50%; border: 1px solid rgba(101,99,87,0.45); /* --accent at 45% */ background: transparent; cursor: pointer; transition: all .3s ease; display: block; padding: 0; } .section-dot.active { background: var(--accent); border-color: var(--accent); transform: scale(1.3); } .section-dot:hover:not(.active) { background: rgba(101,99,87,0.25); border-color: rgba(101,99,87,0.7); } /* ════════════════════════════════════════════════════════════════ HEADER ════════════════════════════════════════════════════════════════ */ header { position: fixed; top: 0; left: 0; right: 0; z-index: 200; padding: .85rem var(--px); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; background: rgba(232,232,230,0.55); /* --bg-hero at 55% */ backdrop-filter: blur(32px) saturate(1.6); -webkit-backdrop-filter: blur(32px) saturate(1.6); border-bottom: 1px solid rgba(255,255,255,0.7); box-shadow: 0 1px 0 rgba(101,99,87,0.06), 0 4px 24px rgba(26,24,20,0.04); transition: background .4s, box-shadow .4s; } header.scrolled { background: rgba(232,232,230,0.88); box-shadow: 0 1px 0 rgba(101,99,87,0.08), 0 4px 32px rgba(26,24,20,0.1); } /* Wordmark */ .logo { font-family: var(--sans); font-size: 1.1rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; text-decoration: none; flex-shrink: 0; } .logo-lu { color: var(--ink); } .logo-o { color: var(--accent); } /* ← was --gold */ .logo-va { color: var(--ink); } /* Nav links */ nav a { font-family: var(--sans); font-size: .86rem; font-weight: 400; letter-spacing: .09em; text-transform: uppercase; color: var(--ink-mid); text-decoration: none; transition: color .25s; padding: 0 1.1rem; position: relative; } nav a:not(:last-child)::after { content: '·'; position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: rgba(122,118,112,0.4); font-size: .9rem; pointer-events: none; } nav a:hover { color: var(--accent); } /* ← was --gold */ /* Auth buttons */ .btn-auth { display: inline-flex; align-items: center; gap: .4rem; padding: .48rem 1.1rem; font-family: var(--sans); font-size: .78rem; font-weight: 400; letter-spacing: .09em; text-transform: uppercase; border: 1px solid rgba(101,99,87,0.3); background: rgba(255,255,255,0.3); backdrop-filter: blur(10px); color: var(--accent); /* ← was --gold */ text-decoration: none; border-radius: 100px; transition: all .3s; cursor: pointer; white-space: nowrap; line-height: 1; } .btn-auth:hover { background: rgba(101,99,87,0.1); border-color: rgba(101,99,87,0.5); } .btn-auth.primary { background: rgba(101,99,87,0.12); border-color: rgba(101,99,87,0.4); } .btn-auth.primary:hover { background: rgba(101,99,87,0.2); } /* ════════════════════════════════════════════════════════════════ SHARED BUTTONS ════════════════════════════════════════════════════════════════ */ /* Base */ .btn { display: inline-flex; align-items: center; gap: .55rem; padding: .78rem 1.75rem; font-family: var(--sans); font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; text-decoration: none; cursor: pointer; border: 1px solid rgba(255,255,255,0.7); background: rgba(255,255,255,0.52); backdrop-filter: blur(16px); color: var(--ink); border-radius: 100px; transition: all .3s; box-shadow: 0 2px 12px rgba(26,24,20,0.06), inset 0 1px 0 rgba(255,255,255,0.5); } .btn:hover { background: rgba(255,255,255,0.72); box-shadow: 0 6px 22px rgba(26,24,20,0.1), inset 0 1px 0 rgba(255,255,255,0.6); transform: translateY(-1px); } /* Primary CTA — moss green (kept distinct for clear actions) */ .btn-accent { background: rgba(74,92,58,0.82); border-color: rgba(107,127,87,0.4); color: var(--white); } .btn-accent:hover { background: rgba(74,92,58,0.97); color: var(--white); } /* Outline warm — used in guide section */ .btn-outline-warm { display: inline-flex; align-items: center; gap: .5rem; padding: .72rem 1.6rem; font-size: .72rem; letter-spacing: .09em; text-transform: uppercase; text-decoration: none; border: 1px solid rgba(101,99,87,0.28); /* ← was moss */ background: rgba(255,255,255,0.35); backdrop-filter: blur(10px); color: var(--accent); /* ← was --moss */ font-family: var(--sans); font-weight: 400; border-radius: 100px; transition: all .3s; cursor: pointer; } .btn-outline-warm:hover { background: rgba(101,99,87,0.1); border-color: rgba(101,99,87,0.45); } .btn-dim { opacity: .6; } /* ════════════════════════════════════════════════════════════════ EYEBROW / SECTION LABELS (the —— LABEL pattern) ════════════════════════════════════════════════════════════════ */ .eyebrow { display: flex; align-items: center; gap: .7rem; width: fit-content; } .eyebrow-line { display: block; width: 1.4rem; height: 1px; background: var(--accent); /* ← was --gold */ flex-shrink: 0; } .eyebrow-text { font-family: var(--sans); font-size: .78rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: var(--accent); /* ← was --gold */ } /* ════════════════════════════════════════════════════════════════ GUIDE LINKS (underline links inside body copy) ════════════════════════════════════════════════════════════════ */ .guide-link { color: var(--accent); /* ← was --gold */ text-decoration: none; border-bottom: 1px solid rgba(101,99,87,0.3); padding-bottom: 1px; transition: border-color .2s, opacity .2s; } .guide-link:hover { border-color: var(--accent); opacity: .75; } /* ════════════════════════════════════════════════════════════════ SOCIAL BUTTONS (circular icon buttons) ════════════════════════════════════════════════════════════════ */ .sl-social-btn, .footer-social-btn { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border: 1px solid rgba(122,118,112,0.22); border-radius: 50%; background: rgba(255,255,255,0.45); backdrop-filter: blur(8px); color: var(--ink-soft); text-decoration: none; transition: all .25s; box-shadow: inset 0 1px 0 rgba(255,255,255,0.5); } .sl-social-btn svg, .footer-social-btn svg { width: 14px; height: 14px; display: block; } .sl-social-btn:hover, .footer-social-btn:hover { border-color: var(--accent); /* ← was --gold */ color: var(--accent); background: rgba(255,255,255,0.7); transform: translateY(-1px); } .footer-social-btn { width: 30px; height: 30px; } .footer-social-btn svg { width: 13px; height: 13px; fill: currentColor; } /* ════════════════════════════════════════════════════════════════ FOOTER ════════════════════════════════════════════════════════════════ */ footer { background: var(--bg-deep); /* ← was --parchment-warm */ border-top: 1px solid rgba(122,118,112,0.18); box-shadow: 0 -1px 0 rgba(255,255,255,0.6); padding: .9rem var(--px); display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: unset; scroll-snap-align: start; } .footer-logo { font-family: var(--sans); font-size: 1rem; font-weight: 500; letter-spacing: .28em; text-transform: uppercase; text-decoration: none; flex-shrink: 0; } .footer-logo-lu { color: var(--ink); } .footer-logo-o { color: var(--accent); } /* ← was --gold */ .footer-logo-va { color: var(--ink); } .footer-sep { width: 1px; height: 1.2rem; background: rgba(122,118,112,0.25); flex-shrink: 0; } .footer-legal { font-family: var(--sans); font-size: .8rem; font-weight: 300; color: var(--ink-soft); letter-spacing: .04em; text-align: right; } /* ════════════════════════════════════════════════════════════════ FLICKR / CAROUSEL ════════════════════════════════════════════════════════════════ */ .flickr-label-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); /* ← was --gold */ display: inline-block; } .flickr-label-link { color: inherit; text-decoration: none; border-bottom: 1px solid rgba(101,99,87,0.3); padding-bottom: 1px; transition: border-color .2s, color .2s; } .flickr-label-link:hover { color: var(--accent); border-color: var(--accent); } .flickr-nav-btn:hover { border-color: var(--accent); color: var(--accent); } .flickr-dot.active { background: var(--accent); /* ← was --gold */ width: 15px; border-radius: 3px; } /* ════════════════════════════════════════════════════════════════ PRODUCT CARDS ════════════════════════════════════════════════════════════════ */ .product-price { color: var(--accent-light); } /* ← was --gold-light */ .product-btn:hover { background: rgba(74,92,58,0.6); border-color: rgba(107,127,87,0.5); } .product-btn.mp { border-color: rgba(138,135,120,0.4); color: var(--accent-light); } .product-btn.mp:hover { background: rgba(101,99,87,0.18); } /* ════════════════════════════════════════════════════════════════ GUIDE SECTION — step numbers & chips ════════════════════════════════════════════════════════════════ */ .guide-step-num { color: var(--accent); /* ← was --gold */ } .sl-chip:hover { border-color: rgba(101,99,87,0.3); color: var(--accent); } /* ════════════════════════════════════════════════════════════════ ANIMATIONS ════════════════════════════════════════════════════════════════ */ .fade-in { opacity: 0; transform: translateY(14px); transition: opacity .7s ease, transform .7s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } .delay-1 { transition-delay: .1s; } .delay-2 { transition-delay: .22s; } .delay-3 { transition-delay: .36s; } .delay-4 { transition-delay: .5s; } .delay-5 { transition-delay: .64s; } /* ════════════════════════════════════════════════════════════════ SCROLLBAR ════════════════════════════════════════════════════════════════ */ ::-webkit-scrollbar { width: 3px; } ::-webkit-scrollbar-track { background: var(--bg-hero); } ::-webkit-scrollbar-thumb { background: var(--bg-deep); border-radius: 2px; } /* ════════════════════════════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════════════════════════════ */ @media (max-width: 960px) { :root { --px: 2rem; } header { padding: .9rem 1.5rem; } nav { display: none; } footer { padding: .8rem 1.5rem; flex-wrap: wrap; } .section-dots { display: none; } }