/** * Component styles for the ADHD landing page (page-adhd.php). * * Loaded only on that template (see mabel_adhd_landing_assets() in * functions.php). Per-section CSS custom properties are set inline in * page-adhd.php scoped by section id, per the theme's existing convention — * this file is for shared component rules only (comparison tables, the * stats block, the pinned/rotating testimonial carousel, footnotes). * * Rules are scoped under .adhd-landing so nothing here can leak onto other * templates even if this file is ever enqueued more broadly by mistake. */ /** * color-scheme--navy's background overridden for this page only, at * explicit request (was the theme's own navy, rgb(33 21 81) / #211551). * Scoped under .adhd-landing rather than touching .color-scheme--navy * itself, so nothing outside this page is affected. Originally matched * four sections using color-scheme--navy — Reviews carousel, "Sound * familiar?", "Truffles are one part of the program", and the lead magnet * ("Not ready for the program?"). The middle two have since been removed * (Recognition/"Sound familiar?" in an earlier round, "Truffles are one * part of the program" this round) — only Reviews and the lead magnet use * this class now, this rule is unchanged and still correct for both. * --text-color is left alone: navy's * own default is already white, which is what was asked for, so there's * nothing to override there. Measured white-on-#AE959E at 2.77:1 — * confirmed intended despite failing WCAG AA at both the 3:1 large-text * and 4.5:1 normal-text minimums. */ .adhd-landing .color-scheme--navy { --background: 174 149 158; } /** * Narrow the heading/body ratio from the heading side — body copy keeps the * theme's own default size (see the .prose measure rule below, which no * longer touches font-size). --text-heading-size-factor is the theme's own * multiplier (defined at :root in style.css, default 0.7) that every * --text-h1..h7 / --text-display-* token is built from, so overriding it * here — scoped to .adhd-landing — shrinks the whole heading scale * uniformly on this page only, without touching style.css. */ .adhd-landing { --text-heading-size-factor: 0.62; } /** * Hero height, mobile only (desktop keeps the theme's own .min-h-lg * clamp(25rem, 55vmax, 45rem) untouched — this only wins below 700px, via * the ID + compound-class selector). Bumped again this round, from the * previous 63vmax/28.75rem/51.75rem to 68vmax/31rem/56rem — targeted * deliberately at 553px (0.68 * 812 = 552.16, ~1px of rounding) so this * matches Reviews'/Different by Design's own LOCKED 553px mobile figure * at the standard 375x812 viewport this page's mobile measurements are * taken at. * * This is a coincidental, width-specific match, not an equivalence * between the two height mechanisms — flagged since it was asked about * directly. Hero's height is still fluid (vmax-based: the larger of * viewport width/height, so on a real phone this tracks whatever height * that specific device reports, e.g. an iPhone at 844 or 926px tall * computes a taller hero than one at 812px does), while Reviews and * Different by Design are hard-coded to 553px regardless of viewport * height. The three only actually match at 812px-tall viewports; on a * taller or shorter phone, Hero will drift above or below 553px while * the other two stay fixed. Matching Hero to a FIXED 553px instead * (rather than vmax) was not done here since nothing asked for that and * it would abandon the fluid-height approach entirely for this section. * * The video already covers this via its existing width:100%/height:100%/ * object-fit:cover (page-adhd.php) — object-fit:cover crops to fill * whatever box height it's given rather than stretching or letterboxing, * so a taller box needs no video-specific change. Heading/button/trust * line don't need separate spacing either: that content sits in a * .place-self-center block, centred on both axes within the content-box's * grid area, so the extra height just adds matching space above and * below it symmetrically rather than pushing anything toward an edge. */ @media screen and (max-width: 699px) { #mabel-adhd-hero .content-box.min-h-lg { min-height: clamp(31rem, 68vmax, 56rem); } } /** * iOS Safari autoplay fallback (page-adhd.php's hero video script): if * .play() is rejected, the video gets .adhd-hero-video--fallback instead of * being left paused with a native tap-to-play overlay. The poster image * sits in the same grid cell as the video (.content-box__background-media's * grid has no named areas, so same-cell stacking is the default for every * direct child — see style.css) and stays hidden until then. */ .adhd-hero-video-poster { display: none; object-fit: cover; object-position: center; } #mabel-adhd-hero-video.adhd-hero-video--fallback { display: none; } #mabel-adhd-hero-video.adhd-hero-video--fallback ~ .adhd-hero-video-poster { display: block; } /* [Removed] .adhd-pivot__closing — Recognition/"Sound familiar?" (the section that used this class) deleted entirely per explicit instruction. No other element on the page carries this class. [Removed] .adhd-five-weeks__closing — "Why Mabel"/"Truffles are one part of the program." (the only section that used this class) deleted entirely this round. */ /** * inside the hero heading specifically (the hero heading allows it — * see page-adhd.php's $al_hero_allowed_html) — Kalice Italic, matching the * hero's own serif display type. * * This used to be a page-wide rule (.adhd-landing em), forcing every * on the page into Kalice Italic regardless of context. That broke the * lead magnet's supporting line, which is set in Aspekta (this theme's * plain sans body font) — a serif italic mid-sentence there looked wrong. * Narrowed to the hero only; see .adhd-landing em below for how every * other on the page is now handled instead. */ #mabel-adhd-hero em { font-family: 'Kalice-Italic' !important; } /** * Every other on the page: stays in whatever font it already * inherits (Aspekta, this theme's body font) and just goes italic. * Aspekta only ships a single regular-weight font file (fonts/Aspekta- * 400.woff2 — no italic face exists), so this is a browser-synthesised * oblique rather than a true drawn italic. That's still correct here: * the alternative (Kalice-Italic) is a completely different serif * typeface, which is what read as wrong mid-sentence in body copy. */ .adhd-landing em { font-style: italic; } /* [Removed] #mabel-adhd-pivot .section-spacing (mobile + desktop overrides) — Recognition/"Sound familiar?" deleted entirely. The boundary these used to tune (Reviews' bottom padding meeting this section's top padding) no longer exists in that shape; Reviews now meets Our Data (stats) directly instead — see this round's report for that new gap, and the rebuilt Reviews section's own CSS further down for its height/background rules. */ /** * The Science, mobile only — matched to the Pivot's own override: same * hook, same values, both block-start and block-end. */ @media screen and (max-width: 699px) { #mabel-adhd-science .section-spacing { --section-vertical-spacing-block-start: 4rem; --section-vertical-spacing-block-end: 4rem; } } /** * The Science: background to pure white at explicit request (was the * theme's color-scheme--blush, rgb(255 250 250)). Only --background is * overridden — --text-color stays black (unchanged from blush) and * --border-color stays 230 225 225 (also unchanged, still set by * color-scheme--blush itself since this section keeps that class for * everything else it provides). That border colour governs the accordion's * top/bottom hairline (.accordion's box-shadow, style.css ~262) — checked * live against pure white after this change: still reads as a soft, visible * line, if anything marginally crisper than against the cream, not washed * out. "view references" and the accordion's own text stay black-on-white, * still fully readable. */ #mabel-adhd-science .color-scheme { --background: 255 255 255; } /** * "What Microdosing Actually Is" — image/text split. Deliberately not * built on the theme's own .section-split (used for Program below): that * component gets its vertical spacing from .section-split__column's own * padding-block, a different mechanism from .section-spacing — so this * stays on plain .container.section-spacing (the theme's default, no * custom trim — see below), and the split is just a simple grid inside it. * * Image-left/text-right at explicit request: DOM order stays text-first * (source-order/accessibility, same convention as Focus), image visually * moved first via `order: -1` below. Unlike Focus's mobile-only reorder, * this one isn't scoped to a media query — the same rule puts the image * first in the single-column mobile stack (image above text) AND first in * the >=700px two-column grid (image left, text right). * * This round: moved next to "It Gets Personal" and rebuilt for the type * scale (see page-adhd.php's comment on this section for the full * reasoning). The old bespoke section-spacing overrides that used to sit * here (a mobile block-end trim, a flat desktop 0.5rem trim) were tuned * for neighbours this section no longer has — removed rather than carried * over; this now uses the theme's plain default spacing on both ends, * measured fresh in the new position, see this round's report for the * actual boundary numbers. */ #mabel-adhd-what-is .adhd-what-is-scheme { --background: 250 250 248; --text-color: 20 38 59; --button-background-primary: 20 38 59; --button-text-primary: 255 255 255; } .adhd-landing .adhd-what-is { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 2.5rem; } .adhd-landing .adhd-what-is__image { aspect-ratio: 1 / 1; order: -1; } .adhd-landing .adhd-what-is__image img { width: 100%; height: 100%; } @media screen and (min-width: 700px) { .adhd-landing .adhd-what-is { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; /** * align-items: start overrides the base rule's "center" at this * breakpoint only. With "center", the image (a fixed-aspect-ratio * square) was vertically centred against the TEXT COLUMN'S height — * opening the accordion grows the text column, which grows the grid * row, which re-centres the image lower to match the new midpoint. * "start" pins both columns to the row's top edge instead: the image * never moves regardless of how tall the text column gets, and the * text simply grows downward past the image's own bottom edge. * Mobile (below this breakpoint) keeps the base "center" — a single- * column stack doesn't have this side-by-side coupling to begin * with, so it was never affected and is left untouched. */ align-items: start; } /* Polish round: text column centred against the image — with the parent now pinned to align-items: start (above), the collapsed (default) text sat at the row's top edge same as the image, but being shorter than the image's own square, left visible empty space below it before the row ended. align-self: center here re-centres just the TEXT column within the row's height, independent of the image (still pinned via its own align-self: start, untouched) — so the image still never moves when the accordion opens, only the text's own vertical position within the row is affected. */ .adhd-landing .adhd-what-is__text { align-self: center; } } /** * Text column: left-aligned (was centred via rich-text/prose-justify-center * wrappers, both removed) — plain block markup is left-aligned by default, * no override needed for that part. Same "display"/"body"/"eyebrow"/ * "interface" tokens as It Gets Personal, same reasoning for each * (font-family/text-transform explicitly set on the heading rather than * relying on the .h1 CLASS matching style.css's collision block, which it * doesn't — see the fourth collision documented in this file's top * docblock; plain

/

    need no font-family override at all, already * forced to Aspekta by the site-wide collision). */ .adhd-landing .adhd-what-is__eyebrow { font-family: 'Aspekta 400', sans-serif !important; font-size: 0.8125rem !important; text-transform: uppercase; letter-spacing: 0.08em; } .adhd-landing .adhd-what-is__heading { margin-block-start: 1rem; margin-block-end: 1.5rem; font-family: 'Kalice-Regular' !important; text-transform: none; } /** * "Actually" — Kalice Italic, same size as the rest of the heading * (inherits font-size from .adhd-what-is__heading/.h1; only font-family/ * font-style change here). No descenders in this word, so the clipping * bug found elsewhere on this page doesn't apply. */ .adhd-landing .adhd-what-is__heading-italic { font-family: 'Kalice-Italic' !important; font-style: normal; } .adhd-landing .adhd-what-is__body p + p { margin-block-start: 1rem; } /** * Body-to-button gap stepped up one rung on this page's own spacing scale * (0.5rem/1rem/1.5rem/2rem/2.5rem, seen throughout this file) rather than * a custom value — 1.5rem to 2rem, matching It Gets Personal's own * body-to-accordion gap exactly. */ .adhd-landing .adhd-what-is__accordion { display: block; margin-block-start: 2rem; } .adhd-landing .adhd-what-is__toggle { cursor: pointer; } .adhd-landing .adhd-what-is__dropdown { padding-block-start: 1.5rem; } /** * "Less noise. More room to choose." — mirror of "What Microdosing * Actually Is". No `order` override needed here, unlike that section: * DOM is text-first/image-second (same source-order/accessibility * convention), and text-first/image-second in DOM already lands text in * the left cell and image in the right cell of the >=700px 2-column grid * with no help — it only needed correcting there because that section * wanted the image FIRST despite being second in DOM. Same reason mobile * needs nothing special either: text-first in a single column is already * the desired stack order. */ #mabel-adhd-why-microdosing .adhd-why-microdosing-scheme { --background: 85 112 142; --text-color: 255 255 255; --button-background-primary: 229 178 71; --button-text-primary: 20 38 59; } .adhd-landing .adhd-why-microdosing { display: grid; grid-template-columns: minmax(0, 1fr); align-items: center; gap: 2.5rem; } /* * Was aspect-ratio: 1/1 + img width/height: 100% (a forced square crop via * .image-cover, object-fit: cover) for the previous photo. Swapped for a * transparent PNG at its native 612×408 that must sit directly on the * section background with no crop, box, border or shadow — so the image * is now shown at its own size (never upscaled past 612px) instead of * being stretched/cropped to fill the grid cell. */ .adhd-landing .adhd-why-microdosing__image img { max-width: 612px; width: 100%; height: auto; } @media screen and (min-width: 700px) { .adhd-landing .adhd-why-microdosing { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 3rem; /* Same fix as What Microdosing Actually Is — see that rule's comment. */ align-items: start; } /* Same text-centring fix as What Microdosing Actually Is — see that rule's comment. */ .adhd-landing .adhd-why-microdosing__text { align-self: center; } /* Image column vertically centred against the text column, same as text above. */ .adhd-landing .adhd-why-microdosing__image { align-self: center; } } .adhd-landing .adhd-why-microdosing__eyebrow { font-family: 'Aspekta 400', sans-serif !important; font-size: 0.8125rem !important; text-transform: uppercase; letter-spacing: 0.08em; } .adhd-landing .adhd-why-microdosing__heading { margin-block-start: 1rem; margin-block-end: 1.5rem; font-family: 'Kalice-Regular' !important; text-transform: none; } /** * "More room to choose." — Kalice Italic, same size as the rest of the * heading. A plain
    splits the two lines rather than Different by * Design's fit-content-span trick — that trick specifically stopped a * CENTRED block's second line from stretching to the first line's width; * this whole layout is left-aligned already, so a plain second line * already starts flush left with nothing to fix. */ .adhd-landing .adhd-why-microdosing__heading-italic { font-family: 'Kalice-Italic' !important; font-style: normal; } .adhd-landing .adhd-why-microdosing__body p + p { margin-block-start: 1rem; } /** * Bold-emphasis substitution, confirmed with the user before applying: * the reference bolds several phrases here, and Aspekta has no bold face * in this theme — solar instead, the same "colour instead of bold" * solution already used for It Gets Personal's bullet markers, applied * to every phrase the mockup itself wrapped in . */ .adhd-landing .adhd-why-microdosing__emphasis { color: rgb(var(--button-background-primary)); } .adhd-landing .adhd-why-microdosing__accordion { display: block; margin-block-start: 2rem; } /* Polish round: "learn more" switched to navy — same reasoning as "It Gets Personal"'s "read more" fix above: this section's own --button-background- primary is reused by .adhd-why-microdosing__emphasis's text colour, so overriding it scheme-wide would have turned that emphasis text navy too. Scoped to the button element itself instead. */ .adhd-landing .adhd-why-microdosing__toggle { --button-background-primary: 20 38 59; --button-text-primary: 255 255 255; cursor: pointer; } .adhd-landing .adhd-why-microdosing__dropdown { padding-block-start: 1.5rem; } /** * Dropdown subheadings (5-HT2A receptors, Brain networks, etc.) reuse the * EYEBROW token rather than "meta" — proposed rather than assumed: each * one is a small structural label introducing its own paragraph, the * same role the eyebrow plays once per section already, so this reuses * that established treatment instead of inventing a new one for the same * job. margin-block-start/-end are wider than the eyebrow's own (which * only ever sits once, at the top of a section) since these repeat * throughout the dropdown and need clear separation from the paragraph * above as well as below. */ .adhd-landing .adhd-why-microdosing__dropdown-subheading { margin-block-start: 2rem; margin-block-end: 0.75rem; font-family: 'Aspekta 400', sans-serif !important; font-size: 0.8125rem !important; text-transform: uppercase; letter-spacing: 0.08em; } .adhd-landing .adhd-why-microdosing__dropdown-copy > .adhd-why-microdosing__dropdown-subheading:first-child { margin-block-start: 0; } /** * "Microdosing + ADHD. The results." — the one dropdown subheading the * mockup gives its own larger, distinct treatment (its own inline style, * bigger than the other h3s) rather than the small eyebrow-style label * used above. Kalice-Regular at a modest heading size (var(--text-h6)) — * bigger than the eyebrow-style subheadings, still clearly smaller than * the section's own "display" heading. */ .adhd-landing .adhd-why-microdosing__dropdown-heading { margin-block-start: 2.5rem; margin-block-end: 0.75rem; font-family: 'Kalice-Regular' !important; text-transform: none; font-size: var(--text-h6); } /** * Footnote: "meta" as instructed — the `text-subdued` class on this * paragraph (markup) is this page's own existing small-print convention * (already used for the Hero trust line and the Our Data footnote, * color: rgb(var(--text-color) / 0.6)), rather than a new muted-text * style; only the size and spacing are set here. */ .adhd-landing .adhd-why-microdosing__footnote { margin-block-start: 1.5rem; font-size: 0.8125rem; } /* [Removed] "It Was Never Only About Focus"/"ADHD Beyond Focus" (#mabel-adhd-focus) and its #7E8DA0/white colour override, .adhd-focus-split (+__image), the mobile image-order flip, .adhd-focus__quote (already orphaned before this round — its markup was removed in an earlier pass) and .adhd-focus__list — deleted entirely per this round's explicit instruction, section and CSS together. See page-adhd.php's own [Removed] note above the Product section for the full removal list. [Removed] "If You Take Medication"'s old #7E8DA0/white colour override (#mabel-adhd-medication-section .color-scheme) — that section's content is replaced this round by "On Medication, Off It, or Still Deciding", with its own bespoke tyrian-purple scheme further down this file (#mabel-adhd-medication-section .adhd-medication-scheme). [Removed] "Why Mabel"/"Truffles are one part of the program." (#mabel-adhd-five-weeks)'s own top/bottom spacing overrides — deleted along with that section this round. */ /** * Fact cards — opaque white regardless of the section's own --text-color * above, so their text is set directly rather than inherited. Matches the * reference card treatment used for "Your dose, your call" on the alcohol * page (alcohol.php .mabel-doses__card): white, rounded, italic serif * title, lighter subdued line beneath. #1a1a1a/#898989 are that same * reference's own colours, reused here for a true visual match rather than * this page's own --text-color tokens (which are scoped to sit on * .color-scheme backgrounds, not on an opaque white card floating on top * of one). The title uses 'Kalice-Italic' as its own font-family, not * font-style: italic on Kalice-Regular — the two are separate font-face * families on this theme (see the .adhd-pivot__closing note above), and * font-style alone only synthesises a fake oblique. */ .adhd-landing .adhd-facts { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-block-end: 1rem; } .adhd-landing .adhd-facts__card { background: #ffffff; border-radius: 0.75rem; padding: 1.75rem 1.5rem; text-align: center; } .adhd-landing .adhd-facts__title { font-family: 'Kalice-Italic' !important; font-weight: 400; font-size: 1.125rem; line-height: 1.3; color: #1a1a1a; margin: 0 0 0.75rem; } .adhd-landing .adhd-facts__note { font-size: 0.9375rem; line-height: 1.6; color: #898989; margin: 0; } @media screen and (min-width: 700px) { .adhd-landing .adhd-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.25rem; margin-block-end: 2rem; } } @media screen and (min-width: 1000px) { .adhd-landing .adhd-facts { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1.5rem; } } /* [Removed] .adhd-quote-cta and everything scoped to it (its own --background/--text-color/--border-color/--button-* set, the .adhd-quote-cta-scoped .adhd-review-cta__attribution opacity boost, and the mobile .adhd-quote-cta blockquote/.adhd-review-cta__stars gap rule), plus .adhd-final-cta__image and .adhd-final-cta__price — all orphaned this round by Final CTA's removal (#mabel-adhd-final-cta, "The Mindful Microdosing Program"). .adhd-quote-cta had no other user left: the Review Carousel was fully rebuilt in an earlier round and no longer carries this marker, and Focus's own nested closing quote (.adhd-focus__quote) had already been removed from the markup before this round, before Focus itself was deleted this round too. See page-adhd.php's own [Removed] note above the Product section for the full list. The BARE .adhd-review-cta__attribution rule (no .adhd-quote-cta ancestor, just below) stays: the Hero trust line still uses that class directly, on its own uncustomised background. */ .adhd-landing .adhd-review-cta__attribution { margin-block-start: 0.5rem; } /** * Button hover, this page only. The theme's default (style.css ~572-584) * is an up-text attribute effect: on hover the label slides up * (translateY(-100%)) to reveal a duplicated copy of itself underneath via * a :before pseudo-element — that sliding motion is what reads as messy/ * underlined here, especially on the hero CTA. Every button on this page * carries up-text (copied from the theme's own convention), so rather * than strip the attribute from markup everywhere, the effect is * neutralised here instead: cancel the hover transform so the label never * moves and the duplicate is never revealed, plus an explicit * text-decoration:none as a safety net. No replacement hover treatment — * buttons stay visually unchanged on hover; the pointer cursor (already * set on .button by style.css) is feedback enough on its own. * * Scoped to .adhd-landing throughout, and loaded only on this template * (see mabel_adhd_landing_assets() in functions.php) — style.css itself * isn't touched, so every other page keeps the existing hover untouched. */ .adhd-landing .button:has(.button__content[up-text]):hover:not([aria-busy="true"]) .button__content[up-text] { transform: none; } .adhd-landing .button, .adhd-landing .button__content { text-decoration: none; } /** * Hero trust-line legibility over the background video. text-shadow was * tried here and dropped — didn't look good on the text. Heading and * subheading stay untouched, plain white, no treatment. Only the trust * line is addressed, by raising its opacity: .text-subdued renders it at * 60%, the lightest text in the section and the one at real risk against * a bright video frame at --overlay: 0.2 (page-adhd.php). More specific * than .text-subdued so it wins without touching that class everywhere * else it's used on the page. */ #mabel-adhd-hero .prose > p.text-subdued { color: rgb(var(--text-color) / 0.85); } /** * Hero button — restyled red in an earlier round, at explicit request, * using rgb(179 58 44) (no prior red value existed anywhere in this * repository's history — see page-adhd.php's own comment on this button * for that search). Follow-up round: colour switched to this page's own * established burgundy/tyrian purple instead — the exact * --background: 102 23 46 value "ADHD Can Shape Our Relationships..." * (#mabel-adhd-relationships .adhd-relationships-scheme) already uses, * reused directly rather than a new invented red. White text stays * (--button-text-primary), scoped to this button only via its own class * rather than color-scheme--rose itself (the Hero's own theme-wide named * scheme, used elsewhere too). * * Size: the same follow-up round reverted the previous enlargement back * to this page's normal button size — no --button-padding-block/-inline * or font-size override left here at all, so it now inherits exactly what * every other primary button on this page gets (theme default 0.75rem/ * 1.5rem block/inline at mobile, 0.875rem/2rem at >=700px, per * custom.css's site-wide override of the theme's own larger desktop * inline padding). */ .adhd-landing .adhd-hero__cta { --button-background-primary: 102 23 46; --button-text-primary: 255 255 255; } /** * Hero stars: verified live that font-style computes to "normal" on this * element already — the slant is coming from .h6's own forced font-family * (style.css: `.h6 { font-family: 'Kalice-Italic' !important }`), an * inherently italic-styled typeface, not from font-style. Overriding * font-style here would have done nothing; this resets the font-family * back to the page's plain sans, matching how .adhd-reviews__quote already * solves the same problem elsewhere on this page. !important is required * to beat .h6's own !important at equal specificity. * * margin-block-start widens the gap between this line and the button above * it, which was riding the ambient .prose spacing and read as too tight * given the button's visual weight. The tighter 0.5rem stars-to-text gap * below it (.adhd-review-cta__attribution) is untouched. */ .adhd-landing .adhd-hero__stars { font-family: 'Aspekta 400', sans-serif !important; margin-block-start: 2rem; } /* [Removed] The Data's old icon + divider + before/after 3-then-2 grid (.adhd-stats/.adhd-stats__row/.adhd-stats__row--3/--2/.adhd-stats__icon/ .adhd-stats__label/.adhd-stats__divider), replaced entirely by the five-across .adhd-stats-data rebuild below at explicit request. The old --adhd-stat-col-width fixed-column-width mechanism and the reference's 1px-gap divider trick are both gone with it — the new layout has no dividers and uses even 1fr tracks instead of fixed widths. */ /** * "What Our Clients Experience After Five Weeks." — full rebuild. * Tyrian purple background, white heading/body/desc, solar numbers and * MORE/LESS words. Bespoke colour scheme (not a named .color-scheme--* * variant) — no button on this section any more ("start the program" * removed at explicit request), so unlike every other bespoke scheme on * this page, --button-background-primary/--button-text-primary are * NOT needed here. */ #mabel-adhd-stats .adhd-stats-data-scheme { --background: 102 23 46; --text-color: 255 255 255; --stat-accent: 229 178 71; } /** * Height: locked to match Hero/Reviews/Different by Design (563px) at * >=700px, with align-content: center distributing the measured slack * (measured live: heading + 5-column row + footnote = 415.85px content * against 563px, 147px to spare). Below 700px, deliberately NO locked * height, at explicit instruction — five cards stacked in one column * measured ~940px against the 553px mobile figure used elsewhere, so * this breakpoint sizes to its own content instead (see the mobile * padding override further down for the "generous padding" this needs * in place of a centred fixed box). */ .adhd-landing .adhd-stats-data { display: grid; gap: 2.5rem; } @media screen and (min-width: 700px) { .adhd-landing .adhd-stats-data { height: 563px; align-content: center; } } /** * Heading: plain .h1 for var(--text-h1) (the "display" token, same as * Hero/Different by Design/It Gets Personal) — needs its own explicit * font-family/text-transform for the same fourth collision documented in * this file's top docblock (a bare `class="h1"` on a non-

    tag matches * none of style.css's own override selectors). Left-aligned on desktop; * centred on mobile only, see the shared mobile-alignment rule below. */ /* Polish round: max-width widened, 45rem to 58rem — reported wrapping to three lines on desktop with "Weeks." stranded alone on the last one. Widened rather than removed so the heading still has SOME measure (an unbounded line at .h1/var(--text-h1) size would run very wide on large screens) — checked live after widening, see this round's report. */ .adhd-landing .adhd-stats-data__heading { font-family: 'Kalice-Regular' !important; text-transform: none; max-width: 58rem; } /** * Cards: one column on mobile (plain stack, no locked height to fit — * see above), five even 1fr tracks at >=700px. No dividers, no card * backgrounds. Left-aligned on desktop; text-align: center on mobile * only (below) re-centres every child paragraph's text — each card and * paragraph is already full-width within its grid column/flex column at * every breakpoint (stretch is the default for both), so text-align * alone is enough to centre the visible content without also touching * any box widths. */ .adhd-landing .adhd-stats-data__cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 2rem; text-align: left; } @media screen and (min-width: 700px) { .adhd-landing .adhd-stats-data__cards { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 1.5rem; } } /** * Mobile-only centring, at explicit request: heading, every card's * number/direction/short-label/description, and the footnote all centre * on mobile while desktop stays left-aligned as specified. One rule * covers all of it — text-align is inheritable, so centring the two * block-level containers (.adhd-stats-data__heading and .__cards) and * the footnote paragraph directly is enough; none of their children * (the per-card paragraphs) need their own override. */ @media screen and (max-width: 699px) { .adhd-landing .adhd-stats-data__heading, .adhd-landing .adhd-stats-data__cards, .adhd-landing .adhd-stats-data__footnote { text-align: center; } } .adhd-landing .adhd-stats-data__card { display: flex; flex-direction: column; } /** * Number: solar, "large" per the brief — reusing the old card's own * clamp() rather than inventing a new size, since nothing in the brief * asked for a specific value and this one already reads as a big * headline figure at every width. */ .adhd-landing .adhd-stats-data__number { font-family: 'Kalice-Regular' !important; color: rgb(var(--stat-accent)); font-size: clamp(3rem, 5.5vw, 4.25rem); line-height: 1; letter-spacing: -0.0625rem; margin: 0 0 0.75rem; } .adhd-landing .adhd-stats-data__number sup { font-size: 0.38em; vertical-align: super; letter-spacing: 0; } /** * Direction (MORE/LESS) and short label both use the eyebrow token * (Aspekta, uppercase, letter-spaced) already established for this page * — only the colour differs between them (solar vs white), matching the * brief exactly. Both are conditionally rendered in the template (empty * short_label omits the line rather than leaving a gap; a label matching * neither "increase"/"decrease" omits the direction word the same way). */ .adhd-landing .adhd-stats-data__direction, .adhd-landing .adhd-stats-data__short-label { font-family: 'Aspekta 400', sans-serif !important; font-size: 0.8125rem !important; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.25rem; } .adhd-landing .adhd-stats-data__direction { color: rgb(var(--stat-accent)); } .adhd-landing .adhd-stats-data__short-label { margin-block-end: 0.75rem; } .adhd-landing .adhd-stats-data__desc { font-size: 0.875rem; line-height: 1.5; margin: 0; } .adhd-landing .adhd-stats-data__footnote { font-size: 0.8125rem; } /** * Mobile-only generous padding, in place of the locked-height box's own * breathing room (which only exists at >=700px) — the same 2.5x * multiplier .section-spacing--loose uses elsewhere, applied here as a * scoped override instead of that shared class so desktop keeps the * THEME's plain default spacing, matching Hero/Reviews/Different by * Design's own convention exactly. */ @media screen and (max-width: 699px) { #mabel-adhd-stats .section-spacing { --section-vertical-spacing-block-start: calc(var(--section-vertical-spacing) * 2.5); --section-vertical-spacing-block-end: calc(var(--section-vertical-spacing) * 2.5); } } /** * "Why Microdosing Alone Isn't Enough" — mist blue (same 85 112 142 as * "Less noise. More room to choose."), white text, single left-aligned * column centred on the page via .rich-text.justify-items-center. */ #mabel-adhd-practice .adhd-practice-scheme { --background: 85 112 142; --text-color: 255 255 255; } /** * One block max-width for heading + body together (see the reasoning in * page-adhd.php's comment on this section for why this doesn't split * into two separate measures the way the reference does). */ .adhd-landing .adhd-practice__block { max-width: 50rem; text-align: left; } .adhd-landing .adhd-practice__eyebrow { margin-block-end: 1rem; font-family: 'Aspekta 400', sans-serif !important; font-size: 0.8125rem !important; text-transform: uppercase; letter-spacing: 0.08em; } /** * Heading: plain .h1 for var(--text-h1) (the "display" token) — needs its * own explicit font-family/text-transform for the fourth collision * documented in this file's top docblock (a bare `class="h1"` on a * non-

    tag matches none of style.css's own override selectors). */ .adhd-landing .adhd-practice__heading { margin-block-end: 1.5rem; font-family: 'Kalice-Regular' !important; text-transform: none; } /** * Two block-level lines (replacing a plain
    this round) so each line * can carry its own text-wrap: balance independently on mobile, where * "Space." and "Direction." were each left stranded alone on a third * line — balance re-distributes each line's OWN words across its OWN * wrapped lines evenly, which a shared
    couldn't do per-line. Desktop * is untouched (not requested, and this heading doesn't wrap to enough * lines there for it to matter). */ .adhd-landing .adhd-practice__heading-line { display: block; } @media screen and (max-width: 699px) { .adhd-landing .adhd-practice__heading-line { text-wrap: balance; } } .adhd-landing .adhd-practice__heading-italic { font-family: 'Kalice-Italic' !important; font-style: normal; } .adhd-landing .adhd-practice__body p + p { margin-block-start: 1rem; } /** * Scroll cue: replaces the old "EXPLORE THE FIVE CORE CLASSES +" button * entirely — a plain arrow, no pill/fill, sized clearly visible but * quieter than body text. Visible focus state needs no extra CSS here — * style.css's own `:focus:not(:focus-visible) { outline: none }` * (~line 240) already shows the browser's default outline on keyboard * focus site-wide and only suppresses it for mouse clicks. * * Restored this round, at explicit request, exactly as it existed before * an earlier polish round removed it (recovered verbatim from this file's * own git history) — same position, size, colour and pulse. Only the * height/padding rules that used to sit around it (see the comment just * below) stay removed, per this round's own instruction to keep the * reduced bottom padding rather than bring back the large empty band. */ .adhd-landing .adhd-practice__scroll-cue { display: inline-flex; margin-block-start: 2rem; color: rgb(var(--text-color)); text-decoration: none; } /** * Gentle bob, gated inside prefers-reduced-motion: no-preference so it * simply doesn't apply under reduce rather than being toggled off after * the fact (the scroll-behaviour itself is also reduced-motion-aware, * handled in the page's own script — see that comment for why this * isn't a blanket `html { scroll-behavior: smooth }`). */ @media (prefers-reduced-motion: no-preference) { .adhd-landing .adhd-practice__scroll-cue svg { animation: adhd-practice-bob 2s ease-in-out infinite; } } @keyframes adhd-practice-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(6px); } } /** * Height: previously locked to 563px at >=700px (matching Hero/Reviews/ * Different by Design/Our Data) with align-content: center, plus a 2.5x * mobile-only padding bump matching Our Data's own treatment. Both * removed this polish round, at explicit request — reported as a large * empty area below the content on both breakpoints (on mobile, visible as * an empty blue band above The Five Core Classes), and asked to match the * OTHER prose sections' vertical spacing instead of the locked-height * group. Five Core Classes (the very next section) is the model for that: * no locked height, no custom padding override, just the theme's own * default .container.section-spacing sizing to content — this section now * matches that exactly, at both breakpoints, rather than Hero/Reviews/DBD/ * Our Data's shared-height group. */ .adhd-landing .adhd-practice { display: grid; } /** * "The Five Core Classes" — off-white/navy, single left-aligned column * centred on the page (same .rich-text.justify-items-center idiom used * throughout this file). scroll-margin-top matches the sticky header's * own measured height (111px desktop / 97px mobile, both already- * established figures) so the anchor lands with the heading visible * below the header rather than hidden underneath it. */ /** * --border-color set explicitly — the same recurring bug already * documented elsewhere on this page for --button-background-primary/ * --button-text-primary: a bare custom .color-scheme only defines * --background/--text-color, and style.css has no general :root fallback * for --border-color either, so .accordion's own box-shadow divider * (rgb(var(--border-color))) would resolve to nothing without this. * "Thin muted divider" per the brief: the same var(--text-color) / 0.15 * pattern style.css itself already uses for a subtle border elsewhere * (~line 8151), not a new value invented for this section. */ #mabel-adhd-five-core-classes .adhd-classes-scheme { --background: 250 250 248; --text-color: 20 38 59; --border-color: var(--text-color) / 0.15; } #mabel-adhd-five-core-classes { scroll-margin-top: 97px; } /* Polish round: more breathing room on mobile only — reported as feeling cramped, above the heading and below the last accordion row. This section has no locked height and no custom padding override at either breakpoint (unlike the "generous mobile padding" pattern used/removed elsewhere on this page), so the theme's own base --section-vertical-spacing (2.5rem at narrow widths) was the only thing setting it — bumped here to 4rem top/bottom, mobile only; desktop already steps up to 4.5rem via the theme's own responsive --section-vertical-spacing and wasn't reported as cramped, so it's untouched. */ @media screen and (max-width: 699px) { #mabel-adhd-five-core-classes .section-spacing { --section-vertical-spacing-block-start: 4rem; --section-vertical-spacing-block-end: 4rem; } } @media screen and (min-width: 700px) { #mabel-adhd-five-core-classes { scroll-margin-top: 111px; } } .adhd-landing .adhd-classes__block { max-width: 50rem; text-align: left; width: 100%; } /** * Heading: plain .h1 for var(--text-h1) (the "display" token) — needs its * own explicit font-family/text-transform for the fourth collision * documented in this file's top docblock. */ .adhd-landing .adhd-classes__heading { margin-block-end: 2rem; font-family: 'Kalice-Regular' !important; text-transform: none; } .adhd-landing .adhd-classes__rows { width: 100%; } /** * Rows reuse the theme's real .accordion/.accordion__summary/ * .accordion__content classes (unlike the pill-button sections * elsewhere on this page) — this section's brief (bordered rows, * number+title left, a toggle right) is exactly what .accordion already * provides. The dividers "above the first row and below the last" fall * out for free from .accordion's own box-shadow hairline at both its own * top and bottom. Stacking five instances DOES put two hairlines on each * interior seam — this was assumed to "read as one line in practice" * (same as FAQ/Sources elsewhere on this page, which use the same * component) but was never actually checked against this section's own * semi-transparent --border-color; it doesn't, since two 0.15-alpha lines * on one seam composite darker than a single one. See the fix on * .adhd-classes__row further down for the diagnosis and correction. */ .adhd-landing .adhd-classes__summary { cursor: pointer; } /** * Divider-doubling fix, diagnosed live rather than assumed: the "reads as * one line in practice" claim in the comment above was wrong — confirmed by * inspecting computed box-shadow layers, not just eyeballing it. The actual * cause isn't "each row carries a top AND a bottom border" in the sense of * two separate border declarations — it's style.css's own .accordion rule * (~line 262): a SINGLE box-shadow property with two 1px layers, one * regular (draws a line just below the box) and one inset (draws a line * just inside its top edge). Every row gets both. Between two adjacent * rows, row N's own bottom line and row N+1's own top line land on the * exact same seam pixel — and since --border-color here is text-colour at * 0.15 alpha, not opaque, two semi-transparent lines stacked on the same * seam composite to roughly 1-(1-0.15)^2 ≈ 0.28 effective opacity, nearly * double the single 0.15 line above the first row and below the last (each * of which only ever gets ONE of the two layers, with nothing to stack * against). That's the "different grey" — not a width or colour mismatch * on the outer two, a genuine doubled-opacity seam on the four interior * ones. * * Fix: only the first row keeps .accordion's original two-layer shadow * (giving the line above row 1 its own single source). Every other row * gets just the bottom layer — so each interior seam is drawn by exactly * one row's bottom line instead of two rows' lines stacking, and the line * below row 5 is still that row's own single bottom layer. Six lines * total (above row 1, four interior seams, below row 5), all now the same * single 0.15-alpha weight — recolouring only the outer two, as explicitly * ruled out, would have left the interior four still doubled. */ .adhd-landing .adhd-classes__row { box-shadow: 0 1px rgb(var(--border-color)); } .adhd-landing .adhd-classes__row:first-child { box-shadow: 0 1px rgb(var(--border-color)), 0 1px rgb(var(--border-color)) inset; } /** * Row title/number: proposed token, flagged in this round's report as * pending confirmation — var(--text-h5), the same SIZE this page's * "lead" token already uses ("It gets personal."), but Kalice-Regular * rather than lead's Kalice-Italic, since a row title is a label, not an * emphasised line. Sits between "display" and "body" as asked. */ .adhd-landing .adhd-classes__row-title { font-family: 'Kalice-Regular' !important; font-size: var(--text-h5); padding-inline-end: 1.5rem; } .adhd-landing .adhd-classes__row-body { font-size: 0.875rem; line-height: 1.6; max-width: 65ch; } /** * Toggle: a CSS-only plus/minus (two bars forming a +; the vertical bar * fades/rotates away under accordion-disclosure.is-open, leaving only * the horizontal bar as a −), replacing the other accordions' rotating * arrow SVG on this section specifically, per explicit request for a * literal +/− swap. No extra JS — AccordionDisclosure (js/theme.js) * already toggles .is-open on the element itself * regardless of what the summary contains. */ .adhd-landing .adhd-classes__toggle { position: relative; width: 1rem; height: 1rem; flex-shrink: 0; } .adhd-landing .adhd-classes__toggle::before, .adhd-landing .adhd-classes__toggle::after { content: ''; position: absolute; top: 50%; left: 50%; background: currentColor; transform: translate(-50%, -50%); } .adhd-landing .adhd-classes__toggle::before { width: 1rem; height: 1.5px; } .adhd-landing .adhd-classes__toggle::after { width: 1.5px; height: 1rem; transition: opacity 0.2s ease, transform 0.2s ease; } .adhd-classes__row.is-open .adhd-classes__toggle::after { opacity: 0; transform: translate(-50%, -50%) rotate(90deg); } /** * Prose measure: ~65 characters per line, at the theme's own default body * size (font-size intentionally left alone — see the heading-scale * override above; the ratio problem was the headings, not the body). * Scoped away from heading-sized paragraphs (.h1-.h7) and .text-subdued * captions so pull-quotes, punchlines and attribution lines are unaffected. */ .adhd-landing .prose :where(p, ul, ol):not(.h1, .h2, .h3, .h4, .h5, .h6, .h7, .text-subdued) { max-width: 65ch; margin-inline: auto; line-height: 1.6; } /** * The recurring 25px offset: the rule above's margin-inline: auto centres * paragraphs within their own 65ch measure, but a left-aligned heading * (like "A note from Pernille", prose-justify-start) stays at the box's * actual left edge — the two only match when the measure box is exactly * as wide as its parent, otherwise the centred paragraph drifts inward. * Scoped to .prose-justify-start only, so centred prose blocks elsewhere * keep the rule above untouched. */ .adhd-landing .prose-justify-start :where(p, ul, ol):not(.h1, .h2, .h3, .h4, .h5, .h6, .h7, .text-subdued) { margin-inline: 0 auto; } /* [Removed] .adhd-reviews__eyebrow — the eyebrow markup itself (the two-line "Mindful Microdosing & Mindful Microdosing Program" / "verified reviews" badge) was deleted from page-adhd.php this round. It was static text, not an ACF field — nothing to report as unused data. */ /** * Reviews, full rebuild: new palette, one review visible at a time (no * more 3-then-clipped scroll-carousel), no card surface — the quote sits * directly on the section's own background, matching the reference. * * --subheading-* custom properties dropped along with the eyebrow markup * above (nothing in this section reads them any more). */ #mabel-adhd-reviews .adhd-reviews-mm-scheme { --background: 85 112 142; --text-color: 255 255 255; } /** * "What our clients say" — corrected: the previous round assumed .h3 * defaulted to Aspekta with "no font-family override needed". Wrong, * confirmed live — style.css forces `h1, .h2, .sm\:h3, .h6, .h3, .h4, .h5, * .prose :where(h1,h2,h3,h4,h5,h6), .display-m { font-family: * 'Kalice-Regular' !important; }`, which this heading's own .h3 class * matched the whole time, rendering serif instead of the requested * Aspekta. Needs its own !important to beat that. font-size also cut * drastically (h3's own fluid clamp computed ~29px, reading as competing * with the quote rather than labelling it) — 0.8125rem (13px) matches the * plain kicker/eyebrow size already used elsewhere on this page. */ .adhd-landing .adhd-reviews-mm__heading { font-family: 'Aspekta 400', sans-serif !important; font-size: 0.8125rem !important; text-transform: uppercase; letter-spacing: 0.08em; } /** * Section height: desktop unchanged (563px, matched to the hero, measured * live at 1024px-wide desktop). Mobile RE-DERIVED this round: previously * 512px (also hero-matched), but that let the section grow taller for * Nomerz — the longest of the five reviews — since 512px was a min-height * and Nomerz's natural content span exceeds it. That growth is exactly * what this round was asked to stop: the section must not change height * as the user moves between slides. * * Re-measured properly rather than patching the old number: with * min-height temporarily neutralised, Nomerz's natural content span * (heading top to nav bottom) is 552.265625px at BOTH 375px and 430px * viewport widths (this exact review happens to wrap to 9 quote lines at * both — verified directly, not assumed, since equal values at two * different widths would otherwise look like a measurement bug) — the * true worst case across the mobile range, confirmed by spot-checking * 600px (459.875px, already well under) to rule out a taller case between * 430 and the 699px ceiling of this bucket. Locked mobile height is that * 552.265625px ceiled to a whole pixel: 553px. Philipp (the shortest * review) spans only 429.078125px (375px) / 398.28125px (430px) natural * content height, so it sits well inside 553px with room to spare — see * the align-content rule below for how that spare room is distributed. * * Both breakpoints now use `height`, not `min-height`: min-height was the * right choice when the box only needed to be AT LEAST as tall as the * hero, but a locked height that must never change between slides needs a * hard ceiling too. Both values were derived from the tallest slide at * each breakpoint (desktop already confirmed Nomerz fits inside the * existing 563px at every desktop width checked — 530.265625px at 768px, * 491.0703125px at 1024px, both comfortably under), so neither should * clip in normal use; a review edited to be longer than Nomerz in * wp-admin would need this re-measured. */ @media screen and (max-width: 699px) { .adhd-landing .adhd-reviews-mm { height: 553px; } } @media screen and (min-width: 700px) { .adhd-landing .adhd-reviews-mm { height: 563px; } } /** * Vertical centring, now both breakpoints. Previously desktop-only: mobile * was carrying content that met or exceeded its old 512px min-height, so * there was no leftover space to distribute and align-content: start was * reported back as already correct. That's no longer true now that mobile * is locked to 553px (Nomerz's own height, but taller than every other * slide) — Philipp and the other shorter reviews now sit inside real * leftover space on mobile too, the same shape of gap the desktop fix * addressed. Centring both breakpoints on the same rule rather than * keeping mobile on the component's align-content: start default. */ .adhd-landing .adhd-reviews-mm { align-content: center; } /** * One slide visible at a time, centred, no card. .adhd-reviews-mm__slide * is a plain block (display:none / .is-active swaps it to block) rather * than the old scroll-snap grid — nothing to scroll, so nothing to fight * ScrollCarousel's .select()/.next() over (see git history for how many * rounds that took to work around instead of just replacing). */ .adhd-landing .adhd-reviews-mm__slider { max-width: 860px; width: 100%; } .adhd-landing .adhd-reviews-mm__slide { display: none; flex-direction: column; align-items: center; } .adhd-landing .adhd-reviews-mm__slide.is-active { display: flex; } /* Order reversed a previous round: quote now comes first in the slide, stars and name below it — margin moved from margin-block-end to margin-block-start accordingly. Increased this round: 1.5rem (24px) to 2rem (32px) — this gap sits inside one slide (quote and stars are both children of the same .slide, not v-stack siblings), so this margin IS the whole gap, no other contribution to account for. Part of a three-part rebalance with .adhd-reviews-mm__arrow and .adhd-reviews-mm__dots below — see the note on those for why the upper half needed MORE space and the lower half needed less. */ .adhd-landing .adhd-reviews-mm__stars { justify-content: center; margin-block-start: 2rem; } /** * Quote: tried Kalice Italic this round, reverted back to Kalice Regular. * Diagnosed properly before reverting rather than patching: with no * overflow: hidden on the quote or any ancestor (checked live, none found) * and line-height at a generous 1.4 (39.2px of leading at the 28px desktop * size — comfortably more than the font's own em-box), a layout cause was * already unlikely. Confirmed it directly instead of assuming: blew the * quote up to 80px inline on the live page — the "y" in "healthy", * "playfully" and "happy" still clipped its descender at that size, in the * same italic face, under the same line-height. Swapping ONLY the * font-family to Kalice-Regular on that same oversized, same-line-height * element produced a full, uncropped descender on every one of those * words. Since size and line-height were held constant and only the font * changed, this rules out line-height/em-box clipping and rules out an * overflow ancestor (both already checked, and neither would explain * Regular rendering clean under identical conditions) — it isolates the * clipping to the Kalice-Italic font file's own "y" glyph outline. This * also means the earlier "small-size rendering artifact, clears above * ~21px" conclusion from the science accordion was wrong: it does not * clear at any size, including 80px, because it is not a size artifact. * Reverted to Kalice-Regular per instruction not to ship clipped * descenders when the cause is the font file itself. * * !important still required: confirmed live the quote was actually * rendering in Aspekta-400 despite this rule, because of a THIRD * custom.css collision on this page (beyond the two already documented in * the file docblock) — `p, a, .subheading, .text-sm, .button__content, * .text-with-icon, .prose, ul, ol { font-family: 'Aspekta-400' !important; * }` (custom.css ~63), which catches every bare

    site-wide regardless * of its own class. A two-class selector can't outrank an !important rule * no matter how specific it is; matching it with !important here is the * only way to win. */ .adhd-landing .adhd-reviews-mm__quote { font-family: 'Kalice-Regular', serif !important; font-style: normal; font-size: 1.375rem; line-height: 1.4; color: rgb(var(--text-color)); } @media screen and (min-width: 700px) { .adhd-landing .adhd-reviews-mm__quote { font-size: 1.75rem; } } /** * Name: plain white, normal weight, no case/spacing/dimming treatment — * reversed from the previous round's uppercase/bold/85%-opacity version at * explicit request. font-family needs the same !important as the quote * above, for the same custom.css collision (this is also a bare

    ). */ .adhd-landing .adhd-reviews-mm__name { margin-block-start: 1.25rem; font-family: 'Aspekta 400', sans-serif !important; font-size: 0.8125rem; font-weight: 400; color: rgb(var(--text-color)); } /** * Arrows and dots: wrapped in one shared .adhd-reviews-mm__nav container * this round (previously two separate v-stack children). Diagnosed before * changing anything, live: the visible arrows-to-dots gap was NOT simply * "dots' own margin" — .adhd-reviews-mm (the v-stack wrapping heading/ * slider/nav) has its own ambient gap (3rem/48px desktop, 2.5rem/40px * mobile — .gap-10/.sm:gap-12), and with arrows+dots as separate direct * v-stack children, that ambient gap applied between them on top of * whatever margin sat on .dots. Measured 56px desktop / 48px mobile after * the previous round's margin reduction (0.5rem) — most of that is the * v-stack's own gap, not the margin, so halving the margin again would * have made almost no visible difference. * * Wrapping removes arrows+dots from the v-stack's direct-children gap * rhythm entirely: the v-stack's ambient gap now applies once, between the * slider and this .adhd-reviews-mm__nav wrapper (which carries the * previous "name to arrows" margin itself, unchanged at 1rem — so that * gap stays exactly 64px desktop / 56px mobile, not touched this round). * Arrows-to-dots is now a plain flex column gap fully inside this wrapper, * with zero ambient contribution. * * That 0.5rem (8px) first pass overshot — measured live, dots sat almost * flush against the arrow circles. Reopened to roughly halfway between the * two values this gap has actually been at: the pre-wrapper figure (56px * desktop / 48px mobile, mostly the v-stack's own ambient gap) and the * post-wrapper 8px. Halfway is 32px desktop / 28px mobile — set below by * breakpoint rather than one flat number, since the two endpoints being * averaged were themselves breakpoint-dependent. */ .adhd-landing .adhd-reviews-mm__nav { display: flex; flex-direction: column; align-items: center; gap: 1.75rem; margin-block-start: 1rem; } @media screen and (min-width: 700px) { .adhd-landing .adhd-reviews-mm__nav { gap: 2rem; } } .adhd-landing .adhd-reviews-mm__arrows { display: flex; align-items: center; justify-content: center; gap: 0.75rem; } /** * Shrunk from 44px to 36px (both breakpoints — measured live first: this * button rendered at an identical 44px diameter, 20px glyph, on both * desktop and mobile already, so one new size covers both rather than * needing to differ). Glyph scaled down with it at the same ratio * (20/44 ~= 0.4545) to 16px (16/36 ~= 0.444), so the circle and the arrow * stay in the same proportion rather than the glyph looking oversized * against a smaller circle. * * The 44px tap target is kept, but on a DIFFERENT box than the visible * circle: box-sizing is overridden to content-box (the site's global * reset otherwise makes every element border-box) specifically so the * padding below ADDS to the 36px content box instead of eating into it — * 36px content + 4px padding on each side = 44px total clickable button, * matching the original tap target exactly. The border and background * that draw the actual visible circle moved to ::before, sized to the * padding-inset area (36px, inset: 4px), because a border/background * directly on the button would always paint at the OUTER edge of its * padded box regardless of padding — the only way to have a click area * bigger than the visible circle is to put the circle on a separate box. */ .adhd-landing .adhd-reviews-mm__arrow { position: relative; box-sizing: content-box; display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; padding: 4px; border-radius: 50%; border: none; background: transparent; color: rgb(var(--text-color)); font-size: 1rem; line-height: 1; cursor: pointer; } .adhd-landing .adhd-reviews-mm__arrow::before { content: ''; position: absolute; inset: 4px; border-radius: 50%; border: 1px solid rgb(var(--text-color) / 0.55); pointer-events: none; } .adhd-landing .adhd-reviews-mm__arrow:hover::before { border-color: rgb(var(--text-color)); } .adhd-landing .adhd-reviews-mm__dots { display: flex; justify-content: center; gap: 0.5625rem; } .adhd-landing .adhd-reviews-mm__dot { width: 8px; height: 8px; padding: 0; border: 1px solid rgb(var(--text-color) / 0.8); border-radius: 50%; background: transparent; cursor: pointer; } .adhd-landing .adhd-reviews-mm__dot.is-active { background: rgb(var(--text-color)); } /* New section: "Different by Design. Not Disordered." Colour scheme is a plain light-on-navy-text pair, not one of the theme's existing named schemes (color-scheme--light etc. use pure black text; the brief asked for #14263B specifically, "not pure black"). */ #mabel-adhd-different-by-design .adhd-dbd-scheme { --background: 250 250 248; --text-color: 20 38 59; } /** * Height: previously locked to Reviews'/Hero's fixed values (563px * desktop, shortened to 380px mobile in an earlier polish round) with * align-content: center. Removed entirely this later polish round, at * explicit request — even the shortened mobile figure and the * still-untouched desktop 563px both left a large empty area around the * content, and the ask was to match the OTHER PROSE sections instead of * the Hero/Reviews locked-height group. This section now sizes to its own * content with the theme's default .container.section-spacing at both * breakpoints, same as Practice/Five Core Classes elsewhere on this page * (see their own comments for the equivalent change, both polish rounds). */ /** * Heading wrapper: centred as a BLOCK (justify-items-center on the parent * v-stack already shrinks this to content width and centres that block), * but text-align is overridden back to left here so the two lines inside * don't individually centre relative to each other — line 2's indent * below only reads as "shifted right" if line 1 is the stable left edge * both lines share. */ .adhd-landing .adhd-dbd__heading-wrap { text-align: left; } /** * Matched to the Hero headline's own font-size token (var(--text-h1)) at * explicit request, rather than a fixed px value copied from a one-time * measurement — both this heading and the Hero's

    read the * exact same --text-h1 custom property (itself built from * --text-heading-size-factor, overridden to 0.62 for the whole page just * above in this file), so they track together at every viewport width * automatically, including if that factor or the underlying clamp() is * ever changed again. This also makes the heading SMALLER than the * .display-m it used before (text-h1's clamp bounds are 3rem-5.75rem vs * display-m's 3.25rem-6.875rem — h1 is smaller at every width in * between), which is why the two-line wrap check in this round's report * matters less than it otherwise would, but was still verified live * rather than assumed safe. */ .adhd-landing .adhd-dbd__heading { font-size: var(--text-h1); } /** * width: fit-content is deliberate, not just display: block — each line's *

    ancestor stretches to the width of its WIDEST line (line 1, "Different * by Design."), so a plain display: block line 2 would stretch to that same * width too. Combined with margin-inline-start below, that made line 2's * own box shrink by exactly the margin instead of just shifting — its RIGHT * edge ended up pinned to line 1's right edge (verified live: both landed * on the exact same rect.right), not a pure rightward shift of the start. * fit-content makes each line's box match only its own text width, so the * margin purely repositions it. */ .adhd-landing .adhd-dbd__line { display: block; width: fit-content; } /** * Line 1, "Different by Design.": no font-family rule needed — .display-m * on the parent

    already forces Kalice-Regular via style.css's own * h1-h6/.display-* collision (documented in this file's top docblock). * * Line 2 was "Not Disordered." (whole line italic, needing its own * !important to beat the forced Kalice-Regular rule) — changed this round * to "Not Dis-ordered.", with only "Dis" italic. The indent (still a * PLACEHOLDER — no reference screenshot was available at build time, * flagged to the user, not a measured/confirmed value) stays on the OUTER * line wrapper below, since it positions the whole line regardless of * which part of it is italic; the actual italic font-family swap moved to * a new inner class, .adhd-dbd__line-italic-part, scoped to just the * "Dis" span in page-adhd.php. */ .adhd-landing .adhd-dbd__line--indent { margin-inline-start: 0.9em; } .adhd-landing .adhd-dbd__line-italic-part { font-family: 'Kalice-Italic', serif !important; font-style: normal; } /** * Body: no font-family rule needed either — this is a bare

    , which * custom.css's site-wide collision (`p, a, ... { font-family: * 'Aspekta-400' !important; }`, documented in the top docblock) already * forces to Aspekta regardless of the page's default (which is Aspekta * anyway, per style.css's plain `body { font-family: 'Aspekta 400'; }` * with no !important) — confirmed live rather than assumed, see this * round's report. */ /** * Reduced 1.5rem (24px) to 1rem (16px). Measured live rather than * assumed: this margin isn't the whole visible gap — heading-wrap and * this paragraph's own wrapper are separate .adhd-dbd (v-stack) children, * so the v-stack's own ambient gap (40px mobile / 48px desktop) adds on * top of it, same compounding pattern as the Reviews arrows-to-dots gap * earlier. Total visible gap (heading-wrap bottom to the paragraph's own * text top) was 72px desktop / 64px mobile; this drops it to 64px desktop * / 56px mobile — the ambient v-stack gap itself is untouched. */ .adhd-landing .adhd-dbd__body { margin-block-start: 1rem; } /** * Image added alongside the text (see page-adhd.php's own comment on * .adhd-dbd__image for why .adhd-dbd__text exists — it now carries the * justify-items-center/gap .adhd-dbd used to have, so heading/body * spacing and centring are unaffected by this). .adhd-dbd itself stays a * single-column v-stack on mobile (text first, image below — already the * desired order since .adhd-dbd__text comes first in the DOM, same * reasoning as Why Microdosing's own image needing no mobile-specific * rule) and becomes the two-column layout at >=700px below. * * justify-items: stretch overrides the inherited justify-items-center * utility class on .adhd-dbd: that centring is now handled one level * deeper by .adhd-dbd__text's own copy of the same class, so .adhd-dbd's * two direct children (the text column and the image column) need to * span their full grid track width instead of shrinking to fit-content — * otherwise the image, sized by percentage below, would have nothing to * size against. */ .adhd-landing .adhd-dbd { justify-items: stretch; } /* No max-width here — mobile fills the full content width as specified; in practice this container is already well under 560px below 700px. */ .adhd-landing .adhd-dbd__image img { width: 100%; height: auto; } @media screen and (min-width: 700px) { .adhd-landing .adhd-dbd { grid-template-columns: repeat(2, minmax(0, 1fr)); /* Text and image vertically centred against each other. */ align-items: center; } .adhd-landing .adhd-dbd__image img { max-width: 560px; /* Horizontally centred in its column — the column itself stretches full-width (justify-items: stretch above), so once max-width caps the image narrower than that, margin-inline: auto centres it within the remaining space. */ margin-inline: auto; } } /* New section: "It Gets Personal." Bespoke colour scheme, not one of style.css's named .color-scheme--* variants, so --button-background-primary and --button-text-primary need setting explicitly alongside --background/ --text-color — otherwise the READ MORE button falls back to invalid custom properties and effectively disappears, the same bug already documented elsewhere on this page for a bare color-scheme. Solar for the button background doubles as the bullet-marker colour below; navy text on it rather than pure black, matching Different by Design's own body colour. */ #mabel-adhd-relationships .adhd-relationships-scheme { --background: 102 23 46; --text-color: 255 255 255; --button-background-primary: 229 178 71; --button-text-primary: 20 38 59; } /** * The whole content block: one column, left-aligned internally, the block * itself centred as a unit by the .rich-text.justify-items-center wrapper * around it (same idiom already used elsewhere on this page for a single * centred block — see the Our Data footnote). max-width keeps line length * readable at wide desktop widths without constraining anything at mobile. */ .adhd-landing .adhd-relationships__block { max-width: 46rem; text-align: left; } /** * Heading: plain .h1 for var(--text-h1)'s SIZE (same token as the Hero * headline and Different by Design), but needs its own font-family AND * text-transform here — see the fourth collision documented in this * file's top docblock: style.css's rule that forces Kalice-Regular and * neutralises --heading-text-transform (~line 9492) lists the bare `h1` * TAG and the `.h2`-`.h6`/`.display-m` CLASSES, but not the `.h1` CLASS * itself. This heading uses `.h1` on a

    (to get var(--text-h1)'s * size without a second

    on the page) and matches none of that * rule's selectors, so BOTH properties fell through to the earlier, more * generic heading block instead: font-family fell back to whatever the * theme's default heading font is (confirmed live: rendered as * "Bricolage Grotesque", not Kalice-Regular at all), and text-transform * fell back to the unresolved --heading-text-transform variable * (lowercase here — silently lowercasing "ADHD" to "adhd"). Different by * Design's own heading uses `.display-m` instead and is covered by that * rule already; this is the first heading on the page to hit this gap. * Confirmed live via getComputedStyle before concluding either of these, * not assumed from reading the CSS alone. Both fixed directly here rather * than relying on incidental collision-list membership. */ .adhd-landing .adhd-relationships__heading { margin-block-end: 2.5rem; font-family: 'Kalice-Regular' !important; text-transform: none; } /** * "we don't always recognise" — Kalice Italic, same size as the rest of * the heading (inherits font-size from .adhd-relationships__heading/.h1; * only font-family/font-style change here). Checked for the descender * clipping already found twice on this page (Reviews quote, Science * accordion) — both "y"s here ("always", "recognise") are at display * size (51.64px desktop / 33.6px at 375px), confirmed live rather than * assumed clear just because the earlier clipping was at smaller sizes; * see this round's report. */ .adhd-landing .adhd-relationships__heading-italic { font-family: 'Kalice-Italic' !important; font-style: normal; } /** * Bullets: a real