/* ═══════════════════════════════════════════════════════════════════ LawWiser lab. Overrides only. Loaded after story.css. The home page keeps every section, every word and every font it already has. What changes is how the levels separate from one another, which is the thing The New Yorker does well. NO NEW TYPEFACE. Newsreader, Inter and IBM Plex Mono, as chosen. ═══════════════════════════════════════════════════════════════════ */ /* ── 1. CENTRED MASTHEAD ─────────────────────────────────────────── Logo centred, nav on its own rule beneath it. A masthead, not an app bar. This is the one piece of layout taken from them. ─────── */ .bar.mastc .mrow{display:flex;align-items:center;justify-content:center; position:relative;padding:24px 0 20px;height:auto} .bar.mastc .brand{flex-shrink:0} .bar.mastc .brand .lwlogo svg{width:auto} .bar.mastc .mside{position:absolute;right:0;top:50%;transform:translateY(-50%); display:flex;align-items:center;gap:var(--s3)} .bar.mastc .mside .btn{padding:10px 18px;font-size:12.5px} .bar nav.main,.navbar nav.main{display:flex;justify-content:center;flex-wrap:wrap; border-top:1px solid var(--line);height:auto} .bar .nitem>a,.navbar .nitem>a{padding:0 16px;height:46px} .bar .dd,.navbar .dd{left:50%;transform:translateX(-50%) translateY(6px)} .bar .nitem:hover .dd,.navbar .nitem:hover .dd{transform:translateX(-50%) translateY(0)} .bar.mastc .mtoggle{position:absolute;left:0;top:50%;transform:translateY(-50%)} /* ── 2. HEADLINES AT REGULAR WEIGHT ──────────────────────────────── Their headlines are weight 400, not bold. Bold reads as web; a regular-weight serif at size reads as print. Same face as before, one weight lighter, slightly larger to hold the same authority. ── */ .hero h1,.shead h2,.leadhead,.show h2,.comm h2,.nlin h2{ font-weight:400; letter-spacing:-.012em; } .hero h1{font-size:clamp(40px,4.8vw,56px);line-height:1.06} .shead h2,.show h2,.comm h2,.nlin h2{font-size:clamp(27px,3vw,34px);line-height:1.14} /* ── 3. THE LADDER: STANDFIRST LEAVES ROMAN, TAKES ITALIC ────────── The real problem was that a heading and the line under it were the same face, same weight and the same colour, so they read as one block. They are now separated three ways at once: italic, one step down in colour, and a shorter measure. No extra font needed. ──── */ .hero .lede,.shead .sub,.show .sf,.nlin .sf,.standfirst{ font-style:italic; color:var(--text-soft); max-width:54ch; } .hero .lede{color:rgba(255,255,255,.7)} .s-dark .shead .sub,.s-deep .shead .sub{color:rgba(255,255,255,.62)} /* kicker gains air and drops a touch in size, so it sits above rather than competes */ .kick{font-size:11px;letter-spacing:.16em} /* ── 4. RULES INSTEAD OF GAPS ────────────────────────────────────── Their columns are divided by hairlines, not by empty space, so a grid reads as a page rather than as floating cards. ───────────── */ .agrid,.subgrid,.streams,.doors{position:relative} .agrid{gap:0;border-top:2px solid var(--ink)} .agrid .acard{padding:var(--s4) var(--s4) var(--s5);border-left:1px solid var(--line)} .agrid .acard:first-child{border-left:none;padding-left:0} .agrid .acard:last-child{padding-right:0} /* The original card design, unchanged. One fix only: the first card had its left padding removed so it would sit flush with the container edge. That made it 233px against 216px, and because the still is a fixed ratio a wider card produced a taller one, dropping everything below it by 13px. The border is still removed from the first card; the padding is not. */ .streams{gap:0;border-top:2px solid var(--ink)} .streams .stream{padding:var(--s4) var(--s3) var(--s5);border-left:1px solid var(--line)} .streams .stream:first-child{border-left:none} .subgrid{gap:0;border-top:1px solid var(--line);border-left:1px solid var(--line)} .subgrid .subcard{border-right:1px solid var(--line);border-bottom:1px solid var(--line); margin:0;padding:var(--s4)} /* ── 5. THE FLAGSHIP, AS A FULL PAGE ─────────────────────────────── This is a show LawWiser produces, not an item in a feed. It now holds a whole screen on its own: no border, because the dark band is already the container, and type at a scale that says the thing matters. The section fills the viewport less the header, so it can be read without scrolling inside it. ─────────────────────────── */ section:has(.show){padding:var(--s6) 0!important} .show{ display:grid;grid-template-columns:0.88fr 1.5fr;gap:var(--s6);align-items:center; padding:var(--s7) var(--s6);text-align:center; min-height:calc(100vh - 113px - 96px); } .show .copy{max-width:46ch;margin:0 auto} .show .kick{margin-bottom:var(--s3);font-size:12px;letter-spacing:.18em} .show h2{margin:0 auto var(--s4);max-width:13ch; font-size:clamp(38px,4.4vw,58px);line-height:1.04;letter-spacing:-.014em} .show .sf{margin:0 auto var(--s5);text-align:center;max-width:40ch; font-size:clamp(17px,1.5vw,20px);line-height:1.55} .show .acts{justify-content:center;margin-top:0!important;margin-bottom:0} .show .btn{padding:15px 30px;font-size:13.5px} .show .vis{max-width:none} .show .eps{margin-top:var(--s5);border-top:1px solid rgba(255,255,255,.14); padding-top:var(--s4);justify-content:center} /* ── 6. LESS EMPTY GROUND ────────────────────────────────────────── Sections tightened by roughly a fifth. Their pages are dense without being cramped; ours were leaving air that said nothing. ─ */ :root{--gap:clamp(46px,4.6vw,68px)} .shead{margin-bottom:var(--s5)} .hero.tall .in{padding:76px 0 68px} /* ── 7. BYLINE, in the sans, so it never reads as body copy ─────── */ .acard .mt,.alist .t,.dlist .k{font-family:var(--fb);font-weight:600; font-size:11.5px;letter-spacing:.02em;color:var(--ink)} @media(max-width:1080px){ .bar nav.main,.navbar nav.main{display:none} .bar.mastc .mside .btn{display:none} } @media(max-width:900px){ .agrid,.streams{border-top:none} .agrid .acard,.streams .stream{border-left:none;border-top:1px solid var(--line);padding-left:0;padding-right:0} .show{padding:var(--s5) var(--s4)} } /* ── 8. EVERY SECTION HEAD CENTRED ───────────────────────────────── The flagship panel read well centred, so the same treatment now runs across every section head. The head centres; the content beneath it stays ranged left, because a grid of records reads badly centred. The exit link moves under the heading. ────────── */ .shead{display:block;text-align:center;margin-bottom:var(--s5)} .sh-l{max-width:none;margin:0 auto} .sh-l .kick{margin-bottom:var(--s2)} .sh-l h2{margin:0 auto var(--s2);max-width:24ch} .shead .sub{margin:0 auto;max-width:56ch} .shead .more{display:inline-block;align-self:auto;margin-top:var(--s3);padding-bottom:0} .subsmore{justify-content:center;text-align:center} .leadhead{margin-left:auto;margin-right:auto;text-align:center;max-width:24ch} /* ── 9. THE FLAGSHIP PANEL, BROUGHT BACK TO ONE SCREEN ───────────── Centring the panel had stretched the still to the full container, which at 16 by 9 made it 754px tall and pushed the section past a single screen. The still is now capped, and the panel breathes without running off the top or the bottom. ───────────────────── */ /* ── 10. THE TWO BUTTONS ─────────────────────────────────────────── They were touching, and sitting directly on the still. They now have a gap between them and clear ground beneath. ────────────── */ .acts{display:flex;gap:var(--s3);flex-wrap:wrap} .btn{padding:13px 26px} @media(max-width:900px){ .show{grid-template-columns:1fr;gap:var(--s5);padding:var(--s6) 0;min-height:0} .show .copy{max-width:none} .show h2{font-size:clamp(30px,7vw,40px)} } /* the flagship section sits inside one screen, allowing for the sticky header */ section:has(.show){padding-top:var(--s5);padding-bottom:var(--s5)} /* ── 11. THE PHOTOGRAPH SITS BEHIND THE HERO ─────────────────────── Full bleed, under the brand gradient, not inside a panel. Three layers in order: photograph, gradient, words. The frame is bright, so the wash has to do real work. It is heavy on the left where the headline sits and lifts towards the right so the room is still legible. Measured, not guessed. ─────────────── */ .hero.photo{background:var(--ink-deep)} .hero.photo .layer{position:absolute;inset:0;z-index:1;overflow:hidden} .hero.photo .layer img{width:100%;height:100%;object-fit:cover;object-position:64% 46%; display:block;filter:grayscale(.62) contrast(1.08) brightness(.72)} .hero.photo .scrim{z-index:2;background: linear-gradient(90deg, color-mix(in srgb,var(--ink-deep) 96%,transparent) 0%, color-mix(in srgb,var(--ink-deep) 92%,transparent) 40%, color-mix(in srgb,var(--ink-deep) 62%,transparent) 72%, color-mix(in srgb,var(--ink-deep) 42%,transparent) 100%), radial-gradient(74% 118% at 88% 2%, color-mix(in srgb,var(--brass-dark) 24%,transparent) 0%, transparent 62%), linear-gradient(180deg, transparent 55%, color-mix(in srgb,var(--ink-deep) 62%,transparent) 100%)} .hero.photo .in,.hero.photo .hstrip{position:relative;z-index:3} @media(max-width:900px){ /* the words cover the frame on a narrow screen, so darken through */ .hero.photo .layer img{object-position:62% 45%} .hero.photo .scrim{background: linear-gradient(180deg, color-mix(in srgb,var(--ink-deep) 88%,transparent) 0%, color-mix(in srgb,var(--ink-deep) 96%,transparent) 70%), radial-gradient(90% 60% at 80% 0%,color-mix(in srgb,var(--brass-dark) 20%,transparent) 0%,transparent 60%)} } /* ── 12. SECTION HEADINGS HOLD ONE LINE ──────────────────────────── "Pick a subject. Get every format on it." was breaking across two lines. The cap that caused it is lifted, and the size steps down a little at the widths where it would still wrap. ───────────────── */ .sh-l h2{max-width:none} .shead h2{font-size:clamp(24px,2.5vw,31px);text-wrap:balance} @media(min-width:1200px){.shead h2{white-space:nowrap}} /* ── 13. THE FLAGSHIP STILL ──────────────────────────────────────── A photograph rather than generated art, with the play control and the running time set over it rather than underneath. ─────────── */ .showpic{position:relative;margin:0;overflow:hidden;background:var(--ink-deep);display:block} .showpic img{width:100%;height:auto;display:block; filter:grayscale(.58) contrast(1.06) brightness(.66)} .showpic .pl{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:64px;height:64px;border-radius:50%;border:2px solid rgba(255,255,255,.92); background:rgba(0,0,0,.22);z-index:2;display:block} .showpic .pl::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%); border-left:17px solid #fff;border-top:11px solid transparent;border-bottom:11px solid transparent} .showpic .lb{position:absolute;left:16px;bottom:14px;z-index:2;font-family:var(--fm);font-size:10px; letter-spacing:.1em;text-transform:uppercase;color:rgba(255,255,255,.88)} .showpic .dur{position:absolute;right:14px;bottom:14px;z-index:2;font-family:var(--fm);font-size:10px; color:#fff;background:rgba(0,0,0,.5);padding:3px 7px} .showpic:hover img{filter:grayscale(.42) contrast(1.06) brightness(.76)} .showpic .pl,.showpic img{transition:.3s ease} .showpic:hover .pl{background:rgba(0,0,0,.36);transform:translate(-50%,-50%) scale(1.06)} /* ── 14. THE HERO: WORDS LEFT, FIGURES RIGHT, FULL HEIGHT ────────── The left column was carrying the kicker, the headline, the standfirst and three figures, which made it read as one long block of text against an empty right half. The figures move across, so each side has one job: the left says what LawWiser is, the right says how much of it there is. The hero also now holds the whole screen, so the three ways in begin below the fold rather than crowding it. ────────────────── */ /* the hero sizes to its content again, as it did before */ .hero.tall{min-height:0} .hero.tall .in{ display:grid; /* single column now: the second one existed only to seat the figures, and with those gone it was still boxing the copy to 787px while 488px of it sat empty. */ grid-template-columns:1fr; align-items:center; padding:76px 0 68px; width:100%; } .hero.tall .in > .kick, .hero.tall .in > h1, .hero.tall .in > .lede{grid-column:1} /* the strip runs the full width beneath both columns, and sits at the foot of the screen rather than in the middle of it */ /* the figures now sit over the lighter half of the frame, so that half of the wash is brought back down to keep them legible */ /* Lightened: the veil ran 95/90/80/72 across and put another 66% over the bottom, which crushed the whole photograph and made the page read dark. The left stays heavy because the headline sits on it; the right, where there is no type, opens up by more than half. */ .hero.photo .scrim{background: linear-gradient(90deg, color-mix(in srgb,var(--ink-deep) 88%,transparent) 0%, color-mix(in srgb,var(--ink-deep) 78%,transparent) 38%, color-mix(in srgb,var(--ink-deep) 50%,transparent) 62%, color-mix(in srgb,var(--ink-deep) 30%,transparent) 100%), radial-gradient(74% 118% at 88% 2%, color-mix(in srgb,var(--brass-dark) 16%,transparent) 0%, transparent 62%), linear-gradient(180deg, transparent 58%, color-mix(in srgb,var(--ink-deep) 42%,transparent) 100%)} @media(max-width:980px){ .hero.tall{min-height:0} .hero.tall .in{grid-template-columns:1fr;row-gap:var(--s5)} } /* ── 15. A LAMP OVER THE FLAGSHIP ────────────────────────────────── The first version, restored. Soft radial layers rather than a cone. The conic build read as a disc hanging in the air; this reads as a lamp, which is what it is. Three layers, all confined to the left 40 percent so nothing reaches the film: the source a tight warm spot where a fitting would hang the beam a wide cone opening downward from above the frame the pool a faint brass wash where the light lands, over the title Opacities deliberately low. A reading lamp over a masthead, not a stage light. ─────────────────────────────────────────────────── */ .show{position:relative;isolation:isolate} .show > *{position:relative;z-index:1} .show::before{ content:"";position:absolute;z-index:0;pointer-events:none; top:0;left:0;width:40%;height:100%; background: /* the pool of light where it lands, sitting over the title */ radial-gradient(ellipse 46% 30% at 46% 34%, color-mix(in srgb,var(--brass) 12%,transparent) 0%, transparent 70%), /* the beam, opening downward from above the frame */ radial-gradient(ellipse 34% 78% at 46% -14%, rgba(255,250,242,.13) 0%, rgba(255,250,242,.05) 42%, transparent 72%), /* the source, tight and warm */ radial-gradient(ellipse 9% 12% at 46% -3%, rgba(255,246,232,.30) 0%, transparent 72%); } /* a hairline of spill along the very top, so the light reads as coming from a fitting rather than from nowhere */ .show::after{ content:"";position:absolute;z-index:0;pointer-events:none; top:0;left:calc(18% - 90px);width:180px;height:2px; background:linear-gradient(90deg,transparent,rgba(255,246,232,.42),transparent); } @media(max-width:900px){ .show::before{width:100%} .show::after{left:calc(50% - 70px);width:140px} } /* the one word set apart, the same brass the hero uses for "who practice it". Specificity has to beat .s-dark h2, which forces every heading on a dark surface to white. */ .s-dark .show h2 em,.show h2 em{font-style:italic;font-weight:400;color:var(--brass)} /* --------------------------------------------------------------- Geometric grounds. Applied to alternating sections so the scroll breathes: one plain band, one with geometry. It falls on every s-paper section and never on s-tint, so the geometry reads as a property of the paper rather than decoration laid on top, and reinforces the surface alternation already in the design. .geo is the scaffold -- stacking, masking, keeping content clear. The motif is a separate modifier, so swapping one section's texture is a one-word change in lab.php: .g-rules vertical rules (deals ledger) .g-grid square grid (five subjects) .g-diag diagonal hatch (analysis) All three are INK lines, correct for the light bands they sit on. On s-dark or s-deep they would vanish and need a white variant. Opacity is tuned per motif, not shared: a grid lays down twice the line length of rules at the same pitch, and a 135deg hatch crosses more of the band again, so equal alpha would not read as equal weight. The numbers below are set to match perceived density, not to match each other. --------------------------------------------------------------- */ section.geo{position:relative;isolation:isolate;overflow:hidden; --geoline:color-mix(in srgb,var(--text) 6%,transparent)} section.geo > *{position:relative;z-index:1} section.geo::before{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 72%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 14%,#000 72%,transparent 100%); } /* One axis at 64px. */ section.geo.g-rules::before{ background:repeating-linear-gradient(90deg,var(--geoline) 0 1px,transparent 1px 64px); } /* Two axes at 64px. Same pitch as the rules, lower alpha -- twice the line length in the same area. */ section.geo.g-grid{--geoline:color-mix(in srgb,var(--text) 4.5%,transparent)} section.geo.g-grid::before{ background: repeating-linear-gradient(90deg,var(--geoline) 0 1px,transparent 1px 64px), repeating-linear-gradient(0deg, var(--geoline) 0 1px,transparent 1px 64px); } /* 135deg, opened to 44px. A diagonal crosses more of the band than a vertical of the same pitch, and antialiasing softens each line, so this runs wider apart and slightly stronger per line. */ /* Broad columns rather than hairlines -- the site's m-cols motif, made for a light ground. A 4px band covers four times the area of a 1px line, so the alpha drops hard: at hairline strength these would read as stripes, not texture. 56px pitch echoes the three-column card grid this section sits on without trying to align to it. */ section.geo.g-cols{--geoline:color-mix(in srgb,var(--text) 2.1%,transparent)} section.geo.g-cols::before{ background:repeating-linear-gradient(90deg,var(--geoline) 0 4px,transparent 4px 56px); } /* A dot field. The only motif on the site that is not made of lines, so it is deliberately reserved for the one band it sits on. Dots cover a fraction of the area a hairline grid does at the same pitch, so the alpha runs roughly twice the line motifs to read at the same weight. 34px pitch keeps it clearly finer than the 64px line grids. */ section.geo.g-dots{--geoline:color-mix(in srgb,var(--text) 9%,transparent)} section.geo.g-dots::before{ background:radial-gradient(circle,var(--geoline) 1.4px,transparent 1.5px); background-size:34px 34px; } /* Concentric rings off the bottom-right corner. No longer used: the testimonial band it was built for now carries .g-dots. Kept because it is the only motif with a focal point, should a band ever want one. Radii in px, not %, so each ring is a true hairline regardless of how tall the section runs -- a percentage band scales with the gradient's own radius and would thicken on a tall band. Only four lines cross the field, so this carries a slightly stronger alpha than the repeating motifs. */ section.geo.g-arcs{--geoline:color-mix(in srgb,var(--text) 7.5%,transparent)} section.geo.g-arcs::before{ background: radial-gradient(circle at 86% 112%,transparent 0 320px,var(--geoline) 320px 321px,transparent 321px), radial-gradient(circle at 86% 112%,transparent 0 500px,var(--geoline) 500px 501px,transparent 501px), radial-gradient(circle at 86% 112%,transparent 0 680px,var(--geoline) 680px 681px,transparent 681px), radial-gradient(circle at 86% 112%,transparent 0 860px,var(--geoline) 860px 861px,transparent 861px); } /* --------------------------------------------------------------- Keep the geometry out from under the content. .stream already does this -- it carries background:var(--paper), so the grid stops at the card and shows only in the gutters. The articles section had nothing opaque at any level, so the hatch ran straight through every title, date and link. Same treatment here: paper backing on the cards and the list rows, no border, so the backing is invisible and only the crossing stops. --------------------------------------------------------------- */ /* Each surface publishes its own ground so the backing is band-correct. This rule used to hardcode var(--paper), which is right on s-paper and wrong on s-tint -- a paper-coloured box on a tint band is visible. */ .s-paper{--ground:var(--paper)} .s-tint{--ground:var(--brass-tint)} section.geo .acard, section.geo .alist > a{background:var(--ground,var(--paper))} /* The rule is absolute: a line never crosses text. Anything that holds copy inside a geo section carries the ground, so the motif stops at the content edge and reads in the gutters and the breathing space. Backing the .sh-l group rather than the whole .shead keeps the box to the width of the words instead of the full band. */ section.geo .shead .sh-l, section.geo .shead > .more, section.geo .abhow > li, section.geo .roomlist > li > a, section.geo .dlist > a, section.geo .vstack, section.geo .trest > li > a, section.geo .tlead .bd{background:var(--ground,var(--paper))} /* Track and event records put running prose straight onto the ground, so it carries the ground now and the motif stays in the gutters. The plate is widened by its own padding and pulled back by the same amount, so the text does not move a pixel. The person cards" fix is at .glmp itself, further down: that rule carried `background:var(--tint)`, and --tint is not a token, so the whole declaration was dropped and the cards had no plate at all. */ section.geo .rich{background:var(--ground,var(--paper)); padding-inline:var(--s2);margin-inline:calc(var(--s2) * -1)} /* No negative margin here: the lede is centred with margin:0 auto, and a margin-inline of ours would outrank that and shove it left. */ section.geo .iulede{background:var(--ground,var(--paper));padding-inline:var(--s2)} /* The group is a block at full width; shrink it to the text so the motif is not cut across the whole band by an invisible box. */ section.geo .shead .sh-l{width:fit-content;max-width:100%;margin-inline:auto} /* --------------------------------------------------------------- Hero weights, brought onto the same rule as the rest of the page. Below the fold the system is consistent: Newsreader is ALWAYS 400 at display sizes (h1 56, h2 31), and 600 is kept for small sans utility labels only. The hero broke that in four places and was the only part of the page setting a serif semibold, which is why it read as heavier than everything under it. Nothing here changes size, colour or spacing — weight only. --------------------------------------------------------------- */ /* Figures: 600 -> 400. Matches h1/h2, and at 42px there is more than enough mass to carry the light weight. */ /* Figure labels: 500 -> 400, the same as body copy and .sub below. */ /* The three doors: 600 -> 400. These are the hero's display type, so they follow h2, not the small-label convention. */ .hero .hstrip h4{font-weight:400} /* Door links: 600 -> 500, level with .more in every section head. */ .hero .hstrip .go{font-weight:500} /* --------------------------------------------------------------- Hero: air. The headline was set at line-height 1.06 -- two 56px lines almost touching -- and the gaps around it (28 above, 31 below) were barely wider than the leading inside the lede itself. Nothing separated the three text blocks, so they read as one slab. Opening the headline's own leading first, then the gaps between blocks, then the container. Type sizes and measure are untouched. --------------------------------------------------------------- */ .hero.tall .in > h1{ line-height:1.14; /* was 1.06 */ margin-top:22px; /* was 16 -- kicker gets its own air */ margin-bottom:26px; /* was 18 -- headline separates from the lede */ } /* The lede stops crowding the doors below it. */ .hero.tall .in > .lede{margin-bottom:var(--s3)} /* And the whole thing sits off the masthead and the fold. Vertical only, deliberately: .in IS the .wrap, and the shorthand was wiping the 20px side gutter every other section gets, so on mobile the hero text ran into the screen edge while section text sat at 20. Setting the two axes separately leaves the gutter alone at every breakpoint. */ .hero.tall .in{padding-top:88px;padding-bottom:78px} /* The figures open on the same rhythm, so the right column does not end up tighter than the left. */ /* --- .dlist h4: 600 -> 500 as asked --- */ .dlist h4{font-weight:500} /* --------------------------------------------------------------- Hero, final pass. --------------------------------------------------------------- */ /* Figures invert: the number carries, the label accents. */ /* Headline drops a step. Newsreader 400 at 56px is a sturdy weight and was reading as bold against a page whose voice is light; 300 is the lightest cut in the family and is now requested from Google Fonts. The optical-size axis is already doing its part at this size. */ .hero.tall .in > h1{font-weight:300} /* Roman, not italic. Colour alone carries the accent now. */ .hero h1 em{font-style:normal} /* Hero lede only. The .sub in every section head below stays italic -- that contrast is what makes those heads read well and it was not part of the ask. */ .hero .lede{font-style:normal} /* The hero's .in IS its .wrap, and .hero .in zeroes the wrap's side padding. On desktop that is the intended look -- the hero sits at 50 while sections sit at 94, and the whole layout has been built around it. On mobile it left the text hard against the bezel. Restore the gutter at the two breakpoints where .wrap defines one, and nowhere else, so the desktop composition is untouched. */ @media(max-width:980px){ .hero.tall .in{padding-left:28px;padding-right:28px} } @media(max-width:620px){ .hero.tall .in{padding-left:20px;padding-right:20px} } /* --------------------------------------------------------------- The In-House Circle. This is the page's primary conversion and it was the smallest thing on it -- a ~200px strip on s-tint, the same surface three other sections already use. The two other CTA moments both change surface (the show goes s-dark, the newsletter s-deep); this one changed nothing, so the eye had no reason to stop. The BAND stays tint and the PANEL goes dark, rather than darkening the whole section. Section 9 is already s-deep, and a dark band here would run two dark bands together into the footer. A dark panel on a light band also makes the Circle read as a distinct object rather than just another stripe in the scroll. --------------------------------------------------------------- */ .comm{ background:var(--ink); border-color:transparent; border-left:4px solid var(--brass); padding:var(--s6) var(--s6) var(--s6) var(--s7); gap:var(--s7); } .comm .kick{color:var(--brass)} .comm h2{color:#fff} .comm p{color:rgba(255,255,255,.72)} /* The avatar rings were cut out of the paper ground. On the dark panel they have to be cut out of the panel instead. */ .comm .av span{border-color:var(--ink)} /* A dark button on a dark panel disappears. Inverting to brass, the same treatment .evcta already uses for this exact situation. */ .comm .btn.solid{background:var(--brass);color:var(--ink)} .comm .btn.solid:hover{background:#C79E63} /* Three benefits, lifted out of the grey sentence they were buried in. Same device as the hero doors and Watch/Read/Attend -- a numbered three, ruled off at the top. Third time the page uses it, which is the point: it should feel like the house pattern, not a new idea. */ /* Grid, not flex, so the benefits can span the whole panel. As a child of .c they stopped where the copy column stopped -- the rule died at 906 while the panel ran to 1298. The hero does the same thing: the three doors run the full width under the headline and the figures, they do not sit in one column. */ .comm{display:grid;grid-template-columns:1fr auto; column-gap:var(--s7);row-gap:0; /* the 64px gap set for the old flex row applied to BOTH axes, and stacked on the perks' own 32px margin -- 96px of dead space above the rule. */ align-items:center} .comm .c{grid-column:1;min-width:0} .comm .who{grid-column:2} .comm .perks{ grid-column:1 / -1; display:grid;grid-template-columns:repeat(3,1fr); gap:0;margin:var(--s5) 0 0;padding:0;list-style:none; border-top:1px solid rgba(255,255,255,.16); } .comm .perks li{ padding:var(--s4) var(--s4) 0 0; font-family:var(--fb);font-size:14px;font-weight:400; color:rgba(255,255,255,.92);line-height:1.4; } .comm .perks .n{ display:block;font-family:var(--fm);font-size:10.5px; letter-spacing:.14em;color:var(--brass);margin-bottom:7px; } @media(max-width:820px){ .comm{grid-template-columns:1fr;row-gap:var(--s5)} .comm .c,.comm .who{grid-column:1} .comm .perks{grid-template-columns:1fr} .comm .perks li{padding:var(--s3) 0 0;border-bottom:1px solid rgba(255,255,255,.10)} .comm .perks li:last-child{border-bottom:none} } /* --------------------------------------------------------------- The monthly brief -- the accent band before the footer. .nlf in story.css was always written for an accent surface: ink input text, dark placeholder, ink button. The dark-band version was inline overrides bolted on top. Those are gone, so the component's own treatment applies again and only the ground and the copy colours are set here. Everything is INK on brass, not white. White on #B08D57 measures 3.09:1 and fails body copy; ink measures 5.46:1 and passes. --------------------------------------------------------------- */ .s-brass{background:var(--brass)} .s-brass .kick{ color:color-mix(in srgb,var(--ink) 78%,var(--brass)); /* the kicker is an inline span and h2 carries no top margin, so the two were touching. Every other section head gets air here. */ display:block;margin-bottom:var(--s2); } .s-brass h2{color:var(--ink)} .s-brass .sf{ font-family:var(--fd);font-weight:400;font-size:20px;line-height:1.5; color:color-mix(in srgb,var(--ink) 88%,var(--brass)); margin-top:var(--s2);max-width:42ch; } /* The form was top-aligned when the copy block was three lines tall. With the contents list added the block runs ~420px, and holding the field at the top left a large void beneath it -- so it centres against the copy again. */ .nlin{align-items:center} .nlin .nlc{flex:1;min-width:320px} .nlf{align-self:center;margin-top:0} /* A little more body in the field than the .06 wash story.css uses -- on brass that was almost invisible. */ .nlf input{background:rgba(255,255,255,.22);border-color:rgba(26,29,35,.28)} .nlf input::placeholder{color:rgba(26,29,35,.58)} .nlf button{background:var(--ink);color:var(--paper)} .nlf button:hover{background:#000} /* --- Footer social: glyphs, not word marks ------------------------- */ .fbrand .soc{gap:var(--s3)} .fbrand .soc a{ display:inline-flex;align-items:center;justify-content:center; width:34px;height:34px;border-radius:50%; border:1px solid rgba(255,255,255,.16); color:var(--brass);transition:.15s; } .fbrand .soc a:hover{ color:var(--ink);background:var(--brass);border-color:var(--brass); } .fbrand .soc svg{display:block} /* --- The monthly brief: what is actually in it --------------------- */ /* Same move as the GC panel -- the three nouns were already in the standfirst ("the sessions, the analysis and the deals worth knowing about") and are lifted out rather than invented. Set as a ruled stack, not the numbered three-up, so it does not read as a repeat of the panel immediately above it. */ /* Grid so the contents can run the full width of the band. Inside .nlc they were boxed into a 42ch column, where three items side by side would have had ~130px each and "The deals worth knowing about" could not fit on one line. */ .nlin{display:grid;grid-template-columns:1fr auto;column-gap:var(--s7);row-gap:0;align-items:center} .nlin .nlc{grid-column:1;min-width:0} .nlin .nlf{grid-column:2} .nlwhat{ grid-column:1 / -1; list-style:none;margin:var(--s5) 0 0;padding:0; display:grid;grid-template-columns:repeat(3,1fr); border-top:1px solid rgba(26,29,35,.22); } .nlwhat li{ padding:var(--s3) var(--s4) 0 0; font-family:var(--fb);font-size:14.5px; color:color-mix(in srgb,var(--ink) 88%,var(--brass)); } /* a brass tick rather than a numeral -- the GC panel directly above already uses 01/02/03, and repeating it would read as a template */ .nlwhat li::before{ content:"";display:block;width:18px;height:2px; background:color-mix(in srgb,var(--ink) 55%,var(--brass)); margin-bottom:10px; } @media(max-width:820px){ .nlin{grid-template-columns:1fr;row-gap:var(--s5)} .nlin .nlc,.nlin .nlf{grid-column:1} .nlwhat{grid-template-columns:1fr} .nlwhat li{padding:var(--s2) 0 var(--s2)} } /* --- Arcs: keep clear of the copy --------------------------------- */ /* The rings were sweeping through the section head. The shared mask opens at 14%, which is fine for the repeating motifs but not for this one -- concentric rings read as a deliberate object, so one clipping a standfirst looks like a mistake rather than texture. Opening at 42% anchors them below the copy, where the only things they cross are the opaque cards and the gutters. */ section.geo.g-arcs::before{ -webkit-mask-image:linear-gradient(180deg,transparent 0,#000 42%,#000 88%,transparent 100%); mask-image:linear-gradient(180deg,transparent 0,#000 42%,#000 88%,transparent 100%); } /* The hero strip is two doors now that LW Journal has gone; story.css sets three columns, which would have left an empty third. */ /* --------------------------------------------------------------- Trending: a lead and a list. The text-only version read as blank because a ranked list of five headlines is all one weight -- nothing tells you where to start. A lead story with a picture and four smaller ones behind it is what a front page actually does, and it is a form this page does not have yet. Images are the generated art already used across the site, so the section is complete before a single photograph exists. --------------------------------------------------------------- */ .trend{ display:grid;grid-template-columns:1.06fr 1fr; column-gap:var(--s7);margin-top:var(--s5); } /* --- the lead --- */ .tlead{display:block} .tlead .art{aspect-ratio:16/9} .tlead .bd{display:block;padding-top:var(--s4)} .tlead h3{ font-family:var(--fd);font-weight:400; font-size:clamp(23px,2.4vw,30px);line-height:1.22;letter-spacing:-.008em; color:var(--ink);margin:0;transition:.15s; } .tlead p{ font-family:var(--fb);font-size:14.5px;line-height:1.55; color:var(--text-soft);margin:10px 0 0;max-width:46ch; } .tlead:hover h3{color:var(--brass-deep)} /* --- the four behind it --- */ .trest{list-style:none;margin:0;padding:0;border-top:1px solid var(--line)} .trest li{border-bottom:1px solid var(--line)} .trest li:last-child{border-bottom:none} .trest a{ display:grid;grid-template-columns:112px 1fr; column-gap:var(--s4);align-items:start; padding:var(--s4) 0; /* named properties, not `all`: `transition:.15s` also animated the focus ring, so it faded in over 150ms instead of appearing. */ transition:background .15s ease,color .15s ease; } .trest .art{aspect-ratio:16/9} .trest h4{ font-family:var(--fd);font-weight:400;font-size:17px;line-height:1.3; letter-spacing:-.006em;color:var(--ink);margin:0;transition:.15s; } .trest a:hover h4{color:var(--brass-deep)} /* --- shared --- */ .trend .tag{ display:block;font-family:var(--fb);font-size:10.5px;font-weight:600; letter-spacing:.13em;text-transform:uppercase;color:var(--brass-deep); margin-bottom:7px; } .trend .tag .n{ font-family:var(--fm);font-weight:400;letter-spacing:.14em; color:var(--brass);margin-right:9px;font-variant-numeric:tabular-nums; } .trend .ct{ display:block;margin-top:9px; font-family:var(--fb);font-size:12.5px;color:var(--text-soft); } .trend .art img{width:100%;height:100%;object-fit:cover;display:block} @media(max-width:900px){ .trend{grid-template-columns:1fr;row-gap:var(--s6)} .trest{border-top:1px solid var(--line)} } @media(max-width:520px){ .trest a{grid-template-columns:84px 1fr;column-gap:var(--s3)} .trest h4{font-size:15.5px} } /* The art component was built for a full-width card, so at 112px its label overruns the box and its play button is half the thumbnail. Both scale down here. The label is dropped entirely rather than shrunk -- the same subject is already in the kicker beside it. */ .trest .art .lb{display:none} .trest .art .pl{width:26px;height:26px;border-width:1px} .trest .art .pl::after{border-left-width:7px;border-top-width:4.5px;border-bottom-width:4.5px;margin-left:2px} /* Keep the arcs out from under the headlines -- same treatment .stream and .acard already carry. The lead's picture is opaque already; it is the text blocks that were being crossed. Geometry now shows in the header, the gutter between the columns and the margins. */ section.geo .tlead .bd, section.geo .trest > li > a{background:var(--ground,var(--paper))} /* --------------------------------------------------------------- India Unbound: the small sibling of the flagship band. Inherits .show, then gives back the things that make TGLM the flagship -- the full-viewport height, the 58px headline and the lamp. Two full-page dark moments in one scroll would flatten both, and the lamp is TGLM's signature, not a house style. Sits on s-deep rather than s-dark so the two dark bands are not the same colour. --------------------------------------------------------------- */ .show.sm{ min-height:0; padding:var(--s7) var(--s6); grid-template-columns:1fr 1.12fr; gap:var(--s6); } .show.sm::before,.show.sm::after{display:none} /* no lamp */ .show.sm .kick{font-size:11px;letter-spacing:.16em;margin-bottom:var(--s2)} .show.sm h2{ font-size:clamp(28px,3vw,40px);line-height:1.08; max-width:14ch;margin-bottom:var(--s3); } .show.sm .sf{ font-size:clamp(15px,1.25vw,17px);line-height:1.55; max-width:38ch;margin-bottom:var(--s4); } .show.sm .acts{margin-top:0!important} .show.sm .btn{padding:12px 26px;font-size:12.5px} .show.sm .showpic .pl{width:52px;height:52px} .show.sm .art{aspect-ratio:16/9} @media(max-width:900px){ .show.sm{grid-template-columns:1fr;padding:var(--s6) 0} } /* --- horizontal rules: the trending ground ------------------------- No arcs and no diagonals. Horizontal at a pitch well off the row separators in the list, so it reads as texture rather than as more of the same rules. */ section.geo.g-lines{--geoline:color-mix(in srgb,var(--text) 5%,transparent)} section.geo.g-lines::before{ background:repeating-linear-gradient(0deg,var(--geoline) 0 1px,transparent 1px 38px); } /* --- Trending news, flagged a little ------------------------------- */ .sec-trend .shead .kick{ font-size:12px;letter-spacing:.15em; color:var(--brass-deep); } .sec-trend .shead .kick::after{ content:"";display:block;width:26px;height:2px;margin:9px auto 0; background:var(--brass); } /* --- India Unbound: the editions band ------------------------------ */ /* Tightened: this band was running ~900px because the headline wraps to six lines at 38px and the still was 4:3. Smaller type on a wider measure, capped at three lines, and a 16:9 still. */ .iu{ display:grid;grid-template-columns:1fr 1.02fr; gap:var(--s6);align-items:center; /* no vertical padding of its own -- the section already carries 66px each end, and adding 48 on top of that was 114px of dead air top and bottom. */ } .iuc .kick{color:var(--brass);font-size:12px;letter-spacing:.18em} .iutag{ display:block;margin-top:6px;font-family:var(--fm); font-size:10.5px;letter-spacing:.22em;text-transform:uppercase; color:rgba(255,255,255,.42); } .iuc h2{ color:#fff;font-family:var(--fd);font-weight:400; font-size:clamp(22px,2.2vw,30px);line-height:1.18;letter-spacing:-.008em; margin:var(--s3) 0 var(--s2);max-width:26ch; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; } .iuc .sf{ font-family:var(--fd);font-weight:400;font-style:italic; font-size:clamp(14px,1.1vw,16px);line-height:1.5; color:rgba(255,255,255,.72);margin:0 0 var(--s3);max-width:46ch; display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden; } .iuc .acts{margin-top:var(--s3)} .iuc .btn{padding:12px 26px;font-size:12.5px} /* the faces -- the credibility of the format. Renders only when the edition actually has contributors linked. */ .iuppl{margin:var(--s4) 0 0;border-top:1px solid rgba(255,255,255,.16);padding-top:var(--s3)} .iuppl .l{ display:block;font-family:var(--fb);font-size:10.5px;font-weight:600; letter-spacing:.13em;text-transform:uppercase;color:var(--brass);margin-bottom:var(--s3); } .iuppl ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:var(--s4) var(--s5)} .iuppl li{display:flex;align-items:center;gap:10px} .iuppl .av{ width:38px;height:38px;border-radius:50%;overflow:hidden;flex-shrink:0; background:var(--ink);border:1px solid rgba(255,255,255,.2); display:flex;align-items:center;justify-content:center; } .iuppl .av img{width:100%;height:100%;object-fit:cover} .iuppl .av i{font-style:normal;font-family:var(--fd);font-size:15px;color:var(--brass)} .iuppl .nm{font-family:var(--fb);font-size:13px;color:rgba(255,255,255,.86)} .iuv .showpic .art{aspect-ratio:16/9} .iuprev{list-style:none;margin:var(--s4) 0 0;padding:0;border-top:1px solid rgba(255,255,255,.16)} .iuprev li{border-bottom:1px solid rgba(255,255,255,.10)} .iuprev li:last-child{border-bottom:none} .iuprev a{display:grid;grid-template-columns:auto 1fr;gap:var(--s4);padding:11px 0;align-items:baseline} .iuprev .d{font-family:var(--fm);font-size:10.5px;letter-spacing:.1em;color:var(--brass-dark);white-space:nowrap} .iuprev .t{font-family:var(--fb);font-size:13.5px;line-height:1.4;color:rgba(255,255,255,.8)} .iuprev a:hover .t{color:#fff} @media(max-width:900px){ .iu{grid-template-columns:1fr;gap:var(--s6);padding:var(--s6) 0} .iuc h2{max-width:none} } /* --- the nav, moved out from under the masthead --------------------- header.bar carries the sticky and the ground, but that selector is element-specific, so the new bar needs its own. The masthead now scrolls away and the nav is what sticks: with both pinned to top:0 the later one simply covers the earlier one. */ header.bar.mastc{position:static} .navbar{ background:var(--paper); border-top:1px solid var(--line); border-bottom:1px solid var(--line); position:sticky;top:0;z-index:80; } .navbar nav.main{border-top:none} /* --------------------------------------------------------------- Sticky, transparent masthead. The wordmark rides over the hero photograph rather than sitting in a bar above it, and both bars stay put: masthead pinned at 0, nav pinned directly beneath it, so they travel down the page as one unit. Two wordmarks are in the markup and only one is ever visible. Over the hero the ground is a dark photograph, so the reverse mark shows; past the hero every band is beige, so the ink one does. Swapping the asset beats filtering it -- the brass in the mark has to survive. --------------------------------------------------------------- */ :root{--mast-h:70px} /* fallback only; JS overwrites with the measured height */ /* DEFAULT IS THE SAFE STATE: solid, ink wordmark. Without JavaScript the observer never fires, and a transparent-by-default bar would leave a white wordmark stranded on beige for the whole page. The transparent treatment is opt-in via html.js, set in the head before first paint. */ header.bar.mastc{ position:sticky;top:0;z-index:90; background:var(--paper);border-bottom:none; /* NO transition on background. It used to fade over 300ms while the wordmark swapped instantly via display, so for a third of a second a light mark sat on a half-paper ground (the logo "vanished") and page content showed through the still-translucent bar. Both flip together on one frame now. Only the shadow is allowed to ease. */ transition:box-shadow .25s ease; } .hero.tall .in{padding-top:118px} /* solid state (the default, and what you get with no JS) */ .brand .wm-rev{display:none} .brand .wm-ink{display:block} .past-hero header.bar.mastc{box-shadow:0 1px 0 rgba(26,29,35,.07)} /* over the photograph -- only with JS, and only until the hero is passed */ /* Only pages that HAVE a hero get the see-through masthead. Without one the bar would sit transparent over a beige band with a white wordmark on it, i.e. invisible. :has() makes this automatic for every template rather than something each page has to remember. */ html.js:not(.past-hero):has(.hero) header.bar.mastc{background:transparent} html.js:not(.past-hero):has(.hero) .brand .wm-ink{display:none} html.js:not(.past-hero):has(.hero) .brand .wm-rev{display:block} html.js:not(.past-hero):has(.hero) .bar.mastc .isearch{color:rgba(255,255,255,.9)} html.js:not(.past-hero):has(.hero) .bar.mastc .mside .btn.solid{background:rgba(255,255,255,.14);color:#fff; border:1px solid rgba(255,255,255,.4);backdrop-filter:blur(6px)} html.js:not(.past-hero):has(.hero) .bar.mastc .mside .btn.solid:hover{background:var(--brass); border-color:var(--brass);color:var(--ink)} html.js:not(.past-hero):has(.hero) .bar.mastc .mtoggle span{background:#fff} /* Keyed to html.js ONLY, never to .past-hero. Tying it to the scroll state meant the margin flipped between -54px and 0 as you crossed the boundary, the document grew and shrank by 54px, and the browser fought the scroll to compensate. That was the "sticks when you go back up" glitch. html.js is set once before paint and never changes, so the layout is now identical at every scroll position. */ html.js .hero{margin-top:calc(-1 * var(--mast-h))} /* the nav pins directly under the masthead, never over it */ .navbar{top:var(--mast-h)} .past-hero .navbar{box-shadow:0 10px 24px -18px rgba(26,29,35,.5)} @media(max-width:1080px){ /* --mast-h is measured in JS now, so no guess here */ .hero.tall .in{padding-top:96px} } /* Slimmer masthead: 24/20 padding round a 26px wordmark made a 70px bar sitting over the hero. */ .bar.mastc .mrow{padding:15px 0 13px} .bar.mastc .brand img.lwmark{height:22px} /* The nav items are hidden below 1080 (the hamburger takes over), which left a 2px bar of pure border sitting under the hero. */ @media(max-width:1080px){ .navbar{display:none} } /* ═══════════════════════════════════════════════════════════════════ MOTION Four pieces, all of them opt-in behind html.js. Every animated thing is fully visible in the default CSS: if the script never runs, the page reads exactly as it does now, just without the movement. That is the same rule the masthead needed, and it is the difference between a degraded page and a blank one. Only opacity and transform are touched. Nothing here can move the layout, which is what caused the scroll to fight back earlier. ═══════════════════════════════════════════════════════════════════ */ /* ── 1. the lamp blooms as the flagship arrives ─────────────────── */ .show::before,.show::after{transition:opacity 1.2s ease .1s} html.js .show:not(.in)::before, html.js .show:not(.in)::after{opacity:0} /* ── 2. the ruled grounds draw in ───────────────────────────────── */ section.geo::before{transition:opacity .9s ease} html.js section.geo:not(.in)::before{opacity:0} /* ── 3. section heads rise, in sequence ─────────────────────────── */ html.js .shead .sh-l > *, html.js .shead > .more, html.js .show .copy > *, html.js .comm .c > *, html.js .nlin .nlc > *, html.js .iuc > *{ opacity:0;transform:translateY(8px); transition:opacity .5s ease, transform .5s ease; } html.js .shead.in .sh-l > *, html.js .shead.in > .more, html.js .show .copy.in > *, html.js .comm .c.in > *, html.js .nlin .nlc.in > *, html.js .iuc.in > *{opacity:1;transform:none} /* the stagger: 60ms apart, four steps deep, then everything after holds at the last one rather than trailing off indefinitely */ html.js .shead.in .sh-l > *:nth-child(2), html.js .show .copy.in > *:nth-child(2), html.js .comm .c.in > *:nth-child(2), html.js .nlin .nlc.in > *:nth-child(2), html.js .iuc.in > *:nth-child(2){transition-delay:.06s} html.js .shead.in .sh-l > *:nth-child(3), html.js .show .copy.in > *:nth-child(3), html.js .comm .c.in > *:nth-child(3), html.js .nlin .nlc.in > *:nth-child(3), html.js .iuc.in > *:nth-child(3){transition-delay:.12s} html.js .shead.in .sh-l > *:nth-child(n+4), html.js .show .copy.in > *:nth-child(n+4), html.js .comm .c.in > *:nth-child(n+4), html.js .nlin .nlc.in > *:nth-child(n+4), html.js .iuc.in > *:nth-child(n+4){transition-delay:.18s} html.js .shead.in > .more{transition-delay:.18s} /* ── 4. the arrow travels ───────────────────────────────────────── */ .ar{display:inline-block;transition:transform .22s ease} a:hover .ar, .more:hover .ar, .trest a:hover .ar, .tlead:hover .ar{transform:translateX(4px)} /* ── nothing moves for anyone who asked for that ────────────────── */ @media (prefers-reduced-motion:reduce){ html.js .shead .sh-l > *, html.js .shead > .more, html.js .show .copy > *, html.js .comm .c > *, html.js .nlin .nlc > *, html.js .iuc > *{ opacity:1!important;transform:none!important; } html.js .show:not(.in)::before, html.js .show:not(.in)::after, html.js section.geo:not(.in)::before{opacity:1!important} .ar{transition:none} } /* ── 5. images lift very slightly on hover ────────────────────────── The generated art is layered divs, not an , so the inner gradient and motif scale rather than the box. .art and .showpic both already clip, so nothing spills. 1.04 over half a second: enough to feel responsive, not enough to notice as an effect. */ .art .g,.art .m,.showpic img,.trend .art img{ transition:transform .55s cubic-bezier(.2,.6,.2,1); will-change:transform; } a:hover .art .g, a:hover .art .m, a:hover .showpic img, .showpic:hover img{transform:scale(1.04)} /* the play badge should not drift with the picture behind it */ .art .pl,.showpic .pl{transform-origin:center} @media (prefers-reduced-motion:reduce){ .art .g,.art .m,.showpic img,.trend .art img{transition:none} a:hover .art .g,a:hover .art .m,a:hover .showpic img,.showpic:hover img{transform:none} } /* ── keyboard focus: three components had no ring at all ──────────── Walked the page with Tab: the trending rows, the newsletter field and the footer social icons all focused invisibly. Everything else already had one. Colours differ by ground -- brass is invisible on the brass band, so the field takes ink. */ /* story.css already gives everything a :focus-visible ring. Two things needed help: the trending rows and the social icons were animating it in via `transition:.15s` (fixed above and below), and inputs have their outline killed outright by story.css:833, so the field needs its own. */ .fbrand .soc a{transition:color .15s ease,background .15s ease,border-color .15s ease} .nlf input:focus-visible, .nlf input:focus{box-shadow:inset 0 0 0 2px var(--ink);position:relative;z-index:1} .nlf input:focus:not(:focus-visible){box-shadow:none} /* ── play badges: one method, correctly centred ───────────────────── A CSS border triangle is not centred by centring its BOX. Its visual weight sits a third of the way from the flat edge, so the box has to sit one sixth of its own width to the RIGHT for the shape to look centred in the circle. Two rules were compounding instead: .showpic set left:54% while the underlying .art rule's margin-left:4px was never zeroed, so on the 64px badge the triangle's centroid landed 3.6px right of centre. Measured, not guessed. Every badge now centres its box and nudges by exactly width/6. --------------------------------------------------------------- */ .art .pl{display:block} .art .pl::after{ position:absolute;left:50%;top:50%;margin:0; transform:translate(calc(-50% + 2.5px),-50%); /* 15px wide -> 15/6 */ } .showpic .pl::after{ left:50%;margin:0; transform:translate(calc(-50% + 2.83px),-50%); /* 17px wide -> 17/6 */ } .trest .art .pl::after{ margin:0; /* its size rule sets margin-left:2px */ transform:translate(calc(-50% + 1.17px),-50%); /* 7px wide -> 7/6 */ } /* ═══════════════════════════════════════════════════════════════════ ABOUT ═══════════════════════════════════════════════════════════════════ */ /* ── 1. the statement ─────────────────────────────────────────────── Two columns. A single 34ch stack left 73% of a 1340px band empty, which is the same fault the "how it works" rows had. Headline holds the left, the copy holds the right, and the headline can now be a good deal larger because it is not sharing a column with body text. */ .abstate{ display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr); column-gap:var(--s7);align-items:start; padding:var(--s6) 0 var(--s7); } .abstate h1{ font-family:var(--fd);font-weight:300; font-size:clamp(34px,4.6vw,62px);line-height:1.06;letter-spacing:-.014em; color:var(--ink);margin:var(--s3) 0 0;max-width:11ch; } .abstate .lead{ font-family:var(--fd);font-weight:400; font-size:clamp(19px,1.75vw,23px);line-height:1.55; color:var(--text);margin:0 0 var(--s4);max-width:44ch; } .abstate .lead em{font-style:italic;color:var(--brass-deep)} .abstate .lead2{ font-family:var(--fb);font-size:15.5px;line-height:1.7; color:var(--text-soft);margin:0;max-width:44ch; padding-top:var(--s4);border-top:1px solid var(--line); } @media(max-width:900px){ .abstate{grid-template-columns:1fr;row-gap:var(--s5)} .abstate h1{max-width:none} } /* ── 2. how it works ──────────────────────────────────────────────── Three cards across the full band. The stacked-rows version left a dead corridor down the middle and gave the eye nothing to land on: three assertions in body copy and no evidence. Each card now carries a numeral, a heading, the explanation, what the strand contains, and a live figure. Same information, five times the presence. */ .shead.lefthead{text-align:left} .shead.lefthead .sh-l{margin:0;max-width:none} .shead.lefthead h2,.shead.lefthead .kick,.shead.lefthead .sub{margin-left:0;text-align:left} .shead.lefthead .sub{max-width:52ch} .abhow{ list-style:none;margin:var(--s6) 0 0;padding:0; display:grid;grid-template-columns:repeat(3,1fr);gap:0; border-top:1px solid var(--line); } .abhow > li{ display:flex;flex-direction:column; padding:var(--s5) var(--s5) var(--s5) 0; border-right:1px solid var(--line); } .abhow > li:last-child{border-right:none} .abhow > li + li{padding-left:var(--s5)} .abhow .n{ font-family:var(--fm);font-size:clamp(26px,2.6vw,34px);line-height:1; color:var(--brass);font-variant-numeric:tabular-nums; display:block;margin-bottom:var(--s4); } .abhow h3{ font-family:var(--fd);font-weight:400;font-size:clamp(20px,1.9vw,25px); line-height:1.2;letter-spacing:-.008em;color:var(--ink);margin:0 0 var(--s3); } .abhow p{ font-family:var(--fb);font-size:14.5px;line-height:1.65; color:var(--text-soft);margin:0 0 var(--s4); } /* what the strand actually contains */ .abhow .what{list-style:none;margin:0 0 var(--s4);padding:0} .abhow .what li{ font-family:var(--fm);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase; color:var(--brass-deep);padding:7px 0;border-top:1px solid rgba(26,29,35,.09); } /* the figure, and the way in. Pushed to the foot so all three align however uneven the copy above them runs. */ .abhow .foot{ margin-top:auto;padding-top:var(--s4); border-top:1px solid var(--line); display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3); } .abhow .fig{ font-family:var(--fd);font-weight:400;font-size:clamp(23px,2.2vw,29px); line-height:1;color:var(--ink);white-space:nowrap; } .abhow .fig em{ display:block;margin-top:6px;font-style:normal; font-family:var(--fb);font-size:11px;font-weight:500;letter-spacing:.02em; color:var(--text-soft); } .abhow .more{white-space:nowrap} @media(max-width:900px){ .abhow{grid-template-columns:1fr} .abhow > li{border-right:none;border-bottom:1px solid var(--line);padding:var(--s5) 0} .abhow > li:last-child{border-bottom:none} .abhow > li + li{padding-left:0} } /* ── 3. the people ── PARKED, not currently rendered ──────────────── The markup was removed from about.php on 14 Aug: no team to show yet. These rules are left in place so the section can come back as one block once there is a confirmed roster. The seven square portraits are still on the server at mu-plugins/lawwiser-ui/img/team-*.jpg. ------------------------------------------------------------------ Seven portraits from seven different sources. The duotone is what makes them read as one set rather than seven uploads: desaturated, then warmed back toward the brass so they belong to the palette. */ .abteam{ list-style:none;margin:var(--s6) 0 0;padding:0; display:grid;grid-template-columns:repeat(4,1fr);gap:var(--s6) var(--s5); } .abteam figure{margin:0 0 var(--s3);overflow:hidden;background:var(--ink-deep)} .abteam img{ width:100%;height:auto;display:block;aspect-ratio:1/1;object-fit:cover; filter:grayscale(.78) contrast(1.06) brightness(.94) sepia(.16); transition:filter .5s ease, transform .6s cubic-bezier(.2,.6,.2,1); } .abteam li:hover img{filter:grayscale(.35) contrast(1.04) brightness(1) sepia(.06);transform:scale(1.03)} .abteam h3{ font-family:var(--fd);font-weight:400;font-size:19px;line-height:1.25; color:#fff;margin:0 0 3px; } .abteam .role{ display:block;font-family:var(--fb);font-size:10.5px;font-weight:600; letter-spacing:.13em;text-transform:uppercase;color:var(--brass);margin-bottom:9px; } .abteam p{ font-family:var(--fb);font-size:13px;line-height:1.6; color:rgba(255,255,255,.66);margin:0; display:-webkit-box;-webkit-line-clamp:5;-webkit-box-orient:vertical;overflow:hidden; } @media(max-width:1080px){ .abteam{grid-template-columns:repeat(3,1fr)} } @media(max-width:760px){ .abteam{grid-template-columns:repeat(2,1fr);gap:var(--s5) var(--s4)} .abhow > li{grid-template-columns:1fr;row-gap:var(--s2)} .abhow .n{padding-top:0} } /* The people section runs without a heading: the roles under each name say what the group is, and a dark band of faces needs no label. */ .abteam.nohead{margin-top:0} /* ── inner pages ──────────────────────────────────────────────────── Pages with no hero. The nav sits in the flow rather than pinning, matching the index and record templates. Declared here rather than relying on pages.css, which these bespoke templates do not enqueue: the rule has to travel with the stylesheet the page actually loads. */ body.lw-inner .navbar{position:static;top:auto;box-shadow:none} /* ═══════════════════════════════════════════════════════════════════ THE IN-HOUSE CIRCLE The application panel. Ink ground so the form is the one lit object on a light page, brass left rule, same construction as the GC panel on the home page. Kept deliberately plain: a form that looks designed reads as marketing, and this one is asking for a phone number. ═══════════════════════════════════════════════════════════════════ */ .joinpanel{ display:grid;grid-template-columns:minmax(0,0.82fr) minmax(0,1fr); column-gap:var(--s7); background:var(--ink);border-left:4px solid var(--brass); padding:var(--s6) var(--s6) var(--s6) var(--s7); } .joinpanel .kick{color:var(--brass)} .joinpanel h2{ color:#fff;font-family:var(--fd);font-weight:400; font-size:clamp(24px,2.5vw,32px);line-height:1.16;letter-spacing:-.008em; margin:var(--s3) 0 var(--s3);max-width:16ch; } .joinpanel .jl > p{ font-family:var(--fb);font-size:14.5px;line-height:1.7; color:rgba(255,255,255,.72);margin:0;max-width:42ch; } .jnote{list-style:none;margin:var(--s5) 0 0;padding:0;border-top:1px solid rgba(255,255,255,.16)} .jnote li{ padding:10px 0;border-bottom:1px solid rgba(255,255,255,.09); font-family:var(--fm);font-size:10.5px;letter-spacing:.09em; text-transform:uppercase;color:var(--brass); } .jnote li:last-child{border-bottom:none} /* the form */ .jform .field{margin-bottom:var(--s4)} .jform .frow{display:grid;grid-template-columns:1fr 1fr;gap:0 var(--s4)} .jform label{ display:block;margin-bottom:7px; font-family:var(--fb);font-size:11px;font-weight:600; letter-spacing:.12em;text-transform:uppercase;color:rgba(255,255,255,.72); } .jform .req{color:var(--brass)} .jform .opt{font-weight:400;letter-spacing:.02em;text-transform:none;color:rgba(255,255,255,.45)} .jform input{ width:100%;background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.22);border-radius:2px; padding:13px 14px;color:#fff; font:15px/1.4 var(--fb); transition:border-color .15s ease, background .15s ease; } .jform input::placeholder{color:rgba(255,255,255,.34)} .jform input:hover{border-color:rgba(255,255,255,.34)} .jform input:focus{outline:none;border-color:var(--brass);background:rgba(255,255,255,.10)} .jform input:focus-visible{box-shadow:inset 0 0 0 1px var(--brass)} .jform .hint{ display:block;margin-top:7px; font-family:var(--fb);font-size:12px;line-height:1.5;color:rgba(255,255,255,.5); } .jform .btn.accent{margin-top:var(--s2);padding:14px 28px;font-size:13.5px} .jform .legal{ margin:var(--s4) 0 0;max-width:46ch; font-family:var(--fb);font-size:11.5px;line-height:1.6;color:rgba(255,255,255,.45); } /* the honeypot must stay in the DOM and out of sight */ .jform .hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden} .jerr{ margin:0 0 var(--s4);padding:12px 14px; background:rgba(192,57,43,.14);border-left:2px solid #C0392B; font-family:var(--fb);font-size:13.5px;color:#fff; } .jdone h3{ font-family:var(--fd);font-weight:400;font-size:26px;color:#fff;margin:0 0 var(--s3); } .jdone p{font-family:var(--fb);font-size:15px;line-height:1.7;color:rgba(255,255,255,.75);margin:0;max-width:40ch} @media(max-width:900px){ .joinpanel{grid-template-columns:1fr;row-gap:var(--s6);padding:var(--s5) var(--s5) var(--s5) var(--s5)} .jform .frow{grid-template-columns:1fr} } /* ── members: the quotes ──────────────────────────────────────────── Serif italic at display size, which is already the site's voice for standfirsts, so quotes inherit it rather than inventing a new one. The brass mark hangs outside the measure so the text stays aligned. */ .voices{ list-style:none;margin:var(--s6) 0 0;padding:0; display:grid;grid-template-columns:repeat(3,1fr);gap:0; border-top:1px solid rgba(255,255,255,.16); } .voices > li{ padding:var(--s5) var(--s5) var(--s5) 0; border-right:1px solid rgba(255,255,255,.12); display:flex;flex-direction:column; } .voices > li:last-child{border-right:none} .voices > li + li{padding-left:var(--s5)} .voices blockquote{ position:relative;margin:0 0 var(--s5); font-family:var(--fd);font-weight:400;font-style:italic; font-size:clamp(16px,1.5vw,19px);line-height:1.5; color:rgba(255,255,255,.9); } .voices blockquote::before{ content:"\201C";position:absolute;left:-.42em;top:-.12em; font-family:var(--fd);font-style:normal;font-size:2.4em;line-height:1; color:var(--brass);opacity:.5; } .voices .who{display:flex;align-items:center;gap:12px;margin-top:auto; padding-top:var(--s4);border-top:1px solid rgba(255,255,255,.12)} .voices .av{ width:40px;height:40px;border-radius:50%;overflow:hidden;flex-shrink:0; background:var(--ink-deep);border:1px solid rgba(255,255,255,.22); display:flex;align-items:center;justify-content:center; } .voices .av img{width:100%;height:100%;object-fit:cover;filter:grayscale(.7)} .voices .av i{font-style:normal;font-family:var(--fd);font-size:16px;color:var(--brass)} .voices .nm{ font-family:var(--fb);font-size:13.5px;font-weight:600;color:#fff;line-height:1.3; } .voices .nm em{ display:block;margin-top:3px;font-style:normal;font-weight:400; font-size:11.5px;line-height:1.4;color:rgba(255,255,255,.58); } /* ── from the room ────────────────────────────────────────────────── The ranked index used on the home page, reused rather than reinvented. */ .roomlist{list-style:none;margin:var(--s5) 0 0;padding:0;border-top:1px solid var(--line)} .roomlist li{border-bottom:1px solid var(--line)} .roomlist a{ display:grid;grid-template-columns:auto 1fr auto; align-items:baseline;column-gap:var(--s5); padding:var(--s4) 0;transition:background .15s ease; } .roomlist a:hover{background:color-mix(in srgb,var(--brass) 6%,transparent)} .roomlist .n{font-family:var(--fm);font-size:11px;letter-spacing:.14em;color:var(--brass-deep)} .roomlist .tag{ display:block;margin-bottom:6px; font-family:var(--fb);font-size:10.5px;font-weight:600;letter-spacing:.13em; text-transform:uppercase;color:var(--brass-deep); } .roomlist h3{ font-family:var(--fd);font-weight:400;font-size:clamp(17px,1.7vw,21px); line-height:1.3;letter-spacing:-.006em;color:var(--ink);margin:0;transition:color .15s ease; } .roomlist a:hover h3{color:var(--brass-deep)} .roomlist .ct{ font-family:var(--fb);font-size:12.5px;color:var(--text-soft);white-space:nowrap; } @media(max-width:900px){ .voices{grid-template-columns:1fr} .voices > li{border-right:none;border-bottom:1px solid rgba(255,255,255,.12);padding:var(--s5) 0} .voices > li:last-child{border-bottom:none} .voices > li + li{padding-left:0} .roomlist a{grid-template-columns:auto 1fr;row-gap:4px} .roomlist .ct{grid-column:2} } /* ═══════════════════════════════════════════════════════════════════ THE IN-HOUSE CIRCLE: the hero Dark, alone among the pages. Everything else opens light; this one describes a closed room and reads better as one. It also stops the page looking like a second copy of the About statement, which shared its construction until now. ═══════════════════════════════════════════════════════════════════ */ .ihchero .ihc-in{ display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,0.72fr); column-gap:var(--s7);align-items:center; padding:var(--s7) 0; } .ihchero .kick{color:var(--brass)} .ihchero h1{ font-family:var(--fd);font-weight:300; font-size:clamp(34px,4.4vw,58px);line-height:1.06;letter-spacing:-.014em; color:#fff;margin:var(--s3) 0 var(--s4);max-width:13ch; } .ihchero h1 em{font-style:italic;font-weight:400;color:var(--brass)} .ihchero .lead{ font-family:var(--fd);font-weight:400; font-size:clamp(17px,1.6vw,21px);line-height:1.55; color:rgba(255,255,255,.76);margin:0;max-width:46ch; } .ihchero .acts{margin-top:var(--s5)} .ihchero .btn.accent{padding:14px 30px;font-size:13.5px} /* the proof, held to the right so it reads as a caption to the claim */ .ihchero .mem{padding-bottom:var(--s5);border-bottom:1px solid rgba(255,255,255,.16)} .ihchero .mem .l{ display:block;margin-bottom:var(--s3); font-family:var(--fb);font-size:10.5px;font-weight:600;letter-spacing:.13em; text-transform:uppercase;color:rgba(255,255,255,.5); } .ihchero .faces{display:flex} .ihchero .faces span{ width:52px;height:52px;border-radius:50%;overflow:hidden; border:2px solid var(--ink);margin-left:-14px;background:var(--ink-deep);flex-shrink:0; } .ihchero .faces span:first-child{margin-left:0} .ihchero .faces img{ width:100%;height:100%;object-fit:cover; filter:grayscale(.72) contrast(1.05) sepia(.12); } .ihchero .orgs{ margin:var(--s3) 0 0; font-family:var(--fb);font-size:12.5px;line-height:1.6;color:rgba(255,255,255,.66); } .ihcfig{margin:var(--s5) 0 0;display:grid;grid-template-columns:1fr 1fr;gap:var(--s5)} .ihcfig dt{ font-family:var(--fb);font-size:10.5px;font-weight:600;letter-spacing:.13em; text-transform:uppercase;color:rgba(255,255,255,.5);margin-bottom:8px; } .ihcfig dd{ margin:0;font-family:var(--fd);font-weight:400; font-size:clamp(18px,1.8vw,23px);line-height:1.2;color:#fff; } @media(max-width:900px){ .ihchero .ihc-in{grid-template-columns:1fr;row-gap:var(--s6);padding:var(--s6) 0} .ihchero h1{max-width:none} } /* ══ THE IN-HOUSE CIRCLE: carousel, closing strip, generic reveal ══════ The reveal observer used to run off a hand-kept list of selectors, so every new block had to be added to it in two places or it silently never moved. [data-rv] is the general hook: put it on a container and its children rise in sequence. The old selectors stay so nothing that already works has to be touched. ─────────────────────────────────── */ html.js [data-rv] > *{ opacity:0;transform:translateY(8px); transition:opacity .5s ease, transform .5s ease; } html.js [data-rv].in > *{opacity:1;transform:none} html.js [data-rv].in > *:nth-child(2){transition-delay:.06s} html.js [data-rv].in > *:nth-child(3){transition-delay:.12s} html.js [data-rv].in > *:nth-child(n+4){transition-delay:.18s} /* ── the quote carousel ──────────────────────────────────────────── Slides are stacked in one grid cell so the box takes the height of the longest quote and never jumps between members. Without JS every slide stays visible and it reads as a plain list. */ .vcarousel{ margin-top:var(--s5); display:flex;flex-direction:column;align-items:flex-start; --v-fg:var(--ink);--v-sub:var(--soft);--v-line:rgba(26,29,35,.14); } .s-dark .vcarousel,.s-deep .vcarousel{ --v-fg:#fff;--v-sub:rgba(255,255,255,.58);--v-line:rgba(255,255,255,.16); } .vstack{display:grid} .vslide{grid-area:1/1;min-width:0} html.js .vslide{opacity:0;visibility:hidden;transition:opacity .55s ease} html.js .vslide.on{opacity:1;visibility:visible} .vslide blockquote{ margin:0;font-family:var(--fd);font-weight:300; font-size:clamp(21px,2.5vw,31px);line-height:1.42;letter-spacing:-.01em; color:var(--v-fg);max-width:min(100%,60ch); } .vslide blockquote::before{content:"\201C"} .vslide blockquote::after{content:"\201D"} .vslide .who{display:flex;align-items:center;gap:var(--s2);margin-top:var(--s4)} /* .av is sized for a card elsewhere; at slide scale it dwarfed the rail */ .vslide .who .av{ width:52px;height:52px;flex:0 0 52px;border-radius:50%;overflow:hidden; background:color-mix(in srgb,var(--v-fg) 8%,transparent);display:grid;place-items:center; } .vslide .who .av img{width:100%;height:100%;object-fit:cover;display:block} .vslide .who .av i{font-style:normal;font-family:var(--fd);font-size:20px;color:var(--v-fg)} .vslide .who .nm{display:flex;flex-direction:column;line-height:1.3} .vslide .who .nm b{font-family:var(--fb);font-weight:500;font-size:15px;color:var(--v-fg)} .vslide .who .nm em{ font-family:var(--fb);font-style:normal;font-size:12.5px;letter-spacing:.02em; color:var(--v-sub);margin-top:3px; } /* the face rail is the control and the progress indicator at once */ /* The rail leads. Quotes run 222 to 706 characters, so a box sized to the longest one left a hole between a short quote and a rail sitting under it. With the faces above, the slack falls at the foot of the section where it reads as padding, and the section never changes height as it advances. */ .vrail{display:flex;gap:10px;margin:0 0 var(--s5);flex-wrap:wrap} .vrail button{ width:44px;height:44px;padding:0;border-radius:50%;cursor:pointer; background:none;border:1px solid var(--v-line); overflow:hidden;flex:0 0 auto; transition:border-color .3s ease, opacity .3s ease, transform .3s ease; opacity:.4; } .vrail button img{width:100%;height:100%;object-fit:cover;display:block} .vrail button:hover{opacity:.75} .vrail button.on{opacity:1;border-color:var(--brass);transform:scale(1.06)} .vrail button:focus-visible{outline:2px solid var(--brass);outline-offset:3px} html:not(.js) .vrail{display:none} /* The ground backing is opaque, so a full-width box would hide the motif across the whole band. Sized to the text instead: the arcs stay visible to the right of the quote and never cross it. */ .vcarousel .vstack{width:100%;max-width:940px} html:not(.js) .vslide + .vslide{margin-top:var(--s5)} /* ── the closing strip ───────────────────────────────────────────── The form used to end and the footer began in the same breath. This gives the page somewhere to land, and gives the reader who is not ready to apply a route that is not the back button. */ .endstrip{ display:flex;align-items:center;justify-content:space-between; gap:var(--s4);flex-wrap:wrap; } .endstrip p{ margin:0;font-family:var(--fd);font-weight:300; font-size:clamp(19px,2vw,26px);line-height:1.4;color:#fff;max-width:34ch; } .endstrip .ends{display:flex;gap:var(--s4);flex-wrap:wrap;align-items:center} .endstrip .ends a{ font-family:var(--fb);font-size:14px;letter-spacing:.01em;color:var(--brass); border-bottom:1px solid rgba(176,141,87,.3);padding-bottom:2px; transition:border-color .25s ease,color .25s ease; } .endstrip .ends a:hover{color:#fff;border-bottom-color:rgba(255,255,255,.5)} @media (max-width:720px){ .vrail button{width:38px;height:38px} .endstrip{flex-direction:column;align-items:flex-start;gap:var(--s3)} } @media (prefers-reduced-motion:reduce){ html.js [data-rv] > *{opacity:1!important;transform:none!important} html.js .vslide{transition:none} .vrail button{transition:none} } /* ── what happens next ───────────────────────────────────────────── Fills the void beside the form. Numerals in mono so they read as a sequence rather than as decoration. */ .jnext{margin-top:var(--s5)} .jnext .kick{display:block;margin-bottom:var(--s3)} .jnext ol{list-style:none;margin:0;padding:0;display:grid;gap:var(--s3)} .jnext li{display:flex;gap:var(--s3);align-items:baseline} .jnext li b{ font-family:var(--fm);font-weight:400;font-size:11.5px;letter-spacing:.06em; color:var(--brass);flex:0 0 auto;padding-top:2px; } .jnext li span{ font-family:var(--fb);font-size:14.5px;line-height:1.62; color:rgba(255,255,255,.72); } @media (max-width:720px){ .jnext{margin-top:var(--s4)} } /* ══ HOVER ═══════════════════════════════════════════════════════════ The ground backing above out-specified `.roomlist a:hover` (0,2,3 to 0,2,1) and silently killed the row highlight that was already there. Restated at matching specificity, and composited over the band's own ground so the wash reads the same on paper and on tint. ─────────── */ section.geo .roomlist > li > a, section.geo .abhow > li, section.geo .dlist > a{ transition:background-color .25s ease; } section.geo .roomlist > li > a:hover, section.geo .dlist > a:hover{ background:color-mix(in srgb,var(--brass) 7%,var(--ground,var(--paper))); } /* The three benefit columns had no hover at all. They are dividers, not cards, so nothing lifts or shadows: the ground warms, the rule that separates them takes on brass, and the numeral comes forward. */ .abhow > li{ transition:background-color .25s ease, border-color .25s ease; border-right-color:var(--line); } section.geo .abhow > li:hover{ background:color-mix(in srgb,var(--brass) 6%,var(--ground,var(--paper))); } .abhow > li:hover{border-right-color:color-mix(in srgb,var(--brass) 34%,transparent)} .abhow > li:hover .n{color:var(--brass-deep)} .abhow > li:hover h3{color:var(--brass-deep)} .abhow .n,.abhow h3{transition:color .25s ease} .abhow .what li{transition:border-color .25s ease} .abhow > li:hover .what li{border-top-color:color-mix(in srgb,var(--brass) 26%,transparent)} @media (prefers-reduced-motion:reduce){ section.geo .roomlist > li > a, section.geo .abhow > li, section.geo .dlist > a, .abhow .n,.abhow h3,.abhow .what li{transition:none} } /* ── Card titles come off 600 ────────────────────────────────────── The listing card title was the last bold serif on the site. Nothing on a serif goes above 500, which is the card-title weight in the design system. */ .acard h4,.alist h4,.dlist h4,.stream h4,.richcard h4,.evrow h4, .clamp3,h4.clamp3,.tlead h4,.trest h4{font-weight:500} /* The h3 card titles were missed by the first pass: doors, the flagship still, the event lead and the subject cards all sit at 600. */ .door h3,.evmain h3,.acard h3,.subcard h3,.stream h3,.iucard h3, .lcell h4,.ppl b,.tst .who b{font-weight:500} /* The subject cards. Missed twice: the first rule named h4 without the .subcard context, the second named .subcard h3 when these are h4. */ .subcard h4,.subgrid h4{font-weight:500} /* One word of a page title set apart, as the home page does it. Lives here because lab.css loads last: the same rule in pages.css was overridden by the white-on-dark heading rule and the word stayed white. */ .ixhead h1 em,.iuhead h1 em,.hubhead h1 em{ font-style:italic;font-weight:300;color:var(--brass); } /* An earlier .ctgrid / .ctcol set lived here, identical selectors to the block below and beaten by it on source order alone. Removed. */ /* ── Contact ─────────────────────────────────────────────────────── Three ruled columns, each a way in rather than a line of text, and a form that belongs to the site instead of to the plugin. */ .ctgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border-top:2px solid var(--ink)} .ctcol{display:block;text-decoration:none;padding:var(--s5) var(--s5) var(--s6); border-left:1px solid var(--line);background:var(--paper);transition:background .22s ease} .ctcol:first-child{border-left:none} a.ctcol:hover{background:var(--ink)} a.ctcol:hover .ctbig,a.ctcol:hover .lbl{color:#fff} a.ctcol:hover .at,a.ctcol:hover .ctnote{color:rgba(255,255,255,.7)} a.ctcol:hover .go{color:var(--brass)} .ctcol .no{display:block;font-family:var(--fm);font-size:11px;letter-spacing:.12em;color:var(--brass-deep);margin-bottom:var(--s3)} .ctcol .lbl{display:block;font-family:var(--fb);font-weight:600;font-size:11px;letter-spacing:.16em; text-transform:uppercase;color:var(--brass-deep);margin-bottom:10px} .ctbig{display:block;font-family:var(--fd);font-weight:400;font-size:clamp(18px,1.7vw,22px); line-height:1.2;letter-spacing:-.012em;color:var(--ink);word-break:break-word} .ctbig .at{color:var(--soft)} .ctnote{display:block;margin-top:var(--s3);font-size:13.5px;line-height:1.5;color:var(--soft);max-width:30ch} .ctcol .go{display:block;margin-top:var(--s4);font-family:var(--fb);font-weight:500;font-size:12.5px;color:var(--brass-deep)} .ctcol .go .ar{display:inline-block;margin-left:5px;transition:transform .22s ease} a.ctcol:hover .go .ar{transform:translateX(4px)} .ctaddr{font-style:normal;font-family:var(--fd);font-weight:400;font-size:19px;line-height:1.5;color:var(--ink)} /* The ink-panel version of this form was here. It is superseded by "Contact: the form leads" further down, which is the paper one the page actually uses. Only the breakpoint below survived it: those .ctgrid and .ctcol rules are the sole mobile treatment the desk cards have. */ @media(max-width:900px){ .ctwrap{grid-template-columns:1fr;gap:var(--s6)} .ctgrid{grid-template-columns:1fr;border-top:none} .ctcol{border-left:none;border-top:1px solid var(--line)} .ctcol:first-child{border-top:none} } /* ── Contact: the form leads ─────────────────────────────────────── On paper now, not ink, because it is the main body of the page rather than a closing accent. The inboxes take the tint band beneath it. */ .ctmain .ctwrap{display:grid;grid-template-columns:1fr 1.15fr;gap:var(--s7);align-items:start; border-top:2px solid var(--ink);padding-top:var(--s5)} .ctintro h2{font-family:var(--fd);font-weight:400;font-size:clamp(23px,2.3vw,29px);line-height:1.18; letter-spacing:-.012em;color:var(--ink);margin:var(--s2) 0 var(--s3)} .ctwhy{font-size:14px;line-height:1.6;color:var(--soft);max-width:40ch} .ctwhat{list-style:none;margin:var(--s4) 0 0;padding:0;border-top:1px solid var(--line)} .ctwhat li{padding:9px 0 9px 20px;border-bottom:1px solid var(--line);position:relative; font-size:13.5px;line-height:1.4;color:var(--text)} .ctwhat li::before{content:"";position:absolute;left:0;top:15px;width:9px;height:1px;background:var(--brass)} /* the form, on paper */ .ctmain .ctform{background:var(--paper)} .ctform p{margin:0 0 var(--s3);max-width:none} .ctform label{display:block;font-family:var(--fb);font-weight:600;font-size:10.5px;letter-spacing:.14em; text-transform:uppercase;color:var(--brass-deep);margin-bottom:7px} .ctform input[type=text],.ctform input[type=email],.ctform input[type=tel], .ctform input[type=url],.ctform textarea,.ctform select{ width:100%;background:transparent;border:1px solid var(--line);border-radius:0; padding:12px 14px;font:400 14px/1.5 var(--fb);color:var(--ink); transition:border-color .18s ease,background .18s ease} .ctform textarea{min-height:132px;resize:vertical} .ctform input:focus,.ctform textarea:focus{outline:none;border-color:var(--brass);background:#fff} .ctform ::placeholder{color:var(--soft)} .ctform input[type=submit],.ctform button[type=submit]{ width:auto;background:var(--ink);border:none;color:var(--paper); font:600 13px/1 var(--fb);padding:14px 30px;cursor:pointer;transition:background .18s ease} .ctform input[type=submit]:hover{background:var(--brass-deep)} .ctform .wpcf7-not-valid-tip{color:#B3261E;font-size:12px;margin-top:5px} .ctform .wpcf7-response-output{border:1px solid var(--line)!important;padding:12px 14px!important; margin:var(--s4) 0 0!important;font-size:13px} @media(max-width:900px){.ctmain .ctwrap{grid-template-columns:1fr;gap:var(--s6)}} /* ── The Great Legal Minds ───────────────────────────────────────── Three figures on the ink opening, and the guests as people rather than as names inside video titles. */ .glmfigs{grid-template-columns:repeat(3,1fr)} .glmppl{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--ink)} .glmp{display:flex;gap:13px;align-items:center;text-decoration:none; padding:var(--s4);border-left:1px solid var(--line);border-bottom:1px solid var(--line); background:var(--ground,var(--paper));transition:background .22s ease} .glmp:nth-child(4n+1){border-left:none} .glmp:hover{background:var(--ink)} .glmp:hover .who b{color:#fff} .glmp:hover .who span{color:rgba(255,255,255,.7)} .glmp .pic{width:54px;height:54px;flex:0 0 54px;border-radius:50%;overflow:hidden;display:block; background:var(--brass-tint)} .glmp .pic.has img{width:100%;height:100%;object-fit:cover;object-position:50% 30%;display:block; mix-blend-mode:multiply} .glmp:hover .pic.has{background:var(--paper)} .glmp:hover .pic.has img{mix-blend-mode:normal} .glmp .who{min-width:0} .glmp .who b{display:block;font-family:var(--fd);font-weight:500;font-size:15px;line-height:1.25;color:var(--ink)} .glmp .who span{display:block;margin-top:3px;font-size:12px;line-height:1.35;color:var(--soft)} @media(max-width:1100px){ .glmppl{grid-template-columns:repeat(2,1fr)} .glmp:nth-child(4n+1){border-left:1px solid var(--line)} .glmp:nth-child(2n+1){border-left:none} } @media(max-width:620px){ .glmppl{grid-template-columns:1fr;border-top:none} .glmp{border-left:none!important;border-top:1px solid var(--line)} .glmp:first-child{border-top:none} .glmfigs{grid-template-columns:1fr} } /* The figures on the TGLM opening sit on ink, like India Unbound's. The inverted treatment was scoped to .iuhead, so here the paper card styling applied and the band rendered as a white block with white source lines. */ .ixhead .iufigs{margin-top:var(--s6);border-top:1px solid rgba(255,255,255,.18)} .ixhead .iufigs .iufig{background:transparent;border-left:1px solid rgba(255,255,255,.14)} .ixhead .iufigs .iufig:first-child{border-left:none;padding-left:0} .ixhead .iufig .n{color:#fff} .ixhead .iufig .t{color:rgba(255,255,255,.82)} .ixhead .iufig .s{color:var(--brass)} @media(max-width:620px){ .ixhead .iufigs .iufig{border-left:none;border-top:1px solid rgba(255,255,255,.14)} .ixhead .iufigs .iufig:first-child{border-top:none} } /* ── The event record ────────────────────────────────────────────── Facts on the opening, then whatever the record actually holds. */ .evfacts .iufig .n.evsm{font-size:clamp(17px,1.7vw,22px);line-height:1.25} .evfacts{grid-template-columns:repeat(3,1fr)} /* Photographs. Ruled like every other grid, so a set of twelve reads as a contact sheet rather than as a scatter of cards. */ .evgal{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border-top:2px solid var(--ink)} .evshot{display:block;position:relative;aspect-ratio:4/3;overflow:hidden; border-left:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--ink)} .evshot:nth-child(4n+1){border-left:none} .evshot img{width:100%;height:100%;object-fit:cover;display:block; transition:transform .5s ease,opacity .3s ease} .evshot:hover img{transform:scale(1.03);opacity:.88} /* Host and partner logos. On paper, so a logo made for white sits right. */ .evlogos{display:flex;flex-wrap:wrap;gap:0;border-top:2px solid var(--ink)} .evlogo{display:flex;align-items:center;justify-content:center; min-width:190px;flex:1;padding:var(--s5) var(--s4); border-left:1px solid var(--line);background:var(--paper)} .evlogo:first-child{border-left:none} .evlogo img{max-width:150px;max-height:64px;width:auto;height:auto;object-fit:contain; mix-blend-mode:multiply} @media(max-width:900px){ .evfacts{grid-template-columns:1fr} .evgal{grid-template-columns:repeat(2,1fr)} .evshot:nth-child(4n+1){border-left:1px solid var(--line)} .evshot:nth-child(2n+1){border-left:none} } /* A handful of stored headings carry an inline font-weight from the old editor. Inline styles outrank a stylesheet, so this rule is marked to win it back. The ladder is the same everywhere: Newsreader 400, never a bold serif. */ .rich h2[style],.rich h3[style]{font-weight:400!important} .rich h2 strong,.rich h3 strong,.rich h2 b,.rich h3 b{font-weight:inherit} /* An event body carries no rail, so the measure sits in the middle of the page rather than against the left edge where the rail would have been. */ .evbody .reccol{margin-left:auto;margin-right:auto} /* Logos arrive at every proportion, from a square badge to a 9624x2000 wordmark. A generous box with a height cap lets both sit at a similar optical weight. */ .evlogo img{max-width:170px;max-height:86px} /* The participation panel's heading was inheriting a 600 weight from a broader rule. Nothing on a serif goes above 500 in the design system, and a section heading of this size sits at 400. */ .evgrid .evjoin h4{font-weight:400} /* ── Trending: label above, then image and headline side by side ──────── The number and kind now run full width across the top of each row, so the eye reads the label, then the picture, then the headline, instead of the label being squeezed into the same column as the text. */ .trest a{ grid-template-columns:190px 1fr; grid-template-areas:"tag tag" "art bd"; row-gap:12px;column-gap:var(--s4); align-items:start; } .trest a > .tag{grid-area:tag;margin-bottom:0} .trest .art{grid-area:art} .trest .bd{grid-area:bd} .trest h4{font-size:18.5px} /* The lead artwork is not a photograph, it is a designed panel with type in it, so cropping it cuts the words off. Contained on paper, the whole thing shows whatever proportion it was made at. */ .tlead .art{background:var(--paper)} .tlead .art img{object-fit:contain} @media(max-width:900px){ .trest a{grid-template-columns:130px 1fr} .trest h4{font-size:16px} } @media(max-width:520px){ .trest a{grid-template-columns:104px 1fr} } /* The lead panel now takes its own proportions rather than being fitted into a 16/9 slot. Contained inside a fixed ratio it had to shrink to fit, which made the biggest thing on the row the smallest it could be. Generated art keeps the 16/9 slot, since it has no natural size of its own. */ .tlead .art:has(img){aspect-ratio:auto} .tlead .art:has(img) img{width:100%;height:auto;object-fit:fill} /* ── The record banner, with the record's own image ───────────────────── Title on the left, the piece's artwork on the right. The image sits on a hairline rather than a panel, so it reads as part of the masthead band instead of a card dropped onto it. */ .rechead.has-hero .wrap{ display:grid;grid-template-columns:1.1fr .9fr; column-gap:var(--s7);align-items:center; } .rechead.has-hero .crumbs{grid-column:1/-1} .rechero{ margin:0;align-self:center; border:1px solid rgba(255,255,255,.14); background:rgba(255,255,255,.03); } .rechero img{display:block;width:100%;height:auto} @media(max-width:900px){ .rechead.has-hero .wrap{grid-template-columns:1fr;row-gap:var(--s5)} .rechero{order:2} } /* A poster made from the record's own still. The play mark keeps its contrast over any image by sitting on a scrim rather than on the picture itself. */ .ytposter.has-img{position:relative;display:block;padding:0;border:0;overflow:hidden;background:var(--ink)} .ytposter.has-img img{display:block;width:100%;height:auto;transition:transform .5s ease,opacity .3s ease} .ytposter.has-img::after{content:"";position:absolute;inset:0;background:rgba(10,11,13,.18);transition:background .3s ease} .ytposter.has-img:hover img{transform:scale(1.02)} .ytposter.has-img:hover::after{background:rgba(10,11,13,.06)} .ytposter.has-img .play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:2} /* Over a real still the play mark needs to be legible on any part of the picture, so it becomes a circle with a soft ring rather than a brass square dropped on whatever happens to be underneath it. */ .ytposter.has-img .play{ width:72px;height:72px;border-radius:50%; background:rgba(20,21,24,.62);color:#fff; border:1.5px solid rgba(255,255,255,.85); backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px); box-shadow:0 6px 26px rgba(0,0,0,.34); } .ytposter.has-img:hover .play{ background:var(--brass);color:var(--ink);border-color:var(--brass); transform:translate(-50%,-50%) scale(1.06); } .ytposter.has-img .play svg{margin-left:3px;width:28px;height:28px} @media(max-width:700px){.ytposter.has-img .play{width:56px;height:56px}} /* A reading column with no rail beside it sits in the middle of the page. Left-aligned it leaves half the screen empty and reads as a broken layout rather than a measure. Articles and videos are unaffected: they carry a rail, so their column is left by design. */ .recbody .reccol:not(.has-rail){margin-left:auto;margin-right:auto} /* The subject card is now a single link rather than a box with a link in the corner, so the picture and the headline are both targets. */ a.stream{text-decoration:none;color:inherit;display:flex;flex-direction:column} a.stream .ex{margin-top:auto} a.stream:hover h4{color:var(--brass-deep)} a.stream:focus-visible{outline:2px solid var(--brass);outline-offset:3px} /* The flagship event card carries the event's own cover photograph. The copy sits over it, so a scrim keeps the type legible whatever the picture is: dark at the foot where the words are, clearing towards the top. */ .evmain{position:relative;overflow:hidden} .evmain .evbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover; z-index:0;transition:transform .6s ease} .evmain .evscrim{position:absolute;inset:0;z-index:1; background:linear-gradient(180deg,rgba(16,17,20,.30) 0%,rgba(16,17,20,.58) 46%,rgba(16,17,20,.88) 100%)} .evmain:hover .evbg{transform:scale(1.03)} .evmain > *:not(.evbg):not(.evscrim){position:relative;z-index:2} /* ── Who is in the piece, in the rail ─────────────────────────────────── story.css styles this panel for a wide page: two columns, each person in a bordered box. In a 300px rail that puts a 52px face beside a five-line designation and the name wraps to nothing. These rules put it back to one person per line, which is what the rail was designed for. It also carries a border-top there, which met the previous block's border-bottom and drew the panel as two rules with an empty band between them. One divider is enough. */ .recrail .recppl{margin-top:0;padding-top:0;border-top:none} .recrail .pplgrid{grid-template-columns:1fr;gap:0} .recrail .ppl{ display:grid;grid-template-columns:44px 1fr;gap:13px;align-items:start; border:none;padding:11px 0; } .recrail .ppl + .ppl{border-top:1px solid var(--line)} .recrail .ppl:first-child{padding-top:0} .recrail .ppl:last-child{padding-bottom:0} .recrail .ppl .pic{border-radius:50%;overflow:hidden} .recrail .ppl .who b{font-size:14.5px;line-height:1.3} .recrail .ppl .who span{margin-top:2px;font-size:12px;line-height:1.42} .recrail .ppl:hover{border-color:var(--line)}