/* ============================================================================ JOEY KLEIN -- the design layer. ---------------------------------------------------------------------------- Loaded last, after ra.css and ra-components.css. Those two carry the structure the funnel was built on; this file carries the Joey Klein author brand that sits on top of it, and it is deliberately one file so the whole rebrand can be read (or reverted) in one place. The brief it answers: the funnel still read as the Inner Matrix book funnel, and it read as templated rather than designed. Four things were doing that, and each has a section below. 1. PALETTE + FURNITURE. Cool navy, blue foil hairlines, a blueprint grid and mono labels are Inner Matrix's signature. Tokens moved to the supplied Joey Klein kit in ra.css; the furniture moves here. 2. PHOTOGRAPHY. Photos were sized by what the image was, not by what the section had to say, so a half-page portrait sat next to two lines of copy. Every photo now belongs to one of four named treatments, each with a text-weight it is allowed to carry. 3. DEVICES. The things that make a page read as expensive rather than generated: oversized numerals, an editorial pull-quote, a chapter list, a real signature, a tracked rule-and-label, a stat band, a sticky order bar. 4. RHYTHM. Alternating band density and ground, so the eye is handed from one section to the next instead of scrolling through a stack of equal-weight cards. ========================================================================== */ /* ========================================================================== 1 - FURNITURE ========================================================================== */ /* ---- masthead ---------------------------------------------------------- */ /* The light Joey Klein bar is now the default for every page in the funnel, not just the landing: the dark Inner Matrix bar on checkout and past it was the loudest remaining tell that this was the same funnel. The rule under it is warm hairline plus a hair of blue, rather than the solid blue underline the landing carried -- the underline read as a highlighter. */ .mast{ background:var(--white);border-bottom:1px solid var(--rule); color:var(--ink);box-shadow:0 1px 0 rgba(3,22,38,.05); } .mast .wrap{min-height:74px} .mast .btn{background:var(--ink-deep);color:var(--white)} .mast .btn:hover{background:var(--blue);color:var(--white)} .mast-light{box-shadow:0 1px 0 rgba(3,22,38,.05)} .mast-light .btn{background:var(--ink-deep);color:var(--white)} .mast-light .btn:hover{background:var(--blue);color:var(--white)} /* Mark hard left on every page. Centring it needed a second object in the bar to balance against, and that object was the hanging cover -- an Inner Matrix device that has been dropped. */ .mast .wrap,.mast.no-book .wrap{grid-template-columns:auto 1fr;gap:16px} .mast .mark,.mast .jk-lockup{justify-self:start} .mast .btn-sm{justify-self:end} .jk-lockup .jk-ico{height:31px} .jk-lockup .jk-wm{height:17px} /* ---- buttons ----------------------------------------------------------- */ /* Squared, wide-tracked, near-black rather than blue. Blue is the accent, and a page whose every button is saturated blue is a page where blue has stopped meaning anything. Hover lifts to the brand blue. */ .btn{ font-family:var(--sans);font-weight:600; font-size:.92rem;letter-spacing:.06em;text-transform:uppercase; padding:17px 30px;background:var(--ink-deep); transition:background .4s var(--ease),color .4s var(--ease), box-shadow .4s var(--ease),transform .4s var(--ease); } .btn:hover{background:var(--blue);box-shadow:0 10px 30px rgba(0,61,191,.22);transform:translateY(-1px)} .btn-sm{padding:11px 18px;font-size:.72rem;letter-spacing:.08em} .on-dark .btn{background:var(--blush);color:var(--ink-deep)} .on-dark .btn:hover{background:var(--white);color:var(--ink-deep)} .btn-ghost{background:transparent;color:var(--ink-deep);border:1px solid var(--ink-deep)} .btn-ghost:hover{background:var(--ink-deep);color:var(--white);box-shadow:none} /* The line under a CTA. It carries the risk-reversal, so it is set to be read, not to be small. */ .cta-under{font-size:.86rem;line-height:1.55;color:var(--grey);max-width:46ch} .on-dark .cta-under{color:#C0B4AE} /* ---- surfaces ---------------------------------------------------------- */ .on-white{background:var(--white);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} /* A third ground, between blush and white, so three consecutive light bands do not read as one undifferentiated page. */ .on-blush-deep{background:var(--blush-deep)} /* Cards lose the foil hairline and take a warm rule plus a clay tab. The tab is 34px of colour in the corner -- enough to mark the card as designed, small enough that twelve of them on a page do not shout. */ .mech-c::before,.domain::before,.promise::before,.turn::before,.azn::before, .quote::before,.form-card::before,.summary::before,.guarantee::before, .order-inner::before,.pg::before{ background:var(--clay);left:0;right:auto;width:34px;height:2px; } .d-want::before{background:var(--blue)} /* ---- section heads ----------------------------------------------------- */ h1,h2,h3{text-wrap:balance} h1.display,h2.display{letter-spacing:-.022em} h1.display{font-size:clamp(2.2rem,5vw,4.05rem);line-height:1.04} h2.display{font-size:clamp(1.8rem,3.5vw,2.85rem);line-height:1.08} /* Fraunces has a real italic now that the font link loads it. Italic in the serif is the brand's one flourish; it marks the phrase a section turns on and it is the cheapest "designed" signal on the page. */ .display em{font-style:italic;font-weight:500} .sec-head--mid{text-align:center} .sec-head--mid .eyebrow::before{margin-left:auto;margin-right:auto} .sec-head--mid h2{margin-left:auto;margin-right:auto} /* ---- footer ------------------------------------------------------------ */ footer{background:var(--ink-deep);color:#C5B9B3} footer .fmark img{height:20px;width:auto} /* ========================================================================== 2 - PHOTOGRAPHY -------------------------------------------------------------------------- Four treatments, and a photo has to be one of them. The rule that fixes the imbalance is the second column here: how much text a treatment can carry. .fig-plate portrait beside body copy >= 3 paragraphs .fig-strip wide band, full width a caption only .fig-inset small, inside a text column a caption only .feature photo + a statement, overlaid one statement, set large The old "100% you" section broke this: a 900x1350 portrait at half the page next to two short sentences. There is no type size that balances that, so the section is rebuilt as .feature, where the photo is the ground and the statement sits on it -- which is the layout that half-page-of-photo and half-a-paragraph-of-text actually wants to be. ========================================================================== */ /* Shared grade. Colour photography sitting on a blush ground needs its blues pulled back or it fights the page; this warms and slightly flattens every photo so the set reads as one shoot. */ .fig-plate img,.fig-strip img,.fig-inset img,.feature-bg img, .band img,.recog-shot img,.turn-shot img,.statement-shot img,.portrait img{ filter:saturate(.86) contrast(1.04) sepia(.07); } /* ---- .fig-plate : portrait beside copy --------------------------------- */ .fig-plate{position:relative;line-height:0;margin:0} .fig-plate img{width:100%;height:100%;object-fit:cover;display:block} /* A clay rule hung off the top-left corner, the same mark the cards carry. */ .fig-plate::after{content:"";position:absolute;top:0;left:0;width:44px;height:2px; background:var(--clay);z-index:2} .fig-plate figcaption{font-size:.79rem;line-height:1.5;color:var(--muted); margin-top:12px;max-width:34ch} /* ---- .fig-strip : a wide band, caption only ---------------------------- */ /* Full page width, cropped to a cinematic ratio. A landscape photograph shown whole inside an 820px column was the safe choice and it read as a slide in a deck; taking it to the edge is what makes it read as art direction. */ .fig-strip{padding:0;position:relative;line-height:0} .fig-strip img{width:100%;height:clamp(300px,42vw,520px);object-fit:cover; object-position:center 38%;display:block} .fig-strip figcaption{ position:absolute;left:0;right:0;bottom:0;padding:clamp(26px,4vw,52px) 28px; background:linear-gradient(to top,rgba(3,22,38,.86) 0%,rgba(3,22,38,.42) 52%,transparent 100%); font-family:var(--serif);font-style:italic;font-weight:400; font-size:clamp(1.15rem,2.2vw,1.75rem);line-height:1.34;color:#F6F1EE; letter-spacing:-.008em; } .fig-strip figcaption span{display:block;max-width:34ch;margin:0 auto;text-align:center} /* ---- .fig-inset : small, inside a column ------------------------------- */ .fig-inset{margin:clamp(26px,3vw,38px) 0;line-height:0} .fig-inset img{width:100%;height:auto;display:block} .fig-inset figcaption{font-size:.79rem;color:var(--muted);margin-top:11px;line-height:1.5} /* ---- .feature : the photo IS the section ------------------------------- */ /* The fix for the dancing-photo imbalance. The photograph becomes the ground, darkened, and the statement is set over it at display size. The statement gets the room it needs to hold its own against a full-bleed image, and the photo stops being a thing parked next to two sentences. */ .feature{position:relative;padding:0;background:var(--ink-deep);overflow:hidden} /* The photograph is a 2:3 portrait. Stretched across the whole band it crops to a 20%-tall slice of itself, which on this frame was a brick wall with an arm in it -- the two people the picture is of were outside the crop. So on desktop the image holds the right half only: a tall box close to its own ratio, where the crop keeps the subjects. The type still sits on it, because the scrim carries across the full width. */ .feature-bg{position:absolute;inset:0 0 0 auto;width:56%;line-height:0} .feature-bg img{width:100%;height:100%;object-fit:cover;object-position:52% 24%} /* Two scrims. The first fades the picture into the ink ground from the left so there is no hard edge where the image starts; the second sits the whole frame down a stop so white type holds at any crop. */ .feature-bg::after{content:"";position:absolute;inset:0; background: linear-gradient(to right,var(--ink-deep) 0%,rgba(3,22,38,.92) 18%,rgba(3,22,38,.55) 46%,rgba(3,22,38,.3) 100%), linear-gradient(to bottom,rgba(3,22,38,.26),rgba(3,22,38,.5)); } /* padding-block, NOT the shorthand. `.feature-inner` also carries `.wrap`, and `padding: 0` was silently wiping the wrap's 28px side gutter -- so on every viewport at or below 1180px, which is every phone and most laptops, the statement sat flush against the left edge of the screen. Above 1180px the auto margins hid it, which is why it looked fine on a big monitor and wrong everywhere else. */ .feature-inner{position:relative;z-index:1; padding-top:clamp(56px,7vw,104px);padding-bottom:clamp(56px,7vw,104px); display:grid;grid-template-columns:minmax(0,calc(54% - 20px));} .feature .eyebrow{color:var(--brass-light)} .feature-lead{font-family:var(--serif);font-weight:500; font-size:clamp(2rem,4.6vw,3.55rem);line-height:1.06;letter-spacing:-.025em; color:#F7F2EF;margin:20px 0 0;text-wrap:balance} .feature-lead em{font-style:italic;color:var(--brass-light);font-weight:400} .feature-sub{margin-top:26px;max-width:42ch; font-size:clamp(1.02rem,1.4vw,1.16rem);line-height:1.62;color:#CDC2BC} /* The fraction, set as a mark rather than a sentence. An oversized numeral in brass is the one place on the page where a number is allowed to be big. */ .feature-fig{display:flex;align-items:baseline;gap:16px;margin-top:38px; padding-top:28px;border-top:1px solid rgba(242,232,228,.2)} .feature-fig b{font-family:var(--serif);font-weight:500;font-style:italic; font-size:clamp(2.6rem,5.4vw,4.1rem);line-height:.86;color:var(--brass-light); letter-spacing:-.03em} .feature-fig span{font-size:.86rem;line-height:1.5;color:#B8ACA6;max-width:24ch; text-transform:uppercase;letter-spacing:.14em;font-weight:600} @media(max-width:820px){ /* On a phone the band is taller than it is wide, so the portrait can go back to full bleed behind the type -- the crop is close to the photograph's own ratio and nothing is lost. The scrim turns vertical to match. */ /* Same fix on the stacked layout, plus a wider gutter than the page default: display type on a photograph needs more air at the edge than body copy on a flat ground does. */ .feature-inner{grid-template-columns:1fr; padding-top:clamp(48px,10vw,76px);padding-bottom:clamp(48px,10vw,76px); padding-left:26px;padding-right:26px} .feature-bg{inset:0;width:100%} .feature-bg img{object-position:52% 18%} .feature-bg::after{background:linear-gradient(to bottom,rgba(3,22,38,.5) 0%,rgba(3,22,38,.86) 40%,rgba(3,22,38,.95) 100%)} } /* ========================================================================== 3 - DEVICES ========================================================================== */ /* ---- the signature ----------------------------------------------------- */ /* Joey's actual signature, supplied as artwork. It is used as a MASK rather than an image so it takes the colour of whatever it sits on -- ink on the blush bands, blush on the dark ones -- from one file. */ .jk-sig{display:block;width:clamp(150px,17vw,208px);height:clamp(40px,4.6vw,56px); background-color:currentColor; -webkit-mask:url(jk-signature.png) left center/contain no-repeat; mask:url(jk-signature.png) left center/contain no-repeat; color:var(--ink-deep)} .on-dark .jk-sig,.feature .jk-sig{color:var(--blush)} .jk-sig-row{display:flex;align-items:center;gap:18px;margin-top:34px; padding-top:26px;border-top:1px solid var(--rule)} .on-dark .jk-sig-row{border-top-color:rgba(242,232,228,.18)} .jk-sig-row .sig-who{font-size:.74rem;letter-spacing:.18em;text-transform:uppercase; font-weight:700;color:var(--muted);line-height:1.5} /* The old text sign-off is replaced by the artwork wherever it appears. */ .signoff{font-family:var(--sans)} /* ---- oversized numerals ------------------------------------------------ */ /* The promise and timeline lists counted 01..04 in 0.72rem mono, which reads as a footnote marker. Set in the serif at display size, in clay, the numbers become the thing that structures the section. */ .promise .n,.tl .tl-d,.mech-k,.fstep-n{ font-family:var(--serif);font-weight:500;font-style:italic; letter-spacing:-.02em;color:var(--clay);text-transform:none; } .promise .n{font-size:clamp(1.9rem,3vw,2.5rem);line-height:.9;padding-top:2px} .mech-k{font-size:1.9rem;line-height:.9;margin-bottom:14px;display:block} /* Kate, 29 Sep: the three recognition cards are not a progression, so they carry a short heading in the numeral's place rather than 01/02/03. */ .mech-h{font-family:var(--serif);font-weight:500;font-style:italic;letter-spacing:-.01em; color:var(--clay);font-size:clamp(1.25rem,1.8vw,1.45rem);line-height:1.15;margin:0 0 12px} .tl .tl-d{font-size:clamp(1.7rem,2.6vw,2.2rem);line-height:.9} .promise{gap:0 22px;padding:clamp(24px,2.6vw,32px)} .promise h3{font-family:var(--sans);font-size:1.02rem;font-weight:700;color:var(--ink-deep)} /* ---- the chapter cards ------------------------------------------------- */ /* Replaces the leader-dot contents list. That list was accurate and dead: a reader scrolled fourteen rows of titles and learned nothing they wanted. These carry Joey's own opening line per chapter, which is the part that sells, and three columns turns the whole section into five rows. Grouped by the book's four movements, marked only by the tab colour on each card -- you, the relationship, the other person, making it hold. Enough to feel structured, not so much that it needs a key. */ .chapters{display:grid;grid-template-columns:repeat(3,minmax(0,1fr)); gap:clamp(12px,1.4vw,18px);margin-top:clamp(26px,3vw,38px)} .chap{background:var(--white);border:1px solid var(--rule);position:relative; padding:clamp(20px,2.2vw,26px);display:flex;flex-direction:column; transition:border-color .35s var(--ease),transform .35s var(--ease)} .chap::before{content:"";position:absolute;top:0;left:0;width:30px;height:2px; background:var(--clay)} .chap--rel::before{background:var(--blue-soft)} .chap--them::before{background:var(--blue-navy)} .chap--stick::before{background:var(--muted-mark)} .chap:hover{border-color:var(--clay);transform:translateY(-2px)} .chap-n{font-family:var(--serif);font-style:italic;font-weight:500; font-size:1.16rem;line-height:1;color:var(--clay);display:block;margin-bottom:12px} .chap h4{font-family:var(--sans);font-size:.94rem;font-weight:700;line-height:1.3; color:var(--ink-deep);margin-bottom:9px;letter-spacing:-.005em} /* Joey's line is the reason the card exists, so it is set in the serif and it is the thing the eye lands on after the title. */ .chap p{font-family:var(--serif);font-style:italic;font-weight:400; font-size:.96rem;line-height:1.42;color:var(--grey);letter-spacing:-.005em; flex:1} .chap-p{margin-top:16px;padding-top:12px;border-top:1px solid var(--rule); font-size:.62rem;letter-spacing:.16em;text-transform:uppercase; font-weight:700;color:var(--muted)} .toc-sub{max-width:62ch;margin-top:12px;font-size:.98rem;line-height:1.6;color:var(--grey)} @media(max-width:900px){.chapters{grid-template-columns:repeat(2,minmax(0,1fr))}} @media(max-width:560px){ .chapters{grid-template-columns:1fr;gap:10px} .chap{padding:18px 20px} .chap p{font-size:.92rem} } /* ---- pull quote -------------------------------------------------------- */ /* One long italic serif line, hung on a clay rule, inside a body column. Used once per page at most: it is the thing the section is about, lifted out. */ .pullq{margin:clamp(30px,3.6vw,46px) 0;padding-left:clamp(20px,2.6vw,32px); border-left:2px solid var(--clay); font-family:var(--serif);font-style:italic;font-weight:400; font-size:clamp(1.24rem,2.2vw,1.72rem);line-height:1.36; letter-spacing:-.012em;color:var(--ink-deep);max-width:30ch} .on-dark .pullq{color:#F2EAE6;border-left-color:var(--brass)} /* ---- stat band --------------------------------------------------------- */ /* Replaces the four-cell strip with a hairline-ruled row. Serif figures, clay labels, no boxes -- the boxes were what made it look like a dashboard. */ .facts{background:transparent;gap:0;border-top:1px solid rgba(242,232,228,.2)} .fact{border-right:1px solid rgba(242,232,228,.2);padding:26px 18px;text-align:left} .fact:last-child{border-right:0} .fact .fv{font-family:var(--serif);font-weight:500;color:#F7F2EF; font-size:clamp(1.6rem,3.1vw,2.3rem);letter-spacing:-.02em} .fact .fl{font-family:var(--sans);font-size:.66rem;letter-spacing:.2em; text-transform:uppercase;font-weight:700;color:var(--brass-light);margin-top:10px} /* The same band, on a light ground. */ .facts--light{border-top-color:var(--rule)} .facts--light .fact{border-right-color:var(--rule)} .facts--light .fv{color:var(--ink-deep)} .facts--light .fl{color:var(--clay)} /* ---- proof row (hero) --------------------------------------------------- */ .proofrow{font-size:.74rem;letter-spacing:.1em;text-transform:uppercase; font-weight:600;color:var(--muted);gap:8px 20px} .proofrow strong{color:var(--ink-deep);font-weight:800} .proofrow .sep{background:var(--rule);height:12px} /* ---- testimonials ------------------------------------------------------ */ /* The quotes were the page's weakest surface: three equal grey boxes. Set in the serif at reading size, on white, with the name given a clay rule and a domain label, they become the proof they are meant to be. */ .tstm{background:var(--white);border:1px solid var(--rule); padding:clamp(26px,3vw,36px);position:relative;display:flex;flex-direction:column} .tstm::before{content:"";position:absolute;top:0;left:0;width:34px;height:2px;background:var(--clay)} .tstm-q{font-family:var(--serif);font-size:3.6rem;line-height:.7;color:var(--blush-deep); margin-bottom:8px} .tstm blockquote{font-family:var(--serif);font-weight:400; font-size:clamp(1.04rem,1.5vw,1.16rem);line-height:1.52;color:var(--ink-deep); letter-spacing:-.005em;flex:1} .tstm-who{margin-top:24px;padding-top:18px;border-top:1px solid var(--rule); display:flex;flex-direction:column;gap:5px} .tstm-nm{font-weight:700;font-size:.9rem;color:var(--ink-deep)} .tstm-dom{font-size:.68rem;letter-spacing:.18em;text-transform:uppercase; font-weight:700;color:var(--clay)} /* ---- sticky order bar --------------------------------------------------- */ /* Standard on every book funnel that converts, and absent here. It appears once the hero CTA has scrolled away, carries the offer and the price, and never covers the footer. Hidden for anyone who has asked for reduced motion to the extent of the slide -- it still appears, it just does not animate in. */ .orderbar{ position:fixed;left:0;right:0;bottom:0;z-index:60; background:rgba(3,22,38,.97);color:#F2E8E4; border-top:1px solid rgba(242,232,228,.16); transform:translateY(102%);transition:transform .5s var(--ease); padding:12px 0; } .orderbar[data-show="1"]{transform:none} .orderbar .wrap{display:flex;align-items:center;gap:16px 24px;flex-wrap:wrap; justify-content:space-between} .ob-l{display:flex;align-items:center;gap:14px;min-width:0} .ob-cover{height:52px;width:auto;display:block; filter:drop-shadow(0 6px 14px rgba(0,0,0,.5))} .ob-t{font-family:var(--serif);font-weight:500;font-size:1.02rem;line-height:1.2; color:#F7F2EF;letter-spacing:-.01em} .ob-s{font-size:.72rem;letter-spacing:.12em;text-transform:uppercase; font-weight:600;color:#A99D97;margin-top:5px} .orderbar .btn{background:var(--blush);color:var(--ink-deep);white-space:nowrap} .orderbar .btn:hover{background:var(--white);color:var(--ink-deep)} @media(max-width:620px){ .orderbar{padding:9px 0} .orderbar .wrap{gap:10px 12px;flex-wrap:nowrap;padding:0 16px} .ob-cover{height:40px} /* The title has to hold one line next to a button on a 375px bar, so it truncates rather than wrapping the bar to double height. */ .ob-t{font-size:.82rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ob-l{flex:1 1 auto;min-width:0} .ob-l>div{min-width:0} .ob-s{display:block;font-size:.6rem;letter-spacing:.08em;margin-top:2px; white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .orderbar .btn{padding:12px 14px;font-size:.66rem;flex:0 0 auto} } @media(prefers-reduced-motion:reduce){.orderbar{transition:none}} /* ---- guarantee seal ----------------------------------------------------- */ /* The refund promise had been a paragraph in a box. Given a mark, it reads as a guarantee. Drawn in CSS, not an image: nothing to go stale. */ .seal{display:grid;grid-template-columns:auto 1fr;gap:0 22px;align-items:start; background:var(--white);border:1px solid var(--rule); padding:clamp(24px,3vw,34px);position:relative;max-width:64ch;margin:0 auto} .seal::before{content:"";position:absolute;top:0;left:0;width:34px;height:2px;background:var(--brass)} .seal-mark{width:74px;height:74px;border:1px solid var(--brass);border-radius:50%; display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;gap:1px;flex:0 0 74px} .seal-mark b{font-family:var(--serif);font-style:italic;font-weight:500; font-size:1.44rem;line-height:.9;color:var(--brass)} .seal-mark span{font-size:.5rem;letter-spacing:.16em;text-transform:uppercase; font-weight:700;color:var(--clay)} .seal-b h3{font-family:var(--serif);font-weight:600;font-size:1.22rem; color:var(--ink-deep);margin-bottom:10px;letter-spacing:-.01em} .seal-b p{font-size:.95rem;line-height:1.62;color:var(--grey)} @media(max-width:560px){.seal{grid-template-columns:1fr;gap:18px}} /* ========================================================================== 4 - RHYTHM ========================================================================== */ /* A dark band butting a blush band needs no rule between them; a white band between two blush ones does. This removes the doubled borders that were drawing a line across the page every 600px. */ .on-dark+.on-white,.on-white+.on-dark{border-top:0} .on-dark+.on-ivory,.on-ivory+.on-dark{border-top:0} .feature+.on-white,.on-white+.feature{border-top:0} /* Sections carrying a single idea get air; sections carrying a list get less, so the page breathes unevenly on purpose. Scaled down 29 Sep (Nicole: "too much padding in between the sections"). The old scale was set when every band was a short prose column; the pages have since gained cards, grids and photo pairs that bring their own internal air, so the outer padding was stacking on inner padding. About a third comes off every seam, at every width. */ section{padding:clamp(44px,5vw,76px) 0} .sec-tight{padding:clamp(28px,3.4vw,48px) 0} .sec-head{margin-bottom:clamp(22px,2.8vw,38px)} /* Room for the sticky order bar, so the last CTA is never sitting under it. */ body.has-orderbar footer{padding-bottom:clamp(86px,9vw,104px)} /* ========================================================================== 5 - PROSE -------------------------------------------------------------------------- The global reset zeroes every margin, and the funnel restored paragraph spacing selector by selector -- so any section written as plain

s inside .narrow ran its paragraphs together. Restored once, here, for the body columns that carry prose. ========================================================================== */ /* :not([class]) on purpose. These rules are for PLAIN prose paragraphs only -- a

,

or

has its own size and colour, and a bare element selector here would win on specificity and quietly flatten all of them back to body copy. */ .narrow>p:not([class]),.wrap>p:not([class]),.author-body p,.seal-b p,.mirror p,.turn p{max-width:66ch} .narrow>p+p,.wrap>p+p,.author-body p+p,.turn p+p,.mirror p+p{margin-top:1.05em} .narrow>p:not([class]),.wrap>p:not([class]){ font-size:clamp(1rem,1.15vw,1.09rem);line-height:1.72;color:var(--grey)} .narrow>p strong,.wrap>p strong{color:var(--ink-deep);font-weight:600} .on-dark .narrow>p:not([class]),.on-dark .wrap>p:not([class]){color:#CBBFB9} /* A lede that opens a section, one size up from body and in the ink colour. */ .sec-lede{font-size:clamp(1.1rem,1.6vw,1.3rem);line-height:1.56;color:var(--ink-deep); max-width:56ch;font-weight:400} /* ========================================================================== 6 - LANDING COMPONENTS ========================================================================== */ /* ---- hero -------------------------------------------------------------- */ .hero-ra{background:linear-gradient(170deg,var(--blush) 0%,var(--blush) 52%,var(--blush-deep) 100%)} /* The two decorative circles were drawn in the old accent and read as a stray UI element. Softened to a warm tint, they behave as paper texture. */ .hero-ra::before{background:radial-gradient(circle,rgba(115,81,61,.07) 0%,transparent 66%)!important} .hero-ra::after{background:radial-gradient(circle,rgba(115,81,61,.05) 0%,transparent 64%)!important} /* Proof above the headline. Small, tracked, ruled off -- it sets the register before the argument starts. */ .hero-flag{display:flex;align-items:center;gap:12px;flex-wrap:wrap; font-size:.7rem;letter-spacing:.2em;text-transform:uppercase;font-weight:700; color:var(--clay);margin-bottom:24px} .hero-flag i{width:16px;height:1px;background:var(--clay);opacity:.5;flex:0 0 16px} .hero h1{margin:0 0 24px} .hero .lede{font-size:clamp(1.06rem,1.45vw,1.2rem);color:var(--grey);max-width:50ch;margin-bottom:34px} /* The marker highlight is gone. It was borrowed from the reference funnels, where a hand-drawn bar behind a phrase reads as emphasis -- but under a descender-heavy word set in a high-contrast serif it just read as a stray underline sitting on the baseline, which is what it looked like. The brand already has a better tool for exactly this job: Fraunces' italic, which is the one flourish the Joey Klein identity leans on. The hero now marks its phrase with `` and .display em picks it up. Nothing replaces .hl -- the device is retired rather than restyled, so it cannot come back by accident. The two colour rules for .hl in ra-components.css are now unused; they are left alone because that file is shared and they cost nothing. */ /* ---- cover + seal ------------------------------------------------------ */ .cover-lockup{position:relative;display:block} .book-shot{filter:drop-shadow(0 30px 46px rgba(52,31,20,.26)) drop-shadow(0 6px 14px rgba(52,31,20,.18))} /* The seal overlaps the cover's top-right corner, rotated a few degrees. It carries the offer, not a claim: nothing on it needs a source. */ .cover-seal{ position:absolute;top:2%;right:-3%;z-index:2; width:clamp(94px,9.6vw,124px);aspect-ratio:1;border-radius:50%; background:var(--ink-deep);color:var(--blush); display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;gap:2px;transform:rotate(9deg); box-shadow:0 14px 30px rgba(52,31,20,.3); border:1px solid rgba(242,232,228,.28);outline:1px solid var(--brass);outline-offset:-7px; } .cover-seal b{font-family:var(--serif);font-weight:600;font-style:italic; font-size:clamp(1.3rem,2.3vw,1.72rem);line-height:1;color:var(--brass-light);letter-spacing:-.02em} .cover-seal .cs-k,.cover-seal .cs-s{font-size:.5rem;letter-spacing:.16em; text-transform:uppercase;font-weight:700;line-height:1.3} .cover-seal .cs-k{color:#A99D97} .cover-seal .cs-s{color:var(--blush);max-width:11ch} @media(max-width:820px){.cover-seal{width:84px;right:0;top:-4%}} /* ---- logo strip -------------------------------------------------------- */ .logo-eyebrow{font-family:var(--sans);font-size:.66rem;letter-spacing:.24em; font-weight:700;color:var(--clay)} /* The supplied strip ships in IMS navy, which put an Inner Matrix blue back on the page in the one place it is least wanted. Taken to flat warm grey it does the reassurance job without reintroducing the palette. */ .logo-strip{filter:grayscale(1) brightness(.62) sepia(.22);opacity:.6;max-width:940px} /* ---- recognition / mechanism ------------------------------------------- */ .recog-h{max-width:22ch} /* Keep Joey's full head in the crop, including the stacked landscape frame. */ .recog-shot img{object-position:center top} .mech{background:var(--rule)} .mech-c{padding:clamp(26px,2.8vw,34px)} .mech-c p{color:var(--grey)} .rings-cap{font-family:var(--serif);font-style:italic;font-size:1.06rem;color:var(--ink-deep)} .rings-cap em{font-style:normal;font-weight:600;color:var(--clay)} .r-lbl{font-family:'Inter',system-ui,sans-serif;font-weight:700;letter-spacing:1.6px} /* ---- domains ----------------------------------------------------------- */ .domain h3{font-family:var(--sans);font-size:.68rem;letter-spacing:.2em; font-weight:800;color:var(--clay);display:flex;align-items:center;gap:10px} .d-ico{width:19px;height:19px;flex:0 0 19px;color:var(--clay)} .d-want{background:var(--blush-deep);border-color:var(--rule)} .want-k{font-family:var(--sans);font-size:.62rem;letter-spacing:.18em; font-weight:800;color:var(--blue-navy)} .want-k::before{background:var(--blue);box-shadow:none;width:5px;height:5px} .domain .want{font-family:var(--serif);font-size:1.08rem;line-height:1.42; color:var(--ink-deep);letter-spacing:-.008em} /* ---- offer band -------------------------------------------------------- */ .offer-grid{display:grid;grid-template-columns:.46fr .54fr; gap:clamp(28px,4vw,64px);align-items:center} .offer-shot img{aspect-ratio:1/1;object-position:center 46%} .offer-body h2{margin:14px 0 20px} .offer-body .btn{margin-top:30px} /* Ticks as a brass glyph and a bold lead-in, not a bullet list. */ .tick{list-style:none;margin-top:24px;display:grid;gap:13px} .tick li{position:relative;padding-left:32px;font-size:.98rem;line-height:1.6;color:var(--grey)} .tick li b{color:var(--ink-deep);font-weight:700} .tick li::before{content:"";position:absolute;left:0;top:.36em;width:15px;height:8px; border-left:2px solid var(--brass);border-bottom:2px solid var(--brass); transform:rotate(-45deg)} @media(max-width:860px){.offer-grid{grid-template-columns:1fr} .offer-shot img{aspect-ratio:16/10}} /* ---- promises, as numbered chips --------------------------------------- */ .promises--chip .promise{grid-template-columns:auto 1fr;gap:0 20px;align-items:start} .promises--chip .n{ font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.16rem; width:42px;height:42px;flex:0 0 42px;border:1px solid var(--clay);border-radius:50%; display:flex;align-items:center;justify-content:center;color:var(--clay); padding-top:0;line-height:1} .promise p{color:var(--grey)} /* ---- holds ------------------------------------------------------------- */ /* Review-page furniture: a thing we have deliberately not built, said out loud, so nobody mistakes a gap for an oversight. */ .hold{margin-top:clamp(26px,3vw,36px);padding:18px 22px; background:var(--blush-deep);border-left:2px solid var(--brass); font-size:.88rem;line-height:1.6;color:var(--grey);max-width:74ch} .hold b{color:var(--ink-deep);font-weight:700} .on-dark .hold{background:rgba(242,232,228,.07);color:#C7BBB5} .on-dark .hold b{color:#F2E8E4} /* ---- testimonials ------------------------------------------------------ */ .tstm-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:clamp(14px,1.6vw,20px)} @media(max-width:900px){.tstm-grid{grid-template-columns:1fr}} .cap{font-family:var(--sans);font-size:.78rem;letter-spacing:0;text-transform:none; color:var(--muted);max-width:68ch;margin-left:auto;margin-right:auto;line-height:1.6} /* ---- author ------------------------------------------------------------ */ .portrait{border:0} .portrait::after{display:none} .author-body p{color:#CBBFB9} .author-grid{grid-template-columns:.4fr .6fr;align-items:center} /* ---- timeline ---------------------------------------------------------- */ .tl-w{font-family:var(--sans);font-size:.64rem;letter-spacing:.18em; text-transform:uppercase;font-weight:800;color:var(--clay)} .tl h3{font-family:var(--sans);font-weight:700;color:var(--ink-deep)} /* ---- faq --------------------------------------------------------------- */ .faq summary{font-family:var(--sans);font-weight:600;color:var(--ink-deep)} .faq details{border-bottom:1px solid var(--rule)} /* ---- close ------------------------------------------------------------- */ .close-box .btn{margin-top:6px} .close-box+.seal{margin-top:clamp(36px,4vw,56px)} /* ---- the invitation panel ---------------------------------------------- */ /* Joey's note is the longest single piece of first-person copy on the page, so it takes the wider column; the photograph beside it is company, not the subject. The old split gave them near-equal width and the note ended up in a 40-character measure. */ /* Scoped to the two-column width. Unscoped, this rule sat after the stacking media query in ra-components.css and won on source order, which left the photo in a 0.82fr track on a phone -- and, because .fig-plate stretches its image to the track height, blew the page's scroll width out to 1581px. */ @media(min-width:761px){.turn-grid{grid-template-columns:1.18fr .82fr}} /* A stretched .fig-plate must never exceed its own column. */ .fig-plate{max-width:100%;overflow:hidden} .fig-plate img{max-width:100%} .turn{padding:clamp(28px,3.2vw,44px)} .turn p{max-width:56ch} /* The signature and its caption sit side by side, and the caption needs room to set two lines rather than four. */ .jk-sig-row{align-items:flex-end;gap:22px;flex-wrap:wrap} .jk-sig-row .sig-who{font-size:.68rem;letter-spacing:.16em;line-height:1.7; white-space:nowrap} @media(max-width:560px){.jk-sig-row .sig-who{white-space:normal}} /* ---- mark-only strip (the pages past checkout) ------------------------- */ .markbar{background:var(--white);border-bottom:1px solid var(--rule)} .markbar .wrap{display:flex;align-items:center;min-height:62px} .markbar .jk-lockup{line-height:0} /* ========================================================================== 7 - THE PAGES PAST THE LANDING -------------------------------------------------------------------------- Checkout, the upgrade, the confirmation and the two booking pages were still running the Inner Matrix furniture the landing had already been lifted off: the navy progress rail, the blue-accented forms, a mono order summary. The brand does not survive a reader crossing from a Joey Klein page onto an Inner Matrix one halfway through paying. ========================================================================== */ /* ---- the receipt bar --------------------------------------------------- */ .bar{background:var(--ink-deep);color:#D8CCC6} .bar .dot{background:var(--brass-light);box-shadow:none;color:var(--brass-light)} /* ---- forms ------------------------------------------------------------- */ label{font-family:var(--sans);font-size:.66rem;letter-spacing:.18em;font-weight:800;color:var(--clay)} input,select{border-color:var(--rule);background:var(--white);font-family:var(--sans)} input:focus,select:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(0,61,191,.13)} .fstep-t{font-family:var(--sans);letter-spacing:.2em;color:var(--ink-deep);font-weight:800} .fstep-n{font-size:1.5rem;line-height:1} .express{background:var(--blush-tint)} .xbtn{border-color:var(--ink-deep);background:var(--ink-deep);font-family:var(--sans); letter-spacing:.06em;text-transform:uppercase;font-size:.74rem;font-weight:700} .xbtn:hover{background:var(--blue)} .addon{border-color:var(--rule);transition:border-color .3s var(--ease),background .3s var(--ease)} .addon:hover{border-color:var(--clay);background:var(--blush-tint)} .addon input{accent-color:var(--blue)} .addon .a-p{font-family:var(--serif);font-style:italic;font-size:1.02rem;color:var(--brass)} .consent input{accent-color:var(--blue)} .consent a{color:var(--blue)} .or{font-family:var(--sans);letter-spacing:.22em;font-weight:700;color:var(--muted)} .or::before,.or::after{background:var(--rule)} /* ---- order rail -------------------------------------------------------- */ .summary h3,.reviews h3{font-family:var(--sans);letter-spacing:.2em; color:var(--ink-deep);font-weight:800;font-size:.7rem} /* The book, kept on screen through the form. */ .sum-obj{display:grid;grid-template-columns:auto 1fr;gap:16px;align-items:center; padding-bottom:20px;margin-bottom:6px;border-bottom:1px solid var(--rule)} .sum-obj img{width:54px;height:auto; filter:drop-shadow(0 6px 14px rgba(52,31,20,.22))} .sum-obj b{display:block;font-family:var(--serif);font-weight:500;font-size:1.06rem; color:var(--ink-deep);letter-spacing:-.01em;line-height:1.2} .sum-obj span{display:block;font-size:.72rem;letter-spacing:.12em;text-transform:uppercase; font-weight:600;color:var(--muted);margin-top:6px} .sline .v{font-family:var(--serif);font-style:italic;font-size:1.04rem;color:var(--brass)} .stotal{color:var(--ink-deep);border-top:1px solid var(--rule);margin-top:4px} .stotal .v{font-family:var(--serif);font-style:italic;font-size:1.6rem;color:var(--brass); font-weight:500;letter-spacing:-.02em} .trust span::before{background:var(--clay)} .trust{color:var(--muted);font-size:.72rem;letter-spacing:.04em} /* ---- the guarantee card, with the same seal the landing carries --------- */ .guarantee{display:grid;grid-template-columns:auto 1fr;gap:0 18px;align-items:start} .guarantee::before{background:var(--brass)} .g-seal{grid-row:span 2;width:62px;height:62px;flex:0 0 62px;border:1px solid var(--brass); border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;gap:1px} .g-seal b{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.06rem; line-height:.9;color:var(--brass)} .g-seal span{font-size:.46rem;letter-spacing:.16em;text-transform:uppercase; font-weight:700;color:var(--clay)} .guarantee .g-t{font-family:var(--serif);font-weight:600;color:var(--ink-deep); align-self:center;margin-bottom:0} .guarantee p{grid-column:2;margin-top:10px;font-size:.9rem} /* ---- tier hero (the upgrade, the confirmation) ------------------------- */ /* Less at the bottom than the top: the hero's last line is always followed by the next band's own padding, and the two were stacking into a dead screen. */ .tier-hero{padding:clamp(36px,4.2vw,64px) 0 clamp(32px,3.8vw,56px)} .arch-line{font-family:var(--serif);font-style:italic;font-weight:400; border-left:2px solid var(--brass);color:#E6DCD7} .icard{background:rgba(242,232,228,.06);border:1px solid rgba(242,232,228,.16)} .icard .ico{color:var(--brass-light)} .icard-k{font-family:var(--sans);letter-spacing:.18em;font-weight:800;color:var(--brass-light)} .icard h3{font-family:var(--sans);font-weight:700;color:#F5EFEC} /* ---- dark-band details on the pages past checkout ---------------------- */ /* The .on-dark bloom is inset past the section edges so it never draws a seam where two dark sections meet. */ .on-dark::before{inset:-25% -15%} .decline{color:#B8ACA6;text-decoration-color:rgba(184,172,166,.4)} .decline:hover{color:#F2E8E4} .on-ivory .decline:hover,.on-white .decline:hover{color:var(--ink-deep)} /* The order ledger on the confirmation page sits on white inside a dark band; its figures take the same brass the checkout rail uses. */ .led{background:var(--white);border-color:var(--rule)} .led .v,.led strong{color:var(--brass)} /* Scheduler furniture. The calendar was the last surface running real-blue UI, which put an Inner Matrix colour back on the highest-value page. */ .cal-d[aria-pressed="true"],.cal-d.sel{background:var(--ink-deep);color:var(--blush);border-color:var(--ink-deep)} .cal-d:hover:not([disabled]){border-color:var(--clay)} .slot:hover{border-color:var(--clay)} .slot.sel{background:var(--ink-deep);color:var(--blush);border-color:var(--ink-deep)} /* ========================================================================== 8 - PHONE -------------------------------------------------------------------------- This funnel's traffic is overwhelmingly mobile, so the phone layout is not a fallback. Each rule below fixes something that was actually broken at 375px, not something that merely looked tight. ========================================================================== */ @media(max-width:640px){ /* The bar is the tightest row in the funnel: a wide-tracked lockup next to a six-word CTA. Both shrink, and under 430px the wordmark drops so the icon alone carries the brand rather than being clipped by the button. */ .mast .wrap{min-height:64px;gap:10px} .mast .btn-sm{padding:11px 14px;font-size:.66rem;letter-spacing:.06em} .jk-lockup{gap:9px} .jk-lockup .jk-ico{height:26px} .jk-lockup .jk-wm{height:14px} /* Proof label stacks rather than wrapping mid-rule. */ .hero-flag{gap:6px 10px;font-size:.62rem;letter-spacing:.16em;margin-bottom:18px} .hero-flag i{display:none} /* The seal was sitting over the cover's title. Smaller, and clear of it. */ .cover-seal{width:72px;right:-1%;top:-3%} .cover-seal b{font-size:1.18rem} .hero-ra .hero-media{max-width:230px;justify-self:center} /* Full-bleed photo bands lose most of their height on a phone or they eat two screens each. */ .fig-strip img{height:clamp(230px,62vw,300px)} .fig-strip figcaption{padding:20px 22px;font-size:1.02rem} /* The feature band's statement is the one place type can stay large. */ .feature-lead{font-size:clamp(1.7rem,8.4vw,2.4rem)} .feature-fig b{font-size:2.5rem} .feature-fig span{font-size:.72rem;letter-spacing:.12em} /* Numerals come down a step so a chip and its heading share a line. */ .promises--chip .n{width:36px;height:36px;flex:0 0 36px;font-size:1.02rem} .mech-k,.tl .tl-d{font-size:1.5rem} .seal{padding:22px} .toc-row{padding:15px 0} } @media(max-width:430px){ /* Icon only. A clipped wordmark reads as a broken page; an icon does not. */ .jk-lockup .jk-wm{display:none} } /* couple-embrace is a 2:3 portrait, not a landscape like the two frames on the landing, so the same band takes a far thinner slice of it -- thin enough that the two people in it fall outside almost every crop. This one band is given extra height, which widens the slice, and the crop is then placed on them. */ .fig-strip--tall img{height:clamp(360px,50vw,620px);object-position:center 27%} @media(max-width:640px){.fig-strip--tall img{height:clamp(300px,74vw,380px)}} /* ========================================================================== 9 - LIGHT CARDS ON DARK BANDS -------------------------------------------------------------------------- .on-dark sets a near-white text colour on the whole section, and several components are white cards that sit inside one -- the receipt on the confirmation page, the ledger, the guarantee, the booked card. Their own text was inheriting the band's colour, so on the confirmation page every line of the order receipt was rendering near-white on white: "Relationship Alchemy", "Printing & shipping", "Audiobook", "Video Training" were all invisible, and only the total (which sets its own colour) could be read. That is the receipt, on the page that confirms a payment. Fixed once, by class, rather than by patching each row: a light card resets the text colour for everything inside it. ========================================================================== */ .on-dark :is(.receipt,.led,.ledger,.summary,.guarantee,.form-card,.turn,.seal, .price-card,.booked,.cal,.mech-c,.domain,.promise,.quote,.tstm,.azn){ color:var(--ink); } .on-dark :is(.receipt,.led,.summary,.guarantee,.booked) :is(span,p,div,li,dd,dt){ color:inherit; } /* The pieces inside those cards that carry their own role colour keep it. */ .on-dark :is(.receipt,.led,.summary) :is(.v,.sline .v,.stotal .v){color:var(--brass)} .on-dark :is(.receipt,.led,.summary) :is(.d,.sline .d){color:var(--muted)} .on-dark :is(.receipt,.led,.summary) :is(h3,.stotal){color:var(--ink-deep)} /* ---- contrast corrections ---------------------------------------------- */ /* The decline on the upsell is a real link and the only way off that page without buying. It was set in the kit grey at 2.5:1. */ .on-ivory .decline,.on-white .decline{color:var(--grey); text-decoration-color:rgba(74,87,97,.45)} /* The decorative opening quote on a testimonial was so pale it read as a rendering artefact rather than a mark. */ .tstm-q{color:#DCC7BC} /* ========================================================================== 10 - CARRYING THE LANDING THROUGH THE REST OF THE FUNNEL -------------------------------------------------------------------------- The 22 September pass moved every page onto the Joey Klein palette, but only the landing got the compositional work -- the seal, the letterboxed photo band, the oversized numerals, the signature, the pull quote, the sticky bar. So the landing read as designed and the six pages behind it read as a restyle, which is exactly what a buyer feels when a funnel loses them after checkout. Nothing here is decoration for its own sake: each device is applied where the page already had the job it does. The numerals were already numbered lists; the seals were already promises in boxes; the signature goes where Joey was already speaking in the first person. ========================================================================== */ /* ---- oversized numerals, everywhere a list is counted ------------------ */ /* The landing's promise and timeline numerals were lifted to serif italic at display size. The upsell ledger and the prep lists were missed, and were still counting in an 11px tracked label -- which reads as a footnote marker rather than as structure. */ .led-n{ font-family:var(--serif);font-weight:500;font-style:italic; font-size:clamp(1.7rem,2.6vw,2.2rem);line-height:.9;letter-spacing:-.02em; color:var(--clay);text-transform:none;display:block;margin-bottom:12px; } .prep li{padding-left:64px} .prep li::before{ font-family:var(--serif);font-weight:500;font-style:italic; font-size:1.5rem;line-height:1;letter-spacing:-.02em; color:var(--clay);border:0;padding:0;background:none;top:17px; } .on-dark .prep li::before{color:var(--brass-light);background:none;border:0} .on-dark .prep li{border-bottom-color:rgba(242,232,228,.2)} .on-dark .prep h3{color:#F5EFEC} .on-dark .prep p{color:#CBBFB9} .prep h3,.led h3{font-family:var(--sans);font-weight:700;color:var(--ink-deep)} /* ---- the promise-seal, generalised ------------------------------------- */ /* .notpitch carried the funnel's second-most-important promise ("no pitch on the call") as a bare tinted paragraph, while the refund promise on the landing had been given a seal. Two promises, two different treatments, and the weaker treatment on the one the buyer is most sceptical about. Same device now, in the brass that marks every promise in this funnel. */ .notpitch{ display:grid;grid-template-columns:auto 1fr;gap:0 22px;align-items:center; background:var(--white);border:1px solid var(--rule);color:var(--ink); padding:clamp(22px,2.6vw,32px);position:relative;max-width:64ch;margin:0 auto; font-size:.95rem;line-height:1.62; } .notpitch::before{content:"";position:absolute;top:0;left:0;width:34px;height:2px;background:var(--brass)} .notpitch strong{display:block;font-family:var(--serif);font-weight:600; font-size:1.16rem;color:var(--ink-deep);margin-bottom:8px;letter-spacing:-.01em} .np-seal{width:66px;height:66px;flex:0 0 66px;border:1px solid var(--brass);border-radius:50%; display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;gap:1px} .np-seal b{font-family:var(--serif);font-style:italic;font-weight:500;font-size:1.16rem; line-height:.9;color:var(--brass)} .np-seal span{font-size:.46rem;letter-spacing:.15em;text-transform:uppercase; font-weight:700;color:var(--clay)} .notpitch>div{grid-column:2} @media(max-width:560px){.notpitch{grid-template-columns:1fr;gap:16px} .notpitch>div{grid-column:1}} /* ---- the price, given the cover seal's treatment ------------------------ */ /* The upsell's $97-from-$297 was a big number next to a struck-through one. The saving is the argument, and it was the one figure not being stated. */ .price-row{position:relative;align-items:flex-end;gap:14px} .price-now{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--brass); letter-spacing:-.03em} .price-was{color:var(--muted);font-size:1.02rem} .price-seal{ width:clamp(78px,8vw,96px);flex-shrink:0;aspect-ratio:1;border-radius:50%;margin-left:auto; background:var(--ink-deep);color:var(--blush); display:flex;flex-direction:column;align-items:center;justify-content:center; text-align:center;gap:1px;transform:rotate(-8deg); border:1px solid rgba(242,232,228,.28);outline:1px solid var(--brass);outline-offset:-6px; box-shadow:0 10px 24px rgba(52,31,20,.24); } .price-seal b{font-family:var(--serif);font-weight:600;font-style:italic; font-size:clamp(1.1rem,1.8vw,1.4rem);line-height:1.1;color:var(--brass-light);letter-spacing:-.02em} .price-seal span{font-size:.46rem;letter-spacing:.15em;text-transform:uppercase; font-weight:700;color:#A99D97} /* Keep the paid book distinct from the optional offer below it. */ .ra-purchase-confirmation .wrap{display:block;padding-top:18px;padding-bottom:18px; text-transform:none;letter-spacing:normal} .ra-purchase-confirmation strong{display:block;font-size:clamp(1.05rem,1.6vw,1.25rem);color:var(--white)} .ra-purchase-confirmation .wrap>p{margin-top:6px;font-size:.9rem;line-height:1.6;max-width:70ch;color:#EDF1F5} /* Keep the optional invitation beneath the book, alongside the receipt. */ .confirmation-hero .display{font-size:clamp(2rem,4vw,3.5rem)} .confirmation-book{display:block;width:min(100%,220px);height:auto;margin:28px auto 0; filter:drop-shadow(0 16px 20px rgba(3,22,38,.22))} .confirmation-call{padding:28px 0 0} .confirmation-call .display{font-size:clamp(1.65rem,3vw,2.4rem)} .confirmation-call .sec-head{margin-bottom:20px} @media(max-width:900px){.confirmation-book{width:170px}} /* ---- the trust line, the hero-flag's sibling ---------------------------- */ /* The landing states its credentials above the headline. The pages behind it ask for a card, an address and forty-five minutes, and stated nothing. */ .trustline{display:flex;align-items:center;gap:10px 18px;flex-wrap:wrap; font-size:.68rem;letter-spacing:.18em;text-transform:uppercase;font-weight:700; color:var(--clay);margin-top:20px} .trustline i{width:14px;height:1px;background:var(--clay);opacity:.5;flex:0 0 14px} .on-dark .trustline{color:var(--brass-light)} .on-dark .trustline i{background:var(--brass-light)} /* ---- the booked card, matched to the landing's surfaces ---------------- */ .booked::before{background:var(--clay);left:50%;transform:translateX(-50%);width:34px;right:auto} .booked .when{font-family:var(--serif);font-style:italic;font-weight:500;color:var(--ink-deep); letter-spacing:-.02em} .ics{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:18px} /* ---- the decision bar (the order bar, for a page with a choice) --------- */ /* Same component as the landing's order bar, carrying a decision rather than an offer: the price, the button, and the decline as a plain link -- because a bar that only lets you say yes is a trap, not a convenience. */ .orderbar .ob-decline{font-size:.7rem;letter-spacing:.12em;text-transform:uppercase; font-weight:600;color:#A99D97;text-decoration:underline;text-underline-offset:4px; text-decoration-color:rgba(169,157,151,.5);white-space:nowrap} .orderbar .ob-decline:hover{color:var(--blush)} .ob-right{display:flex;align-items:center;gap:18px;flex-wrap:wrap;justify-content:flex-end} @media(max-width:620px){ .ob-right{gap:10px} .orderbar .ob-decline{font-size:.6rem;letter-spacing:.06em} } /* Joey's portrait is framed head-and-shoulders with very little room above, so the band's default crop takes the top of his head off. Placed on him. */ .fig-strip img[src="joey-klein.jpg"]{object-position:center 6%} /* ---- checkout: the total on a phone ------------------------------------ */ /* Desktop already has the sticky rail beside the form, so the bar would be a second copy of a number that is on screen. Phone only. */ .orderbar--total{display:none} .ob-total{font-family:var(--serif);font-style:italic;font-weight:500; font-size:1.5rem;color:var(--brass-light);letter-spacing:-.02em;white-space:nowrap} @media(max-width:900px){.orderbar--total{display:block}} /* ---- checkout: the quote in the rail ----------------------------------- */ .tstm--rail{padding:clamp(20px,2.4vw,26px)} .tstm--rail blockquote{font-size:1rem;line-height:1.5} .tstm--rail .tstm-q{font-size:2.6rem;margin-bottom:4px} .tstm--rail .tstm-who{margin-top:18px;padding-top:14px} /* ---- light cards on dark bands, part two -------------------------------- */ /* Section 9 reset the text colour on light cards sitting inside .on-dark, but any COMPONENT with its own `.on-dark .x` rule still wins inside them on specificity. The confirmation page's "what happens next" list is a .prep inside the white .receipt inside the dark hero, so the dark-band prep colours applied and three list items rendered near-white on white. Same shape of bug as the receipt rows, so the same shape of fix: a light card wins over the band it sits in, stated once per component rather than per row. Any component given `.on-dark .x` styling in future needs a line here too -- which is the argument for keeping all of them in this one block. */ .on-dark :is(.receipt,.led,.ledger,.summary,.guarantee,.form-card,.turn,.seal, .price-card,.booked,.cal,.notpitch){ --on-light-card:1; } .on-dark :is(.receipt,.summary,.guarantee,.booked,.price-card,.turn,.notpitch) .prep h3, .on-dark :is(.receipt,.summary,.guarantee,.booked,.price-card,.turn,.notpitch) .led h3{ color:var(--ink-deep); } .on-dark :is(.receipt,.summary,.guarantee,.booked,.price-card,.turn,.notpitch) .prep p, .on-dark :is(.receipt,.summary,.guarantee,.booked,.price-card,.turn,.notpitch) .led p{ color:var(--grey); } .on-dark :is(.receipt,.summary,.guarantee,.booked,.price-card,.turn,.notpitch) .prep li::before{ color:var(--clay); } .on-dark :is(.receipt,.summary,.guarantee,.booked,.price-card,.turn,.notpitch) .prep li{ border-bottom-color:var(--rule); } /* ========================================================================== 11 - CHECKOUT AS A POPUP -------------------------------------------------------------------------- Nicole's call, 24 September: the buyer should not leave the landing page to pay. Sending them to a separate URL is a page load and a new screen at the exact moment they have decided, and the standard for this kind of funnel is an order form that opens over the page they were already reading. The popup shows the real checkout page in a frame rather than a second copy of the order form. One form, one set of totals, one script -- a duplicated form is two forms that drift. checkout.html therefore keeps working as its own URL (direct links, the review hub's preview, and anyone with JS off), and simply drops its own furniture when it is the thing inside the popup. ========================================================================== */ /* ---- embed mode: the page minus its chrome ----------------------------- */ .is-embed .demo-note, .is-embed .mast, .is-embed footer, .is-embed .orderbar{display:none!important} .is-embed body{background:var(--blush)} .is-embed section{padding:clamp(22px,3vw,34px) 0} .is-embed .wrap{padding:0 clamp(18px,3vw,30px)} /* The rail is sticky against the viewport on the full page; inside the frame the frame IS the viewport, so it can stay sticky and simply needs its offset removing now that there is no masthead above it. */ .is-embed .rail{top:14px} /* ---- the popup itself --------------------------------------------------- */ /* margin:auto centres a

in the viewport; without it the UA default pins it to the top. width/height are explicit rather than max-*, because the iframe is a flex child and a flex child cannot resolve a percentage height against a parent that is only bounded by max-height -- which is why the panel first rendered as a collapsed strip with the page showing through it. */ .order-dialog{max-width:min(1120px,95vw);width:min(1120px,95vw); height:min(92vh,960px);margin:auto;overflow:visible} .order-inner{padding:0;background:var(--blush);height:100%; overflow:hidden;display:flex;flex-direction:column; box-shadow:0 30px 80px rgba(3,22,38,.45)} .order-inner::before{display:none} .co-head{display:flex;align-items:center;justify-content:space-between;gap:16px; padding:16px clamp(18px,3vw,26px);background:var(--white); border-bottom:1px solid var(--rule);flex:0 0 auto} .co-head .jk-lockup{line-height:0} .co-head .jk-ico{height:26px;width:auto;display:block} .co-head .jk-wm{height:14px;width:auto;display:block} .co-frame{flex:1 1 auto;width:100%;border:0;display:block;min-height:0;background:var(--blush)} /* The close control. 44px, and it is the only way out other than Esc or the backdrop, so it is never subtle. */ .order-x{position:static;width:40px;height:40px;min-width:40px;border:1px solid var(--rule); background:var(--white);color:var(--ink-deep);font-size:1.3rem;flex:0 0 auto} .order-x:hover{background:var(--ink-deep);color:var(--blush);border-color:var(--ink-deep)} .order-dialog::backdrop{background:rgba(3,22,38,.74);backdrop-filter:blur(3px)} @media(max-width:900px){ .order-dialog{position:fixed;inset:auto 0;top:var(--checkout-top,0px);margin:0; max-width:100%;width:100%;height:var(--checkout-height,100dvh);max-height:var(--checkout-height,100dvh)} .co-head{padding:6px 16px} .order-inner{height:100%;box-shadow:none} } /* The page behind the popup must not scroll under it. */ body.co-open{overflow:hidden} /* ========================================================================== 12 - THE AUTHOR BLOCK, THE SECOND FEATURE, AND THE CONTENTS LIST ========================================================================== */ /* ---- the author block --------------------------------------------------- */ /* Nicole, 24 Sep: "that section has super weird padding ... it looks really bad". The cause was structural rather than a padding value: a square 1148px portrait sat in a .4fr column with align-items:center against a much taller text column, so the picture floated with dead space above and below it at every width, and the section head sat above both with its own margin on top of that. The heading has moved into the copy column and the portrait now fills its column edge to edge, so there is no gap left to tune. */ .author-sec{padding:0} .author-sec .author-grid{ display:grid;grid-template-columns:minmax(0,.42fr) minmax(0,.58fr); gap:0 clamp(32px,5vw,72px);align-items:stretch; max-width:1180px;margin:0 auto;padding:0 28px; } .author-sec .portrait{align-self:stretch;overflow:hidden;line-height:0; border:0;position:relative;min-height:100%} .author-sec .portrait img{width:100%;height:100%;object-fit:cover; object-position:50% 22%;display:block} .author-sec .author-body{padding:clamp(56px,7vw,104px) 0;align-self:center} .author-sec .author-body h2{margin:14px 0 22px} .author-sec .author-body p{color:#CBBFB9} .author-sec .author-body p+p{margin-top:1.05em} /* The figures under the bio sit on the same hairline grid as the hero's, but they are inside a text column here rather than across the page. */ .facts--author{margin-top:clamp(28px,3.4vw,40px)} .facts--author .fv{font-size:clamp(1.4rem,2.5vw,1.9rem)} .facts--author .fl{font-size:.6rem;letter-spacing:.16em} @media(max-width:860px){ .author-sec .author-grid{grid-template-columns:1fr;padding:0} .author-sec .portrait{aspect-ratio:4/3;min-height:0} .author-sec .author-body{padding:clamp(40px,8vw,64px) 28px} .facts--author{grid-template-columns:repeat(2,minmax(0,1fr))} } /* ---- the close, as the second feature band ----------------------------- */ /* couple-hiking is a 2:3 portrait and the two of them sit low and left in the frame, so the desktop crop is placed on them rather than on the sky. */ .feature--close .feature-bg img{object-position:38% 42%} .feature--close .btn{margin-top:32px} .feature--close .cta-under{margin-top:16px;color:#C0B4AE} @media(max-width:820px){ .feature--close .feature-bg img{object-position:44% 34%} } /* ---- photo-band captions ------------------------------------------------ */ /* Nicole: the words over the hand-holding photo need to be bigger. They were sized as a caption; they are doing the work of a pull quote, so they are set like one. The explicit
in the markup controls the break, which is what stops a three-word orphan line like "be close to again". */ .fig-strip figcaption{ font-size:clamp(1.42rem,3vw,2.5rem);line-height:1.22;letter-spacing:-.018em; padding:clamp(30px,5vw,64px) 28px; } /* Each line is its own block so it can be balanced independently; without this the second line wraps on its own and drops a one-word orphan ("again.") onto a third line, which is the exact thing that looked wrong. */ .fig-strip figcaption span{max-width:26ch;text-wrap:balance} .fig-strip figcaption br{content:"";display:block;line-height:.1} @media(max-width:640px){ .fig-strip figcaption{font-size:clamp(1.18rem,5.6vw,1.5rem);padding:22px} .fig-strip figcaption span{max-width:24ch} } /* ---- the contents list -------------------------------------------------- */ .toc-h{font-family:var(--serif);font-weight:600;font-size:clamp(1.14rem,2vw,1.42rem); letter-spacing:-.012em;color:var(--ink-deep); margin-top:clamp(36px,4.4vw,58px)} .toc{margin-top:18px} .toc-row:last-child{border-bottom:0} .toc-n{text-align:right} /* ========================================================================== 13 - OFF THE BLUSH GROUND -------------------------------------------------------------------------- Nicole, 24 Sep: "I'm not sure where this pink came from ... he uses a lot more blue and gray and brown and white, less of this pink." She is right and it was ours: an earlier pass took the kit's beige -- which is the LIGHT version of his logo, for dark backgrounds -- and made it the page ground. His speaker sheet is the evidence. Sampled across its three pages it is 23-45% pure white and 13-23% one deep blue, with greys carrying the secondary surfaces and no pink anywhere. The tokens in ra.css now match that. This section fixes everything that was tuned FOR the warm ground and would otherwise look wrong on a white one. ========================================================================== */ /* ---- the alternating bands --------------------------------------------- */ /* .on-ivory was the blush band and is now the cool grey one. .on-white keeps its rules only where it needs to separate from a grey band. */ .on-ivory{background:var(--ground-alt)} .on-white{background:var(--white);border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} .on-ivory+.on-white,.on-white+.on-ivory{border-top:0} .on-blush-deep{background:var(--ground-alt2)} /* ---- the hero ----------------------------------------------------------- */ /* White at the top falling to the faintest blue, instead of blush to deeper blush. The decorative circles were warm; they are blue now, and quieter. */ .hero-ra{background:linear-gradient(170deg,var(--white) 0%,var(--white) 46%,var(--ground-blue) 100%)} .hero-ra::before{background:radial-gradient(circle,rgba(0,61,191,.055) 0%,transparent 66%)!important} .hero-ra::after{background:radial-gradient(circle,rgba(0,61,191,.04) 0%,transparent 64%)!important} /* ---- photography -------------------------------------------------------- */ /* The sepia was added to sit colour photography on a blush ground. On white it reads as a filter rather than as a grade, so it comes off; the slight desaturation stays, which is what keeps the set looking like one shoot. */ .fig-plate img,.fig-strip img,.fig-inset img,.feature-bg img, .band img,.recog-shot img,.turn-shot img,.statement-shot img,.portrait img{ filter:saturate(.9) contrast(1.03); } /* ---- the dark bands ----------------------------------------------------- */ /* The bloom was warm brown plus blue. It is blue-led now, with brown only as a trace, which matches the way his own collateral uses the two. */ .on-dark::before{ background: radial-gradient(54% 60% at 20% 6%,rgba(0,61,191,.34) 0%,transparent 64%), radial-gradient(46% 54% at 90% 96%,rgba(115,81,61,.2) 0%,transparent 66%); } .on-dark{color:#E8EDF2} .on-dark .lede{color:#B9C4CE} .on-dark .narrow>p:not([class]),.on-dark .wrap>p:not([class]){color:#B9C4CE} .on-dark .eyebrow{color:var(--clay-light)} .on-dark .sec-head .eyebrow::before{background:var(--clay-light)} .on-dark .btn{background:var(--white);color:var(--ink-deep)} .on-dark .cta-under{color:#A9B4BE} .author-sec .author-body p{color:#B9C4CE} /* Scoped to the dark grounds. Unscoped, these made every stat figure on the page near-white -- which is right on ink and invisible on the white price card, where the upsell's stat band lives. Same trap as the receipt rows: a colour meant for one surface applied to all of them. */ .on-dark .facts,.feature .facts{border-top-color:rgba(255,255,255,.2)} .on-dark .fact,.feature .fact{border-right-color:rgba(255,255,255,.2)} .on-dark .fact .fv,.feature .fact .fv{color:#F2F5F8} .on-dark .fact .fl,.feature .fact .fl{color:var(--clay-light)} /* The light variant, stated after, so it wins on any pale ground. */ .facts--light{border-top-color:var(--rule)} .facts--light .fact{border-right-color:var(--rule)} .facts--light .fact .fv{color:var(--ink-deep)} .facts--light .fact .fl{color:var(--clay)} .trustline{color:var(--clay)} .on-dark .trustline{color:var(--clay-light)} .on-dark .trustline i{background:var(--clay-light)} .on-dark .hold{background:rgba(255,255,255,.07);color:#B9C4CE} .on-dark .hold b{color:#F2F5F8} .on-dark .jk-sig-row{border-top-color:rgba(255,255,255,.18)} .on-dark .prep li{border-bottom-color:rgba(255,255,255,.2)} .on-dark .prep li::before{color:var(--clay-light)} .on-dark .prep h3{color:#F2F5F8} .on-dark .prep p{color:#B9C4CE} .arch-line{color:#DDE4EA;border-left-color:var(--clay-light)} .icard{background:rgba(255,255,255,.055);border-color:rgba(255,255,255,.16)} .icard .ico,.icard-k{color:var(--clay-light)} .icard h3{color:#F2F5F8} .decline{color:#A9B4BE;text-decoration-color:rgba(169,180,190,.4)} .decline:hover{color:#F2F5F8} .bar{background:var(--ink-deep);color:#C9D2DA} .bar .dot{background:var(--clay-light);color:var(--clay-light)} footer{background:var(--ink-deep);color:#B4BEC7} /* ---- cards and surfaces on the light bands ----------------------------- */ .d-want{background:var(--ground-alt2);border-color:var(--rule)} .express{background:var(--ground-alt)} .hold{background:var(--ground-alt2);border-left-color:var(--clay)} .tstm-q{color:var(--ground-alt2)} .toc-t b{background:var(--white)} .on-ivory .toc-t b{background:var(--ground-alt)} .logo-strip{filter:grayscale(1) brightness(.55);opacity:.55} .markbar{background:var(--white);border-bottom:1px solid var(--rule)} .prog{background:var(--ground-alt);border-bottom:1px solid var(--rule)} .prog ol{background:var(--rule)} .prog li{background:var(--ground-alt)} /* ---- beige, rationed --------------------------------------------------- */ /* Two places, both of them Joey speaking for himself: the panel with his note and signature in it, and the guarantee he is personally making. Everywhere else the warm tone is carried by the brown, not by a beige field. */ .turn{background:var(--blush);border-color:var(--rule-warm)} .turn::before{background:var(--clay)} .seal{background:var(--blush);border-color:var(--rule-warm)} .seal::before{background:var(--clay)} .seal-mark{border-color:var(--clay)} .seal-mark b{color:var(--clay)} .seal-mark span{color:var(--clay-deep)} .guarantee{background:var(--blush);border-color:var(--rule-warm)} .g-seal{border-color:var(--clay)} .g-seal b{color:var(--clay)} .g-seal span{color:var(--clay-deep)} .notpitch{background:var(--blush);border-color:var(--rule-warm)} .np-seal{border-color:var(--clay)} .np-seal b{color:var(--clay)} .np-seal span{color:var(--clay-deep)} /* ---- the seals and price marks, in brown rather than brass ------------- */ .cover-seal{background:var(--ink-deep);outline-color:var(--clay-light)} .cover-seal b{color:var(--clay-light)} .cover-seal .cs-s{color:#EDF1F5} .price-seal{background:var(--ink-deep);outline-color:var(--clay-light)} .price-seal b{color:var(--clay-light)} .price-now,.sline .v,.stotal .v,.addon .a-p,.led .v,.ob-total{color:var(--clay)} .tick li::before{border-color:var(--clay)} .feature-lead em{color:var(--clay-light)} .feature-fig b{color:var(--clay-light)} .rings-cap em{color:var(--clay)} /* ---- the order popup --------------------------------------------------- */ .order-inner{background:var(--ground-alt)} .co-frame{background:var(--ground-alt)} .is-embed body{background:var(--ground-alt)} /* ---- the last two warm surfaces ---------------------------------------- */ /* A button on a dark band was still filled with the beige. White, like the rest of them, so the beige is left doing only the two jobs it now has. */ .orderbar .btn{background:var(--white);color:var(--ink-deep)} .orderbar .btn:hover{background:var(--blue-wash);color:var(--ink-deep)} .orderbar .ob-decline:hover{color:var(--white)} /* The review banner was a pale yellow, which is a third warm tone doing a job neither the brand nor the page needs. It still has to read as "this is not the live page", so it keeps its own colour -- a blue wash, which is at least his. */ .demo-note{background:var(--ground-blue);border-bottom:1px solid var(--rule);color:var(--blue-navy)} .demo-note strong{color:var(--blue-navy);font-weight:700} /* ========================================================================== 14 - MOBILE TAP TARGETS -------------------------------------------------------------------------- Nicole asked for a pass to make sure the funnel is optimised for mobile. The gutter bug on the .feature bands is fixed above; these are the rest of what a 375px audit turned up, and all three are the same class of problem -- a control that is fine with a mouse and too small for a thumb. 44px is the floor; these were 38px, 22px and 14px. ========================================================================== */ @media(max-width:820px){ /* The scheduler's whole job on a phone is tapping a date. 38px cells with a 4px gap is a 1-in-3 mis-tap; 44 is the floor. aspect-ratio has to go with it: the cells are square, so raising the height raised the WIDTH too, and seven 44px columns plus gaps and the card's padding is wider than a 375px screen -- which is how a tap-target fix turned into a horizontal scroll. Height is set directly and the width stays on the 1fr track. */ .cal-grid{gap:4px} .cal-grid button{aspect-ratio:auto;height:44px;min-height:44px;min-width:0; font-size:.9rem;padding:0} .cal-nav button{width:44px;height:44px;min-height:44px} .slot-list button{min-height:46px} } /* The decline on the upsell was a 22px-tall text link, and it is the only way off that page without buying. Given a real hit area at every width -- a cramped opt-out is a dark pattern whether or not it was meant as one. */ .decline{display:inline-block;padding:11px 4px;min-height:44px;line-height:1.5} /* "Edit" on the confirmed shipping row was 14px tall. */ .cstep-done button{padding:11px 2px;min-height:44px;display:inline-flex;align-items:center} @media(max-width:560px){ .cstep-done{align-items:center} } /* ========================================================================== 15 - COLUMN PAIRS THAT LINE UP -------------------------------------------------------------------------- Nicole: "there's a weird amount of padding between the photo, the text, and the heading ... the text should always begin at the same height as the photo ... match perfectly at the top and the bottom." Two things were causing the gap in the recognition section, and neither was padding. The grid was `align-items:center`, so the shorter column floated with equal space above and below it. And the photograph's height came from its own `aspect-ratio:4/5` rather than from the row, so at a wide viewport it stood ~675px tall against ~430px of copy and the text sat marooned in the middle of it. She suggested changing the font size. That would line the two up at one window width and drift at every other, so instead the photo now takes its height FROM the text: the columns stretch, the figure fills its track, and the image covers it. Top and bottom match exactly at every width, with no number to keep in sync. ========================================================================== */ @media(min-width:821px){ .recog-grid{align-items:stretch} .recog-shot{align-self:stretch;height:100%} /* aspect-ratio has to go, or it keeps setting the height and the stretch does nothing. object-fit:cover takes care of the crop. */ .recog-shot img{aspect-ratio:auto;height:100%;width:100%;object-fit:cover} } @media(min-width:861px){ /* The same pair, one section down: the offer block's photograph was locked to a square and centred against its copy for the same reason. */ .offer-grid{align-items:stretch} .offer-shot{align-self:stretch;height:100%} .offer-shot img{aspect-ratio:auto;height:100%;object-position:center 46%} } /* ---- the close band, three corrections --------------------------------- */ /* Nicole, on the close: the gradient is too dark, the button does not stand out, and the photograph is one already used further up the page. The button was the actual bug. `.feature` is not `.on-dark`, so the `.on-dark .btn` rule never reached it and it fell back to the default near-black fill -- a near-black button on a near-black scrim, which is why it read as a ghost outline. It takes the brand blue here: it is his colour, and against a desaturated landscape it is the one thing on the band that cannot be mistaken for scenery. */ .feature .btn{background:var(--blue);color:var(--white)} .feature .btn:hover{background:var(--white);color:var(--ink-deep); box-shadow:0 12px 34px rgba(0,0,0,.34)} /* The scrim was carrying two stacked layers, and together they took the photograph down almost to black. One directional layer now, lighter, and it still clears 4.5:1 for the body copy over the darkest part of the image (measured, not eyeballed). */ .feature--close .feature-bg::after{ background: linear-gradient(to right,rgba(3,22,38,.9) 0%,rgba(3,22,38,.78) 30%,rgba(3,22,38,.3) 62%,rgba(3,22,38,.16) 100%), linear-gradient(to bottom,rgba(3,22,38,.12),rgba(3,22,38,.24)); } /* couple-embrace is a 2:3 portrait and the two of them sit centre-left, so the right-hand column is cropped onto them rather than onto the background. */ .feature--close .feature-bg img{object-position:46% 32%} @media(max-width:820px){ /* Stacked, the type sits over the whole frame, so the vertical scrim has to do all the work and stays heavier than the desktop one. */ .feature--close .feature-bg::after{ background:linear-gradient(to bottom,rgba(3,22,38,.58) 0%,rgba(3,22,38,.84) 42%,rgba(3,22,38,.92) 100%); } .feature--close .feature-bg img{object-position:50% 24%} } /* couple-hiking is a 2:3 portrait and the two of them sit low-left in it, so a wide band needs the extra height and the crop placed on them. */ .fig-strip img[src="couple-hiking.jpg"]{object-position:38% 46%} /* ========================================================================== 16 - ONE LIGHT TOP, ACROSS THE FUNNEL -------------------------------------------------------------------------- Nicole: the booking page "doesn't necessarily match the homepage as much ... we need that lighter theme at the top of the page across the whole funnel so that it feels cohesive." The landing opens on white falling to the faintest blue, with two soft circles behind it. Every other page opened on either a flat grey band or, on three of them, a dark one -- and a dark hero with a blue gradient is the Inner Matrix signature, which is a large part of why the upsell still read as theirs rather than his. `.page-top` is that hero treatment, lifted off `.hero-ra` so there is one definition of it. Applied to the first section of every page in the funnel. ========================================================================== */ .page-top{ position:relative;overflow:hidden;color:var(--ink); background:linear-gradient(170deg,var(--white) 0%,var(--white) 46%,var(--ground-blue) 100%); } .page-top>*{position:relative;z-index:1} .page-top::before,.page-top::after{content:"";position:absolute;border-radius:50%; pointer-events:none;z-index:0} .page-top::before{width:660px;height:660px;top:-170px;right:-130px; background:radial-gradient(circle,rgba(0,61,191,.055) 0%,transparent 66%)} .page-top::after{width:430px;height:430px;top:-55px;right:-10px; background:radial-gradient(circle,rgba(0,61,191,.04) 0%,transparent 64%)} /* A page-top that was previously .on-dark has to put its ink colours back. */ .page-top .eyebrow{color:var(--clay)} .page-top .sec-head .eyebrow::before{background:var(--clay)} .page-top h1,.page-top h2,.page-top h3{color:var(--ink-deep)} .page-top .lede,.page-top p{color:var(--grey)} .page-top .btn{background:var(--ink-deep);color:var(--white)} .page-top .btn:hover{background:var(--blue);color:var(--white)} .page-top .cta-under{color:var(--grey)} .page-top .trustline{color:var(--clay)} .page-top .trustline i{background:var(--clay)} /* The stat band under a light hero: warm rules, ink figures. */ .page-top .facts{border-top-color:var(--rule)} .page-top .fact{border-right-color:var(--rule)} .page-top .fact .fv{color:var(--ink-deep)} .page-top .fact .fl{color:var(--clay)} .page-top .arch-line{color:var(--ink-deep);border-left-color:var(--clay); background:var(--ground-alt)} .page-top .icard{background:var(--white);border-color:var(--rule)} .page-top .icard .ico,.page-top .icard-k{color:var(--clay)} .page-top .icard h3{color:var(--ink-deep)} .page-top .icard p{color:var(--grey)} .page-top .decline{color:var(--grey);text-decoration-color:rgba(74,87,97,.45)} .page-top .decline:hover{color:var(--ink-deep)} .page-top .prep li{border-bottom-color:var(--rule)} .page-top .prep li::before{color:var(--clay)} .page-top .prep h3{color:var(--ink-deep)} .page-top .prep p{color:var(--grey)} /* ========================================================================== 17 - ONE COLUMN EDGE -------------------------------------------------------------------------- Nicole, on the booked page: "the spacing is off. It's like it's not full width. Please make sure to adjust that across all the pages." Measured at 1440, the content's left edge jumped between 130px and 280px as you scrolled, because sections mixed two containers: `.wrap` at 1180 and `.narrow` at 880, each centred. Every `.narrow` section therefore read as indented and short next to its neighbours -- which is exactly what a section that is "not full width" looks like. `.narrow` now shares the outer width, so every section starts on the same line down the whole funnel. The reading measure is kept where it belongs: on the prose itself (66ch, set in section 5), not on the container. The few components that would look stretched at full width get their own cap below. ========================================================================== */ .narrow{max-width:1180px} /* Components that want a measure rather than the full column. Each is centred in it, so they stay balanced rather than drifting left. */ .faq,.prep,.tline,.rings,.seal,.notpitch,.price-card,.booked,.toc-sub{ max-width:900px;margin-left:auto;margin-right:auto; } .sec-head h2,.sec-head .lede,.sec-lede{max-width:34ch} .sec-lede,.sec-head .lede{max-width:62ch} /* A heading that is deliberately centred keeps its own centring. */ .sec-head--mid h2,.close-box h2,.recog .sec-head h2{margin-left:auto;margin-right:auto} .narrow>p:not([class]),.narrow>.pullq{margin-left:0} @media(max-width:900px){ .faq,.prep,.tline,.rings,.seal,.notpitch,.price-card,.booked{max-width:none} } /* ========================================================================== 18 - THE UPSELL, LEVELLED UP -------------------------------------------------------------------------- Nicole: the page "still feels a little bit like it's too much in the IMS branding", the photo band had "the text right over his face ... just remove that section", the testimonial placeholder should come out, and it wants one or two proper photos of Joey, built up the way the Inner Matrix book funnel's upsell page is. The IMS feeling was largely the dark hero: a blue-gradient dark band at the top of a page is their signature. It takes the funnel's light top now, like every other page. The portrait band is gone and Joey sits beside the argument in the hero instead, which is where a portrait belongs -- a caption across someone's face is not a caption. A second photograph sits with his note lower down, where he is speaking in the first person. Borrowed from the Inner Matrix upsell: a photo in the hero, a stat band under the offer, and the price argument carried by figures rather than by paragraphs. ========================================================================== */ .oto-hero{display:grid;grid-template-columns:minmax(0,1.08fr) minmax(0,.92fr); gap:clamp(26px,3.6vw,52px);align-items:stretch} .oto-hero-body h1{max-width:18ch} /* The photo takes its height FROM the text (Nicole, 29 Sep: it should match the length of the text in the hero). Same fix as the recognition pair in sections 15/20: the image is out of flow, so it can only ever be the height the copy already is -- top and bottom match at every width, and the old min-height that left the copy floating in the middle of a taller portrait is gone. The crop is placed on Joey's head and torso, not his shoes. */ .oto-hero-shot{align-self:stretch;position:relative;overflow:hidden; line-height:0;min-height:0} .oto-hero-shot img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:56% 12%;display:block} @media(max-width:860px){ .oto-hero{grid-template-columns:1fr;gap:24px} .oto-hero-shot{position:static} .oto-hero-shot img{position:static;height:auto;aspect-ratio:16/10;object-position:56% 12%} } /* Joey's note, with him next to it. Same pairing as the landing's invitation panel, so the two pages rhyme rather than each inventing a layout. */ .turn--oto{display:grid;grid-template-columns:minmax(0,.38fr) minmax(0,.62fr); gap:clamp(20px,2.6vw,34px);align-items:stretch;padding:0;overflow:hidden} .turn--oto .turn-portrait{line-height:0;overflow:hidden;height:100%} .turn--oto .turn-portrait img{width:100%;height:100%;object-fit:cover; object-position:50% 18%;display:block} .turn--oto .turn-words{padding:clamp(24px,3vw,38px);align-self:center} .turn--oto .turn-words p{max-width:52ch} @media(max-width:760px){ .turn--oto{grid-template-columns:1fr} .turn--oto .turn-portrait img{aspect-ratio:16/9} .turn--oto .turn-words{padding:24px} } /* The stat band inside the price card sits on a light ground, so it takes the light variant's rules rather than the dark band's. */ .price-card .facts--light{margin-top:clamp(24px,2.8vw,34px); margin-bottom:clamp(24px,2.8vw,34px)} /* ========================================================================== 19 - NICOLE'S REVIEW PASS ========================================================================== */ /* ---- 1. the "100% you" band: let the photograph through ---------------- */ /* The scrim was tuned when the type sat over the middle of the frame. It is in its own column now, so the picture side does not need holding down nearly this hard. */ .feature .feature-bg::after{ background: linear-gradient(to right,var(--ink-deep) 0%,rgba(3,22,38,.9) 20%,rgba(3,22,38,.4) 52%,rgba(3,22,38,.1) 100%), linear-gradient(to bottom,rgba(3,22,38,.08),rgba(3,22,38,.18)); } /* ---- 2. a photo band must not touch the next photo -------------------- */ /* A full-bleed frame running straight into the author portrait read as one confused image. A band gets clear air on both sides unless the thing it meets is a flat ground. */ .fig-strip+section,.fig-strip+.feature{margin-top:clamp(26px,3.2vw,48px)} section+.fig-strip,.feature+.fig-strip{margin-top:clamp(26px,3.2vw,48px)} /* No exception for dark bands. The pair Nicole was looking at is the band running into the author section, and the author section is .on-dark -- so exempting it was exempting the one case that needed the gap. A dark ground is not the point; another photograph is. */ /* Fran, 5 Oct QA: no white strip between the landing's relationship cards and the full-width couple photo. Keep the other pages' photo spacing. */ [data-book-page="landing"] section+.fig-strip{margin-top:0} /* ---- 3. the section lede runs the column, not a short measure --------- */ /* Capped at 34ch it broke after three or four words and read as cut off against the full-width cards underneath it. */ .sec-lede{max-width:none} .narrow>.sec-lede,.wrap>.sec-lede{max-width:72ch} .sec-head h2{max-width:24ch} /* ---- 4. testimonials, out of their boxes ------------------------------ */ /* Nicole: "I don't like the boxes." Three bordered cards made three equal grey rectangles of what should read as three people talking. The box goes; a rule above each quote carries the grouping instead, the quote gets room, and the name sits under it like a byline. */ .tstm-grid--plain{gap:clamp(26px,3.6vw,54px)} .tstm-grid--plain .tstm{background:none;border:0;padding:0} .tstm-grid--plain .tstm::before{position:static;display:block;width:44px;height:2px; background:var(--clay);margin-bottom:22px} .tstm-grid--plain .tstm-q{display:none} .tstm-grid--plain blockquote{font-family:var(--serif);font-style:italic;font-weight:400; font-size:clamp(1.06rem,1.5vw,1.24rem);line-height:1.5;color:var(--ink-deep)} .tstm-grid--plain .tstm-who{border-top:0;margin-top:20px;padding-top:0;gap:3px} .tstm-grid--plain .tstm-nm{font-size:.86rem} @media(max-width:900px){ .tstm-grid--plain{gap:34px} .tstm-grid--plain .tstm::before{margin-bottom:16px} } /* ---- 5. the timeline numerals --------------------------------------- */ /* The ring is 27px, sized for the 11px sans numeral it used to hold. Setting those numerals in serif at 2.2rem left a 35px glyph inside a 27px circle, which is the "messed up with the circles" Nicole is looking at. The ring goes: the numeral is the marker now, sitting on the rule like the chapter cards' numbers, and the rule is pulled down to meet it. */ .tl .tl-d{width:auto;height:auto;border:0;border-radius:0;background:none; display:block;place-items:unset;color:var(--clay); font-size:clamp(1.6rem,2.4vw,2rem);line-height:1; padding-right:14px} .tline::before{top:auto;background:var(--rule)} .tline{gap:clamp(18px,2.2vw,30px)} .tl{gap:6px} .tl .tl-w{margin-top:2px} @media(max-width:760px){ .tline::before{display:none} .tl{grid-template-columns:auto 1fr;gap:2px 16px;padding:16px 0; border-bottom:1px solid var(--rule)} .tl:last-child{border-bottom:0} .tl .tl-d{grid-row:span 3;padding-right:0;align-self:start} } /* ---- 7. the checkout popup, sized like a pop-up ----------------------- */ /* Nicole: "does not look like a pop-up ... take a look at the book funnel pop-up that was already approved." That one is deliberately narrow -- "sized as a pop-up, not a takeover: narrower, so the dimmed page shows around it and the thing reads as a dialog" -- and it changes ground colour so it reads as a different surface to the page beneath. Ours was 1120px and 960px tall, which is the whole screen on a laptop, and it sat on the same grey as the page. Matched to the approved proportions, in his palette. */ .order-dialog{max-width:min(920px,92vw);width:min(920px,92vw); height:auto;max-height:90vh} .order-inner{height:auto;max-height:90vh;background:var(--ground-blue); border:1px solid var(--rule);box-shadow:0 34px 90px rgba(3,22,38,.5)} .co-head{background:transparent;border-bottom:1px solid var(--rule); padding:14px clamp(16px,2.4vw,22px)} .co-frame{min-height:min(74vh,660px)} .order-x{border-radius:8px} .is-embed body{background:var(--ground-blue)} .is-embed section{padding:clamp(18px,2.4vw,26px) 0} /* Use the available desktop height, not a 74vh iframe inside a 90vh shell. The iframe still scrolls when zoom, a short window or Stripe needs more room. */ @media(min-width:901px){ #coDialog{max-width:min(1120px,94vw);width:min(1120px,94vw); height:min(960px,calc(100dvh - 24px));max-height:calc(100dvh - 24px)} #coDialog .order-inner{height:100%;max-height:100%;min-height:0} #coDialog .co-head{padding:6px 16px} #coDialog .co-frame{min-height:0} } @media(max-width:900px){ #coDialog{max-width:100%;width:100%;height:var(--checkout-height,100dvh);max-height:var(--checkout-height,100dvh)} #coDialog .order-inner{height:100%;max-height:100%;min-height:0;box-shadow:none} #coDialog .co-head{padding:6px 16px} .co-frame{min-height:0} } /* ========================================================================== 20 - SECOND REVIEW PASS ========================================================================== */ /* ---- the .feature scrims: clear the photograph once the text ends ------ */ /* Nicole: "the gradient is still cutting off the photo too much ... I don't understand why it would need to overlap the photo so much, past where the text ends." It did not need to. The image occupies the right 56% of the band and the text column ends at about 54% of the page, which is roughly 18% into the image. Everything past that was scrim over nothing. It is near-solid to 18%, then falls away and is gone by 40%, so the picture is clear for the two thirds of it that no type ever crosses. */ .feature .feature-bg::after{ background: linear-gradient(to right,var(--ink-deep) 0%,rgba(3,22,38,.96) 14%, rgba(3,22,38,.62) 26%,rgba(3,22,38,.16) 38%,rgba(3,22,38,0) 52%), linear-gradient(to bottom,rgba(3,22,38,.05),rgba(3,22,38,.1)); } .feature--close .feature-bg::after{ background: linear-gradient(to right,var(--ink-deep) 0%,rgba(3,22,38,.95) 14%, rgba(3,22,38,.58) 26%,rgba(3,22,38,.14) 38%,rgba(3,22,38,0) 52%), linear-gradient(to bottom,rgba(3,22,38,.05),rgba(3,22,38,.1)); } @media(max-width:820px){ /* Stacked, the type crosses the whole frame, so the vertical scrim stays. */ .feature .feature-bg::after,.feature--close .feature-bg::after{ background:linear-gradient(to bottom,rgba(3,22,38,.55) 0%,rgba(3,22,38,.85) 42%,rgba(3,22,38,.93) 100%); } } /* ---- the recognition photo, height driven purely by the row ------------ */ /* Widening .narrow to the full column made the text shorter, and the image was still contributing its own intrinsic height -- so the photo became the taller of the two and left a pool of white under the copy. Taking it out of flow means it can only ever be the height the row already is. Only do this while each grid has two columns; a stacked image needs its own intrinsic height. */ @media(min-width:821px){ .recog-shot{position:relative} .recog-shot img{position:absolute;inset:0;height:100%;width:100%} } @media(min-width:861px){ .offer-shot{position:relative} .offer-shot img{position:absolute;inset:0;height:100%;width:100%} } /* ---- the mechanism section: prose beside the diagram ------------------ */ /* Asked for twice: this section was a narrow column of text in a full-width band with a lake of white to its right. The diagram that already lived underneath it moves alongside, which uses the width without stretching the prose past a readable measure. */ .mech-grid{display:grid;grid-template-columns:minmax(0,1.02fr) minmax(0,.98fr); gap:clamp(30px,4.5vw,64px);align-items:center;margin-top:clamp(8px,1.4vw,18px)} .mech-grid .mech-words>p:not([class]){max-width:none} .mech-grid .rings{margin-top:0;max-width:none} .mech-grid .rings-svg{max-width:440px} @media(max-width:860px){ .mech-grid{grid-template-columns:1fr;gap:30px} .mech-grid .rings-svg{max-width:360px} } /* ---- the rings, in his blues ------------------------------------------ */ /* "The brown is a little bit ugly ... maybe we make it in some of the other brand colours." It is the blue row now, outermost to innermost, which also fixes the legibility: the two inner labels were brown-on-beige and are now white on solid blue. */ .r-lbl{font-family:'Inter',system-ui,sans-serif;font-weight:700;letter-spacing:1.6px} .rings-cap em{font-style:normal;font-weight:600;color:var(--blue-navy)} /* ---- the facts strip ("popcorn") --------------------------------------- */ /* A single row of four, icon above a bold fact above a line of detail. Same family as the "on the call" cards, at a quarter of the height, so it reads as a breath between two heavy sections rather than a fifth section. */ .popcorn{border-top:1px solid var(--rule);border-bottom:1px solid var(--rule)} .pop-row{list-style:none;display:grid;grid-template-columns:repeat(4,minmax(0,1fr)); gap:1px;background:var(--rule);margin:0;padding:0} .pop-row li{background:var(--white);padding:clamp(20px,2.4vw,28px) clamp(16px,2vw,24px); display:flex;flex-direction:column;gap:4px} .pop-row svg{width:24px;height:24px;color:var(--clay);margin-bottom:10px} .pop-row b{font-family:var(--sans);font-size:.94rem;font-weight:700;color:var(--ink-deep); line-height:1.25} .pop-row span{font-size:.84rem;line-height:1.5;color:var(--grey)} /* The strip supplies its own separation, so the band above it does not also need to push the next section away. */ .fig-strip+.popcorn{margin-top:0} @media(max-width:860px){.pop-row{grid-template-columns:repeat(2,minmax(0,1fr))}} /* ========================================================================== 21 - THE SPACING PASS AND THE SCAN LAYER -------------------------------------------------------------------------- Nicole, 29 Sep: too much padding between the sections, too much air above and below the hero text, the booked page's text spacing is weird, and "nobody's reading anything" -- the headings and the bolded text have to carry the whole page on their own. The padding scale itself comes down in section 4 (a third off every seam). This section holds the rest: the landing hero brought onto the same scale, the bold scan layer, and the two photo pairs added to the pages past checkout -- both built the section 15/20 way, where the image takes its height from the copy rather than floating past it. ========================================================================== */ /* ---- the landing hero, on the same scale ------------------------------- */ /* Scoped above 1000px: ra.css already sets a tighter phone hero in its max-width block, and an unscoped rule here would win on source order and quietly undo it. */ @media(min-width:1001px){ .hero{padding:clamp(40px,4.6vw,72px) 0 clamp(44px,5vw,80px)} } /* ---- the scan layer ------------------------------------------------------ One bolded phrase per paragraph, set a shade darker than the body around it rather than in a new colour: emphasis, not decoration. Scoped per component because the light-cards-on-dark-bands rules (section 9) mean one global `strong` colour would be wrong somewhere. */ .lede strong,.sec-lede strong{font-weight:600;color:var(--ink-deep)} .on-dark .lede strong{color:#F2F5F8} .led p strong,.prep p strong,.turn p strong,.hell strong,.icard p strong, .why-grid p strong,.guarantee p strong,.seal-b p strong, .cmp li strong{font-weight:600;color:var(--ink-deep)} .on-dark .icards .icard p strong{color:#F2F5F8} .author-sec .author-body p strong{font-weight:600;color:#F2F5F8} .feature-sub strong{font-weight:600;color:#FFF} /* A centred lede that runs to several lines rags badly; balance evens the lines so the last one is never a single orphaned word. */ .balance{text-wrap:balance} /* Found while verifying this pass: `.sline{display:flex}` beats the UA's [hidden]{display:none}, so the confirmation receipt was showing the audiobook and Video Training rows to buyers who had NOT bought them -- against a "Charged today" total that (correctly) did not include them. The adaptive receipt only works if hidden means hidden. */ .sline[hidden]{display:none} /* ---- the confirmation's close: why it costs nothing, with Joey ---------- The page's second section was a bare column of prose. Joey is the one saying it, so he sits beside it -- image out of flow, height from the copy, like every other pair. */ .why-grid{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); gap:clamp(26px,3.6vw,56px);align-items:stretch} .why-grid p:not([class]){font-size:clamp(1rem,1.15vw,1.09rem);line-height:1.72; color:var(--grey);max-width:60ch} .why-grid p:not([class])+p{margin-top:1.05em} .why-shot{position:relative;overflow:hidden;line-height:0;align-self:stretch;min-height:0;margin:0} .why-shot img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:50% 22%;display:block} @media(max-width:820px){ .why-grid{grid-template-columns:1fr;gap:26px} .why-shot{position:static} .why-shot img{position:static;height:auto;aspect-ratio:16/10;object-position:50% 26%} } /* ---- the booked page's close: the book, and the man --------------------- Nicole, 29 Sep: a photo of Joey towards the bottom, and the book where it says the book is being mailed. The close becomes a pair -- copy and the cover on the left, Joey on the right -- so the last page of the funnel ends on the two things the buyer now owns a piece of. */ .mailed-grid{display:grid;grid-template-columns:minmax(0,1.06fr) minmax(0,.94fr); gap:clamp(26px,3.6vw,56px);align-items:stretch} .mailed-words .lede{max-width:52ch;margin-top:14px} .mailed-words .btn{margin-top:clamp(22px,2.6vw,30px)} .mailed-shot{position:relative;overflow:hidden;line-height:0;align-self:stretch;min-height:0;margin:0} .mailed-shot img{position:absolute;inset:0;width:100%;height:100%; object-fit:cover;object-position:50% 18%;display:block} @media(max-width:820px){ .mailed-grid{grid-template-columns:1fr;gap:26px} .mailed-shot{position:static} .mailed-shot img{position:static;height:auto;aspect-ratio:16/10;object-position:50% 22%} } /* The book as an object next to the line about mailing it: cover, title, one status line. The same furniture as the checkout rail's .sum-obj, on the dark ground. */ .book-inline{display:grid;grid-template-columns:auto 1fr;gap:0 18px;align-items:center; margin-top:clamp(20px,2.6vw,30px);padding:clamp(14px,1.8vw,18px) clamp(16px,2vw,22px); background:rgba(255,255,255,.055);border:1px solid rgba(255,255,255,.16); box-shadow:inset 0 1px 0 rgba(255,255,255,.06);max-width:46ch} .book-inline img{width:56px;height:auto;display:block; filter:drop-shadow(0 10px 20px rgba(0,0,0,.5))} .book-inline b{display:block;font-family:var(--serif);font-weight:500; font-size:1.04rem;letter-spacing:-.01em;color:#F2F5F8;line-height:1.25} .book-inline .bk-s{display:block;font-size:.68rem;letter-spacing:.14em; text-transform:uppercase;font-weight:600;color:#A9B4BE;margin-top:6px} @media(max-width:480px){.pop-row{grid-template-columns:1fr}} /* Kate, 29 Sep (book-call): at the tall strip's default 27% the couple's faces sat on the bottom edge under the caption. Lift them into the band so the caption sits over the shoulders, not the faces. */ .fig-strip--tall img[src="couple-embrace.jpg"]{object-position:center 47%} /* The upsell ledger went from four cards to three (Kate, 29 Sep: the money and intimacy card is not in the book or confirmed in the course), so it runs as one row of three instead of a 2x2 with a hole in it. */ .price-card .ledger{grid-template-columns:repeat(3,minmax(0,1fr))} @media(max-width:860px){.price-card .ledger{grid-template-columns:1fr}}