/* ========================================================================== Sluicio — theme styles Built to "Sluicio Marketing Website — Design Handoff Specification" v1.0. Design tokens are CSS custom properties; light is default, dark via [data-theme="dark"] on . ========================================================================== */ /* ---------------------------------------------------------------------------- 1. Design tokens ---------------------------------------------------------------------------- */ :root { /* Surfaces */ --surface: #FAFAF7; --surface-2: #FFFFFF; --surface-3: #F1F1EC; /* Text */ --ink: #0F172A; --ink-2: #334155; --muted: #64748B; /* Borders */ --border: #E5E7EB; --border-strong: #CBD5E1; /* Primary — sluice azure */ --primary: #0E6E9E; --primary-hover: #0B587F; --primary-soft: #D4EAF7; --primary-ink: #0A4A6B; --on-primary: #FFFFFF; /* Status */ --ok: #15803D; --ok-soft: #DCFCE7; --ok-ink: #14532D; --warn: #B45309; --warn-soft: #FEF3C7; --warn-ink: #78350F; --err: #B91C1C; --err-soft: #FEE2E2; --err-ink: #7F1D1D; --info: #475569; --info-soft: #E2E8F0; /* Effects */ --shadow-sm: 0 1px 2px rgba(15, 23, 42, .06); --shadow: 0 4px 12px rgba(15, 23, 42, .08); --shadow-preview: 0 1px 2px rgba(15, 23, 42, .04), 0 20px 60px -20px rgba(15, 23, 42, .15), 0 40px 100px -40px rgba(14, 110, 158, .12); --shadow-art: 0 1px 2px rgba(15, 23, 42, .04), 0 20px 60px -20px rgba(15, 23, 42, .15); --focus: 0 0 0 3px rgba(14, 110, 158, .35); /* Fonts */ --font-ui: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; /* Layout */ --wrap: 1200px; --wrap-pad: 32px; --section-pad: 96px; } [data-theme="dark"] { --surface: #0B1220; --surface-2: #111827; --surface-3: #1F2937; --border: #1F2937; --border-strong: #334155; --ink: #E2E8F0; --ink-2: #CBD5E1; --muted: #94A3B8; --primary: #38B6E0; --primary-hover: #7FD3F0; --primary-soft: #08283A; --primary-ink: #AEE0F4; --on-primary: #04222F; --shadow-preview: 0 1px 2px rgba(0, 0, 0, .4), 0 20px 60px -20px rgba(0, 0, 0, .6), 0 40px 100px -40px rgba(56, 182, 224, .15); --shadow-art: 0 1px 2px rgba(0, 0, 0, .4), 0 20px 60px -20px rgba(0, 0, 0, .55); --focus: 0 0 0 3px rgba(56, 182, 224, .35); } /* ---------------------------------------------------------------------------- 2. Reset & base ---------------------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; scroll-padding-top: 84px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; font-family: var(--font-ui); font-size: 16px; line-height: 1.5; color: var(--ink); background: var(--surface); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; font-feature-settings: "cv11", "ss01"; } h1, h2, h3, h4, p { margin: 0; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } button { font-family: inherit; } ul { margin: 0; padding: 0; list-style: none; } :focus-visible { outline: none; box-shadow: var(--focus); border-radius: 8px; } /* Accessibility helpers */ .screen-reader-text { position: absolute !important; clip: rect(1px, 1px, 1px, 1px); width: 1px; height: 1px; overflow: hidden; word-wrap: normal !important; } .skip-link { position: absolute; left: -999px; top: 8px; background: var(--primary); color: var(--on-primary); padding: 10px 16px; border-radius: 8px; z-index: 200; } .skip-link:focus { left: 8px; } /* ---------------------------------------------------------------------------- 3. Layout helpers ---------------------------------------------------------------------------- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--wrap-pad); } .section { padding-block: var(--section-pad); } .section--tight { padding-block: 64px; } .section-head { max-width: 720px; margin-bottom: 48px; } .section-head .label { margin-bottom: 14px; } .section-head h2 { margin-bottom: 16px; } .section-head .sub { font-size: 18px; color: var(--ink-2); line-height: 1.55; } /* ---------------------------------------------------------------------------- 4. Typography utilities ---------------------------------------------------------------------------- */ .eyebrow, .label { font-size: 12px; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--primary); } .label { color: var(--muted); } h1.hero-title { font-size: clamp(40px, 5.6vw, 68px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.02; } h2 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.05; } h3 { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1; } .accent { color: var(--primary); } .mono { font-family: var(--font-mono); } /* ---------------------------------------------------------------------------- 5. Buttons ---------------------------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-ui); font-size: 14px; font-weight: 600; line-height: 1; padding: 11px 16px; border-radius: 10px; border: 1px solid transparent; cursor: pointer; transition: background-color .15s ease, border-color .15s ease, color .15s ease, transform .05s ease; white-space: nowrap; } .btn:active { transform: translateY(1px); } .btn--primary { background: var(--primary); color: var(--on-primary); } .btn--primary:hover { background: var(--primary-hover); } .btn--ghost { background: transparent; color: var(--ink-2); } .btn--ghost:hover { background: var(--surface-3); color: var(--ink); } .btn--outline { background: transparent; color: var(--ink); border-color: var(--border-strong); } .btn--outline:hover { background: var(--surface-3); } .btn--lg { font-size: 15px; padding: 14px 22px; border-radius: 12px; } /* ---------------------------------------------------------------------------- 6. Sticky navigation ---------------------------------------------------------------------------- */ .site-nav { position: sticky; top: 0; z-index: 100; height: 64px; border-bottom: 1px solid var(--border); background: color-mix(in oklab, var(--surface) 85%, transparent); -webkit-backdrop-filter: blur(10px) saturate(140%); backdrop-filter: blur(10px) saturate(140%); } /* Pre-computed fallback for browsers without color-mix */ @supports not (background: color-mix(in oklab, red, blue)) { .site-nav { background: rgba(250, 250, 247, .9); } [data-theme="dark"] .site-nav { background: rgba(11, 18, 32, .9); } } /* When logged in, WordPress renders a fixed admin bar at the top of the viewport (32px on desktop, 46px on narrow screens). Offset the sticky nav by that height so the bar doesn't clip its upper half. */ .admin-bar .site-nav { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .site-nav { top: 46px; } } .site-nav .wrap { height: 100%; display: flex; align-items: center; gap: 24px; } .brand { display: inline-flex; align-items: center; gap: 10px; color: var(--ink); } .brand .mark { width: 26px; height: 26px; color: var(--primary); flex: none; } .brand .wordmark { font-size: 17px; font-weight: 700; letter-spacing: -0.015em; } .nav-links { display: flex; align-items: center; gap: 26px; margin-inline: auto; } .nav-links a { font-size: 14px; color: var(--ink-2); transition: color .15s ease; } .nav-links a:hover { color: var(--ink); } .nav-actions { display: flex; align-items: center; gap: 10px; } .nav-toggle { display: none; margin-left: auto; width: 40px; height: 40px; align-items: center; justify-content: center; background: transparent; border: 1px solid var(--border); border-radius: 10px; color: var(--ink); cursor: pointer; } .nav-toggle svg { width: 20px; height: 20px; } /* Mobile drawer */ .nav-drawer { display: none; border-bottom: 1px solid var(--border); background: var(--surface-2); } .nav-drawer.open { display: block; } .nav-drawer .wrap { padding-block: 16px; } .nav-drawer ul { display: flex; flex-direction: column; gap: 4px; } .nav-drawer a { display: block; padding: 12px 8px; font-size: 15px; color: var(--ink-2); border-radius: 8px; } .nav-drawer a:hover { background: var(--surface-3); color: var(--ink); } .nav-drawer .nav-actions { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--border); } .nav-drawer .nav-actions .btn { flex: 1; } /* ---------------------------------------------------------------------------- 7. Shared "preview" chrome (dashboards / search / trace art) ---------------------------------------------------------------------------- */ .preview { background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow-preview); overflow: hidden; } .preview-chrome { display: flex; align-items: center; gap: 12px; height: 36px; padding-inline: 14px; border-bottom: 1px solid var(--border); background: var(--surface); } .preview-dots { display: flex; gap: 6px; } .preview-dots span { width: 10px; height: 10px; border-radius: 999px; background: var(--surface-3); } .preview-url { font-family: var(--font-mono); font-size: 12px; color: var(--muted); } .preview-body { padding: 22px; } /* KPI cards */ .kpi-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .kpi { background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 12px; } .kpi .kpi-label { font-size: 11px; font-weight: 500; color: var(--muted); margin-bottom: 6px; } .kpi .kpi-value { font-size: 22px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.05; } .kpi .kpi-delta { font-size: 11px; margin-top: 4px; } .kpi-delta.up { color: var(--ok); } .kpi-delta.down { color: var(--err); } .kpi-delta.flat { color: var(--muted); } /* ---------------------------------------------------------------------------- 8. Status badges ---------------------------------------------------------------------------- */ .badge { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.02em; padding: 3px 9px; border-radius: 999px; white-space: nowrap; } .badge::before { content: ""; width: 6px; height: 6px; border-radius: 999px; background: currentColor; } .badge.ok { background: var(--ok-soft); color: var(--ok-ink); } .badge.warn { background: var(--warn-soft); color: var(--warn-ink); } .badge.err { background: var(--err-soft); color: var(--err-ink); } .badge.info { background: var(--info-soft); color: var(--info); } .badge.live { background: var(--primary-soft); color: var(--primary-ink); } .badge.live::before { background: var(--ok); animation: pulse 1.8s ease-in-out infinite; } @keyframes pulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } } @media (prefers-reduced-motion: reduce) { .badge.live::before { animation: none; } } /* ---------------------------------------------------------------------------- 9. Hero ---------------------------------------------------------------------------- */ .hero { padding-top: 88px; padding-bottom: 56px; } .hero-grid { display: grid; grid-template-columns: 1fr 1.05fr; gap: 72px; align-items: center; } .hero-copy .eyebrow { margin-bottom: 18px; } .hero-copy .hero-title { margin-bottom: 22px; } .hero-copy .hero-sub { font-size: 19px; color: var(--ink-2); line-height: 1.5; max-width: 520px; margin-bottom: 28px; } .hero-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-bottom: 18px; } .hero-reassure { font-size: 13px; color: var(--muted); } /* Hero dashboard table */ .dash-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; } .dash-title { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; } .dash-crumbs { font-size: 12.5px; color: var(--muted); margin-top: 3px; } .dash-table { margin-top: 16px; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; } .dash-row { display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 12px; padding: 11px 14px; border-bottom: 1px solid var(--border); font-size: 13px; } .dash-row:last-child { border-bottom: 0; } .dash-row:nth-child(even) { background: var(--surface-3); } .dash-row .name { font-weight: 500; color: var(--ink); } .dash-row .note { font-size: 12px; color: var(--muted); } .dash-row.row-err { box-shadow: inset 3px 0 0 0 var(--err); } .dash-row.row-warn { box-shadow: inset 3px 0 0 0 var(--warn); } .spark { width: 60px; height: 18px; color: var(--muted); } .row-err .spark { color: var(--err); } .row-warn .spark { color: var(--warn); } /* ---------------------------------------------------------------------------- 10. Stat strip ---------------------------------------------------------------------------- */ .stats-section { padding-top: 0; padding-bottom: var(--section-pad); } .stat-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 28px 32px; } .stat .stat-value { font-size: 30px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; } .stat .stat-label { font-size: 12px; color: var(--muted); text-transform: uppercase; letter-spacing: 0.1em; margin-top: 8px; } /* ---------------------------------------------------------------------------- 11. Features ---------------------------------------------------------------------------- */ .feat { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 72px; align-items: center; margin-bottom: 96px; } .feat:last-child { margin-bottom: 0; } .feat.reverse { grid-template-columns: 1.15fr 0.85fr; } .feat.reverse .feat-art { order: -1; } .feat-copy .eyebrow { margin-bottom: 16px; } .feat-copy h3 { margin-bottom: 16px; } .feat-copy p { font-size: 16px; color: var(--ink-2); max-width: 460px; margin-bottom: 20px; } .feat-list { display: grid; gap: 12px; } .feat-list li { position: relative; padding-left: 22px; font-size: 15px; color: var(--ink-2); line-height: 1.5; } .feat-list li::before { content: ""; position: absolute; left: 0; top: 10px; width: 10px; height: 2px; border-radius: 2px; background: var(--primary); } .feat-list strong { color: var(--ink); font-weight: 600; } /* Feature art frame (smaller-scale preview) */ .feat-art { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-art); overflow: hidden; } .feat-art .preview-chrome { height: 32px; } .feat-art-body { padding: 18px 20px; } /* Feature 1 — overview mini dashboard */ .mini-table { width: 100%; border-collapse: collapse; margin-top: 14px; font-size: 13px; } .mini-table th { text-align: left; font-size: 11px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); padding: 8px 10px; border-bottom: 1px solid var(--border); } .mini-table th:not(:first-child), .mini-table td:not(:first-child) { text-align: right; } .mini-table td { padding: 10px; border-bottom: 1px solid var(--border); } .mini-table tr:last-child td { border-bottom: 0; } .mini-table .mono { font-family: var(--font-mono); color: var(--ink-2); } /* Feature 2 — message search */ .search-field { display: flex; align-items: center; gap: 10px; height: 38px; padding: 0 12px; background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; box-shadow: var(--focus); } .search-field svg { width: 16px; height: 16px; color: var(--muted); flex: none; } .search-field .query { font-family: var(--font-mono); font-size: 13px; color: var(--ink-2); } .search-field .query mark { background: var(--primary-soft); color: var(--primary-ink); padding: 1px 4px; border-radius: 4px; font-weight: 600; } .chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; } .chip { font-size: 12px; padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--ink-2); background: var(--surface); } .chip.active { background: var(--primary-soft); color: var(--primary-ink); border-color: transparent; } .chip.add { color: var(--primary); border-style: dashed; } .result-list { display: grid; gap: 10px; margin-top: 16px; } .result { display: grid; gap: 4px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); } .result-top { display: flex; align-items: center; gap: 10px; } .result-id { font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); font-weight: 500; } .result-route { font-size: 12.5px; color: var(--muted); } .result-route mark { background: var(--primary-soft); color: var(--primary-ink); padding: 0 3px; border-radius: 4px; } /* Feature 3 — end-to-end trace */ .trace-flow { position: relative; display: grid; grid-template-columns: repeat(5, 1fr); gap: 0; padding: 8px 0 4px; } .trace-flow::before { content: ""; position: absolute; top: 30px; left: 6%; right: 6%; height: 2px; background: var(--border); z-index: 0; } .trace-node { position: relative; z-index: 1; display: grid; justify-items: center; gap: 6px; } .trace-node .glyph { width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 12px; background: var(--ok-soft); border: 1px solid var(--ok); color: var(--ok-ink); font-weight: 700; font-size: 15px; } .trace-node.fail .glyph { background: var(--err-soft); border-color: var(--err); color: var(--err-ink); } .trace-node .tname { font-size: 11.5px; font-weight: 600; color: var(--ink); text-align: center; } .trace-node .tdur { font-family: var(--font-mono); font-size: 10.5px; color: var(--muted); } .trace-node.fail .tdur { color: var(--err); } .trace-timeline { margin-top: 18px; padding: 14px 16px; border-radius: 10px; background: var(--surface); border: 1px solid var(--border); font-family: var(--font-mono); font-size: 12px; line-height: 1.9; color: var(--ink-2); } .trace-timeline .t { color: var(--muted); } .trace-timeline .g-ok { color: var(--ok); } .trace-timeline .g-warn { color: var(--warn); } .trace-timeline .g-err { color: var(--err); } .trace-timeline strong { color: var(--ink); font-weight: 600; } /* ---------------------------------------------------------------------------- 12. Integrations grid ---------------------------------------------------------------------------- */ .intg-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .intg { background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 18px; transition: border-color .15s ease, transform .15s ease; } .intg:hover { border-color: var(--border-strong); transform: translateY(-2px); } .intg-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; background: var(--surface-3); border: 1px solid var(--border); border-radius: 8px; margin-bottom: 8px; } .intg-icon svg { width: 16px; height: 16px; color: var(--primary); } .intg .intg-name { font-size: 14px; font-weight: 600; } .intg .intg-desc { font-size: 12.5px; color: var(--muted); line-height: 1.45; margin-top: 4px; } /* ---------------------------------------------------------------------------- 13. Personas ---------------------------------------------------------------------------- */ .persona-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px; } .persona { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 28px; } .persona h4 { font-size: 12px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .persona .quote { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; line-height: 1.35; margin-bottom: 12px; } .persona p { font-size: 14px; color: var(--ink-2); line-height: 1.55; } /* ---------------------------------------------------------------------------- 14. Testimonial ---------------------------------------------------------------------------- */ .testimonial { background: var(--surface-2); border: 1px solid var(--border); border-radius: 18px; padding: 56px 64px; } .testimonial blockquote { margin: 0; font-size: clamp(22px, 2.4vw, 30px); font-weight: 500; letter-spacing: -0.015em; line-height: 1.3; } .testimonial blockquote::before { content: "\201C"; color: var(--primary); } .testimonial blockquote::after { content: "\201D"; color: var(--primary); } .testimonial .attribution { display: flex; align-items: center; gap: 14px; margin-top: 28px; } .testimonial .avatar { width: 40px; height: 40px; border-radius: 999px; background: var(--primary-soft); color: var(--primary-ink); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 14px; flex: none; } .testimonial .who .name { font-weight: 700; color: var(--ink); font-size: 15px; } .testimonial .who .role { color: var(--muted); font-size: 14px; } /* ---------------------------------------------------------------------------- 15. CTA panel ---------------------------------------------------------------------------- */ .cta-panel { position: relative; overflow: hidden; background: var(--ink); color: #FFFFFF; border-radius: 24px; padding: 72px 56px; } [data-theme="dark"] .cta-panel { background: #000810; } .cta-panel::before { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(56, 182, 224, .22), transparent 45%), radial-gradient(circle at 80% 80%, rgba(14, 110, 158, .25), transparent 45%); pointer-events: none; } .cta-panel > * { position: relative; z-index: 1; } .cta-panel .eyebrow { color: #7FD3F0; margin-bottom: 16px; } .cta-panel h2 { font-size: clamp(32px, 4.5vw, 56px); max-width: 720px; margin-bottom: 28px; } .cta-panel h2 .accent { color: #7FD3F0; } .cta-actions { display: flex; flex-wrap: wrap; gap: 12px; } .cta-actions .btn--primary { background: #38B6E0; color: #04222F; } .cta-actions .btn--primary:hover { background: #7FD3F0; } .cta-actions .btn--outline { color: #FFFFFF; border-color: rgba(255, 255, 255, .3); } .cta-actions .btn--outline:hover { background: rgba(255, 255, 255, .08); } /* ---------------------------------------------------------------------------- 16. Footer ---------------------------------------------------------------------------- */ .site-footer { border-top: 1px solid var(--border); padding-top: 56px; padding-bottom: 40px; } .footer-grid { display: grid; grid-template-columns: 1.6fr 1fr 1fr 1fr 1fr; gap: 32px; } .footer-brand .brand { margin-bottom: 14px; } .footer-brand .brand .mark { width: 22px; height: 22px; } .footer-pitch { font-size: 14px; color: var(--muted); line-height: 1.55; max-width: 300px; } .footer-col h5 { font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; } .footer-col ul { display: grid; gap: 10px; } .footer-col a { font-size: 14px; color: var(--ink-2); } .footer-col a:hover { color: var(--ink); } .footer-meta { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--border); font-family: var(--font-mono); font-size: 13px; color: var(--muted); } .theme-toggle { display: inline-flex; align-items: center; gap: 7px; background: transparent; border: 1px solid var(--border); border-radius: 999px; padding: 6px 12px; font-family: var(--font-ui); font-size: 12.5px; color: var(--ink-2); cursor: pointer; } .theme-toggle:hover { background: var(--surface-3); color: var(--ink); } .theme-toggle svg { width: 15px; height: 15px; } .theme-toggle .icon-sun { display: none; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ---------------------------------------------------------------------------- 17. Blog / generic content fallback (non-front pages) ---------------------------------------------------------------------------- */ .content-narrow { max-width: 760px; margin-inline: auto; padding-block: 64px; } .content-narrow .entry-title { font-size: clamp(28px, 3.6vw, 44px); letter-spacing: -0.025em; margin-bottom: 12px; } .content-narrow .entry-meta { color: var(--muted); font-size: 13px; margin-bottom: 28px; } .content-narrow .entry-content > * + * { margin-top: 18px; } .content-narrow .entry-content a { color: var(--primary); text-decoration: underline; } .content-narrow .entry-content h2 { margin-top: 36px; } .content-narrow .post-card { display: block; padding: 24px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface-2); margin-bottom: 16px; } .content-narrow .post-card:hover { border-color: var(--border-strong); } .content-narrow .post-card h2 { font-size: 22px; letter-spacing: -0.01em; } /* ---------------------------------------------------------------------------- 18. Responsive ---------------------------------------------------------------------------- */ @media (max-width: 1000px) { .hero-grid { grid-template-columns: 1fr; gap: 40px; } .feat, .feat.reverse { grid-template-columns: 1fr; gap: 32px; } .feat.reverse .feat-art { order: 0; } .feat-copy p, .hero-copy .hero-sub { max-width: none; } } @media (max-width: 900px) { .intg-grid { grid-template-columns: repeat(2, 1fr); } .footer-grid { grid-template-columns: 1.4fr 1fr 1fr; } } @media (max-width: 800px) { .persona-grid { grid-template-columns: 1fr; } .stat-strip { grid-template-columns: repeat(2, 1fr); row-gap: 24px; } .footer-grid { grid-template-columns: repeat(2, 1fr); } .footer-brand { grid-column: 1 / -1; } .testimonial { padding: 36px 28px; } } @media (max-width: 720px) { :root { --wrap-pad: 20px; --section-pad: 64px; } .nav-links { display: none; } .nav-toggle { display: inline-flex; } /* Hide only the TOP-BAR actions — the drawer's action row must stay visible. */ .site-nav > .wrap > .nav-actions.nav-actions--desktop { display: none; } /* With the centered nav-links gone, right-align the GitHub icon next to the toggle. */ .site-nav > .wrap > .nav-github--bar { margin-left: auto; } .cta-panel { padding: 36px 28px; } .kpi-grid { grid-template-columns: repeat(2, 1fr); } .hero { padding-top: 56px; } .trace-flow { grid-template-columns: 1fr; gap: 12px; } .trace-flow::before { display: none; } .trace-node { grid-template-columns: 44px 1fr; justify-items: start; align-items: center; gap: 12px; } .trace-node .tname, .trace-node .tdur { text-align: left; } } @media (max-width: 480px) { .kpi-grid { grid-template-columns: 1fr 1fr; } .footer-meta { flex-direction: column; align-items: flex-start; gap: 10px; } } /* ---------------------------------------------------------------------------- 10. Pricing (contact-for-offer) ---------------------------------------------------------------------------- */ .pricing-card { max-width: 640px; margin: 0 auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 36px; box-shadow: var(--shadow-sm); text-align: center; } .pricing-points { list-style: none; margin: 0 0 28px; padding: 0; display: inline-grid; gap: 12px; text-align: left; } .pricing-points li { display: flex; align-items: flex-start; gap: 10px; color: var(--ink-2); } .pricing-points svg { width: 20px; height: 20px; color: var(--primary); flex: none; margin-top: 1px; } .pricing-cta { display: flex; flex-direction: column; align-items: center; gap: 12px; } .pricing-note { color: var(--muted); font-size: 13px; margin: 0; } /* ---------------------------------------------------------------------------- 11. Contact page + form ---------------------------------------------------------------------------- */ .contact-layout { display: grid; grid-template-columns: 1fr 1fr; gap: 56px; align-items: start; } .contact-intro h1 { font-size: clamp(30px, 4vw, 42px); line-height: 1.1; margin: 12px 0 16px; } .contact-intro .sub { color: var(--ink-2); font-size: 17px; line-height: 1.6; } .contact-intro .entry-content { margin-top: 20px; color: var(--ink-2); } .contact-form { background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 28px; box-shadow: var(--shadow-sm); display: grid; gap: 18px; } .contact-form .field { display: grid; gap: 6px; } .contact-form label { font-size: 14px; font-weight: 600; color: var(--ink-2); } .field-optional { font-weight: 400; color: var(--muted); } .contact-form input, .contact-form textarea { width: 100%; box-sizing: border-box; font: inherit; color: var(--ink); background: var(--surface); border: 1px solid var(--border-strong); border-radius: 10px; padding: 11px 14px; } .contact-form textarea { resize: vertical; min-height: 120px; } .contact-form input:focus-visible, .contact-form textarea:focus-visible { outline: none; border-color: var(--primary); box-shadow: var(--focus); } .field--invalid input, .field--invalid textarea { border-color: var(--err); } .field-error { color: var(--err-ink); font-size: 13px; } .contact-form .btn { justify-self: start; } .form-notice { border-radius: 10px; padding: 12px 16px; font-size: 14px; } .form-notice--ok { background: var(--ok-soft); color: var(--ok-ink); border: 1px solid color-mix(in oklab, var(--ok) 30%, transparent); } .form-notice--err { background: var(--err-soft); color: var(--err-ink); border: 1px solid color-mix(in oklab, var(--err) 30%, transparent); } /* Honeypot — visually hidden, kept in the accessibility tree off-screen. */ .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } @media (max-width: 860px) { .contact-layout { grid-template-columns: 1fr; gap: 32px; } .pricing-card { padding: 28px; } } /* ---------------------------------------------------------------------------- 17. Pricing page (templates/pricing.php) ---------------------------------------------------------------------------- */ .pp-center { max-width: 720px; margin-left: auto; margin-right: auto; text-align: center; } .pp-center .sub { margin-left: auto; margin-right: auto; } /* hero */ .pp-hero { max-width: 780px; margin: 0 auto; text-align: center; } .pp-hero h1 { font-size: clamp(32px, 4.6vw, 52px); font-weight: 800; letter-spacing: -0.03em; line-height: 1.05; margin: 12px 0 0; color: var(--ink); } .pp-hero h1 em { font-style: normal; color: var(--primary); } .pp-hero .sub { max-width: 620px; margin: 18px auto 0; } .pp-trust { font-size: 14px; color: var(--muted); max-width: 560px; margin: 22px auto 0; line-height: 1.55; } .pp-btn-row { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; margin-top: 26px; } /* fairness points */ .pp-points { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .pp-point { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 24px; } .pp-point h3 { margin: 0 0 8px; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; color: var(--ink); } .pp-point p { margin: 0; font-size: 14.5px; color: var(--ink-2); line-height: 1.55; } .pp-cloud { text-align: center; font-size: 13.5px; color: var(--muted); font-style: italic; max-width: 600px; margin: 28px auto 0; } /* provisional-pricing notice */ .pp-draft { max-width: 640px; margin: 0 auto 30px; text-align: center; font-size: 13.5px; line-height: 1.5; color: var(--warn-ink); background: var(--warn-soft); border: 1px solid color-mix(in oklab, var(--warn) 24%, transparent); border-radius: 10px; padding: 10px 16px; } /* community (free) card */ .pp-free { max-width: 900px; margin: 0 auto; background: var(--surface-2); border: 1px solid var(--border); border-radius: 18px; padding: 30px; box-shadow: var(--shadow-sm); } .pp-free-head { display: flex; flex-wrap: wrap; gap: 22px; justify-content: space-between; align-items: flex-start; } .pp-free h3 { margin: 12px 0 0; font-size: 24px; font-weight: 800; letter-spacing: -0.02em; color: var(--ink); } .pp-free-sub { margin: 8px 0 0; font-size: 15px; color: var(--ink-2); line-height: 1.55; max-width: 520px; } .pp-free-price { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; text-align: right; flex: none; } .pp-amount { font-size: 40px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: var(--ink); } .pp-per { font-size: 13px; color: var(--muted); } .pp-pill { display: inline-block; font-size: 12px; font-weight: 700; letter-spacing: 0.02em; padding: 4px 11px; border-radius: 999px; color: var(--ok-ink); background: var(--ok-soft); } .pp-free-points { list-style: none; margin: 22px 0 0; padding: 18px 0 0; border-top: 1px solid var(--border); display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; } .pp-free-points li { display: flex; align-items: flex-start; gap: 9px; font-size: 14.5px; color: var(--ink-2); } .pp-free-points svg { width: 18px; height: 18px; color: var(--primary); flex: none; margin-top: 1px; } .pp-free-foot { margin: 18px 0 0; font-size: 13.5px; color: var(--muted); line-height: 1.55; } /* enterprise comparison table */ .pp-plan-intro { max-width: 680px; margin: 48px auto 0; text-align: center; } .pp-plan-intro h3 { font-size: 24px; font-weight: 800; letter-spacing: -0.02em; margin: 0 0 8px; color: var(--ink); } .pp-plan-intro p { font-size: 15.5px; color: var(--ink-2); line-height: 1.55; margin: 0; } .pp-table-wrap { overflow-x: auto; margin: 24px 0 0; -webkit-overflow-scrolling: touch; } .pp-table { width: 100%; border-collapse: collapse; min-width: 680px; } .pp-table th, .pp-table td { padding: 14px 16px; text-align: center; border-bottom: 1px solid var(--border); font-size: 14.5px; color: var(--ink-2); vertical-align: middle; } .pp-table thead th { border-bottom: 1px solid var(--border-strong); vertical-align: top; background: var(--surface-2); } .pp-table tbody th[scope="row"] { text-align: left; font-weight: 600; color: var(--ink); font-size: 14px; } .pp-table-feature { background: transparent; border-bottom: 1px solid var(--border-strong); } .pp-plan { display: block; font-size: 15px; font-weight: 700; color: var(--ink); letter-spacing: -0.01em; } .pp-price { display: block; font-size: 26px; font-weight: 800; color: var(--ink); letter-spacing: -0.02em; margin: 4px 0 12px; } .pp-price-custom { font-size: 20px; } .pp-mo { font-size: 13px; font-weight: 500; color: var(--muted); letter-spacing: 0; } .pp-table tbody tr:nth-child(odd) td, .pp-table tbody tr:nth-child(odd) th[scope="row"] { background: var(--surface-3); } .pp-sm { font-size: 13px; padding: 8px 14px; } .pp-cell-note { display: block; margin-top: 6px; font-size: 11.5px; font-weight: 400; line-height: 1.4; color: var(--muted); } .pp-yes { color: var(--primary); display: inline-flex; } .pp-yes svg { width: 18px; height: 18px; } .pp-sr { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } .pp-plan-note { text-align: center; font-size: 14px; color: var(--muted); margin: 18px 0 0; } /* callouts */ .pp-callout { background: var(--surface-2); border: 1px solid var(--border); border-radius: 14px; padding: 28px 30px; max-width: 820px; margin: 0 auto; } .pp-callout + .pp-callout { margin-top: 20px; } .pp-callout h3 { margin: 0 0 10px; font-size: 21px; font-weight: 800; letter-spacing: -0.015em; color: var(--ink); } .pp-callout p { margin: 0; font-size: 15.5px; color: var(--ink-2); line-height: 1.6; } .pp-callout .label { margin-bottom: 8px; } .pp-callout-accent { border-left: 3px solid var(--primary); } /* included-in-every-plan grid */ .pp-features { list-style: none; margin: 0 auto; padding: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; max-width: 880px; } .pp-features li { display: flex; align-items: flex-start; gap: 10px; font-size: 15px; color: var(--ink-2); line-height: 1.5; } .pp-features svg { width: 18px; height: 18px; color: var(--primary); flex: none; margin-top: 2px; } /* what we don't charge for */ .pp-nocharge { list-style: none; margin: 0 auto; padding: 0; max-width: 760px; display: grid; gap: 14px; } .pp-nocharge li { display: flex; align-items: flex-start; gap: 12px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; } .pp-no { flex: none; width: 24px; height: 24px; border-radius: 50%; background: var(--err-soft); color: var(--err); display: inline-flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 700; margin-top: 1px; } .pp-nocharge div { font-size: 15px; color: var(--ink-2); line-height: 1.5; } .pp-nocharge strong { color: var(--ink); font-weight: 700; } /* faq accordion */ .pp-faq { max-width: 760px; margin: 0 auto; } .pp-qa { border-top: 1px solid var(--border); } .pp-qa:last-child { border-bottom: 1px solid var(--border); } .pp-qa summary { list-style: none; cursor: pointer; display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 20px 4px; font-size: 16px; font-weight: 600; color: var(--ink); } .pp-qa summary::-webkit-details-marker { display: none; } .pp-qa-plus { position: relative; width: 20px; height: 20px; flex: none; } .pp-qa-plus::before, .pp-qa-plus::after { content: ""; position: absolute; background: var(--muted); transition: opacity .2s ease; } .pp-qa-plus::before { left: 0; right: 0; top: 9px; height: 2px; } .pp-qa-plus::after { top: 0; bottom: 0; left: 9px; width: 2px; } .pp-qa[open] .pp-qa-plus::after { opacity: 0; } .pp-qa-a { padding: 0 4px 22px; max-width: 640px; } .pp-qa-a p { margin: 0; font-size: 15px; color: var(--ink-2); line-height: 1.6; } /* final CTA panel sub-line */ .pp-cta-sub { color: rgba(255,255,255,.75); max-width: 560px; margin: -12px 0 26px; font-size: 17px; line-height: 1.5; } /* responsive */ @media (max-width: 900px) { .pp-points { grid-template-columns: 1fr; } .pp-free-head { flex-direction: column; } .pp-free-price { text-align: left; align-items: flex-start; width: 100%; } .pp-free-points, .pp-features { grid-template-columns: 1fr; } } @media (max-width: 640px) { .pp-btn-row { flex-direction: column; } .pp-btn-row .btn { width: 100%; } } /* ---------------------------------------------------------------------------- 18. Getting started — journey + "find your starting path" picker ---------------------------------------------------------------------------- */ .gs-head { text-align: center; margin-left: auto; margin-right: auto; } .gs-head .sub { margin-left: auto; margin-right: auto; } /* four-step journey */ .gs-track { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; position: relative; } .gs-track::before { content: ""; position: absolute; top: 26px; left: 12%; right: 12%; height: 2px; background: linear-gradient(90deg, var(--primary), color-mix(in oklab, var(--primary) 35%, transparent)); opacity: .5; z-index: 0; } .gs-step { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; text-align: center; } .gs-num { width: 52px; height: 52px; border-radius: 50%; background: var(--surface); border: 2px solid var(--primary); color: var(--primary); font-weight: 700; font-size: 17px; display: flex; align-items: center; justify-content: center; } .gs-ico { margin-top: 14px; color: var(--primary); } .gs-ico svg { width: 24px; height: 24px; } .gs-t { margin: 10px 0 6px; font-size: 16px; font-weight: 700; letter-spacing: -.01em; color: var(--ink); } .gs-d { margin: 0; font-size: 14px; color: var(--ink-2); line-height: 1.55; max-width: 240px; } /* the picker */ .gsp { margin: 44px auto 0; max-width: 900px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; padding: 28px; box-shadow: var(--shadow-sm); } .gsp-q { margin: 0 0 16px; font-size: 15px; font-weight: 600; color: var(--ink); } .gsp-opts { display: flex; flex-wrap: wrap; gap: 10px; } .gsp-opt { cursor: pointer; font: inherit; font-size: 14px; font-weight: 500; padding: 10px 16px; border-radius: 10px; background: var(--surface); color: var(--ink-2); border: 1px solid var(--border-strong); transition: background .15s ease, border-color .15s ease, color .15s ease; } .gsp-opt:hover { border-color: var(--primary); color: var(--ink); } .gsp-opt:focus-visible { outline: none; box-shadow: var(--focus); border-color: var(--primary); } .gsp-opt.is-active, .gsp-opt[aria-selected="true"] { background: var(--primary-soft); border-color: color-mix(in oklab, var(--primary) 40%, transparent); color: var(--primary-ink); font-weight: 600; } .gsp-panels { margin-top: 22px; } .gsp-panel { padding-top: 22px; border-top: 1px solid var(--border); } .gsp-panel[hidden] { display: none; } .gsp-panel-head { margin-bottom: 12px; } .gsp-effort { display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; font-weight: 600; color: var(--primary-ink); background: var(--primary-soft); border-radius: 999px; padding: 5px 12px; } .gsp-effort svg { width: 14px; height: 14px; } .gsp-steps { margin: 0 0 16px; padding-left: 20px; display: grid; gap: 8px; } .gsp-steps li { font-size: 14.5px; color: var(--ink-2); line-height: 1.5; padding-left: 4px; } .gsp-steps li::marker { color: var(--primary); font-weight: 700; } .gsp-code { margin: 0 0 16px; background: var(--surface-3); border: 1px solid var(--border); border-radius: 10px; padding: 14px 16px; overflow-x: auto; } .gsp-code code { font-family: var(--font-mono); font-size: 12.5px; line-height: 1.6; color: var(--ink); white-space: pre; } .gsp-cta { align-self: flex-start; } .btn--sm { font-size: 13px; padding: 8px 14px; border-radius: 9px; } @media (max-width: 860px) { .gs-track { grid-template-columns: 1fr 1fr; gap: 30px 20px; } .gs-track::before { display: none; } .gs-d { max-width: none; } } @media (max-width: 460px) { .gs-track { grid-template-columns: 1fr; } .gsp { padding: 20px; } .gsp-opt { width: 100%; text-align: left; } } /* getting-started picker — recommendation note */ .gsp-note { display: flex; align-items: flex-start; gap: 9px; margin: 0 0 16px; padding: 12px 14px; background: var(--primary-soft); border-radius: 10px; font-size: 14px; line-height: 1.5; color: var(--primary-ink); } .gsp-note svg { width: 17px; height: 17px; flex: none; margin-top: 1px; color: var(--primary); } /* ---------------------------------------------------------------------------- 19. Privacy page + cookie consent ---------------------------------------------------------------------------- */ .footer-legal { display: inline-flex; gap: 14px; flex-wrap: wrap; } .footer-legal a { color: var(--muted); font-size: 13px; } .footer-legal a:hover { color: var(--ink); } .cookie-consent { position: fixed; left: 0; right: 0; bottom: 0; z-index: 9998; background: var(--surface-2); border-top: 1px solid var(--border); box-shadow: 0 -10px 34px -18px rgba(15, 23, 42, .3); } .cookie-consent[hidden] { display: none; } .cookie-inner { display: flex; align-items: center; gap: 18px; padding: 15px 32px; } @media (max-width: 720px) { .cookie-inner { flex-direction: column; align-items: flex-start; gap: 12px; padding: 14px 20px; } } .cookie-text { margin: 0; font-size: 13.5px; color: var(--ink-2); line-height: 1.5; } .cookie-text a { color: var(--primary); } .cookie-actions { margin-left: auto; display: flex; gap: 10px; flex: 0 0 auto; } @media (max-width: 720px) { .cookie-actions { margin-left: 0; } } .cookie-btn { cursor: pointer; font-family: inherit; font-size: 14px; font-weight: 600; padding: 9px 18px; border-radius: 10px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--ink); transition: background .14s ease, border-color .14s ease; } .cookie-btn--ghost:hover { background: var(--surface-3); } .cookie-btn--primary { background: var(--primary); border-color: var(--primary); color: var(--on-primary); } .cookie-btn--primary:hover { background: var(--primary-hover); border-color: var(--primary-hover); } .legal { max-width: 768px; } .legal .label { margin-bottom: 12px; } .legal h1 { font-size: clamp(28px, 3.6vw, 40px); font-weight: 700; letter-spacing: -.028em; line-height: 1.08; margin: 6px 0 6px; color: var(--ink); } .legal .legal-meta { color: var(--muted); font-size: 12.5px; margin: 0 0 30px; } .legal h2 { font-size: 20px; font-weight: 700; letter-spacing: -.015em; margin: 32px 0 8px; color: var(--ink); } .legal p { color: var(--ink-2); line-height: 1.65; margin: 0 0 14px; } .legal a { color: var(--primary); } .legal ul { color: var(--ink-2); line-height: 1.6; margin: 0 0 14px; padding-left: 20px; } .legal li { margin-bottom: 4px; } /* ── GitHub link in the nav ── */ .nav-github { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); transition: color .14s ease; } .nav-github:hover { color: var(--ink); } .nav-github svg { width: 20px; height: 20px; display: block; } .nav-drawer .nav-github { font-size: 15px; padding: 6px 0; } /* ── getting-started picker CTA row ── */ .gsp-ctas { display: flex; flex-wrap: wrap; gap: 10px; } /* ---------------------------------------------------------------------------- 20. Blog — post body + listing polish ---------------------------------------------------------------------------- */ .content-narrow .post-card .entry-meta { margin-bottom: 10px; } .content-narrow .post-card .entry-content { color: var(--ink-2); font-size: 15px; } .content-narrow .entry-content pre, .content-narrow .entry-content .wp-block-code { background: var(--surface-3); border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px; overflow-x: auto; } .content-narrow .entry-content pre, .content-narrow .entry-content pre code { font-family: var(--font-mono); font-size: 13.5px; line-height: 1.55; color: var(--ink); background: none; padding: 0; white-space: pre; } .content-narrow .entry-content pre { padding: 16px 18px; } .content-narrow .entry-content code { font-family: var(--font-mono); font-size: .9em; background: var(--surface-3); padding: 2px 6px; border-radius: 5px; color: var(--ink); } .content-narrow .entry-content img { max-width: 100%; height: auto; border-radius: 12px; } .content-narrow .entry-content blockquote { margin: 0; padding: 4px 0 4px 16px; border-left: 3px solid var(--primary); color: var(--ink-2); } .content-narrow .entry-content ul, .content-narrow .entry-content ol { padding-left: 22px; color: var(--ink-2); } /* pagination (the_posts_pagination) */ .content-narrow .pagination { margin-top: 28px; } .content-narrow .page-numbers { display: inline-flex; align-items: center; justify-content: center; min-width: 36px; padding: 8px 12px; margin-right: 6px; border: 1px solid var(--border); border-radius: 9px; color: var(--ink-2); font-size: 14px; } .content-narrow a.page-numbers:hover { border-color: var(--border-strong); color: var(--ink); } .content-narrow .page-numbers.current { background: var(--primary-soft); border-color: transparent; color: var(--primary-ink); font-weight: 600; } /* ── blog listing (waitlist-style cards) ── */ .blog-head { margin-bottom: 40px; } .blog-head h1 { font-size: clamp(28px, 3.6vw, 44px); font-weight: 700; letter-spacing: -0.025em; line-height: 1.08; margin: 6px 0 10px; color: var(--ink); } .rss-link { font-size: 13px; font-weight: 600; color: var(--primary); margin-left: 8px; } .post-list { display: grid; grid-template-columns: repeat(2, 1fr); gap: 18px; } @media (max-width: 720px) { .post-list { grid-template-columns: 1fr; } } .blog-card { background: var(--surface-2); border: 1px solid var(--border); border-radius: 16px; transition: border-color .14s ease, transform .14s ease, box-shadow .14s ease; } .blog-card:hover { border-color: var(--border-strong); transform: translateY(-2px); box-shadow: var(--shadow-sm); } .blog-card-link { display: block; padding: 22px 24px 24px; color: inherit; } .blog-card-meta { font-family: var(--font-mono); font-size: 12.5px; color: var(--muted); margin: 0 0 8px; } .blog-card-title { font-size: 19px; font-weight: 700; letter-spacing: -.015em; line-height: 1.25; margin: 0 0 8px; color: var(--ink); } .blog-card-excerpt { font-size: 14.5px; color: var(--ink-2); line-height: 1.55; margin: 0 0 14px; } .blog-card-more { font-size: 13.5px; font-weight: 600; color: var(--primary); } .post-empty { color: var(--muted); }