/* ============================================================ TD RESIN BOYS: landing page Brand: black + white, with a molten-metal accent lifted straight from the client's own metallic pours. ============================================================ */ /* ---------- 1. TOKENS ---------- */ :root{ --ink:#08090A; --ink-2:#0E1012; --panel:#141618; --panel-2:#191C1F; --line:rgba(var(--raise),.10); --line-2:rgba(var(--raise),.16); --text:#FFFFFF; --dim:rgba(255,255,255,.66); --dim-2:rgba(255,255,255,.46); /* Molten metal: the accent, used sparingly */ --m1:#FFFFFF; --m2:#E4E9ED; --m3:#AAB3BB; --m4:#3E464E; --metal:linear-gradient(115deg,var(--m4) 0%,var(--m2) 26%,var(--m1) 42%,var(--m2) 58%,var(--m3) 78%,var(--m4) 100%); /* --metal is built FROM the m1..m4 ramp, so it flips when the ramp flips. Anything printed on top of it needs an ink that flips too. */ --badge-ink:#08090A; --metal-soft:linear-gradient(115deg,#AAB3BB,#FFFFFF 45%,#AAB3BB); --glow:rgba(190,200,210,.26); --r-sm:10px; --r:16px; --r-lg:22px; --r-xl:30px; --sh:0 24px 60px -18px rgba(0,0,0,.72); --sh-lg:0 40px 100px -24px rgba(0,0,0,.85); --ff-d:"Kanit",ui-sans-serif,system-ui,sans-serif; --ff-b:"Inter",ui-sans-serif,system-ui,-apple-system,sans-serif; --ff-m:"IBM Plex Mono",ui-monospace,SFMono-Regular,monospace; /* Surfaces, as raw triples so alpha can vary at the call site. */ /* CTA surface (see section 28) */ --cta-img:url("assets/cta-epoxy.webp"); --cta-label:#0A0E12; --cta-tsh:0 1px 0 rgba(255,255,255,.38); --cta-tint:linear-gradient(115deg, rgba(70,80,90,.26) 0%, rgba(150,162,172,.12) 28%, rgba(225,232,238,.08) 50%, rgba(150,162,172,.12) 72%, rgba(70,80,90,.28) 100%); --ground:8,9,10; --band:14,16,18; --card:24,26,28; --raise:255,255,255; --pad:clamp(20px,5vw,40px); /* Section rhythm. Was clamp(72px,10vw,132px), which stacked to 264px of dead air between every pair of sections and made the page feel endless. */ --sec-y:clamp(40px,4.6vw,62px); --nav-h:94px; } /* ---------- 1b. LIGHT THEME ---------- The page is dark-first, so light is an override set rather than a rebuild. theme.js stamps data-theme on before first paint; without that the page flashes dark then swaps, which is worse than having no toggle. The accent ramp changes meaning between themes: on dark, --m2 is a bright azure that reads as text on near-black. On light it would be illegible, so the text-carrying tokens darken while the CTA keeps its own deep pour and white label, which already works on either ground. */ :root[data-theme="light"]{ --ink:#F2F3F4; --ink-2:#E7E9EB; --panel:#FFFFFF; --panel-2:#F7F8F9; --line:rgba(8,10,12,.14); --line-2:rgba(8,10,12,.22); --text:#080A0C; --dim:rgba(8,10,12,.74); --dim-2:rgba(8,10,12,.56); /* Darkened so they carry as text and icons on a light ground. */ --m1:#05080B; --m2:#111820; --m3:#39424C; --m4:#6E7883; --metal-soft:linear-gradient(115deg,#39424C,#0B1117 45%,#39424C); --badge-ink:#F2F3F4; --glow:rgba(17,24,32,.22); --sh:0 20px 48px -20px rgba(10,30,55,.28); --sh-lg:0 34px 80px -28px rgba(10,30,55,.32); --ground:247,248,249; --band:232,234,236; --card:255,255,255; --raise:8,10,12; /* On a white page a silver button disappears, so the pour inverts: deep charcoal with a white label. */ --cta-img:url("assets/cta-epoxy-deep.webp"); --cta-label:#FFFFFF; --cta-tsh:0 1px 2px rgba(0,0,0,.55); --cta-tint:linear-gradient(115deg, rgba(8,12,16,.42) 0%, rgba(30,38,46,.24) 28%, rgba(70,80,92,.16) 50%, rgba(30,38,46,.24) 72%, rgba(8,12,16,.44) 100%); } /* ---------- 2. RESET ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--ink)} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ margin:0;background:transparent;color:var(--text); font-family:var(--ff-b);font-size:17px;line-height:1.62; -webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility; overflow-x:hidden; } img{max-width:100%;display:block} button{font:inherit;color:inherit} a{color:inherit} h1,h2,h3{font-family:var(--ff-d);font-weight:700;line-height:1.06;letter-spacing:-.012em;margin:0} p{margin:0} ul,ol{margin:0;padding:0;list-style:none} :focus-visible{outline:2px solid var(--m2);outline-offset:3px;border-radius:6px} .sprite{position:absolute;width:0;height:0;overflow:hidden} .hp{position:absolute!important;left:-9999px;width:1px;height:1px;opacity:0;pointer-events:none} .ico{width:1em;height:1em;flex:none;display:inline-block;vertical-align:-.13em} .safe-fill-top,.safe-fill-bottom{position:fixed;left:0;right:0;background:var(--ink);z-index:60;pointer-events:none} .safe-fill-top{top:0;height:env(safe-area-inset-top)} .safe-fill-bottom{bottom:0;height:env(safe-area-inset-bottom)} .container{width:min(1220px,100% - var(--pad)*2);margin-inline:auto} .container--narrow{width:min(820px,100% - var(--pad)*2)} /* ---------- 3. TYPE HELPERS ---------- */ .eyebrow{ font-family:var(--ff-m);font-size:11.5px;font-weight:500; letter-spacing:.18em;text-transform:uppercase;color:var(--m2); margin:0 0 14px; } /* Metal fill on a word. background-clip:text needs a painted background, so the fallback colour below is what shows if clip is unsupported. */ .metal{ font-style:italic;color:var(--m2); background:var(--metal); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; background-size:220% 100%; } @supports not ((-webkit-background-clip:text) or (background-clip:text)){ .metal{-webkit-text-fill-color:currentColor;background:none;color:var(--m2)} } /* ---------- 4. BUTTONS ---------- */ .btn{ --bh:52px; position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.55em; min-height:var(--bh);padding:0 26px;border:0;border-radius:999px; font-family:var(--ff-d);font-weight:700;font-size:19px;letter-spacing:-.005em; text-decoration:none;cursor:pointer;overflow:hidden; transition:transform .18s cubic-bezier(.2,.7,.3,1),box-shadow .18s,filter .18s; -webkit-tap-highlight-color:transparent; } .btn--sm{--bh:44px;padding:0 20px;font-size:15px} /* The nav button is below the large-text threshold, so it keeps a heavier scrim and trades some texture for the stricter 4.5:1. */ .btn--lg{--bh:62px;padding:0 34px;font-size:20px} .btn--block{display:flex;width:100%} .btn .ico{font-size:1.05em} /* The epoxy surface and label colour are defined together in section 28. */ .btn--metal::after{ /* travelling specular, the light moving over wet resin */ content:"";position:absolute;inset:0; background:linear-gradient(105deg,transparent 32%,rgba(255,255,255,.72) 48%,transparent 62%); transform:translateX(-130%); } .btn--metal:hover{transform:translateY(-2px);box-shadow:0 18px 42px -12px var(--glow),inset 0 1px 0 rgba(255,255,255,.6)} .btn--metal:hover::after{transform:translateX(130%);transition:transform .85s cubic-bezier(.2,.7,.3,1)} .btn--metal:active{transform:translateY(0)} @media (prefers-reduced-motion:reduce){ .btn,.btn--metal:hover{transition:none;transform:none} .btn--metal::after{display:none} } /* ---------- 5. NAV ---------- */ .nav{ position:fixed;top:env(safe-area-inset-top);left:0;right:0;z-index:50; height:var(--nav-h);display:flex;align-items:center; transition:height .3s,background .3s,backdrop-filter .3s,border-color .3s; border-bottom:1px solid transparent; } .nav.is-stuck{ background:rgba(var(--ground),.82);backdrop-filter:blur(16px) saturate(1.3); -webkit-backdrop-filter:blur(16px) saturate(1.3);border-bottom-color:var(--line); } .nav__in{display:flex;align-items:center;justify-content:space-between;gap:16px} .brand{display:inline-flex;align-items:center;gap:11px;text-decoration:none} /* Stacked two-line lockup (TD over RESINBOYS), so it needs real height or the second line is unreadable. */ .brand__logo{width:auto;height:70px;flex:none;display:block} .brand--sm .brand__logo{height:60px} @media (max-width:640px){ .brand__logo{height:57px} .brand--sm .brand__logo{height:52px} /* A 94px fixed bar eats too much of a phone viewport; 80px still clears the 57px mark with room on both sides. Custom properties need a selector: a bare declaration inside a media block is dropped. */ :root{--nav-h:80px} } /* The wordmark is in the artwork, so the location line is for assistive tech only. */ .brand__sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .brand__mark{width:34px;height:34px;flex:none} .brand__txt{display:flex;flex-direction:column;line-height:1.1} .brand__txt b{font-family:var(--ff-d);font-weight:700;font-size:16.5px;letter-spacing:-.02em} .brand__txt i{ font-style:normal;font-family:var(--ff-m);font-size:9.5px;font-weight:500; letter-spacing:.16em;text-transform:uppercase;color:var(--dim-2);margin-top:2px; } .brand--sm .brand__mark{width:30px;height:30px} /* ---------- 6. HERO ---------- */ .hero{ position:relative;isolation:isolate; min-height:100svh;display:flex;align-items:flex-end; padding:calc(var(--nav-h) + env(safe-area-inset-top) + 28px) 0 clamp(40px,7vw,84px); overflow:clip; } .hero__scrim{ position:absolute;inset:0;z-index:-2; background: linear-gradient(180deg,rgba(var(--ground),.55) 0%,rgba(var(--ground),.06) 38%,rgba(var(--ground),.22) 74%,rgba(var(--ground),.72) 100%), linear-gradient(96deg,rgba(var(--ground),.72) 0%,rgba(var(--ground),.24) 48%,rgba(var(--ground),0) 80%); } /* Specular band raking across the hero once on load. */ .hero__gloss{ position:absolute;inset:0;z-index:-1;pointer-events:none; background:linear-gradient(102deg,transparent 30%,rgba(232,237,241,.16) 46%,rgba(var(--raise),.06) 52%,transparent 66%); transform:translateX(-60%);opacity:0; } .hero.is-ready .hero__gloss{animation:gloss 2.6s cubic-bezier(.24,.7,.3,1) .35s 1 both} @keyframes gloss{0%{transform:translateX(-60%);opacity:0}22%{opacity:1}100%{transform:translateX(60%);opacity:0}} .hero__in{ display:grid;grid-template-columns:minmax(0,1.06fr) minmax(340px,468px); gap:clamp(28px,4vw,60px);align-items:end; } .hero__copy{max-width:640px} .hero h1{ font-size:clamp(41px,6.6vw,80px);margin:0 0 20px; text-shadow:var(--hero-shadow,0 4px 34px rgba(0,0,0,.55)); } /* Mask-wipe reveal: each line rises out of its own clipping box. */ .hero h1 .line{display:block;overflow:hidden} .hero h1 .line>span{display:block;transform:translateY(110%);opacity:0} .hero.is-ready h1 .line>span{animation:lineUp .95s cubic-bezier(.2,.75,.25,1) both} .hero.is-ready h1 .line:nth-child(2)>span{animation-delay:.1s} @keyframes lineUp{to{transform:translateY(0);opacity:1}} .hero__sub{ font-size:clamp(16.5px,1.65vw,19.5px);color:var(--dim); max-width:53ch;margin:0 0 26px;text-shadow:var(--hero-shadow-sm,0 2px 18px rgba(0,0,0,.6)); } .chips{display:flex;flex-wrap:wrap;gap:9px} .chip{ display:inline-flex;align-items:center;gap:8px; padding:8px 14px;border-radius:999px;font-size:13.5px;font-weight:500; background:rgba(var(--raise),.07);border:1px solid var(--line-2); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);color:var(--text); } .chip .ico{color:var(--m2);font-size:1.05em} .chip--rate b{font-family:var(--ff-d);font-weight:700;color:var(--text)} /* ---------- 7. QUICK FORM (2-step) ---------- */ .qf-wrap{position:relative} .qf{ position:relative;padding:clamp(22px,2.6vw,30px);border-radius:var(--r-xl); background:linear-gradient(168deg,rgba(var(--card),.94),rgba(11,13,16,.96)); border:1px solid var(--line-2);box-shadow:var(--sh-lg); backdrop-filter:blur(22px) saturate(1.25);-webkit-backdrop-filter:blur(22px) saturate(1.25); } /* Hairline metal edge on the panel top, like the wet edge of a pour. */ .qf::before{ content:"";position:absolute;left:22px;right:22px;top:-1px;height:1px;border-radius:2px; background:var(--metal-soft);opacity:.75; } .qf__head{margin-bottom:18px} .qf__kicker{ font-family:var(--ff-m);font-size:10.5px;font-weight:500;letter-spacing:.16em; text-transform:uppercase;color:var(--m2);margin:0 0 9px; } .qf__title{font-size:clamp(23px,2.4vw,29px);margin:0 0 7px} .qf__note{font-size:13.5px;color:var(--dim);margin:0} .qf__rail{height:2px;border-radius:2px;background:rgba(var(--raise),.10);margin:0 0 20px;overflow:hidden} .qf__railFill{display:block;height:100%;width:50%;background:var(--metal-soft);transition:width .45s cubic-bezier(.2,.7,.3,1)} .qf__step{display:grid;gap:13px} .qf__step[hidden]{display:none} .qf__micro{ display:flex;align-items:flex-start;gap:8px; font-size:12.5px;line-height:1.5;color:var(--dim-2);margin:2px 0 0; } .qf__micro .ico{color:var(--m3);margin-top:2px} .qf__back{ background:none;border:0;padding:6px;margin:-2px auto 0;display:block; font-size:13.5px;color:var(--dim);cursor:pointer; } .qf__back:hover{color:var(--text)} /* ---------- 8. FIELDS ---------- */ .f2{display:grid;grid-template-columns:1fr 1fr;gap:13px} .field{display:block} .field__lab{ display:block;font-size:12.5px;font-weight:600;letter-spacing:.01em; color:var(--dim);margin:0 0 7px; } .field__lab i{font-style:normal;color:var(--m2)} .field__lab i.opt{color:var(--dim-2);font-weight:500} .field__in{ width:100%;min-height:50px;padding:0 15px; font:500 15.5px/1.4 var(--ff-b);color:var(--text); background:rgba(var(--raise),.055); border:1px solid var(--line-2);border-radius:var(--r-sm); transition:border-color .18s,background .18s,box-shadow .18s; appearance:none;-webkit-appearance:none; } .field__in::placeholder{color:rgba(var(--raise),.42)} .field__in:hover{background:rgba(var(--raise),.08)} .field__in:focus{ outline:none;border-color:var(--m3);background:rgba(var(--raise),.10); box-shadow:0 0 0 3px rgba(170,179,187,.16); } .field__ta{min-height:96px;padding:13px 15px;resize:vertical;line-height:1.55} .field__in.is-bad{border-color:#E4734F;box-shadow:0 0 0 3px rgba(228,115,79,.15)} .selwrap{position:relative;display:block} .field__sel{padding-right:44px;cursor:pointer;color:var(--text)} .field__sel:invalid{color:rgba(var(--raise),.42)} .field__sel option{background:var(--panel);color:var(--text)} .selwrap__chev{ position:absolute;right:16px;top:50%;transform:translateY(-50%) rotate(90deg); font-size:17px;color:var(--dim-2);pointer-events:none; } .consent{display:flex;gap:11px;align-items:flex-start;margin:3px 0 4px;cursor:pointer} .consent input{ flex:none;width:19px;height:19px;margin:1px 0 0;accent-color:var(--m3);cursor:pointer; } .consent span{font-size:11.8px;line-height:1.55;color:var(--dim-2)} .consent a{color:var(--dim);text-underline-offset:2px} .consent--sm span{font-size:11px} .form-status{margin:12px 0 0;font-size:13.5px;min-height:1.2em;color:var(--dim)} .form-status.is-err{color:#F2A184} .form-status.is-ok{color:var(--m2)} /* ---------- 9. MARQUEE ---------- */ .marq{ border-block:1px solid var(--line);background:rgba(var(--band),.72); overflow:hidden;padding:16px 0; -webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); } .marq__track{display:flex;width:max-content;animation:marq 44s linear infinite} .marq__row{display:flex;align-items:center;gap:46px;padding-right:46px} .marq__row li{ display:inline-flex;align-items:center;gap:10px;white-space:nowrap; font-size:14px;font-weight:500;color:var(--dim); } .marq__row .ico{color:var(--m3);font-size:1.25em} @keyframes marq{to{transform:translateX(-50%)}} @media (prefers-reduced-motion:reduce){.marq__track{animation:none}} /* ---------- 10. SECTION SHELL ---------- */ .sec{position:relative;padding:var(--sec-y) 0} .sec--alt{background:rgba(var(--band),.42)} .sec__in{position:relative;z-index:1} .sec__head{max-width:760px;margin:0 0 clamp(24px,3.1vw,38px)} .sec__head--center{margin-inline:auto;text-align:center} .sec h2{font-size:clamp(30px,4.3vw,52px);margin:0 0 13px} .sec__lede{font-size:clamp(16px,1.5vw,18.5px);color:var(--dim);max-width:62ch} .sec__head--center .sec__lede{margin-inline:auto} /* Scroll reveal */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s cubic-bezier(.2,.7,.3,1),transform .7s cubic-bezier(.2,.7,.3,1)} .reveal.is-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.reveal{opacity:1;transform:none;transition:none}} /* ---------- 11. FAILURE CARDS ---------- */ .fails{display:grid;grid-template-columns:repeat(auto-fit,minmax(288px,1fr));gap:18px} .fail{ position:relative;padding:30px 26px 28px;border-radius:var(--r-lg); background:linear-gradient(170deg,rgba(var(--raise),.055),rgba(var(--raise),.014)); border:1px solid var(--line);overflow:hidden; transition:border-color .3s,transform .3s; } .fail::after{ /* gloss sweep on hover */ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(108deg,transparent 38%,rgba(232,237,241,.10) 50%,transparent 62%); transform:translateX(-110%);transition:transform .9s cubic-bezier(.2,.7,.3,1); } .fail:hover{border-color:rgba(170,179,187,.34);transform:translateY(-3px)} .fail:hover::after{transform:translateX(110%)} .fail__ico{ display:grid;place-items:center;width:52px;height:52px;border-radius:14px;margin:0 0 18px; background:rgba(170,179,187,.10);border:1px solid rgba(170,179,187,.24);color:var(--m2); } .fail__ico svg{width:26px;height:26px} .fail h3{font-size:20.5px;margin:0 0 11px} .fail p{font-size:15px;color:var(--dim);line-height:1.62} .fails__foot{ margin:26px 0 0;font-size:clamp(16px,1.7vw,19px);color:var(--dim); padding:20px 24px;border-radius:var(--r); background:rgba(170,179,187,.055);border:1px solid rgba(170,179,187,.18); } .fails__foot b{color:var(--text);font-weight:600} @media (prefers-reduced-motion:reduce){.fail,.fail::after{transition:none}.fail:hover{transform:none}} /* ---------- 12. PREP ---------- */ .prep__in{display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.08fr);gap:clamp(30px,5vw,72px);align-items:center} .prep__fig{position:relative;isolation:isolate;margin:0;border-radius:var(--r-xl);overflow:hidden;box-shadow:var(--sh)} .prep__fig img,.prep__vid{width:100%;height:100%;object-fit:cover;aspect-ratio:4/3;display:block;background:#0A0B0D} .prep__glass{ position:absolute;inset:0;pointer-events:none; background:linear-gradient(120deg,transparent 42%,rgba(var(--raise),.13) 52%,transparent 60%); mix-blend-mode:screen; } .prep__fig figcaption{ padding:14px 20px 16px;font-size:13px;color:var(--dim-2); background:var(--panel);border-top:1px solid var(--line); } .prep__lede{font-size:clamp(16px,1.5vw,18.5px);color:var(--dim);margin:0 0 26px;max-width:56ch} .prep__copy h2{font-size:clamp(28px,3.8vw,46px);margin:0 0 16px} .ticks{display:grid;gap:15px;margin:0 0 28px} .ticks li{position:relative;padding-left:31px;font-size:15.5px;color:var(--dim);line-height:1.65} .ticks li b{color:var(--text);font-weight:600} .ticks .ico{position:absolute;left:0;top:.36em;color:var(--m2);font-size:1.15em} .ticks--tight{gap:11px;margin-bottom:0} .ticks--tight li{font-size:15px;padding-left:29px} .quote{margin:0 0 30px} .quote p{ font-family:var(--ff-d);font-weight:500;font-size:clamp(18px,2vw,22px);line-height:1.42; color:var(--text);margin:0 0 12px;letter-spacing:-.015em; } blockquote.quote{ padding:22px 26px;border-radius:var(--r);border:1px solid var(--line); border-left:2px solid transparent; background:linear-gradient(var(--panel),var(--panel)) padding-box,var(--metal-soft) border-box; } blockquote.quote cite{ font-style:normal;font-family:var(--ff-m);font-size:11.5px;letter-spacing:.11em; text-transform:uppercase;color:var(--m3); } /* ---------- 13. SERVICES ---------- */ .svcs{display:grid;grid-template-columns:repeat(auto-fit,minmax(290px,1fr));gap:18px} .svc{ position:relative;display:flex;flex-direction:column; padding:32px 28px;border-radius:var(--r-lg);overflow:hidden; background:linear-gradient(168deg,rgba(var(--raise),.052),rgba(var(--raise),.012)); border:1px solid var(--line); transition:border-color .3s,transform .3s,background .3s; } .svc::before{ /* faint flake speckle, only visible up close */ content:"";position:absolute;inset:0;pointer-events:none;opacity:.5; background-image: radial-gradient(1.6px 1.6px at 18% 24%,rgba(232,237,241,.22),transparent), radial-gradient(1.4px 1.4px at 72% 62%,rgba(var(--raise),.16),transparent), radial-gradient(1.9px 1.9px at 44% 82%,rgba(170,179,187,.18),transparent), radial-gradient(1.3px 1.3px at 88% 30%,rgba(var(--raise),.12),transparent), radial-gradient(1.5px 1.5px at 30% 58%,rgba(170,179,187,.14),transparent); } .svc:hover{border-color:rgba(170,179,187,.36);transform:translateY(-4px)} .svc--hero{ grid-column:span 2; background: radial-gradient(120% 150% at 88% 8%,rgba(170,179,187,.13),transparent 58%), linear-gradient(168deg,rgba(var(--raise),.075),rgba(var(--raise),.02)); border-color:rgba(170,179,187,.26); } .svc__ico{ display:grid;place-items:center;width:50px;height:50px;border-radius:14px;margin:0 0 18px; background:rgba(170,179,187,.10);border:1px solid rgba(170,179,187,.26);color:var(--m2); } .svc__ico svg{width:25px;height:25px} .svc h3{font-size:22px;margin:0 0 11px} .svc--hero h3{font-size:26px} .svc p{font-size:15px;color:var(--dim);line-height:1.62} .svc__spec{ display:flex;flex-wrap:wrap;gap:8px 18px;margin:18px 0 0;padding-top:15px; border-top:1px solid var(--line); } .svc p:not(.svc__spec){flex:1 1 auto} .svc__spec span{ font-family:var(--ff-m);font-size:11px;letter-spacing:.09em;text-transform:uppercase; color:var(--m3); } @media (max-width:900px){.svc--hero{grid-column:span 1}} @media (prefers-reduced-motion:reduce){.svc{transition:none}.svc:hover{transform:none}} /* ---------- 14. GALLERY ---------- */ .gal{ display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:12px;grid-auto-flow:dense; } .gal__i:nth-child(1),.gal__i:nth-child(8){grid-row:span 2} .gal__i button{ display:block;width:100%;height:100%;padding:0;border:1px solid var(--line); border-radius:var(--r);overflow:hidden;background:var(--panel);cursor:zoom-in; transition:border-color .3s,transform .3s;position:relative; } .gal__i button::after{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(110deg,transparent 40%,rgba(var(--raise),.16) 50%,transparent 60%); transform:translateX(-110%);transition:transform .8s cubic-bezier(.2,.7,.3,1); } .gal__i button:hover{border-color:rgba(170,179,187,.42);transform:translateY(-3px)} .gal__i button:hover::after{transform:translateX(110%)} .gal__i img{width:100%;height:100%;object-fit:cover;aspect-ratio:3/4} .gal__i:nth-child(1) img,.gal__i:nth-child(8) img{aspect-ratio:3/8} @media (max-width:640px){ .gal{grid-template-columns:1fr 1fr} .gal__i:nth-child(1),.gal__i:nth-child(8){grid-row:span 1} .gal__i:nth-child(1) img,.gal__i:nth-child(8) img{aspect-ratio:3/4} } @media (prefers-reduced-motion:reduce){.gal__i button,.gal__i button::after{transition:none}.gal__i button:hover{transform:none}} /* ---------- 15. PROCESS ---------- */ /* Five steps never divide into a multi-column grid without leaving a hole, so they are full-width numbered rows, capped at a readable measure. */ .steps{display:grid;grid-template-columns:1fr;gap:10px;max-width:900px;margin-inline:auto} .step{position:relative;display:grid;grid-template-columns:48px minmax(0,1fr);column-gap:18px; align-items:start;padding:18px 22px;border-radius:var(--r-lg); background:rgba(var(--raise),.035);border:1px solid var(--line)} .step__n{ display:block;font-family:var(--ff-d);font-weight:700;font-size:29px;line-height:1; grid-row:span 2;margin:2px 0 0;background:var(--metal);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent; } @supports not ((-webkit-background-clip:text) or (background-clip:text)){.step__n{-webkit-text-fill-color:currentColor;color:var(--m2);background:none}} .step h3{font-size:17.5px;margin:0 0 5px} .step p{font-size:15px;color:var(--dim);line-height:1.62} /* ---------- 16. REVIEWS ---------- */ .rev{ display:grid;grid-template-columns:minmax(0,240px) minmax(0,1fr); gap:clamp(26px,4vw,56px);align-items:center; padding:clamp(30px,4vw,52px);border-radius:var(--r-xl); background: radial-gradient(90% 140% at 12% 10%,rgba(170,179,187,.11),transparent 60%), linear-gradient(168deg,rgba(var(--raise),.055),rgba(var(--raise),.015)); border:1px solid var(--line-2); } .rev__score{text-align:center} .rev__num{ display:block;font-family:var(--ff-d);font-weight:700;font-size:clamp(58px,7vw,84px);line-height:1; background:var(--metal);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; } @supports not ((-webkit-background-clip:text) or (background-clip:text)){.rev__num{-webkit-text-fill-color:currentColor;color:var(--m2);background:none}} .rev__stars{display:flex;justify-content:center;gap:4px;margin:10px 0 8px;color:var(--m2);font-size:19px} .rev__src{font-family:var(--ff-m);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--dim-2)} .rev__copy h2{font-size:clamp(25px,3.2vw,38px);margin:0 0 14px} .rev__copy p{font-size:16px;color:var(--dim);margin:0 0 12px} .rev__note{color:var(--m2)!important;font-weight:500} @media (max-width:760px){.rev{grid-template-columns:1fr;text-align:center}.rev__copy{text-align:left}} /* ---------- 17. GUARANTEE ---------- */ .guar__in{ display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:clamp(20px,3vw,40px);align-items:center; padding:clamp(28px,3.6vw,46px);border-radius:var(--r-xl); background:linear-gradient(120deg,rgba(170,179,187,.09),rgba(var(--raise),.02)); border:1px solid rgba(170,179,187,.24); } .guar__ico{ display:grid;place-items:center;width:66px;height:66px;border-radius:20px;flex:none; background:rgba(170,179,187,.13);border:1px solid rgba(170,179,187,.3);color:var(--m2); } .guar__ico svg{width:34px;height:34px} .guar h2{font-size:clamp(22px,2.7vw,32px);margin:0 0 12px} .guar p{font-size:15.5px;color:var(--dim);margin:0 0 10px} .guar p:last-child{margin-bottom:0} .guar p b{color:var(--text);font-weight:600} @media (max-width:900px){.guar__in{grid-template-columns:1fr;text-align:left}.guar__in .btn{justify-self:start}} /* ---------- 18. FAQ ---------- */ .faq{display:grid;gap:10px} .fq{ border:1px solid var(--line);border-radius:var(--r);background:rgba(var(--raise),.032); overflow:hidden;transition:border-color .25s,background .25s; } .fq[open]{border-color:rgba(170,179,187,.3);background:rgba(170,179,187,.045)} .fq summary{ display:flex;align-items:center;justify-content:space-between;gap:18px; padding:19px 22px;cursor:pointer;list-style:none; font-family:var(--ff-d);font-weight:600;font-size:16.5px;letter-spacing:-.012em; } .fq summary::-webkit-details-marker{display:none} .fq summary:hover{color:var(--m1)} .fq__x{ display:grid;place-items:center;width:28px;height:28px;flex:none;border-radius:50%; border:1px solid var(--line-2);color:var(--m2);transition:transform .3s,background .25s; } .fq__x svg{width:14px;height:14px} .fq[open] .fq__x{transform:rotate(135deg);background:rgba(170,179,187,.16)} .fq__b{padding:0 22px 21px} .fq__b p{font-size:15px;color:var(--dim);line-height:1.66;max-width:70ch} @media (prefers-reduced-motion:reduce){.fq,.fq__x{transition:none}} /* ---------- 19. QUOTE SECTION ---------- */ .quote.sec{background:rgba(var(--band),.42)} .quote__in{display:grid;grid-template-columns:minmax(0,1fr) minmax(340px,520px);gap:clamp(30px,5vw,68px);align-items:start;position:relative;z-index:1} .quote__copy{position:sticky;top:calc(var(--nav-h) + 34px)} .quote__copy h2{font-size:clamp(28px,3.8vw,46px);margin:0 0 16px} .quote__copy>p{font-size:16.5px;color:var(--dim);margin:0 0 24px;max-width:48ch} .qform{ display:grid;gap:14px;padding:clamp(24px,3vw,34px);border-radius:var(--r-xl); background:linear-gradient(168deg,rgba(var(--card),.96),rgba(var(--card),.98)); border:1px solid var(--line-2);box-shadow:var(--sh-lg);position:relative; } .qform::before{ content:"";position:absolute;left:24px;right:24px;top:-1px;height:1px;border-radius:2px; background:var(--metal-soft);opacity:.75; } @media (max-width:960px){.quote__copy{position:static}} /* ---------- 20. SERVICE AREA + FOOTER ---------- */ .area{padding-block:clamp(50px,7vw,84px);text-align:center} .area__h{font-size:clamp(20px,2.3vw,26px);margin:0 0 18px;color:var(--dim)} .area__list{font-size:15px;line-height:2;color:var(--dim-2);max-width:74ch;margin:0 auto 14px} .area__note{font-size:13.5px;color:var(--dim-2);opacity:.8} .foot{border-top:1px solid var(--line);background:rgba(var(--band),.78);padding:30px 0 calc(30px + env(safe-area-inset-bottom))} .foot__in{display:flex;flex-wrap:wrap;gap:18px;align-items:center;justify-content:space-between} .foot__legal{font-size:12.5px;color:var(--dim-2)} .foot__legal a{color:var(--dim);margin-left:14px;text-underline-offset:2px} /* ---------- 21. STICKY MOBILE CTA ---------- */ .sticky{ position:fixed;left:0;right:0;bottom:0;z-index:45; padding:12px var(--pad) calc(12px + env(safe-area-inset-bottom)); background:linear-gradient(transparent,rgba(var(--ground),.94) 34%); transform:translateY(120%);transition:transform .35s cubic-bezier(.2,.7,.3,1); } .sticky.is-up{transform:none} .sticky[hidden]{display:none} @media (min-width:861px){.sticky{display:none!important}} /* ---------- 22. LIGHTBOX ---------- */ .lb{ position:fixed;inset:0;z-index:80;display:grid;place-items:center; background:rgba(var(--ground),.94);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); opacity:0;transition:opacity .28s;padding:clamp(16px,4vw,48px); } .lb.is-open{opacity:1} .lb[hidden]{display:none} .lb__img{max-width:min(100%,900px);max-height:88vh;object-fit:contain;border-radius:var(--r);box-shadow:var(--sh-lg)} .lb__x,.lb__nav{ position:absolute;display:grid;place-items:center;width:48px;height:48px;border-radius:50%; background:rgba(var(--raise),.09);border:1px solid var(--line-2);color:#fff;cursor:pointer; font-size:20px;transition:background .2s; } .lb__x:hover,.lb__nav:hover{background:rgba(var(--raise),.18)} .lb__x{top:max(16px,env(safe-area-inset-top));right:16px} .lb__nav--p{left:14px;top:50%;transform:translateY(-50%) rotate(180deg)} .lb__nav--n{right:14px;top:50%;transform:translateY(-50%)} @media (prefers-reduced-motion:reduce){.lb{transition:none}} /* ---------- 23. PROMO MODAL ---------- */ .promo{ position:fixed;inset:0;z-index:90;display:grid;place-items:center; padding:clamp(14px,3vw,32px); background:rgba(var(--ground),.80);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px); opacity:0;transition:opacity .3s cubic-bezier(.2,.7,.3,1); } .promo.is-open{opacity:1} .promo[hidden]{display:none} .promo__card{ position:relative;display:grid; grid-template-columns:minmax(0,.72fr) minmax(0,1fr); grid-template-rows:minmax(0,1fr); width:min(920px,100%);max-height:min(92svh,860px);overflow:hidden; border-radius:var(--r-xl);background:var(--panel); border:1px solid rgba(170,179,187,.3);box-shadow:var(--sh-lg); transform:translateY(18px) scale(.985);transition:transform .38s cubic-bezier(.2,.75,.25,1); } .promo.is-open .promo__card{transform:none} .promo__x{ position:absolute;top:12px;right:12px;z-index:3;display:grid;place-items:center; width:38px;height:38px;border-radius:50%;background:rgba(var(--ground),.66); border:1px solid var(--line-2);color:#fff;cursor:pointer;font-size:16px; backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px); } .promo__x:hover{background:rgba(var(--ground),.9)} .promo__art{position:relative;overflow:hidden;background:#0A0B0D} .promo__art img{width:100%;height:100%;object-fit:cover;min-height:200px} .promo__artGloss{ position:absolute;inset:0; background:linear-gradient(104deg,transparent 34%,rgba(232,237,241,.20) 48%,transparent 62%); mix-blend-mode:screen; } .promo__badge{ position:absolute;left:18px;bottom:18px; display:grid;grid-template-columns:auto 1fr;grid-template-rows:1fr 1fr; column-gap:12px;align-items:center;width:184px;height:72px;padding:11px 16px; box-sizing:border-box;border-radius:10px; background: linear-gradient(118deg,rgba(255,255,255,.16),transparent 34%,rgba(255,255,255,.08) 52%,transparent 70%), linear-gradient(145deg,rgba(28,32,36,.94),rgba(4,6,8,.94)); color:#fff;border:1px solid rgba(226,232,237,.58); box-shadow:0 14px 30px -10px rgba(0,0,0,.88),inset 0 1px 0 rgba(255,255,255,.2); backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px); } .promo__badge::after{ content:"WEB OFFER";grid-column:2;grid-row:1;align-self:end; font-family:var(--ff-m);font-size:8px;font-weight:700;letter-spacing:.18em;color:rgba(255,255,255,.65) } .promo__badge b{ grid-column:1;grid-row:1/3;align-self:stretch;display:flex;align-items:center; padding-right:12px;border-right:1px solid rgba(255,255,255,.3); font-family:var(--ff-d);font-weight:700;font-size:34px;line-height:1;letter-spacing:-.04em } .promo__badge i{ grid-column:2;grid-row:2;align-self:start;font-style:normal;font-family:var(--ff-d); font-size:14px;font-weight:700;letter-spacing:.12em;text-transform:uppercase } .promo__body{ padding:clamp(22px,2.6vw,32px); overflow-y:auto;-webkit-overflow-scrolling:touch; min-height:0; /* without this the grid item cannot scroll and the card clips the CTA */ } .promo__body h2{font-size:clamp(24px,2.8vw,32px);margin:0 0 11px} .promo__sub{font-size:14.5px;color:var(--dim);margin:0 0 20px} .promo__form{display:grid;gap:12px} .promo__no{ background:none;border:0;padding:6px;font-size:12.5px;color:var(--dim-2); cursor:pointer;text-decoration:underline;text-underline-offset:3px; } .promo__no:hover{color:var(--dim)} @media (max-width:720px){ .promo__card{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);max-height:94svh} .promo__art{max-height:148px;min-height:0} .promo__badge{left:12px;bottom:12px;width:150px;height:54px;padding:8px 12px;column-gap:9px;border-radius:8px} .promo__badge b{font-size:26px;padding-right:9px} .promo__badge::after{font-size:7px} .promo__badge i{font-size:11px} } @media (prefers-reduced-motion:reduce){.promo,.promo__card{transition:none}} /* ---------- 24. RESPONSIVE ---------- */ @media (max-width:1040px){ .hero__in{grid-template-columns:1fr;align-items:start} .hero{min-height:auto;padding-bottom:56px} .hero__copy{max-width:none} .qf-wrap{margin-top:8px} .prep__in{grid-template-columns:1fr} .quote__in{grid-template-columns:1fr} } @media (max-width:640px){ body{font-size:16px} .f2{grid-template-columns:1fr} .fail,.svc{padding:26px 22px} .sticky{display:block} .foot__in{flex-direction:column;align-items:flex-start;gap:14px} .foot__legal a{margin:0 14px 0 0} } /* Desktop keeps the marquee narrower so it never collides with the sticky bar. */ @media (min-width:861px){.sticky{display:none}} /* ============================================================ 25. CONFIRMATION PAGE (thank-you.html) Lives here rather than in an inline