/** Shopify CDN: Minification failed Line 111:46 Expected identifier but found whitespace Line 112:69 Unterminated string token Line 114:60 Unterminated string token **/ /* Berkeley Life · The Nitric Oxide Course --------------------------------------------------------------- Standalone. This folder does not link women_lp/article/styles.css and should not start to. That file is 162kb of advertorial written for a page nine minutes long, and this page is a sequence of single screens. What it borrows instead is the TOKEN BLOCK below, copied value for value, so the two funnels look like one brand without one of them owning the other's stylesheet. IF A TOKEN CHANGES IN women_lp, change it here too. There is no shared file to do it for you, and that is the deliberate trade. Mobile first throughout. 90%+ of traffic is a phone, the audience is 45 to 60, and nothing here depends on hover. Every screen is sized to fit a short viewport without scrolling where it can. */ /* ============ tokens ============ */ :root { --paper: #f5f0e8; --card: #ffffff; --ink: #080b2b; --plum: #593750; --plum-lift: #6b3a5b; --plum-tint: #f0ecef; --muted: rgba(8, 11, 43, 0.68); --muted-soft: rgba(8, 11, 43, 0.60); --rule: rgba(8, 11, 43, 0.24); --rule-soft: rgba(8, 11, 43, 0.10); /* Used by offer.css only. They live here rather than there because this is the token block and there is exactly one of it. --star is the green the rating row wears, deliberately not Okendo's orange and deliberately not the page accent. */ --hairline: rgba(8, 11, 43, 0.12); --star: #3e7d51; --furniture: #f3f4f6; --t-body: 18px; --t-caption: 16px; --t-meta: 14px; --t-micro: 13px; --ease: cubic-bezier(0.32, 0.72, 0, 1); } /* ============ reset and base ============ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--card); color: var(--ink); font-size: var(--t-body); line-height: 1.5; font-family: 'tt-commons-pro', 'Outfit', -apple-system, 'Helvetica Neue', sans-serif; font-weight: 400; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } /* Visible focus everywhere, because a proportion of this audience is on a keyboard or a switch and the default ring is invisible on plum. */ :focus-visible { outline: 2px solid var(--plum); outline-offset: 2px; } .a11y { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } .serif { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 600; } /* ============ shell ============ THE PAGE GROUND IS PAINTED ON THE ROOT ID, NOT ON body, AND THAT IS A SPECIFICITY FIX RATHER THAN A PREFERENCE. Standalone, `body { background: var(--card) }` above is the whole story. Inside the Shopify theme it is not. The theme puts class="bg-cream font-body text-navy" on , and `.bg-cream` is a class at (0,1,0) while a bare `body` selector is an element at (0,0,1). Specificity is decided before source order, so it does not matter that our stylesheet loads later. The store's cream won, and both pages shipped with a warm grey ground behind a design drawn on white. The cream figures then sat cream-on-cream and stopped reading as figures. An id is (1,0,0) and beats any utility class without needing !important. This is the general defence, not a one-off: ANY rule here written on a bare element selector can be overridden by a theme class on that element. body is the only element the theme classes, and background was the only property that actually differed, but the rule holds. Put page-level paint on the root id. The port script also forces body itself, because the body's own ground is still what shows in an iOS overscroll bounce. */ FONT AND SIZE ARE RESTATED HERE FOR THE SAME REASON, even though they currently come out right on the store. They come out right by coincidence: the theme's .font-body happens to resolve to the same face and its .text-navy to the same ink. Leaning on a coincidence in someone else's stylesheet is how the background broke. */ #bl-q, #bl-o { background: var(--card); color: var(--ink); font-family: 'tt-commons-pro', 'Outfit', -apple-system, 'Helvetica Neue', sans-serif; font-size: var(--t-body); line-height: 1.5; } #bl-q { min-height: 100dvh; display: flex; flex-direction: column; } /* dvh, not vh. On iOS Safari a 100vh column sits under the address bar and the Continue button lands in the part of the screen the browser chrome covers. This is the whole reason the button was being missed on the first draft's short-viewport test. */ .brandbar { display: flex; justify-content: center; padding: 0.9rem 1rem; border-bottom: 1px solid var(--rule-soft); background: var(--card); } .brandbar__logo { width: min(190px, 54vw); height: auto; } /* Same new-tab reasoning as women_lp's brandbar. Coming Back reloads this page at the cover, because the answers live in memory, so a same-tab trip to the store would cost her the whole run. */ /* The side padding carries the safe-area inset as well as its own, so the column clears the notch and the home indicator's side rails when the phone is held in landscape. max() rather than a plain add, because on every phone in portrait the inset is 0 and the design value is the one that should win. */ .stage { flex: 1; display: grid; align-items: start; width: 100%; max-width: 34rem; margin: 0 auto; padding: 1.5rem max(1.15rem, env(safe-area-inset-right)) 3rem max(1.15rem, env(safe-area-inset-left)); } /* Room for the action bar when it is up, so the last thing on the screen is never sitting under it. The bar is fixed, so this cannot move the button it is measuring and there is no feedback loop. */ #bl-q.has-bar .stage { padding-bottom: 6rem; } /* ============ screens ============ All screens occupy one grid cell so advancing never shifts the page sideways or reflows anything above. The cell takes the height of the screen SHOWING, not the tallest one, because a grid row sized to the tallest child leaves half a screen of dead space under a short question and reads as a broken page. Same trap women_lp/index.html documents at length; same fix. */ .scr { grid-area: 1 / 1; visibility: hidden; opacity: 0; transform: translateY(10px); transition: opacity 0.34s var(--ease), transform 0.34s var(--ease); pointer-events: none; } .scr:not(.is-on) { height: 0; overflow: hidden; } .scr.is-on { visibility: visible; opacity: 1; transform: none; pointer-events: auto; } @media (prefers-reduced-motion: reduce) { .scr { transition: none; transform: none; } } /* [hidden] is a UA rule at (0,1,0) and loses to any author display. Anything given display here has to say so explicitly or the attribute silently does nothing. */ .stage[hidden] { display: none; } /* ============ progress ============ */ .prog { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 1.4rem; } .prog__track { flex: 1; height: 3px; background: var(--rule-soft); overflow: hidden; } .prog__fill { display: block; height: 100%; width: 0; background: var(--plum); transition: width 0.5s var(--ease); } .prog__label { flex: none; font-size: var(--t-meta); font-weight: 600; color: var(--muted); font-variant-numeric: tabular-nums; } /* ============ cover ============ */ /* height:auto is load-bearing, not tidiness. The width and height attributes on the map to CSS presentational hints, so the markup's height="750" survives a rule that only sets width and aspect-ratio, and the cover renders at its intrinsic height. Every sized image on this page needs the pair. The attributes stay on the markup because they are what reserves the box before the file arrives, which is the whole CLS defence. */ .cover__img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; margin-bottom: 1.3rem; } .cover__kicker { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 600; font-size: 1.12em; color: var(--muted); margin-bottom: 0.4rem; } .cover__head { font-size: clamp(1.85rem, 7.4vw, 2.5rem); line-height: 1.1; font-weight: 800; letter-spacing: -0.025em; margin: 0 0 0.85rem; text-wrap: balance; } .cover__head em { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 600; color: var(--plum); letter-spacing: 0; } .cover__sub { font-size: var(--t-caption); line-height: 1.55; color: var(--muted); margin: 0 0 1.6rem; } /* ============ question ============ */ .q { font-size: clamp(1.55rem, 6.2vw, 2rem); line-height: 1.16; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.45rem; text-wrap: balance; } .hint { font-size: var(--t-caption); color: var(--muted); margin: 0 0 1.3rem; } /* ============ options ============ Squared and hairlined so a list of answers reads as a form on a record rather than a stack of app cards. The tick box keeps its two shapes, a square for multi-select and a circle for single, because those shapes are the only thing telling her whether she may pick more than one. No house style is worth that. */ .opts { display: grid; gap: 0.5rem; margin-bottom: 1.4rem; } .opt { display: grid; grid-template-columns: 1.35rem 1fr auto; align-items: center; gap: 0.75rem; background: var(--card); border: 1px solid var(--rule); padding: 0.95rem 1rem; cursor: pointer; font-size: var(--t-caption); line-height: 1.3; transition: border-color 0.16s ease, background 0.16s ease; -webkit-tap-highlight-color: transparent; } .opt input { position: absolute; opacity: 0; width: 1px; height: 1px; } .opt__box { width: 1.35rem; height: 1.35rem; border: 1.5px solid rgba(8, 11, 43, 0.34); background: #fff; display: flex; align-items: center; justify-content: center; flex: none; } .opt--single .opt__box { border-radius: 50%; } .opt__box svg { width: 0.85rem; height: 0.85rem; opacity: 0; transform: scale(0.7); transition: opacity 0.14s ease, transform 0.14s ease; } .opt:has(input:checked) { border-color: var(--plum); background: var(--plum-tint); } .opt:has(input:checked) .opt__box { border-color: var(--plum); background: var(--plum); } .opt:has(input:checked) .opt__box svg { opacity: 1; transform: scale(1); } .opt:has(input:focus-visible) { outline: 2px solid var(--plum); outline-offset: 2px; } /* ---- marked state, knowledge questions only ---- Added by script once she has committed. The right answer is always marked, whether or not she found it, because the teaching is the point and a wrong answer she is never shown the correction to is worse than no question at all. NO RED AND NO GREEN. A wrong answer here is a woman being taught something nobody ever told her, and scoring it in the colours of a test is the wrong register for that. Right is plum, wrong is the option going quiet. */ .opts.is-marked .opt { cursor: default; } .opts.is-marked .opt--right { border-color: var(--plum); background: var(--plum-tint); } .opts.is-marked .opt--wrong { border-color: var(--rule-soft); color: var(--muted-soft); } .opts.is-marked .opt--wrong .opt__box { border-color: var(--rule-soft); background: #fff; } /* HER OWN WRONG ANSWER KEEPS ITS TICK, in grey rather than plum. The first pass cleared it, which left a screen showing the right answer and no record of what she had said, so the correction had nothing to correct. Seeing both is the entire teaching moment. */ .opts.is-marked .opt--wrong:has(input:checked) .opt__box { background: var(--muted-soft); border-color: var(--muted-soft); } .opts.is-marked .opt--wrong:has(input:checked) .opt__box svg { opacity: 1; transform: scale(1); } /* DISPLAY, NOT OPACITY, and on a 390px phone that is the difference between a one-line answer and a two-line one. At opacity 0 the tag still occupied its grid column, so every knowledge option gave up about 70px of text width to a word that was not being shown, and "Setting your body temperature" wrapped for no reason on every phone. The column collapses to nothing until there is something in it. The reflow when it appears is free, because the options lock at the same moment and she is leaving the screen. */ .opt__tag { display: none; font-size: var(--t-meta); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--plum); } .opts.is-marked .opt--right .opt__tag { display: block; } /* ============ actions ============ */ .act { display: grid; } .act__btn { display: block; width: 100%; background: var(--plum); color: #fff; border: 0; font: inherit; font-size: var(--t-caption); font-weight: 600; letter-spacing: 0.01em; padding: 1.05rem 1.2rem; text-align: center; text-decoration: none; cursor: pointer; transition: background 0.16s ease; -webkit-tap-highlight-color: transparent; /* iOS draws its own grey wash on a tapped link otherwise, and on a plum button it reads as the button having gone wrong. */ } .act__btn:hover { background: var(--plum-lift); } .act__btn[disabled] { background: rgba(8, 11, 43, 0.16); cursor: default; } .act__btn[disabled]:hover { background: rgba(8, 11, 43, 0.16); } .act__alt { display: block; text-align: center; font-size: var(--t-meta); color: var(--muted); padding: 0.95rem 0 0; text-decoration: underline; text-underline-offset: 3px; } .act__alt:hover { color: var(--plum); } /* A 44px target, not a 20px one. It was a text link with padding on one side, which on a phone is a line of type to hit with a thumb. The padding is symmetrical now and the whole strip is tappable. */ .back { background: none; border: 0; font: inherit; color: var(--muted); font-size: var(--t-meta); padding: 0.85rem 1rem; cursor: pointer; text-decoration: underline; text-underline-offset: 3px; display: block; margin: 0.2rem auto 0; min-height: 44px; -webkit-tap-highlight-color: transparent; } .back:hover { color: var(--plum); } .reassure { text-align: center; font-size: var(--t-meta); color: var(--muted); margin: 0.85rem 0 0; } /* ============ teach card ============ The screen that pays for the question. Every one of these carries a dominant visual above the prose, never prose alone. If a teach screen is ever added without one, it is not finished. */ .teach__verdict { display: flex; align-items: baseline; gap: 0.5rem; font-size: var(--t-meta); font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 0.7rem; } .teach__verdict.is-right { color: var(--plum); } .teach__head { font-size: clamp(1.5rem, 5.9vw, 1.95rem); line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 1.15rem; text-wrap: balance; } .teach__head em { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 600; color: var(--plum); letter-spacing: 0; } .teach__body { font-size: var(--t-caption); line-height: 1.6; margin: 0 0 1.4rem; } .teach__body strong { color: var(--plum); font-weight: 600; } .teach__body + .teach__body { margin-top: -0.6rem; } /* ============ figures ============ Cream ground, hairline, quiet specimen label above. Cream exhibit cards for DATA DIAGRAMS are the approved shape on this brand; the ban on boxing things applies to text, not to charts. Labels are muted ink and never an accent chip, because rust or plum uppercase eyebrows with tick marks read as AI design. */ .fig { margin: 0 0 1.4rem; padding: 1.15rem 1rem 1rem; background: var(--paper); border: 1px solid var(--rule-soft); } .fig--bleed { padding: 0; background: none; border: 0; } .fig__kicker, .fig__sub { display: block; text-align: center; font-size: 11px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted-soft); } .fig__kicker { font-weight: 600; color: var(--muted); } .fig__sub { margin-bottom: 1rem; letter-spacing: 0.08em; } .fig__img { width: 100%; height: auto; } .fig__img--crop { aspect-ratio: 4 / 3; object-fit: cover; } .fig__source { font-size: 12px; line-height: 1.45; color: var(--muted-soft); margin-top: 0.8rem; text-align: center; } /* ---- citation ---- */ .cite { display: grid; grid-template-columns: auto 1fr; gap: 0.55rem; margin-top: 0.9rem; padding-top: 0.75rem; border-top: 1px solid var(--rule-soft); font-size: 12px; line-height: 1.45; color: var(--muted-soft); text-align: left; } .cite__label { font-size: 10px; font-weight: 600; letter-spacing: 0.11em; text-transform: uppercase; color: var(--muted-soft); padding-top: 0.1em; } .cite__journal { font-style: italic; } .cite__id { display: inline-flex; align-items: baseline; gap: 0.3rem; color: var(--muted); text-decoration: underline; text-underline-offset: 2px; font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: 11px; } .cite__id-k { font-family: inherit; font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase; opacity: 0.75; } .cite__meta { display: block; margin-top: 0.2rem; } .cite__sep { display: inline-block; width: 0.9rem; } .cite__sep::before { content: '·'; } /* ============ rank chart · Winona symptoms ============ */ .rank__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; } .rank__row { display: grid; grid-template-columns: 6.6rem 1fr 2.3rem; align-items: center; gap: 0.6rem; font-size: var(--t-meta); } .rank__label { color: var(--muted); line-height: 1.2; } .rank__bar { height: 0.7rem; background: rgba(8, 11, 43, 0.07); } .rank__fill { display: block; height: 100%; background: rgba(8, 11, 43, 0.28); } .rank__pct { text-align: right; font-variant-numeric: tabular-nums; color: var(--muted); } /* The rows her own answers land on. Nothing here ranks by disruptiveness, because the source does not, and no line on this page may imply an ordering the data does not carry. */ .rank__row--hit .rank__label { color: var(--ink); font-weight: 600; } .rank__row--hit .rank__fill { background: var(--plum); } .rank__row--hit .rank__pct { color: var(--plum); font-weight: 700; } /* ============ mechanism diagram ============ Estrogen to eNOS to nitric oxide to an open vessel. Drawn rather than photographed because there is no photograph of this. WHAT IT DELIBERATELY IS NOT. No heart, no cuff, no clinical artery cross-section, no body outline, no rising trend line. 65 FR 1021 makes a heart symbol on a supplement an implied disease claim and 101.93(g)(2)(iv)(E) makes imagery an independent route to one. This draws a channel and a signal, which is mechanism narration, and mechanism narration is the thing FDA's own 2009 substantiation guidance blesses using a nitric oxide example. Keep it abstract. */ .mech__svg { width: 100%; height: auto; display: block; } /* NOT uppercase, and this is the one place on the page where that rule has a reason beyond taste. text-transform would print eNOS as ENOS, which is a different thing and the wrong name for the enzyme. 7px because the viewBox is 240 wide against a rendered column near 440, so everything in here is drawn at roughly 1.8x. */ .mech__lab { font-size: 7px; font-weight: 600; letter-spacing: 0.08em; fill: var(--muted); text-anchor: middle; } .mech__lab--on { fill: var(--plum); } .mech__wall { fill: rgba(8, 11, 43, 0.10); } .mech__lumen { fill: var(--card); } .mech__lumen--open { fill: var(--plum-tint); } .mech__mol { fill: var(--plum); } .mech__mol--soft { fill: var(--plum); opacity: 0.35; } .mech__arrow { stroke: var(--muted-soft); stroke-width: 1.2; fill: none; } .mech__tick { stroke: rgba(8, 11, 43, 0.18); stroke-width: 1; } /* ============ dose equation ============ */ .equation__row { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.6rem; } .equation__img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; } .equation__eq { font-size: 2rem; color: var(--muted); line-height: 1; } .equation__caps { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 0.7rem; font-size: 12px; line-height: 1.35; color: var(--muted); text-align: center; } .equation__caps span:last-child { color: var(--ink); font-weight: 600; } /* ============ strip figure ============ */ .strip__pair { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; } .strip__one { display: grid; justify-items: center; gap: 0.5rem; } .strip__stick { width: 1.6rem; height: 6.5rem; background: #fff; border: 1px solid var(--rule-soft); display: flex; align-items: flex-start; justify-content: center; padding-top: 0.28rem; } .strip__pad { width: 1.1rem; height: 1.1rem; display: block; } .strip__cap { font-size: 12px; color: var(--muted); text-align: center; line-height: 1.3; } .strip__gap { display: grid; justify-items: center; gap: 0.35rem; } .strip__time { font-size: 10px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); white-space: nowrap; } .strip__arrow { width: 2.6rem; height: 0.75rem; stroke: var(--muted-soft); fill: none; stroke-width: 1.2; } .strip__scale { height: 0.55rem; margin-top: 1.1rem; background: linear-gradient(90deg, #fbeff3 0%, #f7dbe4 22%, #ea9ec0 48%, #d42b76 76%, #a3155a 100%); } .strip__legend { list-style: none; margin: 0.35rem 0 0; padding: 0; display: flex; justify-content: space-between; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted-soft); } /* ============ the curve · Moreau 2012 ============ THE SAME DRAWING AS women_lp's Figure 3, on purpose. If she has met the article this chart is the thing she recognises, and the whole value of a repeat exhibit is the recognition. Coordinates are that file's, y = 132 - value * 9.6. A change to the viewBox in either file has to be made in both. */ .fmd__svg { width: 100%; height: auto; display: block; } .fmd__grid { stroke: rgba(8, 11, 43, 0.10); stroke-width: 1; } .fmd__base { stroke: rgba(8, 11, 43, 0.28); stroke-width: 1; } .fmd__area { fill: var(--plum); opacity: 0.09; } .fmd__line { fill: none; stroke: var(--plum); stroke-width: 2; stroke-linejoin: round; } .fmd__dot { fill: var(--plum); opacity: 0.55; } .fmd__ytick { font-size: 9px; fill: var(--muted-soft); text-anchor: end; } .fmd__stage { font-size: 9.5px; fill: var(--muted); text-anchor: middle; letter-spacing: 0.02em; } .fmd__val { font-size: 12px; font-weight: 700; fill: var(--ink); text-anchor: middle; } /* Her marker. The dot is stroked in the figure's own ground so it reads as cut out of the line rather than dropped on top of it. If .fig stops being --paper, this stroke changes with it. */ .fmd__youring { fill: none; stroke: var(--plum); stroke-width: 1.4; opacity: 0.4; } .fmd__you { fill: var(--plum); stroke: var(--paper); stroke-width: 2.4; } .fmd__youlab { font-size: 9px; font-weight: 700; fill: var(--plum); text-anchor: middle; letter-spacing: 0.06em; } .fmd__val--you { fill: var(--plum); font-size: 14px; } .fmd__stage--you { fill: var(--plum); font-weight: 700; } /* ============ result ============ */ .rv__kicker { display: block; font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 600; font-size: 1.1em; color: var(--muted); margin-bottom: 0.35rem; } .rv__head { font-size: clamp(1.55rem, 6.2vw, 2rem); line-height: 1.15; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 0.9rem; text-wrap: balance; } .rv__head em { font-family: 'Cormorant Garamond', Georgia, serif; font-style: italic; font-weight: 600; color: var(--plum); letter-spacing: 0; } .rv__read { font-size: var(--t-caption); line-height: 1.6; margin: 0 0 1rem; } .rv__read strong { color: var(--plum); font-weight: 600; } /* Her own answers handed back. Ruled rather than tinted, on the same reasoning as the figures. This is a record of what she told us. */ .rv__sym { border: 1px solid var(--rule); padding: 0.9rem 1rem; margin-bottom: 1.3rem; } .rv__sym p { margin: 0; font-size: var(--t-caption); line-height: 1.5; } .rv__sym ul { list-style: none; margin: 0.55rem 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 0.35rem; } .rv__sym li { font-size: var(--t-meta); font-weight: 600; background: var(--plum-tint); color: var(--plum); padding: 0.26rem 0.6rem; } /* What the course covered, as a short record rather than a recap paragraph. It exists because she is about to be asked for money and the honest reason to say yes is the four things she just learned. */ .rv__learned-t { font-size: 1.15rem; font-weight: 800; letter-spacing: -0.015em; margin: 0 0 0.9rem; } .rv__learned { list-style: none; margin: 0 0 1.4rem; padding: 0; display: grid; gap: 0.6rem; } .rv__learned li { display: grid; grid-template-columns: auto 1fr; gap: 0.6rem; align-items: start; font-size: var(--t-meta); line-height: 1.45; color: var(--muted); padding-bottom: 0.6rem; border-bottom: 1px solid var(--rule-soft); } .rv__learned li:last-child { border-bottom: 0; padding-bottom: 0; } .rv__learned svg { width: 1rem; height: 1rem; margin-top: 0.2rem; fill: none; stroke: var(--plum); stroke-width: 2; } /* NO CROP. The asset is a square product shot and a 4/3 cover crop took the top off the strip box, which is the half of the kit this whole course has been building towards. It shows whole or it does not earn its place. */ .rv__kit { width: 100%; height: auto; margin-bottom: 1.1rem; } /* ============ DSHEA ============ 21 CFR 101.93(d). This page is a surface of its own. An ad can land here and she can leave from here, so it carries its own box, and the wording is the statutory wording and not ours to paraphrase. */ .dsheabox { margin-top: 1.8rem; padding: 0.85rem 1rem; border: 1px solid var(--rule); } .dsheabox p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--muted-soft); } /* ============ the action bar ============ IT MIRRORS THE ACTIVE SCREEN'S OWN BUTTON, WHATEVER SCREEN THAT IS, and that generalisation is the single most important mobile decision on this page. The first version raised a bar on the result screen only, because that was the one screen whose button was obviously below the fold. Measured on a real 320x568 viewport, the question screens are between 680 and 840px tall, so on a small phone the Continue button is off screen on EVERY question, not just on the result. A quiz whose next step has to be hunted for is a quiz she leaves. Compacting the layout was tried first and is in the short-viewport block below. It closes some of the gap and cannot close all of it, because six answers, a question and a progress bar do not fit in 568px minus a masthead without shrinking the tap targets past the point where a 55-year-old can hit them. So the layout gets as tight as is decent and the bar covers the rest. ON A 390 OR 430 PHONE THE BAR NEVER APPEARS on a question screen, because everything fits. It is not a permanent fixture; it is the answer to a viewport being short, and it retires the moment the real button is on screen. .is-up is added by script alone and never authored into markup, so with the script deleted the page is the one it was before. */ .stickybar { position: fixed; left: 0; right: 0; bottom: 0; padding: 0.7rem max(1.15rem, env(safe-area-inset-right)) calc(0.7rem + env(safe-area-inset-bottom)) max(1.15rem, env(safe-area-inset-left)); background: rgba(255, 255, 255, 0.94); backdrop-filter: blur(8px); border-top: 1px solid var(--rule-soft); transform: translateY(105%); transition: transform 0.28s var(--ease); z-index: 20; } .stickybar.is-up { transform: none; } .stickybar__in { max-width: 34rem; margin: 0 auto; } /* [hidden] is a UA rule at (0,1,0) and loses to .act__btn's author display:block. The bar holds a button and a link and shows one, so without this it would show both. */ .stickybar__in [hidden] { display: none; } @media (prefers-reduced-motion: reduce) { .stickybar { transition: none; } } /* ============ short viewports ============ KEYED ON HEIGHT, NOT WIDTH, and that is the point of it. The problem is not a narrow phone, it is a short one. An iPhone SE at 320x568 and any phone held in landscape hit this; a 390x844 does not, and nothing below should ever fire on a modern phone in portrait. Everything here buys vertical space and nothing here shrinks a tap target below 44px. The audience is 45 to 60, and an option row that is hard to hit costs more than a screen that scrolls. Measured effect on the first question at 320x568: 838px down to about 690. Still taller than the viewport, which is what the action bar above is for. Together they mean she can always see the answers AND always reach the next step. */ @media (max-height: 700px) { .brandbar { padding: 0.55rem 1rem; } .brandbar__logo { width: min(160px, 46vw); } .stage { padding-top: 1rem; padding-bottom: 1.5rem; } #bl-q.has-bar .stage { padding-bottom: 5rem; } .prog { margin-bottom: 1rem; } .q { font-size: clamp(1.35rem, 6.2vw, 2rem); margin-bottom: 0.35rem; } .hint { margin-bottom: 0.9rem; } .opts { gap: 0.4rem; margin-bottom: 1.1rem; } /* 0.72rem top and bottom plus a 1.3 line box still measures 46px, which clears the 44px floor. Do not take it lower. */ .opt { padding: 0.72rem 0.9rem; } .act__btn { padding: 0.85rem 1rem; } .back { padding: 0.6rem 1rem; min-height: 40px; } .cover__img { max-height: 30dvh; margin-bottom: 0.9rem; } .cover__head { font-size: clamp(1.5rem, 7.4vw, 2.5rem); margin-bottom: 0.6rem; } .cover__sub { margin-bottom: 1.1rem; } .teach__head { font-size: clamp(1.3rem, 5.9vw, 1.95rem); margin-bottom: 0.9rem; } .rv__head { font-size: clamp(1.35rem, 6.2vw, 2rem); } } /* ============ wider screens ============ Desktop is a minority here and is treated as one. The column does not widen past its measure; it only gets more air around it. */ @media (min-width: 700px) { .stage { padding-top: 2.5rem; padding-bottom: 4rem; } .brandbar { padding: 1.1rem 1rem; } .cover__img { aspect-ratio: 16 / 9; } }