* { box-sizing: border-box; margin: 0; padding: 0; } body { background: var(--bg); color: var(--text); font-family: 'Space Grotesk', sans-serif; -webkit-font-smoothing: antialiased; } :root { --bg: #EAF3EC; --bg2: #DCEBDF; --surface: #F7FBF7; --surface2: #FFFFFF; --surfdark: #D2E4D6; --border: #C6DCC9; --border2: #A8C8AD; --bordersoft: #DEECE0; --text: #0C261C; --text2: #356151; --text3: #537567; --text4: #82A192; --accent: #0FA36B; --accent2: #0B7E52; --accent-rgb: 15,163,107; --navbg: rgba(234,243,236,0.9); --navborder: rgba(0,0,0,0.07); --panelbg: rgba(247,251,247,0.97); --cardbg: rgba(247,251,247,0.96); } input, button, textarea, select { font-family: 'Space Grotesk', sans-serif; } a { color: inherit; } #contact-thankyou { display: none; } @keyframes float { 0%, 100% { transform: translateY(0px); } 50% { transform: translateY(-10px); } } @keyframes pulse-glow { 0%, 100% { box-shadow: 0 0 40px rgba(15,163,107,0.18), 0 0 80px rgba(15,163,107,0.07); } 50% { box-shadow: 0 0 60px rgba(15,163,107,0.32), 0 0 120px rgba(15,163,107,0.12); } } @keyframes data-pulse { 0%, 100% { opacity: 0.55; } 50% { opacity: 1; } } @keyframes fade-in-up { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* ── Hamburger button ────────────────────────────────────────────────────── */ .hamburger { display: none; flex-direction: column; justify-content: center; gap: 5px; cursor: pointer; background: none; border: none; padding: 8px; z-index: 101; flex-shrink: 0; } .hamburger span { display: block; width: 22px; height: 2px; background: var(--text2); border-radius: 2px; transition: transform 0.22s ease, opacity 0.22s ease; } .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ── Mobile nav overlay ──────────────────────────────────────────────────── */ .mobile-nav { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; z-index: 98; background: var(--bg); padding: 92px 32px 48px; flex-direction: column; overflow-y: auto; } .mobile-nav.open { display: flex; } .mobile-nav a { font-size: 22px; font-weight: 600; color: var(--text2); text-decoration: none; padding: 16px 0; border-bottom: 1px solid var(--bordersoft); display: block; } .mobile-nav a:last-child { border-bottom: none; } /* ── Global scale-up for readability (accessibility) ──────────────────────── The design is built in fixed px sized for a ~1040px layout. `applyFluidZoom()` in site.js sets an inline `zoom` on that grows continuously with the viewport width (floor 1.12, capped on very wide screens), so text, cards, images and spacing all enlarge together and scale to fill the window. The rule below is the no-JS fallback. The home hero stays side by side on wide layouts and, thanks to flex-wrap, gracefully drops the orbit below the copy only when the layout is too narrow to fit both, so it never overflows. */ body { zoom: 1.12; } #sec-hero, .hero-section { min-height: auto !important; } /* Home hero: let the orbit wrap below the copy when space is tight */ .hero-section { flex-wrap: wrap !important; } /* ── Team page cards & avatars ────────────────────────────────────────────── Card groups are centered on the page (under centered section headers, like the history page), with a consistent avatar treatment, an initials fallback behind the photo, and a subtle hover lift. */ .team-grid { display: flex; flex-wrap: wrap; justify-content: center; } .team-grid > .team-card { width: var(--card-w, 200px); box-sizing: border-box; } .team-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; transition: border-color 0.16s ease, transform 0.16s ease, box-shadow 0.16s ease; } .team-card:hover { border-color: rgba(var(--accent-rgb), 0.5); transform: translateY(-3px); box-shadow: 0 10px 26px rgba(0, 0, 0, 0.16); } .team-avatar { border-radius: 50%; overflow: hidden; background: var(--surfdark); position: relative; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .team-avatar span { font-weight: 700; color: var(--text3); letter-spacing: 0.02em; line-height: 1; } .team-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; } /* ── Tablet (≤ 1200px) ──────────────────────────────────────────────────── */ @media (max-width: 1200px) { .site-nav { padding: 0 32px !important; } section { padding-left: 32px !important; padding-right: 32px !important; } footer { padding: 36px 32px !important; } /* Hero side padding (orbit wraps below copy automatically via flex-wrap) */ .hero-section { padding-left: 32px !important; padding-right: 32px !important; } /* Grids */ .grid-2 { grid-template-columns: 1fr !important; gap: 24px !important; } .grid-3 { grid-template-columns: 1fr 1fr !important; gap: 20px !important; } .howit-connector { display: none !important; } .contact-grid { grid-template-columns: 1fr !important; gap: 40px !important; } } /* ── Mobile (≤ 768px) ───────────────────────────────────────────────────── */ @media (max-width: 768px) { /* Nav */ .site-nav { padding: 0 20px !important; height: 64px !important; } .nav-links { display: none !important; } .hamburger { display: flex !important; } .page-wrap { padding-top: 64px !important; } /* Sections */ section { padding-left: 20px !important; padding-right: 20px !important; } footer { padding: 32px 20px !important; } footer > div { flex-direction: column !important; gap: 20px !important; align-items: flex-start !important; } /* Hero */ .hero-section { padding: 48px 20px 40px !important; gap: 36px !important; min-height: auto !important; } .hero-orbit { display: none !important; } .hero-copy h1 { font-size: clamp(32px, 8vw, 48px) !important; } #variant-switcher { display: none !important; } /* Grids */ .grid-2 { grid-template-columns: 1fr !important; gap: 16px !important; } .grid-3 { grid-template-columns: 1fr !important; gap: 16px !important; } .stats-row { grid-template-columns: 1fr 1fr !important; } .stats-row > div { border-right: none !important; border-bottom: 1px solid var(--border) !important; } .stats-row > div:last-child { border-bottom: none !important; } .contact-grid { grid-template-columns: 1fr !important; gap: 28px !important; } /* Article content */ article h1 { font-size: clamp(28px, 7vw, 38px) !important; } /* Team cards go full width (single column) so they never overflow */ .team-grid > .team-card { width: 100% !important; } }