tooltips survive, and a long press still reaches them. */ @media (max-width: 700px) { .heat-wrap .heat-n, .heat-wrap .heat-sub { display: none; } } /* The covers behind the revenue line: context, not comparison. Two lines on two scales is the classic way to make a chart lie. */ .cover-bar { fill: var(--c-7); opacity: .55; } /* The ticket histogram reuses the hour chart's bars, so it inherits their responsive behaviour and their printing for free. */ .bar span { print-color-adjust: exact; -webkit-print-color-adjust: exact; } /* A grid of coloured rects is nothing to a screen reader; the real table sits behind it, out of sight and in the accessibility tree. */ .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* --- one class per series colour ------------------------------------------ Not an inline style, and not by choice: html/template reads a style="" attribute as CSS, and its sanitiser has never heard of var(), so an interpolated "var(--c-1)" arrives in the browser as the literal string ZgotmplZ. A class is the safe carrier, and one class paints a legend square (background), a donut arc (stroke) and a bar (background) at once. Scoped under .admin-main so it outranks .hbar-t i and .bar span, which are more specific than a bare class. */ .admin-main .ser-1, .donut-seg.ser-1 { background: var(--c-1); stroke: var(--c-1); } .admin-main .ser-2, .donut-seg.ser-2 { background: var(--c-2); stroke: var(--c-2); } .admin-main .ser-3, .donut-seg.ser-3 { background: var(--c-3); stroke: var(--c-3); } .admin-main .ser-4, .donut-seg.ser-4 { background: var(--c-4); stroke: var(--c-4); } .admin-main .ser-5, .donut-seg.ser-5 { background: var(--c-5); stroke: var(--c-5); } .admin-main .ser-6, .donut-seg.ser-6 { background: var(--c-6); stroke: var(--c-6); } .admin-main .ser-7, .donut-seg.ser-7 { background: var(--c-7); stroke: var(--c-7); } /* The ticket histogram walks the heatmap's ramp, so the scale reads as a language the page speaks twice rather than a one-off. */ .admin-main .ramp-0 { background: var(--heat-0); } .admin-main .ramp-1 { background: var(--heat-1); } .admin-main .ramp-2 { background: var(--heat-2); } .admin-main .ramp-3 { background: var(--heat-3); } .admin-main .ramp-4 { background: var(--heat-4); } .admin-main .ramp-5 { background: var(--heat-5); } /* --heat-0 is 1.12:1 against the card, so the palest bar needs an edge. */ .admin-main .ramp-0 { box-shadow: inset 0 0 0 1px var(--line); } /* Six bands need more room than eleven hours did, and the donut beside this card is taller than 160px: without this the ticket histogram sat in the top third of its card with a hand's width of white below it. */ .bars-tall { height: 260px; } @media (max-width: 900px) { .bars-tall { height: 200px; } }

/* Popina - ivory, forest green and antique brass. A light dining room: warm ivory paper, green-black ink, brass for the details and forest green for anything pressed. Cormorant Garamond carries the headings, dish names and the italic kickers; Josefin Sans stays for the body and the small-capital labels. Every animation of the dark theme is kept as it was; only the colours and the type changed. Tokens live in tokens.css, linked before this file in layout.html. */ /* Photo-backed contexts keep light type on a dark shade. They swap to the on-dark set here rather than each carrying its own colours: the hero, the page heroes, the category tiles, the lunch banner, the events card, the footer and the lightbox. The primary button flips with them - forest green would sink into a dark photograph, so it becomes champagne there. */ .hero, .page-hero, .lunch-banner, .tile, .visit-events, .site-footer, .lightbox { --ink: #f7f3ea; --ink-2: rgba(247, 243, 234, 0.8); --ink-3: rgba(247, 243, 234, 0.62); --line: rgba(247, 243, 234, 0.14); --line-strong: rgba(247, 243, 234, 0.3); --gold: #d9c48f; --gold-2: #ecdcae; --gold-dim: rgba(217, 196, 143, 0.18); --green: #9fd6b6; --red-2: #f08a97; --btn-bg: var(--gold); --btn-bg-hover: var(--gold-2); --btn-ink: #1c2a23; --pill-bg: rgba(12, 22, 18, 0.45); /* Colour is inherited from , not read from the token, so the swap has to be stated once here or every heading inside keeps the dark ink. */ color: var(--ink); } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); font-size: 16px; line-height: 1.65; font-weight: 300; -webkit-font-smoothing: antialiased; overflow-x: hidden; } body.nav-open, body.lb-open { overflow: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: var(--gold); text-decoration: none; transition: color .2s; } a:hover { color: var(--gold-2); } p { margin: 0 0 1em; } strong { font-weight: 600; } code { font-family: ui-monospace, Menlo, monospace; font-size: .9em; } .wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; } .center { text-align: center; } .muted { color: var(--ink-3); } .small { font-size: .85rem; } .skip { position: absolute; left: -999px; top: 0; background: var(--accent); color: var(--on-accent); padding: .5rem 1rem; z-index: 999; } .skip:focus { left: 1rem; top: 1rem; } .ico { width: 1.05em; height: 1.05em; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.15em; } :focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* ---- type */ .script { font-family: var(--script); font-style: italic; font-weight: 500; color: var(--gold); letter-spacing: 0; } .kicker { font-size: clamp(1.5rem, 2.6vw, 2.1rem); margin: 0 0 .25rem; line-height: 1.2; } .big-script { font-size: clamp(2.8rem, 6.4vw, 5rem); margin: 0 0 1rem; line-height: 1.1; } .h1, .h2 { font-family: var(--serif); font-weight: 600; letter-spacing: .01em; line-height: 1.08; margin: 0 0 1rem; /* A single long Polish or Italian word ("Piwa BEZALKOHOLOWE") can be wider than a 320px phone. is set, so the browser hyphenates at real syllable breaks; break-word is the backstop for words it has no pattern for. */ overflow-wrap: break-word; hyphens: auto; } .h1 { font-size: clamp(2.6rem, 5.6vw, 4.4rem); } .h2 { font-size: clamp(2rem, 3.6vw, 3rem); } /* The small heading stays a spaced sans capital: it labels cards and footer columns. */ .h3 { font-family: var(--sans); font-weight: 700; text-transform: uppercase; font-size: clamp(.95rem, 1.4vw, 1.1rem); letter-spacing: .16em; line-height: 1.2; margin: 0 0 1rem; } .h2 small { font-family: var(--sans); font-size: .42em; font-weight: 300; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); } .section { padding: clamp(3.5rem, 8vw, 6.5rem) 0; } .section-head { text-align: center; max-width: 45rem; margin: 0 auto clamp(2rem, 4vw, 3.5rem); } .section-head .h2::after { content: ""; display: block; width: 56px; height: 1px; background: var(--gold); margin: 1rem auto 0; opacity: .7; } /* ---- buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .95rem 1.8rem .8rem; border: 1px solid var(--gold); border-radius: var(--radius); font-family: var(--sans); font-weight: 600; font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); background: transparent; cursor: pointer; transition: all .25s var(--ease); line-height: 1; } .btn:hover { background: var(--gold-dim); color: var(--gold-2); border-color: var(--gold-2); transform: translateY(-1px); } .btn-primary { background: var(--btn-bg); border-color: var(--btn-bg); color: var(--btn-ink); } .btn-primary:hover { background: var(--btn-bg-hover); border-color: var(--btn-bg-hover); color: var(--btn-ink); } .btn-ghost { border-color: var(--line-strong); color: var(--ink); } .btn-ghost:hover { border-color: var(--gold); color: var(--gold-2); } .btn-lg { padding: 1.15rem 2.4rem 1rem; font-size: .88rem; } .btn-sm { padding: .55rem .9rem .45rem; font-size: .7rem; letter-spacing: .12em; } .link-arrow { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; font-size: .78rem; } .link-arrow::after { content: "→"; transition: transform .25s var(--ease); } .link-arrow:hover::after { transform: translateX(4px); } .big-link { font-size: 1.35rem; font-weight: 600; letter-spacing: .02em; color: var(--ink); } .big-link:hover { color: var(--gold); } /* ---- pills, tags, alerts */ .pill { display: inline-flex; align-items: center; gap: .5rem; padding: .45rem .9rem .35rem; border-radius: 999px; font-size: .72rem; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; border: 1px solid var(--line-strong); background: var(--pill-bg); backdrop-filter: blur(6px); } .dot { width: 8px; height: 8px; border-radius: 50%; background: currentColor; box-shadow: 0 0 0 0 currentColor; } .pill-open, .is-open .dot, .topbar-status.is-open { color: var(--green); } .pill-open .dot { animation: pulse 2s infinite; } .pill-closed, .topbar-status.is-closed { color: var(--red-2); } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(46,125,85,.55);} 70% { box-shadow: 0 0 0 8px rgba(46,125,85,0);} 100% { box-shadow: 0 0 0 0 rgba(46,125,85,0);} } .tag { display: inline-block; vertical-align: middle; font-family: var(--sans); margin-left: .4rem; padding: .22rem .5rem .14rem; border-radius: 3px; font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1; } .tag-vege { color: var(--green); border: 1px solid rgba(46,125,85,.45); } .tag-new { color: var(--on-accent); background: var(--accent); } .tag-feat { color: var(--red-2); border: 1px solid rgba(161,48,63,.45); } .alert { padding: 1rem 1.2rem; border-radius: var(--radius); margin-bottom: 1.25rem; border: 1px solid; font-weight: 400; } .alert-ok { border-color: rgba(46,125,85,.45); background: rgba(46,125,85,.08); color: #1f5a3c; } .alert-err { border-color: rgba(161,48,63,.45); background: rgba(161,48,63,.07); color: #7b2331; } .chips { display: flex; gap: .5rem; flex-wrap: wrap; } .chip { padding: .55rem .95rem .45rem; border-radius: 999px; border: 1px solid var(--line-strong); background: transparent; color: var(--ink-2); font-family: var(--sans); font-size: .74rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; cursor: pointer; transition: all .2s; } .chip:hover { border-color: var(--gold); color: var(--gold); } .chip.is-active { background: var(--accent); border-color: var(--accent); color: var(--on-accent); } /* ---- header */ .site-header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--line); transition: box-shadow .3s; } /* blur lives on a pseudo-element: a backdrop-filter on the header itself would make it the containing block for the position:fixed mobile nav and trap the menu inside the header */ .site-header::before { content: ""; position: absolute; inset: 0; z-index: -1; background: rgba(247,243,234,.86); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .site-header.is-scrolled { box-shadow: 0 10px 40px rgba(28,42,35,.12); } .topbar { border-bottom: 1px solid var(--line); font-size: .74rem; letter-spacing: .06em; color: var(--ink-3); } .topbar-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 34px; } .topbar-item { display: inline-flex; align-items: center; gap: .4rem; color: inherit; white-space: nowrap; } .topbar-item:hover { color: var(--gold); } .topbar-status { display: inline-flex; align-items: center; gap: .45rem; margin-left: auto; text-transform: uppercase; font-weight: 600; letter-spacing: .12em; white-space: nowrap; } .topbar-langs { display: flex; gap: .15rem; } .topbar-langs .lang { padding: .25rem .45rem; text-transform: uppercase; letter-spacing: .12em; font-weight: 600; color: var(--ink-3); border-radius: 3px; } .topbar-langs .lang.is-active, .nav-langs .lang.is-active { color: var(--gold); } .topbar-langs .lang:hover { color: var(--ink); } .navbar-inner { display: flex; align-items: center; gap: 1.5rem; min-height: 78px; } .brand { display: inline-flex; align-items: center; gap: .8rem; color: var(--ink); } .brand img { width: 52px; height: 52px; transition: transform .4s var(--ease); } .brand:hover img { transform: rotate(18deg); } .brand-text { display: flex; flex-direction: column; line-height: 1; } .brand-script { font-family: var(--script); font-style: italic; font-weight: 500; color: var(--gold); font-size: 1.15rem; margin-bottom: .1rem; } .brand-name { font-weight: 700; letter-spacing: .16em; text-transform: uppercase; font-size: .95rem; } .nav { display: flex; align-items: center; gap: 1.6rem; margin-left: auto; } .nav > a:not(.btn) { font-size: .8rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 600; color: var(--ink-2); padding: .4rem 0; position: relative; } .nav > a:not(.btn)::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--gold); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease); } .nav > a:not(.btn):hover, .nav > a.is-active { color: var(--gold); } .nav > a.is-active::after, .nav > a:not(.btn):hover::after { transform: scaleX(1); } .nav-cta { margin-left: .5rem; } .nav-langs { display: none; } .icon-btn { display: none; width: 44px; height: 44px; align-items: center; justify-content: center; border: 1px solid var(--line-strong); border-radius: var(--radius); background: transparent; color: var(--gold); cursor: pointer; } .burger { flex-direction: column; } .burger span { display: block; width: 20px; height: 2px; background: currentColor; margin: 2.5px 0; transition: transform .3s var(--ease), opacity .2s; } .burger.is-open span:nth-child(1) { transform: translateY(4.5px) rotate(45deg); } .burger.is-open span:nth-child(2) { opacity: 0; } .burger.is-open span:nth-child(3) { transform: translateY(-4.5px) rotate(-45deg); } @media (max-width: 1023px) { .topbar-item:first-child, .topbar-status { display: none; } .topbar-langs { margin-left: auto; } .navbar-inner { min-height: 68px; gap: .75rem; } .brand img { width: 44px; height: 44px; } .icon-btn { display: inline-flex; } .phone-btn { margin-left: auto; } .nav { position: fixed; inset: var(--header-h) 0 0 0; background: var(--paper); flex-direction: column; align-items: stretch; gap: 0; padding: 1rem 1.25rem 2rem; margin: 0; transform: translateX(100%); transition: transform .35s var(--ease); overflow-y: auto; border-top: 1px solid var(--line); } .nav.is-open { transform: none; } .nav > a:not(.btn) { font-size: 1.1rem; padding: 1rem 0; border-bottom: 1px solid var(--line); } .nav > a:not(.btn)::after { display: none; } .nav-cta { margin: 1.5rem 0 0; } .nav-langs { display: flex; gap: .5rem; margin-top: 1.5rem; } .nav-langs .lang { padding: .5rem .9rem; border: 1px solid var(--line-strong); border-radius: 999px; font-size: .8rem; color: var(--ink-2); } .nav-langs .lang.is-active { border-color: var(--gold); } } /* ---- hero */ .hero { position: relative; min-height: calc(100svh - 112px); display: grid; place-items: center; overflow: hidden; isolation: isolate; } .hero-bg, .hero-bg img, .page-hero-bg, .page-hero-bg img, .lunch-bg, .lunch-bg img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero-bg img { animation: kenburns 24s ease-out both; object-position: center 60%; } @keyframes kenburns { from { transform: scale(1.12); } to { transform: scale(1); } } /* The shade stays dark to the bottom edge and hands over to the ivory with a clean line rather than a fade: light type cannot fade into light paper. */ .hero-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,22,18,.78) 0%, rgba(12,22,18,.5) 40%, rgba(12,22,18,.45) 70%, rgba(12,22,18,.82) 100%); } .hero-inner { position: relative; text-align: center; padding: 6rem 0 7rem; max-width: 56rem; } .hero-script { font-size: clamp(1.7rem, 3.2vw, 2.4rem); margin: 0 0 .5rem; text-shadow: 0 2px 20px rgba(0,0,0,.6); } .hero-title { font-family: var(--serif); font-weight: 500; letter-spacing: .02em; font-size: clamp(3rem, 8.5vw, 6.4rem); line-height: 1; margin: 0 0 1.4rem; text-shadow: 0 4px 30px rgba(0,0,0,.65); } .hero-lead { font-size: clamp(.85rem, 1.6vw, 1.05rem); letter-spacing: .22em; text-transform: uppercase; color: var(--ink-2); max-width: 40rem; margin: 0 auto 2.2rem; text-shadow: 0 2px 12px rgba(0,0,0,.6); } .hero-cta { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-bottom: 1.8rem; } .hero-status { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; margin: 0; } .hero-next { color: var(--ink-3); font-size: .85rem; letter-spacing: .06em; } .scroll-hint { position: absolute; left: 50%; bottom: 2rem; width: 26px; height: 44px; border: 2px solid rgba(247,243,234,.5); border-radius: 14px; transform: translateX(-50%); } .scroll-hint span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--gold); animation: hint 1.8s infinite; } @keyframes hint { 0% { transform: translateY(0); opacity: 1;} 100% { transform: translateY(14px); opacity: 0;} } /* ---- page hero */ .page-hero { position: relative; min-height: 46vh; display: grid; align-items: end; isolation: isolate; overflow: hidden; } .page-hero-bg img { object-position: center 55%; } .page-hero::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,22,18,.55), rgba(12,22,18,.35) 40%, rgba(12,22,18,.85) 100%); } .page-hero-inner { position: relative; z-index: 1; text-align: center; padding: 5rem 0 2.5rem; } .page-hero-meta { color: var(--ink-2); letter-spacing: .06em; max-width: 40rem; margin: 0 auto; } .page-hero .hero-status { margin-top: 1rem; } /* ---- reveal */ .js .reveal { opacity: 0; transform: translateY(22px); transition: opacity .8s var(--ease), transform .8s var(--ease); } .js .reveal.is-in { opacity: 1; transform: none; } .js .hero .reveal { transition-delay: .1s; } .js .hero .reveal:nth-child(2) { transition-delay: .25s; } .js .hero .reveal:nth-child(3) { transition-delay: .4s; } .js .hero .reveal:nth-child(4) { transition-delay: .55s; } .js .hero .reveal:nth-child(5) { transition-delay: .7s; } /* ---- about */ .about { background: var(--paper); } .about-grid { display: grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 6vw, 5rem); align-items: center; } .about-text p { color: var(--ink-2); font-size: 1.05rem; } .about-text .h2 { margin-bottom: 1.5rem; } .about-photo { margin: 0; position: relative; } .about-photo img { border-radius: var(--radius); box-shadow: var(--shadow); } .about-photo::before { content: ""; position: absolute; inset: -14px 14px 14px -14px; border: 1px solid var(--gold); opacity: .45; border-radius: var(--radius); z-index: -1; } .about-photo figcaption { margin-top: .9rem; font-family: var(--script); font-style: italic; color: var(--gold); font-size: 1.3rem; text-align: right; } @media (max-width: 860px) { .about-grid { grid-template-columns: 1fr; } .about-photo { order: -1; } } /* ---- tiles */ .tastes { background: var(--paper-2); } .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-bottom: 2.5rem; } .tile { position: relative; aspect-ratio: 4 / 3; overflow: hidden; border-radius: var(--radius); display: block; } .tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.2s var(--ease), filter .6s; filter: saturate(.85) brightness(.85); } .tile:hover img { transform: scale(1.07); filter: saturate(1) brightness(.95); } .tile::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(12,22,18,.9)); } /* The tile clips its overflow, so the label needs a right edge to wrap against - otherwise a long category name is silently cut off. */ .tile-label { position: absolute; left: 1.2rem; right: 1.2rem; bottom: 1.1rem; z-index: 1; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; font-size: .95rem; color: var(--ink); } .tile-label::before { content: ""; display: block; width: 32px; height: 1px; background: var(--gold); margin-bottom: .6rem; transition: width .4s var(--ease); } .tile:hover .tile-label::before { width: 64px; } @media (max-width: 760px) { .tiles { grid-template-columns: repeat(2, 1fr); gap: .6rem; } .tile-label { font-size: .78rem; left: .9rem; right: .9rem; bottom: .8rem; } } /* ---- novità */ .novita-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 1rem; } .novita-card { display: flex; flex-direction: column; padding: 1.5rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); color: var(--ink); transition: border-color .3s, transform .3s var(--ease); } .novita-card:hover { border-color: var(--gold); transform: translateY(-3px); } .novita-cat { font-family: var(--script); font-style: italic; font-weight: 500; color: var(--gold); font-size: 1.2rem; } .novita-card h3 { margin: .2rem 0 .5rem; font-family: var(--serif); font-size: 1.45rem; letter-spacing: .01em; font-weight: 600; line-height: 1.15; } .novita-card p { color: var(--ink-3); font-size: .9rem; flex: 1; } .novita-price { font-weight: 600; color: var(--gold); letter-spacing: .06em; } /* ---- lunch banner */ .lunch-banner { position: relative; padding: clamp(4rem, 9vw, 7rem) 0; isolation: isolate; overflow: hidden; text-align: center; } .lunch-bg img { filter: brightness(.45) saturate(.9); } .lunch-banner::after { content: ""; position: absolute; inset: 0; background: radial-gradient(60% 80% at 50% 50%, rgba(12,22,18,.3), rgba(12,22,18,.88)); z-index: -1; } /* The banner image is absolutely positioned, so the copy has to be positioned too or it paints underneath the photograph. */ .lunch-inner { position: relative; z-index: 1; max-width: 680px; } .lunch-body { color: var(--ink-2); font-size: 1.05rem; margin-bottom: 2rem; } /* ---- hungry */ .hungry { background: var(--paper); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: clamp(3rem, 6vw, 5rem) 0; } .hungry-inner { display: flex; align-items: center; justify-content: center; gap: 2.5rem; flex-wrap: wrap; } .hungry .big-script { margin: 0; } /* ---- gallery teaser */ .gallery-teaser { background: var(--paper-2); } .teaser-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 180px; gap: .6rem; grid-auto-flow: dense; } .teaser-photo { overflow: hidden; border-radius: var(--radius); display: block; } .teaser-photo.is-wide { grid-column: span 2; } .teaser-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease); } .teaser-photo:hover img { transform: scale(1.05); } @media (max-width: 760px) { .teaser-grid { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 140px; } } /* ---- reviews */ .reviews-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.2rem; margin-bottom: 2rem; } .review { margin: 0; padding: 2rem 1.8rem 1.6rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); position: relative; } .review::before { content: "“"; position: absolute; top: .4rem; left: 1.2rem; font-family: var(--serif); font-size: 4rem; color: var(--gold); opacity: .35; line-height: 1; } .review p { font-family: var(--serif); font-style: italic; font-size: 1.3rem; line-height: 1.55; color: var(--ink); margin-bottom: 1.2rem; } .review footer { font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; color: var(--gold); font-weight: 600; } /* ---- visit */ .visit { background: var(--paper-2); } .visit-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: stretch; } .visit-card, .info-card, .form-card { padding: clamp(1.5rem, 3vw, 2.4rem); border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper); } .visit-address { font-style: normal; margin: 1rem 0 1.4rem; color: var(--ink-2); } .visit-cta { display: flex; gap: .8rem; flex-wrap: wrap; margin-top: 1.5rem; } .visit-events { position: relative; overflow: hidden; border-radius: var(--radius); min-height: 360px; display: grid; align-items: end; } .visit-events img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: brightness(.55); transition: transform 1.2s var(--ease); } .visit-events:hover img { transform: scale(1.04); } .visit-events-text { position: relative; padding: 2rem; background: linear-gradient(180deg, transparent, rgba(12,22,18,.95)); } .visit-events-text p { color: var(--ink-2); } @media (max-width: 860px) { .visit-grid { grid-template-columns: 1fr; } } /* ---- hours table */ .hours-table { border-collapse: collapse; width: 100%; font-size: .92rem; } .hours-table th { text-align: left; font-weight: 400; color: var(--ink-3); padding: .38rem 0; } .hours-table td { text-align: right; padding: .38rem 0; color: var(--ink-2); font-variant-numeric: tabular-nums; } .hours-table tr + tr { border-top: 1px dashed var(--line); } .hours-table tr.is-today th, .hours-table tr.is-today td { color: var(--gold); font-weight: 600; } /* ---- menu */ .menu-toolbar { position: sticky; top: var(--header-h); z-index: 40; background: rgba(247,243,234,.92); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .menu-toolbar-inner { display: flex; align-items: center; gap: 1rem; padding: .8rem 0; flex-wrap: wrap; } .search { display: flex; align-items: center; gap: .6rem; flex: 1 1 260px; padding: .55rem .9rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-3); } .search input { flex: 1; background: none; border: 0; color: var(--ink); font-family: var(--sans); font-size: .95rem; outline: none; min-width: 0; } .search:focus-within { border-color: var(--gold); color: var(--gold); } .cat-nav { border-top: 1px solid var(--line); } .cat-nav-inner { display: flex; gap: 1.4rem; overflow-x: auto; scrollbar-width: none; padding: .6rem 0; white-space: nowrap; -webkit-overflow-scrolling: touch; } .cat-nav-inner::-webkit-scrollbar { display: none; } .cat-nav-inner a { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--ink-3); padding: .3rem 0; border-bottom: 1px solid transparent; flex: 0 0 auto; } .cat-nav-inner a:hover, .cat-nav-inner a.is-active { color: var(--gold); border-color: var(--gold); } @media (max-width: 1023px) { :root { --header-h: 102px; } } .menu-section { position: relative; padding: 2.5rem 0 1rem; scroll-margin-top: calc(var(--stick) + 8px); } .menu-section-head, .menu-section .dishes, .menu-section .cat-note { position: relative; z-index: 1; } /* The category photo dissolves into the empty space on the right while a section is parked in view (see the magnetic sections in app.js) and fades out again the moment you scroll. Decoration only - it never carries text. */ .menu-section-media { position: absolute; z-index: 0; top: 110px; right: max(-7vw, -120px); width: min(54%, 640px); height: min(calc(100% - 130px), 440px); opacity: 0; transform: translate3d(1.5rem, 0, 0); transition: opacity .6s var(--ease), transform .8s var(--ease); pointer-events: none; } .menu-section-media img { width: 100%; height: 100%; object-fit: cover; -webkit-mask-image: radial-gradient(115% 95% at 100% 62%, #000 8%, rgba(0,0,0,.5) 42%, transparent 76%); mask-image: radial-gradient(115% 95% at 100% 62%, #000 8%, rgba(0,0,0,.5) 42%, transparent 76%); } .menu-section.is-settled .menu-section-media { opacity: .32; transform: none; } .menu-section + .menu-section { border-top: 1px solid var(--line); } .menu-section-head { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.5rem; } .menu-section-head .h2 { margin: 0; } .menu-section-head .h2::after { content: ""; display: block; width: 48px; height: 1px; background: var(--gold); margin-top: .7rem; } .menu-section-img { width: 110px; height: 76px; object-fit: cover; border-radius: var(--radius); margin-left: auto; opacity: .85; } .dishes { display: grid; grid-template-columns: 1fr 1fr; column-gap: 3rem; row-gap: 1.4rem; } @media (max-width: 860px) { .dishes { grid-template-columns: 1fr; } .menu-section-img, .menu-section-media { display: none; } } .dish { padding-bottom: .2rem; scroll-margin-top: calc(var(--stick) + 8px); } .dish.is-highlight { animation: highlight 2.4s ease-out; border-radius: var(--radius); } @keyframes highlight { 0%, 40% { background: var(--gold-dim); box-shadow: 0 0 0 10px var(--gold-dim); } 100% { background: transparent; box-shadow: none; } } .dish-head { display: flex; align-items: baseline; gap: .6rem; } .dish-name { margin: 0; font-family: var(--serif); font-size: 1.28rem; font-weight: 600; letter-spacing: .01em; line-height: 1.2; } .dish-num { color: var(--gold); font-weight: 500; } .dish-dots { flex: 1; border-bottom: 1px dotted var(--line-strong); min-width: 1.5rem; transform: translateY(-.35em); } .dish-price { font-weight: 600; color: var(--gold); white-space: nowrap; letter-spacing: .04em; font-variant-numeric: tabular-nums; display: flex; flex-direction: column; align-items: flex-end; line-height: 1.2; } /* Items priced by size get one line per variant, right-aligned under each other. Joining them with "·" made a phrase that wrapped mid-price ("porcja 29 zł · ½ / porcji 16 zł"); a stack cannot break in the wrong place, and it reads as the price column it is. */ .dish-price.is-multi { font-size: .88rem; } .dish-var { white-space: nowrap; } .dish-var-l { color: var(--ink-3); font-weight: 300; } @media (max-width: 560px) { .dish-price.is-multi { font-size: .82rem; } } .dish-price small { font-weight: 300; color: var(--ink-3); font-size: .72rem; letter-spacing: .06em; white-space: normal; text-align: right; max-width: 16rem; } .dish-desc { margin: .35rem 0 0; color: var(--ink-3); font-size: .9rem; line-height: 1.5; } .dish.is-featured .dish-name { color: var(--gold-2); } .cat-note { margin: 1.4rem 0 0; font-size: .82rem; color: var(--ink-3); font-style: italic; } .menu-empty { text-align: center; padding: 3rem 0; color: var(--ink-3); font-size: 1.1rem; } /* print menu */ .print-menu { padding: 2rem 0; } .print-head { text-align: center; margin-bottom: 2rem; } .print-head img { margin: 0 auto .5rem; } .print-head h1 { text-transform: uppercase; letter-spacing: .2em; margin: 0; } .print-section { margin-bottom: 2rem; } .print-section h2 { text-transform: uppercase; letter-spacing: .12em; font-size: 1.1rem; border-bottom: 1px solid var(--gold); padding-bottom: .3rem; } .print-section .dish { margin-bottom: .6rem; break-inside: avoid; } @media print { body { background: #fff; color: #000; font-size: 11pt; } .site-header, .site-footer, .btn, .tag-feat { display: none !important; } .print-section h2, .dish-price, .dish-num { color: #000; } .dish-desc { color: #333; } .dish-dots { border-color: #999; } .dishes { grid-template-columns: 1fr 1fr; column-gap: 2rem; } .cat-note { color: #444; } .print-head img { filter: none; } a { color: inherit; } } /* ---- lunch */ .lunch-formula { display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap; margin-bottom: clamp(2.5rem, 5vw, 4rem); } .formula-box { display: flex; flex-direction: column; align-items: center; padding: 1.2rem 2rem; border: 1px solid var(--line-strong); border-radius: var(--radius); min-width: 170px; background: var(--paper-2); } .formula-n { font-size: 2.2rem; font-weight: 700; color: var(--gold); line-height: 1; } .formula-l { font-size: .74rem; letter-spacing: .18em; text-transform: uppercase; color: var(--ink-2); margin-top: .6rem; font-weight: 600; } .formula-plus, .formula-eq { font-size: 2rem; color: var(--ink-3); } .formula-price { border-color: var(--gold); background: var(--gold-dim); } .lunch-cols { display: grid; grid-template-columns: 1fr 1.4fr; gap: clamp(2rem, 5vw, 4rem); } .lunch-col .dishes { grid-template-columns: 1fr; } /* Lunch rows have no dotted leader, just name and the pasta-weight note. When a long name leaves the note no room, the note takes its own line rather than compressing into a two-line stub beside the name. */ .lunch-col .dish-head { flex-wrap: wrap; } .lunch-col .dish-price { margin-left: auto; } .lunch-col .dish-price small { max-width: none; white-space: nowrap; } .lunch-col .h2 { margin-bottom: 1.5rem; } .lunch-col .h2::after { content: ""; display: block; width: 48px; height: 1px; background: var(--gold); margin-top: .7rem; } .lunch-ctas { display: flex; gap: .8rem; justify-content: center; flex-wrap: wrap; margin-top: 3rem; } @media (max-width: 860px) { .lunch-cols { grid-template-columns: 1fr; } } /* ---- gallery */ .gallery-group { margin-bottom: 3rem; } .gallery-month { font-family: var(--serif); font-size: 1.8rem; letter-spacing: .02em; font-weight: 600; margin: 0 0 1.2rem; display: flex; align-items: baseline; gap: .6rem; } .gallery-month .script { font-size: 1.9rem; letter-spacing: 0; } .masonry { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: 220px; grid-auto-flow: dense; gap: .7rem; } .masonry-item { overflow: hidden; border-radius: var(--radius); display: block; position: relative; } .masonry-item.is-wide { grid-column: span 2; } .masonry-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease), filter .5s; } .masonry-item:hover img { transform: scale(1.05); filter: brightness(1.08); } .masonry-item::after { content: "+"; position: absolute; right: .8rem; bottom: .6rem; color: var(--gold); font-size: 1.6rem; opacity: 0; transition: opacity .3s; } .masonry-item:hover::after { opacity: 1; } @media (max-width: 1023px) { .masonry { grid-template-columns: repeat(3, 1fr); grid-auto-rows: 180px; } } @media (max-width: 640px) { .masonry { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 150px; gap: .4rem; } } .lightbox { position: fixed; inset: 0; z-index: 100; background: rgba(9,16,13,.95); display: grid; place-items: center; animation: fade .25s; } .lightbox[hidden], [hidden] { display: none !important; } @keyframes fade { from { opacity: 0; } } .lb-figure { margin: 0; max-width: min(1400px, 94vw); max-height: 90vh; display: flex; flex-direction: column; align-items: center; } .lb-figure img { max-width: 100%; max-height: 84vh; object-fit: contain; border-radius: var(--radius); box-shadow: var(--shadow); } .lb-figure figcaption { margin-top: .8rem; color: var(--ink-3); font-size: .8rem; letter-spacing: .12em; } .lb-close, .lb-nav { position: absolute; background: none; border: 0; color: var(--ink); font-size: 2.6rem; cursor: pointer; padding: 1rem; line-height: 1; opacity: .7; transition: opacity .2s; } .lb-close:hover, .lb-nav:hover { opacity: 1; color: var(--gold); } .lb-close { top: .5rem; right: 1rem; } .lb-prev { left: .5rem; top: 50%; transform: translateY(-50%); } .lb-next { right: .5rem; top: 50%; transform: translateY(-50%); } /* ---- contact / reservations */ .contact-grid, .res-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; } .res-grid { grid-template-columns: 1.4fr 1fr; } .contact-info, .res-aside { display: grid; gap: 1rem; } .info-card .h3 { margin-bottom: .9rem; } .info-card .h3 + .h3 { margin-top: 1.4rem; } .info-card p { color: var(--ink-2); } .socials { display: flex; gap: .8rem; } .socials a { display: inline-flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; padding: 0 .8rem; border: 1px solid var(--line-strong); border-radius: 999px; color: var(--ink-2); font-size: .8rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; } .socials a:hover { border-color: var(--gold); color: var(--gold); } .map-wrap { margin-top: 2rem; } .map { aspect-ratio: 16 / 7; border-radius: var(--radius); overflow: hidden; border: 1px solid var(--line); filter: grayscale(.45) sepia(.18) contrast(1.02); } .map iframe { width: 100%; height: 100%; border: 0; display: block; } @media (max-width: 860px) { .contact-grid, .res-grid { grid-template-columns: 1fr; } .map { aspect-ratio: 4 / 3; } } .form { display: grid; gap: 1.1rem; } .field { display: grid; gap: .35rem; } .field label { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--ink-2); } .field input, .field select, .field textarea { width: 100%; padding: .85rem 1rem .75rem; background: var(--paper-2); border: 1px solid var(--line-strong); border-radius: var(--radius); color: var(--ink); font-family: var(--sans); font-size: 1rem; font-weight: 300; transition: border-color .2s, box-shadow .2s; appearance: none; -webkit-appearance: none; } .field select { background-image: linear-gradient(45deg, transparent 50%, var(--gold) 50%), linear-gradient(135deg, var(--gold) 50%, transparent 50%); background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%; background-size: 6px 6px; background-repeat: no-repeat; padding-right: 2.4rem; } .field input:focus, .field select:focus, .field textarea:focus { outline: none; border-color: var(--gold); box-shadow: 0 0 0 3px var(--gold-dim); } .field [aria-invalid="true"] { border-color: var(--red-2); } .field input[type="date"]::-webkit-calendar-picker-indicator { opacity: .7; cursor: pointer; } .field-err { margin: 0; font-size: .82rem; color: var(--red-2); } .field-hint { margin: 0; font-size: .82rem; color: var(--gold); } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .field-row.three { grid-template-columns: 1.3fr 1fr 1fr; } @media (max-width: 560px) { .field-row, .field-row.three { grid-template-columns: 1fr; } } .hp { position: absolute; left: -9999px; opacity: 0; height: 0; overflow: hidden; } .success-box { text-align: center; padding: 1.6rem; } .success-title { font-size: 1.05rem; font-weight: 400; } .success-ref { font-size: 1.3rem; letter-spacing: .06em; } .success-ref strong { color: var(--gold); font-size: 1.6rem; letter-spacing: .12em; } /* ---- prose */ .prose { max-width: 47rem; } .prose h2 { font-size: 1.05rem; letter-spacing: .14em; text-transform: uppercase; margin: 2rem 0 .6rem; color: var(--gold); } .prose p, .prose li { color: var(--ink-2); } .prose ul { padding-left: 1.2rem; } /* ---- admin */ .admin-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap; margin-bottom: 2.5rem; } .stat-row { display: flex; gap: 1rem; } .stat { padding: 1rem 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); min-width: 120px; text-align: center; } .stat-n { display: block; font-size: 2rem; font-weight: 700; color: var(--gold); line-height: 1; } .stat-l { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); } .admin-section { margin-bottom: 3.5rem; } .admin-section-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1rem; } .table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--radius); } .admin-table { width: 100%; border-collapse: collapse; font-size: .9rem; min-width: 900px; } .admin-table th { text-align: left; font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); padding: .8rem; background: var(--paper-2); } .admin-table td { padding: .8rem; border-top: 1px solid var(--line); vertical-align: top; } .admin-table tr.is-today td { background: rgba(217,168,104,.05); } .admin-table tr.status-cancelled td { opacity: .5; } .admin-table .notes { max-width: 240px; font-size: .85rem; color: var(--ink-2); overflow-wrap: anywhere; } .admin-table .actions form { display: flex; gap: .4rem; flex-wrap: wrap; } .badge { display: inline-block; padding: .3rem .6rem .2rem; border-radius: 999px; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; border: 1px solid; } .badge-pending { color: var(--gold); border-color: var(--gold); } .badge-confirmed { color: var(--green); border-color: var(--green); } .badge-cancelled { color: var(--ink-3); border-color: var(--line-strong); } .msg-list { display: grid; gap: .8rem; } .msg { padding: 1.2rem 1.4rem; border: 1px solid var(--line); border-radius: var(--radius); background: var(--paper-2); } .msg.is-unread { border-left: 3px solid var(--gold); } .msg header { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .6rem; } .msg header form { margin-left: auto; } .msg p { margin: 0; white-space: pre-wrap; color: var(--ink-2); } /* ---- 404 */ .notfound { min-height: 60vh; display: grid; place-items: center; } .notfound .h1 { margin-bottom: .5rem; } .notfound .btn { margin-top: 1.5rem; } /* ---- footer */ .site-footer { background: #12261e; color: var(--ink-2); border-top: 1px solid var(--line); padding: clamp(3rem, 6vw, 5rem) 0 0; font-size: .92rem; } .footer-grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 2.5rem; padding-bottom: 3rem; } .footer-logo { margin-bottom: 1rem; } .footer-about { color: var(--ink-3); max-width: 340px; } .footer-h { font-size: .74rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); margin: .4rem 0 1rem; font-weight: 700; } .footer-address { font-style: normal; color: var(--ink-2); } .footer-address p { margin-bottom: .6rem; } .footer-address a { color: var(--ink-2); } .footer-address a:hover { color: var(--gold); } .footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; } .footer-links a { color: var(--ink-2); letter-spacing: .06em; } .footer-links a:hover { color: var(--gold); } .footer-bottom { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; padding: 1.4rem 0; border-top: 1px solid var(--line); color: var(--ink-3); font-size: .78rem; letter-spacing: .06em; } .footer-tag { font-family: var(--script); font-style: italic; font-weight: 500; color: var(--gold); font-size: 1.2rem; letter-spacing: 0; } @media (max-width: 960px) { .footer-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 560px) { .footer-grid { grid-template-columns: 1fr; gap: 2rem; } } /* ====================================================================== Cart, virtual waiter, checkout ====================================================================== */ .info-board { background: var(--accent); color: var(--on-accent); text-align: center; font-size: .82rem; font-weight: 600; letter-spacing: .06em; padding: .4rem 1rem; } .cart-fab { position: fixed; right: 1.2rem; bottom: 5.6rem; z-index: 60; display: inline-flex; align-items: center; gap: .5rem; padding: .7rem 1.1rem; border-radius: 999px; border: 1px solid var(--gold); background: var(--paper-2); color: var(--gold); font-weight: 600; letter-spacing: .06em; font-size: .85rem; cursor: pointer; box-shadow: var(--shadow); } .cart-fab.bump { animation: bump .4s var(--ease); } @keyframes bump { 30% { transform: scale(1.12); } } .cart-drawer { position: fixed; inset: 0; z-index: 90; background: rgba(9,16,13,.6); display: flex; justify-content: flex-end; } .cart-panel { width: min(420px, 100%); background: var(--paper-2); border-left: 1px solid var(--line); padding: 1.5rem; overflow-y: auto; display: flex; flex-direction: column; gap: 1rem; animation: slidein .35s var(--ease); } @keyframes slidein { from { transform: translateX(40px); opacity: 0; } } .cart-head { display: flex; justify-content: space-between; align-items: center; } .cart-head .lb-close { position: static; padding: 0 .4rem; font-size: 2rem; } .cart-lines { display: grid; gap: .5rem; } .cart-line { display: grid; grid-template-columns: 1fr auto auto; gap: .8rem; align-items: center; padding: .6rem 0; border-bottom: 1px dashed var(--line); font-size: .92rem; } .cart-line-price { color: var(--gold); font-weight: 600; font-variant-numeric: tabular-nums; } .qty { display: inline-flex; align-items: center; border: 1px solid var(--line-strong); border-radius: 999px; } .qty button { background: none; border: 0; color: var(--gold); font-size: 1.1rem; padding: .2rem .7rem; cursor: pointer; } .qty b { min-width: 1.4rem; text-align: center; } .cart-total { display: flex; justify-content: space-between; font-size: 1.1rem; margin: .5rem 0 0; } .cart-total strong { color: var(--gold); } .cart-actions { display: grid; gap: .6rem; } .cart-actions .is-disabled { pointer-events: none; opacity: .4; } .dish-add { margin-top: .5rem; } .dish-add.in-cart { background: var(--gold-dim); border-color: var(--gold); } .radio-row { display: flex; gap: .6rem; } .radio { display: inline-flex; align-items: center; gap: .6rem; padding: .7rem 1rem; font-size: 1rem; text-transform: none; letter-spacing: 0; border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer; transition: border-color .2s, background .2s; } .radio:hover { border-color: var(--gold); } /* The native control stays in the accessibility tree and keeps keyboard focus; the tick next to it is what the guest actually sees. */ .radio input { position: absolute; opacity: 0; width: 0; height: 0; } .radio-tick { flex: none; width: 20px; height: 20px; border: 1px solid var(--line-strong); border-radius: 4px; position: relative; transition: border-color .2s, background .2s; } .radio-tick::after { content: ""; position: absolute; left: 6px; top: 2px; width: 5px; height: 10px; border: solid var(--paper); border-width: 0 2px 2px 0; transform: rotate(45deg) scale(.4); opacity: 0; transition: opacity .15s, transform .15s var(--ease); } /* The tick itself hangs off a sibling selector so it flips even where :has() is unavailable; :has() only adds the surrounding card chrome. */ .radio input:checked ~ .radio-tick { background: var(--gold); border-color: var(--gold); } .radio input:checked ~ .radio-tick::after { opacity: 1; transform: rotate(45deg) scale(1); } .radio:has(input:checked) { border-color: var(--gold); background: var(--gold-dim); } .radio:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; } .radio-text { min-width: 0; overflow-wrap: anywhere; } fieldset.field { border: 0; padding: 0; margin: 0; } fieldset.field legend { font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--ink-2); margin-bottom: .4rem; } .wrap.narrow { max-width: 640px; } .order-number { font-size: 1.2rem; } .order-number strong { color: var(--gold); font-size: 1.6rem; } .order-table { width: 100%; border-collapse: collapse; margin: 1.2rem 0; text-align: left; } .order-table td { padding: .4rem .3rem; border-bottom: 1px dashed var(--line); } .order-table .num { text-align: right; color: var(--gold); font-variant-numeric: tabular-nums; } .order-table .order-total td { border: 0; font-weight: 700; padding-top: .8rem; } .chat { position: fixed; right: 1.2rem; bottom: 1.2rem; z-index: 80; } .chat-launcher { display: inline-flex; align-items: center; gap: .6rem; padding: .5rem 1.1rem .5rem .5rem; border-radius: 999px; border: 1px solid var(--accent); background: var(--accent); color: var(--on-accent); font-family: var(--sans); font-weight: 700; font-size: .78rem; letter-spacing: .14em; text-transform: uppercase; cursor: pointer; box-shadow: var(--shadow); transition: transform .25s var(--ease); } .chat-launcher:hover { transform: translateY(-2px); } .chat-launcher img { width: 36px; height: 36px; border-radius: 50%; background: #fff; } .chat-panel { position: fixed; right: 1rem; bottom: 1rem; width: min(400px, calc(100vw - 2rem)); height: min(640px, calc(100vh - 2rem)); display: flex; flex-direction: column; background: #f7f3ec; color: #22201b; border-radius: 14px; box-shadow: 0 30px 80px rgba(28,42,35,.35); overflow: hidden; animation: slideup .3s var(--ease); } @keyframes slideup { from { transform: translateY(20px); opacity: 0; } } .chat-head { display: flex; align-items: center; gap: .7rem; padding: .8rem 1rem; background: #fff; border-bottom: 1px solid rgba(0,0,0,.08); } .chat-head img { border-radius: 50%; } .chat-head div { flex: 1; line-height: 1.2; display: flex; flex-direction: column; } .chat-head small { color: #6b6559; font-size: .72rem; } .chat-head .lb-close, .chat-reset { position: static; color: #6b6559; font-size: 1.6rem; padding: .2rem .4rem; background: none; border: 0; cursor: pointer; } .chat-reset { font-size: 1.2rem; } .chat-log { flex: 1; overflow-y: auto; padding: 1rem; display: flex; flex-direction: column; gap: .6rem; font-size: .93rem; line-height: 1.45; } .msg { max-width: 88%; padding: .6rem .85rem; border-radius: 12px; white-space: pre-wrap; } .msg-assistant { background: #fff; align-self: flex-start; border-bottom-left-radius: 3px; box-shadow: 0 1px 2px rgba(0,0,0,.06); } .msg-user { background: var(--accent); color: var(--on-accent); align-self: flex-end; border-bottom-right-radius: 3px; } .msg.error { background: #fde8e8; color: #8a1f1f; } .msg.typing { display: flex; gap: 4px; padding: .8rem 1rem; } .msg.typing span { width: 7px; height: 7px; border-radius: 50%; background: #b3ab9d; animation: blink 1.2s infinite; } .msg.typing span:nth-child(2) { animation-delay: .2s; } .msg.typing span:nth-child(3) { animation-delay: .4s; } @keyframes blink { 0%, 80%, 100% { opacity: .3; } 40% { opacity: 1; } } .chat-log .chip { align-self: flex-start; color: #5a4a2a; border-color: rgba(0,0,0,.2); } .cards { display: grid; gap: .5rem; width: 100%; } .card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 10px; padding: .7rem .8rem; } .card-head { display: flex; justify-content: space-between; gap: .6rem; align-items: baseline; font-size: .9rem; } .card-price { color: #a8762e; font-weight: 700; white-space: nowrap; } .card p { margin: .3rem 0 .5rem; font-size: .78rem; color: #6b6559; font-style: italic; } .card .btn { padding: .5rem .9rem .4rem; } .card .btn.in-cart { background: #e7dcc4; border-color: #c9a86a; color: #4d3a14; } .chat-chips { padding: .3rem 1rem .6rem; gap: .4rem; } .chat-chips .chip { color: #5a4a2a; border-color: rgba(0,0,0,.2); font-size: .68rem; } .chat-chips .chip:hover { border-color: var(--gold); background: var(--gold-dim); } .chat-form { display: flex; gap: .5rem; padding: .6rem .8rem; background: #fff; border-top: 1px solid rgba(0,0,0,.08); } .chat-form textarea { flex: 1; resize: none; border: 1px solid rgba(0,0,0,.15); border-radius: 10px; padding: .6rem .8rem; font-family: var(--sans); font-size: .95rem; background: #fbf9f5; color: #22201b; outline: none; } .chat-form textarea:focus { border-color: var(--gold); } .chat-privacy { margin: 0; padding: .3rem 1rem .6rem; font-size: .66rem; color: #8a8375; background: #fff; } body.chat-open .cart-fab { display: none; } @media (max-width: 560px) { .chat-panel { width: 100vw; height: 100dvh; right: 0; bottom: 0; border-radius: 0; } .cart-fab { bottom: 5rem; right: .8rem; } .chat { right: .8rem; bottom: .8rem; } .chat-launcher span { display: none; } .chat-launcher { padding: .4rem; } } /* ====================================================================== Operator panel ====================================================================== */ .page-admin main, .page-kitchen main { background: #f4f1ea; color: #22201b; } .page-admin .site-footer, .page-kitchen .site-footer, .page-admin .site-header .topbar, .page-kitchen .site-header .topbar { display: none; } .admin { display: grid; grid-template-columns: 220px 1fr; min-height: 80vh; } .admin-side { background: #fff; border-right: 1px solid rgba(0,0,0,.08); padding: 1.4rem 1rem; position: sticky; top: 78px; height: calc(100vh - 78px); overflow-y: auto; } .admin-brand { display: flex; align-items: center; gap: .7rem; color: #22201b; margin-bottom: 1.5rem; } .admin-brand span { display: flex; flex-direction: column; line-height: 1.1; } .admin-brand small { font-size: .66rem; letter-spacing: .14em; text-transform: uppercase; color: #8a8375; } .admin-nav { display: flex; flex-direction: column; gap: .15rem; } .admin-nav a { padding: .6rem .8rem; border-radius: 8px; color: #4a453c; font-weight: 600; font-size: .88rem; } .admin-nav a:hover { background: rgba(217,168,104,.15); color: #7a5a22; } .admin-nav a.is-active { background: #c98b3e; color: #fff; } .admin-nav-ext { margin-top: .4rem; font-size: .8rem !important; color: #8a8375 !important; } .admin-main { padding: 1.6rem clamp(1rem, 3vw, 2.5rem) 4rem; min-width: 0; } .admin-main .h2, .admin-main .h3 { color: #22201b; text-transform: none; letter-spacing: 0; } .admin-main .h3 { font-size: 1rem; font-weight: 700; margin-bottom: .8rem; } .admin-head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.2rem; } .admin-head .h2 { margin: 0; } .admin-main .chip { color: #4a453c; border-color: rgba(0,0,0,.18); background: #fff; } .admin-main .chip.is-active { background: #c98b3e; border-color: #c98b3e; color: #fff; } .admin-main .btn-ghost { color: #7a5a22; border-color: rgba(201,139,62,.5); background: #fff; } .admin-main .btn-primary { background: #c98b3e; border-color: #c98b3e; color: #fff; } .admin-main .btn-primary:hover { background: #b07a33; } .admin-main .alert-ok { background: #e6f2ea; border-color: #9fcdb0; color: #1f5a37; } .admin-main .muted { color: #8a8375; } .admin-main a { color: #7a5a22; } /* The adverts queue: slides of four cards, scroll-snapped, with the arrows in app.js. It scrolls by touch or trackpad without them. */ .adv-deck { position: relative; } .adv-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; } .adv-track::-webkit-scrollbar { display: none; } .adv-slide { flex: 0 0 100%; scroll-snap-align: start; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; padding: .2rem; } @media (max-width: 1100px) { .adv-slide { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { .adv-slide { grid-template-columns: 1fr; } } .adv-card { margin: 0; display: flex; flex-direction: column; gap: .5rem; min-width: 0; padding: .9rem 1rem 1rem; } .adv-card .admin-head { margin-bottom: 0; gap: .5rem; align-items: flex-start; } .adv-card .h3 { font-size: .86rem; margin: 0; letter-spacing: .08em; } .adv-body { margin: 0; white-space: pre-wrap; font-size: .86rem; line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 5; -webkit-box-orient: vertical; overflow: hidden; } .adv-card details { font-size: .8rem; } .adv-card summary { cursor: pointer; color: #8a8375; } .adv-card .chips { margin-top: auto; } .adv-nav { display: flex; align-items: center; justify-content: center; gap: 1rem; margin-top: 1rem; } .adv-nav .chip { font-size: 1rem; line-height: 1; padding: .4rem .8rem; } .recipe-steps { margin: 0; padding-left: 1.2rem; display: grid; gap: .4rem; } .admin-main .check { margin: .3rem 0; } .admin-main .chip input { font: inherit; border: 0; background: transparent; color: inherit; } .adv-pic { display: block; margin: 0 0 .3rem; border-radius: 8px; overflow: hidden; border: 1px solid rgba(0,0,0,.08); } .adv-pic img { width: 100%; height: auto; display: block; } .demo-note { margin: 0 0 1rem; padding: .6rem .9rem; border-radius: 6px; background: #fff3d6; color: #6b4a0e; font-size: .85rem; } .stat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: .8rem; margin-bottom: 1.2rem; } .admin-main .stat { background: #fff; border-color: rgba(0,0,0,.08); text-align: left; padding: .9rem 1rem; } .admin-main .stat-n { color: #22201b; font-size: 1.5rem; } .admin-main .stat-l { color: #8a8375; font-size: .64rem; } .admin-main .stat.is-warn .stat-n { color: #c0392b; } .admin-card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 10px; padding: 1.2rem 1.3rem; margin-bottom: 1.2rem; } .admin-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; } @media (max-width: 960px) { .admin { grid-template-columns: 1fr; } .admin-side { position: static; height: auto; border-right: 0; border-bottom: 1px solid rgba(0,0,0,.08); padding: .8rem 1rem; } .admin-brand { display: none; } .admin-nav { flex-direction: row; overflow-x: auto; gap: .3rem; } .admin-nav a { white-space: nowrap; } .admin-grid2 { grid-template-columns: 1fr; } } .bars { display: flex; align-items: flex-end; gap: 4px; height: 160px; } .bar { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; height: 100%; min-width: 0; } .bar span { display: block; width: 100%; background: #c98b3e; border-radius: 3px 3px 0 0; min-height: 2px; transition: height .4s var(--ease); } .bar.is-full span { background: #c0392b; } .bar small { font-size: .58rem; color: #8a8375; margin-top: .3rem; white-space: nowrap; overflow: hidden; max-width: 100%; } .hbars { display: grid; gap: .5rem; } .hbar { display: grid; grid-template-columns: 220px 1fr 130px; gap: .8rem; align-items: center; font-size: .85rem; } .hbar-l { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .hbar-t { height: 10px; background: #f0ebe1; border-radius: 5px; overflow: hidden; } .hbar-t i { display: block; height: 100%; background: #c98b3e; } .hbar-v { text-align: right; color: #8a8375; font-variant-numeric: tabular-nums; } @media (max-width: 640px) { .hbar { grid-template-columns: 1fr; gap: .2rem; } } .admin-main .admin-table th { background: #faf8f3; color: #8a8375; } .admin-main .admin-table td { border-color: rgba(0,0,0,.06); } .admin-main .table-wrap { border-color: rgba(0,0,0,.08); background: #fff; } .admin-main .admin-table { min-width: 720px; } /* Statuses, on the panel's own tokens rather than seven one-off literals: a tint and ink from the same family, each pair measured above 5.5:1. */ .admin-main .badge-pending { background: var(--pill-pending-bg); color: var(--pill-pending-fg); border-color: var(--pill-pending-fg); } .admin-main .badge-confirmed, .admin-main .badge-completed { background: var(--pill-completed-bg); color: var(--pill-completed-fg); border-color: var(--pill-completed-fg); } .admin-main .badge-ready { background: var(--pill-ready-bg); color: var(--pill-ready-fg); border-color: var(--pill-ready-fg); } .admin-main .badge-cancelled { background: var(--pill-cancelled-bg); color: var(--pill-cancelled-fg); border-color: var(--pill-cancelled-fg); } .admin-main .badge-accepted, .admin-main .badge-preparing { background: var(--pill-accepted-bg); color: var(--pill-accepted-fg); border-color: var(--pill-accepted-fg); } .admin-main .badge-delayed { background: var(--pill-delayed-bg); color: var(--pill-delayed-fg); border-color: var(--pill-delayed-fg); } /* Floor statuses: a booking now travels further than pending/confirmed. */ .admin-main .badge-waiting { color: #8a5a1f; border-color: #d8a24a; } .admin-main .badge-arrived { color: #2c5aa0; border-color: #2c5aa0; } .admin-main .badge-seated { color: #1f7a45; border-color: #1f7a45; } .admin-main .badge-finished { color: #6a6357; border-color: #c9c2b2; } .admin-main .badge-no_show { color: #a33; border-color: #d08b8b; } .admin-main .swatch { display: inline-block; width: .8rem; height: .8rem; border-radius: 3px; vertical-align: -1px; margin-right: .35rem; border: 1px solid rgba(0,0,0,.15); } .admin-main .stat-line { font-size: 1.05rem; margin: 0 0 .3rem; } .badge-src { color: #8a8375; border-color: #c9c2b2; } .tickets { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 1rem; } .ticket { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 10px; padding: 1rem 1.1rem; font-size: .9rem; border-top: 4px solid #c98b3e; } .ticket.status-pending { border-top-color: #e0a72f; } .ticket.status-preparing, .ticket.status-accepted { border-top-color: #2c5aa0; } .ticket.status-ready { border-top-color: #1f7a45; } .ticket.status-completed, .ticket.status-cancelled { opacity: .55; } .ticket.is-sim::after { content: "sim"; font-size: .6rem; color: #b3ab9d; float: right; } .ticket header { display: flex; align-items: center; gap: .4rem .6rem; flex-wrap: wrap; margin-bottom: .5rem; } .ticket header strong { font-size: 1.15rem; } .ticket-meta { color: #4a453c; margin: 0 0 .5rem; } .ticket-meta .big { font-size: 1.4rem; } .ticket-lines { width: 100%; border-collapse: collapse; } .ticket-lines td { padding: .25rem .2rem; border-bottom: 1px dashed rgba(0,0,0,.08); } .ticket-lines .num { text-align: right; font-variant-numeric: tabular-nums; } .ticket-lines .order-total td { border: 0; font-weight: 700; } .ticket-notes { margin: .5rem 0; font-style: italic; color: #6b4a0e; background: #fff8e6; padding: .4rem .6rem; border-radius: 6px; } .ticket-actions { display: flex; flex-wrap: wrap; gap: .4rem; margin-top: .7rem; } .ticket-history { margin-top: .6rem; font-size: .78rem; color: #8a8375; } .ticket-history ul { padding-left: 1rem; margin: .3rem 0 0; } .ticket-timer { margin-left: auto; font-weight: 700; color: #8a8375; } .ticket-timer.is-late { color: #c0392b; } .form-inline { display: flex; flex-wrap: wrap; gap: .8rem; align-items: flex-end; } .form-inline label { display: flex; flex-direction: column; gap: .3rem; font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: #8a8375; font-weight: 600; } .form-inline label.wide { flex: 1 1 240px; } .form-inline input, .form-inline select, .admin-main .field input, .admin-main .field select, .admin-main .field textarea, .menu-edit input { background: #faf8f3; border: 1px solid rgba(0,0,0,.15); color: #22201b; border-radius: 6px; padding: .5rem .7rem; font-family: var(--sans); font-size: .9rem; } .admin-main .field label { color: #8a8375; } .admin-main .field input:focus, .admin-main .field textarea:focus, .admin-main .field select:focus, .menu-edit input:focus { border-color: #c98b3e; box-shadow: 0 0 0 3px rgba(201,139,62,.2); } .admin-main .field select { background-image: none; padding-right: .7rem; } .switch-row { display: flex; align-items: center; gap: .7rem; padding: .4rem 0; font-size: .95rem; } .switch-row input { width: 20px; height: 20px; accent-color: #c98b3e; } .chip-row { display: grid; grid-template-columns: 30px 1fr 1fr 1fr; gap: .4rem; align-items: center; margin-bottom: .4rem; } .chip-row input { min-width: 0; } .menu-edit td { vertical-align: middle; } .menu-edit .in-name { width: 100%; min-width: 180px; } .menu-edit .in-num { width: 90px; } .menu-edit tr.is-hidden td { opacity: .5; } .switch { display: inline-block; position: relative; width: 44px; height: 24px; } .switch input { opacity: 0; width: 0; height: 0; } .switch span { position: absolute; inset: 0; background: #d9d2c4; border-radius: 24px; cursor: pointer; transition: .2s; } .switch span::before { content: ""; position: absolute; width: 18px; height: 18px; left: 3px; top: 3px; background: #fff; border-radius: 50%; transition: .2s; } .switch input:checked + span { background: #1f7a45; } .switch input:checked + span::before { transform: translateX(20px); } .log { list-style: none; padding: 0; margin: 0; display: grid; gap: .4rem; font-size: .85rem; } .log time { color: #8a8375; font-variant-numeric: tabular-nums; margin-right: .5rem; } .live-list { list-style: none; padding: 0; margin: 0; display: grid; gap: .5rem; } .live-row { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 8px; padding: .7rem 1rem; font-size: .9rem; } .live-dot { background: #1f7a45; box-shadow: 0 0 0 4px rgba(31,122,69,.2); } .convo .msg { max-width: 80%; margin-bottom: .5rem; } .convo .msg-assistant { background: #f4f1ea; } .convo .msg small { display: block; font-size: .66rem; color: #8a8375; margin-top: .3rem; } .convo .tool { font-family: ui-monospace, monospace; font-size: .72rem; color: #2c5aa0; margin-top: .3rem; white-space: pre-wrap; } .msg-card { background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 8px; padding: 1rem 1.2rem; } .msg-card.is-unread { border-left: 3px solid #c98b3e; } .msg-card header { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: .5rem; } .msg-card header form { margin-left: auto; } .msg-card p { margin: 0; white-space: pre-wrap; color: #4a453c; } .msg-list { display: grid; gap: .7rem; } .kitchen { padding: 1.5rem clamp(1rem, 3vw, 2.5rem) 4rem; } .kitchen-head { display: flex; align-items: center; gap: 1.5rem; margin-bottom: 1.2rem; } .kitchen-head .h2 { margin: 0; color: #22201b; text-transform: none; } .kitchen-clock { margin-left: auto; font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; } .kitchen-grid .ticket { font-size: 1.05rem; } .kitchen-grid .ticket-lines td { font-size: 1.1rem; padding: .4rem .2rem; } .kitchen .btn { font-size: .9rem; padding: .9rem 1.4rem; } /* The board only speaks up when it has stopped being true. */ .kitchen-alert { display: flex; align-items: center; gap: .6rem; margin: 0 0 1.2rem; padding: .85rem 1.1rem; border-radius: 8px; border: 1px solid #e0b000; background: #fdf6e0; color: #6b5200; font-weight: 600; } .kitchen-alert[hidden] { display: none; } .kitchen-alert.is-dead { border-color: #c0392b; background: #fdeceb; color: #8c231a; } .kitchen-alert-link { color: inherit; text-decoration: underline; white-space: nowrap; } .kitchen-alert-link[hidden] { display: none; } /* ---- fulfilment picker, delivery fields, zones */ .ful-picker { margin-bottom: .4rem; } .ful-options { display: grid; grid-template-columns: 1fr 1fr; gap: .6rem; } @media (max-width: 560px) { .ful-options { grid-template-columns: 1fr; } } .ful-option { display: flex; align-items: flex-start; gap: .7rem; padding: .9rem 1rem; border: 1px solid var(--line-strong); border-radius: var(--radius); cursor: pointer; transition: border-color .2s, background .2s; text-transform: none; letter-spacing: 0; } .ful-option:hover { border-color: var(--gold); } .ful-option span { display: flex; flex-direction: column; gap: .2rem; } .ful-option b { font-size: .95rem; letter-spacing: .04em; } .ful-option small { color: var(--ink-3); font-size: .78rem; line-height: 1.35; } .ful-option input { accent-color: var(--gold); width: 18px; height: 18px; margin-top: .15rem; } .ful-option:has(input:checked) { border-color: var(--gold); background: var(--gold-dim); } .ful-option.is-off { opacity: .5; cursor: not-allowed; } .delivery-fields { display: grid; gap: 1.1rem; padding: 1rem; border: 1px dashed var(--line-strong); border-radius: var(--radius); background: var(--gold-dim); } /* There is no minimum basket any more, so the fee is the thing the guest must not miss: it gets its own bordered block and a headline-sized number. */ .del-notice { margin: 0; padding: .9rem 1.1rem; border: 2px solid var(--gold); border-radius: var(--radius); background: var(--gold-dim); display: grid; gap: .15rem; min-width: 0; overflow-wrap: anywhere; } .del-notice-label { margin: 0; font-size: .72rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 600; color: var(--gold-2); } .del-notice-amount { margin: 0; font-size: clamp(1.5rem, 6vw, 1.9rem); font-weight: 700; line-height: 1.15; color: var(--gold-2); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .del-notice-body { margin: 0; font-size: .88rem; line-height: 1.45; color: var(--ink-2); } .del-notice.is-free { border-color: var(--green); background: rgba(46,125,85,.1); } .del-notice.is-free .del-notice-label, .del-notice.is-free .del-notice-amount { color: var(--green); } .del-nomin { margin: .6rem 0 .3rem; font-size: .95rem; font-weight: 600; color: var(--gold-2); } .cart-sub { display: flex; justify-content: space-between; margin: .3rem 0 0; color: var(--ink-2); font-size: .92rem; } .zones-table { width: 100%; border-collapse: collapse; font-size: .88rem; margin: .6rem 0; } .zones-table th { text-align: left; font-weight: 600; padding: .45rem 0; color: var(--ink-2); } .zones-table td { text-align: right; padding: .45rem 0; color: var(--gold); font-variant-numeric: tabular-nums; } .zones-table tr + tr { border-top: 1px dashed var(--line); } .dish-foot { display: flex; align-items: center; gap: .8rem; margin-top: .55rem; } .dish-foot .dish-add { margin-top: 0; } .stock-left { font-size: .72rem; letter-spacing: .1em; text-transform: uppercase; color: var(--red-2); } .dish.is-dod { border-left: 2px solid var(--gold); padding-left: .9rem; } .checkout.is-delivery .cart-sub { color: var(--gold); } .ticket-address { margin: .3rem 0 .5rem; font-weight: 600; color: #2c5aa0; } .badge-del { color: #2c5aa0; border-color: #2c5aa0; } /* ====================================================================== Containment: nothing prints past the edge of its card ---------------------------------------------------------------------- Guest text (names, addresses, notes) and dish names are arbitrary, so every box that holds them wraps long words instead of widening, and every flex row is allowed to wrap. `min-width: 0` is the part that is easy to forget: a grid or flex child defaults to min-content width, which is what pushes a long unbroken word past the border. ====================================================================== */ .ticket, .admin-card, .info-card, .form-card, .stat, .msg-card, .live-row, .novita-card, .review, .cards .card, .chat-log .msg, .cart-line, .dish, .del-notice, .longtext { min-width: 0; overflow-wrap: anywhere; } /* Rows of chips, badges and buttons wrap rather than run off the side. */ .ticket header, .ticket-actions, .msg-card header, .admin-section-head, .admin-head, .chips, .radio-row, .socials, .cart-actions, .lunch-ctas, .visit-cta, .hero-cta, .form-inline { flex-wrap: wrap; } .ticket-meta, .ticket-address, .ticket-history li, .ticket-lines td, .order-table td, .cart-line-name, .dish-name, .dish-desc, .live-row > *, .log li, .convo .msg, .convo .tool { min-width: 0; overflow-wrap: anywhere; } /* Numbers and prices should never be the thing that breaks. */ .ticket-lines .num, .order-table .num, .cart-line-price, .dish-price, .hbar-v { white-space: nowrap; } /* Very long free text (a rambling contact message) collapses to a preview with an expand button, so one guest cannot stretch the card down the page. Colours come from the surrounding card, so this works on both the dark site and the light panel. */ .longtext { min-width: 0; overflow-wrap: anywhere; } .longtext > summary { cursor: pointer; list-style: none; display: block; } .longtext > summary::-webkit-details-marker { display: none; } .longtext-peek { display: block; white-space: pre-wrap; overflow-wrap: anywhere; } .longtext-cue { display: inline-block; margin-top: .5rem; padding: .2rem .7rem; border: 1px solid currentColor; border-radius: 999px; font-size: .68rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; opacity: .75; } .longtext > summary:hover .longtext-cue { opacity: 1; } .longtext-cue.is-open, .longtext[open] .longtext-peek, .longtext[open] .longtext-cue { display: none; } .longtext[open] .longtext-cue.is-open { display: inline-block; } .longtext > p { margin: 0 0 .5rem; white-space: pre-wrap; overflow-wrap: anywhere; } /* Guest notes: short ones stay open, long ones collapse behind a toggle so one rambling comment cannot stretch a ticket. */ details.ticket-notes { margin: .5rem 0; padding: .4rem .6rem; border-radius: 6px; background: #fff8e6; color: #6b4a0e; } details.ticket-notes > summary { cursor: pointer; font-size: .78rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; list-style: revert; } details.ticket-notes > summary::marker { color: #b8901f; } details.ticket-notes > p { margin: .4rem 0 0; font-style: italic; overflow-wrap: anywhere; } details.ticket-notes[open] > summary { margin-bottom: .1rem; } /* Narrow screens: shrink the furniture instead of overflowing it. */ @media (max-width: 420px) { .ticket { padding: .8rem .9rem; font-size: .85rem; } .ticket header strong { font-size: 1rem; } .ticket-meta .big { font-size: 1.15rem; } .badge { font-size: .6rem; letter-spacing: .08em; } .admin-main { padding-left: .9rem; padding-right: .9rem; } .stat { padding: .7rem .8rem; } .admin-main .stat-n { font-size: 1.25rem; } } /* The panel's tab strip and the kitchen board scroll rather than stretch. */ .admin-nav { scrollbar-width: thin; } .kitchen-grid { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); } /* ====================================================================== Demo banner The site is a showcase, not the restaurant's own. The strip lives inside the sticky header so it is on screen wherever the page is scrolled to, and it cannot be dismissed: a visitor should never have to wonder. ====================================================================== */ .demo-banner { background: var(--red); color: #fff; font-size: .78rem; line-height: 1.45; } .demo-banner-inner { display: flex; align-items: baseline; gap: .6rem 1rem; flex-wrap: wrap; padding: .4rem 0; } .demo-badge { flex: none; padding: .2rem .5rem .12rem; border: 1px solid rgba(255,255,255,.7); border-radius: 3px; font-size: .62rem; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; } .demo-text { margin: 0; flex: 1 1 20rem; min-width: 0; } .demo-more { flex: none; } .demo-more > summary { cursor: pointer; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; list-style: none; } .demo-more > summary::-webkit-details-marker { display: none; } .demo-more > summary::after { content: " ▾"; } .demo-more[open] > summary::after { content: " ▴"; } .demo-detail { flex-basis: 100%; padding: .2rem 0 .6rem; max-width: 60rem; } .demo-detail p { margin: 0 0 .4rem; } .demo-detail a { color: #fff; text-decoration: underline; } .demo-short { display: none; margin: 0; flex: 1 1 12rem; min-width: 0; } /* On a phone the header is sticky and every line of it costs screen. The short sentence still says the one thing that matters; the full text is one tap away in the same expander. */ @media (max-width: 720px) { .demo-banner { font-size: .72rem; } .demo-banner-inner { gap: .35rem .6rem; padding: .3rem 0; } .demo-text { display: none; } .demo-short { display: block; } .demo-badge { font-size: .56rem; letter-spacing: .12em; padding: .16rem .4rem .1rem; } } /* The panel and the kitchen board are staff screens on a light theme; the strip would only be in the way there. */ .page-admin .demo-banner, .page-kitchen .demo-banner { display: none; } /* ====================================================================== Accounts: sign in, sign up, two-factor, the account page ====================================================================== */ .nav-account { display: inline-flex; align-items: center; gap: .4rem; } .auth-section { padding-top: clamp(2.5rem, 6vw, 4.5rem); } .auth-wrap { width: min(var(--wrap), 100% - 2.5rem); margin-inline: auto; display: grid; gap: 1.5rem; grid-template-columns: minmax(0, 32rem) minmax(0, 22rem); justify-content: center; align-items: start; } .auth-wrap-narrow { grid-template-columns: minmax(0, 32rem); } @media (max-width: 860px) { .auth-wrap { grid-template-columns: minmax(0, 32rem); } .auth-aside { display: none; } } .auth-card .h2 { margin-bottom: .5rem; } .auth-card .form { margin-top: 1.4rem; } .auth-alt { margin: 1.4rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line); font-size: .92rem; color: var(--ink-3); } .auth-actions { display: flex; gap: .8rem; flex-wrap: wrap; align-items: center; } .auth-details { margin-top: 1.2rem; border-top: 1px solid var(--line); padding-top: 1rem; } .auth-details > summary { cursor: pointer; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--gold); } .auth-details .form { margin-top: .8rem; } .check { display: flex; gap: .7rem; align-items: flex-start; font-size: .92rem; color: var(--ink-2); } .check input { width: 20px; height: 20px; flex: none; accent-color: var(--gold); margin-top: .1rem; } .alert-warn { border-color: rgba(133,102,42,.45); background: var(--gold-dim); color: var(--gold-2); } .rule { border: 0; border-top: 1px solid var(--line); margin: 1.2rem 0; } /* A one-time code is read digit by digit, so give it room and spacing. */ .code-input { font-family: ui-monospace, Menlo, monospace; font-size: 1.4rem !important; letter-spacing: .35em; text-align: center; } .two-fa-state { display: inline-flex; align-items: center; gap: .5rem; margin: 0 0 .8rem; font-size: .78rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; } .two-fa-state.is-on { color: var(--green); } .two-fa-state.is-off { color: var(--gold); } .two-fa-steps { margin: 1.5rem 0 0; padding-left: 1.3rem; display: grid; gap: 1.6rem; } .two-fa-steps > li::marker { color: var(--gold); font-weight: 600; } .two-fa-steps p { margin: 0 0 .6rem; } /* The QR is drawn on white whatever the theme: readers want the contrast. */ .qr-wrap { display: inline-block; padding: .5rem; background: #fff; border-radius: var(--radius); line-height: 0; } .qr-code { width: min(232px, 60vw); height: auto; color: #000; } .secret-key { margin: 0; } .secret-key code { display: inline-block; padding: .55rem .8rem; background: var(--paper-2); border: 1px solid var(--line-strong); border-radius: var(--radius); font-size: 1rem; letter-spacing: .12em; word-break: break-all; } .recovery-codes { list-style: none; margin: 1rem 0 1.4rem; padding: 1rem; display: grid; gap: .4rem; grid-template-columns: repeat(auto-fill, minmax(9.5rem, 1fr)); background: var(--paper-2); border: 1px solid var(--line-strong); border-radius: var(--radius); } .recovery-codes code { font-size: 1.02rem; letter-spacing: .08em; color: var(--ink); } .account-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; margin-bottom: 1.5rem; } .account-head .h2 { margin-bottom: .2rem; } .account-nudge { display: flex; align-items: center; justify-content: space-between; gap: 1rem; flex-wrap: wrap; } .account-nudge p { margin: 0; } .account-grid { display: grid; gap: 1.2rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 19rem), 1fr)); align-items: start; } .account-list { margin-top: 2.5rem; } .account-list .h3 { margin-bottom: 1rem; } .account-table { width: 100%; border-collapse: collapse; font-size: .92rem; } .account-table th, .account-table td { padding: .7rem .9rem; text-align: left; border-bottom: 1px solid var(--line); } .account-table th { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; } .account-table .num { text-align: right; white-space: nowrap; } .account-table tr:last-child td { border-bottom: 0; } /* ====================================================================== Panel security ====================================================================== */ .admin-login { min-height: 70vh; display: grid; place-items: center; padding: 3rem 1.25rem; } .admin-login-card { width: min(24rem, 100%); background: #fff; border: 1px solid rgba(0,0,0,.08); border-radius: 10px; padding: 2rem 1.8rem; color: #22201b; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.35); } .admin-login-card img { margin: 0 auto 1rem; } .admin-login-card .form { margin: 1.4rem 0 1rem; text-align: left; } .admin-login-card .field label { color: #8a8375; } .admin-login-card input { width: 100%; background: #faf8f3; border: 1px solid rgba(0,0,0,.15); color: #22201b; border-radius: 6px; padding: .6rem .8rem; font-family: var(--sans); font-size: 1rem; } .admin-login-card input:focus { outline: none; border-color: #c98b3e; box-shadow: 0 0 0 3px rgba(201,139,62,.2); } .admin-login-card .btn { width: 100%; } .admin-login-card .muted { color: #8a8375; } .admin-login-card .alert-err { background: #fdecec; border-color: #e0a3a3; color: #8a2b2b; text-align: left; } .admin-login-card .alert-ok { background: #e6f2ea; border-color: #9fcdb0; color: #1f5a37; text-align: left; } .admin-signout { margin-top: auto; padding: 1rem 1.1rem; } .admin-main .qr-light { border: 1px solid rgba(0,0,0,.1); margin: .6rem 0; } .admin-main .two-fa-state.is-on { color: #1f7a45; } .admin-main .two-fa-state.is-off { color: #a8762e; } .admin-main .secret-key code, .admin-main code { background: #faf8f3; border-color: rgba(0,0,0,.12); color: #22201b; } .admin-main .rule { border-top-color: rgba(0,0,0,.08); } .sec-list { list-style: none; margin: 0 0 1rem; padding: 0; display: grid; gap: .5rem; font-size: .92rem; } .sec-list li { padding-left: 1.5rem; position: relative; } .sec-list li::before { position: absolute; left: 0; font-weight: 700; } .sec-list .is-ok::before { content: "✓"; color: #1f7a45; } .sec-list .is-warn::before { content: "!"; color: #a8762e; } /* Recovery codes are meant to be printed and put somewhere safe. */ @media print { .demo-banner, .site-header, .site-footer, .auth-alt, .auth-actions, .chat-launcher, .chat-panel { display: none !important; } .recovery-codes { border: 1px solid #000; background: #fff; } .recovery-codes code, .auth-card, .auth-card * { color: #000 !important; } } /* ---- confirming an email address or a phone number */ .masked { letter-spacing: .04em; white-space: nowrap; } .resend-form { display: flex; align-items: center; gap: .8rem; margin-top: 1rem; } .resend-form button[disabled] { opacity: .5; cursor: not-allowed; } .contact-state { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; } .contact-state li { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; } .contact-what { font-size: .68rem; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-3); flex-basis: 100%; } .contact-value { overflow-wrap: anywhere; } .pill-ok, .pill-warn { padding: .2rem .55rem .12rem; border-radius: 999px; border: 1px solid; font-size: .66rem; letter-spacing: .12em; text-transform: uppercase; font-weight: 600; white-space: nowrap; } .pill-ok { color: var(--green); border-color: rgba(46,125,85,.5); } .pill-warn { color: var(--gold); border-color: rgba(133,102,42,.5); } .radio-choice { padding: .45rem 0; } .radio-choice input { accent-color: var(--gold); } .radio-choice.is-blocked { opacity: .55; } /* ==== Panel dashboard ==================================================== A back-office that reads like an instrument panel rather than a form. The brand stays - warm paper, gold - because the panel is part of the same product as the site; what changes is structure: one idea per card, the number before its label, and charts that carry a shape instead of a table of figures. All of it server-rendered, so it survives JavaScript being off. ------------------------------------------------------------------------ */ /* The palette itself lives in tokens.css, scoped to .page-admin/.page-kitchen: it is a set of tokens, and tokens have one home. What is here is only how the charts use it. */ .admin-sub { margin: .2rem 0 0; font-size: .84rem; color: var(--muted); } /* --- the four numbers worth glancing at --- */ .kpi-grid { display: grid; gap: 1rem; margin-bottom: 1.1rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); } .kpi { display: flex; align-items: center; gap: .85rem; background: var(--panel-card); border: 1px solid var(--line); border-radius: 14px; padding: 1rem 1.1rem; box-shadow: var(--card-shadow); } .kpi-ico { flex: 0 0 auto; display: grid; place-items: center; width: 42px; height: 42px; border-radius: 12px; } .kpi-ico svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; } .i-cash { background: #f6edda; color: var(--c-1-ink); } .i-orders { background: #e2f0ec; color: var(--c-4-ink); } .i-avg { background: #f0e9ef; color: var(--c-5); } .i-guests { background: #e6eef7; color: var(--c-2); } .kpi-body { display: flex; flex-direction: column; min-width: 0; } .kpi-body b { font-size: 1.5rem; line-height: 1.15; font-weight: 700; letter-spacing: -.01em; } .kpi-body small { font-size: .76rem; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-top: .15rem; } /* --- cards --- */ .dash-row { display: grid; gap: 1rem; margin-bottom: 1.1rem; grid-template-columns: 1fr; } @media (min-width: 900px) { .dash-row { grid-template-columns: 2fr 1fr; } } .card { background: var(--panel-card); border: 1px solid var(--line); border-radius: 14px; padding: 1.1rem 1.2rem 1.2rem; box-shadow: var(--card-shadow); } /* Wrap rather than squeeze: the heatmap's note is a sentence, and without this it crushed the heading into one letter per line on a phone. */ .card-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: .75rem; margin-bottom: .9rem; } .card-head .h3 { margin: 0; font-size: 1rem; } .card-note { margin-left: auto; font-size: .78rem; color: var(--muted); white-space: nowrap; } /* --- the revenue line --- */ .linechart { width: 100%; height: auto; display: block; overflow: visible; } .linechart .grid { stroke: var(--line-soft); stroke-width: 1; } .linechart .line { fill: none; stroke: var(--c-1-ink); stroke-width: 2.5; stroke-linecap: round; stroke-linejoin: round; } .linechart .tick { font-size: 9px; fill: var(--muted); } /* --- donuts --- */ .donut-wrap { position: relative; display: grid; place-items: center; margin: .2rem 0 .9rem; } .donut { width: 148px; height: 148px; transform: rotate(-90deg); } .donut-track, .donut-seg { fill: none; stroke-width: 3.4; } .donut-track { stroke: var(--line-soft); } .donut-seg { stroke-linecap: butt; } .donut-mid { position: absolute; inset: 0; display: grid; place-content: center; text-align: center; gap: .1rem; } .donut-mid b { font-size: 1.6rem; font-weight: 700; line-height: 1; } .donut-mid small { font-size: .72rem; color: var(--muted); text-transform: uppercase; letter-spacing: .06em; } .legend { list-style: none; margin: 0; padding: 0; display: grid; gap: .45rem; } .legend li { display: flex; align-items: center; gap: .55rem; font-size: .86rem; } .legend i { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; } .legend span { color: var(--ink-2); } .legend b { margin-left: auto; font-variant-numeric: tabular-nums; } .legend small { color: var(--muted); font-variant-numeric: tabular-nums; min-width: 2.6em; text-align: right; } /* The old flat cards keep working; they just sit on the new surface. */ .admin-card { background: var(--panel-card); border-radius: 14px; box-shadow: var(--card-shadow); } .chip-cta { margin-left: .35rem; } /* --- the service heatmap -------------------------------------------------- --heat-0 is only 1.12:1 against the card it sits on, so the grid is drawn by the gaps: every cell strokes itself in the card colour. Which means the heatmap must sit on a white card and never on --panel-bg. print-color-adjust because without it the whole thing prints as an empty grid, and the bar behind the bar prints its dashboard. */ /* min-width, so a narrow screen scrolls the grid inside .heat-wrap instead of scaling it down until the weekday labels are four pixels tall. Dropping columns is not an option: a heatmap missing its evening is not a smaller heatmap, it is a different claim. */ .heat { width: 100%; height: auto; display: block; print-color-adjust: exact; -webkit-print-color-adjust: exact; } /* Only the weekday grid needs a floor under it: twenty-four columns stop being readable long before a phone stops being wide. The 2x2 matrix is a 360-wide viewBox with four figures in it and fits anywhere, so a blanket min-width on .heat made the whole panel scroll sideways at 390px for the sake of a chart that did not need it. */ .heat-wrap .heat { min-width: 480px; } .heat-wrap { overflow-x: auto; } .heat-c { fill: var(--heat-0); stroke: var(--panel-card); stroke-width: 1.5; } .heat-c.lvl-1 { fill: var(--heat-1); } .heat-c.lvl-2 { fill: var(--heat-2); } .heat-c.lvl-3 { fill: var(--heat-3); } .heat-c.lvl-4 { fill: var(--heat-4); } .heat-c.lvl-5 { fill: var(--heat-5); } /* A hatch, never --heat-0: a quiet Monday must not read as a closed Monday. */ .heat-c.is-shut { fill: url(#shut); } .heat-n, .heat-sub { font-size: 11px; font-weight: 600; fill: var(--ink); font-variant-numeric: tabular-nums; } .heat-sub { font-size: 9px; font-weight: 500; } /* Levels 0-3 take ink, 4-5 take white. 11px/600 is deliberate: if a bucket boundary ever shifts, level 4 in ink still clears the 3:1 large-text floor rather than falling off a cliff. */ .heat-c.lvl-4 + .heat-n, .heat-c.lvl-5 + .heat-n, .heat-c.lvl-4 ~ .heat-sub, .heat-c.lvl-5 ~ .heat-sub { fill: #fff; } .heat-row, .heat-col { font-size: 10px; fill: var(--muted); } .heat-legend { display: flex; align-items: center; gap: .4rem; margin: .7rem 0 0; font-size: .72rem; color: var(--muted); } .heat-legend i { width: 14px; height: 14px; border-radius: 3px; display: block; print-color-adjust: exact; -webkit-print-color-adjust: exact; } /* Below 700px the numerals stop fitting. The columns stay: a heatmap missing its evening is not a smaller heatmap, it is a different claim. The tooltips survive, and a long press still reaches them. */ @media (max-width: 700px) { .heat-wrap .heat-n, .heat-wrap .heat-sub { display: none; } } /* The covers behind the revenue line: context, not comparison. Two lines on two scales is the classic way to make a chart lie. */ .cover-bar { fill: var(--c-7); opacity: .55; } /* The ticket histogram reuses the hour chart's bars, so it inherits their responsive behaviour and their printing for free. */ .bar span { print-color-adjust: exact; -webkit-print-color-adjust: exact; } /* A grid of coloured rects is nothing to a screen reader; the real table sits behind it, out of sight and in the accessibility tree. */ .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* --- one class per series colour ------------------------------------------ Not an inline style, and not by choice: html/template reads a style="" attribute as CSS, and its sanitiser has never heard of var(), so an interpolated "var(--c-1)" arrives in the browser as the literal string ZgotmplZ. A class is the safe carrier, and one class paints a legend square (background), a donut arc (stroke) and a bar (background) at once. Scoped under .admin-main so it outranks .hbar-t i and .bar span, which are more specific than a bare class. */ .admin-main .ser-1, .donut-seg.ser-1 { background: var(--c-1); stroke: var(--c-1); } .admin-main .ser-2, .donut-seg.ser-2 { background: var(--c-2); stroke: var(--c-2); } .admin-main .ser-3, .donut-seg.ser-3 { background: var(--c-3); stroke: var(--c-3); } .admin-main .ser-4, .donut-seg.ser-4 { background: var(--c-4); stroke: var(--c-4); } .admin-main .ser-5, .donut-seg.ser-5 { background: var(--c-5); stroke: var(--c-5); } .admin-main .ser-6, .donut-seg.ser-6 { background: var(--c-6); stroke: var(--c-6); } .admin-main .ser-7, .donut-seg.ser-7 { background: var(--c-7); stroke: var(--c-7); } /* The ticket histogram walks the heatmap's ramp, so the scale reads as a language the page speaks twice rather than a one-off. */ .admin-main .ramp-0 { background: var(--heat-0); } .admin-main .ramp-1 { background: var(--heat-1); } .admin-main .ramp-2 { background: var(--heat-2); } .admin-main .ramp-3 { background: var(--heat-3); } .admin-main .ramp-4 { background: var(--heat-4); } .admin-main .ramp-5 { background: var(--heat-5); } /* --heat-0 is 1.12:1 against the card, so the palest bar needs an edge. */ .admin-main .ramp-0 { box-shadow: inset 0 0 0 1px var(--line); } /* Six bands need more room than eleven hours did, and the donut beside this card is taller than 160px: without this the ticket histogram sat in the top third of its card with a hand's width of white below it. */ .bars-tall { height: 260px; } @media (max-width: 900px) { .bars-tall { height: 200px; } }