/** * Sick Not Weak (SNW) — Site-specific CSS overrides. * * Loaded LAST (highest cascade priority). Only SNW design that cannot be done * via the Blocksy Customizer. * * SNW global styling (Aktiv Grotesk typography, brand palette, button colours) * is configured in the Blocksy CUSTOMIZER (theme_mods) — do NOT duplicate it here. * * Decision checklist: Would this rule make sense on another MDSC site? * YES → assets/css/components/{component}.css NO → here. * * RULES: var(--theme-…, #fallback) for every token · WHY + @date per rule · no !important. * * SNW brand tokens (exposed by the Customizer palette, for reference when writing rules): * --theme-palette-color-1 links/accent #3689F5 * --theme-palette-color-2 link/button hover #2B6EC4 * --theme-palette-color-3 body text #111111 * --theme-palette-color-4 brand red #AF272F * --theme-palette-color-7 page background #F5F5F5 * --theme-palette-color-8 surfaces #FFFFFF * --theme-palette-color-9 brand dark #231F20 * --theme-palette-color-10 grey #909090 * * @package MDSC_Child * @site Sick Not Weak */ /* ============================================================================ HOME HERO — faithful port of the legacy `snw` theme home_hero module. Rendered by [mdsc_snw_home_hero] (sites/snw/snw.php). The Customizer cannot build this layered hero (full-bleed photo + content + red quote band with a diagonal SVG transition), so it lives here. px→rem values are lifted verbatim from the compiled snw theme CSS (root font-size 16px, same as Blocksy); brand colours use the Customizer palette with hex fallbacks. Font = Aktiv Grotesk (Adobe Typekit, already loaded site-wide). @date 2026-06-08 ============================================================================ */ /* Full-bleed: the markup carries `alignfull`, so WP's constrained-layout rule (.is-layout-constrained > :not(.alignfull) { max-width; margin:auto !important }) no longer constrains it — this breakout then resolves to true 100vw. */ .homeHero { position: relative; width: 100vw; max-width: 100vw; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); } /* Hero sits flush under the header on the homepage — Blocksy's content wrapper (.ct-container-full) adds 60px top padding, leaving a grey gap above the hero. Zero it on the front page only (the hero is always the first block there). */ body.home #main .ct-container-full { padding-top: 0; } /* innerWrap — legacy snw layout container (not a Blocksy construct). */ .homeHero .innerWrap { margin: 0 auto; } .homeHero .innerWrap.innerWrapLg { width: 80rem; } .homeHero .heroBgImage { position: absolute; width: 100%; height: 130vh; height: calc(100vh - 8.125rem + 20.9375rem); /* header height + hero-bg-top image */ overflow: hidden; } .homeHero .heroBgImage > img { object-fit: cover; max-width: none; width: 100%; height: 100%; } .homeHero .heroSectionTop { height: 91vh; height: calc(100vh - 8.125rem); /* header height */ position: relative; } .homeHero .heroSectionTop > .innerWrap { height: 100%; } .homeHero .heroSectionTop .heroSectionTopInner { display: table; width: 100%; height: 100%; } .homeHero .heroSectionTop .heroSectionTopInner > div { display: table-cell; vertical-align: middle; } .homeHero .heroSectionTop .heroSectionTopInner > div > div { position: relative; } .homeHero .heroSectionTop .heroSectionTopContent { width: 40.625rem; } .homeHero .heroSectionTop .heroSectionTopContent .title2Heading { width: 36.25rem; } /* Hero headings — legacy title1/title2 classes (altTitle renders ). */ .homeHero .title1Heading { display: block; font-size: 7.5rem; line-height: 6.875rem; letter-spacing: -0.1875rem; font-family: "aktiv-grotesk", "helvetica", "arial", sans-serif; font-weight: 900; margin-bottom: 1.875rem; color: var(--theme-palette-color-3, #111111); } .homeHero .title1Heading:last-child { margin-bottom: 0; } .homeHero .title2Heading { display: block; font-size: 2rem; line-height: 2.5rem; letter-spacing: -0.0625rem; font-family: "aktiv-grotesk", "helvetica", "arial", sans-serif; font-weight: 700; margin-bottom: 0; color: var(--theme-palette-color-3, #111111); } /* Red quote band + diagonal SVG transition. */ .homeHero .heroSectionBottom { color: var(--theme-palette-color-8, #ffffff); position: relative; } .homeHero .heroSectionBottom::before, .homeHero .heroSectionBottom::after { content: ""; position: absolute; top: 0; left: 0; background: var(--theme-palette-color-4, #af272f); width: calc((100% - 79.875rem) / 2); height: 100%; } .homeHero .heroSectionBottom::after { left: auto; right: 0; } .homeHero .heroSectionBottom.heroIsQuote h1 { margin-bottom: 2.5rem; } .homeHero .heroSectionBottom .innerWrap { position: relative; overflow: hidden; padding-top: 4rem; padding-bottom: 5rem; background: url("img/hero-bg-top.svg") no-repeat top center transparent; background-size: 100% auto; } .homeHero .heroSectionBottom .innerWrap > div { position: relative; z-index: 1; width: 52.75rem; } .homeHero .heroSectionBottom .innerWrap::before { content: ""; position: absolute; top: 20.9375rem; /* height of hero-bg-top image */ left: 0; width: 100%; height: 100%; background: var(--theme-palette-color-4, #af272f); } /* Quote-band typography: legacy snw base

is 88/88 @800 — NOT Blocksy's 120px H1 Customizer mapping — so override explicitly + force white. */ .homeHero .heroSectionBottom h1 { font-size: 5.5rem; line-height: 5.5rem; letter-spacing: -0.125rem; font-family: "aktiv-grotesk", "helvetica", "arial", sans-serif; font-weight: 800; color: var(--theme-palette-color-8, #ffffff); } .homeHero .heroSectionBottom h3 { font-size: 1.5rem; line-height: 2rem; font-weight: 800; margin-top: 1.25rem; color: var(--theme-palette-color-8, #ffffff); } /* CTA — renders only when a hero link exists (SNW front page has none). */ .homeHero .heroSectionTop .heroSectionTopContent .btn.highEmph { display: inline-block; margin-top: 1.875rem; color: var(--theme-palette-color-8, #ffffff); background: var(--theme-palette-color-4, #af272f); text-align: center; padding: 1rem 1.5rem; border-radius: 1.5rem; text-decoration: none; font-weight: 500; } .homeHero .heroSectionTop .heroSectionTopContent .btn.highEmph:hover { background: var(--theme-palette-color-2, #2b6ec4); } /* ---- Responsive (lifted from compiled snw heros.css) ---- */ @media only screen and (max-width: 1330px) { .homeHero .innerWrap.innerWrapLg { width: 55.625rem; } .homeHero .heroBgImage { height: 116vh; height: calc(100vh - 6.25rem + 15.6875rem); } .homeHero .heroSectionTop { height: calc(100vh - 6.25rem); } .homeHero .heroSectionBottom .innerWrap { background-position: top right -5.3125rem; width: 60rem; } .homeHero .heroSectionBottom .innerWrap > div { width: 41.875rem; padding-left: 2.1875rem; } .homeHero .heroSectionBottom .innerWrap::before { top: 15.6875rem; } .homeHero .heroSectionBottom::before { width: calc(((100% - 55.625rem) / 2) + 5.3125rem); } .homeHero .heroSectionBottom::after { left: auto; right: 0; width: calc(((100% - 55.625rem) / 2) - 2.125rem); } .homeHero .title1Heading { font-size: 6.875rem; line-height: 6.25rem; } .homeHero .heroSectionBottom h1 { font-size: 5rem; line-height: 5rem; } } @media only screen and (max-width: 1008px) { .homeHero .innerWrap.innerWrapLg { width: 90%; } .homeHero .heroBgImage { height: 85vh; height: calc(100vh - 6.25rem); } .homeHero .heroSectionBottom { background: var(--theme-palette-color-4, #af272f); } .homeHero .heroSectionBottom .innerWrap { background: transparent; width: 90%; padding-bottom: 8.75rem; } .homeHero .heroSectionBottom .innerWrap > div { width: 100%; padding-left: 0; } .homeHero .heroSectionBottom .innerWrap::before { display: none; } .homeHero .heroSectionBottom::before, .homeHero .heroSectionBottom::after { display: none; } } @media only screen and (max-width: 900px) { .homeHero .heroBgImage { height: 100vh; opacity: 0.85; } .homeHero .heroSectionTop { height: 100vh; } .homeHero .heroSectionTop .heroSectionTopInner { position: relative; top: -5rem; } .homeHero .heroSectionTop .heroSectionTopInner > div { vertical-align: bottom; } .homeHero .heroSectionTop .heroSectionTopContent { padding-bottom: 3.125rem; } } @media only screen and (max-width: 800px) { .homeHero .title1Heading { font-size: 6.25rem; line-height: 5.9375rem; } .homeHero .heroSectionBottom h1 { font-size: 4.0625rem; line-height: 4.1875rem; } /* 65/67 — matches legacy bare h1 */ } @media only screen and (max-width: 700px) { .homeHero .heroSectionTop .heroSectionTopContent { width: 100%; } .homeHero .heroSectionTop .heroSectionTopContent .title2Heading { margin-bottom: 0; } .homeHero .heroSectionTop .heroSectionTopContent .btn { display: none; } } @media only screen and (max-width: 600px) { .homeHero .title1Heading { font-size: 5.3125rem; line-height: 4.6875rem; } .homeHero .heroSectionTop .heroSectionTopContent .title2Heading { width: 100%; } .homeHero .heroSectionBottom .innerWrap { padding-top: 6.5625rem; padding-bottom: 6.5625rem; } .homeHero .heroSectionBottom h1 { font-size: 3.375rem; line-height: 3.5rem; } /* 54/56 */ } @media only screen and (max-width: 500px) { .homeHero .heroSectionTop .heroSectionTopContent { width: 18.75rem; } .homeHero .heroSectionTop .heroSectionTopContent .title2Heading { font-size: 1.875rem; line-height: 2.375rem; } /* 30/38 — matches legacy */ .homeHero .heroSectionBottom h1 { font-size: 3rem; line-height: 3.125rem; } /* 48/50 */ } @media only screen and (max-width: 420px) { .homeHero .heroSectionTop .heroSectionTopContent { width: 100%; } .homeHero .heroSectionTop .heroSectionTopContent .title1Heading { margin-bottom: 0; } .homeHero .heroSectionTop .heroSectionTopContent .title2Heading { display: none; } .homeHero .heroSectionBottom h1 { font-size: 2.5rem; line-height: 2.625rem; } /* 40/42 — matches legacy mobile */ } /* ============================================================================ SICKTERSCALE GRAPH — rendered by [mdsc_snw_sickter_graph] (sites/snw/snw.php). Faithful port of the legacy snw `sickterScale.css` graph rules (last-30-days mood bar graph via ECharts). px→rem lifted from the compiled snw CSS; brand grey via the Customizer palette token. @date 2026-06-08 ============================================================================ */ .barGraphWrap { overflow-x: auto; } .sickterScaleGraphWrap .smallPara { font-size: 0.75rem; line-height: 1rem; font-family: "aktiv-grotesk", "helvetica", "arial", sans-serif; } .sickterScaleGraphWrap .sickterScaleOverview { margin-bottom: 1.875rem; } .sickterScaleGraphWrap .sickterScaleOverview::after { content: ""; display: table; clear: both; } .sickterScaleGraphWrap .sickterScaleOverview .smallPara { color: var(--theme-palette-color-10, #909090); margin-bottom: 0.625rem; } .sickterScaleGraphWrap .sickterScaleOverview > div { float: left; } .sickterScaleGraphWrap .sickterScaleOverview > div + div { float: right; text-align: center; } .sickterScaleGraphWrap .sickterScaleGraph { height: 17.1875rem; width: 66.25rem; max-width: 100%; } .sickterScaleGraph_noResults { padding: 2rem 0; color: var(--theme-palette-color-10, #909090); } /* ============================================================================ SICKTERSCALE MODAL — rendered by [mdsc_snw_sickter_form] inside a Blocksy Pro Popup Content Block (sites/snw/snw.php). Faithful port of the legacy snw `sickterScale.css` modal rules: two-column (brain image | form), the big red floating number over the 1–10 select, and the animated "Got it! Thanks!" success state. Brand colours via Customizer palette tokens (red -4, grey -10, link/hover blue -2). The success thumbs-up is an inline SVG (no Material Icons font dependency, unlike the legacy theme). @date 2026-06-22 ============================================================================ */ .sickterScaleModalContent { display: table; width: 100%; border-radius: 8px; overflow: hidden; } .sickterScaleModalContent .left, .sickterScaleModalContent .right { display: table-cell; vertical-align: middle; } .sickterScaleModalContent .left { width: 27.25rem; background: url("img/sickterscale-image.png") no-repeat center center transparent; background-size: cover; } .sickterScaleModalContent .right { width: 29rem; } .sickterScaleModalContent .right > div { padding: 2.1875rem 1.875rem 2.5rem; } .sickterScaleModalContent .right > div > div { text-align: center; position: relative; } .sickterScaleModalContent .right .sickterScaleLogo { margin-bottom: 1.5625rem; } .sickterScaleModalContent .right h2 { margin-bottom: 1.25rem; } .sickterScaleModalContent .right .sickDisclaimer { margin-bottom: 0; } .sickterScaleModalContent .right .smallPara { font-size: 0.75rem; line-height: 1rem; color: var(--theme-palette-color-10, #909090); font-family: "aktiv-grotesk", "helvetica", "arial", sans-serif; } /* Form + the floating number over the select. */ .sickterScaleModalContent #sickterScaleForm { position: relative; z-index: 2; margin-top: 2.5rem; padding-bottom: 0.5rem; opacity: 1; transition: opacity 0.5s ease; } .sickterScaleModalContent #sickterScaleForm.sickterFormSubmited { opacity: 0; } .sickterScaleModalContent .sickterScaleSelectWrap { margin-bottom: 1.5625rem; } .sickterScaleModalContent .sickterScaleSelectWrap > div { position: relative; margin: 0 auto; width: 10rem; border-bottom: 0.0625rem solid var(--theme-palette-color-10, #909090); } .sickterScaleModalContent .sickterScaleSelectWrap.invalidRating > div { border-bottom-color: var(--theme-palette-color-4, #af272f); } .sickterScaleModalContent .sickterScaleSelectWrap.invalidRating label { color: var(--theme-palette-color-4, #af272f); } .sickterScaleModalContent .sickterScaleSelectWrap.invalidRating .customArrow::before, .sickterScaleModalContent .sickterScaleSelectWrap.invalidRating .customArrow::after { background-color: var(--theme-palette-color-4, #af272f); } .sickterScaleModalContent .sickterScaleNumber { display: inline-block; position: absolute; top: 0; left: 0; width: 100%; font-size: 9rem; line-height: 7.5rem; font-family: "aktiv-grotesk", "helvetica", "arial", sans-serif; font-weight: 700; color: var(--theme-palette-color-4, #af272f); pointer-events: none; letter-spacing: -0.9375rem; text-indent: -0.9375rem; transition: color 0.3s ease; } .sickterScaleModalContent .sickterScaleSelectWrap select[name="sickterscale_select"] { position: relative; z-index: 1; width: 100%; text-align: center; background: transparent; border: none; color: transparent; padding: 0 0.625rem; line-height: 7.5rem; height: 7.5rem; border-radius: 0; -webkit-appearance: none; -moz-appearance: none; appearance: none; cursor: pointer; } .sickterScaleModalContent .sickterScaleSelectWrap select[name="sickterscale_select"] option { color: var(--theme-palette-color-9, #231f20); } /* Custom down-chevron under the select. */ .sickterScaleModalContent .customArrow { position: absolute; left: 50%; bottom: -0.3125rem; width: 0.75rem; height: 0.5rem; margin-left: -0.375rem; pointer-events: none; } .sickterScaleModalContent .customArrow::before, .sickterScaleModalContent .customArrow::after { content: ""; position: absolute; top: 0; width: 0.5rem; height: 0.0625rem; background-color: var(--theme-palette-color-10, #909090); } .sickterScaleModalContent .customArrow::before { left: 0; transform: rotate(45deg); } .sickterScaleModalContent .customArrow::after { right: 0; transform: rotate(-45deg); } .sickterScaleModalContent .sickterScaleSelectWrap label { display: block; margin-top: 0.5rem; font-size: 0.75rem; line-height: 1rem; color: var(--theme-palette-color-10, #909090); font-family: "aktiv-grotesk", "helvetica", "arial", sans-serif; } /* Submit + Continue buttons (SNW = red buttons, white text). */ .sickterScaleModalContent .btn { display: inline-block; border: none; cursor: pointer; padding: 0.75rem 1.75rem; border-radius: 2rem; font-weight: 700; font-family: "aktiv-grotesk", "helvetica", "arial", sans-serif; color: #fff; text-decoration: none; background: var(--theme-palette-color-4, #af272f); transition: background 0.3s ease, opacity 0.3s ease; } .sickterScaleModalContent .btn:hover { background: var(--theme-palette-color-5, #8f1f25); } .sickterScaleModalContent .btn.disabled { opacity: 0.5; pointer-events: none; } .sickterScaleModalContent .failedRequest { position: absolute; bottom: -1.25rem; width: 100%; text-align: center; color: var(--theme-palette-color-4, #af272f); } /* Animated success state. */ .sickterScaleModalContent .sickterScaleSuccess { display: none; position: absolute; bottom: 0; z-index: 1; width: 100%; margin-top: 2.5rem; } .sickterScaleModalContent .sickterScaleSuccess.blockSickterScaleSuccess { display: block; } .sickterScaleModalContent .sickterScaleSuccess.relSickterScaleSuccess { position: relative; bottom: auto; } .sickterScaleModalContent .sickterScaleSuccess > div { margin-bottom: 1.5625rem; } .sickterScaleModalContent .sickterScaleThumbsUp { width: 6.875rem; height: 6.875rem; margin: 0 auto 1.25rem; border-radius: 50%; background: #79cc60; color: #fff; display: flex; align-items: center; justify-content: center; opacity: 0; transform: scale(0.4); transition: opacity 0.5s ease, transform 0.5s ease; } .sickterScaleModalContent .sickterScaleSuccess .smallPara { opacity: 0; transform: translateY(1.25rem); transition: opacity 0.5s ease, transform 0.5s ease; } .sickterScaleModalContent .sickterScaleSuccess .btn { opacity: 0; transition: opacity 0.5s ease; } .sickterScaleModalContent .sickterScaleSuccess.transSickterScaleSuccess .sickterScaleThumbsUp { opacity: 1; transform: scale(1); } .sickterScaleModalContent .sickterScaleSuccess.transSickterScaleSuccess .smallPara { opacity: 1; transform: translateY(0); } .sickterScaleModalContent .sickterScaleSuccess.transSickterScaleSuccess .btn { opacity: 1; } @media only screen and (max-width: 760px) { .sickterScaleModalContent { display: block; } .sickterScaleModalContent .left { display: none; } .sickterScaleModalContent .right { display: block; width: 100%; } } @media only screen and (max-width: 450px) { .sickterScaleModalContent .btn { display: block; width: 100%; } } /* ============================================================================ CONSOLIDATED COMPONENTS — moved from assets/css/components/ on 2026-06-08 so SNW is fully self-contained (per Jayr: everything site-specific lives in sites/snw/). These were previously opt-in via the manifest "styles" array; now they ship with the site's own stylesheet. Re-extract to shared components/ if/when a second MDSC site needs them. Original WHY/@date comments preserved per block. ============================================================================ */ /* ---- breadcrumbs (was components/breadcrumbs.css) ---- Mobile horizontal scroll so long titles don't wrap/clutter. .ct-breadcrumbs is Blocksy core markup; Customizer has no overflow setting. @date 2026-06-05 */ @media (max-width: 689px) { .ct-breadcrumbs { flex-wrap: nowrap; overflow-x: auto; white-space: nowrap; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* IE/old Edge */ -webkit-overflow-scrolling: touch; } .ct-breadcrumbs::-webkit-scrollbar { display: none; /* Chrome/Safari */ } } /* ---- hover-link (was components/hover-link.css) ---- Descendant links hover to the accent. Add `mdsc-hover-link` to a container. The nav-item selector raises specificity above WP's color:inherit. @date 2026-06-05 */ .mdsc-hover-link a:hover, .mdsc-hover-link a:focus-visible, .mdsc-hover-link a.wp-block-navigation-item__content:hover, .mdsc-hover-link a.wp-block-navigation-item__content:focus-visible { color: var(--theme-palette-color-1, #3689F5); } /* ---- logo-blend (was components/logo-blend.css) ---- Partner/sponsor logos: grey+muted by default, full colour + zoom on hover. Add `mdsc-logo-blend` to a Gallery/Row/Group. LIGHT backgrounds only. @date 2026-06-05 */ .mdsc-logo-blend img, .mdsc-logo-blend.wp-block-image img { mix-blend-mode: multiply; filter: grayscale(1); opacity: 0.7; transition: filter 0.25s ease, opacity 0.25s ease, transform 0.25s ease; } .mdsc-logo-blend img:hover, .mdsc-logo-blend.wp-block-image img:hover { filter: grayscale(0); opacity: 1; transform: scale(1.08); } @media (prefers-reduced-motion: reduce) { .mdsc-logo-blend img, .mdsc-logo-blend.wp-block-image img { transition: filter 0.25s ease, opacity 0.25s ease; } .mdsc-logo-blend img:hover, .mdsc-logo-blend.wp-block-image img:hover { transform: none; } } /* ---- display-headings (was components/display-headings.css) ---- Big display heading + huge stat figure on NON-H1 elements (one H1 per page). Font/colour inherit from the Customizer — never redeclared. @date 2026-06-05 */ .mdsc-display-title { font-weight: 900; letter-spacing: -0.03em; line-height: 0.92; font-size: clamp(3.125rem, 8vw, 7.5rem); } .mdsc-stat-number { font-weight: 900; letter-spacing: -0.03em; line-height: 1.05; /* Matches the live .largeNumbers curve measured 2026-06-08: 120px on desktop easing down to an 85px floor on tablet/mobile. clamp() ceiling 7.5rem(120px), floor 5.3125rem(85px). Works on the

Jayr switched to (block element). */ font-size: clamp(5.3125rem, 8.33vw, 7.5rem); text-align: center; /* live stats are always centred — also fixes the mobile-left issue */ white-space: nowrap; /* keep "$220 B" / "1 in 2" on one line */ margin: 0; /* reset the default

margins */ /* font-family + colour are intentionally NOT set here — owned in the Customizer (Aktiv Grotesk) + Gutenberg Text colour (brand red), per Jayr's split. */ } /* The connector word ("in" of "1 in 2") renders smaller, like live (54px in a 120px figure = 0.45em) AND at the same 900 weight as the figure — matches the legacy .statInText, measured 2026-06-10. (Was 700, which read lighter/odd between the ultra-bold numbers.) The em unit means it scales with the figure at every breakpoint, no per-breakpoint rules needed. You do NOT hand-author this span: mdsc_snw_wrap_stat_connector() in sites/snw/snw.php auto-wraps connector words (in / of / per / out of) at render time, so editing the figure in Gutenberg can never lose the styling. See docs/patterns/stat-number-connector.md. */ .mdsc-stat-number .mdsc-stat-in { font-size: 0.45em; font-weight: 900; } /* Stat caption (the sentence under each figure). Matches live .largePara: 24px/32 desktop → 22px/30 at ≤500px; centred; weight 400 + Aktiv Grotesk inherit from the Customizer. The footnote marker is a superscript LINK to the source (blue #3689F5, underlined — measured from live). @date 2026-06-08 */ .mdsc-stat-caption { font-size: 1.5rem; /* 24px */ line-height: 2rem; /* 32px */ font-weight: 400; text-align: center; /* match live — the core has-text-align-center wasn't taking effect here */ } @media (max-width: 500px) { .mdsc-stat-caption { font-size: 1.375rem; /* 22px */ line-height: 1.875rem; /* 30px */ } } .mdsc-stat-caption sup { font-size: 0.55em; vertical-align: super; } .mdsc-stat-caption sup a { color: var(--theme-palette-color-1, #3689f5); text-decoration: underline; } /* ---- button (was components/button.css) ---- High-emphasis CTA: brand red default → brand blue hover (a two-colour relationship the Customizer's single Buttons panel can't express). Add `mdsc-btn-emphasis` to a Button block. @date 2026-06-05 */ .mdsc-btn-emphasis .wp-block-button__link { background-color: var(--theme-palette-color-4, #af272f); color: var(--theme-palette-color-8, #ffffff); transition: background-color 0.25s ease; } .mdsc-btn-emphasis .wp-block-button__link:hover, .mdsc-btn-emphasis .wp-block-button__link:focus-visible { background-color: var(--theme-palette-color-2, #2b6ec4); color: var(--theme-palette-color-8, #ffffff); } /* ---- story-card (was components/story-card.css) ---- Card skin for a recent-posts / archive Query Loop. Add `mdsc-story-card` to the Query block. Homepage Stories + blog archive + related posts match. All colours via palette tokens. @date 2026-06-05 */ .mdsc-story-card li.wp-block-post { display: flex; flex-direction: column; background: var(--theme-palette-color-8, #ffffff); border-radius: 0.5rem; overflow: hidden; box-shadow: 0 12px 18px -6px rgba(0, 0, 0, 0.08); } .mdsc-story-card .wp-block-post-featured-image { margin: 0; overflow: hidden; } .mdsc-story-card .wp-block-post-featured-image img { width: 100%; transition: transform 0.3s ease; } .mdsc-story-card li.wp-block-post:hover .wp-block-post-featured-image img { transform: scale(1.05); } .mdsc-story-card li.wp-block-post > :not(.wp-block-post-featured-image) { padding-left: 1.25rem; padding-right: 1.25rem; } .mdsc-story-card li.wp-block-post > :first-child:not(.wp-block-post-featured-image) { padding-top: 1.25rem; } .mdsc-story-card li.wp-block-post > :last-child { padding-bottom: 1.25rem; } .mdsc-story-card .wp-block-post-title { display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } @media (prefers-reduced-motion: reduce) { .mdsc-story-card li.wp-block-post:hover .wp-block-post-featured-image img { transform: none; } } /* ============================================================ Stories carousel — native Query Loop (.mdsc-stories-loop) styled into the legacy `snw` recentPosts look. Cards are core Query Loop blocks (Featured Image / Date / Title / Terms / Read more) on page 7644 — editable in the block editor. This CSS restyles that markup into the legacy card and turns the post-template grid into a horizontal scroll-snap row; js/stories-carousel.js wires the arrows. 4-up desktop / 2-up tablet / ~1-up mobile. Brand tokens: red --theme-palette-color-4, link blue --theme-palette-color-1. See docs/patterns/stories-carousel.md. @date 2026-06-10 ============================================================ */ .mdsc-stories { margin: 0; } /* Block-alignment support: the SNW perf mu-plugin deregisters core `wp-block-library` CSS, which is where `.has-text-align-*` lives — so blocks' own alignment settings (e.g. the "See All Stories" paragraph set to Align right) have no CSS to back them. Re-provide it, scoped to this section, so the alignment chosen in the block editor actually applies. */ .mdsc-stories .has-text-align-right { text-align: right; } .mdsc-stories .has-text-align-left { text-align: left; } .mdsc-stories .has-text-align-center { text-align: center; } /* Head: title left, arrows right (wp:group flex handles placement). */ .mdsc-stories-head { align-items: flex-end; margin-bottom: 2rem; } .mdsc-stories-title { font-size: clamp(2.5rem, 5vw, 3.75rem); font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; margin: 0; } .mdsc-stories-nav { display: flex; gap: 0.75rem; flex: none; } .mdsc-stories-arrow { width: 3rem; /* 48px — matches legacy */ height: 3rem; display: inline-flex; align-items: center; justify-content: center; border: 0; border-radius: 50%; cursor: pointer; color: #fff; transition: background-color 0.15s ease, opacity 0.15s ease; } /* Legacy two-tone: prev = grey-blue, next = brand red (static, not state-based). */ .mdsc-stories-prev { background: #aab0bb; } .mdsc-stories-next { background: var(--theme-palette-color-4, #af272f); } .mdsc-stories-arrow:hover:not(:disabled) { background: var(--theme-palette-color-1, #3689f5); } .mdsc-stories-arrow:disabled { opacity: 0.45; cursor: default; } .mdsc-stories-arrow:focus-visible { outline: 2px solid var(--theme-palette-color-1, #3689f5); outline-offset: 2px; } .mdsc-stories-arrow .mdsc-arrow { width: 24px; height: 24px; } .mdsc-stories--static .mdsc-stories-nav { display: none; } /* Track: re-layout the post-template grid into a scroll-snap row. (0,2,0) beats core's (0,1,0) .is-layout-grid display:grid — no !important. */ .mdsc-stories-loop .wp-block-post-template { display: flex; flex-wrap: nowrap; gap: 1.5rem; margin: 0; padding: 0.25rem 0 1rem; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; -webkit-overflow-scrolling: touch; overscroll-behavior-x: contain; } .mdsc-stories-loop .wp-block-post-template::-webkit-scrollbar { display: none; } /* Card = each post (flex item). 4-up: (100% - 3 gaps) / 4. */ .mdsc-stories-loop .wp-block-post { flex: 0 0 calc((100% - 3 * 1.5rem) / 4); scroll-snap-align: start; display: flex; flex-direction: column; margin: 0; background: #fff; border-radius: 8px; overflow: hidden; box-shadow: 0 2px 10px rgba(0, 0, 0, 0.06); } /* Featured image — full-bleed top of the card. Height + crop are managed on the Featured Image block itself (Height 310px + Scale: Cover → inline styles that survive the perf mu-plugin's wp-block-library deregistration). CSS only sets full width here. */ .mdsc-stories-loop .wp-block-post-featured-image { margin: 0; } .mdsc-stories-loop .wp-block-post-featured-image img { display: block; width: 100%; } /* Body group — flex column so "Read" pins to the bottom. Padding is set on the Group block itself (block spacing settings), not here. */ .mdsc-stories-loop .mdsc-story-body { display: flex; flex-direction: column; flex: 1 1 auto; } .mdsc-stories-loop .mdsc-story-body > * { margin-top: 0; margin-bottom: 0; } .mdsc-stories-loop .wp-block-post-date { font-size: 0.75rem; /* 12px — matches legacy */ color: #6b6b6b; margin-bottom: 0.5rem; } .mdsc-stories-loop .wp-block-post-date time { color: inherit; } /* Title: matches legacy 20px desktop → 19px tablet → 18px mobile, fixed 24px line-height, letter-spacing normal (override Blocksy's global h3 spacing). */ .mdsc-stories-loop .wp-block-post-title { font-size: 1.25rem; /* 20px */ font-weight: 800; line-height: 1.5rem; /* 24px */ letter-spacing: normal; margin-bottom: 0.75rem; color: #111; } .mdsc-stories-loop .wp-block-post-title a { color: inherit; text-decoration: none; } .mdsc-stories-loop .wp-block-post-title a:hover { color: var(--theme-palette-color-1, #3689f5); } /* Tags (post-terms) → light-blue pills. font-size:0 collapses the inter-term whitespace separators; pills re-set their own size. */ .mdsc-stories-loop .wp-block-post-terms { display: flex; flex-wrap: wrap; align-items: center; gap: 0.375rem; margin-bottom: 1rem; font-size: 0; } .mdsc-stories-loop .wp-block-post-terms a { display: inline-flex; align-items: center; justify-content: center; font-size: 0.75rem; line-height: 1; padding: 0.375rem 0.625rem; border-radius: 999px; background: #eef2fb; color: var(--theme-palette-color-1, #3689f5); text-decoration: none; } .mdsc-stories-loop .wp-block-post-terms a:hover { background: #e2e9f8; } /* Read more → blue link pinned to the card bottom. */ .mdsc-stories-loop .wp-block-read-more { margin-top: auto; font-size: 0.9375rem; font-weight: 700; color: var(--theme-palette-color-1, #3689f5); text-decoration: none; } .mdsc-stories-loop .wp-block-read-more:hover { text-decoration: underline; } /* "See All Stories →" — bottom-right blue link. Weight 500 (matches legacy); the arrow is the reusable [mdsc_arrow] SVG, inheriting the link's blue. */ .mdsc-stories-all-wrap { margin: 1.5rem 0 0; } .mdsc-stories-all-wrap a { display: inline-flex; align-items: center; gap: 0.25rem; font-weight: 500; color: var(--theme-palette-color-1, #3689f5); text-decoration: none; } .mdsc-stories-all-wrap a:hover { text-decoration: underline; } .mdsc-stories-all-wrap .mdsc-arrow { width: 24px; height: 24px; } /* Tablet: 2-up; title 19px (matches legacy). */ @media (max-width: 999.98px) { .mdsc-stories-loop .wp-block-post { flex-basis: calc((100% - 1.5rem) / 2); } .mdsc-stories-head { margin-bottom: 1.5rem; } .mdsc-stories-loop .wp-block-post-title { font-size: 1.1875rem; } /* 19px */ } /* Mobile: ~1-up with a peek of the next card; title 18px (matches legacy). */ @media (max-width: 689.98px) { .mdsc-stories-loop .wp-block-post { flex-basis: 82%; } .mdsc-stories-title { font-size: 2.25rem; } .mdsc-stories-loop .wp-block-post-title { font-size: 1.125rem; } /* 18px */ } @media (prefers-reduced-motion: reduce) { .mdsc-stories-loop .wp-block-post-template { scroll-behavior: auto; } } /* ============================================================ SINGLE POST — match the legacy `snw` single styling. Scoped to body.single-post. (#4 two-column container layout + #5 dynamic related title handled separately.) @date 2026-06-11 ============================================================ */ /* #2 — vertical rhythm of the header (category → tag → title), measured off the legacy single at desktop/tablet/mobile on 2026-06-11. The legacy values are CONSTANT across breakpoints: • space above category = 68px (legacy .innerWrapLg padding-top) • category → tag gap = 7px (category margin-bottom 5px) • tag → title gap = 47px Blocksy puts the meta + title in .entry-header (first thing in the content area), as two separate `ul.entry-meta` lists + the h1. Out of the box that gives 0 / 21 / 21 — so we own all three here. Zero the generic container padding so .entry-header's padding-top is the only source of the top gap. */ body.single-post #main .ct-container-full { padding-top: 0; } body.single-post .entry-header { padding-top: 4.25rem; } /* 68px above category */ body.single-post .entry-header ul.entry-meta + ul.entry-meta { margin-top: 0.375rem; } /* 6px → ~7px cat→tag */ body.single-post .entry-header h1 { margin-top: 2.875rem; } /* 46px → ~47px tag→title */ /* #1 — category above the title: bold black heading (legacy .h4Styles = 20px/800/#111; drops to 19px on tablet/mobile — see breakpoint below). */ body.single-post .entry-header a[href*="/category/"] { font-size: 1.25rem; /* 20px */ font-weight: 800; line-height: 1.3; color: var(--theme-palette-color-3, #111111); text-decoration: none; } body.single-post .entry-header a[href*="/category/"]:hover { color: var(--theme-palette-color-1, #3689f5); } @media (max-width: 999.98px) { body.single-post .entry-header a[href*="/category/"] { font-size: 1.1875rem; } /* 19px — matches legacy */ } /* #6 — tag below the category: plain grey text (legacy .articleTags = 16px/400/#909090), NOT a pill. (The pill is the Stories-card style; the single post uses plain text.) */ body.single-post .entry-header a[href*="/tag/"] { display: inline; font-size: 1rem; /* 16px */ font-weight: 400; padding: 0; border-radius: 0; background: none; color: var(--theme-palette-color-10, #909090); text-decoration: none; } body.single-post .entry-header a[href*="/tag/"]:hover { color: var(--theme-palette-color-1, #3689f5); background: none; } /* #3 — single-post disclaimer: reddish small note, like the legacy .smallPara.disclaimer. Text comes from the editable `snw-single-disclaimer` Blocksy Content Block (wrapped in .mdsc-disclaimer by mdsc_snw_single_layout), so it's now a

around the block's

— neutralise the inner margins. */ .mdsc-disclaimer { font-size: 0.8125rem; line-height: 1.5; color: var(--theme-palette-color-4, #af272f); margin: 0 0 1.5rem; } .mdsc-disclaimer > * { margin: 0; font-size: inherit; line-height: inherit; color: inherit; } .mdsc-disclaimer > * + * { margin-top: 0.5rem; } /* ------------------------------------------------------------------ #4 — faithful two-column single-post body (legacy innerWrapSm + col_one_fourth / col_three_fourths). Built by mdsc_snw_single_layout() in snw.php: the video is a FULL-width media row; below it a centred band splits into a left rail (date + share) and a narrow content column. Widths measured off the legacy single 2026-06-11: media ≈1280 (= Blocksy's 1290 content width, so the .snw-single wrapper inherits it as the constrained child), content column 660, left rail 220, ~50px under the media. Single-post only (this filter only runs there); pages are untouched. ------------------------------------------------------------------ */ /* Full-width media row: the migrated YouTube embed, OR — for non-video posts — the featured image as a fallback hero (matches the legacy single.php, which shows the featured image when there is no video). 50px gap to the band. */ .snw-single__media { margin: 0 0 3.125rem; } .snw-single__media :is(figure, .wp-block-embed, .wp-block-embed__wrapper) { margin: 0; } .snw-single__media iframe, .snw-single__media video { width: 100%; } .snw-single__media img.snw-single__featured { display: block; width: 100%; height: auto; } /* Centred band: 220 rail | 30 gap | 660 content. */ .snw-single__body { display: grid; grid-template-columns: 220px 660px; column-gap: 30px; justify-content: center; align-items: start; } .snw-single__rail { grid-column: 1; } .snw-single__content { grid-column: 2; min-width: 0; } /* Left rail — date (legacy .articleDate: 16px/400 #909090) above the share box. */ .snw-single__date { font-size: 1rem; font-weight: 400; line-height: 1.5; color: var(--theme-palette-color-10, #909090); margin: 0 0 1rem; } /* Share box = Blocksy's NATIVE module rendered in the rail (snw.php). Icons/colors/size/networks are Customizer settings (Single Posts → Share Box) — do NOT style them here. Placement-only: strip the module's own outer spacing so it sits flush in the rail. */ .snw-single__share .ct-share-box { margin: 0; } .snw-single__content > .mdsc-disclaimer:first-child { margin-top: 0; } /* Comments — legacy structure (.thecomments in the snw theme): per comment, name row (x-bold, 16px padding) over a 1px #909090 line, then the text, then a 12px grey "M d, Y | H:i" meta line BELOW the text. Blocksy keeps name+date together in a header footer.ct-comment-meta with no setting for this order, so display:contents promotes its children into the flex column and `order` re-sequences them. Section order/form position/avatars are real settings (see snw.php comment block). Colors via palette tokens. */ body.single-post .ct-comments .ct-comment-inner { display: flex; flex-direction: column; } body.single-post .ct-comments .ct-comment-inner > .ct-comment-meta { display: contents; } body.single-post .ct-comments .ct-comment-author { order: 0; margin: 0; font-size: 1rem; font-weight: 800; padding: 1rem 0 0.5rem; border-bottom: 1px solid var(--theme-palette-color-10, #909090); } body.single-post .ct-comments .ct-comment-content { order: 1; padding-top: 0.625rem; } body.single-post .ct-comments .ct-comment-meta-data { order: 2; margin: 0.625rem 0 0; font-size: 0.75rem; line-height: 1.3333; font-weight: 400; text-align: left; text-transform: none; letter-spacing: normal; color: var(--theme-palette-color-10, #909090); } /* Legacy has no divider above comments — only the name underline. */ body.single-post .ct-comment-list > li, body.single-post .ct-comment-list .ct-comment-inner { border-top: none; padding-top: 0; } /* 12.5px between comments (50 → 25 → 12.5; Jayr 2026-06-12 round 2: −50% again). */ body.single-post .ct-comment-list > li + li { margin-top: var(--snw-comment-list-gap, 0.78125rem); } /* Legacy renders NOTHING when comments are closed (and with the site's auto-close-after-1-day Discussion setting, they always are); suppress core's "Comments are closed." note. No setting exists for this. */ body.single-post .ct-comments .no-comments { display: none; } /* Comments + relocated prev/next nav follow the single-post band width (rail 220 + gap 30 + content 660 = 910px, see .snw-single__body). The narrow-container width is a GLOBAL Customizer value (1290 — shared with the homepage, must not change), so the constraint is scoped here. */ body.single-post .ct-comments-container .ct-container-narrow { max-width: var(--snw-band-width, 910px); padding-bottom: 0; /* the comments→nav gap is owned by .snw-single__postnav below */ } /* Comments → nav gap (−75% of the old 150px) and nav → related = 25% more (Jayr 2026-06-12). The nav's own 50px block margins are zeroed so these two wrapper margins are the only spacing sources. */ .snw-single__postnav { max-width: var(--snw-band-width, 910px); margin: var(--snw-gap-comments-nav, 2.34375rem) auto var(--snw-gap-nav-related, 2.9296875rem); } .snw-single__postnav .post-navigation { margin-top: 0; margin-bottom: 0; } /* The related container's own 50px padding-top would stack on the wrapper margin above — zero it so --snw-gap-nav-related is the single source. */ body.single-post .ct-related-posts-container { padding-top: 0; } /* Single-post tokens — one knob per repeated value. Palette colours come from the Customizer (var(--theme-palette-color-N)); only values with no palette slot or no Customizer control are defined here. */ :root { --snw-band-width: 910px; /* = rail 220 + gap 30 + content 660 (.snw-single__body grid) */ --snw-comment-gap: 1.5625rem; /* 25px — comments title → first comment */ --snw-comment-list-gap: 0.78125rem; /* 12.5px — between comments (Jayr 2026-06-12: −50% again) */ --snw-gap-comments-nav: 2.34375rem; /* 37.5px — last comment → prev/next nav (was 150, −75%) */ --snw-gap-nav-related: calc(var(--snw-gap-comments-nav) * 1.25); /* Jayr: "25% more than" the gap above */ /* ── POST-CARD SKIN TOKENS — SINGLE SOURCE OF TRUTH ────────────────── Every post-card context reads these, so the archive grid and the single-post related-posts cards can never drift apart. Change a value here → all card contexts update together. Consumers: the "SHARED POST-CARD SKIN" block below. Full contract + verification: docs/patterns/card-styling-parity.md (legacy reference = sicknotweakcom.local `.archiveArticle`). */ --snw-card-pad: 1.5625rem; /* 25px inner padding (legacy .archiveArtContent) */ --snw-card-bg: var(--theme-palette-color-8, #ffffff); /* card background */ --snw-card-radius: 8px; /* card corner radius */ --snw-card-shadow: 0 2px 6px rgba(0, 0, 0, 0.2); /* card drop shadow */ /* date row */ --snw-card-date-size: 0.75rem; /* 12px */ --snw-card-date-lh: 1.3333; /* ~16px */ --snw-card-date-color: var(--theme-palette-color-10, #909090); /* title */ --snw-card-title-size: 1.25rem; /* 20px */ --snw-card-title-lh: 1.2; /* 24px */ --snw-card-title-weight: 800; --snw-card-title-color: var(--theme-palette-color-3, #111111); /* tag pill (legacy light-blue; bg is not a palette colour) */ --snw-pill-bg: #ebf2fa; --snw-pill-text: var(--theme-palette-color-2, #2b6ec4); --snw-pill-size: 0.75rem; /* 12px */ --snw-pill-lh: 1.6667; /* 20px */ --snw-pill-radius: 16px; --snw-pill-pad: 3px 10px; /* Watch / Read-more button (legacy .archiveArtButton .btn) */ --snw-card-btn-size: 1rem; /* 16px */ --snw-card-btn-weight: 500; --snw-card-btn-color: var(--theme-palette-color-1, #3689f5); --snw-card-btn-hover: var(--theme-palette-color-2, #2b6ec4); } /* ============================================================ SHARED POST-CARD SKIN — styles the two post-card contexts IDENTICALLY from the --snw-card-* and --snw-pill-* tokens above. One change → both move. • archive / blog / search grid → .entry-card … (Blocksy native markup) • single-post related posts → .ct-related-posts … (custom, built in snw.php) NOTE: card *padding* is intentionally NOT forced on .entry-card — Blocksy couples it to the boundless featured image's bleed math; change archive padding via Customizer → Post Cards if it must move. The homepage Stories loop (.mdsc-stories-loop) is a third context NOT folded in here yet — see the parity doc. Full contract: docs/patterns/card-styling-parity.md. ============================================================ */ /* date row — selectors reach the inner .ct-meta-element-date so they outrank Blocksy's archive meta-font rule (which sets uppercase + lh via theme vars). */ .entry-card .entry-meta li, .entry-card .entry-meta .meta-date, .entry-card .entry-meta .ct-meta-element-date, .ct-related-posts .entry-meta li { font-size: var(--snw-card-date-size); line-height: var(--snw-card-date-lh); font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--snw-card-date-color); } /* title */ .entry-card .entry-title, .ct-related-posts .related-entry-title { font-size: var(--snw-card-title-size); line-height: var(--snw-card-title-lh); font-weight: var(--snw-card-title-weight); } .entry-card .entry-title a, .ct-related-posts .related-entry-title a { color: var(--snw-card-title-color); } /* tag pill */ .entry-card .entry-meta .meta-categories a, .ct-related-posts .meta-categories[data-type="pill"] a { display: inline-block; font-size: var(--snw-pill-size); line-height: var(--snw-pill-lh); font-weight: 400; text-transform: none; letter-spacing: normal; color: var(--snw-pill-text); background: var(--snw-pill-bg); padding: var(--snw-pill-pad); border-radius: var(--snw-pill-radius); text-decoration: none; } /* Watch / Read-more button */ .entry-card .entry-button, .ct-related-posts .snw-card-button a { font-size: var(--snw-card-btn-size); line-height: 1; font-weight: var(--snw-card-btn-weight); color: var(--snw-card-btn-color); text-decoration: none; } .entry-card .entry-button:hover, .entry-card .entry-button:focus-visible, .ct-related-posts .snw-card-button a:hover, .ct-related-posts .snw-card-button a:focus-visible { color: var(--snw-card-btn-hover); } /* card box — background, radius, shadow (padding stays per-context, see note). Archive selector is bumped to .entries .entry-card.card-content (0,3,0) to outrank Blocksy's [data-cards="boxed"] .entry-card (0,2,0). */ .entries .entry-card.card-content, .ct-related-posts article > div { background: var(--snw-card-bg); border-radius: var(--snw-card-radius); box-shadow: var(--snw-card-shadow); } /* round the archive card's full-bleed (boundless) featured image to match. */ .entries .entry-card.card-content .ct-media-container { border-radius: var(--snw-card-radius) var(--snw-card-radius) 0 0; } /* Spacing tune (Jayr 2026-06-12): post→comments gap was 160px (100 content container pb + 60 comments container pt) — "reduce by 75%" → 40px (25+15). Comments-title→first-comment was 50px — "reduce by 50%" → 25px. */ body.single-post .ct-container-full { padding-bottom: 25px; } body.single-post .ct-comments-container .ct-container-narrow { padding-top: 15px; } body.single-post .ct-comments-title { margin-bottom: var(--snw-comment-gap); } /* "Edit" post link (logged-in only) — align inside the band instead of the full container edge (Jayr 2026-06-12). */ body.single-post a.post-edit-link { display: block; width: 100%; max-width: var(--snw-band-width); margin-left: auto; margin-right: auto; } /* Related-posts cards — the legacy archiveArticle STRUCTURE (measured on sicknotweakcom.local 2026-06-12). The SKIN (date/title/pill/button colours + sizes, and card bg/radius/shadow) now comes from the SHARED POST-CARD SKIN block above, so it stays identical to the archive grid. Only the related-specific structure (button transition + flex column for the pinned button + image clip) lives here. */ .snw-card-button { padding-top: 0.5rem; } .snw-card-button a { transition: color 0.15s ease; } .ct-related-posts article { height: 100%; } .ct-related-posts article > div { display: flex; flex-direction: column; height: 100%; overflow: hidden; /* clips the boundless image to --snw-card-radius */ } .ct-related-posts article .ct-media-container { margin-bottom: var(--snw-card-pad, 1.5625rem); } .ct-related-posts article .entry-meta, .ct-related-posts article .related-entry-title, .ct-related-posts article .snw-card-button { padding-left: var(--snw-card-pad, 1.5625rem); padding-right: var(--snw-card-pad, 1.5625rem); } .ct-related-posts article .snw-card-button { margin-top: auto; /* pin to card bottom, like the legacy layout */ padding-bottom: var(--snw-card-pad, 1.5625rem); } /* Stack to one column on tablet/mobile: media full, then rail (date + icons), then content. */ @media (max-width: 999.98px) { .snw-single__body { grid-template-columns: minmax(0, 1fr); column-gap: 0; } .snw-single__rail, .snw-single__content { grid-column: 1; } .snw-single__rail { margin-bottom: 1.75rem; } .snw-single__media { margin-bottom: 2rem; } } /* ============================================================================ CONTACT US (page-id-36) — restore the legacy `snw` theme contact layout. On the live site this page constrains its intro + CF7 form to an 850px centred column (legacy .innerWrapSm), renders the intro at 24px, and styles the fields as 24px pills (light-grey fill, dark hairline) with the Name/Email row split 50/50. Blocksy's defaults instead give a full-width ~1290px column, 16px intro text and 3px square fields, so we recreate the legacy look here. The CF7 form already ships the legacy .formRow/.formCol markup — only the matching CSS was missing. px→rem lifted verbatim from the compiled snw theme CSS (root 16px). Scoped to page-id-36 so nothing leaks to other CF7 forms. @date 2026-06-19 ============================================================================ */ /* Intro paragraph + form: legacy .innerWrapSm = 53.125rem (850px), centred. */ body.page-id-36 .entry-content > p, body.page-id-36 .entry-content > .wp-block-contact-form-7-contact-form-selector { max-width: 53.125rem; margin-left: auto; margin-right: auto; } /* NOTE: intro paragraph size is NOT set here — per Kristina (2026-06-19) the body font size is being raised globally in the Blocksy Customizer (rootTypography), so the intro inherits the global value rather than a page-local override. */ /* Form fields — legacy pill: 24px radius, dark hairline border, page-grey fill. */ body.page-id-36 .wpcf7 input:not([type="submit"]):not([type="hidden"]), body.page-id-36 .wpcf7 textarea, body.page-id-36 .wpcf7 select { box-sizing: border-box; width: 100%; padding: 0.75rem 1.5rem; /* 12px 24px */ font-size: 1rem; line-height: 1.5rem; border: 0.0625rem solid var(--theme-palette-color-9, #231F20); /* 1px brand dark */ border-radius: 1.5rem; /* 24px pill */ background: var(--theme-palette-color-7, #F5F5F5); /* page grey */ } body.page-id-36 .wpcf7 select { padding-right: 1.875rem; /* room for the arrow */ -webkit-appearance: none; -moz-appearance: none; appearance: none; } body.page-id-36 .wpcf7 textarea { resize: vertical; } /* Floating labels — the legacy `snw` placeholder-in-field pattern. CF7 renders a

; we anchor it inside the field and float it up to the border on focus / when filled. The `.label-above` class is toggled by js/contact-form.js. The

needs position:relative to anchor the absolute label. top/left match the field's 12px/24px text inset. */ body.page-id-36 .wpcf7 .formCol > div p { position: relative; } body.page-id-36 .wpcf7 label { position: absolute; top: 0.75rem; left: 1rem; padding: 0 0.5rem; font-size: 1rem; line-height: 1.5rem; font-weight: 400; background: transparent; pointer-events: none; transition: transform 0.3s ease, background 0.3s ease; } body.page-id-36 .wpcf7 label.label-above { transform: translateY(-88%) scale(0.7); transform-origin: 0 0; background: var(--theme-palette-color-7, #F5F5F5); /* page grey — notches the field border */ cursor: auto; } /* Single-line fields (Subject/Name/Email) are short (~40px), so vertically centre their resting label. The textarea (Message) is excluded — its text starts at the top, so its label stays top-aligned. */ body.page-id-36 .wpcf7 p:not(:has(textarea)) label { top: 50%; transform: translateY(-50%); } body.page-id-36 .wpcf7 p:not(:has(textarea)) label.label-above { top: 0; /* anchor to the field's top border, then straddle it */ transform: translateY(-50%) scale(0.7); } /* Custom chevron for the Subject