@charset "UTF-8"; /** ================================================================== MENTAL HEALTH — STANDALONE STYLESHEET ================================================================== Compiles to /css/mental-health.css and is enqueued ONLY on: - template-mental-health-parent.php (landing page) - template-twyk-parent.php (homepage promo module) - template-twyk-educator.php (homepage promo module) Nothing here is imported into poy.scss / poy2.scss, so no existing site styles are touched. Every class is namespaced with .mh- Sections in this file: 1. LOCAL TOKENS + MIXINS (mirrors _brand-standards.scss on purpose, so this file can compile on its own) 2. SHARED PIECES (section shell, headings, buttons, cards) 3. MENTAL HEALTH LANDING PAGE 4. HOMEPAGE PROMO MODULES 5. MY LIFE, MY QUIT™ BAND 6. RESPONSIVE ================================================================== */ /** ------------------------------------------------ 1. LOCAL TOKENS + MIXINS Values intentionally match _brand-standards.scss. Duplicated (not imported) to keep this file standalone — importing brand-standards would re-output the whole site's CSS. ------------------------------------------------ */ /** ------------------------------------------------ 2. SHARED PIECES ------------------------------------------------ */ /* The theme gives `footer` a default `margin-top: 130px` (poy.css), which every full-bleed template cancels for itself — twyk-parent, twyk-educator, media, resources and pta-toolkit all carry the same reset. This page's sections run edge to edge too, so without it there's a white gap between the expert-video section and the footer. Kept here rather than in poy.scss so all of this page's CSS stays in one file. */ body.page-template-template-mental-health-parent footer { margin-top: 0; } /* The document renders 24px taller than the footer on this template, which shows up as a white strip under the footer. It is a bottom margin on that survives the theme's `* { margin: 0 }` reset and that no rule in the theme's own stylesheets sets (it is absent on the homepage), so the source is something injected at runtime. Zeroed here rather than globally so it only affects this page. */ body.page-template-template-mental-health-parent { margin-bottom: 0; } /* The parent/educator toggle sits inside the burger dropdown on this page rather than in the nav bar (see header.php). Two things from poy.css have to be undone for it: the nav-bar offset (`right: 80px`), and the sitewide `display: none` below 800px — the dropdown IS the navigation on phones, so the toggle has to stay visible there. The theme itself uses the same !important override to re-show this toggle on the homepages. */ body.page-template-template-mental-health-parent .nav-menu-landing .menu-list-landing .checkbox-toggle { right: auto; display: inline-block !important; margin: 0 0 28px; } .mh-page { overflow-x: hidden; } .mh-page .mh-inner { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 20px; } .mh-page .mh-divider { height: 21px; background: #003b45; } .mh-page section { padding: 80px 0; } /* Primary CTA — the theme's global a.button with the design's yellow fill. Colour is the ONLY thing overridden: padding, type size, border, radius and shadow all inherit from _brand-standards.scss, including its responsive steps, so these CTAs stay identical to every other button on the site. (The comp drew them larger — 24px type, 24/48 padding, 5px border — which read too heavy next to the rest of the site.) Written as a.button.mh-btn--primary because the global `a.button` rule would otherwise win on specificity and keep the button dark. */ a.button.mh-btn--primary { background: #f1c269; color: #003b45; } a.button.mh-btn--primary:hover { background: white; color: #003b45; } /** ------------------------------------------------ 3. MENTAL HEALTH LANDING PAGE ------------------------------------------------ */ /* --- 3a. Hero ------------------------------------------------ */ .mh-hero { position: relative; display: flex; align-items: center; background-color: #003b45; background-image: url("../images/mh-hero.jpg"); background-size: cover; /* The hero is tied to the photo's proportions rather than to its own content. The photo is 2000x1067 and the brain she's holding sits low in the frame (roughly 80-89% down), so a shorter box makes `cover` crop the bottom and the brain disappears. 48vw matches the comp's hero ratio (1440x696) and leaves ~90% of the photo's height visible at every width, which keeps both her face and the brain in frame. Centering the position splits that small crop between the ceiling and the floor. */ min-height: 48vw; background-position: center; padding: 60px 0 80px; color: white; overflow: hidden; } .mh-hero:before { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(0, 0, 0, 0.65) 0%, rgba(0, 0, 0, 0.35) 45%, rgba(0, 0, 0, 0) 70%); } .mh-hero .mh-inner { position: relative; z-index: 1; } .mh-hero__text { max-width: 550px; display: flex; flex-direction: column; gap: 32px; padding: 60px 0 40px; } .mh-hero__title { font-family: "Rubik", sans-serif; font-weight: 900; font-size: 56px; line-height: 1.2; margin: 0; color: white; } .mh-hero__copy { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 20px; letter-spacing: 0.8px; line-height: 1.5; margin: 0; color: white; } /* --- 3b. Brain interactive ----------------------------------- */ .mh-brain { background-color: #f1c269; background-image: url("../images/Yellow-Pattern-50.png"); background-repeat: repeat; background-size: 150px; color: #003b45; /* V4 revision: prompt above the interactive, because the "+" markers on their own weren't reading as clickable. Uses the page's existing eyebrow token, which is already exactly what the comp specifies here (Space Mono Bold 20px, 2px tracking, uppercase), so this adds no new type. Full width beneath the two-column intro, sitting the standard gap clear of the photo below it. No breakpoint override on purpose: the mobile comp (Figma 4070:624) shows this wrapping to three lines at the same size, so it is left to wrap. */ /* Wrapper around the photo and the cards. The cards are siblings of the photo (not children) so that on mobile they can simply drop into normal flow underneath it. */ /* Hotspot buttons. Position comes from the --mh-x / --mh-y custom properties set inline in the template (and --mh-xm / --mh-ym below 1200px), so a marker can be moved by editing one number in the PHP. Doing the breakpoint swap here rather than in JS means the markers are never briefly in the wrong place and can't fall out of sync. */ /* Info card. On desktop it sits in the left gutter of the photo, vertically centred — where the comp places it, and clear of the brain itself. Below 1200px it drops into normal flow underneath the photo (matches the mobile comp, and avoids a 500px card in a 300px-tall box). Positioned against .mh-brain__interactive, not the photo, so the mobile flow case works. No JS positioning involved. */ } .mh-brain__intro { display: flex; align-items: center; gap: 48px; margin-bottom: 48px; } .mh-brain__title { font-family: "Rubik", sans-serif; font-weight: 900; font-size: 48px; line-height: 1.2; margin: 0; flex: 1 1 0; } .mh-brain__lede { font-family: "Poppins", sans-serif; font-weight: 500; font-size: 18px; line-height: 1.55; margin: 0; flex: 1 1 0; } .mh-brain__cta { font-family: "Space Mono", monospace; font-weight: 700; font-size: 20px; letter-spacing: 2px; text-transform: uppercase; line-height: normal; margin: 0; margin-bottom: 48px; } .mh-brain__interactive { position: relative; } .mh-brain__stage { position: relative; border: 5px solid #003b45; border-radius: 32px; box-shadow: 4px 4px 0px 0px #003b45; background-color: #d9d9d9; background-image: url("../images/mh-brain.jpg"); background-size: cover; background-position: center center; aspect-ratio: 1200/500; width: 100%; } .mh-brain__dot { position: absolute; left: var(--mh-x); top: var(--mh-y); transform: translate(-50%, -50%); width: 44px; height: 44px; padding: 0; margin: 0; border: 3px solid white; border-radius: 50%; background: #003b45; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.35); color: white; font-size: 20px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; /* Interaction states have to restate the marker's own colours: the global `button:hover` would fill it yellow, and style.css's bare-button rules would recolour the ring grey. Both outrank a single class. The open state below is two classes deep, so it still wins over these. */ } .mh-brain__dot:hover, .mh-brain__dot:focus, .mh-brain__dot:active { background: #003b45; border-color: white; } .mh-brain__dot:hover, .mh-brain__dot:focus-visible { transform: translate(-50%, -50%) scale(1.1); } .mh-brain__dot:after { content: ""; position: absolute; inset: -8px; border: 2px solid rgba(255, 255, 255, 0.6); border-radius: 50%; animation: mh-pulse 2.4s ease-out infinite; } .mh-brain__dot[aria-expanded=true] { background: #f1c269; border-color: #003b45; color: #003b45; } .mh-brain__dot[aria-expanded=true]:after { display: none; } .mh-brain__dot[aria-expanded=true] .mh-brain__dot-plus { display: none; } .mh-brain__dot[aria-expanded=true] .mh-brain__dot-close { display: block; } .mh-brain__dot-plus { display: block; } .mh-brain__dot-close { display: none; } .mh-brain__card { background: white; border: 5px solid #003b45; border-radius: 24px; box-shadow: 5px 5px 0px 0px #003b45; display: none; position: absolute; z-index: 3; left: 16px; top: 50%; transform: translateY(-50%); width: 480px; max-width: calc(100% - 32px); max-height: calc(100% - 32px); overflow-y: auto; padding: 20px; color: #003b45; } .mh-brain__card[data-open=true] { display: block; } .mh-brain__card-close { display: block; margin: 0 0 8px auto; padding: 0; width: 32px; height: 32px; border: 0; border-radius: 50%; background: none; box-shadow: none; color: #003b45; font-size: 26px; line-height: 1; cursor: pointer; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .mh-brain__card-close:hover { color: #ee7b61; background: none; } .mh-brain__card-body { display: flex; flex-direction: column; gap: 12px; padding: 0 4px 4px; } .mh-brain__card-eyebrow { font-family: "Space Mono", monospace; font-weight: 700; font-size: 20px; letter-spacing: 2px; text-transform: uppercase; line-height: normal; margin: 0; font-size: 16px; letter-spacing: 1.6px; } .mh-brain__card-title { font-family: "Rubik", sans-serif; font-weight: 900; font-size: 32px; line-height: 1.15; margin: 0; font-size: 26px; } .mh-brain__card-copy { font-family: "Poppins", sans-serif; font-weight: 500; font-size: 18px; line-height: 1.55; margin: 0; font-size: 16px; } @keyframes mh-pulse { 0% { transform: scale(0.9); opacity: 0.9; } 70% { transform: scale(1.35); opacity: 0; } 100% { transform: scale(1.35); opacity: 0; } } /* --- 3c. Podcast slider -------------------------------------- */ .mh-podcast { background-color: white; background-image: url("../images/White-Pattern-50.png"); background-repeat: repeat; background-size: 150px; color: #003b45; /* ---- "Coming Soon" panel (V4) ------------------------------------- Shown while $mh_podcast_live is false in the template. The carousel rules below are untouched and take over again when it flips. Figma 4017:333 (desktop) / 4243:269 (mobile): two equal columns 24px apart, left-aligned, on the same white pattern the carousel uses. Both type tokens already existed on this page and match the comp exactly — mh-eyebrow is its Space Mono Bold 20/2px eyebrow, and mh-body-lg its Poppins Bold 20/0.8px paragraph — so this adds layout only, no new type. */ /* The shared &__title above is centred for the carousel. In this panel it heads the left column instead, so it is left-aligned with no bottom gap — the 16px above it comes from the eyebrow. */ /* arrow | track | arrow, centred — per the 2.0 comp */ /* Contained track: three whole cards between the two arrows, no bleed past the column (v1 bled off the right edge; the 2.0 comp doesn't). Swiper's own `.swiper { overflow: hidden }` does the clipping, and the padding keeps the cards' offset shadows inside that clip. */ /* One arrow each side of the track, vertically centred (2.0 comp). This only works because the cards no longer bleed — in v1 a right-hand arrow landed on top of a card, which is why both sat in the left gutter. */ } .mh-podcast__title { font-family: "Rubik", sans-serif; font-weight: 900; font-size: 48px; line-height: 1.2; margin: 0; text-align: center; margin-bottom: 48px; } .mh-podcast__soon { display: flex; align-items: center; gap: 24px; } .mh-podcast__soon-head { flex: 1 1 0; } .mh-podcast__eyebrow { font-family: "Space Mono", monospace; font-weight: 700; font-size: 20px; letter-spacing: 2px; text-transform: uppercase; line-height: normal; margin: 0; margin-bottom: 16px; } .mh-podcast__soon-copy { font-family: "Poppins", sans-serif; font-weight: 700; font-size: 20px; letter-spacing: 0.8px; line-height: 1.5; margin: 0; flex: 1 1 0; } .mh-podcast--soon .mh-podcast__title { text-align: left; margin-bottom: 0; } .mh-podcast__shell { display: flex; align-items: center; justify-content: center; gap: 40px; } .mh-podcast__slider { flex: 1 1 auto; min-width: 0; padding: 10px 10px 18px; } .mh-podcast .swiper-slide { height: auto; display: flex; } .mh-podcast__swipe { display: none; font-family: "Space Mono", monospace; font-weight: 700; font-size: 20px; letter-spacing: 2px; text-transform: uppercase; line-height: normal; margin: 0; text-align: center; margin-top: 24px; } .mh-podcast__nav { flex: 0 0 auto; position: relative; z-index: 2; width: 56px; height: 56px; padding: 0; border: 0; border-radius: 50%; background: none; box-shadow: none; cursor: pointer; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .mh-podcast__nav img { display: block; width: 100%; height: 100%; } .mh-podcast__nav:hover { background: none; transform: scale(1.1); } .mh-podcast__nav--prev img { transform: rotate(180deg); } .mh-podcast__shell .mh-podcast__nav.swiper-button-disabled { opacity: 0.35; cursor: default; } .mh-podcast__shell .mh-podcast__nav.swiper-button-disabled:hover { transform: none; } .mh-episode { background: white; border: 5px solid #003b45; border-radius: 24px; box-shadow: 5px 5px 0px 0px #003b45; display: flex; flex-direction: column; gap: 24px; padding: 32px; width: 100%; color: #003b45; /* Placeholder artwork — the podcast has not been produced yet, so this is a CSS block rather than a shipped FPO image. Swap for a real once episode art is delivered. */ } .mh-episode__thumb { height: 150px; border-radius: 12px; background: #d9d9d9; display: flex; align-items: center; justify-content: center; color: #b3b3b3; font-size: 40px; } .mh-episode__eyebrow { font-family: "Space Mono", monospace; font-weight: 700; font-size: 20px; letter-spacing: 2px; text-transform: uppercase; line-height: normal; margin: 0; } .mh-episode__title { font-family: "Rubik", sans-serif; font-weight: 900; font-size: 32px; line-height: 1.15; margin: 0; } .mh-episode__copy { font-family: "Poppins", sans-serif; font-weight: 500; font-size: 18px; line-height: 1.55; margin: 0; flex: 1 1 auto; } a.button.mh-episode__cta { width: 100%; } /* --- 3d. Conversation guide ---------------------------------- */ .mh-guide { background-color: #8a6eb1; background-image: url("../images/Purple-Pattern-50.png"); background-repeat: repeat; background-size: 150px; color: white; /* The designer's export is a transparent PNG with the circle crop and the teal ring baked in, so there is no border, no border-radius and no overscale here — the asset defines the shape. (It was briefly a JPEG, which meant white corners that a CSS clip had to hide pixel-perfectly; transparency is what this needs.) */ } .mh-guide .mh-inner { display: flex; align-items: center; gap: 48px; } .mh-guide__image { flex: 0 0 auto; width: 500px; max-width: 100%; aspect-ratio: 1; background-image: url("../images/mh-guide-circle.png"); background-size: contain; background-position: center; background-repeat: no-repeat; } .mh-guide__copy { flex: 1 1 0; max-width: 550px; display: flex; flex-direction: column; gap: 48px; } .mh-guide__title { font-family: "Rubik", sans-serif; font-weight: 900; font-size: 48px; line-height: 1.2; margin: 0; color: white; } .mh-guide__text { font-family: "Poppins", sans-serif; font-weight: 500; font-size: 18px; line-height: 1.55; margin: 0; color: white; } .mh-guide .mh-btn--primary { align-self: flex-start; } /* --- 3e. Expert video ---------------------------------------- */ /* Thumbnail + centred play button, same pattern as the Quick Tips section on the homepages (.quick-tips in _twyk.scss). The popup itself is a Popup Builder popup triggered by a class on the button, so nothing about the player, overlay or close button is styled here. */ .mh-expert { background-color: #bde6f0; background-image: url("../images/Blue-Pattern-50.png"); background-repeat: repeat; background-size: 150px; color: #003b45; } .mh-expert .mh-inner { display: flex; align-items: center; justify-content: center; gap: 48px; } .mh-expert__copy { flex: 1 1 0; max-width: 550px; display: flex; flex-direction: column; gap: 48px; } .mh-expert__title { font-family: "Rubik", sans-serif; font-weight: 900; font-size: 48px; line-height: 1.2; margin: 0; } .mh-expert__text { font-family: "Poppins", sans-serif; font-weight: 500; font-size: 18px; line-height: 1.55; margin: 0; } .mh-expert__video { flex: 0 0 auto; position: relative; width: 281px; height: 500px; padding: 0; border: 5px solid #003b45; border-radius: 30px; box-shadow: 5px 5px 0px 0px #003b45; background-color: #d9d9d9; cursor: pointer; overflow: hidden; /* Thumbnail sits on its own layer so hover can fade just the image and play icon — same treatment as Quick Tips on the homepages (_twyk.scss: `.col:hover img { opacity: 0.7 }`) — while the frame's border and shadow stay solid. */ /* style.css (the underscores base) styles bare buttons, and its `button:hover` / `:focus` / `:active` rules outrank a single class — they turn this card's frame grey and its fill yellow. Pinning both back for every interaction state. */ } .mh-expert__video:before { content: ""; position: absolute; inset: 0; /* V4 revision: temporarily Darian Gates, a school counselor, because Erin Vogel's interview hasn't been filmed yet. The designer's export from Figma 4008:146 ("Rectangle 59"), cropped to the placement the comp gives it — the comp scales the photo to ~136% and offsets it, so the raw export is framed a lot looser than the design. It is 447x796, which is 1.6x the 281x500 frame, and its aspect matches the frame, so `cover` below crops essentially nothing. TO PUT ERIN BACK: change this one line to mh-expert-video-thumb.jpg, which is still in /images, and restore the headline and copy in template-mental-health-parent.php. */ background-image: url("../images/mh-darian-video-thumb.jpg"); background-size: cover; background-position: center; -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .mh-expert__video:hover, .mh-expert__video:focus, .mh-expert__video:active { background-color: #d9d9d9; border-color: #003b45; } .mh-expert__video:hover:before, .mh-expert__video:hover .mh-expert__play, .mh-expert__video:focus-visible:before, .mh-expert__video:focus-visible .mh-expert__play { opacity: 0.7; } .mh-expert__play { position: absolute; top: 50%; left: 50%; width: 95px; height: 95px; transform: translate(-50%, -50%); -webkit-transition: all 0.25s ease-in-out; transition: all 0.25s ease-in-out; } .mh-expert__play img { display: block; width: 100%; height: 100%; } /** ------------------------------------------------ 4. HOMEPAGE PROMO MODULES Inserted into template-twyk-parent.php and template-twyk-educator.php. Self-contained so nothing in _twyk.scss has to change. ------------------------------------------------ */ /* The parent page's header now carries this module (see template-twyk-parent.php). poy.css swaps that header's photo for parents-header-mobile.png below 830px with an !important rule, which beats the inline background-image on the article — so the mobile crop has to be overridden here too, or phones keep showing the old photo. Matching the same breakpoint, with #introduction added for specificity. The scrim is strengthened to a bottom-up gradient for the same reason. poy.css uses a flat rgba(0,0,0,0.27) over this header, which was tuned for the old photo; against this one the white headline fell to 2.5:1 in its brightest patches (the brain and the lit desk), under the 3:1 minimum for large text. A gradient darkens the lower two thirds, where the copy sits, and leaves the brain at the top of the frame unmuddied. Scoped to the parent template so the educator header is untouched. */ @media screen and (max-width: 830px) { body.page-template-template-twyk-parent .twyk-landing-page .introduction-feature#introduction { background-image: url("../images/mh-parent-promo-bg-mobile.jpg") !important; } body.page-template-template-twyk-parent .twyk-landing-page .introduction-feature#introduction:before { background-color: transparent; background-image: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 30%, rgba(0, 0, 0, 0.7) 100%); } } /* Parent homepage module: the "Learn More" button and the parent/educator toggle are inline-block siblings with no margin between them, so below 800px — where poy.css reveals the toggle — they share a line. Under about 430px the toggle wraps directly beneath the button with no gap at all, and the button's 3px offset shadow lands on top of it; around 600px they don't wrap and the toggle sits 4px to the button's right instead. Both come from the button this module added to that header — the educator header has the same toggle but no button, which is why only this page shows it. Fixed on the button rather than the toggle. poy.css pins the toggle to `display: inline-block !important` here, and overriding that to block would also stretch it: `.toggle` inside is a flex container, so a block-level wrapper takes the pill from its natural width to the full column. Making the button block-level at its own width leaves the toggle untouched. 28px matches the spacing already used beneath this same toggle in the landing page's dropdown, above. */ @media screen and (max-width: 800px) { body.page-template-template-twyk-parent .twyk-landing-page .introduction-feature#introduction .copy .container .button { display: block; width: fit-content; margin-bottom: 28px; } } /* Educator homepage module. The markup is the site's own section structure (.standard-flex with .flex > .copy + .image, see template-twyk-educator.php), so column widths, type sizes, the button, margins and every responsive step come from _twyk.scss and match the sections above and below it. Only two things are added here: the section colour, because poy.css defines those per section and this file doesn't touch it, and the circular crop on the photo. Type colours are left to inherit: on this page _twyk.scss already renders section headlines and body copy white, which is what the comp shows. Worth knowing that white on this orange measures about 2.8:1, under the 4.5:1 minimum — but that is the existing treatment on every section of this page, so it is a sitewide question rather than something to fix here. */ .twyk-landing-page #mental-health.standard-flex { background-color: #ee7b61; background-image: url("../images/Red-Pattern-50.png"); background-repeat: repeat; background-size: 150px; /* The photo needs no clip: the designer's export is a transparent PNG with the circle crop and teal ring baked in, exactly like the pre-rounded PNGs the site's other sections use. It does need sizing, though. The site's section photos are 578px wide and render at that natural size, while this export is 510px — so left alone it would sit ~12% smaller than the section above it. Matching the neighbours' effective size means a slight upscale on wide screens; a 2x export from the designer would remove that. */ } .twyk-landing-page #mental-health.standard-flex .image img { width: 100%; max-width: 578px; } /** ------------------------------------------------ 5. MY LIFE, MY QUIT™ BAND Inserted into template-twyk-parent.php and template-twyk-educator.php, after Nicotine 101. The same band on both pages. ------------------------------------------------ */ /* Why these rules live in this file rather than in _twyk.scss: this stylesheet is already enqueued on both homepage templates and declares poy.css as a dependency, so it loads afterwards and almost all of this lands without !important. It also keeps the new work in one place, the way the rest of this build is organised. Everything structural is the site's own. .standard-flex with .flex.reverse — the modifier the educator page already uses twice — puts the logo left of the copy on desktop and stacks it above the copy below 800px, which is exactly what the two comps show. Type sizes, the button and the section margins all come from _twyk.scss, so this band matches Nicotine 101 above it and Healthy Youth Initiative below it. What is added here is only this band's own geometry, from Figma 4178:105 (desktop) and 4178:159 (mobile). One thing worth flagging rather than silently "fixing": the comp draws this headline at 56px and the body copy as 18px Poppins. It draws Nicotine 101's headline at 56px too, and that section renders at 80px Space Mono/Rubik on the live site — so the comp is showing a type scale the site doesn't use yet, across the whole page, not something specific to this band. Using the site's h2.h1 and p.large keeps this band the same size as its neighbours, which is the relationship the comp is actually describing. If you'd rather have it pixel-exact to Figma instead, it's a two-line change here, but the band would then read smaller than the sections either side of it. */ .twyk-landing-page #my-life-my-quit.standard-flex { background-color: #8a6eb1; background-image: url("../images/Purple-Pattern-50.png"); background-repeat: repeat; background-size: 150px; } .twyk-landing-page #my-life-my-quit.standard-flex .flex { /* The comp caps this row at 1200px and centres it, inset from the 1640px the full sections use. That inset is what makes it read as a promo strip between two sections rather than a third section. 1300 here because the site's box-sizing counts the 50px side padding inside max-width: 1300 - 100 = the 1200 the comp specifies. */ max-width: 1300px; /* 64px top and bottom in the comp, against 100px for a full section. The side value stays on the site's schedule (50px, then 30px below 1000px) so the band lines up with the sections above and below it. */ padding: 64px 50px; /* The comp's 80px between logo and copy. This replaces the percentage padding the site uses, which scales with the column and so wouldn't hold at 80px; gap also carries over cleanly to the stacked layout, where the comp again asks for 80px. */ gap: 80px; /* The logo is a fixed 268x207 in both comps, so its column is sized to the asset instead of taking a percentage of the row. */ /* The asset is an SVG with a viewBox and no width/height attributes, so it has no intrinsic size of its own to fall back on. Both dimensions are set explicitly here (and as attributes on the img) rather than left to auto, which is what keeps Safari from sizing it at its own default and what stops the row shifting while it loads. 268x207 is the comp's box; the viewBox ratio is the same, so nothing is distorted. */ /* Spacing inside the copy column, from the comp: 30px headline to paragraph, 48px paragraph to button. _twyk.scss sets 50px above and below the headline for full sections, which is too loose for a band this short. */ } .twyk-landing-page #my-life-my-quit.standard-flex .flex.reverse .image { padding-right: 0; } .twyk-landing-page #my-life-my-quit.standard-flex .flex .image { width: 268px; flex: 0 0 268px; } .twyk-landing-page #my-life-my-quit.standard-flex .flex .copy { width: auto; flex: 1 1 auto; } .twyk-landing-page #my-life-my-quit.standard-flex .flex .image img.mlmq-logo { width: 268px; height: 207px; max-width: 100%; } .twyk-landing-page #my-life-my-quit.standard-flex .flex h2, .twyk-landing-page #my-life-my-quit.standard-flex .flex .h1 { margin: 0 0 30px; } .twyk-landing-page #my-life-my-quit.standard-flex .flex p { margin: 0 0 48px; /* White, as the comp shows and as .posters — the site's other purple section, on the educator page — already does for body copy on this background. Without it the paragraph inherits _twyk.scss's default $black and renders dark teal on purple, which is also the weaker of the two for legibility: white on #8a6eb1 measures about 4.4:1 against the teal's 3.2:1. Both sit just under the 4.5:1 minimum for body text, so if that matters for this campaign the fix is a darker purple in the palette rather than anything in this band. */ color: white; } /* Side padding rejoins the site's schedule below 1000px. Needed explicitly because the rule above is more specific than poy.css's, so it would otherwise hold 50px all the way down to phones. Vertical stays 64px. */ @media screen and (max-width: 1000px) { .twyk-landing-page #my-life-my-quit.standard-flex .flex { padding: 64px 30px; } } /* Stacked layout. poy.css switches .standard-flex to a column here and centres both the photo and the copy; this band wants the logo centred but the copy still left-aligned, which is what both mobile comps show (the headline and the button sit flush at the band's left padding, while the sections above and below centre theirs). */ @media screen and (max-width: 800px) { .twyk-landing-page #my-life-my-quit.standard-flex .flex { /* poy.css caps stacked section photos at 300px with !important. The comp keeps the logo at its designed 268px on mobile too, so this has to match the !important to win. */ } .twyk-landing-page #my-life-my-quit.standard-flex .flex .copy { width: 100%; text-align: left; } .twyk-landing-page #my-life-my-quit.standard-flex .flex .image { /* Full width so the logo can centre in it, and the site's 20px bottom margin dropped because gap already provides the comp's 80px. */ width: 100%; flex: 0 0 auto; margin: 0; } .twyk-landing-page #my-life-my-quit.standard-flex .flex .image img.mlmq-logo { max-width: 268px !important; } } /** ------------------------------------------------ 6. RESPONSIVE ------------------------------------------------ */ /* Main stacking breakpoint. Kept at 1200px because below that the photo box is too short for the floating hotspot card, so the card moves into normal flow instead. MOBILE_AT in mental-health.js must match. */ @media screen and (max-width: 1200px) { .mh-page section { padding: 60px 0; } .mh-hero__title { font-size: 40px; } /* Narrower viewports crop the photo in behind the copy, so the scrim goes flat and heavier to keep the headline readable. */ .mh-hero { background-position: 72% center; } .mh-hero:before { background: rgba(0, 0, 0, 0.6); } .mh-brain__title, .mh-podcast__title, .mh-guide__title, .mh-expert__title { font-size: 36px; } .mh-brain__intro, .mh-podcast__soon, .mh-guide .mh-inner, .mh-expert .mh-inner { flex-direction: column; align-items: flex-start; } .mh-brain__intro { gap: 24px; } .mh-guide .mh-inner, .mh-expert .mh-inner { gap: 32px; } .mh-guide__image { width: 100%; max-width: 400px; align-self: center; order: 0; } .mh-expert__video { align-self: center; } /* Brain: taller photo box, and the info card moves below the photo instead of floating over it. Keep this at 3/2 — the --mh-xm / --mh-ym hotspot positions in the template are worked out against a 3:2 crop of the photo. */ .mh-brain__stage { aspect-ratio: 3/2; } .mh-brain__dot { left: var(--mh-xm); top: var(--mh-ym); } /* Card sits under the photo and pulls up so its top edge overlaps the bottom of the photo slightly, per the mobile comp. position: relative (not static) so the z-index keeps it above the photo, and the desktop left/top offsets have to be reset. */ .mh-brain__card { position: relative; z-index: 3; left: auto; top: auto; transform: none; width: calc(100% - 24px); max-width: none; max-height: none; overflow: visible; margin: -24px auto 0; } .mh-brain__card-body { padding: 0 0 8px; } /* Touch layouts swipe instead of using arrows (matches the mobile comp, which has no arrows and a "Swipe for More" hint). Hidden arrows are removed from the flex row, so no gutter is left behind. */ .mh-podcast__nav { display: none; } .mh-podcast__shell { gap: 0; } .mh-podcast__swipe { display: block; } } @media screen and (max-width: 700px) { /* Phones use their own portrait crop of the hero photo (mh-hero-mobile.jpg, exported from the mobile comp). The landscape crop stops at her waist, so on a narrow screen there was nowhere to put the copy that wasn't on top of the brain. The portrait one shows her head to shoes with the brain around 45% of the frame, which leaves the lower half free for the copy. Layout follows the mobile comp: copy anchored to the bottom, and a bottom-up gradient in place of the desktop side scrim. The .mh-page prefix is needed to outrank `.mh-page section` above. */ .mh-page .mh-hero { align-items: flex-end; min-height: 670px; padding-bottom: 32px; background-image: url("../images/mh-hero-mobile.jpg"); background-position: center; } .mh-hero:before { background: linear-gradient(180deg, rgba(0, 0, 0, 0) 28%, rgba(0, 0, 0, 0.55) 52%, rgba(0, 0, 0, 0.8) 100%); } .mh-hero__text { padding: 0; } /* Hero type runs a step down from the rest of the page on phones, matching the mobile comp — it also keeps the copy block short enough to sit clear of the brain. */ .mh-hero__title { font-size: 28px; } .mh-hero__copy { font-size: 16px; } .mh-brain__title, .mh-podcast__title, .mh-guide__title, .mh-expert__title { font-size: 30px; } .mh-brain__card-title { font-size: 22px; } .mh-episode__title { font-size: 26px; } .mh-episode { padding: 24px; } .mh-brain__dot { width: 38px; height: 38px; font-size: 18px; } .mh-expert__video { width: 100%; max-width: 260px; height: 460px; } } @media screen and (max-width: 599px) { /* Four markers on a photo this narrow sit close together — the tightest pair is only ~38px apart at 440px wide and ~32px at 370px — so they scale down with it. The pulse halo is dropped here because it is the part that collides first, and it is a hover affordance anyway. */ .mh-brain__dot { width: 32px; height: 32px; font-size: 15px; } .mh-brain__dot:after { display: none; } } /* Small phones get a shorter hero again — 670px is most of the screen on a device this narrow. Needs the same .mh-page prefix as the rule above to outrank it. */ @media screen and (max-width: 499px) { .mh-page .mh-hero { min-height: 520px; } } @media screen and (max-width: 440px) { .mh-brain__dot { width: 26px; height: 26px; font-size: 12px; } } @media screen and (max-width: 360px) { .mh-brain__dot { width: 22px; height: 22px; font-size: 10px; } } /*# sourceMappingURL=mental-health.css.map */