/* ====================================================================== WiseBot — styles.css A calm, gray-forward product look with Retell-inspired polish. Tailwind remains the utility backbone; this file adds brand theming, motion, and component polish without fighting Tailwind. ====================================================================== */ /* ----------------------------- Tokens -------------------------------- */ :root{ /* Neutral canvas */ --page-bg: #0F1115; /* soft charcoal (eye-friendly) */ --surface: #161A1F; /* elevated surfaces */ --surface-2: #1B212A; /* deeper surface */ --text: #E9EDF3; /* main text */ --muted: #A6B0BE; /* secondary text */ --border: #27303A; /* soft border on gray */ /* Accents (Retell-like cool gradient) */ --accent-start: #7C8CFF; /* indigo/blue */ --accent-end: #38DDF9; /* cyan */ --accent-strong: #6B7CFF; /* Legacy compatibility with existing HTML */ --primary: var(--accent-start); --primary-dark: #5E6EF4; /* Radii & shadows */ --radius-xl: 1.25rem; --radius-2xl: 1.75rem; --shadow-sm: 0 .5rem 1.25rem rgba(0,0,0,.25); --shadow-md: 0 .85rem 2rem rgba(0,0,0,.35); --shadow-lg: 0 1.25rem 3rem rgba(0,0,0,.45); } /* ----------------------- Base & Typography --------------------------- */ html, body{ background: var(--page-bg) !important; /* override Tailwind bg classes on */ color: var(--text); font-family: "Inter","Tajawal",system-ui,-apple-system,Segoe UI,Roboto,Segoe UI Symbol,sans-serif; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } /* Selection */ ::selection{ background: color-mix(in oklab, var(--accent-end), white 10%); color:#0B0D10; } /* Links */ a{ color: inherit; text-decoration: none; } a:hover{ color: #fff; } /* Muted text helper */ .text-muted{ color: var(--muted); } /* --------------------------- Page Backdrop --------------------------- */ /* Subtle grid + corner glows to avoid flatness while staying low-glare */ body::before, body::after{ content:""; position:fixed; inset:0; pointer-events:none; z-index:-1; } /* Corner glows */ body::before{ background: radial-gradient(42rem 32rem at 100% 0%, rgba(124,140,255,.18), transparent 60%), radial-gradient(42rem 32rem at 0% 100%, rgba(56,221,249,.15), transparent 60%); mix-blend-mode: screen; } /* Faint grid */ body::after{ background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,.06) 1px, transparent 0); background-size: 22px 22px; opacity:.35; } /* ----------------------------- Navbar -------------------------------- */ #nav{ background: transparent; transition: background .35s ease, backdrop-filter .35s ease, border-color .35s ease; border-bottom: 1px solid transparent; } #nav.scrolled{ background: color-mix(in oklab, var(--page-bg), white 6%); backdrop-filter: blur(10px); border-color: rgba(255,255,255,.06); } /* Desktop nav links */ .nav-link{ position:relative; color: var(--muted); transition: color .25s ease; } .nav-link:hover{ color:#fff; } .nav-link::after{ content:""; position:absolute; left:0; right:0; bottom:-8px; height:2px; background: linear-gradient(90deg,var(--accent-start),var(--accent-end)); transform: scaleX(0); transform-origin: left; transition: transform .25s ease; border-radius:2px; } .nav-link:hover::after{ transform: scaleX(1); } /* CTA chip in nav */ .nav-btn{ color:#EAF7FA; background: linear-gradient(90deg, color-mix(in oklab,var(--accent-start),white 8%), color-mix(in oklab,var(--accent-end),white 8%)); border:1px solid rgba(255,255,255,.12); box-shadow: var(--shadow-sm); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } .nav-btn:hover{ transform: translateY(-1px); box-shadow: var(--shadow-md); filter:saturate(110%); } /* --------------------------- Mobile Drawer --------------------------- */ #overlay{ background: rgba(8,10,12,.55); backdrop-filter: blur(6px); opacity:0; pointer-events:none; transition: opacity .3s ease; } #overlay.show{ opacity:1; pointer-events:auto; } #mobile-menu{ background: color-mix(in oklab, var(--page-bg), white 4%); border-bottom: 1px solid rgba(255,255,255,.08); box-shadow: var(--shadow-lg); transform: translateY(-110%); transition: transform .3s cubic-bezier(.4,0,.2,1); } #mobile-menu.show{ transform: translateY(0); } .mob-link{ display:block; padding:.875rem 0; color: var(--muted); border-bottom:1px solid rgba(255,255,255,.07); } .mob-link:hover{ color:#fff; } .mob-link:last-child{ border-bottom:0; } /* Burger icon (index.html variant) */ .burger-bar{ width: 1.35rem; height: 2px; background: #E7EBF2; border-radius: 1px; transition: .35s; } #bar1{ transform: translateY(-6px); } #bar3{ transform: translateY( 6px); } .burger-open #bar1{ transform: rotate(45deg); } .burger-open #bar2{ opacity:0; } .burger-open #bar3{ transform: rotate(-45deg); } /* --------------------------- Hero Accents ---------------------------- */ .hero-gradient-text, .gradient-text{ background: linear-gradient(90deg,var(--accent-start),var(--accent-end)); -webkit-background-clip: text; background-clip: text; color: transparent; } .pill{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .875rem; border-radius: 999px; background: color-mix(in oklab, var(--surface), white 8%); border:1px solid rgba(255,255,255,.10); } /* ----------------------------- Cards -------------------------------- */ .card, .card-glass{ background: color-mix(in oklab, var(--surface), white 4%); border: 1px solid rgba(255,255,255,.12); border-radius: var(--radius-2xl); box-shadow: var(--shadow-sm); backdrop-filter: blur(12px) saturate(140%); transition: transform .28s ease, box-shadow .28s ease, border-color .28s ease, background .28s ease; } .card-glass:hover, .card:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(255,255,255,.24); background: color-mix(in oklab, var(--surface), white 7%); } /* Number tiles (ROI section) */ .stat-tile{ background: linear-gradient(180deg, rgba(255,255,255,.04), rgba(255,255,255,.02)); border:1px solid rgba(255,255,255,.12); border-radius: var(--radius-xl); box-shadow: var(--shadow-sm); } /* ------------------------------ Buttons ------------------------------ */ .btn, .cta-btn{ position: relative; display:inline-flex; align-items:center; justify-content:center; gap:.6rem; padding:.9rem 1.15rem; border-radius: 1rem; font-weight: 600; background: linear-gradient(90deg, color-mix(in oklab,var(--accent-start),white 8%), color-mix(in oklab,var(--accent-end),white 8%)); color:#0C1014; border:1px solid rgba(255,255,255,.16); box-shadow: 0 .65rem 1.5rem rgba(53,183,216,.18), inset 0 1px 0 rgba(255,255,255,.25); transition: transform .2s ease, box-shadow .2s ease, filter .2s ease; } .btn:hover, .cta-btn:hover{ transform: translateY(-1px); filter: saturate(108%); box-shadow: var(--shadow-md); } .btn:active, .cta-btn:active{ transform: translateY(0); } /* Subtle inner glow on hover */ .cta-btn::after{ content:""; position:absolute; inset:0; border-radius: inherit; box-shadow: inset 0 0 24px rgba(255,255,255,.28); opacity:0; transition: opacity .25s ease; } .cta-btn:hover::after{ opacity:.45; } /* Ghost button (for secondary actions) */ .btn-ghost{ background: color-mix(in oklab,var(--surface), white 6%); color: var(--text); border:1px solid rgba(255,255,255,.14); box-shadow: none; } /* Focus states */ :focus-visible{ outline: none; box-shadow: 0 0 0 4px color-mix(in oklab, var(--accent-end), white 20%); border-radius: .75rem; } /* ----------------------------- Animations ---------------------------- */ @keyframes revealUp{ from{ opacity:0; transform: translateY(24px); } to{ opacity:1; transform:none; } } .reveal{ opacity:0; transform: translateY(24px); transition: opacity .8s ease, transform .8s ease; } .reveal.visible{ opacity:1; transform:none; } /* Gently spinning gear */ @keyframes spin-slow{ to{ transform: rotate(360deg); } } .animate-spin-slow{ animation: spin-slow 6s linear infinite; } /* Slide+fade list items (productivity section) */ @keyframes slideFade{ 0%{opacity:0; transform: translateY(20px);} 100%{opacity:1; transform:none;} } /* -------------------------- Chat Bubble / Iframe --------------------- */ #chat-bubble{ position:fixed; right:1.1rem; bottom:1.1rem; z-index:60; width:3.25rem; height:3.25rem; display:grid; place-content:center; border-radius: 999px; color:#0C1014; font-size:1.25rem; background: linear-gradient(135deg,var(--accent-start),var(--accent-end)); box-shadow: var(--shadow-md); transition: transform .2s ease, filter .2s ease; } #chat-bubble:hover{ transform: translateY(-2px); filter: saturate(112%); } #chat-frame{ position:fixed; right:1rem; bottom:5.4rem; z-index:59; width: 22rem; height: 34rem; border:none; border-radius: 1.25rem; background: var(--surface-2); box-shadow: var(--shadow-lg); } /* ---------------------------- Utilities ------------------------------ */ .badge{ display:inline-flex; gap:.5rem; align-items:center; padding:.35rem .7rem; border-radius:999px; background: color-mix(in oklab, var(--surface), white 6%); border:1px solid rgba(255,255,255,.10); color: var(--muted); } /* Section edges (works with existing .section-angle-*) */ .section-angle-top, .section-angle-bottom{ position:relative; overflow:hidden; } .section-angle-top::before, .section-angle-bottom::after{ content:""; position:absolute; width:100%; height: 8vmin; background: inherit; } .section-angle-top::before{ top:0; left:0; clip-path: polygon(0 0, 100% 100%, 0 100%); } .section-angle-bottom::after{ bottom:0; left:0; clip-path: polygon(0 0, 100% 0, 100% 100%); } /* ROI numbers pop */ .kpi-number{ font-weight: 800; background: linear-gradient(90deg,var(--accent-start),var(--accent-end)); -webkit-background-clip: text; background-clip: text; color: transparent; text-shadow: 0 0 24px rgba(124,140,255,.18); } /* Tables (if any) */ .table-lite{ border-collapse: separate; border-spacing: 0; background: color-mix(in oklab, var(--surface), white 4%); border:1px solid rgba(255,255,255,.10); border-radius: 1rem; overflow: hidden; } .table-lite th, .table-lite td{ padding:.85rem 1rem; border-bottom:1px solid rgba(255,255,255,.06); } .table-lite thead th{ color:#fff; background: color-mix(in oklab, var(--surface), white 6%); } .table-lite tr:last-child td{ border-bottom:0; } /* ---------------------- Reduced Motion & Small Screens --------------- */ @media (prefers-reduced-motion: reduce){ *{ animation:none !important; transition:none !important; } } /* Compact lift on very small screens to avoid jumpy hover */ @media (max-width: 480px){ .card, .card-glass{ transition-duration:.2s; } .card:hover, .card-glass:hover{ transform: translateY(-3px); } } /* ----------------------------- Arabic tweaks ------------------------- */ :lang(ar){ letter-spacing: 0; } /* Prevent sideways scroll on narrow screens */ html, body { overflow-x: hidden; } /* Sections with big decorative glows should clip their children */ #hero, #contact { overflow: hidden; } /* Make sure overlay/drawer layer above page content */ #overlay { z-index: 40; } #mobile-menu { z-index: 50; } /* Keep the floating iframe from exceeding tiny screens */ @media (max-width: 400px){ #chat-frame { width: calc(100vw - 2rem); height: calc(100vh - 8rem); right: 1rem; } }