/* BollyTube marketing site — theme-aware light / dark (matches app) */ /* Dark theme tokens (app night surfaces) */ :root, [data-theme="dark"] { color-scheme: dark; --bg: #0c0c0e; --bg-elevated: #121212; --bg-card: #1a1a1e; --bg-nav: rgba(12, 12, 14, 0.88); --bg-footer: #09090b; --text: #f3f4f6; --text-muted: #9ca3af; --heading: #f9fafb; --brand: #0ec466; --brand-hover: #0ba855; --brand-on: #04140c; --brand-soft: rgba(14, 196, 102, 0.16); --border: rgba(255, 255, 255, 0.1); --shadow: 0 18px 50px rgba(0, 0, 0, 0.4); --section-muted: linear-gradient(180deg, rgba(18, 18, 18, 0.9), transparent); --code-bg: rgba(255, 255, 255, 0.08); --nav-toggler-filter: invert(1); --radius: 1rem; --font: "Outfit", system-ui, -apple-system, sans-serif; --theme-meta: #0c0c0e; } /* Light theme tokens (app light surfaces / toolbar #EFEFEF family) */ [data-theme="light"] { color-scheme: light; --bg: #f7f7f8; --bg-elevated: #ffffff; --bg-card: #ffffff; --bg-nav: rgba(255, 255, 255, 0.9); --bg-footer: #efefef; --text: #1b2733; --text-muted: #5b6775; --heading: #121212; --brand: #0ba855; --brand-hover: #098f48; --brand-on: #ffffff; --brand-soft: rgba(14, 196, 102, 0.12); --border: rgba(0, 0, 0, 0.08); --shadow: 0 14px 40px rgba(15, 23, 42, 0.08); --section-muted: linear-gradient(180deg, #efefef, transparent 70%); --code-bg: rgba(0, 0, 0, 0.05); --nav-toggler-filter: none; --theme-meta: #f7f7f8; } /* System preference when no explicit user choice yet (set on by JS) */ @media (prefers-color-scheme: light) { :root:not([data-theme]) { color-scheme: light; --bg: #f7f7f8; --bg-elevated: #ffffff; --bg-card: #ffffff; --bg-nav: rgba(255, 255, 255, 0.9); --bg-footer: #efefef; --text: #1b2733; --text-muted: #5b6775; --heading: #121212; --brand: #0ba855; --brand-hover: #098f48; --brand-on: #ffffff; --brand-soft: rgba(14, 196, 102, 0.12); --border: rgba(0, 0, 0, 0.08); --shadow: 0 14px 40px rgba(15, 23, 42, 0.08); --section-muted: linear-gradient(180deg, #efefef, transparent 70%); --code-bg: rgba(0, 0, 0, 0.05); --nav-toggler-filter: none; --theme-meta: #f7f7f8; } } *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: var(--font); background: var(--bg); color: var(--text); line-height: 1.6; -webkit-font-smoothing: antialiased; transition: background-color 0.2s ease, color 0.2s ease; } a { color: var(--brand); text-decoration: none; } a:hover { color: var(--brand-hover); } img { max-width: 100%; height: auto; } code { background: var(--code-bg); color: var(--text); padding: 0.1em 0.4em; border-radius: 0.35rem; font-size: 0.92em; } .navbar { backdrop-filter: blur(14px); background: var(--bg-nav) !important; border-bottom: 1px solid var(--border); padding-top: 0.85rem; padding-bottom: 0.85rem; transition: background-color 0.2s ease, box-shadow 0.2s ease; } .navbar.scrolled { box-shadow: var(--shadow); } .navbar-brand { display: inline-flex; align-items: center; gap: 0.65rem; color: var(--heading) !important; font-weight: 700; letter-spacing: -0.02em; } .navbar-brand img { height: 44px; width: auto; display: block; } /* Main header logo — larger mark */ .navbar > .container > .navbar-brand img { height: 52px; } /* Footer brand logo */ .site-footer .navbar-brand img { height: 48px; } @media (min-width: 992px) { .navbar > .container > .navbar-brand img { height: 56px; } } /* logo.svg is dark-on-transparent; invert for dark theme (img cannot use CSS currentColor) */ [data-theme="dark"] .navbar-brand img { filter: invert(1); } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .navbar-brand img { filter: invert(1); } } [data-theme="light"] .navbar-brand img { filter: none; } .navbar-nav .nav-link { color: var(--text-muted) !important; font-weight: 500; padding: 0.5rem 0.9rem !important; } .navbar-nav .nav-link:hover, .navbar-nav .nav-link:focus, .navbar-nav .nav-link.active { color: var(--heading) !important; } .navbar-toggler { border-color: var(--border); } .navbar-toggler-icon { filter: var(--nav-toggler-filter); } .theme-toggle { width: 42px; height: 42px; border-radius: 999px; border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); display: inline-flex; align-items: center; justify-content: center; padding: 0; line-height: 1; transition: border-color 0.15s ease, background-color 0.15s ease, color 0.15s ease; } .theme-toggle:hover, .theme-toggle:focus-visible { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); outline: none; } .theme-toggle .icon-sun, .theme-toggle .icon-moon { font-size: 1.15rem; } /* Show moon in light mode (click to go dark), sun in dark mode (click to go light) */ [data-theme="light"] .theme-toggle .icon-sun, :root:not([data-theme]) .theme-toggle .icon-sun { display: none; } [data-theme="light"] .theme-toggle .icon-moon, :root:not([data-theme]) .theme-toggle .icon-moon { display: inline; } [data-theme="dark"] .theme-toggle .icon-sun { display: inline; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } @media (prefers-color-scheme: dark) { :root:not([data-theme]) .theme-toggle .icon-sun { display: inline; } :root:not([data-theme]) .theme-toggle .icon-moon { display: none; } } .btn-brand { background: var(--brand); border: none; color: var(--brand-on); font-weight: 700; border-radius: 999px; padding: 0.7rem 1.35rem; } .btn-brand:hover, .btn-brand:focus { background: var(--brand-hover); color: var(--brand-on); } .btn-ghost { border: 1px solid var(--border); color: var(--text); background: transparent; border-radius: 999px; padding: 0.7rem 1.25rem; font-weight: 600; } .btn-ghost:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); } .hero { position: relative; padding: 7.5rem 0 4rem; overflow: hidden; } .hero::before, .hero::after { content: ""; position: absolute; border-radius: 50%; filter: blur(80px); pointer-events: none; z-index: 0; } .hero::before { width: 420px; height: 420px; top: -80px; right: -80px; background: radial-gradient(circle, rgba(14, 196, 102, 0.28), transparent 70%); } .hero::after { width: 360px; height: 360px; bottom: 0; left: -100px; background: radial-gradient(circle, rgba(14, 196, 102, 0.12), transparent 70%); } .hero .container { position: relative; z-index: 1; } .eyebrow { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.75rem; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 0.85rem; font-weight: 600; margin-bottom: 1.25rem; } .hero h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); font-weight: 800; letter-spacing: -0.03em; line-height: 1.1; margin-bottom: 1rem; color: var(--heading); } .hero .lead { color: var(--text-muted); font-size: 1.125rem; max-width: 36rem; } .hero-cta { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.75rem; } .hero-art { margin-top: 2.5rem; border-radius: calc(var(--radius) + 0.5rem); overflow: hidden; border: 1px solid var(--border); box-shadow: var(--shadow); background: var(--bg-elevated); } .hero-art img { display: block; width: 100%; } .section { padding: 5rem 0; } .section-muted { background: var(--section-muted); } .section-title { font-weight: 800; letter-spacing: -0.03em; margin-bottom: 0.75rem; color: var(--heading); } .section-sub { color: var(--text-muted); max-width: 40rem; margin: 0 auto 2.5rem; } .feature-card, .platform-card, .legal-card { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; height: 100%; transition: transform 0.2s ease, border-color 0.2s ease, background-color 0.2s ease; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.02); } .feature-card:hover, .platform-card:hover { transform: translateY(-3px); border-color: rgba(14, 196, 102, 0.4); } .feature-icon { width: 48px; height: 48px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; background: var(--brand-soft); color: var(--brand); font-size: 1.25rem; margin-bottom: 1rem; } .feature-card h3, .platform-card h3 { font-size: 1.1rem; font-weight: 700; margin-bottom: 0.6rem; color: var(--heading); } .feature-card p, .platform-card p { color: var(--text-muted); margin: 0; font-size: 0.98rem; } .platform-card .badge-soft { display: inline-block; margin-top: 1rem; padding: 0.25rem 0.65rem; border-radius: 999px; background: var(--code-bg); color: var(--text-muted); font-size: 0.8rem; } .download-panel { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: calc(var(--radius) + 0.25rem); padding: 2rem; text-align: center; box-shadow: var(--shadow); } .store-badge { height: 56px; width: auto; margin: 0.35rem; } /* Legal / FAQ pages — theme-aware reading surface */ .legal-page { padding: 7rem 0 4rem; background: var(--bg); min-height: 70vh; } .legal-page .legal-surface { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: calc(var(--radius) + 0.15rem); padding: 2rem 1.5rem; box-shadow: var(--shadow); } @media (min-width: 768px) { .legal-page .legal-surface { padding: 2.5rem 2.75rem; } } .legal-page h1 { font-weight: 800; letter-spacing: -0.03em; margin-bottom: 0.5rem; color: var(--heading); } .legal-meta { color: var(--text-muted); margin-bottom: 2rem; } .legal-page h2 { font-size: 1.25rem; font-weight: 700; margin-top: 2rem; margin-bottom: 0.75rem; color: var(--heading); } .legal-page h3, .legal-page .legal-subhead { font-size: 1.05rem; font-weight: 650; margin-top: 1.25rem; margin-bottom: 0.5rem; color: var(--heading); } .legal-page p, .legal-page li { color: var(--text-muted); } .legal-page strong { color: var(--text); } .legal-page ul { padding-left: 1.2rem; } .legal-page li { margin-bottom: 0.4rem; } .faq-item { background: var(--bg-card); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem 1.4rem; margin-bottom: 1rem; transition: background-color 0.2s ease, border-color 0.2s ease; } .faq-item h2 { font-size: 1.05rem; font-weight: 700; margin: 0 0 0.55rem; color: var(--heading); } .faq-item p { color: var(--text-muted); margin: 0; } .site-footer { border-top: 1px solid var(--border); padding: 3rem 0 2rem; background: var(--bg-footer); transition: background-color 0.2s ease; } .site-footer h2 { font-size: 1rem; font-weight: 700; margin-bottom: 0.85rem; color: var(--heading); } .site-footer p, .site-footer a, .site-footer small { color: var(--text-muted); } .site-footer a:hover { color: var(--brand); } .footer-links { list-style: none; padding: 0; margin: 0; } .footer-links li { margin-bottom: 0.45rem; } .social-row { display: flex; gap: 0.75rem; margin-top: 0.75rem; } .social-row a { width: 42px; height: 42px; border-radius: 50%; border: 1px solid var(--border); display: inline-flex; align-items: center; justify-content: center; color: var(--text); background: var(--bg-elevated); } .social-row a:hover { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); } .footer-bottom { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--border); display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: space-between; align-items: center; } .disclaimer { color: var(--text-muted); font-size: 0.88rem; line-height: 1.55; margin: 0; } .disclaimer-box { margin-top: 1.5rem; padding: 1rem 1.15rem; border-radius: calc(var(--radius) - 0.15rem); border: 1px solid var(--border); background: var(--code-bg); } .disclaimer-box .disclaimer { font-size: 0.9rem; } .footer-disclaimer { margin-top: 1.25rem; padding-top: 1.25rem; border-top: 1px solid var(--border); max-width: 52rem; } .footer-disclaimer .disclaimer { font-size: 0.8rem; }