/* ============================================================================
OCTAGON — the E.B.E design system · selv4.com (J1, the shared foundation)
----------------------------------------------------------------------------
ONE stylesheet the whole estate inherits — no page ever redefines :root again.
Captured verbatim from the sealed Octagon pages (assessment offer / report /
pay-checkout). Dark-noir, vermilion-accented, RTL-first.
FONTS: this file only NAMES the families. Each page loads them in its :
(SELF-HOST UPGRADE, owner-flagged: drop WOFF2 into site/assets/fonts/ + @font-face
here to remove the googleapis dependency. Swappable in one place; names don't change.)
============================================================================ */
/* ---- 1 · TOKENS --------------------------------------------------------- */
/* THEME: dark is the default (the Octagon signature). A page/toggle sets
data-theme="light" on to flip surfaces to warm paper — the BRAND
(vermilion · gold · octagon mark) is identical in both modes; only the
ground + text invert. Token NAMES never change, so every component is
theme-agnostic by construction. (--ink = ground · --white = primary text;
in light mode --ink becomes paper and --white becomes ink — same roles.) */
:root {
color-scheme: dark;
/* surfaces (dark noir — the default) */
--ink: #0b0c0e; /* page ground */
--graphite: #131519; /* raised ground */
--panel: #191c21; /* cards */
--panel-2: #20242b; /* nested / inbound */
--line: #2a2e35; /* borders / dividers */
/* type */
--white: #f4f2ed; /* primary text */
--dim: #9aa0a8; /* secondary text */
--faint: #5c626b; /* tertiary / meta */
/* the vermilion system (brand accent — mode-independent) */
--verm: #e8482b;
--verm-soft: rgba(232, 72, 43, .13);
--verm-line: rgba(232, 72, 43, .40);
/* text that sits ON vermilion (buttons, selection) — always light, both modes */
--on-accent: #f7f4ee;
/* secondary accents */
--gold: #d9a441; /* honesty / caution notes */
--ok: #5ab46e; /* success / paid / confirmed */
/* fonts */
--font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
--font-sans: 'IBM Plex Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
--font-ar: 'IBM Plex Sans Arabic', 'IBM Plex Sans', 'Segoe UI', Tahoma, sans-serif;
--font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, monospace;
/* spacing scale (rem) */
--s-1: .25rem; --s-2: .5rem; --s-3: .75rem; --s-4: 1rem;
--s-5: 1.5rem; --s-6: 2rem; --s-7: 3rem; --s-8: 4.5rem;
/* radii */
--r-sm: 8px; --r-md: 12px; --r-lg: 16px; --r-pill: 999px;
/* elevation + motion */
--shadow-glow: 0 0 44px rgba(232, 72, 43, .10);
--ease: cubic-bezier(.2, .7, .2, 1);
/* scrim = translucent ground for sticky headers / overlays (theme-aware) */
--scrim: rgba(11, 12, 14, .86);
/* atmos = the ambient page wash — a vermilion glow + faint gold, over noir */
--atmos:
radial-gradient(ellipse 800px 460px at 80% -80px, rgba(232, 72, 43, .10), transparent 62%),
radial-gradient(ellipse 640px 380px at 6% 30%, rgba(217, 164, 65, .04), transparent 60%);
/* card lift — dark cards separate by colour, so no shadow needed */
--card-shadow: none;
}
/* ---- LIGHT THEME — same Octagon identity, warm-paper surfaces ----------- */
/* Applied when . The brand accents stay; surfaces +
text invert. Contrast tuned: --dim/--faint/--gold/--ok deepened for a light
ground; text-on-vermilion (--on-accent) stays light so buttons never break. */
:root[data-theme="light"] {
color-scheme: light;
/* SEPARATION is the light-mode law: a warm-grey GROUND so pure-white cards
lift off it (dark mode separates by colour; light must separate by value +
a real shadow, or every surface blends into mud — the earlier failure). */
--ink: #edeae2; /* warm light-grey ground */
--graphite: #e4e0d6; /* raised ground */
--panel: #ffffff; /* cards — clean white, lifted by --card-shadow */
--panel-2: #f2efe8; /* nested / inbound */
--line: #dbd5c8; /* borders — strong enough to define chips/inputs */
--white: #16181c; /* primary text */
--dim: #4c5661; /* secondary text (~5.6:1 on ground) */
--faint: #6d7581; /* tertiary / meta (~3.9:1, large/meta only) */
--verm-soft: rgba(232, 72, 43, .10);
--verm-line: rgba(232, 72, 43, .42);
--gold: #6f4e12; /* DEEP gold — legible as text on paper (~5:1) */
--ok: #2a7d43; /* deep green */
--shadow-glow: 0 8px 30px rgba(232, 72, 43, .13); /* a real vermilion lift, not grey dirt */
--scrim: rgba(237, 234, 226, .88); /* paper scrim, not a dark bar */
--card-shadow: 0 1px 2px rgba(20, 22, 26, .05), 0 6px 20px rgba(20, 22, 26, .05);
/* light atmos = one whisper of vermilion (NO gold haze — that was the 'mist') */
--atmos: radial-gradient(ellipse 780px 440px at 82% -110px, rgba(232, 72, 43, .05), transparent 60%);
}
/* ---- 2 · RESET + BASE --------------------------------------------------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
background: var(--ink);
color: var(--white);
font-family: var(--font-sans);
line-height: 1.55;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
::selection { background: var(--verm); color: var(--on-accent); }
a { color: var(--verm); text-decoration: none; }
a:hover { text-decoration: underline; }
/* a visible focus ring for keyboard users — the estate carries live forms + a payment flow */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--verm); outline-offset: 2px; border-radius: 4px;
}
img, svg, video { max-width: 100%; display: block; }
/* the ambient vermilion wash the Octagon pages share */
.oct-atmos { background-image: var(--atmos); }
/* ---- 3 · RTL (first-class) ---------------------------------------------- */
/* Arabic content uses logical properties everywhere, so LTR/RTL share one rule set. */
[dir="rtl"] { direction: rtl; }
[dir="rtl"] .oct-ar,
.oct-ar { font-family: var(--font-ar); }
.oct-ar { direction: rtl; text-align: right; }
/* Latin islands inside Arabic (product/tech names) keep LTR + mono, per the names law */
.oct-ltn { direction: ltr; unicode-bidi: isolate; font-family: var(--font-mono); }
/* ---- 4 · TYPOGRAPHY ----------------------------------------------------- */
.oct-display { font-family: var(--font-display); font-weight: 900; line-height: 1.02; letter-spacing: -.01em; }
.oct-h1 { font-family: var(--font-display); font-weight: 900; font-size: clamp(2.4rem, 6vw, 4.4rem); line-height: 1.03; letter-spacing: -.01em; }
.oct-h2 { font-family: var(--font-display); font-weight: 600; font-size: clamp(1.5rem, 3vw, 2.1rem); letter-spacing: -.01em; }
.oct-h3 { font-family: var(--font-display); font-weight: 600; font-size: 1.2rem; }
.oct-lead { color: var(--dim); font-size: 1.02rem; }
.oct-body { color: var(--dim); font-size: .95rem; }
.oct-meta { font-family: var(--font-mono); font-size: .6rem; letter-spacing: .12em; color: var(--faint); }
.oct-num { font-family: var(--font-mono); font-weight: 800; font-variant-numeric: tabular-nums; }
.oct-verm { color: var(--verm); }
.oct-gold { color: var(--gold); }
/* the mono eyebrow / kicker — the system's signature label */
.oct-eyebrow {
font-family: var(--font-mono);
font-size: .62rem;
font-weight: 600;
letter-spacing: .24em;
text-transform: uppercase;
color: var(--verm);
}
/* ---- 5 · THE OCTAGON MARK ---------------------------------------------- */
.oct-mark { width: 40px; height: 40px; flex: none; }
.oct-mark path { fill: none; stroke: var(--verm); stroke-width: 6; }
/* usage: */
/* the brand lockup */
.oct-brand { display: flex; align-items: center; gap: var(--s-3); }
.oct-brand .name { font-family: var(--font-display); font-weight: 900; letter-spacing: .28em; font-size: .9rem; }
.oct-brand .name small { display: block; font-family: var(--font-mono); font-weight: 600; font-size: .55rem; letter-spacing: .34em; color: var(--verm); margin-top: 3px; }
/* ---- 6 · CARD (vermilion top-edge) ------------------------------------- */
.oct-card {
background: var(--panel);
border: 1px solid var(--line);
border-radius: var(--r-lg);
padding: var(--s-5) var(--s-5);
position: relative;
overflow: hidden;
box-shadow: var(--card-shadow); /* none in dark, a real lift in light */
}
.oct-card.edge::before {
content: ""; position: absolute; inset: 0 auto auto 0;
width: 100%; height: 3px;
background: linear-gradient(90deg, var(--verm), transparent 70%);
}
/* RTL: the edge sweeps from the right */
[dir="rtl"] .oct-card.edge::before { background: linear-gradient(270deg, var(--verm), transparent 70%); }
/* the glow card = the base lift PLUS the vermilion halo, so it reads as elevated
in light too (in dark, --card-shadow is none, so it's the pure halo). */
.oct-card.glow { box-shadow: var(--card-shadow), var(--shadow-glow); }
/* ---- 7 · BUTTONS -------------------------------------------------------- */
.oct-btn {
display: inline-flex; align-items: center; justify-content: center; gap: var(--s-2);
padding: 14px 22px; width: auto;
font-family: var(--font-sans); font-size: 1rem; font-weight: 600;
color: var(--on-accent); background: var(--verm);
border: 0; border-radius: 11px; cursor: pointer;
transition: filter .15s var(--ease), opacity .15s var(--ease);
}
.oct-btn:hover { filter: brightness(1.08); text-decoration: none; }
.oct-btn:disabled { opacity: .55; cursor: default; }
.oct-btn.block { width: 100%; }
.oct-btn.ghost { background: transparent; border: 1px solid var(--line); color: var(--dim); }
.oct-btn.ghost:hover { border-color: var(--verm-line); color: var(--white); filter: none; }
/* ---- 8 · CHIPS / BADGES ------------------------------------------------- */
.oct-chip {
display: inline-flex; align-items: center; gap: 6px;
font-family: var(--font-mono); font-size: .62rem; letter-spacing: .14em;
padding: 6px 12px; border: 1px solid var(--line); border-radius: var(--r-pill); color: var(--dim);
}
.oct-chip.hot { border-color: var(--verm-line); color: var(--verm); }
.oct-chip.gold { border-color: rgba(217,164,65,.4); color: var(--gold); }
.oct-chip.ok { border-color: rgba(90,180,110,.5); color: var(--ok); }
/* status badge (round) */
.oct-badge { width: 72px; height: 72px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 700; border: 2px solid var(--line); }
.oct-badge.paid { border-color: var(--ok); color: var(--ok); background: rgba(90,180,110,.10); }
.oct-badge.pending { border-color: var(--gold); color: var(--gold); background: rgba(217,164,65,.08); }
.oct-badge.failed { border-color: var(--verm); color: var(--verm); background: rgba(232,72,43,.10); }
/* ---- 9 · FORM CONTROLS -------------------------------------------------- */
.oct-label { display: block; font-family: var(--font-mono); font-size: .58rem; letter-spacing: .16em; color: var(--dim); text-transform: uppercase; margin: var(--s-3) 0 6px; }
.oct-input {
width: 100%; padding: 12px 14px;
background: var(--ink); border: 1px solid var(--line); border-radius: var(--r-sm);
color: var(--white); font-family: var(--font-sans); font-size: 1rem;
text-align: start; /* logical — follows the input's OWN direction (left in LTR, right in RTL) */
transition: border-color .15s var(--ease);
}
.oct-input:focus { outline: none; border-color: var(--verm-line); }
.oct-input::placeholder { color: var(--faint); opacity: 1; }
/* keep autofilled inputs on-theme (browsers force a pale yellow otherwise) */
.oct-input:-webkit-autofill,
.oct-input:-webkit-autofill:focus {
-webkit-text-fill-color: var(--white);
-webkit-box-shadow: 0 0 0 100px var(--ink) inset;
caret-color: var(--white);
}
[dir="rtl"] .oct-input { text-align: right; }
.oct-hp { position: absolute; left: -9999px; } /* honeypot */
/* ---- BIDI ISLANDS: every text block OWNS its direction ------------------ */
/* An English block inside an RTL page must stay LTR or its punctuation jumps
(".Lead paragraph"). Wrap English content in .oct-ltr; Arabic uses .oct-ar. */
.oct-ltr { direction: ltr; text-align: left; unicode-bidi: isolate; }
[dir="rtl"] .oct-ltr { text-align: left; }
/* ---- 10 · HONESTY NOTE (gold rail) ------------------------------------- */
.oct-note { border-inline-start: 3px solid var(--gold); background: rgba(217,164,65,.05); border-radius: 0 var(--r-md) var(--r-md) 0; padding: var(--s-4) var(--s-5); }
[dir="rtl"] .oct-note { border-radius: var(--r-md) 0 0 var(--r-md); }
/* ---- 10b · TABLE (the report + ops board lean on this) ----------------- */
.oct-table { width: 100%; border-collapse: collapse; font-size: .92rem; }
.oct-table th {
font-family: var(--font-mono); font-size: .58rem; letter-spacing: .16em;
color: var(--verm); text-align: start; padding: 10px 12px;
border-bottom: 1px solid var(--verm-line); text-transform: uppercase;
}
.oct-table td { padding: 12px; border-bottom: 1px dashed var(--line); color: var(--dim); vertical-align: top; }
.oct-table td b, .oct-table td strong { color: var(--white); font-weight: 600; }
.oct-table tr:last-child td { border-bottom: none; }
/* ---- 11 · LAYOUT HELPERS ----------------------------------------------- */
.oct-wrap { max-width: 1060px; margin-inline: auto; padding-inline: var(--s-5); }
.oct-grid { display: grid; gap: 14px; }
.oct-grid.g2 { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); }
.oct-grid.g3 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.oct-divider { height: 1px; background: var(--line); border: 0; }
/* ---- 12 · MOTION (load choreography) ----------------------------------- */
@keyframes oct-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
.oct-rise { animation: oct-rise .7s var(--ease) both; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; scroll-behavior: auto !important; }
}
/* ---- 12b · ARABIC FONT WINS (must come AFTER every component font) ------ */
/* Heading/button/mono classes set a Latin family (Fraunces/Plex Sans/JetBrains),
which have NO Arabic glyphs — so an Arabic heading fell back to a random system
font, mismatched with the body. This last-word rule forces the Arabic family on
ANY .oct-ar element (heading, button, number), so all Arabic is one brand face. */
.oct-ar,
h1.oct-ar, h2.oct-ar, h3.oct-ar,
.oct-h1.oct-ar, .oct-h2.oct-ar, .oct-h3.oct-ar, .oct-display.oct-ar,
.oct-btn.oct-ar, .oct-num.oct-ar, .oct-eyebrow.oct-ar, .oct-meta.oct-ar, .oct-label.oct-ar {
font-family: var(--font-ar);
}
/* Arabic is CURSIVE — letter-spacing pulls the joined letters apart and looks broken.
The mono eyebrow/label/meta carry wide tracking for Latin; force it to 0 for Arabic. */
.oct-ar { letter-spacing: 0; }
/* Arabic display weight: IBM Plex Sans Arabic tops out at 700 (Fraunces wanted 900). */
.oct-h1.oct-ar, .oct-h2.oct-ar, .oct-display.oct-ar { font-weight: 700; }
/* ---- 13 · PRINT (deliverables) ----------------------------------------- */
@media print {
body { background: #fff; color: #111; }
.oct-card, .oct-note { background: #fafafa; border-color: #ddd; box-shadow: none; }
.oct-atmos { background-image: none; }
}