/* GENERATED by build/gen_colors.py — edit src/colors-tokens.css or src/colors-extra.css, not this file. */ /* ========================================================================== INVESTOOR — colour tokens: the ONE place colours are defined. Every public page reads these (html.rd-colors). Switch the accent with the class acc-emerald | acc-azure | acc-magenta | acc-gold | acc-platinum on . Gold is the default on the review site; controls are Platinum in every accent (client's choice, 2026-09-23). ========================================================================== */ html.rd-colors { /* Navy surfaces */ --rd-navy-950: #050E1A; --rd-navy-950-rgb: 5, 14, 26; --rd-navy-900: #06111F; --rd-navy-900-rgb: 6, 17, 31; --rd-navy-850: #081728; --rd-navy-800: #0A1A30; --rd-navy-800-rgb: 10, 26, 48; --rd-navy-700: #0C2138; --rd-navy-700-rgb: 12, 33, 56; --rd-navy-600: #112A47; --rd-navy-600-rgb: 17, 42, 71; --rd-navy-500: #1A3658; /* Accent: emerald (default) */ --rd-acc: #2FBF8F; /* text, icons, headline accent on navy */ --rd-acc-rgb: 47, 191, 143; /* same colour for translucent fills and borders */ --rd-acc-deep: #1FA67A; --rd-acc-light: #9BE7C8; /* light tint for small text on dark cards */ --rd-acc-light-rgb: 155, 231, 200; --rd-acc-ink: #0B7A57; /* accent text on white */ --rd-acc-ink-rgb: 11, 122, 87; /* same colour for accent-tinted lines on white */ --rd-acc-soft: #E3F5EE; /* accent tint on white */ --rd-acc-grad: linear-gradient(180deg, #48D3A4 0%, #25B282 100%); --rd-acc-on: #06231A; /* text on accent-filled buttons */ } /* Controls are Platinum in every accent: the client chose the gold theme with platinum buttons (2026-09-23). Buttons, toggles, the calculator select and the icon chips they marked read these; everything else follows --rd-acc above. */ html.rd-colors { --rd-ctl: #D9DDE3; /* control colour on navy */ --rd-ctl-rgb: 217, 221, 227; --rd-ctl-ink: #525C6B; /* the same silver as text/icons on white */ --rd-ctl-ink-rgb: 82, 92, 107; --rd-ctl-soft: #F2F4F7; --rd-ctl-grad: linear-gradient(180deg, #E7EAEF 0%, #C9D0DA 100%); --rd-ctl-on: #0B1B30; /* text on a filled control */ } html.rd-colors.acc-azure { --rd-acc: #4DAAFF; --rd-acc-rgb: 77, 170, 255; --rd-acc-deep: #2E8FF5; --rd-acc-light: #A9D3FF; --rd-acc-light-rgb: 169, 211, 255; --rd-acc-ink: #1A62CF; --rd-acc-ink-rgb: 26, 98, 207; --rd-acc-soft: #E6F0FD; --rd-acc-grad: linear-gradient(180deg, #6BBBFF 0%, #3796F7 100%); --rd-acc-on: #06111F; } html.rd-colors.acc-magenta { --rd-acc: #FF4D8A; --rd-acc-rgb: 255, 77, 138; --rd-acc-deep: #E0115F; --rd-acc-light: #FFB3CC; --rd-acc-light-rgb: 255, 179, 204; --rd-acc-ink: #C20D52; --rd-acc-ink-rgb: 194, 13, 82; --rd-acc-soft: #FCE6EE; --rd-acc-grad: linear-gradient(180deg, #DC1A63 0%, #C80D52 100%); --rd-acc-on: #FFFFFF; } html.rd-colors.acc-platinum { --rd-acc: #D9DDE3; --rd-acc-rgb: 217, 221, 227; --rd-acc-deep: #B9C1CC; --rd-acc-light: #EEF1F5; --rd-acc-light-rgb: 238, 241, 245; --rd-acc-ink: #525C6B; --rd-acc-ink-rgb: 82, 92, 107; --rd-acc-soft: #F2F4F7; --rd-acc-grad: linear-gradient(180deg, #E7EAEF 0%, #C9D0DA 100%); --rd-acc-on: #0B1B30; } html.rd-colors.acc-gold { --rd-acc: #EBC88F; --rd-acc-rgb: 235, 200, 143; --rd-acc-deep: #D9B373; --rd-acc-light: #F5DFB8; --rd-acc-light-rgb: 245, 223, 184; --rd-acc-ink: #8A6424; --rd-acc-ink-rgb: 138, 100, 36; --rd-acc-soft: #FBF3E4; --rd-acc-grad: linear-gradient(180deg, #F2D6A6 0%, #E3BD7F 100%); --rd-acc-on: #0B1B30; } /* Platinum on white cards: a deeper silver, so a filled control still reads as one (the pale tone is right on navy and looks disabled on white). */ html.rd-colors :is(.stats-banner-section, .services-section, .pricing-section, .testimonials-section, .blog-section, .faq-section, .faq-outro-section, .modal-card, .dropdown-menu) { --rd-ctl-grad: linear-gradient(180deg, #B4BFCE 0%, #8FA0B6 100%); } html.rd-colors.acc-platinum :is(.stats-banner-section, .services-section, .pricing-section, .testimonials-section, .blog-section, .faq-section, .faq-outro-section, .modal-card, .dropdown-menu) { --rd-acc-grad: linear-gradient(180deg, #C4CCD8 0%, #A3AEBF 100%); --rd-acc-deep: #8E9AAC; } /* ---------- Theme colours mapped to the palette (generated) ---------- */ :where(html.rd-colors) { --bg-dark: var(--rd-navy-900); --bg-surface: var(--rd-navy-800); --bg-card: rgba(var(--rd-navy-700-rgb), 0.75); --bg-card-hover: rgba(var(--rd-navy-600-rgb), 0.85); --bg-glass: rgba(var(--rd-navy-700-rgb), 0.65); --border-glow: rgba(var(--rd-acc-rgb), 0.3); --border-light: rgba(var(--rd-navy-700-rgb), 0.08); --primary: var(--rd-acc); --primary-glow: rgba(var(--rd-acc-rgb), 0.4); --primary-gradient: linear-gradient(135deg, var(--rd-acc) 0%, var(--rd-acc-deep) 100%); --accent-green: var(--rd-acc); --accent-green-glow: rgba(var(--rd-acc-rgb), 0.35); --green-gradient: linear-gradient(135deg, var(--rd-acc) 0%, var(--rd-acc-deep) 100%); --accent-amber: var(--rd-acc); --text-inverse: var(--rd-navy-900); } :where(html.rd-colors) .glow-1 { background-image: radial-gradient(circle, var(--rd-acc) 0%, transparent 70%); } :where(html.rd-colors) .glow-2 { background-image: radial-gradient(circle, var(--rd-acc) 0%, transparent 70%); } :where(html.rd-colors) .gradient-text { background-image: linear-gradient(135deg, var(--rd-acc) 0%, var(--rd-acc-deep) 50%, var(--rd-acc-deep) 100%); } :where(html.rd-colors) .gradient-accent { background-image: linear-gradient(135deg, var(--rd-acc) 0%, var(--rd-acc) 100%); } :where(html.rd-colors) .gradient-text-green { background-image: linear-gradient(135deg, var(--rd-acc) 0%, var(--rd-acc) 100%); } :where(html.rd-colors) .section-subtitle { background-color: rgba(var(--rd-acc-rgb), 0.1); border-color: rgba(var(--rd-acc-rgb), 0.2); } :where(html.rd-colors) .highlight-link { color: var(--rd-acc) !important; } :where(html.rd-colors) .btn-primary { box-shadow: 0 4px 15px rgba(var(--rd-acc-rgb), 0.3); } :where(html.rd-colors) .btn-primary:hover { box-shadow: 0 8px 25px rgba(var(--rd-acc-rgb), 0.5); } :where(html.rd-colors) .btn-secondary, :where(html.rd-colors) .btn-hero-secondary { background-color: rgba(var(--rd-acc-rgb), 0.14); color: var(--rd-acc-light); border-color: rgba(var(--rd-acc-rgb), 0.5); box-shadow: 0 0 0 1px rgba(var(--rd-acc-rgb), 0.12), 0 8px 24px rgba(var(--rd-acc-rgb), 0.18); } :where(html.rd-colors) .btn-secondary:hover, :where(html.rd-colors) .btn-hero-secondary:hover { background-color: rgba(var(--rd-acc-rgb), 0.24); border-color: var(--rd-acc); box-shadow: 0 0 0 1px rgba(var(--rd-acc-rgb), 0.25), 0 12px 28px rgba(var(--rd-acc-rgb), 0.3); } :where(html.rd-colors) .btn-secondary i, :where(html.rd-colors) .btn-hero-secondary i { color: var(--rd-acc-light); } :where(html.rd-colors) .top-bar { background-color: rgba(var(--rd-navy-950-rgb), 0.95); } :where(html.rd-colors) .badge-tag { background-color: rgba(var(--rd-acc-rgb), 0.2); } :where(html.rd-colors) .header { background-color: rgba(var(--rd-navy-900-rgb), 0.8); } :where(html.rd-colors) .header.scrolled, :where(html.rd-colors) .header.is-scrolled { background-color: rgba(var(--rd-navy-900-rgb), 0.95); } :where(html.rd-colors) .logo-icon-box { box-shadow: 0 0 15px rgba(var(--rd-acc-rgb), 0.4); } :where(html.rd-colors) .highlight-link { color: var(--rd-acc) !important; } :where(html.rd-colors) .dropdown-menu li a:hover, :where(html.rd-colors) .dropdown-menu li.active a { background-color: rgba(var(--rd-acc-rgb), 0.15); } :where(html.rd-colors) .mobile-highlight { color: var(--rd-acc) !important; } :where(html.rd-colors) .hero-badge { background-color: rgba(var(--rd-acc-rgb), 0.1); border-color: rgba(var(--rd-acc-rgb), 0.3); color: var(--rd-acc); } :where(html.rd-colors) .visual-card.main-dashboard-card { box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 40px rgba(var(--rd-acc-rgb), 0.15); } :where(html.rd-colors) .tier-val { background-color: rgba(var(--rd-acc-rgb), 0.15); } :where(html.rd-colors) .chart-glow-dot { filter: drop-shadow(0 0 6px var(--rd-acc)); } :where(html.rd-colors) .dash-activity-strip { background-color: rgba(var(--rd-acc-rgb), 0.06); border-color: rgba(var(--rd-acc-rgb), 0.2); } :where(html.rd-colors) .bg-green { background-color: rgba(var(--rd-acc-rgb), 0.2); } :where(html.rd-colors) .pillar-card:hover { border-color: rgba(var(--rd-acc-rgb), 0.4); box-shadow: 0 20px 40px rgba(0, 0, 0, 0.6), 0 0 30px rgba(var(--rd-acc-rgb), 0.15); } :where(html.rd-colors) .pillar-card.featured { border-color: rgba(var(--rd-acc-rgb), 0.5); background-image: linear-gradient(180deg, rgba(var(--rd-acc-rgb), 0.08) 0%, rgba(var(--rd-navy-700-rgb), 0.8) 100%); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.6), 0 0 35px rgba(var(--rd-acc-rgb), 0.18); } :where(html.rd-colors) .ribbon-popular { box-shadow: 0 2px 10px rgba(var(--rd-acc-rgb), 0.4); } :where(html.rd-colors) .btn-pillar-cyan { box-shadow: 0 4px 18px rgba(var(--rd-acc-rgb), 0.35); } :where(html.rd-colors) .btn-pillar-cyan:hover { box-shadow: 0 8px 26px rgba(var(--rd-acc-rgb), 0.5); } :where(html.rd-colors) .btn-pillar-emerald { box-shadow: 0 4px 18px rgba(var(--rd-acc-rgb), 0.35); } :where(html.rd-colors) .btn-pillar-emerald:hover { box-shadow: 0 8px 26px rgba(var(--rd-acc-rgb), 0.5); } :where(html.rd-colors) .calculator-glass-box { background-image: linear-gradient(135deg, rgba(var(--rd-acc-rgb), 0.12) 0%, rgba(var(--rd-navy-800-rgb), 0.95) 100%); border-color: rgba(var(--rd-acc-rgb), 0.35); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(var(--rd-acc-rgb), 0.15); } :where(html.rd-colors) .calculator-glass-box .section-subtitle { color: var(--rd-acc); background-color: rgba(var(--rd-acc-rgb), 0.12); border-color: rgba(var(--rd-acc-rgb), 0.3); } :where(html.rd-colors) .calculator-glass-box .section-subtitle i { color: var(--rd-acc); } :where(html.rd-colors) .calc-header-row { border-bottom-color: rgba(var(--rd-acc-rgb), 0.2); } :where(html.rd-colors) .switch-btn { background-color: rgba(var(--rd-acc-rgb), 0.1); border-color: rgba(var(--rd-acc-rgb), 0.35); } :where(html.rd-colors) .switch-btn:hover { background-color: rgba(var(--rd-acc-rgb), 0.2); border-color: rgba(var(--rd-acc-rgb), 0.55); } :where(html.rd-colors) .switch-btn.active { box-shadow: 0 4px 12px rgba(var(--rd-acc-rgb), 0.3); } :where(html.rd-colors) .calc-controls { border-color: rgba(var(--rd-acc-rgb), 0.22); } :where(html.rd-colors) .input-display-box { border-color: rgba(var(--rd-acc-rgb), 0.4); } :where(html.rd-colors) .custom-select { border-color: rgba(var(--rd-acc-rgb), 0.4); box-shadow: 0 0 0 1px rgba(var(--rd-acc-rgb), 0.08); } :where(html.rd-colors) .custom-select:hover, :where(html.rd-colors) .custom-select:focus { border-color: rgba(var(--rd-acc-rgb), 0.7); background-color: rgba(var(--rd-acc-rgb), 0.1); box-shadow: 0 0 0 1px rgba(var(--rd-acc-rgb), 0.18), 0 8px 20px rgba(var(--rd-acc-rgb), 0.15); } :where(html.rd-colors) .calc-select-caret { color: var(--rd-acc-light); } :where(html.rd-colors) .calc-callout { border-color: rgba(var(--rd-acc-rgb), 0.28); } :where(html.rd-colors) .calc-result-card { border-color: rgba(var(--rd-acc-rgb), 0.35); box-shadow: var(--shadow-card), 0 0 30px rgba(var(--rd-acc-rgb), 0.12); } :where(html.rd-colors) .calc-result-card .b-value.text-emerald, :where(html.rd-colors) .calc-result-card .text-emerald { color: var(--rd-acc-light) !important; } :where(html.rd-colors) .calc-result-card .text-cyan { color: var(--rd-acc-light) !important; } :where(html.rd-colors) .calc-result-card .text-amber { color: var(--rd-acc) !important; } :where(html.rd-colors) .service-box:hover { border-color: rgba(var(--rd-acc-rgb), 0.4); } :where(html.rd-colors) .service-icon { background-color: rgba(var(--rd-acc-rgb), 0.12); border-color: rgba(var(--rd-acc-rgb), 0.25); } :where(html.rd-colors) .pricing-tab { background-color: rgba(var(--rd-acc-rgb), 0.1); border-color: rgba(var(--rd-acc-rgb), 0.32); } :where(html.rd-colors) .pricing-tab:hover { background-color: rgba(var(--rd-acc-rgb), 0.2); border-color: rgba(var(--rd-acc-rgb), 0.55); } :where(html.rd-colors) .pricing-tab.active { box-shadow: 0 4px 12px rgba(var(--rd-acc-rgb), 0.3); } :where(html.rd-colors) .plan-card:hover { border-color: rgba(var(--rd-acc-rgb), 0.4); } :where(html.rd-colors) .plan-card.popular-plan { background-image: linear-gradient(180deg, rgba(var(--rd-acc-rgb), 0.1) 0%, rgba(var(--rd-navy-700-rgb), 0.9) 100%); box-shadow: 0 15px 40px rgba(0, 0, 0, 0.6), 0 0 25px rgba(var(--rd-acc-rgb), 0.2); } :where(html.rd-colors) .plan-card .badge-green { background-color: rgba(var(--rd-acc-rgb), 0.28); color: var(--rd-acc-light); border-color: rgba(var(--rd-acc-light-rgb), 0.55); } :where(html.rd-colors) .plan-card .badge-cyan { background-color: rgba(var(--rd-acc-rgb), 0.28); color: var(--rd-acc-light); border-color: rgba(var(--rd-acc-light-rgb), 0.55); } :where(html.rd-colors) .plan-card.tone-cyan .spec-row span i, :where(html.rd-colors) .plan-card.tone-cyan .plan-info-trigger, :where(html.rd-colors) .plan-card.tone-cyan .plan-info-trigger i, :where(html.rd-colors) .plan-card[data-category="trading"] .spec-row span i, :where(html.rd-colors) .plan-card[data-category="trading"] .plan-info-trigger, :where(html.rd-colors) .plan-card[data-category="trading"] .plan-info-trigger i { color: var(--rd-acc-light) !important; } :where(html.rd-colors) .plan-card.tone-green .spec-row span i, :where(html.rd-colors) .plan-card.tone-green .plan-info-trigger, :where(html.rd-colors) .plan-card.tone-green .plan-info-trigger i, :where(html.rd-colors) .plan-card.popular-plan .spec-row span i, :where(html.rd-colors) .plan-card.popular-plan .plan-info-trigger, :where(html.rd-colors) .plan-card.popular-plan .plan-info-trigger i, :where(html.rd-colors) .plan-card[data-category="festanlage"] .spec-row span i, :where(html.rd-colors) .plan-card[data-category="festanlage"] .plan-info-trigger, :where(html.rd-colors) .plan-card[data-category="festanlage"] .plan-info-trigger i { color: var(--rd-acc-light) !important; } :where(html.rd-colors) .plan-card[data-category="trading"] .plan-badge { background-color: rgba(var(--rd-acc-rgb), 0.28); color: var(--rd-acc-light); border-color: rgba(var(--rd-acc-light-rgb), 0.55); } :where(html.rd-colors) .plan-card[data-category="festanlage"] .plan-badge { background-color: rgba(var(--rd-acc-rgb), 0.28); color: var(--rd-acc-light); border-color: rgba(var(--rd-acc-light-rgb), 0.55); } :where(html.rd-colors) .plan-card .spec-row span i.text-cyan { color: var(--rd-acc-light) !important; } :where(html.rd-colors) .plan-card .spec-row span i.text-emerald { color: var(--rd-acc-light) !important; } :where(html.rd-colors) .plan-card .spec-row strong.text-cyan, :where(html.rd-colors) .plan-card .spec-row .text-cyan { color: var(--rd-acc-light) !important; } :where(html.rd-colors) .plan-card .spec-row strong.text-emerald, :where(html.rd-colors) .plan-card .spec-row .text-emerald { color: var(--rd-acc-light) !important; } :where(html.rd-colors) .spec-row.highlight-row { background-color: rgba(var(--rd-acc-rgb), 0.16); } :where(html.rd-colors) .plan-info-trigger { color: var(--rd-acc-light); } :where(html.rd-colors) .partner-glow-card { background-image: linear-gradient(135deg, rgba(var(--rd-acc-rgb), 0.12) 0%, rgba(var(--rd-navy-800-rgb), 0.95) 100%); border-color: rgba(var(--rd-acc-rgb), 0.35); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(var(--rd-acc-rgb), 0.15); } :where(html.rd-colors) .partner-badge { color: var(--rd-acc); background-color: rgba(var(--rd-acc-rgb), 0.12); border-color: rgba(var(--rd-acc-rgb), 0.3); } :where(html.rd-colors) .btn-partner-secondary { background-color: rgba(var(--rd-acc-rgb), 0.14); color: var(--rd-acc-light); border-color: rgba(var(--rd-acc-rgb), 0.55); box-shadow: 0 0 0 1px rgba(var(--rd-acc-rgb), 0.12), 0 8px 24px rgba(var(--rd-acc-rgb), 0.18); } :where(html.rd-colors) .btn-partner-secondary:hover { background-color: rgba(var(--rd-acc-rgb), 0.24); border-color: var(--rd-acc); box-shadow: 0 0 0 1px rgba(var(--rd-acc-rgb), 0.25), 0 12px 28px rgba(var(--rd-acc-rgb), 0.3); } :where(html.rd-colors) .btn-partner-secondary i { color: var(--rd-acc-light); } :where(html.rd-colors) .btn-advice-amber { background-color: rgba(var(--rd-acc-rgb), 0.14); color: var(--rd-acc-light); border-color: rgba(var(--rd-acc-rgb), 0.55); box-shadow: 0 0 0 1px rgba(var(--rd-acc-rgb), 0.12), 0 8px 24px rgba(var(--rd-acc-rgb), 0.2); } :where(html.rd-colors) .btn-advice-amber:hover { background-color: rgba(var(--rd-acc-rgb), 0.26); border-color: var(--rd-acc); box-shadow: 0 0 0 1px rgba(var(--rd-acc-rgb), 0.28), 0 12px 28px rgba(var(--rd-acc-rgb), 0.32); } :where(html.rd-colors) .btn-advice-amber i { color: var(--rd-acc); } :where(html.rd-colors) .step-card:hover { border-color: rgba(var(--rd-acc-rgb), 0.4); } :where(html.rd-colors) .step-icon { background-color: rgba(var(--rd-acc-rgb), 0.12); border-color: rgba(var(--rd-acc-rgb), 0.3); } :where(html.rd-colors) .blog-card:hover { border-color: rgba(var(--rd-acc-rgb), 0.4); } :where(html.rd-colors) .blog-category { background-color: rgba(var(--rd-navy-900-rgb), 0.85); } :where(html.rd-colors) .faq-item.active { border-color: rgba(var(--rd-acc-rgb), 0.4); } :where(html.rd-colors) .faq-outro-card { background-image: linear-gradient(135deg, rgba(var(--rd-acc-rgb), 0.12) 0%, rgba(var(--rd-navy-800-rgb), 0.95) 100%); border-color: rgba(var(--rd-acc-rgb), 0.3); } :where(html.rd-colors) .cta-glass-card { background-image: linear-gradient(135deg, rgba(var(--rd-acc-rgb), 0.15) 0%, rgba(var(--rd-navy-800-rgb), 0.95) 100%); border-color: rgba(var(--rd-acc-rgb), 0.35); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 50px rgba(var(--rd-acc-rgb), 0.15); } :where(html.rd-colors) .footer { background-color: var(--rd-navy-950); } :where(html.rd-colors) .footer-bottom { background-color: #030912; } :where(html.rd-colors) .scroll-to-top { box-shadow: 0 4px 15px rgba(var(--rd-acc-rgb), 0.4); } :where(html.rd-colors) .form-card .form--control, :where(html.rd-colors) .form-card .form-control { background-color: rgba(var(--rd-navy-900-rgb), 0.7); } :where(html.rd-colors) .pillar-icon-box { background-color: rgba(var(--rd-acc-rgb), 0.1) !important; border-color: rgba(var(--rd-acc-rgb), 0.2); } :where(html.rd-colors) .partner-glow-card--simple .partner-badge { background-color: rgba(var(--rd-acc-rgb), 0.1); border-color: rgba(var(--rd-acc-rgb), 0.25); } :where(html.rd-colors) .calc-factor-icon { background-color: rgba(var(--rd-acc-rgb), 0.12); border-color: rgba(var(--rd-acc-rgb), 0.28); } :where(html.rd-colors) .calc-laptop-frame { border-color: rgba(var(--rd-acc-rgb), 0.25); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.45), 0 0 30px rgba(var(--rd-acc-rgb), 0.08); } :where(html.rd-colors) .calc-laptop-overlay { background-color: rgba(var(--rd-navy-800-rgb), 0.92); border-color: rgba(var(--rd-acc-rgb), 0.25); } :where(html.rd-colors) .calc-model-card { border-color: rgba(var(--rd-acc-rgb), 0.22); } :where(html.rd-colors) .calc-model-icon-blue { background-color: rgba(var(--rd-acc-rgb), 0.15); border-color: rgba(var(--rd-acc-rgb), 0.35); } :where(html.rd-colors) .calc-process-track::before { border-top-color: rgba(var(--rd-acc-rgb), 0.35); } :where(html.rd-colors) .calc-process-num { background-color: rgba(var(--rd-acc-rgb), 0.12); border-color: rgba(var(--rd-acc-rgb), 0.35); } :where(html.rd-colors) .calc-process-icon { background-color: rgba(var(--rd-acc-rgb), 0.1); border-color: rgba(var(--rd-acc-rgb), 0.25); } :where(html.rd-colors) .calc-breakdown-icon { background-color: rgba(var(--rd-acc-rgb), 0.12); border-color: rgba(var(--rd-acc-rgb), 0.25); } :where(html.rd-colors) .calc-example-card { border-color: rgba(var(--rd-acc-rgb), 0.22); } :where(html.rd-colors) .calc-savings-flow { border-color: rgba(var(--rd-acc-rgb), 0.22); } :where(html.rd-colors) .calc-ui { --bg: var(--rd-navy-900); --panel: var(--rd-navy-800); --card: rgba(var(--rd-navy-700-rgb), 0.75); --border-glow: rgba(var(--rd-acc-rgb), 0.3); --primary: var(--rd-acc); --primary-dark: var(--rd-acc-deep); --primary-glow: rgba(var(--rd-acc-rgb), 0.4); --primary-soft: rgba(var(--rd-acc-rgb), 0.12); --primary-gradient: linear-gradient(135deg, var(--rd-acc) 0%, var(--rd-acc-deep) 100%); } :where(html.rd-colors) .calc-ui-shell { background-image: linear-gradient(135deg, rgba(var(--rd-acc-rgb), 0.12) 0%, rgba(var(--rd-navy-800-rgb), 0.95) 100%); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.7), 0 0 40px rgba(var(--rd-acc-rgb), 0.12); } :where(html.rd-colors) .calc-ui-shell-head { border-bottom-color: rgba(var(--rd-acc-rgb), 0.2); } :where(html.rd-colors) .calc-ui-badge { color: var(--rd-acc); background-color: rgba(var(--rd-acc-rgb), 0.12); border-color: rgba(var(--rd-acc-rgb), 0.3); } :where(html.rd-colors) .calc-ui-toggle button { background-color: rgba(var(--rd-acc-rgb), 0.1); border-color: rgba(var(--rd-acc-rgb), 0.35); } :where(html.rd-colors) .calc-ui-toggle button.active { box-shadow: 0 4px 12px rgba(var(--rd-acc-rgb), 0.3); } :where(html.rd-colors) .calc-ui-select-wrap .custom-select:hover, :where(html.rd-colors) .calc-ui-select-wrap .custom-select:focus { border-color: rgba(var(--rd-acc-rgb), 0.55); background-color: rgba(var(--rd-acc-rgb), 0.08); } :where(html.rd-colors) .calc-ui-select-caret { color: var(--rd-acc-light); } :where(html.rd-colors) .calc-ui-callout { border-color: rgba(var(--rd-acc-rgb), 0.28); } :where(html.rd-colors) .calc-ui-gain { color: var(--rd-acc-light); background-color: rgba(var(--rd-acc-rgb), 0.15); border-color: rgba(var(--rd-acc-rgb), 0.35); } :where(html.rd-colors) .calc-ui-cta { box-shadow: 0 4px 18px rgba(var(--rd-acc-rgb), 0.35); } :where(html.rd-colors) .calc-ui-overlay { background-color: rgba(var(--rd-navy-800-rgb), 0.92); } :where(html.rd-colors) .calc-ui-model-icon { background-color: rgba(var(--rd-acc-rgb), 0.12); border-color: rgba(var(--rd-acc-rgb), 0.3); } :where(html.rd-colors) .calc-ui-model-btn { box-shadow: 0 4px 14px rgba(var(--rd-acc-rgb), 0.3); } :where(html.rd-colors) .calc-ui-steps::before { border-top-color: rgba(var(--rd-acc-rgb), 0.35); } :where(html.rd-colors) .calc-ui-step-num { background-color: rgba(var(--rd-acc-rgb), 0.12); border-color: rgba(var(--rd-acc-rgb), 0.35); } :where(html.rd-colors) .earn-ui { --bg: var(--rd-navy-900); --panel: var(--rd-navy-800); --card: rgba(var(--rd-navy-700-rgb), 0.75); --border-glow: rgba(var(--rd-acc-rgb), 0.3); --primary: var(--rd-acc); --primary-dark: var(--rd-acc-deep); --primary-gradient: linear-gradient(135deg, var(--rd-acc) 0%, var(--rd-acc-deep) 100%); } :where(html.rd-colors) .earn-ui-pill { background-color: rgba(var(--rd-acc-rgb), 0.1); border-color: rgba(var(--rd-acc-rgb), 0.25); } :where(html.rd-colors) .earn-ui-btn { box-shadow: 0 4px 18px rgba(var(--rd-acc-rgb), 0.35); } :where(html.rd-colors) .earn-ui-shell { box-shadow: 0 10px 30px -10px rgba(0, 0, 0, 0.5), 0 0 36px rgba(var(--rd-acc-rgb), 0.08); } :where(html.rd-colors) .earn-ui-intro { background-image: linear-gradient(135deg, rgba(var(--rd-acc-rgb), 0.1) 0%, rgba(var(--rd-navy-800-rgb), 0.95) 50%); box-shadow: 0 0 40px rgba(var(--rd-acc-rgb), 0.1); } :where(html.rd-colors) .earn-ui-intro-icon { background-color: rgba(var(--rd-acc-rgb), 0.12); border-color: rgba(var(--rd-acc-rgb), 0.35); } :where(html.rd-colors) .earn-ui-highlight { background-color: rgba(var(--rd-acc-rgb), 0.12); border-color: rgba(var(--rd-acc-rgb), 0.35); } :where(html.rd-colors) .earn-ui-mini-card-accent { background-color: rgba(var(--rd-acc-rgb), 0.06); } :where(html.rd-colors) .earn-ui-card-icon { background-color: rgba(var(--rd-acc-rgb), 0.12); border-color: rgba(var(--rd-acc-rgb), 0.3); } :where(html.rd-colors) .earn-ui-check { background-color: rgba(var(--rd-acc-rgb), 0.12); border-color: rgba(var(--rd-acc-rgb), 0.35); } :where(html.rd-colors) .earn-ui-chart-caption { background-color: rgba(var(--rd-acc-rgb), 0.08); border-color: rgba(var(--rd-acc-rgb), 0.25); } :where(html.rd-colors) .earn-ui-cta-card { background-image: linear-gradient(160deg, rgba(var(--rd-acc-rgb), 0.1) 0%, rgba(var(--rd-navy-800-rgb), 0.95) 55%); box-shadow: 0 0 40px rgba(var(--rd-acc-rgb), 0.1); } :where(html.rd-colors) .earn-ui-step-num { background-color: rgba(var(--rd-acc-rgb), 0.12); border-color: rgba(var(--rd-acc-rgb), 0.4); } :where(html.rd-colors) .partner-ui { --bg: var(--rd-navy-900); --panel: var(--rd-navy-800); --card: rgba(var(--rd-navy-700-rgb), 0.75); --border-glow: rgba(var(--rd-acc-rgb), 0.3); --primary: var(--rd-acc); --primary-dark: var(--rd-acc-deep); --primary-gradient: linear-gradient(135deg, var(--rd-acc) 0%, var(--rd-acc-deep) 100%); } :where(html.rd-colors) .partner-ui-btn-primary { box-shadow: 0 4px 18px rgba(var(--rd-acc-rgb), 0.35); } :where(html.rd-colors) .partner-ui-btn-ghost:hover { border-color: rgba(var(--rd-acc-rgb), 0.55); } :where(html.rd-colors) .partner-ui-pill { background-color: rgba(var(--rd-acc-rgb), 0.1); border-color: rgba(var(--rd-acc-rgb), 0.25); } :where(html.rd-colors) .partner-ui-intro-card { background-image: linear-gradient(160deg, rgba(var(--rd-acc-rgb), 0.1) 0%, rgba(var(--rd-navy-800-rgb), 0.95) 45%); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(var(--rd-acc-rgb), 0.1); } :where(html.rd-colors) .partner-ui-stars { color: var(--rd-acc); } :where(html.rd-colors) .partner-ui-avatar { background-color: rgba(var(--rd-acc-rgb), 0.12); border-color: rgba(var(--rd-acc-rgb), 0.3); } :where(html.rd-colors) .partner-ui-advantages-shell { box-shadow: 0 0 40px rgba(var(--rd-acc-rgb), 0.08); } :where(html.rd-colors) .partner-ui-adv-icon { background-color: rgba(var(--rd-acc-rgb), 0.12); border-color: rgba(var(--rd-acc-rgb), 0.3); } :where(html.rd-colors) .partner-ui-steps::before { border-top-color: rgba(var(--rd-acc-rgb), 0.35); } :where(html.rd-colors) .partner-ui-step-num { background-color: rgba(var(--rd-acc-rgb), 0.12); border-color: rgba(var(--rd-acc-rgb), 0.45); box-shadow: 0 0 20px rgba(var(--rd-acc-rgb), 0.2); } :where(html.rd-colors) .saving-ui { --bg: var(--rd-navy-900); --panel: var(--rd-navy-800); --card: rgba(var(--rd-navy-700-rgb), 0.75); --border-glow: rgba(var(--rd-acc-rgb), 0.3); --primary: var(--rd-acc); --primary-dark: var(--rd-acc-deep); --primary-gradient: linear-gradient(135deg, var(--rd-acc) 0%, var(--rd-acc-deep) 100%); } :where(html.rd-colors) .saving-ui-pill { background-color: rgba(var(--rd-acc-rgb), 0.1); border-color: rgba(var(--rd-acc-rgb), 0.25); } :where(html.rd-colors) .saving-ui-btn-primary { box-shadow: 0 4px 18px rgba(var(--rd-acc-rgb), 0.35); } :where(html.rd-colors) .saving-ui-visual-card { background-image: linear-gradient(160deg, rgba(var(--rd-acc-rgb), 0.12) 0%, rgba(var(--rd-navy-800-rgb), 0.95) 50%); box-shadow: 0 25px 60px rgba(0, 0, 0, 0.55), 0 0 40px rgba(var(--rd-acc-rgb), 0.12); } :where(html.rd-colors) .saving-ui-grow-pill { background-color: rgba(var(--rd-acc-rgb), 0.12); border-color: rgba(var(--rd-acc-rgb), 0.35); } :where(html.rd-colors) .saving-ui-quote-card { background-image: linear-gradient(160deg, rgba(var(--rd-acc-rgb), 0.1) 0%, rgba(var(--rd-navy-800-rgb), 0.95) 55%); box-shadow: 0 0 40px rgba(var(--rd-acc-rgb), 0.1); } :where(html.rd-colors) .saving-ui-steps::before { border-top-color: rgba(var(--rd-acc-rgb), 0.35); } :where(html.rd-colors) .saving-ui-step-num { background-color: rgba(var(--rd-acc-rgb), 0.12); border-color: rgba(var(--rd-acc-rgb), 0.4); } :where(html.rd-colors) .saving-ui-step-icon { background-color: rgba(var(--rd-acc-rgb), 0.12); border-color: rgba(var(--rd-acc-rgb), 0.3); } :where(html.rd-colors) .saving-ui-card-icon { background-color: rgba(var(--rd-acc-rgb), 0.12); border-color: rgba(var(--rd-acc-rgb), 0.3); } :where(html.rd-colors) .saving-ui-yield { box-shadow: 0 0 40px rgba(var(--rd-acc-rgb), 0.08); } :where(html.rd-colors) .saving-ui-yield-icon { background-color: rgba(var(--rd-acc-rgb), 0.12); border-color: rgba(var(--rd-acc-rgb), 0.3); } :where(html.rd-colors) .saving-ui-audience-icon { background-color: rgba(var(--rd-acc-rgb), 0.12); border-color: rgba(var(--rd-acc-rgb), 0.3); } :where(html.rd-colors) .saving-ui-final-card { background-image: linear-gradient(135deg, rgba(var(--rd-acc-rgb), 0.1) 0%, rgba(var(--rd-navy-800-rgb), 0.95) 50%); box-shadow: 0 0 40px rgba(var(--rd-acc-rgb), 0.1); } :where(html.rd-colors) .saving-ui-final-icon { background-color: rgba(var(--rd-acc-rgb), 0.12); border-color: rgba(var(--rd-acc-rgb), 0.3); } /* ---------- Colour fixes the generator can't infer ------------------------ */ /* Text on accent-filled buttons and badges stays readable for every accent. */ :where(html.rd-colors) :is(.btn-primary, .btn-primary:hover, .switch-btn.active, .pricing-tab.active, .btn-pillar-cyan, .btn-pillar-cyan:hover, .btn-pillar-emerald, .btn-pillar-emerald:hover, .ribbon-popular, .popular-ribbon, .scroll-to-top, .logo-icon-box, .footer-social-links a:hover) { color: var(--rd-acc-on); } /* Market data keeps its meaning: gains green, losses red, live status green. */ :where(html.rd-colors) .ticker-item .change.up { color: #10B981; } :where(html.rd-colors) .pulse-dot { background-color: #10B981; box-shadow: 0 0 10px #10B981; } :where(html.rd-colors) .status-indicator { color: #10B981; background: rgba(16, 185, 129, 0.1); } :where(html.rd-colors) .status-dot { background: #10B981; } :where(html.rd-colors) .live-pill { color: #10B981; } :where(html.rd-colors) .res-gain-badge { color: #6EE7B7; background: rgba(16, 185, 129, 0.15); border-color: rgba(16, 185, 129, 0.35); } /* Growth graphics drawn in the page markup (partner-earnings, saving-and-investing): bars step up in strength. */ :where(html.rd-colors) :is(.earn-ui-chart, .saving-ui-arrow-art) rect { fill: rgba(var(--rd-acc-rgb), .15); stroke: rgba(var(--rd-acc-rgb), .35); } :where(html.rd-colors) :is(.earn-ui-chart, .saving-ui-arrow-art) rect:nth-of-type(2) { fill: rgba(var(--rd-acc-rgb), .2); stroke: rgba(var(--rd-acc-rgb), .4); } :where(html.rd-colors) :is(.earn-ui-chart, .saving-ui-arrow-art) rect:nth-of-type(3) { fill: rgba(var(--rd-acc-rgb), .25); stroke: rgba(var(--rd-acc-rgb), .45); } :where(html.rd-colors) :is(.earn-ui-chart, .saving-ui-arrow-art) rect:nth-of-type(4) { fill: rgba(var(--rd-acc-rgb), .3); stroke: rgba(var(--rd-acc-rgb), .5); } :where(html.rd-colors) :is(.earn-ui-chart, .saving-ui-arrow-art) rect:nth-of-type(5) { fill: rgba(var(--rd-acc-rgb), .35); stroke: rgba(var(--rd-acc-rgb), .55); } :where(html.rd-colors) :is(.earn-ui-chart, .saving-ui-arrow-art) path[fill] { fill: var(--rd-acc); } :where(html.rd-colors) :is(.earn-ui-chart, .saving-ui-arrow-art) stop { stop-color: var(--rd-acc); } :where(html.rd-colors) :is(.earn-ui-chart, .saving-ui-arrow-art) stop[offset="1"] { stop-color: var(--rd-acc-deep); } /* Colours written inline in the page markup (sparkline chart). */ :where(html.rd-colors) .sparkline-svg path[stroke] { stroke: var(--rd-acc); } :where(html.rd-colors) .sparkline-svg circle { fill: var(--rd-acc); } :where(html.rd-colors) .sparkline-svg stop { stop-color: var(--rd-acc); }