/* ========================================================================= s'Chuchichästli — site styles Ported from "Chuchichaestli Website - Final.dc.html". Colour values, type sizes and the spacing scale are carried over unchanged. The responsive rules follow the design's own breakpoints (1010 / 820 / 520). ========================================================================= */ /* Font faces live in fonts.css, which the layout loads first. They are self-hosted, so no visitor request ever reaches a Google server. */ /* ------------------------------------------------------------ tokens ---- */ :root { /* Native widgets — the select's dropdown list, the date picker, scrollbars — are painted by the browser, not by this file. Without this they stay light and inherit only the text colour, which is how the time list ended up as cream on white in dark mode. */ color-scheme: light; --bg: #F6F1E5; --bg2: #EFE7D6; --ink: #231D15; --body: #4B4136; --muted: #93876F; --line: #E3D9C6; --line2: #D1C4AA; --feature-bg: #231D15; --feature-ink: #F6F1E5; --feature-body: #C6B9A4; --card: #FBF7EE; --field: #FFFFFF; --field-line: #DCD1BB; --vegi: #5F7043; /* The hero photo carries the nav and the headline, so it gets its own set. Light mode veils the photo in cream and prints the hero in ink; dark mode keeps the original dark veil and cream lettering. Both themes share one set of rules and only swap these. */ --heroVeil: linear-gradient(180deg, rgba(246,241,229,.74) 0%, rgba(246,241,229,.68) 22%, rgba(246,241,229,.64) 58%, rgba(246,241,229,.66) 82%); --heroInk: var(--ink); --heroBody: var(--body); --heroLink: var(--body); --heroLinkLine: rgba(75, 65, 54, .45); --heroLinkHover: var(--ink); --heroNavLink: var(--body); --heroNavMuted: var(--muted); /* A glow in the page colour, not a drop shadow: it lifts the type off the busiest part of the photo without printing a dark halo around it. */ --heroGlowSm: 0 1px 10px rgba(246, 241, 229, .92); --heroGlowLg: 0 2px 18px rgba(246, 241, 229, .88); /* Exactly one accent in the whole site, sampled from the logo. The design had lightened and per-theme variants in earlier revisions and they were removed on purpose — do not reintroduce a second one. */ --accent: #9E3844; --brand: #9E3844; --serif: 'Newsreader', Georgia, 'Times New Roman', serif; --sans: 'Hanken Grotesk', system-ui, -apple-system, 'Segoe UI', sans-serif; --hand: 'Caveat', cursive; --wrap: 1150px; --wrap-narrow: 1040px; /* Vertical rhythm. Every vertical gap on the site comes from these four — nothing hardcodes section padding, so a spacing change is a one-liner. --pageTop nav to first content, and above the footer's first row --endGap last section to the footer's top border --secGap / --secTop2 between and above sections within a page --footCols between footer rows, and the footer's own top padding */ --pageTop: 123px; --endGap: 176px; --secGap: 150px; --secTop: 130px; --secTop2: 88px; --takeTop: 72px; --footCols: 54px; --gutter: 42px; --gap: 70px; --gap4: 40px; --navH: 70px; --navGap: 28px; --heroBottom: 170px; --footGap: 56px; --footNav: 56px; --footBotTop: 52px; --footLogo: 44px; --footName: 30px; --footNavCol: 150px; --footAddrWrap: nowrap; --footC: auto auto; --footAlign1: right; --footAlign2: left; --footJustify: end; --footJustify2: start; --hoursC: max-content 1fr; --hoursJustify: start; --hHero: 76px; --hPage: 60px; --h2: 40px; --h3: 31px; --imgConcept: 360px; --imgDinner: 300px; --imgShort: 360px; --imgTall: 360px; --c4: repeat(4, 1fr); --cDay: 180px 1fr; --imgOrder: 0; } /* Dark is the default (set on in layout.php); the block above is what the toggle switches *to*. The system colour-scheme preference is deliberately not consulted — only the visitor's explicit choice, which is remembered in localStorage. The accent is identical in both themes. */ [data-theme='dark'] { color-scheme: dark; --bg: #18140F; --bg2: #201B14; --ink: #F0E6D4; --body: #C5B8A4; --muted: #948875; --line: #332C23; --line2: #42392C; --feature-bg: #241E17; --feature-ink: #F0E6D4; --feature-body: #B9AC98; --card: #201B14; --field: #241E17; --field-line: #42392C; --vegi: #AEBE8A; --heroVeil: linear-gradient(180deg, rgba(18,14,11,.86) 0%, rgba(18,14,11,.74) 22%, rgba(18,14,11,.66) 58%, rgba(18,14,11,.6) 82%); --heroInk: #F8F2E7; --heroBody: rgba(248, 242, 231, .86); --heroLink: rgba(248, 242, 231, .92); --heroLinkLine: rgba(248, 242, 231, .45); --heroLinkHover: #F8F2E7; --heroNavLink: rgba(248, 242, 231, .94); --heroNavMuted: rgba(248, 242, 231, .72); --heroGlowSm: 0 1px 12px rgba(0, 0, 0, .7); --heroGlowLg: 0 2px 24px rgba(0, 0, 0, .45); } /* --------------------------------------------------------- foundation ---- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--body); font-family: var(--sans); font-size: 16px; line-height: 1.5; -webkit-font-smoothing: antialiased; transition: background .35s ease, color .35s ease; } a { color: inherit; text-decoration: none; } a:hover { color: var(--accent); } img { max-width: 100%; } ::selection { background: var(--ink); color: var(--bg); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } .skip { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--bg); padding: 12px 20px; z-index: 100; } .skip:focus { left: 0; } .wrap { max-width: var(--wrap); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .wrap-narrow { max-width: var(--wrap-narrow); margin: 0 auto; padding-left: var(--gutter); padding-right: var(--gutter); } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* ------------------------------------------------------------ shared ---- */ .eyebrow { font-size: 14.5px; letter-spacing: .18em; text-transform: uppercase; color: var(--accent); font-weight: 700; } .eyebrow--sm { font-size: 12.5px; } .h-serif { font-family: var(--serif); font-weight: 400; color: var(--ink); letter-spacing: -.01em; } /* One rank, one rule. Every section heading that sits under a small red label with a paragraph beside or below it uses this — on the home page and on the menu page alike — so they share a size and the space underneath. --h2 is the design's 40px and steps down at the breakpoints, because a 40px German heading overflows a phone. */ .h-section { font-family: var(--serif); font-weight: 400; font-size: var(--h2); line-height: 1.1; letter-spacing: -.01em; color: var(--ink); margin: 20px 0 24px; } .btn { display: inline-block; cursor: pointer; background: var(--ink); color: var(--bg); border: none; padding: 14px 26px; font-family: inherit; font-size: 12.5px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; border-radius: 2px; transition: background .2s; } .btn:hover { background: var(--accent); color: var(--bg); } .btn:disabled { opacity: .55; cursor: default; } .btn--sm { padding: 10px 18px; font-size: 12px; text-transform: none; letter-spacing: .08em; } .btn--accent { background: var(--accent); color: #FFF8F3; transition: filter .2s; } .btn--accent:hover { background: var(--accent); color: #FFF8F3; filter: brightness(1.14); } .link-underline { font-size: 13.5px; font-weight: 500; letter-spacing: .03em; color: var(--body); border-bottom: 1px solid var(--line2); padding-bottom: 4px; transition: color .2s, border-color .2s; } .link-underline:hover { color: var(--accent); border-color: var(--accent); } .link-accent { display: inline-block; font-size: 12.5px; font-weight: 600; letter-spacing: .06em; color: var(--accent); border-bottom: 1px solid var(--accent); padding-bottom: 3px; } /* Soft image edges: the photo fades out over the last 7% on every side instead of ending on a hard rectangle. */ .media { position: relative; overflow: hidden; border-radius: 3px; } .media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.1s ease; -webkit-mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%); -webkit-mask-composite: source-in; mask-image: linear-gradient(to right, transparent 0, #000 7%, #000 93%, transparent 100%), linear-gradient(to bottom, transparent 0, #000 7%, #000 93%, transparent 100%); mask-composite: intersect; } .media--zoom:hover img { transform: scale(1.035); } .media .hand { position: absolute; left: 20px; bottom: 16px; font-family: var(--hand); font-size: 27px; color: #FBF6EC; text-shadow: 0 2px 14px rgba(0, 0, 0, .65); } .feature-card { background: var(--feature-bg); color: var(--feature-ink); border-radius: 4px; padding: 38px 40px; } .feature-card__muted { color: var(--feature-body); } /* -------------------------------------------------------------- nav ---- */ .nav { position: sticky; top: 0; z-index: 20; background: var(--bg); transition: background .35s ease; } /* The hairline is painted inside the bar instead of being a border, so the nav's box stays exactly --navH tall. As a border it made the bar 71px while the hero pays back only 70px, and that leftover pixel showed the page background as a pale line above the photo in light mode. */ .nav::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--line); transition: background .35s ease; } .nav__inner { max-width: var(--wrap); min-height: var(--navH); /* exact, so the hero's negative offset lines up */ margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 0 var(--gutter); } .nav__brand { display: flex; align-items: center; gap: 12px; } .nav__brand img { width: 28px; height: auto; display: block; flex: none; } .nav__brand span { font-family: var(--serif); font-size: 20px; font-weight: 450; letter-spacing: .01em; color: var(--brand); white-space: nowrap; transition: color .35s ease; } .nav__links { display: flex; align-items: center; gap: var(--navGap); } .nav__link { font-size: 13.5px; font-weight: 500; letter-spacing: .01em; color: var(--body); transition: color .2s; } .nav__link:hover, .nav__link[aria-current='page'] { color: var(--accent); } .nav__extras { display: flex; align-items: center; gap: var(--navGap); } .nav__lang { display: flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 500; letter-spacing: .08em; color: var(--muted); } .nav__lang a:hover { color: var(--accent); } .nav__lang .is-active { color: var(--ink); } .nav__lang .sep { opacity: .45; } .theme-toggle { cursor: pointer; width: 15px; height: 15px; padding: 0; border-radius: 100px; border: 1px solid var(--ink); background: linear-gradient(90deg, var(--ink) 0 50%, transparent 50% 100%); flex: none; } .nav__burger { display: none; } /* Backdrop behind the mobile drawer; only exists below the breakpoint. */ .nav__scrim { display: none; } .nav__burger i { display: block; width: 24px; height: 1.5px; background: var(--ink); transition: background .35s ease; } .nav__burger i:last-child { width: 16px; } /* Over the homepage hero the nav is transparent with cream lettering, and turns solid as soon as the page scrolls (site.js adds .is-scrolled). With JavaScript off it simply stays in its transparent state over the photo, which is the design's default. */ .nav--overlay:not(.is-scrolled) { background: transparent; } .nav--overlay:not(.is-scrolled)::after { background: transparent; } .nav--overlay:not(.is-scrolled) .nav__link { color: var(--heroNavLink); } /* Needed explicitly: the rule above outranks .nav__link[aria-current] on its own, which would leave the current page indistinguishable over the hero. */ .nav--overlay:not(.is-scrolled) .nav__link:hover, .nav--overlay:not(.is-scrolled) .nav__link[aria-current='page'] { color: var(--accent); } .nav--overlay:not(.is-scrolled) .nav__lang { color: var(--heroNavMuted); } .nav--overlay:not(.is-scrolled) .nav__lang .is-active { color: var(--heroInk); } .nav--overlay:not(.is-scrolled) .theme-toggle { border-color: var(--heroInk); background: linear-gradient(90deg, var(--heroInk) 0 50%, transparent 50% 100%); } .nav--overlay:not(.is-scrolled) .nav__burger i { background: var(--heroInk); } .nav--overlay:not(.is-scrolled) .nav__links > .btn { background: var(--accent); color: #FFF8F3; } /* ------------------------------------------------------------- hero ---- */ /* The nav overlays the photo, so the hero is pulled up underneath it by exactly the nav's height and pays that back as top padding. */ .hero-wrap { position: relative; margin-top: calc(-1 * var(--navH)); } .hero-bg { position: absolute; inset: 0; overflow: hidden; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 58%; display: block; } /* Two overlays: the first veils the photo enough for the hero type, the second fades its foot into the page background so there is no visible seam. The veil is a token because it inverts between themes. */ .hero-bg__shade { position: absolute; inset: 0; background: var(--heroVeil); transition: background .35s ease; } .hero-bg__fade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 42%, var(--bg) 99%); } .hero { position: relative; max-width: 940px; margin: 0 auto; padding: calc(var(--navH) + var(--pageTop)) var(--gutter) var(--heroBottom); text-align: center; } .hero .eyebrow { color: var(--accent); text-shadow: var(--heroGlowSm); } .hero h1 { font-family: var(--serif); font-weight: 400; font-size: var(--hHero); line-height: 1.04; letter-spacing: -.018em; margin: 26px auto 0; max-width: 18ch; color: var(--heroInk); text-shadow: var(--heroGlowLg); } .hero h1 em { display: block; font-style: italic; font-weight: 350; color: var(--brand); } .hero p { max-width: 53ch; margin: 26px auto 0; font-size: 17.5px; line-height: 1.64; color: var(--heroBody); text-shadow: var(--heroGlowSm); } .hero__cta { display: flex; flex-wrap: wrap; gap: 16px 26px; justify-content: center; align-items: center; margin-top: 36px; } .hero__cta .link-underline { color: var(--heroLink); border-bottom-color: var(--heroLinkLine); } .hero__cta .link-underline:hover { color: var(--heroLinkHover); border-bottom-color: var(--heroLinkHover); } /* ------------------------------------------------------------- home ---- */ /* Section rhythm. --secTop only applies to the first section on the page, which follows the hero rather than another section. */ .section { padding-top: var(--secTop); padding-bottom: var(--secGap); } .section--rule { border-top: 1px solid var(--line); padding-top: var(--secTop2); padding-bottom: var(--secGap); } .section--last { padding-bottom: var(--endGap); } .split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: center; } .split--flip .media { order: var(--imgOrder); } .split--concept .media img { height: var(--imgConcept); } .split--short .media img { height: var(--imgShort); } .prose p { font-size: 17px; line-height: 1.74; margin: 0 0 18px; color: var(--body); } .prose p:last-child { margin-bottom: 0; } .catering__cta { margin-top: 28px; } .catering__items { margin-top: 54px; display: grid; grid-template-columns: var(--c4); gap: var(--gap4) var(--gap); } .catering__item h3 { font-family: var(--serif); font-weight: 450; font-size: 21px; margin: 0 0 7px; color: var(--ink); } .catering__item p { font-size: 15.5px; line-height: 1.6; color: var(--body); margin: 0; } .hit-news { display: grid; grid-template-columns: 1.05fr .95fr; gap: var(--gap); align-items: stretch; } /* With no Aktuelles entries there is nothing to sit beside, so the Wochenhit card takes the full width rather than leaving half the row empty. */ .hit-news--solo { grid-template-columns: 1fr; } .hit { display: flex; flex-direction: column; } .hit .eyebrow { color: var(--accent); } .hit h3 { font-family: var(--serif); font-weight: 450; font-size: var(--h3); line-height: 1.14; margin: 16px 0 6px; } .hit__side { font-size: 15.5px; } .hit__price { display: flex; align-items: baseline; gap: 14px; margin: 24px 0 0; flex-wrap: wrap; } .hit__price strong { font-family: var(--serif); font-size: 40px; font-weight: 400; } .hit__price span { font-size: 11.5px; letter-spacing: .16em; text-transform: uppercase; opacity: .8; } .hit__cta { margin-top: 26px; align-self: flex-start; color: var(--accent); font-size: 12.5px; font-weight: 600; letter-spacing: .06em; border-bottom: 1px solid var(--accent); padding-bottom: 3px; } .hit__spacer { flex: 1; } .news { display: flex; flex-direction: column; gap: 30px; margin-top: 24px; } .news__date { font-size: 11.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 600; } .news__title { font-family: var(--serif); font-size: 21px; color: var(--ink); margin: 6px 0 4px; font-weight: 400; } .news__text { font-size: 14.5px; line-height: 1.56; color: var(--body); } .newsletter { display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); align-items: start; } .newsletter > div > p { font-size: 16px; line-height: 1.62; color: var(--body); margin: 0; } .newsletter__form { padding-top: 6px; } .newsletter__row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 20px; margin-top: 28px; } .newsletter__note { font-size: 12px; color: var(--muted); } .newsletter__wa { margin-top: 28px; padding-top: 24px; border-top: 1px solid var(--line); } .newsletter__wa h3 { font-family: var(--serif); font-weight: 450; font-size: 20px; margin: 0 0 6px; color: var(--ink); } .newsletter__wa p { font-size: 14.5px; line-height: 1.56; margin: 0 0 16px; } /* ------------------------------------------------------------- menu ---- */ .page-head { max-width: 940px; margin: 0 auto; padding: var(--pageTop) var(--gutter) 20px; text-align: center; } .page-head h1 { font-family: var(--serif); font-weight: 400; font-size: var(--hPage); line-height: 1.04; margin: 24px auto 0; max-width: 16ch; color: var(--ink); letter-spacing: -.018em; } .page-head p { max-width: 56ch; margin: 22px auto 0; font-size: 16.5px; line-height: 1.7; color: var(--body); white-space: pre-line; } .page-head__rule { display: inline-flex; align-items: center; gap: 14px; margin-top: 24px; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--muted); } .page-head__rule i { width: 26px; height: 1px; background: var(--line2); display: block; } .hit-banner { display: flex; align-items: center; justify-content: space-between; gap: 36px; flex-wrap: wrap; padding: 32px 38px; } .hit-banner .eyebrow { color: var(--accent); } .hit-banner__name { font-family: var(--serif); font-size: var(--h3); line-height: 1.2; } .hit-banner__price { font-family: var(--serif); font-size: 36px; white-space: nowrap; } .week__day { display: grid; grid-template-columns: var(--cDay); gap: var(--gap); padding: 30px 0; border-bottom: 1px solid var(--line); } .week__name { font-family: var(--serif); font-size: 24px; line-height: 1.16; color: var(--ink); font-weight: 400; margin: 0; } /* The row never wraps: a long dish name wraps inside its own column instead of pushing the price onto a line of its own. That is what the design does, and it is what keeps the price column straight down the right edge. */ .dish { display: flex; align-items: baseline; gap: 14px; padding: 8px 0; } .dish__name { font-size: 16.5px; color: var(--ink); line-height: 1.4; flex: 0 1 auto; min-width: 0; } .dish__spacer { flex: 1 1 auto; min-width: 12px; } .dish__price { font-family: var(--serif); font-size: 18px; white-space: nowrap; color: var(--ink); flex: none; } .badge-vegi { font-size: 11.5px; letter-spacing: .1em; text-transform: uppercase; font-weight: 600; color: var(--vegi); border: 1px solid var(--vegi); padding: 2px 8px; border-radius: 100px; white-space: nowrap; flex: none; } .menu-empty { text-align: center; padding: 40px 0 10px; font-size: 17px; line-height: 1.7; color: var(--body); } .pdf-row { display: flex; align-items: center; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .pdf-row__left { display: flex; align-items: center; gap: 18px; } .pdf-icon { flex: none; width: 36px; height: 44px; border: 1px solid var(--accent); border-radius: 2px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px; font-size: 9.5px; font-weight: 600; letter-spacing: .06em; color: var(--accent); } .pdf-row__title { font-family: var(--serif); font-size: 20px; color: var(--ink); } .pdf-row__sub { font-size: 14px; color: var(--muted); margin-top: 2px; } /* Same section boundary as the home page: --secGap of air, the rule, then --secTop2. Stated as a margin so it holds whether or not the PDF row above it is rendered. */ .dinner { display: grid; grid-template-columns: .85fr 1.15fr; gap: var(--gap); align-items: center; margin-top: var(--secGap); border-top: 1px solid var(--line); padding-top: var(--secTop2); padding-bottom: 30px; } .dinner .media img { height: var(--imgDinner); } .dinner p { font-size: 16.5px; line-height: 1.74; color: var(--body); margin: 0 0 18px; } .dinner p:last-child { margin-bottom: 0; } .menu-foot { text-align: center; font-size: 13px; color: var(--muted); line-height: 1.6; padding: 30px var(--gutter) var(--endGap); max-width: 68ch; margin: 0 auto; } /* ------------------------------------------------------------ forms ---- */ .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .field { display: block; } .field > span { display: block; font-size: 12.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--body); font-weight: 600; margin-bottom: 9px; } .field input, .field textarea, .field select { width: 100%; padding: 11px 2px; border: none; border-bottom: 1px solid var(--field-line); background: transparent; color: var(--ink); font-family: inherit; font-size: 15px; outline: none; border-radius: 0; } .field textarea { resize: vertical; } /* Belt and braces for the dropdown list: some browsers hand the options the select's text colour but their own white background. */ .field select option { background-color: var(--bg); color: var(--ink); } .field input:focus, .field textarea:focus, .field select:focus { border-bottom-color: var(--accent); } .field--error input, .field--error textarea, .field--error select { border-bottom-color: #C0392B; } .field__error { display: block; font-size: 12.5px; color: #C0392B; margin-top: 6px; text-transform: none; letter-spacing: 0; font-weight: 500; } /* display:block would otherwise beat the browser's own [hidden] rule, and the reservation hints are rendered up front and only revealed by site.js. */ .field__error[hidden] { display: none; } /* The newsletter's single field is a box rather than a rule — it stands on its own instead of in a column of labelled fields. */ .field--boxed input { padding: 15px 16px; border: 1px solid var(--field-line); border-radius: 3px; background: var(--bg2); transition: border-color .2s; } .field--boxed input:focus { border-color: var(--accent); } .alert { padding: 18px 22px; border-radius: 3px; margin-bottom: 28px; font-size: 15px; line-height: 1.6; } .alert--ok { background: var(--bg2); border-left: 3px solid var(--vegi); color: var(--ink); } .alert--err { background: var(--bg2); border-left: 3px solid #C0392B; color: var(--ink); } .alert strong { display: block; font-family: var(--serif); font-size: 19px; font-weight: 450; margin-bottom: 4px; } .reserve-layout { display: grid; grid-template-columns: 1.2fr .8fr; gap: var(--gap); align-items: start; padding: 48px var(--gutter) var(--endGap); } .reserve-note { font-size: 13px; color: var(--muted); margin: 20px 0 0; line-height: 1.56; } .reserve-aside .feature-card { padding: 32px; } .reserve-aside .eyebrow { color: var(--accent); } .reserve-aside__phone { font-family: var(--serif); font-size: 26px; } .reserve-aside .media img { height: 220px; } .hours__row { display: flex; justify-content: space-between; gap: 14px; padding: 12px 0; border-bottom: 1px solid var(--line); } .hours__row dt { font-size: 14px; font-weight: 500; color: var(--ink); margin: 0; } .hours__row dd { font-size: 14px; color: var(--body); text-align: right; margin: 0; } /* ---------------------------------------------------------- contact ---- */ /* --contactSplit is the shared label column for the phone/e-mail pair and the opening hours, so the two blocks break at the same place instead of each finding its own middle. 152px clears the longest German day label ("Montag – Donnerstag", 142px) and leaves the right column wide enough for the full e-mail address on one line. */ .contact-layout { display: grid; grid-template-columns: .9fr 1.1fr; gap: var(--gap); align-items: start; padding: 48px var(--gutter) var(--endGap); --contactSplit: 152px; } .contact-block { padding: 20px 0; border-top: 1px solid var(--line2); } .contact-block__value { font-size: 16.5px; color: var(--ink); margin-top: 9px; overflow-wrap: anywhere; } /* The design draws these as plain text. They are tel:/mailto: links, so they are underlined to say so — on a phone this is the tap target that dials. */ .contact-block__value a { border-bottom: 1px solid var(--line2); padding-bottom: 2px; transition: color .2s, border-color .2s; } .contact-block__value a:hover { color: var(--accent); border-bottom-color: var(--accent); } .contact-block .address { font-family: var(--serif); font-size: 24px; color: var(--ink); margin-top: 9px; line-height: 1.36; } .contact-block p { font-size: 15.5px; line-height: 1.66; color: var(--body); margin: 10px 0 0; } .contact-block--last { padding-bottom: 0; } .contact-pair { display: grid; grid-template-columns: minmax(0, var(--contactSplit)) minmax(0, 1fr); gap: 24px; } .contact-hours { margin: 12px 0 0; display: grid; grid-template-columns: minmax(0, var(--contactSplit)) minmax(0, 1fr); gap: 10px 24px; } /* The row wrapper only groups a day with its hours for screen readers; the two cells are the grid items, so every row uses the same two columns. */ .contact-hours > div { display: contents; } .contact-hours dt { font-size: 15px; font-weight: 500; color: var(--ink); margin: 0; } .contact-hours dd { font-size: 15px; color: var(--body); margin: 0; } /* Live Google embed. The drawn street grid behind it would only ever show while the map is still loading, so the box carries no pattern of its own. */ .contact-map { position: relative; height: 491px; border-radius: 3px; overflow: hidden; border: 1px solid var(--line); background-color: var(--bg2); } .contact-map__frame { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border: 0; } .contact-map__link { position: absolute; right: 14px; bottom: 12px; font-size: 12px; font-weight: 600; letter-spacing: .06em; color: var(--accent); background: var(--bg); padding: 6px 10px; border-radius: 2px; } /* ----------------------------------------------------------- footer ---- */ .footer { border-top: 1px solid var(--line); background: var(--bg); transition: background .35s ease; } .footer__inner { max-width: 1000px; margin: 0 auto; padding: var(--footCols) var(--gutter) 0; text-align: center; } .footer__brand { display: flex; align-items: center; justify-content: center; gap: 16px; } .footer__brand img { width: var(--footLogo); height: auto; display: block; flex: none; } .footer__name { font-family: var(--serif); font-size: var(--footName); color: var(--brand); transition: color .35s ease; } .footer__cols { margin-top: var(--footCols); display: grid; grid-template-columns: var(--footC); justify-content: center; gap: var(--footGap); text-align: left; justify-items: var(--footJustify); } .footer__col--addr { max-width: 330px; width: 100%; text-align: var(--footAlign1); } .footer__col--hours { max-width: 390px; width: 100%; justify-self: var(--footJustify2); text-align: var(--footAlign2); } .footer__addr { font-family: var(--serif); font-size: 22px; margin: 14px 0 0; line-height: 1.42; color: var(--ink); white-space: var(--footAddrWrap); } .footer__contact { font-size: 14.5px; color: var(--body); margin-top: 14px; line-height: 1.85; } .footer__contact div { white-space: nowrap; } .footer__hours { display: grid; grid-template-columns: var(--hoursC); justify-content: var(--hoursJustify); column-gap: 22px; row-gap: 11px; margin: 16px 0 0; } .footer__hours > div { display: contents; } .footer__hours dt { font-size: 14.5px; font-weight: 500; color: var(--ink); white-space: nowrap; margin: 0; } .footer__hours dd { font-size: 14.5px; color: var(--body); white-space: nowrap; margin: 0; } .footer__nav { display: grid; grid-template-columns: repeat(3, minmax(0, var(--footNavCol))); justify-content: center; gap: 14px 8px; margin-top: var(--footNav); font-size: 12.5px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; } .footer__nav a { color: var(--ink); text-align: center; } .footer__nav a:hover { color: var(--accent); } .footer__legal { margin-top: var(--footBotTop); padding: 20px 0 32px; border-top: 1px solid var(--line); font-size: 12px; color: var(--muted); } /* ------------------------------------------------------- responsive ---- */ @media (max-width: 1010px) { :root { --gutter: 30px; --navGap: 20px; --footGap: 38px; } } @media (max-width: 820px) { :root { --gutter: 22px; --gap: 46px; --gap4: 34px; --navGap: 18px; --navH: 66px; --pageTop: 90px; --endGap: 128px; --secGap: 104px; --secTop: 84px; --secTop2: 72px; --takeTop: 54px; --heroBottom: 110px; --hHero: 40px; --hPage: 34px; --h2: 28px; --h3: 24px; --imgConcept: 280px; --imgDinner: 200px; --imgShort: 200px; --imgTall: 240px; --c4: repeat(2, 1fr); --cDay: 1fr; --imgOrder: 2; --footCols: 42px; --footNav: 42px; --footBotTop: 40px; --footGap: 38px; --footLogo: 46px; --footName: 25px; --footNavCol: 104px; --footC: 1fr; --footAddrWrap: normal; --footAlign1: center; --footAlign2: center; --footJustify: center; --footJustify2: center; --hoursC: max-content max-content; --hoursJustify: center; } .split, .hit-news, .newsletter, .dinner, .form-grid, .reserve-layout, .contact-layout, .contact-pair { grid-template-columns: 1fr; } .hero p { font-size: 16.5px; } .media .hand { font-size: 24px; left: 16px; bottom: 12px; } /* The weekday label moves above its dishes rather than beside them. */ .week__day { gap: 10px; padding: 24px 0; } .dish { gap: 10px; } .feature-card { padding: 28px 24px; } .hit__price strong { font-size: 34px; } .hit-banner { padding: 26px 24px; gap: 18px; } .hit-banner__price { font-size: 30px; } .reserve-layout { padding: 36px var(--gutter) var(--endGap); } .contact-layout { padding: 36px var(--gutter) var(--endGap); } /* The pair stacks here, so there is nothing left to line up with, and the shared column would cost the hours more width than the screen has. Back to day on the left, time hard right. */ .contact-hours { display: flex; flex-direction: column; gap: 10px; } .contact-hours > div { display: flex; justify-content: space-between; gap: 16px; } .contact-hours dd { text-align: right; } .contact-map { height: 360px; } .dinner { padding-top: 52px; } .catering__items { margin-top: 40px; } /* The panel is a fixed drawer sliding in from the right, so it is out of flow: opening it cannot reflow the bar (that was the header jumping up) and it covers the full width of the screen rather than sitting inside the bar's gutters (that was the hero photo showing down both sides). */ .nav__burger { display: flex; flex-direction: column; justify-content: center; align-items: flex-end; gap: 5px; width: 34px; height: 34px; background: none; border: none; padding: 0; cursor: pointer; position: relative; z-index: 40; /* above the open drawer, so the same button also closes it */ } .nav__links { position: fixed; top: 0; right: 0; bottom: 0; z-index: 30; width: min(78vw, 320px); flex-direction: column; align-items: stretch; gap: 2px; padding: calc(var(--navH) + 10px) var(--gutter) 28px; background: var(--bg); border-left: 1px solid var(--line); box-shadow: -20px 0 44px rgba(18, 14, 11, .22); overflow-y: auto; overscroll-behavior: contain; transform: translateX(100%); /* Hidden rather than merely off-screen, so its links stay out of the tab order while closed. The delay keeps it visible through the slide out. */ visibility: hidden; transition: transform .3s ease, visibility 0s linear .3s; } .nav__links.is-open { transform: none; visibility: visible; transition: transform .3s ease; } .nav__scrim { display: block; position: fixed; inset: 0; z-index: 15; background: rgba(18, 14, 11, .45); opacity: 0; pointer-events: none; transition: opacity .3s ease; } :root.nav-open .nav__scrim { opacity: 1; pointer-events: auto; } /* The page behind the drawer must not scroll along with it. */ :root.nav-open, :root.nav-open body { overflow: hidden; } .nav__links .nav__link { font-family: var(--serif); font-size: 17px; padding: 13px 0; color: var(--ink); border-bottom: 1px solid var(--line); } .nav__links .btn { order: 1; width: 100%; text-align: center; margin-top: 14px; text-transform: uppercase; font-size: 13px; padding: 14px 18px; } .nav__extras { order: 2; justify-content: space-between; margin-top: 16px; } .nav__extras .nav__lang { font-size: 13px; } .nav__extras .theme-toggle { width: 17px; height: 17px; } /* The drawer is solid in both nav states, so it keeps the page's own colours instead of the cream lettering the nav uses over the hero. */ .nav--overlay:not(.is-scrolled) .nav__links .nav__link, .nav--overlay:not(.is-scrolled) .nav__links .nav__lang .is-active { color: var(--ink); } .nav--overlay:not(.is-scrolled) .nav__links .nav__lang { color: var(--muted); } .nav--overlay:not(.is-scrolled) .nav__links .theme-toggle { border-color: var(--ink); background: linear-gradient(90deg, var(--ink) 0 50%, transparent 50% 100%); } .nav--overlay:not(.is-scrolled) .nav__links > .btn { background: var(--ink); color: var(--bg); } /* The burger sits on top of the open drawer, where cream-on-cream would leave it invisible over the hero. */ :root.nav-open .nav--overlay:not(.is-scrolled) .nav__burger i { background: var(--ink); } } @media (max-width: 520px) { :root { --gutter: 18px; --hHero: 34px; --hPage: 30px; --h2: 25px; --secGap: 92px; --secTop: 76px; --secTop2: 64px; --pageTop: 73px; --endGap: 104px; --heroBottom: 88px; --imgConcept: 240px; --imgTall: 210px; } .hero__cta .btn { width: 100%; text-align: center; } .contact-map { height: 300px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; } .media--zoom:hover img { transform: none; } } /* --------------------------------------------------------- printing ---- */ @media print { .nav, .footer, .newsletter, .pdf-row, .hero__cta { display: none; } body { background: #fff; color: #000; } .week__day { break-inside: avoid; } }