/* ============================================ DARK BRAND — shared dark theme for marketing pages Mirrors the DreamHub aesthetic (deep blacks, light text, Apple-style blue links, dark cards). Apply to . ============================================ */ body.dark-brand { --db-bg: #0a0a0f; --db-bg-soft: #15151c; --db-bg-elev: #1c1c26; --db-bg-dark: #000000; --db-bg-deep: #050509; --db-text: #f5f5f7; --db-text-muted: #a1a1aa; --db-text-dim: #6e6e76; --db-link: #2997ff; --db-link-hover: #5cb0ff; --db-divider: rgba(255, 255, 255, 0.08); --db-border: rgba(255, 255, 255, 0.10); --db-border-strong: rgba(255, 255, 255, 0.18); --db-radius: 18px; background: var(--db-bg); color: var(--db-text); -webkit-font-smoothing: antialiased; } body.dark-brand .page-loader { display: none !important; } /* ============================================ NAVBAR — dark, sticky, matches DreamHub ============================================ */ body.dark-brand .ms-navbar { background: linear-gradient(180deg, rgba(10, 10, 15, 0.92) 0%, rgba(10, 10, 15, 0.65) 100%) !important; -webkit-backdrop-filter: saturate(180%) blur(20px); backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid var(--db-divider) !important; position: sticky; top: 0; z-index: 1100; } body.dark-brand .ms-navbar .ms-navbar-menu a { color: rgba(245, 245, 247, 0.92) !important; } body.dark-brand .ms-navbar .ms-navbar-menu a:hover { color: #ffffff !important; } body.dark-brand .ms-navbar .ms-login-btn { color: rgba(245, 245, 247, 0.92) !important; } body.dark-brand .ms-navbar .ms-signup-btn { background: #ffffff !important; color: #0a0a0f !important; border-radius: 999px; } body.dark-brand .ms-navbar .ms-signup-btn:hover { background: #e8e8ec !important; } body.dark-brand .ms-navbar .ms-mobile-toggle span { background: #ffffff !important; } /* ============================================ SHELL & HERO ============================================ */ body.dark-brand .products-shell { background: var(--db-bg); color: var(--db-text); min-height: 100vh; } body.dark-brand .products-hero { background: radial-gradient(120% 80% at 50% -10%, #1a1a2e 0%, #0a0a0f 55%, #000 100%); } body.dark-brand .products-hero__bg { opacity: 0.22; } body.dark-brand .products-hero__veil { background: radial-gradient(ellipse 100% 80% at 50% 20%, rgba(10, 10, 15, 0.15) 0%, rgba(10, 10, 15, 0.78) 60%, rgba(0, 0, 0, 0.95) 100%); } body.dark-brand .products-hero h1 { color: #ffffff; letter-spacing: -0.02em; } body.dark-brand .products-hero__lead { color: #e5e5ea; } body.dark-brand .products-hero__eyebrow { color: rgba(245, 245, 247, 0.85); background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.14); letter-spacing: 0.16em; } body.dark-brand .products-hero__btn--primary { background: #ffffff; color: #0a0a0f; box-shadow: 0 4px 18px rgba(255, 255, 255, 0.18); } body.dark-brand .products-hero__btn--primary:hover { background: #e8e8ec; color: #0a0a0f; box-shadow: 0 6px 24px rgba(255, 255, 255, 0.24); } body.dark-brand .products-hero__btn--ghost { background: rgba(255, 255, 255, 0.08); color: #ffffff; border: 1px solid var(--db-border-strong); backdrop-filter: blur(8px); } body.dark-brand .products-hero__btn--ghost:hover { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.3); color: #ffffff; } body.dark-brand .products-stats { border: 1px solid var(--db-border); background: var(--db-border); box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55); } body.dark-brand .products-stats__item { background: rgba(20, 20, 28, 0.92); } body.dark-brand .products-stats__value { color: #ffffff; } body.dark-brand .products-stats__label { color: var(--db-text-muted); } /* ============================================ BODY BACKGROUND ============================================ */ body.dark-brand .products-body { background: var(--db-bg); color: var(--db-text); } /* ============================================ DIVISIONS (products page tabs / panels) ============================================ */ body.dark-brand .divisions__eyebrow { color: rgba(245, 245, 247, 0.65); font-weight: 600; } body.dark-brand .divisions__header h2 { color: #ffffff; } body.dark-brand .divisions__sub { color: var(--db-text-muted); } body.dark-brand .divisions__controls { background: var(--db-bg-soft); border: 1px solid var(--db-border); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.4); } body.dark-brand .divisions__tab { border: 1px solid var(--db-border); background: var(--db-bg-elev); color: rgba(245, 245, 247, 0.85); } body.dark-brand .divisions__tab:hover { border-color: rgba(255, 255, 255, 0.25); background: #23232f; color: #ffffff; box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45); } body.dark-brand .divisions__tab.is-active { background: #ffffff; border-color: #ffffff; color: #0a0a0f; box-shadow: 0 6px 18px rgba(255, 255, 255, 0.18); } body.dark-brand .divisions__tab-meta { color: var(--db-text-dim); } body.dark-brand .divisions__tab.is-active .divisions__tab-meta { color: rgba(10, 10, 15, 0.7); } body.dark-brand .divisions__picker-label { color: var(--db-text-dim); } body.dark-brand .divisions__picker-select { background: var(--db-bg-elev); border: 1px solid var(--db-border); color: #ffffff; } body.dark-brand .divisions__picker-select:hover { border-color: rgba(255, 255, 255, 0.3); } body.dark-brand .divisions__picker-select option { background: var(--db-bg-elev); color: #ffffff; } body.dark-brand .divisions__picker-chevron { color: var(--db-text-muted); } body.dark-brand .divisions__panel { background: var(--db-bg-soft); border: 1px solid var(--db-border); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.45); } body.dark-brand .divisions__panel-head { border-bottom: 1px solid var(--db-divider); } body.dark-brand .divisions__panel-kicker { color: var(--db-text-dim); } body.dark-brand .divisions__panel-title { color: #ffffff; } body.dark-brand .divisions__panel-sub { color: var(--db-text-muted); } body.dark-brand .divisions__panel-link { background: rgba(255, 255, 255, 0.08); border: 1px solid var(--db-border-strong); color: #ffffff; box-shadow: none; } body.dark-brand .divisions__panel-link:hover, body.dark-brand .divisions__panel-link:focus-visible { background: rgba(255, 255, 255, 0.16); border-color: rgba(255, 255, 255, 0.3); color: #ffffff; box-shadow: 0 6px 18px rgba(0, 0, 0, 0.4); } body.dark-brand .divisions__subsection-title { color: var(--db-text-muted); border-bottom: 1px solid var(--db-divider); } body.dark-brand .divisions__subgroup-title { color: var(--db-text-dim); } /* ============================================ PRODUCT TILES (cards) ============================================ */ body.dark-brand .product-tile { background: var(--db-bg-elev); border: 1px solid var(--db-border); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); color: var(--db-text); } body.dark-brand .product-tile:hover { background: #23232f; border-color: rgba(255, 255, 255, 0.22); box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55); } body.dark-brand .product-tile__media { background: linear-gradient(135deg, #1c1c26, #0a0a0f); } body.dark-brand .product-tile h3 { color: #ffffff; } body.dark-brand .product-tile p { color: var(--db-text-muted); } body.dark-brand .product-tile__cta { color: var(--db-link); } body.dark-brand .product-tile:hover .product-tile__cta { color: var(--db-link-hover); } body.dark-brand .product-tile__badge--arazas { background: rgba(41, 151, 255, 0.14); border-color: rgba(41, 151, 255, 0.35); color: #cfe5ff; } body.dark-brand .product-tile__badge--partner { background: rgba(255, 255, 255, 0.06); border-color: var(--db-border-strong); color: var(--db-text); } body.dark-brand .product-tile__type--platform { background: rgba(255, 255, 255, 0.08); border-color: var(--db-border-strong); color: #ffffff; } body.dark-brand .product-tile__type--sub { background: rgba(255, 255, 255, 0.04); border-color: var(--db-border); color: var(--db-text-muted); } /* ============================================ ACCORDION / SECTIONS (products + about) ============================================ */ body.dark-brand .products-accordion { background: var(--db-bg-soft); border: 1px solid var(--db-border); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } body.dark-brand .products-accordion[open] { border-color: rgba(255, 255, 255, 0.22); box-shadow: 0 12px 36px rgba(0, 0, 0, 0.55); } body.dark-brand .products-section__head:hover { background: rgba(255, 255, 255, 0.04); } body.dark-brand .products-section__kicker { color: var(--db-text-dim); } body.dark-brand .products-section h2 { color: #ffffff; } body.dark-brand .products-section__sub { color: var(--db-text-muted); } body.dark-brand .products-section__chevron { background: rgba(255, 255, 255, 0.06); color: var(--db-text-muted); } body.dark-brand .products-accordion[open] .products-section__chevron, body.dark-brand .products-section__head:hover .products-section__chevron { background: rgba(255, 255, 255, 0.14); color: #ffffff; } body.dark-brand .products-accordion > .products-grid { border-top: 1px solid var(--db-divider); } body.dark-brand .products-footnote { background: var(--db-bg-soft); border: 1px dashed var(--db-border-strong); color: var(--db-text-muted); } body.dark-brand .products-footnote a { color: var(--db-link); } body.dark-brand .products-footnote a:hover { color: var(--db-link-hover); } /* Mid CTA already dark in base CSS — tighten borders to match */ body.dark-brand .products-mid-cta { background: radial-gradient(80% 60% at 50% 0%, #1c1c2a 0%, #0a0a0f 60%, #050509 100%); border: 1px solid var(--db-border); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55); } body.dark-brand .products-mid-cta h2 { color: #ffffff; } body.dark-brand .products-mid-cta p { color: #c7c7d0; } body.dark-brand .products-mid-cta__btn { color: #ffffff; border: 1px solid var(--db-border-strong); background: rgba(255, 255, 255, 0.06); } body.dark-brand .products-mid-cta__btn:hover { border-color: rgba(255, 255, 255, 0.32); background: rgba(255, 255, 255, 0.14); color: #ffffff; } body.dark-brand .products-mid-cta__btn--accent { background: #ffffff; color: #0a0a0f; border-color: transparent; } body.dark-brand .products-mid-cta__btn--accent:hover { background: #e8e8ec; color: #0a0a0f; } /* ============================================ ABOUT PAGE OVERRIDES ============================================ */ body.dark-brand .about-prose p { color: #d4d4d8; } body.dark-brand .about-prose strong { color: #ffffff; } body.dark-brand .about-prose a { color: var(--db-link); font-weight: 500; } body.dark-brand .about-prose a:hover { color: var(--db-link-hover); } body.dark-brand .about-pillars--card { background: var(--db-bg-elev) !important; border: 1px solid var(--db-border) !important; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); color: var(--db-text); } body.dark-brand .about-pillars--card li { color: #d4d4d8; } body.dark-brand .about-pillars--card strong { color: #ffffff; } body.dark-brand .about-visual__frame { border: 1px solid var(--db-border); background: linear-gradient(145deg, #15151c 0%, #0a0a0f 55%, #000000 100%); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.55), 0 2px 8px rgba(0, 0, 0, 0.4); } body.dark-brand .about-visual__caption { color: var(--db-text-muted); } body.dark-brand .about-division-card { background: var(--db-bg-elev); border: 1px solid var(--db-border); box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4); } body.dark-brand .about-division-card:hover { border-color: rgba(255, 255, 255, 0.22); box-shadow: 0 12px 32px rgba(0, 0, 0, 0.55); } body.dark-brand .about-division-card h3 { color: #ffffff; } body.dark-brand .about-division-card p { color: var(--db-text-muted); } /* ============================================ FOOTER — dark to match DreamHub ============================================ */ body.dark-brand #footer.footer-two { background: #000000; color: #c7c7d0; } body.dark-brand #footer .footer-links a, body.dark-brand #footer .site-info-menu a, body.dark-brand #footer .copyright a, body.dark-brand #footer .footer-social-link a { color: #e5e5ea; } body.dark-brand #footer .footer-links a:hover, body.dark-brand #footer .site-info-menu a:hover, body.dark-brand #footer .footer-social-link a:hover { color: #ffffff; } /* ============================================ SKIP LINK & MISC ============================================ */ body.dark-brand .site-skip-link:focus { background: #ffffff; color: #0a0a0f; } /* Smooth subtle entry-style consistent with DreamHub feel */ @media (max-width: 768px) { body.dark-brand .products-hero { padding-top: 60px; padding-bottom: 40px; } }