| """Shared visual theme for Streamlit apps — mark.dev paper (or mark.dev after dark) with one project accent. |
| |
| Copy this file into a repo as ``ui_theme.py`` (next to the app, or inside the |
| package), set MODE and the three ACCENT values from the palette, and call |
| ``apply_theme()`` right after ``st.set_page_config(...)`` on EVERY page script |
| (multipage apps run each page on its own, so CSS does not carry over). |
| |
| Pair it with ``.streamlit/config.toml`` at the repo root so native widgets |
| (sliders, checkboxes, focus rings) pick up the same colours. |
| |
| Light (MODE = "light"): |
| [theme] |
| base = "light" |
| primaryColor = "<ACCENT>" |
| backgroundColor = "#fefaf5" |
| secondaryBackgroundColor = "#faf2e9" |
| textColor = "#1c1714" |
| font = "sans serif" |
| |
| Dark (MODE = "dark"): |
| [theme] |
| base = "dark" |
| primaryColor = "<ACCENT>" |
| backgroundColor = "#14110f" |
| secondaryBackgroundColor = "#1f1a17" |
| textColor = "#f4ede4" |
| font = "sans serif" |
| """ |
| from __future__ import annotations |
|
|
| import streamlit as st |
|
|
| |
| MODE = "dark" |
| ACCENT = "#F0655A" |
| ACCENT_STRONG = "#F4877E" |
| ACCENT_SOFT = "#D0564C" |
| |
|
|
| _PALETTES = { |
| "light": dict( |
| paper="#fefaf5", paper_alt="#faf2e9", card="#fffdfa", |
| ink="#1c1714", ink_2="#57504a", ink_3="#756c65", |
| line="#e9dbcd", line_strong="#d8c3b2", on_accent="#fefaf5", |
| header="rgba(254, 250, 245, .82)", placeholder="#a89a8f", |
| shadow_sm="0 1px 2px rgba(60, 40, 20, .04), 0 4px 16px rgba(60, 40, 20, .05)", |
| shadow_md="0 2px 4px rgba(60, 40, 20, .05), 0 14px 38px rgba(60, 40, 20, .09)", |
| neutrals=("#8c7b6b", "#c9a27e", "#3b3230", "#b9ad9f"), dots=1.0, |
| ), |
| "dark": dict( |
| paper="#14110f", paper_alt="#1a1613", card="#1f1a17", |
| ink="#f4ede4", ink_2="#c9bcae", ink_3="#9a8c7f", |
| line="#2f2823", line_strong="#463b33", on_accent="#14110f", |
| header="rgba(20, 17, 15, .82)", placeholder="#7d6f63", |
| shadow_sm="0 1px 2px rgba(0, 0, 0, .35), 0 6px 18px rgba(0, 0, 0, .28)", |
| shadow_md="0 2px 4px rgba(0, 0, 0, .4), 0 16px 40px rgba(0, 0, 0, .45)", |
| neutrals=("#b3a595", "#d9b48f", "#f4ede4", "#7d6f63"), dots=0.75, |
| ), |
| } |
|
|
|
|
| def _palette() -> dict: |
| return _PALETTES["dark" if MODE == "dark" else "light"] |
|
|
|
|
| |
| PAPER = _palette()["paper"] |
| PAPER_ALT = _palette()["paper_alt"] |
| CARD = _palette()["card"] |
| INK = _palette()["ink"] |
| INK_2 = _palette()["ink_2"] |
| INK_3 = _palette()["ink_3"] |
| LINE = _palette()["line"] |
| LINE_STRONG = _palette()["line_strong"] |
| ON_ACCENT = _palette()["on_accent"] |
| FONT_DISPLAY = "'Fraunces', Georgia, 'Times New Roman', serif" |
| FONT_BODY = "'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif" |
| FONT_MONO = "'JetBrains Mono', ui-monospace, Consolas, monospace" |
|
|
|
|
| def _rgba(hex_color: str, alpha: float) -> str: |
| h = hex_color.lstrip("#") |
| r, g, b = (int(h[i:i + 2], 16) for i in (0, 2, 4)) |
| return f"rgba({r}, {g}, {b}, {alpha})" |
|
|
|
|
| def colorway() -> list[str]: |
| """Categorical chart colours: accent first, then warm neutrals that sit on the ground.""" |
| n = _palette()["neutrals"] |
| return [ACCENT, n[0], ACCENT_SOFT, n[1], n[2], n[3]] |
|
|
|
|
| def sequential(n: int = 6) -> list[str]: |
| """Ground-to-accent ramp for heatmaps / ordered categories.""" |
| h = ACCENT.lstrip("#") |
| r, g, b = (int(h[i:i + 2], 16) for i in (0, 2, 4)) |
| g0 = _palette()["paper_alt"].lstrip("#") |
| base = tuple(int(g0[i:i + 2], 16) for i in (0, 2, 4)) |
| out = [] |
| for i in range(n): |
| t = 0.15 + 0.85 * i / max(n - 1, 1) |
| out.append("#%02x%02x%02x" % tuple(round(base[k] + (c - base[k]) * t) |
| for k, c in enumerate((r, g, b)))) |
| return out |
|
|
|
|
| def plotly_layout(**overrides) -> dict: |
| """Transparent plotly layout that blends into the ground. |
| |
| Render with ``st.plotly_chart(fig, theme=None)`` — Streamlit's default chart |
| theme otherwise repaints the traces. Do not add a ``title_font`` without a |
| title: Streamlit then prints "undefined". Prefer ``style_fig(fig)``. |
| """ |
| p = _palette() |
| layout = dict( |
| paper_bgcolor="rgba(0,0,0,0)", |
| plot_bgcolor="rgba(0,0,0,0)", |
| font=dict(family="Inter, -apple-system, Segoe UI, sans-serif", color=p["ink_2"], size=13), |
| colorway=colorway(), |
| xaxis=dict(gridcolor=p["line"], linecolor=p["line_strong"], zerolinecolor=p["line"], automargin=True), |
| yaxis=dict(gridcolor=p["line"], linecolor=p["line_strong"], zerolinecolor=p["line"], automargin=True), |
| legend=dict(bgcolor="rgba(0,0,0,0)", font=dict(color=p["ink_2"])), |
| hoverlabel=dict(bgcolor=p["card"], bordercolor=p["line_strong"], font=dict(color=p["ink"])), |
| ) |
| for key, value in overrides.items(): |
| |
| if key in ("xaxis", "yaxis") and isinstance(value, dict): |
| layout[key] = {**layout[key], **value} |
| else: |
| layout[key] = value |
| return layout |
|
|
|
|
| |
| _PLOTLY_DEFAULTS = {"#636efa", "#ef553b", "#00cc96", "#ab63fa", "#ffa15a", |
| "#19d3f3", "#ff6692", "#b6e880", "#ff97ff", "#fecb52"} |
|
|
|
|
| def style_fig(fig, **layout_overrides): |
| """Apply the layout AND recolour traces, then render with theme=None. |
| |
| plotly express stamps its own colour onto each trace at creation time, so |
| setting ``colorway`` afterwards does nothing — hence the second pass. Even |
| better: pass ``color_discrete_sequence=ui_theme.colorway()`` to the px call. |
| """ |
| fig.update_layout(**plotly_layout(**layout_overrides)) |
| palette, i = colorway(), 0 |
| for trace in fig.data: |
| for holder in ("marker", "line"): |
| obj = getattr(trace, holder, None) |
| colour = getattr(obj, "color", None) if obj is not None else None |
| if isinstance(colour, str) and colour.lower() in _PLOTLY_DEFAULTS: |
| obj.color = palette[i % len(palette)] |
| i += 1 |
| return fig |
|
|
|
|
| def _dots_svg() -> str: |
| fill = ACCENT.replace("#", "%23") |
| k = _palette()["dots"] |
| dots = [(52, 71, 1.4, .28), (178, 38, .9, .22), (312, 95, 1.6, .3), (458, 52, 1, .24), |
| (546, 128, 1.3, .26), (96, 188, 1.1, .25), (236, 222, 1.5, .28), (392, 176, .9, .2), |
| (508, 246, 1.4, .27), (28, 298, 1.2, .24), (158, 344, 1.6, .3), (286, 312, 1, .22), |
| (430, 366, 1.3, .26), (566, 402, 1.1, .23), (72, 452, 1.5, .29), (204, 486, .9, .21), |
| (348, 438, 1.4, .27), (482, 528, 1.2, .25), (128, 566, 1.3, .26), (268, 592, 1, .22), |
| (412, 556, 1.5, .28), (588, 486, .9, .2)] |
| circles = "".join(f"%3Ccircle cx='{x}' cy='{y}' r='{r}' opacity='{round(o * k, 3)}'/%3E" |
| for x, y, r, o in dots) |
| return ("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='600' height='600'%3E" |
| f"%3Cg fill='{fill}'%3E{circles}%3C/g%3E%3C/svg%3E") |
|
|
|
|
| def theme_css() -> str: |
| p = _palette() |
| tint = _rgba(ACCENT, .08 if MODE == "dark" else .06) |
| glow = _rgba(ACCENT, .22 if MODE == "dark" else .14) |
| line_accent = _rgba(ACCENT, .32 if MODE == "dark" else .24) |
| return f""" |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;0,9..144,700;1,9..144,500;1,9..144,600&family=Inter:wght@400;500;600;700&family=JetBrains+Mono:wght@400;500;600&display=swap'); |
| |
| :root {{ |
| --paper: {p["paper"]}; --paper-alt: {p["paper_alt"]}; --card: {p["card"]}; |
| --ink: {p["ink"]}; --ink-2: {p["ink_2"]}; --ink-3: {p["ink_3"]}; |
| --line: {p["line"]}; --line-strong: {p["line_strong"]}; --on-accent: {p["on_accent"]}; |
| --accent: {ACCENT}; --accent-strong: {ACCENT_STRONG}; --accent-soft: {ACCENT_SOFT}; |
| --accent-tint: {tint}; --accent-glow: {glow}; --accent-line: {line_accent}; |
| --shadow-sm: {p["shadow_sm"]}; |
| --shadow-md: {p["shadow_md"]}; |
| }} |
| |
| /* ground with the mark.dev dot texture */ |
| .stApp {{ |
| background-color: var(--paper); |
| background-image: url("{_dots_svg()}"); |
| background-repeat: repeat; |
| color: var(--ink); |
| }} |
| .stApp p, .stApp li, .stApp label, .stApp input, .stApp textarea, .stApp button, |
| .stApp td, .stApp th, [data-testid="stMarkdownContainer"] {{ font-family: {FONT_BODY}; }} |
| ::selection {{ background: var(--accent); color: var(--on-accent); }} |
| |
| [data-testid="stHeader"] {{ background: {p["header"]}; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); }} |
| [data-testid="stDecoration"] {{ background-image: linear-gradient(90deg, var(--accent), var(--accent-soft)); height: 2px; }} |
| |
| [data-testid="stSidebar"] {{ background-color: var(--paper-alt); border-right: 1px solid var(--line); }} |
| [data-testid="stSidebar"] > div:first-child {{ background: transparent; }} |
| [data-testid="stSidebarNav"] a, [data-testid="stSidebarNavLink"] {{ border-radius: 999px; }} |
| [data-testid="stSidebarNav"] a:hover, [data-testid="stSidebarNavLink"]:hover {{ background: var(--accent-tint); }} |
| [data-testid="stSidebarNav"] a[aria-current="page"], [data-testid="stSidebarNavLink"][aria-current="page"] {{ background: var(--accent-tint); }} |
| [data-testid="stSidebarNav"] a[aria-current="page"] span, [data-testid="stSidebarNavLink"][aria-current="page"] span {{ color: var(--accent); font-weight: 600; }} |
| |
| /* type */ |
| .stApp h1, .stApp h2, .stApp h3, .stApp h4 {{ font-family: {FONT_DISPLAY}; color: var(--ink); letter-spacing: -.015em; text-wrap: balance; }} |
| .stApp h1 {{ font-weight: 700; line-height: 1.08; }} |
| .stApp h2, .stApp h3 {{ font-weight: 600; }} |
| .stApp h4 {{ font-weight: 600; font-size: 1.1rem; }} |
| .stApp a {{ color: var(--accent); }} |
| .stApp a:hover {{ color: var(--accent-strong); }} |
| [data-testid="stCaptionContainer"], [data-testid="stCaptionContainer"] p {{ color: var(--ink-3); }} |
| .stApp hr {{ border-color: var(--line); }} |
| .stApp code {{ font-family: {FONT_MONO}; font-size: .85em; color: var(--accent); background: var(--accent-tint); border-radius: 6px; padding: .1em .35em; }} |
| .stApp pre code, [data-testid="stCode"] code {{ color: inherit; background: transparent; padding: 0; }} |
| [data-testid="stCode"] pre, .stCode pre {{ background: var(--paper-alt) !important; border: 1px solid var(--line); border-radius: 10px; }} |
| |
| /* widget labels read like mark.dev form labels */ |
| [data-testid="stWidgetLabel"] p {{ font-family: {FONT_MONO}; font-size: .7rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }} |
| .stCheckbox [data-testid="stWidgetLabel"] p, [data-testid="stCheckbox"] [data-testid="stWidgetLabel"] p, |
| .stToggle [data-testid="stWidgetLabel"] p, [data-testid="stToggle"] [data-testid="stWidgetLabel"] p, |
| [data-testid="stRadio"] label[data-baseweb="radio"] p {{ |
| font-family: {FONT_BODY}; font-size: .92rem; font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-2); |
| }} |
| |
| /* buttons: pills */ |
| .stButton > button, .stDownloadButton > button, [data-testid="stFormSubmitButton"] > button, |
| [data-testid="baseButton-secondary"], [data-testid="stBaseButton-secondary"] {{ |
| border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); |
| font-weight: 600; padding: .5rem 1.25rem; box-shadow: var(--shadow-sm); |
| transition: background .25s ease, border-color .25s ease, color .25s ease, transform .25s ease; |
| }} |
| .stButton > button:hover, .stDownloadButton > button:hover, [data-testid="stFormSubmitButton"] > button:hover, |
| [data-testid="baseButton-secondary"]:hover, [data-testid="stBaseButton-secondary"]:hover {{ |
| border-color: var(--accent); color: var(--accent); background: var(--accent-tint); transform: translateY(-1px); |
| }} |
| .stApp button[kind="primary"], [data-testid="baseButton-primary"], [data-testid="stBaseButton-primary"] {{ |
| background: var(--accent); border-color: var(--accent); color: var(--on-accent); |
| box-shadow: 0 2px 12px {_rgba(ACCENT, .2)}; |
| }} |
| .stApp button[kind="primary"]:hover, [data-testid="baseButton-primary"]:hover, [data-testid="stBaseButton-primary"]:hover {{ |
| background: var(--accent-strong); border-color: var(--accent-strong); color: var(--on-accent); |
| }} |
| .stApp button[kind="primary"] p, [data-testid="baseButton-primary"] p, [data-testid="stBaseButton-primary"] p {{ color: var(--on-accent); }} |
| .stApp button:focus-visible {{ box-shadow: 0 0 0 3px var(--accent-glow); outline: none; }} |
| |
| /* inputs */ |
| .stApp [data-baseweb="input"], .stApp [data-baseweb="textarea"], .stApp [data-baseweb="select"] > div {{ |
| background-color: var(--card); border: 1px solid var(--line); border-radius: 10px; |
| }} |
| .stApp [data-baseweb="base-input"], .stApp [data-baseweb="input"] input, .stApp [data-baseweb="textarea"] textarea {{ background-color: var(--card); color: var(--ink); }} |
| .stApp input::placeholder, .stApp textarea::placeholder {{ color: {p["placeholder"]}; }} |
| .stApp [data-baseweb="input"]:focus-within, .stApp [data-baseweb="textarea"]:focus-within, .stApp [data-baseweb="select"] > div:focus-within {{ |
| border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); |
| }} |
| /* number inputs: Streamlit frames the container and zeroes the inner input, so the |
| generic input rule above must not re-border the inner one */ |
| [data-testid="stNumberInputContainer"] {{ background: var(--card); border: 1px solid var(--line); border-radius: 10px; }} |
| [data-testid="stNumberInputContainer"]:focus-within {{ border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }} |
| .stApp [data-testid="stNumberInputContainer"] [data-baseweb="input"], |
| .stApp [data-testid="stNumberInputContainer"] [data-baseweb="input"]:focus-within {{ border: 0; border-radius: 0; box-shadow: none; background: transparent; }} |
| [data-testid="stNumberInputStepDown"], [data-testid="stNumberInputStepUp"] {{ background: transparent; color: var(--ink-3); }} |
| [data-testid="stNumberInputStepDown"]:hover:enabled, [data-testid="stNumberInputStepUp"]:hover:enabled {{ background: var(--accent-tint); color: var(--accent); }} |
| .stApp [data-baseweb="tag"] {{ background-color: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: 999px; }} |
| .stApp [data-baseweb="tag"] span {{ color: var(--accent); }} |
| [data-testid="stSlider"] [role="slider"] {{ background-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-glow); }} |
| [data-testid="stThumbValue"], [data-testid="stSliderThumbValue"] {{ color: var(--accent); font-family: {FONT_MONO}; }} |
| |
| /* metrics as mark.dev stat cards */ |
| [data-testid="stMetric"] {{ background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: .9rem 1rem; box-shadow: var(--shadow-sm); }} |
| [data-testid="stMetricLabel"] p {{ font-family: {FONT_MONO}; font-size: .68rem; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }} |
| [data-testid="stMetricValue"], [data-testid="stMetricValue"] div {{ font-family: {FONT_DISPLAY}; color: var(--accent); font-weight: 600; }} |
| /* serif digits run wider than Streamlit's default face: scale with the viewport so 5-6 metrics in a row don't ellipsize */ |
| [data-testid="stMetricValue"] {{ font-size: clamp(1.35rem, 1rem + 1.1vw, 2.1rem); }} |
| |
| /* tabs */ |
| .stTabs [data-baseweb="tab-list"] {{ gap: 1.6rem; }} |
| .stTabs [data-baseweb="tab"] {{ color: var(--ink-2); font-weight: 500; padding-left: .15rem; padding-right: .15rem; }} |
| .stTabs [data-baseweb="tab"]:hover {{ color: var(--accent); }} |
| .stTabs [data-baseweb="tab"][aria-selected="true"], .stTabs [data-baseweb="tab"][aria-selected="true"] p {{ color: var(--accent); font-weight: 600; }} |
| .stTabs [data-baseweb="tab-highlight"] {{ background-color: var(--accent); }} |
| .stTabs [data-baseweb="tab-border"] {{ background-color: var(--line); }} |
| |
| /* surfaces */ |
| [data-testid="stExpander"] details {{ background: var(--card); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-sm); }} |
| [data-testid="stExpander"] summary:hover, [data-testid="stExpander"] summary:hover p {{ color: var(--accent); }} |
| [data-testid="stFileUploaderDropzone"] {{ background: var(--card); border: 1.5px dashed var(--line-strong); border-radius: 16px; }} |
| [data-testid="stFileUploaderDropzone"]:hover {{ border-color: var(--accent); background: var(--accent-tint); }} |
| [data-testid="stFileUploaderDropzone"] svg {{ color: var(--accent); fill: var(--accent); }} |
| [data-testid="stDataFrame"], [data-testid="stTable"] {{ border: 1px solid var(--line); border-radius: 12px; overflow: hidden; background: var(--card); }} |
| [data-testid="stAlert"], [data-testid="stAlert"] > div {{ border-radius: 12px; }} |
| [data-testid="stPlotlyChart"], [data-testid="stVegaLiteChart"], [data-testid="stArrowVegaLiteChart"] {{ border-radius: 12px; }} |
| |
| ::-webkit-scrollbar {{ width: 8px; height: 8px; }} |
| ::-webkit-scrollbar-track {{ background: transparent; }} |
| ::-webkit-scrollbar-thumb {{ background: var(--line-strong); border-radius: 4px; }} |
| ::-webkit-scrollbar-thumb:hover {{ background: var(--accent); }} |
| </style> |
| """ |
|
|
|
|
| |
| |
| |
| |
| |
|
|
| _STATUS = { |
| "light": dict(ok="#3f7a3a", ok_tint="rgba(63, 122, 58, .10)", |
| warn="#a86a12", warn_tint="rgba(168, 106, 18, .10)", |
| bad="#b3261e", bad_tint="rgba(179, 38, 30, .08)", |
| info="#2f5f8a", info_tint="rgba(47, 95, 138, .09)"), |
| "dark": dict(ok="#6fbf73", ok_tint="rgba(111, 191, 115, .12)", |
| warn="#e0a445", warn_tint="rgba(224, 164, 69, .12)", |
| bad="#f07167", bad_tint="rgba(240, 113, 103, .12)", |
| info="#7fb0e0", info_tint="rgba(127, 176, 224, .12)"), |
| } |
|
|
|
|
| def _status() -> dict: |
| return _STATUS["dark" if MODE == "dark" else "light"] |
|
|
|
|
| |
| OK = _status()["ok"] |
| WARN = _status()["warn"] |
| BAD = _status()["bad"] |
| INFO = _status()["info"] |
| NEUTRAL = _palette()["neutrals"][0] |
|
|
|
|
| def bar_scale() -> list[list]: |
| """Warm neutral -> accent, for bars coloured by value (both ends stay visible).""" |
| return [[0.0, NEUTRAL], [1.0, ACCENT]] |
|
|
|
|
| def components_css() -> str: |
| """SENTINEL's own components, built on the shared tokens. |
| |
| Class names are the ones ui_kit.py and views/*.py emit. Layout rules for |
| Streamlit's top navigation and bordered containers live here too, since |
| the shared half above targets the sidebar layout. |
| """ |
| s = _status() |
| tint = _rgba(ACCENT, .12) |
| return f""" |
| <style> |
| :root {{ |
| --ok: {s["ok"]}; --ok-tint: {s["ok_tint"]}; |
| --warn: {s["warn"]}; --warn-tint: {s["warn_tint"]}; |
| --bad: {s["bad"]}; --bad-tint: {s["bad_tint"]}; |
| --info: {s["info"]}; --info-tint: {s["info_tint"]}; |
| --neutral: {NEUTRAL}; |
| --display: {FONT_DISPLAY}; --mono: {FONT_MONO}; |
| }} |
| |
| /* ---- shell: top navigation + page width ---------------------------------- */ |
| [data-testid="stMainBlockContainer"] {{ max-width: 1240px; padding-top: 5.25rem; padding-bottom: 3rem; }} |
| [data-testid="stHeader"] {{ border-bottom: 1px solid var(--line); }} |
| [data-testid="stHeaderLogo"], [data-testid="stLogo"] {{ height: 2rem; max-width: 11rem; }} |
| [data-testid="stTopNavLink"] {{ border-radius: 999px; padding-left: .8rem; padding-right: .8rem; transition: background .2s ease; }} |
| [data-testid="stTopNavLink"]:hover {{ background: var(--accent-tint); }} |
| [data-testid="stTopNavLink"]:hover span {{ color: var(--accent) !important; }} |
| [data-testid="stTopNavLink"][aria-current="page"] {{ background: var(--accent-tint); box-shadow: inset 0 0 0 1px var(--accent-line); }} |
| [data-testid="stTopNavLink"][aria-current="page"] span {{ color: var(--accent) !important; font-weight: 600; }} |
| |
| /* hero calls to action: page links as pills, the first one filled */ |
| .st-key-hero_cta {{ gap: .7rem; }} |
| .st-key-hero_cta [data-testid="stPageLink-NavLink"] {{ |
| border: 1px solid var(--line-strong); border-radius: 999px; padding: .55rem 1.15rem; background: var(--card); |
| transition: border-color .25s ease, background .25s ease, transform .25s ease; |
| }} |
| .st-key-hero_cta [data-testid="stPageLink-NavLink"]:hover {{ border-color: var(--accent); background: var(--accent-tint); transform: translateY(-1px); }} |
| .st-key-hero_cta [data-testid="stPageLink-NavLink"] p {{ font-weight: 600; }} |
| .st-key-hero_cta [data-testid="stElementContainer"]:first-child [data-testid="stPageLink-NavLink"] {{ |
| background: var(--accent); border-color: var(--accent); box-shadow: 0 4px 18px {_rgba(ACCENT, .25)}; |
| }} |
| .st-key-hero_cta [data-testid="stElementContainer"]:first-child [data-testid="stPageLink-NavLink"] span, |
| .st-key-hero_cta [data-testid="stElementContainer"]:first-child [data-testid="stPageLink-NavLink"] p {{ color: var(--on-accent) !important; }} |
| .st-key-hero_cta [data-testid="stElementContainer"]:first-child [data-testid="stPageLink-NavLink"]:hover {{ background: var(--accent-strong); }} |
| |
| /* bordered containers read as cards */ |
| .stApp [class*="st-key-card_"] {{ |
| background: var(--card); border-color: var(--line); border-radius: 18px; box-shadow: var(--shadow-sm); |
| padding: 1.1rem 1.25rem 1rem; |
| }} |
| |
| /* ---- shared text pieces ---------------------------------------------------- */ |
| .eyebrow {{ |
| display: inline-flex; align-items: center; gap: .55rem; |
| font-family: var(--mono); font-size: .68rem; font-weight: 600; letter-spacing: .14em; |
| text-transform: uppercase; color: var(--accent); |
| }} |
| .pulse {{ width: 8px; height: 8px; border-radius: 50%; background: var(--accent); position: relative; }} |
| .pulse::after {{ |
| content: ''; position: absolute; inset: -4px; border-radius: 50%; border: 1px solid var(--accent); |
| animation: sentinel-pulse 2.4s ease-out infinite; |
| }} |
| @keyframes sentinel-pulse {{ 0% {{ transform: scale(.6); opacity: .9; }} 100% {{ transform: scale(2.2); opacity: 0; }} }} |
| @media (prefers-reduced-motion: reduce) {{ .pulse::after {{ animation: none; }} }} |
| .stApp .fine {{ color: var(--ink-3); font-size: .84rem; line-height: 1.6; margin: .6rem 0 0; }} |
| .stApp .fine b {{ color: var(--ink-2); font-weight: 600; }} |
| .stApp .prose p {{ color: var(--ink-2); font-size: 1rem; line-height: 1.75; margin: 0 0 1rem; }} |
| .prose b {{ color: var(--ink); font-weight: 600; }} |
| .stApp em {{ font-style: italic; color: var(--accent); }} |
| |
| /* ---- hero (overview) -------------------------------------------------------- */ |
| .hero {{ padding: .5rem 0 .25rem; }} |
| .hero-title {{ |
| font-family: var(--display) !important; font-weight: 600 !important; font-size: clamp(2.6rem, 5.4vw, 4.2rem) !important; |
| line-height: 1.02 !important; letter-spacing: -.035em; color: var(--ink) !important; margin: 1rem 0 1.1rem !important; padding: 0 !important; |
| }} |
| .hero-title em {{ font-weight: 500; }} |
| .stApp .hero-lede {{ color: var(--ink-2); font-size: 1.08rem; line-height: 1.7; max-width: 38rem; margin: 0 0 1.4rem; }} |
| |
| .live-card {{ |
| background: linear-gradient(165deg, {tint}, var(--card) 55%); border: 1px solid var(--line); |
| border-radius: 20px; padding: 1.2rem 1.3rem .6rem; box-shadow: var(--shadow-md); |
| }} |
| .live-head {{ display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: .3rem 1rem; margin-bottom: .6rem; }} |
| .live-head .eyebrow {{ white-space: nowrap; }} |
| .live-tag {{ font-family: var(--mono); font-size: .62rem; letter-spacing: .08em; color: var(--ink-3); text-transform: uppercase; }} |
| .live-row {{ |
| display: grid; grid-template-columns: 1fr auto; gap: .2rem 1rem; align-items: center; |
| padding: .85rem 0 .9rem; border-top: 1px solid var(--line); |
| }} |
| .live-name {{ font-family: var(--display); font-weight: 600; font-size: 1.05rem; color: var(--ink); }} |
| .live-desc {{ color: var(--ink-3); font-size: .8rem; margin-top: .1rem; }} |
| .live-score {{ font-family: var(--display); font-weight: 600; font-size: 1.5rem; text-align: right; line-height: 1; }} |
| .live-score span {{ display: block; font-family: var(--mono); font-size: .58rem; letter-spacing: .14em; text-transform: uppercase; margin-top: .3rem; }} |
| .live-row.is-flag .live-score {{ color: var(--accent); }} |
| .live-row.is-clear .live-score {{ color: var(--ok); }} |
| .live-bar {{ grid-column: 1 / -1; height: 4px; border-radius: 99px; background: var(--line); overflow: hidden; margin-top: .45rem; }} |
| .live-bar i {{ display: block; height: 100%; border-radius: 99px; background: var(--neutral); }} |
| .live-row.is-flag .live-bar i {{ background: linear-gradient(90deg, var(--accent-soft), var(--accent)); }} |
| .live-row.is-clear .live-bar i {{ background: var(--ok); }} |
| |
| /* ---- page + section headers ---------------------------------------------------- */ |
| .ph {{ margin: .25rem 0 1.6rem; }} |
| .ph-title {{ |
| font-family: var(--display) !important; font-weight: 600 !important; font-size: clamp(2.2rem, 4.2vw, 3.1rem) !important; |
| line-height: 1.05 !important; letter-spacing: -.03em; color: var(--ink) !important; margin: .7rem 0 .55rem !important; padding: 0 !important; |
| }} |
| .ph-title em {{ font-weight: 500; }} |
| .stApp .ph-lede {{ color: var(--ink-2); font-size: 1.02rem; line-height: 1.65; max-width: 46rem; margin: 0; }} |
| |
| .sec {{ margin: 3.2rem 0 1.1rem; }} |
| .sec-index {{ |
| display: flex; align-items: center; gap: .8rem; font-family: var(--mono); font-size: .68rem; font-weight: 600; |
| letter-spacing: .14em; text-transform: uppercase; color: var(--accent); |
| }} |
| .sec-index::after {{ content: ''; flex: 1; height: 1px; background: linear-gradient(90deg, var(--line-strong), transparent); }} |
| .sec-title {{ |
| font-family: var(--display) !important; font-weight: 600 !important; font-size: clamp(1.5rem, 2.6vw, 1.95rem) !important; |
| letter-spacing: -.02em; color: var(--ink) !important; margin: .55rem 0 .35rem !important; padding: 0 !important; |
| }} |
| .stApp .sec-sub {{ color: var(--ink-2); font-size: .95rem; line-height: 1.6; max-width: 52rem; margin: 0; }} |
| |
| .card-head {{ margin: .1rem 0 .5rem; }} |
| .card-title {{ font-family: var(--display); font-weight: 600; font-size: 1.12rem; color: var(--ink); margin-top: .3rem; letter-spacing: -.01em; }} |
| |
| /* ---- stat tiles ---------------------------------------------------------------------- */ |
| .stat-grid {{ display: grid; grid-template-columns: repeat(var(--cols, 4), minmax(0, 1fr)); gap: 14px; margin: 1.6rem 0 1.1rem; }} |
| .stat {{ |
| position: relative; overflow: hidden; background: var(--card); border: 1px solid var(--line); |
| border-radius: 16px; padding: 1.05rem 1.15rem 1.1rem; box-shadow: var(--shadow-sm); |
| transition: border-color .3s ease, transform .3s ease; |
| }} |
| .stat::before {{ |
| content: ''; position: absolute; top: 0; left: 0; width: 46%; height: 2px; |
| background: linear-gradient(90deg, var(--accent), transparent); |
| }} |
| .stat-ink::before {{ background: linear-gradient(90deg, var(--line-strong), transparent); }} |
| .stat:hover {{ border-color: var(--line-strong); transform: translateY(-2px); }} |
| .stat-label {{ font-family: var(--mono); font-size: .64rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }} |
| .stat-value {{ |
| font-family: var(--display); font-weight: 600; font-size: clamp(1.7rem, 1.2rem + 1.2vw, 2.3rem); |
| line-height: 1.1; color: var(--accent); margin-top: .45rem; letter-spacing: -.02em; font-variant-numeric: tabular-nums; |
| }} |
| .stat-ink .stat-value {{ color: var(--ink); }} |
| .stat-ok .stat-value {{ color: var(--ok); }} |
| .stat-unit {{ font-family: var(--mono); font-size: .78rem; font-weight: 500; color: var(--ink-3); margin-left: .35rem; letter-spacing: .02em; }} |
| .stat-foot {{ color: var(--ink-2); font-size: .82rem; line-height: 1.5; margin-top: .4rem; }} |
| |
| /* ---- callouts ------------------------------------------------------------------------- */ |
| .callout {{ |
| background: var(--paper-alt); border: 1px solid var(--line); border-left: 3px solid var(--line-strong); |
| border-radius: 12px; padding: .9rem 1.1rem; margin: .6rem 0 1rem; |
| }} |
| .callout-title {{ font-family: var(--mono); font-size: .64rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; color: var(--accent); margin-bottom: .35rem; }} |
| .callout-body {{ color: var(--ink-2); font-size: .92rem; line-height: 1.65; }} |
| .callout-body b {{ color: var(--ink); font-weight: 600; }} |
| .callout-info {{ border-left-color: var(--accent); }} |
| .callout-warn {{ border-left-color: var(--warn); background: var(--warn-tint); }} |
| .callout-bad {{ border-left-color: var(--bad); background: var(--bad-tint); }} |
| |
| /* ---- the loop (overview) ------------------------------------------------------------------ */ |
| .flow {{ list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }} |
| .stApp .flow > li.flow-step {{ |
| position: relative; background: var(--card); border: 1px solid var(--line); border-radius: 16px; |
| padding: 1rem 1.1rem 1.1rem; margin: 0; box-shadow: var(--shadow-sm); |
| }} |
| .flow-step::after {{ |
| content: '→'; position: absolute; right: -13px; top: 50%; transform: translateY(-50%); |
| font-family: var(--mono); font-size: .8rem; color: var(--line-strong); z-index: 1; |
| }} |
| .flow-step:nth-child(4n)::after, .flow-step:last-child::after {{ content: none; }} |
| .flow-step.is-loop {{ border-color: var(--accent-line); background: linear-gradient(160deg, {tint}, var(--card) 70%); }} |
| .flow-n {{ font-family: var(--mono); font-size: .66rem; font-weight: 600; color: var(--accent); letter-spacing: .1em; }} |
| .flow-t {{ display: block; font-family: var(--display); font-weight: 600; font-size: 1.08rem; color: var(--ink); margin: .35rem 0 .3rem; }} |
| .flow-d {{ display: block; color: var(--ink-2); font-size: .85rem; line-height: 1.55; }} |
| .flow-note {{ font-family: var(--mono); font-size: .66rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); margin-top: .8rem; }} |
| |
| /* ---- specialist vs LLM (overview) ------------------------------------------------------------ */ |
| .vs {{ background: var(--card); border: 1px solid var(--line); border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-sm); }} |
| .vs-row {{ |
| display: grid; grid-template-columns: 1.25fr 2fr .8fr .9fr; gap: 1.2rem; align-items: center; |
| padding: 1rem 1.3rem; border-top: 1px solid var(--line); |
| }} |
| .vs-row:first-child {{ border-top: 0; }} |
| .vs-row.is-champ {{ background: {_rgba(ACCENT, .07)}; }} |
| .vs-name {{ font-family: var(--display); font-weight: 600; font-size: 1.02rem; color: var(--ink); }} |
| .vs-row.is-champ .vs-name {{ color: var(--accent); }} |
| .vs-metric {{ display: flex; align-items: center; gap: .8rem; }} |
| .vs-metric span {{ font-family: var(--mono); font-size: .72rem; color: var(--ink-2); white-space: nowrap; }} |
| .vs-bar {{ flex: 1; height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }} |
| .vs-bar i {{ display: block; height: 100%; border-radius: 99px; background: var(--neutral); }} |
| .vs-row.is-champ .vs-bar i {{ background: linear-gradient(90deg, var(--accent-soft), var(--accent)); }} |
| .vs-num b {{ display: block; font-family: var(--display); font-weight: 600; font-size: 1.1rem; color: var(--ink); font-variant-numeric: tabular-nums; }} |
| .vs-num span {{ font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }} |
| |
| /* ---- chips + footer -------------------------------------------------------------------------- */ |
| .chips {{ display: flex; flex-wrap: wrap; gap: 8px; }} |
| .chip {{ |
| font-family: var(--mono); font-size: .7rem; font-weight: 500; color: var(--ink-2); background: var(--card); |
| border: 1px solid var(--line); border-radius: 999px; padding: 6px 13px; |
| }} |
| .pg-foot {{ |
| display: flex; justify-content: space-between; align-items: center; gap: 1rem; flex-wrap: wrap; |
| border-top: 1px solid var(--line); margin-top: 3.5rem; padding: 1.2rem 0 .3rem; |
| font-family: var(--mono); font-size: .62rem; font-weight: 500; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); |
| }} |
| .pg-foot code {{ font-size: .95em; }} |
| .pg-foot a {{ color: var(--accent) !important; text-decoration: none; }} |
| .pg-foot a:hover {{ color: var(--accent-strong) !important; }} |
| |
| /* ---- verdict (score) ------------------------------------------------------------------------ */ |
| .verdict {{ border: 1px solid var(--line); border-radius: 20px; padding: 1.35rem 1.5rem 1.25rem; box-shadow: var(--shadow-md); }} |
| .verdict.is-flag {{ background: linear-gradient(160deg, {_rgba(ACCENT, .18)}, var(--card) 62%); border-color: var(--accent-line); }} |
| .verdict.is-clear {{ background: linear-gradient(160deg, {_rgba(s["ok"], .14)}, var(--card) 62%); border-color: {_rgba(s["ok"], .3)}; }} |
| .v-top {{ display: flex; justify-content: space-between; align-items: center; gap: 1rem; }} |
| .v-pill {{ |
| font-family: var(--mono); font-size: .62rem; font-weight: 600; letter-spacing: .13em; text-transform: uppercase; |
| padding: 5px 12px; border-radius: 999px; |
| }} |
| .is-flag .v-pill {{ background: var(--accent); color: var(--on-accent); }} |
| .is-clear .v-pill {{ background: var(--ok-tint); color: var(--ok); border: 1px solid {_rgba(s["ok"], .35)}; }} |
| .v-prob {{ |
| font-family: var(--display); font-weight: 600; font-size: clamp(3.6rem, 7vw, 5.4rem); line-height: 1; |
| letter-spacing: -.04em; margin: .9rem 0 1.1rem; font-variant-numeric: tabular-nums; |
| }} |
| .is-flag .v-prob {{ color: var(--accent); }} |
| .is-clear .v-prob {{ color: var(--ok); }} |
| .v-prob span {{ font-size: .42em; color: var(--ink-3); margin-left: .15rem; letter-spacing: 0; }} |
| .meter {{ position: relative; height: 10px; border-radius: 99px; background: var(--line); }} |
| .meter i {{ position: absolute; left: 0; top: 0; bottom: 0; border-radius: 99px; transition: width .4s ease; }} |
| .is-flag .meter i {{ background: linear-gradient(90deg, var(--neutral), var(--accent)); }} |
| .is-clear .meter i {{ background: var(--ok); }} |
| .meter b {{ position: absolute; top: -6px; width: 2px; height: 22px; margin-left: -1px; background: var(--ink); border-radius: 2px; }} |
| .v-scale {{ display: flex; justify-content: space-between; font-family: var(--mono); font-size: .6rem; color: var(--ink-3); margin-top: .55rem; letter-spacing: .04em; }} |
| .stApp .v-note {{ color: var(--ink-2); font-size: .9rem; line-height: 1.6; margin: 1rem 0 0; }} |
| |
| .signals {{ background: var(--card); border: 1px solid var(--line); border-radius: 18px; padding: 1.1rem 1.3rem 1rem; margin-top: 1rem; box-shadow: var(--shadow-sm); }} |
| .signals dl {{ display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .9rem 1.2rem; margin: .8rem 0 0; }} |
| .signals dt {{ font-family: var(--mono); font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }} |
| .signals dd {{ font-family: var(--display); font-weight: 600; font-size: 1.22rem; color: var(--ink); margin: .2rem 0 .1rem; font-variant-numeric: tabular-nums; }} |
| .signals small {{ color: var(--ink-3); font-size: .74rem; }} |
| |
| /* ---- confusion matrix (model) ------------------------------------------------------------------ */ |
| .cm {{ display: grid; grid-template-columns: auto 1fr 1fr; gap: 8px; align-items: stretch; margin-top: .4rem; }} |
| .cm-axis {{ grid-column: 1 / -1; text-align: right; font-family: var(--mono); font-size: .58rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }} |
| .cm-head {{ font-family: var(--mono); font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); text-align: center; }} |
| .cm-side {{ display: flex; align-items: center; justify-content: flex-end; padding-right: .3rem; font-family: var(--mono); font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); }} |
| .cm-cell {{ border: 1px solid var(--line); border-radius: 14px; padding: .85rem .95rem; background: var(--paper-alt); }} |
| .cm-cell b {{ display: block; font-family: var(--display); font-weight: 600; font-size: 1.45rem; color: var(--ink); font-variant-numeric: tabular-nums; }} |
| .cm-cell span {{ display: block; color: var(--ink); font-size: .82rem; font-weight: 500; margin-top: .15rem; }} |
| .cm-cell small {{ color: var(--ink-3); font-size: .74rem; }} |
| .cm-tp {{ background: var(--ok-tint); border-color: {_rgba(s["ok"], .3)}; }} |
| .cm-tp b {{ color: var(--ok); }} |
| .cm-fn {{ background: var(--bad-tint); border-color: {_rgba(s["bad"], .3)}; }} |
| .cm-fn b {{ color: var(--bad); }} |
| .cm-fp {{ background: var(--warn-tint); border-color: {_rgba(s["warn"], .28)}; }} |
| .cm-fp b {{ color: var(--warn); }} |
| |
| /* ---- drift days, retrain events, scoreboard (ops) ------------------------------------------------ */ |
| .days {{ display: grid; grid-template-columns: repeat(30, minmax(0, 1fr)); gap: 4px; margin: .4rem 0 0; }} |
| .day {{ height: 40px; border-radius: 8px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 5px; border: 1px solid var(--line); background: var(--paper-alt); }} |
| .day span {{ font-family: var(--mono); font-size: .58rem; color: var(--ink-3); }} |
| .day-hit {{ background: var(--accent); border-color: var(--accent); }} |
| .day-hit span {{ color: var(--on-accent); font-weight: 600; }} |
| .day-miss {{ background: var(--bad-tint); border: 1px dashed var(--bad); }} |
| .day-false {{ background: var(--warn-tint); border-color: var(--warn); }} |
| .days-legend {{ display: flex; flex-wrap: wrap; gap: .5rem 1.3rem; margin: .7rem 0 1.1rem; font-family: var(--mono); font-size: .6rem; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-3); }} |
| .days-legend span {{ display: inline-flex; align-items: center; gap: .45rem; }} |
| .days-legend i {{ width: 11px; height: 11px; border-radius: 3px; border: 1px solid var(--line); background: var(--paper-alt); }} |
| .days-legend i.day-hit {{ background: var(--accent); border-color: var(--accent); }} |
| .days-legend i.day-miss {{ background: var(--bad-tint); border: 1px dashed var(--bad); }} |
| .days-legend i.day-false {{ background: var(--warn-tint); border-color: var(--warn); }} |
| |
| .events {{ display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 1rem; }} |
| .event {{ background: var(--card); border: 1px solid var(--line); border-radius: 16px; padding: 1rem 1.15rem .9rem; box-shadow: var(--shadow-sm); }} |
| .event-top {{ display: flex; justify-content: space-between; align-items: center; margin-bottom: .8rem; }} |
| .event-pill {{ font-family: var(--mono); font-size: .6rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; }} |
| .event-pill.ok {{ background: var(--ok-tint); color: var(--ok); border: 1px solid {_rgba(s["ok"], .3)}; }} |
| .event-pill.bad {{ background: var(--bad-tint); color: var(--bad); border: 1px solid {_rgba(s["bad"], .3)}; }} |
| .event-row {{ display: grid; grid-template-columns: 3.4rem 1fr 3.2rem; gap: .7rem; align-items: center; margin: .35rem 0; }} |
| .event-row span {{ font-family: var(--mono); font-size: .6rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }} |
| .event-row b {{ font-family: var(--mono); font-size: .8rem; font-weight: 600; color: var(--ink); text-align: right; }} |
| .event-bar {{ height: 8px; border-radius: 99px; background: var(--line); overflow: hidden; }} |
| .event-bar i {{ display: block; height: 100%; border-radius: 99px; background: var(--neutral); }} |
| .event-bar.is-new i {{ background: linear-gradient(90deg, var(--accent-soft), var(--accent)); }} |
| .event-foot {{ display: flex; justify-content: space-between; align-items: baseline; gap: .8rem; border-top: 1px solid var(--line); margin-top: .8rem; padding-top: .7rem; }} |
| .event-foot span {{ color: var(--ink-3); font-size: .76rem; }} |
| .event-foot b {{ font-family: var(--display); font-weight: 600; font-size: 1.2rem; color: var(--accent); white-space: nowrap; }} |
| |
| .board {{ width: 100%; border-collapse: separate; border-spacing: 0; background: var(--card); border: 1px solid var(--line); border-radius: 16px; overflow: hidden; box-shadow: var(--shadow-sm); }} |
| .board th {{ font-family: var(--mono); font-size: .6rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-3); background: var(--paper-alt); padding: .75rem .95rem; text-align: left; border: 0; }} |
| .board td {{ padding: .8rem .95rem; border: 0; border-top: 1px solid var(--line); color: var(--ink-2); font-size: .88rem; line-height: 1.45; vertical-align: top; }} |
| .board .num {{ text-align: right; font-family: var(--mono); font-size: .8rem; font-variant-numeric: tabular-nums; white-space: nowrap; }} |
| .board td.delta {{ color: var(--ok); }} |
| .board .layer {{ display: inline-block; font-family: var(--mono); font-size: .6rem; font-weight: 600; color: var(--accent); background: var(--accent-tint); border: 1px solid var(--accent-line); border-radius: 6px; padding: 1px 6px; margin-right: .55rem; }} |
| .board tr.is-champ td {{ color: var(--ink); background: {_rgba(ACCENT, .07)}; }} |
| .board tr.is-champ td:first-child {{ color: var(--accent); font-weight: 600; }} |
| |
| /* ---- responsive --------------------------------------------------------------------------------- */ |
| @media (max-width: 900px) {{ |
| .stat-grid {{ grid-template-columns: repeat(2, minmax(0, 1fr)); }} |
| .flow {{ grid-template-columns: repeat(2, minmax(0, 1fr)); }} |
| .flow-step::after {{ content: none; }} |
| .events {{ grid-template-columns: 1fr; }} |
| .days {{ grid-template-columns: repeat(15, minmax(0, 1fr)); }} |
| .vs-row {{ grid-template-columns: 1fr 1fr; }} |
| .vs-metric {{ grid-column: 1 / -1; order: 3; }} |
| }} |
| @media (max-width: 520px) {{ |
| .stat-grid, .flow {{ grid-template-columns: 1fr; }} |
| .days {{ grid-template-columns: repeat(10, minmax(0, 1fr)); }} |
| .signals dl {{ grid-template-columns: 1fr; }} |
| [data-testid="stMainBlockContainer"] {{ padding-left: 1rem; padding-right: 1rem; }} |
| }} |
| </style> |
| """ |
|
|
|
|
| def apply_theme() -> None: |
| st.markdown(theme_css(), unsafe_allow_html=True) |
| st.markdown(components_css(), unsafe_allow_html=True) |
|
|
|
|
| def eyebrow(text: str) -> None: |
| """Small mono uppercase label above a heading, like mark.dev's status badge.""" |
| st.markdown( |
| f"<div style=\"font-family:{FONT_MONO};font-size:.68rem;font-weight:600;letter-spacing:.14em;" |
| f"text-transform:uppercase;color:{ACCENT};margin-bottom:.35rem\">{text}</div>", |
| unsafe_allow_html=True, |
| ) |
|
|
