/* * igenfix.css — iGEN supplemental stylesheet * Adds missing utility classes and fixes referenced in HTML but absent from style.css. * Add AFTER css/style.css in every HTML page's . */ /* ─── Footer background ─────────────────────────────────────────── */ .footer-bg { background-color: #111111; } /* ─── Social buttons in footer ───────────────────────────────────── */ .btn-social { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border-radius: 50%; font-size: 0.9rem; transition: background-color 0.2s ease, color 0.2s ease; } .btn-social:hover { background-color: #007bff; color: #fff !important; border-color: #007bff; } /* ─── Service card hover transition ──────────────────────────────── */ .transition { transition: transform 0.2s ease, box-shadow 0.2s ease; } .transition:hover { transform: translateY(-4px); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12) !important; } /* ─── Cookie / privacy notice banner ────────────────────────────── */ #cookie-banner { position: fixed; bottom: 0; left: 0; right: 0; z-index: 9999; background: #222; color: #ccc; font-size: 0.875rem; padding: 14px 24px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; box-shadow: 0 -2px 12px rgba(0,0,0,0.25); } #cookie-banner a { color: #aaa; text-decoration: underline; } #cookie-banner button { background: #007bff; color: #fff; border: none; padding: 8px 20px; border-radius: 20px; cursor: pointer; font-size: 0.875rem; white-space: nowrap; } #cookie-banner button:hover { background: #0056b3; } /* ─── Back to top button ─────────────────────────────────────────── */ .back-to-top { position: fixed; bottom: 80px; /* above cookie banner if visible */ right: 30px; z-index: 9998; display: none; width: 44px; height: 44px; padding: 0; border-radius: 50%; display: none; align-items: center; justify-content: center; } /* ─── Navbar active state fix ────────────────────────────────────── */ /* * The JS in main.js auto-sets .active based on current URL. * These rules ensure it looks right regardless of what was * hard-coded in the HTML. */ .navbar-nav .nav-link.active { color: #007bff !important; font-weight: 500; } /* ─── Typewriter hero animation ──────────────────────────────────── */ /* * Used only on index.html hero section. * .hero-eyebrow — small muted line above the title * .hero-title — static "Welcome to iGEN —" line * .hero-typewriter-wrap — flex row: prefix + typed word + cursor * .hero-typed — the changing word with dark pill bg * .hero-cursor — blinking caret */ .hero-eyebrow { font-size: 1.05rem; font-weight: 400; color: #333; letter-spacing: 0.5px; margin-bottom: 6px; } .hero-title { font-family: 'Oswald', sans-serif; font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 700; color: #111; line-height: 1.1; margin-bottom: 4px; } .hero-typewriter-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: nowrap; font-family: 'Oswald', sans-serif; font-size: clamp(2rem, 4.5vw, 3.2rem); font-weight: 700; letter-spacing: 1px; line-height: 1.15; min-height: 1.25em; } .hero-prefix { color: #111; white-space: nowrap; } .hero-typed { color: #fff; background: #111; padding: 2px 10px 4px; border-radius: 6px; white-space: nowrap; min-width: 4px; display: inline-block; vertical-align: middle; } .hero-cursor { display: inline-block; width: 3px; height: 0.82em; background: #111; border-radius: 2px; vertical-align: middle; flex-shrink: 0; animation: tw-blink 0.75s step-end infinite; } @keyframes tw-blink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* On very small screens, allow the typewriter row to wrap */ @media (max-width: 480px) { .hero-typewriter-wrap { flex-wrap: wrap; gap: 6px; } } /* ─── Scroll reveal animations ─────────────────────────────────────── * * How it works: * 1. Elements start with .reveal (invisible, slightly offset). * 2. IntersectionObserver in main.js adds .revealed when the element * enters the viewport. * 3. CSS transition does the rest — no animation library needed. * * Variants: * .reveal-up — fades in upward (default, used for headings + cards) * .reveal-left — slides in from the left (used for left columns) * .reveal-right — slides in from the right (used for right columns) * .reveal-fade — pure fade, no movement (used for full-width rows) * * Stagger: * Add data-delay="1" through data-delay="4" to siblings to cascade them. * ─────────────────────────────────────────────────────────────────── */ /* Base hidden state — applied before JS fires */ .reveal { opacity: 0; transition: opacity 0.65s ease, transform 0.65s ease; will-change: opacity, transform; } /* Direction variants — starting positions */ .reveal-up { transform: translateY(36px); } .reveal-left { transform: translateX(-40px); } .reveal-right { transform: translateX(40px); } .reveal-fade { transform: none; } /* Revealed state — JS adds this class */ .reveal.revealed { opacity: 1; transform: translate(0, 0); } /* Stagger delays for sibling cards (data-delay="1" … "4") */ .reveal[data-delay="1"] { transition-delay: 0.08s; } .reveal[data-delay="2"] { transition-delay: 0.18s; } .reveal[data-delay="3"] { transition-delay: 0.28s; } .reveal[data-delay="4"] { transition-delay: 0.38s; } /* Accessibility: respect user's motion preference */ @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ─── Sticky shrinking navbar ──────────────────────────────────────── * * How it works: * 1. #mainNav starts as a normal in-flow element (position: relative). * 2. Once the user scrolls past the navbar's own height, JS adds * .nav-sticky to #mainNav. * 3. .nav-sticky switches to position: fixed, adds a shadow, and * shrinks the logo and nav padding via CSS transitions. * 4. A placeholder div (#nav-placeholder) is injected by JS with the * same height as the original navbar, preventing the page from * jumping when the navbar leaves the normal flow. * * Targeting: * - #mainNav — outer wrapper div * - #mainNav .navbar — the Bootstrap nav element inside it * - #mainNav .nav-logo— the logo (class added to all 3 pages) * ─────────────────────────────────────────────────────────────────── */ /* Base transition — runs on both sticky and un-sticky states */ #mainNav { transition: box-shadow 0.3s ease, padding 0.3s ease; z-index: 1030; /* above Bootstrap modals / dropdowns */ } /* Sticky state — added by JS on scroll */ #mainNav.nav-sticky { position: fixed; top: 0; left: 0; right: 0; box-shadow: 0 2px 16px rgba(0, 0, 0, 0.10); background: #fff !important; } /* Shrink the Bootstrap nav's vertical padding when sticky */ #mainNav.nav-sticky .navbar { padding-top: 0.4rem !important; padding-bottom: 0.4rem !important; transition: padding 0.3s ease; } /* Shrink the logo smoothly */ #mainNav .nav-logo { transition: height 0.3s ease; } #mainNav.nav-sticky .nav-logo { height: 40px !important; /* shrinks from 60px → 40px */ } /* Shrink the Contact Us button slightly when sticky */ #mainNav.nav-sticky .btn { padding-top: 0.35rem !important; padding-bottom: 0.35rem !important; transition: padding 0.3s ease; } /* Progress bar — thin coloured line at very top of sticky navbar showing how far down the page the user has scrolled */ #nav-progress { position: absolute; bottom: 0; left: 0; height: 2px; width: 0%; background: #007bff; transition: width 0.1s linear; pointer-events: none; } /* On mobile the navbar is already compact — no need to shrink further */ @media (max-width: 991px) { #mainNav.nav-sticky .nav-logo { height: 44px !important; } } /* ─── Dark mode toggle button ──────────────────────────────────────── * * .dm-toggle — the sun/moon pill button that lives in the navbar. * - Uses a CSS pill shape with an animated icon inside. * - Icon switches from moon (light mode) → sun (dark mode) via JS. * - Smooth rotate + fade animation on switch. * ─────────────────────────────────────────────────────────────────── */ .dm-toggle { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid #ccc; background: transparent; color: #555; font-size: 15px; cursor: pointer; transition: background 0.25s ease, border-color 0.25s ease, color 0.25s ease, transform 0.2s ease; flex-shrink: 0; padding: 0; line-height: 1; } .dm-toggle:hover { background: rgba(0, 123, 255, 0.08); border-color: #007bff; color: #007bff; transform: rotate(12deg); } .dm-toggle:focus { outline: 2px solid #007bff; outline-offset: 2px; } .dm-toggle .fa { transition: transform 0.35s ease, opacity 0.2s ease; } .dm-toggle.spinning .fa { transform: rotate(360deg); opacity: 0.5; } /* ─── Dark mode — global variables and base overrides ──────────────── * * Strategy: add class "dark-mode" to . * All overrides are scoped to body.dark-mode so they outrank Bootstrap * and style.css without touching those files. * * Color palette used in dark mode: * --dm-bg #121826 deep navy-dark (page background) * --dm-surface #1c2333 slightly lighter (card / section surface) * --dm-surface2 #242e42 input / hover surface * --dm-border rgba(255,255,255,0.08) subtle border * --dm-text #e2e8f0 primary text * --dm-muted #94a3b8 secondary / muted text * --dm-primary #4d9fff brighter blue for dark backgrounds * ─────────────────────────────────────────────────────────────────── */ /* Smooth color transition on all elements when mode switches */ body { transition: background-color 0.3s ease, color 0.3s ease; } *, *::before, *::after { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.25s ease, box-shadow 0.3s ease; } /* Don't transition transforms (breaks animations) */ .reveal, .dm-toggle, .nav-logo, .btn, .back-to-top { transition: background-color 0.3s ease, border-color 0.3s ease, color 0.25s ease, box-shadow 0.3s ease, opacity 0.65s ease, transform 0.65s ease, height 0.3s ease, padding 0.3s ease; } /* ── Page body & typography ─────────────────────────────────────── */ body.dark-mode { background-color: #121826 !important; color: #e2e8f0 !important; } body.dark-mode h1, body.dark-mode h2, body.dark-mode h3, body.dark-mode h4, body.dark-mode h5, body.dark-mode h6 { color: #e2e8f0 !important; } body.dark-mode p, body.dark-mode li, body.dark-mode span:not(.hero-typed):not(.nav-progress) { color: #cbd5e1; } body.dark-mode a:not(.btn):not(.nav-link):not(.dropdown-item):not(.navbar-brand) { color: #4d9fff; } /* ── Navbar ──────────────────────────────────────────────────────── */ body.dark-mode #mainNav, body.dark-mode #mainNav.nav-sticky, body.dark-mode .navbar, body.dark-mode .navbar.bg-white, body.dark-mode nav.bg-white { background-color: #1c2333 !important; border-bottom: 1px solid rgba(255,255,255,0.06) !important; } body.dark-mode .navbar-light .nav-link { color: #cbd5e1 !important; } body.dark-mode .navbar-light .nav-link:hover, body.dark-mode .navbar-light .nav-link.active { color: #4d9fff !important; } body.dark-mode .navbar-brand, body.dark-mode .navbar-brand.text-secondary { color: #e2e8f0 !important; } body.dark-mode .navbar-toggler { border-color: rgba(255,255,255,0.2) !important; } body.dark-mode .navbar-toggler-icon { filter: invert(1); } body.dark-mode .border-right { border-right-color: rgba(255,255,255,0.1) !important; } /* ── Dropdown menus ──────────────────────────────────────────────── */ body.dark-mode .dropdown-menu { background-color: #1c2333 !important; border: 1px solid rgba(255,255,255,0.1) !important; box-shadow: 0 8px 24px rgba(0,0,0,0.4) !important; } body.dark-mode .dropdown-item { color: #cbd5e1 !important; background-color: transparent !important; } body.dark-mode .dropdown-item:hover, body.dark-mode .dropdown-item:focus { background-color: rgba(77, 159, 255, 0.12) !important; color: #4d9fff !important; } /* ── Dark mode toggle button itself ─────────────────────────────── */ body.dark-mode .dm-toggle { border-color: rgba(255,255,255,0.25); color: #fcd34d; /* warm amber — sun colour */ } body.dark-mode .dm-toggle:hover { background: rgba(252,211,77,0.12); border-color: #fcd34d; color: #fcd34d; } /* ── Hero section ────────────────────────────────────────────────── */ body.dark-mode .bg-primary, body.dark-mode .container-fluid.bg-primary { background-color: #1a2540 !important; } body.dark-mode .hero-eyebrow { color: #94a3b8 !important; } body.dark-mode .hero-title { color: #e2e8f0 !important; } body.dark-mode .hero-prefix { color: #e2e8f0 !important; } body.dark-mode .hero-typed { background: #4d9fff !important; color: #fff !important; } body.dark-mode .hero-cursor { background: #4d9fff !important; } /* ── White / light surfaces (sections, cards) ────────────────────── */ body.dark-mode .bg-white, body.dark-mode .contact-form.bg-white, body.dark-mode .service-item.bg-white { background-color: #1c2333 !important; } body.dark-mode .bg-light, body.dark-mode .team-item .bg-light, body.dark-mode section, body.dark-mode [style*="background: #f8f9fa"], body.dark-mode [style*="background:#f8f9fa"] { background-color: #121826 !important; } /* f8f9fa sections need targeting by inline style — JS handles this too */ /* ── Text colours on dark cards ─────────────────────────────────── */ body.dark-mode .text-body, body.dark-mode .text-dark { color: #e2e8f0 !important; } body.dark-mode .text-muted, body.dark-mode .text-secondary { color: #94a3b8 !important; } body.dark-mode .text-primary { color: #4d9fff !important; } /* ── Borders ─────────────────────────────────────────────────────── */ body.dark-mode .shadow, body.dark-mode .shadow-sm { box-shadow: 0 2px 12px rgba(0,0,0,0.5) !important; } body.dark-mode .rounded, body.dark-mode .rounded-sm { border-color: rgba(255,255,255,0.06) !important; } /* ── Forms ───────────────────────────────────────────────────────── */ body.dark-mode .form-control, body.dark-mode .form-control.bg-light { background-color: #242e42 !important; border-color: rgba(255,255,255,0.1) !important; color: #e2e8f0 !important; } body.dark-mode .form-control::placeholder { color: #64748b !important; } body.dark-mode .form-control:focus { background-color: #2a3650 !important; border-color: #4d9fff !important; box-shadow: 0 0 0 3px rgba(77,159,255,0.2) !important; color: #e2e8f0 !important; } /* ── Buttons ─────────────────────────────────────────────────────── */ body.dark-mode .btn-outline-primary { color: #4d9fff !important; border-color: #4d9fff !important; } body.dark-mode .btn-outline-primary:hover { background-color: #4d9fff !important; color: #fff !important; } body.dark-mode .btn-dark { background-color: #e2e8f0 !important; border-color: #e2e8f0 !important; color: #121826 !important; } body.dark-mode .btn-outline-light { border-color: rgba(255,255,255,0.3) !important; color: #cbd5e1 !important; } body.dark-mode .btn-outline-light:hover { background-color: rgba(255,255,255,0.1) !important; } /* ── Team carousel ───────────────────────────────────────────────── */ body.dark-mode .team-item { background-color: #1c2333; border: 1px solid rgba(255,255,255,0.06); } body.dark-mode .owl-nav button { color: #e2e8f0 !important; background: rgba(255,255,255,0.08) !important; } /* ── Contact info cards ──────────────────────────────────────────── */ body.dark-mode .container-fluid + .container .bg-white, body.dark-mode .col-lg-4 .bg-white { background-color: #1c2333 !important; } /* ── Cookie banner ───────────────────────────────────────────────── */ body.dark-mode #cookie-banner { background: #1c2333 !important; border-top: 1px solid rgba(255,255,255,0.08); } /* ── Back to top button ──────────────────────────────────────────── */ body.dark-mode .back-to-top { background-color: #4d9fff !important; border-color: #4d9fff !important; } /* ── f8f9fa grey section backgrounds ───────────────────────────── * These are set as inline styles in the HTML so CSS attribute * selectors won't reliably match. The JS dark-mode function also * toggles a .dm-section class on these elements as a hook. */ body.dark-mode .dm-section { background-color: #1a2030 !important; } /* ── Scroll progress bar — brighter in dark mode ─────────────────── */ body.dark-mode #nav-progress { background: #4d9fff; } /* ── About page hero (yellow gradient section) ───────────────────── */ body.dark-mode .about-hero { background: linear-gradient(115deg, #1a2540 0%, #0f1729 100%) !important; } body.dark-mode .about-hero .hero-card { background: #1c2333 !important; color: #e2e8f0 !important; } body.dark-mode .about-hero .hero-card li { color: #cbd5e1 !important; } body.dark-mode .about-hero h1, body.dark-mode .about-hero p { color: #e2e8f0 !important; } body.dark-mode .about-hero .pill.badge-yo { background: rgba(255,255,255,0.1) !important; color: #e2e8f0 !important; } /* ── About page cards (feature-card, roadmap, signal, cta-panel) ─── */ body.dark-mode .feature-card, body.dark-mode .roadmap, body.dark-mode .signal, body.dark-mode .cta-panel, body.dark-mode .leader-card { background-color: #1c2333 !important; box-shadow: 0 2px 16px rgba(0,0,0,0.4) !important; } body.dark-mode .milestone { border-left-color: #4d9fff !important; } body.dark-mode .milestone small { color: #64748b !important; } body.dark-mode .brand-divider { background: #4d9fff !important; } body.dark-mode .pill.badge-yo { background: rgba(255,255,255,0.08) !important; color: #cbd5e1 !important; border-color: rgba(255,255,255,0.12) !important; } body.dark-mode .feature-icon { color: #4d9fff !important; } /* ── iframe (Google Maps) ─────────────────────────────────────────── */ body.dark-mode iframe { filter: invert(0.9) hue-rotate(180deg); opacity: 0.85; } /* ── Prefers reduced motion: skip colour transitions ─────────────── */ @media (prefers-reduced-motion: reduce) { body, *, *::before, *::after { transition: none !important; } }