/* journey.css — section transitions, stamp-card tracker, toasts, next-course pill */ /* ── section entrance transitions (JS adds .jn to ) ───── */ html.jn .sec, html.jn .menu-panel, html.jn .footer{ opacity:0; transform:translateY(34px) scale(.985); transition:opacity .7s ease, transform .75s cubic-bezier(.22,.9,.32,1.15); will-change:opacity, transform; } html.jn .sec.on-stage, html.jn .menu-panel.on-stage, html.jn .footer.on-stage{ opacity:1; transform:none; } @media (prefers-reduced-motion: reduce){ html.jn .sec, html.jn .menu-panel, html.jn .footer{ opacity:1; transform:none; transition:none; } } /* ── proof teaser cards ─────────────────────────────────────── */ .teaser-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:18px; } .teaser-card{ position:relative; display:flex; flex-direction:column; gap:8px; padding:26px 24px 22px; border-radius:var(--r); border:var(--border); background:var(--card); box-shadow:var(--shadow); text-decoration:none; color:var(--ink); overflow:hidden; transition:transform .35s cubic-bezier(.22,.9,.32,1.4), box-shadow .35s ease; } .teaser-card:hover{ transform:translateY(-6px) rotate(-.6deg); box-shadow:0 22px 44px rgba(36,31,21,.14); } .teaser-card.t1{ background:var(--c2-soft); } .teaser-card.t2{ background:var(--c1-soft); } .teaser-card.t3{ background:var(--c4-soft); } .teaser-card h3{ font-family:var(--disp), sans-serif; font-size:clamp(20px, 2.2vw, 26px); font-weight:600; margin:0; } .teaser-card p{ margin:0; color:var(--ink-soft); font-weight:600; font-size:15px; } .teaser-card .tz-tag{ position:absolute; top:14px; right:14px; font-family:var(--disp), sans-serif; font-size:12.5px; font-weight:600; padding:4px 11px; border-radius:999px; background:var(--ink); color:var(--paper); transform:rotate(4deg); } .teaser-card .tz-go{ margin-top:auto; padding-top:14px; font-weight:800; font-size:14.5px; display:inline-flex; align-items:center; gap:7px; } .teaser-card .tz-go .arr{ transition:transform .25s ease; display:inline-block; } .teaser-card:hover .tz-go .arr{ transform:translateX(5px); } @media (max-width: 860px){ .teaser-grid{ grid-template-columns:1fr; } } /* ── proof page bits ────────────────────────────────────────── */ .proof-intro{ padding-bottom:0 !important; } .proof-cta{ text-align:center; padding:34px 0 8px; } .proof-cta .contact-mega{ color:var(--ink); } /* ── stamp card (journey tracker) ───────────────────────────── */ .stampcard{ position:fixed; left:16px; bottom:16px; z-index:70; background:var(--card); border:2px dashed rgba(36,31,21,.35); border-radius:18px; box-shadow:0 16px 38px rgba(36,31,21,.18); padding:10px 12px 12px; width:196px; font-family:var(--body), sans-serif; transform:rotate(-1.2deg); transition:transform .3s ease; } .stampcard:hover{ transform:rotate(0deg); } .stampcard-head{ display:flex; align-items:center; justify-content:space-between; gap:8px; margin-bottom:8px; } .stampcard-title{ font-family:var(--disp), sans-serif; font-weight:600; font-size:13px; letter-spacing:.02em; } .stampcard-count{ font-size:11.5px; font-weight:900; background:var(--ink); color:var(--paper); border-radius:999px; padding:2px 8px; } .stampcard-min{ border:0; background:none; cursor:pointer; font-size:14px; line-height:1; color:var(--ink-soft); padding:2px 4px; border-radius:8px; } .stampcard-min:hover{ background:rgba(36,31,21,.08); color:var(--ink); } .stampcard-grid{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; } .stamp{ aspect-ratio:1; border-radius:50%; border:2px dashed rgba(36,31,21,.28); display:grid; place-items:center; color:var(--ink-soft); background:rgba(36,31,21,.03); opacity:.45; position:relative; } .stamp svg{ width:20px; height:20px; display:block; } .stamp .stamp-lb{ position:absolute; bottom:-4px; left:50%; transform:translateX(-50%); font-size:8px; font-weight:900; letter-spacing:.04em; text-transform:uppercase; color:var(--ink-soft); background:var(--card); padding:0 3px; border-radius:4px; white-space:nowrap; } .stamp.got{ border-style:solid; border-color:var(--pine); color:var(--pine); background:var(--c4-soft); opacity:1; } .stamp.got.pop{ animation:stampPop .55s cubic-bezier(.22,.9,.32,1.6); } @keyframes stampPop{ 0%{ transform:scale(2.2) rotate(-14deg); opacity:0; } 60%{ transform:scale(.92) rotate(3deg); opacity:1; } 100%{ transform:scale(1) rotate(0); } } .stampcard.full{ border-color:var(--pine); } .stampcard.full .stampcard-count{ background:var(--pine); } /* minimized state */ .stampcard.min{ width:auto; padding:0; border:none; background:none; box-shadow:none; } .stampcard.min .stampcard-grid, .stampcard.min .stampcard-title, .stampcard.min .stampcard-count{ display:none; } .stampcard.min .stampcard-head{ margin:0; } .stampcard.min .stampcard-min{ width:48px; height:48px; border-radius:50%; background:var(--ink); color:var(--paper); font-size:20px; box-shadow:0 12px 26px rgba(36,31,21,.25); display:grid; place-items:center; overflow:hidden; padding:0; } .stampcard.min .stampcard-min img{ width:100%; height:100%; object-fit:cover; border-radius:50%; } .stampcard.min .stampcard-logo{ display:none; } .stampcard-logo{ width:22px; height:22px; border-radius:50%; object-fit:cover; box-shadow:0 2px 6px rgba(36,31,21,.25); } @media (max-width: 760px){ .stampcard{ width:160px; } .stamp .stamp-lb{ display:none; } } /* ── toast ──────────────────────────────────────────────────── */ .jn-toast{ position:fixed; top:76px; left:50%; z-index:90; transform:translateX(-50%) translateY(-16px) rotate(-1deg); background:var(--ink); color:var(--paper); font-family:var(--disp), sans-serif; font-weight:500; font-size:15px; padding:11px 20px; border-radius:999px; box-shadow:0 18px 40px rgba(36,31,21,.3); opacity:0; pointer-events:none; transition:opacity .3s ease, transform .45s cubic-bezier(.22,.9,.32,1.5); max-width:min(92vw, 480px); text-align:center; } .jn-toast.show{ opacity:1; transform:translateX(-50%) translateY(0) rotate(-1deg); } .jn-toast .em{ margin-right:8px; display:inline-grid; place-items:center; vertical-align:-4px; } .jn-toast .em svg{ width:18px; height:18px; } /* ── next-course pill ───────────────────────────────────────── */ .next-pill{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%) translateY(0); z-index:60; display:inline-flex; align-items:center; gap:9px; border:none; cursor:pointer; background:var(--paper); color:var(--ink); border:2px solid var(--ink); font-family:var(--disp), sans-serif; font-weight:600; font-size:14.5px; padding:10px 18px; border-radius:999px; box-shadow:0 12px 28px rgba(36,31,21,.2); transition:opacity .3s ease, transform .35s ease, background .2s ease; text-decoration:none; } .next-pill:hover{ background:var(--c1); transform:translateX(-50%) translateY(-3px); } .next-pill.hide{ opacity:0; pointer-events:none; transform:translateX(-50%) translateY(14px); } .next-pill .np-arr{ display:inline-block; animation:npBob 1.6s ease-in-out infinite; } @keyframes npBob{ 0%,100%{ transform:translateY(0); } 50%{ transform:translateY(4px); } } @media (prefers-reduced-motion: reduce){ .next-pill .np-arr{ animation:none; } } @media (max-width: 760px){ .next-pill{ display:none; } } /* ── tasting menu (hero) ────────────────────────────── */ .menu-panel{ margin-top:18px; background:var(--card); border:var(--border); border-radius:var(--r); box-shadow:var(--shadow); padding:22px 26px 18px; } .menu-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; } .menu-title{ font-family:var(--disp), sans-serif; font-weight:600; font-size:17px; margin:0; } .tmenu{ list-style:none; margin:0; padding:0; } .tm-row a{ display:flex; align-items:center; gap:10px; padding:9px 6px; border-radius:12px; text-decoration:none; color:var(--ink); transition:background .2s ease, transform .2s ease; } .tm-row a:hover{ background:rgba(36,31,21,.05); transform:translateX(4px); } .tm-ic{ display:grid; place-items:center; color:var(--ink-soft); flex:none; } .tm-ic svg{ width:18px; height:18px; } .tm-row.got .tm-ic{ color:var(--pine); } .tm-name{ font-family:var(--disp), sans-serif; font-weight:600; font-size:15.5px; white-space:nowrap; display:inline-flex; align-items:center; gap:8px; } .tm-spec{ font-family:var(--body), sans-serif; font-size:10.5px; font-weight:900; letter-spacing:.05em; text-transform:uppercase; background:var(--c1); border:1.5px solid var(--ink); color:var(--ink); padding:2px 8px; border-radius:999px; transform:rotate(-2deg); } .tm-dots{ flex:1; border-bottom:2.5px dotted rgba(36,31,21,.3); transform:translateY(3px); min-width:24px; } .tm-note{ color:var(--ink-soft); font-weight:600; font-size:13.5px; white-space:nowrap; } .tm-status{ flex:none; font-weight:900; font-size:12.5px; min-width:64px; text-align:right; } .tm-row.got .tm-status{ color:var(--pine); } .tmenu-hint{ margin:10px 4px 0; font-size:12.5px; font-weight:700; color:var(--ink-soft); font-style:italic; } @media (max-width: 760px){ .tm-note{ display:none; } } /* ── playbook highlight banner (index) ─────────────────── */ .pb-banner{ display:grid; grid-template-columns:220px 1fr; gap:34px; align-items:center; background:var(--pine); border-radius:var(--r); padding:38px 44px; text-decoration:none; color:var(--paper); box-shadow:0 22px 48px rgba(44,94,63,.32); transition:transform .35s cubic-bezier(.22,.9,.32,1.3), box-shadow .35s ease; position:relative; overflow:hidden; } .pb-banner:hover{ transform:translateY(-5px) rotate(-.35deg); box-shadow:0 30px 60px rgba(44,94,63,.4); } .pb-book{ position:relative; background:var(--paper); color:var(--ink); border-radius:14px; aspect-ratio:3/4; padding:20px; display:flex; flex-direction:column; gap:9px; box-shadow:8px 10px 0 rgba(0,0,0,.22); transform:rotate(-3deg); transition:transform .35s ease; } .pb-banner:hover .pb-book{ transform:rotate(-1deg) translateY(-4px); } .pb-spine{ position:absolute; left:9px; top:8px; bottom:8px; width:2.5px; border-left:2.5px dashed rgba(36,31,21,.3); } .pb-title{ font-family:var(--disp), sans-serif; font-weight:700; font-size:26px; margin:6px 0 4px 10px; } .pb-bar{ height:9px; border-radius:999px; background:var(--c1); width:75%; margin-left:10px; } .pb-bar.b2{ background:var(--c2); width:58%; } .pb-bar.b3{ background:#E8537A; width:66%; } .pb-stamp{ position:absolute; top:-11px; right:-11px; background:var(--c1); border:2px solid var(--ink); color:var(--ink); font-family:var(--disp), sans-serif; font-weight:700; font-size:14px; padding:7px 13px; border-radius:999px; transform:rotate(9deg); } .pb-copy{ display:flex; flex-direction:column; align-items:flex-start; gap:14px; } .pb-h{ font-family:var(--disp), sans-serif; font-weight:600; font-size:clamp(28px, 3.6vw, 44px); line-height:1.05; margin:0; } .pb-h .hl{ color:var(--c1); } .pb-p{ margin:0; font-size:16.5px; font-weight:600; color:rgba(245,240,226,.85); max-width:52ch; } @media (max-width: 860px){ .pb-banner{ grid-template-columns:1fr; padding:28px; } .pb-book{ max-width:190px; } } /* ── playbook digest page ───────────────────────────── */ .pbk-stats{ margin-top:26px; } .pbk-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; } .pbk-card{ position:relative; display:flex; flex-direction:column; gap:10px; padding:28px 24px 24px; border-radius:var(--r); border:var(--border); background:var(--card); box-shadow:var(--shadow); transition:transform .3s cubic-bezier(.22,.9,.32,1.4); } .pbk-card:hover{ transform:translateY(-6px) rotate(-.5deg); } .pbk-card.c0{ background:var(--c4-soft); } .pbk-card.c1{ background:var(--c2-soft); } .pbk-card.c2{ background:var(--c1-soft); border:2px solid var(--ink); } .pbk-card.c3{ background:var(--c3-soft); } .pbk-num{ width:38px; height:38px; border-radius:50%; background:var(--ink); color:var(--paper); display:grid; place-items:center; font-family:var(--disp), sans-serif; font-weight:700; font-size:17px; } .pbk-tag{ position:absolute; top:-11px; right:16px; background:var(--c1); border:2px solid var(--ink); font-family:var(--disp), sans-serif; font-weight:600; font-size:12.5px; padding:4px 12px; border-radius:999px; transform:rotate(3deg); } .pbk-price{ font-weight:900; font-size:13.5px; color:var(--pine); letter-spacing:.01em; } .pbk-card h3{ font-family:var(--disp), sans-serif; font-weight:600; font-size:24px; margin:0; } .pbk-who{ margin:0; color:var(--ink-soft); font-weight:700; font-size:14.5px; min-height:44px; } .pbk-chips{ list-style:none; margin:auto 0 0; padding:0; display:flex; flex-wrap:wrap; gap:7px; } .pbk-chips li{ font-size:12.5px; font-weight:800; padding:5px 11px; border-radius:999px; background:rgba(255,253,244,.85); border:1.5px solid rgba(36,31,21,.18); } .pbk-note{ margin:26px auto 0; text-align:center; font-weight:700; color:var(--ink-soft); max-width:60ch; } @media (max-width: 1020px){ .pbk-grid{ grid-template-columns:repeat(2, 1fr); } } @media (max-width: 620px){ .pbk-grid{ grid-template-columns:1fr; } } /* ── how-it-works page ─────────────────────────────── */ .st-grid{ display:grid; grid-template-columns:repeat(4, 1fr); gap:18px; counter-reset:step; } .st-card{ position:relative; padding:30px 24px 26px; border-radius:var(--r); border:var(--border); background:var(--card); box-shadow:var(--shadow); transition:transform .3s cubic-bezier(.22,.9,.32,1.4); } .st-card:hover{ transform:translateY(-6px) rotate(.5deg); } .st-card.s1{ background:var(--c2-soft); } .st-card.s2{ background:var(--c1-soft); } .st-card.s3{ background:var(--c3-soft); } .st-card.s4{ background:var(--c4-soft); } .st-num{ width:44px; height:44px; border-radius:50%; background:var(--ink); color:var(--paper); display:grid; place-items:center; font-family:var(--disp), sans-serif; font-weight:700; font-size:19px; margin-bottom:14px; transform:rotate(-4deg); } .st-card h3{ font-family:var(--disp), sans-serif; font-weight:600; font-size:22px; margin:0 0 8px; } .st-card p{ margin:0; color:var(--ink-soft); font-weight:600; font-size:14.5px; } @media (max-width: 1020px){ .st-grid{ grid-template-columns:repeat(2, 1fr); } } @media (max-width: 620px){ .st-grid{ grid-template-columns:1fr; } } /* ── serve-rail divider ────────────────────────────── */ .serve-rail{ position:relative; max-width:1200px; margin:10px auto -6px; padding:26px 24px 30px; --srx:4%; } .sr-line{ border-bottom:2.5px dotted rgba(36,31,21,.3); margin-top:26px; } .sr-tray{ position:absolute; top:8px; left:var(--srx); transform:translateX(-50%); width:56px; transition:left .1s linear; } .sr-tray svg{ width:56px; height:38px; display:block; } .sr-tray .steam{ opacity:0; } .serve-rail.live .sr-tray .steam{ animation:steamPuff 1.4s ease-in-out infinite; } .serve-rail.live .sr-tray .steam.s2{ animation-delay:.5s; } @keyframes steamPuff{ 0%{ opacity:0; transform:translateY(3px); } 40%{ opacity:.7; } 100%{ opacity:0; transform:translateY(-3px); } } .sr-tag{ position:absolute; right:24px; top:36px; font-family:var(--body), sans-serif; font-size:12px; font-weight:800; font-style:italic; color:var(--ink-soft); background:var(--paper); padding:0 8px; } @media (prefers-reduced-motion: reduce){ .serve-rail.live .sr-tray .steam{ animation:none; } } /* ── deck walkthrough (guide page) ────────────────────── */ .gd-toc{ list-style:none; margin:0; padding:26px 30px; background:var(--card); border:var(--border); border-radius:var(--r); box-shadow:var(--shadow); } .gd-row a{ display:flex; align-items:center; gap:12px; padding:11px 8px; border-radius:12px; text-decoration:none; color:var(--ink); transition:background .2s ease, transform .2s ease; } .gd-row a:hover{ background:rgba(36,31,21,.05); transform:translateX(5px); } .gd-num{ flex:none; width:34px; height:34px; border-radius:50%; background:var(--pine); color:var(--paper); display:grid; place-items:center; font-family:var(--disp), sans-serif; font-weight:600; font-size:13.5px; transform:rotate(-4deg); } .gd-row:nth-child(even) .gd-num{ background:var(--c3); color:var(--ink); transform:rotate(4deg); } .gd-name{ font-family:var(--disp), sans-serif; font-weight:600; font-size:17px; white-space:nowrap; } .gd-dots{ flex:1; border-bottom:2.5px dotted rgba(36,31,21,.3); transform:translateY(3px); min-width:24px; } .gd-note{ color:var(--ink-soft); font-weight:600; font-size:14px; white-space:nowrap; } .gd-go{ flex:none; font-weight:900; font-size:15px; transition:transform .2s ease; } .gd-row a:hover .gd-go{ transform:translateX(4px); } @media (max-width: 760px){ .gd-note{ display:none; } .gd-name{ white-space:normal; } } /* ── FAQ menu ────────────────────────────────────── */ .faq-menu{ max-width:820px; margin:0 auto; display:flex; flex-direction:column; gap:14px; } .faq-item{ background:var(--card); border:var(--border); border-radius:20px; box-shadow:var(--shadow); overflow:hidden; } .faq-item summary{ list-style:none; cursor:pointer; display:flex; align-items:center; gap:14px; padding:18px 22px; font-family:var(--disp), sans-serif; font-weight:600; font-size:17.5px; } .faq-item summary::-webkit-details-marker{ display:none; } .faq-item summary:hover{ background:rgba(36,31,21,.04); } .faq-num{ flex:none; width:32px; height:32px; border-radius:50%; background:var(--c2-soft); border:1.5px solid rgba(36,31,21,.2); display:grid; place-items:center; font-size:12.5px; font-weight:700; transform:rotate(-3deg); } .faq-item:nth-child(even) .faq-num{ background:var(--c1-soft); transform:rotate(3deg); } .faq-q{ flex:1; } .faq-tog{ flex:none; width:26px; height:26px; position:relative; } .faq-tog::before, .faq-tog::after{ content:""; position:absolute; left:50%; top:50%; width:14px; height:2.5px; background:var(--ink); border-radius:2px; transform:translate(-50%,-50%); transition:transform .25s ease; } .faq-tog::after{ transform:translate(-50%,-50%) rotate(90deg); } .faq-item[open] .faq-tog::after{ transform:translate(-50%,-50%) rotate(0deg); } .faq-a{ margin:0; padding:0 22px 20px 68px; color:var(--ink-soft); font-weight:600; font-size:15.5px; max-width:62ch; } .faq-more{ max-width:820px; margin:34px auto 0; display:flex; align-items:center; gap:20px; background:var(--c2-soft); border:var(--border); border-radius:var(--r); padding:22px 26px; } .faq-more p{ margin:0 0 12px; font-weight:700; color:var(--ink); } .faq-wave{ width:92px; height:92px; object-fit:contain; flex:none; } /* ── About / chef's table ──────────────────────────── */ .ab-grid{ display:grid; grid-template-columns:minmax(260px, 380px) 1fr; gap:44px; align-items:start; } .ab-photo{ position:relative; } .ab-wave{ position:absolute; right:-26px; bottom:-26px; width:110px; height:110px; object-fit:contain; transform:rotate(6deg); pointer-events:none; } .ab-copy h3{ font-family:var(--disp), sans-serif; font-weight:600; font-size:clamp(26px, 3vw, 36px); margin:0 0 14px; } .ab-copy p{ margin:0 0 14px; font-weight:600; color:var(--ink-soft); font-size:16.5px; max-width:58ch; } .ab-facts{ display:flex; flex-wrap:wrap; gap:8px; margin:8px 0 22px; } .ab-fact{ font-size:13px; font-weight:800; padding:6px 14px; border-radius:999px; background:var(--card); border:1.5px solid rgba(36,31,21,.25); } @media (max-width: 860px){ .ab-grid{ grid-template-columns:1fr; } } /* ── Map / dining room ────────────────────────────── */ .map-floor{ display:grid; grid-template-columns:repeat(auto-fill, minmax(210px, 1fr)); gap:18px; padding:30px; border:2.5px dashed rgba(36,31,21,.3); border-radius:var(--r); background: radial-gradient(rgba(36,31,21,.06) 1.5px, transparent 1.5px) 0 0 / 26px 26px, var(--card); } .map-table{ position:relative; display:flex; flex-direction:column; gap:6px; padding:20px 18px 16px; border-radius:18px; border:var(--border); background:var(--paper); box-shadow:var(--shadow); text-decoration:none; color:var(--ink); transition:transform .3s cubic-bezier(.22,.9,.32,1.4); } .map-table:hover{ transform:translateY(-5px) rotate(-.6deg); } .map-table:nth-child(3n){ transform:rotate(.6deg); } .map-table:nth-child(3n):hover{ transform:translateY(-5px) rotate(0); } .map-plate{ width:34px; height:34px; border-radius:50%; background:var(--pine); color:var(--paper); display:grid; place-items:center; font-family:var(--disp), sans-serif; font-weight:600; font-size:13px; } .map-table:nth-child(even) .map-plate{ background:var(--c3); color:var(--ink); } .map-name{ font-family:var(--disp), sans-serif; font-weight:600; font-size:18px; } .map-desc{ color:var(--ink-soft); font-weight:600; font-size:13.5px; } .map-visited{ position:absolute; top:12px; right:12px; width:26px; height:26px; border-radius:50%; border:2px solid var(--pine); color:var(--pine); display:none; place-items:center; font-weight:900; font-size:13px; background:var(--c4-soft); transform:rotate(8deg); } .map-table.seen .map-visited{ display:grid; } /* ── 404 ───────────────────────────────────────── */ .nf-wrap{ min-height:100svh; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; padding:40px 20px; } .nf-wave{ width:170px; height:170px; object-fit:contain; } .nf-code{ font-family:var(--disp), sans-serif; font-weight:700; font-size:15px; letter-spacing:.3em; background:var(--c1); border:2px solid var(--ink); border-radius:999px; padding:5px 18px; transform:rotate(-2deg); } .nf-h{ font-family:var(--disp), sans-serif; font-weight:600; font-size:clamp(34px, 6vw, 60px); margin:10px 0 0; } .nf-p{ margin:0 0 22px; color:var(--ink-soft); font-weight:700; max-width:44ch; } /* footer map link */ .footer .center a{ color:inherit; font-weight:800; text-decoration:underline dotted; text-underline-offset:3px; } /* ── more strip (end of page) ───────────────────────── */ .more-strip{ max-width:1200px; margin:30px auto 0; padding:18px 24px; display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:22px; border-top:2.5px dotted rgba(36,31,21,.25); } .more-strip .more-label{ font-family:var(--disp), sans-serif; font-weight:600; font-size:13px; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft); } .more-strip a{ color:var(--ink); font-weight:800; font-size:14.5px; text-decoration:underline dotted; text-underline-offset:4px; } .more-strip a:hover{ color:var(--pine); } .camp-sub{ font-family:var(--disp), sans-serif; font-weight:600; font-size:21px; margin:34px 0 14px; display:flex; align-items:center; gap:14px; } .camp-sub::after{ content:""; flex:1; border-bottom:2.5px dotted rgba(36,31,21,.28); } /* ── combo builder ─────────────────────────────────────────── */ .cb-grid{ display:grid; grid-template-columns:1.5fr 1fr; gap:26px; align-items:start; } .cb-tray{ display:flex; flex-direction:column; gap:14px; } .cb-item{ display:flex; align-items:flex-start; gap:14px; background:var(--card); border:var(--border); border-radius:20px; box-shadow:var(--shadow); padding:18px 20px; cursor:pointer; transition:transform .25s ease, background .2s ease; } .cb-item:hover{ transform:translateY(-3px); } .cb-item.on{ background:var(--c4-soft); } .cb-item input[type=checkbox]{ width:22px; height:22px; accent-color:var(--pine); margin-top:3px; flex:none; cursor:pointer; } .cb-body{ flex:1; display:flex; flex-direction:column; gap:4px; } .cb-name{ font-family:var(--disp), sans-serif; font-weight:600; font-size:17.5px; } .cb-desc{ color:var(--ink-soft); font-weight:600; font-size:13.5px; } .cb-sub{ display:flex; align-items:center; gap:12px; margin-top:8px; } .cb-sub input[type=range]{ flex:1; max-width:220px; accent-color:var(--pine); } .cb-subval{ font-weight:900; font-size:12.5px; color:var(--pine); white-space:nowrap; } .cb-price{ font-weight:900; font-size:14.5px; white-space:nowrap; color:var(--ink); } .cb-price em{ font-style:normal; color:var(--ink-soft); font-weight:700; font-size:12px; } .cb-receipt{ position:sticky; top:90px; background:var(--paper); border:2.5px dashed rgba(36,31,21,.4); border-radius:6px; padding:24px 22px; box-shadow:var(--shadow); font-variant-numeric:tabular-nums; } .cb-receipt h3{ font-family:var(--disp), sans-serif; font-weight:600; font-size:20px; margin:0 0 14px; text-align:center; letter-spacing:.04em; text-transform:uppercase; } .cb-line{ display:flex; align-items:baseline; gap:8px; font-weight:700; font-size:14px; padding:5px 0; } .cb-line .dots{ flex:1; border-bottom:2px dotted rgba(36,31,21,.35); } .cb-line.empty{ justify-content:center; color:var(--ink-soft); } .cb-total{ border-top:2.5px dashed rgba(36,31,21,.4); margin-top:14px; padding-top:12px; display:flex; flex-direction:column; gap:6px; } .cb-total div{ display:flex; justify-content:space-between; font-weight:800; font-size:15px; } .cb-total strong{ font-size:17px; } .cb-note{ color:var(--ink-soft); font-weight:600; font-size:12.5px; margin:12px 0 14px; } .cb-receipt .btn{ width:100%; justify-content:center; } @media (max-width: 900px){ .cb-grid{ grid-template-columns:1fr; } .cb-receipt{ position:static; } } /* ── combo v2: courses + dishes ────────────────── */ .cb-course{ background:var(--card); border:var(--border); border-radius:var(--r); box-shadow:var(--shadow); padding:20px 22px; } .cb-course-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; flex-wrap:wrap; } .cb-course-head h3{ font-family:var(--disp), sans-serif; font-weight:600; font-size:19px; margin:0; } .cb-course-num{ width:30px; height:30px; border-radius:50%; background:var(--ink); color:var(--paper); display:grid; place-items:center; font-family:var(--disp), sans-serif; font-weight:700; font-size:14px; transform:rotate(-4deg); flex:none; } .cb-course-hint{ margin-left:auto; font-size:12px; font-weight:800; font-style:italic; color:var(--ink-soft); } .cb-choice{ display:grid; grid-template-columns:repeat(auto-fit, minmax(150px, 1fr)); gap:10px; } .cb-dish{ position:relative; display:flex; flex-direction:column; gap:5px; border:2px solid rgba(36,31,21,.18); border-radius:16px; padding:14px 14px 12px; cursor:pointer; background:var(--paper); transition:transform .2s ease, border-color .2s ease, background .2s ease; } .cb-dish:hover{ transform:translateY(-3px); } .cb-dish.on{ border-color:var(--pine); background:var(--c4-soft); } .cb-dish.on::after{ content:"✓"; position:absolute; top:-9px; right:-7px; width:24px; height:24px; border-radius:50%; background:var(--pine); color:var(--paper); display:grid; place-items:center; font-size:12px; font-weight:900; transform:rotate(8deg); } .cb-dish input{ position:absolute; opacity:0; pointer-events:none; } .cb-dish-name{ font-family:var(--disp), sans-serif; font-weight:600; font-size:15.5px; } .cb-dish-desc{ color:var(--ink-soft); font-weight:600; font-size:12.5px; flex:1; } .cb-dish-price{ font-weight:900; font-size:14px; color:var(--pine); } .cb-dish-price em{ font-style:normal; font-weight:700; font-size:11px; color:var(--ink-soft); } .cb-dial{ display:flex; flex-direction:column; gap:10px; } .cb-dial input[type=range]{ width:100%; accent-color:var(--pine); } .cb-dial-read{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; } .cb-dial-read strong{ font-family:var(--disp), sans-serif; font-weight:600; font-size:16px; } .cb-dial-read span{ color:var(--ink-soft); font-weight:600; font-size:13px; flex:1; min-width:160px; } .cb-dial-price{ font-weight:900 !important; color:var(--pine) !important; font-size:14.5px !important; flex:none !important; min-width:0 !important; } .cb-ai-on{ display:flex; align-items:center; gap:10px; font-weight:800; font-size:14.5px; cursor:pointer; } .cb-ai-on input{ width:20px; height:20px; accent-color:var(--pine); } .cb-ai-body{ display:flex; flex-direction:column; gap:10px; margin-top:12px; }