of icon links already sized 40px, and is * deliberately not touched. */ @media (max-width: 48rem) { footer li > a:only-child { display: block; padding: 0.62rem 0; } footer li { margin: 0; } } /* Breadcrumb links are navigation too, and were 18px tall. Inline-block so the * row stays a row; the padding is what the thumb gets. */ @media (max-width: 48rem) { .crumbs li > a { display: inline-block; padding: 0.5rem 0; } } /* Links that are the whole of their line rather than a word inside a sentence * are things somebody taps: a book title, an address, a lone call to action. * They were the height of their own type, 17 to 20px. Padding takes them past * 32px without touching the type or the layout around them. A link genuinely * inside a sentence is left alone, because a 32px word in a paragraph would * wreck the line rhythm for no gain. */ @media (max-width: 48rem) { main p > a:only-child, main h3 > a:only-child, main h4 > a:only-child, main li > a:only-child, .volume h3 > a { display: inline-block; padding: 0.5rem 0; } } /* The cover captions on the homepage, last of the micro type at 10.6px. */ @media (max-width: 48rem) { .covers figcaption .vn { font-size: 0.72rem; } } /* ---------- two formats, two links ---------- * * The card used to carry one price and one link because there was one thing to * buy. Now there are two, and neither is the default: a row rather than a * primary with an afterthought beside it. On a phone each one is 44px tall, * which the generic rule above does not reach because these are not the only * child of anything. */ /* The price line breaks between the two formats, never inside one of them. * "KINDLE" on one line and "$9.99" on the next is a price nobody reads as a * price. Same reason the ISBN below does not split: it is an identifier * somebody may want to copy. */ .volume .status > span { white-space: nowrap; } .status-line .isbn { white-space: nowrap; } .volume .buys { display: flex; flex-wrap: wrap; gap: 0.1rem 1.15rem; margin-top: 0.45rem; } .volume .buys a { font-size: 0.86rem; } @media (max-width: 48rem) { .volume .buys a { display: inline-flex; align-items: center; min-height: 44px; } } /* ---------- buy it in either format ---------- * * The pills in each volume's sidebar. The secondary one restates its colours * rather than inheriting .action-secondary, which is written for a light band * and sets near black text on a border of the same near black. The sidebar is * navy. That rule reaching a dark panel is how this stylesheet has produced * unreadable text more than once, and the fix each time was to say the colour * on the state a global rule also targets. */ /* A grid rather than a flex row, because two pills of different word lengths in * a flex row come out different widths, and a wider one reads as the preferred * one. auto-fit drops them to one per row when the column would be too narrow * for the price to stay on its line. */ .sidebar .buypills { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.5rem; margin-top: 1.5rem; } .sidebar .buypills .action { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; margin-top: 0; padding: 0.6rem 0.7rem; border-radius: 999px; text-align: center; font-size: 0.76rem; letter-spacing: 0.05em; /* One pill wrapping to two lines while the other does not made them look * like a primary and an afterthought, which is the exact thing they are not. * They break to two rows together or not at all. */ white-space: nowrap; } .sidebar .buypills .action-secondary { background: transparent; color: #FFFFFF; border-color: rgba(255,255,255,0.55); } .sidebar .buypills .action-secondary:hover, .sidebar .buypills .action-secondary:focus-visible { background: #FFFFFF; color: var(--navy); border-color: #FFFFFF; } /* --- layer 72: footer policy links --------------------------------------- A third flex child inside .foot-base, sitting between the governing board statement and the copyright. Inherits the muted footer grey rather than the brighter link colour, because these are furniture, not destinations we are pushing people towards. Wraps to its own line under 34rem. */ body footer .foot-policies { display: flex; flex-wrap: wrap; gap: .3rem 1.35rem; margin: 0; padding: 0; list-style: none; } body footer .foot-policies li { margin: 0; padding: 0; font-family: var(--ui); font-size: 13.5px; line-height: 1.65; letter-spacing: normal; text-transform: none; } body footer .foot-policies li::before { content: none; } body footer .foot-policies a { font-size: 13.5px; line-height: 1.65; color: #93A3B9; } body footer .foot-policies a:hover { color: #FFFFFF; text-decoration: underline; } @media (max-width: 48rem) { body footer .foot-policies { width: 100%; } } /* --- layer 73: skip to content ------------------------------------------- First focusable element on the page. Hidden the same way .visually-hidden hides things, until it takes focus, when it un-clips and pins to the top left. Signal ground with white text clears 4.5:1. Honours reduced motion by having no transition to honour. */ body .skiplink { position: absolute; left: 0; top: 0; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; border: 0; z-index: 1000; } body .skiplink:focus, body .skiplink:focus-visible { width: auto; height: auto; margin: 0; padding: .85rem 1.25rem; clip: auto; clip-path: none; background: var(--signal); color: #FFFFFF; font-family: var(--ui); font-size: 15px; font-weight: 500; letter-spacing: .02em; text-decoration: none; border-radius: 0 0 3px 0; outline: 2px solid #FFFFFF; outline-offset: -5px; } body main:focus { outline: none; } /* --- layer 74: the menu collapses when it stops fitting, not at a phone width - Measured rather than guessed. The primary nav's natural width is 1013px, and the masthead wrap carries 40px of padding a side, so the row needs about 1200px of viewport to sit on one line. The drawer, though, only appeared at 46rem (736px). Between those two numbers, which is most laptops and every tablet in landscape, the ten items wrapped onto a second ragged line under the wordmark. Nothing was broken and it read as broken, which for a standards body is the same problem. So the same drawer now applies up to 75rem. Below 46rem the original block still applies and says the same things; this one is a superset and they agree. The wordmark shrink stays at 46rem, because a tablet has room for the full organisation name and a phone does not. ------------------------------------------------------------------------ */ @media (max-width: 75rem) { .masthead .wrap { flex-direction: row; align-items: center; justify-content: space-between; padding-top: 1.1rem; padding-bottom: 1.1rem; gap: 1rem; } .masthead .wordmark { flex: 1 1 auto; min-width: 0; } .navbtn { display: inline-block; font-family: var(--ui); font-size: 0.72rem; letter-spacing: 0.13em; text-transform: uppercase; font-weight: 600; color: var(--navy); border: 1px solid var(--rule); padding: 0.55rem 0.9rem; cursor: pointer; white-space: nowrap; flex: none; } .navbtn:hover { border-color: var(--navy); } .masthead nav { display: none; width: 100%; order: 3; } .navtoggle:checked ~ nav { display: block; } .masthead nav ul { flex-direction: column; gap: 0; border-top: 1px solid var(--rule); margin-top: 0.4rem; padding-top: 0.3rem; } .masthead nav li { border-bottom: 1px solid var(--rule-soft); } .masthead nav li:last-child { border-bottom: 0; } .masthead nav a { display: block; padding: 0.85rem 0; border-bottom: 0; font-size: 0.8rem; } .masthead nav ul li.signin { border-left: 0; padding-left: 0; } } /* --- layer 75: the primary nav, grouped ----------------------------------- Ten flat links became six groups. The rules below are last in the file on purpose: earlier layers style .masthead nav a, and a grouped nav needs to win over them rather than fight for specificity. The submenu opens on hover and on focus-within, so it works with no JavaScript at all. nav.js adds click for touch and manages aria-expanded; if it never loads, keyboard users still reach every item by tabbing, because focus-within opens the panel the moment a child is focused. --------------------------------------------------------------------------- */ .masthead nav ul { position: relative; } .masthead nav li.has-sub { position: relative; } /* The toggle is a desktop affordance only: a small caret after the label. It is a real button so that a keyboard and a screen reader both get told there is something here that opens. */ .masthead .subtoggle { appearance: none; background: none; border: 0; cursor: pointer; padding: 0 .1rem 0 .34rem; margin: 0; line-height: 1; color: inherit; font: inherit; } .masthead .subtoggle::after { content: ""; display: inline-block; width: .38rem; height: .38rem; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); opacity: .55; transition: opacity .12s ease, transform .12s ease; } .masthead li.has-sub:hover .subtoggle::after, .masthead li.has-sub:focus-within .subtoggle::after { opacity: 1; } .masthead .subtoggle:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; } .masthead .subnav { position: absolute; top: 100%; left: 0; z-index: 60; min-width: 15rem; margin: 0; padding: .4rem 0; background: var(--paper); border: 1px solid var(--rule); border-top: 2px solid var(--signal); box-shadow: 0 12px 28px rgba(13, 30, 59, .13); flex-direction: column; gap: 0; opacity: 0; visibility: hidden; transform: translateY(-3px); transition: opacity .13s ease, transform .13s ease, visibility .13s; } .masthead li.has-sub:hover > .subnav, .masthead li.has-sub:focus-within > .subnav, .masthead li.has-sub.open > .subnav { opacity: 1; visibility: visible; transform: translateY(0); } .masthead .subnav li { border: 0; } .masthead .subnav a { display: block; padding: .5rem 1rem; border-bottom: 0; font-size: .74rem; letter-spacing: .06em; white-space: nowrap; } .masthead .subnav a:hover { background: var(--paper-warm); color: var(--signal); } /* Under the breakpoint the masthead nav is already a stacked drawer, so the submenu is shown inline and indented rather than as a floating panel. A panel that hovers has nothing to hover on a touch screen, and hiding these behind a second tap would bury the pages this restructure exists to surface. */ @media (max-width: 75rem) { .masthead .subtoggle { display: none; } .masthead .subnav { position: static; opacity: 1; visibility: visible; transform: none; border: 0; box-shadow: none; background: none; min-width: 0; padding: 0 0 .35rem .9rem; } .masthead .subnav a { padding: .5rem 0; font-size: .72rem; white-space: normal; color: var(--ink-soft); } .masthead .subnav a:hover { background: none; } .masthead nav li.has-sub { border-bottom: 1px solid var(--rule-soft); } } /* --- layer 76: the masthead holds one line --------------------------------- The masthead is a wrapping flex row, and the grouped nav's carets nudged its natural width past common laptop viewports, so between about 1200 and 1500 pixels the nav dropped to a second row with a rule above it. That two row state was never designed, it was overflow, and it read as a different site depending on your window width. Above the drawer breakpoint the row now refuses to wrap. What gives way instead, in order: the nav gap tightens, and below 88rem the long form of the wordmark yields to the initials, which is exactly what initials are for. The two row treatment (nav border-top, no bottom padding) belongs to the drawer regime only, so it is unset here. --------------------------------------------------------------------------- */ @media (min-width: 75rem) { .masthead > .wrap { flex-wrap: nowrap; align-items: center; padding-bottom: 1.05rem; } .masthead nav { border-top: 0; margin-top: 0; } .masthead nav > ul { flex-wrap: nowrap; gap: 1.35rem; } .masthead nav a { white-space: nowrap; } } @media (min-width: 75rem) and (max-width: 88rem) { .wordmark .full { display: none; } .masthead nav > ul { gap: 1.1rem; } } /* === layer 77: warmth ====================================================== The site read as sterile, and the palette was the reason rather than the layout. Pure white ground, ink at #161616 which is effectively black, a secondary ground of #F4F4F4 which is neutral grey and therefore reads as unstyled, and every grey in the file was hueless. Nothing was warm because nothing had any warmth in it to begin with. The reference is mrjttaylor.com, which solves this with a cream ground, a warm blue-grey for body copy, and geometry that is softened rather than square. Its palette is lifted here where it applies. WHAT IS DELIBERATELY NOT COPIED The display face. That site is Oswald, condensed and shouting, which is right for one person's name and wrong for a standards body: NBOP's Cinzel is most of what makes a page look like a published document rather than a pitch. Warmth is a palette and geometry problem, not a reason to give up the institutional voice. White also survives, for content that behaves like a document. Tables and panels stay white on the cream ground, which is what gives them the sense of being sheets laid on a desk, and keeps long reading crisp. --------------------------------------------------------------------------- */ :root { /* grounds */ --paper: #FFFFFF; /* documents, tables, panels: still white */ --paper-warm: #FAF6EF; /* the page itself, from mrjttaylor.com */ --paper-cream: #F4EEE2; /* a warmer tier for pulled-aside blocks */ /* ink. #161616 was near black and hard on a cream ground. */ --ink: #22303C; --ink-soft: #54606A; --ink-faint: #82796C; /* warm taupe, so muted text is muted and not cold */ /* rules, warmed to sit on cream rather than cut across it */ --rule: #E4DBCB; --rule-soft: #F0E9DD; /* geometry */ --r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px; } /* The page ground. Everything that was implicitly white now sits on cream, which is the single change that does most of the work. */ body { background: var(--paper-warm); } .masthead { background: var(--paper-warm); border-bottom-color: var(--rule); } footer { background: var(--paper-cream); } /* Content that behaves like a document keeps a white sheet under it, so the contrast between page and document is what creates depth. */ main > .wrap > section > table, .comparison, .admin-table, table { background: var(--paper); } /* Type. A touch more line height and a warmer body colour: the same words read as less clipped without any of them changing. */ body { line-height: 1.75; color: var(--ink-soft); } main p { color: var(--ink-soft); } h1, h2, h3, h4 { color: var(--ink); } /* Buttons become pills. This is the most recognisable thing the personal site does and it is the cheapest warmth on the page: a rounded action reads as an invitation, a square one as a form control. */ .action, .btn, button.btn, a.btn, .navbtn { border-radius: var(--r-pill); } .action { padding-inline: 1.5rem; } /* Panels, tables and images stop being hard rectangles. Small radii only: a standards body should look considered rather than playful. */ .comparison, .admin-table, table, .offer, .note, .status-line, .standfirst, .tile, .card, .glance, figure, .frame img, .showcase img { border-radius: var(--r-md); overflow: hidden; } .hero img, .band img { border-radius: var(--r-lg); } /* Full bleed dark bands stay square. A rounded corner on a band that runs to the edge of the window reads as a mistake rather than a decision. */ .hero, .closer, .band, .release { border-radius: 0; } /* The navy sidebar panel and the dark bands get a warm edge rather than a hard one, so they sit on the cream instead of being punched through it. */ .glance, aside.glance, .side-panel { border-radius: var(--r-md); } /* Table headers were full strength #0063C6 across the width, which is the loudest object on any page it appears on. Keeping the colour and dropping the weight leaves it legible and stops it shouting. */ table thead th, .comparison thead th { background: var(--navy); } /* Rules inside tables warm up with everything else. */ table td, table th { border-color: var(--rule-soft); } /* Focus rings pick up the accent rather than the browser default. */ a:focus-visible, button:focus-visible, .action:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; border-radius: var(--r-sm); } /* Form controls, which were the squarest thing on the site. */ input[type="text"], input[type="email"], input[type="search"], input[type="number"], select, textarea { border-radius: var(--r-sm); background: var(--paper); border-color: var(--rule); } /* A little lift under anything that is meant to read as a card. Shadows are kept nearly invisible: warmth here comes from colour and radius, and a heavy shadow would make an institutional page look like an app. */ .offer, .glance, .tile, .card { box-shadow: 0 1px 2px rgba(34, 48, 60, .04); } /* === layer 78: warmth, second pass ======================================== The palette moved but the page still had cold, heavy objects on it. The navy was the main one: #223D71 is a saturated blue-violet, and it is the fill behind every dark band, every side panel, every table header and the primary button, so it set the temperature of the whole site regardless of what the ground did. mrjttaylor.com uses #1E3A56, which is the same idea desaturated and turned toward slate. Changing one token cools nothing and warms everything at once. The rest of this layer is about severity rather than colour. A standards body should look considered, not clenched, and most of what read as rigid was hard 2px rules, very wide letterspacing, and flat fills with no depth. --------------------------------------------------------------------------- */ :root { --navy: #1E3A56; /* was #223D71, saturated blue-violet */ --navy-deep: #172E44; /* for gradient ends and hovers */ --navy-soft: #24425F; } /* Dark bands get a shallow vertical gradient. Flat navy across a full bleed band reads as a printed block; a few percent of movement reads as a surface. Kept subtle enough that it is felt rather than noticed. */ .hero, .closer, .band, .release { background: linear-gradient(178deg, var(--navy-soft) 0%, var(--navy) 55%, var(--navy-deep) 100%); } /* Side panels lose the slab quality: a warm hairline at the top edge gives them a lid instead of a cut, and a soft shadow lifts them off the cream. */ .glance, aside.glance, .side-panel { background: linear-gradient(180deg, var(--navy-soft) 0%, var(--navy) 100%); border-top: 3px solid var(--signal); box-shadow: 0 2px 10px rgba(30, 58, 86, .10); } /* The marker above a section heading was a hard 2px bar. Widened, thinned, and faded at its tail, so it points rather than stops. */ section > h2::before, main > .wrap > section > h2::before { height: 3px; width: 3rem; border-radius: 2px; background: linear-gradient(90deg, var(--signal) 0%, rgba(0, 99, 198, 0) 100%); } /* Eyebrows were set at .2em, which is wide enough to read as engraving. A little tighter, and warmed off pure accent blue so they sit on cream. */ .eyebrow { letter-spacing: .13em; font-size: .73rem; } /* The standfirst rule softens for the same reason as the heading marker. */ .standfirst { border-left-width: 3px; border-radius: 2px; } .note, .status-line, .offer { border-left-width: 3px; } /* Sections breathe. Most of the rigidity left after the palette moved was simply that blocks sat too close to each other to feel unhurried. */ main > .wrap > section { margin-top: 3.4rem; } main > .wrap > section > h2 { margin-bottom: 1rem; } main p + p { margin-top: 1.05rem; } /* Links: the underline arrives on hover rather than sitting there, and the colour warms slightly instead of jumping. */ main a:not(.action):not(.btn) { text-underline-offset: .18em; text-decoration-thickness: 1px; transition: color .14s ease; } /* Buttons gain a little lift and a hover that moves rather than flashes. */ .action, .btn { transition: transform .14s ease, box-shadow .14s ease, background-color .14s ease; box-shadow: 0 1px 2px rgba(30, 58, 86, .10); } .action:hover, .btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(30, 58, 86, .16); } .action:active, .btn:active { transform: translateY(0); box-shadow: 0 1px 2px rgba(30, 58, 86, .12); } /* Anyone who has asked for less motion gets none of the above. */ @media (prefers-reduced-motion: reduce) { .action, .btn, main a { transition: none; } .action:hover, .btn:hover { transform: none; } } /* Table headers stop being a solid bar of accent across the page width. */ table thead th, .comparison thead th { background: var(--navy); border-bottom: 2px solid var(--navy-deep); } table tbody tr:nth-child(even) { background: rgba(244, 238, 226, .45); } /* Images sit on the cream rather than being cut into it. */ main img, figure img { border-radius: var(--r-md); } /* The footer is the warmest thing on the page, which is the right place to end: a page should relax at the bottom rather than stop. */ footer { background: var(--paper-cream); border-top: 1px solid var(--rule); } /* Accessibility correction to layer 77. --ink-faint was warmed to #82796C, which looked right and measured 3.98:1 on the cream and 3.71:1 on the warm tier. That token carries eyebrows, captions and table meta, all of which are normal-size text and therefore need 4.5:1. Warmth is not worth failing contrast for, so the same hue is taken down until it passes on the harder of the two grounds. */ :root { --ink-faint: #706757; } /* 5.18:1 on cream, 4.83:1 on the warm tier */ /* === layer 79: the rest of the corners ==================================== Layers 77 and 78 rounded the components I could name from looking at a few pages. A static pass over every stylesheet then found 221 selectors that paint a background or a border and never round anything, which is why the site still had square panels on pages I had not opened. So this block is generated from that audit rather than written by hand, which is the only way to be sure it covers what is actually there instead of what I remembered seeing. Three radii by role: controls take the small one, anything that reads as an action takes the pill, and every other painted container takes the panel radius. Deliberately left square: table cells, whose corners belong to the table around them; full bleed bands, where a rounded corner against the window edge reads as a mistake; breadcrumbs and progress bars, which are text and rules rather than panels. --------------------------------------------------------------------------- */ /* form controls */ .admin-field input, .admin-field textarea, .board input[type="number"], .board input[type="text"], .board select, .capturerow input[type="email"], .exam-q textarea, .field input[type="number"], .field input[type="text"], .field textarea, .pf input[type="email"], .pf input[type="password"], .pf input[type="text"], .q input[type="text"], .q textarea, .q-int input, .searchbar input, .searchbar select, input[type=range] { border-radius: var(--r-sm); } /* anything that reads as an action */ .action-secondary, .btn.danger, .btn.ghost, .callout .action, .cases-list .pill, .cases-list .pill.good, .cases-list .pill.stop, .cases-list .pill.warn, .offer .action, .pagehead .action, .pagehead .action-secondary, .pill, .pill.go, .pill.good, .pill.stop, .pill.warn, .shot .action, .shot .action-secondary, .sidebar .action, .sidebar .action-secondary, .sidebar .buypills .action-secondary, button.action { border-radius: var(--r-pill); } /* painted containers */ .admin-audit li, .admin-dl, .admin-dl > div, .admin-ends li, .admin-form, .admin-gaps, .admin-search, .admin-stats, .admin-stats > div, .admin-tabs, .admin-tabs a, .allocnum, .allocrow, .bookblock, .bookblock .cover img, .callout, .capture, .card .price, .cases-list li, .courses .live, .courses .soon, .courses li, .cov, .cov.held, .coverage, .covers img, .credcard, .credcard .rows, .criteria-strip, .criterion, .criterion.met .mark, .domain, .domain .box, .domains, .door, .endorsement, .endorsement.held, .err, .exam-bar, .exam-q, .facts, .facts div, .facts div:nth-child(1), .facts div:nth-child(2), .faq, .faq details, .feature, .finding, .finding.closing, .finding.sev-primary, .firewall, .foot-base, .intro, .layout .body > .intro, .layout .body > div + section, .layout .body > section + div, .layout .body > section + section, .layout .facts > div, .lessonlist a, .lessonvideo .transcript, .msg, .msg.err, .msg.ok, .nextsteps .step, .nextsteps .step.primary, .offer li, .offer ul.spec, .pagehead, .portal-bar, .portal-bar .who button, .portal-bar nav a, .portal-rail, .portal-rail .rail-flyout, .proof, .q, .q-choice, .qblock, .radio, .rail, .rail .railtop, .rail-brand, .rail-burger, .rail-drawer, .rail-drawer .drawer-account, .rail-drawer .drawer-close, .rail-drawer .drawer-group + .drawer-group, .rail-drawer .drawer-head, .rail-flyout, .rail-scrim, .rail-top, .rate, .result, .rule, .segmented label, .segmented label.on, .shot, .showcase .frame img, .showcase.cover .standfirst, .showcase.cover img, .sidebar, .sidebar .rule-top, .sidebar h2, .sidebar ul.spec, .stage, .status, .steps li, .steps li.now, .submitrow, .tint, .tint .card, .tint .feature, .tint .volume, .tint ul.spec li, .toggle, .verdict, .volume, .yousaid, body .features.tiles > .feature .n, body .jta-count, body .jta-meter, body .jta-meter > span, body .jta-strip, body .pairnote, body .postal, body address.postal, body footer, body footer .foot-base, body footer a, body main table, body p.disclosure.is-error, body p.disclosure.is-note, details.q, details.q:first-of-type, h2, hr.rule, main > .wrap > section > table, nav a, nav ul li.signin, section, ul.spec, ul.spec li { border-radius: var(--r-md); } /* The two the generated pass could not reach. .subnav is the nav dropdown from layer 75, written before the radius tokens existed, so it declared its own border and never came back for a corner. The panel it drops is the first thing a visitor sees open, so it is the worst one to have left square. And an anchor that carries its own border is behaving as a button whatever it is called, so it takes the action radius. */ .masthead .subnav { border-radius: 0 0 var(--r-md) var(--r-md); } main a[class]:not(.action):not(.btn) { border-radius: var(--r-sm); } /* === layer 80: what the cream revealed ==================================== Moving the ground to cream exposed a class of element that had been invisible: sections painted white on a white page. They read as nothing before and read as cards now, which is a layout they were never designed for. .intro is the clearest case, an intro band declared `background: var(--paper); border: 0` with 90px of top padding and two paragraphs in it. As a band that is fine. As a card it looks like a mistake, because it is one. The rule is simple and worth stating: white is for things that behave like a document, which means tables, panels, notes and callouts. A full width section that merely wanted to not be grey is a band, and a band takes the page ground. --------------------------------------------------------------------------- */ .intro { background: transparent; border-radius: 0; } /* Same reasoning: a section that runs the full content width and carries no border is a band rather than a panel, so it does not take a card corner. */ main > .wrap > section:not([class]) { background: transparent; border-radius: 0; } /* === layer 81: the panel family, and one number per row ==================== THE PANELS WENT INVISIBLE .card, .volume, .note, .faq and .status-line were all declared `background: var(--paper-warm)`, which was #F4F4F4 and read as a quiet panel on a white page. The warmth pass turned that token into the cream the whole page now sits on, so every one of them became cream on cream and stopped being a panel at all. The Common questions block was the visible symptom: correctly styled, and invisible. This is the same failure as .intro in layer 80 and the exact inverse of it. That one was white on white and became a card it was never meant to be; these were grey on white and became nothing. Both were caused by a token changing meaning underneath a rule that named it. The lesson is worth keeping: --paper-warm used to mean "slightly not the page" and now means "the page". Anything that wanted the first meaning has to say white. --------------------------------------------------------------------------- */ .card, .volume, .note, .faq, .status-line { background: var(--paper); border: 1px solid var(--rule); border-radius: var(--r-md); } .card, .volume { border-left: 3px solid var(--signal); } /* The FAQ needs padding now that it is a card rather than a rule with items hanging off it. */ .faq { padding: 1.35rem 1.5rem; max-width: 46rem; border-top: 1px solid var(--rule); } .faq > h2 { margin-top: 0; } .faq > h2::before { content: none; } .faq details:last-of-type { border-bottom: 0; } .faq details:last-of-type > p { margin-bottom: 0; } /* === layer 82: the ghost that was never a ghost =========================== 303 buttons across 105 pages carry class="action ghost", and no stylesheet in this project ever defined .action.ghost. The modifier is only honoured on .btn, via .btn:not(.ghost), so on .action it did nothing at all and every intended secondary rendered as a filled primary. The markup asks for two tiers and the page showed one. That is why paired calls read as two equally weighted demands: "Paperback, $19.99" beside "Kindle, $9.99", "See the 15 lessons" beside "Run The Automation Reading", "Start with the Reading" beside "Or read from the beginning". In each pair the second is the quieter option and none of them looked it. Two grounds, because the same button appears on both. On the page the ghost is ink on nothing with a hairline. In a hero it has to take the light half of the palette or it is dark ink on navy. --------------------------------------------------------------------------- */ .action.ghost { background: transparent; color: var(--ink); border-color: #C9CED6; } .action.ghost:hover, .action.ghost:focus-visible { background: transparent; border-color: var(--signal); color: var(--signal-ink); } .pagehead .action.ghost, .hero .action.ghost, .band .action.ghost, .closer .action.ghost { background: transparent; color: #FFFFFF; border-color: rgba(255, 255, 255, .5); } .pagehead .action.ghost:hover, .pagehead .action.ghost:focus-visible, .hero .action.ghost:hover, .hero .action.ghost:focus-visible, .band .action.ghost:hover, .band .action.ghost:focus-visible, .closer .action.ghost:hover, .closer .action.ghost:focus-visible { background: rgba(255, 255, 255, .1); border-color: #FFFFFF; color: #FFFFFF; } /* === layer 83: three rules the blue migration left behind ================== The accent used to be the orange #E8571F, and the comment still standing at line 1167 records the arithmetic that justified pairing it with near black type: "Bright accent with near-black type is 4.7:1 and passes; the same orange with white type would be 3.6:1 and would not." That was true of the orange. The later palette repointed --signal to #0063C6 and the arithmetic inverted: white on the blue is 5.83:1 and passes, near black on it is 2.31:1 and fails. Most consumers were migrated. Three were not, and they are listed here rather than edited in place so the reason survives next to the fix. 1 and 2 are AA failures reachable today on every page. 3 is not a contrast failure. It is four rules that were written and then silently defeated by a later rule of equal specificity. --------------------------------------------------------------------------- */ /* 1. Selected text, anywhere on the site. --ink on the accent fill is 2.31:1. The earlier ::selection at line 906 had this right with white; the rule at 1181 overrode it while the accent was still orange. Hardcoded rather than pointed at --paper, because a token that means "panel" should not be what decides legibility on top of a fill. */ ::selection { background: var(--signal); color: #FFFFFF; } /* 2. The Sign in button in the masthead, on 162 pages, for signed out visitors only. It rests navy with white type and flipped to the accent fill with --ink type on hover, which is the same 2.31:1. White also matches the resting label, so the button no longer changes text colour when the pointer arrives. */ .masthead .signin a:hover { background: var(--signal); color: #FFFFFF; border-bottom: 0; } /* 3. Buttons on the dark grounds. Four rules say a button on a hero, band, closer, release, sidebar or pagehead should inverse to a white fill with navy type on hover, and all four are dead: .action:not(.action-secondary):hover carries the same specificity, sits later in the file, and wins with a darker blue instead. The label stays legible either way, but against the closer's navy the fill goes from 1.78:1 to 1.28:1, so the button gets harder to see at the moment it is being pointed at. The intended white is 10.4:1. Restated here at a specificity the later rule cannot take back. */ .hero .action:not(.action-secondary):hover, .band .action:not(.action-secondary):hover, .closer .action:not(.action-secondary):hover, .release .action:not(.action-secondary):hover, .sidebar .action:not(.action-secondary):hover, .pagehead .action:not(.action-secondary):hover { background: #FFFFFF; border-color: #FFFFFF; color: var(--navy); } /* The ghost variant on those grounds keeps its own treatment from layer 82, which is a light outline, so it must not be caught by the rule above. */ .hero .action.ghost:not(.action-secondary):hover, .band .action.ghost:not(.action-secondary):hover, .closer .action.ghost:not(.action-secondary):hover, .release .action.ghost:not(.action-secondary):hover, .sidebar .action.ghost:not(.action-secondary):hover, .pagehead .action.ghost:not(.action-secondary):hover { background: rgba(255, 255, 255, .1); border-color: #FFFFFF; color: #FFFFFF; } /* === layer 84: the published weighting ===================================== Written by standard-weights.js when a job task analysis finding exists. The table carries either what the analysis found or, once a committee has adopted it, the weighting of the standard. The page says which, so this only has to make eight numbers readable. */ .weights-block { margin: 1.75rem 0 0; } .weights-table { width: 100%; max-width: 34rem; border-collapse: collapse; background: rgba(255, 255, 255, .06); border: 1px solid rgba(255, 255, 255, .18); border-radius: var(--r-md); overflow: hidden; } .weights-table th, .weights-table td { text-align: left; padding: .55rem .85rem; font-size: .95rem; border-bottom: 1px solid rgba(255, 255, 255, .12); } .weights-table thead th { font-family: var(--display); font-size: .7rem; letter-spacing: .14em; text-transform: uppercase; color: #C6D2E2; font-weight: 500; } .weights-table tbody tr:last-child td { border-bottom: 0; } .weights-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-family: ui-monospace, Menlo, Consolas, monospace; color: #FFFFFF; } .weights-excl { margin: .9rem 0 0; max-width: 40rem; font-size: .88rem; color: #C6D2E2; line-height: 1.6; } /* The same table on a light ground, if it is ever placed outside a closer. */ :not(.closer):not(.band) > .weights-block .weights-table { background: var(--paper); border-color: var(--rule); } :not(.closer):not(.band) > .weights-block .weights-table thead th { color: var(--ink-faint); } :not(.closer):not(.band) > .weights-block .weights-table td.num { color: var(--ink); } :not(.closer):not(.band) > .weights-block .weights-excl { color: var(--ink-soft); } .weights-excl-list { margin: .5rem 0 0; padding-left: 1.15rem; max-width: 40rem; font-size: .88rem; color: #C6D2E2; line-height: 1.65; } .weights-excl-list li { margin: 0 0 .25rem; } :not(.closer):not(.band) > .weights-block .weights-excl-list { color: var(--ink-soft); } /* Two site wide table rules reach into this one and break it on a dark ground. main tbody tr:nth-child(even) td (nbop.css:1495) and table tbody tr:nth-child(even) (nbop.css:3954) paint alternate rows a light cream, which on the navy closer produces a row of pale text on pale ground that cannot be read at all. The header rule at :3950 fills thead with the accent, which is loud for eight numbers whose whole point is to be read calmly. Both are answered here rather than weakened where they live, because they are right for tables on the page ground. */ .closer .weights-table tbody tr:nth-child(even), .closer .weights-table tbody tr:nth-child(even) td, .band .weights-table tbody tr:nth-child(even), .band .weights-table tbody tr:nth-child(even) td { background: rgba(255, 255, 255, .05); } .closer .weights-table tbody tr:nth-child(even) td, .band .weights-table tbody tr:nth-child(even) td { color: #FFFFFF; } .closer .weights-table thead th, .band .weights-table thead th { background: rgba(255, 255, 255, .10); color: #C6D2E2; } .closer .weights-table td, .closer .weights-table th, .band .weights-table td, .band .weights-table th { border-color: rgba(255, 255, 255, .14); } .closer .weights-table td:first-child, .band .weights-table td:first-child { color: #FFFFFF; }