/* Default template — standard typography, minimal chrome. Every declaration reads a brand token first (--font-body, --font-size, --line-height, --text, --bg, --max-w, --scale, …). Those tokens are emitted inline in each page's from the site's brand settings and land AFTER this file in the cascade, so a tenant can restyle the whole site from the portal without anyone editing this stylesheet. */ *, *::before, *::after { box-sizing: border-box; } :root { --wrap: var(--max-w, 1100px); --measure: var(--article-max, 720px); --gap: 1.5rem; /* Modular type scale driven by --scale (default 1.25 / major third). */ --step-0: 1rem; --step-1: calc(var(--step-0) * var(--scale, 1.25)); --step-2: calc(var(--step-1) * var(--scale, 1.25)); --step-3: calc(var(--step-2) * var(--scale, 1.25)); --step-4: calc(var(--step-3) * var(--scale, 1.25)); --step--1: calc(var(--step-0) / var(--scale, 1.25)); } html { font-size: var(--font-size, 16px); -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; min-height: 100vh; display: flex; flex-direction: column; font-family: var(--font-body, system-ui, -apple-system, "Segoe UI", Roboto, Helvetica, Arial, sans-serif); font-size: var(--step-0); line-height: var(--line-height, 1.65); color: var(--text, #0f172a); background: var(--bg, #ffffff); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ---- Headings ---- */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-heading, var(--font-body, system-ui, sans-serif)); font-weight: 650; line-height: 1.2; letter-spacing: -0.011em; margin: 0 0 0.5em; text-wrap: balance; } h1 { font-size: var(--step-4); } h2 { font-size: var(--step-2); margin-top: 1.6em; } h3 { font-size: var(--step-1); margin-top: 1.4em; } h4 { font-size: var(--step-0); margin-top: 1.2em; } h5, h6 { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.06em; margin-top: 1.2em; } p, ul, ol, dl, pre, blockquote, table, figure { margin: 0 0 1.15em; } a { color: var(--accent, #2563eb); text-decoration-thickness: 1px; text-underline-offset: 2px; } a:hover { text-decoration-thickness: 2px; } :focus-visible { outline: 2px solid var(--accent, #2563eb); outline-offset: 2px; } /* ---- Layout ---- */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gap); } .site-main { flex: 1 0 auto; width: 100%; max-width: var(--wrap); margin-inline: auto; padding: 3rem var(--gap); } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--bg, #fff); color: var(--text, #0f172a); padding: 0.6rem 1rem; z-index: 100; } .skip-link:focus { left: 0; } /* ---- Header ---- */ .site-header { background: var(--color-header-bg, #ffffff); color: var(--color-header-text, #0f172a); border-bottom: 1px solid var(--border, #e5e7eb); } .site-header--sticky { position: sticky; top: 0; z-index: 50; } .site-header__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem; min-height: 4rem; } .site-brand { color: inherit; text-decoration: none; display: inline-flex; align-items: center; } .site-brand__logo { display: block; height: 28px; width: auto; } .site-brand__name { font-family: var(--font-heading, var(--font-body, system-ui, sans-serif)); font-size: var(--step-1); font-weight: 700; letter-spacing: -0.02em; } .site-nav { display: flex; flex-wrap: wrap; gap: 1.25rem; } /* Header action buttons (Sign in / call to action), configured per site. */ .site-header__actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .btn { font-size: var(--step--1); font-weight: 600; line-height: 1; text-decoration: none; white-space: nowrap; padding: 0.6rem 0.9rem; border: 1px solid var(--brand-primary, var(--accent, #2563eb)); border-radius: var(--radius, 8px); color: var(--brand-primary, var(--accent, #2563eb)); background: transparent; } .btn--primary { background: var(--brand-primary, var(--accent, #2563eb)); color: var(--brand-on-primary, #ffffff); } .btn--text { border-color: transparent; padding-left: 0.25rem; padding-right: 0.25rem; } .btn:hover { opacity: 0.85; } .site-nav__link { color: inherit; text-decoration: none; font-size: var(--step--1); letter-spacing: 0.02em; padding-block: 0.35rem; border-bottom: 2px solid transparent; } .site-nav__link:hover { border-bottom-color: currentColor; } /* ---- Article ---- */ .page-header { max-width: var(--measure); margin: 0 auto 2rem; } .page-title { margin-bottom: 0.35em; } .page-lede { font-size: var(--step-1); line-height: 1.4; color: var(--muted, #64748b); margin: 0; } .post-kicker { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted, #64748b); margin: 0 0 0.6em; } .post-meta { margin: 1.25rem 0 0; font-size: var(--step--1); color: var(--muted, #64748b); display: flex; flex-wrap: wrap; gap: 0.75rem; } .post-tags { max-width: var(--measure); margin: 2.5rem auto 0; padding: 0; list-style: none; display: flex; flex-wrap: wrap; gap: 0.5rem; } .post-tags a { font-size: var(--step--1); text-decoration: none; border: 1px solid var(--border, #e5e7eb); border-radius: 999px; padding: 0.2rem 0.7rem; color: var(--muted, #64748b); } /* ---- Prose ---- */ .prose { max-width: var(--measure); margin-inline: auto; } .prose > :first-child { margin-top: 0; } .prose li + li { margin-top: 0.35em; } .prose img, .prose video { max-width: 100%; height: auto; display: block; } .prose blockquote { margin-inline: 0; padding-left: 1.25rem; border-left: 3px solid var(--border, #e5e7eb); color: var(--muted, #64748b); } .prose code, .prose pre { font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace; font-size: 0.9em; } .prose code { background: var(--surface, #f9fafb); padding: 0.15em 0.35em; border-radius: 4px; } .prose pre { background: var(--surface, #f9fafb); padding: 1rem 1.15rem; border-radius: var(--radius, 8px); overflow-x: auto; } .prose pre code { background: none; padding: 0; } .prose table { width: 100%; border-collapse: collapse; font-size: var(--step--1); } .prose th, .prose td { text-align: left; padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border, #e5e7eb); } .prose th { font-weight: 650; } .prose hr { border: 0; border-top: 1px solid var(--border, #e5e7eb); margin: 2.5rem 0; } /* ---- Content list regions (divvylore-content-list) ---- */ .section-rule { display: flex; align-items: center; gap: 1rem; font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.1em; color: var(--muted, #64748b); margin: 3rem 0 1.25rem; } .section-rule::after { content: ""; flex: 1; border-top: 1px solid var(--border, #e5e7eb); } .story-grid { display: grid; gap: var(--gap); grid-template-columns: 1fr; } .story-grid--cols-1 { grid-template-columns: 1fr; } .story-grid--cols-2, .story-grid--cols-3, .story-grid--cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (min-width: 60rem) { .story-grid--cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .story-grid--cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } } .card { border-top: 1px solid var(--border, #e5e7eb); padding-top: 1rem; } .card__media { display: block; margin-bottom: 0.75rem; } .card__media img { width: 100%; height: auto; display: block; border-radius: var(--radius, 8px); } .card__title { font-size: var(--step-1); margin: 0 0 0.35em; } .card__title a { color: inherit; text-decoration: none; } .card__title a:hover { text-decoration: underline; } .card__summary { color: var(--muted, #64748b); margin: 0 0 0.6em; } .card__meta { font-size: var(--step--1); color: var(--muted, #64748b); margin: 0; display: flex; flex-wrap: wrap; gap: 0.6rem; } .kicker { font-size: var(--step--1); text-transform: uppercase; letter-spacing: 0.08em; color: var(--muted, #64748b); display: block; margin-bottom: 0.35em; } .card--lead .card__title { font-size: var(--step-3); } .card--feature .card__title { font-size: var(--step-2); } .card--compact .card__title { font-size: var(--step-0); } .card--compact .card__summary { display: none; } .content-list__empty { color: var(--muted, #64748b); font-style: italic; } /* ---- Footer ---- */ .site-footer { margin-top: 4rem; background: var(--color-footer-bg, #0b0b0f); color: var(--color-footer-text, #e5e7eb); font-size: var(--step--1); } .site-footer__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem 1.5rem; padding-block: 2rem; } .site-footer a { color: inherit; text-decoration: none; } .site-footer a:hover { text-decoration: underline; } .site-footer__nav { display: flex; flex-wrap: wrap; gap: 1.25rem; } .site-footer__copy { opacity: 0.75; } .site-footer__powered { opacity: 0.6; } /* ---- Print / reduced motion ---- */ @media print { .site-header, .site-footer, .skip-link { display: none !important; } .site-main { padding: 0; max-width: none; } a { color: inherit; text-decoration: underline; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } }