/* ============================================================================ N8E Labs — Static Website Stylesheet Implements 02_DESIGN_SYSTEM.md: dual neon "Grid" theme (Crimson + Cyan), switched via [data-theme] on . Near-black base; only the accent layer changes. Built dependency-free (no framework) to ship as a pure static site. ========================================================================== */ /* ---------- 1. Design tokens -------------------------------------------- */ :root, [data-theme="crimson"] { --bg-900:#05060A; --bg-800:#0A0C12; --bg-700:#11141C; --bg-650:#151926; --bg-600:#1A1E2A; --bg-550:#222838; --grid-line:rgba(255,255,255,.04); --text-hi:#F4F6FB; --text-mid:#C2C8D6; --text-lo:#7C8499; --ok:#3DDC97; --warn:#FFB454; --err:#FF5C72; --accent:#FF2E3F; --accent-2:#FF6470; --accent-deep:#B3121F; --accent-contrast:#FFFFFF; --accent-rgb:255,46,63; --glow:0 0 24px rgba(255,46,63,.55); --glow-soft:0 0 12px rgba(255,46,63,.30); --grad:linear-gradient(135deg,#FF2E3F 0%,#FF6470 100%); --radius:14px; --radius-lg:22px; --radius-sm:9px; --maxw:1200px; --ease-grid:cubic-bezier(.2,.8,.2,1); --dur-fast:160ms; --dur:320ms; --dur-slow:640ms; --nav-h:72px; --font-display:"Space Grotesk",ui-sans-serif,system-ui,"Segoe UI",sans-serif; --font-sans:"Inter",ui-sans-serif,system-ui,"Segoe UI",Arial,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,"Cascadia Code",Consolas,monospace; } [data-theme="cyan"] { --accent:#1FE0E0; --accent-2:#6FF6FF; --accent-deep:#0A8E97; --accent-contrast:#04121A; --accent-rgb:31,224,224; --glow:0 0 24px rgba(31,224,224,.55); --glow-soft:0 0 12px rgba(31,224,224,.30); --grad:linear-gradient(135deg,#1FE0E0 0%,#6FF6FF 100%); } /* ---------- 2. Reset & base --------------------------------------------- */ *,*::before,*::after{box-sizing:border-box;} *{margin:0;} html{ scroll-behavior:smooth; -webkit-text-size-adjust:100%; background:var(--bg-900); } body{ font-family:var(--font-sans); background:transparent; /* html holds the dark base; #ambientCanvas drifts behind */ color:var(--text-mid); line-height:1.65; font-size:1rem; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; overflow-x:hidden; min-height:100vh; } img,svg,canvas{display:block;max-width:100%;} img{height:auto;} a{color:var(--accent-2);text-decoration:none;transition:color var(--dur-fast) var(--ease-grid);} a:hover{color:var(--accent);} ul,ol{list-style:none;padding:0;} button{font-family:inherit;cursor:pointer;border:none;background:none;color:inherit;} input,textarea,select{font-family:inherit;font-size:1rem;color:inherit;} :focus{outline:none;} :focus-visible{ outline:2px solid var(--accent); outline-offset:3px; border-radius:4px; } ::selection{background:rgba(var(--accent-rgb),.32);color:var(--text-hi);} hr{border:none;border-top:1px solid var(--bg-600);} /* logo theme-tint: native red in crimson, hue-shifted toward cyan in cyan */ [data-theme="cyan"] .logo-tint{filter:hue-rotate(158deg) saturate(1.18) brightness(1.12);} /* ---------- 3. Accessibility helpers ------------------------------------ */ .sr-only{ position:absolute;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0; } .skip-link{ position:fixed;top:-100px;left:16px;z-index:2000; background:var(--accent);color:var(--accent-contrast); padding:10px 18px;border-radius:0 0 var(--radius-sm) var(--radius-sm); font-weight:600;font-family:var(--font-mono);font-size:.85rem; transition:top var(--dur) var(--ease-grid); } .skip-link:focus{top:0;color:var(--accent-contrast);} /* ---------- 4. Layout --------------------------------------------------- */ .container{width:100%;max-width:var(--maxw);margin-inline:auto;padding-inline:24px;} .container-wide{max-width:1360px;} .section{padding-block:clamp(64px,9vw,128px);position:relative;} .section-sm{padding-block:clamp(48px,6vw,80px);} .section + .section{padding-top:0;} .divider{height:1px;background:linear-gradient(90deg,transparent,var(--bg-600),transparent);} .grid-bg{position:relative;} .grid-bg::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:48px 48px; -webkit-mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 40%,transparent 100%); mask-image:radial-gradient(ellipse 90% 70% at 50% 30%,#000 40%,transparent 100%); } .grid-bg > *{position:relative;z-index:1;} .glow-orb{ position:absolute;border-radius:50%;pointer-events:none;z-index:0; background:radial-gradient(circle,rgba(var(--accent-rgb),.18),transparent 70%); filter:blur(40px); } /* ---------- 5. Typography ----------------------------------------------- */ h1,h2,h3,h4,h5{font-family:var(--font-display);color:var(--text-hi);line-height:1.08;font-weight:600;letter-spacing:-.01em;} .display{font-size:clamp(2.6rem,6vw,5.25rem);line-height:1.02;letter-spacing:-.025em;font-weight:600;} h1,.h1{font-size:clamp(2.15rem,4.5vw,3.5rem);line-height:1.05;} h2,.h2{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.1;} h3,.h3{font-size:clamp(1.3rem,2vw,1.6rem);} h4,.h4{font-size:1.18rem;} .lead{font-size:clamp(1.05rem,1.6vw,1.3rem);line-height:1.55;color:var(--text-mid);} .body-lg{font-size:1.125rem;line-height:1.6;} .muted{color:var(--text-lo);} .hi{color:var(--text-hi);} .accent{color:var(--accent-2);} .balance{text-wrap:balance;} p{max-width:68ch;} .kicker{ font-family:var(--font-mono);text-transform:uppercase; letter-spacing:.14em;color:var(--accent);font-size:.78rem;font-weight:500; display:inline-flex;align-items:center;gap:.5em; } .mono{font-family:var(--font-mono);} .section-head{max-width:54rem;margin-bottom:clamp(32px,5vw,56px);} .section-head .kicker{margin-bottom:14px;} .section-head p{margin-top:16px;} .center{text-align:center;margin-inline:auto;} .center p{margin-inline:auto;} /* gradient text */ .grad-text{ background:var(--grad);-webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } /* ---------- 6. Buttons -------------------------------------------------- */ .btn{ --b:0; display:inline-flex;align-items:center;justify-content:center;gap:.55em; min-height:48px;padding:0 26px;border-radius:var(--radius-sm); font-family:var(--font-mono);font-size:.92rem;font-weight:500;letter-spacing:.02em; text-transform:uppercase; transition:transform var(--dur-fast) var(--ease-grid), box-shadow var(--dur) var(--ease-grid), background var(--dur) var(--ease-grid), color var(--dur) var(--ease-grid), border-color var(--dur) var(--ease-grid); position:relative;white-space:nowrap; transform:translate(calc(var(--mx,0)*1px),calc(var(--my,0)*1px)); } .btn svg{width:1.05em;height:1.05em;} .btn-primary{background:var(--grad);color:var(--accent-contrast);box-shadow:var(--glow-soft);} .btn-primary:hover{color:var(--accent-contrast);box-shadow:var(--glow);transform:translateY(-2px);} .btn-secondary{border:1px solid var(--accent);color:var(--accent-2);background:rgba(var(--accent-rgb),.04);} .btn-secondary:hover{background:rgba(var(--accent-rgb),.14);color:var(--text-hi);box-shadow:var(--glow-soft);} .btn-ghost{color:var(--text-mid);padding-inline:14px;} .btn-ghost:hover{color:var(--accent-2);} .btn-lg{min-height:54px;padding:0 32px;font-size:1rem;} .btn-block{display:flex;width:100%;} .btn:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:none;} .btn-group{display:flex;flex-wrap:wrap;gap:14px;} /* ---------- 7. Nav ------------------------------------------------------ */ .scroll-progress{ position:fixed;top:0;left:0;height:3px;width:0;z-index:1200; background:var(--grad);box-shadow:var(--glow-soft); transition:width 80ms linear; } .nav{ position:fixed;top:0;left:0;right:0;z-index:1100;height:var(--nav-h); display:flex;align-items:center; transition:background var(--dur) var(--ease-grid), border-color var(--dur) var(--ease-grid), backdrop-filter var(--dur) var(--ease-grid); border-bottom:1px solid transparent; } .nav.scrolled{ background:rgba(8,10,16,.72); backdrop-filter:blur(14px) saturate(1.2); -webkit-backdrop-filter:blur(14px) saturate(1.2); border-bottom-color:var(--bg-600); } .nav .container{display:flex;align-items:center;gap:18px;} .brand{display:flex;align-items:center;gap:11px;flex-shrink:0;} .brand img{width:38px;height:38px;} .brand-name{font-family:var(--font-display);font-weight:600;font-size:1.15rem;color:var(--text-hi);letter-spacing:-.01em;line-height:1;} .brand-name b{color:var(--accent);font-weight:600;} .brand:hover .brand-name{color:var(--text-hi);} .nav-links{display:flex;align-items:center;gap:2px;margin-left:auto;} .nav-link{ position:relative;font-family:var(--font-mono);font-size:.82rem;letter-spacing:.02em; color:var(--text-mid);padding:9px 12px;border-radius:8px; transition:color var(--dur-fast) var(--ease-grid),background var(--dur-fast) var(--ease-grid); } .nav-link::after{ content:"";position:absolute;left:12px;right:12px;bottom:4px;height:2px; background:var(--accent);border-radius:2px;transform:scaleX(0);transform-origin:left; transition:transform var(--dur) var(--ease-grid);box-shadow:var(--glow-soft); } .nav-link:hover{color:var(--text-hi);} .nav-link:hover::after,.nav-link[aria-current="page"]::after{transform:scaleX(1);} .nav-link[aria-current="page"]{color:var(--accent-2);} .nav-right{display:flex;align-items:center;gap:12px;margin-left:14px;flex-shrink:0;} /* theme toggle */ .theme-toggle{ position:relative;width:62px;height:32px;border-radius:999px;flex-shrink:0; border:1px solid var(--bg-550);background:var(--bg-800); transition:border-color var(--dur),box-shadow var(--dur); } .theme-toggle:hover{border-color:var(--accent);box-shadow:var(--glow-soft);} .theme-toggle .dot{position:absolute;top:50%;width:12px;height:12px;border-radius:50%; transform:translateY(-50%);transition:opacity var(--dur);} .theme-toggle .dot-crimson{left:9px;background:#FF2E3F;} .theme-toggle .dot-cyan{right:9px;background:#1FE0E0;} /* the inactive colour dims so the current theme is obvious */ [data-theme="crimson"] .theme-toggle .dot-cyan{opacity:.3;} [data-theme="cyan"] .theme-toggle .dot-crimson{opacity:.3;} .theme-toggle:hover .dot{opacity:.85;} /* glowing selector ring sits over the active colour and slides on toggle */ .theme-toggle .knob{ position:absolute;top:2px;left:2px;width:26px;height:26px;border-radius:50%; background:rgba(var(--accent-rgb),.14);border:2px solid var(--accent);box-shadow:var(--glow); transition:transform var(--dur) var(--ease-grid); } [data-theme="cyan"] .theme-toggle .knob{transform:translateX(30px);} /* mobile menu controls */ .menu-toggle{display:none;width:44px;height:44px;border-radius:10px;align-items:center;justify-content:center;} .menu-toggle:hover{background:var(--bg-700);} .menu-toggle .bars{position:relative;width:22px;height:2px;background:var(--text-hi);transition:background .2s;} .menu-toggle .bars::before,.menu-toggle .bars::after{content:"";position:absolute;left:0;width:22px;height:2px;background:var(--text-hi);transition:transform var(--dur) var(--ease-grid);} .menu-toggle .bars::before{top:-7px;} .menu-toggle .bars::after{top:7px;} body.menu-open .menu-toggle .bars{background:transparent;} body.menu-open .menu-toggle .bars::before{transform:translateY(7px) rotate(45deg);} body.menu-open .menu-toggle .bars::after{transform:translateY(-7px) rotate(-45deg);} .mobile-menu{ position:fixed;inset:0;z-index:1090;background:rgba(5,6,10,.97); backdrop-filter:blur(8px); display:flex;flex-direction:column;justify-content:center;padding:90px 32px 40px; opacity:0;visibility:hidden;transform:translateY(-12px); transition:opacity var(--dur) var(--ease-grid),transform var(--dur) var(--ease-grid),visibility var(--dur); } body.menu-open .mobile-menu{opacity:1;visibility:visible;transform:none;} .mobile-menu a{ font-family:var(--font-display);font-size:clamp(1.6rem,7vw,2.4rem);color:var(--text-hi); padding:8px 0;display:flex;align-items:center;gap:14px; opacity:0;transform:translateX(-18px); } .mobile-menu a .idx{font-family:var(--font-mono);font-size:.8rem;color:var(--accent);width:2ch;} body.menu-open .mobile-menu a{animation:menuIn .45s var(--ease-grid) forwards;} .mobile-menu a[aria-current="page"]{color:var(--accent-2);} .mobile-menu .mobile-cta{margin-top:28px;} @keyframes menuIn{to{opacity:1;transform:none;}} /* ---------- 8. Hero ----------------------------------------------------- */ .hero{position:relative;min-height:min(94vh,860px);display:flex;align-items:center;padding-top:var(--nav-h);overflow:hidden;} .hero-canvas{position:absolute;inset:0;z-index:0;width:100%;height:100%;} .hero-bg-fallback{position:absolute;inset:0;z-index:0;background: radial-gradient(ellipse 70% 60% at 50% 0%,rgba(var(--accent-rgb),.10),transparent 70%), var(--bg-900);} .hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(180deg,transparent 55%,var(--bg-900) 100%);} .hero .container{position:relative;z-index:2;} .hero-inner{max-width:60rem;} .hero .display{margin:18px 0;} .hero .lead{max-width:42rem;margin-bottom:34px;} .hero-stats{display:flex;flex-wrap:wrap;gap:14px;margin-top:40px;} .hero-scroll-hint{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);z-index:2; font-family:var(--font-mono);font-size:.7rem;letter-spacing:.18em;color:var(--text-lo);text-transform:uppercase; display:flex;flex-direction:column;align-items:center;gap:8px;} .hero-scroll-hint .line{width:1px;height:34px;background:linear-gradient(var(--accent),transparent);animation:scrollPulse 1.8s var(--ease-grid) infinite;} @keyframes scrollPulse{0%,100%{opacity:.3;transform:scaleY(.6);}50%{opacity:1;transform:scaleY(1);}} /* ---------- 9. Cards & grids -------------------------------------------- */ .grid{display:grid;gap:22px;} .grid-2{grid-template-columns:repeat(2,1fr);} .grid-3{grid-template-columns:repeat(3,1fr);} .grid-4{grid-template-columns:repeat(4,1fr);} .grid-auto{grid-template-columns:repeat(auto-fit,minmax(260px,1fr));} .card{ position:relative;background:var(--bg-700); border:1px solid var(--bg-600);border-radius:var(--radius); padding:26px;transition:border-color var(--dur) var(--ease-grid), box-shadow var(--dur) var(--ease-grid),transform var(--dur) var(--ease-grid),background var(--dur); overflow:hidden; } .card::before{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none; background:radial-gradient(420px circle at var(--px,50%) var(--py,0%),rgba(var(--accent-rgb),.10),transparent 60%); opacity:0;transition:opacity var(--dur);} .card:hover{border-color:var(--accent);box-shadow:var(--glow-soft);transform:translateY(-4px);} .card:hover::before{opacity:1;} .card .card-icon{ width:46px;height:46px;border-radius:11px;display:grid;place-items:center; background:rgba(var(--accent-rgb),.10);border:1px solid rgba(var(--accent-rgb),.30); color:var(--accent);margin-bottom:18px; } .card .card-icon svg{width:23px;height:23px;} .card h3{margin-bottom:9px;} .card p{color:var(--text-mid);font-size:.97rem;} .card .card-index{position:absolute;top:18px;right:20px;font-family:var(--font-mono);font-size:.72rem;color:var(--text-lo);} .card-link{display:inline-flex;align-items:center;gap:6px;margin-top:16px;font-family:var(--font-mono);font-size:.82rem;color:var(--accent-2);} .card-link svg{width:1em;height:1em;transition:transform var(--dur);} .card:hover .card-link svg{transform:translateX(4px);} a.card{color:inherit;display:block;} a.card:hover{color:inherit;} /* node-style card for quick nodes */ .node-card{padding:30px;} .node-card .node-id{font-family:var(--font-mono);font-size:.72rem;color:var(--accent);letter-spacing:.1em;} /* ---------- 10. Stats / counters ---------------------------------------- */ .stat{ background:var(--bg-700);border:1px solid var(--bg-600);border-radius:var(--radius); padding:22px 24px;min-width:150px;position:relative;overflow:hidden; } .stat::after{content:"";position:absolute;left:24px;bottom:16px;width:0;height:2px;background:var(--accent); box-shadow:var(--glow-soft);transition:width var(--dur-slow) var(--ease-grid);} .stat.in-view::after{width:40px;} .stat-num{font-family:var(--font-mono);font-weight:600;font-size:clamp(1.9rem,3.4vw,2.7rem);color:var(--text-hi);line-height:1;letter-spacing:-.02em;} .stat-num .suffix{color:var(--accent);} .stat-label{margin-top:12px;font-size:.86rem;color:var(--text-lo);line-height:1.45;} .stat-chip{background:rgba(8,10,16,.5);backdrop-filter:blur(6px);min-width:auto;} .stats-row{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));} /* ---------- 11. Pipeline (N8E Method) ----------------------------------- */ .pipeline{display:flex;align-items:stretch;gap:0;flex-wrap:wrap;position:relative;counter-reset:pn;} .pnode{ flex:1;min-width:150px;position:relative;padding:24px 18px;text-align:center; border:1px solid var(--bg-600);border-radius:var(--radius);background:var(--bg-700); margin:8px;opacity:.45;transform:translateY(8px); transition:opacity var(--dur-slow) var(--ease-grid),transform var(--dur-slow) var(--ease-grid),border-color var(--dur),box-shadow var(--dur); } .pnode.lit{opacity:1;transform:none;border-color:var(--accent);box-shadow:var(--glow-soft);} .pnode .pn-num{counter-increment:pn;font-family:var(--font-mono);font-size:.72rem;color:var(--accent);} .pnode .pn-num::before{content:"0" counter(pn);} .pnode .pn-name{font-family:var(--font-display);font-size:1.05rem;color:var(--text-hi);margin-top:8px;} .pnode::after{content:"";position:absolute;top:50%;right:-9px;width:18px;height:2px;background:var(--bg-600);z-index:2;transition:background var(--dur);} .pnode.lit::after{background:var(--accent);box-shadow:var(--glow-soft);} .pnode:last-child::after{display:none;} @media(max-width:760px){ .pnode::after{top:auto;right:50%;bottom:-9px;width:2px;height:18px;} } /* ---------- 12. Chips / tags -------------------------------------------- */ .chips{display:flex;flex-wrap:wrap;gap:10px;} .chip{ display:inline-flex;align-items:center;gap:7px; font-family:var(--font-mono);font-size:.8rem;color:var(--text-mid); padding:8px 14px;border:1px solid var(--bg-600);border-radius:999px;background:var(--bg-700); transition:border-color var(--dur),color var(--dur),background var(--dur); } .chip:hover{border-color:var(--accent);color:var(--text-hi);} .chip.is-accent{border-color:rgba(var(--accent-rgb),.4);color:var(--accent-2);} .chip .dot{width:6px;height:6px;border-radius:50%;background:var(--accent);box-shadow:var(--glow-soft);} .tag{display:inline-block;font-family:var(--font-mono);font-size:.68rem;text-transform:uppercase;letter-spacing:.1em; padding:4px 9px;border-radius:5px;background:rgba(var(--accent-rgb),.12);color:var(--accent-2);border:1px solid rgba(var(--accent-rgb),.28);} .tag.live{background:rgba(61,220,151,.12);color:var(--ok);border-color:rgba(61,220,151,.3);} .tag.live::before{content:"● ";font-size:.7em;} .tag.next{background:rgba(255,180,84,.12);color:var(--warn);border-color:rgba(255,180,84,.3);} /* ---------- 13. Accordion ----------------------------------------------- */ .accordion{border:1px solid var(--bg-600);border-radius:var(--radius);overflow:hidden;background:var(--bg-700);} .acc-item + .acc-item{border-top:1px solid var(--bg-600);} .acc-trigger{width:100%;display:flex;align-items:center;justify-content:space-between;gap:16px; padding:20px 22px;text-align:left;font-family:var(--font-display);color:var(--text-hi);font-size:1.05rem;transition:background var(--dur);} .acc-trigger:hover{background:var(--bg-650);} .acc-trigger .acc-ic{flex-shrink:0;width:22px;height:22px;position:relative;} .acc-trigger .acc-ic::before,.acc-trigger .acc-ic::after{content:"";position:absolute;background:var(--accent);transition:transform var(--dur);} .acc-trigger .acc-ic::before{top:10px;left:0;width:22px;height:2px;} .acc-trigger .acc-ic::after{top:0;left:10px;width:2px;height:22px;} .acc-trigger[aria-expanded="true"] .acc-ic::after{transform:scaleY(0);} .acc-panel{max-height:0;overflow:hidden;transition:max-height var(--dur-slow) var(--ease-grid);} .acc-panel-inner{padding:0 22px 22px;color:var(--text-mid);} /* ---------- 14. Forms --------------------------------------------------- */ .form{display:grid;gap:20px;} .field{display:flex;flex-direction:column;gap:8px;} .field label{font-family:var(--font-mono);font-size:.78rem;text-transform:uppercase;letter-spacing:.08em;color:var(--text-lo);} .field label .req{color:var(--accent);} .field input,.field textarea,.field select{ width:100%;background:var(--bg-800);border:1px solid var(--bg-600);border-radius:var(--radius-sm); padding:13px 15px;color:var(--text-hi);transition:border-color var(--dur),box-shadow var(--dur),background var(--dur); } .field textarea{resize:vertical;min-height:130px;} .field select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%237C8499' stroke-width='2.5'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E"); background-repeat:no-repeat;background-position:right 14px center;padding-right:40px;} .field input::placeholder,.field textarea::placeholder{color:var(--text-lo);} .field input:focus,.field textarea:focus,.field select:focus{ border-color:var(--accent);box-shadow:0 0 0 3px rgba(var(--accent-rgb),.18);outline:none;background:var(--bg-800);} .field.invalid input,.field.invalid textarea,.field.invalid select{border-color:var(--err);} .field .err-msg{font-size:.8rem;color:var(--err);min-height:0;display:none;} .field.invalid .err-msg{display:block;} .form-row{display:grid;gap:20px;grid-template-columns:1fr 1fr;} @media(max-width:620px){.form-row{grid-template-columns:1fr;}} /* toast */ .toast-wrap{position:fixed;bottom:24px;right:24px;z-index:1500;display:flex;flex-direction:column;gap:10px;max-width:min(92vw,380px);} .toast{ background:var(--bg-800);border:1px solid var(--bg-550);border-left:3px solid var(--accent); border-radius:var(--radius-sm);padding:14px 18px;color:var(--text-mid);font-size:.9rem; box-shadow:0 12px 40px rgba(0,0,0,.5),var(--glow-soft); animation:toastIn .4s var(--ease-grid); } .toast.ok{border-left-color:var(--ok);} .toast.err{border-left-color:var(--err);} .toast strong{color:var(--text-hi);display:block;font-family:var(--font-display);margin-bottom:3px;} @keyframes toastIn{from{opacity:0;transform:translateX(20px);}to{opacity:1;transform:none;}} /* ---------- 15. United-Northeast map ------------------------------------ */ .ne-map-wrap{position:relative;width:100%;max-width:560px;margin-inline:auto;aspect-ratio:1/.92;} .ne-map{width:100%;height:100%;overflow:visible;} .ne-region{fill:rgba(var(--accent-rgb),.05);stroke:rgba(var(--accent-rgb),.4);stroke-width:1.4; stroke-dasharray:7 6;filter:drop-shadow(0 0 6px rgba(var(--accent-rgb),.3)); animation:regionMarch 20s linear infinite;} @keyframes regionMarch{to{stroke-dashoffset:-130;}} .ne-edge{stroke:var(--accent);stroke-width:1.4;opacity:0;stroke-dasharray:6 5; filter:drop-shadow(0 0 4px rgba(var(--accent-rgb),.6));transition:opacity var(--dur-slow);} .ne-edge.on{opacity:.55;} .ne-node{cursor:pointer;} .ne-node .nd{fill:var(--bg-700);stroke:var(--bg-550);stroke-width:1.5;transition:fill var(--dur),stroke var(--dur),r var(--dur);} .ne-node .ring{fill:none;stroke:var(--accent);stroke-width:1.5;opacity:0;transform-box:fill-box;transform-origin:center;} .ne-node.on .nd{fill:var(--accent);stroke:var(--accent-2);} .ne-node.on .ring{opacity:.7;animation:nodePulse 2.4s var(--ease-grid) infinite;} .ne-node .lbl{fill:var(--text-mid);font-family:var(--font-mono);font-size:9px;opacity:0;transition:opacity var(--dur);} .ne-node:hover .lbl,.ne-node.on .lbl{opacity:1;fill:var(--text-hi);} .ne-node.hq .nd{fill:var(--accent-2);} @keyframes nodePulse{0%{transform:scale(1);opacity:.7;}70%{transform:scale(2.4);opacity:0;}100%{opacity:0;}} .map-caption{text-align:center;margin-top:18px;font-family:var(--font-mono);font-size:.78rem;color:var(--text-lo);} .map-caption strong{color:var(--accent-2);} /* ---------- 16. Origin timeline (About) --------------------------------- */ .timeline{position:relative;max-width:760px;margin-inline:auto;padding-left:40px;} .timeline::before{content:"";position:absolute;left:11px;top:6px;bottom:6px;width:2px; background:linear-gradient(var(--accent),var(--accent-deep),transparent);} .tl-item{position:relative;padding-bottom:48px;} .tl-item:last-child{padding-bottom:0;} .tl-item::before{content:"";position:absolute;left:-34px;top:4px;width:14px;height:14px;border-radius:50%; background:var(--bg-900);border:2px solid var(--accent);box-shadow:var(--glow-soft);transition:background var(--dur),box-shadow var(--dur);} .tl-item.in-view::before{background:var(--accent);box-shadow:var(--glow);} .tl-step{font-family:var(--font-mono);font-size:.74rem;color:var(--accent);letter-spacing:.12em;text-transform:uppercase;} .tl-item h3{margin:6px 0 12px;} .tl-item p{color:var(--text-mid);} /* ---------- 17. Spine / verticals --------------------------------------- */ .spine{position:relative;display:grid;gap:18px;grid-template-columns:repeat(2,1fr);} @media(max-width:720px){.spine{grid-template-columns:1fr;}} .vertical{ background:var(--bg-700);border:1px solid var(--bg-600);border-radius:var(--radius);padding:24px; position:relative;transition:border-color var(--dur),box-shadow var(--dur),transform var(--dur); } .vertical:hover{border-color:var(--accent);box-shadow:var(--glow-soft);transform:translateY(-3px);} .vertical .v-head{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px;} .vertical h3{font-size:1.2rem;} .spine-note{margin-top:22px;font-family:var(--font-mono);font-size:.84rem;color:var(--text-lo); border-left:2px solid var(--accent);padding-left:14px;} /* ---------- 18. Values -------------------------------------------------- */ .values-grid{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));} .value{padding:22px;border:1px solid var(--bg-600);border-radius:var(--radius);background:var(--bg-700); position:relative;overflow:hidden;} .value .v-no{font-family:var(--font-mono);font-size:.72rem;color:var(--accent);} .value h3{margin:8px 0 6px;color:var(--text-hi);font-size:1.12rem;} .value p{font-size:.9rem;color:var(--text-lo);} /* ---------- 19. Team cards ---------------------------------------------- */ .team-filter{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:34px;justify-content:center;} .filter-btn{font-family:var(--font-mono);font-size:.8rem;padding:9px 16px;border-radius:999px; border:1px solid var(--bg-600);color:var(--text-mid);background:var(--bg-700);transition:all var(--dur);} .filter-btn:hover{border-color:var(--accent);color:var(--text-hi);} .filter-btn.active{background:rgba(var(--accent-rgb),.12);border-color:var(--accent);color:var(--accent-2);} .team-group{margin-bottom:48px;} .team-group-head{display:flex;align-items:center;gap:14px;margin-bottom:22px;} .team-group-head h2{font-size:1.35rem;white-space:nowrap;} .team-group-head .line{flex:1;height:1px;background:linear-gradient(90deg,var(--bg-600),transparent);} .team-group-head .count{font-family:var(--font-mono);font-size:.78rem;color:var(--text-lo);} .team-grid{display:grid;gap:18px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));} .tcard{ position:relative;text-align:left;width:100%;background:var(--bg-700); border:1px solid var(--bg-600);border-radius:var(--radius);padding:24px; transition:border-color var(--dur),box-shadow var(--dur),transform var(--dur); overflow:hidden; } .tcard::after{content:"";position:absolute;top:0;left:0;width:100%;height:100%;border-radius:inherit;pointer-events:none; background: linear-gradient(var(--grid-line) 1px,transparent 1px), linear-gradient(90deg,var(--grid-line) 1px,transparent 1px); background-size:22px 22px;opacity:.5;} .tcard:hover{border-color:var(--accent);box-shadow:var(--glow-soft);transform:translateY(-3px);} .tcard > *{position:relative;z-index:1;} .tcard .t-photo-slot{width:48px;height:48px;border-radius:11px;border:1px dashed var(--bg-550); display:grid;place-items:center;color:var(--text-lo);font-family:var(--font-mono);font-size:.62rem;margin-bottom:16px; background:rgba(255,255,255,.015);} .tcard .t-name{font-family:var(--font-display);font-size:1.5rem;line-height:1.1;color:var(--text-hi);letter-spacing:-.01em;} .tcard .t-role{font-family:var(--font-mono);font-size:.78rem;color:var(--accent-2);margin-top:8px;line-height:1.4;} .tcard{cursor:pointer;} .tcard .t-decode{display:inline-flex;align-items:center;gap:7px;margin-top:18px;font-family:var(--font-mono);font-size:.74rem;color:var(--text-lo);transition:color var(--dur);cursor:pointer;} .tcard .t-decode .chev{width:13px;height:13px;transition:transform var(--dur);} .tcard:hover .t-decode,.tcard:focus-within .t-decode{color:var(--accent);} .tcard:hover .t-decode .chev{transform:translateX(3px);} /* team member modal (centred pop-up) */ .team-modal .tm-card{position:relative;background:linear-gradient(180deg,var(--bg-800),var(--bg-700)); border:1px solid var(--bg-550);border-top:2px solid var(--accent);border-radius:var(--radius-lg); max-width:560px;width:100%;max-height:86vh;overflow:auto;padding:34px 32px; box-shadow:0 30px 80px rgba(0,0,0,.6),var(--glow-soft);animation:fsUp .4s var(--ease-grid);} .team-modal .tm-close{position:absolute;top:14px;right:14px;width:38px;height:38px;border-radius:50%; border:1px solid var(--bg-550);color:var(--accent-2);font-size:22px;line-height:1;display:grid;place-items:center; transition:background var(--dur),border-color var(--dur);} .team-modal .tm-close:hover{background:rgba(var(--accent-rgb),.14);border-color:var(--accent);} .team-modal .tm-slot{display:inline-grid;place-items:center;width:50px;height:50px;border-radius:12px; border:1px dashed var(--bg-550);color:var(--text-lo);margin-bottom:14px;background:rgba(255,255,255,.015);} .team-modal .tm-slot svg{width:24px;height:24px;} .team-modal .tm-name{font-family:var(--font-display);font-size:clamp(1.6rem,3.4vw,2.2rem);color:var(--text-hi);line-height:1.1;} .team-modal .tm-role{font-family:var(--font-mono);font-size:.84rem;color:var(--accent-2);margin-top:9px;} .team-modal .tm-bio{margin-top:20px;padding-top:20px;border-top:1px solid var(--bg-600);} .tm-bio h4{font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase;letter-spacing:.1em;color:var(--accent);margin:16px 0 7px;font-weight:500;} .tm-bio h4:first-child{margin-top:0;} .tm-bio p{font-size:.92rem;color:var(--text-mid);} .tm-bio .list-arrow li{font-size:.9rem;} .tm-bio .bio-chips{display:flex;flex-wrap:wrap;gap:6px;} .tm-bio .bio-chips span{font-family:var(--font-mono);font-size:.72rem;padding:4px 9px;border-radius:5px; background:var(--bg-800);border:1px solid var(--bg-600);color:var(--text-mid);} body.modal-open{overflow:hidden;} /* ---------- 20. Rails (Why) --------------------------------------------- */ .rails{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));} .rail{padding:20px;border:1px solid var(--bg-600);border-radius:var(--radius);background:var(--bg-700);position:relative;} .rail .r-no{font-family:var(--font-mono);font-size:.72rem;color:var(--accent);} .rail h3{margin:8px 0 6px;color:var(--text-hi);font-size:1.05rem;} .rail p{font-size:.88rem;color:var(--text-lo);} /* ---------- 21. Roles relay (Products) ---------------------------------- */ .relay{display:flex;flex-wrap:wrap;align-items:center;gap:10px;justify-content:center;} .role{display:inline-flex;flex-direction:column;align-items:center;gap:8px;padding:16px 22px;border-radius:var(--radius); border:1px solid var(--bg-600);background:var(--bg-700);min-width:108px;opacity:.5;transition:opacity var(--dur),border-color var(--dur),box-shadow var(--dur),transform var(--dur);} .role.lit{opacity:1;border-color:var(--accent);box-shadow:var(--glow-soft);transform:translateY(-3px);} .role .role-ic{width:34px;height:34px;border-radius:9px;display:grid;place-items:center;background:rgba(var(--accent-rgb),.12);color:var(--accent);} .role .role-ic svg{width:18px;height:18px;} .role .role-name{font-family:var(--font-mono);font-size:.82rem;color:var(--text-hi);} .relay-arrow{color:var(--text-lo);} /* ---------- 22. Big feature blocks -------------------------------------- */ .feature{display:grid;gap:40px;grid-template-columns:1.1fr .9fr;align-items:center;} .feature.rev{grid-template-columns:.9fr 1.1fr;} .feature.rev .feature-media{order:-1;} @media(max-width:860px){.feature,.feature.rev{grid-template-columns:1fr;}.feature.rev .feature-media{order:0;}} .media-panel{background:var(--bg-800);border:1px solid var(--bg-600);border-radius:var(--radius-lg);padding:28px;position:relative;overflow:hidden;} .media-panel.grid-bg::before{-webkit-mask-image:none;mask-image:none;opacity:.6;} /* HUD panel */ .hud{background:linear-gradient(180deg,var(--bg-800),var(--bg-700));border:1px solid var(--bg-600);border-radius:var(--radius); position:relative;padding:24px;} .hud::before,.hud::after{content:"";position:absolute;width:14px;height:14px;border:2px solid var(--accent);opacity:.7;} .hud::before{top:8px;left:8px;border-right:none;border-bottom:none;} .hud::after{bottom:8px;right:8px;border-left:none;border-top:none;} /* big quote / manifesto */ .pullquote{font-family:var(--font-display);font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.3;color:var(--text-hi); border-left:3px solid var(--accent);padding-left:24px;margin:8px 0;max-width:46ch;} .manifesto-p{font-size:clamp(1.02rem,1.4vw,1.18rem);line-height:1.7;color:var(--text-mid);margin-bottom:20px;max-width:64ch;} .manifesto-p:first-letter{} .big-motto{font-family:var(--font-mono);font-size:clamp(2rem,5vw,3.4rem);color:var(--accent);text-align:center;letter-spacing:.04em;} .big-motto small{display:block;font-size:.9rem;color:var(--text-lo);letter-spacing:.12em;margin-top:14px;text-transform:uppercase;} /* ---------- 23. CTA band ------------------------------------------------ */ .cta-band{position:relative;text-align:center;border-radius:var(--radius-lg);overflow:hidden; border:1px solid var(--bg-600);background:radial-gradient(ellipse 80% 120% at 50% 0%,rgba(var(--accent-rgb),.14),var(--bg-800)); padding:clamp(40px,7vw,72px) 24px;} .cta-band h2{margin-bottom:14px;} .cta-band .btn-group{justify-content:center;margin-top:28px;} /* ---------- 24. Trust banner / marquee ---------------------------------- */ .trust{border-block:1px solid var(--bg-600);background:var(--bg-800);overflow:hidden;} .trust-inner{display:flex;align-items:center;gap:18px;padding:18px 24px;justify-content:center;flex-wrap:wrap; font-family:var(--font-mono);font-size:.82rem;color:var(--text-lo);letter-spacing:.04em;text-align:center;} .trust-inner .sep{color:var(--accent);} /* ---------- 25. Footer -------------------------------------------------- */ .footer{position:relative;border-top:1px solid var(--bg-600);background:var(--bg-800);padding-top:64px;margin-top:80px;} .footer-grid{display:grid;gap:40px;grid-template-columns:1.6fr 1fr 1fr 1.3fr;} @media(max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;gap:32px;}} @media(max-width:520px){.footer-grid{grid-template-columns:1fr;}} .footer h2{font-family:var(--font-mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.12em;color:var(--text-lo);margin-bottom:18px;font-weight:500;} .footer-links li{margin-bottom:11px;} .footer-links a{color:var(--text-mid);font-size:.92rem;} .footer-links a:hover{color:var(--accent-2);} .footer-brand .brand{margin-bottom:16px;} .footer-brand p{font-size:.92rem;color:var(--text-lo);max-width:34ch;margin-bottom:18px;} .region-badge{display:inline-flex;align-items:center;gap:8px;font-family:var(--font-mono);font-size:.78rem;white-space:nowrap; color:var(--accent-2);border:1px solid rgba(var(--accent-rgb),.3);border-radius:999px;padding:7px 14px;background:rgba(var(--accent-rgb),.06);} .region-badge svg{width:15px;height:15px;flex-shrink:0;} .footer-contact address{font-style:normal;font-size:.92rem;color:var(--text-mid);line-height:1.7;} .footer-contact address svg{width:13px;height:13px;display:inline-block;vertical-align:-2px;opacity:.7;} .footer-contact a{color:var(--text-mid);} .footer-contact a:hover{color:var(--accent-2);} .footer-base{margin-top:56px;border-top:1px solid var(--bg-600);padding:24px 0 30px;} .footer-base .container{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:18px;} .footer-base .copy{font-size:.84rem;color:var(--text-lo);} .footer-cipher{font-family:var(--font-mono);font-size:.84rem;color:var(--text-lo);cursor:pointer;letter-spacing:.06em; border:none;background:none;transition:color var(--dur),text-shadow var(--dur);} .footer-cipher:hover{color:var(--accent);text-shadow:var(--glow-soft);} .footer-entity{font-family:var(--font-mono);font-size:.72rem;color:var(--text-lo);text-align:center;padding-bottom:24px;line-height:1.7;word-break:break-word;} .footer-legal{display:flex;gap:18px;flex-wrap:wrap;} .footer-legal a{font-size:.84rem;color:var(--text-lo);} .footer-legal a:hover{color:var(--accent-2);} .social{display:flex;gap:10px;} .social a{width:38px;height:38px;border-radius:9px;display:grid;place-items:center;border:1px solid var(--bg-600); color:var(--text-mid);transition:all var(--dur);background:var(--bg-700);} .social a:hover{border-color:var(--accent);color:var(--accent);box-shadow:var(--glow-soft);transform:translateY(-2px);} .social svg{width:18px;height:18px;} .back-to-top{position:fixed;right:22px;bottom:22px;z-index:900;width:46px;height:46px;border-radius:12px; display:grid;place-items:center;background:var(--bg-800);border:1px solid var(--bg-550);color:var(--accent); opacity:0;visibility:hidden;transform:translateY(10px);transition:all var(--dur);box-shadow:0 8px 24px rgba(0,0,0,.4);} .back-to-top.show{opacity:1;visibility:visible;transform:none;} .back-to-top:hover{border-color:var(--accent);box-shadow:var(--glow-soft);} /* ---------- 26. Cookie banner ------------------------------------------- */ .cookie{position:fixed;left:16px;right:16px;bottom:16px;z-index:1300;max-width:640px;margin-inline:auto; background:rgba(10,12,18,.92);backdrop-filter:blur(14px);border:1px solid var(--bg-550); border-top:1px solid var(--accent);border-radius:var(--radius);padding:18px 20px;box-shadow:0 18px 50px rgba(0,0,0,.55),var(--glow-soft); display:none;} .cookie.show{display:block;animation:cookieIn .5s var(--ease-grid);} @keyframes cookieIn{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}} .cookie p{font-size:.88rem;color:var(--text-mid);margin-bottom:14px;max-width:none;} .cookie .cookie-actions{display:flex;flex-wrap:wrap;gap:10px;} .cookie .btn{min-height:40px;font-size:.8rem;padding:0 16px;} .cookie-pref{display:none;} /* dialog (preferences) */ .dialog-backdrop{position:fixed;inset:0;z-index:1400;background:rgba(2,3,6,.7);backdrop-filter:blur(4px); display:none;align-items:center;justify-content:center;padding:20px;} .dialog-backdrop.show{display:flex;} .dialog{background:var(--bg-800);border:1px solid var(--bg-550);border-radius:var(--radius-lg);max-width:480px;width:100%; padding:28px;box-shadow:0 24px 70px rgba(0,0,0,.6);} .dialog h3{margin-bottom:8px;} .dialog .cat{display:flex;gap:14px;align-items:flex-start;padding:16px 0;border-bottom:1px solid var(--bg-600);} .dialog .cat:last-of-type{border-bottom:none;} .dialog .cat .cat-body{flex:1;} .dialog .cat .cat-body strong{color:var(--text-hi);font-family:var(--font-display);} .dialog .cat .cat-body p{font-size:.84rem;color:var(--text-lo);margin-top:4px;} .switch{position:relative;width:46px;height:26px;border-radius:999px;background:var(--bg-600);border:1px solid var(--bg-550);flex-shrink:0;transition:background var(--dur);} .switch[aria-checked="true"]{background:rgba(var(--accent-rgb),.4);border-color:var(--accent);} .switch::after{content:"";position:absolute;top:2px;left:2px;width:20px;height:20px;border-radius:50%;background:var(--text-mid);transition:transform var(--dur),background var(--dur);} .switch[aria-checked="true"]::after{transform:translateX(20px);background:var(--accent);} .switch[disabled]{opacity:.6;cursor:not-allowed;} /* ---------- 27. Theme glow sweep ---------------------------------------- */ .theme-sweep{position:fixed;inset:0;z-index:1600;pointer-events:none;opacity:0; background:radial-gradient(circle at var(--sx,50%) var(--sy,50%),rgba(var(--accent-rgb),.55),transparent 60%);} .theme-sweep.fire{animation:sweep .55s var(--ease-grid);} @keyframes sweep{0%{opacity:.0;clip-path:circle(0% at var(--sx) var(--sy));}30%{opacity:.9;}100%{opacity:0;clip-path:circle(160% at var(--sx) var(--sy));}} /* ---------- 28. Konami terminal overlay --------------------------------- */ .terminal{position:fixed;inset:0;z-index:1700;background:rgba(2,4,3,.96);display:none;flex-direction:column; padding:40px;font-family:var(--font-mono);color:#3DDC97;overflow:auto;} .terminal.show{display:flex;} .terminal .term-inner{max-width:760px;margin:auto;width:100%;} .terminal pre{white-space:pre-wrap;font-size:clamp(.7rem,2vw,.95rem);line-height:1.7;text-shadow:0 0 6px rgba(61,220,151,.5);} .terminal .term-close{align-self:flex-end;color:#3DDC97;border:1px solid #3DDC97;padding:8px 14px;border-radius:6px;font-size:.8rem;} .term-cursor{animation:blink 1s steps(2) infinite;} @keyframes blink{50%{opacity:0;}} /* ---------- 29. Cipher reveal card -------------------------------------- */ .cipher-card{position:fixed;left:50%;bottom:80px;transform:translateX(-50%) translateY(20px);z-index:1350; background:var(--bg-800);border:1px solid var(--accent);border-radius:var(--radius);padding:20px 24px; max-width:min(92vw,420px);box-shadow:var(--glow);opacity:0;visibility:hidden;transition:all var(--dur);} .cipher-card.show{opacity:1;visibility:visible;transform:translateX(-50%);} .cipher-card .kicker{margin-bottom:8px;} .cipher-card p{font-size:.92rem;color:var(--text-mid);} /* ---------- 30. Misc / page header -------------------------------------- */ .page-hero{position:relative;padding-top:calc(var(--nav-h) + 60px);padding-bottom:48px;overflow:hidden;} .page-hero .container{position:relative;z-index:2;} .page-hero .kicker{margin-bottom:16px;} .page-hero .display,.page-hero h1{margin-bottom:18px;max-width:18ch;} .page-hero .lead{max-width:44rem;} .eyebrow-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:24px;} .list-check li{position:relative;padding-left:30px;margin-bottom:14px;color:var(--text-mid);} .list-check li::before{content:"";position:absolute;left:0;top:9px;width:14px;height:8px;border-left:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(-45deg);} .list-arrow li{position:relative;padding-left:26px;margin-bottom:12px;color:var(--text-mid);} .list-arrow li::before{content:"→";position:absolute;left:0;color:var(--accent);font-family:var(--font-mono);} /* honesty / callout */ .callout{border:1px solid rgba(var(--accent-rgb),.3);background:rgba(var(--accent-rgb),.05);border-radius:var(--radius);padding:22px 24px;} .callout .kicker{margin-bottom:8px;} /* legal page */ .legal-layout{display:grid;grid-template-columns:240px 1fr;gap:48px;align-items:start;} @media(max-width:880px){.legal-layout{grid-template-columns:1fr;}.legal-toc{position:static;display:none;}} .legal-toc{position:sticky;top:calc(var(--nav-h) + 24px);} .legal-toc h2{font-family:var(--font-mono);font-size:.74rem;text-transform:uppercase;letter-spacing:.1em;color:var(--text-lo);margin-bottom:14px;font-weight:500;} .legal-toc li{margin-bottom:9px;} .legal-toc a{font-size:.85rem;color:var(--text-lo);} .legal-toc a:hover{color:var(--accent-2);} .legal-body{max-width:none;} .legal-body h2{font-size:1.4rem;margin:36px 0 14px;scroll-margin-top:calc(var(--nav-h) + 20px);} .legal-body h2:first-child{margin-top:0;} .legal-body p{margin-bottom:14px;color:var(--text-mid);max-width:72ch;} .legal-body ul{margin:0 0 16px;} .legal-body li{position:relative;padding-left:22px;margin-bottom:9px;color:var(--text-mid);} .legal-body li::before{content:"—";position:absolute;left:0;color:var(--accent);} .legal-body .list-label{font-weight:600;color:var(--text-hi);margin-bottom:10px;} .legal-updated{font-family:var(--font-mono);font-size:.82rem;color:var(--text-lo);margin-top:10px;} /* ---------- 30b. Forum node-unlock -------------------------------------- */ .forum-node{position:relative;width:200px;height:200px;margin-inline:auto;display:grid;place-items:center;} .forum-node svg{width:100%;height:100%;overflow:visible;} .forum-node .fn-hex{fill:none;stroke:var(--bg-550);stroke-width:2;transition:stroke var(--dur-slow),filter var(--dur-slow);} .forum-node .fn-core{fill:var(--bg-600);transition:fill var(--dur-slow);} .forum-node .fn-ring{fill:none;stroke:var(--accent);stroke-width:2;opacity:0;transform-box:fill-box;transform-origin:center;} .forum-node .fn-lock{stroke:var(--text-lo);transition:opacity var(--dur);} .forum-node.on .fn-hex{stroke:var(--accent);filter:drop-shadow(0 0 10px rgba(var(--accent-rgb),.7));} .forum-node.on .fn-core{fill:var(--accent);} .forum-node.on .fn-lock{opacity:0;} .forum-node.on .fn-ring{opacity:.7;animation:nodePulse 2.2s var(--ease-grid) infinite;} .forum-status{font-family:var(--font-mono);font-size:.82rem;color:var(--text-lo);text-align:center;margin-top:16px;} .forum-status #waitCount{color:var(--accent-2);font-weight:600;} /* ---------- 30c. 404 / "lost in the grid" ------------------------------- */ .error-404{min-height:100vh;display:flex;align-items:center;text-align:center;padding-top:var(--nav-h);} .error-inner{max-width:780px;margin-inline:auto;display:flex;flex-direction:column;align-items:center;gap:20px;} .error-inner .lead{max-width:54ch;margin-inline:auto;} .error-inner .btn-group{justify-content:center;} .error-404 .scanlines{position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.45; background:repeating-linear-gradient(180deg,transparent 0 2px,rgba(0,0,0,.22) 2px 3px); animation:scanDrift 9s linear infinite;} @keyframes scanDrift{from{background-position:0 0;}to{background-position:0 120px;}} .glitch{position:relative;font-family:var(--font-display);font-weight:700; font-size:clamp(5.5rem,27vw,15rem);line-height:.84;letter-spacing:-.045em;color:var(--text-hi); text-shadow:0 0 40px rgba(var(--accent-rgb),.45);user-select:none;} .glitch::before,.glitch::after{content:attr(data-text);position:absolute;top:0;left:0;width:100%;height:100%; background:var(--bg-900);clip-path:inset(0 0 100% 0);} .glitch::before{color:var(--accent);text-shadow:3px 0 var(--accent-deep);animation:glitchTop 3.2s steps(2) infinite;} .glitch::after{color:var(--accent-2);text-shadow:-3px 0 rgba(var(--accent-rgb),.7);animation:glitchBot 2.7s steps(2) infinite;} @keyframes glitchTop{ 0%,100%{clip-path:inset(0 0 92% 0);transform:translateX(0);} 14%{clip-path:inset(8% 0 78% 0);transform:translateX(-4px);} 28%{clip-path:inset(24% 0 60% 0);transform:translateX(4px);} 42%{clip-path:inset(4% 0 88% 0);transform:translateX(-2px);} 56%{clip-path:inset(38% 0 50% 0);transform:translateX(3px);} 70%{clip-path:inset(12% 0 74% 0);transform:translateX(-3px);} } @keyframes glitchBot{ 0%,100%{clip-path:inset(82% 0 0 0);transform:translateX(0);} 16%{clip-path:inset(58% 0 18% 0);transform:translateX(4px);} 32%{clip-path:inset(70% 0 8% 0);transform:translateX(-4px);} 48%{clip-path:inset(50% 0 32% 0);transform:translateX(2px);} 64%{clip-path:inset(88% 0 2% 0);transform:translateX(-3px);} 80%{clip-path:inset(64% 0 14% 0);transform:translateX(3px);} } .term-readout{font-family:var(--font-mono);font-size:clamp(.72rem,2.1vw,.92rem);color:var(--text-mid); line-height:2;text-align:left;border:1px solid var(--bg-600);border-radius:var(--radius-sm); background:rgba(8,10,16,.55);padding:14px 18px;backdrop-filter:blur(5px);max-width:min(92vw,460px); box-shadow:var(--glow-soft);} .term-readout .t-prompt{color:var(--ok);} .term-readout .t-path{color:var(--accent-2);word-break:break-all;} .term-readout .t-fail{color:var(--err);} .term-readout .term-cursor{color:var(--accent);} .reroute{display:flex;flex-wrap:wrap;gap:10px;justify-content:center;align-items:center;margin-top:6px;} .reroute .reroute-label{flex-basis:100%;font-family:var(--font-mono);font-size:.7rem;text-transform:uppercase; letter-spacing:.16em;color:var(--text-lo);margin-bottom:4px;} .reroute a{font-family:var(--font-mono);font-size:.8rem;padding:8px 15px;border:1px solid var(--bg-600); border-radius:999px;color:var(--text-mid);background:var(--bg-700);transition:border-color var(--dur),color var(--dur),box-shadow var(--dur);} .reroute a:hover{border-color:var(--accent);color:var(--accent-2);box-shadow:var(--glow-soft);} @media (prefers-reduced-motion: reduce){ .glitch::before,.glitch::after{display:none;} .error-404 .scanlines{animation:none;opacity:.25;} } /* ---------- 31. Reveal animation ---------------------------------------- */ .reveal{opacity:0;transform:translateY(22px);transition:opacity .7s var(--ease-grid),transform .7s var(--ease-grid);} .reveal.in-view{opacity:1;transform:none;} .reveal-stagger > *{opacity:0;transform:translateY(20px);transition:opacity .6s var(--ease-grid),transform .6s var(--ease-grid);} .reveal-stagger.in-view > *{opacity:1;transform:none;} .reveal-stagger.in-view > *:nth-child(1){transition-delay:.04s;} .reveal-stagger.in-view > *:nth-child(2){transition-delay:.10s;} .reveal-stagger.in-view > *:nth-child(3){transition-delay:.16s;} .reveal-stagger.in-view > *:nth-child(4){transition-delay:.22s;} .reveal-stagger.in-view > *:nth-child(5){transition-delay:.28s;} .reveal-stagger.in-view > *:nth-child(6){transition-delay:.34s;} .reveal-stagger.in-view > *:nth-child(7){transition-delay:.40s;} .reveal-stagger.in-view > *:nth-child(8){transition-delay:.46s;} /* ---------- 32. Responsive nav ------------------------------------------ */ @media(max-width:1080px){ .nav-links{display:none;} .menu-toggle{display:flex;} .nav-right .nav-cta{display:none;} } @media(min-width:1081px){ .mobile-menu{display:none;} } @media(max-width:680px){ .grid-2,.grid-3,.grid-4{grid-template-columns:1fr;} .feature{gap:28px;} .container{padding-inline:18px;} .footer-base .container{flex-direction:column;align-items:flex-start;} } @media(min-width:681px) and (max-width:980px){ .grid-3,.grid-4{grid-template-columns:repeat(2,1fr);} } /* utilities */ .mt-0{margin-top:0;}.mt-1{margin-top:8px;}.mt-2{margin-top:16px;}.mt-3{margin-top:24px;}.mt-4{margin-top:32px;}.mt-5{margin-top:48px;} .mb-2{margin-bottom:16px;}.mb-3{margin-bottom:24px;} .flex{display:flex;}.flex-wrap{flex-wrap:wrap;}.items-center{align-items:center;}.gap-2{gap:16px;}.gap-3{gap:24px;} .text-center{text-align:center;} .maxw-sm{max-width:540px;}.maxw-md{max-width:720px;} .relative{position:relative;} /* ---------- 33. Reduced motion ------------------------------------------ */ @media (prefers-reduced-motion: reduce){ *,*::before,*::after{ animation-duration:.001ms !important;animation-iteration-count:1 !important; transition-duration:.001ms !important;scroll-behavior:auto !important; } html{scroll-behavior:auto;} .reveal,.reveal-stagger > *{opacity:1 !important;transform:none !important;} .pnode,.role{opacity:1 !important;transform:none !important;} .ne-edge{opacity:.5 !important;} .hero-scroll-hint .line{animation:none;} } /* ============================================================================ 34. Ambient motion, GridFloor, HUD scanner, radar, seismograph, form success GridCN-flavoured effects layered per page. All motion is gated on prefers-reduced-motion (the JS skips creating these under reduce). ========================================================================== */ /* site-wide drifting particle field, behind all content */ #ambientCanvas{position:fixed;inset:0;width:100%;height:100%;z-index:-1;pointer-events:none;opacity:.6;} /* GridFloor — Tron perspective horizon, injected into every hero */ .gridfloor{position:absolute;left:0;right:0;bottom:0;height:46%;z-index:0;pointer-events:none;overflow:hidden; perspective:300px;perspective-origin:50% 0%;opacity:.5; -webkit-mask-image:linear-gradient(to top,#000 8%,transparent 92%); mask-image:linear-gradient(to top,#000 8%,transparent 92%);} .gridfloor::before{content:"";position:absolute;left:-60%;right:-60%;bottom:-40%;top:-30%; background-image: linear-gradient(to right,rgba(var(--accent-rgb),.6) 1px,transparent 1px), linear-gradient(to bottom,rgba(var(--accent-rgb),.6) 1px,transparent 1px); background-size:46px 46px; transform:rotateX(76deg);transform-origin:50% 100%; animation:gridfloorMove 3.2s linear infinite;} @keyframes gridfloorMove{from{background-position:0 0;}to{background-position:0 46px;}} /* HUD scanner sweep — injected into .hud panels */ .hud{overflow:hidden;} .hud-scan{position:absolute;left:0;right:0;top:0;height:2px;z-index:2;pointer-events:none;opacity:0; background:linear-gradient(90deg,transparent,var(--accent),transparent); box-shadow:0 0 14px rgba(var(--accent-rgb),.7);animation:hudScan 5.5s var(--ease-grid) infinite;} @keyframes hudScan{0%{top:0;opacity:0;}6%{opacity:.9;}46%{top:100%;opacity:.9;}54%{opacity:0;}100%{opacity:0;top:0;}} /* Radar (Products — "live monitoring") */ .radar{position:relative;width:min(260px,72%);aspect-ratio:1;margin-inline:auto;border-radius:50%; border:1px solid var(--bg-600);background:radial-gradient(circle,rgba(var(--accent-rgb),.07),transparent 72%);overflow:hidden;} .radar::before{content:"";position:absolute;inset:0;border-radius:50%; background:repeating-radial-gradient(circle,transparent 0 13%,rgba(var(--accent-rgb),.16) 13% calc(13% + 1px));} .radar .radar-cross::before,.radar .radar-cross::after{content:"";position:absolute;background:var(--bg-600);} .radar .radar-cross::before{left:50%;top:0;bottom:0;width:1px;transform:translateX(-.5px);} .radar .radar-cross::after{top:50%;left:0;right:0;height:1px;transform:translateY(-.5px);} .radar .sweep{position:absolute;inset:0;border-radius:50%;transform-origin:center; background:conic-gradient(from 0deg,rgba(var(--accent-rgb),.5),rgba(var(--accent-rgb),0) 38%); animation:radarSpin 3.4s linear infinite;} @keyframes radarSpin{to{transform:rotate(360deg);}} .radar .blip{position:absolute;width:9px;height:9px;border-radius:50%;background:var(--accent); box-shadow:var(--glow);opacity:0;} .radar .blip.b1{top:28%;left:62%;animation:blip 3.4s ease-in-out infinite;} .radar .blip.b2{top:64%;left:40%;animation:blip 3.4s ease-in-out .9s infinite;} .radar .blip.b3{top:48%;left:74%;animation:blip 3.4s ease-in-out 1.8s infinite;} @keyframes blip{0%,100%{opacity:0;transform:scale(.6);}8%,26%{opacity:1;transform:scale(1);}55%{opacity:0;}} .radar-label{text-align:center;font-family:var(--font-mono);font-size:.72rem;color:var(--text-lo);letter-spacing:.1em;margin-top:14px;} .radar-label b{color:var(--ok);} /* Live seismograph (Research) */ .seismo{width:100%;max-width:600px;margin-top:28px;overflow:hidden;-webkit-mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);mask-image:linear-gradient(90deg,transparent,#000 8%,#000 92%,transparent);} .seismo svg{display:block;width:200%;height:60px;} .seismo .seismo-line{animation:seismoScroll 7s linear infinite;} @keyframes seismoScroll{from{transform:translateX(0);}to{transform:translateX(-50%);}} /* Form success panel — themed "transmission complete" confirmation */ .form-success{display:flex;flex-direction:column;align-items:flex-start;gap:10px;text-align:left;animation:fsUp .5s var(--ease-grid);} .form-success .fs-badge{width:64px;height:64px;margin-bottom:4px;} .form-success .fs-badge svg{width:64px;height:64px;} .form-success .fs-ring{fill:none;stroke:var(--accent);stroke-width:2;opacity:.5;stroke-dasharray:145;stroke-dashoffset:145; filter:drop-shadow(0 0 8px rgba(var(--accent-rgb),.6));animation:fsRing .6s var(--ease-grid) forwards;} .form-success .fs-check{fill:none;stroke:var(--accent);stroke-width:3.6;stroke-linecap:round;stroke-linejoin:round; stroke-dasharray:40;stroke-dashoffset:40;filter:drop-shadow(0 0 6px rgba(var(--accent-rgb),.7));animation:fsCheck .4s .45s var(--ease-grid) forwards;} @keyframes fsRing{to{stroke-dashoffset:0;opacity:1;}} @keyframes fsCheck{to{stroke-dashoffset:0;}} @keyframes fsUp{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:none;}} .form-success h3{color:var(--text-hi);} .form-success p{color:var(--text-mid);font-size:.95rem;} .form-success .fs-from{font-family:var(--font-mono);font-size:.78rem;color:var(--text-lo);} .form-success .fs-again{margin-top:8px;} .hp{position:absolute !important;left:-9999px;width:1px;height:1px;overflow:hidden;opacity:0;} /* interactive Northeast India map (embedded Desech component) */ .ne-map-frame{max-width:1280px;margin:8px auto 0;padding-inline:24px;} .ne-map-frame iframe{width:100%;height:660px;border:1px solid var(--bg-600);border-radius:var(--radius-lg); background:var(--bg-900);box-shadow:0 24px 70px rgba(0,0,0,.45),var(--glow-soft);display:block;} @media(max-width:680px){.ne-map-frame{padding-inline:14px;}.ne-map-frame iframe{height:540px;}} /* smaller embed for About / Why feature columns */ .ne-map-embed iframe{width:100%;height:440px;border:1px solid var(--bg-600);border-radius:var(--radius); background:var(--bg-900);box-shadow:0 14px 40px rgba(0,0,0,.4),var(--glow-soft);display:block;} @media(max-width:860px){.ne-map-embed iframe{height:420px;}} /* ---------- 38. Intro / welcome screen --------------------------------- */ .intro{position:fixed;inset:0;z-index:3000;background:var(--bg-900);display:flex;align-items:center;justify-content:center; transition:opacity .7s var(--ease-grid);} html.intro-seen .intro{display:none;} body.intro-active{overflow:hidden;} .intro.done{opacity:0;pointer-events:none;} .intro-grid{position:absolute;inset:0;width:100%;height:100%;} .intro-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:18px;text-align:center;padding:24px;} .intro-logo{width:96px;height:96px;filter:drop-shadow(0 0 22px rgba(var(--accent-rgb),.6));animation:introLogo 1s var(--ease-grid) both;} @keyframes introLogo{from{opacity:0;transform:scale(.55) rotate(-14deg);}to{opacity:1;transform:none;}} .intro-word{font-family:var(--font-display);font-weight:700;font-size:clamp(2rem,7vw,3.4rem);color:var(--text-hi); letter-spacing:.05em;text-shadow:0 0 28px rgba(var(--accent-rgb),.5);} .intro-motto{font-family:var(--font-mono);font-size:clamp(.9rem,2.4vw,1.2rem);color:var(--accent-2);letter-spacing:.22em;} .intro-bar{width:min(300px,72vw);height:4px;border-radius:99px;background:var(--bg-700);overflow:hidden;margin-top:10px;} .intro-bar span{display:block;height:100%;width:0;background:var(--grad);box-shadow:var(--glow-soft);} .intro-pct{font-family:var(--font-mono);font-size:.72rem;letter-spacing:.22em;color:var(--text-lo);} .intro-skip{position:absolute;bottom:26px;right:28px;z-index:2;font-family:var(--font-mono);font-size:.78rem;color:var(--text-lo); border:1px solid var(--bg-600);padding:8px 15px;border-radius:99px;transition:color var(--dur),border-color var(--dur);} .intro-skip:hover{color:var(--accent);border-color:var(--accent);} @media(prefers-reduced-motion:reduce){.intro-logo{animation:none;}} /* ---------- 39. N8E Method flow (Services) — sequential edge-to-edge trace */ .method-flow{position:relative;} .mf-svg{width:100%;height:auto;overflow:visible;display:block;} .mf-svg .ring-base{fill:var(--bg-800);stroke:var(--bg-600);stroke-width:2;} .mf-svg .ring-trace{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round; stroke-dasharray:189;stroke-dashoffset:189; transform-box:fill-box;transform-origin:center;transform:rotate(180deg); filter:drop-shadow(0 0 6px rgba(var(--accent-rgb),.6));} .method-flow.in-view .mf-svg .ring-trace{animation:ringTrace .6s var(--ease-grid) var(--d,0s) forwards;} @keyframes ringTrace{to{stroke-dashoffset:0;}} .mf-svg .mf-link{fill:none;stroke:var(--accent);stroke-width:3;stroke-linecap:round; stroke-dasharray:140;stroke-dashoffset:140;filter:drop-shadow(0 0 5px rgba(var(--accent-rgb),.5));} .method-flow.in-view .mf-svg .mf-link{animation:linkDraw .45s var(--ease-grid) var(--d,0s) forwards;} @keyframes linkDraw{to{stroke-dashoffset:0;}} .mf-svg .mf-glyph{color:var(--text-lo);} .method-flow.in-view .mf-svg .mf-glyph{animation:glyphLit .4s var(--ease-grid) var(--d,0s) forwards;} @keyframes glyphLit{to{color:var(--accent);}} .mf-labels{display:grid;grid-template-columns:repeat(5,1fr);gap:12px;margin-top:4px;} .mf-label{display:flex;flex-direction:column;align-items:center;text-align:center;gap:5px;opacity:.4;} .method-flow.in-view .mf-label{animation:labelLit .5s var(--ease-grid) var(--d,0s) forwards;} @keyframes labelLit{to{opacity:1;}} .mf-label .mf-num{font-family:var(--font-mono);font-size:.7rem;color:var(--accent);} .mf-label .mf-name{font-family:var(--font-display);font-size:1.05rem;color:var(--text-mid);} .method-flow.in-view .mf-label .mf-name{animation:nameLit .5s var(--ease-grid) var(--d,0s) forwards;} @keyframes nameLit{to{color:var(--text-hi);}} .mf-label .mf-desc{font-size:.8rem;color:var(--text-lo);max-width:20ch;line-height:1.45;} @media(max-width:740px){ .mf-svg{display:none;} .mf-labels{grid-template-columns:1fr;gap:0;} .mf-label{display:block;text-align:left;opacity:1;animation:none;position:relative; padding:13px 0 13px 22px;border-left:2px solid var(--bg-600);} .mf-label::before{content:"";position:absolute;left:-7px;top:17px;width:12px;height:12px;border-radius:50%; background:var(--accent);box-shadow:var(--glow-soft);} .mf-label .mf-num{margin-right:8px;} .mf-label .mf-name{display:inline;color:var(--text-hi);animation:none;} .mf-label .mf-desc{display:block;margin-top:4px;max-width:none;} } @media(prefers-reduced-motion:reduce){ .mf-svg .ring-trace,.mf-svg .mf-link{stroke-dashoffset:0 !important;animation:none !important;} .mf-svg .mf-glyph{color:var(--accent);} .mf-label{opacity:1 !important;} } /* ---------- 40. Pixel-art accents --------------------------------------- */ .pixel-corner{position:absolute;width:60px;height:60px;pointer-events:none;opacity:.5;z-index:0; background: linear-gradient(var(--accent),var(--accent)) 0 0/12px 3px no-repeat, linear-gradient(var(--accent),var(--accent)) 0 0/3px 12px no-repeat, linear-gradient(var(--accent),var(--accent)) 16px 6px/8px 3px no-repeat, linear-gradient(var(--accent),var(--accent)) 6px 16px/3px 8px no-repeat; filter:drop-shadow(0 0 4px rgba(var(--accent-rgb),.6));} .pixel-corner.tr{right:0;transform:scaleX(-1);} .pixel-corner.bl{bottom:0;transform:scaleY(-1);} .pixel-corner.br{right:0;bottom:0;transform:scale(-1);} .pixel-strip{display:flex;gap:4px;justify-content:center;flex-wrap:wrap;} .pixel-strip i{width:8px;height:8px;background:var(--accent);opacity:.25;border-radius:1px;animation:pxBlink 2.4s steps(1) infinite;} .pixel-strip i:nth-child(3n){opacity:.6;} .pixel-strip i:nth-child(4n){animation-delay:.4s;} .pixel-strip i:nth-child(5n){animation-delay:.8s;opacity:.85;} @keyframes pxBlink{0%,100%{opacity:.2;}45%{opacity:.85;}} .kicker-px{display:inline-flex;align-items:center;gap:9px;} .kicker-px::before{content:"";width:10px;height:10px;background: linear-gradient(var(--accent),var(--accent)) 0 0/4px 4px no-repeat, linear-gradient(var(--accent),var(--accent)) 6px 6px/4px 4px no-repeat, linear-gradient(var(--accent),var(--accent)) 6px 0/4px 4px no-repeat; box-shadow:0 0 6px rgba(var(--accent-rgb),.6);} @media(prefers-reduced-motion:reduce){.pixel-strip i{animation:none;}} /* ============================================================================ 37. Page art — journey arc, radar chart, origins strip, pixel divider ========================================================================== */ .art-panel{background:linear-gradient(180deg,var(--bg-800),var(--bg-700));border:1px solid var(--bg-600); border-radius:var(--radius-lg);padding:clamp(24px,4vw,40px);position:relative;overflow:hidden;} .art-panel.grid-bg::before{-webkit-mask-image:none;mask-image:none;opacity:.5;} /* founders' reverse-brain-drain arc */ .journey svg{width:100%;height:auto;overflow:visible;display:block;} .journey .jpath{fill:none;stroke:var(--accent);stroke-width:2;stroke-dasharray:7 6;opacity:.7; filter:drop-shadow(0 0 5px rgba(var(--accent-rgb),.5));animation:jdash 7s linear infinite;} @keyframes jdash{to{stroke-dashoffset:-130;}} .journey .jplane{fill:var(--accent-2);filter:drop-shadow(0 0 6px rgba(var(--accent-rgb),.8));} .journey .jpin{fill:var(--bg-700);stroke:var(--accent);stroke-width:2;} .journey .jpin.hq{fill:var(--accent);} .journey .jcity{fill:var(--text-hi);font-family:var(--font-display);font-size:17px;font-weight:600;} .journey .jmeta{fill:var(--text-lo);font-family:var(--font-mono);font-size:11px;letter-spacing:.05em;} .journey .jmid{fill:var(--accent-2);font-family:var(--font-mono);font-size:11px;} .journey .jring{fill:none;stroke:var(--accent);stroke-width:1.5;opacity:.6;transform-box:fill-box;transform-origin:center;animation:nodePulse 2.6s var(--ease-grid) infinite;} /* research radar / spider chart */ .radar-chart{max-width:430px;margin-inline:auto;} .radar-chart svg{width:100%;height:auto;overflow:visible;display:block;} .radar-chart .rweb{fill:none;stroke:var(--bg-550);stroke-width:1;} .radar-chart .raxis{stroke:var(--bg-600);stroke-width:1;} .radar-chart .rarea{fill:rgba(var(--accent-rgb),.16);stroke:var(--accent);stroke-width:2; filter:drop-shadow(0 0 7px rgba(var(--accent-rgb),.5)); opacity:0;transform:scale(.5);transform-origin:center;transition:opacity .9s,transform .9s var(--ease-grid);} .radar-chart.in-view .rarea{opacity:1;transform:scale(1);} .radar-chart .rdot{fill:var(--accent-2);opacity:0;transition:opacity .5s .6s;} .radar-chart.in-view .rdot{opacity:1;} .radar-chart .rlabel{fill:var(--text-mid);font-family:var(--font-mono);font-size:10.5px;} /* training-origins strip (Team) */ .origins{display:flex;align-items:center;flex-wrap:wrap;justify-content:center;gap:4px 0;} .origins .o-node{display:inline-flex;flex-direction:column;align-items:center;gap:7px;padding:0 6px;} .origins .o-dot{width:13px;height:13px;border-radius:50%;background:var(--accent);box-shadow:var(--glow-soft);} .origins .o-name{font-family:var(--font-mono);font-size:.74rem;color:var(--text-mid);white-space:nowrap;} .origins .o-line{width:clamp(16px,4vw,52px);height:2px;background:var(--accent);opacity:.35;margin-bottom:18px;} /* pixel data-stream divider */ .pixel-divider{height:4px;width:100%;border:none;margin:0; background:repeating-linear-gradient(90deg,var(--accent) 0 6px,transparent 6px 15px); opacity:.45;animation:pixelMarch 1.6s linear infinite; -webkit-mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent); mask-image:linear-gradient(90deg,transparent,#000 18%,#000 82%,transparent);} @keyframes pixelMarch{to{background-position:30px 0;}} @media (prefers-reduced-motion: reduce){ .journey .jpath,.pixel-divider,.journey .jring{animation:none;} } /* ============================================================================ 36. Data-viz charts (pixel-textured bars) — less text, more art ========================================================================== */ .chart-card{background:var(--bg-700);border:1px solid var(--bg-600);border-radius:var(--radius-lg); padding:clamp(24px,4vw,40px);position:relative;overflow:hidden;} .bar-chart{display:flex;align-items:flex-end;gap:clamp(12px,3vw,30px);height:clamp(200px,30vw,280px); padding:34px 6px 0;border-bottom:1px solid var(--bg-550);position:relative;} .bar-chart .axis{position:absolute;left:0;right:0;height:1px;background:var(--bg-600);} .bar-chart .bar{flex:1;height:0;border-radius:6px 6px 0 0;position:relative;min-width:22px; background:linear-gradient(180deg,var(--accent-2),var(--accent-deep)); box-shadow:0 0 18px rgba(var(--accent-rgb),.4); transition:height 1.1s var(--ease-grid);} .bar-chart.in-view .bar{height:var(--h);} .bar-chart .bar:nth-child(2){transition-delay:.05s;} .bar-chart .bar:nth-child(3){transition-delay:.12s;} .bar-chart .bar:nth-child(4){transition-delay:.19s;} .bar-chart .bar:nth-child(5){transition-delay:.26s;} .bar-chart .bar:nth-child(6){transition-delay:.33s;} .bar-chart .bar::after{content:"";position:absolute;inset:0;border-radius:6px 6px 0 0;pointer-events:none; background:repeating-linear-gradient(180deg,transparent 0 5px,rgba(0,0,0,.22) 5px 7px);} .bar-chart .bar .bv{position:absolute;top:-26px;left:50%;transform:translateX(-50%);font-family:var(--font-mono); font-size:.8rem;color:var(--text-hi);white-space:nowrap;opacity:0;transition:opacity .5s .6s;} .bar-chart.in-view .bar .bv{opacity:1;} .bar-chart .bar .bl{position:absolute;bottom:-26px;left:50%;transform:translateX(-50%);font-family:var(--font-mono); font-size:.72rem;color:var(--text-lo);white-space:nowrap;} .bar-chart .bar.peak{background:linear-gradient(180deg,#fff,var(--accent));} .chart-legend{display:flex;flex-wrap:wrap;gap:18px;margin-top:38px;font-family:var(--font-mono);font-size:.78rem;color:var(--text-lo);} .chart-legend .li{display:inline-flex;align-items:center;gap:8px;} .chart-legend .sw{width:12px;height:12px;border-radius:3px;background:var(--accent);box-shadow:var(--glow-soft);} /* horizontal comparison bars (e.g. yield India vs Europe) */ .cmp{display:grid;gap:18px;margin-top:8px;} .cmp-row{display:grid;grid-template-columns:120px 1fr;align-items:center;gap:14px;} .cmp-row .cmp-name{font-family:var(--font-mono);font-size:.82rem;color:var(--text-mid);} .cmp-track{height:26px;background:var(--bg-800);border:1px solid var(--bg-600);border-radius:6px;overflow:hidden;position:relative;} .cmp-fill{height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,var(--accent-deep),var(--accent)); box-shadow:var(--glow-soft);transition:width 1.2s var(--ease-grid);position:relative;} .cmp-fill::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(90deg,transparent 0 6px,rgba(0,0,0,.2) 6px 8px);} .cmp.in-view .cmp-fill{width:var(--w);} .cmp-row .cmp-val{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-family:var(--font-mono);font-size:.76rem;color:var(--text-hi);z-index:2;} /* ============================================================================ 35. Home hero — synthwave scene, pixel embers, parallax, pulsing sun ========================================================================== */ .hero-home{min-height:min(96vh,900px);} .hero-scene{position:absolute;left:0;right:0;bottom:0;height:74%;z-index:0; background-image:url('/assets/img/hero-scene.jpg');background-repeat:no-repeat; background-position:center bottom;background-size:cover; -webkit-mask-image:linear-gradient(to bottom,transparent 0%,#000 26%,#000 100%); mask-image:linear-gradient(to bottom,transparent 0%,#000 26%,#000 100%); transition:filter var(--dur-slow) var(--ease-grid),transform .2s ease-out;will-change:transform;} [data-theme="cyan"] .hero-scene{filter:hue-rotate(150deg) saturate(1.15) brightness(1.05);} .hero-scene-overlay{position:absolute;inset:0;z-index:1;pointer-events:none; background: radial-gradient(closest-side at 50% 60%, rgba(var(--accent-rgb),.30), transparent 70%), linear-gradient(180deg, rgba(5,6,10,.94) 0%, rgba(5,6,10,.55) 26%, rgba(5,6,10,.18) 50%, rgba(5,6,10,.5) 78%, var(--bg-900) 100%);} .hero-scene-overlay::after{content:"";position:absolute;left:50%;top:60%;width:46%;height:34%; transform:translate(-50%,-50%);border-radius:50%; background:radial-gradient(circle, rgba(var(--accent-rgb),.45), transparent 65%); filter:blur(8px);animation:sunPulse 3.6s var(--ease-grid) infinite;} @keyframes sunPulse{0%,100%{opacity:.55;transform:translate(-50%,-50%) scale(1);}50%{opacity:1;transform:translate(-50%,-50%) scale(1.08);}} .hero-embers{position:absolute;inset:0;z-index:2;pointer-events:none;} .hero-scanlines{position:absolute;inset:0;z-index:3;pointer-events:none;opacity:.22; background:repeating-linear-gradient(180deg,transparent 0 2px,rgba(0,0,0,.5) 2px 3px); animation:heroScan 10s linear infinite;} @keyframes heroScan{from{background-position:0 0;}to{background-position:0 140px;}} .hero-home .container{position:relative;z-index:4;} .hero-home .hero-scroll-hint{z-index:4;} .hero-home .hero-bg-fallback,.hero-home::after{display:none;} /* kinetic headline flicker (subtle neon power) */ .flicker{animation:flicker 4.5s steps(1) infinite;} @keyframes flicker{ 0%,18%,22%,25%,53%,57%,100%{opacity:1;text-shadow:0 0 18px rgba(var(--accent-rgb),.35);} 20%,55%{opacity:.86;text-shadow:none;} } @media (prefers-reduced-motion: reduce){ .hero-scene-overlay::after,.hero-scanlines,.flicker{animation:none;} .hero-scene{transform:none !important;} }