/* ============================================================ typography-dev.css — dev-only typography control panel. Inert unless the panel JS has set data-td-* attributes on . Loaded last in so it wins cascade order; per-property attribute gating means unset properties don't apply any rule and the original cascade flows through untouched. ============================================================ */ /* ---------- Article Title group ---------- */ html[data-td-title-font-family] :is(.gh-article-title, .gh-header-title) { font-family: var(--td-title-font-family) !important; } html[data-td-title-font-weight] :is(.gh-article-title, .gh-header-title) { font-weight: var(--td-title-font-weight) !important; } html[data-td-title-font-size] :is(.gh-article-title, .gh-header-title) { font-size: var(--td-title-font-size) !important; } html[data-td-title-line-height] :is(.gh-article-title, .gh-header-title) { line-height: var(--td-title-line-height) !important; } html[data-td-title-letter-spacing] :is(.gh-article-title, .gh-header-title) { letter-spacing: var(--td-title-letter-spacing) !important; } html[data-td-title-font-feature-settings] :is(.gh-article-title, .gh-header-title) { font-feature-settings: var(--td-title-font-feature-settings) !important; } /* ---------- Section Headings group (in-content h1–h3) ---------- */ html[data-td-heading-font-family] :is(.gh-content h1, .gh-content h2, .gh-content h3) { font-family: var(--td-heading-font-family) !important; } html[data-td-heading-font-weight] :is(.gh-content h1, .gh-content h2, .gh-content h3) { font-weight: var(--td-heading-font-weight) !important; } html[data-td-heading-font-size] :is(.gh-content h1, .gh-content h2, .gh-content h3) { font-size: var(--td-heading-font-size) !important; } html[data-td-heading-line-height] :is(.gh-content h1, .gh-content h2, .gh-content h3) { line-height: var(--td-heading-line-height) !important; } html[data-td-heading-letter-spacing] :is(.gh-content h1, .gh-content h2, .gh-content h3) { letter-spacing: var(--td-heading-letter-spacing) !important; } html[data-td-heading-font-feature-settings] :is(.gh-content h1, .gh-content h2, .gh-content h3) { font-feature-settings: var(--td-heading-font-feature-settings) !important; } /* ---------- Card Headings group ---------- */ html[data-td-card-font-family] .gh-card-title { font-family: var(--td-card-font-family) !important; } html[data-td-card-font-weight] .gh-card-title { font-weight: var(--td-card-font-weight) !important; } html[data-td-card-font-size] .gh-card-title { font-size: var(--td-card-font-size) !important; } html[data-td-card-line-height] .gh-card-title { line-height: var(--td-card-line-height) !important; } html[data-td-card-letter-spacing] .gh-card-title { letter-spacing: var(--td-card-letter-spacing) !important; } html[data-td-card-font-feature-settings] .gh-card-title { font-feature-settings: var(--td-card-font-feature-settings) !important; } /* ---------- Body Text group (includes article excerpt) ---------- */ html[data-td-body-font-family] :is(.gh-content p, .gh-content li, .gh-content blockquote, .gh-article-excerpt) { font-family: var(--td-body-font-family) !important; } html[data-td-body-font-weight] :is(.gh-content p, .gh-content li, .gh-content blockquote, .gh-article-excerpt) { font-weight: var(--td-body-font-weight) !important; } html[data-td-body-font-size] :is(.gh-content p, .gh-content li, .gh-content blockquote, .gh-article-excerpt) { font-size: var(--td-body-font-size) !important; } html[data-td-body-line-height] :is(.gh-content p, .gh-content li, .gh-content blockquote, .gh-article-excerpt) { line-height: var(--td-body-line-height) !important; } html[data-td-body-letter-spacing] :is(.gh-content p, .gh-content li, .gh-content blockquote, .gh-article-excerpt) { letter-spacing: var(--td-body-letter-spacing) !important; } html[data-td-body-font-feature-settings] :is(.gh-content p, .gh-content li, .gh-content blockquote, .gh-article-excerpt) { font-feature-settings: var(--td-body-font-feature-settings) !important; } /* ---------- Image Captions group ---------- */ html[data-td-caption-font-family] :is(.gh-article-image figcaption, figure.kg-card.kg-image-card.kg-card-hascaption figcaption, figure.kg-gallery-card figcaption) { font-family: var(--td-caption-font-family) !important; } html[data-td-caption-font-weight] :is(.gh-article-image figcaption, figure.kg-card.kg-image-card.kg-card-hascaption figcaption, figure.kg-gallery-card figcaption) { font-weight: var(--td-caption-font-weight) !important; } html[data-td-caption-font-size] :is(.gh-article-image figcaption, figure.kg-card.kg-image-card.kg-card-hascaption figcaption, figure.kg-gallery-card figcaption) { font-size: var(--td-caption-font-size) !important; } html[data-td-caption-line-height] :is(.gh-article-image figcaption, figure.kg-card.kg-image-card.kg-card-hascaption figcaption, figure.kg-gallery-card figcaption) { line-height: var(--td-caption-line-height) !important; } html[data-td-caption-letter-spacing] :is(.gh-article-image figcaption, figure.kg-card.kg-image-card.kg-card-hascaption figcaption, figure.kg-gallery-card figcaption) { letter-spacing: var(--td-caption-letter-spacing) !important; } html[data-td-caption-font-feature-settings] :is(.gh-article-image figcaption, figure.kg-card.kg-image-card.kg-card-hascaption figcaption, figure.kg-gallery-card figcaption) { font-feature-settings: var(--td-caption-font-feature-settings) !important; } /* ---------- Labels / Navigation group ---------- */ html[data-td-label-font-family] :is(.gh-card-meta, .gh-navigation-menu, .gh-footer-menu, .gh-footer-copyright, .gh-article-tag, .gh-card-tag, .gh-article-author-name, .gh-article-meta-content, .gh-navigation-members, .gh-more.is-title a, .gh-announcement-bar) { font-family: var(--td-label-font-family) !important; } html[data-td-label-font-weight] :is(.gh-card-meta, .gh-navigation-menu, .gh-footer-menu, .gh-footer-copyright, .gh-article-tag, .gh-card-tag, .gh-article-author-name, .gh-article-meta-content, .gh-navigation-members, .gh-more.is-title a, .gh-announcement-bar) { font-weight: var(--td-label-font-weight) !important; } html[data-td-label-font-size] :is(.gh-card-meta, .gh-navigation-menu, .gh-footer-menu, .gh-footer-copyright, .gh-article-tag, .gh-card-tag, .gh-article-author-name, .gh-article-meta-content, .gh-navigation-members, .gh-more.is-title a, .gh-announcement-bar) { font-size: var(--td-label-font-size) !important; } html[data-td-label-line-height] :is(.gh-card-meta, .gh-navigation-menu, .gh-footer-menu, .gh-footer-copyright, .gh-article-tag, .gh-card-tag, .gh-article-author-name, .gh-article-meta-content, .gh-navigation-members, .gh-more.is-title a, .gh-announcement-bar) { line-height: var(--td-label-line-height) !important; } html[data-td-label-letter-spacing] :is(.gh-card-meta, .gh-navigation-menu, .gh-footer-menu, .gh-footer-copyright, .gh-article-tag, .gh-card-tag, .gh-article-author-name, .gh-article-meta-content, .gh-navigation-members, .gh-more.is-title a, .gh-announcement-bar) { letter-spacing: var(--td-label-letter-spacing) !important; } html[data-td-label-font-feature-settings] :is(.gh-card-meta, .gh-navigation-menu, .gh-footer-menu, .gh-footer-copyright, .gh-article-tag, .gh-card-tag, .gh-article-author-name, .gh-article-meta-content, .gh-navigation-members, .gh-more.is-title a, .gh-announcement-bar) { font-feature-settings: var(--td-label-font-feature-settings) !important; } /* ============================================================ Panel UI — scoped to .td-toggle / .td-panel so it can't leak. Uses system UI font intentionally so the panel itself doesn't change when the user tweaks page typography. ============================================================ */ .td-toggle, .td-panel, .td-panel * { box-sizing: border-box; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif !important; font-feature-settings: normal !important; font-variation-settings: normal !important; letter-spacing: 0 !important; } .td-toggle { position: fixed; bottom: 16px; left: 16px; z-index: 2147483646; width: 44px; height: 44px; padding: 0; border: 1px solid rgba(0, 0, 0, 0.4); border-radius: 50%; background: #fff; color: #111; font-size: 18px !important; font-weight: 500; line-height: 1 !important; cursor: pointer; box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15); transition: transform 120ms ease, box-shadow 120ms ease; } .td-toggle:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(0, 0, 0, 0.2); } .td-toggle:focus { outline: 2px solid #0a84ff; outline-offset: 2px; } .td-panel { position: fixed; bottom: 72px; left: 16px; z-index: 2147483647; width: 380px; max-width: calc(100vw - 32px); max-height: calc(100vh - 96px); background: #fff; color: #111; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 8px; box-shadow: 0 16px 48px rgba(0, 0, 0, 0.22); display: none; flex-direction: column; overflow: hidden; font-size: 12px !important; line-height: 1.4 !important; } .td-panel.is-open { display: flex; } .td-panel-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid rgba(0, 0, 0, 0.1); background: #fafafa; font-size: 12px !important; text-transform: uppercase; letter-spacing: 0.06em !important; } .td-panel-header strong { font-weight: 600; } .td-close { width: 24px; height: 24px; padding: 0; border: 0; background: transparent; color: #444; font-size: 20px !important; line-height: 1 !important; cursor: pointer; } .td-close:hover { color: #000; } .td-panel-body { flex: 1 1 auto; overflow-y: auto; padding: 6px 0; } .td-group { border-bottom: 1px solid rgba(0, 0, 0, 0.06); padding: 6px 14px 12px; } .td-group:last-child { border-bottom: none; } .td-group > summary { cursor: pointer; padding: 6px 0; font-weight: 600; font-size: 13px !important; list-style: revert; } .td-caption { margin: 2px 0 8px; color: #666; font-size: 11px !important; } .td-subhead { margin: 10px 0 4px; font-size: 11px !important; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em !important; color: #444; } .td-subhead small { font-weight: 400; text-transform: none; letter-spacing: 0 !important; color: #888; } .td-row { display: flex; align-items: center; gap: 8px; padding: 3px 0; font-size: 12px !important; } .td-row > span:first-child { flex: 0 0 110px; color: #444; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; font-size: 11px !important; } .td-row select, .td-row input[type="number"] { flex: 1 1 auto; min-width: 0; padding: 4px 6px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 4px; background: #fff; color: #111; font-size: 12px !important; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; } .td-row input[type="number"]:focus, .td-row select:focus { outline: 2px solid #0a84ff; outline-offset: 0; border-color: transparent; } .td-input-wrap { display: flex; align-items: center; gap: 4px; flex: 1 1 auto; min-width: 0; } .td-unit { color: #888; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; font-size: 11px !important; } .td-current { margin: 6px 0 2px; padding: 4px 6px; background: #f5f5f5; border-radius: 3px; color: #555; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; font-size: 10px !important; line-height: 1.5 !important; word-break: break-word; } .td-current:empty { display: none; } .td-feature-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px 6px; margin-top: 4px; } .td-feature { display: flex; align-items: center; gap: 4px; padding: 3px 0; cursor: pointer; font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace !important; font-size: 11px !important; color: #333; } .td-feature input[type="checkbox"] { width: 13px; height: 13px; margin: 0; accent-color: #0a84ff; } .td-panel-footer { display: flex; gap: 8px; padding: 10px 14px; border-top: 1px solid rgba(0, 0, 0, 0.1); background: #fafafa; } .td-btn { flex: 1 1 auto; padding: 6px 10px; border: 1px solid rgba(0, 0, 0, 0.25); border-radius: 4px; background: #fff; color: #111; font-size: 12px !important; font-weight: 500; cursor: pointer; } .td-btn:hover { background: #f0f0f0; } .td-btn-primary { background: #111; color: #fff; border-color: #111; } .td-btn-primary:hover { background: #000; } .td-fallback { position: fixed; bottom: 0; left: 0; width: 1px; height: 1px; opacity: 0; pointer-events: none; }