/* =========================================================================
ERAN PORTAL — Design Tokens + Base
eran.iddoperez.ai · bright, multilingual (he/en/ar/ru), accessible
See DESIGN.md for the full system. Build markup against these tokens.
Bright everywhere; the ONLY dark surface is the .hero neuron panel.
========================================================================= */
/* ---- Fonts (Google Fonts; full system fallback below) -------------------
In HTML :
-------------------------------------------------------------------------- */
:root {
/* ---- Color: bright base + ink --------------------------------------- */
--bg: #F7FAFC;
--surface: #FFFFFF;
--surface-alt: #EEF4F8;
--ink: #0F2230;
--ink-muted: #4A5C68;
--ink-faint: #7B8A95;
--border: #D8E2E9;
/* ---- Brand accent: "Eran teal" (the neuron glow, by daylight) ------- */
--accent: #0E8BA8;
--accent-strong: #0A6A82;
--accent-soft: #D6EEF4;
--accent-ink: #FFFFFF;
/* ---- Secondary: "Choshen gold" (heart / sacred / conscience) -------- */
--gold: #C08A2E;
--gold-soft: #F6EAD2;
/* ---- Status badges: PROVEN / EXPERIMENTAL / DREAM ------------------- */
--proven-ink: #0B6B3A; --proven-bg: #DCF3E5;
--exp-ink: #8A5A00; --exp-bg: #FBEFD3;
--dream-ink: #5B3FA8; --dream-bg: #EAE3FB;
/* ---- Semantic feedback --------------------------------------------- */
--success: #0B6B3A;
--warning: #8A5A00;
--error: #B42318;
--info: #0E8BA8;
/* ---- Neuron hero (the one dark surface) ---------------------------- */
--hero-bg-1: #061018;
--hero-bg-2: #0B2233;
--node-core: #EAFBFF;
--node-glow: #34D2F0;
--synapse: #1E9FC4;
--pulse: #7EE8FF;
--node-warm: #FFD98A;
/* ---- Typography ----------------------------------------------------- */
--font-display: "Heebo", "Segoe UI", system-ui, -apple-system, "Arial Hebrew", sans-serif;
--font-body: "Assistant", "Segoe UI", system-ui, -apple-system, "Arial Hebrew", sans-serif;
--font-arabic: "Noto Sans Arabic", "Segoe UI", Tahoma, sans-serif;
--font-mono: ui-monospace, "JetBrains Mono", Menlo, Consolas, monospace;
--fs-display: clamp(2.4rem, 5vw, 4rem);
--fs-h1: clamp(1.9rem, 3.4vw, 2.75rem);
--fs-h2: clamp(1.4rem, 2.4vw, 1.9rem);
--fs-h3: clamp(1.15rem, 1.8vw, 1.35rem);
--fs-lead: clamp(1.1rem, 1.6vw, 1.3rem);
--fs-body: 1.0625rem; /* 17px */
--fs-small: 0.9375rem; /* 15px */
--fs-micro: 0.8125rem; /* 13px */
--lh-tight: 1.18;
--lh-body: 1.65;
/* ---- Spacing scale (8px base) -------------------------------------- */
--space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px;
--space-5: 24px; --space-6: 32px; --space-7: 48px; --space-8: 64px;
--space-9: 96px; --space-10: 128px;
/* ---- Layout --------------------------------------------------------- */
--maxw: 1120px;
--maxw-prose: 68ch;
--gutter: clamp(16px, 5vw, 40px);
/* ---- Radius --------------------------------------------------------- */
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 22px;
--radius-pill: 999px;
/* ---- Shadow (soft, teal-tinted, bright-friendly) ------------------- */
--shadow-sm: 0 1px 2px rgba(15,34,48,.06), 0 1px 3px rgba(15,34,48,.08);
--shadow-md: 0 4px 14px rgba(14,67,82,.10);
--shadow-lg: 0 14px 40px rgba(14,67,82,.14);
--ring: 0 0 0 3px var(--accent-soft);
/* ---- Motion --------------------------------------------------------- */
--ease: cubic-bezier(.22,.61,.36,1);
--dur-1: 140ms;
--dur-2: 240ms;
--dur-3: 420ms;
}
/* =========================================================================
Reset / base
========================================================================= */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
margin: 0;
background: var(--bg);
color: var(--ink);
font-family: var(--font-body);
font-size: var(--fs-body);
line-height: var(--lh-body);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
/* Arabic script swap (applied when ) */
:lang(ar) { font-family: var(--font-arabic); line-height: 1.8; }
:lang(ar) h1, :lang(ar) h2, :lang(ar) h3 { font-family: var(--font-arabic); }
h1, h2, h3, h4 {
font-family: var(--font-display);
line-height: var(--lh-tight);
color: var(--ink);
margin: 0 0 var(--space-4);
font-weight: 700;
}
h1 { font-size: var(--fs-h1); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); font-weight: 600; }
p { margin: 0 0 var(--space-4); max-width: var(--maxw-prose); }
a { color: var(--accent-strong); text-decoration: none; }
a:hover { text-decoration: underline; }
img, canvas, svg { max-width: 100%; display: block; }
/* RTL: never letter-space Hebrew/Arabic */
[dir="rtl"] { letter-spacing: 0; }
/* Keep wordmark, numbers, code LTR even inside RTL */
.ltr, bdi { direction: ltr; unicode-bidi: isolate; }
/* Visually-hidden (for canvas text alternatives, skip links) */
.sr-only {
position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
/* Focus ring on every interactive element */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
outline: 2px solid var(--accent-strong);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* =========================================================================
Layout helpers
========================================================================= */
.container {
width: 100%;
max-width: var(--maxw);
margin-inline: auto;
padding-inline: var(--gutter);
}
.section { padding-block: var(--space-9); }
@media (max-width: 768px) { .section { padding-block: var(--space-7); } }
.section--alt { background: var(--surface-alt); }
.eyebrow {
font-family: var(--font-display);
font-size: var(--fs-small);
font-weight: 700;
color: var(--accent-strong);
text-transform: uppercase;
letter-spacing: .08em;
margin-bottom: var(--space-2);
}
[dir="rtl"] .eyebrow { text-transform: none; letter-spacing: 0; }
.lead { font-size: var(--fs-lead); color: var(--ink-muted); }
.card-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--space-5);
}
/* =========================================================================
Nav
========================================================================= */
.nav {
position: sticky; top: 0; z-index: 50;
background: var(--surface);
border-bottom: 1px solid var(--border);
}
.nav.is-scrolled { box-shadow: var(--shadow-sm); }
.nav__inner {
display: flex; align-items: center; gap: var(--space-5);
min-height: 64px;
}
.brand {
display: inline-flex; align-items: center; gap: var(--space-2);
font-family: var(--font-display); font-weight: 800; font-size: 1.25rem;
color: var(--ink);
}
.brand__glyph { color: var(--accent); width: 26px; height: 26px; }
.nav__links { display: flex; gap: var(--space-5); margin-inline: auto; }
.nav__links a { color: var(--ink-muted); font-weight: 600; }
.nav__links a:hover { color: var(--accent-strong); text-decoration: none; }
/* =========================================================================
Buttons
========================================================================= */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: var(--space-2);
min-height: 44px; padding-inline: var(--space-5); padding-block: var(--space-3);
border-radius: var(--radius-pill);
font-family: var(--font-body); font-weight: 700; font-size: var(--fs-body);
cursor: pointer; border: 1.5px solid transparent;
transition: transform var(--dur-1) var(--ease),
box-shadow var(--dur-1) var(--ease),
background var(--dur-1) var(--ease);
}
.btn--primary {
background: var(--accent); color: var(--accent-ink); box-shadow: var(--shadow-sm);
}
.btn--primary:hover { background: var(--accent-strong); transform: translateY(-2px); box-shadow: var(--shadow-md); text-decoration: none; }
.btn--ghost {
background: transparent; border-color: var(--accent); color: var(--accent-strong);
}
.btn--ghost:hover { background: var(--accent-soft); text-decoration: none; }
.btn--gold {
background: var(--gold-soft); border-color: var(--gold); color: var(--gold);
}
.btn--gold:hover { background: #f1e0c2; text-decoration: none; }
/* =========================================================================
Hero (bright section, framed dark neuron panel)
========================================================================= */
.hero { text-align: center; }
.hero__panel {
position: relative;
width: min(100%, 960px);
margin-inline: auto;
aspect-ratio: 16 / 9;
border-radius: var(--radius-lg);
background: radial-gradient(ellipse at 50% 45%, var(--hero-bg-2), var(--hero-bg-1) 80%);
box-shadow: 0 0 0 1px var(--accent-soft), 0 20px 60px rgba(14,67,82,.22);
overflow: hidden;
}
@media (max-width: 600px) { .hero__panel { aspect-ratio: 4 / 3; } }
.hero__canvas { position: absolute; inset: 0; width: 100%; height: 100%; }
.hero__title { font-size: var(--fs-display); font-weight: 800; margin-block: var(--space-6) var(--space-3); }
.hero__lead { font-size: var(--fs-lead); color: var(--ink-muted); margin-inline: auto; }
.hero__actions { display: flex; gap: var(--space-3); justify-content: center; flex-wrap: wrap; margin-block: var(--space-5); }
.hero__honesty { font-size: var(--fs-small); color: var(--ink-faint); margin-top: var(--space-4); }
/* =========================================================================
Section cards
========================================================================= */
.card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-md);
padding: var(--space-5);
box-shadow: var(--shadow-sm);
transition: transform var(--dur-2) var(--ease),
box-shadow var(--dur-2) var(--ease),
border-color var(--dur-2) var(--ease);
display: flex; flex-direction: column; gap: var(--space-3);
}
.card:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); border-color: var(--accent-soft); }
.card__head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.card__icon {
display: grid; place-items: center;
width: 44px; height: 44px; border-radius: 50%;
background: var(--accent-soft); color: var(--accent-strong);
}
.card__title { font-size: var(--fs-h3); margin: 0; }
.card__body { color: var(--ink-muted); margin: 0; }
.card__link { color: var(--accent-strong); font-weight: 600; margin-top: auto; }
[dir="rtl"] .card__link .chev { transform: scaleX(-1); }
/* =========================================================================
Status badges ●/◐/○ PROVEN / EXPERIMENTAL / DREAM
========================================================================= */
.badge {
display: inline-flex; align-items: center; gap: var(--space-2);
padding-inline: var(--space-3); padding-block: 4px;
border-radius: var(--radius-pill);
font-size: var(--fs-micro); font-weight: 700; line-height: 1;
text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
}
[dir="rtl"] .badge { text-transform: none; letter-spacing: 0; }
.badge__dot { font-size: 1em; line-height: 1; }
.badge--proven { color: var(--proven-ink); background: var(--proven-bg); }
.badge--exp { color: var(--exp-ink); background: var(--exp-bg); }
.badge--dream { color: var(--dream-ink); background: var(--dream-bg); }
/* =========================================================================
Science / claim panel
========================================================================= */
.science { }
.science__row {
display: grid; grid-template-columns: auto 1fr; gap: var(--space-4);
align-items: start;
padding-block: var(--space-4);
border-bottom: 1px solid var(--border);
}
.science__label { font-family: var(--font-display); font-weight: 600; color: var(--ink); }
.science__cite { font-size: var(--fs-small); color: var(--ink-faint); }
/* =========================================================================
Language switcher
========================================================================= */
.lang-switch {
display: inline-flex; gap: 2px; padding: 3px;
background: var(--surface-alt); border-radius: var(--radius-pill);
border: 1px solid var(--border);
}
.lang-switch button {
border: 0; background: transparent; cursor: pointer;
padding-inline: var(--space-3); padding-block: var(--space-2);
border-radius: var(--radius-pill);
font-family: var(--font-body); font-weight: 600; font-size: var(--fs-small);
color: var(--ink-muted);
transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.lang-switch button:hover { background: var(--accent-soft); color: var(--accent-strong); }
.lang-switch button[aria-pressed="true"] { background: var(--accent); color: var(--accent-ink); }
/* =========================================================================
Footer
========================================================================= */
.footer {
background: var(--surface);
border-top: 3px solid var(--accent);
padding-block: var(--space-8) var(--space-6);
}
.footer__cols {
display: grid; gap: var(--space-6);
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
margin-bottom: var(--space-6);
}
.footer a { color: var(--ink-muted); }
.footer a:hover { color: var(--accent-strong); }
.footer__dedication {
text-align: center; color: var(--gold);
font-size: var(--fs-small); padding-top: var(--space-5);
border-top: 1px solid var(--border);
}
/* =========================================================================
Reduced motion — stop neuron animation + transitions
========================================================================= */
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after {
animation-duration: .001ms !important;
animation-iteration-count: 1 !important;
transition-duration: .001ms !important;
}
/* JS should also detect this and render a single static neuron frame. */
}
/* =========================================================================
Mobile nav collapse
========================================================================= */
@media (max-width: 860px) {
.nav__links { display: none; }
.nav__links.is-open {
display: flex; flex-direction: column; gap: var(--space-2);
position: absolute; inset-inline: 0; top: 64px;
background: var(--surface); border-bottom: 1px solid var(--border);
padding: var(--space-4) var(--gutter); box-shadow: var(--shadow-md);
margin-inline: 0;
}
}