/* ============================================================ COMMAND CENTRE — SHARED DESIGN SYSTEM Version 1.0 | May 2026 Usage: Apply project class to : class="project-ai-doctor" ============================================================ */ /* ── 1. BASE TOKENS (shared across all projects) ─────────── */ :root { /* Layout */ --sidebar-width: 220px; --content-max-width: 1200px; /* Sidebar (always dark, never changes per project) */ --sidebar-bg: #14121f; --sidebar-border: rgba(255, 255, 255, 0.08); --sidebar-text: rgba(255, 255, 255, 0.75); --sidebar-text-muted: rgba(255, 255, 255, 0.40); --sidebar-active-bg: rgba(255, 255, 255, 0.10); /* Cards */ --card-bg: #ffffff; --card-radius: 10px; --card-shadow: none; /* Borders */ --border: rgba(44, 44, 42, 0.10); --border-med: rgba(44, 44, 42, 0.18); /* Typography */ --text: #2c2c2a; --muted: #888780; --dim: #b4b2a9; --font: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif; /* Semantic status colours — NEVER use these for decorative/project elements */ --green: #0f6e56; --green-bg: #d4f0e3; --amber: #854f0b; --amber-bg: #faeeda; --red: #a32d2d; --red-bg: #f9dfdf; /* Insight box neutral background (shared) */ --insight-bg: #f4f2ef; } /* ── 2. PER-PROJECT COLOUR TOKENS ────────────────────────── */ /* --accent : primary dark shade (borders, icons, labels, dark insight border) */ /* --accent-2 : lighter shade (secondary insight borders, hover states) */ /* --content-bg : main content area background (very light tint of accent) */ /* --card-bg-2 : table headers, nested cards, secondary surfaces */ /* --accent-light : lightest tint (pill backgrounds, hover fills) */ /* --sidebar-bg : darkest shade of project colour — used for sidebar background */ .project-ai-doctor { --accent: #253055; --accent-2: #405585; --content-bg: #eaecf4; --card-bg-2: #dce0ef; --accent-light: #eaedf5; --sidebar-bg: #0f1528; } .project-bambostips { --accent: #4A1565; --accent-2: #8A35B5; --content-bg: #f2eaf8; --card-bg-2: #e8d8f4; --accent-light: #f0e5fa; --sidebar-bg: #1a082a; } .project-calisthenics { --accent: #7A2050; --accent-2: #B83575; --content-bg: #f8eaf2; --card-bg-2: #f2d8e8; --accent-light: #fce8f2; --sidebar-bg: #260d1a; } .project-culinary { --accent: #7A5000; --accent-2: #B88A0A; --content-bg: #f8f2e0; --card-bg-2: #f4e8c8; --accent-light: #faf0d8; --sidebar-bg: #2b1e00; } .project-financial-advisor { --accent: #1B3D96; --accent-2: #3D68D8; --content-bg: #eaeff8; --card-bg-2: #d8e4f4; --accent-light: #e6ecfc; --sidebar-bg: #0a1229; } .project-retirement, .project-retirement-planner { --accent: #0F5C3A; --accent-2: #2A9C65; --content-bg: #eaf5ef; --card-bg-2: #d4ece0; --accent-light: #e0f2eb; --sidebar-bg: #061a10; } .project-spirituality { --accent: #3A5030; --accent-2: #6A8A50; --content-bg: #edf2ea; --card-bg-2: #dce8d8; --accent-light: #eaf2e6; --sidebar-bg: #121a0e; } .project-travel, .project-travel-planner { --accent: #7A6200; --accent-2: #B89A00; --content-bg: #f8f4e0; --card-bg-2: #f4ecc8; --accent-light: #faf4d8; --sidebar-bg: #2b2300; } .project-neo-chorio { --accent: #7A3210; --accent-2: #B85A30; --content-bg: #f8eee8; --card-bg-2: #f4e0d0; --accent-light: #faeae0; --sidebar-bg: #2b1208; } .project-us-exit { --accent: #7C1C1C; --accent-2: #B83535; --content-bg: #f8eaea; --card-bg-2: #f4d4d4; --accent-light: #fce8e8; --sidebar-bg: #290a0a; } .project-command-centre { /* Cool Neutral Grey — Apple-system charcoal */ --accent: #2c2c2e; /* primary dark — borders, labels, icons */ --accent-2: #6e6e73; /* secondary mid-grey — hover, decoration */ --content-bg: #f5f5f7; /* main bg */ --card-bg-2: #e8e8ed; /* nested cards / table headers */ --accent-light: #f2f2f4; /* lightest tint — pill backgrounds */ --sidebar-bg: #1d1d1f; /* near-black charcoal sidebar */ } /* ── 3. RESET ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: var(--font); font-size: 16px; color: var(--text); background: var(--content-bg); line-height: 1.55; min-height: 100vh; } /* ── 4. APP SHELL ─────────────────────────────────────────── */ .app-shell { display: grid; grid-template-columns: var(--sidebar-width) 1fr; min-height: 100vh; } /* ── 5. SIDEBAR ───────────────────────────────────────────── */ .sidebar { background: var(--sidebar-bg); border-right: 1px solid var(--sidebar-border); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow-y: auto; } .sidebar-logo { padding: 20px 16px 16px; border-bottom: 1px solid var(--sidebar-border); } .sidebar-logo .logo-name { font-size: 14px; font-weight: 600; color: #ffffff; letter-spacing: 0.02em; } .sidebar-logo .logo-sub { font-size: 10px; color: var(--sidebar-text-muted); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.1em; } .sidebar-section { padding: 16px 0 8px; } .sidebar-section-label { font-size: 9px; text-transform: uppercase; letter-spacing: 0.12em; color: var(--sidebar-text-muted); padding: 0 16px; margin-bottom: 4px; } .sidebar nav a { display: flex; align-items: center; gap: 8px; padding: 7px 16px; font-size: 14px; color: var(--sidebar-text); text-decoration: none; border-left: 2px solid transparent; transition: background 0.15s, color 0.15s; } .sidebar nav a:hover { background: var(--sidebar-active-bg); color: #ffffff; } .sidebar nav a.active { background: rgba(255, 255, 255, 0.08); border-left-color: var(--accent-2); color: #ffffff; } .sidebar nav a .nav-icon { width: 14px; height: 14px; opacity: 0.7; flex-shrink: 0; } .sidebar nav a.active .nav-icon { opacity: 1; } /* ── 6. MAIN CONTENT ──────────────────────────────────────── */ .main-content { padding: 28px 32px; max-width: var(--content-max-width); width: 100%; } .page-header { margin-bottom: 28px; } .page-header h1 { font-size: 22px; font-weight: 600; color: var(--text); letter-spacing: -0.02em; } .page-header .page-subtitle { font-size: 15px; color: var(--muted); margin-top: 4px; } .page-header .header-meta { display: flex; align-items: center; gap: 12px; margin-top: 10px; font-size: 13.5px; color: var(--muted); } /* ── 7. MODULE GRID ───────────────────────────────────────── */ .module-grid { display: grid; gap: 20px; } .module-grid.cols-2 { grid-template-columns: 1fr 1fr; } .module-grid.cols-3 { grid-template-columns: 1fr 1fr 1fr; } .module-grid.cols-1-2 { grid-template-columns: 1fr 2fr; } .module-grid.cols-2-1 { grid-template-columns: 2fr 1fr; } /* ── 8. CARDS ─────────────────────────────────────────────── */ .card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--card-radius); padding: 18px 20px; } .card-secondary { background: var(--card-bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; } .card + .card { margin-top: 0; } .stat-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: var(--card-radius); padding: 16px 20px; display: flex; flex-direction: column; gap: 4px; } .stat-card .stat-label { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.08em; } .stat-card .stat-value { font-size: 24px; font-weight: 600; color: var(--text); letter-spacing: -0.02em; } .stat-card .stat-sub { font-size: 13.5px; color: var(--muted); } /* ── 9. SECTION HEADERS (eyebrow + rule) ─────────────────── */ section.module { margin-bottom: 24px; } section.module > h2 { font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent); font-weight: 600; margin: 0 0 12px; display: flex; align-items: center; gap: 10px; } section.module > h2::after { content: ''; flex: 1; height: 1px; background: var(--border-med); } /* ── 10. INSIGHT BOXES ────────────────────────────────────── */ /* Two-shade system: dark accent = "why it matters", lighter = "what it means" */ .insight-box { margin-top: 10px; padding: 10px 12px; background: var(--insight-bg); border-left: 3px solid var(--accent); border-radius: 0 6px 6px 0; font-size: 14px; color: #444441; } .insight-box .label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 3px; } .insight-box .body { line-height: 1.5; } /* Dark accent shade — "Why it matters" */ .why-it-matters { border-left-color: var(--accent); background: var(--insight-bg); } .why-it-matters .label { color: var(--accent); } /* Light accent shade — "What it means" */ .what-it-means { border-left-color: var(--accent-2); background: var(--insight-bg); } .what-it-means .label { color: var(--accent-2); } /* ── 10b. TEMPLATE COMPONENTS ───────────────────────────────── Components used across the modular page templates (Hub, Report, Brief, Walkthrough, Dashboard). See /templates/ folder for usage. ────────────────────────────────────────────────────────────── */ /* Section eyebrow + horizontal rule (used in Hub + Report) */ .section-eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: var(--accent-2); margin: 32px 0 4px; } .section-eyebrow:first-child { margin-top: 0; } .section-rule { border: none; height: 1px; background: var(--border-med); margin: 0 0 18px; } /* Meta chips (page header metadata: dates, counts, status) */ .meta-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; } .meta-chip { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 999px; background: var(--card-bg); border: 1px solid var(--border); font-size: 13px; color: var(--muted); } .meta-chip b { color: var(--text); font-weight: 600; } .meta-chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent-2); } /* TLDR box (front-loaded summary for Report + Brief) */ .tldr-box { background: var(--accent-light); border: 1px solid var(--border-med); border-left: 4px solid var(--accent); border-radius: 8px; padding: 16px 20px; margin-bottom: 28px; } .tldr-box .tldr-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 6px; } .tldr-box .tldr-body { font-size: 15px; color: var(--text); line-height: 1.55; } .tldr-box ul { margin: 6px 0 0 18px; } .tldr-box li { margin-bottom: 4px; } /* Table of contents (Report) */ .toc { background: var(--card-bg); border: 1px solid var(--border); border-radius: 8px; padding: 14px 18px; margin-bottom: 28px; } .toc-label { font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--muted); margin-bottom: 6px; } .toc ol { list-style: none; counter-reset: toc; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 4px 18px; } .toc ol li { counter-increment: toc; font-size: 14px; line-height: 1.5; padding-left: 28px; position: relative; } .toc ol li::before { content: counter(toc, decimal-leading-zero); position: absolute; left: 0; font-size: 10px; font-weight: 600; color: var(--dim); letter-spacing: 0.04em; } .toc a { color: var(--text); text-decoration: none; border-bottom: 1px solid transparent; } .toc a:hover { color: var(--accent); border-bottom-color: var(--accent-2); } @media (max-width: 720px) { .toc ol { grid-template-columns: 1fr; } } /* Quick reference card (Brief — boxed key facts) */ .brief-keyref { background: var(--card-bg-2); border: 1px solid var(--border); border-radius: 8px; padding: 16px 20px; margin-bottom: 28px; display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px 24px; } .brief-keyref-item .lbl { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted); margin-bottom: 3px; } .brief-keyref-item .val { font-size: 16px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; } /* Walkthrough steps */ .step { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 18px 22px; margin-bottom: 16px; display: grid; grid-template-columns: 44px 1fr; gap: 14px; } .step.is-done { opacity: 0.6; } .step.is-active { border-color: var(--accent); border-left: 4px solid var(--accent); padding-left: 18px; } .step-num { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-light); color: var(--accent); font-size: 14px; font-weight: 700; display: flex; align-items: center; justify-content: center; } .step.is-done .step-num { background: var(--green-bg); color: var(--green); } .step.is-active .step-num { background: var(--accent); color: #fff; } .step-title { font-size: 15px; font-weight: 600; color: var(--text); margin-bottom: 4px; letter-spacing: -0.01em; } .step-meta { display: flex; gap: 10px; font-size: 11px; color: var(--muted); margin-bottom: 8px; } .step-body { font-size: 14.5px; color: var(--text); line-height: 1.55; } .step-body p { margin-bottom: 8px; } .step-body code, .step-body pre { background: #f4f4f6; border: 1px solid var(--border); border-radius: 4px; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace; font-size: 12px; color: #1f2937; } .step-body code { padding: 1px 5px; } .step-body pre { padding: 10px 12px; margin: 8px 0; overflow-x: auto; } /* File-card grid (Hub) */ .file-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; margin-bottom: 32px; } .file-card { background: var(--card-bg); border: 1px solid var(--border); border-radius: 10px; padding: 18px 20px; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 10px; transition: border-color 0.15s, transform 0.15s, box-shadow 0.15s; position: relative; overflow: hidden; } .file-card:hover { border-color: var(--accent-2); transform: translateY(-2px); box-shadow: 0 4px 14px rgba(0,0,0,0.06); } .file-card::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; background: var(--accent); } .file-card .fc-tag { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); } .file-card .fc-title { font-size: 16px; font-weight: 600; color: var(--text); letter-spacing: -0.01em; line-height: 1.3; } .file-card .fc-desc { font-size: 14px; color: var(--muted); line-height: 1.5; } .file-card .fc-foot { margin-top: auto; display: flex; justify-content: space-between; font-size: 10.5px; color: var(--dim); } /* Project header (Hub + Brief + Report top) */ .proj-header { margin-bottom: 32px; padding-bottom: 22px; border-bottom: 1px solid var(--border); } .proj-header .ph-eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.16em; color: var(--accent-2); margin-bottom: 6px; } .proj-header h1 { font-size: 28px; font-weight: 700; color: var(--accent); letter-spacing: -0.02em; line-height: 1.2; margin-bottom: 6px; } .proj-header .ph-sub { font-size: 15.5px; color: var(--muted); max-width: 720px; line-height: 1.55; } /* ── 11. STATUS PILLS ─────────────────────────────────────── */ /* Amber/red/green ONLY for universal semantic status. Never for project decoration. */ .pill { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 20px; font-size: 11px; font-weight: 500; letter-spacing: 0.02em; white-space: nowrap; } .pill-green { background: var(--green-bg); color: var(--green); } .pill-amber { background: var(--amber-bg); color: var(--amber); } .pill-red { background: var(--red-bg); color: var(--red); } .pill-accent { background: var(--accent-light); color: var(--accent); } .pill-neutral { background: rgba(44,44,42,0.06); color: var(--muted); } /* ── 12. TABLES ───────────────────────────────────────────── */ .data-table { width: 100%; border-collapse: collapse; font-size: 14px; } .data-table thead th { background: var(--card-bg-2); color: var(--muted); font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; padding: 8px 12px; text-align: left; border-bottom: 1px solid var(--border-med); } .data-table tbody tr { border-bottom: 1px solid var(--border); transition: background 0.12s; } .data-table tbody tr:last-child { border-bottom: none; } .data-table tbody tr:hover { background: var(--accent-light); } .data-table td { padding: 9px 12px; vertical-align: middle; color: var(--text); } .data-table td.muted { color: var(--muted); } /* ── 13. PROGRESS BARS ────────────────────────────────────── */ .progress-bar { height: 6px; background: var(--border); border-radius: 3px; overflow: hidden; } .progress-bar .fill { height: 100%; background: var(--accent); border-radius: 3px; transition: width 0.4s ease; } .progress-bar .fill-2 { background: var(--accent-2); } .progress-bar .fill-green { background: var(--green); } .progress-bar .fill-amber { background: var(--amber); } .progress-bar .fill-red { background: var(--red); } /* ── 14. CHART CONTAINERS ─────────────────────────────────── */ .chart-wrap { position: relative; width: 100%; } .chart-wrap canvas { display: block; } /* ── 15. SCORE / GAUGE DISPLAY ────────────────────────────── */ .score-display { display: flex; align-items: baseline; gap: 4px; } .score-display .score-value { font-size: 42px; font-weight: 700; color: var(--accent); letter-spacing: -0.03em; line-height: 1; } .score-display .score-max { font-size: 18px; color: var(--dim); font-weight: 400; } .score-display .score-label { font-size: 11px; color: var(--muted); margin-left: 6px; align-self: center; } /* ── 16. ACTION / TODO ITEMS ──────────────────────────────── */ .action-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); font-size: 13px; } .action-item:last-child { border-bottom: none; } .action-item .priority-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 4px; } .action-item .priority-dot.high { background: var(--red); } .action-item .priority-dot.medium { background: var(--amber); } .action-item .priority-dot.low { background: var(--green); } .action-item .action-text { flex: 1; color: var(--text); line-height: 1.4; } .action-item .action-meta { font-size: 11px; color: var(--muted); margin-top: 2px; } /* ── 17. TOOLTIP ──────────────────────────────────────────── */ .tooltip-wrap { position: relative; display: inline-block; } .tooltip-wrap .tooltip { display: none; position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); background: #1e1e1e; color: #f5f5f5; font-size: 11px; padding: 6px 10px; border-radius: 6px; white-space: nowrap; z-index: 100; pointer-events: none; line-height: 1.4; } .tooltip-wrap:hover .tooltip { display: block; } /* ── 18. UTILITY ──────────────────────────────────────────── */ .text-accent { color: var(--accent); } .text-accent2 { color: var(--accent-2); } .text-muted { color: var(--muted); } .text-dim { color: var(--dim); } .text-green { color: var(--green); } .text-amber { color: var(--amber); } .text-red { color: var(--red); } .bg-accent-light { background: var(--accent-light); } .bg-card { background: var(--card-bg); } .bg-card-2 { background: var(--card-bg-2); } .flex { display: flex; } .flex-between { display: flex; justify-content: space-between; align-items: center; } .flex-center { display: flex; align-items: center; } .gap-4 { gap: 4px; } .gap-8 { gap: 8px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; } .mt-4 { margin-top: 4px; } .mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mb-8 { margin-bottom: 8px; } .mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; } .sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); } /* ── 19. MOBILE — HAMBURGER BUTTON ───────────────────────── */ /* Hidden on desktop, shown on mobile as fixed top-left trigger */ .nav-toggle { display: none; position: fixed; top: 14px; left: 14px; z-index: 300; width: 38px; height: 38px; border-radius: 8px; border: 1px solid var(--sidebar-border); background: var(--sidebar-bg); cursor: pointer; align-items: center; justify-content: center; flex-direction: column; gap: 5px; padding: 0; } .nav-toggle span { display: block; width: 18px; height: 2px; background: rgba(255, 255, 255, 0.75); border-radius: 2px; transition: transform 0.2s, opacity 0.2s; } .nav-toggle.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .nav-toggle.open span:nth-child(2) { opacity: 0; } .nav-toggle.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* Overlay behind open sidebar */ .sidebar-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.45); z-index: 199; } .sidebar-overlay.visible { display: block; } /* ── 20. MOBILE — RESPONSIVE LAYOUT ─────────────────────── */ @media (max-width: 768px) { /* Show hamburger */ .nav-toggle { display: flex; } /* Shell becomes single column */ .app-shell { grid-template-columns: 1fr; } /* Sidebar goes off-canvas */ .sidebar { position: fixed; top: 0; left: 0; width: 260px; height: 100vh; z-index: 200; transform: translateX(-100%); transition: transform 0.25s ease; } .sidebar.open { transform: translateX(0); } /* Content gets top padding for the hamburger button */ .main-content { padding: 68px 16px 24px; max-width: 100%; } /* Collapse all multi-column module grids */ .module-grid.cols-2, .module-grid.cols-3, .module-grid.cols-1-2, .module-grid.cols-2-1 { grid-template-columns: 1fr; } /* Page header adjustments */ .page-header h1 { font-size: 18px; } /* Tables: allow horizontal scroll on small screens */ .table-scroll-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .data-table { min-width: 480px; } /* Score display: smaller on mobile */ .score-display .score-value { font-size: 32px; } /* Stat cards: 2-column grid if inside a cols-2 parent */ .stat-card { padding: 12px 14px; } .stat-card .stat-value { font-size: 20px; } /* Insight boxes: slightly tighter */ .insight-box { padding: 9px 11px; font-size: 11.5px; } } /* ── BREADCRUMB NAV (sidebar back-trail, shared) ──────────── Injected at the top of any page's sidebar so the back-trail to Master Dashboard ← Project Hub is always visible without scrolling. Self-scoped — doesn't collide with the page's bespoke sidebar styles. Usage: ────────────────────────────────────────────────────────────── */ .cwk-breadcrumb { padding: 14px 16px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 4px; font-family: var(--font, -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif); } .cwk-breadcrumb-label { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.14em; color: rgba(255, 255, 255, 0.32); margin-bottom: 6px; } .cwk-breadcrumb a { display: block; padding: 5px 8px; margin-left: -8px; border-radius: 5px; font-size: 12px; color: rgba(255, 255, 255, 0.62); text-decoration: none; transition: background 0.15s, color 0.15s; line-height: 1.45; } .cwk-breadcrumb a:hover { background: rgba(255, 255, 255, 0.06); color: rgba(255, 255, 255, 0.95); } .cwk-breadcrumb a + a { margin-top: 2px; } /* ── HUB FOOTER (shared across all sub-project INDEX pages) ─ Provides consistent back-to-master navigation + last-updated. Usage: ──────────────────────────────────────────────────────────── */ .hub-footer { margin-top: 48px; padding: 18px 24px; border-top: 1px solid var(--border, rgba(44,44,42,0.10)); background: var(--content-bg, transparent); display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; font-size: 13.5px; color: var(--muted, #888780); font-family: var(--font); } .hub-footer a { color: var(--accent, #2c2c2e); text-decoration: none; font-weight: 600; transition: opacity 0.15s; } .hub-footer a:hover { opacity: 0.65; } .hub-footer .hf-meta { color: var(--muted, #888780); } .hub-footer .hf-date { color: var(--text, #2c2c2a); font-weight: 600; } @media (max-width: 640px) { .hub-footer { flex-direction: column; align-items: flex-start; gap: 8px; padding: 16px 18px; } } /* ============================================================ END OF DESIGN SYSTEM Quick reference — project classes: .project-ai-doctor Slate Blue #253055 .project-bambostips Rich Plum #4A1565 .project-calisthenics Dusty Rose #7A2050 .project-culinary Deep Gold #7A5000 .project-financial-advisor Royal Blue #1B3D96 .project-retirement Deep Emerald #0F5C3A .project-spirituality Deep Sage #3A5030 .project-travel Deep Saffron #7A6200 .project-neo-chorio Burnt Orange #7A3210 .project-us-exit Deep Red #7C1C1C .project-command-centre Charcoal #2c2c2e ============================================================ */ /* Build: 1779944676 */