/* Maxi Cat customer site — warm-orange "smart abundance": bold #D4540A orange on warm cream + soft peach. Punchier FMCG energy than Good Dog; value = generosity, never cheapness. (--red/--pink var NAMES kept from the shared base so JS/classes port 1:1; values are orange/peach.) */ @font-face{font-family:'Fraunces';src:url('../fonts/fraunces-900.woff2') format('woff2');font-weight:900;font-display:swap} @font-face{font-family:'Fraunces';src:url('../fonts/fraunces-600.woff2') format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'Fraunces';src:url('../fonts/fraunces-600i.woff2') format('woff2');font-weight:600;font-style:italic;font-display:swap} @font-face{font-family:'Jakarta';src:url('../fonts/jakarta-400.woff2') format('woff2');font-weight:400;font-display:swap} @font-face{font-family:'Jakarta';src:url('../fonts/jakarta-500.woff2') format('woff2');font-weight:500;font-display:swap} @font-face{font-family:'Jakarta';src:url('../fonts/jakarta-600.woff2') format('woff2');font-weight:600;font-display:swap} @font-face{font-family:'Jakarta';src:url('../fonts/jakarta-800.woff2') format('woff2');font-weight:800;font-display:swap} *{margin:0;padding:0;box-sizing:border-box} [hidden]{display:none !important} :root{ --red:#D4540A; --red-dk:#B34406; --ink:#2E1B0E; --muted:#7A5B42; --soft:#A98A6E; --cream:#FBF3E8; --pink:#F6E3D0; --pink-deep:#F0D3B6; --card:#FFFFFF; --line:#EEDCC4; --good:#1B7F4B; --rad:20px; --wrap:1140px; /* radii already in use, named — the 26px media card and 14px chip are intentional */ --r-ctl:14px; --r-media:26px; --r-pill:99px; /* two shadow recipes in Maxi Cat's own warm-brown tint, replacing 7 ad-hoc values */ --shadow-card:0 14px 30px rgba(80,30,10,.10); --shadow-media:0 24px 50px rgba(80,30,10,.16); --shadow-pop:0 4px 14px rgba(0,0,0,.10),0 24px 52px -22px rgba(80,30,10,.30); /* motion: strong curves + one duration scale, replacing 6 ad-hoc values on default ease */ --ease-out:cubic-bezier(.23,1,.32,1); --ease-in-out:cubic-bezier(.77,0,.175,1); --t-press:140ms; --t-hover:180ms; --t-ui:240ms; --t-reveal:480ms; } @media(prefers-reduced-motion:no-preference){html{scroll-behavior:smooth}} html,body{overflow-x:hidden} body{font-family:'Jakarta',system-ui,sans-serif;color:var(--ink);background:var(--cream);line-height:1.6;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} button{font:inherit;border:0;background:none;cursor:pointer;color:inherit} h1,h2,h3{font-family:'Fraunces',Georgia,serif;font-weight:900;line-height:1.08} .wrap{max-width:var(--wrap);margin:0 auto;padding:0 22px} section{padding:64px 0} .kick{font-size:12px;letter-spacing:.32em;text-transform:uppercase;font-weight:800;color:var(--red);margin-bottom:12px} .h2{font-size:clamp(30px,5.2vw,50px);margin-bottom:12px} .h2 em{color:var(--red);font-style:italic;font-weight:600} .sub{color:var(--muted);max-width:660px;margin-bottom:30px;font-size:16.5px} /* topbar */ .topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:16px;padding:10px 22px;background:rgba(250,244,236,.94);backdrop-filter:blur(10px);border-bottom:1px solid var(--line)} .tblogo img{height:46px;width:auto} .tbnav{display:none;gap:4px;margin-left:auto} .tbnav a{padding:8px 12px;border-radius:99px;font-size:14px;font-weight:600;color:var(--muted)} .tbnav a.active{background:var(--pink);color:var(--ink)} .tbright{display:flex;align-items:center;gap:8px;margin-left:auto} .tbnav:not(:empty)~.tbright{margin-left:0} .langbtn{border:1.5px solid var(--ink);border-radius:99px;padding:5px 12px;font-weight:800;font-size:13px} .burger{display:flex;flex-direction:column;gap:4px;padding:8px} .burger span{width:20px;height:2.5px;background:var(--ink);border-radius:2px} .mobilenav{position:fixed;inset:62px 0 auto 0;background:var(--cream);border-bottom:1px solid var(--line);padding:10px 22px 18px;z-index:49;display:flex;flex-direction:column} .mobilenav a{padding:11px 4px;font-weight:600;border-bottom:1px solid var(--line)} .tbback{padding:8px 14px;font-size:13px;white-space:nowrap} @media(min-width:900px){ .tbnav{display:flex} .burger{display:none} } /* buttons */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:13px 24px;border-radius:99px;font-weight:800;font-size:15px;transition:transform .15s} .btn.red{background:var(--red);color:#fff} .btn.wa{background:#25D366;color:#fff} .btn.ghost{border:1.8px solid var(--ink);color:var(--ink)} .btn.dark{background:var(--ink);color:#fff} /* hero — editorial split with video/photo */ .hero{background:var(--pink);padding:56px 0} .herogrid{display:grid;gap:34px;align-items:center} .heroslogan{font-size:clamp(40px,7vw,76px);letter-spacing:-.5px} .heroslogan .dot{color:var(--red)} .herosub{color:var(--muted);font-size:17.5px;margin:16px 0 24px;max-width:520px} .heroctas{display:flex;gap:12px;flex-wrap:wrap} .heroproof{display:flex;gap:10px 22px;flex-wrap:wrap;margin-top:26px;font-size:13px;font-weight:700;color:var(--muted)} .heroproof span::before{content:'✓ ';color:var(--red);font-weight:800} .heromedia{position:relative;border-radius:26px;overflow:hidden;box-shadow:0 24px 50px rgba(80,30,10,.16)} .heromedia video,.heromedia img{width:100%;height:100%;object-fit:cover;aspect-ratio:16/10} .herobadge{position:absolute;top:14px;left:14px;background:#fff;border-radius:99px;padding:7px 14px;font-size:12.5px;font-weight:800;color:var(--ink);box-shadow:0 4px 14px rgba(0,0,0,.14)} @media(min-width:900px){ .herogrid{grid-template-columns:1fr 1.05fr} } /* trust */ .trust{background:var(--cream);padding:40px 0} .truststats{display:flex;gap:14px;flex-wrap:wrap;margin-bottom:22px} .tstat{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:14px 22px} .tstat b{font-family:'Fraunces',serif;font-size:26px;color:var(--red);display:block;line-height:1} .tstat span{font-size:12.5px;color:var(--muted);font-weight:600} .trustrow{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-top:12px} .trustrow .lbl{font-size:12px;font-weight:800;letter-spacing:.08em;text-transform:uppercase;color:var(--soft);margin-right:6px} .flagchip{display:inline-flex;align-items:center;gap:7px;background:var(--card);border:1px solid var(--line);border-radius:99px;padding:5px 12px;font-size:12.5px;font-weight:600} .flagchip img{height:14px;border-radius:2px} .certchip{background:var(--card);border:1px solid var(--line);border-radius:14px;padding:8px;transition:transform .15s} .certchip img{height:38px;width:56px;object-fit:contain} /* ingredient marquee band (owner: spreads of key ingredients everywhere) */ .ingbandwrap{position:relative;overflow:hidden} .ingbandwrap img{width:100%;max-height:430px;object-fit:cover} .ingbandcap{position:absolute;left:0;right:0;bottom:0;padding:20px;text-align:center;color:#fff; font-family:'Fraunces',serif;font-weight:600;font-style:italic;font-size:clamp(17px,2.8vw,24px); background:linear-gradient(0deg,rgba(38,23,15,.66),transparent)} /* why + pillars */ .why{background:#fff} .whygrid{display:grid;gap:16px;margin-top:8px} .wcard{background:var(--cream);border:1px solid var(--line);border-radius:var(--rad);padding:22px} .wcard .ic{width:52px;height:52px;border-radius:50%;background:var(--pink);display:grid;place-items:center;margin-bottom:14px} .wcard .ic img{width:28px;height:28px} .wcard h3{font-size:18.5px;margin-bottom:7px} .wcard p{color:var(--muted);font-size:14.5px} @media(min-width:700px){ .whygrid{grid-template-columns:1fr 1fr} } @media(min-width:1020px){ .whygrid{grid-template-columns:repeat(4,1fr)} } /* ingredient spread cards (grid of key-ingredient photos; click -> products modal) */ .spreadgrid{display:grid;gap:16px;grid-template-columns:repeat(2,1fr)} @media(min-width:760px){ .spreadgrid{grid-template-columns:repeat(3,1fr)} } /* products */ .products{background:#fff} .fgroup{margin-bottom:8px} .flbl{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin:10px 0 7px} .filters{display:flex;gap:8px;flex-wrap:wrap} .fchip{border:1.5px solid var(--line);border-radius:99px;padding:7px 16px;font-size:13.5px;font-weight:700;color:var(--muted);background:var(--cream)} .fchip.on{background:var(--ink);border-color:var(--ink);color:#fff} .pgrid{display:grid;gap:16px;margin-top:20px;grid-template-columns:repeat(2,1fr)} .pcard{background:var(--cream);border:1px solid var(--line);border-radius:var(--rad);padding:16px;cursor:pointer;transition:transform .16s,box-shadow .16s} .pimg{background:#fff;border-radius:14px;padding:10px;display:grid;place-items:center;margin-bottom:12px} .pimg img{height:130px;object-fit:contain} .pcat{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:800;color:var(--red)} .pname{font-family:'Fraunces',serif;font-weight:900;font-size:17px;margin:3px 0} .pmeta{font-size:12.5px;color:var(--soft);font-weight:600} @media(min-width:760px){ .pgrid{grid-template-columns:repeat(3,1fr)} .pimg img{height:160px} } /* tools (calculator / transition / comparer) */ #tcprod{flex:1 1 0%;width:0} #trres{overflow-x:auto} @media(max-width:560px){ } @media(min-width:980px){ .toolgrid{grid-template-columns:1fr 1fr} .toolcard.wide{grid-column:1/-1} } @media print{ body *{visibility:hidden} .printable,.printable *{visibility:visible} } /* best sellers */ .best{background:#fff} .bsrow{display:grid;gap:16px;grid-template-columns:repeat(1,1fr)} .bscard{position:relative;background:var(--cream);border:1px solid var(--line);border-radius:var(--rad);padding:18px;cursor:pointer} .bsbadge{position:absolute;top:12px;right:12px;background:var(--red);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.1em;border-radius:99px;padding:4px 10px} .bname{font-family:'Fraunces',serif;font-weight:900;font-size:16.5px;margin-top:8px} .bwhy{font-size:13px;color:var(--muted);margin-top:4px} @media(min-width:760px){ .bsrow{grid-template-columns:repeat(3,1fr)} } /* reviews / buy / about / faq — same vocabulary as SuperCat, re-toned */ .reviews{background:var(--pink)} .aggrow{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:16px} .aggchip{background:var(--card);border:1px solid var(--line);border-radius:99px;padding:8px 16px;font-size:13.5px;color:var(--muted)} .revnote{background:var(--card);border:1px dashed var(--line);border-radius:var(--rad);padding:20px;color:var(--muted);font-size:14.5px;max-width:640px} .revgrid{display:grid;gap:14px} .rcard{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:18px} .stars{color:var(--red);letter-spacing:2px;margin-bottom:8px} .rtext{font-size:14.5px} .rmeta{font-size:12px;color:var(--soft);margin-top:10px;font-weight:600} @media(min-width:760px){ .revgrid{grid-template-columns:repeat(3,1fr)} } .buy{background:#fff} .buyrow{display:flex;gap:14px;flex-wrap:wrap} .buybtn{display:flex;align-items:center;gap:12px;background:var(--cream);border:1px solid var(--line);border-radius:16px;padding:14px 20px;font-weight:800;transition:transform .15s} .buybtn .mk{width:34px;height:34px;border-radius:9px;color:#fff;display:grid;place-items:center;font-weight:900} .buybtn small{display:block;font-size:11px;color:var(--soft);font-weight:600} .offline{color:var(--muted);font-size:14.5px;margin-top:18px;max-width:640px} .about{background:var(--pink)} .aboutgrid{display:grid;gap:30px;align-items:center} .aboutimg{border-radius:24px;box-shadow:0 20px 44px rgba(80,30,10,.15)} .aboutstats{display:flex;gap:22px;margin:18px 0 14px} .astat b{font-family:'Fraunces',serif;font-size:28px;color:var(--red);display:block;line-height:1} .astat span{font-size:12px;color:var(--muted);font-weight:700} .aboutflags{display:flex;gap:7px;flex-wrap:wrap} @media(min-width:880px){ .aboutgrid{grid-template-columns:.9fr 1.1fr} } .faq{background:#fff} .faqlist{max-width:780px} .fitem{border-bottom:1px solid var(--line)} .fq{width:100%;display:flex;justify-content:space-between;align-items:center;gap:14px;text-align:left;padding:17px 2px;font-weight:700;font-size:15.5px} .fq .car{transition:transform .2s;color:var(--red)} .fitem.open .car{transform:rotate(180deg)} /* .fa disclosure moved to the layer at the end of this file (JS-measured height) */ .fa p{padding:0 2px 16px;color:var(--muted);font-size:14.5px;max-width:700px} /* contact */ .contact{background:var(--pink)} .conform{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:24px;max-width:720px} .conform label{display:block;font-weight:700;font-size:13.5px;margin-bottom:14px;color:var(--muted)} .conform input,.conform select,.conform textarea{display:block;width:100%;margin-top:6px;padding:11px 13px; border:1.5px solid var(--line);border-radius:12px;font:inherit;font-size:15px;color:var(--ink);background:var(--cream)} .conform input:focus,.conform select:focus,.conform textarea:focus{outline:2px solid var(--red);border-color:var(--red)} .congrid{display:grid;gap:0 16px} .conactions{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-top:4px} .conmail{font-size:13.5px;color:var(--muted)} .conmail a{color:var(--red);font-weight:700} .connote{font-size:12px;color:var(--soft);margin-top:10px} @media(min-width:680px){ .congrid{grid-template-columns:1fr 1fr} } /* footer */ .footer{background:var(--ink);color:#EFE3D6;padding:48px 0 26px} .fgrid{display:grid;gap:26px} .footer h4{font-family:'Jakarta',sans-serif;font-size:13px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:12px;color:#C9B29B} .flinks{display:flex;flex-direction:column;gap:8px;font-size:14.5px} .fsmall{margin-top:30px;padding-top:16px;border-top:1px solid rgba(255,255,255,.14);font-size:12px;color:#B49B84} @media(min-width:760px){ .fgrid{grid-template-columns:1.2fr 1fr 1fr} } /* modals + wa float */ .certmodal{position:fixed;inset:0;z-index:80;background:rgba(38,23,15,.5);display:grid;place-items:center;padding:22px} .certbox{background:#fff;border-radius:22px;padding:28px;max-width:420px;width:100%;text-align:center;position:relative} .certbox img{height:64px;margin:0 auto 12px;object-fit:contain} .certbox h3{font-size:20px;margin-bottom:8px} .certbox p{font-size:14px;color:var(--muted)} .xbtn{position:absolute;top:10px;right:14px;font-size:26px;color:var(--soft)} .wafloat{position:fixed;right:18px;bottom:18px;z-index:60;width:54px;height:54px;border-radius:50%;background:#25D366;display:grid;place-items:center;box-shadow:0 10px 24px rgba(0,0,0,.24)} /* product page — flat band rhythm: pink -> photo -> cream -> white -> pink -> cream -> white */ .pphero{padding:46px 0 42px;background:var(--pink)} .ppherogrid{display:grid;gap:28px;align-items:start} .pph1{font-size:clamp(30px,5.2vw,52px);margin:6px 0 10px} .pptldr{font-family:'Fraunces',Georgia,serif;font-weight:600;font-style:italic;font-size:clamp(16px,2.4vw,20px);color:var(--muted);margin-bottom:14px} .ppg2k{background:var(--card);border:1px solid var(--line);border-radius:var(--rad);padding:14px 16px;color:var(--muted);font-size:14.5px;margin-bottom:16px} .shl{list-style:none} .shl li{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;margin:7px 0;color:var(--ink)} .shl .dot{width:8px;height:8px;border-radius:50%;background:var(--red);flex:none;margin-top:7px} .vlbl{font-size:11.5px;font-weight:800;letter-spacing:.14em;text-transform:uppercase;color:var(--soft);margin:14px 0 7px} .vchips{display:flex;gap:8px;flex-wrap:wrap} .vchip{border:1.5px solid var(--line);border-radius:99px;padding:7px 14px;font-size:13px;font-weight:700;background:var(--cream);color:var(--muted)} .vchip.on{background:var(--red);border-color:var(--red);color:#fff} .ppimgcard{position:relative;background:#fff;border-radius:26px;padding:22px;display:grid;place-items:center; aspect-ratio:1/1;width:100%;max-width:420px;margin:0 auto;overflow:hidden} .ppimgcard img{max-height:100%;max-width:100%;object-fit:contain;filter:drop-shadow(0 18px 30px rgba(80,30,10,.16))} .ppimgcard .herobadge{position:absolute;top:14px;left:14px;z-index:2} .ppband{padding:0} .ppbandwrap{position:relative;max-height:420px;overflow:hidden} .ppbandwrap img{width:100%;height:100%;max-height:420px;object-fit:cover;object-position:center 60%} .ppbandline{position:absolute;left:0;right:0;bottom:0;padding:18px 20px;text-align:center;color:#fff; font-family:'Fraunces',Georgia,serif;font-weight:600;font-style:italic;font-size:clamp(16px,2.6vw,22px); background:linear-gradient(0deg,rgba(38,23,15,.72),transparent)} .ppbenefits{background:var(--cream)} .ppinside{background:#fff} .insidegrid{display:grid;gap:14px;grid-template-columns:repeat(2,1fr)} .icard{background:var(--cream);border:1px solid var(--line);border-radius:16px;overflow:hidden} .icard img{aspect-ratio:1/1;object-fit:cover;width:100%} .icard .in{padding:10px 12px;font-weight:800;font-size:13.5px} .icard .id{padding:0 12px 12px;font-size:12px;color:var(--muted)} .inglist{display:flex;gap:8px;flex-wrap:wrap;margin-top:16px} .ingchip{background:var(--cream);border:1px solid var(--line);border-radius:99px;padding:6px 13px;font-size:13px;color:var(--muted)} .ingchip.has{border-color:var(--red);color:var(--ink);cursor:pointer;font-weight:600} .ingpop{background:var(--pink);border-radius:12px;padding:12px 14px;font-size:13.5px;color:var(--ink);margin-top:10px} @media(min-width:760px){ .insidegrid{grid-template-columns:repeat(4,1fr)} } .ppga{background:var(--pink)} .ppgagrid{display:grid;gap:26px} .gatable{width:100%;background:var(--card);border-radius:var(--rad);border:1px solid var(--line);overflow:hidden;border-collapse:separate;border-spacing:0} .gatable td{padding:12px 16px;border-bottom:1px solid var(--line);font-size:15px} .gatable tr:last-child td{border-bottom:0} .gatable td:last-child{text-align:right;font-weight:800} .smeta{display:flex;gap:8px;flex-wrap:wrap} .smetachip{background:var(--card);border:1px solid var(--line);border-radius:99px;padding:6px 14px;font-size:12.5px;font-weight:700;color:var(--muted)} .scerts{display:flex;gap:10px;flex-wrap:wrap} .scerts img{height:44px;width:64px;object-fit:contain;background:#fff;border:1px solid var(--line);border-radius:10px;padding:5px} .ppfeed{background:var(--cream)} .ppfaq{background:#fff} .ppcta{background:var(--cream)} .ppctabox{background:var(--pink);border-radius:26px;padding:44px 24px;text-align:center} @media(min-width:840px){ .ppherogrid{grid-template-columns:1.05fr .95fr;gap:44px} .ppgagrid{grid-template-columns:1fr 1fr;align-items:start} } /* hero gallery: square pack-shot card, arrows step through pack shot + web slides */ .garrow{position:absolute;top:50%;transform:translateY(-50%);width:38px;height:38px;border-radius:50%; background:rgba(255,255,255,.92);border:1px solid var(--line);font-size:19px;font-weight:800;color:var(--ink); box-shadow:0 4px 14px rgba(0,0,0,.10);z-index:2} .garrow.prev{left:10px} .garrow.next{right:10px} .gcount{position:absolute;bottom:12px;right:14px;background:rgba(38,23,15,.55);color:#fff; font-size:11.5px;font-weight:800;border-radius:99px;padding:4px 11px;z-index:2} /* ===== Maxi Cat signature sections ===== */ /* bonus-value spotlight: "more in every bag" */ .bonus{background:var(--red);color:#fff} .bonus .kick{color:#FFD9BE} .bonus .h2{color:#fff} .bonus .h2 em{color:#FFD9BE} .bonus .sub{color:#FFE8D6} .bonusgrid{display:grid;gap:16px} .bcard2{background:rgba(255,255,255,.10);border:1.5px solid rgba(255,255,255,.28);border-radius:22px;padding:22px;position:relative;overflow:hidden;transition:transform .16s;display:block;color:#fff} .bcard2 .btag{display:inline-block;background:#fff;color:var(--red);font-weight:900;font-size:11.5px;letter-spacing:.14em;border-radius:99px;padding:5px 12px;margin-bottom:12px} .bcard2 h3{color:#fff;font-size:21px;margin-bottom:6px} .bcard2 p{color:#FFE8D6;font-size:14px} .bcard2 .pimg{background:#fff;margin-top:14px} .bcard2 .go{display:inline-block;margin-top:12px;font-weight:800;color:#fff} @media(min-width:860px){ .bonusgrid{grid-template-columns:repeat(3,1fr)} } .bonusbadge{position:absolute;top:12px;left:12px;background:var(--red);color:#fff;font-size:10.5px;font-weight:900;letter-spacing:.1em;border-radius:99px;padding:4px 10px;z-index:2} /* litter scent explorer */ .scents{background:var(--cream)} .scentgrid{display:grid;gap:12px;grid-template-columns:repeat(3,1fr)} .scentcard{border-radius:18px;padding:16px 12px;text-align:center;color:#fff;font-weight:800;font-size:13.5px;cursor:pointer;transition:transform .15s;border:0} .scentcard .dot{display:block;width:44px;height:44px;border-radius:50%;background:rgba(255,255,255,.30);margin:0 auto 8px;display:grid;place-items:center;font-size:20px} @media(min-width:760px){ .scentgrid{grid-template-columns:repeat(9,1fr)} .scentcard{font-size:12px;padding:14px 6px} } .scentbox{max-width:520px;text-align:left} .scentbox .schero{width:100%;border-radius:14px;margin-bottom:12px;border:1px solid var(--line)} .scentstrip{display:flex;gap:10px;overflow-x:auto;padding:4px 0 8px;-webkit-overflow-scrolling:touch} .scentstrip img{width:150px;aspect-ratio:1/1;object-fit:cover;border-radius:12px;border:1px solid var(--line);flex:none} /* pairing guide "pasangan serasi" */ .pairs{background:#fff} .pairgrid{display:grid;gap:16px} .paircard{background:var(--cream);border:1px solid var(--line);border-radius:var(--rad);padding:20px} .paircard h3{font-size:18px;margin-bottom:4px} .paircard .pwho{font-size:12.5px;font-weight:800;color:var(--red);letter-spacing:.06em;text-transform:uppercase;margin-bottom:12px} .pairrow{display:flex;align-items:center;gap:10px} .pairrow .pimg{flex:1;margin:0} .pairrow .pimg img{height:96px} .pairrow .plus{font-family:'Fraunces',serif;font-weight:900;font-size:26px;color:var(--red);flex:none} .paircard .pwhy{font-size:13.5px;color:var(--muted);margin-top:12px} .paircard .plinks{margin-top:10px;display:flex;gap:14px;flex-wrap:wrap} .paircard .plinks a{color:var(--red);font-weight:800;font-size:13.5px} @media(min-width:860px){ .pairgrid{grid-template-columns:repeat(3,1fr)} } /* reveal */ .rv{opacity:0;transform:translateY(14px);transition:opacity .5s,transform .5s} .rv.in{opacity:1;transform:none} /* reduced-motion handled in the design-engineering layer at the end of this file */ /* ===================================================================== Design-engineering layer (2026-08-18). Values are Maxi Cat's own — warm orange #D4540A on cream #FBF3E8 / peach #F6E3D0. Only the motion physics (curves + durations) is shared with the other BIS brand sites. ===================================================================== */ /* ---- motion language: strong curves + one duration scale ---- */ .btn,.certchip,.buybtn,.scentcard,.bcard2,.pcard,.scard,.vchip,.fchip,.garrow,.gzoom,.xbtn,.langbtn,.spitem{ transition:transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease, border-color var(--t-hover) ease, color var(--t-hover) ease, box-shadow var(--t-hover) ease} .rv{transition:opacity var(--t-reveal) var(--ease-out),transform var(--t-reveal) var(--ease-out); transition-delay:calc(var(--st,0) * 55ms)} /* [data-st] parents stagger their children */ /* once the one-off reveal has played, interaction timing takes over (see mark() in core.js) — otherwise a card that is both a reveal target and pressable hovers at the 480ms reveal curve */ .rv.rvd{transition:transform var(--t-press) var(--ease-out), background-color var(--t-hover) ease,border-color var(--t-hover) ease, color var(--t-hover) ease,box-shadow var(--t-hover) ease;transition-delay:0s} /* ---- press feedback: nothing on this site acknowledged a tap ---- */ .btn:active{transform:scale(.97)} .certchip:active,.fchip:active,.vchip:active,.langbtn:active{transform:scale(.94)} .buybtn:active{transform:scale(.97)} .pcard:active,.scard:active,.bcard2:active,.scentcard:active{transform:scale(.99)} .garrow:active,.gzoom:active,.xbtn:active{transform:scale(.9)} .wafloat:active{transform:scale(.92)} .burger:active{transform:scale(.92)} /* ---- hover, gated: on touch these fire on tap and stick until you tap elsewhere ---- */ @media (hover:hover) and (pointer:fine){ .tbnav a:hover{background:var(--pink);color:var(--ink)} .btn:hover{transform:translateY(-1px)} .btn.red:hover{background:var(--red-dk)} .certchip:hover{transform:translateY(-2px)} .pcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-card)} .buybtn:hover{transform:translateY(-2px)} .flinks a:hover{color:#fff} .garrow:hover{background:var(--pink)} .gzoom:hover{background:var(--ink);color:#fff} .bcard2:hover{transform:translateY(-3px);background:rgba(255,255,255,.16)} .scentcard:hover{transform:translateY(-3px) scale(1.02)} .xbtn:hover{color:var(--ink);background:var(--pink)} .ppimgcard{cursor:zoom-in} } :focus-visible{outline:2px solid var(--red);outline-offset:3px;border-radius:4px} /* ---- modal: dialog role, focus trap and scroll lock come from the engine ---- */ .certmodal{background:rgba(38,23,15,0);transition:background-color var(--t-ui) var(--ease-out)} .certmodal.open{background:rgba(38,23,15,.5)} .certmodal.closing{background:rgba(38,23,15,0)} .modalbox{background:#fff;border-radius:22px;padding:28px;max-width:420px;width:100%; text-align:center;position:relative;max-height:90vh;overflow:auto;box-shadow:var(--shadow-pop); opacity:0;transform:scale(.97); transition:opacity var(--t-hover) ease,transform var(--t-ui) var(--ease-out)} .certmodal.open .modalbox{opacity:1;transform:none} .certmodal.closing .modalbox{opacity:0;transform:scale(.97);transition-duration:150ms} .modalbox img{height:64px;margin:0 auto 12px;object-fit:contain} .modalbox h3{font-size:20px;margin-bottom:8px} .modalbox p{font-size:14px;color:var(--muted)} .modalbox.scentbox{max-width:460px} .modalbox .schero{height:auto} .xbtn{position:absolute;top:10px;right:10px;width:38px;height:38px;display:grid;place-items:center; border-radius:50%;font-size:22px;color:var(--soft);background:transparent} .xbtn svg{width:18px;height:18px} /* ---- pack-shot gallery: two layers crossfade instead of a raw src swap ---- */ .glayer{position:absolute;inset:0;display:grid;place-items:center;padding:22px} .glayer img{max-width:100%;max-height:100%;object-fit:contain; filter:drop-shadow(0 18px 30px rgba(80,30,10,.16))} .glayer{opacity:1;transform:none; transition:opacity 260ms var(--ease-out),transform 260ms var(--ease-out)} .glayer.out-l{opacity:0;transform:translateX(-18px)} .glayer.out-r{opacity:0;transform:translateX(18px)} .glayer.in-l{opacity:0;transform:translateX(18px);transition:none} .glayer.in-r{opacity:0;transform:translateX(-18px);transition:none} .garrow svg{width:16px;height:16px} .gzoom{position:absolute;left:14px;bottom:12px;z-index:3;width:34px;height:34px;border-radius:50%; display:grid;place-items:center;background:var(--cream);color:var(--muted)} .gzoom svg{width:16px;height:16px} /* ---- lightbox: tap the pack shot to see it full size ---- */ .lbox{position:fixed;inset:0;z-index:90;display:grid;place-items:center; padding:clamp(14px,4vw,56px);background:rgba(38,23,15,.88); opacity:0;transition:opacity var(--t-hover) var(--ease-out)} .lbox.open{opacity:1} .lbstage{margin:0;display:grid;place-items:center;max-width:min(980px,100%);max-height:100%} .lbstage img{max-width:100%;max-height:80vh;object-fit:contain;border-radius:var(--r-media); background:#fff;padding:clamp(10px,2vw,26px);box-shadow:0 34px 90px -34px rgba(0,0,0,.65); opacity:0;transform:scale(.965); transition:opacity var(--t-hover) ease,transform 260ms var(--ease-out)} .lbox.open .lbstage img{opacity:1;transform:none} .lbclose,.lbarrow{position:absolute;z-index:2;width:44px;height:44px;border-radius:50%; display:grid;place-items:center;background:rgba(255,255,255,.93);color:var(--ink); box-shadow:0 10px 24px -10px rgba(0,0,0,.5); transition:transform var(--t-press) var(--ease-out),background-color var(--t-hover) ease} .lbclose{top:max(14px,2vh);right:max(12px,2vw)} .lbarrow{top:50%;margin-top:-22px} .lbarrow.prev{left:max(10px,2vw)} .lbarrow.next{right:max(10px,2vw)} .lbclose svg,.lbarrow svg{width:18px;height:18px} .lbclose:active,.lbarrow:active{transform:scale(.9)} .lbcount{position:absolute;left:50%;transform:translateX(-50%);bottom:max(14px,2vh); font-size:12px;font-weight:800;letter-spacing:.18em;color:var(--cream); background:rgba(0,0,0,.34);padding:6px 13px;border-radius:99px} @media (hover:hover) and (pointer:fine){.lbclose:hover,.lbarrow:hover{background:#fff}} @media (max-width:600px){ .lbox{padding:10px} .lbstage img{max-height:74vh;padding:8px} .lbarrow{top:auto;bottom:max(58px,7vh);margin-top:0} } /* ---- disclosure: height is animated in JS from a measured value. The old max-height clamp guessed (scrollHeight + 20) and clipped once text rewrapped at narrow widths. Collapsed panels are also taken out of the a11y tree so find-in-page can't land inside a 0-height box. ---- */ .fa{height:0;overflow:hidden;transition:none} .fa:not(.open)>*{visibility:hidden} .fa.open>*{visibility:visible} .car{transition:transform var(--t-ui) var(--ease-out)} /* ---- product page: collapsible sections (the page was 6,477px on a phone) ---- */ .sectoggle{width:100%;display:flex;align-items:flex-start;justify-content:space-between;gap:16px;text-align:left} .sectoggle>span{display:block;min-width:0} .sectoggle .kick,.sectoggle .h2{display:block} /* spans inside a