/* =========================================================== LittleFlies — Learn. Speak. Lead. =========================================================== */ :root{ --yellow: #F7B500; --yellow-dark: #E0A400; --yellow-soft: #FFE9AE; --cream: #FFF9EE; --cream-2: #FFF3DC; --ink: #1E1B16; --ink-soft: #635C4E; --white: #FFFFFF; --line: #F0E6CE; --radius-xl: 40px; --radius-lg: 28px; --radius-md: 18px; --shadow-soft: 0 20px 45px -20px rgba(90, 68, 8, .25); --maxw: 1280px; --font-display: 'Baloo 2', system-ui, sans-serif; --font-body: 'Inter', system-ui, sans-serif; } *,*::before,*::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin:0; font-family: var(--font-body); color: var(--ink); background: var(--cream); overflow-x: hidden; -webkit-font-smoothing: antialiased; } img{ max-width:100%; display:block; } a{ color: inherit; text-decoration: none; } ul{ list-style:none; margin:0; padding:0; } button{ font-family: inherit; cursor:pointer; } h1,h2,h3,h4{ font-family: var(--font-display); margin:0; line-height:1.12; letter-spacing: -.01em; } p{ margin:0; } main p, .section p, .intro-block p, .about-hero p, .reimagining-copy p, .card p, .philosophy-card p, .growing-future p, .impact-feature-left p, .impact-note p, .community-band p{ text-align: justify; } .wrap{ max-width: var(--maxw); margin:0 auto; padding: 0 20px; } @media (max-width: 640px){ .wrap{ padding: 0 14px; } } /* ---------- reveal-on-bee-arrival ---------- Progressive enhancement: content is fully visible by default. The hidden/animated state only applies once js-enabled has been set on (see the inline script in ), so visitors with JavaScript disabled or blocked still see everything. */ html.js-enabled .reveal{ opacity: 0; transform: translateY(26px); transition: opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); } html.js-enabled .reveal.is-visible{ opacity: 1; transform: translateY(0); } html.js-enabled .reveal-stagger > *{ opacity: 0; transform: translateY(20px); transition: opacity .6s ease, transform .6s ease; } html.js-enabled .reveal-stagger.is-visible > *{ opacity: 1; transform: translateY(0); } html.js-enabled .reveal-stagger.is-visible > *:nth-child(1){ transition-delay: .05s; } html.js-enabled .reveal-stagger.is-visible > *:nth-child(2){ transition-delay: .12s; } html.js-enabled .reveal-stagger.is-visible > *:nth-child(3){ transition-delay: .19s; } html.js-enabled .reveal-stagger.is-visible > *:nth-child(4){ transition-delay: .26s; } html.js-enabled .reveal-stagger.is-visible > *:nth-child(5){ transition-delay: .33s; } @media (prefers-reduced-motion: reduce){ html.js-enabled .reveal, html.js-enabled .reveal-stagger > *{ transition: none !important; opacity:1; transform:none; } } .center-flex{ justify-content:center; } /* ---------- buttons ---------- */ .btn{ display:inline-flex; align-items:center; gap:10px; font-family: var(--font-display); font-weight: 600; font-size: 15px; padding: 13px 22px; border-radius: 999px; border: 2px solid transparent; white-space: nowrap; transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .btn svg{ width:16px; height:16px; flex-shrink:0; } .btn-primary{ background: var(--yellow); color: var(--ink); box-shadow: 0 10px 24px -10px rgba(224,164,0,.7); } .btn-primary:hover{ transform: translateY(-2px); box-shadow: 0 14px 28px -10px rgba(224,164,0,.85); } .btn-outline{ background: var(--white); border-color: #EDE3C8; color: var(--ink); } .btn-outline:hover{ border-color: var(--yellow); transform: translateY(-2px); } .btn-dark{ background: var(--ink); color: var(--white); } .btn-dark:hover{ transform: translateY(-2px); } /* ---------- header ---------- */ .site-header{ position: sticky; top:0; z-index: 500; background: rgba(255,249,238,.88); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .site-header .wrap{ display:flex; align-items:center; justify-content:space-between; height: 84px; } .logo{ display:flex; align-items:center; gap:10px; } .logo-image{ width: 250px; max-width: 50vw; height: auto; display:block; } .main-nav ul{ display:flex; gap:38px; } .main-nav a{ font-weight:600; font-size:15px; color: var(--ink-soft); padding-bottom:6px; border-bottom:2px solid transparent; transition: color .15s ease, border-color .15s ease; } .main-nav a:hover, .main-nav a.active{ color: var(--ink); border-color: var(--yellow); } .nav-toggle{ display:none; background:none; border:0; padding:8px; } .nav-toggle span{ display:block; width:24px; height:2px; background: var(--ink); margin:5px 0; border-radius:2px; } @media (max-width: 860px){ .main-nav{ position:absolute; top:84px; left:0; right:0; background: var(--cream); border-bottom:1px solid var(--line); max-height:0; overflow:hidden; transition: max-height .3s ease; } .main-nav.open{ max-height: 260px; } .main-nav ul{ flex-direction:column; gap:0; padding: 8px 20px 18px; } .main-nav a{ display:block; padding:12px 0; border-bottom:1px solid var(--line); } .nav-toggle{ display:block; } .site-header .btn-primary.header-cta{ display:none; } .logo-image{ width: 200px; } } /* ---------- decorative bg ---------- */ .hex-pattern{ position:absolute; width:180px; height:200px; opacity:.5; pointer-events:none; } /* =========================================================== BEE MASCOT =========================================================== */ #bee-guide{ position: fixed; top:0; left:0; width: 62px; height: 62px; z-index: 400; pointer-events:none; transform: translate(-200px,-200px); transition: transform 1.05s cubic-bezier(.34,1.1,.32,1); will-change: transform; } #bee-guide.idle-bob{ animation: bee-bob 2.6s ease-in-out infinite; } #bee-guide.is-flying .bee-svg{ filter: drop-shadow(0 10px 14px rgba(0,0,0,.22)); } @keyframes bee-bob{ 0%,100%{ margin-top:0px; } 50%{ margin-top:-10px; } } .bee-svg{ width:100%; height:100%; display:block; object-fit:contain; overflow:visible; } .bee-wing{ transform-origin: 50% 50%; animation: wing-flap .18s ease-in-out infinite alternate; } .bee-wing.wing-r{ animation-delay: .02s; } @keyframes wing-flap{ from{ transform: scaleX(1) rotate(0deg); } to{ transform: scaleX(.72) rotate(-8deg); } } @media (prefers-reduced-motion: reduce){ #bee-guide{ display:none; } } @media (max-width: 640px){ #bee-guide{ width:44px; height:44px; } } .bee-anchor{ display:inline-flex; align-items:center; gap:10px; position:relative; } .bee-inline{ width:30px; height:30px; flex-shrink:0; } /* =========================================================== HERO =========================================================== */ .hero{ position:relative; padding: 56px 0 40px; overflow:hidden; } .hero-grid{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 28px; align-items:center; position:relative; z-index:2; } .eyebrow{ display:inline-flex; align-items:center; gap:8px; background: var(--white); border:1px solid var(--line); padding:7px 16px; border-radius:999px; font-size:12px; font-weight:700; letter-spacing:.06em; color: var(--ink-soft); margin-bottom:22px; } .eyebrow::before{ content:''; width:7px; height:7px; border-radius:50%; background: var(--yellow); } .hero h1{ font-size: clamp(42px, 5.6vw, 68px); font-weight: 800; margin-bottom: 22px; } .hero h1 span{ display:block; } .hero h1 .accent{ color: var(--yellow); } .hero-lead{ font-weight:700; font-size:17px; margin-bottom:10px; } .hero-desc{ color: var(--ink-soft); font-size:16px; line-height:1.65; max-width: 460px; margin-bottom:30px; } .hero-actions{ display:flex; gap:14px; flex-wrap:wrap; } .hero-art{ position:relative; width:100%; margin-left:auto; } .hero-art img{ position:static; width:100%; height:auto; } .hero-deco-hex{ position:absolute; top:0; right:-40px; width:170px; opacity:.55; z-index:0; } .photo-band{ margin: 46px 0 6px; position:relative; } .photo-band img{ width:100%; height: 330px; object-fit:cover; border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); } .photo-band .band-bee{ position:absolute; left:34px; bottom:-14px; width:46px; } @media (max-width: 900px){ .hero-grid{ grid-template-columns: 1fr; } .hero-art{ order:-1; max-width:none; margin:0 auto 12px; } .photo-band img{ height:220px; } } /* =========================================================== SECTION HEADS =========================================================== */ .section{ padding: 78px 0; position:relative; } .section-tight{ padding: 54px 0; } .home-page .hero{ padding: 62px 0 56px; } .home-page .section{ padding: 66px 0; } .home-page .section.section-tight{ padding: 56px 0; } .section-edge .wrap{ max-width:none; width:100%; padding-left: 0; padding-right: 0; } .section-head{ text-align:center; margin-bottom: 40px; } .home-page .section-head{ margin-bottom: 32px; } .section-head.left{ text-align:left; } .section-head h2{ font-size: clamp(26px, 3vw, 34px); font-weight:800; } .section-head .sub{ color: var(--ink-soft); font-size:16px; margin-top:12px; max-width:600px; } .section-head.center .sub{ margin-left:auto; margin-right:auto; } .deco-arrow{ color: var(--yellow); font-family: var(--font-display); font-weight:800; } /* two column intro (Reimagining Early Learning) */ .intro-block{ display:grid; grid-template-columns: .9fr 1.1fr; gap: 60px; align-items:start; } .intro-block h2{ font-size: clamp(28px,3.4vw,36px); font-weight:800; margin-bottom:6px; } .intro-block p{ color: var(--ink-soft); font-size:16px; line-height:1.7; margin-top:14px; } @media (max-width: 760px){ .intro-block{ grid-template-columns:1fr; gap:18px; } } /* screenshot-matched intro + compare block */ .reimagining-why{ padding-top: 42px; padding-bottom: 14px; } .home-page .reimagining-why{ padding-top: 50px; padding-bottom: 44px; } .reimagining-row{ position:relative; display:grid; grid-template-columns: minmax(400px, 1.08fr) minmax(300px, .92fr); gap: 52px; align-items:center; } .reimagining-photo{ position:relative; } .reimagining-photo img{ width:100%; height:300px; object-fit:cover; object-position: center 42%; border-radius: 999px; box-shadow: 0 24px 45px -28px rgba(90, 68, 8, .3); } .bee-trail{ position:absolute; left:-52px; bottom: -2px; display:flex; align-items:center; gap:6px; } .bee-trail img{ width:48px; height:48px; } .bee-trail svg{ width:132px; height:40px; } .reimagining-copy h2{ font-size: clamp(32px, 3.8vw, 52px); font-weight:800; line-height:1.06; margin-bottom:14px; } .reimagining-copy p{ font-size: 15px; color: var(--ink); line-height: 1.55; margin-top: 0; margin-bottom: 16px; max-width: 430px; } .reimagining-copy p + p{ margin-bottom: 0; } .leaf-doodle{ position:absolute; right: -10px; bottom: 4px; width:88px; opacity:.95; pointer-events:none; } .why-exist-wrap{ position:relative; margin-top: 22px; } .home-page .why-exist-wrap{ margin-top: 28px; } .why-exist-wrap .section-head{ margin-bottom: 12px; } .why-exist-wrap .section-head h2{ font-size: clamp(30px, 3.2vw, 44px); } .why-exist-wrap .compare{ background: var(--white); border: 1.6px solid #F2DFAE; border-radius: 16px; box-shadow:none; overflow:hidden; } .why-exist-wrap .compare-head{ background: #F7B500; } .why-exist-wrap .compare-head div{ font-size: 17.5px; color: var(--ink); line-height: 1.2; padding: 8px 8px; } .why-exist-wrap .compare-row{ border-top:1px solid #F2E3C3; } .why-exist-wrap .compare-cell{ font-size: 15.5px; font-weight: 600; padding: 10px 24px; min-height: 48px; } .why-exist-wrap .compare-cell .ic{ font-size: 20px; display:inline-flex; width:22px; justify-content:center; align-items:center; } .why-exist-wrap .compare-cell .ic svg{ width:20px; height:20px; display:block; } .why-exist-wrap .compare-note{ font-size: 15px; color: var(--ink); line-height:1.5; text-align:center; padding: 10px 8px 0; } @media (max-width: 1080px){ .reimagining-row{ grid-template-columns: 1fr; gap: 24px; } .reimagining-photo{ max-width: 780px; } .leaf-doodle{ right: 4px; top: 230px; bottom:auto; width:72px; } .why-exist-wrap{ margin-top: 18px; } } @media (max-width: 760px){ .reimagining-why{ padding-top: 20px; padding-bottom: 10px; } .reimagining-photo img{ height:216px; border-radius: 999px; object-position:center 40%; } .bee-trail{ left:14px; bottom:10px; gap:4px; transform:scale(.78); transform-origin:left bottom; } .bee-trail img{ width:38px; height:38px; } .bee-trail svg{ width:96px; height:30px; } .reimagining-copy h2{ font-size: clamp(30px, 8.4vw, 42px); } .reimagining-copy p{ font-size: 15.5px; margin-bottom: 14px; } .leaf-doodle{ width:56px; right:2px; top:194px; } .why-exist-wrap .section-head h2{ font-size: clamp(31px, 9vw, 39px); } .why-exist-wrap .compare-head div{ font-size: 14.5px; padding: 11px 6px; } .why-exist-wrap .compare-cell{ font-size: 14px; padding: 10px 10px; min-height: 42px; } .why-exist-wrap .compare-cell .ic svg{ width:18px; height:18px; } .why-exist-wrap .compare-note{ font-size: 14px; padding: 12px 10px 15px; } } /* =========================================================== WHY WE EXIST — comparison table =========================================================== */ .compare{ background: var(--white); border: 1px solid var(--line); border-radius: var(--radius-lg); overflow:hidden; box-shadow: var(--shadow-soft); } .compare-head{ display:grid; grid-template-columns:1fr 1fr; background: var(--yellow); } .compare-head div{ text-align:center; padding:16px 10px; font-family:var(--font-display); font-weight:800; font-size:17px; } .compare-row{ display:grid; grid-template-columns:1fr 1fr; border-top:1px solid var(--line); } .compare-cell{ display:flex; align-items:center; gap:12px; padding:18px 28px; font-weight:600; font-size:15.5px; } .compare-cell.right{ border-left:1px solid var(--line); } .compare-cell .ic{ font-size:18px; } .compare-note{ text-align:center; padding: 22px 20px; color: var(--ink-soft); font-size:15px; } .compare-note b{ font-weight:700; } .hl-active{ color:#E0A400; font-weight:700; } .hl-meaningful{ color:#E0A400; font-weight:700; } .hl-joyful{ color:#E0A400; font-weight:700; } @media (max-width: 640px){ .compare-cell{ padding: 14px 14px; font-size:14px; } } /* =========================================================== HOW WE WORK =========================================================== */ .work-grid{ display:grid; grid-template-columns: .95fr 1.05fr; gap: 48px; align-items:center; } .work-grid h2{ font-size: clamp(26px, 3vw, 34px); font-weight:800; } .work-grid img{ border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); height: 360px; width:100%; object-fit:cover; } .work-grid .art{ display:flex; justify-content:flex-end; } .work-grid .work-photo{ max-width: 620px; height: 256px; border-radius: 999px; object-position: center 48%; } .check-list li{ display:flex; align-items:center; gap:12px; font-weight:600; font-size:15.5px; padding: 9px 0; } .check-list .tick{ width:22px; height:22px; border-radius:7px; background: var(--yellow); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .check-list .tick svg{ width:12px; height:12px; } .work-grid .check-list li, .impact-list li{ padding: 6px 0; } .work-grid .check-list .tick, .impact-list .tick{ width:20px; height:20px; border-radius:50%; } .work-grid .check-list .tick svg, .impact-list .tick svg{ width:11px; height:11px; } @media (max-width: 820px){ .work-grid{ grid-template-columns:1fr; } .work-grid .art{ order:-1; } } /* CTA strip */ .cta-strip{ background: #FFF4DC; border: 1px solid #F8EAC4; border-radius: var(--radius-lg); padding: 14px 24px; display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; margin-top: 16px; } .home-page .cta-strip{ margin-top: 30px; } .cta-strip .left{ display:flex; align-items:center; gap:14px; } .cta-left{ flex:1; min-width: 320px; } .bee-mini-wrap{ display:flex; align-items:center; gap:4px; } .cta-strip .bee-inline{ width:66px; height:66px; } .cta-trail{ width:72px; height:24px; margin-left:-6px; margin-top:14px; } .cta-strip h4{ font-size:19px; font-weight:800; } .cta-strip p{ color: var(--ink); font-size:15px; margin-top:2px; max-width:520px; } .cta-pill{ border: 2px solid #F2DFB0; background: var(--white); border-radius: 999px; height: 50px; padding: 0 14px 0 26px; min-width: 370px; display:inline-flex; align-items:center; justify-content:space-between; gap:16px; font-family: var(--font-display); font-size: 17px; font-weight: 800; } .cta-pill svg{ width:18px; height:18px; } @media (max-width: 940px){ .cta-pill{ min-width: 100%; } } /* =========================================================== IMPACT STATS =========================================================== */ .impact-title{ gap: 10px; } .impact-wrap{ position:relative; } .stats-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 18px; margin-bottom: 12px; } .stat-card{ background: var(--white); border:1px solid #F0E4C7; border-radius: 14px; padding: 10px 16px 12px; text-align:center; } .stat-card .icon{ font-size:26px; margin-bottom:4px; display:flex; justify-content:center; } .stat-card .icon svg{ width:28px; height:28px; } .stat-card .num{ font-family: var(--font-display); font-weight:800; font-size:44px; line-height:1.05; } .stat-card .lbl{ color: var(--ink); font-size:13.5px; margin-top:4px; font-weight:600; line-height:1.2; } @media (max-width: 760px){ .stats-grid{ grid-template-columns: 1fr 1fr; } } .progress-box{ display:grid; grid-template-columns: 1fr 1fr; gap:0; background: var(--white); border-radius: 14px; overflow:hidden; border: 1px solid #F0E4C7; } .progress-box .col{ padding: 12px 30px; position:relative; } .progress-box .col + .col{ border-left:1px solid #F0E4C7; } .progress-box h4{ font-size:32px; font-weight:800; margin-bottom:8px; } .progress-box p{ color: var(--ink); font-size:15.5px; line-height:1.65; max-width: 430px; } .progress-box b{ color: var(--ink); } .impact-list li{ padding: 4px 0; font-size:16px; } .impact-note-col{ display:flex; align-items:center; justify-content:space-between; gap:16px; } .impact-heart{ width:74px; flex-shrink:0; margin-right:10px; } @media (max-width: 700px){ .progress-box{ grid-template-columns:1fr; } .progress-box .col + .col{ border-left:0; border-top:1px solid #F0E4C7; } .progress-box h4{ font-size:22px; } .progress-box p{ font-size:15px; max-width: none; } } @media (max-width: 760px){ .stat-card .num{ font-size: 34px; } .stat-card .lbl{ font-size: 12.5px; } } /* =========================================================== SESSION MOMENTS CAROUSEL =========================================================== */ .session-head{ margin-bottom: 8px; } .home-page .session-head{ margin-bottom: 22px; } .session-head h2{ font-size: clamp(34px, 3.2vw, 46px); } .carousel-wrap{ position:relative; padding: 0 34px; } .carousel{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap:14px; overflow: hidden; padding-bottom: 0; } .carousel img{ width:100%; height: 184px; object-fit:cover; border-radius: 24px; box-shadow: 0 16px 34px -28px rgba(90, 68, 8, .38); } .moment-photo.p1{ object-position: 35% 58%; } .moment-photo.p2{ object-position: 48% 48%; } .moment-photo.p3{ object-position: 52% 34%; } .moment-photo.p4{ object-position: 66% 58%; } .car-btn{ position:absolute; top:50%; transform:translateY(-50%); width:46px; height:46px; border-radius:50%; background: var(--white); border:2px solid #F1E2B8; display:flex; align-items:center; justify-content:center; box-shadow: 0 12px 25px -18px rgba(90, 68, 8, .45); z-index:5; } .car-btn.prev{ left:4px; } .car-btn.next{ right:4px; } .car-btn svg{ width:18px; height:18px; stroke:#D39A00; } @media (max-width: 980px){ .carousel-wrap{ padding: 0; } .carousel{ grid-template-columns: repeat(2, minmax(0, 1fr)); } .car-btn{ display:none; } } /* =========================================================== BOTTOM CTA (joyful learning together) =========================================================== */ .bottom-cta{ background: radial-gradient(circle at 34% 52%, #FFF8E7 0%, #FFF4D7 65%, #FFEAB7 100%); border: 1px solid #F3E4BF; border-radius: 36px; overflow:hidden; display:grid; grid-template-columns: 1fr 1.1fr; align-items:stretch; position:relative; } .bottom-cta .text{ padding: 34px 26px 28px 54px; position:relative; z-index:2; } .joy-bee{ position:absolute; right: 18px; bottom: 12px; left:auto; top:auto; display:flex; align-items:flex-end; gap: 4px; justify-content:flex-end; z-index:2; } .joy-bee img{ width:52px; height:52px; flex-shrink:0; } .joy-bee svg{ display:block; width:220px; height:90px; } .bottom-cta h2{ font-size: clamp(36px,3.5vw,52px); font-weight:800; margin-bottom:10px; max-width: 520px; line-height:1.08; } .bottom-cta p{ color: var(--ink); font-size:15px; line-height:1.55; margin-bottom:18px; max-width:500px; } .bottom-cta .btn{ border-radius: 999px; padding: 11px 22px; min-width: 286px; justify-content:space-between; } .joy-photo-wrap{ position:relative; overflow:hidden; } .joy-photo{ position:absolute; inset: 0; width:100%; height:100%; object-fit:cover; object-position: 54% 52%; } @media (max-width: 820px){ .bottom-cta{ grid-template-columns:1fr; } .bottom-cta .text{ padding: 30px 18px 20px 18px; } .joy-bee{ display:none; } .bottom-cta h2{ font-size: clamp(30px, 9vw, 42px); } .joy-photo-wrap{ min-height:240px; } } @media (max-width: 760px){ .section-edge .wrap{ padding-left: 0; padding-right: 0; } } /* =========================================================== CONTACT =========================================================== */ .contact-section{ padding: 78px 0; } .home-page .contact-section{ padding: 64px 0 76px; } /* Prevent sticky header from covering the Contact title when using #contact links. */ #contact{ scroll-margin-top: 108px; } /* Home page title scale: keep major section headings visually consistent */ .home-page .section-head h2, .home-page .work-grid h2, .home-page .reimagining-copy h2, .home-page .why-exist-wrap .section-head h2, .home-page .session-head h2{ font-size: clamp(32px, 3.2vw, 42px); line-height: 1.1; } @media (max-width: 760px){ #contact{ scroll-margin-top: 96px; } .home-page .hero{ padding: 44px 0 40px; } .home-page .section{ padding: 50px 0; } .home-page .section.section-tight{ padding: 44px 0; } .home-page .section-head{ margin-bottom: 24px; } .home-page .section-head h2, .home-page .work-grid h2, .home-page .reimagining-copy h2, .home-page .why-exist-wrap .section-head h2, .home-page .session-head h2{ font-size: clamp(30px, 8.2vw, 36px); } .home-page .reimagining-why{ padding-top: 28px; padding-bottom: 30px; } .home-page .why-exist-wrap{ margin-top: 20px; } .home-page .cta-strip{ margin-top: 22px; } .home-page .session-head{ margin-bottom: 14px; } .home-page .contact-section{ padding: 52px 0 62px; } } .contact-grid{ display:grid; grid-template-columns: 1fr 1.15fr; gap: 48px; background: var(--white); border:1px solid var(--line); border-radius: var(--radius-xl); padding: 38px; box-shadow: var(--shadow-soft); } .contact-info h2{ font-size: 28px; font-weight:800; margin-bottom:12px; } .contact-info > p{ color: var(--ink-soft); line-height:1.7; margin-bottom:26px; } .info-row{ display:flex; align-items:flex-start; gap:14px; margin-bottom:18px; } .info-row .ic{ width:40px; height:40px; border-radius:12px; background: var(--yellow-soft); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .info-row .ic svg{ width:18px; height:18px; } .info-row .label{ font-size:12px; color: var(--ink-soft); font-weight:600; text-transform:uppercase; letter-spacing:.04em; } .info-row .val{ font-weight:700; font-size:15px; margin-top:2px; } .social-row{ display:flex; gap:10px; margin-top: 22px; } .social-row a{ width:38px; height:38px; border-radius:50%; background: var(--ink); color: var(--white); display:flex; align-items:center; justify-content:center; transition: background .15s ease, transform .15s ease; } .social-row a:hover{ background: var(--yellow-dark); transform: translateY(-2px); } .social-row svg{ width:16px; height:16px; } .contact-form{ display:flex; flex-direction:column; gap:12px; } .form-row{ display:grid; grid-template-columns:1fr 1fr; gap:16px; } .field label{ display:block; font-size:13px; font-weight:700; margin-bottom:7px; } .field input, .field textarea{ width:100%; border:1.5px solid var(--line); background: var(--cream); border-radius: 14px; padding: 11px 14px; font-family: inherit; font-size:14.5px; transition: border-color .15s ease, background .15s ease; } .field input:focus, .field textarea:focus{ outline:none; border-color: var(--yellow); background: var(--white); } .field textarea{ resize:vertical; min-height:104px; } .form-actions{ display:flex; flex-direction:row; align-items:center; gap:28px; margin-top:4px; } .form-note{ margin:0; font-size:12.5px; color: var(--ink-soft); } .form-status{ font-size:14px; font-weight:600; min-height:18px; margin:0; } .form-status.ok{ color:#1f8a4c; } .form-status.err{ color:#c23a3a; } @media (max-width: 860px){ .contact-grid{ grid-template-columns:1fr; padding: 30px 22px; } .form-row{ grid-template-columns:1fr; } .form-actions{ flex-direction:column; align-items:flex-start; gap:10px; } } /* =========================================================== FOOTER =========================================================== */ .site-footer{ background: var(--ink); color: var(--white); } .footer-bar{ background: var(--yellow); color: var(--ink); padding: 16px 0; } .footer-bar .wrap{ position:relative; display:flex; justify-content:center; align-items:center; flex-wrap:wrap; gap:8px; font-size:13.5px; font-weight:600; text-align:center; } .bee-final-stop{ position:absolute; top: 0; left: 50%; width: 1px; height: 1px; pointer-events:none; } /* =========================================================== ABOUT PAGE SPECIFIC =========================================================== */ body.about-page{ background: var(--white); } body.about-page .site-footer{ background: var(--white); color: var(--ink); } /* Keep a consistent vertical rhythm between all about-page sections. */ body.about-page main > section.section.section-tight{ padding-top: 0; padding-bottom: 0; } body.about-page main > section + section{ margin-top: 26px; } .breadcrumb{ font-size:13px; color: var(--ink-soft); padding: 22px 0 0; } .breadcrumb a{ color: var(--ink-soft); } .breadcrumb .cur{ color: var(--yellow-dark); font-weight:700; } .about-hero{ padding: 34px 0 10px; margin-bottom: 26px; } .about-hero-grid{ display:grid; grid-template-columns: .85fr 1.15fr; gap: 48px; align-items:center; } .about-hero h1{ font-size: clamp(40px,5vw,58px); font-weight:800; margin-bottom:20px; } .about-hero h1 .accent{ color: var(--yellow); display:block; } .about-hero p{ color: var(--ink-soft); font-size:15.5px; line-height:1.75; margin-bottom:14px; max-width:480px; } .about-hero-art{ position:relative; } .about-hero-art img{ width:100%; height:360px; object-fit:cover; border-radius: var(--radius-xl); box-shadow: var(--shadow-soft); } @media (max-width: 900px){ .about-hero-grid{ grid-template-columns:1fr; } .about-hero-art img{ height:240px; } } .card{ background: var(--white); border:1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 32px; } .card .icon-badge{ width:46px; height:46px; border-radius:14px; background: var(--yellow-soft); display:flex; align-items:center; justify-content:center; margin-bottom:16px; } .card .icon-badge svg{ width:22px; height:22px; } .card h3{ font-size:19px; font-weight:800; margin-bottom:10px; } .card p{ color: var(--ink-soft); font-size:14.5px; line-height:1.75; } .values-grid{ display:grid; grid-template-columns: 1fr 1fr; gap: 16px; } .value-card{ position:relative; background: linear-gradient(180deg, #FFFCF6 0%, #FFF9EE 100%); border: 1px solid #F3E8CF; border-radius: 26px; box-shadow: 0 14px 30px -28px rgba(90, 68, 8, .22); } .mission-card, .philosophy-card{ min-height: 360px; padding: 26px 30px; } .value-head{ display:flex; align-items:center; gap:14px; } .value-icon-circle{ width:70px; height:70px; border-radius:50%; background: var(--yellow); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .value-icon-circle svg{ width:34px; height:34px; } .value-head h3{ font-size: clamp(22px, 2.4vw, 30px); font-weight:800; margin:0; line-height:1.1; } .value-card .value-head + p, .community-band .value-head + p{ margin-top: 14px; } .value-mark{ display:block; width:38px; height:4px; border-radius:999px; background: var(--yellow); margin: 12px 0; } .mission-card p, .philosophy-card p{ color: var(--ink); font-size:15px; line-height:1.72; max-width: 480px; margin: 0; } .mission-card p + p, .philosophy-card p + p{ margin-top: 8px; } .mission-image{ position:absolute; right: 24px; bottom: 18px; width: 190px; height: 140px; object-fit: cover; border-radius: 18px; box-shadow: 0 10px 20px -16px rgba(22, 19, 12, 0.4); } .philosophy-image{ position:absolute; right: 20px; bottom: 22px; width: calc(100% - 50px); height: 200px; object-fit: cover; border-radius: 26px; box-shadow: 0 10px 20px -16px rgba(22, 19, 12, 0.4); } .mission-doodle{ position:absolute; right: 18px; bottom: 12px; width: 180px; height: 110px; } .growing-panel{ min-height: 360px; padding: 28px 30px; display:grid; grid-template-columns: 1fr 1fr; gap: 24px; } .growing-copy .value-head h3{ font-size: clamp(22px, 2.4vw, 30px); } .growing-intro{ color: var(--ink); font-size:15px; line-height:1.7; margin: 10px 0 0; max-width: 620px; } .growing-label{ color: var(--ink); font-size:15px; font-weight:800; margin: 10px 0 0; } .growing-points{ display:grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-top: 14px; max-width: 600px; } .growing-point{ text-align:center; } .point-icon{ width:84px; height:84px; border-radius:50%; border: 2px solid #F3D57D; display:flex; align-items:center; justify-content:center; margin: 0 auto 8px; background: var(--white); } .point-icon svg{ width:42px; height:42px; } .growing-point span:last-child{ display:block; color: var(--ink); font-size:13px; font-weight:700; line-height:1.35; } .growing-future{ position:relative; display:flex; align-items:center; justify-content:flex-start; padding: 18px 10px; } .growing-future p{ color: var(--ink); font-size:15px; line-height:1.72; max-width: 430px; } .growing-bee{ position:absolute; right: 4px; bottom: 4px; display:flex; align-items:flex-end; gap: 6px; } .bee-trail{ width: 160px; height: 90px; } .growing-bee img{ width:66px; height:66px; } @media (max-width: 980px){ .values-grid{ grid-template-columns:1fr; } .growing-panel{ grid-template-columns:1fr; } } @media (max-width: 760px){ .mission-card, .philosophy-card, .growing-panel{ padding: 22px 18px; } .mission-card, .philosophy-card{ min-height: auto; } .value-icon-circle{ width:58px; height:58px; } .value-icon-circle svg{ width:28px; height:28px; } .value-head h3, .growing-copy .value-head h3{ font-size: clamp(22px, 2.4vw, 30px); } .mission-card p, .philosophy-card p, .growing-intro, .growing-label, .growing-future p{ font-size:14.5px; } .mission-doodle, .philosophy-image, .growing-bee{ display:none; } .growing-points{ grid-template-columns:1fr; max-width: 100%; } } .impact-feature{ background: linear-gradient(180deg, #FFFCF5 0%, #FFF8EA 100%); border: 1px solid #F3E8CB; border-radius: 34px; box-shadow: 0 16px 34px -28px rgba(90, 68, 8, .24); padding: 18px; display:grid; grid-template-columns: minmax(260px, .95fr) minmax(210px, .72fr) minmax(420px, 1.65fr); gap: 16px; align-items:stretch; } .impact-feature-left{ padding: 14px 12px 8px 14px; display:flex; flex-direction:column; } .impact-feature-head{ display:flex; align-items:center; gap:12px; } .impact-chip{ width:56px; height:56px; border-radius:50%; background: var(--yellow); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .impact-chip svg{ width:30px; height:30px; } .impact-feature h3{ font-size: clamp(34px, 2.2vw, 40px); font-weight:800; line-height:1.08; } .impact-mark{ width:36px; height:4px; border-radius:999px; background: var(--yellow); margin: 10px 0 18px 68px; } .impact-feature-left p{ color: var(--ink); font-size:15.5px; line-height:1.55; max-width: 94%; } .impact-feature-left p + p{ margin-top:12px; } .impact-feature-photo{ border-radius: 28px; overflow:hidden; min-height: 420px; background: #F2E8D0; } .impact-feature-photo img{ width:100%; height:100%; object-fit:cover; object-position:center; } .impact-feature-right{ padding: 10px 0 0; display:flex; flex-direction:column; gap: 14px; } .impact-stats-row{ display:grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: rgba(255,255,255,.5); border-radius: 18px; } .impact-stat{ text-align:center; padding: 8px 10px 10px; } .impact-stat + .impact-stat{ border-left: 1px solid #F2E5C6; } .impact-stat .stat-icon{ width:30px; height:30px; margin: 0 auto 8px; display:flex; align-items:center; justify-content:center; } .impact-stat .stat-icon svg{ width:28px; height:28px; } .impact-stat .num{ font-family: var(--font-display); font-weight:800; color: var(--ink); font-size: 44px; line-height:1.1; } .impact-stat .lbl{ color: var(--ink); font-size:13.5px; font-weight:600; line-height:1.35; margin-top:4px; } .impact-detail-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 10px; } .impact-detail-card{ background: var(--white); border: 1px solid #F1E5C7; border-radius: 18px; padding: 16px 20px; } .impact-detail-card h4{ font-size:18px; font-weight:800; margin-bottom:8px; } .impact-check-list li{ display:flex; align-items:flex-start; gap:10px; color: var(--ink); font-size:15px; line-height:1.45; padding: 3px 0; } .impact-check-list .tick{ width:18px; height:18px; border-radius:50%; background: var(--yellow); display:flex; align-items:center; justify-content:center; flex-shrink:0; margin-top: 5px; } .impact-check-list .tick svg{ width:11px; height:11px; } .impact-note{ position:relative; display:flex; align-items:flex-start; } .impact-note p{ color: var(--ink); font-size:15.5px; line-height:1.72; max-width: 90%; } .impact-note b{ color: var(--ink); } .impact-heart{ position:absolute; right: 12px; bottom: 10px; width: 58px; height: 44px; } @media (max-width: 1200px){ .impact-feature{ grid-template-columns: 1fr; } .impact-feature-left, .impact-feature-right{ padding: 8px; } .impact-mark{ margin-left: 68px; } .impact-feature-photo{ min-height: 320px; } .impact-detail-row{ grid-template-columns:1fr; } } @media (max-width: 760px){ .impact-feature{ padding: 14px; border-radius: 26px; } .impact-chip{ width:48px; height:48px; } .impact-chip svg{ width:26px; height:26px; } .impact-feature h3{ font-size:32px; } .impact-mark{ margin-left: 58px; margin-bottom: 14px; } .impact-feature-left p{ font-size:15px; max-width: none; } .impact-stats-row{ grid-template-columns: 1fr 1fr; } .impact-stat:nth-child(3), .impact-stat:nth-child(4){ border-top:1px solid #F2E5C6; } .impact-stat:nth-child(3){ border-left:0; } .impact-stat .num{ font-size:30px; } .impact-stat .lbl{ font-size:13px; } .impact-detail-card h4{ font-size:21px; } .impact-check-list li{ font-size:14px; } .impact-note p{ font-size:15px; max-width: 100%; padding-right: 54px; } .impact-heart{ width:44px; height:34px; } } .community-band{ min-height: 360px; background: linear-gradient(180deg, #FFF8ED 0%, #FFF6E8 100%); border: 1px solid rgba(247,181,0,.08); border-radius: 34px; box-shadow: 0 16px 34px -28px rgba(90, 68, 8, .22); padding: 18px 22px; display:grid; grid-template-columns: minmax(360px, 1.15fr) minmax(0, 3.25fr); gap: 18px; align-items:center; } .community-intro{ padding: 12px 10px 12px 18px; } .community-band h3{ font-size: clamp(22px, 2.4vw, 30px); font-weight:800; margin-bottom:10px; } .community-mark{ display:block; width:36px; height:4px; border-radius:999px; background: var(--yellow); margin: 0 0 20px; } .community-band p{ color: var(--ink); font-size:15px; line-height:1.75; max-width: 335px; } .community-photos{ display:grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap:14px; align-items:stretch; } .community-photo{ margin:0; border-radius:26px; overflow:hidden; background: #F1E7D1; min-height:248px; } .community-photos img{ width:100%; height:100%; min-height:248px; object-fit:cover; transform: scale(1.02); } .community-photos .photo-crop-1{ object-position: 18% 60%; } .community-photos .photo-crop-2{ object-position: 48% 48%; } .community-photos .photo-crop-3{ object-position: 72% 36%; } .community-photos .photo-crop-4{ object-position: 86% 60%; } @media (max-width: 900px){ .community-band{ grid-template-columns:1fr; padding:24px 20px; } .community-intro{ padding: 6px 4px 2px; } .community-photos{ grid-template-columns: repeat(2,1fr); } } .parallel-panels{ display: grid; grid-template-columns: 1fr 1fr; gap: 20px; align-items: stretch; } .parallel-panels .growing-panel{ grid-template-columns: 1fr; min-height: 0; margin: 0; } .parallel-panels .growing-copy .value-head h3{ font-size: clamp(22px, 2.4vw, 30px); } .parallel-panels .growing-intro{ max-width: 100%; } .parallel-panels .growing-points{ display: flex; justify-content: center; gap: 16px; max-width: 100%; margin-top: 24px; } .parallel-panels .point-icon{ width: 60px; height: 60px; margin-bottom: 5px; } .parallel-panels .point-icon svg{ width: 30px; height: 30px; } .parallel-panels .growing-point span:last-child{ font-size: 12px; } .parallel-panels .growing-future{ padding: 10px 0 0; } .parallel-panels .community-band{ grid-template-columns: 1fr; align-items: start; gap: 16px; margin: 0; min-height: 0; padding: 20px 22px 18px; } .parallel-panels .community-band .community-intro{ padding: 0; } .parallel-panels .community-band p{ max-width: 100%; } .parallel-panels .community-photos{ grid-template-columns: 1fr; } .parallel-panels .community-photo{ height: 220px; min-height: 0; } .parallel-panels .community-photos img{ height: 220px; min-height: 0; } @media (max-width: 900px){ .parallel-panels{ grid-template-columns: 1fr; } } .about-footer-info{ padding: 44px 0 0; display:grid; grid-template-columns: 1fr auto 1fr auto auto; gap: 24px; align-items:center; } .about-footer-info .get-touch{ display:flex; align-items:center; gap:14px; } .about-footer-divider{ width:1px; height:84px; background: var(--line); justify-self:center; } .about-footer-info .get-touch .ic{ width:44px; height:44px; border-radius:14px; background: var(--yellow); display:flex; align-items:center; justify-content:center; flex-shrink:0; } .about-footer-info .get-touch .ic svg{ width:20px; height:20px; } .about-footer-info h4{ font-size:17px; font-weight:800; margin-bottom:6px; } .about-footer-info p{ color: var(--ink-soft); font-size:13.5px; line-height:1.6; max-width:260px; } .about-contact-details{ display:flex; flex-direction:column; gap:12px; justify-content:center; } .about-contact-details .row{ display:flex; align-items:center; gap:10px; font-size:14px; font-weight:600; } .about-contact-details .row svg{ width:16px; height:16px; flex-shrink:0; color: var(--yellow); } .about-social{ display:flex; gap:10px; align-self:center; } .about-social a{ width:60px; height:60px; border-radius:50%; background: var(--cream); display:flex; align-items:center; justify-content:center; transition: background .15s ease; } .about-social a:hover{ background: var(--yellow); } .about-social svg{ width:28px; height:28px; } .about-social svg *{ stroke-width:2.3px; } .footer-pad-bottom{ padding-bottom: 34px; } @media (max-width: 820px){ .about-footer-info{ grid-template-columns:1fr; align-items:center; justify-items:center; text-align:center; gap:18px; } .about-footer-divider{ display:none; } .about-footer-info .get-touch{ flex-direction:column; justify-content:center; text-align:center; } .about-footer-info p{ max-width:320px; } .about-contact-details{ align-items:center; } .about-contact-details .row{ justify-content:center; text-align:center; } .about-social{ align-self:center; justify-content:center; } } /* ---------- phone layout ---------- */ @media (max-width: 600px){ .site-header .wrap{ height:72px; } .logo-image{ width:170px; max-width:calc(100vw - 74px); } .main-nav{ top:72px; } .main-nav ul{ padding-left:14px; padding-right:14px; } main p, .section p, .intro-block p, .about-hero p, .reimagining-copy p, .card p, .philosophy-card p, .growing-future p, .impact-feature-left p, .impact-note p, .community-band p{ text-align:left; } .btn{ white-space:normal; text-align:center; justify-content:center; } .hero-actions{ flex-direction:column; align-items:stretch; } .hero-actions .btn{ width:100%; } .hero-desc{ text-align:justify; } .hero-art{ max-width:100%; border-radius:16px; } .hero-art img{ border-radius:16px; } .section-head .sub{ font-size:15px; line-height:1.55; } .deco-arrow{ flex-shrink:0; } .reimagining-copy h2{ max-width:calc(100% - 28px); } .leaf-doodle{ display:none; } .why-exist-wrap .compare-head div, .why-exist-wrap .compare-cell{ min-width:0; overflow-wrap:anywhere; } .why-exist-wrap .compare-cell{ align-items:flex-start; gap:7px; padding:10px 8px; } .why-exist-wrap .compare-cell .ic{ flex-shrink:0; } .why-exist-wrap .compare-note{ line-height:1.45; } .work-grid .work-photo{ height:190px; } .cta-strip{ padding:16px; gap:16px; } .cta-left{ min-width:0; width:100%; } .cta-strip h4{ font-size:18px; } .cta-strip p{ font-size:14px; line-height:1.5; } .cta-pill{ min-width:0; width:100%; height:auto; min-height:50px; padding:10px 14px 10px 18px; } .stats-grid{ gap:10px; } .stat-card{ padding-left:8px; padding-right:8px; } .stat-card .lbl{ overflow-wrap:anywhere; } .progress-box .col{ padding:14px 16px; } .impact-note-col{ align-items:flex-start; } .carousel{ gap:10px; } .carousel img{ height:150px; border-radius:18px; } .bottom-cta{ border-radius:24px; } .bottom-cta .text{ padding:26px 18px 22px; } .bottom-cta p{ text-align:justify; } .bottom-cta .btn{ min-width:0; width:100%; } .joy-photo-wrap{ min-height:190px; } .reimagining-copy p{ text-align:justify; } .contact-grid{ padding:24px 16px; border-radius:24px; gap:30px; } .contact-info > p{ font-size:15px; } .info-row .val{ overflow-wrap:anywhere; } .form-actions .btn{ width:100%; } .breadcrumb{ padding-top:16px; } .about-hero{ padding-top:24px; } .about-hero-art img{ height:210px; border-radius:24px; } .value-head{ align-items:center; width:100%; } .value-head h3{ flex:1; min-width:0; overflow-wrap:anywhere; } .mission-card, .philosophy-card, .growing-panel{ padding:20px 16px; border-radius:22px; } .philosophy-card{ padding-bottom:16px; } .philosophy-image{ display:block; position:static; width:100%; height:180px; margin-top:18px; border-radius:18px; } .parallel-panels .community-band{ padding:18px 16px; border-radius:22px; } .parallel-panels .community-band .community-intro{ padding:0; } .community-photo, .community-photos img{ height:190px; min-height:190px; } .about-contact-details .row{ max-width:100%; overflow-wrap:anywhere; } .mission-card p, .philosophy-card p, .growing-future p, .community-band p{ text-align:justify; } }