/* ════════════════════════════════════════════════════════════════════ Bistro De Linde — redactioneel & typografisch Donker warm (bruin-zwart), crème tekst, terracotta accent. Geen kaarten, geen dozen: typografie en bleedend beeld doen het werk. ════════════════════════════════════════════════════════════════════ */ :root { color-scheme: dark; /* Donkere basis */ --bg: #1a110c; --ink: #f2e7d8; --muted: #c7b29a; --accent: #d99263; /* terracotta, licht genoeg voor kleine tekst op donker */ --hair: rgba(242, 231, 216, 0.16); /* Crème menukaart-band */ --cream: #f2e9d7; --cream-ink: #2c1e14; --cream-muted: #705741; --cream-price: #7e4a26; --cream-orn: #a3805f; --cream-tag: #55603c; --serif: Georgia, 'Times New Roman', Times, serif; --sans: system-ui, -apple-system, 'Segoe UI', Arial, sans-serif; --gutter: clamp(1.25rem, 5vw, 4rem); } /* ── Reset & basis ─────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html { overflow-x: clip; /* iOS Safari toont bij de overscroll-bounce voorbij de footer de canvas-kleur van . Stond die op niets, dan was dat wit. Nu is het de kleur van de eigen voet, dus je veert in de site door. overscroll-behavior alleen op html, niet op body. */ background: var(--bg); overscroll-behavior-y: none; scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; overflow-x: clip; overflow-wrap: break-word; background: var(--bg); color: var(--ink); font-family: var(--serif); font-size: 1.0625rem; line-height: 1.7; -webkit-font-smoothing: antialiased; /* Geen padding-bottom meer: die hield ruimte vrij voor de sticky balk en liet daardoor een strook body-kleur onder de footer staan. */ } h1, h2, h3, p, dl, dd, figure, address { margin: 0; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } a, button, input, select, textarea, label { touch-action: manipulation; } ::selection { background: var(--accent); color: #241409; } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } [id] { scroll-margin-top: 4.5rem; } address { font-style: normal; user-select: text; } /* ── Utilities ─────────────────────────────────────────────────────── */ .wrap { max-width: 68rem; margin-inline: auto; padding-inline: var(--gutter); } .kicker { font-family: var(--sans); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--muted); } .kicker--accent { color: var(--accent); } .kicker--hero { color: rgba(242, 231, 216, 0.85); } .kicker--cream { color: var(--cream-muted); } .h2 { font-family: var(--serif); font-weight: 400; font-size: clamp(1.9rem, 4.2vw, 3rem); line-height: 1.12; letter-spacing: -0.01em; margin: 0.9rem 0 1.4rem; } .btn { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: 0.8rem 1.9rem; border: 0; border-radius: 999px; background: var(--accent); color: #241409; font-family: var(--sans); font-size: 0.85rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; cursor: pointer; } .btn:hover { background: #e3a173; } .btn--block { width: 100%; } .link-quiet { display: inline-flex; align-items: center; min-height: 3rem; padding: 0.5rem 0.25rem; color: var(--ink); font-family: var(--sans); font-size: 0.85rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: underline; text-underline-offset: 0.4em; text-decoration-color: rgba(242, 231, 216, 0.45); } .link-quiet:hover { text-decoration-color: var(--accent); } /* ── Skip-link ─────────────────────────────────────────────────────── */ .skip-link { position: fixed; top: 0.75rem; left: 0.75rem; z-index: 100; padding: 0.85rem 1.3rem; border-radius: 999px; background: var(--accent); color: #241409; font-family: var(--sans); font-size: 0.9rem; text-decoration: none; transform: translateY(-300%); } .skip-link:focus { transform: none; } /* ── Kop ───────────────────────────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.35rem var(--gutter); background: rgba(22, 14, 10, 0.93); border-bottom: 1px solid rgba(242, 231, 216, 0.1); } .brand { font-family: var(--serif); font-style: italic; font-size: 1.35rem; line-height: 1; text-decoration: none; padding: 0.7rem 0; } /* Terug naar het portfolio — discreet, in de toon van de kop. Op smalle schermen alleen de pijl, zodat de kop niet gaat verdringen. */ .header-back { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 0.4rem 0.5rem 0; font-family: var(--sans); font-size: 0.68rem; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; color: var(--muted); opacity: 0.75; white-space: nowrap; } .header-back:hover { color: var(--ink); opacity: 1; } @media (max-width: 519px) { .header-back span { display: none; } } .site-nav { display: none; } .site-nav a, .header-reserve { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 0.6rem; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; text-decoration: none; color: var(--muted); } .site-nav a:hover { color: var(--ink); } .header-reserve { color: var(--accent); text-decoration: underline; text-underline-offset: 0.45em; text-decoration-color: rgba(217, 146, 99, 0.5); } .header-reserve:hover { text-decoration-color: var(--accent); } @media (min-width: 760px) { .site-nav { display: flex; gap: 0.5rem; } } /* ── Hero ──────────────────────────────────────────────────────────── */ .hero { position: relative; min-height: 100svh; display: grid; align-content: end; overflow: hidden; } .hero__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .hero__scrim { position: absolute; inset: 0; background: linear-gradient( 200deg, rgba(26, 17, 12, 0.2) 0%, rgba(26, 17, 12, 0.5) 50%, rgba(22, 13, 9, 0.93) 100% ); } .hero__inner { position: relative; max-width: 48rem; padding: 8rem var(--gutter) clamp(4rem, 9vw, 6.5rem); } .hero__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.5rem, 7.5vw, 5.25rem); line-height: 1.05; letter-spacing: -0.015em; margin: 1.1rem 0 1.5rem; } .hero__title em { font-style: italic; color: var(--accent); } .hero__lead { max-width: 34rem; font-size: clamp(1.05rem, 1.6vw, 1.2rem); color: rgba(242, 231, 216, 0.92); } .hero__cta { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.75rem; margin-top: 2rem; } .hero__meta { margin-top: 2.25rem; font-family: var(--sans); font-size: 0.75rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); } /* ── Statement — asymmetrische typografie ──────────────────────────── */ .statement { padding-block: clamp(5rem, 13vw, 9.5rem); } .statement__text { font-size: clamp(1.55rem, 3.6vw, 2.8rem); line-height: 1.32; letter-spacing: -0.01em; max-width: 46rem; margin-top: 1.5rem; } .statement__text em { font-style: italic; color: var(--accent); } @media (min-width: 900px) { .statement { display: grid; grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); column-gap: clamp(2rem, 5vw, 5rem); } .statement__label { padding-top: 0.9em; } .statement__text { margin-top: 0; } } /* ── Fotoband — van rand tot rand ──────────────────────────────────── */ .photoband img { width: 100%; aspect-ratio: 16 / 7; object-fit: cover; } @media (max-width: 700px) { .photoband img { aspect-ratio: 4 / 3; } } /* ── Menukaart — crème band, gezet als gedrukte kaart ──────────────── */ .menu-band { background: var(--cream); color: var(--cream-ink); padding: clamp(4.5rem, 11vw, 8.5rem) var(--gutter); } .menu { max-width: 42rem; margin-inline: auto; text-align: center; } .menu__title { font-family: var(--serif); font-weight: 400; font-size: clamp(2.1rem, 5vw, 3.4rem); line-height: 1.1; margin: 1rem 0 1.3rem; } .menu__title em { font-style: italic; } .menu__intro { max-width: 30rem; margin-inline: auto; color: var(--cream-muted); } .menu__updated { margin-top: 1.1rem; font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--cream-muted); } .course { margin-top: clamp(3.5rem, 8vw, 5.5rem); } .course__orn { font-family: var(--serif); font-size: 1.1rem; letter-spacing: 0.85em; text-indent: 0.85em; color: var(--cream-orn); } .course__title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: clamp(1.7rem, 3.5vw, 2.2rem); margin-top: 0.5rem; } .course__list { list-style: none; margin: 2.2rem 0 0; padding: 0; display: grid; gap: 2.1rem; } .dish__name { font-family: var(--serif); font-size: 1.28rem; line-height: 1.3; } .dish__tag { font-family: var(--sans); font-size: 0.62rem; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; color: var(--cream-tag); margin-left: 0.45rem; vertical-align: 0.25em; } .dish__desc { font-style: italic; font-size: 1rem; color: var(--cream-muted); margin-top: 0.25rem; } .dish__price { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.18em; color: var(--cream-price); margin-top: 0.55rem; } .menu__foot { margin-top: clamp(3.5rem, 8vw, 5.5rem); } .menu__foot::before { content: ""; display: block; width: 3.5rem; height: 1px; margin: 0 auto 2.5rem; background: var(--cream-orn); } .menu__chef { font-size: 1.15rem; line-height: 1.6; max-width: 34rem; margin-inline: auto; } .menu__chefprice { display: block; margin-top: 0.5rem; font-family: var(--sans); font-size: 0.8rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cream-price); } .menu__note { margin-top: 1.6rem; font-style: italic; font-size: 0.95rem; color: var(--cream-muted); } /* ── Over ons — beeld bleedt van de linkerrand ─────────────────────── */ .about { padding-block: clamp(4.5rem, 11vw, 9rem); } .about__media img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .about__body { max-width: 40rem; padding-inline: var(--gutter); margin-top: 2.75rem; } .about__body p + p { margin-top: 1.1rem; } .about__tags { margin-top: 2rem; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } @media (min-width: 940px) { .about { display: grid; grid-template-columns: minmax(0, 5fr) clamp(2.5rem, 6vw, 6rem) minmax(0, 34rem) minmax(var(--gutter), 1fr); align-items: center; } .about__media { grid-column: 1; } .about__media img { aspect-ratio: 4 / 5; } .about__body { grid-column: 3; padding-inline: 0; margin-top: 0; } } /* ── Spread — verspringend duo, groot beeld bleedt rechts ──────────── */ .duo { padding-block: clamp(1.5rem, 4vw, 3rem) clamp(4.5rem, 11vw, 9rem); } .duo figcaption { font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--muted); margin-top: 0.8rem; } .duo__small { padding-inline: var(--gutter); } .duo__small img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; } .duo__big { margin-top: 2.75rem; } .duo__big img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .duo__big figcaption { padding-inline: var(--gutter); } @media (min-width: 940px) { .duo { display: grid; grid-template-columns: minmax(var(--gutter), 1fr) minmax(0, 24rem) clamp(2.5rem, 6vw, 6rem) minmax(0, 58rem); align-items: end; } .duo__small { grid-column: 2; padding-inline: 0; margin-bottom: clamp(2.5rem, 7vw, 6rem); } .duo__big { grid-column: 4; margin-top: 0; } .duo__big figcaption { padding-inline: 0 var(--gutter); } } /* ── Reserveren — intro links, formulier rechts ────────────────────── */ .reserve { padding-block: clamp(4.5rem, 11vw, 8.5rem); display: grid; gap: 3rem; } .reserve__intro > p { max-width: 30rem; } .reserve__phone { margin-top: 1.3rem; font-style: italic; } .reserve__phone a { color: var(--accent); text-underline-offset: 0.3em; } .reserve__img { width: 100%; max-width: 26rem; aspect-ratio: 3 / 2; object-fit: cover; margin-top: 2.5rem; } @media (min-width: 900px) { .reserve { grid-template-columns: minmax(0, 26rem) minmax(2rem, 1fr) minmax(0, 30rem); } .reserve__intro { grid-column: 1; } .reserve__form { grid-column: 3; } .reserve__img { aspect-ratio: 4 / 5; } } /* ── Formulier — regels, geen dozen ────────────────────────────────── */ .reserve__form { display: grid; gap: 1.9rem; align-content: start; } .frow { display: grid; gap: 1.9rem; } @media (min-width: 560px) { .frow { grid-template-columns: 1fr 1fr; } } .field { display: grid; gap: 0.3rem; } .field label { font-family: var(--sans); font-size: 0.7rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); padding-block: 0.2rem; } .field__opt { text-transform: none; letter-spacing: 0.08em; color: rgba(199, 178, 154, 0.75); } input, select, textarea { width: 100%; min-height: 2.75rem; padding: 0.5rem 0.1rem; background: transparent; border: 0; border-bottom: 1px solid rgba(242, 231, 216, 0.35); border-radius: 0; color: var(--ink); font-family: var(--serif); font-size: 1rem; line-height: 1.4; } textarea { resize: vertical; min-height: 5.5rem; } input::placeholder, textarea::placeholder { color: rgba(242, 231, 216, 0.45); } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; border-bottom: 1px solid var(--accent); } .select { position: relative; display: block; } .select::after { content: "\25BE"; position: absolute; right: 0.2rem; top: 50%; transform: translateY(-50%); pointer-events: none; color: var(--muted); font-family: var(--sans); font-size: 0.8rem; } select { appearance: none; -webkit-appearance: none; padding-right: 1.6rem; cursor: pointer; } select:invalid { color: rgba(242, 231, 216, 0.45); } .form-note { font-style: italic; color: var(--accent); } .form-fineprint { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.04em; color: var(--muted); } /* ── Contact & route — getypografeerd ──────────────────────────────── */ .contact { padding-block: clamp(1rem, 3vw, 2rem) clamp(4.5rem, 11vw, 8.5rem); display: grid; gap: 3rem; } .contact__address { font-family: var(--serif); font-size: clamp(1.5rem, 3vw, 2.1rem); line-height: 1.35; margin-top: 0.5rem; } .contact__lines { margin-top: 1.4rem; font-size: 1.1rem; line-height: 2; } .contact__lines a { text-decoration-color: rgba(242, 231, 216, 0.35); text-underline-offset: 0.3em; } .contact__lines a:hover { text-decoration-color: var(--accent); } .contact__route { margin-top: 1.6rem; max-width: 28rem; color: var(--muted); } .contact__hours-title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 1.45rem; } .hours { margin-top: 1.4rem; } .hours__row { display: flex; justify-content: space-between; align-items: baseline; gap: 1rem; padding: 0.7rem 0; border-bottom: 1px solid var(--hair); } .hours__row dt { font-family: var(--sans); font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); } .hours__row dd { font-variant-numeric: tabular-nums; } .hours__closed { font-style: italic; color: var(--muted); } .hours__note { margin-top: 1.2rem; font-style: italic; font-size: 0.95rem; color: var(--muted); } @media (min-width: 900px) { .contact { grid-template-columns: minmax(0, 34rem) minmax(2rem, 1fr) minmax(0, 24rem); } .contact__loc { grid-column: 1; } .contact__hours { grid-column: 3; } } /* ── Voet ──────────────────────────────────────────────────────────── */ .site-footer { border-top: 1px solid var(--hair); padding: 3.5rem var(--gutter) 3rem; text-align: center; } .footer__brand { font-family: var(--serif); font-style: italic; font-size: 1.7rem; } .footer__sub { margin-top: 0.4rem; font-family: var(--sans); font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); } .footer__addr { margin-top: 1.8rem; color: var(--muted); } .footer__addr a { text-underline-offset: 0.3em; text-decoration-color: rgba(242, 231, 216, 0.35); } .footer__addr a:hover { text-decoration-color: var(--accent); } .footer__open { margin-top: 0.4rem; font-style: italic; color: var(--muted); } .disclaimer { margin-top: 2.75rem; } .disclaimer__text { font-family: var(--sans); font-size: 0.8rem; color: var(--muted); } .disclaimer__back { display: inline-flex; align-items: center; min-height: 2.75rem; padding: 0.5rem 0.75rem; margin-top: 0.3rem; font-family: var(--sans); font-size: 0.85rem; color: var(--accent); text-underline-offset: 0.3em; } /* De sticky reserveerbalk onderin is verwijderd: vastgeplakte balken onderin beeld willen we nergens meer. De reserveerknop staat bovenaan in de header en in de reserveer-sectie zelf. */