/* ========================================================================= NIKSUN — shared site system (tokens, header/mega-menu, footer, utilities) ========================================================================= */ @import url('https://fonts.googleapis.com/css2?family=Hanken+Grotesk:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap'); /* Page-to-page navigation deliberately relies on the browser's native "paint holding" (it keeps the current page on screen until the next reaches first paint), which removes the inter-page flash with no JS. We intentionally do NOT opt into cross-document View Transitions or any manual fade here, because both bypass paint holding and snapshot a half-rendered frame. */ :root{ --blue:#2E97D7; --blue-bright:#4FB0E6; --blue-action:#0B6FB3; /* R049: was #0E81CE — light-theme AA contrast (5.33:1 on white). Dark overrides to #4FB0E6. */ --blue-deep:#0A6BB0; --cyan:#16BEDC; /* Maya / AI accent */ --ink:#0A2540; --ink-soft:#3D566E; --muted:#5C7488; /* R049: was #7C93A6 — light-theme AA contrast (4.87:1 on white). Dark overrides to #8096AA. */ --line:#E3ECF3; --line-soft:#EEF4F9; --paper:#FFFFFF; --paper-2:#F4F8FC; --paper-3:#EAF2F9; --night:#06182B; --night-2:#0B2237; --alert:#E5484D; --maxw:1200px; --mono:'JetBrains Mono',ui-monospace,monospace; --sans:'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Helvetica,Arial,sans-serif; --ease:cubic-bezier(.22,.61,.36,1); --header-h:64px; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} body{font-family:var(--sans);color:var(--ink);background:var(--paper);line-height:1.5;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;} a{color:inherit;text-decoration:none} img{max-width:100%;display:block} .wrap{max-width:var(--maxw);margin:0 auto;padding:0 28px} .mono{font-family:var(--mono)} /* ---------- buttons ---------- */ .btn{display:inline-flex;align-items:center;gap:9px;font-weight:600;font-size:15px;line-height:1; padding:13px 22px;border-radius:999px;border:1px solid transparent;cursor:pointer;transition:transform .25s var(--ease),background .25s,box-shadow .25s,border-color .25s;white-space:nowrap} .btn:hover{transform:translateY(-1px)} .btn-primary{background:var(--blue-action);color:#fff;box-shadow:0 6px 20px rgba(14,129,206,.28)} .btn-primary:hover{background:#0a72b8;box-shadow:0 10px 28px rgba(14,129,206,.36)} .btn-ghost{background:transparent;color:var(--ink);border-color:var(--line)} .btn-ghost:hover{border-color:var(--blue);color:var(--blue-action)} .btn-light{background:rgba(255,255,255,.1);color:#fff;border-color:rgba(255,255,255,.22)} .btn-light:hover{background:rgba(255,255,255,.18)} .btn-arrow::after{content:'\2192';font-weight:500;transition:transform .25s var(--ease)} .btn-arrow:hover::after{transform:translateX(3px)} .lnk{color:var(--blue-action);font-weight:600;display:inline-flex;align-items:center;gap:7px} .lnk::after{content:'\2192';transition:transform .25s var(--ease)} .lnk:hover::after{transform:translateX(3px)} /* ---------- contextual back-link (inner pages → section hub) ---------- */ .nk-backlink-bar{padding-top:18px} .nk-backlink{display:inline-flex;align-items:center;gap:7px;font:600 12px/1 var(--mono);letter-spacing:.04em;color:var(--blue-action);text-decoration:none} .nk-backlink:hover{color:var(--blue-deep)} .nk-backlink .ar{display:inline-block;transition:transform .25s var(--ease)} .nk-backlink:hover .ar{transform:translateX(-3px)} [dir="rtl"] .nk-backlink .ar{transform:scaleX(-1)} [dir="rtl"] .nk-backlink:hover .ar{transform:scaleX(-1) translateX(-3px)} /* ==================================================================== HEADER + MEGA MENU ==================================================================== */ .nk-header{position:sticky;top:0;z-index:1000;background:rgba(255,255,255,.78); backdrop-filter:saturate(180%) blur(20px);-webkit-backdrop-filter:saturate(180%) blur(20px); border-bottom:1px solid var(--line);} .nk-bar{display:flex;align-items:center;gap:8px;height:var(--header-h);max-width:1360px;margin:0 auto;padding:0 24px} .nk-brand{display:flex;align-items:center;gap:11px;margin-right:8px} .nk-brand img{width:30px;height:30px} img[src*="niksun-logo"]{object-fit:contain} .nk-brand b{font-size:18px;font-weight:700;letter-spacing:-.01em} .nk-nav{display:flex;align-items:center;gap:2px;height:100%} .nk-item{position:relative;height:100%;display:flex;align-items:center} .nk-item>button,.nk-item>a{display:inline-flex;align-items:center;gap:6px;height:100%;padding:0 12px; font-size:14.5px;font-weight:500;color:var(--ink);background:none;border:0;cursor:pointer;font-family:inherit;transition:color .2s} .nk-item>button .chev{width:9px;height:9px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.5;transition:transform .25s var(--ease),opacity .2s} .nk-item:hover>button,.nk-item:hover>a,.nk-item>button:focus-visible{color:var(--blue-action)} .nk-item:hover>button .chev{transform:rotate(225deg) translateY(-1px);opacity:.9} .nk-spacer{flex:1} .nk-util{display:flex;align-items:center;gap:6px} .nk-lang{position:relative} .nk-lang-btn{display:flex;align-items:center;gap:6px;padding:7px 11px;background:none;border:1px solid var(--line);border-radius:999px;cursor:pointer;font:600 12px/1 var(--mono);color:var(--ink-soft);transition:border-color .2s,color .2s} .nk-lang-btn:hover{border-color:var(--blue);color:var(--blue-action)} .nk-lang-btn .globe{font-size:13px;line-height:1} .nk-lang-btn .chev{width:7px;height:7px;border-right:1.6px solid currentColor;border-bottom:1.6px solid currentColor;transform:rotate(45deg) translateY(-1px);opacity:.55;transition:transform .25s var(--ease)} .nk-lang.open .nk-lang-btn .chev{transform:rotate(225deg) translateY(0)} .nk-lang.open .nk-lang-btn{border-color:var(--blue);color:var(--blue-action)} .nk-lang-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:170px;background:var(--paper);border:1px solid var(--line);border-radius:12px; box-shadow:0 24px 50px -24px rgba(10,37,64,.3);padding:6px;opacity:0;visibility:hidden;transform:translateY(-8px); transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;z-index:1001} .nk-lang.open .nk-lang-menu{opacity:1;visibility:visible;transform:translateY(0)} .nk-lang-menu button{display:flex;align-items:center;justify-content:space-between;gap:10px;width:100%;padding:9px 12px;background:none;border:0;border-radius:8px; cursor:pointer;font:500 14px/1 var(--sans);color:var(--ink-soft);text-align:left;transition:background .15s,color .15s} .nk-lang-menu button:hover{background:var(--paper-2);color:var(--blue-action)} .nk-lang-menu button.on{color:var(--blue-action);font-weight:600} .nk-lang-menu button.on::after{content:'✓';font-size:12px} .nk-login{font-size:14px;font-weight:600;color:var(--ink-soft);padding:8px 12px} .nk-login:hover{color:var(--blue-action)} .nk-ncs{border:1px solid var(--line);border-radius:999px;padding:7px 13px;color:var(--blue-action)} .nk-ncs:hover{background:var(--paper-2);color:var(--blue-action)} /* flyout panel */ .nk-panel{position:fixed;left:0;right:0;top:var(--header-h);background:var(--paper); border-bottom:1px solid var(--line);box-shadow:0 30px 60px -30px rgba(10,37,64,.28); opacity:0;visibility:hidden;transform:translateY(-10px);transition:opacity .28s var(--ease),transform .28s var(--ease),visibility .28s;z-index:999} .nk-panel.open{opacity:1;visibility:visible;transform:translateY(0)} .nk-panel-inner{max-width:1320px;margin:0 auto;padding:34px 24px 38px} .nk-cols{display:grid;gap:30px} .nk-col h5{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);margin-bottom:14px} .nk-col a{display:block;padding:7px 0;font-size:14px;color:var(--ink-soft);border-radius:6px;transition:color .15s,padding .2s var(--ease)} .nk-col a:hover{color:var(--blue-action);padding-left:5px} .nk-col a b{display:block;color:var(--ink);font-weight:600;font-size:14.5px} .nk-col a span{font-size:12px;color:var(--muted)} .nk-col a:hover b{color:var(--blue-action)} .nk-feature{background:linear-gradient(160deg,#0a2540,#06182b);border-radius:16px;padding:22px;color:#fff;position:relative;overflow:hidden} .nk-feature::after{content:'';position:absolute;right:-50px;top:-50px;width:160px;height:160px;border-radius:50%;background:radial-gradient(circle,rgba(46,151,215,.55),transparent 70%)} .nk-feature .k{font:500 10px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--blue-bright);position:relative} .nk-feature h4{font-size:18px;font-weight:700;margin:10px 0 8px;position:relative;letter-spacing:-.01em} .nk-feature p{font-size:13px;color:#AFC6DA;position:relative} .nk-feature .lnk{color:var(--blue-bright);margin-top:14px;font-size:13px;position:relative} /* simple dropdown (Resources/Company) */ .nk-dd{position:absolute;top:calc(var(--header-h) - 8px);left:50%;transform:translateX(-50%) translateY(-8px); background:var(--paper);border:1px solid var(--line);border-radius:14px;box-shadow:0 24px 50px -24px rgba(10,37,64,.3); padding:10px;min-width:230px;opacity:0;visibility:hidden;transition:opacity .22s var(--ease),transform .22s var(--ease),visibility .22s;z-index:999} .nk-item:hover .nk-dd{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .nk-dd a{display:block;padding:9px 12px;border-radius:8px;font-size:14px;color:var(--ink-soft);transition:background .15s,color .15s} .nk-dd a:hover{background:var(--paper-2);color:var(--blue-action)} /* mobile */ .nk-burger{display:none;flex-direction:column;gap:5px;background:none;border:0;cursor:pointer;padding:8px;margin-left:4px} .nk-burger span{width:22px;height:2px;background:var(--ink);border-radius:2px;transition:.25s var(--ease)} .nk-mobile{position:fixed;inset:var(--header-h) 0 0;background:var(--paper);z-index:998;overflow-y:auto;padding:18px 24px 60px; transform:translateX(100%);transition:transform .32s var(--ease);visibility:hidden} .nk-mobile.open{transform:translateX(0);visibility:visible} .nk-macc{border-bottom:1px solid var(--line)} .nk-macc>button{width:100%;display:flex;align-items:center;justify-content:space-between;padding:16px 2px;background:none;border:0;font:600 17px/1 var(--sans);color:var(--ink);cursor:pointer} .nk-macc>button .chev{width:9px;height:9px;border-right:1.8px solid var(--muted);border-bottom:1.8px solid var(--muted);transform:rotate(45deg);transition:transform .25s var(--ease)} .nk-macc.open>button .chev{transform:rotate(225deg)} .nk-macc .sub{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s var(--ease)} .nk-macc.open .sub{grid-template-rows:1fr} .nk-macc .sub>div{overflow:hidden} .nk-macc .sub a{display:block;padding:10px 0 10px 14px;font-size:15px;color:var(--ink-soft)} .nk-mcta{margin-top:24px;display:flex;flex-direction:column;gap:10px} @media(max-width:820px){ .nk-nav,.nk-util .nk-lang,.nk-util .nk-login{display:none} .nk-burger{display:flex} .nk-bar{gap:6px} } /* Priority+ overflow: items collapse right→left into the "More" menu */ .ov-hidden{display:none!important} .nk-more>button{display:inline-flex;align-items:center;gap:6px;height:100%;padding:0 12px;background:none;border:0; font:600 14.5px/1 var(--sans);color:var(--ink-soft);cursor:pointer;white-space:nowrap} .nk-more:hover>button,.nk-more>button:hover{color:var(--blue-action)} .nk-more-dd{left:auto;right:0;transform:translateX(0) translateY(-8px);min-width:248px;max-height:74vh;overflow-y:auto;text-align:left} .nk-item:hover .nk-more-dd{transform:translateX(0) translateY(0)} .nk-more-group{padding:6px 0;border-top:1px solid var(--line)} .nk-more-group:first-child{border-top:0} .nk-more-head{display:block;padding:9px 12px;border-radius:8px;font-size:14px;font-weight:700;color:var(--ink);transition:background .15s,color .15s} .nk-more-head:hover{background:var(--paper-2);color:var(--blue-action)} .nk-more-label{padding:7px 12px 3px;font:600 11px/1 var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--muted)} .nk-more-dd .nk-mlangs,.nk-more-dd .nk-mthemes{display:flex;flex-wrap:wrap;gap:8px;padding:6px 10px 10px} .nk-more-dd .nk-mlangs button,.nk-more-dd .nk-mthemes button{font:600 13.5px/1 var(--sans);color:var(--ink-soft); background:var(--paper-2);border:1px solid var(--line);border-radius:9px;padding:9px 12px;cursor:pointer;transition:color .15s,border-color .15s,background .15s} .nk-more-dd .nk-mlangs button:hover,.nk-more-dd .nk-mthemes button:hover{color:var(--blue-action);border-color:var(--blue)} .nk-more-dd .nk-mlangs button.on,.nk-more-dd .nk-mthemes button.on{color:var(--blue-action);border-color:var(--blue);background:var(--paper-3)} /* mobile menu — language + theme controls */ .nk-mutil{margin-top:24px;border-top:1px solid var(--line);padding-top:20px;display:flex;flex-direction:column;gap:18px} .nk-mutil-row{display:flex;flex-direction:column;gap:10px} .nk-mutil-h{font:600 11px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--muted)} .nk-mlangs,.nk-mthemes{display:flex;flex-wrap:wrap;gap:8px} .nk-mlangs button,.nk-mthemes button{font:600 14px/1 var(--sans);color:var(--ink-soft);background:var(--paper-2); border:1px solid var(--line);border-radius:10px;padding:11px 14px;cursor:pointer;transition:color .15s,border-color .15s,background .15s} .nk-mlangs button:hover,.nk-mthemes button:hover{color:var(--blue-action);border-color:var(--blue)} .nk-mlangs button.on,.nk-mthemes button.on{color:var(--blue-action);border-color:var(--blue);background:var(--paper-3)} /* ==================================================================== FOOTER ==================================================================== */ .nk-footer{background:var(--night);color:#9FB6CA;padding:70px 0 36px;margin-top:0} .nk-foot-grid{display:grid;grid-template-columns:repeat(6,1fr);gap:30px} .nk-foot-brand{text-align:center;margin-top:48px;padding-top:40px;border-top:1px solid rgba(255,255,255,.1);display:flex;flex-direction:column;align-items:center} .nk-foot-brand img{width:38px;height:38px;margin-bottom:16px} .nk-foot-brand p{font-size:14px;max-width:46ch;color:#7C93A6} .nk-foot-brand .tag{color:var(--blue-bright);font-weight:600;margin:14px 0 18px;font-size:15px} .nk-soc{display:flex;gap:10px;margin-top:18px} .nk-soc a{width:36px;height:36px;border-radius:50%;border:1px solid rgba(255,255,255,.14);display:grid;place-items:center;color:#9FB6CA;transition:.2s} .nk-soc a:hover{border-color:var(--blue);color:#fff;background:rgba(46,151,215,.15)} .nk-foot-brand .nk-foot-olympus{display:inline-flex;flex-direction:column;align-items:center;gap:6px;margin:24px 0 6px;opacity:.6} .nk-foot-brand .nk-foot-olympus span{font:600 9px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:#5C748A} .nk-foot-brand .nk-foot-olympus img{width:auto;height:13px;margin:0} .nk-foot-col h6{font:500 11px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:#5C748A;margin-bottom:16px} .nk-foot-col a{display:block;padding:6px 0;font-size:13.5px;color:#9FB6CA;transition:color .15s} .nk-foot-col a:hover{color:#fff} .nk-foot-col h6 a{color:inherit;transition:color .15s} .nk-foot-col h6 a:hover{color:#9FB6CA} .nk-foot-bottom{display:flex;align-items:center;justify-content:space-between;margin-top:54px;padding-top:24px;border-top:1px solid rgba(255,255,255,.1);font-size:12.5px;color:#5C748A;flex-wrap:wrap;gap:12px} .nk-foot-bottom a{color:#5C748A}.nk-foot-bottom a:hover{color:#9FB6CA} @media(max-width:900px){.nk-foot-grid{grid-template-columns:1fr 1fr 1fr;gap:28px}} @media(max-width:560px){.nk-foot-grid{grid-template-columns:1fr 1fr}} /* ==================================================================== SHARED SECTION PRIMITIVES ==================================================================== */ .section{padding:clamp(64px,9vw,128px) 0} .eyebrow{font:500 12px/1 var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--blue-action);margin-bottom:20px} .eyebrow.on-dark{color:var(--blue-bright)} h1,h2,h3{letter-spacing:-.025em;line-height:1.05} .h-display{font-size:clamp(40px,6.5vw,86px);font-weight:800;letter-spacing:-.035em;line-height:.98} .h1{font-size:clamp(34px,5vw,62px);font-weight:800} .h2{font-size:clamp(28px,3.8vw,46px);font-weight:800} .lead{font-size:clamp(17px,1.6vw,21px);color:var(--ink-soft);line-height:1.5} .kicker-ai{color:var(--cyan)} /* Cross-document view transitions — smooth cross-fade between pages on same-origin navigation instead of a hard blank-frame flash. Progressive enhancement: unsupported browsers ignore this and navigate as before. */ @view-transition { navigation: auto; } ::view-transition-old(root), ::view-transition-new(root){ animation-duration:.22s; } @media (prefers-reduced-motion: reduce){ @view-transition { navigation: none; } } /* reveal — elements are visible by default so they paint on first frame (no inter-page flash). site.js adds .pre (the hidden start-state) only to elements below the fold, then swaps it for .in as they scroll into view. */ .reveal{transition:opacity .8s var(--ease),transform .8s var(--ease)} .reveal.pre{opacity:0;transform:translateY(28px)} .reveal.in{opacity:1;transform:none} .reveal.d1{transition-delay:.08s}.reveal.d2{transition-delay:.16s}.reveal.d3{transition-delay:.24s} .reveal.d4{transition-delay:.32s}.reveal.d5{transition-delay:.40s}.reveal.d6{transition-delay:.48s} @media(prefers-reduced-motion:reduce){.reveal{opacity:1!important;transform:none!important;transition:none!important}} /* placeholder visual */ .ph{position:relative;background: repeating-linear-gradient(135deg,rgba(46,151,215,.05) 0 14px,rgba(46,151,215,.10) 14px 28px),var(--paper-2); border:1px solid var(--line);border-radius:18px;display:grid;place-items:center;overflow:hidden} .ph .lbl{font:500 12px/1.4 var(--mono);color:var(--blue-action);background:rgba(255,255,255,.86); border:1px solid var(--line);padding:8px 14px;border-radius:999px;letter-spacing:.02em;text-align:center} .ph.dark{background:repeating-linear-gradient(135deg,rgba(79,176,230,.06) 0 14px,rgba(79,176,230,.11) 14px 28px),#0b2237;border-color:rgba(255,255,255,.1)} .ph.dark .lbl{background:rgba(11,34,55,.7);border-color:rgba(255,255,255,.14);color:var(--blue-bright)} /* ==================================================================== LIVE THREAT FEED + STAKES (injected by site.js into [data-stakes]) ==================================================================== */ .nk-stakes-head{display:flex;align-items:flex-end;justify-content:space-between;gap:24px;flex-wrap:wrap;margin-bottom:26px} .nk-stakes-head h2{font-size:clamp(24px,3vw,38px);font-weight:800;letter-spacing:-.02em} .nk-stakes-head p{font-size:14.5px;color:var(--ink-soft);max-width:42ch;margin-top:8px} /* ticker */ .nk-feed{position:relative;display:flex;align-items:stretch;border:1px solid var(--line);border-radius:14px;background:var(--paper);overflow:hidden; box-shadow:0 18px 40px -34px rgba(10,37,64,.4)} .nk-feed-live{flex:none;display:flex;align-items:center;gap:9px;padding:0 18px;background:var(--paper); border-right:1px solid var(--line);font:600 12px/1 var(--mono);letter-spacing:.08em;text-transform:uppercase;color:var(--ink);z-index:3} .nk-feed-live .pulse{width:9px;height:9px;border-radius:50%;background:var(--alert);box-shadow:0 0 0 0 rgba(229,72,77,.6);animation:nkpulse 1.8s infinite} @keyframes nkpulse{0%{box-shadow:0 0 0 0 rgba(229,72,77,.6)}70%{box-shadow:0 0 0 9px rgba(229,72,77,0)}100%{box-shadow:0 0 0 0 rgba(229,72,77,0)}} .nk-feed-vp{position:relative;flex:1;overflow:hidden} .nk-feed-vp::before,.nk-feed-vp::after{content:'';position:absolute;top:0;bottom:0;width:48px;z-index:2;pointer-events:none} .nk-feed-vp::before{left:0;background:linear-gradient(90deg,var(--paper),transparent)} .nk-feed-vp::after{right:0;background:linear-gradient(270deg,var(--paper),transparent)} .nk-feed-track{display:flex;width:max-content;animation:nkticker 60s linear infinite} .nk-feed:hover .nk-feed-track{animation-play-state:paused} @keyframes nkticker{to{transform:translateX(-50%)}} .nk-feed-item{display:flex;align-items:center;gap:12px;padding:16px 28px;white-space:nowrap;border-right:1px solid var(--line-soft)} .nk-feed-item .dt{font:500 11px/1 var(--mono);color:var(--muted)} .nk-feed-item .cat{font:600 10px/1 var(--mono);letter-spacing:.06em;text-transform:uppercase;color:var(--blue-action);background:var(--paper-3);padding:5px 8px;border-radius:6px} .nk-feed-item .cat.alert{color:var(--alert);background:rgba(229,72,77,.08)} .nk-feed-item .tt{font-size:14px;font-weight:500;color:var(--ink)} a.nk-feed-item{text-decoration:none;color:inherit;cursor:pointer;transition:background .2s} a.nk-feed-item:hover{background:var(--paper-2)} a.nk-feed-item:hover .tt{color:var(--blue-action)} [data-stakes="dark"] a.nk-feed-item:hover{background:rgba(255,255,255,.05)} /* stats */ .nk-stakes-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;margin-top:22px} @media(max-width:780px){.nk-stakes-stats{grid-template-columns:1fr 1fr}} .nk-skstat{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:24px} .nk-skstat .v{font-size:clamp(32px,3.6vw,46px);font-weight:800;letter-spacing:-.03em;line-height:1;color:var(--ink)} .nk-skstat .v .u{color:var(--alert)} .nk-skstat p{font-size:13px;color:var(--ink-soft);margin-top:12px;line-height:1.45} .nk-stakes-cap{margin-top:22px;font:500 12px/1.6 var(--mono);color:var(--muted);letter-spacing:.02em} .nk-stakes-cap b{color:var(--ink-soft);font-family:var(--sans);font-weight:600} /* dark variant */ [data-stakes="dark"]{background:var(--night)} [data-stakes="dark"] .nk-stakes-head h2{color:#fff} [data-stakes="dark"] .nk-stakes-head p{color:#AFC6DA} [data-stakes="dark"] .nk-feed{background:var(--night-2);border-color:rgba(255,255,255,.1)} [data-stakes="dark"] .nk-feed-live{background:var(--night-2);border-color:rgba(255,255,255,.1);color:#fff} [data-stakes="dark"] .nk-feed-item{border-color:rgba(255,255,255,.06)} [data-stakes="dark"] .nk-feed-item .tt{color:#E8F1F8} [data-stakes="dark"] .nk-feed-item .cat{background:rgba(79,176,230,.12);color:var(--blue-bright)} [data-stakes="dark"] .nk-feed-vp::before{background:linear-gradient(90deg,var(--night-2),transparent)} [data-stakes="dark"] .nk-feed-vp::after{background:linear-gradient(270deg,var(--night-2),transparent)} [data-stakes="dark"] .nk-skstat{background:var(--night-2);border-color:rgba(255,255,255,.1)} [data-stakes="dark"] .nk-skstat .v{color:#fff} [data-stakes="dark"] .nk-skstat p{color:#AFC6DA} [data-stakes="dark"] .nk-stakes-cap{color:#6E8aa3} [data-stakes="dark"] .nk-stakes-cap b{color:#AFC6DA} @media(prefers-reduced-motion:reduce){ .nk-feed-track{animation:none} .nk-feed-vp{overflow-x:auto} .nk-feed-live .pulse{animation:none} } /* ==================================================================== ENTERPRISE-GRADE TRUST BAND (injected into [data-trust]) ==================================================================== */ .nk-trust{padding:clamp(48px,6vw,84px) 0;background:var(--paper-2);border-top:1px solid var(--line-soft)} .nk-trust .head{text-align:center;max-width:680px;margin:0 auto 30px} .nk-trust .head h2{font-size:clamp(24px,3vw,36px);font-weight:800;letter-spacing:-.025em} .nk-trust .head p{font-size:15px;color:var(--ink-soft);margin-top:12px} .nk-trust-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:14px;max-width:1100px;margin:0 auto} @media(max-width:900px){.nk-trust-grid{grid-template-columns:repeat(2,1fr)}} @media(max-width:520px){.nk-trust-grid{grid-template-columns:1fr}} .nk-trust-item{background:var(--paper);border:1px solid var(--line);border-radius:16px;padding:22px 20px;text-align:center} .nk-trust-item .ic{width:46px;height:46px;border-radius:13px;background:var(--paper-3);display:grid;place-items:center;margin:0 auto 14px;font-size:20px} .nk-trust-item b{display:block;font-size:14.5px;font-weight:700;letter-spacing:-.01em} .nk-trust-item p{font-size:12.5px;color:var(--muted);margin-top:7px;line-height:1.45} [data-trust="dark"].nk-trust{background:var(--night);border-top:0} [data-trust="dark"] .head h2{color:#fff} [data-trust="dark"] .head p{color:#AFC6DA} [data-trust="dark"] .nk-trust-item{background:var(--night-2);border-color:rgba(255,255,255,.1)} [data-trust="dark"] .nk-trust-item .ic{background:rgba(79,176,230,.14)} [data-trust="dark"] .nk-trust-item b{color:#fff} [data-trust="dark"] .nk-trust-item p{color:#9FB6CA} /* ============ DARK MODE ============ */ :root[data-theme="dark"]{ --ink:#EAF2FA;--ink-soft:#AFC6DA;--muted:#8096AA; --line:#1C3247;--line-soft:#152A3D; --paper:#070E18;--paper-2:#0C1E30;--paper-3:#102A40; --blue-action:#4FB0E6;--blue-deep:#7FC6F0; } /* dark theme: deepen the standard grey band site-wide so dark "marquee"/feature sections stand clearly apart (CTAs use their own classes, so they're untouched) */ :root[data-theme="dark"] .sec.alt{background:#0a1825} :root[data-theme="dark"] .nk-header{background:rgba(7,14,24,.82)} :root[data-theme="dark"] .nk-trust-item,:root[data-theme="dark"] .cap-card,:root[data-theme="dark"] .cap-rc,:root[data-theme="dark"] .cap-chat,:root[data-theme="dark"] .sol-product,:root[data-theme="dark"] .pr-fcard,:root[data-theme="dark"] .pr-scard,:root[data-theme="dark"] .int-w,:root[data-theme="dark"] .int-tile,:root[data-theme="dark"] .pillar,:root[data-theme="dark"] .sp-pillar,:root[data-theme="dark"] .lib-card,:root[data-theme="dark"] .case,:root[data-theme="dark"] .news,:root[data-theme="dark"] .so-card{background:var(--paper-2);border-color:var(--line)} :root[data-theme="dark"] .cl-hero{--cvink:#EAF2FA;--cvink2:#AFC6DA;--cvline:#1C3247;--cvsurface:#0C1E30} :root[data-theme="dark"] .cl-hero .pane{background:#0C1E30;border-color:#1C3247} :root[data-theme="dark"] .cl-hero .chip{background:#0C1E30} :root[data-theme="dark"] .cl-hero .dchip{background:#0C1E30;border-color:#1C3247;color:#AFC6DA} .nk-theme{position:relative} .nk-theme-btn{display:flex;align-items:center;gap:7px;padding:8px 12px;background:none;border:1px solid var(--line);border-radius:999px;cursor:pointer;color:var(--ink-soft);font:600 13px/1 var(--sans)} .nk-theme-btn:hover{border-color:var(--blue);color:var(--blue-action)} .nk-theme-btn .ic{font-size:14px;line-height:1} .nk-theme-btn .chev{width:6px;height:6px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.5} .nk-theme-menu{position:absolute;top:calc(100% + 8px);right:0;min-width:152px;background:var(--paper);border:1px solid var(--line);border-radius:12px;box-shadow:0 24px 50px -24px rgba(10,37,64,.3);padding:6px;opacity:0;visibility:hidden;transform:translateY(-8px);transition:opacity .2s var(--ease),transform .2s var(--ease),visibility .2s;z-index:1001} .nk-theme.open .nk-theme-menu{opacity:1;visibility:visible;transform:none} .nk-theme-menu button{display:flex;width:100%;gap:9px;align-items:center;padding:9px 11px;border:0;background:none;border-radius:8px;cursor:pointer;font:600 13px/1 var(--sans);color:var(--ink-soft);text-align:left} .nk-theme-menu button:hover{background:var(--paper-2);color:var(--ink)} .nk-theme-menu button.on{color:var(--blue-action)} :root[data-theme="dark"] .nk-theme-menu button.on{color:var(--blue-bright)} @media(max-width:820px){.nk-util .nk-theme{display:none}} :root[data-theme="dark"] .ce-subnav,:root[data-theme="dark"] .dp-subnav,:root[data-theme="dark"] .pf-subnav{background:rgba(7,14,24,.82)} /* ambient "live data flow" layer (ambient.js) */ .ambient-fx{position:absolute;inset:0;width:100%;height:100%;display:block;pointer-events:none;z-index:0} /* ========================================================================= SITE SEARCH — header trigger + command-palette overlay (search.js) ========================================================================= */ /* magnifier glyph (shared) */ .nk-search-btn .mag,.nk-srch .mag,.nk-msearch .mag{width:15px;height:15px;border-radius:50%;border:2px solid currentColor;position:relative;flex:none;display:inline-block} .nk-search-btn .mag::after,.nk-srch .mag::after,.nk-msearch .mag::after{content:'';position:absolute;width:6px;height:2px;background:currentColor;bottom:-3px;right:-4px;transform:rotate(45deg);border-radius:2px} /* header trigger — matches the pill language/theme controls */ .nk-search-btn{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:999px;border:1px solid var(--line);background:none;color:var(--ink-soft);cursor:pointer;transition:border-color .2s,color .2s;flex:none} .nk-search-btn:hover{border-color:var(--blue);color:var(--blue-action)} .nk-search-btn .mag{width:13px;height:13px;border-width:1.8px} .nk-search-btn .mag::after{width:5px;bottom:-3px;right:-3px} @media(max-width:820px){.nk-util .nk-search-btn{display:none}} /* mobile trigger (inside menu) */ .nk-msearch{display:flex;align-items:center;gap:11px;width:100%;padding:14px 16px;margin:0 0 6px;border:1px solid var(--line);border-radius:12px;background:var(--paper-2);color:var(--ink-soft);font:600 15px/1 var(--sans);cursor:pointer} .nk-msearch:hover{color:var(--blue-action);border-color:var(--blue)} /* overlay */ .nk-srch{position:fixed;inset:0;z-index:5000;display:flex;justify-content:center;align-items:flex-start} .nk-srch[hidden]{display:none} .nk-srch-scrim{position:absolute;inset:0;background:rgba(7,14,24,.55);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);opacity:0;transition:opacity .18s var(--ease)} .nk-srch.show .nk-srch-scrim{opacity:1} .nk-srch-panel{position:relative;width:min(640px,calc(100vw - 32px));margin-top:12vh;background:var(--paper);border:1px solid var(--line);border-radius:18px; box-shadow:0 40px 90px -30px rgba(7,14,24,.6);overflow:hidden;opacity:0;transform:translateY(-10px) scale(.99);transition:opacity .18s var(--ease),transform .18s var(--ease)} .nk-srch.show .nk-srch-panel{opacity:1;transform:none} .nk-srch-head{display:flex;align-items:center;gap:13px;padding:17px 18px;border-bottom:1px solid var(--line-soft)} .nk-srch-head .mag{width:17px;height:17px;color:var(--muted)} .nk-srch-input{flex:1;border:0;outline:0;background:transparent;font:600 17px/1.3 var(--sans);color:var(--ink);letter-spacing:-.01em} .nk-srch-input::placeholder{color:var(--muted);font-weight:500} .nk-srch-esc{font:600 11px/1 var(--mono);color:var(--muted);background:var(--paper-2);border:1px solid var(--line);border-radius:6px;padding:5px 7px;cursor:pointer} .nk-srch-results{max-height:min(52vh,460px);overflow-y:auto;padding:8px;scrollbar-width:thin} .nk-srch-lab{font:600 10.5px/1 var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--muted);padding:10px 12px 6px} .nk-srch-row{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:12px 14px;border-radius:11px;text-decoration:none;color:inherit} .nk-srch-row.on{background:var(--paper-2)} :root[data-theme="dark"] .nk-srch-row.on{background:rgba(46,151,215,.13)} .nk-srch-tt{display:flex;flex-direction:column;gap:3px;min-width:0;font-size:15.5px;font-weight:700;letter-spacing:-.01em;color:var(--ink)} .nk-srch-tt .nm{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .nk-srch-tt small{font:500 12.5px/1.4 var(--sans);color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:62ch} .nk-srch-tt mark{background:color-mix(in oklab,var(--blue) 30%,transparent);color:inherit;border-radius:3px;padding:0 1px} .nk-srch-sec{flex:none;font:600 10.5px/1 var(--mono);letter-spacing:.04em;color:var(--blue-action);background:var(--paper-2);border:1px solid var(--line);border-radius:999px;padding:6px 10px} :root[data-theme="dark"] .nk-srch-sec{background:rgba(255,255,255,.04)} .nk-srch-row.on .nk-srch-sec{border-color:var(--blue)} .nk-srch-empty{padding:34px 22px;text-align:center;font-size:14.5px;line-height:1.6;color:var(--muted)} .nk-srch-foot{display:flex;gap:18px;padding:11px 18px;border-top:1px solid var(--line-soft);font:500 11.5px/1 var(--mono);color:var(--muted)} .nk-srch-foot kbd{font:inherit;background:var(--paper-2);border:1px solid var(--line);border-radius:5px;padding:3px 6px;margin-right:3px} @media(max-width:560px){.nk-srch-panel{margin-top:0;width:100vw;height:100%;border-radius:0;border:0;display:flex;flex-direction:column}.nk-srch-results{max-height:none;flex:1}.nk-srch-foot{display:none}} /* ========================================================================= ACCESSIBILITY (R048) — site-wide keyboard focus, skip link, kbd menus ========================================================================= */ /* Visible keyboard focus on every interactive element (WCAG 2.4.7). :where() keeps specificity 0 so components keep their look; only the outline is added. Mouse clicks don't trigger :focus-visible, so this is keyboard-only and won't show rings on click. */ :where(a,button,input,select,textarea,summary,[tabindex],[role="button"],[role="option"]):focus-visible{ outline:2px solid var(--blue-action); outline-offset:2px; border-radius:4px; } :root[data-theme="dark"] :where(a,button,input,select,textarea,summary,[tabindex],[role="button"],[role="option"]):focus-visible{ outline-color:var(--blue-bright); } /* Keyboard users: open the simple nav dropdowns on focus, like hover does */ .nk-item:focus-within>.nk-dd{opacity:1;visibility:visible;transform:translateX(-50%) translateY(0)} .nk-item:focus-within>button .chev{transform:rotate(225deg) translateY(-1px);opacity:.9} .nk-item:focus-within>button,.nk-item:focus-within>a{color:var(--blue-action)} /* Skip-to-content link — off-screen until focused by Tab */ .nk-skip{position:fixed;top:10px;left:10px;z-index:3000; background:var(--blue-action);color:#fff;padding:11px 18px;border-radius:9px; font:600 14px/1 var(--sans);text-decoration:none; transform:translateY(-160%);transition:transform .2s var(--ease); box-shadow:0 8px 26px rgba(6,24,43,.4)} .nk-skip:focus{transform:translateY(0);outline:2px solid #fff;outline-offset:2px} @media (prefers-reduced-motion: reduce){.nk-skip{transition:none}} /* Screen-reader-only utility */ .nk-sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px; overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Give the skip target a comfortable scroll offset below the sticky header */ #nk-main{scroll-margin-top:calc(var(--header-h, 64px) + 12px)} #nk-main:focus{outline:none} /* --------------------------------------------------------------------------- Japanese line-breaking. Long headings were splitting mid-word (e.g. プラットフ/ォーム, セッ/ション). word-break:auto-phrase breaks at phrase boundaries using the browser's Japanese segmenter; it engages because i18n now sets a valid lang="ja". Scoped to Japanese only — no effect elsewhere. Falls back gracefully where auto-phrase is unsupported. Applies on every page (home, platform, capabilities, …) since headings share these classes. ------------------------------------------------------------------------- */ html[lang="ja"] h1, html[lang="ja"] h2, html[lang="ja"] .h-display, html[lang="ja"] .h2, html[lang="ja"] .cap h4, html[lang="ja"] .iv-card .v{ overflow-wrap: anywhere; /* last resort: never let a long word overflow */ word-break: keep-all; /* base (all engines): break at spaces / ZWSP / 。, not mid-word */ word-break: auto-phrase; /* preferred (Chrome/Safari): phrase-aware Japanese breaking */ line-break: strict; } /* Heroes are tuned to a tight ch-width for English; a single long katakana compound (プラットフォーム) is wider than that, so it overflowed and split mid-word. Give the Japanese heroes more room so the word stays whole and wraps at the phrase boundary (or ZWSP hint). */ html[lang="ja"] .cl-hero h1{ max-width: 22ch; } /* home */ html[lang="ja"] .pf-hero h1{ max-width: 24ch; } /* platform */ html[lang="ja"] .ce-hero h1{ max-width: 22ch; } /* capabilities */ /* The vertical architecture rail (Data · Intelligence · Action) is pinned to a 112px column — インテリジェンス is too long for it and split mid-word. Widen the rail for JA and keep each label on one line. */ html[lang="ja"] .arch-rail{ width: 150px; } html[lang="ja"] .arch-rail .rl{ white-space: nowrap; } /* The brand "accent period" (.hd-dot, a styled "." closing a headline) reads as a stray Latin dot after Japanese text. Render it as a full-width 。 in JA, keeping the cyan accent. Scoped to Japanese only. */ html[lang="ja"] .hd-dot{ visibility: hidden; } html[lang="ja"] .hd-dot::after{ content: "。"; visibility: visible; color: var(--cyan, #4FB0E6); margin-left: -0.34em; /* sit 。 where the narrow "." was; it extends into the trailing space */ } /* TCO war-room vertical label: writing-mode:vertical-rl + rotate(180deg) is a Latin-only trick to read bottom-to-top. Japanese in vertical-rl already reads top-to-bottom correctly, so the 180° rotation flips it upside down. Drop the rotation for JA. */ html[lang="ja"] .wr-mid .big{ transform: none; } /* ------------------------------------------------------------------------ R061 — Japanese-only hero refinements (native-speaker screenshot review). Every rule below is scoped to html[lang="ja"] and has ZERO effect on English or the other six locales. ------------------------------------------------------------------------ */ /* (a) Accent-highlight flip. On these two-part headlines the English accent sits on the trailing , but the Japanese translation reorders the highlighted phrase to the FRONT. So for Japanese, move the cyan→blue gradient onto the first phrase (.jp-hl) and render the as ordinary heading text (theme-aware via currentColor). English is unchanged because these rules only match under html[lang="ja"]. */ html[lang="ja"] .jp-flip em{ background:none; -webkit-background-clip:border-box;background-clip:border-box; color:inherit;-webkit-text-fill-color:currentColor; } html[lang="ja"] .jp-flip .jp-hl{ background:linear-gradient(100deg,var(--cyan),var(--blue-bright)); -webkit-background-clip:text;background-clip:text; color:transparent;-webkit-text-fill-color:transparent; } /* (b) Per-language line breaks. A few hero lines wrap differently in Japanese; the reviewer specified an exact grouping that can't be produced by the shared English markup. Each affected heading ships the English node (.h-en) plus a pre-broken Japanese twin (.h-ja, translate="no"); we show whichever matches the active language. Other locales keep using .h-en (translated by their own dictionaries), so only Japanese sees the twin. */ .h-ja{display:none} html[lang="ja"] .h-en{display:none} html[lang="ja"] .h-ja{display:block} /* (c) Fit-to-two-lines. A few solution heroes wrap their two-phrase headline onto 3–4 lines in Japanese because a ~10-character phrase is wider than the hero's grid column at the capped desktop font size. Trim the Japanese font slightly (Japanese only, these pages only) so each phrase sits on one line — giving the exact 2-line result the reviewer asked for, without touching the English size. */ html[lang="ja"] .cap-hero h1.jp-fit{ font-size:clamp(30px,3.6vw,46px); } /* The CTA headline box is capped at 18ch — fine for English, but a ~12-char Japanese phrase per line is wider than that, so the pre-broken twin wrapped to 4 lines. Give the Japanese twin room to keep each phrase on one line. */ html[lang="ja"] .cap-cta h2.h-ja{ max-width:min(94vw,760px); } /* ========================================================================= STATIC NO-JS / CRAWLER FALLBACKS (R059) The header & footer are injected by site.js. To keep the internal link graph present in RAW HTML (for non-rendering crawlers, no-JS users, and resilience if site.js fails), every page carries a static sitemap seed inside [data-footer] and a