/* * WDM Documentation Template - front-end design system * Light mode only, per brief. Brand Red is reserved for the flow rail, * critical severity, and hover/active states - everywhere else stays quiet. * * Type roles: * Display - Space Grotesk (headings, hero, module labels) * Body - Inter (paragraphs, list items, nav) * Utility - IBM Plex Mono (file/class references in "Where to Look") * * If self-hosting fonts is preferred over this CDN import (perf/GDPR), * swap this @import for local @font-face rules - nothing else changes. */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600&family=IBM+Plex+Mono:wght@400;500&display=swap'); /* * Tokens are declared on both selectors so the standalone (which is * outside .wdm-doc-theme) can use them too - see templates/parts/shell-open.php. */ .wdm-doc-theme, body.wdm-doc-standalone { --wdm-red: #A30000; --wdm-red-soft: #A3000014; --wdm-primary-dark: #2C2C2C; --wdm-text-dark: #1C1C1C; --wdm-text-secondary: #555555; --wdm-light-gray: #CCCCCC; --wdm-off-white: #F0EFF0; --wdm-white: #FFFFFF; --wdm-border: #D9D9D9; --wdm-font-display: 'Space Grotesk', 'Arial Black', sans-serif; --wdm-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --wdm-font-mono: 'IBM Plex Mono', 'SFMono-Regular', Consolas, monospace; --wdm-radius: 10px; --wdm-radius-sm: 6px; --wdm-shadow: 0 1px 2px rgba(28,28,28,0.04), 0 6px 20px rgba(28,28,28,0.05); color: var(--wdm-text-dark); font-family: var(--wdm-font-body); background: var(--wdm-white); -webkit-font-smoothing: antialiased; } .wdm-doc-theme * { box-sizing: border-box; } /* ---------- Standalone shell ---------- * We own / now, but the active theme's global stylesheet still * loads through wp_head() and can put a margin, padding, or max-width on * body. Neutralize just enough that our own layout owns the page. */ body.wdm-doc-standalone { margin: 0; padding: 0; background: var(--wdm-white); } .wdm-doc-container { max-width: 1180px; margin: 0 auto; padding: 0 24px; } /* The issue page carries three columns, so it gets the full 90% of the * viewport instead of the archive's fixed 1180px. The 5% gutters either side * replace the container padding rather than eating into the 90%. */ .wdm-doc-single .wdm-doc-container { width: 90%; max-width: none; padding: 0; } /* ---------- Hero ---------- */ .wdm-doc-hero { background: var(--wdm-off-white); border-bottom: 1px solid var(--wdm-border); padding: 56px 0 40px; } .wdm-doc-eyebrow { font-family: var(--wdm-font-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wdm-red); margin: 0 0 10px; font-weight: 500; } .wdm-doc-hero-title { font-family: var(--wdm-font-display); font-size: 40px; font-weight: 700; color: var(--wdm-text-dark); margin: 0 0 10px; letter-spacing: -0.01em; } .wdm-doc-hero-sub { font-size: 16px; color: var(--wdm-text-secondary); margin: 0 0 28px; max-width: 560px; } .wdm-doc-search { display: flex; max-width: 520px; background: var(--wdm-white); border: 1px solid var(--wdm-border); border-radius: var(--wdm-radius); overflow: hidden; box-shadow: var(--wdm-shadow); } .wdm-doc-search input[type="search"] { flex: 1; border: 0; padding: 14px 16px; font-family: var(--wdm-font-body); font-size: 14px; color: var(--wdm-text-dark); outline: none; background: transparent; } .wdm-doc-search button { border: 0; background: var(--wdm-primary-dark); color: var(--wdm-white); padding: 0 22px; font-family: var(--wdm-font-body); font-weight: 600; font-size: 14px; cursor: pointer; transition: background 0.15s ease; } .wdm-doc-search button:hover, .wdm-doc-search button:focus-visible { background: var(--wdm-red); } .wdm-doc-search--embed { max-width: 380px; margin: 0; } /* ---------- Breadcrumb ---------- */ .wdm-doc-breadcrumb-fallback { font-size: 13px; color: var(--wdm-text-secondary); padding: 18px 0 0; } .wdm-doc-breadcrumb-fallback a { color: var(--wdm-text-secondary); text-decoration: none; } .wdm-doc-breadcrumb-fallback a:hover { color: var(--wdm-red); } .wdm-doc-breadcrumb-fallback span { color: var(--wdm-text-dark); font-weight: 500; } /* ---------- Layout ---------- */ .wdm-doc-layout { display: grid; grid-template-columns: 240px 1fr; gap: 40px; padding: 32px 0 80px; align-items: start; } /* Issue Tree | content | At a Glance + On This Page. Both rails are clamped * rather than fixed so the middle column keeps a readable measure across the * whole range this layout is allowed at (>= 1200px, see Responsive). */ .wdm-doc-single-layout { display: grid; grid-template-columns: clamp(220px, 17vw, 280px) minmax(0, 1fr) clamp(240px, 19vw, 300px); gap: clamp(24px, 2.2vw, 44px); padding: 12px 0 80px; align-items: start; } /* A doc with no parent and no children has no Issue Tree to show, and the left * aside is not rendered at all - so drop its column instead of leaving a gap. */ .wdm-doc-single-layout--no-tree { grid-template-columns: minmax(0, 1fr) clamp(240px, 19vw, 300px); } /* The whole aside sticks, not an individual panel. Capped to the viewport with * its own scroll so a long tree or outline can't run off-screen. Applies to * both rails. */ .wdm-doc-single-sidebar { position: sticky; top: 24px; max-height: calc(100vh - 48px); overflow-y: auto; overscroll-behavior: contain; } /* ---------- Sidebar / panels ---------- */ .wdm-doc-panel { background: var(--wdm-white); border: 1px solid var(--wdm-border); border-radius: var(--wdm-radius); padding: 20px; margin-bottom: 20px; } .wdm-doc-panel--sticky { position: sticky; top: 24px; } .wdm-doc-panel-title { font-family: var(--wdm-font-display); font-size: 13px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--wdm-text-secondary); margin: 0 0 14px; font-weight: 600; } /* ---------- Sidebar trees ---------- * Shared by "On This Page" (content outline) and "Issue Tree" (doc hierarchy). * Nesting is expressed with a guide rail on the nested