/* ============================================================ MERIDIAN — Mujib Design System · Core + Marketing (dark) One rule everywhere: logical properties only → RTL = dir flip. ============================================================ */ /* ---------- Tokens ---------- */ :root { /* night (marketing) */ --ink: #0B0D12; --ink-2: #10131B; --ink-3: #161A25; --glass: rgba(255, 255, 255, .035); --glass-2: rgba(255, 255, 255, .06); --line-d: rgba(255, 255, 255, .09); --line-d-soft: rgba(255, 255, 255, .055); --td-strong: #EDF0F7; --td-body: #A9B1C3; --td-mute: #646E82; /* day (app) */ --paper: #F6F7F9; --card: #FFFFFF; --line: #E7E9EE; --line-soft: #F0F1F5; --t-strong: #0E1116; --t-body: #3B4252; --t-mute: #737C8F; /* brand */ --cobalt: #2E5CFF; --cobalt-deep: #1E43D8; --cobalt-ondark: #7A94FF; --cobalt-soft: #EAEFFF; --violet: #8B5CF6; --emerald: #10B981; --emerald-soft: #E7F8F1; --amber: #F59E0B; --amber-soft: #FEF4E2; --rose: #F43F5E; --rose-soft: #FEEBEF; /* geometry */ --r-sm: 10px; --r: 16px; --r-lg: 24px; --ease: cubic-bezier(.2, .8, .2, 1); /* type */ --f-ui: "Inter", "IBM Plex Sans Arabic", system-ui, sans-serif; --f-display: "Instrument Serif", "Alexandria", serif; --f-ar: "IBM Plex Sans Arabic", "Inter", system-ui, sans-serif; --f-ar-display: "Alexandria", "IBM Plex Sans Arabic", sans-serif; --f-mono: "JetBrains Mono", ui-monospace, monospace; } /* ---------- Reset ---------- */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; } body { font-family: var(--f-ui); font-size: 15px; line-height: 1.6; color: var(--td-body); background: var(--ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } img, svg { display: block; max-inline-size: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; cursor: pointer; border: 0; background: none; color: inherit; } ::selection { background: rgba(46, 92, 255, .35); color: #fff; } /* ---------- Bilingual switching ---------- html[lang=en] shows .en, hides .ar — and vice-versa. Toggle flips only; layout is logical-props. */ html[lang="ar"] .en { display: none !important; } html:not([lang="ar"]) .ar { display: none !important; } html[lang="ar"] body { font-family: var(--f-ar); letter-spacing: 0 !important; } html[lang="ar"] .h-display, html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3 { font-family: var(--f-ar-display); letter-spacing: 0 !important; font-style: normal !important; } /* ---------- Typography ---------- */ h1, h2, h3, h4 { color: var(--td-strong); font-weight: 640; line-height: 1.14; letter-spacing: -.022em; text-wrap: balance; } .h-display { font-size: clamp(42px, 6vw, 72px); font-weight: 560; letter-spacing: -.028em; line-height: 1.05; } .h-display em, .accent-serif { font-family: var(--f-display); font-style: italic; font-weight: 400; letter-spacing: -.01em; color: var(--td-strong); } html[lang="ar"] .h-display { font-weight: 700; line-height: 1.22; font-size: clamp(38px, 5.4vw, 62px); } .h-section { font-size: clamp(30px, 3.6vw, 42px); font-weight: 620; letter-spacing: -.025em; } html[lang="ar"] .h-section { font-weight: 700; line-height: 1.3; } .h-card { font-size: 19px; font-weight: 620; letter-spacing: -.014em; } .lead { font-size: 18px; line-height: 1.65; color: var(--td-body); max-inline-size: 56ch; } .meta { font-size: 13px; color: var(--td-mute); } .kicker { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--cobalt-ondark); } html[lang="ar"] .kicker { letter-spacing: 0; font-size: 13.5px; } .kicker::before { content: ""; inline-size: 20px; block-size: 1px; background: linear-gradient(90deg, transparent, var(--cobalt-ondark)); } html[dir="rtl"] .kicker::before { background: linear-gradient(-90deg, transparent, var(--cobalt-ondark)); } .num { font-family: var(--f-mono); font-variant-numeric: tabular-nums; letter-spacing: -.02em; direction: ltr; unicode-bidi: isolate; } /* in-prose figures: tabular but stay in the text face (mono is for columns/timestamps only) */ .fig { font-variant-numeric: tabular-nums lining-nums; direction: ltr; unicode-bidi: isolate; } /* ---------- Layout ---------- */ .container { inline-size: min(1200px, calc(100% - 48px)); margin-inline: auto; } .section { padding-block: clamp(72px, 9vw, 128px); position: relative; } .section.sec-tight { padding-block: clamp(48px, 6vw, 80px); } .section.sec-flush-top { padding-block-start: 0; } .section.sec-flush-bottom { padding-block-end: 0; } .section-head { max-inline-size: 640px; margin-block-end: 56px; display: grid; gap: 16px; } .grid { display: grid; gap: 24px; } .g2 { grid-template-columns: repeat(2, 1fr); } .g3 { grid-template-columns: repeat(3, 1fr); } .g4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 980px) { .g3, .g4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .g2, .g3, .g4 { grid-template-columns: 1fr; } } /* ---------- Backgrounds: aura + dotgrid + beam ---------- */ .aura { position: relative; overflow: clip; } .aura::before { content: ""; position: absolute; inset: -10%; pointer-events: none; background: radial-gradient(42% 36% at 50% 4%, rgba(46, 92, 255, .22), transparent 66%), radial-gradient(26% 22% at 74% 10%, rgba(139, 92, 246, .13), transparent 70%); will-change: transform; animation: aura-drift 28s ease-in-out infinite; } @keyframes aura-drift { 50% { transform: translate(4vw, 2.5vw) scale(1.07); } } /* film grain — kills banding, adds tactile depth (inline SVG, zero assets) */ .grain::after { content: ""; position: fixed; inset: 0; z-index: 2; pointer-events: none; opacity: .045; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); } .dotgrid { position: relative; } .dotgrid::after { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: radial-gradient(rgba(255, 255, 255, .10) 1px, transparent 1px); background-size: 26px 26px; mask-image: radial-gradient(58% 52% at 50% 34%, #000 0%, transparent 78%); } .beam { inline-size: 1px; block-size: 88px; margin-inline: auto; background: linear-gradient(180deg, transparent, var(--cobalt-ondark) 45%, rgba(139,92,246,.9) 60%, transparent); opacity: .7; } .hr-d { border: 0; block-size: 1px; background: linear-gradient(90deg, transparent, var(--line-d), transparent); } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; block-size: 46px; padding-inline: 22px; border-radius: 12px; font-size: 15px; font-weight: 600; white-space: nowrap; transition: transform .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease); } .btn:active { transform: translateY(1px); } .btn-primary { background: linear-gradient(180deg, #3D69FF, var(--cobalt) 55%, var(--cobalt-deep)); color: #fff; box-shadow: 0 1px 0 rgba(255,255,255,.22) inset, 0 8px 24px -8px rgba(46, 92, 255, .55); } .btn-primary:hover { box-shadow: 0 1px 0 rgba(255,255,255,.25) inset, 0 12px 32px -8px rgba(46, 92, 255, .7); transform: translateY(-1px); } .btn-ghost { border: 1px solid var(--line-d); color: var(--td-strong); background: var(--glass); } .btn-ghost:hover { background: var(--glass-2); border-color: rgba(255,255,255,.16); } .btn-white { background: #fff; color: #0B0D12; } .btn-white:hover { transform: translateY(-1px); box-shadow: 0 12px 32px -10px rgba(255,255,255,.35); } .btn-lg { block-size: 54px; padding-inline: 30px; font-size: 16px; border-radius: 14px; } .btn-sm { block-size: 36px; padding-inline: 14px; font-size: 13.5px; border-radius: 10px; } .btn-link { color: var(--cobalt-ondark); font-weight: 600; display: inline-flex; align-items: center; gap: 6px; } .btn-link:hover { gap: 9px; transition: gap .18s var(--ease); } /* ---------- Cards (dark glass) ---------- */ .card-d { background: var(--glass); border: 1px solid var(--line-d-soft); border-radius: var(--r); padding: 28px; transition: transform .22s var(--ease), border-color .22s var(--ease), background .22s var(--ease); } .card-d:hover { border-color: var(--line-d); background: var(--glass-2); transform: translateY(-2px); } .card-d .icon-tile { margin-block-end: 18px; } .icon-tile { inline-size: 42px; block-size: 42px; border-radius: 12px; display: grid; place-items: center; background: linear-gradient(180deg, rgba(46,92,255,.22), rgba(46,92,255,.08)); border: 1px solid rgba(122, 148, 255, .28); color: var(--cobalt-ondark); } .icon-tile svg { inline-size: 20px; block-size: 20px; } /* ---------- Chips / status ---------- */ .chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 12px; border-radius: 999px; font-size: 12.5px; font-weight: 600; border: 1px solid var(--line-d); color: var(--td-body); background: var(--glass); } .chip .dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--td-mute); } .chip-live { color: #7EE9C0; border-color: rgba(16, 185, 129, .35); background: rgba(16, 185, 129, .08); } .chip-live .dot { background: var(--emerald); box-shadow: 0 0 0 0 rgba(16,185,129,.55); animation: pulse 2.2s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.5); } 70% { box-shadow: 0 0 0 7px rgba(16,185,129,0); } 100% { box-shadow: 0 0 0 0 rgba(16,185,129,0); } } /* ---------- Marketing nav (scroll-morph: transparent → condensed glass) ---------- */ .mnav { position: sticky; inset-block-start: 0; z-index: 60; background: transparent; border-block-end: 1px solid transparent; transition: background .3s var(--ease), border-color .3s var(--ease), box-shadow .3s var(--ease); } .mnav.scrolled { backdrop-filter: blur(16px); background: color-mix(in srgb, var(--ink) 80%, transparent); border-block-end-color: var(--line-d-soft); box-shadow: 0 12px 40px -22px rgba(0, 0, 0, .8); } .mnav-inner { display: flex; align-items: center; gap: 32px; block-size: 74px; transition: block-size .3s var(--ease); } .mnav.scrolled .mnav-inner { block-size: 60px; } .mnav-links { display: flex; gap: 26px; font-size: 14.5px; font-weight: 500; color: var(--td-body); } .mnav-links a:hover { color: var(--td-strong); } .mnav-spacer { flex: 1; } .mnav-cta { display: flex; align-items: center; gap: 12px; } /* mobile nav */ .nav-burger { display: none; inline-size: 40px; block-size: 40px; border: 1px solid var(--line-d); border-radius: 10px; place-items: center; color: var(--td-strong); } .nav-burger svg { inline-size: 18px; block-size: 18px; } .mnav-drawer { display: none; } @media (max-width: 860px) { .mnav-links { display: none; } .nav-burger { display: grid; } .mnav-cta .btn-ghost { display: none; } .mnav-drawer.open { display: grid; gap: 4px; padding: 12px 20px 18px; background: color-mix(in srgb, var(--ink) 92%, transparent); backdrop-filter: blur(16px); border-block-end: 1px solid var(--line-d-soft); } .mnav-drawer a { padding: 11px 10px; border-radius: 10px; font-size: 15.5px; font-weight: 560; color: var(--td-body); } .mnav-drawer a:hover { background: var(--glass-2); color: var(--td-strong); } } /* phones: drop the redundant top-bar CTA (the hero CTA sits right below) so theme + lang + burger fit; the language toggle stays — switching to Arabic must remain one tap for MENA users */ @media (max-width: 560px) { .mnav-cta .btn-primary { display: none; } } /* announcement bar */ .announce { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 8px 16px; font-size: 12.5px; font-weight: 600; color: #C8D4FF; background: linear-gradient(90deg, rgba(46,92,255,.16), rgba(139,92,246,.14) 60%, rgba(46,92,255,.16)); border-block-end: 1px solid rgba(122, 148, 255, .18); } .announce a { color: #fff; text-decoration: underline; text-underline-offset: 3px; } .announce .dot-sep { opacity: .5; } /* ---------- Brand mark ---------- */ .brand { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; font-size: 18px; color: var(--td-strong); letter-spacing: -.02em; } /* ---------- Wordmark logo (text-based; no icon box) ---------- Ink color follows the theme, so it works on dark AND light automatically. */ .brand-mark { display: none !important; } .brand, .sidebar .side-brand { gap: 0 !important; } .brand .en, .brand .ar, .sidebar .side-brand .en, .sidebar .side-brand .ar { font-family: "Alexandria", "Inter", sans-serif; font-weight: 700; letter-spacing: -.03em; line-height: 1; } .brand .en, .sidebar .side-brand .en { text-transform: lowercase; font-size: 20px; } .brand .ar, .sidebar .side-brand .ar { font-size: 21px; } /* ---------- Theme toggle (marketing) ---------- */ .theme-btn { inline-size: 36px; block-size: 36px; flex: none; border: 1px solid var(--line-d); border-radius: 10px; background: var(--glass); display: grid; place-items: center; color: var(--td-body); transition: color .18s var(--ease), border-color .18s var(--ease); } .theme-btn:hover { color: var(--td-strong); border-color: var(--line-d); background: var(--glass-2); } .theme-btn svg { inline-size: 16px; block-size: 16px; } /* ---------- Language toggle ---------- */ .lang-toggle { display: inline-flex; align-items: center; border: 1px solid var(--line-d); border-radius: 999px; padding: 3px; gap: 2px; background: var(--glass); } .lang-toggle button { padding: 4px 12px; border-radius: 999px; font-size: 13px; font-weight: 600; color: var(--td-mute); transition: all .18s var(--ease); } .lang-toggle button.on { background: #fff; color: #0B0D12; } /* ---------- Hero chat demo (WhatsApp-style, product-as-hero) ---------- */ .phone { inline-size: min(400px, 100%); border-radius: 30px; border: 1px solid var(--line-d); background: linear-gradient(180deg, #10141D, #0C0F16); box-shadow: 0 40px 90px -30px rgba(0, 0, 0, .8), 0 0 0 8px rgba(255, 255, 255, .025); overflow: hidden; } .phone-top { display: flex; align-items: center; gap: 12px; padding: 14px 18px; background: rgba(255,255,255,.035); border-block-end: 1px solid var(--line-d-soft); } .phone-avatar { inline-size: 38px; block-size: 38px; border-radius: 50%; background: linear-gradient(135deg, #4C74FF, var(--cobalt-deep)); display: grid; place-items: center; color: #fff; font-weight: 700; font-size: 15px; } .phone-name { font-weight: 620; color: var(--td-strong); font-size: 14.5px; line-height: 1.25; } .phone-status { font-size: 12px; color: #7EE9C0; display: flex; align-items: center; gap: 5px; } .phone-status::before { content: ""; inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--emerald); } .phone-body { padding: 18px 16px 22px; display: flex; flex-direction: column; justify-content: flex-start; gap: 10px; block-size: 430px; overflow: hidden; /* JS scrolls it programmatically as the chat grows */ mask-image: linear-gradient(180deg, transparent 0, #000 18px, #000 calc(100% - 6px), transparent); transition: opacity .35s var(--ease); } .msg { max-inline-size: 82%; padding: 10px 14px; border-radius: 16px; font-size: 14px; line-height: 1.55; opacity: 0; transform: translateY(10px); animation: msg-in .5s var(--ease) forwards; } .msg-in { /* the remote contact = Mujib (grey, START side) */ align-self: flex-start; background: rgba(255,255,255,.07); border: 1px solid var(--line-d-soft); color: var(--td-strong); border-start-start-radius: 6px; } .msg-out { /* the visitor's own sent message (you) — cobalt, END side */ align-self: flex-end; background: linear-gradient(180deg, rgba(46,92,255,.34), rgba(30,67,216,.30)); border: 1px solid rgba(122,148,255,.3); color: #E9EDFF; border-start-end-radius: 6px; } .msg .msg-time { display: block; font-size: 10.5px; color: rgba(255,255,255,.6); margin-block-start: 4px; font-family: var(--f-mono); } .msg-tool { align-self: flex-start; /* a Mujib-side system event → START side, opposite the visitor's voice note */ display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: #7EE9C0; background: rgba(16,185,129,.08); border: 1px solid rgba(16,185,129,.3); padding: 6px 12px; border-radius: 999px; opacity: 0; transform: translateY(10px); animation: msg-in .5s var(--ease) forwards; } .typing { align-self: flex-end; display: inline-flex; gap: 4px; padding: 12px 16px; background: rgba(46,92,255,.18); border-radius: 16px; border-start-end-radius: 6px; } .typing i { inline-size: 6px; block-size: 6px; border-radius: 50%; background: var(--cobalt-ondark); animation: blink 1.2s infinite; } .typing i:nth-child(2) { animation-delay: .18s; } .typing i:nth-child(3) { animation-delay: .36s; } @keyframes blink { 0%, 80%, 100% { opacity: .25; } 40% { opacity: 1; } } @keyframes msg-in { to { opacity: 1; transform: none; } } /* ---------- Stats band ---------- */ .stat { display: grid; gap: 6px; } .stat b { font-family: var(--f-mono); font-variant-numeric: tabular-nums; font-size: clamp(34px, 4vw, 46px); font-weight: 600; color: var(--td-strong); letter-spacing: -.03em; line-height: 1; } .stat b i { font-style: normal; color: var(--cobalt-ondark); } .stat span { font-size: 14px; color: var(--td-mute); } /* ---------- Logo strip ---------- */ .logo-strip { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 40px; opacity: .85; } .logo-strip .word { font-weight: 640; font-size: 15.5px; letter-spacing: .02em; color: var(--td-mute); } /* ---------- Steps (how it works) ---------- */ .step { position: relative; padding-inline-start: 56px; display: grid; gap: 8px; } .step-n { position: absolute; inset-inline-start: 0; inset-block-start: 0; inline-size: 38px; block-size: 38px; border-radius: 12px; display: grid; place-items: center; font-family: var(--f-mono); font-weight: 600; font-size: 15px; color: var(--cobalt-ondark); background: rgba(46,92,255,.1); border: 1px solid rgba(122,148,255,.3); } .step + .step { margin-block-start: 34px; } .step::before { content: ""; position: absolute; inset-inline-start: 19px; inset-block-start: 44px; inline-size: 1px; block-size: calc(100% - 14px); background: linear-gradient(180deg, rgba(122,148,255,.4), transparent); } .step:last-child::before { display: none; } /* ---------- Pricing ---------- */ .price-card { position: relative; background: var(--glass); border: 1px solid var(--line-d-soft); border-radius: var(--r-lg); padding: 34px 30px; display: flex; flex-direction: column; gap: 22px; transition: transform .22s var(--ease), border-color .22s var(--ease); } .price-card:hover { transform: translateY(-3px); border-color: var(--line-d); } .price-card.featured { background: linear-gradient(180deg, rgba(46,92,255,.14), rgba(46,92,255,.045) 55%, var(--glass)); border-color: rgba(122,148,255,.45); box-shadow: 0 30px 80px -40px rgba(46,92,255,.5); } .price-tag { display: flex; align-items: baseline; gap: 8px; } .price-tag b { font-family: var(--f-mono); font-size: 52px; font-weight: 600; letter-spacing: -.04em; color: var(--td-strong); line-height: 1; } .price-tag .cur { font-size: 16px; font-weight: 600; color: var(--td-mute); } .price-feats { display: grid; gap: 12px; font-size: 14.5px; color: var(--td-body); } .price-feats li { list-style: none; display: flex; gap: 10px; align-items: flex-start; } .price-feats .tick { flex: none; inline-size: 18px; block-size: 18px; border-radius: 6px; margin-block-start: 2px; background: rgba(16,185,129,.12); border: 1px solid rgba(16,185,129,.35); position: relative; } .price-feats .tick::after { content: ""; position: absolute; inset-inline-start: 4.5px; inset-block-start: 2.5px; inline-size: 5px; block-size: 8px; border-block-end: 2px solid var(--emerald); border-inline-end: 2px solid var(--emerald); transform: rotate(38deg); } .ribbon { position: absolute; inset-block-start: -13px; inset-inline-start: 50%; transform: translateX(-50%); padding: 5px 16px; border-radius: 999px; white-space: nowrap; font-size: 12px; font-weight: 700; letter-spacing: .06em; color: #fff; background: linear-gradient(90deg, var(--cobalt), var(--violet)); box-shadow: 0 8px 20px -6px rgba(46,92,255,.6); } html[dir="rtl"] .ribbon { transform: translateX(50%); letter-spacing: 0; } /* ---------- Comparison table (pricing page) ---------- */ .cmp { inline-size: 100%; border-collapse: separate; border-spacing: 0; font-size: 14.5px; } .cmp th, .cmp td { padding: 15px 18px; text-align: start; border-block-end: 1px solid var(--line-d-soft); } .cmp thead th { font-size: 13px; color: var(--td-mute); font-weight: 600; letter-spacing: .05em; text-transform: uppercase; } html[lang="ar"] .cmp thead th { letter-spacing: 0; } .cmp tbody th { color: var(--td-body); font-weight: 500; } .cmp td { color: var(--td-strong); font-weight: 560; } .cmp .group th { padding-block-start: 34px; color: var(--cobalt-ondark); font-weight: 700; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; border-block-end-color: var(--line-d); } html[lang="ar"] .cmp .group th { letter-spacing: 0; } .cmp .col-featured { background: rgba(46,92,255,.06); } /* ---------- FAQ ---------- */ .faq { border: 1px solid var(--line-d-soft); border-radius: var(--r); background: var(--glass); overflow: hidden; } .faq details { border-block-end: 1px solid var(--line-d-soft); } .faq details:last-child { border-block-end: 0; } .faq summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 20px 24px; font-weight: 600; color: var(--td-strong); font-size: 15.5px; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-family: var(--f-mono); font-size: 20px; color: var(--td-mute); transition: transform .2s var(--ease); } .faq details[open] summary::after { transform: rotate(45deg); color: var(--cobalt-ondark); } .faq .faq-a { padding: 0 24px 22px; color: var(--td-body); max-inline-size: 70ch; } /* ---------- Testimonial ---------- */ .quote { font-size: clamp(22px, 2.6vw, 30px); line-height: 1.5; font-weight: 500; color: var(--td-strong); letter-spacing: -.015em; text-wrap: balance; } .quote .accent-serif { color: var(--cobalt-ondark); } /* ---------- Footer ---------- */ .footer { border-block-start: 1px solid var(--line-d-soft); padding-block: 56px 40px; } .footer-grid { display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px; margin-block-end: 48px; } @media (max-width: 860px) { .footer-grid { grid-template-columns: 1fr 1fr; } } .footer h5 { font-size: 13px; font-weight: 640; color: var(--td-strong); letter-spacing: .08em; text-transform: uppercase; margin-block-end: 16px; } html[lang="ar"] .footer h5 { letter-spacing: 0; } .footer-links { display: grid; gap: 10px; font-size: 14px; color: var(--td-mute); } .footer-links a:hover { color: var(--td-strong); } .footer-base { display: flex; align-items: center; justify-content: space-between; gap: 20px; font-size: 13px; color: var(--td-mute); flex-wrap: wrap; } /* ---------- Scroll reveal ---------- */ .reveal { opacity: 0; transform: translateY(26px); transition: opacity .85s cubic-bezier(.16,1,.3,1), transform .85s cubic-bezier(.16,1,.3,1); } .reveal.in { opacity: 1; transform: none; } .reveal[data-delay="1"] { transition-delay: .08s; } .reveal[data-delay="2"] { transition-delay: .16s; } .reveal[data-delay="3"] { transition-delay: .24s; } .reveal[data-delay="4"] { transition-delay: .32s; } /* ---------- Browser-frame (dashboard showcase on landing) ---------- */ .browser { border-radius: 18px; overflow: hidden; border: 1px solid var(--line-d); box-shadow: 0 60px 140px -50px rgba(0,0,0,.9), 0 0 0 10px rgba(255,255,255,.02); background: #0E1119; } .browser-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: rgba(255,255,255,.04); border-block-end: 1px solid var(--line-d-soft); } .browser-bar i { inline-size: 10px; block-size: 10px; border-radius: 50%; background: rgba(255,255,255,.14); } .browser-bar .url { margin-inline: auto; font-family: var(--f-mono); font-size: 12px; color: var(--td-mute); background: rgba(255,255,255,.05); border-radius: 8px; padding: 4px 14px; } /* ============================================================ MERIDIAN v2 — research-informed layer ============================================================ */ /* ---------- Morphing bilingual word (the signature) ---------- */ .morph { display: inline-grid; overflow: hidden; vertical-align: bottom; block-size: 1.42em; } .morph-track { display: grid; transition: transform .55s var(--ease); will-change: transform; } .morph-track i { /* items are taller than the window so the next word's high Arabic marks stay fully hidden while idle */ font-style: normal; block-size: 1.62em; line-height: 1.42; color: var(--cobalt-ondark); white-space: nowrap; } .morph-track i[lang="ar"] { font-family: var(--f-ar-display); font-weight: 700; letter-spacing: 0; } .morph-track i.serif { font-family: var(--f-display); font-style: italic; font-weight: 400; } /* ---------- Chat v2: voice note, slot chips, booked chip, handoff divider ---------- */ .voice { align-self: flex-start; display: flex; align-items: center; gap: 10px; background: rgba(255,255,255,.07); border: 1px solid var(--line-d-soft); padding: 10px 13px; border-radius: 16px; border-start-start-radius: 6px; max-inline-size: 82%; opacity: 0; transform: translateY(10px); animation: msg-in .5s var(--ease) forwards; } .voice .vplay { inline-size: 30px; block-size: 30px; border-radius: 50%; background: var(--emerald); display: grid; place-items: center; color: #06281A; flex: none; } .voice .vplay svg { inline-size: 11px; block-size: 11px; margin-inline-start: 1px; } .voice .vwave { display: flex; align-items: center; gap: 3px; block-size: 24px; } .voice .vwave i { inline-size: 3px; border-radius: 3px; background: var(--td-mute); animation: eq 1.1s ease-in-out infinite; } @keyframes eq { 0%, 100% { block-size: 7px; } 50% { block-size: 20px; } } .voice .vdur { font-family: var(--f-mono); font-size: 11px; color: var(--td-mute); } /* voice note sent BY the visitor → END side, cobalt-tinted to match .msg-out */ .voice.voice-out { align-self: flex-end; background: linear-gradient(180deg, rgba(46,92,255,.34), rgba(30,67,216,.30)); border-color: rgba(122,148,255,.3); border-start-start-radius: 16px; border-start-end-radius: 6px; } .voice.voice-out .vwave i { background: rgba(233,237,255,.6); } .voice.voice-out .vdur { color: #C7D3FF; } /* read-receipt double-tick on the visitor's own (out) messages; flips emerald once Mujib reads */ .msg-out { text-align: end; } .msg-out .msg-time { display: inline-flex; align-items: center; gap: 5px; } .tick { display: inline-flex; color: rgba(255,255,255,.5); } .tick svg { inline-size: 15px; block-size: 9px; } .msg-out.read .tick { color: var(--emerald); } .slots { display: flex; gap: 7px; margin-block-start: 9px; } .slot { font-family: var(--f-mono); font-size: 12px; font-weight: 600; padding: 6px 11px; border-radius: 9px; background: rgba(255,255,255,.14); border: 1px solid rgba(255,255,255,.22); color: #E9EDFF; } .slot.pick { background: #fff; color: var(--cobalt-deep); border-color: transparent; } .booked { align-self: center; display: inline-flex; align-items: center; gap: 9px; background: rgba(16,185,129,.1); border: 1px solid rgba(16,185,129,.3); color: #7EE9C0; padding: 9px 14px; border-radius: 12px; font-size: 12.5px; font-weight: 600; text-decoration: none; cursor: pointer; opacity: 0; transform: scale(.88); animation: popc .45s cubic-bezier(.2, 1.4, .5, 1) forwards; } a.booked:hover { background: rgba(16,185,129,.16); border-color: rgba(16,185,129,.5); transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(16,185,129,.55); } @keyframes popc { to { opacity: 1; transform: none; } } .chat-divider { align-self: center; display: flex; align-items: center; gap: 8px; font-family: var(--f-mono); font-size: 10.5px; color: var(--td-mute); opacity: 0; animation: msg-in .5s var(--ease) forwards; } .chat-divider::before, .chat-divider::after { content: ""; inline-size: 28px; block-size: 1px; background: var(--line-d); } /* ---------- Floating callout chips (hero product constellation) ---------- */ .float-chip { position: absolute; z-index: 3; display: flex; align-items: center; gap: 9px; background: color-mix(in srgb, var(--ink-3) 92%, transparent); border: 1px solid var(--line-d); border-radius: 999px; padding: 8px 14px 8px 9px; box-shadow: 0 30px 60px -30px rgba(0,0,0,.85); font-size: 12.5px; font-weight: 600; color: var(--td-strong); animation: floaty 6.5s ease-in-out infinite; backdrop-filter: blur(8px); white-space: nowrap; } html[dir="rtl"] .float-chip { padding: 8px 9px 8px 14px; } .float-chip .ic { inline-size: 26px; block-size: 26px; border-radius: 50%; display: grid; place-items: center; flex: none; color: #fff; } .float-chip .ic svg { inline-size: 13px; block-size: 13px; } .float-chip small { display: block; font-size: 10.5px; font-weight: 500; color: var(--td-mute); } @keyframes floaty { 50% { transform: translateY(-10px); } } @media (max-width: 980px) { .float-chip { display: none; } } /* keep chips through the whole 2-column range; drop only when it stacks */ /* ---------- Marquee (RTL-aware, masked edges) ---------- */ .marquee { overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask-image: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } /* JS clones the set enough times to overflow ANY viewport, then shifts by exactly one set width (--mq-to, px) so it's always full AND seamless. CSS -50% is the no-JS fallback. */ .marquee-track { display: flex; inline-size: max-content; animation: mscroll 40s linear infinite; } .marquee-set { display: flex; align-items: center; gap: 56px; padding-inline-end: 56px; flex: none; } html[dir="rtl"] .marquee-track { animation-direction: reverse; } .marquee:hover .marquee-track { animation-play-state: paused; } @keyframes mscroll { to { transform: translateX(-50%); } } @keyframes mq { to { transform: translateX(var(--mq-to, -50%)); } } .marquee .word { display: inline-flex; align-items: center; gap: 9px; font-weight: 620; font-size: 15px; color: var(--td-mute); white-space: nowrap; } .marquee .word svg { inline-size: 16px; block-size: 16px; opacity: .7; } /* ---------- Gradient border ring (mask-composite) ---------- */ .grad-ring { position: relative; } .grad-ring::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: linear-gradient(120deg, var(--cobalt) 0%, var(--violet) 60%, var(--cobalt-ondark) 100%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0; transition: opacity .3s var(--ease); } .grad-ring:hover::before, .grad-ring.on::before { opacity: 1; } /* ---------- Bento grid + cursor border-glow ---------- */ .bento { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .bento .cell { position: relative; overflow: hidden; background: var(--glass); border: 1px solid var(--line-d-soft); border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; gap: 8px; transition: background .25s var(--ease); } .bento .cell:hover { background: var(--glass-2); } .bento .cell-lg { grid-column: span 2; grid-row: span 2; } .bento .cell-w { grid-column: span 2; } .bento .cell-full { grid-column: 1 / -1; } /* full-width banner cell lays its demo beside the copy */ .bento .cell-full { display: grid; grid-template-columns: 1.1fr 1fr; gap: 26px 40px; align-items: center; } .bento .cell-full .demo { margin-block-end: 0; grid-row: span 2; grid-column: 2; } .bento .cell-full h3 { margin-block-start: 0; grid-column: 1; align-self: end; } .bento .cell-full p { grid-column: 1; align-self: start; } @media (max-width: 980px) { .bento { grid-template-columns: 1fr 1fr; } .bento .cell-lg { grid-column: span 2; grid-row: auto; } .bento .cell-full { grid-template-columns: 1fr; } .bento .cell-full .demo, .bento .cell-full h3, .bento .cell-full p { grid-column: 1; grid-row: auto; } } @media (max-width: 620px) { .bento { grid-template-columns: 1fr; } .bento .cell-lg, .bento .cell-w { grid-column: span 1; } } .bento .cell h3 { font-size: 16px; font-weight: 640; color: var(--td-strong); margin-block-start: auto; } .bento .cell p { font-size: 13.5px; line-height: 1.6; color: var(--td-mute); } .bento .demo { min-block-size: 96px; display: grid; align-content: center; gap: 8px; margin-block-end: 10px; } /* cursor-tracked 1px border glow */ @media (hover: hover) { .bento .cell::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px; background: radial-gradient(240px at var(--mx, 50%) var(--my, 50%), rgba(122, 148, 255, .75), transparent 70%); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; } .bento .cell:hover::before { opacity: 1; } .bento .cell::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: radial-gradient(300px at var(--mx, 50%) var(--my, 50%), rgba(46, 92, 255, .07), transparent 70%); opacity: 0; transition: opacity .3s var(--ease); pointer-events: none; } .bento .cell:hover::after { opacity: 1; } } /* bento micro-demos */ .mini-bubble { max-inline-size: 88%; padding: 8px 12px; border-radius: 12px; font-size: 12px; line-height: 1.5; } .mini-in { align-self: flex-start; background: rgba(255,255,255,.08); border: 1px solid var(--line-d-soft); color: var(--td-strong); border-start-start-radius: 5px; } .mini-out { align-self: flex-end; background: linear-gradient(180deg, rgba(46,92,255,.32), rgba(30,67,216,.28)); border: 1px solid rgba(122,148,255,.28); color: #E9EDFF; border-start-end-radius: 5px; } .demo-flex { display: flex; flex-direction: column; gap: 7px; } .pace-bars { display: flex; align-items: flex-end; gap: 5px; block-size: 56px; } .pace-bars i { flex: 1; border-radius: 4px 4px 2px 2px; background: linear-gradient(180deg, var(--cobalt-ondark), var(--cobalt-deep)); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease); } .in .pace-bars i { transform: scaleY(1); } .score-demo { display: flex; align-items: center; gap: 14px; } .score-demo .sd-ring { inline-size: 54px; block-size: 54px; border-radius: 50%; background: conic-gradient(var(--cobalt-ondark) var(--p, 72%), rgba(255,255,255,.09) 0); display: grid; place-items: center; } .score-demo .sd-ring i { inline-size: 40px; block-size: 40px; border-radius: 50%; background: var(--ink-2); display: grid; place-items: center; font: 650 13px var(--f-mono); font-style: normal; color: var(--td-strong); } .stage-chips { display: flex; flex-wrap: wrap; gap: 5px; } .stage-chips span { font-size: 10.5px; font-weight: 650; padding: 3px 9px; border-radius: 999px; } .mini-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; } .mini-cal i { aspect-ratio: 1; border-radius: 5px; background: rgba(255,255,255,.07); } .mini-cal i.busy { background: rgba(46,92,255,.35); } .mini-cal i.pick { background: var(--cobalt); box-shadow: 0 0 14px rgba(46,92,255,.7); animation: pulse 2.2s infinite; } .lang-flip { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 650; } .lang-flip .lf { padding: 7px 13px; border-radius: 10px; border: 1px solid var(--line-d); color: var(--td-mute); transition: all .4s var(--ease); } .lang-flip .lf.hot { background: rgba(46,92,255,.15); border-color: rgba(122,148,255,.45); color: #E9EDFF; } .lang-flip svg { inline-size: 14px; block-size: 14px; color: var(--td-mute); } /* ---------- Live-activity island ---------- */ .island { position: fixed; inset-block-end: 18px; inset-inline-start: 50%; transform: translateX(-50%); z-index: 70; display: flex; align-items: center; gap: 9px; background: color-mix(in srgb, var(--ink-2) 90%, transparent); backdrop-filter: blur(12px); border: 1px solid var(--line-d); border-radius: 999px; padding: 9px 16px; font-size: 12.5px; font-weight: 600; color: var(--td-body); box-shadow: 0 16px 40px -16px rgba(0,0,0,.7); max-inline-size: min(88vw, 480px); white-space: nowrap; } html[dir="rtl"] .island { transform: translateX(50%); } .island .dot { inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--emerald); flex: none; animation: pulse 2.2s infinite; } .island .ic { display: inline-flex; color: var(--cobalt-ondark); flex: none; transition: opacity .28s var(--ease), transform .28s var(--ease); } .island .ic svg { inline-size: 15px; block-size: 15px; } .island .txt { overflow: hidden; text-overflow: ellipsis; transition: opacity .28s var(--ease), transform .28s var(--ease); } .island.swap .ic, .island.swap .txt { opacity: 0; transform: translateY(-6px); } @media (max-width: 560px) { .island { display: none; } } /* ---------- CTA sheen sweep ---------- */ .btn-primary, .btn-white { position: relative; overflow: hidden; } .btn-primary::after, .btn-white::after { content: ""; position: absolute; inset: -40% auto; inline-size: 34%; inset-inline-start: -46%; background: linear-gradient(105deg, transparent, rgba(255,255,255,.34), transparent); transform: skewX(-18deg); transition: inset-inline-start .55s var(--ease); } .btn-primary:hover::after, .btn-white:hover::after { inset-inline-start: 128%; } /* ---------- Section beam connector (draws in on reveal) ---------- */ .beam-v { inline-size: 1.5px; block-size: 96px; margin-inline: auto; background: linear-gradient(180deg, transparent, var(--cobalt-ondark) 45%, rgba(139,92,246,.9) 62%, transparent); transform: scaleY(0); transform-origin: top; transition: transform 1s var(--ease); position: relative; } .beam-v.in { transform: scaleY(1); } .beam-v::after { /* center the dot on the 1.5px line in BOTH directions: inset-inline:0 + margin-inline:auto beats translateX(-50%), which doesn't mirror in RTL and pushed the dot off the line. */ content: ""; position: absolute; inset-block-end: -3px; inset-inline-start: 50%; margin-inline-start: -3.5px; /* logical → mirrors in RTL */ inline-size: 7px; block-size: 7px; border-radius: 50%; background: var(--cobalt-ondark); box-shadow: 0 0 12px rgba(122,148,255,.9); opacity: 0; transition: opacity .4s var(--ease) .7s; } .beam-v.in::after { opacity: 1; } /* ---------- Trust micro-section: provenance bubble on dark ---------- */ .why-dark { background: var(--ink-2); border: 1px solid var(--line-d); border-radius: 14px; padding: 14px 16px; display: grid; gap: 10px; inline-size: min(360px, 100%); } .why-dark h6 { font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--td-mute); } html[lang="ar"] .why-dark h6 { letter-spacing: 0; } .why-dark .src-d { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--td-strong); font-weight: 560; } .why-dark .src-d svg { inline-size: 14px; block-size: 14px; color: var(--td-mute); flex: none; } .why-dark .pct { margin-inline-start: auto; display: flex; align-items: center; gap: 7px; } .why-dark .pct .pbar { inline-size: 52px; block-size: 4px; border-radius: 99px; background: rgba(255,255,255,.09); overflow: hidden; } .why-dark .pct .pbar i { display: block; block-size: 100%; border-radius: 99px; background: var(--cobalt-ondark); } .why-dark .pct b { font: 600 11px var(--f-mono); color: var(--td-mute); } /* ---------- Testimonial metric chips ---------- */ .metric-chips { display: flex; gap: 12px; flex-wrap: wrap; justify-content: center; } .metric-chip { display: inline-flex; align-items: baseline; gap: 8px; border: 1px solid var(--line-d-soft); background: var(--glass); border-radius: 12px; padding: 10px 16px; } .metric-chip b { font-family: var(--f-mono); font-size: 20px; font-weight: 600; color: var(--td-strong); letter-spacing: -.02em; } .metric-chip b i { font-style: normal; color: var(--emerald); } .metric-chip span { font-size: 12.5px; color: var(--td-mute); font-weight: 550; } /* ---------- Mega footer wordmark ---------- */ .footer-mark { margin-block-start: 48px; font-family: var(--f-ar-display); font-size: clamp(120px, 24vw, 340px); font-weight: 800; line-height: .9; text-align: center; background: linear-gradient(180deg, rgba(122, 148, 255, .3), rgba(122, 148, 255, 0) 78%); -webkit-background-clip: text; background-clip: text; color: transparent; user-select: none; pointer-events: none; } /* ---------- Interactive showcase rows ---------- */ .shot .cv { cursor: pointer; transition: background .15s var(--ease); } .shot .cv:hover { background: #F2F4F8; } .shot .thread[hidden] { display: none; } /* ============================================================ MERIDIAN v3 — LIGHT THEME for the marketing surface Flip the ink tokens, then correct every hardcoded white-wash. ============================================================ */ :root { --wash-1: rgba(255,255,255,.06); --wash-2: rgba(255,255,255,.1); } html[data-theme="light"] { color-scheme: light; --wash-1: rgba(14,17,22,.045); --wash-2: rgba(14,17,22,.09); --ink: #EDF1F7; --ink-2: #FFFFFF; --ink-3: #FFFFFF; /* soft cool gray so white cards separate */ --glass: #FFFFFF; --glass-2: #FFFFFF; /* card surfaces = true white */ --line-d: rgba(14,17,22,.1); --line-d-soft: rgba(14,17,22,.07); --td-strong: #0E1116; --td-body: #3B4252; --td-mute: #737C8F; --cobalt-ondark: #2E5CFF; } /* marketing-on-light corrections */ html[data-theme="light"] body:not(.app) ::selection { background: var(--cobalt-soft); color: var(--t-strong); } html[data-theme="light"] .grain::after { display: none; } html[data-theme="light"] .announce { color: #3B4EC2; } html[data-theme="light"] .announce a { color: #1E43D8; } html[data-theme="light"] .lang-toggle button.on { background: #0E1116; color: #fff; } html[data-theme="light"] .btn-white { background: #0E1116; color: #fff; } html[data-theme="light"] .btn-white:hover { box-shadow: 0 12px 32px -10px rgba(14,17,22,.4); } html[data-theme="light"] .chip-live { color: #067A55; background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.28); } /* .phone / .phone-top light styles live in the surface-fix block below (were duplicated here) */ html[data-theme="light"] .mini-in, html[data-theme="light"] .voice { background: #fff; border-color: rgba(14,17,22,.1); color: #0E1116; } html[data-theme="light"] .msg-out, html[data-theme="light"] .mini-out { background: rgba(46,92,255,.09); border-color: rgba(46,92,255,.24); color: #1D3070; } html[data-theme="light"] .msg .msg-time { color: rgba(14,17,22,.6); } html[data-theme="light"] .typing { background: rgba(46,92,255,.1); } html[data-theme="light"] .msg-tool { color: #067A55; background: rgba(16,185,129,.1); border-color: rgba(16,185,129,.3); } html[data-theme="light"] .booked { color: #067A55; } html[data-theme="light"] .slot { background: rgba(14,17,22,.05); border-color: rgba(14,17,22,.14); color: #1D3070; } html[data-theme="light"] .slot.pick { background: var(--cobalt); color: #fff; } html[data-theme="light"] .lang-flip .lf.hot { color: #1D3070; } html[data-theme="light"] .mini-cal i { background: rgba(14,17,22,.06); } html[data-theme="light"] .score-demo .sd-ring { background: conic-gradient(var(--cobalt) var(--p, 72%), rgba(14,17,22,.08) 0); } html[data-theme="light"] .float-chip { box-shadow: 0 24px 50px -22px rgba(14,17,22,.3); } html[data-theme="light"] .island { box-shadow: 0 16px 40px -16px rgba(14,17,22,.28); } html[data-theme="light"] .browser { background: #fff; box-shadow: 0 50px 120px -50px rgba(14,17,22,.35), 0 0 0 10px rgba(14,17,22,.02); } html[data-theme="light"] .browser-bar { background: rgba(14,17,22,.03); } html[data-theme="light"] .browser-bar i { background: rgba(14,17,22,.12); } html[data-theme="light"] .browser-bar .url { background: rgba(14,17,22,.05); } html[data-theme="light"] .why-dark .pct .pbar { background: rgba(14,17,22,.08); } html[data-theme="light"] .footer-mark { background: linear-gradient(180deg, rgba(46,92,255,.22), rgba(46,92,255,0) 78%); -webkit-background-clip: text; background-clip: text; } html[data-theme="light"] .stat b i { color: var(--cobalt); } html[data-theme="light"] .cmp .col-featured { background: rgba(46,92,255,.045); } html[data-theme="light"] .kicker::before { background: linear-gradient(90deg, transparent, var(--cobalt)); } html[dir="rtl"][data-theme="light"] .kicker::before { background: linear-gradient(-90deg, transparent, var(--cobalt)); } /* --- light-mode surface fix: crisp WHITE cards on the light-gray page (vars merged into the block above) --- */ html[data-theme="light"] .card-d, html[data-theme="light"] .bento .cell, html[data-theme="light"] .price-card, html[data-theme="light"] .metric-chip, html[data-theme="light"] .faq, html[data-theme="light"] .cmp-wrap, html[data-theme="light"] .why-dark { background: #fff; box-shadow: 0 1px 2px rgba(16,22,40,.04), 0 10px 26px -18px rgba(16,22,40,.14); } html[data-theme="light"] .card-d:hover, html[data-theme="light"] .bento .cell:hover { background: #fff; box-shadow: 0 2px 5px rgba(16,22,40,.05), 0 16px 36px -18px rgba(16,22,40,.2); } html[data-theme="light"] .price-card.featured { background: linear-gradient(180deg, rgba(46,92,255,.06), #fff 42%); box-shadow: 0 2px 6px rgba(46,92,255,.06), 0 28px 64px -36px rgba(46,92,255,.32); } /* softer, cleaner glow + dotgrid on light (blue haze read muddy before) */ html[data-theme="light"] .aura::before { opacity: .32; } html[data-theme="light"] .dotgrid::after { background-image: radial-gradient(rgba(14,17,22,.07) 1px, transparent 1px); } /* stronger, clearer chat bubbles on light so the demo pops */ html[data-theme="light"] .phone { background: #fff; box-shadow: 0 40px 90px -34px rgba(16,22,40,.26), 0 0 0 1px rgba(14,17,22,.05); } html[data-theme="light"] .phone-body { background: #F4F1EC; } /* warm messaging canvas, WhatsApp-like */ html[data-theme="light"] .phone-top { background: #fff; } html[data-theme="light"] .msg-in { background: #fff; border-color: rgba(14,17,22,.09); color: #0E1116; box-shadow: 0 1px 1px rgba(16,22,40,.05); } html[data-theme="light"] .msg-out { background: #D6E4FF; border-color: transparent; color: #14336B; box-shadow: 0 1px 1px rgba(16,22,40,.05); } html[data-theme="light"] .msg .msg-time { color: rgba(14,17,22,.6); } html[data-theme="light"] .tick { color: rgba(20,51,107,.4); } html[data-theme="light"] .msg-out.read .tick { color: var(--emerald); } html[data-theme="light"] .voice.voice-out { background: #D6E4FF; border-color: transparent; } html[data-theme="light"] .voice.voice-out .vwave i { background: rgba(20,51,107,.45); } html[data-theme="light"] .voice.voice-out .vdur { color: #14336B; } /* bento lead-stage chips (theme-aware, replaces inline colors) */ .sc-a { background: rgba(148,163,184,.15); color: #B7C0CE; } .sc-b { background: rgba(59,130,246,.16); color: #93B8F8; } .sc-c { background: rgba(139,92,246,.18); color: #C4B0F9; } .sc-d { background: rgba(16,185,129,.15); color: #7EE9C0; } html[data-theme="light"] .sc-a { background: #EEF1F5; color: #5A6472; } html[data-theme="light"] .sc-b { background: #E3EDFF; color: #2050D8; } html[data-theme="light"] .sc-c { background: #F1EBFE; color: #6D28D9; } html[data-theme="light"] .sc-d { background: #E7F8F1; color: #067A55; } /* ---------- Keyboard focus ring (WCAG 2.4.7) — box-shadow so it follows each control's own radius (pills stay round) ---------- */ :where(a, button, .btn, .chip, summary, [tabindex]):focus-visible { outline: none; box-shadow: 0 0 0 2px var(--ink), 0 0 0 4px var(--cobalt-ondark); } /* ---------- Reduced motion ---------- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .001s !important; transition-duration: .001s !important; } html { scroll-behavior: auto; } .reveal { opacity: 1; transform: none; } .marquee-track { animation: none; } .island { display: none; } .grain::after { display: none; } .beam-v { transform: scaleY(1); } .pace-bars i { transform: scaleY(1); } .voice .vwave i, .typing i { animation: none; } /* hold equalizer/dots static (chat renders once, no loop) */ }