/* ============================================================= BEACON Scanner — MacroHarbor design system Single stylesheet. Dark mode is a .dark class on . ============================================================= */ :root { --color-navy: #0a2a47; --color-navy-dark: #051628; --color-navy-soft: #163a5b; --color-blue: #1e88e5; --color-blue-dark: #1565c0; --color-bg: #f4f6f8; --color-bg-alt: #eef2f6; --color-card: #ffffff; --color-card-alt: #f9fbfd; --color-border: #e1e5ea; --color-border-soft: #edf1f5; --color-text: #1a2332; --color-text-muted: #5b6b7e; --color-text-inverse:#ffffff; --color-favored: #1e9e6e; --color-favored-bg: #e3f5ec; --color-headwind: #d04848; --color-headwind-bg: #fbe7e7; --color-neutral: #7a8a9c; --color-neutral-bg: #eef1f5; --color-warn: #d98a1c; --color-warn-bg: #fcf3e3; --score-highest: #1e9e6e; --score-opportunity: #55b37a; --score-neutral: #7a8a9c; --score-caution: #d98a1c; --score-weakest: #d04848; --shadow-card: 0 2px 8px rgba(10, 42, 71, 0.06); --shadow-card-hover: 0 4px 14px rgba(10, 42, 71, 0.10); --shadow-nav: 0 1px 0 rgba(10, 42, 71, 0.06); --radius: 8px; --radius-lg: 12px; --radius-pill: 999px; --container-max: 1240px; --nav-height: 76px; --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, Consolas, 'Liberation Mono', monospace; --t-fast: 120ms; --t-norm: 220ms; } html.dark { --color-bg: #0a1422; --color-bg-alt: #0e1c2e; --color-card: #142233; --color-card-alt: #192c40; --color-border: #1f3247; --color-border-soft: #182738; --color-text: #e8ecf2; --color-text-muted: #8a9aae; --color-navy: #0a1a2c; --color-navy-dark: #050e1c; --color-favored-bg: #123529; --color-headwind-bg: #3a1a1a; --color-neutral-bg: #1e2a3a; --color-warn-bg: #33280f; --shadow-card: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-card-hover: 0 4px 14px rgba(0, 0, 0, 0.45); } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; font-family: var(--font-sans); font-size: 16px; line-height: 1.5; color: var(--color-text); background: var(--color-bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-width: 100%; } /* ---------- Vintage Nautical Background ---------- */ body { background-color: #ecdbb0; background-image: /* Aged coffee-ring stains */ radial-gradient(ellipse at 12% 18%, rgba(160, 120, 60, 0.20) 0%, rgba(160, 120, 60, 0.08) 30%, transparent 55%), radial-gradient(ellipse at 88% 12%, rgba(140, 100, 50, 0.16) 0%, rgba(140, 100, 50, 0.05) 25%, transparent 45%), radial-gradient(ellipse at 75% 65%, rgba(150, 110, 55, 0.18) 0%, rgba(150, 110, 55, 0.06) 28%, transparent 50%), radial-gradient(ellipse at 25% 78%, rgba(130, 95, 45, 0.14) 0%, transparent 40%), radial-gradient(ellipse at 50% 45%, rgba(170, 130, 70, 0.10) 0%, transparent 35%), radial-gradient(ellipse at 60% 20%, rgba(145, 105, 50, 0.12) 0%, transparent 30%), /* Vertical crease — subtle fold line */ linear-gradient(90deg, transparent 49.5%, rgba(120, 90, 40, 0.05) 49.8%, rgba(120, 90, 40, 0.05) 50.2%, transparent 50.5%), /* Heavy vignette — darkened aged edges */ radial-gradient(ellipse at center, transparent 40%, rgba(100, 70, 30, 0.18) 80%, rgba(80, 50, 15, 0.30) 100%), /* Base parchment with color variation */ linear-gradient(160deg, #f2e0be 0%, #e8d1a0 15%, #f0d9b2 30%, #dcc595 50%, #ecd5aa 70%, #e0c898 85%, #f0dbb5 100%); background-attachment: fixed; } /* Nautical illustrations — multiply blend removes white/light borders */ body::before { content: ''; position: fixed; inset: 0; pointer-events: none; z-index: 0; background-image: url("/assets/nautical-anchor.png"), url("/assets/nautical-ship.png"), url("/assets/nautical-compass.png"), url("/assets/nautical-kraken.png"); background-size: 180px auto, 220px auto, 220px auto, 200px auto; background-position: left 20px bottom 80px, left 30px top 40px, right 30px top 35%, right 30px bottom 30px; background-repeat: no-repeat; background-attachment: fixed; opacity: 0.07; mix-blend-mode: multiply; } /* Ensure all content sits above the pseudo-element */ body > * { position: relative; z-index: 1; } /* Dark mode */ html.dark body { background-color: #0a1422; background-image: radial-gradient(ellipse at 20% 25%, rgba(20, 50, 90, 0.12) 0%, transparent 50%), radial-gradient(ellipse at 80% 60%, rgba(15, 40, 70, 0.08) 0%, transparent 40%), radial-gradient(ellipse at 55% 35%, rgba(25, 55, 85, 0.06) 0%, transparent 30%), linear-gradient(90deg, transparent 49.5%, rgba(30, 60, 100, 0.04) 50%, transparent 50.5%), radial-gradient(ellipse at center, transparent 35%, rgba(0, 8, 20, 0.2) 85%, rgba(0, 5, 15, 0.35) 100%), linear-gradient(160deg, #0c1828 0%, #0a1422 20%, #0e1c30 45%, #081220 65%, #0d1a2c 85%, #0b1624 100%); background-attachment: fixed; } html.dark body::before { opacity: 0.04; mix-blend-mode: screen; } h1, h2, h3, h4 { margin: 0 0 0.5em; line-height: 1.2; } p { margin: 0 0 1em; } ul, ol { margin: 0 0 1em; padding-left: 1.25em; } a { color: var(--color-blue); text-decoration: none; transition: color var(--t-fast) ease; } a:hover { color: var(--color-blue-dark); text-decoration: underline; } button { font: inherit; cursor: pointer; } table { border-collapse: collapse; width: 100%; } th, td { text-align: left; } /* ---------- Utilities ---------- */ .container { max-width: var(--container-max); margin: 0 auto; padding: 0 20px; } .stack-xl > * + * { margin-top: 28px; } .stack-lg > * + * { margin-top: 20px; } /* Breathing room: hero -> first content section, and last section -> footer */ .hero + .container { margin-top: 48px; } .stack-xl { padding-bottom: 48px; } main { padding-bottom: 72px; } /* When the prefooter CTA follows main it owns its own top spacing, so cancel main's padding-bottom to avoid stacking the gap twice */ main:has(+ .prefooter-cta) { padding-bottom: 0; } .muted { color: var(--color-text-muted); } .small { font-size: 0.875rem; } .center { text-align: center; } .mono { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.01em; } .num { text-align: right; font-variant-numeric: tabular-nums; } .clip { max-width: 260px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .skip-link { position: absolute; top: -40px; left: 10px; z-index: 1000; background: var(--color-navy); color: #fff; padding: 8px 12px; border-radius: var(--radius); } .skip-link:focus { top: 10px; } /* ---------- Header / Nav ---------- */ .site-header { background: var(--color-card); border-bottom: 1px solid var(--color-border); box-shadow: var(--shadow-nav); position: sticky; top: 0; z-index: 50; transition: box-shadow var(--t-norm) ease; } .site-header.scrolled { box-shadow: 0 2px 12px rgba(10, 42, 71, 0.10); } .site-header__inner { display: flex; align-items: center; justify-content: space-between; height: var(--nav-height); gap: 24px; } .brand { display: inline-flex; align-items: center; gap: 12px; color: var(--color-navy); font-weight: 800; letter-spacing: 0.02em; text-decoration: none; line-height: 1; } html.dark .brand { color: var(--color-text); } .brand:hover { text-decoration: none; } /* Logo image - rendered as a white circle on any background. */ img.brand__mark { width: 48px; height: 48px; display: inline-block; flex: 0 0 auto; object-fit: contain; background: #ffffff; border-radius: 50%; padding: 4px; box-shadow: 0 1px 4px rgba(10, 42, 71, 0.10); border: 1px solid rgba(10, 42, 71, 0.06); } img.brand__mark--footer { width: 56px; height: 56px; padding: 5px; /* On the dark navy footer, lift the white circle slightly */ box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25); border-color: rgba(255, 255, 255, 0.10); } /* Wordmark - both words in the same navy weight, like the real logo. */ .brand__wordmark { font-family: var(--font-sans); display: inline-flex; align-items: baseline; font-size: 1.15rem; font-weight: 800; letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; } .brand__macro, .brand__harbor { color: var(--color-navy); } .brand__sep { display: inline-block; width: 0.4em; } html.dark .brand__macro, html.dark .brand__harbor { color: var(--color-text); } .brand--footer { color: #ffffff; } .brand--footer .brand__macro, .brand--footer .brand__harbor { color: #ffffff; } html.dark .brand--footer .brand__macro, html.dark .brand--footer .brand__harbor { color: var(--color-text); } .primary-nav { display: flex; align-items: center; gap: 28px; } .primary-nav > ul { display: flex; gap: 22px; list-style: none; margin: 0; padding: 0; } .primary-nav a { color: var(--color-text); font-weight: 500; font-size: 0.92rem; letter-spacing: 0.02em; padding: 8px 2px; border-bottom: 2px solid transparent; transition: border-color var(--t-fast) ease, color var(--t-fast) ease; } .primary-nav a:hover { text-decoration: none; border-bottom-color: var(--color-blue); } .primary-nav a.is-current { color: var(--color-blue); border-bottom-color: var(--color-blue); } .primary-nav__actions { display: flex; align-items: center; gap: 12px; } .theme-toggle { background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius-pill); width: 36px; height: 36px; color: var(--color-text); display: inline-flex; align-items: center; justify-content: center; position: relative; transition: background var(--t-fast) ease, border-color var(--t-fast) ease; } .theme-toggle:hover { border-color: var(--color-blue); } .theme-toggle__icon { font-size: 1.05rem; line-height: 1; position: absolute; transition: opacity var(--t-fast) ease, transform var(--t-fast) ease; } .theme-toggle__icon--moon { opacity: 0; transform: rotate(-30deg); } .theme-toggle__icon--sun { opacity: 1; } html.dark .theme-toggle__icon--sun { opacity: 0; transform: rotate(30deg); } html.dark .theme-toggle__icon--moon { opacity: 1; transform: rotate(0); } .nav-toggle { display: none; width: 40px; height: 40px; background: transparent; border: 1px solid var(--color-border); border-radius: var(--radius); padding: 0; position: relative; } .nav-toggle span { position: absolute; left: 10px; right: 10px; height: 2px; background: var(--color-text); transition: transform var(--t-norm) ease, opacity var(--t-fast) ease, top var(--t-norm) ease; } .nav-toggle span:nth-child(1) { top: 13px; } .nav-toggle span:nth-child(2) { top: 19px; } .nav-toggle span:nth-child(3) { top: 25px; } .nav-toggle[aria-expanded="true"] span:nth-child(1) { top: 19px; transform: rotate(45deg); } .nav-toggle[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .nav-toggle[aria-expanded="true"] span:nth-child(3) { top: 19px; transform: rotate(-45deg); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; padding: 10px 18px; font-weight: 600; font-size: 0.92rem; letter-spacing: 0.02em; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background var(--t-fast) ease, border-color var(--t-fast) ease, color var(--t-fast) ease, transform var(--t-fast) ease; } .btn:hover { text-decoration: none; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--color-blue); color: #fff; border-color: var(--color-blue); } .btn--primary:hover { background: var(--color-blue-dark); color: #fff; } .btn--outline { background: transparent; border-color: var(--color-blue); color: var(--color-blue); } .btn--outline:hover { background: var(--color-blue); color: #fff; border-color: var(--color-blue); } html.dark .btn--outline { border-color: var(--color-blue); color: #8ac4ff; } html.dark .btn--outline:hover { background: var(--color-blue); color: #fff; } .btn--sm { padding: 7px 14px; font-size: 0.85rem; } /* ---------- Hero blocks ---------- */ .hero { background: /* subtle wave overlay - mirrors the marketing site's nautical motif */ url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='1200' height='320' viewBox='0 0 1200 320'%3E%3Cg fill='none' stroke='%231e88e5' stroke-width='1.2' stroke-linecap='round' opacity='0.18'%3E%3Cpath d='M0 60 Q150 20 300 60 T600 60 T900 60 T1200 60'/%3E%3Cpath d='M0 110 Q150 70 300 110 T600 110 T900 110 T1200 110'/%3E%3Cpath d='M0 200 Q150 240 300 200 T600 200 T900 200 T1200 200'/%3E%3Cpath d='M0 250 Q150 290 300 250 T600 250 T900 250 T1200 250'/%3E%3C/g%3E%3C/svg%3E") right top/auto 100% no-repeat, linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-soft) 100%); color: var(--color-text-inverse); padding: 72px 0 64px; border-bottom: 1px solid var(--color-navy-dark); position: relative; overflow: hidden; } .hero__eyebrow { text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.75rem; color: rgba(255, 255, 255, 0.75); margin-bottom: 10px; } .hero__eyebrow a { color: rgba(255, 255, 255, 0.85); } .hero__title { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 700; letter-spacing: -0.01em; max-width: 820px; } .hero__subtitle { max-width: 780px; font-size: 1.05rem; color: rgba(255, 255, 255, 0.85); } .hero__meta { color: rgba(255, 255, 255, 0.75); font-size: 0.9rem; margin-top: 16px; } .hero__meta strong { color: #fff; } .hero--stock { padding: 44px 0 36px; } .hero--stock__grid { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; } .hero__title--stock { display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; } .hero__company { font-size: 1rem; font-weight: 500; color: rgba(255, 255, 255, 0.8); letter-spacing: 0; } .score-hero { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.18); padding: 20px 28px; border-radius: var(--radius-lg); text-align: center; min-width: 200px; } .score-hero__num { font-size: 3rem; font-weight: 700; line-height: 1; font-variant-numeric: tabular-nums; } .score-hero__label { display: inline-block; margin-top: 10px; } .hero--sector { padding: 48px 0 40px; } /* ---------- Cards / sections ---------- */ .card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-card); padding: 28px; transition: box-shadow var(--t-norm) ease, border-color var(--t-norm) ease; } .card__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 14px; } .section-title { text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.95rem; font-weight: 700; color: var(--color-text); margin: 0; position: relative; padding-bottom: 10px; } .section-title::after { content: ''; position: absolute; left: 0; bottom: 0; width: 36px; height: 3px; background: var(--color-blue); border-radius: 2px; } .section-title--centered { text-align: center; padding-bottom: 16px; } .section-title--centered::after { left: 50%; transform: translateX(-50%); } .section-title--inverse { color: #fff; } .section-title--inverse::after { background: var(--color-blue); } /* ---------- Regime indicator ---------- */ .regime-indicator__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; } .regime-indicator__desc { font-size: 1.05rem; color: var(--color-text); } .regime-badge { display: inline-flex; padding: 8px 16px; border-radius: var(--radius-pill); font-weight: 700; font-size: 0.85rem; letter-spacing: 0.06em; text-transform: uppercase; color: #fff; background: var(--color-neutral); } .regime-expansion { background: linear-gradient(135deg, #1e9e6e, #2bbd85); } .regime-recovery { background: linear-gradient(135deg, #1e88e5, #42a5f5); } .regime-late { background: linear-gradient(135deg, #d98a1c, #e6a33f); } .regime-stress { background: linear-gradient(135deg, #d04848, #e06060); } .regime-contraction { background: linear-gradient(135deg, #8a2c2c, #b23a3a); } .confidence-bar { margin: 14px 0 10px; } .confidence-bar__label { display: flex; justify-content: space-between; font-size: 0.85rem; color: var(--color-text-muted); margin-bottom: 6px; } .confidence-bar__label strong { color: var(--color-text); font-variant-numeric: tabular-nums; } .confidence-bar__track { height: 10px; background: var(--color-bg-alt); border-radius: var(--radius-pill); overflow: hidden; border: 1px solid var(--color-border-soft); } .confidence-bar__fill { height: 100%; background: linear-gradient(90deg, var(--color-blue), var(--color-favored)); border-radius: var(--radius-pill); animation: confFill 1.2s ease-out; } @keyframes confFill { from { width: 0 !important; } } /* ---------- Sector heat map ---------- */ .sector-heatmap { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 14px; } .sector-tile { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 18px 18px 16px; border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--color-card-alt); color: var(--color-text); text-decoration: none; transition: transform var(--t-fast) ease, border-color var(--t-fast) ease, box-shadow var(--t-fast) ease; } .sector-tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-card-hover); text-decoration: none; border-color: var(--color-blue); } .sector-tile__arrow { font-size: 1.3rem; line-height: 1; } .sector-tile__name { font-weight: 600; font-size: 1rem; } .sector-tile__fit { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-muted); } .sector-tile--favored { background: var(--color-favored-bg); border-color: rgba(30, 158, 110, 0.35); } .sector-tile--favored .sector-tile__arrow { color: var(--color-favored); } .sector-tile--favored .sector-tile__fit { color: var(--color-favored); } .sector-tile--headwind { background: var(--color-headwind-bg); border-color: rgba(208, 72, 72, 0.35); } .sector-tile--headwind .sector-tile__arrow { color: var(--color-headwind); } .sector-tile--headwind .sector-tile__fit { color: var(--color-headwind); } .sector-tile--neutral { background: var(--color-neutral-bg); border-color: var(--color-border); } .sector-tile--neutral .sector-tile__arrow { color: var(--color-neutral); } /* ---------- Data tables ---------- */ .table-scroll { width: 100%; overflow-x: auto; margin: 0 -8px; padding: 0 8px; -webkit-overflow-scrolling: touch; } .table-scroll--sticky { max-height: 70vh; overflow-y: auto; } .data-table { width: 100%; font-size: 0.92rem; border-collapse: separate; border-spacing: 0; } .data-table thead th { background: var(--color-card-alt); color: var(--color-text-muted); font-weight: 600; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; padding: 12px 10px; border-bottom: 2px solid var(--color-border); white-space: nowrap; } .data-table tbody td { padding: 12px 10px; border-bottom: 1px solid var(--color-border-soft); vertical-align: middle; } .data-table tbody tr { transition: background var(--t-fast) ease; } .data-table tbody tr:nth-child(even) { background: var(--color-card-alt); } .data-table tbody tr:hover { background: var(--color-bg-alt); } .data-table--sticky thead th { position: sticky; top: 0; z-index: 1; background: var(--color-card-alt); } .data-table--sortable thead th { cursor: pointer; user-select: none; } .data-table--sortable thead th::after { content: ' \2195'; opacity: 0.25; font-size: 0.85em; } .data-table--sortable thead th.sort-asc::after { content: ' \25B2'; opacity: 0.9; color: var(--color-blue); } .data-table--sortable thead th.sort-desc::after { content: ' \25BC'; opacity: 0.9; color: var(--color-blue); } .sym-link { font-family: var(--font-mono); font-weight: 700; color: var(--color-blue); } .sec-link { color: var(--color-text-muted); font-size: 0.88rem; } .sec-link:hover { color: var(--color-blue); } /* ---------- Score pills ---------- */ .score-pill { display: inline-block; padding: 4px 12px; border-radius: var(--radius-pill); font-weight: 700; font-size: 0.88rem; font-variant-numeric: tabular-nums; color: #fff; background: var(--score-neutral); min-width: 52px; text-align: center; } .score-highest { background: var(--score-highest); } .score-opportunity { background: var(--score-opportunity); } .score-neutral { background: var(--score-neutral); } .score-caution { background: var(--score-caution); } .score-weakest { background: var(--score-weakest); } .score-none { background: var(--color-border); color: var(--color-text-muted); } /* ---------- Regime fit chips ---------- */ .fit { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: var(--radius-pill); font-size: 0.8rem; font-weight: 600; letter-spacing: 0.02em; } .fit-favored { background: var(--color-favored-bg); color: var(--color-favored); } .fit-headwind { background: var(--color-headwind-bg); color: var(--color-headwind); } .fit-neutral { background: var(--color-neutral-bg); color: var(--color-neutral); } /* ---------- Flags / alerts ---------- */ .flag-chip { display: inline-block; padding: 2px 7px; border-radius: 4px; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.05em; background: var(--color-warn-bg); color: var(--color-warn); text-transform: uppercase; } .flag-chip--red { background: var(--color-headwind-bg); color: var(--color-headwind); } .alert { padding: 14px 18px; border-radius: var(--radius); border: 1px solid var(--color-border); background: var(--color-card); font-size: 0.95rem; } .alert--warn { background: var(--color-warn-bg); border-color: rgba(217, 138, 28, 0.35); color: #8a5710; } .alert--info { background: var(--color-neutral-bg); border-color: var(--color-border); } html.dark .alert--warn { color: #e6c27a; } .flag-list { margin: 0 0 14px; padding-left: 18px; } .flag-list--red li { color: var(--color-headwind); } /* ---------- Sub-score grid ---------- */ .subscore-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .subscore-card .big-num { font-size: 2.75rem; font-weight: 700; color: var(--color-blue); font-variant-numeric: tabular-nums; margin: 8px 0 14px; } .metric-list { display: grid; grid-template-columns: 1fr; gap: 8px; margin: 0; padding: 0; } .metric-list > div { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--color-border-soft); } .metric-list dt { color: var(--color-text-muted); font-size: 0.88rem; margin: 0; } .metric-list dd { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; } /* ---------- Regime panel ---------- */ .regime-panel__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 12px; } .kv { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px dashed var(--color-border-soft); font-size: 0.92rem; } .kv span { color: var(--color-text-muted); } .kv strong { font-variant-numeric: tabular-nums; } .ai-byline { margin-top: 18px; font-style: italic; } /* ---------- Feature cards ---------- */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .feature-card { text-align: left; } .feature-card__icon { width: 56px; height: 56px; display: inline-flex; align-items: center; justify-content: center; background: var(--color-neutral-bg); border-radius: var(--radius); color: var(--color-blue); margin-bottom: 12px; } .feature-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 6px; } .feature-card p { color: var(--color-text-muted); margin: 0; } html.dark .feature-card { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 24px; } /* ---------- Table controls ---------- */ .table-controls { display: flex; flex-wrap: wrap; gap: 14px; margin: 12px 0 18px; padding: 16px; background: var(--color-bg-alt); border-radius: var(--radius); border: 1px solid var(--color-border-soft); } .ctrl { display: flex; flex-direction: column; gap: 4px; font-size: 0.85rem; } .ctrl__label { color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.72rem; } .ctrl select, .ctrl input[type="search"] { background: var(--color-card); border: 1px solid var(--color-border); border-radius: var(--radius); padding: 8px 10px; color: var(--color-text); font: inherit; min-width: 180px; transition: border-color var(--t-fast) ease; } .ctrl select:focus, .ctrl input:focus { outline: none; border-color: var(--color-blue); } .ctrl--range input[type="range"] { width: 180px; } .ctrl--check { flex-direction: row; align-items: center; gap: 8px; margin-top: 18px; } .ctrl--check input { transform: scale(1.15); } /* ---------- Watchlist button ---------- */ .watch-btn { background: transparent; border: none; color: var(--color-neutral); font-size: 1.1rem; padding: 2px 4px; } .watch-btn:hover { color: var(--color-warn); } .watch-btn.is-on { color: var(--color-warn); } /* ---------- Forms ---------- */ .signup-form { display: flex; gap: 10px; max-width: 520px; margin: 14px 0 10px; } .signup-form input[type="email"] { flex: 1; padding: 12px 14px; font: inherit; background: var(--color-card); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius); transition: border-color var(--t-fast) ease; } .signup-form input[type="email"]:focus { outline: none; border-color: var(--color-blue); } .signup-form--inverse input[type="email"] { background: rgba(255, 255, 255, 0.08); color: #fff; border-color: rgba(255, 255, 255, 0.22); } .signup-form--inverse input::placeholder { color: rgba(255, 255, 255, 0.6); } .email-gate { text-align: left; } .card--cta { background: linear-gradient(135deg, var(--color-card) 0%, var(--color-card-alt) 100%); border-left: 4px solid var(--color-blue); } .gate-bullets { list-style: none; padding: 0; margin: 16px 0 0; display: flex; flex-wrap: wrap; gap: 16px; color: var(--color-text-muted); font-size: 0.9rem; } /* ---------- Weekly picks ---------- */ .weekly-picks { list-style: none; padding: 0; margin: 10px 0 0; display: grid; gap: 10px; } .weekly-picks__item { display: grid; grid-template-columns: 44px 1fr auto; grid-template-rows: auto auto; gap: 4px 14px; align-items: center; padding: 14px 16px; background: var(--color-card-alt); border: 1px solid var(--color-border-soft); border-radius: var(--radius); } .weekly-picks__rank { font-weight: 700; font-size: 1.25rem; color: var(--color-blue); font-variant-numeric: tabular-nums; } .weekly-picks__sym { font-family: var(--font-mono); font-size: 1.1rem; font-weight: 700; display: flex; align-items: center; gap: 8px; } .weekly-picks__score { text-align: right; } .weekly-picks__note { grid-column: 1 / -1; margin: 4px 0 0; color: var(--color-text-muted); font-size: 0.9rem; } /* ---------- Weekly picks teaser (anonymous visitors) ---------- */ .weekly-picks-teaser__lede { font-size: 1.05rem; color: var(--color-text); margin-top: 0; } .weekly-picks-teaser__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 12px; margin: 18px 0 22px; } .weekly-picks-teaser__chip { position: relative; background: linear-gradient(135deg, var(--color-card-alt) 0%, #e3eaf3 100%); border: 1px solid var(--color-border); border-radius: var(--radius); height: 110px; display: flex; align-items: flex-start; justify-content: flex-start; padding: 10px 12px; overflow: hidden; } .weekly-picks-teaser__rank { font-weight: 800; font-size: 1.1rem; color: var(--color-blue); font-variant-numeric: tabular-nums; position: relative; z-index: 2; } .weekly-picks-teaser__blur { position: absolute; inset: 28px 8px 8px 8px; background: repeating-linear-gradient( 90deg, rgba(10,42,71,0.10) 0px, rgba(10,42,71,0.10) 6px, transparent 6px, transparent 14px ); border-radius: 4px; filter: blur(4px); } html.dark .weekly-picks-teaser__chip { background: linear-gradient(135deg, #1a2f47 0%, #0f1e30 100%); border-color: #2a4060; border-width: 1.5px; } .weekly-picks-teaser__cta { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 0; } @media (max-width: 700px) { .weekly-picks-teaser__grid { grid-template-columns: repeat(5, 1fr); gap: 6px; } .weekly-picks-teaser__chip { height: 84px; padding: 6px 8px; } } /* ---------- Score-hero capped annotation (red-flag stocks) ---------- */ .score-hero__capped { margin-top: 14px; padding: 10px 12px; background: rgba(208, 72, 72, 0.10); border: 1px solid rgba(208, 72, 72, 0.25); border-radius: 6px; font-size: 0.82rem; line-height: 1.5; color: var(--color-text-inverse); text-align: left; } .capped-pill { display: inline-block; background: var(--color-headwind); color: #ffffff; font-weight: 700; padding: 2px 10px; border-radius: 999px; margin-bottom: 6px; font-size: 0.72rem; letter-spacing: 0.04em; text-transform: uppercase; } .capped-reason { display: block; color: rgba(255, 255, 255, 0.85); font-style: italic; } html.dark .score-hero__capped { background: rgba(208, 72, 72, 0.18); } /* ---------- Financial Health card ---------- */ .health-card { /* base card from .card */ } .health-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; margin-top: 10px; } @media (max-width: 1100px) { .health-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 700px) { .health-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 480px) { .health-grid { grid-template-columns: 1fr; } } .health-tile { position: relative; padding: 16px 14px 14px; background: var(--color-card-alt); border: 1px solid var(--color-border); border-left: 4px solid var(--color-neutral); border-radius: var(--radius); display: flex; flex-direction: column; gap: 6px; } .health-tile--good { border-left-color: var(--color-favored); } .health-tile--warn { border-left-color: #d99e2a; } .health-tile--bad { border-left-color: var(--color-headwind); } .health-tile--na { border-left-color: var(--color-neutral); opacity: 0.85; } .health-tile__metric { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); font-weight: 600; line-height: 1.3; } .health-tile__value { font-size: 1.8rem; font-weight: 700; color: var(--color-text); font-variant-numeric: tabular-nums; line-height: 1.1; } .health-tile__pill { display: inline-block; align-self: flex-start; padding: 3px 10px; border-radius: 999px; font-size: 0.74rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; } .health-good { background: var(--color-favored-bg); color: #126b48; } .health-warn { background: rgba(217, 158, 42, 0.15); color: #8a5a00; } .health-bad { background: var(--color-headwind-bg); color: #8a2828; } .health-na { background: var(--color-neutral-bg); color: var(--color-text-muted); } .health-tile__hint { font-size: 0.72rem; color: var(--color-text-muted); margin-top: 4px; line-height: 1.4; } html.dark .health-good { background: rgba(30, 158, 110, 0.15); color: #6cd9ac; } html.dark .health-warn { background: rgba(217, 158, 42, 0.15); color: #f0c060; } html.dark .health-bad { background: rgba(208, 72, 72, 0.15); color: #ff9494; } /* "Not meaningful" - rendered by format_ratio() for negative ratios. The raw value lives in the span's title attribute for power users. */ .metric-na { display: inline-block; padding: 1px 8px; border-radius: 4px; background: rgba(208, 72, 72, 0.10); color: var(--color-headwind); font-weight: 600; font-size: 0.92em; font-style: italic; cursor: help; border-bottom: 1px dashed currentColor; } html.dark .metric-na { background: rgba(208, 72, 72, 0.15); color: #ff9494; } /* ---------- Stock page: explainers + sector comparison ---------- */ .score-explainer p { margin: 6px 0; } .score-explainer p:first-of-type { font-size: 1.05rem; line-height: 1.55; color: var(--color-text); } .card__explainer { margin: 4px 0 18px; color: var(--color-text-muted); font-size: 0.95rem; line-height: 1.55; } .card__explainer strong { color: var(--color-text); font-weight: 600; } .subscore-card__explainer { margin: -4px 0 14px; font-size: 0.85rem; color: var(--color-text-muted); line-height: 1.5; } /* Comparison chips used inline in the explainer paragraph */ .cmp-key { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; white-space: nowrap; vertical-align: baseline; margin: 0 2px; } /* Comparison cell tinting (the stock value cell in the comparison table) */ .cmp-cell { position: relative; font-weight: 600; } .cmp-cell.cmp-better { background: var(--color-favored-bg); color: #126b48; border-left: 3px solid var(--color-favored); } .cmp-cell.cmp-worse { background: var(--color-headwind-bg); color: #8a2828; border-left: 3px solid var(--color-headwind); } .cmp-cell.cmp-equal { background: var(--color-card-alt); color: var(--color-text); border-left: 3px solid var(--color-neutral); } .cmp-cell.cmp-na { color: var(--color-text-muted); } .cmp-arrow { display: inline-block; margin-left: 6px; font-size: 0.85em; vertical-align: baseline; } /* Comparison chip in the "vs Median" column */ .cmp-chip { display: inline-flex; align-items: center; gap: 4px; padding: 3px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.02em; white-space: nowrap; cursor: help; } .cmp-chip.cmp-better { background: var(--color-favored-bg); color: #126b48; } .cmp-chip.cmp-worse { background: var(--color-headwind-bg); color: #8a2828; } .cmp-chip.cmp-equal { background: var(--color-card-alt); color: var(--color-text-muted); } .cmp-chip.cmp-na { background: transparent; color: var(--color-text-muted); } /* Dark-mode tweaks for the comparison cells */ html.dark .cmp-cell.cmp-better { background: rgba(30, 158, 110, 0.12); color: #6cd9ac; } html.dark .cmp-cell.cmp-worse { background: rgba(208, 72, 72, 0.12); color: #ff9494; } html.dark .cmp-chip.cmp-better { background: rgba(30, 158, 110, 0.18); color: #6cd9ac; } html.dark .cmp-chip.cmp-worse { background: rgba(208, 72, 72, 0.18); color: #ff9494; } /* The compare table needs a slightly more generous row padding so the chip column doesn't feel cramped. */ .data-table--compare tbody td { padding-top: 12px; padding-bottom: 12px; } .data-table--compare th:last-child, .data-table--compare td:last-child { white-space: nowrap; } /* ---------- About + Contact page basics ---------- */ .hero--about, .hero--contact { padding: 56px 0 44px; } .lede-list { list-style: none; margin: 12px 0; padding: 0; } .lede-list li { position: relative; padding: 8px 0 8px 26px; color: var(--color-text); line-height: 1.55; } .lede-list li::before { content: ""; position: absolute; left: 0; top: 16px; width: 12px; height: 2px; background: var(--color-blue); border-radius: 2px; } .contact-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } @media (max-width: 900px) { .contact-grid { grid-template-columns: 1fr; } } .contact-method { display: flex; gap: 16px; align-items: flex-start; padding: 14px 0; } .contact-method__icon { flex: 0 0 auto; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--color-card-alt); color: var(--color-blue); border: 1px solid var(--color-border); border-radius: 12px; } .contact-method__body { flex: 1; } .contact-method__body h3 { margin: 0 0 4px; font-size: 1.05rem; font-weight: 700; color: var(--color-text); } .contact-method__body p { margin: 4px 0; } .contact-method__body address { font-style: normal; margin: 4px 0; } .contact-link { font-family: var(--font-mono); font-size: 1.05rem; font-weight: 600; color: var(--color-blue); text-decoration: none; border-bottom: 1px solid transparent; } .contact-link:hover { border-bottom-color: var(--color-blue); } /* ---------- Account page ---------- */ .hero--account { padding: 48px 0 36px; } .account-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 24px; } @media (max-width: 900px) { .account-grid { grid-template-columns: 1fr; } } .kv { display: grid; grid-template-columns: max-content 1fr; gap: 8px 20px; margin: 0; } .kv dt { color: var(--color-text-muted); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.05em; } .kv dd { margin: 0; color: var(--color-text); font-weight: 500; } .tier-badge { display: inline-block; padding: 4px 10px; border-radius: 999px; font-size: 0.78rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; } .tier-badge--free { background: var(--color-neutral-bg); color: var(--color-text); } .tier-badge--referral { background: var(--color-favored-bg); color: var(--color-favored); } .hr-soft { border: 0; border-top: 1px solid var(--color-border-soft); margin: 18px 0; } .referral-code-row { margin: 14px 0 18px; } .referral-code-row label { display: block; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); margin: 10px 0 4px; } .referral-code-row__inner { display: flex; gap: 8px; align-items: center; } .referral-code-input { flex: 1; padding: 8px 12px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-card-alt); font-size: 0.95rem; color: var(--color-text); } .referral-progress { margin-top: 12px; } .referral-progress__bar { display: flex; gap: 6px; margin-bottom: 8px; } .referral-progress__step { flex: 1; height: 8px; border-radius: 4px; background: var(--color-border); } .referral-progress__step.is-on { background: var(--color-favored); } .referral-progress__text { margin: 0; font-size: 0.95rem; } .referral-progress__text strong { color: var(--color-text); font-weight: 700; } .account-form { margin-top: 8px; } .account-form__row { margin-bottom: 24px; } .account-form__row:last-child { margin-bottom: 0; } .field { display: block; } .field__label { display: block; font-weight: 600; font-size: 0.92rem; color: var(--color-text); margin-bottom: 6px; } .field__hint { display: block; font-size: 0.82rem; color: var(--color-text-muted); margin-top: 4px; } .field input[type="text"], .field input[type="email"] { width: 100%; max-width: 420px; padding: 10px 14px; border: 1px solid var(--color-border); border-radius: 6px; background: var(--color-card); color: var(--color-text); font-size: 1rem; } .field input[type="text"]:focus, .field input[type="email"]:focus { border-color: var(--color-blue); outline: 2px solid rgba(30, 136, 229, 0.20); } .field--checkgroup, .field--radiogroup { border: 0; padding: 0; margin: 0; } .checkgroup { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px 18px; margin-top: 8px; } @media (max-width: 700px) { .checkgroup { grid-template-columns: repeat(2, 1fr); } } .check, .radio { display: flex; align-items: center; gap: 8px; font-size: 0.95rem; color: var(--color-text); cursor: pointer; } .check input, .radio input { width: 18px; height: 18px; accent-color: var(--color-blue); } .radiogroup { display: flex; flex-direction: column; gap: 10px; margin-top: 8px; } .account-form__actions { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; } /* ---------- Alerts (success / error) ---------- */ .alert { padding: 14px 18px; border-radius: var(--radius); font-weight: 500; border: 1px solid; } .alert--success { background: var(--color-favored-bg); border-color: rgba(30, 158, 110, 0.35); color: #126b48; } .alert--error { background: var(--color-headwind-bg); border-color: rgba(208, 72, 72, 0.35); color: #8a2828; } html.dark .alert--success { color: #6cd9ac; background: rgba(30, 158, 110, 0.10); } html.dark .alert--error { color: #ff9494; background: rgba(208, 72, 72, 0.10); } /* ---------- Nav: log out link ---------- */ .nav-logout { font-size: 0.85rem; color: var(--color-text-muted); text-decoration: none; padding: 4px 8px; border-radius: 4px; } .nav-logout:hover { color: var(--color-headwind); text-decoration: underline; } /* ---------- Upsell ---------- */ .card--upsell { background: var(--color-bg-alt); border-left: 4px solid var(--color-blue); } .upsell-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 30px; } .upsell-grid h3 { font-size: 1.05rem; margin-bottom: 6px; } .upsell-grid p { color: var(--color-text-muted); margin-bottom: 14px; } /* ---------- Prefooter CTA + footer ---------- */ .prefooter-cta { background: linear-gradient(135deg, var(--color-navy) 0%, var(--color-navy-soft) 100%); color: #fff; padding: 44px 0; } .prefooter-cta__inner { display: grid; grid-template-columns: 1fr auto; gap: 32px; align-items: center; } .prefooter-cta p { color: rgba(255, 255, 255, 0.85); margin: 0; } .site-footer { background: var(--color-navy-dark); color: rgba(255, 255, 255, 0.85); padding: 50px 0 20px; } html.dark .site-footer { background: #05101c; } .site-footer__grid { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1.2fr; gap: 32px; margin-bottom: 32px; } .site-footer__tagline { color: rgba(255, 255, 255, 0.7); font-size: 0.9rem; max-width: 280px; } .site-footer__col ul { list-style: none; padding: 0; margin: 0; } .site-footer__col li { padding: 4px 0; font-size: 0.92rem; } .site-footer__col a { color: rgba(255, 255, 255, 0.82); } .site-footer__col a:hover { color: #fff; } .footer-heading { color: #fff; text-transform: uppercase; letter-spacing: 0.08em; font-size: 0.8rem; font-weight: 700; margin-bottom: 12px; } .compliance-block { border-top: 1px solid rgba(255, 255, 255, 0.12); padding-top: 20px; font-size: 0.82rem; color: rgba(255, 255, 255, 0.65); } .compliance-block p { margin-bottom: 10px; } .compliance-block strong { color: #fff; } .site-footer__legal { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; padding-top: 16px; border-top: 1px solid rgba(255, 255, 255, 0.08); font-size: 0.8rem; color: rgba(255, 255, 255, 0.55); } .site-footer__legal p { margin: 0; } .back-link { margin-top: 12px; } /* ---------- Responsive ---------- */ @media (max-width: 1100px) { .subscore-grid { grid-template-columns: 1fr; } .regime-panel__grid { grid-template-columns: 1fr 1fr; } .feature-grid { grid-template-columns: 1fr; } .site-footer__grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 900px) { .sector-heatmap { grid-template-columns: repeat(2, 1fr); } .upsell-grid { grid-template-columns: 1fr; } .hero--stock__grid { grid-template-columns: 1fr; } .prefooter-cta__inner { grid-template-columns: 1fr; } .nav-toggle { display: inline-block; } .primary-nav { display: none; position: fixed; top: var(--nav-height); left: 0; right: 0; background: var(--color-card); border-bottom: 1px solid var(--color-border); padding: 20px; flex-direction: column; align-items: stretch; gap: 16px; z-index: 49; } .primary-nav.is-open { display: flex; } .primary-nav > ul { flex-direction: column; gap: 4px; } .primary-nav a { padding: 12px 0; border-bottom: 1px solid var(--color-border-soft); } .primary-nav a.is-current { border-bottom-color: var(--color-blue); } .primary-nav__actions { justify-content: space-between; } } @media (max-width: 600px) { .hero { padding: 48px 0 40px; } .hero__title { font-size: 1.75rem; } .sector-heatmap { grid-template-columns: 1fr; } .regime-panel__grid { grid-template-columns: 1fr; } .card { padding: 20px; } .table-controls { flex-direction: column; align-items: stretch; } .ctrl select, .ctrl input[type="search"], .ctrl--range input[type="range"] { min-width: 100%; width: 100%; } .site-footer__grid { grid-template-columns: 1fr; } .signup-form { flex-direction: column; } .score-hero { min-width: auto; width: 100%; } .hero__title--stock { flex-direction: column; gap: 4px; } .clip { max-width: 140px; } .data-table { font-size: 0.82rem; } .data-table thead th, .data-table tbody td { padding: 10px 8px; } } /* ---------- Print ---------- */ @media print { .site-header, .site-footer, .prefooter-cta, .table-controls, .nav-toggle { display: none !important; } .card { break-inside: avoid; box-shadow: none; } } /* ---------- Login ---------- */ .hero--login { text-align: center; } .login-form .field { display: block; text-align: left; } .login-form input[type="email"] { width: 100%; padding: 12px 14px; font: inherit; background: var(--color-card); color: var(--color-text); border: 1px solid var(--color-border); border-radius: var(--radius); } .login-form input[type="email"]:focus { outline: none; border-color: var(--color-blue); } /* ---------- Custom Scrollbars ---------- */ ::-webkit-scrollbar { width: 10px; height: 10px; } ::-webkit-scrollbar-track { background: var(--color-bg-alt); border-radius: 5px; } ::-webkit-scrollbar-thumb { background: var(--color-navy-soft); border-radius: 5px; border: 2px solid var(--color-bg-alt); } ::-webkit-scrollbar-thumb:hover { background: var(--color-blue); } html.dark ::-webkit-scrollbar-track { background: var(--color-bg); } html.dark ::-webkit-scrollbar-thumb { background: #2a4060; border-color: var(--color-bg); } html.dark ::-webkit-scrollbar-thumb:hover { background: var(--color-blue); } /* Firefox */ * { scrollbar-width: thin; scrollbar-color: var(--color-navy-soft) var(--color-bg-alt); } html.dark * { scrollbar-color: #2a4060 var(--color-bg); }