, so the heading rule no longer reaches it and the tracking would go. */ letter-spacing: .01em; text-shadow: 0 2px 30px rgba(0, 0, 0, .35); } .hero-text { font-size: clamp(1.1rem, 1.6vw, 1.32rem); line-height: 1.6; color: rgba(244, 239, 228, .85); max-width: 34rem; margin-bottom: 2.2rem; } .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; } .hero-points { list-style: none; margin: 2.6rem 0 0; padding: 0; display: flex; gap: 0; flex-wrap: wrap; border-top: 1px solid rgba(201, 162, 76, .28); padding-top: 1.4rem; } .hero-points li { display: flex; flex-direction: column; gap: .15rem; padding-right: 2rem; margin-right: 2rem; border-right: 1px solid rgba(244, 239, 228, .18); } .hero-points li:last-child { border-right: 0; margin-right: 0; padding-right: 0; } .hero-points b { font: 400 1.15rem var(--display); color: var(--gold-300); letter-spacing: .02em; } .hero-points span { font-size: .88rem; color: var(--muted); } .hero-caption { margin: 1.4rem 0 0; font: 600 .7rem var(--sans); letter-spacing: .24em; text-transform: uppercase; color: rgba(244, 239, 228, .5); } .slide-play { position: absolute; left: 50%; top: 50%; z-index: 4; transform: translate(-50%, -50%); display: inline-flex; align-items: center; gap: .6rem; padding: 1rem 1.6rem 1rem 1.2rem; cursor: pointer; background: rgba(7, 13, 26, .6); border: 1px solid var(--gold); border-radius: 999px; color: var(--gold-300); font: 700 .78rem var(--sans); letter-spacing: .2em; text-transform: uppercase; backdrop-filter: blur(8px); box-shadow: 0 0 0 8px rgba(201, 162, 76, .12), 0 20px 40px -20px rgba(0, 0, 0, .8); } .slide-play svg { width: 22px; height: 22px; } .slide-play:hover { background: var(--gold); color: var(--navy-950); } .hero-ui { position: absolute; left: 0; right: 0; bottom: 2.4rem; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .hero-dots { display: flex; gap: .7rem; } .hero-dot { width: 64px; height: 24px; padding: 0; background: none; border: 0; cursor: pointer; position: relative; } .hero-dot::before { content: ''; position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: rgba(244, 239, 228, .28); } .hero-dot-fill { position: absolute; left: 0; right: 0; top: 11px; height: 2px; background: var(--gold); transform: scaleX(0); transform-origin: left; } .hero-nav { display: flex; align-items: center; gap: .8rem; } .hero-count { font: 500 .9rem var(--sans); letter-spacing: .2em; color: var(--muted); margin-right: .8rem; } .hero-count b { color: var(--gold-300); font-weight: 600; } .hero-arrow { width: 48px; height: 48px; border-radius: 50%; background: rgba(7, 13, 26, .4); border: 1px solid rgba(201, 162, 76, .5); color: var(--gold-300); cursor: pointer; display: grid; place-items: center; transition: background .3s, border-color .3s, transform .3s var(--ease); } .hero-arrow svg { width: 20px; height: 20px; } .hero-arrow:hover { background: var(--gold); color: var(--navy-950); border-color: var(--gold); transform: scale(1.06); } .scroll-cue { position: absolute; right: 4vw; bottom: 2.6rem; z-index: 5; display: none; align-items: center; gap: .8rem; text-decoration: none; font: 600 .68rem var(--sans); letter-spacing: .3em; text-transform: uppercase; color: var(--muted); writing-mode: vertical-rl; } .scroll-cue i { width: 1px; height: 56px; background: linear-gradient(180deg, var(--gold), transparent); display: block; } @media (min-width: 1100px) { .scroll-cue { display: flex; } .hero-ui { padding-right: 6rem; } } /* -------------------------------------------------------------- sections */ .section { position: relative; padding: clamp(5rem, 9vw, 8.5rem) 0; } .section-dark { background: var(--navy-950); } .section-navy { background: linear-gradient(180deg, var(--navy-900), var(--navy-950)); } .section-light { background: var(--paper); } .section-light + .section-light { padding-top: 0; } /* stats */ .stats-band { padding: 3.5rem 0; border-block: 1px solid var(--line-dark); } .stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 2rem; } .stat { position: relative; padding-left: 1.4rem; border-left: 1px solid var(--line-dark); } .stat-num { font: 400 clamp(2.4rem, 4vw, 3.4rem)/1 var(--display); color: var(--gold-300); margin-bottom: .5rem; } .stat-label { font: 600 .74rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--muted); margin: 0; } /* cards */ .cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } .card { display: flex; flex-direction: column; text-decoration: none; padding: 2.2rem 2rem 2rem; border-radius: 4px; background: #fff; border: 1px solid var(--line-light); position: relative; overflow: hidden; transition: transform .4s var(--ease), box-shadow .4s var(--ease), border-color .4s; } .card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: linear-gradient(180deg, var(--gold-300), var(--gold-700)); transform: scaleY(0); transform-origin: top; transition: transform .45s var(--ease); } .card:hover { transform: translateY(-6px); box-shadow: 0 30px 50px -30px rgba(11, 22, 48, .45); border-color: rgba(201, 162, 76, .5); } .card:hover::before { transform: scaleY(1); } .card-maxim { font: italic 600 1.05rem var(--serif); color: var(--gold-700); margin-bottom: .8rem; display: block; } .card-maxim i { font-style: normal; font-family: var(--sans); font-weight: 400; font-size: .9rem; color: var(--ink-2); margin-left: .5rem; } .card h3 { color: var(--ink); font-size: 1.45rem; } .card p { color: var(--ink-2); font-size: 1rem; flex: 1; } .card-link { font: 700 .74rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--ink); display: inline-flex; gap: .5rem; align-items: center; } .card-link i { font-style: normal; transition: transform .3s var(--ease); color: var(--gold-700); } .card:hover .card-link i, .area:hover .card-link i { transform: translateX(6px); } /* strategy: sticky chess */ /* The section and its sticky pane must be measured in the SAME viewport unit. On iOS `vh` is the large viewport (address bar retracted) and `svh` the small one (address bar shown); mixing them left the scroll distance and the pane disagreeing by the height of the bar, and the game jumped as it slid. `vh` first for engines that predate `svh`. */ .strategy { position: relative; height: 240vh; height: 240svh; background: var(--navy-900); } .strategy-sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; display: flex; align-items: center; } .strategy-sticky::before { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse at 70% 50%, rgba(22, 48, 95, .55), transparent 60%), linear-gradient(90deg, var(--navy-900) 0%, rgba(11, 22, 48, .7) 45%, rgba(11, 22, 48, .15) 100%); } .strategy-board { position: absolute; inset: 0; width: 100%; height: 100%; } /* the panel is pinned at one viewport, and draft 9 put an epigraph and five points where three used to sit, so the copy column is wider and the list is set tighter than it was */ .strategy-copy { position: relative; z-index: 2; max-width: 38rem; } /* the heading is a quotation now, so it is set as one: serif italic rather than display caps, and smaller than a section heading because it runs to a sentence and a half */ .strategy-copy h2 { font: italic 500 clamp(1.45rem, 2.15vw, 1.95rem)/1.34 var(--serif); max-width: 34rem; letter-spacing: .005em; } .strategy-copy h2 em { font-style: normal; color: var(--gold-300); } .strategy-copy .lead { font-size: 1.12rem; line-height: 1.58; max-width: 36rem; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; } /* with the heading carrying the quotation, this is usually just the attribution, and it needs air beneath it or it reads as a label on the paragraph below */ .strategy-epigraph { margin: .9rem 0 1.5rem; padding-left: 1.1rem; border-left: 1px solid rgba(201, 162, 76, .5); } .strategy-epigraph blockquote { margin: 0; } .strategy-epigraph em { display: block; font: italic 500 1.28rem var(--serif); color: var(--gold-300); } .strategy-epigraph span { display: block; font-size: .95rem; color: var(--muted); margin-top: .1rem; } .strategy-epigraph figcaption { margin-top: .35rem; font: 600 .68rem var(--sans); letter-spacing: .26em; text-transform: uppercase; color: var(--gold); } .tenets { list-style: none; padding: 0; margin: 1.4rem 0 0; border-top: 1px solid var(--line-dark); } .tenets li { padding: .62rem 0; border-bottom: 1px solid var(--line-dark); color: var(--muted); font-size: 1rem; line-height: 1.5; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; } /* the lead-in is a label, not running copy, so it stays ranged left */ .tenets strong { display: block; font: 400 1.12rem var(--display); color: var(--gold-300); margin-bottom: .12rem; text-align: left; hyphens: manual; } /* ------------------------------------------------- page hero (inner pages) overflow:hidden matters: site.js scales .page-hero-img on entry, and without a clip that scaled image widens the document. */ /* A floor, not a fixed height, and room at the top for the fixed nav: the fix the commentary heroes had first (see .page-hero-commentary). With a fixed height a long title grew upward under the header - on 28 September the practice eyebrow sat on the logo at 1280x720 and on phones. Each floor is the height the fixed rule gave, so where the copy fits nothing moves. */ .page-hero { position: relative; height: auto; min-height: max(68vh, 430px); overflow: hidden; display: flex; align-items: flex-end; background: var(--black); padding-top: calc(var(--nav-h) + 1.4rem); padding-bottom: clamp(2.5rem, 5vw, 4.5rem); } .page-hero-tall { min-height: max(80vh, 520px); } /* The practice hero was 80vh, which put the title and a Latin maxim on the first screen and nothing a reader could act on. It now takes a little over half the laptop screen, and on a phone it is only as tall as what is in it, so the standfirst starts on the first screen instead of the second. */ .page-hero-practice { min-height: max(58vh, 420px); } @media (max-width: 760px) { .page-hero-practice { height: auto; min-height: 0; padding-top: calc(var(--nav-h) + 1.4rem); } } /* not .hero-actions: that class belongs to the home page slider and this would have changed its button spacing */ .page-hero-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 1.5rem 0 0; } .page-hero-actions .btn { margin: 0; } /* The phone number is the second action, so it is outlined rather than gold; two gold buttons side by side read as a choice between equals. */ .page-hero .hero-call { color: var(--ivory); border-color: rgba(244, 239, 228, .45); } /* the mark sits on the text baseline, not above it */ .ico-wa { flex: none; vertical-align: -2px; margin-right: .1rem; } .page-hero .hero-call:hover { border-color: var(--gold); color: var(--gold-300); } @media (max-width: 420px) { .page-hero-actions { gap: .55rem; } .page-hero-actions .btn { flex: 1 1 100%; justify-content: center; } } .page-hero::after { content: ''; position: absolute; inset: 0; pointer-events: none; z-index: 1; background: linear-gradient(180deg, rgba(7, 13, 26, .74) 0%, rgba(7, 13, 26, .42) 45%, rgba(7, 13, 26, .93) 100%); } .page-hero-media { position: absolute; inset: -8% 0; z-index: 0; will-change: transform; } .page-hero-img { width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 40%; will-change: transform; } /* no width here: the copy is a .wrap, and its own width plus auto margins are what centre it inside the flex row */ .page-hero-copy { position: relative; z-index: 2; } .maxim-line { margin-top: .9rem; font-size: 1.02rem; color: var(--muted); } .maxim-line em { font-family: var(--serif); font-style: italic; font-size: 1.15rem; color: var(--gold-300); margin-right: .7rem; } /* ------------------------------------------------------ split / image frames */ .split { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: center; } .split-rev .img-frame { order: 2; } .img-frame { position: relative; margin: 0; aspect-ratio: 4 / 5; overflow: hidden; border-radius: 4px; } .img-frame img { width: 100%; height: 115%; object-fit: cover; will-change: transform; } .img-frame::after { content: ''; position: absolute; inset: 1.2rem; border: 1px solid rgba(201, 162, 76, .55); pointer-events: none; border-radius: 2px; } .img-frame-wide { aspect-ratio: 16 / 10; margin-top: 2.5rem; } .split-copy .btn { margin-top: .5rem; } /* the heading run across the top instead of beside the picture. With it gone from the copy column the two sides no longer match at 4:5, so the frame is squarer and the copy is centred against it. */ .split-head { margin-bottom: clamp(2rem, 3.5vw, 3rem); } /* a landscape photograph in the upright 4:5 frame loses nearly half its width; this one rule holds at every width, including the mobile override */ .split-wide .img-frame { aspect-ratio: 16 / 10; } /* A portrait of a person keeps the upright frame on a phone. The blanket `.img-frame { aspect-ratio: 4 / 3 }` in the 900px block is right for a landscape photograph in a single column and wrong for a standing figure: it showed the middle 56% of the source, centred, which cut the head off just above the beard. Two classes, so it beats that one-class rule wherever the two are read - a media query adds no specificity of its own. */ .split-portrait .img-frame { aspect-ratio: 4 / 5; } /* a step smaller, for the second use of the block further down a page: the picture gives up a little of the row and the type comes down with it */ .split-compact { grid-template-columns: .88fr 1.12fr; gap: clamp(2rem, 4vw, 3.4rem); } /* reversed, the picture sits in the second column, so the narrow one has to move with it - otherwise the reversed block's picture comes out the wider of the two and the pair do not match */ .split-compact.split-rev { grid-template-columns: 1.12fr .88fr; } .split-compact h2 { font-size: clamp(1.7rem, 3vw, 2.5rem); } .split-compact .prose p { font-size: .95rem; } .split-compact .btn { padding: .85rem 1.45rem; font-size: .74rem; } @media (max-width: 900px) { /* .split-compact.split-rev above is two classes, so the one-column rule has to be two as well or the reversed block keeps its columns on a phone and the picture comes out a hundred pixels wide */ .split-compact, .split-compact.split-rev { grid-template-columns: 1fr; } } .split-headed { align-items: center; grid-template-columns: .78fr 1.22fr; } /* a portrait of a person needs a portrait frame: the 5:4 that suited a landscape stock shot cropped this one to a head. The crop is biased upward so what it loses is jacket, not hair. */ .split-headed .img-frame { aspect-ratio: 17 / 25; } .split-headed .img-frame img { object-position: 50% 12%; } .split-headed .split-copy { padding-block: .5rem; } /* single column below 900px: without a cap the portrait fills the whole width and dwarfs the copy under it */ @media (max-width: 900px) { /* width:100% is load-bearing - the shots in a rotating set are absolutely positioned, so auto margins alone shrink the figure to nothing */ .split-headed .img-frame { width: 100%; max-width: 24rem; margin-inline: auto; } } /* a picture set: the shots are stacked and cross-faded on a timer */ .img-frame-set .img-frame-inner { position: absolute; inset: 0; } .img-frame-shot { position: absolute; inset: 0; width: 100%; height: 115%; object-fit: cover; opacity: 0; will-change: opacity; } .img-frame-set .img-frame-shot.is-on { opacity: 1; } .img-frame:not(.img-frame-set) .img-frame-shot { position: static; opacity: 1; } /* --------------------------------------------------------- practice areas */ .areas { display: grid; grid-template-columns: 1fr 1fr; gap: 1.6rem; } .area { display: block; text-decoration: none; color: inherit; overflow: hidden; background: #fff; border: 1px solid var(--line-light); border-radius: 4px; transition: transform .4s var(--ease), border-color .4s var(--ease), box-shadow .4s var(--ease); } .area:hover { border-color: var(--gold); } .area-img { display: block; aspect-ratio: 16 / 9; overflow: hidden; background: var(--navy-950); } .area-img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform .7s var(--ease); } .area:hover .area-img img { transform: scale(1.05); } .area-body { display: block; padding: 1.7rem 1.8rem 1.9rem; } /* --------------------------------------------------------------- the ledger */ .results-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } .result { padding: 2rem; border: 1px solid var(--line-dark); border-radius: 4px; background: rgba(16, 33, 74, .35); transition: border-color .3s, transform .4s var(--ease); } .result:hover { border-color: rgba(201, 162, 76, .6); transform: translateY(-4px); } .result-meta { display: flex; gap: .8rem; margin-bottom: .8rem; font: 600 .72rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold); } .quotes { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.4rem; } .quote { padding: 2rem; border: 1px solid var(--line-dark); border-radius: 4px; background: rgba(16, 33, 74, .35); } /* ------------------------------------------------- a practice area's own page */ .detail-grid { display: grid; grid-template-columns: 1.4fr .7fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; } /* 62ch measured 73 characters a line in Manrope at 1440. 33em lands at about 64, inside the 60-70 a reader's eye tracks without losing the line. */ .detail-body p { max-width: 33em; font-size: 1.08rem; } /* The standfirst was the same size and colour as the body, so nothing marked where to start reading. */ .detail-body > p.lead { font-size: 1.25rem; line-height: 1.55; color: var(--ink); max-width: 30em; margin-bottom: 1.6rem; } /* More air above a heading than below it, so each section reads as its own thing rather than as a caption on the paragraph before. The gold dash is the eyebrow motif used everywhere else on the site. */ .detail-sub { position: relative; font-size: 1.9rem; color: var(--ink); margin-top: 4rem; margin-bottom: 1rem; padding-top: 1.6rem; } .detail-sub::before { content: ''; position: absolute; top: 0; left: 0; width: 2.4rem; height: 2px; background: var(--gold); } .detail-body > h2.detail-sub:first-child { margin-top: 0; } /* The subheadings inside a practice-area body. Quieter than .detail-sub, which divides the page into its numbered sections: these divide one of those sections into its subjects, so they take the same serif but no gold rule and about two-thirds of the size. Colour is set here because paper.css paints paragraphs on a light section and says nothing about headings. */ .detail-h3 { font-size: 1.28rem; color: var(--ink); margin: 2.4rem 0 .7rem; } .detail-body > .detail-h3:first-child { margin-top: 0; } .detail-h3 + p { margin-top: 0; } /* ---- Which of these is you? ------------------------------------------------ The first scannable thing on the page. A reader finds themselves in a list far faster than in seven paragraphs, which is what this replaces at the top of the page. */ .situations { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 17rem), 1fr)); gap: .8rem; } .situation-row { display: flex; align-items: flex-start; gap: .9rem; height: 100%; padding: 1rem 1.1rem; text-decoration: none; background: rgba(255, 255, 255, .55); border: 1px solid var(--line-light); border-radius: 2px; transition: border-color .3s var(--ease), transform .3s var(--ease), box-shadow .3s var(--ease); } .situation-text { flex: 1; } .situation-text strong { display: block; font: 400 1.08rem/1.32 var(--display); color: var(--ink); } .situation-text > span { display: block; margin-top: .3rem; font-size: .92rem; line-height: 1.5; color: var(--ink-2); text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; } .situation-go { flex: none; align-self: center; color: var(--gold-700); font-style: normal; transition: transform .3s var(--ease); } .situation-row:hover { border-color: var(--gold); transform: translateY(-2px); box-shadow: 0 20px 40px -30px rgba(11, 22, 48, .4); } .situation-row:hover .situation-go { transform: translateX(4px); } .situation-row:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* ---- Related areas --------------------------------------------------------- Out of the sidebar, which on a phone sat below the whole article. */ .related { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); gap: .6rem; } .related a { display: flex; align-items: center; justify-content: space-between; gap: .8rem; padding: .8rem 1rem; text-decoration: none; color: var(--ink); border: 1px solid var(--line-light); border-radius: 2px; font-size: .98rem; transition: border-color .3s var(--ease), color .3s var(--ease); } .related a span { color: var(--gold-700); transition: transform .3s var(--ease); } .related a:hover { border-color: var(--gold); color: var(--gold-700); } .related a:hover span { transform: translateX(4px); } /* ---- the enquiry card where the sidebar has stacked ----------------------- Below 1100px the sidebar drops under the whole article, so its enquiry card landed 7-11 screens down on a phone. This one sits right after the situations; the sidebar's copy is hidden at the same width so there is never a second of them. */ .enquiry-compact { display: none; } @media (max-width: 1100px) { .enquiry-compact { display: block; margin: 2rem 0 0; padding: 1.4rem 1.5rem; background: var(--navy-950); color: var(--ivory); border-radius: 3px; } .enquiry-compact h3 { margin: 0 0 .6rem; font-size: 1.35rem; color: var(--ivory); } /* `.section-light p:not(.eyebrow):not(.lead)` in paper.css is (0,3,1) and paints every paragraph on a paper section with ink. This card is navy, so that put dark slate on navy at 1.94:1. Matched, and later in the cascade. */ .section-light .enquiry-compact p:not(.eyebrow) { color: var(--muted); } .enquiry-compact p { margin: 0; max-width: none; } /* the eyebrow is a
too, and the blanket margin above flattened it onto the heading */ .enquiry-compact .eyebrow { margin-bottom: .9rem; } .enquiry-compact-actions { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: 1.1rem !important; } .enquiry-compact-actions .btn { margin: 0; flex: 1 1 12rem; justify-content: center; } .enquiry-compact .btn-outline { color: var(--ivory); border-color: rgba(244, 239, 228, .45); } .detail-side .side-card { display: none; } } /* ---- On this page --------------------------------------------------------- A laptop-only index of the page, with the section being read marked. Below 1100px the sidebar stacks under the article, where an index is no use. */ .onthispage ul { list-style: none; padding: 0; margin: 0; } .onthispage li { border-top: 1px solid var(--line-light); } .onthispage li:last-child { border-bottom: 1px solid var(--line-light); } /* .side-list.onthispage, not .onthispage alone: `.side-list a` further down has the same weight and came later, so it took the padding back and the gold bar sat on the first letter of whichever section was being read. */ .side-list.onthispage a { display: block; padding: .52rem 0 .52rem .9rem; position: relative; text-decoration: none; color: var(--ink-2); font-size: .94rem; transition: color .25s var(--ease); } .onthispage a::before { content: ''; position: absolute; left: 0; top: 50%; width: 2px; height: 0; background: var(--gold); transform: translateY(-50%); transition: height .25s var(--ease); } .onthispage a:hover { color: var(--gold-700); } .onthispage a.is-here { color: var(--ink); } .onthispage a.is-here::before { height: 62%; } .onthispage a:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } @media (max-width: 1100px) { .onthispage { display: none; } } /* ---- the phone tap bar ---------------------------------------------------- The header's enquiry button is hidden below 900px, so without this there is no way to get in touch until the foot of the page. */ .tapbar { display: none; } @media (max-width: 900px) { .tapbar[hidden] { display: none; } .tapbar { display: flex; gap: .6rem; position: fixed; left: 0; right: 0; bottom: 0; z-index: 120; padding: .7rem .9rem calc(.7rem + env(safe-area-inset-bottom, 0px)); background: rgba(7, 13, 26, .94); border-top: 1px solid rgba(201, 162, 76, .32); transform: translateY(110%); transition: transform .35s var(--ease); } .tapbar.is-up { transform: none; } .tapbar .btn { flex: 1; margin: 0; justify-content: center; padding: .9rem 1rem; } .tapbar .btn-outline { color: var(--ivory); border-color: rgba(244, 239, 228, .45); } /* the back-to-top control clears the bar rather than sitting behind it */ body:has(.tapbar.is-up) .totop { bottom: calc(4.9rem + env(safe-area-inset-bottom, 0px)); } } @media (prefers-reduced-motion: reduce) { .tapbar { transition: none; } } /* the closing band carries the phone number beside the button */ .cta-actions { display: flex; flex-wrap: wrap; gap: .7rem; margin: 0; } .cta-actions .btn { margin: 0; } .cta-band .cta-actions .btn-outline { color: var(--ivory); border-color: rgba(244, 239, 228, .45); } .cta-band .cta-actions .btn-outline:hover { border-color: var(--gold); color: var(--gold-300); } @media (max-width: 560px) { .cta-actions .btn { flex: 1 1 100%; justify-content: center; } } .steps { counter-reset: step; list-style: none; padding: 0; margin: 0; } .steps li { position: relative; padding: 1.2rem 0 1.2rem 3.6rem; border-top: 1px solid var(--line-light); color: var(--ink-2); } .steps li::before { counter-increment: step; content: counter(step, upper-roman); position: absolute; left: 0; top: 1.25rem; font: 400 1.1rem var(--display); color: var(--gold-700); } .steps strong { display: block; font: 400 1.15rem var(--display); color: var(--ink); margin-bottom: .15rem; } /* The sidebar is about 1,000px tall and a laptop leaves it 600-780, so pinning its head - which is all `position: sticky` does - keeps its foot off the screen for the whole article. site.js sets `is-follow` and then carries it with the reader until its foot is in view. The stylesheet makes it sticky only once that class is there, so with no script it simply scrolls with the article and every part of it is seen. The rule is inside the query rather than carrying a second class, because `.detail-side.is-follow` would outweigh the one-class `position: static` below and take the sidebar out of the flow on a phone. */ @media (min-width: 1101px) { .detail-side.is-follow { position: sticky; top: 6.5rem; } } .detail-side { display: flex; flex-direction: column; gap: 1.4rem; } /* A heading jumped to from the index used to land under the header. The header is 7.5rem and it hides while the reader is going down the page, so this only has to clear it at the moment of the jump. */ .detail-body [id], .faq-item[id] { scroll-margin-top: calc(var(--nav-h) + 1rem); } .side-card { background: var(--navy-900); color: var(--ivory); padding: 2.2rem; border-radius: 4px; border: 1px solid var(--line-dark); } .side-card h3 { font-size: 1.4rem; } .side-card p { color: var(--muted) !important; } .side-card .btn { width: 100%; margin: .4rem 0 1.2rem; } .side-contact { margin: 0; line-height: 1.9; font-size: .95rem; } .side-contact a { text-decoration: none; color: var(--gold-300); } .side-list { padding: 1.6rem 2rem; background: #fff; border: 1px solid var(--line-light); border-radius: 4px; } .side-list ul { list-style: none; margin: 0; padding: 0; } .side-list li + li { border-top: 1px solid var(--line-light); } .side-list a { display: block; padding: .6rem 0; text-decoration: none; color: var(--ink); font-weight: 500; } .side-list a:hover { color: var(--gold-700); } /* the counsel card says where it goes */ .side-counsel-go { display: block; margin-top: .3rem; font: 600 .7rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-700); } .side-counsel-go i { font-style: normal; display: inline-block; transition: transform .3s var(--ease); } .side-counsel a:hover .side-counsel-go i { transform: translateX(4px); } .side-counsel a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* ------------------------------------------------------------------ oddments */ /* The closing band. paper.css lists .cta-band among the sections that keep ink colouring - ivory text, gold accent - but colour is all it sets. The band has to paint its own ground and its own padding, and the rule doing that was lost with the twenty-six destroyed in the styles.css accident. Without it the band was ivory text on the paper sheet at 1.06:1, on every page of the site. See docs/RECORD.md. */ .cta-band { position: relative; background: linear-gradient(180deg, var(--navy-900), var(--navy-950)); padding: clamp(3.4rem, 6vw, 5.4rem) 0; border-top: 1px solid rgba(201, 162, 76, .3); } .cta-inner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: clamp(1.5rem, 4vw, 3rem); } .ico { flex: none; vertical-align: middle; } /* The panel is pinned to one viewport. With the short lead there is room for the copy at full size on every common screen except the shortest, which gets one mild step down rather than the two tiers this needed when the lead ran to a paragraph. */ @media (min-width: 901px) and (max-height: 790px) { .strategy-copy h2 { font-size: 1.62rem; } .strategy-copy .lead { font-size: 1.05rem; } .strategy-epigraph { margin: .8rem 0 1.2rem; } .tenets { margin-top: 1.1rem; } .tenets li { padding: .52rem 0; font-size: .95rem; line-height: 1.46; } .tenets strong { font-size: 1.06rem; } } /* ---- what a practice area covers ------------------------------------------ A table read in two columns, set by alignment rather than by rules. The icon is the row marker; nothing is drawn. */ .covers-head { font: 400 1.15rem var(--display); color: var(--gold-700); margin: 2.4rem 0 .2rem; letter-spacing: .01em; } .covers { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: 1.5rem 2.4rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); align-items: start; } /* the row is always one element, so a linked cell lays out like a plain one instead of dropping into the icon column */ .cover { margin: 0; display: block; } .cover-row { display: grid; grid-template-columns: 1.6rem minmax(0, 1fr); column-gap: .85rem; align-items: start; } .cover-link { text-decoration: none; color: inherit; position: relative; grid-template-columns: 1.6rem minmax(0, 1fr) auto; } .cover-ico { display: grid; place-items: center; width: 1.6rem; height: 1.6rem; color: var(--gold-700); opacity: .85; transition: color .3s var(--ease), transform .3s var(--ease), opacity .3s var(--ease); } /* The term was 1.02rem of Marcellus against a 0.94rem Manrope description, which reads as the smaller of the two. The title now leads on both size and weight; --ink-2 is already the muted ink against --ink, so the description steps back without inventing a token that might fail contrast. */ .cover-text strong { display: block; font: 400 1.12rem/1.3 var(--display); color: var(--ink); margin-bottom: .2rem; letter-spacing: .005em; } /* The explanatory line sits under a title, so it is set like the rest of the running copy on these pages: justified, with hyphenation, because these columns are narrow enough that justification alone would open rivers. The title above it stays ranged left - it is a label, not a paragraph. */ .cover-text > span { display: block; font-size: .95rem; line-height: 1.55; color: var(--ink-2); text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; } .cover-go { align-self: center; color: var(--gold-700); font-style: normal; opacity: 0; transform: translateX(-4px); transition: opacity .3s var(--ease), transform .3s var(--ease); } .cover-link:hover .cover-go { opacity: 1; transform: translateX(0); } .cover-link:hover .cover-ico { color: var(--gold); transform: translateY(-2px); opacity: 1; } .cover-link:hover .cover-text strong { color: var(--gold-700); } .cover-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; border-radius: 2px; } @media (max-width: 620px) { .covers { grid-template-columns: 1fr; gap: 1.3rem; } } /* ---- the one picture inside a practice page that has no plates of its own -- */ .detail-figure { margin: 2.8rem 0 0; } .detail-figure-media { display: block; position: relative; overflow: hidden; border-radius: 3px; aspect-ratio: 16 / 9; background: var(--navy-950); } .detail-figure-media img { width: 100%; height: 100%; object-fit: cover; display: block; } .detail-figure-media::after { content: ''; position: absolute; inset: .9rem; border: 1px solid rgba(201, 162, 76, .5); pointer-events: none; border-radius: 2px; } .detail-figure figcaption { margin-top: .8rem; font: 400 .92rem/1.6 var(--serif); font-style: italic; color: var(--ink-2); text-align: left; } /* ---- the plates: one at each section break --------------------------------- Full column width, never floated, never inside a paragraph run: each closes one section and the next heading opens under it. The heading brings its own 4rem, so a plate carries no bottom margin of its own. The cine and float sizes below are what the plates were before the page was reordered. Nothing renders them now; spread_plates() in app.py is their other half, and both go together or not at all. */ .plate { margin: 3.2rem 0 0; position: relative; } .plate-media { display: block; position: relative; overflow: hidden; border-radius: 3px; background: var(--navy-950); aspect-ratio: 16 / 9; } /* The picture overhangs the frame by 7% top and bottom and drifts by less than 6% either way (effects.js), so the drift can never uncover the frame's own ground. It used to start flush with the top edge, and could. */ .plate-media img { position: absolute; left: 0; top: -7%; width: 100%; height: 114%; object-fit: cover; display: block; will-change: transform; } /* The keyline is always there, faintly, and warms under a pointer. It was hover-only, which on a phone meant never. */ .plate-media::after { content: ''; position: absolute; inset: .75rem; border: 1px solid rgba(201, 162, 76, .6); pointer-events: none; border-radius: 2px; opacity: .5; transition: opacity .45s var(--ease); } .plate:hover .plate-media::after { opacity: 1; } /* A short gold rule, then the words: the eyebrow motif, set in the caption's italic. The rule is held to the caption's first line, so a caption that wraps on a phone is still led by it rather than flanked by it. */ .plate figcaption { display: flex; align-items: flex-start; gap: .8rem; margin-top: .95rem; font: italic 500 1.08rem/1.4 var(--serif); color: var(--ink-2); text-align: left; hyphens: manual; } .plate-rule { flex: none; width: 2.4rem; height: 1px; margin-top: calc(1.08rem * .7); background: var(--gold); transform-origin: left center; } .plate-cap { min-width: 0; } .plate-wide .plate-media { aspect-ratio: 16 / 9; } .plate-cine .plate-media { aspect-ratio: 21 / 9; } .plate-float-right, .plate-float-left { width: 44%; margin-top: .5rem; margin-bottom: 1.2rem; } .plate-float-right { float: right; margin-left: 2rem; } .plate-float-left { float: left; margin-right: 2rem; } .plate-float-right .plate-media, .plate-float-left .plate-media { aspect-ratio: 4 / 5; } /* a float must not hang past the section it was set in */ .detail-body h2, .detail-body h3, .detail-body .covers, .detail-body .steps, .detail-body .faq { clear: both; } @media (max-width: 720px) { .plate-float-right, .plate-float-left { float: none; width: 100%; margin-left: 0; margin-right: 0; } .plate-float-right .plate-media, .plate-float-left .plate-media, .plate-cine .plate-media { aspect-ratio: 4 / 3; } } /* ---- the quote, carried on the area's own pictures ------------------------- The pictures cross-fade behind it rather than sitting in a row, which is the one place on the page where they are allowed to repeat. */ .quote-band { min-height: 56vh; } .quote-band-media { position: absolute; inset: -12% 0; overflow: hidden; } .quote-band-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; will-change: opacity; } .quote-band-img.is-on { opacity: 1; } /* the pictures that cycle here run from dark towers to a bright meeting room, so the wash is set for the brightest of them, not the average */ .quote-band::after { content: ''; position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 46%, rgba(7, 13, 26, .55), rgba(7, 13, 26, .82) 70%), linear-gradient(180deg, rgba(7, 13, 26, .88), rgba(7, 13, 26, .8) 50%, rgba(7, 13, 26, .94)); } .quote-band .banner-quote { font-size: clamp(1.6rem, 3.2vw, 2.7rem); font-style: italic; } .quote-band .banner-cite { margin-top: .2rem; color: var(--gold-300); } .quote-band .banner-cite::before, .quote-band .banner-cite::after { background: var(--gold-300); } /* ---- film behind a practice title ---------------------------------------- The supplied films are letterboxed on white, so the frame is over-scaled to push the bars outside it. The poster sits on top until the film can play. */ .page-hero .page-hero-film { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transform: scale(1.2); transform-origin: center; opacity: 0; transition: opacity .9s var(--ease); } /* The films he generates carry the generator's mark in the same place every time: a small sparkle at about 89-92% across and 80-87% down. Scaled about the centre, the frame loses 8.3% a side, which leaves the mark in - hidden only when the band happened to be wide enough to crop it off the bottom, and the parallax brought it back as the hero scrolled away. Scaled about a point a quarter of the way across, the frame loses 12.5% on the right and the mark goes whatever shape the window is. Landscape windows only. In a portrait one the band is narrower than the film, the cover crop has already taken far more than that off each side, and moving the point would push a centred subject out of a frame it only just fits. */ @media (min-aspect-ratio: 1/1) { .page-hero .page-hero-film { transform-origin: 25% 50%; } } .page-hero.is-playing .page-hero-film { opacity: 1; } .page-hero.is-playing .page-hero-poster { opacity: 0; } .page-hero-poster { transition: opacity .9s var(--ease); } /* A photograph is chosen dark. A film is not one brightness: the chambers film runs from an overcast noon through a low sun to night, and the conveyancing one opens on a white house. Measured against the brightest tenth of what sits behind each line, under the scrim every hero shares, the conveyancing title fell to 2.98:1 and its maxim to 2.39:1. So a film hero carries more shade through the band the words sit in (.42 -> .56 at the middle stop), its small lines a soft shadow, and its eyebrow the lighter gold - the usual one is a mid-tone and had the least to spare. Across all seven films, at laptop and phone width and at ten moments of each: no heading now averages under 6:1 or falls under 4.5:1 against its brightest tenth; no lead or maxim averages under 4.7:1. The heading gets no shadow. Its words are masked for the split reveal (`.w { overflow: hidden }`), and a blurred shadow clipped to each word's box comes out as a row of tiles - tried, in red, to be sure. */ .page-hero.has-film::after { background: linear-gradient(180deg, rgba(7, 13, 26, .74) 0%, rgba(7, 13, 26, .56) 45%, rgba(7, 13, 26, .93) 100%); } .page-hero.has-film .eyebrow, .page-hero.has-film .lead, .page-hero.has-film .maxim-line { text-shadow: 0 0 18px rgba(7, 13, 26, .85), 0 0 6px rgba(7, 13, 26, .6); } /* three classes, because paper.css paints `.page-hero .eyebrow` with two and loads later */ .page-hero.has-film .eyebrow { color: var(--gold-300); } /* ---- the band that closes a practice page --------------------------------- */ .area-band { min-height: 52vh; } .area-band .banner-quote { font-size: clamp(1.7rem, 3.4vw, 2.9rem); font-style: italic; } /* the shared banner wash lightens through the middle, which is where the gloss sits; this one keeps it dark enough to read over a bright frame */ .area-band::after { background: linear-gradient(180deg, rgba(7, 13, 26, .82), rgba(7, 13, 26, .68) 50%, rgba(7, 13, 26, .9)); } .detail-quote { margin: 2.6rem 0 0; padding: 1.6rem 0 1.6rem 1.8rem; max-width: 58ch; border-left: 2px solid var(--gold); } .detail-quote p { font: 500 1.35rem/1.5 var(--serif); font-style: italic; color: var(--ink); margin: 0; } .detail-quote cite { display: block; margin-top: .7rem; font: 600 .72rem var(--sans); letter-spacing: .22em; text-transform: uppercase; font-style: normal; color: var(--gold-700); } /* cursus */ .cursus-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; } .cursus { list-style: none; margin: 0; padding: 0 0 0 1.6rem; border-left: 1px solid var(--line-dark); } .cursus li { position: relative; display: grid; grid-template-columns: 5rem 1fr; gap: 1rem; padding: .9rem 0; color: var(--muted); } .cursus li::before { content: ''; position: absolute; left: calc(-1.6rem - 5px); top: 1.55rem; width: 9px; height: 9px; border-radius: 50%; background: var(--navy-950); border: 1px solid var(--gold); } .cursus li:last-child::before { background: var(--gold); } .cursus-year { font: 400 1rem var(--display); color: var(--gold-300); } .cursus-what { color: var(--ivory); } /* the contest (about page) */ .contest-grid { display: grid; grid-template-columns: 1.3fr .8fr; gap: clamp(2.5rem, 5vw, 4rem); align-items: center; } .duel-panel { position: relative; padding: .8rem; border: 1px solid rgba(201, 162, 76, .5); border-radius: 4px; background: linear-gradient(135deg, rgba(201, 162, 76, .12), rgba(16, 33, 74, .3)); } .duel-panel::before { content: ''; position: absolute; inset: 4px; border: 1px solid rgba(201, 162, 76, .25); pointer-events: none; border-radius: 3px; } .duel-stage { position: relative; aspect-ratio: 1402 / 1122; overflow: hidden; background: radial-gradient(ellipse at 50% 42%, #EBE0C8, #DCCBA4 72%, #CDB88E); } .duel-layer { position: absolute; inset: 0; width: 100%; height: 100%; display: block; will-change: transform; } .duel-left, .duel-right { transform-origin: 50% 96%; } .duel-rays { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .duel-rays line { stroke: var(--gold); stroke-width: 3; stroke-linecap: round; opacity: 0; } .duel-rays line.pale { stroke: #FFF4D6; stroke-width: 1.5; } .duel-sparks { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .duel-flash { position: absolute; inset: 0; opacity: 0; pointer-events: none; mix-blend-mode: screen; background: radial-gradient(circle at 49.9% 28%, rgba(255, 247, 220, 1), rgba(255, 236, 190, .55) 16%, transparent 42%); } .duel-ring { position: absolute; width: 12%; aspect-ratio: 1; border-radius: 50%; left: calc(49.9% - 6%); top: calc(28% - 7.5%); border: 3px solid var(--gold); opacity: 0; pointer-events: none; box-shadow: 0 0 0 1px rgba(255, 244, 214, .6), 0 0 18px rgba(201, 162, 76, .5); } .duel-replay { position: absolute; right: 1.6rem; bottom: 1.6rem; z-index: 3; font: 700 .68rem var(--sans); letter-spacing: .22em; text-transform: uppercase; background: rgba(7, 13, 26, .85); border: 1px solid rgba(201, 162, 76, .6); color: var(--gold-300); padding: .6rem .95rem; cursor: pointer; border-radius: 2px; transition: background .2s, color .2s; } .duel-replay::before { content: '⚔ '; letter-spacing: 0; } .duel-replay:hover { background: var(--gold); color: var(--navy-950); } .contest-title .w { display: inline-block; } .contest-copy p { color: var(--muted); } /* ledger */ .ledger-card { background: #fff; border: 1px solid var(--line-light); border-radius: 4px; padding: 1rem 1.4rem 1.2rem; overflow-x: auto; } .ledger-card-dark { background: rgba(16, 33, 74, .35); border-color: var(--line-dark); } .ledger { width: 100%; border-collapse: collapse; min-width: 680px; } .ledger th { text-align: left; padding: 1rem .9rem; font: 700 .72rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-700); border-bottom: 1px solid var(--ink); } .ledger-card-dark th { color: var(--gold); border-color: var(--gold); } .ledger td { padding: 1.1rem .9rem; border-bottom: 1px solid var(--line-light); vertical-align: top; color: var(--ink-2); } .ledger-card-dark td { color: var(--muted); border-color: var(--line-dark); } .ledger tr:last-child td { border-bottom: 0; } .ledger .num { font-family: var(--display); color: var(--ink); } .ledger-card-dark .num, .ledger-card-dark strong { color: var(--ivory); } .ledger .strong { color: var(--ink); font-weight: 600; } .ledger-note { margin: 1.2rem .9rem 0; font: italic 500 1rem var(--serif); color: var(--ink-2); } /* contact */ .contact-grid { display: grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2.5rem, 6vw, 5rem); align-items: start; } .contact-list { display: grid; grid-template-columns: 9.5rem 1fr; gap: .8rem 1rem; margin: 0; } .contact-list dt { font: 700 .72rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold); padding-top: .3rem; } .contact-list dd { margin: 0; color: var(--ivory-2); } .contact-list a { text-decoration: none; border-bottom: 1px solid rgba(201, 162, 76, .4); } .contact-list a:hover { border-color: var(--gold-300); color: var(--gold-300); } .contact-form-wrap { background: rgba(16, 33, 74, .35); border: 1px solid var(--line-dark); border-radius: 4px; padding: clamp(1.6rem, 3vw, 2.6rem); } .field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.3rem; } .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 1.4rem; } .field label { font: 700 .72rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: rgba(244, 239, 228, .75); } .field label span { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--muted); } .field input, .field select, .field textarea { font: 400 1.05rem var(--sans); color: var(--ivory); width: 100%; background: rgba(7, 13, 26, .6); border: 1px solid rgba(201, 162, 76, .3); border-radius: 2px; padding: .85rem 1rem; outline: none; transition: border-color .25s, box-shadow .25s; } .field textarea { resize: vertical; line-height: 1.55; } .field select option { background: var(--navy-900); } .field input:focus, .field select:focus, .field textarea:focus { border-color: var(--gold); box-shadow: 0 0 0 3px rgba(201, 162, 76, .18); } .field.has-error input, .field.has-error select, .field.has-error textarea { border-color: #E07A6A; } .field-error { font-size: .9rem; color: #F0A090; min-height: 1.2em; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* How the reply should come: three choices on a line. Two classes on each rule, because `.field label` (0,1,1) would otherwise set the choices in the labels' small capitals. */ .field.field-choice { display: block; border: 0; padding: 0; margin: 0 0 1.3rem; min-width: 0; } .field-choice legend { padding: 0; margin-bottom: .6rem; font: 700 .72rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: rgba(244, 239, 228, .75); } .field-choice .choice-row { display: flex; flex-wrap: wrap; gap: .6rem; } .field-choice .choice { display: inline-flex; align-items: center; gap: .55rem; padding: .62rem 1.05rem; cursor: pointer; border: 1px solid var(--line-dark); border-radius: 2px; background: rgba(7, 13, 26, .55); font: 400 1rem var(--sans); letter-spacing: 0; text-transform: none; color: var(--ivory); transition: border-color .2s; } .field-choice .choice span { color: var(--ivory); font-weight: 400; } .field-choice .choice input { accent-color: var(--gold); width: 1rem; height: 1rem; margin: 0; } .field-choice .choice:hover, .field-choice .choice:has(input:checked) { border-color: var(--gold); } .field-choice .choice:has(input:focus-visible) { box-shadow: 0 0 0 3px rgba(201, 162, 76, .18); } .form-foot { display: flex; align-items: center; gap: 1.6rem; margin-top: .4rem; flex-wrap: wrap; } .form-note { flex: 1 1 18rem; margin: 0; font-size: .92rem; color: var(--muted); } .form-status { margin: 1rem 0 0; color: var(--gold-300); min-height: 1.4em; } .form-done h3 { font-size: 1.7rem; } .form-done p { color: var(--muted); } .form-done strong { color: var(--gold-300); font-family: var(--display); letter-spacing: .06em; } /* plain (404, admin) */ .plain { padding-top: calc(var(--nav-h) + 4rem); min-height: 70vh; } .plain-inner { max-width: 44rem; } .filters { display: flex; gap: .6rem; flex-wrap: wrap; } .filters a { font: 700 .7rem var(--sans); letter-spacing: .18em; text-transform: uppercase; text-decoration: none; border: 1px solid var(--line-dark); padding: .55rem .9rem; border-radius: 2px; color: var(--muted); } .filters a span { color: var(--gold-300); margin-left: .3rem; } .filters a.is-active { background: var(--gold); color: var(--navy-950); border-color: var(--gold); } .filters a.is-active span { color: var(--navy-950); } .admin-table { min-width: 960px; } .admin-table .msg { max-width: 28rem; white-space: pre-wrap; } .admin-table tr.status-new td:first-child { box-shadow: inset 3px 0 0 var(--gold); } .status-form { display: flex; gap: .4rem; align-items: center; } .status-form select { font: 400 .95rem var(--sans); padding: .4rem .5rem; background: var(--navy-900); color: var(--ivory); border: 1px solid var(--line-dark); border-radius: 2px; } /* ---------------------------------------------------------------- footer */ .footer { background: var(--black); border-top: 1px solid var(--line-dark); padding: clamp(3.5rem, 6vw, 5rem) 0 2rem; color: var(--muted); font-size: .98rem; } .footer-grid { display: grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 2.5rem; } .footer-name { font: 400 1.2rem var(--display); letter-spacing: .14em; text-transform: uppercase; color: var(--ivory); margin: 1rem 0 .1rem; } .footer-title { font: italic 500 1rem var(--serif); color: var(--gold); margin-bottom: .8rem; } .footer-tag { max-width: 22rem; } /* A small map under the tagline. The whole thing is one link: the iframe is covered by a veil so a click opens Google Maps rather than being swallowed by the embed's own panning, and the embed is hidden from assistive technology because the link already says where it goes. The filter turns Google's daylight map into something that belongs in a black footer - invert plus a 180deg hue rotation keeps the land and water the right way round while making the paper dark. */ .footer-map { display: block; position: relative; margin-top: 1.3rem; width: min(100%, 20rem); aspect-ratio: 16 / 9; border: 1px solid var(--line-dark); border-radius: 2px; overflow: hidden; } .footer-map iframe { width: 100%; height: 100%; border: 0; display: block; pointer-events: none; filter: invert(1) hue-rotate(180deg) saturate(.55) brightness(.82) contrast(1.05); } .footer-map-veil { position: absolute; inset: 0; transition: background .25s; } .footer-map:hover .footer-map-veil { background: rgba(201, 162, 76, .12); } .footer-map:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } /* The footer map is a link now, not a frame; the iframe rule above styles nothing and is left in place rather than cut out of this file. Since 29 Sep the frame holds a picture again - a drawn minimap served from the site, not an embed - so .footer-map and its veil are back in use. */ .footer-maplink { margin: 1.1rem 0 0; } .footer-maplink + .footer-map { margin-top: .8rem; } .footer-map img { width: 100%; height: 100%; object-fit: cover; display: block; } .footer-map-credit { margin: .4rem 0 0; font-size: .7rem; letter-spacing: .02em; opacity: .7; } .footer-map-credit a { color: inherit; } .footer-label { font: 700 .7rem var(--sans); letter-spacing: .24em; text-transform: uppercase; color: var(--gold); margin-bottom: .8rem; } .footer-list { list-style: none; padding: 0; margin: 0; } .footer-list li { padding: .25rem 0; } .footer a { text-decoration: none; transition: color .2s; } .footer a:hover { color: var(--gold-300); } .footer address { font-style: normal; margin-bottom: .8rem; color: var(--ivory-2); } /* two lines of hours, each with its own small label, so which is which is readable without a colon doing the work */ .footer-hours { margin: 0 0 .3rem; } .footer-hours span { display: block; font-size: .68rem; letter-spacing: .2em; text-transform: uppercase; color: var(--gold); opacity: .8; margin-bottom: .1rem; } .footer .btn { margin-top: 1rem; } .footer-bottom { margin-top: 3rem; padding-top: 1.4rem; border-top: 1px solid rgba(201, 162, 76, .14); display: flex; justify-content: space-between; gap: 2rem; flex-wrap: wrap; font-size: .9rem; color: rgba(244, 239, 228, .5); } .footer-bottom p { margin: 0; } .footer-maxim { font: italic 500 1.05rem var(--serif); color: var(--gold); } /* The line above the send button, which links to the privacy page. */ .form-note a { color: inherit; text-decoration: underline; text-decoration-color: var(--gold); text-underline-offset: 3px; } .form-note a:hover { color: var(--gold-700); } /* Privacy and Terms, in the bottom bar. They are the quietest links on the site and should stay that way - but they underline on hover and take a focus ring, because this is the only route to either page. Not `.footer-legal`: the setting of that name is the disclaimer sentence sitting beside them, and two different things should not share a word. */ .footer-policies { display: flex; flex-wrap: wrap; gap: 1.4rem; } .footer-policies a { color: inherit; text-decoration: none; transition: color .25s var(--ease); } .footer-policies a:hover { color: var(--gold-300); text-decoration: underline; text-underline-offset: 3px; } .footer-policies a:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; } /* ---------------------------------------------------------- motion state */ .js [data-reveal] { opacity: 0; } /* The failsafe: base.html adds this class if site.js has not claimed the document within 1.5s, so a script that never runs cannot leave the page blank. It cannot fight a working script, because it is only ever added when that script is absent. */ .reveal-failsafe [data-reveal], .reveal-failsafe [data-roll-item], .reveal-failsafe [data-cover], .reveal-failsafe [data-plate], .reveal-failsafe [data-door] { opacity: 1 !important; transform: none !important; } .reveal-failsafe [data-clip], .reveal-failsafe .img-frame-inner { clip-path: none !important; } .reveal-failsafe .is-split .wi { opacity: 1 !important; transform: none !important; } .js [data-cover] { opacity: 0; } .js [data-plate] { opacity: 0; } .js [data-door] { opacity: 0; } .js [data-roll-item] { opacity: 0; } .js .faq-body { overflow: hidden; } .js .contest-title .w { opacity: 0; } @media (prefers-reduced-motion: reduce) { .js [data-reveal], .js [data-cover], .js [data-plate], .js [data-door], .js [data-roll-item], .js .contest-title .w { opacity: 1 !important; transform: none !important; } .roll-rule { transform: none !important; } .btn, .card, .area, .result, .hero-arrow { transition: none; } } /* ------------------------------------------------------------ responsive */ @media (max-width: 1100px) { .cards, .results-grid, .quotes { grid-template-columns: 1fr 1fr; } .footer-grid { grid-template-columns: 1fr 1fr; } .detail-grid { grid-template-columns: 1fr; } .detail-side { position: static; } .contest-grid, .cursus-grid { grid-template-columns: 1fr; } } @media (max-width: 900px) { :root { --nav-h: 5.5rem; } .nav-links, .nav-actions .btn { display: none; } .nav-toggle { display: flex; } .nav { padding: .8rem 0; } .split, .split-rev { grid-template-columns: 1fr; } /* one column: the picture leads the section rather than following the button. `order: 0` here did nothing - the copy is 0 too, so DOM order decided and a reversed split put its picture last. */ .split-rev .img-frame { order: -1; } .img-frame { aspect-ratio: 4 / 3; } .contact-grid, .areas { grid-template-columns: 1fr; } .stats { grid-template-columns: 1fr 1fr; } .strategy { height: 200vh; height: 200svh; } .strategy-sticky { align-items: flex-start; padding-top: calc(var(--nav-h) + 1rem); } .strategy-copy .lead { font-size: .95rem; } .strategy-copy .tenets { display: none; } .hero { min-height: 560px; } .hero-ui { flex-direction: column-reverse; align-items: flex-start; gap: 1rem; bottom: 1.6rem; } .slide-content { padding-bottom: 9.5rem; } } @media (max-width: 640px) { body { font-size: 1rem; } .cards, .results-grid, .quotes, .footer-grid, .stats { grid-template-columns: 1fr; } .field-row { grid-template-columns: 1fr; gap: 0; } .brand-title { display: none; } .hero-actions .btn { width: 100%; } .hero-eyebrow { font-size: .68rem; letter-spacing: .22em; } .hero-points, .hero-caption { display: none; } .hero-dot { width: 44px; } /* the floors the fixed 56vh gave: with the base min-height, with the tall hero's 520px, and on a practice page, whose 760px rule had cleared its own */ .page-hero { min-height: max(56vh, 430px); } .page-hero-tall { min-height: max(56vh, 520px); } .page-hero.page-hero-practice { min-height: 56vh; } /* A hero carrying a focus point is one where the subject's position in the picture matters. Three things eat the top of it: the -8% overscan that gives the parallax its room, the 1.04 scale site.js puts on entry, and the parallax offset itself. On a wide screen they cost nothing, because a portrait in a 2:1 band has more than a thousand pixels of slack to spend. On a phone the band is close to the shape of the picture, there is no vertical slack at all, and those three take the subject's head off. An aimed hero gives up its parallax here and keeps the face. */ .page-hero-aimed .page-hero-media { inset: 0; transform: none !important; } .page-hero-aimed .page-hero-img { transform: none !important; } .cta-inner .btn { width: 100%; } .contact-list { grid-template-columns: 1fr; gap: .2rem .8rem; } .contact-list dd { margin-bottom: .8rem; } } /* ------------------------------------------------------------------ logo */ .brand-logo { height: 92px; width: auto; display: block; transition: height .4s var(--ease); filter: drop-shadow(0 2px 6px rgba(0, 0, 0, .35)); } .nav.is-scrolled .brand-logo { height: 70px; } .footer { position: relative; overflow: hidden; } /* Sized by width, not height. The brand column is 320-327px at 1280 and 1440, narrower than the mark's natural 384px, and the global `img { max-width: 100% }` then capped the width while a fixed height held - measured ratio 2.58 against the picture's true 3.097. */ .footer-logo { width: min(384px, 100%); height: auto; display: block; margin-bottom: 1.4rem; } .footer-brand .footer-tag { color: var(--muted); } .footer-crest { position: absolute; right: -3%; bottom: -8%; width: min(40vw, 480px); height: auto; opacity: .09; pointer-events: none; will-change: transform; } .footer .wrap { position: relative; z-index: 1; } .veil-mark img { width: clamp(120px, 18vw, 220px); height: auto; display: block; filter: drop-shadow(0 0 30px rgba(201, 162, 76, .35)); } .veil-mark::before { display: none; } @media (max-width: 900px) { .brand-logo { height: 64px; } .nav.is-scrolled .brand-logo { height: 56px; } .footer-logo { width: min(260px, 100%); } .footer-crest { width: 70vw; right: -20%; bottom: -4%; } } /* short windows: keep the hero copy clear of the header */ @media (max-height: 760px) { .hero-title { font-size: clamp(2.2rem, 5vw, 3.8rem); margin-bottom: 1rem; } .hero-text { margin-bottom: 1.4rem; } .hero-points, .hero-caption { display: none; } .slide-content { padding-bottom: 6rem; } } /* ---------------------------------------------------------------- scrollbar */ /* Gold on black, thin, no arrows. Firefox takes the two-colour shorthand; WebKit and Blink take the parts. The overlay bars on iOS ignore both. */ html { scrollbar-width: thin; scrollbar-color: rgba(201, 162, 76, .45) var(--black); } ::-webkit-scrollbar { width: 12px; height: 12px; } ::-webkit-scrollbar-track { background: var(--black); } ::-webkit-scrollbar-thumb { background: rgba(201, 162, 76, .38); border: 3px solid var(--black); /* insets the thumb without a wrapper */ border-radius: 999px; } ::-webkit-scrollbar-thumb:hover { background: var(--gold); } ::-webkit-scrollbar-thumb:active { background: var(--gold-300); } ::-webkit-scrollbar-corner { background: var(--black); } /* On the paper sections a dark bar would be a hole in the page. */ .ledger-card, .prose, [data-scroll-light] { scrollbar-width: thin; scrollbar-color: rgba(11, 22, 48, .28) transparent; } .ledger-card::-webkit-scrollbar-track, .prose::-webkit-scrollbar-track, [data-scroll-light]::-webkit-scrollbar-track { background: transparent; } .ledger-card::-webkit-scrollbar-thumb, .prose::-webkit-scrollbar-thumb, [data-scroll-light]::-webkit-scrollbar-thumb { background: rgba(11, 22, 48, .22); border-color: transparent; background-clip: padding-box; } .ledger-card::-webkit-scrollbar-thumb:hover, .prose::-webkit-scrollbar-thumb:hover, [data-scroll-light]::-webkit-scrollbar-thumb:hover { background: var(--gold-700); } /* ------------------------------------------------------------- commentary The hub at /commentary/contract-law and its question pages. Everything that is not a heading is justified, which is what was asked for. `hyphens: auto` goes with it: justified text in a narrow column pulls word spacing apart badly without it, and the article column is narrow on a phone. The Summary panel is deliberately paper-toned rather than a dark card. A dark panel on a paper section has to out-specify `.section-light p:not(.eyebrow):not(.lead)`, which is (0,3,1), or its text is slate on navy - the fault that has already hit .cta-band and the enquiry form's note. Keeping it light means there is nothing to lose that fight. */ /* These heroes carry a whole question as their heading — up to seven lines on a phone. `.page-hero` is a fixed height with `align-items: flex-end`, so a tall heading grows UPWARD, out of the box and behind the fixed nav, which sits at z-index 120 against the copy's 2. Measured before the fix: the h1 began at -22px at 390px wide, and behind the bar at every size. So: no fixed height, a floor instead, and enough padding at the top to clear the nav whatever the heading does. */ .page-hero-commentary { height: auto; min-height: 56vh; padding-top: calc(var(--nav-h) + 1.4rem); } .page-hero-article { min-height: 50vh; } /* Manrope maps the sequence "(c)" to a copyright glyph, and it does it in the STANDARD `liga` feature — measured: "(c)" renders 14.47px against 22.08px for "(x)", and only turning `liga` off restores the three characters. That is wrong in a statutory citation: "Interpretation Act, s 27(1)(c)" was reading as "s 27(1)©". Scoped to the commentary, which is where citations live; the cost is the fi/fl ligatures in this section, which is a trade worth making. */ .commentary-prose, .commentary-summary, .commentary-relies, .commentary-notice, .commentary-a, .commentary-intro { font-variant-ligatures: none; } .commentary-byline { margin-top: .9rem; font: italic 400 1.02rem/1.5 var(--serif); color: var(--gold-300); } .page-hero-commentary .eyebrow a { color: inherit; text-decoration: none; } .page-hero-commentary .eyebrow a:hover { color: var(--gold-300); } .commentary-intro { max-width: 46rem; } .commentary-intro-practice { margin: 1rem 0 0; font-size: .98rem; line-height: 1.6; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; } .commentary-intro-practice a { color: var(--gold-700); } /* the section is justified throughout, its hero lead included */ .commentary-intro .lead, .page-commentary .page-hero .lead, .page-commentary .section-head .lead, .page-commentary .commentary-area-lead { text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; } .commentary-reviewed { margin: 1rem 0 0; font: 600 .68rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-700); } /* ---- the hub's four groups ---- */ .commentary-group { padding-top: clamp(2rem, 4vw, 3rem); } .commentary-group.is-first { padding-top: 0; } .commentary-group-head { display: flex; align-items: baseline; gap: 1rem; } .commentary-group-num { font: 400 1.5rem var(--display); color: var(--gold); letter-spacing: .04em; min-width: 2.2rem; } .commentary-group-head .detail-sub { margin: 0; } .commentary-group-head .detail-sub::before { display: none; } .commentary-list { list-style: none; padding: 0; margin: 1.4rem 0 0; display: grid; gap: .1rem; } .commentary-item { border-top: 1px solid var(--line-light); } .commentary-item:last-child { border-bottom: 1px solid var(--line-light); } .commentary-item a { display: grid; grid-template-columns: 1fr 1.6rem; grid-template-rows: auto auto; gap: .3rem 1.4rem; padding: 1.05rem .2rem; text-decoration: none; color: var(--ink); transition: background .3s var(--ease), padding-left .3s var(--ease); } .commentary-item a:hover { background: rgba(201, 162, 76, .07); padding-left: .8rem; } .commentary-q { grid-column: 1; grid-row: 1; text-align: left; font: 400 1.16rem/1.4 var(--display); color: var(--ink); } .commentary-a { grid-column: 1; grid-row: 2; font-size: .95rem; line-height: 1.55; color: var(--ink-2); text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; } .commentary-go { grid-column: 2; grid-row: 1 / 3; align-self: center; justify-self: end; color: var(--gold-700); font-size: 1.1rem; } .commentary-item a:hover .commentary-go { color: var(--gold); } /* ---- the article ---- */ .commentary-body { max-width: 44rem; } .commentary-summary { position: relative; margin: 0 0 1.8rem; padding: 1.5rem 1.6rem 1.5rem 1.9rem; background: var(--paper-2); border: 1px solid var(--line-light); border-left: 3px solid var(--gold); } .commentary-summary .eyebrow { margin: 0 0 .55rem; } /* paper.css's `.section-light p:not(.eyebrow):not(.lead)` is also (0,3,1) and loads AFTER this file, so an equal-specificity rule here never applied and the summary was quietly taking --ink-2. The extra :not() makes this (0,4,0), which is how paper.css wins its own fights. */ .section-light .commentary-summary p:not(.eyebrow):not(.lead) { margin: 0; font: 400 1.09rem/1.68 var(--serif); color: var(--ink); text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; } .commentary-body .commentary-reviewed { margin: 0 0 2rem; } .commentary-prose > h2:first-child { margin-top: 0; } .commentary-prose p, .commentary-prose li { text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; } .commentary-prose p { margin: 0 0 1.05rem; line-height: 1.72; } .commentary-prose ul { margin: 0 0 1.25rem; padding-left: 1.1rem; } .commentary-prose li { margin-bottom: .6rem; line-height: 1.68; color: var(--ink-2); } .commentary-prose li::marker { color: var(--gold-700); } .commentary-prose strong { color: var(--ink); font-weight: 600; } .commentary-prose a { color: var(--gold-700); text-underline-offset: 3px; } .commentary-prose a:hover { color: var(--ink); } /* A photograph set into a commentary answer. The same form as `.detail-figure-media` on a practice page and `.gallery-img` in the chambers band: a navy ground, a 3px corner, an inset gold hairline and an italic caption. It arrived as a square hairline box, which matched nothing. No reveal attribute: it sits inside `.commentary-prose`, which already carries `data-reveal` and is revealed as one block, so it needs none of the four edits a new scroll-revealed attribute needs and cannot be left invisible where the script never runs. */ .commentary-photo { margin: 2.4rem 0 2.6rem; } .commentary-photo-media { display: block; position: relative; overflow: hidden; border-radius: 3px; aspect-ratio: 16 / 9; background: var(--navy-950); box-shadow: 0 28px 46px -32px rgba(11, 22, 48, .55); } .commentary-photo-media img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1.2s var(--ease); } .commentary-photo-media::after { content: ''; position: absolute; inset: .9rem; border: 1px solid rgba(201, 162, 76, .5); border-radius: 2px; pointer-events: none; } .commentary-photo:hover .commentary-photo-media img { transform: scale(1.04); } .commentary-photo figcaption { margin-top: .8rem; font: 400 .92rem/1.6 var(--serif); font-style: italic; color: var(--ink-2); } @media (prefers-reduced-motion: reduce) { .commentary-photo-media img { transition: none; } .commentary-photo:hover .commentary-photo-media img { transform: none; } } .commentary-relies { margin: 2.2rem 0 0; padding: 1.1rem 1.3rem; border: 1px solid var(--line-light); background: rgba(201, 162, 76, .05); } .commentary-relies .eyebrow { margin: 0 0 .5rem; } .commentary-relies ul { list-style: none; margin: 0; padding: 0; } .commentary-relies li { font-size: .92rem; line-height: 1.6; color: var(--ink-2); padding: .2rem 0; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; } .commentary-relies li + li { border-top: 1px solid var(--line-light); } .commentary-related { list-style: none; padding: 0; margin: 1.1rem 0 0; } .commentary-related li { border-top: 1px solid var(--line-light); } .commentary-related li:last-child { border-bottom: 1px solid var(--line-light); } .commentary-related a { display: flex; justify-content: space-between; gap: 1.2rem; align-items: baseline; padding: .85rem .2rem; text-decoration: none; color: var(--ink); font: 400 1.04rem/1.45 var(--display); transition: padding-left .3s var(--ease), color .3s; } .commentary-related a span { color: var(--gold-700); } .commentary-related a:hover { padding-left: .7rem; color: var(--gold-700); } .commentary-notice { margin: 2.4rem 0 0; padding-top: 1.2rem; border-top: 1px solid var(--line-light); font-size: .86rem; line-height: 1.66; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; } .section-light .commentary-notice:not(.eyebrow):not(.lead) { color: var(--ink-2); } .commentary-notice strong { color: var(--ink); } .commentary-seq { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; margin: 2.4rem 0 0; padding-top: 1.6rem; border-top: 1px solid var(--line-light); } .commentary-seq a { text-decoration: none; display: block; } .commentary-seq-next { text-align: right; } .commentary-seq-label { display: block; font: 600 .66rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-700); margin-bottom: .35rem; } .commentary-seq-title { display: block; font: 400 1.02rem/1.45 var(--display); color: var(--ink); transition: color .3s; } .commentary-seq a:hover .commentary-seq-title { color: var(--gold-700); } /* A quiet paper panel in the sidebar. Deliberately NOT a .side-card: that class is ivory text for a navy card, paper.css sets it at (0,3,1), and paper.css loads after this file — so a paper-backed .side-card renders its text at 1.03:1, which is what the sweep caught. Its own class has nothing to out-specify. */ .side-note { padding: 1.4rem 1.5rem; background: var(--paper-2); border: 1px solid var(--line-light); color: var(--ink-2); } .side-note .eyebrow { color: var(--gold-700); margin: 0 0 .6rem; } .side-note .eyebrow::before { background: var(--gold-700); } .side-area { margin: 0 0 .5rem; font-size: .95rem; line-height: 1.55; } .side-area:last-child { margin-bottom: 0; } .side-area a { color: var(--gold-700); } /* ---- the areas list on /commentary ---- */ .commentary-areas { list-style: none; padding: 0; margin: 0; display: grid; gap: 1.6rem; } .commentary-areas a { display: grid; grid-template-columns: 22rem 1fr; gap: 0; text-decoration: none; color: var(--ink); border: 1px solid var(--line-light); background: var(--paper); transition: border-color .4s var(--ease), transform .4s var(--ease); } .commentary-areas a:hover { border-color: rgba(201, 162, 76, .5); transform: translateY(-2px); } .commentary-area-media { overflow: hidden; } .commentary-area-media img { width: 100%; height: 100%; min-height: 15rem; object-fit: cover; display: block; transition: transform .6s var(--ease); } .commentary-areas a:hover .commentary-area-media img { transform: scale(1.04); } .commentary-area-body { padding: 1.8rem 2rem; display: flex; flex-direction: column; gap: .5rem; } .commentary-area-name { font: 400 1.7rem/1.2 var(--display); color: var(--ink); } .commentary-area-count { font: 600 .66rem var(--sans); letter-spacing: .22em; text-transform: uppercase; color: var(--gold-700); } .commentary-area-lead { font-size: 1rem; line-height: 1.6; color: var(--ink-2); flex: 1; text-align: justify; text-justify: inter-word; hyphens: auto; -webkit-hyphens: auto; } .commentary-area-body .card-link { margin-top: .4rem; } @media (max-width: 900px) { .commentary-areas a { grid-template-columns: 1fr; } .commentary-area-media img { min-height: 11rem; } .commentary-area-body { padding: 1.4rem 1.3rem; } .commentary-seq { grid-template-columns: 1fr; gap: 1.4rem; } .commentary-seq-next { text-align: left; } .commentary-group-head { gap: .7rem; } .commentary-group-num { min-width: 1.6rem; font-size: 1.25rem; } } /* ============================================================================ The library: publications shown by their own first page The cover is held with `contain` on a white ground rather than cropped to fill. These are title pages - the title is the whole point of showing them - and the documents are not all the same shape: four are A4 at 0.707, the two reports are 0.773. Cropping to one frame would cut the title off one set or the other. ========================================================================= */ .library { list-style: none; margin: 2.8rem 0 0; padding: 0; display: grid; align-items: start; gap: clamp(1.8rem, 3.2vw, 3rem); grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr)); } .library-item { margin: 0; } .library-link { display: block; text-decoration: none; color: inherit; transition: transform .55s var(--ease); } /* the cover, on its own white leaf */ .library-cover { display: block; position: relative; overflow: hidden; aspect-ratio: 1 / 1.414; background: #fff; border: 1px solid var(--line-light); border-radius: 2px; box-shadow: 0 26px 42px -30px rgba(11, 22, 48, .55); transition: box-shadow .55s var(--ease); } .library-cover img { width: 100%; height: 100%; object-fit: contain; display: block; } /* an entry the site can only cite: no cover, so it sets its own */ .library-plate { position: absolute; inset: 0; display: grid; place-items: center; padding: 1.8rem 1.4rem; text-align: center; background: linear-gradient(160deg, var(--navy-900), var(--navy-950)); } .library-plate::after { content: ''; position: absolute; inset: .8rem; border: 1px solid rgba(201, 162, 76, .42); border-radius: 2px; } .library-plate > span { font: italic 500 1.05rem var(--serif); color: var(--gold-300); line-height: 1.3; position: relative; z-index: 1; } /* the entry beneath it */ .library-body { display: block; padding-top: 1.05rem; } .library-meta { display: block; font: 600 .64rem var(--sans); letter-spacing: .2em; text-transform: uppercase; color: var(--gold-700); } .library-title { display: block; margin-top: .5rem; color: var(--ink); font: 400 1.1rem/1.26 var(--display); } .library-credit { display: block; margin-top: .55rem; color: var(--ink-2); font-size: .85rem; line-height: 1.5; } .library-go { display: inline-flex; align-items: center; gap: .4rem; margin-top: .8rem; font: 600 .66rem var(--sans); letter-spacing: .18em; text-transform: uppercase; color: var(--gold-700); } .library-go i { font-style: normal; transition: transform .45s var(--ease); } /* picked off the shelf */ .library-item:hover .library-link, .library-link:focus-visible { transform: translateY(-6px); } .library-item:hover .library-cover { box-shadow: 0 34px 52px -28px rgba(11, 22, 48, .62); } .library-item:hover .library-go i { transform: translateX(.3rem); } .library-link:focus-visible { outline: 2px solid var(--gold); outline-offset: 6px; } /* an entry with no link does not pretend to be one */ .library-link-plain { cursor: default; } .library-item:hover .library-link-plain { transform: none; } @media (max-width: 720px) { .library { grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); } .library-title { font-size: 1rem; } } @media (prefers-reduced-motion: reduce) { .library-link, .library-cover, .library-go i { transition: none; } .library-item:hover .library-link, .library-item:hover .library-go i { transform: none; } } /* In the visual editor a card that lifts under the pointer makes its fields hard to hit, so nothing moves there. */ body.is-ve .library-link, body.is-ve .library-item:hover .library-link { transform: none; }