/* ============================================================ Hodnocení obědů – mobile-first stylesheet. Base styles target phones (coarse pointer); min-width queries layer on enhancements; hover styles are gated behind hover:hover. Color system: OKLCH, neutrals tinted toward the amber brand hue. ============================================================ */ :root { /* surfaces & ink (warm-tinted neutrals, never pure #fff/#000) */ --bg: oklch(95% 0.013 75); --surface: oklch(98.5% 0.008 85); --surface-sunken: oklch(96.5% 0.013 78); --ink: oklch(27% 0.022 60); --muted: oklch(46% 0.028 62); /* >=4.5:1 on surface */ --line: oklch(88% 0.018 78); --on-accent: oklch(99% 0.007 85); /* brand: roast amber (justified by the brewery/restaurant, not reflex) */ --accent: oklch(56% 0.115 56); /* white text on this = 4.7:1 (AA) */ --accent-strong: oklch(46% 0.10 52); --accent-hover: oklch(41% 0.095 50); --ghost-bg: oklch(52% 0.105 55); --ghost-bg-hover: oklch(56% 0.108 56); --ghost-border: oklch(68% 0.10 58); /* stars */ --gold: oklch(74% 0.16 78); --star-empty: oklch(82% 0.022 80); /* semantic */ --danger: oklch(52% 0.16 28); --ok-bg: oklch(93% 0.05 150); --ok-ink: oklch(40% 0.10 150); --err-bg: oklch(93% 0.055 30); --err-ink: oklch(45% 0.16 30); --info-bg: oklch(93% 0.04 255);--info-ink: oklch(42% 0.10 255); /* dish chips */ --soup-bg: oklch(90% 0.07 75); --soup-ink: oklch(42% 0.09 64); --main-bg: oklch(90% 0.06 142); --main-ink: oklch(40% 0.09 145); /* accent-tinted surfaces (re-themed per restaurant below) */ --pill-bg: oklch(92% 0.03 75); --hist-bg: oklch(95% 0.03 75); --mine-bg: oklch(95% 0.045 80); /* type scale (>=1.25 between steps) */ --fs-title: 1.55rem; --fs-section: 1.25rem; --fs-body: 1rem; --fs-small: 0.875rem; --radius: 14px; --radius-sm: 10px; --shadow: 0 1px 2px oklch(40% 0.04 60 / 0.10), 0 6px 18px oklch(40% 0.04 60 / 0.07); --safe-l: env(safe-area-inset-left, 0px); --safe-r: env(safe-area-inset-right, 0px); --safe-b: env(safe-area-inset-bottom, 0px); color-scheme: light; } /* Per-restaurant theme: Zámek = cooler plum/wine identity, applied to the whole page via data-theme on . Only hue-bearing tokens are overridden; the contrasts were verified (white-on-accent 5.7:1, accent-strong-on-surface 7.9:1). */ body[data-theme="zamek"] { --bg: oklch(95% 0.012 340); --surface: oklch(98.5% 0.008 340); --surface-sunken: oklch(96.5% 0.013 340); --accent: oklch(52% 0.12 345); --accent-strong: oklch(44% 0.11 345); --accent-hover: oklch(40% 0.10 345); --ghost-bg: oklch(50% 0.10 345); --ghost-bg-hover: oklch(54% 0.10 345); --ghost-border: oklch(66% 0.09 345); --pill-bg: oklch(92% 0.03 345); --hist-bg: oklch(95% 0.03 345); --mine-bg: oklch(95% 0.045 345); } * { box-sizing: border-box; } html { font-size: 16px; -webkit-text-size-adjust: 100%; } body { margin: 0; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; background: var(--bg); color: var(--ink); font-size: var(--fs-body); line-height: 1.5; overflow-wrap: anywhere; } h1, h2, h3, h4 { line-height: 1.2; } a { color: var(--accent-strong); } :focus-visible { outline: 3px solid var(--accent-strong); outline-offset: 2px; border-radius: 6px; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ---------- top bar ---------- */ .topbar { background: var(--accent); color: var(--on-accent); box-shadow: var(--shadow); position: sticky; top: 0; z-index: 10; } .topbar-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 8px calc(12px + var(--safe-r)) 8px calc(12px + var(--safe-l)); } /* restaurant switch sits inline in the app bar, next to the brand */ .rnav { display: flex; gap: 6px; } .rnav-tab { display: inline-flex; align-items: center; min-height: 38px; padding: 6px 14px; border-radius: 999px; text-decoration: none; font-weight: 700; color: var(--on-accent); background: transparent; border: 1px solid var(--ghost-border); } .rnav-tab.is-active { background: var(--surface); color: var(--accent-strong); border-color: var(--surface); } /* avatar dropdown menu (account actions) */ .usermenu { position: relative; margin-left: auto; } .usermenu-btn { display: inline-flex; align-items: center; gap: 4px; background: var(--ghost-bg); border: 1px solid var(--ghost-border); color: var(--on-accent); border-radius: 999px; padding: 4px 9px 4px 4px; min-height: 40px; cursor: pointer; } .usermenu-btn .caret { font-size: .75rem; } .usermenu-pop { position: absolute; right: 0; top: calc(100% + 8px); min-width: 212px; background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 12px; box-shadow: 0 12px 30px oklch(40% 0.05 60 / 0.2); padding: 6px; z-index: 50; } .usermenu-pop[hidden] { display: none; } .usermenu-pop form { margin: 0; } .menu-item { display: flex; align-items: center; gap: 10px; width: 100%; box-sizing: border-box; text-align: left; background: none; border: none; font: inherit; font-size: 1rem; color: var(--ink); text-decoration: none; padding: 12px; border-radius: 8px; min-height: 44px; cursor: pointer; } .menu-item-danger { color: var(--danger); } .brand { color: var(--on-accent); text-decoration: none; font-weight: 800; font-size: 1.1rem; white-space: nowrap; } .brand-suffix { display: none; } .inline { display: inline; margin: 0; } /* ---------- buttons (touch-first: >=44px) ---------- */ .btn { font: inherit; font-size: var(--fs-body); font-weight: 600; border: none; border-radius: var(--radius-sm); padding: 11px 16px; min-height: 44px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background-color .18s cubic-bezier(.22,1,.36,1); text-decoration: none; } .btn:active { transform: translateY(1px); } .btn-primary { background: var(--accent-strong); color: var(--on-accent); } .btn-ghost { background: var(--ghost-bg); color: var(--on-accent); border: 1px solid var(--ghost-border); padding: 9px 12px; min-height: 42px; } .btn-danger-ghost { background: transparent; color: var(--danger); padding: 10px 6px; min-height: 44px; font-weight: 600; } /* ---------- layout ---------- */ .container { max-width: 720px; margin: 0 auto; padding: 16px calc(16px + var(--safe-r)) calc(40px + var(--safe-b)) calc(16px + var(--safe-l)); } .muted { color: var(--muted); } /* ---------- flashes ---------- */ .flashes { max-width: 720px; margin: 12px auto 0; padding: 0 16px; } .flash { padding: 12px 14px; border-radius: var(--radius-sm); margin-bottom: 8px; font-weight: 500; } .flash-success { background: var(--ok-bg); color: var(--ok-ink); } .flash-error { background: var(--err-bg); color: var(--err-ink); } .flash-info { background: var(--info-bg); color: var(--info-ink); } /* ---------- auth ---------- */ .auth-card { max-width: 440px; margin: 32px auto; background: var(--surface); padding: 22px; border-radius: var(--radius); box-shadow: var(--shadow); } .auth-card h1 { margin-top: 0; font-size: var(--fs-title); } .auth-sub { font-size: var(--fs-section); margin: 22px 0 4px; } .stack { display: flex; flex-direction: column; gap: 16px; } .stack label { display: flex; flex-direction: column; gap: 6px; font-weight: 600; font-size: 0.95rem; } .stack input, .stack select { font: inherit; font-size: var(--fs-body); padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); min-height: 46px; background: var(--surface); color: var(--ink); } .stack .btn-primary { width: 100%; } /* ---------- week head ---------- */ /* week title doubles as the week picker: "Týden 25.05.–29.05.2026 ▾" */ .week-title { margin: 8px 0; font-size: 1.3rem; line-height: 1.3; display: inline-flex; align-items: baseline; gap: 8px; flex-wrap: wrap; } .week-meta { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; } .week-picker { position: relative; display: inline-flex; align-items: baseline; } .week-picker::after { content: "▾"; position: absolute; right: 5px; top: .1em; pointer-events: none; color: var(--accent-strong); font-size: .62em; } .week-select { font: inherit; font-weight: inherit; color: var(--accent-strong); background: transparent; border: none; border-bottom: 2px dashed var(--line); border-radius: 0; padding: 0 22px 2px 2px; margin: 0; cursor: pointer; -webkit-appearance: none; appearance: none; max-width: 100%; } .pill { background: var(--pill-bg); color: var(--accent-strong); border-radius: 999px; padding: 9px 14px; font-size: 0.9rem; font-weight: 600; text-decoration: none; display: inline-flex; align-items: center; min-height: 40px; } .empty { text-align: center; margin-top: 48px; } .empty h1 { font-size: var(--fs-title); } .empty .btn-primary { margin: 0 auto; } /* ---------- day & dish ---------- */ .day-card { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 14px 16px; margin: 16px 0; } .day-head { margin: 4px 0 12px; font-size: var(--fs-section); border-bottom: 2px solid var(--line); padding-bottom: 8px; display: flex; align-items: baseline; gap: 8px; } .day-date { color: var(--muted); font-weight: 500; font-size: 0.95rem; } /* Per-day accent so the cards don't blend: a low-chroma card tint, the weekday name in that hue, and a tinted full underline (never a side-stripe). The date span keeps its own muted color. Contrasts verified >=6.4:1. */ .day-mon { background: oklch(97.2% .030 25); } .day-tue { background: oklch(97.2% .030 45); } .day-wed { background: oklch(97.2% .030 130); } .day-thu { background: oklch(97.2% .030 195); } .day-fri { background: oklch(97.2% .030 290); } .day-sat { background: oklch(97.2% .030 95); } .day-sun { background: oklch(97.2% .030 330); } .day-mon .day-head { color: oklch(43% .115 25); border-bottom-color: oklch(80% .07 25); } .day-tue .day-head { color: oklch(43% .115 45); border-bottom-color: oklch(80% .07 45); } .day-wed .day-head { color: oklch(43% .115 130); border-bottom-color: oklch(80% .07 130); } .day-thu .day-head { color: oklch(43% .115 195); border-bottom-color: oklch(80% .07 195); } .day-fri .day-head { color: oklch(43% .115 290); border-bottom-color: oklch(80% .07 290); } .day-sat .day-head { color: oklch(43% .115 95); border-bottom-color: oklch(80% .07 95); } .day-sun .day-head { color: oklch(43% .115 330); border-bottom-color: oklch(80% .07 330); } .dish { padding: 14px 0; border-bottom: 1px dashed var(--line); scroll-margin-top: 76px; } .dish:last-child { border-bottom: none; } /* no wrap: chip stays at the leading edge, the name wraps in its own column */ .dish-head { display: flex; gap: 8px; align-items: baseline; } .dish-label { flex: 0 0 auto; font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 6px; white-space: nowrap; } .dish-soup { background: var(--soup-bg); color: var(--soup-ink); } .dish-main { background: var(--main-bg); color: var(--main-ink); } .dish-name { font-weight: 600; flex: 1 1 auto; min-width: 0; } .dish-agg { display: flex; align-items: center; gap: 8px; margin: 10px 0; flex-wrap: wrap; } .agg-num { font-weight: 700; } /* repeated-dish history badge */ .dish-history { display: inline-block; margin: 0 0 10px; font-size: 0.82rem; font-weight: 600; color: var(--accent-strong); background: var(--hist-bg); border: 1px solid var(--line); border-radius: 8px; padding: 5px 10px; line-height: 1.5; } /* archive */ .archive-title { font-size: var(--fs-title); } .archive-group { background: var(--surface); border-radius: var(--radius); box-shadow: var(--shadow); padding: 12px 16px; margin: 14px 0; } .archive-group h2 { margin: 4px 0 8px; font-size: var(--fs-section); } .archive-list { list-style: none; padding: 0; margin: 0; } .archive-list li { padding: 6px 0; border-bottom: 1px dashed var(--line); } .archive-list li:last-child { border-bottom: none; } .archive-list a { font-weight: 600; min-height: 44px; display: inline-flex; align-items: center; } /* ---------- stars (read-only display) ---------- */ .stars { position: relative; display: inline-block; white-space: nowrap; line-height: 1; font-size: 1.2rem; } .stars-bg { color: var(--star-empty); } .stars-fg { color: var(--gold); position: absolute; top: 0; left: 0; overflow: hidden; white-space: nowrap; } /* ---------- rating box ---------- */ .rate-box { margin-top: 8px; } .rate-box > summary { cursor: pointer; font-weight: 700; color: var(--accent-strong); list-style: none; padding: 10px 0; user-select: none; min-height: 44px; display: flex; align-items: center; } .rate-box > summary::-webkit-details-marker { display: none; } .rate-form { display: flex; flex-direction: column; gap: 12px; margin: 8px 0; } .rate-form textarea { font: inherit; font-size: var(--fs-body); padding: 12px; border: 1px solid var(--line); border-radius: var(--radius-sm); resize: vertical; min-height: 56px; background: var(--surface); color: var(--ink); } .file-label { font-size: 0.9rem; color: var(--muted); display: flex; flex-direction: column; gap: 6px; font-weight: 600; } .file-label input[type=file] { font-size: var(--fs-body); } .rate-actions { display: flex; gap: 10px; align-items: center; } .rate-actions .btn-primary { width: 100%; } /* ---------- stars (interactive picker) ---------- */ .rs { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .rs-track { position: relative; display: inline-block; cursor: pointer; font-size: 2.4rem; line-height: 1.1; letter-spacing: 2px; padding: 4px 2px; touch-action: none; user-select: none; } .rs-track .stars-bg { color: var(--star-empty); } .rs-fg { color: var(--gold); width: 0; } .rs-readout { font-weight: 700; min-width: 3.4em; font-size: 1.05rem; } .rs-clear { background: none; border: 1px solid var(--line); border-radius: var(--radius-sm); cursor: pointer; min-height: 40px; min-width: 44px; padding: 6px 10px; color: var(--muted); font-size: var(--fs-body); font-weight: 600; } /* ---------- photos ---------- */ .my-photos, .review-photos { display: flex; gap: 10px; flex-wrap: wrap; margin: 10px 0; } .thumb { width: 96px; height: 96px; object-fit: cover; border-radius: var(--radius-sm); border: 1px solid var(--line); display: block; background: var(--surface-sunken); } .thumb-wrap { position: relative; } .thumb-del { position: absolute; top: -8px; right: -8px; width: 30px; height: 30px; border-radius: 50%; border: 2px solid var(--surface); background: var(--danger); color: var(--on-accent); cursor: pointer; font-weight: 700; font-size: 1.05rem; line-height: 1; display: flex; align-items: center; justify-content: center; } /* ---------- others' reviews ---------- */ .others { margin-top: 12px; } .others h4 { margin: 10px 0 6px; font-size: var(--fs-small); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; } .review { background: var(--surface-sunken); border-radius: var(--radius-sm); padding: 10px 12px; margin-bottom: 8px; } .review-mine { background: var(--mine-bg); } /* your own rating, accent tint */ .review-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .review-text { margin: 6px 0 0; } /* ---------- avatars ---------- */ .avatar { border-radius: 50%; object-fit: cover; flex: 0 0 auto; vertical-align: middle; display: inline-flex; align-items: center; justify-content: center; overflow: hidden; } .avatar-initials { font-weight: 800; line-height: 1; } .account-link { gap: 8px; } .avatar-row { display: flex; gap: 16px; align-items: flex-start; margin-bottom: 6px; } .avatar-actions { flex: 1 1 auto; min-width: 0; } .avatar-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; } /* ---------- photo lightbox ---------- */ .lb { position: fixed; inset: 0; z-index: 1000; background: oklch(20% 0.02 60 / 0.92); display: flex; align-items: center; justify-content: center; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom)); } .lb[hidden] { display: none; } .lb-img { max-width: 100%; max-height: 88vh; object-fit: contain; border-radius: 10px; box-shadow: 0 10px 40px oklch(15% 0.02 60 / 0.6); } .lb-close, .lb-nav { position: absolute; border: none; cursor: pointer; color: oklch(98% 0.005 80); background: oklch(32% 0.02 60 / 0.62); border-radius: 999px; display: flex; align-items: center; justify-content: center; line-height: 1; } .lb-close { top: max(10px, env(safe-area-inset-top)); right: 12px; width: 44px; height: 44px; font-size: 1.25rem; } .lb-nav { top: 50%; transform: translateY(-50%); width: 48px; height: 48px; font-size: 2rem; } .lb-prev { left: 8px; } .lb-next { right: 8px; } .lb-count { position: absolute; bottom: max(14px, env(safe-area-inset-bottom)); left: 0; right: 0; text-align: center; color: oklch(95% 0.005 80); font-weight: 600; } @media (hover: hover) { .lb-close:hover, .lb-nav:hover { background: oklch(42% 0.02 60 / 0.8); } } /* ============================================================ Enhancements for tablets / desktops ============================================================ */ @media (min-width: 600px) { .brand { font-size: 1.25rem; } .brand-suffix { display: inline; } .week-title { font-size: 1.45rem; } .rate-actions .btn-primary { width: auto; } .rs-track { font-size: 2rem; } } /* Hover effects only where a hover-capable pointer exists */ @media (hover: hover) { .btn-primary:hover { background: var(--accent-hover); } .btn-ghost:hover { background: var(--ghost-bg-hover); } .btn-danger-ghost:hover { text-decoration: underline; } .pill:hover { filter: brightness(0.96); } .rs-clear:hover { color: var(--danger); border-color: var(--danger); } .rnav-tab:not(.is-active):hover { background: var(--ghost-bg-hover); } .usermenu-btn:hover { background: var(--ghost-bg-hover); } .menu-item:hover { background: var(--surface-sunken); } .daytab:not(.is-active):hover { background: var(--surface-sunken); } } /* disabled / busy buttons (e.g. Save before a rating is picked, or mid-submit) */ .btn:disabled { opacity: .5; cursor: not-allowed; } .btn[aria-busy="true"] { cursor: progress; } /* "vyber hvězdy" placeholder shown until a rating is picked */ .rs-readout-empty { color: var(--muted); font-weight: 600; font-size: .95rem; } /* subtle manual refresh (the daily auto-scrape is the primary path) */ .refresh-link { background: none; border: none; cursor: pointer; font: inherit; font-size: .9rem; font-weight: 600; color: var(--accent-strong); padding: 9px 6px; min-height: 40px; border-radius: 8px; } .field-hint { color: var(--muted); font-weight: 400; font-size: .8rem; } /* ---------- day picker: a tidy row of day tabs ---------- */ .daynav { display: flex; gap: 8px; margin: 14px 0 18px; } .daytab { flex: 1 1 0; min-width: 0; min-height: 56px; padding: 8px 6px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; text-decoration: none; color: var(--ink); background: var(--surface); border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow); cursor: pointer; transition: background-color .15s, color .15s, transform .1s; } .daytab-name { font-weight: 800; font-size: .8rem; line-height: 1.1; overflow-wrap: normal; word-break: keep-all; } .daytab-date { font-size: .72rem; color: var(--muted); } .daytab:active { transform: translateY(1px); } .daytab.is-active { background: var(--accent); color: var(--on-accent); border-color: var(--accent); } .daytab.is-active .daytab-date { color: var(--on-accent); } /* With JS only the chosen day is shown; without JS all panels show (fallback). */ body.js-daynav .daypanel { display: none; } body.js-daynav .daypanel.is-shown { display: block; animation: dealIn .25s cubic-bezier(.22, 1, .36, 1); } @keyframes dealIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } .btn:active { transform: none; } }