/* ============================================================ Moonchild Design System — Design Tokens & Component Library Depth (getdepth.ai) Single source of truth for all visual design decisions. All values defined as CSS custom properties for easy brand swap. Usage: Themes: - Default (light): for public pages, creator pages, admin - Dark: add class="theme-dark" to for share pages ============================================================ */ /* ──────────────────────────────────────────────────────────── 1. COLOR PALETTE ──────────────────────────────────────────────────────────── */ :root { /* -- Neutrals (light theme default) -- */ --mc-gray-50: #fafafa; --mc-gray-100: #f5f5f5; --mc-gray-200: #e5e7eb; --mc-gray-300: #d1d5db; --mc-gray-400: #9ca3af; --mc-gray-500: #6b7280; --mc-gray-600: #4b5563; --mc-gray-700: #374151; --mc-gray-800: #1f2937; --mc-gray-900: #111827; --mc-white: #ffffff; --mc-black: #0a0a0a; /* -- Brand accent (placeholder — swap later) -- */ --mc-accent: #2563eb; --mc-accent-hover: #1d4ed8; --mc-accent-light: #eff6ff; --mc-accent-text: #ffffff; /* -- Teal accent (Moonchild signature, used on share pages) -- */ --mc-teal: #00d9a5; --mc-teal-hover: #00e5b0; --mc-teal-dim: #00b88a; /* -- Status colors -- */ --mc-green: #059669; --mc-green-light: #ecfdf5; --mc-green-text: #155724; --mc-green-bg: #d4edda; --mc-yellow: #d97706; --mc-yellow-light: #fffbeb; --mc-yellow-text: #856404; --mc-yellow-bg: #fff3cd; --mc-red: #dc2626; --mc-red-light: #fef2f2; --mc-red-text: #721c24; --mc-red-bg: #f8d7da; --mc-blue: #2563eb; --mc-blue-light: #eff6ff; --mc-blue-text: #0c5460; --mc-blue-bg: #d1ecf1; --mc-purple: #7c3aed; --mc-purple-light: #f5f3ff; --mc-purple-text: #6c3483; --mc-purple-bg: #e8daef; --mc-pink: #ff004f; /* ──────────────────────────────────────────────────────────── 2. SEMANTIC TOKENS (Light Theme) ──────────────────────────────────────────────────────────── */ /* -- Surfaces -- */ --mc-bg: var(--mc-gray-50); --mc-bg-raised: var(--mc-white); --mc-bg-sunken: var(--mc-gray-100); /* -- Borders -- */ --mc-border: var(--mc-gray-200); --mc-border-light: var(--mc-gray-100); --mc-border-focus: var(--mc-accent); /* -- Text -- */ --mc-text: var(--mc-gray-900); --mc-text-secondary: var(--mc-gray-600); --mc-text-muted: var(--mc-gray-400); --mc-text-link: var(--mc-accent); /* -- Nav -- */ --mc-nav-bg: var(--mc-white); --mc-nav-border: var(--mc-gray-200); --mc-nav-text: var(--mc-gray-500); --mc-nav-active: var(--mc-gray-700); /* -- Interactive -- */ --mc-focus-ring: 0 0 0 3px rgba(37, 99, 235, 0.2); /* ──────────────────────────────────────────────────────────── 3. TYPOGRAPHY SCALE ──────────────────────────────────────────────────────────── */ --mc-font-sans: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --mc-font-mono: 'SF Mono', 'Fira Code', 'Fira Mono', 'Roboto Mono', 'Courier New', monospace; /* -- Size scale (major third ~1.25) -- */ --mc-text-xs: 0.75rem; /* 12px — captions, metadata */ --mc-text-sm: 0.875rem; /* 14px — small body, table cells */ --mc-text-base: 1rem; /* 16px — body text */ --mc-text-lg: 1.125rem; /* 18px — lead text */ --mc-text-xl: 1.25rem; /* 20px — h4 */ --mc-text-2xl: 1.5rem; /* 24px — h3 */ --mc-text-3xl: 1.875rem; /* 30px — h2 */ --mc-text-4xl: 2.25rem; /* 36px — h1 */ /* -- Line heights -- */ --mc-leading-tight: 1.25; --mc-leading-normal: 1.5; --mc-leading-loose: 1.75; /* -- Font weights -- */ --mc-weight-normal: 400; --mc-weight-medium: 500; --mc-weight-semibold: 600; --mc-weight-bold: 700; /* -- Letter spacing -- */ --mc-tracking-tight: -0.02em; --mc-tracking-normal: 0; --mc-tracking-wide: 0.05em; --mc-tracking-wider: 0.12em; /* ──────────────────────────────────────────────────────────── 4. SPACING SCALE ──────────────────────────────────────────────────────────── */ --mc-space-0: 0; --mc-space-1: 0.25rem; /* 4px */ --mc-space-2: 0.5rem; /* 8px */ --mc-space-3: 0.75rem; /* 12px */ --mc-space-4: 1rem; /* 16px */ --mc-space-5: 1.25rem; /* 20px */ --mc-space-6: 1.5rem; /* 24px */ --mc-space-8: 2rem; /* 32px */ --mc-space-10: 2.5rem; /* 40px */ --mc-space-12: 3rem; /* 48px */ --mc-space-16: 4rem; /* 64px */ /* ──────────────────────────────────────────────────────────── 5. BORDER RADIUS ──────────────────────────────────────────────────────────── */ --mc-radius-sm: 4px; --mc-radius-md: 8px; --mc-radius-lg: 12px; --mc-radius-xl: 16px; --mc-radius-full: 9999px; /* ──────────────────────────────────────────────────────────── 6. SHADOWS ──────────────────────────────────────────────────────────── */ --mc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05); --mc-shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.07), 0 2px 4px -2px rgba(0, 0, 0, 0.05); --mc-shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.08), 0 4px 6px -4px rgba(0, 0, 0, 0.04); /* ──────────────────────────────────────────────────────────── 7. LAYOUT ──────────────────────────────────────────────────────────── */ --mc-max-width: 1200px; --mc-max-width-sm: 640px; --mc-max-width-md: 768px; --mc-max-width-lg: 1024px; --mc-max-width-content: 720px; --mc-transition: all 0.2s ease; } /* ──────────────────────────────────────────────────────────── DARK THEME OVERRIDES Apply: ──────────────────────────────────────────────────────────── */ .theme-dark { --mc-bg: var(--mc-black); --mc-bg-raised: #1a1a1a; --mc-bg-sunken: #111111; --mc-border: #2a2a2a; --mc-border-light: #1a1a1a; --mc-text: #e8e8e8; --mc-text-secondary: var(--mc-gray-400); --mc-text-muted: var(--mc-gray-500); --mc-text-link: var(--mc-teal); --mc-nav-bg: #111111; --mc-nav-border: #2a2a2a; --mc-nav-text: var(--mc-gray-400); --mc-nav-active: #e8e8e8; --mc-accent: var(--mc-teal); --mc-accent-hover: var(--mc-teal-hover); --mc-accent-light: rgba(0, 217, 165, 0.1); --mc-accent-text: var(--mc-black); --mc-focus-ring: 0 0 0 3px rgba(0, 217, 165, 0.25); --mc-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3); --mc-shadow-md: 0 4px 6px rgba(0, 0, 0, 0.4); --mc-shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.5); /* Status colors remain the same — high-contrast on dark */ } /* ════════════════════════════════════════════════════════════ COMPONENT LIBRARY ════════════════════════════════════════════════════════════ */ /* ──────────────────────────────────────────────────────────── C1. BUTTONS ──────────────────────────────────────────────────────────── */ .mc-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--mc-space-2); padding: var(--mc-space-2) var(--mc-space-4); font-family: var(--mc-font-sans); font-size: var(--mc-text-sm); font-weight: var(--mc-weight-medium); line-height: var(--mc-leading-normal); border-radius: var(--mc-radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: var(--mc-transition); white-space: nowrap; } .mc-btn:focus-visible { outline: none; box-shadow: var(--mc-focus-ring); } /* Primary */ .mc-btn-primary { background: var(--mc-accent); color: var(--mc-accent-text); border-color: var(--mc-accent); } .mc-btn-primary:hover { background: var(--mc-accent-hover); border-color: var(--mc-accent-hover); } /* Secondary */ .mc-btn-secondary { background: var(--mc-bg-raised); color: var(--mc-text); border-color: var(--mc-border); } .mc-btn-secondary:hover { background: var(--mc-bg-sunken); } /* Ghost */ .mc-btn-ghost { background: transparent; color: var(--mc-text-secondary); border-color: transparent; } .mc-btn-ghost:hover { background: var(--mc-bg-sunken); color: var(--mc-text); } /* Danger */ .mc-btn-danger { background: var(--mc-red); color: #fff; border-color: var(--mc-red); } .mc-btn-danger:hover { background: #b91c1c; border-color: #b91c1c; } /* Success */ .mc-btn-success { background: var(--mc-green); color: #fff; border-color: var(--mc-green); } .mc-btn-success:hover { background: #047857; border-color: #047857; } /* Size variants */ .mc-btn-sm { padding: var(--mc-space-1) var(--mc-space-2); font-size: var(--mc-text-xs); } .mc-btn-lg { padding: var(--mc-space-3) var(--mc-space-6); font-size: var(--mc-text-base); } /* ──────────────────────────────────────────────────────────── C2. CARDS ──────────────────────────────────────────────────────────── */ .mc-card { background: var(--mc-bg-raised); border: 1px solid var(--mc-border); border-radius: var(--mc-radius-md); padding: var(--mc-space-6); } .mc-card-flush { padding: 0; } .mc-card-header { padding: var(--mc-space-4) var(--mc-space-6); border-bottom: 1px solid var(--mc-border); font-weight: var(--mc-weight-semibold); font-size: var(--mc-text-sm); color: var(--mc-text-secondary); } .mc-card-body { padding: var(--mc-space-6); } /* Stat card (dashboard) */ .mc-stat-card { background: var(--mc-bg-raised); border: 1px solid var(--mc-border); border-radius: var(--mc-radius-md); padding: var(--mc-space-6); text-align: center; } .mc-stat-number { font-size: var(--mc-text-4xl); font-weight: var(--mc-weight-bold); color: var(--mc-text); letter-spacing: var(--mc-tracking-tight); margin-bottom: var(--mc-space-2); } .mc-stat-label { font-size: var(--mc-text-sm); color: var(--mc-text-muted); } .mc-stat-detail { margin-top: var(--mc-space-2); font-size: var(--mc-text-xs); color: var(--mc-text-muted); } /* ──────────────────────────────────────────────────────────── C3. TABLES ──────────────────────────────────────────────────────────── */ .mc-table { width: 100%; background: var(--mc-bg-raised); border: 1px solid var(--mc-border); border-radius: var(--mc-radius-md); border-collapse: collapse; overflow: hidden; } .mc-table th, .mc-table td { padding: var(--mc-space-3); text-align: left; border-bottom: 1px solid var(--mc-border); font-size: var(--mc-text-sm); } .mc-table th { background: var(--mc-bg-sunken); font-weight: var(--mc-weight-semibold); color: var(--mc-text-secondary); font-size: var(--mc-text-xs); text-transform: uppercase; letter-spacing: var(--mc-tracking-wide); } .mc-table tr:hover { background: var(--mc-bg-sunken); } .mc-table tr:last-child td { border-bottom: none; } /* ──────────────────────────────────────────────────────────── C4. FORMS ──────────────────────────────────────────────────────────── */ .mc-input, .mc-select, .mc-textarea { display: block; width: 100%; padding: var(--mc-space-2) var(--mc-space-3); font-family: var(--mc-font-sans); font-size: var(--mc-text-sm); color: var(--mc-text); background: var(--mc-bg-raised); border: 1px solid var(--mc-border); border-radius: var(--mc-radius-sm); transition: var(--mc-transition); } .mc-input:focus, .mc-select:focus, .mc-textarea:focus { outline: none; border-color: var(--mc-border-focus); box-shadow: var(--mc-focus-ring); } .mc-input::placeholder { color: var(--mc-text-muted); } .mc-label { display: block; font-size: var(--mc-text-sm); font-weight: var(--mc-weight-medium); color: var(--mc-text-secondary); margin-bottom: var(--mc-space-1); } .mc-form-group { margin-bottom: var(--mc-space-4); } .mc-form-hint { font-size: var(--mc-text-xs); color: var(--mc-text-muted); margin-top: var(--mc-space-1); } /* ──────────────────────────────────────────────────────────── C5. NAVIGATION BAR ──────────────────────────────────────────────────────────── */ .mc-nav { background: var(--mc-nav-bg); border-bottom: 1px solid var(--mc-nav-border); padding: var(--mc-space-4) var(--mc-space-8); } .mc-nav-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--mc-space-4); } .mc-nav-title { font-size: var(--mc-text-2xl); font-weight: var(--mc-weight-semibold); color: var(--mc-text-secondary); margin: 0; } .mc-nav-user { font-size: var(--mc-text-xs); color: var(--mc-text-muted); } .mc-nav-links { display: flex; gap: var(--mc-space-2); flex-wrap: wrap; } .mc-nav-link { color: var(--mc-nav-text); text-decoration: none; padding: var(--mc-space-2) var(--mc-space-4); border-radius: var(--mc-radius-sm); font-size: var(--mc-text-sm); transition: var(--mc-transition); } .mc-nav-link:hover, .mc-nav-link.active { color: var(--mc-nav-active); background: var(--mc-bg-sunken); } /* ──────────────────────────────────────────────────────────── C6. BADGES & STATUS INDICATORS ──────────────────────────────────────────────────────────── */ .mc-badge { display: inline-block; padding: var(--mc-space-1) var(--mc-space-2); border-radius: var(--mc-radius-full); font-size: var(--mc-text-xs); font-weight: var(--mc-weight-medium); line-height: 1; white-space: nowrap; } /* Status badges */ .mc-badge-success, .mc-badge-completed, .mc-badge-vetted { background: var(--mc-green-bg); color: var(--mc-green-text); } .mc-badge-warning, .mc-badge-processing, .mc-badge-flagged { background: var(--mc-yellow-bg); color: var(--mc-yellow-text); } .mc-badge-danger, .mc-badge-failed { background: var(--mc-red-bg); color: var(--mc-red-text); } .mc-badge-info, .mc-badge-saved { background: var(--mc-blue-bg); color: var(--mc-blue-text); } .mc-badge-neutral, .mc-badge-queued, .mc-badge-pending { background: var(--mc-gray-200); color: var(--mc-gray-600); } .mc-badge-purple, .mc-badge-team { background: var(--mc-purple-bg); color: var(--mc-purple-text); } /* Plan badges */ .mc-badge-pro { background: var(--mc-green-bg); color: var(--mc-green-text); } .mc-badge-starter { background: var(--mc-blue-bg); color: var(--mc-blue-text); } .mc-badge-free { background: var(--mc-gray-200); color: var(--mc-gray-600); } /* ──────────────────────────────────────────────────────────── C7. SCORE DISPLAYS ──────────────────────────────────────────────────────────── */ .mc-score-block { background: var(--mc-bg-raised); border: 1px solid var(--mc-border); border-radius: var(--mc-radius-xl); padding: var(--mc-space-6); text-align: center; } .mc-score-number { font-size: var(--mc-text-4xl); font-weight: var(--mc-weight-bold); letter-spacing: var(--mc-tracking-tight); } .mc-score-green { color: var(--mc-green); } .mc-score-amber { color: var(--mc-yellow); } .mc-score-red { color: var(--mc-red); } .mc-score-dots { font-size: var(--mc-text-base); letter-spacing: 2px; } /* ──────────────────────────────────────────────────────────── C8. FILTER TABS ──────────────────────────────────────────────────────────── */ .mc-filters { display: flex; gap: var(--mc-space-2); margin-bottom: var(--mc-space-4); flex-wrap: wrap; } .mc-filter-tab { padding: var(--mc-space-1) var(--mc-space-4); border-radius: var(--mc-radius-full); font-size: var(--mc-text-xs); border: 1px solid var(--mc-border); color: var(--mc-text-secondary); text-decoration: none; transition: var(--mc-transition); cursor: pointer; background: transparent; } .mc-filter-tab:hover { background: var(--mc-bg-sunken); color: var(--mc-text); } .mc-filter-tab.active { background: var(--mc-accent); color: var(--mc-accent-text); border-color: var(--mc-accent); } /* ──────────────────────────────────────────────────────────── C9. PAGINATION ──────────────────────────────────────────────────────────── */ .mc-pagination { display: flex; justify-content: center; gap: var(--mc-space-2); margin-top: var(--mc-space-8); } .mc-page-link { padding: var(--mc-space-2) var(--mc-space-3); border: 1px solid var(--mc-border); color: var(--mc-text-link); text-decoration: none; border-radius: var(--mc-radius-sm); font-size: var(--mc-text-sm); transition: var(--mc-transition); } .mc-page-link:hover, .mc-page-link.active { background: var(--mc-accent); color: var(--mc-accent-text); border-color: var(--mc-accent); } /* ──────────────────────────────────────────────────────────── C10. CARD LIST (clickable list items) ──────────────────────────────────────────────────────────── */ .mc-card-list { background: var(--mc-bg-raised); border: 1px solid var(--mc-border); border-radius: var(--mc-radius-md); overflow: hidden; } .mc-card-list-item { display: block; padding: var(--mc-space-3) var(--mc-space-4); border-bottom: 1px solid var(--mc-border); text-decoration: none; color: inherit; transition: var(--mc-transition); } .mc-card-list-item:hover { background: var(--mc-bg-sunken); } .mc-card-list-item:last-child { border-bottom: none; } .mc-card-list-title { font-size: var(--mc-text-sm); font-weight: var(--mc-weight-medium); color: var(--mc-text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mc-card-list-meta { display: flex; align-items: center; gap: var(--mc-space-2); margin-top: var(--mc-space-1); font-size: var(--mc-text-xs); color: var(--mc-text-muted); } /* ──────────────────────────────────────────────────────────── C11. DETAIL CARD ──────────────────────────────────────────────────────────── */ .mc-detail-card { background: var(--mc-bg-raised); border: 1px solid var(--mc-border); border-radius: var(--mc-radius-md); padding: var(--mc-space-6); margin-bottom: var(--mc-space-6); } /* ──────────────────────────────────────────────────────────── C12. LAYOUT UTILITIES ──────────────────────────────────────────────────────────── */ .mc-container { max-width: var(--mc-max-width); margin: 0 auto; padding: var(--mc-space-8); } .mc-grid-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--mc-space-4); margin-bottom: var(--mc-space-8); } .mc-grid-2col { display: grid; grid-template-columns: 2fr 1fr; gap: var(--mc-space-8); } /* Back link */ .mc-back-link { display: inline-block; margin-bottom: var(--mc-space-4); color: var(--mc-text-muted); text-decoration: none; font-size: var(--mc-text-sm); transition: var(--mc-transition); } .mc-back-link:hover { color: var(--mc-text); } /* ──────────────────────────────────────────────────────────── C13. TEXT UTILITIES ──────────────────────────────────────────────────────────── */ .mc-text-success { color: var(--mc-green); } .mc-text-warning { color: var(--mc-yellow); } .mc-text-danger { color: var(--mc-red); } .mc-text-muted { color: var(--mc-text-muted); } .mc-text-mono { font-family: var(--mc-font-mono); } /* ──────────────────────────────────────────────────────────── RESPONSIVE BREAKPOINTS ──────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .mc-container { padding: var(--mc-space-4); } .mc-nav { padding: var(--mc-space-4); } .mc-grid-stats { grid-template-columns: 1fr 1fr; } .mc-grid-2col { grid-template-columns: 1fr; } .mc-filters { flex-direction: column; } .mc-table th, .mc-table td { padding: var(--mc-space-2); font-size: var(--mc-text-xs); } } @media (max-width: 480px) { .mc-grid-stats { grid-template-columns: 1fr; } } /* ════════════════════════════════════════════════════════════ RESPONSIVE & POLISH — DU-5 Added: 2026-03-30 ════════════════════════════════════════════════════════════ */ /* ──────────────────────────────────────────────────────────── R1. FOCUS-VISIBLE OUTLINES (Accessibility) ──────────────────────────────────────────────────────────── */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, [tabindex]:focus-visible { outline: 2px solid var(--mc-accent); outline-offset: 2px; box-shadow: var(--mc-focus-ring); } /* Remove default outline for mouse users */ :focus:not(:focus-visible) { outline: none; } /* ──────────────────────────────────────────────────────────── R2. IMAGE OVERFLOW PROTECTION ──────────────────────────────────────────────────────────── */ img { max-width: 100%; height: auto; } /* ──────────────────────────────────────────────────────────── R3. TABLE RESPONSIVE WRAPPER Wrap any .mc-table in .mc-table-responsive for mobile scroll ──────────────────────────────────────────────────────────── */ .mc-table-responsive { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } /* ──────────────────────────────────────────────────────────── R4. MOBILE NAV — Hamburger Toggle ──────────────────────────────────────────────────────────── */ .mc-nav-toggle { display: none; background: none; border: 1px solid var(--mc-border); border-radius: var(--mc-radius-sm); padding: var(--mc-space-2); cursor: pointer; color: var(--mc-text); font-size: var(--mc-text-base); line-height: 1; min-width: 44px; min-height: 44px; align-items: center; justify-content: center; } @media (max-width: 768px) { .mc-nav-toggle { display: inline-flex; } .mc-nav-links { display: none; flex-direction: column; width: 100%; padding-top: var(--mc-space-2); } .mc-nav-links.mc-nav-open { display: flex; } .mc-nav-link { padding: var(--mc-space-3) var(--mc-space-4); min-height: 44px; display: flex; align-items: center; } .mc-nav-header { flex-wrap: wrap; } } /* ──────────────────────────────────────────────────────────── R5. TOUCH TARGETS — Minimum 44px on mobile ──────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .mc-btn, .mc-filter-tab, .mc-page-link, .mc-nav-link { min-height: 44px; min-width: 44px; } .mc-btn-sm { min-height: 36px; padding: var(--mc-space-2) var(--mc-space-3); font-size: var(--mc-text-xs); } } /* ──────────────────────────────────────────────────────────── R6. MINIMUM TEXT SIZE ON MOBILE ──────────────────────────────────────────────────────────── */ @media (max-width: 768px) { body { font-size: var(--mc-text-base); /* 16px minimum */ } .mc-stat-detail, .mc-form-hint { font-size: var(--mc-text-xs); /* 12px OK for captions */ } } /* ──────────────────────────────────────────────────────────── R7. CARD STACKING ON MOBILE ──────────────────────────────────────────────────────────── */ @media (max-width: 480px) { .mc-card { border-radius: var(--mc-radius-sm); } .mc-detail-card { padding: var(--mc-space-4); } .mc-stat-number { font-size: var(--mc-text-2xl); } } /* ──────────────────────────────────────────────────────────── R8. FILTER TABS — Horizontal scroll on mobile ──────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .mc-filters { flex-direction: row; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; gap: var(--mc-space-2); padding-bottom: var(--mc-space-2); } .mc-filter-tab { flex-shrink: 0; } } /* ──────────────────────────────────────────────────────────── R9. ADMIN GRID UTILITIES — Mobile collapse ──────────────────────────────────────────────────────────── */ @media (max-width: 480px) { .mc-grid-2, .mc-grid-3, .mc-grid-5 { grid-template-columns: 1fr; } } /* ──────────────────────────────────────────────────────────── R10. PREVENT HORIZONTAL SCROLL ──────────────────────────────────────────────────────────── */ html, body { overflow-x: hidden; } /* Base typography — matches share page quality */ body { font-family: var(--mc-font-sans); background: var(--mc-bg); color: var(--mc-text); line-height: 1.6; font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: var(--mc-text-link); text-decoration: none; } a:hover { text-decoration: underline; } /* Share-page-quality nav */ .depth-nav { display: flex; align-items: center; justify-content: space-between; padding: 0 24px; height: 56px; background: var(--mc-white, #fff); border-bottom: 1px solid var(--mc-border); position: sticky; top: 0; z-index: 100; } .depth-nav-logo { font-size: 16px; font-weight: 800; letter-spacing: 3px; color: var(--mc-text); text-decoration: none; } .depth-nav-logo:hover { text-decoration: none; } .depth-nav-cta { font-size: 13px; font-weight: 600; color: var(--mc-accent); border: 1px solid var(--mc-accent); padding: 6px 14px; border-radius: 6px; text-decoration: none; transition: background 0.15s; } .depth-nav-cta:hover { background: var(--mc-accent-light); text-decoration: none; } /* Share-page-quality footer */ .depth-footer { border-top: 1px solid var(--mc-border); padding: 24px; text-align: center; font-size: 12px; color: var(--mc-text-muted); margin-top: auto; } .depth-footer a { color: var(--mc-text-secondary); text-decoration: none; } .depth-footer a:hover { text-decoration: underline; } /* Content container — matches share page 720px max */ .depth-content { max-width: 720px; margin: 0 auto; padding: 0 16px 64px; } .depth-content-wide { max-width: 960px; margin: 0 auto; padding: 0 24px 64px; } /* ──────────────────────────────────────────────────────────── R11. FOOTER & BACK LINK TOUCH TARGETS ──────────────────────────────────────────────────────────── */ @media (max-width: 768px) { .mc-back-link { min-height: 44px; display: inline-flex; align-items: center; } footer a { min-height: 44px; display: inline-flex; align-items: center; } }