* {margin:0; padding:0; box-sizing:border-box} :root {--primary:#1a486c; --primary-light:#0F3450; --primary-lighter:#143E5E; --primary-accent:#2563eb; --primary-bright:#20527A; --secondary-1:#0A3B28; --secondary-1-light:#0F4530; --secondary-1-lighter:#144F38; --secondary-1-accent:#1A5940; --secondary-1-bright:#206348; --secondary-2:#1A1A42; --secondary-2-light:#1F1F50; --secondary-2-lighter:#24245E; --secondary-2-accent:#29296C; --secondary-2-bright:#2E2E7A; --complement:#5A3A10; --complement-light:#6B441E; --complement-lighter:#7C4E2C; --complement-accent:#8D583A; --complement-bright:#724200; /* ======================================================================= PIXEL-PERFECT COLOR SYSTEM - Systematic palette expansion ======================================================================= */ /* Primary Blue Scale - Enhanced from existing --primary */ --primary-50:#f0f6fb; --primary-100:#deeaf6; --primary-200:#c3dbf0; --primary-300:#9bc3e5; --primary-400:#6ba5d9; --primary-500:#4a89cc; --primary-600:#2d6bb3; --primary-700:#1a5499; --primary-800:#0f3d7a; --primary-900:var(--primary); /* #1a486c */ /* Semantic Colours - UI states and meaning */ --success:#22c55e; --success-light:#86efac; --warning:#f59e0b; --warning-light:#fcd34d; --error:#ef4444; --error-light:#fca5a5; --info:var(--primary-500); --info-light:var(--primary-300); /* Text Colours - Systematic hierarchy */ --text-primary:#ffffff; --text-secondary:#e2e8f0; --text-tertiary:#94a3b8; --text-accent:var(--complement-bright); --text-on-light:#0f172a; --text-muted:#64748b; /* Background Colours - Layered system */ --bg-primary:var(--primary); --bg-secondary:var(--primary-light); --bg-surface:var(--primary-accent); --bg-header:rgba(245,245,247,0.98); /* Light neutral for better logo contrast */ --bg-overlay:rgba(10,42,66,0.95); --bg-overlay-light:rgba(255,255,255,0.1); --bg-overlay-medium:rgba(255,255,255,0.2); --bg-overlay-strong:rgba(255,255,255,0.3); /* Interactive Colours - Consistent button states */ --interactive-primary:var(--primary-500); --interactive-primary-hover:var(--primary-600); --interactive-secondary:var(--complement-accent); --interactive-secondary-hover:var(--complement-bright); /* Standardized Image Filters - Replace all variations */ --filter-hero:sepia(0.15) saturate(0.85) hue-rotate(200deg) brightness(1.1) contrast(1.05); --filter-card:sepia(0.1) saturate(0.9) hue-rotate(210deg) brightness(1.15) contrast(1.02); --filter-accent:sepia(0.08) saturate(0.95) hue-rotate(195deg) brightness(1.08) contrast(1.01); --filter-logo:brightness(1.2) contrast(1.1); /* Shadow System - Consistent depth */ --shadow-sm:0 1px 2px 0 rgba(0,0,0,0.05); --shadow-base:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06); --shadow-md:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06); --shadow-brand:0 10px 25px -5px rgba(10,42,66,0.3)} /* ======================================================================= DARK MODE SUPPORT - Respects user preferences ======================================================================= */ @media (prefers-color-scheme:dark) {:root {/* Dark mode text colors */ --text-primary:#ffffff; --text-secondary:#e2e8f0; --text-tertiary:#94a3b8; --text-on-light:#ffffff; /* Inverted for dark backgrounds */ --text-muted:#94a3b8; /* Dark mode backgrounds */ --bg-primary:#0f172a; --bg-secondary:#1e293b; --bg-surface:#334155; --bg-header:rgba(15,23,42,0.98); /* Dark header for dark mode */ --bg-overlay:rgba(0,0,0,0.8); --bg-overlay-light:rgba(0,0,0,0.4); --bg-overlay-medium:rgba(0,0,0,0.6); --bg-overlay-strong:rgba(0,0,0,0.8); /* Dark mode body background */ body {background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%); color:var(--text-primary)} /* Dark mode navigation text */ .nav-links a {color:var(--text-primary)} .nav-links a:hover,.nav-links a.current {color:var(--primary-400); /* Lighter blue for better contrast in dark mode */ } .nav-links a::after,.nav-links a.current::after {background:var(--primary-400)} .logo {color:var(--text-primary)} /* Dark mode shadows */ --shadow-sm:0 1px 2px 0 rgba(0,0,0,0.3); --shadow-base:0 1px 3px 0 rgba(0,0,0,0.4),0 1px 2px 0 rgba(0,0,0,0.2); --shadow-md:0 4px 6px -1px rgba(0,0,0,0.4),0 2px 4px -1px rgba(0,0,0,0.2); --shadow-brand:0 10px 25px -5px rgba(0,0,0,0.6)} } /* Manual dark mode class for JavaScript toggle */ [data-theme="dark"] {/* Same as above but applied via class for manual toggle */ --text-primary:#ffffff; --text-secondary:#e2e8f0; --text-tertiary:#94a3b8; --text-on-light:#ffffff; --text-muted:#94a3b8; --bg-primary:#0f172a; --bg-secondary:#1e293b; --bg-surface:#334155; --bg-header:rgba(15,23,42,0.98); --bg-overlay:rgba(0,0,0,0.8); --bg-overlay-light:rgba(0,0,0,0.4); --bg-overlay-medium:rgba(0,0,0,0.6); --bg-overlay-strong:rgba(0,0,0,0.8); --shadow-sm:0 1px 2px 0 rgba(0,0,0,0.3); --shadow-base:0 1px 3px 0 rgba(0,0,0,0.4),0 1px 2px 0 rgba(0,0,0,0.2); --shadow-md:0 4px 6px -1px rgba(0,0,0,0.4),0 2px 4px -1px rgba(0,0,0,0.2); --shadow-brand:0 10px 25px -5px rgba(0,0,0,0.6)} [data-theme="dark"] body {background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%); color:var(--text-primary)} [data-theme="dark"] .nav-links a {color:var(--text-primary)} [data-theme="dark"] .nav-links a:hover,[data-theme="dark"] .nav-links a.current {color:var(--primary-400)} [data-theme="dark"] .nav-links a::after,[data-theme="dark"] .nav-links a.current::after {background:var(--primary-400)} [data-theme="dark"] .logo {color:var(--text-primary)} /* Manual light mode class for JavaScript toggle */ [data-theme="light"] {/* Explicit light mode colors */ --text-primary:#ffffff; --text-secondary:#e2e8f0; --text-tertiary:#94a3b8; --text-on-light:#0f172a; --text-muted:#64748b; --bg-primary:#1a486c; --bg-secondary:#0F3450; --bg-surface:#2563eb; --bg-header:rgba(245,245,247,0.98); --bg-overlay:rgba(10,42,66,0.95); --bg-overlay-light:rgba(255,255,255,0.1); --bg-overlay-medium:rgba(255,255,255,0.2); --bg-overlay-strong:rgba(255,255,255,0.3); --shadow-sm:0 1px 2px 0 rgba(0,0,0,0.05); --shadow-base:0 1px 3px 0 rgba(0,0,0,0.1),0 1px 2px 0 rgba(0,0,0,0.06); --shadow-md:0 4px 6px -1px rgba(0,0,0,0.1),0 2px 4px -1px rgba(0,0,0,0.06); --shadow-brand:0 10px 25px -5px rgba(10,42,66,0.3)} [data-theme="light"] body {background:linear-gradient(135deg,var(--primary-light) 0%,var(--primary-bright) 100%); color:var(--text-primary)} [data-theme="light"] .nav-links a {color:var(--primary)} [data-theme="light"] .nav-links a:hover,[data-theme="light"] .nav-links a.current {color:var(--primary-accent)} [data-theme="light"] .nav-links a::after,[data-theme="light"] .nav-links a.current::after {background:var(--primary-accent)} [data-theme="light"] .logo {color:var(--primary)} body {font-family:'Manrope',sans-serif; background:linear-gradient(135deg,var(--primary-light) 0%,var(--primary-bright) 100%); color:var(--text-primary); line-height:1.6; min-height:100vh} .container {max-width:1200px; margin:0 auto; padding:0 20px} header {background:var(--bg-header); /* backdrop-filter:blur(10px); - Removed for better performance */ border-bottom:1px solid rgba(200,200,205,0.3); position:sticky; top:0; z-index:1500; /* Use will-change for sticky positioning optimization */ will-change:transform; transition:all 0.3s ease} /* Shrunk header state */ header.shrunk {transform:scale(1); /* Ensure proper rendering */ } header.shrunk nav {padding:0.5rem 0; gap:0.5rem} header.shrunk .logo-img {height:80px; /* 50% of original 160px */ } header.shrunk .nav-links a {font-size:calc(var(--font-sm) * 0.9); padding:0.25rem 0} header.shrunk .search-input {padding:0.4rem 0.8rem; font-size:0.85rem} nav {display:flex; flex-direction:column; gap:1rem; padding:1rem 0; position:relative} .nav-top {display:flex; justify-content:space-between; align-items:center; width:100%} .nav-bottom {display:flex; justify-content:center; align-items:center; width:100%} .logo {font-family:'Manrope',sans-serif; font-size:var(--font-lg); font-weight:700; color:var(--primary); /* Dark blue for light background */ text-decoration:none; white-space:nowrap; flex-shrink:1; display:block; min-width:0; font-kerning:auto; /* Professional logo typography */ letter-spacing:var(--kerning-brand); /* Refined brand spacing */ } .logo-img {height:160px; width:auto; max-width:500px; object-fit:contain; filter:brightness(1.2) contrast(1.1); transition:height 0.3s ease} .nav-top-right {display:flex; align-items:center; gap:1.5rem} .nav-links {display:flex; list-style:none; gap:2rem; margin:0; padding:0} .nav-links a {color:var(--primary); /* Dark blue text for light background */ text-decoration:none; font-weight:500; font-size:var(--font-sm); transition:all 0.3s ease; position:relative; padding:0.5rem 0; white-space:nowrap} .nav-links a:hover {color:var(--primary-accent); /* Bright blue on hover */ transform:translateY(-1px)} .nav-links a::after {content:''; position:absolute; bottom:0; left:0; width:0; height:2px; background:var(--primary-accent); /* Bright blue underline */ transition:width 0.3s ease} .nav-links a:hover::after {width:100%} .nav-links a.current {color:var(--primary-accent); /* Bright blue for active state */ font-weight:600} .nav-links a.current::after {width:100%; background:var(--primary-accent); /* Bright blue underline */ } /* Navigation Dropdown */ .nav-dropdown {position:relative} .dropdown-toggle {cursor:pointer} .nav-dropdown-menu {position:absolute; top:100%; left:0; background:rgba(26,72,108,0.95); /* backdrop-filter:blur(10px); - Removed for performance */ border:1px solid rgba(158,98,72,0.3); border-radius:4px; padding:0.5rem 0; min-width:200px; opacity:0; visibility:hidden; transform:translateY(-10px); transition:all 0.3s ease; z-index:200} .nav-dropdown:hover .nav-dropdown-menu {opacity:1; visibility:visible; transform:translateY(0)} .nav-dropdown-menu a {display:block; padding:0.7rem 1rem; color:var(--text-primary); text-decoration:none; font-size:var(--font-sm); transition:all 0.3s ease; border-bottom:none !important} .nav-dropdown-menu a::after {display:none} .nav-dropdown-menu a:hover {background:rgba(158,98,72,0.2); color:var(--complement-bright); transform:translateX(5px)} .hero {padding:4rem 0; text-align:center; background:linear-gradient(135deg,rgba(26,72,108,0.8) 0%,rgba(46,46,122,0.8) 100%),url('images/backgrounds/tim-trad-MGjthYt8wbA-unsplash.webp'); background-size:cover; background-position:center; background-repeat:no-repeat; position:relative; overflow:hidden; min-height:70vh; filter:sepia(8%) saturate(100%) hue-rotate(200deg) brightness(1.2) contrast(1.0)} .hero::before {content:''; position:absolute; top:-50%; left:-50%; width:200%; height:200%; background:radial-gradient(circle,rgba(114,66,0,0.1) 0%,transparent 70%); animation:rotate 20s linear infinite} /* Image optimization and mood filter effects */ .hero,.cluster-info,.focus-areas,.members-section,.contact-section {background-repeat:no-repeat; position:relative} .hero::before,.cluster-info::before,.focus-areas::before,.members-section::before,.contact-section::before {content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:inherit; filter:inherit; z-index:-1} /* Mood background filters for consistent colour scheme */ .mood-filter-blue {filter:sepia(10%) saturate(110%) hue-rotate(200deg) brightness(1.1) contrast(1.0)} .mood-filter-bronze {filter:sepia(15%) saturate(95%) hue-rotate(30deg) brightness(1.2) contrast(1.0)} .hero::after {content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(45deg,rgba(10,42,66,0.2),rgba(158,98,72,0.1)); pointer-events:none} .hero-content {position:relative; z-index:2} .hero h1 {font-family:'Manrope',sans-serif; font-size:var(--font-4xl); font-weight:800; margin-bottom:1rem; background:linear-gradient(135deg,white,var(--complement-bright)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; background-clip:text; text-shadow:0 0 30px rgba(114,66,0,0.3)} .hero p {font-size:var(--font-xl); margin-bottom:2rem; opacity:0.9; max-width:700px; margin-left:auto; margin-right:auto} .cta-button {display:inline-block; background:linear-gradient(135deg,var(--complement-accent),var(--complement-bright)); color:var(--text-primary); padding:1rem 2rem; text-decoration:none; border-radius:0; font-weight:600; transition:all 0.3s ease; box-shadow:0 10px 30px rgba(114,66,0,0.3); clip-path:polygon(0 0,calc(100% - 10px) 0,100% 100%,10px 100%)} .cta-button:hover {transform:translateY(-3px) skewX(-2deg); box-shadow:0 15px 40px rgba(114,66,0,0.4)} .cluster-info {padding:5rem 0; background:linear-gradient(135deg,rgba(15,52,80,0.85) 0%,rgba(20,82,122,0.85) 100%),url('images/backgrounds/kyle-williamson-cgou7qYvk6U-unsplash.webp'); background-size:cover; background-position:center; background-repeat:no-repeat; background-attachment:fixed; filter:sepia(8%) saturate(85%) hue-rotate(210deg) brightness(1.15) contrast(1.0)} .cluster-grid {display:grid; grid-template-columns:1fr 1fr; gap:4rem; align-items:center; margin-bottom:4rem} .cluster-text h2 {font-family:'Manrope',sans-serif; font-size:var(--font-3xl); margin-bottom:2rem; color:var(--text-primary)} .cluster-text p {margin-bottom:1.5rem; opacity:0.9; font-size:var(--font-lg)} .cluster-stats {background:linear-gradient(135deg,var(--secondary-2-accent),var(--secondary-2-bright)); padding:2rem; border-radius:0; border:1px solid rgba(114,66,0,0.2); /* backdrop-filter:blur(10px); - Removed for performance */ clip-path:polygon(0 0,calc(100% - 15px) 0,100% calc(100% - 15px),15px 100%,0 100%); display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem} .stat-item {text-align:center; margin:0} .stat-number {font-family:'Manrope',sans-serif; font-size:var(--font-3xl); font-weight:800; color:var(--complement-bright); display:block} .stat-label {font-size:var(--font-sm); opacity:0.8; text-transform:uppercase; letter-spacing:1px} .focus-areas {padding:5rem 0; background:linear-gradient(135deg,rgba(10,59,40,0.85) 0%,rgba(32,99,72,0.85) 100%),url('images/backgrounds/herve-papaux-1wdfL9QZTBs-unsplash.webp'); background-size:cover; background-position:center; background-repeat:no-repeat; background-attachment:fixed; filter:sepia(10%) saturate(80%) hue-rotate(195deg) brightness(1.2) contrast(1.0)} .focus-areas h2 {font-family:'Manrope',sans-serif; font-size:var(--font-3xl); text-align:center; margin-bottom:3rem; color:var(--text-primary)} .focus-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem} .focus-card {background:linear-gradient(135deg,var(--primary-accent),var(--secondary-2-accent)); padding:2rem; border-radius:0; border:1px solid rgba(114,66,0,0.2); transition:all 0.3s ease; position:relative; overflow:hidden; clip-path:polygon(0 0,calc(100% - 8px) 0,100% calc(100% - 8px),8px 100%,0 100%)} .focus-card::before {content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(114,66,0,0.1),transparent); transition:left 0.5s ease} .focus-card:hover::before {left:100%} .focus-card:hover {transform:translateY(-5px); box-shadow:0 20px 40px rgba(0,0,0,0.3)} .focus-card h3 {font-family:'Manrope',sans-serif; font-size:var(--font-xl); margin-bottom:1rem; color:var(--complement-bright); text-transform:uppercase; letter-spacing:1px} .members-section {padding:5rem 0; background:linear-gradient(135deg,rgba(15,52,80,0.8) 0%,rgba(31,31,67,0.8) 100%),url('images/backgrounds/matthew-smith-YbGSaBPbB-k-unsplash.webp'); background-size:cover; background-position:center; background-repeat:no-repeat; background-attachment:fixed; filter:sepia(12%) saturate(85%) hue-rotate(180deg) brightness(1.25) contrast(1.0)} .members-section h2 {font-family:'Manrope',sans-serif; font-size:var(--font-3xl); text-align:center; margin-bottom:3rem; color:var(--text-primary)} .resources-section h2 {font-family:'Manrope',sans-serif; font-size:var(--font-3xl); font-weight:800; text-align:center; margin-bottom:3rem; color:var(--text-primary)} .bottlenecks-section {padding:5rem 0; background:linear-gradient(135deg,rgba(31,31,67,0.8) 0%,rgba(20,82,114,0.8) 100%),url('images/backgrounds/yang-plasticine-WlXhG3S3l-E-unsplash.webp'); background-size:cover; background-position:center; background-repeat:no-repeat; filter:sepia(8%) saturate(85%) hue-rotate(200deg) brightness(1.1) contrast(1.0)} .bottlenecks-section h2 {font-family:'Manrope',sans-serif; font-size:var(--font-3xl); font-weight:800; text-align:center; margin-bottom:3rem; color:var(--text-primary)} .members-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.5rem} .member-category {background:rgba(26,72,108,0.7); padding:1.5rem; border-radius:0; border:1px solid rgba(158,98,72,0.3); text-align:center; transition:all 0.3s ease; cursor:pointer; clip-path:polygon(0 0,calc(100% - 5px) 0,100% calc(100% - 5px),5px 100%,0 100%)} .member-category:hover {background:rgba(87,50,0,0.2); transform:scale(1.05)} .member-category h3 {font-family:'Manrope',sans-serif; font-size:1.2rem; color:var(--complement-bright); margin-bottom:0.5rem} .contact-section {padding:4rem 0; background:linear-gradient(135deg,rgba(15,52,80,0.85) 0%,rgba(20,99,72,0.8) 100%),url('images/backgrounds/denys-nevozhai-HoSHJ7KCZdQ-unsplash.webp'); background-size:cover; background-position:center; background-repeat:no-repeat; text-align:center; filter:sepia(8%) saturate(90%) hue-rotate(190deg) brightness(1.2) contrast(1.0)} .contact-section h2 {font-family:'Manrope',sans-serif; font-size:2rem; margin-bottom:2rem; color:var(--text-primary)} .contact-info {font-size:var(--font-lg); margin-bottom:2rem} .contact-email {color:#ffffff; font-weight:700; text-decoration:none; font-weight:600} .contact-email:hover {text-decoration:underline} footer {background:var(--primary); padding:2rem 0; text-align:left; border-top:1px solid rgba(114,66,0,0.3)} @keyframes rotate {from {transform:rotate(0deg)} to {transform:rotate(360deg)} } /* Mobile Navigation */ .mobile-menu-toggle {display:none !important; background:var(--bg-overlay-light); border:1px solid rgba(255,255,255,0.2); color:var(--text-primary); font-size:1.2rem; cursor:pointer; padding:0.75rem; border-radius:8px; transition:all 0.3s ease; order:3; min-width:44px; min-height:44px; display:flex; align-items:center; justify-content:center} .mobile-menu-toggle:hover {background:rgba(114,66,0,0.2); transform:translateY(-1px)} .mobile-menu {display:none; position:fixed; top:0; left:0; width:100%; height:100vh; background:linear-gradient(135deg,var(--primary) 0%,var(--primary-accent) 100%); z-index:1001; padding:2rem; transform:translateX(-100%); transition:transform 0.3s ease-in-out; overflow-y:auto; visibility:hidden; opacity:0} .mobile-menu.active {transform:translateX(0); display:flex; flex-direction:column; justify-content:flex-start; align-items:center; padding-top:4rem; visibility:visible; opacity:1} .mobile-menu-close {position:absolute; top:1rem; right:1rem; background:none; border:1px solid rgba(158,98,72,0.3); color:var(--complement-bright); font-size:var(--font-xl); cursor:pointer; padding:0.5rem; border-radius:4px; transition:all 0.3s} .mobile-menu-close:hover {background:rgba(114,66,0,0.2)} .mobile-nav-links {list-style:none; text-align:center; margin:0; padding:0; width:100%} .mobile-nav-links li {margin:2rem 0; opacity:0; transform:translateY(20px); animation:fadeInUp 0.5s ease forwards} .mobile-nav-links li:nth-child(1) {animation-delay:0.1s} .mobile-nav-links li:nth-child(2) {animation-delay:0.2s} .mobile-nav-links li:nth-child(3) {animation-delay:0.3s} .mobile-nav-links li:nth-child(4) {animation-delay:0.4s} .mobile-nav-links li:nth-child(5) {animation-delay:0.5s} .mobile-nav-links li:nth-child(6) {animation-delay:0.6s} .mobile-nav-links li:nth-child(7) {animation-delay:0.7s} .mobile-nav-links li:nth-child(8) {animation-delay:0.8s} .mobile-nav-links a {color:var(--text-primary); text-decoration:none; font-size:var(--font-lg); font-weight:600; transition:all 0.3s; display:block; padding:1rem; border-radius:8px; position:relative; overflow:hidden} .mobile-nav-links a::before {content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(114,66,0,0.2),transparent); transition:left 0.5s ease} .mobile-nav-links a:hover::before {left:100%} .mobile-nav-links a:hover {color:var(--complement-bright); background:rgba(114,66,0,0.1); transform:translateX(10px)} @keyframes fadeInUp {to {opacity:1; transform:translateY(0)} } /* Search Functionality */ .search-container {position:relative; order:1; flex-shrink:0} .search-input {background:rgba(26,72,108,0.6); border:1px solid rgba(158,98,72,0.3); color:var(--text-primary); padding:0.5rem 1rem; border-radius:20px; font-size:var(--font-sm); width:180px; transition:all 0.3s} .search-input:focus {outline:none; border-color:var(--complement-bright); box-shadow:0 0 10px rgba(114,66,0,0.3); width:220px} .search-input::placeholder {color:rgba(255,255,255,0.6)} .search-results {position:absolute; top:100%; left:0; right:0; background:var(--primary-accent); border:1px solid rgba(158,98,72,0.3); border-radius:8px; max-height:300px; overflow-y:auto; z-index:1000; display:none} .search-results.active {display:block} .search-result-item {padding:0.8rem 1rem; border-bottom:1px solid rgba(114,66,0,0.2); cursor:pointer; transition:background 0.3s} .search-result-item:hover {background:rgba(114,66,0,0.2)} .search-result-item:last-child {border-bottom:none} /* Language Selector */ .language-selector {position:relative; order:2; flex-shrink:0} .language-toggle {background:none; border:1px solid rgba(158,98,72,0.3); color:var(--complement-bright); padding:0.4rem 0.8rem; border-radius:4px; cursor:pointer; font-size:0.8rem; transition:all 0.3s; white-space:nowrap} .language-toggle:hover {background:rgba(114,66,0,0.2)} .language-dropdown {position:absolute; top:100%; right:0; background:var(--primary-accent); border:1px solid rgba(158,98,72,0.3); border-radius:4px; min-width:120px; z-index:1000; display:none} .language-dropdown.active {display:block} .language-option {padding:0.5rem 1rem; cursor:pointer; transition:background 0.3s; color:var(--text-primary); text-decoration:none; display:block} .language-option:hover {background:rgba(114,66,0,0.2)} /* Performance Metrics Cards */ .metrics-section {padding:3rem 0; background:linear-gradient(135deg,rgba(15,69,48,0.85) 0%,rgba(32,99,72,0.85) 100%),url('images/backgrounds/h-co-1qlMnKfql5c-unsplash.webp'); background-size:cover; background-position:center; filter:sepia(5%) saturate(90%) hue-rotate(150deg) brightness(1.1) contrast(1.0)} .metrics-title {font-family:'Manrope',sans-serif; font-size:var(--font-3xl); font-weight:800; text-align:center; margin-bottom:2rem; color:var(--text-primary)} .metrics-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:2rem; margin-top:2rem} .metric-card {background:linear-gradient(135deg,var(--secondary-1-accent),var(--secondary-1-bright)); padding:2rem; border-radius:0; border:1px solid rgba(114,66,0,0.2); text-align:center; transition:all 0.3s ease; clip-path:polygon(0 0,calc(100% - 10px) 0,100% calc(100% - 10px),10px 100%,0 100%)} .metric-card:hover {transform:translateY(-5px); box-shadow:0 20px 40px rgba(0,0,0,0.3)} .metric-value {font-family:'Manrope',sans-serif; font-size:3rem; font-weight:800; color:var(--complement-bright); display:block; margin-bottom:0.5rem} .metric-label {font-size:var(--font-sm); opacity:0.9; text-transform:uppercase; letter-spacing:1px} .metric-trend {font-size:0.8rem; margin-top:0.5rem; opacity:0.8} .trend-up {color:var(--success)} .trend-down {color:var(--error)} /* Interactive Elements */ .interactive-card {cursor:pointer; transition:all 0.3s ease} .interactive-card:hover {transform:scale(1.02)} .modal-overlay {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.8); z-index:2000; display:none; justify-content:center; align-items:center} .modal-overlay.active {display:flex} .modal-content {background:linear-gradient(135deg,var(--primary-accent),var(--secondary-2-accent)); padding:2rem; border-radius:0; max-width:90%; max-height:90%; overflow-y:auto; border:1px solid rgba(158,98,72,0.3); clip-path:polygon(0 0,calc(100% - 15px) 0,100% calc(100% - 15px),15px 100%,0 100%)} .modal-close {position:absolute; top:1rem; right:1rem; background:none; border:none; color:var(--complement-bright); font-size:var(--font-xl); cursor:pointer} /* Enhanced Loading States */ .loading {display:inline-block; width:20px; height:20px; border:3px solid rgba(114,66,0,0.3); border-radius:50%; border-top:3px solid var(--complement-bright); animation:spin 1s linear infinite} .loading-large {width:40px; height:40px; border-width:4px} .loading-overlay {position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.5); display:flex; align-items:center; justify-content:center; z-index:9999; opacity:0; visibility:hidden; transition:opacity 0.3s ease,visibility 0.3s ease} .loading-overlay.active {opacity:1; visibility:visible} .loading-content {background:var(--primary); padding:2rem; border-radius:8px; text-align:center; color:var(--text-primary); box-shadow:0 10px 30px rgba(0,0,0,0.3)} .loading-text {margin-top:1rem; font-size:var(--font-lg)} /* Error States and Dismissal */ .error-message {background:var(--error); color:var(--text-primary); padding:1rem; border-radius:8px; margin:1rem 0; position:relative; display:flex; align-items:center; gap:1rem; box-shadow:0 4px 12px rgba(239,68,68,0.3)} .error-message.dismissible {padding-right:3rem} .error-dismiss {position:absolute; top:50%; right:1rem; transform:translateY(-50%); background:none; border:none; color:var(--text-primary); font-size:1.2rem; cursor:pointer; padding:0.5rem; border-radius:4px; transition:background 0.3s ease} .error-dismiss:hover {background:var(--bg-overlay-medium)} .error-fallback {background:var(--primary-light); border:2px dashed var(--complement-bright); padding:2rem; text-align:center; border-radius:8px; color:var(--text-primary)} .error-fallback button {margin-top:1rem; background:var(--complement-bright); color:var(--text-primary); border:none; padding:0.75rem 1.5rem; border-radius:4px; cursor:pointer; transition:background 0.3s ease} .error-fallback button:hover {background:var(--complement)} /* Success States */ .success-message {background:var(--success); color:var(--text-primary); padding:1rem; border-radius:8px; margin:1rem 0; display:flex; align-items:center; gap:1rem; box-shadow:0 4px 12px rgba(34,197,94,0.3)} /* Warning States */ .warning-message {background:var(--warning); color:var(--text-primary); padding:1rem; border-radius:8px; margin:1rem 0; display:flex; align-items:center; gap:1rem; box-shadow:0 4px 12px rgba(245,158,11,0.3)} @keyframes spin {0% {transform:rotate(0deg)} 100% {transform:rotate(360deg)} } /* State transitions */ .fade-in {animation:fadeIn 0.3s ease-in-out} .fade-out {animation:fadeOut 0.3s ease-in-out} @keyframes fadeIn {from {opacity:0; transform:translateY(10px)} to {opacity:1; transform:translateY(0)} } @keyframes fadeOut {from {opacity:1; transform:translateY(0)} to {opacity:0; transform:translateY(-10px)} } border-top-color:var(--complement-bright); animation:spin 1s ease-in-out infinite} @keyframes spin {to {transform:rotate(360deg)} } /* Progressive Web App Styles */ .pwa-install-prompt {position:fixed; bottom:1rem; left:1rem; right:1rem; background:linear-gradient(135deg,var(--complement-accent),var(--complement-bright)); color:var(--text-primary); padding:1rem; border-radius:0; display:none; align-items:center; justify-content:space-between; z-index:1000; clip-path:polygon(0 0,calc(100% - 10px) 0,100% calc(100% - 10px),10px 100%,0 100%)} .pwa-install-prompt.show {display:flex} .pwa-install-btn {background:var(--primary); color:var(--text-primary); border:none; padding:0.5rem 1rem; border-radius:4px; cursor:pointer; font-weight:600} .pwa-dismiss-btn {background:none; border:none; color:var(--text-primary); cursor:pointer; opacity:0.7; margin-left:1rem} @media (max-width:1024px) {.nav-container {gap:1.5rem; margin-left:1rem} .nav-links {gap:1.5rem} .nav-links a {font-size:var(--font-sm); padding:0.4rem 0} .search-input {width:140px; font-size:var(--font-sm)} .search-input:focus {width:170px} .language-toggle {font-size:var(--font-sm); padding:0.4rem 0.7rem} .logo {font-size:1.2rem} } @media (max-width:900px) {.nav-links {gap:1rem} .nav-links a {font-size:0.8rem} .search-input {width:120px} .search-input:focus {width:150px} } /* Tablet styles */ @media (max-width:1024px) and (min-width:769px) {.bottlenecks-list,.events-list {grid-template-columns:repeat(2,1fr); gap:1.2rem} } @media (max-width:768px) {.nav-bottom {display:none} .mobile-menu-toggle {display:block !important} .logo-img {height:80px; max-width:280px} .nav-top {flex-wrap:nowrap; overflow:hidden} .nav-top-right {gap:0.5rem; flex-shrink:0; min-width:auto} .search-input {width:100px; padding:0.4rem 0.8rem; font-size:0.8rem} } @media (max-width:480px) {.logo-img {height:60px; max-width:200px} .nav-top-right {gap:0.3rem} .search-input {width:80px; padding:0.3rem 0.5rem} .mobile-menu-toggle {padding:0.4rem 0.6rem; font-size:1rem} .language-toggle {padding:0.3rem 0.6rem; font-size:0.75rem} .nav-top-right {gap:1rem} } .hero h1 {font-size:var(--font-3xl)} .cluster-grid {grid-template-columns:1fr; gap:2rem} .cluster-stats {grid-template-columns:repeat(2,1fr); gap:1rem; padding:1.5rem} .stat-number {font-size:2rem} .focus-grid {grid-template-columns:1fr} .metrics-grid {grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:1rem} .metric-card {padding:1.5rem} .metric-value {font-size:2rem} } /* Defense Tech Events & Intelligence Section */ .events-section {padding:6rem 0 5rem 0; background:linear-gradient(135deg,rgba(26,72,108,0.8) 0%,rgba(31,31,67,0.8) 100%),url('images/backgrounds/nat-hwcMLF374mY-unsplash.webp'); background-size:cover; background-position:center; background-repeat:no-repeat; background-attachment:fixed; position:relative; filter:sepia(10%) saturate(85%) hue-rotate(200deg) brightness(1.1) contrast(1.0)} .events-section::after {content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(45deg,rgba(26,72,108,0.2),rgba(158,98,72,0.1)); pointer-events:none} .events-section .container {position:relative; z-index:2} .events-section h2 {font-family:'Manrope',sans-serif; font-size:var(--font-3xl); font-weight:800; text-align:center; margin-bottom:3rem; color:var(--text-primary); position:relative; z-index:2} /* Event Filters */ .event-filters {display:flex; justify-content:center; flex-wrap:wrap; gap:1rem; margin-bottom:3rem; position:relative; z-index:2} /* Events Statistics */ .events-stats {display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-bottom:4rem; position:relative; z-index:2} .events-stats .stat-card {background:linear-gradient(135deg,rgba(26,72,108,0.8),rgba(46,46,122,0.8)); border:1px solid rgba(158,98,72,0.3); padding:2rem 1.5rem; border-radius:0; clip-path:polygon(0 0,calc(100% - 8px) 0,100% calc(100% - 8px),8px 100%,0 100%); transition:all 0.3s ease; text-align:center; position:relative; overflow:hidden} .events-stats .stat-card::before {content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(158,98,72,0.1),transparent); transition:left 0.5s} .events-stats .stat-card:hover::before {left:100%} .events-stats .stat-card:hover {transform:translateY(-5px); box-shadow:0 8px 25px rgba(158,98,72,0.2); border-color:var(--complement-bright)} .stat-icon {font-size:var(--font-3xl); margin-bottom:1rem; display:block} .stat-content {position:relative; z-index:1} .stat-number {display:block; font-family:'Manrope',sans-serif; font-size:var(--font-3xl); font-weight:800; color:var(--complement-bright); margin-bottom:0.5rem; line-height:1} .stat-label {font-size:var(--font-sm); color:rgba(255,255,255,0.9); font-weight:500; text-transform:uppercase; letter-spacing:0.5px} /* Featured Events */ .featured-events {margin-bottom:4rem; position:relative; z-index:2} .events-list {display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-bottom:2rem} .section-subtitle {font-family:'Manrope',sans-serif; font-size:1.8rem; font-weight:700; text-align:center; margin-bottom:2rem; color:var(--complement-bright)} /* Event Insights Panel */ .event-insights {margin-bottom:4rem; position:relative; z-index:2} .insight-cards {display:grid; grid-template-columns:repeat(3,1fr); gap:2rem} .insight-card {background:rgba(0,18,33,0.4); border:1px solid rgba(158,98,72,0.2); padding:2rem; border-radius:0; clip-path:polygon(0 0,calc(100% - 10px) 0,100% calc(100% - 10px),10px 100%,0 100%); text-align:center; transition:all 0.3s ease} .insight-card:hover {background:rgba(158,98,72,0.1); border-color:var(--complement-bright); transform:translateY(-3px)} .insight-icon {font-size:3rem; margin-bottom:1rem; display:block} .insight-card h4 {font-family:'Manrope',sans-serif; font-size:var(--font-lg); font-weight:600; margin-bottom:1rem; color:var(--complement-bright)} .insight-card p {font-size:0.95rem; color:rgba(255,255,255,0.8); line-height:1.5} /* Events Actions */ .events-actions {display:flex; justify-content:center; gap:1.5rem; flex-wrap:wrap; position:relative; z-index:2; margin-top:3rem; margin-bottom:2rem} .cta-button.primary {background:linear-gradient(135deg,var(--complement-accent),var(--complement-bright)); border:1px solid var(--complement-bright)} .cta-button.secondary {background:rgba(26,72,108,0.8); border:1px solid rgba(158,98,72,0.4); color:var(--text-primary)} .cta-button.outline {background:transparent; border:2px solid var(--complement-bright); color:var(--complement-bright)} .cta-button.outline:hover {background:var(--complement-bright); color:var(--text-primary)} .events-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; margin-bottom:2rem; position:relative; z-index:2} /* Bottlenecks Cards */ .bottleneck-card {background:linear-gradient(135deg,var(--primary-accent),var(--secondary-2-accent)); border-radius:0; padding:2rem; border:1px solid rgba(158,98,72,0.3); position:relative; transition:all 0.3s ease; clip-path:polygon(0 0,calc(100% - 12px) 0,100% calc(100% - 12px),12px 100%,0 100%); color:var(--text-primary); overflow:hidden; margin-bottom:1.5rem} .bottleneck-card::before {content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(135deg,rgba(158,98,72,0.1),rgba(26,72,108,0.1)); opacity:0; transition:opacity 0.3s ease; pointer-events:none} .bottleneck-card:hover::before {opacity:1} .bottleneck-card:hover {transform:translateY(-4px); box-shadow:0 8px 25px rgba(0,0,0,0.3); border-color:rgba(158,98,72,0.5)} .bottleneck-header {display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1rem; flex-wrap:wrap; gap:0.5rem; position:relative; z-index:1} .tag.severity {background:rgba(239,68,68,0.3); color:var(--error-light); border:1px solid var(--error); display:flex; align-items:center; gap:0.3rem; font-weight:600} .tag.impact {background:rgba(255,255,255,0.15); color:var(--complement-bright); border:1px solid rgba(255,255,255,0.3); font-weight:600} .bottleneck-content {position:relative; z-index:1} .bottleneck-title {font-family:'Manrope',sans-serif; font-size:1.4rem; font-weight:700; color:var(--text-primary); margin-bottom:0.8rem; line-height:1.3} .bottleneck-meta {display:flex; align-items:center; gap:1rem; margin-bottom:1rem; flex-wrap:wrap} .bottleneck-category,.bottleneck-priority {display:flex; align-items:center; gap:0.3rem; color:rgba(255,255,255,0.9); font-size:var(--font-sm); font-weight:500} .bottleneck-description {color:rgba(255,255,255,0.95); line-height:1.6; margin-bottom:1rem; font-size:1rem} .bottleneck-technologies {display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:1rem} .tag.tech {background:var(--interactive-secondary); color:var(--complement-bright); border:1px solid var(--complement-accent); font-weight:500} .bottleneck-actions {display:flex; justify-content:flex-start; margin-top:1rem} .bottleneck-btn {background:var(--interactive-primary); color:var(--text-primary); border:1px solid var(--interactive-primary); padding:0.6rem 1.2rem; border-radius:0 !important; cursor:pointer; transition:all 0.3s; font-size:var(--font-sm); text-decoration:none; display:inline-block; clip-path:polygon(0 0,calc(100% - 6px) 0,100% calc(100% - 6px),6px 100%,0 100%) !important} .bottleneck-btn:hover {background:var(--complement-bright); border-color:var(--complement-bright); transform:translateY(-2px); color:var(--primary-dark)} .bottlenecks-list {display:grid; grid-template-columns:repeat(3,1fr); gap:1.5rem; margin-bottom:2rem} .event-card {background:linear-gradient(135deg,var(--primary-accent),var(--secondary-2-accent)); border-radius:0; padding:2rem; border:1px solid rgba(158,98,72,0.3); position:relative; transition:all 0.3s ease; clip-path:polygon(0 0,calc(100% - 12px) 0,100% calc(100% - 12px),12px 100%,0 100%); color:var(--text-primary); overflow:hidden} .event-card::before {content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(158,98,72,0.1),transparent); transition:left 0.5s ease} .event-card:hover::before {left:100%} .event-card:hover {transform:translateY(-5px); box-shadow:0 20px 40px rgba(0,0,0,0.3)} /* Enhanced Event Card Elements */ .event-header {display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:1.5rem; position:relative; z-index:1} .event-type-badge {display:flex; align-items:center; gap:0.5rem; background:rgba(158,98,72,0.3); border:1px solid rgba(158,98,72,0.4); padding:0.5rem 1rem; border-radius:0; clip-path:polygon(0 0,calc(100% - 6px) 0,100% calc(100% - 6px),6px 100%,0 100%)} .event-type-icon {font-size:1.2rem} .event-type-text {font-size:0.8rem; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; color:var(--complement-bright)} .featured-badge {background:linear-gradient(135deg,var(--complement-accent),var(--complement-bright)); color:var(--text-primary); padding:0.3rem 0.8rem; border-radius:0; font-size:0.7rem; font-weight:600; text-transform:uppercase; letter-spacing:0.5px; clip-path:polygon(0 0,calc(100% - 4px) 0,100% calc(100% - 4px),4px 100%,0 100%); box-shadow:0 2px 8px rgba(158,98,72,0.3)} .featured-event {border:2px solid var(--complement-bright); box-shadow:0 8px 25px rgba(158,98,72,0.2)} .past-event {opacity:0.6; filter:grayscale(30%)} .event-year {font-size:0.8rem; color:rgba(255,255,255,0.7); margin-top:0.2rem} .event-meta {display:flex; flex-direction:column; gap:0.8rem; margin:1.5rem 0; position:relative; z-index:1} .event-status {display:flex; align-items:center; gap:0.5rem} .status-indicator {width:8px; height:8px; border-radius:50%; display:inline-block} .status-indicator.registration-open {background:var(--success); box-shadow:0 0 8px rgba(34,197,94,0.5)} .status-indicator.upcoming {background:var(--primary-accent); box-shadow:0 0 8px rgba(59,130,246,0.5)} .status-indicator.planning {background:var(--warning); box-shadow:0 0 8px rgba(245,158,11,0.5)} .status-indicator.call-for-applications {background:var(--secondary-2-bright); box-shadow:0 0 8px rgba(139,92,246,0.5)} .status-text {font-size:0.8rem; color:rgba(255,255,255,0.8); font-weight:500} .location-icon,.location-text {color:rgba(255,255,255,0.8)} .event-btn.primary {background:linear-gradient(135deg,var(--complement-accent),var(--complement-bright)); border:1px solid var(--complement-bright)} .event-btn.disabled {background:rgba(100,100,100,0.5); border:1px solid rgba(100,100,100,0.3); color:rgba(255,255,255,0.5); cursor:not-allowed; pointer-events:none} .event-date {display:flex; align-items:center; gap:1rem; margin-bottom:1rem} .event-day {background:var(--complement-bright); color:var(--text-primary); padding:0.5rem 1rem; border-radius:0; font-weight:700; font-size:1.2rem; clip-path:polygon(0 0,calc(100% - 6px) 0,100% calc(100% - 6px),6px 100%,0 100%)} .event-month-year {color:var(--complement-bright); font-weight:600} .event-title {font-family:'Manrope',sans-serif; font-size:1.4rem; font-weight:700; margin-bottom:1rem; color:var(--text-primary)} .event-location {display:flex; align-items:center; gap:0.5rem; margin-bottom:1rem; color:rgba(255,255,255,0.8); font-size:var(--font-sm)} .event-description {color:rgba(255,255,255,0.9); line-height:1.6; margin-bottom:1.5rem} .event-type {display:inline-block; background:rgba(158,98,72,0.3); color:var(--complement-bright); padding:0.3rem 0.8rem; border-radius:0; font-size:0.8rem; font-weight:600; margin-bottom:1rem; clip-path:polygon(0 0,calc(100% - 4px) 0,100% calc(100% - 4px),4px 100%,0 100%)} .event-actions {display:flex; gap:1rem; margin-top:1.5rem} .event-btn {background:linear-gradient(135deg,var(--complement-accent),var(--complement-bright)); color:var(--text-primary); border:none; padding:0.6rem 1.2rem; border-radius:0; cursor:pointer; transition:all 0.3s; font-weight:600; text-decoration:none; clip-path:polygon(0 0,calc(100% - 6px) 0,100% 100%,6px 100%); font-size:var(--font-sm)} .event-btn:hover {transform:translateY(-2px); box-shadow:0 8px 20px rgba(158,98,72,0.3)} .event-btn.secondary {background:transparent; border:1px solid rgba(158,98,72,0.5); color:var(--complement-bright)} .view-all-events {text-align:center; margin-top:2rem; position:relative; z-index:2} @media (max-width:768px) {.events-section {padding:4rem 0} .events-section h2 {font-size:2rem; margin-bottom:2rem} .bottlenecks-section {padding:4rem 0} .bottlenecks-section h2 {font-size:2rem; margin-bottom:2rem} /* Mobile Event Filters */ .event-filters {flex-direction:column; align-items:center; gap:0.8rem; margin-bottom:2rem} /* Mobile Event Statistics */ .events-stats {grid-template-columns:repeat(2,1fr); gap:1rem; margin-bottom:3rem} .events-stats .stat-card {padding:1.5rem 1rem} .stat-number {font-size:2rem} .stat-icon {font-size:2rem} /* Mobile Featured Events */ .featured-events {margin-bottom:3rem} .section-subtitle {font-size:var(--font-xl); margin-bottom:1.5rem} .events-grid {grid-template-columns:1fr; gap:1.5rem} /* Mobile Bottleneck Cards */ .bottleneck-card {padding:1.2rem; margin-bottom:1rem} .bottleneck-header {flex-direction:column; align-items:flex-start; gap:0.8rem} .bottleneck-meta {flex-direction:column; align-items:flex-start; gap:0.5rem} .bottleneck-title {font-size:1.2rem} /* Mobile Grid Layouts */ .bottlenecks-list {grid-template-columns:1fr; gap:1rem} .events-list {grid-template-columns:1fr; gap:1rem} /* Mobile Event Cards */ .event-card {padding:1.5rem} .event-header {flex-direction:column; gap:0.8rem; align-items:flex-start; margin-bottom:1rem} .event-type-badge {width:100%; justify-content:center} .featured-badge {align-self:flex-start} .event-date {flex-direction:column; align-items:flex-start; gap:0.3rem; margin-bottom:1rem} .event-actions {flex-direction:column; gap:0.8rem} .event-btn {text-align:center; width:100%} /* Mobile Event Insights */ .event-insights {margin-bottom:3rem} .insight-cards {grid-template-columns:1fr; gap:1.5rem} .insight-card {padding:1.5rem} .insight-icon {font-size:var(--font-3xl)} .insight-card h4 {font-size:var(--font-lg)} /* Mobile Events Actions */ .events-actions {flex-direction:column; align-items:center; gap:1rem} .cta-button {width:80%; text-align:center} } @media (max-width:480px) {.events-section {padding:3rem 0} .events-section h2 {font-size:1.8rem} .events-stats {grid-template-columns:1fr; gap:1rem} .cluster-stats {grid-template-columns:1fr; gap:0.8rem; padding:1rem} .cta-button {width:95%} } /* Member Directory Styles */ .member-filters {display:flex; justify-content:center; flex-wrap:wrap; gap:1rem; margin:2rem 0} .filter-btn {padding:0.6rem 1.2rem; border:2px solid #ffffff; background:rgba(255,255,255,0.1); color:#ffffff; font-weight:600; border-radius:0; cursor:pointer; transition:all 0.3s; font-size:var(--font-sm); clip-path:polygon(0 0,calc(100% - 6px) 0,100% calc(100% - 6px),6px 100%,0 100%)} .filter-btn:hover,.filter-btn.active {background:#ffffff; color:#0A2A42; border-color:#ffffff; transform:translateY(-2px)} /* Marketplace Styles */ .marketplace-section {padding:5rem 0; background:linear-gradient(135deg,rgba(31,31,67,0.8) 0%,rgba(26,72,108,0.8) 100%),url('images/backgrounds/ahmet-yuksek-P-_TuQhzVDo-unsplash.webp'); background-size:cover; background-position:center; filter:sepia(8%) saturate(90%) hue-rotate(220deg) brightness(1.2) contrast(1.0)} .marketplace-tabs {display:flex; justify-content:center; gap:1rem; margin:2rem 0; flex-wrap:wrap} .tab-btn {padding:0.8rem 1.5rem; border:1px solid rgba(158,98,72,0.3); background:transparent; color:var(--text-primary); cursor:pointer; transition:all 0.3s; border-radius:0; clip-path:polygon(0 0,calc(100% - 8px) 0,100% calc(100% - 8px),8px 100%,0 100%)} .tab-btn:hover,.tab-btn.active {background:linear-gradient(135deg,var(--complement-accent),var(--complement-bright)); border-color:var(--complement-bright)} .tab-content {display:none} .tab-content.active {display:block} .opportunity-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); gap:2rem; margin-top:2rem} .opportunity-card {background:linear-gradient(135deg,var(--primary-accent),var(--secondary-2-accent)); padding:2rem; border-radius:0; border:1px solid rgba(114,66,0,0.2); transition:all 0.3s ease; clip-path:polygon(0 0,calc(100% - 10px) 0,100% calc(100% - 10px),10px 100%,0 100%)} .opportunity-card:hover {transform:translateY(-5px); box-shadow:0 20px 40px rgba(0,0,0,0.3)} .opportunity-tags {display:flex; gap:0.5rem; margin:1rem 0; flex-wrap:wrap} .tag {background:rgba(114,66,0,0.3); color:var(--complement-bright); padding:0.2rem 0.6rem; border-radius:0; font-size:0.8rem; clip-path:polygon(0 0,calc(100% - 4px) 0,100% calc(100% - 4px),4px 100%,0 100%)} .ai-matching-interface {text-align:center; max-width:600px; margin:0 auto} .matching-input {width:100%; min-height:120px; padding:1rem; background:rgba(26,72,108,0.4); border:1px solid rgba(158,98,72,0.3); color:var(--text-primary); border-radius:0; resize:vertical; margin:1rem 0; font-family:inherit; clip-path:polygon(0 0,calc(100% - 8px) 0,100% calc(100% - 8px),8px 100%,0 100%)} .matching-input::placeholder {color:rgba(255,255,255,0.6)} .matching-results {margin-top:2rem; text-align:left} /* Resources Section */ .resources-section {padding:3rem 0; background:linear-gradient(135deg,rgba(15,69,48,0.8) 0%,rgba(20,99,72,0.8) 100%),url('images/backgrounds/barbara-zandoval-nfA9WdbTfak-unsplash.webp'); background-size:cover; background-position:center; filter:sepia(10%) saturate(80%) hue-rotate(120deg) brightness(1.15) contrast(1.0)} /* Reduce padding when resources section is empty */ .resources-section.empty {padding:2rem 0; min-height:auto} .resources-section.empty .container {display:flex; flex-direction:column; align-items:center; text-align:center} .resources-section.empty h2 {margin-bottom:1rem; opacity:0.7} .resources-categories {display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:1.5rem; margin-top:1.5rem} .resource-category {background:linear-gradient(135deg,var(--secondary-1-accent),var(--secondary-1-bright)); padding:1.5rem; border-radius:0; border:1px solid rgba(114,66,0,0.2); transition:all 0.3s ease; clip-path:polygon(0 0,calc(100% - 10px) 0,100% calc(100% - 10px),10px 100%,0 100%)} .resource-category:hover {transform:translateY(-5px); box-shadow:0 20px 40px rgba(0,0,0,0.3)} .resource-category h3 {font-family:'Manrope',sans-serif; color:var(--complement-bright); margin-bottom:1rem; font-size:1.2rem} .resource-category ul {list-style:none} .resource-category li {margin-bottom:0.8rem} .resource-category a {color:var(--text-primary); text-decoration:none; transition:color 0.3s; opacity:0.9} .resource-category a:hover {color:var(--complement-bright); opacity:1} /* Technology Showcase */ .tech-showcase {padding:5rem 0; background:linear-gradient(135deg,rgba(15,52,80,0.8) 0%,rgba(31,31,67,0.8) 100%),url('images/backgrounds/jordan-andrews-k7W1jtKouM4-unsplash.webp'); background-size:cover; background-position:center; filter:sepia(10%) saturate(85%) hue-rotate(240deg) brightness(1.2) contrast(1.0)} .tech-demo-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(350px,1fr)); gap:2rem; margin-top:2rem} .tech-demo-card {background:linear-gradient(135deg,var(--primary-accent),var(--secondary-2-accent)); padding:2rem; border-radius:0; border:1px solid rgba(114,66,0,0.2); transition:all 0.3s ease; clip-path:polygon(0 0,calc(100% - 12px) 0,100% calc(100% - 12px),12px 100%,0 100%); position:relative; overflow:hidden} .tech-demo-card::before {content:''; position:absolute; top:0; left:-100%; width:100%; height:100%; background:linear-gradient(90deg,transparent,rgba(114,66,0,0.1),transparent); transition:left 0.5s ease} .tech-demo-card:hover::before {left:100%} .tech-demo-card:hover {transform:translateY(-5px); box-shadow:0 20px 40px rgba(0,0,0,0.3)} .demo-video-placeholder {width:100%; height:200px; background:rgba(26,72,108,0.4); border:1px solid rgba(158,98,72,0.3); display:flex; align-items:center; justify-content:center; margin-bottom:1rem; color:var(--complement-bright); font-size:3rem; clip-path:polygon(0 0,calc(100% - 8px) 0,100% calc(100% - 8px),8px 100%,0 100%)} /* PWA Install Prompt */ .pwa-install-prompt {animation:slideUp 0.3s ease-out} @keyframes slideUp {from {transform:translateY(100%); opacity:0} to {transform:translateY(0); opacity:1} } /* Additional Interactive Elements */ .capability-search {display:flex; gap:1rem; margin-bottom:2rem; justify-content:center} .search-btn {background:linear-gradient(135deg,var(--complement-accent),var(--complement-bright)); color:var(--text-primary); border:none; padding:0.5rem 1.5rem; border-radius:0; cursor:pointer; transition:all 0.3s; clip-path:polygon(0 0,calc(100% - 6px) 0,100% 100%,6px 100%)} .search-btn:hover {transform:translateY(-2px); box-shadow:0 8px 20px rgba(114,66,0,0.3)} .project-status-filter {display:flex; justify-content:center; gap:1rem; margin-bottom:2rem} .status-btn {padding:0.6rem 1.2rem; border:1px solid rgba(158,98,72,0.3); background:transparent; color:var(--text-primary); cursor:pointer; transition:all 0.3s; border-radius:0; clip-path:polygon(0 0,calc(100% - 6px) 0,100% calc(100% - 6px),6px 100%,0 100%)} .status-btn:hover,.status-btn.active {background:var(--complement-bright); border-color:var(--complement-bright)} /* Responsive Enhancements */ @media (max-width:1024px) {.marketplace-tabs {justify-content:flex-start; overflow-x:auto; padding-bottom:0.5rem} .tab-btn {min-width:120px; text-align:center} /* Tablet breakpoint for cluster stats */ .cluster-stats {grid-template-columns:repeat(2,1fr); gap:1.2rem} } @media (max-width:768px) {.member-filters {justify-content:flex-start; overflow-x:auto; padding-bottom:0.5rem} .filter-btn {min-width:100px; text-align:center} .resources-categories {grid-template-columns:1fr} .opportunity-grid {grid-template-columns:1fr} .tech-demo-grid {grid-template-columns:1fr} .capability-search {flex-direction:column} .project-status-filter {flex-direction:column; align-items:center} } /* Mobile menu improvements */ .mobile-insights-group {border-bottom:1px solid rgba(158,98,72,0.2)} .mobile-group-title {display:block; color:var(--complement-bright); font-size:1rem; font-weight:600; padding:1rem 0 0.5rem 0; margin-bottom:0.5rem} .mobile-sublinks {list-style:none; padding-left:1rem; margin:0} .mobile-sublinks li {opacity:0; animation:slideInLeft 0.5s ease-out forwards} .mobile-sublinks a {font-size:1rem; padding:0.75rem 0; color:rgba(255,255,255,0.9); border-bottom:1px solid rgba(158,98,72,0.1)} .mobile-sublinks a:hover {color:var(--complement-bright); background:rgba(158,98,72,0.15)} .mobile-language-selector {margin-top:2rem; padding-top:1.5rem; border-top:1px solid rgba(158,98,72,0.3)} .mobile-language-title {display:block; color:var(--complement-bright); font-size:1rem; font-weight:600; margin-bottom:1rem; text-align:center} .mobile-language-buttons {display:flex; flex-direction:column; gap:0.75rem; align-items:center} .mobile-lang-btn {background:rgba(114,66,0,0.2); border:1px solid rgba(114,66,0,0.4); color:var(--text-primary); padding:0.75rem 1.5rem; border-radius:8px; cursor:pointer; font-size:0.95rem; font-weight:500; width:180px; text-align:center; transition:all 0.3s ease; min-height:44px; display:flex; align-items:center; justify-content:center} .mobile-lang-btn:hover,.mobile-lang-btn:focus {background:rgba(114,66,0,0.4); border-color:var(--complement-bright); transform:translateY(-2px); box-shadow:0 4px 12px rgba(0,0,0,0.2)} /* Dropdown arrow styling */ .dropdown-arrow {margin-left:0.5rem; transition:transform 0.3s ease; font-size:0.8rem} .nav-dropdown:hover .dropdown-arrow {transform:rotate(180deg)} /* Better focus states */ .nav-links a:focus,.nav-dropdown-menu a:focus,.mobile-nav-links a:focus {outline:2px solid var(--complement-bright); outline-offset:2px} /* Smooth mobile menu animations */ .mobile-sublinks li:nth-child(1) {animation-delay:0.1s} .mobile-sublinks li:nth-child(2) {animation-delay:0.2s} .mobile-sublinks li:nth-child(3) {animation-delay:0.3s} /* Image optimization:disable some background images on mobile to save bandwidth */ @media (max-width:768px) {.about-section,.ecosystem-metrics,.marketplace-section,.resources-section,.contact-section,.tech-demos-section {background-image:none !important; background-color:var(--primary-dark)} } /* Performance optimizations */ .lazy {opacity:0; transition:opacity 0.3s ease} .lazy.loaded {opacity:1} /* Smooth section animations */ .animate-in {animation:fadeInUp 0.6s ease-out forwards} @keyframes fadeInUp {from {opacity:0; transform:translateY(30px)} to {opacity:1; transform:translateY(0)} } /* ================================ Resource & Knowledge Hub Styling ================================ */ /* Resource Statistics Dashboard */ .resource-stats {margin:1.5rem 0 2rem 0} .resource-stats .stats-grid {display:grid; grid-template-columns:repeat(4,1fr); gap:1.5rem; margin-bottom:2rem} .resource-stats .stat-item {background:linear-gradient(135deg,rgba(255,255,255,0.1) 0%,rgba(255,255,255,0.05) 100%); border:1px solid rgba(255,255,255,0.1); border-radius:0; padding:1.5rem; text-align:center; transition:all 0.3s ease; clip-path:polygon(0 0,calc(100% - 8px) 0,100% calc(100% - 8px),8px 100%,0 100%)} .resource-stats .stat-item:hover {transform:translateY(-4px); border-color:var(--complement-bright); box-shadow:0 8px 25px rgba(0,0,0,0.15)} .resource-stats .stat-number {font-size:var(--font-3xl); font-weight:700; color:var(--complement-bright); display:block; margin-bottom:0.5rem} .resource-stats .stat-label {font-size:var(--font-sm); color:rgba(255,255,255,0.8); text-transform:uppercase; letter-spacing:0.05em} /* Universal Section Filters - Inherited by all data-driven sections */ .section-filters {display:flex; gap:0.8rem; margin-bottom:2rem; flex-wrap:wrap; justify-content:space-evenly} /* Responsive filter layouts */ @media (min-width:1200px) {.section-filters {justify-content:space-between; max-width:800px; margin-left:auto; margin-right:auto} } @media (max-width:1199px) and (min-width:768px) {.section-filters {justify-content:space-around; max-width:600px; margin-left:auto; margin-right:auto} } /* Resource Categories */ .resources-categories {display:grid; gap:2rem; margin-top:2rem} .resource-category {background:linear-gradient(135deg,var(--secondary-1-accent),var(--secondary-1-bright)); border:1px solid rgba(114,66,0,0.2); border-radius:0; padding:2rem; transition:all 0.3s ease; opacity:0; clip-path:polygon(0 0,calc(100% - 10px) 0,100% calc(100% - 10px),10px 100%,0 100%); transform:translateY(20px)} .resource-category.fade-in {opacity:1; transform:translateY(0); animation:fadeInUp 0.6s ease-out forwards} .resource-category:hover {transform:translateY(-4px); border-color:rgba(255,255,255,0.2); box-shadow:0 12px 35px rgba(0,0,0,0.15)} /* Resource Category Headers */ .resource-category-title {font-size:1.4rem; font-weight:600; margin-bottom:0.8rem; display:flex; align-items:center; color:var(--text-primary)} .resource-category-title i {margin-right:0.8rem; font-size:1.2rem} .resource-category-description {color:rgba(255,255,255,0.7); margin-bottom:1.5rem; line-height:1.5} /* Resource Lists */ .resource-list {list-style:none; padding:0; margin:0 0 1rem 0} .resource-item {margin-bottom:1rem; padding:1.2rem; background:linear-gradient(135deg,rgba(255,255,255,0.05) 0%,rgba(255,255,255,0.02) 100%); border:1px solid rgba(255,255,255,0.08); border-radius:0; transition:all 0.3s ease; clip-path:polygon(0 0,calc(100% - 8px) 0,100% calc(100% - 8px),8px 100%,0 100%)} .resource-item:hover {transform:translateX(8px); border-color:rgba(255,255,255,0.15); background:linear-gradient(135deg,rgba(255,255,255,0.08) 0%,rgba(255,255,255,0.04) 100%)} /* Resource Headers */ .resource-header {display:flex; justify-content:space-between; align-items:flex-start; margin-bottom:0.8rem} .resource-link {text-decoration:none; color:var(--text-primary); font-weight:600; font-size:1rem; display:flex; align-items:center; gap:0.5rem; transition:color 0.3s ease; flex:1} .resource-link:hover {color:var(--complement-bright)} .resource-link i {color:var(--complement-bright); font-size:var(--font-sm)} .resource-title {line-height:1.3} /* Resource Badges */ .resource-badges {display:flex; gap:0.5rem; align-items:center; flex-shrink:0} .access-badge,.format-badge {font-size:0.75rem; padding:0.2rem 0.6rem; border-radius:6px; font-weight:500; text-transform:uppercase; letter-spacing:0.02em} .access-badge.public {background:rgba(34,197,94,0.2); color:rgb(34,197,94); border:1px solid rgba(34,197,94,0.3)} .access-badge.members {background:rgba(59,130,246,0.2); color:rgb(59,130,246); border:1px solid rgba(59,130,246,0.3)} .access-badge.premium {background:rgba(168,85,247,0.2); color:rgb(168,85,247); border:1px solid rgba(168,85,247,0.3)} .format-badge {background:rgba(156,163,175,0.2); color:rgb(156,163,175); border:1px solid rgba(156,163,175,0.3)} /* Resource Description */ .resource-description {color:rgba(255,255,255,0.7); line-height:1.5; margin-bottom:1rem; font-size:var(--font-sm)} /* Resource Meta Information */ .resource-meta {display:flex; justify-content:space-between; align-items:center; margin-top:1rem; flex-wrap:wrap; gap:1rem} .resource-languages {display:flex; gap:0.3rem; align-items:center} .language-flag {font-size:1rem; cursor:default} /* Language flag colors using CSS color system */ .flag-en {color:var(--text-secondary)} .flag-nl {color:var(--warning)} .flag-de {color:var(--warning-light)} .flag-fr {color:var(--info)} .resource-tags {display:flex; gap:0.4rem; flex-wrap:wrap} .resource-tag {font-size:0.7rem; padding:0.2rem 0.5rem; background:var(--bg-overlay-light); color:rgba(255,255,255,0.8); border-radius:0; text-transform:lowercase} /* Funding Information */ .funding-info {margin-top:1rem; padding:0.8rem; background:linear-gradient(135deg,rgba(34,197,94,0.1) 0%,rgba(34,197,94,0.05) 100%); border:1px solid rgba(34,197,94,0.2); border-radius:0; clip-path:polygon(0 0,calc(100% - 6px) 0,100% calc(100% - 6px),6px 100%,0 100%); font-size:var(--font-sm); display:flex; align-items:center; gap:0.5rem; flex-wrap:wrap} .funding-info i {color:rgb(34,197,94)} .funding-info .deadline {margin-left:auto; color:rgba(255,255,255,0.6); font-style:italic} /* Category Statistics */ .category-stats {margin-top:1rem; padding-top:1rem; border-top:1px solid rgba(255,255,255,0.1); display:flex; justify-content:space-between; align-items:center} .resource-count {font-size:0.8rem; color:rgba(255,255,255,0.6); text-transform:uppercase; letter-spacing:0.05em} /* Responsive Design */ @media (max-width:1200px) {.resource-stats .stats-grid {grid-template-columns:repeat(2,1fr)} } @media (max-width:768px) {.resource-stats .stats-grid {grid-template-columns:1fr; gap:1rem} .resource-stats .stat-item {padding:1rem} .resource-stats .stat-number {font-size:2rem} .section-filters {justify-content:center; flex-direction:row; flex-wrap:wrap; align-items:center; gap:0.5rem; max-width:none} .resource-category {padding:1.5rem} .resource-category-title {font-size:1.2rem} .resource-header {flex-direction:column; align-items:flex-start; gap:0.5rem} .resource-badges {margin-top:0.5rem} .resource-meta {flex-direction:column; align-items:flex-start; gap:0.5rem} .resource-item:hover {transform:none} } /* High-contrast mode support */ @media (prefers-contrast:high) {.resource-category {border-color:rgba(255,255,255,0.3)} .resource-item {border-color:rgba(255,255,255,0.2)} .resource-link {color:var(--text-primary)} } /* Legal Compliance Section */ .compliance-notice {background:linear-gradient(135deg,var(--primary-light) 0%,var(--primary) 100%); border-top:1px solid rgba(158,98,72,0.3); padding:12px 0; text-align:center; color:var(--text-primary)} .privacy-badge,.gdpr-badge {display:inline-block; background:var(--complement-bright); color:var(--text-primary); border-radius:999px; padding:4px 12px; margin:0 8px; font-size:var(--font-sm); font-weight:600} .gdpr-badge {background:var(--primary-accent)} .legal-section {background:var(--primary); color:var(--text-primary); padding:2rem 0; border-top:1px solid rgba(158,98,72,0.3)} .legal-grid {display:grid; grid-template-columns:1fr; gap:2rem; max-width:1200px; margin:0 auto} .legal-card {background:rgba(255,255,255,0.08); border:1px solid rgba(255,255,255,0.1); border-radius:8px; padding:2rem; text-align:left; box-shadow:0 4px 20px rgba(0,0,0,0.1); /* backdrop-filter:blur(10px); - Removed for performance */ } .legal-icon {display:flex; align-items:center; gap:1rem; margin-bottom:1rem} .legal-icon i {font-size:1.25rem; padding:0.75rem; background:var(--complement-bright); border-radius:50%; color:var(--primary-dark); flex-shrink:0} .legal-icon h3 {color:var(--text-primary); font-size:var(--font-lg); font-weight:600; margin:0; border-bottom:1px solid rgba(255,255,255,0.3); padding-bottom:0.5rem; flex-grow:1} .legal-card h3 {color:var(--text-primary); font-size:var(--font-lg); font-weight:600; margin-bottom:0.75rem; border-bottom:1px solid rgba(255,255,255,0.3); padding-bottom:0.5rem} .legal-card p {margin-bottom:0.5rem; color:rgba(255,255,255,0.9); line-height:1.4; font-size:var(--font-sm)} .legal-card ul {margin:1rem 0; padding-left:0; list-style:none} .legal-card li {margin-bottom:0.5rem; color:rgba(255,255,255,0.9); line-height:1.4; font-size:var(--font-sm); position:relative; padding-left:1rem} .legal-card li:before {content:"•"; color:var(--complement-bright); position:absolute; left:0; font-weight:bold} .legal-note {font-size:0.75rem; color:rgba(255,255,255,0.7); margin-top:0.75rem; font-style:italic} .legal-card a {color:var(--complement-bright); text-decoration:none; font-weight:600; border-bottom:1px solid transparent; transition:border-color 0.3s ease} .legal-card a:hover {border-bottom-color:var(--complement-bright)} .legal-card address {font-style:normal; margin-top:1rem; padding:1rem; background:rgba(255,255,255,0.05); border-radius:4px; border-left:3px solid var(--complement-bright); color:rgba(255,255,255,0.9); font-size:var(--font-sm); line-height:1.5} .copyright-section {background:var(--primary-light); color:rgba(255,255,255,0.95); padding:2rem 0; text-align:center; border-top:1px solid rgba(255,255,255,0.1)} .copyright-content {max-width:800px; margin:0 auto} .copyright-content p {margin:0.5rem 0} .license-notice {font-size:var(--font-xs); margin:1rem 0} .cc-license {color:var(--complement-bright); text-decoration:none; font-weight:500; display:inline-flex; align-items:center; gap:0.25rem; transition:all 0.3s ease} .cc-license:hover {color:#fff; text-decoration:underline} .cc-license i {font-size:1.1em; margin-right:0.15rem} .license-description {font-size:var(--font-xs); color:rgba(255,255,255,0.6); margin-top:1rem; line-height:1.4} /* Footer text consistency */ .footer-text {font-size:var(--font-xs); margin:0.5rem 0; line-height:1.4} .copyleft-text {font-size:var(--font-xxs); opacity:0.8; line-height:1.4} .legal-info,.privacy-info {margin:1.5rem 0} /* Modern Footer Styles */ .footer {background:var(--primary); color:var(--text-primary); border-top:1px solid rgba(158,98,72,0.3)} .footer-content {display:grid; grid-template-columns:1fr 1fr 1fr; gap:2rem; padding:2.5rem 0 1.5rem} .footer-section {display:flex; flex-direction:column} .footer-heading {font-size:var(--font-xl); font-weight:700; color:var(--complement-bright); margin-bottom:1rem; letter-spacing:var(--kerning-brand)} .footer-subheading {font-size:var(--font-base); font-weight:600; color:var(--text-primary); margin-bottom:0.75rem; text-transform:uppercase; letter-spacing:0.05em} .footer-description {font-size:var(--font-sm); color:rgba(255,255,255,0.8); line-height:1.5; margin-bottom:1.5rem} .footer-address {font-size:var(--font-sm); font-style:normal; color:rgba(255,255,255,0.9); line-height:1.6} .footer-address a {color:var(--complement-bright); text-decoration:none; font-weight:500} .footer-address a:hover {text-decoration:underline} .footer-links {list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.5rem} .footer-links li {margin:0} .footer-links a {color:rgba(255,255,255,0.8); text-decoration:none; font-size:var(--font-sm); transition:color 0.3s ease; display:block; padding:0.25rem 0} .footer-links a:hover {color:var(--complement-bright)} .footer-legal {list-style:none; padding:0; margin:0; display:flex; flex-direction:column; gap:0.25rem} .footer-legal li {font-size:var(--font-xs); color:rgba(255,255,255,0.7); line-height:1.4} .compliance-badges {display:flex; flex-wrap:wrap; gap:0.5rem; margin-bottom:0.75rem} .compliance-badge {background:rgba(255,255,255,0.1); color:rgba(255,255,255,0.9); padding:0.25rem 0.5rem; border-radius:12px; font-size:var(--font-xs); font-weight:500; text-transform:uppercase; letter-spacing:0.05em} .footer-note {font-size:var(--font-xs) !important; color:rgba(255,255,255,0.7); line-height:1.4; margin:0; text-align:left} .footer-bottom {border-top:1px solid rgba(255,255,255,0.1); padding:1.5rem 0; display:flex; justify-content:flex-start; align-items:flex-start; flex-wrap:wrap; gap:1rem} .copyright {font-size:var(--font-xs); color:rgba(255,255,255,0.8); margin:0; letter-spacing:var(--kerning-loose)} .copyright a {color:var(--complement-bright); text-decoration:none} .copyright a:hover {text-decoration:underline} .footer-meta {font-size:var(--font-xs); color:rgba(255,255,255,0.6)} .footer-meta a {color:var(--complement-bright); text-decoration:none} .footer-meta a:hover {text-decoration:underline} .footer-link {color:var(--complement-bright); text-decoration:none; font-weight:500} .footer-link:hover {text-decoration:underline} /* Legal section responsive design */ @media (min-width:768px) {.legal-grid {grid-template-columns:1fr 1fr} } @media (min-width:1024px) {.legal-grid {grid-template-columns:1fr 1fr 1fr} } /* Footer Responsive Styles */ @media (max-width:768px) {.footer-content {grid-template-columns:1fr; gap:2rem; padding:2rem 0 1rem} .footer-bottom {flex-direction:column; align-items:flex-start; gap:0.75rem; text-align:left} } /* Accessibility improvements */ .legal-card:focus-within {outline:2px solid var(--complement-bright); outline-offset:2px} /* Reduced motion support */ @media (prefers-reduced-motion:reduce) {.resource-category,.resource-item,.resource-stats .stat-item,.legal-card a {transition:none} .resource-category.fade-in {animation:none} } /* ====================================== */ /* UX CONSISTENCY FIXES - Generated by Playwright */ /* ====================================== */ /* Standardized heading margins */ section h1 {margin-top:0; margin-bottom:1.5rem} section h2 {margin-top:2rem; margin-bottom:1.25rem} section h3 {margin-top:1.5rem; margin-bottom:1rem} section h4 {margin-top:1.25rem; margin-bottom:0.75rem} /* Consistent section spacing */ section {padding-top:4rem; padding-bottom:4rem} @media (max-width:768px) {section {padding-top:3rem; padding-bottom:3rem} } /* ========================================================================== PIXEL-PERFECT TYPOGRAPHY & SPACING IMPROVEMENTS Based on comprehensive analysis - Critical fixes for consistency ========================================================================== */ :root {/* Typography Scale - Major Third (1.25) ratio */ --font-xxs:0.7rem; /* 11.2px - Small print,copyright */ --font-xs:0.8rem; /* 12.8px - Tags,meta text */ --font-sm:0.875rem; /* 14px - UI text,buttons */ --font-base:1rem; /* 16px - Base body text */ --font-lg:1.25rem; /* 20px - Large body text */ --font-xl:1.563rem; /* 25px - H4,card titles */ --font-2xl:1.953rem; /* 31.25px - H3 */ --font-3xl:2.441rem; /* 39px - H2 */ --font-4xl:3.052rem; /* 48.8px - H1 */ /* Line Heights - Simplified system */ --lh-tight:1.2; /* Headings */ --lh-normal:1.5; /* UI elements */ --lh-relaxed:1.6; /* Body text */ /* Font Weights - Unified system */ --fw-normal:400; --fw-medium:500; --fw-semibold:600; --fw-bold:700; /* All headings use this */ /* Kerning System - Professional typography spacing */ --kerning-tight:-0.02em; /* Large headlines,hero text */ --kerning-normal:0; /* Default body text */ --kerning-loose:0.01em; /* Small text,technical content */ --kerning-brand:-0.015em; /* Brand/logo text */ /* 8px Grid Spacing System */ --space-xs:0.5rem; /* 8px */ --space-sm:0.75rem; /* 12px */ --space-base:1rem; /* 16px */ --space-lg:1.5rem; /* 24px */ --space-xl:2rem; /* 32px */ --space-2xl:3rem; /* 48px */ } /* FIX:Standardize ALL heading sizes with high specificity */ h1,.hero h1,section h1 {font-size:var(--font-4xl) !important; /* 48.8px */ font-weight:800 !important; /* Hero emphasis */ line-height:1.1 !important; font-kerning:auto; /* Enable font's built-in kerning */ letter-spacing:var(--kerning-tight); /* Tighter spacing for impact */ } h2,section h2,.hero h2,.metrics-title {font-weight:var(--fw-bold) !important; /* Force 700,remove 800 */ font-size:var(--font-3xl) !important; /* 39px instead of 40px */ margin-bottom:var(--space-lg) !important; /* Consistent 24px */ font-kerning:auto; /* Enable kerning for headings */ letter-spacing:var(--kerning-tight); /* Tighter spacing for readability */ } h3,section h3 {font-size:var(--font-2xl) !important; /* 31.25px */ font-weight:var(--fw-bold) !important; /* 700 */ line-height:var(--lh-tight) !important; margin-bottom:var(--space-base) !important; /* 16px */ } /* FIX:Standardize card title sizes */ .member-card h3,.event-card h3,.resource-card h3 {font-size:var(--font-xl) !important; /* 25px same as other sections */ font-weight:var(--fw-semibold) !important; /* 600 */ margin-bottom:var(--space-sm) !important; /* 12px same as other sections */ line-height:var(--lh-tight) !important} .bottleneck-card h3 {font-size:var(--font-xl) !important; /* 25px instead of mixed sizes */ font-weight:var(--fw-semibold) !important; /* 600 */ margin-bottom:var(--space-sm) !important; /* 12px */ line-height:var(--lh-tight) !important} /* FIX:Replace arbitrary decimal font sizes */ .nav-links a {font-size:var(--font-base) !important; /* 16px instead of 17.6px */ font-weight:var(--fw-medium) !important; /* 500 */ } .filter-btn {font-size:var(--font-sm) !important; /* 14px instead of 14.4px */ font-weight:var(--fw-medium) !important; line-height:var(--lh-normal) !important} /* FIX:Standardize small text (tags,stats,meta) */ .member-stats,.tag,.member-tags .tag {font-size:var(--font-xs) !important; /* 12.8px - consistent */ line-height:var(--lh-normal) !important; letter-spacing:var(--kerning-loose); /* Looser spacing for small text readability */ } .tag,.member-tags .tag {font-weight:var(--fw-medium) !important; padding:4px 8px !important; /* 8px grid alignment */ } /* FIX:Body text line heights */ p {line-height:var(--lh-relaxed) !important; font-size:var(--font-lg) !important; /* 20px for main body text */ } .member-card p,.event-card p {line-height:var(--lh-relaxed) !important; /* 1.6 for better readability */ font-size:var(--font-base) !important; /* 16px for card descriptions */ } /* FIX:Section description consistency */ .section-description,.hero-content p,.cluster-description p,section > .container > p {font-size:var(--font-xl) !important; /* 25px for better readability */ line-height:var(--lh-relaxed) !important; margin-bottom:var(--space-xl) !important; /* 32px */ } /* Section grid layouts */ .news-container {/* Container should not have grid properties - handled by .news-grid */ } .resources-grid {display:grid; grid-template-columns:repeat(2,1fr); gap:1.5rem} .bottlenecks-list {grid-template-columns:repeat(3,1fr) !important} /* FIX:Grid spacing consistency */ .members-grid {gap:var(--space-xl) !important; /* 32px consistent grid */ } /* News grid layout */ .news-grid {display:grid; grid-template-columns:repeat(auto-fit,minmax(350px,1fr)); gap:2rem} /* News tags styling */ .news-tags {display:flex; gap:0.5rem; flex-wrap:wrap; margin:0.75rem 0} .news-tag {padding:0.25rem 0.5rem; background:var(--bg-overlay-light); border-radius:4px; font-size:0.75rem; color:rgba(255,255,255,0.8)} .news-tag-more {padding:0.25rem 0.5rem; background:rgba(255,255,255,0.05); border-radius:4px; font-size:0.75rem; color:rgba(255,255,255,0.6); font-style:italic} /* Accessibility:Screen reader only content */ .visually-hidden {position:absolute !important; clip:rect(1px 1px 1px 1px); clip:rect(1px,1px,1px,1px); padding:0 !important; border:0 !important; height:1px !important; width:1px !important; overflow:hidden} /* Focus styles for keyboard navigation */ button:focus,a:focus,input:focus,select:focus {outline:2px solid var(--primary); outline-offset:2px} /* Touch target sizing for mobile accessibility */ button,.filter-btn,.btn,a[role="button"] {min-height:44px; min-width:44px; touch-action:manipulation} /* Improved button and link spacing for touch */ @media (max-width:768px) {.filter-btn {padding:0.75rem 1rem; margin:0.25rem} .section-filters {gap:0.5rem; flex-wrap:wrap} .news-actions,.card-actions {flex-direction:column; gap:0.75rem} .news-actions button,.news-actions a {width:100%; justify-content:center} } /* News actions styling */ .news-actions {display:flex; gap:1rem; margin-top:1rem} .news-source-link {display:inline-flex; align-items:center; gap:0.5rem; padding:0.5rem 1rem; background-color:var(--surface-secondary,#f3f4f6); color:var(--text-primary); text-decoration:none; border-radius:0.375rem; font-size:0.875rem; transition:background-color 0.2s} .news-source-link:hover {background-color:var(--surface-hover,#e5e7eb)} .news-source-link i {font-size:0.75rem} .resources-categories,.bottlenecks-list {gap:var(--space-lg) !important; /* 24px consistent */ } /* Responsive adjustments */ @media (max-width:480px) {h1 {font-size:var(--font-3xl) !important} /* Scale down to 39px */ h2 {font-size:var(--font-2xl) !important} /* Scale down to 31.25px */ h3 {font-size:var(--font-xl) !important} /* Scale down to 25px */ .member-card img {width:60px; height:60px} /* Mobile grid layouts - all sections single column */ .news-container,.news-grid,.resources-grid,.bottlenecks-list,.members-grid,.events-grid {grid-template-columns:1fr !important; gap:1rem} } /* ========================================================================== PIXEL-PERFECT COLOR SYSTEM IMPLEMENTATION Critical fixes for colour and filter consistency ========================================================================== */ /* FIX:Standardize all image filters - Replace 6+ variations with 3 systematic ones */ .hero,.hero img,.hero-section {filter:var(--filter-hero) !important} .member-card img,.event-card img,.focus-card,.interactive-card img {filter:var(--filter-card) !important} .member-card img {width:120px; height:120px; max-width:100%; max-height:100%; object-fit:contain} .logo-img {filter:var(--filter-logo) !important} .resource-card img,.bottleneck-card img,img[src*="unsplash"] {filter:var(--filter-accent) !important} /* FIX:Consistent button colour system */ .cta-button {background:var(--interactive-primary) !important; color:var(--text-primary) !important; border:1px solid transparent !important; box-shadow:var(--shadow-base) !important; transition:all 0.2s ease !important} .cta-button:hover {background:var(--interactive-primary-hover) !important; box-shadow:var(--shadow-md) !important; transform:translateY(-1px) !important} .cta-button.secondary {background:var(--interactive-secondary) !important} .cta-button.secondary:hover {background:var(--interactive-secondary-hover) !important} /* Enhanced card backgrounds - make them stand out more */ .member-card {background:linear-gradient(135deg,var(--primary-700),var(--primary-600)) !important; border:1px solid rgba(255,255,255,0.1) !important; border-radius:0 !important; padding:1.5rem !important; position:relative !important; overflow:hidden !important; transition:all 0.3s ease !important; clip-path:polygon(0 0,calc(100% - 10px) 0,100% calc(100% - 10px),10px 100%,0 100%)} .member-card::before {content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(135deg,var(--primary-500),var(--primary-accent)); opacity:0; transition:opacity 0.3s ease; pointer-events:none} .resource-card {background:linear-gradient(135deg,var(--secondary-1-accent),var(--secondary-1-bright)) !important; border:1px solid rgba(255,255,255,0.1) !important; border-radius:0 !important; padding:1.25rem !important; position:relative !important; overflow:hidden !important; transition:all 0.3s ease !important; clip-path:polygon(0 0,calc(100% - 8px) 0,100% calc(100% - 8px),8px 100%,0 100%)} .resource-card::before {content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(135deg,var(--secondary-1-bright),var(--success)); opacity:0; transition:opacity 0.3s ease; pointer-events:none} .news-article {background:linear-gradient(135deg,var(--secondary-2-accent),var(--secondary-2-bright)) !important; border:1px solid rgba(255,255,255,0.1) !important; border-radius:0 !important; padding:1.5rem !important; position:relative !important; overflow:hidden !important; transition:all 0.3s ease !important; clip-path:polygon(0 0,calc(100% - 6px) 0,100% calc(100% - 6px),6px 100%,0 100%)} .news-article::before {content:''; position:absolute; top:0; left:0; right:0; bottom:0; background:linear-gradient(135deg,var(--info),var(--primary-400)); opacity:0; transition:opacity 0.3s ease; pointer-events:none} /* FIX:Card hover effects with consistent colours */ .member-card:hover,.event-card:hover,.resource-card:hover,.bottleneck-card:hover,.news-article:hover {box-shadow:var(--shadow-brand) !important; transform:translateY(-2px) !important} .member-card:hover::before,.resource-card:hover::before,.news-article:hover::before {opacity:0.15} /* FIX:Text colour hierarchy */ .section-description {color:var(--text-secondary) !important} .member-stats,.event-meta {color:var(--text-tertiary) !important} /* FIX:Interactive element colours */ .filter-btn {background:var(--bg-surface) !important; color:var(--text-secondary) !important; border:1px solid rgba(255,255,255,0.1) !important; transition:all 0.2s ease !important} .filter-btn:hover,.filter-btn.active {background:var(--interactive-primary) !important; color:var(--text-primary) !important; border-color:var(--interactive-primary) !important} /* FIX:Tag colour consistency */ .tag,.member-tags .tag {background:var(--interactive-secondary) !important; color:var(--text-primary) !important; border:1px solid transparent !important} /* FIX:Modal and overlay consistency */ .modal-overlay {background:var(--bg-overlay) !important} .search-results {background:var(--bg-secondary) !important; border:1px solid rgba(255,255,255,0.1) !important; box-shadow:var(--shadow-md) !important} /* Enhanced Focus Management for Accessibility */ *:focus {outline:2px solid var(--complement-bright) !important; outline-offset:2px !important} /* Specific focus styles for interactive elements */ button:focus,.cta-button:focus,.filter-btn:focus,.language-toggle:focus,.mobile-menu-toggle:focus {outline:3px solid var(--complement-bright) !important; outline-offset:2px !important; box-shadow:0 0 0 5px rgba(114,66,0,0.2) !important} /* Focus styles for form inputs */ input:focus,select:focus,textarea:focus {outline:2px solid var(--complement-bright) !important; outline-offset:1px !important; border-color:var(--complement-bright) !important} /* Focus styles for links */ a:focus {outline:2px solid var(--complement-bright) !important; outline-offset:2px !important} /* Focus styles for cards and interactive elements */ .member-card:focus,.event-card:focus,.focus-card:focus,.interactive-card:focus {outline:3px solid var(--complement-bright) !important; outline-offset:3px !important; transform:translateY(-2px)} /* Skip link for keyboard navigation - visually hidden until focused */ .skip-link {position:absolute; top:-9999px; left:-9999px; width:1px; height:1px; overflow:hidden; clip:rect(0,0,0,0); background:var(--primary); color:var(--text-primary); padding:8px 16px; text-decoration:none; z-index:9999; border-radius:4px; transition:all 0.2s ease} .skip-link:focus {position:absolute; top:6px; left:6px; width:auto; height:auto; overflow:visible; clip:auto; outline:2px solid var(--complement-bright)} /* FIX:Status colours - semantic meaning */ .event-status.registration-open,.status-success {color:var(--success) !important} .event-status.upcoming,.status-warning {color:var(--warning) !important} .event-status.cancelled,.status-error {color:var(--error) !important} /* Accessibility - Reduced motion support */ @media (prefers-reduced-motion:reduce) {.hero,.hero img,.member-card img,.event-card img {filter:brightness(1.05) contrast(1.02) !important} .cta-button:hover,.member-card:hover {transform:none !important} }