/* Cascade — app.css Single stylesheet for the greenfield build. Uses @layer for deterministic specificity across the cascade. Visual language locked to navy/gold per docs/DEMO_ARCHITECTURE.md + demo precedent. Load order: tokens — design tokens (CSS custom properties) reset — minimal modern reset base — typography, form/element defaults layout — site shell (header, nav, main, footer, skip-link) components — cards, buttons, badges, tables, forms, tiles utilities — atomic helpers (always win against components) */ @layer tokens, reset, base, layout, components, utilities; /* ------------------------------------------------------------------------- @layer tokens — design tokens ------------------------------------------------------------------------- */ @layer tokens { :root { /* Brand palette — locked */ --color-navy: #1A2744; --color-navy-600: #232F52; /* hover on navy surfaces */ --color-navy-800: #141E36; /* footer, deeper accents */ --color-gold: #C9A84C; --color-gold-600: #B89838; /* hover on gold surfaces */ /* Neutrals */ --color-bg: #F5F5F7; --color-surface: #FFFFFF; --color-border: #E5E7EB; --color-border-strong: #D1D5DB; --color-text: #1A2744; --color-text-muted: #6B7280; --color-text-subtle: #9CA3AF; /* Semantic */ --color-success: #065F46; --color-success-bg: #D1FAE5; --color-warning: #78350F; --color-warning-bg: #FEF3C7; --color-danger: #991B1B; --color-danger-bg: #FEE2E2; --color-info: #1E40AF; --color-info-bg: #DBEAFE; /* Role-based aliases (prefer these in components). Dark-mode block below overrides these; components should reference these, not the brand tokens. */ --bg-page: var(--color-bg); --bg-surface: var(--color-surface); --bg-surface-2: #F9FAFB; /* sunken surface (search bar, dashed placeholders, ss-mini) */ --bg-header: var(--color-navy); /* legacy — used only by old top-header. Dying. */ --fg-on-navy: #FFFFFF; --fg-accent: var(--color-gold); --border-card: var(--color-border); /* Semantic accent — drives hover/active states, badges, links. Defaults to brand gold; a future per-user preference can override via inline style on . Components reference --accent, not --color-gold, so the swap is transparent. */ --accent: var(--color-gold); --accent-fg: #1A2744; --accent-soft: color-mix(in srgb, var(--accent) 15%, transparent); /* Density tokens — mutated by [data-density="..."] block */ --row-h: 40px; --pad: 16px; --gap: 12px; /* User-preference radius — mutated by [data-radius="..."] block */ --radius: var(--radius-md); /* Sidebar width — mutated by [data-sidebar="..."] block */ --sidebar-w: 240px; /* Type */ --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-mono: "SF Mono", Consolas, "Liberation Mono", Menlo, monospace; /* Fluid type scale — clamp(min, preferred-vw, max). Each step grows ~1rem between 320px and 1400px viewport. */ --fs-xs: 0.75rem; /* 12px */ --fs-sm: 0.8125rem; /* 13px */ --fs-base: 0.9375rem; /* 15px — matches demo */ --fs-md: 1rem; /* 16px */ --fs-lg: clamp(1.0625rem, 0.95rem + 0.4vw, 1.25rem); --fs-xl: clamp(1.25rem, 1.05rem + 0.7vw, 1.5rem); --fs-2xl: clamp(1.5rem, 1.2rem + 1.1vw, 2rem); --fs-3xl: clamp(1.875rem, 1.4rem + 1.8vw, 2.75rem); --fw-regular: 400; --fw-medium: 500; --fw-semibold: 600; --fw-bold: 700; --lh-tight: 1.15; --lh-base: 1.5; --lh-relaxed: 1.65; /* Spacing — 4px base */ --space-1: 0.25rem; /* 4 */ --space-2: 0.5rem; /* 8 */ --space-3: 0.75rem; /* 12 */ --space-4: 1rem; /* 16 */ --space-5: 1.25rem; /* 20 */ --space-6: 1.5rem; /* 24 */ --space-8: 2rem; /* 32 */ --space-10: 2.5rem; /* 40 */ --space-12: 3rem; /* 48 */ --space-16: 4rem; /* 64 */ /* Radii */ --radius-sm: 3px; --radius-md: 4px; --radius-lg: 8px; --radius-xl: 12px; --radius-full: 9999px; /* Shadows — 3 levels, consistent with demo */ --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.08); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.12); /* Z-index scale */ --z-back-to-top: 90; --z-header: 100; --z-dropdown: 200; --z-toast: 800; --z-modal: 1000; /* Motion */ --ease-out: cubic-bezier(0.2, 0.8, 0.2, 1); --duration-1: 120ms; --duration-2: 200ms; --duration-3: 320ms; /* Layout */ --container-max: 1200px; --container-pad: var(--space-8); } /* -- Dark mode -- Applied by [data-dark="true"] on . Keeps navy/gold readable by using navy as an accented dark surface rather than flattening to black. */ :root[data-dark="true"] { --color-bg: #0F1628; /* deep navy-black */ --color-surface: #1A2744; /* brand navy becomes the card surface */ --color-border: #2A3A63; --color-border-strong: #3A4C7A; --color-text: #F5F5F7; --color-text-muted: #9CA3AF; --color-text-subtle: #6B7280; --bg-page: var(--color-bg); --bg-surface: var(--color-surface); --bg-surface-2: #14203A; --border-card: var(--color-border); --accent-fg: #1A2744; --accent-soft: color-mix(in srgb, var(--accent) 22%, #000); --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-md: 0 2px 6px rgba(0, 0, 0, 0.35); --shadow-lg: 0 8px 24px rgba(0, 0, 0, 0.5); } /* -- Density variants (personal preference) -- */ :root[data-density="comfortable"] { --row-h: 48px; --pad: 20px; --gap: 16px; } :root[data-density="dense"] { --row-h: 32px; --pad: 12px; --gap: 8px; } /* -- Radius variant (personal preference) -- Also bumps radius-lg + radius-sm in proportion so whole surface feels cohesive. */ :root[data-radius="sharp"] { --radius: 2px; --radius-sm: 2px; --radius-lg: 4px; } :root[data-radius="soft"] { --radius: 10px; --radius-sm: 6px; --radius-lg: 14px; } /* -- Sidebar variant -- */ :root[data-sidebar="narrow"] { --sidebar-w: 64px; } :root[data-sidebar="wide"] { --sidebar-w: 240px; } } /* ------------------------------------------------------------------------- @layer reset — minimal modern reset (Inspired by Andy Bell / Josh Comeau) ------------------------------------------------------------------------- */ @layer reset { *, *::before, *::after { box-sizing: border-box; } * { margin: 0; } html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; tab-size: 4; } body { min-block-size: 100vh; line-height: var(--lh-base); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, picture, video, canvas, svg { display: block; max-inline-size: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; } p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; } ul[role="list"], ol[role="list"] { list-style: none; padding: 0; } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } } /* ------------------------------------------------------------------------- @layer base — document defaults ------------------------------------------------------------------------- */ @layer base { body { font-family: var(--font-sans); font-size: var(--fs-base); color: var(--color-text); background: var(--bg-page); } h1, h2, h3, h4, h5, h6 { line-height: var(--lh-tight); font-weight: var(--fw-semibold); color: var(--color-navy); } h1 { font-size: var(--fs-2xl); } h2 { font-size: var(--fs-xl); } h3 { font-size: var(--fs-lg); } h4 { font-size: var(--fs-md); } a { color: var(--color-navy); text-decoration-color: var(--color-gold); text-underline-offset: 2px; } a:hover { color: var(--color-navy-600); } :focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; border-radius: var(--radius-sm); } ::selection { background: var(--color-gold); color: var(--color-navy); } hr { border: 0; border-block-start: 1px solid var(--color-border); margin-block: var(--space-6); } code, pre, kbd, samp { font-family: var(--font-mono); font-size: 0.875em; } } /* ------------------------------------------------------------------------- @layer layout — site shell ------------------------------------------------------------------------- */ @layer layout { /* Skip link — keyboard users first stop */ .skip-link { position: absolute; inset-block-start: -40px; inset-inline-start: var(--space-4); background: var(--color-navy); color: var(--fg-on-navy); padding: var(--space-2) var(--space-4); border-radius: var(--radius-md); z-index: calc(var(--z-header) + 1); transition: inset-block-start var(--duration-2) var(--ease-out); } .skip-link:focus { inset-block-start: var(--space-2); } /* ------- App shell: sidebar + topbar ------- */ .app-shell { display: grid; grid-template-columns: var(--sidebar-w) 1fr; min-block-size: 100vh; } @media (max-width: 800px) { .app-shell { grid-template-columns: 1fr; } } /* ------- Sidebar ------- */ .sidebar { background: var(--bg-surface); border-inline-end: 1px solid var(--color-border); display: flex; flex-direction: column; padding: var(--space-4) var(--space-3); position: sticky; inset-block-start: 0; block-size: 100vh; overflow-y: auto; } @media (max-width: 800px) { .sidebar { display: none; } /* mobile: TODO drawer */ } .brand { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-3) var(--space-4); font-weight: var(--fw-semibold); font-size: var(--fs-md); letter-spacing: -0.01em; color: var(--color-text); } .brand-mark { inline-size: 28px; block-size: 28px; border-radius: var(--radius); background: var(--color-navy); color: var(--color-gold); display: grid; place-items: center; font-family: var(--font-mono); font-weight: var(--fw-bold); font-size: var(--fs-sm); flex: 0 0 auto; } .brand-mark img { inline-size: 20px; block-size: 20px; } .brand-text .accent { color: var(--accent); } .brand-text .sub { font-size: var(--fs-xs); font-weight: var(--fw-regular); color: var(--color-text-subtle); line-height: 1.1; } :root[data-sidebar="narrow"] .brand-text { display: none; } /* Nav group label (Workspace / Insights / Admin) */ .nav-label { font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--color-text-subtle); padding: var(--space-3) var(--space-3) var(--space-1); font-weight: var(--fw-semibold); } :root[data-sidebar="narrow"] .nav-label { display: none; } /* Nav item */ .nav-item { display: flex; align-items: center; gap: var(--space-3); padding: 7px var(--space-3); border-radius: var(--radius); color: var(--color-text-muted); text-decoration: none; font-weight: var(--fw-medium); font-size: var(--fs-sm); user-select: none; transition: background var(--duration-1) var(--ease-out), color var(--duration-1) var(--ease-out); } .nav-item:hover { background: color-mix(in srgb, var(--color-text) 6%, transparent); color: var(--color-text); } /* Active — elevated surface treatment, not a color bar */ .nav-item[aria-current="page"] { background: var(--bg-surface-2); color: var(--color-text); box-shadow: var(--shadow-sm); } :root[data-dark="true"] .nav-item[aria-current="page"] { background: var(--bg-surface-2); color: var(--color-text); } .nav-item .nav-icon { inline-size: 16px; block-size: 16px; flex: 0 0 auto; opacity: 0.9; } .nav-item .nav-label-text { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nav-item .nav-badge { margin-inline-start: auto; font-family: var(--font-mono); font-size: var(--fs-xs); background: var(--accent-soft); color: var(--accent); padding: 1px 6px; border-radius: var(--radius-full); font-weight: var(--fw-medium); } :root[data-sidebar="narrow"] .nav-item { justify-content: center; padding: 9px 0; } :root[data-sidebar="narrow"] .nav-item .nav-label-text, :root[data-sidebar="narrow"] .nav-item .nav-badge { display: none; } /* Sidebar foot — user + role */ .sidebar-foot { margin-block-start: auto; border-block-start: 1px solid var(--color-border); display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); } .avatar { inline-size: 28px; block-size: 28px; border-radius: 50%; background: linear-gradient(135deg, color-mix(in srgb, var(--accent) 60%, white), var(--accent)); color: white; display: grid; place-items: center; font-size: var(--fs-xs); font-weight: var(--fw-semibold); font-family: var(--font-mono); flex: 0 0 auto; } .who { display: flex; flex-direction: column; min-inline-size: 0; } .who .name { font-size: var(--fs-sm); font-weight: var(--fw-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--color-text); } .who .role { font-size: var(--fs-xs); color: var(--color-text-subtle); } :root[data-sidebar="narrow"] .who { display: none; } /* ------- Topbar ------- */ .topbar { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3) var(--space-6); border-block-end: 1px solid var(--color-border); background: var(--bg-page); position: sticky; inset-block-start: 0; z-index: var(--z-header); min-block-size: 52px; } .crumbs { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); font-size: var(--fs-sm); } .crumbs .sep { opacity: 0.5; } .crumbs .here { color: var(--color-text); font-weight: var(--fw-medium); } .search { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-2); background: var(--bg-surface-2); border: 1px solid var(--color-border); padding: 6px var(--space-3); border-radius: var(--radius); inline-size: 280px; color: var(--color-text-muted); font-size: var(--fs-sm); } .search input { background: transparent; border: 0; outline: 0; flex: 1; font-size: var(--fs-sm); color: var(--color-text); } .search .k { font-family: var(--font-mono); font-size: var(--fs-xs); padding: 1px 5px; border: 1px solid var(--color-border); border-radius: 3px; color: var(--color-text-subtle); } @media (max-width: 700px) { .search { inline-size: auto; } .search input { inline-size: 120px; } } .icon-btn { inline-size: 32px; block-size: 32px; display: grid; place-items: center; border-radius: var(--radius); border: 1px solid transparent; background: transparent; cursor: pointer; color: var(--color-text-muted); padding: 0; } .icon-btn:hover { background: var(--bg-surface-2); color: var(--color-text); } .sep-v { inline-size: 1px; block-size: 18px; background: var(--color-border); margin: 0 var(--space-1); } /* ------- Main content region (inside the right column) ------- */ .page-area { display: flex; flex-direction: column; min-block-size: 100vh; } .site-main { max-inline-size: var(--container-max); margin-inline: auto; padding: var(--space-8) var(--space-6); inline-size: 100%; } .site-main--narrow { max-inline-size: 720px; } /* Footer */ .site-footer { color: var(--color-text-muted); font-size: var(--fs-xs); padding: var(--space-6) var(--space-6) var(--space-8); text-align: center; border-block-start: 1px solid var(--color-border); margin-block-start: auto; } /* Auth / pre-auth layout — no nav, centered */ .auth-shell { min-block-size: 100vh; display: grid; place-items: center; padding: var(--space-8); } .auth-shell .brand { text-align: center; margin-block-end: var(--space-6); } .auth-shell .brand img { block-size: 44px; inline-size: auto; margin-inline: auto; } } /* ------------------------------------------------------------------------- @layer components — reusable building blocks ------------------------------------------------------------------------- */ @layer components { /* -- Card -- */ .card { background: var(--bg-surface); border: 1px solid var(--border-card); border-radius: var(--radius-lg); padding: var(--space-6); box-shadow: var(--shadow-sm); } .card__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin-block-end: var(--space-3); } .card__body > * + * { margin-block-start: var(--space-3); } /* -- Tile grid (dashboard) -- */ .tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-6); } .tile { display: block; background: var(--bg-surface); border: 1px solid var(--border-card); border-radius: var(--radius-lg); padding: var(--space-6); color: var(--color-text); text-decoration: none; box-shadow: var(--shadow-sm); transition: transform var(--duration-2) var(--ease-out), box-shadow var(--duration-2) var(--ease-out), border-color var(--duration-1) var(--ease-out); } .tile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--color-gold); } .tile__eyebrow { color: var(--color-gold-600); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.06em; margin-block-end: var(--space-2); } .tile__title { font-size: var(--fs-lg); font-weight: var(--fw-semibold); margin-block-end: var(--space-2); } .tile__desc { color: var(--color-text-muted); font-size: var(--fs-sm); line-height: var(--lh-base); } /* -- Button -- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-2) var(--space-5); border-radius: var(--radius-md); border: 1px solid transparent; font-size: var(--fs-sm); font-weight: var(--fw-semibold); line-height: 1; text-decoration: none; cursor: pointer; transition: background var(--duration-1) var(--ease-out), color var(--duration-1) var(--ease-out), border-color var(--duration-1) var(--ease-out); } .btn--primary { background: var(--color-navy); color: var(--fg-on-navy); } .btn--primary:hover { background: var(--color-navy-600); } .btn--accent { background: var(--color-gold); color: var(--color-navy); } .btn--accent:hover { background: var(--color-gold-600); color: var(--color-navy); } .btn--ghost { background: transparent; color: var(--color-navy); border-color: var(--color-border-strong); } .btn--ghost:hover { border-color: var(--color-gold); color: var(--color-navy); } .btn--sm { padding: var(--space-1) var(--space-3); font-size: var(--fs-xs); } .btn[disabled] { opacity: 0.5; cursor: not-allowed; } /* -- Badge -- */ .badge { display: inline-flex; align-items: center; padding: 0.125rem var(--space-2); border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: var(--fw-bold); letter-spacing: 0.02em; text-transform: uppercase; white-space: nowrap; } .badge--success { background: var(--color-success-bg); color: var(--color-success); } .badge--warning { background: var(--color-warning-bg); color: var(--color-warning); } .badge--danger { background: var(--color-danger-bg); color: var(--color-danger); } .badge--info { background: var(--color-info-bg); color: var(--color-info); } .badge--neutral { background: var(--color-border); color: var(--color-text); } /* -- Form fields -- */ .field { display: flex; flex-direction: column; gap: var(--space-2); } .field__label { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--color-text); } .field__hint { font-size: var(--fs-xs); color: var(--color-text-muted); } .input, .select, .textarea { font-family: inherit; font-size: var(--fs-base); padding: var(--space-2) var(--space-3); border: 1px solid var(--color-border-strong); border-radius: var(--radius-md); background: var(--bg-surface); color: var(--color-text); inline-size: 100%; transition: border-color var(--duration-1) var(--ease-out), box-shadow var(--duration-1) var(--ease-out); } .input:focus, .select:focus, .textarea:focus { outline: none; border-color: var(--color-gold); box-shadow: 0 0 0 3px rgba(201, 168, 76, 0.2); } .textarea { min-block-size: 6rem; resize: vertical; } /* -- Table -- */ .table { inline-size: 100%; border-collapse: collapse; background: var(--bg-surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-sm); } .table thead th { text-align: start; font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: 0.06em; color: var(--color-text-muted); padding: var(--space-3) var(--space-4); background: var(--color-bg); border-block-end: 1px solid var(--color-border); } .table tbody td { padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--color-border); vertical-align: middle; } .table tbody tr:last-child td { border-block-end: 0; } .table tbody tr:hover { background: rgba(201, 168, 76, 0.06); } /* -- Back-to-top (JS adds .is-visible) -- */ .back-to-top { position: fixed; inset-inline-end: var(--space-6); inset-block-end: var(--space-6); inline-size: 44px; block-size: 44px; border-radius: var(--radius-full); background: var(--color-navy); color: var(--color-gold); border: 2px solid var(--color-gold); font-size: var(--fs-md); font-weight: var(--fw-bold); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-md); opacity: 0; pointer-events: none; transform: translateY(8px); transition: opacity var(--duration-2) var(--ease-out), transform var(--duration-2) var(--ease-out), background var(--duration-1) var(--ease-out); z-index: var(--z-back-to-top); } .back-to-top.is-visible { opacity: 1; pointer-events: auto; transform: translateY(0); } .back-to-top:hover { background: var(--color-navy-600); } /* -- Dashboard hero -- */ .hero { display: grid; grid-template-columns: 1fr auto; gap: var(--space-8); align-items: center; margin-block-end: var(--space-8); } .hero h1 { font-size: var(--fs-2xl); margin-block-end: var(--space-2); } .hero h1 .accent { color: var(--color-gold); } .hero .sub { color: var(--color-text-muted); font-size: var(--fs-base); line-height: var(--lh-base); max-inline-size: 56ch; } @media (max-width: 720px) { .hero { grid-template-columns: 1fr; } .mic-area { order: -1; text-align: center; } } /* -- Mic quick-add button -- */ .mic-area { text-align: center; } .mic-btn { display: inline-flex; align-items: center; justify-content: center; inline-size: 88px; block-size: 88px; border-radius: var(--radius-full); background: linear-gradient(135deg, var(--color-gold) 0%, var(--color-gold-600) 100%); border: 4px solid var(--color-navy); color: var(--color-navy); cursor: pointer; box-shadow: 0 6px 24px rgba(201, 168, 76, 0.4); transition: transform var(--duration-1) var(--ease-out), box-shadow var(--duration-1) var(--ease-out); text-decoration: none; } .mic-btn:hover { transform: scale(1.08); box-shadow: 0 8px 32px rgba(201, 168, 76, 0.5); } .mic-btn:active { transform: scale(0.96); } .mic-label { display: block; margin-block-start: var(--space-2); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); } /* -- Stats row (top-of-dashboard summary numbers) -- */ .stats-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: var(--space-3); margin-block-end: var(--space-8); } .stat-card { background: var(--bg-surface); border-radius: var(--radius-lg); padding: var(--space-4) var(--space-5); box-shadow: var(--shadow-sm); } .stat-card .n { font-size: var(--fs-2xl); font-weight: 800; color: var(--color-navy); line-height: 1; } .stat-card .label { font-size: var(--fs-xs); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 0.05em; font-weight: var(--fw-bold); margin-block-start: var(--space-2); } .stat-card--accent .n { color: var(--color-gold); } /* -- Two-column dashboard grid (left: charts, right: placeholders) -- */ .grid-2 { display: grid; grid-template-columns: 1.4fr 1fr; gap: var(--space-5); margin-block-end: var(--space-8); } .grid-2 > * > * + * { margin-block-start: var(--space-5); } @media (max-width: 900px) { .grid-2 { grid-template-columns: 1fr; } } /* -- Card heading used inside .card on dashboard -- */ .card__heading { font-size: var(--fs-md); text-transform: uppercase; letter-spacing: 0.05em; font-weight: var(--fw-bold); color: var(--color-navy); margin-block-end: var(--space-4); } /* -- Chart wrapper -- */ .chart-wrap { position: relative; inline-size: 100%; max-block-size: 320px; } .chart-wrap--sm { max-block-size: 260px; } /* -- Dashed placeholder card ("coming soon") -- */ .placeholder { background: #F9FAFB; border: 2px dashed var(--color-border-strong); border-radius: var(--radius-lg); padding: var(--space-8) var(--space-6); text-align: center; color: var(--color-text-subtle); font-size: var(--fs-sm); line-height: var(--lh-base); } .placeholder strong { color: var(--color-text-muted); display: block; margin-block-end: var(--space-2); } .placeholder .icon-hero { font-size: var(--fs-2xl); opacity: 0.5; display: block; margin-block-end: var(--space-2); } .placeholder em { font-size: var(--fs-xs); display: inline-block; margin-block-start: var(--space-2); } /* -- Sweet Spot mini summary (used on dashboard + deal-detail) -- */ .ss-mini { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4); background: #F9FAFB; border-radius: var(--radius-md); border: 1px solid var(--color-border); } .ss-mini .big-n { font-size: var(--fs-2xl); font-weight: 800; color: var(--color-gold); line-height: 1; min-inline-size: 48px; text-align: center; } .ss-mini .detail { font-size: var(--fs-sm); color: var(--color-text-muted); } .ss-mini .detail strong { color: var(--color-navy); } .ss-mini .detail a { color: var(--color-gold-600); font-weight: var(--fw-semibold); } /* -- Icon (Lucide inline SVG from includes/icon.php) -- */ .icon { display: inline-block; vertical-align: -0.15em; flex-shrink: 0; color: currentColor; stroke: currentColor; fill: none; } .icon--missing { inline-size: 1em; block-size: 1em; background: var(--color-danger-bg); border-radius: var(--radius-sm); } /* -- Password-visibility eye toggle (login + any password input) -- */ .pw-wrap { position: relative; } .pw-wrap input { padding-inline-end: 2.5rem; } .pw-eye { position: absolute; inset-inline-end: 0.5rem; inset-block-start: 50%; transform: translateY(-50%); inline-size: 28px; block-size: 28px; background: transparent; border: none; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; color: var(--color-text-muted); } .pw-eye:hover, .pw-eye:focus-visible { color: var(--color-gold); outline: none; } .pw-eye svg { inline-size: 18px; block-size: 18px; } /* -- User menu dropdown (topbar avatar button) -- */ .user-menu { position: relative; } .avatar--button { border: none; cursor: pointer; font-family: inherit; padding: 0; } .avatar--button:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; } .user-menu-dropdown { position: absolute; inset-block-start: calc(100% + 8px); inset-inline-end: 0; min-inline-size: 220px; background: var(--bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); z-index: var(--z-dropdown); overflow: hidden; padding-block: var(--space-1); } .user-menu-header { padding: var(--space-3) var(--space-4); background: var(--bg-surface-2); border-block-end: 1px solid var(--color-border); } .user-menu-header .name { font-weight: var(--fw-semibold); color: var(--color-text); font-size: var(--fs-sm); } .user-menu-header .role { font-size: var(--fs-xs); color: var(--color-text-subtle); } .user-menu-dropdown a, .user-menu-dropdown button { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2) var(--space-4); color: var(--color-text); text-decoration: none; font-size: var(--fs-sm); background: transparent; border: none; inline-size: 100%; text-align: start; cursor: pointer; font-family: inherit; } .user-menu-dropdown a:hover, .user-menu-dropdown button:hover { background: var(--bg-surface-2); } /* -- Sidebar foot as clickable link -- */ a.sidebar-foot { text-decoration: none; color: inherit; transition: background var(--duration-1) var(--ease-out); } a.sidebar-foot:hover { background: var(--bg-surface-2); } /* -- Sweet Spot stoplight dot (used on pipeline rows) -- */ .stoplight { display: inline-block; inline-size: 12px; block-size: 12px; border-radius: 50%; background: var(--color-border-strong); vertical-align: -2px; } .stoplight--green { background: #22C55E; } .stoplight--yellow { background: #F59E0B; } .stoplight--red { background: #DC2626; } /* -- Priority badge mapping (uses base .badge variants) -- */ .badge--priority-high { background: var(--color-danger-bg); color: var(--color-danger); } .badge--priority-medium { background: var(--color-warning-bg); color: var(--color-warning); } .badge--priority-low { background: var(--color-success-bg); color: var(--color-success); } .badge--priority-undefined { background: var(--color-border); color: var(--color-text-muted); } .badge--priority-dead { background: #1F2937; color: #F3F4F6; } /* -- Priority inline editor (select styled like the badge) -- */ .priority-select { appearance: none; -webkit-appearance: none; border: 0; padding: 0.125rem var(--space-2); padding-inline-end: 18px; /* room for the caret overlay */ border-radius: var(--radius-sm); font-size: var(--fs-xs); font-weight: var(--fw-bold); text-transform: uppercase; letter-spacing: 0.02em; cursor: pointer; font-family: inherit; line-height: 1.2; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 4px center; background-size: 10px 10px; } .priority-select option { background: var(--bg-surface); color: var(--color-text); } .priority-select[data-priority="high"] { background-color: var(--color-danger-bg); color: var(--color-danger); } .priority-select[data-priority="medium"] { background-color: var(--color-warning-bg); color: var(--color-warning); } .priority-select[data-priority="low"] { background-color: var(--color-success-bg); color: var(--color-success); } .priority-select[data-priority="undefined"] { background-color: var(--color-border); color: var(--color-text-muted); } .priority-select[data-priority="dead"] { background-color: #1F2937; color: #F3F4F6; } .priority-select:focus-visible { outline: 2px solid var(--color-gold); outline-offset: 2px; } .priority-select.is-saving { opacity: 0.6; } .priority-select.is-error { outline: 2px solid var(--color-danger); } /* -- Source badge (Dynamo-synced vs locally-created) -- */ .badge--source-dynamo { background: var(--color-info-bg); color: var(--color-info); } .badge--source-local { background: var(--color-border); color: var(--color-text-muted); } /* -- Pipeline stage accordion (uses native
/) -- */ .stage-group { background: var(--bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); margin-block-end: var(--space-3); } .stage-group[open] { box-shadow: var(--shadow-md); } .stage-group > summary { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); cursor: pointer; list-style: none; font-weight: var(--fw-semibold); color: var(--color-text); border-radius: var(--radius-lg); } .stage-group > summary::-webkit-details-marker { display: none; } .stage-group > summary::before { content: "▶"; font-size: 10px; color: var(--color-text-muted); transition: transform var(--duration-1) var(--ease-out); } .stage-group[open] > summary::before { transform: rotate(90deg); } .stage-group > summary:hover { background: var(--bg-surface-2); } .stage-group .stage-count { margin-inline-start: auto; font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-text-muted); background: var(--bg-surface-2); padding: 1px var(--space-2); border-radius: var(--radius-full); } /* Populated stages — navy header to signal "has deals", matching demo */ .stage-group.stage-group--populated > summary { background: var(--color-navy); color: var(--fg-on-navy); } .stage-group.stage-group--populated > summary::before, .stage-group.stage-group--populated > summary .u-text-subtle { color: rgba(255, 255, 255, 0.85); } .stage-group.stage-group--populated > summary .stage-count { background: rgba(255, 255, 255, 0.15); color: var(--fg-on-navy); } .stage-group.stage-group--populated > summary:hover { background: var(--color-navy-600); } .stage-group .stage-body { padding: 0 var(--space-2) var(--space-2); } /* Pipeline stats row (narrower than dashboard stats) */ .pipeline-stats { display: flex; gap: var(--space-4); flex-wrap: wrap; margin-block-end: var(--space-6); } .pipeline-stats .stat { background: var(--bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); padding: var(--space-2) var(--space-4); font-size: var(--fs-sm); } .pipeline-stats .stat strong { font-size: var(--fs-lg); color: var(--color-navy); display: block; } /* -- Toast (aria-live region) -- */ .toast { position: fixed; inset-block-end: var(--space-6); inset-inline-start: 50%; transform: translateX(-50%) translateY(12px); background: var(--color-navy); color: var(--fg-on-navy); padding: var(--space-3) var(--space-5); border-radius: var(--radius-md); box-shadow: var(--shadow-lg); font-size: var(--fs-sm); opacity: 0; pointer-events: none; z-index: var(--z-toast); transition: opacity var(--duration-2) var(--ease-out), transform var(--duration-2) var(--ease-out); } .toast.is-visible { opacity: 1; transform: translateX(-50%) translateY(0); } /* ------- Tweaks / Preferences controls ------- */ /* The floating panel and the Settings page share these — consistent controls. */ .tweaks { position: fixed; inset-inline-end: var(--space-6); inset-block-start: 72px; inline-size: 300px; background: var(--bg-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); z-index: var(--z-dropdown); transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity var(--duration-2) var(--ease-out), transform var(--duration-2) var(--ease-out); } .tweaks.is-visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .tweaks-h { padding: var(--space-3) var(--space-4); border-block-end: 1px solid var(--color-border); display: flex; align-items: center; gap: var(--space-2); } .tweaks-h .tt { font-weight: var(--fw-semibold); font-size: var(--fs-sm); color: var(--color-text); } .tweaks-h .tt-sub { font-family: var(--font-mono); font-size: var(--fs-xs); color: var(--color-text-subtle); margin-inline-start: auto; } .tweaks-b { padding: var(--space-3) var(--space-4); display: flex; flex-direction: column; gap: var(--space-3); } .tweaks-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); } .tweaks-row .lbl { color: var(--color-text-muted); font-size: var(--fs-sm); } /* Segmented control */ .seg { display: inline-flex; border: 1px solid var(--color-border); border-radius: var(--radius); overflow: hidden; background: var(--bg-surface); } .seg button { background: transparent; border: 0; padding: 4px var(--space-3); font-size: var(--fs-xs); color: var(--color-text-muted); cursor: pointer; } .seg button.on { background: var(--bg-surface-2); color: var(--color-text); } /* Toggle switch */ .tog { inline-size: 34px; block-size: 20px; background: var(--color-border-strong); border-radius: var(--radius-full); position: relative; cursor: pointer; transition: background var(--duration-1) var(--ease-out); } .tog::after { content: ""; position: absolute; inset-block-start: 2px; inset-inline-start: 2px; inline-size: 16px; block-size: 16px; border-radius: 50%; background: white; box-shadow: var(--shadow-sm); transition: inset-inline-start var(--duration-1) var(--ease-out); } .tog.on { background: var(--accent); } .tog.on::after { inset-inline-start: 16px; } } /* ------------------------------------------------------------------------- @layer utilities — atomic helpers, always win ------------------------------------------------------------------------- */ @layer utilities { /* A11y */ .u-sr-only { position: absolute; inline-size: 1px; block-size: 1px; padding: 0; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; border: 0; } /* Flex / stack helpers */ .u-stack > * + * { margin-block-start: var(--space-4); } .u-stack-sm > * + * { margin-block-start: var(--space-2); } .u-stack-lg > * + * { margin-block-start: var(--space-8); } .u-row { display: flex; gap: var(--space-4); } .u-row--center { align-items: center; } .u-row--wrap { flex-wrap: wrap; } .u-spread { display: flex; justify-content: space-between; align-items: center; gap: var(--space-4); } /* Text */ .u-text-muted { color: var(--color-text-muted); } .u-text-subtle { color: var(--color-text-subtle); } .u-text-sm { font-size: var(--fs-sm); } .u-text-xs { font-size: var(--fs-xs); } .u-text-right { text-align: end; } .u-text-center { text-align: center; } /* Spacing (block) */ .u-mb-0 { margin-block-end: 0; } .u-mb-2 { margin-block-end: var(--space-2); } .u-mb-3 { margin-block-end: var(--space-3); } .u-mb-4 { margin-block-end: var(--space-4); } .u-mb-6 { margin-block-end: var(--space-6); } .u-mb-8 { margin-block-end: var(--space-8); } .u-mt-0 { margin-block-start: 0; } .u-mt-4 { margin-block-start: var(--space-4); } .u-mt-6 { margin-block-start: var(--space-6); } .u-mt-8 { margin-block-start: var(--space-8); } }