/* ═══ Day to Day · BUNDLED system stylesheet ═══ * Concatenated from system/{tokens, components, controls, shell, drawer, lists, timeline}.css for fast, * single-request loading. Section banners preserved below. */ /* ╔══════ @font-face — self-hosted variable fonts ══════╗ * 2026-07 type system (rollout/system.css-tokens.amendment.css §1a): * Clash Display (headings/display), General Sans (body + all UI, * incl. italic), Newsreader italic (release/work titles — the one * serif), Geist Mono (labels/metadata — unchanged). Variable fonts: * one file covers the full weight range, so font-weight on any * element interpolates correctly. font-display: swap → fallback * renders immediately, swaps when the file lands. */ @font-face { font-family: 'Clash Display'; src: url('fonts/ClashDisplay-Variable.woff2') format('woff2-variations'); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: 'General Sans'; src: url('fonts/GeneralSans-Variable.woff2') format('woff2-variations'); font-weight: 400 700; font-style: normal; font-display: swap; } @font-face { font-family: 'General Sans'; src: url('fonts/GeneralSans-Italic-Variable.woff2') format('woff2-variations'); font-weight: 400 700; font-style: italic; font-display: swap; } @font-face { font-family: 'Newsreader'; src: url('fonts/Newsreader-Italic-Variable.woff2') format('woff2-variations'); font-weight: 400 500; font-style: italic; font-display: swap; } @font-face { font-family: 'Geist Mono'; src: url('fonts/GeistMono-Variable.woff2') format('woff2-variations'); font-weight: 400 700; font-style: normal; font-display: swap; } /* ╔══════ tokens.css ══════╗ */ /* ═══════════════════════════════════════════════════════════════════ * Day to Day · Design Tokens * ───────────────────────────────────────────────────────────────── * The single source of truth for color, type, radii, and the * signature 'lift' glass texture. * * This file is loaded first by every product page. Consumers * reference these CSS variables only — never hardcoded values. * * Design language * ─────────────── * · Warm paper background — not beige, not blue, just barely-warm white * · Ink as brand — no color is the brand; emphasis comes from * typography and the 'lift' texture, not from an accent * · One semantic color (URGENT) for "this needs you now" — deep oxblood * · A per-artist mood palette (--m-*) — bound only to the artist's * own surfaces (roster tile, calendar artist rail). NEVER on system * chrome. The system stays monochrome; the artist brings the color. * · Geist + Geist Mono — sans for everything, mono for labels + metadata * * Naming rules * ──────────── * · Tokens use semantic intent: --bg, --ink, --urgent, --m-rose * · No literal-color tokens (--orange, --blue). The palette is * private to this file. * ═══════════════════════════════════════════════════════════════════ */ :root { /* ─────────── Theme (semantic layer · light) ─────────── Light is the default at :root. The theme boot script stamps [data-theme] on ; dark re-declares the SAME role names under :root[data-theme="dark"] (separate workstream, #106). Components only ever read the semantic tokens below. */ color-scheme: light; /* native controls/scrollbars match */ /* ─────────── Paper ─────────── Near-white with a barely-there warmth. Sits much closer to paper-white than to beige — keeps the page bright and confident, reads as premium not generic. */ --bg: #FAFAF7; --bg-2: #F4F2EE; /* slightly recessed surface, rarely needed */ --surface: #FFFFFF; /* solid white card variant */ /* ─────────── Ink ─────────── Warm dark, used at four weights. AAA on --bg. */ --ink: #1A1612; /* default body text */ --ink-strong: #0E0B08; /* headlines, emphasised type, system marks */ --ink-soft: #524A40; /* secondary copy */ --ink-muted: #857B6E; /* metadata, labels, placeholders */ --ink-faint: #9C9285; /* faint meta, decorative dividers, disabled */ --hairline: rgba(28, 22, 12, 0.08); --hairline-soft:rgba(28, 22, 12, 0.04); /* Ink-strong fill contrast (#106 dark-safe): the text/icon colour that sits ON a solid --ink-strong fill — the active filter pill, count badges, primary button, today's date circle, the Release event chip. Sibling to --accent-ink (text ON an accent fill). The --ink-strong FILL flips on its own by theme (near-black → #fff in dark); this token flips the TEXT the other way so the block stays a high-contrast solid, never white-on-white. Solid-ink chrome that reads #fff on paper must read this token instead. On-photo #fff (marquee dot/name, hero name/badge) sits on imagery, not this fill — leave it #fff. */ --on-ink-strong: #fff; /* Solid ink disc fill (avatar initials, FAB, account chips in the shell) — a near-black disc in light; its glyph reads --on-ink-strong. Flips to a near-white disc in dark so the dark glyph stays legible (the #000 end-stop is theme-blind on its own, which is what broke the discs white-on-white). */ --ink-disc: linear-gradient(135deg, var(--ink-strong), #000); /* ─────────── Brand ─────────── There is no brand colour. The 'brand' is ink. Emphasis is typographic. This token exists so future components can read --brand-* without knowing the implementation. */ --brand: var(--ink-strong); --brand-deep: #000000; --brand-wash: rgba(14, 11, 8, 0.06); --brand-edge: rgba(14, 11, 8, 0.18); /* ─────────── Shell atmosphere (redesign · App Shells spec) ─────────── The redesign shell (js/shell.js) reads these. Values are verbatim from the App Shells build reference (Redesign Files/DayToDay - App Shells.dc.html): --icon soft warm-grey for nav glyphs (quieter than --ink-muted) --chip neutral pill/badge fill (nav counts, roster ticks) Light-only for now (system.css is light until #106 lands the dark set; the spec's dark values — --icon:rgba(255,255,255,.5) · --chip:rgba(255,255,255,.07) — go in the #106 [data-theme="dark"] block, not scattered per surface). */ --icon: #9a8f80; --chip: rgba(28, 22, 12, 0.05); /* ─────────── Urgent ─────────── The single semantic colour. Used ONLY for items that need attention right now — overdue tasks, today's hot deadlines, budget thresholds, the welcome-back left rail, the notification badge. Never decorative. */ --urgent: #8B1E2E; --urgent-soft: rgba(139, 30, 46, 0.10); /* ─────────── Per-artist mood ─────────── 2026-07 palette (amendment §3). The system stays monochrome (studio chrome = ink); the ARTIST brings the colour, bound via D2D_applyMood(el, artist.mood) reading --m-. Appears ONLY on the artist's own surfaces, NEVER on shared system chrome. One lightness/chroma family so they read as a set, all sitting calmly beside the acid. New-artist default slug = 'acid'. */ --m-acid: #D6F038; /* default / first pick in the artist-accent picker */ --m-rose: #D14B8C; --m-violet: #6B52DB; --m-teal: #178C93; --m-coral: #E26A3A; /* wider set of picks */ --m-sky: #2F82D6; --m-amber: #C6871C; --m-plum: #9E4FC4; --m-moss: #5E9A34; --m-ocean: #1E6B85; /* ─────────── Light-accent contrast helpers (amendment §2) ─────────── Buttons stay monochrome ink — acid is only the default pick in the artist-accent picker. A LIGHT accent (acid, amber, moss) can never carry white text and can never be body text: · text/icons ON a light accent fill → var(--accent-ink) · a light accent used as TEXT on paper → var(--accent-on-light) Reference values (acid default shown); derive per bound accent by luminance, don't hardcode acid. */ --accent: #D6F038; /* the default bound accent (acid) */ --accent-ink: #0E0B08; /* text/icons that sit ON a LIGHT accent fill (= --ink-strong) */ --accent-on-light: #5F6B12; /* a light accent used as TEXT on paper (deep olive, AA ≥4.5:1) */ --accent-on-dark: #D6F038; /* on dark, a light accent reads as itself */ --accent-on: #5F6B12; /* theming role alias — light-theme value of accent-as-text */ /* ─────────── Milestone types ─────────── Category colours for milestone-type chips (Release · Announce · Fan activation · Social · Goal), used on the Strategy hero "next move", the Strategy timeline, and the Plan. Muted, earthy hues so they read as classification, never competing with the artist mood accent or urgent. Release is the headline event and renders as a solid ink chip. */ --ms-announce: #3B5BA5; /* slate blue */ --ms-fan: #B0663F; /* terracotta */ --ms-social: #2F7E78; /* teal */ --ms-goal: #94701A; /* ochre */ /* ─────────── Asset tone washes ─────────── Decorative category washes for the Assets gallery (.asset-tone family) and the release-scope filter swatches. Stored as RGB triplets so the same hue can wash at different opacities (card tint vs filter swatch). Purely atmospheric — not core ink/bg, so they live here rather than as literals scattered per surface. */ --tone-warm-rgb: 126, 28, 46; /* cherry / red wash */ --tone-amber-rgb: 196, 154, 60; /* gold wash */ --tone-cool-rgb: 46, 58, 74; /* slate-blue wash */ /* ─────────── Track production stages ─────────── The audio production pipeline for a track — demo → mix → master. Used on the Overview "Music" bar (and available to any track-state display). Reads as progression: raw sand → worked periwinkle → finished ink. */ --stage-demo: #BCA98E; /* raw — warm sand */ --stage-mix: #6E78C7; /* in progress — periwinkle */ --stage-master: #241C13; /* finished — deep ink */ /* ─────────── Social strategy pillars ─────────── Categorical colour for content pillars on Socials (post stripe, pillar chips, the strategy-pillars donut). A 4-tone scale that REUSES the existing palette — the music-card stage hues (periwinkle / warm sand) plus two milestone-type hues (terracotta / teal) — so nothing new is invented. Assigned by a pillar's stable sort index, cycling p1→p4. Consume via the .pillar-tone helpers below or var(--pillar-N). */ --pillar-1: var(--stage-mix); /* periwinkle — e.g. Music & releases */ --pillar-2: var(--stage-demo); /* warm sand — e.g. Behind the scenes */ --pillar-3: var(--ms-fan); /* terracotta — e.g. Fan engagement */ --pillar-4: var(--ms-social); /* teal — e.g. World & lifestyle */ /* ─────────── Status (semantic) ─────────── Info (blue) + positive (green) sit alongside the one urgent accent — the ONLY status hues in the system. Every status pill / chip / dot reads these tokens, never a raw literal. Wash = ~10% fill, edge = ~20% border. */ --status-info: #2360B8; --status-info-wash: rgba(42,111,219,0.10); --status-info-edge: rgba(42,111,219,0.22); --status-positive: #1E6B45; --status-positive-wash: rgba(30,107,69,0.10); --status-positive-edge: rgba(30,107,69,0.20); --status-warn: #B26B00; /* held/pencilled states (was a page-level fallback) */ /* Module-family tints — ONE source for every [data-mod] surface (.pill-category chips, calendar type chips / pills / week edges). Ink = readable text tone; wash/edge = ~8-12% fill, ~20% border. */ --mod-music-ink: #A52A6B; --mod-music-wash: rgba(214,51,132,0.08); --mod-music-edge: rgba(214,51,132,0.18); --mod-campaigns-ink: #3D46B0; --mod-campaigns-wash: rgba(79,90,224,0.08); --mod-campaigns-edge: rgba(79,90,224,0.18); --mod-live-ink: #1A5468; --mod-live-wash: rgba(30,107,133,0.08); --mod-live-edge: rgba(30,107,133,0.18); --mod-socials-ink: #7E5C92; --mod-socials-wash: rgba(181,143,201,0.12); --mod-socials-edge: rgba(181,143,201,0.24); /* Mood-derived aliases — DEFAULTS (no-mood fallback). On moodful elements these are overridden by INLINE custom properties bound in JS (D2D_applyMood / D2D_moodStyle), each referencing the artist's base --m- token — so the stylesheet carries no theme-scoped token definitions. Components just read var(--tile-color) / var(--artist-accent) / etc. and inherit the inline value from the nearest moodful ancestor. */ --mood-color: var(--ink-strong); --tile-color: transparent; --artist-accent: var(--ink-strong); --hero-mood: transparent; --cover-mood: transparent; /* ─────────── Type ─────────── 2026-07 type system (amendment §1b): --display headings & display type (Clash Display, 500–600) --sans body & all UI (General Sans) --serif release / work titles (Newsreader italic — the one serif, reserved for track & release names, never body) --mono labels, dates, metadata (Geist Mono — unchanged) */ --display: 'Clash Display', 'General Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* @kind font */ --sans: 'General Sans', -apple-system, BlinkMacSystemFont, system-ui, sans-serif; /* @kind font */ --serif: 'Newsreader', Georgia, 'Times New Roman', serif; /* @kind font */ --mono: 'Geist Mono', 'SF Mono', ui-monospace, monospace; /* @kind font */ /* Display-face weight ceiling (2026-07 §1b): Clash tops out at 500–600, never 700. --fw-display section headers & standard display headings --fw-display-hero large hero display (≥40px) — a more refined big-Clash --fw-figure hero/stat FIGURES on cards — money/metric/count/% numerals (founder ruling 2026-07-17: numbers read calm, never shouty). A real primitive split off --fw-display so figures no longer borrow the overloaded title weight; future figures inherit it. */ --fw-display: 500; /* founder ruling 2026-07-17: card/section titles read calm at 500 too */ --fw-display-hero: 500; --fw-figure: 500; /* ─────────── Type role hierarchy (Chip #142 · 3-altitude discipline) ─────────── Clash (--display) had drifted onto ~13 roles on Home / ~8 on Artist, so nothing read as the focal point. These role tokens give Clash back its scarcity: one knob per altitude, so which FACE each element uses is a token flip, not a per-selector hunt. --font-hero altitude 1 · page hero + immersive card name → Clash (display) --font-figure altitude 2 · big metric numerals → Clash (founder: keep, with tabular-nums at the call site so figures don't jitter) --font-title altitude 3 · section / card titles + empty-state heads → Sans --fw-title the weight titles carry (Sans 600) */ --font-hero: var(--display); --font-figure: var(--display); --font-title: var(--sans); --fw-title: 600; --fw-title-light: 500; /* lighter title stem — list/table ROW titles (#101): a genuinely lighter weight than --fw-title, not a colour softening. Theme-independent → defined once. */ --fw-page-title: 600; /* site page-header h1 stem (#227, founder walk 2026-07-18): the one conformed page-title weight — .heading-title + every per-page h1 (.cv2-title/.mus-h1/.fin-h1/…). */ /* ─────────── Radii ─────────── Four steps. r-sm for chips & inline tags, r-md for inline lists (priority, activity), r-lg for panels & tiles, r-xl for hero primitives (Ask). */ --r-sm: 8px; --r-md: 14px; --r-lg: 20px; --r-xl: 28px; /* ─────────── Lift ─────────── Signature glass texture. Used on the topbar pill, the ask input, the week-ahead panel, the digest list, the activity list, and the roster tiles. Three layers stack: 1. soft warm-white gradient body 2. 1px ink hairline 3. shadow stack: inner highlight + 1px line + soft drop + deep drop Apply via .lift on any container. Hover state available via --lift-shadow-hover for interactive elements. */ --lift-bg: linear-gradient(180deg, rgba(255,255,255,0.99) 0%, rgba(255,255,255,0.90) 100%); /* @kind color */ --lift-stroke: 1px solid rgba(28,22,12,0.06); /* @kind color */ --lift-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 -1px 0 rgba(28,22,12,0.02) inset, 0 1px 2px rgba(28,22,12,0.04), 0 6px 14px -6px rgba(28,22,12,0.09), 0 18px 36px -16px rgba(28,22,12,0.11); --lift-shadow-hover: 0 1px 0 rgba(255,255,255,0.8) inset, 0 1px 2px rgba(28,22,12,0.05), 0 10px 24px -8px rgba(28,22,12,0.13), 0 28px 56px -20px rgba(28,22,12,0.15); --lift-inner: inset 0 1px 0 #fff; /* card top-light (theming role) */ /* ─────────── Header (Chip S · 2026-07-07) ─────────── A whisper of glass on the app-shell bar, a deliberate founder-chosen deviation from the solid App Shells spec. Content blurs gently under the sticky header on scroll; never near the legacy 20px frost. Dark values live in the :root[data-theme="dark"] block below (#106 owns the full dark palette; these two header tokens ship early with Chip S). */ --header-bg: color-mix(in oklab, var(--bg) 80%, transparent); /* @kind color */ --header-blur: blur(12px) saturate(115%); /* ─────────── Pearl surface (Chip #142 · dashboard cards) ─────────── A subtle, BLUR-FREE nacre for the standard dashboard cards (Home .hv2-card, Artist .aw-card — never the immersive marquee card). Three layers, all token-driven so light/dark is a flip, never generic glassmorphism: 1 · --surface-pearl a barely-warm top-lit body gradient (+ --pearl-top inner highlight, prepended to the card's box-shadow stack) 2 · --pearl-sheen a diagonal nacre sheen, rendered as a ::before overlay; transparent across the central band so text contrast is unaffected 3 · --pearl-edge a faint iridescent hairline — a very-low-chroma multi-hue ring (a hint of the mood palette: rose→violet→teal→amber), painted in the card's border via a padding-box/border-box gradient so it never fights border-radius. A jewelled edge, never a bold outline. No blur, no animation (the calm posture holds); dark highlight alphas ≤ .08. */ --surface-pearl: linear-gradient(180deg, #FFFFFF, #FCFBF8); /* @kind color */ --pearl-top: inset 0 1px 0 rgba(255,255,255,0.92); --pearl-sheen: linear-gradient(125deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 68%, rgba(255,251,242,0.42) 100%); /* @kind color */ --pearl-edge: linear-gradient(135deg, rgba(209,75,140,0.18) 0%, rgba(107,82,219,0.12) 34%, rgba(23,140,147,0.12) 66%, rgba(198,135,28,0.16) 100%); /* @kind color */ } /* ─────────── Palette A/B · Option A "clean warm" (#326, staging flag) ─────────── OPT-IN ONLY. js/shell.js reads ?palette=clean and stamps [data-palette="clean"] on the root (persisted so it sticks across a walk). This block overrides ONLY the tokens the Option A proposal moves — additive, so with NO attribute the DEFAULT look stays byte-identical. Placed BEFORE the DARK block on purpose: every token here is re-declared by :root[data-theme="dark"] below at equal specificity, so a dark viewer keeps the dark ramp (later source wins). Option A is a light-mode change; dark needs no tweak, so there is no dark-clean block. */ :root[data-palette="clean"] { --bg: #FAFAFA; /* was #FAFAF7 — neutral paper */ --bg-2: #F3F3F1; /* was #F4F2EE — recessed panel neutralises */ /* --surface stays #FFFFFF (unchanged in Option A) */ --ink: #18171A; /* was #1A1612 — body ink cools */ --ink-strong: #0D0C0F; /* was #0E0B08 */ --ink-soft: #4A4A50; /* was #524A40 */ --ink-muted: #6C6A70; /* was #857B6E — mono metadata darkens */ --ink-faint: #8A888E; /* was #9C9285 */ --hairline: rgba(22,20,26,0.08); /* was rgba(28,22,12,0.08) */ --surface-pearl: linear-gradient(180deg, #FFFFFF, #FCFCFB); /* warm end #FCFBF8 → #FCFCFB · @kind color */ } /* ─────────── DARK — the full semantic palette (#106) ─────────── Dark is RE-DERIVED, not inverted light. Elevation rises by LIGHTNESS (bg → surface); the ink ramp is off-white at graded alpha (never pure #fff for body, which vibrates); status hues are lifted so they survive on charcoal; and lift carries depth via a lighter surface + top inner-light + hairline, not a drop shadow. Every role here re-declares a token that has a light value at :root, so the theme flip is a value swap and nothing else. Ported from Redesign Files/rollout/theming.tokens.css §2; the header (Chip S) and pearl (#142) tokens that already shipped here are preserved below. */ :root[data-theme="dark"] { color-scheme: dark; /* native controls/scrollbars match */ /* Paper + surfaces — near-black with the paper's warmth, never #000. Elevation rises by lightness: --bg (lowest) → --surface (raised card). */ --bg: #0C0C10; --bg-2: #101015; --surface: #17171D; /* Ink ramp — off-white at graded alpha. --ink-strong is the only near-solid, used sparingly. --ink-muted is the text-contrast floor; --ink-faint is non-text only (dividers, disabled). */ --ink: rgba(255, 255, 255, 0.90); --ink-strong: #FFFFFF; --ink-soft: rgba(255, 255, 255, 0.72); --ink-muted: rgba(255, 255, 255, 0.62); --ink-faint: rgba(255, 255, 255, 0.40); --hairline: rgba(255, 255, 255, 0.09); --hairline-soft:rgba(255, 255, 255, 0.05); /* Ink-strong fill contrast — dark (#106 solid-chrome): the loud solid-ink chrome no longer renders near-white in dark (counts → dark --chip, utility discs → dark --ink-disc, the FAB key → --fill-strong), so its label/glyph reads the LIGHT ink, mirroring how light renders #fff-on-near-black. This one flip turns every count numeral, disc glyph and FAB label light; the coloured state marks (active pill, cmd-pill, today) set their own on-colour and are unaffected. The primary button / active tab are NOT in this set — they invert to a white fill with dark text (see the dark .btn-primary / .seg rules). */ --on-ink-strong: var(--ink-strong); /* Solid ink disc — dark (#106): a QUIET dark disc, not the near-white block the founder rejected. Utility discs (avatar initials, account chips) pair it with a --hairline edge; their glyph reads --on-ink-strong (light). The FAB / + keys override this fill with --fill-strong so they read as the raised key. */ --ink-disc: linear-gradient(135deg, #242430, #1A1A20); /* Elevated dark key (#106) — the FAB (and mobile +) reads as a raised warm-charcoal key in dark: a brighter edge than the .09 hairline so it reads as THE key, a whisper of top-light, a soft ambient depth. This is now the FAB's idiom only — the primary button and active tab were REVISED to a solid white fill with dark text (founder's later call). Dark-only — light keeps its per-selector look. */ --fill-strong: linear-gradient(180deg, #34343F, #262630); /* @kind color */ --fill-strong-edge: rgba(255, 255, 255, 0.18); --fill-strong-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.07), 0 8px 20px -12px rgba(0, 0, 0, 0.7); /* Shell atmosphere — the App Shells spec's dark values, reserved for #106 in the light :root note: nav glyphs + neutral chip fill go light-on-dark. */ --icon: rgba(255, 255, 255, 0.50); --chip: rgba(255, 255, 255, 0.07); /* Urgent — the one semantic accent; oxblood-family but brighter so it holds. */ --urgent: #FF6B72; --urgent-soft: rgba(255, 107, 114, 0.14); /* Per-artist mood — lifted ~8% so each stays vivid on charcoal; acid unchanged. */ --m-acid: #D6F038; --m-rose: #E85C9E; --m-violet: #8875F0; --m-teal: #2CA8AF; --m-coral: #F0824D; --m-sky: #4F9BE8; --m-amber: #E0A93C; --m-plum: #B96FD8; --m-moss: #79B84E; --m-ocean: #37A6C9; /* Accent — acid is already electric on dark, so it is used full. Ink still sits ON an acid fill; the accent-as-text alias becomes full acid on dark. */ --accent: #D6F038; --accent-ink: #0E0B08; --accent-on: #D6F038; /* theming role alias — dark value of accent-as-text */ /* Status — saturated mids die on dark; each is lifted so it stays legible. */ --status-info: #6AA5FF; --status-positive: #46B98A; --status-warn: #E0A93C; /* Module-family tints — dark (#106 module-colour dark gap). The light --mod-*-ink hues (dark blue/teal/magenta/mauve) are dark-on-dark and go illegible on the dark chip, so each INK is lifted to a bright version of the SAME hue — campaign periwinkle, live teal, music rose, socials mauve stay recognisably themselves, just brightened for the dark surface (chip text clears WCAG AA). Wash/edge keep their hue triplet and lift their alpha a touch so the chip still reads as a tinted pill (not a bare hairline) against the darker canvas. Drives the .pill-category chips, the list-kit provenance/.scope chip, and the calendar type chips later. */ --mod-music-ink: #F090BE; --mod-music-wash: rgba(214,51,132,0.16); --mod-music-edge: rgba(232,92,158,0.34); --mod-campaigns-ink: #A2AAF7; --mod-campaigns-wash: rgba(120,130,240,0.16); --mod-campaigns-edge: rgba(136,146,246,0.34); --mod-live-ink: #5CC7DB; --mod-live-wash: rgba(55,166,201,0.15); --mod-live-edge: rgba(70,180,215,0.32); --mod-socials-ink: #CDA9E0; --mod-socials-wash: rgba(190,150,215,0.16); --mod-socials-edge: rgba(198,160,222,0.32); /* Text-entry placeholder — dark (#106). --ink-muted / --ink-faint go too faint on the dark field to read as help text, so placeholders read this dedicated, muted-but-legible value instead (light rules keep --ink-muted / --ink-faint untouched; this token is applied only in [data-theme="dark"] placeholder rules). */ --ink-placeholder: rgba(255, 255, 255, 0.70); /* Lift — shadows barely read on dark, so elevation is a LIGHTER surface + a top inner-light + a hairline, with only a soft ambient depth. The hover value follows the same model (subtle inset, deeper ambient) so a dark card never flashes the light build's bright white top line on hover. */ --lift-bg: linear-gradient(180deg, #1B1B22 0%, #141419 100%); /* @kind color */ --lift-stroke: 1px solid rgba(255, 255, 255, 0.08); /* @kind color */ --lift-shadow: 0 1px 0 rgba(255, 255, 255, 0.06) inset, 0 20px 40px -24px rgba(0, 0, 0, 0.70); --lift-shadow-hover: 0 1px 0 rgba(255, 255, 255, 0.08) inset, 0 24px 48px -22px rgba(0, 0, 0, 0.80); --lift-inner: inset 0 1px 0 rgba(255, 255, 255, 0.06); /* card top-light */ /* Header glass (Chip S · #142) — re-mixes against the dark --bg declared above. */ --header-bg: color-mix(in oklab, var(--bg) 76%, transparent); /* @kind color */ --header-blur: blur(14px) saturate(115%); /* Pearl surface (#142) — dark values (Design Language dark strip; highlight alphas ≤ .08). Body deepens to the dark-strip card gradient; sheen + iridescent edge stay a whisper (pastel-white hue hints) so the nacre reads without ever glaring. */ --surface-pearl: linear-gradient(180deg, #17171D, #121218); /* @kind color */ --pearl-top: inset 0 1px 0 rgba(255,255,255,0.06); --pearl-sheen: linear-gradient(125deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0) 32%, rgba(255,255,255,0) 68%, rgba(255,255,255,0.035) 100%); /* @kind color */ --pearl-edge: linear-gradient(135deg, rgba(233,168,200,0.08) 0%, rgba(178,165,235,0.06) 34%, rgba(150,214,219,0.06) 66%, rgba(226,196,140,0.07) 100%); /* @kind color */ } /* ─────────── Base ─────────── Minimal reset + body type. */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* Root background matches --bg so cross-page navigation paints cream from the first frame — kills the brief white flash the browser shows in the compositing gap before paints (html had no background, so its default white showed). */ html { background: var(--bg); } body { font-family: var(--sans); font-size: 14px; line-height: 1.5; color: var(--ink); background: var(--bg); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; min-height: 100vh; overflow-x: hidden; position: relative; } /* Soft atmospheric bloom — anchors the canvas without competing */ body::before { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient(60% 45% at 50% -10%, rgba(28,22,12,0.05), transparent 60%), radial-gradient(40% 32% at 92% 100%, rgba(15,90,79,0.05), transparent 60%); } /* Option A "clean warm" (#326) — cools the top-glow to a near-neutral matching the clean ink ramp; the teal corner is unchanged. Placed BEFORE the dark bloom so a dark viewer keeps the dark wash (equal specificity, later source wins). */ :root[data-palette="clean"] body::before { background: radial-gradient(60% 45% at 50% -10%, rgba(20,19,24,0.045), transparent 60%), radial-gradient(40% 32% at 92% 100%, rgba(15,90,79,0.05), transparent 60%); } /* Dark bloom (#106) — a cooler, fainter wash (white top, teal corner) so the dark canvas has the same quiet depth as light. Blur-free, very low alpha. */ :root[data-theme="dark"] body::before { background: radial-gradient(60% 45% at 50% -10%, rgba(255,255,255,0.04), transparent 60%), radial-gradient(40% 32% at 92% 100%, rgba(55,166,201,0.05), transparent 60%); } body > * { position: relative; z-index: 1; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; padding: 0; } ::selection { background: var(--brand); color: white; } /* Dark (#106): --brand resolves to --ink-strong (#fff) in dark, so keep the selection a strong-on-canvas highlight instead of white-on-white. */ :root[data-theme="dark"] ::selection { background: var(--ink-strong); color: var(--bg); } /* Tiny helpers — keep here so components don't redefine them */ .u-mono { font-family: var(--mono); letter-spacing: 0.02em; } .u-display { font-family: var(--display); } .u-nowrap { white-space: nowrap; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } } /* ╔══════ components.css ══════╗ */ /* ═══════════════════════════════════════════════════════════════════ * Day to Day · Components * Reusable across every product page. Reads tokens from tokens.css. * * Index * ───── * 1. Lift — system glass texture (applied via .lift) * 2. Topbar pill — sticky header chrome * 3. Page wrap — max-width container * 4. Section primitive — section, section-bar, label/meta/action * 5. Greeting — meta line + heading * 6. Absence band — conditional welcome-back strip * 7. Ask — natural-language input (the wow moment) * 8. Share — utility share line * 9. Chips — week-chip (multi) + digest-filter (single) * 10. Week grid — multi-row 7-day calendar * 11. Digest list — priority feed * 12. Mood tile — duotone artist card (.tile) * 13. Activity list — recent activity row * ═══════════════════════════════════════════════════════════════════ */ /* ─────────── 1. Lift ─────────── */ .lift { background: var(--lift-bg); border: var(--lift-stroke); box-shadow: var(--lift-shadow); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); position: relative; } .lift::before { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0) 30%); pointer-events: none; mix-blend-mode: overlay; opacity: 0.6; } /* ─────────── 2. Topbar pill ─────────── */ .top { position: sticky; top: 14px; z-index: 80; margin: 14px auto 0; width: calc(100% - 28px); max-width: 1320px; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 18px; padding: 8px 12px 8px 18px; border-radius: 999px; } .top-mark { display: inline-flex; align-items: center; gap: 12px; white-space: nowrap; } .top-mark-svg { width: 26px; height: 26px; flex-shrink: 0; display: block; } .top-mark-svg .form { fill: var(--ink-strong); } .top-word { font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: 0.32em; text-transform: lowercase; color: var(--ink-strong); white-space: nowrap; padding-top: 2px; } .top-meta { justify-self: center; font-family: var(--mono); font-size: 12px; letter-spacing: 0.02em; color: var(--ink-muted); white-space: nowrap; } .top-meta strong { color: var(--ink-strong); font-weight: 500; } .top-actions { display: flex; align-items: center; gap: 6px; } .top-search { display: inline-flex; align-items: center; gap: 10px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,0.5); border: 1px solid rgba(28,22,12,0.07); color: var(--ink-muted); font-family: var(--mono); font-size: 12px; cursor: text; transition: border-color 200ms, color 200ms; white-space: nowrap; } .top-search:hover { border-color: rgba(28,22,12,0.18); color: var(--ink-strong); } .top-search svg { width: 13px; height: 13px; stroke-width: 1.6; } .top-search .kbd { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); padding: 1px 5px; border: 1px solid rgba(28,22,12,0.07); border-radius: 3px; line-height: 1; } .top-btn { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-soft); transition: background 200ms, color 200ms; position: relative; } .top-btn:hover { background: rgba(255,255,255,0.6); color: var(--ink-strong); } .top-btn svg { width: 16px; height: 16px; stroke-width: 1.6; } .top-btn .badge { display: none; /* hidden by default; the unread count (.badge.has-count) shows it */ position: absolute; top: 8px; right: 8px; width: 7px; height: 7px; border-radius: 50%; background: var(--urgent); box-shadow: 0 0 0 2px var(--bg), 0 0 8px rgba(139,30,46,0.5); } .top-avatar { width: 36px; height: 36px; border-radius: 50%; background: var(--ink-disc); color: var(--on-ink-strong); display: inline-flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 600; font-size: 12px; letter-spacing: 0.04em; cursor: pointer; box-shadow: 0 1px 1px rgba(255,255,255,0.3) inset, 0 4px 12px -2px rgba(14,11,8,0.45); } /* ─────────── 3. Page wrap ─────────── */ .page { max-width: 1320px; margin: 0 auto; padding: 22px 14px 80px; display: flex; flex-direction: column; gap: 24px; } /* ─────────── 4. Section primitive ─────────── */ .section { display: flex; flex-direction: column; gap: 10px; } .section-bar { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .section-label-line { display: flex; align-items: baseline; gap: 14px; min-width: 0; flex-wrap: wrap; } .section-label { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-strong); white-space: nowrap; } .section-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-muted); letter-spacing: 0.02em; white-space: nowrap; } .section-action { font-family: var(--mono); font-size: 11px; color: var(--ink-muted); letter-spacing: 0.02em; transition: color 200ms; white-space: nowrap; } .section-action:hover { color: var(--ink-strong); } /* When a section header is immediately followed by the task-list toolbar, the two are one control cluster — drop the header's bottom margin so the section-block flex gap (16px) is the only spacing, not 16+16. */ .section-bar:has(+ #tasklist-toolbar) { margin-bottom: 0; } /* Canonical "+ Add …" section action. Use on a .section-action button whose text is just the label ("Add partner"); the leading "+ " is rendered by the rule so every add-action across the app reads identically and the plus can never end up on the wrong side. Pairs with the .btn "+ Add …" primary buttons, which follow the same plus-on-the-left order. */ .section-action--add { display: inline-flex; align-items: baseline; gap: 5px; } .section-action--add::before { content: "+"; font-weight: 600; } /* ─────────── 5. Greeting ─────────── */ .greeting-meta { display: flex; align-items: center; gap: 10px; font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; } .greeting-meta .pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--urgent); box-shadow: 0 0 10px rgba(139,30,46,0.5); } .greeting-meta .sep { color: var(--ink-faint); } .greeting-line { font-family: var(--display); font-weight: var(--fw-display); font-size: clamp(32px, 4vw, 52px); letter-spacing: -0.02em; line-height: 1.0; color: var(--ink-strong); margin: 0; text-wrap: balance; } /* Emphasis is weight, not colour. */ .greeting-line .name { color: var(--ink-strong); font-weight: 800; } /* ─────────── 6. Absence band ─────────── */ .absence { display: flex; align-items: center; gap: 14px; margin-top: 12px; padding: 7px 8px 7px 14px; border-radius: 999px; flex-wrap: wrap; background: rgba(255,255,255,0.55); border: 1px solid rgba(28,22,12,0.05); backdrop-filter: blur(16px) saturate(150%); -webkit-backdrop-filter: blur(16px) saturate(150%); position: relative; } .absence::after { content: ""; position: absolute; left: 0; top: 8px; bottom: 8px; width: 2px; background: var(--ink-strong); border-radius: 0 2px 2px 0; } .absence-eyebrow { font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-strong); white-space: nowrap; } .absence-line { font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft); } .absence-line strong { color: var(--ink-strong); font-weight: 600; } .absence-chips { display: flex; align-items: center; gap: 14px; margin-left: auto; flex-wrap: wrap; } .absence-chip { display: inline-flex; align-items: baseline; gap: 4px; font-family: var(--mono); font-size: 11px; color: var(--ink-muted); letter-spacing: 0.02em; white-space: nowrap; } .absence-chip .num { font-family: var(--sans); font-weight: 600; font-size: 12px; color: var(--ink-strong); line-height: 1; } .absence-action { font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.04em; color: var(--ink-strong); padding-bottom: 1px; border-bottom: 1px solid var(--ink-strong); cursor: pointer; white-space: nowrap; transition: color 200ms, border-color 200ms; } .absence-action:hover { color: var(--urgent); border-color: var(--urgent); } .absence-close { width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-faint); transition: background 200ms, color 200ms; } .absence-close:hover { background: rgba(28,22,12,0.06); color: var(--ink-strong); } /* ─────────── 7. Ask ─────────── */ .ask { display: flex; align-items: center; gap: 16px; padding: 18px 18px 18px 20px; border-radius: var(--r-xl); cursor: text; transition: box-shadow 200ms; } .ask:hover { box-shadow: var(--lift-shadow-hover); } .ask:focus-within { box-shadow: var(--lift-shadow-hover), 0 0 0 3px var(--brand-wash); } .ask-mark { width: 42px; height: 42px; border-radius: 50%; background: var(--ink-disc); color: var(--on-ink-strong); display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; box-shadow: 0 1px 1px rgba(255,255,255,0.3) inset, 0 4px 12px -2px rgba(14,11,8,0.4); } .ask-mark svg { width: 18px; height: 18px; stroke-width: 2; } .ask-input { flex: 1; font-family: var(--sans); font-size: 20px; font-weight: 500; letter-spacing: -0.02em; color: var(--ink-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ask-input em { font-style: normal; color: var(--ink-strong); font-weight: 700; } .ask-chips { display: flex; align-items: center; gap: 5px; flex-wrap: nowrap; overflow: hidden; } .ask-chip { padding: 5px 10px; background: rgba(28,22,12,0.04); border-radius: 999px; color: var(--ink-soft); font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; transition: all 200ms; white-space: nowrap; } .ask-chip:hover { background: var(--ink-strong); color: var(--bg); } .ask-kbd { font-family: var(--mono); font-size: 10.5px; color: var(--ink-muted); padding: 5px 8px; border: 1px solid rgba(28,22,12,0.08); background: rgba(255,255,255,0.7); border-radius: 5px; line-height: 1; flex-shrink: 0; } @media (max-width: 1200px) { .ask-chips { display: none; } } /* ─────────── 8. Share ─────────── */ .share { display: flex; align-items: baseline; gap: 12px; padding: 2px 8px; flex-wrap: wrap; } .share-eyebrow { font-family: var(--mono); font-weight: 600; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-strong); white-space: nowrap; } .share-line { font-family: var(--sans); font-size: 12.5px; color: var(--ink-muted); line-height: 1.4; } .share-action { margin-left: auto; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.04em; color: var(--ink-strong); padding-bottom: 1px; border-bottom: 1px solid var(--ink-strong); cursor: pointer; white-space: nowrap; transition: color 200ms, border-color 200ms; } .share-action:hover { color: var(--urgent); border-color: var(--urgent); } /* ─────────── 9. Chips ─────────── */ /* 9a. .chip-check — multi-select checkbox pills (week-ahead filters) */ .chip-check { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 8px; border: 1px solid rgba(28,22,12,0.08); background: rgba(255,255,255,0.6); border-radius: 999px; color: var(--ink-soft); font-family: var(--mono); font-size: 11px; letter-spacing: 0.02em; cursor: pointer; transition: all 200ms; white-space: nowrap; } .chip-check::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 3px; border: 1.2px solid rgba(28,22,12,0.18); background: transparent; transition: background 200ms, border-color 200ms; flex-shrink: 0; } .chip-check.active { color: var(--ink-strong); background: white; border-color: rgba(28,22,12,0.14); } .chip-check.active::before { background: var(--ink-strong); border-color: var(--ink-strong); background-image: url("data:image/svg+xml;utf8,"); background-size: 10px 10px; background-position: center; background-repeat: no-repeat; } .chip-check:hover { border-color: rgba(28,22,12,0.22); } /* 9b. (segmented control consolidated into .seg — see section 8) */ /* Generic chip-toolbar wrapper used by week-ahead etc. */ .chip-toolbar { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; } .chip-toolbar-label { font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); margin-right: 4px; } /* ─────────── 10. Week grid ─────────── */ /* Cross-artist 7-day calendar. Lift-wrapped, 4 artist rows. Per-artist mood is the vertical rail on the left of each artist column. Urgent events earn the deep oxblood left-rail. */ .week-panel { border-radius: var(--r-lg); overflow: hidden; } .week-grid { display: grid; grid-template-columns: 156px repeat(7, minmax(0, 1fr)); } .week-corner { padding: 12px 16px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); font-weight: 500; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: rgba(255,255,255,0.4); } .week-day { padding: 10px 12px; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); position: relative; min-width: 0; background: rgba(255,255,255,0.4); } .week-day:last-of-type { border-right: 0; } .week-day.today { background: linear-gradient(180deg, rgba(28,22,12,0.07) 0%, rgba(28,22,12,0.03) 100%); } .week-day.today::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--ink-strong); border-radius: 2px 2px 0 0; } .week-day-dow { font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); } .week-day.today .week-day-dow { color: var(--ink-strong); font-weight: 600; } .week-day-num { font-family: var(--sans); font-weight: 700; font-size: 26px; line-height: 1; letter-spacing: -0.025em; color: var(--ink-strong); margin-top: 4px; font-feature-settings: "tnum"; } .week-day-tag { font-family: var(--mono); font-size: 10px; color: var(--ink-strong); margin-top: 4px; letter-spacing: 0.06em; font-weight: 600; } .week-row { display: contents; } .week-artist { padding: 12px 16px 12px 20px; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); display: flex; flex-direction: column; gap: 2px; min-width: 0; background: rgba(255,255,255,0.25); position: relative; } .week-artist::before { content: ""; position: absolute; left: 0; top: 14px; bottom: 14px; width: 3px; background: var(--mood-color); border-radius: 0 2px 2px 0; } .week-artist .row-1 { font-family: var(--sans); font-weight: 600; font-size: 13.5px; color: var(--ink-strong); letter-spacing: -0.005em; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .week-artist .row-2 { font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; } /* ═══════════════════════════════════════════════════════════════════ * PER-ARTIST MOOD — the artist's accent colour. Bound as INLINE custom * properties on each moodful element (the shell, hero, tiles, campaign * cards, week rows) by D2D_applyMood / D2D_moodStyle in js/data.js, each * referencing the :root --m- base token. No CSS theme scopes — the * stylesheet stays free of scoped token definitions; components simply read * var(--tile-color) / var(--artist-accent) / var(--hero-mood) / etc. * ═══════════════════════════════════════════════════════════════════ */ .week-cell { padding: 6px 7px; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); min-width: 0; display: flex; flex-direction: column; gap: 4px; min-height: 64px; } .week-cell:nth-child(8n) { border-right: 0; } .week-cell.today { background: rgba(28,22,12,0.03); } .week-event { padding: 7px 9px 8px; background: linear-gradient(180deg, rgba(255,255,253,0.98) 0%, rgba(255,254,250,0.78) 100%); border: 1px solid rgba(28,22,12,0.06); border-left: 2px solid rgba(28,22,12,0.22); border-radius: 5px; cursor: pointer; transition: transform 150ms, box-shadow 150ms; min-width: 0; box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 1px 2px rgba(28,22,12,0.04), 0 3px 6px -2px rgba(28,22,12,0.05); } .week-event:hover { transform: translateY(-1px); box-shadow: 0 1px 0 rgba(255,255,255,0.8) inset, 0 6px 14px -4px rgba(28,22,12,0.12), 0 16px 28px -12px rgba(28,22,12,0.10); } .week-event.urgent { border-left-color: var(--urgent); } .week-event-meta { display: flex; align-items: baseline; gap: 6px; margin-bottom: 1px; } .week-event-type { font-family: var(--mono); font-size: 8.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; } .week-event.urgent .week-event-type { color: var(--urgent); } .week-event-time { font-family: var(--mono); font-size: 9.5px; color: var(--ink-muted); } .week-event-title { font-family: var(--sans); font-size: 11.5px; font-weight: 500; color: var(--ink-strong); line-height: 1.22; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .week-row-empty .week-cell { min-height: 32px; } .week-row-empty .week-artist { padding: 6px 16px 6px 20px; } .week-row-empty .week-artist .row-1 { font-weight: 500; color: var(--ink-muted); } @media (max-width: 1100px) { .week-grid { grid-template-columns: 130px repeat(7, minmax(0, 1fr)); } } /* ─────────── 11. Digest list ─────────── */ /* Compact row list — used by /home Priority and by artist dashboard. Identity carried by ARTIST NAME (typographic), urgency carried by the left rail + label colour. No per-artist dots. */ .digest-list { border-radius: var(--r-md); overflow: hidden; } .digest-row { display: grid; grid-template-columns: 6px 160px 140px 1fr 110px 14px; gap: 14px; padding: 13px 18px 13px 14px; align-items: center; border-bottom: 1px solid var(--hairline); cursor: pointer; transition: background 150ms; position: relative; } .digest-row:last-child { border-bottom: 0; } .digest-row:hover { background: rgba(255,255,255,0.5); } .digest-rank { width: 3px; align-self: stretch; background: transparent; border-radius: 0 2px 2px 0; margin: 6px 0; } .digest-row.urgent .digest-rank { background: var(--urgent); } .digest-artist { font-family: var(--sans); font-weight: 600; font-size: 13.5px; color: var(--ink-strong); letter-spacing: -0.005em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .digest-type { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); font-weight: 500; white-space: nowrap; } .digest-row.urgent .digest-type { color: var(--urgent); } .digest-detail { font-family: var(--sans); font-size: 13px; color: var(--ink-soft); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .digest-detail strong { color: var(--ink-strong); font-weight: 500; } .digest-when { font-family: var(--mono); font-size: 11px; color: var(--ink-muted); letter-spacing: 0.02em; text-align: right; white-space: nowrap; } .digest-when.urgent { color: var(--urgent); font-weight: 600; } .digest-chevron { color: var(--ink-faint); font-size: 14px; text-align: right; transition: transform 150ms, color 150ms; } .digest-row:hover .digest-chevron { transform: translateX(3px); color: var(--ink-strong); } /* ─────────── 12. Mood tile ─────────── */ /* Duotone artist card. B&W photo + per-artist mood multiply. Used on /home Roster. Reusable wherever an artist needs a visually identifiable presence (artist switcher, search results, "owned by" attributions). */ .tile { position: relative; aspect-ratio: 4 / 5; border-radius: var(--r-lg); overflow: hidden; cursor: pointer; transition: transform 320ms cubic-bezier(0.2, 0, 0, 1), box-shadow 320ms; box-shadow: var(--lift-shadow); } .tile:hover { transform: translateY(-3px); box-shadow: var(--lift-shadow-hover); } .tile { background: var(--tile-color); } .tile::before { content: ""; position: absolute; inset: 0; /* Photo URL is expected from a CSS custom prop --tile-photo; defaults to the elara scene image used in wireframes. */ background: var(--tile-photo, none) center 18% / cover no-repeat; filter: grayscale(1) contrast(1.4) brightness(1.15); } .tile::after { content: ""; position: absolute; inset: 0; background: var(--tile-color); mix-blend-mode: multiply; } .tile .fade { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 35%, rgba(0,0,0,0.72) 100%); z-index: 1; pointer-events: none; } .tile-top { position: absolute; top: 14px; left: 14px; right: 14px; display: flex; align-items: center; justify-content: flex-end; z-index: 2; } .tile-phase { padding: 5px 10px; background: rgba(0,0,0,0.42); border: 1px solid rgba(255,255,255,0.22); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-radius: 999px; font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: white; white-space: nowrap; } .tile-phase.muted { color: rgba(255,255,255,0.65); } .tile-bottom { position: absolute; left: 14px; right: 14px; bottom: 14px; z-index: 2; display: flex; flex-direction: column; gap: 10px; } .tile-name { font-family: var(--display); font-weight: var(--fw-display); font-size: clamp(22px, 2vw, 28px); letter-spacing: -0.015em; line-height: 0.95; color: white; text-wrap: balance; margin: 0; } .tile-card { padding: 10px 12px; background: rgba(0,0,0,0.55); border: 1px solid rgba(255,255,255,0.12); backdrop-filter: blur(22px) saturate(160%); -webkit-backdrop-filter: blur(22px) saturate(160%); border-radius: 12px; display: flex; flex-direction: column; gap: 6px; } .tile-line { display: grid; grid-template-columns: 50px 1fr; gap: 10px; align-items: baseline; font-family: var(--sans); font-size: 12px; line-height: 1.3; } .tile-line .k { font-family: var(--mono); font-weight: 500; font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.55); white-space: nowrap; } .tile-line .v { color: white; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .tile-line .v.muted { color: rgba(255,255,255,0.5); font-style: italic; font-weight: 400; } /* ─────────── 13. Activity list ─────────── */ .activity-list { border-radius: var(--r-md); overflow: hidden; } .activity-row { display: grid; grid-template-columns: 26px 150px 1fr 100px; gap: 14px; padding: 10px 20px; align-items: center; border-bottom: 1px solid var(--hairline); transition: background 150ms; } .activity-row:last-child { border-bottom: 0; } .activity-row:hover { background: rgba(255,255,255,0.5); } .activity-avatar { width: 24px; height: 24px; border-radius: 50%; background: rgba(255,255,255,0.7); border: 1px solid rgba(28,22,12,0.07); color: var(--ink-strong); display: flex; align-items: center; justify-content: center; font-family: var(--sans); font-size: 10px; font-weight: 600; letter-spacing: 0.02em; } .activity-artist { font-family: var(--sans); font-size: 13.5px; font-weight: 600; color: var(--ink-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .activity-detail { font-family: var(--sans); font-size: 13px; color: var(--ink-soft); line-height: 1.4; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .activity-detail strong { color: var(--ink-strong); font-weight: 500; } .activity-when { font-family: var(--mono); font-size: 11px; color: var(--ink-muted); letter-spacing: 0.02em; text-align: right; white-space: nowrap; } /* ╔══════ controls.css ══════╗ */ /* ═══════════════════════════════════════════════════════════════════ * Day to Day · Controls * ───────────────────────────────────────────────────────────────── * Shared atoms used across every surface: buttons, dropdown menus, * and the status pill family + its 4-state picker. Home aesthetic — * ink-as-brand, no accent. Reads tokens from tokens.css. * * Index * ───── * 1. Buttons — primary / secondary / tertiary / danger * 2. Menus — floating dropdowns (sort-menu, actions menu) * 3. Status pills — draft / in-progress / blocked / done + category * 4. Status picker — chip + caret → 4-state popover * 5. Toasts — success / error / delete-undo * ═══════════════════════════════════════════════════════════════════ */ /* ─────────── 1. Buttons ─────────── */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; height: 36px; padding: 0 16px; border-radius: 999px; font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: -0.005em; white-space: nowrap; transition: background 200ms, color 200ms, border-color 200ms, box-shadow 200ms; } .btn-primary { background: linear-gradient(180deg, var(--ink-strong), #000); color: var(--bg); box-shadow: 0 1px 1px rgba(255,255,255,0.2) inset, 0 4px 12px -3px rgba(14,11,8,0.4); } .btn-primary:hover { box-shadow: 0 1px 1px rgba(255,255,255,0.2) inset, 0 6px 16px -3px rgba(14,11,8,0.5); } .btn-secondary { background: rgba(255,255,255,0.7); border: 1px solid var(--hairline); color: var(--ink-strong); } .btn-secondary:hover { background: white; border-color: rgba(28,22,12,0.18); } /* #106 dark solid-chrome — buttons. Light (above) is untouched: the primary keeps its ink→black gradient, the secondary its white chip. Dark inverts light's solid-ink key: the founder now wants the primary to be a solid WHITE fill with dark text — the exact inverse of light's near-black fill (var(--ink-strong) flips to #fff and var(--surface) to the dark card, so background:var(--ink-strong); color:var(--surface) IS the light active-tab pairing, read the other way). This REVISES the earlier warm-charcoal --fill-strong key; that raised-charcoal idiom now lives only on the FAB. The secondary stays a GHOST OUTLINE (transparent, hairline border) so it reads clearly subordinate to the white key. */ [data-theme="dark"] .btn-primary { background: var(--ink-strong); color: var(--surface); box-shadow: 0 6px 16px -6px rgba(0,0,0,0.7); } [data-theme="dark"] .btn-primary:hover { box-shadow: 0 8px 20px -6px rgba(0,0,0,0.82); } [data-theme="dark"] .btn-secondary { background: transparent; border-color: var(--hairline); color: var(--ink-strong); } [data-theme="dark"] .btn-secondary:hover { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.16); } /* Segmented control — same inverted-key idiom as the primary. The light active pill is a literal `background: white` with dark text; in dark that would go white-on-white (ink-strong flips to #fff), so the active tab reads the solid WHITE fill + dark text pairing explicitly (var(--ink-strong)/var(--surface)), matching light inverted. The track quiets to the dark chip fill. Found on #112's calendar; applies to every .seg user. */ [data-theme="dark"] .seg { background: var(--chip); border-color: var(--hairline); } [data-theme="dark"] .seg-btn.is-active, [data-theme="dark"] .seg-btn.active, [data-theme="dark"] .seg-btn[aria-checked="true"] { background: var(--ink-strong); color: var(--surface); box-shadow: 0 2px 8px -3px rgba(0,0,0,0.6); } .btn-tertiary { background: transparent; color: var(--ink-soft); padding: 0 12px; } .btn-tertiary:hover { background: rgba(28,22,12,0.05); color: var(--ink-strong); } .btn.footer-btn-danger, .btn-tertiary.footer-btn-danger { color: var(--urgent); } .btn.footer-btn-danger:hover, .btn-tertiary.footer-btn-danger:hover { background: var(--urgent-soft); color: var(--urgent); } .btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; pointer-events: none; } /* Inline "+ Add …" affordance (drawer sections, quick-add) */ .add-affordance { align-self: flex-start; font-family: var(--mono); font-weight: 500; font-size: 11.5px; letter-spacing: 0.02em; color: var(--ink-strong); padding: 4px 0; border-bottom: 1px solid transparent; transition: border-color 200ms, color 200ms; } .add-affordance:hover { border-bottom-color: var(--ink-strong); } .add-affordance.is-deferred, .add-affordance[aria-disabled="true"] { color: var(--ink-faint); pointer-events: none; } /* ─────────── 2. Menus ─────────── */ .menu-wrap { position: relative; } .menu, .sort-menu, .card-actions-menu, .status-picker, .avatar-menu, .switcher-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 168px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); box-shadow: var(--lift-shadow); padding: 5px; z-index: 90; display: none; } .menu.is-open, .sort-menu.is-open, .card-actions-menu.is-open, .status-picker.is-open, .avatar-menu.is-open, .switcher-menu.is-open { display: block; } .menu-item, .sort-menu-item { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: var(--r-sm); font-family: var(--sans); font-size: 13px; color: var(--ink); text-align: left; transition: background 150ms, color 150ms; } .menu-item:hover, .sort-menu-item:hover { background: rgba(28,22,12,0.05); color: var(--ink-strong); } .menu-item-destructive { color: var(--urgent); } .menu-item-destructive:hover { background: var(--urgent-soft); color: var(--urgent); } .sort-menu-item.is-current { background: rgba(28,22,12,0.05); color: var(--ink-strong); font-weight: 600; } /* Row actions trigger (⋯) */ .card-actions-wrap { position: relative; } .card-actions { width: 28px; height: 28px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-muted); transition: background 150ms, color 150ms; } .card-actions:hover { background: rgba(28,22,12,0.06); color: var(--ink-strong); } .card-actions-glyph { width: 15px; height: 15px; fill: currentColor; } /* ─────────── 3. Status pills ─────────── */ .pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-family: var(--mono); font-weight: 500; font-size: 10.5px; letter-spacing: 0.06em; white-space: nowrap; border: 1px solid transparent; } /* Status uses tinted neutrals + the one urgent accent for blocked. The palette stays quiet — status is conveyed by label + a small dot weight. */ .pill-draft { background: rgba(28,22,12,0.05); color: var(--ink-muted); border-color: var(--hairline); } .pill-in-progress { background: var(--status-info-wash); color: var(--status-info); border-color: var(--status-info-edge); } .pill-paused { background: var(--urgent-soft); color: var(--urgent); border-color: rgba(139,30,46,0.18); } .pill-completed { background: var(--status-positive-wash); color: var(--status-positive); border-color: var(--status-positive-edge); } /* Category chip — module-family tint via [data-mod]. Quiet by default. */ .pill-category { background: rgba(28,22,12,0.05); color: var(--ink-soft); border-color: var(--hairline); } .pill-category[data-mod="music"] { background: var(--mod-music-wash); color: var(--mod-music-ink); border-color: var(--mod-music-edge); } .pill-category[data-mod="campaigns"] { background: var(--mod-campaigns-wash); color: var(--mod-campaigns-ink); border-color: var(--mod-campaigns-edge); } .pill-category[data-mod="live"] { background: var(--mod-live-wash); color: var(--mod-live-ink); border-color: var(--mod-live-edge); } .pill-category[data-mod="socials"] { background: var(--mod-socials-wash); color: var(--mod-socials-ink); border-color: var(--mod-socials-edge); } .pill-category[data-mod="business"] { background: rgba(28,22,12,0.06); color: var(--ink-soft); border-color: var(--hairline); } .pill-category[data-mod="neutral"] { background: rgba(28,22,12,0.05); color: var(--ink-muted); border-color: var(--hairline); } /* ─────────── 4. Status picker (chip + caret → popover) ─────────── */ .status-chip-wrap { position: relative; display: inline-flex; } .pill-btn { cursor: pointer; transition: filter 150ms, box-shadow 150ms; } .pill-btn:hover { box-shadow: 0 0 0 3px rgba(28,22,12,0.05); } .status-chip-caret { font-size: 8px; opacity: 0.7; margin-left: 1px; } .status-picker { min-width: 156px; right: auto; left: 0; } .status-pill-opt { display: flex; align-items: center; width: 100%; padding: 6px 8px; border-radius: var(--r-sm); transition: background 150ms; } .status-pill-opt:hover { background: rgba(28,22,12,0.05); } .status-pill-opt.is-current { background: rgba(28,22,12,0.05); } /* ─────────── 5. Toasts ─────────── */ .toast { position: fixed; left: 50%; bottom: 28px; transform: translateX(-50%); z-index: 200; display: inline-flex; align-items: center; gap: 11px; padding: 12px 16px; border-radius: 999px; background: var(--ink-strong); color: var(--bg); font-family: var(--sans); font-size: 13px; font-weight: 500; box-shadow: 0 8px 24px -6px rgba(14,11,8,0.5); } .toast-check { width: 18px; height: 18px; border-radius: 50%; background: rgba(255,255,255,0.16); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; } .toast-action { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; color: var(--bg); padding-bottom: 1px; border-bottom: 1px solid rgba(255,255,255,0.5); margin-left: 4px; } .toast-action:hover { border-bottom-color: var(--bg); } /* Error variant — a save/write failed. The urgent (danger) fill + alert glyph read unmistakably as an error, never a green success. */ .toast--error { background: var(--urgent); } .toast--error .toast-check { background: rgba(255,255,255,0.22); font-weight: 700; } /* ╔══════ shell.css ══════╗ */ /* ═══════════════════════════════════════════════════════════════════ * Day to Day · App Shell * ───────────────────────────────────────────────────────────────── * The workspace chrome that wraps every ARTIST-scoped surface * (dashboard, campaigns, campaign plan, tasks). Built in the same * language as Home.html: warm paper, ink-as-brand, mono labels, the * signature `lift` glass. The system chrome stays monochrome; the * per-artist mood appears only on artist-bound accents. * * Authored ONCE here + mounted via partials/ so every surface gets a * byte-identical shell. Reads tokens from tokens.css; depends on * components.css (.section-bar/.section-label) + controls.css. * * Index * ───── * 1. Shell layout — sidebar + main grid * 2. Sidebar — workspace nav (account + artist modes) * 3. Artist topbar — breadcrumb + actions (switcher/search/etc) * 4. Content canvas — the scroll region inside the shell * 5. Hero / page header — cover image + band + avatar + chips * 6. Tabs — campaign-surface section nav * 7. Dashboard modules — "where things stand" tiles * 8. Filter group — segmented radio (Today / Overdue / …) * 9. List rows — priority + recent (slim row list) * 10. Quick reference — 3-card reference strip * 11. Single-artist week — 7-day strip (artist dashboard) * ═══════════════════════════════════════════════════════════════════ */ :root { --sidebar-w: 250px; --shell-max: 1180px; /* content column cap inside the shell */ } /* Per-artist accent — bound on the shell via [data-mood]. Used sparingly on the artist's OWN surface (hero accent band, avatar ring, the week 'today' marker, section ticks) so the artist's colour is felt, not just a dot. System chrome (sidebar, topbar) stays monochrome. URGENT (oxblood) is never replaced by the accent. Mood→accent mapping now lives in the unified [data-mood] theme scopes; default is in :root. */ /* ─────────── 1. Shell layout ─────────── */ /* The [hidden] attribute must always win, even over display:grid/flex (fixes the card↔list toggle leaving both visible). */ [hidden] { display: none !important; } .shell { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); /* Fixed app shell — the chrome stays in one view; ONLY .shell-main scrolls. Scroll consumers go through D2D_scrollY / D2D_scrollTo / D2D_onScroll. */ height: 100vh; overflow: hidden; } .shell-main { min-width: 0; display: flex; flex-direction: column; height: 100vh; overflow-y: auto; } /* ─────────── 2. Sidebar ─────────── */ .sidebar { position: sticky; top: 0; height: 100vh; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding: 0 14px 14px; border-right: 1px solid var(--hairline); /* A near-solid white rail so the chrome reads distinct from the warm-paper content canvas (page background stays --bg, consistent with Home). */ background: rgba(255,255,255,0.92); backdrop-filter: blur(20px) saturate(140%); -webkit-backdrop-filter: blur(20px) saturate(140%); scrollbar-width: thin; } .sidebar::-webkit-scrollbar { width: 6px; } .sidebar::-webkit-scrollbar-thumb { background: rgba(28,22,12,0.10); border-radius: 3px; } .sidebar-mark { display: inline-flex; align-items: center; gap: 11px; /* Same 60px row height as the artist topbar, so the mark + wordmark sit on the exact line of the header across the hairline. */ height: 60px; box-sizing: border-box; flex-shrink: 0; padding: 0 8px; white-space: nowrap; border-bottom: 1px solid var(--hairline-soft); } .sidebar-mark-svg { width: 24px; height: 24px; flex-shrink: 0; display: block; } .sidebar-mark-svg .form { fill: var(--ink-strong); } .sidebar-word { font-family: var(--sans); font-weight: 600; font-size: 13px; letter-spacing: 0.3em; text-transform: lowercase; color: var(--ink-strong); padding-top: 2px; } .sidebar-group { display: flex; flex-direction: column; gap: 1px; } .sidebar-grouplabel { font-family: var(--mono); font-weight: 500; font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-faint); padding: 4px 10px 6px; } .sidebar-item { display: flex; align-items: center; gap: 11px; padding: 6px 10px; border-radius: 9px; color: var(--ink-soft); font-family: var(--sans); font-size: 13.5px; font-weight: 500; letter-spacing: -0.005em; transition: background 150ms, color 150ms; position: relative; white-space: nowrap; } .sidebar-item:hover { background: rgba(28,22,12,0.045); color: var(--ink-strong); } .sidebar-icon { width: 17px; height: 17px; flex-shrink: 0; stroke-width: 1.7; } .sidebar-item.active { background: var(--ink-strong); color: var(--bg); box-shadow: 0 1px 1px rgba(255,255,255,0.25) inset, 0 4px 12px -4px rgba(14,11,8,0.4); } .sidebar-item.active:hover { background: var(--ink-strong); color: var(--bg); } .sidebar-item.is-disabled { color: var(--ink-faint); pointer-events: none; cursor: default; } .sidebar-item.is-disabled .sidebar-icon { opacity: 0.6; } .sidebar-spacer { flex: 1; } /* ── image-slot skin — the drop-slot component ships generic greys; skin it to the system everywhere it appears (Brand logos / references / boards). The --slot-* vars feed the component's shadow styles. ── */ image-slot { font-family: var(--mono); font-size: 10px; letter-spacing: 0.03em; color: var(--ink-muted); --slot-bg: var(--surface); --slot-ring: var(--ink-faint); --slot-accent: var(--ink-strong); --slot-accent-wash: var(--brand-wash); --slot-sub-line: rgba(28,22,12,0.2); --slot-sub-hover: var(--ink-strong); } /* ── Collapsible sidebar — collapses to an icons-only rail so working pages get the width. Toggle lives above the user block; the preference is shared across every page (localStorage d2d.sidebar.collapsed). ── */ .sidebar-collapse { display: flex; align-items: center; gap: 8px; padding: 3px 10px; margin: 0; border: 0; background: transparent; border-radius: 7px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; text-align: left; color: var(--ink-faint); cursor: pointer; transition: color 150ms, background 150ms; } .sidebar-collapse:hover { color: var(--ink-strong); background: rgba(28,22,12,0.04); } .sidebar-collapse .sidebar-icon { width: 13px; height: 13px; transition: transform 220ms; } .shell.is-sidebar-collapsed { --sidebar-w: 68px; } .shell.is-sidebar-collapsed .sidebar-label, .shell.is-sidebar-collapsed .sidebar-word, .shell.is-sidebar-collapsed .sidebar-grouplabel { display: none; } .shell.is-sidebar-collapsed .sidebar-item, .shell.is-sidebar-collapsed .sidebar-collapse, .shell.is-sidebar-collapsed .sidebar-mark { justify-content: center; padding-left: 0; padding-right: 0; } .shell.is-sidebar-collapsed .sidebar-group + .sidebar-group { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--hairline-soft); } .shell.is-sidebar-collapsed .sidebar-collapse .sidebar-icon { transform: rotate(180deg); } /* Collapsed-rail tooltip — fixed on body so the scrolling sidebar can't clip it */ .sidebar-tip { position: fixed; transform: translateY(-50%); z-index: 200; background: var(--ink-strong); color: #fff; font-family: var(--sans); font-size: 12px; font-weight: 500; padding: 5px 11px; border-radius: 6px; white-space: nowrap; pointer-events: none; box-shadow: 0 6px 18px -6px rgba(28,22,12,0.35); } /* D-011 empty-account invitation — inline tertiary text, no boxed CTA */ .empty-invite { font-family: var(--sans); font-size: 13.5px; line-height: 1.6; color: var(--ink-muted); margin: 4px 2px 0; max-width: 52ch; text-wrap: pretty; } .empty-invite a { color: var(--ink-strong); font-weight: 600; text-decoration: none; } .empty-invite a:hover { text-decoration: underline; } /* Account menu 'soon' rows — the topbar avatar menu is the ONE user menu (Settings · Activity · Recently deleted · Log out); these style its not-yet-real entries on every page incl. Home's local topbar. */ .avatar-menu .menu-item.is-soon { color: var(--ink-faint); cursor: default; } .avatar-menu .menu-item.is-soon:hover { background: transparent; color: var(--ink-faint); } .avatar-menu .soon-tag { margin-left: auto; font-family: var(--mono); font-size: 8px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); border: 1px solid var(--hairline); border-radius: 999px; padding: 1px 6px; } /* ─────────── 3. Artist topbar ─────────── */ .topbar-artist { position: sticky; top: 0; z-index: 70; display: flex; align-items: center; gap: 18px; padding: 13px 26px; min-height: 60px; /* Always-on frosted "lift" glass bar — the brand's signature glass texture on the top header row, so it reads as a distinct bar on every artist surface (not only after scroll). Matches the sidebar/content chrome whiteness; the .is-scrolled state simply deepens it. */ background: rgba(255,255,255,0.9); border-bottom: 1px solid var(--hairline); backdrop-filter: blur(20px) saturate(150%); -webkit-backdrop-filter: blur(20px) saturate(150%); transition: background 200ms, border-color 200ms, box-shadow 200ms, backdrop-filter 200ms; } .topbar-artist.is-scrolled { background: rgba(255,255,255,0.95); border-bottom-color: var(--hairline); backdrop-filter: blur(24px) saturate(160%); -webkit-backdrop-filter: blur(24px) saturate(160%); box-shadow: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 20px -16px rgba(28,22,12,0.35); } .crumb { display: flex; align-items: center; gap: 9px; margin-right: auto; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.02em; color: var(--ink-muted); min-width: 0; } .crumb a { color: var(--ink-muted); transition: color 150ms; white-space: nowrap; } .crumb a:hover { color: var(--ink-strong); } .crumb .sep { color: var(--ink-faint); } .crumb .current { color: var(--ink-strong); font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .topbar-actions { display: flex; align-items: center; gap: 8px; } /* Artist switcher pill — the one place a mood dot is allowed on chrome. */ .artist-pill { display: inline-flex; align-items: center; gap: 9px; padding: 6px 10px 6px 11px; border-radius: 999px; background: rgba(255,255,255,0.6); border: 1px solid var(--hairline); transition: border-color 200ms, background 200ms; white-space: nowrap; } .artist-pill:hover { border-color: rgba(28,22,12,0.18); background: white; } .artist-pill-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pill-mood, var(--ink-strong)); flex-shrink: 0; } .artist-pill-name { font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--ink-strong); letter-spacing: -0.01em; } .artist-pill-chev { display: inline-flex; align-items: center; color: var(--ink-muted); transition: transform 150ms; } .artist-pill-chev .chev-ic { width: 12px; height: 12px; } .artist-pill.is-open .artist-pill-chev { transform: rotate(180deg); } .topbar-search { display: inline-flex; align-items: center; gap: 9px; padding: 7px 12px; border-radius: 999px; background: rgba(255,255,255,0.5); border: 1px solid var(--hairline); color: var(--ink-muted); font-family: var(--mono); font-size: 11.5px; cursor: text; transition: border-color 200ms, color 200ms; white-space: nowrap; } .topbar-search:hover { border-color: rgba(28,22,12,0.18); color: var(--ink-strong); } .topbar-search svg { width: 13px; height: 13px; stroke-width: 1.6; } .topbar-search .kbd { font-family: var(--mono); font-size: 10px; color: var(--ink-faint); padding: 1px 5px; border: 1px solid var(--hairline); border-radius: 3px; line-height: 1; } .topbar-btn { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-soft); transition: background 200ms, color 200ms; position: relative; } .topbar-btn:hover { background: rgba(255,255,255,0.7); color: var(--ink-strong); } .topbar-btn svg { width: 16px; height: 16px; stroke-width: 1.6; } .topbar-btn .badge { display: none; /* hidden by default; the unread count (.badge.has-count) shows it */ position: absolute; top: 7px; right: 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--urgent); box-shadow: 0 0 0 2px var(--bg), 0 0 8px rgba(139,30,46,0.5); } .topbar-avatar { width: 34px; height: 34px; border-radius: 50%; background: var(--ink-disc); color: var(--on-ink-strong); display: inline-flex; align-items: center; justify-content: center; font-family: var(--sans); font-weight: 600; font-size: 12px; box-shadow: 0 1px 1px rgba(255,255,255,0.3) inset, 0 4px 12px -2px rgba(14,11,8,0.45); } /* Artist switcher dropdown (anchored under the artist pill) */ .switcher-wrap { position: relative; } .switcher-menu { min-width: 268px; } .switcher-item { display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px; border-radius: var(--r-sm); font-family: var(--sans); font-size: 13px; color: var(--ink); text-align: left; line-height: 1.3; transition: background 150ms, color 150ms; } .switcher-item:hover { background: rgba(28,22,12,0.05); color: var(--ink-strong); } .switcher-item.is-current { background: rgba(28,22,12,0.05); color: var(--ink-strong); font-weight: 600; } .switcher-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--pill-mood, var(--ink-strong)); flex-shrink: 0; } .switcher-item-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .switcher-item-phase { font-family: var(--mono); font-size: 9px; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); padding: 2px 7px; border: 1px solid var(--hairline); border-radius: 999px; white-space: nowrap; flex-shrink: 0; } .switcher-check { width: 14px; flex-shrink: 0; color: var(--ink-strong); font-size: 11px; text-align: center; } .switcher-check-spacer { width: 14px; flex-shrink: 0; } .switcher-divider { height: 1px; background: var(--hairline-soft); margin: 5px 6px; } .switcher-item-modal { color: var(--ink-muted); font-size: 12.5px; } .switcher-item-modal:hover { color: var(--ink-strong); } .switcher-item-modal[aria-disabled="true"] { color: var(--ink-faint); pointer-events: none; } .switcher-item-icon { width: 14px; text-align: center; color: var(--ink-faint); flex-shrink: 0; } /* ─────────── 4. Content canvas ─────────── */ .content { flex: 1; display: flex; flex-direction: column; padding-bottom: 80px; } .content-wrap { width: 100%; max-width: var(--shell-max); margin: 0 auto; padding: 0 26px; } /* A section = a mono label bar + its content, with a clear gap so labels and filter pills never sit on top of the cards below them. */ .section-block { margin-top: 40px; display: flex; flex-direction: column; gap: 16px; } .section-block:first-child { margin-top: 26px; } /* ─────────── 5. Hero / page header ─────────── */ /* Full-bleed cover image + a band beneath carrying identity. Shared by the artist dashboard (avatar inset) and the campaign surfaces (chips + tabs). Per-artist mood tints the cover via multiply + a thin band rail. */ .hero { display: block; } .hero-image { height: 200px; background: linear-gradient(180deg, rgba(28,22,12,0) 40%, rgba(28,22,12,0.12) 100%), var(--hero-photo, linear-gradient(135deg, color-mix(in oklab, var(--hero-mood, var(--ink-strong)) 60%, #0E0B08), var(--hero-mood, var(--ink-strong)))) var(--hero-focal, center 32%) / cover no-repeat; position: relative; /* thin per-artist accent band along the bottom edge of the cover */ border-bottom: 3px solid var(--artist-accent, var(--ink-strong)); } .hero-image::after { content: ""; position: absolute; inset: 0; background: var(--hero-mood, transparent); mix-blend-mode: multiply; opacity: 0.42; } /* Cover-photo edit affordance — live only (chrome.js renders it). A set cover reveals Change/Remove on hover (top-right); an empty band shows a centered "Add cover photo" prompt so it's discoverable. Glassy chip idiom, tokens only. */ .hero-cover-edit { position: absolute; top: 12px; right: 14px; z-index: 2; display: flex; align-items: center; gap: 8px; opacity: 0; transition: opacity .14s ease; } .hero-image:hover .hero-cover-edit, .hero-cover-edit:focus-within, .hero-cover-edit.is-busy { opacity: 1; } .hero-cover-edit.is-empty { inset: 0; justify-content: center; opacity: 1; } .hero-cover-btn { font: 600 12px/1 var(--sans); padding: 8px 13px; border-radius: 999px; color: var(--ink-strong); background: rgba(255,255,255,0.82); border: 1px solid var(--hairline); box-shadow: var(--lift-shadow); cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .hero-cover-btn:hover { background: #fff; } .hero-cover-edit.is-busy .hero-cover-btn { cursor: default; opacity: .75; } /* Reposition mode (E1) — drag the cover to set its focal point. */ .hero-image.is-repositioning { cursor: move; } .hero-image.is-repositioning .hero-cover-edit { display: none; } .hero-reposition-bar { position: absolute; right: 14px; bottom: 14px; z-index: 3; display: flex; align-items: center; gap: 8px; } .hero-reposition-hint { font: 600 11px/1 var(--mono); letter-spacing: .02em; color: #fff; background: rgba(14,11,8,0.58); padding: 7px 10px; border-radius: 999px; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .hero-band { max-width: var(--shell-max); margin: 0 auto; padding: 20px 26px 10px; display: flex; align-items: flex-start; justify-content: space-between; gap: 24px; position: relative; } .hero-band.has-avatar { padding-top: 60px; } .hero-avatar { position: absolute; left: 26px; top: 0; transform: translateY(-50%); width: 92px; height: 92px; border-radius: 50%; border: 4px solid var(--bg); background: var(--bg-2) var(--avatar-photo, none) center / cover no-repeat; box-shadow: 0 0 0 2px var(--artist-accent, var(--ink-strong)), var(--lift-shadow); z-index: 2; } .hero-band-main { min-width: 0; } .hero-chips { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; flex-wrap: wrap; } .hero-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 11px; border-radius: 999px; background: rgba(255,255,255,0.6); border: 1px solid var(--hairline); font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); white-space: nowrap; } .hero-chip-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--chip-mood, var(--ink-strong)); } .hero-chip.is-disabled { color: var(--ink-faint); } .hero-name-row { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; } .hero-name { font-family: var(--display); font-weight: var(--fw-display-hero); font-size: clamp(30px, 3.4vw, 44px); letter-spacing: -0.035em; line-height: 1.0; margin: 0; color: var(--ink-strong); text-wrap: balance; } .hero-phase { font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--artist-accent, var(--ink-muted)); white-space: nowrap; display: inline-flex; align-items: center; gap: 7px; padding: 4px 11px 4px 9px; border-radius: 999px; background: color-mix(in srgb, var(--artist-accent, var(--ink-muted)) 9%, transparent); border: 1px solid color-mix(in srgb, var(--artist-accent, var(--ink-muted)) 22%, transparent); } .hero-phase::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--artist-accent, var(--ink-muted)); } .hero-sub { font-family: var(--mono); font-size: 11.5px; color: var(--ink-muted); margin: 11px 0 0; letter-spacing: 0.02em; line-height: 1.5; } .hero-sub .sub-sep { color: var(--ink-faint); margin: 0 8px; } .hero-bio { font-family: var(--sans); font-size: 13.5px; color: var(--ink-soft); margin: 10px 0 0; max-width: 64ch; line-height: 1.5; } .hero-actions { flex-shrink: 0; display: flex; align-items: center; gap: 8px; } .hero-action-cog { width: 36px; height: 36px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: rgba(255,255,255,0.6); border: 1px solid var(--hairline); color: var(--ink-soft); font-size: 18px; line-height: 1; transition: background 200ms, color 200ms, border-color 200ms; } .hero-action-cog:hover { background: white; color: var(--ink-strong); border-color: rgba(28,22,12,0.18); } /* ─────────── 6. Tabs — centered floating pill bar w/ sliding thumb ─────────── */ .tabs-rail { display: flex; justify-content: center; max-width: var(--shell-max); margin: 26px auto 4px; padding: 0 26px; } .tabs { position: relative; display: inline-flex; align-items: center; gap: 2px; padding: 5px; border-radius: 999px; background: var(--lift-bg); border: var(--lift-stroke); box-shadow: var(--lift-shadow); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* the gliding thumb */ .tab-thumb { position: absolute; top: 5px; bottom: 5px; left: 0; width: 0; border-radius: 999px; background: var(--ink-strong); box-shadow: 0 1px 1px rgba(255,255,255,0.18) inset, 0 4px 12px -3px rgba(14,11,8,0.4); transition: left 200ms cubic-bezier(0.16, 1, 0.3, 1), width 200ms cubic-bezier(0.16, 1, 0.3, 1); z-index: 0; } .tab { position: relative; z-index: 1; padding: 9px 18px; font-family: var(--sans); font-weight: 600; font-size: 14px; letter-spacing: -0.006em; color: var(--ink-soft); border-radius: 999px; transition: color 200ms cubic-bezier(0.16, 1, 0.3, 1); white-space: nowrap; -webkit-font-smoothing: antialiased; } /* The single tab the thumb currently sits under is always white-on-ink. JS keeps exactly one `.lit` (active on rest, hovered while gliding) so the label can never end up dark-on-dark. */ .tab:hover { color: var(--ink-strong); } .tab.lit, .tab.lit:hover { color: var(--bg); } .tab[aria-disabled="true"], .tab[aria-disabled="true"]:hover { color: var(--ink-faint); cursor: default; } @media (prefers-reduced-motion: reduce) { .tab-thumb { transition: none; } } /* ─────────── 7. Dashboard modules ─────────── */ .workspaces { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } @media (max-width: 980px) { .workspaces { grid-template-columns: repeat(2, 1fr); } } .module { border-radius: var(--r-lg); padding: 18px; background: var(--lift-bg); border: var(--lift-stroke); box-shadow: var(--lift-shadow); display: flex; flex-direction: column; gap: 12px; min-height: 180px; transition: box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1), transform 200ms cubic-bezier(0.16, 1, 0.3, 1); } .module:hover { box-shadow: var(--lift-shadow-hover); transform: translateY(-2px); } .module-head { display: flex; align-items: center; gap: 10px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline-soft); } .module-icon { width: 30px; height: 30px; border-radius: 9px; flex-shrink: 0; display: inline-flex; align-items: center; justify-content: center; background: rgba(28,22,12,0.05); color: var(--ink-strong); } .module-icon svg { width: 16px; height: 16px; stroke-width: 1.6; } .module:hover .module-icon { background: var(--ink-strong); color: var(--bg); transition: background 200ms, color 200ms; } .module-name { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-strong); } .module-head-spacer { flex: 1; } .module-stat { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: var(--ink-muted); white-space: nowrap; } .module-stat.urgent { color: var(--urgent); } .module-empty { display: flex; flex-direction: column; gap: 4px; flex: 1; justify-content: flex-end; } .compact-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); margin: 0; } .compact-headline { font-family: var(--sans); font-weight: 600; font-size: 15px; color: var(--ink-strong); margin: 2px 0 0; letter-spacing: -0.01em; } .compact-hint { font-family: var(--sans); font-size: 12px; color: var(--ink-muted); margin: 2px 0 8px; line-height: 1.4; } .compact-cta { align-self: flex-start; white-space: nowrap; font-family: var(--mono); font-weight: 500; font-size: 11px; letter-spacing: 0.02em; color: var(--ink-strong); padding-bottom: 1px; border-bottom: 1px solid var(--ink-strong); transition: color 200ms, border-color 200ms; } .compact-cta:hover { color: var(--urgent); border-color: var(--urgent); } .compact-cta.is-disabled { color: var(--ink-faint); border-color: var(--ink-faint); pointer-events: none; } /* ─────────── 8. Segmented control (.seg) ─────────── ONE pill-segmented control for every single-select toggle in the app: status & priority filters, view switches, the milestone strip/table toggle. Counts via .seg-btn-count. The active state responds to .is-active, .active, AND aria-checked, so any handler convention works. Compact variant: .seg--sm (e.g. inside a card header). */ .seg { display: inline-flex; gap: 0; padding: 3px; background: rgba(28,22,12,0.05); border: 1px solid rgba(28,22,12,0.06); border-radius: 999px; align-self: flex-start; } .seg-btn { padding: 5px 14px; border-radius: 999px; color: var(--ink-muted); font-family: var(--sans); font-size: 12.5px; font-weight: 500; transition: background 150ms, color 150ms, box-shadow 150ms; white-space: nowrap; } .seg-btn:hover { color: var(--ink-strong); } .seg-btn.is-active, .seg-btn.active, .seg-btn[aria-checked="true"] { background: white; color: var(--ink-strong); box-shadow: 0 1px 2px rgba(28,22,12,0.06), 0 0 0 1px rgba(28,22,12,0.04); } .seg-btn-count { color: var(--ink-faint); margin-left: 6px; } .seg-btn.is-active .seg-btn-count, .seg-btn.active .seg-btn-count, .seg-btn[aria-checked="true"] .seg-btn-count { color: var(--ink-strong); } /* Compact variant — milestone strip/table toggle */ .seg--sm .seg-btn { padding: 4px 12px; font-size: 11.5px; } /* ─────────── 9. List rows (priority + recent) ─────────── */ .list { border-radius: var(--r-md); overflow: hidden; background: var(--lift-bg); border: var(--lift-stroke); box-shadow: var(--lift-shadow); } .list-row { display: grid; grid-template-columns: 140px 1fr auto 14px; gap: 14px; padding: 12px 18px; align-items: center; border-bottom: 1px solid var(--hairline); cursor: pointer; transition: background 150ms; } .list-row:last-child { border-bottom: 0; } .list-row:hover { background: rgba(255,255,255,0.5); } .list-row-type { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); white-space: nowrap; } .list-row.urgent .list-row-type { color: var(--urgent); } .list-row-detail { font-family: var(--sans); font-size: 13px; color: var(--ink-soft); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1.4; } .list-row-detail strong { color: var(--ink-strong); font-weight: 600; } .list-row-when { font-family: var(--mono); font-size: 11px; color: var(--ink-muted); text-align: right; white-space: nowrap; } .list-row.urgent .list-row-when { color: var(--urgent); font-weight: 600; } .list-row-chevron { color: var(--ink-faint); font-size: 14px; text-align: right; transition: transform 150ms, color 150ms; } .list-row:hover .list-row-chevron { transform: translateX(3px); color: var(--ink-strong); } .list-empty { padding: 16px 18px; font-family: var(--sans); font-size: 13px; color: var(--ink-muted); } /* ─────────── 10. Quick reference ─────────── */ .quickref { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; } @media (max-width: 880px) { .quickref { grid-template-columns: 1fr; } } .qref-card { border-radius: var(--r-md); padding: 18px; background: var(--lift-bg); border: var(--lift-stroke); box-shadow: var(--lift-shadow); transition: box-shadow 200ms cubic-bezier(0.16, 1, 0.3, 1), transform 200ms cubic-bezier(0.16, 1, 0.3, 1); } .qref-card:hover { box-shadow: var(--lift-shadow-hover); transform: translateY(-2px); } .qref-head { margin-bottom: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--hairline-soft); } .qref-label { font-family: var(--mono); font-weight: 600; font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-strong); } .qref-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 14px; } .qref-empty-text { font-family: var(--sans); font-size: 13px; color: var(--ink-muted); margin: 0; line-height: 1.5; } /* ─────────── 11. Single-artist week strip ─────────── */ .week-single { border-radius: var(--r-lg); overflow: hidden; background: var(--lift-bg); border: var(--lift-stroke); box-shadow: var(--lift-shadow); } .week-single-grid { display: grid; grid-template-columns: repeat(7, 1fr); } .week-single-day { padding: 10px 12px; border-right: 1px solid var(--hairline); border-bottom: 1px solid var(--hairline); background: rgba(255,255,255,0.4); position: relative; } .week-single-day:last-child { border-right: 0; } .week-single-day.today { background: linear-gradient(180deg, rgba(28,22,12,0.07), rgba(28,22,12,0.03)); } .week-single-day.today::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px; background: var(--artist-accent, var(--ink-strong)); border-radius: 2px 2px 0 0; } .week-single-grid .week-day-dow { font-family: var(--mono); font-weight: 500; font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-muted); } .week-single-grid .week-day-num { font-family: var(--sans); font-weight: 700; font-size: 24px; line-height: 1; letter-spacing: -0.025em; color: var(--ink-strong); margin-top: 4px; } .week-single-grid .week-day-tag { font-family: var(--mono); font-size: 10px; color: var(--ink-strong); margin-top: 4px; letter-spacing: 0.06em; font-weight: 600; } .week-single-row { display: grid; grid-template-columns: repeat(7, 1fr); } .week-single-empty { font-family: var(--mono); font-size: 12px; color: var(--ink-faint); text-align: center; padding: 18px 0 4px; margin: 0; letter-spacing: 0.02em; } .week-single-cell { min-height: 72px; border-right: 1px solid var(--hairline); padding: 7px 7px; } .week-single-cell:last-child { border-right: 0; } .week-single-cell.today { background: rgba(28,22,12,0.03); } /* Artist-scoped activity row (no artist column — the surface is already scoped) */ .activity-row.is-scoped { grid-template-columns: 26px 1fr auto; } .activity-row.is-scoped .activity-detail { font-size: 13px; } /* ─────────── Tasks page heading ─────────── */ .tasks-pagehead { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; } .tasks-eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-muted); margin: 0 0 6px; } .tasks-title { font-family: var(--sans); font-weight: 800; font-size: clamp(26px, 3vw, 34px); letter-spacing: -0.03em; color: var(--ink-strong); margin: 0; line-height: 1.05; } /* ─────────── Responsive shell ─────────── */ @media (max-width: 860px) { .shell { grid-template-columns: 1fr; } .sidebar { display: none; } } /* ╔══════ drawer.css ══════╗ */ /* ═══════════════════════════════════════════════════════════════════ * Day to Day · Canonical Drawer + Task Table * ───────────────────────────────────────────────────────────────── * THE shared detail-drawer primitive (12-drawer-pattern.md / 05ci) and * the shared task table (05c / 29-tasks), restyled from the wireframes' * Archivo/Inter into the Day to Day system (tokens.css). * * Authored ONCE. partials/task-drawer.js renders the drawer; every * surface that lists tasks (Campaign Plan, Tasks) mounts the SAME * module — so the drawer is byte-identical everywhere. This is the * fix for "the drawer renders differently on each page". * * Locks honoured from the spec: * · right slide-out, 520px, backdrop ~18% black * · sticky header (breadcrumb + utilities) + sticky footer * · three states: read-only / edit / creating-new * · status enum not_started · in_progress · blocked · done (+ computed overdue) * · section order: status → title → desc → key details → linked → * notes → reminders → tags → history * * Index * ───── * 1. Backdrop + drawer shell * 2. Drawer header (breadcrumb + utilities) * 3. Create-mode tabs * 4. Status pill row * 5. Title + description * 6. Drawer sections + key-detail grid * 7. Inputs (edit / create) * 8. Scope + assignee + tags + chips * 9. Linked items * 10. Notes * 11. Reminders * 12. History * 13. Footer * 14. Task table (shared list) + quick-add * 15. Task list head (filters / sort / status chips) * ═══════════════════════════════════════════════════════════════════ */ /* ─────────── 1. Backdrop + drawer shell ─────────── */ .drawer-backdrop { position: fixed; inset: 0; z-index: 120; background: rgba(14, 11, 8, 0.20); opacity: 0; pointer-events: none; /* closed backdrop must not eat page clicks (sidebar etc.) */ transition: opacity 200ms cubic-bezier(0.2, 0, 0, 1); } /* Blur belongs to the OPEN state only. backdrop-filter ignores the element's own opacity, so a closed (opacity:0) backdrop left in the DOM — this shell is appended once and never removed — would blur the whole page forever. */ .drawer-backdrop.is-open { opacity: 1; pointer-events: auto; backdrop-filter: blur(1.5px); -webkit-backdrop-filter: blur(1.5px); } .drawer { position: fixed; top: 0; right: 0; bottom: 0; z-index: 121; width: 520px; max-width: 94vw; background: var(--surface); border-left: 1px solid var(--hairline); box-shadow: -12px 0 40px -12px rgba(14,11,8,0.28); display: flex; flex-direction: column; transform: translateX(100%); pointer-events: none; /* off-screen + inert until open */ transition: transform 320ms cubic-bezier(0.16, 1, 0.3, 1); } .drawer.is-open { transform: translateX(0); pointer-events: auto; } /* ─────────── 2. Drawer header ─────────── */ .drawer-header { flex-shrink: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; border-bottom: 1px solid var(--hairline); background: var(--surface); } .drawer-eyebrow { display: flex; align-items: center; gap: 7px; min-width: 0; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); } .drawer-crumb { color: var(--ink-muted); transition: color 150ms; white-space: nowrap; } .drawer-crumb:hover { color: var(--ink-strong); } .drawer-crumb-sep { color: var(--ink-faint); } .drawer-crumb-current { color: var(--ink-strong); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .drawer-header-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; } .drawer-icon-btn { width: 30px; height: 30px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center; color: var(--ink-muted); font-size: 14px; transition: background 150ms, color 150ms; } .drawer-icon-btn:hover { background: rgba(28,22,12,0.06); color: var(--ink-strong); } /* ─────────── 3. Create-mode tabs ─────────── */ .drawer-tabs { flex-shrink: 0; display: flex; gap: 0; padding: 0 20px; border-bottom: 1px solid var(--hairline); background: var(--bg); } .drawer-tab { padding: 11px 14px; font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-muted); font-weight: 500; border-bottom: 2px solid transparent; transition: color 150ms, border-color 150ms; } .drawer-tab.is-active { color: var(--ink-strong); font-weight: 600; border-bottom-color: var(--ink-strong); } /* ─────────── Drawer body ─────────── */ .drawer-body { flex: 1; overflow-y: auto; padding: 22px 24px 30px; scrollbar-width: thin; } .drawer-body::-webkit-scrollbar { width: 7px; } .drawer-body::-webkit-scrollbar-thumb { background: rgba(28,22,12,0.12); border-radius: 4px; } /* ─────────── 4. Status control (dropdown) ─────────── */ .status-field { display: flex; align-items: center; gap: 12px; margin-bottom: 16px; flex-wrap: wrap; } .status-field-label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; } .status-dd { position: relative; } .status-dd-trigger { display: inline-flex; align-items: center; gap: 9px; padding: 7px 13px; border-radius: 999px; background: var(--bg); border: 1px solid var(--hairline); font-family: var(--sans); font-weight: 600; font-size: 13px; color: var(--ink-strong); transition: border-color 150ms; } .status-dd-trigger:hover { border-color: rgba(28,22,12,0.20); } .status-dd-chev { font-size: 9px; color: var(--ink-muted); } .status-dd-menu { position: absolute; top: calc(100% + 6px); left: 0; min-width: 196px; background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); box-shadow: var(--lift-shadow); padding: 5px; z-index: 130; display: none; } .status-dd-menu.is-open { display: block; } .status-dd-opt { display: flex; align-items: center; gap: 9px; width: 100%; padding: 8px 10px; border-radius: var(--r-sm); font-family: var(--sans); font-size: 13px; color: var(--ink); text-align: left; transition: background 150ms; } .status-dd-opt:hover { background: rgba(28,22,12,0.05); } .status-dd-opt.is-current { background: rgba(28,22,12,0.05); font-weight: 600; } .status-dd-check { margin-left: auto; color: var(--ink-strong); font-size: 11px; } /* Status dot — not_started (ring) · in_progress (half) · blocked (oxblood) · done (filled) */ .status-dot { width: 11px; height: 11px; border-radius: 50%; border: 1.5px solid var(--ink-faint); flex-shrink: 0; } .status-dot.in_progress { border-color: var(--artist-accent, var(--ink-strong)); background: linear-gradient(90deg, var(--artist-accent, var(--ink-strong)) 50%, transparent 50%); } .status-dot.blocked { border-color: var(--urgent); background: var(--urgent); } .status-dot.done { border-color: var(--ink-strong); background: var(--ink-strong); } /* ─────────── 4b. Status pill row (legacy) ─────────── */ .status-chip-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 14px; } .status-chip { display: inline-flex; align-items: center; padding: 5px 12px; background: var(--bg); border: 1px solid var(--hairline); border-radius: 999px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-muted); font-weight: 500; transition: background 150ms, color 150ms, border-color 150ms; } .status-chip:hover { color: var(--ink-strong); border-color: rgba(28,22,12,0.16); } .status-chip.is-active { background: var(--ink-strong); border-color: var(--ink-strong); color: var(--bg); } .status-chip.is-active.blocked { background: var(--urgent); border-color: var(--urgent); } .overdue-badge { font-family: var(--mono); font-size: 10px; font-weight: 600; letter-spacing: 0.04em; color: var(--urgent); margin-left: 4px; } /* ─────────── 5. Title + description ─────────── */ .drawer-title { font-family: var(--sans); font-weight: 700; font-size: 22px; letter-spacing: -0.02em; line-height: 1.18; color: var(--ink-strong); margin: 0 0 8px; text-wrap: pretty; } .drawer-description { font-family: var(--sans); font-size: 13.5px; color: var(--ink-soft); line-height: 1.55; margin: 0 0 4px; } /* ─────────── 6. Sections + key-detail grid ─────────── */ .drawer-section { padding: 20px 0; border-top: 1px solid var(--hairline); } .drawer-section:first-of-type { border-top: 0; padding-top: 6px; } .drawer-section-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin-bottom: 12px; } .drawer-section-label { /* 12px (was 10) — founder direction 2026-06-09: drawer section headers must not read smaller than the 12.5px input text. Mono uppercase at 12px sits optically level with it. Applies to every drawer (universal atom). */ font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; } .drawer-section-meta { font-family: var(--mono); font-size: 11px; color: var(--ink-faint); } /* Read-row — canonical label/value definition row inside a drawer-section. Universal drawer atom (deal · finance · …). Label left (mono caps muted), value right (sans). Promoted from the deal drawer so every drawer shares it. */ .read-row { display: grid; grid-template-columns: 128px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--hairline); align-items: baseline; } .read-row:last-child { border-bottom: none; } .read-row-label { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-muted); font-weight: 600; } .read-row-value { font-family: var(--sans); font-size: 13px; color: var(--ink-strong); line-height: 1.45; } .read-row-value.mono { font-family: var(--mono); font-size: 12.5px; } .read-row-value.muted { color: var(--ink-faint); } /* ─────── Drawer progressive disclosure — "+ Add" affordances ─────── Optional drawer fields render as a quiet add-affordance until they hold data (exec pass 2026-06-09); pre-filled fields open expanded. Universal atoms — used by the Live + Deal drawers; adopt everywhere optional fields exist. */ .drawer-adds { display: flex; flex-direction: column; gap: 0; margin: 6px 0 2px; } .drawer-add { display: inline-flex; align-items: center; gap: 7px; align-self: flex-start; font-family: var(--sans); font-size: 12.5px; color: var(--ink-soft); cursor: pointer; padding: 6px 0; transition: color 150ms; } .drawer-add:hover { color: var(--ink-strong); } .drawer-add-plus { font-size: 13px; color: var(--ink-faint); } .drawer-addable { display: none; margin: 8px 0 12px; } .drawer-addable.on { display: block; } .drawer-addable .field-grid { margin: 0; } /* ─────── Card ⋯ actions menu — universal (Deals · Live · Campaigns lists) ─────── */ .cardmenu-btn { flex-shrink: 0; appearance: none; border: 1px solid transparent; background: transparent; cursor: pointer; width: 28px; height: 28px; border-radius: var(--r-sm); color: var(--ink-muted); font-size: 17px; line-height: 1; display: flex; align-items: center; justify-content: center; transition: background 150ms, color 150ms, border-color 150ms; } .cardmenu-btn:hover { background: var(--bg-2); color: var(--ink-strong); border-color: var(--hairline); } .cardmenu-btn.on-cover { position: absolute; top: 10px; right: 10px; z-index: 2; background: rgba(255,255,255,0.92); color: var(--ink-soft); border-color: transparent; border-radius: 999px; } .cardmenu-btn.on-cover:hover { background: #fff; color: var(--ink-strong); } /* #106 dark solid-chrome — the ⋯ disc on card covers. Light keeps its white disc (reads on imagery, untouched above); dark swaps it for a quiet dark disc lifted just off --surface, with a --hairline edge, so it reads on a dark cover without the white blob. */ [data-theme="dark"] .cardmenu-btn.on-cover { background: color-mix(in oklab, var(--surface) 88%, #fff 4%); color: var(--ink-soft); border-color: var(--hairline); } [data-theme="dark"] .cardmenu-btn.on-cover:hover { background: color-mix(in oklab, var(--surface) 82%, #fff 7%); color: var(--ink-strong); border-color: var(--hairline); } /* z-index 1300 = the "above an open drawer" popover tier (matches .lk-pop / .dk-picker); 80 rendered the ⋯/enum popover BEHIND the .dk-panel (z-index 141) — the deal-drawer status/type dropdown bug. A body-portalled menu must always float above the drawer. */ .cardmenu-pop { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-md); box-shadow: var(--lift-shadow-hover); padding: 5px; display: flex; flex-direction: column; gap: 1px; min-width: 168px; z-index: 1300; } .cardmenu-item { appearance: none; background: none; border: 0; text-align: left; width: 100%; padding: 8px 11px; border-radius: var(--r-sm); font-family: var(--sans); font-size: 13px; color: var(--ink-strong); cursor: pointer; line-height: 1.3; } .cardmenu-item:hover { background: var(--brand-wash); } .drawer-section-action { font-family: var(--mono); font-size: 11px; color: var(--ink-soft); transition: color 150ms; } .drawer-section-action:hover { color: var(--ink-strong); } .field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 20px 18px; } .field { display: flex; flex-direction: column; gap: 7px; min-width: 0; } .field.full { grid-column: 1 / -1; } .field-label { /* 10.5px (was 9) — same 2026-06-09 legibility pass; matches the .share-drawer precedent, which is now the base size. */ font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; } .field-value { font-family: var(--sans); font-size: 13px; color: var(--ink-strong); line-height: 1.4; } .field-value.alert, .field-value.over { font-weight: 600; } .field-value.alert { color: var(--urgent); } .field-value-detail { font-family: var(--mono); font-size: 10.5px; color: var(--ink-faint); margin-top: 1px; } /* ─────────── 7. Inputs (edit / create) ─────────── */ .field-input, .field-select, .drawer-title-input, .drawer-description-input { width: 100%; font-family: var(--sans); font-size: 13px; color: var(--ink-strong); background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-sm); padding: 8px 11px; line-height: 1.4; transition: border-color 150ms, box-shadow 150ms; } .field-input:focus, .drawer-title-input:focus, .drawer-description-input:focus { outline: none; border-color: rgba(28,22,12,0.30); box-shadow: 0 0 0 3px rgba(28,22,12,0.05); } .field-input.mono { font-family: var(--mono); font-size: 12px; } /* Shared date field — native picker (calendar popup) dressed as our input. */ .field-date { position: relative; } .field-date-input { width: 100%; cursor: pointer; color: var(--ink-strong); } .field-date-input:focus { outline: none; border-color: rgba(28,22,12,0.30); box-shadow: 0 0 0 3px rgba(28,22,12,0.05); } .field-date-input::-webkit-calendar-picker-indicator { cursor: pointer; opacity: 0.55; margin-left: 4px; transition: opacity 150ms; } .field-date-input:hover::-webkit-calendar-picker-indicator { opacity: 0.9; } /* Empty native date inputs render their dd/mm/yyyy template muted to read as a placeholder. */ .field-date-input:in-range::-webkit-datetime-edit, .field-date-input::-webkit-datetime-edit { color: var(--ink-strong); } .field-date-input[value=""]::-webkit-datetime-edit { color: var(--ink-muted); } .field-input::placeholder, .drawer-title-input::placeholder, .drawer-description-input::placeholder { color: var(--ink-muted); font-style: italic; } /* #106 dark placeholder legibility — the light rules above (and .note-input / .quick-add-input below) read --ink-muted / --ink-faint, which go too faint to register as help text on the dark field. Dark repoints every shared text-entry placeholder to the readable --ink-placeholder token. Light is untouched. */ [data-theme="dark"] .field-input::placeholder, [data-theme="dark"] .drawer-title-input::placeholder, [data-theme="dark"] .drawer-description-input::placeholder, [data-theme="dark"] .note-input::placeholder, [data-theme="dark"] .quick-add-input::placeholder { color: var(--ink-placeholder); } .field-select { display: flex; align-items: center; justify-content: space-between; cursor: pointer; } .field-select.placeholder { color: var(--ink-muted); font-style: italic; } .field-select-chevron { color: var(--ink-muted); font-size: 9px; } /* Interactive enum dropdown — native