/* ============================================================ Delicious Daily Warm editorial food platform. Mobile-first. One consistent system. ========================================================================== */ :root{ --bg:#efe7d8; --bg-2:#e7dcc8; --surface:#fffdf8; --surface-2:#fff; --ink:#221913; --ink-soft:#6a5a48; --ink-faint:#9a8a76; --gold:#c0923a; --gold-deep:#8a6212; --gold-lite:#e7c486; --terra:#bd5a39; --green:#5e7a47; --line:rgba(34,25,19,.12); --line-soft:rgba(42,32,24,.07); --espresso:#241a13; --espresso-2:#2f2218; --serif:"Fraunces",Georgia,serif; --sans:"Hanken Grotesk",ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif; --container:1180px; --pad:clamp(1rem,4vw,1.4rem); --radius:13px; --radius-lg:16px; --shadow:0 18px 44px rgba(58,36,20,.12); --shadow-soft:0 8px 22px rgba(58,36,20,.08); --noir:#160f08; --noir-2:#1f160d; --noir-3:#2a1d11; --ivory:#f6efe1; --ivory-soft:#cbb89a; } *{box-sizing:border-box} html{-webkit-text-size-adjust:100%;scroll-behavior:smooth;background:var(--bg)} @media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}} body{margin:0;font-family:var(--sans);color:var(--ink);background:var(--bg);line-height:1.6;-webkit-font-smoothing:antialiased} img{max-width:100%;display:block} a{color:inherit;text-decoration:none} h1,h2,h3,h4{font-family:var(--serif);font-weight:440;line-height:1.06;letter-spacing:-.015em;margin:0;color:var(--ink)} h1{font-size:clamp(2.4rem,6.4vw,4.2rem)} h2{font-size:clamp(1.8rem,4vw,2.9rem)} h3{font-size:clamp(1.25rem,2.4vw,1.6rem)} p{margin:0} .lead{font-size:clamp(1.05rem,1.5vw,1.2rem);color:var(--ink-soft);max-width:60ch} .muted{color:var(--ink-soft)} .eyebrow{display:inline-block;font-family:var(--sans);font-size:.74rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:.5rem} ::selection{background:var(--gold-lite)} /* layout wrappers via sections */ main,.hero,.section,.todayStrip,.modeGrid,.howStrip,.ctaBand,.todayStripHead{} .hero,.section,.todayStrip,.howStrip,.modeGrid.featureWide,.ctaBand,.split,.pricingMini{ width:min(var(--container),100% - 2*var(--pad));margin-inline:auto} .page{width:min(var(--container),100% - 2*var(--pad));margin-inline:auto} .section{padding-block:clamp(2.2rem,5vw,3.4rem)} /* topline */ .topline{background:var(--espresso);color:#f3e4c6;font-size:.8rem;text-align:center;padding:.5rem 1rem;letter-spacing:.01em} /* ---------------- nav ---------------- */ .nav{position:sticky;top:0;z-index:60;display:flex;align-items:center;justify-content:space-between;gap:1rem; width:min(var(--container),100% - 2*var(--pad));margin:.8rem auto 0;padding:.6rem .7rem .6rem 1rem; background:rgba(255,253,249,.9);backdrop-filter:blur(12px);border:1px solid var(--line);border-radius:999px;box-shadow:var(--shadow-soft)} .brand{display:flex;align-items:center;gap:.6rem} .logoMark{display:inline-flex;align-items:center;flex:0 0 auto;filter:drop-shadow(0 4px 9px rgba(143,101,22,.28))} .logoMark svg{display:block} .brandTld{color:var(--gold-deep);font-weight:380;letter-spacing:-.01em} .brandWord{font-family:var(--serif);font-size:1.35rem;color:var(--ink);letter-spacing:-.02em} .navLinks{display:flex;align-items:center;gap:.1rem} .navLinks a{padding:.55rem .7rem;border-radius:999px;font-size:.9rem;font-weight:500;color:var(--ink-soft);white-space:nowrap} .navLinks a:hover{color:var(--gold-deep);background:rgba(179,128,31,.08)} .navLinks a[aria-current=page]{color:var(--gold-deep);background:rgba(179,128,31,.1)} .navCta{margin-left:.4rem;background:linear-gradient(180deg,#d7a44a,var(--gold-deep));color:#2a1a08!important;font-weight:650!important;padding:.6rem 1.05rem!important} .navToggle{display:none;width:46px;height:46px;flex:0 0 46px;border:1px solid var(--line);border-radius:50%;background:var(--surface);cursor:pointer;align-items:center;justify-content:center;flex-direction:column;gap:4px} .navToggle span{width:18px;height:2px;background:var(--ink);border-radius:2px;transition:.25s} .navToggle[aria-expanded=true] span:nth-child(1){transform:translateY(6px) rotate(45deg)} .navToggle[aria-expanded=true] span:nth-child(2){opacity:0} .navToggle[aria-expanded=true] span:nth-child(3){transform:translateY(-6px) rotate(-45deg)} .navScrim{position:fixed;inset:0;background:rgba(36,26,19,.5);opacity:0;visibility:hidden;transition:.25s;z-index:55} .navScrim.show{opacity:1;visibility:visible} @media(max-width:900px){ .navToggle{display:flex} .navLinks{position:fixed;top:0;right:0;height:100dvh;width:min(84vw,330px);flex-direction:column;align-items:stretch;gap:.3rem; padding:5rem 1.2rem 2rem;background:var(--surface);border-left:1px solid var(--line);box-shadow:-24px 0 50px rgba(36,26,19,.25); transform:translateX(105%);transition:transform .3s cubic-bezier(.4,0,.2,1);z-index:58;overflow-y:auto} .navLinks.open{transform:translateX(0)} .navLinks a{padding:.85rem 1rem;font-size:1.02rem;border-radius:12px} .navCta{margin:.5rem 0 0;text-align:center} } /* ---------------- buttons ---------------- */ .btn{display:inline-flex;align-items:center;justify-content:center;gap:.4rem;min-height:50px;padding:0 1.3rem;border-radius:999px; font-family:var(--sans);font-weight:600;font-size:.97rem;border:1px solid transparent;cursor:pointer; background:linear-gradient(180deg,#d7a44a,var(--gold-deep));color:#2a1a08;transition:transform .15s,box-shadow .15s,background .15s;box-shadow:0 8px 20px rgba(143,101,22,.25)} .btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(143,101,22,.34)} .btn:active{transform:translateY(0)} .btn.ghost{background:transparent;color:var(--ink);border-color:var(--line);box-shadow:none} .btn.ghost:hover{border-color:var(--gold);color:var(--gold-deep);background:rgba(179,128,31,.06)} .btn.small{min-height:42px;padding:0 1rem;font-size:.88rem;box-shadow:none} .heroBtns{display:flex;flex-wrap:wrap;gap:.7rem;margin-top:1.4rem} /* ---------------- hero ---------------- */ .hero{display:grid;grid-template-columns:1fr;gap:clamp(1.6rem,4vw,2.6rem);align-items:center;padding-top:clamp(2rem,5vw,3.4rem)} .heroCopy h1{margin:.6rem 0 1rem} .proof{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.6rem} .proof span{font-size:.8rem;color:var(--ink-soft);border:1px solid var(--line);border-radius:999px;padding:.4rem .75rem;background:var(--surface)} .heroVisual{position:relative} .heroVisual img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg);box-shadow:var(--shadow);border:1px solid var(--line)} .floatingCard{position:absolute;left:1rem;bottom:1rem;background:rgba(255,253,249,.94);backdrop-filter:blur(6px);border:1px solid var(--line);border-radius:14px;padding:.7rem .9rem;box-shadow:var(--shadow-soft);max-width:70%} .floatingCard b{display:block;font-family:var(--serif);color:var(--ink);font-size:1.05rem} .floatingCard span{font-size:.82rem;color:var(--ink-soft)} @media(min-width:920px){.hero{grid-template-columns:1.05fr .95fr}} /* intro */ .section.intro{max-width:54rem;text-align:center} .section.intro h2{margin:.4rem 0 .8rem} .section.intro p{color:var(--ink-soft);font-size:1.08rem;margin-inline:auto;max-width:54ch} /* ---------------- recipe grid + cards ---------------- */ .todayStrip{padding-block:clamp(1.4rem,3vw,2.2rem)} .todayStripHead{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1.2rem} .recipeGrid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.1rem} .recipeGrid>*{flex:1 1 250px;max-width:330px} @media(max-width:559px){.recipeGrid>*{max-width:none;flex-basis:100%}} .recipeCard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;display:flex;flex-direction:column;box-shadow:var(--shadow-soft);transition:transform .2s,box-shadow .2s} .recipeCard:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .foodArt{position:relative;display:block;aspect-ratio:4/3;overflow:hidden;background:var(--bg-2)} .foodArt img{width:100%;height:100%;object-fit:cover;transition:transform .4s} .recipeCard:hover .foodArt img{transform:scale(1.04)} .lockBadge,.lockTag{position:absolute;top:.7rem;right:.7rem;background:rgba(36,26,19,.82);color:#f3e4c6;font-size:.7rem;font-weight:600;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .6rem;border-radius:999px} .recipeCard.locked .foodArt img{filter:saturate(.6) brightness(.82)} .recipeBody{padding:1rem 1.1rem 1.1rem;display:flex;flex-direction:column;gap:.45rem;flex:1} .mealType{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--terra)} .recipeBody h3{font-size:1.18rem;line-height:1.15} .recipeBody p{color:var(--ink-soft);font-size:.92rem;line-height:1.5;flex:1} .macro{font-size:.82rem;color:var(--ink-faint)} .macro b{color:var(--ink)} .tags{display:flex;flex-wrap:wrap;gap:.35rem} .tags span{font-size:.72rem;color:var(--green);background:rgba(94,122,71,.1);border-radius:999px;padding:.25rem .55rem} .cardActions{margin-top:.4rem} /* ---------------- mode cards ---------------- */ .modeGrid{display:grid;grid-template-columns:1fr;gap:1.1rem;padding-block:clamp(1.4rem,3vw,2.2rem)} @media(min-width:780px){.modeGrid{grid-template-columns:repeat(3,1fr)}} .modeCard{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-soft);transition:transform .2s,box-shadow .2s;display:flex;flex-direction:column} .modeCard:hover{transform:translateY(-4px);box-shadow:var(--shadow)} .modeCard img{width:100%;aspect-ratio:16/10;object-fit:cover} .modeCard>div{padding:1.1rem 1.2rem 1.3rem} .modeCard span{font-size:.72rem;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-deep)} .modeCard h2{font-size:1.4rem;margin:.3rem 0 .4rem} .modeCard p{color:var(--ink-soft);font-size:.92rem} /* how strip / steps */ .howStrip,.stepsGrid{display:grid;grid-template-columns:1fr;gap:1rem;padding-block:clamp(1.6rem,4vw,2.6rem)} @media(min-width:760px){.howStrip{grid-template-columns:repeat(3,1fr)}.stepsGrid{grid-template-columns:repeat(4,1fr)}} .step{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem 1.3rem;box-shadow:var(--shadow-soft)} .step b{display:grid;place-items:center;width:38px;height:38px;border-radius:50%;background:var(--espresso);color:var(--gold-lite);font-family:var(--serif);font-size:1.1rem;margin-bottom:.7rem} .step h2,.step h3{font-size:1.2rem;margin-bottom:.4rem} .step p{color:var(--ink-soft);font-size:.92rem} /* cta band */ .ctaBand{background:linear-gradient(150deg,var(--espresso),var(--espresso-2));color:#f6ead2;border-radius:var(--radius-lg);text-align:center; padding:clamp(2.2rem,6vw,3.6rem) clamp(1.2rem,4vw,2.4rem);margin-block:clamp(2.2rem,5vw,3.4rem);box-shadow:var(--shadow)} .ctaBand h2{color:#fff5e3} .ctaBand p{color:#d9c6a6;max-width:48ch;margin:.8rem auto 0} .ctaBand .heroBtns{justify-content:center} .ctaBand .btn.ghost{color:#f6ead2;border-color:rgba(246,234,210,.35)} /* ---------------- generic page ---------------- */ .pageHero{padding-block:clamp(2rem,5vw,3.2rem);max-width:60rem} .pageHero h1{margin:.3rem 0 .8rem} .pageHero .lead{margin-bottom:1.2rem} /* panels / split / featureGrid / dashboard */ .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.3rem,3vw,1.8rem);box-shadow:var(--shadow-soft)} .panel.dark{background:linear-gradient(150deg,var(--espresso),var(--espresso-2));color:#f1e3cb} .panel.dark h2{color:#fff5e3}.panel.dark p{color:#d4c2a4} .split{display:grid;grid-template-columns:1fr;gap:1.4rem;align-items:center;padding-block:clamp(1.6rem,4vw,2.6rem)} @media(min-width:860px){.split{grid-template-columns:1fr 1fr}} .featureGrid,.dashboardGrid,.checkoutGrid{display:grid;grid-template-columns:1fr;gap:1rem;padding-block:1rem} @media(min-width:760px){.featureGrid,.dashboardGrid{grid-template-columns:repeat(3,1fr)}.checkoutGrid{grid-template-columns:1fr 1fr}} .checks{list-style:none;margin:1rem 0;padding:0;display:grid;gap:.5rem} .checks li{position:relative;padding-left:1.6rem;color:var(--ink-soft)} .checks li::before{content:"";position:absolute;left:0;top:.45rem;width:9px;height:9px;border-radius:50%;background:var(--gold)} .statRow{display:flex;gap:1.4rem;margin-top:1rem} .statRow span{font-size:.85rem;color:var(--ink-soft)}.statRow b{display:block;font-family:var(--serif);font-size:1.6rem;color:var(--ink)} .miniList{list-style:none;margin:.6rem 0 0;padding:0;display:grid;gap:.4rem} .miniList li{color:var(--ink-soft);font-size:.92rem} .dashboardGrid .panel h2{font-size:1.2rem;margin-bottom:.4rem} /* recipe page */ .recipePage{width:min(var(--container),100% - 2*var(--pad));margin-inline:auto;padding-block:clamp(1.6rem,4vw,2.6rem)} .recipeHero{display:grid;grid-template-columns:1fr;gap:1.4rem;align-items:center} @media(min-width:860px){.recipeHero{grid-template-columns:1fr 1fr}} .recipeHeroImg img{width:100%;aspect-ratio:4/3;object-fit:cover;border-radius:var(--radius-lg);border:1px solid var(--line);box-shadow:var(--shadow)} .macroRow{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.1rem 0} .macroRow span{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:.5rem .8rem;font-size:.82rem;color:var(--ink-soft);text-align:center;line-height:1.2} .macroRow b{display:block;font-family:var(--serif);font-size:1.2rem;color:var(--ink)} .recipeColumns{display:grid;grid-template-columns:1fr;gap:1.2rem;margin-top:1.8rem} @media(min-width:780px){.recipeColumns{grid-template-columns:.9fr 1.1fr}} .ingredients{list-style:none;margin:0;padding:0;display:grid;gap:.55rem} .ingredients li{padding:.6rem .8rem;background:var(--bg-2);border-radius:10px;font-size:.95rem} .steps{margin:0;padding-left:1.2rem;display:grid;gap:.7rem} .steps li{padding-left:.3rem;line-height:1.6} .recipeColumns h2{margin-bottom:.8rem}.recipeColumns h3{margin:1.2rem 0 .4rem} /* pricing */ .plans{display:grid;grid-template-columns:1fr;gap:1.1rem;padding-block:1rem} @media(min-width:680px){.plans{grid-template-columns:repeat(2,1fr)}} @media(min-width:1000px){.plans{grid-template-columns:repeat(4,1fr)}} .plan{position:relative;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.6rem 1.4rem;box-shadow:var(--shadow-soft);display:flex;flex-direction:column} .plan.featured{border-color:var(--gold);box-shadow:0 16px 40px rgba(143,101,22,.18);transform:translateY(-4px)} .planFlag{position:absolute;top:-.8rem;left:1.4rem;background:linear-gradient(180deg,#d7a44a,var(--gold-deep));color:#2a1a08;font-size:.72rem;font-weight:700;letter-spacing:.08em;text-transform:uppercase;padding:.3rem .7rem;border-radius:999px} .plan h2{font-size:1.5rem}.price{font-family:var(--serif);font-size:2.2rem;color:var(--gold-deep);margin:.3rem 0 .8rem} .plan ul{list-style:none;margin:0 0 1.2rem;padding:0;display:grid;gap:.5rem;flex:1} .plan li{position:relative;padding-left:1.4rem;color:var(--ink-soft);font-size:.92rem} .plan li::before{content:"✓";position:absolute;left:0;color:var(--gold);font-weight:700} .pricingMini{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;padding-block:1rem} .pricingMini a{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1rem;text-align:center;font-family:var(--serif);box-shadow:var(--shadow-soft)} .pricingMini span{display:block;color:var(--ink-soft);font-family:var(--sans);font-size:.85rem;margin-top:.2rem} /* paywall */ .paywall{padding-block:1.4rem} .paywallCard{background:linear-gradient(150deg,#fff,#f7efe2);border:1px dashed var(--gold);border-radius:var(--radius-lg);padding:clamp(1.6rem,4vw,2.4rem);text-align:center;box-shadow:var(--shadow-soft)} .paywallCard .lockTag{position:static;display:inline-block;background:var(--espresso);margin-bottom:.7rem} .paywallCard h2{margin-bottom:.5rem}.paywallCard p{color:var(--ink-soft);max-width:48ch;margin:0 auto} .paywallCard .heroBtns{justify-content:center} /* remix / forms */ .remixBox{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.4rem,3vw,2rem);margin-block:clamp(1.6rem,4vw,2.4rem);box-shadow:var(--shadow-soft); width:min(var(--container),100% - 2*var(--pad));margin-inline:auto} .remixBox h2{margin-bottom:.5rem} .remixBox label{display:block;font-weight:600;font-size:.9rem;margin-bottom:.4rem} textarea,input,select{width:100%;font-family:var(--sans);font-size:1rem;color:var(--ink);background:var(--surface-2);border:1px solid var(--line);border-radius:12px;padding:.85rem 1rem} textarea{min-height:120px;resize:vertical;margin-bottom:.8rem} input:focus,textarea:focus,select:focus{outline:none;border-color:var(--gold);box-shadow:0 0 0 3px rgba(179,128,31,.16)} .note{font-size:.86rem;color:var(--ink-soft);margin-top:.6rem;background:rgba(179,128,31,.07);border-radius:10px;padding:.7rem .9rem} .success{color:#2f6a32;font-weight:600}.error{color:#b03a2e;font-weight:600;margin:.4rem 0} /* auth */ .auth{width:min(560px,100% - 2*var(--pad));margin:clamp(2rem,5vw,3.4rem) auto} .authBox{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.6rem,4vw,2.4rem);box-shadow:var(--shadow);display:flex;flex-direction:column;gap:.5rem} .authBox.wide{width:100%} .authBox h1{font-size:2rem;margin-bottom:.3rem} .authBox label{font-weight:600;font-size:.88rem;margin-top:.5rem} .authBox input,.authBox select,.authBox textarea{margin-bottom:.2rem} .authBox .btn{margin-top:1rem} .authBox a{color:var(--gold-deep);font-weight:600} /* grocery */ .listPanel{padding-block:1rem} .grocery{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.5rem} .grocery li label{display:flex;align-items:center;gap:.7rem;padding:.7rem .9rem;background:var(--bg-2);border-radius:10px;cursor:pointer} .grocery input{width:18px;height:18px;flex:0 0 18px;accent-color:var(--gold)} /* faq */ .faq{display:grid;gap:.7rem;max-width:60rem;width:min(var(--container),100% - 2*var(--pad));margin:0 auto clamp(2rem,5vw,3rem)} .faq details{background:var(--surface);border:1px solid var(--line);border-radius:14px;overflow:hidden} .faq summary{cursor:pointer;list-style:none;padding:1.1rem 1.2rem;font-family:var(--serif);font-size:1.12rem;color:var(--ink);display:flex;justify-content:space-between;gap:1rem} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--gold);font-family:var(--sans);font-size:1.3rem;transition:.2s} .faq details[open] summary::after{transform:rotate(45deg)} .faq details p{padding:0 1.2rem 1.2rem;color:var(--ink-soft)} /* admin */ .adminPanel{width:min(var(--container),100% - 2*var(--pad));margin:1.4rem auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);padding:1.4rem;box-shadow:var(--shadow-soft);overflow-x:auto} .adminPanel table{width:100%;border-collapse:collapse;font-size:.9rem} .adminPanel th,.adminPanel td{text-align:left;padding:.6rem .7rem;border-bottom:1px solid var(--line-soft)} .adminPanel th{color:var(--gold-deep);font-weight:600} /* install */ .install{width:min(620px,100% - 2*var(--pad));margin:clamp(3rem,8vw,5rem) auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:2rem;text-align:center;box-shadow:var(--shadow)} .install h1{margin-bottom:.6rem}.install .btn{margin:.4rem .3rem 0} /* footer */ .footer{background:var(--espresso);color:#cdbb9d;margin-top:clamp(2.4rem,6vw,4rem);padding-block:clamp(2.2rem,5vw,3.2rem)} .footCols{width:min(var(--container),100% - 2*var(--pad));margin-inline:auto;display:grid;grid-template-columns:1fr;gap:1.6rem} @media(min-width:760px){.footCols{grid-template-columns:1.5fr 1fr 1fr 1fr}} .footer .brand.big .brandWord{color:#fff5e3} .footer p{color:#a8967c;font-size:.9rem;max-width:34ch;margin-top:.6rem} .footer h4{color:var(--gold-lite);font-size:.74rem;letter-spacing:.14em;text-transform:uppercase;margin:0 0 .8rem} .footer a{display:block;color:#cdbb9d;font-size:.92rem;padding:.18rem 0} .footer a:hover{color:#fff5e3} .footBase{width:min(var(--container),100% - 2*var(--pad));margin:2rem auto 0;padding-top:1.3rem;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-wrap:wrap;justify-content:space-between;gap:.6rem;color:#8f7e66;font-size:.82rem} :focus-visible{outline:2px solid var(--gold);outline-offset:3px;border-radius:6px} /* ---------------- menu builder ---------------- */ .builder{width:min(var(--container),100% - 2*var(--pad));margin:0 auto;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-lg);padding:clamp(1.4rem,3.5vw,2.2rem);box-shadow:var(--shadow-soft);display:grid;gap:1.3rem} .choiceGroup h4{font-family:var(--sans);font-size:.82rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-soft);margin-bottom:.6rem} .choiceGroup h4 .muted{text-transform:none;letter-spacing:0;font-weight:400} .pills{display:flex;flex-wrap:wrap;gap:.5rem} .pill{position:relative;cursor:pointer} .pill input{position:absolute;opacity:0;inset:0;cursor:pointer} .pill span{display:inline-block;padding:.55rem 1rem;border-radius:999px;border:1px solid var(--line);background:var(--bg-2);color:var(--ink-soft);font-size:.92rem;font-weight:500;transition:.15s;user-select:none} .pill:hover span{border-color:var(--gold);color:var(--gold-deep)} .pill input:checked+span{background:linear-gradient(180deg,#d7a44a,var(--gold-deep));color:#2a1a08;border-color:transparent;font-weight:600;box-shadow:0 6px 16px rgba(143,101,22,.25)} .pill input:focus-visible+span{outline:2px solid var(--gold);outline-offset:2px} .builderActions{display:flex;flex-wrap:wrap;align-items:center;gap:1rem;margin-top:.3rem} .builderActions .note{flex:1;min-width:200px} .builtHead{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-end;gap:1rem;margin:clamp(1.8rem,4vw,2.6rem) 0 1.2rem} .builtHead h2{margin:.2rem 0 .3rem} .builtHead .heroBtns{margin-top:0} /* macro totals bar */ .totalsBar{display:flex;flex-wrap:wrap;align-items:center;gap:.4rem 1.4rem;background:linear-gradient(150deg,var(--espresso),var(--espresso-2));color:#f3e4c6;border-radius:var(--radius);padding:1rem 1.3rem;margin:1.1rem 0 1.4rem;box-shadow:var(--shadow-soft)} .totalsBar span{font-size:.92rem;color:#d4c2a4} .totalsBar b{color:#fff5e3;font-family:var(--serif);font-size:1.15rem;margin-right:.15rem} .totalsLabel{font-size:.72rem!important;font-weight:700;letter-spacing:.12em;text-transform:uppercase;color:var(--gold-lite)!important;margin-right:.4rem} .builder .choiceGroup .pills label.pill input[type=checkbox]+span::before{content:"";display:inline-block;width:0;} /* install-app button */ .navInstall{border:1px solid var(--gold);background:transparent;color:var(--gold-deep);font-family:var(--sans);font-weight:600;font-size:.86rem;padding:.5rem .85rem;border-radius:999px;cursor:pointer;white-space:nowrap} .navInstall:hover{background:rgba(179,128,31,.08)} @media(max-width:900px){.navInstall{margin-top:.4rem}} /* grocery sourcing */ .listHead{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:.6rem} .groceryItem{display:flex;align-items:center;gap:.7rem;cursor:pointer} .groceryItem input{width:18px;height:18px;flex:0 0 18px;accent-color:var(--gold)} .grocery li{background:var(--bg-2);border-radius:12px;padding:.7rem .9rem;margin-bottom:.5rem;list-style:none} .grocery li:has(input:checked) .groceryItem span{text-decoration:line-through;color:var(--ink-faint)} .buy{margin-top:.4rem} .buy summary{cursor:pointer;list-style:none;font-size:.8rem;font-weight:600;color:var(--gold-deep);display:inline-flex;align-items:center;gap:.3rem} .buy summary::-webkit-details-marker{display:none} .buy summary::after{content:"▾";font-size:.7rem;transition:.2s} .buy[open] summary::after{transform:rotate(180deg)} .buyLinks{display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.5rem} .buyLinks a,.srcChip{font-size:.8rem;font-weight:500;color:var(--ink);background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:.35rem .7rem;transition:.15s} .buyLinks a:hover,.srcChip:hover{border-color:var(--gold);color:var(--gold-deep);background:rgba(179,128,31,.06)} .sourcing .qualityLinks{display:flex;flex-wrap:wrap;gap:.5rem;margin:.4rem 0 .2rem} /* ============================================================ ELEGANCE PASS A tasteful luxury layer refining the base system. */ body{background: radial-gradient(1200px 600px at 80% -10%, rgba(231,201,127,.16), transparent 60%), radial-gradient(900px 500px at -10% 10%, rgba(189,90,57,.06), transparent 55%), var(--bg)} h1{font-weight:380;letter-spacing:-.02em} h2{font-weight:400} .eyebrow{position:relative;padding-left:1.6rem} .eyebrow::before{content:"";position:absolute;left:0;top:50%;width:1.1rem;height:1px;background:linear-gradient(90deg,var(--gold),transparent);transform:translateY(-50%)} .topline{background:linear-gradient(90deg,var(--espresso),#3a2a1c,var(--espresso));letter-spacing:.04em;font-weight:300} /* nav refinement */ .nav{box-shadow:0 10px 30px rgba(58,36,20,.10),inset 0 1px 0 rgba(255,255,255,.6)} .logoMark{box-shadow:none} .brandWord{font-weight:380} /* buttons: subtle foil */ .btn{box-shadow:0 8px 20px rgba(143,101,22,.22),inset 0 1px 0 rgba(255,255,255,.45)} .btn::after{content:none} /* cards: gold hairline reveal + finer feel */ .recipeCard,.modeCard,.plan,.panel{border-color:rgba(42,32,24,.10)} .recipeCard{position:relative} .recipeCard::before{content:"";position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--gold),transparent);opacity:0;transition:opacity .25s;z-index:2} .recipeCard:hover::before{opacity:1} .mealType{color:var(--gold-deep)} .macro b,.macroRow b,.totalsBar b,.price{font-feature-settings:"lnum" 1} /* hero image: refined frame */ .heroVisual img,.recipeHeroImg img{box-shadow:0 24px 60px rgba(58,36,20,.18),0 2px 0 rgba(255,255,255,.4)} .floatingCard{border-color:rgba(179,128,31,.3)} /* section headings flourish on page heroes */ .pageHero h1::after,.section.intro h2::after{content:"";display:block;width:3rem;height:2px;margin-top:.9rem;background:linear-gradient(90deg,var(--gold),var(--gold-lite));border-radius:2px} .section.intro h2::after{margin-inline:auto} /* plan featured: gold corner */ .plan.featured{background:linear-gradient(180deg,#fff,#fffaf0)} /* new: verified macros + sourcing rows */ .verifiedTag{display:inline-flex;align-items:center;gap:.3rem;font-size:.74rem!important;font-weight:600;letter-spacing:.04em;color:#bfe3c0!important;background:rgba(94,122,71,.28);border:1px solid rgba(120,160,100,.4);padding:.25rem .6rem;border-radius:999px;margin-left:auto} .sourceRow{display:flex;flex-wrap:wrap;align-items:center;gap:.5rem;margin:.7rem 0} .sourceRowLabel{font-size:.72rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-faint);margin-right:.3rem} .srcChip.strong{background:linear-gradient(180deg,#fff,#fbf3e3);border-color:var(--gold);color:var(--gold-deep);font-weight:600} /* ---------------- notifications + ratings ---------------- */ .navBell{position:relative;display:inline-grid;place-items:center;width:42px;height:42px;border-radius:50%;color:var(--ink-soft);border:1px solid transparent;margin-left:auto} .navBell:hover{color:var(--gold-deep);background:rgba(179,128,31,.08)} .bellDot{position:absolute;top:4px;right:4px;min-width:17px;height:17px;padding:0 4px;border-radius:999px;background:var(--terra);color:#fff;font-size:.66rem;font-weight:700;display:grid;place-items:center;font-family:var(--sans);box-shadow:0 0 0 2px var(--surface)} @media(max-width:900px){.navBell{position:absolute;right:74px;top:50%;transform:translateY(-50%);margin:0}} .navToggle.alert::before{content:"";position:absolute;top:8px;right:8px;width:8px;height:8px;border-radius:50%;background:var(--terra);box-shadow:0 0 0 2px var(--surface)} .navToggle{position:relative} .notifyList{display:grid;gap:.6rem;margin-bottom:2rem} .notifyItem{display:flex;gap:.9rem;align-items:flex-start;background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:1rem 1.1rem;box-shadow:var(--shadow-soft);transition:.15s} .notifyItem:hover{border-color:var(--gold);transform:translateY(-1px)} .notifyItem.nolink{cursor:default} .notifyIcon{flex:0 0 12px;width:12px;height:12px;border-radius:50%;margin-top:.45rem;background:var(--gold)} .notifyIcon.ni-daily{background:var(--green)}.notifyIcon.ni-menu{background:var(--gold)}.notifyIcon.ni-welcome{background:var(--terra)}.notifyIcon.ni-news{background:var(--espresso)} .notifyBody{display:flex;flex-direction:column;gap:.15rem} .notifyBody b{font-family:var(--serif);font-size:1.08rem;color:var(--ink)} .notifyBody span{color:var(--ink-soft);font-size:.92rem} .notifyBody time{color:var(--ink-faint);font-size:.78rem;margin-top:.2rem} .cookRate{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:1rem;margin-top:1.6rem;background:linear-gradient(150deg,#fff,#f7efe2);border:1px solid var(--line);border-radius:var(--radius-lg);padding:1.4rem 1.6rem;box-shadow:var(--shadow-soft)} .cookRate h3{margin-bottom:.2rem} .rateBtns{display:flex;gap:.6rem;flex-wrap:wrap} .rateBtn{display:inline-flex;align-items:center;gap:.4rem;padding:.6rem 1.1rem;border-radius:999px;border:1px solid var(--line);background:var(--surface);font-weight:600;font-size:.92rem;color:var(--ink);transition:.15s} .rateBtn:hover{border-color:var(--gold);color:var(--gold-deep)} .rateBtn.up.on{background:rgba(94,122,71,.14);border-color:var(--green);color:#3f5a2f} .rateBtn.down.on{background:rgba(189,90,57,.12);border-color:var(--terra);color:#9a3f24} .checkRow{display:flex;align-items:center;gap:.6rem;font-weight:500;color:var(--ink-soft);margin:.4rem 0;cursor:pointer} .checkRow input{width:18px;height:18px;flex:0 0 18px;accent-color:var(--gold)} /* ---------------- richer hero ---------------- */ .heroVisual{padding:1.4rem} .heroRing{position:absolute;inset:-6% -4% -10% 2%;border-radius:50%; background:radial-gradient(closest-side, rgba(231,201,127,.35), rgba(231,201,127,.08) 70%, transparent); filter:blur(6px);z-index:0} .heroFrame{position:relative;z-index:1;border-radius:var(--radius-lg);padding:14px; background:linear-gradient(160deg, rgba(255,255,255,.9), rgba(244,236,224,.7)); border:1px solid rgba(179,128,31,.25); box-shadow:0 30px 70px rgba(58,36,20,.20), inset 0 1px 0 rgba(255,255,255,.7)} .heroFrame::before{content:"";position:absolute;inset:7px;border-radius:calc(var(--radius-lg) - 6px);border:1px solid rgba(179,128,31,.18);pointer-events:none} .heroFrame img{border-radius:calc(var(--radius-lg) - 8px);aspect-ratio:4/3;object-fit:cover;box-shadow:none;border:none;width:100%} .heroVisual .floatingCard{z-index:2;left:-.4rem;bottom:1.2rem} .heroStat{position:absolute;z-index:2;top:.6rem;right:.2rem;background:linear-gradient(150deg,var(--espresso),var(--espresso-2));color:#f6ead2;border-radius:16px;padding:.7rem 1rem;text-align:center;box-shadow:var(--shadow);border:1px solid rgba(231,201,127,.25)} .heroStat b{display:block;font-family:var(--serif);font-size:1.5rem;color:#fff5e3;line-height:1} .heroStat span{font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold-lite)} @media(max-width:600px){.heroStat{top:.2rem;right:0;padding:.5rem .7rem}.heroStat b{font-size:1.2rem}} /* ============================================================ LUXE v2 Fine-dining art direction. Dark cinematic hero, ivory menu surfaces, gold as fine foil, couture type. This layer intentionally overrides the earlier system. */ /* LUXE v2's :root MERGED into the single :root at the top of this file, 2026-07-17. There were TWO top-level :root blocks redefining the same design tokens (--bg, --ink, --surface, --gold, --sans ...). Same specificity, so the LATER one silently won for any token it repeated — meaning the tokens you read at the top of the file were not the ones the site actually used. Every effective value is preserved exactly; this only removes the ambiguity. Keep ONE :root: add tokens there, don't append a second block. */ body{background: radial-gradient(1100px 520px at 88% -8%, rgba(231,196,134,.22), transparent 60%), linear-gradient(180deg,#f1e9da,var(--bg)); color:var(--ink)} /* type: dramatic, editorial */ h1{font-weight:330;letter-spacing:-.028em;line-height:1.02} h1 em{font-style:italic;font-weight:330;color:var(--gold-deep)} h2{font-weight:360;letter-spacing:-.018em} .eyebrow{font-family:var(--sans);font-size:.7rem;font-weight:700;letter-spacing:.26em;color:var(--gold-deep);padding-left:0} .eyebrow::before{content:none} .lead{color:var(--ink-soft);font-weight:400} /* topline: thinner, finer */ .topline{background:var(--noir);color:var(--ivory-soft);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;font-weight:500;padding:.55rem 1rem} /* nav: flat editorial bar with a hairline, not a candy pill */ .nav{background:rgba(247,243,236,.82);backdrop-filter:blur(14px);border:none;border-bottom:1px solid var(--line);border-radius:0;box-shadow:none; width:100%;margin:0;padding:.85rem clamp(1rem,4vw,2.2rem);position:sticky;top:0} .brandWord{font-family:var(--serif);font-weight:360;letter-spacing:-.01em;font-size:1.4rem} .navLinks a{font-size:.84rem;font-weight:500;letter-spacing:.01em;color:var(--ink-soft)} .navLinks a:hover,.navLinks a[aria-current=page]{color:var(--gold-deep);background:transparent;text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--gold)} .navCta{background:var(--noir)!important;color:var(--ivory)!important;border-radius:2px!important;font-weight:500!important;letter-spacing:.04em;padding:.62rem 1.15rem!important;box-shadow:none!important;text-transform:uppercase;font-size:.78rem!important} .navCta:hover{background:var(--noir-3)!important} .navInstall{border-color:var(--line);border-radius:2px;color:var(--ink-soft)} @media(max-width:900px){.navLinks{background:var(--noir);border-left:none}.navLinks a{color:var(--ivory)}.navLinks a:hover{color:var(--gold-lite)}} /* buttons: foil, squared, restrained */ .btn{border-radius:3px;background:linear-gradient(180deg,#caa052,var(--gold-deep));color:#241405;font-weight:600;letter-spacing:.02em;box-shadow:0 10px 24px rgba(138,98,18,.22);min-height:52px} .btn.small{min-height:42px} .btn.ghost{background:transparent;border:1px solid var(--ink);color:var(--ink);box-shadow:none} .btn.ghost:hover{background:var(--ink);color:var(--ivory);border-color:var(--ink)} /* ---------- the cinematic hero (signature) ---------- */ .hero{background: radial-gradient(120% 130% at 82% 0%, #34230f 0%, var(--noir-2) 45%, var(--noir) 100%); color:var(--ivory);border:1px solid rgba(231,196,134,.16);border-radius:var(--radius-lg); padding:clamp(2.2rem,5vw,4rem) clamp(1.6rem,4vw,3.4rem);margin-top:1.6rem; box-shadow:0 50px 110px rgba(15,9,4,.42);overflow:hidden;position:relative} .hero::before{content:"";position:absolute;inset:0;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='60' height='60'%3E%3Ccircle cx='1' cy='1' r='.5' fill='%23e7c486' opacity='.06'/%3E%3C/svg%3E");pointer-events:none} .hero .eyebrow{color:var(--gold-lite)} .hero h1{color:#fbf2e0} .hero h1 em{color:var(--gold-lite)} .hero .lead{color:#cbb89a} .hero .proof span{background:rgba(255,255,255,.04);border:1px solid rgba(231,196,134,.2);color:#d7c5a4} .hero .btn.ghost{border-color:rgba(246,239,225,.4);color:var(--ivory)} .hero .btn.ghost:hover{background:var(--ivory);color:var(--noir)} .heroFrame{background:linear-gradient(160deg,rgba(255,255,255,.1),rgba(255,255,255,.02));border:1px solid rgba(231,196,134,.3);box-shadow:0 30px 70px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.18)} .heroFrame::before{border-color:rgba(231,196,134,.25)} .heroRing{background:radial-gradient(closest-side,rgba(231,196,134,.4),transparent 72%)} .heroVisual .floatingCard{background:rgba(20,14,8,.78);border:1px solid rgba(231,196,134,.28);backdrop-filter:blur(6px)} .heroVisual .floatingCard b{color:#fbf2e0}.heroVisual .floatingCard span{color:var(--ivory-soft)} .heroStat{background:rgba(20,14,8,.7);border:1px solid rgba(231,196,134,.3)} /* section intro + page heroes: editorial, with a hairline rule */ .section.intro h2::after,.pageHero h1::after{height:1px;width:54px;background:var(--gold);opacity:.7} .pageHero .eyebrow,.section.intro .eyebrow{display:inline-block} /* cards: finer, squared, gold hairline — less "soft app" */ .recipeCard,.modeCard,.plan,.panel,.step,.authBox,.remixBox,.builder,.adminPanel,.notifyItem,.cookRate,.paywallCard,.install{border-radius:var(--radius);border-color:var(--line);color:var(--ink)} .recipeCard{border-radius:var(--radius);box-shadow:0 10px 30px rgba(34,22,12,.08)} .recipeCard::before{height:1px;background:var(--gold);opacity:0} .recipeCard:hover::before{opacity:.9} .recipeCard:hover{box-shadow:0 22px 50px rgba(34,22,12,.16)} .foodArt{border-radius:0} .mealType{letter-spacing:.16em;color:var(--gold-deep);font-size:.66rem} .recipeBody h3{font-weight:380;letter-spacing:-.01em} .tags span{background:transparent;border:1px solid var(--line);color:var(--ink-soft);border-radius:2px} .lockBadge,.lockTag{background:rgba(20,14,8,.82);border-radius:2px;letter-spacing:.12em} /* today strip header as a menu masthead */ .todayStripHead{border-bottom:1px solid var(--line);padding-bottom:.9rem;align-items:flex-end} .todayStripHead h2{font-size:clamp(1.6rem,3vw,2.3rem)} /* footer: deep, refined */ .footer{background:var(--noir)} .footer h4{color:var(--gold-lite);letter-spacing:.2em} .modeCard,.plan{box-shadow:0 10px 30px rgba(34,22,12,.08)} .price{font-weight:340} .plan.featured{border-color:var(--gold)} /* refined focus */ :focus-visible{outline:1.5px solid var(--gold);outline-offset:3px} /* ---------------- recipe detail extras ---------------- */ .subhead{font-family:var(--sans);font-size:.72rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--gold-deep);margin-top:1.4rem} .equipList{list-style:none;padding:0;margin:.5rem 0 0;display:flex;flex-wrap:wrap;gap:.5rem} .equipList li{font-size:.85rem;color:var(--ink-soft);background:var(--bg-2);border:1px solid var(--line);border-radius:3px;padding:.35rem .7rem} .steps li{margin-bottom:1rem;line-height:1.65} .chefTip{margin-top:1.4rem;border:1px solid rgba(192,146,58,.45);background:linear-gradient(150deg,#fff,#fbf3e2);border-radius:var(--radius);padding:1.1rem 1.3rem;position:relative} .chefTipLabel{display:inline-block;font-size:.68rem;font-weight:700;letter-spacing:.18em;text-transform:uppercase;color:var(--gold-deep);margin-bottom:.3rem} .chefTip p{margin:0;color:var(--ink);font-style:italic;font-family:var(--serif);font-size:1.04rem;line-height:1.5} /* ---------------- AI Sous-Chef (flagship) ---------------- */ .sousChef{margin-top:2rem;background:radial-gradient(120% 130% at 85% 0%,#34230f,var(--noir-2) 55%,var(--noir)); color:var(--ivory);border:1px solid rgba(231,196,134,.2);border-radius:var(--radius-lg); padding:clamp(1.6rem,4vw,2.6rem);box-shadow:0 40px 90px rgba(15,9,4,.32)} .sousHead .eyebrow{color:var(--gold-lite)} .sousHead h2{color:#fbf2e0;margin:.1rem 0 .3rem} .sousHead .muted{color:#c9b79a} .sousChips{display:flex;flex-wrap:wrap;gap:.5rem;margin:1.1rem 0} .sousChip{background:rgba(255,255,255,.05);border:1px solid rgba(231,196,134,.28);color:#e9d9b8; border-radius:999px;padding:.5rem .9rem;font-size:.82rem;font-weight:500;cursor:pointer;transition:.15s;font-family:var(--sans)} .sousChip:hover{background:rgba(231,196,134,.16);border-color:var(--gold-lite);color:#fff7e6} .sousLog{display:flex;flex-direction:column;gap:.9rem;max-height:430px;overflow-y:auto;margin:.4rem 0} .sousLog:empty{display:none} .sousMsg{display:flex;flex-direction:column;gap:.25rem;max-width:90%} .sousMsg.me{align-self:flex-end;align-items:flex-end} .sousWho{font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-lite);opacity:.8} .sousMsg.me .sousWho{color:#cbb89a} .sousText{background:rgba(255,255,255,.06);border:1px solid rgba(231,196,134,.18);border-radius:14px;padding:.8rem 1rem; color:#f3e8d4;line-height:1.6;white-space:pre-wrap;font-size:.96rem} .sousMsg.me .sousText{background:var(--gold-deep);border-color:transparent;color:#fdf6e8} .sousMsg.loading .sousText{opacity:.6;font-style:italic} .sousInput{display:flex;gap:.6rem;margin-top:1rem} .sousInput input{flex:1;background:rgba(255,255,255,.07);border:1px solid rgba(231,196,134,.3);border-radius:10px; padding:.85rem 1rem;color:#fff;font-size:1rem;font-family:var(--sans)} .sousInput input::placeholder{color:#b6a486} .sousInput input:focus{outline:none;border-color:var(--gold-lite)} .sousInput .btn{min-height:auto;padding:.85rem 1.5rem} @media(max-width:600px){.sousMsg{max-width:100%}} /* ---------------- social: share + follow ---------------- */ .shareBar{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem} .shareLabel{font-size:.68rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--ink-faint);margin-right:.2rem} .shareBtn{display:inline-grid;place-items:center;width:40px;height:40px;border-radius:50%; background:var(--surface);border:1px solid var(--line);color:var(--ink-soft);cursor:pointer;transition:.15s;padding:0} .shareBtn:hover{border-color:var(--gold);color:var(--gold-deep);background:rgba(192,146,58,.08);transform:translateY(-1px)} .shareBtn.copied{border-color:var(--green);color:var(--green)} .shareBtn.copyLink{position:relative} .shareBtn.copyLink.copied::after{content:"Copied";position:absolute;bottom:-1.5rem;left:50%;transform:translateX(-50%); font-size:.66rem;letter-spacing:.05em;color:var(--green);font-weight:600;white-space:nowrap} .footSocials{display:flex;gap:.6rem;margin-top:1.1rem} .footSocial{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:50%; border:1px solid rgba(231,196,134,.28);color:var(--gold-lite);transition:.15s} .footSocial:hover{background:rgba(231,196,134,.14);border-color:var(--gold-lite);color:#fff7e6;transform:translateY(-1px)} /* ---------------- legal documents ---------------- */ .legal{max-width:760px;margin:0 auto;padding:0 var(--pad) 4rem;color:var(--ink-soft);line-height:1.75;font-size:1.02rem} .legal h2{font-family:var(--serif);font-size:1.5rem;color:var(--ink);margin:2.2rem 0 .6rem;letter-spacing:-.01em} .legal p{margin:0 0 1rem} .legal strong{color:var(--ink);font-weight:600} .legal a{color:var(--gold-deep);text-decoration:underline;text-underline-offset:3px} .legalList{margin:0 0 1.2rem;padding-left:1.2rem} .legalList li{margin-bottom:.55rem} .pageHero .muted{margin-top:.4rem;font-size:.9rem} /* honeypot anti-spam field — hidden from humans */ .hp{position:absolute !important;left:-9999px !important;top:auto;width:1px;height:1px;opacity:0;overflow:hidden;pointer-events:none} /* ---------------- shop local near you ---------------- */ .localGrid{display:flex;flex-wrap:wrap;gap:.5rem;margin:.5rem 0 1rem} .localSearch{cursor:pointer} .buyLinks .localSearch{font-weight:600;color:var(--gold-deep)} .locStatus{font-size:.85rem;color:var(--ink-faint);margin-left:.6rem} /* ============================================================ REFINE v3 Premium polish: editorial cards, calmer hero, flatter buttons, more air. ========================================================================== */ /* quieter, editorial diet tags (was green pills) */ .tags span{background:transparent;border:1px solid var(--line);color:var(--ink-soft); font-size:.64rem;font-weight:600;letter-spacing:.1em;text-transform:uppercase;padding:.3rem .5rem;border-radius:2px} /* crisp squared cards to match the editorial system; lighter at rest, lift on hover */ .recipeCard{border-radius:4px;border-color:var(--line-soft);box-shadow:0 1px 2px rgba(42,32,24,.05)} .recipeCard:hover{transform:translateY(-3px);box-shadow:0 26px 50px rgba(58,36,20,.16);border-color:var(--line)} .recipeBody{padding:1.05rem 1.15rem 1.2rem;gap:.5rem} .recipeBody h3{font-size:1.24rem;line-height:1.12} .foodArt{aspect-ratio:5/4} .modeCard,.panel,.plan,.faq details,.howStrip>*{border-radius:4px} /* flatter, more expensive buttons (drop the shiny gradient) */ .btn{background:var(--gold-deep);color:#fff7ea;border-radius:3px;box-shadow:none;font-weight:600;letter-spacing:.04em} .btn:hover{transform:translateY(-1px);background:#7c5712;box-shadow:0 12px 26px rgba(124,87,18,.26)} /* hero: let the dish lead, calm the framing */ .heroFrame{padding:0;background:none!important;border:none!important;box-shadow:0 40px 90px rgba(18,11,4,.55)!important;border-radius:5px} .heroFrame::before{content:none} .heroFrame img{border-radius:5px;aspect-ratio:4/3} .heroRing{display:none} .heroVisual{padding:.4rem 1rem 1rem} .heroStat{border-radius:4px} .heroVisual .floatingCard{border-radius:4px} /* generous editorial rhythm */ .section{padding-block:clamp(3rem,7vw,5rem)} .todayStrip,.howStrip,.modeGrid.featureWide{padding-block:clamp(2.2rem,5.5vw,3.4rem)} .section.intro{max-width:50rem} .section.intro h2{font-size:clamp(2rem,4.4vw,3.1rem)} /* .intro is a LEAD-IN to the section right after it, not a standalone block. Two full section paddings met at that boundary (intro's ~5rem bottom + the next section's ~5rem top = ~160px of dead space between the intro copy and the next eyebrow). Collapse the boundary to one gap. Next sibling is .lvHome normally, .todayStrip on the no-levels fallback. */ .section.intro{padding-block-end:0} .section.intro + .section, .section.intro + .todayStrip{padding-block-start:clamp(2rem,4.5vw,3rem)} /* tighter, more dramatic display type */ h1{letter-spacing:-.022em} .lead{line-height:1.66} /* refined section header row on the menu strip */ .todayStripHead{align-items:baseline} .todayStripHead h2{font-size:clamp(1.7rem,3.6vw,2.4rem)} /* keyboard focus + motion floor */ a:focus-visible,.btn:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--gold);outline-offset:2px} @media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}} /* mode-card art: intentional brand panels (not empty plates) */ .modeCard .modeArt{display:block;aspect-ratio:16/10;position:relative;overflow:hidden} .modeCard .modeArt::after{content:"";position:absolute;inset:0; background:radial-gradient(120% 90% at 30% 18%,rgba(255,255,255,.10),transparent 60%)} .mode-plans{background:linear-gradient(140deg,#33422d,#1f2a1b)} .mode-remix{background:linear-gradient(140deg,#3c3320,#241a10)} .mode-desserts{background:linear-gradient(140deg,#3c2333,#231019)} /* mode-card icons */ .modeCard .modeArt{display:grid;place-items:center} .modeCard .modeArt svg{width:60px;height:60px;color:rgba(255,247,235,.6);position:relative;z-index:1} .recipeGrid{display:flex;flex-wrap:wrap;justify-content:center;gap:1.1rem} .recipeGrid>*{flex:1 1 250px;max-width:330px} @media(max-width:559px){.recipeGrid>*{max-width:none;flex-basis:100%}} .archiveTools{max-width:1100px;margin:0 auto 1.6rem;padding:0 1rem} #recipeSearch{width:100%;padding:.85rem 1.1rem;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--ink);font-size:1rem;font-family:inherit} #recipeSearch:focus{outline:2px solid var(--gold-deep);outline-offset:1px} .mealChips{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:.9rem;justify-content:center} .mealChips .chip{padding:.45rem .95rem;border:1px solid var(--line);border-radius:999px;background:transparent;color:var(--ink-soft);font:inherit;font-size:.85rem;cursor:pointer;transition:all .15s} .mealChips .chip:hover{border-color:var(--gold-deep);color:var(--ink)} .mealChips .chip.active{background:var(--gold-deep);border-color:var(--gold-deep);color:#fff} .adSlot{max-width:1000px;margin:1rem auto;padding:0 1rem;text-align:center;position:relative} .adSlot .adUnit{display:inline-block;line-height:0;max-width:100%} .adSlot img{max-width:100%;height:auto;border-radius:8px} .adSlot .adLabel{position:absolute;top:.1rem;right:1rem;font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--ink-soft);opacity:.55} .adHouse .adUnit{display:block;border:1px dashed var(--line);border-radius:10px;padding:.9rem 1rem;color:var(--ink-soft);text-decoration:none;background:var(--surface)} .adHouse .adHouseText strong{color:var(--gold-deep)} @media(max-width:759px){.footCols{grid-template-columns:1fr 1fr;gap:1.3rem 1.1rem}.footCols .footBrand{grid-column:1 / -1}.footer p{max-width:48ch}.footBase{justify-content:center;text-align:center}} .subWrap{width:min(var(--container),100% - 2*var(--pad));margin:0 auto 2.2rem} .subBox{background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:1.6rem 1.8rem;text-align:center} .subBox h3{font-family:Fraunces,serif;color:#fff5e3;font-size:1.5rem;margin:0 0 .4rem} .subBox p{color:#cdbb9d;margin:0 auto 1rem;max-width:46ch} .subForm{display:flex;gap:.5rem;justify-content:center;flex-wrap:wrap} .subForm input{flex:1 1 280px;max-width:340px;padding:.75rem 1rem;border:1px solid rgba(255,255,255,.18);border-radius:8px;background:rgba(0,0,0,.25);color:#fff5e3;font:inherit} .subForm button{padding:.75rem 1.5rem;border:0;border-radius:8px;background:var(--gold-deep,#b8893c);color:#fff;font:inherit;font-weight:600;cursor:pointer} .subMsg{margin-top:.7rem;font-size:.9rem;min-height:1.2em}.subMsg.ok{color:var(--gold-lite,#e7c98a)}.subMsg.err{color:#e8a0a0} .adSlot{display:block;clear:both;position:relative} .adHouse .adUnit{display:block;border:1px dashed var(--line);border-radius:10px;padding:1rem 1.2rem;background:var(--surface);color:var(--ink);text-decoration:none;font-size:.95rem;line-height:1.45} .adHouse .adHouseText{color:var(--ink)} .adHouse .adHouseText strong{color:var(--gold-deep);white-space:nowrap} @media(max-width:760px){.adSlot{margin:.8rem auto}.adHouse .adUnit{font-size:.88rem;padding:.85rem 1rem}} .comingSoon{text-align:center;padding:1.4rem 0} .csBadge{display:inline-block;font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;color:var(--gold-deep);border:1px solid var(--gold-deep);border-radius:999px;padding:.3rem .9rem;margin-bottom:.8rem} .comingSoon p{color:var(--ink-soft)} .csBtn{opacity:.65;cursor:default;pointer-events:none} .adHouse .csInline{color:var(--gold-deep);font-weight:600} .cfMsg{min-height:1.2em;font-size:.92rem}.cfMsg.ok{color:var(--gold-deep)}.cfMsg.err{color:#c0612f} .cfThanks{background:var(--surface);border:1px solid var(--gold-deep);border-radius:12px;padding:1.4rem;text-align:center;color:var(--ink)} .groceryItem input{accent-color:#b8893c} li.checkedOff .groceryItem span{text-decoration:line-through;opacity:.45} /* keep food photos cropped inside the card, never overflowing */ .recipeCard .foodArt{overflow:hidden;aspect-ratio:4/3;display:block} .recipeCard .foodArt img{width:100%;height:100%;object-fit:cover;display:block} /* quick-favorite heart on cards */ .recipeCard .cardActions{display:flex;align-items:center;gap:8px} .favHeart{background:none;border:0;cursor:pointer;font-size:20px;line-height:1;color:#d9cdba;padding:4px 8px;margin-left:auto;transition:transform .12s,color .12s} .favHeart:hover{transform:scale(1.15)} .favHeart.on{color:#d4452f} /* ===== FINAL: card image snapping + floating header (keep this LAST) ===== */ .recipeCard{overflow:hidden} .foodArt{display:block;position:relative;width:100%;aspect-ratio:4/3;overflow:hidden;line-height:0;background:#efe7da} .foodArt img{display:block;width:100%;height:100%;object-fit:cover;object-position:center;margin:0;border:0;border-radius:0} .heroVisual img,.modeCard img,.modeArt img{display:block} .nav{position:sticky;top:0;z-index:200;background:var(--surface,#fffaf2);backdrop-filter:saturate(1.15) blur(10px);-webkit-backdrop-filter:saturate(1.15) blur(10px);box-shadow:0 1px 0 rgba(42,32,24,.08),0 8px 24px rgba(42,32,24,.06)} /* navsearch-secondrow */ @media(min-width:980px){.nav .navLinks{flex-wrap:wrap;row-gap:6px}.nav .navLinks .navSearch{order:50;flex-basis:100%;justify-content:flex-start;margin:8px 0 0 !important}.nav .navLinks .navSearch input{max-width:320px}} /* nav-nooverflow */ .nav{flex-wrap:wrap;row-gap:.4rem} .nav .navLinks{flex-wrap:wrap;row-gap:.3rem} /* ---------- grouped nav dropdowns (Plan / Learn) ---------- */ .navDrop{position:relative} .navDrop>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px; padding:.55rem .7rem;border-radius:999px;font-size:.84rem;font-weight:500;letter-spacing:.01em; color:var(--ink-soft);white-space:nowrap;user-select:none} .navDrop>summary::-webkit-details-marker{display:none} .navDrop>summary::after{content:"";width:5px;height:5px;margin-top:-3px; border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor; transform:rotate(45deg);opacity:.55;transition:transform .18s} .navDrop[open]>summary::after{transform:rotate(-135deg);margin-top:1px} .navDrop>summary:hover,.navDrop[open]>summary,.navDrop.isHere>summary{color:var(--gold-deep)} .navDrop.isHere>summary{text-decoration:underline;text-underline-offset:6px;text-decoration-color:var(--gold)} .navDropMenu{position:absolute;top:calc(100% + 8px);left:0;min-width:212px;z-index:60; display:flex;flex-direction:column;gap:2px;padding:7px; background:var(--surface);border:1px solid var(--line);border-radius:14px; box-shadow:0 20px 44px rgba(36,26,19,.20)} .navDropMenu a{padding:.5rem .7rem;border-radius:9px;font-size:.86rem} .navDropMenu a:hover{background:rgba(179,128,31,.09)} @media(max-width:900px){ /* In the slide-in drawer the panel expands inline — no floating layer. */ .navDrop>summary{padding:.85rem 1rem;font-size:1.02rem;color:var(--ivory)} .navDropMenu{position:static;min-width:0;padding:.1rem 0 .4rem .8rem; background:transparent;border:0;box-shadow:none;border-left:1px solid rgba(246,239,225,.18); margin-left:1rem;border-radius:0} .navDropMenu a{font-size:.95rem;padding:.6rem .8rem} } /* anchor-scroll-offset */ html{scroll-padding-top:120px} /* nav-groups: REMOVED 2026-07-17 together with the app.js IIFE that built .navGroup. Nothing renders .navGroup any more, so every rule here was dead — but NOT harmless: two of them were written as bare `.navDrop{...}` and therefore also matched the LIVE server-rendered