/*
* Ledger. A printed-table register — hairline rules, small-caps column
* headings, no striping or cell borders.
*
* Below the breakpoint each row stacks and every cell shows its column
* heading from data-label. The table elements keep their roles throughout, so
* assistive technology still associates cells with headers after the reflow.
*/
/*
* The section rules itself off the one above. Live authors this per section
* rather than deriving it — see the note on `cobell_ruled_sections_class()` in
* inc/helpers.php, which rules the three pages where every section takes it and
* leaves the rest alone. /scholarships is one of the pages that rules only some
* of its sections, and this is one of the two: `--table` is DeadlinesLedger and
* nothing else, where `--dial` is WhenToApply, which live leaves bare. The
* register already names the split exactly, so no field is needed.
*
* Three classes because `.cobell-section` is one and the theme stylesheet loads
* after every block stylesheet — a rule that only ties with it loses outright.
*/
.cobell-section.cobell-ledger--table {
border-top: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 15%, transparent );
}
/* Live's `max-w-5xl` inside a section that has already taken its own gutter, so
64rem flat — not the shell's 72rem. */
.cobell-ledger--table .cobell-section__inner {
max-width: 64rem;
}
.cobell-ledger__header {
margin-inline: auto;
margin-bottom: 0;
max-width: 42rem;
text-align: center;
}
.cobell-ledger__heading {
margin: 0;
font-size: clamp( 1.75rem, 4vw, 3rem );
letter-spacing: -0.015em;
line-height: 1;
}
.cobell-ledger__intro {
margin-top: 1.5rem;
margin-inline: auto;
max-width: 36rem;
color: var( --cobell-body-color );
font-size: var( --cobell-body-size );
line-height: 1.625;
}
/*
* `.cobell-prose` does not reset the UA's 1em on a paragraph, and this box is a
* grid item's child rather than a run of prose — so the top margin collapsed
* with the box's own and won it, and the bottom one escaped to sit between the
* header and the table. Live's subhead is a bare `` with neither. See the
* prose-margin note on the manifesto card and the ledger intro before it.
*/
.cobell-ledger__intro > :first-child {
margin-top: 0;
}
.cobell-ledger__intro > :last-child {
margin-bottom: 0;
}
/*
* The run-out under the header is the table's approach, not the header's
* departure: live carries it as `mt-16 md:mt-20` on the list. Putting it on the
* header instead is what left the intro sitting 44px too close to the rules.
*/
.cobell-ledger__scroll {
overflow-x: auto;
margin-top: 4rem;
}
@media ( min-width: 48rem ) {
.cobell-ledger__scroll {
margin-top: 5rem;
}
}
.cobell-ledger__table {
width: 100%;
border-collapse: collapse;
text-align: left;
}
.cobell-ledger__table th,
.cobell-ledger__table td {
padding: 0;
vertical-align: baseline;
}
.cobell-ledger__table thead th {
padding-block: 1rem;
border-top: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 15%, transparent );
color: color-mix( in srgb, var( --wp--preset--color--forest ) 70%, transparent );
font-size: var( --wp--custom--eyebrow-size );
font-weight: 600;
letter-spacing: 0.4em;
line-height: 1.5;
text-transform: uppercase;
}
.cobell-ledger__table tbody th,
.cobell-ledger__table tbody td {
padding-block: 2rem;
vertical-align: baseline;
border-top: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 15%, transparent );
font-weight: 400;
}
@media ( min-width: 48rem ) {
.cobell-ledger__table tbody th,
.cobell-ledger__table tbody td {
padding-block: 2.5rem;
}
}
/*
* Live closes the ledger with one rule under the last row — `border-b` on the
* list. Ours has to come off cells, and at the stacked width every cell in that
* row is its own block box, so an unscoped rule drew *four* hairlines stacked
* under the last window. Wide, they are one row and collapse into a single line,
* which is why this only ever showed on a phone.
*/
@media ( min-width: 48rem ) {
.cobell-ledger__table tbody tr:last-child th,
.cobell-ledger__table tbody tr:last-child td {
border-bottom: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 15%, transparent );
}
}
@media ( max-width: 47.999rem ) {
.cobell-ledger__table tbody tr:last-child td:last-child {
border-bottom: 1px solid color-mix( in srgb, var( --wp--preset--color--forest ) 15%, transparent );
}
}
.cobell-ledger__row-label {
display: block;
font-family: var( --wp--preset--font-family--serif );
font-size: clamp( 1.35rem, 2vw, 1.75rem );
letter-spacing: -0.015em;
line-height: 1.05;
}
.cobell-ledger__note {
display: block;
margin-top: 0.5rem;
color: color-mix( in srgb, var( --wp--preset--color--forest ) 85%, transparent );
font-size: 0.75rem;
}
/* Print-style fineprint, centred under the ledger at the body measure — not a
left-aligned system notice. */
.cobell-ledger__footnote {
margin: 2.5rem auto 0;
max-width: 36rem;
color: color-mix( in srgb, var( --wp--preset--color--forest ) 60%, transparent );
font-size: 0.875rem;
font-style: italic;
line-height: 1.625;
text-align: center;
}
@media ( min-width: 48rem ) {
.cobell-ledger__footnote {
margin-top: 3rem;
}
}
/*
* The emphasised column. Live gives the value a reader is hunting for its own
* register — serif, terracotta, a step up from the quiet column beside it — so
* the row reads as a headline with supporting detail rather than four equal
* cells. Which column gets it is a field, because the two ledgers on this site
* do not agree on the answer.
*/
.cobell-ledger__table tbody td.cobell-ledger__accent {
color: var( --wp--preset--color--terracotta );
font-family: var( --wp--preset--font-family--serif );
font-size: clamp( 1.15rem, 1.6vw, 1.5rem );
letter-spacing: -0.01em;
line-height: 1.05;
}
/*
* Wide: real columns, generous gutters between them. The widths are the
* reference's 1.4fr 1fr 1fr 1.6fr, which is what stops the last column running
* to a single long line and the first one wrapping mid-phrase.
*
* 48rem, not the 52 this carried. Both ledgers on live switch at `md` — 768px —
* and 832 left a 64px band where the rows were stacked here and were a table
* there. It is easy to miss because it only shows on a tablet held one way up.
*
* The percentages are that `fr` ratio with the gutters folded in, and 28/20/20/32
* is not it. Live is a grid with `gap-x-10`, so its four tracks share what is
* left after three fixed 40px gaps, while a table cell under `table-layout:
* fixed` carries its gutter as padding *inside* its own declared width. So the
* cell that follows a gutter has to be a track plus that gutter, and the naive
* four percentages put the first column 51px wide of live's and shifted every
* date after it.
*
* Solved at the 64rem measure the table holds from 1224px up: f = (1024 - 120)/5
* = 180.8, so the tracks are 253.12 / 180.8 / 180.8 / 289.28 and each of the last
* three gains 40 — 253.12 / 220.8 / 220.8 / 329.28, which is what the four
* percentages below are.
*
* Two things that each make this read as the rule not applying at all. A
* percentage inside `calc()` is ignored for a table column, so the width-agnostic
* form of this falls back to an equal share on every cell. And the theme has no
* global `box-sizing`, so without the reset below these are *content* widths, the
* three gutters are added on top, the declared total overflows the table by 120px,
* and the browser scales all four down proportionally — 253 arrives as 227, which
* looks like a wrong percentage rather than a wrong box model.
*
* So one solved set, and it is exact from 1224px up, where the table holds 64rem.
* Below that the table narrows and a fixed gutter takes a larger share of it, so
* the split drifts: measured against live, the second column starts 6px late at
* 960, 9px at 860 and 12px at 768, and the fourth within a pixel throughout. The
* table's own width agrees with live's exactly at every one of those — 656 / 748 /
* 848 — so this is the only thing left in the band, and a second set solved at 768
* would only move the worst case into the middle of it. `scratchpad/tblwidth.mjs`
* is that measurement.
*/
@media ( min-width: 48rem ) {
.cobell-ledger__table {
table-layout: fixed;
}
.cobell-ledger__table thead th {
box-sizing: border-box;
}
.cobell-ledger__table thead th:nth-child( 1 ) {
width: 24.72%;
}
.cobell-ledger__table thead th:nth-child( 2 ),
.cobell-ledger__table thead th:nth-child( 3 ) {
width: 21.56%;
}
.cobell-ledger__table thead th:nth-child( 4 ) {
width: 32.16%;
}
.cobell-ledger__table th + th,
.cobell-ledger__table th + td,
.cobell-ledger__table td + td {
padding-left: 2.5rem;
}
}
/* Quiet columns at 75%, which is what live sets on both of them and on the
header intro above. This was 85% and only inside the wide query, so the
stacked width inherited full-strength forest — the reported "text is darker
than production" is these three cells and the column headings above them. */
.cobell-ledger__table tbody td {
color: color-mix( in srgb, var( --wp--preset--color--forest ) 75%, transparent );
}
/* The opening date is the quiet column beside the emphasised one — live's
`leading-snug`, a register tighter than the body's own leading, at every
width. */
.cobell-ledger__table tbody td:nth-child( 2 ) {
line-height: 1.375;
}
/* The programme list is the 15px step, not the body size — the same half-step
live takes on every multi-line supporting column. See the mobile-register
note: it is invisible at 1440 and decides where the list wraps below it. */
.cobell-ledger__table tbody td:nth-child( 4 ) {
font-size: 0.9375rem;
line-height: 1.6;
}
/*
* Narrow: stack each row, label every cell from its column heading.
*
* The row's rhythm is live's `py-8` with `gap-y-4` between the four children,
* and a stacked row has no container of its own to carry either — the `
`
* stays `display: table-row` deliberately, because changing a table part's
* display drops its role from the accessibility tree and the header
* associations are the reason this reflows as a table rather than as cards. So
* the row's approach lives on its `| `, the gaps on each following cell, and
* the run-out on the last one.
*
* The micro-label sits *above* its value, which is live's arrangement and was
* already the dial register's. It was an 8rem inline column here, so the value
* started a third of the way across the screen and the longest one wrapped
* against a 128px indent.
*/
@media ( max-width: 47.999rem ) {
.cobell-ledger__table thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset( 50% );
white-space: nowrap;
}
.cobell-ledger__table tbody th {
display: block;
padding-block: 2rem 1rem;
}
.cobell-ledger__table tbody td {
display: flex;
flex-wrap: wrap;
gap: 0.25rem 1rem;
padding-block: 0;
border-top: 0;
}
.cobell-ledger__table tbody td + td {
padding-top: 1rem;
}
.cobell-ledger__table tbody td:last-child {
padding-bottom: 2rem;
}
/*
* Live's `mt-1` between the label and its value is 4px and the flex row-gap
* above already is it — a `margin-bottom` here as well made it 8px on every
* cell of every row, 32px on the section.
*
* The leading is declared rather than inherited because it is inherited from
* the *cell*, and the three cells disagree: the emphasised column is on 1.05
* and the programme list on 1.6, so the same 10px label stood 10.5px tall in
* one row and 16px in the next. Live sets every one of them at 15.
*/
.cobell-ledger__table tbody td::before {
content: attr( data-label );
flex: 0 0 100%;
color: color-mix( in srgb, var( --wp--preset--color--forest ) 70%, transparent );
font-size: var( --wp--custom--eyebrow-size );
font-weight: 600;
letter-spacing: 0.4em;
line-height: 1.5;
text-transform: uppercase;
}
/* The emphasised column's own label, terracotta like the value under it.
Keyed on the accent field rather than on a position, so it follows whichever
column the page names as the one a reader is hunting for. */
.cobell-ledger__table tbody td.cobell-ledger__accent::before {
color: color-mix( in srgb, var( --wp--preset--color--terracotta ) 85%, transparent );
}
}
/*
* Year dial. Everything in it except the four bands is decoration — the table
* beneath carries the data with real header associations and each of those parts
* is aria-hidden in the template — so no tick, month name, needle or callout has
* to clear a contrast ratio to be readable. The bands are buttons and are
* exposed; see the note beside `.cobell-ledger__arc` below.
*
* One thing it is easy to break: the viewBox is wider and shorter than the dial
* because the leader callouts hang outside the circle, so the svg needs
* `overflow: visible` or their outer ends are clipped.
*
* The callouts and the curved band names only fit past 80rem. Below that the
* whole wheel gives way to the ribbon strip, as the reference's does — an
* unlabelled wheel names nothing, and a key under it was standing in for
* callouts it could not replace.
*/
.cobell-ledger__dial {
display: grid;
justify-items: center;
}
.cobell-ledger__dial svg {
width: 100%;
height: auto;
overflow: visible;
}
.cobell-ledger__tick {
stroke: color-mix( in srgb, var( --wp--preset--color--forest ) 22%, transparent );
stroke-width: 1.5;
}
.cobell-ledger__month {
fill: color-mix( in srgb, var( --wp--preset--color--forest ) 45%, transparent );
font-family: var( --wp--preset--font-family--sans );
font-size: 12px;
font-weight: 500;
letter-spacing: 0.04em;
}
.cobell-ledger__month.is-current {
fill: color-mix( in srgb, var( --wp--preset--color--forest ) 90%, transparent );
font-weight: 600;
}
/* Cream between the bands, so the outermost edge feathers into the surface
rather than ending on a hard rule. */
.cobell-ledger__wedge {
stroke: var( --wp--preset--color--cream );
stroke-width: 1.5;
}
.cobell-ledger__rim {
fill: none;
stroke: color-mix( in srgb, var( --wp--preset--color--forest ) 15%, transparent );
stroke-width: 1.5;
}
/* The needle. Drawn before the wedges so it reads as a hand sweeping under
them rather than a line ruled across the face. */
.cobell-ledger__needle {
stroke: var( --wp--preset--color--forest-deep );
stroke-width: 2;
opacity: 0.78;
}
.cobell-ledger__pivot {
fill: color-mix( in srgb, var( --wp--preset--color--forest ) 55%, transparent );
font-family: var( --wp--preset--font-family--sans );
font-size: 13px;
font-weight: 500;
letter-spacing: 0.04em;
}
/* Names on the bands and the callouts around them. Hidden until there is room
for them; `fill` is set per arc in the template, since which ink clears the
band depends on which of the four fills it is sitting on. */
.cobell-ledger__arc-label,
.cobell-ledger__callout {
display: none;
}
.cobell-ledger__arc-label {
font-family: var( --wp--preset--font-family--sans );
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
pointer-events: none;
text-transform: uppercase;
}
.cobell-ledger__leader {
stroke-width: 1.5;
}
.cobell-ledger__badge {
fill: var( --wp--preset--color--forest );
}
/*
* The badge word arrives from Site Options as a phrase and is shouted here. It
* used to be stored uppercase, which meant the only way to reword it was to type
* capitals into a form field — and a field that has to be typed in a particular
* case is one an editor gets wrong.
*
* The rect behind it is sized in render.php from the same string. That does not
* make the default fit — "OPEN NOW" measures 79.4px inside a 64px pill here and
* on the deployed site, which draws the same two numbers — it means a *reworded*
* badge grows rather than breaking further out of a pill fixed at eight
* characters. Do not "correct" the 64; see the note in render.php.
*/
.cobell-ledger__badge-text {
fill: var( --wp--preset--color--cream );
font-family: var( --wp--preset--font-family--sans );
font-size: 9px;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
}
.cobell-ledger__callout-name {
fill: var( --wp--preset--color--forest );
font-family: var( --wp--preset--font-family--sans );
font-size: 13px;
font-weight: 700;
letter-spacing: -0.005em;
}
.cobell-ledger__callout-date {
fill: color-mix( in srgb, var( --wp--preset--color--forest ) 70%, transparent );
font-family: var( --wp--preset--font-family--sans );
font-size: 11.5px;
}
/*
* The wheel is the wide register and the strip below it is every other width.
*
* Both are in the document and one is display: none, which is deliberate rather
* than lazy — the choice has to be made before first paint or the reader watches
* one diagram replace the other, and a media query is the only thing that is
* settled that early. The cost is the strip's markup on a wide screen, which is
* four rows of empty buttons and no images.
*
* 80rem is the reference's `xl`. Below it the callouts have nowhere to reach and
* the wheel without its callouts names nothing.
*/
.cobell-ledger__dial {
display: none;
}
@media ( min-width: 80rem ) {
.cobell-ledger__dial {
display: grid;
}
.cobell-ledger__dial svg {
max-width: 48.75rem;
}
.cobell-ledger__arc-label,
.cobell-ledger__callout {
display: inline;
}
.cobell-ledger__timeline {
display: none;
}
}
/*
* A band is a button now, so it needs the affordance and the focus ring a button
* needs. `outline` on an SVG group is drawn round the group's bounding box, which
* on an annular wedge is most of the dial — the ring goes on the wedge path
* itself, where it traces the shape the reader is actually choosing.
*/
.cobell-ledger__arc {
cursor: pointer;
}
.cobell-ledger__arc:focus {
outline: none;
}
.cobell-ledger__arc .cobell-ledger__wedge {
transition:
opacity 200ms ease-out,
filter 220ms ease-out,
stroke 180ms ease-out,
stroke-width 180ms ease-out;
}
/*
* A past window is **not** dimmed on the wheel, and that is a decision the
* reference states in as many words: "past windows on a recurring annual dial
* come back next cycle — dimming them to 0.32 was reading as faded brand palette
* overall."
*
* It is the four brand colours on a cream field and three of them are always in
* the past, so dimming turned deep teal into sage, rust into salmon and teal into
* pale blue and the diagram read as a washed-out version of itself rather than as
* a clock. Currency is carried by the needle and the OPEN NOW badge instead.
*
* The ribbon strip **does** dim its past bars to 0.32 — there the bars sit on a
* hairline that runs the whole year, so a quiet bar still reads as a window in its
* place. Do not reconcile the two; live does not.
*/
.cobell-ledger[data-window-active] .cobell-ledger__arc .cobell-ledger__wedge {
opacity: 0.7;
}
.cobell-ledger__arc.is-active .cobell-ledger__wedge {
opacity: 1;
stroke: var( --wp--preset--color--forest-deep );
stroke-width: 2.5;
filter:
brightness( 1.08 ) saturate( 1.15 )
drop-shadow( 0 6px 14px rgba( 20, 32, 26, 0.18 ) );
}
.cobell-ledger__arc:focus-visible .cobell-ledger__wedge {
stroke: var( --wp--preset--color--forest-deep );
stroke-width: 3;
}
/*
* The ribbon register — the reference's ApplicationWindowsTimeline.
*
* Every value here is measured off live rather than taken from a spacing token:
* `--wp--preset--spacing--*` carries WordPress's generated scale and not the one
* theme.json declares, so a name here would mean something other than it says.
*/
.cobell-ledger__timeline {
margin-bottom: var( --wp--preset--spacing--60 );
}
.cobell-ledger__legend {
display: grid;
grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
gap: 0.75rem 1rem;
max-width: 48rem;
margin: 0 auto 1.5rem;
padding-inline: 0.25rem;
list-style: none;
}
@media ( min-width: 40rem ) {
.cobell-ledger__legend {
grid-template-columns: repeat( 4, minmax( 0, 1fr ) );
column-gap: 0.75rem;
}
}
.cobell-ledger__chip {
display: flex;
align-items: center;
gap: 0.625rem;
width: 100%;
padding: 0.375rem 0.5rem;
border: 1px solid transparent;
border-radius: 0.25rem;
background: none;
cursor: pointer;
text-align: left;
transition: background-color 200ms ease-out;
}
@media ( hover: hover ) and ( pointer: fine ) {
.cobell-ledger__chip:hover {
background-color: color-mix( in srgb, var( --wp--preset--color--forest ) 5%, transparent );
}
}
.cobell-ledger__chip-swatch {
flex: 0 0 auto;
width: 0.625rem;
height: 0.625rem;
border-radius: 0.25rem;
background-color: var( --cobell-chip-fill );
transition: transform 200ms ease-out, box-shadow 200ms ease-out;
}
.cobell-ledger__chip-label {
color: var( --wp--preset--color--forest );
font-family: var( --wp--preset--font-family--sans );
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.22em;
text-transform: uppercase;
}
@media ( min-width: 40rem ) {
.cobell-ledger__chip-label {
font-size: 0.65625rem;
}
}
.cobell-ledger__strip {
position: relative;
margin-inline: -0.5rem;
}
@media ( min-width: 40rem ) {
.cobell-ledger__strip {
margin-inline: 0;
}
}
/* The overflow cue. pointer-events: none is load-bearing — a window reaching
the edge of the year has a ribbon under these, and a fade that took the tap
would make December unreachable. */
.cobell-ledger__fade {
position: absolute;
inset-block: 0;
z-index: 1;
width: 1.5rem;
pointer-events: none;
}
.cobell-ledger__fade--start {
left: 0;
background-image: linear-gradient( to right, var( --wp--preset--color--cream ), transparent );
}
.cobell-ledger__fade--end {
right: 0;
background-image: linear-gradient( to left, var( --wp--preset--color--cream ), transparent );
}
@media ( min-width: 40rem ) {
.cobell-ledger__fade {
width: 2rem;
}
}
.cobell-ledger__scroller {
overflow-x: auto;
overflow-y: hidden;
padding: 0.5rem 0.5rem 1rem;
scroll-snap-type: x mandatory;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
}
.cobell-ledger__scroller::-webkit-scrollbar {
display: none;
}
@media ( min-width: 40rem ) {
.cobell-ledger__scroller {
padding-inline: 1rem;
}
}
/*
* The strip is twice the viewport on a phone, half again on a tablet, and its
* own width once there is room — which is what makes a month wide enough to
* carry a name at every size. 720px is the floor: below it the twelve columns
* stop being distinguishable however much of them is on screen.
*/
.cobell-ledger__track {
position: relative;
width: 200%;
min-width: 720px;
}
@media ( min-width: 40rem ) {
.cobell-ledger__track {
width: 150%;
}
}
@media ( min-width: 64rem ) {
.cobell-ledger__track {
width: 100%;
}
}
.cobell-ledger__axis {
display: grid;
grid-template-columns: repeat( 12, minmax( 0, 1fr ) );
margin: 0;
padding: 0;
list-style: none;
}
.cobell-ledger__axis-month {
position: relative;
padding-bottom: 0.5rem;
scroll-snap-align: start;
}
/* A tick at the start of every month, and one more closing the year — that last
one is the ::after on the twelfth, so the count comes out of the markup rather
than needing a thirteenth empty column. */
.cobell-ledger__axis-month::before,
.cobell-ledger__axis-month:last-child::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 1px;
height: 0.5rem;
background-color: color-mix( in srgb, var( --wp--preset--color--forest ) 25%, transparent );
}
.cobell-ledger__axis-month:last-child::after {
right: 0;
left: auto;
}
.cobell-ledger__axis-label {
display: block;
padding-left: 0.5rem;
color: color-mix( in srgb, var( --wp--preset--color--forest ) 55%, transparent );
font-family: var( --wp--preset--font-family--sans );
font-size: 0.625rem;
font-weight: 600;
letter-spacing: 0.28em;
text-transform: uppercase;
}
.cobell-ledger__axis-month.is-current .cobell-ledger__axis-label {
color: var( --wp--preset--color--forest-deep );
}
.cobell-ledger__ribbons {
display: flex;
flex-direction: column;
gap: 0.75rem;
margin-top: 0.75rem;
padding-bottom: 0.25rem;
}
.cobell-ledger__ribbon-row {
position: relative;
height: 3.5rem;
}
@media ( min-width: 40rem ) {
.cobell-ledger__ribbon-row {
height: 3rem;
}
}
.cobell-ledger__ribbon-rule {
position: absolute;
inset-inline: 0;
top: 50%;
height: 1px;
transform: translateY( -50% );
background-color: color-mix( in srgb, var( --wp--preset--color--forest ) 10%, transparent );
}
.cobell-ledger__ribbon {
position: absolute;
top: 50%;
left: var( --cobell-ribbon-left );
width: var( --cobell-ribbon-width );
min-width: 14px;
height: 36px;
padding: 0;
border: 0;
border-radius: 8px;
transform: translateY( -50% );
background-color: var( --cobell-ribbon-fill );
cursor: pointer;
transition:
opacity 200ms ease-out,
filter 200ms ease-out,
transform 200ms ease-out,
box-shadow 200ms ease-out;
}
/* The two halves of a window that crosses the new year. The joined edge is
square so the pair reads as one window running off the strip and back on. */
.cobell-ledger__ribbon--head {
border-start-end-radius: 0;
border-end-end-radius: 0;
}
.cobell-ledger__ribbon--tail {
border-start-start-radius: 0;
border-end-start-radius: 0;
}
.cobell-ledger__ribbon.is-past {
opacity: 0.32;
}
/*
* The cross-highlight. Hovering a bar, a band, or a legend chip lifts that
* window and quiets the others, so four windows can be read one at a time.
*
* The state is published by script on the **block root** because none of the
* three triggers are siblings — a chip, a bar and an SVG band sit in three
* different subtrees and no combinator reaches between them.
*/
.cobell-ledger[data-window-active] .cobell-ledger__ribbon:not( .is-past ) {
opacity: 0.7;
}
.cobell-ledger__ribbon.is-active {
opacity: 1;
transform: translateY( -50% ) scale( 1.04 );
filter: brightness( 1.06 ) saturate( 1.12 );
box-shadow: 0 6px 18px rgba( 20, 32, 26, 0.18 );
}
.cobell-ledger__chip.is-active .cobell-ledger__chip-swatch {
transform: scale( 1.1 );
box-shadow: 0 0 0 3px color-mix( in srgb, var( --cobell-chip-fill, transparent ) 20%, transparent );
}
.cobell-ledger__ribbon-label {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.5rem;
padding-inline: 0.75rem;
color: var( --cobell-ribbon-ink );
font-family: var( --wp--preset--font-family--sans );
font-size: 0.65625rem;
font-weight: 700;
letter-spacing: 0.14em;
text-transform: uppercase;
pointer-events: none;
}
.cobell-ledger__ribbon-name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.cobell-ledger__ribbon-pill {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
padding: 0.125rem 0.375rem;
border-radius: 9999px;
background-color: var( --cobell-ribbon-pill );
color: var( --cobell-ribbon-ink );
font-size: 0.53125rem;
font-weight: 700;
letter-spacing: 0.18em;
}
/*
* "You are here". Absolutely positioned at today's fractional position in the
* year, over the ribbons rather than under them — it is the one mark on the
* strip that answers a question the table cannot.
*/
.cobell-ledger__today {
position: absolute;
inset-block: 0;
left: var( --cobell-timeline-today );
z-index: 2;
width: 0;
pointer-events: none;
}
.cobell-ledger__today::before {
content: "";
position: absolute;
inset-block: 0;
left: 0;
width: 1px;
background-color: var( --wp--preset--color--forest-deep );
}
.cobell-ledger__today-label {
position: absolute;
top: 0;
padding: 0.125rem 0.375rem;
border-radius: 0.25rem;
transform: translateX( -50% );
background-color: var( --wp--preset--color--forest-deep );
color: var( --wp--preset--color--cream );
font-family: var( --wp--preset--font-family--sans );
font-size: 0.53125rem;
font-weight: 700;
letter-spacing: 0.22em;
text-transform: uppercase;
white-space: nowrap;
}
/* The reference breathes this line rather than blinking it. Pure CSS and behind
the reduced-motion gate, so nothing here is ever the reason a mark is
invisible — the guide sits at full opacity when motion is off. */
@media ( prefers-reduced-motion: no-preference ) {
.cobell-ledger__today {
animation: cobell-ledger-guide 3.6s ease-in-out infinite;
}
}
@keyframes cobell-ledger-guide {
0%,
100% {
opacity: 0.55;
}
50% {
opacity: 1;
}
}
/* The scrub hint, for the widths where the strip actually overflows. Past 64rem
the whole year is on screen and there is nothing to swipe to. */
.cobell-ledger__hint {
margin: 0.75rem 0 0;
padding-inline: 0.5rem;
color: color-mix( in srgb, var( --wp--preset--color--forest ) 55%, transparent );
font-family: var( --wp--preset--font-family--serif );
font-size: 0.78125rem;
font-style: italic;
text-align: center;
}
@media ( min-width: 64rem ) {
.cobell-ledger__hint {
display: none;
}
}
/* ------------------------------------------------------------------------
* The window detail card
* ------------------------------------------------------------------------
*
* A native |