/* * Lift Learning — Shared Brand Tokens * Single source of truth for the LL colour palette and typography. * * Usage * ----- * Light client/portal pages → just load this file; :root tokens apply. * Dark admin/team pages → add data-theme="admin" to . * * */ /* ─── Google Fonts ─────────────────────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Rozha+One&family=Open+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&display=swap'); /* ─── Light LL Brand Palette (default — client / portal pages) ─────────────── */ :root { /* Core brand primitives */ --lavender: #B883E8; --aubergine: #2E2438; --cream: #F5F3EE; --pale-lav: #E5D7F0; /* Page structure */ --white: #FFFFFF; --bg: #F5F3EE; --surface: #FFFFFF; --text: #2E2438; --body-text: #2E2438; --text-muted: #7B6C8A; --muted: #7B6C8A; --border: rgba(46,36,56,0.10); --border-solid: #E0D9D0; /* Accent & action */ --accent: #B883E8; --teal: #1A8D6F; --teal-light: #D1F0E8; --teal-dark: #0F766E; --green: #1A8D6F; --green-bg: #D1F0E8; --amber: #C47F17; --amber-bg: #FEF3C7; --mustard: #C47F17; --mustard-bg: #FEF3C7; --red: #B91C1C; --red-bg: #FEE2E2; --pink: #D4A8F0; --pink-bg: #FCE4ED; /* Teal scale */ --teal-50: #F0FDF9; --teal-400: #1A8D6F; --teal-600: #0D7C6E; --teal-pale: #D1F0E8; /* alias for --teal-light */ --teal-bg: rgba(26,141,111,0.08); --teal-border: rgba(26,141,111,0.30); /* Amber / status shades */ --amber-pale: #FEF3C7; /* alias for --amber-bg */ /* Interactive states */ --hover-bg: rgba(46,36,56,0.05); --hover: rgba(46,36,56,0.08); --surface-hover: rgba(46,36,56,0.04); --card-bg: #FFFFFF; --border-subtle: rgba(46,36,56,0.06); /* ── Lift Learning colour personality (accent palette for light surfaces) */ --ll-lavender: #B898E0; /* primary LL accent */ --ll-mustard: #E5C455; /* warm highlight */ --ll-turquoise: #6BC9B5; /* fresh / positive */ --ll-turq-dark: #3DA08A; /* turquoise on white */ --ll-turq-bg: rgba(107,201,181,0.13); --ll-pink: #F2D5DC; /* soft warmth */ --ll-pale-lav: #EFE6F8; /* lavender tint background */ --ll-lav-bg: rgba(184,152,224,0.11); --ll-mustard-bg: rgba(229,196,85,0.14); /* Legacy aliases */ --purple: #B883E8; --purple-light: #E5D7F0; /* Gray scale */ --gray-50: #F5F3EE; --gray-100: #EDE8E4; --gray-200: #E0D9D0; --gray-300: #C5BAB0; --gray-400: #A899BA; --gray-500: #7B6C8A; --gray-600: #5A4D6A; --gray-700: #3D3050; --gray-800: #2E2438; /* Shadows & shape */ --card-shadow: 0 1px 3px rgba(46,36,56,0.06), 0 2px 8px rgba(46,36,56,0.04); --shadow-sm: 0 1px 3px rgba(46,36,56,0.06), 0 2px 8px rgba(46,36,56,0.04); --shadow-card: 0 2px 6px rgba(46,36,56,0.05), 0 8px 24px rgba(46,36,56,0.04); --radius: 12px; --rsm: 8px; --shadow: 0 1px 8px rgba(46,36,56,0.07); /* Status badge tokens */ --s-draft-bg: #F0EEF3; --s-draft-t: #6B6280; --s-amber-bg: #FEF3C7; --s-amber-t: #92400E; --s-blue-bg: #DBEAFE; --s-blue-t: #1E40AF; --s-green-bg: #D1FAE5; --s-green-t: #065F46; --s-dkgn-bg: #BBF7D0; --s-dkgn-t: #14532D; /* Font */ --font: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ─── Admin page header — shared structure for all admin pages ───────────── */ .admin-page-header { display: flex; align-items: center; gap: 14px; padding: 0 28px; height: 52px; background: var(--surface); border-bottom: 1px solid var(--border); position: sticky; top: 0; z-index: 100; } .admin-page-header--brand { background: var(--aubergine); } .admin-page-header--teal { background: var(--teal); } .admin-page-header .back-link { color: var(--text-muted); text-decoration: none; font-size: 13px; display: flex; align-items: center; gap: 5px; transition: color 0.15s; flex-shrink: 0; } .admin-page-header .back-link:hover { color: var(--accent); } .admin-page-header--brand .back-link, .admin-page-header--teal .back-link { color: rgba(255,255,255,0.7); } .admin-page-header--brand .back-link:hover, .admin-page-header--teal .back-link:hover { color: #fff; } .admin-page-header .header-divider { width: 1px; height: 18px; background: var(--border); flex-shrink: 0; } .admin-page-header--brand .header-divider { background: rgba(255,255,255,0.2); } .admin-page-header--teal .header-divider { background: rgba(255,255,255,0.35); } .admin-page-header .logo-img { height: 26px; width: auto; display: block; opacity: 0.9; flex-shrink: 0; } .admin-page-header h1 { font-size: 16px; font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .admin-page-header--brand h1, .admin-page-header--teal h1 { color: #fff; } .admin-page-header .header-actions { display: flex; align-items: center; gap: 8px; margin-left: auto; flex-shrink: 0; flex-wrap: wrap; } .admin-page-header .header-actions a { background: none; border: 1px solid var(--border); color: var(--text-muted); padding: 5px 12px; border-radius: 7px; font-size: 12px; text-decoration: none; display: inline-flex; align-items: center; gap: 5px; transition: all .15s; white-space: nowrap; } .admin-page-header .header-actions a:hover { border-color: var(--accent); color: var(--accent); } .admin-page-header .header-actions a[aria-current="page"] { background: var(--accent); border-color: var(--accent); color: #fff; cursor: default; pointer-events: none; } .admin-page-header--teal .header-actions a, .admin-page-header--brand .header-actions a { border-color: rgba(255,255,255,0.35); color: rgba(255,255,255,0.8); } .admin-page-header--teal .header-actions a:hover, .admin-page-header--brand .header-actions a:hover { border-color: #fff; color: #fff; } .admin-page-header--teal .header-actions a[aria-current="page"], .admin-page-header--brand .header-actions a[aria-current="page"] { background: rgba(255,255,255,0.25); border-color: #fff; color: #fff; cursor: default; pointer-events: none; } /* ─────────────────────────────────────────────────────────────────────────── */ :root { /* Admin-surface tokens — light-mode equivalents of dark-only vars */ --surface2: #EDE8E4; --panel: #FFFFFF; --bg-alt: #EDE8E4; --bg2: #EDE8E4; --accent-hover: #A06ED4; --accent-soft: #E5D7F0; --accent2: #9B6FD6; --yellow: #C47F17; --blue: #1E40AF; --orange: #C2410C; } /* ─── Dark Palette (data-theme="admin" or data-theme="dark" on ) ─────── */ html[data-theme="admin"], html[data-theme="dark"] { /* Page structure */ --bg: #1E1628; --surface: #261B36; --surface2: #2E2438; --panel: #261B36; /* alias for --surface (used by project-reviews) */ --border: #3D3150; /* Accent */ --accent: #B883E8; --accent-hover: #A06ED4; --accent-soft: #3D2A5A; --accent2: #9B6FD6; /* Text */ --text: #F5F3EE; --text-muted: #A899BA; --muted: #A899BA; /* alias for --text-muted */ --body-text: #F5F3EE; /* Semantic colours (dark) */ --green: #3ecf8e; --yellow: #f5c518; --red: #ef4444; --amber: #E8A87C; --teal: #2dd4bf; --blue: #60a5fa; --purple: #a78bfa; --orange: #f97316; /* Interactive states (dark overrides) */ --hover-bg: rgba(255,255,255,0.06); --hover: rgba(255,255,255,0.08); --surface-hover: #2E2438; --card-bg: #261B36; /* same as --surface */ --border-subtle: rgba(255,255,255,0.08); --bg-alt: #2E2438; /* alternate background (same as --surface2) */ --bg2: #2E2438; /* secondary bg used in inline editors */ /* Font */ --font: 'Open Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ─── Shared Admin Page Colour Personality ───────────────────────────────── Covers all admin-*.html pages that use data-theme="admin" or "dark". Dark background is unchanged — only light-surface functional accents (status pills, buttons, section labels) get the LL palette. */ /* Status pills on dark surfaces */ html[data-theme="admin"] .s-in_progress, html[data-theme="dark"] .s-in_progress { background: rgba(184,152,224,0.18); color: #C9A8FF; } html[data-theme="admin"] .s-done, html[data-theme="dark"] .s-done { background: rgba(107,201,181,0.15); color: var(--ll-turquoise); } html[data-theme="admin"] .s-review, html[data-theme="dark"] .s-review { background: rgba(229,196,85,0.15); color: var(--ll-mustard); } /* Card top-cap accent stripe on dark surface cards */ html[data-theme="admin"] .card, html[data-theme="dark"] .card { border-top: 2px solid rgba(184,152,224,0.18); } /* Primary action buttons — LL turquoise */ html[data-theme="admin"] .btn-primary, html[data-theme="dark"] .btn-primary { background: var(--ll-turq-dark); border-color: var(--ll-turq-dark); color: #fff; } html[data-theme="admin"] .btn-primary:hover, html[data-theme="dark"] .btn-primary:hover { background: var(--ll-turquoise); border-color: var(--ll-turquoise); color: #1a3832; } /* Section labels — lavender tint */ html[data-theme="admin"] .section-label, html[data-theme="dark"] .section-label { color: var(--ll-lavender); border-bottom-color: rgba(184,152,224,0.15); }