/* ===================================================================== * Reimbursify homepage, brand redesign * Brand palette + Figtree typography per brand_sample.png. * Everything is scoped under `.rb-home` (set on by front-page.php) * so these rules never leak onto other pages of the site. * ===================================================================== */ /* `body.rb-home` (not just `.rb-home`) so these base rules outrank Kadence's element-level base stylesheet, which still loads via wp_head() on the front page. */ body.rb-home { --rb-blue: #0074D9; /* primary brand blue */ --rb-blue-bright: #3B9BFF; /* lighter blue for accents on dark bg */ --rb-blue-light: #EBF4FC; /* tint / chips / soft fills */ --rb-navy: #1A2944; /* dark sections & headings */ --rb-navy-mid: #243453; /* cards on dark */ --rb-slate: #627087; /* body copy */ --rb-muted: #8A97A8; /* secondary / labels */ --rb-bg: #F1F7FB; /* page background */ --rb-white: #FFFFFF; --rb-border: rgba(26,41,68,0.10); --rb-radius: 14px; --rb-radius-lg: 22px; --rb-radius-xl: 32px; --rb-sans: 'Figtree', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --rb-gradient: linear-gradient(135deg, #0074D9 0%, #1A2944 100%); --rb-shadow-sm: 0 2px 8px rgba(26,41,68,0.05); --rb-shadow-md: 0 10px 30px rgba(26,41,68,0.08); --rb-shadow-lg: 0 20px 50px rgba(26,41,68,0.12); --blue: var(--rb-blue); --blue-bright: var(--rb-blue-bright); --blue-light: var(--rb-blue-light); --navy: var(--rb-navy); --navy-mid: var(--rb-navy-mid); --slate: var(--rb-slate); --muted: var(--rb-muted); --bg: var(--rb-bg); --white: var(--rb-white); --border: var(--rb-border); --pattern: url('../images/tile_background.png'); --sans: var(--rb-sans); --radius: var(--rb-radius); --radius-lg: var(--rb-radius-lg); --gradient: var(--rb-gradient); font-family: var(--sans); background: var(--bg); color: var(--navy); line-height: 1.6; overflow-x: hidden; -webkit-font-smoothing: antialiased; margin: 0; } .rb-home * , .rb-home *::before, .rb-home *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } /* subtle brand pattern wash */ .rb-home::before { content: ''; position: fixed; inset: 0; background-image: var(--pattern); background-repeat: repeat; background-size: 300px; opacity: 0.18; pointer-events: none; z-index: 0; } .rb-home > * { position: relative; z-index: 1; } .rb-home img { max-width: 100%; height: auto; } .rb-home a { color: inherit; } /* ---------- NAV ---------- */ .rb-home .rb-nav { position: fixed; top: 30px; left: 0; right: 0; z-index: 100; display: flex; align-items: center; justify-content: space-between; width: 100%; margin: 0; padding: 0 max(2.5rem, calc((100vw - 1440px) / 2 + 2.5rem)); height: 70px; background: rgba(255,255,255,0.88); backdrop-filter: blur(18px); border-bottom: 1px solid var(--border); } .rb-home #masthead > .rb-announcement { position: fixed; top: 0; left: 0; right: 0; z-index: 101; } .rb-home.admin-bar #masthead > .rb-announcement { top: 32px; } .rb-home.admin-bar .rb-nav { top: 62px; } .rb-home .rb-nav .nav-logo { display: flex; align-items: center; text-decoration: none; } .rb-home .rb-nav .nav-logo img { height: 40px; width: auto; display: block; } .rb-home .nav-links { display: flex; align-items: center; gap: 2rem; } .rb-home .nav-links a { font-size: 14px; color: var(--slate); text-decoration: none; font-weight: 500; transition: color 0.2s; } .rb-home .nav-links a:hover { color: var(--blue); } .rb-home .nav-cta { background: var(--blue) !important; color: #fff !important; padding: 9px 22px; border-radius: 40px; font-weight: 600; font-size: 14px !important; transition: background 0.2s, transform 0.15s, box-shadow 0.2s !important; } .rb-home .nav-cta:hover { background: var(--navy) !important; transform: translateY(-1px); box-shadow: 0 8px 20px rgba(0,116,217,0.25); } /* mobile toggle */ .rb-home .mobile-toggle { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 5px; z-index: 110; } .rb-home .mobile-toggle span { display: block; width: 26px; height: 2px; background: var(--navy); border-radius: 2px; transition: 0.3s; } .rb-home .mobile-toggle.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .rb-home .mobile-toggle.active span:nth-child(2) { opacity: 0; } .rb-home .mobile-toggle.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } .rb-home .mobile-menu { position: fixed; top: 0; right: 0; width: 82%; max-width: 320px; height: 100vh; background: var(--white); padding: 90px 2rem 2rem; display: none; flex-direction: column; gap: 1.5rem; box-shadow: -10px 0 40px rgba(26,41,68,0.12); transform: translateX(100%); visibility: hidden; transition: transform 0.4s ease-out, visibility 0s linear 0.4s; z-index: 105; } .rb-home .mobile-menu.active { display: flex; transform: translateX(0); visibility: visible; transition-delay: 0s; } .rb-home .mobile-menu a { font-size: 18px; color: var(--navy); text-decoration: none; font-weight: 500; } .rb-home .mobile-menu .nav-cta { text-align: center; background: var(--blue); color: #fff; padding: 13px; border-radius: 40px; } /* ---------- BUTTONS ---------- */ .rb-home .btn-primary { background: var(--blue); color: #fff; padding: 14px 28px; border-radius: 40px; font-size: 15px; font-weight: 600; text-decoration: none; border: none; cursor: pointer; transition: background 0.2s, transform 0.15s, box-shadow 0.2s; display: inline-flex; align-items: center; gap: 8px; } .rb-home .btn-primary:hover { background: var(--navy); transform: translateY(-2px); box-shadow: 0 10px 26px rgba(0,116,217,0.28); } .rb-home .btn-secondary { background: transparent; color: var(--blue); padding: 14px 28px; border-radius: 40px; font-size: 15px; font-weight: 600; text-decoration: none; border: 2px solid var(--blue); cursor: pointer; transition: background 0.2s, transform 0.15s; display: inline-flex; align-items: center; gap: 8px; } .rb-home .btn-secondary:hover { background: var(--blue-light); transform: translateY(-2px); } /* ---------- HERO ---------- */ .rb-home .hero { min-height: 100vh; display: grid; grid-template-columns: 1fr 1fr; padding-top: 100px; overflow: hidden; } .rb-home .hero-left { padding: 6rem 3rem 5rem max(2.5rem, calc((100vw - 1440px) / 2 + 2.5rem)); display: flex; flex-direction: column; justify-content: center; position: relative; align-items: flex-start; } .rb-home .hero-left > * { opacity: 1; transform: none; } @media (prefers-reduced-motion: no-preference) { .rb-home .hero-badge { display: inline-flex; align-items: center; gap: 8px; background: var(--blue-light); color: var(--blue); font-size: 12px; font-weight: 600; letter-spacing: 0.03em; padding: 6px 14px; border-radius: 40px; margin-bottom: 1.75rem; width: fit-content; animation: fadeUp 0.6s ease both; } } .rb-home .hero-badge::before { content: '●'; font-size: 8px; } @media (prefers-reduced-motion: no-preference) { .rb-home .hero-h1 { font-family: var(--sans); font-weight: 700; font-size: clamp(2.4rem, 4.2vw, 3.7rem); line-height: 1.08; letter-spacing: -0.02em; color: var(--navy); margin-bottom: 1.5rem; animation: fadeUp 0.7s 0.1s ease both; } } .rb-home .hero-h1 em { color: var(--blue); font-style: normal; } @media (prefers-reduced-motion: no-preference) { .rb-home .hero-sub { font-size: 18px; color: var(--slate); line-height: 1.7; max-width: 500px; margin-bottom: 2.5rem; font-weight: 400; animation: fadeUp 0.7s 0.2s ease both; } } @media (prefers-reduced-motion: no-preference) { .rb-home .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: flex-start; animation: fadeUp 0.7s 0.3s ease both; } } @media (prefers-reduced-motion: no-preference) { .rb-home .hero-stats { display: flex; gap: 2.5rem; margin-top: 3rem; flex-wrap: wrap; justify-content: flex-start; animation: fadeUp 0.7s 0.4s ease both; } } .rb-home .stat-item .num { font-family: var(--sans); font-weight: 700; font-size: 2rem; color: var(--blue); line-height: 1; letter-spacing: -0.02em; } .rb-home .stat-item .lbl { font-size: 12px; color: var(--muted); margin-top: 4px; } .rb-home .hero-right { background: var(--blue-light); display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 4rem 3rem; position: relative; overflow: hidden; } .rb-home .hero-right::before { content: ''; position: absolute; top: -40%; right: -20%; width: 520px; height: 520px; background: radial-gradient(circle, rgba(0,116,217,0.18) 0%, transparent 70%); border-radius: 50%; } /* ---------- ROI CALCULATOR (using shared .rb-calc-card styles) ---------- */ .rb-home .calc-card { width: 100%; max-width: 410px; position: relative; z-index: 1; animation: fadeUp 0.8s 0.2s ease both; background: var(--rb-navy-mid); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--rb-radius-lg); padding: 2.25rem; color: #fff; box-shadow: 0 24px 60px rgba(0,0,0,0.35); font-family: var(--rb-sans); } .rb-home .calc-learn-more { width: 100%; max-width: 410px; justify-content: center; margin-top: 1rem; position: relative; z-index: 1; } .rb-home .rb-calc-title { font-size: 20px; line-height: 1.25; font-weight: 700; color: #fff; letter-spacing: -0.01em; margin-bottom: 0.5rem; } .rb-home .rb-calc-description { font-size: 13px; line-height: 1.55; color: rgba(255,255,255,0.65); margin: 0 0 1.5rem; } .rb-home .rb-calc-field { margin-bottom: 1.25rem; } .rb-home .rb-calc-label { font-size: 13px; color: rgba(255,255,255,0.75); margin-bottom: 8px; display: flex; justify-content: space-between; align-items: center; } .rb-home .rb-calc-label span { color: var(--rb-blue-bright); font-weight: 600; } .rb-home .rb-calc-slider { width: 100%; appearance: none; -webkit-appearance: none; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.18); outline: none; cursor: pointer; } .rb-home .rb-calc-result { background: rgba(0,116,217,0.18); border: 1px solid rgba(59,155,255,0.35); border-radius: var(--rb-radius); padding: 1.25rem 1.5rem; margin-top: 1.5rem; } .rb-home .rb-calc-result-label { font-size: 12px; color: rgba(255,255,255,0.6); margin-bottom: 6px; } .rb-home .rb-calc-result-value { font-family: var(--rb-sans); font-weight: 700; font-size: 2.6rem; color: #fff; line-height: 1; letter-spacing: -0.02em; } .rb-home .rb-calc-result-sub { font-size: 12px; color: rgba(255,255,255,0.5); margin-top: 6px; } /* ---------- SECTIONS ---------- */ .rb-home .section { padding: 6rem 2rem; } .rb-home .container { max-width: 1140px; margin: 0 auto; } .rb-home .section-tag { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--blue); margin-bottom: 0.75rem; } .rb-home .section-h2 { font-family: var(--sans); font-weight: 700; font-size: clamp(1.9rem, 3.4vw, 2.7rem); line-height: 1.12; letter-spacing: -0.02em; color: var(--navy); margin-bottom: 1rem; } .rb-home .section-h2 em { color: var(--blue); font-style: normal; } .rb-home .section-sub { font-size: 17px; color: var(--slate); font-weight: 400; max-width: 580px; line-height: 1.7; } /* ---------- HOW IT WORKS ---------- */ .rb-home .how-section { background: var(--white); } .rb-home .how-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .rb-home .how-steps { display: flex; flex-direction: column; gap: 0; margin-top: 1.5rem; } .rb-home .step { display: flex; gap: 1.25rem; padding: 1.5rem 0; border-bottom: 1px solid var(--border); cursor: pointer; transition: all 0.2s; } .rb-home .step:last-child { border-bottom: none; } .rb-home .step.active .step-num { background: var(--blue); color: #fff; border-color: var(--blue); } .rb-home .step-num { width: 38px; height: 38px; border-radius: 50%; border: 2px solid var(--border); display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: var(--muted); flex-shrink: 0; transition: all 0.3s; } .rb-home .step-body { padding-top: 5px; } .rb-home .step-title { font-size: 16px; font-weight: 600; color: var(--navy); margin-bottom: 4px; } .rb-home .step-desc { font-size: 14px; color: var(--slate); line-height: 1.6; } .rb-home .how-visual { background: var(--bg); border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; position: relative; border: 1px solid var(--border); } .rb-home .visual-panel { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; flex-direction: column; padding: 2.5rem; opacity: 0; transition: opacity 0.4s; } .rb-home .visual-panel.active { opacity: 1; } /* mock UI */ .rb-home .mock-card { background: #fff; border-radius: var(--radius); padding: 1.5rem; box-shadow: 0 10px 40px rgba(26,41,68,0.12); width: 100%; max-width: 310px; } .rb-home .mock-label { font-size: 11px; color: var(--muted); margin-bottom: 4px; font-weight: 600; letter-spacing: 0.02em; } .rb-home .mock-val { font-size: 1.5rem; font-weight: 700; color: var(--navy); } .rb-home .mock-bar { height: 6px; border-radius: 3px; background: var(--blue-light); margin: 12px 0 4px; } .rb-home .mock-bar-fill { height: 100%; border-radius: 3px; background: var(--blue); transition: width 1s ease; } .rb-home .mock-row { display: flex; justify-content: space-between; align-items: center; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; color: var(--slate); } .rb-home .mock-row:last-child { border: none; } .rb-home .mock-status { font-size: 11px; padding: 3px 9px; border-radius: 40px; background: var(--blue-light); color: var(--blue); font-weight: 600; } .rb-home .mock-status.pending { background: #FFF3E0; color: #B7791F; } .rb-home .mock-btn { background: var(--blue); color: #fff; border: none; padding: 11px; border-radius: 8px; font-size: 13px; width: 100%; font-weight: 600; cursor: pointer; } .rb-home .mock-input { border: 1.5px solid var(--border); border-radius: 8px; padding: 9px 12px; font-size: 13px; color: var(--slate); margin-bottom: 8px; width: 100%; } /* Custom Overrides for shared components on homepage */ .rb-home .rb-btn-row { justify-content: flex-start; } @media (max-width: 900px) { .rb-home .rb-btn-row { justify-content: center; } } /* ---------- SPECIALTIES ---------- */ .rb-home .specialties-section { background: var(--white); } .rb-home .specialties-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 1rem; margin-top: 3rem; } .rb-home .specialty-card { border: 1.5px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.5rem; cursor: pointer; transition: all 0.2s; text-decoration: none; display: flex; align-items: center; gap: 12px; background: #fff; } .rb-home .specialty-card:hover { border-color: var(--blue); background: var(--blue-light); transform: translateY(-2px); } .rb-home .specialty-icon { width: 38px; height: 38px; border-radius: 10px; background: var(--blue-light); color: var(--blue); display: flex; align-items: center; justify-content: center; font-size: 18px; flex-shrink: 0; } .rb-home .specialty-name { font-size: 14px; font-weight: 600; color: var(--navy); } /* ---------- TESTIMONIALS ---------- */ .rb-home .testimonials-section { background: var(--bg); overflow: hidden; } .rb-home .testimonials-row { display: flex; gap: 1.5rem; margin-top: 3rem; animation: rbScroll 48s linear infinite; width: max-content; } .rb-home .testimonials-row:hover { animation-play-state: paused; } @keyframes rbScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .rb-home .testi-card { background: #fff; border-radius: var(--radius-lg); border: 1px solid var(--border); padding: 1.75rem; width: 330px; flex-shrink: 0; box-shadow: 0 6px 20px rgba(26,41,68,0.06); /* elevation: testimonials are primary content */ } .rb-home .testi-stars { color: var(--blue); font-size: 14px; letter-spacing: 2px; margin-bottom: 0.75rem; } .rb-home .testi-amount { font-family: var(--sans); font-weight: 700; font-size: 1.6rem; color: var(--blue); margin-bottom: 6px; letter-spacing: -0.02em; } .rb-home .testi-quote { font-size: 14px; color: var(--slate); line-height: 1.7; margin-bottom: 1.25rem; } .rb-home .testi-author { display: flex; align-items: center; gap: 10px; } .rb-home .testi-avatar { width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; color: #fff; flex-shrink: 0; position: relative; overflow: hidden; } /* stock photo layered over the initials fallback (see front-page.php note) */ .rb-home .testi-avatar img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .rb-home .testi-name { font-size: 13px; font-weight: 600; color: var(--navy); } .rb-home .testi-role { font-size: 12px; color: var(--muted); } /* ---------- PRICING ---------- */ .rb-home .pricing-section { background: var(--navy); color: #fff; } .rb-home .pricing-section .section-tag { color: var(--blue-bright); } .rb-home .pricing-section .section-h2 { color: #fff; } .rb-home .pricing-section .section-h2 em { color: var(--blue-bright); } .rb-home .pricing-section .section-sub { color: rgba(255,255,255,0.65); } .rb-home .pricing-toggle { display: inline-flex; background: rgba(255,255,255,0.08); border-radius: 40px; padding: 4px; margin: 2rem 0; } .rb-home .toggle-btn { padding: 9px 22px; border-radius: 40px; border: none; cursor: pointer; font-size: 14px; font-weight: 600; transition: all 0.2s; background: transparent; color: rgba(255,255,255,0.65); } .rb-home .toggle-btn.active { background: #fff; color: var(--navy); } .rb-home .pricing-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 1rem; } .rb-home .price-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.12); border-radius: var(--radius-lg); padding: 2rem; transition: transform 0.2s, border-color 0.2s; cursor: pointer; } .rb-home .price-card:hover { transform: translateY(-4px); } .rb-home .price-card.featured { background: var(--gradient); border-color: transparent; position: relative; } .rb-home .price-card.featured::before { content: 'Most Popular'; position: absolute; top: -12px; left: 50%; transform: translateX(-50%); background: var(--blue-bright); color: #fff; font-size: 11px; font-weight: 700; padding: 4px 13px; border-radius: 40px; letter-spacing: 0.04em; text-transform: uppercase; box-shadow: 0 6px 16px rgba(0,0,0,0.25); } .rb-home .price-tier { font-size: 13px; font-weight: 600; color: rgba(255,255,255,0.55); margin-bottom: 1rem; } .rb-home .price-card.featured .price-tier { color: rgba(255,255,255,0.8); } .rb-home .price-amount { font-family: var(--sans); font-weight: 700; font-size: 2.8rem; color: #fff; line-height: 1; margin-bottom: 0.25rem; letter-spacing: -0.02em; } .rb-home .price-period { font-size: 13px; color: rgba(255,255,255,0.5); margin-bottom: 1.5rem; } .rb-home .price-features { list-style: none; margin: 0 0 2rem; padding: 0; } .rb-home .price-features li { font-size: 14px; color: rgba(255,255,255,0.75); padding: 6px 0; display: flex; gap: 8px; align-items: flex-start; } .rb-home .price-features li::before { content: '✓'; color: var(--blue-bright); font-weight: 800; flex-shrink: 0; margin-top: 1px; } .rb-home .price-card.featured .price-features li { color: rgba(255,255,255,0.92); } .rb-home .price-card.featured .price-features li::before { color: #fff; } .rb-home .btn-price { width: 100%; padding: 12px; border-radius: 40px; font-size: 14px; font-weight: 600; cursor: pointer; border: none; transition: all 0.2s; text-decoration: none; display: block; text-align: center; } .rb-home .btn-price-outline { background: transparent; color: #fff; border: 1.5px solid rgba(255,255,255,0.35); } .rb-home .btn-price-outline:hover { background: rgba(255,255,255,0.1); } .rb-home .btn-price-solid { background: #fff; color: var(--blue); } .rb-home .btn-price-solid:hover { background: var(--blue-light); } /* ---------- FINAL CTA ---------- */ .rb-home .cta-section { background: var(--gradient); text-align: center; padding: 7rem 2rem; position: relative; overflow: hidden; } .rb-home .cta-section::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 80% -10%, rgba(59,155,255,0.40) 0%, transparent 55%); } .rb-home .cta-section > * { position: relative; z-index: 1; } .rb-home .cta-section .section-h2 { color: #fff; margin: 0 auto 1.5rem; max-width: 720px; } .rb-home .cta-section .section-h2 em { color: rgba(255,255,255,0.7); } .rb-home .cta-section .section-sub { color: rgba(255,255,255,0.8); margin: 0 auto 3rem; } .rb-home .cta-actions { display: flex; gap: 1rem; justify-content: center; flex-wrap: wrap; } .rb-home .btn-cta-white { background: #fff; color: var(--blue); padding: 16px 34px; border-radius: 40px; font-size: 16px; font-weight: 600; text-decoration: none; transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px; } .rb-home .btn-cta-white:hover { transform: translateY(-2px); box-shadow: 0 12px 30px rgba(0,0,0,0.2); } .rb-home .btn-cta-outline { background: transparent; color: #fff; padding: 16px 34px; border-radius: 40px; font-size: 16px; font-weight: 600; text-decoration: none; border: 2px solid rgba(255,255,255,0.5); transition: all 0.2s; display: inline-flex; align-items: center; gap: 8px; } .rb-home .btn-cta-outline:hover { border-color: #fff; background: rgba(255,255,255,0.12); } /* ---------- FOOTER ---------- */ .rb-home .rb-footer { background: var(--navy); color: rgba(255,255,255,0.55); padding: 4rem max(2.5rem, calc((100vw - 1440px) / 2 + 2.5rem)) 3rem; display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 3rem; width: 100%; margin: 0; } .rb-home .rb-footer .footer-logo img { height: 30px; width: auto; margin-bottom: 1rem; filter: brightness(0) invert(1); } .rb-home .rb-footer .footer-desc { font-size: 13px; line-height: 1.7; max-width: 260px; } .rb-home .rb-footer .footer-store-badges { display: flex; align-items: center; flex-wrap: wrap; gap: 0.65rem; margin-top: 1.25rem; } .rb-home .rb-footer .footer-store-badges .rb-store-badge-link { height: 40px; overflow: visible; } .rb-home .rb-footer .footer-store-badges img.rb-store-badge { display: block; width: auto; max-width: none; height: 40px; object-fit: contain; } .rb-home .rb-footer .footer-store-badges img.rb-store-badge--google-play { height: 40px; } .rb-home .rb-footer .footer-col-title { font-size: 12px; font-weight: 700; color: rgba(255,255,255,0.75); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 1rem; } .rb-home .rb-footer .footer-links { list-style: none; display: flex; flex-direction: column; gap: 0.5rem; padding: 0; margin: 0; } .rb-home .rb-footer .footer-links a { font-size: 13px; color: rgba(255,255,255,0.5); text-decoration: none; transition: color 0.2s; } .rb-home .rb-footer .footer-links .rb-store-badge-link { display: inline-flex; width: fit-content; } .rb-home .rb-footer .footer-links a:hover { color: #fff; } .rb-home .rb-footer.footer-bottom { display: block; border-top: 1px solid rgba(255, 255, 255, 0.12); padding: 1.5rem max(2.5rem, calc((100vw - 1440px) / 2 + 2.5rem)); text-align: center; font-size: 12px; color: rgba(255, 255, 255, 0.4); background: var(--navy); } /* ---------- MODAL ---------- */ .rb-home .modal-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(26,41,68,0.6); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; padding: 2rem; } .rb-home .modal-backdrop.open { display: flex; } .rb-home .modal { background: #fff; border-radius: var(--radius-lg); padding: 2.5rem; max-width: 480px; width: 100%; position: relative; animation: fadeUp 0.3s ease; } .rb-home .modal-title { font-family: var(--sans); font-weight: 700; font-size: 1.7rem; color: var(--navy); margin-bottom: 0.5rem; letter-spacing: -0.01em; } .rb-home .modal-sub { font-size: 14px; color: var(--slate); margin-bottom: 2rem; } .rb-home .modal-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; cursor: pointer; font-size: 20px; color: var(--muted); width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; } .rb-home .modal-close:hover { background: var(--bg); } /* ---------- ANIMATIONS ---------- */ @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .rb-home .reveal { opacity: 1; transform: none; } @media (prefers-reduced-motion: no-preference) { .rb-home .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.6s ease, transform 0.6s ease; } .rb-home .reveal.visible { opacity: 1; transform: translateY(0); } } /* ---------- RESPONSIVE ---------- */ @media (max-width: 980px) { .rb-home .hero { grid-template-columns: 1fr; min-height: auto; } .rb-home .hero-right { display: none; } .rb-home .hero-left { padding: 5rem 1.5rem 3rem; text-align: center; align-items: center; } .rb-home .hero-h1 { text-align: center; } .rb-home .hero-sub { margin-left: auto; margin-right: auto; text-align: center; } .rb-home .hero-actions { justify-content: center; } .rb-home .hero-stats { justify-content: center; } .rb-home .how-grid { grid-template-columns: 1fr; } .rb-home .how-visual { display: none; } .rb-home .pricing-grid { grid-template-columns: 1fr; max-width: 420px; margin-left: auto; margin-right: auto; } .rb-home .rb-footer { grid-template-columns: 1fr 1fr; } .rb-home .nav-links { display: none; } .rb-home .mobile-toggle { display: flex; } .rb-home .section { padding: 4rem 1.5rem; } } @media (max-width: 560px) { .rb-home .rb-nav { padding: 0 1.25rem; } .rb-home .rb-footer { grid-template-columns: 1fr; gap: 2rem; text-align: center; } .rb-home .rb-footer .footer-desc { margin: 0 auto; } .rb-home .rb-footer .footer-links { align-items: center; } .rb-home .hero-stats { gap: 1.5rem; } } @media screen and (max-width: 782px) { .rb-home.admin-bar #masthead > .rb-announcement { top: 46px; } .rb-home.admin-bar .rb-nav { top: 76px; } }