/* ============================================================ DESIGN SYSTEM v2 — Complete Component Library File: /var/www/assets/css/design-system.css All 47+ components from the master library. Dark default, light via prefers-color-scheme OR [data-theme]. Manual toggle: set data-theme="light" on . KEY CHANGE: content-white in dark mode uses subtle grey, NOT bright white. Bright white only appears in light mode. ============================================================ */ /* ── Colour Palette ────────────────────────────────────────── */ :root { /* Brand (constant) */ --primary-pink: #ff006e; --primary-pink-hover: #ff4d94; --primary-aqua: #00d9ff; --primary-purple: #9d4edd; /* Semantic — DARK (default) */ --color-scheme: dark; --bg-body-start: #0a0a0a; --bg-body-mid: #1a1a1a; --bg-body-end: #2d2d2d; --bg-surface: rgba(25, 25, 35, 0.5); --bg-surface-hover: rgba(255, 255, 255, 0.05); --bg-elevated: rgba(20, 20, 20, 0.99); --bg-inset: rgba(255, 255, 255, 0.02); --bg-input: rgba(255, 255, 255, 0.05); --bg-input-focus: rgba(255, 255, 255, 0.09); --border-default: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.12); --border-subtle: rgba(255, 255, 255, 0.05); --text-primary: #ffffff; --text-secondary: #d1d5db; --text-muted: #9ca3af; --text-faint: rgba(255, 255, 255, 0.4); /* Contrast blocks: content-white in dark mode = subtle uplift, NOT bright white */ --bg-contrast: rgba(255, 255, 255, 0.04); --border-contrast: rgba(255, 255, 255, 0.1); --text-contrast: #d1d5db; --text-contrast-heading: #ffffff; --text-contrast-link: var(--primary-pink); --text-contrast-link-hover: var(--primary-pink-hover); --text-contrast-blockquote: #9ca3af; /* Alternating section backgrounds */ --bg-section-a: transparent; --bg-section-b: rgba(255, 255, 255, 0.02); --shadow-dropdown: 0 20px 25px rgba(0, 0, 0, 0.4); --shadow-btn: 0 8px 24px rgba(255, 0, 110, 0.25); --shadow-btn-hover: 0 12px 32px rgba(255, 0, 110, 0.3); --footer-bg: rgba(0, 0, 0, 0.6); --header-bg: rgba(0, 0, 0, 0.8); --divider-gradient: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.08), transparent); /* Calculator component tokens */ --calc-btn-bg: rgba(255, 255, 255, 0.06); --calc-btn-bg-hover: rgba(255, 255, 255, 0.1); --calc-btn-border: rgba(255, 255, 255, 0.08); --calc-btn-text: #ffffff; --calc-display-text: #ffffff; --calc-display-secondary: #6b7280; --calc-toggle-bg: rgba(255, 255, 255, 0.04); --calc-toggle-border: rgba(255, 255, 255, 0.1); --calc-toggle-text: #9ca3af; --calc-toggle-hover-bg: rgba(255, 255, 255, 0.06); --calc-toggle-hover-text: #d1d5db; /* Theme-aware accent: aqua in dark, pink in light */ --accent-secondary: var(--primary-aqua); } /* Light mode via system preference */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { --color-scheme: light; --bg-body-start: #ffffff; --bg-body-mid: #f5f5f7; --bg-body-end: #eeeef0; --bg-surface: rgba(0, 0, 0, 0.03); --bg-surface-hover: rgba(0, 0, 0, 0.04); --bg-elevated: #ffffff; --bg-inset: rgba(0, 0, 0, 0.02); --bg-input: rgba(0, 0, 0, 0.04); --bg-input-focus: rgba(0, 0, 0, 0.06); --border-default: rgba(0, 0, 0, 0.1); --border-strong: rgba(0, 0, 0, 0.15); --border-subtle: rgba(0, 0, 0, 0.06); --text-primary: #1d1d1f; --text-secondary: #424245; --text-muted: #6e6e73; --text-faint: rgba(0, 0, 0, 0.35); /* Contrast blocks in light mode = true white */ --bg-contrast: #ffffff; --border-contrast: #d2d2d7; --text-contrast: #424245; --text-contrast-heading: #1d1d1f; --text-contrast-link: #c81e5f; --text-contrast-link-hover: #e02570; --text-contrast-blockquote: #6b7280; --bg-section-a: transparent; --bg-section-b: rgba(0, 0, 0, 0.02); --shadow-dropdown: 0 10px 30px rgba(0, 0, 0, 0.12); --shadow-btn: 0 4px 12px rgba(255, 0, 110, 0.2); --shadow-btn-hover: 0 8px 20px rgba(255, 0, 110, 0.25); --footer-bg: #f5f5f7; --header-bg: rgba(255, 255, 255, 0.85); --divider-gradient: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.1), transparent); /* Calculator component tokens */ --calc-btn-bg: rgba(0, 0, 0, 0.06); --calc-btn-bg-hover: rgba(0, 0, 0, 0.1); --calc-btn-border: rgba(0, 0, 0, 0.12); --calc-btn-text: #1d1d1f; --calc-display-text: #1d1d1f; --calc-display-secondary: #6e6e73; --calc-toggle-bg: rgba(0, 0, 0, 0.04); --calc-toggle-border: rgba(0, 0, 0, 0.15); --calc-toggle-text: #6e6e73; --calc-toggle-hover-bg: rgba(0, 0, 0, 0.06); --calc-toggle-hover-text: #424245; --accent-secondary: var(--primary-pink); } } /* Manual override: data-theme="light" forces light */ [data-theme="light"] { --color-scheme: light; --bg-body-start: #ffffff; --bg-body-mid: #f5f5f7; --bg-body-end: #eeeef0; --bg-surface: rgba(0, 0, 0, 0.03); --bg-surface-hover: rgba(0, 0, 0, 0.04); --bg-elevated: #ffffff; --bg-inset: rgba(0, 0, 0, 0.02); --bg-input: rgba(0, 0, 0, 0.04); --bg-input-focus: rgba(0, 0, 0, 0.06); --border-default: rgba(0, 0, 0, 0.1); --border-strong: rgba(0, 0, 0, 0.15); --border-subtle: rgba(0, 0, 0, 0.06); --text-primary: #1d1d1f; --text-secondary: #424245; --text-muted: #6e6e73; --text-faint: rgba(0, 0, 0, 0.35); --bg-contrast: #ffffff; --border-contrast: #d2d2d7; --text-contrast: #424245; --text-contrast-heading: #1d1d1f; --text-contrast-link: #c81e5f; --text-contrast-link-hover: #e02570; --text-contrast-blockquote: #6b7280; --bg-section-a: transparent; --bg-section-b: rgba(0, 0, 0, 0.02); --shadow-dropdown: 0 10px 30px rgba(0, 0, 0, 0.12); --shadow-btn: 0 4px 12px rgba(255, 0, 110, 0.2); --shadow-btn-hover: 0 8px 20px rgba(255, 0, 110, 0.25); --footer-bg: #f5f5f7; --header-bg: rgba(255, 255, 255, 0.85); --divider-gradient: linear-gradient(to right, transparent, rgba(0, 0, 0, 0.1), transparent); /* Calculator component tokens */ --calc-btn-bg: rgba(0, 0, 0, 0.06); --calc-btn-bg-hover: rgba(0, 0, 0, 0.1); --calc-btn-border: rgba(0, 0, 0, 0.12); --calc-btn-text: #1d1d1f; --calc-display-text: #1d1d1f; --calc-display-secondary: #6e6e73; --calc-toggle-bg: rgba(0, 0, 0, 0.04); --calc-toggle-border: rgba(0, 0, 0, 0.15); --calc-toggle-text: #6e6e73; --calc-toggle-hover-bg: rgba(0, 0, 0, 0.06); --calc-toggle-hover-text: #424245; --accent-secondary: var(--primary-pink); } /* Manual override: data-theme="dark" forces dark (already default, but explicit) */ [data-theme="dark"] { --color-scheme: dark; --bg-body-start: #0a0a0a; --bg-body-mid: #1a1a1a; --bg-body-end: #2d2d2d; --bg-surface: rgba(25, 25, 35, 0.5); --bg-surface-hover: rgba(255, 255, 255, 0.05); --bg-elevated: rgba(20, 20, 20, 0.99); --bg-inset: rgba(255, 255, 255, 0.02); --bg-input: rgba(255, 255, 255, 0.05); --bg-input-focus: rgba(255, 255, 255, 0.09); --border-default: rgba(255, 255, 255, 0.08); --border-strong: rgba(255, 255, 255, 0.12); --border-subtle: rgba(255, 255, 255, 0.05); --text-primary: #ffffff; --text-secondary: #d1d5db; --text-muted: #9ca3af; --text-faint: rgba(255, 255, 255, 0.4); --bg-contrast: rgba(255, 255, 255, 0.04); --border-contrast: rgba(255, 255, 255, 0.1); --text-contrast: #d1d5db; --text-contrast-heading: #ffffff; --text-contrast-link: var(--primary-pink); --text-contrast-link-hover: var(--primary-pink-hover); --text-contrast-blockquote: #9ca3af; --bg-section-a: transparent; --bg-section-b: rgba(255, 255, 255, 0.02); --shadow-dropdown: 0 20px 25px rgba(0, 0, 0, 0.4); --shadow-btn: 0 8px 24px rgba(255, 0, 110, 0.25); --shadow-btn-hover: 0 12px 32px rgba(255, 0, 110, 0.3); --footer-bg: rgba(0, 0, 0, 0.6); --header-bg: rgba(0, 0, 0, 0.8); --divider-gradient: linear-gradient(to right, transparent, rgba(255, 255, 255, 0.08), transparent); /* Calculator component tokens */ --calc-btn-bg: rgba(255, 255, 255, 0.06); --calc-btn-bg-hover: rgba(255, 255, 255, 0.1); --calc-btn-border: rgba(255, 255, 255, 0.08); --calc-btn-text: #ffffff; --calc-display-text: #ffffff; --calc-display-secondary: #6b7280; --calc-toggle-bg: rgba(255, 255, 255, 0.04); --calc-toggle-border: rgba(255, 255, 255, 0.1); --calc-toggle-text: #9ca3af; --calc-toggle-hover-bg: rgba(255, 255, 255, 0.06); --calc-toggle-hover-text: #d1d5db; --accent-secondary: var(--primary-aqua); } /* ── Base ──────────────────────────────────────────────────── */ *, *::before, *::after { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; } body { color-scheme: var(--color-scheme); background: linear-gradient(135deg, var(--bg-body-start) 0%, var(--bg-body-mid) 50%, var(--bg-body-end) 100%); color: var(--text-primary); min-height: 100vh; } input, select, textarea, button { color-scheme: var(--color-scheme); } select option { background: var(--bg-elevated); color: var(--text-secondary); } /* ── Navigation ────────────────────────────────────────────── */ .nav-link { color: var(--text-secondary); font-weight: 500; transition: color 0.2s ease; position: relative; font-size: 0.9rem; } .nav-link:hover { color: var(--primary-pink); } .nav-link::after { content: ''; position: absolute; bottom: -6px; left: 0; width: 0; height: 2px; background: var(--primary-pink); transition: width 0.3s ease; } .nav-link:hover::after { width: 100%; } .dropdown-container { position: relative; } .dropdown-trigger { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; color: var(--text-secondary); font-weight: 500; transition: all 0.2s ease; font-size: 0.9rem; white-space: nowrap; background: none; border: none; } .dropdown-trigger:hover { color: var(--primary-pink); } .dropdown-chevron { width: 1.25rem; height: 1.25rem; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .dropdown-trigger:hover .dropdown-chevron { transform: translateY(3px) rotate(180deg); } .dropdown-open .dropdown-chevron { transform: rotate(180deg); color: var(--primary-pink); } .dropdown-menu { position: absolute; top: 100%; left: 0; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 0.75rem; padding: 0.5rem; min-width: 220px; margin-top: 1rem; z-index: 1000; box-shadow: var(--shadow-dropdown); } .dropdown-item { display: block; width: 100%; padding: 0.875rem 1rem; text-align: left; background: transparent; border: none; color: var(--text-secondary); cursor: pointer; transition: all 0.2s ease; border-radius: 0.5rem; font-size: 0.9rem; } .dropdown-item:hover { background: rgba(255, 0, 110, 0.15); color: var(--primary-pink); transform: translateX(4px); } .mobile-menu { background: var(--bg-elevated); backdrop-filter: blur(10px); border-top: 1px solid var(--border-default); } .mobile-menu-item { display: block; padding: 1rem 1.5rem; color: var(--text-secondary); font-weight: 500; transition: all 0.2s ease; border-bottom: 1px solid var(--border-subtle); } .mobile-menu-item:hover { background: rgba(255, 0, 110, 0.1); color: var(--primary-pink); } /* ── Cards ─────────────────────────────────────────────────── */ .card-minimal { background: var(--bg-surface); backdrop-filter: blur(10px); border: 1px solid var(--border-default); border-radius: 1rem; overflow: hidden; } /* card-white and card-light-grey use contrast variables — no bright white in dark mode */ .card-white { background: var(--bg-contrast); border: 1px solid var(--border-contrast); border-radius: 1rem; color: var(--text-contrast); } .card-white h1, .card-white h2, .card-white h3, .card-white h4 { color: var(--text-contrast-heading); } .card-light-grey { background: var(--bg-section-b); border: 1px solid var(--border-default); border-radius: 1rem; color: var(--text-secondary); } /* ── Buttons ───────────────────────────────────────────────── */ .btn-base { font-weight: 600; padding: 0.875rem 1.75rem; border-radius: 0.5rem; border: none; cursor: pointer; transition: all 0.3s ease; display: inline-block; } .btn-pink { background: linear-gradient(135deg, #ff006e 0%, #ff4d94 100%); color: #ffffff; box-shadow: var(--shadow-btn); } .btn-purple { background: linear-gradient(135deg, #9d4edd 0%, #bb86fc 100%); color: #ffffff; box-shadow: 0 8px 24px rgba(157, 78, 221, 0.25); } .btn-aqua { background: linear-gradient(135deg, #00d9ff 0%, #00f0ff 100%); color: #000000; box-shadow: 0 8px 24px rgba(0, 217, 255, 0.25); } .btn-ghost { background: transparent; border: 1.5px solid var(--border-strong); color: var(--text-secondary); } .btn-outline-pink { background: transparent; border: 2px solid var(--primary-pink); color: var(--primary-pink); } .btn-outline-purple { background: transparent; border: 2px solid var(--primary-purple); color: var(--primary-purple); } .btn-outline-aqua { background: transparent; border: 2px solid var(--primary-aqua); color: var(--primary-aqua); } .btn-sm { padding: 0.5rem 1rem; font-size: 0.875rem; } .btn-lg { padding: 1.125rem 2.25rem; font-size: 1.125rem; } .btn-base:hover { transform: translateY(-2px); } .btn-pink:hover, .btn-purple:hover, .btn-aqua:hover { box-shadow: var(--shadow-btn-hover); } .btn-ghost:hover { background: var(--bg-surface-hover); } /* ── Inputs ────────────────────────────────────────────────── */ .input-minimal { background: var(--bg-input); border: 1px solid var(--border-default); color: var(--text-primary); transition: all 0.2s ease; padding: 0.875rem; border-radius: 0.5rem; } .input-minimal::placeholder { color: var(--text-faint); } .input-minimal:focus { outline: none; border-color: var(--primary-pink); background: var(--bg-input-focus); box-shadow: 0 0 0 4px rgba(255, 0, 110, 0.2); } .label-minimal { font-size: 0.75rem; color: var(--text-muted); font-weight: 600; margin-bottom: 0.5rem; display: block; text-transform: uppercase; letter-spacing: 0.1em; } .input-prefix { background: var(--bg-inset); border: 1px solid var(--border-default); color: var(--text-muted); flex-shrink: 0; padding: 0 1rem; display: flex; align-items: center; font-weight: 500; cursor: pointer; transition: all 0.2s ease; user-select: none; } .input-prefix.active { background: rgba(255, 0, 110, 0.2); color: var(--primary-pink); border-color: rgba(255, 0, 110, 0.3); } /* ── Calculator Display ────────────────────────────────────── */ .calc-display { background: var(--bg-inset); border: 2px solid; border-image: linear-gradient(135deg, var(--primary-aqua), var(--primary-pink)) 1; border-radius: 1rem; padding: 2.5rem; margin: 2rem 0; position: relative; overflow: hidden; } .calc-display::before { content: ''; position: absolute; top: -100px; right: -100px; width: 300px; height: 300px; background: radial-gradient(circle, rgba(255, 0, 110, 0.12), transparent 70%); border-radius: 50%; pointer-events: none; } .calc-display::after { content: ''; position: absolute; bottom: -150px; left: -150px; width: 350px; height: 350px; background: radial-gradient(circle, rgba(0, 217, 255, 0.1), transparent 70%); border-radius: 50%; pointer-events: none; } .calc-display-content { position: relative; z-index: 1; } .calc-number { color: var(--primary-aqua); font-weight: 700; font-size: 3.5rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; line-height: 1; margin: 1rem 0; } .calc-label { font-size: 0.75rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 0.75rem; font-weight: 600; } .calc-secondary-text { font-size: 0.95rem; color: var(--text-muted); line-height: 1.8; } .calc-secondary-value { color: var(--accent-secondary); font-weight: 600; } .calc-secondary-value.pink { color: var(--primary-pink); } /* ── Info Panels ───────────────────────────────────────────── */ .info-panel { background: var(--bg-inset); border: 1px solid var(--border-default); border-left: 3px solid var(--primary-pink); border-radius: 0.5rem; padding: 1.25rem; display: flex; gap: 1rem; align-items: flex-start; } .info-panel-success { border-left-color: #10b981; } .info-panel-warning { border-left-color: #f59e0b; } .info-panel-error { border-left-color: #ef4444; } .info-icon { width: 20px; height: 20px; flex-shrink: 0; color: var(--primary-pink); } .info-text { font-size: 0.875rem; color: var(--text-secondary); line-height: 1.6; } /* ── Alert Banners ─────────────────────────────────────────── */ .alert { padding: 1rem 1.5rem; border-radius: 0.5rem; display: flex; align-items: center; gap: 1rem; } .alert-info { background: rgba(0, 217, 255, 0.1); border: 1px solid rgba(0, 217, 255, 0.3); color: var(--primary-aqua); } .alert-success { background: rgba(16, 185, 129, 0.1); border: 1px solid rgba(16, 185, 129, 0.3); color: #10b981; } .alert-warning { background: rgba(245, 158, 11, 0.1); border: 1px solid rgba(245, 158, 11, 0.3); color: #f59e0b; } .alert-error { background: rgba(239, 68, 68, 0.1); border: 1px solid rgba(239, 68, 68, 0.3); color: #ef4444; } /* ── Tabs ──────────────────────────────────────────────────── */ .tabs-container { display: flex; gap: 1rem; border-bottom: 1px solid var(--border-default); margin-bottom: 1.5rem; padding-bottom: 0; } .tab-button { padding: 1rem 1.5rem; background: transparent; border: none; color: var(--text-muted); font-weight: 500; cursor: pointer; transition: all 0.2s ease; position: relative; font-size: 0.95rem; border-bottom: 2px solid transparent; margin-bottom: -1px; } .tab-button.active { color: var(--primary-pink); border-bottom-color: var(--primary-pink); } .tab-button:hover:not(.active) { color: var(--text-secondary); } .tabs-vertical { display: flex; gap: 0; border-bottom: none; border-right: 1px solid var(--border-default); flex-direction: column; margin-bottom: 0; } .tab-button-vertical { padding: 1rem 1.5rem; background: transparent; border: none; color: var(--text-muted); font-weight: 500; cursor: pointer; transition: all 0.2s ease; font-size: 0.95rem; border-right: 2px solid transparent; text-align: left; } .tab-button-vertical.active { color: var(--primary-pink); border-right-color: var(--primary-pink); background: rgba(255, 0, 110, 0.05); } /* ── FAQ / Accordion ───────────────────────────────────────── */ .faq-button { padding: 1.5rem; background: transparent; border: none; color: inherit; cursor: pointer; text-align: left; font-size: 1rem; font-weight: 600; width: 100%; transition: all 0.2s ease; } .faq-button:hover { background: var(--bg-surface-hover); color: var(--primary-pink); } .faq-content { padding: 1.5rem; color: var(--text-secondary); font-size: 0.95rem; line-height: 1.6; background: var(--bg-inset); } .chevron { transition: transform 0.2s ease; } .chevron.open { transform: rotate(180deg); } /* ── Feature Cards ─────────────────────────────────────────── */ .feature-card { padding: 2rem; border-radius: 0.75rem; background: var(--bg-inset); border: 1px solid var(--border-default); transition: all 0.3s ease; } .feature-card:hover { transform: translateY(-4px); border-color: var(--border-strong); } .feature-icon { font-size: 2.5rem; margin-bottom: 1rem; } .feature-card h4 { font-weight: 600; margin-bottom: 0.5rem; } .feature-card p { font-size: 0.875rem; color: var(--text-muted); } /* ── Content Blocks ────────────────────────────────────────── */ .content-block { line-height: 1.7; padding: 1.5rem; border-radius: 0.75rem; } .content-block h1 { font-size: 2rem; font-weight: 700; margin-bottom: 1rem; margin-top: 1.5rem; } .content-block h1:first-child { margin-top: 0; } .content-block h2 { font-size: 1.5rem; font-weight: 600; margin-bottom: 0.875rem; margin-top: 1.5rem; } .content-block h2:first-child { margin-top: 0; } .content-block h3 { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.75rem; margin-top: 1rem; } .content-block h3:first-child { margin-top: 0; } .content-block p { margin-bottom: 1rem; font-size: 0.95rem; } .content-block ul { list-style: none; padding-left: 1.5rem; margin-bottom: 1rem; } .content-block ol { padding-left: 1.5rem; margin-bottom: 1rem; } .content-block li { margin-bottom: 0.5rem; position: relative; padding-left: 1rem; } .content-block ul li::before { content: '•'; position: absolute; left: 0; color: var(--primary-pink); } .content-block ol li { padding-left: 0; } .content-block blockquote { border-left: 3px solid var(--primary-pink); padding-left: 1.5rem; margin: 1.5rem 0; font-style: italic; } .content-block blockquote.fancy { position: relative; padding: 1.5rem 1.5rem 1.5rem 3rem; background: rgba(255, 0, 110, 0.05); border-left: none; border-radius: 0.5rem; } .content-block blockquote.fancy::before { content: '\201C'; position: absolute; left: 1rem; top: 0.5rem; font-size: 3rem; color: var(--primary-pink); font-family: Georgia, serif; line-height: 1; } .content-block a { color: var(--primary-pink); text-decoration: none; transition: all 0.2s ease; border-bottom: 1px solid transparent; } .content-block a:hover { color: var(--primary-pink-hover); border-bottom-color: var(--primary-pink-hover); } .content-block strong { font-weight: 700; color: inherit; } .content-block em { font-style: italic; } .content-block mark { background: rgba(255, 0, 110, 0.2); color: inherit; padding: 0.125rem 0.25rem; border-radius: 0.25rem; } .content-block code { background: var(--bg-surface-hover); padding: 0.125rem 0.375rem; border-radius: 0.25rem; font-family: 'Monaco', 'Courier New', monospace; font-size: 0.875em; } /* Dark content block (subtle uplift from page bg) */ .content-dark { background: var(--bg-section-b); border: 1px solid var(--border-default); color: var(--text-secondary); } .content-dark h1, .content-dark h2, .content-dark h3 { color: var(--text-primary); } .content-dark blockquote { color: var(--text-muted); } /* Medium grey content */ .content-medium-grey { background: var(--bg-surface); border: 1px solid var(--border-default); color: var(--text-secondary); } .content-medium-grey h1, .content-medium-grey h2, .content-medium-grey h3 { color: var(--text-primary); } .content-medium-grey a { color: var(--primary-pink-hover); } .content-medium-grey a:hover { color: var(--primary-pink); } .content-medium-grey blockquote { color: var(--text-muted); } /* Light grey content */ .content-light { background: var(--bg-contrast); border: 1px solid var(--border-contrast); color: var(--text-contrast); } .content-light h1, .content-light h2, .content-light h3 { color: var(--text-contrast-heading); } .content-light blockquote { color: var(--text-contrast-blockquote); } .content-light a { color: var(--text-contrast-link); } .content-light a:hover { color: var(--text-contrast-link-hover); } /* White content — THE KEY CHANGE: uses contrast variables, NOT hardcoded white */ .content-white { background: var(--bg-contrast); border: 1px solid var(--border-contrast); color: var(--text-contrast); } .content-white h1, .content-white h2, .content-white h3 { color: var(--text-contrast-heading); } .content-white blockquote { color: var(--text-contrast-blockquote); } .content-white a { color: var(--text-contrast-link); } .content-white a:hover { color: var(--text-contrast-link-hover); } /* Alternating page sections */ .section-alt { background: var(--bg-section-b); } /* ── Tables ────────────────────────────────────────────────── */ .table-container { overflow-x: auto; border-radius: 0.75rem; border: 1px solid var(--border-default); } .table-minimal { width: 100%; border-collapse: collapse; } .table-minimal thead { background: var(--bg-inset); } .table-minimal th { padding: 1rem 1.5rem; text-align: left; font-weight: 600; font-size: 0.875rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); border-bottom: 1px solid var(--border-default); } .table-minimal td { padding: 1rem 1.5rem; border-bottom: 1px solid var(--border-subtle); color: var(--text-secondary); } .table-minimal tr:hover { background: var(--bg-inset); } /* ── Pros & Cons ───────────────────────────────────────────── */ .pros-cons-table { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .pros-cons-column { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 0.75rem; padding: 2rem; } .pros-cons-column.pros { border-top: 3px solid #10b981; } .pros-cons-column.cons { border-top: 3px solid #ef4444; } .pros-cons-column-white { background: var(--bg-contrast); border: 1px solid var(--border-contrast); border-radius: 0.75rem; padding: 2rem; color: var(--text-contrast); } .pros-cons-column-white.pros { border-top: 3px solid #10b981; } .pros-cons-column-white.cons { border-top: 3px solid #ef4444; } .pros-cons-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1.5rem; } .pros-cons-title { font-size: 1.25rem; font-weight: 600; } .pros-cons-item { display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border-subtle); } .pros-cons-column-white .pros-cons-item { border-bottom-color: var(--border-contrast); } .pros-cons-item:last-child { border-bottom: none; } .pros-icon { color: #10b981; flex-shrink: 0; margin-top: 0.125rem; } .cons-icon { color: #ef4444; flex-shrink: 0; margin-top: 0.125rem; } /* ── Comparison Table ──────────────────────────────────────── */ .comparison-table { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .comparison-column { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 0.75rem; padding: 2rem; } .comparison-column.featured { border: 2px solid var(--primary-pink); transform: scale(1.05); } .comparison-header { text-align: center; padding-bottom: 1.5rem; border-bottom: 1px solid var(--border-default); margin-bottom: 1.5rem; } .comparison-title { font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; } .comparison-price { font-size: 2.5rem; font-weight: 700; color: var(--text-primary); } .comparison-feature { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0; border-bottom: 1px solid var(--border-subtle); } .check-icon { color: #10b981; flex-shrink: 0; } .cross-icon { color: #ef4444; flex-shrink: 0; } /* ── Stat Cards ────────────────────────────────────────────── */ .stat-card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 0.75rem; padding: 1.5rem; } .stat-value { font-size: 2.5rem; font-weight: 700; color: var(--text-primary); line-height: 1; } .stat-label { font-size: 0.875rem; color: var(--text-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 0.5rem; } .stat-change { font-size: 0.875rem; font-weight: 600; margin-top: 0.5rem; } .stat-change.positive { color: #10b981; } .stat-change.negative { color: #ef4444; } /* ── Hero ──────────────────────────────────────────────────── */ .hero { padding: 6rem 0; text-align: center; } .hero-title { font-size: 4rem; font-weight: 700; line-height: 1.1; margin-bottom: 1.5rem; color: var(--text-primary); } .hero-subtitle { font-size: 1.25rem; color: var(--text-muted); max-width: 42rem; margin: 0 auto 2.5rem; line-height: 1.6; } /* ── Badges ────────────────────────────────────────────────── */ .badge { display: inline-block; padding: 0.375rem 0.875rem; border-radius: 9999px; font-size: 0.75rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; } .badge-pink { background: rgba(255, 0, 110, 0.15); color: var(--primary-pink); border: 1px solid rgba(255, 0, 110, 0.3); } .badge-purple { background: rgba(157, 78, 221, 0.15); color: var(--primary-purple); border: 1px solid rgba(157, 78, 221, 0.3); } .badge-aqua { background: rgba(0, 217, 255, 0.15); color: var(--primary-aqua); border: 1px solid rgba(0, 217, 255, 0.3); } .badge-success { background: rgba(16, 185, 129, 0.15); color: #10b981; border: 1px solid rgba(16, 185, 129, 0.3); } .badge-warning { background: rgba(245, 158, 11, 0.15); color: #f59e0b; border: 1px solid rgba(245, 158, 11, 0.3); } .badge-error { background: rgba(239, 68, 68, 0.15); color: #ef4444; border: 1px solid rgba(239, 68, 68, 0.3); } /* ── Progress Bars ─────────────────────────────────────────── */ .progress-bar { height: 8px; background: var(--border-default); border-radius: 9999px; overflow: hidden; } .progress-fill { height: 100%; background: linear-gradient(90deg, var(--primary-pink), var(--primary-aqua)); border-radius: 9999px; transition: width 0.3s ease; } /* ── Pricing Cards ─────────────────────────────────────────── */ .pricing-card { background: var(--bg-surface); backdrop-filter: blur(10px); border: 1px solid var(--border-default); border-radius: 1rem; padding: 2.5rem; transition: all 0.3s ease; } .pricing-card:hover { transform: translateY(-8px); border-color: var(--border-strong); } .pricing-card.featured { border: 2px solid var(--primary-pink); background: rgba(255, 0, 110, 0.05); } /* ── Testimonials ──────────────────────────────────────────── */ .testimonial-card { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 0.75rem; padding: 2rem; } .testimonial-quote { font-size: 1.125rem; line-height: 1.7; margin-bottom: 1.5rem; color: var(--text-secondary); } .testimonial-author { display: flex; align-items: center; gap: 1rem; } .testimonial-avatar { width: 48px; height: 48px; border-radius: 50%; background: linear-gradient(135deg, var(--primary-pink), var(--primary-purple)); } .testimonial-name { font-weight: 600; } .testimonial-title { font-size: 0.875rem; color: var(--text-muted); } /* ── Timeline ──────────────────────────────────────────────── */ .timeline { position: relative; padding-left: 2rem; } .timeline::before { content: ''; position: absolute; left: 0; top: 0; bottom: 0; width: 2px; background: var(--border-default); } .timeline-item { position: relative; padding-bottom: 2rem; } .timeline-marker { position: absolute; left: -2.5rem; width: 12px; height: 12px; border-radius: 50%; background: var(--primary-pink); border: 2px solid var(--bg-body-start); } .timeline-content { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 0.5rem; padding: 1.5rem; } .timeline-date { font-size: 0.875rem; color: var(--primary-aqua); font-weight: 600; margin-bottom: 0.5rem; } /* timeline-white uses contrast variables */ .timeline-white::before { background: var(--border-contrast); } .timeline-white .timeline-marker { border-color: var(--bg-contrast); } .timeline-content-white { background: var(--bg-contrast); border: 1px solid var(--border-contrast); border-radius: 0.5rem; padding: 1.5rem; color: var(--text-contrast); } .timeline-content-white .timeline-date { color: var(--primary-pink); } /* ── Breadcrumbs ───────────────────────────────────────────── */ .breadcrumbs { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--text-muted); } .breadcrumb-item { transition: color 0.2s ease; color: var(--text-muted); } .breadcrumb-item:hover { color: var(--primary-pink); } .breadcrumb-separator { color: var(--text-faint); } /* ── Footer ────────────────────────────────────────────────── */ footer { background: var(--footer-bg); border-top: 1px solid var(--border-default); } .footer-logo { display: flex; align-items: center; gap: 1rem; margin-bottom: 2rem; } .footer-logo-link { display: flex; align-items: center; gap: 1rem; text-decoration: none; transition: opacity 0.2s ease; } .footer-logo-link:hover { opacity: 0.8; } .footer-logo-icon { width: 48px; height: 48px; background: linear-gradient(135deg, #ff006e, #00d9ff); border-radius: 0.75rem; display: flex; align-items: center; justify-content: center; color: #000; font-weight: 700; font-size: 1.5rem; } .footer-logo-text { font-size: 1.125rem; font-weight: 600; color: var(--text-primary); } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 2rem; margin-bottom: 2rem; } .footer-section h4 { font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-primary); margin-bottom: 1rem; } .footer-section a { display: block; font-size: 0.875rem; color: var(--text-muted); margin-bottom: 0.75rem; transition: color 0.2s ease; } .footer-section a:hover { color: var(--primary-pink); } /* Parent brand bar */ .parent-brand-bar { border-top: 1px solid var(--border-subtle); padding: 1.5rem 0; text-align: center; } .parent-brand-link { display: inline-flex; align-items: center; gap: 0.5rem; color: var(--text-muted); text-decoration: none; font-size: 0.875rem; transition: color 0.2s ease; } .parent-brand-link:hover { color: var(--text-secondary); } .parent-brand-icon { font-size: 1.25rem; } /* ── Divider ───────────────────────────────────────────────── */ .section-divider { height: 1px; background: var(--divider-gradient); margin: 3rem 0; } /* ── Tooltips ──────────────────────────────────────────────── */ .tooltip-container { position: relative; display: inline-block; } .tooltip { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); background: var(--bg-elevated); color: var(--text-primary); padding: 0.5rem 0.75rem; border-radius: 0.375rem; font-size: 0.75rem; white-space: nowrap; margin-bottom: 0.5rem; border: 1px solid var(--border-default); } .tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; transform: translateX(-50%); border: 4px solid transparent; border-top-color: var(--bg-elevated); } /* ── Spinner ───────────────────────────────────────────────── */ .spinner { width: 40px; height: 40px; border: 3px solid var(--border-default); border-top-color: var(--text-primary); border-radius: 50%; animation: spin 0.8s linear infinite; } .spinner-purple { border-top-color: var(--primary-purple); } @keyframes spin { to { transform: rotate(360deg); } } /* ── Modal ─────────────────────────────────────────────────── */ .modal-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.8); backdrop-filter: blur(4px); z-index: 9998; } .modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%); background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 1rem; padding: 2rem; max-width: 32rem; width: 90%; z-index: 9999; } .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; } .modal-title { font-size: 1.5rem; font-weight: 600; } .modal-close { background: transparent; border: none; color: var(--text-muted); cursor: pointer; padding: 0.5rem; transition: color 0.2s ease; } .modal-close:hover { color: var(--primary-pink); } /* ── Mega Menu ─────────────────────────────────────────────── */ .mega-menu { position: absolute; top: 100%; left: 0; right: 0; background: var(--bg-elevated); border: 1px solid var(--border-strong); border-radius: 0.75rem; padding: 2rem; margin-top: 1rem; z-index: 1000; box-shadow: var(--shadow-dropdown); display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .mega-menu-section h5 { font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-primary); margin-bottom: 1rem; } .mega-menu-item { display: block; padding: 0.75rem 0; color: var(--text-secondary); transition: color 0.2s ease; } .mega-menu-item:hover { color: var(--primary-pink); } /* ── Roman Overline ────────────────────────────────────────── */ .roman-overline { position: relative; display: inline-block; } .roman-overline::before { content: ''; position: absolute; top: -2px; left: 0; right: 0; height: 2px; background: currentColor; } /* ── Theme Toggle Icon ─────────────────────────────────────── */ .theme-toggle { background: none; border: none; cursor: pointer; color: var(--text-muted); padding: 0.5rem; transition: color 0.2s ease; display: flex; align-items: center; } .theme-toggle:hover { color: var(--primary-pink); } .theme-toggle svg { width: 1.25rem; height: 1.25rem; }