/* * NextIPO — static site styles. Vanilla CSS, no framework. * Visual language adapted from shadcn/ui (neutral palette, restrained * borders, calm data tables) — implemented by hand, no React/Tailwind. * Fonts load via in , not @import. */ :root { /* Neutral surface + text (shadcn "zinc"-ish) */ --bg: #ffffff; --bg-muted: #f4f4f5; --bg-subtle: #fafafa; --text: #3f3f46; /* body */ --text-strong: #18181b; /* headings, emphasis */ --muted: #71717a; /* secondary text */ --border: #e4e4e7; --border-strong: #d4d4d8; --ring: #2563eb33; /* One restrained accent */ --c-primary: #1d4ed8; --c-hover: #1e40af; --c-navy: #18181b; /* legacy alias, now near-black */ --c-accent: #bfdbfe; /* Semantic */ --ok: #15803d; --bad: #b91c1c; --warn-bg: #fef8ee; --warn-bd: #fae3c3; --warn-fg: #92610b; --info-bg: #eff5ff; --info-bd: #d3e2fd; --maxw: 1060px; --radius: 8px; --radius-sm: 6px; --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; --font-display: 'Space Grotesk', var(--font-body); } * { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body); font-size: 14px; line-height: 1.6; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; font-feature-settings: "cv11", "ss01"; } h1, h2, h3, h4 { color: var(--text-strong); line-height: 1.25; letter-spacing: -0.011em; margin-bottom: 0.5em; font-weight: 600; } h1 { font-size: 1.9rem; font-weight: 700; letter-spacing: -0.02em; } h2 { font-size: 1.3rem; } h3 { font-size: 1.05rem; } h4 { font-size: 0.95rem; } p { margin-bottom: 0.85em; } p:last-child { margin-bottom: 0; } a { color: var(--c-primary); text-decoration: none; } a:hover { color: var(--c-hover); text-decoration: underline; } strong { font-weight: 600; color: var(--text-strong); } :focus-visible { outline: 2px solid var(--c-primary); outline-offset: 2px; border-radius: 4px; } .skip-link { position: absolute; left: 8px; top: -48px; background: var(--c-primary); color: #fff; padding: 8px 14px; border-radius: var(--radius-sm); z-index: 200; transition: top 0.15s; } .skip-link:focus { top: 8px; text-decoration: none; } .container { max-width: var(--maxw); margin: 0 auto; padding: 0 24px; } .content { padding: 32px 0 72px; min-height: 60vh; } .muted { color: var(--muted); } .ok { color: var(--ok); font-weight: 500; } .bad { color: var(--bad); font-weight: 500; } /* --------------------------------------------------------------- Header --- */ .site-header { border-bottom: 1px solid var(--border); background: rgba(255, 255, 255, 0.85); backdrop-filter: saturate(180%) blur(8px); position: sticky; top: 0; z-index: 50; } .header-inner { display: flex; align-items: center; gap: 24px; padding: 12px 0; flex-wrap: wrap; } .logo { display: inline-flex; align-items: center; text-decoration: none; } .logo:hover { text-decoration: none; } .logo-text { font-family: var(--font-display); font-size: 1.4rem; font-weight: 700; color: var(--text-strong); letter-spacing: -0.03em; line-height: 1; } .logo-accent { color: var(--c-primary); } .logo-dial { width: 1.05rem; height: 1.05rem; display: block; margin-left: 0.05em; margin-top: -0.08em; } .main-nav { margin-left: auto; } .nav-list { list-style: none; display: flex; align-items: center; gap: 2px; } .nav-group { position: relative; } .nav-top { display: block; padding: 8px 12px; border-radius: var(--radius-sm); font-size: 0.88rem; font-weight: 500; color: var(--text); white-space: nowrap; } .nav-top::after { content: ""; display: inline-block; width: 0.34em; height: 0.34em; margin-left: 0.4em; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-0.15em) rotate(45deg); opacity: 0.5; } .nav-group:hover .nav-top, .nav-group:focus-within .nav-top { background: var(--bg-muted); color: var(--text-strong); text-decoration: none; } .nav-top[aria-current="true"] { color: var(--c-primary); } .nav-panel { list-style: none; position: absolute; top: 100%; left: 0; min-width: 220px; background: var(--bg); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 6px -1px rgba(0,0,0,.06), 0 10px 24px -4px rgba(0,0,0,.08); padding: 6px; z-index: 60; opacity: 0; visibility: hidden; transform: translateY(4px); transition: opacity .12s ease, transform .12s ease, visibility .12s; } .nav-group::after { content: ""; position: absolute; top: 100%; left: 0; right: 0; height: 8px; } .nav-group:hover .nav-panel, .nav-group:focus-within .nav-panel { opacity: 1; visibility: visible; transform: translateY(0); } .nav-panel li a { display: block; padding: 8px 10px; border-radius: var(--radius-sm); font-size: 0.85rem; color: var(--text); white-space: nowrap; } .nav-panel li a:hover { background: var(--bg-muted); color: var(--text-strong); text-decoration: none; } .nav-panel-hub { border-bottom: 1px solid var(--border); margin-bottom: 4px; padding-bottom: 2px; } .nav-panel-hub a { font-weight: 600; } .nav-group:nth-last-child(-n+2) .nav-panel { left: auto; right: 0; } /* ---------------------------------------------------------- Breadcrumb --- */ .breadcrumb { font-size: 0.8rem; color: var(--muted); margin-bottom: 18px; } .breadcrumb a { color: var(--muted); } .breadcrumb a:hover { color: var(--text-strong); } .breadcrumb .sep { margin: 0 8px; opacity: 0.4; } .breadcrumb [aria-current="page"] { color: var(--text); } /* --------------------------------------------------------------- Hero --- */ .hero, .page-hero { margin-bottom: 28px; } .page-hero { padding-bottom: 18px; border-bottom: 1px solid var(--border); } .hero h1, .page-hero h1 { font-size: 1.95rem; margin-bottom: 8px; } .subtitle { font-size: 1rem; color: var(--muted); max-width: 64ch; } .hero-actions { margin-top: 20px; display: flex; flex-wrap: wrap; gap: 10px; } /* -------------------------------------------------------------- Buttons --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; height: 36px; border-radius: var(--radius-sm); font-size: 0.85rem; font-weight: 500; border: 1px solid transparent; cursor: pointer; text-align: center; transition: background .12s, border-color .12s, color .12s; } .btn:hover { text-decoration: none; } .btn:disabled { opacity: 0.5; pointer-events: none; } .btn-primary { background: var(--c-primary); color: #fff; border-color: var(--c-primary); } .btn-primary:hover { background: var(--c-hover); border-color: var(--c-hover); color: #fff; } .btn-secondary, .btn-outline { background: var(--bg); color: var(--text-strong); border-color: var(--border-strong); } .btn-secondary:hover, .btn-outline:hover { background: var(--bg-muted); color: var(--text-strong); } .btn-ghost { background: transparent; color: var(--text); border-color: transparent; } .btn-ghost:hover { background: var(--bg-muted); } .btn-small { height: 30px; padding: 4px 12px; font-size: 0.78rem; } /* --------------------------------------------------------------- Cards --- */ .card { border: 1px solid var(--border); border-radius: var(--radius); padding: 20px; background: var(--bg); margin-bottom: 18px; } .card:last-child { margin-bottom: 0; } .card > h2:first-child, .card > h3:first-child { margin-top: 0; } .data-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; margin: 16px 0; } .data-grid.two-col { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .data-grid .card { margin-bottom: 0; } .plain-list { list-style: none; } .plain-list li { padding: 8px 0; border-bottom: 1px solid var(--border); } .plain-list li:last-child { border-bottom: 0; } .more-link { margin-top: 10px; font-size: 0.85rem; } /* ----------------------------------------------------- IPO dashboard --- */ .chip-row { display: inline-flex; flex-wrap: wrap; gap: 2px; margin-bottom: 18px; padding: 3px; background: var(--bg-muted); border-radius: var(--radius-sm); } .chip { display: inline-block; padding: 5px 14px; border-radius: var(--radius-sm); font-size: 0.8rem; font-weight: 500; color: var(--muted); background: transparent; border: 1px solid transparent; } .chip:hover { color: var(--text-strong); text-decoration: none; } .chip-on { background: var(--bg); color: var(--text-strong); box-shadow: 0 1px 2px rgba(0,0,0,.06); } .chip-on:hover { color: var(--text-strong); } .stat-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 12px; margin: 20px 0; } .stat { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; background: var(--bg); } .stat-num { display: block; font-size: 1.6rem; font-weight: 700; letter-spacing: -0.02em; color: var(--text-strong); font-variant-numeric: tabular-nums; } .stat-label { font-size: 0.78rem; color: var(--muted); } .stat-ok .stat-num { color: var(--ok); } .stat-bad .stat-num { color: var(--bad); } a.stat-link { display: block; color: inherit; } a.stat-link:hover { text-decoration: none; } a.stat-link:hover .stat { border-color: var(--border-strong); background: var(--bg-subtle); } .quicknav { display: flex; flex-wrap: wrap; gap: 4px 18px; padding: 10px 0; margin-bottom: 8px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); font-size: 0.82rem; } .quicknav a { color: var(--muted); } .quicknav a:hover { color: var(--text-strong); } .section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin: 32px 0 4px; } .section-head h2 { margin-bottom: 0; } .section-head a, .section-head span { font-size: 0.82rem; white-space: nowrap; } #about { margin-top: 40px; padding-top: 8px; border-top: 1px solid var(--border); } /* ---------------------------------------------- Toolbar / inputs / pager --- */ .toolbar { display: flex; flex-wrap: wrap; gap: 8px; margin: 16px 0; } .input { height: 36px; padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; font-size: 0.85rem; color: var(--text-strong); background: var(--bg); } .input:focus-visible { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--ring); } input.input[type="search"] { flex: 1 1 220px; min-width: 0; } select.input { cursor: pointer; } .pagination { display: flex; align-items: center; gap: 12px; margin-top: 14px; font-size: 0.82rem; } /* --------------------------------------------------- DRHP analysis hub --- */ .decoded-sector { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-primary); margin-bottom: 4px; } .decoded h3 { margin-bottom: 6px; } .decoded-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; } .tag { display: inline-block; font-size: 0.68rem; padding: 2px 8px; border: 1px solid var(--border-strong); border-radius: 999px; color: var(--muted); } .lens-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin: 16px 0; } .lens { border-left: 2px solid var(--c-accent); padding: 2px 0 2px 12px; } .lens h3 { font-size: 0.92rem; margin-bottom: 2px; } /* --------------------------------------------------------- Verdict hero --- */ /* The "read this in 2 minutes" summary at the top of a DRHP analysis page: score gauge, one-line verdict, the blunt "straight answer", top risks. */ .verdict-hero { border: 1px solid var(--border-strong); border-radius: var(--radius); padding: 22px 24px; margin-bottom: 18px; background: var(--bg-subtle); } .verdict-top { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-bottom: 14px; } .verdict-gauge { flex: none; width: 76px; height: 76px; border-radius: 50%; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 3px solid var(--border-strong); background: var(--bg); font-family: var(--font-display); } .verdict-gauge .n { font-size: 1.3rem; font-weight: 800; line-height: 1; color: var(--text-strong); } .verdict-gauge .d { font-size: 0.62rem; color: var(--muted); } .verdict-strong .verdict-gauge { border-color: var(--ok); } .verdict-strong .verdict-gauge .n { color: var(--ok); } .verdict-moderate .verdict-gauge { border-color: var(--warn-fg); } .verdict-moderate .verdict-gauge .n { color: var(--warn-fg); } .verdict-weak .verdict-gauge { border-color: var(--bad); } .verdict-weak .verdict-gauge .n { color: var(--bad); } .verdict-headline { flex: 1 1 auto; min-width: 200px; } .verdict-headline .eyebrow { font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 3px; } .verdict-headline h2 { margin-bottom: 2px; } .verdict-badge { display: inline-block; font-size: 0.78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; margin-top: 4px; } .verdict-strong .verdict-badge { background: #eafaf0; color: var(--ok); } .verdict-moderate .verdict-badge { background: var(--warn-bg); color: var(--warn-fg); } .verdict-weak .verdict-badge { background: #fdecec; color: var(--bad); } .straight-answer { border-left: 3px solid var(--c-primary); padding: 2px 0 2px 14px; margin: 14px 0; font-size: 0.95rem; color: var(--text-strong); } .straight-answer .eyebrow { display: block; font-size: 0.66rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--c-primary); margin-bottom: 5px; } .risk-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .tag-risk { border-color: #f6cccc; background: #fdecec; color: var(--bad); } /* Scorecard: 5 categories out of 10, as horizontal bars */ .score-bars { margin: 14px 0; } .score-bar-row { display: flex; align-items: center; gap: 10px; margin-bottom: 7px; font-size: 0.82rem; } .score-bar-label { width: 128px; flex: none; color: var(--muted); } .score-bar-track { flex: 1 1 auto; height: 7px; border-radius: 999px; overflow: hidden; background: var(--bg-muted); } .score-bar-fill { height: 100%; border-radius: 999px; background: var(--c-primary); } .score-bar-value { width: 26px; flex: none; text-align: right; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--text-strong); } /* ------------------------------------------------------------ Accordion --- */ .accordion { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; max-width: 78ch; } .accordion > .prose { padding: 14px 18px; } .accordion-item { border-top: 1px solid var(--border); } .accordion-item:first-child { border-top: 0; } .accordion-item > summary { list-style: none; cursor: pointer; padding: 14px 18px; font-weight: 500; color: var(--text-strong); display: flex; align-items: center; justify-content: space-between; gap: 12px; } .accordion-item > summary::-webkit-details-marker { display: none; } .accordion-item > summary:hover { background: var(--bg-subtle); } .accordion-item > summary::after { content: ""; flex: none; width: 0.5em; height: 0.5em; border-right: 2px solid var(--muted); border-bottom: 2px solid var(--muted); transform: rotate(45deg); transition: transform .15s ease; } .accordion-item[open] > summary::after { transform: rotate(-135deg); } .accordion-item[open] > summary { background: var(--bg-subtle); } .accordion-item > .prose { padding: 4px 18px 18px; } /* -------------------------------------------------------------- Tables --- */ .table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: 14px 0; border: 1px solid var(--border); border-radius: var(--radius); } .data-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; font-variant-numeric: tabular-nums; } .data-table caption { text-align: left; color: var(--muted); font-size: 0.8rem; padding: 10px 14px 0; } .data-table th, .data-table td { padding: 10px 14px; text-align: left; border-bottom: 1px solid var(--border); vertical-align: top; } .data-table tbody tr:last-child td { border-bottom: 0; } .data-table thead th { font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); font-weight: 600; white-space: nowrap; background: var(--bg-subtle); } .data-table tbody td:first-child { color: var(--text-strong); font-weight: 500; } .data-table tbody tr:hover td { background: var(--bg-subtle); } /* ------------------------------------------------------ Badges / trend --- */ .badge { display: inline-block; padding: 2px 8px; border-radius: 999px; font-size: 0.68rem; font-weight: 600; border: 1px solid transparent; white-space: nowrap; } .badge-upcoming { background: var(--warn-bg); color: var(--warn-fg); border-color: var(--warn-bd); } .badge-live { background: #eafaf0; color: var(--ok); border-color: #c4ecd3; } .badge-allotment { background: var(--info-bg); color: var(--c-primary); border-color: var(--info-bd); } .badge-listed { background: var(--bg-muted); color: var(--muted); border-color: var(--border-strong); } .badge-withdrawn { background: #fdecec; color: var(--bad); border-color: #f6cccc; } .trend { font-weight: 600; font-size: 0.82rem; } .trend-rising { color: var(--ok); } .trend-falling { color: var(--bad); } .trend-flat { color: var(--muted); } .fresh { color: var(--ok); font-weight: 600; font-size: 0.78rem; } .ofs { color: var(--bad); font-weight: 600; font-size: 0.78rem; margin-left: 8px; } .bar { display: flex; height: 6px; border-radius: 999px; overflow: hidden; background: var(--bg-muted); margin-top: 6px; min-width: 140px; } .bar-fresh { background: var(--ok); } .bar-ofs { background: var(--bad); } /* --------------------------------------------------------------- Notes --- */ .note { border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 16px; margin: 16px 0; font-size: 0.88rem; } .note-title { font-weight: 600; margin-bottom: 3px; } .note-warn { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn-fg); } .note-warn .note-title { color: var(--warn-fg); } .note-info { background: var(--info-bg); border-color: var(--info-bd); } /* ------------------------------------------------------- Split / aside --- */ .split { display: grid; grid-template-columns: 2fr 1fr; gap: 28px; align-items: start; } .split aside .card { position: sticky; top: 80px; } .kv { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 20px; } .kv.kv-tight { grid-template-columns: 1fr; gap: 8px; } .kv > div { display: flex; justify-content: space-between; gap: 12px; border-bottom: 1px dashed var(--border); padding-bottom: 6px; } .kv dt { color: var(--muted); } .kv dd { font-weight: 600; color: var(--text-strong); text-align: right; } /* --------------------------------------------------------------- Prose --- */ .prose { max-width: 70ch; } .prose h2 { margin-top: 1.7em; } .prose h3 { margin-top: 1.4em; } .prose h4 { margin-top: 1.2em; } .prose > :first-child { margin-top: 0; } .prose ul, .prose ol { margin: 0 0 1em 1.3em; } .prose li { margin-bottom: 0.35em; } .prose blockquote { border-left: 3px solid var(--c-accent); padding: 4px 0 4px 16px; margin: 1em 0; color: var(--muted); } .prose hr { border: 0; border-top: 1px solid var(--border); margin: 1.8em 0; } .prose code { background: var(--bg-muted); border: 1px solid var(--border); border-radius: 4px; padding: 1px 5px; font-size: 0.85em; } .prose pre { background: var(--bg-muted); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px; overflow-x: auto; margin: 1em 0; } .prose pre code { background: none; border: 0; padding: 0; } .prose table.data-table { font-size: 0.82rem; } /* ---------------------------------------------------------- Calculators --- */ .calc label { display: block; font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 6px; } .calc input[type="number"] { width: 100%; padding: 8px 12px; height: 36px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; margin-bottom: 14px; } .calc input[type="number"]:focus-visible { outline: none; border-color: var(--c-primary); box-shadow: 0 0 0 3px var(--ring); } .calc input[type="range"] { width: 100%; accent-color: var(--c-primary); } .calc-out { font-size: 1rem; margin-top: 10px; } .calc-out #odds, .calc-out #score { font-size: 1.9rem; font-weight: 800; color: var(--c-primary); letter-spacing: -0.02em; } .risk-table th[scope="row"] { font-weight: 500; color: var(--text-strong); width: 45%; } .risk-table th[scope="row"] .muted { font-weight: 400; display: block; margin-top: 2px; } .risk-table td { vertical-align: middle; } .risk-table output { font-weight: 700; font-variant-numeric: tabular-nums; } /* -------------------------------------------------------------- Footer --- */ .site-footer { border-top: 1px solid var(--border); background: var(--bg-subtle); padding: 44px 0 20px; margin-top: 48px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 36px; margin-bottom: 28px; } .footer-grid h2 { font-size: 0.9rem; margin-bottom: 12px; color: var(--text-strong); } .footer-about p { color: var(--muted); font-size: 0.83rem; max-width: 48ch; } .footer-about .disclaimer { margin-top: 10px; font-size: 0.78rem; } .footer-links ul { list-style: none; } .footer-links li { margin-bottom: 8px; } .footer-links a { color: var(--muted); font-size: 0.83rem; } .footer-links a:hover { color: var(--text-strong); } .footer-bottom { border-top: 1px solid var(--border); padding-top: 18px; color: var(--muted); font-size: 0.76rem; } /* ---------------------------------------------------------- Responsive --- */ @media (max-width: 860px) { .container { padding: 0 16px; } .header-inner { gap: 10px 12px; } .main-nav { width: 100%; margin-left: 0; } .nav-list { flex-wrap: wrap; gap: 6px; } .nav-group { position: static; flex: 1 1 auto; } .nav-top { border: 1px solid var(--border); text-align: center; } .nav-top::after { display: none; } .nav-panel { display: none; } .split { grid-template-columns: 1fr; } .split aside .card { position: static; } .footer-grid { grid-template-columns: 1fr; gap: 24px; } .kv { grid-template-columns: 1fr; } .chip-row { display: flex; } h1, .hero h1, .page-hero h1 { font-size: 1.65rem; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }