/* ===================================================================== Roliner - Light theme Applies only when has class `r-light-page`. Mirrors the venture light theme (background, nav, marquee, footer). ===================================================================== */ /* ---------- Body background ---------- */ body.r-light-page { background: #f5f5f5; color: #111; } /* ---------- Typography on light ---------- */ body.r-light-page .page-content { color: #111; } body.r-light-page .section-hero h1 { color: #111; font-family: 'Montserrat', 'Inter Tight', sans-serif; } body.r-light-page .section-hero p, body.r-light-page .section-block p { color: rgba(0, 0, 0, 0.6); font-family: 'Montserrat', 'Inter Tight', sans-serif; } body.r-light-page .section-block h2 { color: #111; font-family: 'Montserrat', 'Inter Tight', sans-serif; } /* ---------- Nav: use Montserrat everywhere (matches venture) ---------- */ body.r-light-page .nav-links a { font-family: 'Montserrat', sans-serif; } /* ---------- Light nav (matches venture) ---------- */ body.r-light-page .section-nav { background: transparent; } body.r-light-page .section-nav.scrolled { background: rgba(255, 255, 255, 0.7); border-color: rgba(0, 0, 0, 0.08); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); } body.r-light-page .section-nav .nav-links a, body.r-light-page .section-nav.scrolled .nav-links a { color: #888; background: transparent; border-radius: 4px; padding: 0.35rem 0.8rem; transition: background 0.25s ease, color 0.25s ease; } /* Hide the [ ] bracket decorations from shared.css */ body.r-light-page .section-nav .nav-links a::before, body.r-light-page .section-nav .nav-links a::after, body.r-light-page .section-nav.scrolled .nav-links a::before, body.r-light-page .section-nav.scrolled .nav-links a::after { display: none !important; content: none !important; } /* Hide the dot (from the old Roliner nav style) */ body.r-light-page .section-nav .nav-links a .nav-dot { display: none; } /* Hover: soft grey pill */ body.r-light-page .section-nav .nav-links a:hover, body.r-light-page .section-nav.scrolled .nav-links a:hover { background: rgba(0, 0, 0, 0.08); color: #111; } /* Active (not scrolled): dark pill, white text */ body.r-light-page .section-nav .nav-links a.active { background: #111; color: #fff; font-weight: 500; border-radius: 4px; } /* Active (scrolled): plain black text, no pill */ body.r-light-page .section-nav.scrolled .nav-links a.active { background: transparent; color: #111; font-weight: 600; border-radius: 0; } /* Hamburger bars: dark on light */ body.r-light-page .nav-hamburger span { background: #111; } /* Mobile dropdown: fully opaque light panel so the page beneath doesn't bleed through when the nav's background goes transparent during open. */ body.r-light-page .nav-dropdown { background: #f5f5f5; border-color: rgba(0, 0, 0, 0.08); } body.r-light-page .nav-dropdown a { color: #555; font-family: 'Montserrat', sans-serif; } body.r-light-page .nav-dropdown a:hover, body.r-light-page .nav-dropdown a.active { color: #111; background: rgba(0, 0, 0, 0.06); border-radius: 6px; border-bottom-color: transparent; /* Negative margin lets the rounded halo breathe around the text while keeping the text's left edge in line with the other (non-active) items. */ margin: 0 -0.8rem; padding: 0.7rem 0.8rem; } /* ---------- Light marquee (matches venture) ---------- */ body.r-light-page .marquee-section { background: #f5f5f5; } body.r-light-page .marquee-text { color: rgba(0, 0, 0, 0.4) !important; font-family: 'Montserrat', sans-serif !important; font-weight: 400 !important; letter-spacing: 0.1em !important; } body.r-light-page .marquee-section:hover .marquee-text { color: rgba(0, 0, 0, 0.6) !important; } body.r-light-page .marquee-spacer { display: inline-flex !important; align-items: center !important; justify-content: center !important; width: auto !important; height: auto !important; vertical-align: middle; } body.r-light-page .marquee-spacer .mhex { clip-path: none !important; border-radius: 60% 40% 50% 45% / 50% 60% 40% 55% !important; position: static !important; left: auto !important; top: auto !important; background: rgba(0, 0, 0, 0.3) !important; } body.r-light-page .marquee-section:hover .mhex { background: rgba(0, 0, 0, 0.5) !important; } /* ---------- Footer override (dark footer on light page) ---------- */ body.r-light-page .footer { background: #111; }