/* === Performance flags === */ :root{ --enable-anim: 1; } .perf-lite :root, .perf-lite{ --enable-anim: 0; } /* JS toggles .perf-lite on */ /* Base palette */ :root{ --muted: #C3CAD2; --gold: #C9A227; --gold-2: #E3C767; --glass: rgba(255,255,255,0.06); --stroke: rgba(255,255,255,0.12); --sig-duration: 8.5s; --pause-after-sig: .8s; } *{box-sizing:border-box} html,body{height:100%} html{scroll-behavior:smooth} body{ margin:0; font-family: 'Montserrat', system-ui, -apple-system, Segoe UI, Roboto, Ubuntu, Cantarell, 'Helvetica Neue', Arial, 'Noto Sans', sans-serif; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; color:#F3F5F7; background: #0C0E14; /* solid base for safety */ overflow-x:hidden; } /* --- Ultra-light animated backdrop (GPU-friendly) --- - No filters (blur/drop-shadow) on the giant layer - Only transform & opacity animating - Limited to two gradient layers for minimal overdraw */ body::before{ content:""; position: fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(1200px 800px at 70% -10%, rgba(201,162,39,0.08), transparent 60%), radial-gradient(800px 600px at -10% 80%, rgba(227,199,103,0.08), transparent 60%), linear-gradient(180deg, #0B0C10 0%, #151720 100%); background-repeat: no-repeat; background-attachment: fixed; } 50% { transform: translate3d(-1.5%, -1.5%, 0) scale(1.01); } 100% { transform: translate3d(1.5%, 1.5%, 0) scale(1.008); } } /* Perf-lite: static background, no animation */ /* perf-lite not needed for static background */ /* Optional vignette (cheap) */ body::after{ content:""; position: fixed; inset:0; z-index:-1; pointer-events:none; background: radial-gradient(120% 100% at 50% 0%, rgba(0,0,0,0) 0%, rgba(0,0,0,.05) 72%, rgba(0,0,0,.10) 100%); } /* Intro overlay */ .no-scroll{ overflow:hidden; } .intro{ position: fixed; inset:0; z-index: 100; display:grid; place-items:center; background: transparent; transition: opacity .45s ease, visibility .45s ease; } .intro-inner{ display:flex; flex-direction:column; align-items:center; gap:20px; } .intro.complete{ opacity:0; visibility:hidden; } #signature{width:min(82vw, 900px); height:auto;} .sig-stroke{ fill:none; stroke: url(#grad-stroke); stroke-width:5; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:3361.365; stroke-dashoffset:3361.365; opacity:0; animation: sig-draw 8s ease forwards .5s; } .sig-dot{ fill:none; stroke:#EBDFAE; stroke-width:2; stroke-dasharray:15.3073; stroke-dashoffset:15.3073; animation: sig-dot 0.25s linear forwards .8s; } @keyframes sig-draw{ 0%{opacity:0; stroke-dashoffset:3361.365} 6%{opacity:1} 100%{opacity:1; stroke-dashoffset:0} } @keyframes sig-dot{ to{stroke-dashoffset:0} } /* Fake gold loading bar */ .load-wrap{ width:min(62vw, 540px); } .loading-track{ height:4px; border-radius:999px; overflow:hidden; background: rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.08); } .loading-fill{ height:100%; width:0%; background: linear-gradient(90deg, var(--gold-2), var(--gold)); box-shadow: 0 0 8px rgba(201,162,39,.35), 0 0 1px rgba(201,162,39,.75) inset; animation: load-progress var(--sig-duration) ease forwards .5s; position:relative; } .loading-fill::after{ content:""; position:absolute; inset:0; transform: translateX(-100%); background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.7), rgba(255,255,255,0)); mix-blend-mode: screen; opacity:.22; animation: load-sheen calc(var(--sig-duration) * .9) linear forwards .9s; } @keyframes load-progress{ from{width:0%} to{width:100%} } @keyframes load-sheen{ from{transform: translateX(-100%);} to{transform: translateX(100%);} } /* Hide site while intro-active */ .intro-active .site, .intro-active .site-header, .intro-active .site-footer{ opacity:0; visibility:hidden; } .site, .site-header, .site-footer{ transition: opacity .6s ease .05s, visibility .6s ease .05s, transform .6s ease .05s; } .site{ transform: translateY(8px); } .revealed .site, .revealed .site-header, .revealed .site-footer{ opacity:1; visibility:visible; transform:none; } /* Layout */ .container{max-width:1160px; margin-inline:auto; padding: clamp(16px, 2.5vw, 32px);} /* Skip link */ .skip-link{ position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden; } .skip-link:focus{ left:16px; top:12px; width:auto; height:auto; padding:.5rem .75rem; background:#000; color:#fff; border-radius:8px; } /* Header: blur is heavy; use it only if supported & not perf-lite */ .site-header{ position:sticky; top:0; z-index: 10; background:rgba(12,14,20,.7); border-bottom:1px solid var(--stroke); will-change: transform; transform: translateZ(0); } @supports (backdrop-filter: blur(8px)) { html:not(.perf-lite) .site-header{ backdrop-filter:saturate(140%) blur(8px); background:linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.15)); } } .nav{display:flex; align-items:center; justify-content:center; gap:32px;} .nav-links{display:flex; gap: clamp(20px, 3vw, 40px); list-style:none; padding:0; margin:0; align-items:center;} .nav-links a{ color:#F3F5F7; text-decoration:none; font-weight:500; opacity:.88} .nav-links a:hover{opacity:1; text-underline-offset: .2em; text-decoration: underline 1px var(--gold);} .nav-links .egg a{opacity:.7} /* Hero */ .headline{ font-family: 'Playfair Display', serif; font-size: clamp(40px, 6vw, 76px); line-height:1.04; letter-spacing:.01em; margin: 0 0 .6rem 0; background: linear-gradient(180deg, #FAFAFA 0%, #EDEDED 60%, #D7D7D7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .hero-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(20px, 5vw, 56px); align-items:center; min-height: clamp(62vh, 74vh, 86vh); padding-block: clamp(28px, 7vh, 64px); } .kicker{ font-size: clamp(16px, 1.6vw, 20px); color: var(--muted); margin: 0 0 1.25rem 0; } .cta-row{ display:flex; flex-wrap:wrap; gap:12px; } .btn{ display:inline-flex; align-items:center; justify-content:center; padding:.9rem 1.2rem; border-radius:999px; text-decoration:none; border:1px solid var(--stroke); line-height:1; font-weight:700; letter-spacing:.02em; background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); box-shadow: 0 8px 18px rgba(0,0,0,.32); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } .btn.primary{ border-color: rgba(201,162,39,.55); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.02)), linear-gradient(180deg, var(--gold-2), var(--gold)); color:#1d1a10; text-shadow: 0 1px 0 rgba(255,255,255,.35); } .btn.primary:hover{ transform: translateY(-1px); filter: saturate(108%);} .btn.ghost{ color:#F3F5F7; } .btn.ghost:hover{ box-shadow: 0 10px 22px rgba(0,0,0,.35); transform: translateY(-1px);} /* Decorative */ .hero-art{ position:relative; min-height: 220px; } .orb{ position:absolute; inset: 10% 0 0 0; height: 60%; background: radial-gradient(60% 60% at 50% 40%, rgba(227,199,103,.28), transparent 70%); transform: translateZ(0); } .perf-lite .orb{ background: radial-gradient(60% 60% at 50% 40%, rgba(227,199,103,.18), transparent 70%); } /* Cards */ .grid{ display:grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: clamp(16px, 2.4vw, 28px); margin-block: clamp(20px, 6vh, 72px); } .card{ background: var(--glass); padding: clamp(18px, 2.6vw, 26px); border-radius: 18px; border: 1px solid var(--stroke); backdrop-filter: saturate(120%); box-shadow: 0 18px 36px rgba(0,0,0,.38); transform: translateY(6px); opacity:0; transition: opacity .6s ease, transform .6s ease; } .perf-lite .card{ box-shadow: 0 10px 24px rgba(0,0,0,.30); } .revealed .card{ opacity:1; transform:none; } .card h2{ margin-top:0; margin-bottom:.5rem; font-family: 'Playfair Display', serif; font-weight:600; font-size: clamp(20px, 1.9vw, 24px); color:#F5F3E8; } .card p{ margin:0; color: var(--muted); } /* Footer */ .site-footer{ border-top:1px solid var(--stroke); margin-top: clamp(24px, 8vh, 96px); } .footer-row{ display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap; } .site-footer p{ margin:0; color: var(--muted); } .social{ list-style:none; display:flex; gap:16px; margin:0; padding:0; } .social a{ text-decoration:none; color:#F3F5F7; opacity:.88 } .social a:hover{ opacity:1; text-decoration: underline; text-underline-offset: .2em; text-decoration-color: var(--gold); } /* Performance: avoid layout work until visible */ .about-section, .grid { content-visibility: auto; contain-intrinsic-size: 1200px 800px; } /* Responsive */ @media (max-width: 940px){ .hero-grid{ grid-template-columns: 1fr; } .hero-art{ min-height: 80px; } } @media (max-width: 640px){ .nav-links{display:flex; gap: clamp(20px, 3vw, 40px); list-style:none; padding:0; margin:0; align-items:center;} .grid{ grid-template-columns: 1fr; } } /* Reduce motion */ @media (prefers-reduced-motion: reduce){ *{ animation: none !important; transition: none !important; } body{ overflow:auto !important; } .intro{ opacity:0; visibility:hidden; } .site, .site-header, .site-footer{ opacity:1; visibility:visible; transform:none; } } /* About Section */ .about-section{ position:relative; border-top:1px solid var(--stroke); border-bottom:1px solid var(--stroke); } .about-grid{ display:grid; grid-template-columns: 1.2fr .8fr; gap: clamp(20px, 5vw, 56px); align-items:start; padding-block: clamp(32px, 8vh, 80px); } .about-copy h2{ margin:0 0 .6rem 0; font-family: 'Playfair Display', serif; font-size: clamp(28px, 3.2vw, 40px); background: linear-gradient(180deg, #FAFAFA 0%, #EDEDED 60%, #D7D7D7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .about-copy p{ color: var(--muted); line-height:1.7; margin: 0 0 1rem 0; } .about-aside{ position:relative; } .about-card{ background: var(--glass); border:1px solid var(--stroke); border-radius: 18px; backdrop-filter: saturate(120%); box-shadow: 0 18px 36px rgba(0,0,0,.38); padding: clamp(16px, 2.4vw, 24px); } /* ===== Micro-interactions (perf-friendly) ===== */ /* Card hover lift */ .revealed .card{ transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease, background-color .22s ease; } @media (hover:hover){ .card:hover{ transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,0,0,.45), 0 0 0 1px rgba(201,162,39,0.18) inset; border-color: rgba(201,162,39,0.35); background: linear-gradient(180deg, rgba(255,255,255,.06), rgba(255,255,255,.02)); } } /* Primary button sheen */ .btn.primary{ position: relative; overflow: hidden; } @media (hover:hover){ .btn.primary::after{ content:""; position:absolute; top:0; bottom:0; width:18%; left:-30%; background: linear-gradient(90deg, rgba(255,255,255,0), rgba(255,255,255,.55), rgba(255,255,255,0)); transform: skewX(-18deg); opacity:.0; transition: opacity .2s ease; } .btn.primary:hover::after{ left:110%; opacity:.85; transition: left .8s ease, opacity .2s ease; } } /* Gold link underline grows */ a:hover{ text-decoration-thickness: 1px; text-underline-offset: 0.25em; } /* Parallax element base */ [data-parallax]{ will-change: transform; } /* ===== Lite mode kills heavier effects (auto or ?lite) ===== */ html[data-lite="1"] body::before{ animation: none !important; opacity:.6; } html[data-lite="1"] .site-header{ backdrop-filter:none !important; background: rgba(12,12,16,.8) !important; } html[data-lite="1"] .card{ box-shadow: 0 10px 24px rgba(0,0,0,.35); } /* --- MOBILE NAV (hamburger) --- */ .nav-toggle{ display:none; position: relative; width: 42px; height: 42px; border-radius: 12px; border: 1px solid var(--stroke); background: rgba(255,255,255,0.04); box-shadow: inset 0 1px 0 rgba(255,255,255,.06); align-items:center; justify-content:center; } .nav-toggle .bar{ display:block; width: 22px; height: 2px; margin: 3px auto; background: #F3F5F7; border-radius: 2px; transition: transform .25s ease, opacity .2s ease, width .2s ease; } @media (max-width: 900px){ .site-header{ backdrop-filter: none; background: rgba(10,10,12,0.86); } .nav{ justify-content:space-between; } .nav-toggle{ display:flex; } .nav-links{ position: fixed; inset: 64px 12px auto 12px; background: rgba(20,22,28,0.95); border: 1px solid var(--stroke); border-radius: 18px; padding: 10px; display: grid; gap: 4px; transform-origin: top right; transform: scale(.98) translateY(-8px); opacity:0; visibility:hidden; transition: transform .2s ease, opacity .2s ease, visibility .2s ease; } .nav-links a{ display:block; padding: 14px 12px; font-size: 16px; border-radius: 12px; } .nav-links a:active{ background: rgba(255,255,255,0.06); } /* open state */ .menu-open .nav-links{ opacity:1; visibility:visible; transform: none; } .menu-open .nav-toggle[aria-expanded="true"] .bar:nth-child(1){ transform: translateY(5px) rotate(45deg); width:22px; } .menu-open .nav-toggle[aria-expanded="true"] .bar:nth-child(2){ opacity:0; } .menu-open .nav-toggle[aria-expanded="true"] .bar:nth-child(3){ transform: translateY(-5px) rotate(-45deg); width:22px; } /* prevent page beneath from scrolling when menu open */ .menu-open{ overflow:hidden; } } /* --- About section mobile polish --- */ @media (max-width: 900px){ .about-section{ border-left: none; border-right: none; } .about-grid{ grid-template-columns: 1fr !important; gap: 16px; padding-block: 24px; } .about-copy h2{ margin-bottom: .4rem; } .about-copy p{ font-size: 16px; line-height: 1.75; } .about-aside{ order: -1; } /* Quick Facts card above the text */ .about-card{ margin-top: 4px; padding: 16px; border-radius: 16px; } .about-card ul{ gap: .4rem; padding-left: 1.1rem; } .about-card li{ overflow-wrap: anywhere; word-break: normal; } } /* --- IG dropdown switch (mobile) --- */ .ig-switch{ position: relative; display:none; } .ig-mobile-btn{ display:flex; align-items:center; justify-content:center; width:42px; height:42px; border-radius:12px; border:1px solid var(--stroke); background: linear-gradient(180deg, var(--gold-2), var(--gold)); color:#1d1a10; box-shadow: inset 0 1px 0 rgba(255,255,255,.3), 0 8px 18px rgba(201,162,39,.28); } .ig-mobile-btn:hover{ filter: saturate(110%); } .ig-menu{ position:absolute; top: calc(100% + 8px); right: 0; min-width: 220px; background: rgba(20,22,28,0.98); border: 1px solid var(--stroke); border-radius: 14px; padding: 6px; box-shadow: 0 18px 36px rgba(0,0,0,.45); transform: translateY(-6px) scale(0.98); opacity:0; visibility:hidden; transition: transform .18s ease, opacity .18s ease, visibility .18s ease; backdrop-filter: saturate(120%) blur(8px); z-index: 25; contain: layout paint; /* stops weird overflow */ } .ig-menu a{ display:flex; align-items:center; gap:10px; padding: 12px 10px; border-radius: 10px; color:#F3F5F7; text-decoration:none; font-size:15px; } .ig-menu a:hover{ background: rgba(255,255,255,0.06); } .ig-dot{ width:8px; height:8px; border-radius:50%; background: linear-gradient(180deg, var(--gold-2), var(--gold)); box-shadow: 0 0 6px rgba(201,162,39,.6); flex: 0 0 8px; } /* open state controlled by html.ig-open */ html.ig-open .ig-switch .ig-menu{ opacity:1; visibility:visible; transform:none; } @media (max-width: 900px){ .ig-switch{ display:block; } .nav{ gap:8px; } } /* --- Cars, Bikes n’ Bites Spotlight --- */ .brand-spotlight{ border-top:1px solid var(--stroke); border-bottom:1px solid var(--stroke); } .brand-grid{ display:grid; grid-template-columns: 1.1fr .9fr; gap: clamp(20px, 5vw, 56px); align-items:center; padding-block: clamp(28px, 7vh, 64px); } .brand-copy h2{ margin:0 0 .6rem 0; font-family: 'Playfair Display', serif; font-size: clamp(28px, 3.2vw, 40px); background: linear-gradient(180deg, #FAFAFA 0%, #EDEDED 60%, #D7D7D7 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } .brand-copy p{ color: var(--muted); margin: 0 0 1.1rem 0; line-height: 1.7; } .brand-art{ position:relative; min-height: 220px; } .brand-orb{ position:absolute; inset: 10% 0 0 0; height: 60%; background: radial-gradient(60% 60% at 50% 40%, rgba(227,199,103,.22), transparent 70%); transform: translateZ(0); } @media (max-width: 940px){ .brand-grid{ grid-template-columns: 1fr; } .brand-art{ min-height: 80px; } } /* Anchor scroll offset for sticky header */ .about-section{ scroll-margin-top: 96px; } /* Improve hero text legibility */ .hero .headline{ text-shadow: 0 2px 10px rgba(0,0,0,.45), 0 8px 28px rgba(0,0,0,.35); } .hero .kicker{ text-shadow: 0 1px 6px rgba(0,0,0,.45), 0 4px 18px rgba(0,0,0,.28); } /* === HERO background (restored) with soft tint + bottom fade === */ .hero{ /* Default: JPEG so older parsers never fail */ background-image: linear-gradient(to bottom, rgba(0,0,0,.50) 0%, rgba(0,0,0,.26) 48%, rgba(0,0,0,.10) 78%, rgba(0,0,0,0) 100%), url("hero-mountain-1536-topcrop-tight.jpg"); background-position: center 0%, center 54%; background-size: 100% 100%, cover; background-repeat: no-repeat, no-repeat; } @supports (background-image: image-set(url("x.webp") type("image/webp") 1x)){ .hero{ background-image: linear-gradient(to bottom, rgba(0,0,0,.50) 0%, rgba(0,0,0,.26) 48%, rgba(0,0,0,.10) 78%, rgba(0,0,0,0) 100%), image-set( url("hero-mountain-1536-topcrop-tight.webp") type("image/webp") 1x, url("hero-mountain-1536-topcrop-tight.jpg") type("image/jpeg") 1x ); } } /* === Hero left-side shade for legibility (non-invasive) === */ .hero{ /* Default: JPEG so older parsers never fail */ background-image: linear-gradient(to bottom, rgba(0,0,0,.50) 0%, rgba(0,0,0,.26) 48%, rgba(0,0,0,.10) 78%, rgba(0,0,0,0) 100%), url("hero-mountain-1536-topcrop-tight.jpg"); background-position: center 0%, center 54%; background-size: 100% 100%, cover; background-repeat: no-repeat, no-repeat; } @supports (background-image: image-set(url("x.webp") type("image/webp") 1x)){ .hero{ background-image: linear-gradient(to bottom, rgba(0,0,0,.50) 0%, rgba(0,0,0,.26) 48%, rgba(0,0,0,.10) 78%, rgba(0,0,0,0) 100%), image-set( url("hero-mountain-1536-topcrop-tight.webp") type("image/webp") 1x, url("hero-mountain-1536-topcrop-tight.jpg") type("image/jpeg") 1x ); } } .hero::before{ content:""; position:absolute; inset:0; pointer-events:none; z-index:0; background: linear-gradient(to bottom, rgba(0,0,0,.42) 0%, rgba(0,0,0,.26) 46%, rgba(0,0,0,.12) 78%, rgba(0,0,0,0) 100%); -webkit-backdrop-filter: blur(1.5px) saturate(110%); backdrop-filter: blur(1.5px) saturate(110%);} .hero .hero-grid{ position: relative; z-index: 1; } /* keep content above shade */ /* Force bright white hero text */ .hero .headline{ background: none !important; -webkit-background-clip: initial !important; background-clip: initial !important; color: #FFFFFF !important; -webkit-text-fill-color: #FFFFFF !important; text-shadow: 0 2px 10px rgba(0,0,0,.45), 0 8px 28px rgba(0,0,0,.35); } .hero .kicker{ color: #FFFFFF !important; opacity: .92; text-shadow: 0 1px 6px rgba(0,0,0,.45), 0 4px 18px rgba(0,0,0,.28); } /* Stronger hero overlay on phones for readability */ @media (max-width: 640px){ .hero::before{ background: linear-gradient(to bottom, rgba(0,0,0,.62) 0%, rgba(0,0,0,.38) 46%, rgba(0,0,0,.18) 78%, rgba(0,0,0,0) 100%); } .hero{ /* Default: JPEG so older parsers never fail */ background-image: linear-gradient(to bottom, rgba(0,0,0,.50) 0%, rgba(0,0,0,.26) 48%, rgba(0,0,0,.10) 78%, rgba(0,0,0,0) 100%), url("hero-mountain-1536-topcrop-tight.jpg"); background-position: center 0%, center 54%; background-size: 100% 100%, cover; background-repeat: no-repeat, no-repeat; } @supports (background-image: image-set(url("x.webp") type("image/webp") 1x)){ .hero{ background-image: linear-gradient(to bottom, rgba(0,0,0,.50) 0%, rgba(0,0,0,.26) 48%, rgba(0,0,0,.10) 78%, rgba(0,0,0,0) 100%), image-set( url("hero-mountain-1536-topcrop-tight.webp") type("image/webp") 1x, url("hero-mountain-1536-topcrop-tight.jpg") type("image/jpeg") 1x ); } } } /* Trim hero height on larger screens so more content sits above the fold */ @media (min-width: 980px){ .hero-grid{ min-height: clamp(52vh, 66vh, 78vh); } } /* === Mobile IG menu: fixed popover pinned to top-right === */ @media (max-width: 900px){ .ig-menu{ position: fixed !important; left: auto !important; right: 8px !important; /* top is set inline from JS for accurate placement */ z-index: 100 !important; } }