/* ======================================================================== KHAO HEALTHY — Hero, light edition (mobile-first audience) Warm off-white stage that tints with the active flavour. Modern type: Bricolage Grotesque for display, Outfit for UI. The active flavour drives --accent (word, glow, dots, ticker stars) while JS tweens the page background to the flavour's tint. ======================================================================== */ :root { --tint: #F2E7DB; /* page background — animated per flavour */ --ink: #251A10; --ink-soft: #6E5E4E; --ink-faint: rgba(37, 26, 16, 0.18); --paper: #FAF3E7; --accent: #8C4E1C; /* animated by JS per flavour */ --font-display: 'Bricolage Grotesque', 'Arial Black', sans-serif; --font-body: 'Outfit', system-ui, sans-serif; --font-hand: 'Kalam', 'Comic Sans MS', cursive; --nav-h: 80px; --ticker-h: 44px; --safe-b: env(safe-area-inset-bottom, 0px); --pad-x: 5vw; } *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font-body); color: var(--ink); background: var(--tint); /* the home page is exactly one screen again; content pages re-enable scrolling via body.page in page.css */ overflow: hidden; -webkit-font-smoothing: antialiased; -webkit-tap-highlight-color: transparent; } img, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } figure { margin: 0; } button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; } ::selection { background: var(--accent); color: var(--paper); } /* faint paper grain */ .grain { position: fixed; inset: -50%; z-index: 200; pointer-events: none; opacity: 0.045; mix-blend-mode: multiply; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ---------- Loader ---------- */ .loader { position: fixed; inset: 0; z-index: 600; display: none; place-items: center; background: var(--paper); } .js .loader { display: grid; } /* set by the inline head script when the loader ran less than 30 min ago; both classes sit on , so this outranks .js .loader on specificity */ .js.no-loader .loader { display: none; } .loader__inner { display: grid; justify-items: center; gap: 1.4rem; } .loader__mark { width: 108px; height: auto; } .loader__bar { display: block; width: 180px; height: 2px; background: var(--ink-faint); } .loader__bar i { display: block; height: 100%; background: var(--accent); transform: scaleX(0); transform-origin: left; } /* ---------- Cursor (desktop only) ---------- */ .cursor { position: fixed; top: 0; left: 0; z-index: 500; pointer-events: none; opacity: 0; } .cursor i { display: block; border-radius: 50%; transform: translate(-50%, -50%); transition: width 0.28s ease, height 0.28s ease, background 0.28s ease, border-color 0.28s ease; } .cursor--dot i { width: 7px; height: 7px; background: var(--ink); } .cursor--ring i { width: 38px; height: 38px; border: 1.5px solid var(--ink-faint); } html.hovering .cursor--ring i { width: 62px; height: 62px; background: rgba(37, 26, 16, 0.05); border-color: var(--accent); } html.hovering .cursor--dot i { width: 4px; height: 4px; } html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor .pod { cursor: none; } /* ---------- Nav ---------- */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--nav-h); /* 1fr | auto | 1fr keeps the links optically centred no matter how wide the brand or the cart button get */ display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1.5rem; padding: 0 var(--pad-x); transition: background 0.3s ease, border-color 0.3s ease; border-bottom: 1px solid transparent; } /* Transparent over the hero, but the footer below is the same ink colour as the cart button — without a backdrop the button vanishes into it. */ .nav.is-scrolled { background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom-color: rgba(37, 26, 16, 0.07); } /* columns are pinned explicitly: below 1024px .nav__links leaves the grid flow (it becomes the menu panel), and the actions would otherwise auto-place into column 2 and sit centred */ .brand { grid-column: 1; justify-self: start; z-index: 2; } .nav__links { grid-column: 2; justify-self: center; } .nav__actions { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 0.5rem; z-index: 2; } .brand { display: inline-flex; align-items: center; gap: 0.6rem; } .brand__badge { width: 48px; height: 48px; flex: none; } .brand__badge img { width: 100%; height: 100%; object-fit: contain; } .brand__name { font-family: var(--font-display); font-weight: 700; font-size: 1.3rem; letter-spacing: -0.01em; line-height: 1; } .brand__name em { font-style: normal; color: var(--accent); transition: color 0.5s ease; } .nav__links { display: flex; gap: 2rem; } .nav__links a { position: relative; font-weight: 500; font-size: 0.95rem; color: var(--ink-soft); padding: 0.2rem 0; transition: color 0.3s ease; } .nav__links a:hover { color: var(--ink); } .nav__links a::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 2px; border-radius: 2px; background: var(--accent); transform: scaleX(0); transform-origin: right; transition: transform 0.32s cubic-bezier(0.4, 0, 0.2, 1); } .nav__links a:hover::after { transform: scaleX(1); transform-origin: left; } /* ---------- nested group (Policies) ---------- */ /*
so it works with no JS; nav.js only adds outside-click closing */ .nav__group { position: relative; } .nav__group summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.34rem; font-weight: 500; font-size: 0.95rem; color: var(--ink-soft); padding: 0.2rem 0; transition: color 0.3s ease; } .nav__group summary::-webkit-details-marker { display: none; } .nav__group summary::marker { content: ""; } .nav__group summary:hover { color: var(--ink); } .nav__group summary::after { content: ""; width: 6px; height: 6px; border-right: 1.6px solid currentColor; border-bottom: 1.6px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform 0.25s ease; } .nav__group[open] summary { color: var(--ink); } .nav__group[open] summary::after { transform: translateY(1px) rotate(-135deg); } .nav__sub { position: absolute; top: calc(100% + 0.7rem); left: 50%; transform: translateX(-50%); min-width: 232px; display: grid; gap: 0.15rem; padding: 0.55rem; border-radius: 16px; background: var(--paper); box-shadow: 0 18px 44px -18px rgba(37, 26, 16, 0.45), inset 0 0 0 1px rgba(37, 26, 16, 0.08); } .nav__sub a { padding: 0.5rem 0.7rem; border-radius: 10px; font-size: 0.9rem; white-space: nowrap; transition: background 0.2s ease, color 0.2s ease; } .nav__sub a::after { display: none; } /* no sliding underline inside the panel */ .nav__sub a:hover { background: rgba(37, 26, 16, 0.06); color: var(--ink); } /* the contact/FSSAI tail only belongs in the phone menu panel */ .nav__meta { display: none; } .nav__cart { position: relative; width: 46px; height: 46px; display: grid; place-items: center; background: var(--ink); color: var(--paper); border-radius: 999px; transition: background 0.3s ease; will-change: transform; } .nav__cart:hover { background: var(--accent); } /* menu toggle — phones only; desktop shows the links inline instead */ .nav__menu { display: none; width: 46px; height: 46px; place-items: center; border-radius: 999px; color: var(--ink); background: rgba(37, 26, 16, 0.06); transition: background 0.3s ease; } .nav__menu:hover { background: rgba(37, 26, 16, 0.12); } .nav__menu svg { width: 22px; height: 22px; } .nav__menu .nav__menu-x { display: none; } .nav__menu.is-open .nav__menu-bars { display: none; } .nav__menu.is-open .nav__menu-x { display: block; } .nav__cart svg { width: 21px; height: 21px; } .nav__cart-count { position: absolute; top: -3px; right: -5px; min-width: 19px; height: 19px; display: grid; place-items: center; padding: 0 5px; font-size: 0.68rem; font-weight: 700; background: var(--accent); color: var(--paper); border-radius: 999px; transform: scale(0); transition: transform 0.25s ease, background 0.5s ease; } .nav__cart-count.is-show { transform: scale(1); } /* ---------- Hero shell ---------- */ .hero { position: relative; height: 100svh; min-height: 560px; overflow: hidden; touch-action: pan-y; } /* soft accent glow behind the centre bowl */ .hero__glow { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient( ellipse 44% 40% at 50% 55%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 72% ); will-change: transform; transition: background 0.9s ease; } /* huge lowercase watermark drifting behind everything */ .hero__kinetic { position: absolute; top: 47%; left: 0; right: 0; z-index: 1; transform: translateY(-50%); overflow: hidden; pointer-events: none; } .hero__kinetic-row { display: flex; width: max-content; will-change: transform; } .hero__kinetic-row span { font-family: var(--font-display); font-weight: 800; font-size: 20vh; line-height: 1; white-space: nowrap; letter-spacing: -0.01em; color: transparent; -webkit-text-stroke: 1.5px color-mix(in srgb, var(--ink) 9%, transparent); } .bit { position: absolute; left: var(--x); top: var(--y); z-index: 2; width: 10px; height: 10px; border-radius: 50%; background: var(--c); opacity: 0.5; pointer-events: none; will-change: transform; } /* ---------- Badge chips ---------- */ .hero__chips { position: absolute; top: calc(var(--nav-h) + 1vh); left: 0; right: 0; z-index: 8; display: flex; justify-content: center; gap: 0.5rem; pointer-events: none; } .chip { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); padding: 0.42rem 0.95rem 0.38rem; border: 1px solid var(--ink-faint); border-radius: 999px; background: rgba(255, 255, 255, 0.35); backdrop-filter: blur(4px); will-change: transform; } .chip--fill { background: var(--accent); border-color: transparent; color: #FFF9EF; transition: background 0.5s ease; } /* flavour ornaments — Iconify icons that swap per flavour */ .orn { position: absolute; z-index: 2; display: block; font-size: 30px; pointer-events: none; will-change: transform; } .orn--1 { top: 24%; left: 7%; color: var(--accent); opacity: 0.85; transition: color 0.5s ease; } .orn--2 { top: 20%; right: 8%; color: var(--ink); opacity: 0.4; } .orn--3 { top: 58%; left: 11%; font-size: 24px; color: var(--ink); opacity: 0.38; } .orn--4 { top: 54%; right: 12%; font-size: 26px; color: var(--accent); opacity: 0.8; transition: color 0.5s ease; } /* ---------- Brand line + giant flavour word ---------- */ .hero__word-wrap { position: absolute; top: 21.5%; left: 0; right: 0; /* below the carousel (4) on purpose: the bowls always sit on top of the giant word where they overlap */ z-index: 3; display: grid; justify-items: center; gap: 0.35rem; pointer-events: none; will-change: transform; } .hero__series { font-size: 0.82rem; font-weight: 600; letter-spacing: 0.44em; padding-left: 0.44em; /* optical centre for the tracking */ text-transform: uppercase; color: var(--ink-soft); } .hero__word-mask { display: block; overflow: hidden; padding: 0.1em 0.06em; } .word__scribble { display: none; /* desktop: the bowl overlaps this zone; phones show it */ width: 180px; height: 12px; margin-top: -4px; color: var(--accent); transition: color 0.5s ease; } .hero__word { font-family: var(--font-display); font-weight: 800; font-size: var(--word, 16vh); line-height: 0.95; white-space: nowrap; letter-spacing: -0.025em; text-transform: lowercase; color: var(--accent); will-change: transform; transition: color 0.5s ease; } /* ---------- Carousel of bowls ---------- */ .carousel { position: absolute; inset: 0; z-index: 4; } .pod { position: absolute; left: 50%; top: 55%; width: min(46vw, 58vh); will-change: transform, filter; /* the bowls are scenery, not controls — the arrows and dots drive this */ pointer-events: none; } /* The depth-of-field blur is tweened by layout() in js/main.js as part of the same filter as brightness — doing it here too would compound the two. */ .pod__shadow { position: absolute; left: 14%; right: 14%; bottom: 6%; height: 9%; border-radius: 50%; background: radial-gradient(50% 50% at 50% 50%, rgba(37, 26, 16, 0.3), transparent 72%); z-index: 0; } .pod img { position: relative; z-index: 1; width: 100%; height: auto; pointer-events: none; transition: transform 0.45s ease; will-change: transform; } .pod figcaption { margin-top: -3%; text-align: center; font-weight: 600; font-size: clamp(0.8rem, 1.15vw, 1.05rem); letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); transition: color 0.4s ease, opacity 0.4s ease; } .pod.is-active figcaption { opacity: 0; } /* ---------- carousel arrows ---------- */ /* pointer devices get explicit prev/next; touch has the swipe + dots */ .hero__arrow { position: absolute; top: 52%; z-index: 8; width: 52px; height: 52px; display: none; place-items: center; border-radius: 999px; background: var(--paper); color: var(--ink); box-shadow: 0 12px 30px -14px rgba(37, 26, 16, 0.55), inset 0 0 0 1px rgba(37, 26, 16, 0.08); transition: background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease; } .hero__arrow:hover { background: var(--accent); color: var(--paper); box-shadow: 0 16px 34px -14px color-mix(in srgb, var(--accent) 75%, transparent); } .hero__arrow svg { width: 22px; height: 22px; } .hero__arrow--prev { left: max(2vw, 14px); } .hero__arrow--next { right: max(2vw, 14px); } @media (hover: hover) and (pointer: fine) { .hero__arrow { display: grid; } } /* ---------- Foot: description, dots, CTA ---------- */ .hero__foot { position: absolute; left: 0; right: 0; bottom: calc(var(--ticker-h) + var(--safe-b) + 2.4vh); z-index: 8; display: grid; justify-items: center; gap: 1.05rem; text-align: center; padding: 0 var(--pad-x); } .hero__desc { max-width: 460px; font-family: var(--font-hand); font-size: clamp(1.1rem, 1.3vw, 1.25rem); font-weight: 400; line-height: 1.45; color: #5B4A38; } .desc__in { display: inline-block; will-change: transform; } /* ---------- Pricing line + CTA (one centred axis, handwritten) ---------- */ .hero__pricing { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.15rem 0.6rem; font-family: var(--font-hand); } .hero__pricing > * { line-height: 1; } .price__now { font-weight: 700; font-size: 1.75rem; line-height: 1; color: var(--ink); } .price__weight { font-size: 1rem; color: var(--ink-soft); position: relative; top: 1px; } .hero__cta { display: flex; justify-content: center; align-items: center; gap: 0.6rem; flex-wrap: wrap; } .view-details { min-width: 210px; } /* shown at every width — this is the clearest "there are five of these" cue */ .hero__dots { display: flex; gap: 0.55rem; align-items: center; } .hero__dots button { width: 8px; height: 8px; padding: 0; border-radius: 999px; background: var(--ink-faint); transition: background 0.35s ease, width 0.35s ease; } .hero__dots button.is-on { width: 24px; background: var(--accent); } .btn { font-weight: 600; font-size: clamp(0.92rem, 1.05vw, 1.02rem); padding: 0.92rem 1.9rem; border-radius: 999px; white-space: nowrap; will-change: transform; transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease; } .btn--solid { background: var(--ink); color: var(--paper); box-shadow: 0 14px 30px -14px color-mix(in srgb, var(--accent) 70%, transparent); } .btn--solid:hover { background: var(--accent); } .btn--ghost { border: 1.5px solid var(--ink-faint); color: var(--ink-soft); } .btn--ghost:hover { border-color: var(--ink); color: var(--ink); } .btn__flav { display: inline-block; } /* ---------- Ticker ---------- */ .ticker { position: absolute; left: 0; right: 0; bottom: 0; z-index: 9; height: calc(var(--ticker-h) + var(--safe-b)); display: flex; align-items: center; padding-bottom: var(--safe-b); overflow: hidden; background: var(--ink); color: var(--paper); } .ticker__track { display: flex; width: max-content; will-change: transform; } .ticker__group { display: flex; align-items: center; white-space: nowrap; } .ticker__group span { font-weight: 500; font-size: 0.82rem; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.75; padding: 0 1.4rem; } .ticker__group b { color: var(--accent); font-weight: 400; transition: color 0.9s ease; } /* ---------- Cart drawer ---------- */ .cart-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(23, 14, 7, 0.4); backdrop-filter: blur(3px); opacity: 0; visibility: hidden; transition: opacity 0.4s ease, visibility 0.4s ease; } .cart-overlay.is-open { opacity: 1; visibility: visible; } .cart { position: fixed; z-index: 310; left: 0; right: 0; bottom: 0; max-height: 78svh; display: flex; flex-direction: column; background: var(--paper); border-radius: 22px 22px 0 0; padding: 1.3rem 1.4rem calc(1.2rem + var(--safe-b)); box-shadow: 0 -20px 60px rgba(23, 14, 7, 0.25); transform: translateY(105%); transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1); } .cart.is-open { transform: none; } .cart__head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; } .cart__head h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.35rem; letter-spacing: -0.01em; } .cart__close { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 999px; background: rgba(37, 26, 16, 0.07); font-size: 0.95rem; transition: background 0.25s ease; } .cart__close:hover { background: rgba(37, 26, 16, 0.14); } /* Empty state. Shown via .cart.is-empty rather than an inline style so the totals/checkout block can be hidden by the same switch — an empty cart has no subtotal worth printing and nothing to check out. */ .cart__empty { display: none; justify-items: center; text-align: center; gap: 0.35rem; padding: 2rem 1rem 2.4rem; } .cart.is-empty .cart__empty { display: grid; } .cart.is-empty .cart__foot { display: none; } .cart__empty-art { width: 104px; height: 74px; color: var(--accent); opacity: 0.9; transform: rotate(-2deg); transition: color 0.5s ease; margin-bottom: 0.5rem; } .cart__empty b { font-family: var(--font-display); font-weight: 800; font-size: 1.2rem; color: var(--ink); } .cart__empty span { font-family: var(--font-hand); font-size: 0.95rem; color: var(--ink-soft); } .cart__items { list-style: none; overflow-y: auto; flex: 1; display: grid; gap: 0.4rem; } .cart__item { display: flex; align-items: center; gap: 0.8rem; padding: 0.55rem 0; border-bottom: 1px solid rgba(37, 26, 16, 0.08); } .cart__item img { width: 54px; height: auto; flex: none; } .cart__meta { flex: 1; min-width: 0; display: grid; gap: 0.1rem; } .cart__meta b { font-weight: 600; font-size: 0.95rem; } .cart__meta span { font-size: 0.8rem; color: var(--ink-soft); } .cart__qty { display: flex; align-items: center; gap: 0.15rem; background: rgba(37, 26, 16, 0.06); border-radius: 999px; padding: 0.15rem; } .cart__qty button { width: 28px; height: 28px; display: grid; place-items: center; border-radius: 999px; font-weight: 600; transition: background 0.25s ease; } .cart__qty button:hover { background: rgba(37, 26, 16, 0.1); } .cart__qty span { min-width: 20px; text-align: center; font-weight: 600; font-size: 0.9rem; } .cart__line { font-weight: 700; font-size: 0.95rem; min-width: 52px; text-align: right; } .cart__foot { display: grid; gap: 0.7rem; padding-top: 1rem; } .cart__note { font-size: 0.8rem; color: var(--ink-soft); text-align: center; } .cart__ships { font-family: var(--font-hand); font-size: 0.92rem; color: var(--ink-soft); text-align: center; opacity: 0.8; } /* delivery region — segmented control, same visual language as .cart__qty */ .cart__region { display: flex; align-items: center; justify-content: space-between; gap: 0.6rem; flex-wrap: wrap; } .cart__region-label { font-size: 0.85rem; color: var(--ink-soft); } .cart__region-pills { display: flex; gap: 0.2rem; background: rgba(37, 26, 16, 0.06); border-radius: 999px; padding: 0.2rem; } .cart__region-pill { padding: 0.36rem 0.8rem; border-radius: 999px; font-size: 0.8rem; font-weight: 600; color: var(--ink-soft); white-space: nowrap; transition: background 0.25s ease, color 0.25s ease; } .cart__region-pill:hover { color: var(--ink); } .cart__region-pill.is-on { background: var(--paper); color: var(--ink); box-shadow: 0 1px 3px rgba(37, 26, 16, 0.14); } .cart__row { display: flex; justify-content: space-between; align-items: baseline; font-size: 0.95rem; color: var(--ink-soft); } .cart__row b { font-weight: 600; font-size: 1rem; color: var(--ink); } /* delivery reads as a win when the order clears the threshold */ .cart__delivery.is-free { color: var(--accent); transition: color 0.5s ease; } .cart__row--total { border-top: 1px solid rgba(37, 26, 16, 0.1); padding-top: 0.6rem; color: var(--ink); } .cart__row--total b { font-family: var(--font-display); font-weight: 800; font-size: 1.3rem; } .cart__checkout { width: 100%; } /* combos sheet */ .combo-list { list-style: none; display: grid; } .combo { display: flex; align-items: center; gap: 0.9rem; padding: 0.9rem 0; border-bottom: 1px solid rgba(37, 26, 16, 0.08); } .combo__info { flex: 1; min-width: 0; display: grid; gap: 0.14rem; } .combo__info b { font-weight: 600; font-size: 1rem; } .combo__info span { font-size: 0.8rem; color: var(--ink-soft); } .combo__save { font-family: var(--font-hand); font-style: normal; font-weight: 700; font-size: 0.88rem; color: var(--accent); transform: rotate(-2deg); transform-origin: left center; width: fit-content; } .combo__price { display: grid; justify-items: end; gap: 0.05rem; } .combo__price b { font-family: var(--font-hand); font-weight: 700; font-size: 1.2rem; line-height: 1; } .combo__price s { font-size: 0.8rem; color: var(--ink-soft); } .combo__ship { font-family: var(--font-hand); font-size: 0.95rem; color: var(--accent); text-align: center; padding-top: 0.9rem; transition: color 0.5s ease; } .btn--sm { padding: 0.55rem 1.15rem; font-size: 0.88rem; } /* ---------- Product details panel ---------- */ /* full-screen over the hero; sits above the sheets (310/320) but below the toast so "added to cart" is still readable while the panel is open */ .product { position: fixed; inset: 0; z-index: 330; background: var(--paper); transform: translateY(100%); transition: transform 0.55s cubic-bezier(0.32, 0.72, 0, 1); visibility: hidden; } .product.is-open { transform: translateY(0); visibility: visible; } .product__scroll { height: 100%; overflow-y: auto; -webkit-overflow-scrolling: touch; /* bottom clearance keeps the last line above the pinned buy bar */ padding: calc(1.4rem + var(--safe-t, 0px)) var(--pad-x) calc(7rem + var(--safe-b)); max-width: 760px; margin: 0 auto; } .product__close { position: absolute; top: calc(1rem + var(--safe-t, 0px)); right: var(--pad-x); z-index: 2; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 999px; /* opaque: content scrolls underneath this button, so a translucent fill would let the text bleed through it */ background: var(--paper); box-shadow: 0 2px 10px rgba(37, 26, 16, 0.16), inset 0 0 0 1px rgba(37, 26, 16, 0.12); font-size: 0.95rem; transition: background 0.25s ease; } .product__close:hover { background: #FFFDF8; } .product__top { display: grid; justify-items: center; text-align: center; } .product__img { width: min(78%, 380px); height: auto; /* the tinted stage the bowls are shot against, echoed behind the cut-out */ filter: drop-shadow(0 22px 30px rgba(37, 26, 16, 0.18)); } .product__series { font-size: 0.72rem; font-weight: 600; letter-spacing: 0.4em; padding-left: 0.4em; text-transform: uppercase; color: var(--ink-soft); } .product__name { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.4rem, 11vw, 3.6rem); line-height: 1; text-transform: lowercase; color: var(--accent); transition: color 0.5s ease; margin-top: 0.3rem; } .product__about { max-width: 46ch; margin-top: 0.9rem; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); } /* pinned buy bar — always reachable, however long the ingredient list runs */ .product__buy { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; padding: 0.85rem var(--pad-x) calc(0.85rem + var(--safe-b)); background: var(--paper); border-top: 1px solid rgba(37, 26, 16, 0.1); box-shadow: 0 -14px 30px rgba(37, 26, 16, 0.1); } .product__buy-in { max-width: 760px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } /* stacked, so "200 g pouch" can't wrap mid-phrase in the narrow bar */ .product__price { display: grid; gap: 0.1rem; font-family: var(--font-hand); flex: none; } .product__price b { font-weight: 700; font-size: 1.6rem; line-height: 1; color: var(--ink); } .product__price span { font-size: 0.85rem; color: var(--ink-soft); white-space: nowrap; } .product__add { flex: 1 1 auto; min-width: 0; max-width: 260px; } .product__block { margin-top: 2rem; } .product__block h3 { font-family: var(--font-display); font-weight: 800; font-size: 1.15rem; margin-bottom: 0.7rem; } .product__nutri { width: 100%; border-collapse: collapse; font-size: 0.95rem; } .product__nutri th, .product__nutri td { padding: 0.6rem 0.2rem; border-bottom: 1px solid rgba(37, 26, 16, 0.1); text-align: left; } .product__nutri th { font-weight: 600; color: var(--ink-soft); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; } .product__nutri td:last-child, .product__nutri th:last-child { text-align: right; font-variant-numeric: tabular-nums; } .product__nutri tbody td:last-child { font-weight: 700; } .product__fine { margin-top: 0.6rem; font-size: 0.78rem; color: var(--ink-soft); } .product__ingredients { font-size: 0.95rem; line-height: 1.7; color: var(--ink-soft); } @media (min-width: 721px) { .product__top { grid-template-columns: 1fr 1fr; align-items: center; text-align: left; justify-items: start; } .product__img { grid-row: 1 / span 3; width: 100%; } .product__about { margin-left: 0; } } /* fly-to-cart dot */ .fly { position: fixed; z-index: 400; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; pointer-events: none; } /* toast */ .toast { position: fixed; left: 50%; bottom: calc(var(--ticker-h) + var(--safe-b) + 1.2rem); z-index: 320; transform: translate(-50%, 14px); background: var(--ink); color: var(--paper); font-size: 0.88rem; font-weight: 500; padding: 0.72rem 1.4rem; border-radius: 999px; box-shadow: 0 14px 34px -10px rgba(23, 14, 7, 0.45); opacity: 0; visibility: hidden; pointer-events: none; max-width: 88vw; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.3s ease, transform 0.3s ease, visibility 0.3s ease; } .toast.is-show { opacity: 1; visibility: visible; transform: translate(-50%, 0); } /* ---------- Responsive ---------- */ @media (max-width: 1024px) { /* the inline link row becomes a full-screen menu behind the ☰ toggle, so the same markup serves both breakpoints */ .nav__menu { display: grid; } .nav__links { position: fixed; inset: 0; /* the desktop justify-self: center still reaches this abspos child of the grid nav and would shrink-wrap the panel to the widest link */ justify-self: stretch; /* the panel is a child of .nav, so it already paints over the hero; it only needs to sit *under* its own siblings so the ☰/✕ toggle stays clickable */ z-index: 1; /* flex column with an auto margin above the first link *and* above .nav__meta: the free space splits evenly between the two, which centres the link group vertically while the contact block stays at the foot */ display: flex; flex-direction: column; align-items: center; gap: 1rem; background: var(--paper); padding: var(--nav-h) var(--pad-x) calc(2rem + var(--safe-b)); overflow-y: auto; /* the group expands; short phones must still reach it */ transform: translateY(-100%); transition: transform 0.5s cubic-bezier(0.32, 0.72, 0, 1); visibility: hidden; } .nav__links.is-open { transform: translateY(0); visibility: visible; } .nav__links a { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 7vw, 2.2rem); text-transform: lowercase; color: var(--ink); letter-spacing: -0.02em; } /* the sliding underline is a desktop hover affordance; pointless here */ .nav__links a::after { display: none; } .nav__links > a { flex: none; } /* pairs with the auto margin on .nav__meta to centre the link group */ .nav__links > a:first-of-type { margin-top: auto; } /* the dropdown becomes a plain inline accordion in the panel */ .nav__group { position: static; display: grid; justify-items: center; flex: none; width: 100%; } .nav__group summary { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 7vw, 2.2rem); text-transform: lowercase; color: var(--ink); letter-spacing: -0.02em; } .nav__group summary::after { width: 8px; height: 8px; border-width: 2px; } .nav__sub { position: static; transform: none; min-width: 0; width: min(100%, 320px); margin-inline: auto; justify-items: center; gap: 0.1rem; margin-top: 0.7rem; padding: 0.6rem 0; background: none; box-shadow: none; border-top: 1px solid rgba(37, 26, 16, 0.1); border-bottom: 1px solid rgba(37, 26, 16, 0.1); } .nav__sub a { font-family: var(--font-body); font-weight: 500; font-size: 1rem; text-transform: none; color: var(--ink-soft); letter-spacing: 0; white-space: normal; text-align: center; } .nav__meta { display: grid; justify-items: center; gap: 0.4rem; /* auto pushes this to the foot of the panel; it collapses to the padding when the expanded accordion makes the content taller than the screen */ margin-top: auto; padding-top: 1.6rem; border-top: 1px solid rgba(37, 26, 16, 0.1); width: min(100%, 320px); flex: none; } .nav__meta a, .nav__meta span { font-family: var(--font-body); font-weight: 500; font-size: 0.92rem; text-transform: none; letter-spacing: 0; color: var(--ink-soft); } .nav__meta span { font-size: 0.76rem; opacity: 0.75; text-align: center; } } /* Desktop: cart becomes a right-side panel */ @media (min-width: 721px) { .cart { left: auto; top: 0; bottom: 0; width: min(420px, 92vw); max-height: none; border-radius: 22px 0 0 22px; padding: 1.6rem 1.6rem 1.4rem; transform: translateX(105%); } .cart.is-open { transform: none; } } /* Primary audience: phones. Tighter rhythm, bigger bowl, dots + swipe. */ @media (max-width: 720px) { :root { --pad-x: 6vw; --nav-h: 68px; --ticker-h: 40px; } .brand__name { display: none; } .brand__badge { width: 56px; height: 56px; } .hide-sm, .hero__chips .hide-sm { display: none; } .chip { font-size: 0.66rem; padding: 0.38rem 0.8rem 0.34rem; } .hero__word-wrap { top: 20%; } .hero__series { font-size: 0.72rem; letter-spacing: 0.4em; padding-left: 0.4em; } .pod { width: min(76vw, 48vh); top: 49%; } .pod figcaption { display: none; } .hero__kinetic-row span { font-size: 11vh; -webkit-text-stroke: 1.2px color-mix(in srgb, var(--ink) 7%, transparent); } .bit--d { display: none; } .bit { width: 8px; height: 8px; opacity: 0.4; } .orn { font-size: 22px; } .orn--1 { top: 17%; left: 6%; } .orn--2 { top: 15.5%; right: 7%; } .orn--3 { top: 61%; left: 5%; font-size: 18px; } .orn--4 { top: 58%; right: 6%; font-size: 20px; } .hero__desc { font-size: 1.05rem; max-width: 32ch; } .hero__foot { gap: 0.75rem; bottom: calc(var(--ticker-h) + var(--safe-b) + 2vh); } .price__now { font-size: 1.6rem; } .hero__cta { width: min(100%, 360px); flex-wrap: nowrap; } .view-details { flex: 1 1 auto; min-width: 0; padding: 0.95rem 1rem; font-size: 1rem; } .open-combos { flex: 0 0 auto; padding: 0.95rem 1.15rem; font-size: 0.95rem; } .word__scribble { display: block; width: 140px; height: 10px; } /* no custom cursor at phone widths (touch laptops / responsive windows) */ .cursor { display: none; } html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor .pod { cursor: auto; } .ticker__group span { font-size: 0.76rem; padding: 0 1rem; } } /* Short landscape phones: keep the composition from colliding */ @media (max-height: 560px) { .hero__word-wrap { top: 19%; } .pod { width: min(34vh, 40vw); } .hero__desc, .hero__khao { display: none; } } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { .js .loader { display: none; } .cursor { display: none; } html.has-cursor, html.has-cursor a, html.has-cursor button, html.has-cursor .pod { cursor: auto; } .cart, .cart-overlay, .toast, .nav__cart-count { transition: none; } }