/* ============================================================ SAiD - South Africans in Doha Editorial + warm + community ============================================================ */ :root{ /* Brand */ --sa-green: #0F5132; --sa-green-deep: #082B1B; --sa-green-soft: #1E7A4F; --sa-gold: #E8A723; --sa-gold-soft: #F3C969; --sa-red: #C8102E; --sa-blue: #1E3A8A; --sa-terracotta: #C85C3C; /* Surface - layered: canvas (body), sheet (cards), chrome (nav/footer) */ --canvas: #F5F1E8; /* page background - warm but not cream */ --sheet: #FFFFFF; /* elevated cards, hero, sections */ --sheet-warm: #FBF8F1; /* secondary surface */ --chrome: #082B1B; /* dark forest - nav + footer */ --chrome-soft: #0F3D28; /* Legacy aliases (keep old rules working) */ --cream: #F5F1E8; --cream-warm: #FBF8F1; --sand: #E8DFCB; --ink: #0A1410; --ink-soft: #2F3A34; --ink-mute: #6B7570; --line: rgba(10,20,16,0.10); --line-soft: rgba(10,20,16,0.05); /* Type */ --f-display: "Cormorant Garamond", Georgia, serif; --f-body: "Manrope", system-ui, sans-serif; --f-mono: "JetBrains Mono", ui-monospace, monospace; /* Radii */ --r-arch: 999px 999px 16px 16px; --r-card: 18px; } *{ box-sizing:border-box; } html,body{ margin:0; padding:0; } html{ scroll-behavior:smooth; } body{ font-family:var(--f-body); color:var(--ink); background:var(--canvas); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; } img{ max-width:100%; display:block; } a{ color:inherit; text-decoration:none; } button{ font:inherit; } ::selection{ background:var(--sa-gold); color:var(--ink); } /* ============================================================ NAV - three variants, switchable via [data-nav-style] on A: editorial-cream | B: floating-pill | C: glass-frost ============================================================ */ /* ============================================================ NAV - single clean version ============================================================ */ .nav{ position:fixed; top:0; left:0; right:0; z-index:50; display:grid; grid-template-columns: auto 1fr auto; align-items:center; gap:32px; padding:18px 40px; background:rgba(251,248,241,0.85); backdrop-filter:blur(14px) saturate(1.3); -webkit-backdrop-filter:blur(14px) saturate(1.3); border-bottom:1px solid transparent; color:var(--ink); transition:background .25s ease, padding .25s ease, border-color .25s ease, box-shadow .25s ease; } .nav.scrolled{ background:rgba(251,248,241,0.96); border-bottom-color:rgba(10,20,16,0.08); padding:12px 40px; box-shadow:0 6px 24px -16px rgba(10,20,16,0.18); } /* Brand */ .nav-brand{ display:flex; align-items:center; text-decoration:none; } .nav-brand img{ height:44px; width:auto; object-fit:contain; filter:drop-shadow(0 2px 6px rgba(0,0,0,0.08)); } /* Links */ .nav-links{ display:flex; align-items:center; justify-content:center; gap:4px; } .nav-links a{ position:relative; padding:9px 16px; font-size:14px; font-weight:500; color:var(--ink-soft); border-radius:999px; text-decoration:none; transition:color .2s, background .2s; } .nav-links a:hover{ color:var(--ink); background:rgba(10,20,16,0.05); } .nav-links a.active{ color:var(--sa-green); } .nav-links a.active::after{ content:""; position:absolute; left:50%; bottom:2px; width:18px; height:2px; border-radius:2px; background:var(--sa-gold); transform:translateX(-50%); } /* CTA */ .nav-cta{ display:inline-flex; align-items:center; gap:8px; padding:11px 18px; border-radius:999px; font-size:13px; font-weight:600; letter-spacing:0.01em; background:var(--sa-green); color:#FAF6EF; text-decoration:none; transition:transform .2s, background .2s, box-shadow .2s; box-shadow:0 4px 12px -4px rgba(15,81,50,0.35); } .nav-cta:hover{ transform:translateY(-1px); background:var(--sa-green-deep); box-shadow:0 6px 16px -4px rgba(15,81,50,0.45); } /* Burger */ .nav-burger{ display:none; width:40px; height:40px; border:none; background:none; flex-direction:column; justify-content:center; gap:5px; padding:0; cursor:pointer; } .nav-burger span{ display:block; width:22px; height:1.5px; margin:0 auto; background:var(--ink); transition:transform .3s, opacity .3s; } .nav-burger[aria-expanded="true"] span:nth-child(1){ transform:translateY(6.5px) rotate(45deg); } .nav-burger[aria-expanded="true"] span:nth-child(2){ opacity:0; } .nav-burger[aria-expanded="true"] span:nth-child(3){ transform:translateY(-6.5px) rotate(-45deg); } /* Mobile menu */ .mobile-menu{ position:fixed; inset:72px 0 0 0; background:rgba(251,248,241,0.98); backdrop-filter:blur(20px); z-index:45; padding:40px 28px; display:flex; flex-direction:column; gap:0; transform:translateY(-12px); opacity:0; pointer-events:none; transition:transform .3s, opacity .3s; } .mobile-menu.open{ transform:translateY(0); opacity:1; pointer-events:auto; } .mobile-menu a{ font-family:var(--f-display); font-size:32px; font-weight:500; padding:14px 0; border-bottom:1px solid var(--line-soft); color:var(--ink); text-decoration:none; } .mobile-menu a.mobile-cta{ font-family:var(--f-body); font-size:15px; font-weight:600; margin-top:24px; padding:16px 24px; background:var(--sa-green); color:var(--cream); border-radius:999px; text-align:center; border:none; } /* ============================================================ SHARED LAYOUT ============================================================ */ .section{ padding:clamp(56px, 7vw, 88px) clamp(20px, 4vw, 40px); } .section-tight{ padding:clamp(48px, 5vw, 64px) clamp(20px, 4vw, 40px); background:var(--sheet); } .wrap{ max-width:1240px; margin:0 auto; } .wrap-narrow{ max-width:960px; margin:0 auto; } .eyebrow{ font-family:var(--f-mono); font-size:11px; font-weight:500; letter-spacing:0.2em; text-transform:uppercase; color:var(--sa-green-soft); display:inline-flex; align-items:center; gap:10px; } .eyebrow::before{ content:""; width:22px; height:1px; background:var(--sa-gold); } .eyebrow.no-rule::before{ display:none; } h1,h2,h3,h4{ font-family:var(--f-display); font-weight:500; letter-spacing:-0.015em; color:var(--ink); } h1{ font-size:clamp(48px, 7vw, 104px); line-height:0.96; margin:0; } h2{ font-size:clamp(36px, 4.6vw, 64px); line-height:1.02; margin:0; } h3{ font-size:clamp(22px, 2vw, 30px); line-height:1.15; margin:0; } h4{ font-size:18px; line-height:1.3; margin:0; } .serif-i{ font-style:italic; color:var(--sa-terracotta); font-weight:400; } p.lead{ font-size:clamp(17px, 1.4vw, 20px); line-height:1.6; color:var(--ink-soft); } /* Buttons */ .btn{ display:inline-flex; align-items:center; gap:10px; padding:14px 24px; font-size:14px; font-weight:500; border-radius:999px; border:none; cursor:pointer; transition:transform .2s, background .2s, color .2s; } .btn-primary{ background:var(--ink); color:var(--cream); } .btn-primary:hover{ background:var(--sa-green); transform:translateY(-1px); } .btn-ghost{ background:transparent; color:var(--ink); border:1px solid var(--line); } .btn-ghost:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); } .btn-gold{ background:var(--sa-gold); color:var(--ink); } .btn-gold:hover{ background:var(--ink); color:var(--cream); } /* ============================================================ HOME - HERO ============================================================ */ .hero{ position:relative; padding:clamp(96px, 8vw, 112px) clamp(20px, 4vw, 40px) clamp(48px, 6vw, 80px); overflow:hidden; background: radial-gradient(1200px 600px at 80% -10%, rgba(232,167,35,0.10), transparent 60%), radial-gradient(1000px 500px at -10% 20%, rgba(15,81,50,0.08), transparent 60%), var(--sheet); border-bottom:1px solid var(--line-soft); } .hero-grid{ max-width:1320px; margin:0 auto; display:grid; grid-template-columns: 1.1fr 0.9fr; gap:60px; align-items:end; min-height:78vh; } .hero-copy{ padding-top:40px; } .hero-kicker{ display:inline-flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:11px; letter-spacing:0.22em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:28px; } .hero-kicker .dot{ width:8px; height:8px; background:var(--sa-green); border-radius:50%; animation:pulse 2s infinite; } @keyframes pulse{ 0%,100%{transform:scale(1); opacity:1;} 50%{transform:scale(1.4); opacity:.5;} } .hero h1{ margin-bottom:28px; } .hero h1 em{ font-style:italic; color:var(--sa-terracotta); font-weight:400; } .hero h1 .underline{ position:relative; white-space:nowrap; } .hero h1 .underline::after{ content:""; position:absolute; left:0; right:0; bottom:0.08em; height:0.12em; background:var(--sa-gold); z-index:-1; opacity:0.55; } .hero-lead{ max-width:52ch; font-size:clamp(17px, 1.4vw, 20px); color:var(--ink-soft); margin:0 0 36px; } .hero-ctas{ display:flex; gap:12px; flex-wrap:wrap; margin-bottom:48px; } .hero-stats{ display:grid; grid-template-columns:repeat(3, 1fr); gap:24px; padding-top:28px; border-top:1px solid var(--line); max-width:520px; } .hero-stat .num{ font-family:var(--f-display); font-size:38px; line-height:1; color:var(--sa-green); font-weight:600; } .hero-stat .lbl{ font-size:12px; color:var(--ink-mute); margin-top:6px; letter-spacing:0.04em; } /* Hero visual - arch portrait collage */ .hero-visual{ position:relative; height:620px; } .arch{ position:absolute; border-radius:var(--r-arch); overflow:hidden; background:var(--sand); } .arch img, .arch .ph{ width:100%; height:100%; object-fit:cover; } .ph:has(> img){ padding:0; background:none; overflow:hidden; } .ph img{ width:100%; height:100%; object-fit:cover; display:block; } .hero-arch-main{ width:60%; height:78%; right:0; top:0; box-shadow:0 30px 60px -30px rgba(0,0,0,0.3); } .hero-arch-sub{ width:34%; height:50%; left:0; bottom:0; box-shadow:0 20px 40px -20px rgba(0,0,0,0.25); border-radius:16px 16px 999px 999px; } .hero-badge{ position:absolute; left:0; top:40px; background:var(--sa-green); color:var(--cream); border-radius:50%; width:120px; height:120px; animation:spin 30s linear infinite; box-shadow:0 10px 30px -10px rgba(0,0,0,0.3); } .hero-badge svg{ display:block; width:100%; height:100%; } .hero-badge-text{ font-family:var(--f-mono); font-size:8px; letter-spacing:0.08em; fill:var(--cream); text-transform:uppercase; } .hero-badge-mark{ font-size:18px; fill:var(--sa-gold); } @keyframes spin{ to{ transform:rotate(360deg); } } .hero-circle-text{ position:absolute; right:-60px; bottom:-60px; width:180px; height:180px; opacity:0.6; } /* ============================================================ Placeholder imagery (striped) ============================================================ */ .ph{ position:relative; background: repeating-linear-gradient(135deg, rgba(0,114,75,0.10) 0px, rgba(0,114,75,0.10) 2px, transparent 2px, transparent 14px), linear-gradient(135deg, var(--cream-warm), var(--sand)); display:flex; align-items:center; justify-content:center; color:var(--ink-mute); font-family:var(--f-mono); font-size:11px; text-align:center; padding:16px; letter-spacing:0.05em; } .ph--gold{ background: repeating-linear-gradient(135deg, rgba(242,168,29,0.15) 0px, rgba(242,168,29,0.15) 2px, transparent 2px, transparent 14px), linear-gradient(135deg, #FBEBC4, #F2D98F); } .ph--red{ background: repeating-linear-gradient(135deg, rgba(200,92,60,0.18) 0px, rgba(200,92,60,0.18) 2px, transparent 2px, transparent 14px), linear-gradient(135deg, #F0D4C5, #DFA58B); } .ph--blue{ background: repeating-linear-gradient(135deg, rgba(30,58,138,0.15) 0px, rgba(30,58,138,0.15) 2px, transparent 2px, transparent 14px), linear-gradient(135deg, #C9D2E8, #8FA3CC); } .ph--dark{ background: repeating-linear-gradient(135deg, rgba(255,255,255,0.06) 0px, rgba(255,255,255,0.06) 2px, transparent 2px, transparent 14px), linear-gradient(135deg, #2B342D, #1A1F1C); color:rgba(255,255,255,0.6); } /* ============================================================ HOME - MARQUEE RIBBON ============================================================ */ .ribbon{ background:var(--ink); color:var(--cream); padding:22px 0; overflow:hidden; border-top:1px solid rgba(255,255,255,0.06); border-bottom:1px solid rgba(255,255,255,0.06); } .ribbon-track{ display:flex; gap:48px; animation:marquee 38s linear infinite; width:max-content; white-space:nowrap; } .ribbon-item{ font-family:var(--f-display); font-size:28px; font-style:italic; display:inline-flex; align-items:center; gap:48px; } .ribbon-item::after{ content:"✦"; color:var(--sa-gold); font-style:normal; font-size:14px; } @keyframes marquee{ to{ transform:translateX(-50%); } } /* ============================================================ HOME - PARTNER STRIP ============================================================ */ .partner-strip{ padding:clamp(48px, 5vw, 64px) clamp(20px, 4vw, 40px); background:var(--sheet); border-top:1px solid var(--line); border-bottom:1px solid var(--line); } .partner-strip-head{ text-align:center; margin-bottom:clamp(24px, 3vw, 36px); } .partner-strip-head .eyebrow{ display:inline-flex; } .partner-strip-tag{ font-family:var(--f-display); font-size:clamp(22px, 2.4vw, 32px); font-weight:500; color:var(--ink); margin:14px 0 0; letter-spacing:-0.01em; } .partner-ribbon{ overflow:hidden; } .partner-ribbon .partner-track{ display:flex; gap:80px; align-items:center; animation:marquee 50s linear infinite; width:max-content; } .partner-ribbon img{ height:64px; width:auto; max-width:180px; object-fit:contain; flex-shrink:0; opacity:0.55; filter:grayscale(100%); transition:opacity .25s, filter .25s; } .partner-ribbon img:hover{ opacity:1; filter:grayscale(0); } @media (max-width:640px){ .partner-ribbon img{ height:46px; max-width:130px; } .partner-ribbon .partner-track{ gap:48px; } } /* ============================================================ HOME - WELCOME / STORY ============================================================ */ .story{ display:grid; grid-template-columns: 1fr 1.2fr; gap:80px; align-items:center; } .story-visual{ position:relative; height:560px; } .story-arch{ position:absolute; inset:0; border-radius:var(--r-arch); overflow:hidden; box-shadow:0 30px 80px -40px rgba(0,0,0,0.4); } .story-tag{ position:absolute; left:-24px; bottom:40px; background:var(--cream); padding:18px 22px; border-radius:14px; box-shadow:0 20px 40px -20px rgba(0,0,0,0.2); display:flex; align-items:center; gap:14px; max-width:260px; } .story-tag-emoji{ flex-shrink:0; width:42px; height:42px; border-radius:50%; background:var(--cream); border:1px solid var(--line); display:flex; align-items:center; justify-content:center; font-size:22px; line-height:1; overflow:hidden; } .story-tag-text strong{ display:block; font-size:14px; } .story-tag-text small{ color:var(--ink-mute); font-size:12px; } .story-copy .eyebrow{ margin-bottom:28px; } .story-copy h2{ margin-bottom:32px; } .story-copy p{ color:var(--ink-soft); font-size:17px; margin:0 0 20px; } .story-copy .pullquote{ margin:36px 0; padding-left:24px; border-left:2px solid var(--sa-gold); font-family:var(--f-display); font-style:italic; font-size:22px; color:var(--ink); line-height:1.35; } .story-sign{ display:flex; align-items:center; gap:12px; font-family:var(--f-mono); font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--ink-mute); margin-top:32px; } /* ============================================================ HOME - PILLARS (values, asymmetric, not boxy) ============================================================ */ .pillars-section{ background:var(--sheet); position:relative; border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); } .pillars-head{ display:grid; grid-template-columns: 1fr 1fr; gap:40px; align-items:end; margin-bottom:80px; } .pillars-head p{ color:var(--ink-soft); max-width:46ch; margin:0; } .pillars{ display:grid; grid-template-columns: repeat(12, 1fr); gap:32px; } .pillar{ grid-column: span 4; padding:36px 4px 0; border-top:1px solid var(--line); position:relative; } .pillar:nth-child(1){ padding-top:48px; } .pillar:nth-child(2){ margin-top:40px; } .pillar:nth-child(3){ margin-top:80px; } .pillar-num{ font-family:var(--f-mono); font-size:11px; letter-spacing:0.2em; color:var(--sa-green); margin-bottom:12px; } .pillar h3{ margin-bottom:16px; } .pillar h3 em{ font-style:italic; color:var(--sa-terracotta); font-weight:400; } .pillar p{ color:var(--ink-soft); font-size:15px; margin:0; } /* ============================================================ HOME - EVENTS PREVIEW ============================================================ */ .events-preview-head{ display:flex; justify-content:space-between; align-items:end; margin-bottom:60px; gap:40px; flex-wrap:wrap; } .events-preview-head h2{ max-width:14ch; } .event-row{ display:grid; grid-template-columns: 140px 1fr 1fr auto auto; gap:32px; align-items:center; padding:32px 0; border-top:1px solid var(--line); transition:padding .3s; } .event-row:last-child{ border-bottom:1px solid var(--line); } .event-row:hover{ padding-left:20px; } .event-date{ font-family:var(--f-display); font-size:14px; color:var(--ink-mute); } .event-date .day{ display:block; font-size:34px; color:var(--ink); line-height:1; } .event-title{ font-family:var(--f-display); font-size:28px; line-height:1.1; } .event-title em{ font-style:italic; color:var(--sa-terracotta); font-weight:400; } .event-loc{ font-size:14px; color:var(--ink-mute); } .event-pill{ font-family:var(--f-mono); font-size:10px; letter-spacing:0.15em; text-transform:uppercase; padding:6px 12px; border-radius:999px; background:var(--sa-green); color:var(--cream); } .event-pill.past{ background:var(--sand); color:var(--ink-soft); } .event-pill.tbd{ background:transparent; color:var(--ink-mute); border:1px solid var(--line); } .event-arrow{ width:44px; height:44px; border-radius:50%; border:1px solid var(--line); display:flex; align-items:center; justify-content:center; transition:background .2s, color .2s, border-color .2s, transform .2s; } .event-row:hover .event-arrow{ background:var(--ink); color:var(--cream); border-color:var(--ink); transform:rotate(-45deg); } /* ============================================================ HOME - GALLERY STRIP ============================================================ */ .gallery-strip{ display:grid; grid-template-columns: repeat(4, 1fr); gap:16px; height:380px; } .gallery-strip > *{ border-radius:14px; overflow:hidden; } .gallery-strip > *:nth-child(2){ border-radius:14px 14px 999px 999px; } .gallery-strip > *:nth-child(4){ border-radius:999px 999px 14px 14px; } /* ============================================================ HOME - CONNECT CTA ============================================================ */ .connect-section{ background:var(--sa-green-deep); color:var(--cream); position:relative; overflow:hidden; } .connect-section::before{ content:""; position:absolute; top:-200px; right:-200px; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle, rgba(242,168,29,0.28), transparent 70%); } .connect-section::after{ content:""; position:absolute; bottom:-200px; left:-200px; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle, rgba(255,255,255,0.10), transparent 70%); } .connect-section .eyebrow{ color:var(--sa-gold); } .connect-section .eyebrow::before{ background:var(--sa-gold); } .connect-inner{ position:relative; z-index:1; text-align:center; } .connect-section h2{ color:var(--cream); max-width:14ch; margin:24px auto 20px; } .connect-section h2 em{ font-style:italic; color:var(--sa-gold); font-weight:400; } .connect-section .lead{ color:rgba(250,246,239,0.75); max-width:50ch; margin:0 auto 40px; } .connect-channels{ display:grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap:20px; max-width:1100px; margin:0 auto; } .channel{ display:flex; flex-direction:column; padding:28px 24px; background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.1); border-radius:16px; text-align:left; min-width:0; transition:transform .25s, background .25s, border-color .25s; } .channel:hover{ transform:translateY(-4px); background:rgba(255,255,255,0.07); border-color:var(--sa-gold); } .channel-icon{ width:40px; height:40px; border-radius:50%; background:rgba(242,168,29,0.15); color:var(--sa-gold); display:flex; align-items:center; justify-content:center; margin-bottom:20px; flex-shrink:0; } .channel h4{ color:var(--cream); margin-bottom:6px; font-family:var(--f-body); font-size:15px; font-weight:600; word-break:break-word; } .channel p{ color:rgba(250,246,239,0.6); font-size:13px; margin:0 0 14px; } .channel-link{ font-family:var(--f-mono); font-size:11px; letter-spacing:0.08em; color:var(--sa-gold); margin-top:auto; word-break:break-word; overflow-wrap:anywhere; line-height:1.5; max-width:100%; } /* ============================================================ ABOUT page ============================================================ */ .page-hero{ padding:clamp(56px, 9vw, 120px) clamp(20px, 4vw, 40px) clamp(32px, 4vw, 56px); background: radial-gradient(800px 400px at 90% 0%, rgba(232,167,35,0.08), transparent 60%), var(--sheet); border-bottom:1px solid var(--line-soft); } .page-hero-inner{ max-width:1240px; margin:0 auto; } .page-hero .eyebrow{ margin-bottom:24px; } .page-hero h1{ font-size:clamp(44px, 6vw, 88px); max-width:16ch; margin-bottom:32px; } .page-hero-lead{ max-width:58ch; font-size:clamp(17px, 1.3vw, 19px); color:var(--ink-soft); } .about-hero-visual{ height:480px; margin-top:60px; border-radius:28px; overflow:hidden; position:relative; } .about-hero-visual .ph{ height:100%; } .about-hero-visual img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:var(--r-arch); } .about-grid{ display:grid; grid-template-columns: 1fr 1fr; gap:80px; align-items:start; margin-bottom:40px; } .about-grid-visual{ position:relative; } .about-grid-visual .arch{ position:relative; height:600px; border-radius:var(--r-arch); overflow:hidden; } .about-body h2{ margin-bottom:32px; } .about-body h2 em{ font-style:italic; color:var(--sa-terracotta); font-weight:400; } .about-body p{ color:var(--ink-soft); font-size:17px; margin:0 0 20px; } .about-body .pullquote{ margin:40px 0; font-family:var(--f-display); font-style:italic; font-size:26px; line-height:1.3; color:var(--ink); border-left:2px solid var(--sa-gold); padding-left:24px; } .values-section{ background:var(--sheet); border-top:1px solid var(--line-soft); border-bottom:1px solid var(--line-soft); } .values-head{ text-align:center; margin-bottom:80px; } .values-head h2{ max-width:18ch; margin:20px auto 0; } .values-grid{ display:grid; grid-template-columns: repeat(3, 1fr); gap:48px; } .value{ text-align:left; } .value-mark{ font-family:var(--f-display); font-style:italic; font-size:64px; color:var(--sa-green); line-height:1; margin-bottom:20px; } .value h3{ margin-bottom:12px; } .value p{ color:var(--ink-soft); font-size:15px; margin:0; } .team-strip{ padding:clamp(64px, 8vw, 96px) clamp(20px, 4vw, 40px); background:var(--canvas); } .team-strip-head{ text-align:center; margin-bottom:clamp(40px, 5vw, 56px); } .team-strip .wrap{ max-width:1240px; margin:0 auto; } .team-grid{ display:grid; grid-template-columns: repeat(4, 1fr); gap:32px; } .member{ text-align:left; display:flex; flex-direction:column; } .member-photo{ position:relative !important; height:340px; border-radius:var(--r-arch); margin-bottom:20px; overflow:hidden; background: repeating-linear-gradient(135deg, rgba(0,114,75,0.10) 0px, rgba(0,114,75,0.10) 2px, transparent 2px, transparent 14px), linear-gradient(135deg, var(--cream-warm), var(--sand)); display:flex; align-items:center; justify-content:center; color:var(--ink-mute); font-family:var(--f-mono); font-size:11px; text-align:center; padding:16px; } .member-photo:has(> img){ padding:0; background:none; } .member-photo img{ width:100%; height:100%; object-fit:cover; display:block; } .member-name{ font-family:var(--f-display); font-size:22px; } .member-role{ font-family:var(--f-mono); font-size:11px; color:var(--ink-mute); letter-spacing:0.12em; text-transform:uppercase; margin-top:4px; } /* ============================================================ EVENTS page ============================================================ */ .events-toolbar{ display:flex; gap:8px; padding:24px 40px 0; max-width:1240px; margin:0 auto; border-top:1px solid var(--line); } .events-tab{ padding:12px 22px; border:none; background:transparent; font-family:var(--f-body); font-size:13px; font-weight:500; color:var(--ink-mute); border-radius:999px; cursor:pointer; transition:background .2s, color .2s; } .events-tab.active{ background:var(--ink); color:var(--cream); } .events-tab:not(.active):hover{ color:var(--ink); } .events-list{ padding:clamp(28px, 3.5vw, 40px) clamp(20px, 4vw, 40px) clamp(56px, 7vw, 88px); max-width:1240px; margin:0 auto; } .events-list + .events-list{ padding-top:0; } .events-list:not(:last-of-type){ padding-bottom:0; } .event-card{ display:grid; grid-template-columns: 200px 1fr 1fr; gap:48px; padding:48px 0; border-top:1px solid var(--line); align-items:center; } .event-card:not(:has(.event-card-photos)) .event-card-body{ grid-column: 2 / -1; } .event-card:last-child{ border-bottom:1px solid var(--line); } .event-card-date{ font-family:var(--f-display); } .event-card-date .d-month{ font-size:13px; letter-spacing:0.2em; text-transform:uppercase; color:var(--sa-green); font-family:var(--f-mono); } .event-card-date .d-day{ font-size:82px; line-height:0.9; font-weight:500; } .event-card-date .d-year{ font-size:14px; color:var(--ink-mute); font-family:var(--f-mono); } .event-card-body h3{ font-size:36px; margin-bottom:14px; } .event-card-body h3 em{ font-style:italic; color:var(--sa-terracotta); font-weight:400; } .event-card-body p{ color:var(--ink-soft); font-size:15px; margin:0 0 14px; } .event-card-meta{ display:flex; flex-wrap:wrap; gap:20px; font-size:13px; color:var(--ink-mute); } .event-card-meta span{ display:inline-flex; align-items:center; gap:6px; } /* Trigger row — keeps multiple story buttons side-by-side, wraps on narrow widths */ .story-triggers{ display:flex; flex-wrap:wrap; gap:10px; margin:0 0 18px; } /* "Read the full story" pill on event cards */ .story-trigger{ display:inline-flex; align-items:center; gap:8px; margin:0; padding:9px 18px; background:transparent; border:1px solid var(--line); border-radius:999px; font-family:var(--f-mono); font-size:11px; letter-spacing:0.14em; text-transform:uppercase; color:var(--ink); cursor:pointer; transition:background .2s, color .2s, border-color .2s, transform .2s; } .story-trigger:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); transform:translateY(-1px); } .story-trigger:focus-visible{ outline:2px solid var(--sa-gold); outline-offset:3px; } .story-trigger svg{ flex-shrink:0; transition:transform .2s; } .story-trigger:hover svg{ transform:translateX(2px); } /* Story modal — wider, comfortable reading width */ .story-backdrop{ position:fixed; inset:0; z-index:150; background:rgba(10,20,16,0.5); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); display:flex; align-items:center; justify-content:center; padding:32px 20px; opacity:0; pointer-events:none; transition:opacity .28s ease; } .story-backdrop.open{ opacity:1; pointer-events:auto; } .story-modal{ position:relative; background:var(--sheet); border-radius:20px; width:100%; max-width:720px; max-height:88vh; overflow-y:auto; padding:64px 64px 56px; box-shadow:0 40px 80px -20px rgba(10,20,16,0.45); transform:translateY(24px) scale(.98); transition:transform .35s cubic-bezier(.2,.7,.2,1), opacity .28s ease; opacity:0; } .story-backdrop.open .story-modal{ transform:translateY(0) scale(1); opacity:1; } .story-close{ position:absolute; top:18px; right:18px; width:40px; height:40px; border-radius:50%; background:var(--cream-warm); border:1px solid var(--line); display:inline-flex; align-items:center; justify-content:center; cursor:pointer; color:var(--ink); transition:background .2s, transform .2s, border-color .2s; } .story-close:hover{ background:var(--ink); color:var(--cream); border-color:var(--ink); transform:rotate(90deg); } .story-close:focus-visible{ outline:2px solid var(--sa-gold); outline-offset:3px; } .story-head{ margin-bottom:32px; padding-right:48px; } .story-head .eyebrow{ display:inline-flex; margin-bottom:14px; } .story-head h2{ font-family:var(--f-display); font-size:clamp(28px, 3.6vw, 44px); line-height:1.05; color:var(--ink); margin:0; } .story-body p{ color:var(--ink-soft); font-size:16px; line-height:1.7; margin:0 0 16px; font-family:var(--f-body); } .story-body p:last-child{ margin-bottom:0; } .story-body .story-aside{ font-family:var(--f-display); font-style:italic; font-size:22px; color:var(--ink); margin:6px 0 18px; } .story-body .story-list{ margin:6px 0 22px; padding:0; list-style:none; display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr)); gap:8px 24px; border-top:1px solid var(--line); border-bottom:1px solid var(--line); padding:18px 0; } .story-body .story-list li{ position:relative; padding-left:20px; color:var(--ink-soft); font-size:15px; line-height:1.5; } .story-body .story-list li::before{ content:""; position:absolute; left:0; top:0.7em; width:8px; height:1px; background:var(--sa-gold); } .story-body .story-quote{ margin:8px 0 22px; padding:24px 28px; background:var(--cream-warm); border-left:3px solid var(--sa-gold); border-radius:0 12px 12px 0; font-family:var(--f-display); font-style:italic; color:var(--ink); } .story-body .story-quote p{ font-size:18px; line-height:1.55; margin:0 0 14px; color:var(--ink); font-family:var(--f-display); font-style:italic; } .story-body .story-quote p:first-child{ font-size:22px; font-weight:500; color:var(--sa-terracotta); margin-bottom:18px; } .story-body .story-quote p:last-child{ margin-bottom:0; } .story-body .story-thanks{ margin-top:28px; padding-top:24px; border-top:1px solid var(--line); font-family:var(--f-display); font-size:24px; font-style:italic; color:var(--ink-soft); text-align:center; } .story-body .thanks-orange{ color:var(--sa-terracotta); font-weight:600; font-style:normal; } @media (max-width:640px){ .story-modal{ padding:48px 24px 36px; max-height:92vh; border-radius:16px; } .story-head{ padding-right:36px; margin-bottom:24px; } .story-body .story-list{ grid-template-columns:1fr; } .story-close{ top:12px; right:12px; } } .event-card-photos{ display:grid; grid-template-columns: 2fr 1fr; gap:8px; height:200px; } .event-card-photos > *{ border-radius:12px; overflow:hidden; } .event-card-photos .ph-stack{ display:grid; grid-template-rows:1fr 1fr; gap:8px; } .event-card-photos .ph-stack > *{ border-radius:12px; overflow:hidden; } /* Clickable gallery photos on event cards */ .event-card-photos .ph[data-gallery]{ position:relative; cursor:zoom-in; transition:transform .25s, box-shadow .25s; } .event-card-photos .ph[data-gallery]:hover{ transform:scale(1.015); box-shadow:0 14px 30px -16px rgba(10,20,16,0.3); } .event-card-photos .ph[data-gallery]:focus-visible{ outline:2px solid var(--sa-gold); outline-offset:3px; } /* "+ N" overlay on the last photo of each card */ .event-card-photos .ph--more::after{ content:attr(data-more-count); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:rgba(10,20,16,0.6); color:#FAF6EF; font-family:var(--f-display); font-size:clamp(28px, 3vw, 42px); font-weight:500; letter-spacing:-0.02em; pointer-events:none; transition:background .25s; } .event-card-photos .ph--more:hover::after{ background:rgba(10,20,16,0.75); } /* Gallery lightbox overlay (thumbnail grid) */ .gallery-overlay{ position:fixed; inset:0; z-index:200; background:rgba(10,20,16,0.95); overflow-y:auto; padding:64px 24px 56px; animation:gallery-fade .2s ease; } @keyframes gallery-fade{ from{ opacity:0; } to{ opacity:1; } } .gallery-close{ position:fixed; top:18px; right:24px; z-index:201; width:44px; height:44px; border-radius:50%; border:none; background:rgba(255,255,255,0.1); color:#FAF6EF; font-size:24px; cursor:pointer; line-height:1; display:flex; align-items:center; justify-content:center; transition:background .2s; } .gallery-close:hover{ background:rgba(255,255,255,0.22); } .gallery-title{ max-width:1200px; margin:0 auto 24px; font-family:var(--f-mono); font-size:11px; letter-spacing:0.18em; text-transform:uppercase; color:rgba(250,246,239,0.65); } .gallery-grid{ max-width:1200px; margin:0 auto; display:grid; grid-template-columns:repeat(auto-fill, minmax(180px, 1fr)); gap:10px; } .gallery-grid img{ width:100%; aspect-ratio:1; object-fit:cover; cursor:zoom-in; border-radius:8px; transition:transform .2s, opacity .2s; } .gallery-grid img:hover{ transform:scale(1.03); opacity:0.92; } /* Fullscreen single-image view */ .gallery-fullscreen{ position:fixed; inset:0; z-index:202; background:rgba(0,0,0,0.96); display:none; align-items:center; justify-content:center; } .gallery-fullscreen.open{ display:flex; } .gallery-fullscreen img{ max-width:96vw; max-height:90vh; object-fit:contain; border-radius:6px; } .gallery-fullscreen .fs-close, .gallery-fullscreen .fs-prev, .gallery-fullscreen .fs-next{ position:fixed; z-index:203; width:48px; height:48px; border-radius:50%; border:none; background:rgba(255,255,255,0.1); color:#FAF6EF; font-size:28px; cursor:pointer; line-height:1; display:flex; align-items:center; justify-content:center; transition:background .2s; } .gallery-fullscreen .fs-close:hover, .gallery-fullscreen .fs-prev:hover, .gallery-fullscreen .fs-next:hover{ background:rgba(255,255,255,0.25); } .gallery-fullscreen .fs-close{ top:18px; right:24px; } .gallery-fullscreen .fs-prev{ top:50%; left:18px; transform:translateY(-50%); } .gallery-fullscreen .fs-next{ top:50%; right:18px; transform:translateY(-50%); } .gallery-fullscreen .fs-counter{ position:fixed; bottom:18px; left:50%; transform:translateX(-50%); font-family:var(--f-mono); font-size:12px; color:rgba(250,246,239,0.7); letter-spacing:0.12em; } @media (max-width:640px){ .gallery-grid{ grid-template-columns:repeat(auto-fill, minmax(120px, 1fr)); gap:6px; } .gallery-overlay{ padding:56px 12px 32px; } .gallery-fullscreen .fs-prev{ left:8px; } .gallery-fullscreen .fs-next{ right:8px; } } /* ============================================================ JOIN page ============================================================ */ .join-grid{ display:grid; grid-template-columns: repeat(2, 1fr); gap:24px; padding:clamp(28px, 3.5vw, 40px) clamp(20px, 4vw, 40px) clamp(56px, 7vw, 88px); max-width:1240px; margin:0 auto; } .join-card{ display:flex; flex-direction:column; background:var(--sheet); border:1px solid var(--line-soft); border-radius:24px; padding:40px; position:relative; overflow:hidden; min-height:360px; transition:transform .3s, background .3s, box-shadow .3s, border-color .3s; box-shadow:0 1px 2px rgba(10,20,16,0.04); } .join-card:not(.featured):hover{ box-shadow:0 20px 40px -20px rgba(10,20,16,0.15); border-color:var(--sa-gold); } .join-card:hover{ transform:translateY(-4px); } .join-card.featured{ background:var(--ink); color:var(--cream); grid-column:span 2; } .join-card--wide{ grid-column:span 2; } .join-card.featured h3, .join-card.featured .eyebrow{ color:var(--cream); } .join-card.featured .eyebrow::before{ background:var(--sa-gold); } .join-card.featured p{ color:rgba(250,246,239,0.75); } .join-card .eyebrow{ margin-bottom:24px; } .join-card h3{ font-size:34px; margin-bottom:16px; max-width:14ch; } .join-card h3 em{ font-style:italic; color:var(--sa-terracotta); font-weight:400; } .join-card.featured h3 em{ color:var(--sa-gold); } .join-card p{ color:var(--ink-soft); margin:0 0 28px; max-width:44ch; } .join-card-footer{ margin-top:auto; display:flex; align-items:center; justify-content:space-between; gap:20px; } .join-card-link{ display:inline-flex; align-items:center; gap:10px; font-family:var(--f-mono); font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--ink); } .join-card.featured .join-card-link{ color:var(--sa-gold); } .join-card-link svg{ transition:transform .2s; } .join-card:hover .join-card-link svg{ transform:translateX(4px); } .join-card-bg{ position:absolute; right:-40px; bottom:-40px; font-family:var(--f-display); font-size:220px; line-height:1; color:rgba(0,114,75,0.06); pointer-events:none; font-style:italic; } .join-card.featured .join-card-bg{ color:rgba(242,168,29,0.08); } /* ============================================================ GET INVOLVED page ============================================================ */ .involve-grid{ display:grid; grid-template-columns: 1.2fr 1fr; gap:clamp(40px, 6vw, 80px); padding:clamp(28px, 3.5vw, 40px) clamp(20px, 4vw, 40px) clamp(48px, 6vw, 72px); max-width:1240px; margin:0 auto; align-items:start; } .involve-intro .eyebrow{ margin-bottom:24px; } .involve-intro h2{ margin-bottom:24px; } .involve-intro p{ color:var(--ink-soft); font-size:17px; margin:0 0 20px; max-width:48ch; } .involve-list{ display:flex; flex-direction:column; gap:16px; } .involve-item{ padding:32px; border:1px solid var(--line-soft); border-radius:20px; cursor:pointer; transition:background .2s, border-color .2s, transform .2s, box-shadow .2s; display:flex; gap:24px; align-items:flex-start; background:var(--sheet); box-shadow:0 1px 2px rgba(10,20,16,0.03); } .involve-item:hover{ background:var(--sa-green); color:var(--cream); border-color:var(--sa-green); transform:translateX(6px); } .involve-item:hover h4, .involve-item:hover p, .involve-item:hover .involve-num{ color:var(--cream); } .involve-num{ font-family:var(--f-mono); font-size:11px; letter-spacing:0.15em; color:var(--sa-green); padding-top:6px; } .involve-text{ flex:1; } .involve-text h4{ font-family:var(--f-display); font-size:26px; font-weight:500; margin-bottom:8px; } .involve-text p{ color:var(--ink-soft); font-size:14px; margin:0; } .involve-arrow{ width:44px; height:44px; border-radius:50%; background:var(--canvas); display:flex; align-items:center; justify-content:center; flex-shrink:0; transition:background .2s, transform .2s; } .involve-item:hover .involve-arrow{ background:var(--sa-gold); color:var(--ink); transform:rotate(-45deg); } /* Form modal */ .modal-backdrop{ position:fixed; inset:0; z-index:100; background:rgba(26,31,28,0.5); backdrop-filter:blur(4px); display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .25s; padding:24px; } .modal-backdrop.open{ opacity:1; pointer-events:auto; } .modal{ background:var(--sheet); border-radius:24px; padding:48px; width:100%; max-width:560px; transform:translateY(20px); transition:transform .3s; max-height:90vh; overflow-y:auto; position:relative; box-shadow:0 40px 80px -20px rgba(0,0,0,0.4); } .modal-backdrop.open .modal{ transform:translateY(0); } .modal-close{ position:absolute; top:20px; right:20px; width:36px; height:36px; border-radius:50%; background:var(--cream-warm); border:none; cursor:pointer; display:flex; align-items:center; justify-content:center; } .modal h3{ font-size:30px; margin-bottom:8px; } .modal .eyebrow{ margin-bottom:16px; } .modal p.modal-sub{ color:var(--ink-soft); margin:0 0 28px; font-size:14px; } /* Dedicated form-page route (e.g. #/volunteer-signup) */ .page-back{ display:inline-flex; align-items:center; font-family:var(--f-mono); font-size:11px; letter-spacing:0.16em; text-transform:uppercase; color:var(--sa-green); text-decoration:none; padding:6px 0; margin-bottom:18px; transition:color .2s, transform .2s; } .page-back:hover{ color:var(--ink); transform:translateX(-3px); } .form-page-section{ padding:0 clamp(20px, 4vw, 40px) clamp(56px, 7vw, 88px); max-width:1100px; margin:0 auto; } .form-page-frame{ background:var(--sheet); border:1px solid var(--line); border-radius:18px; overflow:hidden; box-shadow:0 24px 48px -28px rgba(10,20,16,0.18); } .form-page-frame iframe{ display:block; width:100%; height:920px; max-height:calc(100vh - 180px); border:none; background:var(--cream-warm); } @media (max-width:640px){ .form-page-frame{ border-radius:12px; } .form-page-frame iframe{ height:80vh; } } .form-field{ margin-bottom:18px; } .form-field label{ display:block; font-size:12px; font-family:var(--f-mono); letter-spacing:0.1em; text-transform:uppercase; color:var(--ink-mute); margin-bottom:8px; } .form-field input, .form-field textarea, .form-field select{ width:100%; padding:12px 14px; border:1px solid var(--line); border-radius:10px; background:var(--cream-warm); font-family:var(--f-body); font-size:15px; color:var(--ink); } .form-field input:focus, .form-field textarea:focus, .form-field select:focus{ outline:none; border-color:var(--sa-green); background:var(--cream); } .form-field textarea{ min-height:100px; resize:vertical; } .form-submit{ width:100%; padding:16px; background:var(--ink); color:var(--cream); border:none; border-radius:10px; font-size:14px; font-weight:500; cursor:pointer; transition:background .2s; } .form-submit:hover{ background:var(--sa-green); } .form-success{ text-align:center; padding:40px 20px; } .form-success-check{ width:64px; height:64px; margin:0 auto 20px; border-radius:50%; background:var(--sa-green); color:var(--cream); display:flex; align-items:center; justify-content:center; } .form-success h3{ margin-bottom:10px; } .form-success p{ color:var(--ink-soft); } /* ============================================================ FOOTER ============================================================ */ .footer{ background:var(--ink); color:var(--cream); padding:clamp(48px, 6vw, 64px) clamp(20px, 4vw, 40px) 0; border-top:1px solid var(--line); position:relative; overflow:hidden; } .footer::before{ content:""; position:absolute; top:-200px; right:-200px; width:500px; height:500px; border-radius:50%; background:radial-gradient(circle, rgba(242,168,29,0.18), transparent 70%); pointer-events:none; } .footer::after{ content:""; position:absolute; bottom:-200px; left:-200px; width:600px; height:600px; border-radius:50%; background:radial-gradient(circle, rgba(0,114,75,0.25), transparent 70%); pointer-events:none; } .footer-inner{ position:relative; z-index:1; max-width:1240px; margin:0 auto; display:grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap:60px; padding-bottom:24px; } .footer-brand-row{ display:flex; align-items:center; margin-bottom:18px; } .footer-brand-row img{ height:44px; width:auto; object-fit:contain; margin:0; flex-shrink:0; } .footer-brand p{ color:rgba(250,246,239,0.75); font-size:14px; max-width:32ch; margin:0; } .footer h4{ font-family:var(--f-mono); font-size:11px; letter-spacing:0.15em; text-transform:uppercase; color:var(--sa-gold); font-weight:500; margin:0 0 18px; } .footer-col a, .footer-col p{ display:block; font-size:14px; color:rgba(250,246,239,0.75); padding:4px 0; transition:color .2s; margin:0; } .footer-col a:hover{ color:var(--sa-gold); } .footer-tz{ font-family:var(--f-mono); font-size:13px; color:rgba(250,246,239,0.75); } .footer-tz span{ color:var(--cream); } .footer-small{ font-size:12px; color:rgba(250,246,239,0.55); margin-top:16px !important; } .footer-bottom{ position:relative; z-index:1; max-width:1240px; margin:0 auto; padding:16px 40px 20px; border-top:1px solid rgba(255,255,255,0.06); text-align:center; } .footer-copyright{ margin:0; font-size:12px; color:rgba(250,246,239,0.55); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } p.footer-credit{ position:absolute; right:10px; bottom:18px; margin:0 !important; padding:6px 10px; display:flex; flex-direction:column; align-items:flex-end; gap:4px; opacity:0.85; white-space:nowrap; z-index:2; font-size:11px; } .footer-credit a{ display:inline-flex; align-items:center; text-decoration:none; transition:opacity .2s; } .footer-credit a:hover{ opacity:1; } .footer-credit a:focus-visible{ outline:2px solid var(--sa-gold); outline-offset:3px; border-radius:4px; } .footer-credit img{ height:19px; width:auto; display:block; } @media (max-width:640px){ p.footer-credit{ position:static; margin:8px auto 0 !important; align-items:center; } .footer-bottom{ padding:14px 20px 16px; } .footer-copyright{ white-space:normal; line-height:1.4; } } .footer-stripe{ display:grid; grid-template-columns: repeat(7, 1fr); height:6px; } .footer-stripe span{ background:var(--c); } @media (max-width: 640px){ #tweaks-panel{ right:12px; left:12px; bottom:12px; width:auto; } } @media (max-width: 1024px){ .nav{ padding:16px 24px; gap:20px; grid-template-columns: 1fr auto; background:var(--cream); backdrop-filter:none; -webkit-backdrop-filter:none; border-bottom:1px solid rgba(10,20,16,0.08); } .nav.scrolled{ background:var(--cream); } .nav-links, .nav-cta{ display:none; } .nav-burger{ display:flex; justify-self:end; position:relative; z-index:2; } .nav-burger span{ height:2px; } .hero-grid{ grid-template-columns:1fr; gap:32px; min-height:auto; } .hero-visual{ height:440px; order:-1; } .hero-arch-main{ width:78%; height:86%; } .hero-badge{ width:100px; height:100px; font-size:9px; padding:14px; } .story{ grid-template-columns:1fr; gap:40px; } .story-visual{ height:440px; } .pillars-head{ grid-template-columns:1fr; gap:24px; } .pillars{ gap:20px; } .pillar{ grid-column:span 12; margin-top:0 !important; padding-top:32px !important; } .gallery-strip{ grid-template-columns:1fr 1fr; height:auto; grid-auto-rows:220px; } .connect-channels{ grid-template-columns:1fr; max-width:480px; } .about-grid{ grid-template-columns:1fr; gap:40px; } .about-grid-visual{ position:static; } .about-grid-visual .arch{ height:420px; } .values-grid{ grid-template-columns:1fr; gap:40px; } .team-grid{ grid-template-columns:repeat(2, 1fr); } .event-card{ grid-template-columns:1fr; gap:20px; padding:32px 0; } .event-card:not(:has(.event-card-photos)) .event-card-body{ grid-column:auto; } .event-card-date{ display:flex; align-items:baseline; gap:14px; flex-wrap:wrap; } .event-card-date .d-day{ font-size:48px; } .event-card-body h3{ font-size:28px; } .event-card-photos{ height:220px; } .event-row{ grid-template-columns:auto 1fr auto; gap:16px; padding:24px 0; } .event-row .event-loc, .event-row .event-pill{ display:none; } .event-title{ font-size:22px; } .events-preview-head{ flex-direction:column; align-items:flex-start; } .join-grid{ grid-template-columns:1fr; } .join-card.featured, .join-card--wide{ grid-column:1 / -1; } .join-card h3{ font-size:28px; } .join-card-bg{ font-size:160px; } .involve-grid{ grid-template-columns:1fr; gap:40px; } .footer-inner{ grid-template-columns:1fr 1fr; gap:40px; } } @media (max-width: 640px){ .nav{ padding:14px 20px; } .nav-brand img{ height:36px; width:auto; } .hero-visual{ height:340px; } .hero-stats{ grid-template-columns:1fr 1fr; } .hero-stat .num{ font-size:32px; } .gallery-strip{ grid-template-columns:1fr; grid-auto-rows:220px; } .connect-channels{ grid-template-columns:1fr; } .team-grid{ grid-template-columns:1fr; } .member-photo{ height:340px; } .ribbon-item{ font-size:20px; gap:32px; } .footer-inner{ grid-template-columns:1fr; gap:28px; } .modal{ padding:32px 24px; } .event-card-body h3{ font-size:26px; } .join-card{ padding:32px 24px; min-height:240px; } }