/* seo.css — the entire stylesheet for every generated static page. * * These pages are plain HTML served by Caddy ahead of the SPA, so they cannot use Tailwind or any * part of the React build. This file re-declares the frontend_gpt tokens by hand (neutral surfaces, * near-black primary, 1rem radius, Inter) so a static page and the app look like one site. * * Theme: mirrors the SPA exactly — `.dark` on , driven by localStorage "kappi_theme", * default light. NOT prefers-color-scheme: the app ignores the OS setting, and a static page that * did not would flip theme as you navigated between them. */ :root { --background: 0 0% 100%; --foreground: 0 0% 9%; --card: 0 0% 100%; --muted: 0 0% 96%; --muted-foreground: 0 0% 40%; --accent: 0 0% 94%; --primary: 0 0% 9%; --primary-foreground: 0 0% 100%; --border: 0 0% 89%; --success: 152 60% 32%; --destructive: 0 72% 51%; --radius: 1rem; /* Hover colour for the Related lists. Amber reads as "another page" without the blue that would make a static page look like a 1998 document. */ --link-hover: 32 95% 40%; /* The page grid. Barely-there on purpose: it should register as texture, not as a table. */ --grid-line: rgba(0, 0, 0, 0.014); color-scheme: light; } .dark { --background: 0 0% 13%; --foreground: 0 0% 93%; --card: 0 0% 17%; --muted: 0 0% 20%; --muted-foreground: 0 0% 64%; --accent: 0 0% 23%; --primary: 0 0% 93%; --primary-foreground: 0 0% 13%; --border: 0 0% 26%; --success: 152 55% 48%; --destructive: 0 62% 52%; --link-hover: 43 96% 62%; /* Lower than light: a light line on a dark ground reads brighter than the same alpha reads dark on white, so matching the numbers would not match the look. */ --grid-line: rgba(255, 255, 255, 0.010); color-scheme: dark; } * { box-sizing: border-box; } body { margin: 0; font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", ui-sans-serif, system-ui, sans-serif; -webkit-font-smoothing: antialiased; color: hsl(var(--foreground)); line-height: 1.65; background-color: hsl(var(--background)); background-image: linear-gradient(var(--grid-line) 0.1em, transparent 0.1em), linear-gradient(90deg, var(--grid-line) 0.1em, transparent 0.1em); background-size: 1.35em 1.35em; } /* Numeric/data face, same roles as the app's .font-data / .font-mono. */ .num { font-family: "Plus Jakarta Sans", ui-sans-serif, system-ui, sans-serif; font-variant-numeric: tabular-nums; } .mono { font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; } a { color: inherit; } a:hover { opacity: 0.75; } /* ── chrome ─────────────────────────────────────────────────────────────────────────────────── */ /* padding-inline, not the `padding` shorthand: `main` is a .wrap, and a shorthand here silently zeroed its padding-top for the whole first restyle. */ .wrap { max-width: 760px; margin: 0 auto; padding-inline: 20px; } .wrap-wide { max-width: 1040px; margin: 0 auto; padding-inline: 20px; } header.site { border-bottom: 1px solid hsl(var(--border)); position: sticky; top: 0; z-index: 20; background: hsl(var(--background) / 0.9); backdrop-filter: blur(8px); } header.site .inner { display: flex; align-items: center; gap: 16px; height: 56px; } /* Brand lockup, copied from the landing header: piggy chip + kappi.me wordmark. Unscoped: the footer carries the same lockup, linking home. */ .brand { display: flex; align-items: center; gap: 8px; font-size: 1.125rem; font-weight: 600; letter-spacing: -0.02em; text-decoration: none; } .brand .dot { font-weight: 500; color: hsl(var(--muted-foreground)); } /* The global `a:hover { opacity: .75 }` was fading the whole lockup, logo included. A wordmark that dims when the cursor passes over it reads as a state change rather than as a link. */ .brand:hover { opacity: 1; } .piggy-logo { display: block; width: 36px; height: 36px; padding: 4px; border-radius: 8px; overflow: hidden; background: linear-gradient(0deg, hsl(0deg 0% 99.8%), hsl(324deg 76.92% 94.9%)); border: 0.5px solid rgb(231 226 214); } .piggy-logo img { display: block; width: 100%; height: 100%; scale: 1.35; } .dark .piggy-logo { border-radius: 999px; background: linear-gradient(0deg, hsl(0deg 0% 99.8%), hsl(324deg 76.92% 90%)); border: 0.5px solid hsl(255, 61.8%, 38.2%); } .dark .piggy-logo img { filter: contrast(1.2); } header.site nav { margin-left: auto; display: flex; gap: 2px; align-items: center; } header.site nav a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; font-size: 0.875rem; font-weight: 500; text-decoration: none; padding: 6px 12px; border-radius: 999px; color: hsl(var(--muted-foreground)); } header.site nav a:hover { color: hsl(var(--foreground)); opacity: 1; } header.site nav a .nav-i { flex: none; } header.site nav a.signin { color: hsl(var(--foreground)); } header.site nav a.signin:hover { background: hsl(var(--accent)); } header.site nav a.cta { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); padding: 8px 16px; font-weight: 600; } header.site nav a.cta:hover { opacity: 0.9; } .theme-btn { display: grid; place-items: center; background: none; border: none; border-radius: 999px; width: 36px; height: 36px; cursor: pointer; color: hsl(var(--muted-foreground)); padding: 0; } .theme-btn:hover { background: hsl(var(--accent)); color: hsl(var(--foreground)); } /* Both glyphs are in the DOM; `.dark` picks one. No JS owns the icon state. */ .theme-btn .i-sun { display: none; } .dark .theme-btn .i-moon { display: none; } .dark .theme-btn .i-sun { display: block; } footer.site { border-top: 1px solid hsl(var(--border)); margin-top: 72px; padding: 32px 0 56px; color: hsl(var(--foreground)); font-size: 0.85rem; } footer.site .cols { display: flex; flex-wrap: wrap; gap: 12px 28px; margin-bottom: 16px; } footer.site a { text-decoration: none; } /* The lockup is a header component reused down here, so it only needs the footer's scale — plus a 3px lift on the WHOLE lockup, not on the chip inside it. `.cols` is a flex row of plain text links and the lockup is the only item with a 24px box in it, so it sits low against them; moving the chip alone just breaks the lockup apart. */ footer.site .brand { font-size: 1rem; position: relative; top: -3px; } footer.site .brand .piggy-logo { width: 24px; height: 24px; padding: 2px; border-radius: 6px; } /* Legal tail: right-aligned at every width, same as both app footers, and kept muted — `footer.site` now paints its links at full foreground, which is too loud for a copyright and disclaimer line. */ footer.site .legal { text-align: right; color: hsl(var(--muted-foreground)); } /* ── article ────────────────────────────────────────────────────────────────────────────────── */ /* The Ask-AI row's distance from the header. When there is no such row the H1 takes the top slot, and a headline hard against the header bar reads as a mistake — so it gets the extra drop and the marks do not. */ main { padding-top: 22px; } main > article:first-child > h1:first-child { margin-top: 26px; } h1 { font-size: 2.1rem; line-height: 1.2; letter-spacing: -0.03em; margin: 0 0 16px; font-weight: 500; } h2 { font-size: 1.4rem; line-height: 1.3; letter-spacing: -0.02em; margin: 44px 0 14px; font-weight: 700; } h3 { font-size: 1.1rem; margin: 28px 0 10px; font-weight: 650; } /* The 40-word answer span an LLM lifts (§P7.5). Visually the standfirst, structurally the payload. */ .lede { font-size: 1.12rem; color: hsl(var(--foreground)); margin: 0 0 24px; } .byline { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; font-size: 0.85rem; color: hsl(var(--muted-foreground)); padding-bottom: 22px; margin-bottom: 28px; border-bottom: 1px solid hsl(var(--border)); } .byline strong { color: hsl(var(--foreground)); font-weight: 600; } p { margin: 0 0 16px; } ul, ol { margin: 0 0 16px; padding-left: 22px; } li { margin-bottom: 7px; } table { width: 100%; border-collapse: collapse; margin: 20px 0; font-size: 0.92rem; display: block; overflow-x: auto; white-space: nowrap; } /* Comparison tables hold sentences, not figures — they wrap and share the width evenly. */ table.compare { display: table; table-layout: fixed; white-space: normal; } table.compare td, table.compare th { white-space: normal; vertical-align: top; } table.compare td:first-child, table.compare th:first-child { width: 26%; } th, td { text-align: left; padding: 10px 14px; border-bottom: 1px solid hsl(var(--border)); } th { font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.04em; color: hsl(var(--muted-foreground)); } /* The kappi column is emphasis, not a status: foreground weight reads as "ours" without the green that made every row look like a passing test. Row labels carry the amber accent instead. */ td.win { color: hsl(var(--foreground)); font-weight: 600; } table.compare td:first-child, table.compare td:first-child strong { color: hsl(var(--link-hover)); } blockquote { margin: 22px 0; padding: 14px 20px; border-left: 3px solid hsl(var(--primary)); background: hsl(var(--muted)); border-radius: 0 var(--radius) var(--radius) 0; } blockquote p:last-child { margin-bottom: 0; } .card { border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 20px 22px; margin: 22px 0; background: hsl(var(--card)); } .note { font-size: 0.85rem; color: hsl(var(--muted-foreground)); } /* ── sources ────────────────────────────────────────────────────────────────────────────────── */ /* Receipts, not decoration. Kept quiet — smaller than body copy, numbered, sitting between the article and the FAQs — because a reader who wants them will look for them and a reader who does not should not have to read past them. The date is when the URL was opened; it renders in the mono face so it reads as data rather than prose, same as every other number on the site. */ /* Inline reference markers. Small, quiet, and target-sized enough to tap — a superscript link at default size is a 10px hit area, which fails on a phone. */ sup.ref { font-size: 0.7em; line-height: 0; vertical-align: super; margin-left: 1px; } sup.ref a { text-decoration: none; padding: 0 3px; } sup.ref a:hover { color: hsl(var(--link-hover)); opacity: 1; } .sources li:target { background: hsl(var(--muted, 0 0% 96%)); border-radius: 4px; } .sources { margin: 34px 0 0; scroll-margin-top: 80px; } .sources li { scroll-margin-top: 80px; } .sources h2 { font-size: 1rem; margin-bottom: 10px; } .sources ol { margin: 0; padding-left: 20px; font-size: 0.85rem; color: hsl(var(--muted-foreground)); } .sources li { padding: 3px 0; } .sources a { text-decoration: none; } .sources a:hover { color: hsl(var(--link-hover)); opacity: 1; } .src-date { font-family: var(--mono, ui-monospace, "JetBrains Mono", monospace); font-size: 0.78rem; opacity: 0.8; } /* ── FAQ ────────────────────────────────────────────────────────────────────────────────────── */ .faq details { border-bottom: 1px solid hsl(var(--border)); padding: 14px 0; } .faq summary { cursor: pointer; font-weight: 600; list-style: none; } .faq summary::-webkit-details-marker { display: none; } /* The question is an

for the document outline; inline it so the row still reads as one line. */ .faq summary h3 { display: inline; margin: 0; font-size: 1rem; font-weight: 600; } .faq summary::after { content: "+"; float: right; color: hsl(var(--muted-foreground)); } .faq details[open] summary::after { content: "\2212"; } .faq details p { margin: 12px 0 4px; color: hsl(var(--muted-foreground)); } /* ── links / CTA ────────────────────────────────────────────────────────────────────────────── */ /* Related links read at full contrast — they are navigation, not footnotes — and go amber on hover so the affordance is the colour change rather than a permanent grey. */ .links { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px 24px; } .links a { font-size: 0.9rem; text-decoration: none; color: hsl(var(--foreground)); } .links a:hover { color: hsl(var(--link-hover)); opacity: 1; } .cta-box { border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 26px; margin: 36px 0; background: hsl(var(--muted)); text-align: center; } .cta-box h2 { margin-top: 0; } .btn { display: inline-block; background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); padding: 11px 22px; border-radius: 999px; text-decoration: none; font-weight: 600; font-size: 0.95rem; } .btn:hover { opacity: 0.85; } /* Top of the page, above the H1: a label and five marks. Muted until hover so it frames the article instead of competing with it. */ .ask-ai { margin: 0 0 30px; text-align: center; } .ask-ai-label { font-size: 0.85rem; color: hsl(var(--muted-foreground)); margin: 0 0 12px; } .ask-ai .row { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: 20px; } .ask-ai a { display: inline-flex; color: hsl(var(--muted-foreground)); opacity: 0.7; } .ask-ai a:hover { color: hsl(var(--link-hover)); opacity: 1; } /* Dark only: --link-hover's dark value (43 96% 62%) reads yellow behind these marks rather than amber. Scoped to this row — the Related lists and refs keep the shared token. The app's copy of the row (frontend/src/components/AskAI.jsx) hardcodes the same colour; change both or neither. */ .dark .ask-ai a:hover { color: hsl(36 92% 54%); } /* ── calculator ─────────────────────────────────────────────────────────────────────────────── */ .calc { border: 1px solid hsl(var(--border)); border-radius: var(--radius); padding: 24px; margin: 26px 0; background: hsl(var(--card)); } .calc .fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); gap: 16px; } .calc label { display: block; font-size: 0.82rem; font-weight: 600; margin-bottom: 6px; } .calc label .hint { display: block; font-weight: 400; color: hsl(var(--muted-foreground)); font-size: 0.76rem; } .calc input, .calc select { width: 100%; padding: 10px 12px; font-size: 0.95rem; font-family: inherit; border: 1px solid hsl(var(--border)); border-radius: 10px; background: hsl(var(--background)); color: hsl(var(--foreground)); } .calc input:focus, .calc select:focus { outline: 2px solid hsl(var(--primary)); outline-offset: -1px; } .calc .actions { margin-top: 18px; display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .calc button.go { background: hsl(var(--primary)); color: hsl(var(--primary-foreground)); border: none; padding: 11px 26px; border-radius: 999px; font-weight: 600; font-size: 0.95rem; cursor: pointer; font-family: inherit; } .calc button.go:hover { opacity: 0.85; } .calc button.ghost { background: none; border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); padding: 10px 18px; border-radius: 999px; cursor: pointer; font-family: inherit; font-size: 0.88rem; } .result { margin-top: 22px; padding-top: 20px; border-top: 1px solid hsl(var(--border)); } .result[hidden] { display: none; } .result .headline { font-size: 2rem; font-weight: 300; letter-spacing: -0.02em; } .result .headline.pos { color: hsl(var(--success)); } .result .headline.neg { color: hsl(var(--destructive)); } .result .verdict { font-size: 0.95rem; color: hsl(var(--muted-foreground)); margin-top: 2px; } .result .rows { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 14px; margin-top: 20px; } .result .rows div span { display: block; font-size: 0.76rem; color: hsl(var(--muted-foreground)); text-transform: uppercase; letter-spacing: 0.04em; } .result .rows div b { font-size: 1.1rem; font-weight: 700; } .result .caveat { font-size: 0.82rem; color: hsl(var(--muted-foreground)); margin-top: 18px; } .calc .err { color: hsl(var(--destructive)); font-size: 0.86rem; margin-top: 12px; } .calc .err[hidden] { display: none; } /* legs table for the multi-leg options builder */ .legs { width: 100%; display: block; overflow-x: auto; } .legs table { white-space: nowrap; margin: 0; } .legs td { padding: 6px 8px; border-bottom: none; } .legs input, .legs select { padding: 7px 9px; font-size: 0.88rem; min-width: 92px; } .legs button.rm { background: none; border: 1px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); border-radius: 8px; width: 30px; height: 30px; cursor: pointer; font-family: inherit; } .payoff { margin-top: 22px; } .payoff svg { width: 100%; height: auto; display: block; overflow: visible; } .payoff .axis { stroke: hsl(var(--border)); stroke-width: 1; } .payoff .zero { stroke: hsl(var(--muted-foreground)); stroke-width: 1; stroke-dasharray: 3 3; } .payoff .tick { fill: hsl(var(--muted-foreground)); font-size: 10px; } .payoff .curve { fill: none; stroke: hsl(var(--foreground)); stroke-width: 2; } .payoff .be { stroke: hsl(var(--muted-foreground)); stroke-width: 1; stroke-dasharray: 2 3; } .payoff .spot { stroke: hsl(var(--primary)); stroke-width: 1.5; } .payoff .hover-line { stroke: hsl(var(--muted-foreground)); stroke-width: 1; } .readout { font-size: 0.85rem; color: hsl(var(--muted-foreground)); margin-top: 8px; min-height: 1.4em; } .embed { margin: 30px 0; } .embed textarea { width: 100%; height: 74px; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 0.76rem; padding: 12px; border: 1px solid hsl(var(--border)); border-radius: 10px; background: hsl(var(--muted)); color: hsl(var(--foreground)); resize: vertical; } /* ── hub search ─────────────────────────────────────────────────────────────────────────────── */ .toolsearch { position: relative; max-width: 480px; margin: 0 0 30px; } .toolsearch input { width: 100%; padding: 11px 14px; font-size: 0.95rem; font-family: inherit; border: 1px solid hsl(var(--border)); border-radius: 999px; background: hsl(var(--card)); color: hsl(var(--foreground)); } .toolsearch input:focus { outline: 2px solid hsl(var(--primary)); outline-offset: -1px; } .toolsearch ul { position: absolute; z-index: 30; left: 0; right: 0; top: calc(100% + 6px); margin: 0; padding: 6px; list-style: none; max-height: 320px; overflow-y: auto; border: 1px solid hsl(var(--border)); border-radius: 14px; background: hsl(var(--card)); box-shadow: 0 12px 30px rgb(0 0 0 / 0.12); } .toolsearch ul[hidden] { display: none; } .toolsearch li { margin: 0; padding: 9px 12px; border-radius: 9px; cursor: pointer; font-size: 0.9rem; } .toolsearch li[aria-selected="true"] { background: hsl(var(--accent)); } .toolsearch li mark { background: none; color: hsl(var(--link-hover)); font-weight: 700; } .toolsearch .empty { color: hsl(var(--muted-foreground)); cursor: default; } /* ── hub grid ───────────────────────────────────────────────────────────────────────────────── */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; margin: 22px 0; } .grid a { display: block; text-decoration: none; border: 1px solid hsl(var(--border)); border-radius: 12px; padding: 15px 17px; background: hsl(var(--card)); } .grid a:hover { border-color: hsl(var(--foreground)); opacity: 1; } .grid a b { display: block; font-weight: 650; font-size: 0.95rem; margin-bottom: 3px; } .grid a span { font-size: 0.88rem; color: hsl(var(--muted-foreground)); white-space: normal; } /* The nav sheds links as the bar narrows, in the order the landing header sheds them: the static sections go first, then the SPA links, and Sign in / Get started are the last to leave. */ @media (max-width: 1080px) { header.site .brand .dot { display: none; } } @media (max-width: 1000px) { header.site nav a[href="/#how-it-works"] { display: none; } } @media (max-width: 860px) { header.site nav a[href="/guides/"], header.site nav a[href="/vs/"], header.site nav a[href="/faq"] { display: none; } } @media (max-width: 720px) { header.site nav a[href="/tools/trading-calculators"] { display: none; } } @media (max-width: 600px) { header.site nav a[href="/community"], header.site nav a.signin { display: none; } } @media (max-width: 640px) { h1 { font-size: 1.65rem; } h2 { font-size: 1.22rem; } main > article:first-child > h1:first-child { margin-top: 18px; } } /* Embedded mode (?embed=1): drop the site chrome, keep the tool. Used by the iframe snippet. */ body.embedded header.site, body.embedded footer.site, body.embedded .byline, body.embedded .prose, body.embedded .faq, body.embedded .ask-ai, body.embedded .embed, body.embedded .cta-box, body.embedded .siblings { display: none; } body.embedded main { padding-top: 0; } body.embedded h1 { font-size: 1.2rem; margin-bottom: 12px; } body.embedded .embed-credit { display: block; } .embed-credit { display: none; font-size: 0.78rem; color: hsl(var(--muted-foreground)); text-align: right; margin-top: 10px; }