/* ==========================================================================
LIQUIDITY SWEEP TRADING — GRAPHIC CHARTER SKIN
--------------------------------------------------------------------------
Source of truth: SiteBuild/BRAND-CHARTER.md. Loaded AFTER theme.css and
ds.css; it re-skins the site to the charter identity without touching copy:
· single dark ground #0a0a0b (no more navy/cream alternation)
· text fg #ece7dc / body #b4afa5 / muted #9a958c / subtle #6e6a64
· accent silver-paper #c8ccd4 (teal is demoted to chart-meaning only)
· type Fraunces 500 (display) · IBM Plex Sans (body) · IBM Plex Mono (kickers)
· rounded 12px cards/buttons (no more square corners), 1px hairline borders
Remove the to roll back to the previous "editorial" skin.
Everything is driven from the token block first; component rules only fix
what the tokens cannot reach (fonts, radius, button shape, hero gradient).
========================================================================== */
/* ---------- charter palette -------------------------------------------- */
:root{
--c-bg:#0a0a0b; --c-fg:#ece7dc; --c-body:#b4afa5;
--c-muted:#9a958c; --c-subtle:#6e6a64;
--c-surface:#121214; --c-elevated:#18181c;
--c-border:rgb(236 231 220 / .12); --c-border-strong:rgb(236 231 220 / .22);
--c-accent:#c8ccd4; --c-accent-fg:#0a0a0b;
--c-btn:#d9ff43; --c-btn-fg:#0a0a0b; /* header + action buttons (owner override) */
--c-paper:#ece7dc; --c-ink:#161513;
--c-bull:#2f6f5e; --c-bear:#8f3d3d; --c-fvg:#3d6a74; --c-pool:#5a6a7a;
--c-ease:cubic-bezier(.22,1,.36,1);
/* re-point the type stack the whole legacy theme reads from */
--f-display:"Fraunces",Georgia,"Times New Roman",serif;
--f-ui:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
--f-body:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Arial,sans-serif;
--f-mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
--f-serif:"Fraunces",Georgia,"Times New Roman",serif;
}
/* ---------- single dark ground: override every ds.css token context -----
ds.css splits tokens into a "paper" set and an "ink" set on these exact
selector groups. The charter has ONE ground, so we set the same dark token
values on all of them (charter.css loads later → equal specificity wins). */
:root,
body,.site,.section,.section.soft,.pp-alt,.blogwrap,.pp,.pp-proof,.related,
.prose,.art,.ds-paper-scope,
.pp-hero,.pp-final,.hero,.page-head,.widget-cta,.tool-strip,.news,
.header,.topbar,.footer,.mega,.buybar,.buypanel,.cta-band{
--ink:#ece7dc; --text:#b4afa5; --muted:#9a958c; --subtle:#6e6a64;
--bg:#0a0a0b; --soft:#0d0d10; --soft-2:#131316;
--panel:#121214; --panel-2:#18181c;
--line:rgb(236 231 220 / .12); --line-2:rgb(236 231 220 / .22);
--pp-card:#121214; --pp-card-2:#18181c; --pp-line:rgb(236 231 220 / .12);
--sh:0 0 0 1px rgb(236 231 220 / .06); --sh-sm:0 0 0 1px rgb(236 231 220 / .06);
/* primary = silver accent (NOT teal). The whole teal ramp becomes silver so
every legacy .btn-primary / --primary reference recolours at once. */
--primary:#c8ccd4; --primary-600:#d3d7de; --primary-700:#bcc1c9;
--primary-050:rgb(200 204 212 / .08); --primary-100:rgb(200 204 212 / .14);
--primary-200:rgb(200 204 212 / .26);
/* teal survives only as chart meaning */
--bull:#2f6f5e; --bear:#8f3d3d; --ok:#2f6f5e; --warn:#b98a3a;
--gold:#c8ccd4; --gold-2:#c8ccd4;
/* ds.css private tokens */
--ds-ink:#0a0a0b; --ds-ink-2:#121214; --ds-ink-3:#18181c;
--ds-paper:#0a0a0b; --ds-paper-2:#0d0d10;
--ds-paper-line:rgb(236 231 220 / .12); --ds-paper-line-2:rgb(236 231 220 / .22);
--ds-on-paper:#ece7dc; --ds-on-paper-soft:#9a958c;
--ds-on-ink:#ece7dc; --ds-on-ink-soft:#9a958c;
--ds-acid:#c8ccd4; --ds-acid-ink:#0a0a0b; --ds-gold:#c8ccd4; --ds-bear:#8f3d3d;
}
/* ---------- base -------------------------------------------------------- */
body{
background:var(--c-bg);color:var(--c-body);
font-family:var(--f-body);
-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;
}
p{text-wrap:pretty}
::selection{background:rgb(200 204 212 / .22);color:var(--c-fg)}
/* ---------- type: Fraunces display, IBM Plex body/mono ------------------
ds.css hard-codes DM Sans / DM Mono / Instrument Serif as string literals in
dozens of rules, so the token swap alone is not enough — force the families
on the three role groups. Fraunces is capped at 500 (never 700), sentence
case, tracking barely-tight, normal wrapping (no more cqi nowrap). */
h1,h2,h3,h4,h5,.ds-display,.section-title,.hero h1,.page-head h1,.post-header h1,
.pp-hero h1,.pp h2,.pp h3,.prose h2,.prose h3,.article-main h2,.article-main h3,
.pillar h3,.prod-head h3,.art h3,.rel-card h3,.related h2,.news h2,.faq h2,
.cta-band h2,.cta-band h3,.pp-final h2,.defcard h2,.blogwrap h2,.tool-strip h3{
font-family:var(--f-display)!important;
font-weight:500!important;font-style:normal!important;
letter-spacing:-.015em!important;text-transform:none!important;
color:var(--c-fg);
}
body,p,li,input,textarea,select,button,.sub,.lede,.ds-lede,.section-lead,
.art-exc,.prod .feat li,td,th,.hero .sub{font-family:var(--f-body)!important}
/* mono role: kickers, labels, prices, specs, meta, small structural headings */
.kicker,.eyebrow,.ds-eyebrow,.pp-eyebrow,.ds-mono,.art-kicker,.art-foot,.badge,.tag,
.trust .ti,.price,.price small,.amt,.pp-pricetag,.pp-price,.pp-cost,.p-link,.foot-bottom,
.mi-num,.p-ic.mi-num,.footer h4,.widget h4,.keytake h3,.pp-spec .k,.pp-chip,.hero-stats .st span{
font-family:var(--f-mono)!important;
}
/* any element still requesting a now-unloaded DM/Instrument face falls back to
Times; pin bold text to the body face so no stray serif leaks through */
b,strong{font-family:var(--f-body)!important}
/* charter display scale — H1 4xl→6xl, leading 1.08–1.12, wrap with balance */
.hero h1,.pp-hero h1{
font-size:clamp(2.4rem,5.6vw,4rem)!important;line-height:1.08!important;
letter-spacing:-.02em!important;max-width:16ch;text-wrap:balance!important;white-space:normal!important;
}
.page-head h1{font-size:clamp(2rem,4.6vw,3.4rem)!important;line-height:1.1!important;text-wrap:balance!important;white-space:normal!important;max-width:20ch}
.post-header h1{font-size:clamp(1.9rem,3.6vw,3rem)!important;line-height:1.12!important;text-wrap:balance!important;white-space:normal!important}
.section-title{font-size:clamp(1.7rem,3.4vw,2.6rem)!important;line-height:1.1!important;letter-spacing:-.015em!important;text-wrap:balance!important;white-space:normal!important;max-width:24ch}
.prose h2,.article-main h2{font-size:clamp(1.5rem,2.6vw,2rem)!important;line-height:1.14!important}
.prod-head h3{font-size:clamp(1.35rem,1.9vw,1.6rem)!important}
/* mobile phones: hero headline stays large enough to grab first, but never overflows */
@media (max-width:560px){
.hero h1,.pp-hero h1{font-size:clamp(2.2rem,8.5vw,2.9rem)!important}
}
/* in-headline accent .hl was Instrument-Serif italic teal — charter forbids
italic display; fold it back into the heading voice. */
.hero h1 .hl,.page-head h1 .hl,.section-title .hl,.post-header h1 .hl,
h1 .hl,h2 .hl,.thin{
font-family:inherit!important;font-style:normal!important;font-weight:inherit!important;
color:inherit!important;background:none!important;padding:0!important;letter-spacing:inherit!important;
}
/* ---------- kickers / eyebrows: mono 11px uppercase, muted ---------------- */
.kicker,.eyebrow,.ds-eyebrow,.pp-eyebrow{
font-weight:400!important;font-size:.6875rem!important;letter-spacing:.18em!important;
text-transform:uppercase!important;color:var(--c-muted)!important;opacity:1!important;
display:inline-block;margin-bottom:16px;
}
.hero .kicker,.hero .eyebrow,.pp-hero .eyebrow{letter-spacing:.22em!important;color:var(--c-muted)!important}
.trust .ti,.art-foot,.foot-bottom{letter-spacing:.14em}
/* ---------- buttons: rounded, medium weight, no auto-arrow, silver -------- */
.btn,.ds-btn{
font-family:var(--f-body)!important;font-weight:500!important;letter-spacing:0!important;
border-radius:12px!important;transition:background .15s var(--c-ease),color .15s var(--c-ease),opacity .15s var(--c-ease),border-color .15s var(--c-ease);
}
.btn:active,.ds-btn:active{transform:scale(.98)}
.ds-btn::after{content:""!important} /* kill the ↗ glyph */
.btn-sm,.ds-btn-sm{border-radius:8px!important}
.btn-primary,.ds-btn-acid,.ds-btn-gold,.btn-dark,.nav-mobile-cta{
background:var(--c-btn)!important;color:var(--c-btn-fg)!important;border-color:transparent!important;
}
.btn-primary:hover,.ds-btn-acid:hover,.ds-btn-gold:hover,.btn-dark:hover,.nav-mobile-cta:hover{
background:var(--c-btn)!important;opacity:.9;transform:none;
}
.btn-ghost,.btn-outline,.ds-btn-outline,.btn-secondary{
background:transparent!important;border:1px solid var(--c-border-strong)!important;color:var(--c-fg)!important;
}
.btn-ghost:hover,.btn-outline:hover,.ds-btn-outline:hover,.btn-secondary:hover{
background:var(--c-elevated)!important;color:var(--c-fg)!important;transform:none;
}
:focus-visible{outline:2px solid var(--c-accent);outline-offset:2px}
/* ---------- rounded corners everywhere ds.css forced square --------------- */
.btn,.badge,.pp-card,.ds-card,.rel-card,.ts-card,.pp-shot,.pp-ps-card,.pp-step,
.pp-price,.pp-final,.pp-spec,.pp-faq details,.callout,.keytake,.widget,
.prod,.pillar,.defcard,article.art,.news,.maprow,.mega,.faq-item,
.hero-stats,input,.trust .wrap{border-radius:12px}
.badge,.pp-chip,.tag,.btn-sm{border-radius:8px!important}
/* ---------- cards: surface fill + hairline border ------------------------ */
.pillar,.prod,.defcard,.maprow,.rel-card,.keytake,.callout{
background:var(--c-surface);border:1px solid var(--c-border);
}
.pillar:hover,.prod:hover,.defcard:hover,.rel-card:hover{
border-color:var(--c-border-strong);transform:none;background:var(--c-surface);
}
article.art{background:var(--c-surface);border:1px solid var(--c-border)}
article.art:hover{border-color:var(--c-border-strong);background:var(--c-surface);transform:none}
.pillar h3,.prod-head h3,.defcard h2,.art h3 a,.maprow b{color:var(--c-fg)}
.pillar p,.prod .feat li,.defcard p,.art-exc,.maprow span{color:var(--c-muted)}
/* icon-in-circle feature grids are an anti-pattern → strip the icon chrome */
.pillar .p-ic,.p-ic{background:transparent!important;border:0!important;color:var(--c-muted);width:auto;height:auto;margin-bottom:14px}
.p-link{color:var(--c-subtle)!important;font-size:.6875rem;letter-spacing:.14em;text-transform:uppercase}
.pillar:hover .p-link{color:var(--c-fg)!important}
/* ---------- badges / tags / chips ---------------------------------------- */
.badge,.pp-chip,.tag{
background:var(--c-elevated);border:1px solid var(--c-border);color:var(--c-muted);
font-size:.625rem;letter-spacing:.1em;text-transform:uppercase;
}
.badge.bull,.badge.mt{color:var(--c-fg)}
.price{color:var(--c-fg)}.price small{color:var(--c-muted)}
/* ---------- proof / trust strip: gap-px grid on border ------------------- */
.trust .wrap{
display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
background:var(--c-border);border:1px solid var(--c-border);overflow:hidden;padding:0;
}
.trust .ti{
background:var(--c-surface);justify-content:center;margin:0;padding:15px 12px;
font-size:.6875rem;text-transform:uppercase;color:var(--c-muted);gap:9px;
}
.trust .ti svg{color:var(--c-bull)}
@media (max-width:640px){.trust .wrap{grid-template-columns:repeat(2,1fr)}}
/* ---------- hero: full-bleed chart + left-heavy near-black overlay -------- */
.hero,.page-head.hero-bg{color:var(--c-fg)}
/* homepage hero uses its own dedicated banner (hero-home); WebP first (18 KB),
JPG fallback (66 KB) for older engines */
.hero{
background:
linear-gradient(to right,#0a0a0b 0%,rgba(10,10,11,.86) 46%,rgba(10,10,11,.28) 100%),
image-set(url("/assets/img/hero-home.webp") type("image/webp"),
url("/assets/img/hero-home.jpg") type("image/jpeg")) right center/cover no-repeat,
#0a0a0b;
}
@supports not (background-image:image-set(url("x.webp") type("image/webp"))){
.hero{background:
linear-gradient(to right,#0a0a0b 0%,rgba(10,10,11,.86) 46%,rgba(10,10,11,.28) 100%),
url("/assets/img/hero-home.jpg") right center/cover no-repeat,#0a0a0b;}
}
/* learn page-heads keep the original chart artwork */
.page-head.hero-bg{
background:
linear-gradient(to right,#0a0a0b 0%,rgba(10,10,11,.88) 45%,rgba(10,10,11,.35) 100%),
image-set(url("/assets/img/hero-chart.webp") type("image/webp"),
url("/assets/img/hero-chart.jpg") type("image/jpeg")) right center/cover no-repeat,
#0a0a0b;
}
@supports not (background-image:image-set(url("x.webp") type("image/webp"))){
.page-head.hero-bg{background:
linear-gradient(to right,#0a0a0b 0%,rgba(10,10,11,.88) 45%,rgba(10,10,11,.35) 100%),
url("/assets/img/hero-chart.jpg") right center/cover no-repeat,#0a0a0b;}
}
@media (max-width:760px){.hero,.page-head.hero-bg{background:#0a0a0b}}
@media (prefers-contrast:more){.hero,.page-head.hero-bg{background:#0a0a0b}}
.pp-hero{background:#0a0a0b!important}
.hero .sub,.page-head .lede,.pp-hero .pp-sub{color:var(--c-muted)}
.hero-stats .st b{color:var(--c-fg);font-family:var(--f-display)}
.hero-stats .st span{color:var(--c-muted);text-transform:uppercase;font-size:.625rem;letter-spacing:.12em}
/* ---------- chrome: sticky translucent header, dark topbar --------------- */
.topbar{background:#0a0a0b;border-bottom:1px solid var(--c-border)}
.header{background:rgb(10 10 11 / .9);backdrop-filter:blur(8px);border-bottom:1px solid var(--c-border)}
.mainnav > a,.mainnav > .has-mega > a{color:var(--c-muted);font-weight:500}
.mainnav > a:hover,.mainnav > .has-mega > a:hover{color:var(--c-fg)}
.mega{background:var(--c-surface);border:1px solid var(--c-border)}
.mega-item h5{color:var(--c-fg)}.mega-item p{color:var(--c-muted)}
.brand-word{font-family:var(--f-display);font-weight:500;color:var(--c-fg);font-size:1.125rem;letter-spacing:-.01em;line-height:1}
.brand-mark{width:34px;height:34px;flex:0 0 34px;border-radius:6px;display:block}
.brand{gap:12px;align-items:center}
/* mobile: left-align the wordmark and keep the burger clear of it (ds.css centred
the old image logo and pinned the burger absolute — that collides with a text
wordmark). Space them apart and step the wordmark down so it never overlaps. */
@media (max-width:900px){
.header-inner{justify-content:space-between}
.nav-cta{position:static;right:auto;top:auto;transform:none}
.brand{justify-content:flex-start}
.footer .foot-brand,.footer .foot-brand .brand{text-align:left;justify-content:flex-start}
}
@media (max-width:560px){.brand-word{font-size:1rem}}
@media (max-width:380px){.brand-word{font-size:.9rem}.brand-mark{width:30px;height:30px;flex-basis:30px}}
/* ---------- newsletter / final CTA band ---------------------------------- */
.news{background:var(--c-elevated)!important;border:1px solid var(--c-border)!important}
.news h2{color:var(--c-fg)!important}.news p{color:var(--c-muted)!important}
.news input{background:#0a0a0b;border:1px solid var(--c-border-strong);color:var(--c-fg);border-radius:8px}
.news input::placeholder{color:var(--c-subtle)}
.news .np,.news .np a{color:var(--c-muted)!important}
/* ---------- FAQ (re-skin; conversion to happens in the build) -------- */
.faq h2{color:var(--c-fg)}
.faq-item{border-bottom:1px solid var(--c-border);background:transparent;border-radius:0}
.faq-item summary{color:var(--c-fg);font-family:var(--f-body);font-weight:500}
.faq-item div p,.faq-item p{color:var(--c-muted)}
/* ---------- bottom CTA band (all blog/guide pages) -----------------------
.cb-inner painted a --primary gradient — now silver — under cream/white text
(the "full breakdown" link was inline #fff on silver, invisible). Make it the
charter's dark elevated band with legible contrast, keep the lime button. */
.cta-band .cb-inner{
background:var(--c-elevated)!important;border:1px solid var(--c-border);
box-shadow:none!important;color:var(--c-muted);
}
.cta-band h2,.cta-band h3{color:var(--c-fg)!important}
.cta-band .cb-inner p{color:var(--c-muted)!important}
.cta-band .cb-inner a[style*="color"]{color:var(--c-muted)!important;text-decoration-color:var(--c-border-strong)}
/* ---------- concept → tool map ------------------------------------------- */
.maprow{background:var(--c-surface);border:1px solid var(--c-border)}
.maprow .arrow svg{color:var(--c-muted)}
.maprow .tool b{color:var(--c-fg)}
/* ---------- footer -------------------------------------------------------- */
.footer{background:#0a0a0b;border-top:1px solid var(--c-border)}
.footer h4{color:var(--c-muted);font-weight:400;font-size:.6875rem;letter-spacing:.18em;text-transform:uppercase}
.footer a{color:var(--c-muted)}.footer a:hover{color:var(--c-fg)}
.foot-brand p{color:var(--c-muted)}
.foot-bottom{color:var(--c-subtle);border-top:1px solid var(--c-border)}
.disc{color:var(--c-subtle);font-size:.75rem}
/* ---------- prose / article body ----------------------------------------- */
.prose,.article-main{color:var(--c-body)}
.prose p,.prose li,.article-main p,.article-main li{color:var(--c-body)}
.prose strong,.prose b,.article-main strong{color:var(--c-fg)}
.prose a,.article-main a{color:var(--c-fg);text-decoration-color:var(--c-border-strong);text-underline-offset:3px}
.prose blockquote{border-left:3px solid var(--c-accent);font-family:var(--f-display);font-style:normal;color:var(--c-fg)}
.prose figure figcaption,.pp-shot figcaption{background:var(--c-surface);color:var(--c-muted);font-family:var(--f-mono);font-size:.6875rem;border-top:1px solid var(--c-border)}
/* ---------- rules -------------------------------------------------------- */
.ds-rule,hr{background:var(--c-border)!important}
/* ---------- cookie consent dialog (its inline style is hardcoded navy) ---- */
#lst-consent{background:rgb(10 10 11 / .97)!important;border-top:1px solid var(--c-border)!important;color:var(--c-fg)!important;font-family:var(--f-body)!important}
#lst-consent p{color:var(--c-muted)!important}
#lst-consent button{border:1px solid var(--c-border-strong)!important;background:transparent!important;color:var(--c-fg)!important;border-radius:8px!important;font-family:var(--f-body)!important}
#lst-consent button[data-consent="granted"]{background:var(--c-accent)!important;color:var(--c-accent-fg)!important;border-color:transparent!important}
#lst-consent button:hover{border-color:var(--c-accent)!important}
/* ---------- reduced motion ----------------------------------------------- */
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}}