@charset "UTF-8"; /* ============================================================================= Parkestone Foundation ----------------------------------------------------------------------------- The site has exactly one ornament, and it is also its index: every year the Foundation has published a grant report gets a hue, running red at the newest end to magenta at the oldest. A chronological list of reports therefore reads as a pride flag from top to bottom. Nothing else is coloured — where you see the spectrum on this site, you are looking at a date. That rule is what keeps the identity from tipping into decoration, so resist adding a rainbow anywhere the content is not chronological. The per-year values live in content/data.py (SPECTRUM) and arrive here as inline custom properties on the element that needs them. ========================================================================== */ /* --- Typefaces ------------------------------------------------------------- Both are variable and self-hosted; the CSP allows no external origins. Fraunces carries the personality (opsz for real optical sizing, SOFT to take the edge off, WONK for its angled terminals) and Archivo does the work — its width axis gives us a condensed utility style for labels and years without a third family. */ @font-face { font-family: "Fraunces"; src: url("/assets/fonts/fraunces-var.woff2") format("woff2-variations"); font-weight: 300 900; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: "Archivo"; src: url("/assets/fonts/archivo-var.woff2") format("woff2-variations"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* --- Tokens --------------------------------------------------------------- */ :root { --paper: #fcfbfd; --paper-2: #f4f1f8; --paper-3: #ece7f4; --ink: #17101f; --ink-2: #574b66; --ink-3: #6f6480; --rule: #e4dfec; --rule-strong: #cec6dc; --accent: #6d2fc7; --accent-hover: #551ea6; --accent-soft: #f1e9fd; --shadow: 20 12 32; --shadow-a: 0.07; --font-display: "Fraunces", "Iowan Old Style", Georgia, serif; --font-body: "Archivo", system-ui, -apple-system, "Segoe UI", sans-serif; /* Fraunces at display sizes: high optical size, a little softness, wonk on. */ --vf-display: "opsz" 96, "SOFT" 28, "WONK" 1; --vf-display-tight: "opsz" 144, "SOFT" 16, "WONK" 1; --measure: 66ch; --wrap: 1180px; --wrap-wide: 1400px; --gutter: clamp(1.25rem, 4vw, 3rem); --section: clamp(3.5rem, 8vw, 7rem); --radius: 4px; --step--1: 0.8125rem; --step-0: 1rem; --step-1: 1.125rem; --step-2: clamp(1.25rem, 0.9rem + 0.9vw, 1.5rem); --step-3: clamp(1.5rem, 1rem + 1.7vw, 2.125rem); --step-4: clamp(1.9rem, 1.1rem + 2.8vw, 3rem); --step-5: clamp(2.5rem, 1rem + 5.6vw, 5rem); color-scheme: light; } @media (prefers-color-scheme: dark) { :root { --paper: #120c1a; --paper-2: #1a1326; --paper-3: #241a33; --ink: #f6f3fa; --ink-2: #aba0bc; --ink-3: #8b7fa0; --rule: #2c2139; --rule-strong: #40314f; --accent: #be95ff; --accent-hover: #d5bcff; --accent-soft: #241734; --shadow: 0 0 0; --shadow-a: 0.5; color-scheme: dark; } } /* The toggle stamps data-theme on and must beat the media query in both directions, so each theme is written out in full rather than as an override. */ :root[data-theme="light"] { --paper: #fcfbfd; --paper-2: #f4f1f8; --paper-3: #ece7f4; --ink: #17101f; --ink-2: #574b66; --ink-3: #6f6480; --rule: #e4dfec; --rule-strong: #cec6dc; --accent: #6d2fc7; --accent-hover: #551ea6; --accent-soft: #f1e9fd; --shadow: 20 12 32; --shadow-a: 0.07; color-scheme: light; } :root[data-theme="dark"] { --paper: #120c1a; --paper-2: #1a1326; --paper-3: #241a33; --ink: #f6f3fa; --ink-2: #aba0bc; --ink-3: #8b7fa0; --rule: #2c2139; --rule-strong: #40314f; --accent: #be95ff; --accent-hover: #d5bcff; --accent-soft: #241734; --shadow: 0 0 0; --shadow-a: 0.5; color-scheme: dark; } /* --- Reset ---------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 6rem; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: var(--step-0); font-variation-settings: "wdth" 100; line-height: 1.65; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg, video { display: block; max-width: 100%; height: auto; } h1, h2, h3, h4 { margin: 0; font-family: var(--font-display); font-variation-settings: var(--vf-display); font-weight: 600; line-height: 1.1; letter-spacing: -0.015em; text-wrap: balance; } p, ul, ol, figure, blockquote { margin: 0; } a { color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.18em; } a:hover { color: var(--accent-hover); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 2px; } button { font: inherit; color: inherit; } hr { border: 0; border-top: 1px solid var(--rule); margin: 0; } ::selection { background: var(--accent-soft); color: var(--ink); } /* --- Utilities ------------------------------------------------------------ */ .wrap { width: min(100% - var(--gutter) * 2, var(--wrap)); margin-inline: auto; } .wrap--wide { width: min(100% - var(--gutter) * 2, var(--wrap-wide)); margin-inline: auto; } .prose { max-width: var(--measure); color: var(--ink-2); font-size: var(--step-1); } .prose > * + * { margin-top: 1.1em; } .prose strong { color: var(--ink); font-weight: 600; } /* Archivo condensed, uppercase — every label, eyebrow, year and caption. */ .label { font-family: var(--font-body); font-variation-settings: "wdth" 82; font-weight: 650; font-size: var(--step--1); letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .skip { position: absolute; left: 1rem; top: -4rem; z-index: 100; padding: 0.7rem 1.1rem; background: var(--ink); color: var(--paper); border-radius: var(--radius); text-decoration: none; transition: top 0.15s ease; } .skip:focus { top: 1rem; color: var(--paper); } /* --- Buttons -------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.55em; padding: 0.72em 1.35em; border: 1px solid transparent; border-radius: 100px; font-family: var(--font-body); font-size: var(--step-0); font-weight: 600; line-height: 1.2; text-decoration: none; cursor: pointer; transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease, transform 0.16s ease; } .btn:hover { transform: translateY(-1px); } .btn--solid { background: var(--ink); border-color: var(--ink); color: var(--paper); } .btn--solid:hover { background: var(--accent); border-color: var(--accent); color: #fff; } .btn--ghost { background: transparent; border-color: var(--rule-strong); color: var(--ink); } .btn--ghost:hover { border-color: var(--ink); color: var(--ink); background: var(--paper-2); } .btn--accent { background: var(--accent); border-color: var(--accent); color: var(--paper); } .btn--accent:hover { background: var(--accent-hover); border-color: var(--accent-hover); color: var(--paper); } .btn .arrow { transition: transform 0.16s ease; } .btn:hover .arrow { transform: translateX(3px); } /* --- Masthead ------------------------------------------------------------- */ .masthead { position: sticky; top: 0; z-index: 50; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(14px) saturate(1.4); border-bottom: 1px solid var(--rule); } .masthead__inner { display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.5rem); min-height: 4.5rem; } .brand { display: flex; align-items: center; gap: 0.7rem; color: var(--ink); text-decoration: none; flex: none; } .brand__mark { display: block; width: 3.25rem; height: auto; flex: none; } .brand__name { display: grid; line-height: 1.05; } .brand__name b { font-family: var(--font-display); font-variation-settings: var(--vf-display); font-weight: 650; font-size: 1.0625rem; letter-spacing: -0.01em; } .brand__name span { font-variation-settings: "wdth" 84; font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-3); } .masthead nav { margin-inline-start: auto; } .masthead__links { display: flex; align-items: center; gap: clamp(0.75rem, 2vw, 1.75rem); list-style: none; margin: 0; padding: 0; } .masthead__links a { color: var(--ink-2); font-size: 0.9375rem; font-weight: 550; text-decoration: none; padding: 0.35rem 0; border-bottom: 2px solid transparent; } .masthead__links a:hover { color: var(--ink); } .masthead__links a[aria-current="page"] { color: var(--ink); border-bottom-color: var(--accent); } .masthead__actions { display: flex; align-items: center; gap: 0.6rem; flex: none; } .masthead__actions .btn { padding: 0.55em 1.1em; font-size: 0.9375rem; } .icon-btn { display: grid; place-items: center; width: 2.35rem; height: 2.35rem; padding: 0; border: 1px solid var(--rule); border-radius: 100px; background: transparent; color: var(--ink-2); cursor: pointer; transition: color 0.16s ease, border-color 0.16s ease; } .icon-btn:hover { color: var(--ink); border-color: var(--rule-strong); } .icon-btn svg { width: 1.05rem; height: 1.05rem; } /* The theme control cycles auto -> light -> dark, and shows the mode currently in effect rather than the one it would switch to. Auto is the absence of an explicit choice, which is also how the tokens above are written, so it needs no attribute of its own — it is simply neither of the other two. Without scripting the button cannot do anything, so it is not shown. */ .theme-toggle { display: none; } .js .theme-toggle { display: grid; } .theme-toggle svg { display: none; } :root:not([data-theme="light"]):not([data-theme="dark"]) .theme-toggle .auto { display: block; } :root[data-theme="light"] .theme-toggle .sun { display: block; } :root[data-theme="dark"] .theme-toggle .moon { display: block; } .menu-toggle { display: none; } @media (max-width: 940px) { .masthead nav { position: fixed; inset: 4.5rem 0 auto; background: var(--paper); border-bottom: 1px solid var(--rule); padding: 0.5rem var(--gutter) 1.5rem; transform: translateY(-120%); transition: transform 0.24s ease; box-shadow: 0 20px 40px -20px rgb(var(--shadow) / var(--shadow-a)); } .masthead[data-open="true"] nav { transform: translateY(0); } .masthead__links { flex-direction: column; align-items: stretch; gap: 0; } .masthead__links a { display: block; padding: 0.85rem 0; border-bottom: 1px solid var(--rule); font-size: 1.0625rem; } .masthead__links a[aria-current="page"] { border-bottom-color: var(--rule); color: var(--accent); } .menu-toggle { display: grid; margin-inline-start: auto; } .masthead__actions .btn--ghost { display: none; } } @media (max-width: 480px) { .brand__name span { display: none; } } /* Small phones. The masthead carries a wordmark, a theme toggle, Donate and the menu button, and at 320px those four stop fitting between the gutters — tighten everything rather than dropping the one action the page has. */ @media (max-width: 400px) { :root { --gutter: 1rem; } .masthead__inner { gap: 0.5rem; } .masthead__actions { gap: 0.35rem; } .masthead__actions .btn { padding: 0.5em 0.85em; font-size: 0.875rem; } .icon-btn { width: 2.1rem; height: 2.1rem; } .brand__mark { width: 2.5rem; } .brand__name b { font-size: 0.9375rem; } } /* --- Page header ---------------------------------------------------------- */ .pagehead { padding-block: clamp(2.5rem, 6vw, 4.5rem) clamp(2rem, 4vw, 3rem); border-bottom: 1px solid var(--rule); } .pagehead__eyebrow { display: block; margin-bottom: 1rem; } .pagehead h1 { font-size: var(--step-4); font-variation-settings: var(--vf-display-tight); max-width: 18ch; } .pagehead .prose { margin-top: 1.5rem; } /* --- Hero ----------------------------------------------------------------- */ .hero { padding-block: clamp(3rem, 8vw, 6.5rem) 0; } .hero__top { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: end; } @media (min-width: 900px) { .hero__top { grid-template-columns: 1.15fr 0.85fr; } } .hero__title { font-size: var(--step-5); font-variation-settings: var(--vf-display-tight); font-weight: 600; letter-spacing: -0.03em; line-height: 0.98; } .hero__title span { display: block; } .hero__title span:last-child { color: var(--accent); font-style: italic; } .hero__eyebrow { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; } .hero__eyebrow::before { content: ""; width: 2rem; height: 2px; background: var(--accent); flex: none; } .hero__lead { color: var(--ink-2); font-size: var(--step-1); max-width: 44ch; } .hero__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; } /* The ledger: what a Parkestone grant actually bought, taken verbatim from the acquittal reports. The year on each line is a link into that year's report, so the one decorative-looking thing on the page is also the navigation. */ .ledger { margin-top: clamp(3rem, 7vw, 5rem); border-top: 1px solid var(--rule); padding-top: 1.75rem; } .ledger__head { margin-bottom: 1.5rem; } .ledger__list { list-style: none; margin: 0; padding: 0; columns: 2; column-gap: clamp(2rem, 5vw, 4rem); } @media (max-width: 700px) { .ledger__list { columns: 1; } } .ledger__list li { break-inside: avoid; margin-bottom: 0.2rem; } .ledger__item { display: flex; align-items: baseline; gap: 0.85rem; padding: 0.5rem 0; color: var(--ink); text-decoration: none; border-bottom: 1px solid transparent; } .ledger__item:hover { color: var(--ink); border-bottom-color: var(--rule); } .ledger__year { font-variation-settings: "wdth" 78; font-weight: 650; font-size: 0.8125rem; letter-spacing: 0.05em; color: var(--year); flex: none; position: relative; padding-left: 1rem; } .ledger__year::before { content: ""; position: absolute; left: 0; top: 0.42em; width: 7px; height: 7px; border-radius: 100px; background: var(--swatch); } .ledger__what { font-size: 0.9375rem; color: var(--ink-2); } .ledger__item:hover .ledger__what { color: var(--ink); } /* --- Stats ---------------------------------------------------------------- */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 1px; margin-top: clamp(3rem, 7vw, 5rem); background: var(--rule); border-block: 1px solid var(--rule); } .stat { background: var(--paper); padding: clamp(1.5rem, 3vw, 2.25rem) clamp(1rem, 2vw, 1.75rem); } .stat__value { font-family: var(--font-display); font-variation-settings: var(--vf-display-tight); font-weight: 600; font-size: var(--step-3); line-height: 1; letter-spacing: -0.02em; } .stat__label { display: block; margin-top: 0.6rem; } .stat__note { margin-top: 0.5rem; font-size: 0.875rem; color: var(--ink-3); line-height: 1.5; } /* --- Sections ------------------------------------------------------------- */ .section { padding-block: var(--section); } .section--tint { background: var(--paper-2); } .section--rule { border-top: 1px solid var(--rule); } .section__head { max-width: var(--measure); margin-bottom: clamp(2rem, 4vw, 3rem); } .section__head .label { display: block; margin-bottom: 0.9rem; } .section__head h2 { font-size: var(--step-3); } .section__head .prose { margin-top: 1.1rem; } /* --- Split (image + text) ------------------------------------------------- */ .split { display: grid; gap: clamp(1.75rem, 5vw, 4rem); align-items: center; } @media (min-width: 820px) { .split { grid-template-columns: 1fr 1fr; } .split--reverse .split__media { order: 2; } } .split + .split { margin-top: clamp(3rem, 7vw, 5.5rem); } /* Capped rather than given a fixed ratio: these images are a mix of portrait and landscape, and forcing one aspect on both crops the portraits to a strip. */ .split__media img { width: 100%; max-height: 30rem; border-radius: var(--radius); object-fit: cover; } .split h2 { font-size: var(--step-3); margin-bottom: 1.1rem; } /* --- Process -------------------------------------------------------------- */ /* Numbered because these steps genuinely happen in order, on fixed dates. */ .process { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; } @media (min-width: 760px) { .process { grid-template-columns: repeat(4, 1fr); } } .process__step { background: var(--paper); padding: clamp(1.5rem, 3vw, 2rem); display: flex; flex-direction: column; gap: 0.6rem; } .process__n { font-variation-settings: "wdth" 78; font-weight: 700; font-size: 0.75rem; letter-spacing: 0.12em; color: var(--accent); } .process__step h3 { font-size: var(--step-2); } .process__when { font-variation-settings: "wdth" 84; font-size: 0.8125rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-3); } .process__step p { font-size: 0.9375rem; color: var(--ink-2); margin-top: 0.2rem; } /* --- Objectives ----------------------------------------------------------- */ .objectives { display: grid; gap: 1px; background: var(--rule); border-block: 1px solid var(--rule); } @media (min-width: 700px) { .objectives { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .objectives { grid-template-columns: repeat(3, 1fr); } } .objective { background: var(--paper); padding: clamp(1.5rem, 3vw, 2.25rem); } .objective h3 { font-size: var(--step-2); margin-bottom: 0.6rem; } .objective p { color: var(--ink-2); font-size: 0.9375rem; } /* --- Trustees ------------------------------------------------------------- */ .trustees { display: grid; gap: clamp(2rem, 4vw, 3rem); } @media (min-width: 720px) { .trustees { grid-template-columns: repeat(2, 1fr); } } .trustee { display: grid; grid-template-columns: 92px 1fr; gap: 1.25rem; align-items: start; } .trustee img { width: 92px; height: 92px; border-radius: 100px; object-fit: cover; background: var(--paper-3); } /* Stands in for the headshot of a trustee who has not supplied one yet. Same circle as the portrait so the two-column grid holds its shape either way. */ .trustee__initials { display: grid; place-items: center; width: 92px; height: 92px; border-radius: 100px; background: var(--paper-3); color: var(--ink-2); font-size: var(--step-2); font-variation-settings: "wdth" 88; font-weight: 650; letter-spacing: 0.04em; } .trustee h3 { font-size: var(--step-2); } .trustee__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 0.75rem; margin: 0.4rem 0 0.9rem; align-items: baseline; } .trustee__role { font-variation-settings: "wdth" 88; font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; color: var(--accent); } .trustee__pronouns { font-size: 0.8125rem; color: var(--ink-3); } .trustee__bio { font-size: 0.9375rem; color: var(--ink-2); } .trustee__bio > * + * { margin-top: 0.8em; } @media (max-width: 520px) { .trustee { grid-template-columns: 1fr; } } /* --- Report list ---------------------------------------------------------- */ .reports { display: grid; gap: clamp(2rem, 5vw, 3.5rem); align-items: start; } @media (min-width: 900px) { .reports { grid-template-columns: 8rem 1fr; } } /* The year spine — the spectrum, doing its job as an index. */ .spine { position: sticky; top: 6.5rem; display: none; } @media (min-width: 900px) { .spine { display: block; } } .spine ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--rule); } .spine a { display: flex; align-items: center; gap: 0.6rem; padding: 0.3rem 0 0.3rem 0.85rem; margin-left: -1px; border-left: 2px solid transparent; font-variation-settings: "wdth" 80; font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.06em; color: var(--ink-3); text-decoration: none; } .spine a::before { content: ""; width: 7px; height: 7px; border-radius: 100px; background: var(--swatch); opacity: 0.45; transition: opacity 0.2s ease, transform 0.2s ease; } .spine a:hover, .spine a[aria-current="true"] { color: var(--year); border-left-color: var(--swatch); } .spine a:hover::before, .spine a[aria-current="true"]::before { opacity: 1; transform: scale(1.3); } .spine__count { margin-left: auto; font-size: 0.6875rem; color: var(--ink-3); font-variation-settings: "wdth" 78; } .year-block + .year-block { margin-top: clamp(2.5rem, 5vw, 4rem); } .year-block__head { display: flex; align-items: baseline; gap: 1rem; padding-bottom: 0.75rem; border-bottom: 2px solid var(--swatch); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); } .year-block__head h2 { font-size: var(--step-3); color: var(--year); font-variation-settings: var(--vf-display-tight); } .year-block__head .label { margin-left: auto; } .report { display: grid; gap: clamp(1.25rem, 3vw, 2rem); padding-block: clamp(1.5rem, 3vw, 2.25rem); border-top: 1px solid var(--rule); scroll-margin-top: 7rem; } .report:first-child { border-top: 0; padding-top: 0; } @media (min-width: 620px) { .report { grid-template-columns: 170px 1fr; } } .report__cover { align-self: start; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--paper-2); max-width: 170px; } .report__cover img { width: 100%; aspect-ratio: 17 / 22; object-fit: cover; object-position: top center; } .report h3 { font-size: var(--step-2); } .report__meta { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.4rem 0.8rem; margin-top: 0.5rem; margin-bottom: 1rem; } .report__date { font-variation-settings: "wdth" 84; font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; color: var(--year); } .report__grantee { font-size: 0.875rem; color: var(--ink-3); } .report__grantee::before { content: ""; display: inline-block; width: 3px; height: 3px; border-radius: 100px; background: currentColor; vertical-align: 0.3em; margin-right: 0.6rem; } .report__body { color: var(--ink-2); font-size: 0.9375rem; } .report__body > * + * { margin-top: 0.85em; } .report__docs { margin-top: 1.1rem; display: flex; flex-wrap: wrap; gap: 0.5rem; } /* --- Document links ------------------------------------------------------- */ .doclink { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.8rem 0.4rem 0.65rem; border: 1px solid var(--rule); border-radius: 100px; font-size: 0.8125rem; font-weight: 550; color: var(--ink-2); text-decoration: none; background: var(--paper); } .doclink:hover { border-color: var(--accent); color: var(--accent); } .doclink svg { width: 0.95rem; height: 0.95rem; flex: none; opacity: 0.75; } .doclink__ext { font-variation-settings: "wdth" 78; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.08em; color: var(--ink-3); } /* --- Archive -------------------------------------------------------------- */ .archive-year + .archive-year { margin-top: clamp(2rem, 4vw, 3rem); } .archive-year__head { display: flex; align-items: baseline; gap: 1rem; padding-bottom: 0.6rem; border-bottom: 2px solid var(--swatch); margin-bottom: 1.1rem; } .archive-year__head h2 { font-size: var(--step-2); color: var(--year); } .archive-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; } /* Document names are long and unbreakable in places ("SARAA Funding Report 2223 Parkestone Foundation Inc"), so the row wraps rather than pushing the page sideways on a phone. */ .archive-list a { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem 1rem; padding: 0.85rem 1.1rem; background: var(--paper); color: var(--ink); text-decoration: none; font-size: 0.9375rem; } .archive-list a > span:not(.meta) { flex: 1 1 12rem; min-width: 0; overflow-wrap: anywhere; } .archive-list a:hover { background: var(--paper-2); color: var(--accent); } .archive-list svg { width: 1rem; height: 1rem; flex: none; color: var(--ink-3); } .archive-list .meta { margin-left: auto; display: flex; gap: 0.85rem; align-items: baseline; flex: none; } /* --- Cards (events, albums) ----------------------------------------------- */ .cards { display: grid; gap: clamp(1.25rem, 3vw, 2rem); } @media (min-width: 660px) { .cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1000px) { .cards--three { grid-template-columns: repeat(3, 1fr); } } .card { display: flex; flex-direction: column; border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--paper); transition: border-color 0.18s ease, transform 0.18s ease; } a.card { text-decoration: none; color: inherit; } a.card:hover { border-color: var(--swatch, var(--rule-strong)); transform: translateY(-2px); } .card__media { aspect-ratio: 16 / 9; background: var(--paper-3); overflow: hidden; border-bottom: 1px solid var(--rule); } .card__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } a.card:hover .card__media img { transform: scale(1.03); } /* Cards without a cover image get a spectrum band instead of a stock photo. */ .card__band { height: 5px; background: var(--swatch, var(--accent)); } .card__body { padding: clamp(1.1rem, 2.5vw, 1.6rem); display: flex; flex-direction: column; gap: 0.55rem; flex: 1; } .card__when { font-variation-settings: "wdth" 82; font-size: 0.75rem; font-weight: 650; letter-spacing: 0.11em; text-transform: uppercase; color: var(--year, var(--ink-3)); } .card h3 { font-size: var(--step-2); } .card p { color: var(--ink-2); font-size: 0.9375rem; } .card__foot { margin-top: auto; padding-top: 0.9rem; display: flex; align-items: center; gap: 0.45rem; font-size: 0.875rem; font-weight: 600; color: var(--accent); } .card__foot .arrow { transition: transform 0.18s ease; } a.card:hover .card__foot .arrow { transform: translateX(3px); } /* --- Photo river ---------------------------------------------------------- */ /* A horizontal scroller rather than a grid: it is a taste of the albums, not the albums themselves, and stopping it from swallowing the front page keeps the reports as the thing the page is actually about. */ /* overflow-y: hidden is not cosmetic. `overflow-x: auto` alone computes the other axis to auto as well, which makes this a two-axis scroll container — and a wheel scroll that starts over it then moves this box instead of the page, so the front page appears to jam here. */ .river { display: flex; gap: 0.75rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; padding-bottom: 1rem; scrollbar-width: thin; -webkit-overflow-scrolling: touch; } .river img { height: clamp(200px, 26vw, 320px); width: auto; max-width: none; border-radius: var(--radius); scroll-snap-align: start; flex: none; background: var(--paper-3); } /* --- Gallery -------------------------------------------------------------- */ .gallery { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr)); gap: 0.6rem; } .gallery button { padding: 0; border: 0; background: var(--paper-3); border-radius: var(--radius); overflow: hidden; cursor: zoom-in; aspect-ratio: 3 / 2; display: block; } .gallery img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.35s ease, opacity 0.2s ease; } .gallery button:hover img { transform: scale(1.04); opacity: 0.94; } /* --- Lightbox ------------------------------------------------------------- */ /* The display must be scoped to [open]: a bare `display: grid` overrides the user agent's `display: none` on a closed , which paints the whole viewer over the page before anyone has clicked a photo. */ .lightbox[open] { display: grid; } .lightbox { position: fixed; inset: 0; z-index: 90; background: rgb(8 5 12 / 0.94); grid-template-rows: 1fr auto; padding: clamp(0.75rem, 2vw, 2rem); border: 0; max-width: none; max-height: none; width: 100%; height: 100%; } .lightbox::backdrop { background: rgb(8 5 12 / 0.94); } .lightbox__stage { display: grid; place-items: center; min-height: 0; overflow: hidden; } /* The image fills the stage and is letterboxed by object-fit rather than being sized by max-height: a percentage max-height against a centred auto-height grid item is circular, and resolves to no limit — which is how a tall photo ends up painted straight over the controls. */ .lightbox img { width: 100%; height: 100%; object-fit: contain; border-radius: var(--radius); } .lightbox__bar { display: flex; align-items: center; justify-content: center; gap: 1rem; padding-top: 1rem; color: #cfc6d8; } .lightbox__count { font-variation-settings: "wdth" 82; font-size: 0.8125rem; letter-spacing: 0.08em; min-width: 6rem; text-align: center; } .lightbox button { display: grid; place-items: center; width: 2.75rem; height: 2.75rem; border: 1px solid rgb(255 255 255 / 0.22); border-radius: 100px; background: transparent; color: #fff; cursor: pointer; transition: background-color 0.16s ease; } .lightbox button:hover { background: rgb(255 255 255 / 0.12); } .lightbox button:disabled { opacity: 0.3; cursor: default; } .lightbox__close { position: absolute; top: clamp(0.75rem, 2vw, 2rem); right: clamp(0.75rem, 2vw, 2rem); } .lightbox svg { width: 1.15rem; height: 1.15rem; } /* --- Guide ---------------------------------------------------------------- */ /* Sits directly under the masthead and scrolls headings past itself, so it has to be opaque — a translucent bar lets the heading it is covering show through as a smear. */ .guide-nav { position: sticky; top: 4.5rem; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--rule); margin-bottom: clamp(2rem, 5vw, 3.5rem); } .guide-nav ol { display: flex; gap: clamp(0.75rem, 3vw, 2rem); list-style: none; margin: 0; padding: 0.85rem 0; overflow-x: auto; overflow-y: hidden; /* see .river — keeps the wheel on the page */ scrollbar-width: none; } .guide-nav ol::-webkit-scrollbar { display: none; } .guide-nav a { white-space: nowrap; font-variation-settings: "wdth" 86; font-size: 0.8125rem; font-weight: 650; letter-spacing: 0.07em; text-transform: uppercase; color: var(--ink-3); text-decoration: none; } .guide-nav a:hover, .guide-nav a[aria-current="true"] { color: var(--accent); } .guide-section { scroll-margin-top: 9rem; padding-block: clamp(2rem, 4vw, 3rem); border-top: 1px solid var(--rule); } .guide-section:first-of-type { border-top: 0; } .guide-section > h2 { font-size: var(--step-3); margin: 0.6rem 0 1.25rem; } .checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.85rem; max-width: var(--measure); } .checklist li { display: grid; grid-template-columns: 1.35rem 1fr; gap: 0.75rem; color: var(--ink-2); } .checklist li::before { content: ""; width: 1.05rem; height: 1.05rem; margin-top: 0.35em; border-radius: 3px; border: 1.5px solid var(--accent); background: var(--accent-soft); } .crosslist li::before { border-color: var(--rule-strong); background: transparent; border-radius: 100px; } .fieldlist { display: grid; gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; margin: 0; } .fieldlist > div { background: var(--paper); padding: 1.1rem clamp(1rem, 2vw, 1.5rem); display: grid; gap: 0.35rem; } @media (min-width: 780px) { .fieldlist > div { grid-template-columns: 15rem 1fr; gap: 1.5rem; align-items: baseline; } } .fieldlist dt { font-weight: 650; font-size: 0.9375rem; } .fieldlist dd { margin: 0; color: var(--ink-2); font-size: 0.9375rem; } .guide-groups { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); } @media (min-width: 760px) { .guide-groups { grid-template-columns: repeat(2, 1fr); } } .guide-group h3 { font-size: var(--step-2); margin-bottom: 0.85rem; } .guide-group ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.6rem; } .guide-group li { padding-left: 1.1rem; position: relative; color: var(--ink-2); font-size: 0.9375rem; } .guide-group li::before { content: ""; position: absolute; left: 0; top: 0.68em; width: 5px; height: 5px; border-radius: 100px; background: var(--rule-strong); } /* --- Origin --------------------------------------------------------------- The history and its pull quote. Two columns where there is room, and the quote is a normal block in the flow below the prose where there is not. */ .origin { display: grid; gap: clamp(2rem, 4vw, 3rem); align-items: start; } @media (min-width: 900px) { .origin { grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); } } .pullquote { border-top: 3px solid var(--accent); padding-top: 1.1rem; } .pullquote blockquote p { font-family: var(--font-display); font-variation-settings: var(--vf-display); font-size: var(--step-2); line-height: 1.25; color: var(--ink); text-wrap: balance; } /* The quotation marks are decoration, not content — a screen reader announcing them would be reading punctuation the source document does not have. */ .pullquote blockquote p::before { content: "\201C"; } .pullquote blockquote p::after { content: "\201D"; } .pullquote figcaption { margin-top: 0.9rem; color: var(--ink-3); font-size: 0.8125rem; font-variation-settings: "wdth" 88; letter-spacing: 0.04em; text-transform: uppercase; } /* --- Callout -------------------------------------------------------------- */ .callout { border: 1px solid var(--rule); border-left: 3px solid var(--accent); border-radius: var(--radius); background: var(--paper-2); padding: clamp(1.25rem, 3vw, 1.75rem); max-width: var(--measure); } .callout h3 { font-size: var(--step-2); margin-bottom: 0.5rem; } .callout p { color: var(--ink-2); font-size: 0.9375rem; } .callout p + p, .callout .btn { margin-top: 0.9rem; } /* --- Contact -------------------------------------------------------------- */ .contact-details { display: grid; gap: 1.5rem; margin-top: 2rem; } .contact-item { display: grid; grid-template-columns: 2.25rem 1fr; gap: 1rem; align-items: start; } .contact-item svg { width: 1.25rem; height: 1.25rem; margin-top: 0.5rem; color: var(--accent); } .contact-item > div { min-width: 0; } .contact-item a { font-size: var(--step-1); font-weight: 550; overflow-wrap: anywhere; } .contact-item address { font-style: normal; color: var(--ink-2); } .map-frame { border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; background: var(--paper-2); } .map-frame iframe { display: block; width: 100%; height: clamp(260px, 40vw, 400px); border: 0; } .map-frame__foot { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.75rem 1rem; border-top: 1px solid var(--rule); font-size: 0.8125rem; color: var(--ink-3); } /* --- Donate --------------------------------------------------------------- */ .donate-panel { border: 1px solid var(--rule); border-radius: var(--radius); background: var(--paper-2); padding: clamp(1.75rem, 4vw, 2.75rem); max-width: 34rem; display: grid; gap: 1rem; justify-items: start; } /* --- Footer --------------------------------------------------------------- */ .footer { border-top: 1px solid var(--rule); margin-top: var(--section); padding-block: clamp(3rem, 6vw, 4.5rem) 2rem; background: var(--paper-2); } .footer__grid { display: grid; gap: clamp(2rem, 5vw, 3rem); } @media (min-width: 760px) { .footer__grid { grid-template-columns: 1.3fr repeat(3, 1fr); } } .footer__about p { margin-top: 1rem; color: var(--ink-2); font-size: 0.9375rem; max-width: 32ch; } .footer h2 { font-family: var(--font-body); font-variation-settings: "wdth" 84; font-weight: 650; font-size: 0.75rem; letter-spacing: 0.13em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 1rem; } .footer ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.55rem; } .footer ul a { color: var(--ink-2); font-size: 0.9375rem; text-decoration: none; } .footer ul a:hover { color: var(--accent); text-decoration: underline; } .footer__base { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; justify-content: space-between; margin-top: clamp(2.5rem, 5vw, 3.5rem); padding-top: 1.5rem; border-top: 1px solid var(--rule); font-size: 0.8125rem; color: var(--ink-3); } /* The spectrum closes the page the way it opens the logo. */ .footer__spectrum { display: flex; height: 3px; border-radius: 2px; overflow: hidden; margin-bottom: 2rem; } .footer__spectrum i { flex: 1; } /* --- 404 ------------------------------------------------------------------ */ .notfound { padding-block: clamp(4rem, 12vw, 9rem); text-align: center; } .notfound h1 { font-size: var(--step-4); margin-bottom: 1rem; } .notfound p { color: var(--ink-2); max-width: 46ch; margin: 0 auto 2rem; } /* --- Forms ---------------------------------------------------------------- */ /* The grant application on /apply/ is the only form on the site, and these controls are shared with the admin (which loads this stylesheet first and adds its own chrome on top). Neutral on purpose: the spectrum is reserved for dates, and a form is not a chronology. */ .wrap--form { max-width: 52rem; margin: 0 auto; padding: 0 1.5rem; } .field { margin-bottom: 1.6rem; } /* A radio group's question is a span, not a label — it names the group through aria-labelledby, because a