/* Open Sans, self-hosted. Inlined @font-face declarations (was
@import'd from /assets/fonts/open-sans.css until 2026-05-08;
the @import chain blocked first paint behind an extra round
trip. Now the browser's preload scanner sees the woff2 URLs
the moment brand.css is parsed.)
Full self-host coverage as of 2026-05-10: Open Sans (here),
Heebo / DM Sans / DM Mono (appended at the bottom of this
file). Zero requests to fonts.googleapis.com or fonts.gstatic.com
from any public-surface page. CSP also tightened to drop those
hosts from style-src and font-src.
Open Sans on Google Fonts ships ONE static woff2 per subset
(no per-weight files for non-Latin). The same is true here:
one woff2 per subset, all five weight declarations point at
it. Browser does faux-bold for non-400 weights — same behaviour
as Google's CDN-served version. */
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('/assets/fonts/open-sans/opensans-latin.woff2') format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('/assets/fonts/open-sans/opensans-latin-ext.woff2') format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: 'Open Sans';
font-style: normal;
font-weight: 300 700;
font-display: swap;
src: url('/assets/fonts/open-sans/opensans-hebrew.woff2') format('woff2');
unicode-range: U+0307-0308, U+0590-05FF, U+200C-2010, U+20AA, U+25CC, U+FB1D-FB4F;
}
/* ════════════════════════════════════════════════════════════
EchoLevy brand stylesheet — shared across the public surface.
Two layers:
1. UNSCOPED `:root` tokens — colours / radii / shadows. Apply
to ANY page that s this file, regardless of body
class. Use these via var(--navy), var(--gold), etc. so the
whole product shares one palette.
2. SCOPED `body.site` rules — the public-site chrome
(typography baseline, .site-nav, .brand, .foot, skip-link,
reduced-motion). Pages opt in via:
The dashboard intentionally links this file but does NOT add
`class="site"` — its working chrome is functional, not branded.
It still picks up the unscoped tokens so its top-bar / accent
colours match the public surface.
Per the merge brief (§2·5 + §4): primary teal #00A69C from the
cinematic landing draft (Source B), gold #B8962E used at most
once per viewport, navy demoted to ink/footer per Source A.
If you edit this file, run `node build.js` and eyeball
home.html in the preview.
════════════════════════════════════════════════════════════ */
/* ─── Layer 1: UNSCOPED tokens — palette + structural primitives ─ */
:root{
--navy:#0F1E29;
--navy-deep:#091420;
--teal:#00A69C;
--teal-deep:#008F87;
--teal-soft:#e2f4f3;
--teal-tint:#f0faf9; /* lightest teal — Clalit-style section bg */
--gold:#B8962E;
--gold-deep:#9A7E25;
--gold-soft:#f4ecd6;
--ink:#1a2a3a;
--ink-2:#425566;
--ink-3:#6b7d8c;
--ink-4:#97a5b2;
--ink-5:#bcc6cf;
--line:#e3e6ea;
--line-2:#eceff2;
--line-3:#f3f5f7;
--bg:#ffffff;
--bg-alt:#fafafa; /* Clalit-style off-white alt surface */
--bg-band:#eaf2f5; /* Clalit's signature soft-blue section band */
--surface:#f6f7f8;
--surface-2:#fbfbfa;
--shadow-sm:0 1px 3px rgba(15,30,41,.04),0 4px 14px -8px rgba(15,30,41,.10);
--shadow-md:0 4px 12px rgba(15,30,41,.06),0 24px 48px -28px rgba(15,30,41,.18);
/* Clalit-style soft card shadow — flat with halo, no harsh edge */
--shadow-card:0 1px 9px 0 rgba(15,30,41,.06);
--shadow-card-hover:0 4px 18px 0 rgba(15,30,41,.10);
--radius:14px;
--radius-sm:10px;
--radius-card:12px; /* Clalit-style medium rounding for cards */
--max:1180px;
--pad-x:clamp(20px,4vw,48px);
/* Clalit-style generous section padding */
--section-pad-y:clamp(56px,10vw,96px);
/* ── Spacing scale — 4px base, geometric-ish progression.
Use --space-N for any padding / margin / gap. The scale
keeps spacing proportional and prevents one-off 13px / 19px
values that don't match anything else.
1=4px 2=8px 3=12px 4=16px 5=20px 6=24px
7=32px 8=40px 9=48px 10=64px 11=80px 12=96px */
--space-1:4px;
--space-2:8px;
--space-3:12px;
--space-4:16px;
--space-5:20px;
--space-6:24px;
--space-7:32px;
--space-8:40px;
--space-9:48px;
--space-10:64px;
--space-11:80px;
--space-12:96px;
/* ── Type scale — px values keyed to Clalit-style hierarchy.
Tight numerics; line-height adjusts within each component.
Body is 16px (browser default); xs is for chrome / labels;
3xl is hero-only. */
--text-xs:11px;
--text-sm:13px;
--text-base:15px;
--text-md:17px;
--text-lg:20px;
--text-xl:24px;
--text-2xl:clamp(28px,3.4vw,36px);
--text-3xl:clamp(36px,5vw,52px);
/* ── Motion tokens — durations + easing curves. Mostly used
for hover transitions; the reduced-motion media query at
the bottom of this file overrides them all. */
--dur-fast:.12s;
--dur-base:.2s;
--dur-slow:.35s;
--ease-out:cubic-bezier(.2,.7,.2,1);
--ease-in-out:cubic-bezier(.4,0,.2,1);
--ease-soft:cubic-bezier(.25,.46,.45,.94);
/* ── Z-index scale — keep these unique so future overlays
don't fight historical magic numbers in dashboard.html
(z-index:9600 for the template picker is whitelisted). */
--z-base:1; /* anything above the page flow */
--z-sticky:40; /* sticky nav (matches .site-nav) */
--z-dropdown:80; /* menus, tooltips */
--z-overlay:200; /* full-page overlays (FR overlay base) */
--z-modal:300; /* modals, drawers */
--z-toast:600; /* fly-in confirmations, badges */
--z-popover:9000; /* template picker, dialog backdrops */
}
/* ─── Layer 2: SCOPED body.site chrome ──────────────────────── */
body.site{
/* RTL-aware: in dir=rtl, inset-inline-start = right edge */
margin:0;padding:0;
background:var(--bg);
color:var(--ink);
/* Open Sans (Hebrew subset) primary — matches the Clalit
reference's "Open Sans Hebrew" face. Heebo + DM Sans stay in
the stack as resilient fallbacks while Google Fonts loads. */
font-family:'Open Sans','Heebo','DM Sans',system-ui,-apple-system,sans-serif;
font-weight:400;
line-height:1.65;
-webkit-font-smoothing:antialiased;
text-rendering:optimizeLegibility;
}
body.site *,
body.site *::before,
body.site *::after{box-sizing:border-box}
body.site .mono{font-family:'DM Mono',ui-monospace,monospace;font-feature-settings:"ss01"}
body.site a{color:inherit;text-decoration:none}
body.site button{font-family:inherit;cursor:pointer;border:0;background:none;color:inherit}
body.site img{max-width:100%;display:block}
/* Make the [hidden] attribute always win over class-set display values.
Used to hide the floating phone pill / ticker phone link until the
user provides a real number. */
body.site [hidden]{display:none !important}
/* Single-pass focus ring for everything interactive */
body.site :is(a,button,input,textarea,select):focus-visible{
outline:2px solid var(--teal);
outline-offset:3px;
border-radius:6px;
}
/* ─── Skip-to-content (a11y) ──────────────────────────────── */
/* Unscoped `.skip` so the dashboard / canine / management pages —
which deliberately don't carry class="site" — can use the same
skip-link without each page re-declaring the style. body.site
selector kept (no specificity bump for the public surface). */
.skip{
position:absolute;inset-block-start:-100px;inset-inline-start:8px;
background:var(--navy);color:#fff;padding:10px 16px;
border-radius:6px;font-size:13px;font-weight:500;z-index:100;
transition:inset-block-start .15s;text-decoration:none;
}
.skip:focus{inset-block-start:8px}
/* ─── Site navigation (top) ───────────────────────────────── */
body.site .site-nav{
position:sticky;top:0;z-index:40;
background:rgba(255,255,255,.86);
backdrop-filter:saturate(180%) blur(10px);
-webkit-backdrop-filter:saturate(180%) blur(10px);
border-bottom:1px solid var(--line-2);
}
body.site .nav-inner{
max-width:var(--max);
margin:0 auto;padding:18px var(--pad-x);
display:flex;align-items:center;gap:24px;
}
body.site .brand{
display:flex;align-items:baseline;gap:0;
font-family:'DM Sans',sans-serif;
font-size:20px;font-weight:600;
letter-spacing:-.01em;color:var(--navy);
}
body.site .brand .dot{color:var(--gold);font-weight:700;margin-inline-end:1px}
body.site .brand-tag{
display:none;
margin-inline-start:14px;padding-inline-start:14px;
border-inline-start:1px solid var(--line);
font-family:'DM Mono',monospace;font-size:10px;
letter-spacing:.28em;text-transform:uppercase;
color:var(--ink-4);font-weight:400;
}
@media (min-width:760px){ body.site .brand-tag{display:inline-flex;align-items:center} }
body.site .nav-spacer{flex:1}
body.site .nav-links{
display:none;align-items:center;gap:28px;
font-size:14px;color:var(--ink-2);
}
body.site .nav-links a{
padding:6px 0;border-bottom:1.5px solid transparent;
transition:color .15s,border-color .15s;
}
body.site .nav-links a:hover{color:var(--navy);border-bottom-color:var(--gold)}
@media (min-width:900px){ body.site .nav-links{display:flex} }
body.site .nav-cta{
background:var(--navy);color:#fff;
padding:10px 18px;border-radius:8px;
font-size:13px;font-weight:500;letter-spacing:.01em;
display:inline-flex;align-items:center;gap:8px;
transition:background .15s,transform .1s;
}
body.site .nav-cta:hover{background:var(--teal-deep)}
body.site .nav-cta svg{width:13px;height:13px}
/* ─── FOOTER ────────────────────────────────────────────────── */
body.site .foot{
background:var(--navy);color:#bccad6;
padding:48px var(--pad-x) 32px;
}
body.site .foot-inner{
max-width:var(--max);margin:0 auto;
display:flex;flex-wrap:wrap;align-items:center;
gap:18px 32px;font-size:12.5px;
}
body.site .foot-brand{
font-family:'DM Sans',sans-serif;font-size:15px;font-weight:600;
color:#fff;letter-spacing:-.01em;
}
body.site .foot-brand .dot{color:var(--gold)}
body.site .foot-spacer{flex:1}
body.site .foot-link{color:#8ca4b7;transition:color .15s}
body.site .foot-link:hover{color:#fff}
body.site .foot-build{
font-family:'DM Mono',monospace;font-size:10.5px;
color:#5e7180;letter-spacing:.05em;
}
/* ─── Clalit-style utility classes (shared across pages) ──────
Applied directly to elements (no body.site needed) so the
dashboard, canine and management pages can use the same
patterns without inheriting the full body.site chrome. */
/* Visually hidden but accessible to screen readers. Use for
off-screen
s on pages where the visible heading is a
styled div, or for