/* * theme.css — WRITTEN BY THE PLATFORM. Do not edit. * * Palette: Your colours (custom) * Source colours: #050c0b #20302c #f7faf9 #22594f #2f7a6d #ffffff * * Every value below is either one of those five or derived from them, and each * one is contrast-corrected against this palette's own background. Consume * them with var(--token); never write a colour value in app code. */ :root { --canvas: #f7faf9; --surface: #fbfdfc; --surface-2: #ebeeed; --border: #d5d9d8; --border-strong: #aeb3b2; --ink: #20302c; --muted: #646d6b; --accent: #22594f; --accent-hover: #1d4c43; --accent-ink: #ffffff; --accent-text: #2f7a6d; --accent-strong: #22594f; --accent-soft: #d9e3e1; --accent-border: #97b2ad; --success: #15803d; --success-ink: #ffffff; --success-soft: #dcebe2; --success-strong: #137638; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #efe6dc; --warning-strong: #a64c08; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #f0dfde; --danger-strong: #b91c1c;} /* The same palette on a dark page — written here, never by the app. It applies while carries data-theme="dark", which the platform's own toggle sets and remembers; an app that never renders that toggle is exactly as it was. Do not repoint any of these from app code: a token that references another token here is a cycle, and CSS makes every property in a cycle invalid. */ html[data-theme="dark"] { --canvas: #050c0b; --surface: #1e2423; --surface-2: #121817; --border: #282e2d; --border-strong: #505554; --ink: #f7faf9; --muted: #969b9a; --accent: #22594f; --accent-hover: #437269; --accent-ink: #ffffff; --accent-text: #618781; --accent-strong: #6e918b; --accent-soft: #0b1d1a; --accent-border: #122f2a; --success: #15803d; --success-ink: #ffffff; --success-soft: #092616; --success-strong: #499c68; --warning: #b45309; --warning-ink: #ffffff; --warning-soft: #2c1c0b; --warning-strong: #c57a40; --danger: #b91c1c; --danger-ink: #ffffff; --danger-soft: #2d100f; --danger-strong: #d16969; } /* Youtube Scrapper — a calm, light lead-generation workspace. Retune the shared system toward soft, generous, unhurried: rounder surfaces, a touch more breathing room, quieter motion. Colours always come from the tokens in theme.css — nothing here is a literal colour. */ :root { --radius-sm: 8px; --radius: 12px; --radius-lg: 20px; --dur-2: 220ms; } /* The hero band is the one moment of strong colour on the app; give it a hairline edge so it reads as a surface, not a flat wash. */ .page > .bg-gradient-to-br { border: 1px solid color-mix(in srgb, var(--ink) 8%, transparent); } /* Result and lead cards lift gently on hover — the one interactive habit that makes a list of cards read as "reach for one", not "look at these". */ .card { transition: transform var(--dur-2) ease-out, box-shadow var(--dur-2) ease-out; } /* Channel avatars in the results grid and the leads table keep a hairline ring so a light thumbnail never disappears into the card behind it. */ img.rounded-full { border: 1px solid color-mix(in srgb, var(--ink) 10%, transparent); object-fit: cover; } /* The notes field in the leads table should not look like a form the moment nothing is focused — just a hairline until someone wants to type. */ .table input.input { border-color: transparent; background: transparent; } .table input.input:hover, .table input.input:focus { border-color: var(--border-strong); background: var(--surface); } @media (prefers-reduced-motion: reduce) { .card { transition: none; } }