/* Bright Dreamers Club ? global styles Tokens on :root so you can tweak them live in DevTools (Elements ? ? Styles ? :root). */ :root { --color-pink: #ee1d78; --color-navy: #001b66; --color-cyan: #4ec3e0; --color-green: #6fbf4a; --color-orange: #f5a623; --color-yellow: #f5c518; --color-plane: #9b59d0; --color-pink-soft: #fff0f6; --color-story-bg: #fdf8f8; --our-story-card-pad-right: clamp(1.15rem, 2.2vw, 2.15rem); --our-story-card-pad-left: clamp(1.15rem, 2.2vw, 2.15rem); --our-story-card-pad-top: clamp(1.35rem, 2.6vw, 2.35rem); --our-story-card-pad-bottom: clamp(1.15rem, 2.2vw, 2.15rem); --believe-card-pink: #fff0f6; --believe-card-purple: #f6f2fc; --believe-card-yellow: #fffbeb; --believe-card-green: #eefaf3; --believe-card-peach: #fff5f7; --believe-card-blue: #eef6fc; --panel-cream: #faf7f2; --panel-lavender: #f3effa; --panel-sky: #f2f6fb; --panel-role-bg: #f6fafd; --panel-approach-bg: #f9fbf8; --panel-role-callout-bg: #fff5f8; --approach-arrow-width: clamp(20px, 2.2vw, 32px); --approach-steps-offset-top: 30px; --compare-left-bg: #feedf3; --compare-right-bg: #f1f9ed; --compare-bar-radius: 22px; --compare-vs-size: 52px; --compare-vs-gap: 22px; --compare-vs-clearance: calc(var(--compare-vs-size) / 2 + var(--compare-vs-gap)); --compare-right-text-pad-extra: 14px; --compare-photo-share: 44%; --role-heart-size: clamp(22px, 2.2vw, 30px); --role-callout-heart-size: clamp(28px, 2.8vw, 38px); --panel-bg-size: clamp(160px, 20vw, 200px) auto; --panel-bg-position: right center; --panel-journey-content-max: 54%; --panel-council-figure-width: 185px; --font-heading: 'Bitter', serif; --font-body: 'Outfit', sans-serif; --believe-icon-height: clamp(48px, 4.8vw, 58px); --believe-deco-size: clamp(40px, 3.6vw, 56px); --believe-text-max-width: 9.5rem; --container-max-width: 1650px; --container-padding: 72px; --card-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px; --lazy-img-placeholder: url("data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///yH5BAEAAAAALAAAAAABAAEAAAIBRAA7"); --lazy-img-blur: 15px; --lazy-img-scale: 1.05; --lazy-img-transition: filter 0.5s ease-out, transform 0.5s ease-out; --section-pad-y: 90px; --main-section-gap-y: clamp(1.5rem, 3vw, 2.25rem); --announce-pad-y: 8px; --announce-bg: var(--color-pink-soft); --announce-text-color: var(--color-navy); --announce-heart-color: var(--color-pink); --footer-bg: var(--color-pink-soft); --footer-edge-height: clamp(24px, 3.2vw, 40px); --footer-pad-y: clamp(2.35rem, 4vw, 3.65rem); --footer-pad-top-desktop: 60px; --footer-pad-bottom-desktop: 40px; --footer-desktop-max-width: 1440px; --footer-col-gap: clamp(1rem, 2.2vw, 2.25rem); --footer-link-gap: 0.42rem; --footer-heading-gap: 0.8rem; --footer-art-max-w: 250px; --footer-newsletter-max-w: none; --footer-newsletter-gap: clamp(0.5rem, 0.85vw, 0.65rem); --footer-newsletter-shell-height: 48px; --header-pad-y: 10px; --header-logo-height: clamp(72px, 5.5vw, 92px); --header-logo-box-width: clamp(240px, 16vw, 300px); --header-logo-width-pct: 80%; --hero-pad-y: 0; --about-hero-pad-top: 8px; --home-hero-logo-width: 460px; --home-hero-col-gap: clamp(0.25rem, 0.6vw, 0.65rem); --home-hero-content-max: 36rem; --home-hero-content-share: 44%; --home-hero-title-size: clamp(3.55rem, 6.1vw, 6.15rem); --home-hero-banner-max: min(580px, 70vh); /* Shared desktop hero: same inset as header, tighter text/image pairing */ --page-hero-balanced-content-col: 0.4fr; --page-hero-balanced-media-col: 0.6fr; --page-hero-balanced-content-max: none; --page-hero-col-gap: clamp(0.15rem, 0.45vw, 0.4rem); --explore-hero-content-col: 0.86fr; --explore-hero-media-col: 1.14fr; --explore-hero-content-max: 34rem; --explore-hero-inner-gap: clamp(0.35rem, 1vw, 0.85rem); --explore-hero-deco-width: clamp(102px, 11.5vw, 142px); --explore-section-pad-top: clamp(0.15rem, 0.45vw, 0.4rem); --explore-section-pad-bottom: clamp(2.5rem, 4vw, 3.75rem); --explore-way-head-min-h: clamp(3.15rem, 4.6vw, 3.85rem); --explore-way-text-lines: 5; --explore-skill-text-min-lines: 3; --explore-grow-card-h: clamp(188px, 18.2vw, 250px); --explore-grow-layout-min-h: clamp(158px, 15.2vw, 212px); --explore-grow-photo-max: clamp(102px, 10.8vw, 138px); --explore-grow-icon-size: clamp(24px, 2.45vw, 32px); --explore-grow-card-pad-y: clamp(0.5rem, 0.95vw, 0.85rem); --explore-grow-card-pad-x: clamp(0.55rem, 0.9vw, 0.8rem); --explore-grow-blob-size: 108% 104%; --explore-grow-quote-lines: 2; --explore-grow-arrow-width: clamp(18px, 1.9vw, 28px); --explore-impact-text-lines: 4; --explore-impact-quote-min-h: clamp(210px, 20vw, 280px); --explore-impact-quote-text-max: clamp(10.5rem, 11vw, 13rem); --explore-impact-quote-stanza-gap: clamp(0.55rem, 0.85vw, 0.75rem); --explore-dream-bg: #fff0f5; --explore-dream-radius: 20px; --explore-dream-pad: clamp(1rem, 1.8vw, 1.65rem); --explore-dream-photo-max-h: clamp(118px, 11.5vw, 168px); --explore-dream-jar-max-h: clamp(112px, 10.8vw, 158px); --home-pillar-idea-bg: #fff5f8; --home-pillar-mission-bg: #fffbeb; --home-pillar-inspire-bg: #eef6fc; --home-pillar-radius: 18px; --home-pillar-pad: clamp(1rem, 1.8vw, 1.45rem); --home-pillar-img-filter: var(--logo-bg-filter); --home-section-icon-filter: var(--home-pillar-img-filter); --home-reality-bg: #fff5f8; --home-reality-glow-dream: rgba(238, 29, 120, 0.2); --home-reality-glow-imagine: rgba(139, 92, 246, 0.2); --home-reality-glow-create: rgba(255, 159, 28, 0.22); --home-reality-glow-share: rgba(43, 127, 212, 0.2); --home-reality-glow-help: rgba(61, 154, 90, 0.2); --home-reality-glow-celebrate: rgba(238, 29, 120, 0.18); --home-reality-icon-size: clamp(64px, 6.5vw, 88px); --home-reality-icon-inner: 100%; --home-reality-deco-wrap-width: clamp(2.5rem, 4.5vw, 3.75rem); --home-reality-deco-size: clamp(40px, 3.6vw, 56px); --home-reality-deco-inset-x: clamp(1rem, 2vw, 1.5rem); --home-reality-inner-pad-x: clamp(4.5rem, 10vw, 7.5rem); --home-different-divider: rgba(0, 27, 102, 0.1); --home-explore-bg: #fdf8f8; --experience-card-radius: 16px; --experience-photo-radius: 12px; --experience-icon-size: clamp(40px, 3.6vw, 48px); --home-reality-box-radius: 20px; --spotlight-card-radius: 16px; --logo-bg-filter: brightness(1.14) contrast(1.12) saturate(1.02); --contact-hero-pad-top: 30px; --contact-hero-title-size: clamp(2.75rem, 4.8vw, 4rem); --contact-hero-star-size: clamp(24px, 2.6vw, 34px); --contact-hero-heart-size: clamp(24px, 2.4vw, 30px); --contact-hero-heart-offset-x: clamp(0.35rem, 0.8vw, 0.65rem); --contact-hero-copy-max-w: 26.5rem; --contact-hero-content-col: 0.4fr; --contact-hero-media-col: 0.6fr; --for-parents-hero-title-size: clamp(2.75rem, 4.8vw, 4rem); --for-parents-hero-star-size: clamp(22px, 2.4vw, 30px); --get-involved-hero-title-size: clamp(2.75rem, 4.8vw, 4rem); --get-involved-hero-content-col: 0.4fr; --get-involved-hero-media-col: 0.6fr; --get-involved-ways-icon-size: clamp(68px, 6.5vw, 84px); --get-involved-ways-card-title-size: clamp(0.92rem, 1vw, 1.08rem); --get-involved-ways-card-text-size: clamp(0.78rem, 0.86vw, 0.88rem); --partners-ways-icon-size: clamp(68px, 6.5vw, 84px); --partners-ways-icon-filter: brightness(1.12) contrast(1.1) saturate(1.04); --partners-ways-card-title-size: clamp(1.08rem, 1.2vw, 1.32rem); --partners-ways-card-text-size: clamp(0.92rem, 1vw, 1.05rem); --partners-ways-blue: #2b7fd4; --partners-impact-bg: #fffbeb85; --partners-impact-box-radius: var(--home-pillar-radius); --partners-impact-card-title-size: clamp(1rem, 1.1vw, 1.18rem); --partners-impact-card-text-size: clamp(0.9rem, 0.98vw, 1.02rem); --partners-impact-deco-size: clamp(22px, 2vw, 28px); --partners-opportunity-cta-gradient: linear-gradient( 90deg, #e91e63 0%, #c2185b 42%, #7b1fa2 78%, #5e35b1 100% ); --partners-opportunity-cta-radius: 20px; --partners-opportunity-bulb-size: clamp(52px, 5vw, 72px); --partners-opportunity-plane-width: clamp(88px, 9vw, 120px); --partners-founding-icon-size: clamp(68px, 6.5vw, 84px); --partners-founding-card-title-size: clamp(0.92rem, 1vw, 1.08rem); --partners-founding-card-text-size: clamp(0.9rem, 0.98vw, 1.02rem); --get-involved-impact-copy-col: 0.32fr; --get-involved-impact-visual-col: 0.68fr; --get-involved-timeline-icon-size: clamp(46px, 4.4vw, 58px); --get-involved-timeline-rail-width: clamp(16px, 1.5vw, 22px); --get-involved-impact-illustration-max: clamp(190px, 22vw, 290px); --get-involved-partner-cta-envelope-width: clamp(120px, 13vw, 175px); --get-involved-partner-cta-deco-width: clamp(88px, 9vw, 118px); --get-involved-partner-cta-pad-y: clamp(1rem, 1.85vw, 1.55rem); --get-involved-partner-cta-pad-x: clamp(calc(1.1rem + 30px), calc(2vw + 30px), calc(1.75rem + 30px)); --for-parents-expect-card-border: rgba(0, 27, 102, 0.12); --for-parents-expect-text-lines: 4; --for-parents-expect-deco-width: clamp(34px, 3.6vw, 52px); --contact-form-pad-y: 0; --contact-form-radius: 18px; --contact-form-aside-bg: var(--panel-lavender); --contact-form-aside-col: 0.32fr; --contact-form-main-col: 0.68fr; --contact-form-deco-fit: cover; --contact-form-deco-position: center bottom; --contact-form-aside-plane-max: clamp(150px, 16vw, 210px); --contact-form-aside-plant-max: clamp(130px, 14vw, 185px); --contact-form-plane-deco-max: clamp(110px, 11vw, 150px); --contact-form-wrap-pad: 0; --contact-form-wrap-gap: clamp(0.55rem, 1vw, 0.75rem); --contact-form-border: #e2e5ef; --contact-form-input-border: #e0e4ee; --contact-form-input-radius: 14px; --contact-form-input-height: 54px; --contact-form-textarea-min-h: 130px; --contact-form-privacy-bg: var(--color-pink-soft); --contact-cta-bg: var(--panel-cream); --contact-cta-radius: 20px; --contact-cta-pad-y: 0; --contact-cta-door-width: clamp(130px, 14vw, 185px); --contact-cta-text-size: 25px; --contact-cta-text-max-w: 461px; --creative-makers-hero-content-col: 0.4fr; --creative-makers-hero-media-col: 0.6fr; --creative-makers-hero-copy-max-w: none; --creative-makers-hero-pad-top: 30px; --creative-makers-activity-icon-size: clamp(52px, 5vw, 68px); --creative-makers-activity-paint-bg: #fff5f8; --creative-makers-activity-crafts-bg: #fff8ef; --creative-makers-activity-media-bg: #f6f0fc; --creative-makers-activity-design-bg: #f0f9eb; --creative-makers-activity-upcycle-bg: #eef6fc; --creative-makers-info-skills-bg: #fff5f8; --creative-makers-info-grow-bg: #fff0f6; --creative-makers-info-impact-bg: #fff8ef; --creative-makers-info-bg: var(--believe-card-peach); --creative-makers-cta-bg: #fff0f5; --creative-makers-cta-radius: 20px; --color-purple: #7b3fbd; --color-purple-soft: #f3edfc; --color-purple-muted: #ede4f8; --young-ideas-lab-activity-science-bg: #f6f0fc; --young-ideas-lab-activity-problem-bg: #f0f9eb; --young-ideas-lab-activity-invention-bg: #fff5f8; --young-ideas-lab-activity-coding-bg: #fff8ef; --young-ideas-lab-activity-design-bg: #eef6fc; --young-ideas-lab-info-skills-bg: #f8f5fc; --young-ideas-lab-info-grow-bg: #f3edfc; --young-ideas-lab-info-impact-bg: #f8f5fc; --young-ideas-lab-cta-bg-start: #f8f5fc; --young-ideas-lab-cta-bg-mid: #f3edfc; --young-ideas-lab-cta-bg-end: #ede4f8; --color-green: #3d9a5a; --color-green-soft: #eef8f1; --color-green-muted: #e3f3e8; --create-for-cause-activity-kindness-bg: #eef8f1; --create-for-cause-activity-donation-bg: #fff8ef; --create-for-cause-activity-care-bg: #eef6fc; --create-for-cause-activity-awareness-bg: #fff5f8; --create-for-cause-activity-events-bg: #f6f0fc; --create-for-cause-info-card-bg: #f5f6f7; --create-for-cause-info-deco-size: clamp(40px, 4vw, 52px); --create-for-cause-info-deco-plant-size: clamp(48px, 4.5vw, 60px); --create-for-cause-info-skills-bg: var(--create-for-cause-info-card-bg); --create-for-cause-info-grow-bg: var(--create-for-cause-info-card-bg); --create-for-cause-info-impact-bg: var(--create-for-cause-info-card-bg); --create-for-cause-cta-bg-start: #eef8f1; --create-for-cause-cta-bg-mid: #e3f3e8; --create-for-cause-cta-bg-end: #d9eedf; --color-blue-accent: #2b7fd4; --color-blue-soft: #eef5fc; --color-blue-muted: #e3eef8; --community-adventures-activity-places-bg: #eef5fc; --community-adventures-activity-helpers-bg: #eef8f1; --community-adventures-activity-nature-bg: #fff8ef; --community-adventures-activity-culture-bg: #fff5f8; --community-adventures-activity-business-bg: #f6f0fc; --community-adventures-info-skills-bg: #eef5fc; --community-adventures-info-grow-bg: #e3eef8; --community-adventures-info-impact-bg: #eef5fc; --community-adventures-cta-bg-start: #eef5fc; --community-adventures-cta-bg-mid: #e3eef8; --community-adventures-cta-bg-end: #d9e8f8; --for-parents-cta-envelope-width: clamp(130px, 14vw, 185px); --for-parents-cta-star-size: clamp(24px, 2.4vw, 32px); --for-parents-cta-pad-top: 10px; --vision-hero-banner-scale: 1.05; --vision-hero-content-col: 0.4fr; --vision-hero-media-col: 0.6fr; --vision-pillar-orange-bg: #fff8ef; --vision-pillar-icon-size: clamp(56px, 5vw, 72px); --vision-pillar-purpose-icon-extra: 5px; --vision-pillar-deco-size: 40px; --vision-pillar-text-lines: 5; --vision-roadmap-goals-col: 0.42fr; --vision-roadmap-journey-col: 0.58fr; --vision-journey-icon-size: clamp(52px, 5.5vw, 68px); --vision-journey-num-size: clamp(22px, 2.2vw, 28px); --vision-journey-step-title-size: clamp(0.86rem, 0.96vw, 1rem); --vision-journey-step-quote-size: clamp(0.78rem, 0.86vw, 0.88rem); --vision-journey-step-text-size: clamp(0.74rem, 0.82vw, 0.82rem); --vision-moments-bg: var(--believe-card-peach); --vision-moments-card-col: 0.28fr; --vision-moments-gallery-col: 0.72fr; --vision-moments-photo-col: 0.15fr; --vision-moments-feature-col: 0.54fr; --vision-moments-duo-col: 0.31fr; --vision-moments-gallery-h: auto; --vision-moments-feature-aspect: 900 / 400; --vision-moments-feature-copy-width: min(56%, 13.5rem); --vision-moments-feature-title-size: clamp(0.82rem, 0.92vw, 0.98rem); --vision-moments-feature-text-size: clamp(0.66rem, 0.74vw, 0.76rem); --vision-partner-bg: var(--believe-card-peach); --vision-partner-divider: rgba(0, 0, 0, 0.14); --vision-partner-card-pad: clamp(0.22rem, 0.38vw, 0.35rem); --vision-partner-panel-inset-y: clamp(0.28rem, 0.5vw, 0.42rem); --vision-partner-copy-col: 0.26fr; --vision-partner-panel-col: 0.74fr; --vision-together-bg: var(--believe-card-peach); --vision-together-jar-col: 0.52fr; --vision-together-card-pad-y: clamp(0.85rem, 1.45vw, 1.25rem); --vision-together-card-pad-right: clamp(0.85rem, 1.45vw, 1.25rem); --vision-together-card-pad-left: clamp(0.45rem, 0.72vw, 0.62rem); --vision-partner-icon-size: clamp(42px, 4.2vw, 52px); --vision-together-jar-max: clamp(120px, 12vw, 170px); --color-sky: #4a90e2; --for-parents-info-item-title-size: clamp(calc(0.82rem + 5px), calc(0.9vw + 5px), calc(0.94rem + 5px)); --for-parents-info-feature-icon-size: clamp(34px, 3.2vw, 42px); --for-parents-info-step-icon-size: clamp(32px, 3.1vw, 40px); --heading-underline-left: -2%; --heading-underline-width: 105%; --heading-underline-bottom: -0.12em; --heading-underline-height: 0.34em; --ease-soft: 0.25s ease; --btn-hover-scale: 1.04; --nav-gap: calc(1.35rem + 5px); --btn-radius: 999px; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; overflow-x: hidden; overflow-y: auto; } body { margin: 0; font-family: var(--font-body); color: var(--color-navy); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; background: #fff; overflow-x: hidden; overflow-y: auto; } body.menu-open { overflow: hidden; } h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading); margin: 0; } p { margin: 0; } ul { margin: 0; padding: 0; list-style: none; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } button { font-family: inherit; cursor: pointer; border: none; background: none; } /* Shared content wrapper ? full-bleed backgrounds stay outside this */ .site-container { width: 100%; max-width: var(--container-max-width); margin-left: auto; margin-right: auto; padding-left: var(--container-padding); padding-right: var(--container-padding); } .section-padding { padding-top: 0; padding-bottom: var(--section-pad-y); } /* Main page sections ? single-side gap so stacked sections don't double up */ #main-content > section { padding-top: 0; padding-bottom: var(--main-section-gap-y); margin-top: 0; margin-bottom: 0; } #main-content > section.page-hero { padding-top: var(--hero-pad-y); padding-bottom: var(--main-section-gap-y); } #main-content > section.about-hero, #main-content > section.home-hero, #main-content > section.for-parents-hero, #main-content > section.get-involved-hero, #main-content > section.vision-hero, #main-content > section.explore-hero, #main-content > section.creative-makers-hero, #main-content > section.young-ideas-lab-hero, #main-content > section.create-for-cause-hero, #main-content > section.community-adventures-hero { padding-top: var(--about-hero-pad-top); } .home-page #main-content > section.home-hero, .home-page #main-content > section.page-hero.home-hero, .home-page #main-content > section.page-hero.home-welcome-hero { padding-top: 0 !important; margin-top: 0; } .get-involved-page #main-content > section.get-involved-hero, .get-involved-page #main-content > section.page-hero.get-involved-hero { padding-top: 0 !important; margin-top: 0; } .our-vision-page #main-content > section.vision-hero, .our-vision-page #main-content > section.page-hero.vision-hero { padding-top: 0 !important; margin-top: 0; } #main-content > section.faq-hero { padding-top: var(--about-hero-pad-top); padding-bottom: var(--main-section-gap-y); } #main-content > section.explore-hero.page-hero, #main-content > section.creative-makers-hero.page-hero, #main-content > section.young-ideas-lab-hero.page-hero, #main-content > section.create-for-cause-hero.page-hero, #main-content > section.community-adventures-hero.page-hero { padding-bottom: 0.35rem; } @media (max-width: 991px) { #main-content > section.home-hero, #main-content > section.about-hero, #main-content > section.explore-hero.page-hero, #main-content > section.creative-makers-hero.page-hero, #main-content > section.young-ideas-lab-hero.page-hero, #main-content > section.create-for-cause-hero.page-hero, #main-content > section.community-adventures-hero.page-hero, #main-content > section.for-parents-hero, #main-content > section.vision-hero, #main-content > section.get-involved-hero, #main-content > section.partners-hero, #main-content > section.contact-hero, #main-content > section.accessibility-hero, #main-content > section.financial-hero, #main-content > section.faq-hero, #main-content > section.apply-hero, #main-content > section.terms-hero, #main-content > section.media-policy-hero { padding-bottom: 2.25rem; } #explore-content > .explore-ways:first-child { margin-top: 0; } .explore-ways.section-padding, .explore-skills.section-padding, .explore-grow.section-padding, .explore-impact.section-padding, .explore-dream.section-padding { --explore-section-pad-top: 1.5rem; } #main-content > section.home-hero + section, #main-content > section.about-hero + section { padding-top: 0.35rem; } } .card-shadow { box-shadow: var(--card-shadow); } /* ??? Buttons ??? */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; font-family: var(--font-body); font-weight: 560; font-size: 0.95rem; line-height: 1.2; white-space: nowrap; padding: 0.7rem 1.35rem; border-radius: var(--btn-radius); border: 2px solid transparent; transition: transform var(--ease-soft), box-shadow var(--ease-soft), background-color var(--ease-soft), color var(--ease-soft), border-color var(--ease-soft); } .btn--lg { font-size: 1rem; padding: 0.85rem 1.55rem; } .btn--solid { background-color: var(--color-pink); color: #fff; border-color: var(--color-pink); } .btn--solid:hover { background-color: #d4186a; border-color: #d4186a; } .btn--outline { background-color: transparent; color: var(--color-pink); border-color: var(--color-pink); } .btn--outline:hover { background-color: var(--color-pink-soft); } .btn--purple { background-color: var(--color-plane); color: #fff; border-color: var(--color-plane); } .btn--purple:hover { background-color: #8649bd; border-color: #8649bd; } .btn--orange { background-color: var(--color-orange); color: #fff; border-color: var(--color-orange); } .btn--orange:hover { background-color: #e09515; border-color: #e09515; } .btn__icon { flex-shrink: 0; } .btn__icon--star { width: 1.5rem; height: 1.5rem; flex-shrink: 0; } .btn-hover:hover { transform: scale(var(--btn-hover-scale)); } /* ??? Nav underline (brush stroke image) ??? */ .nav-link { position: relative; display: inline-block; font-family: var(--font-body); font-weight: 500; font-size: 0.98rem; color: var(--color-navy); padding-bottom: 0.65rem; transition: color var(--ease-soft); } .nav-link::after { content: ''; position: absolute; left: 50%; bottom: 0.1rem; width: calc(100% + 6px); height: 3px; background-image: url('../images/nav-underline.png'); background-repeat: no-repeat; background-position: center; /* Force thin line ? don?t stretch vertically */ background-size: 100% 3px; opacity: 0; transform: translateX(-50%) scaleX(0.6); transform-origin: center; transition: opacity 0.22s ease, transform 0.22s ease; pointer-events: none; mix-blend-mode: multiply; } .nav-link:hover { color: var(--color-pink); } .nav-link:hover::after, .nav-link.is-active::after, .site-nav__item.current-menu-item > .nav-link::after, .site-nav__item.current-menu-ancestor > .nav-link::after { opacity: 1; transform: translateX(-50%) scaleX(1); } .nav-link.is-active, .site-nav__item.current-menu-item > .nav-link, .site-nav__item.current-menu-ancestor > .nav-link { color: var(--color-pink); font-weight: 600; } /* ??? Announcement bar ??? */ .announce-bar { background-color: var(--announce-bg); color: var(--announce-text-color); } .announce-bar__inner { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 1rem; padding-top: var(--announce-pad-y); padding-bottom: var(--announce-pad-y); min-height: 38px; } .announce-bar__text { grid-column: 2; display: flex; align-items: center; justify-content: center; gap: 0.45rem; font-size: 0.88rem; font-weight: 500; line-height: 1.35; text-align: center; } .announce-bar__heart { display: inline-flex; color: var(--announce-heart-color); flex-shrink: 0; } .announce-bar__social { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 0.45rem; flex-shrink: 0; } .social-icon { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 50%; background-color: var(--color-pink); color: #fff; box-shadow: 0 1px 2px rgba(0, 27, 102, 0.12); transition: transform var(--ease-soft), background-color var(--ease-soft); } .social-icon:hover { transform: scale(1.08); background-color: var(--color-navy); } /* ??? Site footer ??? */ .site-footer { margin-top: auto; } .site-footer__edge { height: var(--footer-edge-height); background: linear-gradient(to bottom, #fff 0%, var(--footer-bg) 100%); pointer-events: none; } .site-footer__main { background-color: var(--footer-bg); padding-top: clamp(0.75rem, 1.5vw, 1.25rem); padding-bottom: var(--footer-pad-y); } .site-footer__grid { display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, 0.88fr) minmax(0, 0.88fr) minmax(0, 0.95fr) minmax(0, 1.35fr); gap: var(--footer-col-gap); align-items: start; } .site-footer__col--brand { max-width: 16.5rem; } .site-footer__logo { display: inline-block; margin-bottom: 0.85rem; } .site-footer__logo img { display: block; width: min(100%, 220px); height: auto; object-fit: contain; background: transparent; filter: none; mix-blend-mode: multiply; } .site-footer__mission { font-family: var(--font-body); font-size: 0.92rem; font-weight: 400; line-height: 1.55; color: var(--color-navy); margin: 0 0 1rem; max-width: 15.5rem; } .site-footer__social { display: flex; align-items: center; gap: 0.45rem; flex-wrap: wrap; } .site-footer__heading { font-family: var(--font-heading); font-size: 1rem; font-weight: 700; line-height: 1.25; color: var(--color-navy); margin: 0 0 var(--footer-heading-gap); } .site-footer__links { display: flex; flex-direction: column; gap: var(--footer-link-gap); } .site-footer__link { font-family: var(--font-body); font-size: 0.88rem; font-weight: 400; line-height: 1.35; color: var(--color-navy); transition: color var(--ease-soft); } .site-footer__link:hover { color: var(--color-pink); } .site-footer__col--art { display: flex; justify-content: center; align-items: center; padding-top: 0.35rem; } .site-footer__art { width: 100%; max-width: var(--footer-art-max-w); height: auto; object-fit: contain; } .site-footer__col--newsletter { min-width: 0; display: flex; flex-direction: column; } .site-footer__newsletter-layout { display: flex; flex: 1 1 auto; flex-direction: column; min-height: 100%; background: var(--color-pink-soft); border-radius: 22px; padding: clamp(16px, 1.5vw, 22px) clamp(16px, 1.4vw, 20px); } .site-footer__newsletter-content { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; max-width: none; } .site-footer__heading--newsletter { display: flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; margin: 0 0 var(--footer-heading-gap); } .site-footer__heading-heart { color: var(--color-pink); font-weight: 500; } .site-footer__heading-link { display: inline-block; color: inherit; text-decoration: none; } .site-footer__heading-link:hover .site-footer__heading { color: var(--color-pink); } .site-footer__newsletter-text { font-family: var(--font-body); font-size: 0.9rem; font-weight: 400; line-height: 1.58; color: var(--color-navy); margin: 0 0 1rem; } .footer-newsletter { display: flex; flex-direction: row; align-items: stretch; gap: 0; width: 100%; margin: 0; } .footer-newsletter__field { flex: 1 1 auto; min-width: 0; border: 1px solid var(--contact-form-input-border); border-right: 0; border-radius: 999px 0 0 999px; background-color: #fff; overflow: hidden; } .footer-newsletter__input { display: block; width: 100%; height: var(--footer-newsletter-shell-height); border: 0; background: transparent; padding: 0 1rem; margin: 0; font-family: var(--font-body); font-size: 0.88rem; line-height: 1.2; color: var(--color-navy); appearance: none; -webkit-appearance: none; box-sizing: border-box; } .footer-newsletter__input::placeholder { color: rgba(0, 27, 102, 0.38); } .footer-newsletter__input:focus { outline: none; } .footer-newsletter__btn { display: flex; align-items: center; justify-content: center; gap: 0.35rem; flex-shrink: 0; width: auto; height: var(--footer-newsletter-shell-height); border: 0; border-radius: 0 999px 999px 0; padding: 0 1.2rem; margin: 0; background-color: var(--color-pink); color: #fff; font-family: var(--font-body); font-size: 0.88rem; font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; box-sizing: border-box; transition: background-color var(--ease-soft); } .footer-newsletter__btn:hover { background-color: var(--color-navy); } .footer-newsletter__heart { flex-shrink: 0; display: block; } .site-footer__legal { background-color: var(--footer-bg); border-top: 1px solid rgba(0, 27, 102, 0.08); } .site-footer__legal-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.55rem 0.85rem; padding-top: 0.95rem; padding-bottom: 0.95rem; } .site-footer__copyright, .site-footer__legal-link { font-family: var(--font-body); font-size: 0.82rem; line-height: 1.4; color: var(--color-navy); } .site-footer__legal-nav { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 0.55rem 0.85rem; } .site-footer__legal-sep { color: rgba(0, 27, 102, 0.35); font-size: 0.82rem; line-height: 1; } .site-footer__legal-link { transition: color var(--ease-soft); } .site-footer__legal-link:hover { color: var(--color-pink); } @media (min-width: 992px) { .site-footer__main > .site-container.site-footer__grid, .site-footer__legal > .site-container.site-footer__legal-inner { width: 100%; max-width: var(--footer-desktop-max-width); margin-left: auto; margin-right: auto; box-sizing: border-box; } .site-footer__main { padding-top: var(--footer-pad-top-desktop); padding-bottom: var(--footer-pad-bottom-desktop); } .site-footer__grid > .site-footer__col:not(:first-child) { border-left: 1px dashed rgba(0, 27, 102, 0.14); padding-left: clamp(1rem, 1.6vw, 1.85rem); } .site-footer__col--resources .site-footer__heading, .site-footer__col--newsletter .site-footer__heading--newsletter { margin-top: 0; } .site-footer__col--newsletter .site-footer__newsletter-layout { padding-top: 0; } .site-footer__initiative { display: none; } .site-footer__legal-sep--heart, .site-footer__legal-heart { display: none; } .site-footer__legal-inner { flex-wrap: nowrap; justify-content: center; gap: 0.65rem; padding-top: 0.85rem; padding-bottom: 0.85rem; } .site-footer__legal-copy { display: contents; } .site-footer__copyright { margin: 0; } .site-footer__legal-sep--lead { display: inline; } } .site-footer__mobile { display: none; } .site-footer__legal-copy { display: flex; align-items: center; } .site-footer__copyright, .site-footer__initiative { margin: 0; } .site-footer__initiative, .site-footer__legal-heart, .site-footer__legal-sep--heart { display: none; } .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } /* ??? Site header ??? */ .site-header { background: #fff; position: relative; z-index: 100; border-bottom: none; } .site-header__inner { display: flex; align-items: center; gap: 1.25rem; padding-top: var(--header-pad-y); padding-bottom: var(--header-pad-y); min-height: calc(var(--header-logo-height) + var(--header-pad-y) * 2); } .site-header__logo { flex-shrink: 0; background: transparent; } .site-header__logo img { width: auto; height: var(--header-logo-height); object-fit: contain; filter: none; background: transparent; } @media (min-width: 1025px) { .site-header__logo { width: var(--header-logo-box-width); } .site-header__logo img { width: var(--header-logo-width-pct); height: auto; } .site-header__inner { min-height: calc(var(--header-logo-box-width) * 0.8 * 0.3 + var(--header-pad-y) * 2); } } .site-nav { flex: 1; display: flex; justify-content: center; min-width: 0; } .site-nav__list { display: flex; align-items: center; justify-content: center; flex-wrap: nowrap; gap: var(--nav-gap); } .site-nav__item--dropdown { position: relative; } .site-nav__submenu { position: absolute; top: calc(100% + 0.1rem); left: 50%; transform: translateX(-50%) translateY(6px); min-width: 12rem; margin: 0; padding: 0.4rem 0; list-style: none; background-color: #fff; border-radius: 12px; box-shadow: var(--card-shadow); opacity: 0; visibility: hidden; pointer-events: none; transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease; z-index: 120; } .site-nav__item--dropdown:hover .site-nav__submenu, .site-nav__item--dropdown:focus-within .site-nav__submenu { opacity: 1; visibility: visible; pointer-events: auto; transform: translateX(-50%) translateY(0); } .site-nav__sublink { display: block; padding: 0.55rem 1rem; font-family: var(--font-body); font-size: 0.92rem; font-weight: 500; line-height: 1.35; color: var(--color-navy); white-space: nowrap; transition: color var(--ease-soft), background-color var(--ease-soft); } .site-nav__sublink:hover, .site-nav__sublink.is-active { color: var(--color-pink); background-color: var(--color-pink-soft); } .site-header__actions { display: flex; align-items: center; gap: 0.65rem; flex-shrink: 0; } .menu-toggle { display: none; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 8px; margin-left: auto; } .menu-toggle span { display: block; height: 2px; width: 100%; background: var(--color-navy); border-radius: 2px; transition: transform var(--ease-soft), opacity var(--ease-soft); } .menu-toggle[aria-expanded='true'] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .menu-toggle[aria-expanded='true'] span:nth-child(2) { opacity: 0; } .menu-toggle[aria-expanded='true'] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .mobile-menu { display: none; } @media (max-width: 1200px) { .mobile-menu { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 400; width: 100%; height: 100%; height: 100dvh; background: #fff; overflow: hidden; visibility: hidden; opacity: 0; pointer-events: none; transform: translateX(18px); transition: opacity 0.22s ease, transform 0.22s ease, visibility 0.22s ease; } .mobile-menu[aria-hidden='false'] { visibility: visible; opacity: 1; pointer-events: auto; transform: none; } body.menu-open .site-header { z-index: 400; } .mobile-nav { display: flex; flex-direction: column; height: 100%; min-height: 0; background: #fff; } .mobile-nav__header { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-shrink: 0; padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 12px; border-bottom: 1px solid rgba(0, 27, 102, 0.1); background: #fff; } .mobile-nav__logo { display: block; min-width: 0; flex: 1 1 auto; background: transparent; } .mobile-nav__logo img { display: block; width: min(220px, 62vw); max-width: calc(100% - 8px); height: auto; max-height: 72px; object-fit: contain; filter: none; background: transparent; } .mobile-nav__close { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 40px; height: 40px; padding: 0; border: 0; border-radius: 50%; background: #ffe4ef; color: var(--color-navy); cursor: pointer; } .mobile-nav__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; overscroll-behavior: contain; display: flex; flex-direction: column; } .mobile-nav__nav { flex-shrink: 0; } .mobile-nav__list, .mobile-nav__sublist, .mobile-nav__social { list-style: none; margin: 0; padding: 0; } .mobile-nav__item { border-bottom: 1px solid rgba(0, 27, 102, 0.08); } .mobile-nav__row { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0; padding: 11px 16px; border: 0; background: transparent; color: var(--color-navy); font-family: var(--font-body); font-size: 1rem; font-weight: 650; line-height: 1.25; text-align: left; cursor: pointer; } .mobile-nav__row--split { padding: 0; gap: 0; cursor: default; } .mobile-nav__link { display: flex; align-items: center; gap: 12px; flex: 1 1 auto; min-width: 0; padding: 11px 8px 11px 16px; color: inherit; text-decoration: none; font: inherit; } .mobile-nav__chevron-btn { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 52px; min-height: 48px; margin: 0; padding: 11px 16px 11px 8px; border: 0; background: transparent; color: inherit; cursor: pointer; } .mobile-nav__item.is-active > .mobile-nav__row { background: var(--color-pink-soft); color: var(--color-pink); } .mobile-nav__icon { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: 36px; height: 36px; border-radius: 50%; } .mobile-nav__icon svg { display: block; width: 20px; height: 20px; } .mobile-nav__icon--home, .mobile-nav__icon--involved { background: #ffe4ef; color: var(--color-pink); } .mobile-nav__icon--about, .mobile-nav__icon--partners { background: #efe6fa; color: var(--color-purple); } .mobile-nav__icon--explore { background: #e4f0fb; color: var(--color-blue-accent); } .mobile-nav__icon--parents { background: var(--color-green-soft); color: var(--color-green); } .mobile-nav__icon--vision { background: #fff4cc; color: #e8a317; } .mobile-nav__icon--contact { background: #e5f4fb; color: #3aa4d4; } .mobile-nav__icon--default { background: #eef1f5; color: var(--color-navy); } .mobile-nav__label { flex: 1 1 auto; min-width: 0; } .mobile-nav__chevron { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-navy); transition: transform 0.22s ease; } .mobile-nav__item.is-active:not(.mobile-nav__item--accordion) .mobile-nav__chevron { display: none; } .mobile-nav__item--accordion.is-open .mobile-nav__chevron { transform: rotate(90deg); } .mobile-nav__sublist { background: #eef2f6; padding: 0 0 0 56px; max-height: 0; overflow: hidden; transition: max-height 0.28s ease; } .mobile-nav__item--accordion.is-open .mobile-nav__sublist { max-height: 22rem; } .mobile-nav__subitem { border-bottom: 1px solid rgba(0, 27, 102, 0.08); } .mobile-nav__subitem:last-child { border-bottom: 0; } .mobile-nav__sublink { display: block; position: relative; padding: 11px 16px 11px 14px; font-family: var(--font-body); font-size: 0.95rem; font-weight: 550; line-height: 1.3; color: var(--color-navy); } .mobile-nav__sublink::before { content: ''; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--color-blue-accent); transform: translateY(-50%); } .mobile-nav__subitem.is-active .mobile-nav__sublink, .mobile-nav__sublink.is-active { color: var(--color-pink); font-weight: 650; } .mobile-nav__actions { display: flex; flex-direction: column; gap: 10px; padding: 18px 16px 8px; flex-shrink: 0; } .mobile-nav__cta { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; min-height: 50px; padding: 0.75rem 1.25rem; border-radius: 999px; font-family: var(--font-body); font-size: 1rem; font-weight: 650; line-height: 1.2; } .mobile-nav__cta--donate { background: #fff; color: var(--color-pink); border: 2px solid var(--color-pink); } .mobile-nav__cta--apply { background: var(--color-pink); color: #fff; border: 2px solid var(--color-pink); } .mobile-nav__cta-icon { flex-shrink: 0; } .mobile-nav__follow { margin-top: auto; padding: 22px 16px calc(28px + env(safe-area-inset-bottom, 0px)); background: #f8eef4; text-align: center; } .mobile-nav__follow-title { margin: 0 0 12px; font-family: var(--font-body); font-size: 1.05rem; font-weight: 700; color: var(--color-navy); } .mobile-nav__social { display: flex; align-items: center; justify-content: center; gap: 12px; } .mobile-nav__social-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: var(--color-pink); color: #fff; } .mobile-nav__social-link svg { width: 16px; height: 16px; } .mobile-nav__social-link:hover { background: var(--color-navy); } } @media (max-width: 1200px) and (prefers-reduced-motion: reduce) { .mobile-menu, .mobile-nav__chevron, .mobile-nav__sublist { transition: none; } } @media (min-width: 1201px) { .mobile-menu { display: none !important; visibility: hidden !important; pointer-events: none !important; } } /* ??? Page hero (shared home + about banners) ??? */ .page-hero { position: relative; z-index: 0; padding-top: var(--hero-pad-y); padding-bottom: 1.75rem; min-height: clamp(480px, calc(100vh - 130px), 700px); overflow: hidden; } .page-hero__banner { position: absolute; top: 50%; right: max( calc((100vw - var(--container-max-width)) / 2), var(--container-padding) ); z-index: 0; height: 94%; width: auto; max-width: none; min-height: 400px; transform: translateY(-50%); object-fit: contain; object-position: right center; pointer-events: none; user-select: none; } .page-hero__inner { position: relative; z-index: 1; display: flex; align-items: center; min-height: inherit; } .page-hero__content { position: relative; z-index: 2; width: min(100%, 50%); max-width: 580px; padding-top: 0.35rem; padding-bottom: 0.75rem; animation: rise-in 0.65s ease both; } .page-hero__text { font-family: var(--font-body); font-size: clamp(1rem, 1.1vw, 1.125rem); font-weight: 400; line-height: 1.55; color: var(--color-navy); max-width: 34rem; margin: 0 0 1.35rem; } .page-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 0.75rem 0.85rem; } .page-hero:not(.home-hero) .hero-label { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 0 0.85rem; font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-pink); } .page-hero:not(.home-hero) .hero-headline { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.65rem, 2.75vw, 2.75rem); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 1.1rem; color: var(--color-navy); } .page-hero:not(.home-hero) .hero-headline [class*='__title-line'] { display: block; } .page-hero:not(.home-hero) .hero-copy { font-family: var(--font-body); font-size: clamp(1rem, 1.1vw, 1.125rem); font-weight: 400; line-height: 1.55; color: var(--color-navy); max-width: 34rem; margin: 0 0 1.35rem; } .vision-hero-checklist { padding: 0 0 1.25rem; } .vision-hero-checklist .vision-hero__list { margin: 0; } /* Home hero — reference lockup: stacked wordmark + colored tagline + path banner */ .home-hero { background-color: #fff; min-height: 0; overflow: visible; } .home-hero__brand { margin: 0 0 clamp(0.55rem, 1.1vw, 0.85rem); background-color: #fff; } .home-hero__logo-heading { margin: 0; font-size: inherit; font-weight: inherit; line-height: 0; background-color: #fff; } .home-hero__logo { display: block; width: min(100%, var(--home-hero-logo-width, 460px)); height: auto; object-fit: contain; object-position: left center; filter: none; background-color: #fff; } .home-hero .hero-label { display: inline-flex; align-items: center; margin: 0 0 0.7rem; font-family: var(--font-body); font-size: clamp(0.78rem, 0.95vw, 0.92rem); font-weight: 700; letter-spacing: 0.16em; line-height: 1.3; text-transform: uppercase; color: var(--color-pink); } .home-hero .hero-headline, .home-hero__title { display: flex; flex-direction: column; align-items: flex-start; font-family: var(--font-body); font-weight: 800; font-size: var(--home-hero-title-size); line-height: 0.9; letter-spacing: -0.035em; margin: 0 0 0.7rem; } .home-hero__title-line { display: inline-flex; align-items: flex-start; gap: 0.28em; } .home-hero__title-bright { color: var(--color-navy); } .home-hero__title-dreamers { color: var(--color-pink); } .home-hero__mobile-logo { display: none; width: min(100%, 320px); height: auto; } .home-hero__title-star { display: none; width: 0.42em; height: 0.42em; margin-top: 0.12em; color: #f5b400; flex-shrink: 0; } .home-hero__tagline { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.22rem 0.38rem; font-family: var(--font-body); font-weight: 600; font-size: clamp(1.12rem, 1.45vw, 1.38rem); line-height: 1.25; color: var(--color-navy); margin: 0 0 0.85rem; } .home-hero__tagline-word { color: var(--color-navy); } .home-hero__tagline-word--dream { color: #2f80ed; } .home-hero__tagline-word--create { color: var(--color-green); } .home-hero__tagline-word--grow { color: var(--color-orange); } .home-hero__tagline-word--give { color: var(--color-plane); } .home-hero__tagline-dot { font-size: 1.15em; line-height: 1; transform: translateY(-0.04em); } .home-hero__tagline-dot--pink { color: var(--color-pink); } .home-hero__tagline-dot--orange { color: var(--color-orange); } .home-hero__tagline-dot--green { color: var(--color-green); } .home-hero__tagline-dot--purple { color: var(--color-plane); } .home-hero .page-hero__text, .home-hero .hero-copy { font-family: var(--font-body); font-size: clamp(0.98rem, 1.05vw, 1.08rem); font-weight: 400; line-height: 1.6; color: var(--color-navy); max-width: 42rem; margin: 0 0 1.25rem; } @media (max-width: 767px) { .home-hero__copy-break { display: none; } } .home-page .page-hero.home-hero .page-hero__content, .home-page .page-hero.home-welcome-hero .page-hero__content { align-items: flex-start; text-align: left; } .home-page .page-hero.home-hero .home-hero__brand, .home-page .page-hero.home-welcome-hero .home-hero__brand { align-self: flex-start; width: 100%; } .home-page .page-hero.home-hero .hero-copy, .home-page .page-hero.home-welcome-hero .hero-copy { text-align: left; margin-inline: 0; } .home-hero__cta-icon { width: 1.25rem; height: 1.25rem; } /* Home welcome hero — force CTAs side-by-side (grid beats legacy column overrides) */ .home-hero__actions--inline { display: grid !important; grid-template-columns: auto auto; align-items: center; justify-content: start; gap: 0.65rem; width: auto; max-width: 100%; } .home-hero__actions--inline .btn { width: auto !important; max-width: none !important; min-width: 0; justify-self: start; } @media (max-width: 768px) { .home-hero__actions--inline { grid-template-columns: 1fr; width: 100%; } .home-hero__actions--inline .btn { width: 100% !important; justify-self: stretch; } } /* Desktop side-by-side (≥1201px): shared hero container + tighter columns. Header and hero both use .site-container (same max-width + --container-padding). Text starts on the logo edge; banner stays on the Apply-to-Join edge. */ @media (min-width: 1201px) { .page-hero.home-hero .page-hero__inner, .page-hero.about-hero .page-hero__inner, .page-hero.explore-hero .page-hero__inner, .page-hero.for-parents-hero .page-hero__inner, .page-hero.vision-hero .page-hero__inner, .page-hero.get-involved-hero .page-hero__inner, .page-hero.partners-hero .page-hero__inner, .page-hero.contact-hero .page-hero__inner, .page-hero.creative-makers-hero .page-hero__inner, .page-hero.young-ideas-lab-hero .page-hero__inner, .page-hero.create-for-cause-hero .page-hero__inner, .page-hero.community-adventures-hero .page-hero__inner, .page-hero.apply-hero .page-hero__inner, .page-hero.faq-hero .page-hero__inner, .creative-makers-page .page-hero.creative-makers-hero .page-hero__inner, .young-ideas-lab-page .page-hero.young-ideas-lab-hero .page-hero__inner, .create-for-cause-page .page-hero.create-for-cause-hero .page-hero__inner, .community-adventures-page .page-hero.community-adventures-hero .page-hero__inner { display: grid; grid-template-columns: minmax(0, max-content) minmax(280px, 1fr); align-items: center; justify-content: start; gap: 0; column-gap: 0; max-width: var(--container-max-width); padding-left: var(--container-padding); padding-right: var(--container-padding); } .page-hero.home-hero .page-hero__content, .page-hero.about-hero .page-hero__content, .page-hero.explore-hero .page-hero__content, .page-hero.for-parents-hero .page-hero__content, .page-hero.vision-hero .page-hero__content, .page-hero.get-involved-hero .page-hero__content, .page-hero.partners-hero .page-hero__content, .page-hero.contact-hero .page-hero__content, .page-hero.creative-makers-hero .page-hero__content, .page-hero.young-ideas-lab-hero .page-hero__content, .page-hero.create-for-cause-hero .page-hero__content, .page-hero.community-adventures-hero .page-hero__content, .page-hero.apply-hero .page-hero__content, .page-hero.faq-hero .page-hero__content, .creative-makers-page .page-hero.creative-makers-hero .page-hero__content, .young-ideas-lab-page .page-hero.young-ideas-lab-hero .page-hero__content, .create-for-cause-page .page-hero.create-for-cause-hero .page-hero__content, .community-adventures-page .page-hero.community-adventures-hero .page-hero__content { grid-column: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; align-self: center; flex: none; width: 100%; max-width: var(--page-hero-content-max-width, 520px); justify-self: start; margin-inline: 0; padding-top: 0; padding-bottom: 0; padding-right: 0; text-align: left; } .page-hero.home-hero .about-hero__media, .page-hero.home-hero .hero-image-wrap, .page-hero.about-hero .about-hero__media, .page-hero.about-hero .hero-image-wrap, .page-hero.explore-hero .explore-hero__media, .page-hero.for-parents-hero .about-hero__media, .page-hero.for-parents-hero .hero-image-wrap, .page-hero.vision-hero .about-hero__media, .page-hero.vision-hero .hero-image-wrap, .page-hero.get-involved-hero .about-hero__media, .page-hero.get-involved-hero .hero-image-wrap, .page-hero.partners-hero .about-hero__media, .page-hero.partners-hero .hero-image-wrap, .page-hero.contact-hero .about-hero__media, .page-hero.contact-hero .hero-image-wrap, .page-hero.creative-makers-hero .creative-makers-hero__media, .page-hero.creative-makers-hero .hero-image-wrap, .page-hero.young-ideas-lab-hero .creative-makers-hero__media, .page-hero.create-for-cause-hero .creative-makers-hero__media, .page-hero.community-adventures-hero .creative-makers-hero__media, .page-hero.apply-hero .about-hero__media, .page-hero.apply-hero .hero-image-wrap, .page-hero.faq-hero .faq-hero__media, .page-hero.faq-hero .hero-image-wrap, .creative-makers-page .page-hero.creative-makers-hero .creative-makers-hero__media, .young-ideas-lab-page .page-hero.young-ideas-lab-hero .creative-makers-hero__media, .create-for-cause-page .page-hero.create-for-cause-hero .creative-makers-hero__media, .community-adventures-page .page-hero.community-adventures-hero .creative-makers-hero__media { grid-column: 2; display: flex; align-items: center; align-self: center; width: 100%; justify-content: flex-start; } .page-hero.explore-hero .hero-copy, .page-hero.for-parents-hero .hero-copy, .page-hero.vision-hero .hero-copy, .page-hero.get-involved-hero .hero-copy, .page-hero.partners-hero .hero-copy, .page-hero.contact-hero .hero-copy { max-width: none; } .page-hero.home-hero .about-hero__banner, .page-hero.about-hero .about-hero__banner, .page-hero.explore-hero .explore-hero__banner, .page-hero.for-parents-hero .about-hero__banner, .page-hero.vision-hero .about-hero__banner, .page-hero.get-involved-hero .about-hero__banner, .page-hero.partners-hero .about-hero__banner, .page-hero.contact-hero .about-hero__banner, .page-hero.creative-makers-hero .creative-makers-hero__banner, .page-hero.apply-hero .about-hero__banner { width: 100%; max-width: 100%; height: auto; object-fit: contain; object-position: left center; } .home-hero__deco { display: none; } .about-hero__deco { display: none; } /* Compact desktop header (laptop widths): keep full nav, shrink to fit */ @media (min-width: 1201px) and (max-width: 1439px) { :root { --nav-gap: 0.45rem; --header-logo-box-width: clamp(168px, 13vw, 210px); } .nav-link { font-size: 0.82rem; padding-bottom: 0.5rem; white-space: nowrap; } .site-nav__list { flex-wrap: nowrap; gap: var(--nav-gap); } .site-header__actions { gap: 0.4rem; } .site-header__actions .btn { font-size: 0.8rem; padding: 0.55rem 0.85rem; } } /* Hero banners never overflow their column (all desktop widths) */ @media (min-width: 768px) { .page-hero { overflow-x: clip; } .page-hero .page-hero__inner { min-width: 0; max-width: 100%; box-sizing: border-box; } .page-hero .home-hero__media, .page-hero .about-hero__media, .page-hero .explore-hero__media, .page-hero .creative-makers-hero__media, .page-hero .hero-image-wrap, .page-hero .faq-hero__media, .page-hero [class*='__media'] { min-width: 0; max-width: 100%; } .page-hero .home-hero__banner, .page-hero .about-hero__banner, .page-hero .explore-hero__banner, .page-hero .creative-makers-hero__banner, .page-hero .apply-hero__banner, .page-hero .faq-hero__banner, .page-hero [class*='__banner'] { display: block; width: 100%; max-width: 100%; height: auto; } } /* ??? Lazy blur-up content images ??? */ .lazy-img-wrap { display: block; overflow: hidden; width: 100%; } .lazy-img-wrap--cover { aspect-ratio: 4 / 3; border-radius: var(--experience-photo-radius); } .lazy-img-wrap--fill { width: 100%; height: 100%; } img.lazy-img { display: block; width: 100%; max-width: 100%; filter: blur(var(--lazy-img-blur)); transform: scale(var(--lazy-img-scale)); transition: var(--lazy-img-transition); } img.lazy-img.loaded { filter: blur(0); transform: scale(1); } .lazy-img-wrap--cover img.lazy-img { width: 100%; height: 100%; object-fit: cover; } @media (prefers-reduced-motion: reduce) { img.lazy-img { filter: blur(0); transform: none; transition: none; } } .hero-image-wrap picture, .about-hero__media picture, .explore-hero__media picture { display: block; width: 100%; } /* About hero ? no box/background behind transparent banner PNG */ .page-hero.about-hero .hero-image-wrap, .page-hero.about-hero .about-hero__media, .page-hero.about-hero .lazy-img-wrap, .page-hero.about-hero picture { background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; } .page-hero.about-hero .lazy-img-wrap { overflow: visible; } .page-hero.about-hero .about-hero__banner { background: transparent !important; background-color: transparent !important; } /* ??? Home pillars (3 cards below hero) ??? */ .home-pillars { background-color: #fff; } .home-pillars__row { display: flex; align-items: stretch; gap: clamp(0.65rem, 1.2vw, 1rem); } .home-pillar { flex: 1 1 0; min-width: 0; border-radius: var(--home-pillar-radius); padding: var(--home-pillar-pad); } .home-pillar--idea { background-color: var(--home-pillar-idea-bg); } .home-pillar--mission { background-color: var(--home-pillar-mission-bg); } .home-pillar--inspire { background-color: var(--home-pillar-inspire-bg); } .home-pillar__inner { display: flex; align-items: center; gap: clamp(0.45rem, 0.9vw, 0.75rem); height: 100%; } .home-pillar__figure { flex: 0 0 clamp(88px, 26%, 132px); min-width: 0; display: flex; align-items: center; justify-content: center; border-radius: 10px; overflow: hidden; } .home-pillar--idea .home-pillar__figure { background-color: var(--home-pillar-idea-bg); } .home-pillar--idea .home-pillar__img { mix-blend-mode: normal; filter: none; } .home-pillar--inspire .home-pillar__inner--inspire { display: flex; align-items: center; justify-content: center; gap: 0; padding: clamp(0.65rem, 1.2vw, 1rem); } .home-pillar--inspire .home-pillar__img--inspire { width: 100%; max-width: 100%; height: auto; object-fit: contain; filter: none; mix-blend-mode: normal; } .home-pillar__img { width: 100%; height: auto; object-fit: contain; filter: var(--home-pillar-img-filter); mix-blend-mode: darken; } .home-pillar__img--jar { max-width: clamp(92px, 100%, 128px); } .home-pillar__content { flex: 1 1 auto; min-width: 0; } .home-pillar__content--full { display: flex; flex-direction: column; height: 100%; } .home-pillar__title { display: flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1rem, 1.15vw, 1.2rem); line-height: 1.25; color: var(--color-navy); margin: 0 0 0.55rem; } .home-pillar__title-icon { flex-shrink: 0; } .home-pillar__title-icon--star { color: var(--color-yellow); } .home-pillar__title-icon--heart { color: var(--color-pink); } .home-pillar__quote { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.05rem, 1.2vw, 1.25rem); line-height: 1.25; color: var(--color-pink); margin: 0 0 0.55rem; } .home-pillar__text { font-family: var(--font-body); font-size: clamp(0.78rem, 0.88vw, 0.88rem); line-height: 1.5; color: var(--color-navy); margin: 0 0 0.55rem; } .home-pillar__list { list-style: none; margin: 0 0 0.55rem; padding: 0; display: flex; flex-direction: column; gap: 0.35rem; } .home-pillar__list li { display: flex; align-items: center; gap: 0.45rem; font-family: var(--font-body); font-size: clamp(0.78rem, 0.88vw, 0.88rem); line-height: 1.4; color: var(--color-navy); } .home-pillar__check { display: inline-flex; align-items: center; justify-content: center; width: clamp(20px, 1.8vw, 24px); height: clamp(20px, 1.8vw, 24px); border-radius: 50%; flex-shrink: 0; color: var(--color-navy); } .home-pillar__check--pink { background-color: var(--color-pink); color: #fff; } .home-pillar__check--orange { background-color: var(--color-orange); color: #fff; } .home-pillar__check--green { background-color: var(--color-green); color: #fff; } .home-pillar__check--purple { background-color: var(--color-plane); color: #fff; } .home-pillar__link { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: auto; padding-top: 0.15rem; font-family: var(--font-body); font-weight: 600; font-size: clamp(0.82rem, 0.92vw, 0.92rem); color: var(--color-pink); transition: opacity var(--ease-soft); } .home-pillar__link:hover { opacity: 0.85; } .home-pillar__inspire-text { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.2rem, 1.45vw, 1.6rem); line-height: 1.32; color: var(--color-navy); margin: 0; } .home-pillar__accent--pink { color: var(--color-pink); } .home-pillar__accent--green { color: var(--color-green); } .home-pillar--inspire .heading-underline--inspire { display: inline-block; white-space: nowrap; } .home-pillar--inspire .heading-underline--inspire .heading-underline__img { left: 0; width: 100%; max-height: 10px; min-height: 7px; bottom: -0.08em; } /* ??? Home different (6 pillars) ??? */ .home-different { background-color: #fff; } .home-different__title { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.45rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.35rem, 2.8vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--color-navy); text-align: center; margin: 0 0 clamp(0.85rem, 1.6vw, 1.25rem); } .home-different__title-icon { flex-shrink: 0; color: var(--color-pink); } .home-different__grid { display: flex; align-items: stretch; } .home-different__item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(0.45rem, 0.9vw, 0.65rem); padding: 0 clamp(0.35rem, 0.7vw, 0.55rem); } .home-different__item:not(:first-child) { border-left: 1px solid var(--home-different-divider); } .home-different__icon-wrap { display: flex; align-items: center; justify-content: center; background-color: #fff; line-height: 0; } .home-different__icon { display: block; width: clamp(52px, 5vw, 64px); height: clamp(52px, 5vw, 64px); object-fit: contain; filter: none; mix-blend-mode: normal; } .home-different__text { font-family: var(--font-body); font-size: clamp(0.84rem, 0.95vw, 0.95rem); line-height: 1.45; color: var(--color-navy); margin: 0; } .home-different__name { display: block; font-family: var(--font-heading); font-weight: 700; font-size: clamp(0.95rem, 1.05vw, 1.08rem); line-height: 1.25; color: var(--color-navy); margin-bottom: 0.2rem; } /* ??? Home reality (how ideas flow) ??? */ .home-reality { background-color: #fff; } .home-reality__box { position: relative; background-color: var(--home-reality-bg); border-radius: var(--home-reality-box-radius); padding: clamp(1.25rem, 2.2vw, 2rem) clamp(1rem, 1.8vw, 1.45rem); overflow: hidden; } .home-reality__deco-wrap { position: absolute; top: 0; bottom: 0; width: var(--home-reality-deco-wrap-width); display: flex; align-items: center; justify-content: center; pointer-events: none; user-select: none; z-index: 0; } .home-reality__deco-wrap--left { left: var(--home-reality-deco-inset-x); } .home-reality__deco-wrap--right { right: var(--home-reality-deco-inset-x); } .home-reality__deco { display: block; width: var(--home-reality-deco-size); max-width: 100%; height: auto; object-fit: contain; opacity: 1; } .home-reality__inner { position: relative; z-index: 1; padding-inline: var(--home-reality-inner-pad-x); } .home-reality__title { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.45rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.35rem, 2.8vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--color-navy); text-align: center; margin: 0 0 clamp(0.85rem, 1.6vw, 1.25rem); } .home-reality__title-icon { flex-shrink: 0; color: var(--color-yellow); } .home-reality__steps { display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(0.15rem, 0.45vw, 0.35rem); } .home-reality-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.45rem; } .home-reality-step__icon-wrap { display: flex; align-items: center; justify-content: center; width: var(--home-reality-icon-size); height: var(--home-reality-icon-size); line-height: 0; border-radius: 50%; overflow: visible; isolation: isolate; } .home-reality-step__icon-wrap--dream, .home-reality-step__icon-wrap--imagine, .home-reality-step__icon-wrap--create, .home-reality-step__icon-wrap--share, .home-reality-step__icon-wrap--help, .home-reality-step__icon-wrap--celebrate { background: none; } .home-reality-step__icon { display: block; width: var(--home-reality-icon-inner); height: var(--home-reality-icon-inner); object-fit: contain; filter: none; mix-blend-mode: normal; } .home-reality-step__title { font-family: var(--font-body); font-size: clamp(0.88rem, 0.98vw, 1rem); font-weight: 700; line-height: 1.2; margin: 0; } .home-reality-step__title--dream { color: var(--color-pink); } .home-reality-step__title--imagine { color: var(--color-plane); } .home-reality-step__title--create { color: var(--color-orange); } .home-reality-step__title--share { color: var(--color-cyan); } .home-reality-step__title--help { color: var(--color-green); } .home-reality-step__title--celebrate { color: var(--color-pink); } .home-reality-step__text { font-family: var(--font-body); font-size: clamp(0.78rem, 0.88vw, 0.88rem); font-weight: 400; line-height: 1.45; color: var(--color-navy); margin: 0; max-width: 11rem; } .home-reality-step__arrow { flex: 0 0 auto; align-self: flex-start; width: var(--approach-arrow-width); height: auto; object-fit: contain; margin-top: calc(var(--home-reality-icon-size) * 0.34); opacity: 0.85; } /* ??? Home explore (4 experience cards) ??? */ .home-explore { background-color: #fff; } .home-explore__title { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.45rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.35rem, 2.8vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--color-navy); text-align: center; margin: 0 0 clamp(0.85rem, 1.6vw, 1.25rem); } .home-explore__title-icon { flex-shrink: 0; color: var(--color-pink); } .home-explore__grid { display: flex; align-items: stretch; gap: clamp(0.65rem, 1.2vw, 1rem); } .experience-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; background-color: #fff; border-radius: var(--experience-card-radius); padding: clamp(0.75rem, 1.1vw, 0.95rem); box-shadow: var(--card-shadow); } .experience-card__media { position: relative; margin-bottom: clamp(0.95rem, 1.3vw, 1.15rem); } .experience-card__photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--experience-photo-radius); } .lazy-img-wrap--cover .experience-card__photo { aspect-ratio: auto; border-radius: 0; } .experience-card__icon-wrap { position: absolute; left: clamp(0.55rem, 0.9vw, 0.75rem); bottom: calc(var(--experience-icon-size) * -0.42); display: flex; align-items: center; justify-content: center; background-color: #fff; border-radius: 50%; line-height: 0; } .experience-card__icon { display: block; width: var(--experience-icon-size); height: var(--experience-icon-size); object-fit: contain; pointer-events: none; filter: var(--home-section-icon-filter); mix-blend-mode: multiply; } .experience-card__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(0.92rem, 1vw, 1.05rem); line-height: 1.25; color: var(--color-navy); margin: 0 0 0.4rem; } .experience-card__text { flex: 1 1 auto; font-family: var(--font-body); font-size: clamp(0.76rem, 0.84vw, 0.86rem); line-height: 1.45; color: var(--color-navy); margin: 0 0 0.65rem; } .experience-card__link { display: inline-flex; align-items: center; gap: 0.35rem; margin-top: auto; font-family: var(--font-body); font-weight: 600; font-size: clamp(0.78rem, 0.86vw, 0.88rem); color: var(--color-pink); transition: opacity var(--ease-soft); } .experience-card__link:hover { opacity: 0.85; } /* ??? Home spotlight (ideas + council panels) ??? */ .home-spotlight { background-color: #fff; min-width: 0; max-width: 100%; } .home-spotlight__grid { display: flex; align-items: stretch; gap: clamp(0.85rem, 1.4vw, 1.15rem); min-width: 0; max-width: 100%; } .spotlight-card { flex: 1 1 calc(50% - 0.5rem); min-width: 0; display: flex; align-items: stretch; border-radius: var(--spotlight-card-radius); overflow: hidden; min-height: clamp(260px, 24vw, 320px); } .spotlight-card--ideas { background-color: var(--panel-cream); } .spotlight-card--council { background-color: var(--panel-lavender); } .spotlight-card__content { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; padding: clamp(1.25rem, 2.2vw, 1.85rem) clamp(1.1rem, 1.9vw, 1.55rem); } .spotlight-card--ideas .spotlight-card__content { flex: 1 1 52%; padding-bottom: 0; } .spotlight-card__title { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.15rem, 1.9vw, 1.55rem); line-height: 1.2; letter-spacing: -0.015em; color: var(--color-navy); margin: 0 0 0.85rem; } .spotlight-card__title-icon { flex-shrink: 0; } .spotlight-card__title-icon--star { color: var(--color-yellow); } .spotlight-card__title-icon--crown { color: var(--color-orange); } .spotlight-card__copy { display: flex; flex-direction: column; gap: 0.65rem; } .spotlight-card__copy p { font-family: var(--font-body); font-size: clamp(0.88rem, 0.98vw, 1rem); line-height: 1.55; margin: 0; } .spotlight-card__copy p.spotlight-card__lead { font-weight: 700; color: var(--color-navy); } .spotlight-card__copy p.spotlight-card__body { font-weight: 400; color: rgba(0, 27, 102, 0.82); } .spotlight-card__copy p.spotlight-card__highlight { font-weight: 700; color: var(--color-pink); line-height: 1.05; margin-bottom: 0; padding-bottom: 0; } .spotlight-card__copy p.spotlight-card__highlight br { display: block; margin: 0; line-height: 0; height: 0; font-size: 0; } .spotlight-card__note { font-family: var(--font-body); font-size: clamp(0.88rem, 0.98vw, 1rem); font-weight: 400; line-height: 1.55; color: var(--color-navy); margin: 0; } .spotlight-card__list { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; } .spotlight-card__list li { display: flex; align-items: flex-start; gap: 0.55rem; font-family: var(--font-body); font-size: clamp(0.84rem, 0.95vw, 0.95rem); line-height: 1.45; color: var(--color-navy); } .spotlight-card__list li::before { content: ''; flex-shrink: 0; width: 1.05rem; height: 1.05rem; margin-top: 0.1em; border-radius: 50%; background-color: var(--color-plane); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.2l2.8 2.8 6.2-6.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 0.65rem; } .spotlight-card__note { margin-bottom: 0.85rem; } .spotlight-card__btn { align-self: flex-start; margin-top: auto; font-size: clamp(0.84rem, 0.92vw, 0.95rem); padding: 0.65rem 1.25rem; } .spotlight-card__figure { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; align-self: stretch; min-width: 0; } .spotlight-card--ideas .spotlight-card__figure { flex: 0 0 48%; background-color: var(--panel-cream); padding: clamp(0.5rem, 1vw, 0.85rem); padding-left: 0; } .spotlight-card--council .spotlight-card__figure { background-color: var(--panel-lavender); padding: clamp(0.65rem, 1.2vw, 1rem); padding-left: 0; } .spotlight-card--ideas .spotlight-card__figure-wrap { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; background-color: var(--panel-cream); line-height: 0; isolation: isolate; } .spotlight-card--ideas .spotlight-card__figure .lazy-img-wrap { background-color: var(--panel-cream); } .spotlight-card--ideas .spotlight-card__figure-img { display: block; width: clamp(180px, 22vw, 280px); height: auto; max-width: 100%; object-fit: contain; object-position: center; background-color: var(--panel-cream); } .spotlight-card--council .spotlight-card__figure-wrap { display: flex; align-items: center; justify-content: center; background-color: var(--panel-lavender); line-height: 0; } .spotlight-card--council .spotlight-card__figure .lazy-img-wrap { background-color: var(--panel-lavender); } .spotlight-card--council .spotlight-card__figure-img { display: block; width: clamp(160px, 18vw, 220px); height: auto; object-fit: contain; filter: none; mix-blend-mode: normal; background-color: var(--panel-lavender); } .home-hero__title { display: flex; flex-direction: column; font-family: var(--font-body); font-weight: 800; font-size: var(--home-hero-title-size); line-height: 0.9; letter-spacing: -0.035em; margin: 0 0 0.7rem; } /* ??? About + Contact + Explore hero layout ??? */ .home-hero, .about-hero, .vision-hero, .contact-hero, .for-parents-hero, .get-involved-hero, .explore-hero, .creative-makers-hero, .young-ideas-lab-hero, .create-for-cause-hero, .community-adventures-hero, .partners-hero, .apply-hero, .faq-hero { background-color: #fff; min-height: 0; } .explore-hero { overflow: visible; } .explore-hero--full-banner { padding-left: 0; padding-right: 0; padding-bottom: 0; overflow: hidden; } .explore-hero--full-banner .explore-hero__banner-wrap, .explore-hero--full-banner picture { display: block; width: 100%; max-width: none; margin: 0; padding: 0; line-height: 0; } .explore-hero--full-banner .explore-hero__banner { display: block; width: 100%; max-width: none; height: auto; max-height: none; margin: 0; object-fit: cover; object-position: center center; } .contact-hero { padding-top: var(--contact-hero-pad-top); display: block; overflow: visible; } .about-hero .page-hero__inner, .home-hero .page-hero__inner, .vision-hero .page-hero__inner, .for-parents-hero .page-hero__inner { display: grid; grid-template-columns: minmax(0, max-content) minmax(280px, 1fr); align-items: center; justify-content: start; gap: 0; column-gap: 0; min-height: inherit; } .contact-hero .page-hero__inner { display: grid; grid-template-columns: minmax(0, var(--contact-hero-content-col)) minmax(0, var(--contact-hero-media-col)); align-items: center; justify-content: space-between; gap: clamp(0.35rem, 0.75vw, 0.85rem); min-height: inherit; } .get-involved-hero .page-hero__inner { display: grid; grid-template-columns: minmax(0, var(--get-involved-hero-content-col)) minmax(0, var(--get-involved-hero-media-col)); align-items: center; justify-content: space-between; gap: clamp(0.35rem, 0.75vw, 0.85rem); min-height: inherit; } .vision-hero .page-hero__inner { grid-template-columns: minmax(0, var(--vision-hero-content-col)) minmax(0, var(--vision-hero-media-col)); gap: clamp(0.35rem, 0.75vw, 0.85rem); } .explore-hero .page-hero__inner { display: grid; grid-template-columns: minmax(0, var(--explore-hero-content-col)) minmax(0, var(--explore-hero-media-col)); align-items: center; justify-content: space-between; gap: var(--explore-hero-inner-gap); min-height: inherit; } .about-hero .page-hero__content, .home-hero .page-hero__content, .vision-hero .page-hero__content, .contact-hero .page-hero__content, .for-parents-hero .page-hero__content, .get-involved-hero .page-hero__content, .creative-makers-hero .page-hero__content, .young-ideas-lab-hero .page-hero__content, .create-for-cause-hero .page-hero__content, .community-adventures-hero .page-hero__content { width: 100%; max-width: none; padding-top: 0; padding-right: 0.5rem; grid-column: 1; grid-row: 1; } .about-hero__media, .home-hero .about-hero__media, .contact-hero .about-hero__media, .for-parents-hero .about-hero__media, .get-involved-hero .about-hero__media, .vision-hero .about-hero__media { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; position: relative; min-width: 0; } .about-hero__banner, .contact-hero .about-hero__banner, .for-parents-hero .about-hero__banner, .get-involved-hero .about-hero__banner, .vision-hero .about-hero__banner { width: 100%; max-width: 100%; height: auto; max-height: min(430px, 60vh); min-height: 0; object-fit: contain; object-position: center; filter: brightness(1.1); background-color: transparent; } .vision-hero .about-hero__banner { transform: scale(var(--vision-hero-banner-scale)); transform-origin: center right; filter: none; } .our-vision-page .vision-hero .about-hero__banner { transform: none; } .explore-hero .page-hero__content { width: 100%; max-width: var(--explore-hero-content-max); padding-right: 0.5rem; grid-column: 1; grid-row: 1; position: relative; overflow: visible; align-self: center; } .explore-hero__media { grid-column: 2; grid-row: 1; display: flex; align-items: center; justify-content: flex-end; position: relative; min-width: 0; overflow: visible; padding-right: 0; align-self: center; } .explore-hero__banner { width: 100%; max-width: 100%; height: auto; max-height: min(520px, 68vh); min-height: 0; object-fit: contain; object-position: center center; filter: none; background-color: transparent; } .about-hero__eyebrow { font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-pink); margin: 0 0 0.85rem; } .about-hero__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.65rem, 2.75vw, 2.75rem); line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 1.1rem; } .about-hero__title-line { display: block; white-space: nowrap; } .about-hero__title-line--navy { color: var(--color-navy); margin-bottom: 0.15rem; } .about-hero__title-line--pink { color: var(--color-pink); } .about-hero .page-hero__text { font-size: clamp(0.98rem, 1.05vw, 1.08rem); line-height: 1.6; max-width: 30rem; margin-bottom: 1.35rem; white-space: normal; } /* ??? Our Vision hero content ??? */ .vision-hero__content { min-width: 0; } .vision-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-pink); margin: 0 0 0.85rem; } .vision-hero__eyebrow-heart { flex-shrink: 0; color: var(--color-pink); } .vision-hero__title-wrap { margin: 0 0 clamp(0.85rem, 1.2vw, 1rem); max-width: 100%; } .vision-hero__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.65rem, 2.75vw, 2.75rem); line-height: 1.15; letter-spacing: -0.02em; margin: 0; } .vision-hero__title-line { display: block; } .vision-hero__title-line--navy { color: var(--color-navy); } .vision-hero__title-line--pink { color: var(--color-pink); } .vision-hero__lead { font-family: var(--font-body); font-size: clamp(0.92rem, 1vw, 1.02rem); font-weight: 400; line-height: 1.55; color: var(--color-navy); margin: 0 0 clamp(0.65rem, 1vw, 0.85rem); max-width: 31rem; } .vision-hero__text { font-family: var(--font-body); font-size: clamp(0.92rem, 1vw, 1.02rem); font-weight: 400; line-height: 1.62; color: var(--color-navy); margin: 0 0 clamp(0.75rem, 1.1vw, 0.95rem); max-width: 31rem; } .vision-hero__accent { font-weight: 700; } .vision-hero__accent--pink { color: var(--color-pink); } .vision-hero__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(0.35rem, 0.55vw, 0.45rem); max-width: 31rem; } .vision-hero__list li { display: flex; align-items: flex-start; gap: 0.42rem; font-family: var(--font-body); font-size: clamp(0.82rem, 0.9vw, 0.94rem); line-height: 1.45; color: var(--color-navy); } .vision-hero__check { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: clamp(18px, 1.65vw, 22px); height: clamp(18px, 1.65vw, 22px); margin-top: 0.08rem; border-radius: 50%; background-color: var(--color-pink); color: #fff; } .page-hero__extra { width: 100%; max-width: 100%; } .vision-hero__title-heart { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; color: var(--color-pink); vertical-align: middle; } .vision-hero__title-heart svg { display: block; } /* ??? Our Vision pillars ??? */ .vision-pillars { background-color: #fff; } .vision-pillars__title { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.45rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.5rem, 3.2vw, 2rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--color-navy); margin: 0 0 clamp(1.1rem, 2.2vw, 1.65rem); text-align: center; } .vision-pillars__title-icon { flex-shrink: 0; color: var(--color-pink); width: clamp(1rem, 1.8vw, 1.25rem); height: clamp(1rem, 1.8vw, 1.25rem); } .vision-pillars__grid { display: flex; align-items: stretch; gap: clamp(0.55rem, 1vw, 0.85rem); } .vision-pillar-card { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; border-radius: var(--home-pillar-radius); padding: clamp(1rem, 1.55vw, 1.35rem) clamp(0.65rem, 1vw, 0.85rem) clamp(1.15rem, 1.65vw, 1.45rem); overflow: hidden; } .vision-pillar-card--pink { background-color: var(--believe-card-pink); } .vision-pillar-card--purple { background-color: var(--believe-card-purple); } .vision-pillar-card--green { background-color: var(--believe-card-green); } .vision-pillar-card--orange { background-color: var(--vision-pillar-orange-bg); } .vision-pillar-card__icon { display: block; width: var(--vision-pillar-icon-size); height: var(--vision-pillar-icon-size); object-fit: contain; margin: 0 0 clamp(0.55rem, 0.85vw, 0.7rem); flex-shrink: 0; } .vision-pillar-card__icon--purpose { width: calc(var(--vision-pillar-icon-size) + var(--vision-pillar-purpose-icon-extra)); height: calc(var(--vision-pillar-icon-size) + var(--vision-pillar-purpose-icon-extra)); } .vision-pillar-card__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(0.88rem, 0.98vw, 1.02rem); line-height: 1.28; margin: 0 0 clamp(0.45rem, 0.7vw, 0.6rem); } .vision-pillar-card--pink .vision-pillar-card__title { color: var(--color-pink); } .vision-pillar-card--purple .vision-pillar-card__title { color: var(--color-plane); } .vision-pillar-card--green .vision-pillar-card__title { color: var(--color-green); } .vision-pillar-card--orange .vision-pillar-card__title { color: var(--color-orange); } .vision-pillar-card__text { flex: 1 1 auto; font-family: var(--font-body); font-size: clamp(0.72rem, 0.8vw, 0.82rem); line-height: 1.45; color: var(--color-navy); margin: 0; max-width: 14.5rem; min-height: calc(1.45em * var(--vision-pillar-text-lines)); } .vision-pillar-card__deco { position: absolute; width: var(--vision-pillar-deco-size); height: var(--vision-pillar-deco-size); pointer-events: none; object-fit: contain; } .vision-pillar-card--pink .vision-pillar-card__deco { color: var(--color-pink); } .vision-pillar-card--purple .vision-pillar-card__deco { color: var(--color-plane); } .vision-pillar-card--green .vision-pillar-card__deco { color: var(--color-green); } .vision-pillar-card--orange .vision-pillar-card__deco { color: var(--color-orange); } .vision-pillar-card__deco--heart-bl { left: clamp(0.55rem, 0.9vw, 0.75rem); bottom: clamp(0.55rem, 0.9vw, 0.75rem); } .vision-pillar-card__deco--star-br, .vision-pillar-card__deco--heart-br, .vision-pillar-card__deco--leaf-br { right: clamp(0.55rem, 0.9vw, 0.75rem); bottom: clamp(0.55rem, 0.9vw, 0.75rem); } .vision-pillar-card__deco--star-tr { top: clamp(0.55rem, 0.9vw, 0.75rem); right: clamp(0.55rem, 0.9vw, 0.75rem); } .vision-pillar-card__deco--offset-up { right: clamp(1.35rem, 2vw, 1.75rem); bottom: clamp(1.05rem, 1.45vw, 1.25rem); width: calc(var(--vision-pillar-deco-size) * 0.82); height: calc(var(--vision-pillar-deco-size) * 0.82); opacity: 0.85; } /* ??? Our Vision roadmap (goals + journey) ??? */ .vision-roadmap { background-color: #fff; } .vision-roadmap__inner { display: grid; grid-template-columns: minmax(0, var(--vision-roadmap-goals-col)) minmax( 0, var(--vision-roadmap-journey-col) ); align-items: start; gap: clamp(1.5rem, 3vw, 2.75rem); } .vision-roadmap__journey { border-left: 1px solid rgba(0, 27, 102, 0.1); padding-left: clamp(1.25rem, 2.5vw, 2.5rem); min-width: 0; } .vision-roadmap__goals { min-width: 0; } .vision-roadmap__title { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.5rem, 3.2vw, 2rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--color-navy); margin: 0 0 clamp(0.85rem, 1.5vw, 1.15rem); text-align: left; } .vision-roadmap__title-icon { flex-shrink: 0; color: var(--color-pink); width: clamp(1rem, 1.8vw, 1.25rem); height: clamp(1rem, 1.8vw, 1.25rem); } .vision-roadmap__intro { font-family: var(--font-body); font-size: clamp(0.82rem, 0.9vw, 0.94rem); line-height: 1.45; color: var(--color-navy); margin: 0 0 clamp(0.75rem, 1.2vw, 0.95rem); } .vision-roadmap__list { list-style: none; margin: 0; padding: 0; display: grid; gap: clamp(0.42rem, 0.75vw, 0.58rem); } .vision-roadmap__list li { display: flex; align-items: flex-start; gap: 0.42rem; min-width: 0; font-family: var(--font-body); font-size: clamp(0.82rem, 0.9vw, 0.94rem); line-height: 1.45; color: var(--color-navy); overflow-wrap: anywhere; } .vision-roadmap__check { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: clamp(18px, 1.65vw, 22px); height: clamp(18px, 1.65vw, 22px); margin-top: 0.08rem; border-radius: 50%; background-color: var(--color-pink); color: #fff; } .vision-journey-steps { display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(0.08rem, 0.2vw, 0.15rem); margin-top: clamp(0.35rem, 0.75vw, 0.55rem); } .vision-journey-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(0.28rem, 0.45vw, 0.38rem); } .vision-journey-step__icon-wrap { display: flex; flex-direction: column; align-items: center; gap: 0.15rem; } .vision-journey-step__icon { display: block; width: var(--vision-journey-icon-size); height: var(--vision-journey-icon-size); object-fit: contain; } .vision-journey-step__num { display: inline-flex; align-items: center; justify-content: center; width: var(--vision-journey-num-size); height: var(--vision-journey-num-size); border-radius: 50%; font-family: var(--font-body); font-weight: 700; font-size: clamp(0.72rem, 0.8vw, 0.85rem); line-height: 1; color: #fff; } .vision-journey-step--pink .vision-journey-step__num { background-color: var(--color-pink); } .vision-journey-step--purple .vision-journey-step__num { background-color: var(--color-plane); } .vision-journey-step--green .vision-journey-step__num { background-color: var(--color-green); } .vision-journey-step--orange .vision-journey-step__num { background-color: var(--color-orange); } .vision-journey-step--blue .vision-journey-step__num { background-color: var(--color-sky); } .vision-journey-step__title { font-family: var(--font-body); font-size: var(--vision-journey-step-title-size); font-weight: 700; line-height: 1.2; margin: 0; } .vision-journey-step--pink .vision-journey-step__title { color: var(--color-pink); } .vision-journey-step--purple .vision-journey-step__title { color: var(--color-plane); } .vision-journey-step--green .vision-journey-step__title { color: var(--color-green); } .vision-journey-step--orange .vision-journey-step__title { color: var(--color-orange); } .vision-journey-step--blue .vision-journey-step__title { color: var(--color-sky); } .vision-journey-step__quote { font-family: var(--font-body); font-size: var(--vision-journey-step-quote-size); font-weight: 500; font-style: italic; line-height: 1.3; color: var(--color-navy); margin: 0; } .vision-journey-step__text { font-family: var(--font-body); font-size: var(--vision-journey-step-text-size); font-weight: 400; line-height: 1.35; color: var(--color-navy); margin: 0; max-width: 9.75rem; } .vision-journey-step__arrow { flex: 0 0 auto; align-self: flex-start; width: var(--approach-arrow-width); height: auto; margin-top: clamp(18px, 2.2vw, 28px); object-fit: contain; display: block; mix-blend-mode: multiply; } /* ??? Our Vision: moments, partner, together ??? */ .vision-section__title { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.5rem, 3.2vw, 2rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--color-navy); margin: 0 0 clamp(0.85rem, 1.5vw, 1.15rem); text-align: left; } .vision-section__title-icon { flex-shrink: 0; color: var(--color-pink); width: clamp(1rem, 1.8vw, 1.25rem); height: clamp(1rem, 1.8vw, 1.25rem); } .vision-moments { background-color: #fff; } .vision-moments__inner { display: grid; grid-template-columns: minmax(0, var(--vision-moments-card-col)) minmax(0, var(--vision-moments-gallery-col)); align-items: stretch; gap: clamp(0.55rem, 1vw, 0.85rem); min-width: 0; max-width: 100%; } .vision-moments__card { background-color: var(--vision-moments-bg); border-radius: var(--home-pillar-radius); padding: clamp(1rem, 1.55vw, 1.35rem) clamp(0.85rem, 1.25vw, 1.05rem); min-width: 0; display: flex; flex-direction: column; justify-content: center; } .vision-moments__card .vision-section__title { margin-bottom: clamp(0.55rem, 0.95vw, 0.75rem); font-size: clamp(calc(1.15rem - 6px), calc(2.1vw - 6px), calc(1.55rem - 6px)); line-height: 1.15; } .vision-moments__intro { font-family: var(--font-body); font-size: clamp(0.78rem, 0.86vw, 0.88rem); line-height: 1.45; color: var(--color-navy); margin: 0 0 clamp(0.65rem, 1vw, 0.85rem); } .vision-moments__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.35rem, 0.65vw, 0.55rem) clamp(0.45rem, 0.85vw, 0.65rem); } .vision-moments__list li { display: flex; align-items: flex-start; gap: 0.38rem; font-family: var(--font-body); font-size: clamp(0.68rem, 0.74vw, 0.76rem); line-height: 1.35; color: var(--color-navy); } .vision-moments__list-more { grid-column: 2; } .vision-moments__list-slide { display: none; } .vision-moments__check { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: clamp(16px, 1.45vw, 20px); height: clamp(16px, 1.45vw, 20px); margin-top: 0.04rem; border-radius: 50%; background-color: var(--color-pink); color: #fff; } .vision-moments__gallery { display: grid; grid-template-columns: minmax(0, var(--vision-moments-photo-col)) minmax(0, var(--vision-moments-feature-col)) minmax(0, var(--vision-moments-duo-col)); gap: clamp(0.35rem, 0.65vw, 0.55rem); align-items: stretch; min-width: 0; max-width: 100%; width: 100%; } .vision-moments__photo-duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.35rem, 0.65vw, 0.55rem); min-width: 0; min-height: 0; overflow: visible; align-self: stretch; } .vision-moments__photo-duo .vision-moments__photo-wrap { height: 100%; min-height: 0; } .vision-moments__photo-wrap { margin: 0; display: flex; align-items: stretch; justify-content: center; min-width: 0; min-height: 0; overflow: hidden; border-radius: var(--home-pillar-radius); align-self: stretch; } .vision-moments__photo-wrap > .lazy-img-wrap, .vision-moments__feature-inner > .lazy-img-wrap { height: 100%; } .vision-moments__photo-wrap > .lazy-img-wrap .vision-moments__photo { width: 100%; height: 100%; object-fit: contain; object-position: center; } .vision-moments__feature-inner > .lazy-img-wrap .vision-moments__feature-img { width: 100%; height: 100%; object-fit: contain; object-position: center; } .vision-moments__photo { display: block; width: 100%; height: 100%; min-height: 0; object-fit: contain; object-position: center; border-radius: var(--home-pillar-radius); background-color: rgba(255, 255, 255, 0.55); } .vision-moments__feature { position: relative; margin: 0; min-width: 0; width: 100%; max-width: 100%; aspect-ratio: var(--vision-moments-feature-aspect); display: flex; align-items: center; justify-content: center; overflow: visible; border-radius: var(--home-pillar-radius); align-self: stretch; } .vision-moments__feature-inner { position: relative; display: block; width: 100%; height: 100%; } .vision-moments__feature-img { display: block; width: 100%; height: 100%; object-fit: contain; object-position: center; border-radius: var(--home-pillar-radius); } .vision-moments__feature-copy { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: var(--vision-moments-feature-copy-width); max-width: calc(100% - 1.25rem); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; pointer-events: none; padding-inline: 0.15rem; box-sizing: border-box; } .vision-moments__feature-title { font-family: var(--font-heading); font-weight: 700; font-size: var(--vision-moments-feature-title-size); line-height: 1.22; color: var(--color-pink); margin: 0 0 clamp(0.25rem, 0.4vw, 0.35rem); } .vision-moments__feature-text { font-family: var(--font-body); font-weight: 700; font-size: var(--vision-moments-feature-text-size); line-height: 1.32; color: var(--color-navy); margin: 0; overflow-wrap: break-word; word-wrap: break-word; } .vision-partner { background-color: #fff; } .vision-partner__card { background-color: var(--vision-partner-bg); border-radius: var(--home-pillar-radius); padding: var(--vision-partner-card-pad); } .vision-partner__inner { display: grid; grid-template-columns: minmax(0, var(--vision-partner-copy-col)) minmax(0, var(--vision-partner-panel-col)); align-items: stretch; gap: clamp(0.35rem, 0.65vw, 0.55rem); } .vision-partner__copy { background-color: var(--vision-partner-bg); padding: clamp(0.45rem, 0.85vw, 0.72rem) clamp(0.55rem, 0.95vw, 0.78rem); min-width: 0; display: flex; flex-direction: column; justify-content: center; } .vision-partner__copy .vision-section__title { margin-bottom: clamp(0.55rem, 0.95vw, 0.75rem); font-size: clamp(1.15rem, 2.1vw, 1.55rem); line-height: 1.15; } .vision-partner__intro { font-family: var(--font-body); font-size: clamp(0.82rem, 0.9vw, 0.94rem); line-height: 1.45; color: var(--color-navy); margin: 0; } .vision-partner__panel { background-color: #fff; border-radius: var(--home-pillar-radius); margin-block: var(--vision-partner-panel-inset-y); padding: clamp(0.55rem, 0.95vw, 0.78rem) clamp(0.55rem, 0.95vw, 0.78rem); min-width: 0; display: flex; align-items: center; } .vision-partner__panel-inner { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(0.75rem, 1.35vw, 1.15rem); width: 100%; } .vision-partner__icons { display: flex; align-items: stretch; justify-content: space-between; gap: 0; min-width: 0; } .vision-partner__icon-item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(0.28rem, 0.45vw, 0.38rem); padding-inline: clamp(0.12rem, 0.28vw, 0.22rem); } .vision-partner__icon-item:not(:first-child) { border-left: 1px solid var(--vision-partner-divider); } .vision-partner__icon { display: block; width: var(--vision-partner-icon-size); height: var(--vision-partner-icon-size); object-fit: contain; } .vision-partner__icon-label { font-family: var(--font-body); font-size: clamp(0.62rem, 0.7vw, 0.72rem); font-weight: 600; line-height: 1.25; color: var(--color-navy); margin: 0; } .vision-partner__cta-wrap { position: relative; display: flex; flex-direction: column; align-items: flex-end; gap: 0.35rem; } .vision-partner__btn { font-size: clamp(0.78rem, 0.84vw, 0.92rem); padding: clamp(0.65rem, 0.95vw, 0.78rem) clamp(0.85rem, 1.1vw, 1.1rem); white-space: normal; text-align: center; max-width: 13.5rem; } .vision-partner__cta-heart { width: clamp(18px, 1.65vw, 22px); height: clamp(18px, 1.65vw, 22px); color: var(--color-pink); margin-right: 0.35rem; } .vision-together { background-color: #fff; } .vision-together__card { background-color: var(--vision-together-bg); border-radius: var(--home-pillar-radius); padding: var(--vision-together-card-pad-y) var(--vision-together-card-pad-right) var(--vision-together-card-pad-y) var(--vision-together-card-pad-left); } .vision-together__grid { display: grid; grid-template-columns: minmax(0, var(--vision-together-jar-col)) minmax(0, 1.05fr) minmax(0, 0.78fr) minmax(0, 0.95fr); align-items: center; gap: clamp(0.55rem, 1vw, 0.9rem); } .vision-together__jar-wrap { display: flex; align-items: center; justify-content: flex-start; min-width: 0; position: relative; } .vision-together__jar { display: block; width: 100%; max-width: var(--vision-together-jar-max); height: auto; object-fit: contain; } .vision-together__jar-wrap > .lazy-img-wrap { width: 100%; max-width: var(--vision-together-jar-max); } .vision-together__stars { position: absolute; right: clamp(-0.15rem, 0.35vw, 0.35rem); top: 12%; width: clamp(34px, 3.2vw, 44px); height: auto; pointer-events: none; } .vision-together__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.05rem, 1.55vw, 1.45rem); line-height: 1.22; letter-spacing: -0.02em; color: var(--color-navy); margin: 0 0 clamp(0.65rem, 1vw, 0.85rem); } .vision-together__title-icon { display: inline-block; vertical-align: middle; color: var(--color-pink); width: clamp(0.95rem, 1.6vw, 1.15rem); height: clamp(0.95rem, 1.6vw, 1.15rem); margin-left: 0.2rem; } .vision-together__accent { display: inline-block; font-family: var(--font-heading); font-style: italic; font-weight: 700; font-size: clamp(1.65rem, 2.8vw, 2.35rem); line-height: 1; color: var(--color-pink); vertical-align: baseline; } .vision-together__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(0.28rem, 0.45vw, 0.38rem); } .vision-together__list li { display: flex; align-items: flex-start; gap: 0.42rem; font-family: var(--font-body); font-size: clamp(0.72rem, 0.8vw, 0.82rem); line-height: 1.35; color: var(--color-navy); } .vision-together__check { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: clamp(18px, 1.65vw, 22px); height: clamp(18px, 1.65vw, 22px); margin-top: 0.05rem; border-radius: 50%; background-color: var(--color-pink); color: #fff; } .vision-together__actions { display: flex; flex-direction: column; gap: clamp(0.45rem, 0.75vw, 0.6rem); min-width: 0; } .vision-together__actions .btn { width: 100%; white-space: normal; text-align: center; font-size: clamp(0.78rem, 0.84vw, 0.92rem); padding: clamp(0.65rem, 0.95vw, 0.78rem) clamp(0.85rem, 1.1vw, 1.1rem); } .vision-together__btn-outline { background-color: #fff; color: var(--color-navy); border-color: var(--color-yellow); } .vision-together__btn-outline:hover { background-color: #fff; color: var(--color-navy); border-color: var(--color-yellow); box-shadow: inset 0 0 0 1px var(--color-yellow); } .vision-together__deco-stars { display: flex; justify-content: flex-end; gap: 0.25rem; margin-top: 0.15rem; pointer-events: none; } .vision-together__deco-star { color: var(--color-yellow); width: clamp(16px, 1.45vw, 20px); height: clamp(16px, 1.45vw, 20px); } /* ??? For Parents hero content ??? */ .for-parents-hero__title-wrap { position: relative; margin: 0 0 clamp(0.85rem, 1.35vw, 1.05rem); max-width: 100%; } .for-parents-hero__title { font-family: var(--font-body); font-weight: 700; font-size: var(--for-parents-hero-title-size); line-height: 1.02; letter-spacing: -0.02em; margin: 0; } .for-parents-hero__title-row { display: inline-flex; align-items: center; gap: clamp(0.25rem, 0.45vw, 0.4rem); } .for-parents-hero__title-line { display: block; } .for-parents-hero__title-line--pink { color: var(--color-pink); } .for-parents-hero__title-line--navy { color: var(--color-navy); } .for-parents-hero__heart { flex-shrink: 0; width: clamp(22px, 2vw, 28px); height: clamp(22px, 2vw, 28px); color: var(--color-yellow); margin-top: 0.12em; } .for-parents-hero__star { position: absolute; top: 0; right: clamp(0.25rem, 1.5vw, 1.25rem); width: var(--for-parents-hero-star-size); height: var(--for-parents-hero-star-size); color: var(--color-yellow); } .for-parents-hero__subhead { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1rem, 1.12vw, 1.15rem); line-height: 1.45; color: var(--color-navy); margin: 0 0 clamp(0.75rem, 1.1vw, 0.95rem); max-width: 28rem; } .for-parents-hero__text { font-family: var(--font-body); font-size: clamp(0.92rem, 1vw, 1.02rem); font-weight: 400; line-height: 1.62; color: var(--color-navy); margin: 0 0 1.35rem; max-width: 32rem; } .for-parents-hero__accent { font-weight: 700; } .for-parents-hero__accent--pink { color: var(--color-pink); } .for-parents-hero__accent--green { color: var(--color-green); } .for-parents-hero__accent--cyan { color: var(--color-cyan); } /* ??? Get Involved hero ??? */ .get-involved-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-pink); margin: 0 0 0.85rem; } .get-involved-hero__eyebrow-heart { flex-shrink: 0; color: var(--color-pink); } .get-involved-hero__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--get-involved-hero-title-size); line-height: 1.08; letter-spacing: -0.02em; margin: 0 0 clamp(0.85rem, 1.2vw, 1.05rem); } .get-involved-hero__title-line { display: inline; } .get-involved-hero__title-line--pink { color: var(--color-pink); } .get-involved-hero__title-line--navy { color: var(--color-navy); } .get-involved-hero__title-line + .get-involved-hero__title-line { margin-left: 0.18em; } .get-involved-hero__text { font-family: var(--font-body); font-size: clamp(0.92rem, 1vw, 1.02rem); font-weight: 400; line-height: 1.62; color: var(--color-navy); margin: 0 0 clamp(0.75rem, 1.05vw, 0.95rem); max-width: 32rem; } .get-involved-hero__text--secondary { margin-bottom: 1.35rem; } .get-involved-hero__accent { font-weight: 700; } .get-involved-hero__accent--pink { color: var(--color-pink); } /* ??? Get Involved ways (5 cards) ??? */ .get-involved-ways { background-color: #fff; } .get-involved-ways__title { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.45rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.35rem, 2.8vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--color-navy); text-align: center; margin: 0 0 clamp(0.95rem, 1.75vw, 1.35rem); } .get-involved-ways__title-icon { flex-shrink: 0; color: var(--color-pink); } .get-involved-ways__grid { display: flex; align-items: stretch; gap: clamp(0.65rem, 1.1vw, 0.95rem); } .get-involved-ways-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; background-color: #fff; border: 1px solid var(--for-parents-expect-card-border); border-radius: var(--experience-card-radius); padding: clamp(1rem, 1.35vw, 1.2rem) clamp(0.65rem, 0.95vw, 0.85rem) clamp(0.85rem, 1.15vw, 1rem); } .get-involved-ways-card__icon { display: block; width: var(--get-involved-ways-icon-size); height: var(--get-involved-ways-icon-size); object-fit: contain; margin: 0 0 clamp(0.65rem, 0.95vw, 0.8rem); } .get-involved-ways-card__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--get-involved-ways-card-title-size); line-height: 1.28; color: var(--color-navy); margin: 0 0 clamp(0.45rem, 0.7vw, 0.6rem); } .get-involved-ways-card__text { flex: 1 1 auto; font-family: var(--font-body); font-size: var(--get-involved-ways-card-text-size); line-height: 1.48; color: var(--color-navy); margin: 0 0 clamp(0.75rem, 1.05vw, 0.95rem); max-width: 14rem; } .get-involved-ways-card__link { display: inline-flex; align-items: center; gap: 0.28rem; font-family: var(--font-body); font-size: clamp(0.78rem, 0.86vw, 0.88rem); font-weight: 700; line-height: 1.2; color: var(--color-pink); text-decoration: none; margin-top: auto; transition: opacity var(--ease-soft); } .get-involved-ways-card__link:hover { opacity: 0.82; } /* ??? Partners ways (5 cards) ??? */ .partners-ways { background-color: #fff; } .partners-ways__title { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.45rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.35rem, 2.8vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--color-navy); text-align: center; margin: 0 0 clamp(0.65rem, 1.1vw, 0.85rem); } .partners-ways__title-icon { flex-shrink: 0; color: var(--color-pink); } .partners-ways__intro { font-family: var(--font-body); font-size: clamp(0.88rem, 0.98vw, 1rem); line-height: 1.5; color: var(--color-navy); text-align: center; max-width: 42rem; margin: 0 auto clamp(1.1rem, 2vw, 1.55rem); } .partners-ways__grid { display: flex; align-items: stretch; gap: clamp(0.65rem, 1.1vw, 0.95rem); } .partners-ways-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; border-radius: var(--home-pillar-radius); padding: clamp(1rem, 1.35vw, 1.2rem) clamp(0.65rem, 0.95vw, 0.85rem) clamp(1rem, 1.35vw, 1.2rem); } .partners-ways-card--purple { background-color: var(--believe-card-purple); } .partners-ways-card--green { background-color: var(--believe-card-green); } .partners-ways-card--blue { background-color: var(--believe-card-blue); } .partners-ways-card--pink { background-color: var(--believe-card-pink); } .partners-ways-card--orange { background-color: var(--vision-pillar-orange-bg); } .partners-ways-card__icon { display: block; width: var(--partners-ways-icon-size); height: var(--partners-ways-icon-size); object-fit: contain; margin: 0 0 clamp(0.65rem, 0.95vw, 0.8rem); filter: var(--partners-ways-icon-filter); mix-blend-mode: multiply; } .partners-ways-card--purple .partners-ways-card__icon { filter: brightness(1.1) contrast(1.08) saturate(1.08) hue-rotate(-4deg); } .partners-ways-card--green .partners-ways-card__icon { filter: brightness(1.1) contrast(1.08) saturate(1.1) hue-rotate(8deg); } .partners-ways-card--blue .partners-ways-card__icon { filter: brightness(1.1) contrast(1.08) saturate(1.08) hue-rotate(-12deg); } .partners-ways-card--pink .partners-ways-card__icon { filter: brightness(1.1) contrast(1.08) saturate(1.1) hue-rotate(320deg); } .partners-ways-card--orange .partners-ways-card__icon { filter: brightness(1.1) contrast(1.08) saturate(1.12) hue-rotate(-6deg); } .partners-ways-card__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--partners-ways-card-title-size); line-height: 1.25; margin: 0 0 clamp(0.55rem, 0.8vw, 0.72rem); } .partners-ways-card--purple .partners-ways-card__title { color: var(--color-plane); } .partners-ways-card--green .partners-ways-card__title { color: var(--color-green); } .partners-ways-card--blue .partners-ways-card__title { color: var(--partners-ways-blue); } .partners-ways-card--pink .partners-ways-card__title { color: var(--color-pink); } .partners-ways-card--orange .partners-ways-card__title { color: var(--color-orange); } .partners-ways-card__text { flex: 1 1 auto; font-family: var(--font-body); font-size: var(--partners-ways-card-text-size); line-height: 1.52; color: var(--color-navy); margin: 0; } /* ??? Partners impact (5 photo cards in cream box) ??? */ .partners-impact { background-color: #fff; } .partners-impact__box { background-color: var(--partners-impact-bg); border-radius: var(--partners-impact-box-radius); padding: clamp(1.35rem, 2.4vw, 2.15rem) clamp(1rem, 1.85vw, 1.65rem) clamp(1.25rem, 2.1vw, 1.85rem); } .partners-impact__title { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.45rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.35rem, 2.8vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--color-navy); text-align: center; margin: 0 0 clamp(0.65rem, 1.1vw, 0.85rem); } .partners-impact__title-star { flex-shrink: 0; color: var(--color-yellow); } .partners-impact__intro { font-family: var(--font-body); font-size: clamp(0.92rem, 1.02vw, 1.05rem); line-height: 1.5; color: var(--color-navy); text-align: center; max-width: 40rem; margin: 0 auto clamp(1.15rem, 2vw, 1.65rem); } .partners-impact__grid { display: flex; align-items: stretch; gap: clamp(0.65rem, 1.1vw, 0.95rem); } .partners-impact-card { position: relative; flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; padding-bottom: clamp(1.1rem, 1.45vw, 1.35rem); } .partners-impact-card__photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--experience-photo-radius); margin-bottom: clamp(0.7rem, 1vw, 0.9rem); } .partners-impact-card > .lazy-img-wrap--cover { margin-bottom: clamp(0.7rem, 1vw, 0.9rem); width: 100%; } .partners-impact-card > .lazy-img-wrap--cover .partners-impact-card__photo { aspect-ratio: auto; border-radius: 0; margin-bottom: 0; } .partners-impact-card__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--partners-impact-card-title-size); line-height: 1.25; color: var(--color-navy); margin: 0 0 clamp(0.4rem, 0.65vw, 0.55rem); width: 100%; } .partners-impact-card__text { flex: 1 1 auto; font-family: var(--font-body); font-size: var(--partners-impact-card-text-size); line-height: 1.5; color: var(--color-navy); margin: 0; width: 100%; padding-inline: clamp(0.15rem, 0.35vw, 0.3rem); padding-right: clamp(1.35rem, 1.8vw, 1.65rem); } .partners-impact-card__deco { position: absolute; right: clamp(0.1rem, 0.35vw, 0.25rem); bottom: clamp(0.05rem, 0.25vw, 0.15rem); display: block; width: var(--partners-impact-deco-size); height: var(--partners-impact-deco-size); object-fit: contain; pointer-events: none; filter: brightness(1.08) contrast(1.06) saturate(1.05); mix-blend-mode: multiply; } /* ??? Partners opportunity CTA ??? */ .partners-opportunity-cta { background-color: #fff; padding-top: 0; } .partners-opportunity-cta__inner { padding-top: 0; padding-bottom: 0; } .partners-opportunity-cta__card { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1.35fr) auto auto; align-items: center; gap: clamp(0.75rem, 1.35vw, 1.15rem); padding: clamp(1.1rem, 1.85vw, 1.55rem) clamp(1.15rem, 2vw, 1.75rem); background: var(--partners-opportunity-cta-gradient); border-radius: var(--partners-opportunity-cta-radius); color: #fff; } .partners-opportunity-cta__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.15rem, 1.75vw, 1.65rem); line-height: 1.22; letter-spacing: -0.02em; color: #fff; margin: 0; } .partners-opportunity-cta__title .heading-underline--partners-cta { display: inline-block; position: relative; z-index: 0; white-space: nowrap; isolation: isolate; } .partners-opportunity-cta__title .heading-underline--partners-cta .heading-underline__img { left: 0; width: 100%; bottom: -0.08em; max-height: 12px; min-height: 8px; z-index: -1; } .partners-opportunity-cta__lead { display: flex; align-items: center; gap: clamp(0.55rem, 0.95vw, 0.8rem); min-width: 0; } .partners-opportunity-cta__bulb { flex-shrink: 0; width: var(--partners-opportunity-bulb-size); height: var(--partners-opportunity-bulb-size); object-fit: contain; } .partners-opportunity-cta__text { font-family: var(--font-body); font-size: clamp(0.82rem, 0.92vw, 0.95rem); line-height: 1.48; color: rgba(255, 255, 255, 0.96); margin: 0; max-width: 34rem; } .partners-opportunity-cta__btn { flex-shrink: 0; background-color: #fff; border-color: #fff; color: #5e35b1; white-space: nowrap; } .partners-opportunity-cta__btn:hover { background-color: rgba(255, 255, 255, 0.92); border-color: rgba(255, 255, 255, 0.92); color: #5e35b1; } .partners-opportunity-cta__plane { flex-shrink: 0; width: var(--partners-opportunity-plane-width); height: auto; object-fit: contain; mix-blend-mode: screen; } /* ??? Partners founding (5 dashed cards) ??? */ .partners-founding { background-color: #fff; } .partners-founding__title { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.45rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.35rem, 2.8vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--color-navy); text-align: center; margin: 0 0 clamp(0.65rem, 1.1vw, 0.85rem); } .partners-founding__title-icon { flex-shrink: 0; color: var(--color-pink); } .partners-founding__intro { font-family: var(--font-body); font-size: clamp(0.88rem, 0.98vw, 1rem); line-height: 1.5; color: var(--color-navy); text-align: center; max-width: 40rem; margin: 0 auto clamp(1.1rem, 2vw, 1.55rem); } .partners-founding__grid { display: flex; align-items: stretch; gap: clamp(0.65rem, 1.1vw, 0.95rem); } .partners-founding-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; border-radius: var(--experience-card-radius); border: 2px dashed transparent; padding: clamp(1rem, 1.35vw, 1.2rem) clamp(0.65rem, 0.95vw, 0.85rem) clamp(0.95rem, 1.25vw, 1.1rem); } .partners-founding-card--purple { border-color: rgba(155, 89, 208, 0.55); background-color: var(--believe-card-purple); } .partners-founding-card--green { border-color: rgba(111, 191, 74, 0.55); background-color: var(--believe-card-green); } .partners-founding-card--blue { border-color: rgba(43, 127, 212, 0.55); background-color: var(--believe-card-blue); } .partners-founding-card--pink { border-color: rgba(238, 29, 120, 0.45); background-color: var(--believe-card-pink); } .partners-founding-card--gold { border-color: rgba(245, 165, 35, 0.55); background-color: var(--believe-card-yellow); } .partners-founding-card__icon { display: block; width: var(--partners-founding-icon-size); height: var(--partners-founding-icon-size); object-fit: contain; margin: 0 0 clamp(0.65rem, 0.95vw, 0.8rem); filter: brightness(1.1) contrast(1.08) saturate(1.05); mix-blend-mode: multiply; } .partners-founding-card--purple .partners-founding-card__icon { filter: brightness(1.1) contrast(1.08) saturate(1.08) hue-rotate(-4deg); } .partners-founding-card--green .partners-founding-card__icon { filter: brightness(1.1) contrast(1.08) saturate(1.1) hue-rotate(8deg); } .partners-founding-card--blue .partners-founding-card__icon { filter: brightness(1.1) contrast(1.08) saturate(1.08) hue-rotate(-12deg); } .partners-founding-card--pink .partners-founding-card__icon { filter: brightness(1.1) contrast(1.08) saturate(1.1) hue-rotate(320deg); } .partners-founding-card--gold .partners-founding-card__icon { filter: brightness(1.1) contrast(1.08) saturate(1.12) hue-rotate(-6deg); } .partners-founding-card__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--partners-founding-card-title-size); line-height: 1.28; margin: 0 0 clamp(0.4rem, 0.65vw, 0.55rem); } .partners-founding-card--purple .partners-founding-card__title { color: var(--color-plane); } .partners-founding-card--green .partners-founding-card__title { color: var(--color-green); } .partners-founding-card--blue .partners-founding-card__title { color: var(--partners-ways-blue); } .partners-founding-card--pink .partners-founding-card__title { color: var(--color-pink); } .partners-founding-card--gold .partners-founding-card__title { color: var(--color-orange); } .partners-founding-card__text { font-family: var(--font-body); font-size: var(--partners-founding-card-text-size); line-height: 1.48; color: var(--color-navy); margin: 0; } /* ??? Get Involved impact (timeline + illustration) ??? */ .get-involved-impact { background-color: #fff; } .get-involved-impact__card { background-color: var(--believe-card-peach); border-radius: var(--home-pillar-radius); padding: clamp(1rem, 1.65vw, 1.45rem); } .get-involved-impact__inner { display: grid; grid-template-columns: minmax(0, var(--get-involved-impact-copy-col)) minmax(0, var(--get-involved-impact-visual-col)); align-items: center; gap: clamp(0.85rem, 1.55vw, 1.35rem); } .get-involved-impact__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.45rem, 2.65vw, 2.15rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 clamp(0.75rem, 1.1vw, 0.95rem); } .get-involved-impact__title-line { display: block; } .get-involved-impact__title-line--navy { color: var(--color-navy); } .get-involved-impact__title-line--pink { color: var(--color-pink); } .get-involved-impact__intro { font-family: var(--font-body); font-size: clamp(0.88rem, 0.96vw, 0.98rem); line-height: 1.55; color: var(--color-navy); margin: 0 0 clamp(0.85rem, 1.25vw, 1.05rem); max-width: 24rem; } .get-involved-impact__note { display: flex; align-items: flex-start; gap: clamp(0.45rem, 0.75vw, 0.6rem); background-color: var(--believe-card-yellow); border-radius: var(--experience-card-radius); padding: clamp(0.65rem, 1vw, 0.85rem) clamp(0.7rem, 1.05vw, 0.9rem); max-width: 24rem; } .get-involved-impact__note-star { flex-shrink: 0; color: var(--color-yellow); margin-top: 0.08rem; } .get-involved-impact__note-text { font-family: var(--font-body); font-size: clamp(0.78rem, 0.86vw, 0.88rem); line-height: 1.48; color: var(--color-navy); margin: 0; } .get-involved-impact__visual { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 0.92fr); align-items: center; gap: clamp(0.55rem, 1vw, 0.85rem); min-width: 0; } .get-involved-impact__illustration { display: block; width: 100%; max-width: var(--get-involved-impact-illustration-max); height: auto; object-fit: contain; justify-self: end; } .get-involved-impact__visual > .lazy-img-wrap { justify-self: end; width: 100%; max-width: var(--get-involved-impact-illustration-max); } .get-involved-timeline { display: flex; flex-direction: column; gap: clamp(0.75rem, 1.2vw, 1rem); min-width: 0; } .get-involved-timeline__step { display: grid; grid-template-columns: var(--get-involved-timeline-icon-size) var(--get-involved-timeline-rail-width) minmax(0, 1fr); column-gap: clamp(0.35rem, 0.65vw, 0.55rem); align-items: start; } .get-involved-timeline__icon, .get-involved-timeline__icon-wrap { width: var(--get-involved-timeline-icon-size); height: var(--get-involved-timeline-icon-size); flex-shrink: 0; } .get-involved-timeline__icon { display: block; object-fit: contain; } .get-involved-timeline__icon-wrap { display: flex; align-items: center; justify-content: center; border-radius: 50%; } .get-involved-timeline__icon-wrap--pink { background-color: var(--believe-card-pink); } .get-involved-timeline__icon-svg { width: 56%; height: 56%; color: var(--color-pink); } .get-involved-timeline__rail { position: relative; display: flex; justify-content: center; align-self: stretch; min-height: 100%; padding-top: calc(var(--get-involved-timeline-icon-size) * 0.4); } .get-involved-timeline__dot { width: clamp(9px, 0.85vw, 11px); height: clamp(9px, 0.85vw, 11px); border-radius: 50%; flex-shrink: 0; z-index: 1; } .get-involved-timeline__dot--pink { background-color: var(--color-pink); } .get-involved-timeline__dot--green { background-color: var(--color-green); } .get-involved-timeline__dot--blue { background-color: var(--color-sky); } .get-involved-timeline__rail::after { content: ''; position: absolute; top: calc(var(--get-involved-timeline-icon-size) * 0.4 + clamp(9px, 0.85vw, 11px) + 0.3rem); bottom: calc(-1 * clamp(0.75rem, 1.2vw, 1rem)); left: 50%; transform: translateX(-50%); border-left: 2px dashed rgba(0, 27, 102, 0.2); } .get-involved-timeline__step:last-child .get-involved-timeline__rail::after { display: none; } .get-involved-timeline__content { min-width: 0; padding-top: calc(var(--get-involved-timeline-icon-size) * 0.08); } .get-involved-timeline__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(0.88rem, 0.96vw, 1rem); line-height: 1.25; margin: 0 0 clamp(0.22rem, 0.38vw, 0.32rem); } .get-involved-timeline__title--pink { color: var(--color-pink); } .get-involved-timeline__title--green { color: var(--color-green); } .get-involved-timeline__title--blue { color: var(--color-sky); } .get-involved-timeline__text { font-family: var(--font-body); font-size: clamp(0.76rem, 0.84vw, 0.86rem); line-height: 1.45; color: var(--color-navy); margin: 0; } /* ??? Get Involved partner CTA ??? */ .get-involved-partner-cta { background-color: #fff; padding-top: 0; } .get-involved-partner-cta__card { display: flex; align-items: center; gap: clamp(0.85rem, 1.65vw, 1.35rem); padding: var(--get-involved-partner-cta-pad-y) var(--get-involved-partner-cta-pad-x); background-color: var(--believe-card-peach); border-radius: var(--contact-cta-radius); } .get-involved-partner-cta__envelope { flex: 0 0 auto; width: var(--get-involved-partner-cta-envelope-width); height: auto; object-fit: contain; } .get-involved-partner-cta__copy { flex: 1 1 auto; min-width: 0; } .get-involved-partner-cta__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1rem, 1.45vw, 1.35rem); line-height: 1.32; letter-spacing: -0.02em; color: var(--color-navy); margin: 0 0 clamp(0.25rem, 0.45vw, 0.35rem); max-width: 34rem; } .get-involved-partner-cta__sub { font-family: var(--font-body); font-size: clamp(0.82rem, 0.9vw, 0.92rem); line-height: 1.45; color: rgba(0, 27, 102, 0.72); margin: 0; } .get-involved-partner-cta__btn { flex: 0 0 auto; white-space: nowrap; margin-left: auto; } .get-involved-partner-cta__deco { flex: 0 0 auto; width: var(--get-involved-partner-cta-deco-width); height: auto; object-fit: contain; } /* ??? For Parents expect (5 cards) ??? */ .for-parents-expect { background-color: #fff; } .for-parents-expect__wrap { position: relative; padding-inline: clamp(1.75rem, 3.5vw, 3rem); } .for-parents-expect__inner { position: relative; z-index: 1; } .for-parents-expect__deco { position: absolute; top: 58%; width: var(--for-parents-expect-deco-width); height: auto; object-fit: contain; pointer-events: none; user-select: none; z-index: 0; } .for-parents-expect__deco--left { left: 0; transform: translateY(-50%); } .for-parents-expect__deco--right { right: 0; transform: translateY(-50%) scaleX(-1); } .for-parents-expect__title { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.45rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.35rem, 2.8vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--color-navy); text-align: center; margin: 0 0 clamp(0.85rem, 1.6vw, 1.25rem); } .for-parents-expect__title-icon { flex-shrink: 0; color: var(--color-pink); } .for-parents-expect__grid { display: flex; align-items: stretch; gap: clamp(0.55rem, 1vw, 0.85rem); } .for-parents-expect-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; background-color: #fff; border: 1px solid var(--for-parents-expect-card-border); border-radius: var(--experience-card-radius); padding: clamp(0.85rem, 1.15vw, 1.05rem) clamp(0.55rem, 0.85vw, 0.75rem); } .for-parents-expect-card__icon { display: block; width: clamp(62px, 5.8vw, 76px); height: clamp(62px, 5.8vw, 76px); object-fit: contain; margin: 0 0 clamp(0.55rem, 0.85vw, 0.7rem); } .for-parents-expect-card__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(0.84rem, 0.92vw, 0.98rem); line-height: 1.28; color: var(--color-navy); margin: 0 0 clamp(0.4rem, 0.65vw, 0.55rem); } .for-parents-expect-card__text { flex: 1 1 auto; font-family: var(--font-body); font-size: clamp(0.72rem, 0.8vw, 0.82rem); line-height: 1.45; color: var(--color-navy); margin: 0; max-width: 13rem; min-height: calc(1.45em * var(--for-parents-expect-text-lines)); } /* ??? For Parents fit (2-panel section) ??? */ .for-parents-fit { background-color: #fff; } .for-parents-fit__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: clamp(0.75rem, 1.35vw, 1.15rem); } .for-parents-fit-card { position: relative; border-radius: var(--home-pillar-radius); padding: clamp(1rem, 1.65vw, 1.45rem); min-height: 100%; } .for-parents-fit-card--pink { background-color: var(--believe-card-pink); } .for-parents-fit-card--lavender { background-color: var(--believe-card-purple); } .for-parents-fit-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.65rem; margin: 0 0 clamp(0.55rem, 0.9vw, 0.75rem); } .for-parents-fit-card__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.05rem, 1.35vw, 1.35rem); line-height: 1.25; color: var(--color-navy); margin: 0; max-width: 16rem; } .for-parents-fit-card__star { flex-shrink: 0; width: clamp(22px, 2vw, 28px); height: clamp(22px, 2vw, 28px); color: var(--color-yellow); margin-top: 0.15rem; } .for-parents-fit-card__intro { font-family: var(--font-body); font-size: clamp(0.82rem, 0.9vw, 0.92rem); line-height: 1.45; color: var(--color-navy); margin: 0 0 clamp(0.65rem, 1vw, 0.85rem); } .for-parents-fit-card__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.35rem, 0.65vw, 0.55rem) clamp(0.55rem, 1vw, 0.85rem); } .for-parents-fit-card__list li { display: flex; align-items: flex-start; gap: 0.42rem; font-family: var(--font-body); font-size: clamp(0.74rem, 0.82vw, 0.84rem); line-height: 1.4; color: var(--color-navy); } .for-parents-fit-card__check { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: clamp(18px, 1.65vw, 22px); height: clamp(18px, 1.65vw, 22px); margin-top: 0.08rem; border-radius: 50%; background-color: var(--color-pink); color: #fff; } .for-parents-fit-card__quote-layout { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); align-items: center; gap: clamp(0.55rem, 1vw, 0.85rem); min-height: 100%; } .for-parents-fit-card__jar { display: block; width: 100%; max-width: clamp(140px, 14vw, 210px); height: auto; object-fit: contain; justify-self: center; } .for-parents-fit-card__quote-layout > .lazy-img-wrap { justify-self: center; width: 100%; max-width: clamp(140px, 14vw, 210px); } .for-parents-fit-card__quote { font-family: var(--font-body); font-size: clamp(0.82rem, 0.92vw, 0.96rem); line-height: 1.55; color: var(--color-navy); margin: 0; padding-right: clamp(1.25rem, 2vw, 1.75rem); } .for-parents-fit-card__heart { position: absolute; right: clamp(0.85rem, 1.35vw, 1.15rem); bottom: clamp(0.75rem, 1.2vw, 1rem); width: clamp(22px, 2vw, 28px); height: clamp(22px, 2vw, 28px); color: var(--color-plane); pointer-events: none; } /* ??? For Parents info (experience + get started) ??? */ .for-parents-info { background-color: #fff; } .for-parents-info__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: stretch; gap: clamp(0.75rem, 1.35vw, 1.15rem); } .for-parents-info-card { position: relative; border-radius: var(--home-pillar-radius); padding: clamp(1rem, 1.65vw, 1.45rem); min-height: 100%; display: flex; flex-direction: column; } .for-parents-info-card--cream { background-color: var(--panel-cream); } .for-parents-info-card--lavender { background-color: var(--believe-card-purple); } .for-parents-info-card__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.05rem, 1.35vw, 1.35rem); line-height: 1.25; color: var(--color-navy); text-align: center; margin: 0 0 clamp(0.85rem, 1.3vw, 1.05rem); } .heading-underline--orange .heading-underline__img { filter: hue-rotate(-18deg) saturate(1.35); } .heading-underline--pink .heading-underline__img { filter: hue-rotate(255deg) saturate(1.45) brightness(1.02); } .for-parents-info-card__title .heading-underline--pink { display: inline-block; } .for-parents-info-card__title .heading-underline--pink .heading-underline__img { left: 0; width: 100%; bottom: -0.08em; } .partners-hero .vision-hero__title .heading-underline--partners { display: inline-block; } .partners-hero .vision-hero__title .heading-underline--partners .heading-underline__img { left: 0; width: 100%; bottom: -0.06em; max-height: 12px; } .partners-hero.vision-hero .about-hero__banner { max-height: min(560px, calc(72vh - 50px)); min-height: unset; background-color: #fff !important; } .page-hero.partners-hero .about-hero__media .lazy-img-wrap, .page-hero.partners-hero picture { background-color: #fff; } .for-parents-info-card__features { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.65rem, 1.1vw, 0.95rem) clamp(0.55rem, 1vw, 0.85rem); flex: 1 1 auto; } .for-parents-info-feature { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: clamp(0.35rem, 0.6vw, 0.5rem); } .for-parents-info-feature__icon { display: block; width: var(--for-parents-info-feature-icon-size); height: var(--for-parents-info-feature-icon-size); object-fit: contain; margin-top: 0.1rem; } .for-parents-info-feature__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--for-parents-info-item-title-size); line-height: 1.28; color: var(--color-navy); margin: 0 0 0.2rem; } .for-parents-info-feature__text { font-family: var(--font-body); font-size: clamp(0.72rem, 0.8vw, 0.82rem); line-height: 1.42; color: var(--color-navy); margin: 0; } .for-parents-info-card__footer { font-family: var(--font-body); font-weight: 700; font-size: clamp(0.74rem, 0.82vw, 0.84rem); line-height: 1.45; color: var(--color-navy); text-align: center; text-wrap: balance; margin: clamp(0.75rem, 1.2vw, 1rem) 0 0; padding-inline: clamp(2.25rem, 3.5vw, 2.75rem); } .for-parents-info-card__heart { position: absolute; right: clamp(0.75rem, 1.2vw, 1rem); bottom: clamp(0.65rem, 1vw, 0.85rem); width: clamp(28px, 2.6vw, 36px); height: auto; object-fit: contain; pointer-events: none; z-index: 2; } .for-parents-info-start { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 0.72fr); align-items: start; gap: clamp(0.35rem, 0.75vw, 0.65rem); flex: 1 1 auto; padding-bottom: clamp(2.5rem, 4vw, 3rem); } .for-parents-info-steps { list-style: none; margin: 0; padding: 0; position: relative; } .for-parents-info-steps::before { content: ''; position: absolute; left: calc(clamp(16px, 1.55vw, 20px) - 1px); top: calc(clamp(16px, 1.55vw, 20px) + 4px); bottom: calc(clamp(16px, 1.55vw, 20px) + 4px); border-left: 2px dashed rgba(0, 27, 102, 0.22); pointer-events: none; } .for-parents-info-step { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: clamp(0.45rem, 0.75vw, 0.65rem); align-items: start; } .for-parents-info-step + .for-parents-info-step { margin-top: clamp(0.65rem, 1vw, 0.85rem); } .for-parents-info-step__num { position: relative; z-index: 1; flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: var(--for-parents-info-step-icon-size); height: var(--for-parents-info-step-icon-size); border-radius: 50%; font-family: var(--font-body); font-weight: 700; font-size: clamp(0.92rem, 1vw, 1.05rem); line-height: 1; color: #fff; } .for-parents-info-step__num img { display: block; width: 100%; height: 100%; object-fit: contain; } .for-parents-info-step__num--pink { background-color: var(--color-pink); } .for-parents-info-step__num--purple { background-color: var(--color-plane); } .for-parents-info-step__num--green { background-color: var(--color-green); } .for-parents-info-step__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--for-parents-info-item-title-size); line-height: 1.28; color: var(--color-navy); margin: 0 0 0.18rem; } .for-parents-info-step__text { font-family: var(--font-body); font-size: clamp(0.72rem, 0.8vw, 0.82rem); line-height: 1.42; color: var(--color-navy); margin: 0; max-width: 14rem; } .for-parents-info-start__plane { display: block; width: 100%; max-width: clamp(96px, 9vw, 128px); height: auto; object-fit: contain; justify-self: end; align-self: center; margin-top: clamp(0.25rem, 0.6vw, 0.5rem); } .for-parents-info-start__btn { position: absolute; right: 0; bottom: 0; font-size: clamp(0.78rem, 0.84vw, 0.92rem); padding: clamp(0.65rem, 0.95vw, 0.78rem) clamp(0.85rem, 1.1vw, 1.1rem); } /* ??? For Parents contact CTA banner ??? */ .for-parents-cta { background-color: #fff; } #main-content > section.for-parents-cta { padding-top: var(--for-parents-cta-pad-top); padding-bottom: 0; } #main-content > section.for-parents-info:has(+ .for-parents-cta) { padding-bottom: 0; } .for-parents-cta__inner { padding-top: 0; padding-bottom: 0; } .for-parents-cta__card { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); padding: clamp(1.15rem, 2.2vw, 1.75rem) clamp(1.35rem, 2.8vw, 2.5rem); background-color: var(--contact-cta-bg); border-radius: var(--contact-cta-radius); animation: rise-in 0.65s ease both; } .for-parents-cta__envelope { flex: 0 0 auto; width: var(--for-parents-cta-envelope-width); max-width: none; height: auto; object-fit: contain; } .for-parents-cta__content { flex: 1 1 auto; min-width: 0; } .for-parents-cta__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.05rem, 1.75vw, 1.62rem); line-height: 1.35; letter-spacing: -0.02em; color: var(--color-navy); margin: 0 0 0.28rem; } .for-parents-cta__text { font-family: var(--font-body); font-size: clamp(0.88rem, 1vw, 1rem); font-weight: 400; line-height: 1.45; color: var(--color-navy); margin: 0; } .for-parents-cta__actions { display: flex; align-items: center; gap: clamp(0.65rem, 1.2vw, 1.1rem); flex: 0 0 auto; margin-left: auto; } .for-parents-cta__btn { white-space: nowrap; } .for-parents-cta__star { flex-shrink: 0; width: var(--for-parents-cta-star-size); height: var(--for-parents-cta-star-size); color: var(--color-yellow); } /* ??? Explore hero content ??? */ .explore-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-body); font-size: 0.78rem; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--color-pink); margin: 0 0 0.85rem; } .explore-hero__eyebrow-icon { flex-shrink: 0; } .explore-hero__heading-block { display: flex; align-items: center; gap: clamp(0.35rem, 1.1vw, 1rem); margin: 0 0 1.1rem; max-width: 100%; } .explore-hero__title-wrap { flex: 0 1 auto; min-width: 0; margin: 0; } .explore-hero__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.7rem, 2.85vw, 2.85rem); line-height: 1.12; letter-spacing: -0.02em; margin: 0; } .explore-hero__deco { flex: 0 0 auto; width: var(--explore-hero-deco-width); height: auto; margin-top: 0; object-fit: contain; object-position: center; pointer-events: none; user-select: none; } .explore-hero__title-line { display: block; white-space: nowrap; } .explore-hero__title-line--navy { color: var(--color-navy); margin-bottom: 0.15rem; } .explore-hero__title-line--pink { color: var(--color-pink); } .explore-hero__text { font-family: var(--font-body); font-size: clamp(0.98rem, 1.05vw, 1.08rem); line-height: 1.62; color: var(--color-navy); max-width: 34rem; margin: 0 0 0.9rem; } .explore-hero__text--last { margin-bottom: 1.35rem; } .explore-hero .page-hero__actions { max-width: 34rem; } .explore-hero__tags-wrap { --explore-tags-cloud: url('../images/explore-hero-tags-cloud-removebg-preview.png'); --explore-tags-offset-bottom: -95px; position: absolute; right: clamp(-0.25rem, -0.5vw, 0.15rem); bottom: var(--explore-tags-offset-bottom); width: clamp(118px, 11.5vw, 148px); height: clamp(260px, 44vh, 360px); background-image: var(--explore-tags-cloud); background-repeat: no-repeat; background-position: center; background-size: contain; pointer-events: none; user-select: none; z-index: 3; } .explore-hero__tags { position: absolute; inset: 0; list-style: none; margin: 0; padding: 24% 14% 18%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: clamp(0.18rem, 0.32vw, 0.26rem); } .explore-hero__tags li { font-family: var(--font-body); font-size: clamp(0.78rem, 0.92vw, 0.95rem); font-weight: 700; line-height: 1.2; color: var(--color-navy); white-space: nowrap; } /* ??? Explore ways (6 experience cards) ??? */ .explore-ways { background-color: #fff; } .explore-ways.section-padding, .explore-skills.section-padding, .explore-grow.section-padding, .explore-impact.section-padding, .explore-dream.section-padding { padding-top: var(--explore-section-pad-top); padding-bottom: var(--explore-section-pad-bottom); } #explore-content > .explore-ways:first-child { margin-top: calc(-1 * clamp(0.25rem, 0.85vw, 0.75rem)); } @media (max-width: 991px) { #explore-content > .explore-ways:first-child { margin-top: 0; } } .explore-ways__title, .explore-skills__title { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.45rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.35rem, 2.8vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--color-navy); text-align: center; margin: 0 0 clamp(0.65rem, 1.2vw, 1rem); } .explore-ways__title { margin-top: 20px; } .explore-ways__title-icon { flex-shrink: 0; color: var(--color-pink); } .explore-ways__grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); align-items: stretch; gap: clamp(0.65rem, 1.2vw, 1rem); } .explore-way { min-width: 0; min-height: 100%; display: flex; flex-direction: column; } .explore-way__head { display: flex; align-items: center; flex-shrink: 0; gap: clamp(0.4rem, 0.65vw, 0.55rem); width: 100%; height: var(--explore-way-head-min-h); margin-bottom: clamp(0.5rem, 0.9vw, 0.75rem); padding-inline: 0.1rem; } .explore-way__icon-wrap { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: clamp(40px, 3.6vw, 48px); height: clamp(40px, 3.6vw, 48px); background-color: #fff; line-height: 0; } .explore-way__icon { display: block; width: 100%; height: 100%; object-fit: contain; filter: var(--home-section-icon-filter); mix-blend-mode: multiply; } .explore-way__icon-wrap--boost { width: clamp(44px, 4vw, 52px); height: clamp(44px, 4vw, 52px); } .explore-way__icon-wrap--boost .explore-way__icon { transform: scale(1.28); } .explore-way__title { flex: 1 1 auto; min-width: 0; font-family: var(--font-heading); font-weight: 700; font-size: clamp(0.88rem, 0.95vw, 1rem); line-height: 1.2; color: var(--color-navy); margin: 0; } .explore-way-card { display: flex; flex: 1 1 auto; flex-direction: column; width: 100%; min-height: 0; align-self: stretch; background-color: #fff; border-radius: var(--experience-card-radius); padding: clamp(0.65rem, 1vw, 0.85rem); } .explore-way-card__photo { display: block; flex-shrink: 0; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--experience-photo-radius); margin-bottom: clamp(0.55rem, 0.9vw, 0.75rem); } .explore-way-card > .lazy-img-wrap--cover { margin-bottom: clamp(0.55rem, 0.9vw, 0.75rem); } .explore-way-card > .lazy-img-wrap--cover .explore-way-card__photo { aspect-ratio: auto; border-radius: 0; margin-bottom: 0; } .explore-way-card__text { flex: 1 1 auto; font-family: var(--font-body); font-size: clamp(0.98rem, 1.05vw, 1.08rem); line-height: 1.62; color: var(--color-navy); margin: 0; min-height: calc(1.62em * var(--explore-way-text-lines)); } /* ??? Explore skills (9 icon grid) ??? */ .explore-skills { background-color: #fff; } .explore-skills__title-icon { flex-shrink: 0; color: var(--color-yellow); } .explore-skills__grid { display: flex; align-items: stretch; } .explore-skill { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; align-self: stretch; height: 100%; text-align: center; gap: clamp(0.4rem, 0.75vw, 0.55rem); padding: 0 clamp(0.25rem, 0.55vw, 0.45rem); } .explore-skill:not(:first-child) { border-left: 1px solid var(--home-different-divider); } .explore-skill__icon { display: block; width: clamp(48px, 4.5vw, 58px); height: clamp(48px, 4.5vw, 58px); object-fit: contain; filter: var(--home-section-icon-filter); mix-blend-mode: multiply; } .explore-skill__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(0.88rem, 0.98vw, 1rem); line-height: 1.25; color: var(--color-navy); margin: 0; } .explore-skill__text { flex: 1 1 auto; font-family: var(--font-body); font-size: clamp(0.72rem, 0.82vw, 0.84rem); line-height: 1.4; color: var(--color-navy); margin: 0; max-width: 12rem; min-height: calc(1.4em * var(--explore-skill-text-min-lines)); } /* ??? Explore grow (experiences grow with children) ??? */ .explore-grow { background-color: #fff; } .explore-grow__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.35rem, 2.8vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--color-navy); text-align: center; margin: 0 0 clamp(1rem, 2vw, 1.65rem); } .explore-grow__track { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr) auto minmax(0, 1fr); align-items: stretch; gap: clamp(0.06rem, 0.18vw, 0.14rem); } .explore-grow-stage { min-width: 0; min-height: 100%; height: 100%; display: flex; align-items: stretch; } .explore-grow-stage__card { position: relative; flex: 1 1 auto; display: flex; flex-direction: column; width: 100%; height: var(--explore-grow-card-h); min-height: var(--explore-grow-card-h); padding: var(--explore-grow-card-pad-y) var(--explore-grow-card-pad-x); overflow: visible; background: transparent; } .explore-grow-stage__card::before { content: ''; position: absolute; inset: 0; background-image: var(--explore-grow-blob); background-repeat: no-repeat; background-position: center; background-size: var(--explore-grow-blob-size); pointer-events: none; user-select: none; z-index: 0; } .explore-grow-stage--wonder { --explore-grow-blob: url('../images/explore-grow-wonder-blob.png'); } .explore-grow-stage--discover { --explore-grow-blob: url('../images/explore-grow-discover-blob.png'); } .explore-grow-stage--create { --explore-grow-blob: url('../images/explore-grow-create-blob.png'); } .explore-grow-stage--share { --explore-grow-blob: url('../images/explore-grow-share-blob.png'); } .explore-grow-stage--give { --explore-grow-blob: url('../images/explore-grow-give-blob.png'); } .explore-grow-stage__layout { position: relative; z-index: 1; flex: 1 1 auto; display: grid; grid-template-columns: minmax(0, 40%) minmax(0, 1fr); align-items: center; gap: clamp(0.15rem, 0.4vw, 0.35rem); height: 100%; min-height: var(--explore-grow-layout-min-h); } .explore-grow-stage__photo { width: 100%; max-width: var(--explore-grow-photo-max); max-height: calc(var(--explore-grow-card-h) - 0.5rem); height: auto; object-fit: contain; object-position: center center; justify-self: center; align-self: center; margin-inline: auto; background: transparent; } .explore-grow-stage__layout > .lazy-img-wrap { justify-self: center; align-self: center; width: 100%; max-width: var(--explore-grow-photo-max); } .explore-grow-stage__layout > .lazy-img-wrap .explore-grow-stage__photo { justify-self: auto; align-self: auto; max-height: calc(var(--explore-grow-card-h) - 0.5rem); } .explore-grow-stage__body { min-width: 0; padding: clamp(0.15rem, 0.35vw, 0.35rem) clamp(0.1rem, 0.3vw, 0.25rem) clamp(0.15rem, 0.35vw, 0.35rem) 0; } .explore-grow-stage__head { display: flex; align-items: center; gap: clamp(0.25rem, 0.45vw, 0.4rem); margin: 0 0 clamp(0.2rem, 0.4vw, 0.35rem); } .explore-grow-stage__icon-wrap { display: flex; align-items: center; justify-content: center; flex-shrink: 0; width: var(--explore-grow-icon-size); height: var(--explore-grow-icon-size); line-height: 0; background: transparent; } .explore-grow-stage__icon, .explore-grow-stage__icon-wrap .explore-grow-stage__icon, .explore-grow-stage__head .explore-grow-stage__icon { display: block; width: var(--explore-grow-icon-size); height: var(--explore-grow-icon-size); object-fit: contain; flex-shrink: 0; } .explore-grow-stage__label { font-family: var(--font-body); font-weight: 700; font-size: clamp(0.92rem, 1vw, 1.05rem); line-height: 1.15; margin: 0; } .explore-grow-stage--wonder .explore-grow-stage__label { color: var(--color-green); } .explore-grow-stage--discover .explore-grow-stage__label { color: var(--color-orange); } .explore-grow-stage--create .explore-grow-stage__label { color: var(--color-pink); } .explore-grow-stage--share .explore-grow-stage__label { color: var(--color-plane); } .explore-grow-stage--give .explore-grow-stage__label { color: var(--color-cyan); } .explore-grow-stage__quote { font-family: var(--font-heading); font-weight: 700; font-size: clamp(0.84rem, 0.96vw, 1rem); line-height: 1.3; color: var(--color-navy); margin: 0 0 0.22rem; min-height: calc(1.3em * var(--explore-grow-quote-lines)); } .explore-grow-stage__text { font-family: var(--font-body); font-size: clamp(0.74rem, 0.82vw, 0.84rem); line-height: 1.38; color: rgba(0, 27, 102, 0.88); margin: 0; max-width: 13rem; } .explore-grow__arrow { flex: 0 0 auto; align-self: center; display: flex; align-items: center; justify-content: center; width: var(--explore-grow-arrow-width); line-height: 0; pointer-events: none; user-select: none; } .explore-grow__arrow svg { display: block; width: 100%; height: auto; } .explore-grow__arrow--green { color: var(--color-green); } .explore-grow__arrow--orange { color: var(--color-orange); } .explore-grow__arrow--pink { color: var(--color-pink); } .explore-grow__arrow--purple { color: var(--color-plane); } .explore-grow__arrow--blue { color: var(--color-cyan); } /* ??? Explore impact (Real Ideas projects) ??? */ .explore-impact { background-color: #fff; } .explore-impact__title { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.45rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.35rem, 2.8vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--color-navy); text-align: center; margin: 0 0 clamp(0.85rem, 1.6vw, 1.25rem); } .explore-impact__title-icon { flex-shrink: 0; color: var(--color-pink); } .explore-impact__track { display: flex; align-items: stretch; gap: clamp(0.55rem, 1vw, 0.85rem); } .explore-impact-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; background-color: #fff; border-radius: var(--experience-card-radius); padding: clamp(0.65rem, 1vw, 0.85rem); box-shadow: var(--card-shadow); } .explore-impact-card__photo { display: block; width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--experience-photo-radius); margin-bottom: clamp(0.65rem, 1vw, 0.85rem); } .explore-impact-card > .lazy-img-wrap--cover { margin-bottom: clamp(0.65rem, 1vw, 0.85rem); } .explore-impact-card > .lazy-img-wrap--cover .explore-impact-card__photo { aspect-ratio: auto; border-radius: 0; margin-bottom: 0; } .explore-impact-card__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(0.88rem, 0.96vw, 1rem); line-height: 1.25; color: var(--color-navy); margin: 0 0 0.35rem; } .explore-impact-card__text { flex: 1 1 auto; font-family: var(--font-body); font-size: clamp(0.74rem, 0.82vw, 0.84rem); line-height: 1.45; color: var(--color-navy); margin: 0; min-height: calc(1.45em * var(--explore-impact-text-lines)); } .explore-impact-quote { flex: 1.2 1 0; min-width: 0; align-self: stretch; position: relative; display: flex; align-items: center; justify-content: center; min-height: var(--explore-impact-quote-min-h); padding: clamp(0.35rem, 0.75vw, 0.65rem) clamp(0.35rem, 0.7vw, 0.55rem); overflow: hidden; box-sizing: border-box; } .explore-impact-quote__blob { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center center; pointer-events: none; user-select: none; } .explore-impact-quote__text { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; width: min(100%, var(--explore-impact-quote-text-max)); max-width: 100%; margin-inline: auto; padding: clamp(0.95rem, 1.4vw, 1.25rem) clamp(1rem, 1.6vw, 1.4rem); text-align: center; box-sizing: border-box; } .explore-impact-quote__stanza { font-family: var(--font-body); font-weight: 700; font-size: clamp(0.8rem, 0.9vw, 0.95rem); line-height: 1.4; color: var(--color-navy); margin: 0; max-width: 100%; } .explore-impact-quote__stanza + .explore-impact-quote__stanza { margin-top: var(--explore-impact-quote-stanza-gap); } /* ??? Explore dream CTA banner ??? */ .explore-dream { background-color: #fff; } .explore-dream__card { background-color: var(--explore-dream-bg); border-radius: var(--explore-dream-radius); padding: var(--explore-dream-pad); } .explore-dream__grid { display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.92fr) minmax(0, 1.05fr) minmax(0, 0.72fr) minmax(0, 1fr); align-items: center; gap: clamp(0.65rem, 1.15vw, 1.1rem); } .explore-dream__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.12rem, 1.75vw, 1.62rem); line-height: 1.22; letter-spacing: -0.02em; color: var(--color-navy); margin: 0; } .explore-dream__accent { color: var(--color-pink); } .explore-dream__photo-wrap, .explore-dream__jar-wrap { display: flex; align-items: center; justify-content: center; min-width: 0; } .explore-dream__photo { display: block; width: 100%; max-height: var(--explore-dream-photo-max-h); height: auto; object-fit: contain; } .explore-dream__jar { display: block; width: 100%; max-height: var(--explore-dream-jar-max-h); height: auto; object-fit: contain; } .explore-dream__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(0.28rem, 0.45vw, 0.38rem); } .explore-dream__list li { display: flex; align-items: center; gap: 0.42rem; font-family: var(--font-body); font-size: clamp(0.72rem, 0.8vw, 0.82rem); line-height: 1.35; color: var(--color-navy); } .explore-dream__check { display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; width: clamp(18px, 1.65vw, 22px); height: clamp(18px, 1.65vw, 22px); border-radius: 50%; background-color: var(--color-pink); color: #fff; } .explore-dream__actions { display: flex; flex-direction: column; align-items: stretch; gap: clamp(0.55rem, 0.85vw, 0.7rem); min-width: 0; } .explore-dream__actions .btn { width: 100%; white-space: normal; text-align: center; font-size: clamp(0.78rem, 0.84vw, 0.92rem); padding: clamp(0.65rem, 0.95vw, 0.78rem) clamp(0.85rem, 1.1vw, 1.1rem); } .explore-dream__btn-outline { background-color: #fff; color: var(--color-navy); border-color: var(--color-pink); } .explore-dream__btn-outline:hover { background-color: #fff; color: var(--color-navy); border-color: var(--color-pink); box-shadow: inset 0 0 0 1px var(--color-pink); } /* Yellow brush underline under "Every Child" */ .heading-underline { position: relative; display: inline-block; z-index: 0; } .heading-underline__img { position: absolute; left: var(--heading-underline-left); bottom: var(--heading-underline-bottom); width: var(--heading-underline-width); height: var(--heading-underline-height); max-height: 11px; min-height: 7px; object-fit: fill; pointer-events: none; user-select: none; z-index: -1; } /* ??? Contact hero content ??? */ .contact-hero__title { font-family: var(--font-heading); font-weight: 700; font-size: var(--contact-hero-title-size); line-height: 1; letter-spacing: -0.02em; margin: 0 0 0.95rem; color: inherit; } .contact-hero__title-row { display: inline-flex; flex-wrap: nowrap; align-items: flex-start; gap: 0.45rem 0.6rem; } .contact-hero__contact-word { color: var(--color-pink); } .contact-hero__us-word { color: var(--color-navy); } .contact-hero__star { width: var(--contact-hero-star-size); height: var(--contact-hero-star-size); flex-shrink: 0; margin-top: 0.08em; animation: rise-in 0.7s ease 0.15s both; } .contact-hero__body { position: relative; max-width: var(--contact-hero-copy-max-w); animation: rise-in 0.7s ease 0.22s both; } .contact-hero__copy { font-family: var(--font-body); font-size: clamp(0.98rem, 1.08vw, 1.125rem); font-weight: 400; line-height: 1.62; color: var(--color-navy); margin: 0; } .contact-hero__heart { position: absolute; top: 50%; right: calc(var(--contact-hero-heart-offset-x) * -1); transform: translate(100%, -50%); width: var(--contact-hero-heart-size); height: var(--contact-hero-heart-size); pointer-events: none; } .contact-hero__accent { font-weight: 600; } .contact-hero__accent--purple { color: var(--color-plane); } .contact-hero__accent--pink { color: var(--color-pink); } /* ??? Contact form section ??? */ .contact-form { background-color: #fff; } .contact-form__inner { padding-top: var(--contact-form-pad-y); padding-bottom: 0; } .contact-form__wrap { display: grid; grid-template-columns: minmax(0, var(--contact-form-aside-col)) minmax(0, var(--contact-form-main-col)); align-items: stretch; gap: clamp(0.65rem, 1.1vw, 0.95rem); padding: var(--contact-form-wrap-pad); background-color: transparent; border: none; border-radius: 0; overflow: visible; } .contact-form__aside { position: relative; display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; min-width: 0; min-height: 100%; padding: clamp(1.15rem, 1.85vw, 1.55rem) clamp(0.85rem, 1.35vw, 1.15rem) 0; background-color: var(--contact-form-aside-bg); border-radius: var(--contact-form-radius); overflow: hidden; } .contact-form__aside-plane { display: block; align-self: center; width: 100%; max-width: var(--contact-form-aside-plane-max); height: auto; object-fit: contain; flex-shrink: 0; pointer-events: none; user-select: none; } .contact-form__aside-plant { display: block; align-self: center; width: 100%; max-width: var(--contact-form-aside-plant-max); height: auto; object-fit: contain; flex-shrink: 0; margin-top: auto; pointer-events: none; user-select: none; } .contact-form__aside-copy { position: relative; z-index: 1; display: flex; flex-direction: column; justify-content: center; flex: 1 1 auto; padding: clamp(0.65rem, 1.1vw, 0.95rem) clamp(0.55rem, 0.95vw, 0.85rem) clamp(0.85rem, 1.25vw, 1.1rem); text-align: center; animation: rise-in 0.65s ease both; } .contact-form__aside-title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.5rem, 2.15vw, 1.95rem); line-height: 1.22; letter-spacing: -0.02em; color: var(--color-navy); margin: 0 0 1.05rem; } .contact-form__aside-text { font-family: var(--font-body); font-size: clamp(0.9rem, 0.98vw, 1rem); font-weight: 400; line-height: 1.62; color: var(--color-navy); margin: 0; max-width: none; text-align: left; } .contact-form__main { position: relative; min-width: 0; padding: clamp(1.35rem, 2.1vw, 1.95rem) clamp(1.25rem, 2vw, 1.75rem); border: 1px solid var(--contact-form-border); border-radius: var(--contact-form-radius); background-color: #fff; animation: rise-in 0.7s ease 0.08s both; overflow: visible; } .contact-form__title { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.38rem, 1.95vw, 1.78rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--color-navy); margin: 0 0 1.15rem; } .contact-form__title-heart { flex-shrink: 0; margin-top: 0.1em; } .contact-form__form { display: flex; flex-direction: column; gap: clamp(0.7rem, 1.15vw, 0.9rem); } .contact-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.7rem, 1.15vw, 0.9rem); } .contact-field { display: block; } .contact-field__box { display: flex; align-items: center; gap: 0.5rem; min-height: var(--contact-form-input-height); padding: 0 1.05rem; border: 1px solid var(--contact-form-input-border); border-radius: var(--contact-form-input-radius); background-color: #fff; transition: border-color var(--ease-soft), box-shadow var(--ease-soft); } .contact-field__box:focus-within { border-color: var(--color-pink); box-shadow: 0 0 0 3px rgba(238, 29, 120, 0.08); } .contact-field__box--area { align-items: flex-start; min-height: var(--contact-form-textarea-min-h); padding-top: 0.9rem; padding-bottom: 0.9rem; } .contact-field__icon { flex-shrink: 0; color: var(--color-plane); opacity: 0.92; } .contact-field__icon--top { margin-top: 0.15rem; } .contact-field__input { flex: 1 1 auto; min-width: 0; border: none; background: transparent; font-family: var(--font-body); font-size: clamp(0.86rem, 0.94vw, 0.96rem); font-weight: 400; line-height: 1.4; color: var(--color-navy); padding: 0; outline: none; } .contact-field__input::placeholder { color: rgba(0, 27, 102, 0.68); } .contact-field__textarea { resize: vertical; min-height: calc(var(--contact-form-textarea-min-h) - 1.8rem); padding-top: 0.05rem; } .contact-form__privacy { display: flex; align-items: center; gap: 0.7rem; padding: clamp(0.8rem, 1.3vw, 1rem) clamp(0.9rem, 1.4vw, 1.1rem); border-radius: var(--contact-form-input-radius); background-color: var(--contact-form-privacy-bg); } .contact-form__privacy-icon { flex-shrink: 0; display: block; width: 28px; height: 28px; align-self: center; } .contact-form__privacy-text { font-family: var(--font-body); font-size: clamp(0.82rem, 0.9vw, 0.93rem); line-height: 1.5; color: var(--color-navy); margin: 0; } .contact-form__privacy-text strong { font-weight: 600; } .contact-form__submit { width: 100%; margin-top: 0.1rem; font-size: clamp(0.94rem, 1vw, 1.02rem); font-weight: 560; padding-top: 0.9rem; padding-bottom: 0.9rem; } .contact-form__submit .btn__icon, .contact-form__submit-plane { transform: rotate(-8deg); } /* ??? Contact CTA banner ??? */ .contact-cta { background-color: #fff; } .contact-cta__inner { padding-top: 0; padding-bottom: 0; } .contact-cta__card { display: flex; align-items: center; gap: clamp(1rem, 2.2vw, 2rem); padding: clamp(1.15rem, 2.2vw, 1.75rem) clamp(1.35rem, 2.8vw, 2.5rem); background-color: var(--contact-cta-bg); border-radius: var(--contact-cta-radius); animation: rise-in 0.65s ease both; } .contact-cta__door { flex: 0 0 auto; width: var(--contact-cta-door-width); max-width: none; height: auto; object-fit: contain; } .contact-cta__content { flex: 1 1 auto; display: flex; align-items: center; gap: clamp(0.55rem, 1.2vw, 1rem); min-width: 0; } .contact-cta__text { flex: 0 1 auto; font-family: var(--font-heading); font-weight: 700; font-size: var(--contact-cta-text-size); line-height: 1.38; letter-spacing: -0.01em; color: var(--color-navy); margin: 0; max-width: var(--contact-cta-text-max-w); } .contact-cta__deco { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; flex-shrink: 0; padding-top: 0.15rem; } .contact-cta__heart, .contact-cta__star { flex-shrink: 0; } .contact-cta__btn { flex: 0 0 auto; margin-left: auto; white-space: nowrap; } /* ??? Creative Makers (program page) ??? */ .creative-makers-hero { background-color: #fff; overflow: visible; } .creative-makers-hero__wrap { position: relative; } .creative-makers-breadcrumbs { display: flex; justify-content: flex-start; width: 100%; margin-bottom: clamp(0.1rem, 0.25vw, 0.2rem); } .creative-makers-breadcrumbs__list { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-start; gap: 0.35rem 0.5rem; list-style: none; margin: 0; padding: 0; font-family: var(--font-body); font-size: clamp(0.78rem, 0.86vw, 0.88rem); color: rgba(0, 27, 102, 0.62); } .creative-makers-breadcrumbs__list a { color: inherit; text-decoration: none; transition: color var(--ease-soft); } .creative-makers-breadcrumbs__list a:hover { color: var(--color-pink); } .creative-makers-breadcrumbs__list li:not(:last-child)::after { content: ">"; margin-left: 0.5rem; color: rgba(0, 27, 102, 0.38); } .creative-makers-breadcrumbs__list li[aria-current="page"] { color: var(--color-navy); font-weight: 500; } .creative-makers-hero:not(.young-ideas-lab-hero):not(.create-for-cause-hero):not(.community-adventures-hero) .creative-makers-breadcrumbs__list li[aria-current="page"] { color: var(--color-pink); font-weight: 600; } .young-ideas-lab-page .creative-makers-breadcrumbs__list li[aria-current="page"] { color: var(--color-purple); font-weight: 600; } .create-for-cause-page .creative-makers-breadcrumbs__list li[aria-current="page"] { color: var(--color-green); font-weight: 600; } .community-adventures-page .creative-makers-breadcrumbs__list li[aria-current="page"] { color: var(--color-blue-accent); font-weight: 600; } .creative-makers-hero__inner { display: grid; grid-template-columns: minmax(0, var(--creative-makers-hero-content-col)) minmax(0, var(--creative-makers-hero-media-col)); align-items: center; gap: clamp(0.35rem, 0.75vw, 0.85rem); } .creative-makers-hero__content { width: 100%; max-width: var(--creative-makers-hero-copy-max-w); } .creative-makers-hero__title { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(2.35rem, 4.2vw, 3.35rem); line-height: 1.05; letter-spacing: -0.02em; color: var(--color-pink); margin: 0 0 0.55rem; } .creative-makers-hero__title-heart { width: clamp(22px, 2.2vw, 30px); height: auto; object-fit: contain; } .creative-makers-hero__tagline { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.05rem, 1.55vw, 1.35rem); line-height: 1.3; color: var(--color-navy); margin: 0 0 0.85rem; } .creative-makers-hero__text { font-family: var(--font-body); font-size: clamp(0.92rem, 1vw, 1.02rem); line-height: 1.62; color: var(--color-navy); margin: 0 0 1.15rem; max-width: none; } .creative-makers-hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: clamp(0.75rem, 1.4vw, 1.25rem); } .creative-makers-hero__back { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-body); font-size: clamp(0.88rem, 0.96vw, 0.98rem); font-weight: 500; color: var(--color-pink); text-decoration: none; transition: opacity var(--ease-soft); } .creative-makers-hero__back:hover { opacity: 0.82; } .creative-makers-hero__media { position: relative; min-width: 0; display: flex; align-items: center; justify-content: flex-end; } .creative-makers-hero__banner { display: block; width: 100%; max-width: 100%; height: auto; max-height: min(430px, 58vh); object-fit: contain; object-position: center right; } @media (min-width: 769px) { .creative-makers-page .page-hero.creative-makers-hero .page-hero__inner { display: grid; grid-template-columns: minmax(0, var(--page-hero-balanced-content-col)) minmax(0, var(--page-hero-balanced-media-col)); align-items: center; justify-content: space-between; gap: var(--home-hero-col-gap); min-height: inherit; } .creative-makers-page .page-hero.creative-makers-hero .page-hero__content { width: 100%; max-width: none; padding-top: 0; padding-right: 0; grid-column: 1; grid-row: 1; justify-self: start; margin-inline: 0; } .creative-makers-page .page-hero.creative-makers-hero .hero-image-wrap, .creative-makers-page .page-hero.creative-makers-hero .creative-makers-hero__media { grid-column: 2; grid-row: 1; flex: none; display: flex; align-items: center; justify-content: flex-end; position: relative; min-width: 0; } .creative-makers-page .page-hero.creative-makers-hero .creative-makers-hero__banner { width: 100%; max-width: 100%; height: auto; max-height: min(430px, 60vh); min-height: 0; object-fit: contain; object-position: center; filter: brightness(1.1); background-color: transparent; } .creative-makers-page .page-hero.creative-makers-hero .page-hero__actions { flex-wrap: nowrap; gap: 0.75rem 0.85rem; } .young-ideas-lab-page .page-hero.young-ideas-lab-hero .page-hero__inner { display: grid; grid-template-columns: minmax(0, var(--page-hero-balanced-content-col)) minmax(0, var(--page-hero-balanced-media-col)); align-items: center; justify-content: space-between; gap: var(--home-hero-col-gap); min-height: inherit; } .young-ideas-lab-page .page-hero.young-ideas-lab-hero .page-hero__content { width: 100%; max-width: none; padding-top: 0; padding-right: 0; grid-column: 1; grid-row: 1; justify-self: start; margin-inline: 0; } .young-ideas-lab-page .page-hero.young-ideas-lab-hero .hero-image-wrap, .young-ideas-lab-page .page-hero.young-ideas-lab-hero .creative-makers-hero__media { grid-column: 2; grid-row: 1; flex: none; display: flex; align-items: center; justify-content: flex-end; position: relative; min-width: 0; } .young-ideas-lab-page .page-hero.young-ideas-lab-hero .creative-makers-hero__banner, .young-ideas-lab-page .page-hero.young-ideas-lab-hero picture img.creative-makers-hero__banner { width: 100%; max-width: 100%; height: auto; max-height: min(430px, 60vh); min-height: 0; object-fit: contain; object-position: center; filter: brightness(1.1); background-color: transparent; } .young-ideas-lab-page .page-hero.young-ideas-lab-hero .page-hero__actions { flex-wrap: nowrap; gap: 0.75rem 0.85rem; } .create-for-cause-page .page-hero.create-for-cause-hero .page-hero__inner { display: grid; grid-template-columns: minmax(0, var(--page-hero-balanced-content-col)) minmax(0, var(--page-hero-balanced-media-col)); align-items: center; justify-content: space-between; gap: var(--home-hero-col-gap); min-height: inherit; } .create-for-cause-page .page-hero.create-for-cause-hero .page-hero__content { width: 100%; max-width: none; padding-top: 0; padding-right: 0; grid-column: 1; grid-row: 1; justify-self: start; margin-inline: 0; } .create-for-cause-page .page-hero.create-for-cause-hero .hero-image-wrap, .create-for-cause-page .page-hero.create-for-cause-hero .creative-makers-hero__media { grid-column: 2; grid-row: 1; flex: none; display: flex; align-items: center; justify-content: flex-end; position: relative; min-width: 0; } .create-for-cause-page .page-hero.create-for-cause-hero .creative-makers-hero__banner, .create-for-cause-page .page-hero.create-for-cause-hero picture img.creative-makers-hero__banner { width: 100%; max-width: 100%; height: auto; max-height: min(430px, 60vh); min-height: 0; object-fit: contain; object-position: center; filter: brightness(1.1); background-color: transparent; } .create-for-cause-page .page-hero.create-for-cause-hero .page-hero__actions { flex-wrap: nowrap; gap: 0.75rem 0.85rem; } .community-adventures-page .page-hero.community-adventures-hero .page-hero__inner { display: grid; grid-template-columns: minmax(0, var(--page-hero-balanced-content-col)) minmax(0, var(--page-hero-balanced-media-col)); align-items: center; justify-content: space-between; gap: var(--home-hero-col-gap); min-height: inherit; } .community-adventures-page .page-hero.community-adventures-hero .page-hero__content { width: 100%; max-width: none; padding-top: 0; padding-right: 0; grid-column: 1; grid-row: 1; justify-self: start; margin-inline: 0; } .community-adventures-page .page-hero.community-adventures-hero .hero-image-wrap, .community-adventures-page .page-hero.community-adventures-hero .creative-makers-hero__media { grid-column: 2; grid-row: 1; flex: none; display: flex; align-items: center; justify-content: flex-end; position: relative; min-width: 0; } .community-adventures-page .page-hero.community-adventures-hero .creative-makers-hero__banner, .community-adventures-page .page-hero.community-adventures-hero picture img.creative-makers-hero__banner { width: 100%; max-width: 100%; height: auto; max-height: min(430px, 60vh); min-height: 0; object-fit: contain; object-position: center; filter: brightness(1.1); background-color: transparent; } .community-adventures-page .page-hero.community-adventures-hero .page-hero__actions { flex-wrap: nowrap; gap: 0.75rem 0.85rem; } } .creative-makers-hero__deco { position: absolute; pointer-events: none; user-select: none; z-index: 1; } .creative-makers-hero__deco--star { left: clamp(0.5rem, 2vw, 2rem); top: clamp(4.1rem, 9.5vw, 5.35rem); width: clamp(24px, 2.4vw, 34px); height: auto; } .creative-makers-hero__deco--plane { left: clamp(0.25rem, 1.2vw, 1rem); bottom: clamp(-0.5rem, -0.8vw, -0.15rem); width: clamp(90px, 10vw, 130px); height: auto; } .creative-makers-explore { background-color: #fff; } .creative-makers-explore__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--color-navy); text-align: center; margin: 0 0 clamp(0.85rem, 1.5vw, 1.15rem); } .creative-makers-explore__grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(0.65rem, 1.1vw, 0.95rem); } .creative-makers-activity { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: clamp(0.55rem, 0.95vw, 0.75rem); min-width: 0; padding: clamp(0.95rem, 1.45vw, 1.25rem) clamp(0.65rem, 1vw, 0.85rem); background-color: var(--creative-makers-activity-paint-bg); border-radius: var(--experience-card-radius); box-shadow: none; text-align: center; animation: rise-in 0.65s ease both; } .creative-makers-activity--paint { background-color: var(--creative-makers-activity-paint-bg); } .creative-makers-activity--crafts { background-color: var(--creative-makers-activity-crafts-bg); } .creative-makers-activity--media { background-color: var(--creative-makers-activity-media-bg); } .creative-makers-activity--design { background-color: var(--creative-makers-activity-design-bg); } .creative-makers-activity--upcycle { background-color: var(--creative-makers-activity-upcycle-bg); } .creative-makers-activity__icon { width: var(--creative-makers-activity-icon-size); height: var(--creative-makers-activity-icon-size); object-fit: contain; background: transparent; } .creative-makers-activity__title { font-family: var(--font-body); font-weight: 560; font-size: clamp(0.82rem, 0.9vw, 0.94rem); line-height: 1.35; color: var(--color-navy); margin: 0; } .creative-makers-info { background-color: #fff; } .creative-makers-info__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.75rem, 1.35vw, 1.15rem); } .creative-makers-info-card { position: relative; min-width: 0; padding: clamp(1.1rem, 1.85vw, 1.55rem) clamp(0.95rem, 1.45vw, 1.25rem); background-color: var(--creative-makers-info-skills-bg); border-radius: var(--experience-card-radius); animation: rise-in 0.65s ease both; } .creative-makers-info-card--skills { background-color: var(--creative-makers-info-skills-bg); } .creative-makers-info-card--grow { background-color: var(--creative-makers-info-grow-bg); } .creative-makers-info-card--impact { background-color: var(--creative-makers-info-impact-bg); } .creative-makers-info-card__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1rem, 1.35vw, 1.22rem); line-height: 1.28; letter-spacing: -0.02em; color: var(--color-navy); margin: 0 0 0.95rem; } .creative-makers-info-card__title--pink { color: var(--color-pink); } .creative-makers-info-card__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(0.55rem, 0.9vw, 0.72rem); } .creative-makers-info-card__list li { display: flex; align-items: flex-start; gap: 0.55rem; font-family: var(--font-body); font-size: clamp(0.84rem, 0.92vw, 0.94rem); line-height: 1.45; color: var(--color-navy); } .creative-makers-info-card__check { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-top: 0.12em; border-radius: 50%; background-color: var(--color-pink-soft); color: var(--color-pink); } .creative-makers-info-card__text { font-family: var(--font-body); font-size: clamp(0.84rem, 0.92vw, 0.94rem); line-height: 1.58; color: var(--color-navy); margin: 0; } .creative-makers-info-card__deco { position: absolute; pointer-events: none; user-select: none; } .creative-makers-info-card__deco--star { right: clamp(0.65rem, 1vw, 0.95rem); bottom: clamp(0.55rem, 0.9vw, 0.75rem); width: clamp(22px, 2vw, 28px); height: auto; } .creative-makers-info-card__deco--heart { right: clamp(0.65rem, 1vw, 0.95rem); bottom: clamp(0.55rem, 0.9vw, 0.75rem); width: clamp(20px, 1.85vw, 26px); height: auto; background: transparent; } .creative-makers-info-card__deco--plant { right: clamp(0.65rem, 1vw, 0.95rem); bottom: clamp(0.55rem, 0.9vw, 0.75rem); width: clamp(28px, 2.6vw, 38px); height: auto; } .creative-makers-parents { background-color: #fff; } .creative-makers-parents__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.35rem, 2.4vw, 1.85rem); line-height: 1.2; letter-spacing: -0.02em; color: var(--color-navy); text-align: left; margin: 0 0 clamp(0.85rem, 1.5vw, 1.15rem); } .creative-makers-parents__accordion { display: flex; flex-direction: column; gap: clamp(0.65rem, 1.1vw, 0.95rem); } .creative-makers-faq__input { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .creative-makers-parents__tablist { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.55rem, 1vw, 0.85rem); } .creative-makers-faq__tab { display: flex; align-items: center; justify-content: space-between; gap: 0.65rem; min-height: clamp(3.1rem, 4.8vw, 3.65rem); padding: clamp(0.75rem, 1.2vw, 0.95rem) clamp(0.85rem, 1.25vw, 1.05rem); background-color: #fff; border: 1px solid var(--contact-form-border); border-radius: var(--contact-form-input-radius); cursor: pointer; font-family: var(--font-body); font-weight: 560; font-size: clamp(0.82rem, 0.92vw, 0.96rem); line-height: 1.32; color: var(--color-navy); transition: border-color var(--ease-soft), box-shadow var(--ease-soft); } .creative-makers-faq__tab::after { content: ""; flex-shrink: 0; width: 9px; height: 9px; border-right: 2px solid var(--color-navy); border-bottom: 2px solid var(--color-navy); transform: rotate(45deg); margin-top: -3px; } .creative-makers-faq__input#creative-makers-faq-expect:checked ~ .creative-makers-parents__tablist label[for="creative-makers-faq-expect"], .creative-makers-faq__input#creative-makers-faq-materials:checked ~ .creative-makers-parents__tablist label[for="creative-makers-faq-materials"], .creative-makers-faq__input#creative-makers-faq-safety:checked ~ .creative-makers-parents__tablist label[for="creative-makers-faq-safety"], .creative-makers-faq__input#creative-makers-faq-program:checked ~ .creative-makers-parents__tablist label[for="creative-makers-faq-program"], .creative-makers-faq__input#young-ideas-lab-faq-expect:checked ~ .creative-makers-parents__tablist label[for="young-ideas-lab-faq-expect"], .creative-makers-faq__input#young-ideas-lab-faq-materials:checked ~ .creative-makers-parents__tablist label[for="young-ideas-lab-faq-materials"], .creative-makers-faq__input#young-ideas-lab-faq-safety:checked ~ .creative-makers-parents__tablist label[for="young-ideas-lab-faq-safety"], .creative-makers-faq__input#young-ideas-lab-faq-program:checked ~ .creative-makers-parents__tablist label[for="young-ideas-lab-faq-program"] { border-color: rgba(238, 29, 120, 0.35); box-shadow: 0 0 0 2px rgba(238, 29, 120, 0.08); } .creative-makers-parents__panels { position: relative; } .creative-makers-faq__panel { display: none; padding: clamp(0.95rem, 1.45vw, 1.15rem) clamp(1rem, 1.55vw, 1.25rem); background-color: #fff; border: 1px solid var(--contact-form-border); border-radius: var(--contact-form-input-radius); animation: rise-in 0.35s ease both; } .creative-makers-faq__panel p { font-family: var(--font-body); font-size: clamp(0.86rem, 0.94vw, 0.96rem); line-height: 1.58; color: rgba(0, 27, 102, 0.88); margin: 0; } #creative-makers-faq-expect:checked ~ .creative-makers-parents__panels .creative-makers-faq__panel--expect, #creative-makers-faq-materials:checked ~ .creative-makers-parents__panels .creative-makers-faq__panel--materials, #creative-makers-faq-safety:checked ~ .creative-makers-parents__panels .creative-makers-faq__panel--safety, #creative-makers-faq-program:checked ~ .creative-makers-parents__panels .creative-makers-faq__panel--program, #young-ideas-lab-faq-expect:checked ~ .creative-makers-parents__panels .creative-makers-faq__panel--expect, #young-ideas-lab-faq-materials:checked ~ .creative-makers-parents__panels .creative-makers-faq__panel--materials, #young-ideas-lab-faq-safety:checked ~ .creative-makers-parents__panels .creative-makers-faq__panel--safety, #young-ideas-lab-faq-program:checked ~ .creative-makers-parents__panels .creative-makers-faq__panel--program { display: block; } #create-for-cause-faq-expect:checked ~ .creative-makers-parents__panels .creative-makers-faq__panel--expect, #create-for-cause-faq-materials:checked ~ .creative-makers-parents__panels .creative-makers-faq__panel--materials, #create-for-cause-faq-safety:checked ~ .creative-makers-parents__panels .creative-makers-faq__panel--safety, #create-for-cause-faq-program:checked ~ .creative-makers-parents__panels .creative-makers-faq__panel--program, #community-adventures-faq-expect:checked ~ .creative-makers-parents__panels .creative-makers-faq__panel--expect, #community-adventures-faq-materials:checked ~ .creative-makers-parents__panels .creative-makers-faq__panel--materials, #community-adventures-faq-safety:checked ~ .creative-makers-parents__panels .creative-makers-faq__panel--safety, #community-adventures-faq-program:checked ~ .creative-makers-parents__panels .creative-makers-faq__panel--program { display: block; } .creative-makers-cta { background-color: #fff; } .creative-makers-cta__inner { padding-top: 0; padding-bottom: 0; } .creative-makers-cta__card { display: flex; align-items: center; flex-wrap: wrap; gap: clamp(0.75rem, 1.5vw, 1.25rem); padding: clamp(1rem, 1.85vw, 1.45rem) clamp(1.15rem, 2vw, 1.75rem); background: linear-gradient(90deg, #fff5f9 0%, #fff0f5 55%, #ffe8f2 100%); border-radius: var(--creative-makers-cta-radius); animation: rise-in 0.65s ease both; } .creative-makers-cta__heart { flex-shrink: 0; width: clamp(24px, 2.2vw, 30px); height: auto; object-fit: contain; } .creative-makers-cta__text { flex: 1 1 auto; min-width: min(100%, 14rem); font-family: var(--font-heading); font-weight: 700; font-size: clamp(1rem, 1.45vw, 1.22rem); line-height: 1.32; letter-spacing: -0.02em; color: var(--color-navy); margin: 0; } .creative-makers-cta__plane { flex-shrink: 0; width: clamp(72px, 8vw, 100px); height: auto; object-fit: contain; } .creative-makers-cta__btn { flex: 0 0 auto; margin-left: auto; white-space: nowrap; } /* ??? Young Ideas Lab (purple theme overrides) ??? */ .young-ideas-lab-page .creative-makers-hero__title { color: var(--color-purple); } .young-ideas-lab-page .creative-makers-hero__back { color: var(--color-purple); } .young-ideas-lab-page .creative-makers-breadcrumbs__list a:hover { color: var(--color-purple); } .young-ideas-lab-page .btn--solid { background-color: var(--color-purple); border-color: var(--color-purple); } .young-ideas-lab-page .btn--solid:hover { background-color: #6932a6; border-color: #6932a6; } .young-ideas-lab-page .creative-makers-activity--paint { background-color: var(--young-ideas-lab-activity-science-bg); } .young-ideas-lab-page .creative-makers-activity--crafts { background-color: var(--young-ideas-lab-activity-problem-bg); } .young-ideas-lab-page .creative-makers-activity--media { background-color: var(--young-ideas-lab-activity-invention-bg); } .young-ideas-lab-page .creative-makers-activity--design { background-color: var(--young-ideas-lab-activity-coding-bg); } .young-ideas-lab-page .creative-makers-activity--upcycle { background-color: var(--young-ideas-lab-activity-design-bg); } .young-ideas-lab-page .creative-makers-info-card--skills { background-color: var(--young-ideas-lab-info-skills-bg); } .young-ideas-lab-page .creative-makers-info-card--grow { background-color: var(--young-ideas-lab-info-grow-bg); } .young-ideas-lab-page .creative-makers-info-card--impact { background-color: var(--young-ideas-lab-info-impact-bg); } .young-ideas-lab-page .creative-makers-info-card__title--pink { color: var(--color-purple); } .young-ideas-lab-page .creative-makers-info-card__check { background-color: var(--color-purple-soft); color: var(--color-purple); } .young-ideas-lab-page .creative-makers-faq__input#young-ideas-lab-faq-expect:checked ~ .creative-makers-parents__tablist label[for="young-ideas-lab-faq-expect"], .young-ideas-lab-page .creative-makers-faq__input#young-ideas-lab-faq-materials:checked ~ .creative-makers-parents__tablist label[for="young-ideas-lab-faq-materials"], .young-ideas-lab-page .creative-makers-faq__input#young-ideas-lab-faq-safety:checked ~ .creative-makers-parents__tablist label[for="young-ideas-lab-faq-safety"], .young-ideas-lab-page .creative-makers-faq__input#young-ideas-lab-faq-program:checked ~ .creative-makers-parents__tablist label[for="young-ideas-lab-faq-program"] { border-color: rgba(123, 63, 189, 0.35); box-shadow: 0 0 0 2px rgba(123, 63, 189, 0.08); } .creative-makers-faq__input#create-for-cause-faq-expect:checked ~ .creative-makers-parents__tablist label[for="create-for-cause-faq-expect"], .creative-makers-faq__input#create-for-cause-faq-materials:checked ~ .creative-makers-parents__tablist label[for="create-for-cause-faq-materials"], .creative-makers-faq__input#create-for-cause-faq-safety:checked ~ .creative-makers-parents__tablist label[for="create-for-cause-faq-safety"], .creative-makers-faq__input#create-for-cause-faq-program:checked ~ .creative-makers-parents__tablist label[for="create-for-cause-faq-program"] { border-color: rgba(61, 154, 90, 0.35); box-shadow: 0 0 0 2px rgba(61, 154, 90, 0.08); } .creative-makers-faq__input#community-adventures-faq-expect:checked ~ .creative-makers-parents__tablist label[for="community-adventures-faq-expect"], .creative-makers-faq__input#community-adventures-faq-materials:checked ~ .creative-makers-parents__tablist label[for="community-adventures-faq-materials"], .creative-makers-faq__input#community-adventures-faq-safety:checked ~ .creative-makers-parents__tablist label[for="community-adventures-faq-safety"], .creative-makers-faq__input#community-adventures-faq-program:checked ~ .creative-makers-parents__tablist label[for="community-adventures-faq-program"] { border-color: rgba(43, 127, 212, 0.35); box-shadow: 0 0 0 2px rgba(43, 127, 212, 0.08); } .young-ideas-lab-page .creative-makers-cta__card { background: linear-gradient( 90deg, var(--young-ideas-lab-cta-bg-start) 0%, var(--young-ideas-lab-cta-bg-mid) 55%, var(--young-ideas-lab-cta-bg-end) 100% ); } .young-ideas-lab-page .creative-makers-cta__plane { width: clamp(110px, 12vw, 150px); } /* Young Ideas Lab hero ? mobile banner: zero top/bottom/side spacing */ @media (max-width: 767px) { #main-content > section.page-hero.young-ideas-lab-hero, .page-hero.young-ideas-lab-hero { gap: 0 !important; padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; } #main-content > section.page-hero.young-ideas-lab-hero .page-hero__inner, .page-hero.young-ideas-lab-hero .page-hero__inner { gap: 0 !important; row-gap: 0 !important; } #main-content > section.page-hero.young-ideas-lab-hero .page-hero__content, .page-hero.young-ideas-lab-hero .page-hero__content { padding-bottom: 0 !important; margin-bottom: 0 !important; } #main-content > section.page-hero.young-ideas-lab-hero .page-hero__actions, #main-content > section.page-hero.young-ideas-lab-hero .hero-ctas, .page-hero.young-ideas-lab-hero .page-hero__actions, .page-hero.young-ideas-lab-hero .hero-ctas { margin-top: 0 !important; margin-bottom: 0 !important; } #main-content > section.page-hero.young-ideas-lab-hero .creative-makers-hero__media, .page-hero.young-ideas-lab-hero .creative-makers-hero__media, .page-hero.young-ideas-lab-hero .hero-image-wrap { width: 100vw !important; max-width: 100vw !important; margin: 0 calc(50% - 50vw) !important; padding: 0 !important; } #main-content > section.page-hero.young-ideas-lab-hero .creative-makers-hero__media .lazy-img-wrap, #main-content > section.page-hero.young-ideas-lab-hero .creative-makers-hero__media picture, .page-hero.young-ideas-lab-hero .creative-makers-hero__media .lazy-img-wrap, .page-hero.young-ideas-lab-hero .creative-makers-hero__media picture { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; line-height: 0 !important; } #main-content > section.page-hero.young-ideas-lab-hero .creative-makers-hero__banner, .page-hero.young-ideas-lab-hero .creative-makers-hero__banner, .page-hero.young-ideas-lab-hero picture img { display: block !important; width: 100% !important; max-width: 100% !important; max-height: none !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; object-position: center center !important; vertical-align: top !important; } } @media (max-width: 430px) { #main-content > section.page-hero.young-ideas-lab-hero, .page-hero.young-ideas-lab-hero { gap: 0 !important; padding-bottom: 0 !important; } #main-content > section.page-hero.young-ideas-lab-hero .creative-makers-hero__media, #main-content > section.page-hero.young-ideas-lab-hero .hero-image-wrap, .page-hero.young-ideas-lab-hero .creative-makers-hero__media, .page-hero.young-ideas-lab-hero .hero-image-wrap { width: 100vw !important; max-width: 100vw !important; margin: 0 calc(50% - 50vw) !important; padding: 0 !important; } #main-content > section.page-hero.young-ideas-lab-hero .creative-makers-hero__banner, .page-hero.young-ideas-lab-hero .creative-makers-hero__banner, .page-hero.young-ideas-lab-hero picture img { max-height: none !important; margin: 0 !important; padding: 0 !important; } } /* ??? Create for a Cause (green theme overrides) ??? */ .create-for-cause-page .creative-makers-hero__title { color: var(--color-green); } .create-for-cause-page .creative-makers-hero__back, .create-for-cause-page .creative-makers-breadcrumbs__list a:hover { color: var(--color-green); } .create-for-cause-page .btn--solid { background-color: var(--color-green); border-color: var(--color-green); } .create-for-cause-page .btn--solid:hover { background-color: #358f50; border-color: #358f50; } .create-for-cause-page .creative-makers-activity__icon-box { width: 50%; } .create-for-cause-page .creative-makers-activity__icon-box .creative-makers-activity__icon { width: 100%; height: auto; display: block; object-fit: contain; } .create-for-cause-page .creative-makers-activity--paint { background-color: var(--create-for-cause-activity-kindness-bg); } .create-for-cause-page .creative-makers-activity--crafts { background-color: var(--create-for-cause-activity-donation-bg); } .create-for-cause-page .creative-makers-activity--media { background-color: var(--create-for-cause-activity-care-bg); } .create-for-cause-page .creative-makers-activity--design { background-color: var(--create-for-cause-activity-awareness-bg); } .create-for-cause-page .creative-makers-activity--upcycle { background-color: var(--create-for-cause-activity-events-bg); } .create-for-cause-page .creative-makers-info-card { padding: clamp(1.25rem, 2vw, 1.875rem) clamp(1rem, 1.5vw, 1.5rem); } .create-for-cause-page .creative-makers-info-card--skills { background-color: var(--create-for-cause-info-skills-bg); } .create-for-cause-page .creative-makers-info-card--grow { background-color: var(--create-for-cause-info-grow-bg); } .create-for-cause-page .creative-makers-info-card--impact { background-color: var(--create-for-cause-info-impact-bg); } .create-for-cause-page .creative-makers-info-card__title--pink { color: var(--color-green); } .create-for-cause-page .creative-makers-info-card__check { background-color: var(--color-green); color: #fff; } .create-for-cause-page .creative-makers-info-card__deco-box { position: absolute; right: clamp(0.65rem, 1vw, 0.95rem); bottom: clamp(0.55rem, 0.9vw, 0.75rem); width: var(--create-for-cause-info-deco-size); pointer-events: none; user-select: none; } .create-for-cause-page .creative-makers-info-card__deco-box--plant { width: var(--create-for-cause-info-deco-plant-size); } .create-for-cause-page .creative-makers-info-card__deco-box .creative-makers-info-card__deco { position: static; display: block; width: 100%; height: auto; } .create-for-cause-page .creative-makers-cta__card { background: linear-gradient( 90deg, var(--create-for-cause-cta-bg-start) 0%, var(--create-for-cause-cta-bg-mid) 55%, var(--create-for-cause-cta-bg-end) 100% ); } .create-for-cause-page .creative-makers-cta__plane { width: clamp(110px, 12vw, 150px); } /* ??? Community Adventures (blue theme overrides) ??? */ .community-adventures-page .creative-makers-hero__title { color: var(--color-blue-accent); } .community-adventures-page .creative-makers-hero__back, .community-adventures-page .creative-makers-breadcrumbs__list a:hover { color: var(--color-blue-accent); } .community-adventures-page .btn--solid { background-color: var(--color-blue-accent); border-color: var(--color-blue-accent); } .community-adventures-page .btn--solid:hover { background-color: #256bb8; border-color: #256bb8; } .community-adventures-page .creative-makers-activity--paint { background-color: var(--community-adventures-activity-places-bg); } .community-adventures-page .creative-makers-activity--crafts { background-color: var(--community-adventures-activity-helpers-bg); } .community-adventures-page .creative-makers-activity--media { background-color: var(--community-adventures-activity-nature-bg); } .community-adventures-page .creative-makers-activity--design { background-color: var(--community-adventures-activity-culture-bg); } .community-adventures-page .creative-makers-activity--upcycle { background-color: var(--community-adventures-activity-business-bg); } .community-adventures-page .creative-makers-info-card--skills { background-color: var(--community-adventures-info-skills-bg); } .community-adventures-page .creative-makers-info-card--grow { background-color: var(--community-adventures-info-grow-bg); } .community-adventures-page .creative-makers-info-card--impact { background-color: var(--community-adventures-info-impact-bg); } .community-adventures-page .creative-makers-info-card__title--pink { color: var(--color-blue-accent); } .community-adventures-page .creative-makers-info-card__check { background-color: var(--color-blue-soft); color: var(--color-blue-accent); } .community-adventures-page .creative-makers-cta__card { background: linear-gradient( 90deg, var(--community-adventures-cta-bg-start) 0%, var(--community-adventures-cta-bg-mid) 55%, var(--community-adventures-cta-bg-end) 100% ); } /* Community Adventures hero ? mobile banner centered */ @media (max-width: 767px) { #main-content > section.page-hero.community-adventures-hero .page-hero__inner, .page-hero.community-adventures-hero .page-hero__inner { gap: 0 !important; row-gap: 0 !important; } #main-content > section.page-hero.community-adventures-hero .page-hero__content, .page-hero.community-adventures-hero .page-hero__content { padding-bottom: 0 !important; margin-bottom: 0 !important; } #main-content > section.page-hero.community-adventures-hero .page-hero__actions, #main-content > section.page-hero.community-adventures-hero .hero-ctas, .page-hero.community-adventures-hero .page-hero__actions, .page-hero.community-adventures-hero .hero-ctas { margin-top: 0 !important; margin-bottom: 0 !important; } #main-content > section.page-hero.community-adventures-hero .creative-makers-hero__media, .page-hero.community-adventures-hero .creative-makers-hero__media, .page-hero.community-adventures-hero .hero-image-wrap { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; } #main-content > section.page-hero.community-adventures-hero .creative-makers-hero__media .lazy-img-wrap, #main-content > section.page-hero.community-adventures-hero .creative-makers-hero__media picture, .page-hero.community-adventures-hero .creative-makers-hero__media .lazy-img-wrap, .page-hero.community-adventures-hero .creative-makers-hero__media picture { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; } #main-content > section.page-hero.community-adventures-hero .creative-makers-hero__banner, .page-hero.community-adventures-hero .creative-makers-hero__banner, .page-hero.community-adventures-hero picture img { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; object-fit: contain !important; object-position: center center !important; } } @media (max-width: 430px) { #main-content > section.page-hero.community-adventures-hero .creative-makers-hero__media, #main-content > section.page-hero.community-adventures-hero .hero-image-wrap, .page-hero.community-adventures-hero .creative-makers-hero__media, .page-hero.community-adventures-hero .hero-image-wrap { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; } } /* Our Vision hero ? mobile banner: centered */ @media (max-width: 768px) { #main-content > section.page-hero.vision-hero:not(.partners-hero) .about-hero__media, .page-hero.vision-hero:not(.partners-hero) .about-hero__media, .page-hero.vision-hero:not(.partners-hero) .hero-image-wrap { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; } #main-content > section.page-hero.vision-hero:not(.partners-hero) .about-hero__media .lazy-img-wrap, #main-content > section.page-hero.vision-hero:not(.partners-hero) .about-hero__media picture, .page-hero.vision-hero:not(.partners-hero) .about-hero__media .lazy-img-wrap, .page-hero.vision-hero:not(.partners-hero) .about-hero__media picture { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; } #main-content > section.page-hero.vision-hero:not(.partners-hero) .about-hero__banner, .page-hero.vision-hero:not(.partners-hero) .about-hero__banner, .page-hero.vision-hero:not(.partners-hero) picture img { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; transform: none !important; transform-origin: center center !important; object-fit: contain !important; object-position: center center !important; } } /* Creative Makers hero — mobile banner centered (match Home 20px inset) */ @media (max-width: 768px) { .creative-makers-page #main-content > section.page-hero.creative-makers-hero .creative-makers-hero__media, .creative-makers-page .page-hero.creative-makers-hero .creative-makers-hero__media, .creative-makers-page .page-hero.creative-makers-hero .hero-image-wrap { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 20px !important; overflow: hidden !important; box-sizing: border-box !important; } .creative-makers-page #main-content > section.page-hero.creative-makers-hero .creative-makers-hero__media .lazy-img-wrap, .creative-makers-page #main-content > section.page-hero.creative-makers-hero .creative-makers-hero__media picture, .creative-makers-page .page-hero.creative-makers-hero .creative-makers-hero__media .lazy-img-wrap, .creative-makers-page .page-hero.creative-makers-hero .creative-makers-hero__media picture { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } .creative-makers-page #main-content > section.page-hero.creative-makers-hero .creative-makers-hero__banner, .creative-makers-page .page-hero.creative-makers-hero .creative-makers-hero__banner, .creative-makers-page .page-hero.creative-makers-hero picture img.creative-makers-hero__banner { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; transform: none !important; transform-origin: center center !important; object-fit: contain !important; object-position: center center !important; max-height: min(820px, 72vh) !important; } .creative-makers-page #main-content > section.page-hero.creative-makers-hero .page-hero__content, .creative-makers-page .page-hero.creative-makers-hero .page-hero__content { padding-left: 20px !important; padding-right: 20px !important; box-sizing: border-box !important; } } /* Create for a Cause hero — mobile banner centered */ @media (max-width: 768px) { .create-for-cause-page #main-content > section.page-hero.create-for-cause-hero .creative-makers-hero__media, .create-for-cause-page .page-hero.create-for-cause-hero .creative-makers-hero__media, .create-for-cause-page .page-hero.create-for-cause-hero .hero-image-wrap { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 20px !important; overflow: hidden !important; box-sizing: border-box !important; } .create-for-cause-page #main-content > section.page-hero.create-for-cause-hero .creative-makers-hero__media .lazy-img-wrap, .create-for-cause-page #main-content > section.page-hero.create-for-cause-hero .creative-makers-hero__media picture, .create-for-cause-page .page-hero.create-for-cause-hero .creative-makers-hero__media .lazy-img-wrap, .create-for-cause-page .page-hero.create-for-cause-hero .creative-makers-hero__media picture { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; } .create-for-cause-page #main-content > section.page-hero.create-for-cause-hero .creative-makers-hero__banner, .create-for-cause-page .page-hero.create-for-cause-hero .creative-makers-hero__banner, .create-for-cause-page .page-hero.create-for-cause-hero picture img.creative-makers-hero__banner { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; transform: none !important; transform-origin: center center !important; object-fit: contain !important; object-position: center center !important; filter: none !important; } } /* Community Adventures hero ? mobile banner centered */ @media (max-width: 768px) { .community-adventures-page #main-content > section.page-hero.community-adventures-hero .creative-makers-hero__media, .community-adventures-page .page-hero.community-adventures-hero .creative-makers-hero__media, .community-adventures-page .page-hero.community-adventures-hero .hero-image-wrap { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; } .community-adventures-page #main-content > section.page-hero.community-adventures-hero .creative-makers-hero__media .lazy-img-wrap, .community-adventures-page #main-content > section.page-hero.community-adventures-hero .creative-makers-hero__media picture, .community-adventures-page .page-hero.community-adventures-hero .creative-makers-hero__media .lazy-img-wrap, .community-adventures-page .page-hero.community-adventures-hero .creative-makers-hero__media picture { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; } .community-adventures-page #main-content > section.page-hero.community-adventures-hero .creative-makers-hero__banner, .community-adventures-page .page-hero.community-adventures-hero .creative-makers-hero__banner, .community-adventures-page .page-hero.community-adventures-hero picture img.creative-makers-hero__banner { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; transform: none !important; transform-origin: center center !important; object-fit: contain !important; object-position: center center !important; } } @media (max-width: 430px) { #main-content > section.page-hero.vision-hero:not(.partners-hero) .about-hero__media, #main-content > section.page-hero.vision-hero:not(.partners-hero) .hero-image-wrap, .page-hero.vision-hero:not(.partners-hero) .about-hero__media, .page-hero.vision-hero:not(.partners-hero) .hero-image-wrap { width: 100% !important; max-width: 100% !important; margin: 0 auto !important; } } /* ??? Our Story (about page) ??? */ .our-story { background-color: #fff; } .our-story__card { background-color: var(--color-story-bg); border-radius: 20px; /* padding: clamp(1.75rem, 3.5vw, 3rem) clamp(1.25rem, 2.5vw, 2.25rem); */ padding-top: var(--our-story-card-pad-top); padding-right: var(--our-story-card-pad-right); padding-bottom: var(--our-story-card-pad-bottom); padding-left: var(--our-story-card-pad-left); } .our-story__inner { display: flex; align-items: flex-start; gap: clamp(0.65rem, 1.4vw, 1.15rem); } .our-story__media { flex: 0 0 38%; max-width: 420px; min-width: 0; margin-left: 0.25rem; padding-top: 0.1rem; background: transparent; } .our-story__media .lazy-img-wrap, .our-story__photo-wrap { display: block; width: 100%; background: transparent; overflow: visible; line-height: 0; } .our-story__photo { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; background: transparent; } .our-story__content { flex: 1 1 0; min-width: 0; padding-top: 0.1rem; } .our-story__title { display: flex; align-items: center; flex-wrap: wrap; gap: 0.5rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.5rem, 3.4vw, 2rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--color-navy); margin: 0 0 1.1rem; } .our-story__title-icon { flex-shrink: 0; color: var(--color-pink); width: 1.25rem; height: 1.25rem; } .our-story__text { font-family: var(--font-body); font-size: clamp(0.98rem, 1.05vw, 1.08rem); font-weight: 400; line-height: 1.62; color: var(--color-navy); margin: 0 0 0.95rem; } .our-story__text--highlight { font-weight: 700; font-size: clamp(1.02rem, 1.12vw, 1.15rem); line-height: 1.55; color: var(--color-pink); margin-bottom: 0.95rem; } .our-story__text--last { margin-bottom: 0; } .our-story__aside { flex: 0 0 auto; width: clamp(130px, 13vw, 175px); display: flex; align-items: center; justify-content: center; align-self: stretch; margin-right: 0.35rem; } .our-story__jar { display: block; width: 100%; height: auto; object-fit: contain; pointer-events: none; user-select: none; } /* ??? We Believe (about page) ??? */ .we-believe { background-color: #fff; } .we-believe__title { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.5rem, 3.2vw, 2rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--color-navy); margin: 0 0 clamp(1.1rem, 2.2vw, 1.65rem); text-align: center; } .we-believe__title-icon { flex-shrink: 0; color: var(--color-yellow); width: clamp(1.1rem, 2vw, 1.45rem); height: clamp(1.1rem, 2vw, 1.45rem); } .we-believe__row { display: flex; align-items: center; gap: clamp(0.35rem, 1vw, 0.85rem); } .we-believe__deco { flex: 0 0 auto; width: var(--believe-deco-size); height: auto; object-fit: contain; pointer-events: none; user-select: none; align-self: center; } .we-believe__deco--right { transform: none; } .we-believe__slider { display: flex; flex: 1 1 auto; align-items: stretch; gap: clamp(0.55rem, 1vw, 0.85rem); min-width: 0; } .believe-card { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 0.65rem; padding: clamp(1rem, 1.6vw, 1.35rem) clamp(0.65rem, 1vw, 0.85rem); border-radius: 16px; text-align: center; } .believe-card--pink { background-color: var(--believe-card-pink); } .believe-card--purple { background-color: var(--believe-card-purple); } .believe-card--yellow { background-color: var(--believe-card-yellow); } .believe-card--green { background-color: var(--believe-card-green); } .believe-card--peach { background-color: var(--believe-card-peach); } .believe-card--blue { background-color: var(--believe-card-blue); } .believe-card__icon { display: block; flex: 0 0 var(--believe-icon-height); width: auto; height: var(--believe-icon-height); max-width: 100%; object-fit: contain; object-position: center center; } .believe-card__text { font-family: var(--font-body); font-size: clamp(0.78rem, 0.88vw, 0.9rem); font-weight: 500; line-height: 1.42; color: var(--color-navy); margin: 0; width: 100%; max-width: var(--believe-text-max-width); min-height: calc(1.42em * 3); text-align: center; } /* ??? About panels (journey + council) ??? */ .about-panels { background-color: #fff; } .about-panels__grid { display: flex; flex-wrap: wrap; gap: clamp(0.65rem, 1.2vw, 1rem); } .panel-card { flex: 1 1 calc(50% - 0.5rem); min-width: 0; border-radius: 16px; overflow: hidden; min-height: clamp(220px, 22vw, 280px); background-repeat: no-repeat; background-size: var(--panel-bg-size); background-position: var(--panel-bg-position); } .panel-card--journey { display: flex; align-items: stretch; background-color: var(--panel-cream); background-image: none; } .panel-card--council { display: flex; align-items: stretch; background-color: var(--panel-lavender); } .panel-card--journey .panel-card__content { flex: 1 1 0; width: auto; min-width: 0; max-width: calc(100% - var(--panel-council-figure-width) - clamp(0.5rem, 1vw, 0.85rem)); box-sizing: border-box; } .panel-card--council .panel-card__content { flex: 1 1 0; width: auto; min-width: 0; max-width: calc(100% - var(--panel-council-figure-width) - clamp(0.5rem, 1vw, 0.85rem)); position: relative; z-index: 1; box-sizing: border-box; } .panel-card--journey .panel-card__figure, .panel-card--council .panel-card__figure { flex: 0 0 auto; display: flex; align-items: center; justify-content: center; align-self: center; padding: clamp(0.65rem, 1.2vw, 1rem); padding-left: 0; isolation: isolate; } .panel-card--journey .panel-card__figure { background-color: var(--panel-cream); } .panel-card--council .panel-card__figure { background-color: var(--panel-lavender); } .panel-card__figure-img { display: block; width: var(--panel-council-figure-width); max-width: 100%; height: auto; object-fit: contain; } .panel-card__figure .lazy-img-wrap { width: var(--panel-council-figure-width); max-width: 100%; } .panel-card--role, .panel-card--approach { min-height: 0; background-image: none; } .panel-card--role { background-color: var(--panel-role-bg); } .panel-card--approach { background-color: var(--panel-approach-bg); } .panel-card__title-icon--img { width: var(--role-heart-size); height: auto; object-fit: contain; } .panel-card__content--full { width: 100%; padding-bottom: clamp(1.1rem, 2vw, 1.65rem); } .panel-card__title-icon--heart { color: var(--color-pink); } .panel-card__lead--tight { margin-bottom: 0.75rem; } .role-icons { display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(0.35rem, 0.8vw, 0.65rem); margin-bottom: clamp(0.85rem, 1.6vw, 1.15rem); } .role-icons__item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; } .role-icons__item:not(:first-child) { border-left: 1px solid rgba(0, 27, 102, 0.08); } .role-icons__img { display: block; width: clamp(36px, 3.6vw, 48px); height: clamp(36px, 3.6vw, 48px); object-fit: contain; background: transparent; } .panel-card--role .panel-card__title-icon--img { background: transparent; } .role-icons__label { font-family: var(--font-body); font-size: clamp(0.72rem, 0.82vw, 0.82rem); font-weight: 600; line-height: 1.25; color: var(--color-navy); } .role-callout { display: flex; align-items: center; gap: clamp(0.55rem, 1vw, 0.85rem); padding: clamp(0.7rem, 1.2vw, 0.95rem) clamp(0.85rem, 1.4vw, 1.15rem); border-radius: 12px; background-color: var(--panel-role-callout-bg); margin-top: auto; } .role-callout__icon { flex-shrink: 0; width: clamp(34px, 3.2vw, 44px); height: auto; object-fit: contain; } .role-callout__text { flex: 1 1 auto; min-width: 0; font-family: var(--font-body); font-size: clamp(0.78rem, 0.88vw, 0.88rem); line-height: 1.45; color: var(--color-navy); margin: 0; } .role-callout__text strong { display: block; font-weight: 700; } .role-callout__heart { flex-shrink: 0; width: var(--role-callout-heart-size); height: auto; object-fit: contain; } .approach-steps { display: flex; align-items: flex-start; justify-content: space-between; gap: clamp(0.1rem, 0.25vw, 0.2rem); margin-top: var(--approach-steps-offset-top); } .approach-step { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.35rem; } .approach-step__icon { display: block; width: clamp(44px, 4.5vw, 58px); height: clamp(44px, 4.5vw, 58px); object-fit: contain; } .approach-step__title { font-family: var(--font-body); font-size: clamp(0.78rem, 0.88vw, 0.88rem); font-weight: 700; line-height: 1.2; color: var(--color-navy); margin: 0; } .approach-step__text { font-family: var(--font-body); font-size: clamp(0.68rem, 0.76vw, 0.76rem); font-weight: 400; line-height: 1.35; color: var(--color-navy); margin: 0; min-height: calc(1.35em * 2); max-width: 9.5rem; } .approach-step__arrow { flex: 0 0 auto; align-self: flex-start; width: var(--approach-arrow-width); height: auto; margin-top: clamp(16px, 2vw, 24px); object-fit: contain; display: block; mix-blend-mode: multiply; } .panel-card__content { position: relative; width: 100%; min-width: 0; min-height: 100%; display: flex; flex-direction: column; padding: clamp(1.1rem, 2vw, 1.65rem) clamp(1rem, 1.8vw, 1.45rem); padding-bottom: clamp(2rem, 3vw, 2.35rem); } .panel-card__title { display: flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.15rem, 1.9vw, 1.55rem); line-height: 1.2; letter-spacing: -0.015em; color: var(--color-navy); margin: 0 0 0.85rem; } .panel-card__title-icon { flex-shrink: 0; } .panel-card__title-icon--crown { color: var(--color-orange); } .panel-card__title-icon--star { color: var(--color-plane); } .panel-card__copy { display: flex; flex-direction: column; gap: 0.65rem; } .panel-card__copy p, .panel-card__lead, .panel-card__note { font-family: var(--font-body); font-size: clamp(0.84rem, 0.95vw, 0.95rem); font-weight: 400; line-height: 1.55; color: var(--color-navy); margin: 0; overflow-wrap: break-word; word-wrap: break-word; } .panel-card__lead { margin-bottom: 0.65rem; } .panel-card__list { list-style: none; margin: 0 0 0.75rem; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; } .panel-card__list li { display: flex; align-items: flex-start; gap: 0.55rem; padding-left: 0; font-family: var(--font-body); font-size: clamp(0.84rem, 0.95vw, 0.95rem); line-height: 1.45; color: var(--color-navy); } .panel-card__list li::before { content: ''; flex-shrink: 0; position: static; width: 1.05rem; height: 1.05rem; margin-top: 0.1em; border-radius: 50%; background-color: var(--color-plane); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3.5 8.2l2.8 2.8 6.2-6.4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: center; background-size: 0.65rem; } .panel-card__note { margin-top: auto; } .panel-card__deco-heart { position: absolute; left: clamp(1rem, 1.8vw, 1.45rem); bottom: clamp(0.85rem, 1.6vw, 1.25rem); color: var(--color-plane); pointer-events: none; } /* ??? Compare different (about page) ??? */ .compare-different { background-color: #fff; } .compare-different__title { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.35rem, 2.8vw, 2rem); line-height: 1.15; letter-spacing: -0.02em; color: var(--color-navy); text-align: center; margin: 0 0 clamp(0.85rem, 1.6vw, 1.25rem); } .compare-different__heart { width: clamp(22px, 2.2vw, 28px); height: auto; object-fit: contain; } .compare-different__bar { position: relative; display: flex; align-items: stretch; overflow: visible; } .compare-side { flex: 1 1 50%; min-width: 0; display: flex; align-items: stretch; overflow: hidden; } .compare-side--left { background-color: var(--compare-left-bg); border-radius: var(--compare-bar-radius); overflow: hidden; } .compare-side--right { background-color: var(--compare-right-bg); border-radius: var(--compare-bar-radius); overflow: hidden; } .compare-side__photo { flex: 0 0 var(--compare-photo-share); width: var(--compare-photo-share); max-width: var(--compare-photo-share); align-self: stretch; height: 100%; min-height: 100%; display: block; } .compare-side > .lazy-img-wrap { flex: 0 0 var(--compare-photo-share); width: var(--compare-photo-share); max-width: var(--compare-photo-share); align-self: stretch; height: 100%; min-height: 100%; } .compare-side > .lazy-img-wrap .compare-side__photo { flex: none; width: 100%; max-width: 100%; height: 100%; min-height: 100%; object-fit: cover; } .compare-side--left .compare-side__photo { object-position: left center; } .compare-side--left > .lazy-img-wrap { border-radius: var(--compare-bar-radius) 0 0 var(--compare-bar-radius); overflow: hidden; } .compare-side--right .compare-side__photo { object-position: center center; } .compare-side--right > .lazy-img-wrap { border-radius: 0 var(--compare-bar-radius) var(--compare-bar-radius) 0; overflow: hidden; -webkit-mask-image: linear-gradient(to right, transparent 0%, #000 26%); mask-image: linear-gradient(to right, transparent 0%, #000 26%); } .compare-side__text { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; justify-content: center; padding-top: clamp(0.65rem, 1vw, 0.85rem); padding-bottom: clamp(0.65rem, 1vw, 0.85rem); } .compare-side--left .compare-side__text { padding-right: var(--compare-vs-clearance); padding-left: clamp(0.5rem, 0.9vw, 0.75rem); } .compare-side--right .compare-side__text { padding-left: calc(var(--compare-vs-clearance) + var(--compare-right-text-pad-extra)); padding-right: clamp(0.5rem, 0.9vw, 0.75rem); } .compare-side__label { font-family: var(--font-body); font-weight: 700; font-size: clamp(0.9rem, 1vw, 1.02rem); line-height: 1.3; color: var(--color-navy); margin: 0 0 0.6rem; } .compare-side__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; } .compare-side__list--grid { display: block; columns: 2; column-gap: clamp(0.45rem, 0.9vw, 0.75rem); } .compare-side__list li { display: flex; align-items: center; gap: 0.45rem; break-inside: avoid; font-family: var(--font-body); font-size: clamp(0.78rem, 0.88vw, 0.88rem); line-height: 1.35; color: var(--color-navy); margin-bottom: 0.45rem; } .compare-side__mark { flex-shrink: 0; width: clamp(18px, 1.8vw, 22px); height: clamp(18px, 1.8vw, 22px); object-fit: contain; } .compare-different__vs { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); z-index: 2; pointer-events: none; line-height: 0; } .compare-different__vs-badge { display: block; width: var(--compare-vs-size); height: var(--compare-vs-size); object-fit: contain; border-radius: 50%; } @media (max-height: 780px) and (min-width: 1024px) { .our-story__title { font-size: clamp(1.35rem, 2.6vw, 1.65rem); margin-bottom: 0.85rem; } .our-story__text { font-size: 0.92rem; margin-bottom: 0.75rem; } .our-story__text--highlight { font-size: 0.96rem; margin-bottom: 0.75rem; } .our-story__card { --our-story-card-pad-top: 1rem; --our-story-card-pad-bottom: 1rem; } .our-story__jar { max-width: 150px; } } @keyframes rise-in { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: translateY(0); } } .scroll-rise { opacity: 0; transform: translateY(14px); } .scroll-rise.is-in-view { animation: rise-in 0.65s ease both; } .scroll-rise--delay-1.is-in-view { animation-delay: 0.08s; } .scroll-rise--delay-2.is-in-view { animation-delay: 0.16s; } @media (prefers-reduced-motion: reduce) { .scroll-rise { opacity: 1; transform: none; } .scroll-rise.is-in-view { animation: none; } } @media (max-width: 1400px) { :root { --vision-moments-card-col: 0.26fr; --vision-moments-photo-col: 0.12fr; --vision-moments-feature-col: 0.56fr; --vision-moments-duo-col: 0.32fr; } } @media (max-width: 1200px) { .vision-moments__inner { grid-template-columns: 1fr; gap: clamp(0.85rem, 2vw, 1.1rem); } .vision-moments__gallery { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "feature feature" "photo-left duo"; gap: clamp(0.5rem, 1vw, 0.75rem); overflow: visible; width: 100%; max-width: 100%; } .vision-moments__gallery > .vision-moments__photo-wrap:first-of-type { grid-area: photo-left; } .vision-moments__feature { grid-area: feature; width: 100%; max-width: 100%; aspect-ratio: 900 / 400; } .vision-moments__photo-duo { grid-area: duo; width: 100%; max-width: 100%; aspect-ratio: auto; overflow: visible; } .vision-moments__photo-wrap { width: 100%; max-width: 100%; aspect-ratio: 3 / 4; height: auto; } .vision-moments__photo-duo .vision-moments__photo-wrap { aspect-ratio: 3 / 4; height: auto; } } /* ??? Responsive ??? */ @media (max-width: 1200px) { :root { --nav-gap: calc(0.9rem + 5px); } .site-nav, .site-header__actions { display: none; } .menu-toggle { display: flex; } .site-header__logo { width: auto; max-width: calc(100% - 52px); } .site-header__logo img { width: auto; --header-logo-height: 56px; } .site-nav__list { gap: var(--nav-gap); } .nav-link { font-size: 0.9rem; } .btn { font-size: 0.88rem; padding: 0.62rem 1.1rem; } .site-footer__grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } .site-footer__col--brand { grid-column: 1 / -1; max-width: none; } .site-footer__col--newsletter { grid-column: 1 / -1; } .page-hero__content { width: min(100%, 480px); max-width: none; } .page-hero__banner { height: 88%; } .home-hero__logo { --home-hero-logo-width: 320px; } .home-hero .page-hero__inner, .about-hero .page-hero__inner, .contact-hero .page-hero__inner, .for-parents-hero .page-hero__inner, .get-involved-hero .page-hero__inner, .vision-hero .page-hero__inner, .explore-hero .page-hero__inner, .apply-hero .page-hero__inner, .partners-hero .page-hero__inner, .faq-hero .page-hero__inner, .creative-makers-hero .page-hero__inner, .young-ideas-lab-hero .page-hero__inner, .create-for-cause-hero .page-hero__inner, .community-adventures-hero .page-hero__inner, .creative-makers-page .page-hero.creative-makers-hero .page-hero__inner, .young-ideas-lab-page .page-hero.young-ideas-lab-hero .page-hero__inner, .create-for-cause-page .page-hero.create-for-cause-hero .page-hero__inner, .community-adventures-page .page-hero.community-adventures-hero .page-hero__inner { display: flex; flex-direction: column; grid-template-columns: 1fr; row-gap: 1.25rem; } .home-hero .hero-headline, .home-hero__title { font-size: clamp(3rem, 9vw, 4.5rem); } .home-hero .page-hero__content, .about-hero .page-hero__content, .contact-hero .page-hero__content, .for-parents-hero .page-hero__content, .get-involved-hero .page-hero__content, .vision-hero .page-hero__content, .explore-hero .page-hero__content, .apply-hero .page-hero__content { grid-column: 1; grid-row: 1; width: 100%; max-width: none; } .about-hero__media, .home-hero .about-hero__media, .contact-hero .about-hero__media, .for-parents-hero .about-hero__media, .get-involved-hero .about-hero__media, .vision-hero .about-hero__media, .explore-hero__media, .apply-hero .about-hero__media, .donation-hero__media, .partners-hero .about-hero__media, .faq-hero__media, .creative-makers-hero__media { grid-column: 1; grid-row: 2; margin-right: 0; width: 100%; max-width: 100%; min-width: 0; justify-content: center; overflow: hidden; } .apply-hero__banner, .donation-hero__banner { width: 100%; max-width: 100%; } .about-hero__banner, .contact-hero .about-hero__banner, .for-parents-hero .about-hero__banner, .get-involved-hero .about-hero__banner, .vision-hero .about-hero__banner, .explore-hero__banner, .creative-makers-hero__banner, .apply-hero__banner, .faq-hero__banner { display: block; width: 100%; max-width: 100%; height: auto; max-height: 360px; object-fit: contain; object-position: center bottom; transform: none; } .vision-hero .about-hero__banner { transform-origin: center bottom; } .partners-hero.vision-hero .about-hero__banner { max-height: min(560px, calc(72vh - 50px)); min-height: unset; } .explore-hero .page-hero__content { padding-right: 0; } .explore-hero__media { padding-right: 0; } .explore-hero__tags-wrap { display: none; } .explore-hero__deco { display: none; } .explore-hero__heading-block { justify-content: center; } .explore-hero__title-wrap { max-width: 100%; } .about-hero__title, .explore-hero__title { font-size: clamp(1.55rem, 2.5vw, 2.35rem); } .contact-form__wrap { grid-template-columns: 1fr; } .contact-form__aside-title, .contact-form__aside-text, .contact-form__title, .contact-cta__title, .contact-cta__text { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .contact-form__aside { min-height: clamp(380px, 72vw, 520px); } .contact-form__aside-copy { padding: clamp(1.25rem, 3vw, 1.75rem) clamp(1rem, 2.5vw, 1.5rem); } .contact-cta__card { flex-wrap: wrap; justify-content: center; text-align: center; } .contact-cta__content { flex-direction: column; align-items: center; } .contact-cta__btn { margin-left: 0; width: 100%; max-width: 320px; } .our-story__card { --our-story-card-pad-top: 1.15rem; --our-story-card-pad-bottom: 1.15rem; --our-story-card-pad-left: 1.1rem; --our-story-card-pad-right: 1.1rem; } .our-story__title { font-size: clamp(1.4rem, 3vw, 1.75rem); margin-bottom: 0.95rem; } .our-story__title-icon { width: 1.15rem; height: 1.15rem; } .our-story__text { font-size: 0.95rem; line-height: 1.58; margin-bottom: 0.85rem; } .our-story__text--highlight { font-size: 1rem; margin-bottom: 0.85rem; } .our-story__inner { flex-direction: column; align-items: stretch; gap: 1.35rem; } .our-story__media { flex: none; max-width: min(400px, 100%); width: 100%; margin-inline: auto; } .our-story__aside { width: min(160px, 46vw); margin-inline: auto; align-self: center; } .we-believe__title { font-size: clamp(1.35rem, 3vw, 1.75rem); } .believe-card__text { font-size: clamp(0.76rem, 0.85vw, 0.88rem); --believe-text-max-width: 9.25rem; } .panel-card__title { font-size: clamp(1.1rem, 1.8vw, 1.4rem); } .panel-card__copy p, .panel-card__lead, .panel-card__note, .panel-card__list li { font-size: clamp(0.82rem, 0.9vw, 0.9rem); } } /* Desktop hero (≥1024px): text block + image vertically centered as whole units */ @media (min-width: 1024px) { :root { --page-hero-balanced-content-col: 0.4fr; --page-hero-balanced-media-col: 0.6fr; --contact-hero-content-col: 0.4fr; --contact-hero-media-col: 0.6fr; --vision-hero-content-col: 0.4fr; --vision-hero-media-col: 0.6fr; --explore-hero-content-col: 0.4fr; --explore-hero-media-col: 0.6fr; --home-hero-content-share: 42%; --page-hero-col-gap: 0; --home-hero-col-gap: 0; --explore-hero-inner-gap: 0; --page-hero-content-max-width: 520px; --home-hero-content-max: 520px; --explore-hero-content-max: 520px; --page-hero-desktop-pad-top: 12px; --page-hero-desktop-pad-bottom: 1rem; --page-hero-next-section-gap: 1rem; --page-hero-desktop-min-height: clamp(500px, calc(100vh - 160px), 620px); } .home-page { --bdc-home-hero-text-col-percent: 40; --bdc-home-hero-banner-col-percent: 60; --page-hero-balanced-content-col: 0.4fr; --page-hero-balanced-media-col: 0.6fr; --home-hero-content-share: 40%; } .home-page .page-hero.home-hero .page-hero__inner, .home-page .page-hero.home-welcome-hero .page-hero__inner { grid-template-columns: minmax(0, max-content) minmax(280px, 1fr) !important; column-gap: 0 !important; gap: 0 !important; } .home-page .page-hero.home-hero .page-hero__content, .home-page .page-hero.home-welcome-hero .page-hero__content { --bdc-hero-col-percent: var(--bdc-home-hero-text-col-percent); } .home-page .page-hero.home-hero .about-hero__media, .home-page .page-hero.home-hero .hero-image-wrap, .home-page .page-hero.home-welcome-hero .about-hero__media, .home-page .page-hero.home-welcome-hero .hero-image-wrap { --bdc-hero-col-percent: var(--bdc-home-hero-banner-col-percent); } .home-page #main-content > section.page-hero.home-hero, .home-page #main-content > section.page-hero.home-welcome-hero, .home-page #main-content > section.home-hero.page-hero { padding-top: 0 !important; margin-top: 0 !important; min-height: 0 !important; } .home-page .page-hero.home-hero, .home-page .page-hero.home-welcome-hero { padding-top: 0 !important; margin-top: 0 !important; min-height: 0 !important; } .home-page .page-hero.home-hero .page-hero__inner, .home-page .page-hero.home-welcome-hero .page-hero__inner { padding-top: 0 !important; min-height: 0 !important; align-items: center !important; } /* About page — tight top on laptop at 70–100% zoom (no tall empty band) */ .about-page #main-content > section.page-hero.about-hero, .about-page #main-content > section.about-hero.page-hero, .about-page .page-hero.about-hero { padding-top: 0 !important; margin-top: 0 !important; min-height: 0 !important; } .about-page .page-hero.about-hero .page-hero__inner { padding-top: 0 !important; min-height: 0 !important; align-items: center !important; } .get-involved-page { --get-involved-hero-content-col: 0.4fr; --get-involved-hero-media-col: 0.6fr; --page-hero-balanced-content-col: 0.4fr; --page-hero-balanced-media-col: 0.6fr; } .get-involved-page #main-content > section.page-hero.get-involved-hero, .get-involved-page #main-content > section.get-involved-hero.page-hero { padding-top: 0 !important; margin-top: 0 !important; min-height: 0 !important; } .get-involved-page .page-hero.get-involved-hero { padding-top: 0 !important; margin-top: 0 !important; min-height: 0 !important; } .get-involved-page .page-hero.get-involved-hero .page-hero__inner { grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr) !important; padding-top: 0 !important; min-height: 0 !important; align-items: center !important; } .our-vision-page { --vision-hero-content-col: 0.4fr; --vision-hero-media-col: 0.6fr; --page-hero-balanced-content-col: 0.4fr; --page-hero-balanced-media-col: 0.6fr; --vision-hero-banner-scale: 1; } .our-vision-page #main-content > section.page-hero.vision-hero, .our-vision-page #main-content > section.vision-hero.page-hero { padding-top: 0 !important; margin-top: 0 !important; min-height: 0 !important; } .our-vision-page .page-hero.vision-hero { padding-top: 0 !important; margin-top: 0 !important; min-height: 0 !important; } .our-vision-page .page-hero.vision-hero .page-hero__inner { grid-template-columns: minmax(0, 0.4fr) minmax(0, 0.6fr) !important; padding-top: 0 !important; min-height: 0 !important; align-items: center !important; } .our-vision-page .page-hero.vision-hero .page-hero__content { --bdc-hero-col-percent: 40; } .our-vision-page .page-hero.vision-hero .about-hero__media, .our-vision-page .page-hero.vision-hero .hero-image-wrap { --bdc-hero-col-percent: 60; } .for-parents-page .page-hero.for-parents-hero .page-hero__inner { gap: 0 !important; column-gap: 0 !important; row-gap: 0 !important; } .for-parents-page .page-hero.for-parents-hero .page-hero__content { max-width: 600px !important; padding-right: 0 !important; margin-right: 0 !important; } #main-content > section.page-hero.home-hero, #main-content > section.page-hero.about-hero, #main-content > section.page-hero.explore-hero, #main-content > section.page-hero.for-parents-hero, #main-content > section.page-hero.vision-hero, #main-content > section.page-hero.partners-hero, #main-content > section.page-hero.contact-hero, #main-content > section.home-hero, #main-content > section.about-hero, #main-content > section.explore-hero.page-hero, #main-content > section.for-parents-hero, #main-content > section.vision-hero, #main-content > section.partners-hero, #main-content > section.contact-hero { min-height: var(--page-hero-desktop-min-height); padding-top: var(--page-hero-desktop-pad-top); padding-bottom: var(--page-hero-next-section-gap); } #main-content > section.home-hero + section, #main-content > section.about-hero + section, #main-content > section.for-parents-hero + section, #main-content > section.vision-hero + section, #main-content > section.partners-hero + section, #main-content > section.contact-hero + section, #main-content > section.explore-hero.page-hero + #explore-content > .explore-ways:first-child { padding-top: 0; } #explore-content > .explore-ways:first-child { margin-top: 0; padding-top: 0; } .our-vision-page #main-content > section.vision-hero + section.vision-hero-checklist { padding-top: 0; } .page-hero.home-hero, .page-hero.about-hero, .page-hero.explore-hero, .page-hero.for-parents-hero, .page-hero.vision-hero, .page-hero.partners-hero, .page-hero.contact-hero { min-height: var(--page-hero-desktop-min-height); padding-top: var(--page-hero-desktop-pad-top); padding-bottom: var(--page-hero-next-section-gap); } .our-vision-page #main-content > section.vision-hero { min-height: var(--page-hero-desktop-min-height); padding-bottom: var(--page-hero-next-section-gap); } .page-hero.home-hero .page-hero__inner, .page-hero.about-hero .page-hero__inner, .page-hero.explore-hero .page-hero__inner, .page-hero.for-parents-hero .page-hero__inner, .page-hero.vision-hero .page-hero__inner, .page-hero.partners-hero .page-hero__inner, .page-hero.contact-hero .page-hero__inner { display: grid; grid-template-columns: minmax(0, max-content) minmax(280px, 1fr); align-items: center; justify-content: start; gap: 0; column-gap: 0; min-height: inherit; max-width: var(--container-max-width); padding-left: var(--container-padding); padding-right: var(--container-padding); } .page-hero.home-hero .page-hero__content, .page-hero.about-hero .page-hero__content, .page-hero.explore-hero .page-hero__content, .page-hero.for-parents-hero .page-hero__content, .page-hero.vision-hero .page-hero__content, .page-hero.partners-hero .page-hero__content, .page-hero.contact-hero .page-hero__content { grid-column: 1; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; align-self: center; width: 100%; max-width: var(--page-hero-content-max-width); justify-self: start; margin-inline: 0; padding-top: 0; padding-bottom: 0; padding-right: 0; text-align: left; } .page-hero.home-hero .page-hero__actions, .page-hero.about-hero .page-hero__actions, .page-hero.explore-hero .page-hero__actions, .page-hero.for-parents-hero .page-hero__actions, .page-hero.vision-hero .page-hero__actions, .page-hero.partners-hero .page-hero__actions, .page-hero.contact-hero .page-hero__actions { justify-content: flex-start; } .page-hero.explore-hero .explore-hero__heading-block { justify-content: flex-start; } .page-hero.home-hero .about-hero__media, .page-hero.home-hero .hero-image-wrap, .page-hero.about-hero .about-hero__media, .page-hero.about-hero .hero-image-wrap, .page-hero.explore-hero .explore-hero__media, .page-hero.for-parents-hero .about-hero__media, .page-hero.for-parents-hero .hero-image-wrap, .page-hero.vision-hero .about-hero__media, .page-hero.vision-hero .hero-image-wrap, .page-hero.partners-hero .about-hero__media, .page-hero.partners-hero .hero-image-wrap, .page-hero.contact-hero .about-hero__media, .page-hero.contact-hero .hero-image-wrap { grid-column: 2; display: flex; align-items: center; justify-content: flex-start; align-self: center; width: 100%; min-width: 0; } .page-hero.about-hero .hero-headline [class*='__title-line'], .page-hero.explore-hero .hero-headline [class*='__title-line'], .page-hero.for-parents-hero .hero-headline [class*='__title-line'], .page-hero.vision-hero .hero-headline [class*='__title-line'], .page-hero.partners-hero .hero-headline [class*='__title-line'], .page-hero.contact-hero .hero-headline [class*='__title-line'] { white-space: normal; } .page-hero.home-hero .about-hero__banner, .page-hero.about-hero .about-hero__banner, .page-hero.explore-hero .explore-hero__banner, .page-hero.for-parents-hero .about-hero__banner, .page-hero.vision-hero .about-hero__banner, .page-hero.partners-hero .about-hero__banner, .page-hero.contact-hero .about-hero__banner { max-height: min(420px, 52vh); object-fit: contain; } .about-page .page-hero.about-hero .about-hero__banner, .about-page .page-hero.about-hero picture img.about-hero__banner { width: 100% !important; max-width: 100% !important; max-height: none !important; height: auto !important; object-fit: contain !important; object-position: right center !important; } .our-vision-page .page-hero.vision-hero:not(.partners-hero) .about-hero__banner, .our-vision-page .page-hero.vision-hero:not(.partners-hero) picture img.about-hero__banner { height: auto !important; max-height: min(610px, 72vh) !important; width: 100% !important; max-width: 100% !important; object-fit: contain !important; object-position: left center !important; margin-left: 0 !important; margin-right: 0 !important; transform: none !important; } .for-parents-page .page-hero.for-parents-hero .about-hero__banner, .for-parents-page .page-hero.for-parents-hero picture img.about-hero__banner { height: auto !important; max-height: none !important; min-height: 0 !important; width: 100% !important; max-width: 100% !important; object-fit: contain !important; object-position: right center !important; margin-left: auto !important; margin-right: 0 !important; transform: none !important; } } @media (max-width: 1023px) { :root { --container-padding: 32px; --section-pad-y: 64px; --main-section-gap-y: 1.25rem; --page-hero-mobile-stack-gap: 1.25rem; --page-hero-mobile-content-gap: 0.85rem; --page-hero-mobile-image-max-h: min(420px, 55vh); } .site-nav, .site-header__actions { display: none; } .menu-toggle { display: flex; } .site-header__logo { background: transparent; max-width: calc(100% - 52px); } .site-header__logo img { width: auto; max-width: 100%; height: auto; max-height: 72px; object-fit: contain; background: transparent; } .site-footer__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .site-footer__col--brand, .site-footer__col--newsletter { grid-column: 1 / -1; } .site-footer__col--art { grid-column: auto; grid-row: auto; justify-content: flex-start; } .site-footer__art { --footer-art-max-w: 250px; } .contact-form__row { grid-template-columns: 1fr; } .page-hero { min-height: 0; display: flex; flex-direction: column; padding-bottom: 0; overflow: visible; } .contact-hero.page-hero { display: block; } .contact-hero .page-hero__content { text-align: left; padding-bottom: 0; } .contact-hero__heart { position: static; display: block; transform: none; margin: 0.65rem auto 0; } .page-hero__banner { position: relative; order: 2; top: auto; right: auto; transform: none; width: 100%; height: auto; min-height: 0; max-height: 420px; object-fit: contain; object-position: center bottom; } .page-hero__inner { order: 1; min-height: 0; align-items: flex-start; } .page-hero__content { width: 100%; max-width: none; text-align: left; padding-bottom: 1.5rem; } .home-hero__brand { display: flex; justify-content: flex-start; } .home-hero__logo { --home-hero-logo-width: 280px; object-position: left center; } .home-hero__title { align-items: flex-start; } .home-hero__tagline, .page-hero__actions { justify-content: flex-start; } .page-hero__text { margin-inline: 0; } .about-hero__title-line, .explore-hero__title-line { white-space: normal; text-align: left; } .our-story__title { font-size: clamp(1.3rem, 3.6vw, 1.6rem); margin-bottom: 0.85rem; } .our-story__title-icon { width: 1.1rem; height: 1.1rem; } .our-story__text { font-size: 0.92rem; line-height: 1.55; margin-bottom: 0.8rem; } .our-story__text--highlight { font-size: 0.96rem; line-height: 1.52; margin-bottom: 0.8rem; } .our-story__card { border-radius: 16px; --our-story-card-pad-top: 1rem; --our-story-card-pad-bottom: 1rem; --our-story-card-pad-left: 0.9rem; --our-story-card-pad-right: 0.9rem; } .home-pillars__row { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.35rem; margin-inline: calc(-1 * var(--container-padding)); padding-inline: var(--container-padding); } .home-page .home-pillars .site-container, .home-page .home-different .site-container, .home-page .home-explore .site-container, .home-page .home-spotlight .site-container { overflow: visible; min-width: 0; max-width: 100%; } .home-page .home-pillars__row, .home-page .home-different__grid, .home-page .home-explore__grid, .home-page .home-reality__steps { overflow-x: auto; overflow-y: visible; -webkit-overflow-scrolling: touch; } .home-pillars__row::-webkit-scrollbar { display: none; } .home-pillar { flex: 0 0 min(300px, 82vw); scroll-snap-align: start; } .home-different__grid { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: clamp(0.75rem, 3vw, 1rem); padding-bottom: 0.35rem; margin-inline: calc(-1 * var(--container-padding)); padding-inline: var(--container-padding); } .home-different__grid::-webkit-scrollbar { display: none; } .home-different__item { flex: 0 0 calc((100% - clamp(0.75rem, 3vw, 1rem)) / 2); width: calc((100% - clamp(0.75rem, 3vw, 1rem)) / 2); max-width: calc((100% - clamp(0.75rem, 3vw, 1rem)) / 2); min-width: 0; scroll-snap-align: start; border-left: none; padding: 0.85rem 0.55rem; gap: 0.75rem; box-sizing: border-box; } .home-different__item + .home-different__item { border-left: none; } .home-different__icon-wrap { width: 110px; height: 110px; min-width: 100px; min-height: 100px; flex-shrink: 0; } .home-different__icon { width: 100% !important; height: 100% !important; max-width: 110px; max-height: 110px; } .home-different__name { font-size: clamp(1rem, 3.2vw, 1.15rem); margin-bottom: 0.35rem; } .home-different__text { font-size: clamp(0.82rem, 2.6vw, 0.92rem); line-height: 1.45; max-width: 100%; } .home-reality__inner { padding-inline: clamp(1rem, 1.8vw, 1.45rem); } .home-reality__deco-wrap { display: none; } .home-reality__box { overflow: visible; padding: clamp(1.35rem, 4vw, 1.75rem) clamp(1rem, 3vw, 1.35rem); } .home-reality__title { padding-inline: clamp(0.5rem, 1.5vw, 1rem); margin-bottom: clamp(1rem, 3vw, 1.35rem); } .home-reality { --home-reality-icon-size: 110px; --home-reality-icon-inner: 100%; } .home-reality__steps { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; justify-content: flex-start; gap: clamp(0.75rem, 3vw, 1rem); padding-bottom: 0.35rem; margin-inline: calc(-1 * clamp(1rem, 1.8vw, 1.45rem)); padding-inline: clamp(1rem, 1.8vw, 1.45rem); } .home-reality__steps::-webkit-scrollbar { display: none; } .home-reality-step { flex: 0 0 calc((100% - clamp(0.75rem, 3vw, 1rem)) / 2); width: calc((100% - clamp(0.75rem, 3vw, 1rem)) / 2); max-width: calc((100% - clamp(0.75rem, 3vw, 1rem)) / 2); min-width: 0; scroll-snap-align: start; box-sizing: border-box; gap: 0.75rem; padding: 0.35rem 0.25rem; } .home-reality-step__icon-wrap { width: 110px !important; height: 110px !important; min-width: 100px !important; min-height: 100px !important; flex-shrink: 0; } .home-reality-step__icon { width: 100% !important; height: 100% !important; min-width: 0; min-height: 0; } .home-reality-step__title { font-size: clamp(1rem, 3.2vw, 1.15rem); margin: 0; } .home-reality-step__text { font-size: clamp(0.82rem, 2.6vw, 0.92rem); max-width: 100%; overflow-wrap: anywhere; word-break: break-word; line-height: 1.45; } .home-reality-step__arrow { flex: 0 0 auto; scroll-snap-align: center; } .home-explore__grid { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.35rem; margin-inline: calc(-1 * var(--container-padding)); padding-inline: var(--container-padding); } .home-explore__grid::-webkit-scrollbar { display: none; } .home-explore__grid .experience-card { flex: 0 0 min(300px, 82vw); scroll-snap-align: start; min-width: 0; } .explore-ways__grid { display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.35rem; margin-inline: calc(-1 * var(--container-padding)); padding-inline: var(--container-padding); } .explore-ways__grid::-webkit-scrollbar { display: none; } .explore-ways__grid:not(.bdc-mobile-carousel) .explore-way { flex: 0 0 min(240px, 74vw); scroll-snap-align: start; min-height: auto; } .explore-ways__grid.bdc-mobile-carousel .explore-way { flex: 0 0 100%; width: 100%; min-width: 100%; max-width: 100%; scroll-snap-align: start; scroll-snap-stop: always; min-height: auto; box-sizing: border-box; } .explore-way__head { height: auto; min-height: var(--explore-way-head-min-h); } .explore-way-card__text { min-height: 0; } .explore-skills__grid { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.35rem; margin-inline: calc(-1 * var(--container-padding)); padding-inline: var(--container-padding); } .explore-skills__grid::-webkit-scrollbar { display: none; } .explore-skills__grid:not(.bdc-mobile-carousel) .explore-skill { flex: 0 0 calc((100% - 16px) / 3); width: calc((100% - 16px) / 3); max-width: calc((100% - 16px) / 3); scroll-snap-align: start; border-left: none; padding-inline: 0.2rem; box-sizing: border-box; overflow: hidden; } .explore-skills__grid.bdc-mobile-carousel .explore-skill { flex: 0 0 100%; width: 100%; min-width: 100%; max-width: 100%; scroll-snap-align: start; scroll-snap-stop: always; border-left: none; padding-inline: 0.2rem; box-sizing: border-box; overflow: hidden; } .explore-skill__title, .explore-skill__text { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .explore-skill:not(:first-child) { border-left: none; } .explore-grow__track { display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; justify-content: flex-start; padding-bottom: 0.35rem; margin-inline: calc(-1 * var(--container-padding)); padding-inline: var(--container-padding); } .explore-grow__track::-webkit-scrollbar { display: none; } .explore-grow-stage { flex: 0 0 100%; width: 100%; max-width: 100%; scroll-snap-align: start; height: auto; min-height: auto; overflow: hidden; box-sizing: border-box; } .explore-grow-stage__card { height: auto; min-height: var(--explore-grow-card-h); overflow: hidden; padding: 0.85rem 0.9rem; } .explore-grow-stage__card::before { inset: 0; background-size: 100% 100%; background-position: center center; } .explore-grow-stage__layout { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); gap: 0.45rem; min-height: 0; } .explore-grow-stage__layout > .lazy-img-wrap { overflow: visible; max-width: 100%; } .explore-grow-stage__photo, .explore-grow-stage__layout > .lazy-img-wrap .explore-grow-stage__photo { max-width: 100%; width: 100%; height: auto; max-height: 150px; object-fit: contain; object-position: center; } .explore-grow-stage__quote, .explore-grow-stage__text, .explore-grow-stage__label { overflow-wrap: anywhere; word-break: break-word; max-width: 100%; } .explore-grow__arrow { flex: 0 0 auto; scroll-snap-align: center; } .explore-impact__track { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.35rem; margin-inline: calc(-1 * var(--container-padding)); padding-inline: var(--container-padding); } .explore-impact__track::-webkit-scrollbar { display: none; } .explore-impact-card { flex: 0 0 min(220px, 72vw); scroll-snap-align: start; } .explore-impact-quote { flex: 0 0 min(260px, 82vw); min-width: min(260px, 82vw); scroll-snap-align: start; min-height: clamp(210px, 62vw, 280px); justify-content: center; padding-inline: 0.35rem; } .explore-dream__grid { grid-template-columns: 1fr; gap: clamp(0.85rem, 2vw, 1.15rem); text-align: left; } .explore-dream__title { text-align: left; } .explore-dream__list { align-items: flex-start; width: 100%; margin-inline: 0; } .explore-dream__actions { width: min(100%, 22rem); margin-inline: auto; } .for-parents-expect__deco { display: none; } .for-parents-expect__wrap { padding-inline: 0; overflow: visible; } .for-parents-expect__inner { overflow: visible; max-width: 100%; } .get-involved-ways__grid { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.35rem; margin-inline: 0; padding-inline: 0; gap: 0; } .get-involved-ways__grid::-webkit-scrollbar { display: none; } .get-involved-ways-card { flex: 0 0 100%; width: 100%; min-width: 100%; max-width: 100%; scroll-snap-align: start; box-sizing: border-box; overflow: hidden; box-shadow: none; } .get-involved-ways-card__title, .get-involved-ways-card__text, .get-involved-ways-card__link { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .partners-ways__grid { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.35rem; margin-inline: calc(-1 * var(--container-padding)); padding-inline: var(--container-padding); } .partners-ways__grid::-webkit-scrollbar { display: none; } .partners-ways-card { flex: 0 0 calc((100% - 16px) / 3); width: calc((100% - 16px) / 3); max-width: calc((100% - 16px) / 3); scroll-snap-align: start; box-sizing: border-box; overflow: hidden; } .partners-ways-card__title, .partners-ways-card__text { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .partners-impact__grid { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.35rem; margin-inline: calc(-1 * clamp(1rem, 1.85vw, 1.65rem)); padding-inline: clamp(1rem, 1.85vw, 1.65rem); } .partners-impact__grid::-webkit-scrollbar { display: none; } .partners-impact-card { flex: 0 0 100%; width: 100%; max-width: 100%; scroll-snap-align: start; box-sizing: border-box; overflow: hidden; } .partners-impact-card__title, .partners-impact-card__text { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .partners-opportunity-cta__card { grid-template-columns: 1fr; text-align: center; } .partners-opportunity-cta__lead { flex-direction: column; justify-content: center; } .partners-opportunity-cta__text { max-width: none; } .partners-opportunity-cta__title, .partners-opportunity-cta__text { overflow-wrap: anywhere; word-break: break-word; } .partners-opportunity-cta__btn { width: 100%; max-width: 22rem; justify-content: center; margin-inline: auto; } .partners-opportunity-cta__plane { margin-inline: auto; } .partners-founding__grid { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.35rem; margin-inline: 0; padding-inline: 0; gap: 0; } .partners-founding__grid::-webkit-scrollbar { display: none; } .partners-founding-card { flex: 0 0 100%; width: 100%; min-width: 100%; max-width: 100%; scroll-snap-align: start; box-sizing: border-box; overflow: hidden; box-shadow: none; } .partners-founding-card__title, .partners-founding-card__text { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .creative-makers-hero__inner { grid-template-columns: 1fr; } .creative-makers-hero__banner { max-height: min(360px, 52vh); object-position: center; } .creative-makers-hero__deco--star { top: clamp(3.85rem, 11vw, 5rem); } .creative-makers-hero__deco--plane { display: none; } .creative-makers-explore__grid { display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.35rem; margin-inline: calc(-1 * var(--container-padding)); padding-inline: var(--container-padding); } .creative-makers-explore__grid::-webkit-scrollbar { display: none; } .creative-makers-activity { flex: 0 0 calc((100% - 16px) / 3); width: calc((100% - 16px) / 3); max-width: calc((100% - 16px) / 3); scroll-snap-align: start; box-sizing: border-box; overflow: hidden; } .creative-makers-activity__title { overflow-wrap: anywhere; word-break: break-word; max-width: 100%; } .creative-makers-info__grid { grid-template-columns: 1fr; } .creative-makers-info-card__title, .creative-makers-info-card__text, .creative-makers-info-card__list li, .creative-makers-parents__title { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .creative-makers-parents__tablist { display: flex; flex-direction: column; flex-wrap: nowrap; overflow: visible; overscroll-behavior: auto; touch-action: auto; scroll-snap-type: none; gap: 0.55rem; padding-bottom: 0; margin-inline: 0; padding-inline: 0; width: 100%; } .creative-makers-faq__tab { flex: 0 0 auto; width: 100%; max-width: 100%; scroll-snap-align: none; } .creative-makers-cta__card { justify-content: center; text-align: center; } .creative-makers-cta__btn { margin-left: 0; width: 100%; max-width: 320px; } .get-involved-impact__inner { grid-template-columns: 1fr; gap: clamp(1rem, 2vw, 1.25rem); } .get-involved-impact__intro, .get-involved-impact__note { max-width: none; } .get-involved-impact__visual { grid-template-columns: 1fr; gap: clamp(0.85rem, 2vw, 1.1rem); } .get-involved-impact__illustration { max-width: min(100%, 320px); justify-self: center; } .get-involved-partner-cta__card { flex-direction: column; align-items: center; text-align: center; } .get-involved-partner-cta__btn { width: 100%; max-width: 22rem; margin-left: 0; } .for-parents-expect__grid { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.35rem; margin-inline: 0; padding-inline: 0; gap: 16px; } .for-parents-expect__grid::-webkit-scrollbar { display: none; } .for-parents-expect-card { flex: 0 0 100%; width: 100%; max-width: 100%; scroll-snap-align: start; box-sizing: border-box; overflow: visible; box-shadow: none; } .for-parents-expect-card__title, .for-parents-expect-card__text { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .for-parents-expect__title { overflow-wrap: anywhere; word-break: break-word; } .vision-pillars__grid { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.35rem; margin-inline: calc(-1 * var(--container-padding)); padding-inline: var(--container-padding); } .vision-pillars__grid::-webkit-scrollbar { display: none; } .vision-pillar-card { flex: 0 0 calc((100% - 16px) / 3); width: calc((100% - 16px) / 3); max-width: calc((100% - 16px) / 3); scroll-snap-align: start; box-sizing: border-box; overflow: hidden; } .vision-pillar-card__deco { display: none; } .vision-pillar-card__title, .vision-pillar-card__text { --vision-pillar-text-lines: 4; max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .vision-roadmap__inner { grid-template-columns: 1fr; gap: clamp(1.75rem, 3.5vw, 2.25rem); max-width: 100%; } .vision-roadmap__goals, .vision-roadmap__journey { min-width: 0; max-width: 100%; } .vision-roadmap__list li { min-width: 0; overflow-wrap: anywhere; word-wrap: break-word; } .vision-roadmap__journey { border-left: none; padding-left: 0; border-top: 1px solid rgba(0, 27, 102, 0.1); padding-top: clamp(1.25rem, 2.5vw, 1.75rem); overflow: visible; } .vision-journey-steps { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; width: 100%; max-width: 100%; padding-bottom: 0.35rem; margin-inline: calc(-1 * var(--container-padding)); padding-inline: var(--container-padding); } .vision-journey-steps::-webkit-scrollbar { display: none; } .vision-journey-step { flex: 0 0 calc((100% - 16px) / 3); width: calc((100% - 16px) / 3); max-width: calc((100% - 16px) / 3); scroll-snap-align: start; box-sizing: border-box; overflow: hidden; } .vision-journey-step__title, .vision-journey-step__quote, .vision-journey-step__text { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .vision-journey-step__arrow { display: none; } .vision-moments__inner { grid-template-columns: 1fr; gap: clamp(0.85rem, 2vw, 1.1rem); } .vision-moments__card { min-height: 0; } .vision-moments__gallery { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-areas: "feature feature" "photo-left duo"; gap: clamp(0.5rem, 1vw, 0.75rem); overflow: visible; overscroll-behavior: auto; touch-action: auto; scroll-snap-type: none; padding-bottom: 0; margin-inline: 0; padding-inline: 0; width: 100%; max-width: 100%; align-items: stretch; } .vision-moments__gallery > .vision-moments__photo-wrap:first-of-type { grid-area: photo-left; flex: none; width: 100%; max-width: 100%; scroll-snap-align: none; height: auto; aspect-ratio: 3 / 4; } .vision-moments__photo { height: 100%; object-fit: contain; } .vision-moments__feature { grid-area: feature; flex: none; width: 100%; max-width: 100%; scroll-snap-align: none; height: auto; aspect-ratio: 900 / 400; } .vision-moments__photo-duo { grid-area: duo; flex: none; width: 100%; max-width: 100%; scroll-snap-align: none; height: auto; aspect-ratio: auto; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); overflow: visible; } .vision-moments__photo-duo .vision-moments__photo-wrap { flex: none; width: 100%; max-width: 100%; height: auto; aspect-ratio: 3 / 4; } .vision-moments__feature-copy { --vision-moments-feature-copy-width: min(54%, 9.75rem); } .vision-moments__feature-title { font-size: clamp(0.72rem, 3vw, 0.86rem); line-height: 1.18; } .vision-moments__feature-text { font-size: clamp(0.58rem, 2.35vw, 0.68rem); line-height: 1.28; } .vision-moments__list { grid-template-columns: 1fr; } .vision-moments__list-more { grid-column: auto; } .vision-partner__inner { grid-template-columns: 1fr; } .vision-partner__copy { padding-bottom: clamp(0.55rem, 1.35vw, 0.78rem); } .vision-partner__panel { margin-block: 0; margin-top: clamp(0.2rem, 0.45vw, 0.32rem); } .vision-partner__panel-inner { grid-template-columns: 1fr; gap: clamp(0.85rem, 2vw, 1.1rem); } .vision-partner__icons { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.35rem; margin-inline: calc(-1 * var(--container-padding)); padding-inline: var(--container-padding); } .vision-partner__icons::-webkit-scrollbar { display: none; } .vision-partner__icon-item { flex: 0 0 calc((100% - 16px) / 3); width: calc((100% - 16px) / 3); max-width: calc((100% - 16px) / 3); scroll-snap-align: start; box-sizing: border-box; overflow: hidden; } .vision-partner__icon-label { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .vision-partner__cta-wrap { align-items: stretch; } .vision-partner__btn { max-width: none; width: 100%; } .vision-together__grid { grid-template-columns: 1fr; gap: clamp(0.85rem, 2vw, 1.15rem); text-align: center; } .vision-together__list { align-items: flex-start; width: min(100%, 18rem); margin-inline: auto; } .vision-together__actions { width: min(100%, 22rem); margin-inline: auto; } .vision-together__deco-stars { justify-content: center; } .for-parents-fit__grid { grid-template-columns: 1fr; gap: clamp(0.85rem, 2vw, 1.1rem); } .for-parents-fit-card__list { grid-template-columns: 1fr; } .for-parents-fit-card__quote-layout { grid-template-columns: minmax(0, 0.78fr) minmax(0, 1.22fr); } .for-parents-info__grid { grid-template-columns: 1fr; gap: clamp(0.85rem, 2vw, 1.1rem); } .for-parents-info-card__title, .for-parents-info-feature__title, .for-parents-info-feature__text, .for-parents-info-card__footer, .for-parents-fit-card__title, .for-parents-fit-card__intro, .vision-together__title, .vision-together__list li, .get-involved-impact__title, .get-involved-impact__intro, .get-involved-timeline__title, .get-involved-timeline__text { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .for-parents-info-card__features { display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.35rem; gap: 10px; } .for-parents-info-card__features::-webkit-scrollbar { display: none; } .for-parents-info-feature { flex: 0 0 calc((100% - 16px) / 3); width: calc((100% - 16px) / 3); max-width: calc((100% - 16px) / 3); scroll-snap-align: start; box-sizing: border-box; overflow: hidden; grid-template-columns: 1fr; justify-items: center; text-align: center; gap: 0.35rem; } .for-parents-info-feature__title, .for-parents-info-feature__text { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .for-parents-info-feature > div { min-width: 0; max-width: 100%; } .for-parents-info-start { grid-template-columns: 1fr; } .for-parents-info-start__plane { justify-self: center; max-width: clamp(110px, 34vw, 140px); margin-top: 0.35rem; } .for-parents-info-start__btn { position: static; width: 100%; margin-top: 0.85rem; } .for-parents-cta__card { flex-wrap: wrap; justify-content: center; text-align: center; } .for-parents-cta__actions { margin-left: 0; width: 100%; justify-content: center; flex-wrap: wrap; } .for-parents-cta__btn { width: 100%; max-width: 320px; } .home-spotlight__grid { flex-direction: column; flex-wrap: nowrap; overflow: visible; overscroll-behavior: auto; touch-action: auto; scroll-snap-type: none; gap: clamp(1rem, 2vw, 1.25rem); padding-bottom: 0; margin-inline: 0; padding-inline: 0; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; } .spotlight-card { flex: 1 1 auto; width: 100%; max-width: 100%; scroll-snap-align: none; min-height: clamp(280px, 72vw, 360px); flex-direction: column; min-width: 0; overflow: visible; } .spotlight-card__content { width: 100%; max-width: 100%; min-width: 0; flex: 0 0 auto; box-sizing: border-box; overflow: visible; padding-inline: clamp(1rem, 4vw, 1.25rem); } .spotlight-card__title, .spotlight-card__copy { min-width: 0; max-width: 100%; } .spotlight-card__copy p, .spotlight-card__note, .spotlight-card__list li { overflow-wrap: anywhere; word-break: break-word; } .spotlight-card--ideas .spotlight-card__content, .spotlight-card--ideas .spotlight-card__figure { flex: 0 0 auto; width: 100%; max-width: 100%; } .spotlight-card__figure { padding: 0 clamp(1.1rem, 1.9vw, 1.55rem) clamp(1.1rem, 1.9vw, 1.55rem); padding-top: 0; } .spotlight-card--ideas .spotlight-card__figure-img { width: min(100%, 320px); height: auto; } .spotlight-card--council .spotlight-card__figure-img { width: min(var(--panel-council-figure-width), 72vw); } .we-believe__title { font-size: clamp(1.25rem, 3.8vw, 1.55rem); margin-bottom: 1rem; } .we-believe__deco { display: none; } .we-believe__slider { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.35rem; margin-inline: calc(-1 * var(--container-padding)); padding-inline: var(--container-padding); } .we-believe__slider::-webkit-scrollbar { display: none; } .believe-card { flex: 0 0 min(240px, 72vw); scroll-snap-align: start; } .believe-card__text { font-size: 0.84rem; --believe-text-max-width: 10.5rem; } .panel-card--council, .panel-card--journey { flex-direction: column; align-items: stretch; width: 100%; max-width: 100%; min-width: 0; overflow: visible; } .about-panels, .about-panels__inner, .about-panels__grid { width: 100%; max-width: 100%; min-width: 0; } .about-panels__grid { flex-direction: column; flex-wrap: nowrap; overflow: visible; gap: clamp(0.75rem, 2vw, 1rem); } .about-panels .panel-card { flex: 1 1 auto; width: 100%; max-width: 100%; min-width: 0; } .panel-card--journey .panel-card__content, .panel-card--council .panel-card__content { width: 100%; max-width: 100%; min-width: 0; flex: 0 0 auto; box-sizing: border-box; overflow: visible; padding-inline: clamp(1rem, 4vw, 1.25rem); } .panel-card--council .panel-card__content { width: 100%; } .panel-card__title, .panel-card__copy { min-width: 0; max-width: 100%; } .panel-card__copy p, .panel-card__lead, .panel-card__note { overflow-wrap: anywhere; word-break: break-word; } .panel-card--journey .panel-card__deco-heart { position: static; align-self: flex-start; margin-top: 0.35rem; } .panel-card__figure { width: 100%; max-width: 100%; padding: 0 0.75rem 0.85rem; box-sizing: border-box; } .panel-card__figure-img { --panel-council-figure-width: 200px; max-width: min(200px, 100%); } .panel-card--role, .panel-card--approach { min-height: 0; overflow: visible; } .panel-card--role .panel-card__content, .panel-card--approach .panel-card__content { overflow: visible; } .role-icons { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; justify-content: flex-start; width: 100%; max-width: 100%; padding-bottom: 0.25rem; margin-inline: calc(-1 * clamp(1rem, 1.8vw, 1.45rem)); padding-inline: clamp(1rem, 1.8vw, 1.45rem); } .role-icons::-webkit-scrollbar { display: none; } .role-icons__item { flex: 0 0 min(4.75rem, 22vw); min-width: min(4.75rem, 22vw); scroll-snap-align: start; } .role-icons__item:not(:first-child) { border-left: none; padding-left: 0.15rem; } .role-callout { max-width: 100%; } .approach-steps { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; justify-content: flex-start; padding-bottom: 0.25rem; margin-top: 0; margin-inline: calc(-1 * clamp(1rem, 1.8vw, 1.45rem)); padding-inline: clamp(1rem, 1.8vw, 1.45rem); } .approach-steps::-webkit-scrollbar { display: none; } .approach-step { flex: 0 0 auto; min-width: 5.5rem; scroll-snap-align: start; } .approach-step__arrow { flex-shrink: 0; } .about-panels__grid { flex-direction: column; } .about-panels .panel-card { flex: 1 1 auto; width: 100%; max-width: 100%; } .panel-card { min-height: clamp(260px, 42vw, 320px); --panel-bg-position: right bottom; --panel-bg-size: clamp(220px, 72vw, 100%) auto; } .panel-card--journey { --panel-bg-size: clamp(200px, 68vw, 320px) auto; --panel-bg-position: right bottom; } .panel-card--journey .panel-card__content { width: 100%; } .panel-card__content--full, .panel-card--role .panel-card__content, .panel-card--approach .panel-card__content { width: 100%; } .role-callout__text { font-size: 0.82rem; } .approach-step__text { font-size: 0.72rem; } .panel-card__title { font-size: clamp(1.05rem, 3.2vw, 1.3rem); } .panel-card__copy p, .panel-card__lead, .panel-card__note, .panel-card__list li { font-size: 0.88rem; } .compare-different__bar { flex-direction: column; border-radius: 0; overflow: visible; gap: 0.65rem; } .compare-side { flex-direction: column; border-radius: var(--compare-bar-radius); overflow: hidden; } .compare-side--right > .lazy-img-wrap { order: -1; } .compare-side__photo, .compare-side > .lazy-img-wrap .compare-side__photo { flex: none; width: 100%; max-width: 100%; max-height: 200px; min-height: 0; height: auto; object-fit: cover; } .compare-side > .lazy-img-wrap { flex: none; width: 100%; max-width: 100%; height: auto; min-height: 0; } .compare-side--left .compare-side__text, .compare-side--right .compare-side__text { padding: 0.85rem 1rem 1rem; } .compare-different__vs { position: relative; left: auto; top: auto; transform: none; align-self: center; margin: -0.1rem 0; } .compare-side__list--grid { columns: 1; } } @media (max-width: 768px) { .creative-makers-breadcrumbs { justify-content: center; } .creative-makers-breadcrumbs__list { justify-content: center; } .page-hero:not(.home-hero) .page-hero__content { text-align: center; } .page-hero:not(.home-hero) .home-hero__brand { justify-content: center; } .home-hero .hero-headline, .home-hero__title { align-items: flex-start; font-size: clamp(2.85rem, 12vw, 3.6rem); } .home-hero__tagline, .page-hero:not(.home-hero) .page-hero__actions { justify-content: flex-start; } .page-hero:not(.home-hero) .page-hero__text { margin-inline: auto; } .about-hero__title-line, .explore-hero__title-line { text-align: center; } .accessibility-hero__title, .media-policy-hero__title, .media-consent-hero__title { justify-content: center; } /* Home spotlight — tight gap between highlight lines on mobile */ .home-spotlight .spotlight-card__copy p.spotlight-card__highlight { line-height: 1.05; margin: 0; } .home-spotlight .spotlight-card__copy p.spotlight-card__highlight br { display: block; margin: 0; line-height: 0; height: 0; font-size: 0; } } @media (max-width: 639px) { :root { --container-padding: 20px; --section-pad-y: 48px; --main-section-gap-y: 1rem; --announce-pad-y: 6px; --header-pad-y: 8px; } .site-footer__grid { grid-template-columns: 1fr; gap: 1.35rem; } .site-footer__col--brand, .site-footer__col--newsletter, .site-footer__col--art { grid-column: auto; } .site-footer__col--art { justify-content: center; } .site-footer__col--newsletter { grid-column: 1 / -1; } .site-footer__newsletter-layout { align-items: center; } .site-footer__legal-inner { flex-direction: column; text-align: center; gap: 0.45rem; } .site-footer__legal-sep { display: none; } .site-header__logo img { width: auto; --header-logo-height: 72px; height: auto; max-height: 72px; max-width: min(220px, calc(100vw - 96px)); object-fit: contain; background: transparent; } .home-hero__logo { --home-hero-logo-width: 260px; } .home-hero .hero-headline, .home-hero__title { font-size: clamp(2.7rem, 13vw, 3.35rem); } .about-hero__banner, .contact-hero .about-hero__banner, .for-parents-hero .about-hero__banner, .get-involved-hero .about-hero__banner, .vision-hero .about-hero__banner, .explore-hero__banner { max-height: min(420px, 52vh); object-position: center center; } .partners-hero.vision-hero .about-hero__banner { max-height: min(370px, calc(52vh - 50px)); min-height: unset; } .about-hero__title, .explore-hero__title, .vision-hero__title, .get-involved-hero__title, .contact-hero__title, .for-parents-hero__title { font-size: 26px; line-height: 1.25; } .get-involved-hero__title { --get-involved-hero-title-size: 26px; } .contact-hero__title { --contact-hero-title-size: 26px; } .for-parents-hero__title { --for-parents-hero-title-size: 26px; } .contact-hero__copy { font-size: 0.95rem; } .page-hero__actions { flex-direction: column; width: 100%; } .home-hero .page-hero__actions { flex-direction: column; flex-wrap: nowrap; justify-content: flex-start; align-items: stretch; width: 100%; } .page-hero__actions .btn { width: 100%; white-space: normal; text-align: center; } .home-hero .page-hero__actions .btn { white-space: normal; } .page-hero.explore-hero .page-hero__inner { gap: 0; row-gap: 0; } .page-hero.explore-hero .explore-hero__media, .page-hero.explore-hero .hero-image-wrap { margin-top: 0; } .page-hero.explore-hero .hero-headline .explore-hero__title-line--navy { display: inline; white-space: normal; margin-bottom: 0; } .page-hero.explore-hero .hero-headline .explore-hero__title-line--navy + .explore-hero__title-line--navy::before { content: ' '; } .page-hero.explore-hero .hero-headline .explore-hero__title-line--pink { display: block; } .our-story__media { max-width: 100%; } .our-story__aside { width: min(140px, 50vw); } .our-story__title { font-size: clamp(1.2rem, 5.2vw, 1.45rem); } .our-story__text { font-size: 0.88rem; } .our-story__text--highlight { font-size: 0.92rem; } .we-believe__title { font-size: clamp(1.15rem, 5.5vw, 1.4rem); } .believe-card { flex: 0 0 min(220px, 78vw); padding: 0.95rem 0.65rem; } .believe-card__icon { width: 42px; } .believe-card__text { font-size: 0.8rem; --believe-text-max-width: 9.75rem; } .panel-card__figure-img { --panel-council-figure-width: 165px; } .panel-card__content { padding: 1rem clamp(1rem, 4vw, 1.15rem) 1.85rem; width: 100%; max-width: 100%; min-width: 0; overflow: visible; box-sizing: border-box; } .panel-card--journey .panel-card__deco-heart { position: static; margin-top: 0.35rem; } .role-icons { margin-inline: -0.9rem; padding-inline: 0.9rem; } .approach-steps { margin-inline: -0.9rem; padding-inline: 0.9rem; } .panel-card { min-height: clamp(300px, 88vw, 380px); --panel-bg-size: clamp(200px, 68vw, 320px) auto; --panel-bg-position: center bottom; } .panel-card--journey { --panel-bg-size: clamp(180px, 62vw, 280px) auto; --panel-bg-position: right bottom; } .panel-card--role, .panel-card--approach { min-height: 0; } .panel-card__content--full { padding-bottom: 1rem; } .role-icons__label { font-size: 0.72rem; } .panel-card__title { font-size: clamp(1rem, 4.8vw, 1.2rem); } .panel-card__copy p, .panel-card__lead, .panel-card__note, .panel-card__list li { font-size: 0.84rem; } .compare-different__title { font-size: clamp(1.15rem, 5vw, 1.45rem); } .compare-side__label { font-size: 0.86rem; } .compare-side__list li { font-size: 0.8rem; } } /* ??? Apply to Become page ??? */ .apply-to-become-page { --apply-form-main-col: 0.68fr; --apply-form-sidebar-col: 0.32fr; --apply-section-badge-size: clamp(24px, 2.2vw, 28px); --apply-section-icon-size: clamp(36px, 3.2vw, 44px); --apply-sidebar-icon-size: 60px; --apply-field-icon-size: clamp(20px, 1.85vw, 24px); --apply-submit-star-size: clamp(48px, 4.5vw, 56px); --apply-sidebar-card-radius: 18px; } .apply-hero { background-color: #fff; min-height: 0; } .apply-hero .page-hero__inner { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); align-items: center; gap: var(--home-hero-col-gap); } .apply-hero .page-hero__content { width: 100%; max-width: none; } .apply-hero__title { font-family: var(--font-heading); font-weight: 700; line-height: 1.12; letter-spacing: -0.02em; margin: 0 0 clamp(0.85rem, 1.2vw, 1rem); } .apply-hero__title-line { display: block; } .apply-hero__title-line--pink { color: var(--color-pink); font-size: clamp(2rem, 4vw, 64px); } .apply-hero__title-line--navy { color: var(--color-navy); font-size: clamp(2.1rem, 4.2vw, 68px); } .apply-hero__text { font-family: var(--font-body); font-size: clamp(0.92rem, 1vw, 1.02rem); line-height: 1.55; color: var(--color-navy); margin: 0 0 clamp(0.85rem, 1.25vw, 1.05rem); max-width: 28rem; } .apply-hero__note-wrap { margin-bottom: clamp(1.15rem, 2.2vw, 1.75rem); } .apply-hero__note { display: flex; align-items: center; gap: clamp(0.65rem, 1vw, 0.85rem); padding: clamp(0.7rem, 1.05vw, 0.9rem) clamp(0.75rem, 1.1vw, 0.95rem); border-radius: var(--experience-card-radius); background-color: var(--believe-card-pink); max-width: 28rem; width: 100%; box-sizing: border-box; } .apply-hero__note-icon { flex-shrink: 0; width: clamp(44px, 3.8vw, 52px); height: clamp(44px, 3.8vw, 52px); object-fit: contain; } .apply-hero__note-text { font-family: var(--font-body); font-size: clamp(0.82rem, 0.9vw, 0.92rem); line-height: 1.48; color: var(--color-navy); margin: 0; } .apply-hero__banner { max-height: none; min-height: unset; } /* Apply hero ? mobile: zero gap above banner image */ @media (max-width: 767px) { #main-content > section.page-hero.apply-hero, .page-hero.apply-hero { gap: 0 !important; } #main-content > section.page-hero.apply-hero .page-hero__inner, .page-hero.apply-hero .page-hero__inner { gap: 0 !important; row-gap: 0 !important; } #main-content > section.page-hero.apply-hero .page-hero__content, .page-hero.apply-hero .page-hero__content { padding-bottom: 0 !important; margin-bottom: 0 !important; } #main-content > section.page-hero.apply-hero .hero-copy, .page-hero.apply-hero .hero-copy { margin-bottom: 0 !important; } #main-content > section.page-hero.apply-hero .about-hero__media, #main-content > section.page-hero.apply-hero .hero-image-wrap, .page-hero.apply-hero .about-hero__media, .page-hero.apply-hero .hero-image-wrap { margin-top: 0 !important; padding-top: 0 !important; } #main-content > section.page-hero.apply-hero .about-hero__media .lazy-img-wrap, #main-content > section.page-hero.apply-hero .about-hero__media picture, .page-hero.apply-hero .about-hero__media .lazy-img-wrap, .page-hero.apply-hero .about-hero__media picture { margin-top: 0 !important; padding-top: 0 !important; } #main-content > section.page-hero.apply-hero .apply-hero__banner, .page-hero.apply-hero .apply-hero__banner, .page-hero.apply-hero picture img { margin-top: 0 !important; padding-top: 0 !important; object-position: center top !important; } } @media (max-width: 1200px) { .apply-hero .page-hero__inner { row-gap: 0; } } .apply-form { background-color: #fff; padding-top: 0; overflow: visible; } /* Keep sidebar positioning stable ? transform on this section breaks fixed/sticky */ .apply-form.scroll-rise { opacity: 1; transform: none; animation: none; } /* Keep home horizontal sliders swipeable ? section transform breaks touch scroll */ .home-pillars.scroll-rise, .home-different.scroll-rise, .home-explore.scroll-rise, .home-spotlight.scroll-rise, .home-reality.scroll-rise { opacity: 1; transform: none; animation: none; } .apply-form__inner { display: grid; grid-template-columns: minmax(0, var(--apply-form-main-col)) minmax(0, var(--apply-form-sidebar-col)); align-items: start; gap: clamp(0.85rem, 1.45vw, 1.25rem); } .apply-form__form { display: flex; flex-direction: column; gap: clamp(0.85rem, 1.25vw, 1.05rem); } .apply-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(0.7rem, 1.1vw, 0.9rem); } .apply-section { margin: 0; padding: clamp(0.85rem, 1.2vw, 1rem); border: 1px solid rgba(0, 27, 102, 0.08); border-radius: var(--experience-card-radius); background-color: #fff; } .apply-section--parent { --apply-section-accent: var(--color-pink); --apply-section-accent-soft: rgba(238, 29, 120, 0.08); --apply-section-accent-hover: var(--color-pink-soft); --apply-section-accent-text: #fff; background-color: var(--believe-card-pink); border-color: rgba(238, 29, 120, 0.12); } .apply-section--child { --apply-section-accent: var(--color-yellow); --apply-section-accent-soft: rgba(245, 197, 24, 0.18); --apply-section-accent-hover: rgba(245, 197, 24, 0.16); --apply-section-accent-text: var(--color-navy); background-color: var(--believe-card-yellow); border-color: rgba(245, 197, 24, 0.2); } .apply-section--question { --apply-section-accent: var(--color-green); --apply-section-accent-soft: rgba(111, 191, 74, 0.15); --apply-section-accent-hover: rgba(111, 191, 74, 0.12); --apply-section-accent-text: #fff; background-color: var(--believe-card-green); border-color: rgba(111, 191, 74, 0.18); } .apply-section--more { --apply-section-accent: var(--color-plane); --apply-section-accent-soft: rgba(155, 89, 208, 0.12); --apply-section-accent-hover: rgba(155, 89, 208, 0.1); --apply-section-accent-text: #fff; background-color: var(--believe-card-purple); border-color: rgba(155, 89, 208, 0.15); } .apply-section--idea { --apply-section-accent: var(--partners-ways-blue); --apply-section-accent-soft: rgba(43, 127, 212, 0.12); --apply-section-accent-hover: rgba(43, 127, 212, 0.1); --apply-section-accent-text: #fff; background-color: var(--believe-card-blue); border-color: rgba(43, 127, 212, 0.14); } .apply-section--consent { --apply-section-accent: var(--color-pink); --apply-section-accent-soft: rgba(238, 29, 120, 0.08); --apply-section-accent-hover: var(--color-pink-soft); --apply-section-accent-text: #fff; background-color: var(--believe-card-pink); border-color: rgba(238, 29, 120, 0.12); } .apply-section--about { --apply-section-accent: var(--color-orange); --apply-section-accent-soft: rgba(245, 166, 35, 0.15); --apply-section-accent-hover: rgba(245, 166, 35, 0.12); --apply-section-accent-text: #fff; background-color: #fff8ed; border-color: rgba(245, 166, 35, 0.2); } .apply-section .contact-field__box:focus-within { border-color: var(--apply-section-accent); box-shadow: 0 0 0 3px var(--apply-section-accent-soft); } .apply-section .apply-check input, .apply-section .apply-radio input { accent-color: var(--apply-section-accent); } .apply-section .apply-select__trigger:focus-visible, .apply-section .apply-select.is-open .apply-select__trigger { border-color: var(--apply-section-accent); box-shadow: 0 0 0 3px var(--apply-section-accent-soft); } .apply-section .apply-select__option:hover, .apply-section .apply-select__option:focus-visible { background-color: var(--apply-section-accent-hover); } .apply-section .apply-select__option.is-selected { background-color: var(--apply-section-accent); color: var(--apply-section-accent-text); } .apply-section--idea .apply-upload:hover .apply-upload__box, .apply-section--idea .apply-upload:focus-within .apply-upload__box { border-color: var(--apply-section-accent); } .apply-section--idea .apply-upload__cloud, .apply-section--idea .apply-upload__text { color: var(--apply-section-accent); } .apply-form__form .contact-field { display: flex; flex-direction: column; gap: clamp(0.35rem, 0.55vw, 0.45rem); } .apply-field__label { display: block; font-family: var(--font-body); font-size: clamp(0.84rem, 0.92vw, 0.94rem); font-weight: 600; line-height: 1.35; color: var(--color-navy); } .apply-field__hint { display: block; font-family: var(--font-body); font-size: clamp(0.78rem, 0.86vw, 0.88rem); line-height: 1.45; color: rgba(0, 27, 102, 0.72); margin-top: -0.15rem; } .apply-select { position: relative; width: 100%; } .apply-select__native { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; clip: rect(0 0 0 0); overflow: hidden; white-space: nowrap; } .apply-select__trigger { width: 100%; justify-content: space-between; text-align: left; cursor: pointer; appearance: none; -webkit-appearance: none; font-family: var(--font-body); font-size: clamp(0.86rem, 0.94vw, 0.96rem); line-height: 1.4; color: var(--color-navy); background-color: #fff; } .apply-select__trigger:focus-visible { outline: none; } .apply-select.is-open .apply-select__trigger { outline: none; } .apply-select:has(.apply-select__native:invalid:not(:focus)) .apply-select__trigger:not(:focus-visible) { border-color: var(--contact-form-input-border); } .apply-select__value { flex: 1 1 auto; min-width: 0; } .apply-select__value.is-placeholder { color: rgba(0, 27, 102, 0.68); } .apply-select__chevron { flex-shrink: 0; width: 18px; height: 18px; color: var(--color-navy); transition: transform var(--ease-soft); } .apply-select.is-open .apply-select__chevron { transform: rotate(180deg); } .apply-select__menu { position: absolute; top: calc(100% + 0.35rem); left: 0; right: 0; z-index: 20; list-style: none; margin: 0; padding: 0.35rem; border: 1px solid rgba(0, 27, 102, 0.1); border-radius: var(--contact-form-input-radius); background-color: #fff; box-shadow: var(--card-shadow); max-height: 220px; overflow-y: auto; } .apply-select__option { display: block; width: 100%; padding: 0.55rem 0.75rem; border: none; border-radius: calc(var(--contact-form-input-radius) - 4px); background: transparent; font-family: var(--font-body); font-size: clamp(0.86rem, 0.94vw, 0.96rem); line-height: 1.35; color: var(--color-navy); text-align: left; cursor: pointer; transition: background-color var(--ease-soft), color var(--ease-soft); } .apply-select__option:hover, .apply-select__option:focus-visible { outline: none; } .apply-select__option.is-selected { font-weight: 600; } .apply-form__form .contact-field__textarea::placeholder { color: rgba(0, 27, 102, 0.55); } .apply-section__head { display: flex; align-items: center; gap: clamp(0.45rem, 0.75vw, 0.6rem); margin: 0 0 clamp(0.65rem, 0.95vw, 0.8rem); padding: 0; width: 100%; } .apply-section__body { display: flex; flex-direction: column; gap: clamp(0.7rem, 1.1vw, 0.9rem); padding: 0; background: transparent; border: none; } .apply-section__badge { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: var(--apply-section-badge-size); height: var(--apply-section-badge-size); border-radius: 50%; font-family: var(--font-body); font-size: clamp(0.78rem, 0.86vw, 0.88rem); font-weight: 700; color: #fff; line-height: 1; } .apply-section__badge--pink { background-color: var(--color-pink); } .apply-section__badge--yellow { background-color: var(--color-yellow); color: var(--color-navy); } .apply-section__badge--orange { background-color: var(--color-orange); color: #fff; } .apply-section__badge--green { background-color: var(--color-green); } .apply-section__badge--purple { background-color: var(--color-plane); } .apply-section__badge--blue { background-color: var(--partners-ways-blue); } .apply-section__badge--red { background-color: var(--color-pink); } .apply-section__icon { flex-shrink: 0; width: var(--apply-section-icon-size); height: var(--apply-section-icon-size); object-fit: contain; } .apply-section__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1rem, 1.12vw, 1.15rem); line-height: 1.25; color: var(--color-navy); } .apply-form__form .contact-field__box, .apply-form__form .apply-upload__box { background-color: #fff; } .apply-form__form .contact-field__input, .apply-form__form .contact-field__textarea { background-color: #fff; } .apply-field__icon { flex-shrink: 0; width: var(--apply-field-icon-size); height: var(--apply-field-icon-size); object-fit: contain; opacity: 0.92; } .apply-form__form .contact-field__icon { width: var(--apply-field-icon-size); height: var(--apply-field-icon-size); } .apply-more__grid { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(0.75rem, 1.15vw, 0.95rem); margin-bottom: clamp(0.75rem, 1.1vw, 0.95rem); } .apply-more__label { font-family: var(--font-body); font-size: clamp(0.84rem, 0.92vw, 0.94rem); font-weight: 600; line-height: 1.4; color: var(--color-navy); margin: 0 0 clamp(0.45rem, 0.7vw, 0.6rem); } .apply-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; } .apply-program-item { display: flex; align-items: flex-start; gap: 0.5rem; } .apply-check--program { flex-shrink: 0; margin-top: 0.15rem; } .apply-program-item__content { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 0.65rem; min-width: 0; } .apply-program-item__name { font-family: var(--font-body); font-size: clamp(0.82rem, 0.9vw, 0.92rem); line-height: 1.45; font-weight: 600; color: var(--color-navy); text-decoration: none; } .apply-program-item__name:hover, .apply-program-item__name:focus-visible { color: var(--color-pink); text-decoration: underline; } .apply-program-item__learn-more { font-family: var(--font-body); font-size: clamp(0.75rem, 0.82vw, 0.84rem); line-height: 1.45; font-weight: 600; color: var(--color-pink); text-decoration: none; white-space: nowrap; } .apply-program-item__learn-more:hover, .apply-program-item__learn-more:focus-visible { text-decoration: underline; } .apply-check, .apply-radio { display: inline-flex; align-items: flex-start; gap: 0.5rem; font-family: var(--font-body); font-size: clamp(0.82rem, 0.9vw, 0.92rem); line-height: 1.45; color: var(--color-navy); cursor: pointer; } .apply-check--block { display: flex; } .apply-check input, .apply-radio input { flex-shrink: 0; width: 16px; height: 16px; margin-top: 0.15rem; accent-color: var(--color-pink); } .apply-radio-group { display: flex; flex-wrap: wrap; gap: clamp(0.55rem, 1vw, 0.85rem); margin-bottom: clamp(0.75rem, 1.1vw, 0.95rem); } .apply-upload { display: block; cursor: pointer; } .apply-upload__input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .apply-upload__box { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.35rem; min-height: clamp(120px, 14vw, 150px); padding: clamp(1rem, 1.5vw, 1.25rem); border: 2px dashed rgba(43, 127, 212, 0.45); border-radius: var(--experience-photo-radius); background-color: #fff; text-align: center; transition: border-color var(--ease-soft), background-color var(--ease-soft); } .apply-upload:hover .apply-upload__box, .apply-upload:focus-within .apply-upload__box { border-color: var(--partners-ways-blue); background-color: #fff; } .apply-upload__cloud { color: var(--partners-ways-blue); } .apply-upload__text { font-family: var(--font-body); font-size: clamp(0.88rem, 0.96vw, 0.98rem); font-weight: 600; color: var(--partners-ways-blue); } .apply-upload__hint { font-family: var(--font-body); font-size: clamp(0.76rem, 0.84vw, 0.86rem); color: rgba(0, 27, 102, 0.68); } .apply-idea__layout { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(0.85rem, 1.25vw, 1.15rem); align-items: stretch; } .apply-idea__copy { display: flex; align-items: center; min-width: 0; } .apply-idea__text { font-family: var(--font-body); font-size: clamp(0.84rem, 0.92vw, 0.94rem); line-height: 1.55; color: var(--color-navy); margin: 0; } .apply-idea__upload { min-width: 0; height: 100%; } .apply-idea__upload .apply-upload__box { min-height: clamp(140px, 15vw, 170px); height: 100%; } .apply-consent-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; } .apply-consent-list a { color: var(--color-pink); text-decoration: underline; text-underline-offset: 0.12em; } .apply-submit { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: clamp(1rem, 1.5vw, 1.35rem); padding: clamp(1rem, 1.45vw, 1.25rem); border: 1px solid rgba(238, 29, 120, 0.12); border-radius: var(--experience-card-radius); background-color: var(--believe-card-pink); } .apply-submit__copy { display: flex; align-items: flex-start; gap: clamp(0.65rem, 1vw, 0.85rem); min-width: 0; } .apply-submit__star { flex-shrink: 0; width: var(--apply-submit-star-size); height: var(--apply-submit-star-size); object-fit: contain; } .apply-submit__text { min-width: 0; } .apply-submit__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.15rem, 1.65vw, 1.45rem); line-height: 1.2; color: var(--color-navy); margin: 0 0 clamp(0.35rem, 0.55vw, 0.45rem); text-align: left; } .apply-submit__lead { font-family: var(--font-body); font-size: clamp(0.82rem, 0.9vw, 0.92rem); line-height: 1.45; color: var(--color-navy); margin: 0; } .apply-submit__btn { flex-shrink: 0; justify-self: end; min-width: clamp(180px, 18vw, 220px); white-space: nowrap; gap: 0.55rem; } .apply-submit__plane { width: clamp(18px, 1.65vw, 22px); height: clamp(18px, 1.65vw, 22px); transform: rotate(-8deg); } .apply-form__sidebar { display: flex; flex-direction: column; gap: clamp(0.75rem, 1.15vw, 0.95rem); min-width: 0; } .apply-form__sidebar-sticky { display: flex; flex-direction: column; gap: clamp(0.75rem, 1.15vw, 0.95rem); width: 100%; } @media (min-width: 1025px) { .apply-form__sidebar { align-self: start; position: relative; z-index: 5; } .apply-form__sidebar-sticky { max-height: none; overflow: visible; } .apply-form__sidebar.is-fixed .apply-form__sidebar-sticky { position: fixed; top: var(--apply-form-sticky-top, clamp(1.25rem, 2.5vw, 2rem)); z-index: 5; } .apply-form__sidebar.is-at-bottom .apply-form__sidebar-sticky { position: absolute; top: auto; bottom: 0; left: 0; width: 100%; } } .apply-sidebar-card { border-radius: var(--apply-sidebar-card-radius); padding: clamp(1rem, 1.35vw, 1.2rem) clamp(0.85rem, 1.15vw, 1rem); } .apply-sidebar-card--about { background-color: var(--believe-card-yellow); } .apply-sidebar-card--timeline { background-color: var(--believe-card-purple); } .apply-sidebar-card--questions { background-color: var(--believe-card-blue); } .apply-sidebar-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 0.5rem; margin-bottom: clamp(0.75rem, 1.1vw, 0.95rem); } .apply-sidebar-card__title { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.4rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1rem, 1.12vw, 1.12rem); line-height: 1.25; color: var(--color-navy); margin: 0 0 clamp(0.65rem, 0.95vw, 0.8rem); } .apply-sidebar-card__head .apply-sidebar-card__title { margin-bottom: 0; } .apply-sidebar-card__bubble { flex-shrink: 0; color: var(--partners-ways-blue); } .apply-sidebar-card__plane { flex-shrink: 0; width: clamp(44px, 4vw, 52px); height: auto; object-fit: contain; } .apply-sidebar-card__text { font-family: var(--font-body); font-size: clamp(0.84rem, 0.92vw, 0.94rem); line-height: 1.5; color: var(--color-navy); margin: 0 0 clamp(0.75rem, 1.05vw, 0.95rem); } .apply-sidebar-card__btn { width: 100%; justify-content: center; } .apply-sidebar-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(0.65rem, 0.95vw, 0.8rem); } .apply-sidebar-list li { display: flex; align-items: center; gap: clamp(0.55rem, 0.85vw, 0.7rem); } .apply-sidebar-list__icon-slot { flex-shrink: 0; display: flex; align-items: center; justify-content: center; width: 60px; height: 60px; } .apply-sidebar-list__icon { flex-shrink: 0; width: 60px; height: 60px; object-fit: contain; } .apply-sidebar-list__icon--heart { width: 36px; height: 36px; } .apply-sidebar-list span { font-family: var(--font-body); font-size: clamp(0.82rem, 0.9vw, 0.92rem); line-height: 1.48; color: var(--color-navy); } .apply-timeline { display: flex; flex-direction: column; gap: clamp(0.75rem, 1.15vw, 1rem); } .apply-timeline__step { display: grid; grid-template-columns: clamp(16px, 1.5vw, 22px) minmax(0, 1fr); column-gap: clamp(0.55rem, 0.85vw, 0.75rem); align-items: start; } .apply-timeline__rail { position: relative; display: flex; justify-content: center; align-self: stretch; min-height: 100%; padding-top: 0.35rem; } .apply-timeline__dot { width: clamp(9px, 0.85vw, 11px); height: clamp(9px, 0.85vw, 11px); border-radius: 50%; background-color: var(--color-plane); flex-shrink: 0; z-index: 1; } .apply-timeline__rail::after { content: ''; position: absolute; top: calc(0.35rem + clamp(9px, 0.85vw, 11px) + 0.25rem); bottom: calc(-1 * clamp(0.75rem, 1.15vw, 1rem)); left: 50%; transform: translateX(-50%); border-left: 2px dashed rgba(155, 89, 208, 0.38); } .apply-timeline__step:last-child .apply-timeline__rail::after { display: none; } .apply-timeline__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(0.88rem, 0.96vw, 0.98rem); line-height: 1.25; color: var(--color-plane); margin: 0 0 0.25rem; } .apply-timeline__text { font-family: var(--font-body); font-size: clamp(0.78rem, 0.86vw, 0.88rem); line-height: 1.48; color: var(--color-navy); margin: 0; } .apply-sidebar__door { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; margin-top: 0.15rem; } @media (max-width: 1024px) { .apply-hero .page-hero__inner, .apply-form__inner { grid-template-columns: 1fr; } .apply-form__main, .apply-form__sidebar { min-width: 0; max-width: 100%; } .apply-hero__banner { max-height: 360px; object-position: center bottom; } .apply-hero__note-wrap { margin-bottom: clamp(1.25rem, 4vw, 1.75rem); } .apply-hero__note { max-width: none; } .apply-form__row, .apply-more__grid, .apply-idea__layout { grid-template-columns: 1fr; } } @media (max-width: 640px) { .apply-hero__banner { max-height: min(420px, 52vh); object-position: center center; } .apply-radio-group { flex-direction: column; align-items: flex-start; } .apply-submit { grid-template-columns: 1fr; } .apply-submit__btn { width: 100%; justify-self: stretch; } .volunteer-interest-grid { grid-template-columns: 1fr; } } /* ??? Volunteer Application page ??? */ .volunteer-application-page .apply-section--parent { background-color: #fffbfd; border-color: rgba(238, 29, 120, 0.06); } .volunteer-application-page .apply-section--about { background-color: #fffefa; border-color: rgba(245, 166, 35, 0.08); } .volunteer-application-page .apply-section--question { background-color: #fcfefc; border-color: rgba(111, 191, 74, 0.08); } .volunteer-application-page .apply-section--more { background-color: #fdfcff; border-color: rgba(155, 89, 208, 0.08); } .volunteer-application-page .apply-section--idea { background-color: #fbfdff; border-color: rgba(43, 127, 212, 0.08); } .volunteer-application-page .apply-section--consent, .volunteer-application-page .volunteer-section--agreement { background-color: #fffbfd; border-color: rgba(238, 29, 120, 0.06); } .volunteer-application-page .volunteer-hero__title .apply-hero__title-line { display: inline; } .volunteer-application-page .volunteer-hero__title .apply-hero__title-line--pink, .volunteer-application-page .volunteer-hero__title .apply-hero__title-line--navy { font-size: clamp(1.65rem, 3vw, 48px); } .volunteer-application-page .volunteer-hero__title .apply-hero__title-line--pink { color: var(--color-pink); } .volunteer-application-page .volunteer-hero__title .apply-hero__title-line--navy { color: var(--color-navy); } .volunteer-application-page .apply-section--parent:not(.volunteer-section--agreement) .apply-section__icon { width: var(--apply-section-badge-size); height: var(--apply-section-badge-size); } .volunteer-application-page .apply-hero__note { background-color: #fff5f9; } .volunteer-application-page { --volunteer-sidebar-title-size: clamp(1.08rem, 1.25vw, 1.22rem); --volunteer-sidebar-title-large-size: clamp(1.22rem, 1.5vw, 1.48rem); --volunteer-sidebar-title-icon-size: clamp(28px, 2.5vw, 36px); --volunteer-sidebar-check-size: clamp(20px, 1.65vw, 22px); --volunteer-sidebar-spotlight-width: 88%; --volunteer-sidebar-spotlight-max: 240px; --volunteer-sidebar-calendar-width: 78%; --volunteer-sidebar-calendar-max: 180px; } .volunteer-application-page .apply-sidebar-card__title { font-size: var(--volunteer-sidebar-title-size); } .volunteer-application-page .volunteer-sidebar-card--spotlight { background-color: var(--believe-card-pink); display: flex; flex-direction: column; padding-bottom: 0; overflow: hidden; } .volunteer-application-page .volunteer-sidebar-card--why { background-color: var(--believe-card-yellow); color: var(--color-navy); } .volunteer-application-page .volunteer-sidebar-card--why .apply-sidebar-card__title, .volunteer-application-page .volunteer-sidebar-card--why .apply-sidebar-list span { color: var(--color-navy); } .volunteer-application-page .volunteer-sidebar-card--commitment { display: flex; flex-direction: column; padding-bottom: clamp(0.75rem, 1.1vw, 0.95rem); background-color: var(--believe-card-purple); } .volunteer-application-page .volunteer-sidebar-card--note { background-color: var(--believe-card-blue); } .volunteer-application-page .volunteer-sidebar-card--questions { background-color: var(--believe-card-purple); } .volunteer-sidebar-card__title--hearts { display: flex; align-items: flex-start; gap: 0.45rem; flex-wrap: wrap; } .volunteer-sidebar-card__title--large { font-size: var(--volunteer-sidebar-title-large-size); line-height: 1.22; } .volunteer-sidebar-card__title-text { flex: 1; min-width: 0; } .volunteer-sidebar-card__title--icon.volunteer-sidebar-card__title--large { align-items: flex-start; } .volunteer-sidebar-questions-btn { color: var(--color-plane); border-color: var(--color-plane); } .volunteer-sidebar-questions-btn:hover { background-color: rgba(155, 89, 208, 0.12); color: var(--color-plane); border-color: var(--color-plane); } .volunteer-sidebar-card__title--icon { display: inline-flex; align-items: center; gap: 0.5rem; } .volunteer-sidebar-title-heart, .volunteer-sidebar-title-icon { flex-shrink: 0; width: var(--volunteer-sidebar-title-icon-size); height: var(--volunteer-sidebar-title-icon-size); object-fit: contain; } .volunteer-sidebar-card--spotlight .apply-sidebar-card__text { margin-bottom: clamp(0.55rem, 0.85vw, 0.75rem); } .volunteer-application-page .volunteer-sidebar-list .apply-sidebar-list__icon { width: var(--volunteer-sidebar-check-size); height: var(--volunteer-sidebar-check-size); } .volunteer-application-page .volunteer-sidebar-list li { align-items: center; gap: clamp(0.55rem, 0.85vw, 0.7rem); } .volunteer-checklist--inline { flex-direction: row; flex-wrap: wrap; align-items: center; gap: clamp(0.75rem, 1.35vw, 1.15rem); margin-bottom: clamp(0.75rem, 1.1vw, 0.95rem); } .volunteer-checklist--inline li { margin: 0; } .volunteer-application-page .apply-section--idea .apply-radio-group { flex-direction: row; align-items: center; gap: clamp(1rem, 1.75vw, 1.35rem); } .volunteer-application-page .apply-section--idea .apply-radio { align-items: center; } .volunteer-application-page .apply-section--idea .apply-radio input { margin-top: 0; } .volunteer-interest-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.65rem, 1vw, 0.85rem); } .volunteer-interest-card { display: block; cursor: pointer; } .volunteer-interest-card input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .volunteer-interest-card__inner { display: flex; flex-direction: row; align-items: center; justify-content: flex-start; gap: clamp(0.5rem, 0.8vw, 0.65rem); min-height: clamp(64px, 6vw, 72px); padding: clamp(0.65rem, 0.95vw, 0.8rem); border: 1px solid rgba(0, 27, 102, 0.1); border-radius: var(--experience-photo-radius); background-color: #fff; text-align: left; font-family: var(--font-body); font-size: clamp(0.78rem, 0.86vw, 0.88rem); font-weight: 600; line-height: 1.35; color: var(--color-navy); transition: border-color var(--ease-soft), background-color var(--ease-soft), transform var(--ease-soft); } .volunteer-interest-card__icon { flex-shrink: 0; width: clamp(30px, 2.8vw, 36px); height: clamp(30px, 2.8vw, 36px); object-fit: contain; } .volunteer-interest-card input:checked + .volunteer-interest-card__inner, .volunteer-interest-card__inner:hover { border-color: var(--color-plane); background-color: #faf7fe; } .volunteer-submit-btn { width: 100%; margin-top: clamp(0.85rem, 1.25vw, 1rem); font-size: clamp(0.98rem, 1.05vw, 1.08rem); } .volunteer-sidebar-spotlight { display: block; width: var(--volunteer-sidebar-spotlight-width); max-width: var(--volunteer-sidebar-spotlight-max); height: auto; object-fit: contain; margin: auto auto 0; padding-top: clamp(0.35rem, 0.55vw, 0.5rem); } .volunteer-sidebar-commitment { display: block; width: var(--volunteer-sidebar-calendar-width); max-width: var(--volunteer-sidebar-calendar-max); height: auto; object-fit: contain; margin: auto auto 0; padding-top: clamp(0.45rem, 0.7vw, 0.65rem); } .volunteer-sidebar-card--commitment .apply-sidebar-card__text { margin-bottom: clamp(0.55rem, 0.85vw, 0.75rem); } .volunteer-sidebar-note { display: flex; align-items: flex-start; gap: clamp(0.55rem, 0.85vw, 0.75rem); } .volunteer-sidebar-note__copy { flex: 1; min-width: 0; } .volunteer-sidebar-note__copy .apply-sidebar-card__text { margin-bottom: clamp(0.55rem, 0.85vw, 0.75rem); } .volunteer-sidebar-note__copy .apply-sidebar-card__text:last-child { margin-bottom: 0; } .volunteer-sidebar-note__lock { flex-shrink: 0; width: clamp(32px, 2.8vw, 38px); height: auto; object-fit: contain; margin-top: 0.15rem; } .volunteer-footer-note { background-color: #fff; } #main-content > section.volunteer-footer-note { padding-top: clamp(0.35rem, 0.65vw, 0.55rem); padding-bottom: clamp(0.55rem, 0.95vw, 0.75rem); } .volunteer-footer-note__inner { width: 100%; } .volunteer-footer-note__card { display: flex; align-items: center; gap: clamp(1rem, 2vw, 1.65rem); padding: clamp(1rem, 1.45vw, 1.25rem) clamp(1.15rem, 2vw, 1.75rem); background-color: var(--believe-card-pink); border: 1px solid rgba(238, 29, 120, 0.08); border-radius: var(--apply-sidebar-card-radius); } .volunteer-footer-note__envelope { flex: 0 0 auto; width: clamp(110px, 10vw, 150px); height: auto; object-fit: contain; } .volunteer-footer-note__copy { flex: 1 1 auto; min-width: 0; } .volunteer-footer-note__lead { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.35rem, 1.65vw, 1.65rem); line-height: 1.32; color: var(--color-navy); margin: 0 0 clamp(0.25rem, 0.4vw, 0.35rem); } .volunteer-footer-note__thanks { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.55rem, 2.1vw, 2rem); line-height: 1.28; color: var(--color-pink); margin: 0; } .volunteer-footer-note__deco { flex: 0 0 auto; display: flex; align-items: center; gap: clamp(0.45rem, 0.85vw, 0.75rem); margin-left: auto; } .volunteer-footer-note__plane { width: 430px; max-width: 100%; height: auto; object-fit: contain; } .volunteer-footer-note__heart { width: clamp(72px, 6.5vw, 96px); height: auto; object-fit: contain; } @media (max-width: 900px) { .volunteer-footer-note__card { flex-wrap: wrap; justify-content: center; text-align: center; } .volunteer-footer-note__deco { margin-left: 0; justify-content: center; width: 100%; } } @media (max-width: 900px) { .volunteer-interest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ??? Partner Inquiry page ??? */ .partner-inquiry-page { --partner-section-pink: #fff5f9; --partner-section-purple: #f9f6fd; --partner-section-yellow: #fffaf0; --partner-section-green: #f2fbf6; --partner-section-blue: #f4f9fd; --partner-section-lavender: #f7f3fb; --partner-deco-icon-size: clamp(36px, 3.2vw, 44px); --partner-intro-icon-size: 32px; } .partner-form-intro { display: flex; align-items: flex-start; gap: clamp(0.65rem, 1vw, 0.85rem); padding: clamp(0.85rem, 1.2vw, 1rem); border: 1px solid rgba(238, 29, 120, 0.08); border-radius: var(--experience-card-radius); background-color: var(--partner-section-pink); } .partner-inquiry-page .partner-form-intro__icon { flex-shrink: 0; width: var(--partner-intro-icon-size); height: var(--partner-intro-icon-size); max-width: var(--partner-intro-icon-size); max-height: var(--partner-intro-icon-size); object-fit: contain; } .partner-form-intro__text { display: flex; flex-direction: column; gap: clamp(0.25rem, 0.45vw, 0.35rem); } .partner-form-intro__title { font-family: var(--font-heading); font-size: clamp(1.05rem, 1.25vw, 1.25rem); font-weight: 700; line-height: 1.3; color: var(--color-pink); margin: 0; } .partner-form-intro__desc { font-family: var(--font-body); font-size: clamp(0.88rem, 0.95vw, 0.98rem); line-height: 1.5; color: var(--color-navy); margin: 0; } .partner-inquiry-page .partner-section { position: relative; } .partner-inquiry-page .partner-section__deco-icon { position: absolute; top: clamp(0.85rem, 1.2vw, 1rem); right: clamp(0.85rem, 1.2vw, 1rem); width: var(--partner-deco-icon-size); height: var(--partner-deco-icon-size); max-width: var(--partner-deco-icon-size); max-height: var(--partner-deco-icon-size); object-fit: contain; pointer-events: none; z-index: 1; } .partner-inquiry-page .partner-section--upload .partner-section__deco-icon--svg { width: var(--partner-deco-icon-size); height: var(--partner-deco-icon-size); max-width: var(--partner-deco-icon-size); max-height: var(--partner-deco-icon-size); } .partner-inquiry-page .partner-section__head { position: relative; padding-right: clamp(2.75rem, 4vw, 3.25rem); } .partner-inquiry-page .partner-section__head-main { display: flex; align-items: flex-start; gap: clamp(0.45rem, 0.75vw, 0.6rem); min-width: 0; } .partner-inquiry-page .partner-section__head-text { display: flex; flex-direction: column; gap: clamp(0.15rem, 0.35vw, 0.25rem); min-width: 0; } .partner-inquiry-page .partner-section__subtitle { font-family: var(--font-body); font-size: clamp(0.84rem, 0.92vw, 0.94rem); font-weight: 600; line-height: 1.4; color: var(--color-navy); margin: 0; } .partner-inquiry-page .partner-section--resources { background-color: var(--partner-section-green); border-color: rgba(111, 191, 74, 0.12); --apply-section-accent: var(--color-green); --apply-section-accent-soft: rgba(111, 191, 74, 0.15); --apply-section-accent-hover: rgba(111, 191, 74, 0.12); } .partner-inquiry-page .partner-section--upload { background-color: var(--partner-section-blue); border-color: rgba(43, 127, 212, 0.1); } .partner-inquiry-page .partner-section--upload .partner-section__deco-icon--svg { color: var(--partners-ways-blue); } .partner-inquiry-page .partner-section--agreement { background-color: var(--partner-section-lavender); border-color: rgba(155, 89, 208, 0.1); } .partner-inquiry-page .apply-section--parent.partner-section { background-color: var(--partner-section-pink); border-color: rgba(238, 29, 120, 0.08); } .partner-inquiry-page .apply-section--more.partner-section:not(.partner-section--agreement) { background-color: var(--partner-section-purple); border-color: rgba(155, 89, 208, 0.08); } .partner-inquiry-page .apply-section--about.partner-section { background-color: var(--partner-section-yellow); border-color: rgba(245, 166, 35, 0.12); } .partner-inquiry-page .partner-section--resources .partner-resource-card__inner { flex-direction: row; align-items: center; justify-content: flex-start; gap: clamp(0.5rem, 0.8vw, 0.65rem); min-height: clamp(64px, 6vw, 72px); padding: clamp(0.65rem, 0.95vw, 0.8rem); text-align: left; } .partner-inquiry-page .partner-section--resources .partner-resource-card input:checked + .partner-resource-card__inner, .partner-inquiry-page .partner-section--resources .partner-resource-card__inner:hover { border-color: var(--color-green); background-color: #f6fcf8; } .partner-inquiry-page .partner-inquiry-hero__title .apply-hero__title-line { display: inline; } .partner-inquiry-page .partner-inquiry-hero__title .apply-hero__title-line--pink, .partner-inquiry-page .partner-inquiry-hero__title .apply-hero__title-line--navy { font-size: clamp(1.65rem, 3vw, 48px); } .partner-inquiry-page .partner-section__badge.apply-section__badge { flex-shrink: 0; } .partner-interest-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.55rem, 0.95vw, 0.75rem); margin-bottom: clamp(0.75rem, 1.1vw, 0.95rem); } .partner-interest-grid li { margin: 0; } .partner-interest-grid .apply-check { align-items: flex-start; } .partner-resource-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(0.65rem, 1vw, 0.85rem); margin-bottom: clamp(0.75rem, 1.1vw, 0.95rem); } .partner-resource-card { display: block; cursor: pointer; } .partner-resource-card input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .partner-resource-card__inner { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.45rem; min-height: clamp(96px, 9vw, 112px); padding: clamp(0.65rem, 1vw, 0.85rem); border: 1px solid rgba(0, 27, 102, 0.1); border-radius: var(--experience-photo-radius); background-color: #fff; text-align: center; font-family: var(--font-body); font-size: clamp(0.76rem, 0.84vw, 0.86rem); font-weight: 600; line-height: 1.35; color: var(--color-navy); transition: border-color var(--ease-soft), background-color var(--ease-soft); } .partner-resource-card__icon { width: clamp(30px, 2.8vw, 36px); height: clamp(30px, 2.8vw, 36px); object-fit: contain; } .partner-resource-card input:checked + .partner-resource-card__inner, .partner-resource-card__inner:hover { border-color: var(--color-green); background-color: #f6fcf8; } .partner-inquiry-page .apply-section--idea .apply-upload__box { min-height: clamp(140px, 14vw, 168px); } .partner-inquiry-page .partner-sidebar-card--about { background-color: var(--partner-section-yellow); } .partner-inquiry-page .partner-sidebar-card--next { background-color: var(--partner-section-pink); position: relative; padding-top: clamp(1.15rem, 1.55vw, 1.35rem); padding-right: clamp(5.5rem, 8.5vw, 7rem); } .partner-inquiry-page .partner-sidebar-card--next .apply-sidebar-card__head { margin-bottom: clamp(0.75rem, 1.1vw, 0.95rem); } .partner-inquiry-page .partner-sidebar-card--next .apply-sidebar-card__title { margin-bottom: 0; } .partner-sidebar-card__plane-deco { position: absolute; top: clamp(0.65rem, 1vw, 0.85rem); right: clamp(0.55rem, 0.95vw, 0.75rem); width: clamp(96px, 11vw, 128px); height: auto; object-fit: contain; pointer-events: none; mix-blend-mode: multiply; } .partner-inquiry-page .partner-sidebar-card--questions { background-color: var(--partner-section-blue); } .partner-sidebar-card__title--icon { display: inline-flex; align-items: center; gap: 0.5rem; } .partner-sidebar-title-icon { flex-shrink: 0; width: clamp(28px, 2.5vw, 36px); height: clamp(28px, 2.5vw, 36px); object-fit: contain; } .partner-inquiry-page .partner-sidebar-list .apply-sidebar-list__icon { width: clamp(26px, 2.2vw, 32px); height: clamp(26px, 2.2vw, 32px); } .partner-inquiry-page .partner-sidebar-list li { align-items: center; gap: clamp(0.55rem, 0.85vw, 0.7rem); } .partner-next-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(0.75rem, 1.1vw, 0.95rem); counter-reset: partner-step; } .partner-next-list li { display: grid; gap: 0.2rem; padding-left: clamp(1.85rem, 2.4vw, 2.15rem); position: relative; counter-increment: partner-step; } .partner-next-list li::before { content: counter(partner-step); position: absolute; left: 0; top: 0.05rem; display: inline-flex; align-items: center; justify-content: center; width: clamp(22px, 2vw, 26px); height: clamp(22px, 2vw, 26px); border-radius: 50%; background-color: var(--color-plane); color: #fff; font-family: var(--font-body); font-size: clamp(0.78rem, 0.86vw, 0.88rem); font-weight: 700; } .partner-next-list strong { font-family: var(--font-heading); font-size: clamp(0.92rem, 1vw, 1.02rem); font-weight: 700; color: var(--color-navy); } .partner-next-list span { font-family: var(--font-body); font-size: clamp(0.82rem, 0.9vw, 0.92rem); line-height: 1.45; color: var(--color-navy); } .partner-sidebar-questions-btn { color: var(--color-pink); border-color: var(--color-pink); } .partner-sidebar-questions-btn:hover { background-color: var(--color-pink-soft); color: var(--color-pink); border-color: var(--color-pink); } .partner-sidebar-spotlight { margin: 0; text-align: center; } .partner-sidebar-spotlight__img { display: block; width: 100%; max-width: 100%; height: auto; object-fit: contain; } .partner-sidebar-spotlight__caption { margin-top: clamp(0.55rem, 0.85vw, 0.75rem); font-family: var(--font-heading); font-weight: 700; font-size: clamp(0.92rem, 1.05vw, 1.05rem); line-height: 1.35; color: var(--color-navy); } .partner-footer-bar { background-color: #fff; padding-top: 0; } #main-content > section.partner-footer-bar { padding-top: clamp(0.35rem, 0.65vw, 0.55rem); padding-bottom: clamp(0.55rem, 0.95vw, 0.75rem); } .partner-footer-bar__card { display: flex; align-items: center; justify-content: space-between; gap: clamp(1rem, 2vw, 1.65rem); padding: clamp(1.1rem, 1.55vw, 1.35rem) clamp(1.25rem, 2.1vw, 1.85rem); background-color: var(--partner-section-pink, #fff8f9); border: 1px solid rgba(238, 29, 120, 0.08); border-radius: var(--apply-sidebar-card-radius); } .partner-footer-bar__message { display: flex; align-items: center; gap: clamp(0.85rem, 1.35vw, 1.15rem); flex: 1 1 auto; min-width: 0; } .partner-footer-bar__envelope { flex-shrink: 0; width: clamp(96px, 9vw, 132px); height: auto; object-fit: contain; } .partner-footer-bar__text { flex: 1 1 auto; min-width: 0; max-width: 28rem; font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.15rem, 1.45vw, 1.55rem); line-height: 1.32; color: var(--color-navy); margin: 0; text-align: left; } .partner-footer-bar__divider { flex-shrink: 0; align-self: center; width: 1px; height: clamp(3rem, 5vw, 3.75rem); background-color: rgba(0, 27, 102, 0.12); } .partner-footer-bar__action { position: relative; display: flex; align-items: center; flex-shrink: 0; padding-right: clamp(3.5rem, 6vw, 5rem); } .partner-footer-bar__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.6rem; min-width: clamp(11rem, 14vw, 13.5rem); padding: clamp(0.78rem, 1vw, 0.88rem) clamp(1.45rem, 1.9vw, 1.65rem); border-radius: 10px; border: none; background-color: var(--color-pink); color: #fff; font-family: var(--font-body); font-size: clamp(0.94rem, 1.02vw, 1.02rem); font-weight: 700; line-height: 1.2; white-space: nowrap; box-shadow: none; } .partner-footer-bar__btn:hover { background-color: #d4186a; color: #fff; } .partner-footer-bar__plane { flex-shrink: 0; width: clamp(22px, 2vw, 24px); height: clamp(22px, 2vw, 24px); max-width: clamp(22px, 2vw, 24px); max-height: clamp(22px, 2vw, 24px); object-fit: contain; filter: none; mix-blend-mode: lighten; } .partner-footer-bar__deco { position: absolute; top: 50%; right: 0; transform: translateY(-58%); width: clamp(5.5rem, 8vw, 7rem); height: clamp(3rem, 4.5vw, 3.75rem); pointer-events: none; } .partner-footer-bar__trail { position: absolute; left: 0; bottom: 0; width: clamp(4.5rem, 6.5vw, 6rem); height: auto; } .partner-footer-bar__deco-heart { position: absolute; top: 0; right: clamp(1.1rem, 1.8vw, 1.45rem); width: clamp(24px, 2.2vw, 30px); height: auto; object-fit: contain; } .partner-footer-bar__deco-star { position: absolute; top: clamp(0.15rem, 0.35vw, 0.3rem); right: 0; width: clamp(24px, 2.2vw, 30px); height: auto; object-fit: contain; } @media (max-width: 900px) { .partner-interest-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .partner-resource-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .partner-footer-bar__card { flex-direction: column; align-items: stretch; text-align: center; } .partner-footer-bar__message { flex-direction: column; align-items: center; text-align: center; } .partner-footer-bar__text { text-align: center; max-width: none; } .partner-footer-bar__divider { width: 100%; height: 1px; } .partner-footer-bar__action { width: 100%; justify-content: center; padding-right: 0; padding-bottom: clamp(2.5rem, 6vw, 3rem); } .partner-footer-bar__btn { width: 100%; max-width: 20rem; } .partner-footer-bar__deco { top: auto; bottom: 0; right: 50%; transform: translateX(50%); } } /* ??? Donation Interest page ??? */ .donation-interest-page { --donation-section-yellow: #fffaf0; --donation-section-purple: #f9f6fd; --donation-section-blue: #f4f9fd; --donation-section-green: #f2fbf6; --donation-section-pink: #fff5f9; --donation-support-icon-size: clamp(34px, 3vw, 40px); --donation-sidebar-icon-size: clamp(28px, 2.5vw, 32px); overflow-x: clip; } .donation-interest-page .apply-form__inner, .donation-interest-page .apply-form__main, .donation-interest-page .apply-form__sidebar, .donation-interest-page .apply-form__form, .donation-interest-page .donation-form-card, .donation-interest-page .donation-form-card__body, .donation-interest-page .donation-support-fieldset { min-width: 0; max-width: 100%; } .donation-interest-page .donation-hero__title .apply-hero__title-line { display: inline; } .donation-interest-page .donation-hero__title .apply-hero__title-line--pink, .donation-interest-page .donation-hero__title .apply-hero__title-line--navy { font-size: clamp(1.65rem, 3vw, 48px); } .donation-interest-page .donation-hero__note { background-color: var(--donation-section-pink); border: 1px solid rgba(238, 29, 120, 0.08); } .donation-interest-page .donation-hero__note-text { color: var(--color-pink); font-weight: 600; } .donation-interest-page .donation-hero__note-icon { width: clamp(20px, 1.8vw, 24px); height: clamp(20px, 1.8vw, 24px); max-width: clamp(20px, 1.8vw, 24px); max-height: clamp(20px, 1.8vw, 24px); object-fit: contain; } .donation-hero .page-hero__content { animation: rise-in 0.65s ease both; } .donation-hero__media { position: relative; animation: rise-in 0.7s ease 0.08s both; } .donation-hero__banner { position: relative; z-index: 1; } .donation-hero__media > .lazy-img-wrap { position: relative; z-index: 1; width: 100%; } .donation-form-card { padding: clamp(1rem, 1.45vw, 1.25rem); border: 1px solid rgba(0, 27, 102, 0.08); border-radius: var(--experience-card-radius); background-color: #fff; min-width: 0; max-width: 100%; } .donation-form-card__head { display: flex; align-items: flex-start; gap: clamp(0.65rem, 1vw, 0.85rem); margin-bottom: clamp(0.95rem, 1.35vw, 1.15rem); padding-bottom: clamp(0.85rem, 1.2vw, 1rem); border-bottom: 1px solid rgba(0, 27, 102, 0.08); } .donation-form-card__head-icon { flex-shrink: 0; width: var(--donation-support-icon-size); height: var(--donation-support-icon-size); max-width: var(--donation-support-icon-size); max-height: var(--donation-support-icon-size); object-fit: contain; } .donation-form-card__head-text { min-width: 0; } .donation-form-card__title { font-family: var(--font-heading); font-size: clamp(1.15rem, 1.35vw, 1.35rem); font-weight: 700; line-height: 1.3; color: var(--color-navy); margin: 0 0 clamp(0.25rem, 0.45vw, 0.35rem); } .donation-form-card__desc { font-family: var(--font-body); font-size: clamp(0.88rem, 0.95vw, 0.98rem); line-height: 1.5; color: var(--color-navy); margin: 0; opacity: 0.88; overflow-wrap: break-word; } .donation-form-card__body { display: flex; flex-direction: column; gap: clamp(0.75rem, 1.1vw, 0.95rem); min-width: 0; max-width: 100%; } .donation-support-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; max-width: 100%; } .donation-support-fieldset legend { margin-bottom: clamp(0.55rem, 0.85vw, 0.7rem); } .donation-support-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.65rem, 1vw, 0.85rem); min-width: 0; width: 100%; } .donation-support-card { display: block; cursor: pointer; } .donation-support-card input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .donation-support-card__inner { display: flex; align-items: flex-start; gap: clamp(0.55rem, 0.85vw, 0.7rem); min-height: clamp(88px, 9vw, 100px); padding: clamp(0.75rem, 1vw, 0.9rem); border: 1px solid rgba(0, 27, 102, 0.1); border-radius: var(--experience-photo-radius); background-color: #fff; transition: border-color var(--ease-soft), background-color var(--ease-soft), box-shadow var(--ease-soft); } .donation-support-card__icon { flex-shrink: 0; width: var(--donation-support-icon-size); height: var(--donation-support-icon-size); max-width: var(--donation-support-icon-size); max-height: var(--donation-support-icon-size); object-fit: contain; } .donation-support-card__copy { display: flex; flex-direction: column; gap: 0.2rem; min-width: 0; } .donation-support-card__copy strong { font-family: var(--font-heading); font-size: clamp(0.88rem, 0.95vw, 0.98rem); font-weight: 700; line-height: 1.3; color: var(--color-navy); } .donation-support-card__copy span { font-family: var(--font-body); font-size: clamp(0.76rem, 0.84vw, 0.86rem); line-height: 1.4; color: var(--color-navy); opacity: 0.82; } .donation-support-card input:checked + .donation-support-card__inner, .donation-support-card__inner:hover { border-color: var(--color-pink); background-color: var(--donation-section-pink); box-shadow: 0 0 0 1px rgba(238, 29, 120, 0.08); } .donation-amount-field { display: flex; align-items: center; gap: 0.45rem; padding-left: clamp(0.85rem, 1.1vw, 1rem); padding-right: clamp(0.85rem, 1.1vw, 1rem); } .donation-amount-field__prefix, .donation-amount-field__suffix { flex-shrink: 0; font-family: var(--font-body); font-size: clamp(0.88rem, 0.95vw, 0.98rem); font-weight: 600; color: var(--color-navy); opacity: 0.72; } .donation-amount-field__input { flex: 1 1 auto; min-width: 0; border: 0; padding: 0; background: transparent; box-shadow: none; } .donation-amount-field__input:focus { outline: none; } .donation-consent-box { padding: clamp(0.85rem, 1.15vw, 1rem); border-radius: var(--experience-photo-radius); background-color: var(--donation-section-pink); border: 1px solid rgba(238, 29, 120, 0.1); } .donation-consent-box .apply-check span { font-size: clamp(0.84rem, 0.92vw, 0.94rem); line-height: 1.45; } .donation-submit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; width: 100%; margin-top: clamp(0.15rem, 0.35vw, 0.25rem); border-radius: 10px; background-color: var(--color-pink); color: #fff; font-weight: 700; } .donation-submit-btn:hover { background-color: #d4186a; color: #fff; } .donation-submit-btn__icon { flex-shrink: 0; width: clamp(20px, 1.8vw, 22px); height: clamp(20px, 1.8vw, 22px); max-width: clamp(20px, 1.8vw, 22px); max-height: clamp(20px, 1.8vw, 22px); object-fit: contain; mix-blend-mode: lighten; } .donation-security-note { display: flex; align-items: center; justify-content: center; gap: 0.45rem; margin: 0; font-family: var(--font-body); font-size: clamp(0.78rem, 0.86vw, 0.88rem); line-height: 1.4; color: var(--color-navy); opacity: 0.78; text-align: center; } .donation-security-note__icon { flex-shrink: 0; width: clamp(16px, 1.5vw, 18px); height: clamp(16px, 1.5vw, 18px); max-width: clamp(16px, 1.5vw, 18px); max-height: clamp(16px, 1.5vw, 18px); object-fit: contain; } .donation-interest-page .donation-sidebar-card--impact { background-color: var(--donation-section-yellow); } .donation-interest-page .donation-sidebar-card--future { position: relative; background-color: var(--donation-section-purple); padding-bottom: clamp(2.5rem, 4vw, 3rem); } .donation-interest-page .donation-sidebar-card--trusted { background-color: var(--donation-section-blue); } .donation-interest-page .donation-sidebar-card--questions { background-color: var(--donation-section-green); } .donation-sidebar-card__title--icon { display: inline-flex; align-items: center; gap: 0.5rem; } .donation-sidebar-title-icon { flex-shrink: 0; width: var(--donation-sidebar-icon-size); height: var(--donation-sidebar-icon-size); max-width: var(--donation-sidebar-icon-size); max-height: var(--donation-sidebar-icon-size); object-fit: contain; } .donation-impact-list li { align-items: flex-start; gap: clamp(0.55rem, 0.85vw, 0.7rem); } .donation-impact-list .apply-sidebar-list__icon { width: clamp(31px, 2.2vw, 35px); height: clamp(31px, 2.2vw, 35px); max-width: clamp(31px, 2.2vw, 35px); max-height: clamp(31px, 2.2vw, 35px); } .donation-sidebar-card--impact .donation-sidebar-title-icon { width: clamp(33px, 2.5vw, 37px); height: clamp(33px, 2.5vw, 37px); max-width: clamp(33px, 2.5vw, 37px); max-height: clamp(33px, 2.5vw, 37px); } .donation-impact-list strong { font-weight: 700; } .donation-sidebar-card__trail { position: absolute; right: clamp(0.65rem, 1vw, 0.85rem); bottom: clamp(0.45rem, 0.75vw, 0.65rem); width: clamp(9rem, 14vw, 13.75rem); height: auto; max-width: 55%; object-fit: contain; pointer-events: none; } .donation-sidebar-link { display: inline-block; margin-top: clamp(0.35rem, 0.55vw, 0.45rem); font-family: var(--font-body); font-size: clamp(0.82rem, 0.9vw, 0.92rem); font-weight: 600; line-height: 1.4; color: var(--partners-ways-blue); text-decoration: underline; text-underline-offset: 0.15em; } .donation-sidebar-link:hover { color: var(--color-navy); } .donation-sidebar-questions-btn { color: var(--color-green); border-color: var(--color-green); } .donation-sidebar-questions-btn:hover { background-color: rgba(111, 191, 74, 0.12); color: var(--color-green); border-color: var(--color-green); } .donation-footer-note { background-color: #fff; padding-top: 0; } #main-content > section.donation-footer-note { padding-top: clamp(0.35rem, 0.65vw, 0.55rem); padding-bottom: clamp(1.25rem, 2vw, 1.75rem); } .donation-footer-note__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(0.35rem, 0.55vw, 0.5rem); text-align: center; } .donation-footer-note__text { max-width: 42rem; margin: 0; font-family: var(--font-heading); font-size: clamp(1.25rem, 1.65vw, 1.75rem); font-weight: 700; line-height: 1.35; color: var(--color-navy); } .donation-footer-note__trail { width: min(100%, 40rem); display: flex; justify-content: center; margin-top: clamp(0.15rem, 0.35vw, 0.35rem); } .donation-interest-page .apply-form__form { min-width: 0; max-width: 100%; } .donation-interest-page .apply-form__form .contact-field { min-width: 0; max-width: 100%; } .donation-footer-note__deco { width: 100%; height: auto; object-fit: contain; } .donation-footer-note.scroll-rise.is-in-view .donation-footer-note__deco { animation: rise-in 0.7s ease 0.12s both; } @media (max-width: 1023px) { .donation-interest-page .apply-hero__note { max-width: none; } .donation-interest-page .donation-hero__title .apply-hero__title-line--pink, .donation-interest-page .donation-hero__title .apply-hero__title-line--navy { display: block; font-size: clamp(1.65rem, 6.8vw, 2.35rem); line-height: 1.12; } .donation-interest-page .apply-hero__text { max-width: none; } .donation-support-fieldset { width: 100%; max-width: 100%; overflow: visible; } .donation-support-grid { display: grid !important; grid-template-columns: 1fr !important; flex-wrap: unset; overflow: visible !important; overscroll-behavior: auto; touch-action: auto; scroll-snap-type: none !important; gap: clamp(0.55rem, 2.5vw, 0.75rem); padding-bottom: 0; margin-inline: 0; padding-inline: 0; width: 100% !important; max-width: 100% !important; min-width: 0; box-sizing: border-box; } .donation-support-grid::-webkit-scrollbar { display: none; } .donation-support-card { flex: none !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; scroll-snap-align: unset; box-sizing: border-box; overflow: visible; } .donation-support-card__inner { min-height: 0; } .donation-submit-btn { width: 100%; justify-content: center; } } @media (max-width: 640px) { .donation-interest-page .apply-form__row { grid-template-columns: 1fr; } .donation-form-card { padding: clamp(0.85rem, 3.5vw, 1rem); } .donation-form-card__head { flex-direction: column; align-items: flex-start; } .donation-support-grid { display: grid !important; grid-template-columns: 1fr !important; overflow: visible !important; scroll-snap-type: none !important; padding-bottom: 0; gap: clamp(0.55rem, 2.5vw, 0.75rem); } .donation-support-card { flex: none !important; width: 100% !important; max-width: 100% !important; } .donation-support-card__inner { min-height: 0; } .donation-interest-page .apply-form__sidebar-sticky { gap: clamp(0.65rem, 2.5vw, 0.85rem); } } /* ??? Newsletter Sign Up page ??? */ .newsletter-signup-page { --newsletter-section-pink: #fff5f9; --newsletter-section-yellow: #fffaf0; --newsletter-section-green: #f2fbf6; --newsletter-section-blue: #f4f9fd; --newsletter-section-purple: #f9f6fd; --newsletter-accent-pink: var(--color-pink); --newsletter-accent-yellow: var(--color-yellow); --newsletter-accent-green: var(--color-green); --newsletter-accent-blue: var(--color-blue-accent); --newsletter-accent-purple: var(--color-purple); --newsletter-icon-size: clamp(31px, 2.5vw, 37px); --newsletter-receive-icon-size: clamp(31px, 2.4vw, 35px); --newsletter-role-icon-size: clamp(27px, 2.1vw, 31px); } .newsletter-signup { background-color: #fff; } .newsletter-layout { display: grid; grid-template-columns: minmax(0, 0.95fr) minmax(0, 1.05fr); gap: clamp(1.25rem, 2.2vw, 2rem); padding: clamp(1.15rem, 1.75vw, 1.65rem); border: 1px solid rgba(0, 27, 102, 0.08); border-radius: var(--experience-card-radius); background-color: #fff; min-width: 0; max-width: 100%; } .newsletter-info { position: relative; display: flex; flex-direction: column; gap: clamp(0.85rem, 1.25vw, 1.05rem); min-width: 0; max-width: 100%; } .newsletter-info__heart-deco { width: clamp(30px, 2.8vw, 36px); height: auto; max-width: clamp(30px, 2.8vw, 36px); object-fit: contain; } .newsletter-info__title { display: flex; flex-direction: column; gap: clamp(0.15rem, 0.35vw, 0.25rem); margin: 0; } .newsletter-info__title-line { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.65rem, 2.8vw, 2.45rem); line-height: 1.15; overflow-wrap: break-word; } .newsletter-info__title-line--navy { color: var(--color-navy); } .newsletter-info__title-line--pink { color: var(--color-pink); } .newsletter-info__intro { display: flex; align-items: flex-start; flex-wrap: wrap; gap: 0.45rem; max-width: min(34rem, 100%); min-width: 0; margin: 0; font-family: var(--font-body); font-size: clamp(0.88rem, 0.96vw, 0.98rem); line-height: 1.55; color: var(--color-navy); overflow-wrap: break-word; } .newsletter-info__sparkle { flex-shrink: 0; width: clamp(24px, 2.2vw, 28px); height: auto; max-width: clamp(24px, 2.2vw, 28px); object-fit: contain; margin-top: 0.1rem; } .newsletter-info__benefits-title { margin: 0 0 clamp(0.55rem, 0.85vw, 0.7rem); font-family: var(--font-heading); font-size: clamp(0.98rem, 1.08vw, 1.08rem); font-weight: 700; line-height: 1.35; color: var(--color-plane); overflow-wrap: break-word; } .newsletter-benefits-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(0.65rem, 1vw, 0.85rem); min-width: 0; max-width: 100%; } .newsletter-benefits-list li { display: flex; align-items: flex-start; gap: clamp(0.55rem, 0.85vw, 0.7rem); min-width: 0; } .newsletter-benefits-list__icon { flex-shrink: 0; width: var(--newsletter-icon-size); height: var(--newsletter-icon-size); max-width: var(--newsletter-icon-size); max-height: var(--newsletter-icon-size); object-fit: contain; } .newsletter-benefits-list span { font-family: var(--font-body); font-size: clamp(0.84rem, 0.92vw, 0.94rem); line-height: 1.45; color: var(--color-navy); min-width: 0; flex: 1 1 auto; overflow-wrap: break-word; } .newsletter-info__photo { margin: clamp(0.15rem, 0.35vw, 0.25rem) 0 0; min-width: 0; max-width: 100%; } .newsletter-info__photo-img { display: block; width: 100%; max-width: 100%; height: auto; border-radius: var(--experience-photo-radius); object-fit: cover; } .newsletter-privacy-box { position: relative; display: flex; align-items: flex-start; gap: clamp(0.65rem, 1vw, 0.85rem); padding: clamp(0.85rem, 1.15vw, 1rem); border-radius: var(--experience-photo-radius); background-color: var(--newsletter-section-purple); border: 1px solid rgba(155, 89, 208, 0.1); padding-right: clamp(4.5rem, 7vw, 6rem); min-width: 0; max-width: 100%; } .newsletter-privacy-box__icon { flex-shrink: 0; width: var(--newsletter-icon-size); height: var(--newsletter-icon-size); max-width: var(--newsletter-icon-size); max-height: var(--newsletter-icon-size); object-fit: contain; } .newsletter-privacy-box__text { margin: 0; font-family: var(--font-body); font-size: clamp(0.82rem, 0.9vw, 0.92rem); line-height: 1.45; color: var(--color-navy); min-width: 0; overflow-wrap: break-word; } .newsletter-privacy-box__deco { position: absolute; right: clamp(0.65rem, 1vw, 0.85rem); bottom: clamp(0.45rem, 0.75vw, 0.65rem); width: clamp(5.5rem, 9vw, 7.5rem); height: auto; object-fit: contain; pointer-events: none; } .newsletter-form-wrap { border-left: 1px solid rgba(0, 27, 102, 0.08); padding-left: clamp(1rem, 1.75vw, 1.65rem); min-width: 0; max-width: 100%; } .newsletter-form { display: flex; flex-direction: column; gap: clamp(0.75rem, 1.1vw, 0.95rem); min-width: 0; max-width: 100%; } .newsletter-signup-page .contact-field { min-width: 0; max-width: 100%; } .newsletter-signup-page .contact-field__box { max-width: 100%; min-width: 0; box-sizing: border-box; } .newsletter-form__head { display: flex; align-items: flex-start; gap: clamp(0.65rem, 1vw, 0.85rem); margin-bottom: clamp(0.15rem, 0.35vw, 0.25rem); padding-bottom: clamp(0.75rem, 1.1vw, 0.95rem); border-bottom: 2px solid rgba(238, 29, 120, 0.15); } .newsletter-form__head-icon { flex-shrink: 0; width: clamp(40px, 3.5vw, 44px); height: clamp(40px, 3.5vw, 44px); max-width: clamp(40px, 3.5vw, 44px); max-height: clamp(40px, 3.5vw, 44px); object-fit: contain; } .newsletter-form__title { margin: 0 0 clamp(0.25rem, 0.45vw, 0.35rem); font-family: var(--font-heading); font-size: clamp(1.2rem, 1.45vw, 1.45rem); font-weight: 700; line-height: 1.25; color: var(--color-navy); } .newsletter-form__head-text { min-width: 0; } .newsletter-form__desc { margin: 0; font-family: var(--font-body); font-size: clamp(0.84rem, 0.92vw, 0.94rem); line-height: 1.45; color: var(--color-navy); opacity: 0.88; overflow-wrap: break-word; } .newsletter-field-box { justify-content: space-between; } .newsletter-field-box__icon { flex-shrink: 0; width: clamp(20px, 1.85vw, 24px); height: clamp(20px, 1.85vw, 24px); max-width: clamp(20px, 1.85vw, 24px); max-height: clamp(20px, 1.85vw, 24px); object-fit: contain; opacity: 0.75; } .newsletter-form__hint { display: block; margin-top: clamp(0.25rem, 0.45vw, 0.35rem); font-family: var(--font-body); font-size: clamp(0.76rem, 0.84vw, 0.86rem); line-height: 1.4; color: var(--color-navy); opacity: 0.72; } .newsletter-fieldset { margin: 0; padding: 0; border: 0; min-width: 0; max-width: 100%; } .newsletter-fieldset legend { margin-bottom: clamp(0.55rem, 0.85vw, 0.7rem); } .newsletter-receive-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(0.55rem, 0.85vw, 0.7rem); min-width: 0; max-width: 100%; } .newsletter-receive-card { display: block; cursor: pointer; min-width: 0; } .newsletter-receive-card input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .newsletter-receive-card__inner { display: flex; align-items: center; gap: clamp(0.65rem, 1vw, 0.85rem); min-height: clamp(68px, 7vw, 76px); padding: clamp(0.7rem, 1vw, 0.85rem); border: 1px solid rgba(0, 27, 102, 0.1); border-radius: var(--experience-photo-radius); background-color: #fff; transition: border-color var(--ease-soft), box-shadow var(--ease-soft); } .newsletter-receive-card--pink .newsletter-receive-card__inner { background-color: var(--newsletter-section-pink); } .newsletter-receive-card--pink { --newsletter-card-accent: var(--newsletter-accent-pink); --newsletter-card-accent-shadow: rgba(238, 29, 120, 0.12); } .newsletter-receive-card--yellow .newsletter-receive-card__inner { background-color: var(--newsletter-section-yellow); } .newsletter-receive-card--yellow { --newsletter-card-accent: var(--newsletter-accent-yellow); --newsletter-card-accent-shadow: rgba(245, 197, 24, 0.18); } .newsletter-receive-card--green .newsletter-receive-card__inner { background-color: var(--newsletter-section-green); } .newsletter-receive-card--green { --newsletter-card-accent: var(--newsletter-accent-green); --newsletter-card-accent-shadow: rgba(61, 154, 90, 0.16); } .newsletter-receive-card--blue .newsletter-receive-card__inner { background-color: var(--newsletter-section-blue); } .newsletter-receive-card--blue { --newsletter-card-accent: var(--newsletter-accent-blue); --newsletter-card-accent-shadow: rgba(43, 127, 212, 0.16); } .newsletter-receive-card--purple .newsletter-receive-card__inner { background-color: var(--newsletter-section-purple); } .newsletter-receive-card--purple { --newsletter-card-accent: var(--newsletter-accent-purple); --newsletter-card-accent-shadow: rgba(123, 63, 189, 0.16); } .newsletter-receive-card input:checked + .newsletter-receive-card__inner, .newsletter-receive-card__inner:hover, .newsletter-receive-card:focus-within .newsletter-receive-card__inner { border-color: var(--newsletter-card-accent); box-shadow: 0 0 0 1px var(--newsletter-card-accent-shadow); } .newsletter-receive-card__check { flex-shrink: 0; width: 18px; height: 18px; border: 1.5px solid rgba(0, 27, 102, 0.22); border-radius: 4px; background-color: #fff; } .newsletter-receive-card input:checked + .newsletter-receive-card__inner .newsletter-receive-card__check { border-color: var(--newsletter-card-accent); background-color: var(--newsletter-card-accent); box-shadow: inset 0 0 0 2px #fff; } .newsletter-receive-card__icon { flex-shrink: 0; width: var(--newsletter-receive-icon-size); height: var(--newsletter-receive-icon-size); max-width: var(--newsletter-receive-icon-size); max-height: var(--newsletter-receive-icon-size); object-fit: contain; } .newsletter-receive-card__copy { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; } .newsletter-receive-card__copy strong { font-family: var(--font-heading); font-size: clamp(0.88rem, 0.95vw, 0.98rem); font-weight: 700; line-height: 1.3; color: var(--color-navy); } .newsletter-receive-card__copy span { font-family: var(--font-body); font-size: clamp(0.76rem, 0.84vw, 0.86rem); line-height: 1.4; color: var(--color-navy); opacity: 0.82; overflow-wrap: break-word; } .newsletter-role-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.55rem, 0.85vw, 0.7rem); min-width: 0; max-width: 100%; } .newsletter-role-card { display: block; cursor: pointer; min-width: 0; } .newsletter-role-card--wide { grid-column: 1 / -1; } .newsletter-role-card input { position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none; } .newsletter-role-card__inner { display: flex; align-items: center; gap: clamp(0.5rem, 0.8vw, 0.65rem); min-height: clamp(52px, 5.5vw, 58px); padding: clamp(0.65rem, 0.95vw, 0.8rem); border: 1px solid rgba(0, 27, 102, 0.1); border-radius: var(--experience-photo-radius); background-color: #fff; font-family: var(--font-body); font-size: clamp(0.82rem, 0.9vw, 0.92rem); font-weight: 600; line-height: 1.35; color: var(--color-navy); transition: border-color var(--ease-soft), background-color var(--ease-soft); min-width: 0; overflow-wrap: break-word; } .newsletter-role-card--pink .newsletter-role-card__inner { background-color: var(--newsletter-section-pink); } .newsletter-role-card--yellow .newsletter-role-card__inner { background-color: var(--newsletter-section-yellow); } .newsletter-role-card--green .newsletter-role-card__inner { background-color: var(--newsletter-section-green); } .newsletter-role-card--blue .newsletter-role-card__inner { background-color: var(--newsletter-section-blue); } .newsletter-role-card--purple .newsletter-role-card__inner { background-color: var(--newsletter-section-purple); } .newsletter-role-card input:checked + .newsletter-role-card__inner, .newsletter-role-card__inner:hover { border-color: var(--color-pink); background-color: #fff; } .newsletter-role-card__check { flex-shrink: 0; width: 16px; height: 16px; border: 1.5px solid rgba(0, 27, 102, 0.22); border-radius: 4px; background-color: #fff; } .newsletter-role-card input:checked + .newsletter-role-card__inner .newsletter-role-card__check { border-color: var(--color-pink); background-color: var(--color-pink); box-shadow: inset 0 0 0 2px #fff; } .newsletter-role-card__icon { flex-shrink: 0; width: var(--newsletter-role-icon-size); height: var(--newsletter-role-icon-size); max-width: var(--newsletter-role-icon-size); max-height: var(--newsletter-role-icon-size); object-fit: contain; } .newsletter-submit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; width: 100%; margin-top: clamp(0.15rem, 0.35vw, 0.25rem); border-radius: 10px; background-color: var(--color-pink); color: #fff; font-weight: 700; } .newsletter-submit-btn:hover { background-color: #d4186a; color: #fff; } .newsletter-submit-btn__icon { flex-shrink: 0; width: clamp(20px, 1.8vw, 22px); height: clamp(20px, 1.8vw, 22px); max-width: clamp(20px, 1.8vw, 22px); max-height: clamp(20px, 1.8vw, 22px); object-fit: contain; mix-blend-mode: lighten; } .newsletter-form__thanks { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.35rem; margin: 0; font-family: var(--font-body); font-size: clamp(0.82rem, 0.9vw, 0.92rem); line-height: 1.45; color: var(--color-navy); text-align: center; } .newsletter-form__thanks-heart { flex-shrink: 0; width: clamp(18px, 1.6vw, 20px); height: clamp(18px, 1.6vw, 20px); max-width: clamp(18px, 1.6vw, 20px); max-height: clamp(18px, 1.6vw, 20px); object-fit: contain; } @media (max-width: 1024px) { .newsletter-layout { grid-template-columns: 1fr; min-width: 0; } .newsletter-form-wrap { border-left: 0; padding-left: 0; padding-top: clamp(0.85rem, 1.25vw, 1.05rem); border-top: 1px solid rgba(0, 27, 102, 0.08); } .newsletter-privacy-box { padding-right: clamp(0.85rem, 1.15vw, 1rem); flex-wrap: wrap; } .newsletter-privacy-box__deco { position: static; width: min(100%, 7.5rem); margin-top: 0.35rem; margin-left: auto; } } @media (max-width: 1023px) { .newsletter-role-grid { display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: clamp(0.55rem, 2vw, 0.7rem); padding-bottom: 0.35rem; width: 100%; min-width: 0; max-width: 100%; } .newsletter-role-grid::-webkit-scrollbar { display: none; } .newsletter-role-card { flex: 0 0 calc((100% - 16px) / 3); width: calc((100% - 16px) / 3); max-width: calc((100% - 16px) / 3); scroll-snap-align: start; min-width: 0; box-sizing: border-box; overflow: hidden; } .newsletter-role-card--wide { flex: 0 0 calc((100% - 16px) / 3); width: calc((100% - 16px) / 3); max-width: calc((100% - 16px) / 3); grid-column: auto; } } /* ??? Newsletter sign up success popup + welcome email preview ??? */ body.newsletter-success-open { overflow: hidden; } .newsletter-success-modal { position: fixed; inset: 0; z-index: 1200; display: flex; align-items: center; justify-content: center; padding: clamp(0.75rem, 2vw, 1.25rem); } .newsletter-success-modal[hidden] { display: none; } .newsletter-success-modal__overlay { position: absolute; inset: 0; background-color: rgba(0, 27, 102, 0.52); opacity: 0; transition: opacity 0.32s ease; } .newsletter-success-modal.is-open .newsletter-success-modal__overlay { opacity: 1; } .newsletter-success-modal__dialog { position: relative; width: min(100%, 28rem); border-radius: var(--experience-card-radius); overflow: hidden; opacity: 0; transform: translateY(20px) scale(0.96); transition: opacity 0.38s ease, transform 0.45s cubic-bezier(0.22, 1, 0.36, 1); } .newsletter-success-modal.is-open .newsletter-success-modal__dialog { opacity: 1; transform: translateY(0) scale(1); } .newsletter-success-modal.is-open .newsletter-page-success__heart { animation: newsletter-success-heart-pop 0.55s cubic-bezier(0.22, 1, 0.36, 1) 0.12s both; } .newsletter-success-modal.is-open .newsletter-page-success__title { animation: rise-in 0.5s ease 0.18s both; } .newsletter-success-modal.is-open .newsletter-page-success__lead, .newsletter-success-modal.is-open .newsletter-page-success__text, .newsletter-success-modal.is-open .newsletter-page-success__tagline, .newsletter-success-modal.is-open .newsletter-page-success__btn, .newsletter-success-modal.is-open .newsletter-page-success__note { animation: rise-in 0.5s ease both; } .newsletter-success-modal.is-open .newsletter-page-success__lead { animation-delay: 0.24s; } .newsletter-success-modal.is-open .newsletter-page-success__text { animation-delay: 0.3s; } .newsletter-success-modal.is-open .newsletter-page-success__tagline { animation-delay: 0.36s; } .newsletter-success-modal.is-open .newsletter-page-success__btn { animation-delay: 0.42s; } .newsletter-success-modal.is-open .newsletter-page-success__note { animation-delay: 0.48s; } @keyframes newsletter-success-heart-pop { from { opacity: 0; transform: scale(0.72); } 70% { transform: scale(1.06); } to { opacity: 1; transform: scale(1); } } @media (prefers-reduced-motion: reduce) { .newsletter-success-modal__overlay, .newsletter-success-modal__dialog { opacity: 1; transform: none; transition: none; } .newsletter-success-modal.is-open .newsletter-page-success__heart, .newsletter-success-modal.is-open .newsletter-page-success__title, .newsletter-success-modal.is-open .newsletter-page-success__lead, .newsletter-success-modal.is-open .newsletter-page-success__text, .newsletter-success-modal.is-open .newsletter-page-success__tagline, .newsletter-success-modal.is-open .newsletter-page-success__btn, .newsletter-success-modal.is-open .newsletter-page-success__note { animation: none; } } .newsletter-success-modal__close { position: absolute; top: clamp(0.55rem, 1vw, 0.75rem); right: clamp(0.55rem, 1vw, 0.75rem); z-index: 2; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; padding: 0; border: 1px solid rgba(0, 27, 102, 0.12); border-radius: 999px; background-color: #fff; color: var(--color-navy); cursor: pointer; transition: background-color var(--ease-soft), border-color var(--ease-soft); } .newsletter-success-modal__close:hover { background-color: #fff5f9; border-color: rgba(238, 29, 120, 0.25); } .newsletter-page-success { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: clamp(0.75rem, 1.1vw, 0.95rem); padding: clamp(1.75rem, 2.5vw, 2.15rem) clamp(1.25rem, 2vw, 1.75rem); border: 1px solid rgba(0, 27, 102, 0.08); border-radius: var(--experience-card-radius); background: linear-gradient(180deg, var(--newsletter-section-yellow, #fffaf0) 0%, #fff 45%); } .newsletter-page-success[hidden] { display: none; } .newsletter-page-success__heart { width: clamp(44px, 4vw, 52px); height: auto; object-fit: contain; } .newsletter-page-success__title { margin: 0; font-family: var(--font-heading); font-size: clamp(1.55rem, 2.5vw, 2rem); font-weight: 700; line-height: 1.2; color: var(--color-navy); } .newsletter-page-success__lead { margin: 0; font-family: var(--font-body); font-size: clamp(0.94rem, 1.02vw, 1.04rem); font-weight: 600; line-height: 1.5; color: var(--color-navy); } .newsletter-page-success__text { margin: 0; max-width: 32rem; font-family: var(--font-body); font-size: clamp(0.88rem, 0.96vw, 0.98rem); line-height: 1.55; color: var(--color-navy); } .newsletter-page-success__tagline { margin: clamp(0.15rem, 0.35vw, 0.25rem) 0 0; font-family: var(--font-heading); font-size: clamp(0.98rem, 1.08vw, 1.08rem); font-weight: 700; color: var(--color-pink); } .newsletter-page-success__btn { width: 100%; max-width: 18rem; margin-top: clamp(0.25rem, 0.45vw, 0.35rem); border-radius: 10px; } .newsletter-page-success__note { margin: clamp(0.15rem, 0.35vw, 0.25rem) 0 0; font-family: var(--font-body); font-size: clamp(0.78rem, 0.86vw, 0.88rem); line-height: 1.4; color: var(--color-navy); opacity: 0.72; } .newsletter-email-preview-page { background-color: #fff; } .newsletter-email-preview { padding: clamp(2rem, 4vw, 3rem) 0; } .newsletter-email-preview__label { margin: 0 0 1rem; font-family: var(--font-body); font-size: 0.82rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-navy); opacity: 0.65; } .newsletter-welcome-email { max-width: 36rem; margin: 0 auto; padding: clamp(1.25rem, 2vw, 1.75rem); border: 1px solid rgba(0, 27, 102, 0.1); border-radius: var(--experience-card-radius); background-color: #fff; } .newsletter-welcome-email__head { margin-bottom: 1.25rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(0, 27, 102, 0.08); } .newsletter-welcome-email__logo { display: block; width: min(100%, 12rem); height: auto; margin-bottom: 0.85rem; } .newsletter-welcome-email__subject { margin: 0; font-family: var(--font-body); font-size: 0.88rem; font-weight: 600; color: var(--color-navy); } .newsletter-welcome-email__body p { margin: 0 0 0.85rem; font-family: var(--font-body); font-size: 0.94rem; line-height: 1.55; color: var(--color-navy); } .newsletter-welcome-email__tagline { font-family: var(--font-heading); font-weight: 700; color: var(--color-pink); } .newsletter-welcome-email__signoff { font-weight: 600; } .newsletter-welcome-email__fineprint { font-size: 0.82rem; opacity: 0.75; } /* ??? FAQ page ??? */ .faq-page { --faq-topic-icon-size: clamp(27px, 2.2vw, 31px); --faq-section-pink: #fff5f9; --faq-hero-pink: #fff8fb; --faq-search-border: rgba(238, 29, 120, 0.42); --faq-hero-banner-filter: brightness(1.05) contrast(1.06) saturate(1.04); } .faq-hero { background-color: #fff; overflow: visible; } .faq-hero.page-hero { min-height: 0; } .faq-hero .page-hero__inner { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); align-items: center; gap: var(--home-hero-col-gap); min-height: 0; background-color: var(--faq-hero-pink); border-radius: var(--experience-card-radius); padding-top: clamp(1.25rem, 2vw, 1.75rem); padding-bottom: clamp(1.25rem, 2vw, 1.75rem); } .faq-hero .page-hero__content { width: 100%; max-width: none; animation: rise-in 0.65s ease both; } .faq-hero__media { animation: rise-in 0.7s ease 0.08s both; background-color: var(--faq-hero-pink); } .faq-hero__eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0 0 clamp(0.45rem, 0.75vw, 0.6rem); font-family: var(--font-body); font-size: clamp(0.82rem, 0.9vw, 0.92rem); font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--color-navy); } .faq-hero__eyebrow-heart { width: clamp(18px, 1.6vw, 22px); height: auto; max-width: clamp(18px, 1.6vw, 22px); object-fit: contain; } .faq-hero__title { display: flex; flex-direction: column; gap: clamp(0.1rem, 0.25vw, 0.2rem); margin: 0 0 clamp(0.65rem, 1vw, 0.85rem); } .faq-hero__title-line { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.85rem, 3.2vw, 3rem); line-height: 1.12; } .faq-hero__title-line--navy { color: var(--color-navy); } .faq-hero__title-line--pink { color: var(--color-pink); } .faq-hero__text { max-width: 28rem; margin: 0; font-family: var(--font-body); font-size: clamp(0.92rem, 1vw, 1.02rem); line-height: 1.55; color: var(--color-navy); } .faq-hero__banner { width: 100%; height: auto; max-height: none; min-height: unset; object-fit: contain; filter: var(--faq-hero-banner-filter); mix-blend-mode: multiply; } .faq-search__inner { display: flex; flex-direction: column; align-items: center; gap: clamp(0.75rem, 1.1vw, 0.95rem); text-align: center; } .faq-search__intro { margin: 0; padding-top: 20px; font-family: var(--font-body); font-size: clamp(0.92rem, 1vw, 1.02rem); line-height: 1.5; color: var(--color-navy); } .faq-search__field { display: flex; align-items: center; gap: clamp(0.65rem, 1vw, 0.85rem); width: min(100%, 42rem); min-height: clamp(52px, 4.8vw, 58px); padding: clamp(0.65rem, 0.95vw, 0.8rem) clamp(1.1rem, 1.45vw, 1.35rem); border: 1.5px solid var(--faq-search-border); border-radius: 9999px; background-color: #fff; box-shadow: none; transition: border-color var(--ease-soft), box-shadow var(--ease-soft); } .faq-search__field:focus-within { border-color: var(--color-pink); box-shadow: 0 0 0 3px rgba(238, 29, 120, 0.12); } .faq-search__icon { flex-shrink: 0; width: clamp(20px, 1.85vw, 24px); height: clamp(20px, 1.85vw, 24px); max-width: clamp(20px, 1.85vw, 24px); max-height: clamp(20px, 1.85vw, 24px); object-fit: contain; } .faq-search__input { flex: 1 1 auto; min-width: 0; border: 0; background: transparent; font-family: var(--font-body); font-size: clamp(0.88rem, 0.96vw, 0.98rem); color: var(--color-navy); outline: none; } .faq-search__input::placeholder { color: rgba(0, 27, 102, 0.55); } .faq-main__inner { display: grid; grid-template-columns: minmax(0, 0.34fr) minmax(0, 0.66fr); align-items: start; gap: clamp(1rem, 1.75vw, 1.65rem); } .faq-sidebar__title { margin: 0 0 clamp(0.75rem, 1.1vw, 0.95rem); font-family: var(--font-heading); font-size: clamp(1.05rem, 1.2vw, 1.2rem); font-weight: 700; line-height: 1.3; color: var(--color-navy); } .faq-topic-list { list-style: none; margin: 0 0 clamp(0.85rem, 1.25vw, 1.05rem); padding: 0; display: flex; flex-direction: column; gap: clamp(0.45rem, 0.75vw, 0.6rem); } .faq-topic { display: flex; align-items: center; gap: clamp(0.55rem, 0.85vw, 0.7rem); width: 100%; padding: clamp(0.65rem, 0.95vw, 0.8rem) clamp(0.75rem, 1.05vw, 0.9rem); border: 1px solid rgba(0, 27, 102, 0.08); border-radius: var(--experience-photo-radius); background-color: #fff; font-family: var(--font-body); font-size: clamp(0.82rem, 0.9vw, 0.92rem); font-weight: 600; line-height: 1.35; color: var(--color-navy); text-align: left; cursor: pointer; transition: border-color var(--ease-soft), background-color var(--ease-soft), color var(--ease-soft); } .faq-topic__icon { flex-shrink: 0; width: var(--faq-topic-icon-size); height: var(--faq-topic-icon-size); max-width: var(--faq-topic-icon-size); max-height: var(--faq-topic-icon-size); object-fit: contain; } .faq-topic:hover, .faq-topic.is-active { border-color: rgba(238, 29, 120, 0.18); background-color: var(--faq-section-pink); color: var(--color-pink); } .faq-sidebar-card { position: relative; display: flex; flex-direction: column; align-items: center; text-align: center; padding: clamp(0.95rem, 1.25vw, 1.1rem); border-radius: var(--experience-card-radius); background-color: var(--faq-section-pink); border: 1px solid rgba(238, 29, 120, 0.1); } .faq-sidebar-card__heart { width: clamp(30px, 2.6vw, 36px); height: auto; max-width: clamp(30px, 2.6vw, 36px); object-fit: contain; margin: 0 auto clamp(0.45rem, 0.75vw, 0.6rem); } .faq-sidebar-card__title { margin: 0 0 clamp(0.35rem, 0.55vw, 0.45rem); font-family: var(--font-heading); font-size: clamp(0.98rem, 1.08vw, 1.08rem); font-weight: 700; line-height: 1.3; color: var(--color-navy); } .faq-sidebar-card__text { margin: 0 0 clamp(0.75rem, 1.1vw, 0.95rem); font-family: var(--font-body); font-size: clamp(0.82rem, 0.9vw, 0.92rem); line-height: 1.45; color: var(--color-navy); } .faq-card-action { display: inline-flex; align-items: center; justify-content: center; gap: clamp(0.45rem, 0.75vw, 0.6rem); width: 100%; } .faq-sidebar-card__btn, .faq-contact-cta__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; flex-shrink: 0; } .faq-sidebar-card__btn { min-width: min(100%, 12.5rem); } .faq-card-action__label { line-height: 1.2; } .faq-card-action__arrow { flex-shrink: 0; display: block; width: 1.05em; height: 1.05em; transform: translateY(0.08em); } .faq-card-action__heart { flex-shrink: 0; width: clamp(28px, 2.4vw, 34px); height: clamp(28px, 2.4vw, 34px); max-width: clamp(28px, 2.4vw, 34px); max-height: clamp(28px, 2.4vw, 34px); object-fit: contain; } .faq-card-action__plane { flex-shrink: 0; width: clamp(4.5rem, 7.5vw, 6.25rem); height: auto; max-width: clamp(4.5rem, 7.5vw, 6.25rem); object-fit: contain; } .faq-accordion { display: flex; flex-direction: column; gap: clamp(0.55rem, 0.85vw, 0.7rem); } .faq-item { border: 1px solid rgba(0, 27, 102, 0.1); border-radius: var(--experience-photo-radius); background-color: #fff; overflow: hidden; transition: border-color 0.28s ease, box-shadow 0.28s ease; } .faq-item.is-open { border-color: rgba(238, 29, 120, 0.22); box-shadow: rgba(238, 29, 120, 0.08) 0 4px 14px 0; } .faq-item__heading { margin: 0; } .faq-item__trigger { display: flex; align-items: center; justify-content: space-between; gap: clamp(0.75rem, 1.1vw, 0.95rem); width: 100%; padding: clamp(0.85rem, 1.15vw, 1rem) clamp(0.95rem, 1.25vw, 1.1rem); border: 0; background: transparent; text-align: left; cursor: pointer; transition: background-color 0.25s ease; } .faq-item.is-open .faq-item__trigger { background-color: rgba(255, 245, 249, 0.65); } .faq-item__question { flex: 1 1 auto; min-width: 0; font-family: var(--font-heading); font-size: clamp(0.92rem, 1vw, 1.02rem); font-weight: 700; line-height: 1.35; color: var(--color-navy); } .faq-item__toggle { position: relative; flex-shrink: 0; width: 20px; height: 20px; } .faq-item__toggle-plus { display: block; width: 20px; height: 20px; max-width: 20px; max-height: 20px; object-fit: contain; transition: transform 0.28s ease, opacity 0.28s ease; } .faq-item.is-open .faq-item__toggle-plus { transform: rotate(90deg) scale(0.85); opacity: 0; } .faq-item__toggle-minus { display: block; position: absolute; inset: 0; margin: auto; width: 14px; height: 2px; border-radius: 999px; background-color: var(--color-pink); opacity: 0; transform: scaleX(0.4); transition: opacity 0.28s ease, transform 0.28s ease; } .faq-item.is-open .faq-item__toggle-minus { opacity: 1; transform: scaleX(1); } .faq-item__panel { display: grid; grid-template-rows: 0fr; opacity: 0; border-top: 0; transition: grid-template-rows 0.34s ease, opacity 0.28s ease, border-color 0.28s ease; } .faq-item.is-open .faq-item__panel { grid-template-rows: 1fr; opacity: 1; border-top: 1px solid rgba(0, 27, 102, 0.06); } .faq-item__answer { overflow: hidden; min-height: 0; position: relative; padding: 0 clamp(0.95rem, 1.25vw, 1.1rem); transition: padding 0.34s ease; } .faq-item.is-open .faq-item__answer { padding: clamp(0.75rem, 1.05vw, 0.9rem) clamp(0.95rem, 1.25vw, 1.1rem) clamp(0.95rem, 1.25vw, 1.1rem); padding-left: clamp(1.15rem, 1.45vw, 1.35rem); } .faq-item.is-open .faq-item__answer::before { content: ""; position: absolute; left: 0; top: clamp(0.65rem, 0.95vw, 0.8rem); bottom: clamp(0.65rem, 0.95vw, 0.8rem); width: 4px; border-radius: 999px; background-color: var(--color-pink); animation: faq-accent-in 0.35s ease both; } @keyframes faq-accent-in { from { opacity: 0; transform: scaleY(0.35); } to { opacity: 1; transform: scaleY(1); } } .faq-item__answer p { margin: 0; font-family: var(--font-body); font-size: clamp(0.84rem, 0.92vw, 0.94rem); line-height: 1.55; color: var(--color-navy); } .faq-item__answer a { color: var(--color-pink); font-weight: 600; text-decoration: underline; text-underline-offset: 0.15em; } .faq-empty { margin: clamp(0.75rem, 1.1vw, 0.95rem) 0 0; font-family: var(--font-body); font-size: clamp(0.88rem, 0.96vw, 0.98rem); line-height: 1.5; color: var(--color-navy); text-align: center; } .faq-contact-cta__card { position: relative; display: flex; align-items: center; justify-content: space-between; gap: clamp(1rem, 1.75vw, 1.5rem); padding: clamp(1.1rem, 1.55vw, 1.35rem) clamp(1.25rem, 2vw, 1.75rem); border-radius: var(--experience-card-radius); background-color: var(--faq-section-pink); border: 1px solid rgba(238, 29, 120, 0.1); } .faq-contact-cta__envelope { flex-shrink: 0; width: clamp(72px, 7vw, 88px); height: auto; object-fit: contain; } .faq-contact-cta__copy { flex: 1 1 auto; min-width: 0; text-align: left; } .faq-contact-cta__action { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; gap: clamp(0.65rem, 1.15vw, 0.95rem); flex-shrink: 0; } .faq-contact-cta__action .faq-card-action__plane { width: clamp(5rem, 8.5vw, 7rem); max-width: clamp(5rem, 8.5vw, 7rem); } .faq-contact-cta__action .faq-card-action__heart { width: clamp(32px, 2.85vw, 42px); height: clamp(32px, 2.85vw, 42px); max-width: clamp(32px, 2.85vw, 42px); max-height: clamp(32px, 2.85vw, 42px); } .faq-contact-cta__btn { flex-shrink: 0; } .faq-contact-cta__title { margin: 0 0 clamp(0.25rem, 0.45vw, 0.35rem); font-family: var(--font-heading); font-size: clamp(1.05rem, 1.25vw, 1.25rem); font-weight: 700; line-height: 1.3; color: var(--color-navy); } .faq-contact-cta__text { margin: 0; font-family: var(--font-body); font-size: clamp(0.84rem, 0.92vw, 0.94rem); line-height: 1.45; color: var(--color-navy); } @media (max-width: 1024px) { .faq-main__inner { grid-template-columns: 1fr; } .faq-topic-list { display: flex; flex-direction: column; flex-wrap: nowrap; overflow: visible; overscroll-behavior: auto; touch-action: auto; scroll-snap-type: none; gap: clamp(0.45rem, 0.75vw, 0.6rem); padding-bottom: 0; margin-inline: 0; padding-inline: 0; width: 100%; } .faq-topic-list li { flex: 0 0 auto; width: 100%; max-width: 100%; scroll-snap-align: none; } .faq-topic, .faq-item__question, .faq-item__answer { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } } @media (max-width: 768px) { .faq-contact-cta__card { flex-direction: column; align-items: stretch; text-align: center; } .faq-contact-cta__envelope { margin-inline: auto; } .faq-contact-cta__copy { text-align: center; } .faq-contact-cta__action { width: 100%; justify-content: center; flex-wrap: wrap; } .faq-contact-cta__btn { width: auto; min-width: min(100%, 14rem); justify-content: center; } } /* ??? Photo & Media Policy page ??? */ .media-policy-page { --media-policy-pink: #fff5f9; --media-policy-nav-active-bg: #fff0f6; --media-policy-icon-size: clamp(26px, 2.2vw, 30px); --media-policy-section-icon-size: clamp(34px, 3vw, 40px); --media-policy-sidebar-card-icon-size: clamp(102px, 10vw, 120px); --media-policy-icon-blend-filter: brightness(1.04) contrast(1.06) saturate(1.03); --media-policy-sticky-top: clamp(1.25rem, 2.5vw, 2rem); --media-policy-mobile-nav-top: 0px; } .media-policy-page .creative-makers-breadcrumbs__list li[aria-current="page"] { color: var(--color-pink); font-weight: 600; } .media-policy-hero { background-color: #fff; min-height: 0; overflow: visible; } .media-policy-hero.page-hero { min-height: 0; } .media-policy-hero__inner { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); align-items: center; gap: var(--home-hero-col-gap); min-height: 0; } .media-policy-hero__content { width: 100%; max-width: none; } .media-policy-breadcrumbs { margin-bottom: clamp(0.35rem, 0.55vw, 0.45rem); } .media-policy-hero__title { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 clamp(0.65rem, 1vw, 0.85rem); font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--color-navy); } .media-policy-hero__heart { width: clamp(22px, 2vw, 28px); height: auto; max-width: clamp(22px, 2vw, 28px); object-fit: contain; } .media-policy-hero__text { max-width: 28rem; margin: 0; font-family: var(--font-body); font-size: clamp(0.92rem, 1vw, 1.02rem); line-height: 1.55; color: var(--color-navy); } .media-policy-hero__media { background-color: #fff; } .media-policy-hero__banner { width: 100%; height: auto; max-height: none; min-height: unset; object-fit: contain; filter: brightness(1.04) contrast(1.05) saturate(1.03); mix-blend-mode: multiply; } .media-policy-main { overflow: visible; } /* Keep sidebar positioning stable ? transform on this section breaks fixed/sticky */ .media-policy-main.scroll-rise { opacity: 1; transform: none; animation: none; } .media-policy-main__inner { display: grid; grid-template-columns: minmax(0, 0.32fr) minmax(0, 0.68fr); align-items: stretch; gap: clamp(1.25rem, 2vw, 1.75rem); overflow: visible; position: relative; } .media-policy-sidebar { align-self: stretch; min-width: 0; position: relative; } .media-policy-sidebar__sticky { width: 100%; } @media (min-width: 1025px) { .media-policy-sidebar { align-self: start; position: relative; z-index: 5; } .media-policy-sidebar__sticky { width: 100%; max-height: none; overflow: visible; } .media-policy-sidebar.is-fixed .media-policy-sidebar__sticky { position: fixed; top: var(--media-policy-sticky-top); z-index: 5; } .media-policy-sidebar.is-at-bottom .media-policy-sidebar__sticky { position: absolute; top: auto; bottom: 0; left: 0; width: 100%; } } .media-policy-sidebar__title { margin: 0 0 clamp(0.65rem, 1vw, 0.85rem); font-family: var(--font-heading); font-size: clamp(1rem, 1.12vw, 1.12rem); font-weight: 700; line-height: 1.3; color: var(--color-navy); } .media-policy-nav__list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(0.2rem, 0.35vw, 0.28rem); min-width: 0; width: 100%; } .media-policy-nav__link { display: flex; align-items: center; gap: clamp(0.55rem, 0.85vw, 0.7rem); padding: clamp(0.62rem, 0.9vw, 0.75rem) clamp(0.7rem, 1vw, 0.85rem); border-left: 4px solid transparent; border-radius: 0 var(--experience-photo-radius) var(--experience-photo-radius) 0; font-family: var(--font-body); font-size: clamp(0.8rem, 0.88vw, 0.9rem); font-weight: 560; line-height: 1.35; color: var(--color-navy); text-decoration: none; transition: background-color var(--ease-soft), border-color var(--ease-soft), color var(--ease-soft); } .media-policy-nav__link:hover { background-color: rgba(255, 245, 249, 0.75); color: var(--color-pink); } .media-policy-nav__link.is-active { background-color: var(--media-policy-nav-active-bg); border-left-color: var(--color-pink); color: var(--color-pink); } .media-policy-nav__icon { flex-shrink: 0; width: var(--media-policy-icon-size); height: var(--media-policy-icon-size); max-width: var(--media-policy-icon-size); max-height: var(--media-policy-icon-size); object-fit: contain; } .media-policy-sidebar-card { display: flex; flex-direction: column; align-items: center; text-align: center; margin-top: clamp(0.85rem, 1.25vw, 1.05rem); padding: clamp(0.95rem, 1.25vw, 1.15rem); border-radius: var(--experience-card-radius); background-color: var(--media-policy-pink); border: 1px solid rgba(238, 29, 120, 0.1); } .media-policy-sidebar-card__icon { width: var(--media-policy-sidebar-card-icon-size); height: var(--media-policy-sidebar-card-icon-size); max-width: var(--media-policy-sidebar-card-icon-size); max-height: var(--media-policy-sidebar-card-icon-size); object-fit: contain; margin-bottom: clamp(0.55rem, 0.85vw, 0.7rem); } .media-policy-sidebar-card__text { margin: 0; font-family: var(--font-body); font-size: clamp(0.82rem, 0.9vw, 0.92rem); line-height: 1.45; color: var(--color-navy); } .media-policy-content { display: flex; flex-direction: column; gap: clamp(0.75rem, 1.1vw, 0.95rem); min-width: 0; max-width: 100%; } .media-policy-section { scroll-margin-top: clamp(5rem, 8vw, 6.5rem); padding: clamp(1rem, 1.35vw, 1.2rem) clamp(1.05rem, 1.45vw, 1.25rem); border: 1px solid rgba(0, 27, 102, 0.1); border-radius: var(--experience-card-radius); background-color: #fff; min-width: 0; max-width: 100%; } .media-policy-section__head { display: flex; align-items: flex-start; gap: clamp(0.65rem, 0.95vw, 0.8rem); margin-bottom: clamp(0.55rem, 0.85vw, 0.7rem); } .media-policy-section__icon { flex-shrink: 0; width: var(--media-policy-section-icon-size); height: var(--media-policy-section-icon-size); max-width: var(--media-policy-section-icon-size); max-height: var(--media-policy-section-icon-size); object-fit: contain; margin-top: 0.12em; } .media-policy-section__icon--blend { filter: var(--media-policy-icon-blend-filter); mix-blend-mode: multiply; } .media-policy-section__title { margin: 0; font-family: var(--font-body); font-size: clamp(0.98rem, 1.08vw, 1.1rem); font-weight: 700; line-height: 1.35; color: var(--color-navy); } .media-policy-section__body { padding-left: calc(var(--media-policy-section-icon-size) + clamp(0.65rem, 0.95vw, 0.8rem)); } .media-policy-section__body p { margin: 0 0 clamp(0.55rem, 0.85vw, 0.7rem); font-family: var(--font-body); font-size: clamp(0.84rem, 0.92vw, 0.94rem); line-height: 1.55; color: var(--color-navy); overflow-wrap: break-word; } .media-policy-section__body p:last-child { margin-bottom: 0; } .media-policy-list { list-style: none; margin: 0 0 clamp(0.55rem, 0.85vw, 0.7rem); padding: 0; display: flex; flex-direction: column; gap: clamp(0.35rem, 0.55vw, 0.45rem); font-family: var(--font-body); font-size: clamp(0.84rem, 0.92vw, 0.94rem); line-height: 1.55; color: var(--color-navy); } .media-policy-list li { position: relative; padding-left: 0.95rem; margin: 0; } .media-policy-list li::before { content: ""; position: absolute; left: 0; top: 0.62em; width: 6px; height: 6px; border-radius: 50%; } .media-policy-list--green li::before { background-color: var(--color-green); } .media-policy-list--pink li::before { background-color: var(--color-pink); } .media-policy-checklist { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: clamp(0.45rem, 0.7vw, 0.55rem); } .media-policy-checklist li { display: flex; align-items: flex-start; gap: 0.55rem; font-family: var(--font-body); font-size: clamp(0.84rem, 0.92vw, 0.94rem); line-height: 1.55; color: var(--color-navy); } .media-policy-checklist__icon { flex-shrink: 0; width: clamp(16px, 1.45vw, 18px); height: clamp(16px, 1.45vw, 18px); max-width: clamp(16px, 1.45vw, 18px); max-height: clamp(16px, 1.45vw, 18px); object-fit: contain; margin-top: 0.2em; } .media-policy-section__contact { color: var(--color-pink); font-weight: 600; text-decoration: underline; text-underline-offset: 0.15em; } .media-policy-section__contact:hover { color: #d4186a; } @media (max-width: 1024px) { .media-policy-main__inner { grid-template-columns: 1fr; min-width: 0; } .media-policy-sidebar { position: relative; z-index: 25; min-width: 0; max-width: 100%; margin-bottom: clamp(0.35rem, 0.9vw, 0.55rem); } .media-policy-sidebar.is-fixed .media-policy-sidebar__sticky, .media-policy-sidebar.is-at-bottom .media-policy-sidebar__sticky { z-index: 40; background: #fff; box-shadow: 0 2px 8px rgba(99, 99, 99, 0.12); border-bottom: 1px solid rgba(0, 27, 102, 0.08); padding-top: clamp(0.35rem, 1vw, 0.5rem); padding-bottom: clamp(0.45rem, 1.1vw, 0.65rem); padding-inline: var(--container-padding); box-sizing: border-box; } .media-policy-sidebar.is-fixed .media-policy-sidebar__sticky { position: fixed; top: 0; left: 0; right: 0; width: 100%; } .media-policy-sidebar.is-at-bottom .media-policy-sidebar__sticky { position: absolute; top: auto; bottom: 0; left: 0; width: 100%; } .media-policy-sidebar__sticky { position: static; top: auto; bottom: auto; left: auto; width: 100%; max-height: none; overflow: visible; min-width: 0; } .media-policy-sidebar__title { margin-bottom: clamp(0.45rem, 1vw, 0.6rem); } .media-policy-nav { min-width: 0; max-width: 100%; overflow: hidden; } .media-policy-nav__list { flex-direction: row; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0; padding-bottom: 0.35rem; margin-inline: 0 !important; padding-inline: 2px; scroll-padding-inline: 0; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; } .media-policy-sidebar:not(.is-fixed):not(.is-at-bottom) .media-policy-nav__list { margin-inline: 0 !important; padding-inline: 2px; } .media-policy-nav__list::-webkit-scrollbar { display: none; } .media-policy-nav__list li { flex: 0 0 100%; flex-grow: 0; flex-shrink: 0; width: 100%; min-width: 0; max-width: 100%; scroll-snap-align: start; scroll-snap-stop: always; box-sizing: border-box; display: flex; justify-content: center; } .media-policy-nav__link { height: 100%; width: 100%; max-width: 100%; justify-content: center; text-align: center; border-left: 0; border-bottom: 3px solid transparent; border-radius: var(--experience-photo-radius); min-width: 0; box-sizing: border-box; } .media-policy-nav__link.is-active { border-left-color: transparent; border-bottom-color: var(--color-pink); } .media-policy-sidebar-card { display: none; } .media-policy-section { scroll-margin-top: clamp(7.5rem, 22vw, 9.5rem); } } @media (max-width: 768px) { .media-policy-hero__inner { grid-template-columns: 1fr; } .media-policy-hero__media { order: 2; } .media-policy-section__body { padding-left: 0; } .media-policy-section__head { flex-direction: column; align-items: flex-start; } } /* ??? Photo & Media Consent Form page ??? */ .media-consent-page { --media-consent-green: #22a06b; --media-consent-green-bg: #f0faf5; --media-consent-amber: #d97706; --media-consent-amber-bg: #fff8ed; --media-consent-red: #e11d48; --media-consent-red-bg: #fff5f7; --media-consent-usage-icon-size: clamp(22px, 1.8vw, 26px); --media-consent-input-height: 42px; } .media-consent-hero__title { display: inline-flex; align-items: center; flex-wrap: nowrap; gap: clamp(0.35rem, 0.55vw, 0.5rem); max-width: 100%; } .media-consent-hero__title-text { flex: 0 1 auto; min-width: 0; } .media-consent-hero__heart { flex-shrink: 0; align-self: center; } .media-consent-page .contact-field__box { min-height: var(--media-consent-input-height); padding: 0 0.85rem; } .media-consent-page .contact-field__input { font-size: clamp(0.8rem, 0.86vw, 0.88rem); } .media-consent-page .apply-field__label { font-size: clamp(0.8rem, 0.86vw, 0.88rem); margin-bottom: 0.3rem; } .media-consent-form { display: flex; flex-direction: column; gap: clamp(0.75rem, 1.1vw, 0.95rem); min-width: 0; max-width: 100%; } .media-consent-page .contact-field { min-width: 0; max-width: 100%; } .media-consent-page .contact-field__box { max-width: 100%; min-width: 0; box-sizing: border-box; } .media-consent-section__body--form { padding-left: calc(var(--media-policy-section-icon-size) + clamp(0.65rem, 0.95vw, 0.8rem)); } .media-consent-section__body--flush { padding-left: 0; } .media-consent-fields { display: grid; gap: clamp(0.55rem, 0.85vw, 0.7rem); min-width: 0; max-width: 100%; } .media-consent-fields .contact-field { margin: 0; min-width: 0; } .media-consent-fields--child { grid-template-columns: repeat(6, minmax(0, 1fr)); } .media-consent-field--name { grid-column: 1 / 4; } .media-consent-field--dob { grid-column: 4 / 7; } .media-consent-field--guardian { grid-column: 1 / 3; } .media-consent-field--email { grid-column: 3 / 5; } .media-consent-field--phone { grid-column: 5 / 7; } .media-consent-fields--signature { grid-template-columns: 1fr; } .media-consent-field-box { position: relative; width: 100%; } .media-consent-field-box .contact-field__input { width: 100%; padding-right: 2.25rem; } .media-consent-date-input { position: relative; color-scheme: light; } .media-consent-date-input::-webkit-calendar-picker-indicator { opacity: 0; position: absolute; right: 0; width: 2.5rem; height: 100%; cursor: pointer; } .media-consent-field-box__btn { position: absolute; right: clamp(0.45rem, 0.65vw, 0.55rem); top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; padding: 0.15rem; border: none; background: transparent; cursor: pointer; line-height: 0; } .media-consent-field-box__btn:hover .media-consent-field-box__icon, .media-consent-field-box__btn:focus-visible .media-consent-field-box__icon { opacity: 0.85; } .media-consent-field-box__btn:focus-visible { outline: 2px solid var(--color-pink); outline-offset: 2px; border-radius: 4px; } .media-consent-field-box__icon { width: clamp(16px, 1.35vw, 18px); height: auto; max-width: clamp(16px, 1.35vw, 18px); object-fit: contain; pointer-events: none; } .media-consent-section__intro { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: clamp(0.2rem, 0.35vw, 0.3rem); } .media-consent-section__desc { margin: 0; font-family: var(--font-body); font-size: clamp(0.82rem, 0.9vw, 0.92rem); font-weight: 400; line-height: 1.5; color: rgba(0, 27, 102, 0.82); overflow-wrap: break-word; } .media-consent-page .media-policy-section__head { margin-bottom: clamp(0.65rem, 0.95vw, 0.8rem); } .media-consent-usage-note { margin: clamp(0.65rem, 0.95vw, 0.8rem) 0 0; font-family: var(--font-body); font-size: clamp(0.8rem, 0.88vw, 0.9rem); line-height: 1.5; color: rgba(0, 27, 102, 0.82); } .media-consent-options { border: 0; margin: 0; padding: 0; } .media-consent-options__grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(0.65rem, 1vw, 0.85rem); min-width: 0; max-width: 100%; } .media-consent-option { cursor: pointer; min-width: 0; } .media-consent-option input { position: absolute; opacity: 0; pointer-events: none; } .media-consent-option__inner { display: flex; align-items: flex-start; gap: clamp(0.55rem, 0.85vw, 0.7rem); height: 100%; padding: clamp(0.85rem, 1.15vw, 1rem); border: 2px solid rgba(0, 27, 102, 0.12); border-radius: var(--experience-card-radius); background-color: #fff; transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease; } .media-consent-option__icon { flex-shrink: 0; width: clamp(26px, 2.2vw, 32px); height: auto; max-width: clamp(26px, 2.2vw, 32px); object-fit: contain; } .media-consent-option__copy { display: flex; flex-direction: column; gap: 0.25rem; font-family: var(--font-body); font-size: clamp(0.8rem, 0.88vw, 0.9rem); line-height: 1.45; color: var(--color-navy); min-width: 0; overflow-wrap: break-word; } .media-consent-option__copy strong { font-size: clamp(0.86rem, 0.94vw, 0.96rem); font-weight: 700; } .media-consent-option--full input:checked + .media-consent-option__inner { border-color: var(--media-consent-green); background-color: var(--media-consent-green-bg); box-shadow: 0 0 0 1px rgba(34, 160, 107, 0.08); } .media-consent-option--limited input:checked + .media-consent-option__inner { border-color: var(--media-consent-amber); background-color: var(--media-consent-amber-bg); box-shadow: 0 0 0 1px rgba(217, 119, 6, 0.08); } .media-consent-option--none input:checked + .media-consent-option__inner { border-color: var(--media-consent-red); background-color: var(--media-consent-red-bg); box-shadow: 0 0 0 1px rgba(225, 29, 72, 0.08); } .media-consent-option:hover .media-consent-option__inner { border-color: rgba(238, 29, 120, 0.35); } .media-consent-usage-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(0.45rem, 0.65vw, 0.55rem); margin-top: 0; min-width: 0; max-width: 100%; } .media-consent-usage-card { cursor: pointer; min-width: 0; } .media-consent-usage-card input { position: absolute; opacity: 0; pointer-events: none; } .media-consent-usage-card__inner { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: clamp(0.35rem, 0.5vw, 0.45rem); min-height: clamp(5rem, 7vw, 5.75rem); height: 100%; padding: clamp(0.55rem, 0.75vw, 0.65rem) clamp(0.35rem, 0.5vw, 0.45rem); border: 1px solid rgba(0, 27, 102, 0.1); border-radius: var(--experience-card-radius); background-color: #fff; text-align: center; font-family: var(--font-body); font-size: clamp(0.68rem, 0.74vw, 0.76rem); font-weight: 700; line-height: 1.3; color: var(--color-navy); transition: border-color 0.2s ease, background-color 0.2s ease; } .media-consent-usage-card__icon { width: var(--media-consent-usage-icon-size); height: var(--media-consent-usage-icon-size); max-width: var(--media-consent-usage-icon-size); max-height: var(--media-consent-usage-icon-size); object-fit: contain; } .media-consent-usage-card input:checked + .media-consent-usage-card__inner { border-color: var(--color-pink); background-color: var(--media-policy-pink); } .media-consent-usage-card:hover .media-consent-usage-card__inner { border-color: rgba(238, 29, 120, 0.35); } .media-consent-checklist__icon { flex-shrink: 0; width: clamp(16px, 1.4vw, 18px); height: auto; max-width: clamp(16px, 1.4vw, 18px); object-fit: contain; } .media-consent-rights-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.55rem, 0.85vw, 0.7rem) clamp(0.85rem, 1.25vw, 1.05rem); min-width: 0; max-width: 100%; } .media-consent-rights-grid li { display: flex; align-items: flex-start; gap: clamp(0.45rem, 0.65vw, 0.55rem); margin: 0; font-family: var(--font-body); font-size: clamp(0.84rem, 0.92vw, 0.94rem); line-height: 1.5; color: var(--color-navy); min-width: 0; } .media-consent-rights-grid li span { overflow-wrap: break-word; } .media-consent-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.75rem, 1.1vw, 0.95rem); min-width: 0; max-width: 100%; } .media-consent-split .media-policy-section { height: 100%; } .media-consent-terms-list { list-style: none; margin: 0 0 clamp(0.75rem, 1.1vw, 0.95rem); padding: 0; display: flex; flex-direction: column; gap: clamp(0.45rem, 0.65vw, 0.55rem); } .media-consent-terms-list li { display: flex; align-items: flex-start; gap: clamp(0.45rem, 0.65vw, 0.55rem); margin: 0; font-family: var(--font-body); font-size: clamp(0.84rem, 0.92vw, 0.94rem); line-height: 1.5; color: var(--color-navy); min-width: 0; } .media-consent-terms-list li span { overflow-wrap: break-word; } .media-consent-terms-check { margin: 0; } .media-consent-terms-check span { overflow-wrap: break-word; } .media-consent-submit { scroll-margin-top: clamp(5rem, 8vw, 6.5rem); display: flex; align-items: center; justify-content: space-between; gap: clamp(1rem, 1.5vw, 1.35rem); flex-wrap: wrap; padding: clamp(1rem, 1.35vw, 1.2rem) clamp(1.05rem, 1.45vw, 1.25rem); border-radius: var(--experience-card-radius); background-color: var(--media-policy-pink); border: 1px solid rgba(238, 29, 120, 0.12); min-width: 0; max-width: 100%; } .media-consent-submit__copy { display: flex; align-items: flex-start; gap: clamp(0.65rem, 0.95vw, 0.8rem); flex: 1 1 16rem; min-width: 0; } .media-consent-submit__icon { flex-shrink: 0; width: clamp(30px, 2.6vw, 36px); height: auto; max-width: clamp(30px, 2.6vw, 36px); object-fit: contain; } .media-consent-submit__title { margin: 0 0 0.25rem; font-family: var(--font-body); font-size: clamp(0.98rem, 1.08vw, 1.1rem); font-weight: 700; line-height: 1.35; color: var(--color-navy); } .media-consent-submit__text { margin: 0; font-family: var(--font-body); font-size: clamp(0.84rem, 0.92vw, 0.94rem); line-height: 1.5; color: var(--color-navy); overflow-wrap: break-word; } .media-consent-submit__text a { color: var(--color-pink); font-weight: 600; text-decoration: underline; text-underline-offset: 0.12em; } .media-consent-submit__btn { display: inline-flex; align-items: center; gap: 0.45rem; flex-shrink: 0; } .media-consent-submit__heart { width: clamp(18px, 1.6vw, 22px); height: auto; max-width: clamp(18px, 1.6vw, 22px); object-fit: contain; } @media (max-width: 1023px) { .media-consent-usage-grid { display: flex; flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: clamp(0.45rem, 2vw, 0.55rem); padding-bottom: 0.35rem; width: 100%; min-width: 0; max-width: 100%; } .media-consent-usage-grid::-webkit-scrollbar { display: none; } .media-consent-usage-card { flex: 0 0 calc((100% - 16px) / 3); width: calc((100% - 16px) / 3); max-width: calc((100% - 16px) / 3); scroll-snap-align: start; min-width: 0; box-sizing: border-box; overflow: hidden; } .media-consent-options__grid { grid-template-columns: 1fr; } .media-consent-split { grid-template-columns: 1fr; } .media-consent-fields--child { grid-template-columns: 1fr; } .media-consent-field--name, .media-consent-field--dob, .media-consent-field--guardian, .media-consent-field--email, .media-consent-field--phone { grid-column: 1 / -1; } .media-consent-rights-grid { grid-template-columns: 1fr; } .media-consent-section__body--form { padding-left: 0; } .media-consent-submit { flex-direction: column; align-items: stretch; } .media-consent-submit__btn { width: 100%; justify-content: center; } } @media (max-width: 768px) { .media-consent-hero__title { flex-wrap: wrap; } } /* ??? Accessibility page ??? */ .accessibility-page { overflow-x: hidden; } .accessibility-page .creative-makers-breadcrumbs__list li[aria-current="page"] { color: var(--color-pink); font-weight: 600; } .accessibility-hero { background-color: #fff; min-height: 0; overflow: visible; } .accessibility-hero.page-hero { min-height: 0; } .accessibility-hero__inner { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); align-items: center; gap: var(--home-hero-col-gap); min-height: 0; min-width: 0; max-width: 100%; } .accessibility-hero__content { width: 100%; max-width: none; min-width: 0; } .accessibility-breadcrumbs { margin-bottom: clamp(0.35rem, 0.55vw, 0.45rem); } .accessibility-hero__title { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 clamp(0.65rem, 1vw, 0.85rem); font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--color-navy); } .accessibility-hero__heart { width: clamp(22px, 2vw, 28px); height: auto; max-width: clamp(22px, 2vw, 28px); object-fit: contain; } .accessibility-hero__text { max-width: 28rem; margin: 0; font-family: var(--font-body); font-size: clamp(0.92rem, 1vw, 1.02rem); line-height: 1.55; color: var(--color-navy); overflow-wrap: break-word; } .accessibility-hero__media { background-color: #fff; min-width: 0; } .accessibility-hero__banner { width: 100%; height: auto; max-height: none; min-height: unset; object-fit: contain; filter: brightness(1.04) contrast(1.05) saturate(1.03); mix-blend-mode: multiply; } .accessibility-commitment { padding-top: 0; } .accessibility-commitment__card { background-color: var(--believe-card-pink); border-radius: var(--home-pillar-radius); padding: clamp(1rem, 1.65vw, 1.45rem); min-width: 0; max-width: 100%; } .accessibility-commitment__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 0.42fr); align-items: center; gap: clamp(0.85rem, 1.55vw, 1.35rem); min-width: 0; } .accessibility-commitment__icon { width: clamp(52px, 5.5vw, 72px); height: auto; object-fit: contain; flex-shrink: 0; } .accessibility-commitment__copy { min-width: 0; } .accessibility-commitment__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.15rem, 1.55vw, 1.45rem); line-height: 1.25; color: var(--color-navy); margin: 0 0 clamp(0.45rem, 0.75vw, 0.6rem); } .accessibility-commitment__text { font-family: var(--font-body); font-size: clamp(0.84rem, 0.92vw, 0.94rem); line-height: 1.55; color: var(--color-navy); margin: 0; overflow-wrap: break-word; } .accessibility-commitment__deco { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: clamp(0.35rem, 0.65vw, 0.5rem); min-width: 0; } .accessibility-commitment__stars { display: flex; align-items: center; gap: 0.35rem; } .accessibility-commitment__star { width: clamp(18px, 2vw, 28px); height: auto; object-fit: contain; } .accessibility-commitment__quote-img { width: min(100%, 220px); height: auto; object-fit: contain; } .accessibility-provide { background-color: #fff; } .accessibility-provide__inner { min-width: 0; max-width: 100%; } .accessibility-provide__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.35rem, 2.2vw, 1.85rem); line-height: 1.2; color: var(--color-navy); text-align: center; margin: 0 0 clamp(1rem, 1.65vw, 1.35rem); } .accessibility-provide-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: clamp(0.65rem, 1.1vw, 0.95rem); min-width: 0; max-width: 100%; } .accessibility-provide-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(0.45rem, 0.75vw, 0.6rem); padding: clamp(0.85rem, 1.25vw, 1.1rem) clamp(0.55rem, 0.9vw, 0.75rem); border-radius: var(--experience-photo-radius); border: 1px solid rgba(0, 27, 102, 0.1); background-color: #fff; min-width: 0; } .accessibility-provide-card__icon { width: clamp(44px, 4.5vw, 56px); height: auto; object-fit: contain; } .accessibility-provide-card__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(0.78rem, 0.88vw, 0.92rem); line-height: 1.3; color: var(--color-navy); margin: 0; overflow-wrap: break-word; } .accessibility-provide-card__text { font-family: var(--font-body); font-size: clamp(0.7rem, 0.78vw, 0.8rem); line-height: 1.45; color: var(--color-navy); opacity: 0.88; margin: 0; overflow-wrap: break-word; } .accessibility-panels { padding-top: 0; } .accessibility-panels__inner { display: flex; flex-direction: column; gap: clamp(0.85rem, 1.35vw, 1.15rem); min-width: 0; max-width: 100%; } .accessibility-panel { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, max-content); align-items: center; gap: clamp(0.85rem, 1.5vw, 1.35rem); padding: clamp(1.15rem, 1.75vw, 1.5rem) clamp(1.25rem, 2vw, 1.75rem); border-radius: var(--home-pillar-radius); min-width: 0; max-width: 100%; } .accessibility-panel--purple { background-color: var(--believe-card-purple); } .accessibility-panel--pink { background-color: var(--believe-card-pink); } .accessibility-panel--yellow { background-color: var(--believe-card-yellow); } .accessibility-panel__icon { width: clamp(52px, 5vw, 64px); height: auto; object-fit: contain; flex-shrink: 0; align-self: center; } .accessibility-panel__copy { min-width: 0; padding-right: clamp(0.25rem, 0.75vw, 0.5rem); } .accessibility-panel__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.28; color: var(--color-navy); margin: 0 0 clamp(0.35rem, 0.6vw, 0.45rem); } .accessibility-panel__text { font-family: var(--font-body); font-size: clamp(0.82rem, 0.9vw, 0.92rem); line-height: 1.52; color: var(--color-navy); margin: 0; overflow-wrap: break-word; max-width: 42rem; } .accessibility-panel__aside { display: flex; flex-direction: column; gap: clamp(0.45rem, 0.75vw, 0.6rem); min-width: min(100%, 15.5rem); flex-shrink: 0; align-self: center; } .accessibility-panel__aside-row { display: flex; align-items: center; gap: clamp(0.35rem, 0.6vw, 0.5rem); margin: 0; font-family: var(--font-body); font-size: clamp(0.76rem, 0.84vw, 0.86rem); line-height: 1.4; color: var(--color-navy); } .accessibility-panel__aside-icon { flex-shrink: 0; width: clamp(24px, 2.2vw, 28px); height: auto; object-fit: contain; } .accessibility-panel__email { font-weight: 600; color: var(--color-pink); text-decoration: none; overflow-wrap: anywhere; } .accessibility-panel__email:hover { text-decoration: underline; } .accessibility-panel__deco { flex-shrink: 0; align-self: center; } .accessibility-panel__deco--heart { width: clamp(56px, 5.5vw, 72px); height: auto; object-fit: contain; opacity: 0.92; } .accessibility-panel__link { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.25rem; font-family: var(--font-body); font-weight: 600; font-size: clamp(0.82rem, 0.9vw, 0.92rem); line-height: 1.35; color: var(--color-pink); text-decoration: underline; text-underline-offset: 0.12em; flex-shrink: 0; align-self: center; min-width: min(100%, 11rem); } .accessibility-panel__link:hover { opacity: 0.85; } .accessibility-panel__link-arrow { color: var(--color-pink); font-size: 1.1em; text-decoration: none; } @media (max-width: 1200px) { .accessibility-provide-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1023px) { .accessibility-hero__inner { grid-template-columns: 1fr; } .accessibility-hero__media { order: 2; } .accessibility-commitment__inner { grid-template-columns: auto minmax(0, 1fr); } .accessibility-commitment__deco { grid-column: 1 / -1; flex-direction: row; align-items: center; justify-content: flex-end; } .accessibility-provide-grid { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; scroll-padding-inline: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0; padding-bottom: 0.35rem; margin-inline: 0; padding-inline: 2px; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; } .accessibility-provide-grid::-webkit-scrollbar { display: none; } .accessibility-provide-card { flex: 0 0 100%; width: 100%; min-width: 0; max-width: 100%; scroll-snap-align: start; scroll-snap-stop: always; box-sizing: border-box; overflow: visible; box-shadow: none; } .accessibility-provide-card__title, .accessibility-provide-card__text { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } } @media (max-width: 900px) { .accessibility-panel { grid-template-columns: auto minmax(0, 1fr); } .accessibility-panel__deco, .accessibility-panel__link, .accessibility-panel__aside { grid-column: 1 / -1; justify-self: flex-end; max-width: 100%; } .accessibility-panel__aside { align-items: flex-end; text-align: right; } } @media (max-width: 768px) { .accessibility-commitment__inner { grid-template-columns: 1fr; text-align: center; } .accessibility-commitment__icon { margin-inline: auto; } .accessibility-commitment__deco { justify-content: center; flex-direction: column; align-items: center; } .accessibility-provide-card { flex: 0 0 100%; width: 100%; min-width: 0; max-width: 100%; } .accessibility-panel { grid-template-columns: 1fr; text-align: left; } .accessibility-panel__icon { margin-bottom: 0.15rem; } .accessibility-panel__copy { padding-right: 0; } .accessibility-panel__deco, .accessibility-panel__link, .accessibility-panel__aside { justify-self: auto; align-items: flex-start; text-align: left; min-width: 0; } .accessibility-panel__aside-row { align-items: flex-start; } } /* ??? Financial Transparency page ??? */ .financial-transparency-page { overflow-x: hidden; } .financial-transparency-page #main-content { overflow-x: hidden; } .financial-hero { background-color: #fff; min-height: 0; overflow: visible; } .financial-hero.page-hero { min-height: 0; } .financial-hero__inner { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); align-items: center; gap: var(--home-hero-col-gap); min-height: 0; min-width: 0; max-width: 100%; } .financial-hero__content { width: 100%; max-width: none; min-width: 0; } .financial-hero__title { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 clamp(0.65rem, 1vw, 0.85rem); font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--color-navy); } .financial-hero__heart { width: clamp(22px, 2vw, 28px); height: auto; max-width: clamp(22px, 2vw, 28px); object-fit: contain; } .financial-hero__text { max-width: 28rem; margin: 0; font-family: var(--font-body); font-size: clamp(0.92rem, 1vw, 1.02rem); line-height: 1.55; color: var(--color-navy); overflow-wrap: break-word; } .financial-hero__media { background-color: #fff; min-width: 0; } .financial-hero__banner { width: 100%; height: auto; max-height: none; min-height: unset; object-fit: contain; filter: brightness(1.04) contrast(1.05) saturate(1.03); mix-blend-mode: multiply; } .financial-commitment { padding-top: 0; } .financial-commitment__card { background-color: var(--believe-card-pink); border-radius: var(--home-pillar-radius); padding: clamp(1rem, 1.65vw, 1.45rem); min-width: 0; max-width: 100%; } .financial-commitment__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 0.42fr); align-items: center; gap: clamp(0.85rem, 1.55vw, 1.35rem); min-width: 0; } .financial-commitment__icon { width: clamp(52px, 5.5vw, 72px); height: auto; object-fit: contain; flex-shrink: 0; } .financial-commitment__copy { min-width: 0; } .financial-commitment__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.15rem, 1.55vw, 1.45rem); line-height: 1.25; color: var(--color-navy); margin: 0 0 clamp(0.45rem, 0.75vw, 0.6rem); } .financial-commitment__text { font-family: var(--font-body); font-size: clamp(0.84rem, 0.92vw, 0.94rem); line-height: 1.55; color: var(--color-navy); margin: 0; overflow-wrap: break-word; } .financial-commitment__deco { width: min(100%, 240px); height: auto; object-fit: contain; justify-self: end; } .financial-support { background-color: #fff; } .financial-support__inner { min-width: 0; max-width: 100%; } .financial-support__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.35rem, 2.2vw, 1.85rem); line-height: 1.2; color: var(--color-navy); text-align: center; margin: 0 0 clamp(1rem, 1.65vw, 1.35rem); } .financial-support-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: clamp(0.65rem, 1.1vw, 0.95rem); min-width: 0; max-width: 100%; } .financial-support-card { display: flex; flex-direction: column; align-items: center; text-align: center; gap: clamp(0.45rem, 0.75vw, 0.6rem); padding: clamp(0.85rem, 1.25vw, 1.1rem) clamp(0.55rem, 0.9vw, 0.75rem); border-radius: var(--experience-photo-radius); border: 1px solid rgba(0, 27, 102, 0.1); background-color: #fff; min-width: 0; } .financial-support-card__icon { width: clamp(44px, 4.5vw, 56px); height: auto; object-fit: contain; } .financial-support-card__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(0.76rem, 0.86vw, 0.9rem); line-height: 1.3; color: var(--color-navy); margin: 0; overflow-wrap: break-word; } .financial-support-card__text { font-family: var(--font-body); font-size: clamp(0.68rem, 0.76vw, 0.78rem); line-height: 1.45; color: var(--color-navy); opacity: 0.88; margin: 0; overflow-wrap: break-word; } .financial-promise { padding-top: 0; } .financial-promise__card { background-color: var(--believe-card-blue); border-radius: var(--home-pillar-radius); padding: clamp(1.15rem, 1.75vw, 1.5rem) clamp(1.25rem, 2vw, 1.75rem); min-width: 0; max-width: 100%; } .financial-promise__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.15rem, 1.55vw, 1.45rem); line-height: 1.25; color: var(--color-navy); text-align: left; margin: 0 0 clamp(0.85rem, 1.35vw, 1.1rem); } .financial-promise-grid { display: flex; align-items: stretch; min-width: 0; max-width: 100%; } .financial-promise-item { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: clamp(0.35rem, 0.6vw, 0.5rem); padding: 0 clamp(0.65rem, 1.1vw, 0.95rem); } .financial-promise-item:not(:first-child) { border-left: 1px solid rgba(0, 27, 102, 0.12); } .financial-promise-item:first-child { padding-left: 0; } .financial-promise-item:last-child { padding-right: 0; } .financial-promise-item__icon { width: clamp(40px, 4vw, 48px); height: auto; object-fit: contain; } .financial-promise-item__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(0.88rem, 0.96vw, 0.98rem); line-height: 1.28; color: var(--color-navy); margin: 0; } .financial-promise-item__text { font-family: var(--font-body); font-size: clamp(0.76rem, 0.84vw, 0.86rem); line-height: 1.48; color: var(--color-navy); margin: 0; overflow-wrap: break-word; } .financial-promise__footer { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.35rem; margin: clamp(1rem, 1.55vw, 1.25rem) 0 0; padding-top: clamp(0.85rem, 1.25vw, 1rem); border-top: 1px solid rgba(0, 27, 102, 0.1); font-family: var(--font-body); font-weight: 500; font-size: clamp(0.82rem, 0.9vw, 0.92rem); line-height: 1.48; color: var(--color-navy); text-align: center; } .financial-promise__footer-heart { width: 20px; height: auto; object-fit: contain; } .financial-questions { padding-top: 0; } .financial-questions__card { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: clamp(0.85rem, 1.5vw, 1.35rem); padding: clamp(1.15rem, 1.75vw, 1.5rem) clamp(1.25rem, 2vw, 1.75rem); border-radius: var(--home-pillar-radius); background-color: var(--believe-card-yellow); min-width: 0; max-width: 100%; } .financial-questions__icon { width: clamp(52px, 5vw, 64px); height: auto; object-fit: contain; flex-shrink: 0; } .financial-questions__copy { min-width: 0; } .financial-questions__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.28; color: var(--color-navy); margin: 0 0 clamp(0.35rem, 0.6vw, 0.45rem); } .financial-questions__text { font-family: var(--font-body); font-size: clamp(0.82rem, 0.9vw, 0.92rem); line-height: 1.52; color: var(--color-navy); margin: 0; overflow-wrap: break-word; } .financial-questions__cta { display: flex; align-items: center; gap: clamp(0.4rem, 0.65vw, 0.55rem); width: auto; max-width: min(100%, 16.5rem); padding: clamp(0.5rem, 0.8vw, 0.62rem) clamp(0.7rem, 1vw, 0.85rem); border: 1px solid rgba(238, 29, 120, 0.42); border-radius: var(--experience-photo-radius); background-color: #fff; text-decoration: none; min-width: 0; flex-shrink: 0; transition: border-color var(--ease-soft), transform var(--ease-soft); } .financial-questions__cta:hover { border-color: var(--color-pink); transform: scale(1.02); } .financial-questions__cta-icon, .financial-questions__cta-arrow { width: clamp(16px, 1.4vw, 18px); height: auto; object-fit: contain; flex-shrink: 0; } .financial-questions__cta-arrow { margin-left: auto; } .financial-questions__cta-copy { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .financial-questions__cta-title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(0.84rem, 0.92vw, 0.94rem); line-height: 1.25; color: var(--color-pink); } .financial-questions__cta-text { font-family: var(--font-body); font-size: clamp(0.66rem, 0.72vw, 0.74rem); line-height: 1.35; color: var(--color-navy); overflow-wrap: break-word; } .financial-questions__deco { width: clamp(64px, 6vw, 88px); height: auto; object-fit: contain; flex-shrink: 0; } @media (max-width: 1200px) { .financial-support-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 1023px) { .financial-hero__inner { grid-template-columns: 1fr; } .financial-hero__media { order: 2; } .financial-commitment__inner { grid-template-columns: auto minmax(0, 1fr); } .financial-commitment__deco { grid-column: 1 / -1; justify-self: center; } .financial-support-grid { display: flex; flex-wrap: nowrap; overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; scroll-padding-inline: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 0; padding-bottom: 0.35rem; margin-inline: 0; padding-inline: 2px; width: 100%; min-width: 0; max-width: 100%; box-sizing: border-box; } .financial-support-grid::-webkit-scrollbar { display: none; } .financial-support-card { flex: 0 0 100%; width: 100%; min-width: 0; max-width: 100%; scroll-snap-align: start; scroll-snap-stop: always; box-sizing: border-box; overflow: visible; box-shadow: none; } .financial-support-card__title, .financial-support-card__text { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .financial-promise-grid { flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain; overscroll-behavior-y: auto; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 0.35rem; margin-inline: 0; padding-inline: 0; } .financial-promise-grid::-webkit-scrollbar { display: none; } .financial-promise-item { flex: 0 0 calc((100% - 16px) / 3); width: calc((100% - 16px) / 3); max-width: calc((100% - 16px) / 3); scroll-snap-align: start; box-sizing: border-box; overflow: hidden; border-left: none; padding: 0 clamp(0.65rem, 2vw, 0.85rem); } .financial-promise-item__title, .financial-promise-item__text { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .financial-promise-item + .financial-promise-item { border-left: 1px solid rgba(0, 27, 102, 0.12); } } @media (max-width: 900px) { .financial-questions__card { grid-template-columns: auto minmax(0, 1fr); } .financial-questions__cta, .financial-questions__deco { grid-column: 1 / -1; } .financial-questions__cta { justify-self: stretch; width: 100%; max-width: none; } .financial-questions__cta-copy { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 0; row-gap: 0; } .financial-questions__cta-title { color: var(--color-navy); } .financial-questions__cta-title::after { content: " \2014 "; font-weight: 400; } .financial-questions__cta-text { display: inline; font-size: clamp(0.82rem, 0.9vw, 0.92rem); line-height: 1.45; } .financial-questions__deco { justify-self: flex-end; } } @media (max-width: 768px) { .financial-hero__title { justify-content: center; } .financial-commitment__inner { grid-template-columns: 1fr; text-align: center; } .financial-commitment__icon { margin-inline: auto; } .financial-support-card { flex: 0 0 100%; width: 100%; min-width: 0; max-width: 100%; } .financial-promise-item { flex: 0 0 calc((100% - 16px) / 3); width: calc((100% - 16px) / 3); max-width: calc((100% - 16px) / 3); } .financial-questions__card { grid-template-columns: 1fr; text-align: left; } .financial-questions__icon { margin-bottom: 0.15rem; } .financial-questions__cta { width: 100%; justify-content: center; justify-self: auto; } .financial-questions__deco { justify-self: center; } } /* ??? Privacy Policy page (extends media-policy layout) ??? */ .privacy-hero .privacy-hero__text--second { margin-top: clamp(0.45rem, 0.75vw, 0.65rem); } @media (max-width: 768px) { .privacy-hero .media-policy-hero__title { justify-content: center; } } /* ??? Terms of Use page ??? */ .terms-page { overflow-x: hidden; } .terms-hero { background-color: #fff; min-height: 0; overflow: visible; } .terms-hero.page-hero { min-height: 0; } .terms-hero__inner { display: grid; grid-template-columns: minmax(0, 0.88fr) minmax(0, 1.12fr); align-items: center; gap: var(--home-hero-col-gap); min-height: 0; min-width: 0; max-width: 100%; } .terms-hero__content { width: 100%; max-width: none; min-width: 0; } .terms-hero__title { display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.45rem; margin: 0 0 clamp(0.65rem, 1vw, 0.85rem); font-family: var(--font-heading); font-weight: 700; font-size: clamp(2rem, 3.6vw, 3rem); line-height: 1.1; letter-spacing: -0.02em; color: var(--color-navy); } .terms-hero__heart { width: clamp(22px, 2vw, 28px); height: auto; max-width: clamp(22px, 2vw, 28px); object-fit: contain; } .terms-hero__text { max-width: 28rem; margin: 0 0 clamp(0.55rem, 0.9vw, 0.75rem); font-family: var(--font-body); font-size: clamp(0.92rem, 1vw, 1.02rem); line-height: 1.55; color: var(--color-navy); overflow-wrap: break-word; } .terms-hero__updated { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0; font-family: var(--font-body); font-size: clamp(0.82rem, 0.9vw, 0.92rem); line-height: 1.4; color: var(--color-pink); font-weight: 600; } .terms-hero__updated-icon { width: clamp(20px, 1.8vw, 22px); height: auto; object-fit: contain; flex-shrink: 0; } .terms-hero__media { background-color: #fff; min-width: 0; } .terms-hero__banner { width: 100%; height: auto; max-height: none; min-height: unset; object-fit: contain; filter: brightness(1.04) contrast(1.05) saturate(1.03); mix-blend-mode: multiply; } .terms-commitment { padding-top: 0; } .terms-commitment__card { background-color: var(--believe-card-pink); border-radius: var(--home-pillar-radius); padding: clamp(1rem, 1.65vw, 1.45rem); min-width: 0; max-width: 100%; } .terms-commitment__inner { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(0, 0.42fr); align-items: center; gap: clamp(0.85rem, 1.55vw, 1.35rem); min-width: 0; } .terms-commitment__icon { width: clamp(52px, 5.5vw, 72px); height: auto; object-fit: contain; flex-shrink: 0; } .terms-commitment__copy { min-width: 0; } .terms-commitment__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.15rem, 1.55vw, 1.45rem); line-height: 1.25; color: var(--color-navy); margin: 0 0 clamp(0.45rem, 0.75vw, 0.6rem); } .terms-commitment__text { font-family: var(--font-body); font-size: clamp(0.84rem, 0.92vw, 0.94rem); line-height: 1.55; color: var(--color-navy); margin: 0; overflow-wrap: break-word; } .terms-commitment__deco { width: min(100%, 240px); height: auto; object-fit: contain; justify-self: end; } .terms-sections { padding-top: 0; } .terms-sections-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(0.75rem, 1.25vw, 1rem); min-width: 0; max-width: 100%; } .terms-section-card { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: clamp(0.55rem, 0.9vw, 0.75rem); padding: clamp(0.95rem, 1.45vw, 1.2rem); border-radius: var(--experience-photo-radius); border: 1px solid rgba(0, 27, 102, 0.1); background-color: #fff; min-width: 0; } .terms-section-card__icon { width: clamp(40px, 4vw, 48px); height: auto; object-fit: contain; flex-shrink: 0; grid-row: 1 / span 2; } .terms-section-card__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(0.95rem, 1.05vw, 1.08rem); line-height: 1.28; color: var(--color-navy); margin: 0 0 clamp(0.3rem, 0.5vw, 0.4rem); grid-column: 2; grid-row: 1; } .terms-section-card__text { grid-column: 2; grid-row: 2; font-family: var(--font-body); font-size: clamp(0.78rem, 0.86vw, 0.88rem); line-height: 1.52; color: var(--color-navy); margin: 0; overflow-wrap: break-word; } .terms-section-card__link { color: var(--color-pink); font-weight: 600; text-decoration: none; } .terms-section-card__link:hover { text-decoration: underline; } .terms-bottom { padding-top: 0; } .terms-bottom-banner { display: grid; grid-template-columns: minmax(0, 1fr) auto auto; align-items: center; gap: clamp(1rem, 2vw, 1.65rem); padding: clamp(1.15rem, 1.75vw, 1.5rem) clamp(1.35rem, 2.2vw, 1.85rem); border-radius: var(--home-pillar-radius); background-color: var(--believe-card-yellow); min-width: 0; max-width: 100%; } .terms-bottom-banner__questions { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: clamp(0.75rem, 1.25vw, 1rem); min-width: 0; } .terms-bottom-banner__questions-icon { width: clamp(48px, 4.5vw, 56px); height: auto; object-fit: contain; flex-shrink: 0; } .terms-bottom-banner__title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(1.05rem, 1.3vw, 1.25rem); line-height: 1.28; color: var(--color-navy); margin: 0 0 clamp(0.2rem, 0.4vw, 0.3rem); } .terms-bottom-banner__text { font-family: var(--font-body); font-size: clamp(0.82rem, 0.9vw, 0.92rem); line-height: 1.52; color: var(--color-navy); margin: 0; overflow-wrap: break-word; } .terms-bottom-banner__cta { display: flex; align-items: center; gap: clamp(0.4rem, 0.65vw, 0.55rem); width: auto; max-width: min(100%, 16.5rem); padding: clamp(0.5rem, 0.8vw, 0.62rem) clamp(0.7rem, 1vw, 0.85rem); border: 1px solid rgba(238, 29, 120, 0.42); border-radius: var(--experience-photo-radius); background-color: #fff; text-decoration: none; min-width: 0; flex-shrink: 0; transition: border-color var(--ease-soft), transform var(--ease-soft); } .terms-bottom-banner__cta:hover { border-color: var(--color-pink); transform: scale(1.02); } .terms-bottom-banner__cta-icon { width: clamp(16px, 1.4vw, 18px); height: auto; object-fit: contain; flex-shrink: 0; } .terms-bottom-banner__cta-copy { display: flex; flex-direction: column; gap: 0.1rem; min-width: 0; } .terms-bottom-banner__cta-title { font-family: var(--font-heading); font-weight: 700; font-size: clamp(0.84rem, 0.92vw, 0.94rem); line-height: 1.25; color: var(--color-pink); } .terms-bottom-banner__cta-text { font-family: var(--font-body); font-size: clamp(0.66rem, 0.72vw, 0.74rem); line-height: 1.35; color: var(--color-navy); overflow-wrap: break-word; } .terms-bottom-banner__cta-arrow { color: var(--color-pink); font-size: 1em; flex-shrink: 0; margin-left: auto; } .terms-bottom-banner__deco { width: clamp(72px, 6.5vw, 88px); height: auto; object-fit: contain; flex-shrink: 0; align-self: center; } @media (max-width: 1023px) { .terms-hero__inner { grid-template-columns: 1fr; } .terms-hero__media { order: 2; } .terms-commitment__inner { grid-template-columns: auto minmax(0, 1fr); } .terms-commitment__deco { grid-column: 1 / -1; justify-self: center; } } @media (max-width: 900px) { .terms-bottom-banner { grid-template-columns: 1fr auto; gap: clamp(0.75rem, 2vw, 1rem); padding: 0; background-color: transparent; } .terms-bottom-banner__questions { grid-column: 1 / -1; background-color: var(--believe-card-yellow); border-radius: var(--home-pillar-radius); padding: clamp(1rem, 3vw, 1.25rem) clamp(1rem, 3.5vw, 1.35rem); } .terms-bottom-banner__cta { grid-column: 1; width: 100%; max-width: none; border-radius: 999px; } .terms-bottom-banner__cta-copy { flex-direction: row; flex-wrap: wrap; align-items: baseline; column-gap: 0; row-gap: 0; } .terms-bottom-banner__cta-title { color: var(--color-navy); } .terms-bottom-banner__cta-title::after { content: " \2014 "; font-weight: 400; } .terms-bottom-banner__cta-text { display: inline; font-size: clamp(0.82rem, 0.9vw, 0.92rem); line-height: 1.45; } .terms-bottom-banner__deco { grid-column: 2; align-self: center; justify-self: flex-end; } } @media (max-width: 768px) { .terms-hero__title { justify-content: center; } .terms-commitment__inner { grid-template-columns: 1fr; text-align: center; } .terms-commitment__icon { margin-inline: auto; } .terms-sections-grid { grid-template-columns: 1fr; } .terms-section-card, .terms-section-card__title, .terms-section-card__text, .media-policy-content, .privacy-hero__text--second { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } } /* ??? Global theme form submission (bdc-forms) ??? */ .bdc-form-honeypot { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; opacity: 0; pointer-events: none; } .bdc-form-error { margin: 0.35rem 0 0; font-family: var(--font-body); font-size: clamp(0.78rem, 0.86vw, 0.88rem); line-height: 1.4; color: #c62828; } .bdc-form-error--global { margin: 0 0 1rem; padding: 0.75rem 0.9rem; border-radius: 10px; background: #fff5f5; border: 1px solid rgba(198, 40, 40, 0.18); } .contact-field.is-invalid .contact-field__box, .apply-select.is-invalid .apply-select__trigger, .media-consent-option.is-invalid .media-consent-option__inner { border-color: #c62828; box-shadow: 0 0 0 1px rgba(198, 40, 40, 0.12); } .bdc-form-success-wrap, .bdc-form-success { width: 100%; } .apply-form__main .bdc-form-success, .contact-form__main .bdc-form-success, .newsletter-form-wrap .bdc-form-success, .media-policy-content .bdc-form-success { margin-top: clamp(0.5rem, 1vw, 0.85rem); } /* Mobile header: tagline row, then logo + hamburger. Social icons stay on tablet/desktop. */ @media (max-width: 767px) { :root { --announce-pad-y: 6px; --header-pad-y: 8px; --hero-pad-y: 14px; --about-hero-pad-top: 14px; --contact-hero-pad-top: 14px; --get-involved-hero-title-size: 26px; --contact-hero-title-size: 26px; --for-parents-hero-title-size: 26px; } .announce-bar__social { display: none; } .announce-bar__inner { display: flex; justify-content: center; align-items: center; gap: 0; min-height: 0; padding: 6px 16px; } .announce-bar__text { grid-column: auto; width: 100%; justify-content: center; text-align: center; font-size: 11px; line-height: 1.35; } .announce-bar__heart svg { width: 12px; height: 12px; } .site-header__inner { display: flex; justify-content: space-between; align-items: center; gap: 0; min-height: 0; padding: 8px 16px; } .site-header__logo { flex: 0 0 auto; margin-right: auto; background: transparent; max-width: calc(100% - 52px); } .site-header__logo img { --header-logo-height: 72px; width: auto !important; height: auto !important; max-height: 72px !important; max-width: min(220px, calc(100vw - 96px)) !important; object-fit: contain !important; background: transparent; } .site-header__inner { min-height: calc(72px + var(--header-pad-y) * 2); } .menu-toggle { flex: 0 0 auto; margin-left: 0; } .site-header { margin-bottom: 0; } #main-content { margin-top: 0; padding-top: 0; } #main-content > section.page-hero, #main-content > section.about-hero, #main-content > section.home-hero, #main-content > section.for-parents-hero, #main-content > section.get-involved-hero, #main-content > section.vision-hero, #main-content > section.explore-hero, #main-content > section.creative-makers-hero, #main-content > section.young-ideas-lab-hero, #main-content > section.create-for-cause-hero, #main-content > section.community-adventures-hero, #main-content > section.faq-hero, .page-hero { margin-top: 0; min-height: 0; } } /* Shared compact mobile hero: label → headline → copy → CTAs → image */ @media (max-width: 767px) { #main-content > section.page-hero, .page-hero { text-align: center; padding: 16px 20px 24px; display: flex; flex-direction: column; align-items: center; gap: 10px; min-height: 0; margin-top: 0; } #main-content > section.home-hero.page-hero, #main-content > section.about-hero.page-hero, #main-content > section.explore-hero.page-hero, #main-content > section.creative-makers-hero.page-hero, #main-content > section.young-ideas-lab-hero.page-hero, #main-content > section.create-for-cause-hero.page-hero, #main-content > section.community-adventures-hero.page-hero, #main-content > section.for-parents-hero.page-hero, #main-content > section.vision-hero.page-hero, #main-content > section.get-involved-hero.page-hero, #main-content > section.partners-hero.page-hero, #main-content > section.contact-hero.page-hero, #main-content > section.accessibility-hero.page-hero, #main-content > section.financial-hero.page-hero, #main-content > section.faq-hero.page-hero, #main-content > section.apply-hero.page-hero, #main-content > section.terms-hero.page-hero, #main-content > section.media-policy-hero.page-hero { padding-bottom: 2.25rem; } .page-hero > .site-container, .page-hero .creative-makers-hero__wrap.site-container { padding-left: 0; padding-right: 0; width: 100%; max-width: 100%; } .page-hero .page-hero__inner, .page-hero .creative-makers-hero__inner, .page-hero .creative-makers-hero__wrap, .page-hero .media-policy-hero__inner, .page-hero .accessibility-hero__inner, .page-hero .financial-hero__inner, .page-hero .terms-hero__inner { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 10px; width: 100%; max-width: 100%; min-height: 0; grid-template-columns: none; row-gap: 10px; } .page-hero .page-hero__content, .page-hero.home-hero .page-hero__content, .page-hero .apply-hero__content, .page-hero .creative-makers-hero__content, .page-hero .vision-hero__content, .page-hero .media-policy-hero__content, .page-hero .accessibility-hero__content, .page-hero .financial-hero__content, .page-hero .terms-hero__content, .page-hero .faq-hero__content { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; max-width: 100%; padding: 0; text-align: center; } .page-hero .hero-label, .page-hero [class*='__eyebrow'] { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; margin: 0; font-size: 12px; font-weight: 600; letter-spacing: 0.5px; line-height: 1.3; text-transform: uppercase; text-align: center; } .page-hero:not(.home-hero) .hero-headline, .page-hero:not(.home-hero) h1, .page-hero:not(.home-hero) [class*='__title'] { font-size: 26px; line-height: 1.25; margin: 0; text-align: center; } .page-hero:not(.home-hero) [class*='__title-line'], .page-hero:not(.home-hero) [class*='__title-row'] { font-size: inherit; line-height: inherit; justify-content: center; text-align: center; white-space: normal; } .page-hero .hero-copy, .page-hero .page-hero__text, .page-hero [class*='__text'], .page-hero [class*='__copy'], .page-hero [class*='__lead'], .page-hero [class*='__tagline'], .page-hero [class*='__subhead'], .page-hero [class*='__note'] { font-size: 14px; line-height: 1.5; max-width: 320px; margin: 0; text-align: center; } .page-hero .hero-ctas, .page-hero .page-hero__actions, .page-hero [class*='__actions'] { display: flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 8px; width: 100%; max-width: 280px; margin: 4px 0 0; } .page-hero .page-hero__content, .page-hero.home-hero .page-hero__content, .page-hero .apply-hero__content, .page-hero .creative-makers-hero__content, .page-hero .vision-hero__content, .page-hero .media-policy-hero__content, .page-hero .accessibility-hero__content, .page-hero .financial-hero__content, .page-hero .terms-hero__content, .page-hero .faq-hero__content { order: 1 !important; } .page-hero .hero-ctas .btn, .page-hero .page-hero__actions .btn, .page-hero [class*='__actions'] .btn { width: 100%; justify-content: center; } .page-hero .hero-image-wrap, .page-hero [class*='__media'], .page-hero .home-hero__media { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: 100% !important; margin-top: 12px; margin-inline: 0 !important; padding-inline: 0 !important; grid-row: auto; order: 2 !important; overflow: visible !important; } .page-hero .hero-image-wrap .lazy-img-wrap, .page-hero [class*='__media'] .lazy-img-wrap { width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; padding-inline: 0 !important; display: flex !important; justify-content: center !important; align-items: center !important; } .page-hero .hero-image-wrap img, .page-hero [class*='__media'] img:not(.home-hero__deco-icon):not(.about-hero__deco-icon), .page-hero [class*='__banner'], .page-hero .home-hero__banner, .page-hero .about-hero__banner, .page-hero .explore-hero__banner, .page-hero .creative-makers-hero__banner, .page-hero .apply-hero__banner, .page-hero .faq-hero__banner, .page-hero .media-policy-hero__banner, .page-hero .accessibility-hero__banner, .page-hero .financial-hero__banner, .page-hero .terms-hero__banner, .page-hero.contact-hero .about-hero__banner, .page-hero.for-parents-hero .about-hero__banner, .page-hero.get-involved-hero .about-hero__banner, .page-hero.vision-hero .about-hero__banner, .page-hero.partners-hero .about-hero__banner { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: min(820px, 80vh) !important; min-height: 0 !important; margin-inline: 0 !important; padding-inline: 0 !important; object-fit: contain !important; object-position: center center !important; transform: none !important; border-radius: 0; } .page-hero.media-policy-hero .media-policy-hero__media, .page-hero.privacy-hero .media-policy-hero__media { order: 2 !important; } .page-hero .explore-hero__deco, .page-hero .for-parents-hero__star, .page-hero .contact-hero__heart { display: none; } .page-hero .explore-hero__heading-block, .page-hero .vision-hero__title-wrap, .page-hero .for-parents-hero__title-wrap, .page-hero .contact-hero__body, .page-hero .apply-hero__title { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; } .page-hero .creative-makers-breadcrumbs, .page-hero .creative-makers-breadcrumbs__list, .page-hero .media-policy-breadcrumbs { justify-content: center; text-align: center; margin: 0; } .page-hero .vision-hero__list { margin: 0 !important; margin-inline: 0 !important; max-width: none !important; width: 100% !important; align-self: stretch !important; text-align: left !important; } .faq-hero .page-hero__inner { padding: 16px 16px 20px; } .page-hero.home-hero .page-hero__actions .btn { white-space: normal; font-size: clamp(0.68rem, 2.55vw, 0.875rem); padding: 0.78rem clamp(0.65rem, 2.4vw, 1rem); } .page-hero.about-hero .hero-image-wrap, .page-hero.about-hero .about-hero__media, .page-hero.home-hero .hero-image-wrap, .page-hero.home-hero .about-hero__media, .page-hero.about-hero .lazy-img-wrap, .page-hero.home-hero .lazy-img-wrap, .page-hero.about-hero picture, .page-hero.home-hero picture, .page-hero.about-hero .about-hero__banner, .page-hero.home-hero .about-hero__banner { background: transparent !important; background-color: transparent !important; background-image: none !important; border: none !important; box-shadow: none !important; } .page-hero.about-hero .lazy-img-wrap, .page-hero.home-hero .lazy-img-wrap { overflow: visible !important; } /* About + Home hero — mobile content spacing (reference layout) */ .page-hero.about-hero .page-hero__content, .page-hero.home-hero .page-hero__content { gap: 0; padding: 0 20px; max-width: 100%; } .page-hero.about-hero .hero-label { display: inline-block; margin: 0 0 14px; font-family: var(--font-body); font-size: 11px; font-weight: 700; letter-spacing: 0.14em; line-height: 1.3; text-transform: uppercase; text-align: center; color: var(--color-pink); } .page-hero.about-hero .hero-label::before { content: '^ '; } .page-hero.about-hero .hero-label::after { content: ''; display: block; width: 124px; height: 12px; margin: 6px auto 0; background: url('../images/nav-underline.png') no-repeat center / 100% 3px; } .page-hero.about-hero .hero-headline { font-family: var(--font-heading); font-size: 28px; font-weight: 700; line-height: 1.2; letter-spacing: -0.02em; margin: 0 0 14px; color: var(--color-navy); text-align: center; max-width: 340px; } .page-hero.about-hero .hero-headline .about-hero__title-line--navy { display: block; color: var(--color-navy); margin: 0 0 4px; white-space: normal; } .page-hero.about-hero .hero-headline .about-hero__title-line--pink { display: block; color: var(--color-pink); white-space: normal; } .page-hero.about-hero .hero-headline .heading-underline { position: relative; display: inline; z-index: 0; } .page-hero.about-hero .hero-headline .heading-underline__img { left: -4%; bottom: -0.14em; width: 108%; height: 0.34em; max-height: 12px; min-height: 8px; } .page-hero.about-hero .hero-copy { font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--color-navy); max-width: 300px; margin: 0 auto 16px; text-align: center; } .page-hero.home-hero .home-hero__brand { display: flex; justify-content: flex-start; width: 100%; margin: 0 0 14px; } .home-page .page-hero.home-welcome-hero .home-hero__brand { margin: 0 !important; } .home-page .page-hero.home-welcome-hero .hero-copy { margin-top: calc(-1 * var(--page-hero-mobile-stack-gap, 1rem)) !important; margin-bottom: 0 !important; } .page-hero.home-hero .home-hero__logo { width: min(100%, 320px); height: auto; object-fit: contain; object-position: left center; filter: none; } .page-hero.home-hero .hero-copy { font-family: var(--font-body); font-size: 14px; font-weight: 400; line-height: 1.55; color: var(--color-navy); max-width: 100%; margin: 0 0 16px; text-align: left; } .page-hero.explore-hero .page-hero__inner { gap: 0; row-gap: 0; } .page-hero.explore-hero .page-hero__content { padding-bottom: 0; margin-bottom: 0; } .page-hero.explore-hero .page-hero__actions { margin-bottom: 0; } .page-hero.explore-hero .explore-hero__media, .page-hero.explore-hero .hero-image-wrap { margin-top: 0 !important; } /* Explore hero ? mobile heading: 2 lines (navy block + pink line) */ .page-hero.explore-hero .hero-headline { font-size: clamp(22px, 6.2vw, 26px); line-height: 1.2; max-width: min(100%, 340px); } .page-hero.explore-hero .hero-headline .explore-hero__title-line--navy { display: inline; white-space: normal; margin-bottom: 0; } .page-hero.explore-hero .hero-headline .explore-hero__title-line--navy + .explore-hero__title-line--navy::before { content: ' '; } .page-hero.explore-hero .hero-headline .explore-hero__title-line--pink { display: block; margin-top: 0; } .home-hero.page-hero { overflow: visible; } .home-hero .page-hero__inner, .home-hero .page-hero__content, .home-hero .about-hero__media, .home-hero .hero-image-wrap { overflow: visible; } .home-hero__deco, .home-hero .home-hero__deco--heading { display: none !important; } .home-hero__deco-icon { position: absolute; display: block; width: auto !important; height: auto !important; max-width: 40px !important; max-height: 40px !important; object-fit: contain !important; flex: none !important; } .home-hero__deco-icon--heart-heading { top: clamp(0.25rem, 1.5vw, 0.75rem); left: 20px; width: clamp(24px, 7.5vw, 30px) !important; max-width: 30px !important; max-height: 30px !important; background: transparent !important; } .home-hero__deco-icon--plane-heading { top: clamp(5.75rem, 28vw, 7.5rem); left: 20px; width: clamp(28px, 8vw, 36px) !important; max-width: 36px !important; height: auto !important; max-height: 96px !important; background: transparent !important; } .home-hero__deco-icon--leaf-heading { top: clamp(3.5rem, 17vw, 4.75rem); right: 20px; width: clamp(28px, 8vw, 36px) !important; max-width: 36px !important; height: auto !important; max-height: 80px !important; background: transparent !important; } .page-hero.about-hero:has(.about-hero__deco) { overflow: hidden; } .page-hero.about-hero .page-hero__content:has(.about-hero__deco) { position: relative; overflow: hidden; } .page-hero.about-hero .hero-label, .page-hero.about-hero .hero-headline, .page-hero.about-hero .hero-copy, .page-hero.about-hero .hero-ctas, .page-hero.about-hero .page-hero__actions { position: relative; z-index: 2; } .about-hero__deco { display: block; position: absolute; inset: 0; z-index: 1; pointer-events: none; user-select: none; overflow: hidden; } .about-hero__deco-icon { position: absolute; display: block; width: auto !important; height: auto !important; object-fit: contain !important; flex: none !important; } .about-hero__deco-icon--star-label { top: 0; left: 20px; width: clamp(24px, 7.5vw, 32px) !important; max-width: 32px !important; max-height: 32px !important; background: transparent !important; } .about-hero__deco-icon--heart-label { top: 0; right: 20px; width: clamp(24px, 7.5vw, 30px) !important; max-width: 30px !important; max-height: 30px !important; } .about-hero__deco-icon--plane-copy { top: clamp(6.75rem, 34vw, 8.5rem); left: 20px; width: clamp(28px, 8vw, 36px) !important; max-width: 36px !important; height: auto !important; max-height: 96px !important; background: transparent !important; } .about-hero__deco-icon--leaf-copy { top: clamp(6.85rem, 34.5vw, 8.65rem); right: 20px; width: clamp(28px, 8vw, 36px) !important; max-width: 36px !important; height: auto !important; max-height: 80px !important; background: transparent !important; } .about-hero__deco-trail-wrap { position: absolute; right: 2%; bottom: clamp(0.35rem, 2vw, 0.65rem); width: 20px; height: 20px; overflow: hidden; pointer-events: none; } .about-hero__deco-icon--trail-dot { position: absolute; top: 50%; left: 0; width: 72px !important; max-width: 72px !important; height: auto !important; max-height: 30px !important; transform: translateY(-50%); object-fit: contain !important; object-position: left center; } .vision-hero-checklist { padding: 0 20px 16px; } .vision-hero-checklist .vision-hero__list { margin: 0 !important; margin-inline: 0 !important; max-width: none !important; width: 100% !important; text-align: left !important; } } /* Mobile hero images (incl. 768px): full-width banners, no side inset ? desktop unchanged */ @media (max-width: 768px) { #main-content > section.page-hero, .page-hero { padding-left: 0 !important; padding-right: 0 !important; } .page-hero .page-hero__content, .page-hero .apply-hero__content, .page-hero .creative-makers-hero__content, .page-hero .media-policy-hero__content, .page-hero .accessibility-hero__content, .page-hero .financial-hero__content, .page-hero .terms-hero__content, .page-hero .faq-hero__content { padding-left: 16px; padding-right: 16px; box-sizing: border-box; } .page-hero .hero-image-wrap, .page-hero [class*='__media'], .page-hero .home-hero__media, .page-hero .hero-image-wrap .lazy-img-wrap, .page-hero [class*='__media'] .lazy-img-wrap, .page-hero .home-hero__media .lazy-img-wrap, .page-hero .hero-image-wrap picture, .page-hero [class*='__media'] picture { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; padding-inline: 0 !important; overflow: visible !important; } .page-hero .hero-image-wrap img, .page-hero [class*='__media'] img:not(.home-hero__deco-icon):not(.about-hero__deco-icon), .page-hero [class*='__banner'], .page-hero .home-hero__banner, .page-hero .about-hero__banner, .page-hero .explore-hero__banner, .page-hero .creative-makers-hero__banner, .page-hero .apply-hero__banner, .page-hero .faq-hero__banner, .page-hero .media-policy-hero__banner, .page-hero .accessibility-hero__banner, .page-hero .financial-hero__banner, .page-hero .terms-hero__banner, .page-hero.contact-hero .about-hero__banner, .page-hero.for-parents-hero .about-hero__banner, .page-hero.get-involved-hero .about-hero__banner, .page-hero.vision-hero .about-hero__banner, .page-hero.partners-hero .about-hero__banner { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: min(820px, 80vh) !important; min-height: 0 !important; margin-inline: 0 !important; padding-inline: 0 !important; object-fit: contain !important; object-position: center center !important; transform: none !important; } .page-hero.vision-hero:not(.partners-hero) .about-hero__banner, .page-hero.vision-hero:not(.partners-hero) picture img.about-hero__banner { object-position: center center !important; transform-origin: center center !important; } .site-header__logo img { --header-logo-height: 72px; width: auto !important; height: auto !important; max-height: 72px !important; max-width: min(220px, calc(100vw - 96px)) !important; object-fit: contain; background: transparent; } } /* All page heroes — phone layout (≤430px): full-width banners, image contain. */ @media (max-width: 430px) { #main-content > section.page-hero, .page-hero { gap: 8px; padding-top: 12px; padding-bottom: 20px !important; padding-left: 0; padding-right: 0; overflow-x: clip; } #main-content > section.page-hero .page-hero__inner, .page-hero .page-hero__inner { gap: 0; row-gap: 0; width: 100%; max-width: 100%; } #main-content > section.page-hero .page-hero__content, .page-hero .page-hero__content { gap: 8px; width: 100%; max-width: 100%; padding: 0 16px; padding-bottom: 0; box-sizing: border-box; text-align: center; } #main-content > section.about-hero.page-hero .page-hero__content { gap: 0; padding: 0 18px; } #main-content > section.home-hero.page-hero .page-hero__content, .page-hero.home-hero .page-hero__content { gap: 0; padding: 0 var(--container-padding); } #main-content > section.about-hero.page-hero .hero-label { margin-bottom: 14px; } #main-content > section.about-hero.page-hero .hero-headline { font-size: 28px; line-height: 1.2; margin-bottom: 14px; max-width: 340px; } #main-content > section.about-hero.page-hero .hero-copy { font-size: 14px; line-height: 1.55; max-width: 300px; margin-bottom: 16px; } .home-hero__brand picture { display: block !important; } #main-content > section.page-hero .page-hero__text, #main-content > section.page-hero .hero-copy { margin: 0 auto; text-align: center; } #main-content > section.page-hero .hero-headline, #main-content > section.page-hero h1 { text-align: center; margin-left: auto; margin-right: auto; } #main-content > section.page-hero .page-hero__actions, #main-content > section.page-hero .hero-ctas { flex-direction: column; flex-wrap: nowrap; align-items: stretch; justify-content: center; width: 100%; max-width: 280px; margin: 2px auto 0; gap: 8px; } #main-content > section.page-hero .page-hero__actions .btn, #main-content > section.page-hero .hero-ctas .btn { width: 100%; } #main-content > section.page-hero .hero-image-wrap, #main-content > section.page-hero .about-hero__media, #main-content > section.page-hero .home-hero__media, #main-content > section.page-hero [class*='-hero__media'] { width: 100% !important; max-width: 100% !important; margin-top: -10px !important; margin-right: 0 !important; margin-bottom: 0 !important; margin-left: 0 !important; padding-inline: 0 !important; overflow: visible !important; display: flex !important; justify-content: center !important; align-items: center !important; } #main-content > section.page-hero .hero-image-wrap .lazy-img-wrap, #main-content > section.page-hero [class*='__media'] .lazy-img-wrap, #main-content > section.page-hero .home-hero__media .lazy-img-wrap, #main-content > section.page-hero .hero-image-wrap picture, #main-content > section.page-hero [class*='__media'] picture { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-inline: 0 !important; overflow: visible !important; display: flex !important; justify-content: center !important; align-items: center !important; } #main-content > section.page-hero .hero-image-wrap img, #main-content > section.page-hero [class*='__media'] img:not(.home-hero__deco-icon):not(.about-hero__deco-icon), #main-content > section.page-hero .home-hero__banner, #main-content > section.page-hero .about-hero__banner, #main-content > section.page-hero .explore-hero__banner, #main-content > section.page-hero .creative-makers-hero__banner, #main-content > section.page-hero .young-ideas-lab-hero__banner, #main-content > section.page-hero .create-for-cause-hero__banner, #main-content > section.page-hero .community-adventures-hero__banner, #main-content > section.page-hero .for-parents-hero__banner, #main-content > section.page-hero .apply-hero__banner, #main-content > section.page-hero .faq-hero__banner, #main-content > section.page-hero .media-policy-hero__banner, #main-content > section.page-hero .accessibility-hero__banner, #main-content > section.page-hero .financial-hero__banner, #main-content > section.page-hero .terms-hero__banner, #main-content > section.page-hero .contact-hero .about-hero__banner, #main-content > section.page-hero .for-parents-hero .about-hero__banner, #main-content > section.page-hero .get-involved-hero .about-hero__banner, #main-content > section.page-hero .vision-hero .about-hero__banner, #main-content > section.page-hero .partners-hero .about-hero__banner, #main-content > section.page-hero [class*='__banner'] { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; min-height: 0 !important; max-height: 380px !important; margin: 0 auto !important; padding-inline: 0 !important; object-fit: contain !important; object-position: center center !important; border-radius: 0 !important; transform: none !important; } /* Our Vision — disable desktop scale transform that clips mural text on mobile */ #main-content > section.page-hero.vision-hero .about-hero__banner, #main-content > section.vision-hero.page-hero .about-hero__banner { transform: none !important; transform-origin: center center !important; } #main-content > section.explore-hero.page-hero .page-hero__inner { gap: 0 !important; row-gap: 0 !important; } #main-content > section.explore-hero.page-hero .page-hero__content { padding-bottom: 0 !important; margin-bottom: 0 !important; } #main-content > section.explore-hero.page-hero .page-hero__actions { margin-bottom: 0 !important; } #main-content > section.explore-hero.page-hero .explore-hero__media, #main-content > section.explore-hero.page-hero .hero-image-wrap { margin-top: 0 !important; } #main-content > section.explore-hero.page-hero .hero-headline { font-size: clamp(21px, 6vw, 26px) !important; line-height: 1.2 !important; max-width: min(100%, 340px); } #main-content > section.explore-hero.page-hero .hero-headline .explore-hero__title-line--navy { display: inline !important; white-space: normal !important; margin-bottom: 0 !important; } #main-content > section.explore-hero.page-hero .hero-headline .explore-hero__title-line--navy + .explore-hero__title-line--navy::before { content: ' '; } #main-content > section.explore-hero.page-hero .hero-headline .explore-hero__title-line--pink { display: block !important; margin-top: 0 !important; } } @media (max-width: 320px) { #main-content > section.page-hero .hero-image-wrap, #main-content > section.page-hero [class*='-hero__media'], #main-content > section.page-hero .home-hero__media { width: 100% !important; max-width: 100% !important; margin-top: -10px !important; margin-inline: 0 !important; padding-inline: 0 !important; } #main-content > section.home-hero.page-hero .home-hero__media { height: auto !important; min-height: 0 !important; } } /* ??? Site-wide mobile carousels: photo = 1 card, icon/text = 2?3 cards ??? */ @media (max-width: 991px) { #main-content { overflow-x: clip; max-width: 100%; } .site-container.bdc-mobile-carousel-host { overflow: visible; max-width: 100%; } .we-believe__row.bdc-mobile-carousel-parent { flex-direction: column; align-items: stretch; width: 100%; max-width: 100%; gap: 0; } .for-parents-expect__wrap.bdc-mobile-carousel-parent { padding-inline: 24px; overflow: visible; } .for-parents-expect__inner.bdc-mobile-carousel-parent, .for-parents-expect__inner.site-container.bdc-mobile-carousel-host { padding-inline: 0; overflow: visible; max-width: 100%; } .bdc-mobile-carousel { --bdc-peek-gap: 10px; display: flex; flex-wrap: nowrap; align-items: stretch; justify-content: flex-start; gap: 28px; width: 100%; max-width: 100%; margin-inline: 0; padding: 18px 0 28px; overflow-x: auto; overflow-y: visible; overscroll-behavior-x: contain; touch-action: pan-x pan-y; scroll-snap-type: x mandatory; scroll-snap-stop: always; scroll-padding-inline: 0; -webkit-overflow-scrolling: touch; scrollbar-width: none; box-sizing: border-box; } /* Only photo/peek tracks that are meant to bleed to the screen edge */ .bdc-mobile-carousel--peek:not(.bdc-mobile-carousel--inset):not(.bdc-mobile-carousel--solo) { width: calc(100% + (var(--container-padding) * 2)); max-width: none; margin-inline: calc(-1 * var(--container-padding)); padding: 18px var(--container-padding) 28px; scroll-padding-inline: var(--container-padding); } .bdc-mobile-carousel--peek { gap: var(--bdc-peek-gap); scroll-snap-stop: normal; } .bdc-mobile-carousel--full { gap: 16px; } .bdc-mobile-carousel--inset { width: 100% !important; max-width: 100% !important; margin: 0 !important; margin-left: 0 !important; margin-right: 0 !important; margin-inline: 0 !important; padding: 8px 0 10px; gap: 20px; scroll-padding-inline: 0; } /* Solo = 1 card per view: NEVER bleed / NEVER negative margin */ .bdc-mobile-carousel--solo, .bdc-mobile-carousel.bdc-mobile-carousel--solo, .bdc-mobile-carousel--solo.bdc-mobile-carousel--full, .bdc-mobile-carousel--solo.bdc-mobile-carousel--inset, .bdc-mobile-carousel--solo.bdc-mobile-carousel--peek, .bdc-mobile-carousel--solo.bdc-mobile-carousel--peek-2 { width: 100% !important; max-width: 100% !important; margin: 0 !important; margin-left: 0 !important; margin-right: 0 !important; margin-inline: 0 !important; padding: 2px 2px 12px !important; padding-left: 2px !important; padding-right: 2px !important; padding-inline: 2px !important; gap: 0 !important; scroll-padding: 0 !important; scroll-padding-inline: 0 !important; box-sizing: border-box !important; } .bdc-mobile-carousel--solo > .bdc-mobile-carousel__item, .bdc-mobile-carousel--solo .bdc-mobile-carousel__item { flex: 0 0 100% !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: 100% !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; scroll-snap-align: start !important; scroll-snap-stop: always !important; box-shadow: none !important; -webkit-box-shadow: none !important; } .site-container.bdc-mobile-carousel-host:has(> .bdc-mobile-carousel--solo), .site-container.bdc-mobile-carousel-parent:has(> .bdc-mobile-carousel--solo), .site-container.bdc-mobile-carousel-host:has(.bdc-mobile-carousel--solo), .for-parents-expect__wrap:has(.bdc-mobile-carousel--solo), .for-parents-expect__inner:has(.bdc-mobile-carousel--solo) { padding-left: 24px !important; padding-right: 24px !important; overflow: visible !important; overflow-x: visible !important; max-width: 100% !important; box-sizing: border-box !important; } .for-parents-expect__wrap:has(.bdc-mobile-carousel--solo) .for-parents-expect__inner, .for-parents-expect__inner:has(.bdc-mobile-carousel--solo) { padding-left: 0 !important; padding-right: 0 !important; } .role-icons.bdc-mobile-carousel, .approach-steps.bdc-mobile-carousel, .partners-founding__grid.bdc-mobile-carousel, .financial-support-grid.bdc-mobile-carousel, .accessibility-provide-grid.bdc-mobile-carousel, .get-involved-ways__grid.bdc-mobile-carousel, .for-parents-expect__grid.bdc-mobile-carousel { margin: 0 !important; margin-left: 0 !important; margin-right: 0 !important; margin-inline: 0 !important; width: 100% !important; max-width: 100% !important; left: auto !important; transform: none !important; } .financial-support-grid.bdc-mobile-carousel, .accessibility-provide-grid.bdc-mobile-carousel { padding-inline: 2px !important; scroll-padding-inline: 0 !important; } .panel-card--role, .panel-card--approach { overflow-x: hidden; max-width: 100%; } .role-callout { width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .bdc-mobile-carousel--peek.bdc-mobile-carousel--inset { gap: var(--bdc-peek-gap); } .bdc-mobile-carousel::-webkit-scrollbar { display: none; } .bdc-mobile-carousel__item { flex: 0 0 100%; width: 100%; max-width: 100%; min-width: 0; min-height: 100%; height: auto; scroll-snap-align: start; scroll-snap-stop: always; box-sizing: border-box; overflow: visible; } .bdc-mobile-carousel--inset .bdc-mobile-carousel__item { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } /* Our Vision founding partner icons: always 3 per view on mobile */ .vision-partner__icons.bdc-mobile-carousel--peek .vision-partner__icon-item.bdc-mobile-carousel__item, .vision-partner__icons.bdc-mobile-carousel--peek-2 .vision-partner__icon-item.bdc-mobile-carousel__item, .vision-partner__icons.bdc-mobile-carousel--inset .vision-partner__icon-item.bdc-mobile-carousel__item { flex: 0 0 calc((100% - (var(--bdc-peek-gap) * 2)) / 3) !important; width: calc((100% - (var(--bdc-peek-gap) * 2)) / 3) !important; max-width: calc((100% - (var(--bdc-peek-gap) * 2)) / 3) !important; min-width: 0 !important; } .vision-partner__icons.bdc-mobile-carousel--peek, .vision-partner__icons.bdc-mobile-carousel--peek-2, .vision-partner__icons.bdc-mobile-carousel--inset { gap: var(--bdc-peek-gap) !important; } .bdc-mobile-carousel--full .bdc-mobile-carousel__item { flex: 0 0 100% !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; scroll-snap-align: start; scroll-snap-stop: always; } .bdc-mobile-carousel--peek .bdc-mobile-carousel__item { flex: 0 0 calc((100% - (var(--bdc-peek-gap) * 2)) / 3); width: calc((100% - (var(--bdc-peek-gap) * 2)) / 3); max-width: calc((100% - (var(--bdc-peek-gap) * 2)) / 3); min-height: 0; min-width: 0; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: normal; } .bdc-mobile-carousel--peek .explore-skill.bdc-mobile-carousel__item, .bdc-mobile-carousel--peek .creative-makers-activity.bdc-mobile-carousel__item, .bdc-mobile-carousel--peek .for-parents-info-feature.bdc-mobile-carousel__item, .bdc-mobile-carousel--peek .vision-pillar-card.bdc-mobile-carousel__item, .bdc-mobile-carousel--peek .vision-journey-step.bdc-mobile-carousel__item, .bdc-mobile-carousel--peek .partners-ways-card.bdc-mobile-carousel__item, .bdc-mobile-carousel--peek .accessibility-provide-card.bdc-mobile-carousel__item, .bdc-mobile-carousel--peek .financial-promise-item.bdc-mobile-carousel__item, .bdc-mobile-carousel--peek .newsletter-role-card.bdc-mobile-carousel__item, .bdc-mobile-carousel--peek .media-consent-usage-card.bdc-mobile-carousel__item, .bdc-mobile-carousel--peek .vision-partner__icon-item.bdc-mobile-carousel__item { flex: 0 0 calc((100% - (var(--bdc-peek-gap) * 2)) / 3); width: calc((100% - (var(--bdc-peek-gap) * 2)) / 3); max-width: calc((100% - (var(--bdc-peek-gap) * 2)) / 3); } .bdc-mobile-carousel--peek-2 .bdc-mobile-carousel__item, .bdc-mobile-carousel--peek-2 .explore-skill.bdc-mobile-carousel__item, .bdc-mobile-carousel--peek-2 .creative-makers-activity.bdc-mobile-carousel__item, .bdc-mobile-carousel--peek-2 .vision-pillar-card.bdc-mobile-carousel__item, .bdc-mobile-carousel--peek-2 .vision-journey-step.bdc-mobile-carousel__item, .bdc-mobile-carousel--peek-2 .partners-ways-card.bdc-mobile-carousel__item, .bdc-mobile-carousel--peek-2 .accessibility-provide-card.bdc-mobile-carousel__item, .bdc-mobile-carousel--peek-2 .financial-promise-item.bdc-mobile-carousel__item, .bdc-mobile-carousel--peek-2 .newsletter-role-card.bdc-mobile-carousel__item, .bdc-mobile-carousel--peek-2 .media-consent-usage-card.bdc-mobile-carousel__item, .bdc-mobile-carousel--peek-2 .for-parents-info-feature.bdc-mobile-carousel__item, .bdc-mobile-carousel--peek-2 .vision-partner__icon-item.bdc-mobile-carousel__item { flex: 0 0 calc((100% - var(--bdc-peek-gap)) / 2); width: calc((100% - var(--bdc-peek-gap)) / 2); max-width: calc((100% - var(--bdc-peek-gap)) / 2); } .for-parents-expect__grid.bdc-mobile-carousel { width: 100%; max-width: 100%; margin: 0; padding: 0 0 8px; gap: 12px; box-sizing: border-box; background: transparent; box-shadow: none; overflow-x: auto; overflow-y: hidden; } .for-parents-expect__grid.bdc-mobile-carousel .for-parents-expect-card, .for-parents-expect__grid.bdc-mobile-carousel--full .for-parents-expect-card.bdc-mobile-carousel__item, .for-parents-expect__grid.bdc-mobile-carousel--inset .for-parents-expect-card.bdc-mobile-carousel__item, .for-parents-expect-card.bdc-mobile-carousel__item { flex: 0 0 100%; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; padding: 1.1rem 1rem; overflow: visible; background-color: #fff; border: 1px solid var(--for-parents-expect-card-border); box-shadow: none; filter: none; -webkit-box-shadow: none; } .for-parents-expect__grid.bdc-mobile-carousel .for-parents-expect-card__text { max-width: none; } .bdc-mobile-carousel--peek .explore-skill__title, .bdc-mobile-carousel--peek .explore-skill__text { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .bdc-mobile-carousel--peek .bdc-mobile-carousel__item + .bdc-mobile-carousel__item { border-left: none; } .bdc-mobile-carousel .home-reality-step__arrow, .bdc-mobile-carousel .explore-grow__arrow, .bdc-mobile-carousel .approach-step__arrow, .bdc-mobile-carousel .vision-journey-step__arrow { display: none; } .bdc-mobile-carousel .experience-card, .bdc-mobile-carousel .explore-way-card, .bdc-mobile-carousel .explore-impact-card, .bdc-mobile-carousel .believe-card, .bdc-mobile-carousel .vision-pillar-card, .bdc-mobile-carousel .partners-ways-card, .bdc-mobile-carousel .creative-makers-activity, .bdc-mobile-carousel .accessibility-provide-card { box-shadow: 0 10px 28px rgba(32, 42, 86, 0.12); } .bdc-mobile-carousel--peek .believe-card, .bdc-mobile-carousel--peek .explore-skill, .bdc-mobile-carousel--peek .home-different__item, .bdc-mobile-carousel--peek .home-reality-step, .bdc-mobile-carousel--peek .role-icons__item, .bdc-mobile-carousel--peek .approach-step, .bdc-mobile-carousel--peek .for-parents-expect-card, .bdc-mobile-carousel--peek .vision-pillar-card, .bdc-mobile-carousel--peek .vision-journey-step, .bdc-mobile-carousel--peek .get-involved-ways-card, .bdc-mobile-carousel--peek .partners-ways-card, .bdc-mobile-carousel--peek .partners-founding-card, .bdc-mobile-carousel--peek .accessibility-provide-card, .bdc-mobile-carousel--peek .financial-promise-item, .bdc-mobile-carousel--peek .for-parents-info-feature, .bdc-mobile-carousel--peek .vision-partner__icon-item { box-shadow: none; padding-inline: 0.2rem; } .bdc-mobile-carousel--peek .explore-skill__icon, .bdc-mobile-carousel--peek .approach-step__icon { width: clamp(32px, 9vw, 44px); height: clamp(32px, 9vw, 44px); } /* Home different + reality: 2 cards/view, large readable icons on mobile */ .home-different__grid.bdc-mobile-carousel--peek .home-different__item.bdc-mobile-carousel__item, .home-different__grid.bdc-mobile-carousel--peek-2 .home-different__item.bdc-mobile-carousel__item, .home-reality__steps.bdc-mobile-carousel--peek .home-reality-step.bdc-mobile-carousel__item, .home-reality__steps.bdc-mobile-carousel--peek-2 .home-reality-step.bdc-mobile-carousel__item { flex: 0 0 calc((100% - var(--bdc-peek-gap)) / 2) !important; width: calc((100% - var(--bdc-peek-gap)) / 2) !important; max-width: calc((100% - var(--bdc-peek-gap)) / 2) !important; min-width: 0 !important; padding: 0.85rem 0.45rem !important; gap: 0.75rem !important; box-sizing: border-box !important; } .home-different__grid.bdc-mobile-carousel--peek, .home-different__grid.bdc-mobile-carousel--peek-2, .home-reality__steps.bdc-mobile-carousel--peek, .home-reality__steps.bdc-mobile-carousel--peek-2 { gap: var(--bdc-peek-gap) !important; } .home-different__grid.bdc-mobile-carousel--peek .home-different__icon-wrap, .home-different__grid.bdc-mobile-carousel--peek-2 .home-different__icon-wrap, .home-reality__steps.bdc-mobile-carousel--peek .home-reality-step__icon-wrap, .home-reality__steps.bdc-mobile-carousel--peek-2 .home-reality-step__icon-wrap { width: 110px !important; height: 110px !important; min-width: 100px !important; min-height: 100px !important; flex-shrink: 0 !important; } .home-different__grid.bdc-mobile-carousel--peek .home-different__icon, .home-different__grid.bdc-mobile-carousel--peek-2 .home-different__icon, .home-reality__steps.bdc-mobile-carousel--peek .home-reality-step__icon, .home-reality__steps.bdc-mobile-carousel--peek-2 .home-reality-step__icon { width: 100% !important; height: 100% !important; max-width: 110px !important; max-height: 110px !important; min-width: 0 !important; min-height: 0 !important; } .home-different__grid.bdc-mobile-carousel--peek .home-different__name, .home-different__grid.bdc-mobile-carousel--peek-2 .home-different__name, .home-reality__steps.bdc-mobile-carousel--peek .home-reality-step__title, .home-reality__steps.bdc-mobile-carousel--peek-2 .home-reality-step__title { font-size: clamp(1rem, 3.2vw, 1.15rem) !important; line-height: 1.25 !important; margin-bottom: 0.35rem !important; } .home-different__grid.bdc-mobile-carousel--peek .home-different__text, .home-different__grid.bdc-mobile-carousel--peek-2 .home-different__text, .home-reality__steps.bdc-mobile-carousel--peek .home-reality-step__text, .home-reality__steps.bdc-mobile-carousel--peek-2 .home-reality-step__text { font-size: clamp(0.82rem, 2.6vw, 0.92rem) !important; line-height: 1.45 !important; max-width: 100% !important; } /* We Believe: 2 cards/view, larger icons on mobile */ .we-believe__slider.bdc-mobile-carousel--peek .believe-card.bdc-mobile-carousel__item, .we-believe__slider.bdc-mobile-carousel--peek-2 .believe-card.bdc-mobile-carousel__item { flex: 0 0 calc((100% - var(--bdc-peek-gap)) / 2) !important; width: calc((100% - var(--bdc-peek-gap)) / 2) !important; max-width: calc((100% - var(--bdc-peek-gap)) / 2) !important; min-width: 0 !important; padding: 0.85rem 0.45rem !important; gap: 0.75rem !important; box-sizing: border-box !important; } .we-believe__slider.bdc-mobile-carousel--peek, .we-believe__slider.bdc-mobile-carousel--peek-2 { gap: var(--bdc-peek-gap) !important; } .we-believe__slider.bdc-mobile-carousel--peek .believe-card__icon, .we-believe__slider.bdc-mobile-carousel--peek-2 .believe-card__icon { width: auto !important; height: clamp(64px, 18vw, 80px) !important; flex: 0 0 clamp(64px, 18vw, 80px) !important; max-width: 100% !important; } .we-believe__slider.bdc-mobile-carousel--peek .believe-card__text, .we-believe__slider.bdc-mobile-carousel--peek-2 .believe-card__text { font-size: clamp(0.78rem, 2.8vw, 0.88rem) !important; line-height: 1.3 !important; --believe-text-max-width: 100% !important; max-width: 100% !important; } /* Explore skills: 2 cards/view, larger icons on mobile */ .explore-skills__grid.bdc-mobile-carousel--peek .explore-skill.bdc-mobile-carousel__item, .explore-skills__grid.bdc-mobile-carousel--peek-2 .explore-skill.bdc-mobile-carousel__item { flex: 0 0 calc((100% - var(--bdc-peek-gap)) / 2) !important; width: calc((100% - var(--bdc-peek-gap)) / 2) !important; max-width: calc((100% - var(--bdc-peek-gap)) / 2) !important; min-width: 0 !important; padding: 0.85rem 0.45rem !important; gap: 0.75rem !important; box-sizing: border-box !important; } .explore-skills__grid.bdc-mobile-carousel--peek, .explore-skills__grid.bdc-mobile-carousel--peek-2 { gap: var(--bdc-peek-gap) !important; } .explore-skills__grid.bdc-mobile-carousel--peek .explore-skill__icon, .explore-skills__grid.bdc-mobile-carousel--peek-2 .explore-skill__icon { width: clamp(48px, 4.5vw, 58px) !important; height: clamp(48px, 4.5vw, 58px) !important; max-width: 100% !important; filter: var(--home-section-icon-filter) !important; mix-blend-mode: multiply !important; } .explore-skills__grid.bdc-mobile-carousel--peek .explore-skill__title, .explore-skills__grid.bdc-mobile-carousel--peek-2 .explore-skill__title { font-size: clamp(0.85rem, 2.8vw, 0.95rem) !important; line-height: 1.25 !important; } .explore-skills__grid.bdc-mobile-carousel--peek .explore-skill__text, .explore-skills__grid.bdc-mobile-carousel--peek-2 .explore-skill__text { font-size: clamp(0.72rem, 2.5vw, 0.82rem) !important; line-height: 1.35 !important; max-width: 100% !important; min-height: 0 !important; } /* Creative Makers explore: 2 cards/view on mobile */ .creative-makers-explore__grid.bdc-mobile-carousel--peek .creative-makers-activity.bdc-mobile-carousel__item, .creative-makers-explore__grid.bdc-mobile-carousel--peek-2 .creative-makers-activity.bdc-mobile-carousel__item { flex: 0 0 calc((100% - var(--bdc-peek-gap)) / 2) !important; width: calc((100% - var(--bdc-peek-gap)) / 2) !important; max-width: calc((100% - var(--bdc-peek-gap)) / 2) !important; min-width: 0 !important; padding: 0.85rem 0.45rem !important; gap: 0.75rem !important; box-sizing: border-box !important; } .creative-makers-explore__grid.bdc-mobile-carousel--peek, .creative-makers-explore__grid.bdc-mobile-carousel--peek-2 { gap: var(--bdc-peek-gap) !important; } .bdc-mobile-carousel--peek .explore-skill__title, .bdc-mobile-carousel--peek .believe-card__text, .bdc-mobile-carousel--peek .approach-step__title { font-size: clamp(0.72rem, 2.6vw, 0.84rem); line-height: 1.25; } .bdc-mobile-carousel--peek .explore-skill__text, .bdc-mobile-carousel--peek .role-icons__label { font-size: clamp(0.62rem, 2.3vw, 0.72rem); line-height: 1.35; } .bdc-mobile-carousel--peek .creative-makers-activity { box-shadow: none; padding: 0.55rem 0.3rem; text-align: center; } .bdc-mobile-carousel--peek .creative-makers-activity__icon { width: clamp(36px, 10vw, 52px); height: clamp(36px, 10vw, 52px); } .bdc-mobile-carousel--peek .creative-makers-activity__title { font-size: clamp(0.7rem, 2.5vw, 0.82rem); line-height: 1.25; overflow-wrap: anywhere; word-break: break-word; } .bdc-mobile-carousel--peek .for-parents-expect-card, .bdc-mobile-carousel--peek .vision-pillar-card, .bdc-mobile-carousel--peek .get-involved-ways-card, .bdc-mobile-carousel--peek .partners-ways-card, .bdc-mobile-carousel--peek .partners-founding-card, .bdc-mobile-carousel--peek .accessibility-provide-card, .bdc-mobile-carousel--peek .financial-promise-item, .bdc-mobile-carousel--peek .newsletter-role-card, .bdc-mobile-carousel--peek .media-consent-usage-card, .bdc-mobile-carousel--peek .for-parents-info-feature, .bdc-mobile-carousel--peek .vision-journey-step { padding: 0.55rem 0.3rem; text-align: center; } .bdc-mobile-carousel--peek .for-parents-expect-card__icon, .bdc-mobile-carousel--peek .for-parents-info-feature__icon, .bdc-mobile-carousel--peek .vision-pillar-card__icon, .bdc-mobile-carousel--peek .get-involved-ways-card__icon, .bdc-mobile-carousel--peek .partners-ways-card__icon, .bdc-mobile-carousel--peek .partners-founding-card__icon, .bdc-mobile-carousel--peek .accessibility-provide-card__icon, .bdc-mobile-carousel--peek .financial-promise-item__icon, .bdc-mobile-carousel--peek .vision-journey-step__icon { width: clamp(36px, 10vw, 52px); height: clamp(36px, 10vw, 52px); } .bdc-mobile-carousel--peek .for-parents-expect-card__title, .bdc-mobile-carousel--peek .for-parents-info-feature__title, .bdc-mobile-carousel--peek .vision-pillar-card__title, .bdc-mobile-carousel--peek .get-involved-ways-card__title, .bdc-mobile-carousel--peek .partners-ways-card__title, .bdc-mobile-carousel--peek .partners-founding-card__title, .bdc-mobile-carousel--peek .accessibility-provide-card__title, .bdc-mobile-carousel--peek .financial-promise-item__title, .bdc-mobile-carousel--peek .vision-journey-step__title { font-size: clamp(0.7rem, 2.5vw, 0.82rem); line-height: 1.25; } .bdc-mobile-carousel--peek .for-parents-expect-card__text, .bdc-mobile-carousel--peek .for-parents-info-feature__text, .bdc-mobile-carousel--peek .vision-pillar-card__text, .bdc-mobile-carousel--peek .get-involved-ways-card__text, .bdc-mobile-carousel--peek .partners-ways-card__text, .bdc-mobile-carousel--peek .partners-founding-card__text, .bdc-mobile-carousel--peek .accessibility-provide-card__text, .bdc-mobile-carousel--peek .financial-promise-item__text, .bdc-mobile-carousel--peek .vision-journey-step__quote, .bdc-mobile-carousel--peek .vision-journey-step__text { font-size: clamp(0.62rem, 2.3vw, 0.72rem); line-height: 1.35; min-height: 0; } .bdc-mobile-carousel--peek .get-involved-ways-card__link { font-size: clamp(0.62rem, 2.3vw, 0.72rem); } .bdc-mobile-carousel--peek .believe-card__text { min-height: 0; } .bdc-mobile-carousel__item [class*='__text'], .bdc-mobile-carousel__item [class*='__quote'], .bdc-mobile-carousel__item [class*='__title'], .bdc-mobile-carousel__item [class*='__label'] { max-width: 100%; overflow-wrap: anywhere; word-break: break-word; } .bdc-mobile-carousel__item img { max-width: 100%; } .bdc-mobile-carousel .experience-card__media, .bdc-mobile-carousel .home-pillar__figure, .bdc-mobile-carousel .partners-impact-card > .lazy-img-wrap { overflow: hidden; } .bdc-mobile-carousel .explore-grow-stage { overflow: hidden; max-width: 100%; } .bdc-mobile-carousel .explore-grow-stage__card { height: auto; min-height: var(--explore-grow-card-h); overflow: hidden; padding: 0.85rem 0.9rem; } .bdc-mobile-carousel .explore-grow-stage__card::before { inset: 0; background-size: 100% 100%; background-position: center center; } .bdc-mobile-carousel .explore-grow-stage__layout { grid-template-columns: minmax(0, 36%) minmax(0, 1fr); gap: 0.45rem; } .bdc-mobile-carousel .explore-grow-stage__layout > .lazy-img-wrap { overflow: visible; max-width: 100%; } .bdc-mobile-carousel .explore-grow-stage__photo, .bdc-mobile-carousel .explore-grow-stage__layout > .lazy-img-wrap .explore-grow-stage__photo { max-width: 100%; width: 100%; max-height: 150px; object-fit: contain; } .bdc-mobile-carousel .explore-grow-stage__quote, .bdc-mobile-carousel .explore-grow-stage__text, .bdc-mobile-carousel .explore-grow-stage__label { overflow-wrap: anywhere; word-break: break-word; max-width: 100%; } .bdc-carousel-dots { display: flex; align-items: center; justify-content: center; gap: 0.45rem; margin-top: 0.75rem; margin-bottom: 1.15rem; padding: 0; list-style: none; } .panel-card .bdc-carousel-dots { margin-top: 0.55rem; margin-bottom: 1.35rem; } .bdc-carousel-dots__dot { width: 8px; height: 8px; padding: 0; border: 0; border-radius: 999px; background: rgba(238, 29, 120, 0.28); cursor: pointer; appearance: none; transition: width 0.2s ease, background-color 0.2s ease; } .bdc-carousel-dots__dot.is-active { width: 22px; background: var(--color-pink); } } @media (max-width: 991px) { .for-parents-expect__wrap, .for-parents-expect__wrap.bdc-mobile-carousel-parent { padding-inline: 24px; overflow: visible; } .for-parents-expect__inner, .for-parents-expect__inner.bdc-mobile-carousel-parent, .for-parents-expect__inner.site-container.bdc-mobile-carousel-host { padding-left: 0; padding-right: 0; overflow: visible; } } @media (min-width: 992px) { .bdc-carousel-dots { display: none; } } /* Site-wide mobile heading scale: H1 > H2 > H3, no oversized hero titles. */ @media (max-width: 767px) { h1, .heading-h1 { font-size: 26px; line-height: 1.25; font-weight: 700; } h2, .heading-h2 { font-size: 22px; line-height: 1.3; font-weight: 700; } h3, .heading-h3 { font-size: 18px; line-height: 1.35; font-weight: 600; } #main-content h1, #main-content .hero-headline { font-size: 26px; line-height: 1.25; font-weight: 700; } #main-content h2 { font-size: 22px; line-height: 1.3; font-weight: 700; } #main-content h3 { font-size: 18px; line-height: 1.35; font-weight: 600; } #main-content h1 [class*='__title-line'], #main-content h1 [class*='__title-row'], #main-content h1 .heading-underline, #main-content .hero-headline [class*='__title-line'], #main-content .hero-headline [class*='__title-row'], #main-content .hero-headline .heading-underline, #main-content h2 [class*='__title-line'], #main-content h3 [class*='__title-line'] { font-size: inherit; line-height: inherit; font-weight: inherit; } .site-footer__edge { height: 12px; background: var(--footer-bg); } .site-footer__main { background: var(--footer-bg); padding: 28px 0 0; } .site-footer__grid { display: none; } .site-footer__mobile { display: flex; flex-direction: column; gap: 0; width: 100%; max-width: none; margin: 0; padding: 0 20px 8px; } .footer-acc { display: flex; flex-direction: column; gap: 0; border-top: 1px solid rgba(0, 27, 102, 0.12); } .footer-acc__item { border: 0; border-bottom: 1px solid rgba(0, 27, 102, 0.12); border-radius: 0; background: transparent; overflow: hidden; } .footer-acc__trigger { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; margin: 0; padding: 16px 0; border: 0; background: transparent; color: var(--color-navy); font-family: var(--font-heading); font-size: 1.05rem; font-weight: 700; line-height: 1.25; text-align: left; cursor: pointer; } .footer-acc__label { flex: 1 1 auto; min-width: 0; display: inline-flex; align-items: center; flex-wrap: wrap; gap: 0.35rem; } .footer-acc__label-heart { color: var(--color-pink); font-weight: 500; } .footer-acc__toggle { flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; width: 1.25rem; font-family: var(--font-body); font-size: 1.35rem; font-weight: 400; line-height: 1; color: var(--color-navy); transition: transform 0.22s ease; } .footer-acc__item.is-open .footer-acc__toggle { transform: rotate(45deg); } .footer-acc__panel { max-height: 0; overflow: hidden; transition: max-height 0.28s ease; } .footer-acc__item.is-open .footer-acc__panel { max-height: 28rem; } .footer-acc__links { list-style: none; margin: 0; padding: 0 0 16px; display: flex; flex-direction: column; gap: 0.55rem; } .footer-acc__links li { position: relative; } .footer-acc__links .site-footer__link { display: block; position: relative; padding-left: 14px; font-size: 0.92rem; } .footer-acc__links .site-footer__link::before { content: ''; position: absolute; left: 0; top: 50%; width: 6px; height: 6px; border-radius: 50%; background: var(--color-blue-accent); transform: translateY(-50%); } .footer-m-brand { display: flex; flex-direction: column; align-items: center; text-align: center; background: transparent; border-radius: 0; padding: 0 0 24px; } .footer-m-brand__logo { display: inline-block; margin-bottom: 0.85rem; } .footer-m-brand__logo img { display: block; width: min(100%, 210px); height: auto; margin-inline: auto; object-fit: contain; background: transparent; filter: none; mix-blend-mode: multiply; } .footer-m-brand__mission { margin: 0 0 1rem; max-width: 22rem; font-family: var(--font-body); font-size: 0.9rem; line-height: 1.55; color: var(--color-navy); } .footer-m-brand__social { display: flex; align-items: center; justify-content: center; gap: 0.5rem; list-style: none; margin: 0; padding: 0; } .footer-acc__newsletter { padding: 0 0 16px; } .footer-acc__newsletter-text { margin: 0 0 0.85rem; font-family: var(--font-body); font-size: 0.86rem; line-height: 1.5; color: var(--color-navy); } .footer-m-news__form { display: flex; align-items: stretch; width: 100%; max-width: 100%; min-width: 0; } .footer-m-news__field { flex: 1 1 auto; min-width: 0; border: 1px solid rgba(0, 27, 102, 0.12); border-right: 0; border-radius: 999px 0 0 999px; background: #fff; overflow: hidden; } .footer-m-news__input { display: block; width: 100%; min-width: 0; height: 42px; border: 0; border-radius: 0; background: transparent; padding: 0 0.9rem; font-family: var(--font-body); font-size: 0.84rem; color: var(--color-navy); box-sizing: border-box; } .footer-m-news__input:focus { outline: none; } .footer-m-news__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; flex-shrink: 0; height: 42px; border: 0; border-radius: 0 999px 999px 0; padding: 0 0.85rem; background: var(--color-pink); color: #fff; font-family: var(--font-body); font-size: 0.82rem; font-weight: 650; white-space: nowrap; cursor: pointer; } .site-footer__legal { background: var(--footer-bg); } .site-footer__legal-inner { flex-direction: column; align-items: center; text-align: center; gap: 0.45rem; padding: 16px 16px 22px; } .site-footer__legal-copy { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; } .site-footer__initiative { display: none; } .site-footer__legal-sep--lead { display: none; } .site-footer__legal-nav { gap: 0.4rem 0.5rem; } .site-footer__legal-nav .site-footer__legal-sep, .site-footer__legal-sep--heart { display: inline; } .site-footer__legal-heart { display: inline-flex; align-items: center; color: var(--color-pink); margin-left: 0.15rem; } .site-footer__copyright, .site-footer__legal-link { font-size: 0.82rem; } } /* * Solo 1-card sliders (For Parents / Get Involved / Partners / Financial / Accessibility): * Equal side gap. NEVER negative margin. NEVER overflow clip on parents. */ @media (max-width: 991px) { .for-parents-expect, .for-parents-expect__wrap, .get-involved-ways, .partners-founding, .financial-support, .accessibility-provide { overflow: visible !important; overflow-x: visible !important; } .for-parents-expect__wrap { padding-left: 24px !important; padding-right: 24px !important; } .for-parents-expect__inner.site-container, .for-parents-expect__inner.site-container.bdc-mobile-carousel-host, .get-involved-ways > .site-container, .get-involved-ways > .site-container.bdc-mobile-carousel-host, .partners-founding > .site-container, .partners-founding > .site-container.bdc-mobile-carousel-host, .financial-support .financial-support__inner.site-container, .financial-support .financial-support__inner.site-container.bdc-mobile-carousel-host, .accessibility-provide .accessibility-provide__inner.site-container, .accessibility-provide .accessibility-provide__inner.site-container.bdc-mobile-carousel-host { padding-left: 24px !important; padding-right: 24px !important; overflow: visible !important; overflow-x: visible !important; max-width: 100% !important; box-sizing: border-box !important; } /* For Parents: gap only on wrap ? avoid double padding */ .for-parents-expect__wrap .for-parents-expect__inner.site-container, .for-parents-expect__wrap .for-parents-expect__inner.site-container.bdc-mobile-carousel-host { padding-left: 0 !important; padding-right: 0 !important; } .for-parents-expect__grid.bdc-mobile-carousel, .for-parents-expect__grid.bdc-mobile-carousel--solo, .for-parents-expect__grid.bdc-mobile-carousel--full, .for-parents-expect__grid.bdc-mobile-carousel--inset, .get-involved-ways__grid.bdc-mobile-carousel, .get-involved-ways__grid.bdc-mobile-carousel--solo, .get-involved-ways__grid.bdc-mobile-carousel--full, .get-involved-ways__grid.bdc-mobile-carousel--inset, .partners-founding__grid.bdc-mobile-carousel, .partners-founding__grid.bdc-mobile-carousel--solo, .partners-founding__grid.bdc-mobile-carousel--full, .partners-founding__grid.bdc-mobile-carousel--inset, .financial-support-grid.bdc-mobile-carousel, .financial-support-grid.bdc-mobile-carousel--solo, .financial-support-grid.bdc-mobile-carousel--full, .financial-support-grid.bdc-mobile-carousel--inset, .accessibility-provide-grid.bdc-mobile-carousel, .accessibility-provide-grid.bdc-mobile-carousel--solo, .accessibility-provide-grid.bdc-mobile-carousel--full, .accessibility-provide-grid.bdc-mobile-carousel--inset, .bdc-mobile-carousel--solo { display: flex !important; flex-wrap: nowrap !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; margin-left: 0 !important; margin-right: 0 !important; margin-inline: 0 !important; padding: 2px 2px 16px !important; padding-left: 2px !important; padding-right: 2px !important; padding-inline: 2px !important; gap: 0 !important; left: auto !important; transform: none !important; scroll-padding: 0 !important; scroll-padding-inline: 0 !important; box-sizing: border-box !important; background: transparent !important; box-shadow: none !important; overflow-x: auto !important; overflow-y: hidden !important; -webkit-overflow-scrolling: touch; scroll-snap-type: x mandatory; } .for-parents-expect__grid.bdc-mobile-carousel > .for-parents-expect-card, .for-parents-expect-card.bdc-mobile-carousel__item, .get-involved-ways__grid.bdc-mobile-carousel > .get-involved-ways-card, .get-involved-ways-card.bdc-mobile-carousel__item, .partners-founding__grid.bdc-mobile-carousel > .partners-founding-card, .partners-founding-card.bdc-mobile-carousel__item, .financial-support-grid.bdc-mobile-carousel > .financial-support-card, .financial-support-card.bdc-mobile-carousel__item, .accessibility-provide-grid.bdc-mobile-carousel > .accessibility-provide-card, .accessibility-provide-card.bdc-mobile-carousel__item, .bdc-mobile-carousel--solo > .bdc-mobile-carousel__item, .bdc-mobile-carousel--solo .bdc-mobile-carousel__item { flex: 0 0 100% !important; flex-grow: 0 !important; flex-shrink: 0 !important; flex-basis: 100% !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; margin: 0 !important; box-sizing: border-box !important; overflow: visible !important; box-shadow: none !important; -webkit-box-shadow: none !important; filter: none !important; scroll-snap-align: start !important; scroll-snap-stop: always !important; } .for-parents-expect-card.bdc-mobile-carousel__item, .get-involved-ways-card.bdc-mobile-carousel__item, .financial-support-card.bdc-mobile-carousel__item, .accessibility-provide-card.bdc-mobile-carousel__item { background-color: #fff !important; } .for-parents-expect-card.bdc-mobile-carousel__item, .get-involved-ways-card.bdc-mobile-carousel__item { border: 1px solid var(--for-parents-expect-card-border) !important; border-left: 1px solid var(--for-parents-expect-card-border) !important; border-right: 1px solid var(--for-parents-expect-card-border) !important; } .financial-support-card.bdc-mobile-carousel__item, .accessibility-provide-card.bdc-mobile-carousel__item { border: 1px solid rgba(0, 27, 102, 0.1) !important; border-left: 1px solid rgba(0, 27, 102, 0.1) !important; border-right: 1px solid rgba(0, 27, 102, 0.1) !important; } } @media (max-width: 1023px) { .financial-transparency-page #main-content { overflow-x: hidden; } .financial-transparency-page .financial-commitment .site-container, .financial-transparency-page .financial-support .site-container, .financial-transparency-page .financial-promise .site-container, .financial-transparency-page .financial-questions .site-container { padding-left: var(--container-padding) !important; padding-right: var(--container-padding) !important; box-sizing: border-box; overflow: visible; } .financial-transparency-page .financial-commitment__card, .financial-transparency-page .financial-promise__card, .financial-transparency-page .financial-questions__card { box-sizing: border-box; max-width: 100%; } .financial-transparency-page .financial-support-grid, .financial-transparency-page .financial-support-grid.bdc-mobile-carousel, .financial-transparency-page .financial-support-grid.bdc-mobile-carousel--solo { margin-inline: 0 !important; width: 100% !important; max-width: 100% !important; padding-inline: 2px !important; scroll-padding-inline: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; box-sizing: border-box !important; } .financial-transparency-page .financial-support-card, .financial-transparency-page .financial-support-card.bdc-mobile-carousel__item { flex: 0 0 100% !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; border: 1px solid rgba(0, 27, 102, 0.1) !important; } .financial-transparency-page .financial-promise-grid, .financial-transparency-page .financial-promise-grid.bdc-mobile-carousel { margin-inline: 0 !important; width: 100% !important; max-width: 100% !important; } .accessibility-page .accessibility-provide .site-container, .accessibility-page .accessibility-provide .accessibility-provide__inner.site-container { padding-left: var(--container-padding) !important; padding-right: var(--container-padding) !important; box-sizing: border-box; overflow: visible; } .accessibility-page .accessibility-provide-grid, .accessibility-page .accessibility-provide-grid.bdc-mobile-carousel, .accessibility-page .accessibility-provide-grid.bdc-mobile-carousel--solo { margin-inline: 0 !important; width: 100% !important; max-width: 100% !important; padding-inline: 2px !important; scroll-padding-inline: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; box-sizing: border-box !important; } .accessibility-page .accessibility-provide-card, .accessibility-page .accessibility-provide-card.bdc-mobile-carousel__item { flex: 0 0 100% !important; width: 100% !important; min-width: 0 !important; max-width: 100% !important; box-sizing: border-box !important; border: 1px solid rgba(0, 27, 102, 0.1) !important; } } /* Experience detail pages (shared page-hero template) ? mobile: zero gap between CTAs and banner. All experience pages use creative-makers-hero: Creative Makers, Young Ideas Lab, Create for a Cause, Community Adventures. */ @media (max-width: 768px) { #main-content > section.page-hero.creative-makers-hero .page-hero__inner, .page-hero.creative-makers-hero .page-hero__inner { gap: 0 !important; row-gap: 0 !important; } #main-content > section.page-hero.creative-makers-hero .page-hero__content, .page-hero.creative-makers-hero .page-hero__content { padding-bottom: 0 !important; margin-bottom: 0 !important; } #main-content > section.page-hero.creative-makers-hero .page-hero__actions, #main-content > section.page-hero.creative-makers-hero .hero-ctas, .page-hero.creative-makers-hero .page-hero__actions, .page-hero.creative-makers-hero .hero-ctas { margin-bottom: 0 !important; } #main-content > section.page-hero.creative-makers-hero .creative-makers-hero__media, #main-content > section.page-hero.creative-makers-hero .hero-image-wrap, #main-content > section.page-hero.creative-makers-hero .hero-image-wrap .lazy-img-wrap, #main-content > section.page-hero.creative-makers-hero [class*='__media'] .lazy-img-wrap, .page-hero.creative-makers-hero .creative-makers-hero__media, .page-hero.creative-makers-hero .hero-image-wrap, .page-hero.creative-makers-hero .hero-image-wrap .lazy-img-wrap, .page-hero.creative-makers-hero [class*='__media'] .lazy-img-wrap { margin-top: 0 !important; padding-top: 0 !important; } /* For Parents (shared page-hero) ? mobile: zero gap between CTAs and banner image */ #main-content > section.page-hero.for-parents-hero .page-hero__inner, .page-hero.for-parents-hero .page-hero__inner { gap: 0 !important; row-gap: 0 !important; } #main-content > section.page-hero.for-parents-hero .page-hero__content, .page-hero.for-parents-hero .page-hero__content { padding-bottom: 0 !important; margin-bottom: 0 !important; } #main-content > section.page-hero.for-parents-hero .page-hero__actions, #main-content > section.page-hero.for-parents-hero .hero-ctas, .page-hero.for-parents-hero .page-hero__actions, .page-hero.for-parents-hero .hero-ctas { margin-bottom: 0 !important; } #main-content > section.page-hero.for-parents-hero .about-hero__media, #main-content > section.page-hero.for-parents-hero .hero-image-wrap, #main-content > section.page-hero.for-parents-hero .hero-image-wrap .lazy-img-wrap, #main-content > section.page-hero.for-parents-hero [class*='__media'] .lazy-img-wrap, .page-hero.for-parents-hero .about-hero__media, .page-hero.for-parents-hero .hero-image-wrap, .page-hero.for-parents-hero .hero-image-wrap .lazy-img-wrap, .page-hero.for-parents-hero [class*='__media'] .lazy-img-wrap { margin-top: 0 !important; padding-top: 0 !important; } /* For Parents ? mobile heading: single line ("For" pink + "Parents" navy) */ #main-content > section.page-hero.for-parents-hero .hero-headline, .page-hero.for-parents-hero .hero-headline { font-size: clamp(21px, 6vw, 26px) !important; line-height: 1.2 !important; white-space: nowrap !important; } #main-content > section.page-hero.for-parents-hero .hero-headline .for-parents-hero__title-line, .page-hero.for-parents-hero .hero-headline .for-parents-hero__title-line { display: inline !important; white-space: inherit !important; } #main-content > section.page-hero.for-parents-hero .hero-headline .for-parents-hero__title-line--pink + .for-parents-hero__title-line--navy::before, .page-hero.for-parents-hero .hero-headline .for-parents-hero__title-line--pink + .for-parents-hero__title-line--navy::before { content: ' '; } /* Our Vision (shared page-hero) ? mobile: flush to header (no top gap) */ #main-content > section.page-hero.vision-hero:not(.partners-hero), .page-hero.vision-hero:not(.partners-hero) { padding-top: 0 !important; margin-top: 0 !important; gap: 0 !important; } #main-content > section.page-hero.vision-hero:not(.partners-hero) .page-hero__inner, .page-hero.vision-hero:not(.partners-hero) .page-hero__inner { padding-top: 0 !important; margin-top: 0 !important; } #main-content > section.page-hero.vision-hero:not(.partners-hero) .page-hero__content, .page-hero.vision-hero:not(.partners-hero) .page-hero__content { padding-top: 0 !important; margin-top: 0 !important; } #main-content > section.page-hero.vision-hero:not(.partners-hero) .hero-label, .page-hero.vision-hero:not(.partners-hero) .hero-label { margin-top: 0 !important; } /* Our Vision (shared page-hero) ? mobile: zero gap between copy and banner image */ #main-content > section.page-hero.vision-hero:not(.partners-hero) .page-hero__inner, .page-hero.vision-hero:not(.partners-hero) .page-hero__inner { gap: 0 !important; row-gap: 0 !important; } #main-content > section.page-hero.vision-hero:not(.partners-hero) .page-hero__content, .page-hero.vision-hero:not(.partners-hero) .page-hero__content { padding-bottom: 0 !important; margin-bottom: 0 !important; } #main-content > section.page-hero.vision-hero:not(.partners-hero) .hero-copy, .page-hero.vision-hero:not(.partners-hero) .hero-copy { margin-bottom: 0 !important; } #main-content > section.page-hero.vision-hero:not(.partners-hero) .about-hero__media, #main-content > section.page-hero.vision-hero:not(.partners-hero) .hero-image-wrap, #main-content > section.page-hero.vision-hero:not(.partners-hero) .hero-image-wrap .lazy-img-wrap, #main-content > section.page-hero.vision-hero:not(.partners-hero) [class*='__media'] .lazy-img-wrap, .page-hero.vision-hero:not(.partners-hero) .about-hero__media, .page-hero.vision-hero:not(.partners-hero) .hero-image-wrap, .page-hero.vision-hero:not(.partners-hero) .hero-image-wrap .lazy-img-wrap, .page-hero.vision-hero:not(.partners-hero) [class*='__media'] .lazy-img-wrap { margin-top: 0 !important; padding-top: 0 !important; } /* Our Vision ? mobile heading: 2 lines ("Building a Brighter Future" / "Together") */ #main-content > section.page-hero.vision-hero:not(.partners-hero) .hero-headline, .page-hero.vision-hero:not(.partners-hero) .hero-headline { font-size: clamp(20px, 5.5vw, 26px) !important; line-height: 1.2 !important; max-width: min(100%, 340px); margin-bottom: 10px !important; } #main-content > section.page-hero.vision-hero:not(.partners-hero) .hero-headline .vision-hero__title-line, .page-hero.vision-hero:not(.partners-hero) .hero-headline .vision-hero__title-line { display: inline !important; white-space: normal; } #main-content > section.page-hero.vision-hero:not(.partners-hero) .hero-headline .vision-hero__title-line--navy:first-child, #main-content > section.page-hero.vision-hero:not(.partners-hero) .hero-headline .vision-hero__title-line--pink, .page-hero.vision-hero:not(.partners-hero) .hero-headline .vision-hero__title-line--navy:first-child, .page-hero.vision-hero:not(.partners-hero) .hero-headline .vision-hero__title-line--pink { white-space: nowrap; } #main-content > section.page-hero.vision-hero:not(.partners-hero) .hero-headline .vision-hero__title-line--navy + .vision-hero__title-line--pink::before, .page-hero.vision-hero:not(.partners-hero) .hero-headline .vision-hero__title-line--navy + .vision-hero__title-line--pink::before { content: ' '; } #main-content > section.page-hero.vision-hero:not(.partners-hero) .hero-headline .vision-hero__title-line--pink + .vision-hero__title-line--navy, .page-hero.vision-hero:not(.partners-hero) .hero-headline .vision-hero__title-line--pink + .vision-hero__title-line--navy { display: block !important; margin-top: 0; } /* Get Involved (shared page-hero) ? mobile: zero gap between CTAs and banner image */ #main-content > section.page-hero.get-involved-hero .page-hero__inner, .page-hero.get-involved-hero .page-hero__inner { gap: 0 !important; row-gap: 0 !important; } #main-content > section.page-hero.get-involved-hero .page-hero__content, .page-hero.get-involved-hero .page-hero__content { padding-bottom: 0 !important; margin-bottom: 0 !important; } #main-content > section.page-hero.get-involved-hero .page-hero__actions, #main-content > section.page-hero.get-involved-hero .hero-ctas, .page-hero.get-involved-hero .page-hero__actions, .page-hero.get-involved-hero .hero-ctas { margin-bottom: 0 !important; } #main-content > section.page-hero.get-involved-hero .about-hero__media, #main-content > section.page-hero.get-involved-hero .hero-image-wrap, #main-content > section.page-hero.get-involved-hero .hero-image-wrap .lazy-img-wrap, #main-content > section.page-hero.get-involved-hero [class*='__media'] .lazy-img-wrap, .page-hero.get-involved-hero .about-hero__media, .page-hero.get-involved-hero .hero-image-wrap, .page-hero.get-involved-hero .hero-image-wrap .lazy-img-wrap, .page-hero.get-involved-hero [class*='__media'] .lazy-img-wrap { margin-top: 0 !important; padding-top: 0 !important; } /* Get Involved ? mobile heading: single line ("Get" pink + "Involved" navy) */ #main-content > section.page-hero.get-involved-hero .hero-headline, .page-hero.get-involved-hero .hero-headline { font-size: clamp(21px, 6vw, 26px) !important; line-height: 1.2 !important; white-space: nowrap !important; } #main-content > section.page-hero.get-involved-hero .hero-headline .get-involved-hero__title-line, .page-hero.get-involved-hero .hero-headline .get-involved-hero__title-line { display: inline !important; white-space: inherit !important; margin-left: 0 !important; } #main-content > section.page-hero.get-involved-hero .hero-headline .get-involved-hero__title-line--pink + .get-involved-hero__title-line--navy::before, .page-hero.get-involved-hero .hero-headline .get-involved-hero__title-line--pink + .get-involved-hero__title-line--navy::before { content: ' '; } /* Partners (shared page-hero) ? mobile: zero gap between CTAs and banner image */ #main-content > section.page-hero.partners-hero .page-hero__inner, .page-hero.partners-hero .page-hero__inner { gap: 0 !important; row-gap: 0 !important; } #main-content > section.page-hero.partners-hero .page-hero__content, .page-hero.partners-hero .page-hero__content { padding-bottom: 0 !important; margin-bottom: 0 !important; } #main-content > section.page-hero.partners-hero .page-hero__actions, #main-content > section.page-hero.partners-hero .hero-ctas, .page-hero.partners-hero .page-hero__actions, .page-hero.partners-hero .hero-ctas { margin-bottom: 0 !important; } #main-content > section.page-hero.partners-hero .about-hero__media, #main-content > section.page-hero.partners-hero .hero-image-wrap, #main-content > section.page-hero.partners-hero .hero-image-wrap .lazy-img-wrap, #main-content > section.page-hero.partners-hero [class*='__media'] .lazy-img-wrap, .page-hero.partners-hero .about-hero__media, .page-hero.partners-hero .hero-image-wrap, .page-hero.partners-hero .hero-image-wrap .lazy-img-wrap, .page-hero.partners-hero [class*='__media'] .lazy-img-wrap { margin-top: 0 !important; padding-top: 0 !important; } /* About (shared page-hero) ? mobile: zero gap between CTAs and banner image */ #main-content > section.page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .page-hero__inner, .page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .page-hero__inner { gap: 0 !important; row-gap: 0 !important; } #main-content > section.page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .page-hero__content, .page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .page-hero__content { padding-bottom: 0 !important; margin-bottom: 0 !important; } #main-content > section.page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .page-hero__actions, #main-content > section.page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .hero-ctas, .page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .page-hero__actions, .page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .hero-ctas { margin-bottom: 0 !important; } #main-content > section.page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .about-hero__media, #main-content > section.page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .hero-image-wrap, #main-content > section.page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .hero-image-wrap .lazy-img-wrap, #main-content > section.page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) [class*='__media'] .lazy-img-wrap, .page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .about-hero__media, .page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .hero-image-wrap, .page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .hero-image-wrap .lazy-img-wrap, .page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) [class*='__media'] .lazy-img-wrap { margin-top: 0 !important; padding-top: 0 !important; } /* Explore (shared page-hero) ? mobile: zero gap between CTAs and banner image */ #main-content > section.page-hero.explore-hero .page-hero__inner, .page-hero.explore-hero .page-hero__inner { gap: 0 !important; row-gap: 0 !important; } #main-content > section.page-hero.explore-hero .page-hero__content, .page-hero.explore-hero .page-hero__content { padding-bottom: 0 !important; margin-bottom: 0 !important; } #main-content > section.page-hero.explore-hero .page-hero__actions, #main-content > section.page-hero.explore-hero .hero-ctas, .page-hero.explore-hero .page-hero__actions, .page-hero.explore-hero .hero-ctas { margin-bottom: 0 !important; } #main-content > section.page-hero.explore-hero .explore-hero__media, #main-content > section.page-hero.explore-hero .hero-image-wrap, #main-content > section.page-hero.explore-hero .hero-image-wrap .lazy-img-wrap, #main-content > section.page-hero.explore-hero [class*='__media'] .lazy-img-wrap, .page-hero.explore-hero .explore-hero__media, .page-hero.explore-hero .hero-image-wrap, .page-hero.explore-hero .hero-image-wrap .lazy-img-wrap, .page-hero.explore-hero [class*='__media'] .lazy-img-wrap { margin-top: 0 !important; padding-top: 0 !important; } /* Contact (shared page-hero) ? mobile: zero gap between copy and banner image */ #main-content > section.page-hero.contact-hero .page-hero__inner, .page-hero.contact-hero .page-hero__inner { gap: 0 !important; row-gap: 0 !important; } #main-content > section.page-hero.contact-hero .page-hero__content, .page-hero.contact-hero .page-hero__content { padding-bottom: 0 !important; margin-bottom: 0 !important; } #main-content > section.page-hero.contact-hero .hero-copy, .page-hero.contact-hero .hero-copy { margin-bottom: 0 !important; } #main-content > section.page-hero.contact-hero .about-hero__media, #main-content > section.page-hero.contact-hero .hero-image-wrap, #main-content > section.page-hero.contact-hero .hero-image-wrap .lazy-img-wrap, #main-content > section.page-hero.contact-hero [class*='__media'] .lazy-img-wrap, .page-hero.contact-hero .about-hero__media, .page-hero.contact-hero .hero-image-wrap, .page-hero.contact-hero .hero-image-wrap .lazy-img-wrap, .page-hero.contact-hero [class*='__media'] .lazy-img-wrap { margin-top: 0 !important; padding-top: 0 !important; } /* Privacy / media policy pages (shared page-hero) ? mobile: zero gap between copy and banner image */ #main-content > section.page-hero.media-policy-hero .page-hero__inner, .page-hero.media-policy-hero .page-hero__inner { gap: 0 !important; row-gap: 0 !important; } #main-content > section.page-hero.media-policy-hero .page-hero__content, .page-hero.media-policy-hero .page-hero__content { padding-bottom: 0 !important; margin-bottom: 0 !important; } #main-content > section.page-hero.media-policy-hero .hero-copy, .page-hero.media-policy-hero .hero-copy { margin-bottom: 0 !important; } #main-content > section.page-hero.media-policy-hero .about-hero__media, #main-content > section.page-hero.media-policy-hero .media-policy-hero__media, #main-content > section.page-hero.media-policy-hero .hero-image-wrap, #main-content > section.page-hero.media-policy-hero .hero-image-wrap .lazy-img-wrap, #main-content > section.page-hero.media-policy-hero [class*='__media'] .lazy-img-wrap, .page-hero.media-policy-hero .about-hero__media, .page-hero.media-policy-hero .media-policy-hero__media, .page-hero.media-policy-hero .hero-image-wrap, .page-hero.media-policy-hero .hero-image-wrap .lazy-img-wrap, .page-hero.media-policy-hero [class*='__media'] .lazy-img-wrap { margin-top: 0 !important; padding-top: 0 !important; } /* Terms of Use (shared page-hero) ? mobile: zero gap between copy and banner image */ #main-content > section.page-hero.terms-hero .page-hero__inner, .page-hero.terms-hero .page-hero__inner { gap: 0 !important; row-gap: 0 !important; } #main-content > section.page-hero.terms-hero .page-hero__content, .page-hero.terms-hero .page-hero__content { padding-bottom: 0 !important; margin-bottom: 0 !important; } #main-content > section.page-hero.terms-hero .hero-copy, .page-hero.terms-hero .hero-copy { margin-bottom: 0 !important; } #main-content > section.page-hero.terms-hero .about-hero__media, #main-content > section.page-hero.terms-hero .terms-hero__media, #main-content > section.page-hero.terms-hero .hero-image-wrap, #main-content > section.page-hero.terms-hero .hero-image-wrap .lazy-img-wrap, #main-content > section.page-hero.terms-hero [class*='__media'] .lazy-img-wrap, .page-hero.terms-hero .about-hero__media, .page-hero.terms-hero .terms-hero__media, .page-hero.terms-hero .hero-image-wrap, .page-hero.terms-hero .hero-image-wrap .lazy-img-wrap, .page-hero.terms-hero [class*='__media'] .lazy-img-wrap { margin-top: 0 !important; padding-top: 0 !important; } } /* Our Vision page ? mobile: zero top gap + full-width centered banner (wins over generic phone hero rules) */ @media (max-width: 768px) { .our-vision-page #main-content > section.page-hero.vision-hero.about-hero:not(.partners-hero), .our-vision-page #main-content > section.vision-hero.page-hero:not(.partners-hero) { padding-top: 0 !important; margin-top: 0 !important; gap: 0 !important; } .our-vision-page #main-content > section.page-hero.vision-hero:not(.partners-hero) .page-hero__inner, .our-vision-page .page-hero.vision-hero:not(.partners-hero) .page-hero__inner, .our-vision-page #main-content > section.page-hero.vision-hero:not(.partners-hero) .page-hero__content, .our-vision-page .page-hero.vision-hero:not(.partners-hero) .page-hero__content { padding-top: 0 !important; margin-top: 0 !important; } .our-vision-page #main-content > section.page-hero.vision-hero:not(.partners-hero) .hero-label, .our-vision-page .page-hero.vision-hero:not(.partners-hero) .hero-label { margin-top: 0 !important; } .our-vision-page #main-content > section.page-hero.vision-hero:not(.partners-hero) .about-hero__media, .our-vision-page #main-content > section.page-hero.vision-hero:not(.partners-hero) .hero-image-wrap, .our-vision-page .page-hero.vision-hero:not(.partners-hero) .about-hero__media, .our-vision-page .page-hero.vision-hero:not(.partners-hero) .hero-image-wrap, .our-vision-page #main-content > section.page-hero.vision-hero:not(.partners-hero) .about-hero__media .lazy-img-wrap, .our-vision-page #main-content > section.page-hero.vision-hero:not(.partners-hero) .about-hero__media picture, .our-vision-page .page-hero.vision-hero:not(.partners-hero) .about-hero__media .lazy-img-wrap, .our-vision-page .page-hero.vision-hero:not(.partners-hero) .about-hero__media picture { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: 100% !important; margin-top: 0 !important; margin-inline: auto !important; padding: 0 !important; } .our-vision-page #main-content > section.page-hero.vision-hero:not(.partners-hero) .about-hero__banner, .our-vision-page #main-content > section.page-hero.vision-hero:not(.partners-hero) picture img.about-hero__banner, .our-vision-page .page-hero.vision-hero:not(.partners-hero) .about-hero__banner, .our-vision-page .page-hero.vision-hero:not(.partners-hero) picture img.about-hero__banner { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; object-fit: contain !important; object-position: center center !important; transform: none !important; transform-origin: center center !important; } } /* Our Vision page ? equal vertical rhythm between stacked sections. Uses the site section spacing token; neutralizes stacked .section-padding + #main-content gap and checklist one-offs. */ .our-vision-page { --vision-block-gap: var(--section-pad-y); } .our-vision-page #main-content > section, .our-vision-page #main-content > section.page-hero, .our-vision-page #main-content > section.vision-hero, .our-vision-page #main-content > section.vision-hero-checklist, .our-vision-page #main-content > section.section-padding, .our-vision-page #main-content > section.vision-pillars, .our-vision-page #main-content > section.vision-roadmap, .our-vision-page #main-content > section.vision-moments, .our-vision-page #main-content > section.vision-partner, .our-vision-page #main-content > section.vision-together { margin-top: 0; margin-bottom: 0; padding-bottom: var(--vision-block-gap); } .our-vision-page #main-content > section.section-padding { padding-top: 0; } .our-vision-page #main-content > section.vision-hero-checklist { padding-top: 0; } @media (max-width: 767px) { .our-vision-page #main-content > section.vision-hero-checklist { padding-left: 20px; padding-right: 20px; padding-bottom: var(--vision-block-gap); } } /* Mobile/tablet hero — unified stack + left align (7 main pages, ≤1023px) */ @media (max-width: 1023px) { .page-hero.home-hero, .page-hero.about-hero, .page-hero.explore-hero, .page-hero.for-parents-hero, .page-hero.vision-hero, .page-hero.partners-hero, .page-hero.contact-hero { min-height: 0; height: auto; text-align: left; align-items: stretch; overflow: visible; } .page-hero.home-hero .page-hero__inner, .page-hero.about-hero .page-hero__inner, .page-hero.explore-hero .page-hero__inner, .page-hero.for-parents-hero .page-hero__inner, .page-hero.vision-hero .page-hero__inner, .page-hero.partners-hero .page-hero__inner, .page-hero.contact-hero .page-hero__inner { display: flex; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: var(--page-hero-mobile-stack-gap); row-gap: var(--page-hero-mobile-stack-gap); min-height: 0; width: 100%; } .page-hero.home-hero .page-hero__content, .page-hero.about-hero .page-hero__content, .page-hero.explore-hero .page-hero__content, .page-hero.for-parents-hero .page-hero__content, .page-hero.vision-hero .page-hero__content, .page-hero.partners-hero .page-hero__content, .page-hero.contact-hero .page-hero__content { display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: var(--page-hero-mobile-content-gap); order: 1; width: 100%; max-width: none; padding: 0; text-align: left; } .page-hero.home-hero .hero-label, .page-hero.about-hero .hero-label, .page-hero.explore-hero .hero-label, .page-hero.for-parents-hero .hero-label, .page-hero.vision-hero .hero-label, .page-hero.partners-hero .hero-label, .page-hero.contact-hero .hero-label, .page-hero.home-hero .hero-headline, .page-hero.about-hero .hero-headline, .page-hero.explore-hero .hero-headline, .page-hero.for-parents-hero .hero-headline, .page-hero.vision-hero .hero-headline, .page-hero.partners-hero .hero-headline, .page-hero.contact-hero .hero-headline, .page-hero.home-hero .hero-copy, .page-hero.about-hero .hero-copy, .page-hero.explore-hero .hero-copy, .page-hero.for-parents-hero .hero-copy, .page-hero.vision-hero .hero-copy, .page-hero.partners-hero .hero-copy, .page-hero.contact-hero .hero-copy, .page-hero.home-hero .page-hero__text { text-align: left; margin-inline: 0; max-width: none; } .page-hero.home-hero .hero-headline [class*='__title-line'], .page-hero.about-hero .hero-headline [class*='__title-line'], .page-hero.explore-hero .hero-headline [class*='__title-line'], .page-hero.for-parents-hero .hero-headline [class*='__title-line'], .page-hero.vision-hero .hero-headline [class*='__title-line'], .page-hero.partners-hero .hero-headline [class*='__title-line'], .page-hero.contact-hero .hero-headline [class*='__title-line'] { white-space: normal; text-align: left; } .page-hero.home-hero .home-hero__brand, .page-hero.home-hero .page-hero__actions, .page-hero.about-hero .page-hero__actions, .page-hero.explore-hero .page-hero__actions, .page-hero.explore-hero .explore-hero__heading-block, .page-hero.for-parents-hero .page-hero__actions, .page-hero.vision-hero .page-hero__actions, .page-hero.partners-hero .page-hero__actions, .page-hero.contact-hero .page-hero__actions { justify-content: flex-start; align-items: flex-start; align-self: stretch; width: 100%; max-width: none; margin-inline: 0; } .page-hero.home-hero .home-hero__logo { object-position: left center; } .page-hero.home-hero .about-hero__media, .page-hero.home-hero .hero-image-wrap, .page-hero.about-hero .about-hero__media, .page-hero.about-hero .hero-image-wrap, .page-hero.explore-hero .explore-hero__media, .page-hero.for-parents-hero .about-hero__media, .page-hero.for-parents-hero .hero-image-wrap, .page-hero.vision-hero .about-hero__media, .page-hero.vision-hero .hero-image-wrap, .page-hero.partners-hero .about-hero__media, .page-hero.partners-hero .hero-image-wrap, .page-hero.contact-hero .about-hero__media, .page-hero.contact-hero .hero-image-wrap { order: 2; display: flex; justify-content: flex-start; align-items: flex-start; width: 100%; max-width: 100%; min-height: 0; margin: 0; padding: 0; overflow: visible; } .page-hero.home-hero .about-hero__banner, .page-hero.about-hero .about-hero__banner, .page-hero.explore-hero .explore-hero__banner, .page-hero.for-parents-hero .about-hero__banner, .page-hero.vision-hero .about-hero__banner, .page-hero.partners-hero .about-hero__banner, .page-hero.contact-hero .about-hero__banner { display: block; width: 100%; height: auto; min-height: 0; max-height: var(--page-hero-mobile-image-max-h); object-fit: contain; object-position: center center; transform: none; } } /* Override shared compact mobile hero centering — 7 main pages stay left-aligned (≤767px) */ @media (max-width: 767px) { #main-content > section.page-hero.home-hero, #main-content > section.page-hero.about-hero, #main-content > section.page-hero.explore-hero, #main-content > section.page-hero.for-parents-hero, #main-content > section.page-hero.vision-hero, #main-content > section.page-hero.partners-hero, #main-content > section.page-hero.contact-hero { text-align: left !important; align-items: stretch !important; } .page-hero.home-hero .page-hero__inner, .page-hero.about-hero .page-hero__inner, .page-hero.explore-hero .page-hero__inner, .page-hero.for-parents-hero .page-hero__inner, .page-hero.vision-hero .page-hero__inner, .page-hero.partners-hero .page-hero__inner, .page-hero.contact-hero .page-hero__inner { align-items: stretch !important; gap: var(--page-hero-mobile-stack-gap) !important; row-gap: var(--page-hero-mobile-stack-gap) !important; } .page-hero.home-hero .page-hero__content, .page-hero.about-hero .page-hero__content, .page-hero.explore-hero .page-hero__content, .page-hero.for-parents-hero .page-hero__content, .page-hero.vision-hero .page-hero__content, .page-hero.partners-hero .page-hero__content, .page-hero.contact-hero .page-hero__content { align-items: flex-start !important; text-align: left !important; max-width: none !important; padding-inline: 0 !important; } .page-hero.home-hero .hero-label, .page-hero.about-hero .hero-label, .page-hero.explore-hero .hero-label, .page-hero.for-parents-hero .hero-label, .page-hero.vision-hero .hero-label, .page-hero.partners-hero .hero-label, .page-hero.contact-hero .hero-label, .page-hero.home-hero .hero-headline, .page-hero.about-hero .hero-headline, .page-hero.explore-hero .hero-headline, .page-hero.for-parents-hero .hero-headline, .page-hero.vision-hero .hero-headline, .page-hero.partners-hero .hero-headline, .page-hero.contact-hero .hero-headline, .page-hero.home-hero .hero-copy, .page-hero.about-hero .hero-copy, .page-hero.explore-hero .hero-copy, .page-hero.for-parents-hero .hero-copy, .page-hero.vision-hero .hero-copy, .page-hero.partners-hero .hero-copy, .page-hero.contact-hero .hero-copy, .page-hero.home-hero .page-hero__text, .page-hero:not(.home-hero) .hero-headline, .page-hero:not(.home-hero) h1, .page-hero:not(.home-hero) [class*='__title-line'], .page-hero:not(.home-hero) [class*='__title-row'], .page-hero .hero-copy, .page-hero .page-hero__text, .page-hero [class*='__copy'], .page-hero [class*='__text'] { text-align: left !important; margin-inline: 0 !important; max-width: none !important; justify-content: flex-start !important; } .page-hero.home-hero .home-hero__brand { justify-content: flex-start !important; } .page-hero.home-hero .hero-headline { font-size: clamp(2.7rem, 13vw, 3.35rem) !important; line-height: 0.9 !important; letter-spacing: -0.035em !important; } .page-hero.home-hero .home-hero__tagline { justify-content: flex-start !important; text-align: left !important; max-width: none !important; font-size: clamp(1.05rem, 4.2vw, 1.2rem) !important; margin: 0 0 0.75rem !important; } .page-hero.home-hero .page-hero__actions { flex-direction: column; align-items: stretch !important; align-self: stretch !important; width: 100% !important; gap: 0.75rem !important; } .page-hero.home-hero .page-hero__actions .btn { width: 100% !important; padding: 0.78rem clamp(0.65rem, 2.4vw, 1rem) !important; white-space: normal !important; text-align: center !important; justify-content: center !important; border-width: 2px !important; border-style: solid !important; box-shadow: none !important; } .page-hero.home-hero .page-hero__actions .btn--solid { background-color: var(--color-pink) !important; border-color: var(--color-pink) !important; color: #fff !important; } .page-hero.home-hero .page-hero__actions .btn--outline { background-color: transparent !important; border-color: var(--color-pink) !important; color: var(--color-pink) !important; } .page-hero.home-hero .page-hero__actions .btn--solid:hover { background-color: #d4186a !important; border-color: #d4186a !important; color: #fff !important; } .page-hero.home-hero .page-hero__actions .btn--outline:hover { background-color: var(--color-pink-soft) !important; border-color: var(--color-pink) !important; color: var(--color-pink) !important; } .page-hero.home-hero .page-hero__actions, .page-hero.about-hero .page-hero__actions, .page-hero.explore-hero .page-hero__actions, .page-hero.for-parents-hero .page-hero__actions, .page-hero.vision-hero .page-hero__actions, .page-hero.partners-hero .page-hero__actions, .page-hero.contact-hero .page-hero__actions, .page-hero .hero-ctas, .page-hero .page-hero__actions { align-items: stretch !important; justify-content: flex-start !important; max-width: none !important; margin-inline: 0 !important; } .page-hero.home-hero .about-hero__media, .page-hero.home-hero .hero-image-wrap, .page-hero.about-hero .about-hero__media, .page-hero.about-hero .hero-image-wrap, .page-hero.explore-hero .explore-hero__media, .page-hero.for-parents-hero .about-hero__media, .page-hero.for-parents-hero .hero-image-wrap, .page-hero.vision-hero .about-hero__media, .page-hero.vision-hero .hero-image-wrap, .page-hero.partners-hero .about-hero__media, .page-hero.partners-hero .hero-image-wrap, .page-hero.contact-hero .about-hero__media, .page-hero.contact-hero .hero-image-wrap { justify-content: flex-start !important; align-items: flex-start !important; margin-top: 0 !important; width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; } .page-hero.home-hero .about-hero__banner, .page-hero.about-hero .about-hero__banner, .page-hero.explore-hero .explore-hero__banner, .page-hero.for-parents-hero .about-hero__banner, .page-hero.vision-hero .about-hero__banner, .page-hero.partners-hero .about-hero__banner, .page-hero.contact-hero .about-hero__banner { max-height: var(--page-hero-mobile-image-max-h) !important; min-height: 0 !important; height: auto !important; margin-inline: 0 !important; object-position: center center !important; } #main-content > section.page-hero.home-hero .page-hero__inner, #main-content > section.page-hero.about-hero .page-hero__inner, #main-content > section.page-hero.explore-hero .page-hero__inner, #main-content > section.page-hero.for-parents-hero .page-hero__inner, #main-content > section.page-hero.vision-hero .page-hero__inner, #main-content > section.page-hero.partners-hero .page-hero__inner, #main-content > section.page-hero.contact-hero .page-hero__inner { gap: var(--page-hero-mobile-stack-gap) !important; row-gap: var(--page-hero-mobile-stack-gap) !important; } #main-content > section.page-hero.home-hero .page-hero__content, #main-content > section.page-hero.about-hero .page-hero__content, #main-content > section.page-hero.explore-hero .page-hero__content, #main-content > section.page-hero.for-parents-hero .page-hero__content, #main-content > section.page-hero.vision-hero .page-hero__content, #main-content > section.page-hero.partners-hero .page-hero__content, #main-content > section.page-hero.contact-hero .page-hero__content { padding-bottom: 0 !important; margin-bottom: 0 !important; text-align: left !important; } #main-content > section.page-hero.home-hero .page-hero__actions, #main-content > section.page-hero.about-hero .page-hero__actions, #main-content > section.page-hero.explore-hero .page-hero__actions, #main-content > section.page-hero.for-parents-hero .page-hero__actions, #main-content > section.page-hero.vision-hero .page-hero__actions, #main-content > section.page-hero.partners-hero .page-hero__actions, #main-content > section.page-hero.contact-hero .page-hero__actions { margin-bottom: 0 !important; } #main-content > section.page-hero.home-hero .about-hero__media, #main-content > section.page-hero.home-hero .hero-image-wrap, #main-content > section.page-hero.about-hero .about-hero__media, #main-content > section.page-hero.about-hero .hero-image-wrap, #main-content > section.page-hero.explore-hero .explore-hero__media, #main-content > section.page-hero.for-parents-hero .about-hero__media, #main-content > section.page-hero.for-parents-hero .hero-image-wrap, #main-content > section.page-hero.vision-hero .about-hero__media, #main-content > section.page-hero.vision-hero .hero-image-wrap, #main-content > section.page-hero.partners-hero .about-hero__media, #main-content > section.page-hero.partners-hero .hero-image-wrap, #main-content > section.page-hero.contact-hero .about-hero__media, #main-content > section.page-hero.contact-hero .hero-image-wrap { margin-top: 0 !important; padding-top: 0 !important; } } /* All page heroes — desktop layout (matches home hero, ≥1024px only) */ @media (min-width: 1024px) { #main-content > section.page-hero, .page-hero { min-height: 0 !important; height: auto; padding-top: 8px; padding-bottom: 0.75rem; overflow: visible; } .page-hero .page-hero__inner { display: flex !important; flex-direction: row; align-items: flex-end; justify-content: flex-start; gap: 0 !important; width: 100%; max-width: var(--container-max-width); min-height: 0 !important; margin-inline: auto; padding-left: var(--container-padding); padding-right: var(--container-padding); overflow: visible; } .page-hero .page-hero__content { flex: 0 0 auto !important; display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; width: auto !important; max-width: 520px !important; margin-inline: 0; margin-right: 0 !important; padding: 0; text-align: left; grid-column: auto !important; grid-row: auto !important; align-self: auto; } .page-hero .hero-label, .page-hero .hero-headline, .page-hero .hero-copy, .page-hero .home-hero__brand, .page-hero .page-hero__text, .page-hero .page-hero__actions, .page-hero .hero-ctas { text-align: left; align-self: flex-start; margin-left: 0; padding-left: 0; } .page-hero .hero-copy, .page-hero .page-hero__text { max-width: 30rem; } .page-hero .page-hero__actions, .page-hero .hero-ctas { display: flex; flex-direction: row; flex-wrap: nowrap; align-items: center; justify-content: flex-start; gap: 0.7rem; width: auto; max-width: none; } .page-hero .page-hero__actions .btn, .page-hero .hero-ctas .btn { width: auto; max-width: none; } .page-hero .home-hero__logo { object-position: left center; } .page-hero .home-hero__media, .page-hero .hero-image-wrap, .page-hero [class*='__media'] { flex: 1 1 0 !important; display: flex !important; align-items: flex-end !important; justify-content: flex-start !important; width: 100% !important; min-width: 0 !important; max-width: none !important; position: relative; overflow: hidden; margin: 0 !important; margin-left: 0 !important; padding: 0; grid-column: auto !important; grid-row: auto !important; align-self: auto; } .page-hero .home-hero__media .lazy-img-wrap, .page-hero .hero-image-wrap .lazy-img-wrap, .page-hero [class*='__media'] .lazy-img-wrap, .page-hero .hero-image-wrap picture { overflow: hidden; width: 100% !important; max-width: 100% !important; display: flex; align-items: flex-end; justify-content: flex-start; margin: 0; padding: 0; } .page-hero .home-hero__banner, .page-hero .about-hero__banner, .page-hero .explore-hero__banner, .page-hero .creative-makers-hero__banner, .page-hero [class*='-hero__banner'], .page-hero .hero-image-wrap img:not([class*='deco']) { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; min-height: 0 !important; object-fit: contain !important; object-position: left bottom !important; transform: none !important; margin: 0 !important; filter: none; background-color: transparent; } } /* Mobile/tablet reset — restore pre-desktop hero spacing on all pages (≤1023px) */ @media (max-width: 1023px) { #main-content > section.page-hero, .page-hero { min-height: 0 !important; height: auto !important; overflow: visible !important; } .page-hero .page-hero__inner { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; flex-wrap: nowrap !important; gap: var(--page-hero-mobile-stack-gap, 1.25rem) !important; row-gap: var(--page-hero-mobile-stack-gap, 1.25rem) !important; column-gap: 0 !important; min-height: 0 !important; width: 100% !important; max-width: var(--container-max-width) !important; margin-inline: auto !important; padding-left: var(--container-padding) !important; padding-right: var(--container-padding) !important; overflow: visible !important; grid-template-columns: none !important; } .page-hero .page-hero__content { flex: none !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; width: 100% !important; max-width: none !important; order: 1 !important; grid-column: auto !important; grid-row: auto !important; align-self: stretch !important; margin-inline: 0 !important; padding: 0 !important; text-align: left !important; } .page-hero .hero-image-wrap, .page-hero [class*='__media'], .page-hero .home-hero__media { flex: none !important; display: flex !important; align-items: flex-start !important; justify-content: flex-start !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; order: 2 !important; grid-column: auto !important; grid-row: auto !important; margin: 0 !important; margin-left: 0 !important; padding: 0 !important; overflow: visible !important; } .page-hero .hero-image-wrap .lazy-img-wrap, .page-hero [class*='__media'] .lazy-img-wrap, .page-hero .home-hero__media .lazy-img-wrap { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .page-hero .home-hero__banner, .page-hero .about-hero__banner, .page-hero .explore-hero__banner, .page-hero .creative-makers-hero__banner, .page-hero [class*='-hero__banner'], .page-hero .hero-image-wrap img:not([class*='deco']) { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: var(--page-hero-mobile-image-max-h, min(420px, 55vh)) !important; min-height: 0 !important; object-fit: contain !important; object-position: center center !important; transform: none !important; margin: 0 !important; filter: none !important; background-color: transparent !important; } .page-hero:not(.home-welcome-hero) .page-hero__actions, .page-hero:not(.home-welcome-hero) .hero-ctas { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; max-width: none !important; } .page-hero:not(.home-welcome-hero) .page-hero__actions .btn, .page-hero:not(.home-welcome-hero) .hero-ctas .btn { width: 100% !important; } } /* Phone — image below content/buttons, centered banner (≤767px) */ @media (max-width: 767px) { .page-hero .hero-image-wrap, .page-hero [class*='__media'], .page-hero .home-hero__media { order: 2 !important; justify-content: center !important; align-items: center !important; margin-top: 0 !important; } .page-hero .page-hero__content { order: 1 !important; } .page-hero .home-hero__banner, .page-hero .about-hero__banner, .page-hero .explore-hero__banner, .page-hero .creative-makers-hero__banner, .page-hero [class*='-hero__banner'], .page-hero .hero-image-wrap img:not([class*='deco']) { max-height: min(820px, 80vh) !important; object-position: center center !important; } .page-hero.explore-hero--full-banner .explore-hero__banner { width: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center center !important; } } /* Our Vision + For Parents — desktop: cropped banner, right flush (≥1024px) */ @media (min-width: 1024px) { .page-hero.vision-hero:not(.partners-hero) .page-hero__inner, .our-vision-page .page-hero.vision-hero:not(.partners-hero) .page-hero__inner, .for-parents-page .page-hero.for-parents-hero .page-hero__inner { display: grid !important; grid-template-columns: minmax(0, var(--vision-hero-content-col)) minmax(0, var(--vision-hero-media-col)) !important; gap: clamp(0.75rem, 1.35vw, 1.35rem) !important; column-gap: clamp(0.75rem, 1.35vw, 1.35rem) !important; align-items: center !important; justify-content: space-between !important; } .our-vision-page .page-hero.vision-hero:not(.partners-hero) .page-hero__inner { --vision-hero-content-col: 0.4fr; --vision-hero-media-col: 0.6fr; grid-template-columns: minmax(0, var(--vision-hero-content-col)) minmax(0, var(--vision-hero-media-col)) !important; } .for-parents-page .page-hero.for-parents-hero .page-hero__inner { --vision-hero-content-col: 0.4fr; --vision-hero-media-col: 0.6fr; grid-template-columns: minmax(0, var(--vision-hero-content-col)) minmax(0, var(--vision-hero-media-col)) !important; gap: 0 !important; column-gap: 0 !important; row-gap: 0 !important; } .page-hero.vision-hero:not(.partners-hero) .page-hero__content, .our-vision-page .page-hero.vision-hero:not(.partners-hero) .page-hero__content { width: 100% !important; max-width: 520px !important; margin-right: 0 !important; padding-right: 0 !important; justify-self: start !important; } .for-parents-page .page-hero.for-parents-hero .page-hero__content { width: 100% !important; max-width: 600px !important; margin-right: 0 !important; padding-right: 0 !important; justify-self: start !important; } .page-hero.vision-hero:not(.partners-hero) .about-hero__media, .page-hero.vision-hero:not(.partners-hero) .hero-image-wrap, .our-vision-page .page-hero.vision-hero:not(.partners-hero) .about-hero__media, .our-vision-page .page-hero.vision-hero:not(.partners-hero) .hero-image-wrap, .for-parents-page .page-hero.for-parents-hero .about-hero__media, .for-parents-page .page-hero.for-parents-hero .hero-image-wrap { min-width: 0 !important; width: 100% !important; max-width: 100% !important; justify-self: end !important; display: flex !important; justify-content: flex-end !important; align-items: center !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .page-hero.vision-hero:not(.partners-hero) .about-hero__media .lazy-img-wrap, .page-hero.vision-hero:not(.partners-hero) .about-hero__media picture, .page-hero.vision-hero:not(.partners-hero) .hero-image-wrap .lazy-img-wrap, .page-hero.vision-hero:not(.partners-hero) .hero-image-wrap picture, .our-vision-page .page-hero.vision-hero:not(.partners-hero) .about-hero__media .lazy-img-wrap, .our-vision-page .page-hero.vision-hero:not(.partners-hero) .about-hero__media picture, .our-vision-page .page-hero.vision-hero:not(.partners-hero) .hero-image-wrap .lazy-img-wrap, .our-vision-page .page-hero.vision-hero:not(.partners-hero) .hero-image-wrap picture, .for-parents-page .page-hero.for-parents-hero .about-hero__media .lazy-img-wrap, .for-parents-page .page-hero.for-parents-hero .about-hero__media picture, .for-parents-page .page-hero.for-parents-hero .hero-image-wrap .lazy-img-wrap, .for-parents-page .page-hero.for-parents-hero .hero-image-wrap picture { display: block !important; width: auto !important; max-width: 100% !important; margin-left: auto !important; margin-right: 0 !important; padding: 0 !important; overflow: visible !important; } .page-hero.vision-hero:not(.partners-hero) .about-hero__banner, .our-vision-page .page-hero.vision-hero:not(.partners-hero) .about-hero__banner, .our-vision-page .page-hero.vision-hero:not(.partners-hero) picture img.about-hero__banner { display: block !important; transform: none !important; transform-origin: center right !important; object-fit: contain !important; object-position: right center !important; width: auto !important; max-width: 100% !important; height: min(610px, 72vh) !important; max-height: min(610px, 72vh) !important; min-height: 0 !important; margin-left: auto !important; margin-right: 0 !important; filter: none !important; background: transparent !important; background-color: transparent !important; } .for-parents-page .page-hero.for-parents-hero .about-hero__banner, .for-parents-page .page-hero.for-parents-hero picture img.about-hero__banner { display: block !important; transform: none !important; transform-origin: center right !important; object-fit: contain !important; object-position: right center !important; width: auto !important; max-width: 100% !important; height: auto !important; max-height: none !important; min-height: 0 !important; margin-left: auto !important; margin-right: 0 !important; filter: none !important; background: transparent !important; background-color: transparent !important; } .for-parents-page .page-hero.for-parents-hero img.lazy-img.about-hero__banner { width: auto !important; max-width: 100% !important; transform: none !important; } } /* Home pillars — 20px top space below hero (desktop/tablet) */ #main-content > section.home-hero + section.home-pillars { padding-top: 20px; } @media (max-width: 767px) { .home-page #main-content > section.home-hero + section.home-pillars { padding-top: 0 !important; } } /* Mobile/tablet — hero image always below content + buttons (all pages, ≤1023px) */ @media (max-width: 1023px) { .page-hero .page-hero__inner { display: flex !important; flex-direction: column !important; } .page-hero .page-hero__content { order: 1 !important; } .page-hero .hero-image-wrap, .page-hero .home-hero__media, .page-hero [class*='-hero__media'], .page-hero .about-hero__media, .page-hero .creative-makers-hero__media { order: 2 !important; } } /* About page — mobile: hide decorative icons below heading (≤767px) */ @media (max-width: 767px) { .page-hero.about-hero .about-hero__deco { display: none !important; } .page-hero.about-hero:has(.about-hero__deco), .page-hero.about-hero .page-hero__content:has(.about-hero__deco) { overflow: visible !important; } } /* Creative Makers — desktop: remove star near buttons (≥1024px) */ @media (min-width: 1024px) { .creative-makers-page .page-hero.creative-makers-hero .creative-makers-hero__deco--star, .page-hero.creative-makers-hero .creative-makers-hero__deco--star { display: none !important; } .creative-makers-page .page-hero.creative-makers-hero .hero-image-wrap, .creative-makers-page .page-hero.creative-makers-hero .creative-makers-hero__media, .page-hero.creative-makers-hero .hero-image-wrap, .page-hero.creative-makers-hero .creative-makers-hero__media { justify-content: flex-end !important; align-items: flex-end !important; overflow: hidden !important; } .creative-makers-page .page-hero.creative-makers-hero .hero-image-wrap .lazy-img-wrap, .creative-makers-page .page-hero.creative-makers-hero .creative-makers-hero__media .lazy-img-wrap, .page-hero.creative-makers-hero .hero-image-wrap .lazy-img-wrap, .page-hero.creative-makers-hero .creative-makers-hero__media .lazy-img-wrap { justify-content: flex-end !important; align-items: flex-end !important; } .creative-makers-page .page-hero.creative-makers-hero .creative-makers-hero__banner, .creative-makers-page .page-hero.creative-makers-hero picture img.creative-makers-hero__banner, .page-hero.creative-makers-hero .creative-makers-hero__banner, .page-hero.creative-makers-hero picture img.creative-makers-hero__banner { object-position: right bottom !important; } } /* Explore hero — mobile/tablet: 0px top spacing on banner image (≤1023px) */ @media (max-width: 1023px) { #main-content > section.page-hero.explore-hero .page-hero__inner, .page-hero.explore-hero .page-hero__inner { gap: 0 !important; row-gap: 0 !important; } #main-content > section.page-hero.explore-hero .page-hero__content, .page-hero.explore-hero .page-hero__content { padding-bottom: 0 !important; margin-bottom: 0 !important; } #main-content > section.page-hero.explore-hero .page-hero__actions, #main-content > section.page-hero.explore-hero .hero-ctas, .page-hero.explore-hero .page-hero__actions, .page-hero.explore-hero .hero-ctas { margin-bottom: 0 !important; } #main-content > section.page-hero.explore-hero .explore-hero__media, #main-content > section.page-hero.explore-hero .hero-image-wrap, #main-content > section.page-hero.explore-hero .explore-hero__media .lazy-img-wrap, #main-content > section.page-hero.explore-hero .explore-hero__media picture, .page-hero.explore-hero .explore-hero__media, .page-hero.explore-hero .hero-image-wrap, .page-hero.explore-hero .explore-hero__media .lazy-img-wrap, .page-hero.explore-hero .explore-hero__media picture { margin-top: 0 !important; padding-top: 0 !important; } } /* About — mobile hero: label → headline → copy → banner → CTAs (≤768px) */ @media (max-width: 768px) { .about-page #main-content > section.page-hero.about-hero, #main-content > section.page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero), .page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) { padding: 0 0 24px !important; margin-top: 0 !important; text-align: left !important; align-items: stretch !important; } .about-page #main-content > section.about-hero, .about-page #main-content > section.page-hero.about-hero, #main-content > section.page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) { padding-top: 0 !important; } .about-page #main-content > section.page-hero.about-hero .page-hero__inner, #main-content > section.page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .page-hero__inner, .page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .page-hero__inner { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 1rem !important; row-gap: 1rem !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } .about-page .page-hero.about-hero .about-hero__media, #main-content > section.page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .about-hero__media, .page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .about-hero__media { order: 5 !important; display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 var(--container-padding) !important; overflow: visible !important; background-color: #fff !important; } .about-page .page-hero.about-hero .about-hero__media .lazy-img-wrap, #main-content > section.page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .about-hero__media .lazy-img-wrap, .page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .about-hero__media .lazy-img-wrap, .about-page .page-hero.about-hero .about-hero__media picture, #main-content > section.page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .about-hero__media picture { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; box-sizing: border-box !important; background-color: #fff !important; } .about-page .page-hero.about-hero .about-hero__banner, #main-content > section.page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .about-hero__banner, .page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .about-hero__banner { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; object-fit: contain !important; object-position: center center !important; background-color: #fff !important; filter: none !important; } /* Home hero (shared About mobile layout): logo block only */ .page-hero.home-welcome-hero .home-hero__brand { display: flex !important; justify-content: flex-start !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; } .page-hero.home-welcome-hero .home-hero__logo { display: block !important; width: min(100%, var(--home-hero-logo-width, 320px)) !important; max-width: 100% !important; height: auto !important; object-fit: contain !important; object-position: left center !important; margin: 0 !important; } .about-page .page-hero.about-hero .page-hero__content, #main-content > section.page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .page-hero__content, .page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .page-hero__content { display: contents !important; } .about-page .page-hero.about-hero .hero-label, #main-content > section.page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .hero-label, .page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .hero-label { order: 1 !important; box-sizing: border-box !important; width: 100% !important; padding: 0 var(--container-padding) !important; display: inline-block !important; text-align: left !important; margin: 0 !important; } .about-page .page-hero.about-hero .hero-label::after, #main-content > section.page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .hero-label::after, .page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .hero-label::after { margin: 6px 0 0 !important; } .about-page .page-hero.about-hero .hero-headline, #main-content > section.page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .hero-headline, .page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .hero-headline { order: 2 !important; box-sizing: border-box !important; width: 100% !important; padding: 0 var(--container-padding) !important; text-align: left !important; max-width: 100% !important; margin: 0 !important; } .about-page .page-hero.about-hero .hero-headline .about-hero__title-line--navy, .about-page .page-hero.about-hero .hero-headline .about-hero__title-line--pink, #main-content > section.page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .hero-headline .about-hero__title-line--navy, #main-content > section.page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .hero-headline .about-hero__title-line--pink { display: block !important; text-align: left !important; white-space: normal !important; } .about-page .page-hero.about-hero .hero-copy, #main-content > section.page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .hero-copy, .page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .hero-copy { order: 3 !important; box-sizing: border-box !important; width: 100% !important; padding: 0 var(--container-padding) !important; text-align: left !important; max-width: 100% !important; margin: 0 !important; } .about-page .page-hero.about-hero .page-hero__actions, #main-content > section.page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .page-hero__actions, .page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .page-hero__actions { order: 6 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 var(--container-padding) !important; gap: 8px !important; } .about-page .page-hero.about-hero .page-hero__actions .btn, #main-content > section.page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .page-hero__actions .btn, .page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .page-hero__actions .btn { width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; justify-content: center !important; } .about-page .page-hero.about-hero .about-hero__deco, #main-content > section.page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .about-hero__deco, .page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .about-hero__deco { display: none !important; } /* Our Story — mobile reference card */ .about-page .our-story { padding-top: 0; } .about-page .our-story .site-container { padding-left: 20px !important; padding-right: 20px !important; } .about-page .our-story__card { border-radius: 20px; --our-story-card-pad-top: 1rem; --our-story-card-pad-bottom: 1rem; --our-story-card-pad-left: 1rem; --our-story-card-pad-right: 1rem; } .about-page .our-story__inner { flex-direction: column !important; align-items: stretch !important; gap: 1rem !important; } .about-page .our-story__media { flex: none !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; display: block !important; } .about-page .our-story__photo-wrap { display: block !important; width: 100% !important; max-width: 100% !important; } .about-page .our-story__photo { width: 100% !important; max-width: 100% !important; height: auto !important; object-fit: contain !important; } .about-page .our-story__content { width: 100% !important; text-align: left !important; } .about-page .our-story__aside { display: none !important; } } /* About — Our Story photo: full-width stack on tablet */ @media (min-width: 768px) and (max-width: 991px) { .about-page .our-story__inner { flex-direction: column !important; align-items: stretch !important; gap: 1.25rem !important; } .about-page .our-story__media { flex: none !important; width: 100% !important; max-width: min(420px, 100%) !important; margin-inline: auto !important; } .about-page .our-story__photo { width: 100% !important; max-width: 100% !important; height: auto !important; object-fit: contain !important; } .about-page .our-story__aside { display: none !important; } } @media (max-width: 430px) { #main-content > section.page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .about-hero__media, .about-page #main-content > section.page-hero.about-hero .about-hero__media { width: 100% !important; max-width: none !important; margin: 0 !important; order: 5 !important; padding: 0 var(--container-padding) !important; background-color: #fff !important; } #main-content > section.page-hero.about-hero:not(.contact-hero):not(.vision-hero):not(.for-parents-hero):not(.get-involved-hero):not(.partners-hero):not(.apply-hero) .about-hero__banner, .about-page #main-content > section.page-hero.about-hero .about-hero__banner { width: 100% !important; max-width: none !important; border-radius: 0 !important; object-fit: contain !important; object-position: center top !important; margin-inline: auto !important; background-color: #fff !important; } } /* About page — We Believe: 3-column grid on mobile (replaces slider) */ @media (max-width: 991px) { .about-page .we-believe__row, .about-page .we-believe__row.bdc-mobile-carousel-parent { display: block !important; width: 100% !important; max-width: 100% !important; } .about-page .we-believe__slider, .about-page .we-believe__slider.bdc-mobile-carousel, .about-page .we-believe__slider.bdc-mobile-carousel--peek, .about-page .we-believe__slider.bdc-mobile-carousel--peek-2 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-rows: auto !important; align-items: stretch !important; gap: clamp(0.45rem, 2vw, 0.65rem) !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; margin-inline: 0 !important; padding: 0 !important; padding-inline: 0 !important; overflow: visible !important; overflow-x: visible !important; scroll-snap-type: none !important; flex-wrap: unset !important; } .about-page .we-believe__slider .believe-card, .about-page .we-believe__slider .believe-card.bdc-mobile-carousel__item { flex: unset !important; width: auto !important; max-width: none !important; min-width: 0 !important; scroll-snap-align: unset !important; padding: clamp(0.65rem, 2.5vw, 0.85rem) clamp(0.3rem, 1.2vw, 0.45rem) !important; gap: 0.4rem !important; border-radius: 12px !important; box-shadow: none !important; } .about-page .we-believe__slider .believe-card__icon { width: auto !important; height: clamp(34px, 9vw, 46px) !important; flex: 0 0 clamp(34px, 9vw, 46px) !important; max-width: 100% !important; } .about-page .we-believe__slider .believe-card__text { font-size: clamp(0.6rem, 2.3vw, 0.72rem) !important; line-height: 1.28 !important; --believe-text-max-width: 100% !important; max-width: 100% !important; min-height: calc(1.28em * 3) !important; } .about-page .we-believe__row > .bdc-carousel-dots { display: none !important; } } /* Home page — mobile: unified 20px left/right alignment (hero image → footer) */ @media (max-width: 768px) { .home-page { --container-padding: 20px; } .home-page .site-header .site-container { padding-left: var(--container-padding) !important; padding-right: var(--container-padding) !important; } .home-page #main-content > section.page-hero.home-hero .site-container.page-hero__inner, .home-page #main-content > section.page-hero.home-hero .page-hero__inner { padding-left: 0 !important; padding-right: 0 !important; } .home-page #main-content > section:not(.page-hero) .site-container, .home-page .site-footer__main > .site-container, .home-page .site-footer__legal-inner.site-container { padding-left: 20px !important; padding-right: 20px !important; } .home-page .home-pillars__row, .home-page .home-different__grid, .home-page .home-explore__grid, .home-page .home-reality__steps { margin-inline: 0 !important; padding-inline: 0 !important; } .home-page .home-reality__inner { padding-inline: 0 !important; } .home-page .home-reality__title { padding-inline: 0 !important; } .home-page #main-content .bdc-mobile-carousel--peek:not(.bdc-mobile-carousel--inset):not(.bdc-mobile-carousel--solo) { width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; padding-inline: 0 !important; scroll-padding-inline: 0 !important; } .home-page .page-hero__content { text-align: left !important; } .home-page .page-hero__text { margin-inline: 0 !important; } .home-page .home-hero__tagline, .home-page .page-hero__actions { justify-content: flex-start !important; } } /* Home hero — tablet/mobile: logo + description same width (≤1023px) */ @media (max-width: 1023px) { .page-hero.home-hero .home-hero__intro { display: flex; flex-direction: column; align-items: stretch; width: 100%; max-width: 100%; gap: 0.85rem; } .page-hero.home-hero .home-hero__intro .home-hero__brand, .page-hero.home-hero .home-hero__intro .home-hero__brand picture { width: 100%; max-width: 100%; } .page-hero.home-hero .home-hero__logo { --home-hero-logo-width: 100%; width: 100% !important; max-width: 100% !important; height: auto !important; display: block; } .page-hero.home-hero .home-hero__intro .page-hero__text, .page-hero.home-hero .page-hero__text { width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; box-sizing: border-box; } } /* Home page — What Makes Bright Dreamers Different: 3-column grid on mobile (replaces slider) */ @media (max-width: 991px) { .home-page .home-different__grid, .home-page .home-different__grid.bdc-mobile-carousel, .home-page .home-different__grid.bdc-mobile-carousel--peek, .home-page .home-different__grid.bdc-mobile-carousel--peek-2 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-rows: auto !important; align-items: stretch !important; gap: clamp(0.65rem, 2.5vw, 0.85rem) clamp(0.35rem, 1.5vw, 0.5rem) !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; margin-inline: 0 !important; padding: 0 !important; padding-inline: 0 !important; overflow: visible !important; overflow-x: visible !important; scroll-snap-type: none !important; flex-wrap: unset !important; } .home-page .home-different__grid .home-different__item, .home-page .home-different__grid .home-different__item.bdc-mobile-carousel__item { flex: unset !important; width: auto !important; max-width: none !important; min-width: 0 !important; scroll-snap-align: unset !important; padding: clamp(0.35rem, 1.5vw, 0.55rem) clamp(0.2rem, 1vw, 0.35rem) !important; gap: clamp(0.35rem, 1.5vw, 0.5rem) !important; box-sizing: border-box !important; border-left: none !important; } .home-page .home-different__grid .home-different__item:not(:nth-child(3n + 1)) { border-left: 1px solid var(--home-different-divider) !important; } .home-page .home-different__grid .home-different__icon-wrap { width: auto !important; height: auto !important; min-width: 0 !important; min-height: 0 !important; } .home-page .home-different__grid .home-different__icon { width: clamp(36px, 10vw, 48px) !important; height: clamp(36px, 10vw, 48px) !important; max-width: 100% !important; } .home-page .home-different__grid .home-different__name { font-size: clamp(0.82rem, 2.6vw, 0.95rem) !important; line-height: 1.25 !important; margin-bottom: 0.15rem !important; } .home-page .home-different__grid .home-different__text { font-size: clamp(0.68rem, 2.1vw, 0.78rem) !important; line-height: 1.35 !important; max-width: 100% !important; } .home-page .home-different .bdc-carousel-dots { display: none !important; } } /* Home page — How Ideas Become Reality: 3-column grid on mobile (replaces slider) */ @media (max-width: 991px) { .home-page .home-reality__inner { padding-inline: clamp(0.5rem, 2vw, 0.85rem) !important; } .home-page .home-reality__steps, .home-page .home-reality__steps.bdc-mobile-carousel, .home-page .home-reality__steps.bdc-mobile-carousel--peek, .home-page .home-reality__steps.bdc-mobile-carousel--peek-2 { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)) !important; grid-auto-rows: auto !important; align-items: start !important; gap: clamp(0.75rem, 2.5vw, 1rem) clamp(0.25rem, 1.2vw, 0.45rem) !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; margin-inline: 0 !important; padding: 0 !important; padding-inline: 0 !important; overflow: visible !important; overflow-x: visible !important; scroll-snap-type: none !important; flex-wrap: unset !important; } .home-page .home-reality__steps .home-reality-step, .home-page .home-reality__steps .home-reality-step.bdc-mobile-carousel__item { flex: unset !important; width: auto !important; max-width: none !important; min-width: 0 !important; scroll-snap-align: unset !important; padding: clamp(0.25rem, 1vw, 0.4rem) clamp(0.15rem, 0.8vw, 0.3rem) !important; gap: clamp(0.3rem, 1.2vw, 0.45rem) !important; box-sizing: border-box !important; } .home-page .home-reality__steps .home-reality-step__arrow { display: none !important; } .home-page .home-reality__steps .home-reality-step__icon-wrap { width: clamp(52px, 15vw, 68px) !important; height: clamp(52px, 15vw, 68px) !important; min-width: 0 !important; min-height: 0 !important; flex-shrink: 0 !important; } .home-page .home-reality__steps .home-reality-step__icon { width: 100% !important; height: 100% !important; max-width: 100% !important; max-height: 100% !important; } .home-page .home-reality__steps .home-reality-step__title { font-size: clamp(0.78rem, 2.4vw, 0.92rem) !important; line-height: 1.2 !important; } .home-page .home-reality__steps .home-reality-step__text { font-size: clamp(0.65rem, 2vw, 0.76rem) !important; line-height: 1.35 !important; max-width: 100% !important; } .home-page .home-reality .bdc-carousel-dots { display: none !important; } } /* Home page — pillars: stacked cards on mobile (replaces slider) */ @media (max-width: 991px) { .home-page .home-pillars__row, .home-page .home-pillars__row.bdc-mobile-carousel, .home-page .home-pillars__row.bdc-mobile-carousel--full, .home-page .home-pillars__row.bdc-mobile-carousel--peek, .home-page .home-pillars__row.bdc-mobile-carousel--peek-2 { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: clamp(0.75rem, 2.5vw, 1rem) !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; margin-inline: 0 !important; padding: 0 !important; padding-inline: 0 !important; overflow: visible !important; overflow-x: visible !important; scroll-snap-type: none !important; flex-wrap: unset !important; } .home-page .home-pillars__row .home-pillar, .home-page .home-pillars__row .home-pillar.bdc-mobile-carousel__item { flex: 1 1 auto !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; scroll-snap-align: unset !important; box-sizing: border-box !important; } .home-page .home-pillars__row .home-pillar__inner { align-items: center !important; } .home-page .home-pillars .bdc-carousel-dots { display: none !important; } } /* Home page — Explore Experiences heading left-aligned on mobile */ @media (max-width: 991px) { .home-page .home-explore__title { justify-content: flex-start !important; text-align: left !important; } } /* About page — banner section: 100% reference layout on mobile (≤767px) */ @media (max-width: 767px) { .about-page #main-content > section.page-hero.about-hero, .about-page .page-hero.about-hero { padding: 0 0 24px !important; margin-top: 0 !important; text-align: left !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; background-color: #fff !important; } .about-page #main-content > section.page-hero.about-hero, .about-page #main-content > section.about-hero.page-hero { padding-top: 0 !important; } .about-page .page-hero.about-hero > .site-container.page-hero__inner, .about-page .page-hero.about-hero .page-hero__inner { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 1rem !important; row-gap: 1rem !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } .about-page .page-hero.about-hero .about-hero__media, .about-page .page-hero.about-hero .hero-image-wrap { order: 5 !important; display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: none !important; margin: 0 !important; margin-top: 0 !important; padding: 0 var(--container-padding) !important; overflow: visible !important; background: #fff !important; background-color: #fff !important; } .about-page .page-hero.about-hero .about-hero__media .lazy-img-wrap, .about-page .page-hero.about-hero .about-hero__media picture { display: block !important; width: 100% !important; max-width: none !important; margin: 0 auto !important; padding: 0 !important; overflow: visible !important; background: #fff !important; background-color: #fff !important; text-align: center !important; } .about-page .page-hero.about-hero .about-hero__banner { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important; min-height: 0 !important; margin: 0 auto !important; padding: 0 !important; border-radius: 0 !important; object-fit: contain !important; object-position: center top !important; background: #fff !important; background-color: #fff !important; filter: none !important; } .about-page .page-hero.about-hero .page-hero__content { display: contents !important; } .about-page .page-hero.about-hero .about-hero__deco { display: none !important; } .about-page .page-hero.about-hero .hero-label { display: inline-block !important; margin: 0 !important; padding: 0 !important; font-family: var(--font-body) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; line-height: 1.3 !important; text-transform: uppercase !important; text-align: left !important; color: var(--color-pink) !important; } .about-page .page-hero.about-hero .hero-label::before { content: none !important; } .about-page .page-hero.about-hero .hero-label::after { display: none !important; content: none !important; } .about-page .page-hero.about-hero .hero-headline { font-family: var(--font-heading) !important; font-size: clamp(28px, 7.5vw, 32px) !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; text-align: left !important; max-width: 100% !important; width: 100% !important; margin: 0 !important; color: var(--color-navy) !important; } .about-page .page-hero.about-hero .hero-headline .about-hero__title-line--navy, .about-page .page-hero.about-hero .hero-headline .about-hero__title-line--pink { display: block !important; text-align: left !important; white-space: normal !important; margin: 0 !important; } .about-page .page-hero.about-hero .hero-headline .about-hero__title-line--navy { color: var(--color-navy) !important; margin-bottom: 0.15rem !important; } .about-page .page-hero.about-hero .hero-headline .about-hero__title-line--pink { color: var(--color-pink) !important; } .about-page .page-hero.about-hero .hero-copy { font-family: var(--font-body) !important; font-size: clamp(0.88rem, 2.6vw, 1rem) !important; font-weight: 400 !important; line-height: 1.55 !important; color: var(--color-navy) !important; text-align: left !important; max-width: 100% !important; width: 100% !important; margin: 0 !important; } .about-page .page-hero.about-hero .page-hero__actions, .about-page .page-hero.about-hero .hero-ctas { order: 6 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 var(--container-padding) !important; gap: 8px !important; } .about-page .page-hero.about-hero .page-hero__actions .btn, .about-page .page-hero.about-hero .hero-ctas .btn { width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; justify-content: center !important; } .about-page .page-hero.about-hero .page-hero__actions .btn--solid { white-space: nowrap; font-size: clamp(0.72rem, 2.8vw, 0.875rem); } .about-page .page-hero.about-hero .page-hero__actions .btn--solid::after { content: '→'; margin-left: 0.35em; font-weight: 400; } .about-page .page-hero.about-hero .hero-label { order: 1 !important; box-sizing: border-box !important; width: 100% !important; padding: 0 var(--container-padding) !important; } .about-page .page-hero.about-hero .hero-headline { order: 2 !important; box-sizing: border-box !important; width: 100% !important; padding: 0 var(--container-padding) !important; } .about-page .page-hero.about-hero .hero-copy { order: 3 !important; box-sizing: border-box !important; width: 100% !important; padding: 0 var(--container-padding) !important; } .about-page #main-content > section.page-hero.about-hero, .about-page .page-hero.about-hero { text-align: left !important; align-items: stretch !important; padding-left: 0 !important; padding-right: 0 !important; } .about-page .page-hero.about-hero .page-hero__inner { gap: 1rem !important; row-gap: 1rem !important; } } /* About page — Our Role: single row on mobile/tablet (replaces slider) */ @media (max-width: 991px) { .about-page .panel-card--role { overflow: visible !important; } .about-page .panel-card--role .panel-card__content, .about-page .panel-card--role .panel-card__content--full { overflow: visible !important; } .about-page .role-icons, .about-page .role-icons.bdc-mobile-carousel, .about-page .role-icons.bdc-mobile-carousel--peek, .about-page .role-icons.bdc-mobile-carousel--peek-2 { display: flex !important; flex-wrap: nowrap !important; align-items: flex-start !important; justify-content: space-between !important; gap: clamp(0.15rem, 1.2vw, 0.4rem) !important; width: 100% !important; max-width: 100% !important; margin: 0 0 clamp(0.85rem, 2vw, 1.15rem) !important; margin-inline: 0 !important; padding: 0 !important; padding-inline: 0 !important; overflow: visible !important; overflow-x: visible !important; scroll-snap-type: none !important; touch-action: auto !important; } .about-page .role-icons .role-icons__item, .about-page .role-icons .role-icons__item.bdc-mobile-carousel__item { flex: 1 1 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; width: auto !important; max-width: none !important; min-width: 0 !important; scroll-snap-align: unset !important; padding: 0 !important; gap: 0.35rem !important; text-align: center !important; box-sizing: border-box !important; border-left: none !important; } .about-page .role-icons .role-icons__img { width: clamp(28px, 7.5vw, 44px) !important; height: clamp(28px, 7.5vw, 44px) !important; max-width: 100% !important; object-fit: contain !important; } .about-page .role-icons .role-icons__label { font-size: clamp(0.62rem, 2.1vw, 0.78rem) !important; font-weight: 600 !important; line-height: 1.2 !important; color: var(--color-navy) !important; max-width: 100% !important; overflow-wrap: anywhere !important; word-break: normal !important; } .about-page .panel-card--role .bdc-carousel-dots, .about-page .panel-card--role .bdc-mobile-carousel-parent > .bdc-carousel-dots { display: none !important; } } /* About page — Our Approach: single row on mobile/tablet (replaces slider) */ @media (max-width: 991px) { .about-page .panel-card--approach { overflow: visible !important; } .about-page .panel-card--approach .panel-card__content, .about-page .panel-card--approach .panel-card__content--full { overflow: visible !important; } .about-page .approach-steps, .about-page .approach-steps.bdc-mobile-carousel, .about-page .approach-steps.bdc-mobile-carousel--peek, .about-page .approach-steps.bdc-mobile-carousel--peek-2 { display: flex !important; flex-wrap: nowrap !important; align-items: flex-start !important; justify-content: space-between !important; gap: clamp(0.1rem, 0.8vw, 0.25rem) !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; margin-top: var(--approach-steps-offset-top) !important; margin-inline: 0 !important; padding: 0 !important; padding-inline: 0 !important; overflow: visible !important; overflow-x: visible !important; scroll-snap-type: none !important; touch-action: auto !important; } .about-page .approach-steps .approach-step, .about-page .approach-steps .approach-step.bdc-mobile-carousel__item { flex: 1 1 0 !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; width: auto !important; max-width: none !important; min-width: 0 !important; scroll-snap-align: unset !important; padding: 0 !important; gap: clamp(0.25rem, 1vw, 0.35rem) !important; text-align: center !important; box-sizing: border-box !important; } .about-page .approach-steps .approach-step__arrow { display: none !important; } .about-page .approach-steps .approach-step__icon { width: clamp(28px, 7.5vw, 44px) !important; height: clamp(28px, 7.5vw, 44px) !important; max-width: 100% !important; object-fit: contain !important; } .about-page .approach-steps .approach-step__title { font-size: clamp(0.62rem, 2.1vw, 0.78rem) !important; font-weight: 700 !important; line-height: 1.2 !important; color: var(--color-navy) !important; margin: 0 !important; } .about-page .approach-steps .approach-step__text { font-size: clamp(0.56rem, 1.75vw, 0.68rem) !important; font-weight: 400 !important; line-height: 1.3 !important; color: var(--color-navy) !important; max-width: 100% !important; min-height: calc(1.3em * 2) !important; margin: 0 !important; overflow-wrap: anywhere !important; word-break: normal !important; } .about-page .panel-card--approach .bdc-carousel-dots, .about-page .panel-card--approach .bdc-mobile-carousel-parent > .bdc-carousel-dots { display: none !important; } } /* Explore page — banner section: same mobile layout as About page (≤767px) */ @media (max-width: 767px) { .explore-page #main-content > section.page-hero.explore-hero, .explore-page .page-hero.explore-hero { padding: 0 0 24px !important; margin-top: 0 !important; text-align: left !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; background-color: #fff !important; } .explore-page #main-content > section.page-hero.explore-hero, .explore-page #main-content > section.explore-hero.page-hero { padding-top: 0 !important; } .explore-page .page-hero.explore-hero > .site-container.page-hero__inner, .explore-page .page-hero.explore-hero .page-hero__inner { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 1rem !important; row-gap: 1rem !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } .explore-page .page-hero.explore-hero .explore-hero__media, .explore-page .page-hero.explore-hero .hero-image-wrap { order: -1 !important; display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: none !important; margin: 0 !important; margin-top: 0 !important; padding: 0 var(--container-padding) !important; overflow: visible !important; background: #fff !important; background-color: #fff !important; } .explore-page .page-hero.explore-hero .explore-hero__media .lazy-img-wrap, .explore-page .page-hero.explore-hero .explore-hero__media picture { display: block !important; width: 100% !important; max-width: none !important; margin: 0 auto !important; padding: 0 !important; overflow: visible !important; background: #fff !important; background-color: #fff !important; text-align: center !important; } .explore-page .page-hero.explore-hero .explore-hero__banner { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important; min-height: 0 !important; margin: 0 auto !important; padding: 0 !important; border-radius: 0 0 clamp(14px, 4vw, 20px) clamp(14px, 4vw, 20px) !important; object-fit: cover !important; object-position: center center !important; background: #fff !important; background-color: #fff !important; filter: none !important; } .explore-page .page-hero.explore-hero.explore-hero--full-banner { padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; } .explore-page .page-hero.explore-hero.explore-hero--full-banner .explore-hero__banner-wrap, .explore-page .page-hero.explore-hero.explore-hero--full-banner picture { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } .explore-page .page-hero.explore-hero.explore-hero--full-banner .explore-hero__banner { width: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; border-radius: 0 !important; } .explore-page .page-hero.explore-hero .page-hero__content { order: 1 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 0.85rem !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 var(--container-padding) !important; text-align: left !important; overflow: visible !important; position: static !important; } .explore-page .page-hero.explore-hero .explore-hero__deco, .explore-page .page-hero.explore-hero .explore-hero__tags-wrap, .explore-page .page-hero.explore-hero .explore-hero__heading-block { display: none !important; } .explore-page .page-hero.explore-hero .hero-label { display: inline-block !important; margin: 0 !important; padding: 0 !important; font-family: var(--font-body) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; line-height: 1.3 !important; text-transform: uppercase !important; text-align: left !important; color: var(--color-pink) !important; } .explore-page .page-hero.explore-hero .hero-label::before { content: '^ ' !important; } .explore-page .page-hero.explore-hero .hero-label::after { display: none !important; content: none !important; } .explore-page .page-hero.explore-hero .hero-headline { font-family: var(--font-heading) !important; font-size: clamp(1.65rem, 7vw, 2rem) !important; font-weight: 700 !important; line-height: 1.2 !important; letter-spacing: -0.02em !important; text-align: left !important; max-width: 100% !important; width: 100% !important; margin: 0 !important; color: var(--color-navy) !important; } .explore-page .page-hero.explore-hero .hero-headline .explore-hero__title-line--navy { display: inline !important; text-align: left !important; white-space: normal !important; margin: 0 !important; color: var(--color-navy) !important; } .explore-page .page-hero.explore-hero .hero-headline .explore-hero__title-line--navy + .explore-hero__title-line--navy::before { content: ' ' !important; } .explore-page .page-hero.explore-hero .hero-headline .explore-hero__title-line--pink { display: block !important; text-align: left !important; white-space: normal !important; margin: 0.15rem 0 0 !important; color: var(--color-pink) !important; } .explore-page .page-hero.explore-hero .hero-copy { font-family: var(--font-body) !important; font-size: clamp(0.88rem, 2.6vw, 1rem) !important; font-weight: 400 !important; line-height: 1.55 !important; color: var(--color-navy) !important; text-align: left !important; max-width: 100% !important; width: 100% !important; margin: 0 !important; } .explore-page .page-hero.explore-hero .page-hero__actions, .explore-page .page-hero.explore-hero .hero-ctas { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; gap: 8px !important; } .explore-page .page-hero.explore-hero .page-hero__actions .btn, .explore-page .page-hero.explore-hero .hero-ctas .btn { width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; justify-content: center !important; } } /* Explore page — Ways / Skills / Grow carousels: left/right arrows (reference layout) */ @media (max-width: 991px) { .explore-ways .site-container.bdc-mobile-carousel-parent, .explore-ways .site-container.bdc-mobile-carousel-host, .explore-skills .site-container.bdc-mobile-carousel-parent, .explore-skills .site-container.bdc-mobile-carousel-host, .explore-grow .site-container.bdc-mobile-carousel-parent, .explore-grow .site-container.bdc-mobile-carousel-host { overflow: visible !important; } .explore-ways .bdc-carousel-shell--arrows, .explore-skills .bdc-carousel-shell--arrows, .explore-grow .bdc-carousel-shell--arrows { position: relative; width: 100%; max-width: 100%; box-sizing: border-box; padding-inline: clamp(28px, 8vw, 36px); overflow: hidden !important; overflow-x: hidden !important; } .explore-ways .bdc-carousel-shell--arrows .explore-ways__grid.bdc-mobile-carousel, .explore-skills .bdc-carousel-shell--arrows .explore-skills__grid.bdc-mobile-carousel, .explore-grow .bdc-carousel-shell--arrows .explore-grow__track.bdc-mobile-carousel { margin-inline: 0 !important; padding-inline: 0 !important; padding-left: 0 !important; padding-right: 0 !important; scroll-padding-inline: 0 !important; } .explore-ways .bdc-carousel-arrows, .explore-skills .bdc-carousel-arrows, .explore-grow .bdc-carousel-arrows { position: absolute; inset: 0; pointer-events: none; z-index: 3; } .explore-ways .bdc-carousel-arrows__btn, .explore-skills .bdc-carousel-arrows__btn, .explore-grow .bdc-carousel-arrows__btn { pointer-events: auto; position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: clamp(34px, 9vw, 40px); height: clamp(34px, 9vw, 40px); padding: 0; border: 1.5px solid var(--color-pink); border-radius: 999px; background: #fff; color: var(--color-navy); box-shadow: 0 2px 10px rgba(0, 27, 102, 0.08); cursor: pointer; appearance: none; transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .explore-ways .bdc-carousel-arrows__btn svg, .explore-skills .bdc-carousel-arrows__btn svg, .explore-grow .bdc-carousel-arrows__btn svg { display: block; width: clamp(16px, 4.2vw, 18px); height: clamp(16px, 4.2vw, 18px); } .explore-ways .bdc-carousel-arrows__btn--prev, .explore-skills .bdc-carousel-arrows__btn--prev, .explore-grow .bdc-carousel-arrows__btn--prev { left: clamp(0px, 1vw, 4px); } .explore-ways .bdc-carousel-arrows__btn--next, .explore-skills .bdc-carousel-arrows__btn--next, .explore-grow .bdc-carousel-arrows__btn--next { right: clamp(0px, 1vw, 4px); } .explore-ways .bdc-carousel-arrows__btn:disabled, .explore-skills .bdc-carousel-arrows__btn:disabled, .explore-grow .bdc-carousel-arrows__btn:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; } .explore-ways .bdc-carousel-shell--arrows .bdc-carousel-dots, .explore-skills .bdc-carousel-shell--arrows .bdc-carousel-dots, .explore-grow .bdc-carousel-shell--arrows .bdc-carousel-dots { margin-top: 0.85rem; margin-bottom: 0.35rem; } /* Explore ways — one full card per view (no peek of next slide) */ .explore-ways .explore-ways__grid.bdc-mobile-carousel, .explore-ways .explore-ways__grid.bdc-mobile-carousel--solo, .explore-ways .explore-ways__grid.bdc-mobile-carousel--full { display: flex !important; flex-wrap: nowrap !important; width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; padding-inline: 0 !important; padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 16px !important; gap: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; scroll-padding-inline: 0 !important; box-sizing: border-box !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .explore-ways .explore-ways__grid.bdc-mobile-carousel::-webkit-scrollbar { display: none; } .explore-ways .explore-ways__grid.bdc-mobile-carousel .explore-way, .explore-ways .explore-ways__grid.bdc-mobile-carousel--solo .explore-way, .explore-ways .explore-ways__grid.bdc-mobile-carousel .explore-way.bdc-mobile-carousel__item { flex: 0 0 100% !important; flex-shrink: 0 !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-inline: 0 !important; scroll-snap-align: start !important; scroll-snap-stop: always !important; box-sizing: border-box !important; } /* Explore skills — one full card per view (no peek of next slide) */ .explore-skills .explore-skills__grid.bdc-mobile-carousel, .explore-skills .explore-skills__grid.bdc-mobile-carousel--solo, .explore-skills .explore-skills__grid.bdc-mobile-carousel--full { display: flex !important; flex-wrap: nowrap !important; width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; padding-inline: 0 !important; padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 16px !important; gap: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; scroll-padding-inline: 0 !important; box-sizing: border-box !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .explore-skills .explore-skills__grid.bdc-mobile-carousel::-webkit-scrollbar { display: none; } .explore-skills .explore-skills__grid.bdc-mobile-carousel .explore-skill, .explore-skills .explore-skills__grid.bdc-mobile-carousel--solo .explore-skill, .explore-skills .explore-skills__grid.bdc-mobile-carousel .explore-skill.bdc-mobile-carousel__item, .explore-skills .explore-skills__grid.bdc-mobile-carousel--peek .explore-skill.bdc-mobile-carousel__item, .explore-skills .explore-skills__grid.bdc-mobile-carousel--peek-2 .explore-skill.bdc-mobile-carousel__item { flex: 0 0 100% !important; flex-shrink: 0 !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-inline: clamp(12px, 4vw, 24px) !important; scroll-snap-align: start !important; scroll-snap-stop: always !important; box-sizing: border-box !important; overflow: hidden !important; } .explore-grow .explore-grow-stage.bdc-mobile-carousel__item { display: block !important; flex: 0 0 100% !important; flex-shrink: 0 !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; margin: 0 !important; scroll-snap-align: start !important; scroll-snap-stop: always !important; box-sizing: border-box !important; overflow: hidden !important; } /* Explore grow — one full card per view (no peek of next slide) */ .explore-grow .explore-grow__track.bdc-mobile-carousel, .explore-grow .explore-grow__track.bdc-mobile-carousel--solo, .explore-grow .explore-grow__track.bdc-mobile-carousel--full { display: flex !important; flex-wrap: nowrap !important; width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; padding-inline: 0 !important; padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 16px !important; gap: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; scroll-padding-inline: 0 !important; box-sizing: border-box !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .explore-grow .explore-grow__track.bdc-mobile-carousel::-webkit-scrollbar { display: none; } .explore-grow .explore-grow-stage__card { width: 100% !important; max-width: 100% !important; box-sizing: border-box !important; } .explore-skills .explore-skill.bdc-mobile-carousel__item { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; text-align: center !important; gap: 0.75rem !important; flex: 0 0 100% !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; padding: 0.35rem clamp(12px, 4vw, 24px) 0.5rem !important; border-left: none !important; box-sizing: border-box !important; overflow: hidden !important; } .explore-skills .explore-skill__icon, .explore-skills .explore-skills__grid.bdc-mobile-carousel .explore-skill__icon, .explore-skills .explore-skills__grid.bdc-mobile-carousel--solo .explore-skill__icon, .explore-skills .explore-skills__grid.bdc-mobile-carousel--full .explore-skill__icon, .explore-skills .explore-skills__grid.bdc-mobile-carousel--peek .explore-skill__icon, .explore-skills .explore-skills__grid.bdc-mobile-carousel--peek-2 .explore-skill__icon, .explore-skills .explore-skill.bdc-mobile-carousel__item .explore-skill__icon { display: block !important; width: clamp(48px, 4.5vw, 58px) !important; height: clamp(48px, 4.5vw, 58px) !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; object-fit: contain !important; filter: var(--home-section-icon-filter) !important; mix-blend-mode: multiply !important; background: none !important; } .explore-skills .explore-skill__title { font-family: var(--font-heading) !important; font-size: clamp(1rem, 3.2vw, 1.15rem) !important; font-weight: 700 !important; line-height: 1.25 !important; color: var(--color-navy) !important; margin: 0 !important; max-width: 100% !important; } .explore-skills .explore-skill__text { font-family: var(--font-body) !important; font-size: clamp(0.82rem, 2.6vw, 0.92rem) !important; font-weight: 400 !important; line-height: 1.4 !important; color: var(--color-navy) !important; margin: 0 !important; max-width: min(280px, 100%) !important; min-height: 0 !important; } } /* Explore page — Dream CTA section: mobile heading + image sizing */ @media (max-width: 991px) { .explore-page .explore-dream.section-padding { padding-top: 0 !important; --explore-section-pad-top: 0 !important; margin-top: 0 !important; } .explore-page .explore-dream { --explore-dream-photo-max-h: clamp(168px, 46vw, 240px); --explore-dream-jar-max-h: clamp(158px, 44vw, 220px); } .explore-page .explore-dream__grid { text-align: left !important; } .explore-page .explore-dream__title { text-align: left !important; font-size: calc(clamp(1.12rem, 1.75vw, 1.62rem) + 5px) !important; width: 100% !important; max-width: 100% !important; } .explore-page .explore-dream__photo-wrap, .explore-page .explore-dream__jar-wrap { width: 100% !important; max-width: 100% !important; } .explore-page .explore-dream__photo { width: min(100%, 320px) !important; max-width: 100% !important; max-height: var(--explore-dream-photo-max-h) !important; height: auto !important; margin-inline: auto !important; } .explore-page .explore-dream__jar { width: min(100%, 300px) !important; max-width: 100% !important; max-height: var(--explore-dream-jar-max-h) !important; height: auto !important; margin-inline: auto !important; } .explore-page .explore-dream__list { width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; } } /* For Parents page — banner section: 100% reference layout on mobile (≤767px) */ @media (max-width: 767px) { .for-parents-page #main-content > section.page-hero.for-parents-hero, .for-parents-page .page-hero.for-parents-hero { padding: 0 0 24px !important; margin-top: 0 !important; min-height: 0 !important; text-align: left !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; background-color: #fff !important; } .for-parents-page #main-content > section.page-hero.for-parents-hero, .for-parents-page #main-content > section.for-parents-hero.page-hero { padding-top: 0 !important; } .for-parents-page .page-hero.for-parents-hero > .site-container.page-hero__inner, .for-parents-page .page-hero.for-parents-hero .page-hero__inner { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 1rem !important; row-gap: 1rem !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; } .for-parents-page .page-hero.for-parents-hero .about-hero__media, .for-parents-page .page-hero.for-parents-hero .hero-image-wrap { order: -1 !important; grid-row: auto !important; display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: none !important; margin: 0 !important; margin-top: 0 !important; padding: 0 var(--container-padding) !important; overflow: visible !important; background: #fff !important; background-color: #fff !important; } .for-parents-page .page-hero.for-parents-hero .about-hero__media .lazy-img-wrap, .for-parents-page .page-hero.for-parents-hero .about-hero__media picture { display: block !important; width: 100% !important; max-width: none !important; margin: 0 auto !important; padding: 0 !important; overflow: visible !important; background: #fff !important; background-color: #fff !important; text-align: center !important; } .for-parents-page .page-hero.for-parents-hero .about-hero__banner { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important; min-height: 0 !important; margin: 0 auto !important; padding: 0 !important; border-radius: 0 !important; object-fit: contain !important; object-position: center top !important; background: #fff !important; background-color: #fff !important; filter: none !important; transform: none !important; } .for-parents-page .page-hero.for-parents-hero .page-hero__content { order: 1 !important; grid-row: auto !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 0.85rem !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 var(--container-padding) !important; padding-right: var(--container-padding) !important; text-align: left !important; overflow: visible !important; position: static !important; } .for-parents-page .page-hero.for-parents-hero .about-hero__deco { display: none !important; } .for-parents-page .page-hero.for-parents-hero .hero-headline { font-family: var(--font-heading) !important; font-size: inherit !important; font-weight: 700 !important; line-height: 1.12 !important; letter-spacing: -0.02em !important; text-align: left !important; max-width: 100% !important; width: 100% !important; margin: 0 !important; } .for-parents-page .page-hero.for-parents-hero .for-parents-hero__title-line, .for-parents-page .page-hero.for-parents-hero .hero-headline .for-parents-hero__title-line { display: block !important; text-align: left !important; white-space: normal !important; margin: 0 !important; font-family: var(--font-heading) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; } .for-parents-page .page-hero.for-parents-hero .for-parents-hero__title-line--pink { color: var(--color-pink) !important; font-size: clamp(1.45rem, 6.2vw, 1.75rem) !important; line-height: 1.15 !important; margin-bottom: 0.1rem !important; } .for-parents-page .page-hero.for-parents-hero .for-parents-hero__title-line--navy { color: var(--color-navy) !important; font-size: clamp(1.75rem, 7.5vw, 2.15rem) !important; line-height: 1.12 !important; } .for-parents-page .page-hero.for-parents-hero .hero-copy { font-family: var(--font-body) !important; font-size: clamp(0.88rem, 2.6vw, 1rem) !important; font-weight: 400 !important; line-height: 1.55 !important; color: var(--color-navy) !important; text-align: left !important; max-width: 100% !important; width: 100% !important; margin: 0 !important; } .for-parents-page .page-hero.for-parents-hero .for-parents-hero__accent--pink { color: var(--color-pink) !important; font-weight: 700 !important; } .for-parents-page .page-hero.for-parents-hero .for-parents-hero__accent--green { color: var(--color-green) !important; font-weight: 700 !important; } .for-parents-page .page-hero.for-parents-hero .for-parents-hero__accent--cyan { color: var(--color-cyan) !important; font-weight: 700 !important; } .for-parents-page .page-hero.for-parents-hero .page-hero__actions, .for-parents-page .page-hero.for-parents-hero .hero-ctas { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; gap: 8px !important; } .for-parents-page .page-hero.for-parents-hero .page-hero__actions .btn, .for-parents-page .page-hero.for-parents-hero .hero-ctas .btn { width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; justify-content: center !important; } } /* For Parents page — What Parents Can Expect: vertical stacked cards on mobile (no slider) */ @media (max-width: 991px) { .for-parents-page .for-parents-expect { overflow: visible !important; } .for-parents-page .for-parents-expect__wrap { padding-inline: 20px !important; overflow: visible !important; } .for-parents-page .for-parents-expect__inner, .for-parents-page .for-parents-expect__inner.site-container, .for-parents-page .for-parents-expect__wrap .for-parents-expect__inner.site-container { padding-left: 0 !important; padding-right: 0 !important; overflow: visible !important; } .for-parents-page .for-parents-expect__grid, .for-parents-page .for-parents-expect__grid.bdc-mobile-carousel, .for-parents-page .for-parents-expect__grid.bdc-mobile-carousel--solo, .for-parents-page .for-parents-expect__grid.bdc-mobile-carousel--full, .for-parents-page .for-parents-expect__grid.bdc-mobile-carousel--inset { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: clamp(0.75rem, 2.5vw, 1rem) !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; margin-inline: 0 !important; padding: 0 !important; padding-inline: 0 !important; overflow: visible !important; overflow-x: visible !important; scroll-snap-type: none !important; touch-action: auto !important; -webkit-overflow-scrolling: auto !important; scrollbar-width: auto !important; } .for-parents-page .for-parents-expect__grid::-webkit-scrollbar { display: none !important; } .for-parents-page .for-parents-expect-card, .for-parents-page .for-parents-expect-card.bdc-mobile-carousel__item { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; grid-template-rows: auto auto !important; column-gap: clamp(0.75rem, 3vw, 1rem) !important; row-gap: 0.35rem !important; align-items: start !important; flex: none !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; scroll-snap-align: unset !important; text-align: left !important; box-sizing: border-box !important; background-color: #fff !important; border: 1px solid var(--for-parents-expect-card-border) !important; border-radius: var(--experience-card-radius) !important; padding: clamp(0.85rem, 2.5vw, 1.05rem) clamp(0.85rem, 3vw, 1.1rem) !important; box-shadow: none !important; overflow: visible !important; } .for-parents-page .for-parents-expect-card__icon { grid-column: 1 !important; grid-row: 1 / span 2 !important; align-self: center !important; flex-shrink: 0 !important; width: clamp(56px, 14vw, 72px) !important; height: clamp(56px, 14vw, 72px) !important; max-width: none !important; margin: 0 !important; object-fit: contain !important; } .for-parents-page .for-parents-expect-card__title { grid-column: 2 !important; grid-row: 1 !important; font-family: var(--font-heading) !important; font-size: clamp(0.92rem, 2.8vw, 1.05rem) !important; font-weight: 700 !important; line-height: 1.28 !important; color: var(--color-navy) !important; text-align: left !important; margin: 0 !important; max-width: 100% !important; } .for-parents-page .for-parents-expect-card__text { grid-column: 2 !important; grid-row: 2 !important; flex: unset !important; font-family: var(--font-body) !important; font-size: clamp(0.82rem, 2.5vw, 0.92rem) !important; font-weight: 400 !important; line-height: 1.45 !important; color: var(--color-navy) !important; text-align: left !important; margin: 0 !important; min-height: 0 !important; max-width: 100% !important; overflow-wrap: anywhere !important; word-break: break-word !important; } .for-parents-page .for-parents-expect .bdc-carousel-dots, .for-parents-page .for-parents-expect__inner > .bdc-carousel-dots, .for-parents-page .for-parents-expect__wrap .bdc-carousel-dots { display: none !important; } } /* Our Vision page — banner section: 100% reference layout on mobile (≤767px) */ @media (max-width: 767px) { .our-vision-page #main-content > section.page-hero.vision-hero, .our-vision-page .page-hero.vision-hero { padding: 0 0 24px !important; margin-top: 0 !important; min-height: 0 !important; text-align: left !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; background-color: #fff !important; } .our-vision-page #main-content > section.page-hero.vision-hero, .our-vision-page #main-content > section.vision-hero.page-hero { padding-top: 0 !important; } .our-vision-page .page-hero.vision-hero > .site-container.page-hero__inner, .our-vision-page .page-hero.vision-hero .page-hero__inner { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 1rem !important; row-gap: 1rem !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; } .our-vision-page .page-hero.vision-hero .about-hero__media, .our-vision-page .page-hero.vision-hero .hero-image-wrap { order: -1 !important; grid-row: auto !important; display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: none !important; margin: 0 !important; margin-top: 0 !important; padding: 0 !important; overflow: visible !important; background: #fff !important; background-color: #fff !important; } .our-vision-page .page-hero.vision-hero .about-hero__media .lazy-img-wrap, .our-vision-page .page-hero.vision-hero .about-hero__media picture { display: block !important; width: 100% !important; max-width: none !important; margin: 0 auto !important; padding: 0 !important; overflow: visible !important; background: #fff !important; background-color: #fff !important; text-align: center !important; } .our-vision-page .page-hero.vision-hero .about-hero__banner { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important; min-height: 0 !important; margin: 0 auto !important; padding: 0 !important; border-radius: 0 !important; object-fit: contain !important; object-position: center top !important; background: #fff !important; background-color: #fff !important; filter: none !important; transform: none !important; } .our-vision-page .page-hero.vision-hero .page-hero__content { order: 1 !important; grid-row: auto !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 0.85rem !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 20px !important; text-align: left !important; overflow: visible !important; position: static !important; } .our-vision-page .page-hero.vision-hero .about-hero__deco { display: none !important; } .our-vision-page .page-hero.vision-hero .hero-label { display: inline-block !important; margin: 0 !important; padding: 0 !important; font-family: var(--font-body) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0.14em !important; line-height: 1.3 !important; text-transform: uppercase !important; text-align: left !important; color: var(--color-pink) !important; } .our-vision-page .page-hero.vision-hero .hero-label::after { display: none !important; content: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; } .our-vision-page .page-hero.vision-hero .hero-headline { position: relative !important; display: block !important; font-family: var(--font-heading) !important; font-size: inherit !important; font-weight: 700 !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; text-align: left !important; max-width: calc(100% - 2rem) !important; width: 100% !important; margin: 0 !important; padding-right: 1.75rem !important; box-sizing: border-box !important; } .our-vision-page .page-hero.vision-hero .vision-hero__title-line { display: block !important; text-align: left !important; white-space: normal !important; margin: 0 !important; font-family: var(--font-heading) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; } .our-vision-page .page-hero.vision-hero .vision-hero__title-line--navy { color: var(--color-navy) !important; font-size: clamp(1.45rem, 6.2vw, 1.85rem) !important; line-height: 1.15 !important; } .our-vision-page .page-hero.vision-hero .vision-hero__title-line--pink { color: var(--color-pink) !important; font-size: clamp(1.45rem, 6.2vw, 1.85rem) !important; line-height: 1.15 !important; } .our-vision-page .page-hero.vision-hero .vision-hero__title-heart { position: absolute !important; top: 0.1rem !important; right: 0 !important; display: inline-flex !important; align-items: center !important; justify-content: center !important; color: var(--color-pink) !important; line-height: 1 !important; } .our-vision-page .page-hero.vision-hero .vision-hero__title-heart svg { display: block !important; width: clamp(18px, 5vw, 22px) !important; height: clamp(18px, 5vw, 22px) !important; } .our-vision-page .page-hero.vision-hero .hero-copy { font-family: var(--font-body) !important; font-size: clamp(0.88rem, 2.6vw, 1rem) !important; font-weight: 400 !important; line-height: 1.55 !important; color: var(--color-navy) !important; text-align: left !important; max-width: 100% !important; width: 100% !important; margin: 0 !important; } .our-vision-page .page-hero.vision-hero .vision-hero__accent--pink { color: var(--color-pink) !important; font-weight: 700 !important; } .our-vision-page .page-hero.vision-hero .page-hero__extra { align-self: stretch !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; text-align: left !important; } .our-vision-page .page-hero.vision-hero .page-hero__extra .vision-hero__list { list-style: none !important; margin: 0 !important; margin-inline: 0 !important; padding: 0 !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; gap: 0.45rem !important; width: 100% !important; max-width: none !important; text-align: left !important; } .our-vision-page .page-hero.vision-hero .page-hero__extra .vision-hero__list li { display: flex !important; align-items: flex-start !important; gap: 0.42rem !important; font-family: var(--font-body) !important; font-size: clamp(0.82rem, 2.5vw, 0.92rem) !important; line-height: 1.45 !important; color: var(--color-navy) !important; text-align: left !important; } .our-vision-page .page-hero.vision-hero .page-hero__extra .vision-hero__check { display: inline-flex !important; align-items: center !important; justify-content: center !important; flex-shrink: 0 !important; width: clamp(18px, 5vw, 22px) !important; height: clamp(18px, 5vw, 22px) !important; margin-top: 0.08rem !important; border-radius: 50% !important; background-color: var(--color-pink) !important; color: #fff !important; } .our-vision-page .page-hero.vision-hero .page-hero__actions, .our-vision-page .page-hero.vision-hero .hero-ctas { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; gap: 8px !important; } .our-vision-page .page-hero.vision-hero .page-hero__actions .btn, .our-vision-page .page-hero.vision-hero .hero-ctas .btn { width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; justify-content: center !important; } .our-vision-page #main-content > section.vision-hero-checklist { display: none !important; } } /* Our Vision page — Our Vision pillars: vertical stacked cards on mobile (no slider) */ @media (max-width: 991px) { .our-vision-page .vision-pillars { overflow: visible !important; } .our-vision-page .vision-pillars .site-container { padding-left: 20px !important; padding-right: 20px !important; overflow: visible !important; } .our-vision-page .vision-pillars__title { text-align: center !important; justify-content: center !important; margin-bottom: clamp(0.85rem, 2.5vw, 1.1rem) !important; } .our-vision-page .vision-pillars__grid, .our-vision-page .vision-pillars__grid.bdc-mobile-carousel, .our-vision-page .vision-pillars__grid.bdc-mobile-carousel--peek, .our-vision-page .vision-pillars__grid.bdc-mobile-carousel--peek-2, .our-vision-page .vision-pillars__grid.bdc-mobile-carousel--solo, .our-vision-page .vision-pillars__grid.bdc-mobile-carousel--full { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: clamp(0.75rem, 2.5vw, 1rem) !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; margin-inline: 0 !important; padding: 0 !important; padding-inline: 0 !important; overflow: visible !important; overflow-x: visible !important; scroll-snap-type: none !important; touch-action: auto !important; -webkit-overflow-scrolling: auto !important; scrollbar-width: auto !important; } .our-vision-page .vision-pillars__grid::-webkit-scrollbar { display: none !important; } .our-vision-page .vision-pillar-card, .our-vision-page .vision-pillar-card.bdc-mobile-carousel__item { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; grid-template-rows: auto auto !important; column-gap: clamp(0.75rem, 3vw, 1rem) !important; row-gap: 0.35rem !important; align-items: start !important; flex: none !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; scroll-snap-align: unset !important; text-align: left !important; box-sizing: border-box !important; overflow: hidden !important; padding: clamp(0.85rem, 2.5vw, 1.05rem) clamp(0.85rem, 3vw, 1.1rem) !important; border-radius: var(--home-pillar-radius) !important; } .our-vision-page .vision-pillar-card__icon, .our-vision-page .vision-pillar-card__icon--purpose { grid-column: 1 !important; grid-row: 1 / span 2 !important; align-self: center !important; flex-shrink: 0 !important; width: clamp(56px, 14vw, 72px) !important; height: clamp(56px, 14vw, 72px) !important; max-width: none !important; margin: 0 !important; object-fit: contain !important; } .our-vision-page .vision-pillar-card__title { grid-column: 2 !important; grid-row: 1 !important; font-family: var(--font-heading) !important; font-size: clamp(0.92rem, 2.8vw, 1.05rem) !important; font-weight: 700 !important; line-height: 1.28 !important; text-align: left !important; margin: 0 !important; max-width: 100% !important; } .our-vision-page .vision-pillar-card__text { grid-column: 2 !important; grid-row: 2 !important; flex: unset !important; font-family: var(--font-body) !important; font-size: clamp(0.82rem, 2.5vw, 0.92rem) !important; font-weight: 400 !important; line-height: 1.45 !important; color: var(--color-navy) !important; text-align: left !important; margin: 0 !important; min-height: 0 !important; max-width: 100% !important; overflow-wrap: anywhere !important; word-break: break-word !important; } .our-vision-page .vision-pillar-card__deco { display: none !important; } .our-vision-page .vision-pillars .bdc-carousel-dots, .our-vision-page .vision-pillars .site-container > .bdc-carousel-dots { display: none !important; } } /* Our Vision page — Journey steps: one card + left/right arrows on mobile */ @media (max-width: 991px) { .our-vision-page .vision-roadmap__journey { overflow: visible !important; padding-left: 0 !important; padding-right: 0 !important; } .our-vision-page .vision-roadmap__journey .bdc-carousel-shell--arrows { position: relative; width: 100%; max-width: 100%; box-sizing: border-box; padding-inline: clamp(28px, 8vw, 36px); overflow: hidden !important; overflow-x: hidden !important; } .our-vision-page .vision-roadmap__journey .bdc-carousel-shell--arrows .vision-journey-steps.bdc-mobile-carousel { margin-inline: 0 !important; padding-inline: 0 !important; padding-left: 0 !important; padding-right: 0 !important; scroll-padding-inline: 0 !important; } .our-vision-page .vision-journey-steps, .our-vision-page .vision-journey-steps.bdc-mobile-carousel, .our-vision-page .vision-journey-steps.bdc-mobile-carousel--solo, .our-vision-page .vision-journey-steps.bdc-mobile-carousel--full, .our-vision-page .vision-journey-steps.bdc-mobile-carousel--inset { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 0 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; margin-inline: 0 !important; padding: 0 0 16px !important; padding-inline: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; scroll-padding-inline: 0 !important; box-sizing: border-box !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-x pan-y; } .our-vision-page .vision-journey-steps::-webkit-scrollbar { display: none !important; } .our-vision-page .vision-journey-step, .our-vision-page .vision-journey-step.bdc-mobile-carousel__item { flex: 0 0 100% !important; flex-shrink: 0 !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; scroll-snap-align: start !important; scroll-snap-stop: always !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; text-align: center !important; box-sizing: border-box !important; padding: 0.35rem 0.25rem 0.5rem !important; margin: 0 !important; overflow: visible !important; } .our-vision-page .vision-journey-step__icon-wrap { display: flex !important; flex-direction: column !important; align-items: center !important; gap: 0.15rem !important; margin-bottom: 0.15rem !important; } .our-vision-page .vision-journey-step__icon { width: clamp(56px, 14vw, 68px) !important; height: clamp(56px, 14vw, 68px) !important; object-fit: contain !important; } .our-vision-page .vision-journey-step__title, .our-vision-page .vision-journey-step__quote, .our-vision-page .vision-journey-step__text { max-width: min(280px, 100%) !important; text-align: center !important; } .our-vision-page .vision-journey-step__arrow { display: none !important; } .our-vision-page .vision-roadmap__journey .bdc-carousel-arrows { position: absolute; inset: 0; pointer-events: none; z-index: 3; } .our-vision-page .vision-roadmap__journey .bdc-carousel-arrows__btn { pointer-events: auto; position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: clamp(34px, 9vw, 40px); height: clamp(34px, 9vw, 40px); padding: 0; border: 1.5px solid var(--color-pink); border-radius: 999px; background: #fff; color: var(--color-navy); box-shadow: 0 2px 10px rgba(0, 27, 102, 0.08); cursor: pointer; appearance: none; transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .our-vision-page .vision-roadmap__journey .bdc-carousel-arrows__btn svg { display: block; width: clamp(16px, 4.2vw, 18px); height: clamp(16px, 4.2vw, 18px); } .our-vision-page .vision-roadmap__journey .bdc-carousel-arrows__btn--prev { left: clamp(0px, 1vw, 4px); } .our-vision-page .vision-roadmap__journey .bdc-carousel-arrows__btn--next { right: clamp(0px, 1vw, 4px); } .our-vision-page .vision-roadmap__journey .bdc-carousel-arrows__btn:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; } .our-vision-page .vision-roadmap__journey .bdc-carousel-shell--arrows .bdc-carousel-dots { margin-top: 0.85rem; margin-bottom: 0.35rem; } } /* Our Vision page — Moments gallery: one image + arrows (reference mobile layout) */ @media (max-width: 991px) { .our-vision-page .vision-moments { overflow: visible !important; } .our-vision-page .vision-moments .site-container.vision-moments__inner { display: flex !important; flex-direction: column !important; gap: clamp(0.85rem, 2.5vw, 1.1rem) !important; padding-left: 20px !important; padding-right: 20px !important; overflow: visible !important; } .our-vision-page .vision-moments__card { order: 0 !important; background: transparent !important; padding: 0 !important; margin: 0 !important; min-height: 0 !important; box-shadow: none !important; } .our-vision-page .vision-moments .bdc-carousel-shell--arrows { order: 1 !important; position: relative; width: 100%; max-width: 100%; box-sizing: border-box; padding-inline: clamp(28px, 8vw, 36px); overflow: hidden !important; overflow-x: hidden !important; } .our-vision-page .vision-moments__card .vision-section__title { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 0.45rem !important; text-align: center !important; font-family: var(--font-heading) !important; font-size: clamp(1.15rem, 4.2vw, 1.45rem) !important; font-weight: 700 !important; line-height: 1.15 !important; color: var(--color-navy) !important; margin: 0 0 clamp(0.75rem, 2.5vw, 1rem) !important; width: 100% !important; } .our-vision-page .vision-moments__card .vision-section__title-icon { color: var(--color-pink) !important; flex-shrink: 0 !important; } .our-vision-page .vision-moments__intro, .our-vision-page .vision-moments__list { display: none !important; } .our-vision-page .vision-moments__gallery { order: unset !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; } .our-vision-page .vision-moments__photo-duo { display: contents !important; } .our-vision-page .vision-moments .bdc-carousel-shell--arrows .vision-moments__gallery.bdc-mobile-carousel { margin-inline: 0 !important; padding-inline: 0 !important; padding-left: 0 !important; padding-right: 0 !important; scroll-padding-inline: 0 !important; } .our-vision-page .vision-moments__gallery, .our-vision-page .vision-moments__gallery.bdc-mobile-carousel, .our-vision-page .vision-moments__gallery.bdc-mobile-carousel--solo, .our-vision-page .vision-moments__gallery.bdc-mobile-carousel--full { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 0 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; margin-inline: 0 !important; padding: 0 0 16px !important; padding-inline: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; scroll-padding-inline: 0 !important; box-sizing: border-box !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; grid-template-columns: none !important; grid-template-areas: none !important; } .our-vision-page .vision-moments__gallery::-webkit-scrollbar { display: none !important; } .our-vision-page .vision-moments__photo-wrap.bdc-mobile-carousel__item, .our-vision-page .vision-moments__feature.bdc-mobile-carousel__item, .our-vision-page .vision-moments__list-slide.bdc-mobile-carousel__item { flex: 0 0 100% !important; flex-shrink: 0 !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; scroll-snap-align: start !important; scroll-snap-stop: always !important; margin: 0 !important; box-sizing: border-box !important; border-radius: var(--home-pillar-radius) !important; overflow: hidden !important; align-self: stretch !important; } .our-vision-page .vision-moments__photo-wrap.bdc-mobile-carousel__item { aspect-ratio: 4 / 3 !important; height: auto !important; display: flex !important; align-items: stretch !important; justify-content: center !important; } .our-vision-page .vision-moments__feature.bdc-mobile-carousel__item { aspect-ratio: 4 / 3 !important; height: auto !important; position: relative !important; } .our-vision-page .vision-moments__list-slide.bdc-mobile-carousel__item { display: flex !important; flex-direction: column !important; justify-content: center !important; aspect-ratio: auto !important; height: auto !important; min-height: clamp(220px, 58vw, 300px) !important; background-color: var(--vision-moments-bg) !important; padding: clamp(0.85rem, 2.5vw, 1.1rem) clamp(0.75rem, 2.5vw, 0.95rem) !important; overflow: visible !important; } .our-vision-page .vision-moments__list-slide .vision-moments__list--slide { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; gap: clamp(0.35rem, 1.5vw, 0.55rem) clamp(0.45rem, 2vw, 0.65rem) !important; width: 100% !important; margin: 0 !important; padding: 0 !important; list-style: none !important; } .our-vision-page .vision-moments__list-slide .vision-moments__list--slide li { display: flex !important; align-items: flex-start !important; gap: 0.38rem !important; font-family: var(--font-body) !important; font-size: clamp(0.68rem, 2.4vw, 0.78rem) !important; line-height: 1.35 !important; color: var(--color-navy) !important; } .our-vision-page .vision-moments__list-slide .vision-moments__list-more { grid-column: 2 !important; } .our-vision-page .vision-moments__photo-wrap .lazy-img-wrap, .our-vision-page .vision-moments__photo-wrap .lazy-img-wrap .vision-moments__photo { width: 100% !important; height: 100% !important; min-height: 100% !important; } .our-vision-page .vision-moments__photo-wrap .vision-moments__photo { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center center !important; border-radius: var(--home-pillar-radius) !important; background-color: rgba(255, 255, 255, 0.55) !important; } .our-vision-page .vision-moments__feature-inner { position: relative !important; width: 100% !important; height: 100% !important; min-height: 100% !important; } .our-vision-page .vision-moments__feature-inner > .lazy-img-wrap { width: 100% !important; height: 100% !important; min-height: 100% !important; } .our-vision-page .vision-moments__feature-img { width: 100% !important; height: 100% !important; object-fit: contain !important; object-position: center center !important; background-color: rgba(255, 255, 255, 0.55) !important; } .our-vision-page .vision-moments__feature-copy { position: absolute !important; inset: 0 !important; left: 0 !important; top: 0 !important; right: 0 !important; bottom: 0 !important; width: auto !important; max-width: none !important; transform: none !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; text-align: center !important; padding: clamp(0.65rem, 3vw, 0.85rem) !important; box-sizing: border-box !important; pointer-events: none !important; } .our-vision-page .vision-moments .bdc-carousel-arrows { position: absolute; inset: 0; pointer-events: none; z-index: 3; } .our-vision-page .vision-moments .bdc-carousel-arrows__btn { pointer-events: auto; position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: clamp(34px, 9vw, 40px); height: clamp(34px, 9vw, 40px); padding: 0; border: 1.5px solid var(--color-pink); border-radius: 999px; background: #fff; color: var(--color-navy); box-shadow: 0 2px 10px rgba(0, 27, 102, 0.08); cursor: pointer; appearance: none; transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .our-vision-page .vision-moments .bdc-carousel-arrows__btn svg { display: block; width: clamp(16px, 4.2vw, 18px); height: clamp(16px, 4.2vw, 18px); } .our-vision-page .vision-moments .bdc-carousel-arrows__btn--prev { left: clamp(0px, 1vw, 4px); } .our-vision-page .vision-moments .bdc-carousel-arrows__btn--next { right: clamp(0px, 1vw, 4px); } .our-vision-page .vision-moments .bdc-carousel-arrows__btn:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; } .our-vision-page .vision-moments .bdc-carousel-shell--arrows .bdc-carousel-dots { margin-top: 0.85rem; margin-bottom: 0.35rem; } } /* Our Vision page — Become a Founding Partner: 2-col static layout on mobile (reference 2) */ @media (max-width: 991px) { .our-vision-page .vision-partner { overflow: visible !important; } .our-vision-page .vision-partner .site-container { padding-left: 20px !important; padding-right: 20px !important; overflow: visible !important; } .our-vision-page .vision-partner__card { background-color: #fff !important; padding: 0 !important; border-radius: 0 !important; } .our-vision-page .vision-partner__inner { display: flex !important; flex-direction: column !important; gap: clamp(0.85rem, 2.5vw, 1.15rem) !important; } .our-vision-page .vision-partner__copy { background-color: transparent !important; padding: 0 !important; text-align: center !important; align-items: center !important; } .our-vision-page .vision-partner__copy .vision-section__title { justify-content: center !important; text-align: center !important; margin-bottom: 0 !important; font-size: clamp(1.05rem, 4.2vw, 1.32rem) !important; line-height: 1.2 !important; } .our-vision-page .vision-partner__copy .vision-section__title-icon { width: clamp(0.95rem, 3.5vw, 1.15rem) !important; height: clamp(0.95rem, 3.5vw, 1.15rem) !important; } .our-vision-page .vision-partner__intro { display: none !important; } .our-vision-page .vision-partner__panel { background-color: #fff !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; } .our-vision-page .vision-partner__panel-inner { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: clamp(0.85rem, 2.5vw, 1.15rem) !important; width: 100% !important; } .our-vision-page .vision-partner__icons, .our-vision-page .vision-partner__icons.bdc-mobile-carousel, .our-vision-page .vision-partner__icons.bdc-mobile-carousel--peek, .our-vision-page .vision-partner__icons.bdc-mobile-carousel--peek-2, .our-vision-page .vision-partner__icons.bdc-mobile-carousel--inset, .our-vision-page .vision-partner__icons.bdc-mobile-carousel--solo, .our-vision-page .vision-partner__icons.bdc-mobile-carousel--full { display: grid !important; grid-template-columns: repeat(2, minmax(0, 1fr)) !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 0 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; margin-inline: 0 !important; padding: 0 !important; padding-inline: 0 !important; overflow: visible !important; overflow-x: visible !important; scroll-snap-type: none !important; touch-action: auto !important; -webkit-overflow-scrolling: auto !important; scrollbar-width: auto !important; } .our-vision-page .vision-partner__icons::-webkit-scrollbar { display: none !important; } .our-vision-page .vision-partner__icon-item:nth-child(n + 3) { display: none !important; } .our-vision-page .vision-partner__icon-item, .our-vision-page .vision-partner__icon-item.bdc-mobile-carousel__item { display: flex !important; flex-direction: column !important; align-items: center !important; text-align: center !important; flex: none !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; scroll-snap-align: unset !important; box-sizing: border-box !important; padding: clamp(0.35rem, 1.5vw, 0.55rem) clamp(0.25rem, 1.5vw, 0.45rem) !important; border-left: none !important; } .our-vision-page .vision-partner__icon-item:nth-child(even) { border-left: 1px solid var(--vision-partner-divider) !important; } .our-vision-page .vision-partner__icon { width: clamp(40px, 12vw, 52px) !important; height: clamp(40px, 12vw, 52px) !important; object-fit: contain !important; } .our-vision-page .vision-partner__icon-label { font-family: var(--font-body) !important; font-weight: 700 !important; font-size: clamp(0.72rem, 2.8vw, 0.88rem) !important; line-height: 1.25 !important; color: var(--color-navy) !important; max-width: 100% !important; overflow-wrap: anywhere !important; word-break: break-word !important; } .our-vision-page .vision-partner__cta-wrap { align-items: stretch !important; width: 100% !important; } .our-vision-page .vision-partner__btn { width: 100% !important; max-width: none !important; justify-content: center !important; border-radius: 999px !important; padding: clamp(0.75rem, 2.5vw, 0.95rem) clamp(1rem, 3vw, 1.25rem) !important; font-size: clamp(0.82rem, 2.5vw, 0.95rem) !important; white-space: normal !important; text-align: center !important; } .our-vision-page .vision-partner__cta-heart { display: none !important; } .our-vision-page .vision-partner .bdc-carousel-arrows, .our-vision-page .vision-partner .bdc-carousel-dots { display: none !important; } } /* Our Vision page — Together section: jar + title row + stacked buttons (reference 2 mobile) */ @media (max-width: 991px) { .our-vision-page .vision-together { overflow: visible !important; } .our-vision-page .vision-together .site-container { padding-left: 20px !important; padding-right: 20px !important; overflow: visible !important; } .our-vision-page .vision-together__card { background-color: var(--vision-together-bg) !important; border-radius: var(--home-pillar-radius) !important; padding: clamp(0.85rem, 2.5vw, 1.1rem) !important; } .our-vision-page .vision-together__grid { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; grid-template-areas: "jar title" "actions actions" !important; gap: clamp(0.55rem, 2vw, 0.75rem) clamp(0.55rem, 2.5vw, 0.85rem) !important; align-items: center !important; text-align: left !important; } .our-vision-page .vision-together__jar-wrap { grid-area: jar !important; justify-content: flex-start !important; align-self: center !important; width: clamp(72px, 22vw, 96px) !important; flex-shrink: 0 !important; } .our-vision-page .vision-together__jar-wrap > .lazy-img-wrap, .our-vision-page .vision-together__jar { width: 100% !important; max-width: clamp(72px, 22vw, 96px) !important; } .our-vision-page .vision-together__stars { display: none !important; } .our-vision-page .vision-together__title { grid-area: title !important; text-align: left !important; margin: 0 !important; font-family: var(--font-heading) !important; font-size: clamp(0.78rem, 2.6vw, 0.94rem) !important; font-weight: 700 !important; line-height: 1.28 !important; letter-spacing: -0.01em !important; color: var(--color-navy) !important; max-width: 100% !important; } .our-vision-page .vision-together__accent { display: inline !important; font-family: var(--font-heading) !important; font-style: italic !important; font-weight: 700 !important; font-size: clamp(1.1rem, 4vw, 1.38rem) !important; line-height: 1.1 !important; color: var(--color-pink) !important; } .our-vision-page .vision-together__title-icon { width: clamp(0.85rem, 3vw, 1rem) !important; height: clamp(0.85rem, 3vw, 1rem) !important; margin-left: 0.15rem !important; vertical-align: middle !important; } .our-vision-page .vision-together__list { display: none !important; } .our-vision-page .vision-together__actions { grid-area: actions !important; grid-column: 1 / -1 !important; width: 100% !important; max-width: 100% !important; margin: clamp(0.2rem, 0.8vw, 0.4rem) 0 0 !important; gap: clamp(0.55rem, 2vw, 0.7rem) !important; } .our-vision-page .vision-together__actions .btn { width: 100% !important; max-width: 100% !important; justify-content: center !important; border-radius: 999px !important; font-family: var(--font-body) !important; font-size: clamp(0.72rem, 2.4vw, 0.86rem) !important; font-weight: 700 !important; line-height: 1.25 !important; padding: clamp(0.7rem, 2.5vw, 0.85rem) clamp(0.85rem, 2.5vw, 1rem) !important; white-space: normal !important; text-align: center !important; } .our-vision-page .vision-together__btn-outline { background-color: #fff !important; color: var(--color-navy) !important; border-color: var(--color-pink) !important; box-shadow: inset 0 0 0 1px var(--color-pink) !important; } .our-vision-page .vision-together__deco-stars { display: none !important; } } /* Get Involved page — banner section: 100% reference layout on mobile (≤991px) */ @media (max-width: 991px) { .get-involved-page #main-content > section.page-hero.get-involved-hero, .get-involved-page .page-hero.get-involved-hero { padding: 0 0 24px !important; margin-top: 0 !important; min-height: 0 !important; text-align: left !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; background-color: #fff !important; } .get-involved-page #main-content > section.page-hero.get-involved-hero, .get-involved-page #main-content > section.get-involved-hero.page-hero { padding-top: 0 !important; } .get-involved-page .page-hero.get-involved-hero > .site-container.page-hero__inner, .get-involved-page .page-hero.get-involved-hero .page-hero__inner { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: var(--page-hero-mobile-stack-gap, 1rem) !important; row-gap: var(--page-hero-mobile-stack-gap, 1rem) !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; } .get-involved-page .page-hero.get-involved-hero .about-hero__media, .get-involved-page .page-hero.get-involved-hero .hero-image-wrap { order: -1 !important; align-self: stretch !important; grid-row: auto !important; display: flex !important; justify-content: flex-start !important; align-items: flex-start !important; width: 100% !important; max-width: none !important; margin: 0 !important; margin-top: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; background-color: transparent !important; box-sizing: border-box !important; } .get-involved-page .page-hero.get-involved-hero .about-hero__media .lazy-img-wrap, .get-involved-page .page-hero.get-involved-hero .about-hero__media picture { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; background-color: transparent !important; box-sizing: border-box !important; } .get-involved-page .page-hero.get-involved-hero .about-hero__banner, .get-involved-page .page-hero.get-involved-hero picture img.about-hero__banner { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; max-height: min(820px, 72vh) !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; object-fit: contain !important; object-position: left center !important; background: transparent !important; background-color: transparent !important; filter: none !important; transform: none !important; box-sizing: border-box !important; } .get-involved-page .page-hero.get-involved-hero .page-hero__content { order: 1 !important; grid-row: auto !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; gap: 0.85rem !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 15px !important; text-align: left !important; overflow: visible !important; position: static !important; } .get-involved-page .page-hero.get-involved-hero .hero-label { display: inline-flex !important; align-items: center !important; margin: 0 !important; font-family: var(--font-body) !important; font-size: clamp(0.68rem, 2.2vw, 0.78rem) !important; font-weight: 700 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: var(--color-pink) !important; } .get-involved-page .page-hero.get-involved-hero .hero-label::before { content: '^ ' !important; } .get-involved-page .page-hero.get-involved-hero .hero-label::after { display: none !important; content: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; } .get-involved-page .page-hero.get-involved-hero .hero-headline { font-family: var(--font-heading) !important; font-size: inherit !important; font-weight: 700 !important; line-height: 1.12 !important; letter-spacing: -0.02em !important; text-align: left !important; white-space: normal !important; max-width: 100% !important; width: 100% !important; margin: 0 !important; } .get-involved-page .page-hero.get-involved-hero .hero-headline .get-involved-hero__title-line, .get-involved-page .page-hero.get-involved-hero .get-involved-hero__title-line { display: block !important; text-align: left !important; white-space: normal !important; margin: 0 !important; margin-left: 0 !important; font-family: var(--font-heading) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; } .get-involved-page .page-hero.get-involved-hero .hero-headline .get-involved-hero__title-line--pink + .get-involved-hero__title-line--navy::before, .get-involved-page .page-hero.get-involved-hero .get-involved-hero__title-line--pink + .get-involved-hero__title-line--navy::before { content: none !important; } .get-involved-page .page-hero.get-involved-hero .get-involved-hero__title-line--pink { color: var(--color-pink) !important; font-size: clamp(1.45rem, 6.2vw, 1.75rem) !important; line-height: 1.15 !important; margin-bottom: 0.1rem !important; } .get-involved-page .page-hero.get-involved-hero .get-involved-hero__title-line--navy { color: var(--color-navy) !important; font-size: clamp(1.75rem, 7.5vw, 2.15rem) !important; line-height: 1.12 !important; } .get-involved-page .page-hero.get-involved-hero .hero-copy { font-family: var(--font-body) !important; font-size: clamp(0.88rem, 2.6vw, 1rem) !important; font-weight: 400 !important; line-height: 1.55 !important; color: var(--color-navy) !important; text-align: left !important; max-width: 100% !important; width: 100% !important; margin: 0 !important; } .get-involved-page .page-hero.get-involved-hero .page-hero__actions, .get-involved-page .page-hero.get-involved-hero .hero-ctas { flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; gap: 8px !important; } .get-involved-page .page-hero.get-involved-hero .page-hero__actions .btn, .get-involved-page .page-hero.get-involved-hero .hero-ctas .btn { width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; justify-content: center !important; border-radius: 999px !important; font-family: var(--font-body) !important; font-size: clamp(0.82rem, 2.5vw, 0.95rem) !important; font-weight: 700 !important; line-height: 1.25 !important; padding: clamp(0.75rem, 2.5vw, 0.9rem) clamp(1rem, 3vw, 1.2rem) !important; white-space: normal !important; text-align: center !important; } .get-involved-page .page-hero.get-involved-hero .page-hero__actions .btn--outline, .get-involved-page .page-hero.get-involved-hero .hero-ctas .btn--outline { background-color: #fff !important; color: var(--color-pink) !important; border-color: var(--color-pink) !important; box-shadow: inset 0 0 0 1px var(--color-pink) !important; } } @media (max-width: 430px) { .get-involved-page .page-hero.get-involved-hero .about-hero__media, .get-involved-page .page-hero.get-involved-hero .hero-image-wrap { width: 100% !important; max-width: none !important; margin: 0 !important; order: -1 !important; justify-content: flex-start !important; align-items: flex-start !important; } .get-involved-page .page-hero.get-involved-hero .about-hero__banner, .get-involved-page .page-hero.get-involved-hero picture img.about-hero__banner { width: 100% !important; max-width: none !important; margin: 0 !important; object-position: left center !important; } } /* Get Involved page — How You Can Get Involved: vertical stacked cards on mobile (no slider) */ @media (max-width: 991px) { .get-involved-page .get-involved-ways { overflow: visible !important; } .get-involved-page .get-involved-ways > .site-container { padding-left: 20px !important; padding-right: 20px !important; overflow: visible !important; } .get-involved-page .get-involved-ways__title { justify-content: flex-start !important; text-align: left !important; font-size: clamp(1.15rem, 4.2vw, 1.45rem) !important; margin-bottom: clamp(0.85rem, 2.5vw, 1.1rem) !important; } .get-involved-page .get-involved-ways__grid, .get-involved-page .get-involved-ways__grid.bdc-mobile-carousel, .get-involved-page .get-involved-ways__grid.bdc-mobile-carousel--solo, .get-involved-page .get-involved-ways__grid.bdc-mobile-carousel--full, .get-involved-page .get-involved-ways__grid.bdc-mobile-carousel--inset { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: clamp(0.75rem, 2.5vw, 1rem) !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; margin-inline: 0 !important; padding: 0 !important; padding-inline: 0 !important; overflow: visible !important; overflow-x: visible !important; scroll-snap-type: none !important; touch-action: auto !important; -webkit-overflow-scrolling: auto !important; scrollbar-width: auto !important; } .get-involved-page .get-involved-ways__grid::-webkit-scrollbar { display: none !important; } .get-involved-page .get-involved-ways-card, .get-involved-page .get-involved-ways-card.bdc-mobile-carousel__item { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; grid-template-rows: auto auto !important; column-gap: clamp(0.75rem, 3vw, 1rem) !important; row-gap: 0.35rem !important; align-items: start !important; flex: none !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; scroll-snap-align: unset !important; text-align: left !important; box-sizing: border-box !important; border-radius: var(--experience-card-radius) !important; border-width: 1px !important; border-style: solid !important; padding: clamp(0.85rem, 2.5vw, 1.05rem) clamp(0.85rem, 3vw, 1.1rem) !important; box-shadow: none !important; overflow: visible !important; } .get-involved-page .get-involved-ways-card__icon { grid-column: 1 !important; grid-row: 1 / span 2 !important; align-self: center !important; flex-shrink: 0 !important; width: clamp(56px, 14vw, 72px) !important; height: clamp(56px, 14vw, 72px) !important; max-width: none !important; margin: 0 !important; padding: clamp(0.45rem, 1.5vw, 0.55rem) !important; border-radius: 50% !important; object-fit: contain !important; box-sizing: border-box !important; } .get-involved-page .get-involved-ways-card__title { grid-column: 2 !important; grid-row: 1 !important; font-family: var(--font-heading) !important; font-size: clamp(0.92rem, 2.8vw, 1.05rem) !important; font-weight: 700 !important; line-height: 1.28 !important; color: var(--color-navy) !important; text-align: left !important; margin: 0 !important; max-width: 100% !important; } .get-involved-page .get-involved-ways-card__text { grid-column: 2 !important; grid-row: 2 !important; flex: unset !important; font-family: var(--font-body) !important; font-size: clamp(0.82rem, 2.5vw, 0.92rem) !important; font-weight: 400 !important; line-height: 1.45 !important; color: var(--color-navy) !important; text-align: left !important; margin: 0 !important; min-height: 0 !important; max-width: 100% !important; overflow-wrap: anywhere !important; word-break: break-word !important; } .get-involved-page .get-involved-ways-card__link { display: none !important; } .get-involved-page .get-involved-ways-card:nth-child(1) { background-color: var(--color-purple-soft) !important; border-color: rgba(123, 63, 189, 0.28) !important; } .get-involved-page .get-involved-ways-card:nth-child(1) .get-involved-ways-card__icon { background-color: var(--color-purple-muted) !important; } .get-involved-page .get-involved-ways-card:nth-child(2) { background-color: #fff9e6 !important; border-color: rgba(245, 166, 35, 0.35) !important; } .get-involved-page .get-involved-ways-card:nth-child(2) .get-involved-ways-card__icon { background-color: #fff2cc !important; } .get-involved-page .get-involved-ways-card:nth-child(3) { background-color: var(--color-green-soft) !important; border-color: rgba(61, 154, 90, 0.28) !important; } .get-involved-page .get-involved-ways-card:nth-child(3) .get-involved-ways-card__icon { background-color: var(--color-green-muted) !important; } .get-involved-page .get-involved-ways-card:nth-child(4) { background-color: var(--color-blue-soft) !important; border-color: rgba(43, 127, 212, 0.28) !important; } .get-involved-page .get-involved-ways-card:nth-child(4) .get-involved-ways-card__icon { background-color: var(--color-blue-muted) !important; } .get-involved-page .get-involved-ways-card:nth-child(5) { background-color: var(--color-pink-soft) !important; border-color: rgba(238, 29, 120, 0.22) !important; } .get-involved-page .get-involved-ways-card:nth-child(5) .get-involved-ways-card__icon { background-color: #ffe6f0 !important; } .get-involved-page .get-involved-ways .bdc-carousel-dots, .get-involved-page .get-involved-ways > .site-container > .bdc-carousel-dots { display: none !important; } } /* Get Involved page — Help Us Make: center bottom illustration on mobile */ @media (max-width: 991px) { .get-involved-page .get-involved-impact__visual { justify-items: center !important; } .get-involved-page .get-involved-impact__visual > .lazy-img-wrap { justify-self: center !important; display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: min(100%, 320px) !important; margin-inline: auto !important; } .get-involved-page .get-involved-impact__illustration { justify-self: center !important; display: block !important; width: 100% !important; max-width: min(100%, 320px) !important; height: auto !important; margin-inline: auto !important; object-fit: contain !important; object-position: center center !important; } } /* Partners page — banner section: 100% reference layout on mobile (≤768px) */ @media (max-width: 768px) { .partners-page { --container-padding: 20px; } .partners-page .site-header .site-container { padding-left: var(--container-padding) !important; padding-right: var(--container-padding) !important; } .partners-page #main-content > section.page-hero.partners-hero, .partners-page .page-hero.partners-hero { padding: 0 0 24px !important; margin-top: 0 !important; min-height: 0 !important; text-align: left !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; background-color: #fff !important; } .partners-page #main-content > section.page-hero.partners-hero, .partners-page #main-content > section.partners-hero.page-hero { padding-top: 0 !important; } .partners-page .page-hero.partners-hero > .site-container.page-hero__inner, .partners-page .page-hero.partners-hero .page-hero__inner { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 1rem !important; row-gap: 1rem !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; } .partners-page #main-content > section.page-hero.partners-hero .about-hero__media, .partners-page #main-content > section.page-hero.partners-hero .hero-image-wrap, .partners-page .page-hero.partners-hero .about-hero__media, .partners-page .page-hero.partners-hero .hero-image-wrap { order: 5 !important; grid-row: auto !important; display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; margin-top: 0 !important; margin-bottom: 0 !important; padding: 0 !important; overflow: visible !important; background: #fff !important; background-color: #fff !important; box-sizing: border-box !important; } .partners-page #main-content > section.page-hero.partners-hero .about-hero__media .lazy-img-wrap, .partners-page #main-content > section.page-hero.partners-hero .about-hero__media picture, .partners-page .page-hero.partners-hero .about-hero__media .lazy-img-wrap, .partners-page .page-hero.partners-hero .about-hero__media picture { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; background: #fff !important; background-color: #fff !important; box-sizing: border-box !important; } .partners-page #main-content > section.page-hero.partners-hero .about-hero__banner, .partners-page .page-hero.partners-hero .about-hero__banner { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; min-height: 0 !important; margin: 0 auto !important; padding: 0 !important; border-radius: 0 !important; object-fit: contain !important; object-position: center center !important; background: #fff !important; background-color: #fff !important; filter: none !important; transform: none !important; box-sizing: border-box !important; } .partners-page #main-content > section.page-hero.partners-hero .page-hero__content, .partners-page .page-hero.partners-hero .page-hero__content { display: contents !important; } .partners-page .page-hero.partners-hero .hero-label { order: 1 !important; box-sizing: border-box !important; width: 100% !important; padding: 0 var(--container-padding) !important; display: inline-flex !important; align-items: center !important; margin: 0 !important; font-family: var(--font-body) !important; font-size: clamp(0.68rem, 2.2vw, 0.78rem) !important; font-weight: 700 !important; letter-spacing: 0.16em !important; text-transform: uppercase !important; color: var(--color-pink) !important; } .partners-page .page-hero.partners-hero .hero-label::before { content: '^ ' !important; } .partners-page .page-hero.partners-hero .hero-label::after { display: none !important; content: none !important; width: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; background: none !important; } .partners-page .page-hero.partners-hero .hero-headline { order: 2 !important; box-sizing: border-box !important; padding: 0 var(--container-padding) !important; font-family: var(--font-heading) !important; font-size: inherit !important; font-weight: 700 !important; line-height: 1.12 !important; letter-spacing: -0.02em !important; text-align: left !important; white-space: normal !important; max-width: 100% !important; width: 100% !important; margin: 0 !important; } .partners-page .page-hero.partners-hero .hero-headline .vision-hero__title-line { display: block !important; text-align: left !important; white-space: normal !important; margin: 0 !important; font-family: var(--font-heading) !important; font-weight: 700 !important; letter-spacing: -0.02em !important; } .partners-page .page-hero.partners-hero .hero-headline .vision-hero__title-line--navy { color: var(--color-navy) !important; font-size: clamp(1.45rem, 6.2vw, 1.75rem) !important; line-height: 1.15 !important; margin-bottom: 0.1rem !important; } .partners-page .page-hero.partners-hero .hero-headline .vision-hero__title-line--pink { color: var(--color-pink) !important; font-size: clamp(1.75rem, 7.5vw, 2.15rem) !important; line-height: 1.12 !important; } .partners-page .page-hero.partners-hero .heading-underline--partners { display: inline !important; color: var(--color-pink) !important; } .partners-page .page-hero.partners-hero .heading-underline--partners .heading-underline__img { display: none !important; } .partners-page .page-hero.partners-hero .hero-copy { order: 3 !important; box-sizing: border-box !important; padding: 0 var(--container-padding) !important; font-family: var(--font-body) !important; font-size: clamp(0.88rem, 2.6vw, 1rem) !important; font-weight: 400 !important; line-height: 1.55 !important; color: var(--color-navy) !important; text-align: left !important; max-width: 100% !important; width: 100% !important; margin: 0 !important; } .partners-page .page-hero.partners-hero .vision-hero__accent--pink { color: var(--color-pink) !important; font-weight: 700 !important; } .partners-page .page-hero.partners-hero .page-hero__actions, .partners-page .page-hero.partners-hero .hero-ctas { order: 6 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 var(--container-padding) !important; gap: 8px !important; } .partners-page .page-hero.partners-hero .page-hero__actions .btn, .partners-page .page-hero.partners-hero .hero-ctas .btn { width: 100% !important; max-width: 100% !important; margin-inline: 0 !important; justify-content: center !important; border-radius: 999px !important; font-family: var(--font-body) !important; font-size: clamp(0.82rem, 2.5vw, 0.95rem) !important; font-weight: 700 !important; line-height: 1.25 !important; padding: clamp(0.75rem, 2.5vw, 0.9rem) clamp(1rem, 3vw, 1.2rem) !important; white-space: normal !important; text-align: center !important; } .partners-page .page-hero.partners-hero .page-hero__actions .btn--outline, .partners-page .page-hero.partners-hero .hero-ctas .btn--outline { background-color: #fff !important; color: var(--color-pink) !important; border-color: var(--color-pink) !important; box-shadow: inset 0 0 0 1px var(--color-pink) !important; } } /* Partners page — Ways to Partner: vertical stacked cards on mobile (reference 2) */ @media (max-width: 991px) { .partners-page .partners-ways { overflow: visible !important; } .partners-page .partners-ways > .site-container { padding-left: 20px !important; padding-right: 20px !important; overflow: visible !important; } .partners-page .partners-ways__title { justify-content: center !important; text-align: center !important; font-size: clamp(1.15rem, 4.2vw, 1.45rem) !important; margin-bottom: clamp(0.65rem, 2vw, 0.85rem) !important; } .partners-page .partners-ways__intro { text-align: center !important; max-width: 100% !important; margin: 0 0 clamp(0.85rem, 2.5vw, 1.1rem) !important; font-size: clamp(0.82rem, 2.5vw, 0.92rem) !important; line-height: 1.5 !important; } .partners-page .partners-ways__grid, .partners-page .partners-ways__grid.bdc-mobile-carousel, .partners-page .partners-ways__grid.bdc-mobile-carousel--peek, .partners-page .partners-ways__grid.bdc-mobile-carousel--peek-2, .partners-page .partners-ways__grid.bdc-mobile-carousel--solo, .partners-page .partners-ways__grid.bdc-mobile-carousel--full, .partners-page .partners-ways__grid.bdc-mobile-carousel--inset { display: flex !important; flex-direction: column !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: clamp(0.75rem, 2.5vw, 1rem) !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; margin-inline: 0 !important; padding: 0 !important; padding-inline: 0 !important; overflow: visible !important; overflow-x: visible !important; scroll-snap-type: none !important; touch-action: auto !important; -webkit-overflow-scrolling: auto !important; scrollbar-width: auto !important; } .partners-page .partners-ways__grid::-webkit-scrollbar { display: none !important; } .partners-page .partners-ways-card, .partners-page .partners-ways-card.bdc-mobile-carousel__item { display: grid !important; grid-template-columns: auto minmax(0, 1fr) !important; grid-template-rows: auto auto !important; column-gap: clamp(0.75rem, 3vw, 1rem) !important; row-gap: 0.35rem !important; align-items: start !important; flex: none !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; scroll-snap-align: unset !important; text-align: left !important; box-sizing: border-box !important; border-radius: var(--home-pillar-radius) !important; padding: clamp(0.85rem, 2.5vw, 1.05rem) clamp(0.85rem, 3vw, 1.1rem) !important; box-shadow: none !important; overflow: visible !important; } .partners-page .partners-ways-card__icon { grid-column: 1 !important; grid-row: 1 / span 2 !important; align-self: center !important; justify-self: center !important; flex-shrink: 0 !important; margin: 0 !important; mix-blend-mode: multiply !important; } .partners-page .partners-ways-card__title { grid-column: 2 !important; grid-row: 1 !important; font-family: var(--font-heading) !important; font-size: clamp(0.92rem, 2.8vw, 1.05rem) !important; font-weight: 700 !important; line-height: 1.28 !important; text-align: left !important; margin: 0 !important; max-width: 100% !important; } .partners-page .partners-ways-card__text { grid-column: 2 !important; grid-row: 2 !important; flex: unset !important; font-family: var(--font-body) !important; font-size: clamp(0.82rem, 2.5vw, 0.92rem) !important; font-weight: 400 !important; line-height: 1.45 !important; color: var(--color-navy) !important; text-align: left !important; margin: 0 !important; min-height: 0 !important; max-width: 100% !important; overflow-wrap: anywhere !important; word-break: break-word !important; } .partners-page .partners-ways .bdc-carousel-dots, .partners-page .partners-ways > .site-container > .bdc-carousel-dots { display: none !important; } } /* Partners page — Impact cards: one card + left/right arrows on mobile */ @media (max-width: 991px) { .partners-page .partners-impact { overflow: visible !important; } .partners-page .partners-impact > .site-container { padding-left: 20px !important; padding-right: 20px !important; overflow: visible !important; } .partners-page .partners-impact__box { overflow: visible !important; padding: clamp(1.15rem, 4vw, 1.35rem) 20px clamp(1rem, 3.5vw, 1.25rem) !important; } .partners-page .partners-impact__box .bdc-carousel-shell--arrows, .partners-page .partners-impact__box .bdc-carousel-shell--partners-impact { position: relative; width: 100%; max-width: 100%; box-sizing: border-box; padding-inline: clamp(48px, 12vw, 56px) !important; overflow: hidden !important; overflow-x: hidden !important; } .partners-page .partners-impact__box .bdc-carousel-shell--arrows .partners-impact__grid.bdc-mobile-carousel { margin-inline: 0 !important; padding-inline: 0 !important; padding-left: 0 !important; padding-right: 0 !important; scroll-padding-inline: 0 !important; } .partners-page .partners-impact__grid, .partners-page .partners-impact__grid.bdc-mobile-carousel, .partners-page .partners-impact__grid.bdc-mobile-carousel--solo, .partners-page .partners-impact__grid.bdc-mobile-carousel--full, .partners-page .partners-impact__grid.bdc-mobile-carousel--inset { display: flex !important; flex-wrap: nowrap !important; align-items: stretch !important; gap: 0 !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; margin-inline: 0 !important; padding: 0 0 16px !important; padding-inline: 0 !important; overflow-x: auto !important; overflow-y: hidden !important; scroll-snap-type: x mandatory !important; scroll-padding-inline: 0 !important; box-sizing: border-box !important; -webkit-overflow-scrolling: touch; scrollbar-width: none; touch-action: pan-x pan-y; } .partners-page .partners-impact__grid::-webkit-scrollbar { display: none !important; } .partners-page .partners-impact-card, .partners-page .partners-impact-card.bdc-mobile-carousel__item { flex: 0 0 100% !important; flex-shrink: 0 !important; width: 100% !important; min-width: 100% !important; max-width: 100% !important; scroll-snap-align: start !important; scroll-snap-stop: always !important; display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: flex-start !important; text-align: center !important; box-sizing: border-box !important; padding: 0.25rem 0 0.5rem !important; margin: 0 !important; overflow: visible !important; } .partners-page .partners-impact-card > .lazy-img-wrap--cover, .partners-page .partners-impact-card__photo { width: 100% !important; max-width: 100% !important; border-radius: var(--experience-photo-radius) !important; } .partners-page .partners-impact-card__title, .partners-page .partners-impact-card__text { max-width: min(300px, 100%) !important; text-align: center !important; } .partners-page .partners-impact-card__text { padding-inline: clamp(0.15rem, 0.35vw, 0.3rem) !important; padding-right: clamp(1.35rem, 1.8vw, 1.65rem) !important; } .partners-page .partners-impact__box .bdc-carousel-arrows { position: absolute; top: 0; right: 0; left: 0; pointer-events: none; z-index: 3; } .partners-page .partners-impact__box .bdc-carousel-arrows__btn { pointer-events: auto; position: absolute; top: 50%; transform: translateY(-50%); display: inline-flex; align-items: center; justify-content: center; width: clamp(34px, 9vw, 40px); height: clamp(34px, 9vw, 40px); padding: 0; border: 1.5px solid var(--color-pink); border-radius: 999px; background: #fff; color: var(--color-navy); box-shadow: 0 2px 10px rgba(0, 27, 102, 0.08); cursor: pointer; appearance: none; transition: opacity 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease; } .partners-page .partners-impact__box .bdc-carousel-arrows__btn svg { display: block; width: clamp(16px, 4.2vw, 18px); height: clamp(16px, 4.2vw, 18px); } .partners-page .partners-impact__box .bdc-carousel-arrows__btn--prev { left: clamp(4px, 1.2vw, 8px); } .partners-page .partners-impact__box .bdc-carousel-arrows__btn--next { right: clamp(4px, 1.2vw, 8px); } .partners-page .partners-impact__box .bdc-carousel-arrows__btn:disabled { opacity: 0.35; cursor: not-allowed; box-shadow: none; } .partners-page .partners-impact__box .bdc-carousel-shell--arrows .bdc-carousel-dots { margin-top: 0.85rem; margin-bottom: 0.35rem; } } /* Partners page — Share an Opportunity CTA: reference mobile layout */ @media (max-width: 991px) { .partners-page .partners-opportunity-cta { padding-top: 0 !important; padding-bottom: clamp(1.5rem, 4vw, 2rem) !important; } .partners-page .partners-opportunity-cta > .site-container, .partners-page .partners-opportunity-cta__inner { padding-left: 20px !important; padding-right: 20px !important; } .partners-page .partners-opportunity-cta__card { display: flex !important; flex-direction: column !important; align-items: stretch !important; grid-template-columns: unset !important; gap: clamp(0.85rem, 3vw, 1rem) !important; padding: 20px !important; border-radius: clamp(16px, 4vw, 20px) !important; text-align: left !important; background: linear-gradient( 90deg, #e91e63 0%, #c2185b 42%, #7b1fa2 78%, #5e35b1 100% ) !important; } .partners-page .partners-opportunity-cta__lead { display: flex !important; flex-direction: row !important; align-items: flex-start !important; justify-content: flex-start !important; gap: clamp(0.65rem, 2.5vw, 0.85rem) !important; text-align: left !important; } .partners-page .partners-opportunity-cta__bulb { order: -1 !important; flex-shrink: 0 !important; width: clamp(48px, 12vw, 56px) !important; height: clamp(48px, 12vw, 56px) !important; margin: 0 !important; } .partners-page .partners-opportunity-cta__title { flex: 1 1 auto !important; min-width: 0 !important; text-align: left !important; font-family: var(--font-heading) !important; font-size: clamp(1.05rem, 4.2vw, 1.25rem) !important; font-weight: 700 !important; line-height: 1.22 !important; color: #fff !important; margin: 0 !important; overflow-wrap: anywhere !important; word-break: break-word !important; } .partners-page .partners-opportunity-cta__title .heading-underline--partners-cta .heading-underline__img { display: none !important; } .partners-page .partners-opportunity-cta__text { text-align: left !important; font-family: var(--font-body) !important; font-size: clamp(0.82rem, 2.6vw, 0.92rem) !important; font-weight: 400 !important; line-height: 1.45 !important; color: rgba(255, 255, 255, 0.96) !important; margin: 0 !important; max-width: none !important; overflow-wrap: anywhere !important; word-break: break-word !important; } .partners-page .partners-opportunity-cta__text-extra { display: none !important; } .partners-page .partners-opportunity-cta__btn { width: 100% !important; max-width: none !important; margin: clamp(0.15rem, 1vw, 0.35rem) 0 0 !important; justify-content: center !important; background-color: #fff !important; border-color: #fff !important; color: var(--color-pink) !important; font-family: var(--font-body) !important; font-size: clamp(0.92rem, 2.8vw, 1rem) !important; font-weight: 560 !important; padding: clamp(0.75rem, 2.5vw, 0.85rem) clamp(1.25rem, 4vw, 1.55rem) !important; border-radius: 999px !important; white-space: nowrap !important; } .partners-page .partners-opportunity-cta__btn:hover { background-color: rgba(255, 255, 255, 0.92) !important; border-color: rgba(255, 255, 255, 0.92) !important; color: var(--color-pink) !important; } .partners-page .partners-opportunity-cta__btn .btn__icon { color: var(--color-pink) !important; stroke: var(--color-pink) !important; } .partners-page .partners-opportunity-cta__plane { display: none !important; } } /* Arrow carousels — vertically center nav buttons on the active image/visual */ @media (max-width: 991px) { .bdc-carousel-shell--arrows .bdc-carousel-arrows { position: absolute; pointer-events: none; z-index: 3; } .bdc-carousel-shell--arrows .bdc-carousel-arrows__btn { top: 50% !important; transform: translateY(-50%) !important; } } /* Global mobile hero banner — match Home page layout/spacing (exclude already-updated pages) */ @media (max-width: 991px) { body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) #main-content > section.page-hero:not(.home-hero), body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) { padding: 0 0 24px !important; margin-top: 0 !important; padding-top: 0 !important; text-align: left !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0 !important; background-color: #fff !important; } body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) > .site-container.page-hero__inner, body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) .page-hero__inner { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 1rem !important; row-gap: 1rem !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; } body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) .hero-image-wrap, body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) .about-hero__media, body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) .explore-hero__media, body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) .creative-makers-hero__media, body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) .faq-hero__media, body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) [class*='-hero__media'] { order: 5 !important; align-self: stretch !important; display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: none !important; margin: 0 !important; margin-top: 0 !important; padding: 0 !important; overflow: visible !important; background: transparent !important; background-color: transparent !important; box-sizing: border-box !important; } body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) .hero-image-wrap .lazy-img-wrap, body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) [class*='__media'] .lazy-img-wrap, body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) [class*='__media'] picture { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; box-sizing: border-box !important; background: transparent !important; text-align: left !important; } body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) .about-hero__banner, body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) .explore-hero__banner, body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) .creative-makers-hero__banner, body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) .faq-hero__banner, body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) .apply-hero__banner, body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) .accessibility-hero__banner, body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) .financial-hero__banner, body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) .terms-hero__banner, body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) .media-policy-hero__banner, body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) picture img[class*='__banner'] { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border-radius: 0 !important; object-fit: contain !important; object-position: center center !important; background: transparent !important; filter: none !important; transform: none !important; box-sizing: border-box !important; } body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) .page-hero__content { display: contents !important; } body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) .hero-headline { order: 2 !important; box-sizing: border-box !important; width: 100% !important; padding: 0 var(--container-padding) !important; margin: 0 !important; text-align: left !important; max-width: none !important; } body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) .hero-copy { order: 3 !important; box-sizing: border-box !important; width: 100% !important; padding: 0 var(--container-padding) !important; margin: 0 !important; text-align: left !important; max-width: none !important; } body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) .page-hero__actions, body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) .hero-ctas { order: 6 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; padding: 0 var(--container-padding) !important; margin: 0 !important; gap: 0.75rem !important; } } /* All pages — hero banner image centered in page (≤991px, single global fix) */ @media (max-width: 991px) { #main-content > section.page-hero, .page-hero { overflow-x: clip !important; } #main-content > section.page-hero .hero-image-wrap, #main-content > section.page-hero [class*='-hero__media'], .page-hero .hero-image-wrap, .page-hero [class*='-hero__media'] { display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 20px !important; overflow: hidden !important; box-sizing: border-box !important; background: transparent !important; } #main-content > section.page-hero .hero-image-wrap .lazy-img-wrap, #main-content > section.page-hero [class*='-hero__media'] .lazy-img-wrap, .page-hero .hero-image-wrap .lazy-img-wrap, .page-hero [class*='-hero__media'] .lazy-img-wrap, #main-content > section.page-hero [class*='-hero__media'] picture, .page-hero [class*='-hero__media'] picture { display: block !important; width: 100% !important; max-width: 100% !important; margin: 0 auto !important; padding: 0 !important; overflow: hidden !important; box-sizing: border-box !important; text-align: center !important; } #main-content > section.page-hero img[class*='__banner'], #main-content > section.page-hero picture img[class*='__banner'], .page-hero img[class*='__banner'], .page-hero picture img[class*='__banner'] { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; max-height: min(820px, 72vh) !important; min-height: 0 !important; margin: 0 auto !important; padding: 0 !important; object-fit: contain !important; object-position: center center !important; transform: none !important; filter: none !important; box-sizing: border-box !important; } } /* Program pages — mobile hero stack matches home (≤767px) */ @media (max-width: 767px) { .program-detail-page #main-content > section.page-hero .page-hero__inner, .creative-makers-page #main-content > section.page-hero.creative-makers-hero .page-hero__inner, .creative-makers-page .page-hero.creative-makers-hero .page-hero__inner { padding: 0 !important; margin: 0 !important; gap: 1rem !important; row-gap: 1rem !important; } .program-detail-page #main-content > section.page-hero .page-hero__content, .creative-makers-page #main-content > section.page-hero.creative-makers-hero .page-hero__content, .creative-makers-page .page-hero.creative-makers-hero .page-hero__content { display: contents !important; } .program-detail-page #main-content > section.page-hero .hero-image-wrap, .program-detail-page #main-content > section.page-hero [class*='-hero__media'], .creative-makers-page #main-content > section.page-hero.creative-makers-hero .hero-image-wrap, .creative-makers-page #main-content > section.page-hero.creative-makers-hero .creative-makers-hero__media, .creative-makers-page .page-hero.creative-makers-hero .hero-image-wrap, .creative-makers-page .page-hero.creative-makers-hero .creative-makers-hero__media { order: 5 !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 var(--container-padding) !important; overflow: visible !important; justify-content: center !important; align-items: center !important; box-sizing: border-box !important; } .program-detail-page #main-content > section.page-hero .page-hero__actions, .program-detail-page #main-content > section.page-hero .hero-ctas, .creative-makers-page #main-content > section.page-hero.creative-makers-hero .page-hero__actions, .creative-makers-page #main-content > section.page-hero.creative-makers-hero .hero-ctas, .creative-makers-page .page-hero.creative-makers-hero .page-hero__actions, .creative-makers-page .page-hero.creative-makers-hero .hero-ctas { order: 6 !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 var(--container-padding) !important; flex-direction: column !important; align-items: stretch !important; gap: 0.75rem !important; } .program-detail-page #main-content > section.page-hero .hero-headline, .creative-makers-page #main-content > section.page-hero.creative-makers-hero .hero-headline, .creative-makers-page .page-hero.creative-makers-hero .hero-headline { order: 2 !important; width: 100% !important; padding: 0 var(--container-padding) !important; margin: 0 !important; text-align: left !important; max-width: none !important; } .program-detail-page #main-content > section.page-hero .hero-copy, .creative-makers-page #main-content > section.page-hero.creative-makers-hero .hero-copy, .creative-makers-page .page-hero.creative-makers-hero .hero-copy { order: 3 !important; width: 100% !important; padding: 0 var(--container-padding) !important; margin: 0 !important; text-align: left !important; max-width: none !important; } .program-detail-page #main-content > section.page-hero img[class*='__banner'], .program-detail-page #main-content > section.page-hero picture img[class*='__banner'], .creative-makers-page #main-content > section.page-hero.creative-makers-hero .creative-makers-hero__banner, .creative-makers-page .page-hero.creative-makers-hero .creative-makers-hero__banner, .creative-makers-page .page-hero.creative-makers-hero picture img.creative-makers-hero__banner { width: 100% !important; max-width: none !important; max-height: none !important; height: auto !important; object-fit: contain !important; object-position: center center !important; transform: none !important; } .program-detail-page #main-content > section.page-hero, .creative-makers-page #main-content > section.page-hero.creative-makers-hero { text-align: left !important; align-items: stretch !important; padding: 16px 0 24px !important; } } @media (max-width: 430px) { .creative-makers-page #main-content > section.page-hero.creative-makers-hero .hero-image-wrap, .creative-makers-page #main-content > section.page-hero.creative-makers-hero .creative-makers-hero__media, .creative-makers-page .page-hero.creative-makers-hero .hero-image-wrap, .creative-makers-page .page-hero.creative-makers-hero .creative-makers-hero__media { width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 20px !important; overflow: hidden !important; box-sizing: border-box !important; } .creative-makers-page #main-content > section.page-hero.creative-makers-hero .creative-makers-hero__banner, .creative-makers-page .page-hero.creative-makers-hero .creative-makers-hero__banner, .creative-makers-page .page-hero.creative-makers-hero picture img.creative-makers-hero__banner { width: 100% !important; max-width: 100% !important; max-height: min(820px, 72vh) !important; object-position: center center !important; transform: none !important; } } /* Explore hero — desktop: vertically center left content vs right image */ @media (min-width: 1024px) { #main-content > section.page-hero.explore-hero .page-hero__inner, .page-hero.explore-hero .page-hero__inner { align-items: center !important; } #main-content > section.page-hero.explore-hero .page-hero__content, .page-hero.explore-hero .page-hero__content { align-self: center !important; padding-top: 0 !important; padding-bottom: 0 !important; } .page-hero.explore-hero .explore-hero__media .lazy-img-wrap { display: flex; align-items: center; } .page-hero.explore-hero .explore-hero__banner { object-position: center center !important; } .page-hero.explore-hero .explore-hero__media, .page-hero.explore-hero .hero-image-wrap { align-self: center !important; align-items: center !important; } } /* For Parents hero — desktop: vertically center left content vs right image (no horizontal change) */ @media (min-width: 1024px) { #main-content > section.page-hero.for-parents-hero .page-hero__inner, .page-hero.for-parents-hero .page-hero__inner { align-items: center !important; } #main-content > section.page-hero.for-parents-hero .page-hero__content, .page-hero.for-parents-hero .page-hero__content { align-self: center !important; padding-top: 0 !important; padding-bottom: 0 !important; } #main-content > section.page-hero.for-parents-hero .about-hero__media, #main-content > section.page-hero.for-parents-hero .hero-image-wrap, .page-hero.for-parents-hero .about-hero__media, .page-hero.for-parents-hero .hero-image-wrap { align-self: center !important; } } /* Hero eyebrow — hidden on desktop except Home and About */ @media (min-width: 1024px) { .page-hero:not(.home-hero) .hero-label, .page-hero:not(.home-hero) [class*='__eyebrow'] { display: none !important; } .about-page .page-hero.about-hero .hero-label { display: inline-flex !important; align-items: center; justify-content: flex-start; margin: 0 0 0.7rem !important; font-family: var(--font-body); font-size: clamp(0.78rem, 0.95vw, 0.92rem); font-weight: 700; letter-spacing: 0.16em; line-height: 1.3; text-transform: uppercase; text-align: left; color: var(--color-pink); } .about-page .page-hero.about-hero .hero-label::before, .about-page .page-hero.about-hero .hero-label::after { content: none !important; display: none !important; } } /* Our Vision — 10px space between checklist and CTA buttons (desktop) */ @media (min-width: 1024px) { .page-hero.vision-hero .page-hero__extra + .page-hero__actions, .page-hero.vision-hero .page-hero__extra + .hero-ctas { margin-top: 10px !important; } } /* Partners + Contact — desktop: center heading/CTAs; left-align paragraph under heading */ @media (min-width: 1024px) { .page-hero.partners-hero .page-hero__content, .page-hero.contact-hero .page-hero__content { align-items: center; text-align: center; } .page-hero.partners-hero .hero-headline, .page-hero.contact-hero .hero-headline { text-align: center; } .page-hero.partners-hero .hero-copy, .page-hero.contact-hero .hero-copy { text-align: left !important; align-self: stretch; } .page-hero.partners-hero .hero-headline [class*='__title-line'], .page-hero.contact-hero .hero-headline [class*='__title-line'], .page-hero.contact-hero .hero-headline .contact-hero__contact-word, .page-hero.contact-hero .hero-headline .contact-hero__us-word { text-align: center; } .page-hero.partners-hero .page-hero__actions, .page-hero.partners-hero .hero-ctas, .page-hero.contact-hero .page-hero__actions, .page-hero.contact-hero .hero-ctas { justify-content: center; } .page-hero.partners-hero .heading-underline--partners, .page-hero.contact-hero .heading-underline { display: inline-block; } } /* Home spotlight — center ideas photo on mobile */ @media (max-width: 768px) { .spotlight-card--ideas .spotlight-card__figure { justify-content: center; padding-left: clamp(1.1rem, 1.9vw, 1.55rem); } .spotlight-card--ideas .spotlight-card__figure-wrap { width: min(100%, 320px); max-width: 100%; margin-inline: auto; } .spotlight-card--ideas .spotlight-card__figure-wrap .lazy-img-wrap { width: 100%; height: auto; margin-inline: auto; } .spotlight-card--ideas .spotlight-card__figure-img { display: block; width: 100%; max-width: 320px; height: auto; margin-inline: auto; object-fit: contain; object-position: center center; } } /* Explore full-banner hero — edge-to-edge width on all breakpoints */ #main-content > section.page-hero.explore-hero.explore-hero--full-banner, .page-hero.explore-hero.explore-hero--full-banner { padding-left: 0 !important; padding-right: 0 !important; } .explore-page .page-hero.explore-hero.explore-hero--full-banner .explore-hero__banner-wrap, .page-hero.explore-hero.explore-hero--full-banner .explore-hero__banner-wrap, .explore-page .page-hero.explore-hero.explore-hero--full-banner picture, .page-hero.explore-hero.explore-hero--full-banner picture { width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } .explore-page .page-hero.explore-hero.explore-hero--full-banner .explore-hero__banner, .page-hero.explore-hero.explore-hero--full-banner .explore-hero__banner { width: 100% !important; max-width: none !important; max-height: none !important; object-fit: cover !important; object-position: center center !important; } /* Home hero banner — same display size as About page */ @media (min-width: 1024px) { .home-page .page-hero.home-welcome-hero .about-hero__media, .home-page .page-hero.home-welcome-hero .hero-image-wrap { flex: 1 1 58% !important; min-width: 0 !important; overflow: visible !important; } .home-page .page-hero.home-welcome-hero .about-hero__media .lazy-img-wrap, .home-page .page-hero.home-welcome-hero .about-hero__media picture { overflow: visible !important; width: 100% !important; max-width: none !important; } .home-page .page-hero.home-welcome-hero .about-hero__banner { max-height: none !important; width: 100% !important; max-width: 100% !important; object-fit: contain !important; object-position: right center !important; filter: none !important; background: transparent !important; background-color: transparent !important; } /* Welcome hero — match About: row CTAs, smaller logo, vertical center vs banner */ .home-page #main-content > section.page-hero.home-hero .page-hero__inner, .home-page .page-hero.home-welcome-hero .page-hero__inner { align-items: center !important; } .home-page .page-hero.home-hero .page-hero__content { align-self: center !important; justify-content: flex-start !important; } .home-page .page-hero.home-hero .home-hero__brand { margin-bottom: clamp(0.45rem, 0.9vw, 0.65rem); } .home-page .page-hero.home-hero .home-hero__logo { width: min(100%, 320px) !important; max-width: 320px !important; height: auto !important; } .home-page .page-hero.home-hero .about-hero__media, .home-page .page-hero.home-hero .hero-image-wrap { align-items: center !important; align-self: center !important; justify-content: flex-end !important; } .home-page .page-hero.home-hero .about-hero__media .lazy-img-wrap, .home-page .page-hero.home-hero .hero-image-wrap .lazy-img-wrap, .home-page .page-hero.home-hero .hero-image-wrap picture { align-items: center !important; justify-content: flex-end !important; } /* Home hero — text and banner sit close, like the reference lockup */ .home-page .page-hero.home-hero .page-hero__inner, .home-page .page-hero.home-welcome-hero .page-hero__inner { grid-template-columns: minmax(0, max-content) minmax(280px, 1fr) !important; justify-content: start !important; column-gap: 0 !important; gap: 0 !important; } .home-page .page-hero.home-hero .page-hero__content, .home-page .page-hero.home-welcome-hero .page-hero__content { width: max-content !important; max-width: 44rem !important; justify-self: start !important; } .home-page .page-hero.home-hero .about-hero__media, .home-page .page-hero.home-hero .hero-image-wrap, .home-page .page-hero.home-welcome-hero .about-hero__media, .home-page .page-hero.home-welcome-hero .hero-image-wrap { justify-content: flex-start !important; margin-left: 0 !important; } .home-page .page-hero.home-welcome-hero .about-hero__banner, .home-page .page-hero.home-hero .about-hero__banner { object-position: left center !important; } } @media (min-width: 1201px) { .home-page #main-content > section.page-hero.home-hero .page-hero__inner, .home-page .page-hero.home-welcome-hero .page-hero__inner { display: grid !important; align-items: center !important; } } @media (max-width: 991px) { .home-page .page-hero.home-welcome-hero .about-hero__media, .home-page .page-hero.home-welcome-hero .hero-image-wrap { overflow: visible !important; } .home-page .page-hero.home-welcome-hero .about-hero__media .lazy-img-wrap, .home-page .page-hero.home-welcome-hero .about-hero__media picture { overflow: visible !important; max-width: none !important; } .home-page .page-hero.home-welcome-hero .about-hero__banner { max-height: none !important; max-width: none !important; width: 100% !important; object-fit: contain !important; object-position: center top !important; } } @media (max-width: 767px) { /* Home welcome — mobile stack: logo → copy → banner → CTAs (reference layout) */ .home-page .page-hero.home-welcome-hero .page-hero__inner { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 1rem !important; row-gap: 1rem !important; } .home-page .page-hero.home-welcome-hero .page-hero__content { display: contents !important; } .home-page .page-hero.home-welcome-hero .home-hero__brand { order: 1 !important; padding: 0 var(--container-padding) !important; margin: 0 !important; } .home-page .page-hero.home-welcome-hero .home-hero__logo-heading, .home-page .page-hero.home-welcome-hero .home-hero__logo-heading picture, .home-page .page-hero.home-welcome-hero .home-hero__logo { display: block; margin: 0 !important; padding: 0 !important; line-height: 0; } .home-page .page-hero.home-welcome-hero .hero-copy { order: 2 !important; padding: 0 var(--container-padding) !important; margin: calc(-1 * var(--page-hero-mobile-stack-gap, 1rem)) 0 0 !important; text-align: left !important; max-width: none !important; } .home-page .page-hero.home-welcome-hero .about-hero__media, .home-page .page-hero.home-welcome-hero .hero-image-wrap { order: 3 !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: none !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; } .home-page .page-hero.home-welcome-hero .about-hero__media .lazy-img-wrap, .home-page .page-hero.home-welcome-hero .about-hero__media picture { width: 100% !important; max-width: none !important; overflow: visible !important; } .home-page .page-hero.home-welcome-hero .about-hero__banner { width: 100% !important; max-width: none !important; max-height: none !important; object-fit: contain !important; object-position: center center !important; } .home-page .page-hero.home-welcome-hero .page-hero__actions, .home-page .page-hero.home-welcome-hero .home-hero__actions { order: 4 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; align-self: stretch !important; width: 100% !important; max-width: none !important; padding: 0 var(--container-padding) !important; margin: 0 !important; gap: 0.75rem !important; grid-template-columns: none !important; } .home-page .page-hero.home-welcome-hero .page-hero__actions .btn, .home-page .page-hero.home-welcome-hero .home-hero__actions .btn { width: 100% !important; max-width: none !important; } .home-page .page-hero.home-welcome-hero .page-hero__actions .btn--solid, .home-page .page-hero.home-welcome-hero .home-hero__actions .btn--solid { white-space: nowrap !important; font-size: clamp(11px, 3.2vw, 13px) !important; padding: 0.78rem 0.55rem !important; gap: 0.35rem !important; letter-spacing: -0.01em; } .home-page .page-hero.home-welcome-hero .page-hero__actions .btn--solid .home-hero__cta-icon, .home-page .page-hero.home-welcome-hero .home-hero__actions .btn--solid .home-hero__cta-icon { width: 1rem !important; height: 1rem !important; flex-shrink: 0; } } /* Main nav pages — mobile/tablet hero stack matches home: text → banner → CTAs (≤1023px) */ @media (max-width: 1023px) { .about-page .page-hero .page-hero__inner, .explore-page .page-hero .page-hero__inner, .for-parents-page .page-hero .page-hero__inner, .our-vision-page .page-hero .page-hero__inner, .get-involved-page .page-hero .page-hero__inner, .partners-page .page-hero .page-hero__inner, .contact-page .page-hero .page-hero__inner { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: var(--page-hero-mobile-stack-gap, 1rem) !important; row-gap: var(--page-hero-mobile-stack-gap, 1rem) !important; } .about-page .page-hero .page-hero__content, .explore-page .page-hero .page-hero__content, .for-parents-page .page-hero .page-hero__content, .our-vision-page .page-hero .page-hero__content, .get-involved-page .page-hero .page-hero__content, .partners-page .page-hero .page-hero__content, .contact-page .page-hero .page-hero__content { display: contents !important; } .about-page .page-hero .hero-label, .explore-page .page-hero .hero-label, .for-parents-page .page-hero .hero-label, .our-vision-page .page-hero .hero-label, .get-involved-page .page-hero .hero-label, .partners-page .page-hero .hero-label, .contact-page .page-hero .hero-label { order: 1 !important; box-sizing: border-box !important; width: 100% !important; padding: 0 var(--container-padding) !important; margin: 0 !important; text-align: left !important; } .about-page .page-hero .hero-headline, .explore-page .page-hero .hero-headline, .for-parents-page .page-hero .hero-headline, .our-vision-page .page-hero .hero-headline, .get-involved-page .page-hero .hero-headline, .partners-page .page-hero .hero-headline, .contact-page .page-hero .hero-headline { order: 2 !important; box-sizing: border-box !important; width: 100% !important; padding: 0 var(--container-padding) !important; margin: 0 !important; text-align: left !important; max-width: none !important; } .about-page .page-hero .hero-copy, .explore-page .page-hero .hero-copy, .for-parents-page .page-hero .hero-copy, .our-vision-page .page-hero .hero-copy, .get-involved-page .page-hero .hero-copy, .partners-page .page-hero .hero-copy, .contact-page .page-hero .hero-copy { order: 3 !important; box-sizing: border-box !important; width: 100% !important; padding: 0 var(--container-padding) !important; margin: 0 !important; text-align: left !important; max-width: none !important; } .about-page .page-hero .page-hero__extra, .explore-page .page-hero .page-hero__extra, .for-parents-page .page-hero .page-hero__extra, .our-vision-page .page-hero .page-hero__extra, .get-involved-page .page-hero .page-hero__extra, .partners-page .page-hero .page-hero__extra, .contact-page .page-hero .page-hero__extra { order: 4 !important; box-sizing: border-box !important; width: 100% !important; padding: 0 var(--container-padding) !important; margin: 0 !important; } .about-page .page-hero .about-hero__media, .about-page .page-hero .hero-image-wrap, .explore-page .page-hero .explore-hero__media, .explore-page .page-hero .hero-image-wrap, .for-parents-page .page-hero .about-hero__media, .for-parents-page .page-hero .hero-image-wrap, .our-vision-page .page-hero .about-hero__media, .our-vision-page .page-hero .hero-image-wrap, .get-involved-page .page-hero .about-hero__media, .get-involved-page .page-hero .hero-image-wrap, .partners-page .page-hero .about-hero__media, .partners-page .page-hero .hero-image-wrap, .contact-page .page-hero .about-hero__media, .contact-page .page-hero .hero-image-wrap { order: 5 !important; display: flex !important; justify-content: center !important; align-items: center !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; } .about-page .page-hero .about-hero__banner, .about-page .page-hero .explore-hero__banner, .explore-page .page-hero .explore-hero__banner, .for-parents-page .page-hero .about-hero__banner, .our-vision-page .page-hero .about-hero__banner, .get-involved-page .page-hero .about-hero__banner, .partners-page .page-hero .about-hero__banner, .contact-page .page-hero .about-hero__banner, .about-page .page-hero picture img[class*='__banner'], .explore-page .page-hero picture img[class*='__banner'], .for-parents-page .page-hero picture img[class*='__banner'], .our-vision-page .page-hero picture img[class*='__banner'], .get-involved-page .page-hero picture img[class*='__banner'], .partners-page .page-hero picture img[class*='__banner'], .contact-page .page-hero picture img[class*='__banner'] { display: block !important; width: 100% !important; max-width: none !important; max-height: none !important; height: auto !important; object-fit: contain !important; object-position: center center !important; margin: 0 !important; } .about-page .page-hero .page-hero__actions, .about-page .page-hero .hero-ctas, .explore-page .page-hero .page-hero__actions, .explore-page .page-hero .hero-ctas, .for-parents-page .page-hero .page-hero__actions, .for-parents-page .page-hero .hero-ctas, .our-vision-page .page-hero .page-hero__actions, .our-vision-page .page-hero .hero-ctas, .get-involved-page .page-hero .page-hero__actions, .get-involved-page .page-hero .hero-ctas, .partners-page .page-hero .page-hero__actions, .partners-page .page-hero .hero-ctas, .contact-page .page-hero .page-hero__actions, .contact-page .page-hero .hero-ctas { order: 6 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; align-self: stretch !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 var(--container-padding) !important; gap: 0.75rem !important; } .about-page .page-hero .page-hero__actions .btn, .about-page .page-hero .hero-ctas .btn, .explore-page .page-hero .page-hero__actions .btn, .explore-page .page-hero .hero-ctas .btn, .for-parents-page .page-hero .page-hero__actions .btn, .for-parents-page .page-hero .hero-ctas .btn, .our-vision-page .page-hero .page-hero__actions .btn, .our-vision-page .page-hero .hero-ctas .btn, .get-involved-page .page-hero .page-hero__actions .btn, .get-involved-page .page-hero .hero-ctas .btn, .partners-page .page-hero .page-hero__actions .btn, .partners-page .page-hero .hero-ctas .btn, .contact-page .page-hero .page-hero__actions .btn, .contact-page .page-hero .hero-ctas .btn { width: 100% !important; max-width: none !important; justify-content: center !important; white-space: normal !important; } .about-page .page-hero .about-hero__deco, .explore-page .page-hero .about-hero__deco, .for-parents-page .page-hero .about-hero__deco, .our-vision-page .page-hero .about-hero__deco, .get-involved-page .page-hero .about-hero__deco, .partners-page .page-hero .about-hero__deco, .contact-page .page-hero .about-hero__deco { display: none !important; } } /* Mobile hero spec (320–480px): single column, type scale, image below text, full-width CTAs */ @media (max-width: 480px) { :root { --mobile-hero-headline-size: clamp(28px, 8.5vw, 32px); --mobile-hero-subtext-size: clamp(14px, 4.2vw, 16px); --mobile-hero-stack-gap: 1rem; --mobile-hero-inline-pad: 20px; } .home-page .page-hero.home-welcome-hero .page-hero__inner { gap: var(--mobile-hero-stack-gap) !important; row-gap: var(--mobile-hero-stack-gap) !important; } .home-page .page-hero.home-welcome-hero .home-hero__brand, .home-page .page-hero.home-welcome-hero .hero-copy, .home-page .page-hero.home-welcome-hero .about-hero__media, .home-page .page-hero.home-welcome-hero .hero-image-wrap, .home-page .page-hero.home-welcome-hero .page-hero__actions, .home-page .page-hero.home-welcome-hero .home-hero__actions { padding-left: var(--mobile-hero-inline-pad) !important; padding-right: var(--mobile-hero-inline-pad) !important; } .home-page .page-hero.home-welcome-hero .hero-copy { font-size: var(--mobile-hero-subtext-size) !important; line-height: 1.55 !important; } .home-page .page-hero.home-welcome-hero .home-hero__logo { width: min(100%, 320px) !important; max-width: 100% !important; height: auto !important; } .home-page .page-hero.home-welcome-hero .page-hero__actions, .home-page .page-hero.home-welcome-hero .home-hero__actions { gap: 0.75rem !important; } .home-page .page-hero.home-welcome-hero .page-hero__actions .btn, .home-page .page-hero.home-welcome-hero .home-hero__actions .btn { width: 100% !important; max-width: none !important; justify-content: center !important; padding: 0.85rem 1rem !important; } .home-page .page-hero.home-welcome-hero .page-hero__actions .btn--outline, .home-page .page-hero.home-welcome-hero .home-hero__actions .btn--outline { font-size: clamp(14px, 3.8vw, 16px) !important; white-space: nowrap !important; } .home-page .page-hero.home-welcome-hero .page-hero__actions .btn--solid, .home-page .page-hero.home-welcome-hero .home-hero__actions .btn--solid { white-space: nowrap !important; font-size: clamp(10.5px, 3.15vw, 12.5px) !important; padding: 0.85rem 0.45rem !important; gap: 0.3rem !important; letter-spacing: -0.015em; } .page-hero.home-hero .hero-headline, .page-hero.about-hero .hero-headline, .page-hero.explore-hero .hero-headline, .page-hero.for-parents-hero .hero-headline, .page-hero.vision-hero .hero-headline, .page-hero.partners-hero .hero-headline, .page-hero.contact-hero .hero-headline, .page-hero.get-involved-hero .hero-headline { font-size: var(--mobile-hero-headline-size) !important; line-height: 1.15 !important; } .page-hero.home-hero .hero-copy, .page-hero.about-hero .hero-copy, .page-hero.explore-hero .hero-copy, .page-hero.for-parents-hero .hero-copy, .page-hero.vision-hero .hero-copy, .page-hero.partners-hero .hero-copy, .page-hero.contact-hero .hero-copy, .page-hero.get-involved-hero .hero-copy { font-size: var(--mobile-hero-subtext-size) !important; line-height: 1.55 !important; } .page-hero.home-hero .page-hero__actions, .page-hero.about-hero .page-hero__actions, .page-hero.explore-hero .page-hero__actions, .page-hero.for-parents-hero .page-hero__actions, .page-hero.vision-hero .page-hero__actions, .page-hero.partners-hero .page-hero__actions, .page-hero.contact-hero .page-hero__actions, .page-hero.get-involved-hero .page-hero__actions, .page-hero.home-hero .hero-ctas, .page-hero.about-hero .hero-ctas, .page-hero.explore-hero .hero-ctas, .page-hero.for-parents-hero .hero-ctas, .page-hero.vision-hero .hero-ctas, .page-hero.partners-hero .hero-ctas, .page-hero.contact-hero .hero-ctas, .page-hero.get-involved-hero .hero-ctas { flex-direction: column !important; align-items: stretch !important; width: 100% !important; max-width: none !important; gap: 0.75rem !important; } .page-hero.home-hero .page-hero__actions .btn, .page-hero.about-hero .page-hero__actions .btn, .page-hero.explore-hero .page-hero__actions .btn, .page-hero.for-parents-hero .page-hero__actions .btn, .page-hero.vision-hero .page-hero__actions .btn, .page-hero.partners-hero .page-hero__actions .btn, .page-hero.contact-hero .page-hero__actions .btn, .page-hero.get-involved-hero .page-hero__actions .btn, .page-hero.home-hero .hero-ctas .btn, .page-hero.about-hero .hero-ctas .btn, .page-hero.explore-hero .hero-ctas .btn, .page-hero.for-parents-hero .hero-ctas .btn, .page-hero.vision-hero .hero-ctas .btn, .page-hero.partners-hero .hero-ctas .btn, .page-hero.contact-hero .hero-ctas .btn, .page-hero.get-involved-hero .hero-ctas .btn { width: 100% !important; max-width: none !important; } } /* Home hero — feathered PNG: no box, clip, or filter edge (match About) */ .home-page .page-hero.home-welcome-hero .about-hero__media, .home-page .page-hero.home-welcome-hero .hero-image-wrap, .home-page .page-hero.home-welcome-hero .about-hero__media .lazy-img-wrap, .home-page .page-hero.home-welcome-hero .about-hero__media picture, .home-page .page-hero.home-welcome-hero .lazy-img-wrap { background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; outline: none !important; } .home-page .page-hero.home-welcome-hero .about-hero__banner { border: none !important; border-radius: 0 !important; box-shadow: none !important; outline: none !important; filter: none !important; background: transparent !important; background-color: transparent !important; } @media (max-width: 991px) { .home-page #main-content > section.page-hero.home-hero .hero-image-wrap, .home-page #main-content > section.page-hero.home-hero .about-hero__media, .home-page .page-hero.home-welcome-hero .hero-image-wrap, .home-page .page-hero.home-welcome-hero .about-hero__media, .home-page .page-hero.home-welcome-hero .about-hero__media .lazy-img-wrap, .home-page .page-hero.home-welcome-hero .about-hero__media picture { overflow: visible !important; padding-inline: var(--container-padding) !important; } .home-page .page-hero.home-welcome-hero .about-hero__banner, .home-page #main-content > section.page-hero.home-hero picture img.about-hero__banner { overflow: visible !important; filter: none !important; background: transparent !important; background-color: transparent !important; } } /* Home full-banner hero — full width, natural height, no crop or upscale blur */ #main-content > section.page-hero.home-hero.home-hero--full-banner, .page-hero.home-hero.home-hero--full-banner { min-height: 0 !important; height: auto !important; max-height: none !important; padding: 0 !important; margin: 0 !important; overflow: visible !important; background-color: #fff; } .home-hero--full-banner .home-hero__banner-wrap, .home-hero--full-banner picture { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; line-height: 0; } .home-hero--full-banner .home-hero__banner { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; min-height: 0 !important; max-height: none !important; object-fit: contain !important; object-position: center top !important; transform: none !important; } /* Home full-banner — mobile/tablet: same left/right inset as header */ @media (max-width: 1023px) { #main-content > section.page-hero.home-hero.home-hero--full-banner, .page-hero.home-hero.home-hero--full-banner { padding-left: var(--container-padding) !important; padding-right: var(--container-padding) !important; padding-top: 0 !important; padding-bottom: 0 !important; } } /* Cropped hero banners — Our Vision + For Parents (desktop, wins over shared hero caps) */ @media (min-width: 1024px) { .our-vision-page #main-content > section.page-hero.vision-hero:not(.partners-hero) .page-hero__inner, .our-vision-page .page-hero.vision-hero:not(.partners-hero) .page-hero__inner, .for-parents-page #main-content > section.page-hero.for-parents-hero .page-hero__inner, .for-parents-page .page-hero.for-parents-hero .page-hero__inner { align-items: center !important; gap: clamp(0.75rem, 1.35vw, 1.35rem) !important; } .our-vision-page #main-content > section.page-hero.vision-hero:not(.partners-hero) .about-hero__media, .our-vision-page #main-content > section.page-hero.vision-hero:not(.partners-hero) .hero-image-wrap, .our-vision-page .page-hero.vision-hero:not(.partners-hero) .about-hero__media, .our-vision-page .page-hero.vision-hero:not(.partners-hero) .hero-image-wrap, .for-parents-page #main-content > section.page-hero.for-parents-hero .about-hero__media, .for-parents-page #main-content > section.page-hero.for-parents-hero .hero-image-wrap, .for-parents-page .page-hero.for-parents-hero .about-hero__media, .for-parents-page .page-hero.for-parents-hero .hero-image-wrap { justify-content: flex-end !important; align-items: center !important; } .our-vision-page #main-content > section.page-hero.vision-hero:not(.partners-hero) .about-hero__banner, .our-vision-page #main-content > section.page-hero.vision-hero:not(.partners-hero) picture img.about-hero__banner, .our-vision-page .page-hero.vision-hero:not(.partners-hero) .about-hero__banner, .our-vision-page .page-hero.vision-hero:not(.partners-hero) picture img.about-hero__banner { width: 100% !important; max-width: 100% !important; height: auto !important; max-height: min(610px, 72vh) !important; object-fit: contain !important; object-position: left center !important; margin-left: 0 !important; margin-right: 0 !important; transform: none !important; } .for-parents-page #main-content > section.page-hero.for-parents-hero .about-hero__banner, .for-parents-page #main-content > section.page-hero.for-parents-hero picture img.about-hero__banner, .for-parents-page .page-hero.for-parents-hero .about-hero__banner, .for-parents-page .page-hero.for-parents-hero picture img.about-hero__banner { width: 100% !important; max-width: 100% !important; height: auto !important; max-height: none !important; min-height: 0 !important; object-fit: contain !important; object-position: left center !important; margin-left: 0 !important; margin-right: 0 !important; transform: none !important; } } /* Partners page — desktop hero banner (−50px vs Vision/For Parents) */ @media (min-width: 1024px) { .partners-page #main-content > section.page-hero.partners-hero .about-hero__banner, .partners-page #main-content > section.page-hero.partners-hero picture img.about-hero__banner, .partners-page .page-hero.partners-hero.vision-hero .about-hero__banner, .partners-page .page-hero.partners-hero.vision-hero picture img.about-hero__banner, .partners-page .page-hero.partners-hero .about-hero__banner, .partners-page .page-hero.partners-hero picture img.about-hero__banner { width: 100% !important; max-width: 100% !important; height: auto !important; max-height: min(560px, calc(72vh - 50px)) !important; object-fit: contain !important; object-position: left center !important; margin-left: 0 !important; margin-right: 0 !important; transform: none !important; } .partners-page .page-hero.partners-hero .about-hero__media, .partners-page .page-hero.partners-hero .hero-image-wrap { justify-content: flex-end !important; align-items: center !important; } .partners-page .page-hero.partners-hero .about-hero__media picture, .partners-page .page-hero.partners-hero .about-hero__media .lazy-img-wrap { width: auto !important; max-width: 100% !important; margin-left: auto !important; margin-right: 0 !important; } } /* Explore hub + program sub-pages — desktop hero banner (shared size) */ @media (min-width: 1024px) { .explore-page, .program-detail-page { --explore-hub-hero-banner-h: min(510px, calc(72vh - 80px)); } .explore-page #main-content > section.page-hero.explore-hero .page-hero__inner, .explore-page .page-hero.explore-hero .page-hero__inner, .program-detail-page #main-content > section.page-hero .page-hero__inner, .program-detail-page .page-hero .page-hero__inner { align-items: center !important; gap: clamp(0.75rem, 1.35vw, 1.35rem) !important; } .explore-page #main-content > section.page-hero.explore-hero .explore-hero__media, .explore-page #main-content > section.page-hero.explore-hero .hero-image-wrap, .explore-page .page-hero.explore-hero .explore-hero__media, .explore-page .page-hero.explore-hero .hero-image-wrap, .program-detail-page #main-content > section.page-hero .creative-makers-hero__media, .program-detail-page #main-content > section.page-hero .hero-image-wrap, .program-detail-page .page-hero .creative-makers-hero__media, .program-detail-page .page-hero .hero-image-wrap { justify-content: flex-end !important; align-items: center !important; overflow: visible !important; } .explore-page .page-hero.explore-hero .explore-hero__media picture, .explore-page .page-hero.explore-hero .explore-hero__media .lazy-img-wrap, .explore-page .page-hero.explore-hero .hero-image-wrap picture, .explore-page .page-hero.explore-hero .hero-image-wrap .lazy-img-wrap, .program-detail-page .page-hero .creative-makers-hero__media picture, .program-detail-page .page-hero .creative-makers-hero__media .lazy-img-wrap, .program-detail-page .page-hero .hero-image-wrap picture, .program-detail-page .page-hero .hero-image-wrap .lazy-img-wrap { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; } .explore-page #main-content > section.page-hero.explore-hero .explore-hero__banner, .explore-page #main-content > section.page-hero.explore-hero picture img.explore-hero__banner, .explore-page .page-hero.explore-hero .explore-hero__banner, .explore-page .page-hero.explore-hero picture img.explore-hero__banner, .program-detail-page #main-content > section.page-hero .creative-makers-hero__banner, .program-detail-page #main-content > section.page-hero picture img.creative-makers-hero__banner, .program-detail-page .page-hero .creative-makers-hero__banner, .program-detail-page .page-hero picture img.creative-makers-hero__banner { width: 100% !important; max-width: 100% !important; height: auto !important; max-height: var(--explore-hub-hero-banner-h) !important; object-fit: contain !important; object-position: left center !important; margin-left: 0 !important; margin-right: 0 !important; border-radius: 0 !important; transform: none !important; filter: none !important; } .explore-page .page-hero.explore-hero img.lazy-img.explore-hero__banner, .program-detail-page .page-hero img.lazy-img.creative-makers-hero__banner { width: 100% !important; max-width: 100% !important; transform: none !important; } } /* All pages — mobile/tablet hero matches home: text → full-width banner → CTAs (≤1023px) */ @media (max-width: 1023px) { #main-content > section.page-hero:not(.home-welcome-hero), #main-content .page-hero:not(.home-welcome-hero) { text-align: left !important; align-items: stretch !important; } #main-content .page-hero:not(.home-welcome-hero) .page-hero__inner { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 1rem !important; row-gap: 1rem !important; padding-left: 0 !important; padding-right: 0 !important; min-height: 0 !important; overflow: visible !important; } #main-content .page-hero:not(.home-welcome-hero) .page-hero__content { display: contents !important; } #main-content .page-hero:not(.home-welcome-hero) .hero-label, #main-content .page-hero:not(.home-welcome-hero) [class*='__eyebrow'] { order: 1 !important; box-sizing: border-box !important; width: 100% !important; padding: 0 var(--container-padding) !important; margin: 0 !important; text-align: left !important; } #main-content .page-hero:not(.home-welcome-hero) .hero-headline, #main-content .page-hero:not(.home-welcome-hero) .page-hero__text h1 { order: 2 !important; box-sizing: border-box !important; width: 100% !important; padding: 0 var(--container-padding) !important; margin: 0 !important; text-align: left !important; max-width: none !important; } #main-content .page-hero:not(.home-welcome-hero) .hero-copy, #main-content .page-hero:not(.home-welcome-hero) .page-hero__text .hero-copy { order: 3 !important; box-sizing: border-box !important; width: 100% !important; padding: 0 var(--container-padding) !important; margin: 0 !important; text-align: left !important; max-width: none !important; } #main-content .page-hero:not(.home-welcome-hero) .page-hero__extra, #main-content .page-hero:not(.home-welcome-hero) .explore-hero__heading-block, #main-content .page-hero:not(.home-welcome-hero) .creative-makers-breadcrumbs { order: 4 !important; box-sizing: border-box !important; width: 100% !important; padding: 0 var(--container-padding) !important; margin: 0 !important; text-align: left !important; } #main-content .page-hero:not(.home-welcome-hero) .hero-image-wrap, #main-content .page-hero:not(.home-welcome-hero) [class*='-hero__media'] { order: 5 !important; display: flex !important; flex: none !important; justify-content: center !important; align-items: center !important; align-self: stretch !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 var(--container-padding) !important; overflow: visible !important; background: transparent !important; } #main-content .page-hero:not(.home-welcome-hero) .hero-image-wrap .lazy-img-wrap, #main-content .page-hero:not(.home-welcome-hero) [class*='-hero__media'] .lazy-img-wrap, #main-content .page-hero:not(.home-welcome-hero) [class*='-hero__media'] picture, #main-content .page-hero:not(.home-welcome-hero) .hero-image-wrap picture { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; text-align: center !important; } #main-content .page-hero:not(.home-welcome-hero) img[class*='__banner'], #main-content .page-hero:not(.home-welcome-hero) picture img[class*='__banner'], #main-content .page-hero:not(.home-welcome-hero) .hero-image-wrap img:not([class*='deco']) { display: block !important; width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; object-fit: contain !important; object-position: center center !important; transform: none !important; filter: none !important; border-radius: 0 !important; } #main-content .page-hero:not(.home-welcome-hero) .page-hero__actions, #main-content .page-hero:not(.home-welcome-hero) .hero-ctas, #main-content .page-hero:not(.home-welcome-hero) [class*='__actions'].hero-ctas { order: 6 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; align-self: stretch !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 var(--container-padding) !important; gap: 0.75rem !important; grid-template-columns: none !important; } #main-content .page-hero:not(.home-welcome-hero) .page-hero__actions .btn, #main-content .page-hero:not(.home-welcome-hero) .hero-ctas .btn { width: 100% !important; max-width: none !important; justify-content: center !important; } #main-content .page-hero:not(.home-welcome-hero) .page-hero__actions .btn--solid, #main-content .page-hero:not(.home-welcome-hero) .hero-ctas .btn--solid { white-space: nowrap !important; font-size: clamp(11px, 3.2vw, 13px) !important; padding: 0.78rem 0.55rem !important; gap: 0.35rem !important; letter-spacing: -0.01em; } #main-content .page-hero:not(.home-welcome-hero) .about-hero__deco, #main-content .page-hero:not(.home-welcome-hero) [class*='-hero__deco']:not(.home-hero__deco) { display: none !important; } } /* Program detail heroes — beat legacy banner-first overrides (≤1023px) */ @media (max-width: 1023px) { .program-detail-page #main-content > section.page-hero.creative-makers-hero .creative-makers-hero__media, .program-detail-page #main-content > section.page-hero .hero-image-wrap, .program-detail-page #main-content > section.page-hero [class*='-hero__media'], .creative-makers-page #main-content > section.page-hero.creative-makers-hero .creative-makers-hero__media, .creative-makers-page #main-content > section.page-hero.creative-makers-hero .hero-image-wrap { order: 5 !important; overflow: visible !important; justify-content: center !important; align-items: center !important; } .program-detail-page #main-content > section.page-hero .page-hero__content, .creative-makers-page #main-content > section.page-hero.creative-makers-hero .page-hero__content { display: contents !important; } .program-detail-page #main-content > section.page-hero .page-hero__actions, .program-detail-page #main-content > section.page-hero .hero-ctas, .creative-makers-page #main-content > section.page-hero.creative-makers-hero .page-hero__actions, .creative-makers-page #main-content > section.page-hero.creative-makers-hero .hero-ctas { order: 6 !important; } .program-detail-page #main-content > section.page-hero picture img.creative-makers-hero__banner, .program-detail-page #main-content > section.page-hero .creative-makers-hero__banner, .creative-makers-page #main-content > section.page-hero.creative-makers-hero picture img.creative-makers-hero__banner, .creative-makers-page #main-content > section.page-hero.creative-makers-hero .creative-makers-hero__banner { width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important; margin-left: 0 !important; margin-right: 0 !important; object-fit: contain !important; object-position: center center !important; } .program-detail-page #main-content > section.page-hero .hero-headline, .program-detail-page #main-content > section.page-hero .hero-copy, .creative-makers-page #main-content > section.page-hero.creative-makers-hero .hero-headline, .creative-makers-page #main-content > section.page-hero.creative-makers-hero .hero-copy { text-align: left !important; max-width: none !important; } } /* About page — mobile: text → banner → CTAs (home layout, final override ≤767px) */ @media (max-width: 767px) { .about-page #main-content > section.page-hero.about-hero .page-hero__inner { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 1rem !important; row-gap: 1rem !important; padding-left: 0 !important; padding-right: 0 !important; } .about-page #main-content > section.page-hero.about-hero .page-hero__content { display: contents !important; } .about-page #main-content > section.page-hero.about-hero .hero-label { order: 1 !important; } .about-page #main-content > section.page-hero.about-hero .hero-headline { order: 2 !important; } .about-page #main-content > section.page-hero.about-hero .hero-copy { order: 3 !important; } .about-page #main-content > section.page-hero.about-hero .about-hero__media, .about-page #main-content > section.page-hero.about-hero .hero-image-wrap { order: 5 !important; justify-content: center !important; align-items: center !important; overflow: visible !important; } .about-page #main-content > section.page-hero.about-hero .page-hero__actions, .about-page #main-content > section.page-hero.about-hero .hero-ctas { order: 6 !important; } .about-page #main-content > section.page-hero.about-hero .about-hero__banner, .about-page #main-content > section.page-hero.about-hero picture img.about-hero__banner { width: 100% !important; max-width: none !important; max-height: none !important; object-fit: contain !important; object-position: center center !important; } } /* Our Vision — mobile/tablet: left-align hero checklist above banner (≤1023px) */ @media (max-width: 1023px) { .our-vision-page #main-content .page-hero.vision-hero .page-hero__extra { align-self: stretch !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 var(--container-padding) !important; text-align: left !important; } .our-vision-page #main-content .page-hero.vision-hero .page-hero__extra .vision-hero__list, .our-vision-page #main-content .page-hero.vision-hero .vision-hero__list { margin: 0 !important; margin-inline: 0 !important; max-width: none !important; width: 100% !important; align-self: stretch !important; align-items: flex-start !important; text-align: left !important; } .our-vision-page #main-content .page-hero.vision-hero .page-hero__extra .vision-hero__list li { justify-content: flex-start !important; text-align: left !important; width: 100% !important; max-width: none !important; } } /* Partners — mobile/tablet: text → banner → CTAs (home layout, ≤1023px) */ @media (max-width: 1023px) { .partners-page #main-content > section.page-hero.partners-hero .page-hero__inner { display: flex !important; flex-direction: column !important; align-items: stretch !important; gap: 1rem !important; row-gap: 1rem !important; padding-left: 0 !important; padding-right: 0 !important; } .partners-page #main-content > section.page-hero.partners-hero .page-hero__content { display: contents !important; } .partners-page #main-content > section.page-hero.partners-hero .hero-label { order: 1 !important; } .partners-page #main-content > section.page-hero.partners-hero .hero-headline { order: 2 !important; } .partners-page #main-content > section.page-hero.partners-hero .hero-copy { order: 3 !important; } .partners-page #main-content > section.page-hero.partners-hero .about-hero__media, .partners-page #main-content > section.page-hero.partners-hero .hero-image-wrap { order: 5 !important; justify-content: center !important; align-items: center !important; overflow: visible !important; } .partners-page #main-content > section.page-hero.partners-hero .page-hero__actions, .partners-page #main-content > section.page-hero.partners-hero .hero-ctas { order: 6 !important; } .partners-page #main-content > section.page-hero.partners-hero .about-hero__banner, .partners-page #main-content > section.page-hero.partners-hero picture img.about-hero__banner { width: 100% !important; max-width: none !important; height: auto !important; max-height: none !important; margin-left: 0 !important; margin-right: 0 !important; object-fit: contain !important; object-position: center center !important; } } /* Mobile/tablet hero banners — flush left/right (all pages) */ @media (max-width: 1023px) { #main-content > section.page-hero .about-hero__media, #main-content > section.page-hero .hero-image-wrap, #main-content > section.page-hero .explore-hero__media, #main-content > section.page-hero .creative-makers-hero__media, #main-content > section.page-hero .faq-hero__media, #main-content > section.page-hero .donation-hero__media, #main-content > section.page-hero [class*='-hero__media'], #main-content > section.home-hero .about-hero__media, #main-content > section.home-hero .hero-image-wrap, .page-hero .about-hero__media, .page-hero .hero-image-wrap, .page-hero .explore-hero__media, .page-hero .creative-makers-hero__media, .page-hero .faq-hero__media, .page-hero .donation-hero__media, .page-hero [class*='-hero__media'] { width: 100% !important; max-width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; box-sizing: border-box !important; } #main-content > section.page-hero .about-hero__media .lazy-img-wrap, #main-content > section.page-hero .hero-image-wrap .lazy-img-wrap, #main-content > section.page-hero [class*='__media'] .lazy-img-wrap, #main-content > section.page-hero [class*='__media'] picture, .page-hero .about-hero__media .lazy-img-wrap, .page-hero .hero-image-wrap .lazy-img-wrap, .page-hero [class*='__media'] .lazy-img-wrap, .page-hero [class*='__media'] picture { width: 100% !important; max-width: 100% !important; } #main-content > section.page-hero img[class*='__banner'], #main-content > section.page-hero .about-hero__banner, .page-hero img[class*='__banner'], .page-hero .about-hero__banner, .page-hero .explore-hero__banner, .page-hero .creative-makers-hero__banner, .page-hero picture img[class*='__banner'] { width: 100% !important; max-width: 100% !important; height: auto !important; display: block !important; } } /* Desktop (≥1024px): sitewide hero — inspectable 40/60 grid (see data-bdc-hero-* on .page-hero__inner) */ @media (min-width: 1024px) { :root { --bdc-hero-text-col-percent: 40; --bdc-hero-banner-col-percent: 60; --page-hero-balanced-content-col: 0.4fr; --page-hero-balanced-media-col: 0.6fr; --contact-hero-content-col: 0.4fr; --contact-hero-media-col: 0.6fr; --vision-hero-content-col: 0.4fr; --vision-hero-media-col: 0.6fr; --explore-hero-content-col: 0.4fr; --explore-hero-media-col: 0.6fr; --get-involved-hero-content-col: 0.4fr; --get-involved-hero-media-col: 0.6fr; --creative-makers-hero-content-col: 0.4fr; --creative-makers-hero-media-col: 0.6fr; } #main-content > section.page-hero .page-hero__inner, #main-content > section.page-hero > .site-container.page-hero__inner, .page-hero > .site-container.page-hero__inner, .page-hero .page-hero__inner, .page-hero__inner--layout-40-60 { --bdc-hero-text-col-percent: 40; --bdc-hero-banner-col-percent: 60; --page-hero-balanced-content-col: auto; --page-hero-balanced-media-col: minmax(0, 1fr); display: grid !important; /* Keep text flush, but never let the banner column collapse on smaller laptop widths */ grid-template-columns: minmax(0, max-content) minmax(280px, 1fr) !important; column-gap: 0 !important; gap: 0 !important; justify-content: start !important; align-items: center; } #main-content > section.page-hero .page-hero__content, .page-hero .page-hero__content { grid-column: 1 !important; --bdc-hero-col-percent: var(--bdc-hero-text-col-percent); width: auto !important; max-width: min(100%, 36rem) !important; min-width: 0 !important; justify-self: start !important; padding-right: 0 !important; margin-right: 0 !important; } #main-content > section.page-hero .about-hero__media, #main-content > section.page-hero .hero-image-wrap, #main-content > section.page-hero .explore-hero__media, #main-content > section.page-hero [class*='-hero__media'], .page-hero .about-hero__media, .page-hero .hero-image-wrap, .page-hero .explore-hero__media, .page-hero .creative-makers-hero__media, .page-hero .faq-hero__media, .page-hero .donation-hero__media, .page-hero .apply-hero__media, .page-hero [class*='-hero__media'] { grid-column: 2 !important; --bdc-hero-col-percent: var(--bdc-hero-banner-col-percent); display: flex !important; align-items: center !important; width: 100% !important; min-width: 0 !important; max-width: none !important; justify-content: flex-start !important; justify-self: stretch !important; margin-left: 0 !important; padding-left: 0 !important; overflow: visible !important; } #main-content > section.page-hero .about-hero__media .lazy-img-wrap, #main-content > section.page-hero .hero-image-wrap .lazy-img-wrap, #main-content > section.page-hero [class*='__media'] .lazy-img-wrap, #main-content > section.page-hero [class*='__media'] picture, .page-hero .about-hero__media .lazy-img-wrap, .page-hero .hero-image-wrap .lazy-img-wrap, .page-hero [class*='__media'] .lazy-img-wrap, .page-hero [class*='__media'] picture { display: block !important; width: 100% !important; max-width: 100% !important; min-width: 0 !important; } #main-content > section.page-hero [class*='__banner'], .page-hero [class*='__banner'], .page-hero picture img[class*='__banner'] { display: block !important; width: 100% !important; max-width: 100% !important; height: auto !important; margin-left: 0 !important; object-fit: contain !important; object-position: left center !important; } } /* Mobile/tablet (≤1023px): 0px gap between hero copy and banner (all pages) */ @media (max-width: 1023px) { .page-hero .hero-copy { margin-bottom: 0 !important; padding-bottom: 0 !important; } .page-hero .page-hero__extra { margin-bottom: 0 !important; padding-bottom: 0 !important; } .page-hero .about-hero__media, .page-hero .hero-image-wrap, .page-hero .explore-hero__media, .page-hero .creative-makers-hero__media, .page-hero .faq-hero__media, .page-hero .donation-hero__media, .page-hero .apply-hero__media, .page-hero [class*='-hero__media'] { margin-top: -10px !important; padding-top: 0 !important; padding-left: 0 !important; padding-right: 0 !important; align-items: flex-start !important; justify-content: flex-start !important; } .home-page .page-hero.home-welcome-hero .about-hero__media, .home-page .page-hero.home-welcome-hero .hero-image-wrap { margin-top: -10px !important; padding-left: 0 !important; padding-right: 0 !important; } /* Beat page-level `margin: 0 !important` on hero media (flex row-gap = 20px / 1.25rem) */ .about-page .page-hero .about-hero__media, .about-page .page-hero .hero-image-wrap, .explore-page .page-hero .explore-hero__media, .explore-page .page-hero .hero-image-wrap, .explore-page .page-hero.explore-hero .explore-hero__media, .explore-page .page-hero.explore-hero .hero-image-wrap, .for-parents-page .page-hero .about-hero__media, .for-parents-page .page-hero .hero-image-wrap, .our-vision-page .page-hero .about-hero__media, .our-vision-page .page-hero .hero-image-wrap, .our-vision-page .page-hero.vision-hero .about-hero__media, .our-vision-page .page-hero.vision-hero .hero-image-wrap, .get-involved-page .page-hero .about-hero__media, .get-involved-page .page-hero .hero-image-wrap, .get-involved-page .page-hero.get-involved-hero .about-hero__media, .get-involved-page .page-hero.get-involved-hero .hero-image-wrap, .partners-page .page-hero .about-hero__media, .partners-page .page-hero .hero-image-wrap, .partners-page .page-hero.partners-hero .about-hero__media, .partners-page .page-hero.partners-hero .hero-image-wrap, .partners-page #main-content > section.page-hero.partners-hero .about-hero__media, .partners-page #main-content > section.page-hero.partners-hero .hero-image-wrap, .contact-page .page-hero .about-hero__media, .contact-page .page-hero .hero-image-wrap, body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) .hero-image-wrap, body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) .about-hero__media, body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) .explore-hero__media, body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) .creative-makers-hero__media, body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) .faq-hero__media, body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero:not(.home-hero) [class*='-hero__media'] { margin-top: -10px !important; } #main-content > section.page-hero:not(.home-hero) .about-hero__media, #main-content > section.page-hero:not(.home-hero) .hero-image-wrap, #main-content > section.page-hero:not(.home-hero) .explore-hero__media, #main-content > section.page-hero:not(.home-hero) [class*='-hero__media'], .our-vision-page #main-content > section.page-hero.vision-hero:not(.partners-hero) .about-hero__media, .our-vision-page #main-content > section.page-hero.vision-hero:not(.partners-hero) .hero-image-wrap, .our-vision-page .page-hero.vision-hero:not(.partners-hero) .about-hero__media, .our-vision-page .page-hero.vision-hero:not(.partners-hero) .hero-image-wrap { margin-top: -10px !important; } .page-hero .about-hero__media .lazy-img-wrap, .page-hero .hero-image-wrap .lazy-img-wrap, .page-hero .about-hero__media picture, .page-hero .hero-image-wrap picture, .page-hero [class*='__media'] picture { margin-top: 0 !important; padding-top: 0 !important; } .page-hero .about-hero__banner, .page-hero .explore-hero__banner, .page-hero .creative-makers-hero__banner, .page-hero picture img[class*='__banner'], .page-hero img[class*='__banner'] { width: 100% !important; max-width: 100% !important; margin-top: 0 !important; padding-top: 0 !important; object-position: top center !important; } .page-hero .about-hero__media, .page-hero .hero-image-wrap, .page-hero [class*='-hero__media'] { width: 100% !important; max-width: 100% !important; } .page-hero .page-hero__content { padding-bottom: 0 !important; margin-bottom: 0 !important; } .page-hero .hero-copy { margin-bottom: 0 !important; } /* Win over legacy #main-content … { margin-top: 0 !important } (Contact, About, etc.) */ #main-content > section.page-hero .about-hero__media, #main-content > section.page-hero .hero-image-wrap, #main-content > section.page-hero .explore-hero__media, #main-content > section.page-hero .creative-makers-hero__media, #main-content > section.page-hero .faq-hero__media, #main-content > section.page-hero .donation-hero__media, #main-content > section.page-hero .apply-hero__media, #main-content > section.page-hero [class*='-hero__media'], #main-content > section.page-hero.contact-hero .about-hero__media, #main-content > section.page-hero.contact-hero .hero-image-wrap, #main-content > section.page-hero.about-hero .about-hero__media, #main-content > section.page-hero.about-hero .hero-image-wrap, #main-content > section.page-hero.explore-hero .explore-hero__media, #main-content > section.page-hero.explore-hero .hero-image-wrap, #main-content > section.page-hero.get-involved-hero .about-hero__media, #main-content > section.page-hero.get-involved-hero .hero-image-wrap, #main-content > section.page-hero.partners-hero .about-hero__media, #main-content > section.page-hero.partners-hero .hero-image-wrap, #main-content > section.page-hero.vision-hero .about-hero__media, #main-content > section.page-hero.vision-hero .hero-image-wrap, #main-content > section.page-hero.for-parents-hero .about-hero__media, #main-content > section.page-hero.for-parents-hero .hero-image-wrap, #main-content > section.page-hero.home-hero .about-hero__media, #main-content > section.page-hero.home-hero .hero-image-wrap, .page-hero.contact-hero.about-hero .about-hero__media, .page-hero.contact-hero.about-hero .hero-image-wrap, .page-hero.explore-hero .explore-hero__media, .page-hero.explore-hero .hero-image-wrap { margin-top: -10px !important; } } /* Final mobile hero banner — ALL pages: full bleed, -10px top, 0 left/right (wins in Inspector) */ @media (max-width: 1023px) { #main-content > section.page-hero .hero-image-wrap, #main-content > section.page-hero .about-hero__media, #main-content > section.page-hero .home-hero__media, #main-content > section.page-hero [class*='-hero__media'], #main-content > section.page-hero.partners-hero .about-hero__media, #main-content > section.page-hero.partners-hero .hero-image-wrap, #main-content > section.page-hero.home-hero .about-hero__media, #main-content > section.page-hero.home-hero .hero-image-wrap, #main-content > section.page-hero.home-welcome-hero .about-hero__media, #main-content > section.page-hero.home-welcome-hero .hero-image-wrap, .home-page .page-hero.home-welcome-hero .about-hero__media, .home-page .page-hero.home-welcome-hero .hero-image-wrap, .home-page .page-hero.home-hero .about-hero__media, .home-page .page-hero.home-hero .hero-image-wrap, .partners-page #main-content > section.page-hero.partners-hero .about-hero__media, .partners-page #main-content > section.page-hero.partners-hero .hero-image-wrap, .partners-page .page-hero.partners-hero .about-hero__media, .partners-page .page-hero.partners-hero .hero-image-wrap, .about-page .page-hero .about-hero__media, .about-page .page-hero .hero-image-wrap, .explore-page .page-hero .explore-hero__media, .explore-page .page-hero .hero-image-wrap, .explore-page .page-hero .about-hero__media, .for-parents-page .page-hero .about-hero__media, .for-parents-page .page-hero .hero-image-wrap, .our-vision-page .page-hero .about-hero__media, .our-vision-page .page-hero .hero-image-wrap, .get-involved-page .page-hero .about-hero__media, .get-involved-page .page-hero .hero-image-wrap, .contact-page .page-hero .about-hero__media, .contact-page .page-hero .hero-image-wrap, body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero .hero-image-wrap, body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero .about-hero__media, body:not(.get-involved-page):not(.partners-page):not(.our-vision-page) .page-hero [class*='-hero__media'], .page-hero .hero-image-wrap, .page-hero .about-hero__media, .page-hero [class*='-hero__media'] { box-sizing: border-box !important; width: calc(100% + (2 * var(--container-padding, 32px))) !important; max-width: none !important; margin-top: -10px !important; margin-bottom: 0 !important; margin-left: calc(-1 * var(--container-padding, 32px)) !important; margin-right: calc(-1 * var(--container-padding, 32px)) !important; padding: 0 !important; padding-inline: 0 !important; } #main-content > section.page-hero .about-hero__media .lazy-img-wrap, #main-content > section.page-hero .hero-image-wrap .lazy-img-wrap, #main-content > section.page-hero [class*='__media'] .lazy-img-wrap, #main-content > section.page-hero [class*='__media'] picture, .page-hero .about-hero__media .lazy-img-wrap, .page-hero .hero-image-wrap .lazy-img-wrap, .page-hero [class*='__media'] .lazy-img-wrap, .page-hero [class*='__media'] picture, #main-content > section.page-hero img[class*='__banner'], #main-content > section.page-hero [class*='__banner'], .page-hero img[class*='__banner'], .page-hero picture img[class*='__banner'], .page-hero [class*='__banner'] { width: 100% !important; max-width: 100% !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 0 !important; padding-right: 0 !important; } } /* Explore — mobile hero banner only: 15px top margin (overrides sitewide -10px) */ @media (max-width: 1023px) { .explore-page #main-content > section.page-hero.explore-hero .explore-hero__media, .explore-page #main-content > section.page-hero.explore-hero .hero-image-wrap, .explore-page .page-hero.explore-hero .explore-hero__media, .explore-page .page-hero.explore-hero .hero-image-wrap, #main-content > section.page-hero.explore-hero .explore-hero__media, #main-content > section.page-hero.explore-hero .hero-image-wrap, .page-hero.explore-hero .explore-hero__media, .page-hero.explore-hero .hero-image-wrap { margin-top: 15px !important; } } /* Our Vision — mobile hero banner only: 5px top margin (overrides sitewide -10px) */ @media (max-width: 1023px) { .our-vision-page #main-content > section.page-hero.vision-hero .about-hero__media, .our-vision-page #main-content > section.page-hero.vision-hero .hero-image-wrap, .our-vision-page .page-hero.vision-hero .about-hero__media, .our-vision-page .page-hero.vision-hero .hero-image-wrap, #main-content > section.page-hero.vision-hero .about-hero__media, #main-content > section.page-hero.vision-hero .hero-image-wrap, .page-hero.vision-hero .about-hero__media, .page-hero.vision-hero .hero-image-wrap { margin-top: 5px !important; } } /* Partners — mobile hero banner: 90% width, 20px left margin (overrides full-bleed) */ @media (max-width: 1023px) { .partners-page #main-content > section.page-hero.partners-hero .about-hero__media, .partners-page #main-content > section.page-hero.partners-hero .hero-image-wrap, .partners-page .page-hero.partners-hero .about-hero__media, .partners-page .page-hero.partners-hero .hero-image-wrap, #main-content > section.page-hero.partners-hero .about-hero__media, #main-content > section.page-hero.partners-hero .hero-image-wrap, .page-hero.partners-hero .about-hero__media, .page-hero.partners-hero .hero-image-wrap { width: 90% !important; max-width: 90% !important; margin-left: 20px !important; margin-right: auto !important; } .partners-page #main-content > section.page-hero.partners-hero .about-hero__banner, .partners-page #main-content > section.page-hero.partners-hero picture img.about-hero__banner, .partners-page .page-hero.partners-hero .about-hero__banner, .partners-page .page-hero.partners-hero picture img.about-hero__banner, #main-content > section.page-hero.partners-hero img.about-hero__banner, .page-hero.partners-hero .about-hero__banner, .page-hero.partners-hero picture img.about-hero__banner { width: 100% !important; max-width: 100% !important; } } /* Home hero — mobile stack: eyebrow, heading, description, full-width image, buttons. Side inset matches the header (16px). Banner image stays 100% wide. */ @media (max-width: 767px) { .home-page #main-content > section.page-hero.home-welcome-hero .page-hero__inner, .home-page .page-hero.home-welcome-hero .page-hero__inner { display: flex !important; flex-direction: column !important; align-items: stretch !important; justify-content: flex-start !important; gap: 0.85rem !important; row-gap: 0.85rem !important; width: 100% !important; padding-left: 0 !important; padding-right: 0 !important; } .home-page #main-content > section.page-hero.home-welcome-hero .page-hero__content, .home-page .page-hero.home-welcome-hero .page-hero__content { display: contents !important; } .home-page #main-content > section.page-hero.home-welcome-hero .hero-label, .home-page .page-hero.home-welcome-hero .hero-label { margin: 0 0 0.15rem !important; font-size: 0.72rem !important; letter-spacing: 0.14em !important; } .home-page #main-content > section.page-hero.home-welcome-hero .hero-headline, .home-page .page-hero.home-welcome-hero .hero-headline { margin: 0 !important; font-size: clamp(2.6rem, 12vw, 3.15rem) !important; line-height: 0.92 !important; } .home-page .page-hero.home-welcome-hero .home-hero__mobile-logo { display: block !important; width: min(100%, 320px) !important; height: auto !important; margin: 0.15rem 0 0.35rem !important; } .home-page .page-hero.home-welcome-hero .home-hero__title-line, .home-page .page-hero.home-welcome-hero .home-hero__tagline, .home-page .page-hero.home-welcome-hero .home-hero__title-star { display: none !important; } .home-page #main-content > section.page-hero.home-welcome-hero .home-hero__tagline, .home-page .page-hero.home-welcome-hero .home-hero__tagline { margin: 0.15rem 0 0.35rem !important; font-size: 1.02rem !important; gap: 0.2rem 0.35rem !important; } .home-page #main-content > section.page-hero.home-welcome-hero .hero-copy, .home-page .page-hero.home-welcome-hero .hero-copy { margin: 0 !important; font-size: 0.95rem !important; line-height: 1.45 !important; } .home-page #main-content > section.page-hero.home-welcome-hero .hero-label, .home-page #main-content > section.page-hero.home-welcome-hero .hero-headline, .home-page #main-content > section.page-hero.home-welcome-hero .home-hero__tagline, .home-page #main-content > section.page-hero.home-welcome-hero .hero-copy, .home-page .page-hero.home-welcome-hero .hero-label, .home-page .page-hero.home-welcome-hero .hero-headline, .home-page .page-hero.home-welcome-hero .home-hero__tagline, .home-page .page-hero.home-welcome-hero .hero-copy { order: 1 !important; align-self: stretch !important; box-sizing: border-box !important; width: 100% !important; max-width: none !important; margin-left: 0 !important; margin-right: 0 !important; padding-left: 16px !important; padding-right: 16px !important; text-align: left !important; } .home-page #main-content > section.page-hero.home-welcome-hero .about-hero__media, .home-page #main-content > section.page-hero.home-welcome-hero .hero-image-wrap, .home-page .page-hero.home-welcome-hero .about-hero__media, .home-page .page-hero.home-welcome-hero .hero-image-wrap { order: 2 !important; box-sizing: border-box !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding: 0 !important; } .home-page #main-content > section.page-hero.home-welcome-hero .about-hero__media .lazy-img-wrap, .home-page #main-content > section.page-hero.home-welcome-hero .about-hero__media picture, .home-page .page-hero.home-welcome-hero .about-hero__media .lazy-img-wrap, .home-page .page-hero.home-welcome-hero .about-hero__media picture, .home-page #main-content > section.page-hero.home-welcome-hero .about-hero__banner, .home-page .page-hero.home-welcome-hero .about-hero__banner { display: block !important; width: 100% !important; max-width: 100% !important; height: 62vw !important; max-height: 280px !important; margin: 0 !important; padding: 0 !important; object-fit: cover !important; object-position: 18% 40% !important; } .home-page #main-content > section.page-hero.home-welcome-hero .page-hero__actions, .home-page #main-content > section.page-hero.home-welcome-hero .home-hero__actions, .home-page .page-hero.home-welcome-hero .page-hero__actions, .home-page .page-hero.home-welcome-hero .home-hero__actions { order: 3 !important; display: flex !important; flex-direction: column !important; align-items: stretch !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 16px !important; gap: 0.75rem !important; grid-template-columns: none !important; } }