/* Fonts are linked from each page's , not @import-ed here: an * @import makes the browser fetch site.css, parse it, and only then * discover fonts.css — a serial round trip in front of first paint. * assets/fonts/fonts.css is generated by tools/fetch_fonts.py. */ /* ========================================================================== amoni — Kimolos -------------------------------------------------------------------------- Ground is chalk, not cream: Kimolos gives its name to kimolia, and the island's white rock has been quarried since antiquity. The photography is cool plaster under hard light, so a warm cream ground would fight it. Terracotta is sampled from the logo and reused exactly as the printed menu uses it — for the Greek and for prices. Measured contrast against --chalk (see tools/check.py --only contrast): --ink 12.61:1 --ink-soft 5.31:1 --terracotta-deep 5.61:1 white on it, 6.47:1 --terracotta 4.34:1 large text and UI only ========================================================================== */ :root { --chalk: #EFEFEA; --chalk-deep: #E4E3DC; --chalk-line: #D8D6CC; --ink: #1F2B2E; --ink-soft: #56646A; --terracotta: #B05620; --terracotta-deep: #98470F; --display: "Cardo", "Times New Roman", serif; --sans: "Commissioner", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; --step--2: 0.75rem; --step--1: 0.8125rem; --step-0: 1.0625rem; --step-1: clamp(1.125rem, 1.05rem + 0.35vw, 1.3125rem); --step-2: clamp(1.375rem, 1.2rem + 0.8vw, 1.875rem); --step-3: clamp(1.875rem, 1.5rem + 1.8vw, 3rem); --step-4: clamp(2.5rem, 1.5rem + 4.4vw, 5rem); --sp-2xs: 0.25rem; --sp-xs: 0.5rem; --sp-s: 0.875rem; --sp-m: 1.5rem; --sp-l: 2.25rem; --sp-xl: 3.5rem; --sp-2xl: 5rem; --sp-3xl: clamp(4.5rem, 3rem + 6vw, 8rem); --measure: 34rem; --wrap: 76rem; --edge: clamp(1.25rem, 5vw, 4rem); } /* --------------------------------------------------------------- base ---- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; background: var(--chalk); color: var(--ink); font: 400 var(--step-0)/1.65 var(--sans); font-synthesis-weight: none; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; } h1, h2, h3 { margin: 0; font-family: var(--display); font-weight: 400; line-height: 1.1; } p { margin: 0; } img { display: block; max-width: 100%; height: auto; } /* Zero-specificity reset. Using :where() means a component rule never has to restate `margin: 0`, which is what silently cancels the .stack-* utilities when both land on the same element at equal specificity. */ :where(ul, ol, dl, dd, figure) { margin: 0; padding: 0; } :where(ul[class], ol[class]) { list-style: none; } a { color: inherit; } :focus-visible { outline: 2px solid var(--terracotta-deep); outline-offset: 3px; border-radius: 2px; } .skip-link { position: absolute; left: var(--sp-xs); top: -4rem; z-index: 100; padding: var(--sp-xs) var(--sp-m); background: var(--chalk); color: var(--ink); font-size: var(--step--1); text-decoration: none; transition: top 0.15s ease; } .skip-link:focus { top: var(--sp-xs); } .wrap { width: min(100% - var(--edge) * 2, var(--wrap)); margin-inline: auto; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* ------------------------------------------------------------- header ---- */ .site-header { position: absolute; inset: 0 0 auto; z-index: 20; padding-block: var(--sp-m); color: var(--chalk); } .site-header::before { content: ""; position: absolute; inset: 0 0 -3rem; background: linear-gradient(to bottom, rgb(20 28 30 / 0.5), transparent); pointer-events: none; } .header-bar { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--sp-m); } .brand { display: inline-flex; } /* 4.25rem tall renders at 99px wide, so 198px on a 2x screen — comfortably inside the 299px source, no softening. */ .brand img { width: auto; height: 4.25rem; } .nav-list { display: flex; align-items: center; gap: var(--sp-m); font-size: var(--step--1); letter-spacing: 0.04em; } .nav-list a { text-decoration: none; padding-block: var(--sp-2xs); } .nav-list a:hover { text-decoration: underline; text-underline-offset: 0.35em; } .lang-switch { display: inline-flex; gap: var(--sp-2xs); align-items: baseline; font-size: var(--step--2); letter-spacing: 0.12em; text-transform: uppercase; } .lang-switch [aria-current] { font-weight: 600; } .lang-switch span { opacity: 0.5; } /* The navigation is always visible. It used to be a
disclosure that was display:none outside the mobile media query — which silently hid the whole menu on desktop. Four short links do not need a toggle. */ .site-nav { position: relative; } /* --------------------------------------------------------------- hero ---- */ .hero { position: relative; display: grid; align-items: end; min-height: min(94svh, 60rem); padding-block: 9rem var(--sp-2xl); color: var(--chalk); isolation: isolate; overflow: hidden; } .hero-media { position: absolute; inset: 0; z-index: -2; } .hero-media img { width: 100%; height: 100%; object-fit: cover; } .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient( to top, rgb(16 24 27 / 0.82) 0%, rgb(16 24 27 / 0.45) 38%, rgb(16 24 27 / 0.1) 70% ); } .hero-body { position: relative; max-width: 44rem; } .hero h1 { font-size: var(--step-4); letter-spacing: -0.015em; text-wrap: balance; } .hero-lede { margin-top: var(--sp-m); max-width: var(--measure); font-size: var(--step-1); line-height: 1.55; color: rgb(239 239 234 / 0.88); } .hero-facts { display: flex; flex-wrap: wrap; gap: var(--sp-xs) var(--sp-m); margin: var(--sp-l) 0 0; padding: var(--sp-m) 0 0; border-top: 1px solid rgb(239 239 234 / 0.28); font-size: var(--step--1); letter-spacing: 0.02em; } /* The list items stay in normal inline flow. Making them flex containers would put a gap between Kalamitsi and the comma that follows it. */ .hero-facts li + li::before { content: ""; display: inline-block; width: 1px; height: 0.9em; margin-right: var(--sp-m); vertical-align: -0.05em; background: rgb(239 239 234 / 0.35); } .hero-facts b { font-weight: 600; } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-s) var(--sp-m); align-items: center; margin-top: var(--sp-l); } /* ------------------------------------------------------------ buttons ---- */ .btn { display: inline-flex; align-items: center; gap: var(--sp-xs); padding: 0.85em 1.7em; border: 1px solid transparent; background: var(--terracotta-deep); color: #fff; font: 600 var(--step--1)/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; text-decoration: none; transition: background 0.18s ease, color 0.18s ease; } .btn:hover { background: var(--ink); } .btn-ghost { background: transparent; border-color: currentColor; color: inherit; } .btn-ghost:hover { background: var(--chalk); color: var(--ink); } .link-more { display: inline-flex; align-items: center; gap: var(--sp-xs); color: var(--terracotta-deep); font-size: var(--step--1); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 0.2em; } .link-more:hover { color: var(--ink); } /* ----------------------------------------------------------- sections ---- */ .section { padding-block: var(--sp-3xl); } .section-tint { background: var(--chalk-deep); } .section-grid { display: grid; gap: var(--sp-l); } .rail-label { margin: 0; font-family: var(--sans); font-size: var(--step--2); font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--terracotta-deep); } .section h2 { font-size: var(--step-3); letter-spacing: -0.01em; text-wrap: balance; } .prose { max-width: var(--measure); } .prose p + p { margin-top: var(--sp-m); } .prose p { color: var(--ink-soft); } .prose .lead { color: var(--ink); font-size: var(--step-1); line-height: 1.55; } .stack-m > * + * { margin-top: var(--sp-m); } .stack-l > * + * { margin-top: var(--sp-l); } /* ------------------------------------------------------------ intro ------ */ .intro-figure { position: relative; } .intro-figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .figure-note { margin-top: var(--sp-xs); font-size: var(--step--2); color: var(--ink-soft); letter-spacing: 0.02em; } /* -------------------------------------------------------------- chef ----- */ .chef-credits { display: flex; flex-wrap: wrap; gap: var(--sp-xs) var(--sp-m); padding: var(--sp-m) 0 0; border-top: 1px solid var(--chalk-line); font-size: var(--step--1); color: var(--ink-soft); } .chef-credits b { color: var(--ink); font-weight: 600; } /* -------------------------------------------------------------- taste ---- */ .taste-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-l) var(--sp-m); } .taste-card picture { display: block; } .taste-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; margin-bottom: var(--sp-s); } .taste-card-name { font-size: var(--step-0); line-height: 1.4; text-wrap: pretty; } /* Same convention as the printed menu: the Greek sits in terracotta. */ .lang-en .taste-card-alt { margin-top: var(--sp-2xs); font-family: var(--display); font-size: var(--step--1); line-height: 1.4; color: var(--terracotta-deep); } .lang-el .taste-card-name { font-family: var(--display); font-size: var(--step-1); } .lang-el .taste-card-alt { margin-top: var(--sp-2xs); font-size: var(--step--1); line-height: 1.4; color: var(--ink-soft); } .taste-card .taste-price { margin-top: var(--sp-xs); } .taste-price { font-weight: 600; font-size: var(--step--1); color: var(--terracotta-deep); white-space: nowrap; font-variant-numeric: tabular-nums; } /* ------------------------------------------------------------ gallery ---- */ .gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-xs); } .gallery-grid a { display: block; overflow: hidden; cursor: zoom-in; } .gallery-grid img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; transition: transform 0.5s cubic-bezier(0.2, 0.7, 0.3, 1); } .gallery-grid a:hover img { transform: scale(1.03); } /* --------------------------------------------------------------- find ---- */ .find-list { display: grid; gap: var(--sp-m); } .find-list dt { font-size: var(--step--2); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--terracotta-deep); } .find-list dd { margin: var(--sp-2xs) 0 0; } .find-list a { color: var(--ink); } .note { padding: var(--sp-m); border-left: 2px solid var(--terracotta); background: var(--chalk-deep); font-size: var(--step--1); color: var(--ink-soft); } .section-tint .note { background: var(--chalk); } .note strong { color: var(--ink); font-weight: 600; } /* ------------------------------------------------------------ reserve ---- */ .reserve { position: relative; overflow: hidden; background: var(--terracotta-deep); color: var(--chalk); padding-block: var(--sp-3xl); text-align: center; } /* The reed pergola casts a striped shadow across every daytime photograph of this terrace. It is the one decorative device on the site — used on the reserve band, nowhere else. */ .reserve .pergola { position: absolute; inset: 0; pointer-events: none; background: repeating-linear-gradient( 101deg, rgb(0 0 0 / 0.07) 0 18px, rgb(0 0 0 / 0) 18px 62px ); -webkit-mask-image: linear-gradient(to bottom, #000, transparent 72%); mask-image: linear-gradient(to bottom, #000, transparent 72%); } .reserve-body { position: relative; max-width: 40rem; margin-inline: auto; } .reserve h2 { font-size: var(--step-3); } .reserve p { margin-top: var(--sp-m); color: rgb(239 239 234 / 0.85); } .reserve .hero-actions { justify-content: center; } .reserve .btn { background: var(--chalk); color: var(--ink); } .reserve .btn:hover { background: var(--ink); color: var(--chalk); } .reserve .btn-ghost { background: transparent; color: var(--chalk); } .reserve .btn-ghost:hover { background: var(--chalk); color: var(--ink); } /* ------------------------------------------------------------- footer ---- */ .site-footer { padding-block: var(--sp-xl); background: var(--ink); color: rgb(239 239 234 / 0.75); font-size: var(--step--1); } .footer-grid { display: grid; gap: var(--sp-l); } .site-footer a { color: var(--chalk); } .site-footer h2 { font-size: var(--step--2); font-family: var(--sans); font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: rgb(239 239 234 / 0.55); margin-bottom: var(--sp-xs); } .footer-mark { height: 3.75rem; width: auto; } .footer-note { margin-top: var(--sp-l); padding-top: var(--sp-m); border-top: 1px solid rgb(239 239 234 / 0.18); font-size: var(--step--2); color: rgb(239 239 234 / 0.55); } .footer-list { display: grid; gap: var(--sp-2xs); } /* --------------------------------------------------------- book bar ------ */ /* Fixed on phones only. Most of this traffic is someone standing outside at half past six deciding where to eat. */ .book-bar { position: fixed; inset: auto 0 0; z-index: 30; display: none; border-top: 1px solid rgb(0 0 0 / 0.15); background: var(--terracotta-deep); transition: transform 0.25s ease, visibility 0s; } /* While a reserve button is on screen the bar only repeats it — slide it away. visibility waits for the transform so the slide stays visible, and removes the offscreen links from focus order and screen readers. */ .book-bar.is-suppressed { transform: translateY(100%); visibility: hidden; transition: transform 0.25s ease, visibility 0s 0.25s; } .book-bar a { flex: 1; padding: var(--sp-s); color: #fff; font-size: var(--step--1); font-weight: 600; letter-spacing: 0.06em; text-align: center; text-decoration: none; text-transform: uppercase; } .book-bar a + a { flex: 0 0 auto; border-left: 1px solid rgb(255 255 255 / 0.25); } /* ---------------------------------------------------------- menu page ---- */ .page-head { position: relative; display: grid; align-items: end; min-height: 26rem; padding-block: 9rem var(--sp-xl); color: var(--chalk); isolation: isolate; overflow: hidden; } .page-head .hero-media { z-index: -2; } .page-head::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgb(16 24 27 / 0.78), rgb(16 24 27 / 0.25)); } .page-head h1 { position: relative; font-size: var(--step-3); } .page-head p { position: relative; margin-top: var(--sp-s); color: rgb(239 239 234 / 0.85); } .menu-section + .menu-section { margin-top: var(--sp-2xl); } .menu-section h2 { padding-bottom: var(--sp-s); border-bottom: 1px solid var(--terracotta); font-size: var(--step-2); } /* The service headings — one level up from the dish groups they contain. Scoped by id: the wine page shares .menu-section and must keep its own h2 styling. */ #lunch, #dinner { margin-top: var(--sp-2xl); font-size: var(--step-3); } .service-time { font-family: var(--sans); font-size: var(--step--1); color: var(--ink-soft); white-space: nowrap; } .menu-jump { display: flex; gap: var(--sp-m); } .menu-jump a { color: inherit; text-decoration: underline; text-decoration-color: rgb(239 239 234 / 0.55); text-underline-offset: 0.25em; } .menu-jump a:hover { text-decoration-color: currentColor; } .dish { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: var(--sp-xs) var(--sp-m); padding-block: var(--sp-m); border-bottom: 1px solid var(--chalk-line); } .dish-primary { font-size: var(--step-1); line-height: 1.35; } .dish-secondary { margin-top: var(--sp-2xs); font-size: var(--step--1); line-height: 1.5; color: var(--ink-soft); } /* The printed menu sets the Greek in terracotta. Carried over verbatim. */ .lang-en .dish-secondary { color: var(--terracotta-deep); font-family: var(--display); font-size: var(--step-0); } .lang-el .dish-primary { font-family: var(--display); } .dish-meta { display: flex; flex-direction: column; align-items: flex-end; gap: var(--sp-xs); } .dish-price { font-weight: 600; color: var(--terracotta-deep); white-space: nowrap; font-variant-numeric: tabular-nums; } .badges { display: flex; gap: var(--sp-2xs); } .badge { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; border: 1px solid var(--terracotta); border-radius: 50%; font-size: var(--step--2); font-weight: 600; line-height: 1; color: var(--terracotta-deep); cursor: help; text-decoration: none; } /* ---------------------------------------------------------- wine list ---- */ /* Two price columns, glass then bottle. The column heads are decorative repetition for sighted readers; each price carries its own label for everyone else. */ .wine-heads { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem; gap: var(--sp-xs) var(--sp-s); margin-top: var(--sp-s); font-size: var(--step--2); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); } .wine-heads span { grid-column: auto; text-align: right; } .wine-heads span:first-child { grid-column: 2; } .wine { display: grid; grid-template-columns: minmax(0, 1fr) 4.5rem 4.5rem; gap: var(--sp-xs) var(--sp-s); align-items: baseline; padding-block: var(--sp-s); border-bottom: 1px solid var(--chalk-line); } .wine-name { font-size: var(--step-0); line-height: 1.35; } .lang-el .wine-name { font-family: var(--display); font-size: var(--step-1); } /* The other language's name, shown only when it actually differs. */ .wine-alt { margin-top: 0.1em; font-size: var(--step--1); line-height: 1.4; color: var(--terracotta-deep); } .lang-el .wine-alt { font-family: var(--sans); color: var(--ink-soft); } .wine-grapes { margin-top: 0.15em; font-size: var(--step--1); line-height: 1.4; color: var(--ink-soft); } .wine-price { text-align: right; font-weight: 600; font-size: var(--step--1); color: var(--terracotta-deep); white-space: nowrap; font-variant-numeric: tabular-nums; } .wine-glass { color: var(--ink-soft); } @media (max-width: 33em) { .wine, .wine-heads { grid-template-columns: minmax(0, 1fr) 3.6rem 3.6rem; } } .legend { display: flex; flex-wrap: wrap; gap: var(--sp-s) var(--sp-l); margin: var(--sp-xl) 0 0; padding: var(--sp-m) 0 0; border-top: 1px solid var(--chalk-line); font-size: var(--step--1); color: var(--ink-soft); } .legend li { display: flex; align-items: center; gap: var(--sp-xs); } /* ----------------------------------------------------------- lightbox ---- */ /* Do NOT set `display` on the element itself: the UA stylesheet hides a closed with `display: none`, and any display value here would override it, leaving the lightbox covering the page. Only the open state gets a display. */ .lightbox { position: fixed; inset: 0; z-index: 60; /* The UA stylesheet sets width/height to fit-content and max-* to calc(100% - 6px - 2em). Without overriding all four, `inset: 0` cannot stretch the dialog and the backdrop tint only covers the photograph. */ width: 100%; height: 100%; max-width: none; max-height: none; margin: 0; padding: var(--edge); border: 0; background: rgb(16 24 27 / 0.94); } .lightbox[open] { display: grid; place-items: center; } .lightbox figure { display: grid; justify-items: center; } .lightbox::backdrop { background: rgb(16 24 27 / 0.94); } .lightbox img { max-width: 100%; max-height: 80svh; object-fit: contain; } .lightbox figcaption { margin-top: var(--sp-m); max-width: 40rem; color: rgb(239 239 234 / 0.8); font-size: var(--step--1); text-align: center; } .lightbox-close { position: absolute; top: var(--sp-m); right: var(--sp-m); width: 2.75rem; height: 2.75rem; border: 1px solid rgb(239 239 234 / 0.4); border-radius: 50%; background: none; color: var(--chalk); font-size: 1.25rem; line-height: 1; cursor: pointer; } .lightbox-close:hover { background: rgb(239 239 234 / 0.12); } /* --------------------------------------------------------- responsive ---- */ @media (max-width: 47.99em) { .book-bar { display: flex; } body { padding-bottom: 3.5rem; } .nav-list { gap: var(--sp-s); font-size: var(--step--2); letter-spacing: 0.02em; } /* Reserve lives in the fixed bar at the bottom on phones, and Finding us is a section further down, so both come out of the header here. */ .nav-secondary { display: none; } .hero { min-height: 42rem; } .hero-facts { flex-direction: column; } .hero-facts li + li::before { display: none; } } @media (min-width: 48em) { .taste-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--sp-xl) var(--sp-m); } .gallery-grid { grid-template-columns: repeat(3, 1fr); gap: var(--sp-s); } .find-list { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: auto repeat(3, 1fr); gap: var(--sp-xl); } } @media (min-width: 60em) { .section-grid { grid-template-columns: 11rem minmax(0, 1fr); gap: var(--sp-2xl); } .section-grid.has-figure { grid-template-columns: 11rem minmax(0, 1fr) 20rem; align-items: start; } .taste-item { grid-template-columns: 1fr auto; } .dish { grid-template-columns: minmax(0, 1fr) 9rem; } .dish-meta { flex-direction: row; align-items: center; justify-content: flex-end; gap: var(--sp-m); } } /* ------------------------------------------------------------- motion ---- */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } } /* -------------------------------------------------------------- print ---- */ @media print { .site-header, .book-bar, .reserve, .gallery, .hero-media, .lightbox { display: none; } body { background: #fff; color: #000; padding: 0; } .dish { break-inside: avoid; } }