*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } .visually-hidden { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } :root { --green: #1B3F2A; --green-deep: #132d1e; --green-deeper: #0f2417; --gold: #B8962E; --gold-soft: #C9A94A; --gold-dim: rgba(184, 150, 46, 0.5); --gold-line: rgba(184, 150, 46, 0.32); --cream: #F2EDE0; --cream-80: rgba(242, 237, 224, 0.80); --cream-65: rgba(242, 237, 224, 0.65); --cream-45: rgba(242, 237, 224, 0.45); --cream-30: rgba(242, 237, 224, 0.30); --hair: rgba(242, 237, 224, 0.14); /* The mockups' own names for the same palette, promoted here from the page sheets that each carried a copy. Six sheets declared `--gold`, `--cream`, `--gold-soft` and `--gold-line`; four declared the `--g0`..`--g3` greens and the `--c28`..`--c80` creams. Every copy agreed on the value — only the formatting differed (`.32` against `0.32`, minified against spaced) — so this is a move rather than a decision, and the figure workbenches' nine `:root` blocks collapsing into scripts/figures/figures.css is the same move made once already. Where a mockup name and an estate name are the same colour, the mockup name is written as an alias: the relationship is then declared rather than merely true, and editing `--green` moves both. Three of them are NOT the same and are written out — the mockups' `--c62` and `--c28` are .62 and .28 against the estate's `--cream-65` and `--cream-30`, and `--g0` has no estate equivalent at all. Aliasing those would be a colour change wearing a tidy-up's clothes. */ --g0: #0A1810; --g1: var(--green); --g2: var(--green-deep); --g3: var(--green-deeper); --c80: var(--cream-80); --c62: rgba(242, 237, 224, .62); --c45: var(--cream-45); --c28: rgba(242, 237, 224, .28); --gold-faint: rgba(184, 150, 46, .15); --body: "EB Garamond", Georgia, serif; --word: "Cormorant Garamond", Georgia, serif; /* ===== THE TYPE SCALE ===== Every rung is a base size multiplied by `--fs-scale`, so the whole ladder moves by editing one number and any single rung still moves on its own. The estate had no type token at all before this: 694 px literals across ten sheets, of which 447 sat in the 11-18px band alone. `--fs-scale: 1.2` is not a guess. reader.css had already been bumped by exactly 1.2 — 106 fractional px values in an unmistakable family (11 to 13.2, 14 to 16.8, 17 to 20.4, 24 to 28.8) — and no other sheet followed it. So the reader has been the right size for some time and the other nine sheets have been a fifth too small, which is what reading the site at 125% browser zoom was really showing. Browser zoom is NOT the same lever, and reaching for CSS `zoom` to reproduce it would not work: page zoom shrinks the CSS viewport, so every media query re-evaluates and the breakpoints move with the type. CSS `zoom` leaves the viewport alone, so the layout would keep its widescreen breakpoints while the content inside it grew. The four `-alt` rungs are the mockups' half-steps. They are kept so this pass changes size and nothing else; whether a 12.5px kicker and a 12px minor heading are two sizes or one is a design decision for the College, and collapsing them here would be answering it by accident. Two things this ladder deliberately does not cover. Display type stays in its own `clamp()`s — those are already fluid and were not what read small. And the nav bar is untouched, on purpose: it is the one component that looked right at 125%, so every size under `.alv-nav` stays a literal px and must not be "finished off" by a later pass. */ --fs-scale: 1.2; --fs-micro: calc(11px * var(--fs-scale)); --fs-label: calc(12px * var(--fs-scale)); --fs-label-alt: calc(12.5px * var(--fs-scale)); --fs-meta: calc(13px * var(--fs-scale)); --fs-meta-alt: calc(13.5px * var(--fs-scale)); --fs-note: calc(14px * var(--fs-scale)); --fs-note-alt: calc(14.5px * var(--fs-scale)); --fs-ui: calc(15px * var(--fs-scale)); --fs-body-sm: calc(16px * var(--fs-scale)); --fs-body-alt: calc(16.5px * var(--fs-scale)); --fs-body: calc(17px * var(--fs-scale)); --fs-body-lg: calc(18px * var(--fs-scale)); --fs-prose: calc(19px * var(--fs-scale)); /* The editorial pull quote. Fluid like the headings rather than fixed like the prose, because it is display type -- and multiplied by `--fs-scale` like everything else, which eight of its nine declarations were not. */ --fs-quote: calc(clamp(15px, 1.8vw, 16px) * var(--fs-scale)); /* The closing panel's heading. It was three sizes across four codas -- 70px on the Fellows and the Residencies, 58px on the College, 38px on the front page, which is the ordinary section heading and far too quiet to close a page with. Settled on the largest, which is the one the design drew. */ --fs-coda: calc(clamp(38px, 4.6vw, 58px) * var(--fs-scale)); /* ===== THE EYEBROW ===== The rungs above are sizes. These three are a ROLE, and the difference is the whole point of them. The estate writes one thing — small, uppercase, letter-spaced, almost always Cormorant — 154 times, under 134 different class names, at 27 different sizes. `.kick` on the front page and `.rl-h` on the Fellows page are the same label 1.5px apart; `.kick` itself is declared in four sheets at two sizes. Nobody chose any of that: it is what happens when each mockup arrives as a whole standalone document and is folded in beside the last one. Bucketing by size, which is what the rungs above do, cannot fix it — `.kick` at 12 and `.rl-h` at 11 come out as two tokens because they were two numbers. So these are assigned by what the label IS: -sm badges, table headings, the smallest furniture - kickers, eyebrows, card labels — the bulk of them -lg section labels, buttons, calls to action Three and not one because the spread is not all drift: a 9px badge and a 15px section label are doing genuinely different work, and collapsing them together would be answering a design question by accident. Three and not twenty-seven because the rest of it IS drift. `.alv-nav` is outside this, as it is outside the scale. So is reader.css, which was already bumped by 1.2 and holds a mix of scaled and unscaled values that have to be told apart by eye rather than by a rule. */ --fs-eyebrow-sm: calc(10px * var(--fs-scale)); --fs-eyebrow: calc(12px * var(--fs-scale)); --fs-eyebrow-lg: calc(13.5px * var(--fs-scale)); /* ===== THE SECTION HEADING ===== One h2 for the estate. The three pages had three: the front page a bare

at clamp(18,2.35vw,32), the Fellows `.pg-t` at clamp(31,3.5vw,46), the College `.gih` at clamp(23,2.5vw,34) -- 46px, 34px and 32px side by side at a desktop measure, none of them chosen against the others. The front page's shape won because it is the plainest, and it goes through --fs-scale like everything else: its clamp was a raw literal and so had sat out the 1.2 bump, leaving the heading a fifth behind the body it stands over. Scaled, the heading-to-body ratio is 1.88 again, which is what it was before any of this. */ --fs-h2: calc(clamp(18px, 0.72vw + 22.2px, 32px) * var(--fs-scale)); /* ===== THE HERO HEADING ===== One h1 for the estate. `.alv-ed .hero h1` had it as a literal clamp, and the Library wrote two more of its own — clamp(52,8vw,104) on the index and clamp(40,6vw,76) on a hub — so three pages of one site opened at three sizes, none chosen against the others. The editorial value wins because it is the one the rest of the estate is already set to. It does NOT go through `--fs-scale`, and that is deliberate rather than an oversight: display type was excluded from the 1.2 bump because it was already fluid and was never what read small. Scaling it here would put the Library's hero a fifth above every other hero on the site, which is the drift this token exists to end. */ --fs-display: clamp(34px, 4vw, 58px); /* ===== LEADING ===== Line-height in this estate is unitless, which means it is a multiple of the font-size and not a measurement of its own. So raising the type by 1.2 raised every gap between two lines by 1.2 as well — the prose did not merely get bigger, it got further apart, which is what reads as loose. `--lh-scale` pulls it back. It is a second lever rather than a set of new numbers for the same reason `--fs-scale` is: the sheets disagree about prose leading on purpose (1.62 in a hero, 1.8 in the College's body copy, 1.95 in a pull quote) and flattening all of them to one value would trade a spacing problem for a duller page. Each rule keeps its own ratio and the whole set moves together. .88 is not the reciprocal of 1.2. Undoing the growth exactly would put the leading back where it was at the old size, and the old size is not what these ratios were set for — larger type wants proportionally less leading, not the same. This is the smaller correction that lands between the two. */ --lh-scale: .88; /* ===== THE GAP UNDER A HEAD ===== A kicker, a heading, a gold rule -- and then the prose. `.head.tight` hands that last gap to the prose beneath it, and until now three different things were holding it: a clamp on `.alv-home .body`, a flat 14px on a Fellow's card, and on the four figure blocks of the Fellows a `
`, which is not a measurement at all -- an empty line box, so the gap was whatever the wrapper's line-height happened to be and no stylesheet mentioned it. A token rather than a literal in the one rule below, because the front page's Bands panel wants the same gap under a head that is NOT followed by a `.body` -- so there are two places that have to agree, and this is how they agree rather than by being typed out twice. */ --head-gap: clamp(22px, 2.6vw, 22px); /* ===== THE GROUND CONTRACT ===== A section knows whether it is dark or light. Everything standing on it — heading, prose, kicker, caption — takes its ink from that, and there is no other question to ask. The estate had six vocabularies for this one idea (`.sec.green`, `.sec.green`, `.rsec.dark`, and `.kdark`, which turns out not to be a ground at all — see below), and 46 declarations spread across five sheets restating what each element should be on each of them. Two thirds of those rules did nothing but set a colour. So the ground declares the ink once, and the components read it. What this buys: a seventh vocabulary arriving with the next mockup costs one line in the selector list below, not ten new rules; and a light ground's kicker gold can only be written in one place, so it cannot drift to `#8a6a1a` in one sheet and `#8a6d1e` in six others, which is what had already happened. `.kdark` is deliberately absent. It reads like a ground and is not one — it is a modifier on `.pg-head` meaning "this head's kicker takes the dark variant", and it is used on LIGHT panels. Treating it as a dark ground puts a dark brown kicker on every dark section. The values are written out rather than as `var(--cream)` / `var(--c80)`, which would read better and be wrong: `--cream` is #F2EDE0 at the root and #ece4d1 -- the ivory paper -- inside `.alv-home`, and `--c80` is .80 at the root against .82 there. A contract built on a token whose meaning changes by scope hands back a different colour depending on which page reads it, which is the drift it exists to end. It has to be literal to be a contract. */ --ground-ink: #F2EDE0; --ground-ink-soft: rgba(242, 237, 224, .80); --ground-kick: #C9A94A; --ground-mute: rgba(242, 237, 224, .55); --ground-hair: rgba(242, 237, 224, .14); } /* ===== THE SECTION'S SURFACE ===== A section's look is composed, not baked. `.sec.green` used to mean five different things depending on which sheet you were reading -- one had grain and no gradient, another a gradient and no grain, two carried a noise plate and two did not, and the greens themselves were #1B3F2A on three pages and #0f2417 on two. Two class names, ten recipes. So each part of the surface is named and set separately, and the base assembles them. `background-image` is a single property and cannot be written by four rules at once, so each modifier sets a VARIABLE and this rule composes the layers in a fixed order: noise over grain over light. The grain takes its ink from the ground rather than naming a colour, so `.grain` works on either without knowing which it is standing on -- the same arrangement as `--ground-ink` above.
reads as: paper ground, dot texture, closed-up top edge, light at the foot. */ .alv-ed .sec, .alv-home .sec, .alv-lib .sec { /* The rhythm was in alvara-editorial.css, which the Library does not load. Same value, said where all three scopes can hear it. */ position: relative; padding: clamp(58px, 7vw, 104px) 0; background-color: var(--sec-ground, transparent); background-image: var(--sec-noise, none), var(--sec-grain, none), var(--sec-light, none); background-size: var(--sec-noise-size, auto), var(--sec-grain-size, auto), 100% 100%; background-repeat: repeat, repeat, no-repeat; background-blend-mode: var(--sec-blend, normal); } .alv-ed .sec.grain, .alv-home .sec.grain, .alv-lib .sec.grain { --sec-grain: radial-gradient(var(--sec-grain-ink) 1px, transparent 1px); --sec-grain-size: 3px 3px; } .alv-ed .sec.noise, .alv-home .sec.noise, .alv-lib .sec.noise { --sec-noise: url("data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%27200%27%20height%3D%27200%27%3E%3Cfilter%20id%3D%27n%27%3E%3CfeTurbulence%20type%3D%27fractalNoise%27%20baseFrequency%3D%270.9%27%20numOctaves%3D%272%27%20stitchTiles%3D%27stitch%27/%3E%3CfeColorMatrix%20type%3D%27saturate%27%20values%3D%270%27/%3E%3C/filter%3E%3Crect%20width%3D%27100%25%27%20height%3D%27100%25%27%20filter%3D%27url%28%23n%29%27%20opacity%3D%270.5%27/%3E%3C/svg%3E"); --sec-noise-size: 200px 200px; --sec-blend: soft-light, normal, normal; } .alv-ed .sec.lit-head, .alv-home .sec.lit-head, .alv-lib .sec.lit-head { --sec-light: radial-gradient(120% 120% at 50% 0%, #1a3a26, #0f2417 70%) } .alv-ed .sec.lit-foot, .alv-home .sec.lit-foot, .alv-lib .sec.lit-foot { --sec-light: radial-gradient(120% 120% at 50% 100%, #17331f, #0f2417 70%) } /* Rhythm. Named for the shape of the space, never for the page that wanted it: a second section wanting a closer band reuses `.tight` rather than inventing a name of its own, which is how `.plate-sec`, `.pathsec` and `.recunder` came to exist. */ .alv-ed .sec.tight, .alv-home .sec.tight, .alv-lib .sec.tight { padding: clamp(30px, 4vw, 58px) 0 } .alv-ed .sec.tight-top, .alv-home .sec.tight-top, .alv-lib .sec.tight-top { padding-top: clamp(14px, 1.8vw, 26px) } .alv-ed .sec.deep-foot, .alv-home .sec.deep-foot, .alv-lib .sec.deep-foot { padding-bottom: clamp(40px, 5vw, 72px) } /* Every dark ground, whatever the page calls it. */ .alv-home .sec.green, .alv-ed .sec.green, .alv-ed .rsec.dark, .alv-lib .sec.green { --ground-ink: #F2EDE0; --ground-ink-soft: rgba(242, 237, 224, .80); --ground-kick: #C9A94A; --ground-mute: rgba(242, 237, 224, .55); --ground-hair: rgba(242, 237, 224, .14); --sec-ground: #1B3F2A; --sec-grain-ink: rgba(242, 237, 224, .05); } /* Every light ground. The heading ink is #20301a and the prose #39402d; both were settled against the alternatives actually in use (#25321d for either), and the softer prose is what keeps a long measure from reading as heavy as its own heading. */ .alv-home .sec.cream, .alv-ed .sec.cream, .alv-ed .rsec.cream, .alv-lib .sec.cream, /* The Library's word for a cream section is `.paper`, and it is not a `.sec` -- the intro and the three Branch catalogues each set their own rhythm. It is the same ground, so it takes the same contract; what it does not take is `.sec`'s padding, which is why it is listed here rather than renamed. */ .alv-lib .paper, /* The document pages -- the policies and the Registrar's Office. A long text on the dark green was the wrong ground for it: these are read at length rather than glanced at, so they take the light one, and take it by joining this list rather than by naming the same seven colours again a hundred lines further down. Scoped on the
that HOLDS `.page-content` rather than on a body class, because three page templates render it -- generic, contact and about -- and they all want the same treatment. The Library's prose is `.alv-lib .lib-body`, which this never reaches. On
rather than on `.page-content` because the sticky footer is pushed down by `margin-top: auto`, so the space above it belongs to the BODY unless something grows into it. `.page-content` is only ever as tall as its own content, which left a short document sitting on a band of paper with dark green beneath it down to the footer. */ main:has(> .page-content) { --ground-ink: #20301a; --ground-ink-soft: #39402d; --ground-kick: #8a6d1e; --ground-mute: #6f6a52; --ground-hair: rgba(60, 52, 24, .28); --sec-ground: #ece4d1; --sec-grain-ink: rgba(60, 52, 24, .032); } /* ===== THE BODY OF A TEXT BLOCK ===== One size for the prose under a head, wherever it stands. `.alv-ed .body p` was declared in THREE page sheets at two different sizes, so which one a paragraph got depended on which page it was on: 21.6px on the Fellows and the Residencies, 19.2px on Membership. Beside those, `.lbody` set its own clamp (19.9px), `.magbody` another (19.8px), the front page a third (20.7px), and a Fellow's bio a fourth (19.2px). Six values for one thing. Settled at `--fs-body`, which is a rung of the scale rather than a sixth literal, and sits in the middle of what was there -- nothing moves by more than 1.2px. Editing this one line moves every text block on the estate. Unscoped, so `.alv-ed` and `.alv-home` both take it. Everything that competed with it has been removed rather than out-weighted: the page sheets load after this one, so an override would have won on source order and the whole exercise would have quietly done nothing. */ /* The Library joins this rule rather than restating it. It had three leadings of its own — 1.75 in the hub sections, 1.75 in the index lede and 1.9 in an article — against the 1.45 every other text block on the estate is set to, and the article hard-coded `'EB Garamond', Georgia, serif` where the rest reads `--body`. Being IN the rule is what stops that happening again. */ .body p, .magbody>p, .lbody, .founder2 .bd, .alv-lib .lede p, .alv-lib .hub-sections p, .page-library-article .lib-body p { font-size: var(--fs-body); line-height: calc(1.45 * var(--lh-scale)); font-family: var(--body); color: var(--ground-ink-soft); margin: 0 0 1.05em; } .body p:last-child, .magbody>p:last-child, .lbody:last-child { margin-bottom: 0 } /* A prose block set to the measure of whatever holds it, instead of to a reading measure of its own. For a standfirst run across the head of a section over a component that takes the full width -- a grid of cards, a figure, a ladder -- where a 74ch column above a full-width block reads as two things set separately rather than as one section. College's `.introwide` is the same rule; this is it named for what it does and put where every page can reach it. THE THREE SELECTORS ARE ONE DECISION, AND SOURCE ORDER IS WHY. The cap it lifts is `.alv-ed .body`, two classes, and it lives in alvara-editorial.css -- which base.html loads AFTER this file. So an equal-specificity rule here loses whatever it is called, and a bare `.p-wide` alone would appear to do nothing on exactly the pages that have a measure worth lifting. Written beside `.body` under the scope it is three classes to that rule's two and wins on specificity rather than on order. The bare selector is for anywhere outside `.alv-ed`; the third takes the class on a section wrapping the prose, which is the shape College wrote. */ .p-wide, .alv-ed .body.p-wide, .alv-ed .p-wide .body { max-width: none } /* ===== THE OPENING CAPITAL ===== One drop cap for the estate, so the fifth page to want one reaches for this rather than writing a fifth private copy -- home.css, college.css and library.css each carry their own, at 2.5em, 3.1em and their own paddings. Those are left where they are: they are tuned to ledes already set, and this class is what anything new takes. `--word` and `--gold` rather than the literals they spell out: both are declared in this file's `:root` and nothing under base.html redeclares either at a different value. `.lede-main` is `flow-root` because the capital is a float three lines deep and a one-line lede cannot contain it -- the letter hangs out of its own paragraph and indents the NEXT one, a stair down the left margin that reads as mis-set leading rather than as an uncontained float. `clear` on the paragraph beneath would fix it too, and would clear a figure floated beside it as well. It was `.p7-dropcap` in residency.css that found this, on the Residencies' §VII; that class is gone and this one carries the fix for it. This sheet loads before every page sheet and the selector carries one class, so a page already dressing its own `.lede::first-letter` wins on both counts. Apply `lede-main` INSTEAD of that page's class, not beside it. */ .lede-main { display: flow-root; } .lede-main::first-letter { font-family: var(--word); float: left; font-size: 2em; line-height: .37; padding: 10px 2px 0 0; color: var(--gold); font-weight: 600 } .lede-sml::first-letter { font-size: 1.8em; padding-top: 8px; } /* ===== CLOSER GRAMMAR ===== The parts every closing panel shares, kept apart from any one panel's arrangement -- which is the split Alicia's design files already make (`.cl-*` for the grammar, `#closer` for the layout). Holding them here is what let the Colophon be deleted without taking the Ledger's labels with it, once they had been moved out of it. */ .cl-acts { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(16px, 2vw, 26px); } /* the College's imprint, and the line beneath the inscription */ .cl-mark { font-family: var(--word); font-weight: 600; font-size: var(--fs-eyebrow-sm); letter-spacing: .22em; text-transform: uppercase; color: var(--ground-mute); margin: 0; } /* a detail row: what a Membership is called, and what it opens */ /* Also used as a link -- each level goes to its own place on Membership -- so it carries the underline and hover a bare label would not need. */ .d-label { display: block; text-decoration: none; transition: color .25s; font-family: var(--word); font-weight: 600; font-size: var(--fs-eyebrow-sm); letter-spacing: .22em; text-transform: uppercase; color: var(--ground-kick); } a.d-label:hover, a.d-label:focus-visible { color: var(--ground-ink) } .led-detail-head a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; transition: color .25s, border-color .25s; } .led-detail-head a:hover, .led-detail-head a:focus-visible { color: var(--ground-kick); border-bottom-color: var(--gold-line); } .d-text { font-family: var(--body); font-size: var(--fs-note); line-height: calc(1.6 * var(--lh-scale)); color: var(--ground-ink-soft); margin: 5px 0 0; } /* ===== THE BUTTON ===== Four sheets declare `.btn` and no two agree: the padding is 15/32 in the editorial sheet, 15/34 on its own `.fill`, 14/30 on Membership and 15/34 on the front page; three of the four round the corner by 2px and one does not; the ink inside a filled button is #12251a, #0f2417 and `--g3` depending on which page you are reading. Nobody chose any of that. This is the recipe the estate actually renders on its closing panels, said once and unscoped so a shared component works in a scope that has no button of its own -- which is what the Library was, its closer taking `.alv-lib .btn` and coming out 2px narrower than every other page's. The four scoped copies still out-weigh it wherever they are declared, so promoting this moves nothing that was already right; it fills the gap and gives the next sheet somewhere to stop writing a fifth copy. `a.btn, button.btn` rather than `.btn`, and the element is what makes the rule work at all: every scope opens with `.alv-ed * { margin:0; padding:0 }` or its own copy, which is one class and matches everything -- a tie with a single-class component, broken by source order, and the page sheets load second. So a bare `.btn` here got its padding zeroed and the button came out as bare gold text on the line. The same reset had already been silently eating `.cl-link`'s padding on every editorial page. */ a.btn, button.btn { display: inline-flex; align-items: center; gap: 11px; font-family: var(--word); font-weight: 600; font-size: var(--fs-eyebrow); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; padding: 15px 34px; border: 1px solid var(--gold); border-radius: 2px; color: var(--cream); cursor: pointer; transition: background .3s, color .3s, border-color .3s; } .btn.fill { background: var(--gold); border-color: var(--gold); color: var(--g3); } .btn:hover, .btn:focus-visible { background: var(--gold); color: var(--g3); } .btn.fill:hover, .btn.fill:focus-visible { background: var(--gold-soft); border-color: var(--gold-soft); } .btn .ar { transition: transform .3s } .btn:hover .ar { transform: translateX(4px) } /* ===== THE LINK-ACTION ===== The button's quieter twin: a line of gold small-caps over a hairline, with an arrow that steps on hover. It closes a text column where `.btn` would be too loud -- four on the front page, one on the College's Fellows block. It was `.alv-home .cta`, written when the front page was the only page that had one. The College's Fellows block then took the same markup and rendered as a bare underlined anchor, because the rules naming it were in home.css and the College does not load home.css. Nor could the editorial sheet have held it: the front page loads neither, so main.css is the only sheet both ends read. TWO CLASSES, and the scope list is what supplies the second. `.cta` alone loses three ways over, all of them documented above and below -- to the scopes' own `* { margin:0; padding:0 }` on a tie broken by load order (see THE BUTTON), to their bare `a { color: inherit }` the same way (see `.cl-link`), and outright to `.page-the-college main a`, which paints every anchor in that page's main gold and carries an element more. `a.cta` fixes only the first. So the rule names its grounds, exactly as the ground contract itself does; a scope that grows a `.cta` adds a line here. GROUND. Home said the colour three times -- `--gold-soft` bare, `#8a6d1e` under `.sec.cream` and `.plateband`, `--ground-kick` again under `.plateband.green`. Those are `--ground-kick`'s own two values and all four of the front page's live on a declared ground, so the three collapse into one token and nothing moves. It is also what let the College's version be written without naming its ground at all. */ .alv-home .cta, .alv-ed .cta { display: inline-flex; align-items: center; gap: 11px; font-family: var(--word); font-weight: 600; font-size: var(--fs-eyebrow-lg); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--ground-kick); margin-top: clamp(26px, 3vw, 40px); border-bottom: 1px solid var(--gold-line); padding-bottom: 6px; transition: color .25s, border-color .25s; } .alv-home .cta:hover, .alv-ed .cta:hover, .alv-home .cta:focus-visible, .alv-ed .cta:focus-visible { color: var(--gold); border-color: var(--gold); } .alv-home .cta .ar, .alv-ed .cta .ar { transition: transform .25s; } .alv-home .cta:hover .ar, .alv-ed .cta:hover .ar, .alv-home .cta:focus-visible .ar, .alv-ed .cta:focus-visible .ar { transform: translateX(4px); } /* ===== THE LEDGER ===== The page's closing panel, built to docs/college/Closer_02_The_Ledger_v2_1.html. A titled head with the College's imprint opposite; the invitation and its calls to action against a ruled list of what each Membership opens; and the governing principle inscribed across the foot. It is a `.sec` and it names no colour -- ground, ink, kicker and hairlines all come from the contract, so telling it `cream` instead of `green` flips the panel whole. The design's own `--rule` and `--rule-gold` are the estate's `--ground-hair` and `--gold-line`; its ground was `linear-gradient(180deg,#122c1d,#0f2417)`, which `green` plus `lit-foot` already says. The head carries no eyebrow by design, so `.head` holds a heading alone -- `.kick:empty` means one can be added later without a rule changing. It is `noline` because the head row draws its own. */ .ledger { position: relative; overflow: hidden; } .ledger>.seal-bg { position: absolute; right: -16%; top: 58%; transform: translateY(-50%); width: min(52vw, 460px); opacity: .065; filter: grayscale(1) brightness(1.6); z-index: 0; pointer-events: none; user-select: none; } .ledger .wrap { position: relative; z-index: 1; } .ledger .led-head { display: grid; grid-template-columns: 1fr auto; gap: clamp(20px, 3vw, 36px); align-items: end; padding-bottom: 26px; border-bottom: 1px solid var(--gold-line); } /* The quiet second action beside the filled button. It is NOT `.cta` above, though the setting is the same one: this rests on the prose ink and steps up to the ground's gold on hover, where a `.cta` is gold from the start and carries an arrow. One is a way on, the other a way aside. `.cta` reached the editorial scope in the same move that centralised it; the Library still has none, so the closer goes on carrying its own either way. Written `.cl-acts .cl-link` rather than `.cl-link`, and the second class is load-bearing: every scope declares a bare `a { color: inherit }`, which is one class and one element against this rule's one class, so a plain `.cl-link` LOST its own colour on every page of the estate. The College looked right only by accident -- `.page-the-college main a` paints links gold and out-weighed both -- so the same link was gold there, inherited cream on the Library and Membership, and never once the ink the component asks for. Two classes beat both. */ .cl-acts .cl-link { font-family: var(--word); font-weight: 600; font-size: var(--fs-eyebrow-lg); letter-spacing: .2em; text-transform: uppercase; text-decoration: none; color: var(--ground-ink-soft); padding-bottom: 5px; border-bottom: 1px solid var(--gold-line); transition: color .3s, border-color .3s; } .cl-acts .cl-link:hover, .cl-acts .cl-link:focus-visible { color: var(--ground-kick); border-bottom-color: var(--ground-kick); } .ledger .led-body { display: grid; grid-template-columns: 1.15fr .85fr; gap: clamp(38px, 6vw, 84px); padding-top: 34px; align-items: center; } /* `.one-column` is gone with it. It existed for a caller that passed no detail rows, the partial writes them now, and a variant nothing renders is a variant that quietly describes a bug -- which is exactly what it was doing on the Library and Membership. */ .ledger .cl-acts { margin-top: 34px; row-gap: 16px; } .ledger .led-detail-head { font-family: var(--word); font-weight: 600; font-size: var(--fs-eyebrow-sm); letter-spacing: .22em; text-transform: uppercase; color: var(--ground-mute); margin: 0 0 14px; padding-bottom: 14px; border-bottom: 1px solid var(--gold-line); } .ledger .led-detail>div { padding: 16px 0; border-top: 1px solid var(--ground-hair); } .ledger .led-detail>div:first-child { border-top: 0; padding-top: 0; } .ledger .led-detail .d-text { margin-top: 5px } /* the inscription: centred, upright, and the one line on the panel that is neither prose nor a quote -- so it is not `.pull`, which is italic. */ .ledger .led-foot { margin-top: clamp(48px, 6vw, 72px); padding-top: clamp(34px, 4vw, 46px); border-top: 1px solid var(--ground-hair); text-align: center; } .ledger .led-inscription { font-family: var(--word); font-weight: 500; font-size: var(--fs-prose); line-height: calc(1.65 * var(--lh-scale)); letter-spacing: .015em; color: var(--ground-ink); margin: 0 auto; max-width: 68ch; text-wrap: balance; } .ledger .led-foot .cl-mark { margin-top: 18px; letter-spacing: .3em; } /* THE LEDGER IS NOT SHOWN ON A NARROW SCREEN, AND THAT IS A RULING RATHER THAN A COLLAPSE. It is a wide panel by construction -- a head with the imprint opposite it, the invitation against the three Membership levels beside it, the governing principle inscribed across the foot -- and the three rules below stack all of that into one column, which turns a panel read at a glance into the longest thing on the page. Held to one column it is not the Ledger; it is its contents in a list. `display: none` rather than `visibility` or a height, so it leaves the accessibility tree and the tab order with the pixels: a panel a reader cannot see but can still tab three links out of is worse than either answer. Nothing on the estate links to `#begin` or `#close`, so no in-page navigation goes with it -- checked, and worth re-checking before an anchor is written to it. ONE RULE FOR EVERY PAGE, because `.ledger` is one partial. `_ledger.html` closes the Home, College, Fellows, Membership, Residencies and Library pages in all seven languages, and its rules have always lived here in main.css rather than in the page sheets, so the hide sits with them. The three collapse rules are kept rather than deleted. The estate's habit is that a sheet dressing a component nobody renders reads as though the component is one refresh away -- but this one still renders above 900px, and these are the setting it comes back to the moment the line below is taken out. 900px is the breakpoint the panel already collapsed at, so there is one number here and not two. */ @media(max-width: 900px) { .ledger { display: none } .ledger .led-head { grid-template-columns: 1fr; align-items: start; gap: 14px } .ledger .led-body { grid-template-columns: 1fr; gap: 38px } .ledger>.seal-bg { right: -28%; opacity: .06 } } /* ===== THE CODA — gone ===== `.coda` and the `.fc-*` family it dressed are not in any template: the Ledger replaced all six closers, so nothing on the estate rendered them. A sheet still dressing a component nobody writes reads as though the component is one refresh away, and this one also carried a `.coda .fc-cta .btn` padding override -- which would have quietly out-weighed the shared button above for a panel that no longer exists. */ /* ===== THE EDITORIAL QUOTE ===== The same pull quote was declared across five sheets in eight sizes -- from `clamp(16px,1.55vw,21px)` to `clamp(22px,2.4vw,30px)` -- five inks (#2c3a20, #3a3016, #ece5d2, `--cream`, `--gold-soft`), and two different typefaces: it was Cormorant italic in six rules and EB Garamond italic in three, so which face a quote wore depended on which page it was on. Worse, most of those sizes were raw clamps that never met `--fs-scale`, so the estate's one type control moved everything except the quotes. Ink from the ground, size from the scale, face settled on the display cut -- a pull quote is display type, and that is what the majority of the nine already said. */ .pull, .bc-pull, .cq p { font-family: var(--word); font-style: italic; font-size: var(--fs-quote); line-height: calc(1.55 * var(--lh-scale)); color: var(--ground-ink); } /* ===== THE HEAD ===== A kicker, a heading, and a gold rule beneath. The estate had TEN containers for it -- `pg-head`, `leadhead`, `bx-head`, `plate-tx`, `ch`, `fh`, `head`, and three sections that just dropped the three parts loose into `.wrap` -- and EIGHT names for the rule, across 73 instances: 52x1 flat, 60x1, 76x2, 78x2, 80x1, 82x2, and two double-fading centred ones at 64 and 70. The rule is a pseudo-element. Seventy-three empty
s and s leave the markup, the rule cannot be forgotten or spelled a ninth way, and -- the part that mattered -- its gradient follows the alignment instead of being chosen. A left-aligned head fades to the right, a centred one fades at both ends. Nobody was choosing that; it just had to be remembered. 80x2 is where the eight settle: 2px carries 41 of the 73 against 1px's 26, and 80 is the middle of the 76/78/82 cluster the heavy users sit in. Unscoped, for the same reason as the corner marks below: `.alv-ed` and `.alv-home` both need it and neither is a parent of the other. The ink is the ground's. `.kdark` used to darken the kicker by hand on light panels; `--ground-kick` has done that automatically since the ground contract went in. */ .head { margin-bottom: clamp(24px, 3vw, 42px); /* Asserted, not inherited. `text-align` comes down the tree, so a head inside a centred column was centred without asking -- which is what the front page's plate text did to all five of its heads. The alignment is the head's own business, and `.center` / `.right` are how it is changed. */ text-align: left; } .head.left { text-align: left } .head .kick { display: block; margin-bottom: 6px; color: var(--ground-kick); } /* An unwritten kicker takes no room. Several heads carry an empty one so the section can gain a label later without a template change. */ .head .kick:empty { display: none } /* The head carries its own type. A shared component cannot lean on each scope having a base heading rule: `.alv-ed` has one, `.alv-home` gained one today, and `.alv-lib` has none -- so the closing panel's title came out as the body face at the browser's bold default on the Library, and correctly everywhere else. */ .head h1, .head h2, .head h3 { font-family: var(--word); font-weight: 500; font-size: var(--fs-h2); /* The leading and the space above are part of the type, and were being supplied by `.alv-ed h2` / `.alv-ed .head h2` -- so on the Library, which has no base heading rule, the title inherited the wrapper's 1.408 and got a 54px line box for a 38px letter, sitting low in its own row while the imprint opposite lined up with nothing. Both are out-specified by the scopes that already declare them, so this only fills the gap. */ line-height: 1.08; margin: 6px 0 0; color: var(--ground-ink); } .head::after { content: ""; display: block; width: 80px; height: 2px; background: linear-gradient(90deg, var(--gold), transparent); margin: clamp(16px, 2vw, 18px) 0 0; } .head.center { text-align: center } .head.center::after { background: linear-gradient(90deg, transparent, var(--gold), transparent); margin-left: auto; margin-right: auto; } .head.right { text-align: right } .head.right::after { background: linear-gradient(90deg, transparent, var(--gold)); margin-left: auto; } /* Leading the column it sits inside rather than standing over a whole block. The prose beneath sets its own top margin, so the head adds none. Same word as `.sec.tight` and the same meaning: less room. */ .head.tight { margin-bottom: 0 } /* ...and this is the prose saying it back. The rule above has promised since it was written that the block beneath sets the gap, and nothing was keeping that promise in one place: `.alv-home .body` carried a clamp, a Fellow's card carried a flat 14px, and the four figure blocks on the Fellows carried a `
` -- an empty line box, so the gap was whatever the wrapper's line-height happened to be and no stylesheet mentioned it at all. Three answers for one relationship, one of them invisible to the sheets. Written as an adjacency, and on `.tight` rather than on `.head`, so it fires exactly where the promise was made. `.body` is used on its own all over the editorial pages -- inside a `.figblock`, under a plate, as the one paragraph of a card -- and those keep whatever their own layout gives them. `.bd` is the same block on a Fellow's card, where the prose is a single paragraph rather than a wrapper full of them. Retuning the estate's head-to-prose rhythm is `--head-gap`. */ .head.tight + .body, .head.tight + .bd { margin-top: var(--head-gap); } /* A head that carries its own divider instead -- see `.head.across`. */ .head.noline::after { display: none } /* ===== CORNER MARKS ===== The College's photographs are cornered like a mounted plate. The ornament was declared NINE times across five sheets and no two copies agreed: six sizes (16, 18, 20, 22, 24, 26px), two weights, both golds, and offsets running from 6px inside the image to 8px outside it. Same story as the palette, and the same fix -- one component, and the page says which of the two treatments it wants. Deliberately UNSCOPED. Every other component here is written under `.alv-ed` or `.alv-home`, and this one has to reach both plus the figure documents, so scoping would mean three copies of every selector. What makes that safe is that the treatment class is the entry point: `.marks-out .cn` cannot match anything that has not asked for it. Which matters more than it sounds -- the Library uses `.cn` for something else entirely, the chapter NUMBER beside each contents row, sized in `ch`. A bare `.cn` rule here would land on it and wreck that page. The markup writes ALL FOUR marks on every photograph and `.marks-out` hides the two it does not use. The treatments are mixed across the estate by editorial judgement, so switching one has to be a single word rather than a template edit in two languages -- otherwise the distribution ends up being whatever the first pass happened to write. */ .marks-out, .marks-in { position: relative; } .marks-out .cn, .marks-in .cn { position: absolute; width: 22px; height: 22px; border: 0 solid var(--gold-soft); z-index: 3; pointer-events: none; } /* A separate mount: two marks, hairline, standing 9px clear of the frame. Airier, and it reads as something the photograph is set into. */ .marks-out .cn { border-width: 1px } .marks-out .cn.tr, .marks-out .cn.bl { display: none } .marks-out .cn.tl { top: -9px; left: -9px; border-right-width: 0; border-bottom-width: 0 } .marks-out .cn.br { bottom: -9px; right: -9px; border-left-width: 0; border-top-width: 0 } /* A viewfinder: all four, heavier, drawn 8px over the image itself. The strongest containment of the two, and the reason the weight goes up is that a hairline laid over a photograph disappears into it. */ .marks-in .cn { border-width: 2px } .marks-in .cn.tl { top: 8px; left: 8px; border-right-width: 0; border-bottom-width: 0 } .marks-in .cn.tr { top: 8px; right: 8px; border-left-width: 0; border-bottom-width: 0 } .marks-in .cn.bl { bottom: 8px; left: 8px; border-right-width: 0; border-top-width: 0 } .marks-in .cn.br { bottom: 8px; right: 8px; border-left-width: 0; border-top-width: 0 } body { background: var(--green); color: var(--cream); font-family: 'EB Garamond', Georgia, serif; overflow-x: hidden; } p { font-size: var(--fs-body); } /* GRAIN */ body::after { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.035; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); /* The tile size has to be said out loud. That SVG carries a viewBox and no width/height, so it has an aspect ratio and no intrinsic size — and CSS then sizes it to the background positioning area, which here is the whole fixed viewport. A 200-unit noise field blown up to ~900px is not grain: it is soft blotches the size of a fist, sitting fixed over every flat colour on the site and, because this layer is fixed at z-index 9999, over the framed figures as well. At 200px the field renders at 1:1 and tiles, which is what `stitchTiles` is there for. The paper texture in alvara-editorial.css says the same thing the same way. */ background-size: 200px 200px; } /* NAV */ .alv-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; display: flex; justify-content: space-between; align-items: center; padding: 22px 56px; border-bottom: 1px solid var(--gold-line); /* Solid, all the way across. The bar is the mockups' scrolled state colour (`.nav.scr`, rgba(13,32,20,.92)) taken opaque: the mockups faded their nav into the hero and that fade only ever reads as a fade over the photograph — one half of the bar sitting on flat green, the other half with a horse ghosting through it. Opaque means `backdrop-filter` has nothing left to blur, so it goes with the transparency rather than costing a compositing layer for nothing. */ /* background: #0D2014; */ background: #0b1a11; } .alv-nav .nav-mark { font-family: 'Cormorant Garamond', serif; font-size: 33.1px; font-weight: 600; color: var(--cream); letter-spacing: 0.16em; text-transform: uppercase; text-decoration: none; } .alv-nav .nav-mark span { color: var(--gold); } /* The gap tightens with the viewport so six items plus the language chooser stay on one line down to the burger breakpoint (1360px). */ .alv-nav .nav-links { display: flex; gap: clamp(24px, 2.5vw, 40px); list-style: none; } .alv-nav .nav-links a { font-size: 15px; letter-spacing: 2.5px; text-transform: uppercase; white-space: nowrap; color: var(--cream-45); text-decoration: none; font-family: 'EB Garamond', serif; transition: color 0.2s ease; } .alv-nav .nav-links a:hover, .alv-nav .nav-links a.active { color: var(--gold); } .alv-nav .nav-burger { display: none; background: none; border: 0; cursor: pointer; width: 36px; height: 36px; padding: 8px; margin: -8px; flex-direction: column; justify-content: center; gap: 5px; } .alv-nav .nav-burger span { display: block; width: 22px; height: 1px; background: var(--cream-65); transform-origin: center; transition: transform 0.25s ease, opacity 0.2s ease; } .alv-nav .nav-burger.is-open span:nth-child(1) { transform: translateY(6px) rotate(45deg); } .alv-nav .nav-burger.is-open span:nth-child(2) { opacity: 0; } .alv-nav .nav-burger.is-open span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); } /* Language chooser */ .alv-nav .nav-lang { position: relative; } .alv-nav .nav-lang-toggle { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; padding: 0; font-size: 15px; letter-spacing: 2.5px; text-transform: uppercase; white-space: nowrap; color: var(--cream-45); font-family: 'EB Garamond', serif; transition: color 0.2s ease; } .alv-nav .nav-lang-toggle:hover { color: var(--gold); } .alv-nav .nav-lang-globe { flex-shrink: 0; } .alv-nav .nav-lang-menu { position: absolute; top: calc(100% + 14px); right: 0; list-style: none; padding: 8px 0; margin: 0; background: rgba(19, 45, 30, 0.98); border: 1px solid var(--gold-line); backdrop-filter: blur(10px); } .alv-nav .nav-lang-menu li { padding: 0; } .alv-nav .nav-lang-menu a { display: block; padding: 8px 18px; font-size: 14px; letter-spacing: 1.5px; text-transform: none; } /* A language the College intends to publish in and has not published yet. It is a span rather than a dimmed anchor — see the note in _college_nav.html — and the menu had grown from two rows to six, so it also widens to hold the qualifier on one line. */ .alv-nav .nav-lang-menu { min-width: 210px; } .alv-nav .nav-lang-menu .is-soon { display: block; padding: 8px 18px; font-size: 14px; letter-spacing: 1.5px; text-transform: none; color: rgba(242, 237, 224, 0.38); cursor: default; } .alv-nav .nav-lang-menu .is-soon i { font-style: italic; font-size: 11.5px; letter-spacing: 0.06em; color: rgba(242, 237, 224, 0.28); } /* HERO — the old front page's, and DELIBERATELY no longer a bare `.hero`. These rules were left global when the front page moved to `hp-` classes, on the note that "the Portuguese home and several other pages still use them". That stopped being true. Every `class="hero"` in the estate now sits inside a scoped wrapper (.alv-ed, .alv-home, .alv-lib) with its own sheet, except the parked Series — which loads series/series.css and never main.css. So the rules matched nothing, and meanwhile a bare `.hero` here reached inside every one of those wrappers. Three of the four scoped sheets happened to set display, min-height and grid-template-columns themselves and so overrode it; the Library set none of the three and inherited a two-column 55/45 grid at 100vh, which is not a thing anyone had written down. `.hero-image` and its friends below are left as they are: they are the same dead system, but they cannot reach anything without this rule. */ .hero-image { position: relative; overflow: hidden; } .hero-image::before { content: ''; position: absolute; inset: 0; background-size: cover; background-position: center center; opacity: 0.22; filter: sepia(0.3); } .hero-image::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to right, var(--green) 0%, transparent 35%, transparent 70%, var(--green) 100%); } .hero-copy { position: relative; z-index: 2; padding: 130px 56px 80px 72px; display: flex; flex-direction: column; justify-content: center; } .hero-institution { display: flex; align-items: center; gap: 20px; margin-bottom: 52px; opacity: 0; animation: fadeUp 0.6s ease forwards 0.1s; } .hero-institution-text { font-size: var(--fs-body-lg); color: var(--cream-45); letter-spacing: 1px; line-height: 1.5; } .hero-institution-text strong { display: block; color: var(--cream-65); font-weight: 400; font-size: var(--fs-body-lg); font-family: 'EB Garamond', serif; } .hero-wordmark { font-family: 'Cormorant Garamond', serif; font-size: clamp(72px, 9vw, 118px); font-weight: 600; color: var(--cream); line-height: 0.95; letter-spacing: 0.035em; margin-bottom: 36px; opacity: 0; animation: fadeUp 0.8s ease forwards 0.25s; } .hero-wordmark span { color: var(--gold); } .hero-rule { width: 44px; height: 1px; background: var(--gold); margin-bottom: 32px; opacity: 0; animation: fadeUp 0.6s ease forwards 0.45s; } .hero-tagline { font-family: 'EB Garamond', serif; font-size: clamp(18px, 2vw, 24px); font-style: italic; font-weight: 400; color: var(--cream-65); line-height: 1.5; margin-bottom: 40px; max-width: 460px; opacity: 0; animation: fadeUp 0.7s ease forwards 0.6s; } .hero-body { font-size: var(--fs-body); line-height: calc(1.85 * var(--lh-scale)); color: var(--cream-45); max-width: 420px; margin-bottom: 48px; opacity: 0; animation: fadeUp 0.7s ease forwards 0.75s; } .hero-body p { margin-bottom: 12px; } .hero-close { font-family: 'EB Garamond', serif; font-size: var(--fs-body-lg); font-style: italic; color: var(--gold); opacity: 0; animation: fadeUp 0.7s ease forwards 0.9s; } /* BELOW HERO */ .below-hero { border-top: 1px solid var(--gold-line); } .bh-inner { max-width: 1280px; margin: 0 auto; padding: 96px 72px; } .s-label { font-size: var(--fs-eyebrow-lg); letter-spacing: 4px; text-transform: uppercase; color: var(--gold); margin-bottom: 24px; font-family: 'EB Garamond', serif; } .s-title { font-family: 'EB Garamond', serif; font-size: clamp(32px, 3.5vw, 50px); font-weight: 400; color: var(--cream); line-height: 1.2; margin-bottom: 32px; max-width: 600px; } .s-body { font-size: var(--fs-body-lg); line-height: calc(1.9 * var(--lh-scale)); color: var(--cream-65); max-width: 540px; } .s-body p { margin-bottom: 16px; } /* DISCIPLINE TWO COL */ .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; } .disc-list { margin-top: 8px; } .disc-item { padding: 20px 0; border-bottom: 1px solid var(--gold-line); } .disc-tag { font-size: var(--fs-eyebrow-lg); letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 8px; font-family: 'EB Garamond', serif; } .disc-text { font-family: 'EB Garamond', serif; font-size: var(--fs-prose); font-style: italic; color: var(--cream-65); line-height: 1.4; } /* SYSTEM */ .system-band { background: var(--green-deep); border-top: 1px solid var(--gold-line); border-bottom: 1px solid var(--gold-line); } .system-inner { max-width: 1280px; margin: 0 auto; padding: 96px 72px; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; } .bands { margin-top: 40px; } .band-row { display: grid; grid-template-columns: 52px 1fr; gap: 24px; align-items: center; padding: 22px 0; border-bottom: 1px solid var(--hair); } .band-letter { font-family: 'EB Garamond', serif; font-size: 52px; font-weight: 400; font-style: italic; color: var(--gold); line-height: 1; text-align: center; } .band-desc { font-size: var(--fs-body-sm); color: var(--cream-45); line-height: calc(1.65 * var(--lh-scale)); } /* FELLOWSHIP */ .fellowship-inner { max-width: 1280px; margin: 0 auto; padding: 96px 72px; } .f-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 80px; margin-top: 48px; align-items: start; } .std-item { padding: 28px 0; border-top: 1px solid var(--gold-line); } .std-tag { font-size: var(--fs-eyebrow); letter-spacing: 3px; text-transform: uppercase; color: var(--gold); margin-bottom: 12px; font-family: 'EB Garamond', serif; } .std-text { font-size: var(--fs-body-lg); color: var(--cream-65); line-height: calc(1.75 * var(--lh-scale)); } .f-aside { border-left: 1px solid var(--gold-line); padding-left: 48px; padding-top: 28px; } .f-pull { font-family: 'EB Garamond', serif; font-size: 24px; font-style: italic; font-weight: 400; color: var(--cream); line-height: 1.55; margin-bottom: 28px; } .f-note { font-size: var(--fs-meta); color: var(--cream-45); line-height: calc(1.85 * var(--lh-scale)); } /* CLOSE */ .close-wrap { border-top: 1px solid var(--gold-line); text-align: center; padding: 110px 72px; background: var(--green-deep); } .close-rule { width: 44px; height: 1px; background: var(--gold); opacity: 0.5; margin: 0 auto 52px; } .close-line { font-family: 'EB Garamond', serif; font-size: clamp(28px, 3.5vw, 44px); font-weight: 400; font-style: italic; color: var(--cream); letter-spacing: 0.3px; } .close-line em { color: var(--gold); } /* ===================================================================== THE FOOTER One component, `_college_foot.html`, on every page of the estate that has a footer at all. The reader and the printed manual do not: both are full-viewport applications. THE STICKY FOOTER is `body:has(> .alv-foot)`, not `body`. Making every body a flex column would reach the two pages above as well — and `.alv-reader-page` sets a definite `height: 100vh`, under which flex children shrink rather than overflow, so its three panels would be squashed by a rule written for a marketing page. `:has()` asks the one question that actually decides it: does this page carry a footer? The `> ` is load-bearing — the footer is a direct child of in every template, and a descendant match would take in a footer nested in an application shell. With `:has()` unsupported the footer simply sits under short content instead of at the foot of the viewport, which is what it did before. `100svh` rather than `100vh`: on a phone `vh` is the *largest* viewport, so with the browser's own bars showing, a "full height" page is taller than the screen and every short page gains a scrollbar that scrolls to nothing. ===================================================================== */ body:has(> .alv-foot) { display: flex; flex-direction: column; min-height: 100svh; } body:has(> .alv-foot) > .alv-foot { margin-top: auto; } .alv-foot { border-top: 1px solid var(--gold-line); padding: 56px 72px 32px; background: var(--green-deep); /* A flex child of the body above shrinks by default, and the footer is the one child that must not: it is the natural height of its columns. */ flex: none; } /* The brand block beside the columns. It leads at every width — the columns wrap under it on a narrow screen rather than the wordmark wrapping under them, since the name is what says whose site this is. */ .alv-foot .foot-top { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: clamp(32px, 5vw, 72px); } /* The wordmark and its strapline, and nothing else — the standing paragraph under them went as extraneous. So the block asks for the width those two lines take rather than the measure a paragraph wanted, and stops growing there: given a share of the row it would push the columns right for no reason, the two lines being as wide as they are going to get. */ .alv-foot .foot-brand { flex: 0 1 auto; } .alv-foot .foot-name { font-family: 'Cormorant Garamond', serif; font-size: var(--fs-body-lg); font-weight: 600; color: var(--cream); letter-spacing: 0.24em; text-transform: uppercase; } /* The accent is gold, as it is on the nav's wordmark at the other end of the page — `.alv-nav .nav-mark span`, said again here because the two marks share no selector. The markup keeps the word in its own case and `text-transform` raises it, so what a screen reader announces is Alvará. */ .alv-foot .foot-name span { color: var(--gold); } .alv-foot .foot-sub { margin-top: 8px; font-size: var(--fs-eyebrow-lg); color: var(--cream-45); letter-spacing: 1.5px; text-transform: uppercase; } /* The columns. `auto-fit` rather than a fixed count because the signed-in footer carries four and the signed-out one three, and a grid told to hold four would leave a column of air on every public page. */ .alv-foot .foot-cols { flex: 1 1 520px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 28px clamp(24px, 3vw, 48px); } .alv-foot .foot-h { margin: 0 0 14px; font-family: 'EB Garamond', serif; font-size: var(--fs-eyebrow); font-weight: 500; letter-spacing: 2.2px; text-transform: uppercase; color: var(--gold); } .alv-foot .foot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 9px; } .alv-foot .foot-list a, .alv-foot .foot-out button { display: block; padding: 0; font-family: 'EB Garamond', serif; font-size: var(--fs-note); line-height: 1.4; letter-spacing: 0.04em; color: var(--cream-80); text-decoration: none; background: none; border: 0; text-align: left; cursor: pointer; transition: color 0.2s ease; } /* Pin :link/:visited with a literal gold-free cream — browsers ignore var() on :visited (a privacy restriction) and fall back to the UA purple otherwise. rgba(242, 237, 224, 0.8) === var(--cream-80). */ .alv-foot .foot-list a:link, .alv-foot .foot-list a:visited { color: rgba(242, 237, 224, 0.8); } .alv-foot .foot-list a:hover, .alv-foot .foot-list a:focus-visible, .alv-foot .foot-out button:hover, .alv-foot .foot-out button:focus-visible { color: var(--gold); } /* A Branch is named by its ordinal alone. Its title went with a `.foot-aside` line under it: three of the four rows had nothing to put there, and the one that did ran to three lines on a phone — a subtitle louder than the row it belongs to. The reader names the Branch it opens; the footer only has to say which one. */ /* A destination with no page yet — the three policies, Branches Two and Three. The account menu's `.nav-acct-soon` idiom, kept identical so the two read as one convention: never a dimmed link, which is a promise the footer cannot keep. */ .alv-foot .foot-soon { font-family: 'EB Garamond', serif; font-size: var(--fs-note); line-height: 1.4; letter-spacing: 0.04em; color: var(--cream-30); cursor: default; } /* Ordinary inline flow, NOT a flex row. As a flex row a label too long for its column wraps while the mark stays pinned to the far edge, so "My payment methods" broke over two lines with SOON hanging in the air beside the first — which on a phone is every row in the column. Inline, the mark simply follows the last word wherever it lands. */ .alv-foot .foot-soon em { display: inline-block; margin-left: 8px; font-style: normal; font-size: 9px; letter-spacing: 1.6px; text-transform: uppercase; color: var(--cream-30); border: 1px solid var(--hair); border-radius: 2px; padding: 1px 5px; } .alv-foot .foot-out { margin: 0; } /* THE LEGAL RULE — copyright, the policies, and the cookie control. */ .alv-foot .foot-legal { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 28px; margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--hair); } .alv-foot .foot-copy { margin: 0; font-size: var(--fs-meta); letter-spacing: 0.06em; color: var(--cream-45); } /* THE REGISTERED PARTICULARS, on a line of their own beneath the rest. The legal rule is a flex row with the copyright at one end and the policies at the other, and a fourth item in it would wrap between the two at every width the estate is read at. `flex-basis: 100%` with `order` past both puts it under them as a line rather than as a competitor for the row — and it is the quietest thing in the footer on purpose: it is a disclosure a reader consults, not one they read, and Companies House requires it to be legible rather than prominent. `--fs-micro` and `--cream-30` are the smallest and faintest the estate already uses, so nothing new was minted for it. */ .alv-foot .foot-registered { flex-basis: 100%; order: 3; margin: 0; font-size: var(--fs-micro); line-height: 1.8; letter-spacing: 0.04em; color: var(--cream-30); /* The three lines are the partial's own `
`s, so the measure is not what decides them -- but the middle line still has to be free to wrap on a narrow screen, and `text-wrap: pretty` is what stops it leaving a single word stranded under the rest of it. */ text-wrap: pretty; } .alv-foot .foot-policies { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 24px; } /* The live controls in the legal rule — the three policies and the cookie button — dressed as one thing because they sit in one row and are read as one row. Underlined, but at a weight below the copyright rather than above it: full cream made this bar the loudest thing in the footer. The button and the anchors are given the same declarations rather than the anchors inheriting the anchor defaults: a