/* ── Constellation app styles ───────────────────────────────────── Design system inherited from tenshu.ai (see DESIGN.md). tenshu.ai design-system CSS is VENDORED at static/styles/styles.css (a 20 Jul copy of the marketing site's sheet) and loaded via base.html. This file only contains app-specific overrides and auth page styles. ──────────────────────────────────────────────────────────────── */ /* ── The one :root (8 Aug; the whole palette since 25 Aug) ────────── EVERY colour the workspace paints is a token defined here — the neutrals (DESIGN.md: true black, iron, charcoal — no blue cast), the semantic inks (cheaper/dearer, info, warm, verdict gold, purple), the greys of text, and the *-rgb triples the alpha washes are mixed from. builder.css never writes a literal; a theme is a second definition of these names and nothing else. The brand set (--black/--gold/…) rides in from the vendored styles.css. Dark is the house default. Light follows the OS (prefers-color-scheme) unless the user chose — from User.theme, stamped server-side so there is never a flash. Print is light. All three light blocks are the SAME values, generated together (see the light block below) — never edit one alone. */ :root { color-scheme: dark; /* THE TWO CONTROL HEIGHTS (Doug, 28 Aug). One row of the main toolbar carried five — 20, 24, 30, 32 and 33 — none of them wrong on its own and no rule joining them up. There are two now, and the rule reads off the page: 32 is something you OPERATE, 20 is something that LABELS. Anything new picks one and says which. These are sizes, not colours: they do not vary by theme, so unlike every value below they live here once and are NOT mirrored into the light blocks. */ --control-h: 32px; --chip-h: 20px; --bg: #000000; --bg-rgb: 0,0,0; --surface: #181818; --surface-rgb: 24,24,24; --surface-hover: #202020; --border: #313131; --text: #f5f5f5; --text-soft: #c9c9c9; --muted: #7d7d7d; --muted-2: #a2a2a2; --muted-dim: #666666; --ink: #ffffff; --ink-rgb: 255,255,255; /* the theme's own white: washes, hot strokes, the selection ring */ --on-accent: #101010; /* ink on a filled accent/verdict chip */ --accent: #ffc000; --accent-rgb: 255,192,0; --accent-dim: rgba(255,192,0,0.12); --green: #78c49a; --green-rgb: 120,196,154; /* cheaper / good */ --green-bright: #6fcf8f; --green-deep: #4a9a6a; --mint: #9fdcc0; --bad: #e05050; --bad-rgb: 224,80,80; /* dearer / bad */ --bad-soft: #ec8a8a; --red: #e57373; --amber: #f0b75a; --orange: #e0a050; --orange-rgb: 224,160,80; --gold-soft: #e0c06b; --gold-rgb: 224,180,74; --gold-verdict: #e0b44a; --info: #3f8ae0; --info-rgb: 107,159,212; --info-soft: #8fb6e0; --info-deep: #6b9fd4; --warm: #d4916b; --warm-rgb: 212,145,107; --purple: #b48ede; --purple-rgb: 180,142,222; --teal: #6bd4c4; --silver: #cfd6e4; --gold-deep: #8f6d1d; --palette-1: #b48ede; --palette-2: #5fb3a1; --palette-3: #d97fa6; --palette-4: #8fa65f; --palette-5: #c78a5b; --palette-6: #7f9fd9; --palette-7: #a6d97f; --palette-8: #d9c47f; --nav-plate: #000000; --nav-ink: #ffffff; /* the masthead lockup: black plate, white letterforms */ --legible-toward: #b9c6da; /* retailer brand colours mix toward this to read on the canvas */ --hero-opacity: 0.10; /* the app shell's faint hero texture — off on paper */ } /* ── LIGHT — the paper terminal (values from Doug's #237 v3, 23 Aug: "dark is the instrument glowing in a dark room; light is the same instrument printed on good paper" — warm paper, a gold that holds on white, ink-black rules). One block, three doors: the OS preference, the user's override, and print. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg: #f3f1eb; --bg-rgb: 243,241,235; --surface: #ffffff; --surface-rgb: 255,255,255; --surface-hover: #f6f4ef; --border: #cfccc2; --text: #14141a; --text-soft: #3a3a40; --muted: #5c5c64; --muted-2: #6e6e78; --muted-dim: #8a8a90; --ink: #14141a; --ink-rgb: 20,20,26; --on-accent: #ffffff; --accent: #b58500; --accent-rgb: 181,133,0; --accent-dim: rgba(181,133,0,0.14); --green: #2f8a5b; --green-rgb: 47,138,91; --green-bright: #2f8a5b; --green-deep: #23663f; --mint: #2f8a5b; --bad: #c73e3e; --bad-rgb: 199,62,62; --bad-soft: #b35959; --red: #c94f4f; --amber: #9a6b00; --orange: #b7731c; --orange-rgb: 183,115,28; --gold-soft: #9a7a1f; --gold-rgb: 154,122,31; --gold-verdict: #9a7a1f; --info: #2a6fc4; --info-rgb: 42,111,196; --info-soft: #3d78b8; --info-deep: #2f5f9a; --warm: #b5683f; --warm-rgb: 181,104,63; --purple: #7d55b8; --purple-rgb: 125,85,184; --teal: #1f8f82; --silver: #6b7280; --gold-deep: #6b5214; --palette-1: #7d55b8; --palette-2: #2f7f70; --palette-3: #b04f7a; --palette-4: #5f7a2a; --palette-5: #9a5a2e; --palette-6: #3f63b0; --palette-7: #4f8a2a; --palette-8: #8a7a2a; --nav-plate: transparent; --nav-ink: #14141a; --legible-toward: #2b2f36; --hero-opacity: 0; } } :root[data-theme="light"] { color-scheme: light; --bg: #f3f1eb; --bg-rgb: 243,241,235; --surface: #ffffff; --surface-rgb: 255,255,255; --surface-hover: #f6f4ef; --border: #cfccc2; --text: #14141a; --text-soft: #3a3a40; --muted: #5c5c64; --muted-2: #6e6e78; --muted-dim: #8a8a90; --ink: #14141a; --ink-rgb: 20,20,26; --on-accent: #ffffff; --accent: #b58500; --accent-rgb: 181,133,0; --accent-dim: rgba(181,133,0,0.14); --green: #2f8a5b; --green-rgb: 47,138,91; --green-bright: #2f8a5b; --green-deep: #23663f; --mint: #2f8a5b; --bad: #c73e3e; --bad-rgb: 199,62,62; --bad-soft: #b35959; --red: #c94f4f; --amber: #9a6b00; --orange: #b7731c; --orange-rgb: 183,115,28; --gold-soft: #9a7a1f; --gold-rgb: 154,122,31; --gold-verdict: #9a7a1f; --info: #2a6fc4; --info-rgb: 42,111,196; --info-soft: #3d78b8; --info-deep: #2f5f9a; --warm: #b5683f; --warm-rgb: 181,104,63; --purple: #7d55b8; --purple-rgb: 125,85,184; --teal: #1f8f82; --silver: #6b7280; --gold-deep: #6b5214; --palette-1: #7d55b8; --palette-2: #2f7f70; --palette-3: #b04f7a; --palette-4: #5f7a2a; --palette-5: #9a5a2e; --palette-6: #3f63b0; --palette-7: #4f8a2a; --palette-8: #8a7a2a; --nav-plate: transparent; --nav-ink: #14141a; --legible-toward: #2b2f36; --hero-opacity: 0; } /* THE SHELL WEARS THE TOKENS (25 Aug): the vendored brand sheet paints html/body brand-black and floats the hero texture; the workspace pages already re-ink body through builder.css, the app-shell pages (categories, profile, training) do it here. The nav follows the theme too (Alex, 25 Aug: paper header, dark lockup) — see THE MASTHEAD below. */ html, body { background: var(--bg); color: var(--text); } body::before { opacity: var(--hero-opacity); } /* ── Auth pages (sign in / sign up) ──────────────────────────────── */ .auth-page { min-height: 100vh; padding: 6rem 1rem 2rem; display: flex; justify-content: center; } .auth-card { width: 100%; max-width: 420px; } .auth-panel { background: var(--surface); border: 1px solid rgba(var(--ink-rgb), 0.06); padding: 2rem; } .auth-panel .lockup-tagline { width: 220px; height: auto; display: block; margin: 0 auto 8px; } .auth-panel-title { font-family: 'Archivo Narrow', 'Archivo', sans-serif; font-size: 1.5rem; font-weight: 600; text-transform: uppercase; letter-spacing: 1px; color: var(--text); margin-bottom: 1.25rem; } .auth-panel-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } /* Dark-themed form controls */ .auth-page .form-control, .auth-panel .form-control, .auth-page input[type="text"], .auth-page input[type="email"], .auth-page input[type="password"], .auth-panel input[type="text"], .auth-panel input[type="email"], .auth-panel input[type="password"] { background: var(--bg); border: 1px solid rgba(var(--ink-rgb), 0.1); color: var(--text); padding: 0.6rem 0.85rem; font-family: 'Archivo', sans-serif; font-size: 14px; width: 100%; transition: border-color 0.15s ease; } .auth-page .form-control:focus, .auth-panel .form-control:focus, .auth-page input:focus, .auth-panel input:focus { background: var(--bg); border-color: var(--accent); color: var(--text); outline: none; box-shadow: none; } .auth-page .form-control::placeholder, .auth-panel .form-control::placeholder, .auth-page input::placeholder, .auth-panel input::placeholder { color: var(--muted); } .auth-page label, .auth-panel label { color: var(--muted); font-family: 'Archivo Narrow', 'Archivo', sans-serif; font-size: 12px; font-weight: 400; letter-spacing: 0.96px; text-transform: uppercase; margin-bottom: 0.35rem; display: block; } .auth-page .form-text, .auth-panel .form-text { color: var(--muted); font-size: 12px; } .auth-page .form-check-label, .auth-panel .form-check-label { color: var(--muted); text-transform: none; font-size: 14px; } /* Crispy forms overrides */ .auth-page .textinput, .auth-page .textInput, .auth-page .passwordinput, .auth-page .emailinput, .auth-panel .textinput, .auth-panel .textInput, .auth-panel .passwordinput, .auth-panel .emailinput { background: var(--bg) !important; border: 1px solid rgba(var(--ink-rgb), 0.1) !important; color: var(--text) !important; } .auth-page .textinput:focus, .auth-page .textInput:focus, .auth-page .passwordinput:focus, .auth-page .emailinput:focus, .auth-panel .textinput:focus, .auth-panel .textInput:focus, .auth-panel .passwordinput:focus, .auth-panel .emailinput:focus { border-color: var(--accent) !important; box-shadow: none !important; } /* Auth submit button — gold CTA */ .auth-page .btn-primary, .auth-panel .btn-primary, .auth-page button[type="submit"], .auth-panel button[type="submit"] { background: var(--accent); color: var(--bg); border: none; padding: 10px 20px; font-family: 'Archivo', sans-serif; font-size: 12px; font-weight: 400; letter-spacing: 0.96px; text-transform: uppercase; cursor: pointer; transition: background 0.15s ease; width: 100%; } .auth-page .btn-primary:hover, .auth-panel .btn-primary:hover, .auth-page button[type="submit"]:hover, .auth-panel button[type="submit"]:hover { background: #917300; } /* ── Google OAuth button ─────────────────────────────────────────── */ .btn-google { display: inline-flex; align-items: center; justify-content: center; gap: 0.65rem; background: transparent; color: var(--text); border: 1px solid rgba(var(--ink-rgb), 0.15); padding: 10px 20px; font-family: 'Archivo', sans-serif; font-size: 14px; font-weight: 500; text-decoration: none; transition: border-color 0.15s ease, color 0.15s ease; width: 100%; } .btn-google:hover { border-color: rgba(var(--ink-rgb), 0.4); color: var(--text); text-decoration: none; } .btn-google .google-logo { flex-shrink: 0; } .auth-divider { display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0; color: var(--muted); font-size: 11px; text-transform: uppercase; letter-spacing: 0.96px; } .auth-divider::before, .auth-divider::after { content: ""; flex: 1; height: 1px; background: rgba(var(--ink-rgb), 0.1); } /* ── Links ───────────────────────────────────────────────────────── */ .auth-page a, .auth-panel a { color: var(--muted); transition: color 0.15s ease; } .auth-page a:hover, .auth-panel a:hover { color: var(--text); } /* ── Alerts ──────────────────────────────────────────────────────── */ .alert-error { color: #fca5a5; background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.2); padding: 12px 16px; font-size: 14px; } /* ── Breadcrumb (builder toolbar) ────────────────────────────────── */ /* Toolbar uses align-items:baseline; the breadcrumb is plain inline text * that baseline-aligns with every other text child (dropdown value, tab * buttons, mode pills) without needing its own height/padding/line-height. */ .breadcrumb { font-family: 'DM Sans', sans-serif; font-size: 14px; color: var(--text); } /* Asymmetric margin: the toolbar's own 16px gap already separates "/" * from the dropdown on the right, so we just need breathing room on the * left to balance visually. */ .breadcrumb__sep { margin: 0 0 0 12px; color: var(--muted); } /* (Tom Select alignment override lives in builder.css so it loads after the * TS CDN stylesheet and actually wins specificity.) */ .breadcrumb a { color: var(--text); text-decoration: none; transition: color 0.15s; font-weight: 500; } .breadcrumb a:hover { color: var(--accent); } .breadcrumb__sep { color: var(--muted); opacity: 0.6; font-size: 16px; } /* The live-text wordmark (24 Jul, navbar went SVG mark + wordmark) is a * class only this app knows — the vendored tenshu.ai sheet colors its * siblings (nav__logo-text) but not this one, so without a color it fell * to the browser's default link blue. */ /* THE MASTHEAD FOLLOWS THE THEME (Alex, 25 Aug): paper header, dark lockup; the brand sheet's black-and-white nav is re-inked here. */ .nav { background: var(--bg); border-bottom-color: var(--border); } .nav__logo-mark, .nav__logo-text, .nav__logo-word { color: var(--text); } /* The inline lockup's size lives with the shell, not the workspace (Alex, 27 Aug: no logo on the categories page — builder.css alone sized it, so every app-shell page drew a zero-height svg). */ .nav .nav__logo-lockup { height: 26px; width: auto; display: block; } .nav__link { color: var(--muted); } .nav__link:hover { color: var(--text); } /* The wordmark holds one line — the Categories link (11 Aug) widened * the right group and space-between squeezed "PET CIRCLE" into a wrap. */ .nav__logo { flex-shrink: 0; } .nav__logo-text { white-space: nowrap; } /* ── Base layout shell ───────────────────────────────────────────── */ .content--with-nav { padding-top: 64px; } /* ── Appearance — the profile page's System / Light / Dark pick ────── */ .theme-pick-label { font: 500 10px 'DM Mono', monospace; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin-bottom: 6px; } .theme-pick-row { display: inline-flex; border: 1px solid var(--border); border-radius: 999px; overflow: hidden; } .theme-pick-btn { background: none; border: 0; color: var(--muted); font: 500 12px 'DM Sans', sans-serif; padding: 5px 14px; cursor: pointer; } .theme-pick-btn + .theme-pick-btn { border-left: 1px solid var(--border); } .theme-pick-btn:hover { color: var(--text); } .theme-pick-btn.on { background: var(--accent); color: var(--on-accent); } /* ── The categories page (folded in from categories.css, 27 Aug: one shell sheet; a page sheet that drifted from the tokens is how the nav stayed black here) ─────────────────────────────────────────── */ /* Tokens live in project.css — the one :root for every page (8 Aug). */ body { background: var(--bg) !important; color: var(--text); font-family: 'DM Sans', sans-serif; } .nav { background: rgba(var(--bg-rgb),0.94) !important; backdrop-filter: blur(12px); border-bottom: 1px solid var(--border) !important; } .content { background: var(--bg) !important; padding-top: 64px !important; min-height: 100vh; } .cat-shell { max-width: 1280px; margin: 0 auto; padding: 32px 40px 64px; } .cat-header { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; margin-bottom: 24px; flex-wrap: wrap; } .cat-title { font-size: 24px; font-weight: 600; letter-spacing: -0.01em; margin: 0; } .cat-subtitle { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 4px; } .cat-filter { display: inline-flex; gap: 2px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 3px; } .cat-filter button { font-family: 'DM Mono', monospace; font-size: 11px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); background: transparent; border: none; padding: 7px 14px; border-radius: 5px; cursor: pointer; transition: all 0.15s; } .cat-filter button:hover { color: var(--text); } .cat-filter button.active { background: var(--accent-dim); color: var(--accent); } .cat-filter .count { opacity: 0.55; margin-left: 5px; } .card[hidden] { display: none !important; } /* Section heading + grouping. Favourites section auto-hides when empty (see .cat-section--empty) so a heading never floats alone above zero cards. */ .cat-section { margin-bottom: 32px; } .cat-section--empty { display: none; } .cat-section__heading { font-family: 'DM Mono', monospace; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 12px; font-weight: 600; } .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 16px; } .card { position: relative; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 20px; display: flex; flex-direction: column; gap: 14px; text-decoration: none; color: inherit; transition: border-color 0.15s, background 0.15s, transform 0.15s; } /* Favourite star — top-right of each card. Stops link navigation via JS so clicking the star doesn't open the category. */ .fav-toggle { position: absolute; top: 10px; right: 10px; width: 28px; height: 28px; padding: 0; background: transparent; border: none; cursor: pointer; font-size: 18px; line-height: 1; color: rgba(var(--ink-rgb),0.18); transition: color 0.15s, transform 0.1s; display: flex; align-items: center; justify-content: center; } /* Hovering an unfavourited star previews the action with a darker yellow, distinct from the bright accent of an actual favourite — so the two states never look identical at a glance. */ .fav-toggle:hover { color: var(--gold-deep); transform: scale(1.1); } .fav-toggle--on { color: var(--accent); } .fav-toggle--on:hover { color: rgba(var(--gold-rgb),0.7); } /* Pad the card head so the star doesn't sit on top of the title. */ .card__head { padding-right: 32px; } .card:hover { border-color: rgba(var(--gold-rgb),0.4); background: var(--surface-hover); transform: translateY(-1px); } /* Cards are elements; lock the title color across link states so it doesn't fall back to the browser's default blue on hover/focus/visited. */ .card, .card:hover, .card:visited, .card:active, .card:focus { color: var(--text); } .card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .card__name { font-size: 15px; font-weight: 600; letter-spacing: -0.005em; margin: 0; line-height: 1.3; flex: 1; min-width: 0; color: var(--text); } /* The category's annual ledger sales — the number the cards rank by. */ .card__sales { font-family: 'DM Mono', monospace; font-size: 12px; color: var(--text); white-space: nowrap; } .card__sales i { font-style: normal; font-size: 9px; color: var(--muted); } .pill { font-family: 'DM Mono', monospace; font-size: 9px; text-transform: uppercase; letter-spacing: 0.08em; padding: 3px 8px; border-radius: 999px; white-space: nowrap; flex-shrink: 0; } .pill--published { background: rgba(var(--green-rgb),0.12); color: var(--green); } .pill--none { background: rgba(var(--ink-rgb),0.04); color: var(--muted); } .meta { display: flex; align-items: center; gap: 12px; font-family: 'DM Mono', monospace; font-size: 10px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.06em; } .meta__n { color: var(--text); } .bars { display: flex; flex-direction: column; gap: 6px; } .bar { display: flex; align-items: center; gap: 8px; font-family: 'DM Mono', monospace; font-size: 10px; } .bar__name { color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; min-width: 92px; } .bar__track { flex: 1; height: 4px; background: rgba(var(--ink-rgb),0.05); border-radius: 2px; overflow: hidden; position: relative; } .bar__fill { position: absolute; left: 0; top: 0; bottom: 0; background: rgba(var(--ink-rgb),0.18); border-radius: 2px; } .bar__n { color: var(--text); min-width: 44px; text-align: right; } .bar--pin .bar__name { color: var(--accent); font-weight: 500; } .bar--pin .bar__fill { background: var(--accent); } .bar--zero .bar__n { color: var(--muted); } .chips { display: flex; gap: 6px; flex-wrap: wrap; } .chip { font-family: 'DM Mono', monospace; font-size: 10px; padding: 3px 8px; border-radius: 5px; display: inline-flex; align-items: center; gap: 5px; } .chip--insights { background: color-mix(in srgb, var(--amber) 10%, transparent); color: var(--amber); } .chip--actions { background: rgba(var(--info-rgb),0.12); color: var(--info); } .chip--clean { background: rgba(var(--green-rgb),0.1); color: var(--green); } .chip__dot { width: 5px; height: 5px; border-radius: 50%; background: currentColor; } .card__foot { display: flex; justify-content: space-between; align-items: center; font-family: 'DM Mono', monospace; font-size: 9px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; border-top: 1px solid var(--border); padding-top: 12px; margin-top: auto; } .card__foot a, .card__foot span { color: var(--muted); } .empty { padding: 80px 24px; text-align: center; color: var(--muted); } .empty__icon { font-size: 28px; margin-bottom: 12px; opacity: 0.4; } .empty__msg { font-family: 'DM Mono', monospace; font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; } /* In-flight build badge — clicking the card drops into the session. */ .pill--live { background: rgba(var(--gold-rgb),0.12); color: var(--accent); border: 1px solid rgba(var(--gold-rgb),0.35); }