/* Treats By Marie v3 — clean white, cookie-toned, Crumbl energy with Marie's warmth. Color law: nothing on this page renders darker than the darkest cookie (--cocoa). Palette is drawn from the cookies themselves: cocoa, biscoff caramel, butter, cream, matcha, jam (CTA only). */ :root{ --white:#ffffff; --cream:#fdf8f0; --cream-deep:#f7efe2; --cocoa:#4a3220; /* darkest allowed — milk-chocolate cookie */ --cocoa-soft:#7a6047; --caramel:#b5762f; /* biscoff drizzle */ --butter:#e9c46a; --matcha:#7fa869; --jam:#a33449; /* CTA only — lightened off the old #8e2a3c to obey the color law */ --jam-deep:#8e2a3c; --caramel-ink:#8d5a20; /* caramel dark enough for small text on white */ --line:rgba(74,50,32,.12); --radius:12px; /* tightened from 22px — soft-pill cards fought the ticket edges */ --shadow:0 24px 60px -28px rgba(122,96,71,.45); --shadow-soft:0 10px 30px -18px rgba(122,96,71,.35); } *{margin:0;padding:0;box-sizing:border-box} [hidden]{display:none !important} /* One visible focus ring everywhere — the clipped ticket geometry and the transparent cookie hit-circles made the browser default unreliable. */ :focus-visible{outline:3px solid var(--caramel);outline-offset:3px;border-radius:2px} html{scroll-behavior:smooth} body{font-family:"Inter",system-ui,sans-serif;background:var(--white);color:var(--cocoa);line-height:1.6;-webkit-font-smoothing:antialiased;overflow-x:hidden} h1,h2,h3,.wordmark{font-family:"Fraunces",Georgia,serif;font-weight:600;line-height:1.06} img{max-width:100%;display:block} a{color:inherit} /* buttons — the bakery ticket: all four corners clipped on the diagonal, dashed tear-line inset. --nk is the notch depth; --nk-in keeps the inner dash parallel to the outer edge. */ .btn{--nk:10px;--nk-in:7px; position:relative;display:inline-block;padding:.85rem 1.7rem; clip-path:polygon(var(--nk) 0,calc(100% - var(--nk)) 0,100% var(--nk),100% calc(100% - var(--nk)),calc(100% - var(--nk)) 100%,var(--nk) 100%,0 calc(100% - var(--nk)),0 var(--nk)); text-decoration:none;font-weight:700;font-size:.82rem;letter-spacing:.07em;text-transform:uppercase; transition:transform .18s cubic-bezier(.34,1.56,.64,1), filter .18s ease, background .18s ease;border:none} .btn::after{content:"";position:absolute;inset:4px;border:1px dashed currentColor;opacity:.34;pointer-events:none; clip-path:polygon(var(--nk-in) 0,calc(100% - var(--nk-in)) 0,100% var(--nk-in),100% calc(100% - var(--nk-in)),calc(100% - var(--nk-in)) 100%,var(--nk-in) 100%,0 calc(100% - var(--nk-in)),0 var(--nk-in))} .btn:hover{transform:translateY(-2px)} .btn:active{transform:translateY(0)} .btn-order{background:var(--jam);color:#fff} .btn-order:hover{background:var(--jam-deep)} .btn-quiet{background:var(--cream-deep);color:var(--cocoa)} /* opaque — cookies orbit behind it, never through it */ .btn-quiet:hover{background:var(--cream)} .btn-lg{--nk:13px;--nk-in:10px;padding:1.05rem 2.1rem;font-size:.92rem} /* topbar */ .topbar{position:sticky;top:0;z-index:50;display:flex;align-items:center;gap:2rem;padding:.9rem clamp(1rem,4vw,3rem);background:rgba(255,255,255,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .wordmark{font-size:1.45rem;text-decoration:none} .wordmark span{font-style:italic;font-weight:400;color:var(--caramel)} .wordmark.small{font-size:1.2rem} .wordmark-city{display:none} /* phone only — see the max-width:900px block */ .nav{display:flex;gap:1.5rem;margin-left:auto} .nav a{text-decoration:none;font-size:.92rem;font-weight:500;color:var(--cocoa-soft);transition:color .15s} .nav a:hover{color:var(--caramel)} @media(max-width:840px){.nav{display:none}.topbar{justify-content:space-between}} /* hero — the wheel: name center stage, cookies orbit it */ .hero{position:relative;display:grid;grid-template-columns:1fr;align-items:center;justify-items:center;min-height:88vh;padding:clamp(2rem,5vw,4rem) clamp(1rem,4vw,3rem);overflow:hidden} .hero-inner{position:relative;z-index:2;text-align:center;max-width:44rem;pointer-events:none} /* cookies orbit underneath — hovers pass through to them */ .hero-inner a{pointer-events:auto} .hero-inner .lede{margin-left:auto;margin-right:auto} .hero-inner .hero-cta{justify-content:center} .kicker{text-transform:uppercase;letter-spacing:.22em;font-size:.72rem;font-weight:700;color:var(--caramel);margin-bottom:1rem} .hero h1{font-size:clamp(2.8rem,6vw,5.2rem);margin-bottom:1.2rem} .hero h1 .line{display:inline-block} .hero h1 .accent{font-style:italic;font-weight:500;color:var(--caramel)} .lede{font-size:1.14rem;color:var(--cocoa-soft);max-width:32rem;margin-bottom:1.9rem} .hero-cta{display:flex;gap:.9rem;flex-wrap:wrap} .hero-cookies{position:absolute;inset:0;z-index:1} /* every spot parks at stage center; v3-motion.js owns position via transform (the wheel) */ .cookie-spot{position:absolute;top:50%;left:50%;margin:0;will-change:transform;cursor:pointer;aspect-ratio:1/1;border-radius:50%} .motion-ready .cookie-spot{opacity:0} /* hidden only when the motion layer will fly them in */ /* border-radius makes the HIT AREA circular — transparent png corners stop stealing a neighbor's hover */ .float-cookie{width:100%;filter:drop-shadow(0 30px 40px rgba(74,50,32,.28));will-change:transform;transition:filter .45s ease, opacity .45s ease;pointer-events:none} /* sizes only — no two the same; --rot is the resting tilt the wheel preserves */ .cs-1{width:min(15vw,215px);--rot:-8deg} .cs-2{width:min(17vw,245px);--rot:6deg} .cs-3{width:min(13vw,190px);--rot:-4deg} .cs-4{width:min(16vw,230px);--rot:9deg} .cs-5{width:min(14vw,205px);--rot:-6deg} .cs-6{width:min(15vw,215px);--rot:3deg} .cs-7{width:min(12vw,175px);--rot:-10deg} /* Failsafe layout: the head script adds .no-wheel if the motion layer never arrives, so the cookies land visible instead of staying at opacity 0. */ .hero-stage.no-wheel .cookie-spot{opacity:1;position:static;transform:none;display:inline-block;width:15%;margin:.4rem} .hero-stage.no-wheel .hero-cookies{position:static;display:flex;flex-wrap:wrap;justify-content:center;align-items:center} .hero-stage.no-wheel .cookie-tag{position:static;opacity:1;transform:none;white-space:normal} /* flavor tag — hidden until its cookie is tasted */ .cookie-tag{position:absolute;left:50%;bottom:-2.6rem;transform:translateX(-50%) translateY(8px);opacity:0;pointer-events:none;text-align:center;white-space:nowrap;transition:opacity .35s ease .08s, transform .35s cubic-bezier(.22,1,.36,1) .08s;z-index:5} .cookie-tag strong{display:block;font-family:"Fraunces",serif;font-size:1.15rem;font-weight:600;color:var(--cocoa)} .cookie-tag span{font-size:.78rem;color:var(--caramel);font-weight:600;letter-spacing:.02em} /* the whiteout story — orchestrated by v3-motion.js via .has-focus / .is-tasting / .is-bg */ .hero-stage.has-focus .cookie-spot.is-bg .float-cookie{opacity:.1;filter:grayscale(.7) blur(2px) drop-shadow(0 30px 40px rgba(74,50,32,0))} .hero-stage.has-focus .cookie-spot.is-tasting{z-index:6} .hero-stage.has-focus .cookie-spot.is-tasting .cookie-tag{opacity:1;transform:translateX(-50%) translateY(0)} .hero-stage.has-focus .hero-inner{opacity:.14;filter:blur(1px)} .hero-inner{transition:opacity .45s ease, filter .45s ease} @media(max-width:900px){ .hero{grid-template-columns:1fr;min-height:0;padding-bottom:0} .hero-cookies{min-height:340px;margin-top:1rem} .cs-1,.cs-2,.cs-3,.cs-4,.cs-5,.cs-6,.cs-7{width:24vw} .cookie-tag strong{font-size:.95rem} .cookie-tag span{font-size:.7rem} /* Phone: the city rides in the corner with the name, and the small copy comes out entirely — headline, buttons, cookies. Nothing to squint at. */ .wordmark-city{display:block;font-style:normal;font-family:"Inter",sans-serif; font-size:.56rem;font-weight:700;text-transform:uppercase;letter-spacing:.2em; color:var(--caramel);margin-top:.05rem} .wordmark{line-height:1.02;font-size:1.15rem;white-space:nowrap} /* never wrap to two lines */ .topbar{gap:.75rem;padding:.7rem 1rem} .topbar .btn{--nk:8px;--nk-in:6px;padding:.6rem 1rem;font-size:.7rem} .hero .kicker,.hero .lede{display:none} /* the reclaimed space becomes stage: the wheel needs room to clear the type */ .hero{min-height:76vh;padding-top:1.5rem;padding-bottom:1.5rem} .hero-cookies{min-height:0} .hero h1{font-size:clamp(2.3rem,9.5vw,3.2rem)} .cs-1,.cs-2,.cs-3,.cs-4,.cs-5,.cs-6,.cs-7{width:19vw} .hero-cta{gap:.6rem} .btn-lg{padding:.9rem 1.4rem;font-size:.78rem} } /* ticker */ .ticker{overflow:hidden;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--cream);padding:.7rem 0;white-space:nowrap} .ticker-track{display:inline-flex;gap:2.2rem;align-items:center;will-change:transform} .ticker-track span{font-size:.8rem;font-weight:600;text-transform:uppercase;letter-spacing:.16em;color:var(--cocoa-soft)} .ticker-track i{font-style:normal;color:var(--butter);font-size:.6rem} /* sections */ .section{padding:clamp(3.5rem,7vw,6rem) clamp(1rem,4vw,3rem)} .section-cream{background:var(--cream)} .section-head{max-width:46rem;margin:0 auto 3rem;text-align:center} .section-head h2{font-size:clamp(2.1rem,4.2vw,3.2rem);margin-bottom:.9rem} .section-sub{color:var(--cocoa-soft)} .section-sub a{color:var(--caramel);font-weight:600} /* hot five */ .hot-row{display:grid;grid-template-columns:repeat(5,1fr);gap:1.1rem;max-width:82rem;margin:0 auto} @media(max-width:1100px){.hot-row{display:flex;overflow-x:auto;scroll-snap-type:x mandatory;padding-bottom:1rem;-webkit-overflow-scrolling:touch} .hot-card{flex:0 0 240px;scroll-snap-align:start}} .hot-card{position:relative;background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-soft);transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease} .hot-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)} .hot-rank{position:absolute;top:.8rem;left:.95rem;z-index:2;font-family:"Fraunces",serif;font-size:1.5rem;font-weight:700;color:#fff;text-shadow:0 2px 14px rgba(74,50,32,.6)} .hot-photo{aspect-ratio:1/1.05;overflow:hidden} .hot-photo img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .hot-card:hover .hot-photo img{transform:scale(1.06)} /* Crumbl-style cutout cards */ .hot-cut .hot-photo{overflow:visible;display:flex;align-items:center;justify-content:center;background:radial-gradient(closest-side, var(--cream) 62%, transparent 63%) center/88% 88% no-repeat} .hot-cut .hot-photo img{width:84%;height:auto;object-fit:contain;filter:drop-shadow(0 18px 22px rgba(74,50,32,.28))} .hot-cut:hover .hot-photo img{transform:scale(1.07) rotate(3deg)} .hot-cut .hot-rank{color:var(--caramel);text-shadow:none} .hot-body{padding:1.05rem 1.15rem 1.25rem} .hot-body h3{font-size:1.12rem;margin-bottom:.25rem} .hot-body p{font-size:.8rem;color:var(--cocoa-soft);margin-bottom:.55rem;line-height:1.45} .hot-price{font-weight:700;color:var(--caramel);font-size:.95rem} /* full menu */ .menu-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(215px,1fr));gap:1.1rem;max-width:82rem;margin:0 auto} .mcard{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;box-shadow:var(--shadow-soft);display:flex;flex-direction:column;transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease} .mcard:hover{transform:translateY(-5px);box-shadow:var(--shadow)} .mphoto{aspect-ratio:1/1;overflow:hidden} .mphoto img{width:100%;height:100%;object-fit:cover;transition:transform .5s ease} .mcard:hover .mphoto img{transform:scale(1.05)} .mbody{padding:1rem 1.1rem 1.15rem;display:flex;flex-direction:column;gap:.45rem;flex:1} .mbody h3{font-size:1.08rem} .mbody p{font-size:.8rem;color:var(--cocoa-soft);flex:1} .mcard-text{background:var(--cream-deep);justify-content:center} .mcard-text .mbody{padding:1.6rem 1.2rem} .mcard-text h3{font-size:1.25rem} /* chips — rubber-stamp outline, ink on paper (no fill) */ .chip{align-self:flex-start;font-size:.64rem;font-weight:700;text-transform:uppercase;letter-spacing:.16em;padding:.3rem .6rem;border-radius:2px;border:1.5px solid currentColor;background:transparent} .chip-now{color:var(--matcha)} .chip-rot{color:var(--caramel);opacity:.9} .mcard-text .chip-now{background:transparent} /* sold out — a rubber stamp on the card, same ink family as the chips (no pill). The photo goes matte under a cream wash so the flavors you CAN order are the ones that glow; the card still lifts on hover like the rest. */ .mcard{position:relative} .mphoto{position:relative} .stamp{position:absolute;top:.95rem;left:50%;z-index:3;transform:translateX(-50%) rotate(-6deg); padding:.46rem .95rem;border:2px solid var(--cocoa);border-radius:3px;background:rgba(255,255,255,.92); color:var(--cocoa);font-size:.7rem;font-weight:800;letter-spacing:.22em;text-transform:uppercase;line-height:1;white-space:nowrap; pointer-events:none;box-shadow:0 8px 16px -10px rgba(74,50,32,.4)} .stamp::after{content:"";position:absolute;inset:3px;border:1px solid currentColor;opacity:.5;border-radius:1px} .is-out .mphoto img{filter:saturate(.45) brightness(1.03)} .is-out .mphoto::after{content:"";position:absolute;inset:0;background:rgba(253,248,240,.34);pointer-events:none} .is-out .mbody h3{color:var(--cocoa-soft)} .mcard-text.is-out .mbody{padding-top:3.6rem} /* phone: cards shrink to content, so the stamp gets its own room */ /* hero: a sold-out cookie still orbits and still tastes — its tag just tells the truth */ .tag-out{display:block;width:max-content;margin:.45rem auto 0;font-style:normal;font-size:.58rem;font-weight:800;letter-spacing:.2em; text-transform:uppercase;color:var(--cocoa);border:1.5px solid currentColor;border-radius:2px;padding:.24rem .5rem; transform:rotate(-4deg);background:rgba(255,255,255,.92)} /* build a box */ .box-row{display:grid;grid-template-columns:repeat(3,1fr);gap:1.3rem;max-width:64rem;margin:0 auto} @media(max-width:840px){.box-row{grid-template-columns:1fr}} .box-card{position:relative;background:var(--white);border:1.5px solid var(--line);border-radius:var(--radius);padding:2.2rem 1.8rem 1.9rem;text-align:center;box-shadow:var(--shadow-soft);transition:transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s ease} .box-card:hover{transform:translateY(-6px);box-shadow:var(--shadow)} .box-cookie{width:auto;max-width:150px;height:110px;object-fit:contain;margin:0 auto 1rem;filter:drop-shadow(0 14px 18px rgba(74,50,32,.25));transition:transform .3s cubic-bezier(.34,1.56,.64,1)} .box-card:hover .box-cookie{transform:rotate(8deg) scale(1.08)} .box-card h3{font-size:1.45rem;margin-bottom:.2rem} .box-price{font-family:"Fraunces",serif;font-size:2rem;font-weight:700;color:var(--caramel);display:block;margin-bottom:.5rem} .box-price em{font-style:normal;font-size:1.1rem;color:var(--cocoa-soft)} .box-card p{font-size:.9rem;color:var(--cocoa-soft)} /* Box cards link straight to their Square item: small label, whole card is the tap target */ .box-go{display:inline-block;margin-top:1.05rem;font-size:.7rem;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--jam);text-decoration:none;border-bottom:2px solid currentColor;padding-bottom:.15rem;transition:color .2s ease} .box-go::after{content:"";position:absolute;inset:0;border-radius:inherit} .box-card:hover .box-go,.box-card:focus-within .box-go{color:var(--caramel)} .box-card:focus-within{transform:translateY(-6px);box-shadow:var(--shadow)} .box-go:focus-visible{outline:none} .box-card:has(.box-go:focus-visible){outline:3px solid var(--caramel);outline-offset:4px} .box-featured{border-color:var(--butter);background:linear-gradient(180deg,#fffdf7,var(--cream))} /* box flag — date-stamp on butter, dashed like a punched ticket */ .box-tag{position:absolute;top:-.85rem;left:50%;transform:translateX(-50%);background:var(--butter);color:var(--cocoa);font-size:.66rem;font-weight:700;text-transform:uppercase;letter-spacing:.14em;padding:.32rem .8rem;border-radius:2px;border:1.5px dashed rgba(74,50,32,.45)} .box-cta{text-align:center;margin-top:2.6rem} .micro{font-size:.8rem;color:var(--cocoa-soft);margin-top:.8rem} .cater-strip{max-width:64rem;margin:2.8rem auto 0;background:var(--cream);border:1px solid var(--line);border-radius:var(--radius);padding:1.5rem 2rem;display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;justify-content:space-between} .cater-strip p{font-size:.95rem;color:var(--cocoa-soft)} .cater-strip strong{color:var(--cocoa)} /* find us */ .find-row{display:grid;grid-template-columns:1fr 1fr;gap:1.4rem;max-width:62rem;margin:0 auto} @media(max-width:840px){.find-row{grid-template-columns:1fr}} .find-card{background:var(--white);border:1px solid var(--line);border-radius:var(--radius);padding:2.2rem;box-shadow:var(--shadow-soft)} .find-card h3{font-size:1.4rem;margin-bottom:.6rem} .find-card p{color:var(--cocoa-soft);margin-bottom:1.3rem} .find-actions{display:flex;gap:.8rem;flex-wrap:wrap} .find-fine{display:flex;flex-direction:column;gap:.8rem} .find-fine details{background:var(--white);border:1px solid var(--line);border-radius:16px;padding:1.05rem 1.3rem} .find-fine summary{font-weight:700;cursor:pointer;font-size:.98rem} .find-fine p{margin-top:.6rem;color:var(--cocoa-soft);font-size:.9rem} /* footer — stays cream, per the color law */ .footer{background:var(--cream-deep);padding:2.4rem clamp(1rem,4vw,3rem);display:flex;flex-wrap:wrap;gap:1.4rem;align-items:center;justify-content:space-between} .footer .micro{margin:0} .footer-links{display:flex;gap:1.4rem} .footer-links a{font-size:.9rem;color:var(--cocoa-soft);text-decoration:none} .footer-links a:hover{color:var(--caramel)} /* motion base states — v3-motion.js flips .is-in. Hidden state is scoped under html.motion-ready (set by an inline snippet only when JS runs), so a no-JS page stays fully visible. */ @media(prefers-reduced-motion:no-preference){ .motion-ready [data-animate="rise"],.motion-ready [data-animate="card"]{opacity:0;transform:translateY(26px);transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1)} .motion-ready [data-animate].is-in{opacity:1;transform:translateY(0)} } /* ── live pieces driven from The Kitchen (/kitchen) ─────────────────────── */ /* closed bar: Marie flips it in Settings */ .closed-bar{background:var(--butter);color:var(--cocoa);text-align:center;font-size:.86rem;padding:.6rem 1rem;border-bottom:1.5px dashed rgba(74,50,32,.35)} .closed-bar strong{font-weight:800;letter-spacing:.03em} .closed-until{display:inline-block;margin-left:.6rem;font-weight:700;color:var(--caramel-ink)} /* a Hot Five pick that is sold out stays in its spot, muted, price reads Sold out */ .hot-card.is-out .hot-photo img{filter:saturate(.45) brightness(1.03)} .hot-card.is-out .hot-price{color:var(--cocoa-soft)} /* buttons that are real