/* =============================================================================
Label Lens marketing site (labellensapp.com root) :: LL-F129.T04,
light-locked by LL-F130.T01
-----------------------------------------------------------------------------
HAND-WRITTEN. There is no build step, no preprocessor and no bundler: this
file is the deployed artefact. Terraform uploads the files in
infra/legal-site/ to S3 exactly as they sit on disk.
VERSIONED FILENAME (.v2.css, bumped from .v1 by LL-F130.T01). CloudFront can
cache this immutably because a content change ships under a NEW key. When you
edit this file, bump the version in the filename AND in the in
index.html. See README.md.
★ ONE SCHEME, ALWAYS: THIS SITE IS LIGHT-ONLY, ON PURPOSE (LL-F130.T01).
Until this version the file carried a second, dark set of the section-2
tokens behind a scheme-preference media query. The light palette was never
the problem - it already mirrored the app value for value - but that swap
meant a visitor whose OS is in dark mode saw a near-black page instead. THE
APP HAS NO DARK THEME AT ALL (LabelLensUI src/theme/variables.scss declares
one light :root and no scheme-preference branch in any of its stylesheets),
so a site that turns black on a dark-mode phone does not match the app on
half the devices in the world.
The swap is DELETED, not commented out, and the one-word declaration at the
top of section 2 pins the scheme so the browser cannot paint form controls,
scrollbars, autofill or the canvas dark underneath an otherwise light page.
This is a deliberate subtraction, not a missing feature: DO NOT ADD A DARK
BRANCH BACK. The full reasoning, the palette table and the two deliberate
divergences from the app live in README.md, which is not deployed and is
where this history belongs.
ZERO THIRD-PARTY REQUESTS is a load-bearing property of this site, not a
preference: the published privacy policy's recipient table omits Google
because that is true (LL-F114, re-verified LL-F127). No remote @import, no
CDN, no hosted font. Every url() below is same-origin.
============================================================================= */
/* -----------------------------------------------------------------------------
1. TYPEFACES :: self-hosted, latin subset, woff2 only
-----------------------------------------------------------------------------
Three families, three jobs, the same typesetting the Label Lens notebooks use:
Cormorant Garamond display :: headlines and the notebook plate
Lora editorial serif :: running body copy
Inter UI :: labels, buttons, footer, small caps
All four files are latin-subset builds (U+0000-00FF plus the usual punctuation
and currency ranges). Three of the four are VARIABLE fonts, so one file covers
a weight range instead of one file per weight:
cormorant-garamond-latin.v1.woff2 variable wght 300..700 37,776 B
cormorant-garamond-italic-latin.v1.woff2 static wght 400 23,660 B
lora-latin.v1.woff2 variable wght 400..700 37,792 B
inter-latin.v1.woff2 variable wght 100..900 48,432 B
The Inter descriptor is deliberately NARROWER (400..600) than the file's own
axis. Those are the only weights this stylesheet declares; narrowing costs no
bytes on a variable font and makes a future `font-weight: 800` fail loudly
instead of silently synthesising a faux bold. Same reasoning as the app's
own self-hosted face (LabelLensUI global.scss, LL-F114.T01).
font-display: swap on every face, and the fallback stacks in section 2 are
real system families, so the page is readable before any face lands.
----------------------------------------------------------------------------- */
@font-face {
font-family: 'Cormorant Garamond';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('/assets/fonts/cormorant-garamond-latin.v1.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Cormorant Garamond';
font-style: italic;
font-weight: 400;
font-display: swap;
src: url('/assets/fonts/cormorant-garamond-italic-latin.v1.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Lora';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url('/assets/fonts/lora-latin.v1.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Inter';
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url('/assets/fonts/inter-latin.v1.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
U+2212, U+2215, U+FEFF, U+FFFD;
}
/* -----------------------------------------------------------------------------
2. TOKENS
-----------------------------------------------------------------------------
The palette mirrors the app's design language (LabelLensUI
src/theme/variables.scss) without importing anything from that repo: the
blush-white ground, the near-black ink, the warm cream plate and the coral
brand accent are the same hues the app ships.
ACCENT DISCIPLINE, WITH AN ACCESSIBILITY CORRECTION. The app reserves the
coral #F5546A for CTA fills. On this site the coral is DECORATIVE ONLY and
never carries text, because it cannot: white on #F5546A measures 3.30:1 and
the primary CTA's label is normal-weight text, which needs 4.5:1. The primary
CTA is therefore an ink fill with a paper label (17.40:1) and the coral
survives as the keyline under the wordmark, the rule above each section
heading and the season markers. Measured ratios for every pair are in the
LL-F129.T04 report.
----------------------------------------------------------------------------- */
:root {
/* ★ ONE SCHEME, PINNED. See the light-only note in the file header. This also
stops the UA painting inputs, checkboxes, radios, the scrollbar, autofill
and the canvas dark for a visitor whose OS is in dark mode - the class of
defect that only ever appears in the configuration nobody checks. */
color-scheme: light;
/* -- surfaces ------------------------------------------------------------ */
--ll-ground: #FFFAF8; /* blush-white page field (app --ll-palette-blush-ground) */
--ll-paper: #FFFFFF; /* elevated / inset surface */
--ll-plate: #F7F2E9; /* warm cream, the notebook plate (app --ll-palette-cream) */
--ll-tint: #FDE0E5; /* coral wash (app --ll-palette-coral-tint) */
/* -- ink ----------------------------------------------------------------- */
--ll-ink: #1A1A1A; /* primary text (app --ll-palette-near-black) */
--ll-ink-soft: #6B6460; /* secondary text. NOT the app's #8A8A8A, which is
3.45:1 on white and fails AA. This warm grey is
5.81 / 5.61 / 5.21 / 4.69 on paper / ground /
plate / tint. */
--ll-on-ink: #FFFFFF; /* text on the ink fill */
/* -- accent (decorative, never text) ------------------------------------- */
--ll-accent: #F5546A;
/* -- lines --------------------------------------------------------------- */
--ll-rule: rgba(26, 26, 26, 0.14);
--ll-rule-faint: rgba(26, 26, 26, 0.08);
/* -- shape --------------------------------------------------------------- */
/* ONE radius system: everything square-ish editorial except the pill CTA.
Cards/plates 20px (the app's locked --ll-card-radius-v11b), interactive
pills fully rounded, nothing in between. */
--ll-radius-plate: 20px;
--ll-radius-pill: 999px;
/* -- rhythm -------------------------------------------------------------- */
--ll-gutter: clamp(1.25rem, 5vw, 4.5rem);
--ll-measure: 36rem; /* ~62ch of Lora at body size */
--ll-section-y: clamp(4.5rem, 11vw, 10rem);
--ll-tap: 44px; /* minimum touch target */
/* -- type ---------------------------------------------------------------- */
--ll-display: 'Cormorant Garamond', 'Iowan Old Style', 'Palatino Linotype',
Palatino, 'Book Antiqua', Georgia, 'Times New Roman', serif;
--ll-serif: 'Lora', Charter, 'Bitstream Charter', 'Sitka Text', Cambria,
Georgia, 'Times New Roman', serif;
--ll-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto,
'Helvetica Neue', Arial, sans-serif;
}
/* -----------------------------------------------------------------------------
3. BASE
----------------------------------------------------------------------------- */
*,
*::before,
*::after {
box-sizing: border-box;
}
html {
/* No smooth scroll by default: the in-page CTA jump is instant unless the
visitor has not asked for reduced motion (section 11). */
-webkit-text-size-adjust: 100%;
text-size-adjust: 100%;
}
body {
margin: 0;
background: var(--ll-ground);
color: var(--ll-ink);
font-family: var(--ll-serif);
font-size: clamp(1rem, 0.96rem + 0.2vw, 1.0625rem);
line-height: 1.75;
font-synthesis-weight: none;
/* 320px floor: nothing may push the document wider than the viewport. */
overflow-x: hidden;
overflow-wrap: break-word;
}
h1, h2, h3 {
font-family: var(--ll-display);
font-weight: 400;
margin: 0;
letter-spacing: -0.012em;
/* Descender clearance: Cormorant's y/g/p dip well below the baseline and a
leading of 1 clips them in the display sizes below. */
line-height: 1.06;
}
p {
margin: 0;
}
a {
color: inherit;
}
img, svg {
display: block;
max-width: 100%;
}
ul {
margin: 0;
padding: 0;
list-style: none;
}
/* [hidden] must win over the component display values below. Without this a
rule like `.btn { display: inline-flex }` silently out-specifies the UA's
`[hidden] { display: none }` and the element renders anyway. That is exactly
what happened to the inert App Store control on the first build of this
page, and it is the kind of defect that ships because the DOM says hidden
and the pixels say otherwise. */
[hidden] {
display: none !important;
}
/* -----------------------------------------------------------------------------
4. SHARED LAYOUT + TYPE UTILITIES
----------------------------------------------------------------------------- */
.wrap {
width: 100%;
max-width: 76rem;
margin-inline: auto;
padding-inline: var(--ll-gutter);
}
/* Grid and flex children default to min-width:auto, which means a track
refuses to shrink below its widest unbreakable child. That is how a single
long word or a nowrap button pushes the whole document wider than the
viewport at small sizes. Every multi-column container on this page opts out
explicitly rather than relying on the content never being long enough. */
.hero__grid > *,
.notebook__grid > *,
.steps__item > *,
.facts > *,
.footer__grid > *,
.site-header > * {
min-width: 0;
}
.measure {
max-width: var(--ll-measure);
}
/* The one small-caps label style on the site. Used sparingly: the section
keylines and the footer column heads, nowhere else. */
.eyebrow {
font-family: var(--ll-ui);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--ll-ink-soft);
margin: 0;
}
/* A section heading, preceded by a short coral keyline. The keyline is the only
place the brand accent appears at full strength, and it carries no meaning
that colour alone has to convey. */
.section-head {
margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.section-head::before {
content: '';
display: block;
inline-size: 2.75rem;
block-size: 2px;
background: var(--ll-accent);
margin-bottom: 1.5rem;
}
.section-head h2 {
font-size: clamp(2rem, 1.2rem + 3.4vw, 3.75rem);
max-width: 18ch;
}
.section-head p {
margin-top: 1.25rem;
max-width: var(--ll-measure);
color: var(--ll-ink-soft);
}
.lede {
font-size: clamp(1.0625rem, 1rem + 0.35vw, 1.25rem);
line-height: 1.65;
color: var(--ll-ink-soft);
}
/* -----------------------------------------------------------------------------
5. SKIP LINK
-----------------------------------------------------------------------------
Off-canvas until focused, then a real, visible, high-contrast control. It is
the first thing in the tab order.
----------------------------------------------------------------------------- */
.skip-link {
position: absolute;
left: 1rem;
top: 0;
z-index: 100;
transform: translateY(-150%);
display: inline-block;
padding: 0.75rem 1.25rem;
min-block-size: var(--ll-tap);
background: var(--ll-ink);
color: var(--ll-on-ink);
font-family: var(--ll-ui);
font-size: 0.9375rem;
font-weight: 600;
text-decoration: none;
border-radius: 0 0 var(--ll-radius-plate) var(--ll-radius-plate);
transition: transform 180ms ease;
}
.skip-link:focus {
transform: translateY(0);
}
/* -----------------------------------------------------------------------------
6. HEADER
-----------------------------------------------------------------------------
One line at every width, 76px tall, under the documented 80px cap. The 76
comes from the wordmark's 44px tap target plus 2x16px of block padding, so
the mark can grow to 44px without moving the bar at all - which is what
LL-F130.T03 spent: a 40px Iris fits inside the tap target that was already
there.
----------------------------------------------------------------------------- */
.site-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
padding-block: 1rem;
min-block-size: 68px;
/* iOS safe-area: harmless at 0 in a desktop browser, real on a notched phone
once the page is viewed in mobile Safari. */
padding-top: calc(1rem + env(safe-area-inset-top, 0px));
}
.wordmark {
display: inline-flex;
align-items: center;
gap: 0.625rem;
text-decoration: none;
min-block-size: var(--ll-tap);
}
/* ★ THE MARK IS SIZED ON THE RENDERED CHARACTER, NOT ON A SQUARE BOX
(LL-F130.T03). The source pose is a 1024x1024 PNG that is mostly
transparent margin - the drawn character occupies 530x622 of it - so a
32-40px *square* box would have rendered a face too small to read, which is
the defect the owner flagged before the work started. The shipped file is
therefore cropped to the character's alpha bounding box, which makes the box
and the character the same thing: at block-size 40px the label-card BODY
measures ~33.6px, over the >=28px bar.
Only the block axis is set. The inline axis follows the intrinsic ratio
declared by the img's width/height attributes (164x192 -> ~34.2px), so the
aspect ratio is known before a byte arrives and the header cannot reflow
when the image lands. 40px sits inside the wordmark's existing 44px tap
target, so the header's height does not change at any width. */
.wordmark__mark {
block-size: 40px;
inline-size: auto;
flex: none;
}
.wordmark__text {
font-family: var(--ll-display);
font-size: 1.5rem;
font-weight: 500;
letter-spacing: 0.005em;
line-height: 1.1;
}
.site-nav {
display: flex;
align-items: center;
flex-wrap: wrap;
justify-content: flex-end;
gap: 0 clamp(1rem, 3vw, 2.25rem);
font-family: var(--ll-ui);
font-size: 0.875rem;
}
.site-nav a {
display: inline-flex;
align-items: center;
min-block-size: var(--ll-tap);
color: var(--ll-ink-soft);
text-decoration: none;
border-block-end: 1px solid transparent;
transition: color 160ms ease, border-color 160ms ease;
}
.site-nav a:hover {
color: var(--ll-ink);
border-block-end-color: var(--ll-accent);
}
/* Below 480px the second nav item is the one that would wrap the bar onto a
second line. The wordmark and the notebook link are what matter there.
★ THIS RULE WAS INERT UNTIL LL-F130.T03, AND THE BAR HAD BEEN WRAPPING EVER
SINCE IT WAS WRITTEN. `.site-nav a` above is (0,1,1) and `.site-nav__
secondary` was (0,1,0), so `display: inline-flex` beat `display: none` and
the media query changed nothing. Measured on the base commit: the header
was 120px tall at 320, 360 and 375 - the nav on two lines, the wordmark
text broken across two lines - which is half as tall again as the 80px cap
this file documents. Qualifying the selector with its own parent raises it
to (0,2,0) and the rule finally does what it says. The header is now 76px
at every width from 320 up.
It is fixed HERE, in a mascot ticket, because the two are the same problem:
there were 2.7px of horizontal slack in the bar at 390px, so no mark big
enough for a readable face could fit beside a nav item the author had
already decided to hide. The fix restores the documented intent rather than
inventing a new layout. To reverse it, drop the parent qualifier - and
expect the 120px header back. */
@media (max-width: 29.99em) {
.site-nav .site-nav__secondary {
display: none;
}
}
/* -----------------------------------------------------------------------------
7. HERO :: asymmetric split, text left, printed specimen right
----------------------------------------------------------------------------- */
.hero {
padding-block: clamp(2.5rem, 6vw, 6rem) var(--ll-section-y);
}
.hero__grid {
display: grid;
gap: clamp(2.5rem, 6vw, 5rem);
align-items: start;
}
@media (min-width: 60em) {
.hero__grid {
/* The text column is the wide one. The display size below is planned
AGAINST this column width: at 1440 the column resolves to ~660px and
the headline sets on exactly two lines. A narrower column (the 1.15fr
this started as) pushed it to four. */
grid-template-columns: 1.3fr 0.9fr;
gap: clamp(3rem, 6vw, 6rem);
align-items: center;
}
}
.hero h1 {
font-size: clamp(2.5rem, 1.1rem + 5.4vw, 4.5rem);
line-height: 1.06;
max-width: 16ch;
/* The italic clause in the headline carries a descender (y, g). Reserve for
it so nothing clips at any size. */
padding-block-end: 0.08em;
}
.hero h1 em {
font-style: italic;
font-weight: 400;
}
.hero__sub {
margin-top: clamp(1.25rem, 2.5vw, 1.75rem);
max-width: 34rem;
}
.hero__actions {
margin-top: clamp(1.75rem, 3.5vw, 2.5rem);
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 0.875rem 1.25rem;
}
/* Iris waving, beside the primary call to action (LL-F130.T03). She is an
ordinary flex item in the actions row, which is what keeps her honest:
she cannot overlap the headline, the lede or the specimen card, she wraps
like anything else when the row runs out of room, and she stays beside the
App Store control for the day that control is unhidden.
Sized on the block axis only, like the wordmark mark, so the intrinsic
276x288 ratio on the tag reserves her width before the bytes land. The
clamp's floor is what keeps the CTA above the fold on a 390px phone: at
that width she is 72px, 18px taller than the 54px button, so the row grows
by 18px and the button's own top moves by half of that. Measured, not
assumed - the numbers are in the LL-F130.T03 report. */
.hero__iris {
block-size: clamp(72px, 7vw, 96px);
inline-size: auto;
flex: none;
}
/* -- the printed specimen plate ---------------------------------------------
A typeset illustration of what the product is about: an ingredient panel and
its plain-language reading. It is deliberately NOT a picture of the app, not
a phone frame and not a screenshot: no device chrome, no buttons, no status
bar. It is set like a page from a printed notebook, which is also why its
type is the display serif rather than the UI face. */
.specimen {
margin: 0; /* carries a UA margin */
background: var(--ll-paper);
border: 1px solid var(--ll-rule);
border-radius: var(--ll-radius-plate);
padding: clamp(1.5rem, 4vw, 2.25rem);
}
.specimen__panel {
font-family: var(--ll-ui);
font-size: 0.8125rem;
line-height: 1.7;
color: var(--ll-ink-soft);
padding-block-end: 1.25rem;
border-block-end: 1px solid var(--ll-rule-faint);
}
.specimen__panel b {
font-weight: 600;
color: var(--ll-ink);
}
.specimen__reading {
margin-block-start: 1.25rem;
display: grid;
gap: 1.25rem;
}
.specimen__term {
font-family: var(--ll-display);
font-size: clamp(1.5rem, 1.1rem + 1.4vw, 1.875rem);
line-height: 1.15;
}
.specimen__gloss {
margin-block-start: 0.25rem;
font-size: 0.9375rem;
line-height: 1.6;
color: var(--ll-ink-soft);
}
.specimen__note {
margin-block-start: 1.75rem;
font-family: var(--ll-ui);
font-size: 0.75rem;
letter-spacing: 0.04em;
color: var(--ll-ink-soft);
}
/* -----------------------------------------------------------------------------
8. BUTTONS
-----------------------------------------------------------------------------
Two treatments, one shape system. The filled control is the ink, not the
coral, for the contrast reason recorded in section 2.
----------------------------------------------------------------------------- */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
min-block-size: 54px;
max-inline-size: 100%;
padding: 0 clamp(1.25rem, 5vw, 1.75rem);
border-radius: var(--ll-radius-pill);
font-family: var(--ll-ui);
font-size: 0.9375rem;
font-weight: 600;
letter-spacing: 0.01em;
text-decoration: none;
white-space: nowrap; /* a CTA label never wraps */
border: 1px solid transparent;
transition: transform 140ms ease, background-color 160ms ease,
border-color 160ms ease, color 160ms ease;
}
.btn--primary {
background: var(--ll-ink);
color: var(--ll-on-ink);
}
.btn--primary:hover {
background: var(--ll-ink);
transform: translateY(-1px);
}
.btn--primary:active {
transform: translateY(1px);
}
.btn--secondary {
background: transparent;
color: var(--ll-ink);
border-color: var(--ll-rule);
}
.btn--secondary:hover {
border-color: var(--ll-ink);
}
.btn--secondary:active {
transform: translateY(1px);
}
/* -----------------------------------------------------------------------------
9. HOW A SCAN WORKS :: three beats as an editorial sequence
-----------------------------------------------------------------------------
Deliberately NOT three equal cards. Each beat is a full-width row with a
display verb in a narrow column and the sentence in a wide one, separated by
hairlines, the way a printed contents page sets a list.
----------------------------------------------------------------------------- */
.steps {
background: var(--ll-paper);
border-block: 1px solid var(--ll-rule-faint);
padding-block: var(--ll-section-y);
}
.steps__list {
display: grid;
}
.steps__item {
display: grid;
gap: 0.5rem clamp(1.5rem, 5vw, 4rem);
padding-block: clamp(1.75rem, 4vw, 2.75rem);
border-block-start: 1px solid var(--ll-rule-faint);
}
.steps__item:first-child {
border-block-start: 0;
padding-block-start: 0;
}
@media (min-width: 48em) {
.steps__item {
grid-template-columns: minmax(8rem, 0.28fr) 1fr;
align-items: baseline;
}
}
.steps__verb {
font-family: var(--ll-display);
font-size: clamp(1.75rem, 1.2rem + 2.2vw, 2.75rem);
line-height: 1.1;
padding-block-end: 0.06em; /* descender clearance */
}
.steps__body {
max-width: var(--ll-measure);
color: var(--ll-ink-soft);
}
/* -----------------------------------------------------------------------------
10. THE NOTEBOOK :: the lead magnet plate and the T05 funnel mount
----------------------------------------------------------------------------- */
.notebook {
padding-block: var(--ll-section-y);
}
.notebook__plate {
background: var(--ll-plate);
border-radius: var(--ll-radius-plate);
padding: clamp(2rem, 6vw, 5rem) clamp(1.5rem, 6vw, 5rem);
}
.notebook__grid {
display: grid;
gap: clamp(2.5rem, 6vw, 4.5rem);
}
@media (min-width: 60em) {
.notebook__grid {
grid-template-columns: 0.9fr 1.1fr;
align-items: start;
}
}
/* The cover is typeset, not photographed. It is an object on the page, with a
real aspect ratio reserved so nothing shifts as the fonts land. */
.cover {
aspect-ratio: 3 / 4;
max-inline-size: 22rem;
inline-size: 100%;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: clamp(1.5rem, 4vw, 2.5rem);
background: var(--ll-paper);
border: 1px solid var(--ll-rule);
border-radius: 4px;
/* The one spine detail: a coral rule down the binding edge. */
border-inline-start: 6px solid var(--ll-accent);
}
.cover__kicker {
font-family: var(--ll-ui);
font-size: 0.6875rem;
font-weight: 600;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--ll-ink-soft);
/* 0.18em tracking makes this short line surprisingly wide; let it wrap
rather than set the minimum width of the whole plate. */
overflow-wrap: anywhere;
}
.cover__title {
font-family: var(--ll-display);
font-size: clamp(2rem, 1.3rem + 3vw, 3rem);
line-height: 1.08;
padding-block-end: 0.06em;
}
.cover__imprint {
font-family: var(--ll-ui);
font-size: 0.75rem;
color: var(--ll-ink-soft);
}
.notebook__question {
font-family: var(--ll-display);
font-style: italic;
font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.25rem);
line-height: 1.25;
padding-block-end: 0.08em; /* descender clearance for the italic y and g */
margin-block-start: 2.5rem;
max-width: 24ch;
}
/* The four seasons, teased. Non-interactive on this page by design: T04 ships
no form. T05 turns the question into a real radio group inside the mount
below. */
.seasons {
margin-block-start: 1.5rem;
display: flex;
flex-wrap: wrap;
gap: 0.625rem;
}
.seasons li {
font-family: var(--ll-ui);
font-size: 0.8125rem;
font-weight: 600;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ll-ink);
background: var(--ll-tint);
border-radius: var(--ll-radius-pill);
padding: 0.5rem 1.125rem;
}
.notebook__mount {
margin-block-start: clamp(2rem, 4vw, 3rem);
}
/* -----------------------------------------------------------------------------
11. PLAINLY :: the credibility section
-----------------------------------------------------------------------------
Four verifiable statements about the product. A two-column prose grid at
desktop, not cards, not a bulleted list.
----------------------------------------------------------------------------- */
.plainly {
background: var(--ll-paper);
border-block-start: 1px solid var(--ll-rule-faint);
padding-block: var(--ll-section-y);
}
.facts {
display: grid;
gap: clamp(2rem, 4vw, 3rem) clamp(2rem, 6vw, 5rem);
}
@media (min-width: 48em) {
.facts {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
.facts h3 {
font-size: clamp(1.375rem, 1.1rem + 1.1vw, 1.75rem);
line-height: 1.2;
padding-block-end: 0.06em;
}
.facts p {
margin-block-start: 0.625rem;
color: var(--ll-ink-soft);
}
.facts a {
color: var(--ll-ink);
text-decoration: underline;
text-underline-offset: 0.18em;
text-decoration-thickness: 1px;
}
/* -----------------------------------------------------------------------------
12. FOOTER :: the colophon, and the index of the three legal pages
-----------------------------------------------------------------------------
★ The three legal links below are the ONLY navigation index of those pages
now that the old legal-link root is gone. They use the .html URLs, and they
may not be removed. See README.md and index.html.
----------------------------------------------------------------------------- */
.site-footer {
padding-block: clamp(3rem, 7vw, 5rem);
padding-bottom: calc(clamp(3rem, 7vw, 5rem) + env(safe-area-inset-bottom, 0px));
border-block-start: 1px solid var(--ll-rule);
}
.footer__grid {
display: grid;
gap: clamp(2rem, 5vw, 4rem);
}
@media (min-width: 48em) {
.footer__grid {
grid-template-columns: 1.2fr 0.9fr 0.9fr;
}
}
.footer__links li + li {
margin-block-start: 0.25rem;
}
.footer__grid a {
display: inline-flex;
align-items: center;
min-block-size: var(--ll-tap);
font-family: var(--ll-ui);
font-size: 0.9375rem;
color: var(--ll-ink);
text-decoration: underline;
text-underline-offset: 0.18em;
text-decoration-thickness: 1px;
/* The support address is a 34-character unbreakable token. WCAG's reflow
bar is 320 CSS px and the page clears that without this, but a visitor at
400% zoom on a small phone goes below 320 and the address is the one
thing on the page that cannot wrap. Let it break rather than push the
document wider than the viewport. */
overflow-wrap: anywhere;
}
.footer__blurb {
margin-block-start: 1rem;
font-size: 0.9375rem;
color: var(--ll-ink-soft);
max-width: 28rem;
}
.footer__legal {
margin-block-start: clamp(2.5rem, 5vw, 3.5rem);
padding-block-start: 1.75rem;
border-block-start: 1px solid var(--ll-rule-faint);
display: grid;
gap: 1rem;
}
/* The not-medical-advice line. Body-size, full AA contrast, never a footnote
in grey 11px. */
.disclaimer {
font-size: 0.9375rem;
line-height: 1.65;
color: var(--ll-ink-soft);
max-width: 48rem;
}
.disclaimer a {
color: var(--ll-ink);
text-decoration: underline;
text-underline-offset: 0.18em;
}
.copyright {
font-family: var(--ll-ui);
font-size: 0.8125rem;
color: var(--ll-ink-soft);
}
/* -----------------------------------------------------------------------------
13. FOCUS
-----------------------------------------------------------------------------
One visible ring for every interactive element. `outline: none` appears
nowhere in this file.
----------------------------------------------------------------------------- */
:focus-visible {
outline: 2px solid var(--ll-ink);
outline-offset: 3px;
border-radius: 2px;
}
.btn:focus-visible {
outline-offset: 4px;
}
/* Safari and Firefox still paint the default ring for :focus on mouse clicks
in a few cases; this keeps the ring consistent rather than removing it. */
:focus:not(:focus-visible) {
outline-color: transparent;
}
/* -----------------------------------------------------------------------------
14. MOTION
-----------------------------------------------------------------------------
The page has exactly three transitions and no animations, no parallax, no
autoplay and no scroll effects:
1. .skip-link transform (slides into view on focus)
2. .site-nav a color + border-color (hover)
3. .btn transform + colour (hover / active)
Under prefers-reduced-motion they all collapse to an instant state change.
The skip link still appears on focus; it just does not slide.
----------------------------------------------------------------------------- */
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.001ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.001ms !important;
scroll-behavior: auto !important;
}
}