@import url('share.css?v=3'); /* =================================================================== Digital Disruption Matrix 2026 - shared shell (dark design system) Sidebar + topbar chrome used on every interior page. Tokens mirror Public/design-tokens.json (v1.1.0). =================================================================== */ :root{ --bg:#0a0e14; --bg2:#0d1117; --panel:#11161f; --panel2:#161b22; --line:#1f2733; --line2:#2a3340; --ink:#e8eef5; --ink2:#9aa7b5; --ink3:#828e9e; --read:#c9d2dd; --accent:#e08a30; --accent-tint:rgba(224,138,48,0.14); --on-accent:#1a1205; --up:#3fb950; --down:#f85149; --flat:#8b949e; /* fixed technology hues */ --tech-descriptive:#ebc840; --tech-genai:#e84b8a; --tech-blockchain:#f05a32; --tech-robotics:#2abfa3; --tech-quantum:#4a90d9; --display:'Montserrat','IBM Plex Sans',-apple-system,sans-serif; --sans:'IBM Plex Sans',-apple-system,sans-serif; --mono:'IBM Plex Mono',ui-monospace,monospace; /* fluid chrome: shrinks ~9% toward 1280px-class laptops, pixel-identical at >=1856px */ --nav-w:clamp(240px, 5.9vw + 164px, 274px); --topbar-h:clamp(60px, 1.39vw + 42px, 68px); } *{box-sizing:border-box;margin:0;padding:0} html,body{background:var(--bg);color:var(--ink);font-family:var(--sans);-webkit-font-smoothing:antialiased} /* avoid FOUC: body reveals only once shell.css is parsed (it is render-blocking in ) */ body{animation:shell-in .35s ease both} @keyframes shell-in{from{opacity:0}to{opacity:1}} a{color:inherit} img{max-width:100%} /* page-wide faint radial flourish (design-system pageBackdrop) */ .glow{position:fixed;inset:0;z-index:0;pointer-events:none; background:radial-gradient(1100px 600px at 12% -8%, rgba(224,138,48,0.07), transparent 55%), radial-gradient(900px 600px at 100% 0%, rgba(74,144,217,0.07), transparent 50%)} /* ---------- SIDEBAR ---------- */ .sidebar{position:fixed;top:0;left:0;bottom:0;width:var(--nav-w);z-index:40; display:flex;flex-direction:column; background:rgba(13,17,23,0.82);border-right:1px solid var(--line); backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px); overflow-y:auto;scrollbar-width:thin;scrollbar-color:var(--line2) transparent} .sidebar::-webkit-scrollbar{width:8px} .sidebar::-webkit-scrollbar-thumb{background:var(--line2);border-radius:4px} .brand{padding:22px 22px 18px} .brand a{text-decoration:none} .brand .mark{font-family:var(--display);font-weight:700;color:var(--ink); font-size:clamp(19px, 0.35vw + 14.6px, 21px);line-height:1.18;letter-spacing:-.015em} .brand .ed{margin-top:7px;font-family:var(--mono);font-weight:500;font-size:clamp(12.5px, 0.17vw + 10.3px, 13.5px); letter-spacing:.16em;text-transform:uppercase;color:var(--accent)} .nav{padding:16px 12px 26px;flex:1} .nav-group{margin-top:20px} .nav-group:first-child{margin-top:6px} .nav-group a + a{margin-top:2px} /* standalone top-level links (Key Findings · Enter the Matrix) */ .nav-top{margin-top:4px;margin-bottom:6px;padding-bottom:14px;border-bottom:1px solid var(--line)} .nav-top a{font-weight:600;color:var(--ink)} .nav-eyebrow{display:flex;align-items:center;gap:8px; padding:0 10px 10px;font-family:var(--mono);font-weight:500;font-size:clamp(12.5px, 0.17vw + 10.3px, 13.5px); letter-spacing:.2em;text-transform:uppercase;color:var(--ink2)} .nav-eyebrow::before{content:"";width:18px;height:1px;background:var(--accent);flex:none;opacity:.85} .nav a{display:block;position:relative;padding:9px 12px;border-radius:8px; font-family:var(--sans);font-size:clamp(14.5px, 0.26vw + 11.2px, 16px);color:var(--ink2);text-decoration:none; transition:color .2s,background .2s} /* "Explore by Sector" and "Explore by Data" links read white; "More" stays secondary so the section feels less prominent. */ .nav-group:not(:last-child) a{color:var(--ink)} .nav a::before{content:"";position:absolute;left:4px;top:50%;transform:translateY(-50%); width:2px;height:0;border-radius:2px;background:var(--accent);transition:height .2s} .nav a:hover{color:var(--ink);background:var(--bg2)} .nav a:hover::before{height:16px} .nav a.active{color:var(--accent);background:var(--accent-tint)} .nav a.active::before{height:18px} /* ---------- TOPBAR ---------- */ .topbar{position:fixed;top:0;right:0;left:var(--nav-w);height:var(--topbar-h);z-index:35; display:flex;align-items:center;justify-content:space-between;gap:12px; padding:0 clamp(20px,3.5vw,44px); background:linear-gradient(180deg, rgba(10,14,20,0.86), rgba(10,14,20,0.42)); border-bottom:1px solid var(--line); backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)} .crumb{display:flex;align-items:center;gap:9px;font-family:var(--mono);font-size:13.5px; letter-spacing:.14em;text-transform:uppercase;color:var(--ink3);min-width:0;overflow:hidden;white-space:nowrap} .crumb b{color:var(--ink2);font-weight:500} .crumb .sep{color:var(--line2)} .actions{display:flex;align-items:center;gap:14px} .btn{display:inline-flex;align-items:center;gap:9px;height:46px;padding:0 21px; border-radius:30px;font-family:var(--mono);font-weight:500;font-size:12.5px; letter-spacing:.06em;text-transform:uppercase;text-decoration:none;cursor:pointer;white-space:nowrap; transition:border-color .2s,background .2s,color .2s,box-shadow .2s,transform .2s} .btn svg{width:17px;height:17px} .btn-ghost{background:var(--bg2);border:1px solid var(--line2);color:var(--ink)} .btn-ghost:hover{border-color:var(--accent);color:var(--accent); background:var(--accent-tint);transform:translateY(-1px)} .btn-primary{background:var(--accent);border:1px solid var(--accent);color:var(--on-accent); font-weight:600;box-shadow:0 8px 24px -12px var(--accent)} .btn-primary:hover{transform:translateY(-1px); box-shadow:0 0 0 1px var(--accent), 0 12px 30px -12px var(--accent-tint)} /* animated travelling-border effect (Key findings + Heatmatrix) */ @property --bdr-angle{syntax:'';initial-value:0deg;inherits:false} .btn-anim{position:relative;isolation:isolate} .btn-anim::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1.6px; background:conic-gradient(from var(--bdr-angle), transparent 0deg, transparent 250deg, var(--accent) 320deg, #fff 340deg, var(--accent) 350deg, transparent 360deg); -webkit-mask:linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite:xor;mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0); mask-composite:exclude;animation:bdr-rotate 4.5s linear infinite;pointer-events:none} @keyframes bdr-rotate{to{--bdr-angle:360deg}} @media (prefers-reduced-motion:reduce){.btn-anim::before{animation:none;display:none}} .navtoggle{display:none} /* ---------- PAGE / MAIN ---------- */ .page{position:relative;z-index:5;margin-left:var(--nav-w);min-height:100vh;padding-top:var(--topbar-h)} .container{max-width:1240px;margin:0 auto;padding:clamp(20px,2.2vw,30px) clamp(20px,2.4vw,34px) 64px} /* page hero (title + description on composed pages) */ .eyebrow{display:flex;align-items:center;gap:12px;font-family:var(--mono);font-weight:500;font-size:11px; letter-spacing:.32em;text-transform:uppercase;color:var(--accent);margin-bottom:18px} .eyebrow::before{content:"";width:26px;height:1px;background:var(--accent);flex:none} .page-title{font-family:var(--display);font-weight:700;font-size:clamp(30px,5vw,52px); line-height:1.02;letter-spacing:-.02em;color:var(--ink);max-width:18ch} .page-lede{margin-top:18px;font-family:var(--sans);font-size:clamp(14.5px, 0.26vw + 11.2px, 16px);line-height:1.72;color:var(--read);max-width:76ch} .focus-chip{display:inline-flex;align-items:center;gap:10px;margin-top:22px;padding:8px 16px;border-radius:30px; border:1px solid var(--accent);background:var(--accent-tint);font-family:var(--display);font-weight:600; font-size:17px;color:var(--accent)} .focus-chip .pre{font-family:var(--mono);font-weight:500;font-size:13.5px;letter-spacing:.18em;color:var(--ink3)} .focus-chip svg{width:22px;height:22px} /* section wrapper for composed pages */ .section{margin-top:clamp(34px,4vw,52px);scroll-margin-top:calc(var(--topbar-h) + 18px)} .section-head{display:flex;align-items:baseline;gap:14px;flex-wrap:wrap;margin-bottom:8px} .section-num{font-family:var(--mono);font-weight:600;font-size:12.5px;color:var(--accent);letter-spacing:.08em} .section-title{font-family:var(--display);font-weight:700;font-size:clamp(20.5px, 0.43vw + 15px, 23px);letter-spacing:-.01em;color:var(--ink)} .section-desc{font-family:var(--sans);font-size:clamp(14.5px, 0.26vw + 11.2px, 16px);line-height:1.6;color:var(--read);margin-top:6px;max-width:82ch} .note-strip{display:flex;gap:10px;align-items:flex-start;margin-top:14px;padding:13px 17px;border:1px dashed var(--line2); border-radius:11px;background:var(--panel2);font-family:var(--sans);font-size:13px;line-height:1.55;color:var(--read)} .note-strip svg{width:17px;height:17px;color:var(--accent);flex:none;margin-top:1px} /* embedded dashboard iframe - seamless: no border, no inner scrollbar, blends in */ .embed-frame{width:100%;border:0;background:var(--bg);display:block;overflow:hidden;color-scheme:dark} .embed-wrap{position:relative;margin-top:14px} /* sticky clickable scrollspy for composed pages */ .scrollspy{position:sticky;top:calc(var(--topbar-h) + 10px);z-index:20;display:flex;gap:6px;flex-wrap:wrap; margin:24px 0 4px;padding:6px;border:1px solid var(--line);border-radius:30px; background:rgba(13,17,23,0.72);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);width:fit-content;max-width:100%} .scrollspy a{font-family:var(--mono);font-size:16px;letter-spacing:.03em;color:var(--ink2);text-decoration:none; padding:9px 17px;border-radius:30px;transition:color .2s,background .2s;display:inline-flex;align-items:center;gap:8px;white-space:nowrap} .scrollspy a .n{font-size:14px;color:var(--ink3);font-weight:500} .scrollspy a:hover{color:var(--ink);background:var(--bg2)} .scrollspy a.active{background:var(--accent);color:var(--on-accent)} .scrollspy a.active .n{color:var(--on-accent);opacity:.75} @media (max-width:680px){.scrollspy{top:calc(var(--topbar-h) + 6px)}.scrollspy a{padding:8px 13px;font-size:11px}} /* generic card grid for links / placeholders */ .linkcards{display:grid;gap:16px;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));margin-top:26px} .linkcard{display:flex;flex-direction:column;gap:8px;padding:20px;border:1px solid var(--line);border-radius:14px; background:var(--panel);text-decoration:none;transition:border-color .25s,transform .25s,box-shadow .25s} .linkcard:hover{border-color:var(--accent);transform:translateY(-3px); box-shadow:0 0 0 1px var(--accent),0 16px 40px -18px var(--accent-tint)} .linkcard .lc-ey{font-family:var(--mono);font-size:13.5px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink3)} .linkcard .lc-t{font-family:var(--display);font-weight:700;font-size:18px;color:var(--ink)} .linkcard .lc-d{font-family:var(--sans);font-size:13px;line-height:1.55;color:var(--ink2)} .linkcard .lc-arr{margin-top:auto;font-family:var(--mono);font-size:16px;color:var(--accent)} /* placeholder block */ .placeholder{margin-top:30px;display:grid;place-items:center;text-align:center;gap:14px; min-height:340px;border:1px dashed var(--line2);border-radius:18px;background:var(--panel);padding:48px 24px} .placeholder .ph-ic{width:58px;height:58px;border-radius:16px;display:grid;place-items:center; border:1px solid var(--line2);color:var(--accent);background:var(--accent-tint)} .placeholder .ph-ic svg{width:28px;height:28px} .placeholder h2{font-family:var(--display);font-weight:700;font-size:24px;color:var(--ink)} .placeholder p{font-family:var(--sans);font-size:16px;line-height:1.65;color:var(--read);max-width:52ch} .placeholder .ph-tag{font-family:var(--mono);font-size:14px;letter-spacing:.2em;text-transform:uppercase; color:var(--ink3);padding:6px 14px;border:1px solid var(--line2);border-radius:30px} footer.site{margin-top:64px;padding-top:22px;border-top:1px solid var(--line); font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink3);display:flex; justify-content:space-between;gap:16px;flex-wrap:wrap} /* ---------- responsive: collapse sidebar to drawer ---------- */ .scrim{display:none} @media (max-width:1080px){ .page{margin-left:0} .topbar{left:0} .navtoggle{display:inline-flex;align-items:center;justify-content:center; width:42px;height:42px;border-radius:10px;cursor:pointer; background:var(--bg2);border:1px solid var(--line2);color:var(--ink)} .navtoggle svg{width:20px;height:20px} .sidebar{transform:translateX(-100%);box-shadow:0 0 60px rgba(0,0,0,.6); transition:transform .3s cubic-bezier(.2,.8,.2,1)} body.nav-open .sidebar{transform:translateX(0)} body.nav-open .scrim{display:block;position:fixed;inset:0;z-index:38;background:rgba(6,9,13,.6)} } @media (max-width:680px){ .crumb{display:none} .btn .lbl{display:none} .btn{padding:0 13px} .btn-primary .lbl{display:inline} } @media (prefers-reduced-motion:reduce){*{animation-duration:.001s!important;transition:none!important}} /* ===== selected-state Focus pill (tech/industry pages + T×I header) ===== */ .focus-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 13px;border-radius:999px; background:#ebc840;color:#111827;font-family:var(--sans);font-weight:600;font-size:13px; text-transform:none;letter-spacing:0;text-decoration:none;white-space:nowrap;transition:filter .2s,transform .2s} .focus-pill:hover{filter:brightness(1.07);transform:translateY(-1px)} .focus-pill[hidden]{display:none} .focus-pill svg{width:15px;height:15px} .crumb a.crumb-link{color:var(--ink2);text-decoration:none;transition:color .2s} .crumb a.crumb-link:hover{color:var(--ink)} /* ===== Chair's Perspective (replaces the definition paragraph) ===== */ .chair-perspective{margin-top:clamp(28px,3vw,38px);max-width:90ch} .chair-title{font-family:var(--sans);font-style:italic;font-weight:500;font-size:15px;letter-spacing:.01em;color:var(--ink2)} .chair-body{margin-top:6px;font-family:var(--sans);font-style:italic;font-size:16px;color:var(--read)} .chair-headline{margin-top:7px;font-family:var(--display);font-weight:700;font-size:clamp(17px,0.6vw+15px,21px);line-height:1.26;letter-spacing:-.01em;color:var(--ink)} .chair-teaser,.chair-full p{margin:0;font-family:var(--sans);font-size:clamp(15px,0.24vw+13px,16.5px);line-height:1.72;color:var(--read)} .chair-teaser{margin-top:10px} .chair-full{margin-top:10px} .chair-full p + p{margin-top:13px} .chair-more{margin-left:5px;color:var(--accent);font-weight:600;cursor:pointer;white-space:nowrap} .chair-more:hover{text-decoration:underline} .chair-more:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px} .chair-readmore{margin-top:18px;font-family:var(--sans);font-size:13.5px;line-height:1.7;color:var(--ink2)} .chair-readmore .rm-label{font-weight:600;color:var(--ink2);margin-right:3px} .chair-readmore a{color:var(--accent);text-decoration:none} .chair-readmore a:hover{text-decoration:underline} .chair-readmore .rm-sep{color:var(--ink3);margin:0 5px} .chair-less{display:inline-block;margin-top:16px;padding:0;background:none;border:0;font-family:var(--sans);font-size:15px;font-weight:600;color:var(--accent);cursor:pointer} .chair-less:hover{text-decoration:underline} .chair-less:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:3px} /* ===== tabbed sections (Technology / Industry / Tech×Industry pages) ===== */ .tabbar{display:flex;flex-wrap:wrap;gap:8px;border-bottom:1px solid rgba(255,255,255,.10);margin:26px 0 24px} .tab{font-family:var(--sans);font-weight:500;font-size:15px;color:var(--read);background:transparent;border:0; cursor:pointer;padding:9px 18px;border-radius:6px 6px 0 0;transition:color .2s,background .2s} .tab:hover{color:#fff;background:rgba(255,255,255,.10)} .tab[aria-selected="true"]{background:var(--accent);color:#0a0e14;font-weight:600} .tab:focus-visible{outline:none;box-shadow:0 0 0 2px var(--accent)} .tabpanel{animation:tabfade .25s ease} .tabpanel[hidden]{display:none} @keyframes tabfade{from{opacity:0}to{opacity:1}} /* consistent tab-section header: subtext, divider line, then a little space before the embed title */ .tabpanel>.section-desc{border-bottom:1px solid var(--line);padding-bottom:18px;margin-bottom:26px!important}