/* ========================================================================== Martha — lesson reader Serves three kinds of page: the free Lesson 1 (lesson.html), the eleven public teasers (lesson-02…12.html, locked) and the twelve full lessons inside the private folder. Which one it is lives on . ========================================================================== */ /* Atmosphere lives in zones on the landing page, but a reading page is one continuous room, so it gets its light back at document level: a warm lamp high on the right and a lavender haze low on the left. Both tokens flip with [data-reading], so this reads as a lit room at night and as daylight through a window in the morning — the same geometry either way. */ body::before { content: ""; position: fixed; inset: 0; z-index: -2; pointer-events: none; background: radial-gradient(64ch 48ch at 82% -6%, var(--c-amber-glow), transparent 62%), radial-gradient(70ch 56ch at 6% 104%, var(--c-lavender-dim), transparent 66%), linear-gradient(var(--c-bg-deep), var(--c-bg) 36%); } body { padding-bottom: 2rem; } /* -------------------------------------------------------------------------- Reader chrome -------------------------------------------------------------------------- */ .reader-head { position: sticky; top: 0; z-index: 55; background: var(--glass-bg); border-bottom: 1px solid var(--glass-line); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); } .reader-head__inner { display: flex; align-items: center; gap: 0.6rem; padding-block: 0.65rem; } .icon-btn { display: inline-grid; place-items: center; width: 2.5rem; height: 2.5rem; border-radius: var(--r-pill); border: 1px solid transparent; color: var(--c-text-dim); text-decoration: none; transition: color var(--dur) var(--ease), border-color var(--dur) var(--ease); } .icon-btn:hover { color: var(--c-amber); border-color: var(--c-line); } .icon-btn svg { width: 1.15rem; height: 1.15rem; } .reader-head__where { flex: 1 1 auto; min-width: 0; text-align: center; } .reader-head__count { font-family: var(--font-display); font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-mute); } .reader-head__dots { display: flex; justify-content: center; gap: 4px; margin-top: 0.35rem; } .reader-head__dots i { width: 4px; height: 4px; border-radius: 50%; background: var(--c-line); } .reader-head__dots i.is-here { width: 14px; border-radius: var(--r-pill); background: var(--c-amber); } /* Text-size control */ .size-ctl { display: inline-flex; align-items: center; gap: 2px; } .size-ctl__btn { width: 2rem; height: 2.5rem; border-radius: var(--r-sm); font-family: var(--font-display); color: var(--c-text-mute); line-height: 1; transition: color var(--dur) var(--ease), background-color var(--dur) var(--ease); } .size-ctl__btn:hover { color: var(--c-text); background: var(--c-surface-2); } .size-ctl__btn[aria-pressed="true"] { color: var(--c-amber); } .size-ctl__btn:nth-child(1) { font-size: 0.72rem; } .size-ctl__btn:nth-child(2) { font-size: 0.9rem; } .size-ctl__btn:nth-child(3) { font-size: 1.1rem; } /* Reading progress hairline */ .reader-progress { position: absolute; left: 0; bottom: -1px; height: 2px; width: 0%; background: var(--c-amber); transition: width 90ms linear; } /* -------------------------------------------------------------------------- Article -------------------------------------------------------------------------- */ .reader { padding-block: clamp(2.25rem, 1.5rem + 3vw, 4rem) 3rem; } /* -------------------------------------------------------------------------- Locked state The teaser stays readable; everything past it is masked, not deleted — so a visitor can see there is a real lesson underneath. -------------------------------------------------------------------------- */ [data-state="locked"] .u-unlocked-only { display: none; } [data-state="unlocked"] .u-locked-only { display: none; } .gated { position: relative; } [data-state="locked"] .gated__content { max-height: 22rem; overflow: hidden; filter: blur(5px); opacity: 0.5; user-select: none; pointer-events: none; -webkit-mask-image: linear-gradient(#000 28%, transparent 96%); mask-image: linear-gradient(#000 28%, transparent 96%); } .unlock { position: relative; z-index: 2; max-width: var(--measure); margin: -6rem auto 0; padding: clamp(1.5rem, 1.1rem + 1.6vw, 2.25rem); border: 1px solid color-mix(in oklab, var(--c-amber) 28%, var(--c-line)); border-radius: var(--r-lg); background: var(--glass-bg); backdrop-filter: var(--glass-blur); -webkit-backdrop-filter: var(--glass-blur); box-shadow: var(--shadow-lift); text-align: center; } /* The -6rem pull above is aimed at the blurred, mask-faded tail of .gated__content — it is what makes the card look like it is sitting on top of the hidden lesson. The generated teasers (lesson-02…12) have no blurred tail: the two paragraphs they show are meant to be read in full. There the card is a direct child of .lesson__body, so it sits below them instead of eating six rems of legible text. */ .lesson__body > .unlock { margin-top: 2.75rem; } /* Same card at the foot of the free Lesson 1, where nothing is hidden and there is no blurred tail to sit on. Without this it would climb six rems back over the audio card. */ .unlock--open { margin-top: 2.75rem; } .unlock__icon { display: grid; place-items: center; width: 2.9rem; height: 2.9rem; margin: 0 auto; border-radius: 50%; border: 1px solid color-mix(in oklab, var(--c-amber) 32%, transparent); background: color-mix(in oklab, var(--c-amber) 10%, transparent); color: var(--c-amber); } .unlock__icon svg { width: 1.15rem; height: 1.15rem; } .unlock__title { margin-top: 1.1rem; font-size: clamp(1.25rem, 1.05rem + 1vw, 1.6rem); font-weight: 400; } .unlock__text { max-width: 30rem; margin: 0.85rem auto 0; font-size: 0.975rem; color: var(--c-text-mute); } .unlock__price { display: flex; align-items: baseline; justify-content: center; gap: 0.5rem; margin-top: 1.5rem; } .unlock__num { font-family: var(--font-display); font-size: 2.1rem; font-weight: 300; letter-spacing: -0.03em; color: var(--c-text); } .unlock__unit { font-size: var(--text-sm); color: var(--c-text-mute); } .unlock__actions { display: grid; gap: 0.7rem; max-width: 22rem; margin: 1.35rem auto 0; } .unlock__free { margin-top: 1.5rem; padding-top: 1.25rem; border-top: 1px solid var(--c-line-soft); font-size: var(--text-sm); color: var(--c-text-mute); } .unlock__free a { color: var(--c-lavender); text-underline-offset: 3px; } /* Locked audio row */ .audio-locked { display: flex; align-items: center; gap: 0.85rem; max-width: var(--measure); margin: 2rem auto 0; padding: 0.9rem 1.1rem; border: 1px dashed var(--c-line); border-radius: var(--r-pill); color: var(--c-text-mute); font-size: var(--text-sm); } .audio-locked__disc { flex: 0 0 auto; display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 50%; border: 1px solid var(--c-line); } .audio-locked__disc svg { width: 0.95rem; height: 0.95rem; } /* -------------------------------------------------------------------------- Unlocked state -------------------------------------------------------------------------- */ .reader-nav { display: grid; gap: 0.7rem; max-width: var(--measure); margin: 3rem auto 0; } .reader-nav__link { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; border: 1px solid var(--c-line-soft); border-radius: var(--r-md); background: var(--c-surface); text-decoration: none; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); } .reader-nav__link:hover { border-color: color-mix(in oklab, var(--c-amber) 38%, var(--c-line-soft)); background: var(--c-surface-2); } .reader-nav__dir { font-size: var(--text-xs); letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-text-mute); } .reader-nav__name { margin-top: 0.3rem; font-family: var(--font-display); font-size: 1rem; color: var(--c-text-dim); } .reader-nav__link--next { text-align: right; } .reader-nav__link--next > div { margin-left: auto; } @media (min-width: 40rem) { .reader-nav { grid-template-columns: 1fr 1fr; } } /* -------------------------------------------------------------------------- Free safety guide (safety.html) Same reading chrome as a lesson, because it is one — it just happens to be the one nobody has to pay for. The only new thing here is urgency: two levels of "stop soothing and make a call", and they have to be tellable apart at a glance by an exhausted person holding a crying baby. -------------------------------------------------------------------------- */ .safety-intro { max-width: var(--measure); margin-bottom: clamp(2rem, 1.4rem + 2vw, 3rem); } .safety-intro__title { margin-top: 1.1rem; font-family: var(--font-display); font-size: clamp(1.9rem, 1.4rem + 2.4vw, 3rem); font-weight: 300; line-height: 1.1; letter-spacing: var(--track-tight); } .safety-intro__text { margin-top: 1.15rem; color: var(--c-text-dim); } .safety-toc { list-style: none; padding: 0; margin-top: 1.75rem; display: grid; gap: 0.7rem; } .safety-toc a { display: grid; grid-template-columns: auto 1fr; align-items: baseline; gap: 0.8rem; padding: 0.9rem 1.05rem; border: 1px solid var(--c-line-soft); border-radius: var(--r-md); background: var(--c-surface); text-decoration: none; transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease); } .safety-toc a:hover { border-color: color-mix(in oklab, var(--c-amber) 45%, transparent); background: var(--c-surface-2); } .safety-toc__num { font-family: var(--font-display); font-size: var(--text-xs); font-weight: 600; letter-spacing: var(--track-wide); color: var(--c-amber); } .safety-toc__title { font-family: var(--font-display); font-size: 1.05rem; line-height: 1.35; } .safety-doc__rule { margin-block: clamp(3rem, 2rem + 4vw, 5rem); } /* Figures. Three rules duplicated from landing.css on purpose — the reader pages do not load that stylesheet, and pulling it in whole for this would cost more than the repetition does. */ .figure { margin: 0; } .figure__img { width: 100%; height: auto; border-radius: var(--r-lg); box-shadow: var(--shadow-lift); } .figure__cap { margin-top: 0.85rem; font-size: var(--text-xs); line-height: 1.55; color: var(--c-text-mute); } /* Closing image of the free guide, held to the reading measure so it never grows wider than the sentences it follows. */ .safety-figure { max-width: var(--measure); margin: clamp(3rem, 2rem + 4vw, 4.5rem) auto 0; } .safety-figure .figure__img { border-radius: var(--r-md); } /* An illustration inside a lesson, held to the reading measure so it never grows wider than the sentences around it. Both classes are named on purpose. `.figure { margin: 0 }` is declared in BOTH reader.css and landing.css, and the private index loads landing.css last — a single `.lesson-figure` ties on specificity and loses to whichever came later, which is how this shipped flat against the list below it the first time. Two classes outrank both, and outrank `.lesson__body > * + *` as well, so one rule now covers the lesson pages and the index alike. */ .figure.lesson-figure { max-width: var(--measure); margin-inline: auto; margin-block: clamp(2.25rem, 1.6rem + 2.5vw, 3.25rem); } /* The two levels of urgency. Emergency is amber-edged and heavier; same-day is lavender and lighter. Colour is the fast signal, but the heading says it in words too — this must not depend on seeing hue correctly. */ .alert { margin-top: 1.6em; padding: 1.15rem 1.25rem; border: 1px solid var(--c-line); border-left-width: 4px; border-radius: var(--r-md); background: var(--c-surface); } .alert__title { display: flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; } .alert__title svg { width: 1.1rem; height: 1.1rem; flex: 0 0 auto; } .alert__lead { margin-top: 0.6rem; font-size: 0.97rem; line-height: 1.6; color: var(--c-text-dim); } .alert ul { margin-top: 0.9rem; padding-left: 0; list-style: none; display: grid; gap: 0.7rem; } /* Hanging indent, deliberately NOT a two-column grid. These items are "Lead-in. then a sentence", and in a grid that trailing sentence becomes a third grid item — it drops into the 0.85rem marker column and shatters into one word per line. A dash in the margin does the same job and does not care how many inline elements the item contains. */ .alert li { position: relative; padding-left: 1.5rem; font-size: 0.97rem; line-height: 1.58; color: var(--c-text-dim); } .alert li::before { content: "—"; position: absolute; left: 0; top: 0; color: var(--c-text-mute); } .alert li strong { color: var(--c-text); font-weight: 600; } .alert--emergency { border-color: color-mix(in oklab, var(--c-amber) 40%, var(--c-line)); border-left-color: var(--c-amber); background: color-mix(in oklab, var(--c-amber) 8%, var(--c-surface)); } .alert--emergency .alert__title { color: var(--c-amber); } .alert--sameday { border-color: color-mix(in oklab, var(--c-lavender) 38%, var(--c-line)); border-left-color: var(--c-lavender); background: var(--c-lavender-dim); } .alert--sameday .alert__title { color: var(--c-lavender); } .reader-note { max-width: var(--measure); margin: 2.5rem auto 0; padding-top: 1.5rem; border-top: 1px solid var(--c-line-soft); }