/* Klipptik Blog / Marketing / Legal Stylesheet — public/learn/blog.css * * Standalone CSS for static HTML pages built by scripts/build-blog.mjs. * Used by: /learn/*, /pricing, /about, /faq, /terms, /privacy, /cookies * * Hex values MIRROR the semantic tokens in src/styles/globals.css * (spec 01.17). When you change a token there, mirror the change here. * * Dark theme: driven by `.dark` class on , set by the inline * script in build-blog.mjs (reads localStorage['vb_themePreference'], * same key the SPA uses). * * References: * - docs/B_APP_DEV/01.17_visual_theme_spec.md * - docs/B_APP_DEV/01.17_visual_theme_cheatsheet.md * - docs/B_APP_DEV/01.12_website_seo_spec.md §6.5 */ /* ============================================================ Theme tokens — mirrored from globals.css :root ============================================================ */ :root { /* Surfaces */ --bg-page: #FAFAFB; --bg-app: #FFFFFF; --bg-surface: #F4F4F5; --bg-elevated: #FFFFFF; /* Borders */ --border-subtle: #DEDEE1; --border-default: #D4D4D8; --border-strong: #B4B4B8; /* Text */ --text-primary: #0F0F11; --text-body: #3F3F46; --text-muted: #52525B; --text-subtle: #A1A1AA; --text-inverted: #FFFFFF; /* Brand */ --brand: #0E7A82; --brand-hover: #0B6770; --brand-bold: #1FB6BF; --on-brand-bold: #0F0F11; /* Status accents (spec §2.6, light) */ --accent-success: #15803D; --accent-info: #2563EB; --accent-error: #DC2626; --accent-warning: #C2410C; /* Marketing cream surface (spec §7.1) */ --bg-marketing: #FAFAFA; /* Layout */ --max-width: 720px; --topbar-height: 56px; /* Motion */ --motion-fast: 150ms; --motion-normal: 200ms; --ease-standard: cubic-bezier(0.4, 0, 0.2, 1); } :root.dark, [data-theme="dark"] { --bg-page: #09090B; --bg-app: #101114; --bg-surface: #18191D; --bg-elevated: #202024; --border-subtle: #2A2A30; --border-default: #3A3A40; --border-strong: #52525B; --text-primary: #F4F4F5; --text-body: #D4D4D8; --text-muted: #A1A1AA; --text-subtle: #71717A; --text-inverted: #0F0F11; --brand: #1FB6BF; --brand-hover: #26C9D3; /* Status accents (spec §2.6, dark) */ --accent-success: #22C55E; --accent-info: #3B82F6; --accent-error: #EF4444; --accent-warning: #F97316; } *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; background: var(--bg-app); color: var(--text-primary); } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif; font-size: 16px; line-height: 1.7; transition: background-color var(--motion-normal) var(--ease-standard), color var(--motion-normal) var(--ease-standard); } /* Logo: show light variant by default, dark variant when .dark on . Specificity must beat `.topbar a.logo img { display: block }` below. */ .topbar a.logo img.logo-dark { display: none; } :root.dark .topbar a.logo img.logo-light { display: none; } :root.dark .topbar a.logo img.logo-dark { display: block; } /* ============================================================ Top bar — Klipptik logo (left) + nav + theme toggle + CTA (right) ============================================================ */ .topbar { position: sticky; top: 0; z-index: 10; background: var(--bg-app); border-bottom: 1px solid var(--border-default); } .topbar-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; gap: 1.25rem; height: var(--topbar-height); padding: 0 1.5rem; } .topbar a.logo { display: inline-flex; align-items: center; margin-right: auto; text-decoration: none; } .topbar a.logo img { height: 22px; width: auto; display: block; } .topbar nav { display: flex; align-items: center; gap: 1.25rem; } .topbar nav a { color: var(--text-body); text-decoration: none; font-size: 0.875rem; font-weight: 500; transition: color var(--motion-fast) var(--ease-standard); } .topbar nav a:hover { color: var(--text-primary); } .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 6px; border: 1px solid var(--border-default); background: var(--bg-app); color: var(--text-body); cursor: pointer; padding: 0; transition: background-color var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard); } .theme-toggle:hover { background: var(--bg-surface); color: var(--text-primary); border-color: var(--border-strong); } .theme-toggle svg { width: 16px; height: 16px; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } :root.dark .theme-toggle .icon-sun { display: block; } :root.dark .theme-toggle .icon-moon { display: none; } .cta-button { display: inline-flex; align-items: center; background: var(--brand-bold); color: var(--on-brand-bold); padding: 0.4rem 0.9rem; border-radius: 6px; font-size: 0.875rem; font-weight: 600; text-decoration: none; transition: filter var(--motion-fast) var(--ease-standard); } .cta-button:hover { filter: brightness(0.95); } /* ============================================================ Main content ============================================================ */ main { max-width: var(--max-width); margin: 0 auto; padding: 2.5rem 1.5rem 4rem; } main h1 { font-family: 'Mulish', 'Inter', sans-serif; font-size: 2rem; font-weight: 800; line-height: 1.25; margin: 0 0 0.5rem; color: var(--text-primary); } main .lead { font-size: 1.1rem; color: var(--text-body); margin-bottom: 2.5rem; } /* ── Article ── */ article h1 { font-family: 'Mulish', 'Inter', sans-serif; font-size: 2rem; font-weight: 800; line-height: 1.3; margin: 0 0 0.5rem; color: var(--text-primary); } article .meta { font-size: 0.875rem; color: var(--text-muted); margin-bottom: 2rem; } article h2 { font-family: 'Mulish', 'Inter', sans-serif; font-size: 1.4rem; font-weight: 700; margin-top: 2rem; color: var(--text-primary); } article h3 { font-size: 1.15rem; font-weight: 600; margin-top: 1.5rem; color: var(--text-primary); } article p { margin: 1rem 0; color: var(--text-body); } article a { color: var(--brand); text-decoration: underline; } article a:hover { color: var(--brand-hover); } article img { max-width: 100%; height: auto; border-radius: 8px; margin: 1.5rem 0; display: block; } article ul, article ol { padding-left: 1.5rem; margin: 1rem 0; } article li { margin: 0.4rem 0; color: var(--text-body); } article code { font-family: 'JetBrains Mono', 'SF Mono', 'Fira Code', monospace; font-size: 0.875em; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 4px; padding: 0.15em 0.4em; color: var(--text-primary); } article pre { background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 8px; padding: 1.25rem; overflow-x: auto; margin: 1.5rem 0; } article pre code { background: none; border: none; padding: 0; font-size: 0.875rem; } article blockquote { border-left: 3px solid var(--brand-bold); margin: 1.5rem 0; padding: 0.5rem 0 0.5rem 1.25rem; color: var(--text-muted); font-style: italic; } article table { width: 100%; border-collapse: collapse; margin: 1rem 0; font-size: 0.9rem; } article th { text-align: left; font-weight: 600; padding: 0.6rem; border-bottom: 2px solid var(--border-strong); color: var(--text-primary); } article td { padding: 0.6rem; border-bottom: 1px solid var(--border-default); color: var(--text-body); } article strong { color: var(--text-primary); font-weight: 600; } article hr { border: 0; border-top: 1px solid var(--border-default); margin: 2rem 0; } /* Anchor jumps from the TOC must clear the sticky top bar. */ article h2, article h3 { scroll-margin-top: calc(var(--topbar-height) + 1rem); } /* ============================================================ Article layout — sticky TOC rail + reading column ============================================================ */ .article-layout { max-width: 1120px; margin: 0 auto; padding: 2.5rem 1.5rem 4rem; display: grid; grid-template-columns: 1fr; gap: 2.5rem; } @media (min-width: 1080px) { .article-layout { grid-template-columns: 240px minmax(0, 1fr); align-items: start; } } /* Override the generic
centering when it sits inside the grid. */ .article-layout > main.article-main { max-width: var(--max-width); width: 100%; margin: 0; padding: 0; } /* ── Table of contents ── */ .toc-rail { display: none; } @media (min-width: 1080px) { .toc-rail { display: block; position: sticky; top: calc(var(--topbar-height) + 1.5rem); align-self: start; max-height: calc(100vh - var(--topbar-height) - 3rem); overflow-y: auto; } } .toc-title { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.07em; font-weight: 700; color: var(--text-muted); margin: 0 0 0.75rem; } .toc ul { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--border-default); } .toc li { margin: 0; } .toc li a { display: block; padding: 0.3rem 0 0.3rem 0.85rem; margin-left: -1px; border-left: 2px solid transparent; color: var(--text-muted); text-decoration: none; font-size: 0.85rem; line-height: 1.4; transition: color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard); } .toc li.toc-l3 a { padding-left: 1.7rem; font-size: 0.8rem; } .toc li a:hover { color: var(--text-primary); } .toc li a.active { color: var(--brand); border-left-color: var(--brand); font-weight: 600; } /* ── Breadcrumb ── */ .breadcrumb { display: flex; align-items: center; gap: 0.4rem; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 1.25rem; } .breadcrumb a { color: var(--text-muted); text-decoration: none; } .breadcrumb a:hover { color: var(--text-primary); } .breadcrumb span:last-child { color: var(--text-body); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 60ch; } /* ── Eyebrow (category) ── */ .eyebrow { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: var(--brand); margin: 0 0 0.75rem; } /* ── Hero + figures ── */ .article-hero { margin: 0.5rem 0 2rem; } .article-hero img { width: 100%; border-radius: 12px; margin: 0; border: 1px solid var(--border-subtle); } .article-figure { margin: 1.75rem 0; } .article-figure img { margin: 0; } .article-figure figcaption, article figcaption { margin-top: 0.6rem; font-size: 0.85rem; color: var(--text-muted); font-style: italic; text-align: center; } /* ── Tags ── */ .article-tags { margin: 2.5rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--border-default); display: flex; flex-direction: column; gap: 0.7rem; } .article-tags-label { font-size: 0.9rem; font-weight: 700; color: var(--text-primary); } .tag-chips { display: flex; flex-wrap: wrap; gap: 0.5rem; } .tag-chip { font-size: 0.78rem; font-weight: 600; padding: 0.4rem 0.85rem; border-radius: 999px; background: var(--brand-muted); color: var(--brand); border: 1px solid var(--brand); line-height: 1; } /* Clickable topic chips (link to /learn/tag/ hubs). Non-hub tags stay as plain chips with the base style above. */ a.tag-chip { text-decoration: none; transition: background var(--motion-fast) var(--ease-standard), color var(--motion-fast) var(--ease-standard); } a.tag-chip:hover { background: var(--brand); color: var(--text-inverted); border-color: var(--brand-hover); } /* ── Browse by topic (blog index) ── */ .topic-cloud { margin: 3rem 0 0; padding-top: 2rem; border-top: 1px solid var(--border-default); } .topic-cloud h2 { font-size: 1.1rem; margin: 0 0 1rem; color: var(--text-primary); } /* ── Share row ── */ .article-share { margin: 2rem 0 0; padding-top: 1.5rem; border-top: 1px solid var(--border-default); } .article-share-label { display: block; font-size: 0.9rem; font-weight: 700; color: var(--text-primary); margin-bottom: 0.85rem; } .share-btns { display: flex; flex-wrap: wrap; gap: 0.5rem; } .share-btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.9rem; font-size: 0.8rem; font-weight: 600; font-family: inherit; line-height: 1; border-radius: 8px; border: 1px solid var(--border-default); background: var(--bg-surface); color: var(--text-body); text-decoration: none; cursor: pointer; transition: color var(--motion-fast) var(--ease-standard), border-color var(--motion-fast) var(--ease-standard), background var(--motion-fast) var(--ease-standard); } .share-btn svg { width: 16px; height: 16px; flex-shrink: 0; } /* Branded platform colours. These are social-attribution colours (platform- specific marks, analogous to 01.17 platform tokens) — the one place raw brand hex is intentional in the blog stylesheet. Icons carry the colour at rest; hover fills the whole button and flips icon + label to white. */ .share-btn-x svg { color: var(--text-primary); } .share-btn-linkedin svg { color: #0a66c2; } .share-btn-facebook svg { color: #1877f2; } .share-btn-email svg { color: var(--brand); } .share-copy svg { color: var(--brand); } .share-btn:hover { color: #fff; } .share-btn:hover svg { color: #fff; } .share-btn-x:hover { background: #0f1419; border-color: #0f1419; } .share-btn-linkedin:hover { background: #0a66c2; border-color: #0a66c2; } .share-btn-facebook:hover { background: #1877f2; border-color: #1877f2; } .share-btn-email:hover, .share-copy:hover { background: var(--brand); border-color: var(--brand); } .share-btn.copied, .share-btn.copied:hover { color: #fff; background: var(--accent-success); border-color: var(--accent-success); } .share-btn.copied svg { color: #fff; } /* ── Related posts ── */ .related { margin-top: 3.5rem; padding-top: 2rem; border-top: 1px solid var(--border-default); } .related h2 { font-family: 'Mulish', 'Inter', sans-serif; font-size: 1.3rem; font-weight: 700; margin: 0 0 1.25rem; color: var(--text-primary); } .related-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 640px) { .related-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .related-card { display: flex; flex-direction: column; border: 1px solid var(--border-default); border-radius: 10px; overflow: hidden; text-decoration: none; background: var(--bg-surface); transition: border-color var(--motion-fast) var(--ease-standard); } .related-card:hover { border-color: var(--brand); } .related-card img, .related-thumb-placeholder { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; } .related-thumb-placeholder { background: linear-gradient(135deg, var(--brand-bold), var(--brand-hover)); } .related-card-body { display: flex; flex-direction: column; flex: 1; gap: 0.35rem; padding: 0.9rem; } .related-card-kicker { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; color: var(--brand); } .related-card-title { font-size: 0.95rem; font-weight: 600; color: var(--text-primary); line-height: 1.35; } .related-card-excerpt { font-size: 0.8rem; color: var(--text-muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .related-card-meta { margin-top: auto; padding-top: 0.15rem; font-size: 0.72rem; color: var(--text-subtle); } /* ── Pricing plan cards (built from build-blog.mjs buildPricingCards) ── */ .pricing-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; margin: 1.5rem 0 0.75rem; } .pricing-card { position: relative; display: flex; flex-direction: column; padding: 1.25rem; border: 2px solid var(--border-default); border-radius: 12px; background: var(--bg-elevated); transition: border-color var(--motion-fast) var(--ease-standard); } .pricing-card.recommended { border-color: var(--brand); } .pricing-card:hover { border-color: var(--brand); } .pricing-card-badge { position: absolute; top: -0.75rem; left: 1rem; background: var(--brand-bold); color: var(--on-brand-bold); font-size: 0.7rem; font-weight: 600; padding: 0.2rem 0.65rem; border-radius: 999px; } .pricing-card-head { display: flex; align-items: baseline; justify-content: space-between; gap: 0.5rem; } .pricing-card-head h3 { font-family: 'Mulish', 'Inter', sans-serif; font-size: 1.05rem; font-weight: 700; color: var(--text-primary); margin: 0; } .pricing-card-amount { font-size: 1.6rem; font-weight: 700; color: var(--text-primary); } .pricing-card-period { font-size: 0.85rem; color: var(--text-muted); } .pricing-card-savings { text-align: right; font-size: 0.72rem; color: var(--text-muted); margin: 0.1rem 0 0; } .pricing-card-tagline { margin: 0.6rem 0 0; font-size: 0.875rem; font-weight: 500; color: var(--text-body); } .pricing-card-desc { margin: 0.4rem 0 0; font-size: 0.85rem; color: var(--text-body); line-height: 1.55; } .pricing-card-features { list-style: none; padding: 0; margin: 0.85rem 0 1.25rem; display: flex; flex-direction: column; gap: 0.4rem; } .pricing-card-features li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.85rem; color: var(--text-body); line-height: 1.45; } .pricing-card-check { color: var(--accent-success); flex-shrink: 0; margin-top: 0.05rem; } .pricing-card-cta { margin-top: auto; display: block; text-align: center; padding: 0.65rem 1rem; font-size: 0.875rem; font-weight: 600; border-radius: 8px; border: 1px solid var(--border-default); color: var(--text-body); background: transparent; text-decoration: none; transition: background-color var(--motion-fast) var(--ease-standard), filter var(--motion-fast) var(--ease-standard); } .pricing-card-cta:hover { background: var(--bg-surface); } .pricing-card-cta.primary { background: var(--brand-bold); color: var(--on-brand-bold); border-color: var(--brand-bold); } .pricing-card-cta.primary:hover { background: var(--brand-bold); filter: brightness(0.95); } .pricing-cards-note { text-align: center; font-size: 0.78rem; color: var(--text-muted); margin: 0.25rem 0 1.5rem; } @media (max-width: 900px) { .pricing-cards { grid-template-columns: 1fr; } } /* ── FAQ collapsibles (built from build-blog.mjs transformFaqHtml) ── */ .faq-item { border: 1px solid var(--border-default); border-radius: 8px; background: var(--bg-elevated); margin: 0.5rem 0; overflow: hidden; transition: border-color var(--motion-fast) var(--ease-standard); } .faq-item:hover { border-color: var(--border-strong); } .faq-item summary { cursor: pointer; padding: 0.875rem 1.125rem; font-weight: 600; font-size: 0.95rem; color: var(--text-primary); list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } /* Hide default disclosure triangle across browsers */ .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::marker { content: ''; } /* Custom chevron */ .faq-item summary::after { content: '▾'; color: var(--text-muted); font-size: 0.85rem; transition: transform var(--motion-fast) var(--ease-standard); flex-shrink: 0; } .faq-item[open] summary::after { transform: rotate(180deg); } .faq-item .faq-answer { padding: 0.25rem 1rem 1rem; border-top: 1px solid var(--border-subtle); font-size: 0.9rem; color: var(--text-body); line-height: 1.6; } /* ============================================================ Blog index — article cards ============================================================ */ .blog-index { max-width: 1120px; } .article-list { display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 640px) { .article-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1000px) { .article-list { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .article-card { display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: 12px; overflow: hidden; transition: border-color var(--motion-fast) var(--ease-standard); } .article-card:hover { border-color: var(--brand); } .article-card img, .article-card-placeholder { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; display: block; } .article-card-placeholder { background: linear-gradient(135deg, var(--brand-bold), var(--brand-hover)); } .article-card-body { display: flex; flex-direction: column; flex: 1; padding: 1.25rem; } .article-card h2 { font-size: 1.1rem; line-height: 1.3; margin: 0 0 0.35rem; } .article-card h2 a { color: var(--text-primary); text-decoration: none; } .article-card h2 a:hover { color: var(--brand); } .article-card .meta { font-size: 0.78rem; color: var(--text-muted); margin: 0 0 0.6rem; } .article-card p { margin: 0 0 0.75rem; font-size: 0.9rem; color: var(--text-body); line-height: 1.6; } .article-card-more { margin-top: auto; font-size: 0.85rem; color: var(--brand); text-decoration: none; font-weight: 600; } .article-card-more:hover { text-decoration: underline; } /* ============================================================ Footer ============================================================ */ footer { border-top: 1px solid var(--border-default); background: var(--bg-page); padding: 2.5rem 1.5rem; margin-top: 4rem; text-align: center; } footer .cta-section { max-width: var(--max-width); margin: 0 auto 1.5rem; } footer .cta-section h2 { font-family: 'Mulish', 'Inter', sans-serif; color: var(--text-primary); font-size: 1.3rem; margin: 0 0 0.5rem; } footer .cta-section p { color: var(--text-body); font-size: 0.9rem; margin: 0 0 1rem; } footer nav { max-width: var(--max-width); margin: 0 auto; } footer nav a { color: var(--text-muted); text-decoration: none; font-size: 0.875rem; margin: 0 0.25rem; } footer nav a:hover { color: var(--text-primary); } footer .copyright { max-width: var(--max-width); margin: 1rem auto 0; font-size: 0.8rem; color: var(--text-subtle); } /* ============================================================ Responsive ============================================================ */ @media (max-width: 640px) { main { padding: 1.5rem 1rem 3rem; } main h1, article h1 { font-size: 1.6rem; } .topbar-inner { gap: 0.75rem; padding: 0 1rem; } .topbar nav { gap: 0.9rem; } .topbar nav a.hide-mobile { display: none; } .topbar a.cta-button.hide-mobile { display: none; } }