/* ============================================================================= Content pages — guides, blog posts, landing pages. Loads after style.css and takes every value from its tokens. Nothing here invents a colour or a spacing step. If a value looks like it wants to be new, the token set is missing something and that is the bug — see the note at the top of style.css. ========================================================================== */ /* ---------- Breadcrumbs -------------------------------------------------- The visible half of the BreadcrumbList emitted in . Markup describing navigation a visitor cannot see is the same policy breach as an invisible FAQ, so these are never hidden — they wrap onto a second line on a phone rather than being suppressed at a breakpoint. The separator is a ::before on the pseudo-element rather than a character in the markup, so a screen reader reads "Home, Guides, this page" instead of "Home slash Guides slash". ---------------------------------------------- */ .crumbs { margin-bottom: var(--s-6); } .crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 0 8px; list-style: none; margin: 0; padding: 0; font-size: var(--fs-xs); color: var(--slate-2); } .crumbs li { display: flex; align-items: center; gap: 8px; } .crumbs li + li::before { content: '/'; color: var(--slate-3); font-size: var(--fs-xs); } .crumbs a { color: var(--slate-2); text-decoration: none; } .crumbs a:hover { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; } .crumbs [aria-current="page"] { color: var(--slate); font-weight: 600; /* The current page's crumb is frequently the full article title. Left to itself it pushes the row to three lines on a phone and buries the links above it, so it truncates — the title is already the h1 directly below. */ max-width: 46ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---------- Article head ------------------------------------------------- */ .article-head { margin-bottom: var(--s-7); } .article-head h1 { margin-bottom: var(--s-4); } .article-head .lede { max-width: var(--maxw-text); margin-bottom: var(--s-5); } .article-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; font-size: var(--fs-xs); color: var(--slate-2); padding-top: var(--s-4); border-top: 1px solid var(--rule); margin: 0; } .article-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s-4) 0 0; } .article-cover { margin: 0 0 var(--s-7); border: 1px solid var(--rule); border-radius: var(--r-lg); overflow: hidden; /* A cover image supplied over the API has no known dimensions, so the space is reserved with a ratio instead. Either way the point is that the prose below does not jump when the image lands — which is the entire cumulative layout shift measurement, on the page most likely to be entered cold. */ aspect-ratio: 16 / 9; background: var(--paper-2); } .article-cover img { display: block; width: 100%; height: 100%; object-fit: cover; } /* ---------- Article body ------------------------------------------------- .prose in style.css handles headings, links and lists. What is added here is what long-form content needs and a privacy policy does not. ------------- */ .article-body { font-size: var(--fs-md); line-height: 1.72; } .article-body > p { margin-bottom: var(--s-5); } .article-body h2 { /* A scroll-margin so an in-page anchor does not land the heading underneath the sticky site header. */ scroll-margin-top: 90px; padding-top: var(--s-4); border-top: 1px solid var(--rule); } .article-body h3 { scroll-margin-top: 90px; color: var(--ink); } .article-body ul, .article-body ol { margin: 0 0 var(--s-5) var(--s-5); } .article-body li { line-height: 1.65; } .article-body strong { color: var(--ink); font-weight: 650; } .article-body blockquote { margin: var(--s-6) 0; padding: var(--s-2) 0 var(--s-2) var(--s-5); border-left: 3px solid var(--accent-line); color: var(--slate); } .article-body code { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .88em; background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r-sm); padding: 1px 5px; color: var(--ink-3); /* An address or a directive can be long, and on a phone an unbreakable token is what makes a whole page scroll sideways — which is a fault this site's own audit reports on other people's sites. */ overflow-wrap: anywhere; } .article-body pre { background: var(--paper-2); border: 1px solid var(--rule); border-radius: var(--r); padding: var(--s-4) var(--s-5); overflow-x: auto; margin: 0 0 var(--s-5); font-size: var(--fs-sm); line-height: 1.6; } .article-body pre code { background: none; border: 0; padding: 0; overflow-wrap: normal; } .article-body img { max-width: 100%; height: auto; border-radius: var(--r); } .article-body figure { margin: var(--s-6) 0; } .article-body figcaption { font-size: var(--fs-xs); color: var(--slate-2); margin-top: 8px; } .article-body table { width: 100%; border-collapse: collapse; margin-bottom: var(--s-5); font-size: var(--fs-sm); } .article-body th, .article-body td { padding: 10px 12px; text-align: left; border-bottom: 1px solid var(--rule); } .article-body th { color: var(--ink); font-weight: 650; } /* ---------- FAQ ----------------------------------------------------------
, not a scripted accordion: keyboard and screen reader accessible for free, and its contents stay in the document whether or not it is open, which is what keeps the answers indexable and quotable. ----------------- */ .faq-block { margin-top: var(--s-6); } .faq-item { border: 1px solid var(--rule); border-radius: var(--r); background: var(--paper); margin-bottom: 10px; } .faq-item > summary { display: flex; align-items: flex-start; gap: 12px; padding: var(--s-4) var(--s-5); font-weight: 650; color: var(--ink); font-size: var(--fs-base); cursor: pointer; list-style: none; } .faq-item > summary::-webkit-details-marker { display: none; } .faq-item > summary::before { content: ''; flex: 0 0 auto; width: 9px; height: 9px; margin-top: 7px; border-right: 2px solid var(--accent); border-bottom: 2px solid var(--accent); transform: rotate(-45deg); transition: transform var(--dur-1) var(--ease); } .faq-item[open] > summary::before { transform: rotate(45deg); } .faq-item > summary:hover { color: var(--accent-ink); } .faq-item[open] { border-color: var(--rule-2); } .faq-answer { padding: 0 var(--s-5) var(--s-5) calc(var(--s-5) + 21px); } .faq-answer p { margin: 0; color: var(--slate); line-height: 1.68; } .faq-more { margin-top: var(--s-6); font-size: var(--fs-sm); color: var(--slate-2); } .faq-more a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; } /* ---------- The in-article call to action -------------------------------- */ .article-cta { margin: var(--s-9) 0 var(--s-8); } .article-cta h2 { font-size: var(--fs-xl); margin: 0 0 var(--s-2); } .article-cta > p { color: var(--slate); margin: 0 0 var(--s-5); max-width: 52ch; } /* ---------- Cards for guides, posts and related links -------------------- */ .guide-card { display: flex; flex-direction: column; gap: 10px; height: 100%; } .guide-card h2, .guide-card h3 { font-size: var(--fs-md); margin: 0; color: var(--ink); line-height: 1.35; } .guide-card p { margin: 0; color: var(--slate); font-size: var(--fs-sm); line-height: 1.6; flex: 1; } .guide-card-date { font-size: var(--fs-xs); color: var(--slate-2); } .guide-card-more { font-size: var(--fs-xs); font-weight: 650; color: var(--accent-ink); margin-top: auto; } .guide-card:hover h2, .guide-card:hover h3 { color: var(--accent-ink); } .guide-card .chip { align-self: flex-start; } .guide-group { margin-bottom: var(--s-9); } .guide-group:last-child { margin-bottom: 0; } .guide-group-h { font-size: var(--fs-lg); margin: 0 0 var(--s-5); padding-bottom: var(--s-3); border-bottom: 1px solid var(--rule); } .related { margin-top: var(--s-9); padding-top: var(--s-7); border-top: 1px solid var(--rule); } .related h2 { font-size: var(--fs-lg); margin: 0 0 var(--s-5); } /* ---------- Landing pages ------------------------------------------------ */ .landing-hero h1 { margin-bottom: var(--s-4); } .landing-hero .lede { max-width: 56ch; margin-bottom: var(--s-6); } /* The list of real check names. A definition list because that is literally what it is — a term and what it means — and the semantics come free. */ .check-list { margin: 0; } .check-row { display: grid; grid-template-columns: minmax(0, 15rem) minmax(0, 1fr); gap: var(--s-2) var(--s-6); padding: var(--s-4) 0; border-bottom: 1px solid var(--rule); } .check-row:last-child { border-bottom: 0; } .check-row dt { font-weight: 650; color: var(--ink); font-size: var(--fs-sm); margin: 0; } .check-row dd { margin: 0; color: var(--slate); font-size: var(--fs-sm); line-height: 1.62; } .check-note { margin: var(--s-6) 0 0; padding-top: var(--s-5); border-top: 1px solid var(--rule-2); font-size: var(--fs-sm); color: var(--slate-2); } /* ---------- Blog pager --------------------------------------------------- */ .pager { display: flex; align-items: center; justify-content: center; gap: var(--s-5); margin-top: var(--s-8); font-size: var(--fs-sm); } /* ---------- Footer, now that it carries five columns --------------------- The fixed 1.3fr + 2 × 1fr grid in style.css was written for three. auto-fit lets it reflow to whatever it is given, so adding a column here does not mean editing a track list there. ---------------------------------------- */ .site-footer .footer-inner { grid-template-columns: minmax(0, 1.4fr) repeat(auto-fit, minmax(140px, 1fr)); gap: var(--s-7) var(--s-6); } @media (max-width: 860px) { .check-row { grid-template-columns: 1fr; gap: 4px; } .article-body { font-size: var(--fs-base); } } @media (max-width: 640px) { .crumbs [aria-current="page"] { max-width: 22ch; } .faq-answer { padding-left: var(--s-5); } .article-cover { aspect-ratio: 4 / 3; } } /* Printing a guide is a thing people genuinely do with a checklist. The furniture goes; the words stay. */ @media print { .crumbs, .article-cta, .related, .site-header, .site-footer, .consent { display: none !important; } .faq-item > summary::before { display: none; } .faq-item, .faq-answer { display: block !important; } }