/* Reset ------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html, body, h1, h2, h3, p, ul, ol, li, table, th, td, figure { margin: 0; padding: 0; } /* Nothing on this site should ever render wider than its container. This is the rule that actually prevents it - do not delete it in a future cleanup pass, even though more specific rules (e.g. .dish__media img) also constrain their own images; this is the backstop for everything else, including anything added later. */ img, picture { display: block; max-width: 100%; height: auto; } /* Tokens -------------------------------------------------------------- */ :root { --green-deep: #1e4739; --paper: #ffffff; --ink: #2b2622; --brass: #c8901e; --sumac: #8c2f2a; --stone: #e4e2dc; --font-serif: Georgia, "Times New Roman", Times, serif; --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-arabic: "SF Arabic", "Geeza Pro", "Segoe UI", Tahoma, "Noto Naskh Arabic", sans-serif; --step--1: 0.875rem; --step-0: 1rem; --step-1: 1.25rem; --step-2: 1.563rem; --step-3: 1.953rem; --step-4: 2.441rem; --step-5: 3.052rem; /* COUPLED to the `sizes` string in eleventy.config.mjs (dishPictureShortcode). Both of these feed its breakpoint arithmetic - changing either without updating that string makes browsers pick the wrong image size, with no error anywhere. The arithmetic is written out in full there. */ --container-max: 1100px; --container-pad: 1.5rem; /* The header reads as navigation more clearly when it uses more of a wide window than the 1100px body container does - see .site-header__inner, which uses this instead of .container. */ --header-container-max: 1600px; } /* Shared container: header, hero and page content all align to this same max-width and left edge - see .site-header__inner, .hero__inner, .section, .page-title. */ .container { max-width: var(--container-max); margin-inline: auto; padding-inline: var(--container-pad); } /* Arabic text, wherever it appears - a whole Arabic page () or one inline snippet on a ro/en page (a dish's Arabic name, the header logo, the hero wordmark) - needs a font stack with real Arabic glyphs. Georgia (--font-serif) has none, so Arabic set in it silently falls back to whatever the browser picks on its own. Redefining --font-serif and --font-sans here fixes every rule that references them via var() for any descendant of a [lang="ar"] element; the direct `font-family` covers an element that has no font-family rule of its own to begin with. System fonts only, matching the rest of the site: SF Arabic/Geeza Pro (Apple), Segoe UI/Tahoma (Windows), Noto Naskh Arabic (Android). */ [lang="ar"] { --font-serif: var(--font-arabic); --font-sans: var(--font-arabic); font-family: var(--font-arabic); } /* Base ------------------------------------------------------------- */ /* Rubber-band overscroll (macOS/iOS) pulls the page past its own top or bottom and reveals the canvas behind it. overscroll-behavior: none stops the bounce outright; the background-colors below are a fallback for any browser that ignores that property, so the revealed strip reads as the header/footer's green rather than white. html's background is what actually paints that strip - but once html carries a background, body's no longer stretches to fill the viewport on a short page, so body needs an explicit min-height too (see the 404 page, the shortest one). Header and footer are both --green-deep, so this matches at both ends. */ html { overscroll-behavior: none; background-color: var(--green-deep); } body { background: var(--paper); background-color: var(--paper); min-height: 100vh; color: var(--ink); font-family: var(--font-sans); font-size: var(--step-0); line-height: 1.6; } h1, h2, h3 { font-family: var(--font-serif); color: var(--green-deep); line-height: 1.25; } a { color: var(--ink); } a:focus-visible { outline: 2px solid var(--brass); outline-offset: 2px; } /* Header - navigation, not a banner: kept short and non-sticky. A solid brass rule along the bottom is what actually separates it from the hero (same green, otherwise no boundary) and from the page body. ------- */ .site-header { background: var(--green-deep); color: var(--paper); border-bottom: 3px solid var(--brass); } .site-header__inner { /* Its own wider container, not the shared 1100px .container - the logo and nav move outward together, staying aligned with each other, while the hero/body/footer below keep the narrower measure. */ max-width: var(--header-container-max); margin-inline: auto; padding-inline: var(--container-pad); display: flex; flex-wrap: wrap; /* stretch (not center): the logo and nav both reach the same row height, which is what lets the active-page underline (below) sit a fixed, predictable distance above the header's own bottom rule. */ align-items: stretch; justify-content: space-between; gap: 0.75rem; padding-top: 0.5rem; /* This bottom padding is what keeps the active-page underline clear of the header's own border-bottom - see .site-header__nav a below. */ padding-bottom: 0.5rem; line-height: 1.2; } .site-header__name { display: flex; align-items: center; gap: 0.4rem; font-family: var(--font-serif); font-size: var(--step-1); font-weight: bold; color: var(--paper); text-decoration: none; } /* .brand-ar (see _includes/logo.njk) is the wordmark itself, shared by the header and the chooser page. In the header it needs no rule of its own - it just inherits the size and color .site-header__name already sets on its parent . On the chooser page it's sized up instead by the .chooser__wordmark modifier class, further down. */ /* .site-header__controls groups the page nav, the divider and the language switcher into one flex item so .site-header__inner's space-between still only ever balances two things (the logo and this group) - same layout this held before .site-header__nav wrapped only the 3 page links. Below 640px, this wrapper is display: contents (see the mobile media query further down) so its three children can be repositioned independently into a two-row grid; a plain div has no ARIA role to lose by doing that, which is why the split lives here and not on