/* ═══════════════════════════════════════════════════════════════ FROM SURVIVAL TO FREEDOM · /practice/ · 28 Sep 2026 The paid page. Loaded after app.css on this page only, so none of it reaches the other pages. Every colour is an app.css token; the few new values are derived from her own hexes and noted where used. Since 29 Sep 2026 the page rides on the home page's own components (scenes, insets, chapters, the story cards, the FAQ, the pill nav), so this file holds only what app.css has no equivalent for: the header's $47 button, her headline variants, the sacred-geometry figures and the diagram stand-in, the five inside cards, the price, the four weeks, the credit line, the two open FAQ answers, the footer's policy links, and the hero's phone order. The workbook feel her brief asks for (fine gold line work as accents) is carried by the pieces here that draw it. ═══════════════════════════════════════════════════════════════ */ /* ── focus: app.css's sand ring disappears on cream. Light surfaces outside .chapter / .scene--light take the teal ring too. ── */ .inset--light :focus-visible, .foot :focus-visible, .bar :focus-visible { outline-color: var(--teal); } /* ── sacred geometry ────────────────────────────────────────── Two symbols, drawn once in the sprite at the top of . Gold is ornament only: it measures 2.3:1 on cream and is never text here. */ .geo-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .geo { display: block; fill: none; stroke-width: 1; color: var(--gold); pointer-events: none; } /* ── header: the home page's bar, with the one $47 button kept ──── app.css hides .bar__cta under 900px because the other pages carry the ask in their menu. Here it is the page's one action, so it stays at every width, beside the burger: long label above 520px, short label below. The link's aria-label keeps the full name for screen readers. (An open menu still gets app.css's pinned bottom bar.) */ .bar__cta[data-order] { display: inline-flex; align-items: center; min-height: 44px; } .bar__cta-s { display: none; } @media (max-width: 520px) { .bar__cta[data-order] { white-space: normal; padding-inline: 1rem; } .bar__cta-l { display: none; } .bar__cta-s { display: inline; } } /* With the button kept, the pill holds three things below 900px, and space-between left the burger in the middle of it. Every other page has the burger at the right edge, so here the wordmark stays left and the button sits just before the burger. Visual order only: the markup, and so the tab order, is the home page's (wordmark, burger, button). The open menu is not affected: its button is pinned to the screen's foot. */ @media (max-width: 899px) { .bar__cta[data-order] { order: 2; margin-left: auto; } .bar__burger { order: 3; } } /* ── her alternate headlines (the head script sets html[data-h]) ── */ .hv__v { display: block; text-wrap: balance; } .hv__v[hidden] { display: none; } html[data-h="2"] .hv__v[data-v="1"], html[data-h="3"] .hv__v[data-v="1"] { display: none; } html[data-h="2"] .hv__v[data-v="2"], html[data-h="3"] .hv__v[data-v="3"] { display: block; } /* ── footer: policies and contact, then her disclaimer ─────────── */ .foot__legal { display: flex; flex-wrap: wrap; justify-content: center; gap: .3rem 1.8rem; margin: 1.4rem 0 1.1rem; } .foot__legal a { position: relative; font-size: .86rem; color: var(--ink-2); text-decoration: none; } /* the drawn link is small; the tap area is not */ .foot__legal a::before { content: ""; position: absolute; left: -.4rem; right: -.4rem; top: -.8rem; bottom: -.8rem; } .foot__legal a[aria-disabled="true"] { opacity: .55; cursor: default; } /* ── running text and pull quotes on light chapters ────────── .body and .pull were written for dark scenes and only flip for .scene--light and .inset--light. Chapters get these instead. */ .copy { color: var(--ink-2); font-size: clamp(1.04rem, 1.2vw, 1.14rem); line-height: 1.72; max-width: 60ch; margin: 0 0 1.1rem; } .chapter .pull { color: var(--teal-d); border-left-color: var(--gold); } /* ═══ 3 · the reframe: the home page's light full-bleed scene, then the diagram's own row on the page ground. The scene's veil already fades its bottom edge to cream, which gives most of the gap, so the row starts with only this small top padding and the stations sit just under the photograph. (app.css zeroes the first child's top margin in a chapter, so .flow-fig adds none of its own here.) */ .reframe__flow { padding-top: clamp(1rem, 3vw, 2rem); } /* On a phone app.css lays one flat cream veil over every light scene (max-width 780px, !important), which throws away the bleed scene's fade to the page ground at its top and bottom edges. The scene then ends in a hard line, 6 to 10 levels of tone off the page around it with this photograph (the home page's paler photograph hides it at 2 to 4). Same veil here, but opaque cream at both ends, so the photograph still sinks into the page. */ @media (max-width: 780px) { #reframe .scene__veil { background: linear-gradient(180deg, var(--cream) 0%, color-mix(in srgb, var(--cream) 94%, transparent) 14%, color-mix(in srgb, var(--cream) 94%, transparent) 86%, var(--cream) 100%) !important; } } /* ═══ 3 · the diagram stand-in: seven stations on a gold line ════ Down the page below 1100px, across it above. */ .flow-fig { margin: clamp(3rem, 6vw, 4.5rem) 0 0; } .flow { list-style: none; margin: 0; padding: 0; position: relative; display: grid; } .flow::before { content: ""; position: absolute; left: 4px; top: 1.4rem; bottom: 1.4rem; width: 1px; background: var(--gold); } .flow__l { position: relative; display: flex; align-items: center; gap: 1.1rem; padding: .75rem 0 .75rem 1.9rem; border-top: 1px solid var(--hair); } .flow__l:last-child { border-bottom: 1px solid var(--hair); } .flow__l::before { content: ""; position: absolute; left: 0; top: 50%; margin-top: -4.5px; width: 9px; height: 9px; border-radius: 50%; background: var(--cream); box-shadow: inset 0 0 0 1.5px var(--gold); } .flow__n { flex: none; width: 2rem; font-size: .72rem; font-weight: 600; letter-spacing: .12em; color: var(--gold-t); font-variant-numeric: tabular-nums; } .flow__t { font-family: var(--disp); font-size: clamp(1.15rem, 2.4vw, 1.45rem); line-height: 1.25; color: var(--teal-d); } .flow__l:last-child .flow__t { color: var(--teal); } .flow__cap { margin-top: 1.6rem; font-size: .76rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: var(--gold-t); } @media (min-width: 1100px) { .flow { grid-template-columns: repeat(7, minmax(0, 1fr)); column-gap: 1rem; } .flow::before { left: 0; right: 0; top: 4px; bottom: auto; width: auto; height: 1px; } .flow__l { display: grid; align-content: start; gap: .55rem; padding: 1.6rem 0 0; border: 0; } .flow__l:last-child { border: 0; } .flow__l::before { top: 0; margin-top: 0; } } /* The seven layers arrive in order: the one staggered motion on this page, the same one the site's motion budget already allows for the architecture. Additive only, and app.css removes it under reduced motion (.js .reveal is forced visible there). */ @media (prefers-reduced-motion: no-preference) { .js .flow.reveal { opacity: 1; transform: none; } .js .flow.reveal .flow__l { opacity: 0; transform: translateY(10px); } .js .flow.reveal.is-in .flow__l { opacity: 1; transform: none; transition: opacity .55s var(--ease), transform .55s var(--ease); transition-delay: calc(var(--i) * 90ms); } } /* ═══ 6 · WHAT'S INSIDE · five cards ═══════════════════════════ */ .inside { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(1rem, 2vw, 1.4rem); } @media (min-width: 640px) { .inside { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .inside { grid-template-columns: repeat(6, minmax(0, 1fr)); } .inside__card { grid-column: span 2; } .inside__card--wide { grid-column: span 3; } } .inside__card { display: flex; flex-direction: column; padding: .5rem .5rem 1.6rem; border-radius: var(--r-out); background: rgba(37,100,109,.045); box-shadow: inset 0 0 0 1px rgba(37,100,109,.10), var(--lift-1); } .inside__vis { position: relative; overflow: clip; isolation: isolate; aspect-ratio: 4 / 3; border-radius: var(--r-in); display: grid; place-items: center; align-content: center; margin-bottom: 1.25rem; } .inside__vis img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .inside__t { font-family: var(--disp); font-weight: 400; font-size: clamp(1.14rem, 1.6vw, 1.3rem); line-height: 1.3; color: var(--teal-d); margin: 0 .9rem .5rem; } .inside__d { font-size: .98rem; line-height: 1.62; color: var(--ink-2); margin: 0 .9rem; } /* the webinar, until a still exists: a title card. #183E44 is her --teal-d at 0.78 luminance, hue unchanged. */ .inside__vis--title { background: radial-gradient(120% 100% at 28% 18%, var(--teal) 0%, var(--teal-d) 52%, #183E44 100%); gap: .7rem; padding: 1.5rem; text-align: center; } .titlecard__geo { position: absolute; z-index: -1; width: 88%; aspect-ratio: 1; left: 50%; top: 50%; transform: translate(-50%, -50%); opacity: .45; } .titlecard__t { font-family: var(--disp); font-size: clamp(1.5rem, 2.6vw, 2.1rem); line-height: 1.15; color: var(--on-d); max-width: 13ch; } .titlecard__k { font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--on-d-2); } .inside__vis--title .clip__play { margin-top: .4rem; } /* the workbook, until her PDF arrives: a cover on a cream desk. #FFFDF8 is paper, the white her brief asks the workbook for. The offset cream2 shadow is the sheet beneath it. */ .inside__vis--book { background: var(--cream2); } .cover { width: 50%; aspect-ratio: 8.5 / 11; display: grid; justify-items: center; align-content: space-between; padding: 10% 8%; text-align: center; background: #FFFDF8; border-radius: 3px; box-shadow: 7px 7px 0 0 var(--cream2), 7px 7px 0 1px rgba(185,165,102,.3), 0 2px 3px rgba(62,54,46,.08), 0 22px 44px -18px rgba(62,54,46,.38); transform: rotate(-3deg); } .cover__k { font-size: .6875rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; line-height: 1.5; color: var(--gold-t); } .cover__t { font-family: var(--disp); font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.15; color: var(--teal-d); } .cover__geo { width: 46%; aspect-ratio: 1; } .cover__a { font-size: .6875rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: var(--ink-2); } /* the meditation: the tile her brief lists as "to create" */ .inside__vis--tile { background: radial-gradient(90% 90% at 50% 38%, var(--teal) 0%, var(--teal-d) 58%, #183E44 100%); gap: .55rem; padding: 1.2rem; text-align: center; } .tile__geo { width: 40%; max-width: 9rem; aspect-ratio: 1; color: var(--gold-l); opacity: .95; } .tile__t { margin-top: .3rem; font-family: var(--disp); font-size: clamp(1.05rem, 1.5vw, 1.25rem); line-height: 1.2; color: var(--on-d); } .tile__k { font-size: .6875rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--on-d-2); } /* the community: seven in a circle */ .inside__vis--icon { background: var(--cream2); } .ring { width: 40%; max-width: 9rem; aspect-ratio: 1; stroke-width: 1.2; color: var(--gold); } /* ── the price, and the button under it ─────────────────────── Every [data-order] scrolls here until her order form exists, so it clears the floating pill when it arrives. */ .price { margin-top: clamp(3rem, 6vw, 4.5rem); display: grid; justify-items: center; gap: 1.3rem; text-align: center; scroll-margin-top: calc(var(--nav-pad) + var(--pill-h) + 1.5rem); } .price__t { font-family: var(--disp); font-size: clamp(2rem, 4.4vw, 3.4rem); line-height: 1.1; color: var(--teal-d); } .price .acts { justify-content: center; margin-top: 0; } @media (max-width: 780px) { .price .acts { width: 100%; } } /* narrow screens: the stand-in cover needs more width than 50% of a one-column card gives it, or its lines collide. Below 480px it takes 62% of the desk, the seed shrinks, and "Four-Week" stays whole. */ @media (max-width: 480px) { .cover { width: 62%; padding: 9% 7%; } .cover__k { font-size: .6875rem; letter-spacing: .06em; } /* 11px: the phone audit's floor */ .cover__t { font-size: 1.05rem; text-wrap: balance; } .cover__geo { width: 34%; } } .cover__t .nb { white-space: nowrap; } /* ═══ 7 · THE FOUR WEEKS ═══════════════════════════════════════ A fine gold line with a station per week. Stacked, it runs down the left. Across (900px up) it runs along the top, ends at Week Four's station, and turns upward there: the stand-in for her Vertical Line of Alignment (NEEDS KAILA · vertical line). */ .weeks { --wg: clamp(1.4rem, 3vw, 2.6rem); --rise: clamp(3rem, 6vw, 5rem); list-style: none; margin: 0; padding: 0; position: relative; display: grid; } .weeks::before { content: ""; position: absolute; left: 4px; top: .7rem; bottom: .7rem; width: 1px; background: var(--gold); } .weeks__i { position: relative; padding: 0 0 2.4rem 2.1rem; } .weeks__i:last-child { padding-bottom: 0; } .weeks__i::before { content: ""; position: absolute; left: 0; top: .34rem; width: 9px; height: 9px; border-radius: 50%; background: var(--cream); box-shadow: inset 0 0 0 1.5px var(--gold); } .weeks__k { font-size: .72rem; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--gold-t); margin-bottom: .6rem; } .weeks__n { font-family: var(--disp); font-weight: 400; font-size: clamp(1.4rem, 2.2vw, 1.75rem); line-height: 1.15; color: var(--teal); margin-bottom: .4rem; } .weeks__t { font-weight: 500; font-size: 1rem; line-height: 1.45; color: var(--ink); margin-bottom: .5rem; } .weeks__d { font-size: .98rem; line-height: 1.62; color: var(--ink-2); max-width: 36ch; } @media (min-width: 900px) { .weeks { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: var(--wg); padding-top: 2.4rem; } /* Week Four's station sits at 75% of the width plus three quarters of one gap; the line stops at its centre */ .weeks::before { left: 0; right: calc(25% - var(--wg) * .75 - 4.5px); top: 4px; bottom: auto; width: auto; height: 1px; } .weeks__i { padding: 0; } .weeks__i::before { top: -2.4rem; } .weeks__i--rise::after { content: ""; position: absolute; left: 4px; width: 1px; top: calc(-2.4rem + 4.5px - var(--rise)); height: var(--rise); background: linear-gradient(0deg, var(--gold) 0%, rgba(185,165,102,0) 100%); } } .weeks + .chapter__closer { margin-top: clamp(2.6rem, 5vw, 3.6rem); } /* ═══ 8 · HI, I'M KAILA ═══ (framing: app.css, per-image anchors) */ .credit { margin-top: 1.5rem; font-size: .96rem; line-height: 1.6; color: var(--gold-t); } .credit cite { font-style: italic; } /* ═══ 10 · IS THIS FOR YOU? ═══════════════════════════════════ */ .fit__note { margin-top: 1rem; padding-left: 1.5rem; font-size: .96rem; line-height: 1.6; color: var(--ink-2); } /* ═══ 11 · the two answers she has not given yet ═══════════════ Scaffolding, and it should look like it: italic, dashed rule. */ .faq__i .tbc { font-style: italic; color: var(--gold-t); margin: 0 0 1.35rem; padding: .1rem 0 .1rem 1rem; border-left: 1px dashed rgba(118,105,65,.6); } /* ═══ 1 · HERO, on the home page's scene ═══════════════════════ Her headline is one long question (and up to 82 characters in ?h=3), where the home hero's is a short statement, so it runs a step smaller. The rest of her subhead is a paragraph, not a line: it gets a wider measure than .plain's 38ch. */ #hero .h1 { font-size: clamp(2.2rem, 4.2vw, 3.5rem); } #hero .hero__sub { max-width: 48ch; } /* The hero's veil and plate, lighter over her (30 Sep 2026, the user: "the brown fade over the woman is too much"). The home recipe darkens the whole card: its diagonal still carried .20 to .35 umber across her at 56 to 70%, its bottom lift .76 over her lap and the bed, and the plate behind the words reached 16rem past the column onto her face. Here the diagonal keeps its full weight under the words (0 to 40%) and is gone by 70%, where she starts; the bottom lift is short and light, since the $47 button is now the lowest thing on the card; and the plate stops 3rem past the column. Desktop only: on phones (below 781px) the hero has no veil or plate. */ @media (min-width: 781px) { #hero .scene__veil { background: linear-gradient(78deg, rgba(var(--u),.72) 0%, rgba(var(--u),.64) 24%, rgba(var(--u),.50) 40%, rgba(var(--u),.26) 52%, rgba(var(--u),.08) 62%, rgba(var(--u),0) 70%), linear-gradient(0deg, rgba(var(--u),.42) 0%, rgba(var(--u),.16) 18%, rgba(var(--u),0) 34%), linear-gradient(180deg, rgba(var(--u),.24) 0%, rgba(var(--u),0) 16%); } #hero .scene__box::before { inset: -14rem -3rem -14rem -16rem; } } /* ═══ 1b · HER SUPPORTING LINE, in its own light band ═══════════ Between the hero card and #familiar: the site's statement type (.position's display face and teal), larger and centred, with the chapter's cream ground as the breathing space between two dark cards. Less padding than a full chapter: it is one line, not a section. */ .offer { padding-block: clamp(3.5rem, 8vw, 6.5rem); } .offer__line { margin: 0 auto; max-width: 34ch; text-align: center; font-family: var(--disp); font-size: clamp(1.3rem, 2.3vw, 1.85rem); line-height: 1.45; color: var(--teal-d); text-wrap: balance; /* from ~1366px wide "$47." was left alone on the last line */ } /* Short laptop screens (860px tall or less). Her third headline runs to four lines at 1280, and on a 700 to 768px-tall screen that put the $47 button 10 to 58px under the first screen (770 on a 1280x720). Here the hero stops padding itself for a tall screen: the top padding comes down to leave the eyebrow ~18px under the nav pill, the headline scales with the screen's height as well as its width, and the gaps and the paragraph's leading tighten a little. Phones (their own layout, below 781px) and taller screens are untouched. The headline's measure is set in em, 13.4em (752px at its full 56px, the 47rem column), so it narrows with the font: the headline breaks where it would at full size and never reaches further right. Without it the smaller type packed more words per line, and above 1366px (where the column is 47rem, not 56%) her longer headlines ran over the woman's hair and face. (30 Sep 2026) */ @media (min-width: 781px) and (max-height: 860px) { #hero { padding-top: 3rem; } #hero .h1 { font-size: min(clamp(2.2rem, 4.2vw, 3.5rem), 6.8vh); max-width: 13.4em; margin-bottom: 1rem; } #hero .lede { margin-bottom: .8rem; } #hero .hero__sub { margin-bottom: 1.2rem; line-height: 1.6; } } /* A laptop's browser window is its screen less the toolbars: a 1366x768 laptop shows about 1366x657, where her third headline still left the button 29px under. One more step below 700px tall. */ @media (min-width: 781px) and (max-height: 700px) { #hero .eyebrow { margin-bottom: .7rem; } #hero .h1 { font-size: min(clamp(2.2rem, 4.2vw, 3.5rem), 6.2vh); } #hero .lede { margin-bottom: .6rem; } #hero .hero__sub { margin-bottom: 1rem; line-height: 1.55; } } /* ═══ 2 · RECOGNITION: the "Underneath it all" line and its label ═ */ .familiar__under { max-width: 44ch; margin-top: 1.9rem; } .familiar__under b { font-weight: 500; color: var(--on-d); } /* Her brief: "On mobile, headline, subhead, and button show without scrolling." Her subhead is a whole paragraph. Under the site's phone hero (app.css, "PHONE · THE HERO SPLITS") the banner photograph comes first, and with it above the words the button measured ~1000px down a 812px screen. So on this page alone the banner follows the words: same card, same banner crop, same dark panel, only the order swaps. Nothing is cut and the markup keeps her order. */ @media (max-width: 780px) { #hero { display: flex; flex-direction: column; } #hero > picture { order: 2; } /* app.css's #hero padding-block (shared with #top) outranks the phone hero's padding: 0 and left a dark strip under the banner. The top keeps the phone hero's own pill clearance, the bottom is the banner. */ #hero { padding-block: calc(var(--pill-h) / 2 + var(--nav-pad) + .7rem) 0; } #hero .scene__box { padding: 1.1rem 1.25rem 1.6rem; } /* top: ~12px under the nav pill; sides: a longer measure */ /* Every headline variant must fit the first screen with the subhead and button (?h=3 is 82 characters): a step smaller and tighter here. */ #hero .h1 { font-size: 2rem; margin-bottom: 1.1rem; } #hero .eyebrow { margin-bottom: .8rem; } #hero .lede { margin-bottom: .9rem; } #hero .hero__sub { margin-bottom: 1.3rem; } }