:root, .theme-light, body.theme-light { --primary: #fb596e; --primary-dim: #d93a52; --primary-strong: #a11f34; --primary-container: #ffe3e7; --on-primary: #ffffff; --on-primary-container: #7a0f23; --secondary: #0fb39a; --secondary-dim: #0a8b78; --secondary-container: #ccf3eb; --on-secondary: #ffffff; --on-secondary-container: #0a4a40; --tertiary: #e08a00; --tertiary-container: #ffecc7; --on-tertiary-container: #6b3e00; --info: #2d7ff9; --info-container: #dae8ff; --on-info-container: #0a3e8f; --surface: #f7f6f4; --surface-bright: #ffffff; --surface-dim: #efede9; --surface-container-lowest: #ffffff; --surface-container-low: #faf8f6; --surface-container: #f1efeb; --surface-container-high: #e8e5e0; --surface-container-highest: #dfdbd4; --surface-warm: #fff5f1; --on-surface: #1e1b1a; --on-surface-variant: #6b6561; --on-background: #1e1b1a; --outline: #b8b2ac; --outline-variant: #c4bbb0; --inverse-surface: #1e1b1a; --inverse-primary: #fb596e; --error: #d93025; --success: #0fb39a; --warning: #e08a00; --cta-gradient-start: #fb596e; --cta-gradient-mid: #ff7482; --cta-gradient-end: #ff8993; --cta-text-strong: #ffffff; --cta-text-soft: #ffefef; --cta-deco-strong: rgba(255, 255, 255, 0.9); --cta-deco-soft: rgba(255, 255, 255, 0.32); --cta-shadow: 0 14px 32px -14px color-mix(in srgb, var(--primary) 55%, transparent); --cta-btn-bg: #ffffff; --cta-btn-fg: #a11f34; --cta-btn-shadow: rgba(78, 0, 18, 0.18); --cta-btn-shadow-hover: rgba(255, 255, 255, 0.3); --progress-gradient: linear-gradient( 90deg, #fb596e 0%, #ff8993 55%, #0fb39a 100% ); --shadow-soft: 0 1px 2px rgba(30, 27, 26, 0.04), 0 2px 6px rgba(30, 27, 26, 0.04); --shadow-card: 0 2px 4px rgba(30, 27, 26, 0.04), 0 8px 20px rgba(30, 27, 26, 0.06); --shadow-lift: 0 4px 10px rgba(30, 27, 26, 0.06), 0 18px 36px rgba(30, 27, 26, 0.08); --shadow-shell: 0 2px 6px rgba(30, 27, 26, 0.04), 0 20px 44px rgba(30, 27, 26, 0.06); --shadow-cta: 0 10px 24px -8px color-mix(in srgb, var(--primary) 50%, transparent); --motion-fast: 160ms; --motion-base: 220ms; --motion-slow: 480ms; --ease-standard: cubic-bezier(0.2, 0.8, 0.2, 1); --ease-emphasis: cubic-bezier(0.4, 0, 0.2, 1); --glass-blur: 20px; --glass-nav-bg: rgba(255, 255, 255, 0.82); --focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 35%, transparent); --disabled-opacity: 0.4; --primary-blue: var(--primary); --primary-blue-hover: var(--primary-dim); --accent-blue: var(--secondary); --light-blue-text: var(--primary-strong, var(--primary)); } html body.theme-light, html body:not(.theme-dark) { --primary-blue: var(--primary) !important; --primary-blue-hover: var(--primary-dim) !important; --accent-blue: var(--secondary) !important; --light-blue-text: var(--primary-strong, var(--primary)) !important; } html body.theme-dark { --primary-blue: var(--primary) !important; --primary-blue-hover: var(--primary-dim) !important; --accent-blue: var(--secondary) !important; } .collapse-container { --collapse-accent: var(--primary) !important; } html { scroll-behavior: smooth !important; } html:has(main.eduloo-page) { font-size: 100% !important; } body { font-family: 'Be Vietnam Pro', sans-serif !important; color: var(--on-surface) !important; background: var(--surface) !important; /* `clip` (not `hidden`) so we still kill horizontal scroll without coercing overflow-y to `auto` — that side effect turned into a clip container and cut off the footer blog flyout as it rises upward. */ overflow-x: clip !important; line-height: 1.6 !important; } body.theme-light::before, body.theme-dark::before { content: ''; background: none !important; } :where(img:not(.base-image-preview__img)) { max-width: 100% !important; height: auto !important; display: block !important; } button { cursor: pointer !important; } .headline { font-family: 'Plus Jakarta Sans', sans-serif !important; } .material-symbols-outlined { font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24 !important; } .container { max-width: 1280px !important; margin: 0 auto !important; padding: 0 32px !important; background: transparent !important; border-radius: 0 !important; box-shadow: none !important; border-top: none !important; } /* The contact page's floating-card layout is designed full-bleed (like the base framework default), not capped to the site's usual 1280px reading width - the site-wide cap here made it look narrower/cramped than every other project. */ body:has(.contact-page) main.container { max-width: 100% !important; padding: 0 !important; } .container-narrow { max-width: 896px !important; margin: 0 auto !important; padding: 0 32px !important; } body.theme-dark { --cta-deco-soft: color-mix(in srgb, var(--tertiary) 30%, transparent); --eduloo-dark-page-bg: radial-gradient( circle at 10% 8%, color-mix(in srgb, var(--primary) 10%, transparent) 0%, transparent 44% ), radial-gradient( circle at 88% 14%, color-mix(in srgb, var(--primary) 6%, transparent) 0%, transparent 46% ), radial-gradient( circle at 50% 100%, color-mix(in srgb, var(--secondary) 5%, transparent) 0%, transparent 52% ), linear-gradient( 180deg, rgb(22 16 19) 0%, rgb(28 21 24) 46%, rgb(18 13 16) 100% ); --eduloo-dark-surface-card: linear-gradient( 150deg, color-mix( in srgb, var(--surface-container-highest) 84%, var(--primary-container) 16% ) 0%, color-mix( in srgb, var(--surface-container-highest) 88%, var(--secondary-container) 12% ) 100% ); --eduloo-dark-surface-card-soft: color-mix( in srgb, var(--surface-container-highest) 86%, var(--primary-container) 14% ); --eduloo-dark-surface-border: color-mix( in srgb, var(--outline-variant) 62%, var(--primary-container) 38% ); --eduloo-dark-surface-shadow: 0 24px 42px -28px color-mix(in srgb, black 74%, transparent); --eduloo-dark-chip-bg: linear-gradient( 136deg, color-mix(in srgb, var(--primary-container) 64%, transparent) 0%, color-mix(in srgb, var(--secondary-container) 44%, transparent) 100% ); --eduloo-dark-chip-text: color-mix( in srgb, var(--on-surface) 94%, var(--on-primary) 6% ); --eduloo-dark-btn-soft-bg: color-mix( in srgb, var(--surface-container-highest) 74%, var(--primary-container) 26% ); --eduloo-dark-btn-soft-bg-hover: color-mix( in srgb, var(--surface-container-highest) 64%, var(--primary-container) 36% ); --eduloo-dark-btn-soft-border: color-mix( in srgb, var(--outline-variant) 54%, var(--primary-container) 46% ); --eduloo-dark-btn-soft-text: color-mix( in srgb, var(--on-surface) 92%, var(--on-primary) 8% ); --eduloo-dark-btn-primary-bg: linear-gradient( 136deg, color-mix(in srgb, var(--primary) 82%, var(--primary-strong) 18%) 0%, color-mix(in srgb, var(--primary) 42%, var(--secondary) 58%) 100% ); --eduloo-dark-btn-primary-bg-hover: linear-gradient( 136deg, color-mix(in srgb, var(--primary) 88%, var(--primary-strong) 12%) 0%, color-mix(in srgb, var(--primary) 32%, var(--secondary) 68%) 100% ); --eduloo-dark-btn-primary-shadow: 0 18px 30px -20px color-mix(in srgb, black 70%, transparent); --eduloo-dark-focus-ring: color-mix( in srgb, var(--secondary) 52%, transparent ); color-scheme: dark; } body.theme-dark { background: var(--eduloo-dark-page-bg) !important; color: var(--on-surface) !important; } body.theme-dark { --primary: #fb596e; --primary-dim: #ec4258; --primary-container: #7a2a3b; --on-primary: #2a0712; --on-primary-container: #ffe0ea; --secondary: #b6c0ff; --secondary-container: #4f4a84; --on-secondary: #f4f1ff; --tertiary: #ffd88e; --tertiary-container: #6f5421; --on-tertiary-container: #fff4d6; --surface: #141413; --surface-bright: #201f1d; --surface-dim: #0d0d0c; --surface-container-lowest: #181716; --surface-container-low: #1e1d1b; --surface-container: #252422; --surface-container-high: #2d2c29; --surface-container-highest: #393733; --on-surface: #f3f0ea; --on-surface-variant: #b4ada2; --on-background: #f3f0ea; --outline: #908779; --outline-variant: #4e483f; --eduloo-dark-elev-0: var(--surface-dim); --eduloo-dark-elev-1: var(--surface-container-low); --eduloo-dark-elev-2: var(--surface-container-high); --eduloo-dark-elev-3: var(--surface-container-highest); --eduloo-dark-inset: #2a1a23; --eduloo-dark-page-bg: radial-gradient( circle at 8% 10%, color-mix(in srgb, var(--primary) 18%, transparent) 0%, transparent 42% ), radial-gradient( circle at 90% 12%, color-mix(in srgb, var(--secondary) 16%, transparent) 0%, transparent 46% ), linear-gradient( 180deg, color-mix(in srgb, var(--surface-dim) 90%, black 10%) 0%, var(--surface) 44%, color-mix(in srgb, var(--surface-dim) 84%, black 16%) 100% ); --eduloo-dark-surface-card: linear-gradient( 152deg, color-mix( in srgb, var(--surface-container-high) 88%, var(--primary-container) 12% ) 0%, color-mix( in srgb, var(--surface-container-highest) 84%, var(--secondary-container) 16% ) 100% ); --eduloo-dark-surface-card-soft: color-mix( in srgb, var(--surface-container-highest) 86%, var(--primary-container) 14% ); --eduloo-dark-surface-border: color-mix( in srgb, var(--outline-variant) 76%, rgba(255, 255, 255, 0.24) 24% ); --eduloo-dark-surface-shadow: 0 12px 24px -16px rgba(0, 0, 0, 0.38); --eduloo-dark-btn-soft-bg: color-mix( in srgb, var(--surface-container-highest) 84%, var(--primary-container) 16% ); --eduloo-dark-btn-soft-bg-hover: color-mix( in srgb, var(--surface-container-highest) 72%, var(--primary-container) 28% ); --eduloo-dark-btn-soft-border: color-mix( in srgb, var(--outline-variant) 78%, rgba(255, 255, 255, 0.2) 22% ); --eduloo-dark-btn-soft-text: color-mix( in srgb, var(--on-surface) 94%, var(--on-primary) 6% ); --eduloo-dark-btn-primary-bg: linear-gradient( 136deg, color-mix(in srgb, var(--primary) 88%, var(--on-primary-container) 12%) 0%, color-mix(in srgb, var(--primary) 68%, var(--secondary) 32%) 100% ); --eduloo-dark-btn-primary-bg-hover: linear-gradient( 136deg, color-mix(in srgb, var(--primary) 94%, var(--on-primary-container) 6%) 0%, color-mix(in srgb, var(--primary) 72%, var(--secondary) 28%) 100% ); --eduloo-dark-btn-primary-shadow: 0 14px 24px -16px color-mix(in srgb, var(--primary) 44%, black 56%); --eduloo-dark-focus-ring: #ff9ab0; } body.theme-dark { --surface: #141413; --surface-bright: #201f1d; --surface-dim: #0d0d0c; --surface-container-lowest: #181716; --surface-container-low: #1e1d1b; --surface-container: #252422; --surface-container-high: #2d2c29; --surface-container-highest: #393733; --outline: #908779; --outline-variant: #4e483f; --on-surface: #f3f0ea; --on-surface-variant: #b4ada2; --on-background: #f3f0ea; --eduloo-text-title: #f3f0ea; --eduloo-text-body: #cbc4ba; --eduloo-text-muted: #968e83; --eduloo-dark-surface-shell: color-mix( in srgb, var(--surface-container-low) 88%, var(--surface) 12% ); --eduloo-dark-surface-card: color-mix( in srgb, var(--surface-container-high) 84%, var(--primary-container) 16% ); --eduloo-dark-surface-panel: color-mix( in srgb, var(--surface-container-highest) 82%, var(--primary-container) 18% ); --eduloo-dark-border-subtle: rgba(255, 255, 255, 0.08); --eduloo-dark-border-strong: rgba(255, 255, 255, 0.12); --eduloo-dark-shadow-soft: 0 10px 20px -12px rgba(0, 0, 0, 0.34); --eduloo-dark-shadow-soft-sm: 0 8px 16px -12px rgba(0, 0, 0, 0.3); --eduloo-dark-focus-ring: #ff9db3; --eduloo-accent-flashcards: #f59e0b; --eduloo-accent-quizzes: #f43f5e; --eduloo-accent-summaries: var(--secondary-dim); --eduloo-accent-podcasts: #a78bfa; --eduloo-accent-documents: #38bdf8; --eduloo-progress-gradient: linear-gradient(90deg, #ff7f98 0%, #8ec9ff 100%); --eduloo-kicker-bg: color-mix( in srgb, var(--primary-container) 60%, var(--surface-container-highest) 40% ); --eduloo-kicker-border: color-mix( in srgb, var(--primary) 48%, var(--outline-variant) 52% ); --eduloo-input-inset-bg: color-mix( in srgb, var(--surface-container-low) 72%, var(--surface-container-lowest) 28% ); --eduloo-input-inset-border: color-mix( in srgb, var(--outline-variant) 60%, rgba(255, 255, 255, 0.18) 40% ); --eduloo-input-unified-bg: color-mix( in srgb, var(--surface-container-low) 72%, var(--surface-container-lowest) 28% ); --eduloo-input-unified-bg-hover: color-mix( in srgb, var(--surface-container-low) 84%, var(--surface-container) 16% ); --eduloo-input-unified-bg-focus: color-mix( in srgb, var(--surface-container-low) 80%, var(--primary-container) 20% ); --eduloo-input-unified-border: color-mix( in srgb, var(--outline-variant) 60%, rgba(255, 255, 255, 0.18) 40% ); --eduloo-input-unified-border-hover: color-mix( in srgb, var(--outline-variant) 42%, var(--primary) 58% ); --eduloo-input-unified-border-focus: color-mix( in srgb, var(--primary) 58%, var(--outline-variant) 42% ); --eduloo-input-unified-ring: color-mix( in srgb, var(--primary) 24%, transparent ); } body.theme-dark { --eduloo-dark-elev-shell: color-mix( in srgb, var(--surface-container-low) 90%, var(--surface) 10% ); --eduloo-dark-elev-card: color-mix( in srgb, var(--surface-container-high) 82%, var(--primary-container) 18% ); --eduloo-dark-elev-panel: color-mix( in srgb, var(--surface-container-highest) 80%, var(--surface-container-high) 20% ); --eduloo-dark-elev-inset: color-mix( in srgb, var(--surface-container-low) 72%, var(--surface-container-lowest) 28% ); --eduloo-dark-border-subtle: color-mix( in srgb, var(--outline-variant) 66%, rgba(255, 255, 255, 0.18) 34% ); --eduloo-dark-border-strong: color-mix( in srgb, var(--outline-variant) 54%, rgba(255, 255, 255, 0.24) 46% ); --eduloo-dark-border-accent: color-mix( in srgb, var(--primary) 58%, var(--outline-variant) 42% ); --eduloo-dark-shadow-soft: 0 10px 20px -14px rgba(0, 0, 0, 0.34); --eduloo-dark-shadow-float: 0 14px 24px -16px rgba(0, 0, 0, 0.38); --eduloo-input-unified-bg: var(--eduloo-dark-elev-inset); --eduloo-input-unified-bg-hover: color-mix( in srgb, var(--eduloo-dark-elev-inset) 82%, var(--surface-container) 18% ); --eduloo-input-unified-bg-focus: color-mix( in srgb, var(--eduloo-dark-elev-inset) 78%, var(--primary-container) 22% ); --eduloo-input-unified-border: var(--eduloo-dark-border-subtle); --eduloo-input-unified-border-hover: color-mix( in srgb, var(--eduloo-dark-border-subtle) 58%, var(--primary) 42% ); --eduloo-input-unified-border-focus: var(--eduloo-dark-border-accent); --eduloo-input-unified-ring: color-mix( in srgb, var(--primary) 28%, transparent ); --eduloo-ui-soft-btn-bg: color-mix( in srgb, var(--surface-container-highest) 82%, var(--primary-container) 18% ); --eduloo-ui-soft-btn-bg-hover: color-mix( in srgb, var(--surface-container-highest) 66%, var(--primary-container) 34% ); --eduloo-ui-soft-btn-border: var(--eduloo-dark-border-strong); --eduloo-ui-soft-btn-text: var(--eduloo-text-title); --eduloo-ui-primary-btn-bg: linear-gradient( 136deg, color-mix(in srgb, var(--primary) 92%, var(--on-primary-container) 8%) 0%, color-mix(in srgb, var(--primary) 72%, var(--secondary) 28%) 100% ); --eduloo-ui-primary-btn-border: color-mix( in srgb, var(--primary) 68%, rgba(255, 255, 255, 0.3) 32% ); --eduloo-ui-primary-btn-shadow: 0 12px 20px -12px color-mix(in srgb, var(--primary) 34%, transparent); } body.theme-dark { --primary: #fb596e; --primary-dim: #ec4258; --primary-strong: #ff8a99; --primary-container: #7a2a3b; --on-primary: #380812; --on-primary-container: #ffdae0; --secondary: #4ad6c2; --secondary-dim: #2cb9a7; --secondary-container: #134640; --on-secondary: #00261f; --on-secondary-container: #a8ecdf; --tertiary: #f2b25a; --tertiary-container: #523700; --on-tertiary-container: #ffe4ac; --info: #8fb6ff; --info-container: #1e2f58; --on-info-container: #cfdcff; --surface: #141413; --surface-bright: #201f1d; --surface-dim: #0d0d0c; --surface-container-lowest: #181716; --surface-container-low: #1e1d1b; --surface-container: #252422; --surface-container-high: #2d2c29; --surface-container-highest: #393733; --surface-warm: #2b2823; --on-surface: #f3f0ea; --on-surface-variant: #b4ada2; --on-background: #f3f0ea; --outline: #908779; --outline-variant: #4e483f; --inverse-surface: #f3f0ea; --inverse-primary: #ec4258; --error: #ff8b85; --success: #4ad6c2; --warning: #f2b25a; } body.theme-dark { --cta-gradient-start: var(--primary); --cta-gradient-mid: color-mix( in srgb, var(--primary) 70%, var(--on-primary-container) 30% ); --cta-gradient-end: var(--primary-strong); --cta-text-strong: var(--on-primary-container); --cta-text-soft: color-mix( in srgb, var(--on-primary-container) 80%, var(--primary) 20% ); --progress-gradient: linear-gradient( 90deg, var(--primary) 0%, color-mix(in srgb, var(--primary) 55%, var(--secondary) 45%) 55%, var(--secondary) 100% ); --shadow-cta: 0 10px 24px -8px color-mix(in srgb, var(--primary) 50%, transparent); --cta-shadow: 0 14px 32px -14px color-mix(in srgb, var(--primary) 55%, transparent); --focus-ring: 0 0 0 3px color-mix(in srgb, var(--primary) 38%, transparent); } body.theme-dark { background: var(--eduloo-dark-page-bg) !important; } /* The `html body .pricing-page` override block that used to live here is gone. Every rule in it existed for one of two reasons, both now fixed in the framework: the pricing page hardcoded Inter (it inherits the project font now) and painted its own background (it paints none now). The section padding, card, badge, button, segmented and table repaints are base defaults. Project-specific pricing styling lives in pricing_overlay.css. This one rule stays, because it is not a repaint: `.eduloo-page section` sets `content-visibility: auto` (landing-base.css:1), which makes every off-screen section skip layout - including the pricing sections on /pricing and the plan cards embedded in the landing page. */ html body .pricing-page section { content-visibility: visible !important; contain-intrinsic-size: auto !important; } html body .checkout-page { background: var(--bg) !important; color: var(--text) !important; width: 100% !important; max-width: 100% !important; margin: 0 !important; padding-top: var(--eduloo-nav-height, 96px) !important; padding-left: 0 !important; padding-right: 0 !important; padding-bottom: 0 !important; } html body .checkout-page, html body .checkout-page * { line-height: 1.5 !important; } html body .checkout-page .mono, html body .checkout-page .mono * { font-family: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace !important; } html body .checkout-page section { content-visibility: visible !important; contain-intrinsic-size: auto !important; } html body .checkout-page .checkout-result-title { font-size: 32px !important; line-height: 1.15 !important; letter-spacing: -0.02em !important; font-weight: 600 !important; color: var(--text) !important; margin: 0 !important; } html body .checkout-page .checkout-result-sub { font-size: 15px !important; line-height: 1.5 !important; color: var(--text-muted) !important; margin: 12px 0 0 !important; max-width: 440px !important; } html body .checkout-page .checkout-section-title { font-size: 14px !important; line-height: 1.4 !important; font-weight: 600 !important; color: var(--text) !important; margin: 0 0 14px !important; } html body .checkout-page .checkout-brand-name { font-size: 14px !important; font-weight: 600 !important; line-height: 1 !important; } html body .checkout-page .checkout-result-hint { font-size: 12px !important; line-height: 1.5 !important; } html body .checkout-page .checkout-summary-item-name { font-size: 14px !important; line-height: 1.4 !important; } html body .checkout-page .checkout-summary-item-sub { font-size: 12px !important; line-height: 1.4 !important; } html body .checkout-page .checkout-summary-total-amount { font-size: 28px !important; line-height: 1 !important; font-weight: 600 !important; } html body .checkout-page .ps-label { font-size: 13px !important; line-height: 1.4 !important; } html body .checkout-page .ps-input { font-size: 14px !important; line-height: 1 !important; height: 40px !important; } html body .checkout-page .ps-radio-card-title { font-size: 14px !important; line-height: 1.3 !important; } html body .checkout-page .ps-radio-card-sub { font-size: 12px !important; line-height: 1.4 !important; } html body .checkout-page .checkout-result-unlocked-list li { font-size: 13px !important; line-height: 1.4 !important; } html body .checkout-page .checkout-trust-row { font-size: 12px !important; line-height: 1.4 !important; } html body .checkout-page .checkout-trust-row a, html body .checkout-page .checkout-trust-row span { line-height: 1.4 !important; } html body .checkout-page .checkout-result-help { font-size: 12px !important; line-height: 1.5 !important; } html body .checkout-page .checkout-step-label { font-size: 14px !important; line-height: 1.4 !important; } html body .checkout-page .checkout-step-eta { font-size: 11px !important; line-height: 1.4 !important; } html body .checkout-page .checkout-result-body { padding: 72px 32px !important; gap: 0; } html body .checkout-page .checkout-result-icon { margin-bottom: 24px !important; } html body .checkout-page .checkout-result-receipt { margin-top: 32px !important; } html body .checkout-page .checkout-result-actions { margin-top: 32px !important; gap: 10px !important; } html body .checkout-page .checkout-result-help { margin-top: 24px !important; } html body .checkout-page .checkout-result-hint { margin-top: 16px !important; } html body .checkout-page .checkout-result-unlocked { margin-top: 32px !important; } html body .checkout-page .checkout-result-unlocked-list { margin-top: 12px !important; gap: 8px !important; } html body .checkout-page .checkout-result-receipt-body { padding: 20px !important; } html body .checkout-page .checkout-result-receipt-head { padding: 14px 20px !important; } html body .checkout-page .checkout-result-receipt-actions { padding: 12px 20px !important; gap: 8px !important; } html body .checkout-page .checkout-result-steps { margin-top: 32px !important; padding: 20px !important; } html body .checkout-page .checkout-step { padding: 10px 0 !important; gap: 12px !important; } @media (max-width: 900px) { html body .checkout-page .checkout-result-title { font-size: 26px !important; } html body .checkout-page .checkout-result-body { padding: 32px 16px 48px !important; } } html body.theme-dark { --surface-dim: #0d0d0c; --surface: #141413; --surface-bright: #201f1d; --surface-container-lowest: #181716; --surface-container-low: #1e1d1b; --surface-container: #252422; --surface-container-high: #2d2c29; --surface-container-highest: #393733; --outline: #908779; --outline-variant: #4e483f; --on-surface: #f3f0ea; --on-surface-variant: #b4ada2; --on-background: #f3f0ea; --primary: #fb596e; --primary-dim: #ec4258; --primary-container: #7a2a3b; --eduloo-text-title: #f3f0ea; --eduloo-text-body: #cbc4ba; --eduloo-text-muted: #968e83; --eduloo-dark-inset: #1a1816; --eduloo-dark-page-bg: var(--surface-dim); background: var(--surface-dim) !important; } /* ── Change-plan dialog: eduloo-branded base modal (window.Modal), scoped to this dialog only via .up-billing-change-modal so other base popups are unaffected. styles.css is global, so it's available on the billing page. ── */ html body .modal-content.up-billing-change-modal { font-family: 'Be Vietnam Pro', sans-serif !important; border-radius: 24px !important; border: 1px solid color-mix(in srgb, var(--on-surface) 9%, transparent) !important; background: var(--surface-bright) !important; box-shadow: 0 26px 70px -30px color-mix(in srgb, var(--on-surface) 45%, transparent) !important; overflow: hidden !important; } html body .up-billing-change-modal .modal-header { padding: 20px 24px 14px !important; border-bottom: 1px solid color-mix(in srgb, var(--on-surface) 8%, transparent) !important; } html body .up-billing-change-modal .modal-header h3 { font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 800 !important; font-size: 20px !important; letter-spacing: -0.02em !important; color: var(--on-surface) !important; } html body .up-billing-change-modal .modal-header .close { color: var(--on-surface-variant) !important; } html body .up-billing-change-modal .modal-body { padding: 18px 24px !important; } html body .up-billing-change-modal .modal-footer { padding: 14px 24px 20px !important; border-top: 1px solid color-mix(in srgb, var(--on-surface) 8%, transparent) !important; } html body .up-billing-change-modal .modal-actions .button { border-radius: 999px !important; font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 800 !important; } html body .up-billing-change-modal .modal-actions .button-primary { background: linear-gradient( 135deg, var(--cta-gradient-start), var(--cta-gradient-mid) 60%, var(--cta-gradient-end) ) !important; color: #ffffff !important; border: 0 !important; } html body .up-billing-change-modal .modal-actions .button-ghost { background: color-mix(in srgb, var(--on-surface) 5%, transparent) !important; color: var(--on-surface-variant) !important; } /* Billing-period toggle inside the change-plan modal. The base --up-* tokens are scoped to .dashboard-page.up-panel, but window.Modal portals the dialog to (outside that scope), so the active pill loses its accent. Restate it here with eduloo's GLOBAL theme tokens, matching the /pricing toggle. */ html body .up-billing-change-modal .ps-segmented { background: color-mix( in srgb, var(--primary) 7%, var(--surface-container) ) !important; border: 1px solid color-mix(in srgb, var(--primary) 14%, transparent) !important; margin-bottom: 24px !important; } /* Breathing room before the prorate/total summary box. */ html body .up-billing-change-modal .up-billing-modal__preview { margin-top: 22px !important; } html body .up-billing-change-modal .ps-segmented-opt { font-family: 'Plus Jakarta Sans', sans-serif !important; font-weight: 700 !important; color: var(--on-surface-variant) !important; } html body .up-billing-change-modal .ps-segmented-opt.is-active { background: linear-gradient( 135deg, var(--cta-gradient-start), var(--cta-gradient-mid) 60%, var(--cta-gradient-end) ) !important; color: #ffffff !important; box-shadow: 0 9px 20px -9px color-mix(in srgb, var(--primary) 55%, transparent) !important; } html body .up-billing-change-modal .ps-segmented-opt .ps-badge { background: color-mix(in srgb, var(--on-surface) 8%, transparent) !important; color: var(--on-surface-variant) !important; } html body .up-billing-change-modal .ps-segmented-opt.is-active .ps-badge { background: color-mix(in srgb, var(--on-primary) 88%, transparent) !important; color: var(--primary) !important; } /* ── Primary buttons: base_elements.css hardcodes a purple gradient with !important, so every base modal / form CTA (family invite link, confirm dialogs, ...) shipped purple. Recoloured site-wide to the eduloo coral CTA, never page-scoped, so any base component inherits it. Admin is excluded and stays framework-default. ── */ body:not(:has(.admin-container)) .button-primary, body:not(:has(.admin-container)) .btn-primary, body:not(:has(.admin-container)) a.button-primary, body:not(:has(.admin-container)) a.btn-primary, body:not(:has(.admin-container)) button.button-primary, body:not(:has(.admin-container)) button.btn-primary, body.theme-light:not(:has(.admin-container)) .button-primary, body.theme-light:not(:has(.admin-container)) .btn-primary, body.theme-dark:not(:has(.admin-container)) .button-primary, body.theme-dark:not(:has(.admin-container)) .btn-primary { background: linear-gradient( 135deg, var(--cta-gradient-start), var(--cta-gradient-mid) 60%, var(--cta-gradient-end) ) !important; color: #ffffff !important; border: 0 !important; } body:not(:has(.admin-container)) .button-primary:hover, body:not(:has(.admin-container)) .btn-primary:hover, body.theme-light:not(:has(.admin-container)) .button-primary:hover, body.theme-light:not(:has(.admin-container)) .btn-primary:hover, body.theme-dark:not(:has(.admin-container)) .button-primary:hover, body.theme-dark:not(:has(.admin-container)) .btn-primary:hover { background: linear-gradient( 135deg, var(--primary-dim), var(--cta-gradient-start) 60%, var(--cta-gradient-mid) ) !important; color: #ffffff !important; } body:not(:has(.admin-container)) .button-primary:active, body:not(:has(.admin-container)) .btn-primary:active, body.theme-light:not(:has(.admin-container)) .button-primary:active, body.theme-dark:not(:has(.admin-container)) .button-primary:active { background: linear-gradient( 135deg, var(--primary-dim), var(--primary) 70% ) !important; } .footer-credit-inline { opacity: 1 !important; } .base-consent .base-consent__btn.base-consent__btn--accent, .base-consent .base-consent__btn.base-consent__btn--accent:hover { color: #380812 !important; } /* Blog overview: map the component's theming contract onto eduloo's Material tokens. These already flip per theme, so one block covers light and dark and replaces the !important override that used to restate the chip rules. Declared on `body`, not `:root`: the Material tokens are redefined on `body.theme-dark`, so a :root mapping would substitute the light values and inherit them down into dark mode. */ body { --blog-accent: var(--primary); --blog-surface: var(--surface-container-lowest); --blog-card-border: color-mix( in srgb, var(--outline-variant) 56%, transparent ); --blog-chip-bg: var(--surface-container-low); --blog-chip-border: color-mix( in srgb, var(--outline-variant) 54%, transparent ); --blog-placeholder-bg: var(--surface-container-low); }