/* ========================================================================== byTicks Brand Design System Version: 2.0 Dark mode is DEFAULT. Light mode via [data-theme="light"] on . Used alongside Tailwind CSS CDN. ========================================================================== */ /* ========================================================================== 1. CSS Custom Properties (Brand Tokens) ========================================================================== */ :root { /* Brand Colors */ --bt-deep-sea-blue: #050C1B; --bt-red: #FF0328; --bt-white: #FFFFFF; --bt-off-white: #FDFDFD; --bt-deep-sea-grey: #515769; --bt-morning-dew-blue: #1F4170; --bt-morning-dew-grey: #8E9FB6; /* Derived Colors */ --bt-red-hover: #E0021F; --bt-red-active: #C80020; --bt-footer-bg: #020810; --bt-glass-bg: rgba(255, 255, 255, 0.05); --bt-glass-border: rgba(255, 255, 255, 0.1); --bt-glass-hover-bg: rgba(255, 255, 255, 0.08); --bt-glass-strong-bg: rgba(255, 255, 255, 0.08); --bt-glass-strong-border: rgba(255, 255, 255, 0.15); /* Typography Scale */ --bt-h1-size: 64px; --bt-h1-line: 64px; --bt-h2-size: 48px; --bt-h2-line: 48px; --bt-h3-size: 32px; --bt-h3-line: 32px; --bt-h4-size: 24px; --bt-h4-line: 24px; --bt-h5-size: 20px; --bt-h5-line: 20px; --bt-body-size: 18px; --bt-body-line: 28px; --bt-caption-size: 14px; --bt-caption-line: 20px; /* Spacing */ --bt-container-max: 1200px; --bt-container-px: 24px; /* Transitions */ --bt-transition-fast: 0.2s ease; --bt-transition-base: 0.3s ease; --bt-transition-slow: 0.6s ease; } /* Mobile typography overrides */ @media (max-width: 767px) { :root { --bt-h1-size: 40px; --bt-h1-line: 40px; --bt-h2-size: 32px; --bt-h2-line: 32px; --bt-h3-size: 24px; --bt-h3-line: 24px; --bt-container-px: 20px; } } /* ========================================================================== 2. Base / Reset Supplements ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: var(--bt-body-size); line-height: var(--bt-body-line); color: var(--bt-white); background-color: var(--bt-deep-sea-blue); margin: 0; padding: 0; } img { max-width: 100%; height: auto; display: block; } a { color: inherit; text-decoration: none; } /* ========================================================================== 3. Typography ========================================================================== */ h1, h2, h3, h4, h5 { font-family: 'Koulen', sans-serif; font-weight: 400; text-transform: uppercase; color: var(--bt-white); margin: 0; } h1 { font-size: var(--bt-h1-size); line-height: var(--bt-h1-line); } h2 { font-size: var(--bt-h2-size); line-height: var(--bt-h2-line); } h3 { font-size: var(--bt-h3-size); line-height: var(--bt-h3-line); } h4 { font-size: var(--bt-h4-size); line-height: var(--bt-h4-line); } h5 { font-size: var(--bt-h5-size); line-height: var(--bt-h5-line); } .caption { font-family: 'Playfair Display', serif; font-size: var(--bt-caption-size); line-height: var(--bt-caption-line); } /* ========================================================================== 4. Utility Classes ========================================================================== */ .container { max-width: var(--bt-container-max); margin-left: auto; margin-right: auto; padding-left: var(--bt-container-px); padding-right: var(--bt-container-px); width: 100%; } /* Theme switch button */ .theme-switch { width: 32px; height: 32px; border-radius: 50%; border: 1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: background .3s, border-color .3s; position: relative; overflow: hidden; } .theme-switch:hover { background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.2); } .theme-switch__icon { position: absolute; transition: transform .4s cubic-bezier(.22,1,.36,1), opacity .3s; } .theme-switch__sun { color: #8E9FB6; opacity: 1; transform: rotate(0) scale(1); } .theme-switch__moon { color: #8E9FB6; opacity: 0; transform: rotate(-90deg) scale(0); } /* Light mode: show moon, hide sun */ [data-theme="light"] .theme-switch { border-color: rgba(0,0,0,.12); background: rgba(0,0,0,.04); } [data-theme="light"] .theme-switch:hover { background: rgba(0,0,0,.08); } [data-theme="light"] .theme-switch__sun { opacity: 0; transform: rotate(90deg) scale(0); } [data-theme="light"] .theme-switch__moon { opacity: 1; transform: rotate(0) scale(1); color: #050C1B; } .text-red { color: var(--bt-red); } .text-muted { color: var(--bt-deep-sea-grey); } .text-light-muted { color: var(--bt-morning-dew-grey); } .highlight { color: var(--bt-red); } /* ========================================================================== 5. Buttons ========================================================================== */ .btn-primary, .btn-secondary, .btn-outline { display: inline-flex; align-items: center; gap: 8px; padding: 12px 28px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 16px; font-weight: 600; line-height: 1.25; border-radius: 9999px; border: 2px solid transparent; cursor: pointer; transition: background-color var(--bt-transition-fast), border-color var(--bt-transition-fast), color var(--bt-transition-fast), transform var(--bt-transition-fast); text-decoration: none; white-space: nowrap; user-select: none; } /* Arrow after text */ .btn-primary::after, .btn-secondary::after, .btn-outline::after { content: '\203A'; font-size: 20px; line-height: 1; transition: transform var(--bt-transition-fast); } .btn-primary:hover::after, .btn-secondary:hover::after, .btn-outline:hover::after { transform: translateX(3px); } /* Primary — Red filled */ .btn-primary { background-color: var(--bt-red); color: var(--bt-white); border-color: var(--bt-red); } .btn-primary:hover { background-color: var(--bt-red-hover); border-color: var(--bt-red-hover); } .btn-primary:active { background-color: var(--bt-red-active); border-color: var(--bt-red-active); transform: scale(0.98); } /* Secondary — Deep Sea Blue filled */ .btn-secondary { background-color: var(--bt-deep-sea-blue); color: var(--bt-white); border-color: var(--bt-deep-sea-blue); } .btn-secondary:hover { background-color: var(--bt-morning-dew-blue); border-color: var(--bt-morning-dew-blue); } .btn-secondary:active { transform: scale(0.98); } /* Outline — Transparent with border */ .btn-outline { background-color: transparent; color: var(--bt-white); border-color: var(--bt-white); } .btn-outline:hover { background-color: var(--bt-white); color: var(--bt-deep-sea-blue); } .btn-outline:active { transform: scale(0.98); } /* ========================================================================== 6. Section Backgrounds ========================================================================== */ .section-dark { background-color: var(--bt-deep-sea-blue); color: var(--bt-white); } .section-light { background-color: var(--bt-off-white); color: var(--bt-deep-sea-blue); } .section-light h1, .section-light h2, .section-light h3, .section-light h4, .section-light h5 { color: var(--bt-deep-sea-blue); } .section-accent { background-color: var(--bt-morning-dew-blue); color: var(--bt-white); } .section-red { background-color: var(--bt-red); color: var(--bt-white); } /* ========================================================================== 7. Glass Effect Cards ========================================================================== */ .glass { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); background: var(--bt-glass-bg); border: 1px solid var(--bt-glass-border); border-radius: 16px; transition: background var(--bt-transition-base), transform var(--bt-transition-base); } .glass:hover { background: var(--bt-glass-hover-bg); transform: scale(1.01); } .glass-strong { backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); background: var(--bt-glass-strong-bg); border: 1px solid var(--bt-glass-strong-border); border-radius: 16px; transition: background var(--bt-transition-base), transform var(--bt-transition-base); } .glass-strong:hover { background: rgba(255, 255, 255, 0.12); transform: scale(1.01); } /* ========================================================================== 8. Cards ========================================================================== */ .card { border-radius: 16px; overflow: hidden; transition: transform var(--bt-transition-base), box-shadow var(--bt-transition-base); } .card:hover { transform: translateY(-4px); box-shadow: 0 12px 40px rgba(0, 0, 0, 0.3); } /* Ticket-shaped card (approx 3:5 ratio) */ .card-ticket { aspect-ratio: 3 / 5; border-radius: 24px; overflow: hidden; transition: transform var(--bt-transition-base), box-shadow var(--bt-transition-base); } .card-ticket:hover { transform: translateY(-6px); box-shadow: 0 16px 48px rgba(0, 0, 0, 0.35); } /* Feature card */ .feature-card { padding: 32px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); background: var(--bt-glass-bg); border: 1px solid var(--bt-glass-border); border-radius: 16px; transition: background var(--bt-transition-base), transform var(--bt-transition-base); } .feature-card:hover { background: var(--bt-glass-hover-bg); transform: translateY(-4px); } .feature-card .feature-icon { width: 48px; height: 48px; margin-bottom: 20px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: rgba(255, 3, 40, 0.1); color: var(--bt-red); } .feature-card .feature-title { font-family: 'Koulen', sans-serif; font-size: var(--bt-h4-size); line-height: var(--bt-h4-line); text-transform: uppercase; margin-bottom: 12px; } .feature-card .feature-description { color: var(--bt-morning-dew-grey); margin-bottom: 20px; } .feature-card .feature-link { color: var(--bt-red); font-weight: 600; font-size: 14px; display: inline-flex; align-items: center; gap: 6px; transition: gap var(--bt-transition-fast); } .feature-card .feature-link::after { content: '\2192'; } .feature-card .feature-link:hover { gap: 10px; } /* ========================================================================== 9. Navigation ========================================================================== */ /* Top bar */ .topbar { font-size: 13px; color: var(--bt-morning-dew-grey); padding: 8px 0; border-bottom: 1px solid rgba(255, 255, 255, 0.06); position: fixed; top: 0; left: 0; right: 0; z-index: 52; background-color: #050C1B; } /* Main navbar */ .navbar { padding: 14px 0; position: fixed; top: 33px; /* height of topbar */ left: 0; right: 0; z-index: 50; background-color: #050C1B; transition: background-color var(--bt-transition-base), backdrop-filter var(--bt-transition-base), padding var(--bt-transition-base), top var(--bt-transition-base); } .navbar.scrolled { top: 0; background-color: rgba(5, 12, 27, 0.97); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 10px 0; } /* Nav links */ .nav-link { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; font-weight: 500; text-transform: uppercase; letter-spacing: 0.05em; color: var(--bt-white); padding: 8px 12px; border-radius: 8px; transition: color var(--bt-transition-fast), background-color var(--bt-transition-fast); cursor: pointer; position: relative; } .nav-link:hover { color: var(--bt-red); } .nav-link.active { color: var(--bt-red); } /* Dropdown panel */ .nav-dropdown { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); min-width: 480px; padding: 24px; backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); background: rgba(5, 12, 27, 0.95); border: 1px solid var(--bt-glass-border); border-radius: 16px; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); display: grid; grid-template-columns: 1fr 1fr; gap: 8px; opacity: 0; visibility: hidden; transition: opacity var(--bt-transition-fast), visibility var(--bt-transition-fast), transform var(--bt-transition-fast); pointer-events: none; } .has-dropdown:hover > .nav-dropdown, .nav-dropdown.open { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); pointer-events: auto; } /* Mobile menu */ .mobile-menu { position: fixed; top: 0; right: 0; bottom: 0; width: 100%; max-width: 400px; z-index: 60; background-color: var(--bt-deep-sea-blue); padding: 80px 32px 32px; transform: translateX(100%); transition: transform var(--bt-transition-base); overflow-y: auto; } .mobile-menu.active { transform: translateX(0); } .mobile-menu-overlay { position: fixed; inset: 0; z-index: 55; background: rgba(0, 0, 0, 0.6); opacity: 0; visibility: hidden; transition: opacity var(--bt-transition-base), visibility var(--bt-transition-base); } .mobile-menu-overlay.open { opacity: 1; visibility: visible; } /* Hamburger */ .hamburger { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 28px; height: 28px; cursor: pointer; background: none; border: none; padding: 0; z-index: 70; } .hamburger span { display: block; width: 100%; height: 2px; background-color: var(--bt-white); border-radius: 2px; transition: transform var(--bt-transition-base), opacity var(--bt-transition-base); transform-origin: center; } .hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.active span:nth-child(2) { opacity: 0; } .hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ========================================================================== 10. Hero Section ========================================================================== */ .hero { min-height: 100vh; display: flex; align-items: center; justify-content: center; position: relative; overflow: hidden; } .hero-gradient { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 120%; height: 120%; background: radial-gradient( ellipse at center, rgba(31, 65, 112, 0.4) 0%, rgba(31, 65, 112, 0.1) 40%, transparent 70% ); pointer-events: none; z-index: 0; } .hero h1 .highlight { color: var(--bt-red); } /* ========================================================================== 11. Stats Bar ========================================================================== */ .stats-bar { background-color: var(--bt-red); padding: 64px 0; } .stat-item { display: flex; flex-direction: column; align-items: center; text-align: center; } .stat-number { font-family: 'Koulen', sans-serif; font-size: 48px; line-height: 1; color: var(--bt-white); margin-bottom: 8px; } .stat-label { font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 14px; color: rgba(255, 255, 255, 0.8); text-transform: uppercase; letter-spacing: 0.05em; } @media (max-width: 767px) { .stat-number { font-size: 36px; } } /* ========================================================================== 12. FAQ Accordion ========================================================================== */ .faq-item { border-bottom: 1px solid rgba(142, 159, 182, 0.2); } .faq-question { padding: 20px 0; display: flex; justify-content: space-between; align-items: center; cursor: pointer; font-family: 'Koulen', sans-serif; font-size: 20px; text-transform: uppercase; user-select: none; gap: 16px; } .faq-question::after { content: '+'; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-size: 24px; font-weight: 300; flex-shrink: 0; transition: transform var(--bt-transition-base); color: var(--bt-morning-dew-grey); } .faq-item.active .faq-question::after { content: '\2212'; transform: rotate(180deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height var(--bt-transition-base), padding var(--bt-transition-base); color: var(--bt-morning-dew-grey); line-height: var(--bt-body-line); } .faq-item.active .faq-answer { max-height: 300px; padding-bottom: 20px; } /* ========================================================================== 13. Breadcrumb ========================================================================== */ .breadcrumb { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--bt-morning-dew-grey); } .breadcrumb a { transition: color var(--bt-transition-fast); } .breadcrumb a:hover { color: var(--bt-red); } .breadcrumb .separator { opacity: 0.5; } .breadcrumb .separator::before { content: '/'; } .breadcrumb .current { color: var(--bt-white); } /* ========================================================================== 15. Animations ========================================================================== */ .fade-in { opacity: 0; transform: translateY(30px); transition: opacity var(--bt-transition-slow), transform var(--bt-transition-slow); } .fade-in.visible { opacity: 1; transform: translateY(0); } .slide-in-left { opacity: 0; transform: translateX(-50px); transition: opacity var(--bt-transition-slow), transform var(--bt-transition-slow); } .slide-in-left.visible { opacity: 1; transform: translateX(0); } .slide-in-right { opacity: 0; transform: translateX(50px); transition: opacity var(--bt-transition-slow), transform var(--bt-transition-slow); } .slide-in-right.visible { opacity: 1; transform: translateX(0); } /* Staggered animation delays for child elements */ .fade-in[data-delay="1"] { transition-delay: 0.1s; } .fade-in[data-delay="2"] { transition-delay: 0.2s; } .fade-in[data-delay="3"] { transition-delay: 0.3s; } .fade-in[data-delay="4"] { transition-delay: 0.4s; } .fade-in[data-delay="5"] { transition-delay: 0.5s; } .fade-in[data-delay="6"] { transition-delay: 0.6s; } /* ========================================================================== 16. Footer ========================================================================== */ .footer { background-color: var(--bt-footer-bg); padding: 64px 0; } .footer-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 40px; } .footer-heading { font-family: 'Koulen', sans-serif; font-size: 16px; text-transform: uppercase; color: var(--bt-white); margin-bottom: 16px; } .footer-link { display: block; color: var(--bt-morning-dew-grey); font-size: 14px; padding: 4px 0; transition: color var(--bt-transition-fast); } .footer-link:hover { color: var(--bt-white); } .footer-bottom { margin-top: 48px; padding-top: 24px; border-top: 1px solid rgba(255, 255, 255, 0.06); font-size: 13px; color: var(--bt-morning-dew-grey); } @media (max-width: 1023px) { .footer-grid { grid-template-columns: repeat(2, 1fr); gap: 32px; } } @media (max-width: 639px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } } /* ========================================================================== 17. Light Mode ([data-theme="light"]) ========================================================================== */ [data-theme="light"] body { color: var(--bt-deep-sea-blue); background-color: var(--bt-off-white); } [data-theme="light"] h1, [data-theme="light"] h2, [data-theme="light"] h3, [data-theme="light"] h4, [data-theme="light"] h5 { color: var(--bt-deep-sea-blue); } [data-theme="light"] .hero h1, [data-theme="light"] .hero h2 { color: #fff !important; } /* Sections */ [data-theme="light"] .section-dark { background-color: var(--bt-off-white); color: var(--bt-deep-sea-blue); } [data-theme="light"] .section-dark h1, [data-theme="light"] .section-dark h2, [data-theme="light"] .section-dark h3, [data-theme="light"] .section-dark h4, [data-theme="light"] .section-dark h5 { color: var(--bt-deep-sea-blue); } [data-theme="light"] .section-light { background-color: var(--bt-white); } /* Navbar */ [data-theme="light"] .navbar { background-color: rgba(253, 253, 253, 0.8); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); } [data-theme="light"] .navbar.scrolled { background-color: rgba(253, 253, 253, 0.95); box-shadow: 0 1px 0 rgba(0, 0, 0, 0.06); } [data-theme="light"] .nav-link { color: var(--bt-deep-sea-blue); } [data-theme="light"] .nav-link:hover { color: var(--bt-red); } [data-theme="light"] .hamburger span { background-color: var(--bt-deep-sea-blue); } [data-theme="light"] .mobile-menu { background-color: var(--bt-off-white); } /* Glass */ [data-theme="light"] .glass, [data-theme="light"] .feature-card { background: rgba(5, 12, 27, 0.03); border-color: rgba(5, 12, 27, 0.08); } [data-theme="light"] .glass:hover, [data-theme="light"] .feature-card:hover { background: rgba(5, 12, 27, 0.06); } [data-theme="light"] .glass-strong { background: rgba(5, 12, 27, 0.05); border-color: rgba(5, 12, 27, 0.12); } /* Buttons */ [data-theme="light"] .btn-outline { color: var(--bt-deep-sea-blue); border-color: var(--bt-deep-sea-blue); } [data-theme="light"] .btn-outline:hover { background-color: var(--bt-deep-sea-blue); color: var(--bt-white); } /* Testimonials */ [data-theme="light"] .testimonial-card { background: rgba(5, 12, 27, 0.03); border-color: rgba(5, 12, 27, 0.08); } [data-theme="light"] .testimonial-quote { color: var(--bt-deep-sea-blue); } [data-theme="light"] .testimonial-author { color: var(--bt-deep-sea-blue); } /* FAQ */ [data-theme="light"] .faq-item { border-color: rgba(81, 87, 105, 0.15); } [data-theme="light"] .faq-question { color: var(--bt-deep-sea-blue); } /* Breadcrumb */ [data-theme="light"] .breadcrumb .current { color: var(--bt-deep-sea-blue); } /* Dropdown */ [data-theme="light"] .nav-dropdown { background: rgba(253, 253, 253, 0.97); border-color: rgba(5, 12, 27, 0.08); box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12); } /* Red accent stays the same in light mode */ /* ── Landing-v2: Full Light Mode ── */ /* All sections with inline dark backgrounds */ [data-theme="light"] main > section { background: #ffffff !important; } [data-theme="light"] main > section.section-alt { background: #f5f7fa !important; } [data-theme="light"] main > section.cta-final { background: #f5f7fa !important; } [data-theme="light"] .cta-final .cta-glow, [data-theme="light"] .cta-final .cta-line { display: none; } [data-theme="light"] .cta-final .border-white\/15 { border-color: rgba(5,12,27,.12) !important; color: #050C1B !important; } [data-theme="light"] main > div[style] { background: #f5f6f8 !important; } /* Hero — swap video for light image */ [data-theme="light"] .hero { background: #f0f4f8 !important; } [data-theme="light"] .hero-video-wrap video { display: none; } [data-theme="light"] .hero-light-img { display: block !important; opacity: 1; } [data-theme="light"] .hero-video-wrap::after { background: linear-gradient(180deg,transparent 0%,transparent 65%,rgba(255,255,255,.4) 85%,#fff 100%) !important; } [data-theme="light"] .hero__overlay { background: linear-gradient(180deg,transparent 0%,transparent 60%,rgba(255,255,255,.25) 80%,#fff 100%) !important; } [data-theme="light"] .hero-title { color: #fff !important; } [data-theme="light"] .hero-title .accent { color: #FF0328 !important; } [data-theme="light"] .hero-eyebrow { color: #FF0328 !important; } [data-theme="light"] .hero-sub { color: rgba(255,255,255,.7) !important; } [data-theme="light"] .hero-ticker { background: rgba(255,255,255,.6); backdrop-filter: blur(10px); border-color: rgba(0,0,0,.06); } [data-theme="light"] .ticker-track span { color: rgba(5,12,27,.4) !important; } [data-theme="light"] .hero .hero-ticker * { color: rgba(5,12,27,.4) !important; } /* Parallax showcase */ [data-theme="light"] .parallax-showcase { background: #f5f6f8 !important; } [data-theme="light"] .parallax-card { background: #e8eaed; } [data-theme="light"] .parallax-card::after { border-color: rgba(0,0,0,.06); } /* Ticker (inside hero — stays dark) */ /* Mockup cards */ [data-theme="light"] .mockup-card { background: #f8f9fb; border-color: rgba(0,0,0,.08); } [data-theme="light"] .mockup-card:hover { border-color: rgba(255,3,40,.2); } [data-theme="light"] .mockup-card__preview { background: #eef0f4; } [data-theme="light"] .mockup-card__title { color: #050C1B; } [data-theme="light"] .mockup-card__desc { color: #515769; } /* Analytics card light mode — stat boxes */ [data-theme="light"] #mkAnalytics .mockup-card__preview > div > div { background: rgba(0,0,0,.04) !important; border-color: rgba(0,0,0,.08) !important; } /* Stat values (Koulen font divs with color:#fff) */ [data-theme="light"] #mkAnalytics .mockup-card__preview > div > div > div:last-child { color: #050C1B !important; } /* Analytics card light mode — SVG grid lines */ [data-theme="light"] #mkAnalytics svg line { stroke: rgba(0,0,0,.06); } /* SVG tooltip */ [data-theme="light"] #mkAnalytics svg g rect { fill: #f0f2f5 !important; stroke: rgba(0,0,0,.1) !important; } [data-theme="light"] #mkAnalytics svg g text[fill="#fff"] { fill: #050C1B !important; } [data-theme="light"] #mkAnalytics svg g text[fill="#8E9FB6"] { fill: #515769 !important; } /* Entrance management card light mode */ [data-theme="light"] #mkEntrance .mockup-card__preview span[style*="color:#fff"] { color: #050C1B !important; } [data-theme="light"] #mkEntrance .ent-pct { color: #050C1B !important; } [data-theme="light"] #mkEntrance .ent-scanner { background: rgba(0,0,0,.03) !important; border-color: rgba(0,0,0,.08) !important; } [data-theme="light"] #mkEntrance .ent-scanner span[style*="color:#fff"], [data-theme="light"] #mkEntrance .ent-scanner div[style*="color:#fff"] { color: #050C1B !important; } [data-theme="light"] #mkEntrance svg circle[stroke="rgba(255,255,255,.06)"] { stroke: rgba(0,0,0,.08); } /* Pulse animation for scanning indicator */ @keyframes entPulse { 0%,100%{opacity:1} 50%{opacity:.3} } .ent-pulse { animation: entPulse 1.5s ease-in-out infinite; } /* Portals card light mode */ [data-theme="light"] #mkPortals .mockup-card__preview span[style*="color:#fff"] { color: #050C1B !important; } [data-theme="light"] #mkPortals .portal-row { background: rgba(0,0,0,.03) !important; border-color: rgba(0,0,0,.08) !important; } [data-theme="light"] #mkPortals .portal-row div[style*="color:#fff"] { color: #050C1B !important; } [data-theme="light"] #mkPortals .portal-conv-bar + span { color: #515769 !important; } /* Flow automation card light mode */ [data-theme="light"] #mkFlowAuto .mockup-card__preview span[style*="color:#fff"] { color: #050C1B !important; } [data-theme="light"] #mkFlowAuto svg text[fill="#fff"] { fill: #050C1B !important; } [data-theme="light"] #mkFlowAuto svg text[fill="rgba(255,255,255,.6)"] { fill: #515769 !important; } [data-theme="light"] #mkFlowAuto svg text[fill="#8E9FB6"] { fill: #515769 !important; } [data-theme="light"] #mkFlowAuto svg rect[fill="rgba(255,255,255,.03)"] { fill: rgba(0,0,0,.03) !important; } [data-theme="light"] #mkFlowAuto svg rect[stroke="rgba(255,255,255,.06)"] { stroke: rgba(0,0,0,.08) !important; } [data-theme="light"] #mkFlowAuto svg line[stroke="rgba(255,255,255,.06)"] { stroke: rgba(0,0,0,.06) !important; } [data-theme="light"] #mkFlowAuto svg rect[fill="rgba(255,255,255,.06)"] { fill: rgba(0,0,0,.06) !important; } [data-theme="light"] #mkFlowAuto .flow-line { stroke: rgba(0,0,0,.15) !important; } /* Page builder sections */ [data-theme="light"] .mk-section { background: #fff; border-color: rgba(0,0,0,.08); color: #515769; } /* Seat planner */ /* Seat planner light mode */ [data-theme="light"] .mk-stage { background: rgba(255,3,40,.06); border-color: rgba(255,3,40,.12); } [data-theme="light"] .mk-seat { background: rgba(0,0,0,.08); } [data-theme="light"] .mk-seat.vip { background: #FF0328; } [data-theme="light"] .mk-seat.gold { background: #eab308; } [data-theme="light"] .mk-seat.standard { background: #22c55e; } [data-theme="light"] .mk-seat.taken { background: #3b82f6; } [data-theme="light"] .mk-legend { color: #515769; } /* Phone mockup */ [data-theme="light"] .mk-phone { background: #f0f2f5; border-color: rgba(0,0,0,.1); } [data-theme="light"] .mk-phone::before { background: rgba(0,0,0,.08); } [data-theme="light"] .mk-phone__qr { background: repeating-conic-gradient(rgba(0,0,0,.5) 0% 25%,transparent 0% 50%) 0 0/6px 6px; } /* Feature cards (EVERYTHING IN ONE PLACE) */ [data-theme="light"] .mockup-grid + section .container > .grid > div, [data-theme="light"] div[style*="background:#0a1225"] { background: #f8f9fb !important; border-color: rgba(0,0,0,.08); } /* Bento cards */ [data-theme="light"] .bento-card { background: #f8f9fb !important; border-color: rgba(0,0,0,.08) !important; } [data-theme="light"] .bento-card h5 { color: #050C1B; } [data-theme="light"] .bento-card p { color: #515769; } /* Stats band */ [data-theme="light"] .stats-band { background: #f5f6f8 !important; border-color: rgba(0,0,0,.06) !important; } [data-theme="light"] .stat-number { color: #050C1B !important; } [data-theme="light"] .stat-label { color: #515769 !important; } /* Steps section */ [data-theme="light"] .step-card { background: #fff; border-color: rgba(0,0,0,.08); } [data-theme="light"] .step-card h4 { color: #050C1B; } [data-theme="light"] .step-card p { color: #515769; } /* Scanner section — 3-phone fan layout */ .app-phones{flex-shrink:0;width:420px;height:480px;position:relative} .app-phone{position:absolute;width:200px;border-radius:24px;overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.5),0 0 0 1px rgba(255,255,255,.08);transition:transform .6s cubic-bezier(.22,1,.36,1),box-shadow .6s cubic-bezier(.22,1,.36,1)} .app-phone img{width:100%;height:auto;display:block} .app-phone-1{top:40px;left:0;transform:rotate(-8deg);z-index:1} .app-phone-2{top:0;left:110px;transform:rotate(0deg);z-index:3} .app-phone-3{top:40px;left:220px;transform:rotate(8deg);z-index:2} .app-phones:hover .app-phone-1{transform:rotate(-12deg) translateX(-10px) translateY(-4px)} .app-phones:hover .app-phone-2{transform:translateY(-10px);box-shadow:0 30px 80px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.12),0 0 40px rgba(255,3,40,.08)} .app-phones:hover .app-phone-3{transform:rotate(12deg) translateX(10px) translateY(-4px)} @media(max-width:1024px){.app-phones{width:340px;height:400px}.app-phone{width:160px;border-radius:20px}.app-phone-1{top:30px;left:0}.app-phone-2{top:0;left:90px}.app-phone-3{top:30px;left:180px}} @media(max-width:768px){.app-phones{width:300px;height:360px;margin:0 auto}.app-phone{width:140px;border-radius:18px}.app-phone-1{top:28px;left:0}.app-phone-2{top:0;left:80px}.app-phone-3{top:28px;left:160px}} @media(max-width:480px){.app-phones{width:260px;height:320px}.app-phone{width:120px;border-radius:14px}.app-phone-1{top:24px;left:0}.app-phone-2{top:0;left:70px}.app-phone-3{top:24px;left:140px}} [data-theme="light"] .app-phone { box-shadow: 0 20px 60px rgba(0,0,0,.1),0 0 0 1px rgba(0,0,0,.06); } /* Payments strip */ [data-theme="light"] .pay-icon { background: #fff; border-color: rgba(0,0,0,.08); } /* Testimonial section */ [data-theme="light"] .testi-cin { background: #f5f6f8 !important; } [data-theme="light"] .testi-cin__mesh { display: none; } [data-theme="light"] .testi-grid { background: rgba(0,0,0,.04); } [data-theme="light"] .testi-card { background: #fff; } [data-theme="light"] .testi-card:hover { background: #fafafa; } [data-theme="light"] .testi-card__quote { color: #515769; } [data-theme="light"] .testi-card__quote::before { color: #FF0328; } [data-theme="light"] .testi-card__name { color: #050C1B; } /* FAQ */ [data-theme="light"] .faq-wow .faq-question { color: #050C1B; border-color: rgba(0,0,0,.08); } [data-theme="light"] .faq-wow .faq-question:hover { color: #FF0328; } [data-theme="light"] .faq-wow .faq-answer { color: #515769; } /* Footer */ [data-theme="light"] .footer { background: #f5f6f8 !important; } [data-theme="light"] .footer-heading { color: #050C1B; } [data-theme="light"] .footer-link { color: #515769; } [data-theme="light"] .footer-link:hover { color: #050C1B; } [data-theme="light"] .footer-bottom { color: #515769; border-color: rgba(0,0,0,.08); } [data-theme="light"] .footer-bottom a { color: #515769; } [data-theme="light"] .footer-bottom a:hover { color: #050C1B; } /* Mega nav (desktop dropdown) */ [data-theme="light"] .mega-nav__link { color: rgba(5,12,27,.5); } [data-theme="light"] .mega-nav__link:hover, [data-theme="light"] .mega-nav__item--has-sub.active .mega-nav__link { color: #050C1B; } [data-theme="light"] .mega-nav__pill { background: rgba(0,0,0,.05); } [data-theme="light"] .mega-panel__inner { background: #fff; border-color: rgba(0,0,0,.08); box-shadow: 0 24px 60px rgba(0,0,0,.12); } [data-theme="light"] .mega-panel__title { color: rgba(5,12,27,.4); } [data-theme="light"] .mega-panel__item:hover { background: rgba(0,0,0,.03); } [data-theme="light"] .mega-panel__icon { border-color: rgba(0,0,0,.1); } [data-theme="light"] .mega-panel__icon i, [data-theme="light"] .mega-panel__icon svg { color: #050C1B; } [data-theme="light"] .mega-panel__item:hover .mega-panel__icon { background: rgba(255,3,40,.1); border-color: rgba(255,3,40,.25); } [data-theme="light"] .mega-panel__item:hover .mega-panel__icon i, [data-theme="light"] .mega-panel__item:hover .mega-panel__icon svg { color: #FF0328; } [data-theme="light"] .mega-panel__text strong { color: #050C1B; } [data-theme="light"] .mega-panel__text small { color: #515769; } [data-theme="light"] .mega-panel__item:hover .mega-panel__text small { color: #FF0328; } /* Mobile menu */ [data-theme="light"] .mobile-nav-link { color: #050C1B; border-color: rgba(0,0,0,.06); } [data-theme="light"] .mobile-submenu a { color: #515769; } [data-theme="light"] .mobile-submenu a:hover { color: #050C1B; } /* General text overrides for Tailwind classes used in HTML */ [data-theme="light"] .text-white { color: #050C1B !important; } [data-theme="light"] .text-morning-grey { color: #515769 !important; } [data-theme="light"] .text-white\/60, [data-theme="light"] .text-white\/80 { color: rgba(5,12,27,.6) !important; } /* Payments strip */ [data-theme="light"] .payments-strip { background: rgba(5,12,27,.04) !important; border-color: rgba(0,0,0,.08) !important; } [data-theme="light"] .payments-strip span[style*="color:rgba(255,255,255"] { color: rgba(5,12,27,.4) !important; } [data-theme="light"] .payments-strip span[style*="border:1px"] { border-color: rgba(0,0,0,.1) !important; background: rgba(0,0,0,.02) !important; } [data-theme="light"] .payments-strip img { opacity: .8 !important; } /* Hero + CTA: keep all text white */ [data-theme="light"] .hero, [data-theme="light"] .hero *, [data-theme="light"] .hero .text-white, [data-theme="light"] .hero .text-white\/60, [data-theme="light"] .hero .text-white\/80, [data-theme="light"] .hero .font-koulen, [data-theme="light"] .hero p, [data-theme="light"] .hero span { color: #fff !important; } [data-theme="light"] .hero .text-bt-red { color: #FF0328 !important; } [data-theme="light"] .hero .hero__sub { color: #8E9FB6 !important; } [data-theme="light"] .hero .btn-primary { color: #fff !important; } [data-theme="light"] .hero .btn-outline { color: #fff !important; border-color: #fff !important; } [data-theme="light"] .hero .hero-scroll, [data-theme="light"] .hero .hero-scroll span { color: rgba(5,12,27,.6) !important; } [data-theme="light"] .hero .hero-scroll-line { background: rgba(5,12,27,.2) !important; } [data-theme="light"] .hero .hero-ticker *, [data-theme="light"] .hero .ticker-track span { color: rgba(5,12,27,.4) !important; } /* Hero text in light mode — dark text on light bg */ [data-theme="light"] .hero .text-white { color: #fff !important; } /* Koulen headings that use inline color */ [data-theme="light"] .font-koulen { color: #050C1B; } [data-theme="light"] .hero .font-koulen { color: #fff !important; } /* Event page heroes (sections with bg images that should keep white text in light mode) */ [data-theme="light"] .hero-dark, [data-theme="light"] .hero-dark *, [data-theme="light"] .hero-dark .text-white, [data-theme="light"] .hero-dark .text-white\/70, [data-theme="light"] .hero-dark .font-koulen, [data-theme="light"] .hero-dark p, [data-theme="light"] .hero-dark span { color: #fff !important; } [data-theme="light"] .hero-dark .text-bt-red { color: #FF0328 !important; } [data-theme="light"] .hero-dark .btn-primary { color: #fff !important; } [data-theme="light"] .hero-dark .btn-outline { color: #fff !important; border-color: #fff !important; } /* Dark cards on light backgrounds — keep text white */ [data-theme="light"] [style*="linear-gradient(135deg,#1a2236"] .text-white, [data-theme="light"] [style*="linear-gradient(135deg,#1a2236"] .font-koulen, [data-theme="light"] [style*="linear-gradient(135deg,#1a2236"] h3, [data-theme="light"] [style*="linear-gradient(135deg,#1a2236"] h4 { color: #fff !important; } [data-theme="light"] [style*="linear-gradient(135deg,#1a2236"] .text-morning-grey, [data-theme="light"] [style*="linear-gradient(135deg,#1a2236"] p { color: #8E9FB6 !important; } /* Logo swap — show light logo (dark text) in light mode */ [data-theme="light"] .logo-dark { display: none !important; } [data-theme="light"] .logo-light { display: block !important; } /* Dark/light image swap */ [data-theme="light"] .img-dark { display: none !important; } [data-theme="light"] .img-light { display: block !important; } /* Borders that use white alpha → black alpha */ [data-theme="light"] .border-white\/80 { border-color: rgba(0,0,0,.08) !important; } /* ========================================================================== 18. Responsive Helpers ========================================================================== */ /* Stack utility grids on mobile */ @media (max-width: 767px) { .grid-responsive { grid-template-columns: 1fr !important; } .hero { min-height: 90vh; padding-top: 80px; } .stats-bar { padding: 40px 0; } .footer { padding: 48px 0; } .nav-dropdown { position: fixed; left: 16px; right: 16px; top: auto; transform: none; min-width: auto; width: auto; } } @media (max-width: 1023px) { .hide-tablet { display: none; } } @media (max-width: 767px) { .hide-mobile { display: none; } } @media (min-width: 768px) { .show-mobile-only { display: none; } } /* ========================================================================== 19. Reduced Motion ========================================================================== */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== MEGA NAV (shared across all pages via partial) ========================================================================== */ .mega-nav{position:relative;list-style:none;margin:0;padding:0} .mega-nav__item{position:relative} .mega-nav__link{position:relative;display:flex;align-items:center;gap:5px;padding:8px 16px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:14px;font-weight:500;color:rgba(255,255,255,.5);text-decoration:none;border:none;background:none;cursor:pointer;transition:color .3s;white-space:nowrap;border-radius:99px} .mega-nav__link:hover,.mega-nav__item--has-sub.active .mega-nav__link{color:#fff} .mega-chevron{transition:transform .3s ease;opacity:.6} .mega-nav__item--has-sub.active .mega-chevron{transform:rotate(180deg);opacity:1} .mega-nav__pill{position:absolute;background:rgba(255,255,255,.08);border-radius:99px;pointer-events:none;transition:all .3s cubic-bezier(.22,1,.36,1);opacity:0;z-index:0} .mega-nav__pill.visible{opacity:1} .mega-panel{position:absolute;left:50%;top:100%;transform:translateX(-50%) translateY(8px);padding-top:12px;z-index:100;opacity:0;visibility:hidden;pointer-events:none;transition:opacity .25s ease,visibility .25s ease,transform .25s ease} .mega-panel.open,.mega-nav__item--has-sub.active .mega-panel{opacity:1;visibility:visible;pointer-events:auto;transform:translateX(-50%) translateY(0)} .mega-panel__inner{background:#0A0A0A;border:1px solid rgba(255,255,255,.08);border-radius:16px;padding:24px;display:flex;gap:36px;min-width:680px;box-shadow:0 24px 60px rgba(0,0,0,.5)} .mega-panel__col{min-width:190px} .mega-panel__title{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.1em;color:rgba(255,255,255,.35);margin-bottom:16px;padding:0 4px} .mega-panel__item{display:flex;align-items:flex-start;gap:12px;padding:8px 4px;border-radius:10px;text-decoration:none;transition:background .2s;margin-bottom:4px} .mega-panel__item:hover{background:rgba(255,255,255,.06)} .mega-panel__icon{display:flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:8px;border:1px solid rgba(255,255,255,.15);flex-shrink:0;transition:all .25s} .mega-panel__icon i{width:18px;height:18px;color:#fff} .mega-panel__item:hover .mega-panel__icon{background:rgba(255,3,40,.1);border-color:rgba(255,3,40,.25)} .mega-panel__item:hover .mega-panel__icon i{color:#FF0328} .mega-panel__text{display:flex;flex-direction:column;gap:2px;min-width:0} .mega-panel__text strong{font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:13px;font-weight:600;color:#fff;white-space:nowrap} .mega-panel__text small{font-size:11px;color:rgba(255,255,255,.4);transition:color .2s;white-space:nowrap} .mega-panel__item:hover .mega-panel__text small{color:rgba(255,255,255,.7)} /* Mobile submenu (shared) */ .mobile-submenu{max-height:0;overflow:hidden;transition:max-height .3s ease} .mobile-submenu.open{max-height:600px} .mobile-nav-link{display:flex;align-items:center;justify-content:space-between;padding:14px 0;font-family:'Koulen',sans-serif;font-size:20px;text-transform:uppercase;color:#fff;border-bottom:1px solid rgba(255,255,255,.06);cursor:pointer} .mobile-nav-link:hover{color:#FF0328} .mobile-submenu a{display:flex;align-items:center;gap:10px;padding:10px 0 10px 12px;color:#8E9FB6;font-size:15px;transition:color .2s} .mobile-submenu a:hover{color:#fff} .mobile-submenu a i,.mobile-submenu a svg{width:18px;height:18px;color:#FF0328} /* Language toggle */ .lang-toggle{display:inline-flex;gap:2px;border:none;background:transparent} .lang-switch{padding:2px 6px;font-family:'Helvetica Neue',Helvetica,Arial,sans-serif;font-size:10px;font-weight:600;letter-spacing:.04em;color:rgba(255,255,255,.3);cursor:pointer;transition:color .2s;background:transparent;border:none;line-height:1.4} .lang-switch:hover{color:rgba(255,255,255,.6)} .lang-switch--active{color:rgba(255,255,255,.7)} html[data-theme="light"] .lang-switch{color:rgba(0,0,0,.25)} html[data-theme="light"] .lang-switch:hover{color:rgba(0,0,0,.5)} html[data-theme="light"] .lang-switch--active{color:rgba(0,0,0,.6)}