/* ============================================================ TITAN TECH — style.css Single stylesheet for the whole site. BEM-ish class names, no inline styles. Tokens at the top, components below. ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Anton&family=Inter:wght@400;500;600&family=JetBrains+Mono:wght@400;500&family=Noto+Sans+TC:wght@400;500;700&display=swap'); /* ──────────────────────────────────────────────────────────── Design tokens ──────────────────────────────────────────────────────────── */ :root { --bg: #0A1628; --bg-2: #0E1D33; --surface: transparent; --fg-1: #E8EEF7; --fg-2: #7E8FA8; --fg-3: #3A4A63; --border: #2A3A55; --border-strong: #4D6285; --accent: #4DB8FF; --accent-press: #2E94DB; --overlay-scrim: rgba(5,12,24,0.45); --overlay-menu: rgba(10,22,40,0.97); /* Chinese glyphs fall through to 微軟正黑體 per project convention. */ --font-cjk: 'Noto Sans TC', 'PingFang TC', 'Microsoft JhengHei', 'Noto Sans CJK TC', sans-serif; --font-display: 'Anton', var(--font-cjk); --font-body: 'Inter', var(--font-cjk), system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, var(--font-cjk), monospace; --display-xl: clamp(80px, 14vw, 240px); --display-lg: clamp(56px, 9vw, 128px); --display-md: clamp(36px, 4.5vw, 56px); --body-lg: 18px; --body-md: 16px; --body-sm: 14px; --mono-md: 13px; --mono-sm: 11px; --s-1:4px; --s-2:8px; --s-3:12px; --s-4:16px; --s-5:24px; --s-6:32px; --s-7:48px; --s-8:64px; --s-9:96px; --s-10:128px; --gutter: 24px; --max-w: 1440px; --nav-h: 72px; --ease: cubic-bezier(0.2, 0.8, 0.2, 1); --t-fast: 200ms; --t-med: 400ms; --t-slow: 600ms; } @media (min-width: 768px) { :root { --gutter: 48px; } } @media (min-width: 1200px) { :root { --gutter: 64px; } } /* ──────────────────────────────────────────────────────────── Base reset ──────────────────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background-color: var(--bg); background-image: radial-gradient(ellipse 80vw 60vh at 5% 0%, rgba(77, 184, 255, 0.42) 0%, rgba(77, 184, 255, 0) 70%), radial-gradient(ellipse 75vw 65vh at 95% 100%, rgba(42, 111, 219, 0.52) 0%, rgba(42, 111, 219, 0) 70%), radial-gradient(ellipse 60vw 50vh at 50% 50%, rgba(120, 170, 255, 0.16) 0%, rgba(120, 170, 255, 0) 75%); background-attachment: fixed; color: var(--fg-1); font-family: var(--font-body); font-size: var(--body-md); line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } body.is-locked { overflow: hidden; } /* ──────────────────────────────────────────────────────────── Bootstrap 5 compatibility + token bridge Loaded AFTER bootstrap.min.css so our overrides win. ──────────────────────────────────────────────────────────── */ :root { /* Bridge Bootstrap CSS vars to our design tokens */ --bs-body-bg: transparent; --bs-body-color: var(--fg-1); --bs-body-font-family: var(--font-sans); --bs-heading-color: var(--fg-1); --bs-emphasis-color: var(--fg-1); --bs-link-color: var(--accent); --bs-link-hover-color: var(--accent-press); --bs-link-color-rgb: 77, 184, 255; --bs-link-hover-color-rgb: 46, 148, 219; --bs-border-color: var(--border); --bs-secondary-color: var(--fg-2); --bs-tertiary-color: var(--fg-3); --bs-font-monospace: var(--font-mono); --bs-body-line-height: 1.5; } /* Bootstrap underlines all by default — kill that, our links style themselves */ a { text-decoration: none; } a:hover { text-decoration: none; } /* Bootstrap resets headings with margin-bottom: .5rem & line-height: 1.2 — keep ours */ .h1, .h2, .h3, .h4, .h5, .h6 { color: inherit; margin: 0; font-weight: inherit; line-height: inherit; } /* Bootstrap normalizes buttons but we use them heavily for custom UI — guard against default styles */ button { color: inherit; } /* Bootstrap

gets margin-bottom: 1rem — neutralize for tight layouts where we control spacing */ .news-content p, .product-info p, .product-accordion-info p, .footer-tagline, .products-description { margin-bottom: 0; } /* Bootstrap .row + .col within our centered max-width wrappers — make sure the negative gutter margins don't break alignment. Parent sections already have horizontal padding via .page-section and .footer which absorbs the ±0.5*gutter overflow. */ /* Bootstrap .container-fluid has padding; we don't use .container in our layouts */ } /* RWD — adjust glow for small screens */ @media (max-width: 900px) { body { background-image: radial-gradient(ellipse 120vw 50vh at 50% 0%, rgba(77, 184, 255, 0.35) 0%, rgba(77, 184, 255, 0) 70%), radial-gradient(ellipse 120vw 50vh at 50% 100%, rgba(42, 111, 219, 0.42) 0%, rgba(42, 111, 219, 0) 70%); } } img, svg, video { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } main { min-height: 100vh; } /* ──────────────────────────────────────────────────────────── Type utilities ──────────────────────────────────────────────────────────── */ .display-heading, .h1, .h2 { font-family: var(--font-display); font-weight: 400; text-transform: uppercase; letter-spacing: -0.01em; line-height: 0.92; color: var(--fg-1); margin: 0; } .display-heading { font-size: var(--display-md); } .display-heading-nowrap { white-space: nowrap; } p { font-size: var(--body-md); line-height: 1.6; margin: 0 0 1em; } /* ──────────────────────────────────────────────────────────── Chip ──────────────────────────────────────────────────────────── */ .tag { display: inline-flex; align-items: center; gap: 8px; padding: 6px 10px; border: 1px dashed var(--border); font-family: var(--font-mono); font-size: var(--mono-sm); letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-1); border-radius: 0; } .tag-live { background: var(--accent); color: #061321; border-style: solid; border-color: var(--accent); } /* ──────────────────────────────────────────────────────────── Layout ──────────────────────────────────────────────────────────── */ .page-section { padding: 96px var(--gutter); max-width: var(--max-w); margin: 0 auto; } @media (max-width: 767px) { .page-section { padding: 64px var(--gutter); } } /* ──────────────────────────────────────────────────────────── Cascade text (per-character letter swap on hover) Markup: span.letter-cascade > span.letter-cascade-top (top, hidden) > span.letter-cascade-bottom (visible) Each row contains N span children, one per character. ──────────────────────────────────────────────────────────── */ .letter-cascade { position: relative; display: inline-block; overflow: hidden; line-height: 1.4; } .letter-cascade-top, .letter-cascade-bottom { display: inline-block; } .letter-cascade-top { position: absolute; left: 0; top: 0; } .letter-cascade-top > span, .letter-cascade-bottom > span { display: inline-block; } .letter-cascade-top > span { opacity: 0; transform: translateY(-20px); } .letter-cascade-bottom > span { opacity: 1; transform: translateY(0); } @keyframes nav_letter_in { 100% { transform: translateY(0); opacity: 1; } } @keyframes nav_letter_out { 100% { transform: translateY(20px); opacity: 0; } } /* Stagger delay by character index (handles up to 20 characters) */ .letter-cascade-top > span:nth-child(1), .letter-cascade-bottom > span:nth-child(1) { animation-delay: 0.00s; } .letter-cascade-top > span:nth-child(2), .letter-cascade-bottom > span:nth-child(2) { animation-delay: 0.04s; } .letter-cascade-top > span:nth-child(3), .letter-cascade-bottom > span:nth-child(3) { animation-delay: 0.08s; } .letter-cascade-top > span:nth-child(4), .letter-cascade-bottom > span:nth-child(4) { animation-delay: 0.12s; } .letter-cascade-top > span:nth-child(5), .letter-cascade-bottom > span:nth-child(5) { animation-delay: 0.16s; } .letter-cascade-top > span:nth-child(6), .letter-cascade-bottom > span:nth-child(6) { animation-delay: 0.20s; } .letter-cascade-top > span:nth-child(7), .letter-cascade-bottom > span:nth-child(7) { animation-delay: 0.24s; } .letter-cascade-top > span:nth-child(8), .letter-cascade-bottom > span:nth-child(8) { animation-delay: 0.28s; } .letter-cascade-top > span:nth-child(9), .letter-cascade-bottom > span:nth-child(9) { animation-delay: 0.32s; } .letter-cascade-top > span:nth-child(10), .letter-cascade-bottom > span:nth-child(10) { animation-delay: 0.36s; } .letter-cascade-top > span:nth-child(11), .letter-cascade-bottom > span:nth-child(11) { animation-delay: 0.40s; } .letter-cascade-top > span:nth-child(12), .letter-cascade-bottom > span:nth-child(12) { animation-delay: 0.44s; } .letter-cascade-top > span:nth-child(13), .letter-cascade-bottom > span:nth-child(13) { animation-delay: 0.48s; } .letter-cascade-top > span:nth-child(14), .letter-cascade-bottom > span:nth-child(14) { animation-delay: 0.52s; } .letter-cascade-top > span:nth-child(15), .letter-cascade-bottom > span:nth-child(15) { animation-delay: 0.56s; } .letter-cascade-top > span:nth-child(16), .letter-cascade-bottom > span:nth-child(16) { animation-delay: 0.60s; } .letter-cascade-top > span:nth-child(17), .letter-cascade-bottom > span:nth-child(17) { animation-delay: 0.64s; } .letter-cascade-top > span:nth-child(18), .letter-cascade-bottom > span:nth-child(18) { animation-delay: 0.68s; } .letter-cascade-top > span:nth-child(19), .letter-cascade-bottom > span:nth-child(19) { animation-delay: 0.72s; } .letter-cascade-top > span:nth-child(20), .letter-cascade-bottom > span:nth-child(20) { animation-delay: 0.76s; } /* ──────────────────────────────────────────────────────────── Site header ──────────────────────────────────────────────────────────── */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 50; height: var(--nav-h); display: flex; align-items: center; padding: 0 var(--gutter); background: transparent; border-bottom: 1px solid transparent; transition: background 300ms var(--ease), border-color 300ms var(--ease); } .header.is-scrolled { background: var(--bg-2); border-bottom-color: var(--border); } .logo { display: flex; align-items: center; position: relative; height: 50px; width: 220px; } .logo-image { position: absolute; left: 0; top: 50%; height: 50px; width: auto; transition: opacity 400ms var(--ease), transform 400ms var(--ease); } .logo-wordmark { opacity: 1; transform: translateY(-50%); } .logo-mark { opacity: 0; transform: translateY(calc(-50% + 8px)); } .header.is-scrolled .logo-wordmark { opacity: 0; transform: translateY(calc(-50% - 8px)); } .header.is-scrolled .logo-mark { opacity: 1; transform: translateY(-50%); } /* Language switcher */ .lang-switcher { position: absolute; left: 50%; transform: translateX(-50%); display: flex; gap: 20px; align-items: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; color: var(--fg-2); text-transform: uppercase; } .lang-item { font-weight: 500; color: var(--fg-2); display: inline-block; line-height: 1; cursor: pointer; text-decoration: none; } .lang-item.is-active { color: var(--fg-1); } .lang-item:hover .letter-cascade-top > span { animation: nav_letter_in 0.5s var(--ease) 1 forwards; } .lang-item:hover .letter-cascade-bottom > span { animation: nav_letter_out 0.5s var(--ease) 1 forwards; } .lang-switcher:hover .lang-item { opacity: 0.4; transition: opacity 200ms var(--ease); } .lang-switcher .lang-item:hover { opacity: 1; } /* Unified nav container. Desktop: display:contents — its children flow up into .header as flex items. Mobile: becomes a fixed full-screen overlay (see media query below). */ .nav-overlay { display: contents; } .nav-overlay-top { display: none; } /* Desktop menu */ .nav-menu { margin-left: auto; } .nav-menu ul { list-style: none; margin: 0; padding: 0; } .main-nav { display: flex; gap: 28px; align-items: center; } .nav-item { position: relative; } .nav-link { font-family: var(--font-mono); font-size: 13px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-1); display: inline-flex; align-items: center; gap: 8px; line-height: 1; cursor: pointer; padding: 14px 0; text-decoration: none; } .submenu .nav-link { padding: 10px 14px; width: 100%; box-sizing: border-box; justify-content: space-between; } .submenu .nav-item:hover > .nav-link { background: rgba(77,184,255,0.06); } .nav-item:hover > .nav-link .letter-cascade-top > span { animation: nav_letter_in 0.5s var(--ease) 1 forwards; } .nav-item:hover > .nav-link .letter-cascade-bottom > span { animation: nav_letter_out 0.5s var(--ease) 1 forwards; } .menu-plus-icon { color: var(--fg-2); transition: transform 300ms var(--ease), color 200ms var(--ease); flex-shrink: 0; } .nav-item.has-children:hover > .nav-link .menu-plus-icon { transform: rotate(45deg); color: var(--accent); } .main-nav:hover > .nav-item > .nav-link { opacity: 0.4; transition: opacity 200ms var(--ease); } .main-nav > .nav-item:hover > .nav-link { opacity: 1; } .submenu { position: absolute; background: var(--bg-2); border: 1px solid var(--border); min-width: 200px; padding: 6px 0; opacity: 0; pointer-events: none; transform: translateY(6px); transition: opacity 200ms var(--ease), transform 200ms var(--ease); z-index: 10; } .submenu-level-2 { top: 100%; left: 0; } .submenu-level-3 { top: 0; left: 100%; margin-left: 1px; } .nav-item:hover > .submenu { opacity: 1; pointer-events: auto; transform: translateY(0); } /* Hamburger */ .hamburger { margin-left: auto; display: none; width: 40px; height: 40px; align-items: center; justify-content: center; border: none; background: transparent; color: var(--fg-1); padding: 0; cursor: pointer; z-index: 101; } .hamburger-bars { position: relative; display: inline-block; width: 22px; height: 16px; } .hamburger-bar { position: absolute; left: 0; width: 100%; height: 2.5px; background: currentColor; transition: transform 320ms var(--ease), opacity 220ms var(--ease), top 320ms var(--ease); } .hamburger-bar-top { top: 0; } .hamburger-bar-middle { top: 6.75px; } .hamburger-bar-bottom { top: 13.5px; } .hamburger.is-open .hamburger-bar-top { opacity: 0; transform: translateY(6.75px); } .hamburger.is-open .hamburger-bar-middle { top: 6.75px; transform: rotate(45deg); } .hamburger.is-open .hamburger-bar-bottom { top: 6.75px; transform: rotate(-45deg); } /* ──────────────────────────────────────────────────────────── Scroll-reveal — sections fade up on entry, key grids stagger ──────────────────────────────────────────────────────────── */ [data-reveal] { opacity: 0; transform: translateY(28px); transition: opacity 720ms var(--ease), transform 720ms var(--ease); will-change: opacity, transform; } [data-reveal].is-revealed { opacity: 1; transform: translateY(0); } [data-reveal-stagger] > * { opacity: 0; transform: translateY(18px); transition: opacity 560ms var(--ease), transform 560ms var(--ease); } [data-reveal-stagger].is-revealed > * { opacity: 1; transform: translateY(0); } [data-reveal-stagger].is-revealed > *:nth-child(1) { transition-delay: 0ms; } [data-reveal-stagger].is-revealed > *:nth-child(2) { transition-delay: 70ms; } [data-reveal-stagger].is-revealed > *:nth-child(3) { transition-delay: 140ms; } [data-reveal-stagger].is-revealed > *:nth-child(4) { transition-delay: 210ms; } [data-reveal-stagger].is-revealed > *:nth-child(5) { transition-delay: 280ms; } [data-reveal-stagger].is-revealed > *:nth-child(6) { transition-delay: 350ms; } [data-reveal-stagger].is-revealed > *:nth-child(7) { transition-delay: 420ms; } [data-reveal-stagger].is-revealed > *:nth-child(8) { transition-delay: 490ms; } [data-reveal-stagger].is-revealed > *:nth-child(n+9) { transition-delay: 560ms; } @media (prefers-reduced-motion: reduce) { [data-reveal], [data-reveal-stagger] > * { opacity: 1 !important; transform: none !important; transition: none !important; } } /* ──────────────────────────────────────────────────────────── Header search — icon trigger in header + dropdown panel ──────────────────────────────────────────────────────────── */ .search-toggle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: var(--fg-1); background: transparent; border: 0; cursor: pointer; font-size: 18px; line-height: 1; margin-left: 20px; transition: color 200ms var(--ease); z-index: 101; } .search-toggle:hover, .search-toggle:focus-visible { color: var(--accent); outline: none; } .search-toggle i { line-height: 1; } .search-toggle.is-open { color: var(--accent); } /* Dropdown panel — sits below header, full width */ .search-panel { position: fixed; top: var(--nav-h); left: 0; right: 0; z-index: 49; background: var(--bg-2); border-bottom: 1px solid var(--border); padding: 24px var(--gutter) 28px; transform: translateY(-12px); opacity: 0; pointer-events: none; transition: transform 280ms var(--ease), opacity 240ms var(--ease); } .search-panel.is-open { transform: translateY(0); opacity: 1; pointer-events: auto; } .search-form { max-width: var(--max-w); margin: 0 auto; display: flex; align-items: center; gap: 14px; padding: 14px 4px; border-bottom: 1px solid var(--border-strong); } .search-form-icon { color: var(--fg-2); font-size: 22px; line-height: 1; flex-shrink: 0; } .search-input { flex: 1; min-width: 0; background: transparent; border: 0; outline: 0; color: var(--fg-1); font-family: var(--font-body); font-size: clamp(18px, 2.4vw, 26px); letter-spacing: 0.005em; padding: 6px 0; } .search-input::placeholder { color: var(--fg-3); } .search-close { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; color: var(--fg-2); background: transparent; border: 1px solid var(--border); cursor: pointer; font-size: 14px; line-height: 1; transition: color 180ms var(--ease), border-color 180ms var(--ease); } .search-close:hover, .search-close:focus-visible { color: var(--accent); border-color: var(--accent); outline: none; } .search-hints { max-width: var(--max-w); margin: 16px auto 0; display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .search-hints-label { font-family: var(--font-mono); font-size: var(--mono-sm); letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); margin-right: 4px; } .search-hint { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--fg-1); background: transparent; border: 1px dashed var(--border); padding: 6px 12px; cursor: pointer; transition: border-color 180ms var(--ease), border-style 180ms var(--ease), color 180ms var(--ease), background 180ms var(--ease); } .search-hint:hover, .search-hint:focus-visible { border-style: solid; border-color: var(--accent); color: var(--accent); background: rgba(77, 184, 255, 0.06); outline: none; } /* Scrim behind the panel */ .search-scrim { position: fixed; inset: 0; background: rgba(5, 12, 24, 0.55); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); z-index: 48; opacity: 0; pointer-events: none; transition: opacity 240ms var(--ease); } .search-scrim.is-open { opacity: 1; pointer-events: auto; } /* Force header to stay opaque while panel is open */ body.is-search-open .header { background: var(--bg-2); border-bottom-color: var(--border); } /* ──────────────────────────────────────────────────────────── Mobile layout — flip the same DOM into an overlay/accordion ──────────────────────────────────────────────────────────── */ @media (max-width: 1199px) { .hamburger { display: inline-flex; } /* On mobile, hamburger sits at the right edge, search just to its right. This places hamburger LEFT of search, both grouped against the right side. */ .hamburger { margin-left: auto; } .search-toggle { margin-left: 4px; } /* Search panel takes the full mobile viewport height */ .search-panel { padding: 20px var(--gutter) 24px; } .search-form { padding: 10px 0; } .search-input { font-size: 18px; } .search-hints { gap: 8px; } .search-hints-label { width: 100%; margin-bottom: 4px; } /* The overlay container takes over: full-screen fixed panel, slides in/out via transform. */ .nav-overlay { display: flex; flex-direction: column; position: fixed; inset: 0; z-index: 100; background: var(--overlay-menu); padding: var(--gutter); overflow-y: auto; transform: translateX(100%); transition: transform 320ms var(--ease); } .nav-overlay.is-open { transform: translateX(0); } /* Mobile-only top row (logo) */ .nav-overlay-top { display: flex; align-items: center; min-height: 40px; } .nav-overlay-logo { height: 36px; width: auto; } /* Nav menu stacks vertically, fills overlay */ .nav-menu { margin-left: 0; width: 100%; margin-top: 8px; } .main-nav { flex-direction: column; align-items: stretch; gap: 0; } .nav-item { border-bottom: 1px solid var(--border); } /* Top-level links: display font, large */ .nav-link { font-family: var(--font-display); font-size: clamp(36px, 8vw, 56px); font-weight: 400; letter-spacing: -0.005em; text-transform: uppercase; padding: 18px 4px; width: 100%; justify-content: space-between; } /* L2 links: smaller display */ .submenu-level-2 > .nav-item > .nav-link { font-size: clamp(22px, 5vw, 28px); padding: 14px 12px; } /* L3 links: back to mono small */ .submenu-level-3 > .nav-item > .nav-link { font-family: var(--font-mono); font-size: 14px; font-weight: 500; letter-spacing: 0.12em; padding: 12px 24px; color: var(--fg-2); } /* Indent nested levels */ .submenu-level-2 > .nav-item { border-bottom: 1px dashed var(--border); padding-left: 12px; } .submenu-level-3 > .nav-item { border-bottom: 0; padding-left: 0; } /* Submenus become accordion panels, not flyouts */ .submenu { position: static; background: transparent; border: 0; min-width: 0; padding: 0; transform: none; overflow: hidden; max-height: 0; opacity: 0; pointer-events: auto; transition: max-height 360ms var(--ease), opacity 240ms var(--ease); } /* Cancel desktop hover behaviour */ .nav-item:hover > .submenu { opacity: 0; max-height: 0; transform: none; } /* Expand when item is tap-toggled open */ .nav-item.is-open > .submenu { max-height: 1200px; opacity: 1; } /* Sibling-fade effect off on mobile */ .main-nav:hover > .nav-item > .nav-link { opacity: 1; } .submenu .nav-item:hover > .nav-link { background: transparent; } /* + icon: standalone touch target — large hit area, visual feedback */ .nav-item.has-children > .nav-link .menu-plus-icon { width: 18px; height: 18px; padding: 13px; margin: -13px; box-sizing: content-box; flex-shrink: 0; cursor: pointer; border-radius: 50%; transition: background 200ms var(--ease), transform 260ms var(--ease), color 200ms var(--ease); } /* Hover feedback on the icon itself */ .nav-item.has-children > .nav-link .menu-plus-icon:hover { background: rgba(255,255,255,0.08); color: var(--accent); } /* Rotate to × when open */ .nav-item.has-children.is-open > .nav-link .menu-plus-icon { transform: rotate(45deg); color: var(--accent); } /* Cancel desktop hover-rotate bleed-in on touch devices */ .nav-item.has-children:not(.is-open):hover > .nav-link .menu-plus-icon { transform: none; } /* Cascade animation also fires when row is .is-open */ .nav-item.is-open > .nav-link .letter-cascade-top > span { animation: nav_letter_in 0.5s var(--ease) 1 forwards; } .nav-item.is-open > .nav-link .letter-cascade-bottom > span { animation: nav_letter_out 0.5s var(--ease) 1 forwards; } /* Lang switcher reflows to bottom of overlay */ .lang-switcher { position: static; transform: none; margin-top: auto; padding-top: 24px; justify-content: flex-end; gap: 12px; font-size: 12px; order: 99; } } /* ──────────────────────────────────────────────────────────── Hero section ──────────────────────────────────────────────────────────── */ @keyframes heroIn { from { transform: translateY(40px); opacity: 0; } to { transform: translateY(0); opacity: 1; } } .hero { position: relative; height: 100dvh; min-height: 500px; width: 100%; overflow: hidden; background-color: #04101f; background-position: center; background-size: cover; background-repeat: no-repeat; transition: background-image 600ms var(--ease); } .hero-slide-bg-1 { background-image: url(../images/hero-bg-1.png); } .hero-slide-bg-2 { background-image: url(../images/hero-bg-2.png); } .hero-slide-bg-3 { background-image: url(../images/hero-bg-3.png); } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(10,22,40,0.2) 0%, rgba(10,22,40,0) 30%, rgba(5,12,24,0.55) 100%); pointer-events: none; } /* Slide content blocks — only the active one is visible */ .slide-content { position: absolute; top: calc(var(--nav-h) + 80px); left: var(--gutter); max-width: 400px; color: var(--fg-1); opacity: 0; pointer-events: none; transition: opacity 480ms var(--ease); } .slide-content.is-active { opacity: 1; pointer-events: auto; animation: heroIn 800ms var(--ease) both; } .slide-eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 14px; } .slide-subcopy { font-size: 15px; line-height: 1.6; color: var(--fg-1); font-family: var(--font-body); margin: 0; } .slide-readmore { display: inline-flex; align-items: center; gap: 10px; margin-top: 24px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-1); position: relative; padding-bottom: 6px; text-decoration: none; } .slide-readmore::before { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 1px; background: var(--border-strong); } .slide-readmore::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 1px; background: var(--accent); transition: width 320ms var(--ease); } .slide-readmore-arrow { transition: transform 250ms var(--ease); } .slide-readmore:hover { color: var(--accent); } .slide-readmore:hover::after { width: 100%; } .slide-readmore:hover .slide-readmore-arrow { transform: translateX(5px); } .hero-bottom { position: absolute; left: var(--gutter); right: var(--gutter); bottom: clamp(82px, 10vh, 114px); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; } .hero-title-wrap { flex: 1; min-width: 0; position: relative; height: clamp(56px, 11vw, 200px); } .hero-title { font-family: var(--font-display); white-space: nowrap; overflow: hidden; font-size: clamp(56px, 11vw, 200px); line-height: 0.92; letter-spacing: -0.01em; text-transform: uppercase; margin: 0; background-image: linear-gradient(180deg, #ffffff 0%, #cfe0ff 38%, #6aa3ff 72%, #2a6fdb 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; filter: drop-shadow(0 4px 24px rgba(42,111,219,0.25)); position: absolute; inset: 0; opacity: 0; transition: opacity 480ms var(--ease); } .hero-title.is-active { opacity: 1; animation: heroIn 800ms var(--ease) both; } /* ──────────────────────────────────────────────────────────── Hero scroll-down indicator — bottom-center, animated dot, click smooth-scrolls past the hero into the next section. ──────────────────────────────────────────────────────────── */ .hero-scroll { position: absolute; left: 50%; bottom: clamp(20px, 3vh, 36px); transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; background: transparent; border: 0; cursor: pointer; padding: 6px 14px; z-index: 5; transition: opacity 320ms var(--ease), transform 320ms var(--ease); } .hero-scroll.is-hidden { opacity: 0; transform: translate(-50%, 8px); pointer-events: none; } .hero-scroll-label { font-family: var(--font-mono); font-size: 10px; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--fg-2); transition: color 220ms var(--ease); } .hero-scroll-track { position: relative; display: block; width: 1px; height: 42px; background: var(--border-strong); overflow: hidden; transition: background 220ms var(--ease); } .hero-scroll-dot { position: absolute; left: -1.5px; top: 0; width: 4px; height: 8px; background: var(--accent); animation: hero_scroll_dot 1.8s cubic-bezier(0.4, 0, 0.2, 1) infinite; } @keyframes hero_scroll_dot { 0% { top: -8px; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { top: 42px; opacity: 0; } } .hero-scroll:hover .hero-scroll-label, .hero-scroll:focus-visible .hero-scroll-label { color: var(--accent); } .hero-scroll:hover .hero-scroll-track, .hero-scroll:focus-visible .hero-scroll-track { background: var(--accent); } .hero-scroll:focus-visible { outline: none; } /* Hide on very short / small viewports to avoid colliding with hero-bottom */ @media (max-width: 600px), (max-height: 620px) { .hero-scroll-track { height: 32px; } @keyframes hero_scroll_dot { 0% { top: -8px; opacity: 0; } 20% { opacity: 1; } 80% { opacity: 1; } 100% { top: 32px; opacity: 0; } } } .hero-pagination { display: flex; gap: 8px; align-items: flex-end; flex-shrink: 0; padding-bottom: 6px; } .pagination-button { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 0; border: 0; background: transparent; cursor: pointer; } .pagination-number { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.1em; color: transparent; line-height: 1; transition: color 300ms var(--ease); } .pagination-button.is-active .pagination-number { color: var(--accent); } .pagination-bar { display: block; width: 8px; height: 3px; border-radius: 2px; background: var(--fg-3); transition: all 300ms var(--ease); } .pagination-button.is-active .pagination-bar { width: 24px; background: var(--accent); } /* ──────────────────────────────────────────────────────────── Mission cards ──────────────────────────────────────────────────────────── */ .missions-header { margin-bottom: 48px; /* layout via .row align-items-baseline g-3 */ } .missions-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; } .mission { display: block; text-decoration: none; cursor: pointer; border: 1px dashed var(--border); padding: var(--s-5); background: var(--surface); position: relative; overflow: hidden; transition: border-color 220ms var(--ease), border-style 220ms var(--ease), transform 300ms var(--ease), background 220ms var(--ease); } .mission::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--accent); transition: width 320ms var(--ease); } .mission:hover { border-style: solid; border-color: var(--border-strong); transform: translateY(-4px); background: rgba(77,184,255,0.04); } .mission:hover::after { width: 100%; } .mission-eyebrow { font-family: var(--font-mono); font-size: var(--mono-sm); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); } .mission-title { font-family: var(--font-display); font-size: 48px; line-height: 0.95; letter-spacing: -0.01em; text-transform: uppercase; color: var(--fg-1); margin: 14px 0 12px; transition: color 200ms var(--ease); } .mission:hover .mission-title { color: var(--accent); } .mission-text { color: var(--fg-2); font-size: 14px; margin: 0; transition: color 200ms var(--ease); } .mission:hover .mission-text { color: var(--fg-1); } /* ──────────────────────────────────────────────────────────── Stats strip ──────────────────────────────────────────────────────────── */ .stats { border-top: 1px dashed var(--border); border-bottom: 1px dashed var(--border); padding: 32px var(--gutter); } .stats-grid { max-width: var(--max-w); margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 24px; } .stat { display: flex; flex-direction: column; gap: 6px; } .stat:nth-child(1) { transition-delay: 0ms; } .stat:nth-child(2) { transition-delay: 120ms; } .stat:nth-child(3) { transition-delay: 240ms; } .stat:nth-child(4) { transition-delay: 360ms; } .stat-value { font-family: var(--font-display); font-size: 56px; line-height: 0.95; letter-spacing: -0.01em; color: var(--fg-1); font-variant-numeric: tabular-nums; opacity: 0; transform: translateY(12px); transition: opacity 600ms var(--ease), transform 600ms var(--ease); transition-delay: inherit; } .stats.is-visible .stat-value { opacity: 1; transform: translateY(0); } .stat-label { font-family: var(--font-mono); font-size: var(--mono-sm); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); } /* ──────────────────────────────────────────────────────────── Scope section ──────────────────────────────────────────────────────────── */ .scope { position: relative; background-image: url(../images/galaxy-bg.png); background-size: cover; background-position: center; background-attachment: fixed; background-repeat: no-repeat; } .scope-overlay { position: absolute; inset: 0; background: rgba(5,10,22,0.72); pointer-events: none; } .scope-content { position: relative; z-index: 1; } .scope-header { margin-bottom: 32px; /* layout via .row align-items-baseline g-3 */ } .scope-body { max-width: 720px; } .scope-body p:first-of-type { color: var(--fg-1); font-size: 18px; line-height: 1.6; margin-bottom: 24px; } .scope-body p:nth-of-type(2) { color: var(--fg-2); font-size: 16px; line-height: 1.7; margin-bottom: 32px; } .scope-actions { display: flex; gap: 12px; flex-wrap: wrap; } /* ──────────────────────────────────────────────────────────── Glass pill button ──────────────────────────────────────────────────────────── */ .glass-button { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 0; background: transparent; border: 0; color: rgba(255,255,255,0.92); font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: gap 380ms cubic-bezier(0.7,0,0.2,1); } .button-label, .button-icon { position: relative; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.10) 100%); border: 1px solid rgba(255,255,255,0.18); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); color: inherit; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.25), 0 8px 24px rgba(0,0,0,0.35); transition: background 240ms var(--ease), color 240ms var(--ease), border-color 240ms var(--ease), box-shadow 240ms var(--ease), padding 420ms cubic-bezier(0.7,0,0.2,1), margin-left 420ms cubic-bezier(0.7,0,0.2,1); } .button-label { padding: 10px 16px; border-radius: 999px; line-height: 1; } .button-icon { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; } .button-arrow { transform: rotate(-45deg); transition: transform 380ms cubic-bezier(0.7,0,0.2,1); will-change: transform; } .glass-button:hover .button-arrow { transform: rotate(0deg); } .glass-button:hover { gap: 0; } .glass-button:hover .button-label { padding-right: 46px; background: linear-gradient(135deg, rgba(155,220,255,0.32) 0%, rgba(77,184,255,0.14) 50%, rgba(155,220,255,0.26) 100%); border-color: rgba(155,220,255,0.55); color: #ffffff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(0,0,0,0.25), 0 8px 28px rgba(77,184,255,0.35), 0 0 0 1px rgba(155,220,255,0.18); } .glass-button:hover .button-icon { margin-left: -30px; background: transparent; border-color: transparent; color: #ffffff; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; } .glass-button-large { font-size: 12px; letter-spacing: 0.2em; } .glass-button-large .button-label { padding: 16px 26px; } .glass-button-large .button-icon { width: 48px; height: 48px; } .glass-button-large:hover .button-label { padding-right: 74px; } .glass-button-large:hover .button-icon { margin-left: -48px; } .glass-button-large .button-arrow { width: 16px; height: 16px; } /* ──────────────────────────────────────────────────────────── News ──────────────────────────────────────────────────────────── */ .news { padding-top: 120px; padding-bottom: 120px; } .news-header { margin-bottom: 48px; /* layout via .row align-items-end g-3 */ } .news-titlerow { display: flex; align-items: baseline; gap: 16px; flex-wrap: wrap; } .news-nav { display: inline-flex; align-items: center; gap: 8px; } .news-stories-link { margin-left: 8px; } .news-arrow { width: 30px; height: 30px; display: inline-flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.10) 100%); border: 1px solid rgba(255,255,255,0.18); border-radius: 50%; color: rgba(255,255,255,0.92); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.25), 0 8px 24px rgba(0,0,0,0.35); cursor: pointer; transition: background 240ms var(--ease), border-color 240ms var(--ease), color 240ms var(--ease), box-shadow 240ms var(--ease), opacity 220ms var(--ease); } .news-arrow:hover:not(:disabled) { background: linear-gradient(135deg, rgba(155,220,255,0.32) 0%, rgba(77,184,255,0.14) 50%, rgba(155,220,255,0.26) 100%); border-color: rgba(155,220,255,0.55); color: #ffffff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(0,0,0,0.25), 0 8px 28px rgba(77,184,255,0.35), 0 0 0 1px rgba(155,220,255,0.18); } .news-arrow:disabled { opacity: 0.3; cursor: not-allowed; } .news-arrow svg { width: 10px; height: 10px; } .news-list { display: flex; gap: 20px; overflow-x: auto; overflow-y: hidden; scroll-snap-type: x proximity; scroll-padding-left: var(--gutter); scrollbar-width: none; -ms-overflow-style: none; margin-left: calc(var(--gutter) * -1); margin-right: calc(var(--gutter) * -1); padding: 12px var(--gutter) 16px; } .news-list::-webkit-scrollbar { display: none; } .news-item { flex: 0 0 calc((100% - 60px) / 4); min-width: 240px; scroll-snap-align: start; background: rgba(255,255,255,0.02); border: 1px solid var(--border); overflow: hidden; display: flex; flex-direction: column; text-decoration: none; position: relative; transition: border-color 240ms var(--ease), transform 320ms var(--ease), background 240ms var(--ease); opacity: 0; transform: translateY(24px); } /* Stagger reveal — 8 cards */ .news-item:nth-child(1) { --delay: 0ms; } .news-item:nth-child(2) { --delay: 90ms; } .news-item:nth-child(3) { --delay: 180ms; } .news-item:nth-child(4) { --delay: 270ms; } .news-item:nth-child(5) { --delay: 360ms; } .news-item:nth-child(6) { --delay: 450ms; } .news-item:nth-child(7) { --delay: 540ms; } .news-item:nth-child(8) { --delay: 630ms; } .news.is-visible .news-item { opacity: 1; transform: translateY(0); transition: opacity 600ms var(--ease) var(--delay, 0ms), transform 600ms var(--ease) var(--delay, 0ms), border-color 240ms var(--ease), background 240ms var(--ease); } .news-item::before, .news-item::after { content: ''; position: absolute; inset: -2px; pointer-events: none; border: 3px solid var(--accent); z-index: 3; filter: drop-shadow(0 0 8px rgba(77,184,255,0.7)) drop-shadow(0 0 14px rgba(77,184,255,0.35)); } .news-item::before { border-bottom: 0; border-left: 0; clip-path: inset(0 100% 0 0); transition: clip-path 520ms linear 480ms; } .news-item::after { border-top: 0; border-right: 0; clip-path: inset(0 0 0 100%); transition: clip-path 520ms linear 0ms; } .news-item:hover::before { clip-path: inset(0 0 0 0); transition: clip-path 520ms linear 0ms; } .news-item:hover::after { clip-path: inset(0 0 0 0); transition: clip-path 520ms linear 480ms; } .news-item:hover { border-color: var(--accent); background: rgba(77,184,255,0.05); transform: translateY(-4px); } @media (max-width: 1100px) { .news-item { flex-basis: calc((100% - 20px) / 2); } } @media (max-width: 600px) { .news-item { flex-basis: 86%; } } .news-thumbnail { aspect-ratio: 4 / 3; position: relative; overflow: hidden; background: #0a1322; } .news-thumbnail::before { content: ''; position: absolute; inset: 0; background: radial-gradient(120% 80% at 30% 20%, hsla(var(--hue, 220), 70%, 55%, 0.55) 0%, hsla(var(--hue, 220), 60%, 35%, 0.25) 38%, hsla(220, 60%, 10%, 0) 72%); } .news-thumbnail::after { content: ''; position: absolute; inset: 0; background-image: radial-gradient(1px 1px at 12% 18%, rgba(255,255,255,0.9), transparent 100%), radial-gradient(1.5px 1.5px at 28% 64%, rgba(255,255,255,0.7), transparent 100%), radial-gradient(1px 1px at 48% 28%, rgba(255,255,255,0.85), transparent 100%), radial-gradient(1.2px 1.2px at 62% 78%, rgba(255,255,255,0.6), transparent 100%), radial-gradient(1px 1px at 78% 42%, rgba(255,255,255,0.8), transparent 100%), radial-gradient(1.4px 1.4px at 88% 12%, rgba(255,255,255,0.55), transparent 100%), radial-gradient(1px 1px at 22% 86%, rgba(255,255,255,0.7), transparent 100%); opacity: 0.7; } .news-color-cloud { --hue: 218; } .news-color-security { --hue: 195; } .news-color-case { --hue: 250; } .news-color-ai { --hue: 175; } .news-color-event { --hue: 28; } .news-color-hiring { --hue: 145; } .news-color-biotech { --hue: 280; } .news-color-milestone { --hue: 210; } .news-illustration { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 0.55; transition: opacity 320ms var(--ease), transform 600ms var(--ease); display: block; } .news-item:hover .news-illustration { opacity: 0.9; transform: scale(1.06); } .news-date { position: absolute; top: 14px; left: 14px; z-index: 2; font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.18em; color: rgba(255,255,255,0.85); background: rgba(5,10,22,0.5); backdrop-filter: blur(6px); padding: 5px 9px; border: 1px solid rgba(255,255,255,0.18); } .news-content { padding: 20px 20px 22px; display: flex; flex-direction: column; gap: 14px; flex: 1; } .news-tags { display: flex; flex-wrap: wrap; gap: 6px; } .news-tag { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--accent); padding: 4px 10px; border: 1px solid var(--accent); border-radius: 999px; text-transform: uppercase; line-height: 1; } .news-title { font-family: var(--font-display); font-size: 22px; line-height: 1.15; letter-spacing: 0.01em; color: var(--fg-1); margin: 0; transition: color 200ms var(--ease); } .news-item:hover .news-title { color: var(--accent); } .news-subtitle { font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--fg-3); text-transform: uppercase; margin: 0; } .news-excerpt { font-size: 13px; line-height: 1.6; color: var(--fg-2); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .news-readmore { margin-top: auto; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: #ff9a4d; text-transform: uppercase; display: inline-flex; align-items: center; gap: 8px; padding-top: 6px; transition: gap 220ms var(--ease), color 200ms var(--ease); } .news-item:hover .news-readmore { gap: 14px; color: #ffb778; } /* ──────────────────────────────────────────────────────────── Products ──────────────────────────────────────────────────────────── */ .products { background: #04101f; border-top: 1px solid var(--border); } .products-wrap { max-width: var(--max-w); margin: 0 auto; padding: clamp(56px, 8vh, 96px) var(--gutter); } .products-header { padding-bottom: clamp(28px, 4vh, 48px); /* layout via .row align-items-end g-4 */ } .products-eyebrow { display: flex; align-items: center; gap: 12px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.16em; color: var(--fg-2); margin-bottom: 10px; } .products-title { margin: 0; white-space: nowrap; } .products-description { margin: 0; color: var(--fg-2); font-size: 14px; max-width: 420px; line-height: 1.65; } .products-tabs { display: flex; height: clamp(520px, 64vh, 680px); border: 1px solid var(--border); overflow: hidden; } .product { position: relative; height: 100%; flex: 0 0 56px; border-right: 1px solid var(--border); background: rgba(255,255,255,0.02); transition: flex 720ms cubic-bezier(0.7,0,0.2,1), background 240ms var(--ease), box-shadow 360ms var(--ease); } .product:last-of-type { border-right: 0; } .product.is-open { flex: 1 1 0; } .product::before, .product::after { content: ''; position: absolute; inset: 0; pointer-events: none; border: 2px solid var(--accent); z-index: 4; filter: drop-shadow(0 0 8px rgba(77,184,255,0.7)) drop-shadow(0 0 14px rgba(77,184,255,0.35)); } .product::before { border-bottom: 0; border-left: 0; clip-path: inset(0 100% 0 0); transition: clip-path 520ms linear 480ms; } .product::after { border-top: 0; border-right: 0; clip-path: inset(0 0 0 100%); transition: clip-path 520ms linear 0ms; } .product:hover::before, .product.is-open::before { clip-path: inset(0 0 0 0); transition: clip-path 520ms linear 0ms; } .product:hover::after, .product.is-open::after { clip-path: inset(0 0 0 0); transition: clip-path 520ms linear 480ms; } .product:hover { background: rgba(77,184,255,0.04); box-shadow: inset 0 0 0 1px rgba(77,184,255,0.18), 0 0 40px -10px rgba(77,184,255,0.35); } .product.is-open { background: rgba(77,184,255,0.05); box-shadow: inset 0 0 0 1px rgba(77,184,255,0.22), 0 0 60px -10px rgba(77,184,255,0.5), 0 0 120px -30px rgba(77,184,255,0.4); z-index: 2; } .product-rail { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 24px 0; background: transparent; border: 0; cursor: pointer; color: var(--fg-1); width: 100%; } .product.is-open .product-rail { display: none; } .product-rail-label { writing-mode: vertical-rl; transform: rotate(180deg); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.22em; font-weight: 500; color: var(--fg-1); text-transform: uppercase; padding: 32px 0; transition: color 240ms var(--ease); } .product:hover .product-rail-label { color: var(--accent); } .product-rail-arrow, .product-close { width: 32px; height: 32px; border: 1px solid rgba(255,255,255,0.28); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.85); background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.04) 45%, rgba(255,255,255,0.12) 100%); backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(255,255,255,0.06), 0 4px 14px rgba(0,0,0,0.25); transition: background 260ms var(--ease), border-color 260ms var(--ease), color 220ms var(--ease), box-shadow 260ms var(--ease); } .product:hover .product-rail-arrow, .product-close:hover { background: linear-gradient(135deg, rgba(155,220,255,0.55) 0%, rgba(77,184,255,0.22) 50%, rgba(155,220,255,0.45) 100%); border-color: rgba(155,220,255,0.8); color: #ffffff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 6px 22px rgba(77,184,255,0.45), 0 0 0 1px rgba(155,220,255,0.25); } .product-detail { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0; opacity: 0; pointer-events: none; transition: opacity 360ms var(--ease) 240ms; } .product.is-open .product-detail { opacity: 1; pointer-events: auto; } .product-imagebox { position: relative; height: 100%; overflow: hidden; border-right: 1px solid var(--border); } /* Generative product "image": planet + stars + watermark, all CSS */ .product-image { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; overflow: hidden; } .product-image::before { /* starfield */ content: ''; position: absolute; inset: 0; opacity: 0.55; background-image: radial-gradient(1px 1px at 5% 12%, #fff, transparent 100%), radial-gradient(1.2px 1.2px at 14% 78%, #fff, transparent 100%), radial-gradient(0.8px 0.8px at 22% 30%, #fff, transparent 100%), radial-gradient(1.4px 1.4px at 32% 58%, #fff, transparent 100%), radial-gradient(0.9px 0.9px at 41% 14%, #fff, transparent 100%), radial-gradient(1px 1px at 48% 72%, #fff, transparent 100%), radial-gradient(0.7px 0.7px at 58% 8%, #fff, transparent 100%), radial-gradient(1.3px 1.3px at 64% 40%, #fff, transparent 100%), radial-gradient(0.9px 0.9px at 72% 88%, #fff, transparent 100%), radial-gradient(1.1px 1.1px at 82% 22%, #fff, transparent 100%), radial-gradient(0.8px 0.8px at 88% 64%, #fff, transparent 100%), radial-gradient(1.5px 1.5px at 94% 38%, #fff, transparent 100%); } .product-image::after { /* planet */ content: ''; width: 50%; aspect-ratio: 1; border-radius: 50%; background: radial-gradient(circle at 32% 32%, hsl(var(--hue, 220) 95% 78%) 0%, hsl(var(--hue, 220) 85% 50%) 28%, hsl(var(--hue, 220) 80% 22%) 65%, #04101f 100%); box-shadow: 0 0 80px hsla(var(--hue, 220), 90%, 60%, 0.45), 0 0 160px hsla(var(--hue, 220), 90%, 60%, 0.18); } .product-image-compute { --hue: 218; background: radial-gradient(120% 90% at 30% 35%, hsl(218 70% 22%) 0%, hsl(218 80% 8%) 55%, #04101f 100%); } .product-image-edge { --hue: 195; background: radial-gradient(120% 90% at 30% 35%, hsl(195 70% 22%) 0%, hsl(195 80% 8%) 55%, #04101f 100%); } .product-image-security { --hue: 175; background: radial-gradient(120% 90% at 30% 35%, hsl(175 70% 22%) 0%, hsl(175 80% 8%) 55%, #04101f 100%); } .product-image-ai { --hue: 280; background: radial-gradient(120% 90% at 30% 35%, hsl(280 70% 22%) 0%, hsl(280 80% 8%) 55%, #04101f 100%); } .product-image-analytics { --hue: 35; background: radial-gradient(120% 90% at 30% 35%, hsl(35 70% 22%) 0%, hsl(35 80% 8%) 55%, #04101f 100%); } .product-image-storage { --hue: 145; background: radial-gradient(120% 90% at 30% 35%, hsl(145 70% 22%) 0%, hsl(145 80% 8%) 55%, #04101f 100%); } .product-image-devplat { --hue: 250; background: radial-gradient(120% 90% at 30% 35%, hsl(250 70% 22%) 0%, hsl(250 80% 8%) 55%, #04101f 100%); } .product-image-observe { --hue: 320; background: radial-gradient(120% 90% at 30% 35%, hsl(320 70% 22%) 0%, hsl(320 80% 8%) 55%, #04101f 100%); } /* PNG photo overlay inside product-image (sits above CSS planet bg, below label) */ .product-image-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; z-index: 2; transition: transform 600ms var(--ease), opacity 320ms var(--ease); } .product:hover .product-image-photo, .product-accordion-item.is-open .product-image-photo { transform: scale(1.04); } .product-image-label { z-index: 3; } .product-image-label { position: absolute; left: 28px; top: 24px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; color: rgba(255,255,255,0.6); z-index: 2; } @media (max-width: 900px) { .product-image-label { top: auto; bottom: 24px; } } .product-info { padding: clamp(40px, 6vh, 72px) clamp(28px, 4vw, 56px); display: flex; flex-direction: column; justify-content: center; gap: 20px; } .product-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(36px, 4vw, 56px); line-height: 1.02; margin: 0; color: var(--fg-1); letter-spacing: 0.01em; } .product-description { margin: 0; color: var(--fg-2); font-size: 15px; line-height: 1.7; max-width: 46ch; } .learn-link { display: inline-flex; align-items: center; gap: 10px; align-self: flex-start; padding: 14px 24px 14px 26px; background: linear-gradient(135deg, rgba(255,255,255,0.14) 0%, rgba(255,255,255,0.04) 50%, rgba(255,255,255,0.10) 100%); color: rgba(255,255,255,0.92); border: 1px solid rgba(255,255,255,0.18); border-radius: 999px; backdrop-filter: blur(10px) saturate(140%); -webkit-backdrop-filter: blur(10px) saturate(140%); font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; cursor: pointer; box-shadow: inset 0 1px 0 rgba(255,255,255,0.22), inset 0 -1px 0 rgba(0,0,0,0.25), 0 8px 24px rgba(0,0,0,0.35); transition: background 220ms var(--ease), color 220ms var(--ease), gap 220ms var(--ease), border-color 220ms var(--ease), box-shadow 220ms var(--ease); } .learn-link:hover { background: linear-gradient(135deg, rgba(155,220,255,0.32) 0%, rgba(77,184,255,0.14) 50%, rgba(155,220,255,0.26) 100%); color: #ffffff; border-color: rgba(155,220,255,0.55); gap: 16px; box-shadow: inset 0 1px 0 rgba(255,255,255,0.45), inset 0 -1px 0 rgba(0,0,0,0.25), 0 8px 28px rgba(77,184,255,0.35), 0 0 0 1px rgba(155,220,255,0.18); } .product-close { position: absolute; bottom: 24px; left: 12px; cursor: pointer; z-index: 4; } .products-viewall { flex: 0 0 56px; background: #04101f; border-left: 1px solid var(--border-strong); display: flex; align-items: center; justify-content: center; text-decoration: none; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; transition: background 220ms var(--ease), color 220ms var(--ease); } .products-viewall, .products-viewall:link, .products-viewall:visited { color: var(--fg-1) !important; } .products-viewall span { writing-mode: vertical-rl; transform: rotate(180deg); padding: 40px 0; } .products-viewall:hover, .products-viewall:focus { background: var(--accent); color: #04101f !important; } /* Mobile accordion */ .products-accordion { display: none; } @media (max-width: 900px) { .products-tabs { display: none; } .products-accordion { display: block; border: 1px solid var(--border); overflow: hidden; } .product-accordion-item { position: relative; border-bottom: 1px solid var(--border); transition: background 240ms var(--ease), box-shadow 360ms var(--ease); } .product-accordion-item:last-of-type { border-bottom: 0; } .product-accordion-item::before, .product-accordion-item::after { content: ''; position: absolute; inset: 0; pointer-events: none; border: 2px solid var(--accent); z-index: 4; filter: drop-shadow(0 0 8px rgba(77,184,255,0.7)) drop-shadow(0 0 14px rgba(77,184,255,0.35)); } .product-accordion-item::before { border-bottom: 0; border-left: 0; clip-path: inset(0 100% 0 0); transition: clip-path 520ms linear 480ms; } .product-accordion-item::after { border-top: 0; border-right: 0; clip-path: inset(0 0 0 100%); transition: clip-path 520ms linear 0ms; } .product-accordion-item:hover::before, .product-accordion-item.is-open::before { clip-path: inset(0 0 0 0); transition: clip-path 520ms linear 0ms; } .product-accordion-item:hover::after, .product-accordion-item.is-open::after { clip-path: inset(0 0 0 0); transition: clip-path 520ms linear 480ms; } .product-accordion-item:hover { background: rgba(77,184,255,0.04); box-shadow: inset 0 0 0 1px rgba(77,184,255,0.18), 0 0 40px -10px rgba(77,184,255,0.35); } .product-accordion-item.is-open { background: rgba(77,184,255,0.05); box-shadow: inset 0 0 0 1px rgba(77,184,255,0.22), 0 0 60px -10px rgba(77,184,255,0.5), 0 0 120px -30px rgba(77,184,255,0.4); z-index: 2; } .product-accordion-head { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 18px 18px; background: transparent; border: 0; cursor: pointer; color: var(--fg-1); font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; text-align: left; } .product-accordion-item.is-open .product-accordion-head { color: var(--accent); } .product-accordion-chevron { width: 32px; height: 32px; border: 1px solid rgba(255,255,255,0.28); border-radius: 50%; display: flex; align-items: center; justify-content: center; color: rgba(255,255,255,0.85); background: linear-gradient(135deg, rgba(255,255,255,0.22) 0%, rgba(255,255,255,0.04) 45%, rgba(255,255,255,0.12) 100%); backdrop-filter: blur(8px) saturate(140%); -webkit-backdrop-filter: blur(8px) saturate(140%); box-shadow: inset 0 1px 0 rgba(255,255,255,0.35), inset 0 -1px 0 rgba(255,255,255,0.06), 0 4px 14px rgba(0,0,0,0.25); transition: transform 320ms cubic-bezier(0.7,0,0.2,1), background 260ms var(--ease), border-color 260ms var(--ease), color 220ms var(--ease), box-shadow 260ms var(--ease); } .product-accordion-item.is-open .product-accordion-chevron { transform: rotate(180deg); background: linear-gradient(135deg, rgba(155,220,255,0.55) 0%, rgba(77,184,255,0.22) 50%, rgba(155,220,255,0.45) 100%); border-color: rgba(155,220,255,0.8); color: #ffffff; box-shadow: inset 0 1px 0 rgba(255,255,255,0.7), 0 6px 22px rgba(77,184,255,0.45), 0 0 0 1px rgba(155,220,255,0.25); } .product-accordion-body { overflow: hidden; max-height: 0; transition: max-height 480ms cubic-bezier(0.7,0,0.2,1); } .product-accordion-item.is-open .product-accordion-body { max-height: 800px; } .product-accordion-image { position: relative; width: 100%; aspect-ratio: 4 / 3; overflow: hidden; } .product-accordion-info { padding: 18px 18px 24px; display: flex; flex-direction: column; gap: 14px; } .product-accordion-title { font-family: var(--font-display); font-weight: 400; font-size: clamp(28px, 7vw, 38px); line-height: 1.05; margin: 0; color: var(--fg-1); } .product-accordion-desc { margin: 0; color: var(--fg-2); font-size: 14px; line-height: 1.65; } .product-accordion-learn { align-self: flex-start; } .mobile-products-viewall { display: flex; align-items: center; justify-content: center; padding: 18px; background: #04101f; text-decoration: none; font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; margin-top: -1px; transition: background 220ms var(--ease), color 220ms var(--ease); } .mobile-products-viewall, .mobile-products-viewall:link, .mobile-products-viewall:visited { color: var(--fg-1) !important; } .mobile-products-viewall:hover, .mobile-products-viewall:focus { background: var(--accent); color: #04101f !important; } } /* ──────────────────────────────────────────────────────────── Footer ──────────────────────────────────────────────────────────── */ .footer { padding: 64px var(--gutter) 48px; border-top: 1px solid var(--border); margin-top: 96px; } .footer-grid { max-width: var(--max-w); margin: 0 auto; align-items: flex-start; /* .row provides display:flex + flex-wrap; gutter via g-4 utility */ } .footer-logo { display: block; height: 42px; width: auto; filter: brightness(0) invert(1); opacity: 0.92; } .footer-tagline { color: var(--fg-2); font-size: 13px; margin-top: 12px; } .footer-heading { font-family: var(--font-mono); font-size: var(--mono-sm); font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-2); margin-bottom: 12px; } .footer-nav { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; } .footer-link { color: var(--fg-1); text-decoration: none; display: inline-block; transition: color 200ms var(--ease); } .footer-link:hover .letter-cascade-top > span { animation: nav_letter_in 0.5s var(--ease) 1 forwards; } .footer-link:hover .letter-cascade-bottom > span { animation: nav_letter_out 0.5s var(--ease) 1 forwards; } .footer-link:hover { color: var(--accent); } .footer-ops { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; color: var(--fg-2); font-size: 13px; } .footer-ops a { color: inherit; text-decoration: none; transition: color 200ms var(--ease); } .footer-ops a:hover { color: var(--accent); } .footer-status p { color: var(--fg-2); font-size: 12px; margin-top: 12px; } .footer-social { list-style: none; padding: 0; margin: 14px 0 0; display: flex; gap: 10px; } .footer-social-link { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border: 1px dashed var(--border); color: var(--fg-1); font-size: 18px; text-decoration: none; transition: border-color var(--t-fast) var(--ease), border-style var(--t-fast) var(--ease), color var(--t-fast) var(--ease), background var(--t-fast) var(--ease); } .footer-social-link:hover, .footer-social-link:focus-visible { border-style: solid; border-color: var(--accent); color: var(--accent); background: rgba(77, 184, 255, 0.06); outline: none; } .footer-social-link i { line-height: 1; } .footer-bottom { max-width: var(--max-w); margin: 40px auto 0; padding-top: 24px; border-top: 1px dashed var(--border); font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fg-2); } /* ──────────────────────────────────────────────────────────── Back-to-top button — fixed bottom-right, fades in on scroll ──────────────────────────────────────────────────────────── */ .to-top { position: fixed; right: clamp(16px, 3vw, 32px); bottom: clamp(16px, 3vw, 32px); z-index: 90; width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; color: var(--fg-1); background: rgba(14, 29, 51, 0.72); border: 1px solid var(--border-strong); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); cursor: pointer; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity 280ms var(--ease), transform 280ms var(--ease), background 220ms var(--ease), border-color 220ms var(--ease); } .to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .to-top:hover { background: linear-gradient(135deg, rgba(155,220,255,0.32) 0%, rgba(77,184,255,0.18) 50%, rgba(155,220,255,0.26) 100%); border-color: rgba(155,220,255,0.55); color: var(--accent); } .to-top svg { transition: transform 280ms var(--ease); } .to-top:hover svg { transform: translateY(-2px); } /* ──────────────────────────────────────────────────────────── Floating contact dock — LINE + EMAIL, fixed bottom-right, always visible. Sits directly above the back-to-top spot. ──────────────────────────────────────────────────────────── */ .floating-contact { position: fixed; right: clamp(16px, 3vw, 32px); bottom: calc(clamp(16px, 3vw, 32px) + 48px + 12px); z-index: 91; display: flex; flex-direction: column; gap: 10px; opacity: 0; pointer-events: none; transform: translateY(12px); transition: opacity 280ms var(--ease), transform 280ms var(--ease); } .floating-contact.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .floating-contact-link { width: 48px; height: 48px; display: inline-flex; align-items: center; justify-content: center; color: var(--fg-1); background: rgba(14, 29, 51, 0.72); border: 1px solid var(--border-strong); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); text-decoration: none; font-size: 22px; line-height: 1; transition: background 220ms var(--ease), border-color 220ms var(--ease), color 220ms var(--ease), transform 220ms var(--ease); } .floating-contact-link:hover, .floating-contact-link:focus-visible { background: linear-gradient(135deg, rgba(155,220,255,0.32) 0%, rgba(77,184,255,0.18) 50%, rgba(155,220,255,0.26) 100%); border-color: rgba(155,220,255,0.55); color: var(--accent); transform: translateY(-2px); outline: none; } .floating-contact-link i { display: block; line-height: 1; } /* ============================================================ DARK THEME OVERRIDES — btp_rwd_5_c_a (chunk 1/6: 容器與標題) ============================================================ */ html, body { background-color: var(--bg) !important; color: var(--fg-1); } .center-blocks, .bottom-blocks, .footer-blocks, #maincontent, #maincontent .maincontainer, .maincontainer { background: transparent; color: var(--fg-1); } .center-blocks a, .bottom-blocks a, .footer-blocks a, #maincontent a { color: var(--accent); } .center-blocks a:hover, .bottom-blocks a:hover, .footer-blocks a:hover, #maincontent a:hover { color: var(--accent-press); } .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--fg-1); } hr { border-color: var(--border); opacity: 1; } small, .text-muted { color: var(--fg-2) !important; } a, a:link { color: var(--accent); } a:visited { color: var(--accent); } a:hover, a:focus { color: var(--accent-press); } ::selection { background: rgba(77,184,255,0.35); color: #fff; } /* chunk 2/6: XOOPS 標準區塊外框 (xoops.css 預設淺色覆寫) */ .blockTitle, .itemTitle, .cBlock, .cBlockTitle, .cBlockContent, .outer, .head, .even, .odd { background-color: rgba(14, 29, 51, 0.7) !important; color: var(--fg-1) !important; border-color: var(--border) !important; } .blockTitle, .cBlockTitle { background: linear-gradient(180deg, rgba(77,184,255,0.10), transparent) !important; border-bottom: 1px solid var(--border) !important; color: var(--fg-1) !important; font-family: var(--font-display); letter-spacing: 0.04em; } .head { color: var(--accent) !important; } tr.even, tr.odd { background-color: rgba(14,29,51,0.5) !important; } tr.even:hover, tr.odd:hover { background-color: rgba(77,184,255,0.08) !important; } .submenu, .submenu-level-2, .submenu-level-3 { background-color: rgba(10,22,40,0.95); border: 1px solid var(--border); } /* chunk 3/6: XOOPS / Bootstrap 表單元件 */ input, select, textarea, .form-control, .form-select { background-color: rgba(255,255,255,0.04) !important; color: var(--fg-1) !important; border: 1px solid var(--border) !important; } input:focus, select:focus, textarea:focus, .form-control:focus, .form-select:focus { background-color: rgba(255,255,255,0.06) !important; color: var(--fg-1) !important; border-color: var(--accent) !important; box-shadow: 0 0 0 3px rgba(77,184,255,0.18) !important; outline: none !important; } input::placeholder, textarea::placeholder { color: var(--fg-2) !important; } .formButton, .button, button.formButton, input[type="submit"], input[type="button"], input[type="reset"] { background-color: var(--accent) !important; color: #051121 !important; border: 1px solid var(--accent) !important; border-radius: 999px; padding: 8px 18px; } .formButton:hover, .button:hover, input[type="submit"]:hover, input[type="button"]:hover, input[type="reset"]:hover { background-color: var(--accent-press) !important; color: #fff !important; } /* chunk 4/6: Bootstrap modal / 表格 / 引用 */ .modal-content { background-color: var(--bg-2) !important; color: var(--fg-1) !important; border: 1px solid var(--border) !important; } .modal-header, .modal-footer { border-color: var(--border) !important; } .modal-title { color: var(--fg-1) !important; } .btn-close { filter: invert(1) grayscale(100%) brightness(1.4); } .btn-dark { background-color: var(--accent) !important; border-color: var(--accent) !important; color: #051121 !important; } .btn-dark:hover, .btn-dark:focus { background-color: var(--accent-press) !important; border-color: var(--accent-press) !important; color: #fff !important; } table { background-color: transparent; color: var(--fg-1); border-color: var(--border); } table th, table td { background-color: rgba(14, 29, 51, 0.55); color: var(--fg-1); border-color: var(--border); } table th { color: var(--accent); } .table, .table > :not(caption) > * > * { background-color: transparent !important; color: var(--fg-1) !important; border-color: var(--border) !important; } blockquote { background-color: rgba(14, 29, 51, 0.6); border-left: 3px solid var(--accent); color: var(--fg-1); padding: 12px 18px; } code, pre, kbd, samp { background-color: rgba(255,255,255,0.05); color: var(--accent); border: 1px solid var(--border); border-radius: 4px; padding: 2px 6px; font-family: var(--font-mono); } /* chunk 5/6: news / wr 模組覆寫 */ #news_block_news, .news_block_news_photo, .itemHead, .itemInfo, .itemTitle, .itemBody, .itemFoot, .itemPoster, .storytitle, .storycontent { background-color: transparent !important; color: var(--fg-1) !important; } .storytitle a, .itemTitle a { color: var(--fg-1) !important; } .storytitle a:hover, .itemTitle a:hover { color: var(--accent) !important; } #tabNavigation a, #tabNavigation a:link, #tabNavigation a:visited { background-color: var(--bg-2) !important; color: var(--fg-1) !important; border-color: var(--border) !important; } #tabNavigation .selectedTab a, #tabNavigation .selectedTab a:link, #tabNavigation .selectedTab a:visited, #tabNavigation .selectedTab a:hover { background-color: var(--accent) !important; color: #051121 !important; border-color: var(--accent) !important; } #fullSupport { background-color: rgba(14,29,51,0.65) !important; color: var(--fg-1) !important; border: 1px solid var(--border); border-radius: 8px; } #wr_block_category_list, #wr_block_category_list a, #wr_block_category_list select { background-color: transparent; color: var(--fg-1); border-color: var(--border); } #wr_block_category_list a { color: var(--fg-1); } #wr_block_category_list a:hover { color: var(--accent); } #wr_block_category_list select { background-color: rgba(255,255,255,0.04); color: var(--fg-1); border: 1px solid var(--border); } /* chunk 6/6: 訊息盒 / Bootstrap utility / cosmos / 新版卡片 */ .confirmMsg, .errorMsg, .resultMsg { background-color: rgba(14,29,51,0.7) !important; color: var(--fg-1) !important; border: 1px solid var(--border) !important; border-radius: 6px; padding: 12px 16px; } .errorMsg { border-color: #b14a4a !important; color: #ffb3b3 !important; } .resultMsg { border-color: #4a8fb1 !important; } .bg-light, .bg-white, .bg-body, .bg-body-tertiary { background-color: var(--bg-2) !important; color: var(--fg-1) !important; } .text-dark, .text-body { color: var(--fg-1) !important; } .border, .border-top, .border-bottom, .border-start, .border-end { border-color: var(--border) !important; } .owl-theme .owl-dots .owl-dot.active span, .owl-theme .owl-dots .owl-dot:hover span { background-color: var(--accent) !important; } .news .news-title, .news .news-subtitle, .news .news-excerpt, .products .product-title, .products .product-description { color: var(--fg-1); } .news .news-date, .news .news-tag { color: var(--fg-2); } /* DARK THEME OVERRIDES end */ /* ============================================================ v4 — Force-align header / footer / floating-contact with demo. These rules come last so they beat bootstrap.css ('.nav-link', '.btn', 'a' default link color) AND the legacy style.css overrides ('a{color:#A0A0A0}', 'button{border-radius:4px}', 'a:hover{color:--brand-primary}'). Scope is intentionally limited to .header / .footer / .floating-contact so the rest of the site keeps bootstrap defaults (forms, modals, comments, etc.). ============================================================ */ /* ---- Header / top navigation ---------------------------- */ .header .nav-link, .header .nav-link:link, .header .nav-link:visited, .header .nav-link:hover, .header .nav-link:focus, .header .nav-link:active { color: var(--fg-1); text-decoration: none; background: transparent; border-radius: 0; } .header .submenu .nav-link:hover, .header .submenu .nav-item:hover > .nav-link { background: rgba(77, 184, 255, 0.06); color: var(--fg-1); } .header .nav-item.has-children:hover > .nav-link .menu-plus-icon { color: var(--accent); } /* mobile overlay language switcher */ .nav-overlay .lang-item, .nav-overlay .lang-item:link, .nav-overlay .lang-item:visited, .nav-overlay .lang-item:hover, .nav-overlay .lang-item:focus { color: var(--fg-1); text-decoration: none; border-radius: 0; background: transparent; } .nav-overlay .lang-item.is-active { color: var(--accent); } /* hamburger + search-toggle buttons — kill bootstrap & style.css button defaults */ .header .hamburger, .header .hamburger:focus, .header .hamburger:active, .header .search-toggle, .header .search-toggle:focus, .header .search-toggle:active { border: none; border-radius: 0; background: transparent; color: var(--fg-1); box-shadow: none; outline: none; } .header .search-toggle:hover, .header .search-toggle:focus-visible, .header .search-toggle.is-open { color: var(--accent); } /* logo anchor — keep inheritable, no bootstrap blue underline */ .header .logo, .header .logo:link, .header .logo:visited, .header .logo:hover, .header .logo:focus { color: inherit; text-decoration: none; border-radius: 0; background: transparent; } /* search panel form controls inside header drawer */ .search-panel .search-input { border-radius: 0; box-shadow: none; } .search-panel .search-close, .search-panel .search-close:focus, .search-panel .search-close:active { border: none; border-radius: 0; background: transparent; color: var(--fg-1); box-shadow: none; } .search-panel .search-hint { border-radius: 0; } /* ---- Footer -------------------------------------------- */ .footer a, .footer a:link, .footer a:visited { color: var(--fg-1); text-decoration: none; } .footer .footer-link, .footer .footer-link:link, .footer .footer-link:visited { color: var(--fg-1); } .footer .footer-link:hover, .footer .footer-link:focus { color: var(--accent); } .footer .footer-ops { color: var(--fg-2); } .footer .footer-ops a, .footer .footer-ops a:link, .footer .footer-ops a:visited { color: inherit; } .footer .footer-ops a:hover, .footer .footer-ops a:focus { color: var(--accent); } .footer .footer-social-link, .footer .footer-social-link:link, .footer .footer-social-link:visited { color: var(--fg-1); background: transparent; border: 1px dashed var(--border); border-radius: 0; box-shadow: none; text-decoration: none; } .footer .footer-social-link:hover, .footer .footer-social-link:focus, .footer .footer-social-link:focus-visible { color: var(--accent); background: rgba(77, 184, 255, 0.06); border-style: solid; border-color: var(--accent); outline: none; } /* any bootstrap .btn /