/* ══════════════════════════════════════════════════════════════════════════ OVERSIGHT · THE LIVING CHART · SITE DESIGN SYSTEM Exact design language of the approved concept: void black, logo lime, Newsreader serif, living motion. Shared across every page. ══════════════════════════════════════════════════════════════════════════ */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,300;0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,300;1,6..72,400;1,6..72,500&family=JetBrains+Mono:wght@400;500&family=Inter:wght@400;500;600&family=IBM+Plex+Sans+Arabic:wght@400;500;600;700&display=swap'); :root{ --void:#07110a; --panel:#11170f; --panel2:#161f13; --charcoal:#1a1a1c; --muted:#6b6b6b; --line:rgba(238,243,234,.10); --lime:#a8d506; --lime2:#c4e832; --lime-dim:rgba(168,213,6,.35); --text:#eef3ea; --mut:#a7b0a3; --dim:#76806f; --serif:'Newsreader',Georgia,serif; --mono:'JetBrains Mono',monospace; --sans:'Inter',sans-serif; /* aliases so legacy var() references keep working */ --brand-lime:#a8d506; --brand-lime-hover:#c4e832; --brand-lime-glow:rgba(168,213,6,.16); --brand-lime-subtle:rgba(168,213,6,.08); --brand-lime-border:rgba(168,213,6,.30); --brand-lime-bg:rgba(168,213,6,.12); --bg-main:#07110a; --bg-card:#11170f; --bg-card-hover:#161f13; --bg-elevated:#161f13; --bg-nav:rgba(7,17,10,.8); --bg-void:#07110a; --text-title:#eef3ea; --text-body:#b3bcaa; --text-muted:#a7b0a3; --text-faint:#76806f; --text-pure:#ffffff; --border-subtle:rgba(238,243,234,.10); --border-card:rgba(238,243,234,.14); --border-hover:rgba(238,243,234,.24); --watermark-opacity:.16; --watermark-stroke:#a8d506; --watermark-fill:rgba(168,213,6,.22); --alert-red:#e88c7a; --status-green:#a8d506; --shadow-card:0 2px 12px rgba(0,0,0,.35); --shadow-hover:rgba(238,243,234,.14) 0px 0px 0px 1px, 0 16px 40px rgba(0,0,0,.5); --spotlight-glow:rgba(168,213,6,.10); --font-display:'Newsreader',Georgia,serif; --font-sans:'Inter',sans-serif; --font-mono:'JetBrains Mono',monospace; --ease-spring:cubic-bezier(.16,1,.3,1); --ease-soft:cubic-bezier(.4,0,.2,1); --dur-fast:.18s; --dur-base:.32s; --dur-slow:.6s; --radius-xs:8px; --radius-sm:12px; --radius-md:16px; --radius-lg:22px; --radius-pill:999px; } :root[data-theme="light"]{ --void:#f5f6f0; --panel:#fbfcf7; --panel2:#f0f3e9; --line:rgba(20,23,19,.10); --lime:#527500; --lime2:#415e00; --lime-dim:rgba(82,117,0,.22); --lime-bright:#84ba00; --text:#141713; --mut:#4a534c; --dim:#687262; --bg-main:#f5f6f0; --bg-card:#fbfcf7; --bg-card-hover:#f0f3e9; --bg-nav:rgba(245,246,240,.88); --bg-void:#141713; --bg-input:#ffffff; --border-input:rgba(20,23,19,.18); --brand-lime:#527500; --brand-lime-hover:#415e00; --brand-lime-glow:rgba(82,117,0,.15); --brand-lime-subtle:rgba(82,117,0,.08); --brand-lime-border:rgba(82,117,0,.26); --brand-lime-bg:rgba(82,117,0,.10); --text-title:#141713; --text-body:#333831; --text-muted:#4a534c; --text-faint:#687262; --text-pure:#f5f6f0; --border-subtle:rgba(20,23,19,.08); --border-card:rgba(20,23,19,.12); --border-hover:rgba(20,23,19,.22); --watermark-opacity:.045; --watermark-stroke:rgba(82,117,0,.28); --watermark-fill:rgba(82,117,0,.05); --alert-red:#b3382e; --status-green:#527500; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{background:var(--void);color:var(--text);font-family:var(--sans);-webkit-font-smoothing:antialiased;overflow-x:hidden;line-height:1.78;transition:background-color .32s var(--ease-spring),color .32s var(--ease-spring)} ::selection{background:var(--lime);color:var(--void)} .wrap{width:100%;max-width:100%;margin:0 auto;padding:0 clamp(24px, 8vw, 150px)} .container{width:100%;max-width:100%;margin:0 auto;padding:0 clamp(24px, 8vw, 150px)} /* film grain */ .grain{position:fixed;inset:-100px;z-index:2000;pointer-events:none;opacity:.028; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)'/%3E%3C/svg%3E"); animation:grain 8s steps(10) infinite} @keyframes grain{0%,100%{transform:translate(0,0)}20%{transform:translate(-30px,15px)}40%{transform:translate(20px,-25px)}60%{transform:translate(-15px,-10px)}80%{transform:translate(30px,20px)}} /* scroll progress */ .progress{position:fixed;top:0;left:0;height:2px;width:0;background:linear-gradient(90deg,var(--lime),var(--lime2));z-index:1500;box-shadow:0 0 12px var(--lime)} /* nav */ nav{position:fixed;top:0;left:0;right:0;z-index:100;background:rgba(6,6,8,.7);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom:1px solid transparent;transition:.3s} :root[data-theme="light"] nav{background:rgba(245,246,240,.85)} nav.scrolled{border-bottom-color:var(--line);background:var(--bg-nav)} nav .wrap{display:flex;align-items:center;height:72px} .logo{display:flex;align-items:center;gap:11px;text-decoration:none;color:var(--text);flex:none;margin-right:auto} .logo .brand-logo-img{height:40px;width:auto;object-fit:contain;display:block;filter:drop-shadow(0 0 12px rgba(168,213,6,.35));transition:transform .2s ease} footer .logo .brand-logo-img{height:28px !important;filter:drop-shadow(0 0 10px rgba(168,213,6,.22))} :root[data-theme="light"] .logo .brand-logo-img{filter:none;opacity:1} .logo .mark{width:30px;height:30px;background:var(--lime);display:grid;grid-template-columns:repeat(3,5.5px);grid-template-rows:repeat(3,5.5px);gap:1.5px;padding:5px;border-radius:4px;animation:markPulse 3.5s infinite} @keyframes markPulse{0%,100%{box-shadow:0 0 0 0 rgba(168,213,6,.35)}50%{box-shadow:0 0 0 9px rgba(168,213,6,0)}} .logo .mark i{background:var(--void);border-radius:.5px} .logo .word{font-family:var(--mono);font-size:.8rem;letter-spacing:.14em;text-transform:uppercase;font-weight:500} .logo .word b{color:var(--lime);font-weight:500} .nav-links{display:flex;align-items:center;gap:4px} .nav-links a{color:var(--mut);text-decoration:none;font-size:.85rem;font-weight:500;padding:8px 14px;border-radius:8px;transition:.2s} .nav-links a:hover{color:var(--text);background:rgba(255,255,255,.05)} .nav-links a.active{color:var(--lime);background:var(--lime-subtle,rgba(168,213,6,.08))} /* Other Services dropdown */ .nav-drop{position:relative} .nav-drop .drop-toggle{display:inline-flex;align-items:center;gap:7px;color:var(--mut);text-decoration:none;font-size:.85rem;font-weight:500;padding:8px 14px;border-radius:8px;transition:.2s;cursor:pointer} .nav-drop .drop-toggle:hover{color:var(--text);background:rgba(255,255,255,.05)} .nav-drop .drop-toggle .drop-caret{transition:transform .25s var(--ease-spring)} .nav-drop:hover .drop-toggle{color:var(--text);background:rgba(255,255,255,.05)} .nav-drop:hover .drop-toggle .drop-caret{transform:rotate(180deg)} .nav-drop .drop-menu{position:absolute;top:calc(100% + 6px);left:0;min-width:230px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:8px;display:flex;flex-direction:column;gap:2px;opacity:0;visibility:hidden;transform:translateY(8px);transition:opacity .22s var(--ease-spring),transform .22s var(--ease-spring),visibility .22s;box-shadow:0 18px 50px rgba(0,0,0,.55);z-index:150} .nav-drop:hover .drop-menu,.nav-drop:focus-within .drop-menu{opacity:1;visibility:visible;transform:translateY(0)} .nav-drop .drop-menu a{display:flex;align-items:center;justify-content:space-between;color:var(--mut);text-decoration:none;font-size:.83rem;font-weight:500;padding:10px 12px;border-radius:9px;transition:.18s;white-space:nowrap} .nav-drop .drop-menu a:hover{color:var(--text);background:var(--panel2)} .nav-drop .drop-menu a.active{color:var(--lime);background:rgba(168,213,6,.08)} .nav-drop .drop-menu a.active::after{content:'→';color:var(--lime);font-size:.8rem} /* mobile drawer group */ .drawer-group{display:flex;flex-direction:column;gap:2px;padding:6px 0;border-bottom:1px solid var(--line);margin:4px 0} .drawer-label{font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);padding:6px 16px 4px} .drawer-group a{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-radius:10px;color:var(--mut);text-decoration:none;font-size:.95rem;font-weight:500} .drawer-group a.active{color:var(--lime)} .drawer-group a.active::after{content:'→';color:var(--lime)} .nav-cta{margin-left:24px;background:var(--lime);color:var(--void);font-weight:600;font-size:.85rem;padding:10px 22px;border-radius:999px;text-decoration:none;transition:.25s;box-shadow:0 0 24px rgba(168,213,6,.25);position:relative;overflow:hidden} .nav-cta:hover{background:var(--lime2);transform:translateY(-2px)} /* Floating Theme Toggle Widget (Center-Right of Screen) */ .theme-toggle-btn{position:fixed;right:20px;top:50%;transform:translateY(-50%);z-index:9999;width:44px;height:44px;border-radius:50%;background:rgba(18,21,16,.82);border:1px solid var(--line);color:var(--mut);display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 10px 30px rgba(0,0,0,.45),0 0 0 1px rgba(255,255,255,.06);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);transition:transform .25s var(--ease-spring),background .25s,border-color .25s,color .25s,box-shadow .25s} .theme-toggle-btn:hover{border-color:var(--lime-dim);color:var(--lime);background:var(--panel2);transform:translateY(-50%) scale(1.12);box-shadow:0 14px 40px rgba(0,0,0,.55),0 0 24px rgba(168,213,6,.30)} .theme-toggle-btn:active{transform:translateY(-50%) scale(.95)} :root[data-theme="light"] .theme-toggle-btn{background:rgba(251,252,247,.88);border-color:rgba(20,23,19,.12);box-shadow:0 10px 30px rgba(0,0,0,.10),0 0 0 1px rgba(0,0,0,.04)} :root[data-theme="light"] .theme-toggle-btn:hover{border-color:var(--lime-dim);color:var(--lime);background:var(--panel2);box-shadow:0 14px 36px rgba(0,0,0,.14),0 0 20px rgba(107,141,0,.20)} @media(max-width:768px){ .theme-toggle-btn{right:12px;top:auto;bottom:16px;transform:none;width:40px;height:40px} .theme-toggle-btn:hover{transform:none} body.drawer-open .theme-toggle-btn{opacity:0 !important;pointer-events:none !important} } /* ══════════════════════════════════════════════════════════════════════════ RTL & ARABIC ENGINE ══════════════════════════════════════════════════════════════════════════ */ html[dir="rtl"], html[lang="ar"], body.rtl{ direction: rtl; text-align: right; --sans: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; --font-sans: 'IBM Plex Sans Arabic', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } html[dir="rtl"] h1, html[dir="rtl"] h2, html[dir="rtl"] h3, html[dir="rtl"] h4, html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3, html[lang="ar"] h4{ font-family: 'IBM Plex Sans Arabic', var(--sans); font-weight: 700; letter-spacing: 0 !important; } html[dir="rtl"] .nav-cta, html[lang="ar"] .nav-cta{ margin-left: 0; margin-right: 24px; } html[dir="rtl"] .drop-caret, html[lang="ar"] .drop-caret{ margin-left: 0; margin-right: 6px; } html[dir="rtl"] .nav-drop .drop-menu, html[lang="ar"] .nav-drop .drop-menu{ left: auto; right: 0; text-align: right; } html[dir="rtl"] .drawer-group a.active::after, html[lang="ar"] .drawer-group a.active::after{ content: '←'; } html[dir="rtl"] code, html[dir="rtl"] pre, html[dir="rtl"] .mono, html[dir="rtl"] .tactical-title, html[lang="ar"] code, html[lang="ar"] pre, html[lang="ar"] .mono, html[lang="ar"] .tactical-title{ direction: ltr; text-align: left; } html[dir="rtl"] .co-select-trigger, html[lang="ar"] .co-select-trigger{ text-align: right; } /* hero */ .hero{position:relative;min-height:100vh;display:flex;align-items:center;padding:140px 0 60px;overflow:hidden} .hero-inner{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center;width:100%} /* ═══ THE BLIP · concept 5 · one light in the dark ═══ */ .hero-blip{min-height:calc(100vh - 0px);display:flex;align-items:center;justify-content:center;text-align:center;padding:120px 0 80px;background:transparent} .blip-stage{position:relative;z-index:2;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0;width:100%} .blip-graticule{position:absolute;inset:0;pointer-events:none;opacity:.16;background-image:radial-gradient(circle at 50% 46%,transparent 0,rgba(168,213,6,.05) 1px,transparent 1px),linear-gradient(rgba(168,213,6,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(168,213,6,.09) 1px,transparent 1px);background-size:240px 240px,60px 60px,60px 60px;-webkit-mask-image:radial-gradient(ellipse at 50% 46%,black 0%,transparent 62%);mask-image:radial-gradient(ellipse at 50% 46%,black 0%,transparent 62%);animation:graticuleDrift 40s linear infinite} @keyframes graticuleDrift{to{background-position:0 240px,0 0,0 0}} .blip-meta{font-family:var(--mono);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin-bottom:44px;animation:blipMeta 5s ease-in-out infinite} @keyframes blipMeta{0%,100%{opacity:.6}50%{opacity:1}} .blip-wrap{position:relative;width:340px;height:340px;display:flex;align-items:center;justify-content:center;margin-bottom:8px} .blip-dot{position:absolute;width:14px;height:14px;border-radius:50%;background:var(--lime);box-shadow:0 0 18px var(--lime),0 0 42px rgba(168,213,6,.55),0 0 80px rgba(168,213,6,.25);animation:blipDot 3.4s ease-in-out infinite;z-index:3} @keyframes blipDot{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.82);opacity:.72}} .blip-ring{position:absolute;border-radius:50%;border:1px solid rgba(168,213,6,.5);left:50%;top:50%;transform:translate(-50%,-50%);pointer-events:none} .blip-ring.r1{width:56px;height:56px;animation:blipRing 3.4s cubic-bezier(.2,.6,.35,1) infinite;animation-delay:0s} .blip-ring.r2{width:56px;height:56px;animation:blipRing 3.4s cubic-bezier(.2,.6,.35,1) infinite;animation-delay:1.13s} .blip-ring.r3{width:56px;height:56px;animation:blipRing 3.4s cubic-bezier(.2,.6,.35,1) infinite;animation-delay:2.26s} @keyframes blipRing{0%{width:56px;height:56px;opacity:.9;border-color:rgba(168,213,6,.55)}100%{width:300px;height:300px;opacity:0;border-color:rgba(168,213,6,.05)}} .blip-line{font-family:var(--mono);font-size:clamp(.9rem,1.8vw,1.15rem);letter-spacing:.05em;color:var(--text);margin:36px 0 0;max-width:620px;line-height:1.9} .blip-line em{font-style:normal;color:var(--lime);font-weight:500} .blip-dim{color:var(--dim);font-weight:400} .blip-cta{margin-top:38px;justify-content:center} .blip-data{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:center;margin-top:44px;padding-top:24px;border-top:1px solid var(--line);font-family:var(--mono);font-size:.6rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)} .blip-data .blip-sep{opacity:.45} @media(max-width:768px){ .hero-blip{padding:96px 0 56px;min-height:auto} .blip-wrap{width:240px;height:240px} @keyframes blipRing{0%{width:44px;height:44px;opacity:.9}100%{width:210px;height:210px;opacity:0}} .blip-meta{font-size:.5rem;letter-spacing:.16em;margin-bottom:32px} .blip-line{font-size:.84rem;margin-top:26px} .blip-cta{margin-top:30px} .blip-data{gap:10px;font-size:.52rem;letter-spacing:.14em;margin-top:32px} .blip-graticule{background-size:200px 200px,48px 48px,48px 48px} } .hero .sea{position:absolute;inset:0;pointer-events:none;will-change:transform} .hero .sea svg{width:100%;height:100%} /* ═══ NIGHT BRIDGE · concept sketch 005 · real helm photo, one lime leak ═══ */ .hero-night{min-height:100vh;min-height:100dvh;padding:0;background:var(--void)} .hero-night .hero-photo{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:62% 48%;filter:brightness(.58) saturate(.5) contrast(1.12);transform:scale(1.04);z-index:0} .hero-night .grade{position:absolute;inset:0;pointer-events:none;z-index:1;background:linear-gradient(90deg,rgba(6,6,8,.9) 0%,rgba(6,6,8,.72) 30%,rgba(6,6,8,.18) 62%,rgba(6,6,8,.42) 100%),linear-gradient(180deg,rgba(6,6,8,.25) 0%,transparent 30%,transparent 60%,rgba(6,6,8,.45) 100%)} .hero-night .leak{position:absolute;width:14vmin;height:10vmin;right:26%;top:46%;background:radial-gradient(ellipse at center,rgba(168,213,6,.85) 0%,rgba(168,213,6,.28) 38%,transparent 72%);filter:blur(4px);mix-blend-mode:screen;pointer-events:none;z-index:2;animation:breathe 4.8s ease-in-out infinite} @keyframes breathe{0%,100%{opacity:.7;transform:scale(1)}50%{opacity:1;transform:scale(1.08)}} .hero-night .grain{position:absolute;inset:0;pointer-events:none;z-index:2;opacity:.14;mix-blend-mode:overlay;background-image:url("data:image/svg+xml;utf8,")} .hero-night .night-copy{position:relative;z-index:3;min-height:100vh;min-height:100dvh;display:flex;flex-direction:column;justify-content:flex-end;padding-bottom:76px;max-width:640px;margin-left:0} .hero-night .night-meta{font-family:var(--mono);font-size:.58rem;letter-spacing:.22em;text-transform:uppercase;color:var(--dim);margin-bottom:18px} .hero-night .night-title{font-family:var(--serif);font-weight:400;font-size:clamp(2.4rem,5.2vw,4.4rem);line-height:.98;letter-spacing:-.02em;color:var(--text)} .hero-night .night-title em{font-style:italic;color:var(--lime)} .hero-night .night-sub{margin-top:18px;font-size:1.05rem;color:var(--mut);line-height:1.7;max-width:420px} .hero-night .night-cta{margin-top:32px} .hero-night .night-note{margin-top:22px;font-size:.78rem;color:#76806f;max-width:380px;line-height:1.55} @media (prefers-reduced-motion:reduce){.hero-night .leak{animation:none}} @media(max-width:768px){ .hero-night{padding:0} .hero-night .hero-photo{object-position:70% 50%;filter:brightness(.5) saturate(.48) contrast(1.15)} .hero-night .grade{background:linear-gradient(180deg,rgba(6,6,8,.35) 0%,rgba(6,6,8,.2) 30%,rgba(6,6,8,.82) 100%),linear-gradient(90deg,rgba(6,6,8,.55) 0%,transparent 50%)} .hero-night .leak{right:12%;top:38%;width:18vmin;height:12vmin} .hero-night .night-copy{min-height:auto;padding:140px 16px 48px;justify-content:flex-end} .hero-night .night-title{font-size:clamp(2.1rem,11vw,3.1rem)} } .hero .glow{position:absolute;top:-160px;left:50%;transform:translateX(-50%);width:1100px;height:700px;background:radial-gradient(ellipse,rgba(168,213,6,.10) 0%,transparent 60%);filter:blur(100px);pointer-events:none;animation:aurora 16s ease-in-out infinite alternate;will-change:transform,opacity} @keyframes aurora{0%{transform:translateX(-50%) translateY(0) scale(1);opacity:.7}50%{transform:translateX(-44%) translateY(40px) scale(1.08);opacity:1}100%{transform:translateX(-56%) translateY(-20px) scale(.95);opacity:.75}} .hero .radar{position:absolute;right:-220px;top:50%;width:640px;height:640px;border-radius:50%;border:1px solid rgba(168,213,6,.18);pointer-events:none;will-change:transform} .hero .radar::before,.hero .radar::after{content:'';position:absolute;inset:14%;border:1px solid rgba(168,213,6,.12);border-radius:50%} .hero .radar::after{inset:30%} .hero .radar .sweep{position:absolute;inset:0;border-radius:50%;background:conic-gradient(from 0deg,rgba(168,213,6,.22) 0deg,rgba(168,213,6,.04) 40deg,transparent 90deg);animation:sweep 6s linear infinite} @keyframes sweep{to{transform:rotate(360deg)}} .hero .radar .blip{position:absolute;width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 12px var(--lime);animation:blip 3s infinite} .hero .radar .blip.b1{top:30%;right:22%;animation-delay:0s} .hero .radar .blip.b2{top:58%;right:40%;animation-delay:1s} .hero .radar .blip.b3{top:44%;right:64%;animation-delay:2s} @keyframes blip{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.4);opacity:.4}} .hero .radar .sonar{position:absolute;top:50%;left:50%;width:10px;height:10px;margin:-5px;border:1px solid var(--lime);border-radius:50%;animation:sonar 3.2s infinite;opacity:0} .hero .radar .sonar.s2{animation-delay:1.07s} .hero .radar .sonar.s3{animation-delay:2.14s} @keyframes sonar{0%{transform:scale(.2);opacity:.8}100%{transform:scale(42);opacity:0}} .hero .grid-bg{position:absolute;inset:0;background-image:linear-gradient(var(--line) 1px,transparent 1px),linear-gradient(90deg,var(--line) 1px,transparent 1px);background-size:64px 64px;-webkit-mask-image:radial-gradient(ellipse at 40% 30%,black 0%,transparent 70%);mask-image:radial-gradient(ellipse at 40% 30%,black 0%,transparent 70%);pointer-events:none} .coord{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;color:var(--dim);text-transform:uppercase;margin-bottom:26px;display:flex;align-items:center;gap:10px;flex-wrap:wrap} .coord b{color:var(--lime);font-weight:500} .coord-sep{opacity:.5} h1{font-family:var(--serif);font-weight:400;font-size:clamp(2.9rem,5.8vw,4.8rem);line-height:1.0;letter-spacing:-.01em} h1 em{font-style:italic} h1 .lime{color:var(--lime)} .underline{position:relative;display:inline-block} .underline svg{position:absolute;left:0;right:0;bottom:-10px;width:100%;height:14px;overflow:visible} .underline svg path{stroke:var(--lime);stroke-width:2.5;fill:none;stroke-linecap:round;stroke-dasharray:320;stroke-dashoffset:320;animation:draw 1.6s .8s forwards} @keyframes draw{to{stroke-dashoffset:0}} .h1-line{display:block;overflow:hidden} .h1-line .w{display:inline-block} @media (prefers-reduced-motion: no-preference){ html.js .h1-line .w{transform:translateY(110%);animation:wordUp .9s cubic-bezier(.16,1,.3,1) forwards} .h1-line .w:nth-child(2){animation-delay:.08s}.h1-line .w:nth-child(3){animation-delay:.16s} .h1-line .w:nth-child(4){animation-delay:.24s}.h1-line .w:nth-child(5){animation-delay:.32s} } @keyframes wordUp{to{transform:translateY(0)}} .hero .sub{font-size:1.08rem;color:var(--mut);max-width:640px;margin:30px 0 40px;line-height:1.85} .cta-row{display:flex;gap:14px;flex-wrap:wrap;align-items:center} .btn{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.98rem;padding:16px 30px;border-radius:12px;text-decoration:none;transition:transform .15s;position:relative;will-change:transform} .btn.primary{background:var(--lime);color:var(--void);box-shadow:0 0 30px rgba(168,213,6,.3);overflow:hidden} .btn.primary::after{content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:shine 3.2s infinite} @keyframes shine{0%{left:-80%}55%{left:130%}100%{left:130%}} .btn.primary:hover{background:var(--lime2)} .btn.ghost{border:1px solid rgba(255,255,255,.18);color:var(--text)} .btn.ghost:hover{border-color:var(--lime);color:var(--lime);box-shadow:0 0 24px rgba(168,213,6,.12)} :root[data-theme="light"] .btn.ghost{border-color:rgba(20,23,19,.22);color:var(--text)} :root[data-theme="light"] .btn.ghost:hover{border-color:var(--lime);color:var(--lime2);box-shadow:0 0 20px rgba(107,141,0,.12)} /* vessel board */ .board{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px;box-shadow:0 30px 80px rgba(0,0,0,.5);overflow:hidden;transform-style:preserve-3d;will-change:transform} .board::before{content:'';position:absolute;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--lime),transparent);top:-2px;animation:scanline 4.5s linear infinite;z-index:2;pointer-events:none} @keyframes scanline{0%{top:-2px;opacity:0}8%{opacity:1}92%{opacity:1}100%{top:100%;opacity:0}} .board::after{content:'';position:absolute;top:12px;right:14px;width:10px;height:10px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime);animation:pu 2.4s infinite} @keyframes pu{50%{opacity:.35}} .board .bl{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:18px} .board .route{width:100%;aspect-ratio:1.7;margin-bottom:16px;overflow:hidden;border-radius:10px;background:radial-gradient(ellipse at 30% 40%,rgba(168,213,6,.06),transparent 60%),#0e1014} .board .route svg{width:100%;height:100%} .board .route .rline{fill:none;stroke:var(--lime);stroke-width:1.6;stroke-dasharray:5 7;animation:mar 14s linear infinite} @keyframes mar{to{stroke-dashoffset:-240}} .board .route .ship{fill:var(--lime);filter:drop-shadow(0 0 6px var(--lime))} .board .route .port{fill:var(--mut)} .board .route .port.hl{fill:var(--lime);animation:portPulse 2s infinite} @keyframes portPulse{0%,100%{opacity:1}50%{opacity:.45}} .board .route .glabel{font-family:var(--mono);font-size:7px;fill:var(--dim);letter-spacing:.08em} .board .rows{margin-bottom:16px} .board .row{display:flex;justify-content:space-between;align-items:center;padding:11px 2px;border-bottom:1px solid var(--line);font-size:.83rem;gap:12px} .board .row:last-child{border-bottom:none} .board .row .k{color:var(--dim);font-family:var(--mono);font-size:.66rem;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap} .board .row .v{font-weight:500;font-family:var(--mono);font-size:.76rem;color:var(--text);text-align:right} .board .row .v.red{color:#e88c7a} .board .row .v.ok{color:var(--lime)} .board .tabs{display:flex;gap:8px;flex-wrap:wrap} .board .tabs button{background:transparent;border:1px solid var(--line);border-radius:999px;padding:7px 16px;font-size:.74rem;color:var(--mut);cursor:pointer;font-family:var(--mono);transition:.2s} .board .tabs button.on{background:rgba(168,213,6,.12);border-color:var(--lime-dim);color:var(--lime)} .board .tabs button:hover{border-color:var(--lime-dim);color:var(--text)} /* ticker */ .ticker{border-top:1px solid var(--line);border-bottom:1px solid var(--line);padding:18px 0;overflow:hidden;position:relative;background:var(--panel);z-index:2} .ticker .track{display:flex;gap:60px;white-space:nowrap;animation:tick 28s linear infinite;width:max-content} .ticker span{font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;color:var(--dim)} .ticker span b{color:var(--lime);font-weight:500} @keyframes tick{to{transform:translateX(-50%)}} /* sections */ .sec{padding:110px 0;position:relative} .sec-head{max-width:780px;margin-bottom:60px} .sec-head .no{font-family:var(--mono);font-size:.64rem;letter-spacing:.2em;color:var(--lime);text-transform:uppercase;display:flex;align-items:center;gap:12px;margin-bottom:18px} /* logo mark (9 stepped blocks) instead of § */ .sec-mark{width:1.05em;height:1.05em;flex:none;display:inline-block} .sec-head .no::after{content:'';width:44px;height:1px;background:var(--lime)} .sec-head h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,3.8vw,3rem);line-height:1.08;letter-spacing:-.01em} .sec-head h2 em{font-style:italic;color:var(--lime)} .sec-head p{color:var(--mut);margin-top:16px;line-height:1.8;font-size:1rem} /* bento tiles */ .bento{display:grid;grid-template-columns:repeat(6,1fr);gap:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel)} .tile{padding:34px 30px;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transition:background .3s;position:relative;overflow:hidden;transform-style:preserve-3d;will-change:transform} .tile:nth-child(6n){border-right:none} .tile:nth-child(n+7){border-bottom:none} .tile::before{content:'';position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(168,213,6,.10),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none} .tile:hover::before{opacity:1} .tile:hover{background:var(--panel2)} .tile .tref{font-family:var(--mono);font-size:.58rem;letter-spacing:.2em;color:var(--dim);text-transform:uppercase;margin-bottom:14px} .tile h3{font-family:var(--serif);font-weight:500;font-size:1.4rem;margin-bottom:10px;line-height:1.15} .tile p{font-size:.88rem;color:var(--mut);line-height:1.78} .tile .chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--lime);margin-top:16px} .tile .chip::before{content:'→';font-size:.8rem} /* blog tile link (visible "Read brief" + full-card overlay) */ .tile-link{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);text-decoration:none;font-weight:600;margin-top:18px;transition:gap .2s var(--ease-spring),color .2s} .tile-link::after{content:'→';transition:transform .2s var(--ease-spring)} .tile-link:hover{color:var(--lime2);gap:10px} .tile-link:hover::after{transform:translateX(2px)} .tile-overlay{position:absolute;inset:0;z-index:1;border-radius:inherit;text-decoration:none} .tile:hover .tile-overlay{outline:1px solid var(--lime-dim);outline-offset:-3px;border-radius:12px} .tile h3,.tile p,.tile .chip,.tile .tref{position:relative;z-index:2} .tile-link{position:relative;z-index:2} .tile .big{font-family:var(--serif);font-size:3rem;font-weight:400;color:var(--lime);line-height:1} .tile.wide{grid-column:span 3} .tile.tall{grid-row:span 2} .tile.med{grid-column:span 2} /* even 3×2 layout (index "what we do"): six equal tiles */ .bento.even .tile{grid-column:span 2} .bento.even .tile:nth-child(3n){border-right:none} .bento.even .tile:nth-child(3n+1){border-left:none} .bento.even .tile:nth-child(n+4){border-bottom:none} /* metrics */ .metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel);margin-top:70px} .met{padding:38px 30px;border-right:1px solid var(--line);position:relative;overflow:hidden} .met:last-child{border-right:none} .met::after{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--lime),transparent);opacity:0;transition:.4s} .met:hover::after{opacity:1} .met .num{font-family:var(--serif);font-size:3rem;color:var(--lime);line-height:1;font-weight:400} .met .lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:10px 0 8px} .met .desc{font-size:.82rem;color:var(--mut);line-height:1.6} /* reveal · content visible by default; animation only when JS is alive + motion allowed */ .reveal{opacity:1;transform:none} .reveal.in{opacity:1;transform:none} .reveal.d1,.reveal.d2,.reveal.d3{transition-delay:0s} @media (prefers-reduced-motion: no-preference){ html.js .reveal{opacity:0;transform:translateY(34px);transition:opacity .9s cubic-bezier(.16,1,.3,1),transform .9s cubic-bezier(.16,1,.3,1)} html.js .reveal.in, html.js .reveal.is-visible, html.js .reveal.revealed{opacity:1;transform:translateY(0)} html.js .reveal.d1{transition-delay:.1s}html.js .reveal.d2{transition-delay:.2s}html.js .reveal.d3{transition-delay:.3s} } /* cta */ .cta{position:relative;width:100%;max-width:100%;margin:0 auto 110px;background:linear-gradient(140deg,rgba(168,213,6,.14),rgba(168,213,6,.02) 55%);border:1px solid var(--lime-dim);border-radius:22px;padding:clamp(36px,4vw,64px);display:flex;justify-content:space-between;align-items:center;gap:44px;flex-wrap:wrap;overflow:hidden} .cta::before{content:'';position:absolute;top:-140px;right:-100px;width:460px;height:460px;background:radial-gradient(circle,rgba(168,213,6,.16),transparent 60%);animation:ctaGlow 7s ease-in-out infinite alternate} @keyframes ctaGlow{0%{transform:translate(0,0) scale(1);opacity:.7}100%{transform:translate(-60px,30px) scale(1.15);opacity:1}} .cta h3{font-family:var(--serif);font-weight:400;font-size:2.3rem;line-height:1.08;max-width:650px;letter-spacing:-.01em} .cta h3 em{font-style:italic;color:var(--lime)} .cta p{color:var(--mut);margin-top:14px;font-size:1rem;max-width:580px;line-height:1.7} .cta .btn.primary{background:var(--lime);color:var(--void);font-size:1.02rem;padding:18px 36px} /* footer */ footer{position:relative;z-index:10;background:rgba(5,10,6,.30);backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px);border-top:1px solid var(--line);padding:72px 0 36px} :root[data-theme="light"] footer{background:rgba(237,242,231,.30);border-top-color:rgba(20,23,19,.10)} .foot-grid{display:grid;grid-template-columns:2.2fr 1fr 1fr 1fr 1.3fr;gap:clamp(24px,3.5vw,48px);margin-bottom:56px;align-items:start} .foot-grid h4{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:18px;font-weight:500} .foot-grid a{display:block;color:var(--mut);text-decoration:none;font-size:.88rem;margin-bottom:10px;transition:color .2s,transform .2s var(--ease-spring)} .foot-grid a:hover{color:var(--lime);transform:translateX(3px)} .foot-bottom{border-top:1px solid var(--line);padding-top:24px;display:flex;justify-content:space-between;align-items:center;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--dim);flex-wrap:wrap;gap:12px} .foot-credit{display:inline-flex;align-items:center;gap:7px;font-family:var(--sans);font-size:.76rem;color:var(--dim);letter-spacing:.02em} .foot-cyber-link{display:inline-flex;align-items:center;gap:7px;color:var(--lime);text-decoration:none;border-bottom:1px solid var(--lime);padding-bottom:2px;font-weight:600;letter-spacing:.05em;transition:color .2s var(--ease-soft),border-color .2s var(--ease-soft),filter .2s var(--ease-soft)} .foot-cyber-link:hover{color:var(--lime2);border-color:var(--lime2);filter:drop-shadow(0 0 6px var(--brand-lime-glow))} .foot-cyber-link .cyber-icon{width:13px;height:13px;display:inline-block;vertical-align:middle;flex-shrink:0;color:currentColor;transition:transform .2s var(--ease-soft)} .foot-cyber-link:hover .cyber-icon{transform:scale(1.1)} /* ambient watermark (stepped logo blocks) */ .monumental-bg-emblem{position:fixed;top:30px;right:-70px;width:680px;height:680px;pointer-events:none;z-index:0;opacity:var(--watermark-opacity);transition:opacity .32s} .ambient-aurora-orb{position:fixed;top:-220px;left:50%;transform:translateX(-50%);width:900px;height:620px;background:radial-gradient(ellipse,var(--brand-lime-glow) 0%,transparent 62%);filter:blur(110px);pointer-events:none;z-index:0;opacity:.6;animation:aurora 20s ease-in-out infinite alternate} .brand-grid-bg{position:fixed;inset:0;width:100%;height:100%;background-image:radial-gradient(var(--line) 1px,transparent 1px);background-size:30px 30px;pointer-events:none;z-index:0;opacity:.30} /* legacy component aliases used by inner pages */ .site-wrapper{position:relative;z-index:2;width:100%} .badge-human{display:inline-flex;align-items:center;gap:8px;padding:6px 14px;background:rgba(168,213,6,.08);border:1px solid rgba(168,213,6,.30);border-radius:999px;font-family:var(--mono);font-size:.72rem;font-weight:500;letter-spacing:.08em;text-transform:uppercase;color:var(--lime);margin-bottom:22px} .pixel-mark{display:inline-grid;grid-template-columns:repeat(3,3px);grid-template-rows:repeat(3,3px);gap:2px} .pixel-mark span{background:var(--lime);border-radius:.5px} .pixel-mark span:nth-child(2),.pixel-mark span:nth-child(4),.pixel-mark span:nth-child(5),.pixel-mark span:nth-child(6),.pixel-mark span:nth-child(8){opacity:1} .pixel-mark span:nth-child(1),.pixel-mark span:nth-child(3),.pixel-mark span:nth-child(7),.pixel-mark span:nth-child(9){opacity:0} .card-human{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:34px 30px;position:relative;overflow:hidden;transition:background .3s;transform-style:preserve-3d;will-change:transform} .card-human::before{content:'';position:absolute;inset:0;background:radial-gradient(260px circle at var(--mx,50%) var(--my,50%),rgba(168,213,6,.10),transparent 60%);opacity:0;transition:opacity .3s;pointer-events:none} .card-human:hover::before{opacity:1} .card-human:hover{background:var(--panel2)} .card-human .card-icon{width:44px;height:44px;border-radius:12px;background:rgba(168,213,6,.08);border:1px solid rgba(168,213,6,.25);display:flex;align-items:center;justify-content:center;font-size:1.2rem;margin-bottom:20px} .card-human h3{font-family:var(--serif);font-weight:500;font-size:1.4rem;margin-bottom:10px;line-height:1.15} .card-human p{font-size:.9rem;color:var(--mut);line-height:1.75;margin-bottom:18px} .card-tags{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:18px} .tag-pill{font-size:.68rem;font-weight:500;color:var(--mut);background:transparent;border:1px solid var(--line);padding:4px 12px;border-radius:999px;font-family:var(--mono);letter-spacing:.04em;text-transform:uppercase} .card-link{font-size:.9rem;font-weight:600;color:var(--lime);text-decoration:none;display:inline-flex;align-items:center;gap:6px;transition:gap .18s var(--ease-spring)} .card-link:hover{gap:10px;color:var(--text)} .grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel)} .grid-2 .card-human{border-radius:0;border:none;border-right:1px solid var(--line);border-bottom:1px solid var(--line)} .grid-2 .card-human:nth-child(2n){border-right:none} .grid-2 .card-human:nth-child(n+3){border-bottom:none} .grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel)} .grid-3 .card-human{border-radius:0;border:none;border-right:1px solid var(--line);border-bottom:1px solid var(--line)} .grid-3 .card-human:nth-child(3n){border-right:none} .grid-3 .card-human:nth-child(n+4){border-bottom:none} .lifecycle-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:40px;max-width:960px;margin:0 auto} .lifecycle-tabs{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:28px} .lifecycle-tab-btn{background:var(--void);border:1px solid var(--line);border-radius:12px;padding:16px 18px;text-align:left;cursor:pointer;transition:all .18s var(--ease-spring)} .lifecycle-tab-btn:hover{border-color:var(--lime-dim)} .lifecycle-tab-btn.active{background:rgba(168,213,6,.08);border-color:var(--lime-dim)} .lifecycle-tab-btn .step-num{font-family:var(--mono);font-size:.68rem;font-weight:500;color:var(--lime);text-transform:uppercase;letter-spacing:.08em;margin-bottom:4px} .lifecycle-tab-btn .step-title{font-size:.92rem;font-weight:600;color:var(--text)} .lifecycle-content-box{background:var(--void);border:1px solid var(--line);border-radius:14px;padding:34px} .metrics-section{padding:90px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel)} .metrics-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:40px} .metric-box{display:flex;flex-direction:column;gap:10px} .metric-number{font-family:var(--serif);font-size:3rem;color:var(--lime);line-height:1;font-weight:400} .metric-title{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin:6px 0 4px} .metric-desc{font-size:.85rem;color:var(--mut);line-height:1.65} .cta-box-human{position:relative;background:linear-gradient(140deg,rgba(168,213,6,.14),rgba(168,213,6,.02) 55%);border:1px solid var(--lime-dim);border-radius:22px;padding:64px 56px;display:flex;justify-content:space-between;align-items:center;gap:40px;flex-wrap:wrap;overflow:hidden} .cta-box-human::before{content:'';position:absolute;top:-140px;right:-100px;width:460px;height:460px;background:radial-gradient(circle,rgba(168,213,6,.16),transparent 60%);animation:ctaGlow 7s ease-in-out infinite alternate;pointer-events:none} .cta-box-human h3{font-family:var(--serif);font-weight:400;font-size:2.1rem;line-height:1.1;max-width:520px;letter-spacing:-.01em} .cta-box-human p{color:var(--mut);margin-top:12px;font-size:1rem;max-width:470px;line-height:1.7} .agency-footer{border-top:1px solid var(--line);padding:70px 0 36px} .footer-grid{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:48px;margin-bottom:56px} .footer-block h4{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);margin-bottom:16px} .footer-links{list-style:none} .footer-links li{margin-bottom:9px} .footer-links a{display:inline-block;color:var(--mut);text-decoration:none;font-size:.88rem;transition:.2s} .footer-links a:hover{color:var(--lime);transform:translateX(3px)} .footer-bottom{border-top:1px solid var(--line);padding-top:22px;display:flex;justify-content:space-between;font-family:var(--mono);font-size:.68rem;letter-spacing:.08em;color:var(--dim);flex-wrap:wrap;gap:10px} .hero-section{position:relative;min-height:100vh;display:flex;align-items:center;padding:140px 0 60px;overflow:hidden} .hero-layout{position:relative;z-index:2;display:grid;grid-template-columns:1.15fr .85fr;gap:60px;align-items:center;width:100%} .hero-content-box{max-width:100%} .hero-heading{font-family:var(--serif);font-weight:400;font-size:clamp(2.9rem,5.8vw,4.8rem);line-height:1.0;letter-spacing:-.01em} .hero-heading .brand-highlight{color:var(--lime);font-style:italic} .hero-lead{font-size:1.08rem;color:var(--mut);max-width:520px;margin:30px 0 40px;line-height:1.8} .hero-cta-group{display:flex;gap:14px;flex-wrap:wrap;align-items:center} .btn-primary{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.98rem;padding:16px 30px;border-radius:12px;text-decoration:none;position:relative;will-change:transform;background:var(--lime);color:var(--void);box-shadow:0 0 30px rgba(168,213,6,.3);overflow:hidden} .btn-primary::after{content:'';position:absolute;top:0;left:-80%;width:50%;height:100%;background:linear-gradient(100deg,transparent,rgba(255,255,255,.55),transparent);transform:skewX(-20deg);animation:shine 3.2s infinite} .btn-primary:hover{background:var(--lime2)} .btn-secondary{display:inline-flex;align-items:center;gap:10px;font-weight:600;font-size:.98rem;padding:16px 30px;border-radius:12px;text-decoration:none;position:relative;border:1px solid rgba(255,255,255,.18);color:var(--text)} .btn-secondary:hover{border-color:var(--lime);color:var(--lime);box-shadow:0 0 24px rgba(168,213,6,.12)} .trust-strip{display:flex;align-items:center;gap:14px;margin-top:54px;padding-top:30px;border-top:1px solid var(--line);flex-wrap:wrap} .trust-label{font-family:var(--mono);font-size:.64rem;letter-spacing:.16em;color:var(--dim);text-transform:uppercase} .trust-badges{display:flex;gap:10px;flex-wrap:wrap} .trust-badge{font-size:.72rem;font-weight:500;color:var(--mut);background:var(--panel);border:1px solid var(--line);padding:5px 14px;border-radius:999px;font-family:var(--mono)} .section-spacious{padding:110px 0;position:relative} .section-head-human{max-width:640px;margin-bottom:60px} .section-head-human h2{font-family:var(--serif);font-weight:400;font-size:clamp(2rem,3.8vw,3rem);line-height:1.08;letter-spacing:-.01em;margin-top:12px;margin-bottom:16px} .section-head-human h2 em{font-style:italic;color:var(--lime)} .section-head-human p{color:var(--mut);line-height:1.75;font-size:1rem} .telemetry-card-human{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:40px;max-width:960px;margin:0 auto} .vessel-tabs-human{display:flex;gap:10px;border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:26px;flex-wrap:wrap} .vessel-tab-btn{background:transparent;border:1px solid var(--line);border-radius:999px;padding:9px 20px;color:var(--mut);font-size:.84rem;font-weight:500;cursor:pointer;transition:all .18s var(--ease-spring)} .vessel-tab-btn:hover{border-color:var(--lime-dim);color:var(--text)} .vessel-tab-btn.active{background:rgba(168,213,6,.12);border-color:var(--lime-dim);color:var(--lime);font-weight:600} .telemetry-list{display:flex;flex-direction:column;gap:16px} .telemetry-item{display:flex;justify-content:space-between;align-items:center;font-size:.93rem;border-bottom:1px solid var(--line);padding-bottom:14px;gap:20px;flex-wrap:wrap} .telemetry-item .label{color:var(--dim);font-weight:500;font-size:.8rem;font-family:var(--mono);text-transform:uppercase;letter-spacing:.08em} .telemetry-item .value{color:var(--text);font-weight:600;text-align:right} .reveal-on-scroll{opacity:0;transform:translateY(28px);transition:opacity .8s var(--ease-spring),transform .8s var(--ease-spring)} .reveal-on-scroll.is-visible{opacity:1;transform:translateY(0)} /* forms (shipcrawler / contact) */ input,select,textarea{width:100%;background:var(--void);border:1px solid var(--line);border-radius:12px;padding:13px 16px;color:var(--text);font-size:.95rem;outline:none;font-family:var(--sans);transition:border-color .2s} input:focus,select:focus,textarea:focus{border-color:var(--lime-dim)} label{font-size:.85rem;font-weight:600;color:var(--text);display:block;margin-bottom:6px} /* ══════════════════════════════════════════════════════════════════════════ STUDIO 3-PILLAR SERVICE SHOWCASE (§ 01) ══════════════════════════════════════════════════════════════════════════ */ .studio-services-desktop{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .service-pillar-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:34px 28px;position:relative;overflow:hidden;transition:transform .3s var(--ease-spring),border-color .3s,box-shadow .3s;display:flex;flex-direction:column;justify-content:space-between} .service-pillar-card:hover{transform:translateY(-4px);border-color:var(--lime-dim);box-shadow:var(--shadow-hover)} .pillar-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px} .pillar-num{font-family:var(--serif);font-size:2.2rem;font-weight:400;color:var(--lime);line-height:1;opacity:.9} .pillar-badge{font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;color:var(--dim);border:1px solid var(--line);padding:3px 8px;border-radius:6px} .service-pillar-card h3{font-family:var(--serif);font-size:1.45rem;margin-bottom:12px;line-height:1.2} .service-pillar-card p{color:var(--mut);font-size:.88rem;line-height:1.75;margin-bottom:20px} .pillar-features{display:flex;flex-direction:column;gap:10px;margin-bottom:22px;border-top:1px solid var(--line);padding-top:16px} .pillar-feature{display:flex;align-items:center;gap:8px;font-size:.82rem;color:var(--text)} .pillar-feature i{color:var(--lime);font-style:normal;font-weight:bold} .pillar-action{margin-top:auto;display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;color:var(--lime);text-decoration:none;font-weight:600;transition:.2s} .pillar-action:hover{color:var(--lime2);transform:translateX(4px)} /* Mobile Interactive Segmented View */ .studio-services-mobile{display:none} @media(max-width:860px){ .studio-services-desktop{display:none} .studio-services-mobile{display:block} .service-segment-tabs{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;background:var(--panel2);padding:6px;border-radius:14px;border:1px solid var(--line);margin-bottom:16px} .service-segment-btn{background:transparent;border:none;padding:12px 6px;border-radius:10px;color:var(--mut);font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;transition:all .25s var(--ease-spring);display:flex;flex-direction:column;align-items:center;gap:3px;text-align:center} .service-segment-btn span.num{font-family:var(--serif);font-size:1.1rem;color:var(--dim);font-weight:600} .service-segment-btn.active{background:var(--panel);color:var(--text);border:1px solid var(--lime-dim);box-shadow:0 4px 14px rgba(0,0,0,.4)} .service-segment-btn.active span.num{color:var(--lime)} .mobile-service-box{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:26px 20px;box-shadow:var(--shadow-card);animation:fadeInPillar .3s ease forwards} @keyframes fadeInPillar{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:translateY(0)}} } /* ══════════════════════════════════════════════════════════════════════════ STUDIO TERMINAL & GAUGE METRICS (web-design.html) ══════════════════════════════════════════════════════════════════════════ */ .gauge-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:18px} .gauge-box{background:var(--void);border:1px solid var(--line);border-radius:12px;padding:14px 8px;text-align:center} .gauge-circle{width:50px;height:50px;margin:0 auto 6px;position:relative;display:flex;align-items:center;justify-content:center} .gauge-circle svg{width:100%;height:100%;transform:rotate(-90deg)} .gauge-circle svg circle{fill:none;stroke-width:4} .gauge-circle .bg{stroke:rgba(238,243,234,.10)} .gauge-circle .val{stroke:var(--lime);stroke-dasharray:138;stroke-dashoffset:0;stroke-linecap:round} .gauge-circle .score{position:absolute;font-family:var(--mono);font-size:.76rem;font-weight:600;color:var(--lime)} .gauge-label{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)} /* Comparative spec table */ .spec-table-wrap{border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel);margin-top:20px} .spec-table{width:100%;border-collapse:collapse;text-align:left} .spec-table th{background:var(--panel2);padding:16px 22px;font-family:var(--mono);font-size:.7rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);border-bottom:1px solid var(--line)} .spec-table th.highlight{color:var(--lime);background:rgba(168,213,6,.08)} .spec-table td{padding:16px 22px;border-bottom:1px solid var(--line);font-size:.88rem;color:var(--mut)} .spec-badge-bad{color:var(--alert-red);font-family:var(--mono);font-size:.78rem;font-weight:500} .spec-badge-good{color:var(--lime);font-family:var(--mono);font-size:.78rem;font-weight:600} /* Comparative section switcher */ .compare-desktop-table{display:block} .compare-mobile-cards{display:none} @media(max-width:860px){ .compare-desktop-table{display:none} .compare-mobile-cards{display:flex;flex-direction:column;gap:12px;margin-top:16px} .compare-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:18px 16px;box-shadow:var(--shadow-card);display:flex;flex-direction:column;gap:12px} .compare-card-head{display:flex;justify-content:space-between;align-items:center} .compare-card-title{font-family:var(--sans);font-weight:600;font-size:.95rem;color:var(--text)} .compare-card-num{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;color:var(--lime);background:rgba(168,213,6,.08);padding:2px 8px;border-radius:999px;border:1px solid var(--lime-dim)} .compare-row-bad{background:rgba(232,140,122,.06);border:1px solid rgba(232,140,122,.18);border-radius:10px;padding:11px 12px;display:flex;flex-direction:column;gap:4px} .compare-label-bad{font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;text-transform:uppercase;color:var(--alert-red);display:flex;align-items:center;gap:4px} .compare-val-bad{font-size:.82rem;color:var(--mut);line-height:1.45} .compare-row-good{background:rgba(168,213,6,.08);border:1px solid var(--lime-dim);border-radius:10px;padding:11px 12px;display:flex;flex-direction:column;gap:4px} .compare-val-good{font-size:.86rem;color:var(--text);font-weight:500;line-height:1.45} } /* ══════════════════════════════════════════════════════════════════════════ EXECUTIVE METRICS TELEMETRY BAR (.metrics) ══════════════════════════════════════════════════════════════════════════ */ .metrics{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--line);border-radius:20px;background:var(--panel);box-shadow:var(--shadow-card);overflow:hidden;margin-top:48px} .met{padding:34px 28px;position:relative;border-right:1px solid var(--line);display:flex;flex-direction:column;justify-content:space-between;transition:background .3s var(--ease-spring),transform .3s var(--ease-spring)} .met:last-child{border-right:none} .met:hover{background:var(--panel2);transform:translateY(-2px)} .met-tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.56rem;letter-spacing:.14em;text-transform:uppercase;color:var(--dim);margin-bottom:14px} .met-tag i{width:5px;height:5px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime);display:inline-block} .met .num{font-family:var(--serif);font-size:clamp(2.5rem,3.6vw,3.4rem);font-weight:400;color:var(--lime);line-height:1;margin-bottom:8px;letter-spacing:-.02em;transition:text-shadow .3s} .met:hover .num{text-shadow:0 0 20px var(--lime-dim)} .met .lbl{font-family:var(--sans);font-size:1.02rem;font-weight:600;color:var(--text);margin-bottom:6px;letter-spacing:-.01em} .met .desc{font-size:.82rem;color:var(--mut);line-height:1.6} .studio-commission-grid{display:grid;grid-template-columns:1.22fr .78fr;gap:0;border:1px solid var(--line);border-radius:20px;overflow:hidden;background:var(--panel);box-shadow:var(--shadow-card)} /* contact page: form + offices panel (responsive) */ .contact-panel{display:grid;grid-template-columns:1.2fr .8fr;gap:0;border:1px solid var(--line);border-radius:18px;overflow:hidden;background:var(--panel);box-shadow:var(--shadow-card)} .contact-form-side{padding:40px;border-right:1px solid var(--line)} .contact-offices-side{display:flex;flex-direction:column} .form-row-2{display:grid;grid-template-columns:1fr 1fr;gap:16px} /* dark-mode select dropdown options (native dropdown inherits OS colors otherwise) */ select option{background:var(--bg-elevated,#161f13);color:var(--text)} :root[data-theme="light"] select option{background:var(--panel2,#f0f3e9);color:var(--text)} select option:disabled{color:var(--dim)} select option:checked{color:var(--lime)} .neural-mesh{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:0;opacity:.3} .neural-mesh svg{width:100%;height:100%} .neural-mesh path{stroke:var(--lime);stroke-width:.5;fill:none;opacity:.07;stroke-linecap:round} .neural-mesh circle{fill:var(--lime);opacity:.18} /* mobile toggle button & drawer base */ .nav-right{display:flex;align-items:center;gap:10px} .mobile-toggle-btn{display:none;background:var(--panel2);border:1px solid var(--border-hover);border-radius:12px;width:44px;height:44px;cursor:pointer;padding:11px;flex-direction:column;justify-content:space-around;align-items:center;transition:border-color .2s,background .2s} .mobile-toggle-btn:hover{border-color:var(--lime-dim);background:var(--panel)} .mobile-toggle-btn span{display:block;width:20px;height:2px;background:var(--text);border-radius:2px;transition:transform .25s var(--ease-spring),opacity .25s} .mobile-toggle-btn.open span:nth-child(1){transform:translateY(6.5px) rotate(45deg)} .mobile-toggle-btn.open span:nth-child(2){opacity:0} .mobile-toggle-btn.open span:nth-child(3){transform:translateY(-6.5px) rotate(-45deg)} .mobile-drawer{display:none;position:fixed;top:66px;left:14px;right:14px;z-index:9999;background:var(--panel);border:1px solid var(--line);border-radius:16px;padding:12px;flex-direction:column;gap:2px;box-shadow:0 24px 60px rgba(0,0,0,.6);transform:translateY(-10px);opacity:0;pointer-events:none;transition:all .3s var(--ease-spring)} .mobile-drawer.open{transform:translateY(0);opacity:1;pointer-events:auto} .mobile-drawer a{display:flex;align-items:center;justify-content:space-between;padding:13px 16px;border-radius:10px;color:var(--mut);text-decoration:none;font-size:.95rem;font-weight:500;border-bottom:1px solid var(--line)} .mobile-drawer a:last-child{border-bottom:none} .mobile-drawer a:hover{color:var(--text);background:var(--panel2)} .mobile-drawer a.active{color:var(--lime)} .mobile-drawer .drawer-cta{margin-top:6px;background:var(--lime);color:var(--void);font-weight:600;justify-content:center} /* ══════════════════════════════════════════════════════════════════════════ MASTER RESPONSIVE & MOBILE READABILITY ENGINE ══════════════════════════════════════════════════════════════════════════ */ @media(max-width:1000px){ .studio-commission-grid{grid-template-columns:1fr} .studio-commission-grid > div:first-child{border-right:none !important;border-bottom:1px solid var(--line) !important} .contact-panel{grid-template-columns:1fr} .contact-form-side{border-right:none !important;border-bottom:1px solid var(--line) !important} .hero-inner,.hero-layout{grid-template-columns:1fr;gap:40px} .hero .radar{display:none} .bento{grid-template-columns:1fr} .tile{border-right:none !important;border-bottom:1px solid var(--line) !important} .tile.wide,.tile.med{grid-column:span 1} .tile:last-child{border-bottom:none !important} .metrics,.metrics-grid{grid-template-columns:1fr 1fr} .foot-grid,.footer-grid{grid-template-columns:1fr 1fr;gap:36px} .grid-3{grid-template-columns:1fr} .grid-3 .card-human{border-right:none;border-bottom:1px solid var(--line)} .grid-2{grid-template-columns:1fr} .grid-2 .card-human{border-right:none;border-bottom:1px solid var(--line)} .lifecycle-tabs{grid-template-columns:1fr} .nav-links{display:none} .nav-cta{display:none} .nav .wrap{height:60px} .logo .brand-logo-img{height:30px;max-width:180px;object-fit:contain} footer .logo .brand-logo-img{height:24px !important} .nav-right{display:flex;align-items:center;gap:8px;margin-left:auto} .mobile-toggle-btn{display:flex !important} .mobile-drawer{display:flex} .mobile-drawer.open ~ .theme-toggle-btn, body.drawer-open .theme-toggle-btn{opacity:0 !important;pointer-events:none !important;transform:translateY(10px) !important} .path-grid{grid-template-columns:repeat(2,1fr);row-gap:32px} .path-line{display:none !important} .axis{grid-template-columns:repeat(2,1fr);row-gap:10px} .ship-stations{grid-template-columns:repeat(2,1fr);gap:16px} .ship-rails,.ship-lanes,.ship-station::before{display:none !important} } @media(max-width:768px){ /* Container & root typography */ .wrap,.container{padding:0 16px} body{font-size:15px;line-height:1.72} h1{font-size:clamp(1.95rem,8.2vw,2.65rem) !important;line-height:1.16 !important;letter-spacing:-.015em;overflow-wrap:break-word;word-break:break-word} h2{font-size:clamp(1.5rem,6.2vw,2.05rem) !important;line-height:1.22 !important;overflow-wrap:break-word;word-break:break-word} h3{font-size:1.22rem !important;line-height:1.28 !important} /* Spacing */ .hero{padding:88px 0 36px !important;min-height:auto !important} .coord{font-size:.58rem;letter-spacing:.12em;gap:4px;margin-bottom:18px;flex-direction:column;align-items:flex-start} .coord-sep{display:none} .hero .sub{font-size:.95rem;line-height:1.7;margin:16px 0 24px;max-width:100%} .sec{padding:52px 0 !important} .sec-head{margin-bottom:26px} .sec-head .no{font-size:.56rem;margin-bottom:12px} .sec-head p{font-size:.92rem;line-height:1.7;margin-top:10px} /* Buttons & touch actions */ .cta-row{flex-direction:column;width:100%;gap:10px} .cta-row .btn,.btn{width:100%;justify-content:center;text-align:center;padding:14px 20px;font-size:.94rem} /* Boards & Inspector Terminals */ .board{padding:16px 14px !important;border-radius:14px !important} .board .bl{font-size:.58rem;margin-bottom:12px} .gauge-grid{grid-template-columns:repeat(2,1fr) !important;gap:8px !important;margin-bottom:14px !important} .gauge-box{padding:10px 4px !important;border-radius:10px !important} .gauge-circle{width:44px !important;height:44px !important;margin-bottom:4px !important} .gauge-circle .score{font-size:.72rem !important} .gauge-label{font-size:.52rem !important;letter-spacing:.08em !important} .board .rows{margin-bottom:12px !important} .board .row{flex-direction:row;justify-content:space-between;align-items:center;padding:8px 0;font-size:.76rem;gap:8px} .board .row .k{font-size:.6rem;letter-spacing:.08em} .board .row .v{font-size:.72rem} .board .tabs{display:grid !important;grid-template-columns:1fr !important;gap:6px !important;margin-top:10px !important} .board .tabs button{width:100% !important;text-align:center !important;padding:8px 10px !important;font-size:.7rem !important} /* Bento tiles */ .tile{padding:22px 16px !important} .tile .tref{font-size:.54rem;margin-bottom:10px} .tile h3{font-size:1.18rem !important;margin-bottom:8px} .tile p{font-size:.86rem;line-height:1.68} /* Form & Commission Console */ .studio-commission-grid > div:first-child{padding:22px 16px !important} .studio-commission-grid > div:last-child{padding:22px 16px !important} form div[style*="grid-template-columns"]{grid-template-columns:1fr !important;gap:14px !important} input,select,textarea{font-size:16px !important;padding:13px 14px !important} /* Spec Comparison Table Matrix */ .spec-table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border-radius:12px;margin-top:14px} .spec-table{min-width:520px} .spec-table th,.spec-table td{padding:11px 12px;font-size:.78rem} /* Floating Theme Toggle Widget (Unobtrusive bottom-right on mobile) */ .theme-toggle-btn{position:fixed !important;bottom:20px !important;right:14px !important;top:auto !important;transform:none !important;width:42px !important;height:42px !important;z-index:1200 !important;box-shadow:0 8px 24px rgba(0,0,0,.45) !important} .theme-toggle-btn:hover{transform:none !important} /* Footer: Responsive Layout */ .foot-grid,.footer-grid{display:grid !important;grid-template-columns:repeat(2,1fr) !important;gap:32px 20px !important} .foot-grid > div:first-child,.footer-grid > div:first-child{grid-column:1 / -1 !important} .foot-grid > div:last-child,.footer-grid > div:last-child{grid-column:1 / -1 !important;border-top:1px solid var(--line);padding-top:18px} .foot-bottom{flex-direction:column !important;gap:10px !important;text-align:center !important} } @media(max-width:500px){ .path-grid{grid-template-columns:1fr !important;gap:24px !important} .ship-stations{grid-template-columns:1fr !important;gap:20px !important} .metrics,.metrics-grid{grid-template-columns:1fr !important;gap:14px !important} h1{font-size:clamp(1.85rem,8vw,2.3rem) !important} } /* ══════════════════════════════════════════════════════════════════════════ VESSEL MAP (homepage board) · simplified continents, graticule, lanes ══════════════════════════════════════════════════════════════════════════ */ .route .mgrid line{stroke:rgba(238,243,234,.05);stroke-width:.6} .route .meq{stroke:rgba(168,213,6,.28);stroke-width:.8;stroke-dasharray:4 5} .route .mland path{fill:rgba(168,213,6,.05);stroke:rgba(168,213,6,.30);stroke-width:.9;stroke-linejoin:round} .route .mland path:hover{fill:rgba(168,213,6,.09);stroke:rgba(168,213,6,.5)} .route .port.small{r:2.5;fill:rgba(168,213,6,.6)} .route .glabel.small{font-size:6.5px;letter-spacing:.12em;fill:rgba(168,213,6,.55)} .route .rline{stroke-dasharray:5 4;animation:laneDash 1.6s linear infinite} @keyframes laneDash{to{stroke-dashoffset:-9}} /* ══════════════════════════════════════════════════════════════════════════ LIVE MAP (Leaflet + CARTO dark tiles) · brand-styled ══════════════════════════════════════════════════════════════════════════ */ .route#vmap{width:100%;height:300px;border-radius:14px;overflow:hidden;background:#0b0d0b;z-index:1} .route#vmap .leaflet-tile-pane{filter:saturate(.65) contrast(1.08) brightness(.92)} .route#vmap .leaflet-container{background:#0b0d0b;font-family:var(--sans)} .vport{background:transparent;border:none} .vport i{position:absolute;inset:0;border-radius:50%;background:var(--lime);box-shadow:0 0 0 3px rgba(168,213,6,.25),0 0 14px rgba(168,213,6,.8);animation:markPulse 3.5s infinite} .vport.hl i{background:#c4e832;box-shadow:0 0 0 4px rgba(168,213,6,.35),0 0 22px rgba(168,213,6,1)} .vport.s i{background:rgba(168,213,6,.6);box-shadow:0 0 8px rgba(168,213,6,.5);animation:none} .vship i{position:absolute;inset:0;border-radius:50%;background:#eef3ea;box-shadow:0 0 0 2px rgba(168,213,6,.5),0 0 16px var(--lime);animation:markPulse 2s infinite} .vptip{font-family:var(--mono);font-size:10px;letter-spacing:.12em;background:rgba(11,13,11,.92);border:1px solid var(--lime-dim);color:var(--text);border-radius:6px;padding:4px 8px;box-shadow:0 4px 18px rgba(0,0,0,.6)} .vptip::before{display:none} /* zoom controls (+ / -) · brand styled */ .route#vmap .leaflet-control-zoom{position:absolute;right:10px;bottom:10px;top:auto;left:auto;border:none;box-shadow:0 6px 20px rgba(0,0,0,.5)} .route#vmap .leaflet-control-zoom a{display:block;width:36px;height:36px;line-height:34px;text-align:center;background:rgba(11,13,11,.92);color:var(--lime);border:1px solid var(--lime-dim);font-size:20px;font-weight:600;font-family:var(--mono);transition:all .2s;cursor:pointer} .route#vmap .leaflet-control-zoom a:hover{background:var(--lime);color:var(--void)} .route#vmap .leaflet-control-zoom-in{border-radius:10px 10px 0 0;border-bottom:none} .route#vmap .leaflet-control-zoom-out{border-radius:0 0 10px 10px;border-top:none} .route#vmap .leaflet-control-zoom-in,.route#vmap .leaflet-control-zoom-out{text-decoration:none} /* country label overlay (covers underlying tile label) */ .vlabel{display:flex;align-items:center;justify-content:center;background:transparent;border:none;font-family:var(--sans);font-size:11px;font-weight:500;letter-spacing:.08em;color:#d8ddd6;white-space:nowrap;z-index:1000;text-shadow:0 0 3px rgba(0,0,0,.9),0 1px 2px rgba(0,0,0,.8);box-shadow:none;padding:0} /* ── Light Mode Google Maps Natural Styling ── */ :root[data-theme="light"] .route#vmap{background:#b8d6e5} :root[data-theme="light"] .route#vmap .leaflet-tile-pane{filter:saturate(1.15) contrast(1.04) brightness(1.02)} :root[data-theme="light"] .route#vmap .leaflet-container{background:#b8d6e5} :root[data-theme="light"] .board .route{background:#b8d6e5} :root[data-theme="light"] .vlabel{color:#1e293b;font-weight:600;text-shadow:0 0 3px #ffffff,0 0 6px #ffffff,0 1px 3px rgba(255,255,255,.95)} :root[data-theme="light"] .vptip{background:rgba(255,255,255,.95);border:1px solid rgba(107,141,0,.45);color:#0f172a;box-shadow:0 4px 16px rgba(0,0,0,.15)} :root[data-theme="light"] .route#vmap .leaflet-control-zoom{box-shadow:0 4px 16px rgba(0,0,0,.12)} :root[data-theme="light"] .route#vmap .leaflet-control-zoom a{background:rgba(255,255,255,.95);color:#4d7c0f;border:1px solid rgba(107,141,0,.35)} :root[data-theme="light"] .route#vmap .leaflet-control-zoom a:hover{background:#65a30d;color:#ffffff} :root[data-theme="light"] .vport i{background:#3b6f00;box-shadow:0 0 0 3px rgba(59,111,0,.25),0 0 12px rgba(59,111,0,.6)} :root[data-theme="light"] .vship i{background:#000000;box-shadow:0 0 0 2.5px #ffffff,0 0 0 4.5px #3b6f00,0 0 14px rgba(0,0,0,.7);animation:markPulse 2s infinite} /* ══════════════════════════════════════════════════════════════════════════ THE ATTACK PATH (index §01) · one line, six closed points ══════════════════════════════════════════════════════════════════════════ */ .path{position:relative;padding:0 10px} .path-line{position:absolute;top:34px;left:60px;right:60px;height:2px;background:transparent;z-index:0} .path-line svg{width:100%;height:100%;overflow:visible} .path-line path{stroke:var(--lime);stroke-width:1.5;stroke-dasharray:6 6;fill:none;opacity:.5;animation:dash 2.4s linear infinite} @keyframes dash{to{stroke-dashoffset:-24}} .path-line .traveler{fill:var(--lime);animation:travel 14s linear infinite} @keyframes travel{0%{offset-distance:0%}100%{offset-distance:100%}} .path-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:0} .step{position:relative;padding:0 18px;text-align:center;z-index:1} .step .dot{width:26px;height:26px;margin:0 auto 22px;border-radius:50%;background:var(--void);border:2px solid var(--lime);display:flex;align-items:center;justify-content:center;position:relative;box-shadow:0 0 0 4px var(--void),0 0 0 5px rgba(168,213,6,.25)} .step .dot::after{content:'';position:absolute;inset:-8px;border-radius:50%;border:1px solid rgba(168,213,6,.15)} .step .dot span{font-family:var(--mono);font-size:.6rem;color:var(--lime)} .step:nth-child(6) .dot{background:var(--lime)} .step:nth-child(6) .dot span{color:var(--void)} .step .t{font-family:var(--mono);font-size:.58rem;letter-spacing:.18em;color:var(--lime);text-transform:uppercase;margin-bottom:10px} .step h3{font-family:var(--serif);font-weight:500;font-size:1.15rem;line-height:1.2;margin-bottom:8px} .step p{font-size:.78rem;color:var(--mut);line-height:1.65} .step .tag{display:inline-block;margin-top:12px;font-family:var(--mono);font-size:.56rem;letter-spacing:.1em;color:var(--dim);border:1px solid var(--line);border-radius:999px;padding:4px 10px} .axis{display:grid;grid-template-columns:repeat(6,1fr);margin:44px 0 0;gap:0} .axis .a{font-family:var(--mono);font-size:.6rem;letter-spacing:.16em;color:var(--dim);text-align:center;text-transform:uppercase} .axis .a em{font-style:normal;color:var(--lime)} @media(max-width:1000px){.path-grid{grid-template-columns:repeat(2,1fr);row-gap:40px}.path-line{display:none}.axis{grid-template-columns:repeat(2,1fr);row-gap:10px}} /* ═══════════════════════════════════════════════════════════════ SHIPCRAWLER DUAL PATH (Concept A+) · attacker rail vs defense rail ═══════════════════════════════════════════════════════════════ */ /* ── DUAL ATTACK PATH ── */ .ship-path{position:relative} /* the two rails */ .ship-rails{position:absolute;top:64px;left:40px;right:40px;height:120px;z-index:0} .ship-rails svg{width:100%;height:100%;overflow:visible} .ship-rail-attack{fill:none;stroke:rgba(201,106,90,.55);stroke-width:1.5;stroke-dasharray:7 7;animation:flow 3.2s linear infinite} .ship-rail-defend{fill:none;stroke:var(--lime);stroke-width:2;stroke-dasharray:10 6;opacity:.85;animation:flow 2s linear infinite} .ship-rail-defend-glow{fill:none;stroke:var(--lime);stroke-width:5;opacity:.12} @keyframes flow{to{stroke-dashoffset:-28}} /* vessel riding the defense rail */ .ship-vessel{fill:var(--lime);animation:voyage 16s linear infinite} .ship-vessel text{font-family:var(--mono);font-size:8px;fill:var(--lime);letter-spacing:.08em} @keyframes voyage{0%{offset-distance:0%}100%{offset-distance:100%}} /* stations grid */ .ship-stations{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:12px;position:relative;z-index:1} .ship-station{position:relative;text-align:center;padding-top:6px;min-width:0} /* the crossing where attack & defense meet */ .ship-station::before{content:'';position:absolute;top:64px;left:50%;transform:translateX(-50%);width:1px;height:120px;background:linear-gradient(180deg,rgba(201,106,90,.45),var(--lime));z-index:2;opacity:.5} .ship-station .num{font-family:var(--serif);font-size:2.6rem;line-height:1;color:var(--dim);transition:color .3s;position:relative;z-index:3} .ship-station:hover .num{color:var(--lime)} /* vulnerability chip (attack side) */ .ship-station .hole{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.5rem;letter-spacing:.12em;color:rgba(201,106,90,.85);text-transform:uppercase;background:rgba(201,106,90,.07);border:1px solid rgba(201,106,90,.25);border-radius:999px;padding:4px 9px;margin-top:8px;max-width:92%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:24px} .ship-station .hole::before{content:'✕';font-size:.55rem} /* the close mark (defense side) */ .ship-station .close{display:inline-flex;align-items:center;gap:5px;font-family:var(--mono);font-size:.52rem;letter-spacing:.14em;color:var(--lime);text-transform:uppercase;background:rgba(168,213,6,.08);border:1px solid rgba(168,213,6,.3);border-radius:999px;padding:4px 10px;margin-top:6px;max-width:92%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;height:24px} .ship-station .close::before{content:'✓';font-size:.6rem;font-weight:700} .ship-station .title{font-family:var(--serif);font-weight:500;font-size:1.02rem;margin-top:12px;line-height:1.2;min-height:2.5em} .ship-station .title em{font-style:italic;color:var(--lime)} /* divider labels */ .ship-lanes{display:grid;grid-template-columns:repeat(6,1fr);gap:12px;margin-top:22px;position:relative;z-index:1} .ship-lanes .lane{font-family:var(--mono);font-size:.56rem;letter-spacing:.16em;text-transform:uppercase;text-align:center} .ship-lanes .lane.attack{color:rgba(201,106,90,.7)} .ship-lanes .lane.defend{color:var(--lime)} /* detail popover on hover */ .ship-station .detail{position:absolute;top:calc(100% + 8px);left:50%;transform:translateX(-50%) translateY(6px);width:230px;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:16px;text-align:left;opacity:0;pointer-events:none;transition:all .3s;z-index:20;box-shadow:0 20px 50px rgba(0,0,0,.6)} .ship-station:hover .detail{opacity:1;transform:translateX(-50%) translateY(0)} .ship-station .detail h4{font-family:var(--serif);font-weight:500;font-size:1rem;margin-bottom:6px} .ship-station .detail p{font-size:.74rem;color:var(--mut);line-height:1.6} .ship-station .detail .d-tag{display:inline-block;font-family:var(--mono);font-size:.5rem;letter-spacing:.1em;color:var(--lime);margin-top:8px;text-transform:uppercase} .ship-station:nth-last-child(-n+3) .detail{top:auto;bottom:calc(100% + 8px);transform:translateX(-50%) translateY(-6px)} .ship-station:nth-last-child(-n+3):hover .detail{transform:translateX(-50%) translateY(0)} .foot{text-align:center;padding:60px 0 10px;color:var(--dim);font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase} .foot b{color:var(--lime);font-weight:500} /* ══════════════════════════════════════════════════════════════════════════ MOBILE POLISH · consistent, comfortable small screens (added last so it wins over earlier rules) ══════════════════════════════════════════════════════════════════════════ */ @media(max-width:640px){ /* contact panel: single column, tighter padding */ .contact-form-side{padding:24px 20px !important} .contact-form-side .form-row-2, .form-row-2{grid-template-columns:1fr !important;gap:12px !important} .contact-offices-side .office-block{padding:24px 20px !important} .contact-panel{border-radius:14px !important} /* fluid type tuned for phones */ h1{font-size:clamp(1.9rem,8vw,2.6rem);line-height:1.08} .sec-head h2{font-size:clamp(1.6rem,6.5vw,2rem)} .sec-head p{font-size:.95rem;line-height:1.75} .tile h3{font-size:1.25rem} .tile p{font-size:.92rem;line-height:1.7} .tile .chip{font-size:.66rem} .cta h3{font-size:1.8rem} .cta p{font-size:.95rem} .cta .btn.primary{font-size:1rem;padding:16px 30px} .hero .sub{font-size:1rem;line-height:1.75;margin:20px 0 26px} /* tighten vertical rhythm · the big desktop gaps die here */ .sec{padding:56px 0} .sec-head{margin-bottom:36px} .hero{padding:100px 0 32px;min-height:auto} /* single-column grids instead of cramped 2-up */ .metrics,.metrics-grid{grid-template-columns:1fr} .metrics{margin-top:0;border-radius:14px;gap:0} .met{padding:18px 4px;border-bottom:1px solid var(--line)} .met:last-child{border-bottom:none} .met .num{font-size:2.2rem} .foot-grid,.footer-grid{grid-template-columns:1fr;gap:28px} .foot-grid > div{border-bottom:1px solid var(--line);padding-bottom:22px} .foot-grid > div:last-child{border-bottom:none;padding-bottom:0} .cta{flex-direction:column;align-items:flex-start;gap:24px;padding:40px 26px;margin:0 20px 70px} .board{padding:20px;border-radius:16px} .board .route{height:230px;aspect-ratio:auto} .board .row{flex-direction:column;align-items:flex-start;gap:4px;padding:12px 2px} .board .row .k{font-size:.7rem} .board .row .v{font-size:.9rem;text-align:left} .board .tabs button{font-size:.8rem;padding:9px 16px;flex:1;text-align:center} .coord{font-size:.62rem;gap:8px;margin-bottom:20px} /* comfortable touch targets */ .btn{padding:15px 26px;font-size:.95rem} .nav-cta{display:none} /* path grid: 2 columns with breathing room */ .path-grid{grid-template-columns:repeat(2,1fr);row-gap:36px} .step{padding:0 8px} .step h3{font-size:1.05rem} .step p{font-size:.8rem} .step .tag{font-size:.6rem} /* attack-path dual rails: hide decorative rails, keep stations clean */ .ship-rails{display:none} .ship-station::before{display:none} .ship-stations{grid-template-columns:repeat(2,1fr);row-gap:44px} .ship-lanes{display:none} .ship-station .detail{display:none} .ship-station .num{font-size:2.2rem} /* ticker */ .ticker span{font-size:.66rem} /* footer */ footer .brand-logo-img{height:30px !important} /* fixed theme toggle stays out of the way */ .theme-toggle-btn{right:12px;top:auto;bottom:16px;transform:none;width:42px;height:42px} .theme-toggle-btn:hover{transform:scale(1.08)} } /* ══════════════════════════════════════════════════════════════════════════ SMALL PHONES (<=480px) · single-column everything, no cramped halves ══════════════════════════════════════════════════════════════════════════ */ @media(max-width:480px){ /* attack path stations: one column, generous spacing */ .path-grid{grid-template-columns:1fr;row-gap:30px} .path-line{display:none} .axis{grid-template-columns:1fr;row-gap:6px;margin-top:30px} /* shipcrawler dual rails: single column stations */ .ship-stations{grid-template-columns:1fr;row-gap:40px} /* hero title: keep tight but readable */ h1{font-size:clamp(2rem,9vw,2.6rem)} /* metrics: stacked with breathing room */ .metrics{margin-top:44px;border-radius:16px} .met{padding:20px 4px} /* CTA button full width */ .cta .btn.primary{width:100%;justify-content:center} /* nav: tighter wrap for tiny screens */ .wrap{padding:0 20px} .logo .brand-logo-img{height:26px} /* footer single column already; ensure links breathe */ .foot-grid{gap:24px} /* board: full-bleed feel */ .board{padding:18px;border-radius:14px} .board .route{height:200px} .board .tabs{flex-wrap:nowrap;overflow-x:auto;gap:6px} .board .tabs button{white-space:nowrap} /* ticker smaller caps */ .ticker span{font-size:.6rem;letter-spacing:.14em} } /* ══════════════════════════════════════════════════════════════════════════ QUARTERMASTER PATTERNS · EVIDENCE-FIRST, THREAT FEED, 3-COL CARDS ══════════════════════════════════════════════════════════════════════════ */ .hero-evidence{min-height:calc(100vh - 72px);display:flex;align-items:center;padding:120px 0 60px;position:relative} .hero-evidence-grid{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center;width:100%} @media(max-width:960px){.hero-evidence-grid{grid-template-columns:1fr;gap:36px}} .evidence-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:32px 28px;position:relative;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.55)} .evidence-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:linear-gradient(90deg,transparent,var(--lime),transparent)} .evidence-header{display:flex;justify-content:space-between;align-items:center;border-bottom:1px solid var(--line);padding-bottom:14px;margin-bottom:22px;flex-wrap:wrap;gap:8px} .evidence-tag{font-family:var(--mono);font-size:.62rem;letter-spacing:.16em;text-transform:uppercase;color:var(--lime);display:inline-flex;align-items:center;gap:6px} .evidence-tag i{width:6px;height:6px;border-radius:50%;background:var(--lime);box-shadow:0 0 8px var(--lime)} .evidence-title{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)} .evidence-bars{display:flex;flex-direction:column;gap:18px;margin-bottom:24px} .evidence-bar-row{display:flex;flex-direction:column;gap:8px} .evidence-bar-meta{display:flex;justify-content:space-between;align-items:baseline;font-size:.84rem} .evidence-bar-pct{font-family:var(--mono);font-size:1.05rem;font-weight:600;color:var(--lime)} .evidence-bar-label{color:var(--mut);font-size:.84rem} .evidence-bar-track{width:100%;height:10px;background:rgba(238,243,234,.06);border-radius:999px;overflow:hidden;position:relative} .evidence-bar-fill{height:100%;background:linear-gradient(90deg,var(--lime),var(--lime2));border-radius:999px;position:relative} .evidence-footer{border-top:1px solid var(--line);padding-top:20px;display:flex;flex-direction:column;gap:14px} .evidence-note{font-size:.9rem;color:var(--text);line-height:1.6} /* 3-Column What It Is Cards */ .qm-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} @media(max-width:860px){.qm-grid-3{grid-template-columns:1fr;gap:14px}} .qm-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;padding:32px 26px;position:relative;display:flex;flex-direction:column;justify-content:space-between;transition:border-color .25s,box-shadow .25s} .qm-card:hover{border-color:var(--lime-dim);box-shadow:0 0 24px rgba(168,213,6,.12)} .qm-card-icon{width:42px;height:42px;border-radius:12px;background:rgba(168,213,6,.08);border:1px solid var(--lime-dim);display:flex;align-items:center;justify-content:center;color:var(--lime);margin-bottom:20px} .qm-card h3{font-family:var(--serif);font-weight:500;font-size:1.35rem;margin-bottom:10px;line-height:1.2} .qm-card p{color:var(--mut);font-size:.88rem;line-height:1.7;margin-bottom:18px} .qm-chip{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.6rem;letter-spacing:.1em;text-transform:uppercase;color:var(--lime);border:1px solid var(--lime-dim);padding:4px 10px;border-radius:999px;background:rgba(168,213,6,.06);margin-top:auto} /* Live Threat Feed */ .threat-feed-card{background:var(--panel);border:1px solid var(--line);border-radius:18px;overflow:hidden;box-shadow:0 24px 60px rgba(0,0,0,.55)} .threat-feed-header{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--line);background:var(--panel2)} .threat-feed-title{font-family:var(--mono);font-size:.66rem;letter-spacing:.16em;text-transform:uppercase;color:var(--text);display:flex;align-items:center;gap:8px} .threat-feed-title i{width:7px;height:7px;border-radius:50%;background:var(--lime);box-shadow:0 0 10px var(--lime);animation:feedPulse 2s infinite} @keyframes feedPulse{0%,100%{opacity:1}50%{opacity:.3}} .threat-feed-live{font-family:var(--mono);font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--lime);background:rgba(168,213,6,.1);padding:3px 9px;border-radius:999px;border:1px solid var(--lime-dim)} .threat-feed-scroll{max-height:360px;overflow:hidden;position:relative} .threat-feed-track{display:flex;flex-direction:column;animation:threatScroll 28s linear infinite} .threat-feed-card:hover .threat-feed-track{animation-play-state:paused} @keyframes threatScroll{0%{transform:translateY(0)}100%{transform:translateY(-50%)}} .threat-item{display:flex;align-items:center;justify-content:space-between;padding:14px 24px;border-bottom:1px solid var(--line);gap:14px;transition:background .2s} .threat-item:hover{background:var(--panel2)} .threat-meta{display:flex;flex-direction:column;gap:3px;min-width:0} .threat-time-id{font-family:var(--mono);font-size:.64rem;letter-spacing:.08em;color:var(--dim);display:flex;align-items:center;gap:8px} .threat-time-id b{color:var(--text);font-weight:500} .threat-desc{font-size:.84rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .badge-severity{font-family:var(--mono);font-size:.58rem;letter-spacing:.12em;text-transform:uppercase;padding:3px 8px;border-radius:6px;font-weight:600;flex-shrink:0} .badge-red{background:rgba(232,140,122,.12);color:var(--alert-red);border:1px solid rgba(232,140,122,.3)} .badge-amber{background:rgba(235,180,50,.12);color:#ebb432;border:1px solid rgba(235,180,50,.3)} .badge-lime{background:rgba(168,213,6,.12);color:var(--lime);border:1px solid var(--lime-dim)} .threat-feed-cta{padding:16px 24px;border-top:1px solid var(--line);background:var(--panel2);display:flex;justify-content:space-between;align-items:center} .threat-feed-cta a{color:var(--lime);font-family:var(--mono);font-size:.74rem;letter-spacing:.08em;text-decoration:none;font-weight:600;display:inline-flex;align-items:center;gap:6px;transition:gap .2s} .threat-feed-cta a:hover{gap:10px;color:var(--lime2)} /* Article Stat Bar for Blog Posts */ .article-stat-bar{display:flex;align-items:center;gap:16px;flex-wrap:wrap;padding:16px 20px;background:var(--panel);border:1px solid var(--line);border-radius:14px;margin-bottom:36px;font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--mut)} .article-stat-bar strong{color:var(--lime);font-weight:600} .article-stat-bar .stat-sep{color:var(--line)} /* Bento hover: glow without transform/scale */ .bento .tile{transform:none !important;transition:border-color .25s,box-shadow .25s,background .25s} .bento .tile:hover{transform:none !important;border-color:var(--lime-dim);box-shadow:0 0 24px rgba(168,213,6,.12);background:var(--panel2)} /* ============ HARIS PROTECTION ARCHITECTURE ============ */ .sec-arch{position:relative;border-top:1px solid var(--line);background:var(--void);padding:100px 0 80px;overflow:hidden} .wrap-arch{width:100%;max-width:100%;margin:0 auto;padding:0 clamp(24px, 8vw, 150px);position:relative;z-index:2} /* Ambient framework decor without ghost outline boxes */ .hpa-bg-decor{position:absolute;inset:0;pointer-events:none;z-index:0;overflow:hidden; background:radial-gradient(ellipse 65% 55% at 50% 46%,rgba(168,213,6,.08) 0%,rgba(168,213,6,.02) 48%,transparent 72%), radial-gradient(circle 320px at 15% 25%,rgba(168,213,6,.03) 0%,transparent 70%), radial-gradient(circle 320px at 85% 25%,rgba(168,213,6,.03) 0%,transparent 70%)} .hpa-glow{position:absolute;left:50%;top:46%;transform:translate(-50%,-50%);width:780px;height:580px; background:radial-gradient(ellipse at center,rgba(168,213,6,.13) 0%,rgba(168,213,6,.03) 50%,transparent 72%);pointer-events:none} /* Header */ .hpa-head{text-align:center;max-width:780px;margin:0 auto 44px;position:relative;z-index:2} .hpa-eyebrow{font-family:var(--mono);font-size:.72rem;letter-spacing:.22em;color:var(--lime);text-transform:uppercase;font-weight:500;margin-bottom:14px} .hpa-title{font-family:var(--serif);font-size:clamp(2.3rem,4.4vw,3.8rem);font-weight:400;line-height:1.1;letter-spacing:-.02em;color:var(--text);margin-bottom:14px} .hpa-title em{font-style:italic;color:#a4e007;text-shadow:0 0 18px rgba(164,224,7,.45),0 0 38px rgba(168,213,6,.22)} .hpa-subtitle{font-family:var(--sans);font-size:1.02rem;color:var(--mut);line-height:1.65;max-width:620px;margin:0 auto} /* 3-column landscape stage */ .hpa-stage{display:grid;grid-template-columns:1fr minmax(360px,420px) 1fr;gap:26px;align-items:center;position:relative;z-index:2} .hpa-col{display:flex;flex-direction:column;gap:22px;position:relative} .hpa-col-center{align-items:center;justify-content:center} /* Cards */ .hpa-card{background:linear-gradient(155deg,rgba(17,26,16,.75) 0%,rgba(9,14,8,.9) 100%); border:1px solid var(--line);border-radius:20px;padding:24px 26px; display:flex;align-items:center;justify-content:space-between;gap:16px;position:relative; box-shadow:0 24px 48px -18px rgba(0,0,0,.75),inset 0 1px 0 rgba(168,213,6,.07); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); transition:border-color .25s ease,box-shadow .25s ease,transform .25s ease} .hpa-card-l1,.hpa-card-l3{border-right-color:rgba(168,213,6,.32)} .hpa-card-l2,.hpa-card-l4{border-left-color:rgba(168,213,6,.32)} .hpa-card:hover{border-color:rgba(168,213,6,.45);box-shadow:0 28px 56px -16px rgba(0,0,0,.85),0 0 24px rgba(168,213,6,.12),inset 0 1px 0 rgba(168,213,6,.15);transform:translateY(-2px)} .hpa-card-body{flex:1 1 54%;min-width:0;z-index:2} .hpa-card-layer{font-family:var(--mono);font-size:.62rem;letter-spacing:.2em;color:var(--lime);text-transform:uppercase;font-weight:500;display:block;margin-bottom:8px} .hpa-card-title{font-family:var(--serif);font-size:1.48rem;font-weight:500;color:var(--text);line-height:1.2;letter-spacing:-.01em;margin-bottom:10px;white-space:nowrap} .hpa-card-desc{font-family:var(--sans);font-size:.82rem;color:var(--mut);line-height:1.62;margin-bottom:14px} .hpa-card-meta{display:flex;align-items:center;gap:8px;flex-wrap:wrap} .hpa-meta-tag{font-family:var(--mono);font-size:.65rem;letter-spacing:.14em;color:var(--lime);text-transform:uppercase;font-weight:500} .hpa-card-action{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:.64rem;letter-spacing:.14em; color:var(--lime);text-decoration:none;font-weight:600;margin-top:12px;padding-bottom:2px; border-bottom:1px solid rgba(168,213,6,.35);transition:gap .2s ease,border-color .2s ease,color .2s ease} .hpa-card-action:hover{gap:10px;border-bottom-color:var(--lime);color:var(--lime2)} .hpa-card-art{flex:0 0 190px;width:190px;height:190px;display:flex;align-items:center;justify-content:center;position:relative;z-index:2} .hpa-card-art svg{width:100%;height:100%;display:block;overflow:visible} /* Central Stack */ .hpa-stack-wrapper{width:100%;max-width:430px;position:relative;display:flex;align-items:center;justify-content:center} .hpa-stack-wrapper svg{width:100%;height:auto;max-height:560px;overflow:visible;display:block} /* Bottom Dock */ .hpa-dock{margin-top:34px;background:rgba(17,23,15,.88);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px); border:1px solid var(--line);border-radius:20px;padding:24px 28px;display:grid;grid-template-columns:repeat(4,1fr); gap:16px;position:relative;z-index:2;box-shadow:0 14px 40px rgba(0,0,0,.45)} .hpa-dock-col{display:flex;align-items:flex-start;gap:16px;padding:0 16px;border-right:1px solid var(--line)} .hpa-dock-col:last-child{border-right:none} .hpa-dock-icon{width:36px;height:36px;flex-shrink:0;color:var(--lime);display:flex;align-items:center;justify-content:center;margin-top:2px} .hpa-dock-icon svg{width:100%;height:100%;stroke:var(--lime);fill:none} .hpa-dock-text{display:flex;flex-direction:column;gap:3px} .hpa-dock-title{font-family:var(--sans);font-size:.95rem;font-weight:600;color:var(--text);letter-spacing:-.01em} .hpa-dock-desc{font-size:.78rem;color:var(--mut);line-height:1.45} /* Responsive */ @media(max-width:1240px){ .wrap-arch{padding:0 24px} .hpa-stage{grid-template-columns:1fr minmax(300px,340px) 1fr;gap:16px} .hpa-card{padding:20px;gap:12px} .hpa-card-art{flex:0 0 145px;width:145px;height:145px} .hpa-card-title{font-size:1.32rem;white-space:normal} .hpa-dock{padding:20px 22px} .hpa-dock-col{padding:0 12px;gap:12px} } @media(max-width:960px){ .sec-arch{padding:75px 0 55px} .hpa-stage{display:flex;flex-direction:column;gap:18px} .hpa-col-left,.hpa-col-right{display:contents} .hpa-col-center{order:3;width:100%;max-width:380px;margin:16px auto} .hpa-traces{display:none} .hpa-card-l1{order:1} .hpa-card-l2{order:2} .hpa-card-l3{order:4} .hpa-card-l4{order:5} .hpa-dock{order:6;grid-template-columns:1fr 1fr;padding:18px;margin-top:24px} .hpa-card{padding:20px} .hpa-card-art{flex:0 0 160px;width:160px;height:160px} } @media(max-width:540px){ .wrap-arch{padding:0 16px} .hpa-card{flex-direction:column-reverse;align-items:flex-start;gap:14px} .hpa-card-art{width:160px;height:160px;margin:0 auto;align-self:center} .hpa-dock{grid-template-columns:1fr;gap:16px;padding:18px} .hpa-dock-col{border-right:none;border-bottom:1px solid var(--line);padding:0 0 14px 0} .hpa-dock-col:last-child{border-bottom:none;padding-bottom:0} } /* ========================================================================== HARIS PRODUCT PAGE ELEVATED TACTICAL DESIGN SYSTEM ========================================================================== */ /* --- Hero Haris 1U Rack Hardware Unit --- */ .haris-hero-card{ background:linear-gradient(155deg,rgba(17,26,16,.85) 0%,rgba(8,13,8,.94) 100%); border:1px solid rgba(168,213,6,.35); border-radius:20px; padding:24px; position:relative; box-shadow:0 24px 60px -15px rgba(0,0,0,.8),0 0 30px rgba(168,213,6,.1); overflow:hidden; transition:border-color .3s ease,box-shadow .3s ease,transform .3s ease; } .haris-hero-card:hover{ border-color:rgba(168,213,6,.55); box-shadow:0 30px 70px -15px rgba(0,0,0,.9),0 0 45px rgba(168,213,6,.2),inset 0 1px 0 rgba(168,213,6,.25); transform:translateY(-2px); } .haris-card-topbar{ display:flex;align-items:center;justify-content:space-between; margin-bottom:16px;padding-bottom:12px; border-bottom:1px solid rgba(168,213,6,.15); } .haris-unit-tag{ display:inline-flex;align-items:center;gap:8px; font-family:var(--mono);font-size:.65rem;letter-spacing:.16em; color:var(--lime);text-transform:uppercase;font-weight:600; } .haris-unit-tag i{ width:7px;height:7px;border-radius:50%;background:var(--lime); box-shadow:0 0 8px var(--lime);animation:pulse-led 2s infinite; } @keyframes pulse-led{ 0%,100%{opacity:1;transform:scale(1)} 50%{opacity:.45;transform:scale(.85)} } .haris-unit-status{ font-family:var(--mono);font-size:.62rem;letter-spacing:.12em; color:var(--mut);text-transform:uppercase; } .haris-chassis-svg{ width:100%;height:auto;display:block;margin:6px 0 18px;overflow:visible; } .haris-telemetry-hud{ background:rgba(5,9,5,.8); border:1px solid rgba(168,213,6,.2); border-radius:12px; padding:14px 16px; display:grid;grid-template-columns:repeat(3,1fr); gap:12px; margin-bottom:18px; } .haris-hud-item{display:flex;flex-direction:column;gap:3px} .haris-hud-lbl{ font-family:var(--mono);font-size:.58rem;letter-spacing:.14em; color:var(--mut);text-transform:uppercase; } .haris-hud-val{ font-family:var(--mono);font-size:.82rem;font-weight:700; color:#eef3ea;letter-spacing:.04em;display:flex;align-items:center;gap:5px; } .haris-hud-val em{font-style:normal;color:var(--lime);font-size:.7rem} .haris-hero-footer{ display:flex;align-items:center;justify-content:space-between; gap:16px;padding-top:14px;border-top:1px solid rgba(168,213,6,.15); } .haris-hero-footer .btn{ white-space:nowrap; flex-shrink:0; } .haris-hero-note{ font-size:.78rem;color:var(--mut);line-height:1.45;max-width:280px; } section[id], .sec[id]{ scroll-margin-top:90px; } /* --- 3-Stage Telemetry Pipeline Section --- */ .haris-pipe-wrap{position:relative;margin-top:10px} .haris-pipe-conduit{ position:absolute;top:130px;left:5%;right:5%;height:2px; background:linear-gradient(90deg,transparent,rgba(168,213,6,.3) 20%,rgba(168,213,6,.6) 50%,rgba(168,213,6,.3) 80%,transparent); z-index:1;pointer-events:none; } .haris-pipe-grid{ display:grid;grid-template-columns:repeat(3,1fr);gap:24px; position:relative;z-index:2; } .haris-pipe-card{ background:linear-gradient(155deg,rgba(17,26,16,.75) 0%,rgba(9,14,8,.92) 100%); border:1px solid var(--line); border-radius:18px; padding:24px 22px; display:flex;flex-direction:column;justify-content:space-between; position:relative;overflow:hidden; transition:border-color .3s,box-shadow .3s,transform .3s; } .haris-pipe-card:hover{ border-color:rgba(168,213,6,.45); box-shadow:0 24px 50px -12px rgba(0,0,0,.85),0 0 28px rgba(168,213,6,.14),inset 0 1px 0 rgba(168,213,6,.15); transform:translateY(-3px); } .haris-pipe-top{ display:flex;align-items:center;justify-content:space-between; margin-bottom:14px; } .haris-stage-badge{ font-family:var(--mono);font-size:.62rem;letter-spacing:.18em; color:var(--lime);text-transform:uppercase;font-weight:600; background:rgba(168,213,6,.1);border:1px solid rgba(168,213,6,.3); padding:3px 8px;border-radius:4px; } .haris-pipe-icon-node{ width:28px;height:28px;border-radius:50%; background:#091208;border:1px solid rgba(168,213,6,.4); display:flex;align-items:center;justify-content:center;color:var(--lime); } .haris-pipe-art{ width:100%;height:160px;margin:8px 0 18px; display:flex;align-items:center;justify-content:center; position:relative; } .haris-pipe-art svg{width:100%;height:100%;display:block;overflow:visible} .haris-pipe-body h3{ font-family:var(--serif);font-size:1.42rem;font-weight:500; color:var(--text);line-height:1.25;margin-bottom:10px; } .haris-pipe-body p{ font-family:var(--sans);font-size:.84rem;color:var(--mut); line-height:1.6;margin-bottom:18px; } .haris-pipe-footer{ padding-top:14px;border-top:1px solid rgba(168,213,6,.12); display:flex;align-items:center;justify-content:space-between; } .haris-pipe-chip{ font-family:var(--mono);font-size:.64rem;letter-spacing:.12em; color:var(--lime);text-transform:uppercase;font-weight:500; } /* --- Elevated Metrics Styling --- */ .metrics .met{ position:relative;overflow:hidden; border:1px solid var(--line); background:linear-gradient(155deg,rgba(17,26,16,.65) 0%,rgba(8,12,7,.85) 100%); border-radius:14px;padding:26px 22px; transition:border-color .3s,box-shadow .3s,transform .3s; } .metrics .met:hover{ border-color:rgba(168,213,6,.4); box-shadow:0 18px 40px -10px rgba(0,0,0,.7),0 0 20px rgba(168,213,6,.1); transform:translateY(-2px); } .met-corner{ position:absolute;width:6px;height:6px;border-color:var(--lime);pointer-events:none; } .met-corner-tl{top:6px;left:6px;border-top:1.5px solid;border-left:1.5px solid} .met-corner-tr{top:6px;right:6px;border-top:1.5px solid;border-right:1.5px solid} .met-corner-bl{bottom:6px;left:6px;border-bottom:1.5px solid;border-left:1.5px solid} .met-corner-br{bottom:6px;right:6px;border-bottom:1.5px solid;border-right:1.5px solid} /* --- Crew App Bridge Cockpit Showcase --- */ .crew-showcase-grid{ display:grid;grid-template-columns:1fr 1.15fr;gap:28px; align-items:stretch;margin-top:20px; } .crew-pillars-col{display:flex;flex-direction:column;gap:16px} .crew-pillar-card{ background:linear-gradient(155deg,rgba(17,26,16,.75) 0%,rgba(9,14,8,.9) 100%); border:1px solid var(--line); border-radius:16px; padding:20px 22px; position:relative;overflow:hidden; transition:border-color .3s,transform .3s; } .crew-pillar-card:hover{ border-color:rgba(168,213,6,.4); transform:translateX(3px); } .crew-pillar-head{ display:flex;align-items:center;gap:12px;margin-bottom:8px; } .crew-pillar-num{ font-family:var(--mono);font-size:.65rem;letter-spacing:.16em; color:var(--lime);font-weight:700; background:rgba(168,213,6,.12);border:1px solid rgba(168,213,6,.3); padding:2px 6px;border-radius:3px; } .crew-pillar-card h3{ font-family:var(--serif);font-size:1.24rem;font-weight:500; color:var(--text);margin:0; } .crew-pillar-card p{ font-family:var(--sans);font-size:.82rem;color:var(--mut); line-height:1.58;margin:0 0 10px 0; } .crew-pillar-chip{ font-family:var(--mono);font-size:.62rem;letter-spacing:.12em; color:var(--lime);text-transform:uppercase;font-weight:500; } /* Cockpit Interactive Console Display */ .crew-console-card{ background:linear-gradient(155deg,rgba(14,22,13,.9) 0%,rgba(6,10,6,.96) 100%); border:1px solid rgba(168,213,6,.38); border-radius:18px; padding:24px; display:flex;flex-direction:column; position:relative;overflow:hidden; box-shadow:0 24px 60px -15px rgba(0,0,0,.8),0 0 35px rgba(168,213,6,.12); } .crew-console-header{ display:flex;align-items:center;justify-content:space-between; padding-bottom:14px;margin-bottom:18px; border-bottom:1px solid rgba(168,213,6,.2); } .crew-console-title{ font-family:var(--mono);font-size:.68rem;letter-spacing:.16em; color:#eef3ea;font-weight:700;display:flex;align-items:center;gap:8px; } .crew-console-dot{ width:8px;height:8px;border-radius:50%;background:#e88c7a; box-shadow:0 0 10px #e88c7a;animation:pulse-led 1.6s infinite; } .crew-console-status{ font-family:var(--mono);font-size:.6rem;letter-spacing:.12em; color:var(--lime);background:rgba(168,213,6,.1); padding:3px 8px;border-radius:4px;border:1px solid rgba(168,213,6,.3); } .crew-console-svg{width:100%;height:auto;display:block;margin-bottom:14px} .crew-console-footer{ margin-top:auto;padding-top:14px;border-top:1px solid rgba(168,213,6,.15); display:flex;align-items:center;justify-content:space-between; } .crew-console-action{ display:inline-flex;align-items:center;gap:8px; font-family:var(--mono);font-size:.68rem;letter-spacing:.14em; color:var(--lime);text-transform:uppercase;font-weight:600; background:rgba(168,213,6,.12);border:1px solid rgba(168,213,6,.4); padding:7px 14px;border-radius:6px;transition:background .2s,border-color .2s; } .crew-console-action:hover{ background:rgba(168,213,6,.24);border-color:var(--lime);color:#ffffff; } /* Responsive adjustments for Haris elevated components */ @media(max-width:1024px){ .haris-pipe-grid{grid-template-columns:1fr;gap:20px} .haris-pipe-conduit{display:none} .crew-showcase-grid{grid-template-columns:1fr;gap:22px} } @media(max-width:640px){ .haris-hero-card{padding:18px} .haris-telemetry-hud{grid-template-columns:1fr;gap:10px} .haris-hero-footer{flex-direction:column;align-items:flex-start} } /* ========================================================================== UNIFIED TACTICAL MARITIME DESIGN SYSTEM EXTENSION ========================================================================== */ .v2-aurora-glow { position: absolute; top: 15%; left: 50%; transform: translateX(-50%); width: 900px; height: 520px; background: radial-gradient(ellipse at center, rgba(168,213,6,0.12) 0%, rgba(168,213,6,0.03) 55%, transparent 75%); pointer-events: none; z-index: 0; } /* Universal Tactical Corner Reticles for Metrics */ .metrics .met { position: relative; overflow: hidden; border: 1px solid var(--line); background: linear-gradient(155deg, rgba(17,26,16,.72) 0%, rgba(8,12,7,.90) 100%); border-radius: 14px; padding: 26px 22px; transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; } .metrics .met:hover { border-color: rgba(168,213,6,.45); box-shadow: 0 20px 48px -12px rgba(0,0,0,.8), 0 0 24px rgba(168,213,6,.14), inset 0 1px 0 rgba(168,213,6,.15); transform: translateY(-2px); } .met-corner { position: absolute; width: 7px; height: 7px; border-color: var(--lime); pointer-events: none; opacity: .85; } .met-corner-tl, .met-corner.tl { top: 7px; left: 7px; border-top: 1.5px solid; border-left: 1.5px solid; } .met-corner-tr, .met-corner.tr { top: 7px; right: 7px; border-top: 1.5px solid; border-right: 1.5px solid; } .met-corner-bl, .met-corner.bl { bottom: 7px; left: 7px; border-bottom: 1.5px solid; border-left: 1.5px solid; } .met-corner-br, .met-corner.br { bottom: 7px; right: 7px; border-bottom: 1.5px solid; border-right: 1.5px solid; } /* Tactical Card Master Primitive */ .tactical-card { background: linear-gradient(155deg, rgba(17,26,16,.85) 0%, rgba(8,13,8,.95) 100%); border: 1px solid rgba(168,213,6,.32); border-radius: 20px; padding: 24px; position: relative; box-shadow: 0 24px 60px -15px rgba(0,0,0,.85), 0 0 28px rgba(168,213,6,.08); overflow: hidden; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; } .tactical-card:hover { border-color: rgba(168,213,6,.55); box-shadow: 0 30px 70px -15px rgba(0,0,0,.92), 0 0 42px rgba(168,213,6,.18), inset 0 1px 0 rgba(168,213,6,.2); transform: translateY(-2px); } /* Tactical Reticle Crosshairs */ .tactical-reticle { position: absolute; width: 10px; height: 10px; pointer-events: none; border-color: rgba(168,213,6,.45); z-index: 3; } .tactical-reticle.r-tl { top: 8px; left: 8px; border-top: 1.5px solid; border-left: 1.5px solid; } .tactical-reticle.r-tr { top: 8px; right: 8px; border-top: 1.5px solid; border-right: 1.5px solid; } .tactical-reticle.r-bl { bottom: 8px; left: 8px; border-bottom: 1.5px solid; border-left: 1.5px solid; } .tactical-reticle.r-br { bottom: 8px; right: 8px; border-bottom: 1.5px solid; border-right: 1.5px solid; } :root[data-theme="light"] .tactical-reticle { border-color: rgba(107,141,0,.40); } /* Tactical Header Component */ .tactical-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; padding-bottom: 14px; border-bottom: 1px solid rgba(168,213,6,.15); position: relative; z-index: 2; } :root[data-theme="light"] .tactical-header { border-bottom-color: rgba(107,141,0,.15); } .tactical-title { font-family: var(--mono); font-size: .84rem; font-weight: 600; letter-spacing: .14em; color: var(--text); text-transform: uppercase; line-height: 1.35; display: flex; align-items: center; gap: 8px; } .tactical-title em, .tactical-title span.slash { font-style: normal; color: var(--lime); } .tactical-sub { font-family: var(--mono); font-size: .62rem; font-weight: 500; letter-spacing: .16em; color: var(--dim); text-transform: uppercase; margin-top: 4px; line-height: 1.4; } /* Tactical Status Pill & Live LED */ .tactical-status { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .62rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; padding: 5px 12px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; line-height: 1; } .tactical-status i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; flex-shrink: 0; } .tactical-status.status-online { color: var(--lime); background: rgba(168,213,6,.10); border: 1px solid rgba(168,213,6,.32); box-shadow: 0 0 14px rgba(168,213,6,.12); } .tactical-status.status-online i { background: var(--lime); box-shadow: 0 0 8px var(--lime); animation: pulse-led 2s infinite; } :root[data-theme="light"] .tactical-status.status-online { color: var(--lime); background: rgba(107,141,0,.10); border-color: rgba(107,141,0,.32); box-shadow: 0 0 10px rgba(107,141,0,.10); } .tactical-card-topbar { display: flex; align-items: center; justify-content: space-between; margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid rgba(168,213,6,.15); } .tactical-unit-tag { display: inline-flex; align-items: center; gap: 8px; font-family: var(--mono); font-size: .65rem; letter-spacing: .16em; color: var(--lime); text-transform: uppercase; font-weight: 600; } .tactical-unit-tag i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px var(--lime); animation: pulse-led 2s infinite; } .tactical-unit-tag i.alert-amber { background: #ebb432; box-shadow: 0 0 8px #ebb432; } .tactical-unit-tag i.alert-red { background: var(--alert-red); box-shadow: 0 0 8px var(--alert-red); } .tactical-unit-status { font-family: var(--mono); font-size: .62rem; letter-spacing: .12em; color: var(--mut); text-transform: uppercase; } /* Telemetry HUD Grid Strip */ .tactical-telemetry-hud { background: rgba(5,9,5,.82); border: 1px solid rgba(168,213,6,.2); border-radius: 12px; padding: 14px 16px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 18px; } .hud-telemetry-item { display: flex; flex-direction: column; gap: 3px; } .hud-telemetry-lbl { font-family: var(--mono); font-size: .56rem; letter-spacing: .14em; color: var(--mut); text-transform: uppercase; } .hud-telemetry-val { font-family: var(--mono); font-size: .80rem; font-weight: 700; color: #eef3ea; letter-spacing: .04em; display: flex; align-items: center; gap: 5px; } .hud-telemetry-val em { font-style: normal; color: var(--lime); font-size: .68rem; } /* Reusable Pipeline / Conduit System */ .pipe-wrap { position: relative; margin-top: 14px; } .pipe-conduit { position: absolute; top: 130px; left: 6%; right: 6%; height: 2px; background: linear-gradient(90deg, transparent, rgba(168,213,6,.25) 15%, rgba(168,213,6,.65) 50%, rgba(168,213,6,.25) 85%, transparent); z-index: 1; pointer-events: none; } .pipe-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; position: relative; z-index: 2; } .pipe-card { background: linear-gradient(155deg, rgba(17,26,16,.75) 0%, rgba(9,14,8,.94) 100%); border: 1px solid var(--line); border-radius: 18px; padding: 24px 22px; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; box-shadow: 0 20px 45px -15px rgba(0,0,0,.75); transition: border-color .3s ease, box-shadow .3s ease, transform .3s ease; } .pipe-card:hover { border-color: rgba(168,213,6,.45); box-shadow: 0 26px 54px -12px rgba(0,0,0,.88), 0 0 30px rgba(168,213,6,.14), inset 0 1px 0 rgba(168,213,6,.15); transform: translateY(-3px); } .pipe-card-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; } .pipe-stage-badge { font-family: var(--mono); font-size: .62rem; letter-spacing: .18em; color: var(--lime); text-transform: uppercase; font-weight: 600; background: rgba(168,213,6,.1); border: 1px solid rgba(168,213,6,.3); padding: 3px 8px; border-radius: 4px; } .pipe-icon-node { width: 28px; height: 28px; border-radius: 50%; background: #091208; border: 1px solid rgba(168,213,6,.4); display: flex; align-items: center; justify-content: center; color: var(--lime); } .pipe-art { width: 100%; height: 160px; margin: 8px 0 18px; display: flex; align-items: center; justify-content: center; position: relative; } .pipe-art svg { width: 100%; height: 100%; display: block; overflow: visible; } .pipe-body h3 { font-family: var(--serif); font-size: 1.40rem; font-weight: 500; color: var(--text); line-height: 1.25; margin-bottom: 10px; } .pipe-body p { font-family: var(--sans); font-size: .84rem; color: var(--mut); line-height: 1.6; margin-bottom: 18px; } .pipe-footer { padding-top: 14px; border-top: 1px solid rgba(168,213,6,.12); display: flex; align-items: center; justify-content: space-between; } .pipe-chip { font-family: var(--mono); font-size: .64rem; letter-spacing: .12em; color: var(--lime); text-transform: uppercase; font-weight: 500; } /* Tactical Fleet Architecture Matrix (The Stack) */ .tactical-stack-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 36px; } .stack-card { display: flex; flex-direction: column; justify-content: space-between; padding: 26px 24px; position: relative; text-decoration: none; color: inherit; } .stack-card:hover { text-decoration: none; color: inherit; } .stack-micro-art { width: 100%; height: 96px; background: #060c05; border: 1px solid rgba(168,213,6,.2); border-radius: 10px; margin: 12px 0 16px; display: flex; align-items: center; justify-content: center; overflow: hidden; } .stack-micro-art svg { width: 100%; height: 100%; } .stack-telemetry-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; background: rgba(5,9,5,.75); border: 1px solid rgba(168,213,6,.18); border-radius: 8px; padding: 8px 10px; margin: 14px 0 16px; font-family: var(--mono); } .stack-tel-item { display: flex; flex-direction: column; gap: 2px; } .stack-tel-k { font-size: .52rem; letter-spacing: .12em; color: var(--dim); text-transform: uppercase; } .stack-tel-v { font-size: .68rem; font-weight: 700; color: var(--text); white-space: nowrap; } .stack-card-bottom { display: flex; align-items: center; justify-content: space-between; padding-top: 14px; border-top: 1px solid rgba(168,213,6,.14); } .stack-card-chip { font-family: var(--mono); font-size: .62rem; letter-spacing: .1em; color: var(--lime); background: rgba(168,213,6,.08); border: 1px solid rgba(168,213,6,.25); padding: 4px 10px; border-radius: 6px; } .stack-card-action { font-family: var(--mono); font-size: .74rem; font-weight: 600; color: var(--text); display: flex; align-items: center; gap: 6px; transition: color .2s ease, transform .2s ease; } .stack-card:hover .stack-card-action { color: var(--lime); transform: translateX(4px); } @media (max-width: 1024px) { .tactical-stack-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 680px) { .tactical-stack-grid { grid-template-columns: 1fr; } } /* ══════════════════════════════════════════════════════════════════════════ COMPLETE LIGHT THEME PRECISION DESIGN SYSTEM Ensures WCAG AA/AAA contrast, pristine form controls, electric cyber accents ══════════════════════════════════════════════════════════════════════════ */ /* 1. Global Form Inputs & Controls */ :root[data-theme="light"] input[type="text"], :root[data-theme="light"] input[type="email"], :root[data-theme="light"] input[type="tel"], :root[data-theme="light"] input[type="url"], :root[data-theme="light"] input[type="password"], :root[data-theme="light"] select, :root[data-theme="light"] textarea, :root[data-theme="light"] .co-select-trigger { background: #ffffff !important; border: 1px solid rgba(20, 23, 19, 0.18) !important; color: #141713 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), inset 0 1px 1px rgba(0, 0, 0, 0.02) !important; } :root[data-theme="light"] input::placeholder, :root[data-theme="light"] textarea::placeholder { color: #768072 !important; opacity: 0.88 !important; } :root[data-theme="light"] input:focus, :root[data-theme="light"] select:focus, :root[data-theme="light"] textarea:focus, :root[data-theme="light"] .co-select-trigger[aria-expanded="true"] { border-color: #527500 !important; outline: none !important; box-shadow: 0 0 0 3.5px rgba(82, 117, 0, 0.18), 0 1px 3px rgba(0, 0, 0, 0.04) !important; background: #ffffff !important; } :root[data-theme="light"] label, :root[data-theme="light"] .bl { color: #141713 !important; font-weight: 600 !important; } /* 2. Primary Buttons & High-Energy CTAs (Jet Black on Electric Lime) */ :root[data-theme="light"] .btn.primary, :root[data-theme="light"] .btn-primary, :root[data-theme="light"] button[type="submit"]:not(.ghost):not(.btn.ghost), :root[data-theme="light"] .nav-cta, :root[data-theme="light"] .cta .btn.primary { background: #84ba00 !important; color: #071207 !important; font-weight: 700 !important; box-shadow: 0 4px 18px rgba(107, 160, 0, 0.28) !important; border: none !important; text-shadow: none !important; } :root[data-theme="light"] .btn.primary:hover, :root[data-theme="light"] .btn-primary:hover, :root[data-theme="light"] button[type="submit"]:not(.ghost):not(.btn.ghost):hover, :root[data-theme="light"] .nav-cta:hover, :root[data-theme="light"] .cta .btn.primary:hover { background: #73a400 !important; color: #071207 !important; box-shadow: 0 6px 24px rgba(107, 160, 0, 0.38) !important; transform: translateY(-1px); } :root[data-theme="light"] .btn.primary:active, :root[data-theme="light"] .btn-primary:active, :root[data-theme="light"] button[type="submit"]:active, :root[data-theme="light"] .nav-cta:active { transform: translateY(0); } /* 3. Tactical Cards & Form Containers */ :root[data-theme="light"] .tactical-card { background: #ffffff !important; border: 1px solid rgba(20, 23, 19, 0.12) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.06), 0 1px 3px rgba(0, 0, 0, 0.04) !important; } :root[data-theme="light"] .tactical-card-topbar { border-bottom: 1px solid rgba(20, 23, 19, 0.08) !important; } :root[data-theme="light"] .tactical-unit-tag { color: #527500 !important; font-weight: 600; } :root[data-theme="light"] .tactical-unit-tag i { background: #7ca800 !important; box-shadow: 0 0 8px rgba(124, 168, 0, 0.45) !important; } :root[data-theme="light"] .tactical-unit-status { color: #687262 !important; } :root[data-theme="light"] .tactical-title { color: #141713 !important; } :root[data-theme="light"] .tactical-sub { color: #687262 !important; } :root[data-theme="light"] .tactical-telemetry-hud { background: #f4f8ee !important; border: 1px solid rgba(82, 117, 0, 0.22) !important; } :root[data-theme="light"] .hud-telemetry-val { color: #141713 !important; } :root[data-theme="light"] .hud-telemetry-lbl { color: #687262 !important; } /* 4. Dropdowns & Navigation Menus */ :root[data-theme="light"] .nav-drop .drop-menu { background: #ffffff !important; border: 1px solid rgba(20, 23, 19, 0.12) !important; box-shadow: 0 18px 45px rgba(0, 0, 0, 0.12) !important; } :root[data-theme="light"] .nav-drop .drop-menu a { color: #535e55 !important; } :root[data-theme="light"] .nav-drop .drop-menu a:hover { background: #f0f5e9 !important; color: #141713 !important; } :root[data-theme="light"] .nav-drop .drop-menu a.active { background: rgba(82, 117, 0, 0.10) !important; color: #527500 !important; } /* 5. Mobile Navigation Drawer */ :root[data-theme="light"] .mobile-drawer { background: #ffffff !important; border: 1px solid rgba(20, 23, 19, 0.14) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.16) !important; } :root[data-theme="light"] .drawer-group { border-bottom-color: rgba(20, 23, 19, 0.08) !important; } :root[data-theme="light"] .drawer-group a { color: #535e55 !important; } :root[data-theme="light"] .drawer-group a:hover { background: #f0f5e9 !important; color: #141713 !important; } :root[data-theme="light"] .drawer-group a.active { background: rgba(82, 117, 0, 0.10) !important; color: #527500 !important; } :root[data-theme="light"] .drawer-label { color: #768072 !important; } /* 6. Custom Select Component (Contact Page) */ :root[data-theme="light"] .co-select-trigger { background: #ffffff !important; border-color: rgba(20, 23, 19, 0.18) !important; color: #141713 !important; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04) !important; } :root[data-theme="light"] .co-select-trigger:hover { border-color: #527500 !important; } :root[data-theme="light"] .co-select-trigger[aria-expanded="true"] { border-color: #527500 !important; background: #ffffff !important; box-shadow: 0 0 0 3px rgba(82, 117, 0, 0.15) !important; } :root[data-theme="light"] .co-select-menu { background: #ffffff !important; border-color: rgba(20, 23, 19, 0.14) !important; box-shadow: 0 16px 40px rgba(0, 0, 0, 0.12) !important; } :root[data-theme="light"] .co-option { color: #141713 !important; } :root[data-theme="light"] .co-option:hover { background: #f0f5e9 !important; color: #141713 !important; } :root[data-theme="light"] .co-option.selected { background: #84ba00 !important; color: #071207 !important; font-weight: 600 !important; } /* 7. Reusable Pipeline & Stack Matrix */ :root[data-theme="light"] .pipe-card { background: linear-gradient(155deg, #ffffff 0%, #f5faef 100%) !important; border-color: rgba(20, 23, 19, 0.12) !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.06) !important; } :root[data-theme="light"] .pipe-conduit { background: linear-gradient(90deg, transparent, rgba(82, 117, 0, 0.22) 15%, rgba(82, 117, 0, 0.6) 50%, rgba(82, 117, 0, 0.22) 85%, transparent) !important; } :root[data-theme="light"] .pipe-icon-node { background: #eef5e6 !important; border-color: #527500 !important; color: #527500 !important; } :root[data-theme="light"] .pipe-stage-badge { color: #527500 !important; background: rgba(82, 117, 0, 0.10) !important; border-color: rgba(82, 117, 0, 0.28) !important; } :root[data-theme="light"] .stack-micro-art { background: #edf4e7 !important; border-color: rgba(82, 117, 0, 0.25) !important; } :root[data-theme="light"] .stack-telemetry-row { background: #e9f2df !important; border-color: rgba(82, 117, 0, 0.2) !important; } :root[data-theme="light"] .stack-tel-v { color: #141713 !important; } :root[data-theme="light"] .stack-card-chip { background: rgba(82, 117, 0, 0.10) !important; border-color: rgba(82, 117, 0, 0.3) !important; color: #527500 !important; } :root[data-theme="light"] .stack-card:hover .stack-card-action { color: #527500 !important; } /* 8. HARIS Telemetry & Pipeline */ :root[data-theme="light"] .haris-telemetry-hud { background: #f4f8ee !important; border-color: rgba(82, 117, 0, 0.25) !important; } :root[data-theme="light"] .haris-hud-val { color: #141713 !important; } :root[data-theme="light"] .haris-hud-lbl { color: #687262 !important; } :root[data-theme="light"] .haris-pipe-card { background: linear-gradient(155deg, #ffffff 0%, #f5faef 100%) !important; border-color: rgba(20, 23, 19, 0.12) !important; box-shadow: 0 16px 36px rgba(0, 0, 0, 0.06) !important; } :root[data-theme="light"] .haris-pipe-icon-node { background: #eef5e6 !important; border-color: #527500 !important; color: #527500 !important; } :root[data-theme="light"] .haris-pipe-conduit { background: linear-gradient(90deg, transparent, rgba(82, 117, 0, 0.22) 20%, rgba(82, 117, 0, 0.6) 50%, rgba(82, 117, 0, 0.22) 80%, transparent) !important; } :root[data-theme="light"] .haris-stage-badge { color: #527500 !important; background: rgba(82, 117, 0, 0.10) !important; border-color: rgba(82, 117, 0, 0.28) !important; } :root[data-theme="light"] .haris-hero-footer { border-top-color: rgba(20, 23, 19, 0.10) !important; } /* 9. Sonar Radar Console (Homepage) */ :root[data-theme="light"] .sonar-console { background: linear-gradient(155deg, #ffffff 0%, #f4f9ee 100%) !important; border-color: rgba(20, 23, 19, 0.14) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04) !important; } :root[data-theme="light"] .sonar-console-header { border-bottom-color: rgba(20, 23, 19, 0.08) !important; color: #687262 !important; } :root[data-theme="light"] .sonar-scope { background: radial-gradient(circle, rgba(82, 117, 0, 0.08) 0%, rgba(235, 244, 228, 0.95) 85%) !important; border-color: rgba(82, 117, 0, 0.35) !important; box-shadow: 0 8px 30px rgba(0, 0, 0, 0.08), inset 0 0 20px rgba(82, 117, 0, 0.08) !important; } :root[data-theme="light"] .depth-circle { border-color: rgba(20, 23, 19, 0.15) !important; } :root[data-theme="light"] .sonar-center-target { background: #ffffff !important; border-color: #527500 !important; color: #527500 !important; box-shadow: 0 0 14px rgba(82, 117, 0, 0.25) !important; } :root[data-theme="light"] .target-blip { background: #527500 !important; box-shadow: 0 0 8px #527500 !important; } :root[data-theme="light"] .target-blip.active { box-shadow: 0 0 16px #527500, 0 0 0 3px rgba(82, 117, 0, 0.25) !important; } :root[data-theme="light"] .depth-btn { background: #ffffff !important; border-color: rgba(20, 23, 19, 0.12) !important; color: #141713 !important; } :root[data-theme="light"] .depth-btn.active { border-color: #527500 !important; background: #f0f5e9 !important; } /* 10. Metrics Cards */ :root[data-theme="light"] .metrics .met { background: linear-gradient(155deg, #f8fbf5 0%, #edf4e7 100%) !important; border-color: rgba(20, 23, 19, 0.12) !important; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.06) !important; } :root[data-theme="light"] .metrics .met:hover { border-color: #527500 !important; box-shadow: 0 18px 40px rgba(82, 117, 0, 0.12) !important; } :root[data-theme="light"] .met-corner { border-color: #527500 !important; } /* 11. Hero Depth Selector & Sonar Telemetry Cards */ :root[data-theme="light"] .depth-selector-wrap { background: #ffffff !important; border-color: rgba(20, 23, 19, 0.12) !important; box-shadow: 0 4px 18px rgba(0, 0, 0, 0.04) !important; } :root[data-theme="light"] .depth-selector-label { color: #687262 !important; } :root[data-theme="light"] .sonar-card-details { background: #ffffff !important; border-color: rgba(20, 23, 19, 0.12) !important; box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.02) !important; } :root[data-theme="light"] .chip-item { background: #f0f5e9 !important; border-color: rgba(20, 23, 19, 0.12) !important; color: #4f594b !important; } /* 12. Haris 1U Rack Hardware Console & Components */ :root[data-theme="light"] .haris-hero-card { background: linear-gradient(155deg, #ffffff 0%, #f4f9ee 100%) !important; border-color: rgba(20, 23, 19, 0.14) !important; box-shadow: 0 20px 50px rgba(0, 0, 0, 0.07), 0 1px 3px rgba(0, 0, 0, 0.04) !important; } :root[data-theme="light"] .haris-card-topbar { border-bottom-color: rgba(20, 23, 19, 0.08) !important; } :root[data-theme="light"] .haris-unit-status { color: #687262 !important; } :root[data-theme="light"] .haris-hero-footer { border-top-color: rgba(20, 23, 19, 0.08) !important; } :root[data-theme="light"] .haris-hero-note { color: #687262 !important; } /* 13. Tactical Blueprints, Consoles & Hardware SVGs (Global System) */ :root[data-theme="light"] .tactical-card svg, :root[data-theme="light"] .haris-hero-card svg, :root[data-theme="light"] .haris-pipe-card svg, :root[data-theme="light"] .pipe-card .pipe-art svg, :root[data-theme="light"] .pipe-art svg, :root[data-theme="light"] .stack-micro-art svg, :root[data-theme="light"] svg.tactical-blueprint-svg { background: transparent !important; } /* Outer screen frames and dark terminal canvases */ :root[data-theme="light"] .tactical-card svg > rect[fill^="#0"], :root[data-theme="light"] .tactical-card svg > rect[fill^="#1"], :root[data-theme="light"] .tactical-card svg > rect[fill="#000000"], :root[data-theme="light"] .tactical-card svg > polygon[fill^="#0"], :root[data-theme="light"] .tactical-card svg > polygon[fill="#000000"], :root[data-theme="light"] .haris-hero-card svg > rect[fill^="#0"], :root[data-theme="light"] .haris-hero-card svg > rect[fill^="#1"], :root[data-theme="light"] .haris-hero-card svg > rect[fill="#000000"], :root[data-theme="light"] .haris-pipe-card svg > rect[fill^="#0"], :root[data-theme="light"] .haris-pipe-card svg > rect[fill^="#1"], :root[data-theme="light"] .pipe-card .pipe-art svg > rect[fill^="#0"], :root[data-theme="light"] .pipe-card .pipe-art svg > rect[fill^="#1"], :root[data-theme="light"] .pipe-card .pipe-art svg > polygon[fill^="#0"], :root[data-theme="light"] .pipe-card .pipe-art svg > polygon[fill^="#1"], :root[data-theme="light"] .pipe-art svg > rect[fill^="#0"], :root[data-theme="light"] .pipe-art svg > rect[fill^="#1"], :root[data-theme="light"] .pipe-art svg > polygon[fill^="#0"], :root[data-theme="light"] .pipe-art svg > polygon[fill^="#1"], :root[data-theme="light"] .stack-micro-art svg > rect[fill^="#0"], :root[data-theme="light"] .stack-micro-art svg > rect[fill^="#1"], :root[data-theme="light"] svg.tactical-blueprint-svg > rect[fill^="#0"], :root[data-theme="light"] svg.tactical-blueprint-svg > rect[fill^="#1"], :root[data-theme="light"] svg.tactical-blueprint-svg > rect[fill="#000000"] { fill: #f4f8ed !important; stroke: rgba(82, 117, 0, 0.28) !important; } /* Inner cards, sub-panels, nodes, and device slots */ :root[data-theme="light"] .tactical-card svg g rect[fill^="#0"], :root[data-theme="light"] .tactical-card svg g rect[fill^="#1"], :root[data-theme="light"] .tactical-card svg g rect[fill^="#2"], :root[data-theme="light"] .tactical-card svg g polygon[fill^="#0"], :root[data-theme="light"] .tactical-card svg g polygon[fill^="#1"], :root[data-theme="light"] .tactical-card svg rect[fill^="#0"]:not(:first-of-type), :root[data-theme="light"] .tactical-card svg rect[fill^="#1"]:not(:first-of-type), :root[data-theme="light"] .haris-hero-card svg g rect[fill^="#0"], :root[data-theme="light"] .haris-hero-card svg g rect[fill^="#1"], :root[data-theme="light"] .haris-hero-card svg g rect[fill^="#2"], :root[data-theme="light"] .haris-hero-card svg g polygon[fill^="#0"], :root[data-theme="light"] .haris-hero-card svg g polygon[fill^="#1"], :root[data-theme="light"] .haris-pipe-card svg g rect[fill^="#0"], :root[data-theme="light"] .haris-pipe-card svg g rect[fill^="#1"], :root[data-theme="light"] .haris-pipe-card svg g rect[fill^="#2"], :root[data-theme="light"] .pipe-card .pipe-art svg g rect[fill^="#0"], :root[data-theme="light"] .pipe-card .pipe-art svg g rect[fill^="#1"], :root[data-theme="light"] .pipe-art svg g rect[fill^="#0"], :root[data-theme="light"] .pipe-art svg g rect[fill^="#1"], :root[data-theme="light"] .stack-micro-art svg g rect[fill^="#0"], :root[data-theme="light"] .stack-micro-art svg g rect[fill^="#1"], :root[data-theme="light"] svg.tactical-blueprint-svg g rect[fill^="#0"], :root[data-theme="light"] svg.tactical-blueprint-svg g rect[fill^="#1"] { fill: #ffffff !important; stroke: rgba(82, 117, 0, 0.25) !important; } /* Radar scopes, topology circles, and shields */ :root[data-theme="light"] .tactical-card svg circle[fill^="#0"], :root[data-theme="light"] .tactical-card svg circle[fill^="#1"], :root[data-theme="light"] .tactical-card svg circle[fill="#000000"], :root[data-theme="light"] .tactical-card svg path[fill^="#0"], :root[data-theme="light"] .tactical-card svg path[fill^="#1"], :root[data-theme="light"] .haris-hero-card svg circle[fill^="#0"], :root[data-theme="light"] .haris-hero-card svg circle[fill^="#1"], :root[data-theme="light"] .haris-hero-card svg path[fill^="#0"], :root[data-theme="light"] .haris-hero-card svg path[fill^="#1"], :root[data-theme="light"] .haris-hero-card svg polygon[fill^="#0"], :root[data-theme="light"] .haris-hero-card svg polygon[fill^="#1"], :root[data-theme="light"] .haris-pipe-card svg circle[fill^="#0"], :root[data-theme="light"] .haris-pipe-card svg circle[fill^="#1"], :root[data-theme="light"] .haris-pipe-card svg circle[fill="#000000"], :root[data-theme="light"] .pipe-art svg circle[fill^="#0"], :root[data-theme="light"] .pipe-art svg circle[fill^="#1"], :root[data-theme="light"] svg.tactical-blueprint-svg circle[fill^="#0"], :root[data-theme="light"] svg.tactical-blueprint-svg circle[fill^="#1"] { fill: #e8f2df !important; stroke: rgba(82, 117, 0, 0.32) !important; } /* Text typography inside tactical SVGs */ :root[data-theme="light"] svg text[fill="#ffffff"], :root[data-theme="light"] svg text[fill="#eef3ea"], :root[data-theme="light"] svg text[fill="#f5f6f0"] { fill: #141713 !important; } :root[data-theme="light"] svg text[fill="#a7b0a3"], :root[data-theme="light"] svg text[fill="#a8b2a4"], :root[data-theme="light"] svg text[fill="#697762"], :root[data-theme="light"] svg text[fill="#76806f"] { fill: #4f594b !important; } :root[data-theme="light"] svg text[fill="#a8d506"], :root[data-theme="light"] svg tspan[fill="#a8d506"], :root[data-theme="light"] svg text[fill="#d8ff36"], :root[data-theme="light"] svg tspan[fill="#d8ff36"] { fill: var(--lime) !important; } /* Linear and radial gradients across SVGs */ :root[data-theme="light"] #sc-screen-grad stop, :root[data-theme="light"] #screen-edge-grad stop, :root[data-theme="light"] #mob-bg stop, :root[data-theme="light"] #net-bg stop, :root[data-theme="light"] #net-screen-grad stop, :root[data-theme="light"] #wt-grid-grad stop, :root[data-theme="light"] #chassis-face stop, :root[data-theme="light"] #oled-bg stop, :root[data-theme="light"] #wt-screen-bg stop, :root[data-theme="light"] #ms-screen-grad stop, :root[data-theme="light"] #wt-stand-base stop, :root[data-theme="light"] #wt-frame-top stop, :root[data-theme="light"] #wt-frame-side stop, :root[data-theme="light"] #ph-side-metal stop, :root[data-theme="light"] #tier-top-grad stop, :root[data-theme="light"] #tier-t1-top stop, :root[data-theme="light"] #tier-left-bevel stop, :root[data-theme="light"] #tier-right-bevel stop, :root[data-theme="light"] #ms-desk-grad stop, :root[data-theme="light"] #cp-cover-grad stop, :root[data-theme="light"] #cp-spine-grad stop, :root[data-theme="light"] #cp-pages-top stop, :root[data-theme="light"] #cp-pages-edge stop, :root[data-theme="light"] #tab-glass stop { stop-color: #eef5e6 !important; } :root[data-theme="light"] #sc-screen-grad stop:last-child, :root[data-theme="light"] #screen-edge-grad stop:last-child, :root[data-theme="light"] #mob-bg stop:last-child, :root[data-theme="light"] #net-bg stop:last-child, :root[data-theme="light"] #net-screen-grad stop:last-child, :root[data-theme="light"] #wt-grid-grad stop:last-child, :root[data-theme="light"] #chassis-face stop:last-child, :root[data-theme="light"] #oled-bg stop:last-child, :root[data-theme="light"] #wt-screen-bg stop:last-child, :root[data-theme="light"] #ms-screen-grad stop:last-child, :root[data-theme="light"] #wt-stand-base stop:last-child, :root[data-theme="light"] #wt-frame-top stop:last-child, :root[data-theme="light"] #wt-frame-side stop:last-child, :root[data-theme="light"] #ph-side-metal stop:last-child, :root[data-theme="light"] #tier-top-grad stop:last-child, :root[data-theme="light"] #tier-t1-top stop:last-child, :root[data-theme="light"] #tier-left-bevel stop:last-child, :root[data-theme="light"] #tier-right-bevel stop:last-child, :root[data-theme="light"] #ms-desk-grad stop:last-child, :root[data-theme="light"] #cp-cover-grad stop:last-child, :root[data-theme="light"] #cp-spine-grad stop:last-child, :root[data-theme="light"] #cp-pages-top stop:last-child, :root[data-theme="light"] #cp-pages-edge stop:last-child, :root[data-theme="light"] #tab-glass stop:last-child { stop-color: #dbe8cf !important; } /* Light mode overrides for dark cards in Haris.html */ :root[data-theme="light"] .hpa-card, :root[data-theme="light"] .crew-pillar-card, :root[data-theme="light"] .crew-console-card { background: linear-gradient(155deg, #ffffff 0%, #f4f8ed 100%); border-color: rgba(82, 117, 0, 0.25); box-shadow: 0 12px 24px -12px rgba(0,0,0,0.08), 0 0 12px rgba(82, 117, 0, 0.05); } :root[data-theme="light"] .crew-console-title { color: #141713; } :root[data-theme="light"] .crew-console-action:hover { color: #ffffff; } /* Ensure the SVG inside the crew-console-card also inverts its dark rects */ :root[data-theme="light"] .crew-console-card svg > rect[fill^="#0"], :root[data-theme="light"] .crew-console-card svg > rect[fill^="#1"], :root[data-theme="light"] .crew-console-card svg > rect[fill="#000000"], :root[data-theme="light"] .crew-console-card svg rect[fill="url(#tab-glass)"] { fill: #f4f8ed !important; stroke: rgba(82, 117, 0, 0.28) !important; } :root[data-theme="light"] .crew-console-card svg g rect[fill^="#0"], :root[data-theme="light"] .crew-console-card svg g rect[fill^="#1"], :root[data-theme="light"] .crew-console-card svg g rect[fill^="#2"] { fill: #ffffff !important; stroke: rgba(82, 117, 0, 0.25) !important; } :root[data-theme="light"] svg text[fill="#eef3ea"], :root[data-theme="light"] svg text[fill="#ffffff"] { fill: #141713 !important; } :root[data-theme="light"] svg text[fill="#e88c7a"] { fill: #c93b22 !important; }