/* ========================================================================= BUSY BEES FOUNDATION — DESIGN SYSTEM Brand concept: community, growth, pollination, collective impact. The hexagon is used once, deliberately, as the crop shape for the foundation's photography — not as a repeating decorative pattern. ========================================================================= */ :root{ /* ---- color: honey (opportunity/warmth) ---- */ --honey: #EBCB00; --honey-light: #F5E066; --honey-deep: #B39A00; --honey-pale: #F8EDA0; --honey-mist: #FDFAEB; /* ---- color: green (growth/life) — the site's background family, the way navy carries bbfs.ac.rw's bands; honey stays an accent only ---- */ --green: #2F5C3F; --green-deep: #1E3C29; --green-pale: #A9C9A0; --green-mist: #EEF3EC; /* ---- neutrals — white is the primary field, cream is an occasional accent ---- */ --white: #FFFFFF; --cream: #F7F4EC; --stone: #EDEAE2; --charcoal: #2A2620; --black: #14120E; /* ---- type: headings in sans, body copy in serif ---- */ --font-heading: 'Noto Sans', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: 'Noto Serif', Georgia, serif; /* ---- layout ---- */ --container-w: 1400px; --gutter: clamp(1.25rem, 3vw, 2rem); --section-pad: clamp(4.5rem, 9vw, 9rem); /* ---- motion ---- */ --ease: cubic-bezier(.16,.8,.24,1); --dur: .9s; } /* ========================================================================= RESET ========================================================================= */ *, *::before, *::after{ box-sizing: border-box; } html{ scroll-behavior: smooth; overflow-x: hidden; } body{ margin: 0; font-family: var(--font-body); color: var(--charcoal); background: var(--white); line-height: 1.6; font-size: 15px; -webkit-font-smoothing: antialiased; /* overflow-x:hidden lives on only — repeating it here would make both html and body independently scrollable (overflow-x hidden forces overflow-y to auto per spec), and that double-nested scroll container is what was breaking position:sticky further down the page */ width: 100%; } img, svg{ display:block; max-width: 100%; } a{ color: inherit; text-decoration: none; } ul, ol{ margin:0; padding:0; list-style:none; } h1,h2,h3,h4,p,figure,blockquote,dl,dd{ margin:0; } button, input, select, textarea{ font: inherit; color: inherit; } button{ cursor:pointer; background:none; border:none; } @media (prefers-reduced-motion: reduce){ html{ scroll-behavior:auto; } *{ animation-duration: .01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; } } .sr-only{ position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; } :focus-visible{ outline: 2px solid var(--green-deep); outline-offset: 3px; } /* ========================================================================= TYPOGRAPHY UTILITIES ========================================================================= */ /* kicker/label — small uppercase caption ahead of a sentence-case headline */ .eyebrow{ font-family: var(--font-heading); font-weight: 700; font-size: .78rem; letter-spacing: .16em; text-transform: uppercase; color: var(--honey-deep); margin-bottom: 1rem; } /* uppercase is reserved for the hero display type; every in-page heading is a bold sentence-case headline instead of shouting the whole page */ .section-title{ font-family: var(--font-heading); font-weight: 800; font-size: clamp(1.5rem, 2.1vw, 1.95rem); line-height: 1.25; color: var(--green-deep); letter-spacing: -.01em; } /* ========================================================================= LAYOUT UTILITIES ========================================================================= */ .container{ max-width: var(--container-w); margin-inline: auto; padding-inline: var(--gutter); } section{ padding-block: var(--section-pad); position: relative; } /* ========================================================================= BUTTONS ========================================================================= */ .btn{ display:inline-flex; align-items:center; gap:.5rem; padding: .95rem 2rem; border-radius: 0; font-family: var(--font-heading); font-weight:700; font-size: .85rem; letter-spacing: .06em; text-transform: uppercase; position: relative; overflow: hidden; transition: transform .35s var(--ease), box-shadow .35s var(--ease), background .35s var(--ease), color .35s var(--ease); } .btn-primary{ background: var(--honey); color: var(--black); } .btn-primary:hover{ background: var(--honey-light); color: var(--black); transform: translateY(-2px); } .btn-outline{ background: transparent; color: var(--green-deep); border: 1.5px solid var(--green-deep); } .btn-outline:hover{ background: var(--green-deep); color: var(--white); transform: translateY(-2px); } .btn-outline--light{ color: var(--white); border-color: rgba(255,255,255,.6); } .btn-outline--light:hover{ background: rgba(255,255,255,.12); border-color: var(--white); color: var(--white); } .btn-text{ padding: 0; color: var(--green-deep); font-weight: 700; border-bottom: 1.5px solid transparent; } .btn-text:hover{ border-bottom-color: var(--green-deep); color: var(--green); } .btn::after{ content:''; position:absolute; inset:0; background: rgba(255,255,255,.35); opacity:0; transform: scale(0); transition: transform .5s var(--ease), opacity .5s var(--ease); } .btn:active::after{ opacity:1; transform: scale(1.6); transition: 0s; } /* ========================================================================= HEADER / NAV ========================================================================= */ .site-header{ position: fixed; inset: 0 0 auto 0; z-index: 500; } .header-main{ --header-pad-y: 1.4rem; background: var(--white); padding-block: var(--header-pad-y); transition: background .4s var(--ease), padding .4s var(--ease), box-shadow .4s var(--ease); } .site-header.is-scrolled .header-main{ --header-pad-y: .75rem; background: var(--green-deep); box-shadow: 0 8px 24px -16px rgba(20,18,14,.35); } .header-inner{ display:flex; align-items:center; justify-content:space-between; gap:1.5rem; } .brand{ display:flex; align-items:center; gap:.75rem; } /* two stacked logo images crossfade on scroll instead of swapping src — matches the color-transition motion already used elsewhere in the header */ .brand-logo{ position:relative; width:42px; height:42px; flex:none; } .brand-logo-img{ position:absolute; inset:0; width:100%; height:100%; object-fit:contain; transition: opacity .4s var(--ease); } .brand-logo-img--normal{ opacity:1; } .brand-logo-img--white{ opacity:0; } .site-header.is-scrolled .brand-logo-img--normal{ opacity:0; } .site-header.is-scrolled .brand-logo-img--white{ opacity:1; } /* one font family across the whole lockup — Noto Sans, the family already used on "Foundation" — differentiated by size/weight/spacing instead */ .brand-word-line{ display:block; font-family: var(--font-heading); font-weight:800; font-size:1rem; line-height:1.1; letter-spacing:0; text-transform:uppercase; color: var(--green-deep); transition: color .4s var(--ease); } .site-header.is-scrolled .brand-word-line{ color: var(--white); } .brand-word-sub{ font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; font-weight:700; opacity:.7; color: var(--charcoal); transition: color .4s var(--ease); } .site-header.is-scrolled .brand-word-sub{ color: rgba(255,255,255,.75); } .nav-list{ display:flex; gap: 2.1rem; } .nav-list a{ font-family: var(--font-heading); font-size:.92rem; font-weight:600; color: var(--charcoal); position:relative; padding-block:.35rem; transition: color .4s var(--ease); } .site-header.is-scrolled .nav-list a{ color: var(--white); } /* underline sits flush with the header's own bottom edge, not just under the text — reaches down through the header's own vertical padding */ .nav-list a::after{ content:''; position:absolute; left:0; right:0; bottom: calc(-1 * var(--header-pad-y)); height:3px; background: var(--honey-deep); transform: scaleX(0); transform-origin: left; transition: transform .3s var(--ease), background .4s var(--ease); } .nav-list a.is-active::after{ transform: scaleX(1); } .site-header.is-scrolled .nav-list a.is-active::after{ background: var(--honey); } .nav-cta{ font-family: var(--font-heading); padding: .7rem 1.5rem; font-size:.88rem; flex:none; transition: padding .3s var(--ease), margin .3s var(--ease); } /* stretches to the compact header's full height once scrolled, touching top and bottom, by escaping header-main's own padding via negative margin */ .site-header.is-scrolled .nav-cta{ align-self: stretch; display:flex; align-items:center; padding-block: 0; margin-block: calc(-1 * var(--header-pad-y)); } .nav-toggle{ display:none; } /* ========================================================================= HERO — split layout, flat white ground, hexagon reserved for the photo ========================================================================= */ .hero{ min-height: 100svh; display:flex; align-items:center; background: var(--white); padding-block: clamp(6rem, 9.33vw, 6.67rem) 4rem; overflow: hidden; } .hero-grid{ display:grid; grid-template-columns: 1.05fr .95fr; gap: clamp(2.5rem, 6vw, 5rem); align-items:stretch; width:100%; } .hero-copy{ display:flex; flex-direction:column; justify-content:flex-end; padding-bottom: 3rem; } .hero-media{ position:relative; } .hero-mobile-media{ display:none; } .hero-title{ font-family: var(--font-heading); font-weight: 900; font-size: clamp(1.85rem, 3.1vw, 2.85rem); line-height: 1.14; letter-spacing: -.02em; text-transform: uppercase; font-feature-settings: "ss04"; color: var(--green-deep); margin-bottom: 14px; } .hero-lede{ font-size: clamp(.95rem, 1.2vw, 1.05rem); max-width: 540px; color: rgba(42,38,32,.78); margin-bottom: 2.5rem; } .hero-actions{ display:flex; gap:1.1rem; flex-wrap:wrap; } /* hive cluster: 3 equal flat-top hexagons (points left/right), genuinely mutually adjacent. "bottom" sits directly under "lead", sharing its full flat bottom edge. "right" sits at lead's lower-right, sharing that diagonal edge — and since bottom + right are consecutive neighbors of lead, they automatically share a wall with each other too. */ .hero-hive{ --rot: 0deg; position:absolute; left: -50px; top: 50%; transform-origin: 42.86% 49.74%; /* centroid of the 3 hex centers */ transform: translateY(-25%) rotate(var(--rot)); transition: transform 1.4s cubic-bezier(.65,0,.35,1); width: clamp(720px, 69vw, 1140px); aspect-ratio: 1/1; } .hive-cell{ position:absolute; width: 57.14%; aspect-ratio: 1/.866; overflow:hidden; clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%); } /* image is oversized and counter-rotates against the cluster's spin so each photo stays upright while the hexagon "window" orbits around it — 155% is the minimum scale that still fully covers the hex clip at every rotation angle (the rotating image's own inscribed circle needs to be at least as big as the hex-cell's circumscribed circle); anything smaller starts showing gaps at the hex points mid-rotation */ .hive-cell img{ position:absolute; top:50%; left:50%; width:155%; height:155%; object-fit:cover; transform: translate(-50%,-50%) rotate(calc(var(--rot) * -1)); transition: transform 1.4s cubic-bezier(.65,0,.35,1); } .hive-cell--lead{ left:0; top:0; z-index:2; } .hive-cell--bottom{ left:0; top:50%; z-index:1; } .hive-cell--right{ left:42.86%; top:25%; z-index:1; } /* ========================================================================= REVEAL ANIMATIONS (Intersection Observer driven) ========================================================================= */ .reveal{ opacity:0; transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease); will-change: transform, opacity; } .reveal[data-reveal="up"]{ transform: translateY(36px); } .reveal[data-reveal="left"]{ transform: translateX(-48px); } .reveal[data-reveal="right"]{ transform: translateX(48px); } .reveal[data-reveal-delay="1"]{ transition-delay: .1s; } .reveal[data-reveal-delay="2"]{ transition-delay: .22s; } .reveal[data-reveal-delay="3"]{ transition-delay: .34s; } .reveal[data-reveal-delay="4"]{ transition-delay: .46s; } .reveal.is-visible{ opacity:1; transform: translate(0,0); } /* ========================================================================= MEDIA PLACEHOLDER Flat, single-tone panels — swap the background-color / add a real when photography is available. No gradients, no blur, no noise. ========================================================================= */ .media{ aspect-ratio: 4/3; background: var(--stone); border: 1px solid rgba(42,38,32,.08); position:relative; overflow:hidden; } .media img{ width:100%; height:100%; object-fit: cover; display:block; } /* plain sharp-edged panel bleeding to the left screen edge — no clip-path; the hexagon is reserved for the hero photo cluster only */ .media--arrow-left{ aspect-ratio: 1/.75; border:none; border-right: 4px solid var(--green); background: var(--green-deep); } /* mirror image, bleeding to the right screen edge */ .media--arrow-right{ aspect-ratio: 1/.75; border:none; border-left: 4px solid var(--green); background: var(--green-deep); } /* ========================================================================= BLOG / FROM THE FIELD — center-focused carousel, one story per slide. Slides scroll-snap to center; the active slide is full strength, slides already viewed sit dimmed to the left, slides not yet viewed sit dimmed to the right. Arrows step one slide at a time. ========================================================================= */ /* a full-bleed light band, same structural idea as bbfs's School Life strip (edge-to-edge color block housing intro + content), but light instead of a dark fill, and centered like the Philosophy section instead of left-aligned — no "see all" CTA */ .blog{ background: var(--green-mist); } .blog .eyebrow, .blog .section-title{ text-align:center; } .blog .section-title{ text-align:center; margin: 0 auto 3.5rem; } .blog-date{ font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--honey-deep); } /* three equal columns inside the normal page container — no bleed, no size/opacity difference between cards, a fourth sits just off-screen and scrolls into view via the arrows/drag */ .blog-carousel{ margin-top: 1rem; } .blog-carousel-track{ display:flex; align-items:flex-start; gap: 2rem; overflow-x:auto; overflow-y:hidden; scroll-snap-type: x mandatory; scroll-behavior:smooth; padding-block: 1rem 1.5rem; scrollbar-width:none; -ms-overflow-style:none; cursor: grab; user-select: none; } .blog-carousel-track::-webkit-scrollbar{ display:none; } .blog-carousel-track.is-dragging{ cursor: grabbing; scroll-snap-type: none; } .blog-slide{ flex: 0 0 calc((100% - 4rem) / 3); scroll-snap-align:start; position:relative; background: var(--white); border: 1px solid rgba(42,38,32,.1); } .blog-slide .media{ aspect-ratio: 16/9; } /* every story runs as a green placeholder with its own headline in caps, the same "no photo yet" treatment as the two Programs cards without one */ .media--placeholder{ background: var(--green-deep); display:flex; align-items:center; justify-content:center; padding: 1.5rem; } .media-placeholder-title{ font-family: var(--font-heading); font-weight:800; text-transform:uppercase; letter-spacing:.03em; text-align:center; line-height:1.35; color: var(--white); font-size:1.05rem; } .blog-slide-body{ padding: 1.5rem; } .blog-slide-body .blog-date{ display:block; margin: 0 0 .6rem; } .blog-slide-body h3{ font-family: var(--font-heading); font-weight:700; font-size:1.15rem; color: var(--green-deep); margin-bottom: .85rem; } .blog-slide-text p{ font-size:.95rem; line-height:1.65; color: rgba(42,38,32,.8); margin-bottom:1.1rem; } .blog-slide-text p:last-child{ margin-bottom:0; } .blog-slide-excerpt{ display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow:hidden; } .blog-slide-toggle{ margin-top:.75rem; display:flex; justify-content:center; width:100%; font-family: var(--font-heading); font-weight:700; font-size:.85rem; color: var(--green-deep); border-bottom: 1.5px solid transparent; } .blog-slide-toggle:hover{ border-bottom-color: var(--green-deep); } /* prev/next pair centered under the row, replacing dots entirely — no floating buttons over the photos */ .blog-carousel-nav{ display:flex; justify-content:center; gap: 1rem; margin-top: 1.5rem; } .blog-carousel-arrow{ position:static; width:48px; height:48px; border-radius:50%; display:flex; align-items:center; justify-content:center; background: var(--white); border: 1px solid rgba(42,38,32,.15); opacity:1; transition: background .3s var(--ease), opacity .3s var(--ease), border-color .3s var(--ease); } .blog-carousel-arrow.is-hidden{ opacity:.35; pointer-events:none; } .blog-carousel-arrow svg{ width:20px; height:20px; fill:none; stroke: var(--green-deep); stroke-width:2; stroke-linecap:round; stroke-linejoin:round; transition: stroke .3s var(--ease); } .blog-carousel-arrow:hover{ background: var(--green-deep); border-color: var(--green-deep); } .blog-carousel-arrow:hover svg{ stroke: var(--white); } /* ========================================================================= STORY MODAL — used for the blog "See more" overlay (and reusable for any future read-more content). Backdrop + centered panel, fade/scale in. ========================================================================= */ .modal{ --modal-panel-max-h: min(88vh, 820px); position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: clamp(1rem, 4vw, 3rem); opacity: 0; visibility: hidden; transition: opacity .35s var(--ease), visibility .35s var(--ease); } .modal.is-open{ opacity: 1; visibility: visible; } .modal-backdrop{ position: absolute; inset: 0; background: rgba(20,18,14,.62); backdrop-filter: blur(3px); } .modal-panel{ position: relative; z-index: 1; width: min(720px, 100%); max-height: var(--modal-panel-max-h); overflow-y: auto; background: var(--white); box-shadow: 0 30px 70px -20px rgba(20,18,14,.5); transform: translateY(18px) scale(.98); transition: transform .4s var(--ease); } .modal.is-open .modal-panel{ transform: translateY(0) scale(1); } /* sits at the corner of the overlay itself, not on top of the photo — a direct child of .modal (fixed, full viewport), not of the panel */ .modal-close{ position: absolute; top: clamp(.85rem, 3vw, 1.5rem); right: clamp(.85rem, 3vw, 1.5rem); z-index: 2; width: 42px; height: 42px; border-radius: 50%; display: flex; align-items: center; justify-content: center; background: var(--white); border: 1px solid rgba(42,38,32,.15); box-shadow: 0 8px 20px -8px rgba(20,18,14,.4); transition: background .3s var(--ease); } .modal-close svg{ width:18px; height:18px; fill:none; stroke: var(--green-deep); stroke-width:2; stroke-linecap:round; } .modal-close:hover{ background: var(--green-mist); } /* no fixed aspect-ratio here: height:auto lets the image sit at its own natural height for the panel's width (that's the "min"), and max-height only clamps it on short viewports, where object-fit:cover crops the overflow instead of letting the photo crowd out the text below it */ .modal-media{ background: var(--stone); overflow: hidden; } .modal-media img{ display:block; width:100%; height:auto; max-height: calc(var(--modal-panel-max-h) * 0.875); object-fit: cover; } .modal-body{ padding: clamp(1.5rem, 3vw, 2.5rem); } .modal-date{ font-size:.78rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color: var(--honey-deep); margin-bottom: .6rem; } .modal-body h3{ font-family: var(--font-heading); font-weight:700; font-size:1.5rem; color: var(--green-deep); margin-bottom: 1.1rem; line-height:1.25; } .modal-text p{ font-size:1.02rem; line-height:1.7; color: rgba(42,38,32,.82); margin-bottom:1.1rem; } .modal-text p:last-child{ margin-bottom:0; } /* ========================================================================= STATS / AT A GLANCE ========================================================================= */ /* plain full-width band, blocky left-aligned numbers, no divider lines — exactly bbfs.ac.rw's stat strip straight under the hero */ .stats{ background: var(--green-deep); padding-block: clamp(2.5rem, 5vw, 3.5rem); } .stats-row{ display:flex; flex-wrap:wrap; justify-content:center; gap: clamp(2.5rem, 6vw, 5rem); } .stat-item{ padding-left: clamp(1.25rem, 3vw, 2.5rem); border-left: 1px solid rgba(255,255,255,.22); } .stat-item:first-child{ padding-left:0; border-left:none; } .stat-number{ font-family: var(--font-heading); font-weight:900; font-size: clamp(1.75rem, 2.8vw, 2.35rem); letter-spacing:-.02em; color: var(--white); line-height:1; } .stat-label{ font-family: var(--font-heading); margin-top:.6rem; font-size:.82rem; font-weight:500; color: rgba(255,255,255,.72); line-height:1.35; } .stats-note{ margin-top: 2.5rem; text-align:center; font-size:.8rem; color: rgba(255,255,255,.45); font-style: italic; } /* ========================================================================= OUR STORY ========================================================================= */ /* no .container here on purpose — story-media needs to touch the true left edge of the screen with zero padding/margin. story-copy carries its own right-hand gutter to stay readable and aligned with the rest of the site. overflow-x:hidden on the section itself is a safety net: a bleed-to-edge grid column has no business ever growing past its own section, whatever the exact cause, so it's clipped locally instead of leaking into the page's own horizontal scroll extent. */ .story{ overflow-x:hidden; } .story-grid{ display:grid; grid-template-columns: 1.02fr 1.15fr; gap: clamp(2.5rem, 6vw, 6rem); align-items:center; } /* min-width:0 stops the image's intrinsic size from forcing this grid track wider than its fair share — the classic grid-blowout bug, subtle because it doesn't show until something elsewhere shifts the layout */ .story-media{ margin:0; padding:0; min-width:0; } .story-copy{ max-width: 640px; padding-right: var(--gutter); min-width:0; } .story-copy .section-title{ margin-bottom: 1.5rem; } .story-copy p:not(.eyebrow){ margin-bottom:1.2rem; color: rgba(42,38,32,.85); font-size:1.05rem; } .story-copy p:last-child{ margin-bottom:0; } .story-copy strong{ color: var(--green-deep); } /* ========================================================================= OUR APPROACH — same numbered/connected-line language as the impact timeline further down the page, reused here for a 4-step process instead of 4 years, so the two sequential moments in the page read as one family. ========================================================================= */ .approach .eyebrow, .approach .section-title{ text-align:center; } .approach .section-title{ text-align:center; margin: 0 auto 3.5rem; } .approach-steps{ display:grid; grid-template-columns: repeat(4,1fr); gap: 2.5rem; max-width: 1100px; margin-inline:auto; position:relative; } .approach-steps::before{ content:''; position:absolute; top:20px; left:6%; right:6%; height:1px; background: rgba(42,38,32,.16); } .approach-step{ position:relative; text-align:center; } .approach-step-number{ display:inline-flex; align-items:center; justify-content:center; font-family: var(--font-heading); font-weight:900; font-size:1.05rem; color: var(--honey-deep); background: var(--white); width: 2.6rem; height:2.6rem; border: 1.5px solid var(--green-deep); border-radius:50%; margin-bottom: 1.1rem; position:relative; z-index:1; } .approach-step h3{ font-family: var(--font-heading); font-weight:700; font-size:1.05rem; color: var(--green-deep); margin-bottom:.6rem; } .approach-step p{ font-size:.92rem; color: rgba(42,38,32,.75); max-width: 230px; margin-inline:auto; } /* ========================================================================= CHAIRMAN'S MESSAGE — mirror of Our Story: text on the left, image bleeding to the true right edge of the screen with an arrow pointing left, back toward the text. ========================================================================= */ .chairman{ overflow-x:hidden; } .chairman-grid{ display:grid; grid-template-columns: 1.15fr 1.02fr; gap: clamp(2.5rem, 6vw, 6rem); align-items:center; } .chairman-media{ margin:0; padding:0; min-width:0; } /* the representative's photo is a portrait headshot, not a wide scene — bias the crop upward so the face isn't cut off in this wide frame */ .chairman-media img{ object-position: center 20%; } .chairman-copy{ max-width: 640px; padding-left: var(--gutter); margin-left:auto; min-width:0; } .chairman-copy > p:not(.eyebrow){ margin-bottom:1.2rem; color: rgba(42,38,32,.85); font-size:1.05rem; } .chairman-footer{ font-size:.85rem; font-weight:700; color: var(--green-deep); margin-top: .5rem; } /* ========================================================================= GET INVOLVED ========================================================================= */ /* full-width solid color band — mirrors bbfs's "Admissions open" strip, but in the site's own background family (green), not the accent color — honey stays reserved for small accents, same as bbfs keeps red off its navy bands */ .cta-band{ background: var(--green-deep); padding-block: clamp(3rem, 6vw, 4.5rem); } .cta-band-inner{ display:grid; grid-template-columns: 1fr 1.15fr; gap: clamp(2rem, 5vw, 4rem); align-items:center; } .cta-band-title{ font-family: var(--font-heading); font-weight:800; font-size: clamp(1.5rem, 2.1vw, 1.95rem); line-height:1.25; color: var(--white); margin-bottom:.85rem; } .cta-band-lede{ font-size:1rem; line-height:1.6; max-width: 30rem; color: rgba(255,255,255,.75); } .cta-band-links{ display:flex; flex-direction:column; gap: .85rem; } .cta-band-link{ display:flex; flex-direction:column; gap:.3rem; padding: 1.1rem 1.4rem; border: 1.5px solid rgba(255,255,255,.5); transition: background .3s var(--ease), border-color .3s var(--ease); } .cta-band-link-label{ font-family: var(--font-heading); font-weight:700; font-size:.95rem; text-transform:uppercase; letter-spacing:.05em; color: var(--white); transition: color .3s var(--ease); } .cta-band-link-caption{ font-size:.82rem; line-height:1.4; color: rgba(255,255,255,.68); transition: color .3s var(--ease); } .cta-band-link:hover{ background: var(--white); border-color: var(--white); } .cta-band-link:hover .cta-band-link-label{ color: var(--green-deep); } .cta-band-link:hover .cta-band-link-caption{ color: rgba(30,60,41,.75); } /* ========================================================================= MISSION & OBJECTIVES ========================================================================= */ /* one continuous green block: the mission statement flows straight into the objectives list rather than being two stacked sections with their own top/bottom padding each — half the "wall of green" for the same content */ .mission{ background: var(--green-deep); color: var(--white); } .mission-statements{ display:flex; flex-direction:column; gap: clamp(2rem, 5vw, 3rem); max-width: 780px; margin-inline: auto; } .mission-statement{ text-align:center; } .mission .eyebrow{ color: var(--honey-pale); text-align:center; } .mission-quote{ font-family: var(--font-heading); font-weight:500; font-style:italic; letter-spacing: .01em; font-size: clamp(1.05rem, 1.6vw, 1.35rem); line-height:1.45; color: var(--white); } .mission-tagline{ margin-top:1.5rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; font-size:.9rem; color: var(--honey-mist); } .objectives{ max-width: 980px; margin-inline:auto; margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid rgba(255,255,255,.14); } .objectives-title{ font-family: var(--font-heading); font-weight:700; font-size:1.1rem; text-align:center; margin-bottom:2.25rem; color: var(--white); } .objectives-list{ display:grid; grid-template-columns: 1fr 1fr; gap: 1rem 2.5rem; } .objectives-list li{ font-size:.98rem; color: rgba(255,255,255,.85); } /* same divided-strip language as .impact-outcomes further down the page, just white-on-dark to match this section's green background instead of dark-on-light, so the two summary strips still read as one pattern */ .pillars{ max-width: 980px; margin-inline:auto; margin-top: clamp(3rem, 6vw, 4.5rem); padding-top: clamp(3rem, 6vw, 4.5rem); border-top: 1px solid rgba(255,255,255,.14); } .pillars-title{ font-family: var(--font-heading); font-weight:700; font-size:1.1rem; text-align:center; margin-bottom:2.25rem; color: var(--white); } .pillars-list{ display:grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); max-width: 900px; margin-inline:auto; } .pillar-item{ padding-left: clamp(1.1rem, 2.5vw, 1.75rem); border-left: 1px solid rgba(255,255,255,.22); text-align:center; } .pillar-item:first-child{ padding-left:0; border-left:none; } .pillar-item h4{ font-family: var(--font-heading); font-weight:700; font-size:.95rem; color: var(--honey-pale); margin-bottom:.5rem; } .pillar-item p{ font-size:.85rem; line-height:1.5; color: rgba(255,255,255,.78); } /* ========================================================================= PROGRAMS ========================================================================= */ .programs{ background: var(--green-mist); } .programs .eyebrow, .programs .section-title{ text-align:center; } .programs .section-title{ text-align:center; margin: 0 auto 3.5rem; } .programs-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } /* plain bordered card, icon sitting in normal flow — mirrors bbfs's Head/Heart/Hands philosophy cards rather than a floating photo badge */ .program-card{ background: var(--white); border: 1px solid rgba(42,38,32,.12); } /* no overflow:hidden here — the icon badge is a child of program-media deliberately straddling its bottom edge (half on the photo, half on the body below), so it must be allowed to render outside this box */ .program-media{ position:relative; aspect-ratio: 4/3; background: var(--stone); } .program-media img{ width:100%; height:100%; object-fit:cover; display:block; } /* the two programs with no photo yet get a solid green panel with the title itself, the way bbfs fills a photo-less news card with a solid color block instead of leaving a gap */ .program-media--placeholder{ background: var(--green-deep); display:flex; align-items:center; justify-content:center; padding: 1.5rem; } .program-media-title{ font-family: var(--font-heading); font-weight:800; text-transform:uppercase; letter-spacing:.03em; text-align:center; line-height:1.35; color: var(--white); font-size:1.05rem; } .program-body{ padding: 2.5rem 1.75rem 1.75rem; } /* half on the image, half on the body — a white circle straddling the media/body boundary */ .program-icon{ position:absolute; left:1.75rem; bottom:-24px; z-index:2; display:flex; align-items:center; justify-content:center; width:48px; height:48px; border-radius:50%; background: var(--white); } .program-icon svg{ width:24px; height:24px; fill:none; stroke: var(--green-deep); stroke-width:1.5; } .program-body h3{ font-family: var(--font-heading); font-weight:700; font-size:1.2rem; color: var(--green-deep); margin-bottom:.6rem; } .program-body p{ font-size:.92rem; color: rgba(42,38,32,.75); } /* ========================================================================= GALLERY — three auto-scrolling photo rows, the middle one running the opposite direction from the top and bottom rows (bbfs.ac.rw's School Life gallery pattern). Each track's image set is duplicated back-to-back and animated exactly -50% so the loop is seamless; overflow-x:hidden on the section keeps the intentionally-oversized tracks from leaking into the page's own scrollable width (the same class of bug fixed on the Story/Chairman bleed columns earlier). ========================================================================= */ .gallery{ padding-block: clamp(3rem, 6vw, 5rem) clamp(2.5rem, 5vw, 4rem); overflow-x:hidden; } .gallery .eyebrow, .gallery .section-title{ text-align:center; } .gallery .section-title{ margin: 0 auto 2.5rem; } .gallery-marquee{ display:flex; flex-direction:column; gap: 1.5rem; } .gallery-row{ overflow:hidden; } .gallery-row:hover .gallery-row-track{ animation-play-state: paused; } .gallery-row-track{ display:flex; gap: 1.5rem; width:max-content; animation: gallery-scroll-left 110s linear infinite; } .gallery-row--right .gallery-row-track{ animation-name: gallery-scroll-right; animation-duration: 100s; } .gallery-row-track img{ width: min(455px, 54vw); height: 315px; object-fit:cover; flex:none; border: 1px solid rgba(42,38,32,.08); } @keyframes gallery-scroll-left{ to{ transform: translateX(-50%); } } @keyframes gallery-scroll-right{ from{ transform: translateX(-50%); } to{ transform: translateX(0); } } /* ========================================================================= JOURNEY: TIMELINE + TESTIMONIALS ========================================================================= */ .journey .eyebrow, .journey .section-title{ text-align:center; } .journey .section-title{ text-align:center; margin: 0 auto 4rem; } /* same divided-strip language as the "at a glance" stats row up top, just dark-on-light instead of light-on-dark, so the two summary strips read as one recurring pattern rather than two different components */ .impact-outcomes{ display:grid; grid-template-columns: repeat(4, 1fr); gap: clamp(1.5rem, 3vw, 2.5rem); max-width: 1000px; margin: 0 auto clamp(3rem, 6vw, 4.5rem); } .impact-outcome{ padding-left: clamp(1.25rem, 3vw, 2rem); border-left: 1px solid rgba(42,38,32,.16); font-family: var(--font-heading); font-weight:700; font-size:.95rem; color: var(--green-deep); line-height:1.4; text-align:center; } .impact-outcome:first-child{ padding-left:0; border-left:none; } /* headline total up top (honey accent, larger), the same divided-strip grid underneath it for the supporting figures -- reuses the "at a glance" stat-number sizing (css var clamps), just recolored for this section's light background instead of the hero band's dark one */ .impact-numbers{ max-width: 1000px; margin: 0 auto clamp(3rem, 6vw, 4.5rem); text-align:center; } .impact-number--lead{ margin-bottom: clamp(2rem, 4vw, 2.75rem); } .impact-number--lead .impact-number-value{ font-size: clamp(3rem, 7vw, 4.5rem); color: var(--honey-deep); } .impact-number--lead .impact-number-label{ font-size: 1rem; } /* flex + a fixed item width, not CSS grid -- with 7 items in 4 columns grid always left-aligns the trailing 3-item row under columns 1-3; flex-wrap lets justify-content center that shorter row as its own group */ .impact-numbers-grid{ display:flex; flex-wrap:wrap; justify-content:center; gap: clamp(1.5rem, 3vw, 2.5rem); } .impact-number{ flex: 0 1 calc((100% - 3 * clamp(1.5rem, 3vw, 2.5rem)) / 4); } .impact-number-value{ font-family: var(--font-heading); font-weight:900; font-size: clamp(1.75rem, 2.8vw, 2.35rem); letter-spacing:-.02em; color: var(--green-deep); line-height:1; } .impact-number-label{ font-family: var(--font-heading); margin-top:.6rem; font-size:.82rem; font-weight:500; color: rgba(42,38,32,.65); line-height:1.35; } .impact-numbers-note{ margin-top: 2rem; text-align:center; font-size:.8rem; color: rgba(42,38,32,.5); font-style: italic; } .timeline{ max-width: 960px; margin: 0 auto 6rem; display:grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; position:relative; } .timeline::before{ content:''; position:absolute; top:17px; left:6%; right:6%; height:1px; background: rgba(42,38,32,.18); } .timeline-item{ position:relative; text-align:center; } .timeline-year{ display:inline-flex; align-items:center; justify-content:center; font-family: var(--font-heading); font-weight:700; font-size:.95rem; color: var(--white); background: var(--green-deep); min-width: 3.4rem; height:2.2rem; padding-inline: .6rem; border-radius: 999px; margin-bottom: 1.1rem; position:relative; z-index:1; box-shadow: 0 0 0 6px var(--white); } .timeline-item p{ font-size:.92rem; color: rgba(42,38,32,.8); max-width: 220px; margin-inline:auto; } .testimonials-title{ font-family: var(--font-heading); font-weight:600; font-size: 1.4rem; text-align:center; color: var(--green-deep); margin-bottom: 2.5rem; } .testimonial-grid{ display:grid; grid-template-columns: repeat(4,1fr); gap: 1.5rem; } .testimonial-card{ display:flex; flex-direction:column; background: var(--cream); padding: 2rem 1.6rem; border-top: 3px solid var(--green); } .testimonial-card p{ font-family: var(--font-body); font-size:1.05rem; color: var(--charcoal); margin-bottom:1.25rem; } .testimonial-card footer{ margin-top:auto; font-size:.82rem; font-weight:700; color: rgba(42,38,32,.65); } .testimonial-card footer cite{ font-style:normal; color: var(--green-deep); } /* ========================================================================= WHY BUSY BEES ========================================================================= */ .why{ background: var(--green-mist); } .why .pull-quote{ background: var(--white); } .why-grid{ display:grid; grid-template-columns: 1fr 1fr; } .why-copy{ padding-right: clamp(2.5rem, 6vw, 6rem); } .why-copy .section-title{ margin-bottom: 1.75rem; } .why-copy p:not(.eyebrow){ margin-bottom:1.2rem; font-size:1.05rem; color: rgba(42,38,32,.85); } .pull-quote{ margin: 2rem 0; padding: 1.75rem 2rem; border-left: 3px solid var(--green); background: var(--cream); } .pull-quote p{ font-family: var(--font-body); font-style:italic; font-size:1.1rem; line-height:1.45; color: var(--green-deep); margin-bottom:.75rem; } .why-values-title{ font-family: var(--font-heading); font-weight:600; font-size:1.15rem; color: var(--green-deep); margin-bottom: 1.75rem; } .values-list{ display:flex; flex-direction:column; gap: 1.4rem; } .value-item{ padding-left: 1.5rem; border-left: 2px solid var(--green-pale); } .value-item dt{ font-family: var(--font-heading); font-weight:700; font-size:1.1rem; color: var(--green-deep); margin-bottom:.3rem; } .value-item dd{ font-size:.9rem; color: rgba(42,38,32,.75); margin:0; } /* ========================================================================= CONTACT ========================================================================= */ .contact{ padding-bottom: 0; } .contact-grid{ display:grid; grid-template-columns: .85fr 1.15fr; gap: clamp(2.5rem,6vw,6rem); margin-bottom: 4rem; } .contact-list{ display:flex; flex-direction:column; gap: 1.5rem; margin-top:2rem; } .contact-list li{ display:flex; flex-direction:column; gap:.3rem; } .contact-label{ font-size:.75rem; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color: var(--honey-deep); } .contact-list a:hover{ color: var(--green-deep); } .contact-form{ background: var(--cream); padding: 2.5rem; border: 1px solid rgba(42,38,32,.1); } .form-row{ margin-bottom: 1.35rem; display:flex; flex-direction:column; gap:.4rem; } .form-row--split{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; margin-bottom:1.35rem; } .form-row--split .form-row{ margin-bottom:0; } .contact-form label{ font-size:.82rem; font-weight:700; color: var(--green-deep); } .contact-form input, .contact-form select, .contact-form textarea{ border: 1.5px solid rgba(42,38,32,.18); background: var(--white); padding: .85rem 1rem; border-radius: 0; transition: border-color .3s; } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{ border-color: var(--green-deep); outline:none; } .form-note{ margin-top:1rem; font-size:.88rem; font-weight:600; color: var(--green-deep); min-height:1.2em; } .map-wrap{ width:100%; height: 380px; overflow:hidden; filter: grayscale(.15) contrast(1.05); } .map-wrap iframe{ width:100%; height:100%; border:0; } /* ========================================================================= FOOTER ========================================================================= */ .site-footer{ background: var(--green-deep); color: rgba(255,255,255,.7); padding-top: 4.5rem; } .footer-inner{ display:grid; grid-template-columns: 1.3fr 1fr 1fr 1fr; gap: 3rem; padding-bottom: 3rem; border-bottom: 1px solid rgba(255,255,255,.12); } .footer-brand{ max-width: 320px; } .footer-logo{ width: 64px; height:auto; margin-bottom:1.25rem; } .footer-brand p{ font-size:.9rem; line-height:1.7; } .footer-col-title{ font-family: var(--font-heading); font-weight:700; font-size:.78rem; letter-spacing:.12em; text-transform:uppercase; color: var(--white); margin-bottom:1.1rem; } .footer-col{ display:flex; flex-direction:column; gap:.85rem; } .footer-col a:hover{ color: var(--green-pale); } .footer-contact p{ margin-bottom:0; font-size:.92rem; } .footer-bottom{ padding-block: 1.75rem; font-size:.8rem; text-align:center; color: rgba(255,255,255,.5); } /* ========================================================================= RESPONSIVE ========================================================================= */ @media (max-width: 1080px){ .programs-grid{ grid-template-columns: repeat(2,1fr); } .testimonial-grid{ grid-template-columns: repeat(2,1fr); } .blog-slide{ flex-basis: calc((100% - 2rem) / 2); } .hero-grid{ grid-template-columns: 1fr; height:auto; align-items:stretch; gap:10px; } /* the hive that needed clipping is hidden on mobile anyway, so this overflow:hidden serves no purpose here — and if the content ever grows taller than min-height's 100svh floor, it must not clip the buttons */ .hero{ overflow: visible; } /* the hive cluster doesn't hold up at small sizes — hide it and show a single plain image box above the text instead */ .hero-media{ display:none; } .hero-mobile-media{ display:block; order:-1; margin-bottom: 0; } .hero-mobile-media .media{ aspect-ratio: .866/1; border-radius: 0; border: none; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); } .hero-mobile-media .media img{ transition: opacity .5s ease; } /* text and buttons center under the stacked mobile image instead of sitting left-aligned against it */ .hero-copy{ align-items:center; text-align:center; } .hero-lede{ margin-inline:auto; } .hero-actions{ justify-content:center; } } @media (max-width: 860px){ .nav-list{ position:fixed; inset: 0 0 0 auto; width: min(320px, 82vw); height:100vh; background: var(--green-deep); flex-direction:column; align-items:flex-start; padding: 7rem 2rem 2rem; gap: 1.75rem; transform: translateX(100%); transition: transform .5s var(--ease); } .nav-list.is-open{ transform: translateX(0); } .nav-list a{ color: var(--white); font-size:1.1rem; } .nav-toggle{ display:flex; flex-direction:column; justify-content:center; gap:5px; width: 32px; height:24px; z-index:600; position:relative; } .nav-toggle span{ width:100%; height:2px; background: var(--charcoal); transition: transform .3s, opacity .3s, background .4s var(--ease); } .site-header.is-scrolled .nav-toggle span{ background: var(--white); } .nav-toggle[aria-expanded="true"] span{ background: var(--white); } .nav-toggle[aria-expanded="true"] span:nth-child(1){ transform: translateY(7px) rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2){ opacity:0; } .nav-toggle[aria-expanded="true"] span:nth-child(3){ transform: translateY(-7px) rotate(-45deg); } /* Get Involved stays visible on mobile, sitting to the left of the hamburger — reorder the flex children rather than relying on DOM order, since the toggle lives inside .main-nav ahead of it */ .nav-cta{ order:2; padding: .6rem 1.1rem; font-size:.8rem; } .main-nav{ order:3; } /* the toggle's distance from the CTA button should match its distance from the screen edge (var(--gutter)) instead of the desktop nav's fixed 1.5rem gap, so the icon sits visually centered between them */ .header-inner{ gap: var(--gutter); } .story-grid, .why-grid, .contact-grid, .chairman-grid, .cta-band-inner{ grid-template-columns: 1fr; } .story-media, .chairman-media{ order:-1; } .story-copy{ max-width:none; padding-inline: var(--gutter); } .why-copy{ padding-right: 0; } .chairman-copy{ max-width:none; padding-inline: var(--gutter); margin-left:0; } .objectives-list{ grid-template-columns: 1fr; } .pillars-list{ grid-template-columns: 1fr 1fr; row-gap: 2rem; } .timeline{ grid-template-columns: 1fr 1fr; row-gap: 2.5rem; } .timeline::before{ display:none; } .approach-steps{ grid-template-columns: 1fr 1fr; row-gap: 2.5rem; } .approach-steps::before{ display:none; } .testimonial-grid{ grid-template-columns: 1fr; } .footer-inner{ grid-template-columns: 1fr; gap: 2rem; } /* the contact form goes full-width at this breakpoint too, so stack Email/Phone here instead of waiting for the 640px breakpoint — avoids squeezing two fields into an already-narrow single-column form */ .form-row--split{ grid-template-columns: 1fr; gap: 1.35rem; } .form-row--split .form-row{ margin-bottom: 0; } } @media (max-width: 640px){ section{ padding-block: clamp(3.5rem, 12vw, 5rem); } .stats-row{ display:grid; grid-template-columns: 1fr 1fr; gap: 2rem 1.5rem; } .stat-item{ border-left:none; padding-left:0; text-align:center; } .impact-outcomes{ display:grid; grid-template-columns: 1fr 1fr; gap: 1.75rem 1.25rem; } .impact-outcome{ border-left:none; padding-left:0; max-width:none; text-align:center; } .pillars-list{ grid-template-columns: 1fr 1fr; gap: 1.75rem 1.25rem; } .pillar-item{ border-left:none; padding-left:0; } .impact-numbers-grid{ gap: 1.75rem 1.25rem; } .impact-number{ flex-basis: calc((100% - 1.25rem) / 2); } .gallery-row-track{ gap:.85rem; } .gallery-row-track img{ width:78vw; height:220px; } .programs-grid{ grid-template-columns: 1fr; } .blog-carousel-track{ gap: 1.25rem; } .blog-slide{ flex-basis: 100%; } .blog-carousel-arrow{ width:40px; height:40px; } .hero-actions{ flex-direction:column; align-items:center; } .timeline{ grid-template-columns: 1fr 1fr; } .contact-form{ padding: 1.75rem; } /* below ~390px the logo + "Get Involved" + hamburger no longer fit on one row at their 860px-breakpoint sizes (they overflow the viewport, pushing the toggle off-screen) — trim all three so the row fits down to the narrowest common phone widths */ .header-inner{ gap: .6rem; } .brand{ gap: .5rem; } .brand-logo{ width: 30px; height: 30px; } .brand-word-line{ font-size: .82rem; } .brand-word-sub{ font-size: .58rem; } .nav-cta{ padding: .5rem .7rem; font-size: .68rem; } }