/* ============================================================ RR Chokhani Stock Brokers Pvt Ltd.— Custom Stylesheet Bootstrap 5.3 base | Custom design layer on top ============================================================ */ /* ── Google Fonts ─────────────────────────────────────────── */ @import url('https://fonts.googleapis.com/css2?family=Playfair+Display:wght@700;800&family=DM+Sans:wght@400;500;600;700&display=swap'); /* ── CSS Design Tokens ────────────────────────────────────── */ :root { /* Brand */ --rrc-red: #C8102E; --rrc-red-dark: #9B0C22; --rrc-red-light: #F9E3E7; --rrc-red-mid: #E63950; --rrc-navy: #060d14; --rrc-navy-mid: #1A2E45; --rrc-gold: #B8962E; --rrc-gold-light: #FDF6E3; /* Neutrals */ --rrc-white: #FFFFFF; --rrc-off-white: #F8F9FB; --rrc-gray-100: #F1F3F5; --rrc-gray-200: #E2E6EA; --rrc-gray-400: #A0AABA; --rrc-gray-600: #5A6472; --rrc-gray-800: #2D3340; /* Typography */ --font-display: 'DM Sans', Georgia, serif; --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; /* Spacing */ --section-py: 3rem; --card-radius: 16px; --btn-radius: 8px; /* Shadows */ --shadow-sm: 0 2px 8px rgba(13, 27, 42, .06); --shadow-md: 0 6px 24px rgba(13, 27, 42, .10); --shadow-lg: 0 16px 48px rgba(13, 27, 42, .14); /* Transitions */ --trans: all .22s ease; /* Focus */ --focus-ring: 0 0 0 3px rgba(200, 16, 46, .35); /* Font scale (accessibility) */ --font-scale: 1; } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ DARK-MODE TOKEN OVERRIDES All existing light-mode tokens are defined in styles.css. These rules activate only when . ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ [data-theme="dark"] { --rrc-white: #e8edf2; --rrc-off-white: #111d2a; --rrc-gray-100: #162030; --rrc-gray-200: #243447; --rrc-gray-400: #5d7a96; --rrc-gray-600: #8fa3b8; --rrc-gray-800: #c8d8e8; --rrc-red-light: rgba(200,16,46,.18); --rrc-navy: #0a1520; --rrc-navy-mid: #0f1e2e; --shadow-sm: 0 2px 8px rgba(0,0,0,.35); --shadow-md: 0 6px 24px rgba(0,0,0,.45); --shadow-lg: 0 16px 48px rgba(0,0,0,.55); } /* Global body background & text in dark mode */ [data-theme="dark"] body { background-color: #0f1923; color: #c8d8e8; } /* Headings */ [data-theme="dark"] h1, [data-theme="dark"] h2, [data-theme="dark"] h3, [data-theme="dark"] h4 { color: #dde8f2; } /* Body transition */ body { transition: background-color .3s ease, color .3s ease; } /* ── Regulatory banner ─────────────────────────────── */ [data-theme="dark"] .reg-banner { background: #1c1400; border-color: #b8962e; color: #d4ad40; } /* ── Site header / navbar ──────────────────────────── */ [data-theme="dark"] .site-header { background: rgba(10,18,28,.96); border-color: #243447; } [data-theme="dark"] .navbar-nav .nav-link { color: #c8d8e8 !important; } [data-theme="dark"] .navbar-nav .nav-link:hover, [data-theme="dark"] .navbar-nav .nav-link.active { background: rgba(200,16,46,.2); color: #ff8080 !important; } [data-theme="dark"] .navbar-toggler { border-color: #243447 !important; } [data-theme="dark"] .navbar-toggler svg { stroke: #c8d8e8; } /* ── Accessibility buttons ─────────────────────────── */ /*[data-theme="dark"] .a11y-btn { background: #162030; border-color: #243447; color: #c8d8e8; } [data-theme="dark"] .a11y-btn:hover { background: rgba(200,16,46,.25); color: #ff8080; border-color: rgba(200,16,46,.5); } [data-theme="dark"] .a11y-btn.active { background: var(--rrc-red); color: #fff; border-color: var(--rrc-red); }*/ /* ── Cards ─────────────────────────────────────────── */ [data-theme="dark"] .rrc-card { background: #162030; border-color: #243447; } [data-theme="dark"] .rrc-card h3 { color: #dde8f2; } [data-theme="dark"] .rrc-card p, [data-theme="dark"] .rrc-card button { color: #8fa3b8; } [data-theme="dark"] .rrc-card .card-icon { background: rgba(200,16,46,.2); } /* ── Section backgrounds ───────────────────────────── */ [data-theme="dark"] .bg-light-rrc { background: #111d2a; } [data-theme="dark"] .section-divider { background: #243447; } /* ── Eyebrow pill ──────────────────────────────────── */ [data-theme="dark"] .eyebrow { background: rgba(200,16,46,.2); color: #ff8080; } /* ── Notice boxes ──────────────────────────────────── */ [data-theme="dark"] .notice-box.warning { background: #231900; border-color: #f59e0b; color: #fcd34d; } [data-theme="dark"] .notice-box.info { background: #0c1d36; border-color: #3b82f6; color: #93c5fd; } [data-theme="dark"] .notice-box.success { background: #042818; border-color: #10b981; color: #6ee7b7; } [data-theme="dark"] .notice-box a { color: inherit; } /* ── Checklist bullets ─────────────────────────────── */ [data-theme="dark"] .check-list li { color: #c8d8e8; } /* ── Footer (already dark navy, lighten links slightly) */ [data-theme="dark"] .site-footer { background: #060d14; } [data-theme="dark"] .footer-links a { color: rgba(200,216,232,.65); } [data-theme="dark"] .footer-links a:hover { color: #fff; } [data-theme="dark"] .footer-bottom { border-color: rgba(255,255,255,.08); color: rgb(217 217 217); } [data-theme="dark"] .footer-bottom a { color: rgba(200,216,232,.55); } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ FIX 1 — NAVBAR RESPONSIVE BEHAVIOUR Desktop (≥992px): nav links always visible in a row. Mobile (<992px): collapsed, hamburger toggles them. ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ /* Hamburger icon colour */ .navbar-toggler { background: transparent; } .navbar-toggler svg { stroke: var(--rrc-gray-800); display: block; } .navbar-toggler:focus { box-shadow: 0 0 0 3px rgba(200,16,46,.35); outline: none; } /* On desktop: force collapse open + hide toggler */ @media (min-width: 992px) { #primary-nav { display: flex !important; } .navbar-toggler { display: none !important; } } /* On mobile: style the expanded panel */ @media (max-width: 991.98px) { #primary-nav { background: var(--rrc-white); border-top: 1px solid var(--rrc-gray-200); padding: .5rem 0 .75rem; margin-top: .2rem; } [data-theme="dark"] #primary-nav { background: #0f1923; border-color: #243447; } .navbar-nav .nav-link { padding: .6rem 1rem !important; border-radius: 0 !important; } /* Show a11y toolbar below nav items on mobile */ .a11y-toolbar { display: flex !important; padding: .5rem 1rem .25rem; border-top: 1px solid var(--rrc-gray-200); margin-top: .35rem; gap: .35rem; } [data-theme="dark"] .a11y-toolbar { border-color: #243447; } } /* ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ ESUOR footer badge ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ */ .esuor-badge { display: inline-flex; align-items: center; opacity: .8; transition: opacity .2s ease; margin-left: .5rem; vertical-align: middle; } .esuor-badge:hover { opacity: 1; } .esuor-badge img { height: 16px; width: auto; display: inline-block; } /* ── Minor responsive tweaks ───────────────────────── */ @media (max-width: 991.98px) { .hero-section { padding: 3.5rem 0 3rem !important; } } @media (max-width: 767.98px) { .hero-title { font-size: 2rem !important; } .cta-banner { padding: 2.5rem 1.5rem !important; } } /* ── Base Reset ───────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; font-size: calc(16px * var(--font-scale)); } body { font-family: var(--font-body); color: var(--rrc-gray-800); background-color: var(--rrc-white); line-height: 1.7; margin: 0; -webkit-font-smoothing: antialiased; } img { max-width: 100%; height: auto; display: block; } a { color: var(--rrc-red); text-decoration: underline; text-underline-offset: 3px; transition: var(--trans); } a:hover { color: var(--rrc-red-dark); text-decoration: underline; } /* Focus rings (WCAG 2.4.7) */ a:focus-visible, button:focus-visible, input:focus-visible, select:focus-visible, textarea:focus-visible, summary:focus-visible { /*outline: none; box-shadow: var(--focus-ring); border-radius: 4px;*/ outline: 2px solid #ffffff; outline-offset: 2px; box-shadow: 0 0 0 3px #C8102E; } /* ── Skip Link ────────────────────────────────────────────── */ .skip-link { position: absolute; top: -100px; left: 1rem; z-index: 10000; background: var(--rrc-navy); color: var(--rrc-white); padding: .75rem 1.25rem; border-radius: var(--btn-radius); font-weight: 700; transition: top .2s; } .skip-link:focus { top: 1rem; color: var(--rrc-white); text-decoration: none; } /* ── Typography Scale ─────────────────────────────────────── */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-display); line-height: 1.2; color: var(--rrc-navy); margin-top: 0; } .display-heading { font-family: var(--font-display); font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; line-height: 1.1; } .section-title { font-size: clamp(1.75rem, 3vw, 1.5rem); font-weight: 700; } .section-subtitle { font-size: 1.05rem; color: var(--rrc-gray-600); max-width: 58ch; } .eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-family: var(--font-body); font-size: .8rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--rrc-red); padding: .35rem .85rem; background: var(--rrc-red-light); border-radius: 100px; margin-bottom: 1rem; border: 0; } /* ── Header & Navbar ──────────────────────────────────────── */ .site-header { position: sticky; top: 0; z-index: 1000; background: rgba(255,255,255,.96); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid var(--rrc-gray-200); box-shadow: var(--shadow-sm); } .navbar-brand img { height: 52px; width: auto; } .navbar-nav .nav-link { font-family: var(--font-body); font-weight: 600; font-size: .92rem; color: var(--rrc-gray-800) !important; padding: .55rem .7rem !important; border-radius: 6px; transition: var(--trans); } .navbar-nav .nav-link:hover, .navbar-nav .nav-link.active { color: var(--rrc-red) !important; background: var(--rrc-red-light); } /* Accessibility toolbar in navbar */ .a11y-toolbar { display: flex; align-items: center; gap: .35rem; } /*.a11y-btn { background: var(--rrc-gray-100); border: 1px solid var(--rrc-gray-200); border-radius: 6px; color: var(--rrc-gray-800); cursor: pointer; font-family: var(--font-body); font-size: .78rem; font-weight: 700; min-height: 36px; min-width: 36px; padding: .2rem .5rem; transition: var(--trans); line-height: 1; } .a11y-btn:hover { background: var(--rrc-red-light); color: var(--rrc-red); border-color: var(--rrc-red); } .a11y-btn.active { background: var(--rrc-red); color: var(--rrc-white); border-color: var(--rrc-red); }*/ /* ── Hero Section ─────────────────────────────────────────── */ .hero-section { background: linear-gradient(135deg, var(--rrc-navy) 0%, var(--rrc-navy-mid) 50%, #2A0A12 100%); position: relative; overflow: hidden; padding: 5.5rem 0 4.5rem; } /* Decorative background shapes */ .hero-section::before { content: ''; position: absolute; top: -120px; right: -120px; width: 480px; height: 480px; background: radial-gradient(circle, rgba(200,16,46,.25) 0%, transparent 70%); pointer-events: none; } .hero-section::after { content: ''; position: absolute; bottom: -80px; left: -80px; width: 360px; height: 360px; background: radial-gradient(circle, rgba(184,150,46,.12) 0%, transparent 70%); pointer-events: none; } .hero-eyebrow { display: inline-flex; align-items: center; gap: .4rem; background: rgba(200,16,46,.18); border: 1px solid rgba(200,16,46,.4); color: #FFA0B0; font-size: .78rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; padding: .4rem 1rem; border-radius: 100px; margin-bottom: 1.25rem; } .hero-title { font-family: var(--font-display); font-size: clamp(2.2rem, 5vw, 2.5rem); font-weight: 800; line-height: 1.1; color: var(--rrc-white); margin-bottom: 1.25rem; } .hero-title span { color: var(--rrc-red-mid); } .hero-description { font-size: 1.05rem; color: rgba(255,255,255,.8); max-width: 54ch; margin-bottom: 2rem; line-height: 1.8; } .hero-cta-group { display: flex; gap: .85rem; flex-wrap: wrap; align-items: center; } .hero-card { background: rgba(255,255,255,.07); border: 1px solid rgba(255,255,255,.12); border-radius: var(--card-radius); padding: 1.5rem; backdrop-filter: blur(8px); color: var(--rrc-white); width: 100%; } .hero-card-title { font-family: var(--font-body); font-size: .75rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: rgba(255,255,255,.55); margin-bottom: .75rem; } .hero-stat { font-family: var(--font-display); font-size: 2rem; font-weight: 700; color: var(--rrc-white); line-height: 1; margin-bottom: .25rem; } .hero-stat-label { font-size: .85rem; color: rgba(255,255,255,.65); } .hero-reg-box { background: rgba(255,255,255,.05); border: 1px solid rgba(255,255,255,.1); border-radius: var(--card-radius); padding: 1.5rem; margin-top: 1rem; } .reg-tag { display: inline-block; background: rgba(200,16,46,.25); border: 1px solid rgba(200,16,46,.5); color: #FFB0BC; font-size: .75rem; font-weight: 700; padding: .25rem .65rem; border-radius: 4px; margin: .2rem .2rem 0 0; } /* ── Buttons ──────────────────────────────────────────────── */ .btn-rrc-primary { background: var(--rrc-red); color: var(--rrc-white) !important; border: 2px solid var(--rrc-red); border-radius: var(--btn-radius); font-family: var(--font-body); font-weight: 700; font-size: .92rem; padding: .75rem 1.6rem; transition: var(--trans); text-decoration: none !important; display: inline-flex; align-items: center; gap: .4rem; } .btn-rrc-primary:hover { background: var(--rrc-red-dark); border-color: var(--rrc-red-dark); color: var(--rrc-white) !important; transform: translateY(-1px); box-shadow: 0 6px 20px rgba(200,16,46,.35); } .btn-rrc-outline { background: transparent; color: var(--rrc-white) !important; border: 2px solid rgba(255,255,255,.4); border-radius: var(--btn-radius); font-family: var(--font-body); font-weight: 700; font-size: .92rem; padding: .75rem 1.6rem; transition: var(--trans); text-decoration: none !important; display: inline-flex; align-items: center; gap: .4rem; } .btn-rrc-outline:hover { background: rgba(255,255,255,.1); border-color: rgba(255,255,255,.7); color: var(--rrc-white) !important; } .btn-rrc-light { background: var(--rrc-white); color: var(--rrc-red) !important; border: 2px solid var(--rrc-gray-200); border-radius: var(--btn-radius); font-family: var(--font-body); font-weight: 700; font-size: .92rem; padding: .75rem 1.6rem; transition: var(--trans); text-decoration: none !important; display: inline-flex; align-items: center; gap: .4rem; } .btn-rrc-light:hover { background: var(--rrc-red-light); border-color: var(--rrc-red); color: var(--rrc-red-dark) !important; transform: translateY(-1px); } /* ── Section Utilities ────────────────────────────────────── */ .section-py { padding-top: var(--section-py); padding-bottom: var(--section-py); } .section-py-sm { padding-top: 3rem; padding-bottom: 3rem; } .bg-light-rrc { background: var(--rrc-off-white); } .bg-navy { background: var(--rrc-navy); } .bg-red { background: var(--rrc-red); } /* ── Cards ────────────────────────────────────────────────── */ .rrc-card { background: var(--rrc-white); border: 1px solid var(--rrc-gray-200); border-radius: var(--card-radius); padding: 2rem; box-shadow: var(--shadow-sm); transition: var(--trans); height: 100%; } .rrc-card:hover { box-shadow: var(--shadow-md); transform: translateY(-3px); border-color: rgba(200,16,46,.3); } .rrc-card .card-icon { width: 52px; height: 52px; background: var(--rrc-red-light); border-radius: 12px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; } .rrc-card .card-icon svg { width: 26px; height: 26px; color: var(--rrc-red); } .rrc-card h3 { font-size: 1.1rem; font-weight: 700; color: var(--rrc-navy); margin-bottom: .6rem; } .rrc-card p, .rrc-card button { font-size: .95rem; color: var(--rrc-gray-600); margin: 0; } .rrc-card button{ background:none; border:0; text-align: left; } .rrc-card .card-link { display: inline-flex; align-items: center; gap: .35rem; font-weight: 700; font-size: .88rem; color: var(--rrc-red); margin-top: 1rem; transition: var(--trans); } .rrc-card .card-link:hover { gap: .6rem; text-decoration: none; } /* Feature card (navy bg) */ .rrc-card-dark { background: var(--rrc-navy); border-color: rgba(255,255,255,.08); color: var(--rrc-white); } .rrc-card-dark h3 { color: var(--rrc-white); } .rrc-card-dark p { color: rgba(255,255,255,.7); } .rrc-card-dark .card-icon { background: rgba(200,16,46,.2); } .rrc-card-dark .card-icon svg { color: var(--rrc-red-mid); } .rrc-card-dark:hover { border-color: rgba(200,16,46,.4); } /* Stats strip */ .stat-item strong { display: block; font-family: var(--font-display); font-size: 2.5rem; font-weight: 800; color: var(--rrc-red); line-height: 1.1; } .stat-item span, .stat-item button { font-size: .9rem; color: var(--rrc-gray-600); font-weight: 500; } .stat-item button { border: 0; background: none; } .stat-divider { width: 1px; background: var(--rrc-gray-200); align-self: stretch; margin: .5rem 0; } /* ── Notice Boxes ─────────────────────────────────────────── */ .notice-box { border-radius: var(--card-radius); padding: 1.5rem .8rem; border-left: 5px solid; height: 100%; } .notice-box.warning { background: #FFF8E1; border-color: #F59E0B; color: #78350F; } .notice-box.info { /* background: #EFF6FF;*/ border-color: #3be0f6; /* color: #1E3A5F;*/ background: #e6fffd; color: #000; } .notice-box.danger { background: var(--rrc-red-light); border-color: var(--rrc-red); color: var(--rrc-navy); } .notice-box.success { background: #ECFDF5; border-color: #10B981; color: #064E3B; } .notice-box h3, .notice-box h2 { font-size: 1rem; font-weight: 700; margin-bottom: .65rem; color: inherit; } .notice-box p, .notice-box li { font-size: .93rem; margin-bottom: .25rem; } .notice-box ul { padding-left: 1.2rem; margin: 0; } /* ── Page Hero (inner pages) ──────────────────────────────── */ .page-hero { background: linear-gradient(135deg, var(--rrc-navy) 0%, var(--rrc-navy-mid) 100%); padding: 3.5rem 0 2.5rem; } .page-hero .breadcrumb-rrc { display: flex; gap: .5rem; align-items: center; font-size: .85rem; color: rgba(255,255,255,.6); margin-bottom: 1rem; flex-wrap: wrap; } .page-hero .breadcrumb-rrc a { color: rgba(255,255,255,.75); } .page-hero .breadcrumb-rrc a:hover { color: var(--rrc-white); text-decoration: none; } .page-hero .breadcrumb-sep { color: rgba(255,255,255,.3); } .page-hero h1 { color: var(--rrc-white); /* font-size: clamp(2rem, 4vw, 3rem);*/ font-size: clamp(1rem, 2vw, 2rem); margin-bottom: .75rem; } .page-hero .lead { color: rgba(255,255,255,.8); font-size: 1.05rem; max-width: 58ch; } /* Tags under page hero */ .page-tags { display: flex; gap: .5rem; flex-wrap: wrap; margin-top: 1.25rem; } .page-tag { background: rgba(255,255,255,.1); border: 1px solid rgba(255,255,255,.2); color: rgba(255,255,255,.9); font-size: .8rem; font-weight: 600; padding: .3rem .75rem; border-radius: 100px; } /* ── Timeline ─────────────────────────────────────────────── */ .timeline-item { position: relative; padding-left: 2.25rem; padding-bottom: 2rem; } .timeline-item::before { content: ''; position: absolute; left: 9px; top: 6px; width: 2px; height: calc(100% - 6px); background: var(--rrc-gray-200); } .timeline-item:last-child::before { display: none; } .timeline-dot { position: absolute; left: 0; top: 4px; width: 20px; height: 20px; background: var(--rrc-red); border-radius: 50%; border: 3px solid var(--rrc-red-light); } .timeline-item h4 { font-size: 1rem; font-weight: 700; color: var(--rrc-navy); margin-bottom: .35rem; } .timeline-item p { font-size: .9rem; color: var(--rrc-gray-600); margin: 0; } /* ── FAQ Accordion ────────────────────────────────────────── */ .faq-item { border: 1px solid var(--rrc-gray-200); border-radius: 10px; overflow: hidden; margin-bottom: .6rem; transition: var(--trans); } .faq-item:hover { border-color: rgba(200,16,46,.3); } .faq-item summary { list-style: none; cursor: pointer; padding: 1.1rem 1.4rem; font-weight: 700; font-size: .97rem; color: var(--rrc-navy); display: flex; justify-content: space-between; align-items: center; gap: 1rem; background: var(--rrc-white); transition: var(--trans); } .faq-item summary:focus-visible { outline: 2px solid #005fcc; outline-offset: 3px; } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: '+'; font-size: 1.3rem; font-weight: 300; color: var(--rrc-red); flex-shrink: 0; transition: var(--trans); } .faq-item[open] summary { background: var(--rrc-red-light); color: var(--rrc-red-dark); } .faq-item[open] summary::after { transform: rotate(45deg); } .faq-body { padding: 1rem 1.4rem 1.25rem; font-size: .95rem; color: var(--rrc-gray-600); } /* ── Policy / Doc List ────────────────────────────────────── */ .doc-card { display: flex; align-items: center; gap: 1rem; padding: 1rem 1.25rem; background: var(--rrc-white); border: 1px solid var(--rrc-gray-200); border-radius: 10px; transition: var(--trans); text-decoration: none; color: var(--rrc-navy); } .doc-card:hover { border-color: var(--rrc-red); background: var(--rrc-red-light); transform: translateX(4px); color: var(--rrc-red-dark); text-decoration: none; } .doc-icon { width: 42px; height: 42px; background: var(--rrc-red-light); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .doc-icon svg { width: 20px; height: 20px; color: var(--rrc-red); } .doc-name { font-weight: 700; font-size: .95rem; } .doc-arrow { margin-left: auto; color: var(--rrc-red); flex-shrink: 0; } /* ── Contact Form ─────────────────────────────────────────── */ .form-group label { font-weight: 700; font-size: .88rem; color: var(--rrc-navy); margin-bottom: .4rem; display: block; } .form-control-rrc { width: 100%; padding: .75rem 1rem; border: 1.5px solid var(--rrc-gray-200); border-radius: 8px; font-family: var(--font-body); font-size: .95rem; color: var(--rrc-gray-800); background: var(--rrc-white); transition: var(--trans); } [data-theme="dark"] .form-group label {color: var(--rrc-white) } .form-control-rrc:focus { outline: none; border-color: var(--rrc-red); box-shadow: var(--focus-ring); } textarea.form-control-rrc { min-height: 130px; resize: vertical; } .required-star { color: var(--rrc-red); } .field-hint { font-size: .82rem; color: var(--rrc-gray-400); margin-top: .25rem; } /* ── Contact Info Card ────────────────────────────────────── */ .contact-info-card { background: var(--rrc-navy-mid); border-radius: var(--card-radius); padding: 2.25rem; color: var(--rrc-white); height: 100%; } .contact-info-card h3 { color: var(--rrc-white); margin-bottom: 1.5rem; } .contact-row { display: flex; gap: 1rem; align-items: flex-start; padding: .9rem 0; border-bottom: 1px solid rgba(255,255,255,.1); } .contact-row:last-child { border-bottom: none; } .contact-icon { width: 40px; height: 40px; background: rgba(200,16,46,.2); border-radius: 8px; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-icon svg { width: 18px; height: 18px; color: var(--rrc-red-mid); } .contact-row dt { font-size: .8rem; color: rgba(255,255,255,.55); font-weight: 600; margin-bottom: .2rem; } .contact-row dd { font-size: .92rem; color: var(--rrc-white); margin: 0; } .contact-row dd a { color: rgba(255,255,255,.85); } .contact-row dd a:hover { color: var(--rrc-white); text-decoration: none; } /*search icon */ /* ── Nav Search — always-visible input style ──────────────── */ .header-search-container { display: flex; align-items: center; } .nav-search-form { display: flex; align-items: center; border: 1.5px solid var(--rrc-red); border-radius: 6px; background: var(--rrc-white); height: 36px; overflow: hidden; transition: box-shadow .2s ease; } .nav-search-form:focus-within { box-shadow: 0 0 0 3px rgba(200, 16, 46, .15); } .nav-search-form label { display: flex; flex: 1; min-width: 0; } .nav-search-input { border: none; background: transparent; padding: 0 .6rem; font-family: var(--font-body); font-size: .83rem; font-weight: 400; color: var(--rrc-gray-800); outline: none; width: 170px; } .nav-search-input:focus-visible { box-shadow: none; } .nav-search-input::placeholder { color: var(--rrc-gray-400); font-size: .82rem; } .nav-search-input::-webkit-search-decoration, .nav-search-input::-webkit-search-cancel-button { display: none; } .nav-search-submit { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; flex-shrink: 0; border: none; border-left: 1.5px solid var(--rrc-red); background: var(--rrc-red-light); color: var(--rrc-red); cursor: pointer; transition: background .2s ease; padding: 0; } .nav-search-submit svg { fill: currentColor; display: block; } .nav-search-submit:hover { background: var(--rrc-red); color: var(--rrc-white); } /* Dark mode */ [data-theme="dark"] .nav-search-form { background: #162030; border-color: var(--rrc-red); } [data-theme="dark"] .nav-search-input { color: #c8d8e8; } [data-theme="dark"] .nav-search-input::placeholder { color: #3d5570; } [data-theme="dark"] .nav-search-submit { background: rgba(200,16,46,.2); border-color: var(--rrc-red); } [data-theme="dark"] .nav-search-submit:hover { background: var(--rrc-red); color: #fff; } /* Mobile — full width inside collapsed nav */ @media (max-width: 991.98px) { .header-search-container { padding: .5rem 1rem .5rem; border-top: 1px solid var(--rrc-gray-200); margin-top: .35rem; width: 100%; } .nav-search-form { width: 100%; } .nav-search-input { width: 100%; flex: 1; } [data-theme="dark"] .header-search-container { border-color: #243447; } } /* ── Table ────────────────────────────────────────────────── */ .rrc-table-wrap { border-radius: var(--card-radius); border: 1px solid var(--rrc-gray-200); overflow: hidden; overflow-x: auto; } .rrc-table { width: 100%; border-collapse: collapse; min-width: 600px; } .rrc-table caption { padding: 1rem 1.25rem; text-align: left; font-weight: 700; font-size: .92rem; color: var(--rrc-navy); background: var(--rrc-off-white); border-bottom: 1px solid var(--rrc-gray-200); } .rrc-table th { background: var(--rrc-navy); color: var(--rrc-white); font-weight: 600; font-size: .88rem; padding: .85rem 1.1rem; text-align: left; } .rrc-table td { padding: .85rem 1.1rem; font-size: .9rem; border-bottom: 1px solid var(--rrc-gray-200); vertical-align: top; } .rrc-table tbody tr:hover { background: var(--rrc-red-light); } /* ── Badges ───────────────────────────────────────────────── */ .badge-rrc { display: inline-block; font-size: .75rem; font-weight: 700; padding: .25rem .6rem; border-radius: 4px; letter-spacing: .03em; border: 0; } .badge-red { background: var(--rrc-red-light); color: var(--rrc-red-dark); } .badge-navy { background: rgba(13,27,42,.08); } .badge-gold { background: var(--rrc-gold-light); color: #7A5C10; } .badge-green { background: #ECFDF5; color: #065F46; } /* ── CTA Banner ───────────────────────────────────────────── */ .cta-banner { background: linear-gradient(135deg, var(--rrc-red-dark) 0%, var(--rrc-red) 60%, #E63950 100%); border-radius: 20px; padding: 3.5rem 3rem; text-align: center; position: relative; overflow: hidden; } .cta-banner::before { content: ''; position: absolute; top: -60px; right: -60px; width: 280px; height: 280px; background: rgba(255,255,255,.06); border-radius: 50%; pointer-events: none; } .cta-banner h2 { color: var(--rrc-white); font-size: clamp(1.6rem, 3vw, 2.2rem); } .cta-banner p { color: rgba(255,255,255,.85); font-size: 1.05rem; } /* ── Checklist ────────────────────────────────────────────── */ .check-list { list-style: none; padding: 0; margin: 0; } .check-list li { display: flex; gap: .75rem; align-items: flex-start; padding: .45rem 0; font-size: .95rem; color: var(--rrc-gray-800); } .check-list li::before { content: ''; width: 18px; height: 18px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='%23C8102E'%3E%3Ccircle cx='10' cy='10' r='10' fill='%23F9E3E7'/%3E%3Cpath d='M6 10l3 3 5-5' stroke='%23C8102E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat; flex-shrink: 0; margin-top: .15rem; } .check-list-dark li { color: rgba(255,255,255,.85); } .check-list-dark li::before { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='10' fill='rgba(200%2C16%2C46%2C.3)'/%3E%3Cpath d='M6 10l3 3 5-5' stroke='%23FF8080' stroke-width='2' stroke-linecap='round' stroke-linejoin='round' fill='none'/%3E%3C/svg%3E") center / contain no-repeat; } /* ── Divider ──────────────────────────────────────────────── */ .section-divider { height: 1px; background: var(--rrc-gray-200); margin: 0; } /* ── Step Numbers ─────────────────────────────────────────── */ .step-num { width: 44px; height: 44px; background: var(--rrc-red); color: var(--rrc-white); border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 1.05rem; flex-shrink: 0; } /* ── Footer ───────────────────────────────────────────────── */ .site-footer { background: var(--rrc-navy); color: rgba(255,255,255,.8); padding-top: 4rem; } .site-footer, .site-footer p, .site-footer span, .site-footer li, .site-footer a, .site-footer small { color: #fafafa; } .site-footer a:hover { color: #ffffff; } .footer-logo img { height: 50px; width: auto; filter: brightness(0) invert(1); opacity: .9; } .footer-tagline { font-size: .9rem; color: rgba(255,255,255,.55); margin-top: .75rem; max-width: 34ch; } .footer-heading { font-family: var(--font-body); font-size: .8rem; font-weight: 800; letter-spacing: .1em; text-transform: uppercase; color: #dde8f2; margin-bottom: 1rem; } .footer-links { list-style: none; padding: 0; margin: 0; display: grid; gap: .45rem; } .footer-links a { font-size: .9rem; color: rgba(255,255,255,.7); /* text-decoration: none;*/ transition: var(--trans); } .footer-links a:hover { color: var(--rrc-white); } .footer-contact-item { display: flex; gap: .6rem; align-items: flex-start; font-size: .9rem; color: rgba(255,255,255,.7); margin-bottom: .65rem; } .footer-contact-item svg { flex-shrink: 0; margin-top: 2px; } .footer-contact-item a { color: rgba(255,255,255,.7); } .footer-contact-item a:hover { color: var(--rrc-white); } .footer-bottom { border-top: 1px solid rgba(255,255,255,.1); padding: 1.25rem 0; margin-top: 3rem; font-size: .82rem; color: rgba(255,255,255,.4); } .footer-bottom a { color: rgba(255,255,255,.55); } .footer-bottom a:hover { color: var(--rrc-white); } /* ── Regulatory Banner ────────────────────────────────────── */ .reg-banner { background: var(--rrc-gold-light); border-top: 3px solid var(--rrc-gold); padding: .75rem 0; font-size: .82rem; color: #5C4108; } /* ── Responsive ───────────────────────────────────────────── */ @media (max-width: 991.98px) { .hero-section { padding: 3.5rem 0 3rem; } :root { --section-py: 3.5rem; } } @media (max-width: 767.98px) { .hero-title { font-size: 2rem; } .cta-banner { padding: 2.5rem 1.5rem; } :root { --section-py: 2.5rem; } } /* ── Reduced Motion ───────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { transition: none !important; animation: none !important; } } /* ── Print ────────────────────────────────────────────────── */ @media print { .site-header, .site-footer, .a11y-toolbar, .hero-section { display: none; } body { color: #000; background: #fff; } a { color: #000; } } /*for investor awareness*/ /* Section block */ .ia-section { margin-bottom: 2.5rem; } .ia-section:last-child { margin-bottom: 0; } /* Section header */ .ia-section-header { display: flex; align-items: center; gap: .75rem; padding-bottom: .75rem; border-bottom: 2px solid var(--rrc-red, #C8102E); margin-bottom: 1rem; } .ia-section-icon { width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0; background: rgba(200,16,46,.08); display: flex; align-items: center; justify-content: center; color: var(--rrc-red, #C8102E); font-size: 1.1rem; } [data-theme="dark"] .ia-section-icon { background: rgba(200,16,46,.18); } .ia-section-title { font-weight: 700; margin: 0; color: var(--rrc-dark, #0d1b2a); } [data-theme="dark"] .ia-section-title { color: var(--rrc-light, #f5f6fa); } .ia-section-desc { font-size: .8rem; color: var(--rrc-gray-600, #6b7280); margin: .15rem 0 0; line-height: 1.4; } .ia-section-badge { margin-left: auto; flex-shrink: 0; font-size: .7rem; font-weight: 700; padding: .2rem .6rem; background: var(--rrc-red, #C8102E); color: #fff; border-radius: 999px; white-space: nowrap; } /* Table */ .ia-table { width: 100%; border-collapse: collapse; font-size: .875rem; } .ia-table thead tr { background: var(--rrc-gray-100, #f3f4f6); } [data-theme="dark"] .ia-table thead tr { background: rgba(255,255,255,.06); } .ia-table th { padding: .6rem 1rem; text-align: left; font-size: .72rem; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--rrc-gray-600, #6b7280); white-space: nowrap; border-bottom: 1px solid var(--rrc-gray-200, #e5e7eb); } .ia-table td { padding: 9px 9px; border-bottom: 1px solid var(--rrc-gray-200, #e5e7eb); color: var(--rrc-dark, #0d1b2a); vertical-align: middle; line-height: 1.5; } [data-theme="dark"] .ia-table td { color: var(--rrc-light, #f5f6fa); border-bottom-color: rgba(255,255,255,.07); } .ia-table tbody tr:last-child td { border-bottom: none; } .ia-table tbody tr:hover td { background: var(--rrc-gray-50, #fafbfc); } [data-theme="dark"] .ia-table tbody tr:hover td { background: rgba(255,255,255,.03); } .ia-table .sr-col { width: 56px; color: var(--rrc-gray-500, #9ca3af); font-size: .8rem; text-align: center; } .ia-table .dl-col { width: 100px; text-align: center; white-space: nowrap; } /* Card wrapper */ .ia-table-wrap { border: 1px solid var(--rrc-gray-200, #e5e7eb); border-radius: 10px; overflow: hidden; overflow-x: auto; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.05); } [data-theme="dark"] .ia-table-wrap { background: var(--rrc-card-bg, #1e2536); border-color: rgba(255,255,255,.08); } /* Download buttons */ .ia-dl-btn { display: inline-flex; align-items: center; gap: .3rem; padding: .28rem .65rem; border-radius: 5px; /* font-size: .76rem;*/ font-weight: 600; /* background: var(--rrc-red, #C8102E);*/ color: var(--rrc-red); text-decoration: none; transition: opacity .15s, background .15s; white-space: nowrap; line-height: 0; } .ia-dl-btn:hover { opacity: .85; color: #C8102E; } .ia-dl-btn + .ia-dl-btn { margin-left: .3rem; } .ia-dl-btn i { font-size: 1.5rem; } /* Not available */ .ia-dl-na { font-size: .78rem; color: var(--rrc-gray-400, #d1d5db); } /* Responsive */ @media (max-width: 576px) { .ia-table th, .ia-table td { padding: .55rem .75rem; } .ia-table .dl-col { width: auto; text-align: left; } .ia-section-badge { display: none; } }