/* ============================================ Arctic Design LLC - Global Styles Color Palette: --arctic-black: #000000 --arctic-green: #00FF00 (neon glow) --arctic-blue: #00BFFF (icy accent) --arctic-white: #FFFFFF --arctic-gray: #CCCCCC --arctic-dark: #0a0a0a --arctic-card: #111111 ============================================ */ :root { --arctic-black: #000000; --arctic-green: #00FF00; --arctic-blue: #00BFFF; --arctic-white: #FFFFFF; --arctic-gray: #CCCCCC; --arctic-dark: #0a0a0a; --arctic-card: #111111; --arctic-border: #1a1a1a; --glow-green: 0 0 10px rgba(0, 255, 0, 0.5), 0 0 20px rgba(0, 255, 0, 0.2); --glow-blue: 0 0 10px rgba(0, 191, 255, 0.5), 0 0 20px rgba(0, 191, 255, 0.2); --glow-green-intense: 0 0 15px rgba(0, 255, 0, 0.6), 0 0 40px rgba(0, 255, 0, 0.3); --gradient-green-blue: linear-gradient(135deg, var(--arctic-green), var(--arctic-blue)); /* Admin aliases */ --dark-bg: #0a0a0a; --card-bg: #111111; --card-border: #1a1a1a; --text-white: #FFFFFF; /* Semantic layer — use these for new/refactored styles */ --text-on-accent: #000000; --text-muted: #777777; --text-muted-strong: #555555; --text-danger: #ff6b7a; --text-warning: #ffc800; --text-on-danger-bg: white; --bg-danger: #b32121; --bg-accent-hover: #00cc00; --border-danger: #ff6b7a; --border-warning: #ffa500; --input-text: #ffffff; --placeholder: #777777; --accent-blue-light: #66e0ff; /* Theme toggle button */ --toggle-border: rgba(255, 255, 255, 0.15); --toggle-bg: rgba(255, 255, 255, 0.06); --toggle-color: rgba(255, 255, 255, 0.7); --toggle-hover-bg: rgba(0, 255, 0, 0.08); --toggle-icon-dark: inline; --toggle-icon-light: none; } /* ============================================ Light Theme Overrides Applied via data-theme="light" on ============================================ */ [data-theme="light"] { --arctic-black: #f4f6f9; --arctic-green: #00875a; --arctic-blue: #0077cc; --arctic-white: #1a1a2e; --arctic-gray: #555566; --arctic-dark: #e8ecf1; --arctic-card: #ffffff; --arctic-border: #d0d5dd; --glow-green: 0 0 6px rgba(0, 135, 90, 0.2); --glow-blue: 0 0 6px rgba(0, 119, 204, 0.2); --glow-green-intense: 0 0 8px rgba(0, 135, 90, 0.25); --gradient-green-blue: linear-gradient(135deg, var(--arctic-green), var(--arctic-blue)); --dark-bg: #f4f6f9; --card-bg: #ffffff; --card-border: #d0d5dd; --text-white: #1a1a2e; /* Semantic layer — light overrides */ --text-on-accent: #ffffff; --text-muted: #888888; --text-muted-strong: #666666; --text-danger: #c9303d; --text-warning: #b38f00; --text-on-danger-bg: #ffffff; --bg-danger: #dc3545; --bg-accent-hover: #006b48; --border-danger: #c9303d; --border-warning: #b38f00; --input-text: #1a1a2e; --placeholder: #999999; --accent-blue-light: #0099e6; /* Theme toggle button */ --toggle-border: rgba(26, 26, 46, 0.45); --toggle-bg: rgba(26, 26, 46, 0.10); --toggle-color: rgba(26, 26, 46, 1); --toggle-hover-bg: rgba(0, 135, 90, 0.12); --toggle-icon-dark: none; --toggle-icon-light: inline; } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } html, body { font-family: 'Roboto', 'Helvetica Neue', Arial, sans-serif; background-color: var(--arctic-black); color: var(--arctic-white); margin: 0; padding: 0; line-height: 1.7; -webkit-font-smoothing: antialiased; } /* --- Typography --- */ h1, h2, h3, h4, h5, h6 { font-family: 'Orbitron', 'Roboto', sans-serif; color: var(--arctic-green); text-transform: uppercase; font-weight: 700; letter-spacing: 2px; margin-bottom: 1rem; } h1 { font-size: 2.8rem; } h2 { font-size: 2.2rem; } h3 { font-size: 1.6rem; } h4 { font-size: 1.3rem; } h1:focus { outline: none; } p { color: var(--arctic-gray); font-size: 1.05rem; line-height: 1.8; } a, .btn-link { color: var(--arctic-green); text-decoration: none; transition: all 0.3s ease; } a:hover, .btn-link:hover { color: var(--arctic-blue); text-shadow: var(--glow-blue); } /* --- Buttons --- */ .btn-arctic { display: inline-block; padding: 14px 36px; background: transparent; color: var(--arctic-green); border: 2px solid var(--arctic-green); font-family: 'Orbitron', sans-serif; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: all 0.4s ease; text-decoration: none; position: relative; overflow: hidden; } .btn-arctic:hover { background: var(--arctic-green); color: var(--arctic-black); box-shadow: var(--glow-green); transform: translateY(-2px); } .btn-arctic-blue { display: inline-block; padding: 14px 36px; background: transparent; color: var(--arctic-blue); border: 2px solid var(--arctic-blue); font-family: 'Orbitron', sans-serif; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: all 0.4s ease; text-decoration: none; } .btn-arctic-blue:hover { background: var(--arctic-blue); color: var(--arctic-black); box-shadow: var(--glow-blue); transform: translateY(-2px); } .btn-arctic-solid { display: inline-block; padding: 14px 36px; background: var(--arctic-green); color: var(--arctic-black); border: 2px solid var(--arctic-green); font-family: 'Orbitron', sans-serif; font-size: 0.9rem; font-weight: 700; text-transform: uppercase; letter-spacing: 2px; cursor: pointer; transition: all 0.4s ease; text-decoration: none; } .btn-arctic-solid:hover { background: transparent; color: var(--arctic-green); box-shadow: var(--glow-green); transform: translateY(-2px); } /* --- Cards --- */ .arctic-card { background: var(--arctic-card); border: 1px solid var(--arctic-border); border-radius: 4px; padding: 2rem; transition: all 0.4s ease; position: relative; overflow: hidden; } .arctic-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--arctic-green), transparent); opacity: 0; transition: opacity 0.4s ease; } .arctic-card:hover { border-color: var(--arctic-green); transform: translateY(-6px); box-shadow: 0 10px 40px rgba(0, 255, 0, 0.1); } .arctic-card:hover::before { opacity: 1; } .arctic-card .card-icon { font-size: 2.5rem; color: var(--arctic-green); margin-bottom: 1.2rem; transition: all 0.4s ease; } .arctic-card:hover .card-icon { color: var(--arctic-blue); text-shadow: var(--glow-blue); } .arctic-card h3, .arctic-card h4 { font-size: 1.1rem; margin-bottom: 0.8rem; } .arctic-card p { font-size: 0.95rem; color: var(--arctic-gray); } /* --- Sections --- */ .section { padding: 6rem 0; } .section-dark { background: var(--arctic-dark); } .section-header { text-align: center; margin-bottom: 4rem; } .section-header h2 { position: relative; display: inline-block; padding-bottom: 1rem; } .section-header h2::after { content: ''; position: absolute; bottom: 0; left: 50%; transform: translateX(-50%); width: 80px; height: 2px; background: linear-gradient(90deg, transparent, var(--arctic-green), transparent); } .section-header p { max-width: 700px; margin: 1.5rem auto 0; font-size: 1.1rem; } /* --- Divider line --- */ .arctic-divider { height: 1px; background: linear-gradient(90deg, transparent, var(--arctic-green), var(--arctic-blue), transparent); border: none; margin: 0; opacity: 0.5; } /* --- Hero --- */ .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; text-align: center; position: relative; overflow: hidden; background: radial-gradient(ellipse at center bottom, rgba(0, 255, 0, 0.05) 0%, transparent 60%), radial-gradient(ellipse at top right, rgba(0, 191, 255, 0.03) 0%, transparent 50%), var(--arctic-black); } .hero::before { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(0, 255, 0, 0.03) 0%, transparent 50%), linear-gradient(225deg, rgba(0, 191, 255, 0.02) 0%, transparent 50%); pointer-events: none; } .hero-content { position: relative; z-index: 2; max-width: 900px; padding: 2rem; } .hero-logo { max-width: 320px; margin-bottom: 2rem; filter: drop-shadow(0 0 20px rgba(0, 255, 0, 0.3)); animation: logoGlow 3s ease-in-out infinite alternate; } @keyframes logoGlow { from { filter: drop-shadow(0 0 15px rgba(0, 255, 0, 0.2)); } to { filter: drop-shadow(0 0 30px rgba(0, 255, 0, 0.5)); } } .hero h1 { font-size: 3.2rem; margin-bottom: 1.5rem; line-height: 1.2; text-shadow: 0 0 30px rgba(0, 255, 0, 0.3); } .hero .tagline { font-size: 1.2rem; color: var(--arctic-gray); max-width: 700px; margin: 0 auto 2.5rem; line-height: 1.8; } /* --- Grid helpers --- */ .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } @media (max-width: 992px) { .grid-3 { grid-template-columns: repeat(2, 1fr); } .golden-rules-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 768px) { .grid-3, .grid-2 { grid-template-columns: 1fr; } .hero h1 { font-size: 2rem; } h1 { font-size: 2rem; } h2 { font-size: 1.6rem; } h3 { font-size: 1.3rem; } .section { padding: 4rem 0; } .hero { min-height: 90vh; } .stats-bar { gap: 2rem; } } /* --- Stats / Highlights bar --- */ .stats-bar { display: flex; justify-content: center; gap: 4rem; flex-wrap: wrap; padding: 3rem 0; } .stat-item { text-align: center; } .stat-item .stat-number { font-family: 'Orbitron', sans-serif; font-size: 2.5rem; font-weight: 900; color: var(--arctic-green); display: block; text-shadow: var(--glow-green); } .stat-item .stat-label { font-size: 0.85rem; color: var(--arctic-gray); text-transform: uppercase; letter-spacing: 2px; margin-top: 0.5rem; } /* --- Team Cards --- */ .team-card { text-align: center; background: var(--arctic-card); border: 1px solid var(--arctic-border); border-radius: 4px; padding: 2.5rem 2rem; transition: all 0.4s ease; } .team-card:hover { border-color: var(--arctic-blue); box-shadow: 0 10px 40px rgba(0, 191, 255, 0.1); } .team-card .team-avatar { width: 100px; height: 100px; border-radius: 50%; border: 2px solid var(--arctic-green); margin: 0 auto 1.5rem; display: flex; align-items: center; justify-content: center; font-size: 2.5rem; color: var(--arctic-green); background: rgba(0, 255, 0, 0.05); } .team-card h4 { color: var(--arctic-white); font-family: 'Roboto', sans-serif; font-weight: 700; text-transform: none; letter-spacing: 0; } .team-card .team-role { color: var(--arctic-green); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; margin-bottom: 0.4rem; } .team-card .team-role-sub { color: var(--arctic-blue); font-size: 0.78rem; letter-spacing: 0.5px; margin-bottom: 1rem; line-height: 1.5; opacity: 0.85; } /* --- Contact Form --- */ .form-arctic .form-control { background: var(--arctic-card); border: 1px solid var(--arctic-border); color: var(--arctic-white); padding: 14px 18px; font-size: 1rem; border-radius: 4px; transition: all 0.3s ease; } .form-arctic .form-control:focus { border-color: var(--arctic-green); box-shadow: 0 0 0 2px rgba(0, 255, 0, 0.15); background: var(--arctic-card); color: var(--arctic-white); outline: none; } .form-arctic .form-control::placeholder { color: var(--placeholder); } .form-arctic .form-label { color: var(--arctic-gray); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.5rem; font-weight: 500; } /* --- Value Chain Timeline --- */ .value-chain { display: flex; align-items: stretch; gap: 0; position: relative; } .value-chain::before { content: ''; position: absolute; top: 50%; left: 0; right: 0; height: 2px; background: linear-gradient(90deg, var(--arctic-green), var(--arctic-blue), var(--arctic-green)); z-index: 0; } .chain-item { flex: 1; text-align: center; padding: 2rem 1.5rem; position: relative; z-index: 1; background: var(--arctic-black); } .chain-item .chain-icon { width: 70px; height: 70px; border-radius: 50%; border: 2px solid var(--arctic-green); background: var(--arctic-black); margin: 0 auto 1.5rem; display: flex; align-items: center; justify-content: center; font-size: 1.8rem; color: var(--arctic-green); transition: all 0.4s ease; } .chain-item:hover .chain-icon { background: var(--arctic-green); color: var(--arctic-black); box-shadow: var(--glow-green); } @media (max-width: 768px) { .value-chain { flex-direction: column; } .value-chain::before { top: 0; bottom: 0; left: 50%; right: auto; width: 2px; height: 100%; } } /* --- Project Cards --- */ .project-card { background: var(--arctic-card); border: 1px solid var(--arctic-border); border-radius: 4px; overflow: hidden; transition: all 0.4s ease; } .project-card:hover { border-color: var(--arctic-blue); transform: translateY(-6px); box-shadow: 0 15px 50px rgba(0, 191, 255, 0.1); } .project-card .project-image { height: 220px; background: linear-gradient(135deg, rgba(0, 255, 0, 0.1), rgba(0, 191, 255, 0.1)); display: flex; align-items: center; justify-content: center; font-size: 4rem; color: var(--arctic-green); position: relative; overflow: hidden; } .project-card .project-image::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 60px; background: linear-gradient(transparent, var(--arctic-card)); } .project-card .project-body { padding: 1.5rem 2rem 2rem; } .project-card .project-metric { display: inline-block; background: rgba(0, 255, 0, 0.1); border: 1px solid rgba(0, 255, 0, 0.2); color: var(--arctic-green); padding: 4px 12px; font-size: 0.8rem; font-weight: 700; border-radius: 2px; margin-top: 1rem; font-family: 'Orbitron', sans-serif; } /* --- Team Grid --- */ .team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 2rem; justify-items: center; } /* --- Golden Rules Cards --- */ .golden-rules-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3rem; } .golden-rule-card { text-align: center; position: relative; padding-top: 3rem; } .golden-rule-number { position: absolute; top: -1px; right: 1rem; width: 36px; height: 36px; border-radius: 50%; background: var(--gradient-green-blue); color: #000; font-family: 'Orbitron', sans-serif; font-size: 0.9rem; font-weight: 700; display: flex; align-items: center; justify-content: center; box-shadow: 0 0 14px rgba(0, 255, 0, 0.25); } .golden-rule-card h4 { font-family: 'Orbitron', sans-serif; font-size: 0.95rem; letter-spacing: 1px; color: var(--arctic-green); margin-bottom: 0.8rem; } .golden-rule-card p { font-size: 0.85rem; line-height: 1.7; } .golden-rule-bullets { list-style: none; padding: 0; margin: 0; text-align: left; } .golden-rule-bullets li { position: relative; padding-left: 1.2rem; margin-bottom: 0.5rem; font-size: 0.85rem; line-height: 1.6; color: var(--arctic-gray); } .golden-rule-bullets li::before { content: '•'; position: absolute; left: 0; color: var(--arctic-green); font-weight: 700; } .golden-rule-footer { font-weight: 600; font-style: italic; } /* --- Arctic Engineered Title --- */ .arctic-engineered-title { font-family: 'Orbitron', sans-serif; font-size: 2.2rem; letter-spacing: 6px; text-transform: uppercase; background: linear-gradient(90deg, var(--arctic-green), var(--arctic-blue), var(--arctic-green)); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: arcticShimmer 4s linear infinite; } @keyframes arcticShimmer { 0% { background-position: 0% center; } 100% { background-position: 200% center; } } /* --- Project Gallery --- */ .gallery-filters { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; margin-top: 2rem; } .filter-btn { background: var(--arctic-card); border: 1px solid var(--arctic-border); color: var(--arctic-gray); padding: 10px 22px; border-radius: 2px; font-size: 0.85rem; font-family: 'Orbitron', sans-serif; letter-spacing: 1px; cursor: pointer; transition: all 0.3s ease; display: inline-flex; align-items: center; gap: 8px; } .filter-btn:hover { border-color: var(--arctic-blue); color: var(--arctic-blue); } .filter-btn.active { background: rgba(0, 191, 255, 0.12); border-color: var(--arctic-blue); color: var(--arctic-blue); } .gallery-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.75rem; } .gallery-item { background: var(--arctic-card); border: 1px solid var(--arctic-border); border-radius: 4px; overflow: hidden; cursor: pointer; transition: all 0.35s ease; } .gallery-item:hover { border-color: var(--arctic-blue); transform: translateY(-5px); box-shadow: 0 15px 45px rgba(0, 191, 255, 0.12); } .gallery-thumb { height: 220px; position: relative; display: flex; align-items: center; justify-content: center; overflow: hidden; } .gallery-icon { font-size: 3.5rem; color: rgba(255, 255, 255, 0.25); transition: transform 0.4s ease, color 0.3s ease; position: relative; z-index: 1; } .gallery-item:hover .gallery-icon { transform: scale(1.1); color: rgba(255, 255, 255, 0.35); } .gallery-video-badge { position: absolute; top: 12px; right: 12px; width: 34px; height: 34px; border-radius: 50%; background: rgba(0, 191, 255, 0.8); display: flex; align-items: center; justify-content: center; font-size: 0.75rem; color: var(--input-text); z-index: 2; } .gallery-overlay { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.55); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; opacity: 0; transition: opacity 0.3s ease; color: var(--input-text); font-size: 1.8rem; z-index: 3; } .gallery-overlay span { font-size: 0.8rem; font-family: 'Orbitron', sans-serif; letter-spacing: 2px; text-transform: uppercase; } .gallery-item:hover .gallery-overlay { opacity: 1; } .gallery-info { padding: 1.25rem 1.5rem 1.5rem; } .gallery-info-top { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.6rem; } .gallery-tag { font-size: 0.72rem; font-family: 'Orbitron', sans-serif; letter-spacing: 1px; text-transform: uppercase; padding: 3px 10px; border-radius: 2px; display: inline-flex; align-items: center; gap: 5px; } .gallery-tag.photo { background: rgba(0, 255, 0, 0.1); border: 1px solid rgba(0, 255, 0, 0.25); color: var(--arctic-green); } .gallery-tag.video { background: rgba(0, 191, 255, 0.1); border: 1px solid rgba(0, 191, 255, 0.25); color: var(--arctic-blue); } .gallery-year { font-size: 0.78rem; color: var(--arctic-gray); font-family: 'Orbitron', sans-serif; } .gallery-info h4 { color: var(--arctic-white); margin-bottom: 0.5rem; font-size: 1rem; font-family: 'Roboto', sans-serif; font-weight: 700; text-transform: none; letter-spacing: 0; } .gallery-info p { color: var(--arctic-gray); font-size: 0.88rem; line-height: 1.6; margin-bottom: 0.75rem; } .gallery-meta { font-size: 0.8rem; color: var(--arctic-gray); display: flex; gap: 1rem; flex-wrap: wrap; } .gallery-meta i { color: var(--arctic-green); margin-right: 5px; } .gallery-empty { text-align: center; padding: 5rem 2rem; color: var(--arctic-gray); } .gallery-empty i { font-size: 3rem; opacity: 0.25; display: block; margin-bottom: 1rem; } /* --- Lightbox --- */ .lightbox-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); z-index: 9999; display: flex; align-items: center; justify-content: center; padding: 2rem; animation: lightboxFadeIn 0.25s ease; } @keyframes lightboxFadeIn { from { opacity: 0; } to { opacity: 1; } } .lightbox-content { background: var(--arctic-card); border: 1px solid var(--arctic-border); border-radius: 4px; max-width: 780px; width: 100%; max-height: 90vh; overflow-y: auto; animation: lightboxSlideIn 0.3s ease; position: relative; z-index: 1; } @keyframes lightboxSlideIn { from { transform: scale(0.9); opacity: 0; } to { transform: scale(1); opacity: 1; } } .lightbox-media { width: 100%; display: block; max-height: 420px; object-fit: cover; } .lightbox-photo-placeholder, .lightbox-video-placeholder { width: 100%; height: 380px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.2rem; } .lightbox-placeholder-icon { font-size: 6rem; color: rgba(255, 255, 255, 0.2); } .lightbox-play-icon { font-size: 6rem; color: rgba(0, 191, 255, 0.5); } .lightbox-placeholder-label { font-size: 0.8rem; font-family: 'Orbitron', sans-serif; letter-spacing: 3px; text-transform: uppercase; color: var(--arctic-gray); opacity: 0.6; } .lightbox-caption { padding: 1.75rem 2rem 2rem; } .lightbox-tag { font-size: 0.72rem; font-family: 'Orbitron', sans-serif; letter-spacing: 1px; text-transform: uppercase; padding: 3px 10px; border-radius: 2px; display: inline-flex; align-items: center; gap: 5px; margin-bottom: 1rem; } .lightbox-tag.photo { background: rgba(0, 255, 0, 0.1); border: 1px solid rgba(0, 255, 0, 0.25); color: var(--arctic-green); } .lightbox-tag.video { background: rgba(0, 191, 255, 0.1); border: 1px solid rgba(0, 191, 255, 0.25); color: var(--arctic-blue); } .lightbox-caption h3 { color: var(--arctic-white); font-size: 1.4rem; margin-bottom: 0.75rem; font-family: 'Roboto', sans-serif; font-weight: 700; text-transform: none; letter-spacing: 0; } .lightbox-caption p { color: var(--arctic-gray); line-height: 1.8; font-size: 0.95rem; margin-bottom: 1.2rem; } .lightbox-meta { display: flex; gap: 1.5rem; flex-wrap: wrap; font-size: 0.85rem; color: var(--arctic-gray); } .lightbox-meta i { color: var(--arctic-green); margin-right: 6px; } .lightbox-close { position: fixed; top: 1.25rem; right: 1.25rem; width: 44px; height: 44px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--input-text); font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: all 0.25s ease; } .lightbox-close:hover { background: rgba(255, 255, 255, 0.18); transform: scale(1.1); } .lightbox-nav { position: fixed; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; border-radius: 50%; background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--input-text); font-size: 1.1rem; cursor: pointer; display: flex; align-items: center; justify-content: center; z-index: 2; transition: all 0.25s ease; } .lightbox-nav:hover { background: rgba(0, 191, 255, 0.25); border-color: var(--arctic-blue); } .lightbox-prev { left: 1.25rem; } .lightbox-next { right: 1.25rem; } .lightbox-counter { position: fixed; bottom: 1.5rem; left: 50%; transform: translateX(-50%); font-size: 0.8rem; font-family: 'Orbitron', sans-serif; color: rgba(255, 255, 255, 0.45); letter-spacing: 2px; z-index: 2; } /* --- Lightbox Video / YouTube --- */ .lightbox-video-wrap { position: relative; width: 100%; padding-top: 56.25%; /* 16:9 aspect ratio */ background: #000; } .lightbox-video-player, .lightbox-youtube-player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: none; display: block; } .lightbox-img { width: 100%; max-height: 520px; object-fit: cover; display: block; } /* --- Map container --- */ .map-container { border: 1px solid var(--arctic-border); border-radius: 4px; overflow: hidden; filter: grayscale(80%) invert(92%) contrast(90%); transition: filter 0.4s ease; } .map-container:hover { filter: grayscale(40%) invert(92%) contrast(90%); } /* --- Contact Info --- */ .contact-info-item { display: flex; align-items: flex-start; gap: 1rem; margin-bottom: 2rem; } .contact-info-item .contact-icon { width: 50px; height: 50px; border-radius: 50%; border: 1px solid var(--arctic-green); display: flex; align-items: center; justify-content: center; color: var(--arctic-green); font-size: 1.1rem; flex-shrink: 0; } .contact-info-item h4 { color: var(--arctic-white); font-family: 'Roboto', sans-serif; text-transform: none; letter-spacing: 0; font-size: 1rem; margin-bottom: 0.3rem; } .contact-info-item p { margin: 0; font-size: 0.95rem; } /* --- Scrollbar --- */ ::-webkit-scrollbar { width: 8px; } ::-webkit-scrollbar-track { background: var(--arctic-black); } ::-webkit-scrollbar-thumb { background: var(--arctic-border); border-radius: 4px; } ::-webkit-scrollbar-thumb:hover { background: var(--arctic-green); } /* --- Form validation --- */ .valid.modified:not([type=checkbox]) { outline: 1px solid var(--arctic-green); } .invalid { outline: 1px solid var(--text-danger); } .validation-message { color: var(--text-danger); } /* --- Blazor error boundary --- */ .blazor-error-boundary { background: var(--bg-danger); padding: 1rem 1rem 1rem 1.5rem; color: var(--text-on-danger-bg); } .blazor-error-boundary::after { content: "An error has occurred."; } /* --- Utilities --- */ .text-green { color: var(--arctic-green) !important; } .text-blue { color: var(--arctic-blue) !important; } .text-gray { color: var(--arctic-gray) !important; } .glow-green { text-shadow: var(--glow-green); } .glow-blue { text-shadow: var(--glow-blue); } .bg-arctic-dark { background-color: var(--arctic-dark) !important; } .bg-arctic-card { background-color: var(--arctic-card) !important; } .content { padding-top: 0; } /* --- Focus-visible for keyboard navigation --- */ a:focus-visible, button:focus-visible, .btn-arctic:focus-visible, .btn-arctic-blue:focus-visible, .btn-arctic-solid:focus-visible, .nav-cta:focus-visible { outline: 2px solid var(--arctic-green); outline-offset: 3px; box-shadow: 0 0 0 4px rgba(0, 255, 0, 0.2); } .form-arctic .form-control:focus-visible { outline: none; } /* --- Hero buttons layout --- */ .hero-buttons { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } /* --- Back to top --- */ .back-to-top { position: fixed; bottom: 2rem; right: 2rem; width: 45px; height: 45px; border: 1px solid var(--arctic-green); background: var(--arctic-black); color: var(--arctic-green); display: flex; align-items: center; justify-content: center; border-radius: 4px; cursor: pointer; transition: all 0.3s ease; z-index: 999; text-decoration: none; } .back-to-top:hover { background: var(--arctic-green); color: var(--arctic-black); box-shadow: var(--glow-green); } /* --- Bootstrap overrides for dark theme --- */ .form-floating > .form-control-plaintext::placeholder, .form-floating > .form-control::placeholder { color: var(--placeholder); text-align: end; } .form-floating > .form-control-plaintext:focus::placeholder, .form-floating > .form-control:focus::placeholder { text-align: start; } /* ============================================ VISUAL OVERHAUL — Animations & Effects ============================================ */ /* --- Scroll Reveal --- */ .reveal, .reveal-left, .reveal-right, .reveal-scale { transition: opacity 0.8s ease, transform 0.8s ease; will-change: opacity, transform; } .js-animate .reveal { opacity: 0; transform: translateY(40px); } .js-animate .reveal-left { opacity: 0; transform: translateX(-60px); } .js-animate .reveal-right { opacity: 0; transform: translateX(60px); } .js-animate .reveal-scale { opacity: 0; transform: scale(0.9); } .reveal.revealed, .reveal-left.revealed, .reveal-right.revealed, .reveal-scale.revealed { opacity: 1; transform: translate(0) scale(1); } /* staggered children */ .reveal-stagger.revealed > * { opacity: 0; animation: staggerIn 0.6s ease forwards; } .reveal-stagger.revealed > *:nth-child(1) { animation-delay: 0.05s; } .reveal-stagger.revealed > *:nth-child(2) { animation-delay: 0.15s; } .reveal-stagger.revealed > *:nth-child(3) { animation-delay: 0.25s; } .reveal-stagger.revealed > *:nth-child(4) { animation-delay: 0.35s; } .reveal-stagger.revealed > *:nth-child(5) { animation-delay: 0.45s; } .reveal-stagger.revealed > *:nth-child(6) { animation-delay: 0.55s; } @keyframes staggerIn { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: translateY(0); } } /* --- Aurora Borealis Background --- */ .aurora-bg { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; } .aurora-bg::before, .aurora-bg::after { content: ''; position: absolute; width: 120%; height: 60%; border-radius: 50%; filter: blur(80px); opacity: 0.15; animation: aurora 12s ease-in-out infinite alternate; } .aurora-bg::before { top: -30%; left: -10%; background: radial-gradient(ellipse, rgba(0, 255, 0, 0.35), transparent 70%); } .aurora-bg::after { bottom: -20%; right: -10%; background: radial-gradient(ellipse, rgba(0, 191, 255, 0.3), transparent 70%); animation-delay: -6s; animation-direction: alternate-reverse; } @keyframes aurora { 0% { transform: translateX(-5%) translateY(0) rotate(-2deg); } 100% { transform: translateX(5%) translateY(5%) rotate(2deg); } } /* --- Particle Canvas --- */ #particle-canvas { position: absolute; inset: 0; z-index: 1; pointer-events: auto; } /* --- Enhanced Hero --- */ .hero { animation: heroFadeIn 1.2s ease-out; } @keyframes heroFadeIn { from { opacity: 0; } to { opacity: 1; } } .hero-logo { animation: logoFloat 4s ease-in-out infinite alternate; } @keyframes logoFloat { from { transform: translateY(0) drop-shadow(0 0 15px rgba(0, 255, 0, 0.2)); filter: drop-shadow(0 0 15px rgba(0, 255, 0, 0.2)); } to { transform: translateY(-10px); filter: drop-shadow(0 0 35px rgba(0, 255, 0, 0.5)); } } .hero .text-blue { font-size: 1.15em; animation: gradientShift 4s ease-in-out infinite alternate; } @keyframes gradientShift { 0% { color: var(--arctic-blue); text-shadow: 0 0 25px rgba(0, 191, 255, 0.4), 0 0 40px rgba(0, 191, 255, 0.2); } 100% { color: var(--accent-blue-light); text-shadow: 0 0 35px rgba(0, 191, 255, 0.6), 0 0 50px rgba(0, 191, 255, 0.3); } } /* --- Typewriter cursor --- */ .typewriter { visibility: hidden; border-right: 2px solid var(--arctic-green); animation: blink-cursor 0.75s step-end infinite; display: inline; } @keyframes blink-cursor { 50% { border-color: transparent; } } /* --- Glowing card borders with shimmer --- */ .arctic-card::before { background: linear-gradient(90deg, transparent, var(--arctic-green), var(--arctic-blue), transparent); background-size: 200% 100%; animation: shimmerLine 3s linear infinite paused; } .arctic-card:hover::before { animation-play-state: running; } @keyframes shimmerLine { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } /* --- Pulsing CTA buttons with shine --- */ .btn-arctic-solid { position: relative; overflow: hidden; } .btn-arctic-solid::after { content: ''; position: absolute; top: 0; left: -100%; width: 60%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.25), transparent); transition: left 0.5s ease; } .btn-arctic-solid:hover::after { left: 120%; animation: btnShine 0.6s ease forwards; } @keyframes btnShine { from { left: -60%; } to { left: 120%; } } /* --- Animated section dividers --- */ .arctic-divider { background-size: 200% 100%; animation: dividerFlow 4s linear infinite; } @keyframes dividerFlow { 0% { background-position: 0% 0; } 100% { background-position: 200% 0; } } /* --- Enhanced stats hover --- */ .stat-item { transition: transform 0.3s ease, text-shadow 0.3s ease; cursor: default; } .stat-item:hover { transform: translateY(-4px); } .stat-item:hover .stat-number { text-shadow: var(--glow-green-intense); } /* --- Animated grid background on dark sections --- */ .section-dark { position: relative; overflow: hidden; } .section-dark::before { content: ''; position: absolute; inset: 0; background-image: linear-gradient(rgba(0, 255, 0, 0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 255, 0, 0.03) 1px, transparent 1px); background-size: 50px 50px; animation: gridPan 20s linear infinite; pointer-events: none; z-index: 0; } .section-dark > .container { position: relative; z-index: 1; } @keyframes gridPan { 0% { transform: translateY(0); } 100% { transform: translateY(50px); } } /* --- Navbar scroll effect --- */ .navbar-scrolled { background: rgba(0, 0, 0, 0.95) !important; backdrop-filter: blur(12px); box-shadow: 0 2px 20px rgba(0, 255, 0, 0.1); } /* --- Light theme navbar (global fallback) --- */ [data-theme="light"] .arctic-navbar { background: rgba(244, 246, 249, 0.95) !important; border-bottom-color: rgba(0, 135, 90, 0.12); } [data-theme="light"] .arctic-navbar .nav-link { color: rgba(26, 26, 46, 0.7); } [data-theme="light"] .arctic-navbar .nav-link:hover, [data-theme="light"] .arctic-navbar .nav-link.active { color: var(--arctic-green); } [data-theme="light"] .arctic-navbar .nav-cta-portal { color: var(--arctic-blue); border-color: var(--arctic-blue); } [data-theme="light"] .arctic-navbar .nav-cta { color: var(--arctic-green); border-color: var(--arctic-green); } [data-theme="light"] .navbar-scrolled { background: rgba(244, 246, 249, 0.98) !important; box-shadow: 0 2px 20px rgba(0, 0, 0, 0.1) !important; } [data-theme="light"] .brand-logo { filter: drop-shadow(0 0 4px rgba(0, 135, 90, 0.15)); } [data-theme="light"] .brand-logo:hover { filter: drop-shadow(0 0 8px rgba(0, 135, 90, 0.25)); } [data-theme="light"] .toggler-bar { background: var(--arctic-green); } /* Theme toggle button + icon swap now driven entirely by CSS custom properties (--toggle-*) defined in :root / [data-theme="light"] above, so no specificity battle with the scoped NavMenu styles. */ @media (max-width: 768px) { [data-theme="light"] .navbar-menu { background: rgba(244, 246, 249, 0.97); border-bottom-color: rgba(0, 135, 90, 0.12); } } /* --- Floating back-to-top FAB --- */ #back-to-top-fab { position: fixed; bottom: 2rem; right: 2rem; width: 48px; height: 48px; border: 1px solid var(--arctic-green); background: rgba(0, 0, 0, 0.9); color: var(--arctic-green); display: flex; align-items: center; justify-content: center; border-radius: 50%; cursor: pointer; z-index: 1000; opacity: 0; transform: translateY(20px); transition: all 0.35s ease; text-decoration: none; font-size: 1.1rem; pointer-events: none; } #back-to-top-fab.visible { opacity: 1; transform: translateY(0); pointer-events: auto; } #back-to-top-fab:hover { background: var(--arctic-green); color: var(--arctic-black); box-shadow: var(--glow-green); } /* --- Project card gradient animation --- */ .project-card .project-image { background-size: 200% 200%; animation: projectGradient 6s ease infinite; } @keyframes projectGradient { 0%, 100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } } /* --- Project metric glow on hover --- */ .project-card:hover .project-metric { box-shadow: 0 0 12px rgba(0, 255, 0, 0.4); } /* --- Team card hover enhancement --- */ .team-card:hover { transform: translateY(-6px); } /* --- Contact icon hover --- */ .contact-info-item:hover .contact-icon { background: rgba(0, 255, 0, 0.1); box-shadow: 0 0 15px rgba(0, 255, 0, 0.2); transition: all 0.3s ease; } /* --- Footer animated border --- */ .arctic-footer { border-top: 2px solid transparent; border-image: linear-gradient(90deg, transparent, var(--arctic-green), var(--arctic-blue), transparent) 1; } /* --- Mobile: hide particle canvas --- */ @media (max-width: 768px) { #particle-canvas { display: none; } .aurora-bg::before, .aurora-bg::after { animation: none; } .gallery-grid { grid-template-columns: 1fr; } .gallery-filters { gap: 0.5rem; } .filter-btn { padding: 8px 16px; font-size: 0.78rem; } .lightbox-nav { display: none; } .lightbox-content { max-height: 85vh; } .lightbox-photo-placeholder, .lightbox-video-placeholder { height: 240px; } .team-grid { grid-template-columns: 1fr; } .golden-rules-grid { grid-template-columns: 1fr; } .arctic-engineered-title { font-size: 1.4rem; letter-spacing: 3px; } } /* --- 404 Not Found Page --- */ .not-found-section { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding-top: 5rem; position: relative; overflow: hidden; } .not-found-aurora { position: absolute; inset: 0; background: radial-gradient(ellipse at 50% 40%, rgba(0, 191, 255, 0.06) 0%, transparent 65%), radial-gradient(ellipse at 30% 70%, rgba(0, 255, 0, 0.04) 0%, transparent 50%); pointer-events: none; } .not-found-code { font-family: 'Orbitron', sans-serif; font-size: clamp(5rem, 18vw, 11rem); font-weight: 900; color: transparent; -webkit-text-stroke: 2px var(--arctic-green); text-shadow: 0 0 40px rgba(0, 255, 0, 0.25), 0 0 80px rgba(0, 255, 0, 0.08); line-height: 1; margin-bottom: 0.5rem; animation: notFoundPulse 3s ease-in-out infinite alternate; } @keyframes notFoundPulse { from { -webkit-text-stroke-color: var(--arctic-green); text-shadow: 0 0 30px rgba(0, 255, 0, 0.25), 0 0 60px rgba(0, 255, 0, 0.08); } to { -webkit-text-stroke-color: var(--arctic-blue); text-shadow: 0 0 40px rgba(0, 191, 255, 0.35), 0 0 80px rgba(0, 191, 255, 0.12); } } .not-found-icon { font-size: 2.5rem; color: var(--arctic-blue); margin-bottom: 1.5rem; opacity: 0.7; display: block; animation: compassDrift 6s ease-in-out infinite alternate; } @keyframes compassDrift { from { transform: rotate(-15deg); opacity: 0.6; } to { transform: rotate(15deg); opacity: 0.9; } } .not-found-divider { width: 60px; height: 1px; background: linear-gradient(90deg, transparent, var(--arctic-green), transparent); margin: 0 auto; } .not-found-links { margin-top: 2.5rem; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 0.5rem 1.25rem; } .not-found-links a { color: var(--arctic-gray); font-size: 0.8rem; text-decoration: none; text-transform: uppercase; letter-spacing: 1.5px; font-family: 'Orbitron', sans-serif; transition: color 0.25s ease; } .not-found-links a:hover { color: var(--arctic-blue); } /* --- Accessibility: reduce motion --- */ @media (prefers-reduced-motion: reduce) { .js-animate .reveal, .js-animate .reveal-left, .js-animate .reveal-right, .js-animate .reveal-scale { opacity: 1; transform: none; transition: none; } .reveal-stagger.revealed > * { opacity: 1; animation: none; } .aurora-bg::before, .aurora-bg::after, .hero-logo, .arctic-divider, .section-dark::before, .project-card .project-image, .arctic-card::before { animation: none; } .typewriter { visibility: visible; border-right: none; animation: none; } #particle-canvas { display: none; } } /* ============================================ Admin Panel Styles ============================================ */ /* Discreet footer admin link */ .admin-discreet { color: rgba(255,255,255,0.008); font-size: 0.7rem; transition: color 0.3s; text-decoration: none; margin: 0 0.5rem; } .admin-discreet:hover { color: rgba(0,255,0,0.4); } /* Login page */ .admin-login-page { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: var(--dark-bg); padding: 2rem; } .admin-login-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 3rem 2.5rem; max-width: 420px; width: 100%; box-shadow: 0 8px 32px rgba(0,0,0,0.4); } .admin-login-header { text-align: center; margin-bottom: 2rem; } .admin-login-header i { font-size: 2.5rem; color: var(--arctic-green); margin-bottom: 0.8rem; display: block; } .admin-login-header h2 { font-family: 'Orbitron', sans-serif; font-size: 1.3rem; color: var(--text-white); } .admin-login-footer { text-align: center; margin-top: 1.5rem; } .admin-back-link { color: var(--arctic-gray); font-size: 0.85rem; text-decoration: none; transition: color 0.3s; } .admin-back-link:hover { color: var(--arctic-green); } /* Admin forms */ .admin-form-group { margin-bottom: 1.5rem; } .admin-label { display: block; color: var(--arctic-gray); font-size: 0.85rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 1px; } .admin-input-wrap { position: relative; } .admin-input-wrap i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: var(--arctic-gray); font-size: 0.9rem; } .admin-input { width: 100%; padding: 0.8rem 1rem 0.8rem 2.5rem; background: rgba(255,255,255,0.04); border: 1px solid var(--card-border); border-radius: 8px; color: var(--text-white); font-size: 1rem; transition: border-color 0.3s; box-sizing: border-box; } .admin-input:focus { outline: none; border-color: var(--arctic-green); } /* Admin alerts */ .admin-alert { padding: 0.8rem 1rem; border-radius: 8px; margin-bottom: 1.5rem; font-size: 0.9rem; } .admin-alert-error { background: rgba(220,53,69,0.12); border: 1px solid rgba(220,53,69,0.3); color: var(--text-danger); } /* Admin buttons */ .admin-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; border-radius: 8px; font-size: 0.9rem; font-weight: 500; cursor: pointer; transition: all 0.3s; text-decoration: none; border: none; } .admin-btn-primary { background: var(--arctic-green); color: var(--text-on-accent); font-weight: 600; } .admin-login-page .admin-btn-primary { width: 100%; justify-content: center; } .admin-btn-primary:hover { background: var(--bg-accent-hover); box-shadow: 0 4px 15px rgba(0,255,0,0.3); } .admin-btn-ghost { background: transparent; border: 1px solid var(--card-border); color: var(--arctic-gray); } .admin-btn-ghost:hover { border-color: var(--arctic-green); color: var(--arctic-green); } .admin-btn-danger { background: rgba(220,53,69,0.15); border: 1px solid rgba(220,53,69,0.3); color: var(--text-danger); } .admin-btn-danger:hover { background: rgba(220,53,69,0.25); } /* Admin dashboard page */ .admin-page { min-height: 100vh; background: var(--dark-bg); padding: 7rem 2rem 2rem; } .admin-container { max-width: 1000px; margin: 0 auto; } .admin-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 3rem; } .admin-header h1 { font-family: 'Orbitron', sans-serif; font-size: 1.5rem; color: var(--text-white); } .admin-header h1 i { color: var(--arctic-green); margin-right: 0.5rem; } /* Dashboard cards */ .admin-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 1.5rem; margin-bottom: 3rem; } .admin-card { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; padding: 2rem 1.5rem; text-decoration: none; transition: all 0.3s; display: flex; flex-direction: column; } .admin-card:hover { border-color: var(--arctic-green); transform: translateY(-4px); box-shadow: 0 8px 25px rgba(0,255,0,0.1); } .admin-card-icon { font-size: 2rem; color: var(--arctic-green); margin-bottom: 1rem; } .admin-card h3 { color: var(--text-white); font-size: 1.1rem; margin-bottom: 0.5rem; } .admin-card p { color: var(--arctic-gray); font-size: 0.85rem; line-height: 1.5; flex: 1; } .admin-card-action { color: var(--arctic-green); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; margin-top: 1rem; } .admin-card-coming-soon { opacity: 0.5; pointer-events: none; } .admin-footer-bar { border-top: 1px solid var(--card-border); padding-top: 1.5rem; display: flex; justify-content: flex-end; } /* Admin header actions */ .admin-header-actions { display: flex; gap: 0.75rem; align-items: center; } /* Admin loading / empty states */ .admin-loading, .admin-empty { text-align: center; padding: 4rem 2rem; color: var(--arctic-gray); } .admin-loading i, .admin-empty i { font-size: 2.5rem; margin-bottom: 1rem; display: block; color: var(--arctic-green); } /* Admin table */ .admin-table-wrap { overflow-x: auto; border-radius: 12px; border: 1px solid var(--card-border); } .admin-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .admin-table th { background: rgba(255,255,255,0.03); color: var(--arctic-gray); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; padding: 0.8rem 1rem; text-align: left; border-bottom: 1px solid var(--card-border); } .admin-table td { padding: 0.8rem 1rem; border-bottom: 1px solid rgba(255,255,255,0.04); color: var(--text-white); vertical-align: middle; } .admin-table tbody tr:hover { background: rgba(0,255,0,0.02); } .admin-row-hidden { opacity: 0.45; } .admin-project-title { display: flex; align-items: center; font-weight: 500; } /* Admin badges */ .admin-badge { display: inline-block; padding: 0.2rem 0.6rem; border-radius: 4px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; } .admin-badge-photo { background: rgba(0,255,0,0.1); color: var(--arctic-green); } .admin-badge-video { background: rgba(0,191,255,0.1); color: var(--arctic-blue); } /* Admin icon buttons */ .admin-btn-icon { background: transparent; border: 1px solid var(--card-border); color: var(--arctic-gray); width: 32px; height: 32px; border-radius: 6px; cursor: pointer; transition: all 0.2s; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; } .admin-btn-icon:hover { border-color: var(--arctic-green); color: var(--arctic-green); } .admin-btn-icon:disabled { opacity: 0.3; cursor: not-allowed; } .admin-btn-icon-danger:hover { border-color: var(--border-danger); color: var(--text-danger); } .admin-actions { display: flex; gap: 0.4rem; } /* Admin modal */ .admin-modal-backdrop { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: flex; align-items: center; justify-content: center; z-index: 10000; padding: 2rem; } .admin-modal { background: var(--card-bg); border: 1px solid var(--card-border); border-radius: 12px; max-width: 640px; width: 100%; max-height: 85vh; overflow-y: auto; box-shadow: 0 16px 48px rgba(0,0,0,0.5); } .admin-modal-sm { max-width: 420px; } .admin-modal-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 2rem; border-bottom: 1px solid var(--card-border); } .admin-modal-header h2 { font-size: 1.1rem; color: var(--text-white); font-family: 'Orbitron', sans-serif; } .admin-modal-body { padding: 1.5rem 2rem; } .admin-modal-footer { display: flex; justify-content: flex-end; gap: 0.75rem; padding-top: 1.5rem; border-top: 1px solid var(--card-border); margin-top: 1rem; } /* Admin form layout */ .admin-form-row { display: flex; gap: 1rem; margin-bottom: 1rem; } .admin-form-flex { flex: 1; } .admin-form-group { margin-bottom: 1rem; } .admin-form-group .admin-input { padding-left: 1rem; } textarea.admin-input { resize: vertical; min-height: 60px; } .admin-hint { display: block; color: var(--arctic-gray); font-size: 0.78rem; margin-top: 0.3rem; } .admin-hint a { color: var(--arctic-blue); } .admin-toggle-wrap { display: flex; align-items: center; gap: 0.5rem; padding-top: 0.5rem; color: var(--text-white); } .admin-gradient-preview { height: 40px; border-radius: 6px; margin-top: 0.5rem; border: 1px solid var(--card-border); } /* Admin select */ select.admin-input { appearance: auto; cursor: pointer; } @media (max-width: 640px) { .admin-form-row { flex-direction: column; } .admin-header { flex-direction: column; gap: 1rem; align-items: flex-start; } .admin-header-actions { width: 100%; } } /* Admin effects settings */ .admin-settings-section { background: var(--card-bg, #111); border: 1px solid var(--card-border, #1a1a1a); border-radius: 12px; padding: 2rem; margin-bottom: 1.5rem; } .admin-settings-section h3 { font-family: 'Orbitron', sans-serif; font-size: 1.1rem; color: var(--arctic-green); margin-bottom: 0.5rem; } .admin-settings-section h3 i { margin-right: 0.5rem; } .admin-settings-desc { color: var(--arctic-gray); font-size: 0.85rem; margin-bottom: 1.5rem; line-height: 1.5; } .admin-range { width: 100%; accent-color: var(--arctic-green); cursor: pointer; height: 6px; margin: 0.5rem 0; } .admin-range-value { display: inline-block; font-family: 'Orbitron', monospace; font-size: 0.85rem; color: var(--arctic-green); min-width: 60px; text-align: right; } .admin-alert-success { background: rgba(0, 255, 0, 0.08); border: 1px solid rgba(0, 255, 0, 0.25); color: var(--arctic-green); padding: 1rem 1.5rem; border-radius: 8px; margin-bottom: 2rem; font-size: 0.9rem; } .admin-alert-success i { margin-right: 0.5rem; } .admin-alert-danger { background: rgba(220, 40, 40, 0.1); border: 1px solid rgba(220, 40, 40, 0.3); color: var(--text-danger); padding: 1rem 1.5rem; border-radius: 8px; margin-bottom: 2rem; font-size: 0.9rem; } .admin-alert-danger i { margin-right: 0.5rem; } .admin-field { margin-bottom: 1rem; } .admin-field label { display: block; font-size: 0.75rem; color: var(--arctic-gray, #888); text-transform: uppercase; letter-spacing: 1px; margin-bottom: 0.4rem; } .admin-field input, .admin-field textarea, .admin-field select { width: 100%; padding: 10px 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--input-text); font-size: 0.9rem; font-family: 'Roboto', sans-serif; outline: none; transition: border-color 0.3s ease; border-radius: 4px; } .admin-field input:focus, .admin-field textarea:focus, .admin-field select:focus { border-color: var(--arctic-green, #00FF00); } .admin-field small { display: block; margin-top: 0.3rem; font-size: 0.75rem; color: var(--arctic-gray, #888); } .admin-modal-close { background: none; border: none; color: rgba(255, 255, 255, 0.5); font-size: 1.2rem; cursor: pointer; transition: color 0.3s ease; padding: 4px; } .admin-modal-close:hover { color: var(--text-danger); } .admin-btn-sm { padding: 4px 10px; font-size: 0.75rem; } /* ---- Portal Status Badges ---- */ .portal-status-badge { display: inline-block; font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px; padding: 4px 12px; border-radius: 3px; white-space: nowrap; } .portal-status-active { background: rgba(0, 255, 0, 0.12); color: var(--arctic-green, #00FF00); border: 1px solid rgba(0, 255, 0, 0.25); } .portal-status-completed { background: rgba(0, 119, 255, 0.12); color: var(--arctic-blue, #0077FF); border: 1px solid rgba(0, 119, 255, 0.25); } .portal-status-on-hold { background: rgba(255, 200, 0, 0.12); color: var(--text-warning); border: 1px solid rgba(255, 200, 0, 0.25); } .portal-status-cancelled { background: rgba(220, 40, 40, 0.12); color: var(--text-danger); border: 1px solid rgba(220, 40, 40, 0.25); } /* ---- Portal Form Inputs ---- */ .portal-input { width: 100%; padding: 10px 14px; background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.15); color: var(--input-text); font-size: 0.9rem; outline: none; transition: border-color 0.3s ease; } .portal-input:focus { border-color: var(--arctic-blue); } /* ---- Portal Layout ---- */ .portal-navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 100; background: rgba(0, 0, 0, 0.92); border-bottom: 1px solid var(--arctic-border); backdrop-filter: blur(12px); } .portal-navbar-inner { display: flex; align-items: center; justify-content: space-between; height: 64px; } .portal-brand { display: flex; align-items: center; text-decoration: none; } .portal-brand-logo { height: 40px; width: auto; } .portal-brand-text { margin-left: 0.75rem; font-family: 'Orbitron', sans-serif; font-size: 0.85rem; color: var(--arctic-blue); text-transform: uppercase; letter-spacing: 2px; } .portal-nav-actions { display: flex; align-items: center; gap: 1.5rem; } .portal-company-name { color: var(--arctic-gray); font-size: 0.85rem; } .portal-company-icon { margin-right: 6px; color: var(--arctic-blue); } .portal-nav-link { color: rgba(255, 255, 255, 0.7); text-decoration: none; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 1px; transition: color 0.3s ease; } .portal-nav-link:hover { color: var(--arctic-blue); } .portal-sign-out { background: none; border: 1px solid rgba(255, 255, 255, 0.2); color: rgba(255, 255, 255, 0.6); padding: 6px 16px; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; cursor: pointer; transition: all 0.3s ease; font-family: 'Roboto', sans-serif; } .portal-sign-out:hover { border-color: var(--arctic-blue); color: var(--arctic-blue); } .portal-main { padding-top: 5rem; min-height: 100vh; } .portal-footer-inner { text-align: center; padding: 1.5rem 0; border-top: 1px solid rgba(0, 119, 255, 0.15); } .portal-footer-inner p { color: var(--arctic-gray); font-size: 0.8rem; margin: 0; } .portal-footer-link { color: var(--arctic-blue); text-decoration: none; } .portal-footer-link:hover { text-decoration: underline; } /* Light theme portal overrides */ [data-theme="light"] .portal-navbar { background: rgba(244, 246, 249, 0.95); border-bottom-color: rgba(0, 119, 204, 0.12); } [data-theme="light"] .portal-nav-link { color: rgba(26, 26, 46, 0.7); } [data-theme="light"] .portal-nav-link:hover { color: var(--arctic-blue); } [data-theme="light"] .portal-sign-out { border-color: rgba(0, 0, 0, 0.15); color: rgba(26, 26, 46, 0.6); } [data-theme="light"] .portal-sign-out:hover { border-color: var(--arctic-blue); color: var(--arctic-blue); } [data-theme="light"] .portal-footer-inner { border-top-color: rgba(0, 119, 204, 0.12); } /* ---- Admin Upload UI ---- */ .admin-upload-zone { position: relative; border: 2px dashed var(--card-border); border-radius: 8px; padding: 2rem 1.5rem; text-align: center; transition: border-color 0.3s, background 0.3s; cursor: pointer; } .admin-upload-zone:hover { border-color: var(--arctic-green); background: rgba(0, 255, 0, 0.03); } .admin-upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; height: 100%; } .admin-upload-zone-content { display: flex; flex-direction: column; align-items: center; gap: 0.4rem; pointer-events: none; } .admin-upload-zone-content i { font-size: 2rem; color: var(--arctic-gray); } .admin-upload-zone-content span { color: var(--arctic-gray); font-size: 0.9rem; } .admin-upload-zone-content small { color: var(--text-muted-strong); font-size: 0.78rem; } .admin-upload-preview { display: flex; align-items: center; gap: 1rem; padding: 0.75rem; border: 1px solid var(--card-border); border-radius: 8px; background: rgba(255,255,255,0.02); } .admin-upload-img { width: 80px; height: 80px; object-fit: cover; border-radius: 6px; border: 1px solid var(--card-border); } .admin-upload-img-round { border-radius: 50%; } .admin-upload-video-thumb { width: 80px; height: 80px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; background: rgba(0, 191, 255, 0.08); border: 1px solid var(--card-border); border-radius: 6px; color: var(--arctic-blue); font-size: 0.7rem; } .admin-upload-video-thumb i { font-size: 1.5rem; } .admin-btn-remove-media { background: rgba(220, 53, 69, 0.12); border: 1px solid rgba(220, 53, 69, 0.3); color: var(--text-danger); padding: 0.4rem 0.8rem; border-radius: 6px; font-size: 0.8rem; cursor: pointer; transition: all 0.2s; white-space: nowrap; } .admin-btn-remove-media:hover { background: rgba(220, 53, 69, 0.25); } /* Admin table thumbnails */ .admin-thumb { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.03); border: 1px solid var(--card-border); border-radius: 4px; font-size: 0.85rem; color: var(--arctic-gray); } .admin-thumb-round { border-radius: 50%; } .admin-thumb-img { width: 36px; height: 36px; object-fit: cover; border-radius: 4px; border: 1px solid var(--card-border); } .admin-thumb-img.admin-thumb-round { border-radius: 50%; } /* ---- Admin Icon Picker ---- */ .admin-icon-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(42px, 1fr)); gap: 6px; margin-bottom: 0.5rem; } .admin-icon-option { width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.03); border: 1px solid var(--card-border); border-radius: 6px; color: var(--arctic-gray); font-size: 1.1rem; cursor: pointer; transition: all 0.2s; } .admin-icon-option:hover { border-color: var(--arctic-green); color: var(--arctic-green); background: rgba(0, 255, 0, 0.06); } .admin-icon-option.active { border-color: var(--arctic-green); color: var(--arctic-green); background: rgba(0, 255, 0, 0.12); box-shadow: 0 0 8px rgba(0, 255, 0, 0.2); } /* ---- Admin Content Editor ---- */ .admin-content-intro { color: var(--arctic-gray); font-size: 0.9rem; line-height: 1.6; margin-bottom: 2rem; } .admin-content-section { border: 1px solid var(--card-border); border-radius: 10px; margin-bottom: 1rem; overflow: hidden; background: var(--card-bg); } .admin-content-section-header { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 1.2rem 1.5rem; background: transparent; border: none; color: var(--text-white); font-size: 1rem; font-weight: 600; cursor: pointer; transition: background 0.2s; } .admin-content-section-header:hover { background: rgba(0, 255, 0, 0.03); } .admin-content-section-header span { display: flex; align-items: center; gap: 0.6rem; } .admin-content-section-header span i { color: var(--arctic-green); } .admin-content-chevron { transition: transform 0.3s; color: var(--arctic-gray); font-size: 0.85rem; } .admin-content-section.expanded .admin-content-chevron { transform: rotate(180deg); } .admin-content-section-body { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; padding: 0 1.5rem; } .admin-content-section.expanded .admin-content-section-body { max-height: 9000px; padding: 0.5rem 1.5rem 1.5rem; } .admin-content-field { margin-bottom: 1.2rem; } .admin-content-field-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.4rem; } .admin-content-field-header .admin-label { margin-bottom: 0; } .admin-content-textarea { resize: vertical; min-height: 70px; } .admin-btn-reset { background: transparent; border: 1px solid rgba(255, 165, 0, 0.3); color: var(--border-warning); padding: 0.2rem 0.6rem; border-radius: 4px; font-size: 0.72rem; cursor: pointer; transition: all 0.2s; text-transform: uppercase; letter-spacing: 0.5px; } .admin-btn-reset:hover { background: rgba(255, 165, 0, 0.1); border-color: var(--border-warning); } /* Gallery uploaded media thumbnail */ .gallery-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; } /* Admin info grid (Settings page) */ .admin-info-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 1rem; margin-top: 1rem; } .admin-info-item { background: rgba(255, 255, 255, 0.03); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 8px; padding: 1rem 1.2rem; display: flex; flex-direction: column; gap: 0.3rem; } .admin-info-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--arctic-gray); } .admin-info-value { font-size: 1rem; color: var(--arctic-green); font-family: 'Orbitron', sans-serif; } /* Sticky bottom save bar (Effects & Content pages) */ .admin-sticky-footer { position: fixed; bottom: 0; left: 0; right: 0; z-index: 200; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 2rem; background: rgba(8, 12, 22, 0.97); border-top: 1px solid rgba(0, 255, 0, 0.25); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.5), 0 -1px 0 rgba(0, 255, 0, 0.1); backdrop-filter: blur(8px); } .admin-sticky-footer-status { display: flex; align-items: center; font-size: 0.85rem; } .admin-sticky-saved { color: var(--arctic-green); display: flex; align-items: center; gap: 0.5rem; animation: fadeInUp 0.3s ease; } .admin-sticky-hint { color: var(--arctic-gray); display: flex; align-items: center; gap: 0.5rem; opacity: 0.7; } .admin-sticky-footer-actions { display: flex; align-items: center; gap: 0.75rem; flex-shrink: 0; } /* Extra bottom padding on pages with sticky footer so last content isn't hidden */ .admin-page-has-footer { padding-bottom: 5rem !important; } /* Push back-to-top FAB above the sticky footer when it's present */ .arctic-site:has(.admin-sticky-footer) #back-to-top-fab { bottom: 5rem; } @media (max-width: 640px) { .admin-sticky-footer { flex-direction: column; gap: 0.5rem; padding: 0.75rem 1rem; } .admin-sticky-footer-status { display: none; } .admin-sticky-footer-actions { width: 100%; justify-content: stretch; } .admin-sticky-footer-actions .admin-btn { flex: 1; justify-content: center; } } /* ============================================ Light Theme — Element-specific Overrides For hardcoded rgba / colors not using vars ============================================ */ /* Smooth transition when toggling */ html, html body, .arctic-card, .hero, .section-dark, .admin-page, .admin-login-page, .admin-card, .admin-modal, .admin-settings-section, .admin-content-section, .arctic-footer, .footer-brand p, .footer-links ul li a, .footer-contact p, .footer-social a, .footer-bottom p, .form-arctic .form-control, .portal-input, .admin-field input, .admin-field textarea, .admin-field select, .filter-btn, .team-card, .portal-status-badge, .admin-btn, .admin-alert-error, .admin-alert-danger, .admin-upload-zone-content small, .validation-message { transition: background-color 0.35s ease, color 0.35s ease, border-color 0.35s ease; } /* Hero background */ [data-theme="light"] .hero { background: radial-gradient(ellipse at center bottom, rgba(0, 135, 90, 0.06) 0%, transparent 60%), radial-gradient(ellipse at top right, rgba(0, 119, 204, 0.04) 0%, transparent 50%), var(--arctic-black); } [data-theme="light"] .hero::before { background: linear-gradient(135deg, rgba(0, 135, 90, 0.04) 0%, transparent 50%), linear-gradient(225deg, rgba(0, 119, 204, 0.03) 0%, transparent 50%); } [data-theme="light"] .hero h1 { text-shadow: none; } /* Hero logo — softer glow for light theme */ [data-theme="light"] .hero-logo { filter: drop-shadow(0 0 10px rgba(0, 135, 90, 0.15)); animation: logoGlowLight 3s ease-in-out infinite alternate; } @keyframes logoGlowLight { from { filter: drop-shadow(0 0 8px rgba(0, 135, 90, 0.12)); } to { filter: drop-shadow(0 0 18px rgba(0, 135, 90, 0.3)); } } /* Hero logo float — softer shadow for light theme */ [data-theme="light"] .hero-logo { animation: logoFloatLight 4s ease-in-out infinite alternate; } @keyframes logoFloatLight { from { transform: translateY(0); filter: drop-shadow(0 0 8px rgba(0, 135, 90, 0.12)); } to { transform: translateY(-10px); filter: drop-shadow(0 0 18px rgba(0, 135, 90, 0.25)); } } /* Hero subtitle gradient shift — muted for light */ [data-theme="light"] .hero .text-blue { animation: gradientShiftLight 4s ease-in-out infinite alternate; } @keyframes gradientShiftLight { 0% { color: var(--arctic-blue); text-shadow: 0 0 12px rgba(0, 119, 204, 0.15); } 100% { color: #0099e6; text-shadow: 0 0 18px rgba(0, 119, 204, 0.2); } } /* Aurora background (tone down for light) */ [data-theme="light"] .aurora-bg::before { background: radial-gradient(ellipse, rgba(0, 135, 90, 0.08), transparent 70%); opacity: 0.3; } [data-theme="light"] .aurora-bg::after { background: radial-gradient(ellipse, rgba(0, 119, 204, 0.06), transparent 70%); opacity: 0.3; } /* Section dark grid overlay */ [data-theme="light"] .section-dark::before { background-image: linear-gradient(rgba(0, 135, 90, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(0, 135, 90, 0.04) 1px, transparent 1px); } /* Chain items */ [data-theme="light"] .chain-item { background: var(--arctic-black); } [data-theme="light"] .chain-item .chain-icon { background: var(--arctic-black); } [data-theme="light"] .chain-item:hover .chain-icon { background: var(--arctic-green); color: #ffffff; } /* Project card image gradient */ [data-theme="light"] .project-card .project-image { background: linear-gradient(135deg, rgba(0, 135, 90, 0.08), rgba(0, 119, 204, 0.08)); } [data-theme="light"] .project-card .project-image::after { background: linear-gradient(transparent, var(--arctic-card)); } /* Project metric badge */ [data-theme="light"] .project-card .project-metric { background: rgba(0, 135, 90, 0.08); border: 1px solid rgba(0, 135, 90, 0.2); } /* Gallery tags */ [data-theme="light"] .gallery-tag.photo, [data-theme="light"] .lightbox-tag.photo { background: rgba(0, 135, 90, 0.08); border-color: rgba(0, 135, 90, 0.25); } [data-theme="light"] .gallery-tag.video, [data-theme="light"] .lightbox-tag.video { background: rgba(0, 119, 204, 0.08); border-color: rgba(0, 119, 204, 0.25); } /* Card hover shadows */ [data-theme="light"] .arctic-card:hover { box-shadow: 0 10px 40px rgba(0, 135, 90, 0.1); } [data-theme="light"] .project-card:hover { box-shadow: 0 15px 50px rgba(0, 119, 204, 0.1); } [data-theme="light"] .gallery-item:hover { box-shadow: 0 15px 45px rgba(0, 119, 204, 0.1); } [data-theme="light"] .team-card:hover { box-shadow: 0 10px 40px rgba(0, 119, 204, 0.08); } /* Team avatar */ [data-theme="light"] .team-card .team-avatar { background: rgba(0, 135, 90, 0.06); } /* Filter buttons */ [data-theme="light"] .filter-btn.active { background: rgba(0, 119, 204, 0.08); } /* Contact icon hover */ [data-theme="light"] .contact-info-item:hover .contact-icon { background: rgba(0, 135, 90, 0.08); box-shadow: 0 0 15px rgba(0, 135, 90, 0.15); } /* Form inputs */ [data-theme="light"] .form-arctic .form-control { background: #ffffff; color: #1a1a2e; } [data-theme="light"] .form-arctic .form-control:focus { background: #ffffff; color: #1a1a2e; box-shadow: 0 0 0 2px rgba(0, 135, 90, 0.15); } [data-theme="light"] .form-arctic .form-control::placeholder { color: #999; } /* Lightbox */ [data-theme="light"] .lightbox-overlay { background: rgba(0, 0, 0, 0.6); } /* Scrollbar */ [data-theme="light"] ::-webkit-scrollbar-track { background: #e8ecf1; } [data-theme="light"] ::-webkit-scrollbar-thumb { background: #c0c5cd; } [data-theme="light"] ::-webkit-scrollbar-thumb:hover { background: var(--arctic-green); } /* Map container (remove dark-mode invert) */ [data-theme="light"] .map-container { filter: grayscale(30%) contrast(95%); } [data-theme="light"] .map-container:hover { filter: grayscale(10%) contrast(100%); } /* Back-to-top FAB */ [data-theme="light"] #back-to-top-fab { background: rgba(255, 255, 255, 0.95); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1); } [data-theme="light"] #back-to-top-fab:hover { background: var(--arctic-green); color: #fff; } /* noscript fallback */ [data-theme="light"] noscript div { background: #f4f6f9 !important; color: #00875a !important; } /* Admin panel — inputs and tables */ [data-theme="light"] .admin-input { background: rgba(0, 0, 0, 0.03); color: #1a1a2e; } [data-theme="light"] .admin-table th { background: rgba(0, 0, 0, 0.03); } [data-theme="light"] .admin-table td { border-bottom-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .admin-table tbody tr:hover { background: rgba(0, 135, 90, 0.03); } [data-theme="light"] .admin-field input, [data-theme="light"] .admin-field textarea, [data-theme="light"] .admin-field select { background: rgba(0, 0, 0, 0.03); border-color: var(--card-border); color: #1a1a2e; } [data-theme="light"] .admin-info-item { background: rgba(0, 0, 0, 0.02); border-color: rgba(0, 0, 0, 0.06); } [data-theme="light"] .admin-icon-option { background: rgba(0, 0, 0, 0.02); } [data-theme="light"] .admin-icon-option:hover { background: rgba(0, 135, 90, 0.06); } [data-theme="light"] .admin-icon-option.active { background: rgba(0, 135, 90, 0.1); } [data-theme="light"] .admin-upload-preview { background: rgba(0, 0, 0, 0.02); } [data-theme="light"] .admin-upload-zone:hover { background: rgba(0, 135, 90, 0.03); } /* Admin discreet footer link */ [data-theme="light"] .admin-discreet { color: rgba(0, 0, 0, 0.01); } [data-theme="light"] .admin-discreet:hover { color: rgba(0, 135, 90, 0.5); } /* Admin modal close */ [data-theme="light"] .admin-modal-close { color: rgba(0, 0, 0, 0.4); } /* Admin sticky footer */ [data-theme="light"] .admin-sticky-footer { background: rgba(244, 246, 249, 0.97); border-top-color: rgba(0, 135, 90, 0.25); box-shadow: 0 -4px 24px rgba(0, 0, 0, 0.08), 0 -1px 0 rgba(0, 135, 90, 0.1); } /* Portal inputs */ [data-theme="light"] .portal-input { background: rgba(0, 0, 0, 0.03); border-color: var(--card-border); color: #1a1a2e; } /* Not-found page */ [data-theme="light"] .not-found-code { -webkit-text-stroke-color: var(--arctic-green); text-shadow: none; animation: notFoundPulseLight 3s ease-in-out infinite alternate; } @keyframes notFoundPulseLight { from { -webkit-text-stroke-color: var(--arctic-green); text-shadow: 0 0 15px rgba(0, 135, 90, 0.12); } to { -webkit-text-stroke-color: var(--arctic-blue); text-shadow: 0 0 20px rgba(0, 119, 204, 0.15); } } [data-theme="light"] .not-found-aurora { background: radial-gradient(ellipse at 50% 40%, rgba(0, 119, 204, 0.04) 0%, transparent 65%), radial-gradient(ellipse at 30% 70%, rgba(0, 135, 90, 0.03) 0%, transparent 50%); } /* Footer text overrides for hardcoded #999 / #555 */ [data-theme="light"] .footer-brand p, [data-theme="light"] .footer-links ul li a, [data-theme="light"] .footer-contact p { color: #666; } [data-theme="light"] .footer-bottom p, /* Focus-visible ring [data-theme="light"] a:focus-visible, [data-theme="light"] button:focus-visible, [data-theme="light"] .btn-arctic:focus-visible, [data-theme="light"] .btn-arctic-blue:focus-visible, [data-theme="light"] .btn-arctic-solid:focus-visible, [data-theme="light"] .nav-cta:focus-visible { box-shadow: 0 0 0 4px rgba(0, 135, 90, 0.15); } /* Project metric glow on hover — softer for light */ [data-theme="light"] .project-card:hover .project-metric { box-shadow: 0 0 8px rgba(0, 135, 90, 0.2); } /* ============================================ Light Theme — Visual Warmth & Color Accents Break up flat white backgrounds with subtle tints, gradients, and colored borders. Dark theme is NOT affected by these rules. ============================================ */ /* Alternating section tints — warm green/blue wash */ [data-theme="light"] .section:nth-of-type(even) { background: linear-gradient(180deg, rgba(0, 135, 90, 0.025) 0%, rgba(0, 119, 204, 0.02) 100%); } [data-theme="light"] .section-dark { background: linear-gradient(180deg, #e2eaf2 0%, #edf1f7 100%); } /* Cards — subtle left accent border + light shadow */ [data-theme="light"] .arctic-card { border-left: 3px solid var(--arctic-green); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); } [data-theme="light"] .arctic-card:hover { box-shadow: 0 8px 32px rgba(0, 135, 90, 0.12); border-left-color: var(--arctic-blue); } /* Team cards — blue top accent */ [data-theme="light"] .team-card { border-top: 3px solid var(--arctic-blue); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04); } [data-theme="light"] .team-card:hover { border-top-color: var(--arctic-green); } /* Team avatar — subtle green-to-blue gradient ring */ [data-theme="light"] .team-card .team-avatar { background: linear-gradient(135deg, rgba(0, 135, 90, 0.08), rgba(0, 119, 204, 0.08)); border-color: var(--arctic-blue); } /* Project cards — blue left accent */ [data-theme="light"] .project-card { border-left: 3px solid var(--arctic-blue); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); } [data-theme="light"] .project-card:hover { border-left-color: var(--arctic-green); } /* Section header underline — visible gradient bar */ [data-theme="light"] .section-header h2::after { height: 3px; width: 100px; background: linear-gradient(90deg, var(--arctic-green), var(--arctic-blue)); opacity: 1; } /* Stats bar — colored number backgrounds */ [data-theme="light"] .stat-item .stat-number { text-shadow: none; background: linear-gradient(135deg, var(--arctic-green), var(--arctic-blue)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } /* Hero section — richer tinted background */ [data-theme="light"] .hero { background: linear-gradient(170deg, rgba(0, 135, 90, 0.05) 0%, rgba(244, 246, 249, 1) 35%, rgba(0, 119, 204, 0.04) 100%); } /* Footer — darker tinted background to visually anchor the page */ [data-theme="light"] .arctic-footer { background: linear-gradient(180deg, #dfe6ed 0%, #d5dee8 100%); border-top: 2px solid transparent; border-image: linear-gradient(90deg, transparent, var(--arctic-green), var(--arctic-blue), transparent) 1; } /* Footer headings — green accent */ [data-theme="light"] .arctic-footer h4 { color: var(--arctic-green); } /* Footer bottom bar — slightly darker */ [data-theme="light"] .footer-bottom { background: rgba(0, 0, 0, 0.02); border-radius: 6px; padding: 1rem; margin-top: 1rem; } /* Buttons — subtle gradient fills in light theme */ [data-theme="light"] .btn-arctic { background: linear-gradient(135deg, rgba(0, 135, 90, 0.06), rgba(0, 119, 204, 0.04)); } [data-theme="light"] .btn-arctic:hover { background: var(--arctic-green); color: #fff; } [data-theme="light"] .btn-arctic-solid { background: linear-gradient(135deg, var(--arctic-green), #009e6c); border-color: var(--arctic-green); color: #fff; } [data-theme="light"] .btn-arctic-solid:hover { background: linear-gradient(135deg, transparent, transparent); color: var(--arctic-green); } /* Contact form — card-like container feel */ [data-theme="light"] .form-arctic .form-control { border-left: 2px solid rgba(0, 135, 90, 0.2); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); } [data-theme="light"] .form-arctic .form-control:focus { border-left-color: var(--arctic-green); box-shadow: 0 0 0 2px rgba(0, 135, 90, 0.12), 0 2px 8px rgba(0, 0, 0, 0.06); } /* Contact icons — tinted circle backgrounds */ [data-theme="light"] .contact-info-item .contact-icon { background: linear-gradient(135deg, rgba(0, 135, 90, 0.08), rgba(0, 119, 204, 0.06)); } /* Value chain — cleaner background for light */ [data-theme="light"] .chain-item .chain-icon { box-shadow: 0 2px 8px rgba(0, 135, 90, 0.1); } /* Gallery items — shadow lift */ [data-theme="light"] .gallery-item { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.05); } /* Divider — bolder gradient */ [data-theme="light"] .arctic-divider { opacity: 0.8; height: 2px; } /* Filter buttons — tinted active state */ [data-theme="light"] .filter-btn { box-shadow: 0 1px 4px rgba(0, 0, 0, 0.04); } [data-theme="light"] .filter-btn.active { background: linear-gradient(135deg, rgba(0, 119, 204, 0.08), rgba(0, 135, 90, 0.05)); box-shadow: 0 2px 8px rgba(0, 119, 204, 0.1); } /* Navbar — subtle bottom gradient glow */ [data-theme="light"] .navbar-scrolled { box-shadow: 0 2px 20px rgba(0, 0, 0, 0.08), 0 1px 0 rgba(0, 135, 90, 0.08) !important; }