:root{ --cream:#FBF6EF; --card:#FFFFFF; --plum:#6E2C41; --plum-dark:#521f30; --sage:#3A6F63; --sage-light:#E3EEEA; --honey:#D9A441; --ink:#2B2420; --ink-soft:#6b6058; --line:#EAE1D5; --radius:18px; } *{box-sizing:border-box;} body{margin:0;-webkit-font-smoothing:antialiased;} @media (prefers-reduced-motion: reduce){ *{animation-duration:0.001ms !important; transition-duration:0.001ms !important;} } body{ background:var(--cream); color:var(--ink); font-family:'Inter',sans-serif; padding-bottom:100px; transition:opacity .7s ease; } body.page-exit{opacity:0;} /* ---------------- Video splash (Tipsico Lake page) ---------------- */ .video-splash{ position:fixed; inset:0; z-index:9999; background:var(--cream); display:flex; align-items:center; justify-content:center; opacity:0; transition:opacity .9s ease; pointer-events:auto; } .video-splash.show{opacity:1;} .video-splash video{ max-width:100%; max-height:100%; object-fit:contain; } @media (max-width:700px){ .video-splash video{ width:100%; height:100%; max-width:none; max-height:none; object-fit:cover; } } .video-splash .video-skip{ position:absolute; top:20px; right:20px; background:rgba(43,36,32,0.55); color:#FBF6EF; border:none; padding:9px 16px; border-radius:100px; font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.04em; text-transform:uppercase; cursor:pointer; } .video-splash .video-skip:hover{background:rgba(43,36,32,0.75);} .video-splash .video-sound-toggle{ position:absolute; bottom:22px; right:22px; width:42px; height:42px; border-radius:50%; background:rgba(43,36,32,0.55); color:#FBF6EF; border:none; font-size:17px; cursor:pointer; } .video-splash .video-sound-toggle:hover{background:rgba(43,36,32,0.75);} /* ---------------- Intro splash ---------------- The splash's own visuals (background, logo, keyframes) are inlined as critical CSS directly in index.html's , so the dark background paints instantly with zero flash — before this external stylesheet even finishes loading. Only the scroll-lock and the "reveal real content" crossfade mechanism live here. */ body.intro-lock{overflow:hidden;} /* content crossfades in under the splash as it dissolves */ .reveal-item{ opacity:0; transform:translateY(14px); transition:opacity .7s cubic-bezier(.22,1,.36,1), transform .7s cubic-bezier(.22,1,.36,1); } body.revealed .reveal-item{opacity:1; transform:translateY(0);} body:not(.has-splash) .reveal-item{opacity:1; transform:none; transition:none;} /* ---------------- Nav / brand bar ---------------- */ .eyebrow{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--sage); font-weight:500; } .topbar{ max-width:900px; margin:0 auto; padding:26px 24px 0; display:flex; align-items:center; justify-content:space-between; gap:16px; flex-wrap:wrap; } .brandbar{ display:flex; align-items:center; gap:10px; text-decoration:none; } .brandbar svg{ width:24px; height:auto; flex-shrink:0; } .brandbar .word{ font-family:'Fraunces',serif; font-weight:650; font-size:18px; color:var(--plum-dark); letter-spacing:0.01em; } .brandbar .word em{ font-style:italic; font-weight:500; color:var(--honey); } .sitenav{ display:flex; gap:4px; flex-wrap:wrap; } .sitenav a{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.04em; text-transform:uppercase; text-decoration:none; color:var(--ink-soft); padding:8px 12px; border-radius:100px; transition:background .15s, color .15s; } .sitenav a:hover{background:var(--sage-light); color:var(--sage);} .sitenav a.active{background:var(--plum); color:#fff;} .sitenav a.nav-featured{ background:var(--honey); color:var(--plum-dark); font-weight:600; } .sitenav a.nav-featured:hover{background:#c99a3a; color:var(--plum-dark);} .sitenav a.nav-featured.active{background:var(--plum); color:#fff;} /* ---------------- Hero / page header ---------------- */ header.hero{ padding:44px 24px 28px; max-width:900px; margin:0 auto; text-align:left; } h1{ font-family:'Fraunces',serif; font-weight:650; font-size:clamp(34px,6vw,52px); line-height:1.02; margin:10px 0 12px; color:var(--plum-dark); } h1 em{ font-style:italic; font-weight:500; color:var(--honey); } .sub{ max-width:520px; color:var(--ink-soft); font-size:16px; line-height:1.55; margin-bottom:8px; } /* ---------------- Home page nav cards ---------------- */ .home-links{ max-width:900px; margin:12px auto 0; padding:8px 24px 40px; display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:16px; } .home-link-card{ display:block; text-decoration:none; background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:22px; transition:transform .15s, box-shadow .15s; position:relative; overflow:hidden; min-height:150px; } .home-link-card:hover{ transform:translateY(-3px); box-shadow:0 14px 30px rgba(110,44,65,0.10); } .home-link-card .hl-thumb{ position:absolute; inset:0; object-fit:cover; width:100%; height:100%; opacity:0.16; } .home-link-card .hl-content{position:relative; z-index:1;} .home-link-card .eyebrow{margin-bottom:8px;} .home-link-card h3{ font-family:'Fraunces',serif; font-weight:650; font-size:22px; margin:0 0 8px; color:var(--plum-dark); } .home-link-card p{ font-size:13.5px; line-height:1.55; color:var(--ink-soft); margin:0 0 14px; max-width:320px; } .home-link-card .arrow{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; letter-spacing:0.06em; text-transform:uppercase; color:var(--sage); } /* Featured card — draws the eye more than the plain white tiles */ .home-link-card.featured{ background:var(--plum); border-color:var(--plum); box-shadow:0 14px 34px rgba(82,31,48,0.28); } .home-link-card.featured:hover{ box-shadow:0 18px 40px rgba(82,31,48,0.36); } .home-link-card.featured .eyebrow{color:#F3D9A8;} .home-link-card.featured h3{color:#FBF6EF;} .home-link-card.featured p{color:rgba(251,246,239,0.82);} .home-link-card.featured .arrow{color:var(--honey);} .home-link-card.featured .hl-badge{ position:absolute; top:18px; right:18px; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.08em; text-transform:uppercase; color:var(--plum-dark); background:var(--honey); padding:5px 10px; border-radius:100px; z-index:2; } /* ---------------- Lake gallery ---------------- */ .lake-gallery{ max-width:900px; margin:0 auto 32px; padding:0 24px; } .lake-gallery .eyebrow{margin-bottom:12px;} .gallery-scroll{ display:flex; gap:12px; overflow-x:auto; scroll-snap-type:x proximity; padding-bottom:6px; scrollbar-width:none; } .gallery-scroll::-webkit-scrollbar{display:none;} .gallery-scroll img{ height:190px; width:auto; flex-shrink:0; border-radius:14px; object-fit:cover; scroll-snap-align:start; border:1px solid var(--line); } .gallery-grid{ max-width:900px; margin:24px auto 0; padding:0 24px 40px; display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:14px; } .gallery-grid img{ width:100%; height:220px; object-fit:cover; border-radius:16px; border:1px solid var(--line); cursor:pointer; transition:transform .15s; } .gallery-grid img:hover{transform:scale(1.02);} /* ---------------- Lightbox (Tipsico Lake page) ---------------- */ .lightbox-backdrop{ position:fixed; inset:0; z-index:70; background:rgba(20,15,12,0.94); display:none; align-items:center; justify-content:center; touch-action:none; } .lightbox-backdrop.open{display:flex;} .lightbox-stage{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; padding:60px 70px; overflow:hidden; touch-action:pan-y; } .lightbox-stage img{ max-width:100%; max-height:100%; object-fit:contain; border-radius:8px; user-select:none; -webkit-user-drag:none; } .lightbox-close{ position:absolute; top:20px; right:20px; z-index:2; background:rgba(255,255,255,0.12); border:none; color:#FBF6EF; width:40px; height:40px; border-radius:50%; font-size:18px; cursor:pointer; } .lightbox-close:hover{background:rgba(255,255,255,0.22);} .lightbox-nav{ position:absolute; top:50%; transform:translateY(-50%); z-index:2; background:rgba(255,255,255,0.12); border:none; color:#FBF6EF; width:48px; height:48px; border-radius:50%; font-size:26px; cursor:pointer; line-height:1; } .lightbox-nav:hover{background:rgba(255,255,255,0.22);} .lightbox-prev{left:14px;} .lightbox-next{right:14px;} .lightbox-counter{ position:absolute; bottom:20px; left:50%; transform:translateX(-50%); font-family:'IBM Plex Mono',monospace; font-size:12px; letter-spacing:0.05em; color:rgba(251,246,239,0.75); } @media (max-width:640px){ .lightbox-stage{padding:70px 20px;} .lightbox-nav{width:40px; height:40px; font-size:22px;} .lightbox-prev{left:6px;} .lightbox-next{right:6px;} } @media (max-width:600px){ .gallery-scroll img{height:150px;} .gallery-grid img{height:180px;} } /* ---------------- Search / pills ---------------- */ .search-row{ display:flex; gap:10px; max-width:900px; margin:0 auto; padding:0 24px; } .search-box{ flex:1; display:flex; align-items:center; background:var(--card); border:1px solid var(--line); border-radius:100px; padding:12px 18px; gap:10px; } .search-box input{ border:none; outline:none; background:transparent; font-family:'Inter',sans-serif; font-size:15px; width:100%; color:var(--ink); } .search-box svg{flex-shrink:0;opacity:0.5;} nav.pills{ position:sticky; top:0; background:rgba(251,246,239,0.92); backdrop-filter:blur(6px); z-index:20; padding:18px 24px; display:flex; gap:10px; overflow-x:auto; max-width:900px; margin:24px auto 0; scrollbar-width:none; } nav.pills::-webkit-scrollbar{display:none;} .pill{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; letter-spacing:0.03em; white-space:nowrap; padding:9px 16px; border-radius:100px; border:1px solid var(--line); background:var(--card); color:var(--ink-soft); cursor:pointer; transition:background .15s, color .15s, border-color .15s; } .pill:hover{border-color:var(--sage);} .pill.active{ background:var(--plum); color:#fff; border-color:var(--plum); } /* ---------------- Meal grid / cards ---------------- */ main{ max-width:900px; margin:0 auto; padding:8px 24px 40px; } .section-label{ font-family:'Fraunces',serif; font-size:22px; font-weight:560; margin:34px 0 4px; color:var(--plum-dark); } .section-count{ font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft); margin-bottom:16px; } .grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; } .card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; display:flex; flex-direction:column; gap:10px; cursor:pointer; overflow:hidden; transition:transform .15s, box-shadow .15s; } .card:hover{ transform:translateY(-2px); box-shadow:0 10px 24px rgba(110,44,65,0.08); } .card-top{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; } .card h3{ font-family:'Fraunces',serif; font-weight:560; font-size:18px; margin:0; color:var(--ink); } .drops{ display:flex; gap:2px; flex-shrink:0; padding-top:3px; } .drop{width:9px;height:12px;opacity:0.18;} .drop.filled{opacity:1;} .card p.desc{ font-size:13.5px; line-height:1.5; color:var(--ink-soft); margin:0; } .tags{ display:flex; flex-wrap:wrap; gap:6px; margin-top:2px; } .tag{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.02em; padding:4px 9px; border-radius:100px; background:var(--sage-light); color:var(--sage); text-transform:uppercase; } .tag.onehand{background:#F5E9E0;color:var(--honey);} .tag.chef{background:var(--plum); color:#fff;} .card-bottom{ display:flex; justify-content:space-between; align-items:center; margin-top:auto; padding-top:8px; } .time{ font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-soft); } .add-btn{ font-family:'Inter',sans-serif; font-weight:600; font-size:13px; border:none; background:var(--plum); color:#fff; padding:8px 14px; border-radius:100px; cursor:pointer; transition:background .15s; } .add-btn:hover{background:var(--plum-dark);} .add-btn.added{background:var(--sage);} .empty{ padding:60px 0; text-align:center; color:var(--ink-soft); font-family:'Fraunces',serif; font-size:18px; } /* ---------------- Your Personal Chefs ---------------- */ .chefs-section{ max-width:900px; margin:0 auto; padding:8px 24px 40px; } .chefs-section .section-label{margin-top:0;} .chefs-sub{ max-width:560px; color:var(--ink-soft); font-size:14.5px; line-height:1.6; margin:2px 0 24px; } .chefs-sub strong{color:var(--ink);} .chef-form-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; display:flex; flex-direction:column; gap:16px; } .field-row{display:flex; flex-direction:column; gap:6px;} .field-row label{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.06em; text-transform:uppercase; color:var(--plum-dark); font-weight:500; } .field-row label .optional{ text-transform:none; letter-spacing:0; color:var(--ink-soft); font-family:'Inter',sans-serif; font-weight:400; font-size:12.5px; } .field-row input, .field-row select, .field-row textarea{ border:1px solid var(--line); border-radius:10px; padding:11px 14px; font-family:'Inter',sans-serif; font-size:14.5px; color:var(--ink); background:#fff; } .field-row textarea{min-height:64px; resize:vertical; line-height:1.5;} .field-row input:focus, .field-row select:focus, .field-row textarea:focus{ outline:2px solid var(--sage); outline-offset:1px; } .field-row input[type="file"]{ padding:9px 10px; font-size:13px; color:var(--ink-soft); } .field-row input[type="file"]::file-selector-button{ font-family:'Inter',sans-serif; font-weight:600; font-size:12.5px; border:none; background:var(--sage-light); color:var(--sage); padding:8px 14px; border-radius:100px; cursor:pointer; margin-right:10px; } .photo-preview{margin-top:8px;} .photo-preview img{ max-width:140px; max-height:140px; border-radius:12px; border:1px solid var(--line); object-fit:cover; display:block; } .photo-preview .photo-status{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); margin-top:4px; } .milk-badge{font-size:12px;} .ingredients-preview{margin-top:2px;} .ingredients-chip-row{ display:flex; flex-wrap:wrap; gap:6px; } .ingredient-chip{ font-family:'IBM Plex Mono',monospace; font-size:11px; padding:5px 10px; border-radius:100px; background:var(--sage-light); color:var(--sage); } .ingredient-chip.strong{ background:#F5E9E0; color:var(--plum-dark); font-weight:600; } .ingredients-preview-drops{ display:flex; align-items:center; gap:8px; margin-top:8px; } .chef-submit-row{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; } .chef-submit-row button{ padding:12px 22px; border:none; border-radius:100px; background:var(--plum); color:#fff; font-family:'Inter',sans-serif; font-weight:600; font-size:14px; cursor:pointer; } .chef-submit-row button:hover{background:var(--plum-dark);} .chef-form-note{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); line-height:1.6; } .code-reveal{ background:var(--sage-light); border:1px dashed var(--sage); border-radius:14px; padding:16px 18px; display:none; } .code-reveal.show{display:block;} .code-reveal .code-label{ font-family:'IBM Plex Mono',monospace; font-size:11px; letter-spacing:0.08em; text-transform:uppercase; color:var(--sage); margin-bottom:6px; } .code-reveal .code-num{ font-family:'Fraunces',serif; font-weight:650; font-size:30px; color:var(--plum-dark); letter-spacing:0.08em; } .code-reveal p{ margin:8px 0 0; font-size:12.5px; color:var(--ink-soft); line-height:1.55; } .chef-recipes-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:16px; margin-top:24px; } .chef-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:18px; display:flex; flex-direction:column; gap:10px; position:relative; overflow:hidden; } .chef-card .card-click{ cursor:pointer; display:flex; flex-direction:column; gap:10px; } .chef-card .card-thumb, .card .card-thumb{ width:calc(100% + 36px); margin:-18px -18px 0; height:160px; object-fit:cover; display:block; } .chef-card:hover{box-shadow:0 10px 24px rgba(110,44,65,0.08);} .detail-photos{ display:flex; gap:10px; margin-bottom:18px; overflow-x:auto; } .detail-photos .photo-block{flex-shrink:0;} .detail-photos img{ height:160px; border-radius:12px; border:1px solid var(--line); object-fit:cover; display:block; cursor:pointer; transition:opacity .15s; } .detail-photos img:hover{opacity:0.85;} .photo-delete-link{ display:block; background:none; border:none; padding:0; margin-top:4px; font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.03em; text-transform:uppercase; color:var(--ink-soft); cursor:pointer; text-decoration:underline; } .photo-delete-link:hover{color:var(--plum);} .detail-photos .photo-caption{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.04em; text-transform:uppercase; color:var(--ink-soft); margin-top:5px; } .edit-ingredients-block{ margin-top:20px; padding-top:18px; border-top:1px solid var(--line); } .edit-ingredients-block textarea{ width:100%; min-height:80px; border:1px solid var(--line); border-radius:10px; padding:11px 14px; font-family:'Inter',sans-serif; font-size:14px; color:var(--ink); background:#fff; resize:vertical; line-height:1.5; } .edit-ingredients-block textarea:focus{ outline:2px solid var(--sage); outline-offset:1px; } .edit-ingredients-block .chef-submit-row{gap:18px;} .add-photo-block{ margin-top:24px; padding-top:20px; border-top:1px solid var(--line); } .add-photo-block input[type="file"]{ width:100%; border:1px solid var(--line); border-radius:10px; padding:9px 10px; font-size:13px; color:var(--ink-soft); background:#fff; } .add-photo-block input[type="file"]::file-selector-button{ font-family:'Inter',sans-serif; font-weight:600; font-size:12.5px; border:none; background:var(--sage-light); color:var(--sage); padding:8px 14px; border-radius:100px; cursor:pointer; margin-right:10px; } .add-photo-block input[type="text"]{ width:100%; border:1px solid var(--line); border-radius:10px; padding:10px 14px; font-family:'Inter',sans-serif; font-size:14px; color:var(--ink); background:#fff; } .chef-card .from-badge{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.04em; text-transform:uppercase; color:var(--honey); } .chef-card h3{ font-family:'Fraunces',serif; font-weight:560; font-size:18px; margin:0; color:var(--ink); } .chef-card .desc{ font-size:13.5px; line-height:1.5; color:var(--ink-soft); margin:0; font-style:italic; } .remove-link{ align-self:flex-start; background:none; border:none; padding:0; font-family:'IBM Plex Mono',monospace; font-size:10.5px; letter-spacing:0.03em; text-transform:uppercase; color:var(--ink-soft); cursor:pointer; text-decoration:underline; } .remove-link:hover{color:var(--plum);} .action-pill-btn{ font-family:'Inter',sans-serif; font-weight:600; font-size:13px; border:1px solid var(--sage); background:var(--sage-light); color:var(--sage); padding:9px 18px; border-radius:100px; cursor:pointer; transition:background .15s, color .15s; } .action-pill-btn:hover{background:var(--sage); color:#fff;} .chefs-empty{ color:var(--ink-soft); font-size:13.5px; font-family:'Fraunces',serif; font-style:italic; padding:8px 0 4px; } /* ---------------- Today's Menu ---------------- */ .todays-menu{ max-width:900px; margin:0 auto; padding:24px 24px 0; } .tm-card{ background:var(--card); border:1px solid var(--line); border-radius:var(--radius); padding:24px; } .tm-head{ display:flex; align-items:baseline; justify-content:space-between; flex-wrap:wrap; gap:8px; margin-bottom:16px; } .tm-head h2{ font-family:'Fraunces',serif; font-weight:650; font-size:24px; margin:4px 0 0; color:var(--plum-dark); } .tm-date{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); } .tm-list{ display:flex; flex-direction:column; gap:2px; } .tm-item{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding:11px 0; border-bottom:1px solid var(--line); } .tm-item:last-child{border-bottom:none;} .tm-meta{display:flex; flex-direction:column; gap:2px;} .tm-cat{ font-family:'IBM Plex Mono',monospace; font-size:10px; letter-spacing:0.06em; text-transform:uppercase; color:var(--sage); } .tm-name{ font-family:'Fraunces',serif; font-size:15.5px; color:var(--ink); } .tm-kcal{ font-family:'IBM Plex Mono',monospace; font-size:12.5px; color:var(--ink-soft); white-space:nowrap; } .tm-total{ margin-top:14px; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--sage); } .tm-card .calc-btn{margin-top:18px;} .tm-card .calc-btn.added{background:var(--sage);} /* ---------------- Cart ---------------- */ .cart-fab{ position:fixed; bottom:22px; right:22px; background:var(--plum); color:#fff; border:none; border-radius:100px; padding:14px 22px; font-family:'Inter',sans-serif; font-weight:600; font-size:14px; display:flex; align-items:center; gap:8px; cursor:pointer; box-shadow:0 8px 22px rgba(82,31,48,0.35); z-index:30; transition:transform .15s; } .cart-fab:hover{transform:translateY(-2px);} .cart-fab .count{ background:var(--honey); color:var(--plum-dark); border-radius:100px; padding:2px 8px; font-family:'IBM Plex Mono',monospace; font-size:12px; } .drawer-backdrop{ position:fixed;inset:0; background:rgba(43,36,32,0.35); z-index:40; opacity:0; pointer-events:none; transition:opacity .2s; } .drawer-backdrop.open{opacity:1;pointer-events:auto;} .drawer{ position:fixed; top:0;right:0; height:100%; width:min(400px,92vw); background:var(--cream); z-index:50; transform:translateX(100%); transition:transform .25s ease; display:flex; flex-direction:column; box-shadow:-10px 0 30px rgba(0,0,0,0.15); } .drawer.open{transform:translateX(0);} .drawer-head{ padding:26px 24px 16px; border-bottom:1px solid var(--line); } .drawer-head h2{ font-family:'Fraunces',serif; font-size:24px; margin:0 0 4px; color:var(--plum-dark); } .drawer-head .close{ position:absolute; top:22px;right:20px; background:none;border:none; font-size:20px;cursor:pointer; color:var(--ink-soft); } .drawer-body{ flex:1; overflow-y:auto; padding:16px 24px; } .plate-item{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:14px 0; border-bottom:1px solid var(--line); } .plate-item .meta h4{ font-family:'Fraunces',serif; font-size:15.5px; margin:0 0 3px; font-weight:560; } .plate-item .meta span{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); } .remove-btn{ background:none;border:none; color:var(--plum); font-family:'IBM Plex Mono',monospace; font-size:11px; cursor:pointer; text-decoration:underline; flex-shrink:0; } .drawer-empty{ color:var(--ink-soft); font-size:14px; padding:40px 0; text-align:center; line-height:1.6; } .drawer-foot{ padding:18px 24px 26px; border-top:1px solid var(--line); } .drawer-foot button{ width:100%; padding:13px; border:none; border-radius:100px; background:var(--sage); color:#fff; font-family:'Inter',sans-serif; font-weight:600; font-size:14px; cursor:pointer; } .drawer-foot button.primary{ background:var(--plum); } .drawer-foot button.primary:hover{background:var(--plum-dark);} .drawer-foot button:disabled{ background:var(--line); color:var(--ink-soft); cursor:not-allowed; } footer{ max-width:900px; margin:20px auto 0; padding:24px; color:var(--ink-soft); font-size:12.5px; font-family:'IBM Plex Mono',monospace; border-top:1px solid var(--line); } /* ---------------- Calorie estimator trigger ---------------- */ .calc-fab{ position:fixed; bottom:22px; left:22px; background:var(--card); color:var(--plum-dark); border:1px solid var(--line); border-radius:100px; padding:14px 20px; font-family:'Inter',sans-serif; font-weight:600; font-size:14px; display:flex; align-items:center; gap:8px; cursor:pointer; box-shadow:0 8px 22px rgba(43,36,32,0.10); z-index:30; transition:transform .15s, border-color .15s; } .calc-fab:hover{transform:translateY(-2px);border-color:var(--sage);} /* ---------------- Modal ---------------- */ .modal-backdrop{ position:fixed;inset:0; background:rgba(43,36,32,0.4); z-index:60; opacity:0; pointer-events:none; transition:opacity .2s; display:flex; align-items:center; justify-content:center; padding:20px; } .modal-backdrop.open{opacity:1;pointer-events:auto;} .modal{ background:var(--cream); border-radius:24px; width:min(560px,100%); max-height:88vh; overflow-y:auto; position:relative; box-shadow:0 24px 60px rgba(0,0,0,0.25); } .modal-head{ padding:28px 28px 14px; position:relative; border-bottom:1px solid var(--line); } .modal-head h2{ font-family:'Fraunces',serif; font-size:26px; margin:8px 0 6px; color:var(--plum-dark); } .modal-head p{ color:var(--ink-soft); font-size:13.5px; line-height:1.5; margin:0 0 18px; max-width:440px; } .modal-head .close{ position:absolute; top:24px;right:24px; background:none;border:none; font-size:20px;cursor:pointer; color:var(--ink-soft); } .modal-body{padding:22px 28px 28px;} .calc-input{ width:100%; min-height:90px; border:1px solid var(--line); border-radius:14px; padding:14px 16px; font-family:'Inter',sans-serif; font-size:14.5px; color:var(--ink); resize:vertical; background:#fff; line-height:1.5; } .calc-input:focus{outline:2px solid var(--sage);outline-offset:1px;} .calc-hint{ font-family:'IBM Plex Mono',monospace; font-size:11px; color:var(--ink-soft); margin-top:8px; } .calc-btn{ margin-top:14px; width:100%; padding:13px; border:none; border-radius:100px; background:var(--plum); color:#fff; font-family:'Inter',sans-serif; font-weight:600; font-size:14px; cursor:pointer; } .calc-btn:hover{background:var(--plum-dark);} .calc-results{ margin-top:24px; } .calc-row{ display:flex; justify-content:space-between; align-items:flex-start; gap:10px; padding:11px 0; border-bottom:1px solid var(--line); font-size:13.5px; } .calc-row .item-name{ font-weight:600; color:var(--ink); } .calc-row .item-matched{ font-family:'IBM Plex Mono',monospace; font-size:10.5px; color:var(--sage); text-transform:uppercase; letter-spacing:0.02em; } .calc-row .item-nums{ text-align:right; font-family:'IBM Plex Mono',monospace; font-size:12px; color:var(--ink-soft); white-space:nowrap; } .calc-totals{ margin-top:18px; background:var(--sage-light); border-radius:16px; padding:18px 20px; } .calc-totals .kcal{ font-family:'Fraunces',serif; font-size:32px; font-weight:650; color:var(--plum-dark); line-height:1; } .calc-totals .kcal span{ font-family:'Inter',sans-serif; font-size:14px; font-weight:500; color:var(--ink-soft); } .macro-bar{ display:flex; height:8px; border-radius:100px; overflow:hidden; margin:14px 0 10px; background:#fff; } .macro-bar div{height:100%;} .macro-legend{ display:flex; gap:16px; flex-wrap:wrap; font-family:'IBM Plex Mono',monospace; font-size:11.5px; color:var(--ink-soft); } .macro-legend .dot{ display:inline-block; width:8px;height:8px; border-radius:50%; margin-right:5px; } .calc-unmatched{ margin-top:16px; background:#F5E9E0; border-radius:14px; padding:14px 16px; font-size:12.5px; color:var(--plum-dark); line-height:1.6; } .calc-unmatched strong{display:block;margin-bottom:4px;}