/* saj-family.css — the shared look for the static Saj sites (sajspeak.com = website/, sajsee.com = website/sajsee/). CANONICAL COPY: website/assets/saj-family.css. website/sajsee/assets/saj-family.css must stay byte-identical — sajsee.com is published from website/sajsee/ alone, so it carries its own copy. `node scripts/check-website-family-css.mjs` fails on drift. Edit here, then copy. Same family as sajsense.com and sajlink.com (Astro, marketing-sense/ and marketing/): the Crystalline Void tokens come from crates/saj-link/design/ tokens.json (as generated into marketing/src/styles/generated/tokens.css), and the type scale, spacing rhythm, shell and "rail" grid mirror marketing/src/styles/saj-layout.css. Values are copied, not invented; if those change, change them here too. Page contract: . Arabic pages set lang="ar" dir="rtl"; mixed Arabic runs inside English pages carry lang="ar" dir="rtl" on their own element. */ :root { color-scheme: dark; /* Crystalline Void (tokens.json) */ --void-deep: #050714; --void-mid: #0A0F22; --void-rise: #10162E; --void-halo: #181F3D; --crystal-fill: rgba(255, 255, 255, 0.055); --crystal-fill-rise: rgba(255, 255, 255, 0.095); --crystal-border: rgba(255, 255, 255, 0.09); --pulse-violet: #6B5BFF; --pulse-violet-2: #8A7EFF; --pulse-cyan: #22D9F2; --pulse-magenta: #FF5BD9; --pulse-warm: #E8C49A; --pulse-copper: #D4A574; --status-secure: #7AE6B8; --status-warn: #FFD074; --ink-primary: #F4F5FA; --ink-secondary: #9AA1C0; /* AA on every surface used here (saj-layout.css measured #8C92B3 at 6.57 on void-deep, 5.94 on crystal-fill, 5.37 on crystal-fill-rise). */ --ink-tertiary: #8C92B3; /* The product accent. sajsense.com colours each capability module: Saj Speak = pulse-warm, Saj See = pulse-magenta. Pages set this on . */ --accent: var(--pulse-warm); --irid: linear-gradient(120deg, #6B5BFF 0%, #22D9F2 33%, #FF5BD9 66%, #E8C49A 100%); /* Type */ --font-display: 'Geist', 'Geist Fallback', system-ui, sans-serif; --font-body: 'Geist', 'Geist Fallback', system-ui, sans-serif; --font-mono: 'Geist Mono', 'Geist Mono Fallback', ui-monospace, 'SF Mono', Menlo, monospace; --font-body-ar: 'Noto Sans Arabic', 'Noto Sans Arabic Fallback', 'Geist', system-ui, sans-serif; --font-heading-ar: 'Cairo', 'Noto Sans Arabic', 'Noto Sans Arabic Fallback', system-ui, sans-serif; /* Type scale — major third, fluid 390→1440 (saj-layout.css). */ --fs-100: 0.8125rem; --fs-200: 0.875rem; --fs-300: clamp(1rem, 0.96rem + 0.16vw, 1.0625rem); --fs-400: clamp(1.0625rem, 0.98rem + 0.33vw, 1.25rem); --fs-500: clamp(1.1875rem, 1.08rem + 0.45vw, 1.5rem); --fs-600: clamp(1.5rem, 1.23rem + 1.1vw, 2.125rem); --fs-700: clamp(2rem, 1.47rem + 2.2vw, 3.25rem); --fs-800: clamp(2.5rem, 1.66rem + 3.45vw, 4.75rem); /* Rhythm — 8px base. */ --sp-1: 0.5rem; --sp-2: 1rem; --sp-3: 1.5rem; --sp-4: 2rem; --sp-5: 3rem; --sp-6: 4rem; --sp-section: clamp(4.5rem, 2.9rem + 6.5vw, 8.5rem); --shell-max: 78rem; --gutter: clamp(1.25rem, 0.5rem + 2.8vw, 3rem); --measure: 40rem; --nav-h: 4.25rem; --radius-card: 1.25rem; --radius-inner: 0.75rem; --ease-out: cubic-bezier(0.22, 1, 0.36, 1); } /* Metric-matched fallbacks so the webfont swap does not shift layout (same values as marketing/src/styles/marketing.css). */ @font-face { font-family: 'Geist Fallback'; src: local('Inter'), local('Helvetica Neue'), local('Arial'); size-adjust: 100%; ascent-override: 95%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Geist Mono Fallback'; src: local('SF Mono'), local('Menlo'), local('Consolas'); size-adjust: 95%; ascent-override: 92%; descent-override: 22%; line-gap-override: 0%; } @font-face { font-family: 'Noto Sans Arabic Fallback'; src: local('Geeza Pro'), local('Arial'); size-adjust: 100%; ascent-override: 105%; descent-override: 30%; line-gap-override: 0%; } /* ── Base ── */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--nav-h) + 1rem); } @media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } } body { margin: 0; background: var(--void-deep); color: var(--ink-primary); font-family: var(--font-body); font-size: var(--fs-300); line-height: 1.6; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-x: clip; } [lang='ar'] body, body[dir='rtl'] { font-family: var(--font-body-ar); font-size: 1.0625rem; line-height: 1.75; } img, svg { display: block; max-width: 100%; } p, li, dd { text-wrap: pretty; } h1, h2, h3 { text-wrap: balance; } h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; } a { color: inherit; } ::selection { background: color-mix(in oklab, var(--pulse-warm) 35%, transparent); color: var(--ink-primary); } /* Arabic runs inside an English page */ .ar-run { font-family: var(--font-body-ar); letter-spacing: 0 !important; unicode-bidi: isolate; } .ar-head { font-family: var(--font-heading-ar); letter-spacing: 0 !important; } .ltr-run { direction: ltr; unicode-bidi: isolate; display: inline-block; } /* ── Quality floor ── */ :focus-visible { outline: 2px solid var(--pulse-cyan); outline-offset: 3px; border-radius: 6px; } .skip-link { position: absolute; inset-inline-start: var(--gutter); top: -4rem; z-index: 100; padding: 0.625rem 1rem; border-radius: 9999px; background: var(--pulse-warm); color: var(--void-deep); font-weight: 600; text-decoration: none; } .skip-link:focus { top: 0.75rem; } main:focus { outline: none; } .visually-hidden { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ── Backdrop: one quiet halo, no moving parts ── */ .void-halo { position: absolute; inset: 0 0 auto 0; height: 46rem; pointer-events: none; z-index: 0; background: radial-gradient(40rem 26rem at 78% 18%, color-mix(in oklab, var(--accent) 12%, transparent), transparent 70%), radial-gradient(36rem 24rem at 12% 0%, rgba(107, 91, 255, 0.10), transparent 70%); } [dir='rtl'] .void-halo { transform: scaleX(-1); } /* ── Shell + sections ── */ .shell { max-width: calc(var(--shell-max) + 2 * var(--gutter)); margin-inline: auto; padding-inline: var(--gutter); position: relative; } .section { padding-block: var(--sp-section); position: relative; } .section-ruled { border-block-start: 1px solid var(--crystal-border); } .section-band { background: var(--void-mid); } /* The rail: section header on a sticky rail, content in the wide column. */ .rail { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sp-4); } .rail-head { display: flex; flex-direction: column; gap: var(--sp-2); max-width: 34rem; } .rail-body { min-width: 0; } @media (min-width: 1024px) { .rail { grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); column-gap: clamp(3rem, 1rem + 4vw, 6rem); } .rail-head { position: sticky; top: calc(var(--nav-h) + 2rem); align-self: start; } } .rail-title { font-family: var(--font-display); font-size: var(--fs-700); font-weight: 650; line-height: 1.08; letter-spacing: -0.022em; } @media (min-width: 1024px) { .rail-title { font-size: clamp(2rem, 1.2rem + 1.4vw, 2.625rem); } } .rail-sub { color: var(--ink-secondary); line-height: 1.65; max-width: var(--measure); } [lang='ar'] .rail-title, [dir='rtl'] .rail-title { font-family: var(--font-heading-ar); font-weight: 700; letter-spacing: 0; line-height: 1.35; } [lang='ar'] .rail-sub, [dir='rtl'] .rail-sub { line-height: 1.85; } /* ── Labels: sentence case, lightly tracked mono (saj-layout.css) ── */ .label { font-family: var(--font-mono); font-size: var(--fs-100); font-weight: 500; letter-spacing: 0.01em; line-height: 1.5; color: var(--ink-tertiary); } .label-accent { color: var(--accent); } [lang='ar'] .label, [dir='rtl'] .label { font-family: var(--font-body-ar); font-size: var(--fs-200); font-weight: 600; letter-spacing: 0; } .chip { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.3125rem 0.75rem; border: 1px solid var(--crystal-border); background: var(--crystal-fill); border-radius: 9999px; font-family: var(--font-mono); font-size: var(--fs-100); color: var(--ink-secondary); white-space: nowrap; } .chip-dot { width: 0.4375rem; height: 0.4375rem; border-radius: 50%; background: var(--accent); flex: none; } [lang='ar'] .chip, [dir='rtl'] .chip { font-family: var(--font-body-ar); font-size: var(--fs-200); } /* ── Display type ── */ .display-xl { font-family: var(--font-display); font-size: var(--fs-800); font-weight: 700; line-height: 1.04; letter-spacing: -0.024em; } [lang='ar'] .display-xl, [dir='rtl'] .display-xl { font-family: var(--font-heading-ar); letter-spacing: 0; line-height: 1.3; } .lede { font-size: var(--fs-400); line-height: 1.6; color: var(--ink-secondary); max-width: var(--measure); } [lang='ar'] .lede, [dir='rtl'] .lede { line-height: 1.85; } .text-irid { background: var(--irid); -webkit-background-clip: text; background-clip: text; color: transparent; } .text-accent { color: var(--accent); } .prose-link { color: var(--ink-primary); text-decoration: underline; text-decoration-color: color-mix(in oklab, var(--accent) 60%, transparent); text-underline-offset: 0.2em; } .prose-link:hover { text-decoration-color: var(--accent); } [lang='ar'] .prose-link { text-decoration: none; border-bottom: 1px solid color-mix(in oklab, var(--accent) 60%, transparent); } /* ── Buttons: 44px targets, one size across the family ── */ .cta-primary, .cta-ghost { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; min-height: 2.75rem; padding: 0.75rem 1.375rem; border-radius: 9999px; font-family: inherit; font-size: 0.9375rem; font-weight: 600; line-height: 1.25; text-align: center; text-decoration: none; cursor: pointer; transition: background 200ms var(--ease-out), border-color 200ms var(--ease-out); } .cta-primary { background: var(--pulse-warm); color: var(--void-deep); border: 0; } .cta-primary:hover { background: var(--pulse-copper); } .cta-ghost { background: transparent; color: var(--ink-primary); border: 1px solid var(--crystal-border); } .cta-ghost:hover { border-color: var(--pulse-warm); background: var(--crystal-fill); } [lang='ar'] .cta-primary, [lang='ar'] .cta-ghost { font-size: 1rem; } .cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; } /* ── Header ── */ .nav-header { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--void-deep) 82%, transparent); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border-block-end: 1px solid var(--crystal-border); } .nav-row { display: flex; align-items: center; gap: var(--sp-3); min-height: var(--nav-h); } .brand { display: inline-flex; align-items: center; gap: 0.75rem; text-decoration: none; flex: none; } .brand-mark { width: 2.25rem; height: 2.25rem; border-radius: 0.5625rem; display: grid; place-items: center; background: linear-gradient(160deg, var(--crystal-fill-rise), var(--crystal-fill)); border: 1px solid var(--crystal-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.06); } .brand-mark svg { width: 1.3rem; height: 1.3rem; } .brand-name { font-family: var(--font-display); font-size: 1.125rem; font-weight: 600; letter-spacing: -0.01em; white-space: nowrap; } .brand-name .brand-product { color: var(--accent); } .nav-links { display: none; align-items: center; gap: 0.25rem; margin-inline: auto; } .nav-link { display: inline-flex; align-items: center; min-height: 2.75rem; padding-inline: 0.75rem; color: var(--ink-secondary); text-decoration: none; font-size: 0.9375rem; border-radius: 9999px; } .nav-link:hover { color: var(--ink-primary); } .nav-actions { display: flex; align-items: center; gap: 0.625rem; margin-inline-start: auto; } .nav-lang { display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--crystal-border); color: var(--ink-secondary); text-decoration: none; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.04em; } .nav-lang:hover { color: var(--ink-primary); border-color: var(--ink-tertiary); } .nav-cta { display: none; } .nav-menu { position: relative; } .nav-menu > summary { list-style: none; display: inline-grid; place-items: center; width: 2.75rem; height: 2.75rem; border-radius: 50%; border: 1px solid var(--crystal-border); color: var(--ink-primary); cursor: pointer; } .nav-menu > summary::-webkit-details-marker { display: none; } .nav-menu-panel { position: absolute; inset-inline-end: 0; top: calc(100% + 0.625rem); width: min(17rem, calc(100vw - 2 * var(--gutter))); display: flex; flex-direction: column; padding: 0.5rem; background: var(--void-mid); border: 1px solid var(--crystal-border); border-radius: var(--radius-inner); box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45); } .nav-menu-panel a { padding: 0.75rem 0.875rem; min-height: 2.75rem; border-radius: 0.5rem; color: var(--ink-primary); text-decoration: none; } .nav-menu-panel a:hover { background: var(--crystal-fill); } @media (min-width: 640px) { .nav-cta { display: inline-flex; } } @media (min-width: 960px) { .nav-links { display: flex; } .nav-actions { margin-inline-start: 0; } .nav-menu { display: none; } } /* ── Hero ── */ .hero { position: relative; padding-block: clamp(3.5rem, 2rem + 6vw, 7.5rem) clamp(3.5rem, 2rem + 5vw, 6.5rem); } .hero-grid { display: grid; gap: var(--sp-5); align-items: center; position: relative; z-index: 1; } @media (min-width: 1024px) { .hero-grid { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--sp-6); } } .hero-copy { display: flex; flex-direction: column; gap: var(--sp-3); } .hero-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; } .hero-foot { color: var(--ink-tertiary); font-size: var(--fs-200); } /* ── Figures band ── */ .figures { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--sp-4) var(--sp-3); } @media (min-width: 768px) { .figures { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .figure { display: flex; flex-direction: column; gap: 0.25rem; padding-inline-start: var(--sp-2); border-inline-start: 1px solid var(--crystal-border); } .figure-num { font-family: var(--font-display); font-size: var(--fs-600); font-weight: 650; letter-spacing: -0.02em; line-height: 1.1; } .figure-label { color: var(--ink-tertiary); font-size: var(--fs-200); } /* ── Row lists: hairline-separated rows instead of card grids ── */ .rows { list-style: none; padding: 0; margin: 0; border-block-start: 1px solid var(--crystal-border); } .row { display: grid; gap: 0.375rem var(--sp-3); padding-block: var(--sp-3); border-block-end: 1px solid var(--crystal-border); } @media (min-width: 720px) { .row { grid-template-columns: minmax(0, 13rem) minmax(0, 1fr); } } .row-title { font-size: var(--fs-500); font-weight: 600; letter-spacing: -0.01em; line-height: 1.3; } .row-body { color: var(--ink-secondary); max-width: var(--measure); } .row-meta { margin-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.375rem 1rem; } [lang='ar'] .row-title, [dir='rtl'] .row-title { font-family: var(--font-heading-ar); font-weight: 700; letter-spacing: 0; } /* ── Engine groups ── */ .groups { display: grid; gap: var(--sp-5); } .group-head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sp-2); padding-block-end: var(--sp-2); border-block-end: 1px solid var(--crystal-border); } .group-title { font-size: var(--fs-500); font-weight: 600; letter-spacing: -0.01em; } .engines { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: minmax(0, 1fr); } @media (min-width: 720px) { .engines { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--sp-4); } } .engine { display: grid; gap: 0.25rem; padding-block: var(--sp-2); border-block-end: 1px solid color-mix(in oklab, var(--crystal-border) 60%, transparent); } .engine-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.75rem; font-weight: 600; } .engine-crate { font-family: var(--font-mono); font-size: var(--fs-100); color: var(--ink-tertiary); font-weight: 400; } .engine-body { color: var(--ink-secondary); font-size: var(--fs-200); line-height: 1.6; } /* ── Panels (used sparingly: one per section at most) ── */ .panel { background: var(--crystal-fill); border: 1px solid var(--crystal-border); border-radius: var(--radius-card); padding: clamp(1.25rem, 0.8rem + 2vw, 2.25rem); } /* ── Tables ── */ .table-wrap { overflow-x: auto; } .table { width: 100%; border-collapse: collapse; font-size: var(--fs-200); } .table th, .table td { text-align: start; padding: 0.875rem 0.75rem; border-block-end: 1px solid var(--crystal-border); vertical-align: top; } .table th { color: var(--ink-tertiary); font-weight: 500; font-family: var(--font-mono); font-size: var(--fs-100); } .table td:first-child, .table th:first-child { padding-inline-start: 0; } .status { display: inline-flex; align-items: center; gap: 0.5rem; white-space: nowrap; } .status::before { content: ''; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: currentColor; } .status-live { color: var(--status-secure); } .status-planned { color: var(--ink-tertiary); } /* ── Footer ── */ .site-footer { border-block-start: 1px solid var(--crystal-border); background: var(--void-deep); padding-block: var(--sp-6) var(--sp-4); } .footer-grid { display: grid; gap: var(--sp-5); } @media (min-width: 900px) { .footer-grid { grid-template-columns: minmax(0, 5fr) repeat(3, minmax(0, 2fr)); } } .footer-about { color: var(--ink-tertiary); font-size: var(--fs-200); max-width: 26rem; margin-top: var(--sp-2); } .footer-col { display: flex; flex-direction: column; gap: 0.25rem; } .footer-col h2 { font-family: var(--font-mono); font-size: var(--fs-100); font-weight: 500; color: var(--ink-tertiary); margin-bottom: 0.5rem; } [lang='ar'] .footer-col h2 { font-family: var(--font-body-ar); font-size: var(--fs-200); } .footer-col a { color: var(--ink-secondary); text-decoration: none; min-height: 2rem; display: inline-flex; align-items: center; font-size: var(--fs-200); } .footer-col a:hover { color: var(--ink-primary); } .footer-base { margin-top: var(--sp-5); padding-top: var(--sp-3); border-top: 1px solid var(--crystal-border); display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--sp-2); color: var(--ink-tertiary); font-size: var(--fs-100); } /* ── Motion: one orchestrated moment per page, never for reduced motion ── */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }