/* ============================================================ NUOGENTIC — Design System v7 Premium enterprise SaaS. Deep Navy · Electric Teal · Amber · Warm White. Mixed dark/light sections, large type, motion. Fonts loaded via in each page . ============================================================ */ /* ---------- TOKENS : LIGHT (default) ---------- */ :root { /* brand palette */ --navy: #0C1C2E; --navy-2: #18415E; /* steel-blue, echoes logo blue */ --navy-3: #08141F; --teal: #12B5A4; /* logo-matched teal-green */ --teal-2: #0B8C7F; /* darker teal for text on light */ --teal-soft: #D2F1EC; --amber: #F59E0B; --amber-soft: #FDEBCB; --warm: #F8F9FA; --white: #FFFFFF; /* semantic */ --bg: var(--warm); --surface: var(--white); --surface-2: var(--white); --band: #EEF1F4; --text: var(--navy); --text-2: #45525F; --text-3: #6B7884; --accent: var(--teal); --accent-ink: var(--teal-2); --accent-2: var(--amber); --on-accent: #052019; --border: #E4E8EC; --border-2: #D2D9DF; --grid-line: rgba(13,27,42,0.05); --glow-teal: rgba(var(--accent-rgb),0.16); --accent-100: var(--teal-soft); --accent-rgb: 18,181,164; --cta: #F59E0B; --cta-ink: #B26B07; --on-cta: #1A1206; --cta-rgb: 245,158,11; --shadow-sm: 0 1px 2px rgba(13,27,42,.05); --shadow-md: 0 12px 32px -16px rgba(13,27,42,.16), 0 2px 8px -4px rgba(13,27,42,.06); --shadow-lg: 0 36px 80px -34px rgba(13,27,42,.30), 0 12px 30px -18px rgba(13,27,42,.14); /* type */ --font-display: 'Sora', system-ui, sans-serif; --font-body: 'Hanken Grotesk', system-ui, sans-serif; --font-mono: 'JetBrains Mono', ui-monospace, monospace; --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --s10:128px; --radius:10px; --radius-lg:16px; --maxw:1280px; --nav-h:74px; } /* ---------- TOKENS : DARK ---------- */ [data-theme="dark"] { --bg: #081523; --surface: #0F2334; --surface-2: #152C40; --band: #0C1D2C; --text: #F2F5F8; --text-2: #AEBCC9; --text-3: #76869A; --accent: #1FD3BE; --accent-ink:#3DE0CD; --on-accent: #052019; --border: rgba(255,255,255,0.09); --border-2: rgba(255,255,255,0.17); --grid-line: rgba(var(--accent-rgb),0.10); --glow-teal: rgba(var(--accent-rgb),0.22); --accent-100: rgba(var(--accent-rgb),0.15); --accent-rgb: 28,206,186; --cta: #FBB445; --cta-ink: #FBC56B; --on-cta: #1A1206; --cta-rgb: 251,180,69; --shadow-sm: 0 1px 2px rgba(0,0,0,.5); --shadow-md: 0 14px 36px -16px rgba(0,0,0,.7); --shadow-lg: 0 40px 90px -36px rgba(0,0,0,.85); } /* ---------- RESET ---------- */ *,*::before,*::after { box-sizing:border-box; } * { margin:0; } html { scroll-behavior:smooth; -webkit-text-size-adjust:100%; scroll-padding-top:90px; } body { font-family:var(--font-body); background:var(--bg); color:var(--text-2); line-height:1.62; font-size:17px; font-weight:450; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; transition:background .4s ease, color .4s ease; overflow-x:hidden; } img,svg,canvas { display:block; max-width:100%; } a { color:inherit; text-decoration:none; } button { font:inherit; cursor:pointer; } ::selection { background:var(--teal); color:var(--on-accent); } /* ---------- TYPOGRAPHY ---------- */ h1,h2,h3,h4 { font-family:var(--font-display); font-weight:700; line-height:1.04; letter-spacing:-0.025em; color:var(--text); text-wrap:balance; } .display { font-size:clamp(2.9rem,6vw,5.2rem); font-weight:700; line-height:1.0; letter-spacing:-0.035em; } .h1 { font-size:clamp(2.2rem,4vw,3.5rem); } .h2 { font-size:clamp(1.8rem,2.8vw,2.6rem); } .h3 { font-size:clamp(1.2rem,1.7vw,1.45rem); letter-spacing:-0.02em; font-weight:600; } .lead { font-size:clamp(1.1rem,1.45vw,1.34rem); color:var(--text-2); line-height:1.55; font-weight:450; } .muted { color:var(--text-3); } p { text-wrap:pretty; } .hl { color:var(--accent-ink); } [data-theme="dark"] .hl, .section-dark .hl { color:var(--accent); } /* eyebrow */ .eyebrow { font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.18em; text-transform:uppercase; color:var(--accent-ink); font-weight:500; display:inline-flex; align-items:center; gap:9px; } .eyebrow::before { content:""; width:22px; height:2px; background:var(--accent); border-radius:2px; } .eyebrow.no-rule::before { display:none; } .section-dark .eyebrow, [data-theme="dark"] .eyebrow { color:var(--accent); } .index-tag { font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.06em; color:var(--accent-ink); } /* ---------- LAYOUT ---------- */ .wrap { width:100%; max-width:var(--maxw); margin-inline:auto; padding-inline:var(--s6); } .section { padding-block:clamp(72px,10vw,148px); position:relative; } .section-tight { padding-block:clamp(48px,6vw,84px); } .divider { height:1px; background:var(--border); border:0; } .band { background:var(--band); } .section-head { max-width:760px; } .section-head .eyebrow { margin-bottom:var(--s4); } .section-head h2 { margin-bottom:var(--s4); } /* ---------- BUTTONS ---------- */ .btn { display:inline-flex; align-items:center; gap:var(--s3); padding:15px 26px; font-family:var(--font-body); font-weight:600; font-size:0.98rem; letter-spacing:-0.005em; border-radius:var(--radius); border:1px solid transparent; line-height:1; white-space:nowrap; transition:transform .18s ease, background .25s ease, border-color .25s ease, box-shadow .25s ease, color .25s ease; } .btn svg { width:17px; height:17px; transition:transform .25s ease; } .btn:hover svg.arrow { transform:translateX(3px); } .btn:active { transform:translateY(1px); } .btn-primary { background:var(--cta); color:var(--on-cta); box-shadow:0 8px 22px -10px rgba(var(--cta-rgb),.5); } .btn-primary:hover { background:color-mix(in oklab, var(--cta) 88%, #000); box-shadow:0 12px 30px -10px rgba(var(--cta-rgb),.62); } .btn-navy { background:var(--navy); color:#fff; } .btn-navy:hover { background:#08131f; } [data-theme="dark"] .btn-navy { background:var(--surface-2); border-color:var(--border-2); } .btn-ghost { background:transparent; color:var(--text); border-color:var(--border-2); } .btn-ghost:hover { border-color:var(--accent); color:var(--accent-ink); } .btn-lg { padding:18px 32px; font-size:1.04rem; } /* on dark sections */ .section-dark .btn-ghost, .hero-dark .btn-ghost { color:#fff; border-color:rgba(255,255,255,.28); } .section-dark .btn-ghost:hover, .hero-dark .btn-ghost:hover { border-color:var(--teal); color:var(--teal); } /* ---------- CARDS ---------- */ .card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--s6); position:relative; transition:transform .3s cubic-bezier(.2,.7,.3,1), box-shadow .3s ease, border-color .3s ease; } .card-hover:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--accent); } .cap-icon { width:48px; height:48px; display:grid; place-items:center; border-radius:12px; background:var(--teal-soft); color:var(--teal-2); margin-bottom:var(--s5); transition:background .3s, color .3s; } [data-theme="dark"] .cap-icon { background:rgba(var(--accent-rgb),.14); color:var(--accent); } .cap-icon svg { width:23px; height:23px; } .card-hover:hover .cap-icon { background:var(--teal); color:var(--on-accent); } .card h3 { font-size:1.14rem; margin-bottom:var(--s2); } .card p { font-size:0.96rem; color:var(--text-2); line-height:1.55; font-weight:450; } /* ---------- CHIPS ---------- */ .chip { display:inline-flex; align-items:center; gap:var(--s3); padding:10px 16px; border:1px solid var(--border); border-radius:100px; background:var(--surface); font-size:0.9rem; font-weight:500; color:var(--text-2); white-space:nowrap; box-shadow:var(--shadow-sm); } .chip .dot { width:6px; height:6px; border-radius:50%; background:var(--accent); flex:none; } /* ---------- GRID ---------- */ .grid { display:grid; gap:var(--s5); } .g2 { grid-template-columns:repeat(2,1fr); } .g3 { grid-template-columns:repeat(3,1fr); } .g4 { grid-template-columns:repeat(4,1fr); } @media (max-width:1040px){ .g4{grid-template-columns:repeat(2,1fr);} .g3{grid-template-columns:repeat(2,1fr);} } @media (max-width:720px){ .g4,.g3,.g2{grid-template-columns:1fr;} } /* ============================================================ RESPONSIVE — mobile + tablet ============================================================ */ /* Two-column section grids (replace inline styles) */ .grid-2col { display:grid; grid-template-columns:1fr 1fr; gap:var(--s8); align-items:center; } .grid-asym { display:grid; grid-template-columns:0.9fr 1.1fr; gap:var(--s8); align-items:center; } .grid-2col > *, .grid-asym > * { min-width:0; } @media (max-width:900px){ .grid-2col, .grid-asym { grid-template-columns:1fr; gap:var(--s7); } .grid-2col > *:nth-child(2), .grid-asym > *:nth-child(2) { order:2; } } /* Hero mobile */ @media (max-width:640px){ .hero-dark { padding-top:52px; padding-bottom:60px; } .hero-dark .display { font-size:clamp(2.1rem,9vw,2.9rem); } .trust-bar { gap:var(--s3) var(--s5); padding-top:var(--s5); margin-top:var(--s6); } .trust-item { font-size:0.82rem; } .hero-cta { gap:var(--s2); } .hero-cta .btn-lg { padding:15px 22px; font-size:0.94rem; } } /* Orbit nodes — scale down on small screens */ @media (max-width:640px){ .orbit-node { font-size:0.64rem; padding:5px 8px; gap:5px; } .orbit-node .od { width:5px; height:5px; } .orbit-core { width:88px; height:88px; font-size:0.78rem; padding:8px; } .al-title { font-size:1rem; } } /* Ecosystem spokes — smaller on mobile */ @media (max-width:640px){ .eco .eco-spoke { font-size:0.8rem; padding:7px 12px; min-width:0; } .eco .eco-core { font-size:0.82rem; padding:12px 14px; border-radius:10px; } .eco .eco-core img { height:84px !important; } /* smaller centre logo on mobile (desktop stays 132px) */ .eco { max-width:100%; } } /* Innovation chips stack */ @media (max-width:900px){ .innov-chip { padding:14px 18px; } } /* Outcomes grid */ @media (max-width:640px){ .outcome { padding:var(--s5) 0 var(--s4); } .outcome .ostat { font-size:clamp(1.7rem,7vw,2.2rem); } } /* Why cards */ @media (max-width:640px){ .card[style*="padding:var(--s7)"] { padding:var(--s5) !important; } } /* Wrap padding tighter on mobile */ @media (max-width:480px){ .wrap { padding-inline:var(--s4); } .section { padding-block:clamp(52px,8vw,100px); } } /* Footer single column on very small */ @media (max-width:420px){ .footer-grid{ grid-template-columns:1fr; gap:var(--s5);} } /* Contact form grid */ .form-grid { display:grid; grid-template-columns:1.05fr 0.95fr; gap:var(--s8); align-items:start; } @media (max-width:860px){ .form-grid { grid-template-columns:1fr; gap:var(--s6); } } /* ---------- GRID TEXTURE ---------- */ .gridlines { position:relative; } .gridlines > .wrap { position:relative; z-index:1; } .gridlines::before { content:""; position:absolute; inset:0; z-index:0; pointer-events:none; background-image:linear-gradient(var(--grid-line) 1px,transparent 1px),linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size:58px 58px; -webkit-mask-image:radial-gradient(120% 90% at 70% 12%,#000 0%,transparent 72%); mask-image:radial-gradient(120% 90% at 70% 12%,#000 0%,transparent 72%); } /* ---------- DARK SECTIONS ---------- */ .section-dark { background:var(--navy); color:#DDE6EE; --text:#FFFFFF; --text-2:#AEBED0; --text-3:#8294A8; --surface:rgba(255,255,255,0.04); --surface-2:rgba(255,255,255,0.055); --band:rgba(255,255,255,0.03); --border:rgba(255,255,255,0.10); --border-2:rgba(255,255,255,0.22); --grid-line:rgba(var(--accent-rgb),0.13); --accent-ink:var(--teal); } .section-dark .cap-icon { background:rgba(var(--accent-rgb),.14); color:var(--teal); } .section-navy-deep { background:radial-gradient(120% 130% at 50% -10%, var(--navy-2) 0%, var(--navy) 45%, var(--navy-3) 100%); } /* ---------- NAV ---------- */ .nav { position:sticky; top:0; z-index:100; height:var(--nav-h); display:flex; align-items:center; background:color-mix(in oklab,var(--bg) 78%,transparent); backdrop-filter:saturate(150%) blur(16px); border-bottom:1px solid transparent; transition:border-color .3s ease, background .3s ease; } .nav.scrolled { border-bottom-color:var(--border); } .nav .wrap { display:flex; align-items:center; justify-content:space-between; gap:var(--s6); } .brand { display:flex; align-items:center; gap:11px; font-family:var(--font-display); font-weight:700; font-size:1.2rem; letter-spacing:-0.03em; color:var(--text); } .brand .mark { height:56px; width:auto; flex:none; display:block; } .footer .brand .mark { background:transparent; padding:0; height:56px; } .nav-links { display:flex; align-items:center; gap:var(--s1); } .nav-links a { padding:8px 13px; border-radius:var(--radius); white-space:nowrap; font-size:0.92rem; font-weight:500; color:var(--text-2); transition:color .2s, background .2s; } .nav-links a:hover { color:var(--text); background:var(--band); } .nav-links a.active { color:var(--accent-ink); } .nav-right { display:flex; align-items:center; gap:var(--s3); } .theme-toggle { width:38px; height:38px; display:grid; place-items:center; border:1px solid var(--border-2); border-radius:var(--radius); background:var(--surface); color:var(--text-2); transition:color .2s,border-color .2s; } .theme-toggle:hover { color:var(--accent-ink); border-color:var(--accent); } .theme-toggle svg { width:18px; height:18px; } .nav-burger { display:none; width:38px; height:38px; place-items:center; border:1px solid var(--border-2); border-radius:var(--radius); background:var(--surface); color:var(--text); } .mobile-menu { position:fixed; inset:var(--nav-h) 0 auto 0; z-index:99; background:var(--bg); border-bottom:1px solid var(--border); padding:var(--s5) var(--s6) var(--s7); transform:translateY(-12px); opacity:0; pointer-events:none; transition:transform .3s ease,opacity .3s ease; } .mobile-menu.open { transform:translateY(0); opacity:1; pointer-events:auto; } .mobile-menu a { display:block; padding:14px 4px; font-family:var(--font-display); font-size:1.3rem; font-weight:600; border-bottom:1px solid var(--border); color:var(--text); } @media (max-width:980px){ .nav-links{display:none;} .nav-burger{display:grid;} } /* lang toggle */ .lang-toggle { height:38px; padding:0 12px; display:flex; align-items:center; gap:5px; border:1px solid var(--border-2); border-radius:var(--radius); background:var(--surface); color:var(--text-3); font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.04em; line-height:1; transition:border-color .2s,color .2s; } .lang-toggle:hover { border-color:var(--accent); } .lang-toggle .on { color:var(--accent-ink); font-weight:500; } .lang-toggle .sep { opacity:.45; } @media (max-width:600px){ .nav .nav-right > .btn-primary { display:none; } } /* ---------- FOOTER ---------- */ .footer { background:var(--navy-3); color:#AEBED0; padding-block:var(--s9) var(--s7); } .footer .trust-line { max-width:760px; color:#8294A8; font-size:0.98rem; line-height:1.6; } .footer h4 { color:#fff; font-family:var(--font-body); font-size:0.76rem; letter-spacing:0.16em; text-transform:uppercase; font-weight:600; margin-bottom:var(--s4); } .footer a { color:#8294A8; font-size:0.95rem; display:block; padding:5px 0; transition:color .2s; } .footer a:hover { color:#fff; } .footer .brand { color:#fff; flex-direction:column; align-items:center; text-align:center; gap:6px; width:max-content; } .footer-grid { display:grid; grid-template-columns:1.7fr repeat(4,1fr); gap:var(--s7); } @media (max-width:900px){ .footer-grid{ grid-template-columns:1fr 1fr 1fr; } } @media (max-width:560px){ .footer-grid{ grid-template-columns:1fr 1fr; gap:var(--s6);} } .footer-bottom { display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--s4); margin-top:var(--s8); padding-top:var(--s5); border-top:1px solid rgba(255,255,255,.1); color:#67768A; font-size:0.85rem; } /* ---------- SCROLL REVEAL (progressive enhancement: visible unless JS hides) ---------- */ .reveal { opacity:1; transform:none; transition:opacity .7s cubic-bezier(.2,.7,.3,1), transform .7s cubic-bezier(.2,.7,.3,1); } html.js .reveal { opacity:0; transform:translateY(24px); } html.js .reveal.in { opacity:1; transform:none; } .reveal[data-d="1"]{transition-delay:.06s}.reveal[data-d="2"]{transition-delay:.12s}.reveal[data-d="3"]{transition-delay:.18s} .reveal[data-d="4"]{transition-delay:.24s}.reveal[data-d="5"]{transition-delay:.30s}.reveal[data-d="6"]{transition-delay:.36s} .reveal[data-d="7"]{transition-delay:.42s}.reveal[data-d="8"]{transition-delay:.48s} @media (prefers-reduced-motion:reduce){ .reveal{opacity:1;transform:none;transition:none;} html{scroll-behavior:auto;} } /* ---------- HERO ---------- */ .hero-dark { position:relative; color:#EAF1F8; overflow:hidden; background:radial-gradient(130% 120% at 78% -10%, var(--navy-2) 0%, var(--navy) 46%, var(--navy-3) 100%); padding-top:clamp(64px,9vw,120px); padding-bottom:clamp(72px,10vw,130px); } .hero-dark .text-2,.hero-dark .lead { color:#A9BCCF; } #hero-canvas { position:absolute; inset:0; width:100%; height:100%; z-index:0; opacity:.9; animation:heroPulse 7s ease-in-out infinite alternate; } @keyframes heroPulse { from{opacity:.6;} to{opacity:.95;} } @media (prefers-reduced-motion:reduce){ #hero-canvas{ animation:ecoOrbit 120s linear infinite; } } .hero-dark .wrap { position:relative; z-index:2; } .hero-inner { max-width:880px; } .hero-badge { display:inline-flex; align-items:center; gap:9px; padding:7px 14px; border:1px solid rgba(255,255,255,.16); border-radius:100px; background:rgba(255,255,255,.04); font-family:var(--font-mono); font-size:0.74rem; letter-spacing:0.1em; color:var(--teal); text-transform:uppercase; } .hero-dark .display { margin:var(--s6) 0 var(--s5); color:#fff; } .hero-dark .lead { max-width:660px; } .hero-cta { display:flex; gap:var(--s3); flex-wrap:wrap; margin-top:var(--s7); } .trust-bar { display:flex; flex-wrap:wrap; gap:var(--s6); margin-top:var(--s8); padding-top:var(--s6); border-top:1px solid rgba(255,255,255,.1); } .trust-item { display:flex; align-items:center; gap:10px; color:#C3D2E0; font-size:0.92rem; font-weight:500; } .trust-item svg { width:18px; height:18px; color:var(--cta); flex:none; } /* ---------- OUTCOMES ---------- */ .outcome { padding:var(--s6) 0 var(--s5); border-top:2px solid var(--accent); } .outcome .ostat { font-family:var(--font-display); font-weight:700; font-size:clamp(2.2rem,3.4vw,3rem); letter-spacing:-0.03em; color:var(--text); line-height:1; } .outcome .ostat .unit { color:var(--cta-ink); } .outcome h3 { font-size:1.06rem; margin:var(--s4) 0 6px; font-weight:600; } .outcome p { font-size:0.92rem; color:var(--text-3); } /* ---------- ARCHITECTURE ORBIT ---------- */ .arch { display:grid; grid-template-columns:1fr 1fr; gap:var(--s8); align-items:center; } @media (max-width:920px){ .arch{ grid-template-columns:1fr; } } .orbit { position:relative; width:100%; max-width:480px; aspect-ratio:1/1; margin-inline:auto; isolation:isolate; } .orbit svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; z-index:1; } /* concentric depth rings */ .orbit-ring { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); border-radius:50%; border:1px solid rgba(var(--accent-rgb),.10); pointer-events:none; z-index:0; } .orbit-ring.r2 { border-color:rgba(var(--accent-rgb),.06); } .orbit-ring.r3 { border-color:rgba(var(--accent-rgb),.035); } /* connecting spokes — dim by default (base stroke set with the palette rules), light up the active one */ .orbit svg path.flow { transition:stroke .25s, stroke-width .25s; } .orbit svg path.flow.active { stroke:rgba(var(--accent-rgb),.85); stroke-width:.7; filter:drop-shadow(0 0 2px rgba(var(--accent-rgb),.7)); } .orbit-core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:150px; height:150px; border-radius:50%; display:grid; place-items:center; text-align:center; background:radial-gradient(circle at 50% 32%, var(--navy-2), var(--navy) 72%); border:1px solid rgba(var(--accent-rgb),.45); color:#fff; z-index:3; box-shadow:inset 0 0 0 1px rgba(255,255,255,.06), inset 0 14px 30px -14px rgba(255,255,255,.22), var(--shadow-lg); font-family:var(--font-display); font-weight:700; font-size:0.98rem; padding:10px; } .orbit-core .globe { position:absolute; inset:0; width:100%; height:100%; border-radius:50%; z-index:1; pointer-events:none; overflow:visible; } /* label rides on the globe surface — scrolls around it (wraps at the limbs), masked to the sphere */ .orbit-core .oc-scroll { position:absolute; inset:0; border-radius:50%; z-index:2; overflow:hidden; display:flex; align-items:center; -webkit-mask:linear-gradient(90deg, transparent 3%, #000 27%, #000 73%, transparent 97%); mask:linear-gradient(90deg, transparent 3%, #000 27%, #000 73%, transparent 97%); } .orbit-core .oc-track { display:flex; align-items:center; animation:ocAround 17s linear infinite; will-change:transform; } .orbit-core .oc-label { flex:none; padding:0 34px; white-space:nowrap; text-align:center; font-family:var(--font-display); font-weight:700; font-size:0.92rem; color:#fff; text-shadow:0 1px 6px rgba(0,0,0,.6); } @keyframes ocAround { from { transform:translateX(-50%); } to { transform:translateX(0); } } /* soft breathing glow behind the core */ .orbit-core::before { content:""; position:absolute; left:50%; top:50%; width:195%; height:195%; transform:translate(-50%,-50%); border-radius:50%; z-index:-1; background:radial-gradient(circle, rgba(var(--accent-rgb),.30) 0%, rgba(var(--accent-rgb),.10) 38%, transparent 68%); filter:blur(6px); animation:orbitBreathe 5.5s ease-in-out infinite; } @keyframes orbitBreathe { 0%,100% { opacity:.55; transform:translate(-50%,-50%) scale(.92); } 50% { opacity:1; transform:translate(-50%,-50%) scale(1.08); } } .orbit-node { position:absolute; transform:translate(-50%,-50%); z-index:2; display:flex; align-items:center; gap:8px; padding:9px 14px; border-radius:100px; background:var(--surface); border:1px solid var(--border-2); box-shadow:var(--shadow-sm); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px); font-size:0.82rem; font-weight:600; white-space:nowrap; color:var(--text); cursor:default; transition:border-color .25s, transform .25s, box-shadow .25s, background .25s, color .25s; } .orbit-node .od { width:7px; height:7px; border-radius:50%; background:var(--accent); flex:none; transition:box-shadow .25s, background .25s; } .orbit-node:hover, .orbit-node.active { border-color:var(--accent); background:rgba(var(--accent-rgb),.14); color:#fff; transform:translate(-50%,-50%) scale(1.06); box-shadow:0 0 0 1px rgba(var(--accent-rgb),.5), 0 12px 30px -10px rgba(var(--accent-rgb),.55), 0 0 24px -6px rgba(var(--accent-rgb),.6); } .orbit-node:hover .od, .orbit-node.active .od { background:var(--accent); animation:odPulse 1.7s ease-in-out infinite; } @keyframes odPulse { 0%,100% { box-shadow:0 0 0 0 rgba(var(--accent-rgb),.55); } 50% { box-shadow:0 0 0 5px rgba(var(--accent-rgb),0); } } @media (prefers-reduced-motion:reduce){ .orbit-core::before { animation:none; } .orbit-core::after { animation:none; } .orbit-core .oc-track { animation:none; } .orbit-node:hover .od, .orbit-node.active .od { animation:none; } } .arch-list { list-style:none; padding:0; } .arch-list li { padding:18px 0; border-bottom:1px solid var(--border); cursor:pointer; transition:padding-left .25s; } .arch-list li:last-child { border-bottom:0; } .arch-list li.active { padding-left:14px; } .arch-list li.active .al-title { color:var(--accent-ink); } .al-title { font-family:var(--font-display); font-weight:600; font-size:1.12rem; color:var(--text); display:flex; align-items:center; gap:12px; transition:color .25s; } .al-title .alnum { font-family:var(--font-mono); font-size:0.78rem; color:var(--accent-ink); } .al-desc { font-size:0.95rem; color:var(--text-3); margin-top:6px; max-height:0; overflow:hidden; transition:max-height .35s ease, margin .35s ease; } .arch-list li.active .al-desc { max-height:80px; margin-top:8px; } /* ---------- INDUSTRY CARDS ---------- */ .ind-card { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); padding:var(--s6); transition:transform .3s, box-shadow .3s, border-color .3s; overflow:hidden; position:relative; } .ind-card:hover { transform:translateY(-5px); box-shadow:var(--shadow-md); border-color:var(--accent); } .ind-card .ind-ic { width:44px; height:44px; display:grid; place-items:center; border-radius:11px; background:var(--navy); color:var(--teal); margin-bottom:var(--s5); } .ind-card:hover .ind-ic { background:var(--teal); color:var(--on-accent); } .ind-card .ind-ic svg { width:22px; height:22px; } .ind-card h3 { font-size:1.1rem; margin-bottom:10px; } .ind-card .ind-row { font-size:0.88rem; color:var(--text-3); display:flex; gap:8px; padding:4px 0; } .ind-card .ind-row b { color:var(--accent-ink); font-weight:600; font-family:var(--font-mono); font-size:0.72rem; letter-spacing:0.04em; text-transform:uppercase; flex:none; width:74px; padding-top:2px; } /* ---------- ECOSYSTEM ---------- */ .eco { position:relative; width:100%; max-width:620px; aspect-ratio:1/1; margin-inline:auto; overflow:visible; } .eco-orbit-svg { position:absolute; inset:0; width:100%; height:100%; overflow:visible; } .eco .eco-core { position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); background:transparent; border-radius:12px; padding:0; z-index:3; display:grid; place-items:center; } /* Orbital ring */ .eco-ring { position:absolute; inset:0; transform-origin:50% 50%; animation:ecoOrbit 120s linear infinite; z-index:2; overflow:visible; } .eco .eco-spoke { position:absolute; left: 50%; top: 8%; transform: translate(-50%,-50%); border-radius:10px; padding:11px 20px; min-width:140px; text-align:center; font-size:0.96rem; font-weight:700; white-space:nowrap; letter-spacing:0.005em; /* clear glass panel — transparent, glossy edge, minimal blur */ background:linear-gradient(135deg, rgba(255,255,255,0.30) 0%, rgba(255,255,255,0.08) 45%, rgba(255,255,255,0.16) 100%); -webkit-backdrop-filter:blur(1.5px) saturate(120%); backdrop-filter:blur(1.5px) saturate(120%); border:1px solid rgba(255,255,255,0.6); z-index:2; cursor:default; transition:filter .25s, background .25s; box-shadow:0 6px 18px rgba(8,15,30,0.10), inset 0 1px 0 rgba(255,255,255,0.85), inset 0 -1px 2px rgba(8,15,30,0.04); animation: ecoCounter 120s linear infinite; } /* label: blue → green gradient, matching the logo's "N" */ .eco .eco-spoke .lbl { background:linear-gradient(100deg, #16384F 0%, #1F6B86 42%, #2C8C55 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; color:#1A4A66; } /* strike glow — edge-only halo in the lightning colour (teal-green) */ .eco .eco-spoke::after { content:""; position:absolute; inset:-1px; border-radius:11px; pointer-events:none; opacity:0; border:1px solid #8CFFEA; box-shadow:0 0 20px 3px rgba(37,214,168,0.9), 0 0 0 1px rgba(37,214,168,0.7); } .eco .eco-spoke.zap { filter:brightness(1.12); } .eco .eco-spoke.zap::after { animation:zapFlash 1.2s ease-out; } @supports (left: calc(50% + cos(0deg) * 1%)) { .eco .eco-spoke { left: calc(50% + cos(var(--ea,0deg)) * 38%); top: calc(50% + sin(var(--ea,0deg)) * 38%); } } .eco .eco-spoke:hover { filter:brightness(1.06); } @keyframes ecoOrbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } @keyframes ecoCounter { from { transform: translate(-50%,-50%) rotate(0deg); } to { transform: translate(-50%,-50%) rotate(-360deg); } } /* Lightning strike: brief double-flicker, triggered one spoke at a time via JS (.zap) */ @keyframes zapFlash { 0% { opacity:0; } 8% { opacity:1; } 18% { opacity:0.3; } 28% { opacity:1; } 65% { opacity:0.85; } /* lingers, stays lit */ 100% { opacity:0; } } /* Lightning bolt: jagged path drawn from the core out to the struck spoke (animated via JS / WAAPI) */ .eco-bolt-svg { position:absolute; inset:0; width:100%; height:100%; z-index:4; pointer-events:none; overflow:visible; } .eco-bolt-svg path { fill:none; stroke:#F4FFFB; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; opacity:0; filter:drop-shadow(0 0 2px rgba(224,255,246,0.9)) drop-shadow(0 0 6px rgba(37,214,168,0.65)) drop-shadow(0 0 12px rgba(37,214,168,0.32)); } @media (prefers-reduced-motion:reduce){ .eco-ring { animation:ecoOrbit 120s linear infinite; } .eco .eco-spoke { animation:ecoOrbit 120s linear infinite; } } .flow-dot { fill:var(--teal); } /* ---------- INNOVATION ---------- */ .innov-chip { display:flex; align-items:center; gap:14px; padding:18px 22px; border-radius:var(--radius-lg); background:var(--surface); border:1px solid var(--border); transition:border-color .3s, transform .3s; } .innov-chip:hover { border-color:var(--accent); transform:translateX(4px); } .innov-chip .ic-dot { width:36px; height:36px; border-radius:9px; background:rgba(var(--accent-rgb),.14); color:var(--accent-ink); display:grid; place-items:center; flex:none; } .innov-chip .ic-dot svg { width:19px; height:19px; } .innov-chip span { font-weight:600; color:var(--text); font-size:1rem; } /* ---------- GRADIENT CTA ---------- */ .cta-grand { position:relative; overflow:hidden; text-align:center; color:#fff; background:radial-gradient(120% 140% at 50% 0%, var(--navy-2) 0%, var(--navy) 50%, var(--navy-3) 100%); } .cta-grand::after { content:""; position:absolute; left:50%; top:-30%; width:60%; height:80%; transform:translateX(-50%); background:radial-gradient(circle, var(--glow-teal) 0%, transparent 70%); pointer-events:none; } .cta-grand .wrap { position:relative; z-index:2; } /* ---------- UTIL ---------- */ .text-center { text-align:center; } .mx-auto { margin-inline:auto; } .flex { display:flex; } .wrap-chips { display:flex; flex-wrap:wrap; gap:var(--s3); } .col-list { list-style:none; padding:0; } .col-list li { display:flex; gap:var(--s3); padding:11px 0; border-bottom:1px solid var(--border); font-size:0.98rem; color:var(--text-2); align-items:flex-start; } .col-list li:last-child { border-bottom:0; } .col-list li svg { width:17px; height:17px; color:var(--accent-ink); flex:none; margin-top:3px; } /* ============================================================ PALETTE VARIANTS (live-switchable via [data-palette]) ============================================================ */ :root[data-palette="purple"]{--teal:#6C3AE8;--teal-2:#5A2FD0;--teal-soft:#ECE4FF;--accent-rgb:108,58,232;--cta:#6C3AE8;--cta-ink:#5A2FD0;--on-cta:#FFFFFF;--cta-rgb:108,58,232;} [data-theme="dark"][data-palette="purple"]{--accent:#9B6BFF;--accent-ink:#B79BFF;--accent-rgb:155,107,255;--cta:#8E5BFF;--cta-ink:#B79BFF;--on-cta:#FFFFFF;--cta-rgb:142,91,255;} :root[data-palette="steel"]{--teal:#4A90D9;--teal-2:#2F6FB5;--teal-soft:#E1EDF9;--accent-rgb:74,144,217;--cta:#2F6FB5;--cta-ink:#2F6FB5;--on-cta:#FFFFFF;--cta-rgb:47,111,181;} [data-theme="dark"][data-palette="steel"]{--accent:#6FA8E6;--accent-ink:#94C0EE;--accent-rgb:111,168,230;--cta:#5E9BE0;--cta-ink:#94C0EE;--on-cta:#06121F;--cta-rgb:94,155,224;} :root[data-palette="neon"]{--navy:#0A0A0A;--navy-2:#161616;--navy-3:#040404;--teal:#00FF88;--teal-2:#00A85C;--teal-soft:#D6FFE9;--accent-rgb:0,255,136;--cta:#00FF88;--cta-ink:#00A85C;--on-cta:#052012;--cta-rgb:0,255,136;} [data-theme="dark"][data-palette="neon"]{--accent:#00FF88;--accent-ink:#3DFFA3;--accent-rgb:0,255,136;--cta:#00FF88;--cta-ink:#3DFFA3;--on-cta:#052012;--cta-rgb:0,255,136;} /* diagram strokes follow the palette */ .orbit svg g{stroke:rgba(var(--accent-rgb),0.18);} .eco svg g{stroke:var(--border-2);} /* ---------- PALETTE SWITCHER ---------- */ .palette-toggle{width:38px;height:38px;display:grid;place-items:center;border:1px solid var(--border-2);border-radius:var(--radius);background:var(--surface);transition:border-color .2s;} .palette-toggle:hover{border-color:var(--accent);} .palette-toggle .pt-dot{width:15px;height:15px;border-radius:50%;background:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),0.2);transition:background .3s,box-shadow .3s;} .palette-pop{position:fixed;z-index:120;background:var(--surface);border:1px solid var(--border);border-radius:14px;box-shadow:var(--shadow-lg);padding:8px;min-width:182px;transform:translateY(-8px);opacity:0;pointer-events:none;transition:opacity .2s,transform .2s;} .palette-pop.open{opacity:1;transform:none;pointer-events:auto;} .palette-pop .ph{font-family:var(--font-mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;color:var(--text-3);padding:6px 10px 8px;} .pal-opt{width:100%;display:flex;align-items:center;gap:11px;padding:9px 10px;border-radius:9px;border:0;background:transparent;color:var(--text);font-family:var(--font-body);font-weight:600;font-size:.9rem;text-align:left;cursor:pointer;transition:background .15s;} .pal-opt:hover{background:var(--band);} .pal-opt .sw{width:18px;height:18px;border-radius:50%;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.12);} .pal-opt.active{background:var(--band);} .pal-opt.active::after{content:"";width:7px;height:7px;border-radius:50%;margin-left:auto;background:var(--accent);}