/* ===================================================================== ARGO DRINKS — Design System Hybrid "Starlink" aesthetic · dark cinematic + light content Mobile-first. Built for GoDaddy static hosting. ===================================================================== */ /* ---------- Fonts ---------- */ /* Loaded via in (Google Fonts: Sora + Inter) */ /* ---------- Design tokens ---------- */ :root{ /* brand */ --red:#E1242C; --red-bright:#F0392E; --red-deep:#7F1D24; --red-grad:linear-gradient(100deg,#7F1D24 0%,#E1242C 58%,#F0392E 100%); /* dark surfaces */ --bg:#0B0B0C; --bg-2:#121316; --bg-3:#17181C; /* light surfaces */ --paper:#FFFFFF; --paper-2:#F5F2ED; /* warm off-white */ --paper-3:#ECE6DC; /* text */ --on-dark:#F4F5F6; --on-dark-muted:#A3A7AD; --on-light:#14161A; --on-light-muted:#5E646C; /* lines */ --line-dark:rgba(255,255,255,.14); --line-light:rgba(20,20,20,.12); --wood:#C68A4E; /* layout */ --maxw:1280px; --gutter:clamp(20px,5vw,64px); --radius:14px; --header-h:68px; --ease:cubic-bezier(.22,.61,.36,1); --font-display:"Sora",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; --font-body:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; } /* ---------- Reset ---------- */ *,*::before,*::after{box-sizing:border-box;margin:0;padding:0} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;scroll-padding-top:90px} [id]{scroll-margin-top:90px} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{ font-family:var(--font-body); background:var(--bg); color:var(--on-dark); line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{display:block;max-width:100%;height:auto} a{color:inherit;text-decoration:none} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit} ul{list-style:none} :focus-visible{outline:2px solid var(--red-bright);outline-offset:3px;border-radius:4px} /* ---------- Typography ---------- */ h1,h2,h3,h4{font-family:var(--font-display);font-weight:700;line-height:1.05;letter-spacing:-.02em} .eyebrow{ font-family:var(--font-body); font-size:.72rem;font-weight:600; letter-spacing:.28em;text-transform:uppercase; color:var(--red); } .display{font-size:clamp(2.6rem,9vw,6.5rem);font-weight:800;letter-spacing:-.03em} .h-xl{font-size:clamp(2rem,6.2vw,4rem)} .h-lg{font-size:clamp(1.7rem,5vw,3rem)} .h-md{font-size:clamp(1.35rem,3.6vw,2rem)} .lead{font-size:clamp(1.05rem,2.4vw,1.3rem);color:var(--on-dark-muted);font-weight:400} .muted{color:var(--on-dark-muted)} /* ---------- Layout helpers ---------- */ .wrap{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)} .section{padding-block:clamp(72px,12vw,150px)} .section-sm{padding-block:clamp(48px,8vw,90px)} .center{text-align:center} .stack>*+*{margin-top:1.1em} /* light / dark section themes */ .theme-light{background:var(--paper);color:var(--on-light)} .theme-light .eyebrow{color:var(--red)} .theme-light .lead,.theme-light .muted{color:var(--on-light-muted)} .theme-paper{background:var(--paper-2);color:var(--on-light)} .theme-paper .lead,.theme-paper .muted{color:var(--on-light-muted)} .theme-dark{background:var(--bg);color:var(--on-dark)} .theme-ink{background:var(--bg-2);color:var(--on-dark)} /* ---------- Buttons ---------- */ .btn{ display:inline-flex;align-items:center;justify-content:center;gap:.5em; font-family:var(--font-body);font-size:.8rem;font-weight:600; letter-spacing:.16em;text-transform:uppercase; padding:.95em 2em;border-radius:100px; transition:transform .25s var(--ease),background .25s var(--ease),color .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease); white-space:nowrap;border:1.5px solid transparent; } .btn:active{transform:scale(.97)} .btn-light{background:#fff;color:#0b0b0c} .btn-light:hover{background:#e9e9ea} .btn-outline{border-color:var(--line-dark);color:var(--on-dark);background:rgba(255,255,255,.02)} .btn-outline:hover{border-color:#fff;background:rgba(255,255,255,.08)} .btn-red{background:var(--red);color:#fff;box-shadow:0 8px 30px -10px rgba(225,36,44,.6)} .btn-red:hover{background:var(--red-bright);box-shadow:0 12px 38px -10px rgba(240,57,46,.7)} .btn-dark{background:#14161a;color:#fff} .btn-dark:hover{background:#000} .btn-ghost-dark{border-color:var(--line-light);color:var(--on-light)} .btn-ghost-dark:hover{border-color:#14161a;background:rgba(0,0,0,.04)} .btn-block{width:100%} .btn-row{display:flex;gap:14px;flex-wrap:wrap} .center .btn-row{justify-content:center} /* ==================================================================== HEADER / NAV ==================================================================== */ .site-header{ position:fixed;inset:0 0 auto 0;z-index:100; height:var(--header-h); display:flex;align-items:center; transition:background .35s var(--ease),backdrop-filter .35s var(--ease),border-color .35s var(--ease),height .35s var(--ease); border-bottom:1px solid transparent; } .site-header.scrolled{ background:rgba(11,11,12,.72); backdrop-filter:saturate(140%) blur(14px); -webkit-backdrop-filter:saturate(140%) blur(14px); border-bottom-color:var(--line-dark); } .header-inner{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter); display:flex;align-items:center;justify-content:space-between;gap:16px} .brand{display:flex;align-items:center} .brand img{height:26px;width:auto} .nav-desktop{display:none;align-items:center;gap:34px} .nav-link{ font-size:.82rem;font-weight:600;letter-spacing:.14em;text-transform:uppercase; color:var(--on-dark);opacity:.85;position:relative;padding:6px 0;transition:opacity .2s} .nav-link::after{content:"";position:absolute;left:0;bottom:0;height:1.5px;width:0;background:var(--red);transition:width .3s var(--ease)} .nav-link:hover{opacity:1} .nav-link:hover::after,.nav-link.active::after{width:100%} .nav-link.active{opacity:1} .header-actions{display:flex;align-items:center;gap:12px} /* language toggle */ .lang-toggle{display:flex;align-items:center;border:1px solid var(--line-dark);border-radius:100px;overflow:hidden} .lang-btn{font-size:.72rem;font-weight:700;letter-spacing:.1em;padding:7px 11px;color:var(--on-dark-muted);transition:.2s} .lang-btn.active{background:#fff;color:#0b0b0c} .lang-btn:not(.active):hover{color:#fff} /* hamburger */ .burger{display:inline-flex;flex-direction:column;justify-content:center;gap:5px;width:42px;height:42px; border:1px solid var(--line-dark);border-radius:10px;align-items:center} .burger span{display:block;width:18px;height:2px;background:#fff;border-radius:2px;transition:transform .3s var(--ease),opacity .2s} body.menu-open .burger span:nth-child(1){transform:translateY(7px) rotate(45deg)} body.menu-open .burger span:nth-child(2){opacity:0} body.menu-open .burger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)} /* mobile menu overlay */ .mobile-menu{ position:fixed;inset:0;z-index:95; background:rgba(8,8,9,.97);backdrop-filter:blur(8px); display:flex;flex-direction:column;justify-content:center; padding:var(--gutter); opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .35s var(--ease),transform .35s var(--ease),visibility .35s; } body.menu-open .mobile-menu{opacity:1;visibility:visible;transform:none} .mobile-menu a.m-link{ font-family:var(--font-display);font-weight:700; font-size:clamp(2rem,11vw,3.2rem);letter-spacing:-.02em; padding:.25em 0;border-bottom:1px solid var(--line-dark);color:#fff; display:flex;justify-content:space-between;align-items:center; opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease)} body.menu-open .mobile-menu a.m-link{opacity:1;transform:none} body.menu-open .mobile-menu a.m-link:nth-child(1){transition-delay:.08s} body.menu-open .mobile-menu a.m-link:nth-child(2){transition-delay:.14s} body.menu-open .mobile-menu a.m-link:nth-child(3){transition-delay:.20s} body.menu-open .mobile-menu a.m-link:nth-child(4){transition-delay:.26s} .mobile-menu .m-link span{color:var(--red);font-size:1rem} .mobile-menu-foot{margin-top:40px;display:flex;align-items:center;gap:18px;flex-wrap:wrap} .mobile-menu-foot .social a{color:var(--on-dark-muted);font-size:.8rem;letter-spacing:.1em;text-transform:uppercase} /* ==================================================================== HERO (full screen) ==================================================================== */ .hero{ position:relative;min-height:100vh;min-height:100svh; display:flex;align-items:flex-end; overflow:hidden;background:#000; } .hero-bg{position:absolute;inset:0;z-index:0} .hero-bg img{width:100%;height:100%;object-fit:cover;animation:kenburns 22s ease-out forwards} @keyframes kenburns{from{transform:scale(1.12)}to{transform:scale(1)}} .hero::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(8,8,9,.55) 0%,rgba(8,8,9,.15) 32%,rgba(8,8,9,.55) 72%,rgba(8,8,9,.95) 100%)} .hero-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin-inline:auto; padding:0 var(--gutter) clamp(80px,14vh,140px)} .hero h1{font-size:clamp(2.8rem,12vw,7rem);font-weight:800;letter-spacing:-.035em;line-height:.98} .hero .lead{max-width:46ch;margin-top:22px;color:#e9eaec} .hero .btn-row{margin-top:34px} .hero-eyebrow{margin-bottom:18px} /* page hero (smaller, for Products/Events) */ .page-hero{min-height:72vh;min-height:72svh} .page-hero .hero-inner{padding-bottom:clamp(56px,9vh,90px)} /* scroll cue */ .scroll-cue{position:absolute;left:50%;bottom:26px;transform:translateX(-50%);z-index:3; display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--on-dark-muted); font-size:.62rem;letter-spacing:.25em;text-transform:uppercase} .scroll-cue .mouse{width:22px;height:34px;border:1.5px solid rgba(255,255,255,.4);border-radius:12px;position:relative} .scroll-cue .mouse::after{content:"";position:absolute;left:50%;top:7px;width:3px;height:6px;border-radius:2px;background:#fff;transform:translateX(-50%);animation:wheel 1.6s infinite} @keyframes wheel{0%{opacity:0;transform:translate(-50%,0)}30%{opacity:1}100%{opacity:0;transform:translate(-50%,10px)}} /* ==================================================================== SECTION primitives ==================================================================== */ .section-head{max-width:720px} .section-head.center{margin-inline:auto} .section-head .eyebrow{display:block;margin-bottom:16px} .section-head p.lead{margin-top:18px} /* split: text + image */ .split{display:grid;gap:clamp(28px,5vw,64px);align-items:center} .split .media img{width:100%;border-radius:var(--radius);object-fit:cover} .split .media{position:relative} /* full-bleed image panel with overlaid text */ .panel{position:relative;min-height:88vh;display:flex;align-items:flex-end;overflow:hidden} .panel-bg{position:absolute;inset:0;z-index:0;overflow:hidden} .panel-bg img{position:absolute;left:0;top:-10%;width:100%;height:120%;object-fit:cover} .panel::after{content:"";position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(8,8,9,.1),rgba(8,8,9,.35) 55%,rgba(8,8,9,.92))} .panel-inner{position:relative;z-index:2;width:100%;max-width:var(--maxw);margin-inline:auto; padding:0 var(--gutter) clamp(48px,8vw,90px)} .panel-inner .lead{color:#e7e8ea;max-width:52ch} /* ==================================================================== CATEGORY GRID (what we offer) ==================================================================== */ .cat-grid{display:grid;grid-template-columns:1fr;gap:14px} .cat-card{position:relative;border-radius:var(--radius);overflow:hidden;min-height:200px;display:flex;align-items:flex-end;isolation:isolate} .cat-card img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:-2;transition:transform .8s var(--ease)} .cat-card::after{content:"";position:absolute;inset:0;z-index:-1; background:linear-gradient(180deg,rgba(8,8,9,.05),rgba(8,8,9,.35) 50%,rgba(8,8,9,.9))} .cat-card:hover img{transform:scale(1.07)} .cat-card .cat-body{padding:22px 22px 24px;width:100%} .cat-card h3{font-size:1.5rem;color:#fff} .cat-card .cat-meta{font-size:.78rem;color:var(--on-dark-muted);margin-top:4px;letter-spacing:.04em} .cat-card .cat-arrow{position:absolute;top:18px;right:18px;width:40px;height:40px;border-radius:50%; border:1px solid var(--line-dark);display:grid;place-items:center;color:#fff;background:rgba(0,0,0,.25); transition:background .3s,transform .3s var(--ease)} .cat-card:hover .cat-arrow{background:var(--red);border-color:var(--red);transform:rotate(-45deg)} .cat-card.tall{min-height:200px} /* ==================================================================== STATS ==================================================================== */ .stats{display:grid;grid-template-columns:repeat(2,1fr);gap:30px 16px} .stat .num{font-family:var(--font-display);font-weight:800;font-size:clamp(2.4rem,9vw,4rem); letter-spacing:-.03em;line-height:1;background:var(--red-grad);-webkit-background-clip:text;background-clip:text;color:transparent} .stat .label{margin-top:8px;font-size:.82rem;letter-spacing:.06em;color:var(--on-dark-muted)} .theme-light .stat .label,.theme-paper .stat .label{color:var(--on-light-muted)} /* ==================================================================== BRAND MARQUEE ==================================================================== */ .marquee{overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent); mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent)} .marquee-track{display:flex;gap:54px;width:max-content;animation:scrollx 32s linear infinite} .marquee:hover .marquee-track{animation-play-state:paused} .marquee-track span{font-family:var(--font-display);font-weight:700;font-size:clamp(1.1rem,3vw,1.7rem); color:var(--on-light-muted);opacity:.55;white-space:nowrap;letter-spacing:.02em} .theme-dark .marquee-track span,.theme-ink .marquee-track span{color:#cfd2d6;opacity:.4} @keyframes scrollx{to{transform:translateX(-50%)}} /* ==================================================================== GALLERY ==================================================================== */ .gallery{display:grid;grid-template-columns:1fr;gap:12px} .gallery figure{position:relative;border-radius:var(--radius);overflow:hidden} .gallery img{width:100%;height:100%;object-fit:cover;transition:transform .8s var(--ease)} .gallery figure:hover img{transform:scale(1.05)} .gallery figcaption{position:absolute;left:0;bottom:0;right:0;padding:18px; background:linear-gradient(180deg,transparent,rgba(8,8,9,.85)); color:#fff;font-size:.86rem;letter-spacing:.02em} /* ==================================================================== PRODUCTS ==================================================================== */ .filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:30px} .filter{font-size:.76rem;font-weight:600;letter-spacing:.12em;text-transform:uppercase; padding:.7em 1.2em;border-radius:100px;border:1px solid var(--line-light);color:var(--on-light-muted); background:#fff;transition:.2s} .filter:hover{border-color:#14161a;color:#14161a} .filter.active{background:#14161a;color:#fff;border-color:#14161a} .product-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(10px,2.5vw,22px)} .product{position:relative;border-radius:var(--radius);overflow:hidden;background:var(--paper); border:1px solid var(--line-light);transition:transform .4s var(--ease),box-shadow .4s var(--ease); display:flex;flex-direction:column} .product:hover{transform:translateY(-4px);box-shadow:0 22px 50px -28px rgba(0,0,0,.4)} .product-thumb{position:relative;aspect-ratio:4/5;overflow:hidden;display:flex;align-items:flex-end; background:linear-gradient(160deg,#1a1c20,#0d0e10)} .product-thumb img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform .7s var(--ease)} .product:hover .product-thumb img{transform:scale(1.06)} .product-thumb::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,8,9,.05),rgba(8,8,9,.5))} .product .tag{position:absolute;top:12px;left:12px;z-index:2;font-size:.62rem;font-weight:700;letter-spacing:.12em; text-transform:uppercase;padding:5px 10px;border-radius:100px;background:rgba(255,255,255,.92);color:#14161a} .product-info{padding:14px 16px 18px} .product-info .pname{font-family:var(--font-display);font-weight:700;font-size:1.02rem;color:var(--on-light);line-height:1.2} .product-info .pcat{font-size:.74rem;color:var(--on-light-muted);margin-top:4px;letter-spacing:.05em} .product.hide{display:none} /* ==================================================================== EVENTS — "what we host" cards + CTA band ==================================================================== */ .host-grid{display:grid;grid-template-columns:1fr;gap:16px;margin-top:44px} .host-card{padding:30px 26px;border:1px solid var(--line-light);border-radius:var(--radius); background:var(--paper);transition:transform .4s var(--ease),border-color .3s,box-shadow .4s var(--ease)} .host-card:hover{transform:translateY(-5px);border-color:var(--red);box-shadow:0 22px 50px -30px rgba(0,0,0,.35)} .host-card .hc-n{font-family:var(--font-display);font-weight:800;color:var(--red);font-size:1rem;letter-spacing:.12em} .host-card h3{font-size:1.22rem;margin:16px 0 9px;color:var(--on-light)} .host-card p{font-size:.93rem;color:var(--on-light-muted)} .cta-band{position:relative;overflow:hidden;text-align:center;background:var(--bg-2);border-block:1px solid var(--line-dark)} .cta-band::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 130% at 50% 0%,rgba(225,36,44,.2),transparent 62%)} .cta-band .wrap{position:relative;z-index:1} @media (min-width:640px){.host-grid{grid-template-columns:repeat(2,1fr)}} @media (min-width:980px){.host-grid{grid-template-columns:repeat(4,1fr)}} /* ==================================================================== SUBSCRIBE band ==================================================================== */ .subscribe{position:relative;overflow:hidden;background:var(--bg-2);border-block:1px solid var(--line-dark)} .subscribe::before{content:"";position:absolute;inset:0;background:radial-gradient(120% 140% at 80% 0%,rgba(225,36,44,.18),transparent 60%)} .subscribe .wrap{position:relative;z-index:1} .sub-grid{display:grid;gap:24px;align-items:center} .sub-form{display:flex;gap:10px;flex-wrap:wrap} .sub-form input[type=email]{flex:1;min-width:0;padding:1em 1.2em;border-radius:100px; background:rgba(255,255,255,.05);border:1px solid var(--line-dark);color:#fff;font-size:1rem} .sub-form input::placeholder{color:var(--on-dark-muted)} .sub-form input:focus{outline:none;border-color:var(--red)} .form-note{font-size:.78rem;color:var(--on-dark-muted);margin-top:12px} .form-msg{font-size:.9rem;margin-top:14px;display:none} .form-msg.show{display:block} .form-msg.ok{color:#5fd08a}.form-msg.err{color:#ff6b6b} /* ==================================================================== CONTACT (footer form, every page) ==================================================================== */ .contact{background:var(--bg);border-top:1px solid var(--line-dark)} .contact-grid{display:grid;gap:clamp(32px,6vw,70px)} .contact-info .lead{max-width:38ch} .contact-list{margin-top:26px} .contact-list li{display:flex;gap:14px;align-items:flex-start;padding:14px 0;border-bottom:1px solid var(--line-dark)} .contact-list .ci-ic{color:var(--red);flex:0 0 auto;margin-top:2px} .contact-list .ci-k{font-size:.72rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-muted)} .contact-list .ci-v{font-size:1.02rem;color:#fff} .contact-form{display:grid;gap:14px} .field{display:flex;flex-direction:column;gap:7px} .field label{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--on-dark-muted)} .field input,.field textarea{ width:100%;padding:.95em 1.1em;border-radius:12px; background:rgba(255,255,255,.04);border:1px solid var(--line-dark);color:#fff;font-size:1rem;font-family:inherit} .field textarea{resize:vertical;min-height:130px} .field input:focus,.field textarea:focus{outline:none;border-color:var(--red);background:rgba(255,255,255,.06)} .field-row{display:grid;gap:14px} /* ==================================================================== FOOTER ==================================================================== */ .site-footer{background:#070708;border-top:1px solid var(--line-dark);padding-block:clamp(48px,7vw,72px)} .footer-grid{display:grid;gap:36px} .footer-brand img{height:30px;margin-bottom:18px} .footer-brand p{color:var(--on-dark-muted);max-width:34ch;font-size:.92rem} .footer-col h4{font-size:.74rem;letter-spacing:.16em;text-transform:uppercase;color:var(--on-dark-muted);margin-bottom:16px;font-family:var(--font-body);font-weight:600} .footer-col a{display:block;padding:7px 0;color:#cdd0d4;font-size:.95rem;transition:color .2s} .footer-col a:hover{color:#fff} .social-row{display:flex;gap:12px;margin-top:18px} .social-row a{width:42px;height:42px;border-radius:50%;border:1px solid var(--line-dark);display:grid;place-items:center;color:#cdd0d4;transition:.25s} .social-row a:hover{background:var(--red);border-color:var(--red);color:#fff;transform:translateY(-2px)} .footer-bottom{margin-top:40px;padding-top:24px;border-top:1px solid var(--line-dark); display:flex;flex-wrap:wrap;gap:12px;justify-content:space-between;align-items:center; font-size:.8rem;color:var(--on-dark-muted)} .footer-bottom a{color:var(--on-dark-muted)}.footer-bottom a:hover{color:#fff} /* ==================================================================== WHATSAPP / LIVE CHAT float ==================================================================== */ .chat-fab{position:fixed;right:18px;bottom:18px;z-index:90; width:56px;height:56px;border-radius:50%; background:#25D366;color:#fff;display:grid;place-items:center; box-shadow:0 12px 32px -8px rgba(0,0,0,.5); transition:transform .3s var(--ease),box-shadow .3s var(--ease); animation:fabpop .5s var(--ease) both;animation-delay:1s} .chat-fab:hover{transform:scale(1.08)} .chat-fab svg{width:30px;height:30px} .chat-fab .ping{position:absolute;inset:0;border-radius:50%;background:#25D366;z-index:-1;animation:ping 2.4s ease-out infinite} @keyframes ping{0%{transform:scale(1);opacity:.5}80%,100%{transform:scale(1.7);opacity:0}} @keyframes fabpop{from{transform:scale(0);opacity:0}to{transform:scale(1);opacity:1}} .chat-fab .chat-tip{position:absolute;right:68px;top:50%;transform:translateY(-50%); background:#fff;color:#14161a;font-size:.8rem;font-weight:600;white-space:nowrap; padding:9px 14px;border-radius:10px;box-shadow:0 8px 24px -10px rgba(0,0,0,.4); opacity:0;pointer-events:none;transition:opacity .3s} .chat-fab:hover .chat-tip{opacity:1} .chat-fab .chat-tip::after{content:"";position:absolute;right:-5px;top:50%;transform:translateY(-50%) rotate(45deg);width:10px;height:10px;background:#fff} /* ==================================================================== REVEAL ANIMATIONS (different visualisations on scroll) ==================================================================== */ .reveal{opacity:0;transform:translateY(34px);transition:opacity .8s var(--ease),transform .8s var(--ease)} .reveal[data-reveal="left"]{transform:translateX(-44px)} .reveal[data-reveal="right"]{transform:translateX(44px)} .reveal[data-reveal="scale"]{transform:scale(.92)} .reveal[data-reveal="fade"]{transform:none} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s} .reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.40s}.reveal.d6{transition-delay:.48s} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1!important;transform:none!important;transition:none} .hero-bg img{animation:none} .chat-fab{animation:none}.chat-fab .ping{display:none} .marquee-track{animation:none} } /* parallax layer */ [data-parallax]{will-change:transform} /* ==================================================================== RESPONSIVE (min-width = scale up from mobile) ==================================================================== */ @media (min-width:640px){ .cat-grid{grid-template-columns:repeat(2,1fr)} .gallery{grid-template-columns:repeat(2,1fr)} .product-grid{grid-template-columns:repeat(3,1fr)} .field-row{grid-template-columns:1fr 1fr} .sub-grid{grid-template-columns:1.1fr 1fr} } @media (min-width:900px){ :root{--header-h:76px} .nav-desktop{display:flex} .burger{display:none} .brand img{height:30px} .split{grid-template-columns:1fr 1fr} .split.reverse .media{order:2} .stats{grid-template-columns:repeat(4,1fr)} .cat-grid{grid-template-columns:repeat(3,1fr)} .cat-card.feature{grid-column:span 1;min-height:340px} .cat-card{min-height:300px} .gallery{grid-template-columns:repeat(3,1fr)} .gallery .g-wide{grid-column:span 2} .gallery .g-tall{grid-row:span 2} .product-grid{grid-template-columns:repeat(4,1fr)} .contact-grid{grid-template-columns:1fr 1.1fr} .footer-grid{grid-template-columns:2fr 1fr 1fr 1.4fr} .contact-info .lead{max-width:40ch} } @media (min-width:1200px){ .product-grid{grid-template-columns:repeat(5,1fr)} } /* hide desktop-only spacing tweak */ .only-mobile{display:block} @media(min-width:900px){.only-mobile{display:none}} .only-desktop{display:none} @media(min-width:900px){.only-desktop{display:block}}