/* ============================================================ SCRIBEOPS — Editorial Ink Design System (bilingual EN/AR) Direction is driven by . CSS uses logical properties (inline/block, start/end) so layout mirrors automatically. ============================================================ */ :root { /* ============================================================ 1.1 — COLOR Surfaces (deep ink canvas) */ --ink-950: #070a12; --ink-900: #090d16; --ink-850: #0d1320; --ink-800: #111a2c; --ink-700: #1b2540; --ink-button: #06101f; /* text on bright buttons */ --paper: #f6f2e9; --paper-dim: rgba(246, 242, 233, 0.72); --paper-faint: rgba(246, 242, 233, 0.45); --white: #ffffff; /* Neutral hairlines (white-alpha) */ --line: rgba(255, 255, 255, 0.08); --line-strong: rgba(255, 255, 255, 0.14); --line-soft: rgba(255, 255, 255, 0.05); --line-faint: rgba(255, 255, 255, 0.03); /* Accents — three jobs + one transitional violet */ --sapphire: #2f6bff; --sapphire-rgb: 47, 107, 255; /* primary action */ --cyan: #22d3ee; --cyan-rgb: 34, 211, 238; /* motion / "live" signal */ --amber: #f5a524; --amber-rgb: 245, 165, 36; /* warnings, wire-tags */ /* TRANSITIONAL: violet is the win #4 tint + sparkline hue. Plan §1.1 removes it as a brand accent; it is deleted when Phase 4.3 collapses win tints. */ --violet: #a78bfa; --violet-rgb: 167, 139, 250; /* Accent light shades — workspace data-viz content */ --sapphire-lt: #8fb4ff; --cyan-lt: #67e8f9; --amber-lt: #fcd34d; --violet-lt: #c4b5fd; /* Secondary literal hues used by workspace data-viz + gradient stops */ --teal: #2dd4bf; --sky: #5b8cff; /* scribe-gradient cool stop */ /* Traffic-light dots */ --dot-r: #fca5a5; --dot-y: #fcd34d; --dot-g: #6ee7b7; --black: #000000; --selection-bg: rgba(47, 107, 255, 0.35); /* ============================================================ 1.2 — TYPE SCALE (fluid, 6 steps) Applied to marketing surfaces; the dense workspace mono runs below use --fs-mono-* until Phase 2 consolidates them. */ --step--1: clamp(0.75rem, 0.72rem + 0.15vw, 0.8125rem); /* meta, captions */ --step-0: clamp(0.9375rem, 0.9rem + 0.2vw, 1rem); /* body */ --step-1: clamp(1.0625rem, 1rem + 0.3vw, 1.1875rem); /* lead */ --step-2: clamp(1.5rem, 1.2rem + 1.5vw, 2rem); /* section title */ --step-3: clamp(2rem, 1.4rem + 3vw, 2.75rem); /* large title */ --step-4: clamp(2.6rem, 1.6rem + 5vw, 4.5rem); /* hero */ /* Workspace data mono (kept pixel-exact; Phase 2 folds into the scale) */ --fs-mono--1: 9.5px; --fs-mono-0: 10px; --fs-mono-1: 11px; --fs-mono-2: 11.5px; --fs-mono-3: 12px; --fs-mono-4: 13px; --fs-mono-5: 16px; --fs-mono-6: 17px; --fs-mono-7: 20px; --fs-mono-8: 26px; /* ============================================================ 1.3 — SPACING (4px base) */ --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px; --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px; --sp-9: 96px; /* Off-scale helpers used by tight UI (audit-flagged; Phase 4 may snap) */ --sp-1-5: 6px; --sp-2-5: 10px; /* Layout rhythm (kept pixel-exact so structural spacing does not shift) */ --space-7: 7rem; /* 112px — section--lg / footer / nav offset */ --space-8: 8rem; /* 128px — nav offset ≥640 */ --size-nav-bar: 3.5rem; --maxw-shell: 80rem; --maxw-prose: 36rem; --maxw-section: 42rem; --maxw-tagline: 20rem; /* Hairlines & border widths */ --hairline: 1px; --bd-w-1-5: 1.5px; --bd-w-2: 2px; --bd-w-3: 3px; /* Component sizes (tight surfaces — pixel-exact until Phase 4 retunes) */ --size-logo: 34px; /* Icon system (plan §5.3) — two content sizes + the brand mark. --size-icon tracks the host font-size (em) so inline icons in buttons, fields and labels scale with their text; the feature + logo marks are fixed optical sizes. */ --size-icon: 1.25em; /* body / inline icon */ --size-icon-feat: 1.75rem; /* feature-card icon */ --size-icon-logo: 1.5rem; /* brand mark inside .logo-hex */ --size-statusbar: 38px; --size-titlebar: 30px; --size-win-dot: 9px; --size-feat-icon: 46px; --size-caret: 7px; --size-cta-blob: 480px; --size-lang-pad: 3px; --workspace-h: clamp(420px, 54vw, 580px); --workspace-h-sm: clamp(680px, 130vw, 900px); /* Transform offsets (hover lifts / reveal) */ --lift-sm: -2px; --lift-md: -4px; /* Blur scale */ --blur-sm: 6px; --blur-md: 14px; --blur-lg: 60px; --blur-xl: 90px; /* Ambient canvas — one barely-perceptible radial wash + near-black linear (plan §3.4) */ --bg-base-image: radial-gradient(900px 600px at 75% -10%, rgba(var(--sapphire-rgb), 0.10), transparent 60%), linear-gradient(180deg, var(--ink-900) 0%, var(--ink-950) 100%); /* ============================================================ 1.4 — RADII (two corner radii + one circle primitive — plan §4.2) Only --r-sm / --r-lg describe a corner radius. --r-circle (50%) is a shape primitive for genuinely round elements (traffic-light dots, pulse dot, spinner, cta-blob, lang-knob) — not a third corner radius. gate-phase4 forbids any raw px / % border-radius literal. */ --r-sm: 10px; /* buttons, inputs, tags, dots container */ --r-lg: 20px; /* cards, panels, glass */ --r-circle: 50%; /* ============================================================ 1.5 — SHADOW (one family, two elevations) Marketing surfaces use --shadow-1 (rest) / --shadow-2 (raised); glows survive only on workspace data-viz + functional rings. */ --shadow-1: 0 1px 0 rgba(255,255,255,0.04) inset, 0 18px 50px -40px rgba(0,0,0,0.8); --shadow-2: 0 1px 0 rgba(255,255,255,0.05) inset, 0 30px 80px -40px rgba(0,0,0,0.9); --shadow-ws: 0 40px 120px -50px rgba(0,0,0,0.9), 0 0 0 1px rgba(0,0,0,0.4); --inset-hi: inset 0 1px 0 rgba(255,255,255,0.05); /* Colored glows — scoped to workspace data-viz + functional surfaces (logo mark, focus ring, live pulse, window tints). Phase 3.7 collapsed every marketing button/active state to neutral --shadow-1/--shadow-2. */ --glow-sapphire: 0 0 24px -6px rgba(var(--sapphire-rgb), 0.6); --glow-cyan-xs: 0 0 12px rgba(var(--cyan-rgb), 0.6); --glow-cyan-sm: 0 4px 16px -4px rgba(var(--cyan-rgb), 0.7); --ring-cyan: 0 0 0 3px rgba(var(--cyan-rgb), 0.15); --glow-amber: 0 0 40px -16px rgba(var(--amber-rgb), 0.5); --glow-cyan-med: 0 0 40px -16px rgba(var(--cyan-rgb), 0.5); --glow-blue: 0 0 44px -16px rgba(91, 140, 255, 0.55); --glow-violet: 0 0 40px -16px rgba(var(--violet-rgb), 0.55); --ring-pulse: 0 0 0 0 rgba(var(--cyan-rgb), 0.6); --pulse-spread: 10px; /* Window tint defaults — overridden per .win[data-accent] (plan §4.3). Declared here (not only on the selector) so the token is traceable and any .win without a data-accent still resolves a tint. */ --win-accent: var(--amber-rgb); --win-glow: var(--glow-amber); /* ============================================================ 1.6 — MOTION (one curve; UI transitions collapse to two durations — plan §4.4) var(--ease) is the single timing curve for every transition. --dur-loop and --dur-pulse are the only duration exceptions: functional content loops whose period is semantically fixed (caret blink, spinner) and the single accent-in-motion (live pulse), both preserved by plan §3.8. */ --ease: cubic-bezier(0.22, 1, 0.36, 1); --dur-1: 0.18s; /* hovers, focus */ --dur-2: 0.32s; /* layout, reveal, workspace tile transitions */ --dur-loop: 0.8s; /* functional content-loop period (caret blink, spinner) */ --dur-pulse: 1.8s; /* the one accent-in-motion (live signal) */ /* ============================================================ 1.7 — Z-INDEX */ --z-bg: -2; --z-glow: -1; --z-base: 0; --z-raised: 1; --z-overlay: 2; --z-chrome: 6; --z-status: 7; --z-nav: 50; --z-modal: 100; } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--ink-900); color: var(--paper); /* Inter first → Latin glyphs; Cairo fallback → Arabic glyphs (per-glyph) */ font-family: 'Inter', 'Cairo', system-ui, -apple-system, sans-serif; font-size: var(--step-0); line-height: 1.6; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; overflow-x: hidden; } [dir="rtl"] body, [dir="rtl"] { font-family: 'Cairo', 'Inter', system-ui, sans-serif; line-height: 1.7; } ::selection { background: rgba(47, 107, 255, 0.35); color: var(--white); } /* Numbers & code stay LTR even inside RTL (isolated bidi runs) */ .num { direction: ltr; unicode-bidi: isolate; } .dir-arrow { display: inline-block; } [dir="rtl"] .dir-arrow { transform: scaleX(-1); } /* ============================================================ ICON & LOGO SYSTEM (plan §5) — iconography rules (§5.3) One inline SVG sprite (a hidden of s) referenced via . The rules below are enforced by tests/gate-phase5.sh §5: • stroke — 1.5px everywhere (logo, icons, UI): var(--bd-w-1-5) • caps/joins — round; geometry only, fill:none • colour — currentColor only; NEVER the accent gradient • sizes — two content sizes: --size-icon (1.25em, body) tracks the host font-size; --size-icon-feat (1.75rem, feature card). The logo mark is a documented brand exception. • direction — directional icons mirror in RTL (.icon-wire) No emoji or Unicode pictograph glyphs exist in the markup; the dir-arrow "→" is the only arrows-block code point retained (its own .dir-arrow mirror). ============================================================ */ .icon-sprite { position: absolute; width: 0; height: 0; overflow: hidden; } .icon { display: block; width: var(--size-icon); height: var(--size-icon); flex: none; fill: none; stroke: currentColor; stroke-width: var(--bd-w-1-5); stroke-linecap: round; stroke-linejoin: round; } .feat-icon .icon { width: var(--size-icon-feat); height: var(--size-icon-feat); } .logo-hex .icon { width: var(--size-icon-logo); height: var(--size-icon-logo); } /* Directional content icon: the wire-ingest flow points inline-end, so it mirrors in RTL (plan §5.3 / §7.4 bidirectional-icon rule). */ [dir="rtl"] .icon-wire { transform: scaleX(-1); } /* Liquid-ink gradient text */ .scribe-gradient { background: linear-gradient(100deg, var(--sky) 0%, var(--cyan) 42%, var(--amber) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: transparent; } /* ---------- Ambient background ---------- */ .bg-stage { position: fixed; inset: 0; z-index: var(--z-bg); overflow: hidden; pointer-events: none; } .bg-base { position: absolute; inset: 0; background: var(--bg-base-image); } /* ---------- Glass ---------- */ .glass { background: rgba(17, 26, 44, 0.55); backdrop-filter: blur(var(--blur-md)) saturate(140%); -webkit-backdrop-filter: blur(var(--blur-md)) saturate(140%); border: var(--hairline) solid var(--line); box-shadow: var(--shadow-1); } /* ---------- Navbar ---------- */ .nav-link { position: relative; color: var(--paper-dim); transition: color var(--dur-1) var(--ease); } .nav-link:hover { color: var(--paper); } .nav-link::after { content: ''; position: absolute; inset-inline-start: 0; bottom: calc(var(--sp-1-5) * -1); height: var(--hairline); width: 0; background: linear-gradient(90deg, var(--sapphire), var(--cyan)); transition: width var(--dur-2) var(--ease); } .nav-link:hover::after { width: 100%; } .logo-hex { width: var(--size-logo); height: var(--size-logo); display: grid; place-items: center; background: linear-gradient(140deg, rgba(47,107,255,0.25), rgba(34,211,238,0.18)); border: var(--hairline) solid var(--line-strong); border-radius: var(--r-sm); box-shadow: var(--glow-sapphire); color: var(--paper); } /* ---------- Language toggle ---------- */ .lang-toggle { position: relative; display: inline-flex; align-items: center; direction: ltr; height: var(--size-statusbar); padding: var(--size-lang-pad); border-radius: var(--r-sm); cursor: pointer; background: rgba(255,255,255,0.04); border: var(--hairline) solid var(--line-strong); transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease); } .lang-toggle:hover { border-color: rgba(var(--sapphire-rgb), 0.4); background: rgba(var(--sapphire-rgb), 0.06); } .lang-opt { position: relative; z-index: var(--z-overlay); min-width: var(--sp-6); text-align: center; line-height: var(--sp-6); font-family: 'JetBrains Mono', monospace; font-size: var(--fs-mono-3); font-weight: 500; color: var(--paper-faint); transition: color var(--dur-1) var(--ease); padding: 0 var(--sp-2-5); border-radius: var(--r-sm); appearance: none; -webkit-appearance: none; background: transparent; border: 0; cursor: pointer; } .lang-opt:hover { color: var(--paper); } .lang-opt.active { color: var(--ink-button); font-weight: 600; } .lang-opt:focus-visible { outline: none; box-shadow: var(--ring-cyan); } .lang-knob { position: absolute; top: var(--size-lang-pad); z-index: var(--z-raised); height: calc(100% - var(--size-lang-pad) * 2); border-radius: var(--r-sm); background: linear-gradient(120deg, var(--sapphire-lt), var(--cyan)); box-shadow: var(--glow-cyan-sm); transition: left var(--dur-2) var(--ease), width var(--dur-2) var(--ease); } /* ---------- Buttons — one component, two variants (plan §4.1) ---------- .btn is the single button base; .btn-primary / .btn-ghost are the only variants. The gateway auth submit composes .btn .btn-primary — its form full-width + loading state is scoped via the .auth-submit modifier. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--sp-2); padding: var(--sp-3) var(--sp-5); border-radius: var(--r-sm); border: var(--hairline) solid transparent; font-family: inherit; font-size: var(--step-0); font-weight: 600; line-height: 1; white-space: nowrap; cursor: pointer; text-decoration: none; transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease), border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); } .btn-primary { color: var(--ink-button); background: var(--paper); box-shadow: var(--shadow-1); } .btn-primary:hover { transform: translateY(var(--lift-sm)); box-shadow: var(--shadow-2); } .btn-ghost { color: var(--paper); background: var(--line-faint); border-color: var(--line-strong); } .btn-ghost:hover { background: rgba(255,255,255,0.07); border-color: rgba(255,255,255,0.25); } /* ---------- Hero ---------- */ .hero-title { font-weight: 600; letter-spacing: -0.035em; line-height: 1.05; font-size: var(--step-4); max-inline-size: 14ch; } [dir="rtl"] .hero-title { letter-spacing: 0; font-weight: 700; line-height: 1.15; } /* Arabic needs more vertical room */ .eyebrow { font-family: 'JetBrains Mono', monospace; font-size: var(--step--1); letter-spacing: .22em; text-transform: uppercase; color: var(--cyan); display: inline-flex; align-items: center; gap: var(--sp-2-5); } [dir="rtl"] .eyebrow { letter-spacing: .05em; } .pulse-dot { width: var(--sp-2); height: var(--sp-2); border-radius: var(--r-circle); background: var(--cyan); box-shadow: var(--ring-pulse); animation: pulse var(--dur-pulse) var(--ease) infinite; } @keyframes pulse { 0%{box-shadow:0 0 0 0 rgba(var(--cyan-rgb),.6)} 70%{box-shadow:0 0 0 var(--pulse-spread) rgba(var(--cyan-rgb),0)} 100%{box-shadow:0 0 0 0 rgba(var(--cyan-rgb),0)} } /* ============================================================ TILING WORKSPACE ENGINE ============================================================ */ .workspace { position: relative; width: 100%; height: var(--workspace-h); border-radius: var(--r-lg); overflow: hidden; } .ws-chrome { position: absolute; inset: 0; z-index: var(--z-chrome); pointer-events: none; border-radius: var(--r-lg); border: var(--hairline) solid var(--line-strong); box-shadow: var(--shadow-ws); } .ws-statusbar { position: absolute; top: 0; inset-inline: 0; height: var(--size-statusbar); z-index: var(--z-status); display: flex; align-items: center; justify-content: space-between; padding-inline: var(--sp-4); font-family: 'JetBrains Mono', monospace; font-size: var(--fs-mono-1); color: var(--paper-dim); background: linear-gradient(180deg, rgba(6,9,18,0.85), rgba(6,9,18,0.4)); border-bottom: var(--hairline) solid var(--line); backdrop-filter: blur(var(--blur-sm)); } .ws-canvas { position: absolute; inset-block: var(--size-statusbar) 0; inset-inline: 0; } .win { position: absolute; transition: left var(--dur-2) var(--ease), top var(--dur-2) var(--ease), width var(--dur-2) var(--ease), height var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); border-radius: var(--r-sm); overflow: hidden; will-change: left, top, width, height; } .win-titlebar { height: var(--size-titlebar); display: flex; align-items: center; gap: var(--sp-2); padding-inline: var(--sp-3); direction: ltr; font-family: 'JetBrains Mono', monospace; font-size: var(--fs-mono-1); border-bottom: var(--hairline) solid rgba(255,255,255,0.07); backdrop-filter: blur(var(--blur-sm)); } .win-dots { display: flex; gap: var(--sp-1-5); margin-inline-end: var(--sp-1-5); } .win-dots i { width: var(--size-win-dot); height: var(--size-win-dot); border-radius: var(--r-circle); display: block; opacity: .8; } .win-body { position: absolute; inset-block: var(--size-titlebar) 0; inset-inline: 0; padding: var(--sp-3); overflow: hidden; } .win:hover { transform: translateY(var(--lift-sm)) scale(1.003); } /* Per-window accent — one rule, four accents (plan §4.3). Each window sets its --win-accent rgb + --win-glow via data-accent; the tint (gradient, border, shadow, titlebar wash) is derived from those two properties alone — collapsing the former .tint-wire/.tint-edit/.tint-cdn/.tint-vibe block into one rule. The edit window now resolves to the sapphire token (was an untokémonised 59,130,246), reducing the accent sprawl per plan §1.1. */ .win[data-accent="amber"] { --win-accent: var(--amber-rgb); --win-glow: var(--glow-amber); } .win[data-accent="sapphire"]{ --win-accent: var(--sapphire-rgb); --win-glow: var(--glow-sapphire); } .win[data-accent="cyan"] { --win-accent: var(--cyan-rgb); --win-glow: var(--glow-cyan-med); } .win[data-accent="violet"] { --win-accent: var(--violet-rgb); --win-glow: var(--glow-violet); } .win[data-accent] { background: linear-gradient(160deg, rgba(var(--win-accent), 0.17), rgba(var(--win-accent), 0.05)); border: var(--hairline) solid rgba(var(--win-accent), 0.30); box-shadow: var(--win-glow), var(--inset-hi); } .win[data-accent] .win-titlebar { background: rgba(var(--win-accent), 0.11); } /* Wire feed */ .wire-list { display: flex; flex-direction: column; gap: var(--sp-2); font-size: var(--fs-mono-2); line-height: 1.45; } .wire-item { padding: var(--sp-1-5) var(--sp-2-5); border-radius: var(--r-sm); background: rgba(255,255,255,0.03); border: var(--hairline) solid rgba(255,255,255,0.05); animation: win-in var(--dur-2) var(--ease); } @keyframes win-in { from { opacity: 0; transform: translateY(calc(var(--sp-1-5) * -1)); } to { opacity: 1; transform: none; } } .wire-row { display: flex; align-items: center; justify-content: space-between; margin-bottom: var(--sp-1); } .wire-tag { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-mono--1); padding: var(--hairline) var(--sp-1-5); border-radius: var(--r-sm); font-weight: 500; letter-spacing: .05em; } .tag-brk { background: rgba(239,68,68,0.2); color: var(--dot-r); } .tag-upd { background: rgba(245,165,36,0.18); color: var(--amber-lt); } .tag-wir { background: rgba(34,211,238,0.16); color: var(--cyan-lt); } .wire-src { color: var(--paper-faint); font-family: 'JetBrains Mono', monospace; font-size: var(--fs-mono--1); } .wire-hd { color: var(--paper); } .wire-time { color: var(--paper-faint); font-family: 'JetBrains Mono', monospace; font-size: var(--fs-mono--1); } /* Markdown */ .md { font-family: 'JetBrains Mono', 'Cairo', monospace; font-size: var(--fs-mono-1); line-height: 1.7; white-space: pre-wrap; unicode-bidi: plaintext; } .md h { color: var(--sapphire-lt); } .md s { color: var(--cyan); } .md c { color: var(--paper-faint); } .md b { color: var(--amber-lt); } .md a { color: var(--violet-lt); } .caret { display: inline-block; width: var(--size-caret); background: var(--cyan); animation: blink var(--dur-loop) steps(1) infinite; } @keyframes blink { 50% { opacity: 0; } } /* CDN matrix — kept LTR (technical data) */ #cdn-rows { direction: ltr; } .cdn-row { display: grid; grid-template-columns: var(--sp-8) 1fr var(--sp-7); align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-2); font-family: 'JetBrains Mono', monospace; font-size: var(--fs-mono-0); } .cdn-region { color: var(--paper-dim); } .cdn-track { height: var(--sp-2); border-radius: var(--r-sm); background: rgba(255,255,255,0.05); overflow: hidden; } .cdn-fill { height: 100%; border-radius: var(--r-sm); transition: width var(--dur-2) var(--ease); background: linear-gradient(90deg, var(--cyan), var(--teal)); box-shadow: var(--glow-cyan-xs); } .cdn-val { color: var(--cyan); text-align: end; } /* Metrics */ .metric-big { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-mono-8); font-weight: 500; letter-spacing: -0.02em; } .metric-label { font-family: 'JetBrains Mono', monospace; font-size: var(--fs-mono--1); letter-spacing: .12em; text-transform: uppercase; color: var(--paper-faint); } [dir="rtl"] .metric-label { letter-spacing: 0; } .spark { width: 100%; height: var(--size-feat-icon); display: block; } /* Layout control */ .mode-btn { flex: 1; min-width: 0; font-family: 'JetBrains Mono', monospace; font-size: var(--fs-mono-1); letter-spacing: .06em; padding: var(--sp-2-5) var(--sp-3); border-radius: var(--r-sm); cursor: pointer; color: var(--paper-dim); background: rgba(255,255,255,0.02); border: var(--hairline) solid var(--line); transition: all var(--dur-1) var(--ease); display: flex; align-items: center; justify-content: center; gap: var(--sp-2); white-space: nowrap; } [dir="rtl"] .mode-btn { letter-spacing: 0; } .mode-btn:hover { color: var(--paper); border-color: var(--line-strong); background: rgba(255,255,255,0.05); } .mode-btn.active { color: var(--ink-button); font-weight: 500; background: linear-gradient(120deg, var(--sapphire-lt), var(--cyan)); border-color: transparent; box-shadow: var(--shadow-1); } .mode-btn .ico { font-size: var(--fs-mono-4); opacity: .9; } /* Features — one interaction only: a 1px border lighten + raised shadow (plan §3.6) */ .feat { position: relative; border-radius: var(--r-lg); padding: var(--sp-5); overflow: hidden; transition: border-color var(--dur-2) var(--ease), box-shadow var(--dur-2) var(--ease); } .feat:hover { border-color: var(--line-strong); box-shadow: var(--shadow-2); } .feat-icon { width: var(--size-feat-icon); height: var(--size-feat-icon); border-radius: var(--r-sm); display: grid; place-items: center; border: var(--hairline) solid var(--line-strong); margin-bottom: var(--sp-4); } /* Auth gateway */ .auth-shell { border-radius: var(--r-lg); padding: var(--bd-w-2); position: relative; } .auth-shell::before { content: ''; position: absolute; inset: 0; border-radius: var(--r-lg); padding: var(--bd-w-1-5); background: linear-gradient(135deg, rgba(47,107,255,0.7), rgba(34,211,238,0.5), rgba(245,165,36,0.5)); -webkit-mask: linear-gradient(var(--black) 0 0) content-box, linear-gradient(var(--black) 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } .auth-input { width: 100%; padding-block: var(--sp-3); padding-inline-end: var(--sp-4); padding-inline-start: var(--sp-7); border-radius: var(--r-sm); background: rgba(6,9,18,0.6); border: var(--hairline) solid var(--line-strong); color: var(--paper); font-size: var(--step-0); font-family: inherit; transition: border-color var(--dur-1) var(--ease), box-shadow var(--dur-1) var(--ease); } .auth-input::placeholder { color: var(--paper-faint); } .auth-input:focus { outline: none; border-color: rgba(34,211,238,0.6); box-shadow: var(--ring-cyan); } .auth-field { position: relative; } .auth-field .fi { position: absolute; inset-inline-start: var(--sp-4); top: 50%; transform: translateY(-50%); color: var(--paper-faint); font-size: var(--fs-mono-5); } .auth-field:focus-within .fi { color: var(--cyan); } /* Auth submit composes .btn .btn-primary; this modifier carries only the form-scoped full-width + loading state machine (plan §4.1). */ .auth-submit { width: 100%; } .auth-submit:active { transform: translateY(0); } .auth-submit.loading { pointer-events: none; opacity: .85; } .auth-submit .spin { width: var(--sp-4); height: var(--sp-4); border: var(--bd-w-2) solid rgba(6,16,31,0.3); border-top-color: var(--ink-button); border-radius: var(--r-circle); animation: spin var(--dur-loop) linear infinite; display: none; } .auth-submit.loading .spin { display: inline-block; } .auth-submit.loading .lbl { opacity: .8; } @keyframes spin { to { transform: rotate(360deg); } } .auth-fade { transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .auth-fade.out { opacity: 0; transform: translateY(calc(var(--sp-2) * -1)) scale(0.985); pointer-events: none; } blockquote.routing-note { position: relative; padding-block: var(--sp-4); padding-inline-end: var(--sp-4); padding-inline-start: var(--sp-5); border-radius: var(--r-sm); background: rgba(245,165,36,0.06); border: var(--hairline) solid rgba(245,165,36,0.22); border-inline-start: var(--bd-w-3) solid var(--amber); } .divider { height: var(--hairline); background: linear-gradient(90deg, transparent, var(--line-strong), transparent); } .reveal { opacity: 0; transform: translateY(var(--sp-5)); transition: opacity var(--dur-2) var(--ease), transform var(--dur-2) var(--ease); } .reveal.in { opacity: 1; transform: none; } /* ============================================================ LAYOUT & COMPONENT LAYER (Phase 0.2) Replaces every Tailwind utility with semantic classes. Values mirror the previous Tailwind output 1:1 so the page is pixel-identical; Phase 1 will refactor them into design tokens. Breakpoints follow the prior Tailwind scale (sm/md/lg) so the page stays pixel-identical; Phase 4 revisits the responsive strategy. NOTE: @media thresholds cannot reference custom properties, so they are the one unavoidable literal surface in this file. ============================================================ */ .shell { max-width: var(--maxw-shell); margin-inline: auto; padding-inline: var(--sp-5); } @media (min-width: 640px) { .shell { padding-inline: var(--sp-6); } } .site-main { padding-top: var(--space-7); } @media (min-width: 640px) { .site-main { padding-top: var(--space-8); } } .section { margin-top: var(--sp-9); } .section--lg { margin-top: var(--space-7); } /* role tokens */ .mono { font-family: 'JetBrains Mono', monospace; } .accent-cyan { color: var(--cyan); } .accent-amber { color: var(--amber); } /* ---------- Navbar ---------- */ .site-nav { position: fixed; top: 0; inset-inline: 0; z-index: var(--z-nav); } .nav-bar { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-3); height: var(--size-nav-bar); padding-inline: var(--sp-4); border-radius: var(--r-lg); } @media (min-width: 640px) { .nav-bar { padding-inline: var(--sp-5); } } .nav-brand { display: inline-flex; align-items: center; gap: var(--sp-2-5); text-decoration: none; color: inherit; } .brand-text { font-size: var(--step-1); font-weight: 600; letter-spacing: -.025em; } .nav-links { display: none; align-items: center; gap: var(--sp-6); font-size: var(--step-0); font-weight: 400; } @media (min-width: 768px) { .nav-links { display: flex; } } .nav-actions { display: flex; align-items: center; gap: var(--sp-2-5); } .nav-signin { display: none; font-size: var(--step-0); } .nav-cta { font-size: var(--step-0); } @media (min-width: 640px) { .nav-signin { display: inline-flex; } } /* ---------- Hero ---------- */ .hero-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: center; } @media (min-width: 1024px) { .hero-grid { grid-template-columns: repeat(12, 1fr); gap: var(--sp-7); } } .hero-copy { grid-column: 1 / -1; } .hero-workspace { grid-column: 1 / -1; } @media (min-width: 1024px) { .hero-copy { grid-column: span 5; } .hero-workspace { grid-column: span 7; } } .hero-title { margin-top: var(--sp-5); } /* stacks with the display rule above */ .hero-sub { margin-top: var(--sp-5); max-width: var(--maxw-prose); font-size: var(--step-1); line-height: 1.625; color: var(--paper-dim); } .hero-actions { display: flex; flex-wrap: wrap; gap: var(--sp-3); margin-top: var(--sp-6); } /* ---------- Workspace card ---------- */ .ws-card { border-radius: var(--r-lg); padding: var(--sp-3); } @media (min-width: 640px) { .ws-card { padding: var(--sp-4); } } .ws-modes { display: flex; align-items: center; gap: var(--sp-2); margin-bottom: var(--sp-3); padding-inline: var(--sp-1); } .ws-modes-inner { flex: 1 1 0%; display: flex; gap: var(--sp-2); } .ws-status-left { display: inline-flex; align-items: center; gap: var(--sp-2); } .ws-status-right { display: none; align-items: center; gap: var(--sp-4); } @media (min-width: 640px) { .ws-status-right { display: inline-flex; } } .win-titlebar-end { margin-inline-start: auto; } .ws-caption { text-align: center; font-size: var(--step--1); color: var(--paper-faint); margin-top: var(--sp-3); } .cdn-meta { display: flex; align-items: center; justify-content: space-between; margin-top: var(--sp-2); font-size: var(--fs-mono-0); } .metric-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--sp-3); } .win-body .spark { margin-top: var(--sp-2); } /* ---------- Trust strip ---------- */ .trust-title { text-align: center; font-size: var(--step--1); letter-spacing: .2em; text-transform: uppercase; color: var(--paper-faint); margin-bottom: var(--sp-5); } .trust-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; column-gap: var(--sp-6); row-gap: var(--sp-4); margin-top: var(--sp-5); opacity: .7; font-weight: 600; letter-spacing: .025em; font-size: var(--step-0); } .divider-mt { margin-top: var(--sp-5); } .divider-my { margin-block: var(--sp-6); } /* ---------- Section headings ---------- */ .section-head { max-width: var(--maxw-section); } .section-title { font-size: var(--step-3); font-weight: 600; letter-spacing: -.025em; margin-top: var(--sp-4); } [dir="rtl"] .section-title { font-weight: 700; } /* Cairo ships 500/700 — display → 700 */ .section-title--center { text-align: center; margin-top: 0; } .section-sub { margin-top: var(--sp-4); color: var(--paper-dim); } /* ---------- Features ---------- */ .feature-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-5); margin-top: var(--sp-7); } @media (min-width: 640px) { .feature-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .feature-grid { grid-template-columns: repeat(3, 1fr); } } .feat-title { font-size: var(--step-1); font-weight: 600; } .feat-desc { margin-top: var(--sp-2); font-size: var(--step-0); color: var(--paper-dim); } /* ---------- Gateway ---------- */ .gateway-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); align-items: center; } @media (min-width: 1024px) { .gateway-grid { grid-template-columns: repeat(2, 1fr); gap: var(--sp-8); } } .gateway-desc { margin-top: var(--sp-5); color: var(--paper-dim); line-height: 1.625; } .routing-note-body { font-size: var(--step-0); line-height: 1.625; color: var(--paper); } .gateway-bullets { list-style: none; margin: var(--sp-6) 0 0; padding: 0; font-size: var(--step-0); color: var(--paper-dim); } .gateway-bullets > li + li { margin-block-start: var(--sp-3); } .gateway-bullet { display: flex; align-items: flex-start; gap: var(--sp-3); } .bullet-mark { color: var(--cyan); margin-top: var(--sp-1); } /* ---------- Auth ---------- */ .auth-body { padding: var(--sp-6); } @media (min-width: 640px) { .auth-body { padding: var(--sp-6); } } .auth-brand { display: flex; align-items: center; gap: var(--sp-3); margin-bottom: var(--sp-1); } .auth-title { font-size: var(--step-1); font-weight: 600; margin-top: var(--sp-4); } .auth-sub { font-size: var(--step-0); color: var(--paper-faint); margin-top: var(--sp-1); } .auth-form { margin-top: var(--sp-6); } .auth-form > * + * { margin-block-start: var(--sp-4); } .auth-options { display: flex; align-items: center; justify-content: space-between; font-size: var(--step--1); color: var(--paper-faint); padding-top: var(--sp-1); } .auth-keep { display: flex; align-items: center; gap: var(--sp-2); cursor: pointer; user-select: none; } .auth-check { accent-color: var(--cyan); } .auth-note { font-size: var(--fs-mono-1); text-align: center; color: var(--paper-faint); margin-top: var(--sp-5); } /* ---------- CTA ---------- */ .cta-card { position: relative; overflow: hidden; text-align: center; border-radius: var(--r-lg); padding: var(--sp-6); } @media (min-width: 640px) { .cta-card { padding: var(--sp-7); } } .cta-blob { position: absolute; top: calc(var(--sp-9) * -1); left: 50%; transform: translateX(-50%); width: var(--size-cta-blob); height: var(--size-cta-blob); border-radius: var(--r-circle); filter: blur(var(--blur-xl)); opacity: .4; pointer-events: none; } .cta-inner { position: relative; } .cta-desc { margin-top: var(--sp-4); color: var(--paper-dim); max-width: var(--maxw-prose); margin-inline: auto; } .cta-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--sp-3); margin-top: var(--sp-6); } /* ---------- Links / footer ---------- */ .link-muted { color: var(--paper-dim); transition: color var(--dur-1) var(--ease); } .link-muted:hover { color: var(--paper); } .link-faint { color: var(--paper-faint); transition: color var(--dur-1) var(--ease); } .link-faint:hover { color: var(--paper); } .site-footer { border-top: var(--hairline) solid var(--line); margin-top: var(--space-7); } .footer-inner { padding-block: var(--sp-7); } .footer-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-6); } @media (min-width: 640px) { .footer-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 1024px) { .footer-grid { grid-template-columns: repeat(4, 1fr); } } .footer-tagline { font-size: var(--step-0); color: var(--paper-faint); margin-top: var(--sp-4); max-width: var(--maxw-tagline); } .footer-title { font-size: var(--step--1); letter-spacing: .2em; text-transform: uppercase; color: var(--paper-faint); margin-bottom: var(--sp-4); } .footer-list { list-style: none; margin: 0; padding: 0; font-size: var(--step-0); color: var(--paper-dim); } .footer-list > li + li { margin-block-start: var(--sp-3); } .footer-status { display: flex; align-items: center; gap: var(--sp-2); } .footer-base { display: flex; flex-direction: column; align-items: center; justify-content: space-between; gap: var(--sp-3); font-size: var(--step--1); color: var(--paper-faint); } @media (min-width: 640px) { .footer-base { flex-direction: row; } } @media (prefers-reduced-motion: reduce) { .pulse-dot, .caret { animation: none !important; } .win { transition: none !important; } } @media (max-width: 860px) { .workspace { height: var(--workspace-h-sm); } } /* ============================================================ PHASE 0.4 — token-backed classes replacing inline styles Every former style="" now resolves to a class. Phase 1 will refactor these literals into design tokens; Phase 4.3 collapses the per-accent variants behind a single --win-accent property. ============================================================ */ /* Window traffic-light dots (formerly ) */ .dot-r { background: var(--dot-r); } .dot-y { background: var(--dot-y); } .dot-g { background: var(--dot-g); } /* Window titlebar accent labels (one per tint family) */ .win-name-amber { color: var(--amber-lt); } .win-name-blue { color: var(--sapphire-lt); } .win-name-cyan { color: var(--cyan-lt); } .win-name-violet { color: var(--violet-lt); } /* Metric value tint (live-readers) */ .metric-violet { color: var(--violet-lt); } /* Folded-in properties for single-use elements (no class rename needed) */ .win-titlebar-end { color: var(--paper-faint); } .cdn-meta { color: var(--paper-faint); direction: ltr; } /* LTR-locked: technical data */ .cta-blob { background: radial-gradient(circle, rgba(47, 107, 255, 0.7), transparent 70%); } .feat-icon-amber { background: rgba(245, 165, 36, 0.14); color: var(--amber-lt); } .feat-icon-blue { background: rgba(59, 130, 246, 0.16); color: var(--sapphire-lt); } .feat-icon-cyan { background: rgba(34, 211, 238, 0.14); color: var(--cyan-lt); } .feat-icon-violet { background: rgba(167, 139, 250, 0.16); color: var(--violet-lt); }