/* Stackplate — "night market stall": one deliberate dark world. Ingredient tiles are pale porcelain so their colors carry the page. */ :root { color-scheme: dark; --ink: #14171c; --ink-rgb: 20, 23, 28; --panel: #1b2027; --panel-rgb: 27, 32, 39; --panel-2: #232a33; --line: #333c47; --parchment: #f1e9d8; --muted: rgba(241, 233, 216, 0.6); --faint: rgba(241, 233, 216, 0.38); --turmeric: #e8ac2e; --turmeric-hi: #f2bb47; --accent-rgb: 232, 172, 46; --on-accent: #201404; --chili: #d8583f; --chili-rgb: 216, 88, 63; --on-chili: #2a0f09; --error: #f08a74; --ok: #7ba066; --shadow: rgba(0, 0, 0, 0.35); --skeleton-hi: #2c3440; --tile-bg: #efe7d6; --tile-edge: rgba(20, 23, 28, 0.22); --tile-shadow: rgba(0, 0, 0, 0.5); --display: 'Fraunces', Georgia, 'Times New Roman', serif; --body: 'Public Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --mono: 'IBM Plex Mono', ui-monospace, 'SFMono-Regular', Menlo, monospace; --stage-top: clamp(250px, 42dvh, 430px); } /* Themes. "night" is the :root default above; each one below swaps the palette. theme.js sets data-theme on before first paint. */ :root[data-theme='paper'] { color-scheme: light; --ink: #f4efe5; --ink-rgb: 244, 239, 229; --panel: #fffcf6; --panel-rgb: 255, 252, 246; --panel-2: #efe8da; --line: #ddd3c1; --parchment: #211b13; --muted: rgba(33, 27, 19, 0.66); --faint: rgba(33, 27, 19, 0.46); --turmeric: #9a6200; --turmeric-hi: #b07410; --accent-rgb: 190, 128, 20; --on-accent: #fffaf0; --chili: #c4462d; --chili-rgb: 196, 70, 45; --on-chili: #fff6f2; --error: #b23a22; --ok: #4f7a3a; --shadow: rgba(80, 60, 20, 0.14); --skeleton-hi: #f8f3ea; --tile-bg: #fffdf9; --tile-edge: rgba(33, 27, 19, 0.14); --tile-shadow: rgba(80, 60, 20, 0.28); } :root[data-theme='matcha'] { --ink: #111d17; --ink-rgb: 17, 29, 23; --panel: #18291f; --panel-rgb: 24, 41, 31; --panel-2: #203428; --line: #2f4b3b; --parchment: #ebf2e2; --muted: rgba(235, 242, 226, 0.62); --faint: rgba(235, 242, 226, 0.4); --turmeric: #a9d46f; --turmeric-hi: #bde28a; --accent-rgb: 169, 212, 111; --on-accent: #12200a; --chili: #e0835c; --chili-rgb: 224, 131, 92; --on-chili: #2a1206; --skeleton-hi: #2a4133; --tile-bg: #eaeedd; --tile-edge: rgba(17, 29, 23, 0.22); } :root[data-theme='paprika'] { --ink: #21110e; --ink-rgb: 33, 17, 14; --panel: #2c1713; --panel-rgb: 44, 23, 19; --panel-2: #38201a; --line: #52322a; --parchment: #f8e8dc; --muted: rgba(248, 232, 220, 0.62); --faint: rgba(248, 232, 220, 0.4); --turmeric: #ffab45; --turmeric-hi: #ffbe6a; --accent-rgb: 255, 171, 69; --on-accent: #2a1402; --chili: #ef6a4c; --chili-rgb: 239, 106, 76; --on-chili: #2a0c05; --skeleton-hi: #472a22; --tile-bg: #f5e6d5; --tile-edge: rgba(33, 17, 14, 0.22); } :root[data-theme='tide'] { --ink: #0d1722; --ink-rgb: 13, 23, 34; --panel: #132132; --panel-rgb: 19, 33, 50; --panel-2: #1a2c42; --line: #28435f; --parchment: #e4eef8; --muted: rgba(228, 238, 248, 0.62); --faint: rgba(228, 238, 248, 0.4); --turmeric: #5ccfe6; --turmeric-hi: #85dcee; --accent-rgb: 92, 207, 230; --on-accent: #04222a; --chili: #f07b6a; --chili-rgb: 240, 123, 106; --on-chili: #2c0b06; --skeleton-hi: #243a55; --tile-bg: #e4ebf1; --tile-edge: rgba(13, 23, 34, 0.22); } * { box-sizing: border-box; } html, body { height: 100%; } body { margin: 0; overflow: hidden; background: var(--ink); color: var(--parchment); font: 15px/1.5 var(--body); -webkit-font-smoothing: antialiased; transition: background-color 0.25s ease, color 0.25s ease; } button, input { font: inherit; color: inherit; } :focus-visible { outline: 2px solid var(--turmeric); outline-offset: 2px; } /* ---------- kitchen pattern ---------- A faint surface behind everything: tiles, a recipe notebook, a bamboo mat, terracotta, sea waves. It fades out before the pile so it never sits under the ingredients. */ body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background: var(--pattern, none); /* patterns are drawn strong and toned down here; phones get them at full strength, since faint lines vanish on a small, bright screen */ opacity: 0.62; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 72%); mask-image: linear-gradient(to bottom, #000 0%, #000 30%, transparent 72%); } :root { /* night: kitchen wall tiles */ --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='56' height='56'%3E%3Crect x='1.5' y='1.5' width='53' height='53' rx='5' fill='%231e232b'/%3E%3Crect x='1.5' y='1.5' width='53' height='14' rx='5' fill='%23232932'/%3E%3Crect x='1.5' y='9' width='53' height='8' fill='%231e232b'/%3E%3C/svg%3E") 0 0 / 56px 56px; } :root[data-theme='paper'] { /* recipe notebook: ruled lines and a margin */ --pattern: linear-gradient(90deg, transparent var(--margin-x), rgba(196, 70, 45, 0.34) var(--margin-x), rgba(196, 70, 45, 0.34) calc(var(--margin-x) + 2px), transparent calc(var(--margin-x) + 2px)) 0 0 / 100% 100%, linear-gradient(transparent 30px, rgba(60, 100, 160, 0.26) 30px) 0 0 / 100% 32px; --margin-x: max(28px, calc(50% - 360px)); } :root[data-theme='matcha'] { /* bamboo mat: slats bound by threads */ --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='12'%3E%3Crect x='0' y='0' width='150' height='9.5' rx='3' fill='%231b2d23'/%3E%3Crect x='0' y='1' width='150' height='2' fill='%23213629'/%3E%3Crect x='72' y='0' width='4' height='12' fill='%232d4a39'/%3E%3C/svg%3E") 0 0 / 150px 12px; } :root[data-theme='paprika'] { /* terracotta floor tiles */ --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='44' height='44'%3E%3Cpath d='M0 22 22 0 44 22 22 44Z' fill='none' stroke='%234d2b22' stroke-width='1.2'/%3E%3Ccircle cx='22' cy='22' r='2.2' fill='%234d2b22'/%3E%3Ccircle cx='0' cy='0' r='2.2' fill='%234d2b22'/%3E%3Ccircle cx='44' cy='0' r='2.2' fill='%234d2b22'/%3E%3Ccircle cx='0' cy='44' r='2.2' fill='%234d2b22'/%3E%3Ccircle cx='44' cy='44' r='2.2' fill='%234d2b22'/%3E%3C/svg%3E") 0 0 / 44px 44px; } :root[data-theme='tide'] { /* seigaiha: sea waves */ --pattern: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='20'%3E%3Cg stroke-width='1'%3E%3Ccircle cx='20' cy='-10' r='19' fill='%230d1722' stroke='%23203a55'/%3E%3Ccircle cx='20' cy='-10' r='14' fill='none' stroke='%23203a55'/%3E%3Ccircle cx='20' cy='-10' r='9' fill='none' stroke='%23203a55'/%3E%3Ccircle cx='20' cy='-10' r='4' fill='none' stroke='%23203a55'/%3E%3Ccircle cx='0' cy='0' r='19' fill='%230d1722' stroke='%23203a55'/%3E%3Ccircle cx='0' cy='0' r='14' fill='none' stroke='%23203a55'/%3E%3Ccircle cx='0' cy='0' r='9' fill='none' stroke='%23203a55'/%3E%3Ccircle cx='0' cy='0' r='4' fill='none' stroke='%23203a55'/%3E%3Ccircle cx='40' cy='0' r='19' fill='%230d1722' stroke='%23203a55'/%3E%3Ccircle cx='40' cy='0' r='14' fill='none' stroke='%23203a55'/%3E%3Ccircle cx='40' cy='0' r='9' fill='none' stroke='%23203a55'/%3E%3Ccircle cx='40' cy='0' r='4' fill='none' stroke='%23203a55'/%3E%3Ccircle cx='20' cy='10' r='19' fill='%230d1722' stroke='%23203a55'/%3E%3Ccircle cx='20' cy='10' r='14' fill='none' stroke='%23203a55'/%3E%3Ccircle cx='20' cy='10' r='9' fill='none' stroke='%23203a55'/%3E%3Ccircle cx='20' cy='10' r='4' fill='none' stroke='%23203a55'/%3E%3Ccircle cx='0' cy='20' r='19' fill='%230d1722' stroke='%23203a55'/%3E%3Ccircle cx='0' cy='20' r='14' fill='none' stroke='%23203a55'/%3E%3Ccircle cx='0' cy='20' r='9' fill='none' stroke='%23203a55'/%3E%3Ccircle cx='0' cy='20' r='4' fill='none' stroke='%23203a55'/%3E%3Ccircle cx='40' cy='20' r='19' fill='%230d1722' stroke='%23203a55'/%3E%3Ccircle cx='40' cy='20' r='14' fill='none' stroke='%23203a55'/%3E%3Ccircle cx='40' cy='20' r='9' fill='none' stroke='%23203a55'/%3E%3Ccircle cx='40' cy='20' r='4' fill='none' stroke='%23203a55'/%3E%3Ccircle cx='20' cy='30' r='19' fill='%230d1722' stroke='%23203a55'/%3E%3Ccircle cx='20' cy='30' r='14' fill='none' stroke='%23203a55'/%3E%3Ccircle cx='20' cy='30' r='9' fill='none' stroke='%23203a55'/%3E%3Ccircle cx='20' cy='30' r='4' fill='none' stroke='%23203a55'/%3E%3Ccircle cx='0' cy='40' r='19' fill='%230d1722' stroke='%23203a55'/%3E%3Ccircle cx='0' cy='40' r='14' fill='none' stroke='%23203a55'/%3E%3Ccircle cx='0' cy='40' r='9' fill='none' stroke='%23203a55'/%3E%3Ccircle cx='0' cy='40' r='4' fill='none' stroke='%23203a55'/%3E%3Ccircle cx='40' cy='40' r='19' fill='%230d1722' stroke='%23203a55'/%3E%3Ccircle cx='40' cy='40' r='14' fill='none' stroke='%23203a55'/%3E%3Ccircle cx='40' cy='40' r='9' fill='none' stroke='%23203a55'/%3E%3Ccircle cx='40' cy='40' r='4' fill='none' stroke='%23203a55'/%3E%3C/g%3E%3C/svg%3E") 0 0 / 40px 20px; } @media (max-width: 640px) { body::before { opacity: 1; -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 82%); mask-image: linear-gradient(to bottom, #000 0%, #000 45%, transparent 82%); } } /* ---------- the pile ---------- */ #pile { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; touch-action: none; display: block; } #labels { position: fixed; inset: 0; z-index: 1; pointer-events: none; } .label { position: absolute; left: 0; top: 0; font: 500 11px/1.25 var(--body); color: var(--parchment); text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity 0.35s ease; } .label.on { opacity: 1; } .label.small { font-size: 10px; } /* ---------- top bar ---------- */ .topbar { position: fixed; inset: 0 0 auto 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; gap: 16px; height: calc(64px + env(safe-area-inset-top, 0px)); padding: env(safe-area-inset-top, 0px) max(16px, 3vw) 0; pointer-events: none; } .brand { pointer-events: auto; display: inline-flex; align-items: center; gap: 10px; color: var(--parchment); text-decoration: none; font: 600 16px/1 var(--body); letter-spacing: -0.01em; } .counter { margin: 0; font: 12px/1 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; } /* language picker */ .top-right { display: flex; align-items: center; gap: 14px; pointer-events: auto; } .lang-pick { position: relative; display: inline-flex; } .lang-pick::after { content: ''; position: absolute; inset-inline-end: 11px; top: 50%; width: 6px; height: 6px; margin-top: -5px; border: solid var(--muted); border-width: 0 1.5px 1.5px 0; transform: rotate(45deg); pointer-events: none; } .lang-pick select { appearance: none; -webkit-appearance: none; background: var(--panel); border: 1px solid var(--line); border-radius: 7px; padding-block: 6px; padding-inline: 10px 28px; font: 13px/1.2 var(--body); color: var(--parchment); cursor: pointer; } .lang-pick select:hover { border-color: var(--turmeric); } /* theme picker */ .theme-pick { position: relative; } .theme-btn { display: grid; place-items: center; width: 32px; height: 30px; padding: 0; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); cursor: pointer; } .theme-btn:hover, .theme-btn[aria-expanded='true'] { border-color: var(--turmeric); } .swatch { display: block; width: 16px; height: 16px; border-radius: 50%; background: linear-gradient(135deg, var(--sw-bg) 0 50%, var(--sw-accent) 50% 100%); box-shadow: 0 0 0 1px var(--sw-line) inset; flex: 0 0 auto; } .theme-menu { position: absolute; top: calc(100% + 8px); inset-inline-end: 0; z-index: 5; min-width: 168px; display: flex; flex-direction: column; gap: 2px; padding: 6px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 14px 34px var(--shadow); } .theme-menu[hidden] { display: none; } .theme-menu .ttl { margin: 4px 8px 6px; font: 500 10.5px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--faint); } .theme-menu button { display: flex; align-items: center; gap: 10px; padding: 8px; border: 0; border-radius: 7px; background: transparent; color: var(--parchment); font: 13.5px/1.2 var(--body); text-align: start; cursor: pointer; } .theme-menu button:hover { background: var(--panel-2); } .theme-menu button[aria-pressed='true'] { background: var(--panel-2); } .theme-menu button[aria-pressed='true']::after { content: ''; margin-inline-start: auto; width: 5px; height: 9px; border: solid var(--turmeric); border-width: 0 2px 2px 0; transform: rotate(45deg) translate(-2px, -1px); } .visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ---------- sponsor rails ---------- */ .rail { position: fixed; z-index: 2; top: calc(84px + env(safe-area-inset-top, 0px)); width: 184px; display: flex; flex-direction: column; gap: 10px; } .rail-left { left: max(16px, 2vw); } .rail-right { right: max(16px, 2vw); } .sp { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; height: 142px; padding: 12px; border-radius: 10px; text-align: center; text-decoration: none; color: var(--parchment); background: rgba(var(--panel-rgb), 0.92); border: 1px solid var(--line); transition: border-color 0.15s ease, transform 0.15s ease, background 0.15s ease; animation: sp-in 0.35s ease both; animation-delay: calc(var(--k, 0) * 60ms); } @keyframes sp-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } a.sp:hover { border-color: var(--turmeric); transform: translateY(-1px); } .sp-open { border-style: dashed; background: rgba(var(--ink-rgb), 0.82); } .sp-open .k { font: 500 10.5px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); } .sp-open .p { font: 500 20px/1 var(--mono); color: var(--turmeric); font-variant-numeric: tabular-nums; white-space: nowrap; } .sp-open .p small { font-size: 11.5px; color: var(--muted); } .sp-open .cta { font: 11.5px/1.3 var(--mono); color: var(--muted); text-wrap: balance; } .sp-live img { width: 34px; height: 34px; border-radius: 8px; object-fit: contain; background: #fff; } .sp-live .n { font: 600 13.5px/1.2 var(--body); } .sp-live .tl { font: 12px/1.35 var(--body); color: var(--muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .sp-live .ad { font: 10px/1 var(--mono); letter-spacing: 0.08em; text-transform: uppercase; color: var(--faint); } .sp-reserved { opacity: 0.55; border-style: dashed; } .sp-reserved .k { font: 500 10.5px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--faint); } .pager { display: flex; align-items: center; justify-content: center; gap: 10px; font: 12px/1 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; } .pager button { width: 28px; height: 28px; border-radius: 7px; border: 1px solid var(--line); background: rgba(var(--panel-rgb), 0.9); color: var(--parchment); cursor: pointer; font-size: 15px; line-height: 1; } .pager button:hover { border-color: var(--turmeric); } .pager button:disabled { opacity: 0.35; cursor: default; } [dir='rtl'] .pager button { transform: scaleX(-1); } /* narrow screens: one scrolling strip along the bottom edge */ .rail-strip { position: fixed; z-index: 2; left: 0; right: 0; bottom: 0; display: flex; gap: 8px; overflow-x: auto; padding: 8px 12px calc(8px + env(safe-area-inset-bottom, 0px)); background: linear-gradient(to top, rgba(var(--ink-rgb), 0.96) 70%, rgba(var(--ink-rgb), 0)); scrollbar-width: none; } .rail-strip::-webkit-scrollbar { display: none; } .chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border-radius: 8px; border: 1px solid var(--line); background: rgba(var(--panel-rgb), 0.95); color: var(--parchment); text-decoration: none; font: 12.5px/1 var(--body); white-space: nowrap; } .chip img { width: 22px; height: 22px; border-radius: 5px; background: #fff; object-fit: contain; } .chip.open { border-style: dashed; color: var(--muted); font-family: var(--mono); font-size: 11.5px; } .chip.open b { color: var(--turmeric); font-weight: 500; } .chip.reserved { opacity: 0.5; border-style: dashed; font-family: var(--mono); font-size: 11.5px; } @media (max-width: 1239px), (max-height: 599px) { .rail { display: none; } } @media (min-width: 1240px) and (min-height: 600px) { .rail-strip { display: none; } } body.has-strip .stage { max-height: calc(100dvh - var(--stage-top) - 70px - env(safe-area-inset-bottom, 0px)); } @media (min-width: 1240px) and (min-height: 600px) { body.has-strip .stage { max-height: calc(100dvh - var(--stage-top) - 14px - env(safe-area-inset-bottom, 0px)); } } /* ---------- stage: hero, search, card ---------- */ .stage { position: fixed; z-index: 2; left: 50%; top: var(--stage-top); transform: translateX(-50%); width: min(640px, calc(100vw - 32px)); max-height: calc(100dvh - var(--stage-top) - 14px - env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 12px; pointer-events: none; } .stage > * { pointer-events: auto; } .hero { position: absolute; left: 0; right: 0; bottom: calc(100% + 26px); text-align: center; pointer-events: none; transition: opacity 0.3s ease, transform 0.3s ease; } .eyebrow { margin: 0 0 10px; font: 500 11px/1 var(--mono); letter-spacing: 0.16em; text-transform: uppercase; color: var(--turmeric); } .hero h1 { margin: 0; font: 500 clamp(2.5rem, 7.5vw, 4.4rem)/1.02 var(--display); letter-spacing: -0.02em; text-wrap: balance; } .sub { margin: 12px 0 0; font: italic 400 clamp(1.05rem, 2.4vw, 1.3rem)/1.3 var(--display); color: var(--muted); } body.active .hero { opacity: 0; transform: translateY(-8px); } .search { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 8px 8px 16px; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 10px 30px var(--shadow); } .search:focus-within { border-color: rgba(var(--accent-rgb), 0.6); } .prompt { font: 15px/1 var(--mono); color: var(--faint); } #q { flex: 1 1 auto; min-width: 0; background: transparent; border: 0; outline: 0; padding: 10px 4px; font-size: 16px; } #q::placeholder { color: var(--faint); } .clear { width: 34px; height: 34px; border: 0; border-radius: 8px; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; } .clear:hover { background: var(--panel-2); color: var(--parchment); } .go { border: 0; border-radius: 7px; padding: 11px 18px; background: var(--turmeric); color: var(--on-accent); font: 500 14px/1 var(--mono); cursor: pointer; white-space: nowrap; transition: background 0.15s ease, transform 0.1s ease; } .go:hover { background: var(--turmeric-hi); } .go:active { transform: scale(0.97); } .try { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 13px; } body.active .try { display: none; } .try-label { color: var(--muted); margin-inline-end: 4px; } .try button { border: 1px solid var(--line); background: rgba(var(--panel-rgb), 0.85); border-radius: 6px; padding: 6px 11px; cursor: pointer; transition: border-color 0.15s ease; } .try button:hover { border-color: var(--turmeric); } .try .surprise { border-style: dashed; color: var(--muted); } .stat { margin-inline-start: auto; font: 11.5px/1 var(--mono); color: var(--faint); font-variant-numeric: tabular-nums; } /* ---------- what's in my kitchen? ---------- */ .try .kitchen-btn { border: 1px solid rgba(var(--accent-rgb), 0.55); color: var(--turmeric); background: rgba(var(--accent-rgb), 0.08); } .try .kitchen-btn:hover { background: rgba(var(--accent-rgb), 0.16); } body.kitchen .try { display: none; } body.active .basket { display: none; } .basket { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; border: 1px dashed rgba(var(--accent-rgb), 0.5); border-radius: 10px; background: rgba(var(--panel-rgb), 0.9); font-size: 13px; } .basket[hidden] { display: none; } .chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .chips:empty { display: none; } .pt-chip { display: inline-flex; align-items: center; gap: 6px; padding: 3px 4px 3px 8px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); animation: sp-in 0.25s ease both; } .pt-chip img { width: 18px; height: 18px; } .pt-chip.pic { padding-inline-start: 5px; } .pt-chip.pic img { width: 22px; height: 22px; } .chip-x { width: 20px; height: 20px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 15px; line-height: 1; cursor: pointer; } .chip-x:hover { background: var(--line); color: var(--parchment); } .basket-hint { margin: 0; color: var(--muted); } .basket-warn { margin: 0; color: var(--turmeric); font-weight: 500; } .basket-warn[data-tone='info'] { color: var(--muted); font-weight: 400; } .basket-body { display: flex; gap: 12px; align-items: flex-start; } .basket-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 8px; } .photo-thumb { flex: 0 0 auto; width: 96px; padding: 0; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); cursor: zoom-in; overflow: hidden; } .photo-thumb[hidden] { display: none; } .photo-thumb:hover, .photo-thumb.focus { border-color: var(--turmeric); } .photo-frame { position: relative; display: block; line-height: 0; } .photo-frame img { display: block; width: 100%; height: auto; } .pbox { position: absolute; border: 1.5px solid var(--turmeric); border-radius: 3px; box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.35); transition: opacity 0.15s ease, box-shadow 0.15s ease; } .pbox b { position: absolute; left: -1px; top: -1px; transform: translateY(-100%); padding: 0 3px; border-radius: 3px 3px 3px 0; background: var(--turmeric); color: var(--on-accent); font: 600 8px/1.4 var(--mono); white-space: nowrap; } .pbox.tag-right b { left: auto; right: -1px; border-radius: 3px 3px 0 3px; } .pbox.tag-in b { transform: none; border-radius: 0 0 3px 0; } .photo-thumb.focus .pbox:not(.hl) { opacity: 0.25; } .pbox.hl { border-width: 2px; box-shadow: 0 0 0 2px rgba(var(--accent-rgb), 0.45); } .pt-n { border: 0; cursor: pointer; display: inline-grid; place-items: center; min-width: 16px; height: 16px; padding: 0 3px; border-radius: 8px; background: var(--turmeric); color: var(--on-accent); font: 600 10px/1 var(--mono); } .photo-dialog { max-width: min(92vw, 900px); max-height: 92vh; padding: 14px; border: 1px solid var(--line); border-radius: 12px; background: var(--panel); color: var(--parchment); } .photo-dialog::backdrop { background: rgba(0, 0, 0, 0.6); } .photo-dialog[open] { display: flex; flex-direction: column; gap: 12px; } .photo-big { overflow: auto; } .photo-big .photo-frame { display: table; margin: 0 auto; } .photo-big .photo-frame img { width: auto; max-width: 100%; pointer-events: none; } .photo-big .pbox b { font-size: 11px; } .photo-dialog form { display: flex; justify-content: flex-end; margin: 0; } .pe-title { margin: 0; font: 500 1.1rem/1.2 var(--display); } .photo-frame.editing { touch-action: none; user-select: none; -webkit-user-select: none; cursor: crosshair; } .photo-frame.editing .pbox { cursor: move; } .photo-frame.editing .pbox.sel { border-width: 2px; border-color: var(--parchment); box-shadow: 0 0 0 2px var(--turmeric); z-index: 2; } .pbox.draft { border-style: dashed; border-color: var(--parchment); } .hd { position: absolute; width: 14px; height: 14px; margin: -7px; border-radius: 50%; background: var(--parchment); border: 2px solid var(--turmeric); z-index: 3; } .hd-nw { left: 0; top: 0; cursor: nwse-resize; } .hd-ne { right: 0; top: 0; margin-right: -7px; cursor: nesw-resize; } .hd-sw { left: 0; bottom: 0; margin-bottom: -7px; cursor: nesw-resize; } .hd-se { right: 0; bottom: 0; margin: 0 -7px -7px 0; cursor: nwse-resize; } @media (pointer: coarse) { .hd { width: 22px; height: 22px; margin: -11px; } .hd-ne { margin-right: -11px; } .hd-sw { margin-bottom: -11px; } .hd-se { margin: 0 -11px -11px 0; } } .pe-panel { display: flex; flex-direction: column; gap: 8px; min-height: 44px; } .pe-hint { margin: 0; color: var(--muted); font-size: 14px; } .pe-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } .pe-input { flex: 1 1 200px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; background: var(--panel-2); color: var(--parchment); font-size: 16px; } .pe-input:focus { outline: none; border-color: var(--turmeric); } .pe-row .go { padding: 10px 16px; } .link-btn.danger { color: var(--error); } .pe-sugg { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; padding: 0; list-style: none; } .pe-sugg:empty { display: none; } .pe-sugg button { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); color: var(--parchment); font-size: 13.5px; cursor: pointer; } .pe-sugg button:hover { border-color: var(--turmeric); } .photo-big .photo-frame img { max-height: 64vh; } @media (max-width: 640px) { .photo-thumb { width: 76px; } } .photo-btn { display: inline-flex; align-items: center; gap: 6px; color: var(--turmeric); } .photo-btn:focus-within { outline: 2px solid var(--turmeric); outline-offset: 2px; border-radius: 4px; } .photo-btn.busy { opacity: 0.6; pointer-events: none; } .basket-warn[hidden] { display: none; } .basket-count { font: 12px/1 var(--mono); color: var(--faint); font-variant-numeric: tabular-nums; } .basket-count.full { color: var(--turmeric); } .basket.shake { animation: nudge 0.35s ease; } @keyframes nudge { 20%, 60% { transform: translateX(-4px); } 40%, 80% { transform: translateX(4px); } } @media (prefers-reduced-motion: reduce) { .basket.shake { animation: none; } } .basket-actions { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .basket-actions .find { margin-inline-start: auto; padding: 9px 16px; } .basket-actions .find:disabled { opacity: 0.45; cursor: default; } .link-btn { padding: 4px 0; border: 0; background: transparent; color: var(--muted); font: 12.5px/1.3 var(--mono); cursor: pointer; } .link-btn:hover { color: var(--parchment); } .link-btn[hidden] { display: none; } .back-kitchen { display: block; margin-top: 8px; color: var(--turmeric); } .card > h3:first-child { margin-top: 2px; } .suggest { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 6; margin: 0; padding: 6px; list-style: none; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; box-shadow: 0 16px 36px var(--shadow); } .suggest[hidden] { display: none; } .suggest li { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 7px; cursor: pointer; font-size: 15px; } .suggest li img { width: 20px; height: 20px; } .suggest li:hover, .suggest li[aria-selected='true'] { background: var(--panel-2); } .suggest li.have { opacity: 0.5; } .pt-list { display: flex; flex-direction: column; gap: 8px; } .pt-row { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; width: 100%; padding: 12px 14px; text-align: start; border: 1px solid var(--line); border-radius: 9px; background: transparent; cursor: pointer; transition: border-color 0.15s ease, background 0.15s ease; } .pt-row:hover { border-color: var(--turmeric); background: rgba(var(--accent-rgb), 0.05); } .pt-row.idea { border-style: dashed; } .pt-head { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; } .pt-name { font: 500 1.2rem/1.2 var(--display); color: var(--parchment); } .pt-head .origin { font: 500 11.5px/1.2 var(--mono); padding: 2px 8px; } .pt-tag { font: 500 10.5px/1 var(--mono); letter-spacing: 0.1em; text-transform: uppercase; color: var(--turmeric); } .pt-native { font: 13px/1.3 var(--mono); color: var(--muted); } .pt-note { font-size: 13.5px; color: var(--muted); } .pt-meta { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px; font: 12px/1.4 var(--mono); color: var(--muted); } .pt-meta b { color: var(--turmeric); font-weight: 500; } .pt-miss { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; } .pt-icons { display: inline-flex; gap: 3px; } .pt-icons img { width: 22px; height: 22px; padding: 2px; border-radius: 5px; background: var(--tile-bg); } /* ---------- result card ---------- */ .card { flex: 1 1 auto; min-height: 0; overflow: auto; overscroll-behavior: contain; background: rgba(var(--panel-rgb), 0.94); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border: 1px solid var(--line); border-radius: 10px; padding: 18px 20px 20px; scrollbar-width: thin; scrollbar-color: var(--line) transparent; } .meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font: 12px/1.3 var(--mono); color: var(--muted); } .origin { background: var(--chili); color: var(--on-chili); font-weight: 500; padding: 3px 9px; border-radius: 999px; } .src { margin-inline-start: auto; color: var(--faint); } .share { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px; background: transparent; color: var(--muted); font: 12px/1.3 var(--mono); cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .share-icon { display: inline-flex; } /* servings stepper */ .serves { display: inline-flex; align-items: center; gap: 2px; border: 1px solid var(--line); border-radius: 999px; padding: 1px; } .serves .step { width: 22px; height: 22px; padding: 0; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font: 500 14px/1 var(--mono); cursor: pointer; } .serves .step:hover:not(:disabled) { background: var(--panel-2); color: var(--parchment); } .serves .step:disabled { opacity: 0.35; cursor: default; } .serves-n { padding: 0 4px; font-variant-numeric: tabular-nums; color: var(--parchment); white-space: nowrap; } .scaled-note { margin: 8px 0 0; font: italic 13px/1.4 var(--display); color: var(--faint); } .share:hover { border-color: var(--turmeric); color: var(--parchment); } .share.done { border-color: var(--turmeric); color: var(--turmeric); } /* dish pages render the name as the page's h1 */ .card h2, .card h1.dish-name { margin: 10px 0 0; font: 500 clamp(1.6rem, 4.6vw, 2.2rem)/1.1 var(--display); letter-spacing: -0.01em; text-wrap: balance; } .native { margin: 4px 0 0; font: 14px/1.4 var(--mono); color: var(--muted); } .card h3 { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 8px; font: 500 11px/1 var(--mono); letter-spacing: 0.14em; text-transform: uppercase; color: var(--turmeric); } .card h3 .count { color: var(--faint); letter-spacing: 0; } .ings { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); column-gap: 24px; } .ings li { display: flex; align-items: center; gap: 10px; padding: 7px 4px; border-bottom: 1px solid var(--line); border-radius: 4px; transition: background 0.4s ease; } .ings li.flash { background: rgba(var(--accent-rgb), 0.18); } .ings .dot { width: 8px; height: 8px; border-radius: 2px; flex: 0 0 auto; background: var(--c); } .ings .n { flex: 1 1 auto; min-width: 0; } .ings .a { font: 12.5px/1.3 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; text-align: end; } .steps { list-style: none; margin: 0; padding: 0; counter-reset: step; } .steps li { counter-increment: step; display: grid; grid-template-columns: 30px 1fr; gap: 10px; padding: 11px 0; border-top: 1px solid var(--line); max-width: 68ch; } .steps li::before { content: counter(step); font: 500 1.2rem/1.2 var(--display); color: var(--turmeric); } .legend { display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 12px; font: 11px/1 var(--mono); color: var(--faint); } .legend span { display: inline-flex; align-items: center; gap: 6px; } .legend i { width: 8px; height: 8px; border-radius: 2px; background: var(--c); } /* video */ .watch .frame { position: relative; aspect-ratio: 16 / 9; max-width: 100%; border-radius: 8px; overflow: hidden; background: #000; border: 1px solid var(--line); } .watch iframe, .watch .play { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; } .watch .play { padding: 0; background: #000; cursor: pointer; } .watch .play img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.88; transition: opacity 0.2s ease; } .watch .play:hover img { opacity: 1; } .play-icon { position: absolute; left: 50%; top: 50%; width: 64px; height: 64px; margin: -32px 0 0 -32px; border-radius: 50%; background: var(--turmeric); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.45); } .play-icon::after { content: ''; position: absolute; left: 26px; top: 20px; border-style: solid; border-width: 12px 0 12px 19px; border-color: transparent transparent transparent var(--on-accent); } .credit { margin: 8px 0 0; font: 12px/1.4 var(--mono); color: var(--faint); } .credit .vt { color: var(--muted); } .credit a { color: var(--turmeric); } /* loading + errors */ .status { margin: 0 0 14px; font: 13px/1.4 var(--mono); color: var(--muted); } .skeleton { height: 14px; margin: 10px 0; border-radius: 4px; background: linear-gradient(90deg, var(--panel-2), var(--skeleton-hi), var(--panel-2)); background-size: 200% 100%; animation: shimmer 1.2s ease-in-out infinite; } .skeleton.w1 { width: 55%; height: 26px; } .skeleton.w2 { width: 80%; } .skeleton.w3 { width: 68%; } @keyframes shimmer { from { background-position: 200% 0; } to { background-position: -200% 0; } } .error p { margin: 0; color: var(--muted); max-width: 52ch; } .error strong { color: var(--parchment); font-weight: 600; } .error .retry { margin-top: 14px; border: 1px solid var(--chili); background: transparent; border-radius: 7px; padding: 8px 14px; font: 13px/1 var(--mono); cursor: pointer; } .noscript { position: fixed; inset: auto 0 40% 0; text-align: center; color: var(--muted); } @media (max-width: 640px) { .counter { display: none; } :root { --stage-top: clamp(230px, 40dvh, 360px); } .stat { margin-inline-start: 0; width: 100%; } .card { padding: 16px; } .src { margin-inline-start: 0; } .go { padding: 11px 14px; } } @media (prefers-reduced-motion: reduce) { .sp { animation: none; } .skeleton { animation: none; } .hero, .label, .ings li { transition: none; } } /* ---------------------------------------------------------------- accounts & Plus */ .acct-btn { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 10px; border: 1px solid var(--line); border-radius: 7px; background: var(--panel); color: var(--parchment); font: 13px/1 var(--body); cursor: pointer; white-space: nowrap; } .acct-btn:hover { border-color: var(--turmeric); } .acct-btn.in { padding: 0 4px; gap: 4px; } .acct-btn.in:not(:has(.plus-tag)) { width: 32px; justify-content: center; } .avatar { position: relative; display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; overflow: hidden; background: var(--turmeric); color: var(--on-accent); font: 600 12px/1 var(--body); flex: 0 0 auto; } .avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .plus-tag { display: inline-block; padding: 2px 6px; border-radius: 999px; background: var(--turmeric); color: var(--on-accent); font: 600 10px/1.2 var(--mono); letter-spacing: .02em; text-transform: uppercase; vertical-align: middle; } .plus-tag[hidden] { display: none; } .photo-btn .plus-tag { margin-inline-start: 2px; } .acct-dialog { position: fixed; width: min(92vw, 420px); max-height: 90dvh; overflow: auto; padding: 22px 20px 16px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--parchment); box-shadow: 0 24px 60px var(--shadow); } .acct-dialog::backdrop { background: rgba(0, 0, 0, 0.6); } .acct-dialog[open] { display: flex; flex-direction: column; gap: 12px; } .acct-dialog h2 { margin: 0; font: 500 1.35rem/1.2 var(--display); padding-inline-end: 28px; } .acct-dialog .eyebrow { margin: 0 0 -6px; } .acct-x { position: absolute; top: 10px; inset-inline-end: 10px; width: 30px; height: 30px; border: 0; border-radius: 50%; background: transparent; color: var(--muted); font-size: 22px; line-height: 1; cursor: pointer; } .acct-x:hover { background: var(--panel-2); color: var(--parchment); } .acct-sub { margin: 0; color: var(--muted); font-size: 14px; } .acct-note { margin: 0; padding: 10px 12px; border-radius: 8px; background: var(--panel-2); font-size: 14px; } .acct-note[hidden] { display: none; } .acct-fine { margin: 0; color: var(--faint); font-size: 12.5px; } .acct-legal { margin: 2px 0 0; font: 12px/1.3 var(--mono); color: var(--faint); } .acct-legal a { color: var(--muted); } .acct-head { display: flex; align-items: center; gap: 12px; padding-inline-end: 28px; } .acct-head .avatar { width: 40px; height: 40px; font-size: 18px; } .acct-head > div { min-width: 0; flex: 1; } .acct-head h2 { padding: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 1.1rem; } .acct-head .acct-sub { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .plan-badge { padding: 4px 9px; border-radius: 999px; border: 1px solid var(--line); font: 500 12px/1 var(--mono); color: var(--muted); } .plan-badge.plus { border-color: transparent; background: var(--turmeric); color: var(--on-accent); } .acct-signin { display: flex; flex-direction: column; gap: 10px; } .google-btn { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 11px 16px; border-radius: 8px; border: 1px solid #dadce0; background: #fff; color: #1f1f1f; font: 500 15px/1.2 var(--body); text-decoration: none; } .google-btn:hover { background: #f7f8f8; } .acct-or { display: flex; align-items: center; gap: 10px; margin: 0; color: var(--faint); font-size: 12.5px; } .acct-or::before, .acct-or::after { content: ''; flex: 1; height: 1px; background: var(--line); } .acct-email { display: flex; gap: 8px; flex-wrap: wrap; margin: 0; } .acct-email[hidden] { display: none; } .acct-email .go { flex: 1 1 auto; } .acct-usage { display: flex; flex-direction: column; gap: 10px; padding: 12px; border-radius: 10px; background: var(--panel-2); } .meter-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13.5px; margin-bottom: 5px; } .meter-n { font: 12.5px/1.3 var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; } .meter-bar { height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; } .meter-bar i { display: block; height: 100%; background: var(--turmeric); border-radius: 3px; } .meter-bar.full i { background: var(--chili); } .acct-actions { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .plus-teaser { display: block; width: 100%; padding: 10px 12px; text-align: start; border: 1px dashed var(--turmeric); border-radius: 10px; background: transparent; color: var(--parchment); font: 14px/1.35 var(--body); cursor: pointer; } .plus-teaser:hover { background: rgba(var(--accent-rgb), 0.08); } .plus-feats { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; font-size: 14.5px; } .plus-feats li { display: flex; gap: 8px; } .plus-feats li::before { content: '✓'; color: var(--turmeric); font-weight: 600; } .plan-opts { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; } .plan-opt { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 12px; border: 1px solid var(--line); border-radius: 10px; cursor: pointer; background: var(--panel-2); } .plan-opt.on { border-color: var(--turmeric); box-shadow: 0 0 0 1px var(--turmeric) inset; } .plan-opt input { position: absolute; opacity: 0; pointer-events: none; } .plan-opt:focus-within { outline: 2px solid var(--turmeric); outline-offset: 2px; } .plan-name { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 13.5px; color: var(--muted); } .plan-save { font: normal 600 11px/1.2 var(--mono); color: var(--ok); } .plan-price { font: 500 1.3rem/1.1 var(--display); } .plan-price small { font: 12px var(--mono); color: var(--muted); } .plus-go { width: 100%; padding: 13px 18px; font-size: 15px; } .plus-go:disabled { opacity: 0.6; cursor: default; } .error.quota .retry { margin-top: 10px; } .acct-toast { position: fixed; left: 50%; bottom: 22px; z-index: 50; transform: translate(-50%, 20px); opacity: 0; pointer-events: none; max-width: min(92vw, 460px); padding: 11px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--panel); color: var(--parchment); font-size: 14px; box-shadow: 0 14px 34px var(--shadow); transition: opacity .2s ease, transform .2s ease; } .acct-toast.show { opacity: 1; transform: translate(-50%, 0); } .acct-toast[data-tone='warn'] { border-color: var(--error); } @media (max-width: 520px) { .acct-btn:not(.in) { padding: 0 8px; font-size: 12.5px; } } /* terms / privacy */ body.legal-page { overflow: auto; } .legal-wrap { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; padding: 32px 18px 64px; } .legal-wrap h1 { font: 500 2rem/1.15 var(--display); margin: 18px 0 6px; } .legal-wrap h2 { font: 500 1.2rem/1.3 var(--display); margin: 28px 0 8px; } .legal-wrap p, .legal-wrap li { color: var(--muted); } .legal-wrap strong { color: var(--parchment); font-weight: 600; } .legal-wrap a { color: var(--turmeric); } .legal-wrap .langs { font: 13px var(--mono); display: flex; gap: 14px; } .legal-wrap .draft { font: 12.5px var(--mono); color: var(--faint); } .legal-wrap section + section { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--line); } @media (max-width: 480px) { .topbar { gap: 8px; } .top-right { gap: 8px; } .brand span { display: none; } } /* ---------------------------------------------------------------- world map */ .map-dialog { position: fixed; width: min(96vw, 1080px); max-height: 94dvh; overflow: auto; padding: 20px 20px 18px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); color: var(--parchment); box-shadow: 0 24px 60px var(--shadow); } .map-dialog::backdrop { background: rgba(0, 0, 0, 0.6); } .map-dialog[open] { display: flex; flex-direction: column; gap: 12px; } .map-head h2 { margin: 0; font: 500 1.4rem/1.2 var(--display); padding-inline-end: 32px; } .map-head .acct-sub { margin-top: 4px; } .map-tools { display: flex; gap: 8px; } .map-find { flex: 0 1 320px; padding: 8px 12px; font-size: 15px; } .map-stage { position: relative; border-radius: 10px; background: var(--panel-2); overflow: hidden; aspect-ratio: 1000 / 520; display: grid; place-items: center; } .map-loading { color: var(--muted); font: 13px var(--mono); } .map-svg { display: block; width: 100%; height: 100%; } .ctry { fill: var(--line); stroke: var(--panel-2); stroke-width: 0.6; cursor: pointer; transition: fill .15s ease; } .ctry:hover { fill: var(--muted); } .ctry.has { fill: rgba(var(--accent-rgb), var(--k, .6)); } .ctry.has:hover { fill: var(--turmeric-hi); } .ctry.sel { fill: var(--chili); stroke: var(--parchment); stroke-width: 1.4; } .map-panel { display: flex; flex-direction: column; gap: 8px; min-height: 60px; } .map-label { margin: 6px 0 0; font: 12px/1.3 var(--mono); letter-spacing: .04em; text-transform: uppercase; color: var(--faint); display: flex; gap: 8px; align-items: center; } .map-label .count { padding: 1px 6px; border-radius: 999px; background: var(--panel-2); color: var(--muted); } .map-country { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; } .map-country h3 { margin: 0; font: 500 1.25rem/1.2 var(--display); } .map-chips { display: flex; flex-wrap: wrap; gap: 6px; } .map-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 11px; border: 1px solid var(--line); border-radius: 999px; background: var(--panel-2); color: var(--parchment); font-size: 13.5px; cursor: pointer; } .map-chip span { font: 11px var(--mono); color: var(--turmeric); } .map-chip:hover { border-color: var(--turmeric); } .map-dishes { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px; } .map-dishes button { width: 100%; height: 100%; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 9px 12px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--parchment); text-align: start; cursor: pointer; } .map-dishes button:hover { border-color: var(--turmeric); } .map-dishes b { font-weight: 600; font-size: 14.5px; } .map-dishes small { color: var(--muted); font-size: 12.5px; } .map-dishes.ideas span { color: var(--faint); font-size: 12.5px; line-height: 1.35; } .map-ideas { display: flex; flex-direction: column; gap: 6px; } .map-ideas .skeleton { height: 44px; margin: 0; width: 100%; border-radius: 9px; } .map-btn { margin-inline-end: 0; } @media (max-width: 640px) { .map-dialog { padding: 16px 14px; } .map-find { flex: 1 1 auto; } .map-dishes { grid-template-columns: 1fr; } } /* 3D globe */ .map-stage:has(canvas) { aspect-ratio: 16 / 9; background: radial-gradient(ellipse at 50% 45%, rgba(var(--accent-rgb), 0.08), transparent 62%), var(--ink); cursor: grab; touch-action: none; } .map-stage:has(canvas):active { cursor: grabbing; } .map-stage > div:not(.map-loading) { position: absolute !important; inset: 0; overflow: hidden; } .globe-tip { display: flex; flex-direction: column; gap: 2px; padding: 7px 10px; border-radius: 8px; background: var(--panel); border: 1px solid var(--line); color: var(--parchment); font: 13px/1.3 var(--body); box-shadow: 0 8px 20px var(--shadow); } .globe-tip span { color: var(--turmeric); font: 11.5px var(--mono); } .float-tooltip-kap { background: none !important; padding: 0 !important; } @media (max-width: 640px) { .map-stage:has(canvas) { aspect-ratio: 1 / 1; } } /* world map: globe + live top-10 */ .map-body { display: grid; grid-template-columns: minmax(0, 1fr) 250px; gap: 14px; align-items: stretch; } .map-rank { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .map-rank .map-label { margin: 0 0 2px; justify-content: space-between; } .map-rank .live { display: inline-flex; align-items: center; gap: 5px; color: var(--ok); text-transform: none; letter-spacing: 0; } .map-rank .live::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); animation: livepulse 1.6s ease-in-out infinite; } @keyframes livepulse { 50% { opacity: 0.25; } } @media (prefers-reduced-motion: reduce) { .map-rank .live::before { animation: none; } } .map-rank ol { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; } .map-rank button { position: relative; width: 100%; display: grid; grid-template-columns: 22px 1fr auto; align-items: center; gap: 8px; padding: 8px 10px 10px; border: 1px solid var(--line); border-radius: 9px; background: var(--panel-2); color: var(--parchment); font-size: 14px; text-align: start; cursor: pointer; overflow: hidden; } .map-rank button:hover, .map-rank button.on { border-color: var(--rc); } .map-rank button.on { box-shadow: 0 0 0 1px var(--rc) inset; } .map-rank .rk { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--rc); color: #16120a; font: 600 11.5px/1 var(--mono); } .map-rank .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .map-rank .ct { font: 12px var(--mono); color: var(--muted); font-variant-numeric: tabular-nums; } .map-rank .bar { position: absolute; left: 0; bottom: 0; height: 3px; background: var(--rc); opacity: 0.85; } .ctry.sel { fill: var(--parchment) !important; } @media (max-width: 820px) { .map-body { grid-template-columns: 1fr; } .map-rank ol { display: grid; grid-template-columns: 1fr 1fr; } } @media (max-width: 380px) { .map-rank ol { grid-template-columns: 1fr; } } /* beside the ranking the globe fills the row height instead of a fixed ratio */ .map-body .map-stage { aspect-ratio: auto; width: 100%; height: clamp(380px, 58vh, 560px); align-self: start; } @media (max-width: 820px) { .map-body .map-stage { aspect-ratio: 4 / 3; height: auto; } } @media (max-width: 520px) { .map-body .map-stage { aspect-ratio: 1 / 1; } } .pt-fine { margin: 8px 0 0; color: var(--faint); font-size: 12.5px; }