/* ========================================================================== Adio for Eti-Osa — main stylesheet Lagos print: the campaign poster for the promise, the receipt for the proof. ========================================================================== */ /* ---------- Fonts (self-hosted) ---------- */ /* Headlines: PolySans (trial files supplied by the campaign; see fonts/PolySans-trial-licence.txt). The trial has only A–Z, a–z, 0–9 and , . / : so every other character in a headline (hyphen, apostrophe, ₦, %, accented letters) is drawn from DM Sans at the nearest weight, inside the same family. */ @font-face { font-family: "Adio Display"; src: url("../fonts/polysans-median.woff2") format("woff2"); font-weight: 500 650; font-style: normal; font-display: swap; unicode-range: U+0020, U+002C, U+002E-003A, U+0041-005A, U+0061-007A; } @font-face { font-family: "Adio Display"; src: url("../fonts/polysans-bulky.woff2") format("woff2"); font-weight: 651 1000; font-style: normal; font-display: swap; unicode-range: U+0020, U+002C, U+002E-003A, U+0041-005A, U+0061-007A; } /* The DM Sans fill repeats each PolySans weight range exactly: Chrome only combines faces by unicode-range when their weight ranges are identical, and otherwise picks one face for every letter (on Android Chrome it picked DM Sans, so headlines lost PolySans on phones). */ @font-face { font-family: "Adio Display"; src: url("../fonts/dmsans-var.woff2") format("woff2"); font-weight: 500 650; font-style: normal; font-display: swap; unicode-range: U+0000-001F, U+0021-002B, U+002D, U+003B-0040, U+005B-0060, U+007B-02FF, U+0302, U+0305-0307, U+0309-10FFFF; } @font-face { font-family: "Adio Display"; src: url("../fonts/dmsans-var.woff2") format("woff2"); font-weight: 651 1000; font-style: normal; font-display: swap; unicode-range: U+0000-001F, U+0021-002B, U+002D, U+003B-0040, U+005B-0060, U+007B-02FF, U+0302, U+0305-0307, U+0309-10FFFF; } @font-face { font-family: "Adio Sans"; src: url("../fonts/dmsans-var.woff2") format("woff2"); font-weight: 400 800; font-style: normal; font-display: swap; unicode-range: U+0000-02FF, U+0302, U+0305-0307, U+0309-10FFFF; } @font-face { font-family: "Adio Sans"; src: url("../fonts/dmsans-italic-var.woff2") format("woff2"); font-weight: 400 700; font-style: italic; font-display: swap; unicode-range: U+0000-02FF, U+0302, U+0305-0307, U+0309-10FFFF; } /* Hausa hooked letters, Yoruba/Igbo dot-below letters and the naira sign, which the brand fonts lack. */ @font-face { font-family: "Adio Glyphs"; src: url("../fonts/adio-glyphs-a.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0181, U+018A, U+0198-0199, U+01B3-01B4, U+0253, U+0257, U+02BC, U+1E3E-1E3F, U+1E44-1E45, U+1E62-1E63, U+20A6; } @font-face { font-family: "Adio Glyphs"; src: url("../fonts/adio-glyphs-b.woff2") format("woff2"); font-weight: 100 900; font-display: swap; unicode-range: U+0300-0301, U+0303-0304, U+0308, U+0323, U+1EB8-1EB9, U+1ECA-1ECD, U+1EE4-1EE5; } /* ---------- Tokens ---------- */ :root { --font-display: "Adio Display", "Adio Glyphs", "Arial Black", system-ui, sans-serif; --font-body: "Adio Sans", "Adio Glyphs", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --fs-small: 0.9375rem; --fs-body: 1.125rem; --fs-lead: clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem); --fs-h3: clamp(1.35rem, 1.1rem + 0.9vw, 1.85rem); --fs-h2: clamp(2.25rem, 1.4rem + 3.6vw, 4.75rem); --fs-h1: clamp(3rem, 1.6rem + 6vw, 7.5rem); --fs-display: clamp(3.6rem, 0.8rem + 9.8vw, 10rem); --margin: clamp(1.25rem, 0.6rem + 2.4vw, 2.5rem); --gutter: clamp(1rem, 0.5rem + 1.6vw, 2rem); --section: clamp(4.5rem, 2rem + 9vw, 10rem); --max: 1520px; --header-h: 84px; --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); --ease-drawer: cubic-bezier(0.32, 0.72, 0, 1); color-scheme: light; --ground: #F3F4EE; --ground-2: #E6E9E0; --sheet: #FFFFFF; --ink: #0E1711; --ink-2: #3D4A41; --line: #6F7C73; --line-soft: #C9CEC4; --green: #26B148; --green-ink: #13702C; --orange: #F68634; --orange-ink: #A64A0E; --panel: #0E1711; --on-panel: #F3F4EE; --on-panel-2: #B9C4BC; --on-field: #0E1711; --paper-print: #F3F4EE; --focus: #0E1711; --error: #B42318; --logo-tagline: #000000; --link: var(--green-ink); --btn-bg: var(--orange); --btn-ink: #0E1711; --btn-hover-bg: var(--ink); --btn-hover-ink: var(--ground); --shadow-float: 0 22px 44px -18px rgba(14, 23, 17, 0.45), 0 3px 8px rgba(14, 23, 17, 0.14); --pop-bg: #FFFFFF; --pop-ink: #0E1711; --pop-ink-2: #3D4A41; --pop-hover: #EEF1E8; --pop-line: #0E1711; --pop-pick: #13702C; --pop-pick-ink: #FFFFFF; } /* Yorùbá and Igbo put a tone mark or a dot below on nearly every word, and PolySans has none of them, so their headlines are set wholly in DM Sans rather than switching typeface inside each word. */ :root:lang(yo), :root:lang(ig) { --font-display: "Adio Sans", "Adio Glyphs", "Arial Black", system-ui, sans-serif; } :root[data-theme="dark"] { color-scheme: dark; --ground: #0C150F; --ground-2: #16221A; --sheet: #111B15; --ink: #EEF1EA; --ink-2: #A7B3AA; --line: #73827A; --line-soft: #2B3A31; --green-ink: #4CCB6E; --orange-ink: #FF9C55; --panel: #142A1C; --on-panel: #EEF1EA; --on-panel-2: #A7B3AA; --on-field: #0C150F; --focus: #EEF1EA; --error: #FF8A7A; --logo-tagline: #F3F4EE; --btn-ink: #0C150F; --shadow-float: 0 22px 44px -18px rgba(0, 0, 0, 0.7), 0 3px 8px rgba(0, 0, 0, 0.4); --pop-bg: #111B15; --pop-ink: #EEF1EA; --pop-ink-2: #A7B3AA; --pop-hover: #1D2B22; --pop-line: #73827A; --pop-pick: #26B148; --pop-pick-ink: #0C150F; } /* Surfaces: each poster field sets its own ink. */ [data-surface="panel"] { background: var(--panel); color: var(--on-panel); --ink: var(--on-panel); --ink-2: var(--on-panel-2); --link: var(--orange); --focus: var(--on-panel); --line: #8C9A90; --line-soft: rgba(243, 244, 238, 0.22); --btn-hover-bg: var(--on-panel); --btn-hover-ink: var(--panel); --logo-tagline: #F3F4EE; } [data-surface="green"] { background: var(--green); color: var(--on-field); --ink: var(--on-field); --ink-2: var(--on-field); --link: var(--on-field); --focus: var(--on-field); --line: var(--on-field); --line-soft: rgba(14, 23, 17, 0.35); --btn-bg: var(--on-field); --btn-ink: #F3F4EE; --btn-hover-bg: #F3F4EE; --btn-hover-ink: #0E1711; --logo-tagline: #000; } [data-surface="orange"] { background: var(--orange); color: var(--on-field); --ink: var(--on-field); --ink-2: var(--on-field); --link: var(--on-field); --focus: var(--on-field); --line: var(--on-field); --line-soft: rgba(14, 23, 17, 0.35); --btn-bg: var(--on-field); --btn-ink: #F3F4EE; --btn-hover-bg: #F3F4EE; --btn-hover-ink: #0E1711; --logo-tagline: #000; } [data-surface="paper2"] { background: var(--ground-2); } [data-surface="paper"] { background: var(--ground); } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: calc(var(--header-h) + 1rem); interpolate-size: allow-keywords; } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--ground); color: var(--ink); font-family: var(--font-body); font-size: var(--fs-body); line-height: 1.6; font-optical-sizing: auto; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; } img, svg, video { display: block; max-width: 100%; height: auto; } a { color: var(--link); text-decoration-thickness: 2px; text-underline-offset: 0.2em; } a:hover { text-decoration-thickness: 3px; } button, input, select, textarea { font: inherit; color: inherit; } button { cursor: pointer; } h1, h2, h3, h4 { margin: 0; font-weight: 800; line-height: 1.1; text-wrap: balance; } p { margin: 0 0 1em; text-wrap: pretty; } ul, ol { margin: 0; padding: 0; } ::selection { background: var(--orange); color: #0E1711; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } :focus:not(:focus-visible) { outline: none; } input, textarea { caret-color: var(--orange-ink); } html { scrollbar-color: var(--ink-2) var(--ground-2); } table { font-variant-numeric: tabular-nums; } p, li, dd, blockquote, figcaption { text-wrap: pretty; } /* no lone last words under a paragraph */ code { font-size: 0.9em; } .screen-reader-text { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .skip { position: absolute; left: var(--margin); top: -100px; z-index: 100; background: var(--orange); color: #0E1711; padding: 0.75rem 1rem; font-weight: 700; } .skip:focus { top: 0.75rem; } .wrap { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--margin); } .section { padding-block: var(--section); } .phero + .section, .phero + .wrap.section, .phero + section > .wrap:first-child, .about-hero + .factband + .section { padding-top: clamp(2rem, 1rem + 3vw, 4rem); } .site-main:focus { outline: none; } /* ---------- Type roles ---------- */ .headline, .section-title, .phero__title, .chapter__title, .value__name, .receipt__total output, .hero__figure strong, .stamp__word { font-family: var(--font-display); font-variant-numeric: lining-nums; text-transform: uppercase; font-weight: 900; letter-spacing: -0.035em; } .section-title { font-size: var(--fs-h2); line-height: 0.88; margin-bottom: 0.4em; } .section-title--small { font-size: clamp(1.75rem, 1.2rem + 2vw, 2.75rem); } .headline { margin: 0; line-height: 0.86; } .headline .line { display: block; } :lang(ha) .headline, :lang(fr) .headline { line-height: 0.98; } :lang(yo) .headline, :lang(ig) .headline, :lang(yo) .section-title, :lang(ig) .section-title { line-height: 1.1; letter-spacing: -0.025em; } /* ---------- Buttons and links ---------- */ .button { display: inline-flex; align-items: center; justify-content: center; gap: 0.6em; min-height: 48px; padding: 0.8em 1.35em; border: 2px solid transparent; border-radius: 0; font-family: var(--font-body); font-size: 1rem; font-weight: 700; line-height: 1.15; text-decoration: none; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease, transform 160ms var(--ease-out); -webkit-tap-highlight-color: transparent; } .button:active { transform: scale(0.97); } .button .icon { transition: transform 200ms var(--ease-out); } .button--primary { background: var(--btn-bg); color: var(--btn-ink); border-color: var(--btn-bg); } .button--secondary { background: transparent; color: var(--ink); border-color: currentColor; } .button--ghost { background: transparent; color: var(--ink); border-color: currentColor; } .button--small { min-height: 44px; padding: 0.55em 1em; font-size: 0.9375rem; } .button--large { min-height: 56px; padding: 0.95em 1.6em; font-size: 1.0625rem; } @media (hover: hover) and (pointer: fine) { .button--primary:hover { background: var(--btn-hover-bg); border-color: var(--btn-hover-bg); color: var(--btn-hover-ink); } .button--secondary:hover, .button--ghost:hover { background: var(--ink); color: var(--ground); border-color: var(--ink); } [data-surface] .button--secondary:hover, [data-surface] .button--ghost:hover { color: var(--btn-hover-ink, var(--ground)); } .button:hover .icon { transform: translateX(3px); } } .button[disabled], .button[aria-busy="true"] { opacity: 0.7; cursor: progress; } .link-arrow { display: inline-flex; align-items: center; gap: 0.45em; font-weight: 700; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; } .link-arrow::after { content: ""; width: 1.05em; height: 1.05em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='square'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='square'%3E%3Cpath d='M4 12h15M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform 200ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .link-arrow:hover::after { transform: translateX(4px); } } .link-button { background: none; border: 0; padding: 0; color: inherit; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; font: inherit; cursor: pointer; } .badge { display: inline-block; padding: 0.15em 0.55em; background: var(--ground-2); color: var(--ink); font-size: 0.875rem; font-weight: 700; text-decoration: none; line-height: 1.4; } [data-surface] .badge { background: rgba(14, 23, 17, 0.12); } [data-surface="panel"] .badge { background: rgba(243, 244, 238, 0.14); } .badge--en { background: var(--orange); color: #0E1711; } .meta { display: flex; flex-wrap: wrap; gap: 0.35rem 1.25rem; margin: 0; color: var(--ink-2); font-size: var(--fs-small); font-variant-numeric: tabular-nums; } /* ---------- Header ---------- */ .site-header { position: sticky; top: 0; z-index: 60; background: var(--ground); transition: background-color 300ms ease; } .site-header::after { content: ""; position: absolute; inset: auto 0 0 0; height: 4px; background: var(--green); transform: scaleX(0); transform-origin: left; transition: transform 500ms var(--ease-out); } .site-header.is-scrolled::after { transform: scaleX(1); } .site-header__bar { display: flex; align-items: center; gap: clamp(0.75rem, 1.6vw, 2rem); min-height: var(--header-h); } .logo { display: block; flex: none; color: inherit; line-height: 0; } .logo__svg { height: 64px; width: auto; } .logo__svg .logo-tagline { fill: var(--logo-tagline); transition: fill 300ms ease; } .logo__img { height: 64px; width: auto; } .logo__img--dark { display: none; } [data-theme="dark"] .logo:has(.logo__img--dark) .logo__img--light { display: none; } [data-theme="dark"] .logo__img--dark { display: block; } .nav--primary { margin-inline-start: auto; } .nav__list { display: flex; align-items: center; gap: clamp(0.75rem, 1.4vw, 1.75rem); list-style: none; } .nav__item { position: relative; display: flex; align-items: center; } .nav__link { display: inline-flex; align-items: center; min-height: 44px; color: var(--ink); font-weight: 600; font-size: 1rem; text-decoration: none; position: relative; } .nav__link::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0.45rem; height: 3px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 240ms var(--ease-out); } .nav__item.is-current > .nav__link::after { transform: scaleX(1); } @media (hover: hover) and (pointer: fine) { .nav__link:hover::after { transform: scaleX(1); } } .nav__sub .nav__link::after, .drawer__list .nav__link::after { content: none; } .nav__sub-toggle { display: grid; place-items: center; width: 28px; height: 44px; margin-inline-start: 0.1rem; padding: 0; background: none; border: 0; color: var(--ink); } .nav__sub-toggle svg { transition: transform 200ms var(--ease-out); } .nav__sub-toggle[aria-expanded="true"] svg { transform: rotate(180deg); } .nav__sub { position: absolute; top: 100%; left: -1rem; min-width: 15rem; padding: 0.5rem; list-style: none; background: var(--sheet); border: 2px solid var(--ink); box-shadow: var(--shadow-float); opacity: 0; visibility: hidden; transform: translateY(-6px) scale(0.98); transform-origin: top left; transition: opacity 160ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s linear 180ms; } /* taste-skill-ignore: open menu is an overlay */ .nav__item.is-open > .nav__sub { opacity: 1; visibility: visible; transform: none; transition: opacity 160ms var(--ease-out), transform 180ms var(--ease-out), visibility 0s; } .nav__sub .nav__link { display: flex; width: 100%; padding: 0.55rem 0.75rem; background: none; } .nav__sub .nav__link:hover, .nav__sub .nav__link[aria-current] { background: var(--ground-2); } .site-header__tools { display: flex; align-items: center; gap: 0.5rem; flex: none; } .link-donate { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 0.5rem; color: var(--ink); font-weight: 700; text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.25em; } .menu-button { display: none; align-items: center; gap: 0.55rem; min-height: 44px; padding: 0 0.85rem; border: 2px solid var(--ink); background: transparent; color: var(--ink); font-weight: 700; } .menu-button__bars { display: grid; gap: 5px; width: 20px; } .menu-button__bars span { height: 2.5px; background: currentColor; } /* Colour mode switch */ .mode-toggle { display: grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 0; background: transparent; color: var(--ink); border-radius: 0; transition: background-color 160ms ease; } @media (hover: hover) and (pointer: fine) { .mode-toggle:hover { background: var(--ground-2); } } .mode-toggle:active .mode-toggle__icon { transform: scale(0.92); } .mode-toggle__icon { transition: transform 160ms var(--ease-out); overflow: visible; } .mode-toggle__sun, .mode-toggle__moon { transform-box: fill-box; transform-origin: center; transition: transform 560ms var(--ease-out), opacity 360ms ease; } .mode-toggle__sun { color: var(--orange); fill: var(--orange); } .mode-toggle__moon { transform: translateY(14px) rotate(-30deg); opacity: 0; } [data-theme="dark"] .mode-toggle__sun { transform: translateY(14px); opacity: 0; } [data-theme="dark"] .mode-toggle__moon { transform: none; opacity: 1; } /* Language switcher */ .lang { position: relative; } .lang__button { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 44px; padding: 0 0.6rem; border: 0; background: transparent; color: var(--ink); font-weight: 700; font-size: 0.9375rem; } @media (hover: hover) and (pointer: fine) { .lang__button:hover { background: var(--ground-2); } } .lang__chev { transition: transform 200ms var(--ease-out); } .lang.is-open .lang__chev { transform: rotate(180deg); } .lang__menu { position: absolute; right: 0; top: calc(100% + 8px); z-index: 70; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.375rem; width: 22rem; max-width: calc(100vw - 2rem); padding: 0.5rem; list-style: none; background: var(--pop-bg); color: var(--pop-ink); border: 2px solid var(--pop-line); box-shadow: var(--shadow-float); opacity: 0; transform: translateY(-6px) scale(0.97); transform-origin: top right; transition: opacity 160ms var(--ease-out), transform 200ms var(--ease-out); } /* taste-skill-ignore: open menu is an overlay */ .lang__menu[hidden] { display: none; } .lang.is-open .lang__menu { opacity: 1; transform: none; } .lang__menu li { display: flex; } .lang__link { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; min-height: 4.75rem; padding: 0.75rem 0.5rem; color: var(--pop-ink); background: transparent; border: 2px solid transparent; text-align: center; text-decoration: none; transition: background-color 150ms ease, border-color 150ms ease, color 150ms ease; } @media (hover: hover) and (pointer: fine) { .lang__link:hover { background: var(--pop-hover); border-color: var(--pop-hover); } } .lang__link:focus-visible { outline: 3px solid var(--pop-line); outline-offset: -3px; } .lang__link.is-current { background: var(--pop-pick); border-color: var(--pop-pick); color: var(--pop-pick-ink); } .lang__name { font-size: 1.0625rem; font-weight: 700; line-height: 1.2; } .lang__en { font-size: 0.8125rem; line-height: 1.25; color: var(--pop-ink-2); } .lang__missing { font-size: 0.75rem; line-height: 1.25; color: var(--pop-ink-2); font-style: italic; } .lang__link.is-current .lang__en, .lang__link.is-current .lang__missing { color: inherit; opacity: 0.85; } .lang--footer .lang__menu, .lang--drawer .lang__menu { top: auto; bottom: calc(100% + 6px); transform-origin: bottom left; left: 0; right: auto; } /* Drawer (small screens) */ .drawer { position: fixed; inset: 0; z-index: 90; } .drawer[hidden] { display: none; } .drawer__panel { position: absolute; inset: 0; display: flex; flex-direction: column; gap: 1.5rem; overflow-y: auto; padding-bottom: 2rem; background: var(--panel); color: var(--on-panel); --ink: var(--on-panel); --ink-2: var(--on-panel-2); --focus: var(--on-panel); --logo-tagline: #F3F4EE; --ground-2: rgba(243, 244, 238, 0.1); --btn-hover-bg: var(--on-panel); --btn-hover-ink: var(--panel); transform: translateY(-100%); transition: transform 420ms var(--ease-drawer); } .drawer__list > .nav__item:nth-child(3n + 2) > .nav__link { color: var(--orange); } .drawer__list > .nav__item:nth-child(3n) > .nav__link { color: var(--green); } .drawer.is-open .drawer__panel { transform: none; } .drawer__top { display: flex; align-items: center; justify-content: space-between; min-height: var(--header-h); } .drawer__top .logo__svg { height: 46px; } .drawer__close { display: inline-flex; align-items: center; gap: 0.5rem; min-height: 44px; padding: 0 0.85rem; border: 2px solid currentColor; background: transparent; color: inherit; font-weight: 700; } .drawer__list { list-style: none; display: grid; gap: 0.25rem; } .drawer__list > .nav__item { flex-wrap: wrap; justify-content: space-between; } .drawer__list > .nav__item > .nav__link { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; font-size: clamp(2rem, 9vw, 3rem); line-height: 1.05; background: none; min-height: 56px; } .drawer__list .nav__sub-toggle { width: 48px; height: 48px; } .drawer__list .nav__sub { position: static; flex-basis: 100%; display: none; opacity: 1; visibility: visible; transform: none; background: transparent; border: 0; box-shadow: none; padding: 0 0 0.75rem 0.25rem; } /* taste-skill-ignore: resets the overlay shadow */ .drawer__list .nav__item.is-open > .nav__sub { display: block; } .drawer__list .nav__sub .nav__link { font-size: 1.25rem; padding: 0.4rem 0; } .drawer__list .nav__sub .nav__link:hover { background: none; text-decoration: underline; } .drawer__actions { display: grid; gap: 0.75rem; grid-template-columns: 1fr 1fr; } .drawer__tools { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin-top: auto; } .drawer .button--secondary { color: var(--on-panel); } html.drawer-open { overflow: hidden; } @media (max-width: 1180px) { .nav--primary, .link-donate { display: none; } .menu-button { display: inline-flex; } .site-header__tools { margin-inline-start: auto; } } @media (max-width: 640px) { :root { --header-h: 64px; } .logo__svg, .logo__img { height: 44px; } .site-header__tools .lang, .site-header__tools .mode-toggle { display: none; } .menu-button__label { display: none; } .site-header__join { padding-inline: 0.8em; font-size: 0.875rem; } } @media (max-width: 380px) { .site-header__join { display: none; } } /* Translation notices */ .tnotice { background: var(--ground-2); color: var(--ink); font-size: 0.9375rem; } .tnotice p { margin: 0; padding-block: 0.65rem; } .tnotice--fallback { background: var(--orange); color: #0E1711; --link: #0E1711; } /* Breadcrumbs */ .crumbs ol { display: flex; flex-wrap: wrap; gap: 0.25rem 0.5rem; list-style: none; margin: 0 0 1.5rem; font-size: var(--fs-small); color: var(--ink-2); } .crumbs li + li::before { content: "/"; margin-inline-end: 0.5rem; opacity: 0.6; } .crumbs a { color: inherit; } /* ---------- Hero ---------- */ .hero { position: relative; overflow: clip; padding-top: clamp(1rem, 3vw, 2.5rem); } .hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); } .hero__statement { grid-column: 5 / 13; grid-row: 1; container-type: inline-size; } .hero__talk { grid-column: 1 / 5; grid-row: 1 / 3; align-self: start; padding-top: clamp(2.5rem, 12vh, 9rem); padding-inline-end: clamp(0rem, 2vw, 2rem); } .hero__poster { grid-column: 5 / 13; grid-row: 2; position: relative; margin-top: clamp(1.5rem, 3vw, 2.75rem); } .hero__title { font-size: min(var(--fs-display), calc(153cqi / max(9, var(--hl, 9)))); line-height: 0.84; } /* each line ("MAKE RENT") stays whole at every width and in every language */ .hero__lead { font-size: var(--fs-lead); line-height: 1.38; max-width: 24ch; margin-bottom: 2rem; font-weight: 500; } .hero__actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1.25rem; } .hero__field { --field-h: clamp(300px, 46vh, 560px); position: relative; height: var(--field-h); background: var(--green); overflow: hidden; } .hero__sun { position: absolute; left: 50%; bottom: -24%; height: 106%; width: auto; aspect-ratio: 1; border-radius: 50%; background: var(--orange); transform: translateX(-50%); } .hero__portrait { position: absolute; left: 50%; bottom: 0; z-index: 1; height: 94%; width: auto; max-width: none; transform: translateX(-50%); object-fit: contain; object-position: bottom center; } .hero__field .emblem { position: absolute; left: 50%; bottom: 0; width: min(86%, calc(var(--field-h) * 0.9 * 540 / 372)); transform: translateX(-50%); } /* the artwork is 540×372: it fits the frame's height with green above the sun */ .hero__field:has(.emblem) .hero__sun { display: none; } .emblem svg { width: 100%; height: auto; } .hero__figure { position: absolute; z-index: 2; display: grid; gap: 0.25rem; width: 270px; max-width: calc(100% - 2 * clamp(0.75rem, 1.6vw, 1.25rem)); margin: 0; padding: 1rem 1.25rem 1.1rem; background: var(--panel); color: var(--on-panel); top: clamp(0.75rem, 1.6vw, 1.25rem); left: clamp(0.75rem, 1.6vw, 1.25rem); } .hero__figure strong { color: var(--orange); font-size: 2.5rem; line-height: 0.95; letter-spacing: -0.02em; } .hero__figure span { font-size: 0.9375rem; line-height: 1.35; } @media (max-width: 900px) { .hero__grid { grid-template-columns: 1fr; } .hero__statement, .hero__talk, .hero__poster { grid-column: 1; grid-row: auto; } .hero__statement { order: -1; } .hero__title { font-size: min(clamp(3.4rem, 15.5vw, 7rem), calc(153cqi / max(9, var(--hl, 9)))); } .hero__talk { padding-top: 1.25rem; } .hero__lead { max-width: 34ch; font-size: 1.1875rem; margin-bottom: 1.25rem; } .hero__actions .button { width: 100%; } .hero__poster { margin-inline: calc(var(--margin) * -1); margin-top: 4.5rem; } .hero__field { --field-h: max(260px, 68vw); } .hero__figure { left: var(--margin); top: var(--margin); width: min(64vw, 270px); } .hero__figure strong { font-size: 2rem; } } /* ---------- Stairs statement ---------- */ .stairs { position: relative; display: flex; align-items: center; min-height: min(100svh, 58rem); padding-block: var(--section); } .stairs__grid { position: relative; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; } .stairs__text { grid-column: 1 / 10; margin: 0; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.1rem, 0.9rem + 3.6vw, 4.1rem); line-height: 1.04; letter-spacing: -0.02em; } .stairs__line { display: block; padding-inline-start: calc(var(--step) * 5.5vw); } .stairs__line:nth-child(3n + 1) { color: var(--on-panel); } .stairs__line:nth-child(3n + 2) { color: var(--orange); } .stairs__line:nth-child(3n) { color: var(--green); } .stairs__photos { grid-column: 10 / 13; display: grid; gap: 1rem; } .stairs__photo { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .stairs__note { grid-column: 1 / -1; margin: 3rem 0 0; font-size: var(--fs-small); font-weight: 700; color: var(--on-panel-2); } @media (max-width: 900px) { .stairs { min-height: 0; } .stairs__text { grid-column: 1 / -1; font-size: clamp(1.9rem, 8.6vw, 3rem); } .stairs__line { padding-inline-start: calc(var(--step) * 4.5vw); } .stairs__photos { grid-column: 1 / -1; grid-template-columns: 1fr 1fr; margin-top: 2.5rem; } } /* ---------- Rent receipt ---------- */ .rent { padding-block: var(--section); } .rent__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; align-items: center; } .rent__text { grid-column: 1 / 7; } .rent__copy { font-size: var(--fs-lead); line-height: 1.45; max-width: 34ch; font-weight: 500; } .rent__ask { max-width: 40ch; color: var(--ink-2); } .receipt { grid-column: 8 / 13; margin: 0; } .receipt__paper { --zz: 14px; position: relative; padding: calc(var(--zz) + 1.5rem) clamp(1.25rem, 2.5vw, 2rem) calc(var(--zz) + 1.75rem); background: var(--sheet); color: var(--ink); transform: rotate(-1.2deg); font-variant-numeric: tabular-nums; -webkit-mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--zz) 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--zz) 51% repeat-x; /* taste-skill-ignore: mask that cuts the receipt’s zigzag edge */ mask: conic-gradient(from -45deg at bottom, #0000, #000 1deg 89deg, #0000 90deg) bottom / var(--zz) 51% repeat-x, conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--zz) 51% repeat-x; /* taste-skill-ignore: mask that cuts the receipt’s zigzag edge */ } .receipt__head { text-align: center; padding-bottom: 1rem; margin-bottom: 0.75rem; border-bottom: 2px dashed var(--line-soft); } .receipt__title { margin: 0; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 1.35rem; letter-spacing: -0.01em; } .receipt__sub { margin: 0.2rem 0 0; color: var(--ink-2); font-size: var(--fs-small); } .receipt__line { display: flex; align-items: baseline; gap: 0.5rem; padding-block: 0.5rem; } .receipt__line--rent { flex-wrap: wrap; justify-content: space-between; padding-bottom: 0.9rem; } .receipt__line--rent label { font-weight: 700; } .receipt__label { display: inline-flex; align-items: baseline; gap: 0.5rem; } .receipt__dots { flex: 1; min-width: 1rem; border-bottom: 2px dotted var(--line-soft); transform: translateY(-0.3em); } .receipt output { font-weight: 700; white-space: nowrap; } .receipt__money { display: inline-flex; align-items: baseline; gap: 0.2rem; font-weight: 800; font-size: 1.25rem; } .receipt input { border: 0; border-bottom: 2px solid var(--line); background: transparent; color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; padding: 0.15rem 0.1rem; border-radius: 0; } .receipt input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .receipt__money input { width: 8.5ch; font-size: 1.25rem; text-align: right; } .receipt__pct { display: inline-flex; align-items: baseline; font-size: var(--fs-small); color: var(--ink-2); } .receipt__pct input { width: 3.2ch; text-align: right; font-size: 1rem; -moz-appearance: textfield; appearance: textfield; } .receipt__pct input::-webkit-outer-spin-button, .receipt__pct input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .receipt__total { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.25rem 1rem; margin-top: 0.75rem; padding-top: 1rem; border-top: 4px double var(--ink); font-weight: 800; } .receipt__total output { font-size: clamp(1.75rem, 1.3rem + 1.6vw, 2.5rem); line-height: 1; letter-spacing: -0.02em; } .receipt__foot { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 1rem 1.5rem; margin-top: 1.1rem; padding-top: 1rem; border-top: 2px dashed var(--line-soft); } .receipt__extra { margin: 0; font-weight: 600; line-height: 1.45; text-wrap: pretty; } .stamp--receipt { justify-self: end; margin-inline-end: 0.35rem; } @media (max-width: 900px) { .rent__text, .receipt { grid-column: 1 / -1; } .receipt__paper { transform: rotate(-0.8deg); } } @media (max-width: 520px) { .receipt__foot { grid-template-columns: 1fr; } .stamp--receipt { justify-self: end; margin-block-start: 0.25rem; } } /* Rubber stamp (receipt and form confirmations) */ .stamp { display: inline-flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.2rem; padding: 0.6rem 1rem 0.65rem; border: 3px solid var(--orange); outline: 1.5px solid var(--orange); outline-offset: -8px; color: var(--orange-ink); transform: rotate(-9deg); transform-origin: 50% 60%; pointer-events: none; mix-blend-mode: multiply; } /* a rubber stamp: thick outer rule, thin inner rule, one ink */ [data-theme="dark"] .stamp { mix-blend-mode: normal; } .stamp__word { font-size: 1.85rem; line-height: 1; letter-spacing: 0.01em; } .stamp__meta { font-weight: 800; font-size: 0.75rem; line-height: 1.2; letter-spacing: 0.06em; text-transform: uppercase; } .js .stamp:not(.is-stamped) { opacity: 0; } .stamp.is-stamped { animation: stamp-in 460ms var(--ease-out) both; } /* The receipt's stamp lands once the receipt is on screen, a beat after the paper. */ .js .receipt:not(.is-in) .stamp--receipt { opacity: 0; animation: none; } .receipt.is-in .stamp--receipt.is-stamped { animation-delay: 520ms; } .receipt__paper { overflow: clip; } .stamp.is-thunk { animation: stamp-thunk 300ms var(--ease-out); } @keyframes stamp-in { 0% { opacity: 0; transform: rotate(-14deg) scale(1.4); } 62% { opacity: 1; transform: rotate(-8deg) scale(0.95); } 100% { opacity: 1; transform: rotate(-9deg) scale(1); } } @keyframes stamp-thunk { 0% { transform: rotate(-9deg) scale(1.18); } 100% { transform: rotate(-9deg) scale(1); } } /* ---------- Pictograms (inc/pictograms.php) ---------- A sun rising behind a paper cut-out, from the logo. Drawn on once when it scrolls into view (the one-time reveal of each commitment); its moving part answers a hover on the link around it. */ .pictogram { --pg-paper: var(--ground); --pg-sun: var(--orange); --pg-row: 0ms; overflow: visible; } [data-surface="orange"] .pictogram { --pg-paper: var(--orange); --pg-sun: var(--green); } [data-surface="green"] .pictogram { --pg-paper: var(--green); --pg-sun: var(--orange); } [data-surface="panel"] .pictogram { --pg-paper: var(--panel); } [data-surface="paper2"] .pictogram { --pg-paper: var(--ground-2); } .pg-sun { fill: var(--pg-sun); } .pg-p { fill: var(--pg-paper); } .pg-sun, .pg-move { transform-box: fill-box; transition: transform 240ms var(--ease-out); } .pg-sun, .pg-sway { transform-origin: 50% 100%; } .pg-twinkle { transform-origin: 50% 50%; } .pg-tip { transform-origin: 50% 0; } .pg-door { transition: fill 200ms ease; } .pg-art > :nth-child(1) { --pg-d: 140ms; } .pg-art > :nth-child(2) { --pg-d: 230ms; } .pg-art > :nth-child(3) { --pg-d: 320ms; } .pg-art > :nth-child(4) { --pg-d: 410ms; } .pg-art > :nth-child(5) { --pg-d: 500ms; } .pg-art > .pg-ground { --pg-d: 0ms; } .lineup__row:nth-child(2) .pictogram { --pg-row: 70ms; } .lineup__row:nth-child(3) .pictogram { --pg-row: 140ms; } .lineup__row:nth-child(4) .pictogram { --pg-row: 210ms; } .lineup__row:nth-child(5) .pictogram { --pg-row: 280ms; } .lineup__row:nth-child(6) .pictogram { --pg-row: 350ms; } @media (prefers-reduced-motion: no-preference) { .js .pictogram:not(.is-in) { visibility: hidden; } .js .pictogram.is-in .pg-l { animation: pg-draw 760ms var(--ease-out) backwards; animation-delay: calc(var(--pg-row) + var(--pg-d, 0ms)); } .js .pictogram.is-in .pg-p { animation: pg-draw 760ms var(--ease-out) backwards, pg-fill 360ms ease backwards; animation-delay: calc(var(--pg-row) + var(--pg-d, 0ms)), calc(var(--pg-row) + var(--pg-d, 0ms) + 420ms); } .js .pictogram.is-in .pg-sun { animation: pg-rise 900ms var(--ease-out) backwards; animation-delay: calc(var(--pg-row) + 160ms); } } @keyframes pg-draw { from { stroke-dasharray: 1 2; stroke-dashoffset: 1; } to { stroke-dasharray: 1 2; stroke-dashoffset: 0; } } @keyframes pg-fill { from { fill-opacity: 0; } } @keyframes pg-rise { from { transform: translateY(100%); } } @media (hover: hover) and (pointer: fine) { :is(a, button):hover .pg-door { fill: var(--pg-sun); } } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { :is(a, button):hover .pg-sun { transform: translateY(-3px); } :is(a, button):hover .pg-drive { transform: translateX(2.5px); } :is(a, button):hover .pg-twinkle { transform: rotate(14deg) scale(1.06); } :is(a, button):hover .pg-twinkle--small { transform: rotate(-24deg) scale(1.2); } :is(a, button):hover .pg-sway { transform: rotate(-5deg); } :is(a, button):hover .pg-roll { transform: translateX(-3px); } :is(a, button):hover .pg-hop { transform: translateY(-2.5px); } :is(a, button):hover .pg-lift { transform: translateY(-2px); } :is(a, button):hover .pg-tip { transform: rotate(-7deg); } } /* ---------- Interface icons (adio_icon) ---------- Each moving part answers the link or button it sits in: feedback on hover, nothing on touch. */ .icon :is(.i-go, .i-drop, .i-flap, .i-ring, .i-hop, .i-turn, .i-lens, .i-spin) { transform-box: fill-box; transform-origin: 50% 50%; transition: transform 200ms var(--ease-out); } .icon .i-flap { transform-origin: 50% 0; } .icon .i-ring { transform-origin: 70% 70%; } .icon .i-hop { transform-origin: 50% 100%; } @media (hover: hover) and (pointer: fine) and (prefers-reduced-motion: no-preference) { :is(a, button):hover :is(.icon-external, .icon-arrow-up) .i-go { transform: translate(1.5px, -1.5px); } :is(a, button):hover .icon-download .i-drop { transform: translateY(2px); } :is(a, button):hover .icon-mail .i-flap { transform: scaleY(-0.55); } :is(a, button):hover .icon-phone .i-ring { transform: rotate(-12deg); } :is(a, button):hover .icon-pin .i-hop { transform: translateY(-2px); } :is(a, button):hover .icon-close .i-turn { transform: rotate(90deg); } :is(a, button):hover .icon-search .i-lens { transform: rotate(-12deg); } :is(a, button):hover .icon-globe .i-spin { transform: scaleX(-1); } } /* ---------- Commitments line-up ---------- */ .lineup { padding-block: var(--section); } .lineup__head, .words__head, .newslist__head { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: 1rem 2rem; margin-bottom: clamp(1.5rem, 3vw, 3rem); } .lineup__head .section-title, .newslist__head .section-title { margin: 0; } .lineup__list { list-style: none; counter-reset: none; } .lineup__row + .lineup__row { border-top: 3px solid var(--ink); } .lineup__row:first-child { border-top: 3px solid var(--ink); } .lineup__row:last-child { border-bottom: 3px solid var(--ink); } .lineup__link { display: grid; grid-template-columns: 3.25rem minmax(0, 1.25fr) minmax(0, 1fr) 2.5rem; align-items: center; gap: 1.5rem; padding: clamp(1rem, 1.6vw, 1.5rem) 0.5rem; color: var(--ink); text-decoration: none; transition: background-color 160ms ease, color 160ms ease, padding 0s; } .lineup__pict .pictogram { width: 3.25rem; height: 3.25rem; } .lineup__name { font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: clamp(1.25rem, 0.8rem + 1.6vw, 2.15rem); line-height: 1.06; letter-spacing: -0.02em; font-variant-numeric: lining-nums; } .lineup__promise { font-size: 1.0625rem; line-height: 1.45; } .lineup__go { justify-self: end; transition: transform 200ms var(--ease-out); } @media (hover: hover) and (pointer: fine) { .lineup__link:hover { background: var(--ink); color: var(--orange); } .lineup__link:hover .pictogram { --pg-paper: var(--ink); } [data-surface="paper2"] .lineup__link:hover { color: var(--ground-2); } .lineup__link:hover .lineup__go { transform: translateX(6px); } } .lineup--compact .lineup__name { font-size: clamp(1.1rem, 0.8rem + 1vw, 1.5rem); } @media (max-width: 760px) { .lineup__link { grid-template-columns: 2.5rem minmax(0, 1fr) 1.5rem; gap: 0.35rem 1rem; } .lineup__pict { grid-row: span 2; align-self: start; } .lineup__pict .pictogram { width: 2.25rem; height: 2.25rem; } .lineup__promise { grid-column: 2; font-size: 0.9875rem; } .lineup__go { grid-row: 1; grid-column: 3; } } /* ---------- Meet ---------- */ .meet { padding-block: var(--section); } .meet__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; align-items: center; } .meet__photo { grid-column: 1 / 6; margin: 0; } .meet__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .meet__photo--emblem, .about-hero__photo--emblem { aspect-ratio: 4 / 5; background: var(--green); display: flex; align-items: flex-end; justify-content: center; overflow: hidden; } .meet__photo--emblem .emblem, .about-hero__photo--emblem .emblem { width: 92%; } .meet__text { grid-column: 7 / 13; } .meet__intro { font-size: var(--fs-lead); line-height: 1.45; max-width: 36ch; font-weight: 500; } .facts { display: grid; gap: 0; margin: 2rem 0 2.25rem; } .facts__row { display: grid; grid-template-columns: 9rem 1fr; gap: 1rem; padding-block: 0.8rem; border-top: 2px solid var(--line-soft); } .facts__row:last-child { border-bottom: 2px solid var(--line-soft); } .facts dt { color: var(--ink-2); font-size: var(--fs-small); font-weight: 700; padding-top: 0.15rem; } .facts dd { margin: 0; } @media (max-width: 900px) { .meet__photo, .meet__text { grid-column: 1 / -1; } .facts__row { grid-template-columns: 1fr; gap: 0.15rem; } } /* ---------- In his own words (videos) ---------- */ .words { padding-block: var(--section); } .words__intro { max-width: 40ch; margin: 0; color: var(--ink-2); font-size: 1.125rem; } .words__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2rem; } .words__lead { grid-column: 1 / 9; } .words__title { margin-top: 1.1rem; font-family: var(--font-display); font-weight: 800; font-size: var(--fs-h3); line-height: 1.1; } .words__title a { color: inherit; text-decoration: none; } .words__title a:hover { text-decoration: underline; } .words__source, .vrow__source { margin: 0.35rem 0 0; color: var(--ink-2); font-size: var(--fs-small); font-weight: 600; } .words__list { grid-column: 9 / 13; list-style: none; display: grid; gap: 0.25rem; align-content: start; } .vrow__link { display: grid; grid-template-columns: 8.5rem 1fr; gap: 1rem; align-items: center; padding: 0.6rem; margin-inline: -0.6rem; color: inherit; text-decoration: none; transition: background-color 160ms ease; } @media (hover: hover) and (pointer: fine) { .vrow__link:hover { background: rgba(243, 244, 238, 0.08); } } .vrow__thumb { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: rgba(243, 244, 238, 0.1); } .vrow__thumb img { width: 100%; height: 100%; object-fit: cover; } .vrow__thumb .icon { position: absolute; right: 0.4rem; bottom: 0.4rem; width: 26px; height: 26px; padding: 5px; background: var(--orange); color: #0E1711; } .vrow__title { display: block; font-weight: 700; line-height: 1.3; } .vrow__source { display: block; } .issue__video .vrow__title { margin: 0.85rem 0 0; } .words__all { padding-top: 1rem; } @media (max-width: 900px) { .words__lead, .words__list { grid-column: 1 / -1; } } /* Video facade */ .yt-facade { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: #0E1711; color: #F3F4EE; isolation: isolate; } .yt-facade__img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out), filter 300ms ease; } .yt-facade__img--empty { display: block; overflow: hidden; background: var(--green); } .yt-facade__img--empty::before { content: ""; position: absolute; left: 50%; top: 63%; width: 64%; aspect-ratio: 1; border-radius: 50%; background: var(--orange); transform: translateX(-50%); } /* sun rising behind the play button, drawn when YouTube has no thumbnail */ .yt-facade__play { position: absolute; inset: 0; margin: auto; z-index: 2; display: grid; place-items: center; width: clamp(64px, 8vw, 92px); height: clamp(64px, 8vw, 92px); padding: 0; border: 0; border-radius: 50%; background: var(--orange); color: #0E1711; transition: transform 200ms var(--ease-out), background-color 160ms ease; } .yt-facade__play .icon { width: 42%; height: 42%; margin-left: 6%; } @media (hover: hover) and (pointer: fine) { .yt-facade:hover .yt-facade__play { transform: scale(1.07); } .yt-facade:hover .yt-facade__img { transform: scale(1.03); } } .yt-facade__play:active { transform: scale(0.95); } .yt-facade__consent { position: absolute; inset: 0; z-index: 3; display: flex; flex-direction: column; justify-content: center; gap: 0.85rem; padding: clamp(1rem, 3vw, 2.25rem); background: rgba(14, 23, 17, 0.94); color: #F3F4EE; font-size: 1rem; } .yt-facade__consent[hidden] { display: none; } .yt-facade__consent p { margin: 0; max-width: 46ch; } .yt-facade__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; } .yt-facade__actions button { min-height: 44px; padding: 0.55rem 1rem; border: 2px solid #F3F4EE; background: transparent; color: #F3F4EE; font-weight: 700; } .yt-facade__actions .yt-facade__once { background: var(--orange); border-color: var(--orange); color: #0E1711; } .yt-facade__out { color: #F3F4EE; font-size: var(--fs-small); } .yt-facade.is-asking .yt-facade__play { opacity: 0; } .yt-facade__frame { position: absolute; inset: 0; z-index: 4; width: 100%; height: 100%; border: 0; } .yt-facade__noscript { position: absolute; left: 1rem; bottom: 1rem; z-index: 3; color: #F3F4EE; font-weight: 700; } /* Video player dialog: a video picked from a list plays here, over the page. */ .player { --focus: #F3F4EE; width: min(1120px, calc(100vw - 2 * var(--margin))); max-width: none; max-height: calc(100dvh - 2rem); margin: auto; padding: 0; border: 0; background: transparent; color: #F3F4EE; overflow: visible; } .player::backdrop { background: rgba(8, 14, 10, 0.88); } .player__box { display: grid; gap: 0.875rem; } .player__bar { display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .player__title { margin: 0; font-family: var(--font-display); font-weight: 700; font-size: clamp(1.05rem, 0.9rem + 0.6vw, 1.5rem); line-height: 1.2; text-wrap: balance; } .player__close { flex: none; display: grid; place-items: center; width: 48px; height: 48px; padding: 0; border: 2px solid #F3F4EE; background: transparent; color: #F3F4EE; transition: background-color 160ms ease, color 160ms ease, transform 160ms var(--ease-out); } .player__close:active { transform: scale(0.95); } .player__source { margin: 0; color: #A7B3AA; font-size: var(--fs-small); } .player__source[hidden] { display: none; } .player .yt-facade { box-shadow: 0 32px 90px rgba(0, 0, 0, 0.5); } /* taste-skill-ignore: an open dialog floats */ @media (hover: hover) and (pointer: fine) { .player__close:hover { background: #F3F4EE; color: #0E1711; } } @media (prefers-reduced-motion: no-preference) { .player[open] { animation: player-in 240ms var(--ease-out); } .player[open]::backdrop { animation: player-fade 240ms ease; } } @media (prefers-reduced-motion: reduce) { .player[open], .player[open]::backdrop { animation: player-fade 160ms ease; } } @keyframes player-in { from { opacity: 0; transform: translateY(14px) scale(0.97); } } @keyframes player-fade { from { opacity: 0; } } /* Video cards */ .vgrid { list-style: none; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); gap: clamp(1.5rem, 3vw, 2.5rem) var(--gutter); } .vcard[hidden] { display: none; } .vcard__link { display: grid; gap: 0.5rem; color: inherit; text-decoration: none; } .vcard__thumb { position: relative; display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--ground-2); } .vcard__thumb img { width: 100%; height: 100%; object-fit: cover; transition: transform 700ms var(--ease-out); } .vcard__empty { position: absolute; inset: 0; overflow: hidden; background: var(--green); } .vcard__empty::before { content: ""; position: absolute; left: 50%; top: 63%; width: 64%; aspect-ratio: 1; border-radius: 50%; background: var(--orange); transform: translateX(-50%); } .vcard__play { position: absolute; left: 0.75rem; bottom: 0.75rem; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--orange); color: #0E1711; } .vcard__play .icon { margin-left: 3px; } .vcard__source { color: var(--ink-2); font-size: var(--fs-small); font-weight: 700; } .vcard__title { font-family: var(--font-display); font-weight: 800; font-size: 1.25rem; line-height: 1.15; } @media (hover: hover) and (pointer: fine) { .vcard__link:hover img { transform: scale(1.04); } .vcard__link:hover .vcard__title { text-decoration: underline; text-decoration-thickness: 2px; } } /* ---------- Prints dropped on the headline ---------- */ .prints { overflow: clip; } .prints__stage { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: clamp(2.5rem, 5vw, 4rem); align-items: center; padding-block: var(--section); } .prints__copy { grid-column: 1 / 6; display: grid; gap: clamp(1.5rem, 2.5vw, 2.25rem); justify-items: start; } .prints__title { font-size: clamp(3.5rem, 1rem + 6.6vw, 8.5rem); line-height: 0.86; } .prints__text { max-width: 30ch; margin: 0; font-size: var(--fs-lead); line-height: 1.4; font-weight: 600; display: grid; gap: 0.75rem; justify-items: start; } .prints__set { grid-column: 6 / 13; position: relative; aspect-ratio: 7 / 6; } .prints__set:not(:has(.print--3)) { aspect-ratio: 10 / 7; } /* two photos: no empty band below them */ .print { position: absolute; margin: 0; padding: 0.55rem; background: var(--paper-print); transition: transform 220ms var(--ease-out); } .print img { display: block; width: 100%; height: auto; aspect-ratio: 3 / 4; object-fit: cover; } .print--1 { width: 44%; left: 4%; top: 6%; transform: rotate(-6deg); z-index: 1; } .print--2 { width: 44%; left: 40%; top: 0; transform: rotate(5deg); z-index: 2; } .print--3 { width: 32%; right: 0; bottom: 0; transform: rotate(-3deg); z-index: 3; } @media (hover: hover) and (pointer: fine) { .print:hover { transform: rotate(0deg) scale(1.02); z-index: 4; } } .prints--solo .prints__copy { grid-column: 1 / -1; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; column-gap: var(--gutter); } .prints--solo .prints__title { font-size: clamp(4rem, 1rem + 9vw, 11rem); } @media (max-width: 760px) { .prints__copy, .prints__set { grid-column: 1 / -1; } .prints--solo .prints__copy { grid-template-columns: 1fr; } .prints__title, .prints--solo .prints__title { font-size: clamp(3.25rem, 17vw, 6rem); } .prints__set { aspect-ratio: 1 / 1; } .prints__set:not(:has(.print--3)) { aspect-ratio: 4 / 3; } .print--1, .print--2 { width: 52%; } .print--3 { width: 38%; } } } /* ---------- Rows (news, posts, search) ---------- */ .newslist { padding-block: var(--section); } .rows { list-style: none; } .row + .row { border-top: 2px solid var(--line-soft); } .row__link { display: grid; grid-template-columns: 11rem minmax(0, 1fr) 15rem; grid-template-areas: "meta title thumb" "meta excerpt thumb"; gap: 0.4rem var(--gutter); align-items: start; padding: clamp(1.25rem, 2vw, 1.75rem) 0.75rem; margin-inline: -0.75rem; color: var(--ink); text-decoration: none; transition: background-color 160ms ease; } @media (hover: hover) and (pointer: fine) { .row__link:hover { background: var(--ground-2); } .row__link:hover .row__title { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.15em; } } .row__meta { grid-area: meta; display: grid; gap: 0.4rem; justify-items: start; padding-top: 0.3rem; color: var(--ink-2); font-size: var(--fs-small); font-weight: 600; font-variant-numeric: tabular-nums; } .row__title { grid-area: title; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.35rem, 1rem + 1.2vw, 2rem); line-height: 1.2; letter-spacing: -0.01em; font-variant-numeric: lining-nums; } .row__excerpt { grid-area: excerpt; color: var(--ink-2); max-width: 34em; } .row__thumb { grid-area: thumb; } .row__thumb img { width: 100%; aspect-ratio: 3 / 2; object-fit: cover; } .rows--compact .row__link { grid-template-columns: 9rem minmax(0, 1fr); grid-template-areas: "meta title" "meta excerpt"; } .rows--compact .row__thumb { display: none; } .rows--compact .row__title { font-size: 1.35rem; } @media (max-width: 760px) { .row__link, .rows--compact .row__link { grid-template-columns: 1fr; grid-template-areas: "thumb" "meta" "title" "excerpt"; } .row__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; } } /* ---------- Closing call to action ---------- */ .cta { padding-block: clamp(4rem, 2rem + 6vw, 8rem); } .cta__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; align-items: end; } .cta__copy { grid-column: 1 / 8; } .cta__title { font-size: clamp(2.4rem, 1.1rem + 4.2vw, 5.25rem); line-height: 0.9; max-width: 15ch; } .cta__lead { margin: clamp(1.25rem, 2vw, 1.75rem) 0 0; max-width: 34em; font-size: var(--fs-lead); line-height: 1.42; font-weight: 500; } .cta__actions { grid-column: 9 / 13; display: grid; gap: 0.75rem; } .cta__button { display: flex; align-items: center; justify-content: space-between; gap: 1rem; min-height: 84px; padding: 0 0.75rem 0 1.5rem; background: #0E1711; color: #F3F4EE; border: 2px solid #0E1711; font-family: var(--font-display); font-weight: 900; font-size: clamp(1.2rem, 1rem + 0.7vw, 1.6rem); line-height: 1.05; letter-spacing: -0.01em; text-transform: uppercase; text-decoration: none; transition: background-color 180ms ease, color 180ms ease, transform 160ms var(--ease-out); -webkit-tap-highlight-color: transparent; } .cta__go { flex: none; display: grid; place-items: center; width: 60px; height: 60px; background: var(--orange); color: #0E1711; transition: transform 240ms var(--ease-out), background-color 180ms ease, color 180ms ease; } .cta__go .icon { width: 26px; height: 26px; } .cta__button--alt { background: transparent; color: #0E1711; } .cta__button--alt .cta__go { background: #0E1711; color: #F3F4EE; } .cta__button:active { transform: scale(0.98); } .cta__button:focus-visible { outline: 3px solid #0E1711; outline-offset: 3px; } @media (hover: hover) and (pointer: fine) { .cta__button:hover .cta__go { transform: translateX(4px); } .cta__button--alt:hover { background: #0E1711; color: #F3F4EE; } .cta__button--alt:hover .cta__go { background: var(--orange); color: #0E1711; } } [data-surface="green"] .cta__go { background: var(--green); } [data-surface="green"] .cta__button--alt:hover .cta__go { background: var(--green); } .cta__note { margin: 0.25rem 0 0; font-size: var(--fs-small); font-weight: 600; } @media (max-width: 900px) { .cta__copy, .cta__actions { grid-column: 1 / -1; } .cta__button { min-height: 72px; padding-left: 1.25rem; } .cta__go { width: 52px; height: 52px; } } /* ---------- Footer ---------- */ .site-footer { position: relative; overflow: clip; padding-top: var(--section); background: var(--panel); color: var(--on-panel); --ink: var(--on-panel); --ink-2: var(--on-panel-2); --link: var(--on-panel); --focus: var(--on-panel); --line-soft: rgba(243, 244, 238, 0.2); --logo-tagline: #F3F4EE; --btn-hover-bg: var(--on-panel); --btn-hover-ink: var(--panel); } .site-footer__top { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; } .site-footer__invite { grid-column: 1 / 8; } .site-footer__title { font-size: clamp(3rem, 1rem + 6vw, 6.5rem); margin-bottom: 2rem; } .site-footer__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; } .site-footer__about { grid-column: 9 / 13; display: grid; gap: 1.25rem; align-content: start; color: var(--on-panel-2); } .site-footer__about .logo__svg { height: 96px; } .site-footer__about p { margin: 0; } .site-footer:has(.site-footer__top--solo) { padding-top: clamp(3rem, 2rem + 3vw, 4.5rem); } .site-footer__top--solo .site-footer__about { grid-column: 1 / -1; grid-template-columns: auto minmax(0, 34em) 1fr; align-items: center; column-gap: clamp(1.5rem, 3vw, 2.75rem); } .site-footer__top--solo .site-footer__about .manifesto { justify-self: end; } @media (max-width: 760px) { .site-footer__top--solo .site-footer__about { grid-template-columns: 1fr; } .site-footer__top--solo .site-footer__about .manifesto { justify-self: start; } } .manifesto { display: inline-grid; grid-template-columns: auto 1fr; align-items: center; gap: 0.85rem; justify-self: start; padding: 0.5rem 1rem 0.5rem 0.5rem; border: 2px solid var(--on-panel); color: var(--on-panel); text-decoration: none; transition: background-color 160ms ease, color 160ms ease; } .manifesto__icon { display: grid; place-items: center; width: 44px; height: 44px; background: var(--orange); color: #0E1711; } .manifesto__text { display: grid; line-height: 1.25; } .manifesto__text span { font-size: 0.875rem; color: var(--on-panel-2); } @media (hover: hover) and (pointer: fine) { .manifesto:hover { background: var(--on-panel); color: var(--panel); } .manifesto:hover .manifesto__text span { color: var(--panel); } } .site-footer__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 2rem var(--gutter); margin-top: clamp(3.5rem, 6vw, 6rem); padding-top: 2rem; border-top: 3px solid var(--on-panel); } .site-footer__heading { margin-bottom: 0.85rem; font-size: 0.9375rem; font-weight: 800; color: var(--orange); } .site-footer__list { list-style: none; display: grid; gap: 0.3rem; } .site-footer__list + .site-footer__list { margin-top: 0.3rem; } /* Cookie settings sits in its own list under the legal menu. */ .site-footer__list a, .site-footer__list .link-button { color: var(--on-panel); text-decoration: none; display: inline-block; padding-block: 0.25rem; } .site-footer__list a:hover, .site-footer__list .link-button:hover { text-decoration: underline; text-decoration-thickness: 2px; } .site-footer__list address { font-style: normal; color: var(--on-panel-2); } .site-footer__contact { display: grid; gap: 1rem; align-content: start; } .site-footer__contact > .site-footer__heading { margin-bottom: -0.15rem; } /* grid gap + this = the 0.85rem the other columns use */ .socials { list-style: none; display: flex; flex-wrap: wrap; gap: 0.25rem; } .socials a { display: grid; place-items: center; width: 44px; height: 44px; color: var(--on-panel); border: 2px solid var(--on-panel-2); } .socials a:hover { background: var(--on-panel); color: var(--panel); } .site-footer__tools .lang__button { padding-inline: 0; } .site-footer__legal { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.5rem 2rem; margin-top: 3rem; padding-bottom: clamp(1.5rem, 3vw, 2.5rem); font-size: 0.875rem; color: var(--on-panel-2); } .site-footer__legal p { margin: 0; } .site-footer__legal a { color: var(--on-panel); } @media (max-width: 900px) { .site-footer__invite, .site-footer__about { grid-column: 1 / -1; } .site-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 520px) { .site-footer__grid { grid-template-columns: 1fr; } .site-footer__actions .button { flex: 1 1 100%; } } /* ---------- Page hero ---------- */ .phero { padding-block: clamp(2rem, 1rem + 4vw, 4.5rem) clamp(2.75rem, 1.5rem + 5vw, 6rem); } .phero__title { font-size: var(--fs-h1); line-height: 0.86; max-width: 14ch; } .phero__lead { max-width: 40ch; margin: clamp(1.5rem, 3vw, 2.5rem) 0 0; font-size: var(--fs-lead); line-height: 1.42; font-weight: 500; } .phero__grid { display: grid; gap: clamp(2rem, 4vw, 3.5rem); } @media (min-width: 900px) { .phero--image .phero__grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); align-items: end; } } .phero__print { margin: 0; padding: 0.55rem; background: var(--paper-print); transform: rotate(1.6deg); width: min(84%, 30rem); justify-self: end; } [data-surface="paper"] .phero__print { outline: 2px solid var(--ink); outline-offset: 0; } .phero__img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; } .phero .searchbar { margin-top: 2rem; max-width: 36rem; } .phero--legal .phero__title { font-size: clamp(2.6rem, 1.4rem + 4.5vw, 5.5rem); max-width: 18ch; } /* ---------- About ---------- */ .about-hero { padding-block: clamp(1.5rem, 3vw, 3rem) var(--section); } .about-hero__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2.5rem; align-items: end; } .about-hero__text { grid-column: 1 / 8; } .about-hero__photo { grid-column: 8 / 13; margin: 0; } .about-hero__photo img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; } .about-hero__quote { margin: clamp(1.75rem, 4vw, 3rem) 0 0; max-width: 38ch; } .about-hero__quote p { position: relative; margin: 0; font-size: var(--fs-lead); line-height: 1.42; font-weight: 500; } .about-hero__quote p::before { content: "“"; display: block; height: 0.42em; margin: 0 0 0.15em -0.05em; font-family: var(--font-display); font-weight: 900; font-size: 4em; line-height: 0.9; color: var(--orange); } .about-hero__quote footer { margin-top: 0.85rem; font-weight: 700; } .factband { padding-block: clamp(2.5rem, 5vw, 4.5rem); } .factband__list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 2rem var(--gutter); margin: 0; } .factband__item dt { color: var(--orange); font-weight: 800; font-size: 0.9375rem; margin-bottom: 0.35rem; } .factband__item dd { margin: 0; font-size: 1.125rem; line-height: 1.45; } .values { padding-block: 0 var(--section); } .values__list { list-style: none; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0; } .value { container-type: inline-size; padding: clamp(1.75rem, 3vw, 2.75rem); min-height: 18rem; display: flex; flex-direction: column; justify-content: space-between; gap: 1.5rem; } .value--0 { background: var(--green); color: var(--on-field); } .value--1 { background: var(--orange); color: var(--on-field); } .value--2 { background: var(--panel); color: var(--on-panel); } .value__name { font-size: clamp(1.2rem, 8.8cqi, 3rem); line-height: 0.9; } /* one long word (ACCOUNTABILITY) must fit its third of the row */ .value p { margin: 0; font-size: 1.0625rem; max-width: 32ch; } @media (max-width: 900px) { .about-hero__text, .about-hero__photo { grid-column: 1 / -1; } .factband__list { grid-template-columns: 1fr 1fr; } .values__list { grid-template-columns: 1fr; } .value { min-height: 0; } } @media (max-width: 520px) { .factband__list { grid-template-columns: 1fr; } } /* ---------- Issues ---------- */ .chapter { padding-block: clamp(4rem, 2rem + 7vw, 8rem); } .chapter__grid { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2rem; align-items: start; } .chapter__pict { grid-column: 1 / 4; } .chapter__pict .pictogram { width: clamp(5rem, 12vw, 11rem); height: auto; } .chapter__text { grid-column: 4 / 12; } .chapter__title { font-size: clamp(2.4rem, 1.2rem + 4.6vw, 5.5rem); line-height: 0.88; max-width: 16ch; } .chapter__promise { margin: 1.5rem 0; font-size: var(--fs-lead); font-weight: 600; max-width: 38ch; line-height: 1.38; } .chapter__body { max-width: 34em; margin-bottom: 1.5rem; } .chapter__body p { margin-bottom: 1em; } @media (max-width: 760px) { .chapter__pict, .chapter__text { grid-column: 1 / -1; } .chapter__pict .pictogram { width: 4.5rem; } } .issue__hero { padding-block: clamp(2rem, 4vw, 4rem) clamp(3rem, 6vw, 6rem); } .issue__hero-grid { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: end; } .issue__title { font-size: clamp(2.6rem, 1.2rem + 5vw, 6.5rem); line-height: 0.86; max-width: 15ch; } .issue__promise { margin: 1.75rem 0 0; max-width: 34ch; font-size: var(--fs-lead); font-weight: 600; line-height: 1.38; } .issue__pict .pictogram { width: clamp(5rem, 14vw, 13rem); height: auto; } .issue__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; } .issue__body .prose { grid-column: 1 / 8; } .issue__video { grid-column: 9 / 13; } .issue__aside-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; margin-bottom: 1rem; } @media (max-width: 900px) { .issue__body .prose, .issue__video { grid-column: 1 / -1; } .issue__hero-grid { grid-template-columns: 1fr; } .issue__pict { order: -1; } .issue__pict .pictogram { width: 4.5rem; } } /* ---------- Prose ---------- */ .prose { max-width: 35em; } .prose--wide { max-width: none; } .prose--large { font-size: clamp(1.125rem, 1rem + 0.4vw, 1.3rem); } .prose > * { margin-block: 0; } .prose > * + * { margin-top: 1.1em; } .prose h2 { margin-top: 2.2em; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.6rem, 1.1rem + 1.8vw, 2.4rem); line-height: 1.08; letter-spacing: -0.015em; font-variant-numeric: lining-nums; } .prose h3 { margin-top: 1.8em; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.55rem); line-height: 1.15; } .prose h2 + *, .prose h3 + * { margin-top: 0.65em; } .prose--side h2 { margin-top: 1.8em; font-size: clamp(1.25rem, 1rem + 0.8vw, 1.55rem); line-height: 1.15; } .prose ul, .prose ol { padding-inline-start: 1.35em; } .prose li + li { margin-top: 0.4em; } .prose ul li::marker { color: var(--green-ink); } .prose strong { font-weight: 700; } .prose blockquote { margin-inline: 0; padding: 0.25em 0 0.25em 1.25em; box-shadow: inset 4px 0 0 var(--orange); font-size: 1.2em; font-weight: 500; } /* taste-skill-ignore: inset bar marks a quotation */ .prose blockquote.is-style-poster { box-shadow: none; padding: 0; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.75rem, 1rem + 3vw, 3.25rem); line-height: 0.95; } /* taste-skill-ignore: resets the quotation bar */ .prose img { height: auto; } .prose figure { margin-inline: 0; } .prose figcaption, .article__media figcaption { margin-top: 0.6rem; color: var(--ink-2); font-size: var(--fs-small); } .prose hr { border: 0; height: 4px; background: var(--ink); margin-block: 2.5em; } .prose .wp-block-image { margin-block: 2em; } .prose--side { position: sticky; top: calc(var(--header-h) + 2rem); } .prose--story > p:first-of-type { font-size: var(--fs-lead); line-height: 1.45; font-weight: 500; } /* About: his story with three prints beside it, held in view while the story scrolls. */ .story { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); align-items: start; } .story > .prose--story { grid-column: 1 / 8; } .story__prints { grid-column: 9 / 13; position: sticky; top: calc(var(--header-h) + 2.5rem); display: grid; padding-block: 0.5rem 1.5rem; } .story__print { margin: 0; padding: 0.55rem; background: var(--paper-print); } .story__print { outline: 2px solid var(--ink); } .story__print img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; } .story__print--1 { width: 80%; justify-self: end; transform: rotate(2.5deg); } .story__print--2 { width: 66%; margin-top: -14%; transform: rotate(-4deg); position: relative; z-index: 1; } .story__print--3 { width: 70%; justify-self: end; margin-top: -10%; transform: rotate(1.5deg); position: relative; z-index: 2; } @media (max-width: 900px) { .story > .prose--story { grid-column: 1 / -1; } .story__prints { grid-column: 1 / -1; grid-row: 1; position: static; display: flex; justify-content: center; margin-bottom: clamp(1.5rem, 5vw, 2.5rem); padding: 0.75rem 0 0; } .story__print { width: 38%; margin: 0; } .story__print--2 { margin-inline: -6%; margin-top: 0; } .story__print--3 { margin-top: 0; } } .prose .table-wrap { overflow-x: auto; margin-block: 1.5em; } .cookie-table, .prose table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; } .cookie-table caption { text-align: left; font-weight: 700; padding-bottom: 0.5rem; } .cookie-table th, .cookie-table td, .prose table th, .prose table td { padding: 0.65rem 0.75rem; text-align: left; vertical-align: top; border-bottom: 2px solid var(--line-soft); } .cookie-table th { background: var(--ground-2); font-weight: 700; } .cookie-table code { font-size: 0.85em; word-break: break-all; } .wp-block-gallery.is-style-prints { gap: clamp(1rem, 2.5vw, 2.25rem) !important; } .wp-block-gallery.is-style-prints .wp-block-image { padding: 0.55rem; background: var(--paper-print); transition: transform 220ms var(--ease-out); } .wp-block-gallery.is-style-prints .wp-block-image:nth-child(3n + 1) { transform: rotate(-1.6deg); } .wp-block-gallery.is-style-prints .wp-block-image:nth-child(3n + 2) { transform: rotate(1.2deg); } .wp-block-gallery.is-style-prints .wp-block-image:nth-child(3n) { transform: rotate(-0.6deg); } @media (hover: hover) and (pointer: fine) { .wp-block-gallery.is-style-prints .wp-block-image:hover { transform: rotate(0) scale(1.02); z-index: 1; } } /* ---------- Articles ---------- */ .article__head { padding-block: clamp(1.5rem, 3vw, 3rem) 2rem; } .article__kind { margin: 0 0 1rem; } .article__title { max-width: 22ch; font-family: var(--font-display); font-weight: 800; font-size: clamp(2.1rem, 1.2rem + 3.4vw, 4.4rem); line-height: 1.02; letter-spacing: -0.02em; font-variant-numeric: lining-nums; } .article__dek { max-width: 46ch; margin: 1.5rem 0 1.25rem; font-size: var(--fs-lead); line-height: 1.45; font-weight: 500; color: var(--ink-2); } .article__head .meta { margin-top: 1.25rem; } .article__media { margin-block: 0 clamp(2rem, 4vw, 3.5rem); } .article__media img { width: 100%; max-height: 78vh; object-fit: cover; } .article__body { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); padding-bottom: var(--section); } .article__body .prose { grid-column: 3 / 10; font-size: clamp(1.125rem, 1.05rem + 0.25vw, 1.2rem); } .article__aside { grid-column: 11 / 13; } .share { position: sticky; top: calc(var(--header-h) + 2rem); } .share__label { margin: 0 0 0.5rem; font-weight: 800; font-size: 0.9375rem; } .share__list { list-style: none; display: grid; gap: 0.25rem; } .share__link { display: inline-flex; align-items: center; gap: 0.6rem; min-height: 44px; padding: 0; border: 0; background: none; color: var(--ink); font-weight: 600; text-decoration: none; cursor: pointer; } .share__link:hover span { text-decoration: underline; text-decoration-thickness: 2px; } .related { padding-top: 0; } @media (max-width: 1024px) { .article__body .prose { grid-column: 1 / -1; } .article__aside { grid-column: 1 / -1; margin-top: 3rem; } .share { position: static; } .share__list { display: flex; flex-wrap: wrap; gap: 0.25rem 1.25rem; } } /* Video page */ .video-page__stage { padding-block: clamp(1.5rem, 3vw, 3rem) clamp(2.5rem, 5vw, 4.5rem); } .video-page__player { max-width: 68rem; } .video-page__title { max-width: 30ch; margin: 1.75rem 0 0.85rem; font-family: var(--font-display); font-weight: 800; font-size: clamp(1.75rem, 1.2rem + 2.2vw, 3rem); line-height: 1.08; } /* ---------- Sheets (application form, donation) ---------- */ .join, .donate, .contact { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 3rem; align-items: start; } .join__intro { grid-column: 1 / 6; } .join__form { grid-column: 6 / 13; } .donate__form { grid-column: 1 / 8; } .donate__why { grid-column: 9 / 13; } .contact__form { grid-column: 1 / 8; } .contact__aside { grid-column: 9 / 13; display: grid; gap: 1.5rem; position: sticky; top: calc(var(--header-h) + 2rem); } @media (max-width: 1024px) { .join__intro, .join__form, .donate__form, .donate__why, .contact__form, .contact__aside { grid-column: 1 / -1; } .prose--side, .contact__aside { position: static; } } .sheet { --zz: 14px; position: relative; padding: calc(var(--zz) + clamp(1.25rem, 3vw, 2.5rem)) clamp(1.25rem, 3vw, 2.75rem) clamp(1.75rem, 3vw, 2.75rem); background: var(--sheet); color: var(--ink); box-shadow: 0 0 0 2px var(--ink); /* taste-skill-ignore: 2px ink outline drawn as a ring, no blur */ -webkit-mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--zz) var(--zz) repeat-x, linear-gradient(#000 0 0) 0 calc(var(--zz) - 1px) / 100% 100% no-repeat; /* taste-skill-ignore: mask that cuts the receipt’s zigzag edge */ mask: conic-gradient(from 135deg at top, #0000, #000 1deg 89deg, #0000 90deg) top / var(--zz) var(--zz) repeat-x, linear-gradient(#000 0 0) 0 calc(var(--zz) - 1px) / 100% 100% no-repeat; /* taste-skill-ignore: mask that cuts the receipt’s zigzag edge */ } .sheet__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 0.25rem 1rem; padding-bottom: 1.25rem; margin-bottom: 1.75rem; border-bottom: 2px dashed var(--line-soft); } .sheet__title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.5rem, 1.1rem + 1.4vw, 2.1rem); letter-spacing: -0.02em; } .sheet__sub { margin: 0; color: var(--ink-2); font-size: var(--fs-small); } .sheet__privacy { margin: 1.5rem 0 0; color: var(--ink-2); font-size: 0.9375rem; } .card-panel { padding: clamp(1.5rem, 3vw, 2.25rem); } .card-panel__title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 1.6rem; margin-bottom: 1.25rem; letter-spacing: -0.01em; } .contact__list { list-style: none; display: grid; gap: 0.85rem; } .contact__list li { display: grid; grid-template-columns: 24px minmax(0, 1fr); gap: 0.85rem; align-items: center; font-size: 1.125rem; line-height: 1.35; } .contact__list li .icon { width: 24px; height: 24px; } .contact__list li:has(address) { align-items: start; } .contact__list li:has(address) .icon { margin-top: 0.1rem; } .contact__list a { color: var(--on-panel); font-weight: 700; overflow-wrap: anywhere; } .contact__list address { font-style: normal; } .contact__note, .contact__hours { margin: 1.25rem 0 0; color: var(--on-panel-2); font-size: var(--fs-small); } .contact__faq { margin: 0; display: grid; gap: 0.4rem; justify-items: start; } .donate-fallback { padding: 1.5rem; background: var(--ground-2); } /* ---------- Forms ---------- */ .aform { display: grid; gap: 0; } .aform__section { margin: 0 0 2.25rem; padding: 0; border: 0; min-width: 0; } .aform__legend { display: block; width: 100%; padding: 0; margin-bottom: 1rem; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 1.3rem; letter-spacing: -0.01em; } .aform__grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.1rem var(--gutter); } .aform__field { min-width: 0; margin-bottom: 1.1rem; } .aform__grid .aform__field { margin-bottom: 0; } .aform__field--wide { grid-column: 1 / -1; } .aform__label { display: block; margin-bottom: 0.4rem; font-weight: 700; font-size: 1rem; line-height: 1.35; } .aform__optional { font-weight: 500; color: var(--ink-2); font-size: 0.9375rem; } .aform__hint { margin: -0.15rem 0 0.5rem; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.45; } .aform input[type="text"], .aform input[type="email"], .aform input[type="tel"], .aform select, .aform textarea { display: block; width: 100%; min-height: 52px; padding: 0.7rem 0.9rem; border: 2px solid var(--line); border-radius: 0; background: var(--sheet); color: var(--ink); font-size: 1.0625rem; line-height: 1.4; transition: border-color 160ms ease, box-shadow 160ms ease; /* taste-skill-ignore: focus ring transition */ } .aform textarea { min-height: 7.5rem; resize: vertical; } .aform input:hover, .aform select:hover, .aform textarea:hover { border-color: var(--ink); } .aform input:focus-visible, .aform select:focus-visible, .aform textarea:focus-visible { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px var(--sheet), 0 0 0 6px var(--focus); } /* taste-skill-ignore: focus ring */ .aform ::placeholder { color: var(--ink-2); opacity: 1; } .aform__select { position: relative; } .aform__select select { appearance: none; padding-right: 2.75rem; } .aform__select .icon { position: absolute; right: 0.85rem; top: 50%; transform: translateY(-50%); pointer-events: none; } .aform__counter { margin: 0.3rem 0 0; font-size: 0.875rem; color: var(--ink-2); text-align: right; min-height: 1.2em; } .aform__counter:empty { display: none; } .aform__error { display: flex; align-items: flex-start; gap: 0.35rem; margin: 0.4rem 0 0; color: var(--error); font-weight: 700; font-size: 0.9375rem; line-height: 1.4; } .aform__error:empty { display: none; } .aform__error .icon { flex: none; margin-top: 0.2em; } .has-error input, .has-error select, .has-error textarea { border-color: var(--error); } .aform__choices { border: 0; padding: 0; margin: 0 0 1.25rem; min-width: 0; } .aform__choices legend.aform__label { padding: 0; margin-bottom: 0.6rem; } .aform__choices:focus { outline: none; } .aform__group { margin-bottom: 1.1rem; } .aform__group-name { margin: 0 0 0.5rem; font-weight: 800; font-size: 0.9375rem; color: var(--ink-2); } .aform__chips, .aform__choices--inline { display: flex; flex-wrap: wrap; gap: 0.5rem; } .aform__choices--inline > legend { width: 100%; } .chip { position: relative; display: inline-flex; cursor: pointer; } .chip input { position: absolute; opacity: 0; width: 100%; height: 100%; inset: 0; margin: 0; cursor: pointer; } .chip span { display: inline-flex; align-items: center; gap: 0.45rem; min-height: 44px; padding: 0.5rem 0.9rem; border: 2px solid var(--line); background: var(--sheet); color: var(--ink); font-size: 0.9875rem; font-weight: 600; line-height: 1.3; transition: background-color 140ms ease, color 140ms ease, border-color 140ms ease, transform 140ms var(--ease-out); } .chip span::before { content: ""; flex: none; width: 0.85rem; height: 0.85rem; border: 2px solid currentColor; transition: background-color 140ms ease; } .chip input[type="radio"] + span::before { border-radius: 50%; } .chip:hover span { border-color: var(--ink); } .chip input:checked + span { background: var(--ink); color: var(--ground); border-color: var(--ink); } .chip input:checked + span::before { background: var(--orange); border-color: var(--orange); } .chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; } .chip:active span { transform: scale(0.97); } .aform__choices.has-error .chip span { border-color: var(--error); } .aform__check { display: grid; grid-template-columns: 1.6rem 1fr; gap: 0.75rem; align-items: start; margin-bottom: 1rem; } .aform__check input { appearance: none; width: 1.6rem; height: 1.6rem; margin: 0.1rem 0 0; border: 2px solid var(--ink); background: var(--sheet); display: grid; place-items: center; cursor: pointer; } .aform__check input::after { content: ""; width: 0.95rem; height: 0.55rem; border: solid #0E1711; border-width: 0 0 3px 3px; transform: rotate(-45deg) scale(0.6); opacity: 0; margin-top: -0.2rem; transition: transform 160ms var(--ease-out), opacity 120ms var(--ease-out); } .aform__check input:checked { background: var(--orange); border-color: var(--orange); } .aform__check input:checked::after { transform: rotate(-45deg) scale(1); opacity: 1; } .aform__check input:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } .aform__check label { line-height: 1.5; font-size: 1rem; cursor: pointer; } .aform__check .aform__error { grid-column: 2; margin-top: 0; } .aform__check.has-error input { border-color: var(--error); } .aform__section--consent .aform__hint { margin-bottom: 1.25rem; } .aform__submit { display: grid; gap: 0.85rem; justify-items: start; } .aform__note { margin: 0; color: var(--ink-2); font-size: 0.9375rem; } .aform__trap { position: absolute !important; left: -10000px !important; width: 1px; height: 1px; overflow: hidden; } /* taste-skill-ignore: off-screen spam trap, not a rule */ .aform__summary { margin-bottom: 2rem; padding: 1.1rem 1.25rem; border: 3px solid var(--error); background: var(--sheet); } .aform__summary:focus { outline: none; box-shadow: 0 0 0 3px var(--sheet), 0 0 0 6px var(--focus); } /* taste-skill-ignore: focus ring */ .aform__summary p { margin: 0 0 0.5rem; font-weight: 800; color: var(--error); } .aform__summary ul { padding-inline-start: 1.2rem; } .aform__summary a { color: var(--ink); font-weight: 600; } .aform__done { position: relative; padding: clamp(1.5rem, 3vw, 2.5rem) 0 0; } .aform__done:focus { outline: none; } .aform__done .stamp { position: absolute; right: 0; top: 0; } .aform__done .stamp__word { font-size: 2.1rem; } .aform__done-title { max-width: 14ch; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(2rem, 1.2rem + 3vw, 3.5rem); line-height: 0.9; letter-spacing: -0.02em; } .aform__done-ref { margin: 1.25rem 0 0.5rem; font-size: 1.0625rem; font-variant-numeric: tabular-nums; } .aform__done-text { max-width: 46ch; font-size: 1.125rem; } @media (max-width: 640px) { .aform__grid { grid-template-columns: 1fr; } .aform__submit .button { width: 100%; } .aform__done .stamp { position: static; margin-bottom: 1.25rem; } } .contact__form .aform__grid { margin-bottom: 1.1rem; } /* GiveWP (legacy form templates; v3+ forms render in GiveWP's own frame — set their colours in the form builder) */ .give-embed { min-height: 12rem; } .give-form-wrap .give-btn, .give-embed .give-submit { background: var(--orange) !important; color: #0E1711 !important; border: 0 !important; border-radius: 0 !important; font-weight: 700 !important; min-height: 48px; } .give-embed input[type="text"], .give-embed input[type="email"], .give-embed input[type="tel"], .give-embed select { border: 2px solid var(--line) !important; border-radius: 0 !important; min-height: 48px; background: var(--sheet); color: var(--ink); } .give-embed iframe { width: 100%; border: 0; } /* ---------- Listing, filters, search, pagination ---------- */ .listing { padding-top: clamp(1.5rem, 3vw, 2.5rem); } .listing__tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem 2rem; margin-bottom: 2rem; } .filters ul { list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 0; } [data-video-library] .filters { margin-bottom: 2rem; } .filter { display: inline-flex; align-items: center; min-height: 44px; padding: 0.4rem 1rem; border: 2px solid var(--line); background: transparent; color: var(--ink); font-weight: 700; font-size: 0.9375rem; text-decoration: none; transition: background-color 140ms ease, color 140ms ease; } .filter:hover { border-color: var(--ink); } .filter.is-active, .filter[aria-pressed="true"] { background: var(--ink); color: var(--ground); border-color: var(--ink); } .searchbar { display: flex; align-items: stretch; width: min(100%, 26rem); } .searchbar__input { flex: 1; min-width: 0; min-height: 48px; padding: 0.6rem 0.9rem; border: 2px solid var(--ink); border-right: 0; border-radius: 0; background: var(--sheet); color: var(--ink); font-size: 1rem; } .searchbar__input:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--focus); } /* taste-skill-ignore: focus ring */ .searchbar__button { display: grid; place-items: center; width: 52px; border: 2px solid var(--ink); background: var(--ink); color: var(--ground); border-radius: 0; } .searchbar--big { width: 100%; } .searchbar--big .searchbar__input { min-height: 60px; font-size: 1.25rem; padding-inline: 1.1rem; } .searchbar--big .searchbar__button { width: 60px; } .pager { margin-top: 3rem; } .pager .nav-links { display: flex; flex-wrap: wrap; gap: 0.5rem; align-items: center; } .pager .page-numbers { display: inline-grid; place-items: center; min-width: 44px; min-height: 44px; padding: 0 0.9rem; border: 2px solid var(--line); color: var(--ink); font-weight: 700; text-decoration: none; } .pager .page-numbers.current { background: var(--ink); color: var(--ground); border-color: var(--ink); } .pager .page-numbers:hover { border-color: var(--ink); } .pager .dots { border: 0; } .also { margin-top: 4rem; } .also__title { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; margin-bottom: 1rem; } .empty { padding: clamp(2rem, 5vw, 4rem); border: 2px dashed var(--line); text-align: center; display: grid; justify-items: center; gap: 0.5rem; } .empty__title { margin: 0; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 1.75rem; } .biglinks { list-style: none; } .biglinks li + li { border-top: 3px solid var(--ink); } .biglinks a { display: flex; justify-content: space-between; align-items: center; gap: 1rem; padding-block: 1.1rem; color: var(--ink); text-decoration: none; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.75rem, 1rem + 3vw, 3.5rem); letter-spacing: -0.02em; } .biglinks a:hover { color: var(--green-ink); } /* ---------- FAQ ---------- */ .faq > * { max-width: 60rem; } .faq__search { margin-bottom: 3rem; } .faq__label { display: block; margin-bottom: 0.6rem; font-weight: 800; } .faq__status { margin: 0.75rem 0 0; color: var(--ink-2); min-height: 1.5em; } .faq__group { margin-bottom: 3rem; } .faq__group[hidden] { display: none; } .faq__group-title { margin-bottom: 0.75rem; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: clamp(1.4rem, 1.1rem + 1vw, 1.85rem); letter-spacing: -0.01em; } .qa { border-top: 3px solid var(--ink); } .qa:last-child { border-bottom: 3px solid var(--ink); } .qa[hidden] { display: none; } .qa__q { display: flex; justify-content: space-between; align-items: center; gap: 1.5rem; padding: 1.15rem 0; cursor: pointer; list-style: none; font-weight: 700; font-size: clamp(1.1rem, 1rem + 0.4vw, 1.3rem); line-height: 1.35; } .qa__q::-webkit-details-marker { display: none; } .qa__q:hover span:first-child { text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.18em; } .qa__icon { position: relative; flex: none; width: 28px; height: 28px; background: var(--orange); } .qa__icon::before, .qa__icon::after { content: ""; position: absolute; left: 7px; right: 7px; top: 12.5px; height: 3px; background: #0E1711; transition: transform 220ms var(--ease-out); } .qa__icon::after { transform: rotate(90deg); } .qa[open] .qa__icon::after { transform: rotate(0deg); } .qa__a { padding: 0 3.25rem 1.5rem 0; color: var(--ink); } .qa::details-content { block-size: 0; overflow: clip; transition: block-size 260ms var(--ease-out), content-visibility 260ms allow-discrete; } .qa[open]::details-content { block-size: auto; } .qa mark { background: var(--orange); color: #0E1711; } .faq__more { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; margin: 1rem 0 2rem; padding: 1.5rem; } .faq__more p { margin: 0; font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 1.5rem; } /* ---------- Legal ---------- */ .legal { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: var(--gutter); row-gap: 2rem; padding-top: clamp(1rem, 2vw, 2rem); } .legal__toc { grid-column: 1 / 4; position: sticky; top: calc(var(--header-h) + 1.5rem); align-self: start; max-height: calc(100vh - var(--header-h) - 3rem); overflow: auto; } .legal__toc-title { margin: 0 0 0.75rem; font-weight: 800; } .legal__toc ol { list-style: none; display: grid; gap: 0.15rem; counter-reset: toc; } .legal__toc a { display: block; padding: 0.35rem 0 0.35rem 0.85rem; color: var(--ink-2); text-decoration: none; font-size: 0.9375rem; line-height: 1.35; box-shadow: inset 3px 0 0 var(--line-soft); } /* taste-skill-ignore: rail beside the contents list */ .legal__toc a:hover, .legal__toc a.is-active { color: var(--ink); box-shadow: inset 3px 0 0 var(--green); } /* taste-skill-ignore: inset bar marks the current section */ .legal__body { grid-column: 4 / 12; } .legal__body > p:first-child { color: var(--ink-2); font-size: var(--fs-small); } @media (max-width: 1024px) { .legal__toc { grid-column: 1 / -1; position: static; max-height: none; padding: 1.25rem; background: var(--ground-2); } .legal__body { grid-column: 1 / -1; } } /* ---------- Photos section on Media ---------- */ .photos .section { padding-top: clamp(3rem, 6vw, 5rem); } /* ---------- Consent banner and dialog ---------- */ .consent { position: fixed; left: var(--margin); bottom: var(--margin); z-index: 80; width: min(40rem, calc(100% - 2 * var(--margin))); background: var(--sheet); color: var(--ink); border: 3px solid var(--ink); box-shadow: var(--shadow-float); opacity: 0; transform: translateY(16px); transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out); } /* taste-skill-ignore: cookie banner is an overlay */ .consent.is-visible { opacity: 1; transform: none; } .consent[hidden] { display: none; } .consent__inner { padding: 1.25rem 1.5rem 1.4rem; } .consent__title { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 1.35rem; margin-bottom: 0.5rem; letter-spacing: -0.01em; } .consent__text p { margin: 0; font-size: 0.9875rem; line-height: 1.5; } .consent__text a { color: var(--green-ink); } .consent__actions { display: grid; grid-template-columns: 1fr 1fr auto; gap: 0.5rem; margin-top: 1rem; } .consent .button { min-height: 46px; font-size: 0.9375rem; padding-inline: 0.9rem; } .button--text { background: transparent; border-color: transparent; color: var(--ink); text-decoration: underline; text-decoration-thickness: 2px; text-underline-offset: 0.2em; } @media (max-width: 560px) { .consent { left: 0; right: 0; bottom: 0; width: 100%; border-width: 3px 0 0; } .consent__actions { grid-template-columns: 1fr 1fr; } .consent__actions .button--text { grid-column: 1 / -1; } } .consent-dialog { width: min(42rem, calc(100% - 2rem)); max-height: calc(100dvh - 2rem); padding: 0; border: 3px solid var(--ink); background: var(--sheet); color: var(--ink); box-shadow: var(--shadow-float); } /* taste-skill-ignore: dialog is an overlay */ .consent-dialog[open] { opacity: 1; transform: none; transition: opacity 220ms var(--ease-out), transform 260ms var(--ease-out), overlay 260ms allow-discrete, display 260ms allow-discrete; } @starting-style { .consent-dialog[open] { opacity: 0; transform: translateY(12px); } } .consent-dialog::backdrop { background: rgba(14, 23, 17, 0.62); } .consent-dialog__form { display: grid; gap: 0; padding: 1.4rem 1.5rem 1.5rem; } .consent-dialog__head { display: flex; justify-content: space-between; align-items: center; gap: 1rem; margin-bottom: 0.5rem; } .consent-dialog__head h2 { font-family: var(--font-display); font-weight: 900; text-transform: uppercase; font-size: 1.6rem; letter-spacing: -0.01em; } .consent-dialog__close { display: grid; place-items: center; width: 44px; height: 44px; border: 0; background: transparent; color: var(--ink); } .consent-dialog__intro { color: var(--ink-2); font-size: 0.9875rem; } .consent-dialog__list { list-style: none; margin: 0.5rem 0 1.25rem; } .consent-cat { display: grid; grid-template-columns: 1fr auto; gap: 1rem; align-items: start; padding-block: 1rem; border-top: 2px solid var(--line-soft); } .consent-cat h3 { font-size: 1.0625rem; font-weight: 800; margin-bottom: 0.25rem; } .consent-cat p { margin: 0; color: var(--ink-2); font-size: 0.9375rem; line-height: 1.5; } .switch { position: relative; display: grid; justify-items: end; gap: 0.25rem; cursor: pointer; } .switch input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; margin: 0; cursor: pointer; } .switch input:disabled { cursor: not-allowed; } .switch__track { position: relative; width: 52px; height: 30px; border: 2px solid var(--ink); background: var(--ground-2); transition: background-color 160ms ease; } .switch__thumb { position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; background: var(--ink); transition: transform 220ms var(--ease-out); } .switch input:checked + .switch__track { background: var(--green); } .switch input:checked + .switch__track .switch__thumb { transform: translateX(22px); background: #0E1711; } .switch input:disabled + .switch__track { opacity: 0.7; } .switch input:focus-visible + .switch__track { outline: 3px solid var(--focus); outline-offset: 2px; } .switch__state { font-size: 0.8125rem; color: var(--ink-2); font-weight: 700; } .consent-dialog__foot { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 0.5rem; } .consent-dialog__legal { margin: 1rem 0 0; font-size: 0.875rem; color: var(--ink-2); } /* ---------- Motion ---------- */ .js [data-reveal] { opacity: 0; transform: translateY(26px); } .js [data-reveal].is-in { opacity: 1; transform: none; transition: opacity 700ms var(--ease-out), transform 900ms var(--ease-out); transition-delay: calc(var(--d, 0) * 80ms); } .js .lineup__list[data-reveal] { opacity: 1; transform: none; } .js .lineup__list[data-reveal] .lineup__row { opacity: 0; transform: translateY(18px); } .js .lineup__list[data-reveal].is-in .lineup__row { opacity: 1; transform: none; transition: opacity 600ms var(--ease-out), transform 700ms var(--ease-out); } .js .lineup__list.is-in .lineup__row:nth-child(2) { transition-delay: 60ms; } .js .lineup__list.is-in .lineup__row:nth-child(3) { transition-delay: 120ms; } .js .lineup__list.is-in .lineup__row:nth-child(4) { transition-delay: 180ms; } .js .lineup__list.is-in .lineup__row:nth-child(5) { transition-delay: 240ms; } .js .lineup__list.is-in .lineup__row:nth-child(6) { transition-delay: 300ms; } .js .stairs__text[data-reveal] { opacity: 1; transform: none; } .js .stairs__text[data-reveal] .stairs__line { opacity: 0; transform: translateX(-24px); } .js .stairs__text[data-reveal].is-in .stairs__line { opacity: 1; transform: none; transition: opacity 600ms var(--ease-out), transform 800ms var(--ease-out); transition-delay: calc(var(--step) * 90ms); } /* Masked headline: each line rises from behind its own baseline. Room above for diacritics. */ .js [data-masked] .line { overflow: clip; padding-top: 0.14em; margin-top: -0.14em; padding-bottom: 0.06em; margin-bottom: -0.06em; } /* Room inside the mask for tone marks above capitals and dots below (Yorùbá, Igbo), hooks (Hausa), accents (French). */ .js :lang(fr) [data-masked] .line, .js :lang(ha) [data-masked] .line { padding-top: 0.32em; margin-top: -0.32em; padding-bottom: 0.1em; margin-bottom: -0.1em; } .js :lang(yo) [data-masked] .line, .js :lang(ig) [data-masked] .line { padding-top: 0.32em; margin-top: -0.32em; padding-bottom: 0.3em; margin-bottom: -0.3em; } .js [data-masked] .line__in { display: block; transform: translateY(108%); } .js [data-masked].is-in .line__in { transform: none; transition: transform 950ms var(--ease-out); transition-delay: calc(var(--i) * 110ms); } /* Hero choreography: headline, then the sun rises, then the words. */ .js .hero__sun { transform: translate(-50%, 34%); } .js .hero__portrait { transform: translate(-50%, 8%); opacity: 0; } .js .hero__field .emblem { transform: translate(-50%, 10%); opacity: 0; } .js .hero.is-in .hero__sun { transform: translate(-50%, 0); transition: transform 1300ms var(--ease-out) 250ms; } .js .hero.is-in .hero__portrait, .js .hero.is-in .hero__field .emblem { transform: translate(-50%, 0); opacity: 1; transition: transform 1200ms var(--ease-out) 380ms, opacity 500ms ease 380ms; } .js .hero__figure { opacity: 0; } .js .hero.is-in .hero__figure { opacity: 1; transition: opacity 500ms ease 900ms; } .js .hero .hero__talk[data-reveal] { transition-delay: 420ms; } /* Theme change without View Transitions: everything eases together. */ html.theme-fading, html.theme-fading *, html.theme-fading *::before, html.theme-fading *::after { transition: background-color 420ms ease, color 420ms ease, border-color 420ms ease, fill 420ms ease, box-shadow 420ms ease !important; } ::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; } ::view-transition-new(root) { z-index: 1; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; transition-delay: 0ms !important; scroll-behavior: auto !important; } .js [data-reveal], .js [data-reveal] *, .js [data-masked] .line__in, .js .hero__sun, .js .hero__portrait, .js .hero__field .emblem, .js .hero__figure { opacity: 1 !important; transform: none !important; } .js .hero__sun, .js .hero__portrait, .js .hero__field .emblem { transform: translateX(-50%) !important; } .drawer__panel { transform: none; } .js .stamp:not(.is-stamped) { opacity: 1; } } /* ---------- Forced colours and print ---------- */ @media (forced-colors: active) { .button, .chip span, .filter, .searchbar__input, .searchbar__button, .lineup__link, .switch__track { border: 2px solid ButtonText; } .stamp { border-color: CanvasText; color: CanvasText; } } @media print { .site-header, .drawer, .site-footer, .consent, .consent-dialog, .cta, .share, .hero__poster, .yt-facade__play { display: none !important; } body { background: #fff; color: #000; } [data-surface] { background: #fff !important; color: #000 !important; } .prose a::after { content: " (" attr(href) ")"; font-size: 0.85em; } .js [data-reveal], .js [data-masked] .line__in { opacity: 1 !important; transform: none !important; } }