/* TH Exotic Jetski Rentals — Monticello MVP build Palette taken from the client logo: navy hull, wave teal, palm lime, sunset orange, cream ink */ :root{ --navy-950:#04101e; --navy-900:#071b2e; --navy-850:#0a2138; --navy-800:#0e2b46; --teal:#16aedd; --teal-deep:#0b7fa8; --orange:#f5822b; --orange-deep:#d9670f; --lime:#a8d648; --cream:#f6efe4; --sand:#f7f2ea; --bg:var(--sand); --bg-2:#efe7da; --card:#ffffff; --card-2:#fbf7f0; --text:#0a2138; --muted:#5a6b7d; --line:rgba(10,33,56,.14); --accent:var(--teal-deep); --accent-2:var(--orange-deep); --nav-bg:rgba(247,242,234,.82); --shadow:0 18px 44px rgba(10,33,56,.13); --logo-onlight:block; --logo-ondark:none; } [data-theme="dark"]{ --bg:var(--navy-950); --bg-2:var(--navy-900); --card:var(--navy-850); --card-2:var(--navy-800); --text:var(--cream); --muted:rgba(246,239,228,.62); --line:rgba(246,239,228,.15); --accent:var(--teal); --accent-2:var(--orange); --nav-bg:rgba(4,16,30,.78); --shadow:0 22px 54px rgba(0,0,0,.5); --logo-onlight:none; --logo-ondark:block; } *{box-sizing:border-box} html{scroll-behavior:smooth;scroll-padding-top:88px} body{margin:0;background:var(--bg);color:var(--text); font-family:"Manrope",system-ui,-apple-system,"Segoe UI",sans-serif; font-size:16.5px;line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden} /* clip beats hidden: it never turns into a scroll container (iOS sticky/anchor bug) */ @supports (overflow:clip){body{overflow-x:clip}} img{max-width:100%;display:block} a{color:inherit} h1,h2,h3,h4{font-family:"Anton",Impact,"Arial Narrow",sans-serif;font-weight:400; text-transform:uppercase;letter-spacing:.012em;line-height:1.03;margin:0} h1{font-size:clamp(2.6rem,6.2vw,5.1rem)} h2{font-size:clamp(2rem,4.2vw,3.35rem)} h3{font-size:clamp(1.28rem,2.1vw,1.62rem)} p{margin:0 0 1.05em} .wrap{width:min(1200px,calc(100% - 44px));margin-inline:auto} .eyebrow{font-family:"Chivo Mono",ui-monospace,monospace;font-size:12px;font-weight:600; letter-spacing:.2em;text-transform:uppercase;color:var(--accent);margin:0 0 14px} .lede{font-size:clamp(1.02rem,1.5vw,1.16rem);color:var(--muted);max-width:62ch} section{padding:clamp(66px,8vw,112px) 0;position:relative} .sec-head{max-width:70ch;margin-bottom:clamp(34px,4vw,52px)} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:9px; font-family:"Chivo Mono",monospace;font-size:13px;font-weight:700;letter-spacing:.13em; text-transform:uppercase;text-decoration:none;padding:15px 27px;border-radius:999px; border:1.5px solid transparent;cursor:pointer; transition:transform .18s,box-shadow .18s,background .18s,color .18s,border-color .18s; white-space:nowrap} .btn svg{width:17px;height:17px;flex:none} .btn-primary{background:linear-gradient(120deg,var(--orange),var(--orange-deep));color:#fff; box-shadow:0 12px 30px rgba(217,103,15,.34)} .btn-primary:hover{transform:translateY(-2px);box-shadow:0 18px 40px rgba(217,103,15,.44)} .btn-ghost{border-color:var(--line);color:var(--text);background:transparent} .btn-ghost:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-2px)} .btn-onwave{background:var(--cream);color:var(--navy-900);border-color:transparent} .btn-onwave:hover{transform:translateY(-2px);box-shadow:0 16px 34px rgba(0,0,0,.28)} .btn-wire{border-color:rgba(246,239,228,.42);color:var(--cream);background:transparent} .btn-wire:hover{border-color:var(--cream);background:rgba(246,239,228,.1);transform:translateY(-2px)} .btn-sm{padding:11px 19px;font-size:11.5px} /* ---------- nav ---------- */ .nav{position:fixed;inset:0 0 auto;z-index:900;background:var(--nav-bg); backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border-bottom:1px solid var(--line);transition:box-shadow .25s} .nav.scrolled{box-shadow:0 10px 30px rgba(4,16,30,.16)} .nav-in{display:flex;align-items:center;gap:22px;height:74px} .brand{display:flex;align-items:center;flex:none;text-decoration:none} .brand img{height:46px;width:auto} .brand .l-light{display:var(--logo-onlight)} .brand .l-dark{display:var(--logo-ondark)} .nav-links{display:flex;align-items:center;gap:25px;margin-left:auto} .nav-links a{font-family:"Chivo Mono",monospace;font-size:11.6px;font-weight:600; letter-spacing:.13em;text-transform:uppercase;text-decoration:none;color:var(--text); opacity:.76;position:relative;padding:5px 0;transition:opacity .18s,color .18s} .nav-links a:hover{opacity:1;color:var(--accent)} .nav-links a::after{content:"";position:absolute;left:0;right:100%;bottom:0;height:2px; background:var(--accent);transition:right .28s} .nav-links a:hover::after,.nav-links a[aria-current="page"]::after{right:0} .nav-links a[aria-current="page"]{opacity:1;color:var(--accent)} .nav-act{display:flex;align-items:center;gap:11px;flex:none} .icon-btn{width:38px;height:38px;border-radius:50%;border:1px solid var(--line); background:transparent;color:var(--text);cursor:pointer;display:inline-flex; align-items:center;justify-content:center;transition:border-color .2s,color .2s,transform .2s} .icon-btn:hover{border-color:var(--accent);color:var(--accent)} .icon-btn svg{width:18px;height:18px} .sun{display:var(--logo-ondark)} .moon{display:var(--logo-onlight)} .burger{display:none} @media (max-width:1080px){ .nav-links{position:fixed;inset:74px 0 auto;flex-direction:column;gap:0; background:var(--bg);border-bottom:1px solid var(--line);padding:10px 22px 26px; transform:translateY(-135%);transition:transform .4s cubic-bezier(.4,0,.2,1);margin:0} .nav-links.open{transform:none} .nav-links a{width:100%;padding:14px 0;font-size:13px;border-bottom:1px solid var(--line)} .nav-links a::after{display:none} .burger{display:inline-flex;order:3} .nav-in{gap:12px} .nav-act{margin-left:auto} .nav-act .btn{display:none} } /* ---------- hero (split, vertical reel) ---------- */ .hero{padding:118px 0 0;background: radial-gradient(120% 90% at 82% 8%,rgba(22,174,221,.22),transparent 58%), radial-gradient(90% 70% at 8% 92%,rgba(245,130,43,.16),transparent 60%), var(--bg)} .hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:clamp(30px,4vw,64px); align-items:center;padding-bottom:clamp(60px,7vw,96px)} .hero h1{margin-bottom:20px} .hero h1 .hl{background:linear-gradient(105deg,var(--teal),var(--lime)); -webkit-background-clip:text;background-clip:text;color:transparent} .hero .lede{font-size:clamp(1.06rem,1.6vw,1.24rem);margin-bottom:30px} .hero-cta{display:flex;flex-wrap:wrap;gap:13px;margin-bottom:34px} .chips{display:flex;flex-wrap:wrap;gap:9px} .chip{display:inline-flex;align-items:center;gap:7px;font-family:"Chivo Mono",monospace; font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase; padding:8px 14px;border-radius:999px;border:1px solid var(--line);color:var(--muted); background:var(--card)} .chip svg{width:14px;height:14px;color:var(--accent);flex:none} .reel{position:relative;justify-self:center;width:min(392px,100%)} .reel::before{content:"";position:absolute;inset:-16% -13%;border-radius:50%; background:radial-gradient(circle,rgba(22,174,221,.36),transparent 66%);filter:blur(34px);z-index:0} .reel-frame{position:relative;z-index:1;border-radius:30px;overflow:hidden; aspect-ratio:9/16;box-shadow:0 34px 74px rgba(4,16,30,.42); border:1px solid rgba(246,239,228,.16);background:var(--navy-900)} .reel-frame video,.reel-frame img{width:100%;height:100%;object-fit:cover} .reel-tag{position:absolute;z-index:2;left:16px;bottom:16px;display:flex;align-items:center;gap:8px; background:rgba(4,16,30,.62);backdrop-filter:blur(9px);border:1px solid rgba(246,239,228,.2); color:var(--cream);border-radius:999px;padding:8px 15px; font-family:"Chivo Mono",monospace;font-size:10.5px;font-weight:600;letter-spacing:.13em; text-transform:uppercase} .live-dot{width:8px;height:8px;border-radius:50%;background:var(--lime);flex:none; animation:pulse 1.9s ease-in-out infinite} @keyframes pulse{0%,100%{opacity:.45;transform:scale(.82)}50%{opacity:1;transform:scale(1.16)}} @media (max-width:900px){ .hero-grid{grid-template-columns:1fr} .reel{order:-1;width:min(300px,78%);margin-bottom:8px} .hero{padding-top:102px} } /* ---------- interior page banner ---------- */ .banner{padding:132px 0 clamp(46px,6vw,74px);position:relative;overflow:hidden; background:var(--navy-900);color:var(--cream)} .banner-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.34} .banner::after{content:"";position:absolute;inset:0; background:linear-gradient(100deg,rgba(4,16,30,.93) 8%,rgba(4,16,30,.58) 62%,rgba(11,127,168,.42))} .banner .wrap{position:relative;z-index:2} .banner .eyebrow{color:var(--lime)} .banner h1{margin-bottom:16px} .banner .lede{color:rgba(246,239,228,.8);max-width:60ch} .banner-cta{display:flex;flex-wrap:wrap;gap:12px;margin-top:26px} .crumb{font-family:"Chivo Mono",monospace;font-size:11px;letter-spacing:.14em;text-transform:uppercase; color:rgba(246,239,228,.55);margin-bottom:16px} .crumb a{text-decoration:none;color:inherit} .crumb a:hover{color:var(--lime)} /* ---------- reveal motion ---------- */ .reveal{opacity:0;transform:translateY(26px); transition:opacity .72s cubic-bezier(.22,1,.36,1),transform .72s cubic-bezier(.22,1,.36,1)} .reveal.in{opacity:1;transform:none} .reveal.from-l{transform:translateX(-34px)} .reveal.from-r{transform:translateX(34px)} .reveal.from-l.in,.reveal.from-r.in{transform:none} /* single-column below this width — a sideways slide would push past the viewport, so fall back to the plain fade-up */ @media (max-width:900px){ .reveal.from-l,.reveal.from-r{transform:translateY(26px)} .reveal.from-l.in,.reveal.from-r.in{transform:none} } @media (prefers-reduced-motion:reduce){ .reveal{opacity:1 !important;transform:none !important;transition:none} html{scroll-behavior:auto} } /* ---------- locations ---------- */ .loc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:22px} .loc{position:relative;border-radius:22px;overflow:hidden;min-height:298px;display:flex; align-items:flex-end;padding:26px;color:var(--cream);isolation:isolate; border:1px solid rgba(246,239,228,.14)} .loc img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2; transition:transform .8s cubic-bezier(.22,1,.36,1)} .loc::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(4,16,30,.14) 8%,rgba(4,16,30,.72) 52%,rgba(4,16,30,.95))} .loc:hover img{transform:scale(1.07)} .loc-body{width:100%} .loc h3{margin-bottom:5px} .loc address{font-style:normal;font-size:14.5px;color:rgba(246,239,228,.78); margin-bottom:16px;display:block} .loc .btn{width:100%} /* ---------- service cards ---------- */ .svc-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(305px,1fr));gap:24px} .svc{background:var(--card);border:1px solid var(--line);border-radius:22px;overflow:hidden; display:flex;flex-direction:column;box-shadow:var(--shadow); transition:transform .35s cubic-bezier(.22,1,.36,1),border-color .35s} .svc:hover{transform:translateY(-7px);border-color:var(--accent)} .svc-img{position:relative;aspect-ratio:16/10;overflow:hidden} .svc-img img{width:100%;height:100%;object-fit:cover;transition:transform .8s cubic-bezier(.22,1,.36,1)} .svc:hover .svc-img img{transform:scale(1.07)} .svc-num{position:absolute;top:14px;left:14px;font-family:"Chivo Mono",monospace;font-size:11px; font-weight:700;letter-spacing:.14em;color:var(--cream);background:rgba(4,16,30,.6); border:1px solid rgba(246,239,228,.24);border-radius:999px;padding:6px 13px;backdrop-filter:blur(8px)} .svc-body{padding:25px 25px 27px;display:flex;flex-direction:column;flex:1} .svc-body h3{margin-bottom:11px} .svc-body p{color:var(--muted);font-size:15.2px} .svc-list{list-style:none;margin:0 0 20px;padding:0;display:grid;gap:9px} .svc-list li{display:flex;gap:10px;font-size:14.6px;color:var(--muted);line-height:1.5} .svc-list svg{width:16px;height:16px;color:var(--accent);flex:none;margin-top:3px} .svc-foot{margin-top:auto;display:flex;flex-wrap:wrap;gap:10px} /* ---------- stats band ---------- */ .band{background:linear-gradient(115deg,var(--navy-900),var(--teal-deep) 220%); color:var(--cream);position:relative;overflow:hidden} .band::before{content:"";position:absolute;inset:0;opacity:.13; background:radial-gradient(circle at 18% 30%,var(--teal),transparent 46%), radial-gradient(circle at 84% 74%,var(--orange),transparent 46%)} .band .wrap{position:relative;z-index:1} .stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:26px;text-align:center} .stat b{display:block;font-family:"Anton",sans-serif;font-size:clamp(2.3rem,4.4vw,3.5rem); line-height:1;color:var(--lime);margin-bottom:9px} .stat span{font-family:"Chivo Mono",monospace;font-size:11.5px;font-weight:600;letter-spacing:.15em; text-transform:uppercase;color:rgba(246,239,228,.76)} /* ---------- split feature ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;gap:clamp(28px,4.4vw,64px);align-items:center} .split.flip .split-media{order:2} .split-media{border-radius:22px;overflow:hidden;box-shadow:var(--shadow);position:relative} .split-media img{width:100%;aspect-ratio:4/3;object-fit:cover} .split-media.tall img{aspect-ratio:3/4} @media (max-width:860px){ .split{grid-template-columns:1fr} .split.flip .split-media{order:0} } .mosaic{display:grid;grid-template-columns:1fr 1fr;grid-template-rows:1fr 1fr;gap:13px} .mosaic img{width:100%;height:100%;object-fit:cover;border-radius:16px;aspect-ratio:1} .mosaic img:first-child{grid-row:span 2;aspect-ratio:auto} /* ---------- feature grid ---------- */ .feat-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(258px,1fr));gap:20px} .feat{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:26px; transition:transform .3s,border-color .3s} .feat:hover{transform:translateY(-5px);border-color:var(--accent)} .feat-ico{width:44px;height:44px;border-radius:12px;display:inline-flex;align-items:center; justify-content:center;background:color-mix(in srgb,var(--accent) 14%,transparent); color:var(--accent);margin-bottom:16px} .feat-ico svg{width:22px;height:22px} .feat h3{font-size:1.14rem;margin-bottom:9px} .feat p{color:var(--muted);font-size:14.8px;margin:0} /* ---------- boat time slots ---------- */ .slots{display:grid;grid-template-columns:repeat(auto-fit,minmax(232px,1fr));gap:18px} .slot{background:var(--card);border:1px solid var(--line);border-left:3px solid var(--accent); border-radius:14px;padding:22px} .slot b{display:block;font-family:"Chivo Mono",monospace;font-size:11.5px;letter-spacing:.15em; text-transform:uppercase;color:var(--accent);margin-bottom:8px} .slot h3{font-size:1.1rem;margin-bottom:8px} .slot p{color:var(--muted);font-size:14.4px;margin:0} /* ---------- reviews ---------- */ .rev-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(292px,1fr));gap:20px} .rev{background:var(--card);border:1px solid var(--line);border-radius:18px;padding:24px; display:flex;flex-direction:column;gap:13px} .stars{display:flex;gap:3px;color:var(--orange)} .stars svg{width:16px;height:16px} .rev p{font-size:15px;color:var(--text);margin:0;flex:1} .rev-who{display:flex;align-items:center;gap:11px;padding-top:13px;border-top:1px solid var(--line)} .rev-av{width:36px;height:36px;border-radius:50%;flex:none;display:grid;place-items:center; background:linear-gradient(135deg,var(--teal),var(--teal-deep));color:#fff; font-family:"Anton",sans-serif;font-size:15px} .rev-who b{font-size:14.6px;font-weight:700;display:block;line-height:1.3} .rev-who span{font-family:"Chivo Mono",monospace;font-size:10.5px;letter-spacing:.1em; text-transform:uppercase;color:var(--muted)} /* ---------- gallery ---------- */ .gal{display:grid;grid-template-columns:repeat(auto-fill,minmax(238px,1fr)); grid-auto-rows:214px;grid-auto-flow:row dense;gap:13px} .gal a{position:relative;border-radius:15px;overflow:hidden;display:block;height:100%; background:var(--card-2);cursor:zoom-in} .gal img{width:100%;height:100%;object-fit:cover;transition:transform .7s cubic-bezier(.22,1,.36,1)} .gal a:hover img{transform:scale(1.08)} .gal a::after{content:"";position:absolute;inset:0;background:rgba(4,16,30,.28);opacity:0; transition:opacity .3s} .gal a:hover::after{opacity:1} .gal a.wide{grid-column:span 2} .gal a.tall{grid-row:span 2} @media (max-width:560px){ .gal{grid-auto-rows:180px} .gal a.wide{grid-column:span 1} .gal a.tall{grid-row:span 1} } .lb{position:fixed;inset:0;z-index:1200;background:rgba(4,16,30,.93);display:none; align-items:center;justify-content:center;padding:26px;backdrop-filter:blur(6px)} .lb.open{display:flex} .lb img{max-width:min(1100px,94vw);max-height:88vh;width:auto;border-radius:12px; box-shadow:0 30px 80px rgba(0,0,0,.6)} .lb-x,.lb-nav{position:absolute;background:rgba(246,239,228,.11); border:1px solid rgba(246,239,228,.28);color:var(--cream);border-radius:50%; width:46px;height:46px;cursor:pointer;display:grid;place-items:center;transition:background .2s} .lb-x:hover,.lb-nav:hover{background:rgba(246,239,228,.24)} .lb-x{top:22px;right:22px;font-size:22px;line-height:1} .lb-nav svg{width:22px;height:22px} .lb-prev{left:22px;top:50%;transform:translateY(-50%)} .lb-next{right:22px;top:50%;transform:translateY(-50%)} @media (max-width:640px){.lb-prev{left:10px}.lb-next{right:10px}} /* ---------- faq ---------- */ .faq{display:grid;gap:11px;max-width:900px} .qa{background:var(--card);border:1px solid var(--line);border-radius:15px;overflow:hidden} .qa summary{list-style:none;cursor:pointer;padding:19px 54px 19px 22px;position:relative; font-weight:700;font-size:15.8px;transition:color .2s} .qa summary::-webkit-details-marker{display:none} .qa summary:hover{color:var(--accent)} .qa summary::after{content:"";position:absolute;right:22px;top:50%;width:10px;height:10px; border-right:2px solid var(--accent);border-bottom:2px solid var(--accent); transform:translateY(-70%) rotate(45deg);transition:transform .3s} .qa[open] summary::after{transform:translateY(-30%) rotate(-135deg)} .qa-body{padding:0 22px 20px;color:var(--muted);font-size:15px} .qa-body p:last-child{margin:0} .qa-body ul{margin:0;padding-left:19px} .qa-body li{margin-bottom:6px} /* ---------- notice ---------- */ .notice{display:flex;gap:15px;align-items:flex-start; background:color-mix(in srgb,var(--orange) 11%,transparent); border:1px solid color-mix(in srgb,var(--orange) 34%,transparent);border-radius:15px;padding:20px 22px} .notice svg{width:22px;height:22px;color:var(--accent-2);flex:none;margin-top:2px} .notice b{display:block;margin-bottom:5px} .notice p{margin:0;font-size:14.8px;color:var(--muted)} /* ---------- contact ---------- */ .contact-grid{display:grid;grid-template-columns:.88fr 1.12fr;gap:clamp(26px,4vw,54px);align-items:start} @media (max-width:900px){.contact-grid{grid-template-columns:1fr}} .info{display:grid;gap:13px} .info-card{display:flex;gap:15px;align-items:flex-start;background:var(--card); border:1px solid var(--line);border-radius:16px;padding:20px 22px;text-decoration:none; transition:transform .28s,border-color .28s} a.info-card:hover{transform:translateX(5px);border-color:var(--accent)} .info-ico{width:40px;height:40px;border-radius:11px;flex:none;display:grid;place-items:center; background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent)} .info-ico svg{width:19px;height:19px} .info-card b{display:block;font-family:"Chivo Mono",monospace;font-size:10.5px;letter-spacing:.15em; text-transform:uppercase;color:var(--muted);margin-bottom:5px;font-weight:600} .info-card span{font-size:15.6px;font-weight:600;word-break:break-word} form{background:var(--card);border:1px solid var(--line);border-radius:20px; padding:clamp(24px,3vw,34px);box-shadow:var(--shadow)} .f-row{display:grid;grid-template-columns:1fr 1fr;gap:14px} @media (max-width:600px){.f-row{grid-template-columns:1fr}} .field{margin-bottom:15px} label{display:block;font-family:"Chivo Mono",monospace;font-size:10.5px;font-weight:600; letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:7px} input,textarea,select{width:100%;background:var(--bg);border:1px solid var(--line); color:var(--text);border-radius:11px;padding:13px 15px;font-family:inherit;font-size:15.4px; outline:none;transition:border-color .2s,box-shadow .2s} input:focus,textarea:focus,select:focus{border-color:var(--accent); box-shadow:0 0 0 3px color-mix(in srgb,var(--accent) 18%,transparent)} textarea{resize:vertical;min-height:118px} .form-msg{margin-top:13px;font-size:14.6px;display:none} .form-msg.show{display:block} .form-msg.ok{color:var(--accent)} .form-msg.err{color:var(--accent-2)} /* ---------- video embed ---------- */ .vid-embed{position:relative;aspect-ratio:16/9;border-radius:20px;overflow:hidden; box-shadow:var(--shadow);border:1px solid var(--line);background:var(--navy-900)} .vid-embed iframe{position:absolute;inset:0;width:100%;height:100%;border:0} /* ---------- footer ---------- */ footer{background:var(--navy-950);color:rgba(246,239,228,.68);padding:64px 0 28px; border-top:1px solid rgba(246,239,228,.1)} .f-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.2fr;gap:34px;margin-bottom:42px} @media (max-width:900px){.f-grid{grid-template-columns:1fr 1fr}} @media (max-width:560px){.f-grid{grid-template-columns:1fr}} footer img.f-logo{height:56px;width:auto;margin-bottom:16px} footer h4{font-size:13px;font-family:"Chivo Mono",monospace;font-weight:600;letter-spacing:.16em; text-transform:none;color:var(--cream);margin-bottom:15px} footer ul{list-style:none;margin:0;padding:0;display:grid;gap:10px} footer a{color:rgba(246,239,228,.68);text-decoration:none;font-size:14.6px;transition:color .2s} footer a:hover{color:var(--lime)} footer p{font-size:14.6px} .socials{display:flex;gap:10px;margin-top:16px} .socials a{width:38px;height:38px;border-radius:50%;border:1px solid rgba(246,239,228,.22); display:grid;place-items:center;transition:background .2s,border-color .2s,transform .2s} .socials a:hover{background:rgba(246,239,228,.12);border-color:var(--lime);transform:translateY(-3px)} .socials svg{width:17px;height:17px} .f-bot{border-top:1px solid rgba(246,239,228,.1);padding-top:22px;display:flex; flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center; font-size:13.4px;color:rgba(246,239,228,.5)} .f-bot a{font-size:13.4px} /* ---------- misc ---------- */ .mono-note{font-family:"Chivo Mono",monospace;font-size:11.5px;letter-spacing:.12em; text-transform:uppercase;color:var(--muted)} .center{text-align:center;margin-inline:auto} .mt{margin-top:clamp(30px,4vw,46px)} .skip{position:absolute;left:-9999px;top:0;background:var(--accent);color:#fff; padding:12px 20px;z-index:1000} .skip:focus{left:10px;top:10px}