to a readable minimum and a price is the one number on the card someone squints at. 14 was still under it. */ margin: 0; font-size: 0.9375rem; letter-spacing: 0.06em; color: var(--ink-soft); font-variant-numeric: tabular-nums; } .prod__opts { display: grid; gap: 0.5rem; margin-top: 0.3rem; } .prod__opt { display: grid; gap: 0.25rem; } .prod__opt > span { font-size: 0.625rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); } .prod__opt select, .prod__opt input { /* ⚠ 44px, not 40. Fifteen products with two controls each is thirty targets, every one of them under the minimum on every handset width: the audit counted 86 findings from this single declaration. A size picker that is fiddly to hit is a size picked wrong. */ font: inherit; font-size: 0.875rem; padding: 0.5rem 0.6rem; min-height: 44px; /* ⚠ 16px on a handset, or iOS zooms the whole page the moment the control takes focus and leaves the reader scrolled sideways in a store. The desktop size stays smaller because the label above it does the work. */ border: 0; border-radius: 2px; box-shadow: inset 0 0 0 1px rgba(17, 29, 46, 0.22); background: var(--paper); color: var(--ink); width: 100%; } @media (max-width: 860px) { .prod__opt select, .prod__opt input { font-size: 1rem; } } .prod__opt--qty { max-width: 6rem; } .prod__add { margin-top: 0.4rem; justify-self: start; } /* ------------------------------------------------------------- the request */ .request { display: grid; gap: clamp(2rem, 1.6rem + 2vw, 3.5rem); } @media (min-width: 900px) { .request { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } } .request__list { display: grid; gap: 1rem; align-content: start; } .request__empty { margin: 0; color: var(--ink-soft); max-width: 40ch; } .reqitems { list-style: none; margin: 0; padding: 0; display: grid; } .reqitem { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.8rem 0; border-bottom: var(--rule) solid var(--hairline); } .reqitem:first-child { border-top: var(--rule) solid var(--hairline); } .reqitem span { font-family: var(--font-display); font-size: 1.0625rem; } .reqitem__x { border: 0; background: transparent; cursor: pointer; width: 44px; height: 44px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-size: 1.25rem; line-height: 1; color: var(--ink-soft); border-radius: 999px; } .reqitem__x:hover, .reqitem__x:focus-visible { color: var(--accent-link); } /* The Diffability hero is a photograph rather than the About page's montage, so it needs the same framing .vhero__v gives a video. ⚠ FIT TO HEIGHT, cropped like the homepage header, not shown whole. Jarryd, 24 Sept: use the frame from the header and keep the air it leaves above Michael's head. So this hero keeps .vhero's own min-height and .vhero__v's `cover`, and changes exactly one number. 85%, the same number and the same reasoning as .stagehero--stage above. This hero is deeper than the header's, so `cover` takes a real bite out of the height rather than a few percent, and 85% spends that bite on the empty ceiling above Michael instead of on the audience along the bottom edge. Those heads are the reason the frame was chosen, so they are the thing the crop must not reach. If the header's crop is ever retuned, retune this with it: they are the same photograph. */ /* ⚠ 2 Oct: the hero is now the NELA-NJ room holding up Diffability shirts (Stephanie supplied it), not the header frame, so the numbers above no longer apply. Michael stands front and centre and the faces run across roughly 35% to 55% down the frame; 42% keeps that band in the window at desktop depths. */ .vhero--diff .vhero__v { object-position: 50% 42%; } /* ⚠ Copy sits RIGHT on this hero, and only on this hero. Not a style preference and not a departure from round one's "hero text on the left", which was written about the About page's montage. It follows the photograph. In this frame Michael stands left and gestures RIGHT, so the headline lands where he is already pointing; that is the same call made on the homepage header when this shot was chosen, and the reason the supplied mock-up's left-hand copy was rejected there rather than mirroring him. The full argument is in design/build_hero_stage.py. Left-hand copy was tried here first and the words sat across his chest with his hand coming through the standfirst. */ @media (min-width: 861px) { .vhero--diff .vhero__copy > * { margin-inline-start: auto; } } /* ⚠ A SECOND scrim, running left to right, and this hero needs it where the About hero does not. .vhero::after fades up from the foot, which works on a frame that is dark at the bottom left. This frame has a white projection screen exactly where the type sits, so the heading landed on near-white and the brass eyebrow all but vanished. The bottom scrim stays, because it is what keeps the type sitting on ground rather than floating on a picture. */ /* ⚠ A CORNER, not a column, and the diagonal is what makes this frame work. Michael stands centre-left here and .vhero__copy sits hard left (round one, planner item P7: Jarryd asked for hero copy on the left, so the type does not move). A left-to-right ramp strong enough to carry the standfirst therefore also crossed his face, because it treats every height the same. It does not need to, because the two things sit in opposite corners. Measured on the built page at 1025x701, as fractions of the hero box: the copy runs 31% to 85% down and starts 48% across, while Michael lands around 23% across with his face in the top third. So the wash runs to the top LEFT: heavy in the bottom-right corner the words occupy, and gone before it climbs to him. Type on ground, face untouched. */ .vhero--diff::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top left, color-mix(in oklab, var(--ground) 92%, transparent) 0%, color-mix(in oklab, var(--ground) 74%, transparent) 26%, color-mix(in oklab, var(--ground) 36%, transparent) 48%, transparent 64%); } /* ⚠ On a phone this hero STACKS, exactly as the homepage one does, and for exactly the same reason: it is now the same photograph. Cover-cropping a 16:9 frame into a portrait slot leaves a 31% wide window, which sliced Michael in half at the left edge and would have magnified 518px of source across a 390px screen at 3x. The 5:4 box and the 0% anchor are the header's numbers; see .stagehero--stage. With nothing behind the type any more, both scrims come off rather than laying navy over the picture above. */ @media (max-width: 860px) { .vhero--diff { display: block; min-height: 0; padding-block: 0 clamp(2.5rem, 2rem + 4vw, 4rem); } .vhero--diff .vhero__v { position: static; width: 100%; height: auto; /* Phones get diffability-group-m, already cropped to the faces. */ aspect-ratio: auto; } .vhero--diff::before, .vhero--diff::after { display: none; } .vhero--diff .vhero__copy { padding-top: clamp(1.75rem, 1.4rem + 2vw, 2.5rem); } } /* The publisher's 1,920 x 1,080 promotional banner, full width across the top of the Book page once the book is live. aspect-ratio pairs with height:auto, because the img carries real width/height attributes and aspect-ratio is silently ignored without it (the "stretched photos" trap). */ .book-banner { margin: 0; } .book-banner img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; } /* ------------------------------------------------ footer, round two (29 Sept) Social links are icons now, and the contact column is tighter ("feels too spread out"). Footer only: no global spacing token is touched. ⚠ Selectors are deliberately heavy. `.footer a:not(.btn)` (0,2,1) sets display, padding and a hover translate, and the handset block further up makes footer links `display: block` with 0.72rem padding. The button here needs its own box, so it has to out-score both. */ .footer ul.footer__social { flex-direction: row; flex-wrap: wrap; gap: 0.25rem; margin-left: -0.6rem; } .footer ul.footer__social a.footer__socialbtn:not(.btn) { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; min-height: 44px; padding: 0; border-radius: 50%; color: rgba(242, 238, 230, 0.82); transition: color var(--duration) var(--ease-out-expo), background-color var(--duration) var(--ease-out-expo); } .footer ul.footer__social a.footer__socialbtn:not(.btn):hover, .footer ul.footer__social a.footer__socialbtn:not(.btn):focus-visible { color: var(--accent-soft); transform: none; background-color: rgba(242, 238, 230, 0.09); } .footer ul.footer__social a.footer__socialbtn:focus-visible { outline: 2px solid var(--accent-soft); outline-offset: 2px; } .footer__social-h { margin-top: 1.1rem; } /* Contact and information block: the row gap was a 0.7rem flex gap on top of 0.42rem of padding per link, which put each row about 45px from the next. */ @media (min-width: 861px) { .footer__grid { row-gap: 1.5rem; column-gap: clamp(1.25rem, 2.2vw, 2.25rem); } .footer__grid ul { gap: 0.1rem; } .footer h2, .footer h3 { margin-bottom: 0.5rem; } } @media (max-width: 860px) { .footer__grid { row-gap: 1.25rem; } .footer__grid > * + * { padding-top: 0; } } /* ------------------------------------------- Diffability hero, 2 Oct (round 2b) ⚠ STACKED AT EVERY WIDTH NOW, not only on a phone. The hero became the NELA-NJ room holding up Diffability shirts, and that frame is faces edge to edge: overlaid copy, on either side, landed the headline across Michael's face or a row of attendees. So the picture sits whole above the type, the same arrangement the handset rules above already use, and both scrims come off because nothing is laid over the photograph any more. 2:1 keeps the band of faces (35% to 55% down the source) with room to spare. */ @media (min-width: 861px) { .vhero--diff { display: block; min-height: 0; padding-block: 0 clamp(2.5rem, 2rem + 3vw, 4.5rem); } .vhero--diff .vhero__v { position: static; width: 100%; height: auto; /* The file itself is the crop now (just over the back row of heads), so the box takes the picture's own shape rather than cutting it again. */ aspect-ratio: auto; } .vhero--diff::before, .vhero--diff::after { display: none; } .vhero--diff .vhero__copy { padding-top: clamp(2rem, 1.6rem + 2vw, 3rem); margin-inline: auto; } .vhero--diff .vhero__copy > * { margin-inline-start: 0; } } /* The AAHFN kit frame is a PORTRAIT since 4 Oct (Michael's own pick, grey suit on the blue drape), and every tile that previews it is landscape. Centred, the crop took his head off. He stands in the top third, so anchor there. Matched on the file rather than a class because the same image appears in three different tile components. */ img[src*="michael-kutcher-stage-01"] { object-position: 50% 12%; } /* Book page shop buttons (12 Oct). The main shop is the solid button, any others sit beside it as outlines, and they wrap on a phone. */ .book__shops { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: .5rem; } /* The tour list beside the calendar (12 Oct). Grid on the left, the dates as a list on the right, so nobody has to click a dot to find a city. On a phone the list comes first: it is the quicker read on a small screen. */ .cal-layout--agenda { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(15rem, 1fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: start; } .cal-layout--agenda .cal { grid-template-columns: repeat(auto-fit, minmax(16rem, 1fr)); } .agenda { margin-top: 2.5rem; position: sticky; top: calc(var(--masthead-h, 107px) + 1.5rem); padding: 1.5rem 1.75rem; border-radius: 10px; background: rgba(255, 255, 255, 0.04); box-shadow: inset 0 0 0 1px rgba(176, 141, 87, 0.28); } .agenda__eyebrow { font-size: .75rem; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-soft); margin: 0 0 .75rem; } .agenda__month { font-family: var(--font-display); font-weight: 400; font-size: 1.25rem; color: var(--on-ground); margin: 1.25rem 0 .5rem; } .agenda__month:first-of-type { margin-top: 0; } .agenda__list { list-style: none; margin: 0; padding: 0; } .agenda__item { display: grid; grid-template-columns: 3rem 1fr; gap: .9rem; padding: .8rem 0; border-top: 1px solid rgba(242, 238, 230, 0.12); } .section--ground .agenda__date { margin: 0; display: flex; flex-direction: column; line-height: 1; } .agenda__day { font-family: var(--font-display); font-size: 1.6rem; color: var(--accent); font-variant-numeric: tabular-nums; } .agenda__dow { font-size: .7rem; letter-spacing: .08em; text-transform: uppercase; color: rgba(242, 238, 230, 0.6); margin-top: .3rem; } .section--ground .agenda__where { margin: 0; color: var(--on-ground); font-weight: 600; } .section--ground .agenda__venue, .section--ground .agenda__note { margin: .15rem 0 0; color: rgba(242, 238, 230, 0.72); font-size: .9rem; } .agenda__link { display: inline-block; margin-top: .35rem; font-size: .85rem; color: var(--accent-soft); } .agenda__link:hover, .agenda__link:focus-visible { color: var(--on-ground); } @media (max-width: 900px) { .cal-layout--agenda { grid-template-columns: 1fr; } .cal-layout--agenda .agenda { order: -1; position: static; } } /* Footer sign-up (12 Oct), on every page. The form is the same component as everywhere else; on the navy footer only its small type needs lifting. */ .footer__news { margin-top: 1.75rem; max-width: 26rem; } .footer__news h2 { margin-bottom: .75rem; } .footer__news .form { margin: 0; } .footer__news .field__hint { color: rgba(239, 229, 213, 0.6); } .footer__news .signup { max-width: 100%; }