/* * uprise-ds.css — Uprise unified account design system (Phase 1) * ---------------------------------------------------------------------------- * ONE source of truth for tokens + a namespaced component kit, shared by every * account surface (login, SSO hub, billing, settings, plugins dashboard, admin, * host). Brand-matched to uprisemedia.co (warm ink, #FF5A2C accent, * oxblood->orange->amber CTA gradient). Single dark theme, no light mode. * * STRUCTURE * Part A - Token layer :root (single dark theme) * Part B - Page chrome body.u-app { ... } (opt-in; reskinned pages only) * Part C - Component kit .u-* (namespaced - never collides with existing * .card/.btn/.field/.pill on other surfaces) * * USAGE * - Reskinned consumer pages: FIRST, add class="u-app" to * , use .u-* components. No theme script needed (dark only). * - Plugins dashboard: consumes Part A tokens only (do NOT add .u-app). Its * own uprise.css/account.css must drop their :root color values. * * Accent #FF4F18 and rgba(255,79,24,…) are RETIRED. Use --accent / #FF5A2C. */ @import url("https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&family=Dancing+Script:wght@600;700&display=swap"); /* ============================================================================ PART A — TOKEN LAYER (collision-free; safe on every surface) ============================================================================ */ :root { /* Surfaces — warm ink */ --bg: #0E0D12; --surface: #17151C; --surface-2: #1E1B25; --surface-3: #262230; --spotlight: linear-gradient(160deg, #241D30, #15131B 70%); /* Accent — brand #FF5A2C (retires #FF4F18) */ --accent: #FF5A2C; --accent-2: #FFC247; --accent-soft: rgba(255, 90, 44, 0.15); --accent-glow: rgba(255, 90, 44, 0.32); --accent-ink: #FFB59C; /* accent text/glyph on accent-soft fills */ --accent-text: #FF7A4D; /* small (<18px) accent text — clears AA on dark */ --grad: linear-gradient(135deg, #CF3612, #FF5A2C 52%, #FFC247); --grad-text: linear-gradient(90deg, #FFC247, #E8421C); /* Text */ --text: #F4EFE7; --text-dim: #A89FB0; --text-faint: #7C7488; --logo-text: #F4EFE7; /* the "up" in the inline logo — theme-aware */ /* Hairlines */ --hairline: rgba(244, 239, 231, 0.09); --hairline-strong: rgba(244, 239, 231, 0.16); /* Status */ --green: #30D158; --yellow: #FFD60A; --red: #FF453A; --blue: #0A84FF; /* Elevation */ --card-shadow: 0 18px 48px rgba(0, 0, 0, 0.5); --glow: 0 6px 22px rgba(255, 90, 44, 0.32); --modal-back: rgba(0, 0, 0, 0.6); /* Type scale (6-step, carried from account.css) */ --type-meta: 11px; --type-row: 13px; --type-body: 15px; --type-card-title: 18px; --type-section: 28px; --type-hero: clamp(40px, 6vw, 64px); --type-display: clamp(36px, 5vw, 52px); --type-key: 24px; /* Radii */ --r-pill: 980px; --r-panel: 16px; --r-card: 13px; --r-chip: 9px; /* Motion — house easing. Both aliases kept for back-compat. */ --ease: cubic-bezier(0.23, 1, 0.32, 1); --ease-out: cubic-bezier(0.23, 1, 0.32, 1); /* Layout */ --maxw: 1140px; /* Fonts */ --sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; --script: "Dancing Script", cursive; } /* Dark-only: the account system ships a single warm-ink theme (no light mode). */ /* ============================================================================ PART B — PAGE CHROME (opt-in: body.u-app on reskinned pages only) ============================================================================ */ *, *::before, *::after { box-sizing: border-box; } body.u-app { margin: 0; background: var(--bg); color: var(--text); font-family: var(--sans); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.u-app ::selection { background: var(--accent); color: #fff; } body.u-app a { color: inherit; text-decoration: none; } /* Subtle grain overlay — the brand's analog texture */ body.u-app::after { content: ""; position: fixed; inset: 0; pointer-events: none; z-index: 9999; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } /* ============================================================================ PART C — COMPONENT KIT (.u-* — namespaced, collision-free) ============================================================================ */ /* Logo — the real inline SVG mark (see _ds/uprise-logo.html). Matches the live marketing site sizing: 32px in headers, 40px in footers. Prefer this over the text .u-wordmark on reskinned surfaces. */ .u-logo-link { display: inline-flex; align-items: center; } .u-logo { height: 32px; width: auto; display: block; } .u-logo-foot { height: 40px; } /* Wordmark: "Uprise" + script "Media" overlay (fallback / compact contexts) */ .u-wordmark { position: relative; display: inline-block; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--text); white-space: nowrap; } .u-wordmark .media { position: absolute; top: -0.52em; right: -0.06em; font-family: var(--script); font-weight: 700; letter-spacing: 0; color: var(--accent); line-height: 1; } /* Buttons — full-pill brand gradient + hover shine */ .u-btn { position: relative; overflow: hidden; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border: 1px solid transparent; border-radius: var(--r-pill); color: #fff; font-family: inherit; font-weight: 700; font-size: 14px; cursor: pointer; background: var(--grad); box-shadow: var(--glow); text-shadow: 0 1px 2px rgba(74, 20, 0, 0.3); transition: filter 0.2s var(--ease), box-shadow 0.2s var(--ease), transform 0.12s var(--ease); } .u-btn::after { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 46%; z-index: -1; pointer-events: none; background: linear-gradient(100deg, transparent, rgba(255,255,255,0.45), transparent); transform: translateX(-185%) skewX(-18deg); } .u-btn:hover { filter: brightness(1.07); transform: translateY(-1px); box-shadow: 0 10px 28px rgba(255,90,44,0.42); } .u-btn:hover::after { animation: u-cta-sweep 1.1s var(--ease); } @keyframes u-cta-sweep { to { transform: translateX(360%) skewX(-18deg); } } .u-btn:active { transform: scale(0.98); } .u-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .u-btn[disabled], .u-btn:disabled { opacity: 0.55; cursor: default; filter: none; transform: none; } .u-btn-ghost { background: transparent; color: var(--text); border-color: var(--hairline-strong); box-shadow: none; text-shadow: none; } .u-btn-ghost::after { display: none; } .u-btn-ghost:hover { filter: none; border-color: var(--text-dim); background: var(--surface-2); box-shadow: none; } .u-btn-block { width: 100%; } /* OAuth / secondary button (e.g. "Continue with Google") */ .u-btn-oauth { display: inline-flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 12px 16px; border-radius: var(--r-chip); border: 1px solid var(--hairline-strong); background: transparent; color: var(--text); font-family: inherit; font-weight: 600; font-size: 14px; cursor: pointer; text-decoration: none; transition: border-color 0.2s var(--ease), background 0.2s var(--ease), transform 0.12s var(--ease); } .u-btn-oauth:hover { border-color: var(--text-dim); background: var(--surface-2); } .u-btn-oauth:active { transform: scale(0.98); } .u-btn-oauth:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* Inputs / fields */ .u-input, .u-field { width: 100%; padding: 12px 14px; border-radius: var(--r-chip); border: 1px solid var(--hairline-strong); background: var(--surface-2); color: var(--text); font-family: inherit; font-size: 15px; transition: border-color 0.15s var(--ease), box-shadow 0.15s var(--ease); } .u-input::placeholder, .u-field::placeholder { color: var(--text-faint); } .u-input:focus, .u-field:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); } .u-input:disabled, .u-field:disabled { opacity: 0.6; } .u-label { display: block; font-weight: 600; font-size: 12px; letter-spacing: 0.02em; color: var(--text-dim); margin: 0 0 6px; } /* Card */ .u-card { background: var(--surface); border: 1px solid var(--hairline); border-radius: var(--r-panel); padding: 28px; box-shadow: var(--card-shadow); position: relative; } /* Pills */ .u-pill { display: inline-block; font-size: 10px; font-weight: 700; padding: 3px 9px; border-radius: var(--r-chip); background: var(--surface-2); color: var(--text-dim); letter-spacing: 0.02em; } .u-pill-ok { background: rgba(48, 209, 88, 0.14); color: var(--green); } .u-pill-warn { background: rgba(255, 214, 10, 0.15); color: #FFE07A; } .u-pill-risk { background: rgba(255, 69, 58, 0.15); color: #FF8A80; } .u-pill-accent { background: var(--accent-soft); color: var(--accent-ink); } /* Avatar (initials/gradient monogram) */ .u-avatar { display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; color: #fff; font-weight: 700; flex: 0 0 auto; background: var(--grad); } /* Topbar (reskinned app pages) */ .u-topbar { display: flex; align-items: center; justify-content: space-between; padding: 14px 22px; position: sticky; top: 0; z-index: 50; border-bottom: 1px solid var(--hairline); background: color-mix(in srgb, var(--bg) 78%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); } /* Toast */ .u-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(8px); background: var(--surface-2); border: 1px solid var(--hairline-strong); border-radius: 12px; padding: 11px 16px; font-size: 14px; color: var(--text); box-shadow: var(--card-shadow); max-width: 360px; z-index: 200; opacity: 0; pointer-events: none; transition: opacity 0.2s var(--ease), transform 0.2s var(--ease); } .u-toast.visible { opacity: 1; transform: translateX(-50%) translateY(0); } .u-toast-error { border-color: rgba(255, 69, 58, 0.5); } /* ---------------------------------------------------------------------------- ACCOUNT SHELL — persistent header + left sidebar (the unified account home). Fixed full-width header, fixed sidebar below it, content offset by both. Mobile (<900px): sidebar slides off-canvas behind a scrim, toggled by the hamburger. Mirrors the proven dashboard shell, namespaced for the DS. ---------------------------------------------------------------------------- */ :root { --u-header-h: 64px; --u-sidebar-w: 240px; --u-content-maxw: 860px; } /* Header sits fixed across the top (use INSTEAD of plain .u-topbar in shells) */ .u-shell-header { position: fixed; top: 0; left: 0; right: 0; z-index: 200; height: var(--u-header-h); display: flex; align-items: center; padding: 0 20px; gap: 12px; border-bottom: 1px solid var(--hairline); background: color-mix(in srgb, var(--bg) 80%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); } .u-shell-header-inner { display: flex; align-items: center; justify-content: space-between; width: 100%; max-width: calc(var(--u-sidebar-w) + var(--u-content-maxw) + 48px); margin: 0 auto; } .u-shell-header-left { display: flex; align-items: center; gap: 12px; } .u-shell-layout { display: flex; min-height: 100vh; min-height: 100dvh; padding-top: var(--u-header-h); } .u-sidebar { position: fixed; top: var(--u-header-h); left: 0; bottom: 0; width: var(--u-sidebar-w); z-index: 100; background: var(--surface); border-right: 1px solid var(--hairline); display: flex; flex-direction: column; overflow-y: auto; padding: 22px 0 28px; transition: transform 250ms var(--ease); } .u-sidebar-nav { flex: 1; display: flex; flex-direction: column; gap: 2px; padding: 0 12px; } .u-side-item { display: flex; align-items: center; gap: 10px; padding: 10px 14px; border-radius: 10px; font-size: var(--type-row); font-weight: 500; color: var(--text-dim); text-decoration: none; position: relative; transition: color 200ms var(--ease), background 200ms var(--ease); } .u-side-item:hover { color: var(--text); background: rgba(244,239,231,0.04); } .u-side-item.active { color: var(--accent); background: var(--accent-soft); } .u-side-item.active::before { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 3px; border-radius: 0 3px 3px 0; background: var(--accent); } .u-side-item:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .u-side-icon { width: 18px; height: 18px; flex-shrink: 0; opacity: 0.7; stroke: currentColor; fill: none; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; } .u-side-item.active .u-side-icon { opacity: 1; } .u-sidebar-divider { height: 1px; background: var(--hairline); margin: 12px 16px; } .u-sidebar-foot { padding: 0 12px; } .u-shell-main { margin-left: var(--u-sidebar-w); flex: 1; min-width: 0; padding: 48px 40px 80px; max-width: calc(var(--u-sidebar-w) + var(--u-content-maxw)); } .u-shell-content { max-width: var(--u-content-maxw); margin: 0 auto; } /* Mobile hamburger + scrim */ .u-hamburger { display: none; background: none; border: 0; cursor: pointer; width: 40px; height: 40px; border-radius: 10px; align-items: center; justify-content: center; padding: 0; color: var(--text); } .u-hamburger svg { width: 22px; height: 22px; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; fill: none; } .u-hamburger:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .u-scrim { position: fixed; inset: var(--u-header-h) 0 0 0; z-index: 90; background: rgba(0,0,0,0.5); opacity: 0; pointer-events: none; transition: opacity 200ms var(--ease); } .u-scrim.visible { opacity: 1; pointer-events: auto; } @media (max-width: 900px) { .u-hamburger { display: inline-flex; } .u-sidebar { transform: translateX(-100%); } .u-sidebar.open { transform: translateX(0); box-shadow: 0 0 40px rgba(0,0,0,0.5); } .u-shell-main { margin-left: 0; padding: 32px 20px 64px; } } /* Shared focus-visible safety net for reskinned pages */ body.u-app a:focus-visible, body.u-app button:focus-visible, body.u-app input:focus-visible, body.u-app [tabindex]:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; } /* Reduced motion */ @media (prefers-reduced-motion: reduce) { .u-btn::after { display: none; } body.u-app, body.u-app *, body.u-app *::before, body.u-app *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } }