/* ============================================================================ Elara-Cortex · site_shell.css — the one content shell (single source of truth) receipt: ~/.claude/skills/gepa-input-preprocessing/traces/2026-06-12_human-cadence-shared-shell.json ---------------------------------------------------------------------------- site_chrome.js owns the header, footer, brand, strobe and halo. THIS file owns the body design: tokens, type, and layout primitives. A page built on the shell carries ONLY its content: ...

...content...

Everything visual comes from here, so the shell renders the same on every page and only the words change. No page re-rolls its own palette again. Additive + safe: every rule is scoped under `.ec` or an `.ec-` class, so a page that does not opt in is untouched. Injected once by app.py _inject_chrome. CODE BY .LEKOLA — CODE ATELIER. ========================================================================== */ /* ---- Design tokens (brand P0: light two-tone, navy/cyan/gold, sharp) ------- */ .ec{ --navy:#f6f9fb; --navy2:#eef3f7; --panel:#ffffff; --panel2:#fbfdfe; --line:#d9e4ec; --line2:#c6d4de; --ink:#0c1727; --mut:#52677a; --faint:#7c8fa0; --gold:#9a6f1c; --gold2:#8a6418; --cyan:#0891b2; --cyan-soft:#0e7490; --good:#0f766e; --warn:#b45309; --code:#0c1727; --code-ink:#d7e8f2; --code-cyan:#7ee8f7; } /* ---- Base canvas + type (scoped to .ec so no live page is disturbed) ------- */ .ec{ margin:0; color:var(--ink); line-height:1.6; font-family:-apple-system,"Segoe UI",Inter,Roboto,Helvetica,Arial,sans-serif; background:radial-gradient(1240px 820px at 50% -6%,rgba(34,211,238,.16),transparent 70%),var(--navy); -webkit-font-smoothing:antialiased; } .ec *{box-sizing:border-box} .ec a{color:inherit;text-decoration:none} /* Every corner sharp — brand P0, never rounded */ .ec *,.ec *::before,.ec *::after{border-radius:0} /* ---- Layout primitives ----------------------------------------------------- */ .ec-wrap{max-width:940px;margin:0 auto;padding:0 20px} .ec-main{display:block} .ec-sec{padding:38px 0 4px} /* ---- Hero ------------------------------------------------------------------ */ .ec-hero{text-align:center;padding:30px 20px 6px;max-width:760px;margin:0 auto} .ec-eye{font-size:11px;letter-spacing:.4em;text-transform:uppercase;color:var(--gold);font-weight:700} .ec-h1{font-size:clamp(28px,5vw,46px);margin:12px 0 0;font-weight:800;letter-spacing:-.01em;line-height:1.08;color:var(--ink)} .ec-h1 em{font-style:normal;color:var(--cyan-soft)} .ec-lede{max-width:640px;margin:16px auto 0;color:var(--mut);font-size:17px} /* ---- Headings + section copy ---------------------------------------------- */ .ec-h2{font-size:24px;margin:0 0 4px;font-weight:800;color:var(--ink)} .ec-sub{color:var(--mut);margin:0 0 18px;font-size:15px} .ec-lead{color:var(--ink);font-size:18px;line-height:1.6;margin:10px 0 12px} /* ---- Stat band ------------------------------------------------------------- */ .ec-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line);margin:30px 0 8px} .ec-stats>div{background:var(--panel);padding:20px 12px;text-align:center} .ec-stats .n{font-size:26px;font-weight:800;color:var(--cyan-soft);line-height:1.1} .ec-stats .l{font-size:14px;color:var(--mut);margin-top:5px} /* ---- Tables ---------------------------------------------------------------- */ .ec-tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%} .ec table{width:100%;border-collapse:collapse;font-size:13.5px} .ec th,.ec td{border:1px solid var(--line);padding:9px 11px;text-align:right} .ec th:first-child,.ec td:first-child{text-align:left} .ec th{background:var(--navy2);color:var(--cyan-soft);font-weight:700} .ec .win{color:var(--good);font-weight:800} .ec .tie{color:var(--cyan-soft);font-weight:700} .ec .warn{color:var(--warn);font-weight:700} /* ---- Call-out blocks ------------------------------------------------------- */ .ec-moat{border:1px solid var(--cyan);background:linear-gradient(180deg,rgba(8,145,178,.08),rgba(8,145,178,.02));padding:18px 22px;margin-top:6px;color:var(--ink)} .ec-moat b{color:var(--cyan-soft)} .ec-note{border-left:2px solid var(--gold);background:rgba(154,111,28,.07);padding:14px 18px;color:var(--mut);font-size:13px;margin-top:16px} .ec-note b{color:var(--ink)} .ec-pledge{border:1px solid var(--line);border-left:3px solid var(--gold);background:var(--panel);padding:22px 24px;margin:10px 0 2px} /* ---- Terminal / reproduce line (stays dark — engineering credibility) ------ */ .ec-repro{max-width:100%;overflow-x:auto;margin-top:16px;font:12.5px/1.5 ui-monospace,Consolas,monospace; color:var(--code-cyan);background:var(--code);border:1px solid #16304a;padding:11px 16px;display:inline-block} .ec-repro b{color:var(--code-cyan)} /* ---- Buttons / CTAs -------------------------------------------------------- */ .ec-cta{display:inline-block;border:1px solid var(--gold);color:var(--gold);font-weight:700;padding:10px 16px;text-decoration:none} .ec-cta:hover{background:rgba(154,111,28,.08)} .ec-cta-gold{display:inline-block;background:linear-gradient(180deg,#e0b85a,#c79a3e);color:#1a1305;font-weight:800;padding:12px 20px;text-decoration:none;border:none} /* ---- Carousel hero — same crossfade as the about page (.phero) ------------- receipt: ~/.claude/skills/gepa-input-preprocessing/traces/2026-06-12_whole-site-shell-cadence-carousel.json values taken from deploy_public_html/about.html lines 98-119: 24s 4-slide crossfade, scale 1.07->1, opacity 0->1 over 3%->22%, dark scrim, reduced-motion safe. Namespaced .ec-phero so it composes with the shell. */ .ec-phero{position:relative;height:min(80vh,760px);overflow:hidden} .ec-phero .ec-pslides{position:absolute;inset:0} .ec-phero .ec-pslide{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:center 40%;opacity:0;animation:ecHeroPage 24s infinite;will-change:opacity,transform} .ec-phero .ec-pslide:nth-child(2){animation-delay:6s} .ec-phero .ec-pslide:nth-child(3){animation-delay:12s} .ec-phero .ec-pslide:nth-child(4){animation-delay:18s} @keyframes ecHeroPage{0%{opacity:0;transform:scale(1.07)}3%{opacity:1}22%{opacity:1}25%{opacity:0;transform:scale(1)}100%{opacity:0;transform:scale(1)}} @media(prefers-reduced-motion:reduce){.ec-phero .ec-pslide{animation:none;opacity:0}.ec-phero .ec-pslide:nth-child(1){opacity:1}} .ec-phero .ec-pherotext{position:absolute;inset:0;display:flex;align-items:flex-end;background:linear-gradient(0deg,rgba(7,15,28,1) 0%,rgba(7,15,28,.68) 40%,rgba(7,15,28,.12) 100%)} .ec-phero .ec-pherotext .ec-wrap{padding-bottom:48px;width:100%} .ec-phero .ec-eye{color:var(--gold2,#f0cd78);margin-bottom:14px;text-shadow:0 1px 14px rgba(0,0,0,.7)} .ec-phero h1,.ec-phero .ec-h1{font-size:clamp(32px,5.6vw,60px);font-weight:850;letter-spacing:-.02em;color:#fff;line-height:1.08;margin:0;max-width:22ch;text-shadow:0 2px 30px rgba(0,0,0,.45)} .ec-phero .ec-h1 em{color:var(--code-cyan,#7ee8f7);font-style:normal} .ec-phero .ec-sub{margin-top:16px;font-size:clamp(15px,1.9vw,18px);color:#dbe6ef;max-width:72ch;text-shadow:0 1px 14px rgba(0,0,0,.7)} /* ---- Mobile ---------------------------------------------------------------- */ @media(max-width:680px){.ec-stats{grid-template-columns:repeat(2,1fr)}.ec th,.ec td{padding:7px 7px;font-size:14px}} @media(max-width:760px){.ec table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch}.ec-phero{height:min(64vh,520px)}}