/* ========================================================================== INVESTOOR — redesign for all public pages (navy + accent colour) Loaded after investor-new.css and investoor-colors.css on every page. Everything is scoped to , so removing that class shows the current design untouched. 1. Colour tokens (navy, accent) come from investoor-colors.css; layout tokens are here. 2. The theme's own variables (--primary, --text-primary, --bg-card …) are remapped per section, so most existing rules recolour themselves. 3. Components (type, buttons, badges, cards, header, footer, forms) are styled once and look the same on every page. A section that repeats on several pages gets the same photo and layout wherever it appears. 4. Homepage only (data-rd-home): photo hero and the stats card lifted over it. Inner pages start with the page title band (.page-hero). ========================================================================== */ html.rd { /* Navy and accent tokens come from investoor-colors.css (colors-tokens.css). */ /* Secondary colours follow the chosen accent (acc-emerald | acc-azure | acc-magenta | acc-gold). */ --rd-blue: var(--rd-acc); --rd-blue-grad: var(--rd-acc-grad); --rd-sky: var(--rd-acc-light); --rd-green: #34D399; --rd-page: #FFFFFF; --rd-muted: #F4F7FB; --rd-tint: linear-gradient(180deg, #E6F0FA 0%, #F6F9FD 55%, #FFFFFF 100%); --rd-card: #FFFFFF; --rd-line: #E3E9F1; --rd-line2: #CBD5E1; --rd-ink: #0B1B30; --rd-ink2: #43536B; --rd-ink3: #616F85; /* muted text on white: 5.1:1 */ --rd-accent: var(--rd-acc-ink); /* accent text on white and light tints: 4.7:1 or better */ --rd-soft: var(--rd-acc-soft); --rd-d-line: rgba(255,255,255,.10); --rd-d-line2: rgba(255,255,255,.34); --rd-d-ink: #FFFFFF; --rd-d-ink2: #C3CEDD; --rd-d-ink3: #8FA0B8; --rd-font: 'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; --rd-script: 'Great Vibes', 'Segoe Script', cursive; --rd-r-sm: 10px; --rd-r-md: 14px; --rd-r-lg: 18px; --rd-shadow: 0 1px 2px rgba(11,27,48,.05), 0 18px 40px -26px rgba(11,27,48,.35); --rd-shadow-lg: 0 30px 70px -30px rgba(6,17,31,.55); /* Theme variables → dark chrome by default (top bar, header, drawer, bands) */ --font-heading: var(--rd-font); --font-main: var(--rd-font); --radius-sm: var(--rd-r-sm); --radius-md: var(--rd-r-md); --radius-lg: var(--rd-r-lg); --primary: var(--rd-acc); --primary-gradient: var(--rd-acc-grad); --primary-glow: transparent; --accent-green: var(--rd-acc); --green-gradient: var(--rd-acc-grad); --accent-green-glow: transparent; --accent-amber: var(--rd-acc); --accent-purple: var(--rd-acc); --accent-rose: #F87171; --text-primary: var(--rd-d-ink); --text-secondary: var(--rd-d-ink2); --text-muted: var(--rd-d-ink3); --bg-dark: var(--rd-page); --bg-surface: var(--rd-navy-800); --bg-card: var(--rd-navy-700); --bg-card-hover: var(--rd-navy-600); --border-glass: var(--rd-d-line); --border-glow: var(--rd-d-line2); --shadow-card: var(--rd-shadow-lg); --rd-eyebrow: var(--rd-acc); --rd-ctl-ctx: var(--rd-ctl); /* control colour that works on the ground it sits on */ background: var(--rd-page); } html.rd body { background: var(--rd-page); } /* Inner pages: sections without their own ground sit on navy, like the homepage's dark bands. */ html.rd:not([data-rd-home]) { --bg-dark: var(--rd-navy-900); background: var(--rd-navy-900); } html.rd:not([data-rd-home]) body { background: var(--rd-navy-900); } /* Light context */ html.rd :is(.stats-banner-section, .services-section, .pricing-section, .testimonials-section, .blog-section, .faq-section, .faq-outro-section, .modal-card, .dropdown-menu) { --rd-eyebrow: var(--rd-accent); --rd-ctl-ctx: var(--rd-ctl-ink); --primary: var(--rd-accent); --primary-gradient: var(--rd-acc-grad); --accent-green: var(--rd-acc-ink); --green-gradient: var(--rd-acc-grad); --accent-amber: var(--rd-acc-ink); --accent-purple: var(--rd-accent); --text-primary: var(--rd-ink); --text-secondary: var(--rd-ink2); --text-muted: var(--rd-ink3); --bg-card: var(--rd-card); --bg-card-hover: var(--rd-card); --bg-surface: var(--rd-card); --border-glass: var(--rd-line); --border-glow: var(--rd-line2); } /* ---------- Global ------------------------------------------------------- */ .rd-only { display: none; } /* Product-card features with a one-line explanation (client content). Base layout for both views. */ .rd-feature { display: grid; gap: 2px; } .rd-feature small { display: block; font-size: .82rem; line-height: 1.45; opacity: .8; } html.rd .rd-feature strong { font-weight: 700; color: var(--rd-d-ink); } html.rd .rd-feature small { color: var(--rd-d-ink2); opacity: 1; } html.rd .rd-only { display: block; } html.rd .rd-hide { display: none !important; } html.rd .ambient-glow { display: none; } html.rd h1, html.rd h2, html.rd h3, html.rd h4, html.rd h5 { font-family: var(--rd-font); } html.rd :is(.section-title, .hero-title, .calc-title, .partner-title, .cta-title) { font-weight: 800; letter-spacing: -0.025em; text-wrap: balance; } html.rd :is(.pillar-title, .plan-title, .step-title, .service-title, .blog-title) { font-weight: 700; letter-spacing: -0.01em; } html.rd .rd-accent { color: var(--rd-acc); } /* Buttons */ html.rd .btn { border-radius: var(--rd-r-sm); font-family: var(--rd-font); font-weight: 700; } html.rd .glow-btn::after { display: none; } html.rd .btn-primary { background: var(--rd-ctl-grad); color: var(--rd-ctl-on); border: 1px solid rgba(255,255,255,.25); box-shadow: 0 10px 24px -14px rgba(var(--rd-ctl-rgb), .7); } html.rd .btn-primary:hover { background: var(--rd-ctl-grad); color: var(--rd-ctl-on); filter: brightness(1.05); box-shadow: 0 14px 28px -14px rgba(var(--rd-ctl-rgb), 1); transform: translateY(-1px); } html.rd .btn-secondary { background: transparent; color: var(--rd-ctl); border: 1px solid rgba(var(--rd-ctl-rgb), .55); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } html.rd .btn-secondary:hover { background: rgba(var(--rd-ctl-rgb), .14); color: #fff; border-color: var(--rd-ctl); box-shadow: none; } html.rd .btn-secondary i { color: inherit; } html.rd .btn-outline { background: transparent; color: var(--rd-ctl); border: 1px solid rgba(var(--rd-ctl-rgb), .55); -webkit-backdrop-filter: none; backdrop-filter: none; } html.rd .btn-outline:hover { background: rgba(var(--rd-ctl-rgb), .14); color: #fff; border-color: var(--rd-ctl); } /* Filled buttons on a white ground: a defined edge, so the button reads as one in every accent. */ html.rd :is(.stats-banner-section, .services-section, .pricing-section, .testimonials-section, .blog-section, .faq-section, .faq-outro-section, .modal-card) :is(.btn-primary, .btn-pillar, .btn-advice-amber) { border: 1px solid rgba(var(--rd-ctl-ink-rgb), .5); } /* On a phone the pale tint version of these was barely visible, so they are filled like every other button (client, 2026-09-24). */ html.rd :is(.faq-outro-section, .modal-card) :is(.btn-outline, .btn-secondary) { background: var(--rd-ctl-grad); color: var(--rd-ctl-on); border: 1px solid rgba(var(--rd-ctl-ink-rgb), .5); } html.rd :is(.faq-outro-section, .modal-card) :is(.btn-outline, .btn-secondary):hover { background: var(--rd-ctl-grad); filter: brightness(1.05); color: var(--rd-ctl-on); } /* Section headers: small caps line, no pill */ html.rd .section-header { margin-bottom: 52px; } html.rd .section-subtitle { background: none; border: 0; padding: 0; color: var(--rd-eyebrow); font-size: .74rem; letter-spacing: .22em; font-weight: 700; } html.rd .section-subtitle i { display: none; } html.rd .section-title { color: var(--text-primary); font-size: clamp(2rem, 3.2vw, 2.7rem); line-height: 1.15; margin-bottom: 12px; } html.rd .section-desc { color: var(--text-secondary); font-size: 1.05rem; } /* ---------- Inner pages: title band ------------------------------------- */ html.rd .page-hero { background: linear-gradient(180deg, var(--rd-navy-850) 0%, var(--rd-navy-900) 100%); border-bottom-color: var(--rd-d-line); } html.rd .breadcrumb { color: var(--rd-d-ink3); font-size: .76rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 22px; } html.rd .breadcrumb a { color: var(--rd-d-ink2); } html.rd .breadcrumb a:hover { color: var(--rd-acc); } html.rd .page-hero h1 { color: #fff; font-weight: 800; letter-spacing: -0.025em; line-height: 1.08; text-wrap: balance; } html.rd .page-hero p.lead { color: var(--rd-d-ink2); font-size: 1.12rem; line-height: 1.7; } html.rd .page-hero .gradient-text, html.rd .page-hero [class*="gradient-text"] { background: none; -webkit-text-fill-color: var(--rd-acc); color: var(--rd-acc); } /* Pages the site rebuilt with their own stylesheets (calculator, saving-and-investing, partner-earnings, partner) keep their sections, and take the site's type and title band. */ html.rd :is(.calc-ui, .saving-ui, .earn-ui, .partner-ui) { font-family: var(--rd-font); } html.rd :is(.calc-ui-hero, .saving-ui-hero, .earn-ui-hero, .partner-ui-hero) { background: linear-gradient(180deg, var(--rd-navy-850) 0%, var(--rd-navy-900) 100%); border-bottom: 1px solid var(--rd-d-line); padding: 170px 0 72px; } html.rd :is(.calc-ui-crumb, .saving-ui-crumb, .earn-ui-crumb, .partner-ui-crumb) { color: var(--rd-d-ink3); font-size: .76rem; font-weight: 700; letter-spacing: .2em; text-transform: uppercase; margin-bottom: 22px; } html.rd :is(.calc-ui-crumb, .saving-ui-crumb, .earn-ui-crumb, .partner-ui-crumb) a { color: var(--rd-d-ink2); } html.rd :is(.calc-ui-hero, .saving-ui-hero, .earn-ui-hero, .partner-ui-hero) h1 { color: #fff; font-size: clamp(2rem, 4.2vw, 3.35rem); font-weight: 800; letter-spacing: -0.025em; line-height: 1.08; margin-bottom: 16px; text-wrap: balance; } html.rd :is(.calc-ui-hero, .saving-ui-hero, .earn-ui-hero, .partner-ui-hero) :is(p, .lead) { color: var(--rd-d-ink2); font-size: 1.12rem; line-height: 1.7; } /* Their calculator toggle is a nowrap row and runs off the screen on phones. */ @media (max-width: 640px) { html.rd .calc-ui-toggle { flex-wrap: wrap; width: 100%; } html.rd .calc-ui-toggle button { flex: 1 1 auto; justify-content: center; } } /* ---------- Inner pages: content, cards and forms ------------------------ */ html.rd :is(.form-card, .info-card) { background: var(--rd-navy-700); border-color: var(--rd-d-line); border-radius: var(--rd-r-lg); box-shadow: var(--rd-shadow-lg); -webkit-backdrop-filter: none; backdrop-filter: none; } html.rd .form-row label { color: var(--rd-d-ink2); font-weight: 600; } html.rd .form-row :is(input, select, textarea) { background: rgba(6,17,31,.55); border: 1px solid var(--rd-d-line); border-radius: var(--rd-r-sm); color: #fff; font-family: var(--rd-font); } html.rd .form-row :is(input, select, textarea)::placeholder { color: var(--rd-d-ink3); } html.rd .form-row :is(input, select, textarea):focus { outline: none; border-color: rgba(var(--rd-acc-rgb), .6); box-shadow: 0 0 0 3px rgba(var(--rd-acc-rgb), .15); } html.rd :is(.legal-wrap, .article-wrap) :is(p, li) { color: var(--rd-d-ink2); } html.rd :is(.legal-wrap, .article-wrap) :is(h2, h3) { color: #fff; } /* Form messages keep their meaning whatever the accent: success green, errors red. */ html.rd :is(.form-success, .form-card .text-success) { color: var(--rd-green); } html.rd .form-card :is(.text--danger, .text-danger) { color: #F87171; } html.rd .form-card .hover-input-popup .input-popup { background: var(--rd-navy-800); border-color: var(--rd-d-line); border-radius: var(--rd-r-sm); box-shadow: var(--rd-shadow-lg); color: #fff; } html.rd .form-card .input-popup p.error { color: var(--rd-d-ink3); } html.rd .form-card .input-popup p.error::before { color: #F87171; } html.rd .form-card .input-popup p.success::before { color: var(--rd-green); } /* Notifications (iziToast): validation messages and notices on login and registration. The site's script sets white colours inline, so these rules need !important. The status title ("Success", "Error") is generated in English from a code; it stays for screen readers only, and the icon, colour bar and German message carry the notice. */ html.rd .iziToast { background: var(--rd-navy-800) !important; border: 1px solid var(--rd-d-line); border-radius: var(--rd-r-md); box-shadow: var(--rd-shadow-lg); font-family: var(--rd-font); padding: 16px 48px 16px 0; } html.rd .iziToast::after { display: none; } html.rd .iziToast > .iziToast-body { gap: 14px; padding-left: 16px !important; } html.rd .iziToast .iziToast-icon { width: 38px !important; height: 38px !important; border-radius: 50%; padding: 0; font-size: 16px; } html.rd .iziToast.iziToast-color-green .iziToast-icon { background: rgba(52,211,153,.14); } html.rd .iziToast.iziToast-color-red .iziToast-icon { background: rgba(248,113,113,.14); } html.rd .iziToast.iziToast-color-orange .iziToast-icon { background: rgba(251,191,36,.14); } html.rd .iziToast.iziToast-color-blue .iziToast-icon { background: rgba(var(--rd-acc-rgb), .14); } html.rd .iziToast .iziToast-title { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } html.rd .iziToast .iziToast-message { color: var(--rd-d-ink) !important; font-size: .92rem !important; line-height: 1.45; font-weight: 500; } html.rd .iziToast > .iziToast-close { font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: .85rem; color: var(--rd-d-ink2); opacity: .8; width: 44px; } html.rd .iziToast > .iziToast-close:hover { opacity: 1; color: #fff; } html.rd .iziToast > .iziToast-progressbar > div { height: 3px; } /* Script quotes over photos */ html.rd .rd-quote { position: absolute; z-index: 3; color: #fff; text-align: right; font-family: var(--rd-script); font-size: clamp(1.8rem, 2.6vw, 2.5rem); line-height: 1.15; text-shadow: 0 2px 18px rgba(0,0,0,.45); pointer-events: none; } html.rd .rd-quote span { display: block; margin-top: 10px; font-family: var(--rd-font); font-size: .78rem; letter-spacing: .08em; color: var(--rd-d-ink2); text-shadow: none; } html.rd .rd-quote::after { content: ""; display: block; width: 72px; height: 2px; margin: 12px 0 0 auto; border-radius: 2px; background: var(--rd-acc); } /* ---------- Top bar & header -------------------------------------------- */ html.rd .top-bar { background: var(--rd-navy-950); border-bottom-color: var(--rd-d-line); } html.rd .ticker-label { color: var(--rd-d-ink); } html.rd .pulse-dot { background: var(--rd-green); box-shadow: none; } html.rd .ticker-item .symbol { color: var(--rd-d-ink3); } html.rd .ticker-item .val { color: var(--rd-d-ink); } html.rd .ticker-item .val.highlight { color: var(--rd-acc); } html.rd .ticker-item .change.up { color: var(--rd-green); } html.rd .ticker-item .change.down { color: #F87171; } html.rd .top-bar-right { border-left-color: var(--rd-d-line); } html.rd .support-text { color: var(--rd-d-ink2); } html.rd .support-text i { color: var(--rd-acc); } html.rd .header { background: rgba(10,26,48,.94); border-bottom-color: var(--rd-d-line); } html.rd .header.is-scrolled { background: var(--rd-navy-800); box-shadow: 0 12px 30px -18px rgba(0,0,0,.6); } html.rd .nav-link { color: var(--rd-d-ink2); font-weight: 600; } html.rd .nav-link:hover, html.rd .nav-link.active, html.rd .nav-link[aria-current="page"] { color: #fff; } html.rd .nav-link::after { background: var(--rd-acc); } /* The current page keeps its underline (the theme styles .active, but the server never sets it). */ html.rd .nav-link[aria-current="page"]::after { width: 100%; } html.rd .mobile-nav-link[aria-current="page"] { color: var(--rd-acc); } html.rd .dropdown-trigger { background: transparent; border-color: var(--rd-d-line); color: #fff; } html.rd .dropdown-trigger:hover { background: rgba(255,255,255,.06); } html.rd .dropdown-menu { background: var(--rd-card); border-color: var(--rd-line); box-shadow: var(--rd-shadow-lg); } html.rd .dropdown-menu li a { color: var(--rd-ink2); } html.rd .dropdown-menu li a:hover, html.rd .dropdown-menu li.active a { background: var(--rd-muted); color: var(--rd-ink); } html.rd .mobile-toggle span { background: #fff; } html.rd .mobile-drawer { background: var(--rd-navy-800); border-left-color: var(--rd-d-line); } html.rd .drawer-header { border-bottom-color: var(--rd-d-line); } html.rd .drawer-close { color: var(--rd-d-ink2); } html.rd .mobile-nav-link { color: var(--rd-d-ink2); } html.rd .mobile-nav-link:hover { color: var(--rd-acc); } /* ---------- Hero: photographic, copy on the left ------------------------- */ html.rd .hero-section { background: var(--rd-navy-900); padding: 104px 0 190px; min-height: 700px; isolation: isolate; } html.rd .rd-hero-bg { position: absolute; inset: 0 0 0 auto; width: min(64%, 1100px); z-index: -1; } html.rd .rd-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 72% 25%; } html.rd .rd-hero-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, var(--rd-navy-900) 0%, rgba(6,17,31,.86) 26%, rgba(6,17,31,.42) 58%, rgba(6,17,31,.06) 100%), linear-gradient(0deg, var(--rd-navy-900) 0%, rgba(6,17,31,0) 26%); } html.rd .hero-container { grid-template-columns: minmax(0, 780px); gap: 0; } html.rd .hero-visual { display: none; } html.rd .hero-eyebrow { color: var(--rd-d-ink2); letter-spacing: .2em; font-size: .76rem; font-weight: 700; margin-bottom: 22px; } html.rd .hero-title { font-size: clamp(2.3rem, 3.8vw, 3.4rem); line-height: 1.08; margin-bottom: 24px; color: #fff; } html.rd .hero-title .rd-accent { display: block; } /* The products line of the headline stays on one line; the dots never start or end a line. */ html.rd .hero-title .rd-products { white-space: nowrap; } html.rd .hero-description { color: var(--rd-d-ink2); font-size: 1.12rem; line-height: 1.7; max-width: 32em; margin-bottom: 36px; } html.rd .hero-cta-group { gap: 14px; margin-bottom: 44px; } html.rd .hero-cta-group .btn { padding: 15px 28px; } html.rd .hero-cta-group .btn-secondary { opacity: 1; font-weight: 700; } html.rd .hero-trust-list { grid-template-columns: repeat(4, max-content); max-width: none; gap: 0; } html.rd .trust-pill > span:last-child { max-width: 128px; } html.rd .trust-pill { color: var(--rd-d-ink2); opacity: 1; font-size: .82rem; font-weight: 600; line-height: 1.35; padding: 0 18px; border-left: 1px solid var(--rd-d-line); align-items: center; } html.rd .trust-pill:first-child { padding-left: 0; border-left: 0; } html.rd .trust-pill .text-cyan { width: 32px; height: 32px; flex: none; display: grid; place-items: center; border-radius: 50%; background: rgba(var(--rd-acc-rgb), .12); border: 1px solid rgba(var(--rd-acc-rgb), .35); font-size: .78rem; } html.rd .rd-hero-quote { right: max(24px, calc((100vw - 1280px) / 2 + 24px)); bottom: 150px; } /* ---------- Stats: white card lifted over the hero ----------------------- */ html.rd .stats-banner-section { background: var(--rd-tint); background-size: 100% 520px; background-repeat: no-repeat; padding: 0 0 12px; position: relative; z-index: 3; } html.rd .stats-glass-grid { margin-top: -100px; background: var(--rd-card); border: 1px solid var(--rd-line); border-radius: var(--rd-r-lg); box-shadow: var(--rd-shadow-lg); padding: 24px 28px; -webkit-backdrop-filter: none; backdrop-filter: none; } html.rd .stat-card:not(:last-child) { border-right-color: var(--rd-line); } html.rd .stat-icon-wrapper { width: 50px; height: 50px; border-radius: 50%; background: var(--rd-acc-soft); border: 1px solid rgba(var(--rd-acc-rgb), .35); color: var(--rd-acc-ink); font-size: 1.15rem; } html.rd .stat-icon-wrapper i { color: var(--rd-acc-ink) !important; } html.rd .stat-numbers .number { color: var(--rd-ink); font-size: 1.2rem; font-weight: 800; letter-spacing: -.01em; } html.rd .stat-numbers .label { color: var(--rd-ink3); font-size: .82rem; } /* ---------- Products: dark photo cards on a soft blue ground -------------- */ html.rd .pillars-section { background: linear-gradient(180deg, #F6F9FD 0%, #FFFFFF 100%); padding-top: 88px; } html.rd .pillars-section .section-subtitle { color: var(--rd-ink2); } html.rd .pillars-section .section-title { color: var(--rd-ink); } html.rd .pillars-section .section-desc { color: var(--rd-ink2); } html.rd .pillars-grid { gap: 24px; } html.rd .pillar-card { background: var(--rd-navy-700); border: 1px solid rgba(255,255,255,.06); border-radius: var(--rd-r-lg); box-shadow: var(--rd-shadow-lg); -webkit-backdrop-filter: none; backdrop-filter: none; } html.rd .pillar-card:has(.rd-pillar-photo) { overflow: hidden; padding: 0 26px 28px; } html.rd .pillar-card:hover { transform: translateY(-6px); border-color: rgba(var(--rd-acc-rgb), .35); box-shadow: 0 36px 70px -30px rgba(6,17,31,.7); } html.rd .pillar-card.featured { background: var(--rd-navy-700); border-color: rgba(var(--rd-acc-rgb), .4); box-shadow: var(--rd-shadow-lg); } html.rd .rd-pillar-photo { position: relative; height: 210px; margin: 0 -26px 4px; overflow: hidden; } html.rd .rd-pillar-photo img { width: 100%; height: 100%; object-fit: cover; transition: transform .8s ease; } html.rd .rd-pillar-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(12,33,56,0) 45%, var(--rd-navy-700) 100%); } html.rd .pillar-card:hover .rd-pillar-photo img { transform: scale(1.05); } html.rd .card-ribbon { top: 14px; right: 14px; z-index: 2; background: rgba(6,17,31,.55); color: #fff; border: 1px solid rgba(255,255,255,.18); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } html.rd .pillar-card:has(.rd-pillar-photo) .pillar-icon-box { display: none; } html.rd .pillar-icon-box { background: rgba(var(--rd-acc-rgb), .12); border: 1px solid rgba(var(--rd-acc-rgb), .35); border-radius: 50%; color: var(--rd-acc); box-shadow: none; } html.rd .pillar-title { color: #fff; font-size: 1.45rem; } html.rd .pillar-card:has(.rd-pillar-photo) .pillar-title { margin: 6px 0 6px; } html.rd .pillar-key-figure { color: var(--rd-acc); border-bottom-color: var(--rd-d-line); font-family: var(--rd-font); font-size: .9rem; font-weight: 700; } html.rd .pillar-desc { color: var(--rd-d-ink2); } html.rd .pillar-features li { color: var(--rd-d-ink); } html.rd .pillar-features li i { color: var(--rd-acc) !important; } html.rd .btn-pillar { background: var(--rd-ctl-grad); color: var(--rd-ctl-on); border: 0; box-shadow: none !important; border-radius: var(--rd-r-sm); } html.rd .btn-pillar:hover { color: var(--rd-ctl-on); filter: brightness(1.05); } /* ---------- Warum Investoor: glass cards over a landscape photo ----------- */ html.rd .services-section { position: relative; overflow: hidden; background: #EEF4FA; padding: 110px 0 120px; isolation: isolate; } html.rd .rd-why-bg { position: absolute; inset: 0; z-index: -1; } html.rd .rd-why-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 75% 50%; } html.rd .rd-why-bg::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(238,244,250,.97) 0%, rgba(238,244,250,.9) 38%, rgba(238,244,250,.35) 62%, rgba(238,244,250,0) 80%); } html.rd .services-section:has(.rd-why-bg) .section-header { text-align: left; margin-left: 0; max-width: 620px; } html.rd .services-section .section-title { color: var(--rd-ink); } html.rd .services-section:has(.rd-why-bg) .services-grid { max-width: 780px; grid-template-columns: repeat(3, 1fr); gap: 16px; } html.rd .service-box { background: var(--rd-navy-800); border: 1px solid rgba(var(--rd-acc-rgb), .32); border-radius: var(--rd-r-md); padding: 22px 20px; box-shadow: var(--rd-shadow-lg); -webkit-backdrop-filter: none; backdrop-filter: none; } html.rd .service-box:hover { background: var(--rd-navy-700); border-color: rgba(var(--rd-acc-rgb), .6); transform: translateY(-3px); } html.rd .service-box .service-title { color: #fff; } html.rd .service-box .service-desc { color: var(--rd-d-ink2); } html.rd .service-box .service-icon { color: var(--rd-acc); background: rgba(var(--rd-acc-rgb), .16); } html.rd .service-icon { width: 38px; height: 38px; border-radius: 10px; background: rgba(var(--rd-acc-rgb), .16); border: 1.5px solid currentColor; color: var(--rd-eyebrow); font-size: .95rem; margin-bottom: 14px; } html.rd .service-title { color: var(--rd-ink); font-size: 1rem; margin-bottom: 6px; } html.rd .service-desc { color: var(--rd-ink2); font-size: .85rem; } html.rd .rd-why-quote { right: max(24px, calc((100vw - 1280px) / 2 + 24px)); bottom: 56px; } /* ---------- So einfach geht's: step row on navy -------------------------- */ html.rd .how-it-works-section { background: linear-gradient(180deg, var(--rd-navy-850) 0%, var(--rd-navy-900) 100%); padding-bottom: 40px; } html.rd .how-it-works-section .section-subtitle { color: var(--rd-d-ink3); } html.rd .how-it-works-section .section-title { color: #fff; } html.rd .how-it-works-section .section-desc { color: var(--rd-d-ink2); } html.rd .steps-grid { gap: 40px; } html.rd .step-card { position: relative; display: grid; grid-template-columns: 64px 1fr; column-gap: 16px; align-content: start; background: transparent; border: 0; padding: 0; box-shadow: none; } html.rd .step-card:hover { transform: none; border: 0; } html.rd .step-icon { grid-column: 1; grid-row: 1 / span 3; width: 64px; height: 64px; margin: 0; border-radius: 50%; background: var(--rd-acc-grad); border: 0; color: var(--rd-acc-on); font-size: 1.35rem; box-shadow: 0 12px 26px -12px rgba(var(--rd-acc-rgb), .8); } html.rd .step-num-badge { position: static; grid-column: 2; grid-row: 1; font-family: var(--rd-font); font-size: .95rem; font-weight: 800; color: #fff; line-height: 1.2; } html.rd .step-title { grid-column: 2; grid-row: 2; color: #fff; font-size: 1.1rem; margin: 2px 0 4px; } html.rd .step-desc { grid-column: 2; grid-row: 3; color: var(--rd-d-ink2); font-size: .88rem; } html.rd .step-card:not(:last-child)::after { content: "\2192"; position: absolute; top: 18px; right: -30px; color: var(--rd-acc); font-size: 1.3rem; line-height: 1; } /* ---------- Calculator: navy glass panel with a photo column ------------ */ html.rd .calculator-section { background: var(--rd-navy-900); padding-top: 56px; } html.rd .calculator-glass-box { background: linear-gradient(135deg, rgba(26,54,88,.85) 0%, rgba(12,33,56,.95) 60%, rgba(10,26,48,.98) 100%); border: 1px solid rgba(255,255,255,.08); border-radius: var(--rd-r-lg); box-shadow: var(--rd-shadow-lg); padding: 44px; -webkit-backdrop-filter: none; backdrop-filter: none; } html.rd .calculator-glass-box .section-subtitle, html.rd .calculator-glass-box .section-subtitle i { color: var(--rd-acc); background: none; border: 0; } html.rd .calc-header-row { border-bottom: 0; padding-bottom: 0; margin-bottom: 28px; } html.rd .calc-title { color: #fff; font-size: clamp(1.6rem, 2.4vw, 2.1rem); } html.rd .calc-type-switch { background: rgba(6,17,31,.45); border-color: var(--rd-d-line); border-radius: var(--rd-r-md); } html.rd .switch-btn { background: rgba(255,255,255,.04); border: 1px solid rgba(var(--rd-ctl-rgb), .45); color: var(--rd-d-ink); border-radius: var(--rd-r-sm); } html.rd .switch-btn i { display: none; } html.rd .switch-btn:hover { background: rgba(var(--rd-ctl-rgb), .16); color: #fff; border-color: var(--rd-ctl); } html.rd .switch-btn.active { background: var(--rd-ctl-grad); color: var(--rd-ctl-on); border-color: transparent; box-shadow: none; } html.rd .calc-body-grid { grid-template-columns: 1.05fr .95fr minmax(0, .62fr); gap: 28px; align-items: stretch; } html.rd .control-label-row label { color: #fff; font-size: .92rem; } html.rd .input-display-box { background: rgba(6,17,31,.55); border: 1px solid var(--rd-d-line); } html.rd .input-display-box .currency { color: var(--rd-acc); } html.rd .input-display-box input { color: #fff; font-family: var(--rd-font); } html.rd .custom-range-slider { background: rgba(255,255,255,.14); height: 5px; } html.rd .custom-range-slider::-webkit-slider-thumb { background: var(--rd-acc); border: 4px solid #fff; box-shadow: 0 0 0 6px rgba(var(--rd-acc-rgb), .22); } html.rd .custom-range-slider::-moz-range-thumb { background: var(--rd-acc); border: 4px solid #fff; box-shadow: 0 0 0 6px rgba(var(--rd-acc-rgb), .22); } html.rd .range-marks { color: var(--rd-d-ink3); } /* The term dropdown reads as a control: accent tint, accent edge and a pointer. */ html.rd .custom-select { background: rgba(var(--rd-ctl-rgb), .10); border: 1px solid rgba(var(--rd-ctl-rgb), .5); color: #fff; font-weight: 600; cursor: pointer; box-shadow: none; } html.rd .custom-select:hover { background: rgba(var(--rd-ctl-rgb), .16); border-color: var(--rd-ctl); box-shadow: none; } html.rd .custom-select:focus-visible { background: rgba(var(--rd-ctl-rgb), .16); border-color: var(--rd-ctl); outline: none; box-shadow: 0 0 0 3px rgba(var(--rd-ctl-rgb), .2); } html.rd .custom-select option { background: var(--rd-navy-800); color: #fff; } html.rd .calc-select-caret { color: var(--rd-ctl); } html.rd .calc-callout { background: rgba(6,17,31,.35); border-color: var(--rd-d-line); } html.rd .callout-icon { color: var(--rd-acc); } html.rd .callout-title { color: #fff; } html.rd .callout-text { color: var(--rd-d-ink2); } html.rd .calc-result-card { background: rgba(6,17,31,.55); border: 1px solid var(--rd-d-line); box-shadow: none; padding: 30px 28px; } html.rd .res-card-header { color: var(--rd-d-ink3); } html.rd .live-pill { color: var(--rd-green); } html.rd .main-return-display { text-align: left; border-bottom-color: var(--rd-d-line); } html.rd .res-subtitle { color: var(--rd-d-ink2); } html.rd .res-amount { color: #fff; font-family: var(--rd-font); font-weight: 800; font-size: 2.6rem; letter-spacing: -.02em; } html.rd .res-gain-badge { background: transparent; border: 0; padding: 0; color: var(--rd-green); } html.rd .breakdown-item { padding-bottom: 12px; border-bottom: 1px solid var(--rd-d-line); } html.rd .breakdown-item:last-child { border-bottom: 0; padding-bottom: 0; } html.rd .b-label { color: var(--rd-d-ink2); } html.rd .b-value { color: #fff; } html.rd .calc-result-card :is(.text-emerald, .text-cyan, .text-amber) { color: var(--rd-acc) !important; } html.rd .calc-result-card .b-value.text-emerald { color: #fff !important; } html.rd .rd-calc-photo { position: relative; border-radius: var(--rd-r-md); overflow: hidden; min-height: 360px; } html.rd .rd-calc-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } html.rd .rd-calc-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,17,31,0) 40%, rgba(6,17,31,.85) 100%); } html.rd .rd-calc-photo p { position: absolute; left: 20px; right: 20px; bottom: 22px; z-index: 2; margin: 0; color: #fff; font-weight: 800; font-size: 1.05rem; line-height: 1.35; } html.rd .rd-calc-photo p::after { content: ""; display: block; width: 48px; height: 2px; margin-top: 14px; border-radius: 2px; background: var(--rd-acc); } /* ---------- Pricing ------------------------------------------------------ */ html.rd .pricing-section { background: var(--rd-page); } html.rd .pricing-section .section-desc { color: var(--rd-ink2); } html.rd .pricing-tabs { background: var(--rd-muted); border-color: var(--rd-line); } html.rd .pricing-tab { background: #fff; border: 1px solid rgba(var(--rd-acc-ink-rgb), .45); color: var(--rd-ink); } html.rd .pricing-tab:hover { background: var(--rd-ctl-soft); border-color: rgba(var(--rd-ctl-ink-rgb), .55); color: var(--rd-ink); } /* The selected filter takes the cards' navy, so the strip reads as part of the same set (client, 2026-09-25). Its edge stays neutral: the controls do not follow the accent. */ html.rd .pricing-tab.active { background: var(--rd-navy-800); color: #fff; border: 1px solid rgba(255,255,255,.22); box-shadow: var(--rd-shadow); } html.rd .pricing-tab.active i { color: var(--rd-ctl); opacity: 1; } html.rd .pricing-tab i { opacity: .7; } /* A white card on a near-white section left almost no edge, whatever the border was set to. The plan cards now use the product cards' navy treatment (client, 2026-09-25: make them like the other cards). */ html.rd .plan-card { background: var(--rd-navy-800); border: 1px solid rgba(var(--rd-acc-rgb), .32); box-shadow: var(--rd-shadow-lg); } html.rd .plan-card:hover { transform: translateY(-4px); border-color: rgba(var(--rd-acc-rgb), .6); box-shadow: var(--rd-shadow-lg); } html.rd .plan-card.popular-plan { background: var(--rd-navy-700); border: 2px solid var(--rd-acc); box-shadow: var(--rd-shadow-lg); } html.rd .plan-card :is(.plan-title, .price-val, .currency, .spec-row strong) { color: #fff !important; } html.rd .plan-card :is(.price-period, .spec-row span) { color: var(--rd-d-ink2) !important; } html.rd .plan-card .plan-specs { border-color: var(--rd-d-line); } html.rd .plan-card .spec-row { border-color: var(--rd-d-line); } html.rd .plan-card .spec-row.highlight-row { background: rgba(var(--rd-acc-rgb), .12); } html.rd .popular-ribbon { background: var(--rd-acc-grad); color: var(--rd-acc-on); } html.rd .plan-card .plan-badge { border-color: transparent; border-radius: 999px; } html.rd .plan-card .plan-badge { background: rgba(var(--rd-acc-rgb), .16); color: var(--rd-acc); } html.rd .plan-card :is(.spec-row span i, .plan-info-trigger, .plan-info-trigger i) { color: var(--rd-acc) !important; } html.rd .plan-card .plan-info-trigger { border-color: var(--rd-d-line); } html.rd .plan-title { color: var(--rd-ink); } html.rd .plan-price-box .currency { color: var(--rd-ink2); } html.rd .plan-price-box .price-val { color: var(--rd-ink); font-family: var(--rd-font); font-weight: 800; letter-spacing: -.02em; } html.rd .plan-price-box .price-period { color: var(--rd-ink3); } html.rd .plan-specs { border-color: var(--rd-line); } html.rd .spec-row span { color: var(--rd-ink2); } html.rd .spec-row strong, html.rd .plan-card .spec-row :is(strong.text-cyan, .text-cyan, strong.text-emerald, .text-emerald) { color: #fff !important; } html.rd .spec-row.highlight-row { background: var(--rd-acc-soft); } /* Every plan button takes the chosen accent (the highlighted plan stands out by its navy card). */ html.rd .plan-card .btn-pillar { background: var(--rd-ctl-grad); color: var(--rd-ctl-on); border: 0; } html.rd .plan-card .btn-pillar:hover { background: var(--rd-ctl-grad); color: var(--rd-ctl-on); filter: brightness(1.05); } html.rd .custom-tier-box { background: var(--rd-navy-800); border-color: transparent; box-shadow: var(--rd-shadow-lg); } html.rd .ct-text h4 { color: #fff; } html.rd .ct-text h4 i { color: var(--rd-acc); } html.rd .ct-text p { color: var(--rd-d-ink2); } html.rd .btn-advice-amber { background: var(--rd-ctl-grad); color: var(--rd-ctl-on); border-color: transparent; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; white-space: nowrap; } html.rd .btn-advice-amber:hover { background: var(--rd-ctl-grad); color: var(--rd-ctl-on); filter: brightness(1.05); border-color: transparent; box-shadow: none; } html.rd .btn-advice-amber i { color: inherit; } html.rd .plan-card .spec-row :is(strong, strong.text-emerald, strong.text-cyan, .text-emerald, .text-cyan) { color: #fff !important; } html.rd .plan-card .spec-row.highlight-row strong { color: var(--rd-acc) !important; } html.rd .popular-ribbon { position: static; align-self: flex-start; margin-bottom: 16px; border-radius: 999px; } /* ---------- Testimonials ------------------------------------------------- */ html.rd .testimonials-section { background: var(--rd-muted); } html.rd .testimonial-card { background: var(--rd-navy-800); border: 1px solid rgba(var(--rd-acc-rgb), .32); box-shadow: var(--rd-shadow-lg); } html.rd .t-stars { color: var(--rd-acc-deep); } html.rd .t-quote { color: #fff; font-style: normal; } html.rd .t-author { border-top-color: var(--rd-d-line); } html.rd .testimonial-card :is(.t-name, .t-role, .t-meta, .author-role, p, span, small) { color: var(--rd-d-ink2); } html.rd .testimonial-card :is(.t-name, .author-name, h5, strong, b) { color: #fff; } html.rd .author-avatar { background: var(--rd-navy-800); color: var(--rd-acc); } html.rd .author-name { color: var(--rd-ink); } html.rd .author-role { color: var(--rd-ink3); } /* ---------- Blog --------------------------------------------------------- */ html.rd .blog-section { background: var(--rd-page); } html.rd .blog-card { background: var(--rd-navy-800); border: 1px solid rgba(var(--rd-acc-rgb), .32); box-shadow: var(--rd-shadow-lg); } html.rd .blog-card:hover { border-color: rgba(var(--rd-acc-rgb), .6); } html.rd .blog-category { background: rgba(6,17,31,.72); border-color: rgba(255,255,255,.14); color: #fff; border-radius: 999px; } html.rd .blog-meta { color: var(--rd-ink3); } html.rd .blog-title, html.rd .blog-title a { color: #fff; } html.rd .blog-title a:hover { color: var(--rd-acc); } html.rd .blog-excerpt { color: var(--rd-d-ink2); } html.rd .blog-link { color: var(--rd-acc); } /* ---------- Partner: navy band, copy + photo ----------------------------- */ html.rd .partner-section { background: var(--rd-navy-900); } html.rd .partner-glow-card { grid-template-columns: 1.05fr .95fr; max-width: none; gap: 64px; padding: 0; background: transparent; border: 0; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } html.rd .partner-badge { color: var(--rd-acc); background: none; border: 0; padding: 0; letter-spacing: .22em; font-size: .74rem; } html.rd .partner-title { color: #fff; font-size: clamp(2rem, 3.2vw, 2.7rem); } html.rd .partner-title .gradient-text-green { background: none; -webkit-text-fill-color: var(--rd-acc); color: var(--rd-acc); } html.rd .partner-desc { color: var(--rd-d-ink2); } html.rd .perk-item { background: var(--rd-navy-700); border-color: var(--rd-d-line); } html.rd .perk-num { color: var(--rd-acc); font-family: var(--rd-font); } html.rd .perk-label { color: var(--rd-d-ink2); } html.rd .btn-partner-secondary { background: transparent; color: var(--rd-ctl); border: 1px solid rgba(var(--rd-ctl-rgb), .55); box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; } html.rd .btn-partner-secondary:hover { background: rgba(var(--rd-ctl-rgb), .14); color: #fff; border-color: var(--rd-ctl); box-shadow: none; } html.rd .rd-partner-photo { position: relative; border-radius: var(--rd-r-lg); overflow: hidden; aspect-ratio: 5 / 4.2; box-shadow: var(--rd-shadow-lg); } html.rd .rd-partner-photo img { width: 100%; height: 100%; object-fit: cover; } /* ---------- FAQ ---------------------------------------------------------- */ html.rd .faq-section { background: var(--rd-muted); } html.rd .faq-intro { color: var(--rd-ink2); } html.rd .faq-category-title { color: var(--rd-accent); font-family: var(--rd-font); font-size: .78rem; letter-spacing: .2em; } /* Light FAQ cards belong to the FAQ sections. Pages the site rebuilt (partner, saving-and-investing, partner-earnings) reuse these class names inside their own dark sections, so they keep their own look. */ html.rd :is(.faq-section, .faq-outro-section) .faq-item { background: var(--rd-card); border-color: var(--rd-line); } html.rd :is(.faq-section, .faq-outro-section) .faq-item.active { background: var(--rd-card); border-color: var(--rd-acc-deep); box-shadow: var(--rd-shadow); } html.rd :is(.faq-section, .faq-outro-section) .faq-question { color: var(--rd-ink); } html.rd :is(.faq-section, .faq-outro-section) .faq-icon { color: var(--rd-ctl-ink); width: 30px; height: 30px; flex: none; display: grid; place-items: center; border-radius: 50%; background: var(--rd-ctl-soft); font-size: .72rem; } html.rd :is(.faq-section, .faq-outro-section) .faq-item.active .faq-icon { background: var(--rd-ctl-grad); color: var(--rd-ctl-on); } html.rd :is(.faq-section, .faq-outro-section) .faq-answer { color: var(--rd-ink2); border-top-color: var(--rd-line); } html.rd .faq-outro-section { background: var(--rd-page); padding: 96px 0; } html.rd .faq-outro-card { background: var(--rd-muted); border: 1px solid var(--rd-line); } html.rd .faq-model-card { background: var(--rd-navy-800); border: 1px solid rgba(var(--rd-acc-rgb), .32); box-shadow: var(--rd-shadow-lg); } html.rd .faq-outro-card .section-subtitle { color: var(--rd-acc-ink) !important; } html.rd .faq-outro-card .cta-title { color: var(--rd-ink); } html.rd .faq-outro-card .cta-desc { color: var(--rd-ink2); } html.rd .faq-model-card h4 { color: #fff; } html.rd .faq-model-card p { color: var(--rd-d-ink2); } html.rd .faq-brand-block { border-top-color: var(--rd-line); } html.rd .faq-brand-block h3 { color: var(--rd-ink); } html.rd .faq-brand-tagline { color: var(--rd-acc-ink); } html.rd .faq-brand-text { color: var(--rd-ink2); } /* ---------- Closing CTA: photo band ------------------------------------- */ html.rd .cta-bottom-section { position: relative; overflow: hidden; padding: 130px 0; background: var(--rd-navy-900); isolation: isolate; } html.rd .rd-cta-photo { position: absolute; inset: 0; z-index: -1; } html.rd .rd-cta-photo img { width: 100%; height: 100%; object-fit: cover; } html.rd .rd-cta-photo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(6,17,31,.72) 0%, rgba(6,17,31,.9) 100%); } html.rd .cta-glass-card { background: transparent; border: 0; box-shadow: none; padding: 0 24px; -webkit-backdrop-filter: none; backdrop-filter: none; } html.rd .cta-bottom-section .section-subtitle { color: var(--rd-acc) !important; } html.rd .cta-bottom-section .cta-title { color: #fff; font-size: clamp(2.2rem, 4vw, 3.3rem); line-height: 1.12; } html.rd .cta-bottom-section .cta-desc { color: var(--rd-d-ink2); } /* ---------- Footer, modal, scroll-to-top -------------------------------- */ html.rd .footer { background: var(--rd-navy-950); border-top-color: var(--rd-d-line); } html.rd .footer-heading { color: #fff; font-size: .78rem; letter-spacing: .18em; text-transform: uppercase; } html.rd .footer-about { color: var(--rd-d-ink2); } html.rd .footer-nav li a { color: var(--rd-d-ink2); } html.rd .footer-nav li a:hover { color: var(--rd-acc); } html.rd .footer-nav li a i { color: var(--rd-acc); } html.rd .footer-contact-list { color: var(--rd-d-ink2); } html.rd .footer-contact-list li i { color: var(--rd-acc) !important; } html.rd .footer-contact-list a:hover { color: var(--rd-acc); } html.rd .footer-bottom { background: #030912; border-top-color: var(--rd-d-line); } html.rd .footer-bottom-container { color: var(--rd-d-ink3); } html.rd .modal-backdrop { background: rgba(3,9,18,.6); } html.rd .modal-card { background: var(--rd-card); border-color: var(--rd-line); box-shadow: var(--rd-shadow-lg); } html.rd .modal-header { border-bottom-color: var(--rd-line); } html.rd .modal-title { color: var(--rd-ink); } html.rd .modal-close-btn { color: var(--rd-ink3); } html.rd .modal-body { color: var(--rd-ink2); } html.rd .modal-footer { background: var(--rd-muted); border-top-color: var(--rd-line); } html.rd .scroll-to-top { background: var(--rd-acc-grad); color: var(--rd-acc-on); box-shadow: var(--rd-shadow-lg); } /* The theme's script adds .is-visible but its CSS only styles .show, so the button never appears. */ html.rd .scroll-to-top.is-visible { opacity: 1; visibility: visible; transform: none; } /* ---------- Responsive --------------------------------------------------- */ @media (max-width: 1200px) { html.rd .hero-trust-list { grid-template-columns: repeat(2, auto); row-gap: 14px; } html.rd .trust-pill:nth-child(3) { padding-left: 0; border-left: 0; } html.rd .calc-body-grid { grid-template-columns: 1fr 1fr; } html.rd .rd-calc-photo { grid-column: 1 / -1; min-height: 220px; } html.rd .rd-why-bg::after { background: linear-gradient(90deg, rgba(238,244,250,.97) 0%, rgba(238,244,250,.92) 55%, rgba(238,244,250,.45) 85%, rgba(238,244,250,.2) 100%); } html.rd .stat-card:nth-child(2) { border-right: none; } } @media (max-width: 1024px) { html.rd .hero-section { padding: 64px 0 150px; min-height: 0; } html.rd .rd-hero-bg { width: 100%; } html.rd .rd-hero-bg img { object-position: 72% 20%; } html.rd .rd-hero-bg::after { background: linear-gradient(180deg, rgba(6,17,31,.62) 0%, rgba(6,17,31,.78) 45%, var(--rd-navy-900) 100%); } html.rd .hero-container { grid-template-columns: minmax(0, 1fr); } html.rd .hero-eyebrow { justify-content: center; } html.rd .hero-trust-list { margin: 0 auto; text-align: left; } html.rd .rd-hero-quote { display: none; } html.rd .stats-glass-grid { margin-top: -84px; } html.rd .services-section:has(.rd-why-bg) .services-grid { max-width: none; } html.rd .rd-why-bg::after { background: rgba(238,244,250,.9); } html.rd .rd-why-quote { display: none; } html.rd .steps-grid { gap: 28px; } html.rd .step-card:not(:last-child)::after { display: none; } html.rd .partner-glow-card { grid-template-columns: 1fr; gap: 36px; } html.rd .rd-partner-photo { max-width: 560px; } html.rd .cta-bottom-section { padding: 88px 0; } /* The theme stretches the calculator switch to full width here but keeps it beside the title until 992px, which squeezes the title until words break. Stack them from this width. */ html.rd .calc-header-row { flex-direction: column; align-items: flex-start; gap: 20px; } } @media (max-width: 1024px) and (min-width: 993px) { html.rd .pillars-grid, html.rd .pricing-grid, html.rd .testimonials-grid, html.rd .blog-grid { grid-template-columns: repeat(2, 1fr); } html.rd .steps-grid { grid-template-columns: repeat(3, 1fr); } html.rd .services-section:has(.rd-why-bg) .services-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 992px) { html.rd .services-section:has(.rd-why-bg) .services-grid { grid-template-columns: repeat(2, 1fr); } html.rd .calc-body-grid { grid-template-columns: 1fr; } } @media (max-width: 768px) { html.rd .hero-title { font-size: clamp(2.1rem, 9vw, 2.8rem); } html.rd .hero-title .rd-products { font-size: .62em; margin-top: 6px; } html.rd .hero-trust-list { grid-template-columns: 1fr 1fr; gap: 14px 12px; } html.rd .trust-pill, html.rd .trust-pill:nth-child(3) { padding: 0; border-left: 0; } html.rd .stats-glass-grid { margin-top: -80px; padding: 16px; } html.rd .stat-card:not(:last-child) { border-right: none; border-bottom: 1px solid var(--rd-line); } html.rd .pillar-card:has(.rd-pillar-photo) { padding: 0 18px 24px; } html.rd .rd-pillar-photo { margin: 0 -18px 4px; height: 180px; } html.rd .services-section { padding: 64px 0; } html.rd .services-section:has(.rd-why-bg) .services-grid { grid-template-columns: 1fr; } html.rd .calculator-glass-box { padding: 22px 16px; } html.rd .res-amount { font-size: 2rem; } html.rd .faq-outro-section { padding: 56px 0; } html.rd .cta-bottom-section { padding: 72px 0; } } /* The rebuilt pages' own buttons (calculator, partner, partner earnings) follow the controls, not the accent. */ html.rd :is(.calc-ui-model-btn, .earn-ui-btn, .partner-ui-btn-primary, .saving-ui-btn-primary) { background: var(--rd-ctl-grad); color: var(--rd-ctl-on); box-shadow: none; } html.rd :is(.calc-ui-model-btn, .earn-ui-btn, .partner-ui-btn-primary, .saving-ui-btn-primary):hover { color: var(--rd-ctl-on); filter: brightness(1.05); } html.rd .partner-ui-btn-ghost { color: var(--rd-ctl); border-color: rgba(var(--rd-ctl-rgb), .55); } html.rd .partner-ui-btn-ghost:hover { border-color: var(--rd-ctl); background: rgba(var(--rd-ctl-rgb), .14); } /* ---------- Client copy that needed blocks of its own (2026-09-23) -------- */ html.rd .rd-tick-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 28px; } html.rd .rd-tick-list li { display: flex; gap: 10px; align-items: flex-start; color: var(--rd-d-ink2); font-size: 1rem; line-height: 1.6; } html.rd .rd-tick-list li i { color: var(--rd-acc); font-size: .85rem; margin-top: .3em; flex: none; } html.rd .rd-after-list { margin-top: 20px; color: var(--rd-d-ink3); } html.rd .rd-lead-out { margin-top: 18px; color: var(--rd-acc); font-weight: 700; } @media (max-width: 720px) { html.rd .rd-tick-list { grid-template-columns: 1fr; } } /* The audience grid holds six cards now, the checks grid five. */ html.rd .saving-ui-audience { grid-template-columns: repeat(3, minmax(0, 1fr)); } html.rd .saving-ui-audience-five { grid-template-columns: repeat(5, minmax(0, 1fr)); } @media (max-width: 1000px) { html.rd .saving-ui-audience { grid-template-columns: repeat(2, minmax(0, 1fr)); } html.rd .saving-ui-audience-five { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 560px) { html.rd :is(.saving-ui-audience, .saving-ui-audience-five) { grid-template-columns: 1fr; } } html.rd .saving-ui-audience-card p { margin: 6px 0 0; color: var(--rd-d-ink2); font-size: .92rem; line-height: 1.55; } html.rd .saving-ui-after-grid { margin-top: 22px; } /* Return calculator: the closing block the client wrote for this page. */ html.rd .calc-ui-closing { max-width: 800px; margin: 0 auto; text-align: center; } html.rd .calc-ui-closing-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; } html.rd .calc-ui-closing-actions .calc-ui-model-btn { width: auto; padding: 13px 28px; } html.rd .calc-ui-model-btn-ghost { background: transparent; border: 1px solid rgba(var(--rd-ctl-rgb), .55); color: var(--rd-ctl); } html.rd .calc-ui-model-btn-ghost:hover { background: rgba(var(--rd-ctl-rgb), .14); color: #fff; } html.rd .earn-ui-lead-sub { margin-top: 8px; color: var(--rd-acc); font-weight: 600; } /* ---------- The block that closes several pages -------------------------- It is one component, and on three pages in a row it looked it. Each page now gets its own treatment (client, 2026-09-23) while the component stays one. */ html.rd[data-rd-page="fixed-deposit"] .custom-tier-box { border-left: 4px solid var(--rd-acc); background: linear-gradient(90deg, rgba(var(--rd-acc-rgb), .12), rgba(var(--rd-acc-rgb), 0) 46%), var(--rd-navy-800); } html.rd[data-rd-page="accounts"] .custom-tier-box { background: var(--rd-acc-soft); border: 1px solid rgba(var(--rd-acc-ink-rgb), .3); box-shadow: var(--rd-shadow); } html.rd[data-rd-page="accounts"] .ct-text h4 { color: var(--rd-ink); } html.rd[data-rd-page="accounts"] .ct-text h4 i { color: var(--rd-acc-ink); } html.rd[data-rd-page="accounts"] .ct-text p { color: var(--rd-ink2); } html.rd[data-rd-page="academy"] .custom-tier-box { flex-direction: column; text-align: center; gap: 20px; background: radial-gradient(130% 150% at 50% 0%, rgba(var(--rd-acc-rgb), .18), rgba(var(--rd-acc-rgb), 0) 62%), var(--rd-navy-800); } html.rd[data-rd-page="academy"] .ct-text { max-width: 620px; margin: 0 auto; } /* ---------- One card, everywhere (client, 2026-09-25) -------------------- Every content card is navy with an accent edge, like the plan card they picked out, so no card disappears into a light section again. */ html.rd :is(.stats-banner-section, .services-section, .pricing-section, .testimonials-section, .blog-section, .faq-section, .faq-outro-section) :is(.plan-card, .faq-model-card, .service-box, .blog-card, .testimonial-card) { --text-primary: var(--rd-d-ink); --text-secondary: var(--rd-d-ink2); --text-muted: var(--rd-d-ink3); --border-glass: var(--rd-d-line); --border-glow: var(--rd-d-line2); --rd-eyebrow: var(--rd-acc); }