/* ============================================================ BURSAEDGE — SHARED THEME SYSTEM Token-based light/dark theming. Dark = "V2" (default). Light = "Combo V5". Flip via [data-theme] on . Used by both bursaedge.com and wait.bursaedge.com ============================================================ */ /* ---------- ACCENT TOKENS (shared across themes) ---------- */ :root { --violet: #635bff; --violet-hover: #5249e8; --violet-glow: #7B73FF; --blue: #3B82F6; --blue-deep: #2563EB; --teal: #06B6D4; --indigo: #8B5CF6; --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --radius-card: 16px; --radius-btn: 10px; --maxw: 1200px; } /* ---------- DARK THEME (default — "V2") ---------- */ :root, [data-theme="dark"] { --bg-page: #0B0F1A; --bg-alt: #0F1426; --bg-gradient: linear-gradient(170deg, #0B0F1A 0%, #0F1629 45%, #141929 100%); --bg-gradient-soft: linear-gradient(170deg, #0F1629 0%, #141929 100%); --marquee-bg: #0D1220; --surface: rgba(20,25,41,0.7); --surface-solid: #141929; --surface-hover: rgba(99,91,255,0.06); --border: rgba(99,91,255,0.14); --border-soft: rgba(255,255,255,0.08); --text-1: #ffffff; --text-2: rgba(255,255,255,0.62); --text-3: rgba(255,255,255,0.42); --text-4: rgba(255,255,255,0.28); --eyebrow: #A5B4FC; --green: #34D399; --red: #F87171; --amber: #F59E0B; --green-text: #34D399; /* text-safe status label on dark badge (unchanged) */ --violet-text: #7B73FF; /* text-safe status label on dark badge (unchanged) */ --card-shadow: 0 8px 40px rgba(0,0,0,0.3), 0 0 60px rgba(99,91,255,0.06); --orb-opacity: 0.6; --grid-opacity: 0.03; --grid-color: rgba(255,255,255,0.5); --input-bg: rgba(255,255,255,0.06); --input-bg-focus: rgba(255,255,255,0.09); --input-border: rgba(255,255,255,0.1); --header-bg: rgba(11,15,26,0.85); --btn-sec-border: rgba(255,255,255,0.14); --btn-sec-text: rgba(255,255,255,0.82); --btn-sec-hover-bg: rgba(255,255,255,0.05); --eyebrow-bg: rgba(99,91,255,0.12); --eyebrow-border: rgba(99,91,255,0.18); } /* ---------- LIGHT THEME ("Combo V5") ---------- Contrast pass (2026-06-15): blocks now read as distinct cards and muted text passes WCAG AA. Surfaces stay #fff but LIFT off the page via a stronger border + real elevation (mirrors dark mode's card lift); the muted text ramp was raised because #98A2B3/#C0C5CE failed AA on white. */ [data-theme="light"] { --bg-page: #ffffff; --bg-alt: #F2F4F7; /* perceptible band so white cards/sections separate */ --bg-gradient: linear-gradient(170deg, #ffffff 0%, #FAFAFF 55%, #F5F3FF 100%); /* fix: was #FAFAFFF (invalid 7-digit hex) */ --bg-gradient-soft: linear-gradient(170deg, #F9FAFB 0%, #F5F3FF 100%); --marquee-bg: #FAFAFB; --surface: #ffffff; --surface-solid: #ffffff; --surface-hover: rgba(99,91,255,0.07); /* clearer active-row / hover on white */ --border: #D0D5DD; /* visible card edges + dividers (was #EAECF0 ≈1.2:1, invisible) */ --border-soft: #E4E7EC; /* inner hairlines, subordinate to --border */ --text-1: #101828; /* ≈16:1 headings / primary */ --text-2: #475467; /* ≈7:1 body */ --text-3: #667085; /* ≈4.8:1 muted — now AA (was #98A2B3 ≈2.5:1, failed) */ --text-4: #6B7280; /* ≈4.5:1 faintest readable tier — now AA on white (was #C0C5CE ≈1.7:1) */ --eyebrow: #5248E6; /* AA on the #F5F3FF chip (was #635bff ≈4.4:1, marginal) */ --green: #12B76A; --red: #B42318; --amber: #DC6803; --green-text: #0A7A47; /* ≈5:1 status label on the pale-green badge (vivid --green stays for the dot) */ --violet-text: #5248E6; /* ≈5.3:1 status label on the pale-violet badge */ --card-shadow: 0 1px 2px rgba(16,24,40,0.06), 0 4px 10px rgba(16,24,40,0.07), 0 12px 28px rgba(16,24,40,0.06); /* real elevation so white cards lift off near-white bg */ --orb-opacity: 0.4; --grid-opacity: 0.05; --grid-color: rgba(16,24,40,0.4); --input-bg: #ffffff; --input-bg-focus: #ffffff; --input-border: #D0D5DD; --header-bg: rgba(255,255,255,0.85); --btn-sec-border: #D0D5DD; --btn-sec-text: #101828; --btn-sec-hover-bg: #F2F4F7; /* clearer secondary-button hover */ --eyebrow-bg: #F5F3FF; --eyebrow-border: rgba(99,91,255,0.18); /* slightly more visible chip edge */ } /* ============================================================ RESET + BASE ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--font); color: var(--text-1); background: var(--bg-page); font-size: 17px; line-height: 1.65; overflow-x: hidden; transition: background 0.4s ease, color 0.4s ease; } a { text-decoration: none; color: inherit; } input, button, textarea, select { font-family: var(--font); } p { text-wrap: pretty; } h1, h2, h3, h4 { color: var(--text-1); } :focus-visible { outline: 2px solid var(--violet); outline-offset: 2px; border-radius: 4px; } /* ============================================================ LAYOUT HELPERS ============================================================ */ .be-container { max-width: var(--maxw); margin: 0 auto; padding: 0 32px; } .be-section { padding: 120px 32px; position: relative; overflow: hidden; } .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 32px; } .grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 32px; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; } .hero-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 64px; align-items: center; } /* ============================================================ TYPOGRAPHY UTILITIES ============================================================ */ .eyebrow { display: inline-block; font-size: 12px; font-weight: 600; color: var(--eyebrow); letter-spacing: 0.06em; text-transform: uppercase; } .h1 { font-size: 60px; font-weight: 700; letter-spacing: -0.03em; line-height: 1.05; } .h2 { font-size: 40px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; } .h3 { font-size: 22px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; } .lead { font-size: 21px; font-weight: 400; color: var(--text-2); line-height: 1.5; } .body { font-size: 17px; color: var(--text-2); line-height: 1.65; } .tnum { font-variant-numeric: tabular-nums; } /* ============================================================ BUTTONS ============================================================ */ .btn-glow { display: inline-flex; align-items: center; justify-content: center; gap: 8px; height: 48px; padding: 14px 28px; background: linear-gradient(135deg, var(--violet) 0%, var(--blue) 100%); color: #fff; border: none; border-radius: var(--radius-btn); font-weight: 600; font-size: 16px; cursor: pointer; white-space: nowrap; box-shadow: 0 0 20px rgba(99,91,255,0.3), 0 0 60px rgba(59,130,246,0.1); position: relative; overflow: hidden; transition: box-shadow 0.2s ease; } .btn-glow::before { content: ''; position: absolute; inset: -2px; background: linear-gradient(135deg, var(--violet), var(--blue), var(--teal), var(--violet)); background-size: 300% 300%; animation: gradientShift 4s ease infinite; border-radius: inherit; z-index: -1; opacity: 0; transition: opacity 0.3s ease; } .btn-glow:hover::before { opacity: 1; } .btn-glow:hover { box-shadow: 0 0 30px rgba(99,91,255,0.4), 0 0 80px rgba(59,130,246,0.15); } .btn-glow-sm { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 8px 18px; background: linear-gradient(135deg, var(--violet) 0%, var(--blue) 100%); color: #fff; border: none; border-radius: 8px; font-weight: 500; font-size: 14px; cursor: pointer; white-space: nowrap; box-shadow: 0 0 14px rgba(99,91,255,0.22); transition: box-shadow 0.2s ease; } .btn-glow-sm:hover { box-shadow: 0 0 22px rgba(99,91,255,0.38); } .btn-secondary { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 48px; padding: 14px 24px; background: transparent; color: var(--btn-sec-text); border: 1px solid var(--btn-sec-border); border-radius: var(--radius-btn); font-weight: 500; font-size: 16px; cursor: pointer; white-space: nowrap; transition: all 0.2s ease; } .btn-secondary:hover { background: var(--btn-sec-hover-bg); border-color: var(--violet); } .btn-secondary-sm { display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: 38px; padding: 8px 16px; background: transparent; color: var(--btn-sec-text); border: 1px solid var(--btn-sec-border); border-radius: 8px; font-weight: 500; font-size: 14px; cursor: pointer; white-space: nowrap; transition: all 0.2s ease; } .btn-secondary-sm:hover { background: var(--btn-sec-hover-bg); border-color: var(--violet); } .nav-link { font-size: 15px; font-weight: 500; color: var(--text-2); transition: color 0.2s ease; cursor: pointer; } .nav-link:hover { color: var(--text-1); } /* ============================================================ CARDS ============================================================ */ .be-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-card); box-shadow: var(--card-shadow); backdrop-filter: blur(20px); } /* ============================================================ KEYFRAMES ============================================================ */ @keyframes orbFloat0 { 0%, 100% { transform: translate(-50%, -50%) translate(0, 0); } 33% { transform: translate(-50%, -50%) translate(34px, -44px); } 66% { transform: translate(-50%, -50%) translate(-22px, 22px); } } @keyframes orbFloat1 { 0%, 100% { transform: translate(-50%, -50%) translate(0, 0); } 33% { transform: translate(-50%, -50%) translate(-44px, 32px); } 66% { transform: translate(-50%, -50%) translate(26px, -16px); } } @keyframes orbFloat2 { 0%, 100% { transform: translate(-50%, -50%) translate(0, 0); } 33% { transform: translate(-50%, -50%) translate(22px, 38px); } 66% { transform: translate(-50%, -50%) translate(-38px, -26px); } } @keyframes glowRingPulse { 0%, 100% { transform: scale(1); opacity: 0.25; } 50% { transform: scale(1.7); opacity: 0; } } @keyframes cursorBlink { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } @keyframes gradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } @keyframes marquee-scroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } @keyframes spin { to { transform: rotate(360deg); } } @keyframes shimmer { 0% { background-position: -200% 0; } 100% { background-position: 200% 0; } } @keyframes revealUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes typingCursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .marquee-track { display: flex; align-items: center; animation: marquee-scroll 32s linear infinite; width: max-content; } .marquee-track:hover { animation-play-state: paused; } /* ============================================================ SC REGULATORY FOOTER (small, muted) ============================================================ */ .sc-footer { font-size: 13px; color: var(--text-3); line-height: 1.65; text-align: center; max-width: 820px; margin: 0 auto; } .sc-footer a { color: var(--text-2); text-decoration: underline; text-underline-offset: 2px; } .sc-footer a:hover { color: var(--violet); } /* ============================================================ EFFECTS ============================================================ */ /* Progressive enhancement: content is visible by default (no-JS / SSR). Only once JS sets html.js do we hide-then-reveal on scroll. */ .reveal-el { transition: opacity 0.7s cubic-bezier(0.16,1,0.3,1), transform 0.7s cubic-bezier(0.16,1,0.3,1); will-change: opacity, transform; } .js .reveal-el { opacity: 0; transform: translateY(40px); } .js .reveal-el.is-visible { opacity: 1; transform: none; } .tilt-card { transition: transform 0.2s ease-out; position: relative; overflow: hidden; } .tilt-glow { position: absolute; inset: 0; pointer-events: none; z-index: 1; transition: background 0.15s ease; border-radius: inherit; } .tilt-content { position: relative; z-index: 2; } .cursor-glow { position: fixed; pointer-events: none; z-index: 9998; width: 480px; height: 480px; border-radius: 50%; background: radial-gradient(circle, rgba(99,91,255,0.08) 0%, rgba(59,130,246,0.03) 42%, transparent 70%); transform: translate(-50%, -50%); transition: left 0.09s linear, top 0.09s linear, opacity 0.4s ease; opacity: 0; mix-blend-mode: screen; left: -400px; top: -400px; } .floating-orbs { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; opacity: var(--orb-opacity); } .orb { position: absolute; border-radius: 50%; filter: blur(44px); } .grid-overlay { position: absolute; inset: 0; opacity: var(--grid-opacity); pointer-events: none; z-index: 0; background-image: linear-gradient(var(--grid-color) 1px, transparent 1px), linear-gradient(90deg, var(--grid-color) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, black 30%, transparent 75%); } /* header scroll state */ header.scrolled { background: var(--header-bg) !important; backdrop-filter: blur(16px) saturate(1.3) !important; -webkit-backdrop-filter: blur(16px) saturate(1.3) !important; border-bottom-color: var(--border) !important; } /* hide on mobile */ .hide-mobile { display: flex; } @media (max-width: 860px) { .hide-mobile { display: none !important; } } /* FAQ hover */ .faq-item { padding-bottom: 26px; margin-bottom: 26px; padding-left: 16px; border-left: 2px solid transparent; transition: border-left-color 0.2s ease; } .faq-item:hover { border-left-color: var(--violet); } .faq-item:not(:last-child) { border-bottom: 1px solid var(--border); } /* theme toggle button */ .theme-toggle { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--btn-sec-border); background: transparent; color: var(--text-2); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: all 0.2s ease; padding: 0; } .theme-toggle:hover { background: var(--btn-sec-hover-bg); border-color: var(--violet); color: var(--violet); } /* pillar bars */ .pillar-bar-fill { height: 100%; border-radius: 3px; background: linear-gradient(90deg, var(--violet), var(--blue)); box-shadow: 0 0 8px rgba(99,91,255,0.3); width: 0; transition: width 1s cubic-bezier(0.16,1,0.3,1); } .pillar-bars-visible .pillar-bar-fill { } /* glow dot */ .glow-dot { position: relative; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; } .glow-dot-ring1 { position: absolute; border-radius: 50%; animation: glowRingPulse 2s ease-in-out infinite; opacity: 0.18; } .glow-dot-ring2 { position: absolute; border-radius: 50%; animation: glowRingPulse 2s ease-in-out 0.3s infinite; opacity: 0.28; } .glow-dot-core { border-radius: 50%; position: relative; } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 900px) { .grid-4 { grid-template-columns: 1fr 1fr; } } @media (max-width: 768px) { .be-section { padding: 72px 20px; } .be-container { padding: 0 20px; } .hero-grid { grid-template-columns: 1fr; gap: 48px; } .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } .h1 { font-size: 40px; } .h2 { font-size: 30px; } .lead { font-size: 18px; } } @media (max-width: 480px) { .h1 { font-size: 34px; } .h2 { font-size: 26px; } .be-section { padding: 56px 16px; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; } .marquee-track { animation: none !important; } .reveal-el { opacity: 1 !important; transform: none !important; transition: none !important; } .pillar-bar-fill { transition: none !important; } }