/* ========================================================================== Mornio — niche landing system (/for/, /problems/) ========================================================================== Loaded ONLY on those pages so the other ~100 don't pay for it. /for/ pages are persona-led and sell; /problems/ pages are failure-led and mostly give free advice, so they mix these components with the guide styles in styles.css (.answer-box, .disclosure). The idea: an illustrated editorial story, not a feature grid. The visitor should recognise their own morning before they read a single benefit. LIGHT ONLY. These pages opt out of the site's dark theme entirely, because the illustrations are warm watercolour art on transparent backgrounds and would sit badly on a dark panel. `` plus the guard in main.js is what actually enforces it; the tokens below just assume it. The story arc used to be carried by darkness resolving into daylight. On a light page it is carried by three other things instead: the clock readout (4:45 amber, 6:12 alert red, 5:03 amber again), the paper/sand background alternation, and the illustrations themselves. Colour discipline: the artwork already carries yellow, tan and soft blue, so the page chrome stays near-monochrome and spends its accent budget only on things that mean something — the clock, the wake-up path, the CTA. ========================================================================== */ .nl { --nl-paper: #FBFAF6; /* default section background */ --nl-sand: #F4F1E9; /* alternating section background */ --nl-cream: #FDF8EE; /* warm, for the hero and the closing beat */ --nl-ink: #1B2230; --nl-muted: #525B6E; --nl-line: #E8E3D7; --nl-line-2: #D8D2C3; /* Deepened from the artwork's yellow so display type actually passes contrast on cream. The bright #F2A65A is fine as a fill, not as text. */ --nl-amber: #F2A65A; --nl-amber-ink: #A85F1C; --nl-alert-ink: #C1442A; --nl-brand: #33518F; --nl-brand-soft: #EAEFF9; --nl-good: #2E7D5B; --nl-good-soft: #E4F1EA; --nl-measure: 34ch; color: var(--nl-ink); } /* -------------------------------------------------------------------------- Illustration slots -------------------------------------------------------------------------- */ .nl-art { display: block; width: 100%; height: auto; } /* Every illustration is transparent PNG-turned-WebP, so it sits directly on the section background with no card or border around it. */ .nl-figure { margin: 0; } .nl-figure img { display: block; width: 100%; height: auto; } /* Diagrams that stayed as inline SVG (the floor plan). Scoped rather than a blanket `.nl svg`, which would also stretch the App Store badge glyph and the scroll arrow to full column width. */ .nl-diagram > svg { display: block; width: 100%; height: auto; } .nl svg text { font-family: var(--font); font-variant-numeric: tabular-nums; } /* Grid items default to `min-width: auto`, and both images and inline SVG contribute their intrinsic width as min-content. Without this, single-column (mobile) tracks inherit the asset's full width and the page scrolls sideways. The multi-column tracks below already say minmax(0, ...). */ .nl-hero-grid > *, .nl-scene > *, .nl-floorplan-grid > *, .nl-close-grid > *, .nl-moments > *, .nl-jobs-grid > *, .nl-paths > *, .nl-days > *, .nl-plan-grid > *, .nl-related-grid > * { min-width: 0; } /* -------------------------------------------------------------------------- Type scale. Deliberately larger and tighter than the guide pages. -------------------------------------------------------------------------- */ .nl-display { font-size: clamp(1.9rem, 3.6vw, 2.9rem); line-height: 1.04; letter-spacing: -0.033em; font-weight: 700; margin: 0; text-wrap: balance; color: var(--nl-ink); } .nl-h2 { font-size: clamp(1.7rem, 4vw, 2.7rem); line-height: 1.08; letter-spacing: -0.028em; font-weight: 700; margin: 0; text-wrap: balance; color: var(--nl-ink); } .nl-h3 { font-size: clamp(1.15rem, 2.2vw, 1.45rem); line-height: 1.2; letter-spacing: -0.015em; font-weight: 650; margin: 0; } .nl-lede { font-size: clamp(1.02rem, 1.7vw, 1.2rem); line-height: 1.6; color: var(--nl-muted); max-width: 46ch; } .nl-kicker { font-size: .76rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--nl-muted); margin: 0 0 var(--sp-3); } /* Headings carry margin:0 so the scale stays predictable, which means the first thing after one has to supply its own breathing room. */ .nl-h2 + .nl-lede, .nl-h2 + p, .nl-display + p { margin-top: var(--sp-5); } /* The clock readout recurs through every scene, so it becomes the spine of the story: 4:45 -> 6:12 -> 5:03. Qualified with `.nl` deliberately. The clock is a

, so the bare `.nl-clock` (one class) loses to `.nl-scene__copy p` and `.nl-close p` (one class + one element) and silently renders at body size. */ .nl .nl-clock { font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; font-weight: 700; letter-spacing: -0.02em; line-height: 1; font-size: clamp(2.6rem, 8vw, 5rem); margin: 0; color: var(--nl-amber-ink); } .nl .nl-clock.is-late { color: var(--nl-alert-ink); } .nl-clock .ampm { font-size: .3em; letter-spacing: .12em; margin-left: .35em; vertical-align: .55em; font-weight: 650; } /* ========================================================================== 1. Hero ========================================================================== */ .nl-hero { position: relative; overflow: hidden; background: var(--nl-cream); border-bottom: 1px solid var(--nl-line); padding: clamp(2rem, 5vw, 3.5rem) 0 clamp(2.5rem, 5vw, 4rem); } /* One warm light source behind the artwork, like a lamp just out of frame. */ .nl-hero::before { content: ""; position: absolute; inset: -30% -10% auto 40%; height: 130%; background: radial-gradient(closest-side, rgba(242,166,90,.30), transparent 70%); pointer-events: none; } .nl-hero > .container { position: relative; } .nl-hero-grid { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; grid-template-columns: 1fr; } @media (min-width: 900px) { .nl-hero-grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); } } .nl-hero .nl-kicker { color: var(--nl-amber-ink); } .nl-hero-sub { margin: var(--sp-5) 0 0; font-size: clamp(1rem, 1.6vw, 1.14rem); line-height: 1.62; color: var(--nl-muted); max-width: 48ch; } .nl-hero-sub strong { color: var(--nl-ink); font-weight: 650; } .nl-hero-cta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-4); margin-top: var(--sp-6); } .nl-hero-meta { margin: var(--sp-4) 0 0; font-size: .88rem; color: var(--nl-muted); display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .nl-hero-meta .sep { opacity: .45; } .nl-scroll-hint { display: inline-flex; align-items: center; gap: .5rem; margin-top: var(--sp-6); color: var(--nl-muted); font-size: .9rem; text-decoration: none; border-bottom: 1px solid transparent; } .nl-scroll-hint:hover { color: var(--nl-ink); border-bottom-color: var(--nl-line-2); } .nl-scroll-hint svg { width: 16px; height: 16px; } /* Stacked hero: centred copy with the artwork full width beneath, for pages whose hero image is a wide cutaway rather than a portrait scene. A 3.26 aspect drawing squeezed into a half-width hero column is unreadable. */ .nl-hero--stacked .nl-hero-grid { grid-template-columns: minmax(0, 1fr); } @media (min-width: 900px) { .nl-hero--stacked .nl-hero-grid { grid-template-columns: minmax(0, 1fr); } } .nl-hero--stacked .nl-hero-copy { max-width: 42ch; margin-inline: auto; text-align: center; } .nl-hero--stacked .nl-hero-sub { margin-inline: auto; } .nl-hero--stacked .nl-hero-cta, .nl-hero--stacked .nl-hero-meta { justify-content: center; } .nl-hero--stacked .nl-figure { margin-top: clamp(1.5rem, 4vw, 2.5rem); } /* -------------------------------------------------------------------------- Placement cards. Generated art arrives at whatever aspect it arrives at: this set came back at 0.66, 0.82 and 1.30, which in a plain 3-up grid looks like a mistake. A fixed-ratio plate with the image contained inside normalises them without cropping anything. -------------------------------------------------------------------------- */ .nl-places { display: grid; gap: var(--sp-5); grid-template-columns: 1fr; margin-top: clamp(2rem, 4vw, 3rem); } @media (min-width: 700px) { .nl-places { grid-template-columns: repeat(3, 1fr); } } /* Four-up variant. Every generated set so far has come back with mismatched aspects, so anything in a card row wants the fixed plate, not just the placement images it was written for. */ @media (min-width: 700px) { .nl-places--4 { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1040px) { .nl-places--4 { grid-template-columns: repeat(4, 1fr); } } .nl-places > * { min-width: 0; } .nl-place { border: 1px solid var(--nl-line); border-radius: var(--radius); background: #fff; overflow: hidden; display: flex; flex-direction: column; } /* A fixed height, not aspect-ratio: aspect-ratio only sets a preferred size, so a portrait image taller than the ratio grows the box and the plates stop matching. A definite height makes all three identical and lines the captions up regardless of what shape the art arrives in. */ .nl-place__art { background: var(--nl-sand); border-bottom: 1px solid var(--nl-line); height: 230px; display: grid; place-items: center; padding: 16px; } /* Absolute max-height, not 100%. A percentage here does not resolve against the fixed plate in a centred grid area, so the taller portrait images overflowed and got clipped instead of scaling down. 230 minus the padding. */ .nl-place__art img { max-width: 100%; max-height: 198px; width: auto; height: auto; display: block; } .nl-place__body { padding: var(--sp-5); } .nl-place h3 { margin: 0 0 var(--sp-2); font-size: 1.05rem; letter-spacing: -.012em; } .nl-place p { margin: 0; color: var(--nl-muted); font-size: .95rem; line-height: 1.55; } /* ========================================================================== 2. Story scenes ========================================================================== */ .nl-story { background: var(--nl-paper); } .nl-scene { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; grid-template-columns: 1fr; padding: clamp(2.5rem, 6vw, 4.5rem) 0; border-top: 1px solid var(--nl-line); } .nl-story .nl-scene:first-child { border-top: 0; } @media (min-width: 860px) { .nl-scene { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); } /* Alternate the art side so the eye zig-zags down the page. */ .nl-scene--flip .nl-scene__art { order: -1; } /* One scene per page may go full width, for artwork whose meaning depends on having room: the snooze loop's four repeats are illegible squeezed into a half column. Breaking the zig-zag once reads as emphasis; doing it twice would just read as a broken layout. */ .nl-scene--wide { grid-template-columns: minmax(0, 1fr); } } .nl-scene--wide .nl-scene__copy { max-width: 48ch; margin-inline: auto; text-align: center; } .nl-scene--wide .nl-scene__copy p { margin-inline: auto; } .nl-scene__copy p { color: var(--nl-muted); font-size: clamp(1rem, 1.5vw, 1.1rem); line-height: 1.62; max-width: var(--nl-measure); } .nl-scene__copy p:last-child { margin-bottom: 0; } .nl-scene__copy .nl-clock { margin-bottom: var(--sp-4); } .nl-scene__copy .nl-h2 { margin-bottom: var(--sp-4); } /* -------------------------------------------------------------------------- Before/after pair. Two panels of the same scene minutes apart, side by side so the reader compares rather than remembers. Used inside article bodies as well as landing pages, so it carries its own light plate: these are warm transparent illustrations and they need a light surface under them even where the surrounding page is not one. -------------------------------------------------------------------------- */ .nl-pair { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; margin: var(--sp-6) 0; } @media (min-width: 620px) { .nl-pair { grid-template-columns: 1fr 1fr; } } /* Column layout with the caption pushed to the bottom, so two illustrations of slightly different height still produce cards that match and captions that line up. Generated art is never dimensionally identical. */ .nl-pair > figure { margin: 0; min-width: 0; display: flex; flex-direction: column; background: var(--nl-sand); border: 1px solid var(--nl-line); border-radius: var(--radius); overflow: hidden; } .nl-pair img { display: block; width: 100%; height: auto; } .nl-pair figcaption { margin-top: auto; padding: var(--sp-3) var(--sp-4) var(--sp-4); background: #fff; border-top: 1px solid var(--nl-line); } .nl-pair figcaption b { display: block; font-variant-numeric: tabular-nums; font-size: 1.35rem; font-weight: 700; letter-spacing: -.02em; color: var(--nl-amber-ink); margin-bottom: .15rem; } .nl-pair figcaption.is-late b { color: var(--nl-alert-ink); } .nl-pair figcaption span { font-size: .94rem; line-height: 1.5; color: var(--nl-muted); } /* A run of times, for pages whose story is a sequence rather than a moment (the snooze loop). Live text, never drawn into the artwork, so it stays selectable and legible at any zoom. The last one is the one that hurts. */ .nl-times { list-style: none; margin: var(--sp-5) 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; justify-content: center; } .nl-times li { font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.05rem; letter-spacing: -.01em; padding: .35rem .7rem; border-radius: 999px; background: var(--nl-sand); color: var(--nl-muted); } .nl-times .arrow { background: none; padding: 0 .05rem; color: var(--nl-line-2); font-weight: 400; } .nl-times li.is-end { background: #F8E3DE; color: var(--nl-alert-ink); } /* A stack of fragments, one per line, for the rushed-morning beat where full sentences would slow the rhythm down. */ .nl-beats { list-style: none; margin: var(--sp-5) 0 0; padding: 0; } .nl-beats li { position: relative; padding-left: 1.4rem; margin-bottom: .55rem; color: var(--nl-muted); font-size: 1.02rem; } .nl-beats li::before { content: ""; position: absolute; left: 0; top: .62em; width: 9px; height: 2px; border-radius: 2px; background: var(--nl-amber); } /* ========================================================================== 3. The insight band + the two paths ========================================================================== */ .nl-band { background: var(--nl-sand); border-block: 1px solid var(--nl-line); padding: clamp(3rem, 7vw, 5rem) 0; text-align: center; } .nl-band .nl-h2 { margin-inline: auto; max-width: 20ch; } .nl-band-sub { margin: var(--sp-5) auto 0; max-width: 44ch; color: var(--nl-muted); font-size: clamp(1rem, 1.6vw, 1.14rem); line-height: 1.6; } .nl-band em { font-style: normal; font-weight: 650; color: var(--nl-ink); background: linear-gradient(transparent 62%, rgba(242,166,90,.45) 62%); } .nl-paths { display: grid; gap: var(--sp-4); margin-top: clamp(2rem, 4vw, 3rem); text-align: left; } @media (min-width: 760px) { .nl-paths { grid-template-columns: 1fr 1fr; gap: var(--sp-5); } } .nl-path { border: 1px solid var(--nl-line-2); border-radius: var(--radius); padding: var(--sp-5); background: #fff; } .nl-path h3 { font-size: .76rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; margin: 0 0 var(--sp-4); color: var(--nl-muted); } .nl-path--mornio { border-color: color-mix(in srgb, var(--nl-brand) 34%, var(--nl-line-2)); } .nl-path--mornio h3 { color: var(--nl-brand); } .nl-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; } .nl-steps li { font-size: .8rem; font-weight: 650; letter-spacing: .05em; text-transform: uppercase; padding: .42rem .7rem; border-radius: 999px; background: var(--nl-sand); color: var(--nl-muted); white-space: nowrap; } .nl-steps .arrow { background: none; padding: 0 .1rem; color: var(--nl-line-2); } .nl-path--ordinary .nl-steps li.is-end { background: #F8E3DE; color: #A33A24; } .nl-path--mornio .nl-steps li:not(.arrow) { background: var(--nl-brand-soft); color: #25406F; } .nl-path--mornio .nl-steps .arrow { color: #9BB0D8; } .nl-path p { margin: var(--sp-4) 0 0; font-size: .95rem; line-height: 1.55; color: var(--nl-muted); } /* ========================================================================== 4. Product reveal ========================================================================== */ .nl-reveal { padding: clamp(3rem, 7vw, 5rem) 0; background: var(--nl-paper); } .nl-moments { display: grid; gap: var(--sp-5); margin-top: clamp(2rem, 4vw, 3rem); grid-template-columns: 1fr; } @media (min-width: 800px) { .nl-moments { grid-template-columns: repeat(3, 1fr); } } .nl-moment { background: #fff; border: 1px solid var(--nl-line); border-radius: var(--radius); overflow: hidden; display: flex; flex-direction: column; } /* The supplied artwork has uneven aspect ratios (0.93, 0.95 and 1.42 across the three steps). Left alone, each card's art box is a different height and the body copy starts at a different baseline. Fix the box and let the drawing centre inside it. */ .nl-moment__art { background: var(--nl-sand); border-bottom: 1px solid var(--nl-line); aspect-ratio: 4 / 3; overflow: hidden; } /* The padding sits on the image, not the box. An intrinsically-sized image would otherwise force the box taller than its aspect ratio and the three cards' body copy would start at three different baselines. A percentage height contributes nothing to min-content, so the ratio wins. */ .nl-moment__art img { display: block; width: 100%; height: 100%; object-fit: contain; padding: var(--sp-4) var(--sp-5); box-sizing: border-box; } .nl-moment__body { padding: var(--sp-5); } .nl-moment__n { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 999px; background: var(--nl-brand); color: #fff; font-size: .8rem; font-weight: 700; margin-bottom: var(--sp-3); } .nl-moment h3 { margin: 0 0 var(--sp-2); font-size: 1.12rem; letter-spacing: -.012em; } .nl-moment p { margin: 0; color: var(--nl-muted); font-size: .97rem; line-height: 1.6; } .nl-aside { margin: clamp(2rem, 4vw, 3rem) auto 0; max-width: 54ch; text-align: center; font-size: clamp(1.05rem, 2vw, 1.28rem); line-height: 1.5; letter-spacing: -.012em; color: var(--nl-ink); } /* ========================================================================== 5. Floor plan ========================================================================== */ .nl-floorplan { background: var(--nl-sand); border-block: 1px solid var(--nl-line); padding: clamp(3rem, 7vw, 5rem) 0; } .nl-floorplan-grid { display: grid; gap: clamp(1.75rem, 4vw, 3rem); align-items: center; grid-template-columns: 1fr; } @media (min-width: 900px) { .nl-floorplan-grid { grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); } } .nl-spots { list-style: none; margin: var(--sp-5) 0 0; padding: 0; } .nl-spots li { display: flex; gap: var(--sp-3); align-items: flex-start; padding: var(--sp-3) 0; border-bottom: 1px solid var(--nl-line-2); } .nl-spots li:last-child { border-bottom: 0; } .nl-spots .mark { flex: 0 0 auto; width: 22px; height: 22px; border-radius: 999px; display: grid; place-items: center; font-size: .72rem; font-weight: 800; margin-top: .1rem; } .nl-spots .mark--yes { background: var(--nl-good-soft); color: var(--nl-good); } .nl-spots .mark--no { background: #F8E3DE; color: #A33A24; } .nl-spots b { display: block; font-size: 1rem; letter-spacing: -.01em; } .nl-spots span { color: var(--nl-muted); font-size: .94rem; line-height: 1.5; } /* ========================================================================== 6. Job vignettes ========================================================================== */ .nl-jobs { padding: clamp(3rem, 7vw, 5rem) 0; background: var(--nl-paper); } .nl-jobs-grid { display: grid; gap: var(--sp-5); margin-top: clamp(2rem, 4vw, 3rem); grid-template-columns: 1fr; } @media (min-width: 700px) { .nl-jobs-grid { grid-template-columns: 1fr 1fr; } } @media (min-width: 1040px) { .nl-jobs-grid { grid-template-columns: repeat(4, 1fr); } } .nl-job { border: 1px solid var(--nl-line); border-radius: var(--radius); overflow: hidden; background: #fff; display: flex; flex-direction: column; } .nl-job__art { background: var(--nl-sand); border-bottom: 1px solid var(--nl-line); aspect-ratio: 4 / 3; overflow: hidden; } .nl-job__art img { display: block; width: 100%; height: 100%; object-fit: contain; padding: var(--sp-4); box-sizing: border-box; } .nl-job__body { padding: var(--sp-4) var(--sp-5) var(--sp-5); } .nl-job__time { font-variant-numeric: tabular-nums; font-size: 1.5rem; font-weight: 700; letter-spacing: -.02em; color: var(--nl-brand); display: block; margin-bottom: var(--sp-2); } .nl-job h3 { margin: 0 0 var(--sp-2); font-size: 1.02rem; } .nl-job p { margin: 0; color: var(--nl-muted); font-size: .94rem; line-height: 1.55; } /* -------------------------------------------------------------------------- Failure-mode cards (heavy sleepers). Same grid as the job vignettes, but each card ends with an explicit verdict on whether Mornio actually helps. Three of the four answers are qualified, which is the whole point of the section: a page that claims to fix every failure fixes none of them credibly. -------------------------------------------------------------------------- */ .nl-job__tell { margin: 0 0 var(--sp-3); font-size: .94rem; line-height: 1.55; color: var(--nl-muted); } .nl-job__tell b { color: var(--nl-ink); font-weight: 650; } /* The job cards set `p { margin: 0 }` because the shift vignettes hold one paragraph each. These cards hold several, so they need their own gap. */ .nl-job__body p + p { margin-top: var(--sp-3); } .nl-verdict { margin: var(--sp-4) 0 0; padding-top: var(--sp-3); border-top: 1px solid var(--nl-line); font-size: .89rem; line-height: 1.5; font-weight: 600; display: flex; gap: .5rem; align-items: flex-start; } .nl-verdict::before { content: ""; flex: 0 0 auto; width: 9px; height: 9px; border-radius: 999px; margin-top: .42em; } .nl-verdict--yes { color: var(--nl-good); } .nl-verdict--yes::before { background: var(--nl-good); } .nl-verdict--partly { color: var(--nl-amber-ink); } .nl-verdict--partly::before { background: var(--nl-amber); } .nl-verdict--no { color: var(--nl-muted); } .nl-verdict--no::before { background: var(--nl-line-2); } /* ========================================================================== 7. Three mornings ========================================================================== */ .nl-days-wrap { background: var(--nl-sand); border-block: 1px solid var(--nl-line); padding: clamp(3rem, 7vw, 5rem) 0; } .nl-days { display: grid; gap: var(--sp-4); margin-top: clamp(2rem, 4vw, 3rem); grid-template-columns: 1fr; } @media (min-width: 780px) { .nl-days { grid-template-columns: repeat(3, 1fr); } } .nl-day { background: #fff; border: 1px solid var(--nl-line); border-radius: var(--radius); padding: var(--sp-5); } .nl-day__label { font-size: .74rem; letter-spacing: .16em; text-transform: uppercase; font-weight: 700; color: var(--nl-brand); margin: 0 0 var(--sp-3); } .nl-day h3 { margin: 0 0 var(--sp-2); font-size: 1.08rem; letter-spacing: -.012em; } .nl-day p { margin: 0; color: var(--nl-muted); font-size: .95rem; line-height: 1.55; } /* ========================================================================== 8. Plans ========================================================================== */ .nl-plans { padding: clamp(3rem, 7vw, 5rem) 0; background: var(--nl-paper); } .nl-plan-grid { display: grid; gap: var(--sp-4); margin-top: clamp(2rem, 4vw, 3rem); grid-template-columns: 1fr; } @media (min-width: 760px) { .nl-plan-grid { grid-template-columns: 1fr 1fr; gap: var(--sp-5); } } .nl-plan-card { border: 1px solid var(--nl-line); border-radius: var(--radius); background: #fff; padding: var(--sp-5); display: flex; flex-direction: column; } .nl-plan-card--pro { border-color: color-mix(in srgb, var(--nl-brand) 42%, var(--nl-line)); background: var(--nl-brand-soft); } .nl-plan-card h3 { margin: 0 0 var(--sp-2); font-size: 1.15rem; } .nl-plan-card .price { font-size: 1rem; color: var(--nl-muted); margin: 0 0 var(--sp-4); } .nl-plan-card ul { list-style: none; margin: 0 0 var(--sp-5); padding: 0; } .nl-plan-card li { padding-left: 1.5rem; position: relative; margin-bottom: .55rem; font-size: .97rem; line-height: 1.5; } .nl-plan-card li::before { content: ""; position: absolute; left: .15rem; top: .48em; width: 7px; height: 7px; border-radius: 999px; background: var(--nl-brand); } .nl-plan-card .plan-foot { margin: auto 0 0; font-size: .88rem; color: var(--nl-muted); } /* ========================================================================== 9. Closing CTA — the sunrise beat ========================================================================== */ .nl-close { position: relative; overflow: hidden; background: var(--nl-cream); border-block: 1px solid var(--nl-line); padding: clamp(3rem, 7vw, 5rem) 0; } .nl-close::before { content: ""; position: absolute; inset: -40% 45% auto -15%; height: 130%; background: radial-gradient(closest-side, rgba(242,166,90,.34), transparent 70%); pointer-events: none; } .nl-close > .container { position: relative; } .nl-close-grid { display: grid; gap: clamp(1.5rem, 4vw, 3.5rem); align-items: center; grid-template-columns: 1fr; } @media (min-width: 900px) { .nl-close-grid { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); } .nl-close-grid .nl-close__art { order: -1; } } /* Closing artwork varies in aspect: some sets trim to landscape, some to portrait. Cap the height so a tall one does not stretch the section, while `max-width` still governs the wide ones. */ .nl-close__art img { width: auto; max-width: 100%; max-height: 540px; margin-inline: auto; } .nl-close .nl-clock { margin-bottom: var(--sp-4); } .nl-close p { color: var(--nl-muted); font-size: clamp(1rem, 1.6vw, 1.12rem); line-height: 1.62; max-width: 44ch; margin: var(--sp-5) 0 0; } /* ========================================================================== 10. Shared bits ========================================================================== */ .nl-section-head { max-width: 52ch; } .nl-section-head .nl-lede { margin-top: var(--sp-4); margin-bottom: 0; } .nl-disclaimer { margin-top: var(--sp-5); font-size: .86rem; line-height: 1.55; color: var(--nl-muted); max-width: 60ch; } .nl-related { padding: clamp(2.5rem, 5vw, 4rem) 0; background: var(--nl-paper); border-top: 1px solid var(--nl-line); } .nl-related-grid { display: grid; gap: var(--sp-4); grid-template-columns: 1fr; margin-top: var(--sp-5); } @media (min-width: 760px) { .nl-related-grid { grid-template-columns: repeat(3, 1fr); } } .nl-related-card { display: block; border: 1px solid var(--nl-line); border-radius: var(--radius); padding: var(--sp-4) var(--sp-5); background: #fff; text-decoration: none; color: inherit; } .nl-related-card:hover { border-color: var(--nl-line-2); background: var(--nl-sand); } .nl-related-card b { display: block; margin-bottom: .3rem; font-size: 1rem; letter-spacing: -.01em; } .nl-related-card span { color: var(--nl-muted); font-size: .92rem; line-height: 1.5; } /* The FAQ inherits the site's `.faq` styling, which is theme-token driven. Pin the few surfaces so a light-locked page stays light. */ .nl-faq { background: var(--nl-paper); padding: clamp(3rem, 7vw, 5rem) 0; } .nl-faq details { background: #fff; border-color: var(--nl-line); } .nl-faq summary { color: var(--nl-ink); } .nl-faq details p { color: var(--nl-muted); } /* -------------------------------------------------------------------------- Motion. Enhancement only: with JS off, main.js never adds `.js` to so `.reveal` elements are visible by default. -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: no-preference) { .nl-float { animation: nl-float 9s ease-in-out infinite; } @keyframes nl-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-7px); } } }