/* Zyra.ai — shared styles for all pages (index, features, pricing, login, signup, app) */ /* Themed via [data-theme="dark" | "light"] on . Auto resolves via prefers-color-scheme. */ :root, [data-theme="dark"] { --bg: #0A0E18; --bg-2: #12172A; --surface: #161C30; --surface-2: #1E2540; --border: #262D48; --border-hi: #2F3858; --text: #F4F6FB; --text-2: #D2D8E5; --muted: #8C96AE; --dim: #5C6684; --accent: #FF7A1A; --accent-2: #FFB14D; --accent-b: #3F8CFF; --success: #4ADE80; --shadow-lg: 0 30px 80px rgba(0,0,0,0.45), 0 8px 24px rgba(0,0,0,0.25); --shadow-glow:0 0 0 1px rgba(255,122,26,0.25), 0 20px 60px rgba(255,122,26,0.18); --radius: 14px; --radius-lg: 20px; --ease: cubic-bezier(.2, .8, .2, 1); /* Theme-specific primitives used across the site */ --sidebar-bg: #0D1224; --head-bg: rgba(10,14,24,0.6); --composer-bg: rgba(10,14,24,0.75); --glow-orange: rgba(255,122,26,0.22); --glow-blue: rgba(63,140,255,0.18); --dots-color: rgba(255,255,255,0.035); --hover-bg: rgba(255,255,255,0.04); --hover-bg-strong: rgba(255,255,255,0.08); --modal-backdrop: rgba(5,8,18,0.72); --row-hover: #1a2138; --shadow-soft: 0 8px 28px rgba(0,0,0,0.3); } [data-theme="light"] { --bg: #F8FAFC; --bg-2: #EEF1F6; --surface: #FFFFFF; --surface-2: #F5F7FB; --border: #E4E8EF; --border-hi: #CFD6E0; --text: #0D1220; --text-2: #2A3142; --muted: #5E6678; --dim: #8B93A3; /* brand accents stay identical */ --shadow-lg: 0 20px 50px rgba(10,14,24,0.10), 0 4px 14px rgba(10,14,24,0.06); --shadow-glow:0 0 0 1px rgba(255,122,26,0.35), 0 14px 40px rgba(255,122,26,0.14); --sidebar-bg: #F2F4F9; --head-bg: rgba(255,255,255,0.75); --composer-bg: rgba(255,255,255,0.85); --glow-orange: rgba(255,122,26,0.12); --glow-blue: rgba(63,140,255,0.10); --dots-color: rgba(10,14,24,0.05); --hover-bg: rgba(10,14,24,0.05); --hover-bg-strong: rgba(10,14,24,0.09); --modal-backdrop: rgba(15,20,35,0.45); --row-hover: #E8EDF5; --shadow-soft: 0 6px 20px rgba(10,14,24,0.08); } html { background: var(--bg); color-scheme: dark; } [data-theme="light"] html, html[data-theme="light"] { color-scheme: light; } /* ===== Cookie consent banner + customize modal ===== */ .cookie-banner { position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%) translateY(20px); max-width: min(680px, calc(100% - 24px)); width: 100%; z-index: 300; background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--border-hi); border-radius: 14px; box-shadow: var(--shadow-lg); padding: 16px 18px; display: flex; align-items: center; gap: 16px; opacity: 0; pointer-events: none; transition: opacity .2s var(--ease), transform .2s var(--ease); } .cookie-banner.show { opacity: 1; pointer-events: auto; transform: translateX(-50%) translateY(0); } .cookie-banner .cb-text { flex: 1; min-width: 0; font-size: 13.5px; line-height: 1.55; color: var(--text-2); } .cookie-banner .cb-text strong { color: var(--text); margin-right: 3px; } .cookie-banner .cb-text a { color: var(--accent-2); text-decoration: none; border-bottom: 1px solid rgba(255,177,77,0.35); } .cookie-banner .cb-text a:hover { color: var(--accent); } .cookie-banner .cb-actions { display: flex; gap: 8px; flex-shrink: 0; } .cb-btn { font-family: inherit; font-size: 13px; font-weight: 700; padding: 9px 14px; border-radius: 10px; cursor: pointer; border: 1px solid transparent; white-space: nowrap; transition: filter .15s var(--ease), border-color .15s var(--ease), background .15s var(--ease); } .cb-btn-ghost { background: transparent; color: var(--text-2); border-color: var(--border-hi); } .cb-btn-ghost:hover { background: var(--hover-bg); color: var(--text); border-color: var(--accent-2); } .cb-btn-primary { background: linear-gradient(135deg, var(--accent), var(--accent-2)); color: var(--bg); } .cb-btn-primary:hover { filter: brightness(1.06); } /* Customize modal */ .cookie-modal-backdrop { position: fixed; inset: 0; z-index: 320; background: var(--modal-backdrop); backdrop-filter: blur(4px); display: none; align-items: center; justify-content: center; padding: 20px; opacity: 0; transition: opacity .18s var(--ease); } .cookie-modal-backdrop.show { display: flex; opacity: 1; } .cookie-modal { position: relative; width: 100%; max-width: 520px; background: linear-gradient(180deg, var(--surface-2), var(--surface)); border: 1px solid var(--border-hi); border-radius: 16px; padding: 26px 26px 22px; box-shadow: var(--shadow-lg); } .cookie-modal h3 { margin: 0 0 6px; font-size: 18px; } .cookie-modal .cm-sub { margin: 0 0 20px; color: var(--muted); font-size: 13.5px; line-height: 1.5; } .cookie-modal .cm-close { position: absolute; top: 14px; right: 14px; background: transparent; border: none; cursor: pointer; color: var(--muted); font-size: 24px; line-height: 1; padding: 4px 10px; border-radius: 8px; } .cookie-modal .cm-close:hover { color: var(--text); background: var(--hover-bg); } .cookie-modal .cm-row { display: flex; align-items: flex-start; gap: 14px; padding: 14px 0; border-top: 1px solid var(--border); } .cookie-modal .cm-row:first-of-type { border-top: none; padding-top: 4px; } .cookie-modal .cm-main { flex: 1; min-width: 0; } .cookie-modal .cm-title { font-size: 14.5px; font-weight: 700; color: var(--text); } .cookie-modal .cm-desc { font-size: 12.5px; color: var(--muted); margin-top: 3px; line-height: 1.5; } /* Toggle switch */ .cookie-modal .cm-switch { position: relative; display: inline-flex; align-items: center; flex-shrink: 0; padding-top: 4px; } .cookie-modal .cm-switch input { appearance: none; position: absolute; inset: 0; opacity: 0; cursor: pointer; } .cookie-modal .cm-switch .cm-slider { width: 40px; height: 22px; border-radius: 999px; background: var(--border-hi); position: relative; transition: background .2s var(--ease); } .cookie-modal .cm-switch .cm-slider::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: transform .2s var(--ease); } .cookie-modal .cm-switch input:checked + .cm-slider { background: linear-gradient(135deg, var(--accent), var(--accent-2)); } .cookie-modal .cm-switch input:checked + .cm-slider::after { transform: translateX(18px); } .cookie-modal .cm-switch.locked { font-size: 10.5px; font-weight: 800; letter-spacing: 1.2px; text-transform: uppercase; color: var(--muted); background: var(--bg-2); border: 1px solid var(--border); padding: 4px 10px; border-radius: 999px; } .cookie-modal .cm-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 18px; } @media (max-width: 640px) { .cookie-banner { flex-direction: column; align-items: stretch; gap: 12px; left: 12px; right: 12px; transform: translateY(20px); bottom: 12px; max-width: none; } .cookie-banner.show { transform: translateY(0); } .cookie-banner .cb-actions { justify-content: stretch; } .cookie-banner .cb-actions .cb-btn { flex: 1; } .cookie-banner .cb-text { font-size: 13px; } .cookie-modal { padding: 22px 20px 18px; } .cookie-modal .cm-row { gap: 10px; padding: 12px 0; } } /* Accessibility helper: visually hidden but available to screen readers */ .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } /* ===== Mobile-friendly global defaults ===== */ html { -webkit-text-size-adjust: 100%; /* no iOS Safari auto-zoom */ -webkit-tap-highlight-color: rgba(255,122,26,0.18); scroll-behavior: smooth; } body { overscroll-behavior-y: contain; /* prevent pull-to-refresh bounce affecting chat */ } img, svg, video { max-width: 100%; height: auto; } button, a { touch-action: manipulation; } /* prevents 300ms tap delay + double-tap zoom on buttons */ /* iOS Safari zooms on any input < 16px — force 16px on small screens */ @media (max-width: 600px) { input, textarea, select { font-size: 16px !important; } } /* Safe-area insets — apply to nav + footer only (avoid breaking full-bleed layouts) */ @supports (padding: max(env(safe-area-inset-left))) { nav.topnav { padding-left: max(24px, env(safe-area-inset-left)) !important; padding-right: max(24px, env(safe-area-inset-right)) !important; } footer.site-footer { padding-left: env(safe-area-inset-left); padding-right: env(safe-area-inset-right); } } body { min-height: 100vh; background: var(--bg); color: var(--text); font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; position: relative; } /* Ambient background glows */ body::before, body::after { content: ""; position: fixed; pointer-events: none; z-index: 0; filter: blur(40px); } body::before { top: -20%; left: -10%; width: 900px; height: 900px; background: radial-gradient(closest-side, var(--glow-orange), transparent); } body::after { bottom: -30%; right: -15%; width: 1000px; height: 1000px; background: radial-gradient(closest-side, var(--glow-blue), transparent); } /* Subtle grid dots */ .dots { position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: radial-gradient(var(--dots-color) 1px, transparent 1px); background-size: 48px 48px; mask-image: radial-gradient(ellipse at center, rgba(0,0,0,0.9), rgba(0,0,0,0.1) 70%, transparent); } /* Layout */ .container { position: relative; z-index: 1; width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 32px; } .container-narrow { max-width: 880px; } section { position: relative; z-index: 2; } /* ===== Nav ===== */ nav.topnav { position: relative; z-index: 5; display: flex; align-items: center; justify-content: space-between; padding: 22px 32px; max-width: 1200px; margin: 0 auto; } .logo { display: flex; align-items: center; gap: 14px; text-decoration: none; color: var(--text); font-weight: 900; font-size: 26px; letter-spacing: -0.025em; line-height: 1; } .logo-mark { width: 44px; height: 44px; border-radius: 12px; background: radial-gradient(circle at 30% 20%, rgba(255,255,255,0.35), transparent 55%), linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); display: grid; place-items: center; box-shadow: 0 8px 26px rgba(255,122,26,0.42), inset 0 -4px 10px rgba(0,0,0,0.15), inset 0 1px 0 rgba(255,255,255,0.35); position: relative; overflow: hidden; } .logo-mark::after { /* subtle shine */ content: ''; position: absolute; inset: 0; background: linear-gradient(160deg, rgba(255,255,255,0.18) 0%, transparent 40%); pointer-events: none; } .logo-mark svg { width: 28px; height: 28px; position: relative; z-index: 1; } .logo .brand-b { background: linear-gradient(135deg, var(--accent-2), var(--accent)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--accent-2); } @media (max-width: 640px) { .logo { font-size: 22px; gap: 10px; } .logo-mark { width: 38px; height: 38px; border-radius: 11px; } .logo-mark svg { width: 24px; height: 24px; } } .nav-links { display: flex; align-items: center; gap: 28px; } .nav-links a { color: var(--text-2); text-decoration: none; font-size: 14.5px; font-weight: 500; transition: color .2s var(--ease); } .nav-links a:hover { color: var(--text); } .nav-links a.active { color: var(--text); } /* ===== Mobile hamburger nav menu ===== */ .nav-hamburger-wrap { position: relative; display: inline-block; } .nav-hamburger { display: none; align-items: center; justify-content: center; width: 38px; height: 38px; background: var(--surface); border: 1px solid var(--border-hi); border-radius: 10px; color: var(--text); cursor: pointer; padding: 0; font-family: inherit; transition: all .15s var(--ease); } .nav-hamburger:hover { border-color: var(--accent-2); background: var(--surface-2); } .nav-hamburger svg { width: 19px; height: 19px; } .nav-dropdown { position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; background: var(--surface-2); border: 1px solid var(--border-hi); border-radius: 12px; padding: 5px; box-shadow: var(--shadow-lg); display: none; z-index: 120; } .nav-dropdown.show { display: block; animation: navDropIn .15s var(--ease); } @keyframes navDropIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } .nav-dropdown a { display: block; padding: 11px 14px; border-radius: 8px; color: var(--text-2); text-decoration: none; font-size: 14.5px; font-weight: 500; transition: all .15s var(--ease); } .nav-dropdown a:hover { background: var(--hover-bg); color: var(--text); } .nav-dropdown-sep { height: 1px; background: var(--border); margin: 4px 6px; } .nav-dropdown a.nav-dropdown-sub { font-size: 13px; color: var(--muted); } .nav-dropdown a.nav-dropdown-sub:hover { color: var(--text-2); } /* Desktop: keep the same spacing the nav had before the inline wrap existed */ .nav-links-inline { display: inline-flex; align-items: center; gap: 28px; } @media (max-width: 860px) { /* Hide desktop inline links; hamburger takes over */ .nav-links-inline { display: none; } .nav-hamburger { display: inline-flex; } /* Elements marked to drop off on phones */ .hide-mobile { display: none !important; } /* Tighten gaps on mobile. Hamburger and theme sit right next to each other. */ .nav-links { gap: 4px; } .nav-hamburger-wrap + .theme-btn { margin-left: -2px; } .nav-hamburger { width: 36px; height: 36px; } .theme-btn { width: 36px; height: 36px; } /* Hide the footer link column on mobile — those live in the hamburger menu now. Keep only the copyright line on the left. */ footer.site-footer .footer-row > div:nth-child(2) { display: none; } footer.site-footer { text-align: center; } footer.site-footer .footer-row { justify-content: center; } } /* ===== Theme toggle button (used in nav across all pages) ===== */ .theme-btn { position: relative; display: inline-grid; place-items: center; width: 36px; height: 36px; background: var(--surface); border: 1px solid var(--border-hi); border-radius: 10px; color: var(--text-2); cursor: pointer; font-family: inherit; transition: all .2s var(--ease); } .theme-btn:hover { color: var(--text); border-color: var(--accent-2); background: var(--surface-2); } .theme-btn svg { width: 17px; height: 17px; } .theme-popover { position: absolute; top: calc(100% + 8px); right: 0; z-index: 500; background: var(--surface-2); border: 1px solid var(--border-hi); border-radius: 12px; padding: 5px; min-width: 160px; box-shadow: var(--shadow-lg); display: none; } .theme-popover.show { display: block; } .theme-opt { display: flex; align-items: center; gap: 10px; width: 100%; padding: 9px 10px; background: transparent; border: none; border-radius: 8px; cursor: pointer; color: var(--text-2); font-family: inherit; font-size: 13.5px; font-weight: 500; text-align: left; } .theme-opt:hover { background: var(--hover-bg); color: var(--text); } .theme-opt.active { background: var(--hover-bg); color: var(--accent-2); font-weight: 700; } .theme-opt svg { width: 15px; height: 15px; flex-shrink: 0; } .theme-opt .check { margin-left: auto; width: 14px; height: 14px; color: var(--accent-2); opacity: 0; } .theme-opt.active .check { opacity: 1; } /* ===== Buttons ===== */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: none; cursor: pointer; font-family: inherit; font-weight: 700; transition: transform .15s var(--ease), box-shadow .2s var(--ease), filter .2s var(--ease); white-space: nowrap; text-decoration: none; } .btn-primary { background: linear-gradient(135deg, var(--accent) 0%, var(--accent-2) 100%); color: var(--bg); padding: 11px 20px; border-radius: 12px; font-size: 14.5px; box-shadow: 0 6px 20px rgba(255,122,26,0.28); } .btn-primary:hover { transform: translateY(-1px); filter: brightness(1.06); box-shadow: 0 10px 28px rgba(255,122,26,0.38); } .btn-primary.btn-lg { padding: 15px 28px; border-radius: 14px; font-size: 16px; } .btn-ghost { background: var(--surface); color: var(--text); padding: 11px 20px; border-radius: 12px; border: 1px solid var(--border-hi); font-size: 14.5px; font-weight: 600; } .btn-ghost:hover { background: var(--surface-2); border-color: rgba(255,122,26,0.45); } .btn-ghost.btn-lg { padding: 15px 28px; border-radius: 14px; font-size: 16px; } /* ===== Badge (reusable pill) ===== */ .badge { display: inline-flex; align-items: center; gap: 10px; background: linear-gradient(180deg, rgba(255,122,26,0.10), rgba(255,122,26,0.04)); border: 1px solid rgba(255,122,26,0.35); border-radius: 999px; padding: 8px 18px; font-size: 12.5px; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; color: var(--accent-2); box-shadow: 0 0 24px rgba(255,122,26,0.12); } .badge .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--accent-2); box-shadow: 0 0 10px var(--accent); animation: pulse 2.4s ease-in-out infinite; } @keyframes pulse { 0%,100%{opacity:1} 50%{opacity:0.45} } /* ===== Typography helpers ===== */ h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.1; margin: 0; } h1 { font-weight: 800; } h2 { font-weight: 800; } h3 { font-weight: 700; } .gradient-text { background: linear-gradient(90deg, var(--accent) 0%, var(--accent-2) 55%, #FFE7C2 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ===== Footer ===== */ footer.site-footer { position: relative; z-index: 2; margin-top: 80px; border-top: 1px solid var(--border); padding: 28px 0 40px; } .footer-row { display: flex; justify-content: space-between; align-items: center; gap: 24px; font-size: 13px; color: var(--dim); flex-wrap: wrap; } .footer-row a { color: var(--muted); text-decoration: none; margin-left: 18px; transition: color .2s var(--ease); } .footer-row a:hover { color: var(--text-2); } /* ===== Toast (used on index.html) ===== */ .toast { position: fixed; left: 50%; bottom: 32px; transform: translateX(-50%) translateY(20px); background: var(--surface-2); border: 1px solid var(--border-hi); border-radius: 12px; padding: 14px 20px; color: var(--text); font-size: 14px; font-weight: 500; box-shadow: var(--shadow-lg); opacity: 0; pointer-events: none; transition: all .3s var(--ease); z-index: 100; } .toast.show { opacity: 1; transform: translateX(-50%) translateY(0); } .toast .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent-2); margin-right: 10px; vertical-align: 2px; box-shadow: 0 0 10px var(--accent); } /* ===== Mobile / accessibility ===== */ @media (max-width: 860px) { nav.topnav { padding: 18px 24px; } .nav-links { gap: 16px; } .nav-links a.hide-sm { display: none; } .footer-row { flex-direction: column; text-align: center; } .footer-row a { margin: 0 10px; } } @media (max-width: 500px) { .container { padding: 0 20px; } nav.topnav { padding: 16px 20px; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }