:root{--bg:#05080d;--panel:#0a111b;--panel2:#07101c;--line:rgba(87,161,255,.22);--blue:#318cff;--blue2:#65a9ff;--ice:#e8eef7;--ink:#f4f8fe;--muted:#aebbd0;--muted2:#93a5bd;--shadow:0 24px 60px -22px rgba(0,0,0,.7);--sans:"Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--display:"Poppins","Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;--r-sm:8px;--r-md:12px;--r-lg:16px;--r-xl:22px;--ease:cubic-bezier(.2,.7,.2,1)} @font-face{font-family:"Inter";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/inter-400.woff2) format("woff2")} @font-face{font-family:"Inter";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/inter-600.woff2) format("woff2")} @font-face{font-family:"Inter";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/inter-800.woff2) format("woff2")} @font-face{font-family:"Inter";font-style:normal;font-weight:900;font-display:swap;src:url(fonts/inter-900.woff2) format("woff2")} @font-face{font-family:"Space Grotesk";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/space-grotesk-500.woff2) format("woff2")} @font-face{font-family:"Space Grotesk";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/space-grotesk-600.woff2) format("woff2")} @font-face{font-family:"Space Grotesk";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/space-grotesk-700.woff2) format("woff2")} *{box-sizing:border-box}html{scroll-behavior:smooth;scroll-padding-top:100px;-webkit-text-size-adjust:100%}body{margin:0;background:radial-gradient(circle at 50% 0%,#101d32 0%,var(--bg) 38%,#020407 100%);color:var(--ice);font-family:var(--sans);line-height:1.6;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility}img{max-width:100%;display:block}a{color:inherit;text-decoration:none}.wrap{width:min(1180px,calc(100% - 48px));margin:auto}.site-header{position:sticky;top:0;z-index:50;background:rgba(5,8,13,.88);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border-bottom:1px solid var(--line)}.nav-wrap{height:82px;display:flex;align-items:center;justify-content:space-between;gap:24px}.brand{display:flex;align-items:center;gap:12px;font-weight:800;letter-spacing:1.8px}.brand img{width:52px;height:52px;object-fit:cover;border-radius:12px;border:1px solid var(--line)}.brand b{color:var(--blue)}.nav-links{display:flex;flex-wrap:nowrap;gap:20px;color:var(--muted);font-size:.9rem;white-space:nowrap}.nav-links a:hover,.social-links a:hover,footer a:hover{color:var(--blue2)}.menu-toggle{display:none;background:transparent;border:1px solid var(--line);color:var(--ice);padding:9px 12px;border-radius:6px}.hero{padding:72px 0 62px}.hero-grid{display:grid;grid-template-columns:1.08fr .92fr;gap:48px;align-items:center}.eyebrow{text-transform:uppercase;letter-spacing:3px;color:var(--blue2);font-size:.76rem;font-weight:800}.hero h1{font-size:clamp(2.55rem,4.7vw,4.6rem);line-height:1.05;letter-spacing:-.032em;margin:18px 0 24px;max-width:16ch;font-weight:800;text-wrap:balance}.hero p{color:var(--muted);font-size:1.16rem;max-width:720px}.actions{display:flex;gap:14px;flex-wrap:wrap;margin-top:30px}.btn{display:inline-flex;align-items:center;justify-content:center;padding:14px 24px;min-height:48px;border-radius:10px;border:1px solid #4698ff;background:linear-gradient(135deg,#1f7ff0,#0f3a72);font-weight:700;letter-spacing:.2px;color:#fff;cursor:pointer}.btn.secondary{background:transparent;border-color:var(--line)}.hero-logo-panel{min-height:470px;padding:24px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,rgba(25,56,96,.38),rgba(4,8,14,.62));display:grid;place-items:center;box-shadow:var(--shadow);overflow:hidden}.hero-logo-panel img{width:100%;height:100%;object-fit:cover;border-radius:14px}.topic-strip{border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel2)}.strip-inner{padding:20px 0;display:flex;gap:26px;justify-content:space-between;flex-wrap:wrap;color:#c3d2e5;font-size:.9rem}section{padding:88px 0}.alt-section{background:linear-gradient(180deg,rgba(7,16,28,.72),rgba(5,8,13,.5));border-top:1px solid rgba(87,161,255,.12);border-bottom:1px solid rgba(87,161,255,.12)}.section-head{max-width:800px;margin-bottom:36px}.section-head h2,.about-grid h2,.contact-grid h2{font-size:clamp(1.9rem,3.3vw,2.9rem);line-height:1.1;letter-spacing:-.022em;margin:12px 0 16px;font-weight:800;text-wrap:balance}.section-head p,.about-grid p,.contact-grid p{color:var(--muted)}.card-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(216px,1fr));gap:18px}.card{padding:28px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(160deg,rgba(18,34,55,.72),rgba(5,10,17,.72));min-height:240px}.card-mark{display:inline-grid;place-items:center;min-width:48px;height:34px;padding:0 10px;border-radius:999px;border:1px solid rgba(101,169,255,.42);color:var(--blue2);font-size:.75rem;font-weight:800;letter-spacing:1px}.card h3{margin:20px 0 10px}.card p{color:var(--muted);margin:0}.video-grid{display:grid;grid-template-columns:1fr 1fr;gap:22px}.video-card{border:1px solid var(--line);border-radius:16px;overflow:hidden;background:var(--panel)}.video-placeholder{aspect-ratio:16/9;display:grid;place-items:center;background:radial-gradient(circle at 50% 50%,#14345e,#050b13 68%);color:#bdd4ee;border-bottom:1px solid var(--line)}.video-copy{padding:24px}.video-copy h3{margin:0 0 8px}.video-copy p{margin:0;color:var(--muted)}.about-grid,.contact-grid{display:grid;grid-template-columns:.85fr 1.15fr;gap:58px}.social-links{display:flex;gap:12px;flex-wrap:wrap;margin-top:24px}.social-links a{padding:9px 13px;border:1px solid var(--line);border-radius:999px;color:#d7e6f8}.contact-form{padding:28px;border:1px solid var(--line);border-radius:16px;background:linear-gradient(160deg,rgba(18,34,55,.72),rgba(5,10,17,.72));display:grid;gap:10px}.contact-form label{font-size:.88rem;color:#dbe8f8}.contact-form input,.contact-form select,.contact-form textarea{width:100%;padding:13px 15px;background:#050a11;color:var(--ice);border:1px solid rgba(87,161,255,.27);border-radius:10px;font:inherit}.contact-form textarea{resize:vertical}.form-note{font-size:.8rem;margin:4px 0 0;color:var(--muted2)!important}footer{border-top:1px solid var(--line);padding:30px 0;color:var(--muted2);font-size:.88rem}.footer-inner,.footer-brand{display:flex;align-items:center;justify-content:space-between;gap:20px;flex-wrap:wrap}.footer-brand{justify-content:flex-start}.footer-brand img{width:54px;height:54px;object-fit:cover;border-radius:10px;border:1px solid var(--line)} @media(max-width:980px){.card-grid{grid-template-columns:1fr 1fr}.hero-grid,.about-grid,.contact-grid{grid-template-columns:1fr}.hero-logo-panel{min-height:360px;order:-1}.hero{padding-top:42px}} @media(max-width:720px){.wrap{width:min(100% - 28px,1180px)}.menu-toggle{display:block}.nav-links{display:none;position:absolute;left:14px;right:14px;top:72px;padding:18px;background:#07101c;border:1px solid var(--line);border-radius:10px;flex-direction:column}.nav-links.open{display:flex}.brand span{font-size:.87rem}.hero h1{letter-spacing:-1.4px}.card-grid,.video-grid{grid-template-columns:1fr}.hero-logo-panel{min-height:280px;padding:14px}section{padding:68px 0}} .video-player{aspect-ratio:9/16;background:#000}.video-player iframe{width:100%;height:100%;border:0;display:block} /* --- Topic / news subpages (matches core tokens above) --- */ .subhero{padding:64px 0 12px} .subhero h1{font-size:clamp(2.2rem,4vw,3.7rem);line-height:1.05;letter-spacing:-1.6px;margin:14px 0 18px;max-width:840px} .subhero p{color:var(--muted);font-size:1.14rem;max-width:770px} .breadcrumb{display:flex;gap:9px;align-items:center;flex-wrap:wrap;color:var(--muted);font-size:.85rem} .breadcrumb a:hover{color:var(--blue2)} .breadcrumb span{color:#5f6f86} .breadcrumb b{color:#c3d2e5;font-weight:600} a.card{display:block;transition:border-color .2s,transform .2s} a.card:hover{border-color:rgba(101,169,255,.55);transform:translateY(-3px)} .card-link{display:inline-block;margin-top:16px;color:var(--blue2);font-weight:700;font-size:.9rem} .source-strip{display:flex;flex-wrap:wrap;gap:10px;margin-top:6px} .source-chip{padding:10px 15px;border:1px solid var(--line);border-radius:999px;color:#d7e6f8;font-size:.87rem;background:var(--panel2);transition:border-color .2s,color .2s} .source-chip:hover{border-color:rgba(101,169,255,.55);color:var(--blue2)} .news-list{display:grid;grid-template-columns:1fr 1fr;gap:18px} .news-item{display:flex;flex-direction:column;padding:26px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(160deg,rgba(18,34,55,.72),rgba(5,10,17,.72));transition:border-color .2s} .news-item:hover{border-color:rgba(101,169,255,.5)} .news-top{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap} .news-badge{display:inline-grid;place-items:center;padding:5px 11px;border-radius:999px;border:1px solid rgba(101,169,255,.42);color:var(--blue2);font-size:.71rem;font-weight:800;letter-spacing:.6px;text-transform:uppercase} .news-date{color:var(--muted2);font-size:.78rem} .news-item h3{margin:0 0 10px;font-size:1.13rem;line-height:1.32} .news-item h3 a:hover{color:var(--blue2)} .news-item p{margin:0 0 18px;color:var(--muted);font-size:.96rem} .news-read{margin-top:auto;color:var(--blue2);font-weight:700;font-size:.86rem} .source-note{color:var(--muted2);font-size:.82rem;margin-top:26px} @media(max-width:720px){.news-list{grid-template-columns:1fr}} /* --- Embedded YouTube players in the video/podcast section --- */ .video-frame{aspect-ratio:16/9;background:#000;border-bottom:1px solid var(--line);position:relative} .video-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} /* --- Webinars (coming soon) section --- */ .webinar-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:18px} .status-pill{display:inline-flex;align-items:center;gap:8px;padding:6px 13px;border-radius:999px;border:1px solid rgba(101,169,255,.42);color:var(--blue2);font-size:.72rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase} .status-pill::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--blue2);box-shadow:0 0 0 3px rgba(101,169,255,.20)} .webinar-grid .card h3{margin:18px 0 10px} .webinar-status{margin-top:16px;color:var(--muted2);font-size:.85rem} .webinar-cta{margin-top:34px} .webinar-note{margin-top:16px;color:var(--muted2);font-size:.86rem} .webinar-note a{color:var(--blue2)} .webinar-note a:hover{color:var(--ice)} @media(max-width:720px){.webinar-grid{grid-template-columns:1fr}} /* --- Home hero logo animation (motion only — layout, colors & sizing unchanged) --- */ @keyframes bb-logo-in{from{opacity:0;transform:translateY(16px) scale(.965)}to{opacity:1;transform:translateY(0) scale(1)}} @keyframes bb-logo-float{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}} @keyframes bb-logo-glow{0%,100%{box-shadow:0 25px 80px rgba(0,0,0,.38),0 0 24px rgba(49,140,255,.10)}50%{box-shadow:0 28px 84px rgba(0,0,0,.44),0 0 54px rgba(49,140,255,.30)}} .hero-logo-panel{transition:transform .4s cubic-bezier(.2,.7,.2,1),filter .4s ease;animation:bb-logo-in .9s cubic-bezier(.2,.7,.2,1) backwards,bb-logo-glow 5s ease-in-out 1s infinite;will-change:transform,box-shadow} .hero-logo-panel img{animation:bb-logo-float 6s ease-in-out 1.1s infinite;will-change:transform} .hero-logo-panel:hover{transform:translateY(-5px) scale(1.02);filter:brightness(1.05)} .brand img{transition:transform .3s ease,filter .3s ease} .brand:hover img{transform:scale(1.08) rotate(-2deg);filter:drop-shadow(0 0 8px rgba(49,140,255,.55))} @media(prefers-reduced-motion:reduce){.hero-logo-panel,.hero-logo-panel img{animation:none}.hero-logo-panel:hover{transform:none;filter:none}} /* --- Market ticker (top bar) --- */ .ticker.live{display:block} .ticker:hover @keyframes ticker-scroll{from{transform:translateX(0)}to{transform:translateX(-50%)}} @media(prefers-reduced-motion:reduce){} @media(max-width:640px){} /* --- Long-form article typography --- */ .article-meta{color:var(--muted2);font-size:.85rem;margin:6px 0 20px} .article-lede{color:var(--ink);font-size:1.24rem;line-height:1.62;max-width:760px;border-left:3px solid var(--blue);padding-left:20px} .article-body .wrap{max-width:760px} .article-body p{color:var(--muted);font-size:1.06rem;line-height:1.78;margin:0 0 22px} .article-body strong{color:var(--ink)} .article-body em{color:#c3d2e5} .article-body h2{font-size:1.62rem;letter-spacing:-.6px;margin:44px 0 18px;color:var(--ink)} .article-body ul,.article-body ol{color:var(--muted);font-size:1.06rem;line-height:1.78;padding-left:22px;margin:0 0 24px} .article-body li{margin-bottom:13px} .article-body ol li::marker{color:var(--blue2);font-weight:800} .article-body ul li::marker{color:var(--blue2)} .article-rule{border:0;border-top:1px solid var(--line);margin:42px 0 28px} .article-note{font-size:.86rem!important;color:var(--muted2)!important;line-height:1.65!important} .article-cta{padding:22px;border:1px solid var(--line);border-radius:14px;background:var(--panel2);font-size:1rem!important} .article-cta a{color:var(--blue2);font-weight:700} .article-cta a:hover{color:var(--ice)} /* --- Featured article block on the home page --- */ .featured{display:block;padding:30px;border:1px solid var(--line);border-radius:16px;margin-top:26px; background:linear-gradient(160deg,rgba(26,52,88,.6),rgba(5,10,17,.75));transition:border-color .25s,transform .25s} .featured:hover{border-color:rgba(101,169,255,.6);transform:translateY(-3px)} .featured .flag{display:inline-block;padding:5px 12px;border-radius:999px;border:1px solid rgba(101,169,255,.45); color:var(--blue2);font-size:.7rem;font-weight:800;letter-spacing:.9px;text-transform:uppercase} .featured h3{margin:16px 0 10px;font-size:1.6rem;letter-spacing:-.6px;line-height:1.25;color:var(--ink)} .featured p{color:var(--muted);margin:0 0 16px;max-width:720px} .featured .go{color:var(--blue2);font-weight:700;font-size:.92rem} /* ============ Readiness Assessment app ============ */ .hidden{display:none} .nav-cta{color:var(--blue2)!important;font-weight:700} .assess-wrap{max-width:860px} .assess-badges{display:flex;flex-wrap:wrap;gap:9px;margin-top:24px} .assess-badge{padding:7px 14px;border-radius:999px;border:1px solid var(--line);background:var(--panel2);color:#c3d2e5;font-size:.8rem;font-weight:600} /* progress */ .assess-progress{position:sticky;top:0;z-index:20;background:rgba(5,8,13,.94);padding:16px 0 14px;margin-bottom:8px;border-bottom:1px solid var(--line)} .assess-progress-track{height:6px;background:#0d1826;border-radius:4px;overflow:hidden} .assess-progress-fill{height:100%;width:0;background:linear-gradient(90deg,var(--blue),var(--blue2));transition:width .3s ease} .assess-progress-label{display:block;margin-top:8px;color:var(--muted);font-size:.8rem} /* meta selects */ .assess-meta{display:grid;grid-template-columns:1fr 1fr;gap:16px;padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--panel2);margin:22px 0 30px} .assess-label{display:block;font-size:.82rem;color:var(--muted);margin-bottom:8px;font-weight:600} .assess-select{width:100%;padding:12px 13px;border-radius:10px;border:1px solid var(--line);background:#070d16;color:var(--ink);font-size:.94rem;font-family:inherit} .assess-select:focus{outline:none;border-color:var(--blue)} /* domains + questions */ .assess-domain{margin-bottom:34px;padding-bottom:8px} .assess-domain-head{display:flex;gap:14px;align-items:flex-start;padding-bottom:18px;margin-bottom:20px;border-bottom:1px solid var(--line)} .assess-mark{flex:none;display:inline-grid;place-items:center;min-width:52px;height:30px;padding:0 10px;border-radius:8px;border:1px solid rgba(101,169,255,.42);color:var(--blue2);font-size:.72rem;font-weight:800;letter-spacing:.8px} .assess-domain-head h3{margin:0 0 3px;font-size:1.2rem;color:var(--ink)} .assess-domain-head p{margin:0;color:var(--muted2);font-size:.88rem} .assess-q{margin-bottom:24px} .assess-qtext{margin:0 0 12px;color:var(--ink);font-size:1.02rem;line-height:1.5} .assess-opts{display:grid;grid-template-columns:repeat(4,1fr);gap:9px} .assess-opt{padding:12px 10px;border-radius:10px;border:1px solid var(--line);background:#070d16;color:var(--muted);font-size:.82rem;font-family:inherit;cursor:pointer;text-align:center;line-height:1.35;transition:border-color .18s,color .18s,background .18s} .assess-opt:hover{border-color:rgba(101,169,255,.6);color:var(--ink)} .assess-opt:focus-visible{outline:2px solid var(--blue);outline-offset:2px} .assess-opt.sel{background:rgba(49,140,255,.14);border-color:var(--blue);color:var(--ink);font-weight:700} .assess-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center;margin:30px 0} .btn:disabled{opacity:.45;cursor:not-allowed} .ghost-btn{background:transparent!important;border:1px solid var(--line)!important;color:var(--blue2)!important} .ghost-btn:hover{border-color:var(--blue)!important} .assess-privacy{color:var(--muted2);font-size:.82rem;margin:10px 0 0;flex-basis:100%} .assess-disclaimer{color:#6f8095;font-size:.78rem;line-height:1.6;margin-top:34px;padding-top:20px;border-top:1px solid var(--line)} /* results hero */ .res-hero{display:flex;gap:34px;align-items:center;flex-wrap:wrap;padding:32px;border:1px solid var(--line);border-radius:18px;background:linear-gradient(160deg,rgba(26,52,88,.6),rgba(5,10,17,.75));margin:26px 0 34px} .res-ring-wrap{position:relative;flex:none;width:170px;height:170px} .res-ring-svg{width:170px;height:170px;transform:rotate(-90deg)} .res-ring-bg{fill:none;stroke:#12203a;stroke-width:9} .res-ring-fg{fill:none;stroke:var(--blue);stroke-width:9;stroke-linecap:round;transition:stroke-dashoffset 1s cubic-bezier(.2,.7,.2,1)} .res-ring-center{position:absolute;inset:0;display:grid;place-content:center;text-align:center} .res-score{display:block;font-size:2.9rem;font-weight:800;letter-spacing:-2px;color:var(--ink);line-height:1} .res-score-unit{color:var(--muted2);font-size:.78rem} .res-hero-copy{flex:1;min-width:250px} .res-hero-copy h2{margin:6px 0 10px;font-size:2rem;letter-spacing:-1px;color:var(--blue2)} .res-hero-copy p{color:var(--muted);margin:0} .res-stats{display:flex;gap:26px;margin-top:20px} .res-stat-n{display:block;font-size:1.7rem;font-weight:800;color:var(--ink)} .res-stat-l{color:var(--muted2);font-size:.78rem} .res-block{margin-bottom:38px} .res-block h2{font-size:1.5rem;letter-spacing:-.5px;margin:0 0 6px} .res-sub{color:var(--muted);margin:0 0 20px;font-size:.96rem} /* domain bars */ .res-drow{margin-bottom:16px} .res-dtop{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:6px;font-size:.94rem;color:var(--ink)} .res-dscore{font-weight:800;font-size:.9rem} .res-dscore.low{color:#ff6b6b}.res-dscore.mid{color:#ffc857}.res-dscore.high{color:#3ddc97} .res-track{height:9px;background:#0d1826;border-radius:5px;overflow:hidden} .res-fill{height:100%;background:linear-gradient(90deg,#2f7bd6,#3ddc97);transition:width .8s cubic-bezier(.2,.7,.2,1)} .res-fill.low{background:linear-gradient(90deg,#a33,#ff6b6b)} .res-fill.mid{background:linear-gradient(90deg,#b8862f,#ffc857)} /* gap cards */ .res-gap{padding:20px;border:1px solid var(--line);border-radius:13px;background:var(--panel2);margin-bottom:13px} .res-gap-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:11px} .res-rank{display:inline-grid;place-items:center;width:25px;height:25px;border-radius:50%;background:var(--blue);color:#04070c;font-weight:800;font-size:.8rem} .res-sev{padding:3px 10px;border-radius:999px;font-size:.7rem;font-weight:800;letter-spacing:.5px;text-transform:uppercase} .res-sev.critical{background:rgba(255,107,107,.14);color:#ff6b6b;border:1px solid rgba(255,107,107,.4)} .res-sev.high{background:rgba(255,200,87,.13);color:#ffc857;border:1px solid rgba(255,200,87,.38)} .res-sev.moderate{background:rgba(101,169,255,.12);color:var(--blue2);border:1px solid rgba(101,169,255,.36)} .res-dom{color:var(--muted2);font-size:.74rem;font-weight:800;letter-spacing:.7px} .res-effort{margin-left:auto;color:var(--muted2);font-size:.76rem} .res-fix{margin:0 0 8px;color:var(--ink);font-size:1rem;line-height:1.55;font-weight:600} .res-why{margin:0;color:var(--muted);font-size:.9rem;line-height:1.55} .res-more,.res-none{color:var(--muted2);font-size:.88rem;margin-top:14px} /* lead capture */ .res-capture{padding:30px;border:1px solid rgba(101,169,255,.4);border-radius:18px;background:linear-gradient(160deg,rgba(26,52,88,.7),rgba(5,10,17,.8));margin-bottom:12px} .res-capture h2{margin:0 0 10px;font-size:1.45rem;letter-spacing:-.5px} .res-capture > p{color:var(--muted);margin:0 0 22px} .assess-capture-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:14px;margin-bottom:8px} @media print{ .site-header,.ticker,footer,.assess-actions,.res-capture,.menu-toggle{display:none!important} body{background:#fff!important;color:#111!important} .res-gap,.res-hero,.res-block{border-color:#ccc!important;background:#fff!important} .res-fix,.res-hero-copy h2,.res-score{color:#111!important} .res-why,.res-sub,.res-dtop{color:#444!important} } @media(max-width:720px){ .assess-meta{grid-template-columns:1fr} .assess-opts{grid-template-columns:1fr 1fr} .assess-capture-row{grid-template-columns:1fr} .res-hero{gap:22px} } /* --- Assessment promo block on home page --- */ .tool-promo{display:block;padding:32px;border:1px solid rgba(101,169,255,.45);border-radius:18px;margin-top:26px; background:linear-gradient(160deg,rgba(26,52,88,.72),rgba(5,10,17,.8));transition:border-color .25s,transform .25s} .tool-promo:hover{border-color:var(--blue);transform:translateY(-3px)} .tool-promo .flag{display:inline-block;padding:5px 12px;border-radius:999px;border:1px solid rgba(101,169,255,.5); color:var(--blue2);font-size:.7rem;font-weight:800;letter-spacing:.9px;text-transform:uppercase} .tool-promo h3{margin:16px 0 10px;font-size:1.7rem;letter-spacing:-.7px;line-height:1.22;color:var(--ink)} .tool-promo p{color:var(--muted);margin:0 0 18px;max-width:660px} .tool-promo .go{color:var(--blue2);font-weight:700;font-size:.95rem} /* --- Headshot placements --- */ /* About section portrait */ .about-photo{margin:26px 0 0;max-width:300px} .about-photo picture{position:relative;display:block;border-radius:16px;overflow:hidden} .about-photo img{width:100%;height:auto;display:block;border-radius:16px; border:1px solid rgba(101,169,255,.55); box-shadow:0 22px 60px rgba(0,0,0,.42), 0 0 34px -10px rgba(49,140,255,.55); transition:transform .35s cubic-bezier(.2,.7,.2,1),border-color .35s,box-shadow .35s} .about-photo img:hover{transform:translateY(-4px); border-color:rgba(122,190,255,.8); box-shadow:0 26px 66px rgba(0,0,0,.46), 0 0 44px -8px rgba(49,140,255,.75)} .about-photo .about-watch{margin-top:16px;width:100%;max-width:300px} /* Article byline */ .byline{display:flex;align-items:center;gap:14px;margin:14px 0 22px} .byline-avatar{width:52px;height:52px;border-radius:50%;border:2px solid var(--blue);flex:none; box-shadow:0 0 0 4px rgba(49,140,255,.12)} .byline-text{display:flex;flex-direction:column;line-height:1.4} .byline-name{color:var(--ink);font-weight:700;font-size:.98rem} .byline-meta{color:var(--muted2);font-size:.83rem} /* Assessment lead-capture trust signal */ .capture-head{display:flex;align-items:center;gap:16px;margin-bottom:14px} .capture-avatar{width:64px;height:64px;border-radius:50%;border:2px solid var(--blue2);flex:none; box-shadow:0 0 0 5px rgba(49,140,255,.12)} .capture-head h2{margin:0 0 4px!important} .capture-sig{color:var(--muted2);font-size:.85rem;margin:0} @media(max-width:720px){ .about-photo{max-width:220px} .capture-head{gap:12px} .capture-avatar{width:52px;height:52px} } /* ===================================================================== LINK AFFORDANCE — make it obvious what is clickable Base rule is `a{color:inherit;text-decoration:none}`, which makes text links invisible until hover. These rules restore affordance for links that sit INSIDE prose, while leaving structural links (nav, cards, buttons, brand, chips) styled as their own components. ===================================================================== */ /* 1. Inline prose links: colored + underlined, identifiable without hover */ .article-body p a, .article-body li a, .article-cta a, .article-note a, .webinar-note a, .subhero p a, .hero-copy p a, #about p a, #connect p a, .res-capture p a, .source-note a, .assess-disclaimer a{ color:var(--blue2); text-decoration:underline; text-decoration-color:rgba(101,169,255,.45); text-decoration-thickness:1.5px; text-underline-offset:3px; font-weight:600; border-radius:3px; transition:color .18s,text-decoration-color .18s,background .18s; } .article-body p a:hover, .article-body li a:hover, .article-cta a:hover, .article-note a:hover, .webinar-note a:hover, .subhero p a:hover, .hero-copy p a:hover, #about p a:hover, #connect p a:hover, .res-capture p a:hover, .source-note a:hover, .assess-disclaimer a:hover{ color:var(--ice); text-decoration-color:var(--blue); background:rgba(49,140,255,.10); } /* 2. Nav: underline slides in on hover so the target is unambiguous */ .nav-links a{position:relative;padding-bottom:3px} .nav-links a::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px; background:var(--blue);transform:scaleX(0);transform-origin:left;transition:transform .22s ease} .nav-links a:hover::after,.nav-links a:focus-visible::after{transform:scaleX(1)} .nav-links a:hover{color:var(--blue2)} .nav-links a.nav-cta::after{transform:scaleX(1);opacity:.5} .nav-links a.nav-cta:hover::after{opacity:1} /* 3. Cards & tiles: cursor + arrow motion make the whole tile read as clickable */ a.card,.featured,.tool-promo,.news-item h3 a{cursor:pointer} a.card .card-link,.featured .go,.tool-promo .go{display:inline-block;transition:transform .2s ease} a.card:hover .card-link,.featured:hover .go,.tool-promo:hover .go{transform:translateX(5px)} /* 4. News headlines: clearly links, not just bold text */ .news-item h3 a{color:var(--ink);text-decoration:underline;text-decoration-color:rgba(101,169,255,.3); text-decoration-thickness:1.5px;text-underline-offset:3px;transition:color .18s,text-decoration-color .18s} .news-item h3 a:hover{color:var(--blue2);text-decoration-color:var(--blue)} .news-read{transition:transform .2s ease;display:inline-block} .news-item:hover .news-read{transform:translateX(4px)} /* 5. Source chips: read as pressable */ .source-chip{cursor:pointer} .source-chip:hover{background:rgba(49,140,255,.12);transform:translateY(-2px)} /* 6. Footer + social: visible affordance */ .footer-inner > a{color:var(--blue2);text-decoration:underline;text-decoration-color:rgba(101,169,255,.4); text-underline-offset:3px;font-weight:600} .footer-inner > a:hover{color:var(--ice);text-decoration-color:var(--blue)} .social-links a{transition:border-color .2s,color .2s,transform .2s} .social-links a:hover{border-color:var(--blue);color:var(--blue2);transform:translateY(-2px)} /* 7. Breadcrumbs */ .breadcrumb a{color:var(--blue2);text-decoration:underline;text-decoration-color:rgba(101,169,255,.35); text-underline-offset:3px} .breadcrumb a:hover{color:var(--ice);text-decoration-color:var(--blue)} /* 8. Buttons: unmistakably pressable */ .btn{cursor:pointer;transition:transform .18s ease,box-shadow .18s ease,background .18s ease} .btn:hover{transform:translateY(-2px);box-shadow:0 10px 26px rgba(49,140,255,.28)} .btn:active{transform:translateY(0)} /* 9. KEYBOARD ACCESSIBILITY — a visible focus ring on every interactive element. This was missing entirely; keyboard and screen-reader users could not see where they were on the page. */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible{ outline:3px solid var(--blue2); outline-offset:3px; border-radius:4px; } /* 10. External links open in a new tab — say so, quietly */ .article-body p a[target="_blank"]::after, .news-item h3 a[target="_blank"]::after, .source-note a[target="_blank"]::after{ content:"\2197"; display:inline-block; margin-left:3px; font-size:.8em; opacity:.7; } @media(prefers-reduced-motion:reduce){ .nav-links a::after{transition:none} a.card:hover .card-link,.featured:hover .go,.tool-promo:hover .go, .news-item:hover .news-read,.source-chip:hover,.btn:hover{transform:none} } /* ===================================================================== MOBILE OPTIMIZATION Appended last so it wins on specificity ties without touching the rules above. Every block below fixes a specific, observable defect on a real phone — not a general "make it responsive" pass, since the site was already responsive. ===================================================================== */ /* --- 1. iOS text inflation ------------------------------------------ Safari silently enlarges text when a page rotates to landscape, which breaks carefully-set headline sizes. Opt out. */ html{-webkit-text-size-adjust:100%;text-size-adjust:100%} /* --- 2. No horizontal scroll ---------------------------------------- The news ticker uses width:max-content and animates on the X axis. On a narrow viewport that can push the document wider than the screen, producing the "page wobbles sideways" feel. Clamp it at the root. */ html,body{overflow-x:hidden;max-width:100%} /* --- 3. must not break flex/grid parents ------------------- Wrapping in inserts a new element between the image and its flex parent (.brand, .footer-brand). display:contents removes from layout so the stays a direct child. */ picture{display:contents} /* --- 4. Anchor links vs. the sticky header --------------------------- The header is sticky, so #insights, #connect etc. scrolled their target underneath it — the user tapped "Connect" and landed on a headline that was half-hidden. */ [id]{scroll-margin-top:100px} /* --- 5. Kill stuck hover states on touch ----------------------------- .btn:hover and .tool-promo:hover apply translateY + shadow. On a touchscreen there is no un-hover, so a tapped element stays lifted until you tap elsewhere. Neutralize where hover does not exist. */ @media(hover:none){ .btn:hover,.tool-promo:hover,.about-photo img:hover,.card:hover{ transform:none;box-shadow:none;filter:none; } /* Give an immediate press response instead — this is what a native control does, and its absence is what makes a web app feel dead. */ .btn:active,.assess-opt:active,.card:active{transform:scale(.985)} } /* The default grey flash on tap looks like a rendering bug on a dark UI. */ *{-webkit-tap-highlight-color:rgba(49,140,255,.18)} /* --- 6. Respect the notch and home indicator ------------------------- */ @supports(padding:max(0px)){ .wrap{ padding-left:max(0px,env(safe-area-inset-left)); padding-right:max(0px,env(safe-area-inset-right)); } footer{padding-bottom:max(30px,env(safe-area-inset-bottom))} } /* ===================================================================== PHONE (<=720px) ===================================================================== */ @media(max-width:720px){ /* --- 7. Reclaim vertical space ------------------------------------- An 82px sticky header eats ~12% of a phone viewport on every scroll. The dropdown was also positioned at top:72px against an 82px header, leaving a 10px seam of page showing through. Both fixed. */ .nav-wrap{height:64px} .brand img{width:42px;height:42px} .nav-links{top:64px;left:0;right:0;border-radius:0 0 12px 12px;padding:8px 14px 14px} [id]{scroll-margin-top:76px} /* --- 8. Tap targets ------------------------------------------------ Apple and Google both put the minimum at ~44px. The nav links had no vertical padding at all, so each one was a ~22px strip of text — the single most missable control on the site, in the menu people open first. */ .nav-links a{padding:13px 4px;min-height:44px;display:flex;align-items:center} .menu-toggle{min-width:44px;min-height:44px} .social-links a{min-height:44px;display:inline-flex;align-items:center;padding:0 16px} footer a{min-height:44px;display:inline-flex;align-items:center} /* --- 9. Headline sizing -------------------------------------------- clamp() bottomed out at 2.65rem (~42px). The h1 is 95 characters. On a 360px screen that renders as a nine-line wall of text with -1.4px tracking, and the CTA is pushed off-screen entirely. */ .hero h1{font-size:clamp(1.95rem,7.4vw,2.6rem);letter-spacing:-.9px;line-height:1.1} .hero p{font-size:1.02rem} .section-head h2,.about-grid h2,.contact-grid h2{font-size:clamp(1.7rem,6.4vw,2.2rem);letter-spacing:-.6px} /* --- 10. Put the message before the decoration ---------------------- .hero-logo-panel had order:-1, so on a phone the FIRST thing anyone saw was a decorative logo panel — the same logo already in the header — and the headline and both CTAs sat below the fold. For a lead-generation site that is backwards. Copy first. */ .hero-logo-panel{order:0;min-height:180px;padding:10px} .hero{padding:34px 0 46px} /* --- 11. Cards ------------------------------------------------------ min-height:240px was sized for a 3-up desktop grid. Stacked one per row on a phone it just injects dead space between every card. */ .card{min-height:0;padding:22px} .tool-promo{padding:22px} .tool-promo h3{font-size:1.35rem} /* --- 12. Buttons full-width ----------------------------------------- Thumb-reachable, unambiguous, and no orphaned half-row when three buttons wrap. */ .actions{gap:10px} .actions .btn,.assess-actions .btn{width:100%;min-height:50px} .assess-actions{flex-direction:column;align-items:stretch;gap:10px} /* --- 13. THE BIG ONE: the assessment answer scale ------------------- These four options are an ordered maturity scale (0 -> 3). They were laid out as a 2x2 grid on mobile, which: (a) reads left-right-then-down, destroying the sense of a scale; (b) squeezes "Partly — informal or inconsistent" into a ~150px column at 13px, wrapping to three lines; (c) produces ~40px targets sitting 9px apart, so a thumb hits the wrong answer. There are 24 questions here. This is 96 taps on the highest-value page you own, and it was the worst interaction on the site. Single column, full width, left-aligned, 52px tall, ordered top to bottom. Now it reads as a scale and is impossible to mis-tap. */ .assess-opts{grid-template-columns:1fr;gap:8px} .assess-opt{ min-height:52px;padding:14px 16px;font-size:.94rem; text-align:left;display:flex;align-items:center; } .assess-opt.sel{font-weight:700} .assess-q{margin-bottom:26px} .assess-qtext{font-size:1rem;line-height:1.45} /* --- 14. Kill the iOS zoom-on-focus --------------------------------- Safari zooms the whole page whenever a focused input has a font-size below 16px. .assess-select was .94rem (~15px), so tapping "What kind of organization is this for?" yanked the viewport sideways and left it there. 16px is the hard floor. */ .assess-select, .contact-form input,.contact-form select,.contact-form textarea{ font-size:16px;min-height:48px; } .contact-form textarea{min-height:120px} .contact-form{padding:20px} /* --- 15. Results screen --------------------------------------------- */ .res-hero{flex-direction:column;text-align:center;padding:24px;gap:18px} .res-ring-wrap{width:150px;height:150px;margin:0 auto} .res-stats{justify-content:center;gap:20px} .res-gap{padding:16px} .res-drow{margin-bottom:14px} /* --- 16. Progress bar follows you down the page ---------------------- 24 questions is a long scroll. Pinning the progress bar means the answer count stays visible, which is most of what stops people from abandoning halfway. */ .assess-progress{ position:sticky;top:64px;z-index:20; background:rgba(5,8,13,.94);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); padding:10px 0;margin:0 0 18px; } /* --- 17. Section rhythm --------------------------------------------- */ section{padding:52px 0} .video-copy{padding:18px} .about-photo{max-width:100%} } /* --- 18. Very small phones (<=380px: iPhone SE, Mini) ----------------- */ @media(max-width:380px){ .wrap{width:min(100% - 22px,1180px)} .hero h1{font-size:1.8rem;letter-spacing:-.6px} .brand span{font-size:.78rem;letter-spacing:1.2px} .assess-opt{font-size:.9rem;padding:13px 13px} .res-stats{flex-direction:column;gap:10px} } /* --- 19. Battery / motion -------------------------------------------- The ticker animates continuously. On a phone that is a GPU wake-up every frame for content most people never read. Anyone who has asked the OS to reduce motion has already told us what they want. */ @media(prefers-reduced-motion:reduce){ *{transition:none!important} } /* ===================================================================== TOPIC STRIP LEAD-IN + DISCLAIMERS The brief was: present, but not shouting. So the visual weight goes to the topic list; the disclaimer sits beneath it as a caption. It reads as a footnote to the topics rather than a warning label on the site. Deliberately NOT used: a bordered callout, a warning icon, a colored background, or centered text. Any of those turn a routine "views are my own" line into something that looks like it is disclaiming a problem — which is worse than saying nothing. ===================================================================== */ .strip-inner{flex-direction:column;align-items:stretch;gap:12px;justify-content:flex-start} /* Lead-in: same eyebrow treatment used elsewhere on the site, so it reads as a section label rather than a new kind of element. */ .strip-lead{ text-transform:uppercase;letter-spacing:2.2px;font-size:.68rem;font-weight:800; color:var(--blue2); } .strip-topics{ display:flex;gap:26px;justify-content:space-between;flex-wrap:wrap; color:#c3d2e5;font-size:.9rem; } /* The quiet part. Small, dim, single line on desktop. Legible if you look for it; invisible if you are not. */ .strip-note{ margin:2px 0 0;font-size:.74rem;line-height:1.5;color:#6c7b90;max-width:820px; } /* Footer boilerplate — the long form. Smallest text on the page, sitting below the copyright line where this kind of language is conventionally found and where nobody has to read past it to reach the content. */ .footer-legal{ margin:18px 0 0;padding-top:16px; border-top:1px solid rgba(87,161,255,.10); font-size:.7rem;line-height:1.6;color:#5f6d80;max-width:none; } @media(max-width:720px){ .strip-topics{gap:10px 18px;font-size:.84rem;justify-content:flex-start} .strip-note{font-size:.72rem} .footer-legal{font-size:.68rem;margin-top:14px} } /* Keep the disclaimer on the printed PDF of the assessment — this is the one context where it genuinely matters, since the report leaves the site and may get forwarded around an organization without any context. */ @media print{ .footer-legal{display:block!important;color:#555!important;font-size:7pt} footer{display:block!important;border:0!important} .footer-brand,footer a{display:none!important} } /* ===================================================================== ADDITIONS — brief, engage, disclosures, a11y --------------------------------------------------------------------- PALETTE RULE: no hardcoded colors. Everything below draws from the tokens already declared in :root, plus the three semantic accents the site already uses (#3ddc97 up / #ffc857 warn / #ff6b6b down). No new hues are introduced anywhere in this file. ===================================================================== */ /* --- Honeypot. Was an inline style attr, which CSP blocked, which meant the "invisible" spam trap rendered as a visible input. --- */ .hp{position:absolute!important;left:-9999px!important;width:1px!important;height:1px!important;opacity:0!important;pointer-events:none} /* --- A11y: skip link + focus, on-palette --- */ .skip-link{position:absolute;left:-9999px;top:0;z-index:999;padding:12px 20px;background:var(--panel);color:var(--ice);border:1px solid var(--blue);border-radius:0 0 6px 0;font-weight:800;letter-spacing:1px} .skip-link:focus{left:0} a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--blue2);outline-offset:2px} @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} .ticker-track,.soon-scan{animation:none!important} } /* ===================================================================== DISCLOSURES ===================================================================== */ .prose{max-width:76ch} .prose h2{margin-top:52px} .prose ol,.prose ul{color:var(--muted);line-height:1.7} .prose li{margin-bottom:10px} .pledge-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin:28px 0 40px} .pledge{padding:24px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(160deg,rgba(18,34,55,.72),rgba(5,10,17,.72))} .pledge h3{margin:12px 0 8px} .pledge p{margin:0;color:var(--muted);font-size:.95rem} .pledge-mark{display:inline-grid;place-items:center;min-width:48px;height:30px;padding:0 12px;border-radius:999px;font-size:.7rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase} .pledge.no{border-left:3px solid #ff6b6b} .pledge.no .pledge-mark{border:1px solid rgba(255,107,107,.42);color:#ff6b6b} .pledge.yes{border-left:3px solid var(--blue)} .pledge.yes .pledge-mark{border:1px solid rgba(101,169,255,.42);color:var(--blue2)} .pledge-mark.ok{border:1px solid var(--line);color:var(--muted)} .disclosure-list{padding:28px;border:1px solid var(--line);border-radius:14px;background:var(--panel2);margin:26px 0} .disclosure-list h3{margin-top:0} .disclosure-updated{font-size:.82rem;color:var(--muted2);margin-bottom:0} .policy-note{margin-top:44px;padding-top:22px;border-top:1px solid var(--line);color:var(--muted)} .ai-policy{display:grid;gap:14px;margin:26px 0 32px} .ai-rule{display:flex;gap:16px;align-items:flex-start;padding:22px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(160deg,rgba(18,34,55,.72),rgba(5,10,17,.72))} .ai-rule p{margin:0;color:var(--muted);font-size:.95rem} .ai-rule .pledge-mark{flex-shrink:0;margin-top:2px} /* ===================================================================== ENGAGE ===================================================================== */ .offer-grid .offer{display:flex;flex-direction:column} .offer-list{margin:16px 0 18px;padding-left:18px;color:var(--muted);font-size:.92rem;line-height:1.6} .offer-list li{margin-bottom:6px} .offer-fit{margin-top:auto;padding-top:16px;border-top:1px solid var(--line);font-size:.86rem;color:var(--muted2)} .not-for-sale{margin-top:40px;padding:28px;border:1px solid rgba(255,107,107,.32);border-radius:14px;background:rgba(255,107,107,.05)} .not-for-sale h3{margin-top:0} .not-for-sale ul{color:var(--muted);line-height:1.7;padding-left:18px} .not-for-sale li{margin-bottom:8px} .engage-promo{border-left:3px solid var(--blue)} .conflict-screen{border:1px solid var(--line);border-radius:12px;padding:20px;margin:18px 0;background:var(--panel2)} .conflict-screen legend{font-size:.72rem;font-weight:800;letter-spacing:2px;text-transform:uppercase;color:var(--blue2);padding:0 8px} .screen-note{font-size:.86rem;color:var(--muted2);margin:4px 0 16px} .check-row{display:flex;gap:10px;align-items:flex-start;font-size:.86rem;line-height:1.5;color:var(--muted);margin:16px 0} .check-row input[type=checkbox]{margin-top:3px;flex-shrink:0;width:auto} /* ===================================================================== THE DAILY BRIEF The only design job that matters here: the machine's summary and the human's judgment must never be mistakable for one another. So the AI chip is --muted and recessive; the read is --blue and foregrounded. That contrast is the editorial policy, rendered. ===================================================================== */ .brief-masthead{padding:56px 0 0} .brief-head{display:flex;justify-content:space-between;align-items:flex-end;gap:36px;flex-wrap:wrap;border-bottom:1px solid var(--line);padding-bottom:26px} .brief-head h1{font-size:clamp(2.2rem,4vw,3.6rem);line-height:1.06;letter-spacing:-1.8px;margin:14px 0 14px;max-width:18ch} .brief-sub{color:var(--muted);max-width:56ch;margin:0} .brief-meta{text-align:right;flex-shrink:0} .brief-date{font-size:.95rem;font-weight:800;letter-spacing:.5px} .brief-edition{font-size:.82rem;color:var(--muted2);margin-top:3px} /* --- Featured video --- */ .brief-video-section{padding:44px 0 0} .section-head.tight{margin-bottom:18px} .brief-video{display:grid;grid-template-columns:1.4fr 1fr;gap:28px;align-items:start} .brief-video.is-soon{grid-template-columns:1fr} @media (max-width:860px){.brief-video{grid-template-columns:1fr}} .video-facade{position:relative;display:block;width:100%;aspect-ratio:16/9;border-radius:16px;overflow:hidden;cursor:pointer;background:var(--panel);border:1px solid var(--line)} .video-facade img{width:100%;height:100%;object-fit:cover} .video-facade iframe{width:100%;height:100%;border:0;display:block} .video-play{position:absolute;inset:0;margin:auto;width:74px;height:74px;border-radius:50%;background:rgba(5,8,13,.72);border:1px solid var(--blue2)} .video-play::after{content:'';position:absolute;inset:0;margin:auto;width:0;height:0;border-left:20px solid var(--ice);border-top:13px solid transparent;border-bottom:13px solid transparent;transform:translateX(3px)} .video-facade:hover .video-play{background:linear-gradient(135deg,#1675e5,#0d315f)} .video-facade.playing{cursor:default} .video-native{width:100%;aspect-ratio:16/9;display:block;border-radius:16px;border:1px solid var(--line);background:var(--bg)} .video-channel{font-size:.82rem;color:var(--muted2);margin-top:4px} .video-read{margin-top:16px;color:var(--muted);font-size:.95rem;line-height:1.65} .video-description{margin:14px 0 0;color:#c7d8ec;font-size:.94rem;line-height:1.7} .brief-video-copy{position:relative;overflow:hidden;border:1px solid var(--line);border-radius:16px;background:linear-gradient(145deg,rgba(17,37,64,.82),rgba(5,10,18,.86));box-shadow:var(--shadow)} .brief-video-copy::before{content:'';position:absolute;inset:0 auto 0 0;width:3px;background:linear-gradient(180deg,transparent,var(--blue2),transparent);animation:briefSignal 2.8s ease-in-out infinite} .brief-video-copy>*{opacity:0;transform:translateY(14px);animation:briefCopyIn .65s cubic-bezier(.2,.8,.2,1) forwards} .brief-video-copy>*:nth-child(2){animation-delay:.12s} .brief-video-copy>*:nth-child(3){animation-delay:.24s} .brief-video-copy>*:nth-child(4){animation-delay:.36s} .brief-video-copy>*:nth-child(5){animation-delay:.48s} @keyframes briefCopyIn{to{opacity:1;transform:translateY(0)}} @keyframes briefSignal{0%,100%{opacity:.25;transform:scaleY(.3)}50%{opacity:1;transform:scaleY(1)}} @media (prefers-reduced-motion:reduce){.brief-video-copy::before,.brief-video-copy>*{animation:none;opacity:1;transform:none}} .video-none,.filter-empty{color:var(--muted2);font-size:.95rem} /* --- Coming soon. Must read as "in production", not "abandoned". --- */ .video-soon{display:grid;grid-template-columns:1.15fr 1fr;gap:34px;align-items:center;padding:28px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,rgba(25,56,96,.38),rgba(4,8,14,.62));box-shadow:var(--shadow)} @media (max-width:860px){.video-soon{grid-template-columns:1fr}} .video-soon-art{position:relative;aspect-ratio:16/9;border-radius:14px;overflow:hidden;border:1px solid var(--line);background:radial-gradient(circle at 50% 50%,#14345e,#050b13 68%)} .video-soon-art::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(87,161,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(87,161,255,.10) 1px,transparent 1px);background-size:34px 34px;-webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000 40%,transparent 100%);mask-image:radial-gradient(70% 70% at 50% 50%,#000 40%,transparent 100%)} .soon-play{position:absolute;inset:0;margin:auto;width:72px;height:72px;border-radius:50%;border:1px solid var(--blue2);background:rgba(49,140,255,.12)} .soon-play::after{content:'';position:absolute;inset:0;margin:auto;width:0;height:0;border-left:19px solid var(--blue2);border-top:12px solid transparent;border-bottom:12px solid transparent;transform:translateX(3px)} .soon-scan{position:absolute;top:0;bottom:0;width:34%;background:linear-gradient(90deg,transparent,rgba(101,169,255,.12),transparent);animation:soonsweep 3.6s ease-in-out infinite} @keyframes soonsweep{0%{transform:translateX(-120%)}100%{transform:translateX(360%)}} .video-soon-copy h3{margin:14px 0 12px;font-size:1.5rem;line-height:1.25;letter-spacing:-.6px} .video-soon-copy p{margin:0 0 22px;color:var(--muted);line-height:1.65} .soon-flag{display:inline-grid;place-items:center;height:30px;padding:0 14px;border-radius:999px;border:1px solid rgba(101,169,255,.42);color:var(--blue2);font-size:.7rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase} /* --- Layout --- */ .brief-body{padding:44px 0 88px} .brief-layout{display:grid;grid-template-columns:minmax(0,1fr) 330px;gap:44px;align-items:start} @media (max-width:980px){.brief-layout{grid-template-columns:1fr}} /* --- Filters. Reuse the .card-mark pill language. --- */ .brief-filters{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:26px} .chip{font:inherit;font-size:.78rem;font-weight:800;letter-spacing:1px;text-transform:uppercase;padding:9px 16px;border-radius:999px;border:1px solid var(--line);background:transparent;color:var(--muted);cursor:pointer} .chip:hover{color:var(--blue2)} .chip.active{color:#fff;border-color:#4698ff;background:linear-gradient(135deg,#1675e5,#0d315f)} /* --- One story --- */ .brief-items{display:grid;gap:18px} .brief-item{padding:28px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(160deg,rgba(18,34,55,.72),rgba(5,10,17,.72))} .item-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;font-size:.75rem;margin-bottom:14px} /* Topic chips use the existing .card-mark treatment. One brand color, not four invented ones — differentiation comes from the label, not the hue. */ .item-topic{display:inline-grid;place-items:center;min-width:48px;height:30px;padding:0 12px;border-radius:999px;border:1px solid rgba(101,169,255,.42);color:var(--blue2);font-size:.7rem;font-weight:800;letter-spacing:1px;text-transform:uppercase} .item-source{font-weight:800;color:#c3d2e5;letter-spacing:.5px} .item-time{color:var(--muted2);margin-left:auto} .item-title{margin:0 0 12px;font-size:1.18rem;line-height:1.4} .item-title a:hover{color:var(--blue2)} /* The machine's voice: --muted, recessive, labeled. */ .item-summary{margin:0 0 16px;color:var(--muted);font-size:.95rem;line-height:1.7} .ai-chip{display:inline-grid;place-items:center;height:22px;padding:0 8px;border-radius:999px;border:1px solid var(--line);color:var(--muted2);font-size:.6rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;margin-right:8px;vertical-align:2px} /* The human's voice: --blue, foregrounded, bordered. This is the product. */ .item-read{margin:0;padding:16px 18px;font-size:.97rem;line-height:1.7;color:var(--ice);border-left:3px solid var(--blue);background:rgba(49,140,255,.07);border-radius:0 8px 8px 0} .item-read.pending{border-left-color:var(--line);background:var(--panel2);color:var(--muted2);font-style:italic} .read-chip{display:inline-grid;place-items:center;height:22px;padding:0 8px;border-radius:999px;border:1px solid rgba(101,169,255,.5);background:rgba(49,140,255,.14);color:var(--blue2);font-size:.6rem;font-weight:800;letter-spacing:1.2px;text-transform:uppercase;margin-right:8px;vertical-align:2px} .item-foot{margin-top:16px} .item-link{font-size:.85rem;font-weight:800;color:var(--blue2)} .item-link:hover{color:var(--ice)} /* --- Rail --- */ .brief-rail{display:grid;gap:18px;position:sticky;top:100px} @media (max-width:980px){.brief-rail{position:static}} .rail-card{padding:26px;border:1px solid var(--line);border-radius:14px;background:linear-gradient(160deg,rgba(18,34,55,.72),rgba(5,10,17,.72))} .rail-card h3{margin:10px 0 10px} .rail-card p{color:var(--muted);font-size:.9rem;margin:0} .rail-tool{border-left:3px solid var(--blue)} .rail-tool .btn{margin-top:16px} .subscribe-form{margin-top:16px;padding:0;border:0;background:transparent} .archive-list{list-style:none;padding:0;margin:12px 0 0} .archive-list li{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:10px 0;border-bottom:1px solid rgba(87,161,255,.12);font-size:.88rem} .archive-list li:last-child{border-bottom:0} .archive-list a:hover{color:var(--blue2)} .archive-count{font-size:.74rem;color:var(--muted2);flex-shrink:0} .archive-loading{color:var(--muted2)} .brief-empty{padding:56px 24px;text-align:center;border:1px dashed var(--line);border-radius:14px} .brief-empty h3{margin-top:0} .brief-empty p{max-width:48ch;margin:0 auto 24px;color:var(--muted)} .brief-promo{border-left:3px solid var(--blue)} /* --- Skeletons --- */ .item-skeleton,.video-skeleton{border-radius:14px;background:linear-gradient(90deg,rgba(87,161,255,.04),rgba(87,161,255,.10),rgba(87,161,255,.04));background-size:200% 100%;animation:shimmer 1.4s infinite} .item-skeleton{height:190px;margin-bottom:18px} .video-skeleton{aspect-ratio:16/9;width:100%} @keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} /* --- Print: the legal line survives, the chrome doesn't --- */ @media print{ .brief-rail,.brief-filters,.method-note,.brief-video-section, .brief-layout{grid-template-columns:1fr} .brief-item{border:1px solid #ccc;background:none} } /* --- Pre-launch panel. Reuses the hero-logo-panel treatment so it reads as a designed section of the site, not a missing one. --- */ .brief-launch{padding:56px 44px;border:1px solid var(--line);border-radius:20px;background:linear-gradient(145deg,rgba(25,56,96,.38),rgba(4,8,14,.62));box-shadow:var(--shadow);text-align:left} .launch-head{font-size:clamp(1.8rem,3vw,2.6rem);line-height:1.15;letter-spacing:-1.2px;margin:16px 0 16px;max-width:20ch} .launch-body{color:var(--muted);font-size:1.05rem;line-height:1.7;max-width:60ch;margin:0 0 28px} .launch-points{list-style:none;padding:0;margin:0 0 32px;display:grid;gap:12px} .launch-points li{position:relative;padding-left:26px;color:#c3d2e5;font-size:.95rem;line-height:1.6} .launch-points li::before{content:'';position:absolute;left:0;top:9px;width:8px;height:8px;border-radius:50%;background:var(--blue);box-shadow:0 0 0 3px rgba(49,140,255,.16)} @media (max-width:640px){.brief-launch{padding:36px 24px}} /* ===================================================================== ON-DEMAND TRAINING SESSIONS — video cards Same placeholder language as the Daily Brief's video slot, scaled to a 3-up grid. Palette: tokens only. ===================================================================== */ .webinar-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:18px} .session-card{padding:0;overflow:hidden;display:flex;flex-direction:column;min-height:0} .session-body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1} .session-body h3{margin:14px 0 10px} .session-body p{color:var(--muted);margin:0 0 18px} .session-body .webinar-status{margin-top:auto;padding-top:14px;border-top:1px solid var(--line);font-size:.8rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted2)} /* The media well. 16:9, flush to the card edges. */ .session-art{position:relative;aspect-ratio:16/9;width:100%;overflow:hidden;border-bottom:1px solid var(--line);background:var(--panel)} .session-art img{width:100%;height:100%;object-fit:cover} .session-art iframe{width:100%;height:100%;border:0;display:block} .session-video{width:100%;height:100%;display:block;background:var(--bg)} .session-facade{cursor:pointer} .session-facade:hover .soon-play{background:linear-gradient(135deg,#1675e5,#0d315f)} /* Coming-soon state: abstract player, faint grid, slow sweep. Never a fake thumbnail of a video that does not exist. */ .session-art-soon{background:radial-gradient(circle at 50% 50%,#14345e,#050b13 68%)} .session-art-soon::before{content:'';position:absolute;inset:0;background-image:linear-gradient(rgba(87,161,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(87,161,255,.10) 1px,transparent 1px);background-size:28px 28px;-webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000 40%,transparent 100%);mask-image:radial-gradient(70% 70% at 50% 50%,#000 40%,transparent 100%)} .session-art-soon .soon-play{width:58px;height:58px} .session-art-soon .soon-play::after{border-left-width:15px;border-top-width:10px;border-bottom-width:10px} .session-eta{position:absolute;left:14px;bottom:14px;display:inline-grid;place-items:center;height:26px;padding:0 12px;border-radius:999px;border:1px solid rgba(101,169,255,.42);background:rgba(5,8,13,.7);color:var(--blue2);font-size:.66rem;font-weight:800;letter-spacing:1.5px;text-transform:uppercase} /* "Watch now" once a session is live on the page. */ .status-pill.ready{border-color:#4698ff;background:linear-gradient(135deg,#1675e5,#0d315f);color:#fff} /* ===================================================================== TYPOGRAPHY — Inter, self-hosted --------------------------------------------------------------------- Arial is why nothing popped. It has no real display weight, its caps are wide and soft, and it cannot hold tight negative tracking at large sizes without falling apart. Inter is drawn for screens: tall x-height, flat sides, and a genuine 900 that stays legible at 5rem. Self-hosted in /assets/fonts (96KB, four weights, latin subset). No Google Fonts request, so font-src stays 'self' and there is no third party watching who reads the site — which, on a security site, is a claim worth being able to make. ===================================================================== */ @font-face{font-family:'Inter';src:url('fonts/inter-400.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap} @font-face{font-family:'Inter';src:url('fonts/inter-600.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap} @font-face{font-family:'Inter';src:url('fonts/inter-800.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap} @font-face{font-family:'Inter';src:url('fonts/inter-900.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap} body{ font-family:var(--sans); -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale; font-feature-settings:normal; } /* --- Display: heavy, tight, and set in optical sizes that actually land --- */ .hero h1{ font-weight:900; font-size:clamp(2.8rem,5.4vw,5.4rem); line-height:.98; letter-spacing:-.038em; } .section-head h2,.about-grid h2,.contact-grid h2,.brief-head h1{ font-weight:900; letter-spacing:-.03em; line-height:1.05; } .card h3,.video-copy h3,.rail-card h3,.session-body h3{ font-weight:800; letter-spacing:-.015em; } .item-title{font-weight:800;letter-spacing:-.012em} .tool-promo h3,.featured h3,.video-soon-copy h3{font-weight:900;letter-spacing:-.024em} /* --- Micro-labels: the eyebrow is doing a lot of work on this site. Give it a real weight and wider tracking so it reads as a system, not an afterthought. --- */ .eyebrow{font-weight:800;letter-spacing:.2em;font-size:.72rem} .brand{font-weight:900;letter-spacing:.13em} .btn{font-weight:800;letter-spacing:.01em} .card-mark,.status-pill,.chip,.soon-flag,.session-eta,.flag{font-weight:800} /* --- Body copy: Arial was set at a size that made long paragraphs hard. Slightly larger, slightly looser, --muted. --- */ .hero p{font-size:1.2rem;line-height:1.6} .section-head p,.about-grid p,.contact-grid p{font-size:1.05rem;line-height:1.7} .card p,.session-body p{line-height:1.65} /* --- The one flourish: a gradient on the lead word of the hero. Uses the two blues already in the palette, nothing new. --- */ .hero h1 em{ font-style:normal; background:linear-gradient(100deg,#65a9ff 0%,#318cff 55%,#1675e5 100%); -webkit-background-clip:text;background-clip:text; -webkit-text-fill-color:transparent;color:transparent; } /* ===================================================================== CATEGORY CARDS — with graphics ===================================================================== */ .topic-card{padding:0;overflow:hidden;display:flex;flex-direction:column;min-height:0;transition:transform .25s cubic-bezier(.2,.7,.2,1),border-color .25s} .topic-card:hover{transform:translateY(-4px);border-color:rgba(101,169,255,.55)} .card-art{position:relative;aspect-ratio:480/260;width:100%;overflow:hidden;border-bottom:1px solid var(--line);background:var(--panel)} .card-art img{width:100%;height:100%;object-fit:cover;transition:transform .5s cubic-bezier(.2,.7,.2,1)} .topic-card:hover .card-art img{transform:scale(1.045)} /* A wash that lifts the graphic into the card instead of letting it sit there like a stock photo. */ .card-art::after{content:'';position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(5,8,13,.55) 100%)} .card-art .card-mark{position:absolute;left:16px;bottom:14px;z-index:2;background:rgba(5,8,13,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .topic-card .card-body{padding:24px 26px 26px;display:flex;flex-direction:column;flex:1} .topic-card h3{margin:0 0 10px;font-size:1.2rem} .topic-card p{color:var(--muted);margin:0 0 18px;font-size:.95rem} .topic-card .card-link{margin-top:auto;font-size:.85rem;font-weight:800;letter-spacing:.04em;color:var(--blue2)} .topic-card:hover .card-link{color:var(--ice)} /* ===================================================================== TOPIC GRID — five across, one line --------------------------------------------------------------------- auto-fit is the reason the fifth card was orphaned on its own row: at 1180px with a 260px min, it fits exactly four and wraps the remainder. Five categories is a fixed, known number, so it gets a fixed track count and steps down at explicit breakpoints instead of guessing. The math: (1180 - 4 gaps x 14px) / 5 = 224px per card. Everything inside is tuned to that width. ===================================================================== */ .topic-grid{grid-template-columns:repeat(5,minmax(0,1fr));gap:14px} /* Tighter internals so 224px doesn't feel cramped. */ .topic-grid .topic-card{min-height:0} .topic-grid .card-art{aspect-ratio:16/10} .topic-grid .card-art .card-mark{left:12px;bottom:10px;min-width:40px;height:26px;padding:0 9px;font-size:.66rem} .topic-grid .card-body{padding:18px 18px 20px} .topic-grid h3{font-size:1.02rem;line-height:1.25;margin:0 0 8px;letter-spacing:-.01em} .topic-grid p{font-size:.85rem;line-height:1.55;margin:0 0 14px} .topic-grid .card-link{font-size:.76rem;letter-spacing:.05em} /* 5 -> 3 -> 2 -> 1. Explicit, so nothing ever orphans again. */ @media (max-width:1080px){ .topic-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .topic-grid h3{font-size:1.12rem} .topic-grid p{font-size:.92rem} .topic-grid .card-body{padding:22px 22px 24px} } @media (max-width:760px){ .topic-grid{grid-template-columns:repeat(2,minmax(0,1fr))} } @media (max-width:520px){ .topic-grid{grid-template-columns:1fr} .topic-grid .card-art{aspect-ratio:16/7} } /* Facade with no poster: reuse the coming-soon art rather than a black box. */ .video-facade-noposter{background:radial-gradient(circle at 50% 50%,#14345e,#050b13 68%)} .facade-art{position:absolute;inset:0;background-image:linear-gradient(rgba(87,161,255,.10) 1px,transparent 1px),linear-gradient(90deg,rgba(87,161,255,.10) 1px,transparent 1px);background-size:34px 34px;-webkit-mask-image:radial-gradient(70% 70% at 50% 50%,#000 40%,transparent 100%);mask-image:radial-gradient(70% 70% at 50% 50%,#000 40%,transparent 100%)} /* ===================================================================== HERO PROMO VIDEO --------------------------------------------------------------------- Same rule as the morph rebuild, and it earns its keep here: the EMBLEM POSTER is the default state. It is in the HTML, it needs no JS, no network, no video file. Everything else layers on top. Nothing here is newer than 2015. No :has(), no aspect-ratio, no @supports. The ratio box is padding-top, which has worked forever. ===================================================================== */ .hero-panel-promo{ display:block; min-height:0; padding:14px; animation:none; } .hero-promo{ position:relative; display:block; width:100%; height:0; padding-top:56.25%; /* 16:9 */ border-radius:14px; overflow:hidden; background:var(--bg); } .hero-promo.promo-vertical{padding-top:177.78%} /* 9:16 */ /* --- The poster. Always present, always underneath. --- */ .promo-poster{ position:absolute; top:0;left:0; width:100%;height:100%; display:block; z-index:1; background:radial-gradient(circle at 50% 42%,#0d1a30 0%,#05080d 70%); } .promo-poster img{ width:100%;height:100%; object-fit:contain; /* show the whole logo, uncropped, while loading */ display:block; border-radius:14px; animation:none !important; /* kill the legacy bb-logo-float */ will-change:auto; } /* --- The video, over the poster. --- */ .promo-video{ position:absolute; top:0;left:0; width:100%;height:100%; display:block; z-index:2; object-fit:cover; border-radius:14px; background:var(--bg); opacity:0; transition:opacity .5s ease; } .promo-playing .promo-video{opacity:1} /* --- Play button. Sits over the poster until the video is actually playing. Never hidden optimistically — only on the 'playing' event, because iOS lies about whether autoplay worked. --- */ .promo-play{ position:absolute; top:0;left:0;right:0;bottom:0; z-index:3; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:14px; width:100%; border:0; background:rgba(4,7,12,.34); color:var(--ice); font:inherit; cursor:pointer; border-radius:14px; -webkit-tap-highlight-color:transparent; } .promo-play:hover{background:rgba(4,7,12,.20)} .promo-play-icon{ position:relative; width:76px;height:76px; border-radius:50%; border:1px solid var(--blue2); background:rgba(5,8,13,.72); } .promo-play-icon::after{ content:''; position:absolute; top:50%;left:50%; margin:-13px 0 0 -8px; width:0;height:0; border-left:21px solid var(--ice); border-top:13px solid transparent; border-bottom:13px solid transparent; } .promo-play:hover .promo-play-icon{background:linear-gradient(135deg,#1675e5,#0d315f)} .promo-play-label{ font-size:.74rem; font-weight:800; letter-spacing:.14em; text-transform:uppercase; color:var(--ice); } /* --- Sound toggle. Only appears once a muted video is running. --- */ .promo-sound{ position:absolute; top:14px;right:14px; z-index:4; padding:9px 14px; border-radius:999px; border:1px solid rgba(101,169,255,.5); background:rgba(5,8,13,.82); color:var(--blue2); font:inherit; font-size:.68rem; font-weight:800; letter-spacing:.12em; text-transform:uppercase; cursor:pointer; } .promo-sound:hover{border-color:#4698ff;color:var(--ice)} /* --- The Daily Brief CTA. Stays put whatever the video is doing. --- */ .promo-cta{ position:absolute; left:14px;right:14px;bottom:14px; z-index:5; display:flex; align-items:center; gap:10px; padding:11px 15px; border-radius:999px; border:1px solid rgba(101,169,255,.42); background:rgba(5,8,13,.86); text-decoration:none; } .promo-cta:hover{border-color:#4698ff} .promo-cta-dot{width:8px;height:8px;border-radius:50%;background:#3ddc97;flex-shrink:0} .promo-cta-text{ font-size:.74rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase; color:var(--ice);white-space:nowrap;overflow:hidden;text-overflow:ellipsis; } .promo-cta-arrow{margin-left:auto;font-weight:800;color:var(--blue2)} .promo-cta:hover .promo-cta-arrow{color:var(--ice)} /* --- No video configured: the panel is just the emblem again. --- */ .promo-empty .promo-play, .promo-empty .promo-sound{display:none} .promo-empty{padding-top:100%} /* square, like the old logo panel */ /* --- Phone --- */ @media (max-width:720px){ .hero-panel-promo{ max-width:440px; margin-left:auto; margin-right:auto; padding:10px; } .promo-play-icon{width:62px;height:62px} .promo-play-icon::after{margin:-11px 0 0 -7px;border-left-width:18px;border-top-width:11px;border-bottom-width:11px} .promo-play-label{font-size:.66rem;letter-spacing:.1em} .promo-cta{left:10px;right:10px;bottom:10px;padding:10px 13px} .promo-cta-text{font-size:.68rem;letter-spacing:.09em} .promo-sound{top:10px;right:10px;padding:8px 12px} } /* ===================================================================== MOBILE PERFORMANCE --------------------------------------------------------------------- The single worst offender was backdrop-filter: blur(16px) on a STICKY header. On every scroll frame the phone re-blurs the strip of page behind an 82px-tall bar that never leaves the screen. It is the most reliable way to turn a fast site into a stuttering one, and it is invisible in every audit because it does not affect load time — only the thing users actually feel. On mobile it becomes a plain opaque bar. Nobody has ever converted because a header was frosted. ===================================================================== */ @media (max-width:980px){ .site-header{ -webkit-backdrop-filter:none; backdrop-filter:none; background:#05080d; /* opaque: no compositing work at all */ } /* The body's radial-gradient repaints on every scroll on some Androids. Fix it to the viewport so it is painted once. */ body{ background:#05080d; background-image:radial-gradient(circle at 50% 0%,#101d32 0%,#05080d 38%,#020407 100%); background-attachment:scroll; background-repeat:no-repeat; background-size:100% 700px; } /* Panels carrying will-change + infinite animations are holding GPU layers open for the whole session on a device with a fraction of the memory. Let them go. */ .hero-logo-panel{will-change:auto;animation:none} .card,.brief-item,.rail-card,.session-card{will-change:auto} } /* Long, scroll-heavy pages: let the browser skip layout and paint for cards that are nowhere near the viewport. This is the single biggest scroll win available and it costs nothing. */ @media (max-width:980px){ .brief-item,.session-card,.topic-card,.video-card{ content-visibility:auto; contain-intrinsic-size:auto 340px; } } /* Tap targets. Anything interactive gets a 44px minimum, which is the documented floor for a thumb. Several chips and pills were under it. */ @media (hover:none){ .chip,.status-pill,.menu-toggle,.promo-sound,.social-links a{min-height:44px} .chip,.promo-sound{display:inline-flex;align-items:center} .nav-links a{padding:10px 0;display:inline-block} } /* Hosted player iframe (Cloudflare Stream / YouTube / Vimeo). */ .promo-frame{ position:absolute; top:0;left:0; width:100%;height:100%; border:0; display:block; z-index:2; border-radius:14px; background:transparent; /* let the logo poster show through while loading */ opacity:0; transition:opacity .7s ease; /* smooth hand-off from logo to video */ } .promo-ready .promo-frame{opacity:1} /* The promo error note. Only ever rendered when something is actually broken — which is exactly when you need to be told, and exactly when the old silent-fallback behaviour told you nothing. */ .promo-error{ position:absolute; left:14px; right:14px; top:14px; z-index:6; display:block; padding:12px 14px; border-radius:10px; border:1px solid rgba(255,200,87,.45); background:rgba(20,14,2,.92); color:#ffc857; font-size:.78rem; line-height:1.5; } .promo-error strong{display:block;margin-bottom:3px;color:#ffd489} /* ===================================================================== HERO VIDEO — bigger --------------------------------------------------------------------- The panel was fighting the headline for space in a 1.08fr / .92fr grid, which left a 16:9 video roughly 480px wide. For a video that is the whole point of the hero, that is small. Now the video side takes the larger share of the grid, the panel's inner padding is cut, and on wide screens the video is allowed to break past the old column and run bigger than the text beside it. ===================================================================== */ @media (min-width:981px){ .hero-panel-promo{padding:12px} } /* Tablet and down: full width, and considerably larger than the old 400px cap — the video is the message, not a thumbnail. */ @media (max-width:980px){ .hero-panel-promo{padding:10px} } @media (max-width:720px){ .hero-panel-promo{ max-width:100%; /* was 440px. It was being throttled for no reason. */ margin-left:0; margin-right:0; padding:8px; } } /* Play button scales with the bigger box. */ @media (min-width:981px){ .promo-play-icon{width:92px;height:92px} .promo-play-icon::after{ margin:-16px 0 0 -10px; border-left-width:26px; border-top-width:16px; border-bottom-width:16px; } .promo-play-label{font-size:.8rem} } /* --- The fallback card: shown only when an embed refuses to load. --- */ .promo-fallback{ position:absolute; top:0;left:0;right:0;bottom:0; z-index:6; display:flex; flex-direction:column; align-items:center; justify-content:center; gap:18px; padding:24px; text-align:center; border-radius:14px; background:linear-gradient(145deg,rgba(25,56,96,.72),rgba(4,8,14,.92)); } .promo-fallback-title{ font-size:1.05rem; font-weight:800; letter-spacing:-.01em; color:var(--ice); } .promo-fallback .btn{margin-top:2px} /* ===================================================================== VERTICAL VIDEO (a YouTube Short) --------------------------------------------------------------------- A 9:16 box at full column width would be over 1000px tall and would detonate the hero. So the vertical player is capped by WIDTH and centred in its panel: the width sets the height, the height stays sane, and the panel's own background fills what is left. Sized to be unmissable, not polite. 400px wide on desktop = 711px tall, taller than the headline beside it. It is the first thing you see. ===================================================================== */ /* A vertical video is HEIGHT-constrained, not width-constrained. At 400px wide it was 711px tall — taller than the entire headline block, which is why it swallowed the hero. Sized off the height it should be, working backwards to the width: 260px wide x 462px tall <- desktop. Sits inside the text block. 220px wide x 391px tall <- phone. Roughly a phone-in-hand size, which is what a Short should look like. ------------------------------------------------------------------- */ .hero-promo.promo-vertical{ padding-top:177.78%; /* 9:16 */ max-width:340px; margin-left:auto; margin-right:auto; } /* Give the promo column more room so the wider video sits comfortably. */ @media (min-width:981px){ .hero-grid{grid-template-columns:1.06fr .94fr;gap:44px} .hero-panel-promo{padding:12px} } @media (max-width:980px){ .hero-promo.promo-vertical{max-width:320px} } @media (max-width:720px){ .hero-promo.promo-vertical{max-width:280px} .hero-panel-promo{padding:10px} } /* The CTA and play button sit inside a narrower box now. Tighten them so nothing wraps or clips. */ .promo-vertical .promo-cta{left:10px;right:10px;bottom:10px;padding:10px 13px} .promo-vertical .promo-cta-text{font-size:.66rem;letter-spacing:.08em} .promo-vertical .promo-play-icon{width:70px;height:70px} .promo-vertical .promo-play-icon::after{ margin:-12px 0 0 -8px; border-left-width:20px;border-top-width:12px;border-bottom-width:12px; } /* ===================================================================== THE CLICK SHIELD A transparent layer over the YouTube iframe. It eats every click, so nothing YouTube renders — the title bar, the logo, the video surface, the end-screen cards — can carry a visitor off this site and into somebody else's recommendation feed. Sits ABOVE the iframe (z-index 2) and BELOW our own controls (4, 5), so the sound button and the Daily Brief pill still work. ===================================================================== */ .promo-shield{ position:absolute; top:0;left:0;right:0;bottom:0; z-index:3; display:block; cursor:pointer; background:transparent; border-radius:14px; } /* Once the video is playing, the poster and the big play button get out of the way — the iframe is already autoplaying underneath. */ .promo-playing .promo-play{display:none} /* The sound pill has to sit above the shield to be clickable. */ .promo-sound{z-index:5} .promo-cta{z-index:6} /* Nudge: a silent autoplaying video needs to tell people it has sound. */ .promo-sound{ display:inline-flex; align-items:center; gap:7px; } .promo-sound::before{ content:''; width:0;height:0; border-left:8px solid currentColor; border-top:5px solid transparent; border-bottom:5px solid transparent; } /* ===================================================================== [hidden] MUST ACTUALLY HIDE THINGS --------------------------------------------------------------------- The browser hides [hidden] elements with a USER-AGENT rule: [hidden] { display: none } Any author rule beats a UA rule. So the moment .promo-play got display: flex the `hidden` attribute stopped working on it. The JS was setting playBtn.hidden = true and the button was cheerfully staying put — a full-size dark overlay at z-index 3, sitting ON TOP of the video iframe and eating every click aimed at it. Same for .promo-sound (display:inline-flex) and .chip. This is the single most common silent bug in modern CSS. ===================================================================== */ [hidden]{display:none !important} /* --- Explicit layer stack. No implicit ordering, no surprises. --- */ .promo-poster{z-index:1} /* the emblem, always underneath */ .promo-frame, .promo-video {z-index:2} /* the video */ .promo-shield{z-index:3} /* eats clicks aimed at YouTube */ .promo-play {z-index:4} /* only visible before playback */ .promo-sound {z-index:5} /* must sit above the shield */ .promo-cta {z-index:6} /* the Daily Brief pill, always on top*/ .promo-error, .promo-fallback{z-index:7} /* ===================================================================== NO MORE POP-IN --------------------------------------------------------------------- The frame used to appear the instant it was inserted — before YouTube had painted anything into it. So you got: emblem, then a black rectangle, then a spinner, then the video. Four states in a second. That is the "glitchy load". Now the frame starts transparent and the emblem poster holds the space. The frame only fades in on its load event, and the poster fades out underneath it. One transition, no black frame, no layout shift. ===================================================================== */ .promo-frame{ opacity:0; transition:opacity .5s ease; } .promo-ready .promo-frame{opacity:1} .promo-poster{ opacity:1; transition:opacity .5s ease .15s; /* leaves slightly after the video arrives */ } .promo-ready .promo-poster{opacity:0} /* The play button is only ever a pre-roll affordance. Once the frame is ready it is gone — and [hidden] now genuinely hides it. */ .promo-ready .promo-play{display:none} /* Sound pill: hidden until there is actually something to unmute, so it never sits there dead. */ .promo-sound{ opacity:0; transition:opacity .3s ease; } .promo-ready .promo-sound{opacity:1} .promo-unmuted .promo-sound{display:none} /* Mobile: the shield must not swallow the sound pill or the CTA. Both sit above it, but on a touch screen the tap target has to be real. */ @media (hover:none){ .promo-sound{min-height:44px;padding:0 16px} .promo-cta{min-height:44px} } /* ===================================================================== FEATURED-VIDEO "SAMPLE" BADGE (brief.js -> #brief-video.is-sample) The day's brief has passed; the main video is now a preview of the format. Same visual language as .soon-flag / .status-pill. ===================================================================== */ .video-sample{ display:flex;align-items:baseline;flex-wrap:wrap;gap:10px 14px; margin-bottom:16px; } .video-sample-flag{ display:inline-grid;place-items:center; padding:6px 13px;border-radius:999px; border:1px solid rgba(101,169,255,.42); background:var(--panel2); color:var(--blue2); font-size:.72rem;font-weight:800;letter-spacing:.8px;text-transform:uppercase; white-space:nowrap; } .video-sample-text{color:var(--muted);font-size:.92rem;flex:1 1 240px;min-width:0} /* ===================================================================== HERO EMBLEM — small logo above the headline, neon glow ===================================================================== */ .hero-mark{ display:inline-block; width:264px;height:148px; margin:0 0 26px; padding:12px; border-radius:20px; overflow:hidden; border:1px solid rgba(120,180,255,.6); background:var(--panel2); box-shadow:0 0 6px rgba(101,169,255,.75), 0 0 18px rgba(49,140,255,.55), 0 0 42px rgba(49,140,255,.30); animation:bb-neon 3s ease-in-out infinite; will-change:box-shadow; } .hero-mark img{width:100%;height:100%;object-fit:contain;display:block} @keyframes bb-neon{ 0%,100%{box-shadow:0 0 5px rgba(101,169,255,.55), 0 0 14px rgba(49,140,255,.45), 0 0 30px rgba(49,140,255,.24)} 50% {box-shadow:0 0 11px rgba(120,180,255,.95), 0 0 27px rgba(49,140,255,.70), 0 0 54px rgba(49,140,255,.44)} } @media (max-width:720px){ .hero-mark{width:216px;height:122px;margin-bottom:20px} } @media (prefers-reduced-motion:reduce){ .hero-mark{animation:none} } /* ===================================================================== TECHNOLOGY ROADMAP STUDIO (/roadmap) + two-tool tabs under /assessment Uses only the tokens declared in :root and the three semantic accents the site already uses (#3ddc97 / #ffc857 / #ff6b6b). No new hues. Dynamic per-phase color arrives at runtime via the --rm-accent custom property, set through the CSSOM (CSP-safe: no inline style attributes). ===================================================================== */ .rm-hidden{display:none !important} /* --- two-tool switcher (Readiness Assessment | Technology Roadmap) --- */ .tool-tabs{display:inline-flex;gap:6px;padding:6px;border:1px solid var(--line);border-radius:12px;background:var(--panel2);margin:22px 0 4px} .tool-tab{padding:10px 18px;border-radius:8px;font-weight:800;font-size:.9rem;color:var(--muted);border:1px solid transparent;transition:color .18s,background .18s,border-color .18s} .tool-tab:hover{color:var(--blue2)} .tool-tab[aria-current="page"]{color:#fff;background:linear-gradient(135deg,#1675e5,#0d315f);border-color:#4698ff} @media(max-width:520px){.tool-tabs{display:flex}.tool-tab{flex:1;text-align:center}} /* --- wizard shell --- */ .rm-studio{border:1px solid var(--line);border-radius:16px;background:linear-gradient(160deg,rgba(18,34,55,.72),rgba(5,10,17,.72));box-shadow:var(--shadow);overflow:hidden;margin-top:26px} .rm-studio-bar{display:flex;align-items:center;gap:14px;padding:16px 22px;border-bottom:1px solid var(--line)} .rm-studio-bar .rm-k{text-transform:uppercase;letter-spacing:2.4px;font-size:.72rem;font-weight:800;color:var(--blue2)} .rm-progress{flex:1;height:4px;border-radius:3px;background:rgba(87,161,255,.16);overflow:hidden} .rm-progress i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue2),var(--blue));transition:width .4s ease} .rm-step-count{font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums} .rm-studio-body{padding:34px 30px 30px} .rm-q-kicker{text-transform:uppercase;letter-spacing:2.4px;font-size:.72rem;font-weight:800;color:var(--muted);margin:0 0 10px} .rm-q-title{font-size:clamp(1.5rem,3.4vw,2.15rem);line-height:1.16;letter-spacing:-.8px;margin:0 0 22px} .rm-options{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px} .rm-opt{text-align:left;padding:15px 16px;border-radius:11px;border:1px solid var(--line);background:#070d16;color:var(--ice);cursor:pointer;display:flex;flex-direction:column;gap:3px;transition:border-color .18s,transform .12s,box-shadow .18s} .rm-opt:hover{border-color:rgba(101,169,255,.55);transform:translateY(-1px);box-shadow:0 10px 26px -18px rgba(49,140,255,.8)} .rm-opt.sel{border-color:#4698ff;background:linear-gradient(135deg,rgba(22,117,229,.28),rgba(13,49,95,.28));box-shadow:0 0 0 1px rgba(70,152,255,.45)} .rm-ot{font-weight:800;font-size:.98rem} .rm-oh{font-size:.8rem;color:var(--muted)} .rm-opt.sel .rm-oh{color:#c3d7f5} .rm-nav{display:flex;justify-content:space-between;align-items:center;margin-top:26px;gap:16px} .rm-back{background:none;border:none;color:var(--muted);font:inherit;font-size:.9rem;cursor:pointer;padding:6px 2px} .rm-back:hover{color:var(--ice)} .rm-back[disabled]{opacity:0;pointer-events:none} .rm-review{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px} .rm-rchip{font-size:.76rem;letter-spacing:.3px;padding:7px 11px;border-radius:8px;border:1px solid var(--line);background:var(--panel2);color:var(--muted)} .rm-rchip b{color:var(--ice);font-weight:700} /* --- loading --- */ .rm-loading{text-align:center;padding:70px 20px} .rm-ring{width:44px;height:44px;margin:0 auto 20px;border:3px solid rgba(87,161,255,.2);border-top-color:var(--blue2);border-radius:50%;animation:rm-spin 1s linear infinite} @keyframes rm-spin{to{transform:rotate(360deg)}} .rm-loadmsg{color:var(--muted);letter-spacing:.4px;font-size:.94rem} /* --- output: thesis + states --- */ .rm-out-mast{border-top:2px solid var(--blue);padding-top:20px} .rm-thesis{font-size:clamp(1.3rem,2.8vw,1.9rem);line-height:1.32;letter-spacing:-.4px;margin:12px 0 26px;max-width:36ch;color:var(--ice)} .rm-states{display:grid;grid-template-columns:1fr auto 1fr;gap:16px;align-items:stretch;margin-bottom:14px} .rm-statecard{padding:20px;border:1px solid var(--line);border-radius:14px;background:var(--panel)} .rm-statecard.now{border-left:3px solid var(--muted)} .rm-statecard.target{border-left:3px solid var(--blue2)} .rm-sl{text-transform:uppercase;letter-spacing:2px;font-size:.68rem;font-weight:800;color:var(--muted);margin-bottom:8px} .rm-statecard p{margin:0;color:#cdd9ea;font-size:.96rem} .rm-arrow{display:flex;align-items:center;justify-content:center;color:var(--blue2);font-size:1.5rem} /* --- block headers --- */ .rm-block-head{display:flex;align-items:baseline;gap:12px;margin:44px 0 18px} .rm-block-head .rm-n{color:var(--blue2);font-weight:800;font-variant-numeric:tabular-nums} .rm-block-head h2{font-size:clamp(1.5rem,3vw,2rem);letter-spacing:-.6px;margin:0} .rm-block-head .rm-sub{margin-left:auto;color:var(--muted);font-size:.82rem} /* --- maturity bars --- */ .rm-mat{display:grid;gap:14px} .rm-matrow{display:grid;grid-template-columns:180px 1fr;gap:16px;align-items:center} .rm-dim{font-weight:800;font-size:.95rem} .rm-mattrack{position:relative;height:36px;border:1px solid var(--line);border-radius:10px;background:#070d16;overflow:hidden} .rm-matticks{position:absolute;inset:0;display:flex;pointer-events:none} .rm-matticks span{flex:1;border-right:1px solid rgba(87,161,255,.10)} .rm-matticks span:last-child{border-right:none} .rm-matfill{position:absolute;left:0;top:0;bottom:0;width:0;border-radius:9px 0 0 9px;background:var(--rm-accent,var(--blue2));opacity:.85;transition:width .9s cubic-bezier(.2,.7,.2,1)} .rm-matlabel{position:absolute;right:10px;top:50%;transform:translateY(-50%);font-size:.78rem;font-weight:800;color:#04121f;font-variant-numeric:tabular-nums} .rm-mattarget{position:absolute;top:-2px;bottom:-2px;width:2px;background:var(--ice)} .rm-mattarget::after{content:"TARGET";position:absolute;top:-14px;left:50%;transform:translateX(-50%);font-size:.52rem;letter-spacing:1px;font-weight:800;color:var(--ice);white-space:nowrap} /* --- journey --- */ .rm-track{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;position:relative} .rm-track::before{content:"";position:absolute;top:44px;left:6%;right:6%;height:2px;background:linear-gradient(90deg,var(--blue2),var(--blue),var(--blue2));opacity:.45} .rm-phase{position:relative;z-index:1;border:1px solid var(--line);border-top:3px solid var(--rm-accent,var(--blue2));border-radius:14px;background:linear-gradient(160deg,rgba(18,34,55,.75),rgba(5,10,17,.8));padding:0 0 16px;display:flex;flex-direction:column;opacity:0;transform:translateY(12px);animation:rm-rise .5s ease forwards} @keyframes rm-rise{to{opacity:1;transform:none}} .rm-cap{height:0} .rm-emblem{width:64px;height:64px;margin:20px auto 8px;border-radius:50%;display:grid;place-items:center;border:2px solid var(--rm-accent,var(--blue2));background:#070d16;color:var(--rm-accent,var(--blue2))} .rm-pkicker{text-align:center;text-transform:uppercase;letter-spacing:1.4px;font-size:.66rem;font-weight:800;color:var(--muted);margin:0} .rm-pname{text-align:center;font-size:1.12rem;line-height:1.2;margin:5px 14px 8px} .rm-ptime{display:block;width:max-content;margin:0 auto 12px;padding:3px 12px;border-radius:999px;background:var(--rm-accent,var(--blue2));color:#04121f;font-size:.72rem;font-weight:800} .rm-pobj{font-size:.86rem;color:#cdd9ea;margin:0 16px 12px} .rm-wlabel{margin:0 16px 6px;text-transform:uppercase;letter-spacing:1.2px;font-size:.6rem;font-weight:800;color:var(--muted)} .rm-ws{list-style:none;margin:0 16px 12px;padding:0} .rm-ws li{position:relative;padding:6px 0 6px 15px;font-size:.82rem;color:#d3deee;border-bottom:1px solid rgba(87,161,255,.10)} .rm-ws li:last-child{border-bottom:none} .rm-ws li::before{content:"";position:absolute;left:0;top:12px;width:5px;height:5px;border-radius:1px;background:var(--rm-accent,var(--blue2))} .rm-pout{font-size:.8rem;color:var(--muted);border-top:1px dashed var(--line);padding-top:10px;margin:0 16px} .rm-pout b{display:block;text-transform:uppercase;letter-spacing:1px;font-size:.58rem;color:var(--ice);margin-bottom:3px} /* --- signals / watch-outs / sources --- */ .rm-cols{display:grid;grid-template-columns:1fr 1fr;gap:24px} .rm-listcard{padding:24px;border:1px solid var(--line);border-radius:14px;background:var(--panel)} .rm-listcard h3{margin:0 0 12px;text-transform:uppercase;letter-spacing:1.4px;font-size:.74rem} .rm-listcard.kpi h3{color:#3ddc97} .rm-listcard.risk h3{color:#ff6b6b} .rm-listcard ul{list-style:none;margin:0;padding:0} .rm-listcard li{position:relative;padding:10px 0 10px 22px;font-size:.94rem;color:#d3deee;border-bottom:1px solid var(--line)} .rm-listcard li:last-child{border-bottom:none} .rm-listcard.kpi li::before{content:"\2713";position:absolute;left:0;top:9px;color:#3ddc97;font-weight:800;font-size:.8rem} .rm-listcard.risk li::before{content:"!";position:absolute;left:4px;top:9px;color:#ff6b6b;font-weight:800} .rm-sources{margin-top:28px;border-top:1px solid var(--line);padding-top:18px} .rm-sl2{text-transform:uppercase;letter-spacing:1.6px;font-size:.68rem;font-weight:800;color:var(--muted);margin:0 0 10px} .rm-schips{display:flex;flex-wrap:wrap;gap:8px} .rm-schip{padding:7px 12px;border:1px solid var(--line);border-radius:999px;background:var(--panel2);color:#d7e6f8;font-size:.8rem} @media(max-width:820px){ .rm-track{grid-template-columns:1fr}.rm-track::before{display:none} .rm-cols{grid-template-columns:1fr}.rm-states{grid-template-columns:1fr} .rm-arrow{transform:rotate(90deg)}.rm-matrow{grid-template-columns:1fr;gap:7px} } /* ===================================================================== FLIP LOGO — the neon .hero-mark emblem, now a flip. Front face plays the promo Short (letterboxed so the 9:16 clip is never cropped); after it has played through data-plays times it flips to the emblem and stays there. The .hero-mark rule above keeps the neon box, glow, and footprint. Tokens only; dynamic behavior is class toggles from flip-logo.js (CSP-safe). ===================================================================== */ .hero-mark.flip-logo{padding:0;perspective:900px} .flip-logo{position:relative} .flip-inner{position:absolute;inset:0;transform-style:preserve-3d;transition:transform 1s cubic-bezier(.2,.7,.2,1);will-change:transform} .flip-logo.flipped .flip-inner{transform:rotateY(180deg)} .flip-logo.no-anim .flip-inner{transition:none} .flip-face{position:absolute;inset:0;-webkit-backface-visibility:hidden;backface-visibility:hidden;border-radius:inherit;overflow:hidden;display:grid;place-items:center} .flip-back{transform:rotateY(180deg)} .flip-front{background:var(--panel2)} .flip-video{position:absolute;inset:0;z-index:2} /* Short is 9:16; letterbox inside the landscape neon box instead of cropping */ .flip-frame{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);height:100%;width:calc(100% * 9 / 16);max-width:100%;border:0;display:block} .flip-poster{position:absolute;inset:0;z-index:1;padding:12px} .flip-back{padding:12px;background:var(--panel2)} .flip-poster img,.flip-back img{width:100%;height:100%;object-fit:contain} /* once the player is in, fade the poster out beneath it */ .flip-logo.is-playing .flip-poster{opacity:0;transition:opacity .5s ease .3s} @media (prefers-reduced-motion:reduce){.flip-inner{transition:none}} /* Unmute control on the flip emblem — hidden until the clip is playing, gone once it flips to the logo. Sound stays off until this is pressed. */ .flip-sound{position:absolute;top:8px;right:8px;z-index:6;display:none;align-items:center;gap:6px;padding:5px 9px;border-radius:999px;border:1px solid var(--line);background:rgba(5,8,13,.72);color:var(--ice);font:inherit;font-size:.64rem;font-weight:800;letter-spacing:.4px;cursor:pointer;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)} .flip-sound:hover{border-color:rgba(101,169,255,.6);color:var(--blue2)} .flip-sound-ico{width:8px;height:8px;border-radius:2px;background:var(--blue2);box-shadow:0 0 0 3px rgba(101,169,255,.22)} .flip-sound.on .flip-sound-ico{background:#3ddc97;box-shadow:0 0 0 3px rgba(61,220,151,.22)} .flip-logo.is-playing .flip-sound{display:inline-flex} .flip-logo.flipped .flip-sound{display:none} /* ===================================================================== AUDIT POLISH LAYER — typography, consistency, and micro-craft. Palette and logo unchanged; this only refines execution. ===================================================================== */ /* Display headings: turn the italic emphasis into a clean brand accent. Inter ships upright only here, so faux-italic at large sizes looked off. */ .hero h1 em,.subhero h1 em{font-style:normal;color:var(--blue2)} /* Headline weight + optical polish */ .hero h1,.section-head h2,.subhero h1,.about-grid h2,.contact-grid h2,.featured h3{font-family:var(--sans);font-feature-settings:"ss01","cv11";text-wrap:balance} /* Readable measure + no orphan/rag on body copy */ .hero p,.subhero p,.section-head p,.about-grid p,.contact-grid p,.card p,.featured p,.tool-promo p,.news-item p{text-wrap:pretty} /* Numbers align in tickers, badges, dates */ /* Selection + caret on brand color */ ::selection{background:rgba(49,140,255,.32);color:#fff} :root{accent-color:var(--blue)} /* Consistent corner radii on smaller controls */ .menu-toggle{border-radius:8px} /* Crisper, tokenized card hover (less diffuse than before) */ a.card:hover,.news-item:hover{box-shadow:0 18px 40px -24px rgba(49,140,255,.55)} .featured:hover,.tool-promo:hover{box-shadow:0 22px 50px -26px rgba(49,140,255,.5)} /* Secondary button gets a real hover state */ .btn.secondary:hover{border-color:var(--blue2);background:rgba(49,140,255,.10)} /* Comfortable tap targets on nav (>=44px) */ .nav-links a{padding:6px 2px;display:inline-block} /* Inputs: clear focus without layout shift */ .contact-form input:focus,.contact-form select:focus,.contact-form textarea:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 3px rgba(49,140,255,.18)} /* Strong text uses the now-defined ink token everywhere */ strong,b{color:var(--ink)} /* ===================================================================== DISPLAY TYPEFACE — Space Grotesk on headings only; Inter stays for body. Distinctive and technical without hurting readability of running text. ===================================================================== */ .hero h1,.subhero h1, .section-head h2,.about-grid h2,.contact-grid h2, .featured h3,.tool-promo h3,.brief-promo h3, .card h3,.news-item h3,.session-body h3,.assess-domain-head h3, .rm-thesis,.rm-pname,.rm-q-title{ font-family:var(--display); font-weight:700; letter-spacing:-.02em; } /* Space Grotesk carries its own weight; ease the tracking on the big H1 */ .hero h1,.subhero h1{letter-spacing:-.018em;font-weight:700} /* The brand wordmark also reads sharper in the display face */ .brand{font-family:var(--display)} /* ===================================================================== MOTION SYSTEM — restrained, GPU-friendly, CSP-safe (transform/opacity). Every hidden state is gated on html.mo (set in before paint), so with JS off or prefers-reduced-motion nothing is hidden and nothing moves. ===================================================================== */ @keyframes bb-rise{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}} /* ---- Scroll reveal (elements present at load) ---- */ html.mo :is(.section-head,.featured,.tool-promo,.card,.video-card,.news-item, .about-grid>div,.contact-grid>div,.webinar-cta,.webinar-note,.rm-studio, .assess-domain,[data-reveal]){ opacity:0;transform:translateY(28px); transition:opacity .7s var(--ease),transform .7s var(--ease); transition-delay:var(--d,0ms);will-change:opacity,transform; } html.mo :is(.section-head,.featured,.tool-promo,.card,.video-card,.news-item, .about-grid>div,.contact-grid>div,.webinar-cta,.webinar-note,.rm-studio, .assess-domain,[data-reveal]).in{opacity:1;transform:none} /* ---- Hero entrance sequence (< ~1.2s, never blocks interaction) ---- */ html.mo .hero-copy>*{opacity:0;animation:bb-rise .7s var(--ease) forwards} html.mo .hero-copy>.hero-mark{animation-delay:.04s} html.mo .hero-copy>.eyebrow{animation-delay:.14s} html.mo .hero-copy>h1{animation-delay:.24s} html.mo .hero-copy>p{animation-delay:.38s} html.mo .hero-copy>.actions{animation-delay:.52s} /* ---- Header state on scroll ---- */ .site-header{transition:background .3s var(--ease),box-shadow .3s var(--ease),border-color .3s var(--ease)} .nav-wrap{transition:height .3s var(--ease)} html.scrolled .site-header{background:rgba(5,8,13,.95);box-shadow:0 10px 34px -14px rgba(0,0,0,.65)} html.scrolled .nav-wrap{height:66px} /* ---- Nav underline (non-CTA links; CTA keeps its own) ---- */ .nav-links a:not(.nav-cta){position:relative} .nav-links a:not(.nav-cta)::after{content:"";position:absolute;left:2px;right:2px;bottom:-3px;height:2px;border-radius:2px;background:var(--blue2);transform:scaleX(0);transform-origin:left;transition:transform .28s var(--ease)} .nav-links a:not(.nav-cta):hover::after,.nav-links a[aria-current="page"]:not(.nav-cta)::after{transform:scaleX(1)} /* ---- Mobile menu: smooth open/close ---- */ @media(max-width:720px){ html.mo .nav-links{display:flex;opacity:0;transform:translateY(-8px);pointer-events:none;transition:opacity .25s var(--ease),transform .25s var(--ease)} html.mo .nav-links.open{opacity:1;transform:none;pointer-events:auto} } /* ---- Video cards + facade (no autoplay; iframe on click) ---- */ .video-card{transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease)} .video-card:hover{transform:translateY(-4px);border-color:rgba(101,169,255,.5);box-shadow:0 22px 50px -26px rgba(49,140,255,.55)} .video-frame.yt-facade{cursor:pointer} .yt-thumb{position:absolute;inset:0;background:#0a1420 center/cover no-repeat;transition:transform .5s var(--ease),filter .3s var(--ease)} .yt-facade::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,transparent 42%,rgba(5,8,13,.42));pointer-events:none;transition:opacity .3s} .yt-facade:hover .yt-thumb{transform:scale(1.045);filter:brightness(1.06)} .yt-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:50%;background:rgba(5,8,13,.58);border:1px solid rgba(101,169,255,.6);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:grid;place-items:center;transition:transform .28s var(--ease),background .28s var(--ease),box-shadow .28s var(--ease);z-index:2} .yt-play::before{content:"";width:0;height:0;border-style:solid;border-width:11px 0 11px 19px;border-color:transparent transparent transparent #eaf1fb;margin-left:5px} .yt-facade:hover .yt-play{transform:translate(-50%,-50%) scale(1.08);background:rgba(31,127,240,.9);box-shadow:0 0 0 8px rgba(49,140,255,.14)} .yt-facade:focus-visible{outline:3px solid var(--blue2);outline-offset:3px} .yt-facade.open .yt-thumb,.yt-facade.open .yt-play,.yt-facade.open::after{display:none} .yt-facade iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block} /* ---- Roadmap wizard: directional question transitions ---- */ @keyframes rm-in-r{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}} @keyframes rm-in-l{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}} html.mo .rm-in-r{animation:rm-in-r .4s var(--ease) both} html.mo .rm-in-l{animation:rm-in-l .4s var(--ease) both} .rm-opt.just{border-color:#4698ff!important;background:linear-gradient(135deg,rgba(31,127,240,.3),rgba(15,58,114,.3))!important;transform:translateY(-1px)} /* ---- Roadmap results: staged reveal (consulting-deliverable feel) ---- */ html.mo .rm-reveal{opacity:0;animation:bb-rise .6s var(--ease) forwards;animation-delay:var(--d,0ms)} /* ---- Reduced motion: absolute safety (html.mo is not set under reduce) ---- */ @media(prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important} } /* ---- Roadmap: Next steps (consulting close) ---- */ .rm-next{list-style:none;counter-reset:rmn;margin:0;padding:0;display:grid;gap:12px;max-width:760px} .rm-next li{counter-increment:rmn;position:relative;padding:16px 18px 16px 58px;border:1px solid var(--line);border-radius:14px;background:var(--panel);color:#d3deee;font-size:.98rem;line-height:1.5} .rm-next li::before{content:counter(rmn);position:absolute;left:16px;top:14px;width:28px;height:28px;border-radius:8px;display:grid;place-items:center;background:linear-gradient(135deg,#1f7ff0,#0f3a72);color:#fff;font-weight:800;font-size:.82rem;font-family:var(--display)} /* ===================================================================== MOTION — richer but restrained enhancements ===================================================================== */ /* Reveal now combines fade + rise + a subtle scale for cards/features */ html.mo :is(.card,.video-card,.news-item,.featured,.tool-promo){transform:translateY(30px) scale(.985)} html.mo :is(.card,.video-card,.news-item,.featured,.tool-promo).in{transform:none} /* A slow, mostly-idle sheen sweep on the key feature cards (Daily Brief, Assessment, featured article). Reads as "alive," not decorative noise. */ .tool-promo,.featured{position:relative;overflow:hidden} html.mo .tool-promo::before,html.mo .featured::before{ content:"";position:absolute;top:0;left:-65%;width:45%;height:100%;pointer-events:none; background:linear-gradient(100deg,transparent,rgba(101,169,255,.12),transparent); transform:skewX(-18deg);animation:bb-sheen 8s ease-in-out infinite} html.mo .featured::before{animation-delay:1.2s} @keyframes bb-sheen{0%,70%{left:-65%}84%{left:135%}100%{left:135%}} /* Slightly more life on card hover (subtle scale on top of the existing lift) */ a.card:hover,.topic-card:hover{transform:translateY(-4px) scale(1.012)} /* Progress bar on the roadmap wizard eases rather than jumps */ #rm-progress-fill{transition:width .5s var(--ease)} /* ---- Training: category identification eyebrow ---- */ .session-cat{font-family:var(--display);text-transform:uppercase;letter-spacing:2.2px;font-size:.66rem;font-weight:700;color:var(--blue2);margin-bottom:12px} /* ===================================================================== TRAINING HUB — category filter, native-video play state, progress ===================================================================== */ .train-filter{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 24px} .train-chip{font-family:var(--display);font-weight:700;font-size:.8rem;letter-spacing:.3px;color:var(--muted);background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:10px 16px;min-height:40px;cursor:pointer;transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease),transform .12s} .train-chip:hover{color:var(--blue2);border-color:rgba(101,169,255,.55)} .train-chip:active{transform:translateY(1px)} .train-chip.on{color:#fff;background:linear-gradient(135deg,#1675e5,#0d315f);border-color:#4698ff} .train-chip:focus-visible{outline:2px solid var(--blue2);outline-offset:3px} /* filtering: fade + scale out, then removed from layout so the grid reflows */ .session-card{transition:border-color .3s var(--ease),transform .3s var(--ease),box-shadow .3s var(--ease),opacity .26s ease} .session-card.train-hide{opacity:0;transform:scale(.965)} .webinar-grid .session-card[hidden]{display:none} /* native-video play state feedback + slim progress indicator */ .session-player{position:relative} .session-prog{position:absolute;left:0;right:0;top:0;height:3px;background:rgba(101,169,255,.16);z-index:3;pointer-events:none} .session-prog i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--blue2),var(--blue));transition:width .2s linear} .session-card.is-playing{border-color:rgba(101,169,255,.6);box-shadow:0 0 0 1px rgba(101,169,255,.28),0 22px 54px -26px rgba(49,140,255,.6)} .session-card.is-playing .session-cat{color:var(--blue2)} /* ===================================================================== TRAINING CARDS — premium play states + colorful accents ===================================================================== */ .session-player{position:relative} .session-video{display:block;width:100%;height:100%;background:#05080d} /* premium play overlay (enhancement over native controls; no autoplay) */ .session-play{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center; justify-content:center;gap:14px;cursor:pointer;border:0;text-align:center; background:radial-gradient(120% 90% at 50% 42%,rgba(5,8,13,.15),rgba(5,8,13,.55)); transition:opacity .45s var(--ease)} .session-player.started .session-play{opacity:0;pointer-events:none} .session-play-btn{width:74px;height:74px;border-radius:50%;display:grid;place-items:center; background:linear-gradient(135deg,rgba(31,127,240,.92),rgba(15,58,114,.92)); border:1px solid rgba(120,180,255,.7);box-shadow:0 14px 40px -12px rgba(49,140,255,.7); transition:transform .3s var(--ease),box-shadow .3s var(--ease)} .session-play-btn::before{content:"";width:0;height:0;border-style:solid; border-width:13px 0 13px 22px;border-color:transparent transparent transparent #eef4ff;margin-left:5px} html.mo .session-play-btn{animation:sess-pulse 2.8s ease-in-out infinite} @keyframes sess-pulse{0%,100%{box-shadow:0 14px 40px -12px rgba(49,140,255,.6)} 50%{box-shadow:0 14px 46px -10px rgba(49,140,255,.9),0 0 0 10px rgba(49,140,255,.08)}} .session-play:hover .session-play-btn,.session-play:focus-visible .session-play-btn{transform:scale(1.08)} .session-play:focus-visible{outline:3px solid var(--blue2);outline-offset:-4px} .session-play-meta{display:flex;gap:10px;align-items:center;font-family:var(--display);font-size:.82rem} .session-play-meta b{color:#fff;font-weight:700;letter-spacing:.02em;background:rgba(31,127,240,.28); border:1px solid rgba(120,180,255,.4);padding:4px 11px;border-radius:999px} .session-play-meta span{color:var(--ice);background:rgba(5,8,13,.5);border:1px solid var(--line); padding:4px 10px;border-radius:999px} /* the card itself: subtle movement + a colorful accent bar that animates on hover */ .session-card{position:relative;transition:transform .3s var(--ease),border-color .3s var(--ease),box-shadow .3s var(--ease)} .session-card::after{content:"";position:absolute;left:0;right:0;top:0;height:3px;border-radius:3px 3px 0 0; background:linear-gradient(90deg,var(--blue),#65a9ff,#3ddc97,var(--blue));background-size:300% 100%; opacity:0;transition:opacity .35s var(--ease)} .session-card:hover{transform:translateY(-5px);border-color:rgba(101,169,255,.45); box-shadow:0 26px 60px -30px rgba(49,140,255,.6)} .session-card:hover::after{opacity:.9} html.mo .session-card:hover::after{animation:sess-slide 3s linear infinite} @keyframes sess-slide{0%{background-position:0% 0}100%{background-position:300% 0}} .session-card.is-playing{border-color:rgba(101,169,255,.55)} .session-card.is-playing::after{opacity:1} /* poster gets a soft zoom while idle-hovered (before play) */ .session-player:not(.started):hover .session-video{filter:brightness(1.05)} @media(prefers-reduced-motion:reduce){ html.mo .session-play-btn,html.mo .session-card:hover::after{animation:none} } /* ===================================================================== EDITORIAL LAYER — patterns from open news design systems (FT Origami, Guardian Source, GOV.UK): kicker labels, bylines, datelines, and a lead-story treatment. Publication, not brochure. ===================================================================== */ /* Kicker: the small topic/section label above a headline */ .kicker{display:inline-block;font-family:var(--display);font-weight:700;text-transform:uppercase; letter-spacing:.14em;font-size:.72rem;color:var(--blue2); padding-bottom:8px;margin-bottom:4px;border-bottom:2px solid rgba(101,169,255,.35)} /* Byline / dateline: signals a real person publishes here */ .byline{display:flex;align-items:center;gap:8px;font-family:var(--display);font-weight:600; font-size:.82rem;color:var(--muted);margin:2px 0} .byline-dot{width:7px;height:7px;border-radius:50%;background:var(--green);flex:none; box-shadow:0 0 0 3px rgba(61,220,151,.18)} html.mo .byline-dot{animation:bb-live 2.4s ease-in-out infinite} @keyframes bb-live{0%,100%{box-shadow:0 0 0 3px rgba(61,220,151,.18)}50%{box-shadow:0 0 0 5px rgba(61,220,151,.05)}} /* hero byline sits between copy and the CTAs */ .hero-copy .byline{margin:14px 0 20px} /* Lead story: the Daily Brief presented like a front-page splash */ .lead-story{position:relative;border-color:rgba(101,169,255,.4); background:linear-gradient(150deg,rgba(20,44,84,.5),rgba(10,17,27,.6))} .lead-story::before{content:"LEAD";position:absolute;top:0;right:0;font-family:var(--display); font-weight:700;font-size:.62rem;letter-spacing:.18em;color:#05080d;background:var(--blue2); padding:5px 10px;border-radius:0 var(--r-lg) 0 10px} .lead-story h3{font-size:clamp(1.4rem,2.4vw,2rem);line-height:1.15} .lead-story .byline{margin-top:10px} /* published training pill reads as available, not backlog */ .status-pill.ready{color:#062012;background:linear-gradient(135deg,#4fe0a0,#2bb47e);border-color:transparent} .session-art-soon .session-eta{color:var(--blue2)} /* ===================================================================== MEET THE 3 — the AI twin, explained and disclosed ===================================================================== */ .meet-three{padding:clamp(48px,7vw,86px) 0;background:linear-gradient(180deg,rgba(10,17,27,.6),transparent)} .three-grid{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(28px,5vw,64px);align-items:center} .three-copy h2{font-size:clamp(1.7rem,3.2vw,2.6rem);margin:6px 0 16px} .three-copy p{color:var(--muted);max-width:60ch} .three-note{margin-top:18px;font-size:.95rem;color:var(--muted2)} /* the reusable disclosure badge */ .by-three{display:inline-flex;align-items:center;gap:7px;font-family:var(--display);font-weight:700; font-size:.72rem;letter-spacing:.03em;color:var(--ice);background:linear-gradient(135deg,rgba(31,127,240,.28),rgba(15,58,114,.32)); border:1px solid rgba(120,180,255,.45);border-radius:999px;padding:5px 11px;white-space:nowrap} .by-three-dot{width:7px;height:7px;border-radius:50%;background:var(--blue2);flex:none;box-shadow:0 0 0 3px rgba(101,169,255,.18)} html.mo .by-three-dot{animation:bb-live 2.6s ease-in-out infinite} .by-three-sm{font-size:.64rem;padding:3px 9px;vertical-align:middle} /* the paired faces: person -> twin */ .three-faces{display:flex;align-items:center;justify-content:center;gap:clamp(10px,2vw,22px)} .three-face{margin:0;text-align:center;display:flex;flex-direction:column;align-items:center;gap:10px} .three-face img{object-fit:cover;border-radius:20px;border:1px solid var(--line);box-shadow:var(--shadow);display:block} .three-face.is-human img{width:clamp(140px,20vw,196px);aspect-ratio:4/5} .three-face.is-twin img{width:clamp(96px,13vw,132px);aspect-ratio:1;border-radius:50%; border:2px solid rgba(120,180,255,.6);box-shadow:0 0 0 1px rgba(101,169,255,.25),0 14px 40px -16px rgba(49,140,255,.6)} .three-face figcaption{font-family:var(--display);font-size:.82rem;line-height:1.3} .three-face figcaption b{display:block;color:var(--ice);font-weight:700} .three-face figcaption span{color:var(--muted2);font-size:.74rem} .three-link{color:var(--blue2);font-size:1.5rem;flex:none;opacity:.8} html.mo .three-face.is-twin img{animation:bb-live 3s ease-in-out infinite} @media(max-width:760px){ .three-grid{grid-template-columns:1fr} .three-faces{order:-1} } /* ===================================================================== LOGO — a few tasteful home links (hero mark, footer, section break) ===================================================================== */ .hero-mark-link{display:inline-block;transition:transform .3s var(--ease),opacity .3s var(--ease)} .hero-mark-link:hover{transform:translateY(-2px)} .hero-mark-link:focus-visible{outline:2px solid var(--blue2);outline-offset:6px;border-radius:8px} html.mo .hero-copy>.hero-mark-link{animation:bb-rise .7s var(--ease) forwards;animation-delay:.04s} .footer-logo{display:inline-flex;border-radius:10px;transition:transform .25s var(--ease),opacity .25s var(--ease)} .footer-logo:hover{transform:translateY(-1px);opacity:.9} .footer-logo:focus-visible{outline:2px solid var(--blue2);outline-offset:4px} /* editorial section-break emblem: centered mark flanked by hairlines */ .brand-rule{display:flex;align-items:center;justify-content:center;gap:22px;padding:clamp(30px,5vw,58px) 0} .brand-rule::before,.brand-rule::after{content:"";height:1px;flex:1;max-width:180px; background:linear-gradient(90deg,transparent,var(--line),transparent)} .brand-rule a{display:inline-block;line-height:0;opacity:.5; transition:opacity .3s var(--ease),transform .3s var(--ease)} .brand-rule a img{width:clamp(84px,10vw,116px);height:auto; filter:drop-shadow(0 8px 24px rgba(49,140,255,.25))} .brand-rule a:hover{opacity:1;transform:translateY(-2px)} .brand-rule a:focus-visible{outline:2px solid var(--blue2);outline-offset:6px;border-radius:8px;opacity:1} /* ===================================================================== ROUNDED TYPE — Nunito Sans (body) + Poppins (display). Softer, rounder letterforms across the site; system fallbacks preserve the CSP. ===================================================================== */ @font-face{font-family:"Nunito Sans";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/nunito-sans-400.woff2) format("woff2")} @font-face{font-family:"Nunito Sans";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/nunito-sans-600.woff2) format("woff2")} @font-face{font-family:"Nunito Sans";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/nunito-sans-700.woff2) format("woff2")} @font-face{font-family:"Poppins";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/poppins-600.woff2) format("woff2")} @font-face{font-family:"Poppins";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/poppins-700.woff2) format("woff2")} @font-face{font-family:"Poppins";font-style:normal;font-weight:800;font-display:swap;src:url(fonts/poppins-800.woff2) format("woff2")} /* Nunito Sans has no Inter stylistic sets; drop those feature settings, run headlines in rounded Poppins at a loaded weight, and relax the tracking. */ .hero h1,.section-head h2,.subhero h1,.about-grid h2,.contact-grid h2,.featured h3,.res-hero h1,.rm-q-title{ font-family:var(--display);font-weight:800;font-feature-settings:normal;letter-spacing:-.012em} .hero h1{letter-spacing:-.02em} body{font-weight:400} /* ===================================================================== PRIORITY NAV TABS — Daily Brief + Assessment in a standout blue ===================================================================== */ .nav-links a.hot{color:#3ec9ff!important;font-weight:800;text-shadow:0 0 14px rgba(62,201,255,.45)} .nav-links a.hot::after{background:#3ec9ff!important;transform:scaleX(1);opacity:.7;box-shadow:0 0 10px rgba(62,201,255,.6)} .nav-links a.hot:hover{color:#7ad8ff!important} .nav-links a.hot:hover::after{opacity:1} /* --- Meet the 3: hero video in place of the paired portraits --- */ .three-video{display:flex;flex-direction:column;align-items:center;gap:14px} .three-short.video-frame{position:relative;width:min(300px,82%);aspect-ratio:9/16;border-radius:20px;overflow:hidden;border:1px solid rgba(120,180,255,.45);box-shadow:0 24px 60px -26px rgba(49,140,255,.55)} .three-vcap{font-family:var(--display);font-weight:600;font-size:.84rem;color:var(--muted2);text-align:center} @media(max-width:760px){.three-short.video-frame{width:min(260px,72%)}} /* --- Meet the 3: autoplaying lion promo (muted, looping) --- */ .three-poster{position:absolute;inset:0;background:radial-gradient(circle at 50% 42%,#0d1a30,#05080d 72%);z-index:1} .three-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;z-index:2;display:block;border-radius:20px} /* --- Meet the 3: sound toggle for the autoplaying promo --- */ .three-sound{position:absolute;left:10px;bottom:10px;z-index:3;display:inline-flex;align-items:center;gap:7px; font-family:var(--display);font-weight:700;font-size:.76rem;color:#eaf1fb;cursor:pointer; background:rgba(5,8,13,.62);border:1px solid rgba(120,180,255,.5);border-radius:999px;padding:7px 12px; -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:background .2s var(--ease),border-color .2s var(--ease)} .three-sound:hover{background:rgba(31,127,240,.5);border-color:#4698ff} .three-sound:focus-visible{outline:2px solid var(--blue2);outline-offset:2px} .three-sound-ic{width:13px;height:13px;flex:none;border-radius:2px; background:linear-gradient(135deg,var(--blue2),var(--blue));box-shadow:0 0 8px rgba(101,169,255,.6)} .three-short.snd .three-sound{background:rgba(31,127,240,.85);border-color:#7ad8ff} /* --- Meet the 3: clean ambient promo (no YouTube chrome), smooth load --- */ .three-poster{display:grid;place-items:center;padding:14%} .three-poster img{width:100%;height:auto;object-fit:contain;opacity:.95;border-radius:0} .three-iframe{opacity:0;transition:opacity .7s ease;background:transparent} .three-short.three-ready .three-iframe{opacity:1} .three-shield{position:absolute;inset:0;z-index:3;cursor:pointer;background:transparent} .three-sound{z-index:4} /* ===================================================================== TRAINING as structured, condensed courses (Professor-Messer style): a syllabus of focused lessons + a self-check under each session. ===================================================================== */ .webinar-grid{grid-template-columns:1fr;max-width:880px;margin-left:auto;margin-right:auto;gap:24px} .session-syllabus{margin-top:22px;border-top:1px solid var(--line);padding-top:20px} .syl-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:6px} .syl-eyebrow{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.68rem;color:var(--blue2)} .syl-meta{font-family:var(--display);font-size:.76rem;color:var(--muted2)} .syl-summary{color:var(--muted);margin:0 0 16px;font-size:.96rem} .syl-list{display:flex;flex-direction:column;gap:8px} .syl-lesson{border:1px solid var(--line);border-radius:12px;background:rgba(7,16,28,.5);overflow:hidden} .syl-lesson[open]{border-color:rgba(101,169,255,.42)} .syl-sum{list-style:none;cursor:pointer;display:flex;align-items:flex-start;gap:12px;padding:13px 15px} .syl-sum::-webkit-details-marker{display:none} .syl-num{flex:none;width:26px;height:26px;border-radius:8px;display:grid;place-items:center; background:linear-gradient(135deg,#1f7ff0,#0f3a72);color:#fff;font-family:var(--display);font-weight:800;font-size:.82rem;margin-top:1px} .syl-tt{flex:1;display:flex;flex-direction:column;gap:2px;min-width:0} .syl-title{font-family:var(--display);font-weight:700;font-size:1rem;color:var(--ink)} .syl-obj{color:var(--muted2);font-size:.86rem;line-height:1.4} .syl-time{flex:none;font-family:var(--display);font-size:.74rem;color:var(--blue2);margin-top:3px} .syl-sum::after{content:"+";flex:none;align-self:center;color:var(--blue2);font-weight:800;font-family:var(--display);font-size:1.1rem} .syl-lesson[open] .syl-sum::after{content:"\2212"} .syl-lesson[open] .syl-sum{border-bottom:1px solid var(--line)} .syl-points{margin:0;padding:12px 16px 16px 53px;list-style:disc;color:var(--muted);display:flex;flex-direction:column;gap:6px} .syl-points li{font-size:.92rem;line-height:1.5} .syl-check{margin-top:18px;padding-top:16px;border-top:1px dashed var(--line);display:flex;flex-direction:column;gap:8px} .syl-qa{border:1px solid var(--line);border-radius:10px;background:rgba(7,16,28,.4)} .syl-q{list-style:none;cursor:pointer;padding:11px 14px;font-family:var(--display);font-weight:600;font-size:.9rem;color:var(--ice)} .syl-q::-webkit-details-marker{display:none} .syl-q::before{content:"Q ";color:var(--blue2);font-weight:800} .syl-a{margin:0;padding:2px 14px 13px 14px;color:var(--muted);font-size:.9rem} .syl-a::before{content:"A ";color:var(--green);font-weight:800;font-family:var(--display)} /* ===================================================================== ASSESSMENT EXPERIENCE — guided advisory journey (flagship) ===================================================================== */ .ax-hidden{display:none !important} /* Launch screen */ .ax-intro{margin:8px auto 0;max-width:760px;border:1px solid rgba(101,169,255,.28);border-radius:22px; background:linear-gradient(160deg,rgba(20,44,84,.55),rgba(10,17,27,.72)); box-shadow:0 40px 90px -50px rgba(31,127,240,.6);padding:clamp(26px,4vw,46px);position:relative;overflow:hidden} .ax-intro::before{content:"";position:absolute;inset:0;background:radial-gradient(700px 300px at 80% -10%,rgba(49,140,255,.22),transparent 60%);pointer-events:none} .ax-intro.ax-gone{opacity:0;transform:translateY(-8px);transition:opacity .4s ease,transform .4s ease;pointer-events:none;height:0;padding:0;margin:0;border:0;overflow:hidden} .ax-intro-inner{position:relative} .ax-eyebrow{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.16em;font-size:.72rem;color:var(--blue2)} .ax-intro-h{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,3vw,2.2rem);line-height:1.14;margin:12px 0 12px;color:var(--ink)} .ax-intro-p{color:var(--muted);max-width:60ch;margin:0 0 22px} .ax-facts{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:22px} .ax-fact{border:1px solid var(--line);border-radius:14px;background:rgba(7,16,28,.55);padding:14px 10px;text-align:center} .ax-fact-n{display:block;font-family:var(--display);font-weight:800;font-size:1.5rem;color:var(--ice);line-height:1} .ax-fact-l{display:block;font-size:.74rem;color:var(--muted2);margin-top:5px;text-transform:uppercase;letter-spacing:.08em} .ax-get{margin:0 0 26px} .ax-get-h{font-family:var(--display);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.12em;color:var(--blue2)} .ax-get ul{margin:10px 0 0;padding:0;list-style:none;display:flex;flex-direction:column;gap:9px} .ax-get li{position:relative;padding-left:30px;color:var(--muted);font-size:.98rem} .ax-get li::before{content:"";position:absolute;left:0;top:2px;width:19px;height:19px;border-radius:6px; background:linear-gradient(135deg,#1f7ff0,#0f3a72)} .ax-get li::after{content:"";position:absolute;left:6px;top:6px;width:6px;height:10px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)} .ax-begin{font-size:1.05rem;padding:15px 30px} .ax-note{color:var(--muted2);font-size:.82rem;margin:16px 0 0;max-width:60ch} /* Stepper */ .ax-stepper{max-width:760px;margin:6px auto 20px;position:sticky;top:72px;z-index:20; background:linear-gradient(180deg,rgba(6,11,20,.96),rgba(6,11,20,.72)); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px); border:1px solid var(--line);border-radius:16px;padding:14px 18px} .ax-stepper-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-bottom:10px} .ax-sec-name{font-family:var(--display);font-weight:800;font-size:1.02rem;color:var(--ink)} .ax-sec-count{font-family:var(--display);font-size:.78rem;color:var(--blue2);flex:none} .ax-dots{display:flex;gap:6px;margin-bottom:10px} .ax-dot{height:5px;flex:1;border-radius:3px;background:rgba(90,120,160,.28);transition:background .3s ease} .ax-dot.is-done{background:linear-gradient(90deg,#2f9bff,#3ddc97)} .ax-dot.is-active{background:var(--blue2);box-shadow:0 0 10px rgba(101,169,255,.7)} .ax-bar{height:8px;border-radius:5px;background:rgba(90,120,160,.2);overflow:hidden} .ax-bar-fill{height:100%;width:0;border-radius:5px;background:linear-gradient(90deg,#1f7ff0,#3ddc97);transition:width .6s cubic-bezier(.22,1,.36,1)} .ax-bar-label{display:block;margin-top:7px;font-size:.76rem;color:var(--muted2);text-align:right} /* Step transitions */ .ax-step{will-change:transform,opacity} .ax-in-r{animation:ax-slide-r .42s cubic-bezier(.22,1,.36,1) both} .ax-in-l{animation:ax-slide-l .42s cubic-bezier(.22,1,.36,1) both} @keyframes ax-slide-r{from{opacity:0;transform:translateX(26px)}to{opacity:1;transform:none}} @keyframes ax-slide-l{from{opacity:0;transform:translateX(-26px)}to{opacity:1;transform:none}} /* Premium option cards */ .assess-opts{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:10px} .assess-opt{position:relative;display:flex;align-items:center;gap:10px;text-align:left; padding:15px 16px 15px 44px;border:1px solid var(--line);border-radius:13px;background:rgba(7,16,28,.5); color:var(--muted);font-family:var(--sans);font-weight:600;font-size:.94rem;cursor:pointer; transition:border-color .2s ease,background .2s ease,transform .18s ease,box-shadow .2s ease} .assess-opt::before{content:"";position:absolute;left:15px;top:50%;transform:translateY(-50%); width:19px;height:19px;border-radius:50%;border:2px solid rgba(120,150,190,.55);transition:border-color .2s ease,background .2s ease} .assess-opt:hover{border-color:rgba(101,169,255,.55);color:var(--ice);transform:translateY(-2px);box-shadow:0 14px 30px -18px rgba(49,140,255,.6)} .assess-opt:focus-visible{outline:2px solid var(--blue2);outline-offset:2px} .assess-opt.sel{border-color:var(--blue2);color:var(--ice);background:linear-gradient(135deg,rgba(31,127,240,.24),rgba(15,58,114,.28));box-shadow:0 0 0 1px rgba(101,169,255,.4)} .assess-opt.sel::before{border-color:var(--blue2);background:var(--blue2)} .assess-opt.sel::after{content:"";position:absolute;left:21px;top:50%;transform:translate(-50%,-58%) rotate(42deg);width:5px;height:9px;border:solid #05080d;border-width:0 2px 2px 0} .assess-q{padding:2px 0 18px} .assess-qtext{font-family:var(--display);font-weight:700;font-size:1.05rem;color:var(--ink);margin:0 0 12px} /* Nav */ .ax-nav{max-width:760px;margin:22px auto 0;display:flex;align-items:center;gap:14px} .ax-nav-hint{flex:1;text-align:center;font-size:.82rem;color:var(--muted2)} .ax-btn{font-family:var(--display);font-weight:700;font-size:.98rem;padding:13px 24px;border-radius:12px;cursor:pointer; border:1px solid var(--line);background:rgba(7,16,28,.6);color:var(--ice);transition:transform .18s ease,background .2s ease,border-color .2s ease,box-shadow .2s ease} .ax-btn:hover{transform:translateY(-2px);border-color:rgba(101,169,255,.5)} .ax-btn:focus-visible{outline:2px solid var(--blue2);outline-offset:2px} .ax-back:disabled{opacity:.4;cursor:not-allowed;transform:none} .ax-primary{background:linear-gradient(135deg,#2f9bff,#1f6fe0);border-color:transparent;color:#fff;box-shadow:0 16px 36px -18px rgba(49,140,255,.8)} .ax-primary.is-ready{box-shadow:0 0 0 1px rgba(120,185,255,.5),0 18px 40px -16px rgba(49,140,255,.9)} .ax-shake{animation:ax-shake .4s ease} @keyframes ax-shake{0%,100%{transform:none}20%,60%{transform:translateX(-6px)}40%,80%{transform:translateX(6px)}} @media(max-width:620px){ .ax-facts{grid-template-columns:repeat(2,1fr)} .ax-stepper{top:60px;border-radius:0;margin-left:-16px;margin-right:-16px;border-left:0;border-right:0} .assess-opts{grid-template-columns:1fr} .ax-nav{position:sticky;bottom:0;background:linear-gradient(180deg,transparent,rgba(5,8,13,.96) 24%); padding:14px 0 16px;margin-top:16px;gap:10px} .ax-nav-hint{display:none} .ax-btn{flex:1;padding:16px 14px;font-size:1rem} .ax-back{flex:0 0 auto;padding:16px 18px} } @media(prefers-reduced-motion:reduce){ .ax-in-r,.ax-in-l,.ax-shake{animation:none !important} .ax-bar-fill,.assess-opt,.ax-btn,.ax-intro.ax-gone{transition:none !important} } /* ===================================================================== NAVIGATION UPGRADE — animated hamburger + refined pill nav ===================================================================== */ .visually-hidden{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} /* Animated hamburger -> X (drives off aria-expanded, toggled by app.js) */ .menu-toggle{display:none;place-items:center;width:46px;height:44px;padding:0; background:rgba(101,169,255,.06);border:1px solid var(--line);border-radius:11px;color:var(--ice); transition:background .2s var(--ease),border-color .2s var(--ease)} .menu-toggle:hover{background:rgba(101,169,255,.14);border-color:rgba(101,169,255,.5)} .menu-toggle:focus-visible{outline:2px solid var(--blue2);outline-offset:2px} .mt-icon{position:relative;display:block;width:22px;height:2px;border-radius:2px;background:currentColor;transition:background .2s ease} .mt-icon::before,.mt-icon::after{content:"";position:absolute;left:0;width:22px;height:2px;border-radius:2px;background:currentColor;transition:transform .3s var(--ease),top .3s var(--ease)} .mt-icon::before{top:-7px} .mt-icon::after{top:7px} .menu-toggle[aria-expanded="true"] .mt-icon{background:transparent} .menu-toggle[aria-expanded="true"] .mt-icon::before{top:0;transform:rotate(45deg)} .menu-toggle[aria-expanded="true"] .mt-icon::after{top:0;transform:rotate(-45deg)} /* Refined pill nav on desktop: tighter, tappable, with a soft hover pill */ @media(min-width:721px){ .nav-links{gap:4px;align-items:center} .nav-links a{padding:9px 14px;border-radius:11px;line-height:1; transition:background .2s var(--ease),color .2s var(--ease),box-shadow .2s var(--ease)} .nav-links a:hover{background:rgba(101,169,255,.12)} .nav-links a[aria-current="page"]{background:rgba(101,169,255,.14);color:var(--ice)} /* keep the underline as a subtle accent inside the pill */ .nav-links a:not(.nav-cta)::after{left:14px;right:14px;bottom:5px} /* the priority tabs read as solid buttons, not just glowing text */ .nav-links a.hot{background:linear-gradient(135deg,rgba(31,127,240,.22),rgba(15,58,114,.28)); box-shadow:inset 0 0 0 1px rgba(101,169,255,.4)} .nav-links a.hot:hover{background:linear-gradient(135deg,rgba(49,140,255,.34),rgba(20,70,140,.4))} .nav-links a.nav-cta.hot{box-shadow:inset 0 0 0 1px rgba(120,185,255,.55)} } /* Mobile dropdown: app-like full-width rows */ @media(max-width:720px){ .menu-toggle{display:grid} .nav-links{gap:4px;padding:12px} .nav-links a{padding:14px 14px;border-radius:12px;display:flex;align-items:center;min-height:48px} .nav-links a:hover,.nav-links a:active{background:rgba(101,169,255,.12)} .nav-links a.hot{background:linear-gradient(135deg,rgba(31,127,240,.2),rgba(15,58,114,.26))} } @media(prefers-reduced-motion:reduce){ .mt-icon,.mt-icon::before,.mt-icon::after,.menu-toggle,.nav-links a{transition:none!important} } /* ===================================================================== TOPIC PILLARS — the discussion strip as lively, linked pillar chips ===================================================================== */ .strip-topics{display:flex;flex-wrap:wrap;gap:10px;align-items:center} .pillar-chip{display:inline-flex;align-items:center;gap:9px;padding:9px 16px 9px 11px;border-radius:999px; border:1px solid var(--line);background:rgba(10,20,34,.55);color:#c6d5e8; font-family:var(--display);font-weight:600;font-size:.9rem;line-height:1; transition:transform .22s var(--ease),border-color .22s var(--ease),background .22s var(--ease),color .22s var(--ease),box-shadow .22s var(--ease)} .pillar-ic{display:grid;place-items:center;width:27px;height:27px;border-radius:8px;flex:none; background:rgba(101,169,255,.12);color:var(--blue2); transition:background .22s var(--ease),color .22s var(--ease),transform .22s var(--ease)} .pillar-ic svg{width:16px;height:16px} .pillar-chip:hover{transform:translateY(-3px);color:#fff;border-color:var(--accent,rgba(101,169,255,.6)); background:rgba(16,30,50,.82);box-shadow:0 16px 34px -18px var(--accentglow,rgba(49,140,255,.7))} .pillar-chip:hover .pillar-ic{background:var(--accent,var(--blue2));color:#05080d;transform:scale(1.08) rotate(-3deg)} .pillar-chip:focus-visible{outline:2px solid var(--blue2);outline-offset:3px} /* per-pillar accents */ .pc-ai{--accent:#318cff;--accentglow:rgba(49,140,255,.6)} .pc-sec{--accent:#3ddc97;--accentglow:rgba(61,220,151,.55)} .pc-ent{--accent:#65a9ff;--accentglow:rgba(101,169,255,.6)} .pc-pub{--accent:#f0b64d;--accentglow:rgba(240,182,77,.5)} .pc-sell{--accent:#ff7a9c;--accentglow:rgba(255,122,156,.5)} .pc-ai .pillar-ic{color:#65a9ff;background:rgba(49,140,255,.15)} .pc-sec .pillar-ic{color:#6fe6b4;background:rgba(61,220,151,.15)} .pc-pub .pillar-ic{color:#f4c877;background:rgba(240,182,77,.15)} .pc-sell .pillar-ic{color:#ff9db4;background:rgba(255,122,156,.15)} /* motion-safe staggered entrance (only when motion is enabled) */ @keyframes pc-in{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} html.mo .strip-topics .pillar-chip{opacity:0;animation:pc-in .5s var(--ease) both} html.mo .strip-topics .pc-ai{animation-delay:.04s} html.mo .strip-topics .pc-sec{animation-delay:.10s} html.mo .strip-topics .pc-ent{animation-delay:.16s} html.mo .strip-topics .pc-pub{animation-delay:.22s} html.mo .strip-topics .pc-sell{animation-delay:.28s} @media(prefers-reduced-motion:reduce){.pillar-chip,.pillar-ic{transition:none!important}} /* Menu: drop the underline indicators. Hover pills + the two highlighted star tabs (Daily Brief, Assessment) carry the emphasis now. */ .nav-links a::after{display:none !important} /* ===================================================================== ASSESSMENT INVITE — well-timed funnel modal ===================================================================== */ .ai-overlay{position:fixed;inset:0;z-index:9999;display:grid;place-items:center;padding:20px; background:rgba(3,6,11,.72);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);opacity:0;transition:opacity .3s ease} .ai-overlay.ai-in{opacity:1} .ai-modal{position:relative;width:100%;max-width:480px;border:1px solid rgba(101,169,255,.35);border-radius:22px; background:linear-gradient(160deg,rgba(20,44,84,.78),rgba(9,15,25,.94)); box-shadow:0 50px 110px -40px rgba(0,0,0,.8);padding:clamp(24px,4vw,36px); transform:translateY(14px) scale(.98);opacity:0;transition:transform .35s cubic-bezier(.22,1,.36,1),opacity .35s ease} .ai-overlay.ai-in .ai-modal{transform:none;opacity:1} .ai-close{position:absolute;top:12px;right:14px;width:36px;height:36px;border:0;border-radius:10px;background:transparent;color:var(--muted2);font-size:1.5rem;line-height:1;cursor:pointer;transition:background .2s,color .2s} .ai-close:hover{background:rgba(255,255,255,.06);color:var(--ice)} .ai-close:focus-visible{outline:2px solid var(--blue2);outline-offset:2px} .ai-eyebrow{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.7rem;color:var(--blue2)} .ai-h{font-family:var(--display);font-weight:800;font-size:clamp(1.3rem,3.4vw,1.7rem);line-height:1.16;margin:10px 0 12px;color:var(--ice)} .ai-d{color:var(--muted);font-size:.98rem;margin:0 0 16px} .ai-list{list-style:none;margin:0 0 22px;padding:0;display:flex;flex-direction:column;gap:8px} .ai-list li{position:relative;padding-left:28px;color:var(--muted);font-size:.92rem} .ai-list li::before{content:"";position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:5px;background:linear-gradient(135deg,#1f7ff0,#0f3a72)} .ai-list li::after{content:"";position:absolute;left:6px;top:5px;width:5px;height:9px;border:solid #fff;border-width:0 2px 2px 0;transform:rotate(42deg)} .ai-actions{display:flex;flex-direction:column;gap:10px} .ai-go{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:15px 22px;border-radius:13px; font-family:var(--display);font-weight:700;font-size:1rem;color:#fff;text-align:center; background:linear-gradient(135deg,#2f9bff,#1f6fe0);box-shadow:0 18px 40px -16px rgba(49,140,255,.9);transition:transform .18s ease} .ai-go:hover{transform:translateY(-2px)} .ai-later{padding:12px;border:0;background:transparent;color:var(--muted2);font-family:var(--display);font-weight:600;font-size:.92rem;cursor:pointer;border-radius:10px;transition:color .2s,background .2s} .ai-later:hover{color:var(--ice);background:rgba(255,255,255,.05)} .ai-note{margin:14px 0 0;text-align:center;font-size:.78rem;color:var(--muted2)} @media(max-width:520px){ .ai-overlay{align-items:flex-end;padding:0} .ai-modal{max-width:100%;border-radius:22px 22px 0 0;transform:translateY(100%);border-bottom:0} .ai-overlay.ai-in .ai-modal{transform:none} } @media(prefers-reduced-motion:reduce){.ai-overlay,.ai-modal,.ai-go,.ai-later,.ai-close{transition:none!important}.ai-modal{transform:none!important}} /* ===================================================================== THIS WEEK'S ANALYSIS — Braxton's take as the section feature ===================================================================== */ .week-analysis{position:relative;border:1px solid rgba(101,169,255,.32);border-radius:20px; background:linear-gradient(155deg,rgba(20,44,84,.5),rgba(9,15,25,.72)); box-shadow:0 40px 90px -52px rgba(31,127,240,.55);padding:clamp(24px,3.4vw,40px);margin-bottom:22px;overflow:hidden} .week-analysis::before{content:"ANALYSIS";position:absolute;top:0;right:0;font-family:var(--display);font-weight:800; font-size:.62rem;letter-spacing:.18em;color:#05080d;background:var(--blue2);padding:5px 12px;border-radius:0 20px 0 10px} .wa-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px 16px;margin-bottom:14px} .wa-kicker{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.14em;font-size:.72rem;color:var(--blue2);padding-bottom:6px;border-bottom:2px solid rgba(101,169,255,.35)} .wa-title{font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,2.8vw,2.05rem);line-height:1.14;color:var(--ink);margin:0 0 16px} .wa-body p{color:var(--muted);max-width:66ch;margin:0 0 12px} .wa-tie{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;margin-top:20px;padding:16px 18px;border-radius:14px; background:linear-gradient(135deg,rgba(31,127,240,.16),rgba(15,58,114,.22));border:1px solid rgba(101,169,255,.3)} .wa-tie-t{font-family:var(--display);font-weight:700;color:var(--ice);font-size:1rem} .wa-tie-cta{display:inline-flex;align-items:center;gap:8px;padding:11px 18px;border-radius:11px;white-space:nowrap; font-family:var(--display);font-weight:700;font-size:.95rem;color:#fff;background:linear-gradient(135deg,#2f9bff,#1f6fe0);box-shadow:0 14px 32px -16px rgba(49,140,255,.9);transition:transform .18s ease} .wa-tie-cta:hover{transform:translateY(-2px)} /* Daily Brief featured analysis: dual CTA (read brief + assessment) */ .brief-analysis .wa-tie{justify-content:flex-start;gap:10px} .wa-tie-ghost{background:transparent;border:1px solid rgba(101,169,255,.5);color:var(--blue2);box-shadow:none} .wa-tie-ghost:hover{background:rgba(101,169,255,.12);transform:translateY(-2px)} /* Brief page: featured analysis sits above the video */ .brief-featured-analysis{padding:6px 0 4px} /* ===================================================================== Assessment + Daily Brief conversion buttons: menu-button design in the logo "3" blue (#367cca). The two nav star tabs stay azure. ===================================================================== */ .wa-tie-cta:not(.wa-tie-ghost), .ax-begin, .ax-primary, .ai-go, .brief-analysis .wa-tie-cta:not(.wa-tie-ghost){ background:linear-gradient(135deg,#3d8bee,#1c56b0) !important; box-shadow:inset 0 0 0 1px rgba(120,175,255,.7),0 16px 40px -14px rgba(61,139,238,.95) !important; color:#fff !important; } .wa-tie-cta:not(.wa-tie-ghost):hover, .ax-begin:hover, .ax-primary:hover, .ai-go:hover{ background:linear-gradient(135deg,#57a0ff,#2769cc) !important; } /* ghost "Read the full brief" picks up the logo-3 blue outline to match */ .wa-tie-ghost{border-color:rgba(103,168,236,.6) !important;color:#79b0e6 !important} .wa-tie-ghost:hover{background:rgba(63,134,214,.15) !important} /* ===================================================================== CONTENT PROTECTION (deterrent) — block selection/drag; forms exempt ===================================================================== */ body{-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-touch-callout:none} input,textarea,select,[contenteditable="true"],.allow-select,.allow-select *{ -webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text} img,video{-webkit-user-drag:none;-khtml-user-drag:none;user-drag:none} /* ===================================================================== DAILY BRIEF — live state + livelier story cards ===================================================================== */ .brief-live{display:inline-flex;align-items:center;gap:7px;vertical-align:middle;margin-left:10px; font-family:var(--display);font-weight:800;font-size:.64rem;letter-spacing:.14em;text-transform:uppercase; color:#0b1f14;background:linear-gradient(135deg,#3ddc97,#22b877);padding:4px 10px 4px 8px;border-radius:999px} .brief-live-dot{width:7px;height:7px;border-radius:50%;background:#06110b;box-shadow:0 0 0 3px rgba(11,31,20,.35)} html.mo .brief-live-dot{animation:brief-pulse 1.8s ease-in-out infinite} @keyframes brief-pulse{0%,100%{opacity:1;box-shadow:0 0 0 3px rgba(11,31,20,.35)}50%{opacity:.55;box-shadow:0 0 0 5px rgba(11,31,20,.1)}} /* story cards get life: accent bar, hover lift, topic color, clear "read" */ .brief-item{position:relative;border:1px solid var(--line);border-radius:16px;background:rgba(9,16,28,.55); padding:20px 22px 20px 24px;margin-bottom:14px;overflow:hidden; transition:transform .2s var(--ease),border-color .2s var(--ease),box-shadow .2s var(--ease)} .brief-item::before{content:"";position:absolute;left:0;top:0;bottom:0;width:4px;background:var(--blue2);opacity:.8} .brief-item:hover{transform:translateY(-3px);border-color:rgba(101,169,255,.5);box-shadow:0 22px 46px -26px rgba(49,140,255,.6)} .brief-item[data-topic="ai"]::before{background:linear-gradient(180deg,#318cff,#1675e5)} .brief-item[data-topic="security"]::before{background:linear-gradient(180deg,#3ddc97,#22b877)} .brief-item[data-topic="enterprise"]::before{background:linear-gradient(180deg,#65a9ff,#2f6fe0)} .brief-item[data-topic="public-sector"]::before{background:linear-gradient(180deg,#f0b64d,#d88f2a)} .item-topic{font-family:var(--display);font-weight:800;text-transform:uppercase;letter-spacing:.1em;font-size:.64rem; padding:3px 9px;border-radius:999px;color:#eaf1fb;background:rgba(101,169,255,.16)} .item-topic.ai{background:rgba(49,140,255,.2);color:#bcd6ff} .item-topic.security{background:rgba(61,220,151,.18);color:#7fe9bd} .item-topic.enterprise{background:rgba(101,169,255,.18);color:#a9ccff} .item-topic.public-sector{background:rgba(240,182,77,.18);color:#f4cd84} .item-read{display:block;margin-top:10px;padding-top:10px;border-top:1px dashed var(--line);color:var(--ice);font-size:.94rem} .item-read::before{content:"The read \2192 ";color:var(--blue2);font-family:var(--display);font-weight:800;font-size:.78rem} /* Brief featured video: autoplays (muted) twice, then shows controls */ .brief-yt{position:relative} .brief-yt iframe{position:absolute;inset:0;width:100%;height:100%;border:0;border-radius:14px;background:#05080d;display:block} /* Subscribe benefits list */ .sub-benefits{list-style:none;margin:12px 0 16px;padding:0;display:flex;flex-direction:column;gap:11px} .sub-benefits li{position:relative;padding-left:28px;color:var(--muted);font-size:.92rem;line-height:1.45} .sub-benefits li strong{color:var(--ice)} .sub-check{position:absolute;left:0;top:2px;width:18px;height:18px;border-radius:5px;background:linear-gradient(135deg,#3ddc97,#22b877)} .sub-check::after{content:"";position:absolute;left:6px;top:3px;width:5px;height:9px;border:solid #06110b;border-width:0 2px 2px 0;transform:rotate(42deg)} /* Past written edition banner */ .past-edition-banner{display:block;background:rgba(240,182,77,.14);border:1px solid rgba(240,182,77,.4);border-radius:10px;padding:10px 14px;margin:0 0 16px;font-size:.9rem;color:var(--ice)} .past-edition-banner a{color:var(--blue2);font-weight:700;white-space:nowrap;text-decoration:none} /* Brief video: "tap for sound" (autoplay is muted by browser rule) */ .brief-yt .brief-sound-btn{position:absolute;right:12px;bottom:12px;z-index:3;display:inline-flex;align-items:center;gap:2px; border:0;border-radius:999px;padding:9px 15px;cursor:pointer;font-family:var(--display);font-weight:700;font-size:.85rem; color:#fff;background:rgba(28,86,176,.92);box-shadow:0 8px 22px -8px rgba(0,0,0,.8);backdrop-filter:blur(4px)} .brief-yt .brief-sound-btn:hover{background:#1c56b0} .brief-yt .brief-sound-btn .bs-ico{font-size:.95rem} .brief-yt.sound-on .brief-sound-btn,.brief-yt.yt-done .brief-sound-btn{display:none} /* Featured Article page: sub-kicker under the Featured Article badge */ .article-kicker{font-family:var(--display);font-weight:700;text-transform:uppercase;letter-spacing:.12em;font-size:.72rem;color:var(--blue2);margin-top:8px} /* Editorial imagery — article hero + insights media */ .article-hero{margin:22px 0 6px;border-radius:16px;overflow:hidden;border:1px solid var(--line);box-shadow:0 34px 74px -44px rgba(31,127,240,.55);position:relative;isolation:isolate} /* --------------------------------------------------------------------- Article hero: Star Wars entrance, turned up more electric than the homepage. On load the graphic rises from a reclined, dim distance into place (runs once). After it lands, a charged blue current keeps tracing the edge and a periodic energy arc sweeps across, so the feature image reads as powered-up, not static. All CSS, CSP-safe, image untouched. */ .subhero{perspective:1500px;perspective-origin:50% 0%} .article-hero{ transform-origin:50% 100%; animation:artCrawl 2s cubic-bezier(.16,.7,.24,1) both; will-change:transform,opacity,filter; } @keyframes artCrawl{ 0%{opacity:0;transform:translateY(54px) rotateX(42deg) scale(.88);filter:brightness(.35) blur(3px)} 50%{opacity:1;filter:brightness(.85) blur(0)} 100%{opacity:1;transform:translateY(0) rotateX(0) scale(1);filter:brightness(1) blur(0)} } /* charged edge current, brighter and faster than the homepage weekly card */ .article-hero::before{ content:"";position:absolute;inset:0;z-index:3;pointer-events:none;border-radius:inherit;padding:2px; background:conic-gradient(from var(--art-a,0deg), transparent 0deg, transparent 40deg, rgba(101,169,255,0) 70deg, rgba(122,216,255,.95) 120deg, rgba(190,225,255,1) 145deg, rgba(122,216,255,.95) 170deg, rgba(101,169,255,0) 215deg, transparent 300deg, 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:artTrace 4.5s linear infinite; animation-delay:1.6s; /* start once the crawl has mostly landed */ opacity:.92; } /* energy arc sweep across the image, recurring */ .article-hero::after{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background:linear-gradient(115deg, transparent 40%, rgba(120,180,255,.16) 47%, rgba(220,240,255,.4) 50%, rgba(120,180,255,.16) 53%, transparent 60%); background-size:280% 280%; mix-blend-mode:screen; animation:artSheen 5.5s ease-in-out infinite; animation-delay:1.9s; } @property --art-a{syntax:'';inherits:false;initial-value:0deg} @keyframes artTrace{to{--art-a:360deg}} @keyframes artSheen{ 0%{background-position:160% 0;opacity:0} 12%{opacity:1} 34%{opacity:1} 44%{background-position:-60% 0;opacity:0} 100%{background-position:-60% 0;opacity:0} } @media (prefers-reduced-motion:reduce){ .article-hero{animation:none} .article-hero::before,.article-hero::after{animation:none;opacity:0} } .article-hero img{display:block;width:100%;height:auto} .wa-media{margin:2px 0 18px;border-radius:14px;overflow:hidden;border:1px solid var(--line);line-height:0} .wa-media img{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;transition:transform .5s var(--ease)} .week-analysis:hover .wa-media img{transform:scale(1.03)} /* Animated data-center hero (inline SVG, CSP-safe, reduced-motion aware) */ .article-hero.dc{border:1px solid var(--line);background:#05080d} .dc-hero{display:block;width:100%;height:auto} .dc-grid line{stroke:rgba(90,140,210,.16);stroke-width:1} .dc-rack{fill:rgba(12,22,40,.92);stroke:rgba(101,150,210,.55);stroke-width:1} .dc-cap{fill:#78b9ff} .dc-light{fill:#78b9ff} .dc-light.gold{fill:#e4c55a} .dc-light.d0{animation-delay:0s}.dc-light.d1{animation-delay:.5s}.dc-light.d2{animation-delay:1s} .dc-light.d3{animation-delay:1.5s}.dc-light.d4{animation-delay:2s} /* insights motifs: subtle ambient breath */ @media(prefers-reduced-motion:reduce){ .dc-light,.dc-glow,.wa-media img{animation:none!important} } /* Editorial hero: restrained. One slow line draw on load, nothing loops. */ .article-hero.ed{border:1px solid var(--line);background:#070b12;border-radius:16px;overflow:hidden} .ed-hero{display:block;width:100%;height:auto} @keyframes ed-draw{from{stroke-dashoffset:1400}to{stroke-dashoffset:0}} .ed-line{stroke-dasharray:1400;animation:ed-draw 1.8s cubic-bezier(.22,1,.36,1) both} @media(prefers-reduced-motion:reduce){.ed-line{animation:none}} /* Motif hero: refined motion. Slow depth drift + a soft light wave that travels once across the racks. No blinking, no neon pulsing. */ .article-hero.mo{border:1px solid var(--line);background:#05080d;border-radius:16px;overflow:hidden} .mo-hero{display:block;width:100%;height:auto} .mo-grid line{stroke:rgba(90,140,210,.14);stroke-width:1} .mo-body{fill:rgba(11,20,36,.94);stroke:rgba(101,150,210,.42);stroke-width:1} .mo-cap{fill:#5f9fe6} .mo-l{fill:#78b9ff;opacity:.42} @keyframes mo-wave{0%,72%,100%{opacity:.42}80%{opacity:.95}} .mo-l{animation:mo-wave 9s ease-in-out infinite} .w0{animation-delay:0s}.w1{animation-delay:.35s}.w2{animation-delay:.7s} .w3{animation-delay:1.05s}.w4{animation-delay:1.4s}.w5{animation-delay:1.75s} @keyframes mo-drift{0%,100%{transform:translateY(0)}50%{transform:translateY(-5px)}} .mo-rack{animation:mo-drift 14s ease-in-out infinite} .r1{animation-delay:-4.5s}.r2{animation-delay:-9s} @keyframes mo-lift{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}} .mo-hero{animation:mo-lift 1s cubic-bezier(.22,1,.36,1) both} @media(prefers-reduced-motion:reduce){.mo-l,.mo-rack,.mo-hero{animation:none!important}} /* ---- Unified editorial imagery: one consistent look, one refined motion ---- Every graphic (article hero + insights cards) uses the same motif images. Motion: a very slow cinematic drift, plus a soft light sweep that crosses once on reveal. Nothing blinks, nothing bounces. */ .article-hero.motif,.wa-media{position:relative;overflow:hidden;border-radius:16px;border:1px solid var(--line);background:#05080d} .article-hero.motif img,.wa-media img{display:block;width:100%;height:auto;animation:none!important; transform:scale(1.04);transition:transform 12s cubic-bezier(.25,.1,.25,1)} .article-hero.motif:hover img,.wa-media:hover img{transform:scale(1.09)} .article-hero.motif::after,.wa-media::after{content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(105deg,transparent 38%,rgba(150,200,255,.13) 48%,transparent 58%); transform:translateX(-120%);animation:sheen 5.5s cubic-bezier(.4,0,.2,1) .6s 1 both} @keyframes sheen{to{transform:translateX(120%)}} @media(prefers-reduced-motion:reduce){ .article-hero.motif img,.wa-media img{transform:none;transition:none} .article-hero.motif::after,.wa-media::after{animation:none;opacity:0} } /* ---- Unified card sheen: same refined light sweep as the graphics ---- One pass on reveal, and again on hover. No loops. */ .card,.tool-promo,.news-item,.brief-item,.session-card,.week-analysis,.pillar-chip{position:relative;overflow:hidden} .card::after,.tool-promo::after,.news-item::after,.brief-item::after,.session-card::after,.week-analysis::after{ content:"";position:absolute;inset:0;pointer-events:none;z-index:2; background:linear-gradient(105deg,transparent 38%,rgba(150,200,255,.10) 48%,transparent 58%); transform:translateX(-120%);animation:sheen 5.5s cubic-bezier(.4,0,.2,1) .5s 1 both} .card:hover::after,.tool-promo:hover::after,.news-item:hover::after,.brief-item:hover::after, .session-card:hover::after,.week-analysis:hover::after{animation:sheen 1.5s cubic-bezier(.4,0,.2,1) 1} @media(prefers-reduced-motion:reduce){ .card::after,.tool-promo::after,.news-item::after,.brief-item::after,.session-card::after,.week-analysis::after{animation:none;opacity:0} } /* Logo: drop its black backing so it blends into the bordered background */ .brand img,.logo img,.site-logo img,.brand-mark img{background:transparent;mix-blend-mode:normal} /* Logo window: jet black inside the neon border so the emblem blends fully */ .logo-window,.hero-logo,.brand-window,.logo-frame,.promo-window,.three-window{background:#000 !important} .logo-window::before,.logo-window::after,.hero-logo::before,.hero-logo::after{background:#000 !important} .logo-window img,.hero-logo img,.brand-window img{background:#000;mix-blend-mode:normal} /* Jet black inside the hero logo panel (the neon-bordered window) */ .hero-logo-panel,.hero-logo-panel .video-frame,.hero-panel-promo{background:#000 !important} .hero-logo-panel img,.hero-logo-panel video,.hero-logo-panel iframe{background:#000 !important} .hero-logo-panel::before,.hero-logo-panel::after{background:transparent !important} .footer-logo img{background:transparent} /* Header brand mark: transparent, sits on jet black, no box */ .brand img{background:transparent !important;mix-blend-mode:normal} .brand picture{background:transparent} /* Nav button text in the logo blue (#367cca family, brightened for contrast on dark) */ .nav-links a,.nav-links a.hot,.nav-links a.nav-cta{color:#5a9ae8 !important} .nav-links a:hover,.nav-links a.hot:hover{color:#8cbcf5 !important} .nav-links a[aria-current="page"]{color:#a8cffa !important} /* ---- Latest Research: evidence-ranked weekly brief ---- */ .latest-research{padding:34px 0 10px;border-top:1px solid var(--line);margin-top:34px} .lr-head .eyebrow{display:flex;align-items:center;gap:10px} #lr-title{font-family:var(--display);font-weight:800;font-size:clamp(1.4rem,2.6vw,2rem);line-height:1.15;color:var(--ink);margin:12px 0 10px} .lr-abstract{color:var(--muted);max-width:70ch;margin:0 0 18px} .lr-params{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:22px} .lr-param{font-size:.78rem;color:var(--muted);border:1px solid var(--line);border-radius:999px;padding:6px 13px;background:rgba(10,20,34,.55)} .lr-param b{color:var(--blue2);font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.68rem} .lr-grid{display:grid;grid-template-columns:1.35fr 1fr;gap:26px} .lr-sub{font-family:var(--display);font-weight:700;font-size:.76rem;text-transform:uppercase;letter-spacing:.13em;color:var(--blue2);margin:0 0 12px} .lr-findings,.lr-sources{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:12px} .lr-finding{border:1px solid var(--line);border-left:3px solid #5a9ae8;border-radius:12px;padding:14px 16px;background:rgba(9,16,28,.55)} .lr-conf{font-family:var(--display);font-weight:800;font-size:.64rem;letter-spacing:.1em;text-transform:uppercase;padding:3px 9px;border-radius:999px;background:rgba(101,169,255,.16);color:#a9ccff} .lr-conf.authoritative{background:rgba(61,220,151,.18);color:#7fe9bd} .lr-conf.supporting{background:rgba(240,182,77,.16);color:#f4cd84} .lr-claim{color:var(--ice);margin:10px 0 6px;font-size:.98rem} .lr-meta{font-size:.76rem;color:var(--muted2)} .lr-source{display:grid;grid-template-columns:1fr auto;gap:4px 10px;align-items:center;border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:rgba(9,16,28,.45)} .lr-sname{font-family:var(--display);font-weight:700;font-size:.9rem;color:var(--ice)} .lr-score{font-family:var(--display);font-weight:800;color:#5a9ae8;font-size:1rem} .lr-tier{grid-column:1/-1;font-size:.72rem;color:var(--muted2)} .lr-bar{grid-column:1/-1;height:4px;border-radius:3px;background:rgba(90,120,160,.22);overflow:hidden} .lr-fill{display:block;height:100%;background:linear-gradient(90deg,#1f7ff0,#3ddc97)} .lr-method{margin:22px 0 18px;font-size:.82rem;color:var(--muted2);max-width:75ch;font-style:italic} @media(max-width:820px){.lr-grid{grid-template-columns:1fr}} /* ---- Research Studio ---- */ .research-studio{padding:34px 0 20px;border-top:1px solid var(--line);margin-top:30px} .rs-h{font-family:var(--display);font-weight:800;font-size:clamp(1.5rem,2.8vw,2.1rem);color:var(--ink);margin:12px 0 10px} .rs-lede{color:var(--muted);max-width:66ch;margin:0 0 22px} .rs-controls{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:12px;margin-bottom:18px} .rs-field{display:flex;flex-direction:column;gap:6px} .rs-field span{font-family:var(--display);font-weight:700;font-size:.68rem;text-transform:uppercase;letter-spacing:.11em;color:var(--blue2)} .rs-field select{appearance:none;background:rgba(9,16,28,.75);border:1px solid var(--line);border-radius:11px;color:var(--ice); font-family:var(--sans);font-size:.94rem;padding:12px 14px;cursor:pointer} .rs-field select:focus-visible{outline:2px solid var(--blue2);outline-offset:2px} .rs-run{font-size:1rem;padding:14px 26px} .rs-run:disabled{opacity:.5;cursor:progress} .rs-out{margin-top:26px;border:1px solid rgba(101,169,255,.3);border-radius:18px;padding:clamp(20px,3vw,30px); background:linear-gradient(160deg,rgba(20,44,84,.4),rgba(9,15,25,.7))} .rs-badge{font-family:var(--display);font-weight:800;font-size:.62rem;letter-spacing:.14em;text-transform:uppercase; color:#05080d;background:#5a9ae8;padding:4px 11px;border-radius:999px} .rs-title{font-family:var(--display);font-weight:800;font-size:clamp(1.2rem,2.4vw,1.65rem);color:var(--ink);margin:12px 0 10px;line-height:1.18} .rs-abstract{color:var(--muted);margin:0 0 20px;max-width:70ch} .rs-actions{margin:0 0 6px;padding-left:20px;color:var(--ice);display:flex;flex-direction:column;gap:9px} .rs-actions li{font-size:.96rem} .lr-detail{color:var(--muted);font-size:.92rem;margin:8px 0 8px;line-height:1.6} .lr-sowhat{color:var(--ice);font-size:.92rem;margin:0 0 8px;padding:9px 12px;border-radius:9px;background:rgba(31,127,240,.12);border-left:2px solid #5a9ae8} .lr-sowhat b{color:#5a9ae8;font-family:var(--display);font-size:.72rem;text-transform:uppercase;letter-spacing:.1em} .lr-counter{margin:22px 0 16px;padding:16px 18px;border:1px dashed var(--line);border-radius:12px} .lr-counter p{color:var(--muted);margin:0;font-size:.94rem} .lr-excluded{font-size:.82rem;color:var(--muted2);margin:0 0 6px} /* Click-to-magnify viewer */ .zoomable{cursor:zoom-in} .zoomable:focus-visible{outline:2px solid var(--blue2);outline-offset:3px} body.zoom-lock{overflow:hidden} .zoom-ov{position:fixed;inset:0;z-index:10000;display:grid;place-items:center;background:rgba(3,6,11,.94); -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);opacity:0;transition:opacity .25s ease} .zoom-ov.in{opacity:1} .zoom-img{max-width:94vw;max-height:86vh;border-radius:10px;transform-origin:center;transition:transform .12s ease-out;user-select:none;-webkit-user-drag:none} .zoom-img.grab{cursor:grab} .zoom-img.grab:active{cursor:grabbing} .zoom-bar{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);display:flex;gap:8px; background:rgba(9,16,28,.92);border:1px solid var(--line);border-radius:999px;padding:8px 10px} .zoom-bar button{min-width:42px;height:38px;border:0;border-radius:999px;cursor:pointer; background:rgba(101,169,255,.14);color:#dce9fb;font-family:var(--display);font-weight:700;font-size:1rem} .zoom-bar button:hover{background:#1c56b0;color:#fff} .zoom-bar button:focus-visible{outline:2px solid var(--blue2);outline-offset:2px} @media(prefers-reduced-motion:reduce){.zoom-ov,.zoom-img{transition:none}} /* Hero logo: bigger, evenly filled, clearer inside the neon panel */ .hero-logo-panel .promo-poster,.hero-logo-panel .promo-poster img{width:100%;height:100%;display:block} .hero-logo-panel .promo-poster img{object-fit:contain;padding:2%;filter:none} .hero-logo-panel{display:grid;place-items:center;background:#000 !important} /* Meet-the-3 / lion promo: logo poster bright, large, evenly filled */ .three-video,.three-short{background:#000 !important;display:grid;place-items:center} .three-video img,.three-short img,.three-video picture img,.three-poster img{ width:100%;height:100%;object-fit:contain;padding:2%;filter:none} /* Header brand mark: noticeably larger and brighter */ .brand img{width:76px !important;height:76px !important;object-fit:contain;filter:none} @media(max-width:720px){.brand img{width:58px !important;height:58px !important}} /* Menu text: white */ .nav-links a,.nav-links a.hot,.nav-links a.nav-cta{color:#fff !important} .nav-links a:hover,.nav-links a.hot:hover{color:#fff !important} .nav-links a[aria-current="page"]{color:#fff !important} /* ===================================================================== v160 — HOME PAGE: WRITTEN BY A PERSON, AGGREGATION FENCED OFF --------------------------------------------------------------------- Two problems this block solves. 1. The page read like an outlet. A ticker, a chip strip of "topics", five glossy beat tiles and a wall of stock-abstract art all sit in the visual vocabulary of a news portal, and none of them carried a human. The fold now opens with a face, a name, a dateline and the first paragraph of the piece itself. 2. Everything asked for a click before it gave anything. The three questions are now answerable in place, so the assessment is an upgrade rather than a toll gate. Aggregation is not removed, it is quarantined: one labeled section at the bottom, plain rows instead of cards, ticker inside it. Mobile-first. Base rules are the phone, min-width queries add back what a larger screen can afford. Last in the sheet, no !important. ===================================================================== */ @media (max-width:720px){ html{scroll-padding-top:78px} .nav-wrap{height:62px} .brand img{width:38px;height:38px;border-radius:9px} .brand span{font-size:.8rem;letter-spacing:.1em} .nav-links{top:62px} section{padding:52px 0} } /* =========================== THE FOLD =============================== */ .hero.lead{padding:22px 0 28px} .lead-wrap{max-width:760px} /* The face comes first. Every other trust signal on this page is a sentence claiming something; this one is just true on sight. */ .byline.lead-signed{ display:flex;align-items:center;gap:12px;margin:0 0 18px; padding-bottom:16px;border-bottom:1px solid rgba(87,161,255,.16); } .lead-signed .byline-avatar{width:46px;height:46px;object-fit:cover} .lead-signed .byline-name{font-family:var(--display);font-weight:800;font-size:1rem;letter-spacing:-.01em} .lead-signed .byline-meta{font-size:.78rem;font-variant-numeric:tabular-nums} /* The headline is the product. Sized so three lines still clear the fold on a 360px screen, and so it never inherits the 5.4rem branding setting the old hero used. */ .hero.lead .lead-title{ font-weight:900; font-size:clamp(1.72rem,6.2vw,3rem); line-height:1.1; letter-spacing:-.026em; margin:0 0 16px; max-width:19ch; text-wrap:balance; } /* This is the opening paragraph of the piece, not a marketing dek, so it is set as body copy and given room to be read. */ .hero.lead .lead-dek{ color:var(--ice); font-size:1.02rem;line-height:1.68; margin:0;max-width:60ch; text-wrap:pretty; } .lead-keep{margin:20px 0 0} .keep-link{ display:inline-flex;align-items:center;gap:9px; font-family:var(--display);font-weight:800;font-size:.95rem; color:var(--blue2);padding:10px 0;min-height:44px; border-bottom:1px solid rgba(101,169,255,.4); } .keep-link:hover{color:var(--ink);border-bottom-color:var(--ink)} .keep-arrow{transition:transform .25s var(--ease)} .keep-link:hover .keep-arrow{transform:translateY(3px)} .keep-link:focus-visible{outline:2px solid var(--blue2);outline-offset:4px} .lead-oath{ margin:22px 0 0;padding-top:16px; border-top:1px solid rgba(87,161,255,.14); color:var(--muted2);font-size:.84rem;line-height:1.6;max-width:56ch; } @media (min-width:721px){ .hero.lead{padding:40px 0 42px} .hero.lead .lead-dek{font-size:1.1rem} .lead-signed .byline-avatar{width:52px;height:52px} } @media (min-width:981px){ .hero.lead{padding:52px 0 50px} .lead-wrap{max-width:880px} .hero.lead .lead-title{max-width:17ch} } /* On desktop the reading column stays a comfortable measure, but the banner, the video, and the headline block break out wider so the fold feels as immersive as it does on mobile instead of a narrow strip floating in empty margins. */ @media (min-width:981px){ .hero.lead .hero-banner{ width:min(1180px,94vw); margin-left:calc(50% - min(590px,47vw)); margin-bottom:26px; } .hero.lead .lead-video{ max-width:820px; } .hb-below{max-width:900px} } @media (min-width:1280px){ .hero.lead .hero-banner{width:min(1320px,90vw);margin-left:calc(50% - min(660px,45vw))} } /* ===================== THE PIECE, CONTINUED ======================== */ #analysis{padding-top:clamp(30px,4.5vw,52px)} #analysis .week-analysis{margin-top:0} .wa-body p{font-size:1.02rem;line-height:1.7} /* Signed, like a column. Cheap to build, and it is the single clearest signal that a named person stands behind the words above it. */ .sig{ display:flex;align-items:center;gap:14px; margin:26px 0 0;padding-top:20px; border-top:1px solid rgba(87,161,255,.18); } .sig-mark{ flex:none;display:grid;place-items:center;width:44px;height:44px;border-radius:12px; border:1px solid rgba(101,169,255,.45);background:rgba(10,20,34,.6); font-family:var(--display);font-weight:900;font-size:1rem;letter-spacing:.02em;color:var(--blue2); } .sig-text{color:var(--muted2);font-size:.85rem;line-height:1.55} .sig-text b{color:var(--ink);font-family:var(--display);font-weight:800;font-size:.95rem} /* ===================== DAILY BRIEF + PROMO ========================= */ .today-grid{display:grid;grid-template-columns:1fr;gap:22px} .today-promo{display:flex;flex-direction:column;gap:10px} .today-promo .hero-logo-panel{min-height:0;order:0;width:100%} .today-promo-cap{ margin:0;font-size:.8rem;color:var(--muted2); font-family:var(--display);font-weight:600; } @media (min-width:981px){ .today-grid{grid-template-columns:1.1fr .9fr;gap:28px;align-items:start} } /* About: the one line that explains the whole platform. */ .about-write{ margin-top:18px;padding-left:16px; border-left:2px solid rgba(101,169,255,.4); color:var(--ice) !important;font-style:normal; } /* ===================== HOMEPAGE FEATURED ARTICLE ==================== The longer-form editorial centerpiece sits between the Daily Brief and Chronicles. The layout uses the existing type, button, video, and color system so the section reads as part of the site rather than an inserted ad. */ .home-featured-article{ position:relative;overflow:hidden; padding-block:clamp(48px,6vw,82px); border-top:1px solid rgba(87,161,255,.18); border-bottom:1px solid rgba(87,161,255,.18); background: radial-gradient(circle at 88% 28%,rgba(36,111,208,.18),transparent 32%), linear-gradient(145deg,#07101d 0%,#04070c 58%,#08111d 100%); } .home-featured-article::before{ content:"";position:absolute;inset:0;pointer-events:none; background:linear-gradient(90deg,transparent,rgba(87,161,255,.04),transparent); } .home-feature-grid{ position:relative;display:grid;grid-template-columns:1fr;gap:30px;align-items:center; } .home-feature-copy{min-width:0} .home-feature-copy h2{ margin:12px 0 16px;max-width:18ch; font-family:var(--display);font-weight:900; font-size:clamp(2rem,4.6vw,4rem);line-height:.98;letter-spacing:-.04em;color:var(--ink); } .home-feature-lede{max-width:67ch;color:var(--ice);font-size:clamp(1rem,1.5vw,1.16rem);line-height:1.68} .home-feature-note{max-width:67ch;margin:18px 0 0;color:var(--muted);line-height:1.68} .home-feature-pillars{ display:flex;flex-wrap:wrap;gap:8px;margin:22px 0 0;padding:0;list-style:none; } .home-feature-pillars li{ padding:7px 11px;border:1px solid rgba(101,169,255,.34);border-radius:999px; background:rgba(18,55,101,.28);color:#bcd9ff; font-family:var(--display);font-weight:700;font-size:.72rem;letter-spacing:.035em; } .home-feature-actions{display:flex;flex-wrap:wrap;gap:10px;margin-top:24px} .home-feature-video{margin:0;min-width:0;text-align:center} .home-feature-video .video-frame{box-shadow:0 34px 80px -38px rgba(21,110,230,.8)} .home-feature-video figcaption{margin-top:12px;color:var(--muted2);font-size:.78rem} @media (min-width:901px){ .home-feature-grid{grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:clamp(40px,6vw,86px)} .home-feature-video .video-frame.brief-short{width:min(330px,100%)} } @media (max-width:600px){ .home-feature-copy h2{font-size:clamp(2rem,10.5vw,3.1rem)} .home-feature-actions .wa-tie-cta{width:100%;justify-content:center;white-space:normal;text-align:center} } /* The Featured Article page uses its story-specific campaign artwork and surfaces the editorial framework before the long-form body begins. */ .article-feature-hero{ aspect-ratio:16/9;overflow:hidden;background:#02050a; border-color:rgba(101,169,255,.34); box-shadow:0 34px 80px -46px rgba(31,127,240,.72); } .article-feature-hero img{width:100%;height:100%;object-fit:cover} .article-pillar-list{margin-top:20px} .article-control-test{ margin:26px 0 0;padding:clamp(20px,3vw,30px); border:1px solid rgba(101,169,255,.3);border-radius:18px; background:linear-gradient(145deg,rgba(19,52,96,.52),rgba(7,13,23,.82)); } .article-control-label{ display:block;color:var(--blue2);font-family:var(--display);font-weight:800; font-size:.68rem;letter-spacing:.15em;text-transform:uppercase; } .article-control-test h2{ margin:8px 0 16px;font-family:var(--display);font-weight:850; font-size:clamp(1.25rem,2.5vw,1.8rem);line-height:1.15;color:var(--ink); } .article-control-test ul{display:flex;flex-wrap:wrap;gap:8px;margin:0;padding:0;list-style:none} .article-control-test li{ padding:8px 11px;border-radius:10px;border:1px solid rgba(101,169,255,.26); background:rgba(3,10,20,.7);color:#d5e7ff; font-family:var(--display);font-size:.78rem;font-weight:750; } /* ======================= THE NEWS SIDE ============================= */ /* Everything below the fence was written, reported or recorded by somebody else. It gets a flag, a plainer treatment than my own work, and last position. Cards were doing it too many favors. */ .news-side{ border-top:1px solid rgba(87,161,255,.2); background:linear-gradient(180deg,rgba(4,7,12,.9),rgba(5,8,13,.4)); } .news-flag{ display:inline-block;margin-bottom:12px;padding:5px 12px;border-radius:999px; border:1px solid rgba(255,200,87,.42);background:rgba(255,200,87,.10); color:#ffc857;font-family:var(--display);font-weight:800; text-transform:uppercase;letter-spacing:.12em;font-size:.64rem; } .news-head h2{color:#d5e0ee} .news-sub{margin:34px 0 16px;max-width:70ch} .news-sub h3{margin:0 0 6px;font-family:var(--display);font-weight:800;font-size:1.15rem;color:#d5e0ee} .news-sub p{margin:0;color:var(--muted);font-size:.95rem;line-height:1.65} .news-note{margin:22px 0 0;font-size:.74rem;line-height:1.55;color:#6c7b90;max-width:820px} /* ============================ TICKER ================================ */ /* Reference furniture, and it now lives inside the news section where it belongs. Gone entirely on a phone, where it cost the fold ~40px and set a portal-shaped first impression before a single word of mine. */ .news-side @media (max-width:720px){ .ticker,.ticker.live{display:none} } /* Article promo: no badge. It is a link to a longer piece I wrote, and "New article" in a pill was doing a content-mill impression. */ #article-promo .featured{margin-top:0} /* ===================================================================== v161 — TOPIC TILES (the five topic graphics) --------------------------------------------------------------------- Braxton's own artwork replaces the chip buttons and the plain rows. Each graphic already carries its title, so the tile adds only a thin footer bar: a name for the accessible link name and screen readers, and the action. The image itself is alt="" because the visible name would otherwise be announced twice. Layout mirrors the source sheet exactly: three square tiles, then two wide ones. A six-column track makes that exact without cropping any graphic (2+2+2, then 3+3). On a phone everything is one column at its natural ratio, so no baked-in text ever gets cut off. ===================================================================== */ .topic-tiles{display:grid;grid-template-columns:1fr;gap:12px;margin:0;padding:0} .tt{ display:block;overflow:hidden; border:1px solid var(--line);border-radius:var(--r-lg); background:var(--panel);box-shadow:0 18px 40px -30px rgba(0,0,0,.9); transition:transform .25s var(--ease),border-color .25s var(--ease),box-shadow .25s var(--ease); } .tt picture{display:block;line-height:0} .tt img{width:100%;height:auto;display:block;transition:transform .5s var(--ease)} .tt-bar{ display:flex;align-items:center;justify-content:space-between;gap:12px; padding:12px 15px;border-top:1px solid var(--line); background:linear-gradient(180deg,rgba(7,16,28,.9),rgba(5,8,13,.9)); } .tt-name{font-family:var(--display);font-weight:700;font-size:.92rem;line-height:1.3;color:var(--ice)} .tt-go{font-family:var(--display);font-weight:800;font-size:.76rem;letter-spacing:.04em;color:var(--blue2);white-space:nowrap} .tt:hover{transform:translateY(-4px);border-color:rgba(101,169,255,.55);box-shadow:0 26px 54px -28px rgba(49,140,255,.55)} .tt:hover img{transform:scale(1.03)} .tt:hover .tt-go{color:var(--ink)} .tt:focus-visible{outline:2px solid var(--blue2);outline-offset:4px} @media (min-width:721px){ .topic-tiles{grid-template-columns:repeat(6,minmax(0,1fr));gap:14px} .tt-sq{grid-column:span 2} .tt-wide{grid-column:span 3} } @media (hover:none){ .tt:hover{transform:none;box-shadow:0 18px 40px -30px rgba(0,0,0,.9)} .tt:hover img{transform:none} } @media (prefers-reduced-motion:reduce){ .tt,.tt img{transition:none} .tt:hover{transform:none} .tt:hover img{transform:none} } /* Beat pages: the page's own graphic, sized so it introduces the page instead of swallowing it. Square art is capped tighter than wide art so both land at roughly the same visual weight. */ .beat-hero{margin:26px 0 0;line-height:0;border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden} .beat-hero img{width:100%;height:auto;display:block} .beat-hero-sq{max-width:420px} .beat-hero-wide{max-width:640px} /* ===================================================================== v161.1 — WEEKLY ARTICLE CARD --------------------------------------------------------------------- The weekly piece was the one promo on the page with no artwork, so it read as a footnote next to the topic tiles. It now carries the public-sector graphic, which is the beat the current article sits on. Image bleeds to the card edge, copy keeps the padding. ===================================================================== */ .featured-art{padding:0;overflow:hidden;display:grid;grid-template-columns:1fr;gap:0} .featured-media{margin:0;line-height:0;border-bottom:1px solid var(--line);overflow:hidden;position:relative;isolation:isolate} .featured-media img{width:100%;height:auto;display:block;transition:transform .5s var(--ease)} .featured-art:hover .featured-media img{transform:scale(1.03)} .featured-copy{padding:26px} .featured-kicker{ display:block;margin-bottom:10px; font-family:var(--display);font-weight:800;text-transform:uppercase; letter-spacing:.14em;font-size:.66rem;color:var(--blue2); } .featured-art h3{margin-top:0} @media (min-width:861px){ .featured-art{grid-template-columns:minmax(0,.9fr) minmax(0,1.4fr);align-items:stretch} .featured-media{border-bottom:0;border-right:1px solid var(--line);height:100%} .featured-media img{height:100%;object-fit:cover} .featured-copy{padding:30px 32px;align-self:center} } @media (hover:none),(prefers-reduced-motion:reduce){ .featured-art:hover .featured-media img{transform:none} } /* --- Weekly Perspective banner --------------------------------------- This artwork is a full masthead: logo, title, tagline and the five pillars along the bottom. Side-by-side with a cover crop would slice the pillar row off, so the banner card stays one column at every width and the image keeps its own ratio. ------------------------- */ .featured-banner{grid-template-columns:1fr} .featured-banner .featured-media{border-right:0;border-bottom:1px solid var(--line);height:auto} .featured-banner .featured-media img{height:auto;object-fit:contain} @media (min-width:861px){ .featured-banner{grid-template-columns:1fr} .featured-banner .featured-media{border-right:0;border-bottom:1px solid var(--line);height:auto} .featured-banner .featured-media img{height:auto;object-fit:contain} .featured-banner .featured-copy{padding:28px 32px;align-self:auto} } /* --- Signature: the real mark, not a text stand-in ------------------- The sign-off box was rendering the letters "B3" in the display face. It now carries the actual logo, sized to match the header brand so the same mark closes the piece that opens the page. The independent line beside it is unchanged. ------------------------------------- */ .sig-mark{ width:52px;height:52px;padding:0;overflow:hidden; border-radius:12px;border:1px solid var(--line); background:rgba(10,20,34,.6); font-size:0;letter-spacing:0; } .sig-mark picture{display:block;width:100%;height:100%;line-height:0} .sig-mark img{width:100%;height:100%;object-fit:cover;display:block} /* ===================================================================== v166 — TOPIC SHEET AS ONE COMPACT GRAPHIC --------------------------------------------------------------------- Five full-width tiles stacked down the page was too much furniture for what is, in the end, a navigation block. The sheet now appears once, capped at 720px, sitting just above the weekly article. It stays navigable: each tile on the sheet has a transparent hotspot link positioned in percentages taken from the source artwork, so they track the image at every size. Under it is a plain text row of the same five links, which is what actually gets used on a phone, where the type baked into the artwork is too small to read. ===================================================================== */ #beats-strip{padding:clamp(34px,5vw,58px) 0 clamp(20px,3vw,32px)} .bs-head{max-width:70ch;margin-bottom:16px} .bs-line{margin:0;color:var(--muted);font-size:.95rem;line-height:1.65} .beat-sheet{ position:relative;margin:0;max-width:720px;line-height:0; border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; box-shadow:0 22px 48px -34px rgba(0,0,0,.9); } .beat-sheet img{width:100%;height:auto;display:block} /* Hotspots. Transparent until focused or hovered, then a hairline frame so it is obvious the tile is a link and which one you are on. */ .bs-hot{ position:absolute;display:block;border-radius:6px; box-shadow:inset 0 0 0 0 rgba(101,169,255,0); transition:box-shadow .2s var(--ease),background .2s var(--ease); } .bs-hot:hover{box-shadow:inset 0 0 0 2px rgba(101,169,255,.9);background:rgba(49,140,255,.12)} .bs-hot:focus-visible{outline:2px solid var(--blue2);outline-offset:2px} .bs-ai{left:0.651%;top:0.879%;width:32.552%;height:48.828%} .bs-security{left:33.724%;top:0.879%;width:32.552%;height:48.828%} .bs-enterprise{left:66.862%;top:0.879%;width:32.487%;height:48.828%} .bs-public-sector{left:0.651%;top:50.586%;width:49.023%;height:48.438%} .bs-sales{left:50.326%;top:50.586%;width:49.023%;height:48.438%} /* The row that does the real work on small screens. */ .bs-links{ display:flex;flex-wrap:wrap;gap:8px 10px;margin:14px 0 0;max-width:720px; } .bs-links a{ padding:9px 14px;min-height:40px;display:inline-flex;align-items:center; border:1px solid var(--line);border-radius:999px; color:#c6d5e8;font-family:var(--display);font-weight:700;font-size:.84rem; transition:color .2s var(--ease),border-color .2s var(--ease),background .2s var(--ease); } .bs-links a:hover{color:#fff;border-color:rgba(101,169,255,.6);background:rgba(16,30,50,.8)} .bs-links a:focus-visible{outline:2px solid var(--blue2);outline-offset:3px} @media (prefers-reduced-motion:reduce){ .bs-hot,.bs-links a{transition:none} } /* ===================================================================== v168 — MENU JUMP + BACK TO TOP --------------------------------------------------------------------- The control is a real anchor to #top, so it works with JS off. Once nav.js runs it adds .tt-js to , which is what allows it to hide until you are actually far enough down to want it. ===================================================================== */ .to-top{ position:fixed;right:16px;z-index:60; bottom:calc(16px + env(safe-area-inset-bottom,0px)); width:48px;height:48px;display:grid;place-items:center; border-radius:50%;border:1px solid rgba(101,169,255,.45); background:rgba(7,16,28,.92); -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px); box-shadow:0 14px 30px -14px rgba(0,0,0,.9); color:var(--blue2); transition:opacity .25s var(--ease),transform .25s var(--ease),border-color .2s,color .2s; } .to-top:hover{color:var(--ink);border-color:rgba(101,169,255,.8);transform:translateY(-2px)} .to-top:focus-visible{outline:2px solid var(--blue2);outline-offset:3px} /* The arrow: drawn, so there is no glyph to go missing in a webfont. */ .tt-arrow{ display:block;width:11px;height:11px; border-left:2px solid currentColor;border-top:2px solid currentColor; transform:translateY(2px) rotate(45deg); } /* With JS: hidden until it is useful. */ .tt-js .to-top{opacity:0;pointer-events:none;transform:translateY(10px)} .tt-js .to-top.on{opacity:1;pointer-events:auto;transform:none} @media (max-width:720px){ .to-top{right:12px;bottom:calc(12px + env(safe-area-inset-bottom,0px));width:44px;height:44px} } @media (prefers-reduced-motion:reduce){ .to-top{transition:opacity .01s} .to-top:hover{transform:none} .tt-js .to-top{transform:none} } @media print{.to-top{display:none}} /* The mobile panel sits under the header, not on top of the page it is about to scroll. Tap targets get real height so a thumb cannot land between two links. */ @media (max-width:720px){ .nav-links{box-shadow:0 24px 48px -20px rgba(0,0,0,.85)} .nav-links a{padding:11px 4px;min-height:44px;display:flex;align-items:center} } /* --- Internal link into the weekly article --------------------------- Descriptive anchor text from the two beats the piece actually belongs to. Internal links with real wording in them are still one of the few ranking levers entirely under your control. ---------------------- */ .beat-featured{ margin:20px 0 0;padding:14px 16px; border:1px solid rgba(101,169,255,.22);border-left:3px solid var(--blue); border-radius:0 var(--r-md) var(--r-md) 0; background:rgba(10,20,34,.5); color:var(--muted);font-size:.95rem;line-height:1.6;max-width:70ch; } .bf-tag{ display:block;margin-bottom:4px; font-family:var(--display);font-weight:800;text-transform:uppercase; letter-spacing:.12em;font-size:.62rem;color:var(--blue2); } .beat-featured a{color:var(--ice);font-weight:700;border-bottom:1px solid rgba(101,169,255,.45)} .beat-featured a:hover{color:#fff;border-bottom-color:#fff} /* ===================================================================== v172 — TODAY LINE --------------------------------------------------------------------- The complaint that the home page looked the same was fair: the weekly analysis holds the fold, and the daily brief sat six sections down. So the page genuinely did not change from one morning to the next. This strip sits immediately under the fold with the date and today's headline in it, and assets/home-brief.js fills it from the same JSON that drives /brief. Update the JSON, the top of the home page moves. ===================================================================== */ .today-line{ border-top:1px solid rgba(87,161,255,.18); border-bottom:1px solid rgba(87,161,255,.18); background:linear-gradient(90deg,rgba(16,42,78,.55),rgba(6,12,20,.35)); } .tl-in{display:flex;align-items:center;gap:12px;padding:12px 0;flex-wrap:wrap} .tl-flag{ flex:none;display:inline-flex;align-items:center;gap:7px; font-family:var(--display);font-weight:800;text-transform:uppercase; letter-spacing:.13em;font-size:.62rem;color:var(--blue2); } .tl-flag::before{ content:"";width:7px;height:7px;border-radius:50%;background:#31d07a; box-shadow:0 0 0 3px rgba(49,208,122,.18); } .tl-link{ display:flex;align-items:baseline;gap:10px;flex-wrap:wrap; min-height:40px;padding:4px 0;flex:1 1 240px; } .tl-date{ flex:none;color:var(--muted2);font-size:.78rem;font-weight:700; font-variant-numeric:tabular-nums;white-space:nowrap; } .tl-title{ color:var(--ice);font-family:var(--display);font-weight:700; font-size:.95rem;line-height:1.35; } .tl-go{color:var(--blue2);font-weight:800;transition:transform .2s var(--ease)} .tl-link:hover .tl-title{color:#fff} .tl-link:hover .tl-go{transform:translateX(3px)} .tl-link:focus-visible{outline:2px solid var(--blue2);outline-offset:3px} @media (min-width:861px){ .tl-in{flex-wrap:nowrap;padding:14px 0} .tl-title{font-size:1rem} } @media (prefers-reduced-motion:reduce){ .tl-go{transition:none} .tl-link:hover .tl-go{transform:none} } /* ===================================================================== v180 — LANDING BANNER WITH LIVE HEADLINE --------------------------------------------------------------------- The five-pillar composite carries the logo centred and a deliberately dark, empty band beneath it. The site headline is laid over that band as real HTML, not baked into the JPG: Google can read it, a screen reader can announce it, it stays crisp on retina, and it can be reworded without regenerating artwork. The band was measured to sit at a fixed vertical zone of each cut, so the text is positioned in percentages against the figure. Desktop and phone use different percentages because the two cuts differ. ===================================================================== */ .hero-banner{ position:relative;margin:0 0 20px;line-height:0; border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; box-shadow:0 24px 60px -40px rgba(0,0,0,.95); } /* --------------------------------------------------------------------- Star Wars style intro. On load the banner starts reclined into the distance, dim and pushed down, then rises upright and brightens into place. Runs once (forwards fill), never loops, so it's a grand entrance rather than ongoing motion. The parent sets the perspective so the tilt reads as depth. Reduced-motion users get it fully in place, no movement. */ .hero.lead .lead-wrap{perspective:1400px;perspective-origin:50% 0%} .hero-banner{ transform-origin:50% 100%; animation:heroCrawl 1.9s cubic-bezier(.16,.7,.24,1) both; will-change:transform,opacity,filter; } @keyframes heroCrawl{ 0%{ opacity:0; transform:translateY(46px) rotateX(38deg) scale(.9); filter:brightness(.4) blur(2px); } 55%{ opacity:1; filter:brightness(.9) blur(0); } 100%{ opacity:1; transform:translateY(0) rotateX(0deg) scale(1); filter:brightness(1) blur(0); } } @media (prefers-reduced-motion:reduce){ .hero-banner{animation:none} } /* --------------------------------------------------------------------- Living color. A brand-blue color grade drifts over the banner and fades back out on a slow loop, so the graphic breathes between the deep electric-blue of the logo and its own natural colors. It's a tinting overlay, not a repaint of the JPG, set above the image but below any text, ignoring clicks. Reduced-motion users see the banner in its natural colors, still. */ .hero-banner::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; border-radius:inherit; background:linear-gradient(120deg, rgba(40,130,255,.14) 0%, rgba(90,200,255,.10) 100%); mix-blend-mode:normal; opacity:0; } @keyframes heroTint{ 0%,100%{opacity:0} 50%{opacity:0} } @media (prefers-reduced-motion:reduce){ .hero-banner::after{animation:none;opacity:0} } .hero-banner img{width:100%;height:auto;display:block;aspect-ratio:1080/1360} @media (min-width:721px){ .hero-banner img{aspect-ratio:1600/1000} } /* --------------------------------------------------------------------- Banner shimmer. A bright diagonal light sweep travels across the whole graphic (logo + five pillars) on a loop, plus a breathing blue glow on the frame, so the whole lockup feels alive and premium. Sits above the image (z-index) but ignores clicks (pointer-events:none) so the pillar hotspots underneath still work. Reduced-motion users get none of it. ------------------------------------------------------------------- */ /* Headline sits BELOW the banner image, in its own row, so it can never overlap the logo or the five pillars. Centered, restrained size. */ .hb-below{ display:flex;flex-direction:column;align-items:center; text-align:center;margin:14px auto 4px;width:100%; } .hb-eyebrow{ display:block;font-family:var(--display);font-weight:800; text-transform:uppercase;letter-spacing:.2em; font-size:clamp(.5rem,1vw,.58rem);color:var(--blue2); margin-bottom:.4em; } .hb-headline{ display:block;margin:0;font-family:var(--display);font-weight:700; font-size:clamp(.85rem,1.6vw,1.05rem);line-height:1.25; letter-spacing:-.005em;color:#fff;text-wrap:balance; } /* The banner headline lives inside section.hero.lead, where the site's ".hero h1" rule (up to 4.6rem) would otherwise win on specificity and blow it up. This selector matches that specificity and holds the size. */ .hero.lead .hb-headline{ font-size:clamp(.85rem,1.6vw,1.05rem); letter-spacing:-.005em;margin:0;max-width:none;line-height:1.25; } .hb-sub{display:none} @media (min-width:721px){ .hb-below{margin:18px 0 6px} } /* --------------------------------------------------------------------- Headline animation. A slow, continuous blue shimmer sweeps across the words, plus a gentle breathing scale, so the phrase is clearly alive without being obnoxious. Reduced-motion users get a static headline. ------------------------------------------------------------------- */ .hb-headline{ display:inline-block;transform-origin:center center; color:#fff; animation:hbPulse 5s ease-in-out infinite; } .hb-eyebrow{ animation:hbEyebrow 5s ease-in-out infinite; } @keyframes hbPulse{ 0%,100%{transform:scale(1);filter:drop-shadow(0 0 0 rgba(101,169,255,0))} 50%{transform:scale(1.08);filter:drop-shadow(0 0 14px rgba(101,169,255,.55))} } @keyframes hbEyebrow{ 0%,100%{opacity:.55;letter-spacing:.2em} 50%{opacity:1;letter-spacing:.34em} } @media (prefers-reduced-motion:reduce){ .hb-headline{animation:none} .hb-eyebrow{animation:none;opacity:1} } @media (prefers-reduced-motion:reduce){.hero-banner{scroll-behavior:auto}} /* --------------------------------------------------------------------- Header wordmark matched to the logo. In the logo, "braxtonbarber3" is lowercase, tightly set, heavy, white with a bright-blue 3. This makes the text beside the header icon read as the same wordmark rather than a spaced-out all-caps version. Overrides the old spacing/weight rules. ------------------------------------------------------------------- */ .brand .brand-word{ font-family:var(--display); font-weight:800; text-transform:lowercase; letter-spacing:-.02em; font-size:1.12rem; color:#f2f7ff; line-height:1; } .brand .brand-word b{ color:#2f8bff;font-weight:800; } @media (max-width:720px){ .brand .brand-word{font-size:1rem;letter-spacing:-.02em} } /* --- Vertical Shorts in the brief player ------------------------------ A YouTube Short is 9:16. The default .video-frame is 16:9, which would letterbox it into a wide black box. When the brief data marks the featured video as format:"short", switch the frame to portrait and cap its width so it sits centered instead of dominating the column. */ .video-frame.brief-short{ aspect-ratio:9/16; width:min(340px,80%); margin:0 auto; border-bottom:0; border-radius:16px; overflow:hidden; } .video-frame.brief-short iframe{border-radius:16px} @media (max-width:600px){ .video-frame.brief-short{width:min(300px,88%)} } /* --- Weekly analysis video in the fold -------------------------------- Click-to-play facade (handled by motion.js, same as the Ideas videos): shows the YouTube thumbnail with a play button, loads the iframe only on tap. The most reliable option under a strict script-src 'self' CSP, since it never needs YouTube's blocked control API. Landscape 16:9, capped so it anchors the fold without pushing the analysis too far down. */ .lead-video{ margin:18px auto 4px;width:100%;max-width:640px; } .lead-video .video-frame{ border:1px solid var(--line);border-radius:var(--r-lg);overflow:hidden; box-shadow:0 22px 48px -34px rgba(0,0,0,.9); cursor:pointer; } .lead-video-cap{ margin:8px 0 0;text-align:center; } .lead-video .video-soon{ grid-template-columns:1fr;gap:18px;padding:22px; } .lead-video .video-soon-copy p{ margin-bottom:0; } @media (min-width:721px){ .lead-video{margin:22px auto 6px} } /* --------------------------------------------------------------------- Weekly perspective graphic: tasteful "electrified" treatment. Pure CSS overlays on the featured-media figure, so the image file is untouched and it stays CSP-safe (no scripts). Two restrained layers: 1. A slow electric-blue current tracing the inner edge (a running conic highlight), so the frame looks charged, not busy. 2. An occasional soft energy sheen that drifts across and then fades, catching the graphic every several seconds. Both sit above the image but ignore clicks. Reduced-motion off. */ .featured-media::before{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none; border-radius:inherit;padding:2px; background:conic-gradient(from var(--elec-a,0deg), transparent 0deg, transparent 60deg, rgba(101,169,255,.0) 90deg, rgba(122,216,255,.85) 140deg, rgba(150,205,255,.95) 160deg, rgba(122,216,255,.85) 180deg, rgba(101,169,255,.0) 230deg, transparent 300deg, transparent 360deg); /* mask to just the border ring so it traces the edge, not the middle */ -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:elecTrace 6s linear infinite; opacity:.9; } .featured-media::after{ content:"";position:absolute;inset:0;z-index:1;pointer-events:none; background:linear-gradient(115deg, transparent 42%, rgba(120,180,255,.10) 48%, rgba(210,235,255,.22) 50%, rgba(120,180,255,.10) 52%, transparent 58%); background-size:300% 300%; mix-blend-mode:screen; animation:elecSheen 7.5s ease-in-out infinite; } @property --elec-a{syntax:'';inherits:false;initial-value:0deg} @keyframes elecTrace{ to{--elec-a:360deg} } @keyframes elecSheen{ 0%{background-position:170% 0;opacity:0} 10%{opacity:1} 32%{opacity:1} 42%{background-position:-70% 0;opacity:0} 100%{background-position:-70% 0;opacity:0} } /* soft charged glow on the whole card, breathing slowly */ .featured-art.featured-banner{position:relative} .featured-art.featured-banner::after{ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; border-radius:inherit; box-shadow:0 0 0 1px rgba(101,169,255,.14), 0 0 26px -10px rgba(49,140,255,.14); animation:elecGlow 6s ease-in-out infinite; } @keyframes elecGlow{ 0%,100%{box-shadow:0 0 0 1px rgba(101,169,255,.12),0 0 22px -12px rgba(49,140,255,.10)} 50%{box-shadow:0 0 0 1px rgba(101,169,255,.3),0 0 34px -8px rgba(49,140,255,.34)} } /* Browsers without @property still animate the sheen + glow; the trace simply holds a static charged edge, which still looks intentional. */ @media (prefers-reduced-motion:reduce){ .featured-media::before,.featured-media::after, .featured-art.featured-banner::after{animation:none} .featured-media::after{opacity:0} } /* --------------------------------------------------------------------- Article scroll reveal (article-zoom.js). Each block of writing zooms up from slightly small and faded to full size as it enters the viewport. Transform + opacity only, so it's GPU-cheap and never reflows the page. The un-primed state (no .az) is the normal fully-visible block, so if the script never runs the article looks exactly as before. */ .article-body .az{ opacity:0; transform:translateY(28px) scale(.92); transform-origin:center top; transition:opacity .8s cubic-bezier(.16,.7,.24,1), transform .8s cubic-bezier(.16,.7,.24,1); transition-delay:var(--az-delay,0ms); will-change:opacity,transform; } .article-body .az.az-in{ opacity:1; transform:translateY(0) scale(1); } @media (prefers-reduced-motion:reduce){ .article-body .az{opacity:1;transform:none;transition:none} } /* --------------------------------------------------------------------- Card scroll reveal (card-zoom.js). Cards zoom up from small+faded to full size as they enter the viewport, matching the article text reveal. Only the .cz class (added by JS) hides them, so with no JS the cards render normally. Transform + opacity only, GPU-cheap, no reflow. */ .cz{ opacity:0; transform:translateY(26px) scale(.93); transform-origin:center bottom; transition:opacity .75s cubic-bezier(.16,.7,.24,1), transform .75s cubic-bezier(.16,.7,.24,1); transition-delay:var(--cz-delay,0ms); will-change:opacity,transform; } .cz.cz-in{ opacity:1; transform:translateY(0) scale(1); } @media (prefers-reduced-motion:reduce){ .cz{opacity:1;transform:none;transition:none} } /* --------------------------------------------------------------------- Weekly Analysis archive (/weekly) and the homepage archive link. ------------------------------------------------------------------- */ .wa-archive-link{margin:6px 0 0} .wa-archive-link a{ font-family:var(--display);font-weight:700;font-size:.9rem; color:var(--blue2);text-decoration:none;letter-spacing:.01em; } .wa-archive-link a:hover{text-decoration:underline} #weekly-archive{padding:8px 0 56px} #wa-current{margin-bottom:34px} .wa-archive-head{border-top:1px solid var(--line);padding-top:26px;margin-bottom:8px} .wa-archive-head h2{margin:0 0 4px} .wa-archive-list{display:flex;flex-direction:column;gap:26px;margin-top:14px} .wa-loading,.wa-empty{color:var(--ice);opacity:.8} .wa-entry{ border:1px solid var(--line);border-radius:16px; padding:24px 24px 20px;background:linear-gradient(180deg,rgba(20,32,52,.35),rgba(8,12,20,.2)); } .wa-entry-current{ border-color:rgba(101,169,255,.4); box-shadow:0 24px 60px -44px rgba(49,140,255,.5); } .wa-entry-head{display:flex;align-items:center;gap:10px;margin-bottom:10px} .wa-entry-kicker{ font-family:var(--display);font-weight:800;text-transform:uppercase; letter-spacing:.16em;font-size:.62rem;color:var(--blue2); } .wa-entry-current .wa-entry-kicker{color:#7ad8ff} .wa-entry-date{font-size:.72rem;color:var(--ice);opacity:.75} .wa-entry-title{ margin:0 0 12px;font-family:var(--display);font-weight:900; font-size:clamp(1.15rem,2.4vw,1.6rem);line-height:1.2;letter-spacing:-.01em; } .wa-entry-p{margin:0 0 12px;line-height:1.7} .wa-entry-p:last-of-type{margin-bottom:16px} .wa-entry-sig{ display:flex;flex-direction:column;gap:2px; border-top:1px solid var(--line);padding-top:12px; } .wa-entry-by{font-family:var(--display);font-weight:800;font-size:.9rem} .wa-entry-ind{font-size:.74rem;color:var(--ice);opacity:.75} /* --------------------------------------------------------------------- "In production" placeholders. Used for the featured-article video and any training session whose render is still finishing. Reads as a deliberate, branded holding state (a pulsing dot, a clear label) so an empty slot never looks broken. Swap in the real id and it renders the player instead. */ .article-video-pending{ aspect-ratio:16/9;display:grid;place-items:center; background:radial-gradient(120% 120% at 50% 0%, #0c1626 0%, #05080d 70%); border:1px solid var(--line);border-radius:var(--r-lg); } .avp-inner{display:flex;flex-direction:column;align-items:center;gap:8px;text-align:center;padding:24px} .avp-dot{width:12px;height:12px;border-radius:50%;background:var(--blue2); box-shadow:0 0 0 0 rgba(49,140,255,.5);animation:avpPulse 1.8s ease-in-out infinite} .avp-label{font-family:var(--display);font-weight:800;font-size:1.05rem;color:#eaf1fb;letter-spacing:-.01em} .avp-sub{font-size:.86rem;color:var(--muted2);max-width:34ch} @keyframes avpPulse{ 0%{box-shadow:0 0 0 0 rgba(49,140,255,.5)} 70%{box-shadow:0 0 0 12px rgba(49,140,255,0)} 100%{box-shadow:0 0 0 0 rgba(49,140,255,0)} } @media (prefers-reduced-motion:reduce){.avp-dot{animation:none}} /* Training "In production" pill reads distinct from a plain "coming soon". */ .status-pill:not(.ready){ background:rgba(49,140,255,.12);border:1px solid rgba(101,169,255,.4);color:#bcd8ff; } /* --------------------------------------------------------------------- Watch hub. The video-first entry point. Sits right under the fold so a scroller meets video before prose. Same click-to-play facade as the rest of the site (CSP-safe), just presented as a browsable grid. */ .watch-eyebrow{ display:inline-flex;align-items:center;gap:8px;margin:0 0 10px; font-family:var(--display);font-weight:800;font-size:.82rem;letter-spacing:.02em; text-transform:uppercase;color:#bcd8ff; } .watch-live-dot{ width:9px;height:9px;border-radius:50%;background:var(--blue2); box-shadow:0 0 0 0 rgba(49,140,255,.55);animation:watchPulse 2s ease-in-out infinite; } @keyframes watchPulse{0%{box-shadow:0 0 0 0 rgba(49,140,255,.55)}70%{box-shadow:0 0 0 9px rgba(49,140,255,0)}100%{box-shadow:0 0 0 0 rgba(49,140,255,0)}} @media (prefers-reduced-motion:reduce){.watch-live-dot{animation:none}} .watch-hub{padding:44px 0 8px} .watch-hub .eyebrow{display:inline-flex;align-items:center;gap:8px} .watch-grid{ display:grid;grid-template-columns:1fr;gap:22px;margin-top:22px; } @media (min-width:721px){ .watch-grid{grid-template-columns:1fr 1fr;gap:24px} /* the featured video spans the full width and sits on top */ .watch-card-lead{grid-column:1 / -1;display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr);gap:22px;align-items:center} .watch-card-lead .video-frame{width:100%;aspect-ratio:16/9} .watch-card-lead .watch-meta{align-self:center} } @media (min-width:1080px){ .watch-grid{grid-template-columns:1fr 1fr 1fr} .watch-card-lead{grid-column:1 / -1} } .watch-card{ background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg); overflow:hidden;display:flex;flex-direction:column; transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease); } .watch-card:hover{border-color:rgba(101,169,255,.5);transform:translateY(-3px);box-shadow:0 20px 44px -30px rgba(49,140,255,.5)} .watch-card .video-frame{border-radius:0;border:0;border-bottom:1px solid var(--line)} .watch-card-lead .video-frame{border-bottom:0;border-radius:var(--r-lg)} .watch-meta{padding:16px 18px 18px;display:flex;flex-direction:column;gap:7px} .watch-tag{ font-family:var(--display);font-weight:800;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase; color:#7fb4ff; } .watch-meta h3{margin:0;font-size:1.06rem;line-height:1.25;letter-spacing:-.01em} .watch-card-lead .watch-meta h3{font-size:1.4rem} .watch-meta p{margin:0;font-size:.92rem;color:var(--muted2);line-height:1.5} .watch-meta a{color:#8fc0ff;font-weight:600;white-space:nowrap} .watch-more{margin:20px 0 0;text-align:center} .watch-more-link{ display:inline-block;font-family:var(--display);font-weight:800;color:#bcd8ff; border:1px solid rgba(101,169,255,.4);border-radius:999px;padding:11px 22px; transition:background .2s var(--ease),border-color .2s var(--ease); } .watch-more-link:hover{background:rgba(49,140,255,.12);border-color:rgba(101,169,255,.7)} /* --------------------------------------------------------------------- Watch series row: the three-part sequence (30-sec read, full brief, what it means). Presents the daily story as a bingeable set. The two shorts render 9:16; the brief renders 16:9. */ .watch-series{margin:26px 0 4px;padding:20px;border:1px solid var(--line);border-radius:var(--r-lg); background:linear-gradient(180deg, rgba(20,40,80,.16), rgba(5,8,13,0));} .watch-series-label{display:block;font-family:var(--display);font-weight:800;font-size:.8rem; letter-spacing:.05em;text-transform:uppercase;color:#8fc0ff;margin-bottom:14px} .watch-series-row{display:grid;grid-template-columns:1fr;gap:16px} @media (min-width:721px){ /* short - brief - short, brief gets the width */ .watch-series-row{grid-template-columns:minmax(0,.8fr) minmax(0,1.6fr) minmax(0,.8fr);align-items:start} } .watch-chip{display:flex;flex-direction:column;gap:8px} .watch-chip .video-frame{border-radius:14px;border:1px solid var(--line);overflow:hidden} .vfacade-short{aspect-ratio:9/16;max-width:230px;margin:0 auto;width:100%} .watch-chip-cap{font-size:.86rem;color:var(--muted2);line-height:1.4;text-align:center} .watch-chip-cap b{display:block;color:#cfe0f5;font-family:var(--display);font-weight:800;font-size:.82rem;letter-spacing:.01em;margin-bottom:2px} .watch-grid-secondary{margin-top:24px} @media (min-width:721px){.watch-grid-secondary{grid-template-columns:1fr 1fr 1fr}} /* ===================================================================== Research page (/research). Professional data page with animated charts, built to sit alongside the assessment in value. ===================================================================== */ .rsrch-hero{padding-bottom:8px} .rsrch-sources{margin-top:12px;font-size:.82rem;color:var(--muted2);font-style:italic} /* Stat cards */ .rsrch-stats-sec{padding:8px 0 8px} .rsrch-stats{display:grid;grid-template-columns:1fr;gap:18px} @media (min-width:721px){.rsrch-stats{grid-template-columns:1fr 1fr 1fr}} .rsrch-stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg); padding:24px 22px;position:relative;overflow:hidden} .rsrch-stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px; background:linear-gradient(180deg,var(--blue2),transparent)} .rsrch-stat-num{font-family:var(--display);font-weight:900;font-size:2.9rem;line-height:1; color:#eaf1fb;letter-spacing:-.02em; background:linear-gradient(90deg,#8fc0ff,#eaf1fb);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .rsrch-stat-label{margin-top:8px;font-size:.96rem;color:var(--txt);font-weight:600;line-height:1.3} .rsrch-stat-cmp{margin-top:10px;font-size:.84rem;color:var(--muted2)} .rsrch-stat-cmp-v{font-family:var(--display);font-weight:800;color:#7fb4ff} .rsrch-stat-note{margin-top:8px;font-size:.82rem;color:var(--muted2);line-height:1.45; padding-top:8px;border-top:1px solid var(--line)} /* Bar chart */ .rsrch-chart-sec{padding:28px 0 8px} .rsrch-bars{margin-top:20px;display:flex;flex-direction:column;gap:20px} .rsrch-bar-row{} .rsrch-bar-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:8px;gap:12px} .rsrch-bar-label{font-size:.94rem;color:var(--txt);font-weight:600} .rsrch-bar-val{font-family:var(--display);font-weight:800;font-size:1.15rem;color:#8fc0ff;white-space:nowrap} .rsrch-bar-track{position:relative;height:16px;background:rgba(255,255,255,.05); border:1px solid var(--line);border-radius:999px;overflow:hidden} .rsrch-bar-fill{height:100%;border-radius:999px; background:linear-gradient(90deg,#1f5fd6,#318cff,#65c7ff); box-shadow:0 0 18px -4px rgba(49,140,255,.7); transition:width 1.1s cubic-bezier(.16,.7,.24,1)} .rsrch-bar-good .rsrch-bar-fill,.rsrch-bar-fill.rsrch-bar-good{ background:linear-gradient(90deg,#1c9d6a,#33d08a,#7ff0c0)} .rsrch-bar-good{background:linear-gradient(90deg,#1c9d6a,#33d08a,#7ff0c0)!important} .rsrch-bar-prev{position:absolute;top:-3px;bottom:-3px;width:2px; background:rgba(255,255,255,.5);border-radius:2px} .rsrch-bar-prev::after{content:"was";position:absolute;top:-16px;left:50%;transform:translateX(-50%); font-size:.6rem;color:var(--muted2);white-space:nowrap} /* Donut + findings split */ .rsrch-split-sec{padding:34px 0 8px} .rsrch-split{display:grid;grid-template-columns:1fr;gap:34px;align-items:start} @media (min-width:861px){.rsrch-split{grid-template-columns:minmax(0,.9fr) minmax(0,1.3fr);gap:44px}} .rsrch-donut-wrap h3,.rsrch-findings-wrap h3{margin:0 0 16px} .rsrch-donut{position:relative;max-width:260px;margin:0 auto} .rsrch-donut-svg{width:100%;height:auto;display:block} .rsrch-donut-center{position:absolute;inset:0;display:flex;flex-direction:column; align-items:center;justify-content:center;pointer-events:none} .rsrch-donut-big{font-family:var(--display);font-weight:900;font-size:2.2rem;color:#eaf1fb;line-height:1} .rsrch-donut-small{font-size:.82rem;color:var(--muted2);margin-top:2px} .rsrch-legend{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-direction:column;gap:9px} .rsrch-leg-item{display:flex;align-items:center;gap:10px;font-size:.9rem} .rsrch-leg-dot{width:12px;height:12px;border-radius:3px;flex:0 0 auto} .rsrch-leg-label{color:var(--txt)} .rsrch-leg-val{margin-left:auto;font-family:var(--display);font-weight:800;color:#8fc0ff} .rsrch-findings{list-style:none;margin:0;padding:0;counter-reset:rf;display:flex;flex-direction:column;gap:18px} .rsrch-finding{position:relative;padding-left:44px;counter-increment:rf} .rsrch-finding::before{content:counter(rf);position:absolute;left:0;top:0; width:30px;height:30px;border-radius:8px;display:grid;place-items:center; font-family:var(--display);font-weight:800;font-size:.95rem;color:#cfe4ff; background:rgba(49,140,255,.14);border:1px solid rgba(101,169,255,.4)} .rsrch-finding-claim{margin:0 0 5px;font-weight:700;color:#eaf1fb;font-size:1.02rem;line-height:1.3} .rsrch-finding-detail{margin:0;color:var(--muted2);font-size:.92rem;line-height:1.55} /* Takeaway */ .rsrch-takeaway-sec{padding:34px 0 20px} .rsrch-takeaway{background:linear-gradient(140deg,rgba(20,45,90,.4),rgba(5,8,13,.2)); border:1px solid rgba(101,169,255,.32);border-radius:var(--r-lg);padding:30px 28px;position:relative;overflow:hidden} .rsrch-take-tag{display:inline-block;font-family:var(--display);font-weight:800;font-size:.76rem; letter-spacing:.05em;text-transform:uppercase;color:#8fc0ff;margin-bottom:12px} .rsrch-takeaway p{margin:0 0 20px;font-size:1.14rem;line-height:1.5;color:#eaf1fb;font-weight:500;max-width:60ch} .rsrch-cta{display:flex;flex-wrap:wrap;gap:12px} /* Homepage research preview: compact three-stat teaser -> /research */ .research-preview .rp-stats{display:grid;grid-template-columns:1fr;gap:16px;margin:22px 0 8px} @media (min-width:721px){.research-preview .rp-stats{grid-template-columns:1fr 1fr 1fr}} .rp-stat{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 20px;position:relative;overflow:hidden} .rp-stat::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:linear-gradient(180deg,var(--blue2),transparent)} .rp-stat-num{font-family:var(--display);font-weight:900;font-size:2.5rem;line-height:1;letter-spacing:-.02em; background:linear-gradient(90deg,#8fc0ff,#eaf1fb);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .rp-stat-label{margin-top:8px;font-size:.92rem;color:var(--txt);font-weight:600;line-height:1.3} /* Weekly analysis featured video (on the /weekly page) */ .wa-entry-video{margin:18px 0 20px} .wa-entry-video .video-frame{border-radius:14px;overflow:hidden;border:1px solid var(--line)} .wa-entry-vcap{margin-top:10px;font-size:.86rem;color:var(--muted2)} /* Tap-for-sound overlay on muted-autoplay videos */ .yt-unmute{position:absolute;left:12px;bottom:12px;z-index:5;display:inline-flex;align-items:center;gap:7px; padding:8px 14px;border-radius:999px;border:1px solid rgba(101,169,255,.5); background:rgba(5,10,20,.82);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px); color:#eaf1fb;font-family:var(--display);font-weight:700;font-size:.82rem;cursor:pointer; transition:background .2s,border-color .2s} .yt-unmute:hover{background:rgba(20,50,100,.9);border-color:rgba(122,190,255,.8)} .yt-unmute-ic{width:14px;height:14px;display:inline-block; background:no-repeat center/contain url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='%23eaf1fb'%3E%3Cpath d='M3 9v6h4l5 5V4L7 9H3zm13.5 3a4.5 4.5 0 00-2.5-4v8a4.5 4.5 0 002.5-4z'/%3E%3C/svg%3E")} /* Footer logo: bigger, brighter, doubles as a refresh button. */ .footer-logo-refresh{display:inline-flex;flex-direction:column;align-items:center;gap:8px;text-align:center;cursor:pointer} .footer-logo-refresh img{width:96px;height:96px;object-fit:cover;border-radius:16px; border:1px solid rgba(101,169,255,.5); filter:brightness(1.18) saturate(1.12); box-shadow:0 0 30px -6px rgba(49,140,255,.6); transition:transform .3s var(--ease),box-shadow .3s var(--ease),filter .3s var(--ease)} .footer-logo-refresh:hover img{transform:translateY(-3px) scale(1.03); filter:brightness(1.32) saturate(1.2); box-shadow:0 0 42px -4px rgba(49,140,255,.85)} .footer-refresh-note{font-size:.76rem;color:var(--muted2);max-width:22ch;line-height:1.4;font-style:italic; opacity:.85;transition:color .25s,opacity .25s} .footer-logo-refresh:hover .footer-refresh-note{color:#9fc7ff;opacity:1} .footer-copy{display:block;margin-top:12px} @media (min-width:721px){ .footer-brand{flex-direction:column;align-items:flex-start;text-align:left} .footer-logo-refresh{align-items:flex-start;text-align:left} .footer-refresh-note{text-align:left} } /* Homepage research preview: animated card reveal to match the count-up */ .rp-reveal{opacity:0;transform:translateY(22px) scale(.96); transition:opacity .7s cubic-bezier(.16,.7,.24,1),transform .7s cubic-bezier(.16,.7,.24,1)} .rp-reveal.rp-in{opacity:1;transform:none} @media (prefers-reduced-motion:reduce){.rp-reveal{opacity:1;transform:none;transition:none}} /* Daily Brief title: bigger and brighter, the anchor of the homepage */ .daily-brief-title{ font-size:2.6rem;line-height:1.02;letter-spacing:-.02em;margin:0 0 10px; background:linear-gradient(92deg,#4aa3ff 0%,#7fc4ff 55%,#a9dcff 100%); -webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent; filter:drop-shadow(0 0 22px rgba(49,140,255,.45)); font-weight:900; } @media (min-width:721px){.daily-brief-title{font-size:3.2rem}} /* Hero banner as video: replaces the static five-pillar graphic. Uses the existing brand image as the poster until the video plays. */ .hero-banner-video{position:relative} .hero-banner-facade{aspect-ratio:1600/1000;width:100%;border-radius:inherit;overflow:hidden; border:1px solid var(--line);background:#05080d} .hero-banner-video .yt-play{transform:scale(1.15)} @media (min-width:721px){.hero-banner-facade{aspect-ratio:1600/1000}} /* Hero flanked by the five pillars. Desktop: three pillars left, video center, two right. Mobile: pillars wrap in a row under the video. */ .hero-flank{display:flex;flex-direction:column;gap:14px;align-items:stretch} .hero-flank .hero-banner-video{flex:1 1 auto;order:0} .hero-pillars{display:flex;flex-wrap:wrap;gap:10px;justify-content:center} /* Mobile: pillars wrap 2-per-row; a lone third pillar (Enterprise IT) stays the same size and centered rather than stretching full width. */ @media (max-width:980px){ .hero-pillar{flex:0 1 calc(50% - 5px);min-width:0;justify-content:center;text-align:center} } .hero-pillars-left{order:1} .hero-pillars-right{order:2} .hero-pillar{display:flex;align-items:center;gap:9px;flex:1 1 auto;min-width:140px; padding:11px 14px;border-radius:12px;background:var(--card);border:1px solid var(--line); transition:border-color .25s var(--ease),transform .25s var(--ease),box-shadow .25s var(--ease)} .hero-pillar:hover{border-color:rgba(101,169,255,.6);transform:translateY(-2px); box-shadow:0 14px 34px -22px rgba(49,140,255,.7)} .hp-label{font-family:var(--display);font-weight:800;font-size:.86rem;color:#dbe8fb;letter-spacing:-.01em;white-space:nowrap} .hp-ico{width:22px;height:22px;flex:0 0 auto;border-radius:6px; background:linear-gradient(135deg,rgba(49,140,255,.9),rgba(101,199,255,.6)); position:relative} .hp-ico::after{content:"";position:absolute;inset:4px;border-radius:3px; background:rgba(5,10,20,.55)} .hp-ai .hp-ico{background:linear-gradient(135deg,#318cff,#65a9ff)} .hp-sec .hp-ico{background:linear-gradient(135deg,#1f7fd6,#39b0ff)} .hp-ent .hp-ico{background:linear-gradient(135deg,#3aa0ff,#6ac6ff)} .hp-pub .hp-ico{background:linear-gradient(135deg,#2f6fd0,#4aa3ff)} .hp-sales .hp-ico{background:linear-gradient(135deg,#2456a8,#3f8fe0)} /* Desktop: flank the video with pillar columns on each side */ @media (min-width:981px){ /* Break the whole flank out wider than the reading column so the video is large and centered, with slim pillar rails on each side. */ .hero-flank{flex-direction:row;align-items:center;gap:20px; width:min(1200px,94vw);margin-left:calc(50% - min(600px,47vw))} .hero-flank .hero-banner-video{order:0;flex:1 1 auto;min-width:0} .hero-pillars{flex-direction:column;flex:0 0 172px;gap:12px} .hero-pillars-left{order:-1} .hero-pillars-right{order:1} .hero-pillar{min-width:0;width:100%} } @media (min-width:1280px){ .hero-flank{width:min(1340px,92vw);margin-left:calc(50% - min(670px,46vw))} .hero-pillars{flex:0 0 190px} } /* Cancel the old single-banner breakout inside the flank (the flank itself now handles the width and centering). */ @media (min-width:981px){ .hero-flank .hero-banner-video{width:auto;margin-left:0} } @media (min-width:1280px){ .hero-flank .hero-banner-video{width:auto;margin-left:0} } /* Smoother video loading: fade the poster in, crossfade the player over it, and show a gentle shimmer while the thumbnail is still loading. */ .yt-thumb{opacity:0;transition:opacity .5s ease} .yt-thumb.yt-thumb-in{opacity:1} .video-frame{position:relative;background:#070c14} /* shimmer placeholder under the thumbnail while it loads */ .video-frame::before{content:"";position:absolute;inset:0;z-index:0; background:linear-gradient(100deg,#0a1220 30%,#132238 50%,#0a1220 70%); background-size:200% 100%;animation:ytShimmer 1.6s ease-in-out infinite} .video-frame.open::before,.video-frame[data-open]::before{display:none} @keyframes ytShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} @media (prefers-reduced-motion:reduce){.video-frame::before{animation:none}} .yt-thumb{position:absolute;inset:0;z-index:1;background-position:center;background-size:cover;background-repeat:no-repeat} .yt-play{position:absolute;z-index:2} /* the iframe fades in once YouTube signals it has loaded */ .yt-iframe{opacity:0;transition:opacity .6s ease} .yt-iframe.yt-iframe-in{opacity:1} /* Roadmap: estimated cost per phase + total program cost band */ .rm-pcost{display:flex;align-items:baseline;justify-content:space-between;gap:8px; margin-top:12px;padding-top:12px;border-top:1px solid var(--line)} .rm-pcost-l{font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:var(--muted2)} .rm-pcost-v{font-family:var(--display);font-weight:800;font-size:1.05rem;color:#8fc0ff} .rm-costtotal{margin:22px 0 4px} .rm-costtotal-in{background:linear-gradient(135deg,rgba(20,45,90,.4),rgba(5,8,13,.2)); border:1px solid rgba(101,169,255,.32);border-radius:var(--r-lg);padding:22px 24px; display:grid;gap:6px} .rm-ct-label{font-size:.76rem;letter-spacing:.05em;text-transform:uppercase;color:#8fc0ff;font-family:var(--display);font-weight:800} .rm-ct-value{font-family:var(--display);font-weight:900;font-size:2.1rem;line-height:1; background:linear-gradient(90deg,#8fc0ff,#eaf1fb);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent} .rm-ct-note{font-size:.82rem;color:var(--muted2);line-height:1.5;max-width:60ch} /* ===================================================================== Tech Investment Planner (/innovation #planner) A professional, respected planning tool. Navy/electric-blue system. ===================================================================== */ .inv-section{padding:44px 0 20px;border-top:1px solid var(--line);margin-top:36px} .inv-app{margin-top:24px} .inv-loading,.inv-err{color:var(--muted2);font-size:.95rem} .inv-err{color:#ff9b9b} /* Control panel */ .inv-panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg); padding:26px 24px;display:grid;gap:22px} .inv-field{display:grid;gap:8px} .inv-label{font-family:var(--display);font-weight:800;font-size:1.02rem;color:#eaf1fb} .inv-hint{margin:0;font-size:.85rem;color:var(--muted2)} /* Budget input */ .inv-budget{display:flex;align-items:center;gap:6px;background:rgba(255,255,255,.04); border:1px solid var(--line);border-radius:12px;padding:12px 16px;max-width:340px} .inv-budget:focus-within{border-color:rgba(101,169,255,.6)} .inv-budget-sign{font-family:var(--display);font-weight:800;font-size:1.5rem;color:#8fc0ff} .inv-budget-input{flex:1;background:transparent;border:0;outline:0;color:#eaf1fb; font-family:var(--display);font-weight:800;font-size:1.5rem;width:100%} .inv-chips{display:flex;flex-wrap:wrap;gap:8px} .inv-chip{background:rgba(255,255,255,.04);border:1px solid var(--line);border-radius:999px; padding:6px 14px;color:var(--txt);font-size:.85rem;cursor:pointer;font-family:var(--display);font-weight:700; transition:border-color .2s,background .2s} .inv-chip:hover{border-color:rgba(101,169,255,.6);background:rgba(49,140,255,.1)} /* Segmented selectors */ .inv-seg{display:flex;flex-wrap:wrap;gap:8px} .inv-seg-col{flex-direction:column} .inv-seg-opt{text-align:left;background:rgba(255,255,255,.03);border:1px solid var(--line); border-radius:12px;padding:12px 16px;color:var(--txt);cursor:pointer;font-size:.92rem; font-family:var(--display);font-weight:700;display:flex;flex-direction:column;gap:3px; transition:border-color .2s,background .2s,transform .15s} .inv-seg-opt:hover{border-color:rgba(101,169,255,.5)} .inv-seg-opt.on{border-color:rgba(101,169,255,.85);background:rgba(49,140,255,.14); box-shadow:0 0 24px -10px rgba(49,140,255,.7)} .inv-seg-hint{font-family:var(--body);font-weight:400;font-size:.8rem;color:var(--muted2)} .inv-row{display:grid;grid-template-columns:1fr;gap:22px} @media (min-width:721px){.inv-row{grid-template-columns:1fr 1fr}} .inv-build{margin-top:2px;background:linear-gradient(135deg,#1f5fd6,#318cff);border:0;border-radius:12px; padding:15px 22px;color:#fff;font-family:var(--display);font-weight:800;font-size:1.05rem;cursor:pointer; box-shadow:0 14px 34px -16px rgba(49,140,255,.9);transition:transform .18s,box-shadow .18s} .inv-build:hover{transform:translateY(-2px);box-shadow:0 20px 44px -16px rgba(49,140,255,1)} /* Result */ .inv-out:empty{display:none} .inv-out{margin-top:26px;display:grid;gap:24px} .inv-rhead{display:grid;gap:8px;position:relative} .inv-reyebrow{font-family:var(--display);font-weight:800;font-size:.78rem;letter-spacing:.05em; text-transform:uppercase;color:#8fc0ff} .inv-rtitle{margin:0;font-size:1.6rem;line-height:1.15;color:#eaf1fb} .inv-thesis{margin:0;color:var(--muted2);font-size:.96rem;line-height:1.55;max-width:70ch} .inv-live{display:inline-flex;align-items:center;gap:6px;align-self:start;font-family:var(--display); font-weight:800;font-size:.72rem;letter-spacing:.04em;text-transform:uppercase;color:#33d08a; border:1px solid rgba(51,208,138,.4);border-radius:999px;padding:3px 10px;width:max-content} .inv-live-dot{width:7px;height:7px;border-radius:50%;background:#33d08a;box-shadow:0 0 8px #33d08a; animation:invPulse 1.8s ease-in-out infinite} @keyframes invPulse{0%,100%{opacity:1}50%{opacity:.35}} .inv-stats{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px} .inv-stat{background:var(--card);border:1px solid var(--line);border-radius:12px;padding:16px 14px;display:grid;gap:4px} .inv-stat-b{font-family:var(--display);font-weight:900;font-size:1.5rem;color:#8fc0ff;line-height:1} .inv-stat-l{font-size:.8rem;color:var(--muted2);line-height:1.3} .inv-h4{margin:0 0 14px;font-size:1.05rem;color:#eaf1fb} .inv-alloc{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg);padding:22px 20px} .inv-segblock{padding:16px 0;border-bottom:1px solid var(--line)} .inv-segblock:last-child{border-bottom:0;padding-bottom:0} .inv-segblock:first-of-type{padding-top:0} .inv-segrow{display:flex;justify-content:space-between;align-items:baseline;gap:12px;margin-bottom:8px} .inv-segname{font-family:var(--display);font-weight:800;font-size:1.02rem;color:#eaf1fb} .inv-segamt{font-family:var(--display);font-weight:800;font-size:.95rem;color:#8fc0ff;white-space:nowrap} .inv-bar{height:8px;background:rgba(255,255,255,.05);border-radius:999px;overflow:hidden} .inv-bar-fill{height:100%;border-radius:999px;background:linear-gradient(90deg,#1f5fd6,#65c7ff); width:0;transition:width 1s cubic-bezier(.16,.7,.24,1)} .inv-segrole{margin:8px 0 12px;font-size:.86rem;color:var(--muted2);line-height:1.45} .inv-picks{display:flex;flex-wrap:wrap;gap:10px} .inv-pick{background:rgba(255,255,255,.03);border:1px solid var(--line);border-radius:10px; padding:10px 13px;display:grid;gap:2px;min-width:120px} .inv-pick-top{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap} .inv-pick-t{font-family:var(--display);font-weight:800;font-size:1rem;color:#eaf1fb;letter-spacing:.02em} .inv-pick-q{font-family:var(--display);font-weight:700;font-size:.85rem;color:var(--muted2)} .inv-pick-q.up{color:#33d08a}.inv-pick-q.down{color:#ff8f8f} .inv-pick-chg{font-size:.72rem;font-family:var(--display);font-weight:700;padding:1px 6px;border-radius:999px} .inv-pick-chg.up{color:#33d08a;background:rgba(51,208,138,.12)} .inv-pick-chg.down{color:#ff8f8f;background:rgba(255,143,143,.12)} .inv-pick-n{font-size:.78rem;color:var(--muted2)} .inv-pick-amt{font-family:var(--display);font-weight:800;font-size:.9rem;color:#8fc0ff;margin-top:2px} .inv-dca{background:linear-gradient(135deg,rgba(20,45,90,.35),rgba(5,8,13,.15)); border:1px solid rgba(101,169,255,.28);border-radius:var(--r-lg);padding:22px 20px} .inv-dca-lead{margin:0 0 10px;font-size:.96rem;color:#dbe8fb;line-height:1.55} .inv-dca-note{margin:0;font-size:.86rem;color:var(--muted2);line-height:1.5} .inv-reserve{margin:0;font-size:.9rem;color:var(--muted2);line-height:1.5;font-style:italic} .inv-acts{display:flex;flex-wrap:wrap;gap:12px} .inv-act{background:linear-gradient(135deg,#1f5fd6,#318cff);border:0;border-radius:10px;padding:12px 20px; color:#fff;font-family:var(--display);font-weight:800;font-size:.95rem;cursor:pointer;transition:transform .18s} .inv-act:hover{transform:translateY(-2px)} .inv-act-ghost{background:transparent;border:1px solid var(--line);color:var(--txt)} .inv-disc{margin-top:22px;font-size:.8rem;color:var(--muted2);line-height:1.55; padding-top:16px;border-top:1px solid var(--line);font-style:italic} /* Homepage fold: video "in production" placeholder */ .video-frame-pending{position:relative;aspect-ratio:16/9;border-radius:var(--r-lg); border:1px solid var(--line);background:linear-gradient(135deg,rgba(20,45,90,.35),rgba(5,8,13,.5)); display:flex;align-items:center;justify-content:center;overflow:hidden} .video-frame-pending::before{content:"";position:absolute;inset:0; background:linear-gradient(110deg,transparent 30%,rgba(101,169,255,.08) 50%,transparent 70%); background-size:200% 100%;animation:vfShimmer 2.4s ease-in-out infinite} @keyframes vfShimmer{0%{background-position:200% 0}100%{background-position:-200% 0}} .vf-pending-in{position:relative;text-align:center;padding:24px;max-width:80%} .vf-pending-tag{display:inline-block;font-family:var(--display);font-weight:800;font-size:.72rem; letter-spacing:.06em;text-transform:uppercase;color:#8fc0ff;border:1px solid rgba(101,169,255,.4); border-radius:999px;padding:4px 12px;margin-bottom:12px} .vf-pending-msg{display:block;color:var(--muted2);font-size:.95rem;line-height:1.5} /* Feature archive browser (/article #feature-archive) */ .feature-archive{padding:40px 0 20px;border-top:1px solid var(--line);margin-top:32px} .fa-head{margin-bottom:20px} .fa-head h2{margin:0 0 4px;font-size:1.4rem;color:#eaf1fb} .fa-list{display:grid;gap:14px} .fa-loading,.fa-empty{color:var(--muted2);font-size:.95rem} .fa-card{display:grid;gap:6px;padding:18px 20px;background:var(--card); border:1px solid var(--line);border-radius:var(--r-lg);transition:border-color .2s,transform .2s} .fa-card:hover{border-color:rgba(101,169,255,.5);transform:translateY(-2px)} .fa-card-cat{font-family:var(--display);font-weight:800;font-size:.72rem;letter-spacing:.05em; text-transform:uppercase;color:#8fc0ff} .fa-card-date{font-size:.82rem;color:var(--muted2)} .fa-card-title{margin:2px 0 0;font-size:1.15rem;line-height:1.25;color:#eaf1fb} /* ===================================================================== DESIGN MODERNIZATION LAYER (v2 refinement) --------------------------------------------------------------------- Presentation only. No HTML, no class names, no JS hooks touched. Everything here refines the EXISTING design language: same navy/blue palette, same Poppins/Nunito type, same components. It sharpens depth, motion, and typographic finish. Fully overridable / removable as a block. Respects the reduced-motion and focus-visible rules already in the file. ===================================================================== */ /* ---- 1. Extended tokens (layered on :root, nothing overwritten) ---- */ :root{ /* refined elevation scale: softer, more physically plausible shadows */ --elev-1:0 1px 2px rgba(0,0,0,.28), 0 2px 8px -2px rgba(0,0,0,.35); --elev-2:0 4px 14px -4px rgba(0,0,0,.45), 0 2px 6px -2px rgba(0,0,0,.3); --elev-3:0 18px 48px -18px rgba(0,0,0,.62), 0 6px 16px -8px rgba(0,0,0,.4); /* a subtle brand glow for focus/hover accents */ --glow:0 0 0 1px rgba(101,169,255,.35), 0 8px 30px -10px rgba(49,140,255,.35); /* hairline that reads crisper on dark than the current translucent line */ --line-strong:rgba(120,178,255,.34); --ease-out:cubic-bezier(.16,.84,.3,1); } /* ---- 2. Typographic finish: tighter headline tracking, better rhythm ---- */ h1,h2,.wa-title,.lead-title,.hero-title{ letter-spacing:-.018em; /* modern display type sits tighter */ text-wrap:balance; /* no orphan words in headlines */ } p,.lead-dek,.wa-body p{ text-wrap:pretty; /* avoids ugly last-line orphans in body */ } .eyebrow,.kicker,.wa-kicker,.lead-kicker,.article-kicker{ letter-spacing:.16em; /* crisper small-caps label rhythm */ } /* ---- 3. Depth: give the signature cards real, layered elevation ---- */ .card,.week-analysis,.tool-promo,.featured,.session-card{ box-shadow:var(--elev-2); transition:transform .5s var(--ease-out), box-shadow .5s var(--ease-out), border-color .5s var(--ease-out); will-change:transform; } .card:hover,.tool-promo:hover,.featured:hover,.session-card:hover{ transform:translateY(-4px); box-shadow:var(--elev-3); border-color:var(--line-strong); } /* ---- 4. Buttons: slightly richer surface + confident hover lift ---- */ .btn{ box-shadow:var(--elev-1), inset 0 1px 0 rgba(255,255,255,.12); transition:transform .35s var(--ease-out), box-shadow .35s var(--ease-out), filter .35s var(--ease-out); } .btn:hover{ transform:translateY(-2px); box-shadow:var(--glow), inset 0 1px 0 rgba(255,255,255,.16); filter:saturate(1.08) brightness(1.04); } .btn:active{ transform:translateY(0); } /* ---- 5. Sticky header: deeper glass, hairline that appears on scroll ---- */ .site-header{ border-bottom:1px solid transparent; transition:background .4s var(--ease-out), border-color .4s var(--ease-out), box-shadow .4s var(--ease-out); } /* When the page is scrolled, most sites toggle a class; we don't have JS for that, so instead we make the resting state cleaner and let backdrop-blur carry the separation. This reads more premium than a hard border. */ .site-header{ background:rgba(5,8,13,.72); border-bottom-color:var(--line); box-shadow:0 1px 0 rgba(120,178,255,.06), var(--elev-1); } /* ---- 6. Links & nav: animated underline instead of instant color flip ---- */ .nav-links a:not(.nav-cta){ position:relative; } .nav-links a:not(.nav-cta)::after{ content:"";position:absolute;left:0;right:100%;bottom:-4px;height:2px; background:linear-gradient(90deg,var(--blue),var(--blue2)); border-radius:2px;transition:right .32s var(--ease-out); } .nav-links a:not(.nav-cta):hover::after, .nav-links a[aria-current="page"]::after{ right:0; } /* ---- 7. Focus states: unify on the brand glow (complements existing) ---- */ a:focus-visible,button:focus-visible, input:focus-visible,select:focus-visible,textarea:focus-visible, [tabindex]:focus-visible{ outline:2px solid var(--blue2); outline-offset:3px; border-radius:6px; } /* ---- 8. Media: subtle zoom-in reveal on card/article imagery ---- */ .card-art img,.wa-media img,.featured-media img,.article-hero img{ transition:transform .6s var(--ease-out), filter .6s var(--ease-out); } .card:hover .card-art img, .week-analysis:hover .wa-media img, .featured:hover .featured-media img{ transform:scale(1.04); } /* ---- 9. Form fields: modern inset surface + focus ring ---- */ .contact-form input,.contact-form select,.contact-form textarea{ transition:border-color .3s var(--ease-out), box-shadow .3s var(--ease-out), background .3s var(--ease-out); } .contact-form input:focus, .contact-form select:focus, .contact-form textarea:focus{ box-shadow:var(--glow); } /* ---- 10. Scrollbar (WebKit/Blink): thin, on-brand, unobtrusive ---- */ *{scrollbar-width:thin;scrollbar-color:rgba(101,169,255,.35) transparent;} ::-webkit-scrollbar{width:10px;height:10px;} ::-webkit-scrollbar-thumb{ background:linear-gradient(180deg,rgba(101,169,255,.4),rgba(49,140,255,.25)); border-radius:10px;border:2px solid transparent;background-clip:content-box; } ::-webkit-scrollbar-thumb:hover{background:rgba(101,169,255,.6);background-clip:content-box;} /* ---- 11. Section entrance rhythm: gentle stagger via existing motion ---- */ /* motion.js already reveals elements; we just make the settle feel softer. */ [data-reveal],.reveal,.week-analysis,.card{ transition-timing-function:var(--ease-out); } /* ---- 12. Honor reduced-motion for everything added above ---- */ @media (prefers-reduced-motion:reduce){ .card,.tool-promo,.featured,.session-card,.btn, .card-art img,.wa-media img,.featured-media img,.article-hero img{ transition:none !important; } .card:hover,.tool-promo:hover,.featured:hover,.session-card:hover,.btn:hover{ transform:none !important; } .nav-links a:not(.nav-cta)::after{ transition:none !important; } } /* ---- Feature archive cards: now clickable links to /feature?id= ---- */ a.fa-card{ text-decoration:none;color:inherit; transition:transform .4s var(--ease-out), box-shadow .4s var(--ease-out), border-color .4s var(--ease-out); } a.fa-card:hover{ transform:translateY(-3px); box-shadow:var(--elev-2); border-color:var(--line-strong); } .fa-card-go{ margin-top:8px;font-family:var(--display);font-weight:800;font-size:.8rem; letter-spacing:.04em;color:var(--blue2); opacity:.85;transition:opacity .3s var(--ease-out), transform .3s var(--ease-out); } a.fa-card:hover .fa-card-go{ opacity:1;transform:translateX(3px); } @media (prefers-reduced-motion:reduce){ a.fa-card:hover{ transform:none; } a.fa-card:hover .fa-card-go{ transform:none; } } /* ===================================================================== EDITORIAL AUTHORITY — modernization pass 2 --------------------------------------------------------------------- Direction: Bloomberg / Stripe / The Information, rendered in the existing navy + electric-blue brand. The move is DISCIPLINE, not decoration: one display/body pairing, one intentional type scale, one consistent vertical rhythm, hairline structure. Presentation only — no HTML, class names, or JS touched. Reversible as a block. Chanel rule applied: this pass REMOVES visual noise (retires two of the four typefaces from primary use, flattens the overlapping type scale) more than it adds. ===================================================================== */ /* ---- 1. Typeface consolidation ------------------------------------ Space Grotesk becomes the display voice: it is the editorial-tech face (think technical publications) and reads sharper and more modern than Poppins for authority. Inter becomes the body face: cleaner for dense reading than Nunito Sans. Both are ALREADY loaded, so this costs zero new requests. --display is consumed 115x across the site, so redefining it retones every heading, kicker and label in one move. */ :root{ --display:"Space Grotesk","Poppins",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --sans:"Inter","Nunito Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; /* One intentional modular type scale (replaces overlapping clamps). Ratio ~1.25, fluid. This is the hierarchy the eye reads as order. */ --fs-eyebrow:clamp(.66rem,.62rem + .2vw,.72rem); --fs-body:1.02rem; --fs-lede:clamp(1.14rem,1.05rem + .5vw,1.32rem); --fs-h3:clamp(1.2rem,1.05rem + .8vw,1.5rem); --fs-h2:clamp(1.6rem,1.25rem + 1.7vw,2.35rem); --fs-h1:clamp(2.1rem,1.5rem + 3vw,3.6rem); /* One vertical rhythm unit for section breathing room. */ --section-y:clamp(56px,4vw + 24px,104px); } /* ---- 2. Typographic finish ---------------------------------------- */ body{ font-family:var(--sans); letter-spacing:-.003em; } h1,.lead-title,.hero-title{ font-family:var(--display); font-weight:700; font-size:var(--fs-h1); line-height:1.04; letter-spacing:-.03em; /* Space Grotesk tightens beautifully */ text-wrap:balance; } h2,.section-head h2,.about-grid h2,.contact-grid h2,.wa-title{ font-family:var(--display); font-weight:700; font-size:var(--fs-h2); line-height:1.1; letter-spacing:-.022em; text-wrap:balance; } h3,.card h3,.fa-card-title{ font-family:var(--display); font-weight:600; font-size:var(--fs-h3); line-height:1.18; letter-spacing:-.014em; } .lead-dek,.article-lede{ font-size:var(--fs-lede); line-height:1.5; color:var(--muted); text-wrap:pretty; } /* ---- 3. The signature: editorial eyebrow with a hairline rule ------ The one place boldness is spent. Section labels get a leading hairline + tracked-out caps, the device serious publications use to signal considered, structured thinking. Encodes hierarchy, not decoration. */ .eyebrow,.section-head .eyebrow{ display:inline-flex;align-items:center;gap:12px; font-family:var(--display); font-weight:600; font-size:var(--fs-eyebrow); letter-spacing:.22em; text-transform:uppercase; color:var(--blue2); } .eyebrow::before{ content:"";width:28px;height:1px; background:linear-gradient(90deg,var(--blue),transparent); } .kicker,.wa-kicker,.lead-kicker,.article-kicker,.curated-flag,.strip-lead{ font-family:var(--display); font-weight:600; letter-spacing:.2em; text-transform:uppercase; font-size:var(--fs-eyebrow); } /* ---- 4. Consistent section rhythm --------------------------------- */ main > section{ padding-block:var(--section-y); } /* keep the fold and specialized sections controlling their own top */ main > .hero,main > .subhero,main > section.hero{ padding-top:clamp(40px,5vw,72px); } /* ---- 5. Hairline structure over heavy borders --------------------- */ .section-head{ position:relative; } .week-analysis,.card,.tool-promo,.featured,.session-card{ border-color:var(--line); } /* alt-sections get a top hairline instead of just a fill change: reads as an editorial section break. */ .alt-section{ position:relative; } .alt-section::before{ content:"";position:absolute;left:0;right:0;top:0;height:1px; background:linear-gradient(90deg,transparent,var(--line-strong),transparent); } /* ---- 6. Body copy measure: cap line length for readability -------- */ .wa-body,.article-body .wrap,.lead-dek{ } .article-body .wrap > p,.wa-body > p{ max-width:68ch; /* editorial measure — no wall-to-wall text */ } /* ---- 7. Numerals: tabular for any data/ticker so figures align ----- */ .ticker,.ticker *,.stat,.count,[data-count]{ font-variant-numeric:tabular-nums; font-feature-settings:"tnum" 1; } /* ---- 8. Reduced-motion already handled globally above ------------- */ /* ---- Daily brief "in production" placeholder inner label ---- */ .video-frame-pending{ display:flex; align-items:center; justify-content:center; } .pending-inner{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:10px; text-align:center; padding:32px 24px; max-width:34ch; } .pending-eyebrow{ font-family:var(--display); font-weight:600; font-size:var(--fs-eyebrow,.72rem); letter-spacing:.2em; text-transform:uppercase; color:var(--blue2); } .pending-headline{ font-family:var(--display); font-weight:700; letter-spacing:-.01em; font-size:clamp(1.1rem,1rem + .6vw,1.5rem); color:var(--ink); } .pending-sub{ font-size:.95rem; color:var(--muted); line-height:1.5; } /* ===================================================================== B3 TECH CHRONICLES (Weekly section, documentary show format) ===================================================================== */ .tc-showtitle{ letter-spacing:-.03em; } .tc-hero .subhero-lead{ max-width:62ch; } /* episode kicker + runtime chips in the entry head */ .wa-entry-runtime{ font-family:var(--display); font-weight:600; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue2); border:1px solid var(--line); border-radius:999px; padding:2px 10px; } .wa-entry-dek{ font-size:var(--fs-lede,1.15rem); line-height:1.5; color:var(--muted); margin:2px 0 18px; text-wrap:pretty; max-width:60ch; } /* the "In this episode" chapter index */ .tc-chapters{ margin:22px 0 26px; padding:20px 22px; background:linear-gradient(160deg,rgba(18,34,55,.6),rgba(5,10,17,.6)); border:1px solid var(--line); border-radius:var(--r-lg,16px); } .tc-chapters-head{ font-family:var(--display); font-weight:700; font-size:.74rem; letter-spacing:.2em; text-transform:uppercase; color:var(--blue2); margin:0 0 14px; } .tc-chapter-list{ list-style:none; counter-reset:tc; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; } .tc-chapter{ counter-increment:tc; position:relative; padding-left:42px; } .tc-chapter::before{ content:counter(tc,decimal-leading-zero); position:absolute; left:0; top:1px; font-family:var(--display); font-weight:700; font-size:.9rem; color:var(--blue); letter-spacing:.02em; width:30px; text-align:left; } .tc-chapter-top{ display:flex; align-items:baseline; gap:10px; flex-wrap:wrap; } .tc-chapter-name{ font-family:var(--display); font-weight:700; font-size:1.02rem; color:var(--ink); letter-spacing:-.01em; } .tc-chapter-label{ font-size:.7rem; font-weight:600; letter-spacing:.12em; text-transform:uppercase; color:var(--blue2); border:1px solid var(--line); border-radius:999px; padding:1px 9px; } .tc-chapter-text{ margin:5px 0 0; color:var(--muted); font-size:.96rem; line-height:1.5; text-wrap:pretty; max-width:64ch; } @media (max-width:640px){ .tc-chapter{ padding-left:34px; } .tc-chapter::before{ width:26px; font-size:.82rem; } } /* ===================================================================== B3 TECH CHRONICLES — video-first (Netflix-style) layout ===================================================================== */ .tc-page{ padding-bottom:64px; } /* Masthead / brand line */ .tc-masthead{ padding:22px 0 6px; } .tc-brandline{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-top:6px; } .tc-brandmark{ font-family:var(--display); font-weight:700; letter-spacing:-.02em; font-size:clamp(1.5rem,1rem + 2vw,2.4rem); color:var(--ink); } .tc-tagline{ color:var(--muted); font-size:1rem; } /* The big video stage */ .tc-stage-section{ padding:8px 0 4px; } .tc-stage-frame{ position:relative; width:100%; aspect-ratio:16/9; min-height:220px; background:#04070c; border:1px solid var(--line); border-radius:var(--r-xl,20px); overflow:hidden; box-shadow:var(--elev-3,0 24px 60px -22px rgba(0,0,0,.7)); } /* Fallback for any browser/context where aspect-ratio does not resolve a height: force a 16:9 box via padding so the absolutely-positioned iframe always has a sized parent (prevents the "black empty box" collapse). */ @supports not (aspect-ratio: 16 / 9){ .tc-stage-frame{ height:0; padding-top:56.25%; } } .tc-video-live, .tc-video-live iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } /* click-to-play facade on the stage */ .tc-stage-facade{ position:absolute; inset:0; width:100%; height:100%; background-size:cover; background-position:center; cursor:pointer; display:flex; align-items:center; justify-content:center; } .tc-stage-facade .yt-play, .tc-card-play{ width:74px; height:74px; border-radius:50%; background:rgba(49,140,255,.92); box-shadow:0 8px 30px -6px rgba(49,140,255,.6); position:relative; transition:transform .2s var(--ease-out,ease); } .tc-stage-facade:hover .yt-play{ transform:scale(1.06); } .tc-stage-facade .yt-play::after, .tc-card-play::after{ content:""; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%); border-style:solid; border-width:14px 0 14px 24px; border-color:transparent transparent transparent #fff; } .tc-card-play{ width:44px; height:44px; } .tc-card-play::after{ border-width:8px 0 8px 14px; left:56%; } /* "coming soon" stage state */ .tc-stage-soon{ position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; text-align:center; gap:10px; padding:24px; background:radial-gradient(circle at 50% 40%,#0f1d33,#04070c 70%); } .tc-soon-eyebrow{ font-family:var(--display); font-weight:600; letter-spacing:.2em; text-transform:uppercase; font-size:.72rem; color:var(--blue2); } .tc-soon-title{ font-family:var(--display); font-weight:700; font-size:clamp(1.2rem,1rem + 1.5vw,1.9rem); color:var(--ink); letter-spacing:-.02em; max-width:24ch; } .tc-soon-sub{ color:var(--muted); font-size:.95rem; } /* stage meta under the player */ .tc-stage-meta{ padding:16px 2px 0; } .tc-stage-line{ display:flex; align-items:center; gap:10px; margin-bottom:8px; } .tc-badge{ font-family:var(--display); font-weight:700; font-size:.72rem; letter-spacing:.12em; text-transform:uppercase; color:#fff; background:linear-gradient(135deg,#1f7ff0,#0f3a72); border:1px solid #4698ff; border-radius:999px; padding:3px 12px; } .tc-badge-soft{ background:transparent; color:var(--blue2); border-color:var(--line); } .tc-new-signal{ position:relative; display:inline-flex; align-items:center; gap:8px; font-family:var(--display); font-weight:800; font-size:.69rem; letter-spacing:.16em; text-transform:uppercase; color:#fff; background:linear-gradient(110deg,#7d070d,#e50914 52%,#8f090f); border:1px solid rgba(255,82,88,.72); border-radius:999px; padding:4px 12px; box-shadow:0 0 0 1px rgba(229,9,20,.14),0 0 24px rgba(229,9,20,.3); } .tc-new-signal::before{content:"";width:6px;height:6px;border-radius:50%;background:#fff;box-shadow:0 0 10px #fff;} .tc-stage-title{ font-family:var(--display); font-weight:700; letter-spacing:-.025em; font-size:clamp(1.5rem,1rem + 2.4vw,2.6rem); line-height:1.08; margin:0 0 8px; color:var(--ink); text-wrap:balance; } .tc-stage-dek{ color:var(--muted); font-size:var(--fs-lede,1.15rem); line-height:1.5; margin:0; max-width:64ch; text-wrap:pretty; } /* episode card row */ .tc-row-section{ padding:34px 0 0; } .tc-row-head{ font-family:var(--display); font-weight:700; letter-spacing:-.01em; font-size:1.3rem; margin:0 0 16px; color:var(--ink); } .tc-episode-row{ display:grid; grid-template-columns:repeat(auto-fill,minmax(260px,1fr)); gap:18px; } .tc-card{ appearance:none; text-align:left; cursor:pointer; padding:0; background:var(--panel,#0a111b); border:1px solid var(--line); border-radius:14px; overflow:hidden; color:inherit; font:inherit; transition:transform .35s var(--ease-out,ease), box-shadow .35s var(--ease-out,ease), border-color .35s var(--ease-out,ease); } .tc-card:hover{ transform:translateY(-4px); border-color:var(--line-strong,rgba(120,178,255,.34)); box-shadow:var(--elev-2,0 4px 14px -4px rgba(0,0,0,.45)); } .tc-card-thumb{ display:block; position:relative; width:100%; aspect-ratio:16/9; background:#04070c center/cover no-repeat; display:flex; align-items:center; justify-content:center; } .tc-card-thumb-soon{ background:radial-gradient(circle at 50% 45%,#0f1d33,#04070c 72%); } .tc-card-current{border-color:rgba(229,9,20,.55);box-shadow:0 14px 34px -24px rgba(229,9,20,.82);} .tc-card-new{ position:absolute;left:10px;top:10px;z-index:2;padding:4px 9px;border-radius:4px; background:#e50914;color:#fff;font-family:var(--display);font-weight:800; font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;box-shadow:0 5px 16px rgba(0,0,0,.35); } /* Homepage: restrained streaming-style current-episode signal. */ .home-chronicle{padding-block:clamp(34px,4vw,62px);background:#04070c;position:relative;overflow:hidden;} .home-chronicle::before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 18% 50%,rgba(28,91,160,.18),transparent 38%),linear-gradient(90deg,rgba(255,255,255,.025),transparent 40%);pointer-events:none;} .hc-feature{position:relative;display:grid;grid-template-columns:minmax(190px,34%) 1fr;min-height:270px;border:1px solid rgba(116,167,225,.2);border-radius:20px;overflow:hidden;background:linear-gradient(105deg,#07101d 0%,#0a1424 50%,#070b12 100%);box-shadow:0 28px 65px -45px #000;color:var(--ink);text-decoration:none;transition:transform .35s var(--ease-out),border-color .35s var(--ease-out),box-shadow .35s var(--ease-out);} .hc-feature:hover{transform:translateY(-3px);border-color:rgba(103,176,255,.38);box-shadow:0 34px 76px -42px rgba(18,85,160,.56);} .hc-art{position:relative;display:flex;align-items:center;justify-content:center;min-height:270px;overflow:hidden;background:radial-gradient(circle at 50% 48%,rgba(37,139,255,.24),transparent 31%),linear-gradient(145deg,#081b33,#04070d 68%);border-right:1px solid rgba(122,183,255,.14);} .hc-art::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,transparent 65%,#0a1424),repeating-linear-gradient(0deg,transparent 0 18px,rgba(92,165,255,.025) 19px);} .hc-monogram{position:relative;z-index:2;font-family:var(--display);font-size:clamp(4rem,8vw,7.4rem);font-weight:800;letter-spacing:-.1em;color:#fff;text-shadow:0 0 34px rgba(58,151,255,.45);transform:translateX(-.05em);} .hc-art-label{position:absolute;z-index:3;bottom:28px;font-family:var(--display);font-size:.64rem;font-weight:700;letter-spacing:.27em;text-transform:uppercase;color:#a9d5ff;} .hc-orbit{position:absolute;border:1px solid rgba(76,163,255,.28);border-radius:50%;} .hc-orbit-one{width:180px;height:180px;box-shadow:0 0 30px rgba(38,128,224,.12);} .hc-orbit-two{width:245px;height:245px;border-color:rgba(229,9,20,.3);} .hc-copy{display:flex;flex-direction:column;justify-content:center;align-items:flex-start;padding:clamp(28px,5vw,58px);min-width:0;} .hc-signal{display:inline-flex;align-items:center;gap:8px;margin-bottom:16px;font-family:var(--display);font-size:.66rem;font-weight:800;letter-spacing:.18em;text-transform:uppercase;color:#ff5a60;} .hc-signal-dot{width:7px;height:7px;border-radius:50%;background:#e50914;box-shadow:0 0 13px rgba(229,9,20,.78);animation:hc-breathe 3.2s ease-in-out infinite;} .hc-series{font-family:var(--display);font-size:.73rem;font-weight:600;letter-spacing:.13em;text-transform:uppercase;color:#88bff5;margin-bottom:9px;} .hc-sep{opacity:.4;margin-inline:5px;} .hc-title{display:block;font-family:var(--display);font-weight:700;font-size:clamp(1.65rem,2.7vw,3rem);line-height:1.05;letter-spacing:-.035em;color:#fff;text-wrap:balance;margin-bottom:13px;} .hc-dek{display:block;max-width:64ch;color:#aebdd0;font-size:clamp(.96rem,1.2vw,1.08rem);line-height:1.55;text-wrap:pretty;} .hc-meta{display:flex;gap:9px;align-items:center;margin-top:15px;color:#7e91a8;font-size:.78rem;} .hc-cta{margin-top:22px;color:#e8f4ff;font-family:var(--display);font-weight:700;font-size:.84rem;letter-spacing:.02em;transition:color .2s,transform .2s;} .hc-feature:hover .hc-cta{color:#79bdff;transform:translateX(3px);} @keyframes hc-breathe{0%,100%{opacity:.55;transform:scale(.88)}50%{opacity:1;transform:scale(1)}} @media(max-width:720px){.hc-feature{grid-template-columns:1fr}.hc-art{min-height:190px;border-right:0;border-bottom:1px solid rgba(122,183,255,.14)}.hc-orbit-one{width:135px;height:135px}.hc-orbit-two{width:185px;height:185px}.hc-art-label{bottom:18px}.hc-copy{padding:28px 24px 32px}.hc-dek{font-size:.94rem}} @media(prefers-reduced-motion:reduce){.hc-feature:hover,.hc-feature:hover .hc-cta{transform:none}.hc-signal-dot{animation:none}} .tc-card-soon{ font-family:var(--display); font-weight:700; letter-spacing:.14em; text-transform:uppercase; font-size:.72rem; color:var(--blue2); } .tc-card-body{ display:block; padding:14px 16px 18px; } .tc-card-top{ display:flex; align-items:center; gap:8px; margin-bottom:6px; } .tc-card-ep{ font-family:var(--display); font-weight:700; font-size:.7rem; letter-spacing:.1em; text-transform:uppercase; color:#fff; background:var(--blue); border-radius:999px; padding:1px 8px; } .tc-card-runtime{ font-size:.74rem; color:var(--muted); } .tc-card-title{ display:block; font-family:var(--display); font-weight:700; font-size:1.08rem; line-height:1.2; color:var(--ink); letter-spacing:-.01em; margin-bottom:4px; } .tc-card-dek{ display:block; color:var(--muted); font-size:.9rem; line-height:1.45; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; } .tc-loading{ color:var(--muted); } @media (prefers-reduced-motion:reduce){ .tc-card:hover{ transform:none; } .tc-stage-facade:hover .yt-play{ transform:none; } } /* ---- Tech Chronicles: unmute button over the autoplaying muted stage ---- */ .tc-unmute{ position:absolute; left:16px; bottom:16px; z-index:3; appearance:none; cursor:pointer; font-family:var(--display); font-weight:700; font-size:.9rem; letter-spacing:.01em; color:#fff; background:rgba(5,8,13,.82); border:1px solid #4698ff; border-radius:999px; padding:9px 18px; backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px); box-shadow:0 6px 20px -6px rgba(0,0,0,.6); transition:transform .15s ease, background .2s ease; } .tc-unmute:hover{ transform:translateY(-1px); background:rgba(31,127,240,.9); } .tc-unmute:active{ transform:translateY(0); } /* ===================================================================== LEAD CAPTURE — low-friction homepage CTA (routes to Formspree) ===================================================================== */ .lead-capture{ margin:26px 0 4px; padding:26px 26px 22px; background:linear-gradient(160deg,rgba(20,40,66,.7),rgba(5,10,17,.7)); border:1px solid var(--line-strong,rgba(120,178,255,.34)); border-radius:var(--r-xl,20px); box-shadow:var(--elev-2,0 4px 14px -4px rgba(0,0,0,.45)); } .lead-capture-copy{ margin-bottom:16px; } .lead-capture-title{ font-family:var(--display); font-weight:700; letter-spacing:-.02em; font-size:clamp(1.3rem,1rem + 1.4vw,1.8rem); line-height:1.1; margin:6px 0 8px; color:var(--ink); } .lead-capture-sub{ color:var(--muted); font-size:1rem; line-height:1.5; margin:0; max-width:60ch; } .lead-capture-form{ display:flex; flex-direction:column; gap:12px; } .lc-row{ display:grid; grid-template-columns:1fr 1fr; gap:12px; } .lc-field{ display:flex; flex-direction:column; gap:5px; } .lc-field label{ font-size:.8rem; font-weight:600; color:var(--muted2,#93a5bd); letter-spacing:.02em; } .lc-opt{ font-weight:400; color:var(--muted); } .lead-capture-form input[type="text"], .lead-capture-form input[type="email"], .lead-capture-form input[type="tel"]{ width:100%; padding:12px 14px; border-radius:10px; background:rgba(5,10,17,.6); border:1px solid var(--line); color:var(--ink); font:inherit; font-size:.98rem; transition:border-color .25s ease, box-shadow .25s ease; } .lead-capture-form input:focus{ outline:none; border-color:var(--blue2); box-shadow:var(--glow,0 0 0 1px rgba(101,169,255,.35)); } .lead-capture-btn{ align-self:flex-start; margin-top:4px; } .lead-capture-note{ color:var(--muted2,#93a5bd); font-size:.85rem; margin:12px 0 0; } .hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; } @media (max-width:640px){ .lc-row{ grid-template-columns:1fr; } .lead-capture{ padding:22px 18px 18px; } .lead-capture-btn{ align-self:stretch; } } /* ===================================================================== B3 TECH · FEATURED ARTICLE — second section on the Chronicles page ===================================================================== */ .tc-feature-section{ padding:44px 0 0; } .tc-feature-head{ margin-bottom:18px; } .tc-feature-sub{ color:var(--muted); font-size:1rem; margin:4px 0 0; } .tc-feature-card{ display:grid; grid-template-columns:minmax(280px,42%) 1fr; gap:0; text-decoration:none; color:inherit; overflow:hidden; background:linear-gradient(160deg,rgba(18,34,55,.7),rgba(5,10,17,.75)); border:1px solid var(--line); border-radius:var(--r-xl,20px); transition:transform .35s var(--ease-out,ease), box-shadow .35s var(--ease-out,ease), border-color .35s var(--ease-out,ease); } .tc-feature-card:hover{ transform:translateY(-4px); border-color:var(--line-strong,rgba(120,178,255,.34)); box-shadow:var(--elev-3,0 24px 60px -22px rgba(0,0,0,.7)); } .tc-feature-media{ min-height:260px; background:#04070c center/cover no-repeat; border-right:1px solid var(--line); } .tc-feature-media-campaign{ background-size:contain;background-color:#02050a; box-shadow:inset -22px 0 36px -34px rgba(101,169,255,.55); } .tc-feature-media-plain{ background:radial-gradient(circle at 40% 35%,#12294a,#04070c 72%); position:relative; } .tc-feature-media-plain::after{ content:"B3"; position:absolute; inset:0; display:flex; align-items:center; justify-content:center; font-family:var(--display); font-weight:800; font-size:3rem; color:rgba(101,169,255,.25); letter-spacing:.04em; } .tc-feature-body{ display:flex; flex-direction:column; padding:28px 30px; gap:10px; } .tc-feature-kicker{ font-family:var(--display); font-weight:600; font-size:.72rem; letter-spacing:.18em; text-transform:uppercase; color:var(--blue2); } .tc-feature-title{ font-family:var(--display); font-weight:700; letter-spacing:-.02em; font-size:clamp(1.4rem,1rem + 1.8vw,2.1rem); line-height:1.12; color:var(--ink); text-wrap:balance; } .tc-feature-lede{ color:var(--muted); font-size:1rem; line-height:1.55; margin-top:2px; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden; } .tc-feature-meta{ display:flex; align-items:center; gap:14px; margin-top:2px; } .tc-feature-date, .tc-feature-read{ color:var(--muted2,#93a5bd); font-size:.85rem; } .tc-feature-read{ position:relative; padding-left:16px; } .tc-feature-read::before{ content:"·"; position:absolute; left:4px; } .tc-feature-cta{ font-family:var(--display); font-weight:700; font-size:.95rem; color:var(--blue2); margin-top:8px; transition:transform .3s var(--ease-out,ease); } .tc-feature-card:hover .tc-feature-cta{ transform:translateX(4px); } @media (max-width:720px){ .tc-feature-card{ grid-template-columns:1fr; } .tc-feature-media{ min-height:180px; border-right:none; border-bottom:1px solid var(--line); } .tc-feature-body{ padding:22px 20px; } } @media (prefers-reduced-motion:reduce){ .tc-feature-card:hover{ transform:none; } .tc-feature-card:hover .tc-feature-cta{ transform:none; } } /* ---- Audience strip: names the target buyer up front on the homepage ---- */ .audience-strip{ display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:0 auto 22px; padding:10px 18px; background:linear-gradient(135deg,rgba(31,127,240,.14),rgba(15,58,114,.14)); border:1px solid var(--line-strong,rgba(120,178,255,.34)); border-radius:999px; width:max-content; max-width:100%; } .audience-strip-label{ font-family:var(--display); font-weight:700; font-size:.72rem; letter-spacing:.16em; text-transform:uppercase; color:var(--blue2); padding-right:12px; border-right:1px solid var(--line); } .audience-strip-items{ color:var(--ink); font-size:.92rem; font-weight:500; } @media (max-width:640px){ .audience-strip{ border-radius:14px; } .audience-strip-items{ font-size:.85rem; } } /* ---- Buyer-problem pillar pages (regulated/gov/education focus) ---- */ .pillar-body{ padding:8px 0 48px; } .pillar-problem{ margin-bottom:34px; } .pillar-problem h2, .pillar-checklist h2{ font-family:var(--display); font-weight:700; letter-spacing:-.01em; font-size:1.4rem; margin:0 0 12px; color:var(--ink); } .pillar-problem p{ color:var(--muted); font-size:1.05rem; line-height:1.6; max-width:68ch; } .pillar-checklist{ margin-bottom:34px; } .pillar-qs{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:14px; max-width:74ch; } .pillar-qs li{ padding:16px 20px; background:linear-gradient(160deg,rgba(18,34,55,.55),rgba(5,10,17,.6)); border:1px solid var(--line); border-left:3px solid var(--blue); border-radius:12px; color:var(--muted); font-size:1rem; line-height:1.55; } .pillar-qs li b{ color:var(--ink); font-weight:700; } .pillar-cta-block{ margin-top:8px; padding:24px 26px; text-align:center; background:linear-gradient(160deg,rgba(20,40,66,.6),rgba(5,10,17,.65)); border:1px solid var(--line-strong,rgba(120,178,255,.34)); border-radius:16px; } .pillar-cta-block p{ color:var(--ink); font-size:1.05rem; margin:0 0 14px; } /* ---- Pillar video section: Netflix-style, gov/regulated talks + commentary ---- */ .pv-section{ padding:40px 0 8px; border-top:1px solid var(--line); margin-top:36px; } .pv-head{ margin-bottom:18px; } .pv-intro{ color:var(--muted); font-size:1rem; max-width:64ch; margin:6px 0 0; } .pv-stage-wrap{ display:grid; grid-template-columns:1.5fr 1fr; gap:22px; align-items:start; margin-bottom:22px; } .pv-stage{ position:relative; width:100%; aspect-ratio:16/9; min-height:200px; background:#04070c; border:1px solid var(--line); border-radius:16px; overflow:hidden; } .pv-stage-live, .pv-stage-live iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; } .pv-meta{ padding:2px; } .pv-source{ font-family:var(--display); font-weight:600; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue2); } .pv-title{ font-family:var(--display); font-weight:700; font-size:1.25rem; line-height:1.2; color:var(--ink); margin:6px 0 12px; letter-spacing:-.01em; } .pv-commentary{ background:linear-gradient(160deg,rgba(18,34,55,.55),rgba(5,10,17,.6)); border:1px solid var(--line); border-left:3px solid var(--blue); border-radius:12px; padding:14px 16px; } .pv-commentary-label{ font-family:var(--display); font-weight:700; font-size:.66rem; letter-spacing:.16em; text-transform:uppercase; color:var(--blue2); } .pv-commentary-text{ color:var(--muted); font-size:.95rem; line-height:1.55; margin:6px 0 0; } .pv-row{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; } .pv-card{ appearance:none; text-align:left; cursor:pointer; padding:0; background:var(--panel,#0a111b); border:1px solid var(--line); border-radius:12px; overflow:hidden; color:inherit; font:inherit; transition:transform .3s var(--ease-out,ease), border-color .3s var(--ease-out,ease); } .pv-card:hover{ transform:translateY(-3px); border-color:var(--line-strong,rgba(120,178,255,.34)); } .pv-card-thumb{ display:flex; align-items:center; justify-content:center; width:100%; aspect-ratio:16/9; background:#04070c center/cover no-repeat; } .pv-card-play{ width:42px; height:42px; border-radius:50%; background:rgba(49,140,255,.92); position:relative; } .pv-card-play::after{ content:""; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%); border-style:solid; border-width:8px 0 8px 14px; border-color:transparent transparent transparent #fff; } .pv-card-body{ display:block; padding:12px 14px 14px; } .pv-card-source{ display:block; font-size:.66rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase; color:var(--blue2); margin-bottom:4px; } .pv-card-title{ display:block; font-family:var(--display); font-weight:700; font-size:.98rem; line-height:1.25; color:var(--ink); } .pv-soon{ padding:36px 26px; text-align:center; background:radial-gradient(circle at 50% 40%,#0f1d33,#04070c 72%); border:1px solid var(--line); border-radius:16px; } .pv-soon-eyebrow{ font-family:var(--display); font-weight:600; letter-spacing:.2em; text-transform:uppercase; font-size:.72rem; color:var(--blue2); } .pv-soon-title{ font-family:var(--display); font-weight:700; font-size:1.5rem; color:var(--ink); margin:8px 0; letter-spacing:-.02em; } .pv-soon-sub{ color:var(--muted); max-width:52ch; margin:0 auto; } .pv-loading{ color:var(--muted); padding:16px; } @media (max-width:760px){ .pv-stage-wrap{ grid-template-columns:1fr; } } @media (prefers-reduced-motion:reduce){ .pv-card:hover{ transform:none; } } /* Keep the Stay Informed nav item on one line */ .nav-informed{ white-space:nowrap; } /* ===================================================================== GOVERNMENT & REGULATORY WATCH — curated gov feed, by pillar ===================================================================== */ .gw-section{ padding:44px 0 8px; border-top:1px solid var(--line); margin-top:40px; } .gw{ display:flex; flex-direction:column; gap:30px; margin-top:20px; } .gw-loading{ color:var(--muted); } .gw-group-head{ display:flex; align-items:center; gap:12px; margin-bottom:14px; padding-bottom:10px; border-bottom:1px solid var(--line); } .gw-group-title{ font-family:var(--display); font-weight:700; font-size:1.15rem; letter-spacing:-.01em; color:var(--ink); text-decoration:none; } .gw-group-title:hover{ color:var(--blue2); } .gw-count{ font-family:var(--display); font-weight:700; font-size:.7rem; color:var(--blue2); background:rgba(49,140,255,.12); border:1px solid var(--line); border-radius:999px; padding:2px 9px; } .gw-list{ display:grid; grid-template-columns:repeat(auto-fill,minmax(320px,1fr)); gap:14px; } .gw-item{ display:flex; flex-direction:column; gap:8px; padding:18px 20px; background:linear-gradient(160deg,rgba(18,34,55,.5),rgba(5,10,17,.55)); border:1px solid var(--line); border-radius:14px; } .gw-item-head{ display:flex; align-items:center; justify-content:space-between; gap:10px; } .gw-type{ font-family:var(--display); font-weight:700; font-size:.62rem; letter-spacing:.12em; text-transform:uppercase; color:#0a1220; background:var(--blue2); border-radius:5px; padding:3px 8px; } .gw-date{ color:var(--muted2,#93a5bd); font-size:.78rem; } .gw-title{ font-family:var(--display); font-weight:700; font-size:1.02rem; line-height:1.25; color:var(--ink); margin:2px 0 0; } .gw-source{ font-size:.78rem; font-weight:600; letter-spacing:.04em; color:var(--blue2); } .gw-summary{ color:var(--muted); font-size:.92rem; line-height:1.5; margin:2px 0 0; } .gw-read{ background:rgba(8,16,28,.6); border-left:3px solid var(--blue); border-radius:8px; padding:10px 12px; margin-top:4px; } .gw-read-label{ font-family:var(--display); font-weight:700; font-size:.6rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue2); } .gw-read-text{ color:var(--muted); font-size:.88rem; line-height:1.5; margin:5px 0 0; } .gw-source-link{ font-family:var(--display); font-weight:700; font-size:.82rem; color:var(--blue2); text-decoration:none; margin-top:4px; } .gw-source-link:hover{ text-decoration:underline; } @media (max-width:640px){ .gw-list{ grid-template-columns:1fr; } } /* ===================================================================== VIDEO LIBRARY (/videos) + per-video pages (/video/slug) ===================================================================== */ /* --- Library controls --- */ .vlib-controls-sec{ padding:8px 0 4px; } .vlib-search-wrap{ margin-bottom:16px; } .vlib-search{ width:100%; max-width:520px; padding:13px 18px; font-size:1rem; color:var(--ink); background:rgba(8,16,28,.7); border:1px solid var(--line); border-radius:12px; font-family:inherit; } .vlib-search:focus{ outline:none; border-color:var(--blue); box-shadow:0 0 0 3px rgba(49,140,255,.18); } .vlib-search::placeholder{ color:var(--muted2,#93a5bd); } .vlib-filters{ display:flex; flex-wrap:wrap; gap:8px; } .vlib-filter{ appearance:none; cursor:pointer; font:inherit; font-size:.86rem; font-weight:600; color:var(--muted); background:rgba(18,34,55,.5); border:1px solid var(--line); border-radius:999px; padding:7px 15px; transition:all .2s ease; } .vlib-filter:hover{ color:var(--ink); border-color:var(--line-strong,rgba(120,178,255,.34)); } .vlib-filter.is-active{ color:#0a1220; background:var(--blue2); border-color:var(--blue2); } /* --- Library grid + cards --- */ .vlib-grid-sec{ padding:22px 0 40px; } .vlib-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:18px; } .vlib-loading, .vlib-empty{ color:var(--muted); } .vlib-card{ display:flex; flex-direction:column; text-decoration:none; color:inherit; background:var(--panel,#0a111b); border:1px solid var(--line); border-radius:14px; overflow:hidden; transition:transform .28s var(--ease-out,ease), border-color .28s var(--ease-out,ease), box-shadow .28s var(--ease-out,ease); } .vlib-card:hover{ transform:translateY(-4px); border-color:var(--line-strong,rgba(120,178,255,.34)); box-shadow:var(--elev-2,0 18px 44px -20px rgba(0,0,0,.65)); } .vlib-card-thumb{ position:relative; width:100%; aspect-ratio:16/9; background:#04070c center/cover no-repeat; display:flex; align-items:center; justify-content:center; } .vlib-card-play{ width:46px; height:46px; border-radius:50%; background:rgba(49,140,255,.92); position:relative; transition:transform .28s ease; } .vlib-card:hover .vlib-card-play{ transform:scale(1.08); } .vlib-card-play::after{ content:""; position:absolute; top:50%; left:54%; transform:translate(-50%,-50%); border-style:solid; border-width:8px 0 8px 14px; border-color:transparent transparent transparent #fff; } .vlib-card-new{ position:absolute; top:10px; left:10px; font-family:var(--display); font-weight:700; font-size:.62rem; letter-spacing:.1em; text-transform:uppercase; color:#0a1220; background:#4ade80; border-radius:5px; padding:3px 8px; } .vlib-card-dur{ position:absolute; bottom:10px; right:10px; font-size:.72rem; font-weight:600; color:#fff; background:rgba(0,0,0,.72); border-radius:5px; padding:2px 7px; } .vlib-card-body{ display:flex; flex-direction:column; gap:6px; padding:15px 16px 17px; } .vlib-card-cat{ font-size:.66rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blue2); } .vlib-card-title{ font-family:var(--display); font-weight:700; font-size:1.05rem; line-height:1.25; color:var(--ink); } .vlib-card-desc{ color:var(--muted); font-size:.88rem; line-height:1.45; } .vlib-card-meta{ display:flex; flex-wrap:wrap; gap:10px; margin-top:2px; } .vlib-card-date, .vlib-card-source{ color:var(--muted2,#93a5bd); font-size:.76rem; } .vlib-card-source{ position:relative; padding-left:12px; } .vlib-card-source::before{ content:"\00b7"; position:absolute; left:3px; } /* --- Per-video page --- */ .vpage{ padding-top:20px; } .vpage-cat{ font-family:var(--display); font-weight:700; font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; color:var(--blue2); margin-top:6px; } .vpage-title{ font-family:var(--display); font-weight:700; letter-spacing:-.02em; line-height:1.12; font-size:clamp(1.6rem,1.1rem + 2.2vw,2.6rem); color:var(--ink); margin:6px 0 18px; text-wrap:balance; } .vpage-player{ width:100%; aspect-ratio:16/9; background:#04070c; border:1px solid var(--line); border-radius:16px; overflow:hidden; margin-bottom:16px; } .vpage-player .yt-facade{ width:100%; height:100%; } .vpage-meta{ display:flex; flex-wrap:wrap; gap:14px; align-items:center; margin-bottom:22px; } .vpage-date, .vpage-source, .vpage-dur{ color:var(--muted); font-size:.9rem; } .vpage-source{ color:var(--blue2); font-weight:600; } .vpage-body{ max-width:70ch; margin-bottom:22px; } .vpage-body h2{ font-family:var(--display); font-weight:700; font-size:1.15rem; color:var(--ink); margin:0 0 8px; } .vpage-body p{ color:var(--muted); font-size:1.02rem; line-height:1.6; margin:0; } .vpage-watch{ margin:0 0 34px; } .vpage-watch a{ font-family:var(--display); font-weight:700; color:var(--blue2); text-decoration:none; } .vpage-watch a:hover{ text-decoration:underline; } .vpage-related h2{ font-family:var(--display); font-weight:700; font-size:1.3rem; color:var(--ink); margin:0 0 16px; padding-top:20px; border-top:1px solid var(--line); } .vpage-related-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(200px,1fr)); gap:14px; } .vrel-card{ display:flex; flex-direction:column; text-decoration:none; color:inherit; background:var(--panel,#0a111b); border:1px solid var(--line); border-radius:12px; overflow:hidden; transition:transform .25s ease, border-color .25s ease; } .vrel-card:hover{ transform:translateY(-3px); border-color:var(--line-strong,rgba(120,178,255,.34)); } .vrel-thumb{ position:relative; width:100%; aspect-ratio:16/9; background:#04070c center/cover no-repeat; display:flex; align-items:center; justify-content:center; } .vrel-play{ width:38px; height:38px; border-radius:50%; background:rgba(49,140,255,.9); position:relative; } .vrel-play::after{ content:""; position:absolute; top:50%; left:55%; transform:translate(-50%,-50%); border-style:solid; border-width:7px 0 7px 12px; border-color:transparent transparent transparent #fff; } .vrel-body{ padding:11px 13px 13px; display:flex; flex-direction:column; gap:4px; } .vrel-cat{ font-size:.6rem; font-weight:700; letter-spacing:.1em; text-transform:uppercase; color:var(--blue2); } .vrel-title{ font-family:var(--display); font-weight:700; font-size:.92rem; line-height:1.25; color:var(--ink); } @media (max-width:640px){ .vlib-grid{ grid-template-columns:1fr 1fr; gap:12px; } .vlib-card-desc{ display:none; } } .article-sources{margin:52px 0 10px;padding:26px 28px;border:1px solid var(--line);border-radius:14px;background:rgba(9,19,32,.72)} .article-sources h2{margin:0 0 12px;font-size:1.2rem} .article-sources ul{margin:0;padding-left:20px} .article-sources li+li{margin-top:8px} .article-sources a{color:var(--blue2);text-decoration:underline;text-underline-offset:3px} @media (min-width:721px) and (max-width:1180px){.nav-links{gap:8px;font-size:.78rem}.nav-links a{padding-left:6px!important;padding-right:6px!important}} /* ===================================================================== DESKTOP HEADER — protected brand lane + compact editorial navigation The brand and ten links formerly competed inside one 1180px flex row. Give the logo its own fixed lane and let the navigation use a deliberate five-by-two grid at ordinary desktop widths. Very wide screens return to one row. Mobile remains governed by the existing dropdown rules. ===================================================================== */ @media (min-width:721px){ .site-header{ isolation:isolate; background: linear-gradient(90deg,rgba(8,18,32,.97),rgba(5,10,18,.92) 48%,rgba(7,17,30,.97)); border-bottom:1px solid rgba(104,170,255,.25); box-shadow:0 14px 36px -28px rgba(0,0,0,.95),0 1px 0 rgba(134,192,255,.08); } .site-header::before{ content:"";position:absolute;inset:0 0 auto;height:2px;z-index:-1; background:linear-gradient(90deg,transparent 3%,rgba(49,140,255,.8) 24%,rgba(101,169,255,.25) 62%,transparent 96%); } .site-header .nav-wrap{ width:min(1440px,calc(100% - 40px)); min-height:108px;height:auto; display:grid;grid-template-columns:max-content minmax(0,1fr); align-items:center;gap:28px;padding:10px 0; } .site-header .brand{ position:relative;z-index:2;min-width:190px;flex:none; padding:7px 16px 7px 8px;border:1px solid rgba(101,169,255,.18); border-radius:18px;background:linear-gradient(135deg,rgba(16,35,60,.8),rgba(7,14,24,.55)); box-shadow:inset 0 1px 0 rgba(255,255,255,.05),0 16px 30px -24px rgba(49,140,255,.75); } .site-header .brand img{ width:66px!important;height:66px!important;border-radius:14px; border-color:rgba(112,178,255,.42);background:#02050a; box-shadow:0 0 0 3px rgba(49,140,255,.07),0 0 22px rgba(49,140,255,.14); } .site-header .brand-word{font-size:.88rem;letter-spacing:.09em;line-height:1.1} .site-header .nav-links{ min-width:0;width:100%;display:grid; grid-template-columns:repeat(5,minmax(0,1fr)); gap:7px 8px;padding:7px; border:1px solid rgba(101,169,255,.13);border-radius:17px; background:rgba(3,8,15,.48);box-shadow:inset 0 1px 0 rgba(255,255,255,.025); font-size:clamp(.79rem,.86vw,.88rem);font-weight:650;white-space:nowrap; } .site-header .nav-links a, .site-header .nav-links a.hot, .site-header .nav-links a.nav-cta{ min-width:0;min-height:35px;padding:8px 7px!important; display:flex;align-items:center;justify-content:center; overflow:hidden;text-overflow:ellipsis;border-radius:10px; background:transparent;box-shadow:none; border:1px solid transparent;text-align:center; } .site-header .nav-links a:hover, .site-header .nav-links a.hot:hover{ background:rgba(49,140,255,.13);border-color:rgba(101,169,255,.2); box-shadow:inset 0 1px 0 rgba(255,255,255,.04); } .site-header .nav-links a[aria-current="page"]{ background:linear-gradient(135deg,rgba(31,127,240,.28),rgba(15,58,114,.35)); border-color:rgba(101,169,255,.4);box-shadow:0 7px 18px -14px rgba(49,140,255,.9); } .site-header .nav-links a::after{display:none!important} } @media (min-width:721px) and (max-width:900px){ .site-header .nav-wrap{grid-template-columns:82px minmax(0,1fr);gap:14px;width:min(100% - 24px,1440px)} .site-header .brand{min-width:0;width:82px;padding:7px;justify-content:center} .site-header .brand-word{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0} .site-header .nav-links{gap:6px 5px;font-size:.73rem} } @media (min-width:1380px){ .site-header .nav-wrap{min-height:90px;grid-template-columns:max-content minmax(0,1fr)} .site-header .nav-links{display:flex;justify-content:flex-end;gap:5px;padding:7px} .site-header .nav-links a, .site-header .nav-links a.hot, .site-header .nav-links a.nav-cta{padding:10px 11px!important;overflow:visible} } /* Desktop opening story: align the editorial column with the full site grid. The original 880px cap made the headline and preview look indented beside the wider banner and sections below it. Keep phone/tablet reading measures, but let the first desktop story establish the same left/right rhythm. */ @media (min-width:981px){ .hero.lead .lead-wrap{max-width:1180px} .hero.lead .hb-below{max-width:1180px} .hero.lead .lead-title{ width:100%;max-width:30ch; font-size:clamp(2.65rem,3.45vw,4rem); line-height:1.06;text-wrap:balance; } .hero.lead .lead-dek{width:100%;max-width:94ch;font-size:1.18rem;line-height:1.65} .hero.lead .lead-signed{width:100%} } /* Reusable Featured Article campaign creative. This occupies the feature video slot until the companion video goes live, so the area reads as an intentional editorial ad rather than an empty player. */ .article-campaign-ad{ position:relative;margin:0;overflow:hidden;border-radius:18px; border:1px solid rgba(101,169,255,.34);background:#02050a; box-shadow:0 28px 70px -34px rgba(0,0,0,.95),0 0 34px rgba(49,140,255,.11); } .article-campaign-ad img,.article-campaign-video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#02050a} .article-campaign-cap{ display:flex;align-items:center;justify-content:space-between;gap:16px; padding:13px 17px;background:linear-gradient(90deg,rgba(8,18,32,.98),rgba(5,10,18,.98)); border-top:1px solid rgba(101,169,255,.2);font-family:var(--display); } .article-campaign-status{ display:inline-flex;align-items:center;gap:8px;color:#fff;font-size:.75rem; font-weight:700;letter-spacing:.09em;text-transform:uppercase; } .article-campaign-status::before{ content:"";width:8px;height:8px;border-radius:50%;background:#e02121; box-shadow:0 0 0 4px rgba(224,33,33,.13),0 0 13px rgba(224,33,33,.55); } .article-campaign-copy{color:var(--muted);font-size:.84rem} .article-campaign-credit{display:block;padding:8px 17px 10px;color:var(--muted2);font-size:.66rem;line-height:1.4;background:#03070c} .article-campaign-credit a{color:var(--blue2);text-decoration:underline;text-underline-offset:2px} .video-music-credit{display:block;margin-top:10px;color:var(--muted2);font-size:.68rem;line-height:1.45} .video-music-credit a{color:var(--blue2);text-decoration:underline;text-underline-offset:2px} @media(max-width:640px){ .article-campaign-ad{border-radius:12px} .article-campaign-cap{align-items:flex-start;flex-direction:column;gap:4px;padding:11px 13px} .article-campaign-status{font-size:.68rem} .article-campaign-copy{font-size:.77rem} } .rsrch-source-sec{padding:72px 0;background:linear-gradient(180deg,rgba(8,17,31,.25),rgba(8,17,31,.7))} .rsrch-source-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px} .rsrch-source-card{display:flex;flex-direction:column;gap:10px;min-height:172px;padding:22px;border:1px solid rgba(113,183,255,.2);border-radius:16px;background:rgba(8,18,33,.82);color:#eef7ff;text-decoration:none;transition:transform .2s ease,border-color .2s ease,box-shadow .2s ease} .rsrch-source-card:hover,.rsrch-source-card:focus-visible{transform:translateY(-3px);border-color:#318cff;box-shadow:0 14px 34px rgba(0,85,180,.2)} .rsrch-source-publisher{font-size:.72rem;letter-spacing:.1em;text-transform:uppercase;color:#65c7ff} .rsrch-source-name{font-size:1rem;line-height:1.35} .rsrch-source-open{margin-top:auto;font-size:.78rem;color:#9fd8ff} @media(max-width:860px){.rsrch-source-grid{grid-template-columns:1fr 1fr}} @media(max-width:560px){.rsrch-source-grid{grid-template-columns:1fr}.rsrch-source-sec{padding:52px 0}} /* ===================================================================== RESEARCH + STAY INFORMED REDESIGN, 2026-08-14 Additive only: existing research charts, video rotation, Government Watch, forms, and their fallback markup remain intact. ===================================================================== */ .rsrch-hero-redesign{padding:42px 0 54px;overflow:hidden} .rsrch-hero-grid,.informed-hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(420px,.95fr);gap:48px;align-items:center} .rsrch-hero-copy h1,.informed-hero-copy h1{font-size:clamp(2.6rem,5vw,5rem);line-height:1.01;letter-spacing:-.05em;max-width:12ch;margin:18px 0 22px} .rsrch-hero-copy .subhero-lead,.informed-hero-copy .subhero-lead{max-width:66ch} .rsrch-hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:25px} .rsrch-hero-art,.informed-hero-art{position:relative;aspect-ratio:16/10;margin:0;border:1px solid var(--line);border-radius:24px;overflow:hidden;background:#07111d;box-shadow:0 36px 90px -55px rgba(49,140,255,.82)} .rsrch-hero-art img,.informed-hero-art img{width:100%;height:100%;object-fit:cover} .rsrch-hero-art::after,.informed-hero-art::after{content:'';position:absolute;inset:45% 0 0;background:linear-gradient(transparent,rgba(3,7,13,.9));pointer-events:none} .rsrch-hero-art figcaption,.informed-hero-art figcaption{position:absolute;z-index:1;left:20px;right:20px;bottom:17px;color:#d9e8f8;font-size:.78rem;font-weight:800;letter-spacing:.4px} .rsrch-live-dot{display:inline-block;width:8px;height:8px;margin-right:8px;border-radius:50%;background:#ef4055;box-shadow:0 0 13px rgba(239,64,85,.9);animation:rsrchPulse 1.8s ease-in-out infinite} @keyframes rsrchPulse{50%{opacity:.4;transform:scale(.75)}} .rsrch-lens-sec{padding:86px 0;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:linear-gradient(180deg,rgba(8,19,32,.75),rgba(3,7,13,.48))} .rsrch-lens-tabs{display:flex;gap:9px;flex-wrap:wrap;margin:30px 0 22px} .rsrch-lens-tab{padding:10px 15px;border:1px solid var(--line);border-radius:999px;background:#08121e;color:var(--muted);font:inherit;font-size:.86rem;font-weight:800;cursor:pointer} .rsrch-lens-tab.is-active{background:var(--blue);border-color:var(--blue);color:#03101e} .rsrch-lens-stage{display:grid;grid-template-columns:minmax(300px,.8fr) 1.2fr;gap:48px;align-items:center;padding:38px;border:1px solid var(--line);border-radius:22px;background:linear-gradient(145deg,rgba(17,38,64,.92),rgba(5,11,18,.9));box-shadow:var(--shadow)} .rsrch-lens-copy h3{font-size:clamp(1.7rem,3vw,2.5rem);line-height:1.08;margin:10px 0 14px} .rsrch-lens-copy p{color:var(--muted);font-size:1rem;max-width:62ch} .rsrch-lens-visual{height:300px;position:relative;display:grid;place-items:center;border-radius:17px;overflow:hidden;background-image:linear-gradient(rgba(87,161,255,.09) 1px,transparent 1px),linear-gradient(90deg,rgba(87,161,255,.09) 1px,transparent 1px);background-size:34px 34px} .rsrch-lens-visual>span{z-index:2;width:92px;height:92px;display:grid;place-items:center;border-radius:23px;background:#ef4055;color:#fff;font-size:2rem;font-weight:900} .rsrch-lens-visual>i{position:absolute;width:48px;height:48px;border:2px solid var(--blue2);border-radius:12px;animation:rsrchOrbit 6s linear infinite} .rsrch-lens-visual>i:nth-of-type(2){animation-delay:-1.5s}.rsrch-lens-visual>i:nth-of-type(3){animation-delay:-3s}.rsrch-lens-visual>i:nth-of-type(4){animation-delay:-4.5s} .rsrch-lens-visual.governance>span{background:#6d2637}.rsrch-lens-visual.action>span{background:var(--blue);color:#03101e} @keyframes rsrchOrbit{from{transform:rotate(0) translateX(112px) rotate(0)}to{transform:rotate(360deg) translateX(112px) rotate(-360deg)}} .informed-hero{padding:42px 0 62px} .informed-cadence{display:flex;gap:9px;flex-wrap:wrap;margin-top:26px} .informed-cadence span{padding:7px 11px;border:1px solid var(--line);border-radius:999px;color:var(--blue2);font-size:.78rem;font-weight:800} .informed-signup{padding:90px 0;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(8,19,32,.72),rgba(3,7,13,.5))} .informed-signup-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:54px;align-items:start} .informed-signup-copy h2,.informed-benefits .section-head h2{font-size:clamp(2rem,4vw,3.5rem);line-height:1.06;letter-spacing:-.04em;margin:12px 0} .informed-signup-copy>p{color:var(--muted);max-width:66ch} .informed-choices{display:flex;gap:9px;flex-wrap:wrap;margin:24px 0 10px} .informed-choices label{cursor:pointer}.informed-choices input{position:absolute;opacity:0;pointer-events:none} .informed-choices span{display:block;padding:9px 13px;border:1px solid var(--line);border-radius:999px;color:var(--muted);font-size:.84rem;font-weight:800;transition:background .2s,border-color .2s,color .2s} .informed-choices input:checked+span{background:var(--blue);border-color:var(--blue);color:#03101e} .informed-choices input:focus-visible+span{outline:2px solid var(--ice);outline-offset:3px} .informed-selection{color:var(--blue2)!important;font-size:.8rem} .informed-form{margin:0}.informed-form .btn{margin-top:8px} .informed-benefits{padding:90px 0} .informed-benefit-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .informed-benefit-grid article{padding:24px;border-top:3px solid #ef4055;background:linear-gradient(160deg,rgba(18,34,55,.78),rgba(5,10,17,.78));min-height:225px} .informed-benefit-grid article>b{color:#ef4055;font-size:.78rem}.informed-benefit-grid h3{margin:16px 0 9px;line-height:1.18}.informed-benefit-grid p{margin:0;color:var(--muted);font-size:.88rem} @media(max-width:940px){.rsrch-hero-grid,.informed-hero-grid,.rsrch-lens-stage,.informed-signup-grid{grid-template-columns:1fr}.rsrch-hero-art,.informed-hero-art{max-width:760px}.informed-benefit-grid{grid-template-columns:1fr 1fr}} @media(max-width:620px){.rsrch-hero-redesign,.informed-hero{padding-top:28px}.rsrch-hero-art,.informed-hero-art{border-radius:16px}.rsrch-lens-stage{padding:20px}.rsrch-lens-visual{height:230px}.informed-benefit-grid{grid-template-columns:1fr}.rsrch-hero-actions .btn{width:100%}} @media(prefers-reduced-motion:reduce){.rsrch-live-dot,.rsrch-lens-visual>i{animation:none}} .diag-logo-panel{max-width:420px} .diag-results-head{margin-top:56px} .diag-style-probe{position:absolute;left:-9999px} .item-topic.diag-fail{border-color:#ff6b6b;color:#ff6b6b} .item-topic.diag-pass{border-color:#3ddc97;color:#3ddc97} .diag-detail{word-break:break-all} /* ===================================================================== MONDAY 2026-08-17: progressive platform polish Keeps the existing layout and component architecture while improving native controls, mobile interaction, rendering, and video presentation. ===================================================================== */ :root{color-scheme:dark} html{-webkit-text-size-adjust:100%;text-size-adjust:100%;scrollbar-gutter:stable} body{min-height:100vh;min-height:100svh} button,input,select,textarea{font:inherit} button,.btn,[role="button"],input[type="button"],input[type="submit"]{touch-action:manipulation} a,button,input,select,textarea,video{-webkit-tap-highlight-color:transparent} :where(a,button,input,select,textarea,[role="button"]):focus-visible{ outline:3px solid #7ad8ff;outline-offset:3px } input,select,textarea{min-height:44px} textarea{field-sizing:content;min-height:7rem} img,video{max-width:100%} .video-native{ width:100%;height:100%;aspect-ratio:16/9;object-fit:cover;display:block; border-radius:inherit;border:0;background:#02050a } .lead-video,.brief-video .video-frame{overflow:hidden;background:#02050a} .lead-video{max-width:920px;border:1px solid var(--line);border-radius:var(--r-lg)} .lead-video .video-native{border-radius:0} .lead-video .watch-eyebrow,.lead-video .lead-video-cap{display:block;padding-inline:14px} .lead-video .watch-eyebrow{padding-top:11px;padding-bottom:9px;background:#06101b} .lead-video .lead-video-cap{margin:0;padding-top:9px;padding-bottom:11px;background:#06101b} .brief-video .video-frame{border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow)} .brief-video .video-native{border-radius:17px} .rsrch-verify-sec{padding:80px 0;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(6,15,26,.8),rgba(3,7,13,.92))} .rsrch-verification{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-top:28px} .rsrch-verify-card{position:relative;min-height:230px;padding:26px 22px;border:1px solid rgba(101,199,255,.22);border-radius:18px;background:linear-gradient(155deg,rgba(16,36,61,.9),rgba(5,11,19,.94));overflow:hidden} .rsrch-verify-card::after{content:"";position:absolute;inset:auto -25% -60% 20%;height:150px;background:radial-gradient(circle,rgba(49,140,255,.2),transparent 68%);pointer-events:none} .rsrch-verify-num{display:inline-grid;place-items:center;width:38px;height:38px;border-radius:10px;background:#ef4055;color:#fff;font:800 .78rem var(--display);letter-spacing:.06em} .rsrch-verify-label{margin:24px 0 10px;font-size:1.1rem} .rsrch-verify-text,.rsrch-limitations{color:var(--muted);line-height:1.65} .rsrch-limitations{margin:22px 0 0;padding:17px 19px;border-left:3px solid #65c7ff;background:rgba(8,19,32,.62);font-size:.88rem} .rsrch-media-sec{padding:76px 0;border-top:1px solid var(--line);background:linear-gradient(180deg,rgba(5,12,21,.74),rgba(2,7,13,.96))} .rsrch-media-grid{display:grid;grid-template-columns:1fr 1fr;gap:18px;margin-top:28px} .rsrch-media-grid figure{margin:0;overflow:hidden;border:1px solid rgba(101,199,255,.2);border-radius:19px;background:#07111c;box-shadow:0 24px 60px -42px rgba(49,140,255,.72)} .rsrch-media-grid img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover} .rsrch-media-grid figcaption{padding:17px 19px;color:var(--muted);font-size:.88rem;line-height:1.55} .rsrch-media-grid figcaption b{display:block;margin-bottom:4px;color:#eff8ff;font-family:var(--display);font-size:.98rem} .rsrch-media-note{margin:13px 0 0;color:var(--muted2);font-size:.72rem} @supports (text-wrap:balance){h1,h2,h3,.lead-title,.wa-title{text-wrap:balance}} @supports (content-visibility:auto){ main>section:nth-of-type(n+4){content-visibility:auto;contain-intrinsic-size:auto 760px} } @media(pointer:coarse){ .btn,.chip,.vlib-filter,.rsrch-lens-tab,.nav-links a{min-height:48px} .vlib-card,.vrel-card{touch-action:manipulation} } @media(max-width:940px){.rsrch-verification{grid-template-columns:1fr 1fr}} @media(max-width:620px){ .rsrch-verification{grid-template-columns:1fr} .rsrch-media-grid{grid-template-columns:1fr} .rsrch-verify-sec{padding:54px 0} .rsrch-verify-card{min-height:0} .lead-video{width:calc(100% + 24px);margin-left:-12px;border-radius:14px} } @media(prefers-reduced-motion:reduce){ html{scroll-behavior:auto} *,*::before,*::after{scroll-behavior:auto!important;animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important} } /* August 24: self-hosted motion brief and subtle About portrait motion */ .brief-native-frame{aspect-ratio:16/9;background:#02060b;overflow:hidden;cursor:default!important} .brief-native-frame::before{display:none} .brief-native-video{position:relative;z-index:1;display:block;width:100%;height:100%;object-fit:contain;background:#02060b;touch-action:manipulation} .about-photo-animated{position:relative;isolation:isolate} .about-photo-animated::before{ content:"";position:absolute;z-index:0;inset:-12px;border-radius:24px; background:conic-gradient(from 0deg,transparent 0 18%,rgba(49,140,255,.52) 30%,transparent 43% 68%,rgba(101,169,255,.34) 80%,transparent 92%); filter:blur(13px);opacity:.36;transform:rotate(0deg); animation:aboutPortraitOrbit 12s linear infinite;animation-play-state:paused;pointer-events:none } .about-photo-animated picture{ z-index:1;animation:aboutPortraitFloat 6.5s cubic-bezier(.45,0,.25,1) infinite; animation-play-state:paused;will-change:transform } .about-photo-animated picture::after{ content:"";position:absolute;z-index:2;inset:-35% -70%;pointer-events:none; background:linear-gradient(105deg,transparent 38%,rgba(184,224,255,.04) 46%,rgba(184,224,255,.24) 50%,rgba(184,224,255,.04) 54%,transparent 62%); transform:translateX(-62%) rotate(4deg);animation:aboutPortraitSheen 7.5s ease-in-out infinite;animation-play-state:paused } html:not(.mo) .about-photo-animated::before, html:not(.mo) .about-photo-animated picture, html:not(.mo) .about-photo-animated picture::after, .about-grid>div.in .about-photo-animated::before, .about-grid>div.in .about-photo-animated picture, .about-grid>div.in .about-photo-animated picture::after{animation-play-state:running} @keyframes aboutPortraitFloat{0%,100%{transform:translate3d(0,0,0) scale(1)}50%{transform:translate3d(0,-7px,0) scale(1.012)}} @keyframes aboutPortraitOrbit{to{transform:rotate(360deg)}} @keyframes aboutPortraitSheen{0%,22%{transform:translateX(-62%) rotate(4deg);opacity:0}36%{opacity:.8}52%,100%{transform:translateX(62%) rotate(4deg);opacity:0}} @media(prefers-reduced-motion:reduce){ .about-photo-animated::before,.about-photo-animated picture,.about-photo-animated picture::after{animation:none!important;transform:none!important} } /* August 27: live five-pillar signal cards */ .pillar-current-signal{padding:0 0 74px;background:linear-gradient(180deg,rgba(3,8,14,.96),rgba(5,13,23,.98))} .pillar-current-signal article{position:relative;overflow:hidden;padding:34px 38px;border:1px solid rgba(101,199,255,.27);border-radius:22px;background:linear-gradient(140deg,rgba(14,34,58,.96),rgba(5,12,21,.98));box-shadow:0 28px 80px -52px rgba(49,140,255,.85)} .pillar-current-signal article::after{content:"";position:absolute;right:-110px;top:-140px;width:330px;height:330px;border-radius:50%;background:radial-gradient(circle,rgba(49,140,255,.26),transparent 68%);pointer-events:none} .pillar-current-signal h2{max-width:850px;margin:12px 0 13px;font-size:clamp(1.55rem,3vw,2.55rem)} .pillar-current-signal p{max-width:880px;color:var(--muted);line-height:1.68} .pillar-current-signal strong{color:#eff8ff} .pillar-current-signal .text-link{display:inline-block;margin-top:7px;font-weight:800} .informed-channel-grid article{min-height:245px} @media(max-width:620px){.pillar-current-signal{padding-bottom:52px}.pillar-current-signal article{padding:27px 23px}} /* ================================================================ EDITORIAL READER LOOP Native progress, reading time, direct share links, and one next read. Loaded only by article, feature-reader, and Daily Brief templates. ================================================================ */ .reader-progress{ position:fixed;inset:0 0 auto 0;z-index:1600;width:100%;height:3px; border:0;border-radius:0;appearance:none;-webkit-appearance:none; background:transparent;pointer-events:none;color:var(--blue2) } /* August 28: strategic intelligence brief */ .intel-summary { margin: 0 0 1.4rem; padding: 1.15rem 1.25rem; border: 1px solid rgba(101,199,255,.22); border-left: 4px solid #65c7ff; border-radius: 14px; background: linear-gradient(135deg, rgba(32,100,165,.16), rgba(4,10,18,.82)); font-size: 1.05rem; } .intel-core { margin-top: 1.8rem; } .intel-core > h4, .intel-matrix-wrap > h4 { margin: 0 0 1rem; color: #fff; font-size: clamp(1.25rem, 2.2vw, 1.7rem); letter-spacing: -.025em; } .intel-patterns { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .9rem; } .intel-pattern { padding: 1rem; border: 1px solid rgba(255,255,255,.1); border-radius: 14px; background: rgba(255,255,255,.035); } .intel-pattern h5 { margin: 0 0 .65rem; color: #9fd8ff; font-size: 1rem; line-height: 1.25; } .intel-pattern ul { margin: 0; padding-left: 1.1rem; } .intel-pattern li { margin: .45rem 0; color: var(--muted); line-height: 1.55; } .intel-matrix-wrap { margin-top: 1.8rem; } .intel-table-scroll { overflow-x: auto; border: 1px solid rgba(255,255,255,.11); border-radius: 14px; background: rgba(3,8,15,.7); } .intel-matrix { width: 100%; min-width: 780px; border-collapse: collapse; text-align: left; } .intel-matrix th, .intel-matrix td { padding: .85rem .9rem; border-bottom: 1px solid rgba(255,255,255,.085); vertical-align: top; line-height: 1.45; } .intel-matrix th { color: #c8ecff; background: rgba(49,140,255,.11); font-size: .78rem; letter-spacing: .05em; text-transform: uppercase; } .intel-matrix td { color: #dce7f3; font-size: .9rem; } .intel-matrix tr:last-child td { border-bottom: 0; } .intel-threat { display: inline-flex; padding: .22rem .52rem; border: 1px solid currentColor; border-radius: 999px; font-size: .72rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; } .intel-threat.critical { color: #ff7474; } .intel-threat.high { color: #ffb35c; } .intel-threat.medium { color: #e4d56c; } .intel-takeaway { margin-top: 1.35rem; padding: 1.15rem 1.25rem; border-radius: 14px; background: linear-gradient(120deg, rgba(49,140,255,.18), rgba(101,199,255,.08)); color: #f3f8ff; } .intel-takeaway strong { color: #65c7ff; } @media (max-width: 860px) { .intel-patterns { grid-template-columns: 1fr; } } .reader-progress::-webkit-progress-bar{background:transparent} .reader-progress::-webkit-progress-value{background:linear-gradient(90deg,#35a7ff,#8f67ff);box-shadow:0 0 14px rgba(53,167,255,.65)} .reader-progress::-moz-progress-bar{background:linear-gradient(90deg,#35a7ff,#8f67ff);box-shadow:0 0 14px rgba(53,167,255,.65)} .reader-loop{padding:26px 24px 86px} .reader-loop-inner{ max-width:1120px;margin:0 auto;padding:clamp(24px,4vw,42px); display:grid;grid-template-columns:minmax(0,1.55fr) minmax(240px,.75fr); gap:clamp(24px,5vw,64px);align-items:center; border:1px solid rgba(101,169,255,.28);border-radius:24px; background: radial-gradient(circle at 88% 18%,rgba(143,103,255,.17),transparent 34%), linear-gradient(145deg,rgba(12,22,38,.96),rgba(5,9,16,.98)); box-shadow:0 24px 72px rgba(0,0,0,.32) } .reader-loop-meta{display:flex;align-items:center;gap:10px;margin:0 0 16px;color:#a9bad0;font-size:.78rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase} .reader-loop-label{padding-right:10px;border-right:1px solid rgba(255,255,255,.2)} .reader-time{color:#73c9ff} .reader-loop-eyebrow{margin:0 0 8px;color:#9e8bff;font-size:.75rem;font-weight:900;letter-spacing:.15em;text-transform:uppercase} .reader-loop h2{margin:0 0 12px;font-size:clamp(1.45rem,2.6vw,2.25rem);line-height:1.08;letter-spacing:-.04em} .reader-loop-text{max-width:680px;margin:0 0 22px;color:var(--muted);line-height:1.68} .reader-next-link{display:inline-flex;width:auto} .reader-share{padding:22px;border:1px solid rgba(255,255,255,.1);border-radius:18px;background:rgba(255,255,255,.035)} .reader-share-title{margin:0 0 12px;color:var(--ink);font-weight:850} .reader-share-actions{display:flex;flex-wrap:wrap;gap:8px} .reader-share-button{ appearance:none;border:1px solid rgba(133,190,255,.28);border-radius:999px; padding:9px 13px;background:rgba(14,27,45,.9);color:#dcecff; font:inherit;font-size:.8rem;font-weight:800;line-height:1;cursor:pointer;text-decoration:none } .reader-share-button:hover,.reader-share-button:focus-visible{border-color:#63baff;background:rgba(43,104,170,.25);color:#fff;outline:none} .reader-share-status{display:block;min-height:1.2em;margin-top:10px;color:#70d5a7;font-size:.78rem;font-weight:800} .reader-copy-fallback{position:fixed;left:-10000px;top:auto;width:1px;height:1px;opacity:0} @media (max-width:760px){ .reader-loop{padding:18px 16px 64px} .reader-loop-inner{grid-template-columns:1fr;padding:24px;border-radius:18px} .reader-share{padding:18px} } @media print{ .reader-progress,.reader-loop{display:none!important} } /* September 1 link-ready video slots */ .sep1-video-slot{display:grid;place-items:center;min-height:320px;padding:34px;text-align:center;border:1px solid rgba(255,255,255,.12);background:radial-gradient(circle at 20% 0%,rgba(49,140,255,.16),transparent 45%),#080d15}.sep1-video-slot-inner{max-width:720px}.sep1-video-slot h3{margin:.45rem 0 .65rem;font-size:clamp(1.35rem,2.7vw,2rem)}.sep1-video-slot p{color:var(--muted,#aab5c4);max-width:62ch;margin:0 auto} /* Performance sweep 2026-09-01: do not initialize third-party video players until a viewer explicitly asks for them. */ .pv-stage-facade{position:relative;display:block;width:100%;padding:0;border:0;background:#05080d;cursor:pointer;overflow:hidden;aspect-ratio:16/9} .pv-stage-facade img{width:100%;height:100%;display:block;object-fit:cover} .pv-stage-play{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:grid;place-items:center;min-width:76px;height:48px;padding:0 18px;border-radius:999px;background:rgba(0,0,0,.78);color:#fff;font-weight:800;letter-spacing:.04em;box-shadow:0 8px 28px rgba(0,0,0,.35)} @supports (content-visibility:auto){.pv-section,.brief-body,.latest-research,.training-section,.video-library{content-visibility:auto;contain-intrinsic-size:1px 900px}} /* === 2026-09-02 EDITORIAL DESIGN SYSTEM ================================== Visual-only reset. Preserves DOM, routes, data hooks, controls and flow. Goal: independent technology publication, not glassmorphism / AI-template UI. ============================================================================ */ :root{--bg:#0b0d10;--panel:#111419;--panel2:#0e1115;--line:#2a3038;--blue:#4c8fd8;--blue2:#82afe0;--ice:#e7e9ec;--ink:#f2f3f5;--muted:#b0b5bc;--muted2:#858c95;--shadow:none;--r-sm:3px;--r-md:4px;--r-lg:5px;--r-xl:6px} body{background:#0b0d10;background-image:none;font-family:"Inter",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color:var(--ink)} body:before,body:after{display:none!important}.site-header,.topbar,.topic-strip{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background:#0b0d10!important}.site-header{border-bottom:1px solid #30363d}.hero,.alt-section,.subhero,.tc-masthead,.tc-stage-section,.tc-row-section,.tc-feature-section{background:none!important}.hero-logo-panel,.card,.video-card,.contact-form,.news-item,.pillar-signal,.brief-card,.research-card,.tc-stage,.tc-card,.tc-feature-card{background:#111419!important;background-image:none!important;box-shadow:none!important;border:1px solid #2a3038!important;border-radius:4px!important;filter:none!important}.hero-logo-panel,.hero-logo-panel img{animation:none!important;transform:none!important}.btn{background:#e8edf3!important;color:#0b0d10!important;border:1px solid #e8edf3!important;border-radius:3px!important;box-shadow:none!important;text-transform:none}.btn.secondary{background:transparent!important;color:#e8edf3!important;border-color:#4a515a!important}.eyebrow,.news-badge,.status-pill,.card-mark,.source-chip,.brief-live,.tc-badge,.tc-new-signal,.home-feature-pillars li,.article-pillar-list li{border-radius:2px!important;box-shadow:none!important;background:transparent!important}.card:hover,.news-item:hover,a.card:hover,.tc-card:hover{transform:none!important;border-color:#59636f!important}.section-head h2,.subhero h1,.hero h1,.tc-stage-title,.article-body h2{font-family:"Space Grotesk","Inter",sans-serif;letter-spacing:-.025em}.hero h1{font-weight:700}.section-head h2,.subhero h1{font-weight:650}.hero p,.section-head p,.news-item p,.card p,.article-body p{color:#b4bac2}.article-editorial-hero{margin:30px 0 26px;padding:34px 0;border-top:4px solid #e8edf3;border-bottom:1px solid #3a414a;display:grid;gap:12px}.article-editorial-hero span{font:700 .76rem/1 "Inter",sans-serif;letter-spacing:.18em;color:#82afe0}.article-editorial-hero strong{font:650 clamp(1.7rem,4vw,3.4rem)/1.02 "Space Grotesk","Inter",sans-serif;max-width:900px}.article-editorial-hero small{font-size:.86rem;color:#969da6;letter-spacing:.05em}.video-frame,.brief-native-video,.tc-video-live{border-radius:3px!important}.watch-eyebrow:before,.status-pill:before{box-shadow:none!important}.source-chip{padding:8px 10px}.nav-links a{border-radius:2px!important}.nav-links a:hover{background:#171b20!important}.ticker{background:#0e1115!important}.ticker *{text-shadow:none!important}.gradient-text{background:none!important;-webkit-text-fill-color:inherit!important;color:inherit!important}.glow,.orb,.ambient-glow{display:none!important}@media(max-width:720px){.nav-links{background:#0e1115!important;border-radius:3px!important}} .video-pending-card,.home-brief-pending{aspect-ratio:16/9;min-height:260px;background:#0e1115;border:1px solid #2a3038;display:flex;flex-direction:column;justify-content:flex-end;align-items:flex-start;padding:clamp(24px,5vw,54px);gap:10px}.video-pending-card span,.home-brief-pending span{font:700 .72rem/1 Inter,sans-serif;letter-spacing:.18em;color:#82afe0}.video-pending-card strong,.home-brief-pending strong{font:650 clamp(1.5rem,3vw,2.8rem)/1.05 "Space Grotesk",Inter,sans-serif;max-width:760px}.video-pending-card small,.home-brief-pending small{color:#969da6;font-size:.9rem}.brief-video-pending{background:none!important} /* 2026-09-02 Daily Brief native-video visibility hardening. Native MP4s must sit above the generic facade shimmer. */ .video-frame > .video-native{position:relative;z-index:2} .video-frame:has(> .video-native)::before{display:none!important} /* ====================================================================== 2026-09-02 PRACTICAL WEB ENHANCEMENTS Selective adoption only: accessibility, native CSS resilience, and interaction performance. No framework migration; no route/data-flow changes. ====================================================================== */ /* Keyboard navigation should be unmistakable without adding visual noise. */ .skip-link{ position:fixed;left:14px;top:10px;z-index:5000; transform:translateY(-180%);padding:10px 14px; background:#f2f3f5;color:#0b0d10;border:2px solid #0b0d10; border-radius:2px;font:700 .86rem/1.2 "Inter",sans-serif; transition:transform .14s ease } .skip-link:focus{transform:translateY(0)} :where(a,button,input,select,textarea,[tabindex]):focus-visible{ outline:3px solid #9bc8f3;outline-offset:3px } :where(a,button):focus:not(:focus-visible){outline:none} /* Improve text composition with native CSS while preserving the layout. */ @supports (text-wrap:pretty){ p,li,figcaption{ text-wrap:pretty } } /* Respect users who reduce transparency. The site's editorial header remains solid even if older component rules later reintroduce translucent surfaces. */ @media (prefers-reduced-transparency:reduce){ .site-header,.nav-links,.card,.video-card,.contact-form,.news-item, .reader-loop-inner,.reader-share{backdrop-filter:none!important;-webkit-backdrop-filter:none!important;background-color:#0b0d10!important} } /* Native component responsiveness: only the presentation changes. */ .video-card,.news-item,.card{container-type:inline-size} @container (max-width:320px){ .video-copy,.card,.news-item{padding:20px} .card h3,.video-copy h3{font-size:1rem} } /* Touch targets and INP-friendly interactions: no layout-changing hover work on coarse pointers, and compositor-only feedback on precise pointers. */ @media (hover:hover) and (pointer:fine){ .btn{transition:transform .14s ease,border-color .14s ease,background-color .14s ease} .btn:hover{transform:translateY(-1px)} .btn:active{transform:translateY(0)} } @media (hover:none),(pointer:coarse){ a,button,.btn,.source-chip,.reader-share-button{touch-action:manipulation} } @media (prefers-reduced-motion:reduce){ .skip-link,.btn{transition:none!important;transform:none!important} .skip-link{left:14px;top:-100px}.skip-link:focus{top:10px} } /* Accessible editorial links inside long-form copy. Navigation/card links stay visually unchanged so the existing information architecture is preserved. */ .article-body a:not(.btn),.brief-body a:not(.btn),.research-page a.text-link{ text-decoration:underline;text-decoration-thickness:.08em;text-underline-offset:.18em } /* 2026-09-03 feed access + current media reliability */ .feed-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.feed-card{border:1px solid var(--line,#2a3444);padding:24px;background:var(--panel,#111722)}.feed-card h3{margin:.35rem 0}.feed-card code{display:block;margin-top:14px;overflow-wrap:anywhere;font-size:.78rem;opacity:.72}.feed-type{font-size:.72rem;letter-spacing:.14em;text-transform:uppercase;font-weight:800}.brief-video .video-frame{position:relative}.brief-video .video-native{position:relative;z-index:3;display:block;width:100%;height:auto;background:#000}@media(max-width:720px){.feed-grid{grid-template-columns:1fr}} /* September 7 current video brief: wider desktop presentation */ @media (min-width: 980px){ .home-current-brief-video{max-width:1180px!important;width:min(1180px,96vw)!important;margin:28px auto 20px!important;} #weekend-preview{max-width:1120px!important;width:min(1120px,94vw)!important;} } .home-current-brief-video .video-frame{aspect-ratio:16/9;} /* B3 SEP 9 FEATURE MOTION — scoped to existing Featured Article architecture */ .feature-native-motion{margin:0;border-radius:22px;overflow:hidden;background:#02060b;box-shadow:0 20px 60px rgba(0,0,0,.34);border:1px solid rgba(255,255,255,.1)} .feature-native-motion video{display:block;width:100%;height:auto;aspect-ratio:16/9;object-fit:cover;background:#02060b} .feature-native-motion figcaption{padding:.78rem 1rem;color:rgba(255,255,255,.72);font-size:.84rem;letter-spacing:.02em;background:rgba(5,8,13,.96)} .feature-motion-section .brief-video-head{max-width:780px} .home-feature-motion video{min-height:100%;object-fit:cover} .home-feature-motion{align-self:stretch} @media (max-width:760px){.feature-native-motion{border-radius:16px}.feature-native-motion figcaption{font-size:.76rem}} /* Sep 10 YouTube-ready video placeholder */ .sep10-video-placeholder{min-height:220px;display:grid;place-content:center;gap:.55rem;text-align:center;padding:2rem;border:1px solid rgba(255,255,255,.14);border-radius:18px;background:rgba(8,16,28,.72)}.sep10-video-placeholder strong{font-size:clamp(1.2rem,2.4vw,2rem)}.sep10-video-placeholder span{opacity:.72} /* Sep 10 Daily Brief — professional YouTube autoplay integration */ .sep10-youtube-pro{max-width:1120px;margin:24px auto 18px;border:1px solid rgba(255,255,255,.12);border-radius:18px;overflow:hidden;background:#05080d;box-shadow:0 22px 60px rgba(0,0,0,.34)} .sep10-youtube-stage{position:relative;aspect-ratio:16/9;background:#000} .sep10-youtube-iframe{position:absolute;inset:0;width:100%;height:100%;border:0;display:block;background:#000} .sep10-sound-toggle{position:absolute;left:14px;bottom:14px;z-index:4;display:inline-flex;align-items:center;gap:.55rem;padding:.62rem .82rem;border:1px solid rgba(255,255,255,.30);border-radius:999px;background:rgba(6,10,16,.82);color:#fff;font:700 .76rem/1 Inter,system-ui,sans-serif;letter-spacing:.04em;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.28)} .sep10-sound-toggle:hover,.sep10-sound-toggle:focus-visible{background:rgba(20,28,40,.94);border-color:rgba(255,255,255,.55);outline:none} .sep10-sound-toggle.is-on{background:rgba(10,45,28,.9)} .sep10-sound-dot{width:.56rem;height:.56rem;border-radius:50%;background:#f3f6f9;box-shadow:0 0 0 4px rgba(255,255,255,.10)} .sep10-youtube-caption{display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:.72rem .95rem;background:#07101a;color:#b8c0ca;font-size:.78rem;line-height:1.35} .sep10-youtube-caption strong{color:#f4f7fa;font-size:.8rem;letter-spacing:.01em} @media(max-width:720px){.sep10-youtube-pro{border-radius:12px;margin:18px -12px 16px}.sep10-sound-toggle{left:10px;bottom:10px;padding:.58rem .72rem}.sep10-youtube-caption{align-items:flex-start;flex-direction:column;gap:.25rem;padding:.65rem .78rem}.sep10-youtube-caption span{font-size:.72rem}} /* September 11 attack desk */ .sep11-attack-visual{overflow:hidden;border-radius:20px;background:#0b1018}.sep11-attack-visual img{display:block;width:100%;max-height:620px;object-fit:cover}.sep11-attack-visual figcaption{display:flex;flex-direction:column;gap:.3rem;padding:1rem 1.2rem}.sep11-attack-cards{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:18px 0}.sep11-attack-cards article{padding:18px;border:1px solid rgba(255,255,255,.12);border-radius:14px}.sep11-attack-cards strong{display:block;font-size:1.55rem}.sep11-attack-cards span{display:block;margin-top:6px;opacity:.78}.sep11-audio{width:100%;margin-top:10px}.sep11-music-note{font-size:.82rem;opacity:.65}@media(max-width:760px){.sep11-attack-cards{grid-template-columns:1fr}.sep11-attack-visual img{max-height:420px}} /* September 11 native major-cyberattacks motion */ .sep11-motion-stage{position:relative;aspect-ratio:16/9;background:#050608;overflow:hidden;border-radius:18px}.sep11-motion-stage video{width:100%;height:100%;display:block;object-fit:cover}.sep11-sound-toggle{position:absolute;right:18px;bottom:18px;z-index:3;border:1px solid rgba(255,255,255,.45);background:rgba(7,8,10,.82);color:#fff;border-radius:999px;padding:10px 16px;font-weight:700;backdrop-filter:blur(8px);cursor:pointer}.sep11-motion-native figcaption{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap;margin-top:10px}.sep11-motion-native figcaption span{opacity:.78}@media(max-width:680px){.sep11-sound-toggle{right:10px;bottom:10px;padding:8px 12px}.sep11-motion-native figcaption{display:block}.sep11-motion-native figcaption span{display:block;margin-top:4px}} /* September 12 research graphics correction */ .rsrch-stats{align-items:stretch} .rsrch-stat{ background: radial-gradient(circle at 92% 10%,rgba(49,140,255,.14),transparent 34%), linear-gradient(145deg,rgba(12,27,46,.94),rgba(5,11,19,.96)); min-height:190px; } .rsrch-stat-num{font-size:clamp(2.2rem,5vw,3.35rem)} .rsrch-stat-label{max-width:26ch} .rsrch-bar-track{height:18px} .rsrch-bar-fill{min-width:3px} .rsrch-donut-fallback{ width:220px;height:220px;margin:0 auto;border-radius:50%; display:flex;flex-direction:column;align-items:center;justify-content:center; background: radial-gradient(circle at center,#07111c 0 49%,transparent 50%), conic-gradient(#318cff 0 17%,#65c7ff 17% 34%,#9fd8ff 34% 51%,#7b8cff 51% 68%,#5a7fbf 68% 84%,#2a5aa0 84% 100%); box-shadow:0 24px 65px -40px rgba(49,140,255,.9) } .rsrch-donut-fallback .rsrch-donut-big{font-size:2.5rem} .rsrch-donut-fallback .rsrch-donut-small{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em} .rsrch-media-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .rsrch-media-grid figure{min-width:0} .rsrch-media-grid img{aspect-ratio:16/10} .rsrch-media-grid figcaption{min-height:155px} .rsrch-media-grid figcaption b{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#8fc0ff} .rsrch-legend .rsrch-leg-item:nth-child(1) .rsrch-leg-dot{background:#318cff} .rsrch-legend .rsrch-leg-item:nth-child(2) .rsrch-leg-dot{background:#65c7ff} .rsrch-legend .rsrch-leg-item:nth-child(3) .rsrch-leg-dot{background:#9fd8ff} .rsrch-legend .rsrch-leg-item:nth-child(4) .rsrch-leg-dot{background:#7b8cff} .rsrch-legend .rsrch-leg-item:nth-child(5) .rsrch-leg-dot{background:#5a7fbf} .rsrch-legend .rsrch-leg-item:nth-child(6) .rsrch-leg-dot{background:#2a5aa0} @media(max-width:980px){.rsrch-media-grid{grid-template-columns:1fr 1fr}} @media(max-width:620px){.rsrch-media-grid{grid-template-columns:1fr}.rsrch-media-grid figcaption{min-height:0}} .rp-stat-note{margin-top:10px;padding-top:10px;border-top:1px solid var(--line);color:var(--muted2);font-size:.8rem;line-height:1.45} /* September 12 research graphics correction v2 */ .rsrch-stats{align-items:stretch} .rsrch-stat{min-height:190px;background:radial-gradient(circle at 92% 10%,rgba(49,140,255,.14),transparent 34%),linear-gradient(145deg,rgba(12,27,46,.94),rgba(5,11,19,.96))} .rsrch-stat-num{font-size:clamp(2.2rem,5vw,3.35rem)} .rsrch-stat-label{max-width:28ch} .rsrch-bar-track{height:18px} .rsrch-donut-fallback{width:220px;height:220px;margin:0 auto;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;background:radial-gradient(circle at center,#07111c 0 49%,transparent 50%),conic-gradient(#318cff 0 17%,#65c7ff 17% 34%,#9fd8ff 34% 51%,#7b8cff 51% 68%,#5a7fbf 68% 84%,#2a5aa0 84% 100%);box-shadow:0 24px 65px -40px rgba(49,140,255,.9)} .rsrch-donut-fallback .rsrch-donut-big{font-size:2.5rem} .rsrch-donut-fallback .rsrch-donut-small{font-size:.85rem;text-transform:uppercase;letter-spacing:.08em} .rsrch-media-grid{grid-template-columns:repeat(3,minmax(0,1fr))} .rsrch-media-grid figure{min-width:0} .rsrch-media-grid img{aspect-ratio:16/10} .rsrch-media-grid figcaption{min-height:155px} .rsrch-media-grid figcaption b{font-size:.78rem;letter-spacing:.08em;text-transform:uppercase;color:#8fc0ff} .rsrch-legend .rsrch-leg-item:nth-child(1) .rsrch-leg-dot{background:#318cff} .rsrch-legend .rsrch-leg-item:nth-child(2) .rsrch-leg-dot{background:#65c7ff} .rsrch-legend .rsrch-leg-item:nth-child(3) .rsrch-leg-dot{background:#9fd8ff} .rsrch-legend .rsrch-leg-item:nth-child(4) .rsrch-leg-dot{background:#7b8cff} .rsrch-legend .rsrch-leg-item:nth-child(5) .rsrch-leg-dot{background:#5a7fbf} .rsrch-legend .rsrch-leg-item:nth-child(6) .rsrch-leg-dot{background:#2a5aa0} @media(max-width:980px){.rsrch-media-grid{grid-template-columns:1fr 1fr}} @media(max-width:620px){.rsrch-media-grid{grid-template-columns:1fr}.rsrch-media-grid figcaption{min-height:0}} /* 2026-09-16 YouTube Daily Brief: preserve native B3 16:9 motion-stage geometry */ .sep11-motion-stage iframe{position:absolute;inset:0;width:100%!important;height:100%!important;border:0;display:block}