with a fixed
token, so the container and the paragraph inside it disagree by a margin that
grows with the window — 0.3px at 1440, about 3px at 1920. The paragraph is
matched by `p` directly, and a directly-matched rule always beats an
inherited value, so the container never reaches it. `inherit` hands it back. */
:where(.alv-home .body) p {
font-size: inherit
}
.alv-home .lede::first-letter {
font-family: "Cormorant Garamond", Georgia, serif;
float: left;
font-size: 2em;
line-height: .37;
padding: 10px 2px 0 0;
color: var(--gold);
font-weight: 600
}
/* `.cta` is in main.css -- see THE LINK-ACTION there. It lived here, which is
why the College's copy of the same markup rendered as a bare anchor. The
three colour rules that stood with it (bare, `.sec.cream`/`.plateband`, and
`.plateband.green`) were `--ground-kick`'s two values written out, so they
went with it rather than moving. */
/* ============ FELLOWS — framed plate ============ */
.alv-home .plateband .ghost {
position: absolute;
top: 50%;
right: -4%;
transform: translateY(-50%);
font-family: "Cormorant Garamond", Georgia, serif;
font-weight: 600;
font-size: min(38vw, 520px);
letter-spacing: .02em;
color: rgba(184, 150, 46, .009);
line-height: 1;
pointer-events: none;
user-select: none;
z-index: 0;
white-space: nowrap
}
.alv-home .plateband .seal-bg {
position: absolute;
top: 50%;
right: 3%;
transform: translateY(-50%);
width: min(36vw, 430px);
opacity: .022;
z-index: 0;
pointer-events: none;
user-select: none
}
/* green variant — Purpose (image right, text left) */
.alv-home .plateband.green .ghost {
color: rgba(242, 237, 224, .008);
right: auto;
left: -4%
}
.alv-home .plateband.green .seal-bg {
right: auto;
left: 3%;
opacity: .04
}
.alv-home .plateband.green .plate-tx .kick {
color: var(--ground-kick)
}
.alv-home .plateband.green .plate-tx h2 {
color: var(--ground-ink)
}
.alv-home .plateband.green .plate-tx .lede::first-letter {
color: var(--gold-soft)
}
.alv-home .plateband.green .plate-cap {
color: var(--ground-mute)
}
.alv-home .plate-grid {
position: relative;
z-index: 1;
max-width: 1180px;
margin: 0 auto;
padding: 0 clamp(24px, 5vw, 64px);
display: grid;
grid-template-columns: 1.02fr 1.12fr;
gap: clamp(34px, 5vw, 74px);
align-items: stretch
}
.alv-home .plate-grid.reverse {
grid-template-columns: 1.12fr 1.02fr
}
@media(max-width:900px) {
.alv-home .plate-grid {
grid-template-columns: 1fr;
gap: 26px
}
.alv-home .plate-grid.reverse {
grid-template-columns: 1fr
}
.alv-home .plate-grid.reverse .plate-fig {
order: -1
}
}
.alv-home .plate-fig {
position: relative;
display: flex;
flex-direction: column
}
/* Every plate is the same shape — the 4:5 of the photographs shot upright.
The frame used to take its height from the prose beside it (flex:1 in a
stretched grid row), so the two landscape photographs came out shorter than
the two portrait ones and no two plates on the page agreed. The ratio has to
be told to the frame rather than left to the row, and flex:none is what stops
the row overriding it. object-fit:cover then does the rest: a photograph
wider than the frame is cropped either side of object-position, a shorter one
fills to the edges. */
.alv-home .plate-frame {
position: relative;
flex: none;
aspect-ratio: 4 / 5
}
.alv-home .plate-frame img {
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 26%;
display: block
}
.alv-home .plate-cap {
font-family: "Cormorant Garamond", Georgia, serif;
font-style: italic;
color: #6f6a52;
font-size: var(--fs-ui);
letter-spacing: .03em;
margin-top: 14px
}
.alv-home .plate-tx {
display: flex;
flex-direction: column;
justify-content: center
}
.alv-home .plateband .plate-tx .kick {
color: #8a6d1e
}
.alv-home .plateband .plate-tx h2 {
font-family: "Cormorant Garamond", Georgia, serif;
font-weight: 500;
font-size: var(--fs-h2);
line-height: 1.08;
letter-spacing: .004em;
color: var(--ink);
}
.alv-home .plate-tx .rule {
margin-top: clamp(16px, 1.8vw, 22px)
}
.alv-home .plateband .plate-tx .lede::first-letter {
color: var(--gold)
}
/* ============ begin ============ */
.alv-home .coda {
position: relative;
min-height: clamp(620px, 94vh, 1000px);
display: flex;
align-items: flex-end;
overflow: hidden
}
.alv-home .coda .bg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
object-position: 50% 42%;
filter: saturate(.8) contrast(.95) brightness(.96)
}
.alv-home .coda .veil {
position: absolute;
inset: 0;
background: linear-gradient(180deg, rgba(11, 26, 17, .5) 0%, rgba(11, 26, 17, .52) 42%, rgba(11, 26, 17, .9) 100%),
rgba(16, 38, 24, .32)
}
.alv-home .coda-in {
position: relative;
z-index: 2;
width: 100%;
max-width: 1000px;
margin: 0 auto;
padding: 0 clamp(24px, 5vw, 64px) clamp(46px, 7vh, 84px);
text-align: center
}
.alv-home .coda .kick {
color: var(--gold-soft)
}
.alv-home .coda h2 {
font-size: var(--fs-h2);
font-family: "Cormorant Garamond", Georgia, serif;
font-weight: 500;
color: var(--cream2);
margin: 14px 0 0
}
.alv-home .coda .rule {
margin-left: auto;
margin-right: auto
}
.alv-home .tiers {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: clamp(20px, 2.6vw, 40px);
margin-top: clamp(30px, 4vw, 50px);
text-align: left
}
@media(max-width:820px) {
.alv-home .tiers {
grid-template-columns: 1fr;
gap: 16px
}
}
.alv-home .tier {
border-top: 1px solid var(--gold-line);
padding-top: 16px
}
.alv-home .tier .tn {
font-family: "Cormorant Garamond", Georgia, serif;
text-transform: uppercase;
letter-spacing: .2em;
font-size: var(--fs-eyebrow-lg);
color: var(--gold-soft)
}
.alv-home .tier .td {
font-family: "EB Garamond", Georgia, serif;
font-size: var(--fs-ui);
line-height: calc(1.6 * var(--lh-scale));
color: var(--c80);
margin-top: 8px
}
.alv-home .btn {
display: inline-flex;
align-items: center;
gap: 11px;
font-family: "Cormorant Garamond", Georgia, serif;
text-transform: uppercase;
letter-spacing: .18em;
font-size: var(--fs-eyebrow-lg);
font-weight: 600;
color: #0f2417;
background: var(--gold);
padding: 15px 34px;
border-radius: 2px;
margin-top: clamp(30px, 4vw, 46px);
transition: background .25s, transform .25s
}
.alv-home .btn:hover {
background: var(--gold-soft);
transform: translateY(-1px)
}
/* reveal */
.alv-home .reveal {
opacity: 0;
transform: translateY(22px);
transition: opacity 1s cubic-bezier(.2, .7, .2, 1), transform 1s cubic-bezier(.2, .7, .2, 1)
}
.alv-home .reveal.in {
opacity: 1;
transform: none
}
.alv-home .reveal.d1 {
transition-delay: .12s
}
@media(prefers-reduced-motion:reduce) {
.alv-home .reveal {
opacity: 1;
transform: none;
transition: none
}
.alv-home .hero .bg {
animation: none;
transform: none
}
}
/* The College — the Alvará Spiral diagram */
/* ===== The Alvará Bands — woven into the page, full width ===== */
.alv-home .bandsec {
padding: clamp(26px, 3.4vw, 52px) 0
}
.alv-home .bandsec .ghost {
position: absolute;
top: 46%;
left: 50%;
transform: translate(-50%, -50%);
font-family: "Cormorant Garamond", Georgia, serif;
font-weight: 600;
font-size: min(44vw, 660px);
letter-spacing: .02em;
color: rgba(184, 150, 46, .02);
line-height: 1;
white-space: nowrap;
pointer-events: none;
user-select: none;
z-index: 0
}
.alv-home .bandsec .seal-bg {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: min(54vw, 640px);
opacity: .035;
z-index: 0;
pointer-events: none;
user-select: none
}
.alv-home .bx-stage {
position: relative;
z-index: 2
}
/* The Bands block's head, and only that one -- scoped to its own section.
The centring is `.head.center`'s now; what is left here is the narrower
measure this head is set to. */
.alv-home .bandsec .head {
max-width: 860px;
margin-inline: auto;
}
.alv-home .head .kick {
color: #8a6d1e;
font-size: var(--fs-label)
}
.alv-home .rule.center {
margin-left: auto;
margin-right: auto
}
.alv-home .bx-title {
font-family: "Cormorant Garamond", Georgia, serif;
font-weight: 500;
color: var(--ink);
font-size: calc(clamp(20px, 2.5vw, 34px) * var(--fs-scale));
line-height: 1.08;
letter-spacing: .004em;
margin: 9px 0 0
}
/* The gap over it was a `
` in the English markup and nothing at all in
the Portuguese, so the same panel stood two different ways in the two
languages. It is the estate's head-to-prose gap and it is that token now --
the intro sits inside a `.head.center` rather than beneath a `.head.tight`,
which is why it reads `--head-gap` instead of taking the rule that does.
The English intro is a run of three paragraphs -- the sentence, the four
Bands named, and what a Member does with them -- and the class is on every
one of them, so the two gaps between them are the same measured token as
the gap above. They were three more `
`s, which is the same drift back:
an empty line box is whatever the wrapper's line-height happens to be, and
the Portuguese panel, still one paragraph, would not have had it. */
.alv-home .bx-intro {
margin: var(--head-gap) auto 0;
max-width: none;
color: #263015;
font-family: "EB Garamond", Georgia, serif;
font-size: var(--fs-body-sm);
line-height: 1.5
}
/* The matrix is one explainer column beside four band blocks, and a block is a
grid item that lays its own four rows out on the matrix's rows (`subgrid`) —
so every band's Understanding row is the same height without the five-column
flat grid this was built as. The flat grid is what stopped it folding: each
cell was placed by an inline `grid-column`/`grid-row`, which a media query
cannot answer. Below 900px the blocks stack and each takes the explainer
beside it — see the fold at the foot of this sheet. */
.alv-home .bx-mxwrap {
/* The badges hang 21px above the first row and the padding is what holds
them: nothing here may set an overflow, since one axis set to `auto`
computes the other to `auto` as well and the badge is trimmed — which is
what `overflow-x:auto` did to it on every narrow screen. */
margin-top: 41px;
padding-top: 24px
}
.alv-home .bx-matrix {
display: grid;
grid-template-columns: 158px repeat(4, 1fr);
grid-template-rows: auto auto auto auto;
column-gap: 12px
}
.alv-home .bx-matrix>* {
grid-row: 1 / 5;
display: grid;
grid-template-rows: subgrid
}
.alv-home .bx-labels {
grid-column: 1
}
/* The band's panel is the band's block: the four `.bx-bg` divs painted behind
the columns are gone, and with them the second class (`.bx-colc`) that had
to lift the cells by exactly what the panel behind them lifted by. */
.alv-home .bx-col {
position: relative;
border-radius: 9px;
box-shadow: 0 20px 44px -28px rgba(15, 30, 20, .52)
}
.alv-home .bx-a {
grid-column: 5;
background: linear-gradient(165deg, #20402a, #14301d)
}
.alv-home .bx-b {
grid-column: 4;
background: linear-gradient(165deg, #294a2c, #1c3820)
}
.alv-home .bx-c {
grid-column: 3;
background: linear-gradient(165deg, #4b5230, #3a4325);
box-shadow: 0 0 0 1.4px rgba(201, 169, 74, .5), 0 0 26px -6px rgba(201, 169, 74, .42), 0 20px 44px -28px rgba(15, 30, 20, .52)
}
.alv-home .bx-d {
grid-column: 2;
background: linear-gradient(165deg, #726f47, #5d5937)
}
.alv-home .bx-hd {
position: relative;
padding: 30px 12px 10px;
text-align: center
}
.alv-home .bx-band {
color: var(--gold-soft);
text-transform: uppercase;
letter-spacing: .17em;
font-family: "Cormorant Garamond", Georgia, serif;
font-size: var(--fs-eyebrow-lg);
font-weight: 600
}
/* A gold hair between the Band's name and what the Band means. It is drawn on
the second line rather than written as an element of its own: four headers
is four copies of a decorative div, and one a screen reader has to be told
to read past. `+` rather than `:nth-child(2)`, so a header carrying only the
Band's name draws no divider under it. It is the estate's `.rule` at half
the width — 52px under a section heading is a rule, and the same 52px in a
quarter-width column would be a rule again rather than a join. */
.alv-home .bx-band+.bx-band::before {
content: "";
display: block;
width: 26px;
height: 1px;
margin: 8px auto 7px;
background: var(--gold);
opacity: .62
}
.alv-home .bx-cell {
position: relative;
padding: 11px 13px;
text-align: center;
color: rgba(242, 237, 224, .97);
font-family: "EB Garamond", Georgia, serif;
font-size: var(--fs-body-sm);
line-height: 1.46;
display: grid;
grid-template-columns: 1fr;
align-content: start
}
.alv-home .bx-ct {
display: flex;
flex-direction: column;
align-items: center
}
/* Every cell carries its own copy of the explainer beside it, and the copies
are what the fold shows. They are clipped rather than removed on the wide
layout because they are also what a screen reader hears: the DOM runs band
by band now, so a cell that did not name its own row would be read with the
three headings a whole column away. The visible column is `aria-hidden` in
the markup for the same reason — it is the copies said once more. */
.alv-home .bx-fold {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap
}
.alv-home .bx-fold .bx-lt {
color: var(--gold-soft)
}
.alv-home .bx-fold .bx-ls {
color: rgba(242, 237, 224, .72)
}
/* `inherit` is load-bearing. main.css sets `p { font-size: var(--fs-body) }`,
which matches this paragraph directly — and an element's own rule always
beats an inherited value, however specific the ancestor's selector is.
Specificity only breaks ties between rules matching the SAME element, so
`.alv-home .bx-cell` styles the div and never reaches the
inside it. Without this line the cell asks for 14.4px and renders 20.4px. */ .alv-home .bx-cell p { margin: 0; font-size: inherit } .alv-home .bx-cell em { display: block; color: var(--gold-soft); font-style: italic; font-family: "Cormorant Garamond", Georgia, serif; font-size: var(--fs-meta-alt); margin-top: 5px; letter-spacing: .01em } .alv-home .bx-cell em.bx-threshold { color: var(--cream2); font-style: normal; text-transform: uppercase; font-weight: 600; font-size: var(--fs-eyebrow); letter-spacing: .13em; text-shadow: none; margin-top: 7px } .alv-home .bx-div { border-top: 1px dotted rgba(200, 180, 120, .3) } .alv-home .bx-dot { width: 6px; height: 6px; border-radius: 50%; background: #9c8636; box-shadow: 0 0 0 3px rgba(201, 169, 74, .08); margin-bottom: 8px } .alv-home .bx-arrow svg { width: 100%; height: 16px; overflow: visible; display: block } .alv-home .bx-arrow line, .alv-home .bx-arrow path { stroke: var(--gold-soft); stroke-width: 2; fill: none; stroke-linecap: round; stroke-linejoin: round } .alv-home .bx-lbl { padding: 12px 14px 12px 0; display: flex; flex-direction: column; justify-content: center } .alv-home .bx-lt { color: #8a6d1e; text-transform: uppercase; letter-spacing: .12em; font-family: "Cormorant Garamond", Georgia, serif; font-size: var(--fs-eyebrow); font-weight: 600 } .alv-home .bx-ls { color: #54503a; font-family: "EB Garamond", Georgia, serif; font-size: var(--fs-meta-alt); line-height: 1.38; margin-top: 3px } .alv-home .bx-div.bx-lbl { border-top-color: rgba(60, 52, 24, .16) } .alv-home .bx-features { margin: clamp(13px, 1.5vw, 20px) auto 0; border: 1px solid rgba(60, 52, 24, .16); border-radius: 9px; display: grid; grid-template-columns: repeat(4, 1fr) } .alv-home .bx-feat { padding: clamp(12px, 1.3vw, 16px) clamp(14px, 1.5vw, 20px) } .alv-home .bx-feat+.bx-feat { border-left: 1px solid rgba(60, 52, 24, .14) } .alv-home .bx-feat-t { color: #8a6d1e; text-transform: uppercase; letter-spacing: .11em; font-family: "Cormorant Garamond", Georgia, serif; font-size: var(--fs-eyebrow); font-weight: 600; line-height: 1.28 } .alv-home .bx-feat-tx p { margin: 6px 0 0; color: #32361d; font-family: "EB Garamond", Georgia, serif; font-size: var(--fs-meta-alt); line-height: 1.46 } .alv-home .bx-foot { margin: clamp(13px, 1.5vw, 22px) auto 0; display: flex; align-items: center; justify-content: center; gap: clamp(16px, 2.2vw, 38px) } .alv-home .bx-foot-t { color: #8a6d1e; text-transform: uppercase; letter-spacing: .18em; font-family: "Cormorant Garamond", Georgia, serif; font-size: var(--fs-eyebrow); font-weight: 600 } .alv-home .bx-seal { width: 34px; height: 34px; flex: 0 0 auto; opacity: .94 } /* animation — badges drop in, Band C pops up then settles into a breathing gold glow */ .alv-home .bx-arrow { position: absolute; right: -24px; top: 45%; transform: translateY(-50%); z-index: 4; width: 48px; opacity: 0 } .alv-home .bx-badge { position: absolute; top: -21px; left: 50%; transform: translateX(-50%); width: 42px; height: 42px; background: #12291c; border: 1.4px solid var(--gold); color: var(--gold-soft); display: flex; align-items: center; justify-content: center; font-family: "Cormorant Garamond", Georgia, serif; font-size: 22px; font-weight: 600; box-shadow: 0 0 0 5px var(--cream), 0 8px 16px -9px rgba(0, 0, 0, .7); opacity: 0 } .alv-home .bx-stage.in .bx-badge { animation: bxBadge .62s cubic-bezier(.3, 1.3, .5, 1) var(--bd, .2s) both } .alv-home .bx-stage.in .bx-c { animation: bxCbg 2s cubic-bezier(.33, 1.15, .42, 1) .55s both, bxBreathe 4s ease-in-out 2.7s infinite } .alv-home .bx-stage.in .bx-arrow { animation: bxArrow 1.7s ease .95s both } .alv-home .bx-stage.in .bx-dot { animation: bxDot 1.4s ease var(--dd, 1.05s) both } /* ============ the fold ============ The matrix stops being a matrix and becomes four blocks, each the band's panel with the explainer beside it — the same three rows said four times, which is the only arrangement that keeps a row's meaning next to the cell answering it on a screen too narrow to carry four bands across. It used to set `min-width:720px` and scroll sideways inside `.bx-mxwrap`, which asked a reader to hold Band D's cell against a heading three swipes to the left. */ @media(max-width:900px) { .alv-home .bx-matrix { /* The explainer's width, read by the cells and by the badge's centring. Its floor is what UNDERSTANDING needs: one 13-letter word that cannot be broken and is set in caps, which is what settles this column rather than any measure of the prose beside it. */ --bx-lbl-w: clamp(128px, 34vw, 150px); display: block } .alv-home .bx-labels { display: none } .alv-home .bx-col { display: block; max-width: 560px; margin-inline: auto } /* Room for the badge over each block, and for the arrow that now stands in the gap. The arrow hangs BELOW the band it leaves, so the two claims on the gap are now on the same side of it: 44px of arrow measured down from the block above, and Band C's 22px rise measured up from the block below. At the 52px this held while the bands ran A to D, the rising panel covered the arrowhead — C paints after D, so the arrow is clipped rather than laid over. */ .alv-home .bx-col+.bx-col { margin-top: 74px } .alv-home .bx-hd { display: grid; grid-template-columns: var(--bx-lbl-w) 1fr; padding: 26px 14px 12px; text-align: left } .alv-home .bx-band { grid-column: 2 } /* The header is set left here rather than centred, and the hair follows the lettering it divides. */ .alv-home .bx-band+.bx-band::before { margin-inline: 0 } /* …and the break in Band C's is dropped with it. That break exists to give C's line the two lines its neighbours wrap to in a 184px column; here the header runs the width of the block and every one of the four sits on one line, so the break would make C the odd one out in the other direction. */ .alv-home .bx-brk { display: none } /* Centred over the explainer column rather than over the block, which is where the badge is out of the prose's way. The 14px is this header's own left padding: `left` is measured from the padding box and the column starts inside it, so the two have to be named together. */ .alv-home .bx-badge { left: calc(14px + var(--bx-lbl-w) / 2) } /* `static`, so the arrow inside this cell is placed against the block rather than against the cell — it belongs at the head of the block it points out of, and the cell it is written in is the middle row. */ .alv-home .bx-cell { position: static; grid-template-columns: var(--bx-lbl-w) 1fr; text-align: left; padding: 13px 14px } .alv-home .bx-fold { position: static; width: auto; height: auto; overflow: visible; clip-path: none; white-space: normal; display: flex; flex-direction: column; padding-right: 12px; border-right: 1px dotted rgba(200, 180, 120, .22) } /* The explainer is set smaller and tighter here than in its own column, which has 158px to spend and this has a third of a telephone. Both are the same `.bx-lt`. `anywhere` is the backstop: on a cold load the label is set in Georgia until Cormorant arrives, and Georgia is a fifth wider — a word that breaks is recoverable, a word that crosses the rule into the sentence beside it is not. */ .alv-home .bx-fold .bx-lt { font-size: calc(var(--fs-eyebrow) * .82); letter-spacing: .03em; overflow-wrap: anywhere } .alv-home .bx-fold .bx-ls { font-size: calc(var(--fs-meta-alt) * .88) } .alv-home .bx-ct { align-items: flex-start; padding-left: 12px } /* Right becomes down: the arrow points at the band below, which is the band it pointed at across the matrix. The rotation replaces the centring transform the wide layout sets, so both are written here. */ .alv-home .bx-arrow { top: calc(100% + 15px); left: auto; bottom: auto; right: 20px; width: 42px; transform: rotate(90deg) } .alv-home .bx-features { grid-template-columns: 1fr 1fr } .alv-home .bx-feat:nth-child(odd) { border-left: 0 } .alv-home .bx-feat:nth-child(n+3) { border-top: 1px solid rgba(60, 52, 24, .14) } } @media(max-width:560px) { .alv-home .bx-features { grid-template-columns: 1fr } .alv-home .bx-feat+.bx-feat { border-left: 0; border-top: 1px solid rgba(60, 52, 24, .14) } .alv-home .bx-foot { flex-direction: column; gap: 12px; text-align: center } } @media(prefers-reduced-motion:reduce) { .alv-home .bx-arrow, .alv-home .bx-badge { opacity: 1 } .alv-home .bx-stage.in .bx-c, .alv-home .bx-stage.in .bx-arrow, .alv-home .bx-stage.in .bx-dot, .alv-home .bx-stage.in .bx-badge { animation: none } } @keyframes bxBadge { 0% { opacity: 0; transform: translateX(-50%) translateY(-16px) scale(.5); } 70% { opacity: 1; } 100% { opacity: 1; transform: translateX(-50%) translateY(0) scale(1); } } @keyframes bxBreathe { 0%, 100% { box-shadow: 0 0 0 1.4px rgba(201, 169, 74, .5), 0 0 26px -6px rgba(201, 169, 74, .42), 0 20px 44px -28px rgba(15, 30, 20, .52); } 50% { box-shadow: 0 0 0 1.6px rgba(201, 169, 74, .72), 0 0 40px -2px rgba(201, 169, 74, .6), 0 20px 44px -28px rgba(15, 30, 20, .52); } } 26% { transform: translateY(-22px); } 58% { transform: translateY(-22px); } 100% { transform: translateY(0); } } @keyframes bxCbg { 0% { transform: translateY(0); box-shadow: 0 18px 38px -26px rgba(15, 30, 20, .5); } 26% { transform: translateY(-22px); box-shadow: 0 0 0 2px rgba(201, 169, 74, 1), 0 0 54px 4px rgba(201, 169, 74, .75), 0 44px 60px -30px rgba(15, 30, 20, .6); } 58% { transform: translateY(-22px); box-shadow: 0 0 0 2px rgba(201, 169, 74, 1), 0 0 54px 4px rgba(201, 169, 74, .75), 0 44px 60px -30px rgba(15, 30, 20, .6); } 100% { transform: translateY(0); box-shadow: 0 0 0 1.4px rgba(201, 169, 74, .5), 0 0 26px -6px rgba(201, 169, 74, .42), 0 20px 44px -28px rgba(15, 30, 20, .52); } } @keyframes bxArrow { 0% { opacity: 0; } 14% { opacity: 1; } 24% { filter: drop-shadow(0 0 5px rgba(201, 169, 74, .95)); } 38% { filter: drop-shadow(0 0 0 rgba(201, 169, 74, 0)); } 56% { filter: drop-shadow(0 0 5px rgba(201, 169, 74, .95)); } 72%, 100% { opacity: 1; filter: drop-shadow(0 0 1px rgba(201, 169, 74, .4)); } } @keyframes bxDot { 0% { background: #9c8636; box-shadow: 0 0 0 3px rgba(201, 169, 74, .08); } 12% { background: #f3dd8e; box-shadow: 0 0 10px 1px rgba(201, 169, 74, .85), 0 0 0 4px rgba(201, 169, 74, .2); } 26% { background: #9c8636; box-shadow: 0 0 0 3px rgba(201, 169, 74, .08); } 46% { background: #9c8636; box-shadow: 0 0 0 3px rgba(201, 169, 74, .08); } 58% { background: #f3dd8e; box-shadow: 0 0 10px 1px rgba(201, 169, 74, .85), 0 0 0 4px rgba(201, 169, 74, .2); } 72% { background: #9c8636; box-shadow: 0 0 0 3px rgba(201, 169, 74, .08); } 100% { background: #9c8636; box-shadow: 0 0 0 3px rgba(201, 169, 74, .08); } } @keyframes spdraw { to { stroke-dashoffset: 0; } } /* The hero wordmark is the mockup's own: bottom-left over the photograph, inside `.hero-in`'s centred 1340px measure. It was centred for a while and has been put back. Nothing here declares that — `.hero-in` above is the design file's rule verbatim and it sets no `text-align`, so the wordmark simply inherits the page's. The two negative right margins went with the centring: they existed only to cancel the trailing `letter-spacing` that pushes a *centred* line half a letter-space off true centre, and on a left-set line there is nothing for them to correct. */ /* The centred single-paragraph setting under the Membership plate. It was an inline style on the
-- max-width, both margins and a colour -- which put the one paragraph on the page outside the type scale and outside every rule that dresses `.body`. */ .alv-home .body--centred { max-width: 60ch; margin-left: auto; margin-right: auto; color: var(--c80) }