/* ============================================================================ WALLIS AUTO DETAIL — single-file studio site Architecture, motion and grid follow the Lumora spec exactly. Palette, imagery and copy are Wallis. 2026 "warm glass" pass: ivory ground, Fraunces display, frosted-glass chrome with a scroll-tracked edge highlight (see site.js #glass-shine). ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&display=swap'); /* ---------- reset ---------- */ *{ box-sizing:border-box; margin:0; padding:0 } html{ font-size:16px; -webkit-font-smoothing:antialiased } /* Native date/time controls — datetime-local especially, on iOS Safari — carry an intrinsic min-content width that can push past width:100% on a flex or grid parent (flex/grid items default to min-width:auto). This makes every form control actually respect its box instead of overflowing it, whatever container it's dropped into. */ input, select, textarea{ min-width:0; max-width:100% } input[type="datetime-local"], input[type="date"], input[type="time"], input[type="month"], input[type="week"]{ width:100% } body{ background-color:var(--ground,#F4F0E7); color:#eef3f3; font-family:'Onest',sans-serif; overflow-x:hidden; background-image: radial-gradient(150% 60% at 50% -10%, rgba(255,251,243,.6), rgba(255,251,243,0) 62%), radial-gradient(130% 50% at 50% 114%, rgba(120,90,50,.06), rgba(120,90,50,0) 58%); background-attachment:fixed; background-repeat:no-repeat } @media (max-width:640px){ body{ background-attachment:scroll } } a{ color:inherit; text-decoration:none } button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer } ul{ list-style:none } img{ display:block } .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0 } :focus-visible{ outline:2px solid #8A6E2F; outline-offset:2px } @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important } } /* ---------- adaptive rem grid ---------- */ @media (max-width:1920px){ html{ font-size:0.833333vw } } @media (max-width:1440px){ html{ font-size:1.111111vw } } @media (max-width:1024px){ html{ font-size:1.5625vw } } @media (max-width:640px){ html{ font-size:4.444444vw } } /* ---------- tokens (Direction B — cooler, glass-forward, dark) ---------- */ :root{ /* the whole site is dark now — let native chrome (select popups, the datetime-local picker, scrollbars) render dark too instead of the mismatched light default. */ color-scheme: dark; --ground:#0f1417; /* deep cool near-black page */ --background:#161f23; --foreground:#eef3f3; --ink:#f3f8f8; --muted:#9fb0b3; --subtle:#6f8286; --line:#2b3a3f; --surface:#182226; --surface-2:#1f2c31; /* Wallis gold — brightened so it holds on the dark ground. */ --accent:#e0be6d; --accent-bright:#e6c579; --accent-lt:#f0d89a; --accent-from:#e6c579; --accent-to:#b98f3f; --radius-pill:9999px; --radius-card:1.75rem; --radius-card-sm:1.15rem; --radius-control:0.9rem; --text-watermark:13rem; --container-shell:88rem; --font-display:'Fraunces','Georgia','Times New Roman',serif; /* frosted glass chrome — panels sit ABOVE the dark ground */ --glass-bg:linear-gradient(150deg,rgba(255,255,255,.13),rgba(255,255,255,.035)); --glass-fallback:rgba(38,50,55,.62); --glass-brd:rgba(255,255,255,.16); --glass-shadow:0 26px 60px rgba(0,0,0,.5), 0 4px 14px rgba(0,0,0,.34); } .shell{ max-width:88rem; margin-inline:auto } /* ---------- display type ---------- */ h1,h2,h3,h4,.stmt h2,.center-head h2,.card h3,.srow h3,.panel h2,.fcta h2, #services h2,.sec h2,#modal h2,.split h3,.panels h3,.hero h1{ font-family:var(--font-display); font-weight:500; letter-spacing:-.015em } /* ---------- frosted glass ---------- */ .glass{ position:relative; isolation:isolate; background-color:var(--glass-fallback); background-image:var(--glass-bg); -webkit-backdrop-filter:blur(16px) saturate(1.7); backdrop-filter:blur(16px) saturate(1.7); border:1px solid var(--glass-brd); box-shadow:var(--glass-shadow); border-radius:var(--radius-card-sm) } .glass::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0; padding:1.5px; background:conic-gradient(from var(--edge,90deg), rgba(255,255,255,0) 0deg, #fff 38deg, rgba(255,255,255,.18) 100deg, rgba(130,205,255,.32) 150deg, rgba(255,255,255,0) 205deg, rgba(255,255,255,.55) 312deg, rgba(255,255,255,0) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude; filter:drop-shadow(0 0 4px rgba(255,255,255,.4)) } .glass > *{ position:relative; z-index:1 } @media (prefers-reduced-motion:reduce){ .glass::after{ --edge:120deg } } /* ---------- skip link ---------- */ .skip{ position:fixed; left:1rem; top:1rem; z-index:60; border-radius:.875rem; background:#0a0a0a; padding:.5rem 1rem; font-size:.875rem; color:#fff; transform:translateY(-200%); transition:transform .2s } .skip:focus{ transform:none } /* ---------- reveal primitives ---------- */ .rv{ opacity:0; transform:translateY(var(--rv-y,20px)) scale(var(--rv-s,1)); transition:opacity .8s cubic-bezier(.16,1,.3,1), transform .8s cubic-bezier(.16,1,.3,1) } .rv.in{ opacity:1; transform:none } .line{ display:block; overflow:hidden } .line>span{ display:block; transform:translateY(102%); opacity:0; transition:transform .9s cubic-bezier(.215,.61,.355,1), opacity .9s cubic-bezier(.215,.61,.355,1) } .line.in>span{ transform:none; opacity:1 } .wr{ display:inline-block; transform:translateY(24px); opacity:0; transition:transform .7s cubic-bezier(.165,.84,.44,1), opacity .7s cubic-bezier(.165,.84,.44,1) } .wr.in{ transform:none; opacity:1 } /* ---------- shared components ---------- */ .pill{ display:inline-block } .pill>span{ display:inline-flex; align-items:center; gap:.75rem; border-radius:9999px; font-size:.875rem; font-weight:500; transition:transform .35s cubic-bezier(.2,.8,.2,1) } .pill:hover>span{ transform:scale(1.04) } .pill.dark>span{ background:#0a0a0a; color:#fff } .pill.light>span{ background-color:rgba(255,252,245,.8); background-image:var(--glass-bg); -webkit-backdrop-filter:blur(10px) saturate(1.5); backdrop-filter:blur(10px) saturate(1.5); border:1px solid var(--glass-brd); box-shadow:0 6px 16px rgba(74,48,18,.12); color:#eef3f3 } .pill.outline>span{ border:1px solid rgba(28,23,16,.28); background:transparent; color:#eef3f3 } .pill.arw>span{ padding:.375rem .375rem .375rem 1.5rem } .pill.noarw>span{ padding:.875rem 1.75rem } .pill .badge{ width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:9999px; font-size:1rem; flex:0 0 auto } .pill.dark .badge{ background:var(--surface); color:#0a0a0a } .pill.light .badge,.pill.outline .badge{ background:#0a0a0a; color:#fff } .pill .badge svg{ transition:transform .35s cubic-bezier(.2,.8,.2,1) } .pill.a-right:hover .badge svg{ transform:translate(3px,0) } .pill.a-up:hover .badge svg{ transform:translate(2px,-2px) } .eyebrow{ display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:500; color:rgba(233,239,240,.7) } .eyebrow::before{ content:""; width:.375rem; height:.375rem; border-radius:9999px; background:rgba(233,239,240,.5) } .eyebrow.light{ color:rgba(255,255,255,.7) } .eyebrow.light::before{ background:rgba(255,255,255,.6) } .eyebrow.boxed{ border:1px solid var(--line); border-radius:9999px; padding:.375rem 1rem } .chip{ display:inline-flex; border:1px solid rgba(255,255,255,.25); color:#fff; border-radius:9999px; padding:.5rem 1rem; font-size:.875rem } .alink{ display:inline-flex } .alink>span{ display:inline-block; opacity:.65; transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s } .alink:hover>span{ transform:translateX(4px); opacity:1 } .alink.sm>span{ opacity:.7 } .alink.sm:hover>span{ transform:translateX(3px); opacity:1 } /* ============================ LOADER ============================ */ #loader{ position:fixed; inset:0; z-index:120; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:2rem; background:#0a0a0a; color:#fff; border-radius:0 0 2rem 2rem; transform:translateY(0); } #loader.out{ transform:translateY(-100%); transition:transform .75s cubic-bezier(.22,1,.36,1) } #loader .mid{ display:flex; flex-direction:column; align-items:center; gap:1.25rem; text-align:center; transition:opacity .6s ease, transform .6s ease } #loader.out .mid{ opacity:0; transform:translateY(-12px) } #loader .brand{ display:flex; align-items:center; gap:.5rem; font-weight:600; font-size:1.5rem } #loader .brand img.brand-mark{ height:4rem; width:auto; display:block } #loader .tag{ max-width:26ch; font-size:.875rem; color:rgba(255,255,255,.55) } #loader .prog{ width:min(22rem,72vw); display:flex; flex-direction:column; gap:.75rem } #loader .track{ height:1px; background:rgba(255,255,255,.15) } #loader .fill{ height:100%; width:0%; background:var(--accent-bright); transition:width .1s ease-out } #loader .row{ display:flex; justify-content:space-between; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.45) } #loader .num{ font-variant-numeric:tabular-nums; color:rgba(255,255,255,.8) } @media (min-width:640px){ #loader .brand{ font-size:1.875rem } } /* ============================ HEADER ============================ */ #header{ position:absolute; inset-inline:0; top:0; z-index:50; opacity:0; transform:translateY(-14px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1) } #header.in{ opacity:1; transform:none } #header .bar{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; padding:1.25rem } .brandbtn>span{ display:flex; align-items:center; gap:.5rem; font-size:1.125rem; font-weight:600; letter-spacing:-.01em; transition:transform .35s cubic-bezier(.2,.8,.2,1) } .brandbtn:hover>span{ transform:scale(1.04) } .brandbtn img.brand-mark{ height:4rem; width:auto; display:block } .brandbtn .sub{ font-size:.6rem; font-weight:500; letter-spacing:.22em; text-transform:uppercase; color:rgba(233,239,240,.45); margin-left:.15rem } #header nav.main{ display:none } #header nav.main ul{ display:flex; gap:2rem; font-size:.875rem; font-weight:500 } #header nav.main button>span{ display:inline-block; opacity:.8; transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s } #header nav.main button:hover>span{ transform:translateY(-2px); opacity:1 } #header .caret{ font-size:.75rem; opacity:.6 } #header .right{ display:flex; align-items:center; gap:.75rem } .clock{ display:none; align-items:center; border:1px solid var(--glass-brd); background-color:var(--glass-fallback); background-image:var(--glass-bg); -webkit-backdrop-filter:blur(12px) saturate(1.6); backdrop-filter:blur(12px) saturate(1.6); box-shadow:var(--glass-shadow); border-radius:.9rem; padding:.5rem .75rem; gap:.75rem; font-size:.75rem; color:rgba(28,23,16,.72) } .clock .lbl{ color:rgba(233,239,240,.45) } .clock .t{ min-width:3.5rem; font-variant-numeric:tabular-nums; font-weight:500; color:#eef3f3 } .clock .sep{ color:rgba(233,239,240,.3) } .clock .d{ font-weight:500 } #menuBtn{ border:1px solid var(--glass-brd); background-color:var(--glass-fallback); background-image:var(--glass-bg); box-shadow:var(--glass-shadow); -webkit-backdrop-filter:blur(12px) saturate(1.6); backdrop-filter:blur(12px) saturate(1.6); border-radius:.9rem; transition:background-color .3s } #menuBtn:hover{ background-color:rgba(255,253,247,.95) } #menuBtn>span{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem 1rem; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; transition:transform .35s cubic-bezier(.2,.8,.2,1) } #menuBtn:hover>span{ transform:scale(1.05) } #menuBtn svg{ font-size:.875rem } #menuBtn .word{ display:none } @media (min-width:640px){ #header .bar{ padding:1.5rem 2rem } #menuBtn .word{ display:inline } } @media (min-width:768px){ .clock{ display:flex } } @media (min-width:1024px){ #header nav.main{ display:flex } } /* ============================ HERO ============================ */ #home{ position:relative; isolation:isolate; overflow:hidden; border-radius:0 0 2rem 2rem; background:#c9c9c9 } #liquid{ position:absolute; inset:0; z-index:0 } #liquid img,#liquid video,#liquid canvas{ position:absolute; inset:0; width:100%; height:100% } #liquid img,#liquid video{ object-fit:cover } #liquid canvas{ pointer-events:none } .vignette{ position:absolute; inset:0; z-index:1; pointer-events:none; background:linear-gradient(to bottom, rgba(10,10,10,.55), rgba(10,10,10,.15), rgba(10,10,10,.72)) } /* Below the desktop grid breakpoint #home's height tracks its stacked text content, which runs well past the viewport — cover-fit was stretching the video/vignette to match that full height instead of the screen, so almost the whole frame was cropped away. Pin both layers to the viewport height. */ @media (max-width:1023px){ #liquid,.vignette{ inset:auto; top:0; left:0; right:0; height:100svh } } #heroMark{ pointer-events:none; position:absolute; inset-inline:0; bottom:7rem; z-index:1; text-align:center; user-select:none; font-weight:700; line-height:1; font-size:var(--text-watermark); color:rgba(255,255,255,.16); opacity:0; transform:translateY(20px); transition:opacity 1s ease, transform 1s cubic-bezier(.22,1,.36,1) } #heroMark.in{ opacity:1; transform:none } .hero-grid{ position:relative; z-index:20; display:flex; flex-direction:column; gap:2rem; padding:7rem 1.25rem 5rem } .hero-l{ display:flex; flex-direction:column; gap:1.75rem } .hero h1{ max-width:16ch; font-size:2.25rem; font-weight:600; line-height:.98; letter-spacing:-.02em; color:#fff; text-shadow:0 18px 50px rgba(0,0,0,.6) } .hero .lede{ max-width:46ch; font-size:.95rem; color:rgba(255,255,255,.8) } .hero .eyebrow{ color:rgba(255,255,255,.8) } .hero .eyebrow::before{ background:rgba(255,255,255,.6) } .rating{ display:flex; align-items:center; gap:.75rem } .rating .stars{ color:var(--accent-bright); display:inline-flex; gap:.1rem; font-size:1rem } .rating .txt{ font-size:.875rem; font-weight:500; color:rgba(255,255,255,.8) } .hero-cta{ display:flex; flex-wrap:wrap; gap:.75rem } .hero .pill.outline>span{ border-color:rgba(255,255,255,.5); color:#fff } .hero .pill.outline .badge{ background:var(--surface); color:#0a0a0a } .hero-r{ display:flex; flex-direction:column; align-items:flex-start; gap:2rem } .hcard{ position:relative; isolation:isolate; width:100%; max-width:24rem; border-radius:1.25rem; background-color:var(--glass-fallback); background-image:var(--glass-bg); padding:.5rem; border:1px solid var(--glass-brd); box-shadow:var(--glass-shadow); -webkit-backdrop-filter:blur(16px) saturate(1.7); backdrop-filter:blur(16px) saturate(1.7) } .hcard::after{ content:""; position:absolute; inset:0; border-radius:inherit; pointer-events:none; z-index:0; padding:1.5px; background:conic-gradient(from var(--edge,90deg), rgba(255,255,255,0) 0deg,#fff 38deg,rgba(255,255,255,.18) 100deg,rgba(130,205,255,.3) 150deg, rgba(255,255,255,0) 205deg,rgba(255,255,255,.55) 312deg,rgba(255,255,255,0) 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); -webkit-mask-composite:xor; mask-composite:exclude } .hcard > *{ position:relative; z-index:1 } .hcard .inner{ display:flex; gap:.5rem; cursor:pointer; border-radius:.875rem } .hcard .tile{ aspect-ratio:1; width:6rem; display:grid; place-items:center; border-radius:.875rem; background:#0a0a0a center/cover no-repeat; font-size:1.875rem; color:var(--accent-bright); flex:0 0 auto; overflow:hidden; transition:background-image .3s } .hcard .tile img.brand-mark{ height:4rem; width:auto; display:block; transition:opacity .3s } .hcard .tile.has-img img.brand-mark{ opacity:0 } .hcard .panel{ flex:1; border-radius:.875rem; background:rgba(246,241,231,.66); padding:.75rem; color:#eef3f3; display:flex; flex-direction:column; justify-content:space-between; min-width:0 } .hcard .slot{ position:relative; min-height:4.1rem } .hcard .item{ position:absolute; inset:0; transition:transform .45s cubic-bezier(.2,.8,.2,1), opacity .45s } .hcard .cap{ font-size:.65rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:rgba(233,239,240,.45) } .hcard .ttl{ max-width:9rem; font-size:.875rem; font-weight:500; line-height:1.35 } .hcard .go-hint{ display:inline-flex; gap:.3rem; margin-top:.35rem; font-size:.7rem; font-weight:600; text-transform:uppercase; letter-spacing:.05em; color:var(--accent) } .hcard .inner:hover .go-hint em{ transform:translateX(2px) } .hcard .go-hint em{ transition:transform .25s } .hcard .foot{ display:flex; align-items:center; justify-content:space-between; margin-top:.5rem } .hcard .dots{ display:flex; gap:.25rem } .hcard .dot{ height:.25rem; border-radius:9999px; width:.375rem; background:rgba(233,239,240,.2); transition:all .3s } .hcard .dot.on{ width:1rem; background:rgba(233,239,240,.7) } .hcard .navs{ display:flex; gap:.25rem } .hcard .navs button{ width:1.75rem; height:1.75rem; display:grid; place-items:center; border-radius:9999px; background:var(--surface); color:rgba(233,239,240,.7); box-shadow:0 0 0 1px var(--line); transition:color .2s } .hcard .navs button:hover{ color:#eef3f3 } .partners{ width:100%; max-width:24rem } .partners .lbl{ margin-bottom:.75rem; font-size:.75rem; font-weight:500; color:rgba(255,255,255,.6) } .partners ul{ display:grid; grid-template-columns:repeat(2,1fr); column-gap:1rem; row-gap:.75rem } .partners li>span{ display:flex; align-items:center; gap:.375rem; font-size:.75rem; color:rgba(255,255,255,.75); opacity:.85; transition:transform .35s cubic-bezier(.2,.8,.2,1), opacity .35s } .partners li:hover>span{ transform:translateY(-2px); opacity:1 } .partners svg{ font-size:.875rem; color:rgba(255,255,255,.5) } .statusbar{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; border-top:1px solid rgba(255,255,255,.18); padding:1.25rem; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.025em; color:rgba(255,255,255,.7); position:relative; z-index:20; opacity:0; transition:opacity .8s ease } .statusbar.in{ opacity:1 } .statusbar .mid{ display:none } @media (min-width:640px){ .hero-grid{ padding-inline:2rem } .statusbar{ padding-inline:2rem } .statusbar .mid{ display:block } .hero h1{ font-size:3rem } .partners ul{ grid-template-columns:repeat(4,1fr) } } @media (min-width:768px){ .hero h1{ font-size:3.75rem } } @media (min-width:1024px){ .hero-grid{ display:grid; min-height:100lvh; grid-template-columns:repeat(12,1fr); gap:2.5rem; padding:9rem 2rem 7rem; align-content:center } .hero-l{ grid-column:span 7 } .hero-r{ grid-column:span 5; align-items:flex-end } .hcard,.partners{ max-width:19rem } .partners .lbl{ text-align:right } } /* ============================ ABOUT ============================ */ #about{ background:var(--surface) } #about .grid{ display:grid; grid-template-columns:1fr; align-items:center; gap:3rem; padding:5rem 1.25rem } .globe-wrap{ position:relative; min-height:14rem } .globe-bg{ position:absolute; left:-1rem; top:50%; transform:translateY(-50%); font-size:12rem; color:rgba(233,239,240,.08) } .globe-note{ position:relative; margin-top:auto; display:flex; align-items:center; gap:.75rem; font-size:.875rem; color:rgba(233,239,240,.7) } .globe-note svg{ font-size:1.5rem; color:#eef3f3; flex:0 0 auto } .globe-note span{ max-width:16rem } .stmt{ display:flex; flex-direction:column; gap:2.5rem } .stmt h2{ font-size:1.5rem; font-weight:500; line-height:1.35; letter-spacing:-.01em } .stmt .dim{ color:var(--muted) } .stmt .foot{ display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:1.5rem; border-top:1px solid var(--line); padding-top:1.5rem } .socials{ display:flex; gap:.5rem; margin-top:.5rem } .socials a{ width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:9999px; font-size:.875rem } .socials svg{ transition:transform .35s cubic-bezier(.2,.8,.2,1) } .socials a:hover svg{ transform:scale(1.18) } .socials .s1{ background:var(--accent); color:#fff } .socials .s2{ background:var(--surface); color:rgba(233,239,240,.7) } @media (min-width:640px){ #about .grid{ padding-inline:2rem } .stmt h2{ font-size:1.875rem } .globe-bg{ font-size:16rem } } @media (min-width:1024px){ #about .grid{ grid-template-columns:1fr 1fr; padding-block:7rem } .globe-wrap{ min-height:20rem; display:flex; flex-direction:column } .globe-bg{ left:-1.5rem; font-size:20rem } } /* ============================ BAND ============================ */ .band{ background:var(--surface) } .band ul{ display:flex; flex-direction:column; gap:.75rem; padding:2.5rem 1.25rem } .band li{ flex:1 } .band .tile{ display:grid; place-items:center; height:6rem; border-radius:9999px; font-size:1.875rem; font-weight:500; transition:transform .4s cubic-bezier(.2,.8,.2,1) } .band .tile:hover{ transform:scale(1.03) } .band .t-light{ background:var(--surface); color:#eef3f3 } .band .t-accent{ background:linear-gradient(to bottom right,var(--accent-from),var(--accent-to)); color:#fff } .band .t-dark{ background:#0a0a0a; color:#fff } .band .t-ghost{ background:rgba(241,240,238,.6); color:rgba(233,239,240,.35) } @media (min-width:640px){ .band ul{ flex-direction:row; gap:1rem; padding-inline:2rem } .band .tile{ height:10rem; font-size:2.25rem } .band .t-dark svg{ font-size:3rem } } /* ============================ WORK ============================ */ #works{ background:var(--surface) } #works .wrap{ padding:2.5rem 1.25rem 5rem } .center-head{ display:flex; flex-direction:column; align-items:center; gap:1.25rem; text-align:center; margin-bottom:3rem } .center-head h2{ font-size:2.25rem; font-weight:600; letter-spacing:-.02em; width:fit-content } .cards{ display:grid; grid-template-columns:1fr; gap:1.5rem } .card{ position:relative; min-height:22rem; overflow:hidden; border-radius:2rem; background:#0a0a0a; padding:1.5rem; color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.05); display:block; transition:transform .45s cubic-bezier(.2,.8,.2,1) } .card:hover{ transform:translateY(-8px) scale(1.012) } .card .bg{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.5; transition:transform 1.2s cubic-bezier(.2,.8,.2,1), opacity .6s } .card:hover .bg{ transform:scale(1.06); opacity:.62 } .card .veil{ position:absolute; inset:0; background:linear-gradient(180deg, rgba(10,10,10,.55) 0%, rgba(10,10,10,.25) 35%, rgba(10,10,10,.92) 100%) } .card .meta{ position:relative; display:flex; justify-content:space-between; align-items:flex-start; font-size:.75rem; text-transform:uppercase; letter-spacing:.025em; color:rgba(255,255,255,.65) } .card .arw{ width:2.75rem; height:2.75rem; display:grid; place-items:center; border-radius:9999px; background:rgba(255,255,255,.1); color:#fff; box-shadow:0 0 0 1px rgba(255,255,255,.15); transition:transform .4s cubic-bezier(.2,.8,.2,1); flex:0 0 auto } .card:hover .arw{ transform:rotate(45deg) scale(1.08) } .card .btm{ position:absolute; inset-inline:1.5rem; bottom:1.5rem } .card h3{ font-size:1.5rem; font-weight:500; letter-spacing:-.01em } .card p{ margin-top:.5rem; max-width:28rem; font-size:.875rem; color:rgba(255,255,255,.7) } .card .tags{ margin-top:1.25rem; display:flex; flex-wrap:wrap; gap:.5rem } @media (min-width:640px){ #works .wrap{ padding-inline:2rem } .center-head h2{ font-size:3rem } .card{ min-height:26rem; padding:2rem } .card .btm{ inset-inline:2rem; bottom:2rem } .card h3{ font-size:1.875rem } } @media (min-width:768px){ .cards{ grid-template-columns:repeat(2,1fr) } } @media (min-width:1024px){ #works .wrap{ padding-bottom:7rem } } /* ============================ SERVICES ============================ */ #services{ background:var(--surface) } #services .wrap{ padding:5rem 1.25rem } #services h2{ margin:1.25rem 0 3rem; max-width:16ch; font-size:2.25rem; font-weight:600; letter-spacing:-.02em } .srow{ border-top:1px solid var(--line) } .srow:first-child{ border-top:0 } .srow a{ display:flex; align-items:center; gap:1rem; border-radius:1.25rem; padding:1.5rem; background:rgba(241,240,238,0); transition:background-color .5s cubic-bezier(.2,.8,.2,1), padding .5s cubic-bezier(.2,.8,.2,1) } .srow a:hover{ background:rgba(241,240,238,1); padding-left:2rem; padding-right:1.25rem } .srow .n{ width:1.75rem; font-size:.875rem; font-weight:500; color:rgba(233,239,240,.4); flex:0 0 auto } .srow h3{ flex:1; font-size:1.5rem; font-weight:500; letter-spacing:-.01em } .srow p{ display:none; max-width:20rem; font-size:.875rem; color:rgba(233,239,240,.55) } .srow .go{ width:2.5rem; height:2.5rem; display:grid; place-items:center; border-radius:9999px; background:#0a0a0a; color:#fff; flex:0 0 auto; transition:transform .4s cubic-bezier(.2,.8,.2,1) } .srow a:hover .go{ transform:translateX(5px) } @media (min-width:640px){ #services .wrap{ padding-inline:2rem } #services h2{ margin-bottom:3.5rem; font-size:3rem } .srow a{ gap:1.5rem; padding-block:2rem } .srow .n{ width:2.5rem } .srow h3{ font-size:1.875rem } .srow .go{ width:3rem; height:3rem } } @media (min-width:768px){ .srow h3{ font-size:2.25rem } } @media (min-width:1024px){ #services .wrap{ padding-block:7rem } .srow p{ display:block } } /* ============================ TRUST PANEL ============================ */ .trust{ background:var(--surface) } .trust .wrap{ padding:0 1.25rem 5rem } .panel{ border-radius:2rem; background:#0a0a0a; padding:3rem 1.5rem; color:#fff } .panel h2{ margin-top:1rem; max-width:22ch; font-size:1.875rem; font-weight:500; letter-spacing:-.01em } .badges{ margin-top:3.5rem; display:grid; grid-template-columns:repeat(2,1fr); column-gap:2rem; row-gap:2.5rem } .badges strong{ display:block; font-size:1.25rem; font-weight:600; letter-spacing:-.01em; color:var(--accent-lt) } .badges span{ display:block; margin-top:.75rem; font-size:.875rem; color:rgba(255,255,255,.55) } .quotes{ margin-top:3.5rem; display:grid; grid-template-columns:1fr; gap:2rem; border-top:1px solid rgba(255,255,255,.1); padding-top:3rem } .quotes blockquote{ font-size:.95rem; line-height:1.7; color:rgba(255,255,255,.8) } .quotes figcaption{ margin-top:1rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.14em; color:var(--accent-bright) } @media (min-width:640px){ .trust .wrap{ padding-inline:2rem } .panel{ padding:4rem 2rem } .panel h2{ font-size:2.25rem } } @media (min-width:768px){ .panel{ padding-inline:4rem } .quotes{ grid-template-columns:1fr 1fr; gap:3rem } } @media (min-width:1024px){ .trust .wrap{ padding-bottom:7rem } .badges{ grid-template-columns:repeat(4,1fr) } } /* ============================ FOOTER ============================ */ footer{ position:relative; overflow:hidden; border-radius:2rem 2rem 0 0; background:#0a0a0a; color:#fff } footer .wrap{ position:relative; z-index:10; padding:5rem 1.25rem 2.5rem } .fcta{ display:flex; flex-direction:column; gap:2rem; border-bottom:1px solid rgba(255,255,255,.1); padding-bottom:4rem } .fcta h2{ max-width:16ch; font-size:2.25rem; font-weight:600; letter-spacing:-.02em } .fcols{ display:grid; grid-template-columns:1fr; gap:3rem; padding-block:4rem } .fcols h3{ font-size:.75rem; text-transform:uppercase; letter-spacing:.025em; color:rgba(255,255,255,.4) } .fcols ul{ margin-top:1rem; display:flex; flex-direction:column; gap:.6rem; font-size:.875rem } .fbrand .nm{ display:flex; align-items:center; gap:.5rem; font-size:1.125rem; font-weight:600 } .fbrand img.brand-mark{ height:4rem; width:auto; display:block } .fbrand p{ margin-top:1rem; max-width:22rem; font-size:.875rem; color:rgba(255,255,255,.55) } .fbrand .tel{ display:inline-block; margin-top:1.25rem; font-size:1.5rem; font-weight:600; color:var(--accent-lt) } .legal{ display:flex; flex-direction:column; align-items:center; justify-content:space-between; gap:1rem; border-top:1px solid rgba(255,255,255,.1); padding-top:2rem; font-size:.75rem; color:rgba(255,255,255,.45) } .legal .r{ display:flex; gap:1.5rem } .legal .ver{ opacity:.6; font-variant-numeric:tabular-nums } #footMark{ position:absolute; inset-inline:0; bottom:-1.5rem; z-index:0; text-align:center; pointer-events:none; user-select:none; font-weight:700; line-height:1; font-size:var(--text-watermark); color:rgba(255,255,255,.05) } @media (min-width:640px){ footer .wrap{ padding-inline:2rem } .fcta h2{ font-size:3rem } .legal{ flex-direction:row } } @media (min-width:768px){ .fcols{ grid-template-columns:repeat(2,1fr) } .fcta h2{ font-size:3.75rem } } @media (min-width:1024px){ footer .wrap{ padding-top:6rem } .fcta{ flex-direction:row; align-items:flex-end; justify-content:space-between } .fcols{ grid-template-columns:repeat(4,1fr) } } /* ============================ NAV OVERLAY ============================ */ #nav{ position:fixed; inset:0; z-index:115; display:none; flex-direction:column; background:#0a0a0a; color:#fff; opacity:0; transition:opacity .5s cubic-bezier(.22,1,.36,1) } #nav.show{ display:flex } #nav.on{ opacity:1 } #nav .top{ display:flex; align-items:center; justify-content:space-between; padding:1.25rem } #nav .bnd{ display:flex; align-items:center; gap:.5rem; font-size:1.125rem; font-weight:600 } #nav .bnd img.brand-mark{ height:4rem; width:auto; display:block } #closeNav{ display:inline-flex; align-items:center; gap:.5rem; border:1px solid rgba(255,255,255,.15); border-radius:.875rem; padding:.5rem 1rem; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:rgba(255,255,255,.7); transition:border-color .3s, color .3s } #closeNav:hover{ border-color:rgba(255,255,255,.4); color:#fff } #nav .mid{ flex:1; min-height:0; display:flex; flex-direction:column; justify-content:center; overflow-y:auto; -webkit-overflow-scrolling:touch; padding-block:.5rem } #nav ul{ display:flex; flex-direction:column; gap:.25rem } #nav .item{ display:flex; gap:1rem; width:100%; padding-block:.5rem; text-align:left; font-size:2.25rem; font-weight:600; letter-spacing:-.02em; transform:translateY(1rem); opacity:0; transition:all .5s ease-out } #nav.on .item{ transform:none; opacity:1 } #nav .item .ix{ font-size:1rem; font-weight:400; color:rgba(255,255,255,.3); transition:color .3s } #nav .item .lb{ color:rgba(255,255,255,.7); transition:color .3s } #nav .item:hover .ix{ color:var(--accent-bright) } #nav .item:hover .lb{ color:#fff } #nav button.item{ background:none; border:0; font-family:inherit; cursor:pointer; align-items:center } #nav .chev{ margin-left:auto; font-size:1.1rem; color:rgba(255,255,255,.4); transition:transform .3s ease } #nav .hasKids.open .chev{ transform:rotate(180deg) } #nav .kids{ display:none; flex-direction:column; gap:0; padding:.15rem 0 .5rem 3rem } #nav .hasKids.open .kids{ display:flex } #nav .kids a{ display:block; padding-block:.4rem; font-size:1.05rem; font-weight:500; color:rgba(255,255,255,.55); transition:color .2s } #nav .kids a:hover{ color:#fff } #nav .btm{ display:flex; flex-direction:column; gap:.75rem; border-top:1px solid rgba(255,255,255,.1); padding:1.5rem 1.25rem; font-size:.75rem; text-transform:uppercase; letter-spacing:.025em; color:rgba(255,255,255,.45) } #nav .btm button{ color:rgba(255,255,255,.7); transition:color .3s } #nav .btm button:hover{ color:#fff; text-decoration:underline } @media (min-width:640px){ #nav .top{ padding:1.5rem 2rem } #nav .item{ font-size:3.75rem } #nav .kids{ padding-left:4.75rem } #nav .kids a{ font-size:1.5rem } #nav .btm{ flex-direction:row; justify-content:space-between; padding-inline:2rem } } /* ============================ MODAL ============================ */ #modal{ position:fixed; inset:0; z-index:110; display:none; align-items:flex-end; justify-content:center; padding:1rem; background:rgba(233,239,240,.35); backdrop-filter:blur(16px); opacity:0; transition:opacity .4s } #modal.show{ display:flex } #modal.on{ opacity:1 } #modal .pnl{ position:relative; width:100%; max-width:32rem; overflow:hidden; border-radius:1.5rem; background-color:#FBF5EA; background-image:linear-gradient(160deg,#FFFDF8,#FAF3E5); padding:1.5rem; border:1px solid var(--glass-brd); box-shadow:0 30px 60px -12px rgba(40,26,8,.4), inset 0 1px 0 rgba(255,255,255,.9); transform:translateY(28px); transition:transform .5s cubic-bezier(.22,1,.36,1) } #modal.on .pnl{ transform:none } #closeModal{ position:absolute; right:1rem; top:1rem; width:2.25rem; height:2.25rem; display:grid; place-items:center; border-radius:9999px; background:var(--surface); color:rgba(233,239,240,.6); transition:.2s } #closeModal:hover{ background:var(--surface-2); color:#eef3f3 } #modal .head{ margin-bottom:1.5rem; display:flex; flex-direction:column; gap:.375rem } #modal .kick{ display:inline-flex; align-items:center; gap:.5rem; font-size:.875rem; font-weight:500; color:rgba(233,239,240,.6) } #modal .kick::before{ content:""; width:.375rem; height:.375rem; border-radius:9999px; background:var(--accent) } #modal h2{ font-size:1.5rem; font-weight:600; letter-spacing:-.01em } #modal form{ display:flex; flex-direction:column; gap:1rem } #modal label{ display:flex; flex-direction:column; gap:.4rem } #modal .cap{ font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.025em; color:rgba(233,239,240,.5) } #modal input,#modal select,#modal textarea{ width:100%; border:1px solid var(--line); background:rgba(241,240,238,.5); border-radius:.875rem; padding:.75rem 1rem; font-size:.875rem; font-family:inherit; outline:none; transition:.2s } #modal textarea{ resize:none } #modal input:focus,#modal select:focus,#modal textarea:focus{ border-color:rgba(233,239,240,.3); background:var(--surface) } #modal .err{ font-size:.75rem; color:#b4402f } #modal .btm{ margin-top:.5rem; display:flex; align-items:center; justify-content:space-between; gap:1rem } #modal .note{ font-size:.75rem; color:rgba(233,239,240,.45) } #modal .done{ display:none; flex-direction:column; align-items:center; text-align:center; padding-block:2rem; gap:1rem } #modal .done .mark{ width:3.5rem; height:3.5rem; display:grid; place-items:center; border-radius:9999px; background:#0a0a0a; color:var(--accent-bright); font-size:1.5rem } #modal .done p{ max-width:34ch; font-size:.875rem; color:rgba(233,239,240,.6) } #modal .setup{ margin-top:1rem; border:1px dashed rgba(138,110,47,.5); border-radius:.875rem; padding:.75rem .9rem; font-size:.72rem; line-height:1.5; color:rgba(233,239,240,.55) } #modal .setup code{ font-family:ui-monospace,Menlo,monospace; color:var(--accent) } @media (min-width:640px){ #modal{ align-items:center } #modal .pnl{ padding:2rem } #modal h2{ font-size:1.875rem } } /* ============================ SHARED SECTION BITS ============================ */ .sec{ background:transparent } .sec .wrap{ padding:5rem 1.25rem } .sec h2.big{ margin:1.25rem 0 1.5rem; max-width:18ch; font-size:2.25rem; font-weight:600; letter-spacing:-.02em } .sec .lede{ max-width:62ch; font-size:1rem; color:rgba(233,239,240,.6) } .dark-sec{ background:#0a0a0a; color:#fff; border-radius:2rem; overflow:hidden } .dark-sec .lede{ color:rgba(255,255,255,.78) } .dark-sec .eyebrow{ color:rgba(255,255,255,.7) } .dark-sec .eyebrow::before{ background:rgba(255,255,255,.6) } @media (min-width:640px){ .sec .wrap{ padding-inline:2rem } .sec h2.big{ font-size:3rem } } @media (min-width:1024px){ .sec .wrap{ padding-block:7rem } } /* wide cinematic plate */ /* margin-block only — a shorthand here would reset .shell's margin-inline:auto and drop the hero image hard against the left edge on wide screens. */ .plate{ position:relative; margin-block:2.5rem; border-radius:2rem; overflow:hidden; background:#0a0a0a } .plate img,.plate video{ width:100%; aspect-ratio:21/9; object-fit:cover; display:block } .plate video{ position:absolute; inset:0; height:100%; opacity:0; transition:opacity .8s ease } .plate video.on{ opacity:1 } .plate figcaption{ position:absolute; left:0; right:0; bottom:0; padding:1.5rem; z-index:2; font-size:.75rem; text-transform:uppercase; letter-spacing:.16em; color:var(--accent-lt); background:linear-gradient(180deg,transparent,rgba(10,10,10,.85)) } @media (max-width:640px){ .plate img,.plate video{ aspect-ratio:16/10 } } /* numbered lists */ .steps{ counter-reset:s; display:grid; gap:1px; background:rgba(255,255,255,.12); border-radius:1.25rem; overflow:hidden; margin-top:2.5rem } .steps li{ counter-increment:s; background:#0a0a0a; padding:1.5rem 1.5rem 1.5rem 4.25rem; position:relative } .steps li::before{ content:"0" counter(s); position:absolute; left:1.5rem; top:1.6rem; font-size:.75rem; letter-spacing:.1em; color:var(--accent-bright) } /* These sit on a #0a0a0a card. h4 declared no colour, so it inherited the page's #111 and the headings were effectively invisible. */ .steps h4{ font-size:1.05rem; font-weight:600; margin-bottom:.4rem; color:#fff } .steps p{ font-size:.9rem; color:rgba(255,255,255,.78) } .proc{ counter-reset:pp; display:grid; gap:2rem; margin-top:3rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr)) } .proc li{ counter-increment:pp; padding-top:1.25rem; border-top:2px solid var(--accent) } .proc li::before{ content:"Step " counter(pp); display:block; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:.65rem } .proc h4{ font-size:1.15rem; font-weight:600; margin-bottom:.45rem } .proc p{ font-size:.9rem; color:rgba(233,239,240,.6) } .dark-sec .proc li{ border-top-color:var(--accent-bright) } .dark-sec .proc li::before{ color:var(--accent-bright) } .dark-sec .proc p{ color:rgba(255,255,255,.78) } /* split */ .split{ display:grid; gap:2.5rem; grid-template-columns:1fr; align-items:center; margin-top:2.5rem } .split p{ font-size:.95rem; color:rgba(233,239,240,.6) } .split p+p{ margin-top:1rem } .dark-sec .split p{ color:rgba(255,255,255,.78) } .split h3{ font-size:1.5rem; font-weight:600; letter-spacing:-.01em; margin-bottom:.9rem } .split figure{ border-radius:1.25rem; overflow:hidden; background:#15171b } .split figure img{ width:100%; aspect-ratio:16/10; object-fit:cover } @media (min-width:900px){ .split{ grid-template-columns:1fr 1fr } } /* before / after compare */ .cmp{ position:relative } .cmp .stage{ position:relative; overflow:hidden; border-radius:1.25rem; aspect-ratio:4/3; background:#15171b; cursor:ew-resize; touch-action:pan-y } .cmp .stage img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover } .cmp .aft{ position:absolute; inset:0; width:50%; overflow:hidden } .cmp .aft img{ width:auto; min-width:100%; } .cmp .hdl{ position:absolute; top:0; bottom:0; left:50%; width:2px; background:var(--accent-bright); box-shadow:0 0 22px rgba(201,162,75,.7); pointer-events:none } .cmp .grip{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); width:2.5rem; height:2.5rem; border-radius:9999px; border:1px solid var(--accent-bright); background:rgba(10,10,10,.8); display:grid; place-items:center; color:var(--accent-bright); font-size:.8rem } .cmp .tag{ position:absolute; bottom:.75rem; font-size:.6rem; letter-spacing:.18em; text-transform:uppercase; background:rgba(10,10,10,.7); color:var(--accent-lt); padding:.3rem .55rem; border-radius:2px; pointer-events:none } .cmp .tag.l{ left:.75rem } .cmp .tag.r{ right:.75rem } .cmp input[type=range]{ width:100%; margin-top:.9rem; -webkit-appearance:none; appearance:none; background:transparent; cursor:pointer } .cmp input[type=range]::-webkit-slider-runnable-track{ height:2px; background:rgba(201,162,75,.4) } .cmp input[type=range]::-moz-range-track{ height:2px; background:rgba(201,162,75,.4) } .cmp input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:18px; height:18px; border-radius:50%; background:var(--accent-bright); border:2px solid #0a0a0a; margin-top:-8px } .cmp input[type=range]::-moz-range-thumb{ width:18px; height:18px; border-radius:50%; background:var(--accent-bright); border:2px solid #0a0a0a } /* ppf film svg */ .film{ border-radius:1.25rem; padding:1.25rem; background:#0f1216 } .film svg{ width:100%; height:auto } .film .pct{ margin-top:.6rem; font-size:.7rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent-bright) } .checks{ display:grid; gap:.6rem; margin:1.25rem 0 } .checks li{ position:relative; padding-left:1.6rem; font-size:.92rem; color:rgba(233,239,240,.6) } .dark-sec .checks li{ color:rgba(255,255,255,.8) } .checks li::before{ content:""; position:absolute; left:0; top:.55em; width:8px; height:8px; border-right:1.5px solid var(--accent-bright); border-bottom:1.5px solid var(--accent-bright); transform:rotate(45deg) translateY(-3px) } .fine{ font-size:.8rem; color:rgba(233,239,240,.45); margin-top:1rem; line-height:1.55 } .dark-sec .fine{ color:rgba(255,255,255,.62) } /* panels (marine / rv) */ .panels{ display:grid; gap:1.5rem; grid-template-columns:1fr; margin-top:2.5rem } .panels article{ border-radius:1.5rem; overflow:hidden; background:var(--surface) } .panels img{ width:100%; aspect-ratio:16/10; object-fit:cover } .panels .bd{ padding:1.5rem } .panels h3{ font-size:1.35rem; font-weight:600; margin-bottom:.5rem } .panels p{ font-size:.9rem; color:rgba(233,239,240,.6) } @media (min-width:768px){ .panels{ grid-template-columns:1fr 1fr } } /* plans */ .plans{ display:grid; gap:1.5rem; grid-template-columns:1fr; margin-top:2.5rem } .plans article{ border:1px solid var(--line); border-radius:1.5rem; padding:2rem; display:flex; flex-direction:column; gap:.9rem; align-items:flex-start } .plans h3{ font-size:1.35rem; font-weight:600 } .plans p{ font-size:.9rem; color:rgba(233,239,240,.6) } .plans .pill{ margin-top:auto } @media (min-width:768px){ .plans{ grid-template-columns:1fr 1fr } } /* gallery */ .chips{ display:flex; flex-wrap:wrap; gap:.5rem; margin:2rem 0 } .chips button{ font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; padding:.6rem 1rem; border-radius:9999px; border:1px solid var(--line); color:rgba(233,239,240,.55); transition:.25s } .chips button:hover{ color:#eef3f3; border-color:var(--accent) } .chips button.on{ background:#0a0a0a; border-color:#0a0a0a; color:#fff } .shots{ display:grid; gap:.9rem; grid-template-columns:repeat(auto-fill,minmax(min(100%,15rem),1fr)) } .shots li[hidden]{ display:none } .shots button{ display:block; width:100%; border-radius:1rem; overflow:hidden; background:#15171b; position:relative; cursor:zoom-in } .shots img{ width:100%; aspect-ratio:4/3; object-fit:cover; transition:transform .6s cubic-bezier(.2,.8,.2,1) } .shots button:hover img{ transform:scale(1.06) } #lb{ position:fixed; inset:0; z-index:118; display:none; align-items:center; justify-content:center; gap:1rem; padding:clamp(1rem,4vw,3rem); background:rgba(6,7,9,.96); backdrop-filter:blur(6px) } #lb.show{ display:flex } #lb img{ max-height:80svh; max-width:100%; width:auto; border-radius:1rem } #lb figcaption{ margin-top:.9rem; font-size:.85rem; color:rgba(255,255,255,.6); text-align:center } #lb .nv,#lb .cl{ width:3rem; height:3rem; border-radius:9999px; border:1px solid rgba(255,255,255,.25); color:#fff; display:grid; place-items:center; font-size:1.4rem; flex:0 0 auto; transition:.2s } #lb .nv:hover,#lb .cl:hover{ background:rgba(255,255,255,.12) } #lb .cl{ position:absolute; top:1rem; right:1rem } @media (max-width:640px){ #lb .nv{ position:absolute; bottom:1.2rem } #lb .nv.p{ left:24% } #lb .nv.n{ right:24% } } /* contact */ #contact .grid{ display:grid; gap:3rem; grid-template-columns:1fr; align-items:start } #contact .tel{ display:inline-block; margin:1.25rem 0; font-size:2.25rem; font-weight:700; letter-spacing:-.02em; color:var(--accent) } #contact dl{ display:grid; gap:1rem; margin-top:1rem } #contact dt{ font-size:.68rem; letter-spacing:.2em; text-transform:uppercase; color:var(--accent); margin-bottom:.3rem } #contact dd{ margin:0; font-size:.92rem; color:rgba(233,239,240,.6) } @media (min-width:900px){ #contact .grid{ grid-template-columns:1fr 1fr } } /* ppf gloss demo */ .film{ cursor:crosshair } .film svg{ display:block } #lightBare,#lightFilm,#lightCore{ transition:cx .10s linear, cy .10s linear } #lblBare,#lblFilm{ transition:opacity .5s ease; font-weight:600 } .film .pct #fHint{ color:rgba(255,255,255,.35); text-transform:none; letter-spacing:.06em } @media (prefers-reduced-motion:reduce){ #lightBare,#lightFilm,#lightCore{ transition:none } } /* ============================ MULTI-PAGE ADDITIONS ============================ */ #header{ position:sticky; top:0; background:rgba(244,240,231,.7); -webkit-backdrop-filter:blur(16px) saturate(1.6); backdrop-filter:blur(16px) saturate(1.6); border-bottom:1px solid transparent; transition:background-color .3s, border-color .3s } #header.stuck{ background:rgba(250,244,231,.92); border-bottom-color:var(--glass-brd) } #header nav.main ul{ align-items:center } #header nav.main a{ font-size:.85rem; font-weight:500; color:rgba(233,239,240,.65); transition:color .2s; display:inline-flex; align-items:center; gap:.25rem; padding:.4rem 0 } #header nav.main a:hover,#header nav.main a.cur{ color:#eef3f3 } #header nav.main a.cur{ box-shadow:inset 0 -1px 0 var(--accent) } .hasSub{ position:relative } .sub{ position:absolute; left:-1rem; top:100%; min-width:15rem; padding:.65rem 0; background:var(--surface); border:1px solid var(--line); border-radius:.875rem; box-shadow:0 20px 50px -24px rgba(0,0,0,.35); opacity:0; visibility:hidden; transform:translateY(6px); transition:.22s ease; z-index:20 } .hasSub:hover .sub,.hasSub:focus-within .sub{ opacity:1; visibility:visible; transform:none } .sub a{ display:block !important; padding:.55rem 1rem !important; font-size:.85rem } .sub a:hover{ background:var(--surface) } .hdr-tel{ display:none; flex-direction:column; gap:0; text-decoration:none } .hdr-tel .lbl{ font-size:.6rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(233,239,240,.45) } .hdr-tel .t{ font-weight:600; font-size:.95rem; color:#eef3f3 } .hdr-book{ display:none } .hdr-acct{ display:inline-flex; align-items:center; gap:.4rem; text-decoration:none; font-size:.75rem; font-weight:500; text-transform:uppercase; letter-spacing:.05em; color:var(--ink); padding:.5rem .8rem; border:1px solid var(--glass-brd); background-color:var(--glass-fallback); background-image:var(--glass-bg); -webkit-backdrop-filter:blur(12px) saturate(1.6); backdrop-filter:blur(12px) saturate(1.6); box-shadow:var(--glass-shadow); border-radius:.9rem; transition:background-color .3s, transform .35s cubic-bezier(.2,.8,.2,1) } .hdr-acct:hover{ transform:scale(1.04) } .hdr-acct svg{ font-size:.95rem; opacity:.7 } /* mobile: icon only, sized to sit beside the menu button */ @media (max-width:767px){ .hdr-acct{ padding:.5rem .55rem } .hdr-acct > span{ display:none } .hdr-acct svg{ font-size:1.05rem; opacity:.85 } } @media (min-width:768px){ .hdr-tel{ display:flex } } @media (min-width:1024px){ .hdr-book{ display:inline-block } } .crumbs{ display:flex; flex-wrap:wrap; gap:.5rem; align-items:center; padding:1.25rem; font-size:.75rem; color:rgba(233,239,240,.45) } .crumbs a{ color:rgba(233,239,240,.6) } .crumbs a:hover{ color:var(--accent); text-decoration:underline } .crumbs em{ font-style:normal; opacity:.4 } @media (min-width:640px){ .crumbs{ padding-inline:2rem } } .phero{ padding:2rem 1.25rem 3rem } .phero.narrow .shell{ max-width:52rem } .phero h1{ font-size:2.25rem; font-weight:700; letter-spacing:-.03em; line-height:1.02; margin:.75rem 0 1.25rem } .phero .lede{ max-width:60ch; font-size:1.05rem; color:rgba(233,239,240,.6) } .phero .hero-cta{ margin-top:1.75rem } @media (min-width:640px){ .phero{ padding-inline:2rem } .phero h1{ font-size:3.25rem } } @media (min-width:1024px){ .phero h1{ font-size:4rem } } .prose .blk{ max-width:68ch; margin-bottom:2.25rem } .prose h2{ font-size:1.6rem; font-weight:600; letter-spacing:-.015em; margin-bottom:.7rem } .prose h3{ font-size:1.3rem; font-weight:600; letter-spacing:-.01em; margin-bottom:.6rem } .prose p{ color:rgba(233,239,240,.62); font-size:1rem; line-height:1.72 } .prose strong{ color:#eef3f3; font-weight:600 } .narrow-wrap{ max-width:56rem } .prices{ display:grid; gap:1.25rem; grid-template-columns:1fr; margin:2.5rem 0 1rem } @media (min-width:700px){ .prices{ grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr)) } } .pcard{ border:1px solid var(--line); border-radius:1.25rem; padding:1.75rem; display:flex; flex-direction:column; gap:.6rem; align-items:flex-start; background:var(--surface) } .pcard h3{ font-size:1.15rem; font-weight:600 } .pcard .amt{ font-size:1.9rem; font-weight:700; letter-spacing:-.02em; color:var(--accent) } .pcard .amt em{ font-style:normal; font-size:.9rem; font-weight:500; color:rgba(233,239,240,.5) } .pcard p{ font-size:.9rem; color:rgba(233,239,240,.6) } .pcard .pill{ margin-top:auto; padding-top:.5rem } .quoteonly{ margin-top:1.5rem; padding:1.25rem 1.5rem; border-left:3px solid var(--accent); background:var(--surface); border-radius:0 .875rem .875rem 0; font-size:.95rem; color:rgba(233,239,240,.7) } .caveat{ border-left:3px solid var(--line); padding-left:1rem } .rel-h{ font-size:1.4rem; font-weight:600; letter-spacing:-.015em; margin-bottom:1.5rem } .rcards{ display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,16rem),1fr)) } .rcard{ position:relative; display:block; min-height:15rem; border-radius:1.5rem; overflow:hidden; background:#0a0a0a; transition:transform .45s cubic-bezier(.2,.8,.2,1) } .rcard.tall{ min-height:19rem } .rcard:hover{ transform:translateY(-6px) } .rcard img{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:.55; transition:transform 1s cubic-bezier(.2,.8,.2,1), opacity .5s } .rcard:hover img{ transform:scale(1.06); opacity:.68 } .rcard .veil{ position:absolute; inset:0; background:linear-gradient(180deg,rgba(10,10,10,.25),rgba(10,10,10,.9)) } .rc-b{ position:absolute; left:1.35rem; right:1.35rem; bottom:1.25rem; z-index:2; display:flex; align-items:center; gap:.6rem; flex-wrap:wrap; color:#fff } .rc-b strong{ font-size:1.2rem; font-weight:600; letter-spacing:-.01em; flex:1 } .rc-b em{ font-style:normal; width:2rem; height:2rem; display:grid; place-items:center; border-radius:9999px; background:rgba(255,255,255,.14); font-size:.85rem; transition:transform .4s cubic-bezier(.2,.8,.2,1) } .rcard:hover .rc-b em{ transform:rotate(45deg) } .rc-d{ flex-basis:100%; font-size:.82rem; color:rgba(255,255,255,.6); line-height:1.5 } .acards{ display:grid; gap:1rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,18rem),1fr)) } .acard{ border:1px solid var(--line); border-radius:1.25rem; padding:1.5rem; display:flex; flex-direction:column; gap:.4rem; transition:.25s; position:relative } .acard:hover{ border-color:var(--accent); background:var(--surface) } .acard strong{ font-size:1.15rem; font-weight:600; padding-right:2.5rem } .acard span{ font-size:.85rem; color:rgba(233,239,240,.55); line-height:1.5 } .acard em{ position:absolute; right:1.25rem; top:1.35rem; font-style:normal; color:var(--accent); transition:transform .35s cubic-bezier(.2,.8,.2,1) } .acard:hover em{ transform:translate(2px,-2px) } .arealinks{ display:flex; flex-wrap:wrap; gap:.6rem } .arealinks a{ border:1px solid var(--line); border-radius:9999px; padding:.6rem 1.1rem; font-size:.85rem; color:rgba(233,239,240,.65); transition:.22s } .arealinks a:hover{ border-color:var(--accent); color:#eef3f3; background:var(--surface) } .arealinks.big a{ font-size:.95rem; padding:.75rem 1.35rem } .areastrip{ font-size:.95rem; color:rgba(233,239,240,.6); line-height:1.9 } .areastrip a{ color:var(--accent); text-decoration:underline; text-underline-offset:3px } .big-checks li{ font-size:1rem; padding-left:1.8rem; margin-bottom:.55rem } .faqsec{ background:var(--surface) } .faqs{ margin-top:2rem; border-top:1px solid var(--line); max-width:64rem } .faq{ border-bottom:1px solid var(--line) } .faq summary{ cursor:pointer; list-style:none; padding:1.35rem 2.5rem 1.35rem 0; position:relative; font-size:1.05rem; font-weight:600; letter-spacing:-.01em } .faq summary::-webkit-details-marker{ display:none } .faq summary::after{ content:"+"; position:absolute; right:.5rem; top:1.2rem; font-size:1.4rem; font-weight:400; color:var(--accent); transition:transform .25s } .faq[open] summary::after{ transform:rotate(45deg) } .faq div{ padding:0 2.5rem 1.5rem 0 } .faq p{ color:rgba(233,239,240,.62); line-height:1.72 } .ctaband{ background:#0a0a0a; color:#fff; padding:clamp(3rem,7vw,5rem) 1.25rem } .ctaband h2{ font-size:2rem; font-weight:700; letter-spacing:-.025em } .ctaband p{ margin-top:.75rem; color:rgba(255,255,255,.6); max-width:48ch } .ctaband .row{ display:flex; flex-wrap:wrap; gap:.75rem; margin-top:2rem } .pill.outline-l>span{ border:1px solid rgba(255,255,255,.35); color:#fff; padding:.875rem 1.75rem; border-radius:9999px; display:inline-flex; align-items:center } .pill.outline-l:hover>span{ border-color:#fff; background:rgba(255,255,255,.08) } @media (min-width:640px){ .ctaband{ padding-inline:2rem } .ctaband h2{ font-size:2.6rem } } .calcsec{ background:var(--surface) } .calc{ display:grid; gap:1.5rem; grid-template-columns:1fr; margin-top:2.5rem; border:1px solid var(--line); border-radius:1.5rem; background:var(--surface); padding:1.75rem } .calc-in{ display:grid; gap:1rem } .calc label{ display:flex; flex-direction:column; gap:.4rem } /* Same trap as the wizard: display:flex above outranks the UA rule for the hidden attribute, so conditional fields showed no matter what the JS set. */ .calc [hidden]{ display:none !important } .calc label.calc-check{ flex-direction:row; align-items:flex-start; gap:.6rem; font-size:.9rem; color:rgba(233,239,240,.75); line-height:1.5; cursor:pointer } .calc label.calc-check input{ width:1.05rem; height:1.05rem; margin-top:.12rem; flex:0 0 auto; accent-color:var(--accent) } .calc .cap{ font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:rgba(233,239,240,.5); font-weight:500 } .calc select{ width:100%; border:1px solid var(--line); background:var(--surface); border-radius:.875rem; padding:.8rem 1rem; font-size:.95rem; font-family:inherit; color:#eef3f3 } .calc-out{ border-left:0; border-top:1px solid var(--line); padding-top:1.5rem } .calc-amt{ font-size:2.6rem; font-weight:700; letter-spacing:-.03em; color:var(--accent); margin:.35rem 0 .4rem } .calc-desc{ font-size:.92rem; color:rgba(233,239,240,.75); line-height:1.55; margin:0 0 1rem; max-width:40ch } .calc-desc:empty{ display:none } .calc-note{ font-size:.88rem; color:rgba(233,239,240,.55); max-width:34ch; line-height:1.6 } .calc .row{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.5rem } @media (min-width:860px){ .calc{ grid-template-columns:1.1fr 1fr; padding:2.25rem } .calc-out{ border-top:0; border-left:1px solid var(--line); padding:0 0 0 2.25rem } } /* ============================ BOOKING WIZARD ============================ */ .wiz{ margin-top:2rem; border:1px solid var(--line); border-radius:1.5rem; background:var(--surface); padding:1.5rem; position:relative; overflow:hidden } @media (min-width:720px){ .wiz{ padding:2.25rem } } .wiz-steps{ display:flex; gap:.5rem; margin-bottom:1.75rem; font-size:.7rem; font-weight:500; letter-spacing:.1em; text-transform:uppercase; color:rgba(233,239,240,.4) } .wiz-steps li{ display:flex; align-items:center; gap:.5rem } .wiz-steps li::after{ content:''; width:1.25rem; height:1px; background:var(--line) } .wiz-steps li:last-child::after{ display:none } .wiz-steps li.on{ color:var(--accent) } .wiz-steps li.done{ color:rgba(233,239,240,.6) } .wiz-steps b{ display:inline-grid; place-items:center; width:1.35rem; height:1.35rem; border-radius:9999px; border:1px solid currentColor; font-size:.72rem; font-weight:600 } .wiz-steps li.on b{ background:var(--accent); border-color:var(--accent); color:#14100b } .wiz-steps li.done b{ background:rgba(233,239,240,.6); border-color:transparent; color:#fff } .wiz-panel[hidden]{ display:none } .wiz-panel h2{ font-size:1.4rem; font-weight:600; letter-spacing:-.01em; margin-bottom:.4rem } .wiz-panel .wiz-sub{ font-size:.9rem; color:rgba(233,239,240,.55); max-width:46ch; margin-bottom:1.5rem; line-height:1.6 } /* step 1 — category cards */ .wiz-cats{ display:grid; gap:.9rem; grid-template-columns:1fr 1fr } @media (min-width:720px){ .wiz-cats{ grid-template-columns:1fr 1fr 1fr 1fr } } .wiz-cat{ position:relative; display:flex; flex-direction:column; align-items:flex-start; gap:.55rem; text-align:left; border:1px solid rgba(255,255,255,.16); border-radius:1.125rem; padding:1rem 2.4rem 1rem 1rem; background:var(--surface-2); transition:border-color .2s, background .2s, transform .2s } .wiz-cat:hover{ border-color:var(--subtle) } .wiz-cat svg{ width:1.75rem; height:1.75rem; color:var(--accent-bright) } .wiz-cat.on{ border-color:var(--accent); background:var(--surface-2); box-shadow:inset 0 0 0 1px var(--accent) } .wiz-cat strong{ font-size:.95rem; font-weight:600 } .wiz-cat span{ font-size:.76rem; color:rgba(233,239,240,.7); line-height:1.4 } /* Tick sits in its own gutter on the right — it used to be absolutely positioned with no containing block and landed on top of the icon. */ .wiz-cat .tick{ position:absolute; top:.85rem; right:.85rem; width:1.05rem; height:1.05rem; display:grid; place-items:center; opacity:0; transform:scale(.6); transition:opacity .18s ease, transform .18s cubic-bezier(.2,.9,.3,1.4) } .wiz-cat .tick svg{ width:100%; height:100% } .wiz-cat.on .tick{ opacity:1; transform:none; color:var(--accent) } /* morph loader */ .wiz-load{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:1.5rem; min-height:16rem; padding:2rem 0 } .wiz-morph{ position:relative; width:5rem; height:5rem } .wiz-morph svg{ position:absolute; inset:0; width:100%; height:100%; color:var(--accent); opacity:0; transform:scale(.8) rotate(-8deg); transition:opacity .6s ease, transform .6s ease } .wiz-morph svg.on{ opacity:1; transform:none } .wiz-load p{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(233,239,240,.4) } .wiz-load .bar{ width:min(16rem,60vw); height:2px; background:var(--line); overflow:hidden; border-radius:2px } .wiz-load .bar i{ display:block; height:100%; width:40%; background:var(--accent); animation:wizslide 1.1s ease-in-out infinite } @keyframes wizslide{ 0%{ transform:translateX(-100%) } 100%{ transform:translateX(350%) } } @media (prefers-reduced-motion:reduce){ .wiz-morph svg{ opacity:1; transform:none; position:static; width:1.75rem; height:1.75rem; display:inline-block } .wiz-morph{ width:auto; height:auto; display:flex; gap:.75rem } .wiz-load .bar i{ animation:none; width:100% } } /* step 3 — customize fieldsets */ .wiz-fs{ border:1px solid var(--line); border-radius:1.125rem; padding:1.1rem; margin-bottom:1rem } .wiz-fs > legend, .wiz-fs > .fs-h{ font-size:.9rem; font-weight:600; padding:0 .35rem; margin-left:-.35rem; display:flex; align-items:center; gap:.5rem } .wiz-fs svg{ width:1.1rem; height:1.1rem; color:var(--accent) } .wiz-grid{ display:grid; gap:.85rem; margin-top:.9rem } @media (min-width:640px){ .wiz-grid{ grid-template-columns:1fr 1fr } } .wiz label{ display:flex; flex-direction:column; gap:.35rem; font-size:.8rem } /* display:flex above outranks the UA rule for [hidden], which is why every conditional field used to render regardless of what the wizard set. */ .wiz [hidden]{ display:none !important } .wiz label.wiz-check{ flex-direction:row; align-items:flex-start; gap:.55rem; font-size:.85rem; color:rgba(233,239,240,.75); grid-column:1/-1; cursor:pointer } .wiz label.wiz-check input{ width:1rem; height:1rem; margin-top:.15rem; flex:0 0 auto; accent-color:var(--accent) } .wiz-avlist{ display:flex; flex-direction:column; gap:.1rem; margin-top:.9rem; border-top:1px solid var(--line) } .wiz-avlist .wiz-check{ grid-column:auto; padding:.6rem 0; border-bottom:1px solid var(--line); font-size:.84rem; align-items:center } /* step 4 — schedule */ .wiz-cal{ border:1px solid var(--line); border-radius:1rem; padding:1rem; background:var(--surface); margin-bottom:1.25rem; overflow:hidden } .wiz-cal-h{ display:flex; align-items:center; justify-content:space-between; margin-bottom:.75rem } .wiz-cal-h strong{ font-size:.95rem; font-weight:600 } .wiz-cal-nav{ width:2rem; height:2rem; display:grid; place-items:center; border:1px solid var(--line); border-radius:9999px; background:var(--surface); font-size:1.1rem; line-height:1; color:rgba(233,239,240,.7); cursor:pointer } .wiz-cal-nav:hover:not([disabled]){ border-color:var(--accent); color:#eef3f3 } .wiz-cal-nav[disabled]{ opacity:.3; cursor:default } .wiz-cal-dow{ display:grid; grid-template-columns:repeat(7,1fr); gap:.3rem; margin-bottom:.4rem } .wiz-cal-dow span{ text-align:center; font-size:.68rem; letter-spacing:.06em; text-transform:uppercase; color:rgba(233,239,240,.4); font-weight:600 } .wiz-cal-grid{ display:grid; grid-template-columns:repeat(7,1fr); gap:.3rem } .wiz-cal-x{ aspect-ratio:1 } /* Bigger, easier-to-tap day cells — was cramped at .85rem/.25rem gap, especially on mobile. */ .wiz-cal-d{ aspect-ratio:1; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.15rem; border:1px solid transparent; border-radius:.7rem; font:inherit; font-size:1rem; color:rgba(233,239,240,.35); background:none } .wiz-cal-d.open{ color:#eef3f3; background:var(--surface); border-color:var(--line); cursor:pointer } .wiz-cal-d.open:hover{ border-color:var(--accent) } .wiz-cal-d.open b{ font-weight:600 } .wiz-cal-d.open i{ font-style:normal; font-size:.66rem; font-weight:700; color:var(--accent); line-height:1 } .wiz-cal-d.none{ color:rgba(233,239,240,.28) } .wiz-cal-d.on{ border-color:var(--accent); background:var(--accent); color:#14100b; box-shadow:inset 0 0 0 1px var(--accent) } .wiz-cal-d.on i{ color:#14100b } .wiz-slotwrap{ margin-bottom:.25rem } .wiz-repeat{ margin:1rem 0 } .wiz-repeat .wiz-grid{ margin-top:.7rem } .wiz-slotday{ font-size:.8rem; font-weight:600; color:#eef3f3; margin-bottom:.6rem } .wiz-slots{ display:grid; gap:.5rem; grid-template-columns:repeat(auto-fill,minmax(5rem,1fr)) } .wiz-slot{ border:1px solid var(--line); border-radius:.7rem; padding:.6rem .3rem; font-size:.82rem; background:var(--surface); color:rgba(233,239,240,.75); text-align:center } .wiz-slot:hover{ border-color:var(--subtle) } .wiz-slot.on{ border-color:var(--accent); background:var(--accent); color:#14100b; font-weight:600 } /* step 5 — card */ .wiz-card{ min-height:5rem; margin:.5rem 0 .35rem; border:1px solid var(--line); border-radius:.75rem; padding:.9rem; background:var(--surface) } /* what a service includes, from the printed brochure */ .wiz-includes{ margin:.9rem 0 0; padding:.85rem 1rem; border-radius:.75rem; background:var(--surface); border:1px solid var(--line); list-style:none } .wiz-includes:empty{ display:none } .wiz-includes li{ position:relative; padding-left:1.1rem; font-size:.8rem; line-height:1.55; color:rgba(233,239,240,.68) } .wiz-includes li + li{ margin-top:.4rem } .wiz-includes li::before{ content:''; position:absolute; left:0; top:.55em; width:.4rem; height:.4rem; border-radius:50%; background:var(--accent); opacity:.55 } /* a standing caveat inside a fieldset (e.g. aviation condition pricing) */ .wiz-note{ margin-top:.9rem; padding:.7rem .9rem; border-left:3px solid var(--accent); border-radius:.25rem; background:rgba(201,162,75,.09); font-size:.8rem; line-height:1.55; color:rgba(233,239,240,.75) } /* ============================ ACCOUNT / MANAGEMENT ============================ */ .acct{ max-width:34rem; margin:1.5rem auto 0; border:1px solid var(--line); border-radius:1.5rem; background:var(--surface); padding:1.75rem } @media (min-width:720px){ .acct{ padding:2.25rem } } .acct-h{ font-size:1.6rem; font-weight:700; letter-spacing:-.02em; margin-bottom:.5rem } .acct-sub{ font-size:.92rem; color:rgba(233,239,240,.6); line-height:1.6; margin-bottom:1.5rem } .acct-sub strong{ color:#eef3f3; font-weight:600 } .acct-role{ display:inline-block; padding:.1rem .5rem; border-radius:9999px; background:var(--accent); color:#fff; font-size:.7rem; font-weight:600; letter-spacing:.06em; text-transform:uppercase } .acct-modes{ display:inline-flex; gap:.25rem; padding:.25rem; margin-bottom:1rem; border:1px solid var(--line); border-radius:9999px; background:var(--surface) } .acct-mode{ font:inherit; font-size:.82rem; font-weight:600; cursor:pointer; padding:.4rem 1.1rem; border:0; border-radius:9999px; background:none; color:rgba(233,239,240,.55) } /* Direction A left this as a literal near-black on #111 — against the dark surface it sits on now, the "active" tab barely read as selected. */ .acct-mode.on{ background:var(--accent); color:#14100b } .acct-field{ display:flex; flex-direction:column; gap:.35rem; margin-bottom:1.1rem } /* display:flex above outranks the UA rule for [hidden] (see the .wiz note) — restore it. */ .acct-field[hidden]{ display:none !important } .acct-check{ display:flex; flex-direction:row; align-items:flex-start; gap:.55rem; font-size:.9rem; color:var(--ink); margin-bottom:1.1rem; cursor:pointer } .acct-check input{ width:1.05rem; height:1.05rem; margin-top:.15rem; flex:0 0 auto; accent-color:var(--accent) } .acct-check[hidden]{ display:none !important } .acct-field .cap{ font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(233,239,240,.45); font-weight:500 } .acct-field input, .acct-field select, .acct-field textarea{ width:100%; border:1px solid var(--line); background:var(--surface); border-radius:.75rem; padding:.85rem 1rem; font-size:1rem; font-family:inherit; color:#eef3f3 } .acct-field input:focus, .acct-field select:focus, .acct-field textarea:focus{ border-color:var(--accent); background:var(--surface); outline:none } /* a full-width text-input treatment looks broken on a colour swatch/file picker */ .acct-field input[type=color]{ width:3.5rem; height:2.75rem; padding:.25rem; cursor:pointer } .acct-field input[type=file]{ padding:.6rem } .acct-code{ font-size:1.5rem !important; letter-spacing:.4em; text-align:center; font-variant-numeric:tabular-nums } .acct-nav{ display:flex; flex-wrap:wrap; gap:.7rem; margin-top:1.25rem } .acct-nav .pill[disabled]{ opacity:.5; pointer-events:none } /* A transparent "ghost" button next to a solid gold CTA read as the weakest thing on the page — give it an actual fill so it reads as a real control. */ .acct-nav .pill.ghost>span{ background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.18); color:var(--ink); padding:.85rem 1.4rem } .acct-err{ margin-bottom:1.1rem; padding:.8rem 1rem; border-left:3px solid #b4402f; border-radius:.25rem; background:rgba(180,64,47,.07); font-size:.86rem; line-height:1.55; color:#8f3325 } .acct-fine{ margin-top:1rem; font-size:.78rem; color:rgba(233,239,240,.5); line-height:1.6 } .acct-preview-banner{ margin-bottom:1.25rem; padding:.8rem 1rem; border-left:3px solid var(--accent); border-radius:.25rem; background:rgba(224,190,109,.1); font-size:.86rem; line-height:1.55; color:var(--ink) } /* VIP — visual perk only for repeat customers (2+ completed jobs), no pricing logic anywhere in this. Gold treatment, restrained: a badge, a warmer heading, a soft gold edge on the existing card shapes. */ .acct-vip-badge{ display:inline-block; margin-left:.6rem; padding:.15rem .55rem; border-radius:9999px; background:linear-gradient(135deg,var(--accent-bright),var(--accent)); color:#14100b; font-size:.62rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; vertical-align:middle } .acct-vip-label{ color:var(--accent-bright) } .acct-vip .acct-h{ background:linear-gradient(135deg,var(--accent-bright),var(--accent-lt)); -webkit-background-clip:text; background-clip:text; color:transparent } .acct-vip .acct-job, .acct-vip .acct-card{ border-color:rgba(224,190,109,.35); box-shadow:0 0 0 1px rgba(224,190,109,.12), 0 10px 26px rgba(224,190,109,.07) } .acct-fine a{ color:var(--accent); text-decoration:underline } .acct-link{ color:var(--accent); text-decoration:underline; font:inherit; padding:0 } .acct-switch{ margin-top:1.75rem; padding-top:1.25rem; border-top:1px solid var(--line); font-size:.85rem; text-align:center } .acct-switch a{ color:var(--accent); text-decoration:underline } .acct-card{ margin-top:1.25rem; padding:1.25rem; border:1px solid var(--line); border-radius:1.125rem; background:var(--surface) } .acct-card h2{ font-size:1rem; font-weight:600; margin-bottom:.4rem } .acct-card p{ font-size:.86rem; color:rgba(233,239,240,.62); line-height:1.6; margin-bottom:1rem } .acct-card .pill{ margin-top:.25rem } .acct-perms{ display:flex; flex-wrap:wrap; gap:.4rem; list-style:none } .acct-perms li{ font-size:.72rem; font-family:ui-monospace,Menlo,monospace; padding:.25rem .55rem; border-radius:.4rem; background:var(--surface); border:1px solid var(--line); color:rgba(233,239,240,.7) } /* account settings — saved vehicles list, feedback disclosure */ .acct-vlist{ list-style:none; margin:0 0 1rem; display:flex; flex-direction:column; gap:.4rem } .acct-vlist li{ display:flex; align-items:center; justify-content:space-between; gap:.75rem; padding:.55rem .8rem; border:1px solid var(--line); border-radius:.6rem; font-size:.85rem } .acct-feedback{ margin-top:1.5rem; border-top:1px solid var(--line); padding-top:1.25rem } .acct-feedback > summary{ cursor:pointer; font-size:.9rem; font-weight:500; color:var(--accent); list-style:none } .acct-feedback > summary::-webkit-details-marker{ display:none } .acct-feedback > summary::before{ content:'+ '; } .acct-feedback[open] > summary::before{ content:'\2013 '; } .acct-feedback-body{ margin-top:1rem } .acct-feedback-body textarea{ width:100%; border:1px solid var(--line); background:var(--surface); border-radius:.75rem; padding:.85rem 1rem; font-size:.9rem; font-family:inherit; color:#eef3f3; resize:vertical } /* a text link to a specific job (progress update, etc.) lands here */ .acct-job-hi{ animation:acctJobHi 2.4s ease-out 1 } @keyframes acctJobHi{ 0%{ box-shadow:0 0 0 3px var(--accent); border-radius:1.125rem } 100%{ box-shadow:0 0 0 0 transparent } } /* customer portal — job history */ .acct-jh{ font-size:.7rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(233,239,240,.45); font-weight:600; margin:1.75rem 0 .6rem } .acct-job{ border:1px solid var(--line); background:var(--surface); padding:1.1rem 1.25rem; margin-bottom:.7rem } .acct-job h3{ font-size:1rem; font-weight:600 } .acct-jmeta{ font-size:.8rem; color:rgba(233,239,240,.55); margin-top:.15rem } .acct-shots{ margin-top:.9rem; display:grid; grid-template-columns:repeat(auto-fill,minmax(7.5rem,1fr)); gap:.5rem } .acct-shotlbl{ grid-column:1/-1; font-size:.62rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(233,239,240,.4); font-weight:600; margin-top:.3rem } .acct-shot{ margin:0; overflow:hidden; border:1px solid var(--line) } .acct-shot img{ display:block; width:100%; aspect-ratio:4/3; object-fit:cover; cursor:zoom-in; background:var(--surface-2) } .acct-load{ display:flex; flex-direction:column; align-items:center; gap:1rem; padding:2.5rem 0 } .acct-load .bar{ width:min(14rem,60vw); height:2px; background:var(--line); overflow:hidden; border-radius:2px } .acct-load .bar i{ display:block; height:100%; width:40%; background:var(--accent); animation:wizslide 1.1s ease-in-out infinite } .acct-load p{ font-size:.8rem; letter-spacing:.14em; text-transform:uppercase; color:rgba(233,239,240,.4) } /* a message that had to survive a step change (e.g. a lost slot) */ .wiz-flash{ margin:0 0 1.25rem; border-left:3px solid var(--accent); border-radius:.25rem; background:rgba(201,162,75,.1); padding:.8rem 1rem; font-size:.86rem; line-height:1.55; color:#eef3f3 } .wiz .cap{ font-size:.64rem; letter-spacing:.16em; text-transform:uppercase; color:rgba(233,239,240,.62); font-weight:500 } .wiz select, .wiz input[type=text], .wiz input[type=tel], .wiz input[type=email], .wiz input[type=number], .wiz textarea{ width:100%; border:1px solid var(--line); background:var(--surface); border-radius:.75rem; padding:.7rem .85rem; font-size:.9rem; font-family:inherit; color:#eef3f3 } /* Every