/* ============================================================================ 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:clamp(11px,1.5vw,12.5px);letter-spacing:.28em;text-transform:uppercase;color:var(--gold);font-weight:800} /* bolder + standardized eyebrow (founder 2026-06-19) */ .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;background:linear-gradient(90deg,#0e7490,#8a6418);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#0e7490}/* two-tone cyan->gold, AA-safe on light (was flat cyan-soft); /AI/pricing standard */ .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(60vh,560px);overflow:hidden} /* CANONICAL = about.html .phero — single-source carousel height, zero per-page deviation (founder 2026-06-19) */ .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 26%;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)}} /* receipt: carousel standardisation, artifacts/design-audit/untidiness_148.json — two-slide variant (16s cycle, 8s per slide) so a two-image hero crossfades with no dark gap. */ .ec-phero.ec-two .ec-pslide{animation:ecHeroTwo 16s infinite} .ec-phero.ec-two .ec-pslide:nth-child(2){animation-delay:8s} @keyframes ecHeroTwo{0%{opacity:0;transform:scale(1.06)}3%{opacity:1}44%{opacity:1}50%{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;padding:0;background:linear-gradient(0deg,rgba(7,15,28,1) 0%,rgba(7,15,28,.68) 40%,rgba(7,15,28,.12) 100%)} /* CANONICAL scrim = about.html .phero .pherotext (verbatim) — single-source, zero deviation (founder 2026-06-19) */ .ec-phero .ec-pherotext .ec-wrap{padding:0 clamp(18px,4vw,44px) 50px;width:100%;max-width:1040px;margin:0 auto;text-align:left} /* align hero text column with the body .wrap gutter+centering so blocks line up down the page (founder 2026-06-19) */ /* gold eyebrow POPS on the carousel: dark legibility shadow + a gold glow halo (founder, 2026-06-16) */ .ec-phero .ec-eye{color:#e0b85a;margin-bottom:14px;text-shadow:0 1px 14px rgba(0,0,0,.92),0 0 20px rgba(224,184,90,.62);font-weight:800} /* eyebrow gold = about.html --gold2 #e0b85a (founder 2026-06-19) */ .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{font-style:normal;background:linear-gradient(90deg,#7ee8f7,#e0b85a);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:#7ee8f7}/* two-tone cyan->gold on the dark scrim (was flat #7ee8f7); /AI/pricing standard */ .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(60vh,560px)}} /* =========================================================================== ABOUT-CANONICAL COMPONENT LIBRARY — single source of truth. Verbatim specs from deploy_public_html/about.html (.section/.band/.pillar/ .card/.kicker/.title/.btn/.cta-band). Light surfaces use AA-safe muted/dark ink; bright cyan #22d3ee + gold #e0b85a appear ONLY on dark surfaces — exactly like about.html. Pages opt in by using these classes (founder 2026-06-19). =========================================================================== */ .ec-section{padding:64px 0} .ec-kicker{font-size:12px;letter-spacing:.22em;text-transform:uppercase;font-weight:800;color:#9a6f1c;margin:0 0 14px} .ec-title{font-size:clamp(26px,4vw,40px);font-weight:850;letter-spacing:-.015em;margin:0 0 16px;color:#0e1a25} .ec-lead2{font-size:clamp(16px,2.1vw,19px);color:#1c2b39;max-width:66ch} .ec-muted2{color:#54616f} /* white cards (about .card) */ .ec-grid{display:grid;gap:20px} .ec-g3{grid-template-columns:repeat(3,1fr)}.ec-g4{grid-template-columns:repeat(4,1fr)} @media(max-width:880px){.ec-g3,.ec-g4{grid-template-columns:1fr}} .ec-card{position:relative;background:#fff;border:1px solid #e4e9ee;padding:28px 24px 26px;box-shadow:0 18px 38px -28px rgba(12,23,39,.32);transition:box-shadow .18s,transform .18s,border-color .18s} /* GOLD is used the landing way: as the EYEBROW label inside the card (.door .dk) — NOT a top bar. No accent bar (the landing .door/.famc cards have none). (founder 2026-06-19) */ .ec-card:hover{border-color:#22d3ee;box-shadow:0 16px 40px -20px rgba(34,211,238,.45);transform:translateY(-2px)} .ec-card.feature{border-color:#22d3ee;box-shadow:0 24px 54px -26px rgba(34,211,238,.42)} /* highlighted card (landing .door.feature) */ .ec-card .k,.ec-card .n{font-size:11px;font-weight:800;color:#9a6f1c;letter-spacing:.06em;text-transform:uppercase} /* GOLD eyebrow = landing .door .dk (founder 2026-06-19) */ .ec-card h3{font-size:18.5px;font-weight:800;margin:10px 0 8px;color:#0c1727;letter-spacing:-.01em} .ec-card p{margin:0;font-size:14.5px;color:#44586c;line-height:1.62} .ec-card a{font-weight:700;color:#0891b2} /* cyan bottom link (landing .door .da a) */ /* card icons = MONOCHROME GOLD, no dark tile (founder 2026-06-19: "icons are monochrome gold") */ .ec-card .ico,.ec-card .ic,.ec-card [class*="ico"]{background:none !important;border:none !important;padding:0 !important;box-shadow:none !important;width:auto !important;height:auto !important} .ec-card .ico,.ec-card .ic,.ec-card [class*="ico"],.ec-card .ico svg,.ec-card [class*="ico"] svg,.ec-card>svg{color:#9a6f1c !important;stroke:#9a6f1c !important} .ec-card .ico svg,.ec-card [class*="ico"] svg{width:30px;height:30px} /* dark two-tone band (about .band) */ .ec-band2{background:linear-gradient(180deg,#0c1727,#0a1422);color:#eaf2f6;border-top:1px solid #16304a;border-bottom:1px solid #16304a} .ec-band2 .ec-wrap{padding-top:64px !important;padding-bottom:64px !important} .ec-band2 .ec-kicker{color:#e0b85a} .ec-band2 .ec-title,.ec-band2 h2,.ec-band2 .ec-h2{color:#fff} .ec-band2 p,.ec-band2 .ec-sub,.ec-band2 .ec-lead2{color:#bccad6} .ec-pillars{display:grid;grid-template-columns:repeat(3,1fr);gap:18px;margin-top:32px} @media(max-width:760px){.ec-pillars{grid-template-columns:1fr}} .ec-pillar{background:#0c1727;border:1px solid #22d3ee;padding:24px 22px} .ec-pillar .ic{font-size:13px;font-weight:800;letter-spacing:.1em;color:#e0b85a} .ec-pillar h3{color:#7ee8f7;font-size:18px;font-weight:800;margin:8px 0} .ec-pillar p{color:#8aa3b8;font-size:14.5px;margin:0;max-width:none} /* gold buttons (about .btn.p / .btn.s) */ .ec-btn{padding:14px 26px;font-weight:800;font-size:15px;display:inline-flex;align-items:center;text-decoration:none} .ec-btn.p{background:linear-gradient(180deg,#e0b85a,#c79a3e);color:#1a1305;box-shadow:0 14px 30px -14px rgba(199,154,62,.7)} .ec-btn.s{background:transparent;color:#0e7490;border:1px solid #c6d4de} .ec-btn:hover{filter:brightness(1.06)} /* closing CTA band (about .cta-band) */ .ec-cta-band{background:linear-gradient(120deg,#0c1727,#103043);color:#fff;border-top:1px solid #16304a;text-align:center} .ec-cta-band .ec-wrap{padding-top:56px !important;padding-bottom:56px !important} .ec-cta-band h2{color:#fff;font-size:clamp(24px,3.4vw,38px);font-weight:850;margin:0 0 14px} .ec-cta-band p{color:#bcd0db;margin:0 auto 26px;max-width:56ch;font-size:17px} .ec-cta-band .ec-btns{display:flex;gap:14px;justify-content:center;flex-wrap:wrap} /* FULL-BLEED two-tone: dark bands span the FULL viewport edge-to-edge even when nested inside a centered .ec-wrap (the about.html .band reads full-width). html{overflow-x:clip} (chrome) absorbs the 100vw so there is no horizontal scrollbar. Inner .ec-wrap keeps content aligned at 1040 with the light sections, so the two-tone bleeds to the sides AND every column lines up (founder 2026-06-19). */ .ec-band2,.ec-cta-band{width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw)}