/* * 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: #b393c4; --aubergine: #372e49; --cream: #F5F3EE; --pale-lav: #ede4f3; /* Page structure */ --white: #FFFFFF; --bg: #F5F3EE; --surface: #FFFFFF; --text: #372e49; --body-text: #372e49; --text-muted: #7B6C8A; --muted: #7B6C8A; --border: rgba(55,46,73,0.10); --border-solid: #E0D9D0; /* Accent & action */ --accent: #b393c4; --teal: #6fc2b3; --teal-light: #dcf1ec; --teal-dark: #3f9d89; --green: #6fc2b3; --green-bg: #dcf1ec; --amber: #C47F17; --amber-bg: #FEF3C7; --mustard: #C47F17; --mustard-bg: #FEF3C7; --red: #B91C1C; --red-bg: #FEE2E2; --pink: #c9758a; --pink-bg: #f5cfd7; /* Teal scale */ --teal-50: #f0faf7; --teal-400: #6fc2b3; --teal-600: #3f9d89; --teal-pale: #dcf1ec; /* alias for --teal-light */ --teal-bg: rgba(111,194,179,0.08); --teal-border: rgba(111,194,179,0.30); /* Amber / status shades */ --amber-pale: #FEF3C7; /* alias for --amber-bg */ /* Interactive states */ --hover-bg: rgba(55,46,73,0.05); --hover: rgba(55,46,73,0.08); --surface-hover: rgba(55,46,73,0.04); --card-bg: #FFFFFF; --border-subtle: rgba(55,46,73,0.06); /* ── Lift Learning colour personality (accent palette for light surfaces) */ --ll-lavender: #b393c4; /* primary LL accent */ --ll-mustard: #e5c74d; /* warm highlight */ --ll-turquoise: #6fc2b3; /* fresh / positive */ --ll-turq-dark: #3f9d89; /* turquoise on white */ --ll-turq-bg: rgba(111,194,179,0.13); --ll-pink: #f5cfd7; /* soft warmth */ --ll-pale-lav: #f0e8f6; /* lavender tint background */ --ll-lav-bg: rgba(179,147,196,0.11); --ll-mustard-bg: rgba(229,199,77,0.14); /* Legacy aliases */ --purple: #b393c4; --purple-light: #ede4f3; /* 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: #372e49; /* Shadows & shape */ --card-shadow: 0 1px 3px rgba(55,46,73,0.06), 0 2px 8px rgba(55,46,73,0.04); --shadow-sm: 0 1px 3px rgba(55,46,73,0.06), 0 2px 8px rgba(55,46,73,0.04); --shadow-card: 0 2px 6px rgba(55,46,73,0.05), 0 8px 24px rgba(55,46,73,0.04); --radius: 12px; --rsm: 8px; --shadow: 0 1px 8px rgba(55,46,73,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: #9a76ad; --accent-soft: #ede4f3; --accent2: #9a76ad; --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: #241c34; --surface: #2e2542; --surface2: #372e49; --panel: #2e2542; /* alias for --surface (used by project-reviews) */ --border: #493f68; /* Accent */ --accent: #b393c4; --accent-hover: #9a76ad; --accent-soft: #463258; --accent2: #9a76ad; /* 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: #6fc2b3; --teal-dark: #6fc2b3; /* same brand teal — already light enough on dark surfaces */ --teal-bg: rgba(111,194,179,0.13); /* slightly more opaque than light-mode 0.08 */ --teal-border: rgba(111,194,179,0.35); /* slightly more opaque than light-mode 0.30 */ --ll-turquoise: #6fc2b3; /* brand teal on dark surface */ --ll-turq-dark: #6fc2b3; /* replaces #3f9d89 which is too dark for dark surfaces */ --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: #372e49; --card-bg: #2e2542; /* same as --surface */ --border-subtle: rgba(255,255,255,0.08); --bg-alt: #372e49; /* alternate background (same as --surface2) */ --bg2: #372e49; /* 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(179,147,196,0.18); color: #d4b3e2; } html[data-theme="admin"] .s-done, html[data-theme="dark"] .s-done { background: rgba(111,194,179,0.15); color: var(--ll-turquoise); } html[data-theme="admin"] .s-review, html[data-theme="dark"] .s-review { background: rgba(229,199,77,0.15); color: var(--ll-mustard); } /* Amber "Changes Requested" phase pill (RBT Phase 2 Stage 3) */ .s-changes_requested { background: rgba(245,158,11,0.16); color: #f59e0b; } html[data-theme="admin"] .s-changes_requested, html[data-theme="dark"] .s-changes_requested { background: rgba(245,158,11,0.18); color: #fbbf24; } /* Card top-cap accent stripe on dark surface cards */ html[data-theme="admin"] .card, html[data-theme="dark"] .card { border-top: 2px solid rgba(179,147,196,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(179,147,196,0.15); } /* ─── Admin Nav v2 — shared component styles (admin-nav.js) ────────────────── */ .an-logo { display: flex; align-items: center; flex-shrink: 0; } .an-dd-wrap { position: relative; display: inline-flex; } .an-dd-btn { background: none; border: 1px solid var(--border); color: var(--text-muted); padding: 5px 12px; border-radius: 7px; font-size: 12px; font-family: inherit; display: inline-flex; align-items: center; gap: 5px; cursor: pointer; transition: all .15s; white-space: nowrap; line-height: normal; } .an-dd-btn:hover { border-color: var(--accent); color: var(--accent); } .an-dd-btn[aria-current="page"], .an-dd-btn.an-dd-active { background: var(--accent); border-color: var(--accent); color: #fff; cursor: default; pointer-events: none; } .an-chevron { width: 10px; height: 6px; flex-shrink: 0; margin-top: 1px; } .an-dd-menu { display: none; position: absolute; top: calc(100% + 6px); left: 0; min-width: 220px; max-height: 340px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); z-index: 200; padding: 6px; } .an-dd-menu.an-dd-open { display: block; } .an-dd-right { right: 0; left: auto; } .an-dd-cur { font-weight: 600; color: var(--accent); } .an-dd-item { display: block; padding: 8px 12px; font-size: 13px; color: var(--text); text-decoration: none; border-radius: 7px; transition: background .12s; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } a.an-dd-item:hover { background: var(--hover-bg); } .an-dd-muted { opacity: .55; cursor: default; } .an-dd-divider { height: 1px; background: var(--border); margin: 6px 4px; } .an-dd-all { color: var(--accent); font-weight: 600; } a.an-dd-all:hover { background: var(--hover-bg); color: var(--accent); } .an-right { display: flex; align-items: center; gap: 8px; margin-left: 16px; flex-shrink: 0; } .an-theme-btn { background: none; border: 1px solid var(--border); color: var(--text-muted); padding: 5px 10px; border-radius: 7px; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; transition: all .15s; line-height: 1; } .an-theme-btn:hover { border-color: var(--accent); color: var(--accent); } .an-logout { 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; transition: all .15s; white-space: nowrap; } .an-logout:hover { border-color: var(--red); color: var(--red); } /* ─── Inline icon SVGs (.ic) — stroke-based, replaces emoji ────────────── */ .ic { width: 13px; height: 13px; display: inline-block; vertical-align: -2px; flex-shrink: 0; } /* ─── Project page sub-header (breadcrumb + actions) ───────────────────────── */ .proj-page-hdr { max-width: 1160px; margin: 0 auto; padding: 10px 20px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; border-bottom: 1px solid var(--border); } .proj-breadcrumb { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--text-muted); flex: 1; min-width: 0; } .proj-breadcrumb a { color: var(--text-muted); text-decoration: none; white-space: nowrap; } .proj-breadcrumb a:hover { color: var(--accent); } .proj-breadcrumb .bc-sep { opacity: .4; } .proj-breadcrumb .bc-current { color: var(--text); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; } .proj-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .proj-switcher-wrap { position: relative; } .proj-switcher-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 7px; font-size: 12px; background: none; color: var(--text-muted); cursor: pointer; font-family: inherit; transition: all .15s; white-space: nowrap; } .proj-switcher-btn:hover { border-color: var(--accent); color: var(--accent); } .proj-switcher-menu { display: none; position: absolute; top: calc(100% + 4px); right: 0; min-width: 230px; max-height: 300px; overflow-y: auto; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: 0 8px 24px rgba(0,0,0,.18); z-index: 200; padding: 6px; } .proj-switcher-menu.open { display: block; } .preview-portal-btn { display: inline-flex; align-items: center; gap: 5px; padding: 5px 12px; border: 1px solid var(--teal); border-radius: 7px; font-size: 12px; background: none; color: var(--teal); cursor: pointer; font-family: inherit; text-decoration: none; transition: background .12s, color .12s; white-space: nowrap; } .preview-portal-btn:hover:not(:disabled) { background: var(--teal); color: #fff; } .preview-portal-btn:disabled { opacity: .6; cursor: default; } .preview-portal-btn svg { flex-shrink: 0; } .weekly-cap-wrap { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--text-muted); border: 1px solid var(--border); border-radius: 7px; padding: 4px 10px; } .weekly-cap-input { width: 50px; padding: 2px 4px; border: 1px solid var(--border-solid); border-radius: 4px; font-size: 12px; font-family: inherit; color: var(--text); background: transparent; text-align: right; outline: none; } .weekly-cap-input:focus { border-color: var(--teal); }