/* ============================================ SAGE.CSS — Project SAGE Design System Editorial Magazine + Bold Activist Mobile-first, accessible, warm & bold ============================================ */ /* --- Google Fonts loaded via in HTML --- */ /* ============================================ DESIGN TOKENS ============================================ */ :root { /* Colors */ --bg-primary: #FFFFFF; --bg-secondary: #FFF8F0; --bg-sand: #F0E6D6; --sage-green: #6B9B7D; --sage-green-light: #A8CDB8; --sage-green-dark: #4A7A5E; --coral: #E8735A; --coral-light: #F4A894; --coral-dark: #C4553E; --gold: #D4A843; --gold-light: #E8CC7A; --text-primary: #3D3530; --text-secondary: #6B5E56; --text-inverse: #FFFFFF; --border: rgba(61, 53, 48, 0.1); --shadow-warm: rgba(61, 53, 48, 0.08); /* Typography */ --font-display: 'Barlow Condensed', system-ui, sans-serif; --font-body: 'Nunito', system-ui, sans-serif; --text-hero: clamp(3rem, 7vw, 6rem); --text-h1: clamp(2.5rem, 5vw, 4rem); --text-h2: clamp(2rem, 4vw, 3rem); --text-h3: clamp(1.5rem, 3vw, 2rem); --text-h4: clamp(1.25rem, 2vw, 1.5rem); --text-body-lg: 1.25rem; --text-body: 1.125rem; --text-sm: 1rem; /* Spacing */ --space-xs: 0.5rem; --space-sm: 1rem; --space-md: 1.5rem; --space-lg: 2.5rem; --space-xl: 4rem; --space-2xl: 7rem; /* Radii */ --radius-sm: 6px; --radius-md: 12px; --radius-lg: 20px; --radius-xl: 32px; --radius-full: 9999px; } /* ============================================ RESET & BASE ============================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: var(--text-body); font-weight: 400; line-height: 1.7; color: var(--text-primary); background-color: var(--bg-primary); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } ul, ol { list-style: none; } /* ============================================ ACCESSIBILITY: SKIP LINK ============================================ */ .skip-link { position: absolute; top: -100%; left: var(--space-sm); background: var(--coral); color: var(--text-inverse); padding: var(--space-xs) var(--space-sm); border-radius: var(--radius-sm); font-weight: 600; z-index: 10000; font-size: var(--text-sm); } .skip-link:focus { top: var(--space-sm); } /* ============================================ UTILITY: CONTAINER ============================================ */ .container { width: 100%; max-width: 1280px; margin-inline: auto; padding-inline: var(--space-md); } @media (min-width: 768px) { .container { padding-inline: var(--space-lg); } } /* ============================================ UTILITY: SCREEN READER ONLY ============================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ============================================ GLOBAL: GRAIN TEXTURE OVERLAY ============================================ */ .grain { position: relative; } .grain::before { content: ''; position: absolute; inset: 0; opacity: 0.03; background-image: url('assets/images/grain-texture.png'); background-repeat: repeat; pointer-events: none; z-index: 1; } /* ============================================ GLOBAL: CORAL MARKER UNDERLINE ============================================ */ .marker-highlight { position: relative; display: inline; } .marker-highlight::after { content: ''; position: absolute; bottom: 2px; left: -2px; right: -2px; height: 0.15em; background: rgba(232, 115, 90, 0.2); transform: skewX(-4deg); z-index: -1; } /* ============================================ GLOBAL: SECTION LABEL (coral dash prefix) ============================================ */ .section-label { display: flex; align-items: center; gap: var(--space-sm); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-secondary); margin-bottom: var(--space-xs); } .label-dash { display: inline-block; width: 32px; height: 1px; background: var(--coral); flex-shrink: 0; } /* ============================================ GLOBAL: SECTION TITLE ============================================ */ .section-title { font-family: var(--font-display); font-size: var(--text-h2); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.1; } /* ============================================ SECTION 1: STICKY NAV ============================================ */ .site-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; padding: var(--space-sm) 0; transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease; } .site-nav.scrolled { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); box-shadow: 0 2px 20px var(--shadow-warm); padding: var(--space-xs) 0; } .nav-inner { display: flex; align-items: center; justify-content: space-between; gap: var(--space-sm); } .nav-logo { font-family: var(--font-display); font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; color: var(--sage-green-dark); flex-shrink: 0; } .nav-logo span { color: var(--coral); } .nav-links { display: none; gap: var(--space-lg); align-items: center; } @media (min-width: 900px) { .nav-links { display: flex; } } .nav-links a { font-family: var(--font-body); font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); transition: color 0.2s ease; white-space: nowrap; } .nav-links a:hover, .nav-links a:focus-visible { color: var(--sage-green-dark); } .nav-cta { flex-shrink: 0; } /* Mobile menu toggle */ .nav-toggle { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: none; border: none; cursor: pointer; padding: 0; } @media (min-width: 900px) { .nav-toggle { display: none; } } .nav-toggle span { display: block; width: 24px; height: 2px; background: var(--text-primary); position: relative; transition: background 0.2s; } .nav-toggle span::before, .nav-toggle span::after { content: ''; position: absolute; left: 0; width: 24px; height: 2px; background: var(--text-primary); transition: transform 0.3s ease; } .nav-toggle span::before { top: -7px; } .nav-toggle span::after { top: 7px; } .nav-toggle[aria-expanded="true"] span { background: transparent; } .nav-toggle[aria-expanded="true"] span::before { top: 0; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] span::after { top: 0; transform: rotate(-45deg); } /* Mobile menu */ .mobile-menu { display: none; position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(255, 255, 255, 0.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); z-index: 999; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-lg); } .mobile-menu.open { display: flex; } .mobile-menu a { font-family: var(--font-display); font-size: var(--text-h3); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; color: var(--text-primary); padding: var(--space-xs) var(--space-sm); min-height: 48px; display: flex; align-items: center; } /* ============================================ BUTTONS ============================================ */ .btn-primary { display: inline-flex; align-items: center; justify-content: center; padding: 0.875rem 2rem; background: var(--coral); color: var(--text-inverse); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; border-radius: var(--radius-full); border: none; cursor: pointer; transition: background 0.2s ease, transform 0.15s ease, box-shadow 0.2s ease; min-height: 48px; min-width: 48px; text-decoration: none; white-space: nowrap; } .btn-primary:hover, .btn-primary:focus-visible { background: var(--coral-dark); transform: translateY(-1px); box-shadow: 0 4px 16px rgba(232, 115, 90, 0.3); } .btn-primary:active { transform: translateY(0); } .btn-primary:focus-visible { outline: 3px solid var(--coral-light); outline-offset: 2px; } .btn-secondary { display: inline-flex; align-items: center; justify-content: center; padding: 0.875rem 2rem; background: transparent; color: var(--sage-green-dark); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; border-radius: var(--radius-full); border: 2px solid var(--sage-green); cursor: pointer; transition: background 0.2s ease, color 0.2s ease, transform 0.15s ease; min-height: 48px; min-width: 48px; text-decoration: none; white-space: nowrap; } .btn-secondary:hover, .btn-secondary:focus-visible { background: var(--sage-green-dark); color: var(--text-inverse); transform: translateY(-1px); } .btn-secondary:focus-visible { outline: 3px solid var(--sage-green-light); outline-offset: 2px; } /* Text link CTA */ .text-cta { display: inline-flex; align-items: center; gap: var(--space-xs); font-weight: 700; font-size: var(--text-sm); color: var(--sage-green-dark); transition: gap 0.2s ease, color 0.2s ease; min-height: 48px; } .text-cta:hover, .text-cta:focus-visible { gap: var(--space-sm); color: var(--sage-green); } /* ============================================ SECTION 2: HERO ============================================ */ .hero { position: relative; min-height: 100vh; min-height: 100dvh; display: flex; align-items: flex-end; padding: var(--space-2xl) 0 var(--space-xl); overflow: hidden; background: var(--bg-primary); } /* Organic blob accent shape */ .hero-blob { position: absolute; top: -10%; right: -8%; width: clamp(250px, 45vw, 550px); height: clamp(250px, 45vw, 550px); border-radius: 40% 60% 55% 45% / 55% 40% 60% 45%; background: linear-gradient(135deg, rgba(107, 155, 125, 0.08), rgba(232, 115, 90, 0.05)); transform: rotate(-15deg); z-index: 0; } /* Diagonal coral accent line */ .hero-accent-line { position: absolute; bottom: 18%; left: 0; width: clamp(80px, 10vw, 140px); height: 4px; background: var(--coral); transform: rotate(-3deg); z-index: 0; } .hero-content { position: relative; z-index: 2; max-width: 900px; } .hero-label { display: flex; align-items: center; gap: var(--space-sm); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-secondary); margin-bottom: var(--space-md); } .hero-label .label-dash { width: 32px; height: 1px; background: var(--coral); flex-shrink: 0; } .hero h1 { font-family: var(--font-display); font-size: var(--text-hero); font-weight: 900; text-transform: uppercase; letter-spacing: -0.03em; line-height: 0.9; color: var(--text-primary); margin-bottom: var(--space-md); } .hero h1 .marker-highlight { color: var(--coral); } .hero-sub { font-size: var(--text-body-lg); font-weight: 400; color: var(--text-secondary); max-width: 540px; margin-bottom: var(--space-lg); line-height: 1.7; } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; } /* ============================================ SECTION 3: MARQUEE STRIP (dark charcoal) ============================================ */ .marquee-strip { background: var(--text-primary); overflow: hidden; padding: var(--space-lg) 0; position: relative; } .marquee-track { display: flex; width: max-content; animation: marquee-scroll 30s linear infinite; } .marquee-strip:hover .marquee-track, .marquee-strip:focus-within .marquee-track { animation-play-state: paused; } .marquee-item { font-family: var(--font-display); font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.85); white-space: nowrap; padding: 0 var(--space-lg); display: flex; align-items: center; gap: var(--space-lg); } /* Alternate coral on every 2nd item */ .marquee-item:nth-child(even) { color: var(--coral); } .marquee-item::after { content: ''; display: inline-block; width: 8px; height: 8px; background: rgba(255, 255, 255, 0.4); border-radius: 50%; flex-shrink: 0; } @keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Reduced motion: no animation, static display */ @media (prefers-reduced-motion: reduce) { .marquee-track { animation: none; flex-wrap: wrap; justify-content: center; width: auto; gap: var(--space-sm); } .marquee-item { padding: var(--space-xs) var(--space-sm); } } /* ============================================ SECTION 4: PROBLEM STATS (editorial layout) ============================================ */ .problem-stats { padding: var(--space-2xl) 0; background: var(--bg-primary); } .stats-editorial { display: flex; align-items: baseline; gap: var(--space-lg); margin-bottom: var(--space-lg); } .stat-hero { flex-shrink: 0; } .stat-hero-number { font-family: var(--font-display); font-size: clamp(4rem, 10vw, 7rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1; color: var(--text-primary); } .stat-hero-number .suffix { font-size: 0.4em; color: var(--coral); } .stat-hero-label { font-family: var(--font-body); font-size: var(--text-body); font-weight: 500; color: var(--text-secondary); line-height: 1.5; max-width: 280px; } .stat-hero-source { font-size: var(--text-sm); color: var(--text-secondary); opacity: 0.6; margin-top: var(--space-xs); } .stats-divider { height: 2px; background: var(--text-primary); margin-bottom: var(--space-lg); } .stats-row { display: flex; gap: clamp(var(--space-lg), 5vw, var(--space-2xl)); } .stat-supporting { display: flex; flex-direction: column; gap: 4px; } .stat-supporting-number { font-family: var(--font-display); font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 900; line-height: 1; letter-spacing: -0.02em; } .stat-supporting-number.coral { color: var(--coral); } .stat-supporting-number.green { color: var(--sage-green-dark); } .stat-supporting-number.dark { color: var(--text-primary); } .stat-supporting-label { font-size: var(--text-sm); color: var(--text-secondary); } @media (max-width: 767px) { .stats-editorial { flex-direction: column; gap: var(--space-sm); } .stats-row { flex-wrap: wrap; gap: var(--space-lg); } } /* ============================================ SECTION 5: WHAT WE DO (asymmetric pillars) ============================================ */ .what-we-do { padding: var(--space-2xl) 0; background: var(--bg-primary); } .section-header { margin-bottom: var(--space-xl); } .pillars-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); } @media (min-width: 768px) { .pillars-grid { grid-template-columns: 1.3fr 0.7fr; gap: var(--space-md); } } /* Featured pillar card (Workshops) */ .pillar-card-featured { background: var(--sage-green-dark); border-radius: var(--radius-lg); padding: var(--space-lg); color: var(--text-inverse); position: relative; overflow: hidden; } @media (min-width: 768px) { .pillar-card-featured { grid-row: span 2; padding: var(--space-xl); } } .pillar-number { font-family: var(--font-display); font-size: clamp(3.5rem, 7vw, 5rem); font-weight: 900; line-height: 1; letter-spacing: -0.04em; opacity: 0.15; margin-bottom: var(--space-sm); } .pillar-card-featured h3 { font-family: var(--font-display); font-size: var(--text-h3); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: var(--space-sm); } .pillar-card-featured p { font-size: var(--text-body); line-height: 1.7; opacity: 0.85; } .pillar-card-featured .pillar-link { color: var(--coral-light); } .pillar-card-featured .pillar-link:hover, .pillar-card-featured .pillar-link:focus-visible { color: var(--text-inverse); } /* Secondary pillar cards */ .pillar-card-secondary { background: var(--bg-secondary); border-radius: var(--radius-lg); padding: var(--space-lg); position: relative; } .pillar-card-secondary .pillar-number { font-size: clamp(2.5rem, 5vw, 3.5rem); color: var(--border); } .pillar-card-secondary h3 { font-family: var(--font-display); font-size: var(--text-h4); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: var(--space-xs); } .pillar-card-secondary p { font-size: var(--text-sm); color: var(--text-secondary); line-height: 1.7; } .pillar-link { display: inline-flex; align-items: center; gap: var(--space-xs); margin-top: var(--space-md); font-weight: 700; font-size: var(--text-sm); color: var(--coral); transition: gap 0.2s ease; min-height: 48px; } .pillar-link:hover, .pillar-link:focus-visible { gap: var(--space-sm); } /* ============================================ SECTION 6: WORKSHOP CTA (full-bleed split) ============================================ */ .workshop-cta { /* Full-bleed: no padding, edge-to-edge */ } .workshop-split { display: grid; grid-template-columns: 1fr; } @media (min-width: 768px) { .workshop-split { grid-template-columns: 1fr 1fr; } } .workshop-panel-left { background: var(--bg-sand); padding: var(--space-2xl) var(--space-lg); display: flex; flex-direction: column; justify-content: center; } @media (min-width: 768px) { .workshop-panel-left { padding: var(--space-2xl); } } .workshop-panel-left h2 { font-family: var(--font-display); font-size: var(--text-h1); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; color: var(--text-primary); line-height: 0.95; margin-bottom: var(--space-md); } .workshop-panel-left h2 .accent { color: var(--coral); } .workshop-panel-left p { font-size: var(--text-body-lg); color: var(--text-secondary); max-width: 420px; line-height: 1.7; } .workshop-panel-right { background: var(--bg-primary); padding: var(--space-2xl) var(--space-lg); display: flex; align-items: center; } @media (min-width: 768px) { .workshop-panel-right { padding: var(--space-2xl); } } .workshop-details { width: 100%; } .workshop-meta { display: flex; gap: var(--space-sm); align-items: flex-start; margin-bottom: var(--space-md); } .workshop-status { background: var(--coral); color: var(--text-inverse); border-radius: var(--radius-md); padding: var(--space-xs) var(--space-sm); font-family: var(--font-display); font-weight: 800; text-transform: uppercase; font-size: var(--text-sm); line-height: 1.2; letter-spacing: 0.03em; text-align: center; white-space: nowrap; } .workshop-info .location { font-size: var(--text-sm); font-weight: 600; color: var(--text-secondary); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: var(--space-xs); } .workshop-info h3 { font-family: var(--font-display); font-size: var(--text-h4); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; color: var(--text-primary); } .workshop-details > p { font-size: var(--text-sm); color: var(--text-secondary); margin-bottom: var(--space-md); line-height: 1.7; } /* ============================================ SECTION 7: SCAM ALERTS (charcoal + badges) ============================================ */ .scam-alert { padding: var(--space-2xl) 0; background: var(--text-primary); color: var(--text-inverse); position: relative; overflow: hidden; } /* Dot pattern texture */ .scam-alert::before { content: ''; position: absolute; inset: 0; opacity: 0.04; background-image: radial-gradient(circle, rgba(255, 255, 255, 0.8) 1px, transparent 1px); background-size: 20px 20px; pointer-events: none; } .scam-alert .section-label { color: rgba(255, 255, 255, 0.5); } .scam-alert .section-label .label-dash { background: var(--coral); } .scam-alert .section-title { color: var(--text-inverse); } .alert-badge { display: inline-block; background: var(--coral); color: var(--text-inverse); font-size: var(--text-sm); font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; padding: 4px 12px; border-radius: var(--radius-sm); margin-right: var(--space-sm); } .scam-header { display: flex; align-items: center; gap: var(--space-sm); margin-bottom: var(--space-xs); } .scam-header-label { font-size: var(--text-sm); font-weight: 600; color: rgba(255, 255, 255, 0.5); text-transform: uppercase; letter-spacing: 0.15em; } .scam-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); margin-top: var(--space-xl); position: relative; z-index: 1; } @media (min-width: 768px) { .scam-grid { grid-template-columns: repeat(3, 1fr); } } .scam-card { border: 1px solid rgba(255, 255, 255, 0.12); border-left: 3px solid var(--coral); border-radius: var(--radius-lg); padding: var(--space-lg); transition: background 0.2s ease; } .scam-card:hover { background: rgba(255, 255, 255, 0.05); } .scam-card h3 { font-family: var(--font-display); font-size: var(--text-h4); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; margin-bottom: var(--space-xs); } .scam-card p { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.6); line-height: 1.7; } .scam-card .pillar-link { color: var(--coral-light); } .scam-card .pillar-link:hover, .scam-card .pillar-link:focus-visible { color: var(--text-inverse); } /* ============================================ SECTION 8: FOUNDER STORY ============================================ */ .founder-story { padding: var(--space-2xl) 0; background: var(--bg-secondary); } .founder-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); align-items: center; } @media (min-width: 900px) { .founder-grid { grid-template-columns: 0.35fr 0.65fr; gap: var(--space-2xl); } } /* Photo frame: rounded rect with coral accent */ .founder-photo-wrap { position: relative; width: 100%; max-width: 360px; } @media (max-width: 899px) { .founder-photo-wrap { max-width: 280px; margin-inline: auto; } } .founder-photo-wrap img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; object-position: center top; border-radius: var(--radius-lg); display: block; position: relative; z-index: 1; } /* Coral accent block behind bottom-right */ .founder-photo-wrap::after { content: ''; position: absolute; bottom: -8px; right: -8px; width: 40%; height: 30%; background: var(--coral); border-radius: var(--radius-lg); z-index: 0; } .founder-credit { text-align: center; margin-top: var(--space-md); position: relative; z-index: 1; } .founder-credit .name { font-weight: 700; font-size: var(--text-body); color: var(--text-primary); } .founder-credit .role { font-weight: 600; font-size: var(--text-sm); color: var(--coral); } .founder-narrative blockquote { font-family: var(--font-display); font-size: var(--text-h3); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; color: var(--text-primary); line-height: 1.2; margin-bottom: var(--space-lg); padding-left: var(--space-md); border-left: 3px solid var(--coral); } .founder-narrative .bio { font-size: var(--text-body); color: var(--text-secondary); line-height: 1.7; } .founder-narrative .bio p { margin-bottom: var(--space-sm); } .founder-narrative .bio .highlight { font-weight: 600; color: var(--text-primary); } .founder-actions { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; margin-top: var(--space-lg); } /* ============================================ SECTION 9: DONATE (full-bleed split) ============================================ */ .donate-section { /* Full-bleed: no padding */ } .donate-split { display: grid; grid-template-columns: 1fr; } @media (min-width: 768px) { .donate-split { grid-template-columns: 1fr 1fr; } } .donate-panel-left { background: var(--text-primary); color: var(--text-inverse); padding: var(--space-2xl) var(--space-lg); display: flex; flex-direction: column; justify-content: center; } @media (min-width: 768px) { .donate-panel-left { padding: var(--space-2xl); } } .donate-panel-left h2 { font-family: var(--font-display); font-size: var(--text-h1); font-weight: 900; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.95; margin-bottom: var(--space-md); } .donate-panel-left h2 .accent { color: var(--coral); } .donate-panel-left p { font-size: var(--text-body); color: rgba(255, 255, 255, 0.6); line-height: 1.7; max-width: 420px; } .donate-panel-right { background: var(--bg-secondary); padding: var(--space-2xl) var(--space-lg); display: flex; flex-direction: column; justify-content: center; align-items: flex-start; } @media (min-width: 768px) { .donate-panel-right { padding: var(--space-2xl); } } .donate-label { font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.15em; color: var(--text-secondary); margin-bottom: var(--space-lg); } .donate-ctas { display: flex; flex-direction: column; gap: var(--space-sm); width: 100%; max-width: 320px; } .donate-note { margin-top: var(--space-md); font-size: var(--text-sm); color: var(--text-secondary); } /* ============================================ SECTION 10: FOOTER ============================================ */ .site-footer { background: var(--text-primary); color: rgba(255, 255, 255, 0.7); padding: var(--space-xl) 0 var(--space-lg); } .footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); margin-bottom: var(--space-xl); } @media (min-width: 768px) { .footer-grid { grid-template-columns: 1.5fr 1fr 1fr; gap: var(--space-lg); } } .footer-brand .nav-logo { color: var(--text-inverse); margin-bottom: var(--space-sm); } .footer-brand p { font-size: var(--text-sm); line-height: 1.7; max-width: 320px; color: rgba(255, 255, 255, 0.5); } .footer-col h4 { font-family: var(--font-display); font-size: var(--text-h4); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; color: var(--text-inverse); margin-bottom: var(--space-sm); } .footer-col ul { display: flex; flex-direction: column; gap: var(--space-xs); } .footer-col a { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.5); transition: color 0.2s ease; display: flex; align-items: center; padding: 4px 0; min-height: 48px; } .footer-col a:hover, .footer-col a:focus-visible { color: var(--text-inverse); } .footer-bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-sm); align-items: center; text-align: center; } @media (min-width: 768px) { .footer-bottom { flex-direction: row; justify-content: space-between; text-align: left; } } .footer-bottom p { font-size: var(--text-sm); color: rgba(255, 255, 255, 0.3); } .footer-social { display: flex; gap: var(--space-xs); } .footer-social a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: var(--radius-full); background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.6); transition: background 0.2s ease, color 0.2s ease; } .footer-social a:hover, .footer-social a:focus-visible { background: var(--coral); color: var(--text-inverse); } .footer-social svg { width: 18px; height: 18px; fill: currentColor; } /* ============================================ ANIMATION: FADE-IN ON SCROLL ============================================ */ .fade-in { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .fade-in.visible { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .fade-in { opacity: 1; transform: none; transition: none; } } /* ============================================ FOCUS STYLES (GLOBAL) ============================================ */ :focus-visible { outline: 3px solid var(--sage-green); outline-offset: 2px; } /* ============================================ SUBPAGE: PAGE HERO ============================================ */ .page-hero { padding: calc(var(--space-2xl) + 80px) 0 var(--space-2xl); background: var(--bg-secondary); } .page-hero-title { font-family: var(--font-display); font-size: var(--text-h1); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1.05; color: var(--text-primary); margin-top: var(--space-sm); } .page-hero-sub { font-size: var(--text-body-lg); color: var(--text-secondary); max-width: 640px; margin-top: var(--space-md); line-height: 1.7; } /* ============================================ SUBPAGE: CONTENT SECTIONS ============================================ */ .content-section { padding: var(--space-2xl) 0; } .content-section.bg-cream { background: var(--bg-secondary); } .content-prose { font-size: var(--text-body); line-height: 1.8; } .content-prose p { margin-bottom: var(--space-md); } .content-prose h2 { font-family: var(--font-display); font-size: var(--text-h3); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; color: var(--text-primary); margin-top: var(--space-xl); margin-bottom: var(--space-sm); } .content-prose h2:first-child { margin-top: 0; } .legal-prose h2 { font-size: var(--text-h4); margin-top: var(--space-lg); } /* Two-column layout */ .content-two-col { display: grid; grid-template-columns: 1fr; gap: var(--space-xl); } @media (min-width: 768px) { .content-two-col { grid-template-columns: 1fr 1fr; gap: var(--space-2xl); } } /* Three-column grid */ .content-grid-3 { display: grid; grid-template-columns: 1fr; gap: var(--space-lg); margin-top: var(--space-lg); } @media (min-width: 768px) { .content-grid-3 { grid-template-columns: repeat(3, 1fr); } } /* Info cards */ .info-card { padding: var(--space-lg); background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius-md); } .info-card h3 { font-family: var(--font-display); font-size: var(--text-h4); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: var(--space-sm); } .info-card p { color: var(--text-secondary); line-height: 1.7; } /* ============================================ SUBPAGE: WORKSHOP CARDS (full-width) ============================================ */ .workshop-list { display: flex; flex-direction: column; gap: var(--space-lg); margin-top: var(--space-lg); } .workshop-card-full { background: var(--bg-primary); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; } .workshop-card-status { background: var(--sage-green); color: var(--text-inverse); padding: var(--space-xs) var(--space-md); font-family: var(--font-display); font-size: var(--text-sm); font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; } .workshop-card-body { padding: var(--space-lg); } .workshop-card-body h3 { font-family: var(--font-display); font-size: var(--text-h3); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: var(--space-xs); } .workshop-card-meta { font-size: var(--text-sm); color: var(--text-secondary); font-weight: 600; margin-bottom: var(--space-md); } .workshop-card-body p { color: var(--text-secondary); line-height: 1.7; margin-bottom: var(--space-md); } /* ============================================ SUBPAGE: FAQ ============================================ */ .faq-list { margin-top: var(--space-lg); display: flex; flex-direction: column; gap: var(--space-md); } .faq-item { padding: var(--space-lg); background: var(--bg-secondary); border-radius: var(--radius-md); } .faq-item h3 { font-family: var(--font-display); font-size: var(--text-h4); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: var(--space-xs); } .faq-item p { color: var(--text-secondary); line-height: 1.7; } /* ============================================ SUBPAGE: RESOURCE CARDS ============================================ */ .resource-list { display: flex; flex-direction: column; gap: var(--space-lg); margin-top: var(--space-lg); } .resource-card { padding: var(--space-lg); background: var(--bg-secondary); border-radius: var(--radius-lg); border-left: 4px solid var(--sage-green); } .resource-card .alert-badge { display: inline-block; margin-bottom: var(--space-sm); } .resource-card h3 { font-family: var(--font-display); font-size: var(--text-h3); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: var(--space-sm); } .resource-card h4 { font-family: var(--font-display); font-size: var(--text-h4); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; color: var(--sage-green-dark); margin-top: var(--space-md); margin-bottom: var(--space-xs); } .resource-card p { color: var(--text-secondary); line-height: 1.7; } /* ============================================ SUBPAGE: CHECKLIST ============================================ */ .checklist-block { margin: var(--space-lg) 0; display: flex; flex-direction: column; gap: var(--space-md); } .checklist-item { display: flex; gap: var(--space-md); align-items: flex-start; } .checklist-number { display: flex; align-items: center; justify-content: center; width: 48px; height: 48px; min-width: 48px; background: var(--coral); color: var(--text-inverse); font-family: var(--font-display); font-size: var(--text-h3); font-weight: 800; border-radius: var(--radius-full); } .checklist-item strong { display: block; font-family: var(--font-display); font-size: var(--text-h4); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: var(--space-xs); } .checklist-item p { margin-bottom: 0; } /* ============================================ SUBPAGE: FORMS ============================================ */ .form-label { display: block; font-family: var(--font-body); font-size: var(--text-sm); font-weight: 700; color: var(--text-primary); margin-bottom: var(--space-xs); } .form-input { width: 100%; padding: 0.875rem var(--space-sm); font-family: var(--font-body); font-size: var(--text-body); color: var(--text-primary); background: var(--bg-primary); border: 2px solid var(--border); border-radius: var(--radius-md); transition: border-color 0.2s ease; min-height: 48px; } .form-input:focus { outline: none; border-color: var(--sage-green); box-shadow: 0 0 0 3px rgba(107, 155, 125, 0.2); } .form-textarea { resize: vertical; min-height: 120px; } .form-group { margin-bottom: var(--space-md); } .form-row { display: flex; gap: var(--space-sm); } .form-row .form-input { flex: 1; } @media (max-width: 480px) { .form-row { flex-direction: column; } } .form-note { font-size: var(--text-sm); color: var(--text-secondary); margin-top: var(--space-sm); } .form-note a { color: var(--sage-green-dark); text-decoration: underline; } .newsletter-form { padding: var(--space-lg); background: var(--bg-secondary); border-radius: var(--radius-lg); } .contact-form { margin-top: var(--space-lg); } .contact-form .btn-primary { margin-top: var(--space-sm); } select.form-input { appearance: auto; cursor: pointer; } /* ============================================ SUBPAGE: CONTACT INFO BLOCKS ============================================ */ .contact-info-block { margin-bottom: var(--space-lg); } .contact-info-block h3 { font-family: var(--font-display); font-size: var(--text-h4); font-weight: 700; text-transform: uppercase; letter-spacing: -0.02em; color: var(--text-primary); margin-bottom: var(--space-xs); } .contact-info-block p { color: var(--text-secondary); line-height: 1.7; } /* ============================================ PRINT STYLES ============================================ */ @media print { .site-nav, .marquee-strip, .mobile-menu { display: none; } body { font-size: 12pt; color: var(--text-primary); background: var(--bg-primary); } } /* ============================================ REGISTRATION MODAL ============================================ */ .register-modal { border: none; border-radius: var(--radius-lg); padding: 0; max-width: 480px; width: 90%; background: var(--bg-primary); box-shadow: 0 20px 60px rgba(0,0,0,0.3); } .register-modal::backdrop { background: rgba(61, 53, 48, 0.6); backdrop-filter: blur(4px); } .register-modal-content { padding: var(--space-lg); position: relative; } .register-modal-close { position: absolute; top: var(--space-sm); right: var(--space-sm); background: none; border: none; font-size: 1.5rem; cursor: pointer; color: var(--text-secondary); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-full); transition: background 0.2s ease; } .register-modal-close:hover { background: var(--bg-secondary); color: var(--text-primary); }