/* ========================================================= RacingLink — Ghost theme stylesheet Brand Identity Guidelines 1.0 Named palette: Navy / Blue / Light Blue / Dark Sand / Sand / Light Sand / Black Typography: Special Gothic Expanded One (display) + Inter (body) Light + dark via [data-theme] on ========================================================= */ /* ---------- Tokens ---------- */ :root { /* Named brand palette (from Brand Identity Guidelines 1.0 p.10) */ --c-navy: #00045A; --c-blue: #0F2BEC; --c-light-blue: #5B84D0; --c-dark-sand: #96865E; --c-sand: #D2BB87; --c-light-sand: #F7F5ED; --c-black: #000000; /* Light-sand tint variants — used for alternating surfaces on the light page */ --c-light-sand-80: #F0ECDF; --c-light-sand-60: #E8E2D0; --c-sand-20: rgba(210, 187, 135, .2); /* Navy tints — for shadows, borders, faint overlays on light bg */ --c-navy-10: rgba(0, 4, 90, .1); --c-navy-20: rgba(0, 4, 90, .2); --c-navy-60: rgba(0, 4, 90, .6); --c-navy-80: rgba(0, 4, 90, .8); /* Semantic — light mode (default: Light Sand page, Navy ink) */ --bg: var(--c-light-sand); --bg-elevated: #FFFFFF; --surface: #FFFFFF; --surface-alt: var(--c-light-sand-80); --border: var(--c-navy-10); --border-strong: var(--c-navy-20); --text: var(--c-navy); --text-muted: var(--c-navy-80); --text-subtle: var(--c-navy-60); --text-inverse: var(--c-light-sand); --accent: var(--c-blue); --accent-hover: var(--c-navy); --highlight: var(--c-sand); --highlight-ink: var(--c-navy); --link: var(--c-blue); --focus-ring: 0 0 0 3px rgba(15, 43, 236, .35); /* Brand gradients (p.13 of the guidelines, plus complementary pairings) */ --gradient-sand: linear-gradient(180deg, var(--c-sand) 0%, var(--c-light-sand) 100%); --gradient-accent: linear-gradient(160deg, var(--c-blue) 0%, var(--c-light-blue) 100%); --gradient-navy: linear-gradient(160deg, var(--c-navy) 0%, var(--c-blue) 100%); /* Typography */ --ff-display: "Special Gothic Expanded One", system-ui, sans-serif; --ff-body: "Inter", system-ui, -apple-system, sans-serif; --ff-mono: "Inter", system-ui, -apple-system, sans-serif; /* kept for eyebrow labels — Inter tracking-wide */ /* Type scale — 16px base, 1.25 modular ratio */ --fs-base: 1rem; /* 16 · H5 */ --fs-h7: 0.625rem; /* 10 */ --fs-h6: 0.812rem; /* 13 */ --fs-h5: 1rem; /* 16 */ --fs-h4: 1.25rem; /* 20 */ --fs-h3: 1.562rem; /* 25 */ --fs-h2: 1.938rem; /* 31 */ --fs-h1: 2.438rem; /* 39 */ /* Display steps above H1 (same 1.25 ratio, for hero / article titles) */ --fs-display: 3.052rem; /* ≈ 49 */ --fs-hero: 3.815rem; /* ≈ 61 */ --fs-mega: 4.768rem; /* ≈ 76 */ /* Size aliases used across components — mapped to the H-scale steps */ --fs-xs: var(--fs-h7); /* 10 */ --fs-sm: var(--fs-h6); /* 13 */ --fs-lg: var(--fs-h4); /* 20 */ --fs-xl: var(--fs-h3); /* 25 */ --fs-2xl: var(--fs-h2); /* 31 */ --fs-3xl: var(--fs-h1); /* 39 */ --fs-4xl: var(--fs-display); --fs-5xl: var(--fs-hero); --fs-6xl: var(--fs-mega); --lh-tight:1.08; --lh-snug:1.25; --lh-base:1.55; --lh-loose:1.7; --fw-reg:400; --fw-med:500; --fw-semi:600; --fw-bold:700; --ls-tight:-.015em; --ls-normal:0; --ls-wide:.04em; --ls-caps:.14em; --s-2xs:.25rem; --s-xs:.5rem; --s-sm:.75rem; --s-md:1rem; --s-lg:1.5rem; --s-xl:2rem; --s-2xl:3rem; --s-3xl:4rem; --s-4xl:6rem; --r-sm:4px; --r-md:8px; --r-lg:16px; --r-xl:24px; --r-pill:999px; --sh-1:0 1px 2px rgba(0, 4, 90, .06); --sh-2:0 4px 14px rgba(0, 4, 90, .08); --sh-3:0 14px 36px rgba(0, 4, 90, .12); --dur-fast:120ms; --dur-base:200ms; --dur-slow:320ms; --ease:cubic-bezier(.2,.6,.2,1); --content-w: 72ch; --page-w: 1240px; } /* Explicit dark — Navy page, Light Sand ink (p.10 inverted pairing) */ [data-theme="dark"] { --bg: var(--c-navy); --bg-elevated: #0A0E7A; --surface: #0A0E7A; --surface-alt: rgba(247, 245, 237, .06); --border: rgba(247, 245, 237, .12); --border-strong: rgba(247, 245, 237, .24); --text: var(--c-light-sand); --text-muted: rgba(247, 245, 237, .78); --text-subtle: rgba(247, 245, 237, .55); --text-inverse: var(--c-navy); --accent: var(--c-light-blue); --accent-hover: var(--c-light-sand); --highlight: var(--c-sand); --highlight-ink: var(--c-navy); --link: var(--c-light-blue); --focus-ring: 0 0 0 3px rgba(91, 132, 208, .45); --sh-1:0 1px 2px rgba(0, 0, 0, .45); --sh-2:0 4px 14px rgba(0, 0, 0, .5); --sh-3:0 14px 36px rgba(0, 0, 0, .55); } /* Auto mode follows OS */ @media (prefers-color-scheme: dark) { [data-theme="auto"] { --bg: var(--c-navy); --bg-elevated: #0A0E7A; --surface: #0A0E7A; --surface-alt: rgba(247, 245, 237, .06); --border: rgba(247, 245, 237, .12); --border-strong: rgba(247, 245, 237, .24); --text: var(--c-light-sand); --text-muted: rgba(247, 245, 237, .78); --text-subtle: rgba(247, 245, 237, .55); --text-inverse: var(--c-navy); --accent: var(--c-light-blue); --accent-hover: var(--c-light-sand); --highlight: var(--c-sand); --highlight-ink: var(--c-navy); --link: var(--c-light-blue); --focus-ring: 0 0 0 3px rgba(91, 132, 208, .45); --sh-1:0 1px 2px rgba(0, 0, 0, .45); --sh-2:0 4px 14px rgba(0, 0, 0, .5); --sh-3:0 14px 36px rgba(0, 0, 0, .55); } } /* ---------- Reset + base ---------- */ *,*::before,*::after { box-sizing: border-box; } html { color-scheme: light dark; } body { margin: 0; font-family: var(--ff-body); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; transition: background var(--dur-base) var(--ease), color var(--dur-base) var(--ease); } img { max-width: 100%; height: auto; display: block; } a { color: var(--link); text-decoration: none; transition: color var(--dur-fast) var(--ease); } a:hover { color: var(--accent-hover); } hr { border: none; border-top: 1px solid var(--border); margin: var(--s-xl) 0; } h1,h2,h3,h4,h5,h6 { margin: 0 0 var(--s-md); color: var(--text); text-transform: none; } /* Display face (Special Gothic Expanded One) is reserved for H1–H3 */ h1,h2,h3 { font-family: var(--ff-display); font-weight: var(--fw-reg); /* single weight */ letter-spacing: var(--ls-tight); line-height: var(--lh-tight); } /* H4–H6 drop down to the body face (Inter) with a workhorse weight */ h4,h5,h6 { font-family: var(--ff-body); font-weight: var(--fw-semi); letter-spacing: 0; line-height: var(--lh-snug); } h1 { font-size: var(--fs-h1); } /* 39 · Special Gothic */ h2 { font-size: var(--fs-h2); line-height: var(--lh-snug); } /* 31 · Special Gothic */ h3 { font-size: var(--fs-h3); line-height: var(--lh-snug); } /* 25 · Special Gothic */ h4 { font-size: var(--fs-h4); } /* 20 · Inter */ h5 { font-size: var(--fs-h5); line-height: var(--lh-base); } /* 16 · Inter */ h6 { font-size: var(--fs-h6); line-height: var(--lh-base); } /* 13 · Inter */ p { margin: 0 0 var(--s-md); } blockquote { margin: var(--s-xl) 0; padding: var(--s-md) var(--s-lg); border-left: 3px solid var(--highlight); font-family: var(--ff-display); font-size: var(--fs-xl); line-height: var(--lh-snug); color: var(--text); background: var(--surface-alt); border-radius: 0 var(--r-lg) var(--r-lg) 0; } code, kbd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-size: .9em; background: var(--surface-alt); padding: 2px 6px; border-radius: var(--r-sm); color: var(--text); } pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--r-md); padding: var(--s-md); overflow-x: auto; font-size: var(--fs-sm); } pre code { background: transparent; padding: 0; } /* ---------- Layout ---------- */ .gh-wrap { max-width: var(--page-w); margin: 0 auto; padding: 0 var(--s-lg); } .gh-wrap--narrow { max-width: 820px; } .site-main { min-height: 50vh; padding-bottom: var(--s-4xl); } .gh-eyebrow { font-family: var(--ff-body); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--accent); margin: 0 0 var(--s-xs); font-weight: var(--fw-semi); } .section-head { margin-bottom: var(--s-xl); } /* ---------- Header ---------- */ .gh-head { position: sticky; top: 0; z-index: 50; background: rgba(247, 245, 237, .96); /* Light Sand fallback */ background: color-mix(in srgb, var(--bg) 96%, transparent); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid var(--border); } [data-theme="dark"] .gh-head { background: rgba(0, 4, 90, .92); background: color-mix(in srgb, var(--bg) 92%, transparent); } @media (prefers-color-scheme: dark) { [data-theme="auto"] .gh-head { background: rgba(0, 4, 90, .92); background: color-mix(in srgb, var(--bg) 92%, transparent); } } .gh-head__inner { display: flex; align-items: center; justify-content: space-between; gap: var(--s-lg); padding: var(--s-md) var(--s-lg); } .gh-head--centered .gh-head__inner { justify-content: center; position: relative; } .gh-head--centered .gh-head__nav, .gh-head--centered .gh-head__actions { position: absolute; top: 50%; transform: translateY(-50%); } .gh-head--centered .gh-head__nav { left: var(--s-lg); } .gh-head--centered .gh-head__actions { right: var(--s-lg); } .gh-logo { display: inline-flex; align-items: center; gap: var(--s-sm); font-family: var(--ff-display); font-weight: var(--fw-reg); font-size: var(--fs-lg); letter-spacing: var(--ls-tight); color: var(--text); text-decoration: none; } .gh-logo img, .gh-logo svg { height: 36px; width: auto; } .gh-logo__mark { height: 36px; width: auto; flex-shrink: 0; } /* Swap the brand-mark asset per theme: Navy mark on light bg, Light-Sand mark on dark bg. Selectors are compound (.gh-logo .gh-logo__mark...) so they outrank the generic `.gh-logo img` rule above. */ .gh-logo .gh-logo__mark--light { display: block; } .gh-logo .gh-logo__mark--dark { display: none; } [data-theme="dark"] .gh-logo .gh-logo__mark--light { display: none; } [data-theme="dark"] .gh-logo .gh-logo__mark--dark { display: block; } @media (prefers-color-scheme: dark) { [data-theme="auto"] .gh-logo .gh-logo__mark--light { display: none; } [data-theme="auto"] .gh-logo .gh-logo__mark--dark { display: block; } } .gh-head__nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--s-lg); } .gh-head__nav a { color: var(--text); font-weight: var(--fw-med); font-size: var(--fs-sm); } .gh-head__nav a:hover { color: var(--accent); } .gh-head__actions { display: flex; align-items: center; gap: var(--s-sm); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--r-pill); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); cursor: pointer; font-size: 16px; line-height: 1; transition: all var(--dur-base) var(--ease); } .theme-toggle:hover { border-color: var(--accent); color: var(--accent); } .theme-toggle .theme-toggle__light, .theme-toggle .theme-toggle__dark { display: inline-flex; align-items: center; justify-content: center; } .theme-toggle .theme-toggle__dark { display: none; } [data-theme="dark"] .theme-toggle .theme-toggle__light { display: none; } [data-theme="dark"] .theme-toggle .theme-toggle__dark { display: inline-flex; } @media (prefers-color-scheme: dark) { [data-theme="auto"] .theme-toggle .theme-toggle__light { display: none; } [data-theme="auto"] .theme-toggle .theme-toggle__dark { display: inline-flex; } } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; gap: var(--s-xs); font-family: var(--ff-body); font-weight: var(--fw-semi); font-size: var(--fs-base); line-height: 1; padding: 14px 22px; border-radius: var(--r-pill); cursor: pointer; border: 1px solid transparent; text-decoration: none; transition: transform var(--dur-fast) var(--ease), background var(--dur-base) var(--ease), color var(--dur-base) var(--ease), border-color var(--dur-base) var(--ease); } .btn:focus-visible { outline: none; box-shadow: var(--focus-ring); } .btn--sm { padding: 8px 14px; font-size: var(--fs-sm); } .btn-primary { background: var(--accent); color: var(--c-light-sand); } .btn-primary:hover { background: var(--accent-hover); transform: translateY(-1px); color: var(--c-light-sand); } .btn-secondary { background: transparent; color: var(--text); border-color: var(--border-strong); } .btn-secondary:hover{ border-color: var(--accent); color: var(--accent); } .btn-sand { background: var(--c-sand); color: var(--c-navy); } .btn-sand:hover { filter: brightness(.96); color: var(--c-navy); transform: translateY(-1px); } .btn-light { background: var(--c-light-sand); color: var(--c-navy); } .btn-light:hover { background: #FFFFFF; color: var(--c-navy); transform: translateY(-1px); } /* ---------- Inputs ---------- */ .input, input[type="email"], input[type="text"], textarea { width: 100%; padding: 14px 16px; border-radius: var(--r-md); border: 1px solid var(--border-strong); background: var(--bg-elevated); color: var(--text); font-family: var(--ff-body); font-size: var(--fs-base); transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } .input:focus, input:focus, textarea:focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); } /* ---------- Tags ---------- */ .tag { display: inline-flex; align-items: center; padding: 4px 12px; border-radius: var(--r-pill); font-family: var(--ff-body); font-size: var(--fs-xs); font-weight: var(--fw-semi); text-transform: uppercase; letter-spacing: var(--ls-caps); background: var(--surface-alt); color: var(--text-muted); text-decoration: none; } .tag:hover { color: var(--accent); } .tag--accent { background: var(--accent); color: var(--c-light-sand); } .tag--accent:hover { color: var(--c-light-sand); background: var(--accent-hover); } .tag--sand { background: var(--c-sand); color: var(--c-navy); } .tag-list { list-style: none; padding: 0; margin: 0; display: flex; flex-wrap: wrap; gap: var(--s-xs); } /* ---------- Hero ---------- */ .gh-hero { padding: var(--s-4xl) 0 var(--s-3xl); position: relative; overflow: hidden; } .gh-hero::after { content: ""; position: absolute; inset: auto -10% -40% auto; width: 60vw; aspect-ratio: 2 / 1; border-radius: 999px; border: 2px solid var(--accent); opacity: .12; pointer-events: none; transform: rotate(-8deg); } .gh-hero__title { font-family: var(--ff-display); font-weight: var(--fw-reg); font-size: clamp(var(--fs-h1), 6vw, var(--fs-hero)); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); margin-bottom: var(--s-lg); } .gh-hero__accent { color: var(--accent); } .gh-hero__lede { font-size: var(--fs-lg); color: var(--text-muted); max-width: 56ch; margin-bottom: var(--s-xl); } .gh-hero__cta { display: flex; flex-wrap: wrap; gap: var(--s-sm); } /* Optional Sand-gradient hero band (pub-cover style) */ .gh-hero--sand { background: var(--gradient-sand); color: var(--c-navy); } .gh-hero--sand .gh-hero__lede { color: var(--c-navy-80); } .gh-hero--sand::after { border-color: var(--c-navy); opacity: .18; } /* ---------- Post feed / cards ---------- */ .gh-post-feed-section { padding: var(--s-2xl) 0; } .gh-post-feed { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: var(--s-xl); } .gh-card { background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: transform var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); } .gh-card:hover { transform: translateY(-2px); box-shadow: var(--sh-2); } .gh-card__link { display: block; color: inherit; } .gh-card__link:hover { color: inherit; } .gh-card__image { aspect-ratio: 16/9; overflow: hidden; background: var(--surface-alt); } .gh-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--dur-slow) var(--ease); } .gh-card:hover .gh-card__image img { transform: scale(1.04); } .gh-card__body { padding: var(--s-lg); display: flex; flex-direction: column; gap: var(--s-sm); } .gh-card__title { font-family: var(--ff-display); font-weight: var(--fw-reg); font-size: var(--fs-xl); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); margin: var(--s-xs) 0 0; color: var(--text); } .gh-card__excerpt { color: var(--text-muted); font-size: var(--fs-sm); margin: 0; } .gh-card__meta { display: flex; flex-wrap: wrap; gap: var(--s-xs); align-items: center; font-family: var(--ff-body); font-size: var(--fs-xs); font-weight: var(--fw-med); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-subtle); } .gh-card__dot { opacity: .5; } /* Featured card — first in feed on home gets a bigger treatment */ .gh-post-feed .gh-card.post-card-large, .gh-post-feed > .gh-card:first-child:nth-last-child(n+4) { grid-column: 1 / -1; display: grid; grid-template-columns: 1.2fr 1fr; } .gh-post-feed > .gh-card:first-child:nth-last-child(n+4) .gh-card__image { aspect-ratio: auto; height: 100%; } @media (max-width: 900px) { .gh-post-feed > .gh-card:first-child:nth-last-child(n+4) { grid-template-columns: 1fr; } } /* ---------- Article ---------- */ .gh-article { padding: var(--s-2xl) 0 var(--s-3xl); } .gh-article__header { margin-bottom: var(--s-xl); } .gh-article__title { font-family: var(--ff-display); font-weight: var(--fw-reg); font-size: clamp(var(--fs-h2), 5vw, var(--fs-display)); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); margin: var(--s-sm) 0 var(--s-md); } .gh-article__lede { font-size: var(--fs-xl); color: var(--text-muted); line-height: var(--lh-snug); margin-bottom: var(--s-lg); } .gh-article__meta { display: flex; flex-wrap: wrap; gap: var(--s-xs); align-items: center; font-family: var(--ff-body); font-size: var(--fs-xs); font-weight: var(--fw-med); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--text-subtle); } .gh-article__authors { display: inline-flex; flex-wrap: wrap; gap: var(--s-sm); } .gh-article__author { display: inline-flex; align-items: center; gap: var(--s-xs); color: var(--text-muted); } .gh-article__authors .gh-article__author + .gh-article__author::before { content: "+"; margin-right: var(--s-xs); opacity: .5; } .gh-article__avatar { width: 24px; height: 24px; border-radius: 999px; object-fit: cover; } .gh-article__avatar--fallback { display: inline-flex; align-items: center; justify-content: center; background: var(--c-sand); color: var(--c-navy); font-size: 14px; } .gh-article__dot { opacity: .5; } .gh-article__feature { max-width: 1120px; margin: 0 auto var(--s-xl); padding: 0 var(--s-lg); } .gh-article__feature img { border-radius: var(--r-lg); width: 100%; } .gh-article__feature figcaption { margin-top: var(--s-xs); font-size: var(--fs-sm); color: var(--text-subtle); text-align: center; } .gh-article__footer { margin-top: var(--s-2xl); padding-top: var(--s-lg); border-top: 1px solid var(--border); } /* ---------- Prose (Koenig content) ---------- .gh-content is a full-width grid with three named column tracks: [full-start] – page gutter – [wide-start] – extra breathing room – [main-start] [main-start] – reading column (~820px) – [main-end] [main-end] – extra breathing room – [wide-end] – page gutter – [full-end] Direct children default to the reading column. Koenig cards marked kg-width-wide span the wider track, kg-width-full go edge-to-edge. */ .gh-content { font-size: var(--fs-lg); line-height: var(--lh-loose); display: grid; grid-template-columns: [full-start] minmax(var(--s-lg), 1fr) [wide-start] minmax(auto, 90px) [main-start] min(100% - var(--s-lg) * 2, var(--content-w)) [main-end] minmax(auto, 90px) [wide-end] minmax(var(--s-lg), 1fr) [full-end]; } .gh-content > * { grid-column: main-start / main-end; margin-bottom: var(--s-lg); } .gh-content > .kg-width-wide { grid-column: wide-start / wide-end; max-width: 100%; margin-left: 0; margin-right: 0; } .gh-content > .kg-width-full { grid-column: full-start / full-end; max-width: 100%; margin-left: 0; margin-right: 0; } .gh-content h2 { font-size: var(--fs-3xl); margin-top: var(--s-2xl); } .gh-content h3 { font-size: var(--fs-2xl); margin-top: var(--s-xl); } .gh-content a { color: var(--link); border-bottom: 1px solid currentColor; } .gh-content a:hover { color: var(--accent-hover); } .gh-content ul, .gh-content ol { padding-left: var(--s-lg); } .gh-content li { margin-bottom: var(--s-xs); } .gh-content img { border-radius: var(--r-md); } /* ---------- Koenig cards ---------- Ghost ships a set of editor blocks (kg-*). The rules below apply brand tokens to each so posts look on-brand out of the box. ----------------------------------- */ /* ---------- Bookmark card (authoritative: card_assets is false) ---------- */ .kg-bookmark-card { margin: var(--s-xl) 0; min-width: 100%; } .kg-bookmark-container { display: flex; flex-wrap: wrap; color: var(--text); text-decoration: none; background: var(--bg-elevated); border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; transition: border-color var(--dur-base) var(--ease), box-shadow var(--dur-base) var(--ease); min-height: 148px; } .kg-bookmark-container:hover { border-color: var(--accent); box-shadow: var(--sh-2); text-decoration: none; } .kg-bookmark-content { flex: 1 1 60%; display: flex; flex-direction: column; justify-content: space-between; gap: var(--s-xs); padding: var(--s-lg); min-width: 0; } .kg-bookmark-title { font-family: var(--ff-display); font-weight: var(--fw-reg); font-size: var(--fs-lg); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text); margin: 0; } .kg-bookmark-description { font-family: var(--ff-body); font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--text-muted); margin: var(--s-xs) 0 0; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .kg-bookmark-metadata { display: flex; align-items: center; gap: var(--s-sm); flex-wrap: wrap; font-family: var(--ff-body); font-size: var(--fs-xs); color: var(--text-subtle); margin-top: var(--s-md); } .kg-bookmark-icon { width: 22px; height: 22px; border-radius: 4px; flex-shrink: 0; } .kg-bookmark-author, .kg-bookmark-publisher { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 240px; } .kg-bookmark-publisher::before { content: "•"; margin-right: var(--s-sm); color: var(--text-subtle); } .kg-bookmark-thumbnail { position: relative; flex: 1 1 40%; min-width: 180px; min-height: 148px; } .kg-bookmark-thumbnail img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 0; } @media (max-width: 600px) { .kg-bookmark-container { flex-direction: column; } .kg-bookmark-thumbnail { order: -1; flex-basis: 100%; min-height: 180px; } } /* ---------- Image card (authoritative) ---------- */ .kg-image-card { margin: var(--s-xl) 0; } .kg-image-card img { display: block; width: 100%; height: auto; margin: 0 auto; border-radius: var(--r-md); } .kg-image-card.kg-width-full img { border-radius: 0; } .kg-image-card figcaption, .kg-image-card .kg-card-caption { margin-top: var(--s-sm); font-family: var(--ff-body); font-size: var(--fs-sm); color: var(--text-subtle); line-height: var(--lh-base); text-align: center; } /* ---------- Gallery card (authoritative) ---------- */ .kg-gallery-card { margin: var(--s-xl) 0; } .kg-gallery-container { display: flex; flex-direction: column; gap: var(--s-sm); } .kg-gallery-row { display: flex; flex-direction: row; justify-content: center; gap: var(--s-sm); } .kg-gallery-image { flex: 1 1 0; min-width: 0; } .kg-gallery-image img { display: block; width: 100%; height: 100%; object-fit: cover; border-radius: var(--r-md); } .kg-gallery-card figcaption, .kg-gallery-card .kg-card-caption { margin-top: var(--s-md); font-family: var(--ff-body); font-size: var(--fs-sm); color: var(--text-subtle); line-height: var(--lh-base); text-align: center; } /* Header card — used for hero sections on pages and posts */ .kg-header-card { position: relative; padding: var(--s-2xl) var(--s-xl); border-radius: var(--r-lg); display: flex; flex-direction: column; justify-content: center; gap: var(--s-sm); overflow: hidden; isolation: isolate; min-height: 240px; } .kg-header-card.kg-size-small { min-height: 260px; padding: var(--s-xl); } .kg-header-card.kg-size-medium { min-height: 420px; padding: var(--s-2xl); } .kg-header-card.kg-size-large { min-height: 560px; padding: var(--s-3xl) var(--s-2xl); } .kg-header-card.kg-style-light { background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); } .kg-header-card.kg-style-dark { background: var(--gradient-navy); color: var(--c-light-sand); } .kg-header-card.kg-style-accent { background: var(--gradient-accent); color: var(--c-light-sand); } .kg-header-card.kg-style-sand { background: var(--gradient-sand); color: var(--c-navy); } .kg-header-card.kg-style-image { color: var(--c-light-sand); } .kg-header-card.kg-style-image::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(0,4,90,.72), rgba(0,4,90,.45) 60%, rgba(15,43,236,.35)); } .kg-header-card.kg-style-image .kg-header-card-image { position: absolute; inset: 0; z-index: -2; object-fit: cover; width: 100%; height: 100%; } .gh-content > .kg-header-card.kg-width-full { border-radius: 0; } .kg-header-card-accent { font-family: var(--ff-body); font-weight: var(--fw-semi); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-caps); opacity: .9; margin: 0; } /* Eyebrow — paste into an HTML card above a header card to get the small, wide-tracked accent label the header card's UI no longer exposes. Usage:

The winning connection

*/ .rl-eyebrow { font-family: var(--ff-body); font-weight: var(--fw-semi); font-size: var(--fs-xs); text-transform: uppercase; letter-spacing: var(--ls-caps); color: var(--accent); margin: var(--s-xl) 0 var(--s-xs); padding: 0; line-height: 1.4; } /* When the eyebrow sits directly above a header or signup card, pull the card up slightly so the label reads as a label on the hero rather than a stranded paragraph. */ .gh-content > .kg-html-card:has(> .rl-eyebrow) + .kg-header-card, .gh-content > .kg-html-card:has(> .rl-eyebrow) + .kg-signup-card, .gh-content > .kg-card.kg-html-card:has(.rl-eyebrow) + .kg-header-card, .gh-content > .kg-card.kg-html-card:has(.rl-eyebrow) + .kg-signup-card { margin-top: calc(var(--s-lg) * -1 + var(--s-2xs)); } /* Eyebrow on a sand / accent / dark hero that follows — use the inverse tint */ .kg-header-card.kg-style-accent .rl-eyebrow, .kg-header-card.kg-style-dark .rl-eyebrow, .kg-header-card.kg-style-image .rl-eyebrow { color: var(--c-sand); } .kg-header-card.kg-style-sand .rl-eyebrow { color: var(--c-navy); } .kg-header-card-heading { font-family: var(--ff-display); font-weight: var(--fw-reg); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); margin: 0; color: inherit; } .kg-header-card.kg-size-small .kg-header-card-heading { font-size: var(--fs-h2); } .kg-header-card.kg-size-medium .kg-header-card-heading { font-size: var(--fs-h1); } .kg-header-card.kg-size-large .kg-header-card-heading { font-size: clamp(var(--fs-h1), 5vw, var(--fs-hero)); } .kg-header-card-subheading { font-family: var(--ff-body); font-size: var(--fs-lg); font-weight: var(--fw-reg); line-height: var(--lh-snug); max-width: 52ch; opacity: .92; margin: 0; color: inherit; } a.kg-header-card-button, a.kg-signup-card-button { border-bottom: 0; } .kg-header-card-button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 28px; border: 0; border-radius: var(--r-pill); font-family: var(--ff-body); font-weight: var(--fw-semi); font-size: var(--fs-base); line-height: 1; text-decoration: none; margin-top: var(--s-sm); background: var(--c-navy); color: var(--c-light-sand); transition: background var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); } .kg-header-card-button:hover { transform: translateY(-1px); background: var(--accent); } .kg-header-card.kg-style-light .kg-header-card-button { background: var(--c-navy); color: var(--c-light-sand); } .kg-header-card.kg-style-sand .kg-header-card-button { background: var(--c-navy); color: var(--c-light-sand); } .kg-header-card.kg-style-accent .kg-header-card-button { background: var(--c-navy); color: var(--c-light-sand); } .kg-header-card.kg-style-dark .kg-header-card-button, .kg-header-card.kg-style-image .kg-header-card-button { background: var(--c-light-sand); color: var(--c-navy); } /* ---------- kg-v2 header / signup cards ---------- package.json excludes these from Ghost's cards.min.css, so every rule here is authoritative. Both cards share the same structure: .kg-(header|signup)-card.kg-v2 .kg-(header|signup)-card-content .kg-(header|signup)-card-text .kg-(header|signup)-card-heading .kg-(header|signup)-card-subheading .kg-(header|signup)-card-button | -form Width variants: kg-width-wide / kg-width-full. Style variants: kg-style-light | -dark | -accent | -sand | -image. */ /* Outer — reset padding (inner text block pads instead), give a rounded container unless the card is edge-to-edge */ .kg-header-card.kg-v2, .kg-signup-card, .kg-signup-card.kg-v2 { position: relative; padding: 0; min-height: initial; box-sizing: border-box; overflow: hidden; isolation: isolate; border-radius: var(--r-lg); } .gh-content > .kg-header-card.kg-width-full, .gh-content > .kg-signup-card.kg-width-full { border-radius: 0; } /* Style variants */ .kg-signup-card.kg-style-light { background: var(--bg-elevated); color: var(--text); border: 1px solid var(--border); } .kg-signup-card.kg-style-dark { background: var(--gradient-navy); color: var(--c-light-sand); } .kg-signup-card.kg-style-accent { background: var(--gradient-accent); color: var(--c-light-sand); } .kg-signup-card.kg-style-sand { background: var(--gradient-sand); color: var(--c-navy); } .kg-signup-card.kg-style-image { color: var(--c-light-sand); } .kg-signup-card.kg-style-image::before { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(160deg, rgba(0,4,90,.72), rgba(0,4,90,.45) 60%, rgba(15,43,236,.35)); } .kg-signup-card.kg-style-image .kg-signup-card-image { position: absolute; inset: 0; z-index: -2; object-fit: cover; width: 100%; height: 100%; } /* Centre + constrain the inner content at our page width */ .kg-header-card .kg-header-card-content, .kg-signup-card .kg-signup-card-content { width: 100%; max-width: var(--page-w); margin: 0 auto; padding: 0 var(--s-lg); } .kg-header-card.kg-layout-split .kg-header-card-content, .kg-signup-card.kg-layout-split .kg-signup-card-content { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s-2xl); align-items: center; } /* Vertical breathing room — scales with width variant. Header cards get a min-height on top of the padding so they always read as a proper hero; signup cards stay content-sized. */ .kg-header-card.kg-width-full .kg-header-card-text { padding: var(--s-4xl) 0; } .kg-header-card.kg-width-wide .kg-header-card-text { padding: var(--s-4xl) 0; } .kg-header-card:not(.kg-width-wide):not(.kg-width-full) .kg-header-card-text { padding: var(--s-3xl) 0; } .kg-header-card.kg-v2.kg-width-full { min-height: 640px; } .kg-header-card.kg-v2.kg-width-wide { min-height: 520px; } .kg-header-card.kg-v2:not(.kg-width-wide):not(.kg-width-full) { min-height: 420px; } /* Put the hero text block vertically centred */ .kg-header-card.kg-v2 .kg-header-card-content { display: flex; align-items: center; min-height: inherit; } .kg-signup-card.kg-width-full .kg-signup-card-text { padding: var(--s-4xl) 0; } .kg-signup-card.kg-width-wide .kg-signup-card-text { padding: var(--s-3xl) 0; } .kg-signup-card:not(.kg-width-wide):not(.kg-width-full) .kg-signup-card-text { padding: var(--s-2xl) 0; } /* Heading — design-system type scale. Signup cards live inside reading flow, so they get one step smaller than the header card at every width. */ .kg-header-card .kg-header-card-heading, .kg-signup-card .kg-signup-card-heading { font-family: var(--ff-display); font-weight: var(--fw-reg); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); margin: 0; color: inherit; font-size: var(--fs-h2); } .kg-header-card.kg-width-wide .kg-header-card-heading { font-size: var(--fs-h1); } .kg-header-card.kg-width-full .kg-header-card-heading { font-size: clamp(var(--fs-h1), 4vw, var(--fs-hero)); } .kg-signup-card.kg-width-wide .kg-signup-card-heading { font-size: var(--fs-h2); } .kg-signup-card.kg-width-full .kg-signup-card-heading { font-size: clamp(var(--fs-h2), 3vw, var(--fs-h1)); } /* Subheading — brand body font, size tied to width variant */ .kg-header-card .kg-header-card-subheading, .kg-signup-card .kg-signup-card-subheading { font-family: var(--ff-body); font-weight: var(--fw-reg); line-height: var(--lh-snug); margin: var(--s-sm) 0 0; max-width: 52ch; opacity: .92; color: inherit; font-size: var(--fs-base); } .kg-header-card.kg-width-wide .kg-header-card-subheading { font-size: var(--fs-lg); max-width: 56ch; } .kg-header-card.kg-width-full .kg-header-card-subheading { font-size: var(--fs-xl); max-width: 60ch; } .kg-signup-card.kg-width-wide .kg-signup-card-subheading { font-size: var(--fs-base); max-width: 56ch; } .kg-signup-card.kg-width-full .kg-signup-card-subheading { font-size: var(--fs-lg); max-width: 60ch; } /* Button — pill shape, brand tokens. We also set color on descendants so nested spans / loading dots don't inherit the parent card's text colour. */ .kg-header-card .kg-header-card-button, .kg-signup-card .kg-signup-card-button { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 28px; margin: var(--s-lg) 0 0; border: 0; border-radius: var(--r-pill); font-family: var(--ff-body); font-weight: var(--fw-semi); font-size: var(--fs-base); line-height: 1; letter-spacing: 0; text-transform: none; text-decoration: none; cursor: pointer; background: var(--c-navy); color: var(--c-light-sand); transition: background var(--dur-base) var(--ease), transform var(--dur-base) var(--ease), opacity var(--dur-base) var(--ease); } .kg-header-card .kg-header-card-button *, .kg-signup-card .kg-signup-card-button * { color: inherit; } .kg-header-card .kg-header-card-button:hover, .kg-signup-card .kg-signup-card-button:hover { opacity: 1; transform: translateY(-1px); background: var(--accent); } /* Per-style-variant button colours — high-contrast in every direction */ .kg-header-card.kg-style-light .kg-header-card-button, .kg-signup-card.kg-style-light .kg-signup-card-button { background: var(--c-navy); color: var(--c-light-sand); } .kg-header-card.kg-style-light .kg-header-card-button:hover, .kg-signup-card.kg-style-light .kg-signup-card-button:hover { background: var(--accent); } .kg-header-card.kg-style-sand .kg-header-card-button, .kg-signup-card.kg-style-sand .kg-signup-card-button { background: var(--c-navy); color: var(--c-light-sand); } .kg-header-card.kg-style-sand .kg-header-card-button:hover, .kg-signup-card.kg-style-sand .kg-signup-card-button:hover { background: var(--accent); } .kg-header-card.kg-style-accent .kg-header-card-button, .kg-signup-card.kg-style-accent .kg-signup-card-button { background: var(--c-navy); color: var(--c-light-sand); } .kg-header-card.kg-style-accent .kg-header-card-button:hover, .kg-signup-card.kg-style-accent .kg-signup-card-button:hover { background: var(--c-light-sand); color: var(--c-navy); } .kg-header-card.kg-style-dark .kg-header-card-button, .kg-header-card.kg-style-image .kg-header-card-button, .kg-signup-card.kg-style-dark .kg-signup-card-button, .kg-signup-card.kg-style-image .kg-signup-card-button { background: var(--c-light-sand); color: var(--c-navy); } .kg-header-card.kg-style-dark .kg-header-card-button:hover, .kg-header-card.kg-style-image .kg-header-card-button:hover, .kg-signup-card.kg-style-dark .kg-signup-card-button:hover, .kg-signup-card.kg-style-image .kg-signup-card-button:hover { background: var(--c-sand); color: var(--c-navy); } /* Signup form — input + button share the same pill size so they line up */ .kg-signup-card .kg-signup-card-form { margin: var(--s-lg) 0 0; } .kg-signup-card .kg-signup-card-fields { display: flex; gap: var(--s-sm); align-items: center; max-width: 500px; flex-wrap: wrap; } .kg-signup-card.kg-width-wide .kg-signup-card-fields, .kg-signup-card.kg-width-full .kg-signup-card-fields { max-width: 560px; } .kg-signup-card .kg-signup-card-input { box-sizing: border-box; flex: 1 1 240px; height: 52px; padding: 0 22px; margin: 0; border-radius: var(--r-pill); border: 1px solid var(--border); background: var(--bg-elevated); color: var(--text); font-family: var(--ff-body); font-size: var(--fs-base); line-height: 1; outline: 0; } .kg-signup-card .kg-signup-card-input::placeholder { color: var(--text-subtle); } .kg-signup-card .kg-signup-card-input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(15, 43, 236, .18); } /* Override the default button margin inside a form — the form already has the margin above and the button should sit next to the input */ .kg-signup-card .kg-signup-card-form .kg-signup-card-button { margin: 0; } /* Status messages (success / error) are part of Ghost's signup-card markup — they are ALWAYS rendered in the DOM but are meant to stay hidden until the form's state changes. Because we set card_assets: false, Ghost's default hide-by-default rules don't load, so we have to provide them ourselves. Hide by default, then opt-in when Ghost's JS flips the form/card into success or error state. */ .kg-signup-card .kg-signup-card-success, .kg-signup-card .kg-signup-card-error, .kg-signup-card .kg-signup-card-message { display: none; margin: var(--s-sm) 0 0; font-family: var(--ff-body); font-size: var(--fs-sm); opacity: .9; } /* Show success message once the form/card is flagged as successful. Ghost has used a few different markers across versions — we cover class-based (`.success`) and data-attribute-based (`data-state`, `data-members-form-success`) variants to stay forward-compatible. */ .kg-signup-card.success .kg-signup-card-success, .kg-signup-card .success .kg-signup-card-success, .kg-signup-card form.success .kg-signup-card-success, .kg-signup-card[data-state="success"] .kg-signup-card-success, .kg-signup-card form[data-state="success"] .kg-signup-card-success, .kg-signup-card [data-members-form-success]:not([hidden]) { display: block; } /* Same deal for the error message. */ .kg-signup-card.error .kg-signup-card-error, .kg-signup-card .error .kg-signup-card-error, .kg-signup-card form.error .kg-signup-card-error, .kg-signup-card[data-state="error"] .kg-signup-card-error, .kg-signup-card form[data-state="error"] .kg-signup-card-error, .kg-signup-card [data-members-form-error]:not([hidden]) { display: block; } /* Ghost's signup button ships a built-in SVG loading indicator (three dots). We don't want it visible when the form isn't actively submitting, and the brand doesn't call for an inline spinner — hide every loading-state artwork the card might render. */ .kg-signup-card .kg-signup-card-button svg, .kg-signup-card .kg-signup-card-button .loading-container, .kg-signup-card .kg-signup-card-button .kg-signup-card-loading, .kg-signup-card .kg-signup-card-button .kg-signup-card-loading-container, .kg-signup-card .kg-signup-card-loading, .kg-signup-card .kg-signup-card-loading-container { display: none !important; } /* Callout card */ .gh-content .kg-callout-card { display: flex; gap: var(--s-md); padding: var(--s-md) var(--s-lg); border-radius: 0; align-items: flex-start; border-left: 3px solid var(--accent); background: var(--surface-alt); } .gh-content .kg-callout-emoji { font-size: var(--fs-xl); line-height: 1.1; flex: none; } .gh-content .kg-callout-text { font-family: var(--ff-body); font-size: var(--fs-base); line-height: var(--lh-snug); flex: 1; color: var(--text); margin: 0; } .gh-content .kg-callout-card-grey { background: var(--surface-alt); border-left-color: var(--text-subtle); } .gh-content .kg-callout-card-white { background: var(--bg-elevated); border-left-color: var(--border-strong); } .gh-content .kg-callout-card-blue { background: rgba(15, 43, 236, .08); border-left-color: var(--accent); } .gh-content .kg-callout-card-green, .gh-content .kg-callout-card-yellow { background: linear-gradient(180deg, rgba(210,187,135,.55), rgba(210,187,135,.2)); border-left-color: var(--c-dark-sand); } .gh-content .kg-callout-card-accent { background: var(--accent); border-left-color: var(--c-light-sand); } .gh-content .kg-callout-card-accent .kg-callout-text { color: var(--c-light-sand); } .gh-content .kg-callout-card-pink, .gh-content .kg-callout-card-red, .gh-content .kg-callout-card-purple { background: var(--c-navy); border-left-color: var(--c-sand); } .gh-content .kg-callout-card-pink .kg-callout-text, .gh-content .kg-callout-card-red .kg-callout-text, .gh-content .kg-callout-card-purple .kg-callout-text { color: var(--c-light-sand); } /* ---------- Product card (card_assets exclude: Ghost's CSS is disabled) ---------- */ .kg-product-card { margin: var(--s-xl) 0; border: 1px solid var(--border); border-radius: var(--r-lg); background: var(--bg-elevated); overflow: hidden; box-sizing: border-box; } .kg-product-card-container { display: flex; flex-direction: column; padding: var(--s-lg); gap: var(--s-md); box-sizing: border-box; } .kg-product-card-image { width: 100%; height: auto; max-height: 420px; aspect-ratio: 16 / 10; object-fit: cover; display: block; border-radius: var(--r-md); background: var(--gradient-sand); margin: 0; } .kg-product-card-title-container { display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-md); flex-wrap: wrap; } .kg-product-card-title { font-family: var(--ff-display); font-weight: var(--fw-reg); font-size: var(--fs-h3); letter-spacing: var(--ls-tight); line-height: var(--lh-snug); margin: 0; color: var(--text); } .kg-product-card-rating { display: flex; align-items: center; gap: 2px; color: var(--c-dark-sand); flex: none; margin: 0; padding: 0; list-style: none; } .kg-product-card-rating-active { color: var(--accent); } .kg-product-card-rating svg { width: 18px; height: 18px; fill: currentColor; } .kg-product-card-description { font-family: var(--ff-body); font-size: var(--fs-base); color: var(--text-muted); line-height: var(--lh-base); margin: 0; max-width: 60ch; } .kg-product-card-description > p { margin: 0 0 var(--s-sm); } .kg-product-card-description > p:last-child { margin-bottom: 0; } .kg-product-card-button { display: inline-flex; align-items: center; justify-content: center; align-self: flex-start; padding: 14px 24px; border: 0; border-radius: var(--r-pill); background: var(--accent); color: var(--c-light-sand); font-family: var(--ff-body); font-weight: var(--fw-semi); font-size: var(--fs-sm); text-decoration: none; margin: var(--s-xs) 0 0; transition: background var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); cursor: pointer; } .kg-product-card-button:hover { background: var(--accent-hover); transform: translateY(-1px); } .kg-product-card-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* Call-to-action card */ .gh-content .kg-cta-card { padding: var(--s-xl); border-radius: var(--r-lg); margin: var(--s-xl) 0; display: grid; grid-template-columns: 1fr; gap: var(--s-md); } .gh-content .kg-cta-card.kg-cta-has-img { grid-template-columns: 160px 1fr; align-items: center; gap: var(--s-xl); } .gh-content .kg-cta-image-md { aspect-ratio: 1; border-radius: var(--r-md); overflow: hidden; align-self: stretch; background: var(--gradient-sand); } .gh-content .kg-cta-image-md img { width: 100%; height: 100%; object-fit: cover; } .gh-content .kg-cta-members { font-family: var(--ff-body); font-size: var(--fs-xs); font-weight: var(--fw-semi); text-transform: uppercase; letter-spacing: var(--ls-caps); margin: 0; color: var(--accent); } .gh-content .kg-cta-heading { font-family: var(--ff-display); font-weight: var(--fw-reg); font-size: var(--fs-h2); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); margin: 0; color: var(--text); } .gh-content .kg-cta-text { font-family: var(--ff-body); font-size: var(--fs-base); line-height: var(--lh-base); margin: 0; max-width: 60ch; color: var(--text-muted); } .gh-content .kg-cta-button { display: inline-flex; justify-self: start; align-self: flex-start; width: auto; padding: 14px 24px; border-radius: var(--r-pill); font-family: var(--ff-body); font-weight: var(--fw-semi); font-size: var(--fs-sm); text-decoration: none; background: var(--accent); color: var(--c-light-sand); margin-top: var(--s-xs); } .gh-content .kg-cta-content-outer { display: flex; flex-direction: column; gap: var(--s-xs); } .gh-content .kg-cta-bg-grey { background: var(--surface-alt); } .gh-content .kg-cta-bg-white { background: var(--bg-elevated); border: 1px solid var(--border); } .gh-content .kg-cta-bg-blue { background: rgba(15, 43, 236, .08); } .gh-content .kg-cta-bg-green, .gh-content .kg-cta-bg-yellow { background: var(--gradient-sand); } .gh-content .kg-cta-bg-green .kg-cta-heading, .gh-content .kg-cta-bg-green .kg-cta-text, .gh-content .kg-cta-bg-green .kg-cta-members, .gh-content .kg-cta-bg-yellow .kg-cta-heading, .gh-content .kg-cta-bg-yellow .kg-cta-text, .gh-content .kg-cta-bg-yellow .kg-cta-members { color: var(--c-navy); } .gh-content .kg-cta-bg-green .kg-cta-button, .gh-content .kg-cta-bg-yellow .kg-cta-button { background: var(--c-navy); color: var(--c-light-sand); } .gh-content .kg-cta-bg-purple, .gh-content .kg-cta-bg-pink, .gh-content .kg-cta-bg-red { background: var(--c-navy); } .gh-content .kg-cta-bg-purple .kg-cta-heading, .gh-content .kg-cta-bg-pink .kg-cta-heading, .gh-content .kg-cta-bg-red .kg-cta-heading { color: var(--c-light-sand); } .gh-content .kg-cta-bg-purple .kg-cta-text, .gh-content .kg-cta-bg-pink .kg-cta-text, .gh-content .kg-cta-bg-red .kg-cta-text { color: rgba(247, 245, 237, .8); } .gh-content .kg-cta-bg-purple .kg-cta-members, .gh-content .kg-cta-bg-pink .kg-cta-members, .gh-content .kg-cta-bg-red .kg-cta-members { color: var(--c-sand); } .gh-content .kg-cta-bg-purple .kg-cta-button, .gh-content .kg-cta-bg-pink .kg-cta-button, .gh-content .kg-cta-bg-red .kg-cta-button { background: var(--c-sand); color: var(--c-navy); } .gh-content .kg-cta-bg-accent { background: var(--accent); } .gh-content .kg-cta-bg-accent .kg-cta-heading { color: var(--c-light-sand); } .gh-content .kg-cta-bg-accent .kg-cta-text { color: rgba(247, 245, 237, .9); } .gh-content .kg-cta-bg-accent .kg-cta-members { color: var(--c-light-sand); } .gh-content .kg-cta-bg-accent .kg-cta-button { background: var(--c-light-sand); color: var(--c-navy); } /* ---------- Toggle card (authoritative) ---------- */ .kg-toggle-card { margin: var(--s-md) 0; padding: var(--s-md) var(--s-lg); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-elevated); } .kg-toggle-heading { display: flex; justify-content: space-between; align-items: center; gap: var(--s-md); margin: 0; cursor: pointer; } .kg-toggle-heading-text { flex: 1; font-family: var(--ff-display); font-weight: var(--fw-reg); font-size: var(--fs-lg); line-height: var(--lh-snug); letter-spacing: var(--ls-tight); color: var(--text); margin: 0; } .kg-toggle-card-icon { flex-shrink: 0; width: 24px; height: 24px; color: var(--text-muted); transition: transform var(--dur-base) var(--ease); } .kg-toggle-card[data-kg-toggle-state="open"] .kg-toggle-card-icon { transform: rotate(180deg); } .kg-toggle-content { font-family: var(--ff-body); font-size: var(--fs-base); line-height: var(--lh-base); color: var(--text-muted); margin-top: var(--s-md); } .kg-toggle-content > *:first-child { margin-top: 0; } .kg-toggle-content > *:last-child { margin-bottom: 0; } .kg-toggle-card[data-kg-toggle-state="closed"] .kg-toggle-content { display: none; } /* ---------- Embed card (authoritative) ---------- */ .kg-embed-card { display: flex; flex-direction: column; align-items: center; margin: var(--s-xl) 0; } .kg-embed-card iframe, .kg-embed-card object, .kg-embed-card embed { max-width: 100%; border: 0; border-radius: var(--r-md); display: block; } .kg-embed-card .kg-card-caption { margin-top: var(--s-sm); font-family: var(--ff-body); font-size: var(--fs-sm); color: var(--text-subtle); text-align: center; } /* ---------- Video card (authoritative) ---------- */ .kg-video-card { position: relative; margin: var(--s-xl) 0; border-radius: var(--r-md); overflow: hidden; background: var(--c-navy); } .kg-video-container { position: relative; display: block; } .kg-video-card video { display: block; width: 100%; height: auto; max-height: 80vh; object-fit: contain; } .kg-video-overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; background: rgba(0, 4, 90, .35); transition: opacity var(--dur-base) var(--ease); cursor: pointer; } .kg-video-large-play-icon { width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; background: rgba(247, 245, 237, .92); color: var(--c-navy); border-radius: var(--r-pill); box-shadow: var(--sh-2); } .kg-video-large-play-icon svg { width: 28px; height: 28px; } .kg-video-player-container { display: flex; align-items: center; gap: var(--s-sm); padding: var(--s-sm) var(--s-md); background: rgba(0, 4, 90, .6); color: var(--c-light-sand); } /* ---------- Audio card (authoritative) ---------- */ .kg-audio-card { display: flex; align-items: center; gap: var(--s-md); padding: var(--s-md); margin: var(--s-xl) 0; border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-elevated); } .kg-audio-thumbnail { flex-shrink: 0; width: 80px; height: 80px; display: flex; align-items: center; justify-content: center; border-radius: var(--r-sm); overflow: hidden; background: var(--gradient-sand); color: var(--c-navy); } .kg-audio-thumbnail img { width: 100%; height: 100%; object-fit: cover; display: block; } .kg-audio-thumbnail.placeholder svg { width: 40px; height: 40px; } .kg-audio-player-container { flex: 1; display: flex; flex-direction: column; gap: var(--s-2xs); min-width: 0; } .kg-audio-title { font-family: var(--ff-display); font-weight: var(--fw-reg); font-size: var(--fs-lg); line-height: var(--lh-snug); color: var(--text); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kg-audio-player-container audio { width: 100%; } .kg-audio-duration { font-family: var(--ff-body); font-size: var(--fs-xs); color: var(--text-subtle); } /* ---------- File card (authoritative) ---------- */ .kg-file-card { display: block; margin: var(--s-xl) 0; color: var(--text); text-decoration: none; } .kg-file-card a, .kg-file-card-container { display: flex; align-items: center; gap: var(--s-md); padding: var(--s-md); border: 1px solid var(--border); border-radius: var(--r-md); background: var(--bg-elevated); text-decoration: none; color: var(--text); transition: border-color var(--dur-base) var(--ease); } .kg-file-card a:hover, .kg-file-card-container:hover { border-color: var(--accent); } .kg-file-card-contents { flex: 1; display: flex; flex-direction: column; gap: var(--s-2xs); min-width: 0; } .kg-file-card-title { font-family: var(--ff-display); font-weight: var(--fw-reg); font-size: var(--fs-base); line-height: var(--lh-snug); color: var(--text); margin: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .kg-file-card-caption { font-family: var(--ff-body); font-size: var(--fs-sm); line-height: var(--lh-base); color: var(--text-muted); margin: 0; } .kg-file-card-metadata { display: flex; gap: var(--s-sm); font-family: var(--ff-body); font-size: var(--fs-xs); color: var(--text-subtle); text-transform: uppercase; letter-spacing: var(--ls-caps); } .kg-file-card-filename, .kg-file-card-filesize { white-space: nowrap; } .kg-file-card-icon { flex-shrink: 0; width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; color: var(--accent); } .kg-file-card-icon svg { width: 100%; height: 100%; } /* ---------- Button card (authoritative) ---------- */ .kg-button-card { display: flex; margin: var(--s-xl) 0; } .kg-button-card.kg-align-center { justify-content: center; } .kg-button-card.kg-align-left { justify-content: flex-start; } .kg-button-card a.kg-btn, .kg-button-card .kg-btn { display: inline-flex; align-items: center; justify-content: center; padding: 14px 24px; border: 0; border-radius: var(--r-pill); background: var(--accent); color: var(--c-light-sand); font-family: var(--ff-body); font-weight: var(--fw-semi); font-size: var(--fs-sm); text-decoration: none; cursor: pointer; transition: background var(--dur-base) var(--ease), transform var(--dur-base) var(--ease); } .kg-button-card a.kg-btn:hover, .kg-button-card .kg-btn:hover { background: var(--accent-hover); transform: translateY(-1px); } .kg-button-card a.kg-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; } /* ---------- NFT card (authoritative) ---------- */ .kg-nft-card { display: block; margin: var(--s-xl) 0; border: 1px solid var(--border); border-radius: var(--r-lg); overflow: hidden; background: var(--bg-elevated); text-decoration: none; color: var(--text); } .kg-nft-image-container img { width: 100%; height: auto; display: block; } .kg-nft-metadata { padding: var(--s-md) var(--s-lg); } .kg-nft-title { font-family: var(--ff-display); font-weight: var(--fw-reg); font-size: var(--fs-lg); color: var(--text); margin: 0; } .kg-nft-creator { font-family: var(--ff-body); font-size: var(--fs-sm); color: var(--text-muted); margin: var(--s-2xs) 0 0; } /* ---------- Before / after card (authoritative) ---------- */ .kg-before-after-card { position: relative; margin: var(--s-xl) 0; border-radius: var(--r-md); overflow: hidden; user-select: none; } .kg-before-after-card img { display: block; width: 100%; height: auto; } /* ---------- Koenig universal utilities ---------- */ .kg-card { margin: var(--s-xl) 0; } .kg-card-hascaption .kg-card-caption { margin-top: var(--s-sm); font-family: var(--ff-body); font-size: var(--fs-sm); color: var(--text-subtle); text-align: center; } /* ---------- Subscribe / members ---------- */ .gh-subscribe { background: var(--c-navy); color: var(--c-light-sand); padding: var(--s-3xl) var(--s-xl); margin-top: var(--s-3xl); border-radius: var(--r-xl); max-width: calc(var(--page-w) - var(--s-xl) * 2); margin-left: auto; margin-right: auto; } .gh-subscribe h3 { font-family: var(--ff-display); font-weight: var(--fw-reg); color: var(--c-light-sand); font-size: var(--fs-3xl); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); margin-bottom: var(--s-sm); } .gh-subscribe p { color: rgba(247, 245, 237, .8); margin-bottom: var(--s-lg); max-width: 52ch; } .gh-subscribe form { display: flex; gap: var(--s-sm); max-width: 560px; flex-wrap: wrap; } .gh-subscribe .input { background: rgba(247, 245, 237, .08); border-color: rgba(247, 245, 237, .2); color: var(--c-light-sand); } .gh-subscribe .input::placeholder { color: rgba(247, 245, 237, .5); } .gh-subscribe .btn-primary { background: var(--c-light-sand); color: var(--c-navy); } .gh-subscribe .btn-primary:hover { background: #FFFFFF; color: var(--c-navy); } /* ---------- Archive header (tag/author) ---------- */ .gh-archive__header { padding: var(--s-3xl) 0 var(--s-xl); } .gh-archive__title { font-family: var(--ff-display); font-weight: var(--fw-reg); font-size: clamp(var(--fs-h2), 5vw, var(--fs-h1)); letter-spacing: var(--ls-tight); line-height: var(--lh-tight); margin-bottom: var(--s-sm); } .gh-archive__lede { color: var(--text-muted); font-size: var(--fs-lg); max-width: 60ch; } .gh-archive__count { color: var(--text-subtle); font-family: var(--ff-body); font-size: var(--fs-sm); font-weight: var(--fw-med); text-transform: uppercase; letter-spacing: var(--ls-caps); margin-top: var(--s-sm); } .gh-author__avatar { width: 96px; height: 96px; border-radius: 999px; object-fit: cover; margin-bottom: var(--s-md); border: 2px solid var(--highlight); } .gh-author__meta { list-style: none; padding: 0; margin: var(--s-md) 0 0; display: flex; gap: var(--s-md); color: var(--text-subtle); font-size: var(--fs-sm); } /* ---------- Pagination ---------- */ .gh-pagination { display: flex; align-items: center; justify-content: center; gap: var(--s-md); padding: var(--s-2xl) 0; font-family: var(--ff-body); font-weight: var(--fw-med); font-size: var(--fs-sm); letter-spacing: var(--ls-wide); color: var(--text-muted); } /* ---------- Related ---------- */ .gh-related { padding: var(--s-2xl) 0; border-top: 1px solid var(--border); margin-top: var(--s-3xl); } /* ---------- Footer ---------- */ .gh-foot { background: var(--c-navy); color: var(--c-light-sand); margin-top: var(--s-3xl); padding: var(--s-2xl) 0; } .gh-foot__inner { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: var(--s-xl); align-items: start; } .gh-foot .gh-logo { color: var(--c-light-sand); } .gh-foot__tag { color: rgba(247, 245, 237, .7); font-size: var(--fs-sm); margin-top: var(--s-sm); max-width: 40ch; } .gh-foot__nav ul { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s-xs); } .gh-foot__nav a { color: rgba(247, 245, 237, .8); font-size: var(--fs-sm); } .gh-foot__nav a:hover { color: var(--c-sand); } .gh-foot__meta { text-align: right; font-size: var(--fs-xs); color: rgba(247, 245, 237, .6); } .gh-foot__meta a { color: rgba(247, 245, 237, .8); border-bottom: 1px solid currentColor; } @media (max-width: 720px) { .gh-foot__inner { grid-template-columns: 1fr; } .gh-foot__meta { text-align: left; } } /* ---------- Error ---------- */ .gh-error { padding: var(--s-4xl) 0; text-align: center; } .gh-error h1 { font-size: var(--fs-hero); margin-bottom: var(--s-md); } .gh-error p { color: var(--text-muted); margin-bottom: var(--s-lg); } /* ---------- Responsive ---------- */ @media (max-width: 820px) { .gh-head__nav { display: none; } .gh-hero { padding: var(--s-2xl) 0 var(--s-xl); } .gh-post-feed { grid-template-columns: 1fr; } } /* ---------- Accessibility ---------- */ @media (prefers-reduced-motion: reduce) { * { animation-duration: .001ms !important; transition-duration: .001ms !important; } } :focus-visible { outline: none; box-shadow: var(--focus-ring); border-radius: var(--r-sm); } .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } /* ---------- Icons ---------- */ .gh-icon { display: inline-block; vertical-align: -.125em; } .gh-icon--loader { animation: gh-spin 1s linear infinite; } @keyframes gh-spin { to { transform: rotate(360deg); } } /* ---------- Drop cap (post) ---------- */ .gh-content.is-drop-cap > p:first-of-type::first-letter { font-family: var(--ff-display); font-weight: var(--fw-reg); float: left; font-size: 4.4em; line-height: .9; padding: .05em .12em 0 0; color: var(--c-blue-primary); } /* ---------- Search toggle / overlay ---------- */ .gh-head__search { background: transparent; border: 0; padding: 8px; color: inherit; cursor: pointer; border-radius: var(--r-sm); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; } .gh-head__search:hover { background: rgba(0,0,0,.05); } [data-theme="dark"] .gh-head__search:hover { background: rgba(255,255,255,.08); } .gh-search { position: fixed; inset: 0; background: rgba(0,4,90,.86); backdrop-filter: blur(6px); display: flex; align-items: flex-start; justify-content: center; padding: 10vh 24px 24px; z-index: 9000; opacity: 0; pointer-events: none; transition: opacity 200ms ease; } .gh-search.is-open { opacity: 1; pointer-events: auto; } .gh-search__panel { width: min(620px, 100%); background: var(--c-sand); color: var(--c-navy); border-radius: var(--r-lg); box-shadow: var(--shadow-xl); padding: var(--s-lg); position: relative; } .gh-search__panel input[type="search"] { width: 100%; font: inherit; font-size: var(--fs-lg); padding: 14px 16px; border: 1px solid rgba(0,4,90,.15); border-radius: var(--r-md); background: #fff; color: var(--c-navy); } .gh-search__hint { margin-top: var(--s-sm); font-size: var(--fs-sm); color: rgba(0,4,90,.7); } .gh-search__close { position: absolute; top: 10px; right: 10px; background: transparent; border: 0; color: inherit; cursor: pointer; border-radius: var(--r-sm); padding: 6px; font-size: 18px; } .gh-search__close:hover { background: rgba(0,4,90,.08); } body.has-search-open { overflow: hidden; } /* ---------- Lightbox ---------- */ .gh-content img.is-zoomable { cursor: zoom-in; } .gh-lightbox { position: fixed; inset: 0; background: rgba(0,4,90,.95); display: flex; align-items: center; justify-content: center; padding: 4vh 4vw; z-index: 9500; opacity: 0; pointer-events: none; transition: opacity 220ms ease; } .gh-lightbox.is-open { opacity: 1; pointer-events: auto; } .gh-lightbox__stage { margin: 0; max-width: 100%; max-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; } .gh-lightbox__img { max-width: 100%; max-height: 82vh; object-fit: contain; border-radius: 4px; box-shadow: 0 40px 80px rgba(0,0,0,.5); } .gh-lightbox__caption { margin-top: 14px; color: rgba(247,245,237,.85); font-size: var(--fs-sm); max-width: 720px; text-align: center; } .gh-lightbox__close, .gh-lightbox__nav { position: absolute; background: rgba(255,255,255,.1); color: #fff; border: 0; cursor: pointer; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 24px; line-height: 1; transition: background 120ms ease, transform 120ms ease; } .gh-lightbox__close:hover, .gh-lightbox__nav:hover { background: rgba(255,255,255,.2); } .gh-lightbox__close { top: 18px; right: 18px; } .gh-lightbox__nav--prev { left: 18px; top: 50%; transform: translateY(-50%); } .gh-lightbox__nav--next { right: 18px; top: 50%; transform: translateY(-50%); } .gh-lightbox__nav[disabled] { opacity: .2; pointer-events: none; } .gh-lightbox__counter { position: absolute; left: 50%; bottom: 14px; transform: translateX(-50%); color: rgba(247,245,237,.7); font-size: var(--fs-xs); letter-spacing: var(--ls-wide); text-transform: uppercase; } body.has-lightbox { overflow: hidden; } /* ---------- Subscribe form ---------- */ .gh-form { display: grid; grid-template-columns: 1fr auto; gap: var(--s-xs); } .gh-form__btn { position: relative; } .gh-form__state { position: absolute; inset: 0; display: none; align-items: center; justify-content: center; } [data-members-form="loading"] .gh-form__label, [data-members-form="success"] .gh-form__label { visibility: hidden; } [data-members-form="loading"] .gh-form__state--loading { display: flex; } [data-members-form="success"] .gh-form__state--done { display: flex; } .gh-form__error { grid-column: 1 / -1; color: #c92735; font-size: var(--fs-sm); margin: 0; } @media (max-width: 520px) { .gh-form { grid-template-columns: 1fr; } } /* ---------- Comments wrapper ---------- */ .gh-comments { margin-top: var(--s-3xl); } /* ---------- Hide Ghost Portal's floating trigger ---------- */ /* Ghost injects a small floating "subscribe" mail button in the bottom-right of every page. The theme already provides a Subscribe button in the site header and signup cards in content, so the floating trigger is a duplicate. Hide the iframe it lives in. If the Portal signup flow is ever needed from a different entry point, removing these rules (or flipping Portal's "Show Button" off in Admin > Settings > Membership > Portal) will bring it back. */ iframe[title="portal-trigger-frame"], iframe[data-testid="portal-trigger-frame"], iframe#ghost-portal-root[title*="trigger"], #ghost-portal-root > iframe[title*="trigger"] { display: none !important; }