/* * Dining Intelligence — front-end styles. * Ported from the v1 Dining Desk theme. Colors and fonts come from theme.json * presets (--wp--preset--color--*, --wp--preset--font-family--*, * --wp--preset--spacing--*) and settings.custom.di.* (--wp--custom--di--*). * Mobile-first. Block wrappers: .wp-block-di-; utilities: .di-*. * No color carries meaning alone: every status/badge also has text. */ /* --------------------------------------------------------------------- 0. Local aliases (all derived from theme.json) ------------------------------------------------------------------ */ :root { --di-bg: var(--wp--preset--color--paper); --di-surface: var(--wp--preset--color--white); --di-surface-2: var(--wp--custom--di--surface-2); --di-ink: var(--wp--preset--color--ink); --di-ink-2: var(--wp--custom--di--ink-soft); --di-ink-3: var(--wp--preset--color--muted); --di-rule: var(--wp--preset--color--line); --di-rule-soft: var(--wp--custom--di--rule-soft); --di-rule-strong: var(--wp--preset--color--ink); --di-accent: var(--wp--preset--color--flame); --di-ok: var(--wp--preset--color--verify); --di-ok-bg: var(--wp--custom--di--ok-bg); --di-verdict: var(--wp--custom--di--verdict); --di-verdict-bg: var(--wp--custom--di--verdict-bg); --di-warn: var(--wp--custom--di--warn); --di-warn-bg: var(--wp--custom--di--warn-bg); --di-bad: var(--wp--custom--di--bad); --di-bad-bg: var(--wp--custom--di--bad-bg); --di-neutral: var(--wp--custom--di--ink-soft); --di-neutral-bg: var(--wp--custom--di--neutral-bg); --di-link: var(--wp--custom--di--link); --di-focus: var(--wp--custom--di--focus); --di-font-display: var(--wp--preset--font-family--editorial-serif); --di-font-body: var(--wp--preset--font-family--reading-serif); --di-font-ui: var(--wp--preset--font-family--utility-sans); /* Fraunces variable axes. SOFT rounds the terminals; WONK swaps in the quirkier alternates. opsz is set per size class below — small optical sizes have sturdier stems, large ones finer detail. */ --di-display-axes: "SOFT" 40, "WONK" 0; --di-text-xs: var(--wp--preset--font-size--x-small); --di-text-sm: var(--wp--preset--font-size--small); --di-text-md: var(--wp--preset--font-size--regular); --di-text-lg: var(--wp--preset--font-size--medium); --di-text-xl: var(--wp--preset--font-size--medium-large); --di-text-2xl: 2rem; --di-text-3xl: var(--wp--preset--font-size--large); --di-space-1: var(--wp--preset--spacing--10); --di-space-2: var(--wp--preset--spacing--20); --di-space-3: var(--wp--preset--spacing--30); --di-space-4: var(--wp--preset--spacing--40); --di-space-5: var(--wp--preset--spacing--50); --di-space-6: var(--wp--preset--spacing--60); --di-space-7: var(--wp--preset--spacing--70); --di-space-8: var(--wp--preset--spacing--80); --di-radius-sm: var(--wp--custom--di--radius-sm); --di-radius: var(--wp--custom--di--radius); --di-radius-lg: var(--wp--custom--di--radius-lg); --di-radius-pill: var(--wp--custom--di--radius-pill); --di-shadow: var(--wp--custom--di--shadow); /* Depth is reserved for photography. UI surfaces are separated by rule and by ground colour, never by a drop shadow (ITMF spec). */ --di-shadow-media: var(--wp--custom--di--shadow-media); --di-nav-global: var(--wp--custom--di--nav-global); --di-nav-local: var(--wp--custom--di--nav-local); --di-section-gap: clamp(var(--wp--custom--di--section-gap-min), 6vw, var(--wp--custom--di--section-gap-max)); --di-measure: var(--wp--custom--di--measure); } /* --------------------------------------------------------------------- 0b. Type treatment Three roles, never mixed: Fraunces sets anything that carries a verdict (headlines, scores, the wordmark), Newsreader sets running prose, Jost sets every label, date and number that has to be scanned rather than read. ------------------------------------------------------------------ */ :root { color-scheme: light; } h1, h2, h3, h4, .di-card__score, .di-score__value, .di-consensus, .di-dek, .di-site-title { font-variation-settings: var(--di-display-axes), "opsz" 40; } h1, .di-score__value { font-variation-settings: var(--di-display-axes), "opsz" 96; } h3, h4, .di-card__score { font-variation-settings: var(--di-display-axes), "opsz" 28; } /* Running prose is the reading face; everything else stays on the UI face. */ .di-prose, .di-prose p, .di-prose li, .di-prose blockquote, .di-quote__text, .di-card__note, .entry-content p, .entry-content li { font-family: var(--di-font-body); } .di-prose h2, .di-prose h3, .di-prose h4, .entry-content h2, .entry-content h3 { font-family: var(--di-font-display); } /* --------------------------------------------------------------------- 1. Base ------------------------------------------------------------------ */ img, svg, video { max-width: 100%; height: auto; } h1, h2, h3, h4 { text-wrap: balance; letter-spacing: -0.015em; } table { border-collapse: collapse; width: 100%; font-size: var(--di-text-sm); } th, td { text-align: left; padding: var(--di-space-2) var(--di-space-3); border-bottom: 1px solid var(--di-rule); vertical-align: top; } th { font-weight: 600; color: var(--di-ink-2); font-size: var(--di-text-xs); text-transform: uppercase; letter-spacing: 0.06em; } button, input, select, textarea { font: inherit; color: inherit; } :focus-visible { outline: 3px solid var(--di-focus); outline-offset: 2px; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); white-space: nowrap; border: 0; padding: 0; margin: -1px; } .skip-link.screen-reader-text:focus { clip: auto; clip-path: none; width: auto; height: auto; left: var(--di-space-2); top: var(--di-space-2); z-index: 100; background: var(--di-ink); color: #fff; padding: var(--di-space-2) var(--di-space-4); } [hidden] { display: none !important; } .di-table-wrap { overflow-x: auto; } /* --------------------------------------------------------------------- 2. Layout primitives ------------------------------------------------------------------ */ .di-measure { max-width: var(--di-measure); } .di-section { padding-block: var(--di-space-6); border-top: 1px solid var(--di-rule); } .di-section--lead { border-top: 0; } .di-section__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--di-space-2) var(--di-space-4); margin-bottom: var(--di-space-4); padding-bottom: var(--di-space-2); border-bottom: 2px solid var(--di-rule-strong); } .di-section__head h2 { margin: 0; font-size: var(--di-text-xl); } .di-section__head .di-meta { margin: 0; } .di-kicker, .di-eyebrow { font-family: var(--di-font-ui); font-size: var(--di-text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--di-accent); margin: 0 0 var(--di-space-2); } .di-meta { color: var(--di-ink-3); font-size: var(--di-text-sm); font-family: var(--di-font-ui); font-variant-numeric: tabular-nums; } .di-meta a { color: inherit; } .di-dek { font-family: var(--di-font-display); font-size: var(--di-text-xl); font-weight: 400; line-height: var(--wp--custom--di--leading-snug); color: var(--di-ink-2); margin: 0 0 var(--di-space-4); } .di-grid { display: grid; gap: var(--di-space-4); grid-template-columns: 1fr; } .di-empty { padding: var(--di-space-5); border: 1px dashed var(--di-rule); border-radius: var(--di-radius-lg); color: var(--di-ink-2); background: var(--di-surface); } .di-empty p:last-child { margin: 0; } .di-prose { max-width: var(--di-measure); font-size: 1.1875rem; line-height: var(--wp--custom--di--leading-body); } .di-prose > * + * { margin-top: var(--di-space-4); } .di-prose h2 { margin-top: var(--di-space-6); } .di-prose h3 { margin-top: var(--di-space-5); } .di-prose blockquote { border-left: 3px solid var(--di-accent); margin-left: 0; padding-left: var(--di-space-4); font-family: var(--di-font-display); font-style: italic; } .di-prose figcaption, .wp-caption-text { font-size: var(--di-text-sm); color: var(--di-ink-3); } @media (min-width: 48em) { .di-section { padding-block: var(--di-space-7); } .di-grid--2 { grid-template-columns: repeat(2, 1fr); } .di-grid--3 { grid-template-columns: repeat(3, 1fr); } .di-grid--split { grid-template-columns: 2fr 1fr; gap: var(--di-space-6); } } @media (min-width: 64em) { .di-grid--4 { grid-template-columns: repeat(4, 1fr); } } /* --------------------------------------------------------------------- 3. Header / footer ------------------------------------------------------------------ */ .di-header { background: var(--di-surface); } .di-header__bar { gap: var(--di-space-3) var(--di-space-5); } .di-brand__name a { text-decoration: none; color: var(--di-ink); } .di-brand__tag { display: none; color: var(--di-ink-3); } .di-nav a { color: var(--di-ink); text-decoration: none; border-bottom: 2px solid transparent; } .di-nav a:hover, .di-nav .current-menu-item > a { border-bottom-color: var(--di-accent); } .di-dateline { color: var(--di-ink-3); border-top: 1px solid var(--di-rule); padding-top: var(--di-space-1); margin-top: var(--di-space-3); text-transform: uppercase; letter-spacing: 0.06em; } .di-search-form { display: flex; gap: var(--di-space-2); } .di-search-form input[type="search"] { flex: 1; min-width: 0; padding: 0.55rem 0.8rem; border: 1px solid var(--di-rule); border-radius: var(--di-radius); background: var(--di-surface); } .di-header .di-search-form { display: none; } @media (min-width: 48em) { .di-brand__tag { display: block; } .di-header .di-search-form { display: flex; } .di-header .di-search-form input[type="search"] { width: 14rem; } } .di-footer__heading { font-size: var(--di-text-md); font-family: var(--di-font-ui); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 var(--di-space-3); } .di-footer__nav a { color: var(--di-ink); } .di-footer__legal { margin-top: var(--di-space-6); color: var(--di-ink-3); gap: var(--di-space-3); } .di-footer__legal p { margin: 0; } .di-region-note { margin-top: var(--di-space-3); } /* --------------------------------------------------------------------- 4. Buttons, forms, chips, pills, badges, banners ------------------------------------------------------------------ */ .di-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--di-space-2); background: var(--di-ink); color: #fff; border: 1px solid var(--di-ink); border-radius: var(--di-radius); padding: 0.6rem 1.1rem; font-weight: 600; font-size: var(--di-text-sm); text-decoration: none; cursor: pointer; line-height: 1.2; } .di-btn:hover { background: var(--di-accent); border-color: var(--di-accent); color: #fff; } .di-btn--secondary { background: transparent; color: var(--di-ink); } .di-btn--secondary:hover { background: var(--di-surface-2); color: var(--di-ink); border-color: var(--di-ink); } .di-btn--accent { background: var(--di-accent); border-color: var(--di-accent); } .di-btn--accent:hover { background: var(--di-ink); border-color: var(--di-ink); } .di-btn[disabled], .di-btn[aria-disabled="true"] { opacity: 0.6; cursor: not-allowed; } .di-field { display: flex; flex-direction: column; gap: var(--di-space-1); margin-bottom: var(--di-space-4); } .di-field label, .di-legend { font-size: var(--di-text-sm); font-weight: 600; color: var(--di-ink-2); } .di-field input[type="text"], .di-field input[type="email"], .di-field input[type="url"], .di-field input[type="search"], .di-field select, .di-field textarea { width: 100%; padding: 0.65rem 0.8rem; border: 1px solid var(--di-rule); border-radius: var(--di-radius); background: var(--di-surface); } .di-field textarea { min-height: 7rem; resize: vertical; } .di-hint { font-size: var(--di-text-xs); color: var(--di-ink-3); } .di-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .di-notice { padding: var(--di-space-3) var(--di-space-4); border-radius: var(--di-radius); font-size: var(--di-text-sm); border: 1px solid; margin-bottom: var(--di-space-3); } .di-notice--ok { background: var(--di-ok-bg); border-color: var(--di-ok); color: var(--di-ok); } .di-notice--err { background: var(--di-bad-bg); border-color: var(--di-bad); color: var(--di-bad); } .di-notice:empty { display: none; } .di-chips { display: flex; flex-wrap: wrap; gap: var(--di-space-2); margin: 0; padding: 0; list-style: none; } .di-chip { position: relative; display: inline-block; } .di-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; } .di-chip span, a.di-chip { display: inline-block; padding: 0.35rem 0.8rem; border-radius: var(--di-radius-pill); border: 1px solid var(--di-rule); background: var(--di-surface); font-size: var(--di-text-sm); color: var(--di-ink); cursor: pointer; text-decoration: none; line-height: 1.3; } .di-chip input:checked + span { background: var(--di-ink); color: #fff; border-color: var(--di-ink); } .di-chip input:checked + span::before { content: "✓ "; } .di-chip input:focus-visible + span { outline: 3px solid var(--di-focus); outline-offset: 2px; } .di-chip:hover span, a.di-chip:hover { border-color: var(--di-ink); } .di-chip-group { margin-bottom: var(--di-space-3); border: 0; padding: 0; } .di-chip-group .di-legend { display: block; margin-bottom: var(--di-space-2); } .di-chip-clear { background: none; border: 0; padding: 0; margin-top: var(--di-space-2); text-decoration: underline; cursor: pointer; } .di-pill { display: inline-flex; align-items: center; gap: 0.35em; padding: 0.15rem 0.6rem; border-radius: var(--di-radius-pill); font-size: var(--di-text-xs); font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; line-height: 1.5; white-space: nowrap; background: var(--di-neutral-bg); color: var(--di-neutral); text-decoration: none; } .di-pill--type { background: var(--di-ink); color: #fff; } .di-pill--type.is-news { background: var(--di-accent); } .di-pill--type.is-check-in { background: var(--di-ok); } .di-pill--type.is-guide { background: var(--di-link); } .di-pill--type.is-opinion { background: var(--di-warn); } .di-pill--type.is-sponsored { background: var(--di-warn-bg); color: var(--di-warn); border: 1px solid var(--di-warn); } .di-pill--type.is-guest-check { background: var(--di-surface-2); color: var(--di-ink); border: 1px solid var(--di-rule); } .di-pill--dept { background: transparent; color: var(--di-ink-2); border: 1px solid var(--di-rule); } .di-status { display: inline-flex; align-items: center; gap: 0.4em; font-size: var(--di-text-sm); font-weight: 700; padding: 0.2rem 0.7rem; border-radius: var(--di-radius-pill); } .di-status::before { content: ""; width: 0.55em; height: 0.55em; border-radius: 50%; background: currentColor; } .di-status.is-recommended { background: var(--di-ok-bg); color: var(--di-ok); } .di-status.is-limited, .di-status.is-revisit { background: var(--di-warn-bg); color: var(--di-warn); } /* A "Not Recommended" verdict is a considered editorial judgment about a real business, not an error state. It reads in neutral ink with a rule for presence — alarm red is reserved for things that are actually broken. */ .di-status.is-not-recommended { background: var(--di-verdict-bg); color: var(--di-verdict); border-radius: var(--di-radius); box-shadow: inset 3px 0 0 var(--di-verdict); padding-left: 0.85rem; } .di-status.is-not-recommended::before { display: none; } .di-status.is-closed { background: var(--di-ink); color: #fff; } .di-status.is-directory { background: var(--di-neutral-bg); color: var(--di-neutral); } .di-badge { display: inline-block; font-size: var(--di-text-xs); font-weight: 700; padding: 0.1rem 0.5rem; border-radius: var(--di-radius-sm); text-transform: uppercase; letter-spacing: 0.05em; } .di-badge--added, .di-badge--confirmed_current { background: var(--di-ok-bg); color: var(--di-ok); } .di-badge--kept, .di-badge--unverified { background: var(--di-neutral-bg); color: var(--di-neutral); } .di-badge--seasonal, .di-badge--limited { background: var(--di-warn-bg); color: var(--di-warn); } .di-badge--removed, .di-badge--temporarily_unavailable, .di-badge--discontinued { background: var(--di-bad-bg); color: var(--di-bad); } .di-banner { padding: var(--di-space-3) var(--di-space-4); border-left: 4px solid; border-radius: var(--di-radius); font-size: var(--di-text-sm); margin-bottom: var(--di-space-4); background: var(--di-surface); } .di-banner--info { border-color: var(--di-link); } .di-banner--warn { border-color: var(--di-warn); background: var(--di-warn-bg); color: var(--di-warn); } .di-banner--sponsored { border-color: var(--di-warn); background: var(--di-warn-bg); color: var(--di-warn); font-weight: 600; } .di-banner--disclosure { border-color: var(--di-ink); background: var(--di-surface-2); } .di-banner p:last-child { margin: 0; } .di-banner strong { text-transform: uppercase; letter-spacing: 0.06em; font-size: var(--di-text-xs); display: block; margin-bottom: var(--di-space-1); } /* --------------------------------------------------------------------- 5. Cards and lists ------------------------------------------------------------------ */ .di-card { display: flex; flex-direction: column; gap: var(--di-space-2); background: var(--di-surface); border: 1px solid var(--di-rule); border-radius: var(--di-radius); padding: var(--di-space-4); position: relative; } .di-card:hover { box-shadow: var(--di-shadow); } .di-card__media { margin: calc(-1 * var(--di-space-4)) calc(-1 * var(--di-space-4)) var(--di-space-2); } .di-card__media img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; border-radius: var(--di-radius-lg) var(--di-radius) 0 0; } .di-card__title { font-size: var(--di-text-xl); margin: 0; } .di-card__title a { color: var(--di-ink); text-decoration: none; } .di-card__title a::after { content: ""; position: absolute; inset: 0; } .di-card__title a:hover { text-decoration: underline; } .di-card__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--di-space-2); font-size: var(--di-text-sm); color: var(--di-ink-2); } .di-card__score { font-family: var(--di-font-display); font-weight: 700; font-size: var(--di-text-2xl); line-height: 1; color: var(--di-ink); font-variant-numeric: tabular-nums; letter-spacing: -0.03em; } .di-card__why { margin: 0; color: var(--di-ink-2); font-size: var(--di-text-md); } .di-card__foot { margin-top: auto; display: flex; flex-wrap: wrap; gap: var(--di-space-2) var(--di-space-3); font-size: var(--di-text-sm); color: var(--di-ink-3); position: relative; z-index: 1; } .di-card__foot a { position: relative; } .di-card--story .di-card__title { font-size: var(--di-text-lg); } .di-card--lead .di-card__title { font-size: var(--di-text-2xl); } .di-card--lead .di-card__media img { aspect-ratio: 16 / 9; } .di-card--compact { padding: var(--di-space-3); } .di-card__warn { font-size: var(--di-text-sm); color: var(--di-warn); font-weight: 600; } .di-removed { opacity: 0.85; } .di-list-plain { list-style: none; margin: 0; padding: 0; } .di-list-plain > li { padding-block: var(--di-space-3); border-bottom: 1px solid var(--di-rule); } .di-list-plain > li:last-child { border-bottom: 0; } .di-changes li { display: grid; grid-template-columns: 5.5rem 1fr; gap: var(--di-space-3); } .di-changes time { font-size: var(--di-text-xs); color: var(--di-ink-3); text-transform: uppercase; letter-spacing: 0.06em; padding-top: 0.3em; } .di-changes h3 { font-size: var(--di-text-lg); margin: 0 0 var(--di-space-1); } .di-changes h3 a { color: var(--di-ink); text-decoration: none; } .di-changes h3 a:hover { text-decoration: underline; } .di-pagination ul { list-style: none; display: flex; flex-wrap: wrap; gap: var(--di-space-2); padding: 0; margin: var(--di-space-6) 0 0; } .di-pagination a, .di-pagination span { display: inline-block; padding: 0.4rem 0.8rem; border: 1px solid var(--di-rule); border-radius: var(--di-radius); text-decoration: none; color: var(--di-ink); font-size: var(--di-text-sm); } .di-pagination .current { background: var(--di-ink); color: #fff; border-color: var(--di-ink); } /* --------------------------------------------------------------------- 6. Homepage blocks ------------------------------------------------------------------ */ .wp-block-di-mood-search { padding-block: var(--di-space-6) var(--di-space-5); } /* The prompt is a spoken line, not a label — Fraunces italic (a real italic, self-hosted, never a synthesised slant). What you type continues the sentence, so the field is italic too. */ .wp-block-di-mood-search h1 { font-size: var(--di-text-3xl); margin-bottom: var(--di-space-4); font-style: italic; font-synthesis-style: none; } .di-mood__row input[type="search"] { font-family: var(--di-font-body); font-style: italic; font-synthesis-style: none; } .di-mood__row input[type="search"]::placeholder { font-style: italic; color: var(--di-ink-3); opacity: 1; } .di-mood__form { background: var(--di-surface); border: 1px solid var(--di-rule); border-radius: var(--di-radius-lg); padding: var(--di-space-4); box-shadow: var(--di-shadow); } .di-mood__row { display: flex; gap: var(--di-space-2); margin-bottom: var(--di-space-4); } .di-mood__row input[type="search"] { flex: 1; min-width: 0; padding: 0.8rem 1rem; font-size: var(--di-text-lg); border: 1px solid var(--di-rule); border-radius: var(--di-radius); background: var(--di-surface); } .di-mood__note { font-size: var(--di-text-xs); color: var(--di-ink-3); margin: var(--di-space-2) 0 0; } .di-pass__line { margin-top: calc(-1 * var(--di-space-3)); margin-bottom: var(--di-space-4); } .di-pass__intro { max-width: var(--di-measure); color: var(--di-ink-2); } .di-community { background: var(--di-surface-2); border-radius: var(--di-radius); padding: var(--di-space-5); } .di-community__flag { display: inline-block; font-size: var(--di-text-xs); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--di-warn); margin-bottom: var(--di-space-2); } .di-briefing { background: var(--di-ink); color: #fff; border-radius: var(--di-radius); padding: var(--di-space-6) var(--di-space-5); } .di-briefing h2, .di-briefing .di-kicker { color: #fff; } .di-briefing p { color: #e6e2d8; max-width: var(--di-measure); } .di-briefing .di-field label { color: #e6e2d8; } .di-briefing .di-field input[type="email"] { border-color: #5a564d; background: #fff; color: var(--di-ink); } .di-briefing .di-btn { background: #fff; color: var(--di-ink); border-color: #fff; } .di-briefing .di-btn:hover { background: var(--di-accent); color: #fff; border-color: var(--di-accent); } .di-briefing .di-notice--ok { background: #1f4a30; color: #fff; border-color: #6fbf8a; } .di-briefing .di-notice--err { background: #4d1a1a; color: #fff; border-color: #f2a0a0; } .di-subscribe__row { display: flex; flex-direction: column; gap: var(--di-space-2); } .di-subscribe__row .di-field { flex: 1; margin: 0; } @media (min-width: 40em) { .di-subscribe__row { flex-direction: row; align-items: flex-end; } } @media (min-width: 48em) { .wp-block-di-mood-search { padding-block: var(--di-space-7) var(--di-space-6); } } /* --------------------------------------------------------------------- 7. Directory / search ------------------------------------------------------------------ */ .di-archive__head { padding-block: var(--di-space-5) var(--di-space-4); } .di-filters { background: var(--di-surface); border: 1px solid var(--di-rule); border-radius: var(--di-radius); padding: var(--di-space-4); margin-bottom: var(--di-space-5); } .di-filters__grid { display: grid; gap: var(--di-space-3); grid-template-columns: 1fr; } .di-filters__grid .di-field { margin: 0; } .di-filters__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--di-space-3); margin-top: var(--di-space-3); } .di-toggle { display: inline-flex; align-items: center; gap: var(--di-space-2); font-size: var(--di-text-sm); font-weight: 600; } .di-toggle input { width: 1.1rem; height: 1.1rem; } .di-results__head { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: var(--di-space-2); margin-bottom: var(--di-space-4); } .di-results__count { color: var(--di-ink-3); font-size: var(--di-text-sm); margin: 0; } @media (min-width: 48em) { .di-filters__grid { grid-template-columns: repeat(3, 1fr); } .di-filters__grid .di-field--wide { grid-column: 1 / -1; } } /* --------------------------------------------------------------------- 8. Restaurant profile blocks ------------------------------------------------------------------ */ .wp-block-di-restaurant-header { padding-block: var(--di-space-5) var(--di-space-4); } .di-profile__line { font-size: var(--di-text-lg); color: var(--di-ink-2); margin: 0 0 var(--di-space-3); } .di-profile__line a { color: inherit; } .di-profile__actions { display: flex; flex-wrap: wrap; gap: var(--di-space-2); margin-top: var(--di-space-3); } .di-profile__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--di-radius); } .di-scores { display: grid; gap: var(--di-space-4); grid-template-columns: 1fr; margin-block: var(--di-space-4); } .di-score { background: var(--di-surface); border: 1px solid var(--di-rule); border-radius: var(--di-radius-lg); padding: var(--di-space-4); } .di-score--primary { border-color: var(--di-ink); border-width: 2px; } .di-score__label { font-size: var(--di-text-xs); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--di-ink-2); margin: 0 0 var(--di-space-2); } .di-score__value { font-family: var(--di-font-display); font-weight: 700; font-size: 4.25rem; line-height: 0.92; letter-spacing: -0.035em; margin: 0; font-variant-numeric: tabular-nums; } .di-score__value small { font-size: var(--di-text-md); font-family: var(--di-font-ui); font-weight: 400; color: var(--di-ink-3); margin-left: 0.2em; } .di-score__meta { margin: var(--di-space-2) 0 0; font-size: var(--di-text-sm); color: var(--di-ink-2); } .di-score__note { margin: var(--di-space-2) 0 0; font-size: var(--di-text-sm); color: var(--di-warn); font-weight: 600; } .di-score__empty { font-size: var(--di-text-md); color: var(--di-ink-2); margin: 0; } .di-consensus { font-family: var(--di-font-display); font-size: var(--di-text-xl); line-height: var(--wp--custom--di--leading-snug); margin: var(--di-space-4) 0; max-width: var(--di-measure); } .di-quotes { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--di-space-4); } .di-quote { border-left: 3px solid var(--di-accent); padding-left: var(--di-space-4); margin: 0; } .di-quote p { font-family: var(--di-font-display); font-size: var(--di-text-lg); margin: 0 0 var(--di-space-2); } .di-quote footer { font-size: var(--di-text-sm); color: var(--di-ink-3); } .di-freshness { display: grid; gap: var(--di-space-3); grid-template-columns: 1fr 1fr; background: var(--di-surface-2); border-radius: var(--di-radius); padding: var(--di-space-4); margin: 0; } .di-freshness div { display: flex; flex-direction: column; gap: 0.1rem; } .di-freshness dt { font-size: var(--di-text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--di-ink-3); font-weight: 700; } .di-freshness dd { margin: 0; font-size: var(--di-text-sm); font-weight: 600; } .di-freshness dd span { display: block; font-weight: 400; color: var(--di-ink-3); font-size: var(--di-text-xs); } .di-facts { margin: 0; } .di-facts div { display: grid; grid-template-columns: 7.5rem 1fr; gap: var(--di-space-3); padding-block: var(--di-space-2); border-bottom: 1px solid var(--di-rule); } .di-facts dt { font-size: var(--di-text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--di-ink-3); font-weight: 700; padding-top: 0.3em; } .di-facts dd { margin: 0; font-size: var(--di-text-sm); } .di-facts dd .di-meta { display: block; } .di-hours { font-size: var(--di-text-sm); } .di-hours th { width: 7rem; color: var(--di-ink-2); text-transform: none; letter-spacing: 0; font-size: var(--di-text-sm); font-weight: 400; } .di-hours tr.is-today th, .di-hours tr.is-today td { font-weight: 700; } .di-two-col { display: grid; gap: var(--di-space-4); grid-template-columns: 1fr; } .di-two-col ul { padding-left: 1.2em; } .di-fit { margin-top: var(--di-space-5); } .di-order { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--di-space-3); } .di-order li { padding: var(--di-space-3); background: var(--di-surface); border: 1px solid var(--di-rule); border-radius: var(--di-radius); } .di-order strong { font-family: var(--di-font-display); font-size: var(--di-text-lg); display: block; } .di-menu__name { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--di-space-3); margin: var(--di-space-5) 0 var(--di-space-1); } .di-history li { display: flex; flex-wrap: wrap; gap: var(--di-space-2) var(--di-space-3); align-items: baseline; } .di-history time { font-size: var(--di-text-sm); color: var(--di-ink-3); min-width: 7rem; } .di-report { background: var(--di-surface); border: 1px solid var(--di-rule); border-radius: var(--di-radius); padding: var(--di-space-5); max-width: var(--di-measure); margin-top: var(--di-space-6); } .di-report p.di-meta { margin-bottom: var(--di-space-4); } .di-concept { margin-block: var(--di-space-5); } @media (min-width: 48em) { .di-scores { grid-template-columns: 3fr 2fr; } .di-freshness { grid-template-columns: repeat(4, 1fr); } .di-two-col { grid-template-columns: 1fr 1fr; } } /* --------------------------------------------------------------------- 9. Story ------------------------------------------------------------------ */ .di-story__meta--head, .di-story__meta--all { padding-block: var(--di-space-5) 0; max-width: 56rem; } .di-story__labels { display: flex; flex-wrap: wrap; gap: var(--di-space-2); margin-bottom: var(--di-space-3); } .di-story__labels a { text-decoration: none; } .di-story__media img { border-radius: var(--di-radius); width: 100%; } .di-byline { display: flex; flex-wrap: wrap; align-items: center; gap: var(--di-space-2) var(--di-space-3); font-size: var(--di-text-sm); color: var(--di-ink-2); margin: var(--di-space-3) 0 0; } .di-byline__name { font-weight: 700; color: var(--di-ink); } .di-byline__title { color: var(--di-ink-3); } .di-dates { display: flex; flex-wrap: wrap; gap: var(--di-space-2) var(--di-space-4); font-size: var(--di-text-sm); color: var(--di-ink-3); margin: var(--di-space-2) 0 var(--di-space-4); padding: 0; list-style: none; } .di-dates strong { color: var(--di-ink-2); font-weight: 600; } .di-corrections { border-top: 2px solid var(--di-rule-strong); margin-top: var(--di-space-6); padding-top: var(--di-space-4); max-width: var(--di-measure); } .di-corrections ul { list-style: none; padding: 0; margin: 0; } .di-corrections li { padding-block: var(--di-space-2); border-bottom: 1px solid var(--di-rule); font-size: var(--di-text-sm); } .di-corrections time { display: block; color: var(--di-ink-3); font-size: var(--di-text-xs); text-transform: uppercase; letter-spacing: 0.06em; } .di-people { display: flex; flex-wrap: wrap; gap: var(--di-space-2); list-style: none; padding: 0; margin: 0; } /* --------------------------------------------------------------------- 10. Editor / person, edition, methodology, misc ------------------------------------------------------------------ */ .di-author { display: grid; gap: var(--di-space-5); grid-template-columns: 1fr; padding-block: var(--di-space-6); } .di-author__photo img { width: 10rem; height: 10rem; object-fit: cover; border-radius: 50%; } .di-author__photo--empty { width: 10rem; height: 10rem; border-radius: 50%; background: var(--di-surface-2); display: grid; place-items: center; font-family: var(--di-font-display); font-size: var(--di-text-3xl); color: var(--di-ink-3); } .di-author__stats { display: flex; flex-wrap: wrap; gap: var(--di-space-4); margin: var(--di-space-3) 0; padding: 0; list-style: none; } .di-author__stats strong { display: block; font-family: var(--di-font-display); font-size: var(--di-text-2xl); line-height: 1; } .di-author__stats span { font-size: var(--di-text-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--di-ink-3); } @media (min-width: 48em) { .di-author { grid-template-columns: 12rem 1fr; } } .di-edition__head { padding-block: var(--di-space-3) var(--di-space-4); border-bottom: 2px solid var(--di-rule-strong); margin-bottom: var(--di-space-5); } .di-edition__editor { display: flex; align-items: center; gap: var(--di-space-3); font-size: var(--di-text-sm); color: var(--di-ink-2); } .di-edition__editor img { width: 2.5rem; height: 2.5rem; border-radius: 50%; object-fit: cover; } .di-methodology h2 { border-bottom: 2px solid var(--di-rule-strong); padding-bottom: var(--di-space-2); } .di-methodology .di-scorecard table { max-width: 32rem; } .di-methodology .di-callout { background: var(--di-surface-2); padding: var(--di-space-4); border-radius: var(--di-radius); font-family: var(--di-font-display); font-size: var(--di-text-xl); } .di-404 { padding-block: var(--di-space-8); text-align: center; } .di-404 .di-search-form { max-width: 28rem; margin: var(--di-space-5) auto 0; } .di-plugin-inactive .di-status.is-directory { border: 1px dashed var(--di-rule); } /* --------------------------------------------------------------------- 11. Typographic stand-ins Where a card would otherwise show a grey rectangle, the words carry the slot. Decorative (the same title is real text below), so it is aria-hidden in the markup; here it only has to read as type, never as a failed image. ------------------------------------------------------------------ */ .di-typeset { display: flex; flex-direction: column; justify-content: flex-end; gap: var(--di-space-2); aspect-ratio: 3 / 2; padding: var(--di-space-4); background: var(--di-surface-2); border-bottom: 2px solid var(--di-rule-strong); border-radius: var(--di-radius) var(--di-radius) 0 0; } .di-typeset__label { font-family: var(--di-font-ui); font-size: var(--di-text-xs); font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--di-accent); } .di-typeset__line { font-family: var(--di-font-display); font-size: var(--di-text-xl); line-height: var(--wp--custom--di--leading-tight); color: var(--di-ink-2); font-variation-settings: var(--di-display-axes), "opsz" 40; } .di-card--lead .di-typeset, .di-card--front-lead .di-typeset { aspect-ratio: 16 / 9; } .di-card--front-secondary .di-typeset, .di-card--rail .di-typeset { aspect-ratio: 5 / 3; padding: var(--di-space-3); } .di-card--front-secondary .di-typeset__line, .di-card--rail .di-typeset__line { font-size: var(--di-text-lg); } /* --------------------------------------------------------------------- 12. di/front-lead — one lead story, two stacked secondaries Mobile is a single column in source order, so the lead is first without any reordering. Desktop is the 1.6fr / 1fr split from CONTRACT-v3 §3.1. With one story the grid collapses to a single column rather than leaving an empty rail beside it. ------------------------------------------------------------------ */ .di-frontlead__grid { display: grid; gap: var(--di-space-5); grid-template-columns: 1fr; align-items: start; } .di-frontlead__rail { display: grid; gap: var(--di-space-4); align-content: start; } .di-card--front-lead { border: 0; padding: 0; background: transparent; } .di-card--front-lead:hover { box-shadow: none; } .di-card--front-lead .di-card__media { margin: 0 0 var(--di-space-3); } .di-card--front-lead .di-card__media img, .di-card--front-lead .di-typeset { border-radius: var(--di-radius-lg); } .di-card--front-lead .di-card__media img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; } .di-card--front-lead .di-kicker { margin-bottom: var(--di-space-1); } .di-card--front-lead .di-card__title { font-size: var(--di-text-3xl); line-height: var(--wp--custom--di--leading-tight); } .di-card--front-lead .di-card__why { font-family: var(--di-font-body); font-size: var(--di-text-lg); line-height: var(--wp--custom--di--leading-snug); color: var(--di-ink-2); max-width: var(--di-measure); } .di-card--front-secondary { display: grid; grid-template-columns: 6.5rem 1fr; gap: var(--di-space-3); border: 0; border-top: 1px solid var(--di-rule); border-radius: 0; padding: var(--di-space-4) 0 0; background: transparent; } .di-card--front-secondary:hover { box-shadow: none; } .di-frontlead__rail > .di-card--front-secondary:first-child { border-top: 0; padding-top: 0; } .di-card--front-secondary .di-card__media { grid-row: 1 / span 4; margin: 0; } .di-card--front-secondary .di-card__media img, .di-card--front-secondary .di-typeset { border-radius: var(--di-radius-lg); } .di-card--front-secondary .di-card__media img { width: 100%; aspect-ratio: 5 / 3; object-fit: cover; } .di-card--front-secondary .di-card__title { font-size: var(--di-text-lg); } .di-card--front-secondary .di-card__row, .di-card--front-secondary .di-card__foot { font-size: var(--di-text-xs); } @media (min-width: 48em) { .di-frontlead__grid { grid-template-columns: 1.6fr 1fr; gap: var(--di-space-6); } .di-frontlead--solo .di-frontlead__grid { grid-template-columns: 1fr; } .di-frontlead--solo .di-card--front-lead .di-card__why { font-size: var(--di-text-xl); } .di-frontlead__rail { border-left: 1px solid var(--di-rule); padding-left: var(--di-space-5); } } /* --------------------------------------------------------------------- 13. di/rail — native scroll-snap carousel The track scrolls with no script at all; the arrows are progressive enhancement (rendered hidden, revealed and end-disabled by theme.js). Smooth scrolling is opt-out, not opt-in, for reduced-motion readers. ------------------------------------------------------------------ */ .di-rail__frame { position: relative; } .di-rail__track { display: flex; gap: var(--di-space-4); align-items: stretch; list-style: none; margin: 0; padding: var(--di-space-1) 0 var(--di-space-3); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-padding-inline: var(--di-space-1); overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; } .di-rail__track:focus-visible { outline: 3px solid var(--di-focus); outline-offset: 4px; } .di-rail__item { flex: 0 0 min(80vw, 20rem); display: flex; scroll-snap-align: start; } .di-rail__item > .di-card { flex: 1 1 auto; width: 100%; } .di-rail__hint { margin: 0; color: var(--di-ink-3); } .di-rail__nav { position: absolute; top: calc(50% - 1.4rem); z-index: 2; display: grid; place-items: center; width: 2.5rem; height: 2.5rem; background: var(--di-surface); color: var(--di-ink); border: 1px solid var(--di-rule-strong); border-radius: 50%; box-shadow: var(--di-shadow); cursor: pointer; font-size: var(--di-text-md); line-height: 1; } .di-rail__nav:hover:not([disabled]) { background: var(--di-ink); color: var(--di-surface); } .di-rail__nav[disabled] { opacity: 0.35; cursor: default; } .di-rail__nav--prev { left: calc(-1 * var(--di-space-3)); } .di-rail__nav--next { right: calc(-1 * var(--di-space-3)); } .di-card--rail { height: 100%; } .di-card--rail .di-card__media img, .di-card--rail .di-typeset { aspect-ratio: 5 / 3; } .di-card--rail .di-card__title { font-size: var(--di-text-lg); } @media (prefers-reduced-motion: no-preference) { .di-rail__track { scroll-behavior: smooth; } } @media (min-width: 48em) { .di-rail__item { flex-basis: 21rem; } .di-rail__nav--prev { left: calc(-1 * var(--di-space-5)); } .di-rail__nav--next { right: calc(-1 * var(--di-space-5)); } } /* --------------------------------------------------------------------- 14. Near-me search (ADR-0018) The whole block is [hidden] in the markup and revealed by theme.js only in a secure context with a Geolocation API, so these rules describe a control that a reader can actually use. ------------------------------------------------------------------ */ .di-near { margin-bottom: var(--di-space-4); padding-top: var(--di-space-3); border-top: 1px solid var(--di-rule-soft); } .di-near__row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--di-space-2) var(--di-space-3); } .di-near__btn { white-space: nowrap; } .di-near__pin { flex: none; } .di-near__radius { display: inline-flex; align-items: center; gap: var(--di-space-2); font-size: var(--di-text-sm); color: var(--di-ink-2); } .di-near__radius select { padding: 0.4rem 0.6rem; border: 1px solid var(--di-rule); border-radius: var(--di-radius); background: var(--di-surface); font-size: var(--di-text-sm); } .di-near__chip { display: inline-flex; align-items: center; gap: 0.4em; padding: 0.25rem 0.75rem; border-radius: var(--di-radius-pill); background: var(--di-ok-bg); color: var(--di-ok); font-size: var(--di-text-sm); font-weight: 700; } .di-near__chip::before { content: ""; width: 0.5em; height: 0.5em; border-radius: 50%; background: currentColor; } .di-near__clear { background: none; border: 0; padding: 0; color: var(--di-ink-2); font-size: var(--di-text-sm); text-decoration: underline; cursor: pointer; } .di-near__consent, .di-near__status { margin: var(--di-space-2) 0 0; font-size: var(--di-text-xs); color: var(--di-ink-3); max-width: var(--di-measure); } .di-near__status:empty { display: none; } .di-near[data-di-near-state="requesting"] .di-near__status { color: var(--di-ink-2); font-weight: 600; } .di-near[data-di-near-state="denied"] .di-near__status { color: var(--di-warn); font-weight: 600; } .di-results__near { margin: 0 0 var(--di-space-3); font-size: var(--di-text-sm); color: var(--di-ink-3); } .di-card__distance { font-weight: 600; color: var(--di-ink-2); font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------------- 15. Photography — figures and designed empty zones (ADR-0016 / ADR-0017) Credits and captions are always visible: a photograph on this site is somebody's work, and the licence was granted on that basis. ------------------------------------------------------------------ */ .di-gallery__note, .di-gallery__ask { max-width: var(--di-measure); color: var(--di-ink-3); font-size: var(--di-text-sm); margin: 0 0 var(--di-space-5); } .di-gallery__lead { margin-bottom: var(--di-space-5); } .di-gallery__lead img { width: 100%; border-radius: var(--di-radius-lg); } .di-zone { margin-bottom: var(--di-space-6); } .di-zone:last-child { margin-bottom: 0; } .di-zone__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--di-space-2) var(--di-space-3); margin-bottom: var(--di-space-3); } .di-zone__title { margin: 0; font-size: var(--di-text-lg); } .di-zone__brief { margin: 0; font-size: var(--di-text-sm); color: var(--di-ink-3); } .di-zone__grid { display: grid; gap: var(--di-space-4); grid-template-columns: 1fr; } .di-figure { margin: 0; } .di-figure img { width: 100%; border-radius: var(--di-radius); display: block; } .di-figure__caption { margin-top: var(--di-space-2); font-size: var(--di-text-sm); color: var(--di-ink-3); } .di-figure__text { display: block; color: var(--di-ink-2); } .di-figure__credit { display: block; font-size: var(--di-text-xs); text-transform: uppercase; letter-spacing: 0.06em; } .di-figure__embed { border-radius: var(--di-radius); overflow: hidden; } .di-figure__embed iframe, .di-figure__embed blockquote { max-width: 100% !important; margin: 0 !important; } .di-figure__link { margin: 0; padding: var(--di-space-4); background: var(--di-surface-2); border-radius: var(--di-radius); font-size: var(--di-text-sm); } .di-figure__source { margin: var(--di-space-2) 0 0; font-size: var(--di-text-xs); color: var(--di-ink-3); } /* * Empty zone. A ruled panel woven from the brand neutrals: legible as a * deliberate piece of design, never as a photograph of this restaurant and * never as an image that failed to load. Every word in it is real text; only * the weave is decorative. */ .di-zone__panel { position: relative; display: grid; place-items: center; min-height: 12rem; padding: var(--di-space-5); background: var(--di-surface-2); border: 1px solid var(--di-rule); border-radius: var(--di-radius); overflow: hidden; } .di-zone__weave { position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient( 135deg, var(--di-rule-soft) 0, var(--di-rule-soft) 1px, transparent 1px, transparent 11px ); opacity: 0.9; } .di-zone__panel-body { position: relative; max-width: 26rem; text-align: center; } .di-zone__panel-label { margin: 0 0 var(--di-space-2); font-family: var(--di-font-ui); font-size: var(--di-text-xs); font-weight: 700; letter-spacing: 0.12em; text-transform: uppercase; color: var(--di-ink-3); } .di-zone__panel-need { margin: 0 0 var(--di-space-2); font-family: var(--di-font-display); font-size: var(--di-text-lg); line-height: var(--wp--custom--di--leading-snug); color: var(--di-ink-2); font-variation-settings: var(--di-display-axes), "opsz" 28; } .di-zone__panel-ask { margin: 0; font-size: var(--di-text-sm); color: var(--di-ink-3); } @media (min-width: 40em) { .di-zone__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 62em) { .di-zone--vibe .di-zone__grid, .di-zone--food .di-zone__grid { grid-template-columns: repeat(3, 1fr); } } @media print { .di-header, .di-footer, .di-briefing, .di-report, .wp-block-di-briefing-signup { display: none !important; } .di-rail__nav, .di-near, .di-rail__hint { display: none !important; } .di-rail__track { display: block; overflow: visible; } body { background: #fff; } } /* --------------------------------------------------------------------- Rounded surfaces clip their own media, so a photograph never squares off a corner its frame has rounded. ------------------------------------------------------------------ */ .di-card, .di-media, .di-gallery figure, .di-rail__item { overflow: hidden; } .di-card img, .di-media img, .di-gallery img { display: block; border-radius: 0; } .di-btn, .di-chip span, input, select, textarea, button { border-radius: var(--di-radius); } .di-chip span { border-radius: var(--di-radius-pill); } /* --------------------------------------------------------------------- 12. Stacked cards — the claim first, the photograph underneath Apple and Peloton both set the text above the image rather than below a hero. It reads better here for a specific reason: we frequently do not have a photograph yet, and a text-first card degrades to a clean card instead of a hole where a hero should be. The picture rewards the headline; it never has to carry it. ------------------------------------------------------------------ */ .di-card--stacked { border-radius: var(--di-radius-lg); padding: var(--di-space-5) var(--di-space-4) 0; gap: var(--di-space-2); overflow: hidden; transition: box-shadow 140ms ease, transform 140ms ease; } @media (prefers-reduced-motion: reduce) { .di-card--stacked { transition: none; } } .di-card--stacked:hover { box-shadow: var(--di-shadow); transform: translateY(-2px); } @media (prefers-reduced-motion: reduce) { .di-card--stacked:hover { transform: none; } } .di-card--stacked .di-kicker { margin-bottom: var(--di-space-1); } .di-card--stacked .di-card__title { font-size: var(--di-text-xl); line-height: var(--wp--custom--di--leading-tight); } .di-card--stacked .di-card__why { font-size: var(--di-text-sm); color: var(--di-ink-2); } /* The media is pushed last and bled to the card edges. */ .di-card--stacked .di-card__media { order: 99; margin: var(--di-space-4) calc(-1 * var(--di-space-4)) 0; position: relative; align-self: stretch; } .di-card--stacked .di-card__media img { aspect-ratio: 4 / 3; border-radius: 0; display: block; } /* Decorative "open" marker, the way Apple parks a + in the corner. The whole card is already the link target, so this is aria-hidden and never focusable. */ .di-card--stacked .di-card__media::after { content: ""; position: absolute; right: var(--di-space-3); bottom: var(--di-space-3); width: 1.9rem; height: 1.9rem; border-radius: var(--di-radius-pill); background: var(--di-ink) center / 0.7rem 0.7rem no-repeat; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 1v10M1 6h10' stroke='%23fff' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); pointer-events: none; } /* No photograph yet: the card closes cleanly on the text instead of gaping. */ .di-card--stacked:not(:has(.di-card__media)) { padding-bottom: var(--di-space-5); } .di-card--stacked .di-card__foot { padding-bottom: var(--di-space-4); } /* Featured row */ .wp-block-di-featured .di-featured__grid { display: grid; gap: var(--di-space-4); grid-template-columns: 1fr; } @media (min-width: 40em) { .wp-block-di-featured .di-featured__grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 64em) { .wp-block-di-featured .di-featured__grid--4 { grid-template-columns: repeat(4, 1fr); } } @media (min-width: 64em) { .wp-block-di-featured .di-featured__grid--3 { grid-template-columns: repeat(3, 1fr); } } .di-featured__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--di-space-3); margin-bottom: var(--di-space-5); } .di-featured__head h2 { font-size: var(--di-text-3xl); margin: 0; max-width: 18ch; } .di-featured__more { font-family: var(--di-font-ui); font-size: var(--di-text-sm); font-weight: 500; white-space: nowrap; } /* --------------------------------------------------------------------- 13. ITMF design system — rhythm, radius, depth --------------------------------------------------------------------- Three rules, applied everywhere: 1. RHYTHM. Global nav is 44px, local nav 52px, and sections breathe on a 40–70px gap that scales with the viewport. Product media runs wider than the text it sits with, because the photograph is the argument. 2. RADIUS. Modules are 28px. Anything you press or type into is a pill. Nothing in between. 3. DEPTH. UI cards get no shadow — they are separated by rule and ground. Only photography is allowed to lift off the page, and only with the one media shadow below. ------------------------------------------------------------------ */ /* -- Rhythm --------------------------------------------------------- */ .di-section { padding-block: var(--di-section-gap); } @media (min-width: 48em) { .di-section { padding-block: var(--di-section-gap); } } .di-header { padding-block: 0; } .di-header__bar { min-height: var(--di-nav-global); align-items: center; } .di-nav a { display: inline-flex; align-items: center; min-height: var(--di-nav-global); } .di-dateline { min-height: var(--di-nav-local); display: flex; align-items: center; margin-top: 0; } /* Product media wider than text: on the article and restaurant templates the figure escapes the reading measure by one step on each side. */ .di-prose > figure, .di-prose > .wp-block-image, .di-media-wide { width: min(100%, calc(var(--di-measure) + 2 * var(--di-space-6))); margin-inline: auto; } @media (min-width: 64em) { .di-prose > figure, .di-prose > .wp-block-image, .di-media-wide { width: calc(var(--di-measure) + 2 * var(--di-space-7)); margin-inline: calc(-1 * var(--di-space-7)); } } /* -- Radius --------------------------------------------------------- */ .di-btn, .di-chip, .di-mood__row input[type="search"], .di-search-form input[type="search"], .di-near select, .di-field input[type="text"], .di-field input[type="email"], .di-field input[type="url"], .di-field input[type="search"], .di-field select { border-radius: var(--di-radius-pill); } .di-btn { padding-inline: 1.4rem; } .di-mood__row input[type="search"], .di-search-form input[type="search"] { padding-inline: 1.2rem; } .di-field textarea { border-radius: var(--di-radius); } .di-mood__form, .di-card, .di-empty, .di-panel, .di-zone, .di-card--stacked { border-radius: var(--di-radius-lg); } /* -- Depth ---------------------------------------------------------- */ .di-card, .di-card:hover, .di-mood__form, .di-panel { box-shadow: none; } .di-card:hover { border-color: var(--di-ink); } .di-card--stacked .di-card__media img, .di-media-lift img, .di-zone figure img { box-shadow: var(--di-shadow-media); } /* --------------------------------------------------------------------- 14. Masthead wordmark ------------------------------------------------------------------ */ .di-brand { display: flex; align-items: center; gap: var(--di-space-3); text-decoration: none; } .di-brand__logo { display: block; width: auto; height: 34px; } @media (min-width: 48em) { .di-brand__logo { height: 40px; } } .di-brand__name { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* The house shorthand. "ITMF…" is set in the display serif, the completion in italic, so "ITMF… a date night" reads as one sentence. */ .di-itmf { font-family: var(--di-font-display); font-weight: 600; letter-spacing: 0.01em; } .di-itmf em, .di-itmf__fill { font-style: italic; font-synthesis-style: none; font-weight: 400; } /* --------------------------------------------------------------------- 15. Hero — the photograph is the page --------------------------------------------------------------------- The lead section is full-bleed and image-backed. The photograph carries a scrim so the type stays legible at AA against any frame; when no photograph is set the scrim collapses to the ink ground and the section still reads as a designed hero rather than a broken image. ------------------------------------------------------------------ */ .di-hero { position: relative; isolation: isolate; border-top: 0; border-radius: 0; padding-block: clamp(3.5rem, 11vw, 8rem); background: var(--di-ink); color: #fff; overflow: hidden; } .di-hero__bg { position: absolute; inset: 0; z-index: -2; width: 100%; height: 100%; object-fit: cover; } .di-hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(180deg, rgba(20, 18, 14, 0.55) 0%, rgba(20, 18, 14, 0.30) 45%, rgba(20, 18, 14, 0.80) 100%), radial-gradient(120% 90% at 12% 15%, rgba(20, 18, 14, 0.45) 0%, rgba(20, 18, 14, 0) 60%); } .di-hero:not(:has(.di-hero__bg))::after { background: radial-gradient(90% 120% at 85% 0%, rgba(211, 67, 24, 0.30) 0%, rgba(211, 67, 24, 0) 55%), radial-gradient(70% 100% at 5% 100%, rgba(26, 90, 61, 0.32) 0%, rgba(26, 90, 61, 0) 60%); } .di-hero .di-kicker { color: #fff; opacity: 0.85; } .di-hero h1 { color: #fff; margin-bottom: var(--di-space-2); } .di-hero__dek { color: rgba(255, 255, 255, 0.82); font-family: var(--di-font-body); font-size: var(--di-text-lg); max-width: 34rem; margin: 0 0 var(--di-space-5); } .di-hero .di-mood__form { background: rgba(255, 255, 255, 0.94); border-color: transparent; backdrop-filter: blur(10px); color: var(--di-ink); } @supports not (backdrop-filter: blur(10px)) { .di-hero .di-mood__form { background: #fff; } } .di-hero .di-mood__form, .di-hero .di-mood__form a, .di-hero .di-mood__form label, .di-hero .di-mood__form .di-hint { color: var(--di-ink); } .di-hero__credit { position: absolute; right: var(--di-space-4); bottom: var(--di-space-2); z-index: 1; font-family: var(--di-font-ui); font-size: var(--di-text-xs); color: rgba(255, 255, 255, 0.65); margin: 0; } .di-hero__credit a { color: inherit; } /* --------------------------------------------------------------------- 16. Front lead — offset composition --------------------------------------------------------------------- Three columns: a text block low on the left, a large photograph that runs up past it, and a narrow rail of section links. The text block overlaps the photograph's left edge by one space step, so the two read as one object rather than two boxes side by side. The overlap only exists at 64em and up; below that the composition unstacks into photograph → words → rail, which is also the source order. ------------------------------------------------------------------ */ .di-frontlead__offset { display: grid; gap: var(--di-space-5); grid-template-columns: 1fr; } .di-frontlead__media { margin: 0; } .di-frontlead__media a { display: block; } .di-frontlead__media img, .di-frontlead__media .di-typeset { display: block; width: 100%; aspect-ratio: 16 / 10; object-fit: cover; border-radius: var(--di-radius-lg); } .di-frontlead__text { min-width: 0; } .di-frontlead__title { font-family: var(--di-font-display); font-size: clamp(1.55rem, 2.5vw, 2.3rem); line-height: var(--wp--custom--di--leading-tight); margin: 0 0 var(--di-space-3); font-variation-settings: var(--di-display-axes), "opsz" 48; } .di-frontlead__title a { color: var(--di-ink); text-decoration: none; } .di-frontlead__title a:hover { color: var(--di-accent); } .di-frontlead__dek { font-family: var(--di-font-body); color: var(--di-ink-2); margin: 0 0 var(--di-space-3); } .di-frontlead__by { display: flex; flex-wrap: wrap; gap: var(--di-space-1) var(--di-space-3); font-family: var(--di-font-ui); font-size: var(--di-text-xs); color: var(--di-ink-3); margin: 0; } .di-frontlead__links { border-top: 2px solid var(--di-rule-strong); padding-top: var(--di-space-3); } .di-frontlead__links-title { font-family: var(--di-font-ui); font-weight: 600; font-size: var(--di-text-sm); margin: 0 0 var(--di-space-2); } .di-frontlead__links-intro { font-family: var(--di-font-body); font-size: var(--di-text-sm); color: var(--di-ink-2); margin: 0 0 var(--di-space-4); } .di-frontlead__links-list { list-style: none; margin: 0; padding: 0; } .di-frontlead__links-list li + li { border-top: 1px solid var(--di-rule); } .di-frontlead__links-list a { display: block; padding: 0.55rem 0; font-family: var(--di-font-ui); font-weight: 600; font-size: var(--di-text-sm); color: var(--di-ink); text-decoration: none; } .di-frontlead__links-list a::after { content: " \203A"; color: var(--di-ink-3); } .di-frontlead__links-list a:hover { color: var(--di-accent); } @media (min-width: 64em) { .di-frontlead__offset { /* The words get room to be read: the headline should break where a sub-editor would break it, not every three syllables. */ grid-template-columns: minmax(19rem, 1.25fr) minmax(0, 1.85fr) minmax(12rem, 0.78fr); grid-template-rows: minmax(var(--di-space-7), auto) auto; column-gap: var(--di-space-6); row-gap: 0; align-items: start; } /* Photograph spans both rows and starts at the top, so it rises above the text block that overlaps its lower-left corner. */ .di-frontlead__media { grid-column: 2; grid-row: 1 / span 2; } .di-frontlead__media img, .di-frontlead__media .di-typeset { aspect-ratio: 4 / 3; } .di-frontlead__text { grid-column: 1; grid-row: 2; position: relative; z-index: 2; background: var(--di-bg); /* The paper block runs under the photograph's lower-left corner: the negative margin eats the column gap and then some, and the padding is what actually covers the image. */ padding: var(--di-space-5) var(--di-space-6) var(--di-space-4) 0; margin-right: calc(-1 * (var(--di-space-6) + var(--di-space-6))); align-self: end; } .di-frontlead__links { grid-column: 3; grid-row: 1 / span 2; border-top-width: 2px; } } /* --------------------------------------------------------------------- 17. Mobile corrections --------------------------------------------------------------------- Three faults this fixes, all of them visible on a phone first: 1. The masthead. The site-logo BLOCK carries our class, but the inside it is what has intrinsic width — sizing only the wrapper let a 1052px-wide image overflow and land on top of the dateline. Size the image itself, and give the dateline its own line. 2. Gutters. A full-bleed section escapes the constrained layout's padding, so the hero had none: type ran to the glass. Every full-bleed band now pads itself and constrains its own contents. 3. Card rows. Four columns do not fit a phone. Rows scroll sideways with snap instead of stacking into a column the reader has to scroll past. ------------------------------------------------------------------ */ /* -- 1. Masthead ---------------------------------------------------- */ .di-header__bar { min-height: 0; padding-block: var(--di-space-3); } .di-brand { flex: 0 1 auto; min-width: 0; } .di-brand .wp-block-site-logo, .di-brand .wp-block-site-logo a { display: block; width: auto; max-width: 100%; } .di-brand .wp-block-site-logo img, .di-brand__logo img { display: block; width: auto; max-width: 100%; height: 30px; /* the lockup is 1052x459, so this is ~69px wide */ } @media (min-width: 48em) { .di-brand .wp-block-site-logo img, .di-brand__logo img { height: 40px; } } .di-dateline { min-height: 0; display: block; padding-block: 0.55rem; font-family: var(--di-font-ui); font-weight: 600; font-size: var(--di-text-xs); letter-spacing: 0.14em; color: var(--di-ink); border-top: 1px solid var(--di-rule); } /* -- 2. Gutters ----------------------------------------------------- */ :root { --di-gutter: clamp(1.15rem, 5vw, 3rem); } .di-mood--hero { padding-inline: 0; border-top: 0; } .di-hero { padding-inline: var(--di-gutter); } .di-hero > *:not(.di-hero__bg):not(.di-hero__credit) { max-width: var(--wp--style--global--wide-size, 1240px); margin-inline: auto; } .di-hero__credit { right: var(--di-gutter); } /* -- The refine band ------------------------------------------------ */ .di-mood__refine { background: var(--di-surface); border-bottom: 1px solid var(--di-rule); padding: var(--di-space-5) var(--di-gutter); } .di-mood__refine > * { max-width: var(--wp--style--global--wide-size, 1240px); margin-inline: auto; } .di-mood__refine .di-chip-group + .di-chip-group { margin-top: var(--di-space-4); } .di-mood__refine .di-near { margin-bottom: var(--di-space-4); } .di-mood__refine .di-mood__note { margin-top: var(--di-space-4); color: var(--di-ink-3); } /* In the hero the search panel is the only thing in the module, so it needs no internal divider or stacked padding. */ .di-mood--hero .di-mood__form { padding: var(--di-space-3); margin-bottom: 0; } .di-mood--hero .di-mood__row { gap: var(--di-space-2); } @media (max-width: 47.99em) { /* A 44px-tall Find button beside a text field leaves the field too narrow to read what you typed, so on a phone the button takes its own line. */ .di-mood .di-mood__row, .di-mood--hero .di-mood__row { flex-wrap: wrap; } .di-mood .di-mood__row input[type="search"], .di-mood--hero .di-mood__row input[type="search"] { flex: 1 1 100%; width: 100%; min-width: 0; } .di-mood .di-mood__row .di-btn, .di-mood--hero .di-mood__row .di-btn { flex: 1 1 100%; min-height: 2.9rem; } } /* -- 3. Horizontal card rows ---------------------------------------- */ /* * The featured row becomes a snap scroller below 64em. It is the same markup * — only the container changes — so there is one card to maintain, and with * JS off or reduced motion on it degrades to a plain sideways scroll, which * is a native browser affordance rather than a widget. */ /* 768px is where this stops being a phone: the sideways scroller ends there and the row becomes a grid using the full wide measure. */ @media (max-width: 47.99em) { .wp-block-di-featured .di-featured__grid { display: flex; grid-template-columns: none; overflow-x: auto; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: var(--di-space-4); /* Bleed the track to the screen edge so a card can be half-visible at the margin — that peek is what tells a thumb there is more. */ margin-inline: calc(-1 * var(--di-gutter)); padding-inline: var(--di-gutter); padding-bottom: var(--di-space-2); } .wp-block-di-featured .di-featured__grid::-webkit-scrollbar { display: none; } .wp-block-di-featured .di-featured__grid > * { flex: 0 0 min(78vw, 20rem); scroll-snap-align: start; } } @media (prefers-reduced-motion: no-preference) { .wp-block-di-featured .di-featured__grid { scroll-behavior: smooth; } } /* The rail's cards carry the house card pattern rather than a bespoke one. */ .di-rail__item > .di-card--stacked { height: 100%; } .di-rail__nav { border-radius: var(--di-radius-pill); } /* --------------------------------------------------------------------- 18. 768px and up — the app takes the width it has ------------------------------------------------------------------ */ @media (min-width: 48em) { :root { --di-gutter: clamp(1.5rem, 3.5vw, 3rem); } /* Three across at 768, four once there is room for a fourth to still hold a legible headline. */ .wp-block-di-featured .di-featured__grid { grid-template-columns: repeat(3, 1fr); } .wp-block-di-featured .di-featured__grid--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 62em) { .wp-block-di-featured .di-featured__grid--4 { grid-template-columns: repeat(4, 1fr); } } /* The offset lead composition starts at 768 rather than 1024 — at tablet width there is already enough room for the notch to read, with the rail dropped underneath rather than squeezed into a third column. */ @media (min-width: 48em) and (max-width: 63.99em) { .di-frontlead__offset { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.6fr); grid-template-rows: minmax(var(--di-space-6), auto) auto auto; column-gap: var(--di-space-5); row-gap: var(--di-space-5); align-items: start; } .di-frontlead__media { grid-column: 2; grid-row: 1 / span 2; } .di-frontlead__media img, .di-frontlead__media .di-typeset { aspect-ratio: 4 / 3; } .di-frontlead__text { grid-column: 1; grid-row: 2; position: relative; z-index: 2; background: var(--di-bg); padding: var(--di-space-4) var(--di-space-5) var(--di-space-3) 0; margin-right: calc(-1 * (var(--di-space-5) + var(--di-space-5))); align-self: end; } .di-frontlead__links { grid-column: 1 / -1; grid-row: 3; } .di-frontlead__links-list { columns: 2; column-gap: var(--di-space-6); } } /* --------------------------------------------------------------------- 19. Masthead, rebuilt --------------------------------------------------------------------- Los Angeles is part of the brand lockup, not a band across the page: it sits directly under the wordmark, bold and small, the way a masthead carries its city. It is inside .di-brand now, so it can no longer land on top of the logo however the image is sized. The heavy 2px rule under the header is gone. One hairline separates the masthead from the page; the weight in this design comes from the photography and the display serif, not from black bars. ------------------------------------------------------------------ */ /* No rule under the masthead. The 15px of paper below it, and the hero's ink starting hard beneath that, is the separation — a hairline on top of both is one boundary too many. */ .di-header { border-bottom: 0 !important; } .di-header__bar { min-height: 0; padding-block: 0; align-items: center; row-gap: var(--di-space-3); } .di-brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0; /* Never shrink: the wordmark is the one thing on this bar that must stay whole, so the nav collapses to its overlay before the logo gives ground. */ flex: 0 0 auto; } .di-brand .wp-block-site-logo { margin: 0; line-height: 0; } .di-brand .wp-block-site-logo a { display: block; } /* Size the IMAGE, not the block wrapper: the wrapper has no intrinsic size, so height on it lets a 1052px lockup overflow onto whatever is beneath. */ .di-brand .wp-block-site-logo img, .di-brand img.custom-logo { display: block; width: auto; max-width: 100%; height: 30px; } @media (min-width: 48em) { .di-brand .wp-block-site-logo img, .di-brand img.custom-logo { height: 38px; } } .di-header .di-dateline { display: block; width: auto; margin: 0.35rem 0 0; padding: 0; min-height: 0; border: 0; font-family: var(--di-font-ui); font-weight: 700; font-size: 0.62rem; line-height: 1.1; letter-spacing: 0.2em; text-transform: uppercase; color: var(--di-ink); } /* The site title stays in the accessibility tree — the logo image carries the name visually, and a screen reader should still meet it as a heading link. */ .di-brand__name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } .di-nav { font-family: var(--di-font-ui); font-size: var(--di-text-sm); } .di-nav a { min-height: 0; padding-block: 0.35rem; } /* --------------------------------------------------------------------- 20. Hero rhythm, rotating placeholder, briefing row ------------------------------------------------------------------ */ /* The hero sits directly under the masthead — no seam, no gap. WordPress puts a block gap between the header template part and the first block; the hero is a full-bleed band, so that gap reads as a stripe of paper. */ /* wp-site-blocks spaces its children with margin-block-start, so
inherits a block gap under the masthead. On the homepage the first thing in
is a full-bleed dark band, which turns that gap into a stripe of paper between the header rule and the hero. Zero it at the
, which is where the margin actually lives — zeroing it on the hero does nothing, because the hero is not the element carrying the margin. */ .wp-site-blocks > .di-home, .wp-site-blocks > main:has(> .di-mood--hero:first-child) { margin-block-start: 0; } .di-mood--hero:first-child { margin-block-start: 0; } .di-header { margin-bottom: 0; } /* Rotation crossfades rather than cutting, so the eye follows one phrase into the next instead of registering a flicker. */ .di-mood__row input[type="search"]::placeholder { transition: opacity 0.24s ease; opacity: 1; } .di-mood__row input[type="search"].is-swapping::placeholder { opacity: 0; } @media (prefers-reduced-motion: reduce) { .di-mood__row input[type="search"]::placeholder { transition: none; } } /* The briefing row: a white field and a white button on a dark panel merged into one ambiguous blob. The field keeps the white; the button takes the accent, so the thing you press is the thing that looks pressable. */ .di-subscribe__row { display: flex; flex-wrap: wrap; gap: var(--di-space-3); align-items: flex-end; } .di-subscribe__row .di-field { flex: 1 1 16rem; margin-bottom: 0; min-width: 0; } .di-subscribe__row .di-btn { flex: 0 0 auto; min-height: 2.9rem; } .di-briefing .di-subscribe__row .di-btn { background: var(--di-accent); color: #fff; border-color: var(--di-accent); } .di-briefing .di-subscribe__row .di-btn:hover { background: #fff; color: var(--di-ink); border-color: #fff; } .di-briefing .di-field input[type="email"] { min-height: 2.9rem; } @media (max-width: 33.99em) { .di-subscribe__row .di-btn { flex: 1 1 100%; } } /* --------------------------------------------------------------------- 21. Brand lockup: wordmark, then city --------------------------------------------------------------------- The city sits beside the logo, not under it — a masthead reads left to right, and "ITMF Los Angeles" is one phrase. The logo also gets its real size: it is the only thing on this bar the reader is meant to remember. ------------------------------------------------------------------ */ .di-brand { flex-direction: row; align-items: center; gap: var(--di-space-4); } .di-brand .wp-block-site-logo img, .di-brand img.custom-logo { height: 40px; } @media (min-width: 48em) { .di-brand .wp-block-site-logo img, .di-brand img.custom-logo { height: 56px; } } /* -- The city disclosure -------------------------------------------- */ /* *
/: it opens, closes, takes focus and answers the * keyboard with no JavaScript, no click-outside handler, and no ARIA menu * pattern to implement incorrectly. */ .di-city { position: relative; } .di-city__current { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; list-style: none; font-family: var(--di-font-ui); font-weight: 700; font-size: var(--di-text-sm); line-height: 1.2; color: var(--di-ink); white-space: nowrap; padding: 0.3rem 0; } .di-city__current::-webkit-details-marker { display: none; } .di-city__current:hover { color: var(--di-accent); } .di-city__current:focus-visible { outline: 3px solid var(--di-focus); outline-offset: 3px; border-radius: var(--di-radius-sm); } .di-city__caret { transition: transform 0.18s ease; flex: 0 0 auto; } .di-city[open] .di-city__caret { transform: rotate(180deg); } @media (prefers-reduced-motion: reduce) { .di-city__caret { transition: none; } } .di-city__menu { position: absolute; z-index: 40; top: calc(100% + 0.5rem); left: 0; min-width: 15rem; max-width: min(22rem, calc(100vw - 2rem)); background: var(--di-surface); border: 1px solid var(--di-rule); border-radius: var(--di-radius-lg); box-shadow: 0 10px 34px rgba(26, 23, 18, 0.14); padding: var(--di-space-3); } .di-city__list { list-style: none; margin: 0; padding: 0; } .di-city__item { display: block; padding: 0.5rem 0.6rem; border-radius: var(--di-radius-sm); font-family: var(--di-font-ui); font-weight: 600; font-size: var(--di-text-sm); color: var(--di-ink); text-decoration: none; } a.di-city__item:hover { background: var(--di-surface-2); color: var(--di-accent); } .di-city__item.is-current { color: var(--di-accent); } .di-city__item.is-current::after { content: " \2713"; } .di-city__note { margin: var(--di-space-2) 0 var(--di-space-3); padding-top: var(--di-space-3); border-top: 1px solid var(--di-rule); font-family: var(--di-font-body); font-size: var(--di-text-xs); color: var(--di-ink-2); } .di-city__cta { display: inline-block; font-family: var(--di-font-ui); font-weight: 600; font-size: var(--di-text-xs); color: var(--di-accent); text-decoration: none; padding: 0 0.6rem 0.3rem; } .di-city__cta:hover { text-decoration: underline; } /* --------------------------------------------------------------------- 22. How it works --------------------------------------------------------------------- Numbered because it is a sequence, not a feature list — the order is the argument. The numerals are set in the display serif at a size that reads as typography rather than as UI chrome. ------------------------------------------------------------------ */ .di-how { border-top: 1px solid var(--di-rule); } .di-how__head { max-width: 46rem; margin-bottom: var(--di-space-6); } .di-how__head h2 { font-size: var(--di-text-3xl); line-height: var(--wp--custom--di--leading-tight); margin: 0 0 var(--di-space-3); } .di-how__intro { font-family: var(--di-font-body); font-size: var(--di-text-lg); color: var(--di-ink-2); margin: 0; } .di-how__steps { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--di-space-5); grid-template-columns: 1fr; counter-reset: none; } @media (min-width: 40em) { .di-how__steps { grid-template-columns: repeat(2, 1fr); gap: var(--di-space-6) var(--di-space-5); } } @media (min-width: 62em) { .di-how__steps { grid-template-columns: repeat(4, 1fr); } } .di-how__step { padding-top: var(--di-space-3); border-top: 2px solid var(--di-ink); } .di-how__num { display: block; font-family: var(--di-font-display); font-weight: 600; font-size: 2.4rem; line-height: 1; color: var(--di-accent); font-variation-settings: var(--di-display-axes), "opsz" 40; margin-bottom: var(--di-space-2); } .di-how__title { font-size: var(--di-text-lg); line-height: var(--wp--custom--di--leading-snug); margin: 0 0 var(--di-space-2); } .di-how__body { font-family: var(--di-font-body); font-size: var(--di-text-sm); color: var(--di-ink-2); margin: 0; } .di-how__cta { margin: var(--di-space-6) 0 0; } /* --------------------------------------------------------------------- 23. The CTA pair ------------------------------------------------------------------ */ .di-cta { border-top: 1px solid var(--di-rule); } .di-cta__grid { display: grid; gap: var(--di-space-6); grid-template-columns: 1fr; } @media (min-width: 52em) { .di-cta__grid { grid-template-columns: 1fr 1fr; gap: var(--di-space-7); } /* One hairline between the two, the way a masthead splits a column. */ .di-cta__panel + .di-cta__panel { border-left: 1px solid var(--di-rule); padding-left: var(--di-space-7); } } .di-cta__panel { display: flex; gap: var(--di-space-4); align-items: flex-start; } .di-cta__mark { flex: 0 0 auto; color: var(--di-accent); line-height: 0; margin-top: 0.2rem; } .di-cta__body { min-width: 0; flex: 1 1 auto; } .di-cta__title { font-size: var(--di-text-xl); margin: 0 0 var(--di-space-2); } .di-cta__dek { font-family: var(--di-font-body); color: var(--di-ink-2); margin: 0 0 var(--di-space-4); } .di-cta__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--di-space-4); margin: 0; } .di-cta__link { font-family: var(--di-font-ui); font-weight: 600; font-size: var(--di-text-sm); } /* The compact signup inside the CTA is on paper, not on the ink panel. */ .di-cta .di-briefing--compact { background: transparent; padding: 0; } .di-cta .di-briefing--compact > h2, .di-cta .di-briefing--compact > .di-meta { display: none; } /* --------------------------------------------------------------------- 24. Hero: no dead band, and a field worth typing into --------------------------------------------------------------------- The section carried 48px of block padding above the ink panel, which painted as a strip of paper between the masthead hairline and the hero — the "gap under the nav bar". The section pads nothing and takes the ink itself, so any space it does own reads as hero rather than as a seam. ------------------------------------------------------------------ */ .di-mood--hero { padding-block: 0; padding-inline: 0; background: var(--di-ink); } .di-hero { padding-block: clamp(2.75rem, 7vw, 5.5rem); } /* The field is the product. It gets the size that implies you can type a sentence into it, not a keyword. */ .di-mood--hero .di-mood__form { padding: var(--di-space-2); border-radius: var(--di-radius-pill); } .di-mood--hero .di-mood__row input[type="search"] { font-size: clamp(1.05rem, 1.6vw, 1.35rem); padding: 0.95rem 1.5rem; border-color: transparent; background: #fff; } .di-mood--hero .di-mood__row input[type="search"]:focus-visible { outline: 3px solid var(--di-accent); outline-offset: 2px; } .di-mood--hero .di-mood__go { font-size: var(--di-text-md); padding: 0.95rem 3.4rem; min-width: 11rem; white-space: nowrap; } @media (max-width: 47.99em) { .di-mood--hero .di-mood__form { border-radius: var(--di-radius-lg); padding: var(--di-space-3); } .di-mood--hero .di-mood__row input[type="search"] { padding: 0.85rem 1.2rem; } } /* --------------------------------------------------------------------- 25. Masthead order: brand and search left, navigation right --------------------------------------------------------------------- The search sits with the wordmark on the left, the way iOS and current Apple bars place it, and the navigation takes the right edge. ------------------------------------------------------------------ */ .di-header .di-search-form { margin-left: var(--di-space-4); } .di-header .di-search-form input[type="search"] { width: 15rem; } @media (min-width: 75em) { .di-header .di-search-form input[type="search"] { width: 19rem; } } .di-header__bar { padding-block: 0; } .di-header { padding-block: var(--di-space-3) !important; } /* A measured 15px of paper below the masthead rule — the earlier band was 48px of accidental block padding on the hero section, which is a different thing from a deliberate gap. This one is the deliberate one. */ .di-header { margin-bottom: 15px; } @media (max-width: 61.99em) { /* Below the point where all three fit, the search drops to its own row under the brand rather than squeezing the wordmark. */ .di-brand { flex-wrap: wrap; } .di-header .di-search-form { margin-left: 0; flex-basis: 100%; } .di-header .di-search-form input[type="search"] { width: 100%; } } @media (max-width: 47.99em) { .di-header .di-search-form { display: none; } } /* An offset lead with no photograph yet. Named, framed, and obviously deliberate — never a broken image, and never the headline set twice. */ .di-frontlead__media.is-blank { display: block; } .di-frontlead__blank { display: flex; align-items: center; justify-content: center; width: 100%; aspect-ratio: 4 / 3; border-radius: var(--di-radius-lg); background: repeating-linear-gradient( 135deg, var(--di-surface-2) 0 14px, var(--di-bg) 14px 28px ); border: 1px solid var(--di-rule); } .di-frontlead__blank-label { font-family: var(--di-font-ui); font-size: var(--di-text-xs); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--di-ink-3); background: var(--di-bg); padding: 0.45rem 0.9rem; border-radius: var(--di-radius-pill); /* The frame can get narrow; the label wraps and stays inside it rather than overflowing and being clipped by the frame's edges. */ max-width: calc(100% - 1.5rem); text-align: center; line-height: 1.35; } /* The page takes the width it has. 1360px wide measure, and the offset lead rebalanced so the text column is a column of text rather than a gutter. */ @media (min-width: 64em) { .di-frontlead__text { padding-right: var(--di-space-7); } .di-frontlead__dek { max-width: 30ch; } } /* The hero holds the frame: 600px minimum so a photograph has room to be a photograph, with the content anchored low rather than floating in the middle of it. On a short phone in landscape it yields to the viewport so the field is never pushed off-screen. */ .di-hero { min-height: 600px; display: flex; flex-direction: column; justify-content: flex-end; } /* `margin-inline: auto` on a flex item overrides align-self: stretch, so the children shrink-wrapped and the hero read as centred. width:100% restores the fill; the auto margins still centre the capped 1360px box. */ .di-hero > *:not(.di-hero__bg):not(.di-hero__credit) { width: 100%; } @media (max-height: 700px) and (orientation: landscape) { .di-hero { min-height: 82vh; } }