/* ========================================================= PITOT INDEX — shared design system. "Light Terminal" register. A bright, commercial Bloomberg.com / CNBC.com web look: porcelain white ground, ink text, Signal-Red active accent, green/red movement, JetBrains-Mono numerics. Distinct from the Pitot Group site. Fraunces / Inter Tight / JetBrains Mono. ========================================================= */ :root{ /* Signal-Red active accent on a porcelain ground. */ --signal-red: #DA2433; /* active / alert / sweep / status / down */ --signal-red-dim: #B81C2C; --steel: #5A6472; --amber: #B07D1E; /* mid-band / premium emphasis */ --bg: #FAFBFC; /* porcelain page */ --bg-soft: #FFFFFF; /* panels / cards */ --bg-elev: #FFFFFF; --bg-elev2: #F1F3F6; --line: rgba(14, 17, 22, 0.10); --line-strong: rgba(14, 17, 22, 0.16); --line-glow: rgba(229, 39, 58, 0.28); --glow-red: rgba(229, 39, 58, 0.35); --text: #0E1116; /* ink */ --text-mute: #5A6472; --text-faint: #646C79; /* darkened for WCAG AA on white (~4.6:1) */ --accent: #DA2433; /* Signal Red — active / instrument */ --accent-deep: #B81C2C; --radar: #DA2433; --papaya: #DA2433; /* signal highlight (var name kept for code continuity) */ --papaya-deep: #B81C2C; --copper: #B07D1E; /* premium emphasis (amber) */ --up: #0B8043; /* movement up — green (darkened for AA on white) */ --down: #DA2433; /* movement down — Signal Red */ /* instrument lines (radar / grids) — ink on light, theme-swap point */ --inst-line: rgba(14, 17, 22, 0.16); --inst-line-faint: rgba(14, 17, 22, 0.07); --inst-line-strong: rgba(14, 17, 22, 0.34); --font-sans: "Inter Tight", "Inter", system-ui, -apple-system, "Helvetica Neue", Arial, sans-serif; --font-serif: 'Fraunces', Georgia, serif; --font-mono: "JetBrains Mono", "SFMono-Regular", Consolas, monospace; --pad: clamp(24px, 5vw, 64px); --ease: cubic-bezier(0.22, 0.61, 0.36, 1); /* rating bands — ink→amber→grey legibility ramp on white. all clear WCAG AA (~4.5:1) so score figures stay readable. green/red are reserved for MOVEMENT, never ratings. */ --aaa: #0E1116; /* ink */ --aa: #2B3A52; --a: #4B5563; --bbb: #94661A; /* amber (darkened for AA) */ --bb: #74500F; --b: #5C6573; /* steel */ --c: #6E7787; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: hidden; } body { font-size: 16px; line-height: 1.6; letter-spacing: -0.005em; min-height: 100vh; } a { color: inherit; text-decoration: none; } /* ----------------------------------------------------- focus & a11y */ :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 1px; } .btn, .chip, button, a { -webkit-tap-highlight-color: transparent; touch-action: manipulation; } input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; } em { font-family: var(--font-serif); font-style: italic; color: var(--accent); /* signal — red editorial emphasis on light */ letter-spacing: 0; } /* ambient — restrained red signal bloom on porcelain */ .ambient { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(1200px 700px at 82% -10%, rgba(229,39,58,0.05), transparent 60%), radial-gradient(900px 600px at 6% 108%, rgba(14,17,22,0.025), transparent 60%); } /* faint terminal scanline overlay — opt-in via */ body.scan::after { content: ""; position: fixed; inset: 0; z-index: 1; pointer-events: none; background: repeating-linear-gradient(0deg, rgba(14,17,22,0.025) 0 1px, transparent 1px 3px); mix-blend-mode: multiply; opacity: 0.6; } /* ----------------------------------------------------- mono label */ .mono { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--text-faint); } .eyebrow { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--text-faint); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before { content: ""; width: 26px; height: 1px; background: var(--accent); opacity: 0.7; } /* ----------------------------------------------------- navigation */ .nav { position: fixed; top: 0; left: 0; right: 0; z-index: 50; display: flex; align-items: center; justify-content: space-between; padding: 18px var(--pad); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); background: rgba(255, 255, 255, 0.82); border-bottom: 1px solid var(--line); transition: border-color 0.3s var(--ease), background 0.3s var(--ease); } .wordmark { display: inline-flex; align-items: baseline; gap: 8px; font-weight: 500; font-size: 16px; letter-spacing: 0.02em; } .wordmark .sub { color: var(--accent); font-weight: 400; } .wordmark .ring { width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid var(--accent); position: relative; align-self: center; margin-right: 4px; } .wordmark .ring::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--accent); } .nav-links { display: flex; gap: 26px; } .nav-links a { font-size: 13px; font-weight: 500; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); transition: color 0.3s var(--ease); position: relative; padding: 4px 0; } .nav-links a:hover { color: var(--text); } .nav-links a.is-current { color: var(--text); } .nav-links a.is-current::after { content: ""; position: absolute; left: 0; right: 0; bottom: -2px; height: 1px; background: var(--papaya); } @media (max-width: 760px) { .nav-links { display: none; } } /* ----------------------------------------------------- buttons */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-sans); font-size: 14px; font-weight: 500; letter-spacing: 0.02em; padding: 13px 24px; border-radius: 2px; cursor: pointer; border: 1px solid var(--accent); color: var(--text); background: transparent; transition: all 0.3s var(--ease); } .btn:hover { border-color: var(--papaya); color: var(--papaya); box-shadow: 0 6px 20px rgba(229,39,58,0.14); } .btn.solid { background: var(--accent); color: #FFFFFF; border-color: var(--accent); } .btn.solid:hover { background: var(--papaya-deep); border-color: var(--papaya-deep); color: #FFFFFF; box-shadow: 0 8px 24px rgba(229,39,58,0.28); } .btn[disabled], .btn.is-disabled { opacity: 0.4; cursor: not-allowed; pointer-events: none; } .link-arrow { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; letter-spacing: 0.01em; color: var(--accent); transition: gap 0.3s var(--ease), color 0.3s var(--ease); } .link-arrow:hover { color: var(--papaya); gap: 14px; } /* ----------------------------------------------------- layout */ section { padding: clamp(88px, 13vh, 160px) var(--pad); } .wrap { max-width: 1280px; margin: 0 auto; } .section-title { font-size: clamp(30px, 4.4vw, 56px); font-weight: 500; line-height: 1.05; letter-spacing: -0.03em; margin: 18px 0 0; } .lede { font-size: clamp(16px, 1.3vw, 19px); line-height: 1.6; color: var(--text-mute); max-width: 56ch; margin: 20px 0 0; } /* ----------------------------------------------------- footer */ .footer { border-top: 1px solid var(--line); padding: 64px var(--pad) 48px; display: flex; flex-wrap: wrap; gap: 40px; justify-content: space-between; align-items: flex-start; } .footer .f-brand { max-width: 320px; } .footer .f-brand p { color: var(--text-mute); font-size: 14px; margin: 12px 0 0; } .footer .f-cols { display: flex; gap: 56px; flex-wrap: wrap; } .footer h5 { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text-faint); font-weight: 500; margin: 0 0 14px; } .footer a { display: block; color: var(--text-mute); font-size: 14px; margin: 0 0 10px; transition: color 0.3s var(--ease); } .footer a:hover { color: var(--text); } .footer .f-base { width: 100%; margin-top: 36px; padding-top: 24px; border-top: 1px solid var(--line); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 12px; color: var(--text-faint); } /* ----------------------------------------------------- rating chips */ .rating { font-family: var(--font-mono); font-weight: 500; letter-spacing: 0.06em; } .rating.AAA, .rating.AA\+ { color: var(--aaa); } .rating.AA { color: var(--aa); } .rating.A { color: var(--a); } .rating.BBB { color: var(--bbb); } .rating.BB { color: var(--bb); } .rating.B { color: var(--b); } .rating.C { color: var(--c); } /* reveal-on-scroll */ .reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.8s var(--ease), transform 0.8s var(--ease); } .reveal.in { opacity: 1; transform: none; } /* ----------------------------------------------------- ticker (ARES-C style) */ .ticker { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 11px 0; background: rgba(241,243,246,0.9); } .ticker-track { display: inline-flex; white-space: nowrap; will-change: transform; animation: piTicker 60s linear infinite; } .ticker:hover .ticker-track { animation-play-state: paused; } @keyframes piTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } } .ti { display: inline-flex; align-items: center; gap: 8px; padding: 0 20px; font-family: var(--font-mono); font-size: 12.5px; } .ti .tb { color: var(--text); font-weight: 500; } .ti .ts { font-weight: 500; font-variant-numeric: tabular-nums; } .ti .sep { color: var(--text-faint); } /* movement chip */ .chg { font-family: var(--font-mono); font-size: 12px; font-variant-numeric: tabular-nums; } .chg.up { color: var(--up); } .chg.down { color: var(--down); } .chg.flat { color: var(--text-faint); } /* rating badge */ .badge { display: inline-block; font-family: var(--font-mono); font-size: 11px; font-weight: 500; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 2px; border: 1px solid currentColor; } /* status dot for in/out of top-10 */ .statdot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; vertical-align: middle; } .statdot.in { background: var(--up); box-shadow: 0 0 8px rgba(14,158,99,0.45); } .statdot.out { background: transparent; border: 1px solid var(--text-faint); } /* ----------------------------------------------------- live status strip (§4.7 + §4.1/4.2) */ .livestrip { display: inline-flex; align-items: center; gap: 16px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-mute); } .livestrip .seg { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .livestrip .seg.is-empty { display: none; } /* gated slots collapse when field absent */ .livestrip .val { color: var(--text); font-variant-numeric: tabular-nums; } @media (max-width: 920px) { .livestrip { display: none; } } .status-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--signal-red); box-shadow: 0 0 0 0 var(--glow-red); animation: pulseDot 2.4s ease-out infinite; } @keyframes pulseDot { 0% { box-shadow: 0 0 0 0 rgba(242,54,69,0.55); } 70% { box-shadow: 0 0 0 7px rgba(242,54,69,0); } 100% { box-shadow: 0 0 0 0 rgba(242,54,69,0); } } /* ----------------------------------------------------- count-up & stagger (§4.3/4.4) */ .countup { font-variant-numeric: tabular-nums; } /* width reserved by container, no CLS */ .stagger-row { opacity: 0; transform: translateY(6px); } .stagger-row.in { opacity: 1; transform: none; transition: opacity 0.45s var(--ease), transform 0.45s var(--ease); } .pbar { position: relative; height: 4px; border-radius: 2px; background: var(--line-strong); overflow: hidden; } .pbar > span { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: var(--accent); transition: width 0.7s var(--ease); } /* ----------------------------------------------------- shared AWACS radar (lifted from hero) */ .radar-stage { position: relative; aspect-ratio: 1; perspective: 1600px; } .radar-plane { position: absolute; inset: 0; margin: auto; width: 100%; transform: rotateX(14deg); transform-style: preserve-3d; } .radar-disc { width: 100%; height: 100%; display: block; overflow: visible; } .awacs-ring { fill: none; stroke: var(--inst-line); stroke-width: 1; } .awacs-ring.faint { stroke: var(--inst-line-faint); } .awacs-ring.dashed { stroke: var(--inst-line-faint); stroke-dasharray: 4 8; } .awacs-tick { stroke: var(--inst-line); stroke-width: 1; } .awacs-tick.major { stroke: var(--inst-line-strong); stroke-width: 1.4; } .awacs-bearing { font-family: var(--font-mono); font-size: 22px; letter-spacing: 0.16em; fill: var(--inst-line-strong); } .awacs-cross { stroke: var(--inst-line-faint); stroke-width: 1; stroke-dasharray: 2 12; } .awacs-core { fill: none; stroke: var(--signal-red); stroke-width: 1.5; filter: drop-shadow(0 0 4px var(--glow-red)); } .awacs-core-dot { fill: var(--signal-red); filter: drop-shadow(0 0 4px var(--glow-red)); } .awacs-sweep-group { transform-origin: 600px 600px; animation: awacsSweep 16s linear infinite; } .awacs-sweep-wedge { fill: url(#awacsSweepGrad); opacity: 0.9; } .awacs-sweep-lead { stroke: var(--signal-red); stroke-width: 1.5; stroke-dasharray: 3 6; filter: drop-shadow(0 0 6px var(--glow-red)); } @keyframes awacsSweep { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .awacs-contact-rect { fill: none; stroke: var(--signal-red); stroke-width: 1.6; filter: drop-shadow(0 0 4px var(--glow-red)); } .awacs-contact-core { fill: var(--signal-red); filter: drop-shadow(0 0 6px var(--glow-red)); } .awacs-contact-echo { fill: none; stroke: var(--signal-red); stroke-width: 1.5; opacity: 0; transform-origin: 860px 440px; animation: awacsEcho 16s linear infinite; } @keyframes awacsEcho { 0% { transform: scale(1); opacity: 0; } 15% { transform: scale(1); opacity: 0; } 16.5% { transform: scale(1); opacity: 0.9; } 28% { transform: scale(7); opacity: 0; } 100% { transform: scale(1); opacity: 0; } } /* ----------------------------------------------------- salience × reputation scatter (gated) */ .scatter { position: relative; border: 1px solid var(--line); border-radius: 3px; background: var(--bg-soft); padding: 20px; } .scatter svg { display: block; width: 100%; height: auto; } .scatter .sc-axis { stroke: var(--line-strong); stroke-width: 1; } .scatter .sc-grid { stroke: var(--line); stroke-width: 1; } .scatter .sc-diag { stroke: var(--text-faint); stroke-width: 1; stroke-dasharray: 3 6; opacity: 0.5; } .scatter .sc-pt { fill: var(--accent); } .scatter .sc-lbl { font-family: var(--font-mono); font-size: 10px; fill: var(--text-mute); } .scatter .sc-empty { display: flex; align-items: center; justify-content: center; min-height: 240px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.06em; color: var(--text-faint); text-align: center; } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .ticker-track { animation: none; } .status-dot { animation: none; } .stagger-row { opacity: 1; transform: none; transition: none; } .awacs-sweep-group, .awacs-contact-echo { animation: none; } * { scroll-behavior: auto !important; } }