/* Google Fonts — Inter is loaded via tag in each HTML for better performance */ /* ========================================================================== 1. CORE GLOBAL VARIABLES & DESIGN SYSTEM UTILITIES (CONSOLIDATED) ========================================================================== */ :root { --bg-cream: #1e1d1a; --accent-matcha: #94b49f; --accent-matcha-dark: #b8cfbf; --text-charcoal: #fbf9f1; --card-bg-white: #121110; --y2k-border: 2px solid rgba(251, 249, 241, 0.22); --font-heading: 'Inter', 'Segoe UI', system-ui, sans-serif; --font-body: 'Segoe UI', -apple-system, BlinkMacSystemFont, Roboto, sans-serif; } /* Global Reset & Strict Box Containment Engine */ *, *:before, *:after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; width: 100%; max-width: 100%; overflow-x: hidden; } body { background-color: var(--bg-cream); color: var(--text-charcoal); font-family: var(--font-body); width: 100%; max-width: 100%; overflow-x: hidden; padding-top: 95px; } ::selection { background-color: var(--accent-matcha); color: #121110; } /* ⚡ Universal Green Offset Pop Hover Effect */ .polaroid-card, .scatter-photo, .main-narrative-card, .journal-story-card, .gallery-photo-card, .pillar-card, .team-card, .contact-card, .donor-card, .newsletter-card, .doodle-speech-bubble { transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), border-color 0.3s ease, box-shadow 0.3s ease !important; } .polaroid-card:hover, .scatter-photo:hover, .main-narrative-card:hover, .journal-story-card:hover, .gallery-photo-card:hover, .pillar-card:hover, .team-card:hover, .contact-card:hover, .donor-card:hover, .newsletter-card:hover, .doodle-speech-bubble:hover { border-color: var(--accent-matcha) !important; box-shadow: 6px 6px 0px var(--accent-matcha) !important; transform: translateY(-4px) translateX(-2px) !important; } /* ========================================================================== 2. FIXED-TOP NAVIGATION CONTAINER (PC RESTORED & MOBILE SECURED) ========================================================================== */ .navbar { display: flex; justify-content: space-between; align-items: center; padding: 15px 5%; background-color: var(--bg-cream); border-bottom: var(--y2k-border); position: fixed; top: 0; width: 100%; z-index: 1050; box-sizing: border-box; } .nav-logo-block { text-decoration: none !important; display: flex; align-items: center; gap: 8px !important; } /* DESKTOP: Base Navigation Links Container */ .nav-links { display: flex; align-items: center; gap: 25px; margin-left: auto; order: 2; } /* DESKTOP: Button Container (Pinned to the Extreme Right Edge) */ .nav-right-actions-wrapper { display: flex; align-items: center; margin-left: 40px; flex-shrink: 0; order: 3; } .nav-links a { color: var(--text-charcoal) !important; text-decoration: none; font-size: 14px; font-weight: 700; transition: all 0.2s ease; } .nav-links a:hover { color: var(--accent-matcha) !important; } .desktop-fuel-btn { display: inline-flex; } .mobile-fuel-btn { display: none; } /* Global Navigation Fuel Button Anchor Styling */ .btn-nav-fuel { background-color: var(--accent-matcha); border: var(--y2k-border); color: #ffffff !important; padding: 8px 16px; border-radius: 12px; font-family: var(--font-heading); font-weight: 700 !important; letter-spacing: 0.2px; text-decoration: none; transition: all 0.2s ease; white-space: nowrap; } .btn-nav-fuel:hover { background-color: var(--accent-matcha-dark); transform: translateY(-2px); } /* DESKTOP DEFAULTS: Hide hamburger and treat wrapper as normal inline item */ .menu-toggle { display: none; cursor: pointer; padding: 5px; } .bar { display: block; width: 25px; height: 3px; margin: 5px auto; background-color: var(--text-charcoal); } /* Logo Image Container Matrix */ .logo-box-image-wrapper { width: 52px; height: 52px; border: var(--y2k-border); border-radius: 50%; overflow: hidden; background-color: #d2d7c4 !important; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .logo-box-image-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; } .nav-logo-block .logo-text { display: flex; flex-direction: column; max-width: 500px; } .logo-text strong { font-family: var(--font-heading); font-size: 14px; font-weight: 900; letter-spacing: 0.5px; line-height: 1.1; color: var(--text-charcoal); } .logo-text span { font-size: 13px; font-weight: 600; color: #a3a19c; line-height: 1.2; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ========================================================================== 3. MAIN STAGE HERO REGION ========================================================================== */ .hero-container { max-width: 1200px; margin: 40px auto; padding: 0 5%; display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 50px; align-items: center; min-height: 75vh; } .hero-content { position: relative; } .main-headline { font-family: var(--font-heading); font-size: 50px; font-weight: 900; line-height: 1.05; letter-spacing: -1px; margin-bottom: 20px; } .highlight-text { color: var(--accent-matcha-dark); } .hero-subtext { font-size: 16px; line-height: 1.5; color: #d1cfc7; max-width: 460px; margin-bottom: 30px; } .btn-explore { display: inline-flex; align-items: center; gap: 10px; background-color: var(--card-bg-white); color: var(--text-charcoal); text-decoration: none; font-weight: 700; border: var(--y2k-border); padding: 14px 28px; border-radius: 14px; transition: all 0.2s ease; cursor: pointer; } .btn-explore:hover { background-color: var(--accent-matcha); color: #121110; transform: translateY(-2px); } /* ========================================================================== 4. ASYMMETRIC FLOATING HERO POLAROIDS ========================================================================== */ .hero-gallery-cluster { position: relative; height: 480px; width: 100%; } .doodle-speech-bubble { position: absolute; top: -20px; right: 20px; background-color: #121110 !important; border: 2px solid rgba(251, 249, 241, 0.3) !important; color: #fbf9f1 !important; padding: 10px 20px; border-radius: 20px; font-weight: 700; font-size: 13px; transform: rotate(3deg); z-index: 10; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.6); } .polaroid-card { position: absolute; background-color: #121110 !important; color: #fbf9f1 !important; border: 2px solid rgba(251, 249, 241, 0.25) !important; padding: 12px 12px 20px 12px; border-radius: 16px; width: 210px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), z-index 0.2s ease, box-shadow 0.3s ease; } .polaroid-card:hover { transform: scale(1.04) rotate(0deg) !important; box-shadow: 0 18px 40px rgba(0, 0, 0, 0.7); z-index: 15; } .photo-frame { width: 100%; aspect-ratio: 1 / 1; overflow: hidden; border: 1px solid rgba(251, 249, 241, 0.15) !important; border-radius: 10px; margin-bottom: 12px; background-color: #181715 !important; display: flex; align-items: center; justify-content: center; position: relative; } .photo-frame img { width: 100%; height: 100%; object-fit: cover; } .placeholder-glyph { font-size: 32px; color: var(--accent-matcha-dark); position: absolute; z-index: 1; } .polaroid-card .caption { font-family: var(--font-heading); font-weight: 700; font-size: 13px; text-align: center; color: #fbf9f1 !important; } .tape-element { position: absolute; width: 75px; height: 25px; background-color: rgba(148, 180, 159, 0.4); z-index: 5; } .card-top { top: 40px; left: 40px; transform: rotate(-6deg); } .tape-top { top: -12px; left: 60px; transform: rotate(15deg); } .card-bottom-left { bottom: 20px; left: -10px; transform: rotate(4deg); } .tape-left { top: -10px; left: -10px; transform: rotate(-35deg); } .card-bottom-right { bottom: 40px; right: 10px; transform: rotate(-3deg); width: 230px; } .tape-right { top: -14px; right: 40px; transform: rotate(25deg); } .doodle-icon { position: absolute; color: var(--accent-matcha-dark); font-size: 24px; pointer-events: none; } /* Floating Doodle Animations */ @keyframes floatDoodle { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(-10px) rotate(6deg); } } @keyframes floatDoodleReverse { 0%, 100% { transform: translateY(0px) rotate(0deg); } 50% { transform: translateY(8px) rotate(-6deg); } } .img-heart { top: -15px; left: 250px; transform: rotate(15deg); animation: floatDoodle 3.5s ease-in-out infinite; } .img-lightning { bottom: 80px; left: 320px; transform: rotate(-10deg); animation: floatDoodleReverse 4.2s ease-in-out infinite; } .img-sparkle-right { bottom: 15px; right: -5px; font-size: 18px; animation: floatDoodle 3.8s ease-in-out infinite 0.5s; } /* ========================================================================== FAILSHEET CORES: HIDE FALLBACK GLYPHS WHEN IMAGES LOAD ========================================================================== */ .photo-frame img+i, .scrapbook-frame img+i, .gallery-image-frame img+i, .placeholder-glyph, .fallback-scatter-icon, .gallery-fallback-icon { display: none !important; } /* ========================================================================== 5. GENERAL SECTION FRAME UTILITIES ========================================================================== */ .full-viewport-section { max-width: 1200px; margin: 0 auto; padding: 60px 5%; min-height: 85vh; display: flex; align-items: center; scroll-margin-top: 100px; } .single-focus-box { background-color: var(--card-bg-white); border: var(--y2k-border); border-radius: 24px; width: 100%; overflow: hidden; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6); } .box-content-split { display: grid; grid-template-columns: 1.1fr 0.9fr; min-height: 500px; } .text-side { padding: 50px; display: flex; flex-direction: column; justify-content: center; } .image-side { padding: 50px; background-color: #1c2420; display: flex; align-items: center; justify-content: center; position: relative; } .section-display-title { font-family: var(--font-heading); font-size: 36px; font-weight: 900; margin-bottom: 20px; line-height: 1.1; letter-spacing: -0.5px; } .card-badge-header { display: inline-block; background-color: var(--accent-matcha); border: var(--y2k-border); color: #121110; padding: 4px 12px; font-size: 11px; font-weight: 800; border-radius: 6px; margin-bottom: 20px; align-self: flex-start; } .section-paragraph { font-size: 16px; line-height: 1.7; color: #d1cfc7; } /* ========================================================================== 5A. THREE-COLUMN COLLAGE GRID (ABOUT SECTION) ========================================================================== */ .clean-collage-viewport { max-width: 1400px; margin: 0 auto; padding: 100px 2%; min-height: 90vh; display: flex; align-items: center; justify-content: center; scroll-margin-top: 100px; } .master-collage-grid { display: grid; grid-template-columns: 260px 1fr 260px; gap: 30px; width: 100%; align-items: center; } .main-narrative-card { background-color: var(--card-bg-white) !important; border: var(--y2k-border) !important; border-radius: 24px; padding: 60px 45px; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.6) !important; text-align: center; display: flex; flex-direction: column; align-items: center; z-index: 10; } .main-narrative-card .card-badge-header { margin-bottom: 20px; } .main-narrative-card .section-display-title { font-size: 38px; font-weight: 900; margin-bottom: 20px; line-height: 1.2; } .main-narrative-card .section-paragraph { font-size: 15px; line-height: 1.7; color: #d1cfc7 !important; } .collage-flank { display: flex; flex-direction: column; gap: 50px; align-items: center; width: 100%; } .scatter-photo { background-color: var(--card-bg-white) !important; border: var(--y2k-border) !important; padding: 10px 10px 24px 10px; border-radius: 4px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important; width: 240px; position: relative; transition: transform 0.3s ease; } .scatter-photo:hover { transform: scale(1.05) rotate(0deg) !important; box-shadow: 6px 6px 0px var(--accent-matcha); } .scrapbook-frame { width: 100%; aspect-ratio: 4 / 3; border: 1px solid rgba(251, 249, 241, 0.18); background-color: #2b2a27; overflow: hidden; display: flex; align-items: center; justify-content: center; } .scrapbook-frame img { width: 100%; height: 100%; object-fit: cover; } .fallback-scatter-icon { font-size: 36px; color: var(--accent-matcha-dark); } .scrapbook-caption { display: block; font-family: var(--font-heading); font-size: 12px; font-weight: 800; text-align: center; margin-top: 8px; color: var(--text-charcoal); } .pic-1 { transform: rotate(-6deg); } .tape-1 { top: -10px; left: 40px; transform: rotate(15deg); } .pic-2 { transform: rotate(4deg); } .tape-2 { top: -10px; right: 40px; transform: rotate(-10deg); } .pic-3 { transform: rotate(5deg); } .tape-3 { top: -10px; left: 50px; transform: rotate(-15deg); } .pic-4 { transform: rotate(-4deg); } .tape-4 { top: -10px; right: 50px; transform: rotate(20deg); } /* ========================================================================== 5B. OUR WORK CORE PILLARS & METRICS REGION STYLES ========================================================================== */ .pillar-card { background-color: var(--card-bg-white) !important; border: var(--y2k-border) !important; box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5) !important; } .compact-pillar-row { display: flex; gap: 15px; margin-bottom: 20px; align-items: start; } .compact-pillar-row:last-of-type { margin-bottom: 0; } .mini-icon-box { width: 40px; height: 40px; background-color: #1e1d1a; border: var(--y2k-border); border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 16px; flex-shrink: 0; } .pillar-row-text h3 { font-family: var(--font-heading); font-size: 16px; font-weight: 800; margin-bottom: 4px; color: var(--text-charcoal); } .pillar-row-text p { font-size: 13px; line-height: 1.4; color: #d1cfc7 !important; } .dark-badge { background-color: #181715 !important; color: #fbf9f1 !important; border: 2px solid rgba(251, 249, 241, 0.25) !important; } .border-right-split { border-right: var(--y2k-border); } .matcha-bg-variant { background-color: #1a241e !important; } .metrics-side-panel { background-color: var(--accent-matcha); padding: 50px; display: flex; align-items: center; justify-content: center; position: relative; } .embedded-metrics-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 25px; width: 100%; } .metric-block-item { background-color: var(--card-bg-white) !important; border: var(--y2k-border) !important; border-radius: 14px; padding: 20px 15px; text-align: center; color: var(--text-charcoal) !important; } .metric-block-item h3 { font-family: var(--font-heading); font-size: 32px; font-weight: 900; line-height: 1; margin-bottom: 4px; } .metric-block-item p { font-size: 12px; font-weight: 700; color: var(--accent-matcha-dark) !important; } .smiley-badge-absolute { width: 45px; height: 45px; background-color: var(--card-bg-white); border: var(--y2k-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; position: absolute; right: 20px; top: 20px; transform: rotate(12deg); color: var(--text-charcoal); } /* ========================================================================== 5C. HORIZONTAL TEXT JOURNAL CAROUSEL ENGINE (STORIES SECTION) ========================================================================== */ .stories-carousel-container { width: 100%; display: flex; flex-direction: column; } .carousel-header-block { text-align: center; margin-bottom: 45px; } .carousel-header-block .card-badge-header { align-self: center; margin-bottom: 15px; } .carousel-header-block .section-paragraph { max-width: 600px; margin: 0 auto; } .stories-slider-viewport { width: 100%; overflow-x: auto; padding: 20px 20px 30px 20px; scrollbar-width: none; } .stories-slider-viewport::-webkit-scrollbar { display: none; } .stories-slider-track { display: flex; gap: 30px; width: max-content; padding-right: 30px; } .journal-story-card { background-color: var(--card-bg-white) !important; border: var(--y2k-border) !important; border-radius: 20px; width: 340px; padding: 30px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important; display: flex; flex-direction: column; min-height: 320px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .journal-story-card:hover { transform: translateY(-4px); box-shadow: 6px 6px 0px var(--accent-matcha); } .journal-card-meta { display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px; } .journal-date { font-size: 12px; font-weight: 700; color: #a3a19c; } .journal-tag { font-size: 11px; font-weight: 800; background-color: #1e1d1a; border: 1px solid rgba(251, 249, 241, 0.25); padding: 2px 8px; border-radius: 6px; color: var(--text-charcoal); } .journal-story-card h3 { font-family: var(--font-heading); font-size: 20px; font-weight: 900; line-height: 1.2; margin-bottom: 12px; color: var(--text-charcoal); } .journal-excerpt { font-size: 14px; line-height: 1.6; color: #d1cfc7 !important; margin-bottom: 20px; } .journal-card-footer { margin-top: auto; font-size: 12px; font-weight: 800; color: var(--accent-matcha); font-family: var(--font-heading); } .template-card-variant { background-color: transparent !important; box-shadow: none !important; border: none !important; padding: 0; } .inner-dashed-box-msg { width: 100%; height: 100%; border: var(--y2k-border); border-style: dashed; border-radius: 20px; padding: 30px; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; color: var(--accent-matcha-dark); } .inner-dashed-box-msg h3 { font-size: 18px; margin-top: 8px; color: var(--text-charcoal); } .inner-dashed-box-msg p { font-size: 13px; line-height: 1.4; margin-top: 6px; color: #d1cfc7; } /* ========================================================================== 5D. AUTOMATIC + MANUAL MOTION IMAGE REEL CAROUSEL (GALLERY SECTION) ========================================================================== */ .gallery-carousel-container { width: 100%; display: flex; flex-direction: column; } .gallery-slider-viewport { width: 100%; overflow-x: auto; padding: 10px 20px 25px 20px; scrollbar-width: none; } .gallery-slider-viewport::-webkit-scrollbar { display: none; } .gallery-photo-card { background-color: var(--card-bg-white) !important; border: var(--y2k-border) !important; border-radius: 20px; padding: 16px; width: 330px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.5) !important; display: flex; flex-direction: column; gap: 14px; flex-shrink: 0; transition: transform 0.2s ease; } .gallery-photo-card:hover { transform: translateY(-4px); box-shadow: 4px 4px 0px var(--accent-matcha) !important; } .gallery-image-frame { width: 100%; aspect-ratio: 4 / 3; border: 1px solid rgba(251, 249, 241, 0.18); border-radius: 12px; overflow: hidden; background-color: #2b2a27; display: flex; align-items: center; justify-content: center; position: relative; } .gallery-image-frame img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.45s cubic-bezier(0.16, 1, 0.3, 1); } @media (hover: hover) { .gallery-photo-card:hover .gallery-image-frame img { transform: scale(1.08); } } .gallery-fallback-icon { font-size: 36px; color: var(--accent-matcha-dark); position: absolute; } .gallery-photo-meta { font-family: var(--font-heading); font-size: 14px; font-weight: 800; text-align: center; color: var(--text-charcoal); } .carousel-control-ribbon { display: flex; justify-content: center; align-items: center; gap: 20px; margin-top: 25px; } .slider-arrow-btn { width: 44px; height: 44px; background-color: var(--card-bg-white); border: var(--y2k-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; color: var(--text-charcoal); cursor: pointer; box-shadow: 2px 2px 0px var(--text-charcoal); transition: all 0.15s ease; } .slider-arrow-btn:hover { background-color: var(--accent-matcha); color: #121110; transform: translateY(-1px); box-shadow: 3px 3px 0px var(--text-charcoal); } .slider-arrow-btn:active { transform: translateY(1px); box-shadow: 1px 1px 0px var(--text-charcoal); } .carousel-indicator-bar { width: 60px; height: 4px; background-color: #2b2a27; border-radius: 2px; position: relative; overflow: hidden; } .indicator-active-pill { width: 25px; height: 100%; background-color: var(--accent-matcha); border-radius: 2px; position: absolute; left: 0; transition: left 0.4s ease; } .gallery-indicator-pill { width: 25px; height: 100%; background-color: var(--accent-matcha); border-radius: 2px; position: absolute; left: 0; transition: left 0.4s ease; } /* ========================================================================== 6. UPGRADED WIDESCREEN BRAND MIRROR FOOTER FRAME (EXACT GITHUB ORIGIN/MAIN) ========================================================================== */ .widescreen-brand-footer-container { max-width: 1400px; margin: 80px auto 0 auto; padding: 0 5%; display: flex; flex-direction: column; } .footer-navbar-mirror { display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 55px 40px; background-color: var(--bg-cream); border-top: var(--y2k-border); border-bottom: var(--y2k-border); width: 100%; gap: 30px; } .footer-logo-major-flank { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 20px; } .giant-footer-logo-box { width: 110px; height: 110px; border: 2px solid var(--accent-matcha); border-radius: 50%; overflow: hidden; background-color: #d7dccb !important; display: flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 0 25px rgba(148, 180, 159, 0.25); transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.3s ease; } .giant-footer-logo-box:hover { transform: scale(1.08) rotate(4deg); box-shadow: 0 0 35px rgba(148, 180, 159, 0.45); } .giant-footer-logo-box img { width: 110px; height: 110px; object-fit: contain; } .footer-major-identity-titles { display: flex; flex-direction: column; align-items: center; text-align: center; max-width: 800px; } .footer-major-identity-titles h2, .footer-brand-name { font-family: var(--font-heading); font-size: 28px; font-weight: 900; color: var(--text-charcoal); line-height: 1; margin-bottom: 6px; } .footer-major-identity-titles p, .footer-brand-tagline { font-size: 12px; font-weight: 600; color: #a3a19c; line-height: 1.4; } .footer-links-major-flank { display: flex; flex-direction: row; justify-content: center; align-items: center; gap: 16px; width: auto; } .widescreen-social-tab { display: inline-flex; align-items: center; justify-content: center; gap: 12px; background-color: var(--card-bg-white); color: var(--text-charcoal); text-decoration: none; font-family: var(--font-heading); font-weight: 700; font-size: 14px; width: 260px; height: 52px; border: var(--y2k-border); border-radius: 16px; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s ease, border-color 0.3s ease; cursor: pointer; } .widescreen-social-tab:hover { border-color: var(--accent-matcha) !important; box-shadow: 5px 5px 0px var(--accent-matcha) !important; transform: translateY(-3px) translateX(-2px) !important; } .widescreen-social-tab i { font-size: 18px; } .tab-ig i { color: #e1306c; } .tab-email i { color: var(--accent-matcha); } /* ========================================================================== 6B. FOOTER BIO ROW REGION STYLES ========================================================================== */ .footer-bio-row { padding: 30px 40px 10px 40px; width: 100%; max-width: 1400px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; box-sizing: border-box; margin: 0 auto; } .footer-bio-row p.bio-text { font-size: 13px; line-height: 1.6; color: #D4D4D4; margin: 0 auto; max-width: 750px; } .footer-bio-row p.org-name { font-size: 11px; font-weight: 700; color: var(--accent-matcha); text-transform: uppercase; letter-spacing: 0.5px; margin: 0; } .footer-bio-row span.motto { font-size: 13px; font-weight: 700; color: var(--text-charcoal); font-style: italic; display: block; } .footer-sub-bar { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1400px; padding: 20px 40px; box-sizing: border-box; font-size: 13px; color: #a3a19c; margin: 0 auto; } .footer-legal-links { display: flex; gap: 20px; } .footer-legal-links a { color: #a3a19c; text-decoration: none; font-size: 13px; } .footer-legal-links a:hover { color: var(--accent-matcha); } /* ========================================================================== 7. BACK-END DESIGN FORM SYSTEM & CORE TRANSACTION INTERFACES (FUELUS ROUTE) ========================================================================== */ .terminal-layout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 40px; max-width: 1200px; margin: 40px auto; padding: 0 5%; align-items: stretch; } .terminal-card { background-color: var(--card-bg-white); border: var(--y2k-border); border-radius: 20px; padding: 35px; box-shadow: 4px 4px 0px var(--text-charcoal); } .terminal-card h2 { font-family: var(--font-heading); font-size: 28px; font-weight: 900; margin-bottom: 10px; } .terminal-card .sub-label { font-size: 14px; color: #a3a19c; margin-bottom: 25px; display: block; } .y2k-form-group { margin-bottom: 20px; } .y2k-form-group label { display: block; font-size: 13px; font-weight: 700; margin-bottom: 8px; } .y2k-input { width: 100%; background-color: var(--bg-cream); border: var(--y2k-border); border-radius: 10px; padding: 12px 16px; font-family: var(--font-body); font-size: 14px; color: var(--text-charcoal); outline: none; transition: border-color 0.2s ease; } .y2k-input:focus { border-color: var(--accent-matcha); } textarea.y2k-input { resize: none; min-height: 100px; } .btn-submit-terminal { width: 100%; background-color: var(--accent-matcha); border: var(--y2k-border); border-radius: 12px; padding: 14px; font-family: var(--font-heading); font-weight: 700; font-size: 15px; color: #121110; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 10px; transition: all 0.2s ease; } .btn-submit-terminal:hover { background-color: var(--accent-matcha-dark); transform: translateY(-1px); } .qr-display-wrapper { width: 100%; max-width: 270px; background-color: #121110; border: var(--y2k-border); border-radius: 16px; margin: 15px auto; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; padding: 16px; position: relative; box-sizing: border-box; } .qr-display-wrapper img { max-width: 220px; width: 100%; height: auto; aspect-ratio: 1 / 1; object-fit: contain; z-index: 2; border-radius: 12px; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); color-scheme: only light !important; forced-color-adjust: none !important; filter: none !important; -webkit-filter: none !important; } .string-data-badge { background-color: var(--bg-cream); border: var(--y2k-border); border-radius: 10px; padding: 12px 16px; display: flex; justify-content: space-between; align-items: center; font-family: var(--font-heading); font-weight: 700; font-size: 14px; margin-bottom: 25px; } .btn-copy-icon { background: none; border: none; color: var(--accent-matcha-dark); cursor: pointer; font-size: 16px; } .trust-ribbon-row { display: flex; justify-content: space-between; border-top: 1.5px solid #2b2a27; padding-top: 20px; } .trust-item { font-size: 12px; font-weight: 700; color: #a3a19c; display: flex; align-items: center; gap: 6px; } /* ========================================================================== 7B. VERTICAL STACKED SYSTEM & FULL-WIDTH BUTTON CONTROLLERS ========================================================================== */ .left-terminal-action-stack { display: flex; flex-direction: column; gap: 20px; width: 100%; max-width: 460px; margin-top: 15px; } /* Expanded Full-Width Email Display Node */ .widescreen-social-tab.tab-email-full { display: flex; align-items: center; justify-content: center; gap: 12px; background-color: var(--card-bg-white); color: var(--text-charcoal); text-decoration: none; font-family: var(--font-heading); font-weight: 700; font-size: 15px; padding: 16px; border: var(--y2k-border); border-radius: 12px; width: 100%; box-shadow: 4px 4px 0px var(--text-charcoal); transition: all 0.2s ease; } /* Enlarged Feedback Pop-Up Trigger Action Button */ .modal-trigger-large-btn { display: flex; align-items: center; justify-content: center; gap: 12px; background-color: var(--accent-matcha); color: #121110; font-family: var(--font-heading); font-weight: 800; font-size: 16px; padding: 18px; border: var(--y2k-border); border-radius: 14px; width: 320px; max-width: 100%; margin: 15px auto; box-shadow: 4px 4px 0px var(--text-charcoal); cursor: pointer; transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275), box-shadow 0.2s ease, background-color 0.2s ease; } .modal-trigger-large-btn:hover { background-color: var(--accent-matcha-dark); transform: translateY(-2px); box-shadow: 6px 6px 0px var(--text-charcoal); } .modal-trigger-large-btn:active { transform: translateY(1px); box-shadow: 2px 2px 0px var(--text-charcoal); } /* ========================================================================== 7C. BRUTALIST CONTENT BALANCING PORTALS (MILESTONE & INSTRUCTIONS) ========================================================================== */ .brutalist-divider { border: none; border-top: 1.5px dashed #2b2a27; margin: 5px 0; width: 100%; } .brutalist-info-card { background-color: var(--card-bg-white); border: var(--y2k-border); border-radius: 14px; padding: 20px; width: 100%; display: flex; flex-direction: column; text-align: left; } /* Milestone Container Target Overrides */ .milestone-theme h3 { font-family: var(--font-heading); font-size: 18px; font-weight: 900; margin-bottom: 6px; color: var(--text-charcoal); } .milestone-theme p { font-size: 13px; line-height: 1.5; color: #a3a19c; margin-bottom: 14px; } .milestone-theme p strong { color: var(--accent-matcha-dark); } .card-meta-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; } .info-tag-label { font-family: var(--font-heading); font-size: 11px; font-weight: 800; background-color: #1e1d1a; border: 1.5px solid var(--accent-matcha); padding: 3px 8px; border-radius: 6px; color: var(--accent-matcha); } .stat-percentage { font-size: 11px; font-weight: 700; color: #5e5d5a; } /* Progress Meter Configurations */ .progress-bar-container { width: 100%; height: 6px; background-color: #1e1d1a; border-radius: 3px; overflow: hidden; border: 1px solid #2b2a27; } .progress-bar-fill { width: 45%; height: 100%; background-color: var(--accent-matcha); border-radius: 3px; } /* Instructions Message Box Overrides */ .note-theme { border-style: dashed; background-color: transparent; border-color: #2b2a27; padding: 16px; } .note-theme h4 { font-family: var(--font-heading); font-size: 13px; font-weight: 800; color: var(--text-charcoal); margin-bottom: 6px; display: flex; align-items: center; gap: 6px; } .note-theme p { font-size: 12px; line-height: 1.5; color: #8c8a84; } /* ========================================================================== 7D. RIGHT SIDE SCAN TO FUEL CARDS ALIGNMENT STRETCH PORTALS ========================================================================== */ .right-scan-payment-card { display: flex; flex-direction: column; justify-content: space-between; align-items: center; height: 100%; text-align: center; } .right-card-header-block { width: 100%; } .payment-heart-icon { font-size: 26px; color: var(--accent-matcha); margin-bottom: 8px; display: inline-block; } /* Expanded QR Container metrics to eliminate void spaces nicely */ .qr-display-wrapper.extended-qr-frame { max-width: 290px; margin: 15px auto; } .fallback-qr-glyph { font-size: 85px; color: #121110; position: absolute; z-index: 1; } .upi-badge-container { width: 100%; max-width: 290px; margin: 5px auto 0 auto; } .upi-badge-container .string-data-badge { margin-bottom: 0; padding: 11px 14px; border-radius: 10px; } .trust-ribbon-row.payment-trust-ribbon { width: 100%; border-top: 1.5px solid #2b2a27; padding-top: 18px; margin-top: 15px; } .payment-trust-ribbon .trust-item i { color: var(--accent-matcha); } /* --- Dynamic Payment Flow Components --- */ .payment-amount-group { display: flex; align-items: center; width: 100%; max-width: 320px; margin: 15px auto 4px auto; background-color: var(--bg-cream); border: var(--y2k-border); border-radius: 12px; overflow: hidden; font-family: var(--font-heading); font-weight: 700; transition: border-color 0.2s ease, box-shadow 0.2s ease; } .payment-amount-group:focus-within { border-color: var(--accent-matcha); box-shadow: 0 0 0 2px rgba(138, 203, 136, 0.25); } .payment-amount-prefix { padding: 12px 14px; background: rgba(0, 0, 0, 0.05); color: var(--text-charcoal); font-size: 18px; font-weight: 800; border-right: var(--y2k-border); user-select: none; } .payment-amount-input { width: 100%; border: none; background: transparent; padding: 12px 14px; font-family: var(--font-body); font-size: 15px; font-weight: 600; color: var(--text-charcoal); outline: none; } .payment-amount-error { color: #e74c3c; font-size: 12px; margin: 4px auto 6px auto; text-align: center; font-weight: 600; max-width: 320px; width: 100%; } .payment-cap-note { font-size: 11px; color: #a3a19c; margin: 4px auto 14px auto; max-width: 320px; line-height: 1.4; text-align: center; } .payment-cap-note i { color: var(--accent-matcha); margin-right: 3px; } .payment-btn { display: flex; align-items: center; justify-content: center; gap: 10px; border: var(--y2k-border); border-radius: 12px; padding: 14px 20px; font-family: var(--font-heading); font-weight: 700; font-size: 15px; cursor: pointer; width: 100%; max-width: 320px; margin: 0 auto; transition: all 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .payment-btn-primary { background-color: var(--accent-matcha); color: #121110; box-shadow: 3px 3px 0px var(--text-charcoal); } /* Hide Pay Directly button on Desktop PC by default */ .mobile-only-pay-btn { display: none !important; } .payment-btn-primary:not(:disabled):hover { background-color: var(--accent-matcha-dark); transform: translateY(-2px); box-shadow: 5px 5px 0px var(--text-charcoal); } .payment-btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none !important; transform: none !important; filter: grayscale(40%); } .payment-or-divider { display: flex; align-items: center; text-align: center; width: 100%; max-width: 320px; margin: 14px auto 12px auto; color: #8c8a84; font-size: 11px; font-weight: 700; font-family: var(--font-heading); text-transform: uppercase; letter-spacing: 0.8px; } .payment-or-divider::before, .payment-or-divider::after { content: ''; flex: 1; border-bottom: 1.5px dashed #3a3935; } .payment-or-divider span { padding: 3px 12px; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 12px; color: #a3a19c; font-size: 10px; font-weight: 800; letter-spacing: 1.5px; margin: 0 10px; } .payment-qr-section { position: relative; width: 100%; max-width: 290px; margin: 0 auto; } .qr-display-wrapper.extended-qr-frame { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 250px; width: 100%; max-width: 270px; margin: 12px auto 16px auto; padding: 16px; background: rgba(255, 255, 255, 0.02) !important; backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border: 1.5px dashed rgba(138, 203, 136, 0.25); border-radius: 20px; box-sizing: border-box; overflow: hidden; transition: all 0.3s ease; } .qr-display-wrapper.extended-qr-frame.qr-active { border-style: solid; border-color: var(--accent-matcha); background: rgba(255, 255, 255, 0.04) !important; box-shadow: 0 0 25px rgba(138, 203, 136, 0.15), inset 0 0 15px rgba(138, 203, 136, 0.05); } .qr-placeholder-state { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 25px 15px; text-align: center; width: 100%; } .qr-placeholder-icon { font-size: 68px; color: rgba(138, 203, 136, 0.22); text-shadow: 0 0 20px rgba(138, 203, 136, 0.15); transition: all 0.3s ease; } .payment-qr-center-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: rgba(138, 203, 136, 0.12); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #e6e5d7; border: 1.5px solid var(--accent-matcha); border-radius: 14px; padding: 12px 22px; font-family: var(--font-heading); font-weight: 700; font-size: 14px; cursor: pointer; box-shadow: 0 4px 20px rgba(138, 203, 136, 0.12); transition: all 0.25s cubic-bezier(0.175, 0.885, 0.32, 1.275); } .payment-qr-center-btn i { color: var(--accent-matcha); } .payment-qr-center-btn:hover { background: rgba(138, 203, 136, 0.25); color: #ffffff; border-color: #a3e6a1; transform: translateY(-2px); box-shadow: 0 6px 25px rgba(138, 203, 136, 0.28); } .qr-timer-badge { display: inline-flex; align-items: center; gap: 6px; margin-top: 10px; padding: 6px 14px; background: rgba(138, 203, 136, 0.12); border: 1px solid var(--accent-matcha); border-radius: 20px; color: var(--accent-matcha); font-family: var(--font-heading); font-size: 12px; font-weight: 700; animation: pulseGlow 2s infinite ease-in-out; } @keyframes pulseGlow { 0%, 100% { box-shadow: 0 0 5px rgba(138, 203, 136, 0.2); } 50% { box-shadow: 0 0 12px rgba(138, 203, 136, 0.4); } } .qr-expired-overlay { position: absolute; inset: 0; background: rgba(18, 17, 16, 0.95); backdrop-filter: blur(6px); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; color: #e74c3c; font-family: var(--font-heading); font-weight: 700; font-size: 15px; padding: 20px; z-index: 10; border-radius: 14px; } .qr-expired-submit-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; background: #8acb88; color: #121110; border: 1px solid #bdf0ba; border-radius: 10px; padding: 10px 14px; font-family: var(--font-heading); font-size: 12.5px; font-weight: 700; cursor: pointer; box-shadow: 0 0 15px rgba(138, 203, 136, 0.7), 0 0 30px rgba(138, 203, 136, 0.4); transition: all 0.3s ease; width: 90%; margin-bottom: 6px; animation: neonMatchaPulse 2s infinite alternate ease-in-out; } @keyframes neonMatchaPulse { 0% { box-shadow: 0 0 12px rgba(138, 203, 136, 0.6), 0 0 25px rgba(138, 203, 136, 0.3); } 100% { box-shadow: 0 0 22px rgba(138, 203, 136, 0.95), 0 0 45px rgba(138, 203, 136, 0.6); } } .qr-expired-submit-btn:hover { background: #a3e6a1; transform: translateY(-2px) scale(1.02); box-shadow: 0 0 28px rgba(138, 203, 136, 1), 0 0 50px rgba(138, 203, 136, 0.7); } .qr-regenerate-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: rgba(255, 255, 255, 0.06); color: #e6e5d7; border: 1px solid rgba(255, 255, 255, 0.15); border-radius: 10px; padding: 8px 14px; font-family: var(--font-heading); font-size: 11.5px; font-weight: 600; cursor: pointer; transition: all 0.2s ease; width: 90%; } .qr-regenerate-btn:hover { background: rgba(255, 255, 255, 0.12); color: #ffffff; } .payment-result-area { width: 100%; max-width: 320px; margin: 6px auto 0 auto; padding: 0; background: transparent; border: none; font-size: 12px; text-align: center; } .payment-manual-section { width: 100%; max-width: 320px; margin: 15px auto 10px auto; border-top: 1px solid rgba(255, 255, 255, 0.08); padding-top: 15px; } .payment-manual-label { font-size: 12px; color: #a3a19c; margin-bottom: 8px; text-align: center; line-height: 1.4; } .payment-self-report-note { display: flex; align-items: flex-start; gap: 10px; width: 100%; max-width: 320px; margin: 12px auto 8px auto; padding: 10px 12px; background: rgba(255, 255, 255, 0.025); border: 1px dashed rgba(138, 203, 136, 0.35); border-radius: 10px; text-align: left; box-sizing: border-box; } .payment-self-report-note i { color: var(--accent-matcha); font-size: 14px; margin-top: 2px; flex-shrink: 0; } .payment-self-report-note p { font-size: 11.5px; line-height: 1.45; color: #a3a19c; margin: 0; } .payment-self-report-note p strong { color: #e6e5d7; } .payment-manual-label i { color: var(--accent-matcha); margin-right: 4px; } /* ========================================================================== 7E. SMOOTH LENS BLUR MODAL OVERLAY COMPONENT ========================================================================== */ .modal-blur-overlay-screen { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background-color: rgba(18, 17, 16, 0.85); backdrop-filter: blur(8px); z-index: 2000; display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s cubic-bezier(0.165, 0.84, 0.44, 1); } .modal-blur-overlay-screen.modal-active-stage { opacity: 1; pointer-events: auto; } .brutalist-popup-card-modal { background-color: var(--card-bg-white); border: var(--y2k-border); border-radius: 24px; width: 92%; max-width: 480px; max-height: 90vh; overflow-y: auto; padding: 32px 34px 28px 34px; box-shadow: 6px 6px 0px var(--accent-matcha); position: relative; opacity: 0; transform: scale(0.84) translateY(20px); transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease; box-sizing: border-box; } .modal-blur-overlay-screen.modal-active-stage .brutalist-popup-card-modal { opacity: 1; transform: scale(1) translateY(0); } .modal-close-dismiss-cross-btn { position: absolute; top: 18px; right: 22px; background: none; border: none; color: var(--text-charcoal); font-size: 28px; font-weight: 300; cursor: pointer; line-height: 1; transition: color 0.15s ease; } .modal-close-dismiss-cross-btn:hover { color: var(--accent-matcha); } .modal-popup-header-block { text-align: center; margin-bottom: 18px; } .modal-popup-header-block i { font-size: 26px !important; margin-bottom: 6px !important; } .modal-popup-header-block h2 { font-family: var(--font-heading); font-size: 24px; font-weight: 900; letter-spacing: -0.5px; margin: 0; } .modal-popup-header-block p { font-size: 12.5px; color: #a3a19c; margin-top: 4px; } .modal-form-grid-engine { display: flex; flex-direction: column; gap: 14px; } .modal-form-grid-engine .y2k-form-group label { font-size: 12px; margin-bottom: 4px; font-weight: 700; } .modal-form-grid-engine .y2k-input { padding: 10px 14px; font-size: 13.5px; border-radius: 10px; } .modal-form-grid-engine textarea.y2k-input { min-height: 70px !important; height: 75px !important; padding: 10px 14px; resize: vertical; } .modal-input-embed-icon { position: absolute; bottom: 14px; right: 16px; color: #6e6d6a; font-size: 14px; pointer-events: none; } /* ========================================================================== 8. COMPACT LAYOUT BREAKPOINTS ENGINE (PERFECT ALIGNMENT MATRIX) ========================================================================== */ @media (max-width: 1100px) { .master-collage-grid { grid-template-columns: 1fr; gap: 45px; } .collage-flank { flex-direction: row; justify-content: center; gap: 24px; } .scatter-photo { width: 210px; transform: none !important; } .tape-element { display: none; } } /* --- TEAM PAGE OVERRIDES --- */ .team-divider { border: none; border-top: var(--y2k-border); margin: 60px 0 50px 0; opacity: 0.3; } /* ── TEAM PAGE STYLES ── */ .team-hero { max-width: 800px; margin: 60px auto 70px auto; padding: 0 5%; text-align: center; } .team-hero .card-badge-header { display: inline-flex; align-items: center; gap: 8px; background-color: var(--card-bg-white); border: var(--y2k-border); border-radius: 100px; padding: 6px 16px; margin-bottom: 20px; } .team-hero .card-badge-header i { font-size: 14px; color: var(--accent-matcha); } .team-hero .card-badge-header span { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; color: var(--text-charcoal); } .team-hero h1 { font-family: var(--font-heading); font-size: 44px; font-weight: 900; line-height: 1.1; margin-bottom: 20px; letter-spacing: -1px; } .team-hero p { font-size: 15px; line-height: 1.6; color: #d1cfc7; max-width: 560px; margin: 0 auto; } .team-section { max-width: 1100px; margin: 0 auto 100px auto; padding: 0 5%; } .team-section-label { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 1.5px; color: var(--accent-matcha); margin-bottom: 24px; } .founder-card { background-color: var(--card-bg-white); border: var(--y2k-border); border-radius: 24px; box-shadow: 6px 6px 0px var(--text-charcoal); display: grid; grid-template-columns: 280px 1fr; overflow: hidden; transition: transform 0.2s ease, box-shadow 0.2s ease; } .founder-card:hover { transform: translateY(-4px); box-shadow: 8px 8px 0px var(--accent-matcha); } .founder-photo-col { background-color: #1a241e; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 30px; gap: 20px; border-right: var(--y2k-border); } .photo-placeholder { width: 150px; height: 150px; border-radius: 50%; background-color: #2b2a27; border: var(--y2k-border); display: flex; align-items: center; justify-content: center; font-size: 52px; color: var(--accent-matcha); overflow: hidden; transform: translateZ(0); box-shadow: 0 0 0 1px transparent; will-change: transform; } .photo-placeholder-sm { width: 120px; height: 120px; font-size: 44px; transform: translateZ(0); } .role-badge { display: inline-block; background-color: var(--accent-matcha); color: #121110; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.8px; padding: 5px 14px; border-radius: 100px; border: var(--y2k-border); } .founder-info-col { padding: 45px 45px; display: flex; flex-direction: column; justify-content: center; gap: 16px; } .founder-info-col h2 { font-family: var(--font-heading); font-size: 36px; font-weight: 900; line-height: 1.1; letter-spacing: -0.5px; } .founder-quote { font-size: 15px; line-height: 1.7; color: #d1cfc7; border-left: 3px solid var(--accent-matcha); padding-left: 16px; font-style: italic; } .founder-bio { font-size: 14px; line-height: 1.7; color: #a3a19c; } .social-row { display: flex; gap: 12px; margin-top: 4px; } .social-btn { display: inline-flex; align-items: center; gap: 8px; background-color: #1e1d1a; border: var(--y2k-border); color: var(--text-charcoal); text-decoration: none; font-size: 13px; font-weight: 700; padding: 8px 16px; border-radius: 10px; transition: all 0.2s ease; } .social-btn:hover { background-color: var(--accent-matcha); color: #121110; transform: translateY(-2px); } .social-btn i { font-size: 14px; } .cofounders-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; margin-top: 24px; } .cofounder-card { background-color: var(--card-bg-white); border: var(--y2k-border); border-radius: 20px; box-shadow: 4px 4px 0px var(--text-charcoal); padding: 35px 30px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; transition: transform 0.2s ease, box-shadow 0.2s ease; } .cofounder-card:hover { transform: translateY(-4px); box-shadow: 6px 6px 0px var(--accent-matcha); } .cofounder-card h3 { font-family: var(--font-heading); font-size: 22px; font-weight: 900; letter-spacing: -0.3px; } .cofounder-bio { font-size: 13px; line-height: 1.65; color: #a3a19c; } /* ========================================================================== 9. LIGHTBOX IMAGE ZOOM SYSTEM (FULLSCREEN OVERLAY) ========================================================================== */ .lightbox-overlay { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(11, 15, 13, 0.96); /* Matches dark brutalist theme */ display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 9999; /* Higher than navbar and all content */ opacity: 0; visibility: hidden; /* Prevents keyboard focus leaks when closed */ pointer-events: none; transition: opacity 0.35s cubic-bezier(0.16, 1, 0.3, 1), visibility 0.35s cubic-bezier(0.16, 1, 0.3, 1); padding: 20px; box-sizing: border-box; } .lightbox-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; } .lightbox-image { max-width: 90%; max-height: 75vh; object-fit: contain; border: var(--y2k-border); border-radius: 16px; box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.6); opacity: 0; transform: scale(0.84); transition: transform 0.38s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.35s ease; } .lightbox-overlay.active .lightbox-image { opacity: 1; transform: scale(1); } .lightbox-close { position: absolute; top: 25px; right: 35px; background: transparent; border: none; color: #d1cfc7; font-size: 45px; font-weight: 300; cursor: pointer; line-height: 1; transition: color 0.2s ease, transform 0.2s ease; } .lightbox-close:hover { color: var(--accent-matcha); transform: scale(1.1); } .lightbox-caption { margin-top: 20px; font-family: var(--font-heading); font-size: 20px; font-weight: 800; color: #ffffff; text-align: center; letter-spacing: 0.5px; text-shadow: 2px 2px 0px #000; } /* ========================================================================== 5AB. VISION & MISSION SECTION & HERO BRAND TITLE ========================================================================== */ #vision-mission { flex-direction: column; justify-content: center; gap: 40px; min-height: auto; padding-top: 40px; padding-bottom: 40px; } .vision-mission-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; width: 100%; } .vision-card, .mission-card { background-color: var(--card-bg-white); border: var(--y2k-border); border-radius: 24px; padding: 40px; box-shadow: 6px 6px 0.5px var(--text-charcoal); display: flex; flex-direction: column; align-items: start; gap: 15px; } .vision-card h3, .mission-card h3 { font-family: var(--font-heading); font-size: 28px; font-weight: 900; color: var(--text-charcoal); } .vision-card p, .mission-card p { font-size: 15px; line-height: 1.6; color: #d1cfc7; } .hero-brand-title { font-size: 20px; font-weight: 700; color: var(--accent-matcha); margin-top: 5px; margin-bottom: 25px; line-height: 1.4; letter-spacing: 0.5px; } .main-narrative-card .section-paragraph { margin-bottom: 20px; } .main-narrative-card .section-paragraph:last-of-type { margin-bottom: 0; } /* ========================================================================== 6B. FOOTER BIO ROW REGION STYLES ========================================================================== */ .footer-bio-row { padding: 30px 40px 10px 40px; width: 100%; max-width: 1400px; display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; box-sizing: border-box; margin: 0 auto; } .footer-bio-row p.bio-text { font-size: 13px; line-height: 1.6; color: #D4D4D4; margin: 0 auto; max-width: 750px; } .footer-bio-row p.org-name { font-size: 11px; font-weight: 700; color: var(--accent-matcha); text-transform: uppercase; letter-spacing: 0.5px; margin: 0; } .footer-bio-row span.motto { font-size: 13px; font-weight: 700; color: var(--text-charcoal); font-style: italic; display: block; } /* ========================================================================== 6C. MOBILE OPTIMIZATIONS FOR JOURNAL CARD METADATA ========================================================================== */ @media (max-width: 992px) { .journal-story-card { padding: 16px !important; } .journal-card-meta { display: flex !important; flex-direction: row !important; justify-content: space-between !important; align-items: center !important; } .journal-tag { font-size: 9.5px !important; padding: 2px 5px !important; display: inline-block !important; white-space: normal !important; word-break: break-word !important; max-width: 125px !important; text-align: center !important; } .journal-date { font-size: 10.5px !important; display: inline-block !important; } .tab-email-full { margin: 0 auto !important; max-width: 320px !important; } .team-hero .card-badge-header { display: inline-flex !important; margin: 0 auto 20px auto !important; align-self: center !important; justify-content: center !important; } } /* ========================================================================== 7. EXTRACTED INLINE STYLES — INDEX.HTML ========================================================================== */ /* #work section overrides */ .work-section { flex-direction: column; align-items: stretch; gap: 40px; min-height: auto; padding-top: 80px; padding-bottom: 80px; } /* #join-the-movement section */ .join-section { min-height: auto; padding-top: 80px; padding-bottom: 80px; } .join-content-box { padding: 60px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 20px; } .join-title { margin-bottom: 10px; } .join-description { max-width: 800px; margin-bottom: 25px; color: #d1cfc7; font-size: 16px; line-height: 1.7; } .join-cta-row { display: flex; gap: 20px; flex-wrap: wrap; justify-content: center; width: 100%; } .join-cta-label { font-size: 14px; font-weight: 700; color: var(--accent-matcha-dark); margin: 10px 0 0 0; letter-spacing: 0.5px; } /* Footer sub-bar */ .footer-sub-bar { display: flex; justify-content: space-between; align-items: center; width: 100%; max-width: 1400px; padding: 20px 40px; box-sizing: border-box; font-size: 13px; color: #a3a19c; } .footer-legal-links { display: flex; gap: 20px; } .footer-legal-links a { color: #a3a19c; text-decoration: none; font-size: 13px; } .footer-legal-links a:hover { color: var(--accent-matcha); } /* Footer brand name (replaces h2) */ .footer-brand-name { font-family: var(--font-heading); font-size: 22px; font-weight: 900; letter-spacing: -0.5px; color: var(--text-charcoal); margin: 0; } .footer-brand-tagline { font-size: 13px; font-weight: 700; color: var(--accent-matcha); margin: 4px 0 0 0; text-transform: uppercase; letter-spacing: 0.5px; line-height: 1.4; } /* ========================================================================== 8. FUELUS.HTML — MODAL & SUCCESS POPUP STYLES ========================================================================== */ .success-popup-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.75); backdrop-filter: blur(8px); display: none; justify-content: center; align-items: center; z-index: 99999; } .success-popup-overlay.active { display: flex; } .success-popup-card { width: 90%; max-width: 420px; background: var(--card-bg-white); border: var(--y2k-border); border-radius: 24px; padding: 35px; text-align: center; box-shadow: 6px 6px 0px var(--accent-matcha); } .success-icon { font-size: 48px; margin-bottom: 15px; } .success-popup-card h2 { margin-bottom: 12px; } .success-popup-card p { margin-bottom: 15px; } .success-donor-id { padding: 12px; border: var(--y2k-border); border-radius: 12px; margin-bottom: 15px; font-weight: 700; } .redirect-note { opacity: 0.8; font-size: 13px; } /* fuelus.html mobile overrides */ @media (max-width: 992px) { .right-scan-payment-card { text-align: center; } .trust-info-box { margin-top: 15px; padding: 12px 15px; border: 1px solid #2b2a27; border-radius: 12px; font-size: 13px; line-height: 1.6; text-align: center; color: #bfbdb5; background: rgba(255, 255, 255, 0.02); } .card-badge-header, div.card-badge-header, [class*="card-badge-header"] { display: block !important; width: max-content !important; margin-left: auto !important; margin-right: auto !important; margin-top: 30px !important; margin-bottom: 20px !important; text-align: center !important; white-space: nowrap !important; color: #E6E5D7 !important; -webkit-text-fill-color: #E6E5D7 !important; font-weight: 700 !important; font-size: 11px !important; text-transform: uppercase !important; } .dark-badge { color: #121110 !important; -webkit-text-fill-color: #121110 !important; } } /* ========================================================================== 9. ACCESSIBILITY — FOCUS-VISIBLE & KEYBOARD NAVIGATION ========================================================================== */ /* Keyboard focus ring — visible only for keyboard navigation, not mouse */ :focus-visible { outline: 2px solid var(--accent-matcha); outline-offset: 3px; border-radius: 4px; } /* Remove default focus for mouse users */ :focus:not(:focus-visible) { outline: none; } /* ========================================================================== 10. TOAST NOTIFICATION SYSTEM ========================================================================== */ .iyimhhse-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); background: var(--card-bg-white); color: var(--text-charcoal); border: var(--y2k-border); border-radius: 12px; padding: 12px 24px; font-size: 14px; font-weight: 700; box-shadow: 4px 4px 0px var(--accent-matcha); z-index: 999999; opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; white-space: nowrap; } .iyimhhse-toast.toast-visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* ========================================================================== 11. DYNAMIC DOT-LOADERS AND SHIMMER PULSE ========================================================================== */ .dot-loader { display: inline-flex; align-items: center; justify-content: center; gap: 4px; vertical-align: middle; } .dot-loader span { width: 8px; height: 8px; background-color: var(--accent-matcha, #10b981); border-radius: 50%; display: inline-block; animation: dot-bounce 1.4s infinite ease-in-out both; } .dot-loader span:nth-child(1) { animation-delay: -0.32s; } .dot-loader span:nth-child(2) { animation-delay: -0.16s; } @keyframes dot-bounce { 0%, 80%, 100% { transform: scale(0); } 40% { transform: scale(1); } } /* Reusable Three-Dot Loader */ .three-dot-loader { display: inline-flex; align-items: center; justify-content: center; gap: 0.25em; vertical-align: middle; height: 1em; } .three-dot-loader span { width: 0.35em; height: 0.35em; background-color: currentColor; border-radius: 50%; display: inline-block; animation: three-dot-jump 1.2s infinite ease-in-out both; opacity: 0.7; } .three-dot-loader span:nth-child(1) { animation-delay: -0.32s; } .three-dot-loader span:nth-child(2) { animation-delay: -0.16s; } @keyframes three-dot-jump { 0%, 80%, 100% { transform: translateY(0); opacity: 0.6; } 40% { transform: translateY(-0.4em); opacity: 1; } } @media (prefers-reduced-motion: reduce) { .three-dot-loader span { animation: none; opacity: 0.5; transform: none; } } .pulse-shimmer { position: relative; overflow: hidden; background-color: rgba(255, 255, 255, 0.03) !important; } .pulse-shimmer::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; transform: translateX(-100%); background-image: linear-gradient( 90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.08) 30%, rgba(255, 255, 255, 0.18) 60%, rgba(255, 255, 255, 0) 100% ); animation: shimmer-swipe 2s infinite; } .photo-frame.pulse-shimmer, .scrapbook-frame.pulse-shimmer, .photo-placeholder.pulse-shimmer, .gallery-image-frame.pulse-shimmer, .qr-display-wrapper.pulse-shimmer { background-color: #2b2a27 !important; } @keyframes shimmer-swipe { 100% { transform: translateX(100%); } } /* ========================================================================== 26. HOMEPAGE CONTACT QUERY FORM (Y2K / BRUTALIST STYLE) ========================================================================== */ .join-grid-layout { display: grid; grid-template-columns: 1.2fr 1fr; gap: 50px; align-items: center; width: 100%; } .join-info-column { display: flex; flex-direction: column; align-items: flex-start; } .join-form-column { width: 100%; } .contact-card { background-color: var(--card-bg-white); border: var(--y2k-border); border-radius: 20px; padding: 30px; box-shadow: 4px 4px 0px var(--text-charcoal); width: 100%; box-sizing: border-box; transition: transform 0.2s ease, box-shadow 0.2s ease; } .contact-card-title { font-family: var(--font-heading); font-size: 22px; font-weight: 900; margin-bottom: 20px; color: var(--text-charcoal); text-transform: uppercase; letter-spacing: -0.5px; text-align: left; } .y2k-form-group { margin-bottom: 16px; text-align: left; } .y2k-form-label { font-family: var(--font-heading); font-weight: 700; font-size: 13px; color: var(--text-charcoal); margin-bottom: 6px; display: block; } /* Success Card Styling */ .contact-success-card { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px 10px; } .contact-success-icon-box { width: 60px; height: 60px; border-radius: 50%; background-color: var(--accent-matcha); color: #121110; display: flex; align-items: center; justify-content: center; font-size: 24px; border: 2px solid #121110; box-shadow: 0 4px 12px rgba(148, 180, 159, 0.3); margin-bottom: 20px; } .contact-success-title { font-family: var(--font-heading); font-size: 20px; font-weight: 900; margin-bottom: 12px; color: #fbf9f1 !important; text-transform: uppercase; } .contact-success-paragraph { font-family: inherit; font-size: 14px; color: #d1cfc7 !important; line-height: 1.6; margin-bottom: 24px; } .contact-success-email-highlight { font-weight: 700; color: #ffffff !important; } .contact-error-msg { margin-top: 12px; color: #ff5252; font-family: var(--font-heading); font-weight: 700; font-size: 13px; text-align: center; } /* Mobile responsive adjustments */ @media (max-width: 992px) { .join-grid-layout { grid-template-columns: 1fr; gap: 30px; } .contact-card { padding: 20px; } } /* Mobile-only payment elements hidden on desktop screens */ .mobile-only-pay-btn, .payment-or-divider { display: none !important; }