/* ========================================================== ATLAS MEDIA INTELLIGENCE PREMIUM LIVE DESK ========================================================== */ :root { --atlas-bg: #050505; --atlas-panel: #0b0b0b; --atlas-panel-2: #101010; --atlas-line: rgba(255,255,255,.11); --atlas-line-soft: rgba(255,255,255,.065); --atlas-gold: #c9a85d; --atlas-gold-bright: #e0bd68; --atlas-gold-soft: rgba(201,168,93,.13); --atlas-white: #f5f3ee; --atlas-muted: rgba(255,255,255,.55); --atlas-muted-2: rgba(255,255,255,.32); } /* ========================================================== HERO ========================================================== */ .atlas-intelligence-hero { position: relative !important; overflow: hidden !important; text-align: left !important; padding: 52px 34px 40px !important; background: radial-gradient( circle at 86% 10%, rgba(201,168,93,.10), transparent 33% ), linear-gradient( 180deg, #090909 0%, #050505 100% ) !important; border: 1px solid var(--atlas-line) !important; border-bottom: none !important; } .atlas-intelligence-hero::after { content: ""; position: absolute; right: -100px; top: -170px; width: 420px; height: 420px; border: 1px solid rgba(201,168,93,.12); border-radius: 50%; pointer-events: none; } .atlas-intelligence-hero .atlas-wordmark { margin: 0 0 28px !important; text-align: left !important; color: var(--atlas-gold-bright) !important; font-size: 52px !important; line-height: 1 !important; position: relative; z-index: 2; } .atlas-live-kicker { display: flex !important; align-items: center !important; gap: 9px !important; margin: 0 0 13px !important; color: var(--atlas-gold) !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: .18em !important; } .atlas-hero-live-dot { width: 7px !important; height: 7px !important; background: var(--atlas-gold-bright) !important; border-radius: 50% !important; box-shadow: 0 0 12px rgba(224,189,104,.5); animation: atlasHeroPulse 1.8s ease-in-out infinite !important; } @keyframes atlasHeroPulse { 0%,100% { opacity: .45; transform: scale(.86); } 50% { opacity: 1; transform: scale(1.08); } } .atlas-intelligence-hero h1 { max-width: 970px !important; margin: 0 !important; color: var(--atlas-white) !important; font-size: clamp(42px,5vw,72px) !important; font-weight: 650 !important; line-height: .98 !important; letter-spacing: -.055em !important; text-align: left !important; } .atlas-intelligence-hero > p { max-width: 680px !important; margin: 22px 0 0 !important; color: var(--atlas-muted) !important; font-size: 15px !important; line-height: 1.65 !important; text-align: left !important; } /* Hide old static four-column text strip */ .atlas-intelligence-strip { display: none !important; } /* ========================================================== MEDIA DESK WRAPPER ========================================================== */ .atlas-media-desk { margin: 0 !important; overflow: hidden !important; background: var(--atlas-bg) !important; border: 1px solid var(--atlas-line) !important; box-shadow: 0 20px 60px rgba(0,0,0,.35) !important; } /* ========================================================== LIVE STATUS BAR ========================================================== */ .atlas-media-statusbar { display: grid !important; grid-template-columns: auto 1fr auto !important; align-items: center !important; min-height: 42px !important; padding: 0 16px !important; background: linear-gradient( 90deg, rgba(201,168,93,.10), rgba(201,168,93,.025) 30%, transparent ) !important; border-bottom: 1px solid rgba(201,168,93,.22) !important; } .atlas-media-live { display: flex !important; align-items: center !important; gap: 8px !important; color: var(--atlas-gold-bright) !important; font-size: 9px !important; font-weight: 800 !important; letter-spacing: .16em !important; } .atlas-media-live-dot { width: 7px !important; height: 7px !important; border-radius: 50% !important; background: var(--atlas-gold-bright) !important; box-shadow: 0 0 12px rgba(224,189,104,.6) !important; animation: atlasLivePulse 1.5s ease-in-out infinite !important; } @keyframes atlasLivePulse { 0%,100% { opacity: .45; } 50% { opacity: 1; } } .atlas-media-status-text { padding-left: 24px !important; color: rgba(255,255,255,.42) !important; font-size: 9px !important; font-weight: 650 !important; letter-spacing: .11em !important; } .atlas-media-updated { color: rgba(255,255,255,.56) !important; font-size: 9px !important; font-weight: 700 !important; letter-spacing: .08em !important; } /* ========================================================== SIGNAL WIRE ========================================================== */ .atlas-signal-tape { display: grid !important; grid-template-columns: 130px minmax(0,1fr) !important; height: 44px !important; overflow: hidden !important; background: #090909 !important; border-bottom: 1px solid var(--atlas-line) !important; } .atlas-signal-tape-label { position: relative !important; z-index: 5 !important; display: flex !important; align-items: center !important; gap: 8px !important; padding: 0 15px !important; background: #11100d !important; border-right: 1px solid rgba(201,168,93,.30) !important; color: var(--atlas-gold-bright) !important; font-size: 9px !important; font-weight: 800 !important; letter-spacing: .14em !important; } .atlas-tape-dot { width: 6px !important; height: 6px !important; flex: 0 0 auto !important; border-radius: 50% !important; background: var(--atlas-gold-bright) !important; box-shadow: 0 0 10px rgba(224,189,104,.65) !important; } .atlas-signal-tape-window { width: 100% !important; overflow: hidden !important; display: flex !important; align-items: center !important; } .atlas-signal-tape-track { display: flex !important; align-items: center !important; width: max-content !important; white-space: nowrap !important; animation: atlasTicker 65s linear infinite !important; } .atlas-signal-tape-window:hover .atlas-signal-tape-track { animation-play-state: paused !important; } @keyframes atlasTicker { from { transform: translateX(0); } to { transform: translateX(-50%); } } .atlas-tape-item { display: inline-flex !important; align-items: center !important; gap: 9px !important; height: 44px !important; padding: 0 28px !important; border-right: 1px solid var(--atlas-line-soft) !important; color: rgba(255,255,255,.70) !important; font-size: 10px !important; line-height: 44px !important; } .atlas-tape-location { color: #fff !important; font-weight: 800 !important; text-transform: uppercase !important; letter-spacing: .06em !important; } .atlas-tape-divider { color: rgba(255,255,255,.20) !important; } .atlas-tape-category { color: var(--atlas-gold) !important; font-weight: 750 !important; text-transform: uppercase !important; } .atlas-tape-headline { color: rgba(255,255,255,.67) !important; } /* ========================================================== MAIN EDITORIAL GRID ========================================================== */ .atlas-media-grid { display: grid !important; grid-template-columns: minmax(0,2.15fr) minmax(320px,.85fr) !important; min-height: 410px !important; background: linear-gradient( 135deg, rgba(255,255,255,.018), transparent 52% ) !important; } /* ========================================================== LEAD STORY ========================================================== */ .atlas-lead-story { position: relative !important; padding: 34px 42px 38px !important; border-right: 1px solid var(--atlas-line) !important; background: radial-gradient( circle at 70% 0%, rgba(201,168,93,.055), transparent 40% ) !important; } .atlas-media-eyebrow { display: inline-flex !important; padding: 6px 9px !important; background: var(--atlas-gold-soft) !important; border: 1px solid rgba(201,168,93,.25) !important; color: var(--atlas-gold-bright) !important; font-size: 9px !important; font-weight: 800 !important; letter-spacing: .15em !important; } .atlas-lead-location { margin: 38px 0 0 !important; color: rgba(255,255,255,.42) !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: .13em !important; } .atlas-lead-story h2 { max-width: 850px !important; margin: 11px 0 17px !important; color: #fff !important; font-size: clamp(34px,3.6vw,54px) !important; font-weight: 640 !important; line-height: 1.03 !important; letter-spacing: -.045em !important; } .atlas-lead-story p { max-width: 720px !important; margin: 0 !important; color: rgba(255,255,255,.60) !important; font-size: 14px !important; line-height: 1.62 !important; } .atlas-lead-meta { display: flex !important; gap: 8px !important; flex-wrap: wrap !important; margin-top: 28px !important; } .atlas-lead-meta span { padding: 6px 8px !important; border: 1px solid rgba(201,168,93,.26) !important; background: rgba(201,168,93,.055) !important; color: var(--atlas-gold) !important; font-size: 8px !important; font-weight: 800 !important; letter-spacing: .10em !important; } /* ========================================================== STORY RAIL ========================================================== */ .atlas-media-rail { display: grid !important; grid-template-rows: repeat(3,1fr) !important; background: #080808 !important; } .atlas-media-rail-story { position: relative !important; display: flex !important; flex-direction: column !important; justify-content: center !important; padding: 25px 25px !important; border-bottom: 1px solid var(--atlas-line) !important; overflow: hidden !important; transition: background .18s ease, padding-left .18s ease !important; } .atlas-media-rail-story:last-child { border-bottom: none !important; } .atlas-media-rail-story:hover { background: rgba(201,168,93,.055) !important; padding-left: 30px !important; } .atlas-media-rail-story::before { content: ""; position: absolute; left: 0; top: 20px; bottom: 20px; width: 3px; background: rgba(201,168,93,.28); } .atlas-media-rail-story:hover::before { background: var(--atlas-gold-bright); } .atlas-rail-label { color: var(--atlas-gold-bright) !important; font-size: 9px !important; font-weight: 800 !important; letter-spacing: .15em !important; } .atlas-media-rail-story h3 { margin: 10px 0 13px !important; color: #fff !important; font-size: 17px !important; line-height: 1.26 !important; font-weight: 620 !important; } .atlas-rail-meta { color: rgba(255,255,255,.38) !important; font-size: 8px !important; font-weight: 650 !important; letter-spacing: .07em !important; text-transform: uppercase !important; } /* ========================================================== LATEST INTELLIGENCE HEADER ========================================================== */ .atlas-latest-header { display: flex !important; align-items: center !important; justify-content: space-between !important; min-height: 52px !important; padding: 0 18px !important; background: #0a0a0a !important; border-top: 1px solid var(--atlas-line) !important; border-bottom: 1px solid var(--atlas-line) !important; } .atlas-latest-title { color: #fff !important; font-size: 11px !important; font-weight: 850 !important; letter-spacing: .13em !important; } .atlas-latest-live { margin-left: 10px !important; padding: 4px 7px !important; background: var(--atlas-gold-soft) !important; border: 1px solid rgba(201,168,93,.24) !important; color: var(--atlas-gold-bright) !important; font-size: 8px !important; font-weight: 800 !important; } .atlas-latest-source { color: rgba(255,255,255,.32) !important; font-size: 8px !important; letter-spacing: .11em !important; } /* ========================================================== WIRE FEED ROWS ========================================================== */ .atlas-latest-feed { display: block !important; background: #060606 !important; } .atlas-feed-row:not(.atlas-feed-loading) { display: none !important; } .atlas-wire-row { position: relative !important; display: grid !important; grid-template-columns: 58px 190px minmax(0,1fr) 85px !important; align-items: center !important; min-height: 72px !important; padding: 9px 18px !important; border-bottom: 1px solid var(--atlas-line-soft) !important; background: #070707 !important; transition: background .15s ease, transform .15s ease !important; } .atlas-wire-row:nth-child(even) { background: #090909 !important; } .atlas-wire-row:hover { background: #10100e !important; } .atlas-wire-row:hover::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--atlas-gold-bright); } .atlas-wire-rank { display: flex !important; align-items: center !important; gap: 8px !important; color: rgba(255,255,255,.25) !important; font-size: 10px !important; font-weight: 700 !important; } .atlas-wire-pulse { width: 7px !important; height: 7px !important; border-radius: 50% !important; background: rgba(201,168,93,.55) !important; box-shadow: 0 0 8px rgba(201,168,93,.25) !important; } .atlas-wire-row:nth-child(-n+3) .atlas-wire-pulse { background: var(--atlas-gold-bright) !important; box-shadow: 0 0 10px rgba(224,189,104,.50) !important; animation: atlasWirePulse 1.6s ease-in-out infinite !important; } @keyframes atlasWirePulse { 0%,100% { opacity: .35; } 50% { opacity: 1; } } .atlas-wire-meta { display: flex !important; flex-direction: column !important; gap: 6px !important; min-width: 0 !important; } .atlas-wire-location { color: #fff !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: .07em !important; text-transform: uppercase !important; } .atlas-wire-category { color: var(--atlas-gold) !important; font-size: 8px !important; font-weight: 800 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } .atlas-wire-story { min-width: 0 !important; padding-right: 30px !important; } .atlas-wire-headline { color: rgba(255,255,255,.90) !important; font-size: 13px !important; font-weight: 590 !important; line-height: 1.35 !important; } .atlas-wire-date { margin-top: 6px !important; color: rgba(255,255,255,.28) !important; font-size: 8px !important; font-weight: 650 !important; letter-spacing: .08em !important; } .atlas-wire-strength { justify-self: end !important; min-width: 62px !important; padding: 5px 7px !important; border: 1px solid rgba(255,255,255,.13) !important; color: rgba(255,255,255,.44) !important; font-size: 8px !important; font-weight: 800 !important; text-align: center !important; text-transform: uppercase !important; letter-spacing: .07em !important; } .atlas-strength-high, .atlas-strength-very-high, .atlas-strength-elite { background: rgba(201,168,93,.08) !important; border-color: rgba(201,168,93,.35) !important; color: var(--atlas-gold-bright) !important; } /* ========================================================== DEEPER INTELLIGENCE SECTIONS ========================================================== */ #filters, #trends-section, #map-section, .content { margin-top: 34px !important; border: 1px solid var(--atlas-line) !important; background: #080808 !important; box-shadow: 0 12px 40px rgba(0,0,0,.20) !important; } /* ========================================================== FLOATING ASK ATLAS ========================================================== */ #atlasAiLauncher { display: flex !important; position: fixed !important; right: 24px !important; bottom: 24px !important; width: auto !important; min-width: 145px !important; height: 48px !important; align-items: center !important; justify-content: center !important; gap: 9px !important; padding: 0 18px !important; opacity: 1 !important; visibility: visible !important; background: linear-gradient( 180deg, #11100d, #070707 ) !important; border: 1px solid var(--atlas-gold) !important; border-radius: 4px !important; color: var(--atlas-gold-bright) !important; font-size: 10px !important; font-weight: 850 !important; letter-spacing: .14em !important; cursor: pointer !important; z-index: 99999999 !important; box-shadow: 0 14px 45px rgba(0,0,0,.65), 0 0 22px rgba(201,168,93,.07) !important; transition: transform .18s ease, box-shadow .18s ease, background .18s ease !important; } #atlasAiLauncher:hover { transform: translateY(-3px) !important; background: #15130d !important; box-shadow: 0 18px 55px rgba(0,0,0,.75), 0 0 30px rgba(201,168,93,.12) !important; } #atlasAiLauncher .atlas-ai-launcher-mark { color: #fff !important; font-size: 14px !important; font-weight: 800 !important; } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 950px) { .atlas-media-grid { grid-template-columns: 1fr !important; } .atlas-lead-story { border-right: none !important; border-bottom: 1px solid var(--atlas-line) !important; } .atlas-media-rail { grid-template-columns: repeat(3,1fr) !important; grid-template-rows: none !important; } .atlas-media-rail-story { border-right: 1px solid var(--atlas-line) !important; border-bottom: none !important; } .atlas-wire-row { grid-template-columns: 50px 160px 1fr !important; } .atlas-wire-strength { display: none !important; } } @media (max-width: 650px) { .atlas-intelligence-hero { padding: 35px 20px !important; } .atlas-intelligence-hero h1 { font-size: 42px !important; } .atlas-media-status-text { display: none !important; } .atlas-signal-tape { grid-template-columns: 105px minmax(0,1fr) !important; } .atlas-media-rail { display: block !important; } .atlas-media-rail-story { border-right: none !important; border-bottom: 1px solid var(--atlas-line) !important; } .atlas-wire-row { display: block !important; padding: 16px !important; } .atlas-wire-rank { margin-bottom: 9px !important; } .atlas-wire-meta { flex-direction: row !important; margin-bottom: 8px !important; } .atlas-wire-story { padding-right: 0 !important; } } /* ========================================================== REDUCED MOTION ========================================================== */ @media (prefers-reduced-motion: reduce) { .atlas-signal-tape-track, .atlas-wire-pulse, .atlas-media-live-dot, .atlas-hero-live-dot { animation: none !important; } } /* ========================================================== ATLAS — UNIFIED MEDIA INTELLIGENCE SYSTEM V2 Make the entire application match the live intelligence desk ========================================================== */ /* ========================================================== GLOBAL PAGE ========================================================== */ html, body { background: #030303 !important; } body { color: var(--atlas-white) !important; } .shell { max-width: none !important; width: 100% !important; } main#dashboard { padding-left: 18px !important; padding-right: 18px !important; } /* ========================================================== TOP NAVIGATION — MORE INTELLIGENCE TERMINAL ========================================================== */ .topbar { min-height: 72px !important; padding: 0 20px !important; background: rgba(5,5,5,.98) !important; border-bottom: 1px solid rgba(201,168,93,.20) !important; box-shadow: 0 8px 30px rgba(0,0,0,.28) !important; } .brand { align-items: center !important; } .brand-mark-text { color: var(--atlas-gold-bright) !important; } .company { color: #fff !important; font-weight: 800 !important; letter-spacing: .08em !important; } .tag { color: rgba(255,255,255,.34) !important; font-size: 8px !important; letter-spacing: .09em !important; } .nav-link { position: relative !important; padding: 26px 10px !important; color: rgba(255,255,255,.48) !important; font-size: 9px !important; font-weight: 750 !important; letter-spacing: .12em !important; text-transform: uppercase !important; } .nav-link:hover { color: #fff !important; } .nav-link:hover::after { content: ""; position: absolute; left: 10px; right: 10px; bottom: 0; height: 2px; background: var(--atlas-gold-bright); } .request { min-height: 38px !important; padding: 0 17px !important; border: 1px solid rgba(201,168,93,.55) !important; border-radius: 2px !important; background: rgba(201,168,93,.045) !important; color: var(--atlas-gold-bright) !important; font-size: 9px !important; font-weight: 800 !important; letter-spacing: .10em !important; text-transform: uppercase !important; } /* ========================================================== FILTERS — INTELLIGENCE COMMAND BAR ========================================================== */ #filters.atlas-filter-panel { position: relative !important; margin-top: 32px !important; padding: 52px 20px 20px !important; border: 1px solid var(--atlas-line) !important; border-radius: 0 !important; background: linear-gradient( 180deg, #0a0a0a, #060606 ) !important; box-shadow: none !important; } #filters.atlas-filter-panel::before { content: "DEEPER INTELLIGENCE / SEARCH ATLAS"; position: absolute; left: 20px; top: 17px; color: var(--atlas-gold-bright); font-size: 9px; font-weight: 850; letter-spacing: .16em; } #filters.atlas-filter-panel::after { content: ""; position: absolute; left: 20px; right: 20px; top: 38px; height: 1px; background: linear-gradient( 90deg, rgba(201,168,93,.45), rgba(255,255,255,.07) ); } .atlas-filter-grid { gap: 14px !important; } .atlas-filter-field { color: rgba(255,255,255,.70) !important; font-size: 8px !important; font-weight: 800 !important; letter-spacing: .11em !important; text-transform: uppercase !important; } .atlas-filter-field select { min-height: 44px !important; margin-top: 8px !important; padding: 0 13px !important; border: 1px solid rgba(255,255,255,.15) !important; border-radius: 2px !important; background: #0c0c0c !important; color: rgba(255,255,255,.88) !important; font-size: 11px !important; } .atlas-filter-field select:hover, .atlas-filter-field select:focus { border-color: rgba(201,168,93,.55) !important; outline: none !important; } .atlas-filter-bottom { margin-top: 16px !important; } .atlas-search-button, .atlas-filter-action { min-height: 42px !important; border: 1px solid rgba(201,168,93,.58) !important; border-radius: 2px !important; background: rgba(201,168,93,.045) !important; color: var(--atlas-gold-bright) !important; font-size: 9px !important; font-weight: 800 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } .atlas-search-button:hover, .atlas-filter-action:hover { background: rgba(201,168,93,.11) !important; } /* ========================================================== TRENDS — INTELLIGENCE ANALYTICS DESK ========================================================== */ #trends-section.atlas-trends-section { position: relative !important; margin-top: 32px !important; padding: 30px 18px 20px !important; border: 1px solid var(--atlas-line) !important; border-radius: 0 !important; background: #060606 !important; box-shadow: none !important; } .trends-heading { padding: 0 8px 25px !important; border-bottom: 1px solid var(--atlas-line) !important; } .trends-kicker { color: var(--atlas-gold-bright) !important; font-size: 9px !important; font-weight: 850 !important; letter-spacing: .16em !important; } .trends-heading h2 { margin-top: 10px !important; color: #fff !important; font-size: clamp(32px,3.5vw,50px) !important; font-weight: 650 !important; letter-spacing: -.04em !important; } .trends-heading p { color: rgba(255,255,255,.46) !important; font-size: 12px !important; } .trends-live { color: rgba(255,255,255,.54) !important; font-size: 8px !important; font-weight: 750 !important; letter-spacing: .13em !important; } .trends-periods { padding: 18px 8px !important; border-bottom: 1px solid var(--atlas-line) !important; } .trend-period { min-height: 34px !important; padding: 0 15px !important; border: 1px solid rgba(255,255,255,.14) !important; border-radius: 2px !important; background: #090909 !important; color: rgba(255,255,255,.48) !important; font-size: 8px !important; font-weight: 800 !important; letter-spacing: .11em !important; } .trend-period.active { border-color: var(--atlas-gold) !important; background: rgba(201,168,93,.075) !important; color: var(--atlas-gold-bright) !important; } /* ---------- TOP TREND METRICS ---------- */ .trend-stat-grid { gap: 0 !important; margin: 0 !important; border: 1px solid var(--atlas-line) !important; border-bottom: none !important; } .trend-stat { min-height: 112px !important; padding: 22px 24px !important; border: none !important; border-right: 1px solid var(--atlas-line) !important; border-radius: 0 !important; background: linear-gradient( 180deg, #0a0a0a, #070707 ) !important; } .trend-stat:last-child { border-right: none !important; } .trend-stat span, .trend-stat small { color: rgba(255,255,255,.38) !important; font-size: 8px !important; font-weight: 800 !important; letter-spacing: .12em !important; text-transform: uppercase !important; } .trend-stat strong { display: block !important; margin-top: 14px !important; color: var(--atlas-gold-bright) !important; font-size: 31px !important; line-height: 1 !important; font-weight: 650 !important; } /* ---------- TREND PANELS ---------- */ .trend-panels { gap: 18px !important; margin-top: 18px !important; } .trend-panel { padding: 24px !important; border: 1px solid var(--atlas-line) !important; border-radius: 0 !important; background: #080808 !important; box-shadow: none !important; } .trend-panel-heading { padding-bottom: 15px !important; border-bottom: 1px solid var(--atlas-line) !important; } .trend-panel-heading small, .trend-panel-heading span { color: var(--atlas-gold-bright) !important; font-size: 8px !important; font-weight: 850 !important; letter-spacing: .13em !important; } .trend-panel-heading h3 { color: #fff !important; font-size: 18px !important; font-weight: 650 !important; } /* Any ranking rows */ .trend-ranking > * { border-bottom: 1px solid rgba(255,255,255,.055) !important; } .trend-ranking > *:last-child { border-bottom: none !important; } /* ---------- STRENGTH DISTRIBUTION ---------- */ .trend-strength-panel { margin-top: 18px !important; } .trend-strength-grid > * { border: 1px solid var(--atlas-line) !important; border-radius: 0 !important; background: #070707 !important; } /* ========================================================== MAP — GEOGRAPHIC INTELLIGENCE DESK ========================================================== */ #map-section.map-section { position: relative !important; margin-top: 32px !important; padding: 0 !important; overflow: hidden !important; border: 1px solid var(--atlas-line) !important; border-radius: 0 !important; background: #060606 !important; box-shadow: none !important; } .map-heading { min-height: 110px !important; padding: 26px 26px 22px !important; background: linear-gradient( 90deg, rgba(201,168,93,.045), transparent 40% ) !important; border-bottom: 1px solid var(--atlas-line) !important; } .map-kicker { color: var(--atlas-gold-bright) !important; font-size: 9px !important; font-weight: 850 !important; letter-spacing: .15em !important; } .map-heading h2 { margin: 8px 0 5px !important; color: #fff !important; font-size: 27px !important; font-weight: 650 !important; letter-spacing: -.025em !important; } .map-heading p { color: rgba(255,255,255,.45) !important; font-size: 11px !important; } .map-status { color: rgba(255,255,255,.52) !important; font-size: 8px !important; font-weight: 750 !important; letter-spacing: .11em !important; } #louisianaMap { border: 0 !important; filter: saturate(.78) contrast(1.04) !important; } /* ========================================================== ECONOMIC SIGNALS — RESEARCH TERMINAL ========================================================== */ .content { display: grid !important; grid-template-columns: minmax(0,1fr) 330px !important; gap: 18px !important; margin-top: 32px !important; padding: 0 !important; border: none !important; background: transparent !important; box-shadow: none !important; } .content > section { min-height: 520px !important; padding: 20px !important; border: 1px solid var(--atlas-line) !important; background: #060606 !important; } .section-head { min-height: 63px !important; align-items: flex-start !important; padding-bottom: 16px !important; border-bottom: 1px solid var(--atlas-line) !important; } .section-head h2 { margin: 0 !important; color: #fff !important; font-size: 24px !important; font-weight: 650 !important; letter-spacing: -.025em !important; } .section-head h2::before { content: "INTELLIGENCE ARCHIVE"; display: block; margin-bottom: 7px; color: var(--atlas-gold-bright); font-size: 8px; font-weight: 850; letter-spacing: .15em; } #resultCount { margin-top: 7px !important; color: rgba(255,255,255,.38) !important; font-size: 9px !important; } .sort { color: rgba(255,255,255,.40) !important; font-size: 9px !important; } .sort strong { color: rgba(255,255,255,.72) !important; } .state { margin-top: 14px !important; min-height: 88px !important; display: flex !important; align-items: center !important; justify-content: center !important; border: 1px dashed rgba(255,255,255,.12) !important; border-radius: 0 !important; color: rgba(255,255,255,.42) !important; background: #050505 !important; } /* Actual search results */ .signal-list { margin-top: 12px !important; } .signal-list > * { border-radius: 0 !important; } /* ========================================================== SIDEBAR — WATCH DESK ========================================================== */ .content aside { display: flex !important; flex-direction: column !important; gap: 18px !important; } .side-card { position: relative !important; padding: 20px !important; border: 1px solid var(--atlas-line) !important; border-radius: 0 !important; background: linear-gradient( 180deg, #090909, #060606 ) !important; box-shadow: none !important; } .side-card::before { content: ""; position: absolute; left: 0; top: 0; width: 3px; height: 38px; background: var(--atlas-gold); } .side-card h3 { margin: 0 0 18px !important; color: #fff !important; font-size: 16px !important; font-weight: 650 !important; } .metric { padding: 14px 0 !important; border-bottom: 1px solid var(--atlas-line-soft) !important; } .metric:last-of-type { border-bottom: none !important; } .metric b { color: #fff !important; font-size: 22px !important; font-weight: 650 !important; } .metric span, .metric small { color: rgba(255,255,255,.38) !important; font-size: 9px !important; } /* coverage map button */ .outline { min-height: 40px !important; border: 1px solid rgba(201,168,93,.55) !important; border-radius: 2px !important; background: rgba(201,168,93,.035) !important; color: var(--atlas-gold-bright) !important; } /* ========================================================== RECENT ACTIVITY — LIVE WATCHLIST ========================================================== */ .atlas-activity-header { padding-bottom: 14px !important; border-bottom: 1px solid var(--atlas-line) !important; } .atlas-live-indicator { color: var(--atlas-gold-bright) !important; font-size: 8px !important; letter-spacing: .10em !important; } .activity { position: relative !important; padding: 14px 0 14px 17px !important; border-bottom: 1px solid var(--atlas-line-soft) !important; transition: background .15s ease !important; } .activity:hover { background: rgba(201,168,93,.035) !important; } .activity i { position: absolute !important; left: 0 !important; top: 20px !important; width: 6px !important; height: 6px !important; border-radius: 50% !important; background: var(--atlas-gold) !important; box-shadow: 0 0 8px rgba(201,168,93,.25) !important; } .activity b { color: rgba(255,255,255,.90) !important; font-size: 11px !important; line-height: 1.35 !important; } .activity small { display: block !important; margin-top: 5px !important; color: rgba(255,255,255,.35) !important; font-size: 8px !important; } .atlas-activity-updated { color: rgba(255,255,255,.28) !important; font-size: 8px !important; } .gold-link { color: var(--atlas-gold-bright) !important; font-size: 9px !important; font-weight: 750 !important; letter-spacing: .05em !important; } /* ========================================================== ABOUT — EDITORIAL COMPANY PROFILE ========================================================== */ #about.atlas-about-v2 { margin-top: 42px !important; padding: 0 !important; border: none !important; background: transparent !important; } .atlas-about-v2-card { position: relative !important; overflow: hidden !important; border: 1px solid var(--atlas-line) !important; border-radius: 0 !important; background: radial-gradient( circle at 85% 10%, rgba(201,168,93,.055), transparent 32% ), #070707 !important; box-shadow: none !important; } .atlas-about-v2-card::before { content: "EDET INTELLIGENCE / COMPANY"; position: absolute; top: 18px; right: 24px; color: rgba(255,255,255,.20); font-size: 7px; font-weight: 800; letter-spacing: .13em; } .atlas-about-v2-main { padding: 34px !important; } .atlas-about-v2-label, .atlas-about-v2-monitor-title { color: var(--atlas-gold-bright) !important; font-size: 8px !important; font-weight: 850 !important; letter-spacing: .15em !important; } .atlas-about-v2-tagline { color: rgba(255,255,255,.70) !important; } .atlas-about-v2-intro p { color: rgba(255,255,255,.53) !important; line-height: 1.65 !important; } .atlas-monitor-item { border-radius: 0 !important; } .atlas-monitor-icon { border-color: rgba(201,168,93,.35) !important; background: rgba(201,168,93,.025) !important; } .atlas-about-owner { border-top: 1px solid var(--atlas-line) !important; color: rgba(255,255,255,.26) !important; } /* ========================================================== REMOVE OLD "SOFTWARE CARD" ROUNDING GLOBALLY ========================================================== */ #filters, #trends-section, #map-section, .content > section, .side-card, .trend-panel, .trend-stat, .atlas-about-v2-card { border-radius: 0 !important; } /* ========================================================== SECTION SPACING — ONE CONTINUOUS PRODUCT ========================================================== */ #atlasMediaDesk + #filters { margin-top: 28px !important; } #filters + #trends-section, #trends-section + #map-section, #map-section + .content { margin-top: 28px !important; } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 950px) { .content { grid-template-columns: 1fr !important; } .trend-stat-grid { grid-template-columns: repeat(2,1fr) !important; } .trend-stat { border-bottom: 1px solid var(--atlas-line) !important; } } @media (max-width: 650px) { main#dashboard { padding-left: 10px !important; padding-right: 10px !important; } .atlas-filter-grid { grid-template-columns: 1fr !important; } .trend-stat-grid { grid-template-columns: 1fr !important; } .trend-panels { display: block !important; } .trend-panel { margin-bottom: 14px !important; } .atlas-about-v2-main { padding: 24px 18px !important; } } /* ========================================================== ATLAS — PREMIUM HEADER / COMMAND BAR V3 ========================================================== */ /* ---------------------------------------------------------- HEADER SHELL ---------------------------------------------------------- */ .topbar { display: grid !important; grid-template-columns: minmax(330px, auto) minmax(0, 1fr) auto !important; align-items: center !important; min-height: 78px !important; padding: 0 20px 0 28px !important; gap: 28px !important; background: linear-gradient( 180deg, #060606 0%, #030303 100% ) !important; border-bottom: 1px solid rgba(201,168,93,.22) !important; box-shadow: 0 10px 32px rgba(0,0,0,.36) !important; } /* ---------------------------------------------------------- BRAND ---------------------------------------------------------- */ .topbar .brand { display: flex !important; align-items: center !important; gap: 19px !important; min-width: 0 !important; margin: 0 !important; } /* E. mark */ .topbar .brand-mark-text { position: static !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 52px !important; min-width: 52px !important; height: 58px !important; margin: 0 !important; padding: 0 !important; color: var(--atlas-gold-bright) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 45px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: -.055em !important; } /* Company name */ .topbar .company { margin: 0 0 6px !important; color: #fff !important; font-size: 14px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: .115em !important; white-space: nowrap !important; } /* Brand descriptor */ .topbar .tag { margin: 0 !important; color: rgba(255,255,255,.31) !important; font-size: 7px !important; font-weight: 650 !important; line-height: 1.55 !important; letter-spacing: .12em !important; text-transform: uppercase !important; } /* Gold final line in the brand descriptor stays compact. */ .topbar .tag br + * { color: var(--atlas-gold) !important; } /* ---------------------------------------------------------- CENTER NAVIGATION ---------------------------------------------------------- */ /* Normalize any nav container inside the topbar. */ .topbar nav { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: nowrap !important; gap: 34px !important; min-width: 0 !important; height: 78px !important; margin: 0 !important; padding: 0 !important; } /* Main navigation links */ .topbar .nav-link { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; height: 78px !important; margin: 0 !important; padding: 0 2px !important; color: rgba(255,255,255,.45) !important; font-size: 8px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: .15em !important; text-decoration: none !important; white-space: nowrap !important; text-transform: uppercase !important; transition: color .15s ease !important; } .topbar .nav-link:hover { color: #fff !important; } .topbar .nav-link::after { content: "" !important; position: absolute !important; left: 50% !important; right: auto !important; bottom: 0 !important; width: 0 !important; height: 2px !important; background: var(--atlas-gold-bright) !important; transform: translateX(-50%) !important; transition: width .18s ease !important; } .topbar .nav-link:hover::after { width: 100% !important; } /* ---------------------------------------------------------- RIGHT-SIDE ACTIONS API / ABOUT / REQUEST ACCESS ---------------------------------------------------------- */ /* Some of the older header controls use a separate wrapper. Normalize all likely action wrappers. */ .topbar .nav-actions, .topbar .top-actions, .topbar .header-actions, .topbar .actions { display: flex !important; align-items: center !important; justify-content: flex-end !important; flex-wrap: nowrap !important; gap: 28px !important; height: 78px !important; margin: 0 !important; padding: 0 !important; } /* Normalize direct links in those action containers, including API and ABOUT. */ .topbar .nav-actions a, .topbar .top-actions a, .topbar .header-actions a, .topbar .actions a { display: flex !important; align-items: center !important; justify-content: center !important; height: 78px !important; margin: 0 !important; padding: 0 !important; color: rgba(255,255,255,.58) !important; font-size: 9px !important; font-weight: 750 !important; line-height: 1 !important; letter-spacing: .10em !important; text-decoration: none !important; white-space: nowrap !important; text-transform: uppercase !important; } .topbar .nav-actions a:hover, .topbar .top-actions a:hover, .topbar .header-actions a:hover, .topbar .actions a:hover { color: var(--atlas-gold-bright) !important; } /* ---------------------------------------------------------- CATCH API / ABOUT IF THEY ARE DIRECT TOPBAR CHILDREN ---------------------------------------------------------- */ .topbar > a { align-self: center !important; margin: 0 !important; padding: 0 !important; line-height: 1 !important; white-space: nowrap !important; } /* ---------------------------------------------------------- REQUEST ACCESS ---------------------------------------------------------- */ .topbar .request { display: flex !important; align-items: center !important; justify-content: center !important; align-self: center !important; min-width: 126px !important; height: 38px !important; min-height: 38px !important; margin: 0 !important; padding: 0 17px !important; border: 1px solid rgba(201,168,93,.60) !important; border-radius: 2px !important; background: linear-gradient( 180deg, rgba(201,168,93,.075), rgba(201,168,93,.025) ) !important; color: var(--atlas-gold-bright) !important; font-size: 8px !important; font-weight: 850 !important; line-height: 1 !important; letter-spacing: .13em !important; white-space: nowrap !important; text-transform: uppercase !important; transition: background .18s ease, border-color .18s ease !important; } .topbar .request:hover { background: rgba(201,168,93,.12) !important; border-color: var(--atlas-gold-bright) !important; } /* ========================================================== DESKTOP COMPRESSION Keep everything on one line around laptop widths ========================================================== */ @media (max-width: 1250px) { .topbar { grid-template-columns: minmax(300px, auto) minmax(0, 1fr) auto !important; gap: 18px !important; } .topbar nav { gap: 21px !important; } .topbar .company { font-size: 12px !important; } .topbar .brand-mark-text { width: 45px !important; min-width: 45px !important; font-size: 40px !important; } .topbar .nav-actions, .topbar .top-actions, .topbar .header-actions, .topbar .actions { gap: 18px !important; } } /* ========================================================== TABLET ========================================================== */ @media (max-width: 950px) { .topbar { grid-template-columns: auto 1fr !important; min-height: auto !important; padding: 12px 16px !important; } .topbar nav { grid-column: 1 / -1; width: 100% !important; height: 44px !important; justify-content: flex-start !important; overflow-x: auto !important; } .topbar .nav-link { height: 44px !important; } } /* ========================================================== API + ABOUT NAV ALIGNMENT FIX ========================================================== */ /* Force every nav-link inside the topbar onto the same baseline, size, spacing and hover treatment. */ .topbar a.nav-link { display: flex !important; align-items: center !important; justify-content: center !important; align-self: stretch !important; height: 78px !important; margin: 0 !important; padding: 0 2px !important; color: rgba(255,255,255,.45) !important; font-size: 8px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: .15em !important; text-transform: uppercase !important; white-space: nowrap !important; vertical-align: middle !important; } /* Remove any older API/About-specific offsets */ .topbar a[href*="api"], .topbar a[href="#about"] { position: relative !important; top: auto !important; bottom: auto !important; transform: none !important; margin-top: 0 !important; margin-bottom: 0 !important; font-size: 8px !important; line-height: 1 !important; color: rgba(255,255,255,.45) !important; } .topbar a[href*="api"]:hover, .topbar a[href="#about"]:hover { color: #fff !important; } /* Keep their underline identical to the main navigation */ .topbar a[href*="api"]::after, .topbar a[href="#about"]::after { content: "" !important; position: absolute !important; left: 50% !important; bottom: 0 !important; width: 0 !important; height: 2px !important; background: var(--atlas-gold-bright) !important; transform: translateX(-50%) !important; transition: width .18s ease !important; } .topbar a[href*="api"]:hover::after, .topbar a[href="#about"]:hover::after { width: 100% !important; } /* ========================================================== HERO TYPOGRAPHY ADJUSTMENT Larger Atlas™ / Slightly smaller headline ========================================================== */ /* Atlas™ */ .atlas-intelligence-hero .atlas-wordmark { font-size: 64px !important; line-height: .95 !important; margin-bottom: 30px !important; } /* Main editorial headline */ .atlas-intelligence-hero h1 { max-width: 930px !important; font-size: clamp(38px, 4.25vw, 61px) !important; line-height: 1.01 !important; letter-spacing: -.048em !important; } /* Laptop adjustment */ @media (max-width: 1200px) { .atlas-intelligence-hero .atlas-wordmark { font-size: 59px !important; } .atlas-intelligence-hero h1 { font-size: clamp(38px, 4.1vw, 56px) !important; } } /* Mobile */ @media (max-width: 650px) { .atlas-intelligence-hero .atlas-wordmark { font-size: 52px !important; } .atlas-intelligence-hero h1 { font-size: 38px !important; } } /* ========================================================== LEAD INTELLIGENCE — HEADLINE SIZE REFINEMENT Applies automatically to every rotating lead story ========================================================== */ .atlas-lead-story h2 { max-width: 900px !important; font-size: clamp(28px, 3.05vw, 46px) !important; line-height: 1.06 !important; letter-spacing: -.038em !important; } /* Slightly smaller on laptop-size displays */ @media (max-width: 1200px) { .atlas-lead-story h2 { font-size: clamp(27px, 2.9vw, 42px) !important; } } /* Mobile */ @media (max-width: 650px) { .atlas-lead-story h2 { font-size: 30px !important; line-height: 1.08 !important; } } /* ========================================================== ATLAS — ECONOMIC TRENDS VISUAL DESK V3 ========================================================== */ /* ========================================================== MAIN TRENDS CANVAS ========================================================== */ #trends-section.atlas-trends-section { position: relative !important; overflow: hidden !important; padding: 34px 20px 24px !important; background: radial-gradient( circle at 82% 0%, rgba(201,168,93,.055), transparent 30% ), linear-gradient( 180deg, #080808 0%, #050505 100% ) !important; } /* subtle decorative intelligence grid */ #trends-section.atlas-trends-section::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .17; background-image: linear-gradient( rgba(255,255,255,.018) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.018) 1px, transparent 1px ); background-size: 42px 42px; mask-image: linear-gradient( to bottom, black, transparent 48% ); } /* Keep actual content above background decoration */ #trends-section > * { position: relative; z-index: 1; } /* ========================================================== HEADER ========================================================== */ .trends-heading { min-height: 125px !important; display: flex !important; align-items: flex-end !important; justify-content: space-between !important; padding: 0 8px 27px !important; } .trends-kicker { display: inline-flex !important; align-items: center !important; gap: 8px !important; color: var(--atlas-gold-bright) !important; } /* tiny gold intelligence marker */ .trends-kicker::before { content: ""; display: inline-block; width: 18px; height: 2px; background: var(--atlas-gold-bright); box-shadow: 0 0 12px rgba(224,189,104,.30); } .trends-heading h2 { margin: 10px 0 8px !important; font-size: clamp(34px,3.3vw,48px) !important; line-height: 1 !important; letter-spacing: -.045em !important; } .trends-heading p { max-width: 620px !important; margin: 0 !important; color: rgba(255,255,255,.40) !important; } .trends-live { display: flex !important; align-items: center !important; gap: 9px !important; padding: 7px 10px !important; border: 1px solid rgba(201,168,93,.16) !important; background: rgba(201,168,93,.035) !important; } /* ========================================================== PERIOD SELECTOR ========================================================== */ .trends-periods { display: flex !important; align-items: center !important; gap: 8px !important; padding: 17px 8px !important; } .trend-period { min-width: 76px !important; height: 35px !important; position: relative !important; overflow: hidden !important; transition: color .18s ease, background .18s ease, border-color .18s ease !important; } .trend-period:hover { color: #fff !important; border-color: rgba(201,168,93,.35) !important; } .trend-period.active { position: relative !important; background: linear-gradient( 180deg, rgba(201,168,93,.13), rgba(201,168,93,.045) ) !important; box-shadow: inset 0 -2px 0 var(--atlas-gold-bright), 0 0 18px rgba(201,168,93,.035) !important; } /* ========================================================== TOP METRIC STRIP ========================================================== */ .trend-stat-grid { overflow: hidden !important; background: #060606 !important; } .trend-stat { position: relative !important; min-height: 132px !important; padding: 25px 25px 22px !important; overflow: hidden !important; transition: background .16s ease !important; } .trend-stat:hover { background: #0c0c0b !important; } /* subtle gold top line on hover */ .trend-stat::before { content: ""; position: absolute; left: 0; right: 100%; top: 0; height: 2px; background: var(--atlas-gold-bright); transition: right .25s ease; } .trend-stat:hover::before { right: 0; } .trend-stat strong { margin-top: 16px !important; color: var(--atlas-gold-bright) !important; font-size: 34px !important; font-weight: 650 !important; letter-spacing: -.035em !important; text-shadow: 0 0 22px rgba(201,168,93,.08); } /* ========================================================== MAIN RANKING PANELS ========================================================== */ .trend-panels { gap: 18px !important; margin-top: 20px !important; } .trend-panel { position: relative !important; overflow: hidden !important; min-height: 335px !important; padding: 25px 24px !important; background: linear-gradient( 145deg, #090909 0%, #060606 70% ) !important; transition: border-color .18s ease, background .18s ease !important; } .trend-panel:hover { border-color: rgba(201,168,93,.23) !important; background: linear-gradient( 145deg, #0b0b0a, #070707 ) !important; } /* decorative corner accent */ .trend-panel::after { content: ""; position: absolute; right: -65px; top: -65px; width: 145px; height: 145px; border: 1px solid rgba(201,168,93,.07); border-radius: 50%; pointer-events: none; } .trend-panel-heading { position: relative !important; margin-bottom: 11px !important; padding-bottom: 17px !important; } .trend-panel-heading::after { content: ""; position: absolute; left: 0; bottom: -1px; width: 70px; height: 1px; background: var(--atlas-gold); } .trend-panel-heading h3 { margin: 7px 0 0 !important; font-size: 20px !important; letter-spacing: -.02em !important; } /* ========================================================== RANKING ROWS ========================================================== */ /* These selectors intentionally target the direct rendered ranking rows regardless of the data values inside them. */ #trendParishes > *, #trendCategories > * { position: relative !important; min-height: 31px !important; padding: 7px 0 !important; border-bottom: 1px solid rgba(255,255,255,.045) !important; transition: background .15s ease, padding-left .15s ease !important; } #trendParishes > *:hover, #trendCategories > *:hover { padding-left: 6px !important; background: linear-gradient( 90deg, rgba(201,168,93,.035), transparent 65% ) !important; } #trendParishes > *:last-child, #trendCategories > *:last-child { border-bottom: none !important; } /* ========================================================== MAKE ALL TREND PROGRESS TRACKS RICHER ========================================================== */ /* Existing Atlas bar renderers generally use nested elements. These rules polish the bar-like descendants without changing their calculated widths. */ #trendParishes div[style*="width"], #trendCategories div[style*="width"] { position: relative !important; min-height: 5px !important; border-radius: 0 !important; background: linear-gradient( 90deg, #9b7315 0%, #c89618 45%, #e4b928 100% ) !important; box-shadow: 0 0 12px rgba(201,168,93,.08) !important; transition: filter .18s ease, box-shadow .18s ease !important; } /* brighter leading edge */ #trendParishes div[style*="width"]::after, #trendCategories div[style*="width"]::after { content: ""; position: absolute; right: 0; top: -1px; width: 2px; height: 7px; background: #f0ca61; box-shadow: 0 0 7px rgba(240,202,97,.45); } #trendParishes > *:hover div[style*="width"], #trendCategories > *:hover div[style*="width"] { filter: brightness(1.14) !important; box-shadow: 0 0 18px rgba(201,168,93,.12) !important; } /* ========================================================== STRENGTH DISTRIBUTION ========================================================== */ .trend-strength-panel { min-height: 220px !important; padding: 25px 24px !important; background: radial-gradient( circle at 92% 0%, rgba(201,168,93,.045), transparent 28% ), #070707 !important; } .trend-strength-grid { gap: 12px !important; margin-top: 20px !important; } .trend-strength-grid > * { position: relative !important; min-height: 105px !important; padding: 20px !important; overflow: hidden !important; background: linear-gradient( 180deg, #0a0a0a, #060606 ) !important; transition: transform .15s ease, border-color .15s ease, background .15s ease !important; } .trend-strength-grid > *:hover { transform: translateY(-2px) !important; border-color: rgba(201,168,93,.32) !important; background: #0c0c0b !important; } /* gold activity line at bottom */ .trend-strength-grid > *::after { content: ""; position: absolute; left: 0; bottom: 0; height: 2px; width: 100%; background: linear-gradient( 90deg, var(--atlas-gold-bright), rgba(201,168,93,.06) ); opacity: .45; } /* Strength labels */ .trend-strength-grid span, .trend-strength-grid small { color: rgba(255,255,255,.39) !important; font-size: 8px !important; font-weight: 800 !important; letter-spacing: .12em !important; text-transform: uppercase !important; } /* Strength numbers */ .trend-strength-grid strong { display: block !important; margin-top: 12px !important; color: #fff !important; font-size: 26px !important; font-weight: 650 !important; letter-spacing: -.03em !important; } /* ========================================================== SPECIAL EMPHASIS — HIGH CONFIDENCE ========================================================== */ .trend-strength-grid > *:nth-child(1), .trend-strength-grid > *:nth-child(2) { background: linear-gradient( 145deg, rgba(201,168,93,.055), #070707 58% ) !important; } .trend-strength-grid > *:nth-child(1) strong, .trend-strength-grid > *:nth-child(2) strong { color: var(--atlas-gold-bright) !important; } /* ========================================================== SMALL SCREEN ========================================================== */ @media (max-width: 800px) { .trends-heading { display: block !important; } .trends-live { width: fit-content !important; margin-top: 18px !important; } .trend-panels { grid-template-columns: 1fr !important; } } /* ========================================================== ATLAS — TRENDS DYNAMIC VISUALS V4 Unified gold system + interactive intelligence bars ========================================================== */ /* ========================================================== GOLD SYSTEM Force Trends to use the exact same Atlas gold family ========================================================== */ #trends-section { --trend-gold: var(--atlas-gold); --trend-gold-bright: var(--atlas-gold-bright); --trend-gold-soft: rgba(201,168,93,.12); --trend-gold-faint: rgba(201,168,93,.055); } /* ========================================================== RANKING PANELS — MORE DEPTH ========================================================== */ #trendParishes, #trendCategories { position: relative !important; } /* subtle vertical intelligence guide */ #trendParishes::before, #trendCategories::before { content: ""; position: absolute; left: 184px; right: 58px; top: 4px; bottom: 4px; pointer-events: none; background-image: linear-gradient( 90deg, rgba(255,255,255,.025) 1px, transparent 1px ); background-size: 25% 100%; opacity: .32; } /* ========================================================== ROWS ========================================================== */ #trendParishes > *, #trendCategories > * { position: relative !important; min-height: 47px !important; display: flex !important; align-items: center !important; padding: 8px 0 !important; border-bottom: 1px solid rgba(255,255,255,.045) !important; transition: background .18s ease, transform .18s ease, padding-left .18s ease !important; } #trendParishes > *:hover, #trendCategories > *:hover { padding-left: 7px !important; background: linear-gradient( 90deg, rgba(201,168,93,.055), rgba(201,168,93,.015) 46%, transparent 75% ) !important; transform: translateX(2px); } /* left accent on hover */ #trendParishes > *::before, #trendCategories > *::before { content: ""; position: absolute; left: -10px; top: 10px; bottom: 10px; width: 2px; background: var(--trend-gold-bright); opacity: 0; box-shadow: 0 0 12px rgba(201,168,93,.25); transition: opacity .18s ease; } #trendParishes > *:hover::before, #trendCategories > *:hover::before { opacity: 1; } /* ========================================================== BAR TRACKS ========================================================== */ /* Keep the renderer's current widths intact. Only change the appearance of the bar itself. */ #trendParishes div[style*="width"], #trendCategories div[style*="width"] { position: relative !important; height: 6px !important; min-height: 6px !important; overflow: visible !important; border-radius: 999px !important; background: linear-gradient( 90deg, rgba(201,168,93,.48) 0%, var(--trend-gold) 64%, var(--trend-gold-bright) 100% ) !important; box-shadow: 0 0 10px rgba(201,168,93,.07) !important; transform-origin: left center; animation: atlasTrendBarReveal .65s ease-out both; transition: filter .18s ease, box-shadow .18s ease, transform .18s ease !important; } @keyframes atlasTrendBarReveal { from { transform: scaleX(.15); opacity: .25; } to { transform: scaleX(1); opacity: 1; } } /* slightly stagger bar appearance */ #trendParishes > *:nth-child(2) div[style*="width"], #trendCategories > *:nth-child(2) div[style*="width"] { animation-delay: .04s; } #trendParishes > *:nth-child(3) div[style*="width"], #trendCategories > *:nth-child(3) div[style*="width"] { animation-delay: .08s; } #trendParishes > *:nth-child(4) div[style*="width"], #trendCategories > *:nth-child(4) div[style*="width"] { animation-delay: .12s; } #trendParishes > *:nth-child(5) div[style*="width"], #trendCategories > *:nth-child(5) div[style*="width"] { animation-delay: .16s; } #trendParishes > *:nth-child(6) div[style*="width"], #trendCategories > *:nth-child(6) div[style*="width"] { animation-delay: .20s; } /* ========================================================== GLOWING BAR ENDPOINT ========================================================== */ #trendParishes div[style*="width"]::after, #trendCategories div[style*="width"]::after { content: ""; position: absolute; right: -3px; top: 50%; width: 9px; height: 9px; border-radius: 50%; transform: translateY(-50%); background: var(--trend-gold-bright); border: 2px solid #080808; box-shadow: 0 0 0 1px rgba(201,168,93,.36), 0 0 10px rgba(201,168,93,.28); transition: transform .18s ease, box-shadow .18s ease !important; } /* hover makes bar and endpoint more active */ #trendParishes > *:hover div[style*="width"], #trendCategories > *:hover div[style*="width"] { filter: brightness(1.12) !important; transform: scaleY(1.35) !important; box-shadow: 0 0 15px rgba(201,168,93,.13) !important; } #trendParishes > *:hover div[style*="width"]::after, #trendCategories > *:hover div[style*="width"]::after { transform: translateY(-50%) scale(1.16); box-shadow: 0 0 0 1px rgba(201,168,93,.48), 0 0 14px rgba(201,168,93,.40); } /* ========================================================== DARK TRACK BEHIND BAR ========================================================== */ /* Polish likely parent bar track containers. */ #trendParishes [class*="bar"], #trendCategories [class*="bar"] { border-radius: 999px !important; } /* ========================================================== LEADING ROW EMPHASIS ========================================================== */ #trendParishes > *:first-child, #trendCategories > *:first-child { background: linear-gradient( 90deg, rgba(201,168,93,.045), transparent 55% ) !important; } #trendParishes > *:first-child::after, #trendCategories > *:first-child::after { content: "LEADER"; position: absolute; right: 35px; top: 4px; color: rgba(201,168,93,.38); font-size: 6px; font-weight: 850; letter-spacing: .12em; } /* ========================================================== PANEL HOVER GLOW ========================================================== */ .trend-panel { transition: border-color .22s ease, background .22s ease, box-shadow .22s ease, transform .22s ease !important; } .trend-panel:hover { transform: translateY(-2px); border-color: rgba(201,168,93,.26) !important; box-shadow: 0 12px 36px rgba(0,0,0,.20), 0 0 30px rgba(201,168,93,.025) !important; } /* ========================================================== TREND PANEL TITLES ========================================================== */ .trend-panel-heading h3 { transition: color .18s ease !important; } .trend-panel:hover .trend-panel-heading h3 { color: var(--trend-gold-bright) !important; } /* ========================================================== NUMBERS ON RIGHT ========================================================== */ #trendParishes > * > *:last-child, #trendCategories > * > *:last-child { color: rgba(255,255,255,.70) !important; font-variant-numeric: tabular-nums; transition: color .18s ease, transform .18s ease !important; } #trendParishes > *:hover > *:last-child, #trendCategories > *:hover > *:last-child { color: var(--trend-gold-bright) !important; transform: translateX(-2px); } /* ========================================================== STRENGTH DISTRIBUTION — MORE VISUAL ========================================================== */ .trend-strength-grid > * { position: relative !important; isolation: isolate !important; } /* faint gold glow behind metric */ .trend-strength-grid > *::before { content: ""; position: absolute; width: 110px; height: 110px; right: -45px; bottom: -55px; border-radius: 50%; background: radial-gradient( circle, rgba(201,168,93,.10), transparent 68% ); z-index: -1; opacity: .45; transition: opacity .18s ease, transform .18s ease; } .trend-strength-grid > *:hover::before { opacity: .85; transform: scale(1.12); } /* match golds exactly */ .trend-strength-grid > *::after { background: linear-gradient( 90deg, var(--trend-gold-bright), var(--trend-gold), rgba(201,168,93,.08) ) !important; } /* High / Very High values use brand gold */ .trend-strength-grid > *:nth-child(1) strong, .trend-strength-grid > *:nth-child(2) strong { color: var(--trend-gold-bright) !important; } /* Medium + low remain white so gold retains meaning */ .trend-strength-grid > *:nth-child(3) strong, .trend-strength-grid > *:nth-child(4) strong { color: rgba(255,255,255,.90) !important; } /* ========================================================== LIVE MICRO-MOTION ========================================================== */ .trends-live::before { animation: atlasTrendLivePulse 1.7s ease-in-out infinite !important; } @keyframes atlasTrendLivePulse { 0%,100% { opacity: .35; box-shadow: 0 0 0 rgba(201,168,93,0); } 50% { opacity: 1; box-shadow: 0 0 9px rgba(201,168,93,.28); } } /* ========================================================== ACCESSIBILITY ========================================================== */ @media (prefers-reduced-motion: reduce) { #trendParishes div[style*="width"], #trendCategories div[style*="width"], .trends-live::before { animation: none !important; } #trendParishes > *, #trendCategories > *, .trend-panel, .trend-strength-grid > * { transition: none !important; } } /* ========================================================== ATLAS — SOPHISTICATED TREND CHARTS ========================================================== */ /* ========================================================== RADIAL PARISH ACTIVITY ========================================================== */ .atlas-radial-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px 18px; padding: 20px 8px 10px; } .atlas-radial-item { display: flex; flex-direction: column; align-items: center; justify-content: center; min-height: 155px; transition: transform .22s ease; } .atlas-radial-item:hover { transform: translateY(-5px); } .atlas-radial-ring { --atlas-percent: 50; position: relative; width: 92px; height: 92px; border-radius: 50%; background: conic-gradient( var(--atlas-gold-bright) calc(var(--atlas-percent) * 1%), rgba(201,168,93,.10) 0 ); box-shadow: 0 0 25px rgba(201,168,93,.035); transition: transform .22s ease, box-shadow .22s ease; } .atlas-radial-item:hover .atlas-radial-ring { transform: scale(1.06); box-shadow: 0 0 32px rgba(201,168,93,.10); } .atlas-radial-ring::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: #070707; border: 1px solid rgba(255,255,255,.07); } .atlas-radial-inner { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; } .atlas-radial-inner strong { color: #fff; font-size: 23px; font-weight: 650; line-height: 1; } .atlas-radial-inner span { margin-top: 5px; color: rgba(255,255,255,.28); font-size: 6px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; } .atlas-radial-label { margin-top: 12px; max-width: 135px; color: rgba(255,255,255,.72); font-size: 9px; font-weight: 650; line-height: 1.25; text-align: center; } /* ========================================================== LOLLIPOP CATEGORY CHART ========================================================== */ .atlas-lollipop-chart { display: flex; flex-direction: column; gap: 5px; padding: 18px 4px 8px; } .atlas-lollipop-row { display: grid; grid-template-columns: 165px minmax(0,1fr) 34px; align-items: center; gap: 15px; min-height: 45px; padding: 3px 0; border-bottom: 1px solid rgba(255,255,255,.045); transition: background .16s ease, padding-left .16s ease; } .atlas-lollipop-row:hover { padding-left: 6px; background: linear-gradient( 90deg, rgba(201,168,93,.045), transparent 65% ); } .atlas-lollipop-name { color: rgba(255,255,255,.76); font-size: 10px; font-weight: 600; } .atlas-lollipop-track { position: relative; height: 1px; background: rgba(255,255,255,.10); } .atlas-lollipop-line { position: absolute; left: 0; top: 50%; height: 2px; transform: translateY(-50%); background: linear-gradient( 90deg, rgba(201,168,93,.35), var(--atlas-gold-bright) ); transform-origin: left center; animation: atlasLollipopReveal .7s ease-out both; } @keyframes atlasLollipopReveal { from { width: 0; opacity: .25; } } .atlas-lollipop-dot { position: absolute; right: -5px; top: 50%; width: 10px; height: 10px; transform: translateY(-50%); border-radius: 50%; background: var(--atlas-gold-bright); border: 2px solid #080808; box-shadow: 0 0 0 1px rgba(201,168,93,.30), 0 0 12px rgba(201,168,93,.28); transition: transform .16s ease, box-shadow .16s ease; } .atlas-lollipop-row:hover .atlas-lollipop-dot { transform: translateY(-50%) scale(1.22); box-shadow: 0 0 0 1px rgba(201,168,93,.48), 0 0 18px rgba(201,168,93,.42); } .atlas-lollipop-value { color: var(--atlas-gold-bright); font-size: 10px; font-weight: 750; text-align: right; font-variant-numeric: tabular-nums; } /* ========================================================== DONUT / SIGNAL CONFIDENCE ========================================================== */ .atlas-donut-layout { display: grid; grid-template-columns: 260px 1fr; align-items: center; gap: 48px; min-height: 220px; padding: 18px 20px; } .atlas-donut-wrap { display: flex; align-items: center; justify-content: center; } .atlas-donut { position: relative; width: 168px; height: 168px; border-radius: 50%; transform: rotate(-90deg); box-shadow: 0 0 45px rgba(201,168,93,.04); transition: transform .35s ease, box-shadow .35s ease; } .atlas-donut:hover { transform: rotate(-90deg) scale(1.04); box-shadow: 0 0 55px rgba(201,168,93,.09); } .atlas-donut::after { content: ""; position: absolute; inset: -7px; border: 1px solid rgba(201,168,93,.08); border-radius: 50%; } .atlas-donut-hole { position: absolute; inset: 28px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: #070707; border: 1px solid rgba(255,255,255,.08); transform: rotate(90deg); } .atlas-donut-hole strong { color: #fff; font-size: 30px; font-weight: 650; line-height: 1; } .atlas-donut-hole span { margin-top: 8px; color: rgba(255,255,255,.30); font-size: 6px; font-weight: 800; letter-spacing: .12em; } .atlas-donut-legend { display: flex; flex-direction: column; gap: 2px; } .atlas-donut-legend-row { display: grid; grid-template-columns: 12px 1fr 40px; align-items: center; gap: 13px; min-height: 42px; padding: 4px 8px; border-bottom: 1px solid rgba(255,255,255,.045); transition: background .16s ease, padding-left .16s ease; } .atlas-donut-legend-row:hover { padding-left: 13px; background: linear-gradient( 90deg, rgba(201,168,93,.045), transparent ); } .atlas-donut-legend-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--atlas-gold-bright); } .atlas-donut-dot-1 { opacity: 1; } .atlas-donut-dot-2 { opacity: .78; } .atlas-donut-dot-3 { opacity: .50; } .atlas-donut-dot-4 { opacity: .24; } .atlas-donut-legend-label { color: rgba(255,255,255,.66); font-size: 9px; font-weight: 650; text-transform: uppercase; letter-spacing: .07em; } .atlas-donut-legend-row strong { color: #fff; font-size: 13px; font-weight: 650; text-align: right; } /* ========================================================== REMOVE OLD CHART STYLING AFTER TRANSFORMATION ========================================================== */ #trendParishes[data-atlas-radialized="true"]::before, #trendCategories[data-atlas-lollipop="true"]::before { display: none !important; } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 900px) { .atlas-radial-grid { grid-template-columns: repeat(2,1fr); } .atlas-donut-layout { grid-template-columns: 1fr; gap: 20px; } } @media (max-width: 600px) { .atlas-lollipop-row { grid-template-columns: 120px 1fr 28px; } .atlas-radial-grid { grid-template-columns: repeat(2,1fr); } } @media (prefers-reduced-motion: reduce) { .atlas-lollipop-line { animation: none !important; } } /* ========================================================== ATLAS — SOPHISTICATED ANALYTICS V5 Radials + Constellation + Donut ========================================================== */ /* ========================================================== SHARED GOLD ========================================================== */ #trends-section { --chart-gold: var(--atlas-gold-bright); --chart-gold-standard: var(--atlas-gold); --chart-gold-soft: rgba(224,189,104,.16); --chart-line: rgba(255,255,255,.08); } /* ========================================================== PARISH RADIAL VISUALIZATION ========================================================== */ .atlas-parish-radials { display: grid !important; grid-template-columns: repeat(3, 1fr) !important; gap: 24px 12px !important; align-items: center !important; min-height: 300px !important; padding: 24px 10px 14px !important; } .atlas-parish-radial { display: flex !important; flex-direction: column !important; align-items: center !important; justify-content: center !important; min-height: 138px !important; opacity: 0; animation: atlasRadialAppear .55s ease-out var(--delay) forwards; transition: transform .22s ease !important; } @keyframes atlasRadialAppear { from { opacity: 0; transform: translateY(8px) scale(.94); } to { opacity: 1; transform: translateY(0) scale(1); } } .atlas-parish-radial:hover { transform: translateY(-5px) !important; } .atlas-radial-chart { position: relative !important; width: var(--ring-size) !important; height: var(--ring-size) !important; border-radius: 50% !important; background: conic-gradient( var(--chart-gold) calc( var(--activity) * 1% ), rgba(224,189,104,.08) 0 ) !important; box-shadow: 0 0 0 1px rgba(224,189,104,.07), 0 0 32px rgba(224,189,104,.025) !important; transition: transform .25s ease, box-shadow .25s ease !important; } .atlas-radial-chart::before { content: ""; position: absolute; inset: 7px; border-radius: 50%; background: radial-gradient( circle, #0d0d0c, #060606 70% ); border: 1px solid rgba(255,255,255,.07); } .atlas-radial-chart::after { content: ""; position: absolute; inset: -8px; border-radius: 50%; border: 1px solid rgba(224,189,104,.06); } .atlas-parish-radial:hover .atlas-radial-chart { transform: scale(1.07); box-shadow: 0 0 0 1px rgba(224,189,104,.16), 0 0 38px rgba(224,189,104,.10) !important; } .atlas-radial-core { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; z-index: 2; } .atlas-radial-core strong { color: #fff !important; font-size: 24px !important; font-weight: 650 !important; line-height: 1 !important; } .atlas-radial-core span { margin-top: 6px; color: rgba(255,255,255,.28); font-size: 6px; font-weight: 850; letter-spacing: .13em; } .atlas-radial-name { max-width: 150px; margin-top: 13px; color: rgba(255,255,255,.70); font-size: 9px; font-weight: 650; line-height: 1.3; text-align: center; transition: color .2s ease; } .atlas-parish-radial:hover .atlas-radial-name { color: var(--chart-gold); } /* ========================================================== CATEGORY CONSTELLATION ========================================================== */ .atlas-category-bubbles { display: flex !important; align-items: center !important; justify-content: center !important; flex-wrap: wrap !important; gap: 30px 28px !important; min-height: 300px !important; padding: 25px 12px !important; } .atlas-category-bubble-item { display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 125px; opacity: 0; animation: atlasBubbleAppear .55s ease-out var(--delay) forwards; transition: transform .22s ease; } @keyframes atlasBubbleAppear { from { opacity: 0; transform: scale(.82); } to { opacity: 1; transform: scale(1); } } .atlas-category-bubble-item:hover { transform: translateY(-5px); } .atlas-category-bubble { position: relative; width: var(--bubble-size); height: var(--bubble-size); display: flex; align-items: center; justify-content: center; border-radius: 50%; border: 1px solid rgba( 224, 189, 104, var(--bubble-opacity) ); background: radial-gradient( circle, rgba(224,189,104,.09), rgba(224,189,104,.025) 55%, transparent 72% ); box-shadow: inset 0 0 30px rgba(224,189,104,.025), 0 0 25px rgba(224,189,104,.025); transition: transform .25s ease, border-color .25s ease, box-shadow .25s ease; } .atlas-category-bubble::before { content: ""; position: absolute; inset: 10px; border: 1px solid rgba(224,189,104,.09); border-radius: 50%; } .atlas-category-bubble strong { position: relative; z-index: 3; color: var(--chart-gold); font-size: 25px; font-weight: 650; line-height: 1; } .atlas-category-orbit { position: absolute; inset: -7px; border: 1px dashed rgba(224,189,104,.07); border-radius: 50%; animation: atlasOrbitRotate 22s linear infinite; } @keyframes atlasOrbitRotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } .atlas-category-bubble-item:hover .atlas-category-bubble { transform: scale(1.06); border-color: rgba(224,189,104,.55); box-shadow: 0 0 34px rgba(224,189,104,.10); } .atlas-category-bubble-name { max-width: 155px; min-height: 26px; margin-top: 13px; color: rgba(255,255,255,.68); font-size: 9px; font-weight: 650; line-height: 1.3; text-align: center; transition: color .2s ease; } .atlas-category-bubble-item:hover .atlas-category-bubble-name { color: #fff; } /* ========================================================== STRENGTH DONUT ========================================================== */ .atlas-strength-donut-layout { display: grid !important; grid-template-columns: minmax(280px,.8fr) minmax(360px,1.2fr) !important; align-items: center !important; gap: 50px !important; min-height: 285px !important; padding: 26px 45px !important; } .atlas-strength-donut-zone { display: flex; flex-direction: column; align-items: center; justify-content: center; } .atlas-strength-donut { position: relative; width: 195px; height: 195px; border-radius: 50%; transform: rotate(-90deg); box-shadow: 0 0 45px rgba(224,189,104,.045); animation: atlasDonutAppear .65s ease-out both; transition: transform .28s ease, box-shadow .28s ease; } @keyframes atlasDonutAppear { from { opacity: 0; transform: rotate(-90deg) scale(.78); } to { opacity: 1; transform: rotate(-90deg) scale(1); } } .atlas-strength-donut:hover { transform: rotate(-90deg) scale(1.045); box-shadow: 0 0 55px rgba(224,189,104,.11); } .atlas-strength-donut::before { content: ""; position: absolute; inset: -10px; border-radius: 50%; border: 1px solid rgba(224,189,104,.08); } .atlas-strength-donut-center { position: absolute; inset: 37px; display: flex; flex-direction: column; align-items: center; justify-content: center; border-radius: 50%; background: radial-gradient( circle, #0d0d0c, #060606 ); border: 1px solid rgba(255,255,255,.08); transform: rotate(90deg); } .atlas-strength-donut-center strong { color: #fff; font-size: 34px; font-weight: 650; line-height: 1; } .atlas-strength-donut-center span { margin-top: 8px; color: rgba(255,255,255,.30); font-size: 7px; font-weight: 850; letter-spacing: .13em; } .atlas-donut-caption { margin-top: 23px; color: rgba(255,255,255,.28); font-size: 7px; font-weight: 850; letter-spacing: .14em; } /* ========================================================== DONUT LEGEND ========================================================== */ .atlas-strength-legend { display: flex; flex-direction: column; border-top: 1px solid var(--chart-line); } .atlas-strength-legend-row { display: grid; grid-template-columns: 13px 1fr 50px; align-items: center; gap: 15px; min-height: 57px; padding: 7px 10px; border-bottom: 1px solid var(--chart-line); transition: padding-left .18s ease, background .18s ease; } .atlas-strength-legend-row:hover { padding-left: 17px; background: linear-gradient( 90deg, rgba(224,189,104,.05), transparent 70% ); } .atlas-strength-swatch { width: 9px; height: 9px; border-radius: 50%; background: var(--chart-gold); } .atlas-strength-swatch-1 { opacity: 1; } .atlas-strength-swatch-2 { opacity: .78; } .atlas-strength-swatch-3 { opacity: .52; } .atlas-strength-swatch-4 { opacity: .28; } .atlas-strength-legend-name { display: flex; flex-direction: column; gap: 5px; } .atlas-strength-legend-name > span { color: rgba(255,255,255,.76); font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; } .atlas-strength-legend-name small { color: rgba(255,255,255,.25); font-size: 6px; font-weight: 800; letter-spacing: .10em; } .atlas-strength-legend-row strong { color: var(--chart-gold); font-size: 18px; font-weight: 650; text-align: right; } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 900px) { .atlas-parish-radials { grid-template-columns: repeat(2, 1fr) !important; } .atlas-strength-donut-layout { grid-template-columns: 1fr !important; } } @media (prefers-reduced-motion: reduce) { .atlas-parish-radial, .atlas-category-bubble-item, .atlas-category-orbit, .atlas-strength-donut { animation: none !important; } } /* ========================================================== ATLAS — ANALYTICAL CHART SYSTEM V6 Dot Plot / Treemap / Signal Matrix ========================================================== */ /* ========================================================== SHARED EXPLAINER ========================================================== */ .atlas-chart-explainer { display: flex; align-items: flex-start; justify-content: space-between; gap: 30px; padding: 15px 0 18px; border-bottom: 1px solid rgba(255,255,255,.07); } .atlas-chart-explainer > span { color: var(--atlas-gold-bright); font-size: 7px; font-weight: 850; letter-spacing: .14em; white-space: nowrap; } .atlas-chart-explainer small { max-width: 330px; color: rgba(255,255,255,.34); font-size: 8px; font-weight: 600; line-height: 1.45; text-align: right; } /* ========================================================== 1 — CLEVELAND DOT PLOT ========================================================== */ .atlas-dotplot { padding: 0 4px 10px; } .atlas-dotplot-scale { display: grid; grid-template-columns: 165px minmax(0,1fr) 36px; gap: 12px; margin-top: 18px; } .atlas-dotplot-axis { display: flex; justify-content: space-between; color: rgba(255,255,255,.20); font-size: 7px; font-variant-numeric: tabular-nums; } .atlas-dotplot-body { margin-top: 5px; } .atlas-dotplot-row { display: grid; grid-template-columns: 165px minmax(0,1fr) 36px; align-items: center; gap: 12px; min-height: 47px; border-bottom: 1px solid rgba(255,255,255,.045); opacity: 0; animation: atlasDotRowAppear .42s ease-out var(--row-delay) forwards; transition: background .15s ease; } @keyframes atlasDotRowAppear { from { opacity: 0; transform: translateX(-5px); } to { opacity: 1; transform: translateX(0); } } .atlas-dotplot-row:hover { background: linear-gradient( 90deg, rgba(224,189,104,.045), transparent 70% ); } .atlas-dotplot-label { color: rgba(255,255,255,.76); font-size: 9px; font-weight: 650; } .atlas-dotplot-track { position: relative; height: 24px; border-bottom: 1px solid rgba(255,255,255,.09); } .atlas-gridline { position: absolute; top: 0; bottom: 0; width: 1px; background: rgba(255,255,255,.045); } .atlas-gridline.g25 { left: 25%; } .atlas-gridline.g50 { left: 50%; } .atlas-gridline.g75 { left: 75%; } .atlas-dotplot-stem { position: absolute; left: 0; bottom: -1px; height: 1px; background: linear-gradient( 90deg, rgba(224,189,104,.12), rgba(224,189,104,.60) ); } .atlas-dotplot-point { position: absolute; bottom: -6px; transform: translateX(-50%); width: 12px; height: 12px; display: flex; align-items: center; justify-content: center; border: 1px solid rgba(224,189,104,.55); border-radius: 50%; background: #070707; box-shadow: 0 0 12px rgba(224,189,104,.12); transition: transform .18s ease, box-shadow .18s ease, background .18s ease; } .atlas-dotplot-point span { width: 5px; height: 5px; border-radius: 50%; background: var(--atlas-gold-bright); } .atlas-dotplot-row:hover .atlas-dotplot-point { transform: translateX(-50%) scale(1.25); background: rgba(224,189,104,.08); box-shadow: 0 0 18px rgba(224,189,104,.30); } .atlas-dotplot-value { color: var(--atlas-gold-bright); font-size: 10px; font-weight: 750; text-align: right; font-variant-numeric: tabular-nums; } /* ========================================================== 2 — TREEMAP ========================================================== */ .atlas-treemap-wrapper { padding: 0 4px 8px; } .atlas-treemap { display: grid; grid-template-columns: repeat(6, 1fr); grid-auto-rows: 95px; gap: 7px; margin-top: 18px; } .atlas-treemap-tile { position: relative; display: flex; flex-direction: column; justify-content: space-between; overflow: hidden; padding: 14px; border: 1px solid rgba(224,189,104,.15); background: linear-gradient( 145deg, rgba(224,189,104,.075), rgba(224,189,104,.018) ); opacity: 0; animation: atlasTreemapAppear .48s ease-out var(--tile-delay) forwards; transition: border-color .18s ease, transform .18s ease, background .18s ease; } @keyframes atlasTreemapAppear { from { opacity: 0; transform: scale(.96); } to { opacity: 1; transform: scale(1); } } .atlas-treemap-weight-5 { grid-column: span 3; grid-row: span 2; } .atlas-treemap-weight-4 { grid-column: span 3; grid-row: span 2; } .atlas-treemap-weight-3 { grid-column: span 2; grid-row: span 2; } .atlas-treemap-weight-2 { grid-column: span 2; } .atlas-treemap-weight-1 { grid-column: span 1; } .atlas-treemap-tile:hover { transform: translateY(-3px); border-color: rgba(224,189,104,.48); background: linear-gradient( 145deg, rgba(224,189,104,.12), rgba(224,189,104,.025) ); } .atlas-treemap-tile::after { content: ""; position: absolute; right: -30px; bottom: -30px; width: 85px; height: 85px; border: 1px solid rgba(224,189,104,.055); border-radius: 50%; } .atlas-treemap-rank { color: rgba(255,255,255,.23); font-size: 7px; font-weight: 800; letter-spacing: .10em; } .atlas-treemap-name { max-width: 90%; color: rgba(255,255,255,.82); font-size: 11px; font-weight: 650; line-height: 1.25; } .atlas-treemap-weight-5 .atlas-treemap-name, .atlas-treemap-weight-4 .atlas-treemap-name { font-size: 15px; } .atlas-treemap-bottom { display: flex; align-items: flex-end; gap: 8px; } .atlas-treemap-bottom strong { color: var(--atlas-gold-bright); font-size: 25px; font-weight: 650; line-height: 1; } .atlas-treemap-bottom span { color: rgba(255,255,255,.28); font-size: 7px; padding-bottom: 2px; } /* ========================================================== 3 — SIGNAL MATRIX ========================================================== */ .atlas-signal-matrix-layout { width: 100%; padding: 0 5px 12px; } .atlas-matrix-main { display: grid; grid-template-columns: minmax(0,1.35fr) minmax(280px,.65fr); gap: 45px; align-items: center; min-height: 270px; padding: 25px 10px 10px; } .atlas-matrix-chart { padding: 22px; border: 1px solid rgba(255,255,255,.07); background: linear-gradient( 145deg, rgba(255,255,255,.018), transparent ); } .atlas-matrix-cells { display: grid; grid-template-columns: repeat(10, 1fr); gap: 8px; max-width: 390px; margin: 0 auto; } .atlas-matrix-cell { aspect-ratio: 1 / 1; min-width: 13px; border: 1px solid rgba(224,189,104,.18); background: var(--atlas-gold-bright); box-shadow: 0 0 6px rgba(224,189,104,.05); transition: transform .15s ease, box-shadow .15s ease, opacity .15s ease; } .atlas-matrix-cell:hover { transform: scale(1.35); box-shadow: 0 0 12px rgba(224,189,104,.32); z-index: 2; } .atlas-matrix-group-1 { opacity: 1; } .atlas-matrix-group-2 { opacity: .78; } .atlas-matrix-group-3 { opacity: .48; } .atlas-matrix-group-4 { opacity: .22; } .atlas-matrix-footer { margin-top: 20px; color: rgba(255,255,255,.25); font-size: 7px; font-weight: 800; letter-spacing: .12em; text-align: center; } /* ========================================================== MATRIX LEGEND ========================================================== */ .atlas-matrix-legend { border-top: 1px solid rgba(255,255,255,.07); } .atlas-matrix-legend-row { display: grid; grid-template-columns: 12px 1fr 42px; align-items: center; gap: 13px; min-height: 53px; border-bottom: 1px solid rgba(255,255,255,.07); transition: background .15s ease, padding-left .15s ease; } .atlas-matrix-legend-row:hover { padding-left: 7px; background: linear-gradient( 90deg, rgba(224,189,104,.045), transparent ); } .atlas-matrix-swatch { width: 8px; height: 8px; background: var(--atlas-gold-bright); } .atlas-matrix-legend-row > div { display: flex; flex-direction: column; gap: 4px; } .atlas-matrix-legend-row div strong { color: rgba(255,255,255,.74); font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; } .atlas-matrix-legend-row small { color: rgba(255,255,255,.25); font-size: 6px; font-weight: 800; letter-spacing: .09em; } .atlas-matrix-legend-row > b { color: var(--atlas-gold-bright); font-size: 17px; font-weight: 650; text-align: right; } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 950px) { .atlas-matrix-main { grid-template-columns: 1fr; } .atlas-treemap { grid-template-columns: repeat(4,1fr); } } @media (prefers-reduced-motion: reduce) { .atlas-dotplot-row, .atlas-treemap-tile { animation: none !important; } } /* ========================================================== ATLAS ANALYTICAL VISUAL SYSTEM V7 Radar / Bubble Constellation / Confidence Gauge ========================================================== */ /* ========================================================== RESET OLD VISUAL LAYER INSIDE TREND OUTPUTS ========================================================== */ #trendParishes, #trendCategories, #trendStrength { width: 100% !important; min-width: 0 !important; overflow: visible !important; } .atlas-v7-chart { width: 100% !important; min-width: 0 !important; } /* ========================================================== EXPLAINER ========================================================== */ .atlas-v7-explainer { display: grid !important; grid-template-columns: minmax(220px,.85fr) minmax(250px,1.15fr) !important; gap: 35px !important; align-items: end !important; width: 100% !important; padding: 18px 0 16px !important; border-bottom: 1px solid rgba(255,255,255,.065) !important; } .atlas-v7-explainer > div { display: flex; flex-direction: column; gap: 7px; } .atlas-v7-chart-type { color: var(--atlas-gold-bright) !important; font-size: 7px !important; font-weight: 850 !important; letter-spacing: .14em !important; } .atlas-v7-explainer strong { color: rgba(255,255,255,.80) !important; font-size: 11px !important; font-weight: 650 !important; line-height: 1.3 !important; } .atlas-v7-explainer p { max-width: 420px !important; margin: 0 0 0 auto !important; color: rgba(255,255,255,.34) !important; font-size: 8px !important; line-height: 1.55 !important; text-align: right !important; } /* ========================================================== RADAR CHART ========================================================== */ .atlas-radar-stage { width: 100%; min-height: 335px; display: flex; align-items: center; justify-content: center; padding: 4px 0 0; } .atlas-radar-svg { width: min(100%, 630px); height: auto; overflow: visible; } .atlas-radar-grid { fill: rgba(224,189,104,.012); stroke: rgba(255,255,255,.09); stroke-width: 1; } .atlas-radar-grid:nth-of-type(2) { stroke: rgba(255,255,255,.065); } .atlas-radar-axis { stroke: rgba(255,255,255,.065); stroke-width: 1; } .atlas-radar-area { fill: rgba(224,189,104,.13); } .atlas-radar-outline { fill: none; stroke: var(--atlas-gold-bright); stroke-width: 1.7; filter: drop-shadow( 0 0 6px rgba(224,189,104,.12) ); } .atlas-radar-point-glow { fill: rgba(224,189,104,.08); } .atlas-radar-point { fill: var(--atlas-gold-bright); stroke: #070707; stroke-width: 2; transition: r .15s ease; } .atlas-radar-data-point:hover .atlas-radar-point { r: 7px; } .atlas-radar-center { fill: var(--atlas-gold-bright); } .atlas-radar-label { fill: rgba(255,255,255,.68); font-size: 8px; font-weight: 650; } .atlas-radar-label-value { fill: var(--atlas-gold-bright); font-size: 6px; font-weight: 800; letter-spacing: .08em; } /* ========================================================== CATEGORY BUBBLE CONSTELLATION ========================================================== */ .atlas-constellation-stage { width: 100%; min-height: 335px; display: flex; align-items: center; justify-content: center; } .atlas-constellation-svg { width: min(100%, 640px); height: auto; overflow: visible; } .atlas-constellation-line { stroke: rgba(224,189,104,.075); stroke-width: 1; stroke-dasharray: 3 6; } .atlas-category-node { opacity: 0; animation: atlasNodeEnter .55s ease-out var(--node-delay) forwards; cursor: default; } @keyframes atlasNodeEnter { from { opacity: 0; transform: scale(.90); transform-origin: center; } to { opacity: 1; transform: scale(1); } } .atlas-category-halo { fill: none; stroke: rgba(224,189,104,.055); stroke-width: 1; stroke-dasharray: 2 5; } .atlas-category-circle { fill: rgba(224,189,104,.055); stroke: var(--atlas-gold-bright); stroke-opacity: .55; stroke-width: 1.3; transition: fill .18s ease, stroke-opacity .18s ease; } .atlas-category-inner-ring { fill: rgba(0,0,0,.12); stroke: rgba(224,189,104,.10); stroke-width: 1; } .atlas-category-node:hover .atlas-category-circle { fill: rgba(224,189,104,.10); stroke-opacity: 1; filter: drop-shadow( 0 0 10px rgba(224,189,104,.15) ); } .atlas-category-count { fill: var(--atlas-gold-bright); font-size: 24px; font-weight: 650; } .atlas-category-label { fill: rgba(255,255,255,.69); font-size: 8px; font-weight: 650; } /* ========================================================== CONFIDENCE GAUGE ========================================================== */ .atlas-gauge-content { display: grid !important; grid-template-columns: minmax(360px,1fr) minmax(280px,.72fr) !important; gap: 60px !important; align-items: center !important; min-height: 315px !important; padding: 22px 20px 5px !important; } .atlas-gauge-stage { min-width: 0; display: flex; align-items: center; justify-content: center; } .atlas-gauge-svg { width: min(100%, 470px); height: auto; overflow: visible; } .atlas-gauge-track { fill: rgba(224,189,104,.055); } .atlas-gauge-segment { fill: var(--atlas-gold-bright); opacity: var(--segment-opacity); stroke: #070707; stroke-width: 1; transition: opacity .18s ease, filter .18s ease; } .atlas-gauge-segment:hover { opacity: 1 !important; filter: drop-shadow( 0 0 8px rgba(224,189,104,.22) ); } .atlas-gauge-total { fill: #fff; font-size: 35px; font-weight: 650; } .atlas-gauge-total-label { fill: rgba(255,255,255,.30); font-size: 7px; font-weight: 800; letter-spacing: .12em; } .atlas-gauge-low-label, .atlas-gauge-high-label { fill: rgba(255,255,255,.23); font-size: 6px; font-weight: 800; letter-spacing: .10em; } /* ========================================================== GAUGE LEGEND ========================================================== */ .atlas-gauge-legend { width: 100%; border-top: 1px solid rgba(255,255,255,.07); } .atlas-gauge-legend-row { display: grid; grid-template-columns: 11px 1fr 40px; gap: 13px; align-items: center; min-height: 52px; padding: 6px 5px; border-bottom: 1px solid rgba(255,255,255,.06); transition: background .15s ease, padding-left .15s ease; } .atlas-gauge-legend-row:hover { padding-left: 10px; background: linear-gradient( 90deg, rgba(224,189,104,.045), transparent ); } .atlas-gauge-swatch { width: 8px; height: 8px; background: var(--atlas-gold-bright); } .atlas-gauge-swatch-1 { opacity: 1; } .atlas-gauge-swatch-2 { opacity: .78; } .atlas-gauge-swatch-3 { opacity: .52; } .atlas-gauge-swatch-4 { opacity: .27; } .atlas-gauge-legend-copy { display: flex; flex-direction: column; gap: 4px; } .atlas-gauge-legend-copy strong { color: rgba(255,255,255,.76); font-size: 9px; font-weight: 700; letter-spacing: .055em; text-transform: uppercase; } .atlas-gauge-legend-copy small { color: rgba(255,255,255,.25); font-size: 6px; font-weight: 800; letter-spacing: .08em; } .atlas-gauge-legend-row b { color: var(--atlas-gold-bright); font-size: 17px; font-weight: 650; text-align: right; } /* ========================================================== TREND PANELS — MORE ROOM FOR ANALYTICS ========================================================== */ #trends-section .trend-panels { align-items: stretch !important; } #trends-section .trend-panel { min-height: 445px !important; } #trends-section .trend-strength-panel { min-height: 410px !important; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 900px) { .atlas-v7-explainer { grid-template-columns: 1fr !important; } .atlas-v7-explainer p { margin: 0 !important; text-align: left !important; } .atlas-gauge-content { grid-template-columns: 1fr !important; gap: 20px !important; } } @media (prefers-reduced-motion: reduce) { .atlas-category-node { animation: none !important; opacity: 1 !important; } } /* ========================================================== ATLAS ANALYTICS V8 FULL-SCALE VISUALIZATION LAYOUT Fix old Trends CSS squeezing the new SVG charts ========================================================== */ /* ========================================================== CRITICAL RESET Old trend-ranking / strength-grid CSS was constraining the new visualizations. ========================================================== */ #trendParishes, #trendCategories, #trendStrength { display: block !important; grid-template-columns: none !important; grid-template-rows: none !important; width: 100% !important; max-width: none !important; min-width: 0 !important; height: auto !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; overflow: visible !important; border: none !important; background: transparent !important; } /* Completely neutralize old rules that treated children of trendStrength like four metric cards. */ #trendStrength > * { display: block !important; grid-column: auto !important; grid-row: auto !important; width: 100% !important; max-width: none !important; min-height: 0 !important; margin: 0 !important; padding: 0 !important; border: none !important; background: transparent !important; transform: none; } /* Same reset for the old trend-ranking children. */ #trendParishes > *, #trendCategories > * { width: 100% !important; max-width: none !important; margin: 0 !important; } /* ========================================================== TOP TWO ANALYTICAL PANELS ========================================================== */ #trends-section .trend-panels { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; gap: 18px !important; align-items: stretch !important; } #trends-section .trend-panel { width: 100% !important; min-width: 0 !important; min-height: 530px !important; padding: 25px 25px 18px !important; } /* ========================================================== CHART INTRODUCTION Make explanation useful but compact. ========================================================== */ .atlas-v7-explainer { display: flex !important; align-items: flex-start !important; justify-content: space-between !important; gap: 28px !important; width: 100% !important; padding: 17px 0 14px !important; border-bottom: 1px solid rgba(255,255,255,.065) !important; } .atlas-v7-explainer > div { flex: 1 1 58% !important; min-width: 0 !important; } .atlas-v7-explainer p { flex: 0 1 250px !important; max-width: 250px !important; margin: 0 !important; color: rgba(255,255,255,.34) !important; font-size: 8px !important; line-height: 1.55 !important; text-align: right !important; } .atlas-v7-chart-type { display: block !important; margin-bottom: 7px !important; } .atlas-v7-explainer strong { display: block !important; max-width: 300px !important; color: rgba(255,255,255,.82) !important; font-size: 11px !important; line-height: 1.35 !important; } /* ========================================================== RADAR — MAKE IT LARGE ========================================================== */ .atlas-radar-layout { width: 100% !important; } .atlas-radar-stage { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 365px !important; padding: 5px 0 0 !important; overflow: visible !important; } .atlas-radar-svg { display: block !important; width: 100% !important; max-width: 590px !important; height: 355px !important; margin: 0 auto !important; overflow: visible !important; } /* More visible analytical grid */ .atlas-radar-grid { fill: rgba(224,189,104,.012) !important; stroke: rgba(224,189,104,.15) !important; stroke-width: 1 !important; } .atlas-radar-axis { stroke: rgba(255,255,255,.09) !important; } .atlas-radar-area { fill: rgba(224,189,104,.17) !important; filter: drop-shadow( 0 0 14px rgba(224,189,104,.045) ); } .atlas-radar-outline { stroke: var(--atlas-gold-bright) !important; stroke-width: 2.2 !important; } .atlas-radar-point { fill: var(--atlas-gold-bright) !important; r: 5.5px; } .atlas-radar-label { fill: rgba(255,255,255,.78) !important; font-size: 9px !important; } .atlas-radar-label-value { fill: var(--atlas-gold-bright) !important; font-size: 7px !important; } /* ========================================================== CONSTELLATION — MAKE IT LARGE ========================================================== */ .atlas-constellation-layout { width: 100% !important; } .atlas-constellation-stage { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 365px !important; padding: 5px 0 0 !important; overflow: visible !important; } .atlas-constellation-svg { display: block !important; width: 100% !important; max-width: 600px !important; height: 355px !important; margin: 0 auto !important; overflow: visible !important; } .atlas-category-circle { stroke: var(--atlas-gold-bright) !important; stroke-width: 1.5px !important; fill: rgba(224,189,104,.075) !important; } .atlas-category-inner-ring { stroke: rgba(224,189,104,.17) !important; } .atlas-category-halo { stroke: rgba(224,189,104,.10) !important; } .atlas-category-count { fill: var(--atlas-gold-bright) !important; font-size: 27px !important; } .atlas-category-label { fill: rgba(255,255,255,.77) !important; font-size: 9px !important; } .atlas-constellation-line { stroke: rgba(224,189,104,.12) !important; } /* ========================================================== STRENGTH DISTRIBUTION FORCE FULL-WIDTH ANALYTICAL PANEL ========================================================== */ #trends-section .trend-strength-panel { display: block !important; width: 100% !important; min-height: 500px !important; margin-top: 18px !important; padding: 25px 25px 22px !important; grid-column: 1 / -1 !important; } /* The original trendStrength grid must no longer behave like the four-column strength-card grid. */ #trendStrength.trend-strength-grid { display: block !important; grid-template-columns: none !important; gap: 0 !important; width: 100% !important; margin: 0 !important; } /* ========================================================== CONFIDENCE GAUGE — TRUE FULL WIDTH ========================================================== */ .atlas-gauge-layout { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; } .atlas-gauge-content { display: grid !important; grid-template-columns: minmax(460px, 1.1fr) minmax(320px, .9fr) !important; align-items: center !important; gap: 75px !important; width: 100% !important; min-height: 340px !important; padding: 22px 55px 8px !important; } /* Large centered gauge */ .atlas-gauge-stage { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-width: 0 !important; overflow: visible !important; } .atlas-gauge-svg { display: block !important; width: 100% !important; max-width: 560px !important; height: 315px !important; margin: 0 auto !important; overflow: visible !important; } /* Larger gauge text */ .atlas-gauge-total { font-size: 42px !important; fill: #fff !important; } .atlas-gauge-total-label { font-size: 8px !important; } /* stronger arc */ .atlas-gauge-track { fill: rgba(224,189,104,.065) !important; } .atlas-gauge-segment { fill: var(--atlas-gold-bright) !important; stroke: #060606 !important; stroke-width: 2px !important; } /* ========================================================== CONFIDENCE LEGEND ========================================================== */ .atlas-gauge-legend { width: 100% !important; max-width: 390px !important; margin: 0 auto !important; border-top: 1px solid rgba(255,255,255,.08) !important; } .atlas-gauge-legend-row { min-height: 62px !important; grid-template-columns: 12px minmax(0,1fr) 48px !important; padding: 7px 8px !important; } .atlas-gauge-legend-copy strong { font-size: 10px !important; } .atlas-gauge-legend-copy small { font-size: 7px !important; } .atlas-gauge-legend-row b { color: var(--atlas-gold-bright) !important; font-size: 21px !important; } /* ========================================================== GOLD CONSISTENCY Everything uses the same Atlas gold. ========================================================== */ .atlas-radar-outline, .atlas-radar-point, .atlas-category-circle, .atlas-category-count, .atlas-gauge-segment, .atlas-gauge-swatch, .atlas-gauge-legend-row b, .atlas-radar-label-value { color: var(--atlas-gold-bright) !important; } /* ========================================================== INTERACTION ========================================================== */ .atlas-radar-svg, .atlas-constellation-svg, .atlas-gauge-svg { transition: transform .22s ease, filter .22s ease !important; } .atlas-radar-stage:hover .atlas-radar-svg, .atlas-constellation-stage:hover .atlas-constellation-svg { transform: scale(1.015); filter: drop-shadow( 0 8px 22px rgba(0,0,0,.22) ); } .atlas-gauge-stage:hover .atlas-gauge-svg { transform: scale(1.02); } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 1050px) { #trends-section .trend-panels { grid-template-columns: 1fr !important; } .atlas-gauge-content { grid-template-columns: 1fr !important; gap: 25px !important; padding: 22px 20px !important; } } @media (max-width: 650px) { .atlas-v7-explainer { display: block !important; } .atlas-v7-explainer p { max-width: none !important; margin-top: 10px !important; text-align: left !important; } .atlas-radar-svg, .atlas-constellation-svg { height: auto !important; } } /* ========================================================== ATLAS ANALYTICS V9 MAKE GRAPH 1 MATCH GRAPH 3 IN SIZE / CLARITY ========================================================== */ /* ========================================================== MOST ACTIVE PARISHES — FULL WIDTH ========================================================== */ /* The first trend panel should no longer share a 50/50 row. Make it span the entire Trends width, like Strength Distribution. */ #trends-section .trend-panels { grid-template-columns: 1fr !important; } /* Give each analytical panel full width. */ #trends-section .trend-panel { width: 100% !important; max-width: none !important; min-height: 600px !important; } /* ========================================================== RADAR PANEL — LARGE ANALYTICAL LAYOUT ========================================================== */ #trendParishes { width: 100% !important; } .atlas-radar-layout { display: block !important; width: 100% !important; max-width: none !important; } /* ========================================================== RADAR EXPLAINER — SAME FEEL AS GRAPH 3 ========================================================== */ .atlas-radar-layout .atlas-v7-explainer { display: grid !important; grid-template-columns: minmax(340px,1fr) minmax(360px,.8fr) !important; align-items: center !important; gap: 55px !important; padding: 20px 0 18px !important; } .atlas-radar-layout .atlas-v7-explainer > div { max-width: 500px !important; } .atlas-radar-layout .atlas-v7-chart-type { font-size: 8px !important; letter-spacing: .15em !important; } .atlas-radar-layout .atlas-v7-explainer strong { max-width: 430px !important; font-size: 14px !important; line-height: 1.35 !important; } .atlas-radar-layout .atlas-v7-explainer p { max-width: 420px !important; margin: 0 0 0 auto !important; font-size: 9px !important; line-height: 1.6 !important; text-align: right !important; } /* ========================================================== RADAR STAGE — MUCH LARGER ========================================================== */ .atlas-radar-stage { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 470px !important; padding: 10px 30px 20px !important; overflow: visible !important; } /* This is the main fix: make the SVG dramatically larger. */ .atlas-radar-svg { width: min(100%, 900px) !important; max-width: 900px !important; height: 470px !important; margin: 0 auto !important; overflow: visible !important; } /* ========================================================== RADAR GEOMETRY — MORE LEGIBLE ========================================================== */ .atlas-radar-grid { stroke: rgba(224,189,104,.18) !important; stroke-width: 1.15 !important; } .atlas-radar-axis { stroke: rgba(255,255,255,.11) !important; stroke-width: 1 !important; } .atlas-radar-area { fill: rgba(224,189,104,.20) !important; filter: drop-shadow( 0 0 18px rgba(224,189,104,.055) ) !important; } .atlas-radar-outline { stroke: var(--atlas-gold-bright) !important; stroke-width: 2.5 !important; filter: drop-shadow( 0 0 8px rgba(224,189,104,.16) ) !important; } .atlas-radar-point-glow { fill: rgba(224,189,104,.12) !important; } .atlas-radar-point { r: 6px !important; fill: var(--atlas-gold-bright) !important; stroke: #050505 !important; stroke-width: 2.2 !important; } /* ========================================================== RADAR LABELS — MUCH MORE READABLE ========================================================== */ .atlas-radar-label { fill: rgba(255,255,255,.84) !important; font-size: 11px !important; font-weight: 700 !important; } .atlas-radar-label-value { fill: var(--atlas-gold-bright) !important; font-size: 8px !important; font-weight: 850 !important; letter-spacing: .08em !important; } /* ========================================================== INTERACTION ========================================================== */ .atlas-radar-stage { transition: background .2s ease !important; } .atlas-radar-stage:hover { background: radial-gradient( circle at center, rgba(224,189,104,.025), transparent 52% ) !important; } .atlas-radar-stage:hover .atlas-radar-svg { transform: scale(1.02) !important; } .atlas-radar-data-point { cursor: pointer; } .atlas-radar-data-point:hover .atlas-radar-point { r: 8px !important; filter: drop-shadow( 0 0 8px rgba(224,189,104,.45) ) !important; } /* ========================================================== KEEP LEADING CATEGORIES FULL WIDTH TOO ========================================================== */ /* Since Graph 1 is now full width, Graph 2 should also get its own row. This keeps the entire Trends section balanced. */ #trendCategories { width: 100% !important; } .atlas-constellation-layout { width: 100% !important; } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 900px) { .atlas-radar-layout .atlas-v7-explainer { grid-template-columns: 1fr !important; } .atlas-radar-layout .atlas-v7-explainer p { margin: 10px 0 0 !important; text-align: left !important; } .atlas-radar-svg { width: 100% !important; height: auto !important; } } /* ========================================================== ATLAS ANALYTICS V10 RADAR TEXT CLEANUP / REMOVE LEADER ========================================================== */ /* ========================================================== REMOVE "LEADER" LABEL ========================================================== */ #trendParishes::after, #trendParishes .leader, #trendParishes [class*="leader"], #trendParishes [data-leader] { display: none !important; } /* Older panel styling may generate LEADER with a pseudo-element. */ #trendParishes > *::after { content: none !important; display: none !important; } /* ========================================================== RADAR INTRODUCTION — CLEANER + LARGER ========================================================== */ .atlas-radar-layout .atlas-v7-explainer { display: grid !important; grid-template-columns: minmax(380px, 1.1fr) minmax(350px, .9fr) !important; align-items: center !important; gap: 60px !important; padding: 24px 0 20px !important; } .atlas-radar-layout .atlas-v7-chart-type { margin-bottom: 9px !important; color: var(--atlas-gold-bright) !important; font-size: 9px !important; font-weight: 850 !important; line-height: 1 !important; letter-spacing: .16em !important; } .atlas-radar-layout .atlas-v7-explainer strong { max-width: 520px !important; color: rgba(255,255,255,.92) !important; font-size: 16px !important; font-weight: 650 !important; line-height: 1.35 !important; letter-spacing: -.01em !important; } .atlas-radar-layout .atlas-v7-explainer p { max-width: 440px !important; margin: 0 0 0 auto !important; color: rgba(255,255,255,.46) !important; font-size: 10px !important; line-height: 1.65 !important; text-align: right !important; } /* ========================================================== RADAR LABELS — LARGER + CLEANER ========================================================== */ .atlas-radar-label { fill: rgba(255,255,255,.88) !important; font-size: 12px !important; font-weight: 700 !important; letter-spacing: .005em !important; } .atlas-radar-label-value { fill: var(--atlas-gold-bright) !important; font-size: 8.5px !important; font-weight: 850 !important; letter-spacing: .08em !important; } /* ========================================================== RADAR ITSELF — SLIGHTLY MORE VISUAL WEIGHT ========================================================== */ .atlas-radar-outline { stroke-width: 2.8 !important; } .atlas-radar-point { r: 6.5px !important; } .atlas-radar-point-glow { opacity: .9 !important; } /* ========================================================== PANEL SPACING ========================================================== */ #trendParishes { padding-top: 2px !important; } .atlas-radar-stage { padding-top: 16px !important; padding-bottom: 28px !important; } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 900px) { .atlas-radar-layout .atlas-v7-explainer { grid-template-columns: 1fr !important; gap: 14px !important; } .atlas-radar-layout .atlas-v7-explainer p { max-width: none !important; margin: 0 !important; text-align: left !important; } } /* ========================================================== ATLAS ANALYTICS V11 LEADING CATEGORIES TEXT CLEANUP / REMOVE LEADER ========================================================== */ /* ========================================================== REMOVE "LEADER" ========================================================== */ #trendCategories::after, #trendCategories .leader, #trendCategories [class*="leader"], #trendCategories [data-leader] { display: none !important; } #trendCategories > *::after { content: none !important; display: none !important; } /* ========================================================== CONSTELLATION INTRODUCTION Cleaner + larger like Graph 1 ========================================================== */ .atlas-constellation-layout .atlas-v7-explainer { display: grid !important; grid-template-columns: minmax(380px, 1.1fr) minmax(350px, .9fr) !important; align-items: center !important; gap: 60px !important; padding: 24px 0 20px !important; } .atlas-constellation-layout .atlas-v7-chart-type { margin-bottom: 9px !important; color: var(--atlas-gold-bright) !important; font-size: 9px !important; font-weight: 850 !important; line-height: 1 !important; letter-spacing: .16em !important; } .atlas-constellation-layout .atlas-v7-explainer strong { max-width: 520px !important; color: rgba(255,255,255,.92) !important; font-size: 16px !important; font-weight: 650 !important; line-height: 1.35 !important; letter-spacing: -.01em !important; } .atlas-constellation-layout .atlas-v7-explainer p { max-width: 440px !important; margin: 0 0 0 auto !important; color: rgba(255,255,255,.46) !important; font-size: 10px !important; line-height: 1.65 !important; text-align: right !important; } /* ========================================================== CONSTELLATION LABELS Larger and easier to read ========================================================== */ .atlas-category-count { fill: var(--atlas-gold-bright) !important; font-size: 31px !important; font-weight: 650 !important; } .atlas-category-label { fill: rgba(255,255,255,.86) !important; font-size: 11px !important; font-weight: 700 !important; } /* ========================================================== MAKE BUBBLES A LITTLE STRONGER VISUALLY ========================================================== */ .atlas-category-circle { fill: rgba(224,189,104,.085) !important; stroke: var(--atlas-gold-bright) !important; stroke-width: 1.8px !important; stroke-opacity: .72 !important; } .atlas-category-inner-ring { stroke: rgba(224,189,104,.20) !important; stroke-width: 1.1px !important; } .atlas-category-halo { stroke: rgba(224,189,104,.12) !important; } .atlas-constellation-line { stroke: rgba(224,189,104,.14) !important; stroke-width: 1.1px !important; } /* ========================================================== CONSTELLATION STAGE Give the visual more breathing room ========================================================== */ .atlas-constellation-stage { min-height: 470px !important; padding: 16px 30px 28px !important; } .atlas-constellation-svg { width: min(100%, 900px) !important; max-width: 900px !important; height: 470px !important; margin: 0 auto !important; overflow: visible !important; } /* ========================================================== INTERACTION ========================================================== */ .atlas-category-node:hover .atlas-category-circle { fill: rgba(224,189,104,.14) !important; stroke-opacity: 1 !important; filter: drop-shadow( 0 0 12px rgba(224,189,104,.22) ) !important; } .atlas-category-node:hover .atlas-category-count { filter: drop-shadow( 0 0 8px rgba(224,189,104,.28) ); } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 900px) { .atlas-constellation-layout .atlas-v7-explainer { grid-template-columns: 1fr !important; gap: 14px !important; } .atlas-constellation-layout .atlas-v7-explainer p { max-width: none !important; margin: 0 !important; text-align: left !important; } .atlas-constellation-svg { width: 100% !important; height: auto !important; } } /* ========================================================== ATLAS ANALYTICS V12 LARGER + CLEARER GEOGRAPHIC RADAR ========================================================== */ /* Give the chart more physical presence */ .atlas-radar-stage { min-height: 520px !important; padding: 10px 15px 25px !important; overflow: visible !important; } /* Enlarge the SVG substantially without changing the underlying chart/data. */ .atlas-radar-svg { width: min(100%, 1080px) !important; max-width: 1080px !important; height: 520px !important; margin: 0 auto !important; overflow: visible !important; transform: scale(1.16) !important; transform-origin: center center !important; transition: transform .2s ease !important; } /* Keep hover subtle */ .atlas-radar-stage:hover .atlas-radar-svg { transform: scale(1.18) !important; } /* ========================================================== RADAR GRID — CLEARER ========================================================== */ .atlas-radar-grid { stroke: rgba(224,189,104,.28) !important; stroke-width: 1.25px !important; } .atlas-radar-axis { stroke: rgba(224,189,104,.17) !important; stroke-width: 1px !important; } .atlas-radar-area { fill: rgba(224,189,104,.24) !important; } .atlas-radar-outline { stroke: var(--atlas-gold-bright) !important; stroke-width: 3px !important; filter: drop-shadow( 0 0 9px rgba(224,189,104,.18) ) !important; } /* ========================================================== DATA POINTS ========================================================== */ .atlas-radar-point { r: 7px !important; fill: var(--atlas-gold-bright) !important; stroke: #080808 !important; stroke-width: 2.5px !important; filter: drop-shadow( 0 0 5px rgba(224,189,104,.32) ) !important; } .atlas-radar-point-glow { opacity: 1 !important; } /* ========================================================== PARISH NAMES ========================================================== */ .atlas-radar-label { fill: rgba(255,255,255,.94) !important; font-size: 13px !important; font-weight: 700 !important; letter-spacing: .005em !important; } /* SIGNAL COUNTS */ .atlas-radar-label-value { fill: var(--atlas-gold-bright) !important; font-size: 9px !important; font-weight: 900 !important; letter-spacing: .09em !important; } /* ========================================================== EXPLANATION TEXT Slightly easier to read too ========================================================== */ .atlas-radar-layout .atlas-v7-explainer p { color: rgba(255,255,255,.56) !important; font-size: 11px !important; line-height: 1.6 !important; max-width: 470px !important; } /* Main description */ .atlas-radar-layout .atlas-v7-explainer strong { font-size: 17px !important; line-height: 1.35 !important; } /* Gold descriptor */ .atlas-radar-layout .atlas-v7-chart-type { font-size: 9px !important; letter-spacing: .17em !important; } /* ========================================================== RESPONSIVE SAFETY ========================================================== */ @media (max-width: 900px) { .atlas-radar-svg { width: 100% !important; max-width: 100% !important; height: auto !important; transform: scale(1) !important; } .atlas-radar-stage:hover .atlas-radar-svg { transform: scale(1) !important; } } /* ========================================================== ATLAS ANALYTICS V13 LARGER + CLEARER CATEGORY CONSTELLATION ========================================================== */ /* ========================================================== INTRODUCTION Match the visual hierarchy of Graph 1 ========================================================== */ .atlas-constellation-layout .atlas-v7-explainer { display: grid !important; grid-template-columns: minmax(380px, 1.1fr) minmax(350px, .9fr) !important; align-items: center !important; gap: 60px !important; padding: 24px 0 20px !important; } .atlas-constellation-layout .atlas-v7-chart-type { margin-bottom: 9px !important; color: var(--atlas-gold-bright) !important; font-size: 9px !important; font-weight: 850 !important; line-height: 1 !important; letter-spacing: .17em !important; } .atlas-constellation-layout .atlas-v7-explainer strong { max-width: 520px !important; color: rgba(255,255,255,.92) !important; font-size: 17px !important; font-weight: 650 !important; line-height: 1.35 !important; letter-spacing: -.01em !important; } .atlas-constellation-layout .atlas-v7-explainer p { max-width: 470px !important; margin: 0 0 0 auto !important; color: rgba(255,255,255,.56) !important; font-size: 11px !important; line-height: 1.6 !important; text-align: right !important; } /* ========================================================== CONSTELLATION STAGE Give the graphic the same presence as the radar ========================================================== */ .atlas-constellation-stage { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; min-height: 540px !important; padding: 10px 15px 28px !important; overflow: visible !important; } .atlas-constellation-svg { display: block !important; width: min(100%, 1080px) !important; max-width: 1080px !important; height: 520px !important; margin: 0 auto !important; overflow: visible !important; transform: scale(1.08) !important; transform-origin: center center !important; transition: transform .2s ease, filter .2s ease !important; } .atlas-constellation-stage:hover .atlas-constellation-svg { transform: scale(1.10) !important; } /* ========================================================== BUBBLES Stronger, clearer, premium ========================================================== */ .atlas-category-circle { fill: rgba(224,189,104,.09) !important; stroke: var(--atlas-gold-bright) !important; stroke-width: 2px !important; stroke-opacity: .78 !important; filter: drop-shadow( 0 0 8px rgba(224,189,104,.06) ) !important; } .atlas-category-inner-ring { stroke: rgba(224,189,104,.23) !important; stroke-width: 1.2px !important; } .atlas-category-halo { stroke: rgba(224,189,104,.13) !important; stroke-width: 1px !important; } .atlas-category-node:hover .atlas-category-circle { fill: rgba(224,189,104,.15) !important; stroke-opacity: 1 !important; filter: drop-shadow( 0 0 16px rgba(224,189,104,.23) ) !important; } /* ========================================================== CONNECTION NETWORK ========================================================== */ .atlas-constellation-line { stroke: rgba(224,189,104,.15) !important; stroke-width: 1.15px !important; stroke-dasharray: 3 7 !important; } /* ========================================================== COUNTS ========================================================== */ .atlas-category-count { fill: var(--atlas-gold-bright) !important; font-size: 32px !important; font-weight: 650 !important; letter-spacing: -.02em !important; filter: drop-shadow( 0 0 6px rgba(224,189,104,.12) ); } /* ========================================================== CATEGORY LABELS ========================================================== */ .atlas-category-label { fill: rgba(255,255,255,.91) !important; font-size: 11.5px !important; font-weight: 700 !important; letter-spacing: .005em !important; } /* ========================================================== HOVER RESPONSE ========================================================== */ .atlas-category-node { cursor: pointer !important; } .atlas-category-node:hover .atlas-category-count { filter: drop-shadow( 0 0 10px rgba(224,189,104,.35) ) !important; } /* The SVG itself should not feel cramped against the bottom or side of the panel. */ #trendCategories { padding-bottom: 12px !important; } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 900px) { .atlas-constellation-layout .atlas-v7-explainer { grid-template-columns: 1fr !important; gap: 14px !important; } .atlas-constellation-layout .atlas-v7-explainer p { max-width: none !important; margin: 0 !important; text-align: left !important; } .atlas-constellation-svg { width: 100% !important; max-width: 100% !important; height: auto !important; transform: scale(1) !important; } .atlas-constellation-stage:hover .atlas-constellation-svg { transform: scale(1) !important; } } /* ========================================================== ATLAS ANALYTICS V14 CATEGORY CONSTELLATION — FIT + CENTER ========================================================== */ /* ---------------------------------------------------------- Keep the complete visualization inside the panel ---------------------------------------------------------- */ #trendCategories { width: 100% !important; max-width: 100% !important; overflow: hidden !important; padding-left: 0 !important; padding-right: 0 !important; } .atlas-constellation-layout { width: 100% !important; max-width: 100% !important; overflow: hidden !important; } /* ---------------------------------------------------------- Stage ---------------------------------------------------------- */ .atlas-constellation-stage { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; max-width: 100% !important; min-height: 525px !important; padding: 12px 40px 30px !important; overflow: hidden !important; box-sizing: border-box !important; } /* ---------------------------------------------------------- SVG Remove previous 1.08 / 1.10 scaling that was causing spill. ---------------------------------------------------------- */ .atlas-constellation-svg { display: block !important; width: 100% !important; max-width: 980px !important; height: 500px !important; margin: 0 auto !important; transform: none !important; transform-origin: center center !important; overflow: visible !important; } /* Keep hover elegant without enlarging the whole SVG */ .atlas-constellation-stage:hover .atlas-constellation-svg { transform: none !important; filter: drop-shadow( 0 8px 20px rgba(0,0,0,.20) ) !important; } /* ---------------------------------------------------------- CATEGORY LABELS More room + slightly cleaner typography ---------------------------------------------------------- */ .atlas-category-label { fill: rgba(255,255,255,.92) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: 0 !important; } /* ---------------------------------------------------------- Counts ---------------------------------------------------------- */ .atlas-category-count { font-size: 31px !important; fill: var(--atlas-gold-bright) !important; } /* ---------------------------------------------------------- Bubble clarity ---------------------------------------------------------- */ .atlas-category-circle { stroke-width: 1.8px !important; stroke-opacity: .78 !important; } .atlas-category-inner-ring { stroke: rgba(224,189,104,.22) !important; } .atlas-category-halo { stroke: rgba(224,189,104,.10) !important; } /* ---------------------------------------------------------- Make sure the parent panel itself doesn't crop strangely ---------------------------------------------------------- */ #trends-section .trend-panel:has(#trendCategories) { overflow: hidden !important; box-sizing: border-box !important; } /* ---------------------------------------------------------- Laptop widths ---------------------------------------------------------- */ @media (max-width: 1200px) { .atlas-constellation-stage { padding-left: 20px !important; padding-right: 20px !important; } .atlas-constellation-svg { max-width: 900px !important; height: 475px !important; } } /* ---------------------------------------------------------- Mobile / tablet ---------------------------------------------------------- */ @media (max-width: 900px) { .atlas-constellation-stage { min-height: 400px !important; padding: 10px !important; } .atlas-constellation-svg { width: 100% !important; max-width: 100% !important; height: auto !important; } } /* ========================================================== ATLAS ANALYTICS V15 GRAPH 3 — TEXT CLARITY / READABILITY ========================================================== */ /* ========================================================== GRAPH 3 INTRO Match Graphs 1 and 2 ========================================================== */ .atlas-gauge-layout .atlas-v7-explainer { display: grid !important; grid-template-columns: minmax(380px, 1.1fr) minmax(350px, .9fr) !important; align-items: center !important; gap: 60px !important; padding: 24px 0 20px !important; } .atlas-gauge-layout .atlas-v7-chart-type { margin-bottom: 9px !important; color: var(--atlas-gold-bright) !important; font-size: 9px !important; font-weight: 850 !important; line-height: 1 !important; letter-spacing: .17em !important; } .atlas-gauge-layout .atlas-v7-explainer strong { max-width: 520px !important; color: rgba(255,255,255,.92) !important; font-size: 17px !important; font-weight: 650 !important; line-height: 1.35 !important; letter-spacing: -.01em !important; } .atlas-gauge-layout .atlas-v7-explainer p { max-width: 470px !important; margin: 0 0 0 auto !important; color: rgba(255,255,255,.56) !important; font-size: 11px !important; line-height: 1.6 !important; text-align: right !important; } /* ========================================================== GAUGE CENTER TEXT ========================================================== */ .atlas-gauge-total { fill: #ffffff !important; font-size: 48px !important; font-weight: 650 !important; letter-spacing: -.03em !important; } .atlas-gauge-total-label { fill: rgba(255,255,255,.46) !important; font-size: 9px !important; font-weight: 850 !important; letter-spacing: .13em !important; } /* ========================================================== LOWER / HIGHER CONFIDENCE LABELS ========================================================== */ .atlas-gauge-low-label, .atlas-gauge-high-label { fill: rgba(255,255,255,.46) !important; font-size: 8px !important; font-weight: 800 !important; letter-spacing: .10em !important; } /* ========================================================== LEGEND LABELS ========================================================== */ .atlas-gauge-legend-copy strong { color: rgba(255,255,255,.90) !important; font-size: 11px !important; font-weight: 750 !important; line-height: 1.2 !important; letter-spacing: .06em !important; } .atlas-gauge-legend-copy small { color: rgba(255,255,255,.42) !important; font-size: 7.5px !important; font-weight: 800 !important; line-height: 1.2 !important; letter-spacing: .09em !important; } .atlas-gauge-legend-row b { color: var(--atlas-gold-bright) !important; font-size: 22px !important; font-weight: 650 !important; line-height: 1 !important; } /* ========================================================== LEGEND ROW SPACING ========================================================== */ .atlas-gauge-legend-row { min-height: 68px !important; padding: 10px 8px !important; grid-template-columns: 12px minmax(0,1fr) 52px !important; } /* ========================================================== SWATCHES Slightly larger / clearer ========================================================== */ .atlas-gauge-swatch { width: 9px !important; height: 9px !important; } /* ========================================================== ARC LABEL CLARITY ========================================================== */ .atlas-gauge-track { fill: rgba(224,189,104,.075) !important; } .atlas-gauge-segment { stroke: #060606 !important; stroke-width: 2.2px !important; } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 900px) { .atlas-gauge-layout .atlas-v7-explainer { grid-template-columns: 1fr !important; gap: 14px !important; } .atlas-gauge-layout .atlas-v7-explainer p { max-width: none !important; margin: 0 !important; text-align: left !important; } } /* ========================================================== ATLAS MAP V16 PREMIUM GEOGRAPHIC INTELLIGENCE TREATMENT ========================================================== */ /* ========================================================== MAP PANEL ========================================================== */ #map-section.map-section { position: relative !important; overflow: hidden !important; background: linear-gradient( 180deg, #080808, #050505 ) !important; border: 1px solid rgba(255,255,255,.10) !important; } /* subtle gold perimeter */ #map-section.map-section::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 500; box-shadow: inset 0 0 0 1px rgba(224,189,104,.05), inset 0 0 70px rgba(0,0,0,.14); } /* ========================================================== MAP HEADER ========================================================== */ .map-heading { position: relative !important; min-height: 112px !important; padding: 26px 28px 22px !important; background: radial-gradient( circle at 85% 15%, rgba(224,189,104,.055), transparent 28% ), linear-gradient( 90deg, rgba(224,189,104,.035), transparent 42% ) !important; border-bottom: 1px solid rgba(255,255,255,.09) !important; } .map-kicker { color: var(--atlas-gold-bright) !important; font-size: 9px !important; font-weight: 850 !important; letter-spacing: .16em !important; } .map-heading h2 { margin: 8px 0 6px !important; color: #fff !important; font-size: 30px !important; font-weight: 650 !important; letter-spacing: -.025em !important; } .map-heading p { color: rgba(255,255,255,.46) !important; font-size: 11px !important; } .map-status { display: inline-flex !important; align-items: center !important; gap: 8px !important; padding: 7px 10px !important; border: 1px solid rgba(224,189,104,.15) !important; background: rgba(224,189,104,.035) !important; color: rgba(255,255,255,.58) !important; font-size: 8px !important; font-weight: 750 !important; letter-spacing: .11em !important; } /* ========================================================== BASE MAP TREATMENT ========================================================== */ #louisianaMap { position: relative !important; min-height: 520px !important; background: #0a0a0a !important; border: 0 !important; filter: saturate(.50) contrast(1.08) brightness(.78) sepia(.06) !important; } /* ========================================================== SUBTLE INTELLIGENCE OVERLAY ========================================================== */ #louisianaMap::after { content: ""; position: absolute; inset: 0; pointer-events: none; z-index: 450; background: linear-gradient( 180deg, rgba(3,3,3,.10), transparent 22%, transparent 75%, rgba(3,3,3,.18) ), radial-gradient( circle at 50% 50%, transparent 54%, rgba(0,0,0,.10) 100% ); } /* ========================================================== LEAFLET MAP TILE POLISH ========================================================== */ #louisianaMap .leaflet-tile-pane { filter: saturate(.56) contrast(1.06) brightness(.86) sepia(.04); } /* ========================================================== GOLD MARKERS ========================================================== */ /* These selectors cover common Leaflet circle markers and div-based Atlas marker elements. */ #louisianaMap .leaflet-interactive { stroke: var(--atlas-gold-bright) !important; fill: rgba(224,189,104,.30) !important; stroke-width: 2px !important; filter: drop-shadow( 0 0 5px rgba(224,189,104,.32) ); transition: filter .18s ease, fill-opacity .18s ease !important; } #louisianaMap .leaflet-interactive:hover { fill: rgba(224,189,104,.52) !important; filter: drop-shadow( 0 0 10px rgba(224,189,104,.55) ) !important; } /* If Atlas uses divIcon markers */ #louisianaMap [class*="atlas"][class*="marker"], #louisianaMap [class*="signal"][class*="marker"] { border: 2px solid var(--atlas-gold-bright) !important; background: rgba(224,189,104,.20) !important; box-shadow: 0 0 0 3px rgba(224,189,104,.08), 0 0 14px rgba(224,189,104,.25) !important; } /* ========================================================== ZOOM CONTROLS ========================================================== */ #louisianaMap .leaflet-control-zoom { overflow: hidden !important; border: 1px solid rgba(224,189,104,.30) !important; border-radius: 2px !important; box-shadow: 0 8px 24px rgba(0,0,0,.28) !important; } #louisianaMap .leaflet-control-zoom a { width: 34px !important; height: 34px !important; display: flex !important; align-items: center !important; justify-content: center !important; border: none !important; border-bottom: 1px solid rgba(224,189,104,.18) !important; background: rgba(7,7,7,.95) !important; color: var(--atlas-gold-bright) !important; font-size: 20px !important; line-height: 1 !important; } #louisianaMap .leaflet-control-zoom a:last-child { border-bottom: none !important; } #louisianaMap .leaflet-control-zoom a:hover { background: rgba(224,189,104,.10) !important; color: #fff !important; } /* ========================================================== POPUPS ========================================================== */ #louisianaMap .leaflet-popup-content-wrapper { overflow: hidden !important; border: 1px solid rgba(224,189,104,.32) !important; border-radius: 2px !important; background: linear-gradient( 180deg, #0d0d0c, #070707 ) !important; color: rgba(255,255,255,.86) !important; box-shadow: 0 16px 45px rgba(0,0,0,.48) !important; } #louisianaMap .leaflet-popup-content { min-width: 220px !important; margin: 16px 18px !important; color: rgba(255,255,255,.78) !important; font-size: 11px !important; line-height: 1.5 !important; } #louisianaMap .leaflet-popup-content strong, #louisianaMap .leaflet-popup-content b { color: #fff !important; } #louisianaMap .leaflet-popup-tip { background: #080808 !important; border: 1px solid rgba(224,189,104,.20) !important; } #louisianaMap .leaflet-popup-close-button { color: rgba(255,255,255,.48) !important; font-size: 18px !important; } #louisianaMap .leaflet-popup-close-button:hover { color: var(--atlas-gold-bright) !important; } /* ========================================================== ATTRIBUTION ========================================================== */ #louisianaMap .leaflet-control-attribution { padding: 4px 7px !important; background: rgba(4,4,4,.78) !important; color: rgba(255,255,255,.30) !important; font-size: 7px !important; } #louisianaMap .leaflet-control-attribution a { color: rgba(224,189,104,.55) !important; } /* ========================================================== MAP HOVER DEPTH ========================================================== */ #map-section { transition: border-color .2s ease, box-shadow .2s ease !important; } #map-section:hover { border-color: rgba(224,189,104,.22) !important; box-shadow: 0 16px 45px rgba(0,0,0,.20), 0 0 30px rgba(224,189,104,.025) !important; } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 800px) { #louisianaMap { min-height: 430px !important; } .map-heading { padding: 22px 18px !important; } } /* ========================================================== ATLAS MAP V17 CLEARER BASE MAP + PULSING SIGNAL NODES ========================================================== */ /* ========================================================== BASE MAP — LIGHTER / CLEARER ========================================================== */ #louisianaMap { filter: saturate(.78) contrast(1.03) brightness(.98) sepia(.02) !important; background: #d8d6cf !important; } /* Tile pane was being darkened twice. Lighten it substantially. */ #louisianaMap .leaflet-tile-pane { filter: saturate(.82) contrast(1.03) brightness(1.02) sepia(.015) !important; } /* ========================================================== REDUCE DARK OVERLAY ========================================================== */ #louisianaMap::after { background: linear-gradient( 180deg, rgba(3,3,3,.025), transparent 18%, transparent 82%, rgba(3,3,3,.05) ), radial-gradient( circle at 50% 50%, transparent 72%, rgba(0,0,0,.035) 100% ) !important; } /* Tone down panel inset shading so the map stays bright. */ #map-section.map-section::after { box-shadow: inset 0 0 0 1px rgba(224,189,104,.055), inset 0 0 26px rgba(0,0,0,.045) !important; } /* ========================================================== SIGNAL CIRCLES — MUCH MORE VISIBLE ========================================================== */ #louisianaMap .leaflet-interactive { stroke: var(--atlas-gold-bright) !important; fill: rgba(224,189,104,.50) !important; fill-opacity: .72 !important; stroke-width: 2.4px !important; filter: drop-shadow( 0 0 5px rgba(224,189,104,.62) ) !important; animation: atlasMapSignalPulse 1.9s ease-in-out infinite !important; transform-origin: center center !important; } /* ========================================================== PULSE / FLASH ========================================================== */ @keyframes atlasMapSignalPulse { 0%, 100% { stroke-opacity: .72; fill-opacity: .50; filter: drop-shadow( 0 0 3px rgba(224,189,104,.38) ); } 50% { stroke-opacity: 1; fill-opacity: .90; filter: drop-shadow( 0 0 11px rgba(224,189,104,.95) ); } } /* Slight stagger so every marker does not flash in perfect lockstep. */ #louisianaMap .leaflet-interactive:nth-of-type(2n) { animation-delay: .28s !important; } #louisianaMap .leaflet-interactive:nth-of-type(3n) { animation-delay: .55s !important; } /* ========================================================== HOVER — STRONGER SIGNAL FOCUS ========================================================== */ #louisianaMap .leaflet-interactive:hover { fill: rgba(224,189,104,.92) !important; fill-opacity: 1 !important; stroke: #f3d77c !important; stroke-width: 3px !important; filter: drop-shadow( 0 0 16px rgba(224,189,104,1) ) !important; animation: none !important; } /* ========================================================== OPTIONAL OUTER HALO FOR DIV MARKERS ========================================================== */ #louisianaMap [class*="atlas"][class*="marker"], #louisianaMap [class*="signal"][class*="marker"] { position: relative !important; border: 2px solid var(--atlas-gold-bright) !important; background: rgba(224,189,104,.58) !important; box-shadow: 0 0 0 4px rgba(224,189,104,.10), 0 0 12px rgba(224,189,104,.50) !important; animation: atlasDivMarkerPulse 1.9s ease-in-out infinite !important; } @keyframes atlasDivMarkerPulse { 0%,100% { box-shadow: 0 0 0 3px rgba(224,189,104,.08), 0 0 8px rgba(224,189,104,.32); } 50% { box-shadow: 0 0 0 8px rgba(224,189,104,.02), 0 0 18px rgba(224,189,104,.75); } } /* ========================================================== ROADS / LABELS SHOULD REMAIN LEGIBLE ========================================================== */ #louisianaMap .leaflet-pane { opacity: 1 !important; } /* ========================================================== MAP HEADER STATUS ========================================================== */ .map-status { color: rgba(255,255,255,.72) !important; border-color: rgba(224,189,104,.24) !important; background: rgba(224,189,104,.055) !important; } /* ========================================================== ZOOM CONTROLS — SLIGHTLY BRIGHTER ========================================================== */ #louisianaMap .leaflet-control-zoom a { background: rgba(8,8,8,.94) !important; color: var(--atlas-gold-bright) !important; } /* ========================================================== REDUCED MOTION ========================================================== */ @media (prefers-reduced-motion: reduce) { #louisianaMap .leaflet-interactive, #louisianaMap [class*="atlas"][class*="marker"], #louisianaMap [class*="signal"][class*="marker"] { animation: none !important; } } /* ========================================================== MATCH TRENDS TITLE TO MAP TITLE ========================================================== */ #trends-section h2, .trends-section h2 { font-size: 30px !important; line-height: 1.12 !important; font-weight: 650 !important; letter-spacing: -.025em !important; margin-top: 8px !important; margin-bottom: 6px !important; } /* ========================================================== ECONOMIC SIGNALS — REMOVE EMPTY SEARCH-STATE GAP ========================================================== */ /* Once actual signal results exist, remove the old loading / empty-state panels completely. */ .content > section:has(.signal-list > *) .state, .content > section:has(#signalList > *) .state, .content > section:has([id*="signal"][class*="list"] > *) .state { display: none !important; min-height: 0 !important; height: 0 !important; margin: 0 !important; padding: 0 !important; border: none !important; overflow: hidden !important; } /* Keep the results tight to the search controls. */ .signal-list, #signalList { margin-top: 12px !important; } /* Remove extra vertical spacing immediately before the first real signal card. */ .signal-list > :first-child, #signalList > :first-child { margin-top: 0 !important; } /* ========================================================== ATLAS — MEDIA-FIRST ABOUT / NEWSROOM V18 ========================================================== */ /* ========================================================== OUTER SECTION ========================================================== */ #about.atlas-media-about { margin-top: 42px !important; padding: 0 !important; border: 1px solid rgba(255,255,255,.10) !important; background: #060606 !important; overflow: hidden !important; } /* ========================================================== TWO-COLUMN NEWSROOM GRID ========================================================== */ .atlas-media-about-shell { display: grid; grid-template-columns: minmax(0,.92fr) minmax(0,1.08fr); min-height: 470px; } /* ========================================================== LEFT SIDE ========================================================== */ .atlas-media-about-main { position: relative; padding: 42px 46px 38px; border-right: 1px solid rgba(255,255,255,.09); background: radial-gradient( circle at 10% 100%, rgba(224,189,104,.05), transparent 34% ), linear-gradient( 145deg, #090909, #060606 ); } .atlas-media-about-main::after { content: ""; position: absolute; right: -110px; top: -145px; width: 300px; height: 300px; border: 1px solid rgba(224,189,104,.065); border-radius: 50%; pointer-events: none; } .atlas-media-about-kicker { color: var(--atlas-gold-bright); font-size: 8px; font-weight: 850; letter-spacing: .17em; } .atlas-media-about-brand { margin-top: 26px; color: var(--atlas-gold-bright); font-family: Georgia, "Times New Roman", serif; font-size: 49px; line-height: 1; } .atlas-media-about-brand span { margin-left: 2px; font-size: 12px; vertical-align: top; } .atlas-media-about-main h2 { max-width: 520px; margin: 25px 0 18px; color: #fff; font-size: clamp(31px,3vw,46px); line-height: 1.02; font-weight: 650; letter-spacing: -.04em; } .atlas-media-about-lead { max-width: 535px; margin: 0; color: rgba(255,255,255,.56); font-size: 13px; line-height: 1.7; } .atlas-media-about-rule { width: 100%; height: 1px; margin: 31px 0 22px; background: linear-gradient( 90deg, rgba(224,189,104,.45), rgba(255,255,255,.06) ); } /* ========================================================== META ========================================================== */ .atlas-media-about-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; } .atlas-media-about-meta div { display: flex; flex-direction: column; gap: 6px; } .atlas-media-about-meta span { color: rgba(255,255,255,.25); font-size: 7px; font-weight: 850; letter-spacing: .13em; } .atlas-media-about-meta strong { color: rgba(255,255,255,.76); font-size: 10px; font-weight: 650; } /* ========================================================== NEWSROOM INDEX ========================================================== */ .atlas-newsroom-index { padding: 33px 34px 30px; background: #070707; } .atlas-newsroom-index-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 25px; padding-bottom: 19px; border-bottom: 1px solid rgba(255,255,255,.09); } .atlas-newsroom-kicker { color: var(--atlas-gold-bright); font-size: 8px; font-weight: 850; letter-spacing: .16em; } .atlas-newsroom-index-head h3 { margin: 7px 0 0; color: #fff; font-size: 20px; font-weight: 650; } .atlas-newsroom-live { display: flex; align-items: center; gap: 7px; padding: 6px 8px; border: 1px solid rgba(224,189,104,.16); color: rgba(255,255,255,.43); font-size: 7px; font-weight: 800; letter-spacing: .11em; } .atlas-newsroom-live span { width: 6px; height: 6px; border-radius: 50%; background: var(--atlas-gold-bright); box-shadow: 0 0 9px rgba(224,189,104,.40); animation: atlasNewsroomLive 1.8s ease-in-out infinite; } @keyframes atlasNewsroomLive { 0%,100% { opacity: .35; } 50% { opacity: 1; } } /* ========================================================== NEWSROOM ROWS ========================================================== */ .atlas-newsroom-list { display: flex; flex-direction: column; } .atlas-newsroom-row { display: grid; grid-template-columns: 36px minmax(0,1fr) 24px; gap: 14px; align-items: center; min-height: 59px; padding: 11px 0; border-bottom: 1px solid rgba(255,255,255,.06); transition: background .15s ease, padding-left .15s ease; } .atlas-newsroom-row:hover { padding-left: 7px; background: linear-gradient( 90deg, rgba(224,189,104,.045), transparent 70% ); } .atlas-newsroom-number { color: rgba(255,255,255,.22); font-size: 8px; font-weight: 800; font-variant-numeric: tabular-nums; } .atlas-newsroom-copy strong { display: block; color: rgba(255,255,255,.91); font-size: 10px; font-weight: 780; letter-spacing: .055em; } .atlas-newsroom-copy p { margin: 5px 0 0; color: rgba(255,255,255,.38); font-size: 8.5px; line-height: 1.4; } .atlas-newsroom-arrow { color: rgba(224,189,104,.45); font-size: 14px; text-align: right; transition: color .15s ease, transform .15s ease; } .atlas-newsroom-row:hover .atlas-newsroom-arrow { color: var(--atlas-gold-bright); transform: translate(2px,-2px); } /* ========================================================== FOOTER STRIP ========================================================== */ .atlas-media-about-footer { min-height: 42px; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; padding: 0 24px; border-top: 1px solid rgba(255,255,255,.08); background: #050505; color: rgba(255,255,255,.22); font-size: 7px; font-weight: 750; letter-spacing: .10em; } .atlas-media-about-footer span:nth-child(2) { color: rgba(224,189,104,.43); } .atlas-media-about-footer span:last-child { text-align: right; } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 900px) { .atlas-media-about-shell { grid-template-columns: 1fr; } .atlas-media-about-main { border-right: none; border-bottom: 1px solid rgba(255,255,255,.09); } } @media (max-width: 600px) { .atlas-media-about-main, .atlas-newsroom-index { padding: 26px 20px; } .atlas-media-about-meta { grid-template-columns: 1fr; } .atlas-media-about-footer { display: block; padding: 14px 20px; line-height: 1.8; } } /* ========================================================== ATLAS — ECONOMIC SIGNAL CARD GOLD COLOR MATCH Match signal/archive accents to the rest of Atlas ========================================================== */ :root { --atlas-signal-gold: #D6B65C; --atlas-signal-gold-soft: rgba(214, 182, 92, .72); --atlas-signal-gold-border: rgba(214, 182, 92, .52); --atlas-signal-gold-faint: rgba(214, 182, 92, .10); } /* LEFT GOLD ACCENT */ .signal-card, .signal-item, .result-card, .atlas-signal-card { border-left-color: var(--atlas-signal-gold) !important; } /* CATEGORY / TYPE LABEL */ .signal-card .category, .signal-card .signal-category, .signal-item .category, .signal-item .signal-category, .result-card .category, .result-card .signal-category, .atlas-signal-card .category, .atlas-signal-card .signal-category { color: var(--atlas-signal-gold) !important; } /* HIGH / MEDIUM / VERY HIGH / ETC. PILLS */ .signal-card .strength, .signal-card .strength-badge, .signal-card .badge, .signal-item .strength, .signal-item .strength-badge, .signal-item .badge, .result-card .strength, .result-card .strength-badge, .result-card .badge, .atlas-signal-card .strength, .atlas-signal-card .strength-badge, .atlas-signal-card .badge { color: var(--atlas-signal-gold) !important; border-color: var(--atlas-signal-gold-border) !important; background: var(--atlas-signal-gold-faint) !important; } /* ANY GOLD TEXT INSIDE SIGNAL METADATA */ .signal-card [class*="gold"], .signal-item [class*="gold"], .result-card [class*="gold"], .atlas-signal-card [class*="gold"] { color: var(--atlas-signal-gold) !important; } /* ICON ACCENT */ .signal-card .signal-icon, .signal-item .signal-icon, .result-card .signal-icon, .atlas-signal-card .signal-icon { color: var(--atlas-signal-gold) !important; border-color: rgba(214, 182, 92, .25) !important; } /* ========================================================== ATLAS — RECENT ACTIVITY NEWSROOM WATCHLIST V19 ========================================================== */ /* ========================================================== GIVE THE SIDEBAR ENOUGH WIDTH ========================================================== */ .content { grid-template-columns: minmax(0, 1fr) 390px !important; } /* ========================================================== RECENT ACTIVITY CARD ========================================================== */ .side-card:has(#recentActivity) { position: relative !important; padding: 22px 20px 18px !important; overflow: hidden !important; border: 1px solid rgba(255,255,255,.10) !important; background: radial-gradient( circle at 100% 0%, rgba(214,182,92,.045), transparent 34% ), linear-gradient( 180deg, #090909, #060606 ) !important; } /* Gold editorial rule */ .side-card:has(#recentActivity)::before { content: "" !important; position: absolute !important; left: 0 !important; top: 0 !important; width: 3px !important; height: 48px !important; background: var(--atlas-signal-gold, #D6B65C) !important; } /* ========================================================== HEADER ========================================================== */ .atlas-activity-header { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; padding: 0 0 17px !important; border-bottom: 1px solid rgba(255,255,255,.09) !important; } .atlas-activity-header h3 { margin: 0 !important; color: #fff !important; font-size: 18px !important; font-weight: 650 !important; letter-spacing: -.02em !important; } /* ========================================================== LIVE BADGE ========================================================== */ .atlas-live-indicator { display: inline-flex !important; align-items: center !important; gap: 7px !important; padding: 5px 7px !important; border: 1px solid rgba(214,182,92,.20) !important; background: rgba(214,182,92,.045) !important; color: var(--atlas-signal-gold, #D6B65C) !important; font-size: 7px !important; font-weight: 850 !important; letter-spacing: .12em !important; } .atlas-live-dot { width: 6px !important; height: 6px !important; border-radius: 50% !important; background: var(--atlas-signal-gold, #D6B65C) !important; box-shadow: 0 0 9px rgba(214,182,92,.48) !important; animation: atlasActivityPulse 1.7s ease-in-out infinite !important; } @keyframes atlasActivityPulse { 0%,100% { opacity: .40; } 50% { opacity: 1; } } /* ========================================================== ACTIVITY FEED ========================================================== */ #recentActivity { display: flex !important; flex-direction: column !important; margin-top: 4px !important; } /* ========================================================== EACH ACTIVITY ROW ========================================================== */ #recentActivity .activity { position: relative !important; display: grid !important; grid-template-columns: 14px minmax(0,1fr) !important; gap: 12px !important; align-items: start !important; min-height: 86px !important; padding: 17px 6px 16px 0 !important; border-bottom: 1px solid rgba(255,255,255,.065) !important; background: transparent !important; transition: background .16s ease, padding-left .16s ease !important; } #recentActivity .activity:hover { padding-left: 7px !important; background: linear-gradient( 90deg, rgba(214,182,92,.045), transparent 72% ) !important; } /* ========================================================== GOLD ACTIVITY NODE ========================================================== */ #recentActivity .activity i { position: static !important; width: 7px !important; height: 7px !important; margin-top: 5px !important; border-radius: 50% !important; background: var(--atlas-signal-gold, #D6B65C) !important; box-shadow: 0 0 8px rgba(214,182,92,.28) !important; animation: atlasActivityNode 2.2s ease-in-out infinite !important; } @keyframes atlasActivityNode { 0%,100% { box-shadow: 0 0 4px rgba(214,182,92,.18); } 50% { box-shadow: 0 0 10px rgba(214,182,92,.48); } } /* ========================================================== HEADLINE ========================================================== */ #recentActivity .activity b { display: block !important; max-width: 100% !important; color: rgba(255,255,255,.92) !important; font-size: 12px !important; font-weight: 650 !important; line-height: 1.35 !important; letter-spacing: -.005em !important; word-break: normal !important; overflow-wrap: normal !important; white-space: normal !important; } /* ========================================================== LOCATION / CATEGORY META ========================================================== */ #recentActivity .activity small { display: block !important; margin-top: 7px !important; color: rgba(255,255,255,.36) !important; font-size: 8px !important; font-weight: 650 !important; line-height: 1.45 !important; letter-spacing: .025em !important; word-break: normal !important; } /* Give category-style metadata a subtle gold tone */ #recentActivity .activity small:last-child { color: rgba(214,182,92,.58) !important; } /* ========================================================== UPDATE STATUS ========================================================== */ .atlas-activity-updated { margin-top: 13px !important; color: rgba(255,255,255,.27) !important; font-size: 7px !important; font-weight: 700 !important; letter-spacing: .08em !important; text-transform: uppercase !important; } /* ========================================================== VIEW ALL ACTIVITY ========================================================== */ #viewAllActivity { display: inline-flex !important; align-items: center !important; margin-top: 12px !important; padding: 7px 0 !important; color: var(--atlas-signal-gold, #D6B65C) !important; font-size: 9px !important; font-weight: 800 !important; letter-spacing: .06em !important; text-transform: uppercase !important; } /* ========================================================== ASK ATLAS SHOULD NOT COVER THE FEED ========================================================== */ @media (min-width: 951px) { .side-card:has(#recentActivity) { padding-bottom: 28px !important; } } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 1100px) { .content { grid-template-columns: minmax(0,1fr) 350px !important; } } @media (max-width: 950px) { .content { grid-template-columns: 1fr !important; } } /* ========================================================== ATLAS V20 ECONOMIC SIGNALS — FILTER PANEL FIT / CLEANUP ========================================================== */ /* ========================================================== FILTER PANEL ========================================================== */ #filters.atlas-filter-panel { width: 100% !important; max-width: 100% !important; margin: 32px 0 18px !important; padding: 48px 20px 20px !important; box-sizing: border-box !important; overflow: hidden !important; } /* ========================================================== FIVE DROPDOWNS — ONE BALANCED ROW ========================================================== */ #filters .atlas-filter-grid { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; gap: 14px !important; width: 100% !important; max-width: 100% !important; align-items: end !important; } /* Make every field respect its grid column */ #filters .atlas-filter-field { min-width: 0 !important; width: 100% !important; } #filters .atlas-filter-field select { width: 100% !important; max-width: 100% !important; min-width: 0 !important; height: 44px !important; box-sizing: border-box !important; } /* ========================================================== ACTION ROW Search left / Reset right ========================================================== */ #filters .atlas-filter-bottom { display: flex !important; align-items: center !important; justify-content: space-between !important; gap: 16px !important; width: 100% !important; margin-top: 17px !important; } /* SEARCH ATLAS */ #filters .atlas-search-button { width: auto !important; min-width: 130px !important; height: 44px !important; margin: 0 !important; padding: 0 20px !important; white-space: nowrap !important; } /* RESET FILTERS */ #filters .atlas-filter-action { width: auto !important; min-width: 118px !important; height: 44px !important; margin: 0 0 0 auto !important; padding: 0 17px !important; display: flex !important; align-items: center !important; justify-content: center !important; white-space: nowrap !important; line-height: 1 !important; } /* ========================================================== IMPORTANT: If Reset Filters is currently inside the filter grid, move it visually to the second row. ========================================================== */ #filters .atlas-filter-grid .atlas-filter-action { grid-column: 5 !important; justify-self: end !important; align-self: end !important; min-width: 118px !important; } /* But make room so Date Range does not get crushed. If the action button shares the grid, use six-column layout with the action getting its own compact column. */ #filters .atlas-filter-grid:has(.atlas-filter-action) { grid-template-columns: repeat(5, minmax(0, 1fr)) 118px !important; } /* ========================================================== REMOVE ANY HORIZONTAL OVERFLOW ========================================================== */ .content > section, #filters, #filters * { box-sizing: border-box !important; } .content > section { overflow: hidden !important; } /* ========================================================== SLIGHTLY MORE COMPACT LABELS ========================================================== */ #filters .atlas-filter-field { font-size: 8px !important; letter-spacing: .11em !important; } #filters .atlas-filter-field select { font-size: 10px !important; } /* ========================================================== LAPTOP ========================================================== */ @media (max-width: 1250px) { #filters .atlas-filter-grid, #filters .atlas-filter-grid:has(.atlas-filter-action) { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; } #filters .atlas-filter-grid .atlas-filter-action { grid-column: auto !important; justify-self: stretch !important; width: 100% !important; } } /* ========================================================== MOBILE ========================================================== */ @media (max-width: 700px) { #filters .atlas-filter-grid, #filters .atlas-filter-grid:has(.atlas-filter-action) { grid-template-columns: 1fr !important; } #filters .atlas-filter-bottom { flex-direction: column !important; align-items: stretch !important; } #filters .atlas-search-button, #filters .atlas-filter-action { width: 100% !important; margin: 0 !important; } } /* ========================================================== ATLAS — SEARCH + RESET BUTTONS TOGETHER ========================================================== */ /* Keep the five filters across the first row. Create a second row for the two action buttons. */ #filters .atlas-filter-grid, #filters .atlas-filter-grid:has(.atlas-filter-action) { display: grid !important; grid-template-columns: repeat(5, minmax(0, 1fr)) !important; column-gap: 14px !important; row-gap: 14px !important; align-items: end !important; } /* SEARCH ATLAS — bottom left */ #filters .atlas-search-button { grid-column: 1 !important; grid-row: 2 !important; justify-self: start !important; width: 130px !important; min-width: 130px !important; margin: 0 !important; } /* RESET FILTERS — directly beside Search Atlas */ #filters .atlas-filter-action, #filters .atlas-filter-grid .atlas-filter-action { grid-column: 2 !important; grid-row: 2 !important; justify-self: start !important; width: 130px !important; min-width: 130px !important; margin: 0 !important; } /* If the search button lives outside the grid, use the existing bottom action container instead. */ #filters .atlas-filter-bottom { display: flex !important; justify-content: flex-start !important; align-items: center !important; gap: 12px !important; margin-top: 16px !important; } #filters .atlas-filter-bottom .atlas-search-button, #filters .atlas-filter-bottom .atlas-filter-action { width: 130px !important; min-width: 130px !important; margin: 0 !important; } /* Laptop */ @media (max-width: 1250px) { #filters .atlas-filter-grid, #filters .atlas-filter-grid:has(.atlas-filter-action) { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } } /* Mobile */ @media (max-width: 700px) { #filters .atlas-filter-grid, #filters .atlas-filter-grid:has(.atlas-filter-action) { grid-template-columns: 1fr !important; } #filters .atlas-search-button, #filters .atlas-filter-action, #filters .atlas-filter-grid .atlas-filter-action { grid-column: 1 !important; width: 100% !important; } #filters .atlas-search-button { grid-row: auto !important; } #filters .atlas-filter-action, #filters .atlas-filter-grid .atlas-filter-action { grid-row: auto !important; } } /* ========================================================== FILTER ACTION ROW — FINAL FIX Search Atlas + Reset Filters side-by-side ========================================================== */ #filters .atlas-filter-bottom { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 12px !important; width: 100% !important; margin-top: 16px !important; } /* same dimensions */ #filters .atlas-filter-bottom .atlas-search-button, #filters .atlas-filter-bottom .atlas-filter-action { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: 130px !important; min-width: 130px !important; height: 44px !important; margin: 0 !important; padding: 0 16px !important; white-space: nowrap !important; line-height: 1 !important; } /* reset old grid placement */ #filters .atlas-filter-action { grid-column: auto !important; grid-row: auto !important; justify-self: auto !important; align-self: auto !important; } /* filters remain five columns */ #filters .atlas-filter-grid, #filters .atlas-filter-grid:has(.atlas-filter-action) { grid-template-columns: repeat(5, minmax(0, 1fr)) !important; } /* mobile */ @media (max-width: 700px) { #filters .atlas-filter-bottom { flex-direction: column !important; align-items: stretch !important; } #filters .atlas-filter-bottom .atlas-search-button, #filters .atlas-filter-bottom .atlas-filter-action { width: 100% !important; } } /* ========================================================== ATLAS — OWNERSHIP FOOTER ========================================================== */ .atlas-ownership-footer { width: 100% !important; box-sizing: border-box !important; display: flex !important; align-items: center !important; justify-content: space-between !important; margin: 0 !important; padding: 20px 40px !important; background: #050505 !important; border-top: 1px solid rgba(212, 175, 55, 0.18) !important; color: rgba(255, 255, 255, 0.42) !important; font-size: 9px !important; font-weight: 600 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; } .atlas-footer-year { color: rgba(212, 175, 55, 0.60) !important; } @media (max-width: 700px) { .atlas-ownership-footer { padding: 18px 20px !important; } } /* ========================================================== OWNERSHIP FOOTER — BOTTOM CENTER ========================================================== */ .atlas-ownership-footer { width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; gap: 8px !important; text-align: center !important; padding: 22px 20px 24px !important; margin: 0 !important; box-sizing: border-box !important; } .atlas-ownership-footer span, .atlas-footer-year { display: inline-block !important; color: rgba(255, 255, 255, 0.42) !important; font-size: 9px !important; font-weight: 600 !important; letter-spacing: 1.5px !important; text-transform: uppercase !important; } .atlas-footer-year { color: rgba(212, 175, 55, 0.65) !important; } /* ========================================================== ATLAS V21 ATLAS AT A GLANCE — READABILITY + MEDIA STYLE ========================================================== */ /* ========================================================== CARD ========================================================== */ .side-card:has(#glance), .side-card:has([id*="glance"]) { position: relative !important; padding: 22px 20px 20px !important; border: 1px solid rgba(255,255,255,.10) !important; background: radial-gradient( circle at 100% 0%, rgba(214,182,92,.045), transparent 34% ), linear-gradient( 180deg, #090909, #060606 ) !important; } /* gold editorial rule */ .side-card:has(#glance)::before, .side-card:has([id*="glance"])::before { content: "" !important; position: absolute !important; left: 0 !important; top: 0 !important; width: 3px !important; height: 48px !important; background: var(--atlas-gold-bright) !important; } /* ========================================================== TITLE ========================================================== */ .side-card:has(#glance) h3, .side-card:has([id*="glance"]) h3 { margin: 0 0 18px !important; color: #fff !important; font-size: 18px !important; font-weight: 650 !important; letter-spacing: -.015em !important; } /* ========================================================== METRIC ROWS ========================================================== */ .side-card:has(#glance) .metric, .side-card:has([id*="glance"]) .metric { padding: 18px 0 16px !important; border-bottom: 1px solid rgba(255,255,255,.07) !important; } .side-card:has(#glance) .metric:last-of-type, .side-card:has([id*="glance"]) .metric:last-of-type { border-bottom: none !important; } /* ========================================================== BIG VALUES ========================================================== */ .side-card:has(#glance) .metric b, .side-card:has([id*="glance"]) .metric b { display: block !important; margin-bottom: 6px !important; color: #fff !important; font-size: 26px !important; font-weight: 650 !important; line-height: 1 !important; letter-spacing: -.025em !important; } /* slight gold emphasis on numeric / headline metric */ .side-card:has(#glance) .metric:first-of-type b, .side-card:has([id*="glance"]) .metric:first-of-type b { color: var(--atlas-gold-bright) !important; } /* ========================================================== PRIMARY LABEL ========================================================== */ .side-card:has(#glance) .metric span, .side-card:has([id*="glance"]) .metric span { display: block !important; color: rgba(255,255,255,.80) !important; font-size: 10px !important; font-weight: 700 !important; line-height: 1.3 !important; letter-spacing: .01em !important; } /* ========================================================== SECONDARY EXPLANATION ========================================================== */ .side-card:has(#glance) .metric small, .side-card:has([id*="glance"]) .metric small { display: block !important; margin-top: 4px !important; color: rgba(255,255,255,.42) !important; font-size: 8.5px !important; font-weight: 600 !important; line-height: 1.4 !important; letter-spacing: .01em !important; } /* ========================================================== VIEW COVERAGE MAP BUTTON ========================================================== */ .side-card:has(#glance) .outline, .side-card:has([id*="glance"]) .outline { width: 100% !important; min-height: 42px !important; margin-top: 16px !important; border: 1px solid rgba(214,182,92,.48) !important; border-radius: 2px !important; background: rgba(214,182,92,.035) !important; color: var(--atlas-gold-bright) !important; font-size: 9px !important; font-weight: 800 !important; letter-spacing: .06em !important; text-transform: uppercase !important; transition: background .16s ease, border-color .16s ease !important; } .side-card:has(#glance) .outline:hover, .side-card:has([id*="glance"]) .outline:hover { background: rgba(214,182,92,.09) !important; border-color: var(--atlas-gold-bright) !important; } /* ========================================================== ATLAS AT A GLANCE — METRIC SIZE REFINEMENT ========================================================== */ .side-card:has(#glance) .metric b, .side-card:has([id*="glance"]) .metric b { font-size: 23px !important; } /* Atlas at a Glance — final metric size */ .side-card:has(#glance) .metric b, .side-card:has([id*="glance"]) .metric b { font-size: 21px !important; } /* ========================================================== RECENT ACTIVITY — READABILITY REFINEMENT ========================================================== */ /* Story headlines */ #recentActivity .activity b { color: rgba(255, 255, 255, 0.94) !important; font-size: 11px !important; font-weight: 700 !important; line-height: 1.38 !important; letter-spacing: 0 !important; } /* Parish + category information */ #recentActivity .activity small { color: rgba(214, 182, 92, 0.78) !important; font-size: 9px !important; font-weight: 600 !important; line-height: 1.45 !important; letter-spacing: 0.01em !important; margin-top: 6px !important; } /* Gold activity dot — clearer but restrained */ #recentActivity .activity > i { background: var(--atlas-gold-bright) !important; opacity: 1 !important; box-shadow: 0 0 0 3px rgba(214, 182, 92, 0.06), 0 0 9px rgba(214, 182, 92, 0.25) !important; } /* More breathing room between stories */ #recentActivity .activity { padding-top: 18px !important; padding-bottom: 18px !important; } /* Separators stay subtle */ #recentActivity .activity + .activity { border-top: 1px solid rgba(255, 255, 255, 0.08) !important; } /* Updated timestamp */ #recentActivityUpdated { color: rgba(255, 255, 255, 0.42) !important; font-size: 8px !important; font-weight: 650 !important; letter-spacing: 0.08em !important; } /* ========================================================== RECENT ACTIVITY — +2PX ALL TEXT EXCEPT TITLE ========================================================== */ /* Story headlines: 11px -> 13px */ #recentActivity .activity b { font-size: 13px !important; line-height: 1.38 !important; } /* Parish + category: 9px -> 11px */ #recentActivity .activity small { font-size: 11px !important; line-height: 1.45 !important; } /* Updated timestamp: 8px -> 10px */ #recentActivityUpdated { font-size: 10px !important; line-height: 1.4 !important; } /* View All Activity */ #viewAllActivity { font-size: 10px !important; line-height: 1.4 !important; } /* LIVE indicator text */ .atlas-live-indicator { font-size: 10px !important; } /* IMPORTANT: Recent Activity heading remains unchanged */ .side-card .atlas-activity-header h3 { font-size: 18px !important; } /* ========================================================= REQUEST ACCESS — UNIFIED ATLAS GOLD ========================================================= */ #accessModal, .access-modal, .access-modal-content { border-color: #d6b65c !important; } /* Eyebrow / modal kicker */ #accessModal .access-kicker, #accessModal .eyebrow, .access-modal .access-kicker, .access-modal .eyebrow { color: #d6b65c !important; } /* All form labels inside Request Access */ #accessModal label, .access-modal label { color: #d6b65c !important; } /* Section headings such as INTERESTED IN */ #accessModal .access-section-title, #accessModal legend, .access-modal .access-section-title, .access-modal legend { color: #d6b65c !important; } /* Close X */ #accessModal .access-close, #accessModal .close, .access-modal .access-close, .access-modal .close { color: #d6b65c !important; } /* Request Access button */ #submitAccessRequest.access-submit { background: #d6b65c !important; border-color: #d6b65c !important; color: #050505 !important; } #submitAccessRequest.access-submit:hover { background: #d6b65c !important; border-color: #d6b65c !important; color: #050505 !important; } /* ========================================================= REQUEST ACCESS — FINAL UNIFIED GOLD ========================================================= */ .access-dialog { border-color: #d6b65c !important; } /* ATLAS ACCESS kicker */ .access-dialog .access-kicker { color: #d6b65c !important; } /* All field headings */ .access-dialog label > span { color: #d6b65c !important; } /* INTERESTED IN */ .access-dialog .access-type-heading { color: #d6b65c !important; } /* Checkbox option text */ .access-dialog .access-types label { color: #d6b65c !important; } /* Checkbox accent */ .access-dialog .access-types input[type="checkbox"] { accent-color: #d6b65c !important; } /* Close X */ .access-dialog .access-close { color: #d6b65c !important; } /* Focus states */ .access-dialog input:focus, .access-dialog select:focus, .access-dialog textarea:focus { border-color: #d6b65c !important; box-shadow: 0 0 0 1px #d6b65c !important; outline: none !important; } /* Submit button */ #submitAccessRequest.access-submit { background: #d6b65c !important; border-color: #d6b65c !important; color: #050505 !important; } #submitAccessRequest.access-submit:hover { background: #d6b65c !important; border-color: #d6b65c !important; color: #050505 !important; } /* ========================================================== ASK ATLAS — FINAL POSITION + OPEN STATE FIX ========================================================== */ #atlasAiLauncher { position: fixed !important; top: auto !important; left: auto !important; right: 24px !important; bottom: 24px !important; margin: 0 !important; transform: none !important; display: flex !important; align-items: center !important; justify-content: center !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; z-index: 2147483647 !important; } #atlasAiLauncher:hover { transform: translateY(-3px) !important; } /* Closed state */ #atlasAiPanel[hidden] { display: none !important; } /* Open state */ #atlasAiPanel:not([hidden]) { display: flex !important; position: fixed !important; top: auto !important; left: auto !important; right: 24px !important; bottom: 78px !important; transform: none !important; visibility: visible !important; opacity: 1 !important; pointer-events: auto !important; z-index: 2147483646 !important; } /* Mobile */ @media (max-width: 600px) { #atlasAiLauncher { right: 14px !important; bottom: 14px !important; } #atlasAiPanel:not([hidden]) { left: 12px !important; right: 12px !important; bottom: 70px !important; width: auto !important; height: 70vh !important; } } /* ========================================================== ATLAS AI — FINAL VISUAL POLISH Match Atlas / Edet Intelligence visual system ========================================================== */ :root { --atlas-ai-gold: #d6b65c; } /* ---------- PANEL ---------- */ #atlasAiPanel { background: linear-gradient( 180deg, #080808 0%, #050505 100% ) !important; border: 1px solid rgba(214,182,92,.78) !important; border-radius: 10px !important; box-shadow: 0 24px 70px rgba(0,0,0,.72), 0 0 0 1px rgba(214,182,92,.035) !important; overflow: hidden !important; } /* ---------- HEADER ---------- */ #atlasAiPanel .atlas-ai-header { min-height: 72px !important; padding: 0 20px !important; display: flex !important; align-items: center !important; justify-content: space-between !important; background: #070707 !important; border-bottom: 1px solid rgba(214,182,92,.30) !important; } #atlasAiPanel .atlas-ai-brand { display: flex !important; align-items: center !important; gap: 13px !important; } #atlasAiPanel .atlas-ai-mark { color: var(--atlas-ai-gold) !important; font-family: Georgia, "Times New Roman", serif !important; font-size: 28px !important; font-weight: 400 !important; line-height: 1 !important; letter-spacing: 0 !important; flex: 0 0 auto !important; } /* Brand text stack */ #atlasAiPanel .atlas-ai-brand > div:last-child { display: flex !important; flex-direction: column !important; justify-content: center !important; gap: 4px !important; text-align: left !important; } #atlasAiPanel .atlas-ai-title { margin: 0 !important; color: #ffffff !important; font-size: 13px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: .16em !important; } #atlasAiPanel .atlas-ai-subtitle { margin: 0 !important; color: rgba(214,182,92,.66) !important; font-size: 8px !important; font-weight: 650 !important; line-height: 1.2 !important; letter-spacing: .14em !important; } /* Close button */ #atlasAiPanel .atlas-ai-close { width: 32px !important; height: 32px !important; display: flex !important; align-items: center !important; justify-content: center !important; padding: 0 !important; color: rgba(255,255,255,.68) !important; background: transparent !important; border: 0 !important; font-size: 20px !important; line-height: 1 !important; cursor: pointer !important; } #atlasAiPanel .atlas-ai-close:hover { color: var(--atlas-ai-gold) !important; } /* ---------- CONVERSATION AREA ---------- */ #atlasAiPanel .atlas-ai-messages { padding: 18px !important; background: transparent !important; } /* Initial Atlas welcome card */ #atlasAiPanel .atlas-ai-message { border-color: rgba(255,255,255,.11) !important; } #atlasAiPanel .atlas-ai-message.assistant, #atlasAiPanel .atlas-ai-message.atlas, #atlasAiPanel .atlas-ai-message:first-child { padding: 18px 18px 19px !important; background: rgba(255,255,255,.025) !important; border: 1px solid rgba(255,255,255,.11) !important; border-radius: 8px !important; text-align: left !important; } /* ATLAS AI label inside message */ #atlasAiPanel .atlas-ai-message-label, #atlasAiPanel .atlas-ai-message strong:first-child { color: var(--atlas-ai-gold) !important; font-size: 9px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: .14em !important; } /* Main message copy */ #atlasAiPanel .atlas-ai-message p, #atlasAiPanel .atlas-ai-message-text { margin-top: 12px !important; margin-bottom: 0 !important; max-width: 310px !important; color: rgba(255,255,255,.88) !important; font-size: 13px !important; font-weight: 400 !important; line-height: 1.65 !important; letter-spacing: 0 !important; text-align: left !important; } /* ---------- STATUS ---------- */ #atlasAiPanel .atlas-ai-status { color: rgba(214,182,92,.72) !important; font-size: 9px !important; letter-spacing: .08em !important; } /* ---------- INPUT AREA ---------- */ #atlasAiPanel .atlas-ai-form { padding: 14px !important; gap: 10px !important; background: #070707 !important; border-top: 1px solid rgba(255,255,255,.10) !important; align-items: stretch !important; } #atlasAiPanel .atlas-ai-input { min-height: 58px !important; padding: 14px 13px !important; color: #ffffff !important; background: #050505 !important; border: 1px solid rgba(214,182,92,.72) !important; border-radius: 7px !important; font-family: inherit !important; font-size: 12px !important; line-height: 1.45 !important; resize: none !important; outline: none !important; } #atlasAiPanel .atlas-ai-input::placeholder { color: rgba(255,255,255,.38) !important; } #atlasAiPanel .atlas-ai-input:focus { border-color: var(--atlas-ai-gold) !important; box-shadow: 0 0 0 1px rgba(214,182,92,.12) !important; } /* ---------- SEND BUTTON ---------- */ #atlasAiPanel .atlas-ai-send { min-width: 72px !important; padding: 0 17px !important; background: var(--atlas-ai-gold) !important; border: 1px solid var(--atlas-ai-gold) !important; border-radius: 7px !important; color: #050505 !important; font-size: 10px !important; font-weight: 850 !important; letter-spacing: .14em !important; cursor: pointer !important; } #atlasAiPanel .atlas-ai-send:hover { background: var(--atlas-ai-gold) !important; border-color: var(--atlas-ai-gold) !important; filter: brightness(1.05) !important; } /* ---------- FLOATING LAUNCHER ---------- */ #atlasAiLauncher { border-color: var(--atlas-ai-gold) !important; color: var(--atlas-ai-gold) !important; } #atlasAiLauncher .atlas-ai-launcher-mark { color: var(--atlas-ai-gold) !important; } /* ========================================================== ATLAS AI — MESSAGE TYPOGRAPHY + ALIGNMENT CLEANUP ========================================================== */ /* ---------- MESSAGE STACK ---------- */ #atlasAiPanel .atlas-ai-messages { display: flex !important; flex-direction: column !important; gap: 14px !important; padding: 18px !important; overflow-y: auto !important; } /* ---------- ALL MESSAGE WRAPPERS ---------- */ #atlasAiPanel .atlas-ai-message { width: auto !important; max-width: 88% !important; margin: 0 !important; font-family: inherit !important; box-sizing: border-box !important; } /* ---------- ATLAS / ASSISTANT MESSAGES ---------- */ #atlasAiPanel .atlas-ai-message.assistant, #atlasAiPanel .atlas-ai-message.atlas { align-self: flex-start !important; padding: 16px 17px 17px !important; background: rgba(255,255,255,.022) !important; border: 1px solid rgba(255,255,255,.10) !important; border-radius: 8px !important; color: rgba(255,255,255,.90) !important; text-align: left !important; } /* ---------- INITIAL WELCOME CARD ---------- */ #atlasAiPanel .atlas-ai-message:first-child { align-self: stretch !important; width: 100% !important; max-width: none !important; padding: 16px 17px 18px !important; text-align: left !important; } #atlasAiPanel .atlas-ai-message:first-child p, #atlasAiPanel .atlas-ai-message:first-child .atlas-ai-message-text { margin: 11px 0 0 !important; padding: 0 !important; max-width: 300px !important; color: rgba(255,255,255,.82) !important; font-size: 12.5px !important; font-weight: 400 !important; line-height: 1.62 !important; letter-spacing: 0 !important; text-align: left !important; white-space: normal !important; } /* ---------- ATLAS AI LABEL ---------- */ #atlasAiPanel .atlas-ai-message-label, #atlasAiPanel .atlas-ai-message strong:first-child { display: block !important; margin: 0 0 10px !important; color: var(--atlas-ai-gold) !important; font-size: 8.5px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: .16em !important; text-transform: uppercase !important; } /* ---------- STREAMED ATLAS RESPONSE TEXT ---------- */ #atlasAiPanel .atlas-ai-message.assistant p, #atlasAiPanel .atlas-ai-message.assistant .atlas-ai-message-text, #atlasAiPanel .atlas-ai-message.atlas p, #atlasAiPanel .atlas-ai-message.atlas .atlas-ai-message-text { margin: 0 !important; padding: 0 !important; color: rgba(255,255,255,.90) !important; font-size: 12.5px !important; font-weight: 400 !important; line-height: 1.62 !important; letter-spacing: 0 !important; text-align: left !important; white-space: pre-wrap !important; overflow-wrap: anywhere !important; } /* Preserve clean paragraph breaks in streamed/plain text */ #atlasAiPanel .atlas-ai-message.assistant .atlas-ai-message-text, #atlasAiPanel .atlas-ai-message.atlas .atlas-ai-message-text { display: block !important; } /* ---------- USER MESSAGE ---------- */ #atlasAiPanel .atlas-ai-message.user { align-self: flex-end !important; max-width: 82% !important; padding: 11px 13px !important; background: rgba(214,182,92,.075) !important; border: 1px solid rgba(214,182,92,.22) !important; border-radius: 8px !important; color: #ffffff !important; font-size: 12.5px !important; font-weight: 450 !important; line-height: 1.45 !important; text-align: left !important; } /* ---------- "WHAT TO WATCH" / BOLD TEXT ---------- */ #atlasAiPanel .atlas-ai-message strong { color: var(--atlas-ai-gold) !important; font-weight: 750 !important; } /* ---------- SCROLLBAR ---------- */ #atlasAiPanel .atlas-ai-messages { scrollbar-width: thin !important; scrollbar-color: rgba(214,182,92,.35) transparent !important; } /* ---------- STATUS / THINKING ---------- */ #atlasAiPanel .atlas-ai-status { padding: 0 18px 8px !important; text-align: left !important; color: rgba(214,182,92,.65) !important; font-size: 9px !important; font-weight: 650 !important; letter-spacing: .08em !important; } /* ========================================================== ATLAS AI — EXACT MESSAGE CLASS FIX Uses actual DOM classes generated by chat_controls.js ========================================================== */ /* ---------- MESSAGE AREA ---------- */ #atlasAiPanel #atlasAiMessages { display: flex !important; flex-direction: column !important; gap: 14px !important; padding: 16px 18px 20px !important; overflow-y: auto !important; overflow-x: hidden !important; text-align: left !important; } /* ---------- BASE MESSAGE ---------- */ #atlasAiPanel .atlas-ai-message { box-sizing: border-box !important; margin: 0 !important; text-align: left !important; } /* ---------- ATLAS RESPONSE CARDS ---------- */ #atlasAiPanel .atlas-ai-message-assistant { align-self: flex-start !important; width: 100% !important; max-width: 100% !important; padding: 15px 16px 17px !important; background: rgba(255,255,255,.022) !important; border: 1px solid rgba(255,255,255,.11) !important; border-radius: 8px !important; text-align: left !important; } /* ---------- ATLAS AI LABEL ---------- */ #atlasAiPanel .atlas-ai-message-assistant .atlas-ai-message-label { display: block !important; margin: 0 0 11px 0 !important; padding: 0 !important; color: #d6b65c !important; font-size: 8.5px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: .16em !important; text-align: left !important; } /* ---------- ACTUAL MESSAGE BODY ---------- */ #atlasAiPanel .atlas-ai-message-body { display: block !important; width: 100% !important; max-width: none !important; margin: 0 !important; padding: 0 !important; color: rgba(255,255,255,.90) !important; font-size: 12.5px !important; font-weight: 400 !important; line-height: 1.62 !important; letter-spacing: 0 !important; text-align: left !important; /* Preserve AI paragraph breaks without preserving ugly indentation */ white-space: pre-line !important; overflow-wrap: break-word !important; word-break: normal !important; } /* ---------- WELCOME MESSAGE ---------- */ #atlasAiPanel .atlas-ai-message-assistant:first-child { width: 100% !important; max-width: 100% !important; padding: 15px 16px 17px !important; } #atlasAiPanel .atlas-ai-message-assistant:first-child .atlas-ai-message-body { max-width: 320px !important; margin: 0 !important; color: rgba(255,255,255,.80) !important; font-size: 12.5px !important; line-height: 1.6 !important; text-align: left !important; white-space: normal !important; } /* ---------- USER MESSAGE ---------- */ #atlasAiPanel .atlas-ai-message-user { align-self: flex-end !important; width: auto !important; max-width: 78% !important; margin-left: auto !important; padding: 10px 13px !important; background: rgba(214,182,92,.07) !important; border: 1px solid rgba(214,182,92,.22) !important; border-radius: 8px !important; color: #ffffff !important; text-align: left !important; } #atlasAiPanel .atlas-ai-message-user .atlas-ai-message-body { width: auto !important; color: rgba(255,255,255,.92) !important; font-size: 12.5px !important; line-height: 1.45 !important; white-space: pre-line !important; } /* ---------- BETTER READING WIDTH ---------- */ #atlasAiPanel .atlas-ai-message-assistant:not(:first-child) .atlas-ai-message-body { max-width: 100% !important; line-height: 1.68 !important; } /* ---------- SCROLLING ---------- */ #atlasAiPanel #atlasAiMessages { scrollbar-width: thin !important; scrollbar-color: rgba(214,182,92,.30) transparent !important; } /* ========================================================== ATLAS AI — FINAL MESSAGE POLISH ========================================================== */ #atlasAiPanel #atlasAiMessages { gap: 12px !important; padding: 16px 18px 18px !important; } /* Welcome card — tighter and cleaner */ #atlasAiPanel .atlas-ai-message-assistant:first-child { padding: 14px 16px 15px !important; } #atlasAiPanel .atlas-ai-message-assistant:first-child .atlas-ai-message-body { max-width: 305px !important; font-size: 12px !important; line-height: 1.55 !important; color: rgba(255,255,255,.82) !important; } /* Atlas label */ #atlasAiPanel .atlas-ai-message-label { color: #d6b65c !important; font-size: 8.5px !important; font-weight: 850 !important; letter-spacing: .17em !important; margin-bottom: 10px !important; } /* Assistant responses */ #atlasAiPanel .atlas-ai-message-assistant:not(:first-child) { padding: 15px 16px 16px !important; } #atlasAiPanel .atlas-ai-message-assistant:not(:first-child) .atlas-ai-message-body { font-size: 12.5px !important; line-height: 1.7 !important; color: rgba(255,255,255,.92) !important; } /* User bubble */ #atlasAiPanel .atlas-ai-message-user { max-width: 72% !important; padding: 9px 12px !important; border-radius: 7px !important; } #atlasAiPanel .atlas-ai-message-user .atlas-ai-message-body { font-size: 12px !important; line-height: 1.35 !important; } /* Bottom input area */ #atlasAiPanel .atlas-ai-form { padding: 12px 14px !important; gap: 10px !important; } #atlasAiPanel .atlas-ai-input { min-height: 54px !important; padding: 13px 12px !important; font-size: 12px !important; border-radius: 6px !important; } #atlasAiPanel .atlas-ai-send { min-width: 72px !important; border-radius: 6px !important; font-size: 9.5px !important; letter-spacing: .15em !important; } /* ========================================================== ATLAS AI — COMPACT PANEL HEIGHT ========================================================== */ #atlasAiPanel, #atlasAiPanel:not([hidden]) { height: 455px !important; max-height: calc(100vh - 110px) !important; } /* Messages consume available space and scroll when needed */ #atlasAiPanel #atlasAiMessages { flex: 1 1 auto !important; min-height: 0 !important; overflow-y: auto !important; } /* Keep input locked cleanly to bottom */ #atlasAiPanel .atlas-ai-form { flex: 0 0 auto !important; } /* ========================================================= ATLAS AI — FINAL RESPONSE TYPOGRAPHY ========================================================= */ #atlasAiPanel .atlas-ai-message-body .atlas-ai-text-line { display: block !important; width: 100% !important; margin: 0 !important; padding: 0 !important; } #atlasAiPanel .atlas-ai-message-body .atlas-ai-paragraph-space { display: block !important; height: 10px !important; } #atlasAiPanel .atlas-ai-message-body .atlas-ai-ranked-line { margin-top: 10px !important; margin-bottom: 4px !important; } #atlasAiPanel .atlas-ai-message-body .atlas-ai-watch-line { margin-top: 5px !important; } #atlasAiPanel .atlas-ai-message-body strong { color: rgba(255,255,255,.98) !important; font-weight: 750 !important; } #atlasAiPanel .atlas-ai-message-body .atlas-ai-watch-line strong { color: #d6b65c !important; font-weight: 800 !important; } /* Atlas AI intelligence labels */ #atlasAiPanel .atlas-ai-message-body .atlas-ai-gold-label { color: #d6b65c !important; font-weight: 800 !important; } /* ========================================================== ATLAS INTELLIGENCE GRAPHICS TERMINAL / FINANCIAL-EDITORIAL RADAR ========================================================== */ /* MAIN PANEL */ #trendParishes .atlas-radar-layout { position: relative !important; display: grid !important; grid-template-columns: 250px minmax(0, 1fr) !important; align-items: stretch !important; gap: 0 !important; width: 100% !important; min-height: 475px !important; margin: 0 !important; padding: 0 !important; background: #070707 !important; border: 1px solid rgba(255,255,255,.075) !important; border-radius: 0 !important; overflow: hidden !important; } /* ========================================================== LEFT INFORMATION RAIL ========================================================== */ #trendParishes .atlas-v7-explainer { position: relative !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: flex-start !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 31px 26px !important; background: rgba(255,255,255,.012) !important; border: 0 !important; border-right: 1px solid rgba(255,255,255,.075) !important; text-align: left !important; } /* KICKER */ #trendParishes .atlas-v7-chart-type { display: block !important; margin: 0 0 13px !important; color: #d6b65c !important; font-size: 8px !important; font-weight: 850 !important; line-height: 1 !important; letter-spacing: .19em !important; } /* DESCRIPTION HEADLINE */ #trendParishes .atlas-v7-explainer strong { display: block !important; max-width: 195px !important; margin: 0 !important; padding: 0 !important; color: rgba(255,255,255,.96) !important; font-size: 16px !important; font-weight: 650 !important; line-height: 1.35 !important; letter-spacing: -.015em !important; } /* SMALL GOLD RULE */ #trendParishes .atlas-v7-explainer strong::after { content: "" !important; display: block !important; width: 34px !important; height: 1px !important; margin: 18px 0 0 !important; background: #d6b65c !important; } /* EXPLANATORY NOTE */ #trendParishes .atlas-v7-explainer p { max-width: 190px !important; margin: 18px 0 0 !important; padding: 0 !important; color: rgba(255,255,255,.43) !important; font-size: 9.5px !important; font-weight: 400 !important; line-height: 1.6 !important; text-align: left !important; } /* TERMINAL-LIKE STATUS AT BOTTOM */ #trendParishes .atlas-v7-explainer::after { content: "ATLAS / GEOGRAPHIC INTELLIGENCE" !important; display: block !important; margin-top: auto !important; padding-top: 22px !important; color: rgba(214,182,92,.58) !important; font-size: 7px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: .17em !important; } /* ========================================================== RADAR AREA ========================================================== */ #trendParishes .atlas-radar-stage { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 475px !important; min-height: 475px !important; margin: 0 !important; padding: 18px 34px !important; background: linear-gradient( rgba(255,255,255,.018) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.018) 1px, transparent 1px ), #070707 !important; background-size: 72px 72px, 72px 72px, auto !important; overflow: visible !important; } /* NO DECORATIVE HALO */ #trendParishes .atlas-radar-stage::before { display: none !important; } /* LARGE RADAR */ #trendParishes .atlas-radar-svg { position: relative !important; z-index: 2 !important; display: block !important; width: min(100%, 760px) !important; max-width: 760px !important; height: 440px !important; margin: 0 auto !important; overflow: visible !important; transform: none !important; filter: none !important; } /* ========================================================== RADAR GEOMETRY ========================================================== */ #trendParishes .atlas-radar-grid { fill: none !important; stroke: rgba(214,182,92,.22) !important; stroke-width: .75 !important; } #trendParishes .atlas-radar-axis { stroke: rgba(255,255,255,.10) !important; stroke-width: .7 !important; } #trendParishes .atlas-radar-area { fill: rgba(214,182,92,.13) !important; stroke: none !important; } #trendParishes .atlas-radar-outline { fill: none !important; stroke: #d6b65c !important; stroke-width: 1.55 !important; opacity: .95 !important; } /* ========================================================== DATA POINTS ========================================================== */ #trendParishes .atlas-radar-point-glow { fill: rgba(214,182,92,.14) !important; } #trendParishes .atlas-radar-point { fill: #d6b65c !important; stroke: #070707 !important; stroke-width: 1.25 !important; filter: none !important; } #trendParishes .atlas-radar-center { fill: #d6b65c !important; opacity: .8 !important; } /* ========================================================== DATA LABELS ========================================================== */ #trendParishes .atlas-radar-label { fill: rgba(255,255,255,.94) !important; font-size: 11.5px !important; font-weight: 650 !important; letter-spacing: 0 !important; } #trendParishes .atlas-radar-label-value { fill: #d6b65c !important; font-size: 8px !important; font-weight: 850 !important; letter-spacing: .11em !important; } /* NO ANIMATED MOVEMENT */ #trendParishes .atlas-radar-stage:hover .atlas-radar-svg { transform: none !important; } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 900px) { #trendParishes .atlas-radar-layout { grid-template-columns: 1fr !important; } #trendParishes .atlas-v7-explainer { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.075) !important; } #trendParishes .atlas-v7-explainer strong, #trendParishes .atlas-v7-explainer p { max-width: 520px !important; } #trendParishes .atlas-v7-explainer::after { margin-top: 24px !important; } } @media (max-width: 600px) { #trendParishes .atlas-radar-stage { height: 390px !important; min-height: 390px !important; padding: 12px !important; } #trendParishes .atlas-radar-svg { height: 360px !important; } } /* ========================================================== ATLAS INTELLIGENCE GRAPHICS TERMINAL / FINANCIAL-EDITORIAL CONSTELLATION ========================================================== */ /* MAIN PANEL */ #trendCategories .atlas-constellation-layout { position: relative !important; display: grid !important; grid-template-columns: 250px minmax(0, 1fr) !important; align-items: stretch !important; gap: 0 !important; width: 100% !important; min-height: 475px !important; margin: 0 !important; padding: 0 !important; background: #070707 !important; border: 1px solid rgba(255,255,255,.075) !important; border-radius: 0 !important; overflow: hidden !important; } /* ========================================================== LEFT INFORMATION RAIL ========================================================== */ #trendCategories .atlas-v7-explainer { position: relative !important; display: flex !important; flex-direction: column !important; justify-content: flex-start !important; align-items: flex-start !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 31px 26px !important; background: rgba(255,255,255,.012) !important; border: 0 !important; border-right: 1px solid rgba(255,255,255,.075) !important; text-align: left !important; } #trendCategories .atlas-v7-chart-type { display: block !important; margin: 0 0 13px !important; color: #d6b65c !important; font-size: 8px !important; font-weight: 850 !important; line-height: 1 !important; letter-spacing: .19em !important; } #trendCategories .atlas-v7-explainer strong { display: block !important; max-width: 195px !important; margin: 0 !important; padding: 0 !important; color: rgba(255,255,255,.96) !important; font-size: 16px !important; font-weight: 650 !important; line-height: 1.35 !important; letter-spacing: -.015em !important; } #trendCategories .atlas-v7-explainer strong::after { content: "" !important; display: block !important; width: 34px !important; height: 1px !important; margin: 18px 0 0 !important; background: #d6b65c !important; } #trendCategories .atlas-v7-explainer p { max-width: 190px !important; margin: 18px 0 0 !important; padding: 0 !important; color: rgba(255,255,255,.43) !important; font-size: 9.5px !important; font-weight: 400 !important; line-height: 1.6 !important; text-align: left !important; } #trendCategories .atlas-v7-explainer::after { content: "ATLAS / CATEGORY INTELLIGENCE" !important; display: block !important; margin-top: auto !important; padding-top: 22px !important; color: rgba(214,182,92,.58) !important; font-size: 7px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: .17em !important; } /* ========================================================== CONSTELLATION STAGE ========================================================== */ #trendCategories .atlas-constellation-stage { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 475px !important; min-height: 475px !important; margin: 0 !important; padding: 16px 30px !important; background: linear-gradient( rgba(255,255,255,.018) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.018) 1px, transparent 1px ), #070707 !important; background-size: 72px 72px, 72px 72px, auto !important; overflow: visible !important; } /* LARGE CHART */ #trendCategories .atlas-constellation-svg { position: relative !important; z-index: 2 !important; display: block !important; width: min(100%, 820px) !important; max-width: 820px !important; height: 430px !important; margin: 0 auto !important; overflow: visible !important; transform: none !important; filter: none !important; } /* ========================================================== CONNECTION LINES ========================================================== */ #trendCategories .atlas-constellation-line { stroke: rgba(214,182,92,.14) !important; stroke-width: .7 !important; stroke-dasharray: 2.5 5 !important; opacity: .75 !important; } /* ========================================================== BUBBLES ========================================================== */ /* Outer ring / shape */ #trendCategories .atlas-category-circle, #trendCategories .atlas-constellation-circle { fill: rgba(214,182,92,.055) !important; stroke: #d6b65c !important; stroke-width: 1.2 !important; opacity: .95 !important; filter: none !important; } /* Any secondary ring */ #trendCategories .atlas-category-ring, #trendCategories .atlas-constellation-ring { fill: none !important; stroke: rgba(214,182,92,.28) !important; stroke-width: .8 !important; } /* ========================================================== VALUES ========================================================== */ #trendCategories .atlas-category-count { fill: #d6b65c !important; font-size: 20px !important; font-weight: 700 !important; letter-spacing: -.02em !important; } /* ========================================================== CATEGORY LABELS ========================================================== */ #trendCategories .atlas-category-label { fill: rgba(255,255,255,.92) !important; font-size: 8.5px !important; font-weight: 600 !important; letter-spacing: 0 !important; } /* ========================================================== VISUAL PRIORITY ========================================================== */ /* Keep big categories authoritative. Smaller categories remain readable but visually quieter. */ #trendCategories g:nth-of-type(n+7) .atlas-category-count { font-size: 17px !important; } #trendCategories g:nth-of-type(n+7) .atlas-category-label { fill: rgba(255,255,255,.72) !important; } /* NO HOVER MOVEMENT */ #trendCategories .atlas-constellation-stage:hover .atlas-constellation-svg { transform: none !important; } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 900px) { #trendCategories .atlas-constellation-layout { grid-template-columns: 1fr !important; } #trendCategories .atlas-v7-explainer { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.075) !important; } #trendCategories .atlas-v7-explainer strong, #trendCategories .atlas-v7-explainer p { max-width: 520px !important; } #trendCategories .atlas-v7-explainer::after { margin-top: 24px !important; } } @media (max-width: 600px) { #trendCategories .atlas-constellation-stage { height: 390px !important; min-height: 390px !important; padding: 12px !important; } #trendCategories .atlas-constellation-svg { height: 360px !important; } } /* ========================================================== ATLAS CONSTELLATION — CATEGORY LABEL BREATHING ROOM ========================================================== */ /* Move category names slightly farther below their circles. Keeps large nodes such as Government from touching labels. */ #trendCategories .atlas-category-label { transform: translateY(7px) !important; } /* ========================================================== ATLAS CATEGORY ACTIVITY POLAR INTELLIGENCE RADAR ========================================================== */ #trendCategories .atlas-polar-layout { position: relative !important; display: grid !important; grid-template-columns: 250px minmax(0, 1fr) !important; align-items: stretch !important; width: 100% !important; min-height: 475px !important; margin: 0 !important; padding: 0 !important; background: #070707 !important; border: 1px solid rgba(255,255,255,.075) !important; border-radius: 0 !important; overflow: hidden !important; } /* LEFT INFORMATION RAIL */ #trendCategories .atlas-polar-layout .atlas-v7-explainer { display: flex !important; flex-direction: column !important; align-items: flex-start !important; margin: 0 !important; padding: 31px 26px !important; background: rgba(255,255,255,.012) !important; border: 0 !important; border-right: 1px solid rgba(255,255,255,.075) !important; text-align: left !important; } #trendCategories .atlas-polar-layout .atlas-v7-chart-type { display: block !important; margin-bottom: 13px !important; color: #d6b65c !important; font-size: 8px !important; font-weight: 850 !important; letter-spacing: .19em !important; } #trendCategories .atlas-polar-layout .atlas-v7-explainer strong { display: block !important; max-width: 195px !important; color: rgba(255,255,255,.96) !important; font-size: 16px !important; font-weight: 650 !important; line-height: 1.35 !important; } #trendCategories .atlas-polar-layout .atlas-v7-explainer strong::after { content: "" !important; display: block !important; width: 34px !important; height: 1px !important; margin-top: 18px !important; background: #d6b65c !important; } #trendCategories .atlas-polar-layout .atlas-v7-explainer p { max-width: 190px !important; margin-top: 18px !important; color: rgba(255,255,255,.43) !important; font-size: 9.5px !important; line-height: 1.6 !important; } #trendCategories .atlas-polar-layout .atlas-v7-explainer::after { content: "ATLAS / CATEGORY INTELLIGENCE" !important; display: block !important; margin-top: auto !important; color: rgba(214,182,92,.58) !important; font-size: 7px !important; font-weight: 800 !important; letter-spacing: .17em !important; } /* ANALYTICAL FIELD */ #trendCategories .atlas-polar-stage { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; height: 475px !important; min-height: 475px !important; padding: 10px 34px !important; background: linear-gradient( rgba(255,255,255,.018) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.018) 1px, transparent 1px ), #070707 !important; background-size: 72px 72px !important; overflow: visible !important; } #trendCategories .atlas-polar-svg { display: block !important; width: min(100%, 790px) !important; max-width: 790px !important; height: 445px !important; overflow: visible !important; } /* REFERENCE RINGS */ #trendCategories .atlas-polar-ring { fill: none !important; stroke: rgba(214,182,92,.16) !important; stroke-width: .7px !important; } #trendCategories .atlas-polar-ring-4 { stroke: rgba(214,182,92,.29) !important; } /* SPOKES */ #trendCategories .atlas-polar-axis { stroke: rgba(255,255,255,.08) !important; stroke-width: .65px !important; } #trendCategories .atlas-polar-value-line { stroke: rgba(214,182,92,.58) !important; stroke-width: 1.25px !important; } /* DATA POINT */ #trendCategories .atlas-polar-node-halo { fill: rgba(214,182,92,.11) !important; } #trendCategories .atlas-polar-node { fill: #d6b65c !important; stroke: #070707 !important; stroke-width: 1.3px !important; } /* LABELS */ #trendCategories .atlas-polar-label { fill: rgba(255,255,255,.95) !important; font-size: 9.5px !important; font-weight: 650 !important; } #trendCategories .atlas-polar-value { fill: #d6b65c !important; font-size: 7px !important; font-weight: 850 !important; letter-spacing: .1em !important; } /* CENTER */ #trendCategories .atlas-polar-center-ring { fill: #070707 !important; stroke: rgba(214,182,92,.65) !important; stroke-width: 1px !important; } #trendCategories .atlas-polar-center-title { fill: #d6b65c !important; font-size: 7px !important; font-weight: 850 !important; letter-spacing: .17em !important; } #trendCategories .atlas-polar-center-subtitle { fill: rgba(255,255,255,.43) !important; font-size: 4.6px !important; font-weight: 700 !important; letter-spacing: .1em !important; } /* RESPONSIVE */ @media (max-width: 900px) { #trendCategories .atlas-polar-layout { grid-template-columns: 1fr !important; } #trendCategories .atlas-polar-layout .atlas-v7-explainer { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.075) !important; } } @media (max-width: 600px) { #trendCategories .atlas-polar-stage { height: 390px !important; min-height: 390px !important; padding: 8px !important; } #trendCategories .atlas-polar-svg { height: 355px !important; } } /* ========================================================== ATLAS RADAR LIVE MOTION ========================================================== */ /* Parish radar points */ #trendParishes .atlas-radar-point { animation: atlasRadarPulse 2.8s ease-in-out infinite !important; transform-box: fill-box !important; transform-origin: center !important; } /* Staggered pulse so points do not all move together */ #trendParishes .atlas-radar-data-point:nth-child(2) .atlas-radar-point { animation-delay: .35s !important; } #trendParishes .atlas-radar-data-point:nth-child(3) .atlas-radar-point { animation-delay: .7s !important; } #trendParishes .atlas-radar-data-point:nth-child(4) .atlas-radar-point { animation-delay: 1.05s !important; } #trendParishes .atlas-radar-data-point:nth-child(5) .atlas-radar-point { animation-delay: 1.4s !important; } #trendParishes .atlas-radar-data-point:nth-child(6) .atlas-radar-point { animation-delay: 1.75s !important; } /* Parish radar outline gently breathes */ #trendParishes .atlas-radar-outline { animation: atlasRadarOutline 4.5s ease-in-out infinite !important; } /* Parish radar center */ #trendParishes .atlas-radar-center { animation: atlasRadarCenter 2.4s ease-in-out infinite !important; transform-box: fill-box !important; transform-origin: center !important; } /* Category polar nodes */ #trendCategories .atlas-polar-node { animation: atlasPolarPulse 2.7s ease-in-out infinite !important; transform-box: fill-box !important; transform-origin: center !important; } #trendCategories .atlas-polar-category:nth-of-type(2) .atlas-polar-node { animation-delay: .3s !important; } #trendCategories .atlas-polar-category:nth-of-type(3) .atlas-polar-node { animation-delay: .6s !important; } #trendCategories .atlas-polar-category:nth-of-type(4) .atlas-polar-node { animation-delay: .9s !important; } #trendCategories .atlas-polar-category:nth-of-type(5) .atlas-polar-node { animation-delay: 1.2s !important; } #trendCategories .atlas-polar-category:nth-of-type(6) .atlas-polar-node { animation-delay: 1.5s !important; } /* Category node halos breathe independently */ #trendCategories .atlas-polar-node-halo { animation: atlasPolarHalo 2.7s ease-in-out infinite !important; transform-box: fill-box !important; transform-origin: center !important; } /* Outer category ring gets a subtle scan pulse */ #trendCategories .atlas-polar-ring-4 { animation: atlasPolarRing 5s ease-in-out infinite !important; } /* ========================================================== KEYFRAMES ========================================================== */ @keyframes atlasRadarPulse { 0%, 100% { transform: scale(1); opacity: .88; } 50% { transform: scale(1.34); opacity: 1; } } @keyframes atlasRadarOutline { 0%, 100% { opacity: .72; } 50% { opacity: 1; } } @keyframes atlasRadarCenter { 0%, 100% { transform: scale(1); opacity: .65; } 50% { transform: scale(1.55); opacity: 1; } } @keyframes atlasPolarPulse { 0%, 100% { transform: scale(1); opacity: .88; } 50% { transform: scale(1.35); opacity: 1; } } @keyframes atlasPolarHalo { 0%, 100% { transform: scale(.85); opacity: .08; } 50% { transform: scale(1.45); opacity: .22; } } @keyframes atlasPolarRing { 0%, 100% { opacity: .38; } 50% { opacity: .72; } } /* Respect reduced-motion accessibility */ @media (prefers-reduced-motion: reduce) { #trendParishes .atlas-radar-point, #trendParishes .atlas-radar-outline, #trendParishes .atlas-radar-center, #trendCategories .atlas-polar-node, #trendCategories .atlas-polar-node-halo, #trendCategories .atlas-polar-ring-4 { animation: none !important; } } /* ========================================================== ATLAS INTELLIGENCE GRAPHICS TERMINAL / FINANCIAL-EDITORIAL STRENGTH PROFILE ========================================================== */ /* MAIN PANEL */ #trendStrength .atlas-gauge-layout { position: relative !important; display: grid !important; grid-template-columns: 250px minmax(0, 1fr) !important; align-items: stretch !important; gap: 0 !important; width: 100% !important; min-height: 475px !important; margin: 0 !important; padding: 0 !important; background: #070707 !important; border: 1px solid rgba(255,255,255,.075) !important; border-radius: 0 !important; overflow: hidden !important; } /* ========================================================== LEFT INFORMATION RAIL ========================================================== */ #trendStrength .atlas-v7-explainer { position: relative !important; display: flex !important; flex-direction: column !important; align-items: flex-start !important; justify-content: flex-start !important; width: auto !important; max-width: none !important; margin: 0 !important; padding: 31px 26px !important; background: rgba(255,255,255,.012) !important; border: 0 !important; border-right: 1px solid rgba(255,255,255,.075) !important; text-align: left !important; } /* KICKER */ #trendStrength .atlas-v7-chart-type { display: block !important; margin: 0 0 13px !important; color: #d6b65c !important; font-size: 8px !important; font-weight: 850 !important; line-height: 1 !important; letter-spacing: .19em !important; } /* TITLE */ #trendStrength .atlas-v7-explainer strong { display: block !important; max-width: 195px !important; margin: 0 !important; color: rgba(255,255,255,.96) !important; font-size: 16px !important; font-weight: 650 !important; line-height: 1.35 !important; letter-spacing: -.015em !important; } /* GOLD RULE */ #trendStrength .atlas-v7-explainer strong::after { content: "" !important; display: block !important; width: 34px !important; height: 1px !important; margin: 18px 0 0 !important; background: #d6b65c !important; } /* DESCRIPTION */ #trendStrength .atlas-v7-explainer p { max-width: 190px !important; margin: 18px 0 0 !important; color: rgba(255,255,255,.43) !important; font-size: 9.5px !important; font-weight: 400 !important; line-height: 1.6 !important; text-align: left !important; } /* BOTTOM STATUS */ #trendStrength .atlas-v7-explainer::after { content: "ATLAS / SIGNAL CONFIDENCE" !important; display: block !important; margin-top: auto !important; padding-top: 22px !important; color: rgba(214,182,92,.58) !important; font-size: 7px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: .17em !important; } /* ========================================================== DATA FIELD ========================================================== */ #trendStrength .atlas-gauge-content { position: relative !important; display: grid !important; grid-template-columns: minmax(420px, 1.15fr) minmax(270px, .85fr) !important; align-items: center !important; gap: 38px !important; width: 100% !important; height: 475px !important; margin: 0 !important; padding: 28px 42px !important; background: linear-gradient( rgba(255,255,255,.018) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.018) 1px, transparent 1px ), #070707 !important; background-size: 72px 72px, 72px 72px, auto !important; } /* ========================================================== GAUGE ========================================================== */ #trendStrength .atlas-gauge-stage { display: flex !important; align-items: center !important; justify-content: center !important; width: 100% !important; height: 390px !important; margin: 0 !important; padding: 0 !important; } #trendStrength .atlas-gauge-svg { display: block !important; width: min(100%, 560px) !important; max-width: 560px !important; height: 365px !important; margin: 0 auto !important; overflow: visible !important; } /* TRACK */ #trendStrength .atlas-gauge-track { fill: rgba(255,255,255,.035) !important; stroke: rgba(255,255,255,.08) !important; stroke-width: .6 !important; } /* SEGMENTS */ #trendStrength .atlas-gauge-segment { fill: #d6b65c !important; opacity: var(--segment-opacity, .5) !important; stroke: #070707 !important; stroke-width: 1.5 !important; } /* Give each confidence level a restrained tonal hierarchy */ #trendStrength .atlas-gauge-segment-1 { opacity: 1 !important; } #trendStrength .atlas-gauge-segment-2 { opacity: .82 !important; } #trendStrength .atlas-gauge-segment-3 { opacity: .58 !important; } #trendStrength .atlas-gauge-segment-4 { opacity: .31 !important; } /* TOTAL */ #trendStrength .atlas-gauge-total { fill: rgba(255,255,255,.98) !important; font-size: 45px !important; font-weight: 700 !important; letter-spacing: -.035em !important; } #trendStrength .atlas-gauge-total-label { fill: rgba(255,255,255,.43) !important; font-size: 8px !important; font-weight: 800 !important; letter-spacing: .16em !important; } /* LOW / HIGH AXIS TEXT */ #trendStrength .atlas-gauge-low-label, #trendStrength .atlas-gauge-high-label { fill: rgba(255,255,255,.37) !important; font-size: 7px !important; font-weight: 750 !important; letter-spacing: .13em !important; } /* ========================================================== LEGEND / DATA TABLE ========================================================== */ #trendStrength .atlas-gauge-legend { display: flex !important; flex-direction: column !important; width: 100% !important; margin: 0 !important; padding: 0 !important; border-top: 1px solid rgba(255,255,255,.075) !important; } #trendStrength .atlas-gauge-legend-row { display: grid !important; grid-template-columns: 12px 1fr auto !important; align-items: center !important; gap: 13px !important; min-height: 68px !important; margin: 0 !important; padding: 12px 6px !important; border-bottom: 1px solid rgba(255,255,255,.075) !important; } /* SMALL DATA MARKER */ #trendStrength .atlas-gauge-swatch { display: block !important; width: 9px !important; height: 9px !important; background: #d6b65c !important; border: 0 !important; border-radius: 0 !important; } #trendStrength .atlas-gauge-swatch-1 { opacity: 1 !important; } #trendStrength .atlas-gauge-swatch-2 { opacity: .82 !important; } #trendStrength .atlas-gauge-swatch-3 { opacity: .58 !important; } #trendStrength .atlas-gauge-swatch-4 { opacity: .31 !important; } /* LABEL */ #trendStrength .atlas-gauge-legend-copy { display: flex !important; flex-direction: column !important; gap: 5px !important; min-width: 0 !important; } #trendStrength .atlas-gauge-legend-copy strong { margin: 0 !important; color: #d6b65c !important; font-size: 10px !important; font-weight: 800 !important; line-height: 1 !important; letter-spacing: .10em !important; text-transform: uppercase !important; } /* SHARE */ #trendStrength .atlas-gauge-legend-copy small { color: rgba(255,255,255,.38) !important; font-size: 7px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: .12em !important; } /* RAW NUMBER */ #trendStrength .atlas-gauge-legend-row b { min-width: 80px !important; color: #d6b65c !important; font-size: 22px !important; font-weight: 700 !important; line-height: 1 !important; letter-spacing: -.025em !important; text-align: right !important; } /* ========================================================== LIVE MOTION ========================================================== */ /* Very subtle segment breathing */ #trendStrength .atlas-gauge-segment { animation: atlasGaugeLive 4.5s ease-in-out infinite !important; } #trendStrength .atlas-gauge-segment-2 { animation-delay: .45s !important; } #trendStrength .atlas-gauge-segment-3 { animation-delay: .9s !important; } #trendStrength .atlas-gauge-segment-4 { animation-delay: 1.35s !important; } @keyframes atlasGaugeLive { 0%, 100% { filter: brightness(.92); } 50% { filter: brightness(1.12); } } /* Total count gets an extremely restrained live pulse */ #trendStrength .atlas-gauge-total { animation: atlasGaugeTotalPulse 4s ease-in-out infinite !important; } @keyframes atlasGaugeTotalPulse { 0%, 100% { opacity: .92; } 50% { opacity: 1; } } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width: 1050px) { #trendStrength .atlas-gauge-content { grid-template-columns: 1fr 320px !important; gap: 22px !important; padding: 26px !important; } } @media (max-width: 900px) { #trendStrength .atlas-gauge-layout { grid-template-columns: 1fr !important; } #trendStrength .atlas-v7-explainer { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.075) !important; } #trendStrength .atlas-gauge-content { grid-template-columns: 1fr !important; height: auto !important; padding: 28px !important; } #trendStrength .atlas-gauge-stage { height: 360px !important; } } @media (max-width: 600px) { #trendStrength .atlas-gauge-content { padding: 18px !important; } #trendStrength .atlas-gauge-stage { height: 310px !important; } #trendStrength .atlas-gauge-svg { height: 290px !important; } #trendStrength .atlas-gauge-legend-row b { font-size: 18px !important; } } /* REDUCED MOTION */ @media (prefers-reduced-motion: reduce) { #trendStrength .atlas-gauge-segment, #trendStrength .atlas-gauge-total { animation: none !important; } } /* ========================================================== ATLAS SIGNAL FLOW FINANCIAL-EDITORIAL LIVE PULSE ========================================================== */ #trendStrength .atlas-flow-layout { display: grid !important; grid-template-columns: 250px minmax(0,1fr) !important; width: 100% !important; min-height: 475px !important; background: #070707 !important; border: 1px solid rgba(255,255,255,.075) !important; border-radius: 0 !important; overflow: hidden !important; } /* LEFT INFORMATION RAIL */ #trendStrength .atlas-flow-layout .atlas-v7-explainer { display: flex !important; flex-direction: column !important; align-items: flex-start !important; margin: 0 !important; padding: 31px 26px !important; background: rgba(255,255,255,.012) !important; border: 0 !important; border-right: 1px solid rgba(255,255,255,.075) !important; text-align: left !important; } #trendStrength .atlas-flow-layout .atlas-v7-chart-type { color: #d6b65c !important; margin-bottom: 13px !important; font-size: 8px !important; font-weight: 850 !important; letter-spacing: .19em !important; } #trendStrength .atlas-flow-layout .atlas-v7-explainer strong { display: block !important; max-width: 195px !important; color: rgba(255,255,255,.96) !important; font-size: 16px !important; font-weight: 650 !important; line-height: 1.35 !important; } #trendStrength .atlas-flow-layout .atlas-v7-explainer strong::after { content: "" !important; display: block !important; width: 34px !important; height: 1px !important; margin-top: 18px !important; background: #d6b65c !important; } #trendStrength .atlas-flow-layout .atlas-v7-explainer p { max-width: 190px !important; margin-top: 18px !important; color: rgba(255,255,255,.43) !important; font-size: 9.5px !important; line-height: 1.6 !important; } #trendStrength .atlas-flow-layout .atlas-v7-explainer::after { content: "ATLAS / LIVE SIGNAL FLOW" !important; display: block !important; margin-top: auto !important; color: rgba(214,182,92,.58) !important; font-size: 7px !important; font-weight: 800 !important; letter-spacing: .17em !important; } /* DATA FIELD */ #trendStrength .atlas-flow-stage { position: relative !important; display: flex !important; align-items: center !important; justify-content: center !important; height: 475px !important; padding: 24px 42px !important; background: linear-gradient( rgba(255,255,255,.018) 1px, transparent 1px ), linear-gradient( 90deg, rgba(255,255,255,.018) 1px, transparent 1px ), #070707 !important; background-size: 72px 72px, 72px 72px, auto !important; } /* SUMMARY BLOCK */ #trendStrength .atlas-flow-summary { position: absolute !important; top: 26px !important; right: 34px !important; display: grid !important; grid-template-columns: auto auto !important; column-gap: 12px !important; align-items: baseline !important; z-index: 3 !important; } #trendStrength .atlas-flow-summary span { color: rgba(255,255,255,.38) !important; font-size: 7px !important; font-weight: 800 !important; letter-spacing: .15em !important; } #trendStrength .atlas-flow-summary strong { color: #d6b65c !important; font-size: 24px !important; font-weight: 700 !important; } #trendStrength .atlas-flow-summary small { grid-column: 1 / -1 !important; margin-top: 3px !important; color: rgba(255,255,255,.25) !important; font-size: 6px !important; font-weight: 750 !important; letter-spacing: .14em !important; text-align: right !important; } /* SVG */ #trendStrength .atlas-flow-svg { display: block !important; width: min(100%, 790px) !important; max-width: 790px !important; height: 400px !important; overflow: visible !important; } /* TRACKS */ #trendStrength .atlas-flow-track { stroke: rgba(255,255,255,.085) !important; stroke-width: 1px !important; } #trendStrength .atlas-flow-active { stroke: #d6b65c !important; opacity: var(--flow-opacity,.5) !important; stroke-linecap: round !important; } /* MOVING PULSES */ #trendStrength .atlas-flow-pulse { fill: #e1c36b !important; opacity: .9 !important; filter: drop-shadow(0 0 3px rgba(214,182,92,.34)) !important; } /* TERMINAL POINT */ #trendStrength .atlas-flow-terminal { fill: #d6b65c !important; stroke: #070707 !important; stroke-width: 1.3px !important; animation: atlasFlowTerminalPulse 2.8s ease-in-out infinite !important; transform-box: fill-box !important; transform-origin: center !important; } @keyframes atlasFlowTerminalPulse { 0%,100% { transform: scale(.9); opacity: .7; } 50% { transform: scale(1.35); opacity: 1; } } /* VERTICAL ORIGIN */ #trendStrength .atlas-flow-zero { stroke: rgba(214,182,92,.20) !important; stroke-width: .8px !important; } /* LABELS */ #trendStrength .atlas-flow-label { fill: rgba(255,255,255,.92) !important; font-size: 9px !important; font-weight: 750 !important; letter-spacing: .08em !important; } #trendStrength .atlas-flow-percent { fill: rgba(255,255,255,.32) !important; font-size: 6.3px !important; font-weight: 700 !important; letter-spacing: .09em !important; } #trendStrength .atlas-flow-value { fill: #d6b65c !important; font-size: 19px !important; font-weight: 700 !important; letter-spacing: -.025em !important; } #trendStrength .atlas-flow-axis-label { fill: rgba(255,255,255,.26) !important; font-size: 6px !important; font-weight: 750 !important; letter-spacing: .13em !important; } /* REDUCED MOTION */ @media (prefers-reduced-motion: reduce) { #trendStrength .atlas-flow-pulse { display: none !important; } #trendStrength .atlas-flow-terminal { animation: none !important; } } /* RESPONSIVE */ @media (max-width: 900px) { #trendStrength .atlas-flow-layout { grid-template-columns: 1fr !important; } #trendStrength .atlas-flow-layout .atlas-v7-explainer { border-right: 0 !important; border-bottom: 1px solid rgba(255,255,255,.075) !important; } } @media (max-width: 600px) { #trendStrength .atlas-flow-stage { height: 390px !important; padding: 16px !important; } #trendStrength .atlas-flow-svg { height: 350px !important; } } /* ========================================================== ATLAS MAP — LIVE ECONOMIC PULSE ========================================================== */ .atlas-map-pulse-marker { position: relative !important; width: 18px !important; height: 18px !important; } /* solid center */ .atlas-map-pulse-core { position: absolute !important; left: 50% !important; top: 50% !important; width: 12px !important; height: 12px !important; transform: translate(-50%, -50%) !important; border-radius: 50% !important; background: #d6b65c !important; border: 1px solid rgba(255,255,255,.36) !important; box-shadow: 0 0 0 2px rgba(214,182,92,.18), 0 0 8px rgba(214,182,92,.34) !important; z-index: 3 !important; } /* first expanding wave */ .atlas-map-pulse-ring { position: absolute !important; left: 50% !important; top: 50% !important; width: 16px !important; height: 16px !important; transform: translate(-50%, -50%) scale(.65) !important; border: 1.5px solid rgba(214,182,92,.68) !important; border-radius: 50% !important; opacity: 0 !important; animation: atlasMapCapitalPulse 3.4s ease-out infinite !important; } /* second wave */ .atlas-map-pulse-ring-2 { animation-delay: 1.7s !important; } /* slightly stronger pulse */ .atlas-map-pulse-marker.atlas-map-pulse-strong .atlas-map-pulse-ring { border-color: rgba(214,182,92,.86) !important; } .atlas-map-pulse-marker.atlas-map-pulse-strong .atlas-map-pulse-core { width: 14px !important; height: 14px !important; box-shadow: 0 0 0 2px rgba(214,182,92,.22), 0 0 12px rgba(214,182,92,.48) !important; } @keyframes atlasMapCapitalPulse { 0% { transform: translate(-50%, -50%) scale(.65) !important; opacity: .72; } 65% { opacity: .18; } 100% { transform: translate(-50%, -50%) scale(3.1) !important; opacity: 0; } } /* subtle breathing of the actual capital point */ .atlas-map-pulse-core { animation: atlasMapCoreBreath 2.8s ease-in-out infinite !important; } @keyframes atlasMapCoreBreath { 0%, 100% { transform: translate(-50%, -50%) scale(.94) !important; } 50% { transform: translate(-50%, -50%) scale(1.10) !important; } } /* accessibility */ @media (prefers-reduced-motion: reduce) { .atlas-map-pulse-ring, .atlas-map-pulse-core { animation: none !important; } } /* ========================================================== ATLAS LIVE ECONOMIC MAP CAPITAL PULSE MARKERS ========================================================== */ /* Remove Leaflet's normal icon presentation */ .atlas-map-pulse-leaflet { background: transparent !important; border: 0 !important; } /* Marker field */ .atlas-map-pulse-marker { --atlas-map-delay: 0s; position: relative !important; width: 22px !important; height: 22px !important; overflow: visible !important; pointer-events: auto !important; } /* ========================================================== CAPITAL CORE ========================================================== */ .atlas-map-pulse-core { position: absolute !important; left: 50% !important; top: 50% !important; width: 10px !important; height: 10px !important; border-radius: 50% !important; background: #d6b65c !important; border: 1px solid rgba(255,255,255,.42) !important; box-shadow: 0 0 0 2px rgba(214,182,92,.16), 0 0 7px rgba(214,182,92,.36) !important; transform: translate(-50%, -50%) scale(1) !important; transform-origin: center !important; animation: atlasCapitalCoreBreath 2.9s ease-in-out infinite !important; animation-delay: var(--atlas-map-delay) !important; z-index: 4 !important; } /* ========================================================== EXPANDING ECONOMIC WAVES ========================================================== */ .atlas-map-pulse-ring { position: absolute !important; left: 50% !important; top: 50% !important; width: 15px !important; height: 15px !important; border-radius: 50% !important; border: 1.25px solid rgba(214,182,92,.72) !important; background: transparent !important; transform: translate(-50%, -50%) scale(.7) !important; transform-origin: center !important; opacity: 0; pointer-events: none !important; animation: atlasCapitalWave 3.6s cubic-bezier(.15,.55,.35,1) infinite !important; animation-delay: var(--atlas-map-delay) !important; z-index: 2 !important; } /* Second wave follows the first */ .atlas-map-pulse-ring-2 { animation-delay: calc( var(--atlas-map-delay) + 1.8s ) !important; opacity: 0; } /* ========================================================== MOTION ========================================================== */ @keyframes atlasCapitalWave { 0% { transform: translate(-50%, -50%) scale(.65); opacity: 0; } 12% { opacity: .70; } 58% { opacity: .22; } 100% { transform: translate(-50%, -50%) scale(3.25); opacity: 0; } } @keyframes atlasCapitalCoreBreath { 0%, 100% { transform: translate(-50%, -50%) scale(.92); opacity: .82; } 50% { transform: translate(-50%, -50%) scale(1.14); opacity: 1; } } /* ========================================================== HOVER ========================================================== */ .atlas-map-pulse-marker:hover .atlas-map-pulse-core { box-shadow: 0 0 0 3px rgba(214,182,92,.20), 0 0 12px rgba(214,182,92,.55) !important; } /* ========================================================== ACCESSIBILITY ========================================================== */ @media (prefers-reduced-motion: reduce) { .atlas-map-pulse-core, .atlas-map-pulse-ring { animation: none !important; } .atlas-map-pulse-ring { display: none !important; } } /* ========================================================== ATLAS REGIONAL ECONOMIC NETWORK Bloomberg-inspired live intelligence treatment ========================================================== */ /* Remove Leaflet's standard icon box */ .atlas-network-leaflet-icon { background: transparent !important; border: 0 !important; } /* ========================================================== NODE ========================================================== */ .atlas-network-node { --atlas-node-delay: 0s; position: relative !important; width: 20px !important; height: 20px !important; overflow: visible !important; } /* The actual parish location */ .atlas-network-dot { position: absolute !important; left: 50% !important; top: 50% !important; width: 7px !important; height: 7px !important; transform: translate(-50%, -50%) scale(1) !important; border-radius: 50% !important; background: #d6b65c !important; border: 1px solid rgba(255,255,255,.72) !important; box-shadow: 0 0 3px rgba(214,182,92,.55), 0 0 7px rgba(214,182,92,.24) !important; animation: atlasNetworkDotBreath 2.8s ease-in-out infinite !important; animation-delay: var(--atlas-node-delay) !important; z-index: 3 !important; } /* ========================================================== BREATHING CAPITAL HALO ========================================================== */ .atlas-network-halo { position: absolute !important; left: 50% !important; top: 50% !important; width: 9px !important; height: 9px !important; transform: translate(-50%, -50%) scale(.75); transform-origin: center !important; border-radius: 50% !important; border: 1px solid rgba(214,182,92,.72) !important; background: rgba(214,182,92,.08) !important; opacity: 0; pointer-events: none !important; animation: atlasNetworkHalo 3.2s cubic-bezier(.18,.55,.32,1) infinite !important; animation-delay: var(--atlas-node-delay) !important; z-index: 2 !important; } @keyframes atlasNetworkHalo { 0% { transform: translate(-50%, -50%) scale(.65); opacity: 0; } 12% { opacity: .78; } 55% { opacity: .25; } 100% { transform: translate(-50%, -50%) scale(2.8); opacity: 0; } } @keyframes atlasNetworkDotBreath { 0%, 100% { transform: translate(-50%, -50%) scale(.92); opacity: .82; } 50% { transform: translate(-50%, -50%) scale(1.22); opacity: 1; box-shadow: 0 0 4px rgba(214,182,92,.72), 0 0 10px rgba(214,182,92,.34); } } /* ========================================================== REGIONAL CONNECTIONS ========================================================== */ .leaflet-overlay-pane .atlas-regional-network-line { stroke: #d6b65c !important; stroke-width: 1.25px !important; stroke-opacity: .42 !important; stroke-linecap: round !important; stroke-linejoin: round !important; vector-effect: non-scaling-stroke !important; filter: drop-shadow( 0 0 1px rgba(214,182,92,.18) ) !important; } /* * Give each economic corridor a slightly different * pulse phase while keeping the same Atlas gold. */ .leaflet-overlay-pane .atlas-region-line-1 { animation: atlasRegionalLineBreath 5.2s ease-in-out infinite !important; } .leaflet-overlay-pane .atlas-region-line-2 { animation: atlasRegionalLineBreath 5.2s ease-in-out -1.7s infinite !important; } .leaflet-overlay-pane .atlas-region-line-3 { animation: atlasRegionalLineBreath 5.2s ease-in-out -3.4s infinite !important; } @keyframes atlasRegionalLineBreath { 0%, 100% { stroke-opacity: .26; } 50% { stroke-opacity: .58; } } /* ========================================================== HOVER ========================================================== */ .atlas-network-node:hover .atlas-network-dot { width: 9px !important; height: 9px !important; box-shadow: 0 0 5px rgba(214,182,92,.8), 0 0 13px rgba(214,182,92,.42) !important; } /* ========================================================== ACCESSIBILITY ========================================================== */ @media (prefers-reduced-motion: reduce) { .atlas-network-dot, .atlas-network-halo, .leaflet-overlay-pane .atlas-regional-network-line { animation: none !important; } .atlas-network-halo { opacity: .3 !important; transform: translate(-50%, -50%) scale(1.5) !important; } } /* ========================================================== ATLAS MAP — SVG REGIONAL ECONOMIC NETWORK ========================================================== */ /* Thin regional relationships */ .leaflet-overlay-pane .atlas-economic-network-line { stroke: #d6b65c !important; stroke-width: 1.4px !important; stroke-opacity: .42 !important; stroke-linecap: round !important; stroke-linejoin: round !important; filter: drop-shadow( 0 0 1px rgba(214,182,92,.24) ) !important; } /* Main parish intelligence point */ .leaflet-overlay-pane .atlas-economic-node { fill: #d6b65c !important; fill-opacity: 1 !important; stroke: rgba(255,244,205,.95) !important; stroke-width: 1px !important; filter: drop-shadow( 0 0 3px rgba(214,182,92,.65) ) !important; } /* Animated outer pulse */ .leaflet-overlay-pane .atlas-economic-halo { stroke: #d6b65c !important; fill: rgba(214,182,92,.04) !important; pointer-events: none !important; } /* Kill the previous HTML marker appearance */ .atlas-map-pulse-leaflet, .atlas-map-pulse-marker, .atlas-network-leaflet-icon, .atlas-network-node { background: transparent !important; box-shadow: none !important; border: 0 !important; } /* ========================================================== NEWSROOM — READABILITY + FOOTER CLEANUP ========================================================== */ /* Make supporting descriptions easier to read */ .atlas-newsroom-copy p { color: #aeb3ba !important; opacity: 1 !important; } /* Remove year from bottom-right footer */ .atlas-footer-year { display: none !important; } /* ========================================================== MEDIA FOOTER — CENTER TAGLINE ========================================================== */ .atlas-media-about-footer { display: flex !important; align-items: center !important; justify-content: center !important; text-align: center !important; } .atlas-media-about-footer > span { width: 100% !important; text-align: center !important; margin: 0 auto !important; } /* ============================================================ ATLAS — MOBILE SIGNAL WIRE + ECONOMIC SIGNALS FIX Mobile only. Desktop remains unchanged. ============================================================ */ @media (max-width: 768px) { /* -------------------------------------------------------- SIGNAL WIRE — FORCE CONTINUOUS MOBILE MOVEMENT -------------------------------------------------------- */ /* -------------------------------------------------------- ECONOMIC SIGNALS — MOBILE FILTER PANEL Stop desktop columns from being squeezed onto the phone. -------------------------------------------------------- */ #filters .atlas-filter-grid, #filters .atlas-filter-grid:has(.atlas-filter-action) { display: grid !important; grid-template-columns: 1fr !important; width: 100% !important; gap: 18px !important; align-items: stretch !important; } /* Every filter becomes full width */ #filters .atlas-filter-grid > * { grid-column: 1 / -1 !important; width: 100% !important; min-width: 0 !important; max-width: none !important; } /* Filter labels */ #filters .atlas-filter-grid label { display: block !important; width: 100% !important; min-width: 0 !important; } #filters .atlas-filter-grid label > span { display: block !important; width: 100% !important; margin: 0 0 9px !important; white-space: normal !important; line-height: 1.25 !important; } /* Dropdowns */ #filters .atlas-filter-grid select, #filters #date_range { display: block !important; width: 100% !important; min-width: 0 !important; max-width: none !important; height: 56px !important; box-sizing: border-box !important; } /* Search + Reset buttons */ #filters .atlas-filter-action, #filters #searchButton, #filters #resetButton { width: 100% !important; max-width: none !important; min-width: 0 !important; grid-column: 1 / -1 !important; } } /* ============================================================ ATLAS — MOBILE NEWSROOM ARROWS Force desktop-style gold text arrows on iPhone/mobile. Desktop remains unchanged. ============================================================ */ @media (max-width: 768px) { .atlas-newsroom-arrow { font-size: 0 !important; line-height: 1 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; color: #c9a64b !important; } .atlas-newsroom-arrow::before { content: "↗︎"; display: inline-block; font-family: Arial, Helvetica, sans-serif !important; font-size: 15px !important; font-weight: 400 !important; line-height: 1 !important; color: #c9a64b !important; text-shadow: none !important; } } /* ============================================================ ATLAS — MOBILE SIGNAL WIRE JavaScript owns movement on touch/mobile devices. Desktop retains the original CSS ticker. ============================================================ */ @media (max-width: 768px) and (hover: none) and (pointer: coarse) { .atlas-signal-tape-window { overflow: hidden !important; } .atlas-signal-tape-track { animation: none !important; -webkit-animation: none !important; will-change: transform !important; transform: translate3d(0, 0, 0); -webkit-transform: translate3d(0, 0, 0); } } /* ========================================================== ATLAS OPEN ACCESS PARTNERSHIP SLOT ========================================================== */ .atlas-partnership-slot { display: flex !important; align-items: center !important; justify-content: center !important; gap: 10px !important; margin-top: 24px !important; padding-top: 14px !important; border-top: 1px solid var(--atlas-line) !important; font-size: 11px !important; font-weight: 700 !important; letter-spacing: .16em !important; text-transform: uppercase !important; color: var(--atlas-muted) !important; } .atlas-partnership-slot span:first-child { color: var(--atlas-gold) !important; } .atlas-partnership-divider { opacity: .55 !important; } @media (max-width: 700px) { .atlas-partnership-slot { flex-wrap: wrap !important; gap: 6px !important; text-align: center !important; letter-spacing: .12em !important; } } /* ========================================================== PARTNER WITH ATLAS ========================================================== */ .atlas-partner-section { position: relative !important; margin: 48px 0 0 !important; padding: 72px 32px !important; overflow: hidden !important; background: radial-gradient( circle at 80% 20%, rgba(197, 160, 89, .08), transparent 34% ), linear-gradient( 180deg, rgba(255,255,255,.018), rgba(255,255,255,0) ), var(--atlas-bg) !important; border-top: 1px solid var(--atlas-line) !important; border-bottom: 1px solid var(--atlas-line) !important; } .atlas-partner-inner { width: min(1180px, 100%) !important; margin: 0 auto !important; } .atlas-partner-kicker { margin-bottom: 18px !important; color: var(--atlas-gold) !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .20em !important; text-transform: uppercase !important; } .atlas-partner-section h2 { max-width: 760px !important; margin: 0 !important; color: var(--atlas-text) !important; font-size: clamp(34px, 5vw, 62px) !important; line-height: 1.02 !important; font-weight: 700 !important; letter-spacing: -.035em !important; } .atlas-partner-lead { max-width: 760px !important; margin: 24px 0 0 !important; color: var(--atlas-muted) !important; font-size: 16px !important; line-height: 1.7 !important; } .atlas-partner-grid { display: grid !important; grid-template-columns: repeat(4, minmax(0, 1fr)) !important; margin-top: 48px !important; border-top: 1px solid var(--atlas-line) !important; border-bottom: 1px solid var(--atlas-line) !important; } .atlas-partner-card { min-height: 210px !important; padding: 24px !important; border-right: 1px solid var(--atlas-line) !important; transition: background .2s ease, transform .2s ease !important; } .atlas-partner-card:last-child { border-right: 0 !important; } .atlas-partner-card:hover { background: rgba(197, 160, 89, .045) !important; } .atlas-partner-card > span { display: block !important; margin-bottom: 42px !important; color: var(--atlas-gold) !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .16em !important; } .atlas-partner-card strong { display: block !important; margin-bottom: 12px !important; color: var(--atlas-text) !important; font-size: 12px !important; font-weight: 800 !important; letter-spacing: .12em !important; text-transform: uppercase !important; } .atlas-partner-card p { margin: 0 !important; color: var(--atlas-muted) !important; font-size: 13px !important; line-height: 1.6 !important; } .atlas-independence-standard { display: grid !important; grid-template-columns: 220px 1fr !important; gap: 32px !important; margin-top: 34px !important; padding: 22px 0 !important; border-bottom: 1px solid var(--atlas-line) !important; } .atlas-independence-standard > span { color: var(--atlas-gold) !important; font-size: 10px !important; font-weight: 800 !important; letter-spacing: .15em !important; text-transform: uppercase !important; } .atlas-independence-standard p { max-width: 680px !important; margin: 0 !important; color: var(--atlas-muted) !important; font-size: 12px !important; line-height: 1.65 !important; } .atlas-partner-cta { display: inline-flex !important; align-items: center !important; gap: 18px !important; margin-top: 32px !important; padding: 14px 20px !important; color: var(--atlas-gold) !important; border: 1px solid var(--atlas-gold) !important; text-decoration: none !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .15em !important; text-transform: uppercase !important; transition: background .2s ease, color .2s ease !important; } .atlas-partner-cta:hover { background: var(--atlas-gold) !important; color: #050505 !important; } .atlas-partner-cta span { font-size: 16px !important; line-height: 1 !important; } /* ========================================================== PARTNER WITH ATLAS — RESPONSIVE ========================================================== */ @media (max-width: 900px) { .atlas-partner-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } .atlas-partner-card:nth-child(2) { border-right: 0 !important; } .atlas-partner-card:nth-child(-n+2) { border-bottom: 1px solid var(--atlas-line) !important; } } @media (max-width: 600px) { .atlas-partner-section { padding: 52px 20px !important; } .atlas-partner-grid { grid-template-columns: 1fr !important; } .atlas-partner-card { min-height: auto !important; border-right: 0 !important; border-bottom: 1px solid var(--atlas-line) !important; } .atlas-partner-card:last-child { border-bottom: 0 !important; } .atlas-partner-card > span { margin-bottom: 24px !important; } .atlas-independence-standard { grid-template-columns: 1fr !important; gap: 12px !important; } } /* Partner headline size refinement */ .atlas-partner-section h2 { font-size: clamp(30px, 4vw, 52px) !important; } /* Center Explore Partnership button */ .atlas-partner-cta { display: flex !important; width: fit-content !important; margin-left: auto !important; margin-right: auto !important; } /* Vertically center Explore Partnership arrow */ .atlas-partner-cta > span { position: relative !important; top: -2px !important; } /* ========================================================== ATLAS SIGNAL PROFILE ========================================================== */ .atlas-signal-profile-modal[hidden] { display: none !important; } .atlas-signal-profile-modal { position: fixed; inset: 0; z-index: 99999; } .atlas-signal-profile-backdrop { position: absolute; inset: 0; background: rgba(0, 0, 0, 0.78); backdrop-filter: blur(8px); } .atlas-signal-profile { position: absolute; top: 0; right: 0; width: min(720px, 100%); height: 100%; overflow-y: auto; background: radial-gradient( circle at top right, rgba(191, 157, 88, 0.08), transparent 32% ), #050505; border-left: 1px solid rgba(191, 157, 88, 0.30); box-shadow: -30px 0 80px rgba(0, 0, 0, 0.55); padding: 34px 38px 60px; } .atlas-signal-profile-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; padding-bottom: 22px; margin-bottom: 30px; border-bottom: 1px solid rgba(255, 255, 255, 0.10); } .atlas-signal-profile-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.20em; color: #c7a96b; } .atlas-signal-profile-id { margin-top: 8px; font-size: 12px; letter-spacing: 0.12em; color: rgba(255, 255, 255, 0.48); } .atlas-signal-profile-close { border: 0; background: transparent; color: #ffffff; font-size: 32px; line-height: 1; cursor: pointer; opacity: 0.72; } .atlas-signal-profile-close:hover { opacity: 1; } .atlas-signal-profile-content { color: #ffffff; } .atlas-signal-profile-title { margin: 0 0 14px; max-width: 640px; font-size: clamp(28px, 4vw, 44px); line-height: 1.08; letter-spacing: -0.025em; font-weight: 650; } .atlas-signal-profile-meta { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 32px; } .atlas-signal-profile-tag { display: inline-flex; align-items: center; min-height: 30px; padding: 6px 10px; border: 1px solid rgba(191, 157, 88, 0.30); background: rgba(191, 157, 88, 0.06); color: #d8bd82; font-size: 10px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; } .atlas-signal-profile-metrics { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin-bottom: 34px; } .atlas-signal-profile-metric { min-height: 72px; padding: 12px 14px; border: 1px solid rgba(255, 255, 255, 0.10); background: rgba(255, 255, 255, 0.025); } .atlas-signal-profile-metric-label { margin-bottom: 9px; color: rgba(255, 255, 255, 0.44); font-size: 9px; font-weight: 700; letter-spacing: 0.13em; text-transform: uppercase; } .atlas-signal-profile-metric-value { color: #ffffff; font-size: 16px; line-height: 1.35; font-weight: 600; } .atlas-signal-profile-section { margin-top: 34px; padding-top: 26px; border-top: 1px solid rgba(255, 255, 255, 0.09); } .atlas-signal-profile-section-title { margin-bottom: 18px; color: #c7a96b; font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; } .atlas-signal-profile-narrative { color: rgba(255, 255, 255, 0.84); font-size: 16px; line-height: 1.72; } .atlas-signal-profile-detail { display: grid; grid-template-columns: 150px minmax(0, 1fr); gap: 20px; padding: 13px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); } .atlas-signal-profile-detail:last-child { border-bottom: 0; } .atlas-signal-profile-detail-label { color: rgba(255, 255, 255, 0.38); font-size: 9px; font-weight: 700; letter-spacing: 0.11em; text-transform: uppercase; } .atlas-signal-profile-detail-value { color: rgba(255, 255, 255, 0.86); font-size: 14px; line-height: 1.55; } .atlas-signal-profile-source-link { display: inline-flex; margin-top: 18px; color: #d8bd82; font-size: 11px; font-weight: 700; letter-spacing: 0.10em; text-decoration: none; text-transform: uppercase; } .atlas-signal-profile-source-link:hover { text-decoration: underline; } .atlas-signal-profile-loading, .atlas-signal-profile-error { padding: 30px 0; color: rgba(255, 255, 255, 0.55); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; } body.atlas-signal-profile-open { overflow: hidden; } [data-atlas-signal-id] { cursor: pointer; } @media (max-width: 680px) { .atlas-signal-profile { width: 100%; padding: 26px 22px 50px; } .atlas-signal-profile-metrics { grid-template-columns: 1fr; } .atlas-signal-profile-detail { grid-template-columns: 1fr; gap: 6px; } } /* Tighter Signal Profile cards */ .atlas-signal-profile-metric { min-height: 58px !important; padding: 8px 10px !important; } .atlas-signal-profile-metric-label { margin-bottom: 5px !important; } /* ========================================================== COMPACT ATLAS SIGNAL PROFILE Preserve all information — reduce vertical space only ========================================================== */ .atlas-signal-profile { padding-top: 22px !important; padding-bottom: 30px !important; } .atlas-signal-profile-header { padding-bottom: 14px !important; margin-bottom: 20px !important; } .atlas-signal-profile-id { margin-top: 5px !important; } .atlas-signal-profile-title { margin-bottom: 10px !important; font-size: clamp(26px, 3.5vw, 40px) !important; line-height: 1.04 !important; } .atlas-signal-profile-meta { gap: 7px !important; margin-bottom: 20px !important; } .atlas-signal-profile-tag { min-height: 26px !important; padding: 4px 9px !important; } .atlas-signal-profile-metrics { gap: 8px !important; margin-bottom: 20px !important; } .atlas-signal-profile-metric { min-height: 56px !important; padding: 8px 10px !important; } .atlas-signal-profile-metric-label { margin-bottom: 4px !important; } .atlas-signal-profile-metric-value { line-height: 1.2 !important; } .atlas-signal-profile-section { margin-top: 20px !important; padding-top: 16px !important; } .atlas-signal-profile-section-title { margin-bottom: 11px !important; } .atlas-signal-profile-narrative { line-height: 1.45 !important; } .atlas-signal-profile-detail { padding: 8px 0 !important; } .atlas-signal-profile-detail-value { line-height: 1.4 !important; } /* ========================================================== DESKTOP NO-SCROLL SIGNAL PROFILE Keep all information visible in one viewport ========================================================== */ @media (min-width: 800px) { .atlas-signal-profile { width: min(1120px, calc(100% - 32px)) !important; height: 100vh !important; overflow-y: hidden !important; padding: 18px 26px 18px !important; } .atlas-signal-profile-header { padding-bottom: 10px !important; margin-bottom: 14px !important; } .atlas-signal-profile-title { font-size: clamp(25px, 3vw, 34px) !important; line-height: 1.02 !important; margin-bottom: 8px !important; max-width: 100% !important; } .atlas-signal-profile-meta { margin-bottom: 12px !important; } .atlas-signal-profile-tag { min-height: 24px !important; padding: 3px 8px !important; } /* Four wide rectangular cards */ .atlas-signal-profile-metrics { grid-template-columns: repeat(4, minmax(0, 1fr)) !important; gap: 8px !important; margin-bottom: 10px !important; } .atlas-signal-profile-metric { min-height: 50px !important; padding: 7px 9px !important; } .atlas-signal-profile-metric-label { margin-bottom: 3px !important; } .atlas-signal-profile-metric-value { font-size: 14px !important; line-height: 1.15 !important; } /* Compact all information sections */ .atlas-signal-profile-section { margin-top: 10px !important; padding-top: 10px !important; } .atlas-signal-profile-section-title { margin-bottom: 7px !important; } .atlas-signal-profile-narrative { font-size: 14px !important; line-height: 1.35 !important; } .atlas-signal-profile-detail { grid-template-columns: 125px minmax(0, 1fr) !important; gap: 10px !important; padding: 5px 0 !important; } .atlas-signal-profile-detail-value { font-size: 13px !important; line-height: 1.3 !important; } /* Intelligence + Geography */ .atlas-signal-profile-section-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; } /* Source + Date */ .atlas-signal-profile-bottom-grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(180px, 1fr); gap: 24px; } .atlas-signal-profile-section-grid .atlas-signal-profile-section, .atlas-signal-profile-bottom-grid .atlas-signal-profile-section { margin-top: 10px !important; } } /* Small screens retain safe scrolling */ @media (max-width: 799px) { .atlas-signal-profile { overflow-y: auto !important; } .atlas-signal-profile-section-grid, .atlas-signal-profile-bottom-grid { display: block; } } /* ========================================================== CUSTOM INTELLIGENCE — MATCH EXPLORE PARTNERSHIP ========================================================== */ #submitAccessRequest.access-submit.atlas-partner-cta { display: flex !important; width: fit-content !important; align-items: center !important; justify-content: center !important; gap: 18px !important; margin-top: 32px !important; margin-left: auto !important; margin-right: auto !important; padding: 14px 20px !important; background: transparent !important; color: var(--atlas-gold) !important; border: 1px solid var(--atlas-gold) !important; font-size: 11px !important; font-weight: 800 !important; letter-spacing: .15em !important; text-transform: uppercase !important; cursor: pointer !important; transition: background .2s ease, color .2s ease !important; } #submitAccessRequest.access-submit.atlas-partner-cta:hover { background: var(--atlas-gold) !important; border-color: var(--atlas-gold) !important; color: #050505 !important; } /* ========================================================== ABOUT — CUSTOM INTELLIGENCE CTA Match Explore Partnership exactly ========================================================== */ #customIntelligenceButton.atlas-custom-intelligence-cta { display: inline-flex !important; width: fit-content !important; align-items: center !important; justify-content: center !important; gap: 18px !important; padding: 14px 20px !important; background: transparent !important; color: var(--atlas-gold) !important; border: 1px solid var(--atlas-gold) !important; border-radius: 0 !important; font-size: 11px !important; font-weight: 800 !important; line-height: normal !important; letter-spacing: .15em !important; text-transform: uppercase !important; cursor: pointer !important; box-shadow: none !important; filter: none !important; appearance: none !important; transition: background .2s ease, color .2s ease !important; } #customIntelligenceButton.atlas-custom-intelligence-cta:hover { background: var(--atlas-gold) !important; color: #050505 !important; border-color: var(--atlas-gold) !important; box-shadow: none !important; filter: none !important; } #customIntelligenceButton.atlas-custom-intelligence-cta > span { position: relative !important; top: -2px !important; font-size: 16px !important; line-height: 1 !important; } /* ========================================================== ATLAS HERO BRAND HIERARCHY Atlas™ larger / Follow The Money. smaller ========================================================== */ @media (min-width: 1201px) { .atlas-intelligence-hero .atlas-wordmark { font-size: 72px !important; } .atlas-intelligence-hero h1 { font-size: 46px !important; line-height: 1.04 !important; } } @media (min-width: 651px) and (max-width: 1200px) { .atlas-intelligence-hero .atlas-wordmark { font-size: 68px !important; } .atlas-intelligence-hero h1 { font-size: 44px !important; } } @media (max-width: 650px) { .atlas-intelligence-hero .atlas-wordmark { font-size: 58px !important; } .atlas-intelligence-hero h1 { font-size: 36px !important; } } /* ========================================================== FINAL ATLAS HERO BRAND HIERARCHY ========================================================== */ @media (min-width: 1201px) { .atlas-intelligence-hero .atlas-wordmark { font-size: 84px !important; } .atlas-intelligence-hero h1 { font-size: 40px !important; line-height: 1.05 !important; } } @media (min-width: 651px) and (max-width: 1200px) { .atlas-intelligence-hero .atlas-wordmark { font-size: 76px !important; } .atlas-intelligence-hero h1 { font-size: 38px !important; } } @media (max-width: 650px) { .atlas-intelligence-hero .atlas-wordmark { font-size: 64px !important; } .atlas-intelligence-hero h1 { font-size: 32px !important; } } /* Follow The Money — two sizes larger */ @media (min-width: 1201px) { .atlas-intelligence-hero h1 { font-size: 44px !important; } } /* ========================================================== FOLLOW THE MONEY — STRONGER FINAL SIZE ========================================================== */ @media (min-width: 1201px) { .atlas-intelligence-hero h1 { font-size: 52px !important; line-height: 1.02 !important; } } @media (min-width: 651px) and (max-width: 1200px) { .atlas-intelligence-hero h1 { font-size: 44px !important; } } @media (max-width: 650px) { .atlas-intelligence-hero h1 { font-size: 36px !important; } } /* ===== ECONOMIC SIGNALS ARCHIVE STATE CLEANUP ===== */ /* Preserve JS state elements but remove unnecessary visual boxes */ #loadingState, #errorState { display: none !important; }