/* Theme Name: Lumina Blog Theme URI: https://blog.luminateleprompt.com/ Author: Lumina Author URI: https://luminateleprompt.com/ Description: Lumina 博客主题。把主站「安静的声场层」视觉语言带到 WordPress 的文章与页面：夜间为默认调色板，访客可在深色与浅色之间切换；导航、页脚、字体与间距与主站保持一致，正文使用窄阅读栏。 Version: 1.0.0 Requires at least: 6.0 Tested up to: 7.1 Requires PHP: 7.4 License: GNU General Public License v2 or later License URI: https://www.gnu.org/licenses/gpl-2.0.html Tags: blog, custom-menu, featured-images, translation-ready */ /* ========================================================================== Theme model The visitor chooses between two complete palettes. `:root` carries the night palette and is the default while has no data-theme attribute; `:root[data-theme="light"]` swaps in the light palette. The choice persists in localStorage['lumina-blog-theme'] and is written before the first paint by assets/theme-init.js. prefers-color-scheme is deliberately NOT consulted for the palette: the operating system must never silently override an explicit visitor choice, and a first visit always starts on the night palette. ========================================================================== */ /* Scriptless fallback only: theme-init.js always writes data-theme before the first paint, so the rules below own the reached palette; this block can only influence a visitor who has not been given a choice yet, and it never carries palette tokens. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { color-scheme: dark; } } :root { color-scheme: light dark; --bg: #111820; --surface: #18232c; --surface-soft: #202d37; --surface-raised: #1c2832; --text-1: #eef3f5; --text-2: #a6b4bd; --action: #96baf6; --action-strong: #aecbff; --action-ink: #111820; --live: #67a9a1; --border: #34434e; --border-strong: #53636e; --focus: #aecbff; --danger: #ff9aa6; --warning: #e0c37a; /* Ambient layer: the logo violet rises behind the page top on the night canvas. Atmosphere only, never an interactive accent. */ --ambient-layer: radial-gradient(62% 50% at 74% 17%, color-mix(in srgb, #5a43fa 12%, transparent), transparent 72%), radial-gradient(52% 44% at 12% 6%, color-mix(in srgb, #4471fa 8%, transparent), transparent 70%); --glass-edge: color-mix(in srgb, #fff 14%, transparent); --panel-shadow: 0 30px 80px color-mix(in srgb, #000 52%, transparent); --max: 1180px; --page-gutter: 32px; --section-y: 86px; --section-y-compact: 58px; --touch-min: 44px; --touch-gap: 8px; --radius-control: 14px; --radius-surface: 20px; --radius-media: 28px; /* Type scale: one source for the blog. Headings read from these tokens instead of repeating clamps. Display weight is 600, tracking never tighter than -0.025em, and body copy never drops below 16px. */ --type-display: clamp(2.4rem, 5vw, 3.9rem); --type-title: clamp(2.5rem, 5.2vw, 4.4rem); --type-h2: clamp(1.6rem, 2.7vw, 2.2rem); --type-h3: 1.08rem; --type-lead: clamp(1.06rem, 1.6vw, 1.22rem); --type-body: 1rem; --type-sm: 0.88rem; --type-xs: 0.8rem; --leading-display: 1.12; --leading-heading: 1.24; --leading-snug: 1.35; --leading-body: 1.66; --leading-relaxed: 1.75; /* Tonal band: sections are separated by a surface tone, not by a rule. */ --band-surface: color-mix(in srgb, var(--surface-soft) 66%, var(--bg)); /* Control boundaries: on the light palette a quiet separator is too faint to read as a control, so the light branch uses the secondary ink instead. */ --control-border: var(--border-strong); --duration-press: 160ms; --duration-ui: 190ms; --duration-drawer: 260ms; --ease-out: cubic-bezier(.23, 1, .32, 1); --ease-emphasized-out: cubic-bezier(.22, 1, .36, 1); --ease-drawer: cubic-bezier(.32, .72, 0, 1); --nav-height: 66px; --font-display: "Avenir Next", "Hiragino Sans GB", "PingFang SC", "Noto Sans SC", "Noto Sans CJK SC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --font-body: "Avenir Next", "Hiragino Sans GB", "PingFang SC", "Noto Sans SC", "Noto Sans CJK SC", -apple-system, BlinkMacSystemFont, "Helvetica Neue", Arial, sans-serif; --font: var(--font-body); --mono: "SF Mono", ui-monospace, Menlo, Consolas, monospace; } /* The light palette is only reachable through the visitor's explicit choice, persisted by assets/theme-init.js. */ :root[data-theme="dark"] { color-scheme: dark; } :root[data-theme="light"] { color-scheme: light; --bg: #f4f7f8; --surface: #ffffff; --surface-soft: #eaf0f2; --surface-raised: #f9fbfc; --text-1: #16324a; --text-2: #5b6d7a; --action: #2f647f; --action-strong: #27546b; --action-ink: #ffffff; --live: #2d746c; --border: #d8e1e6; --border-strong: #b8c7cf; --focus: #2f647f; --danger: #a53c49; --warning: #7a5a16; --ambient-layer: none; --band-surface: color-mix(in srgb, var(--surface-soft) 84%, var(--bg)); --control-border: color-mix(in srgb, var(--text-2) 78%, transparent); --glass-edge: color-mix(in srgb, #fff 74%, transparent); --panel-shadow: 0 30px 80px color-mix(in srgb, var(--text-1) 13%, transparent); } /* ========================================================================== Base ========================================================================== */ * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 84px; background: var(--bg); -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } body { margin: 0; min-width: 0; min-height: 100dvh; overflow-x: clip; background-color: var(--bg); background-image: var(--ambient-layer); background-repeat: no-repeat; background-position: center top; background-size: 100% 150vh; color: var(--text-1); font-family: var(--font); font-size: 16px; line-height: 1.66; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } body, button, input, select, textarea { font-family: var(--font-body); } img, svg, video { max-width: 100%; } img { height: auto; } a { color: var(--action); text-underline-offset: 0.18em; } button, a { touch-action: manipulation; -webkit-tap-highlight-color: color-mix(in srgb, var(--action) 18%, transparent); } button { color: inherit; } p, h1, h2, h3, h4, ul, ol, dl, figure { margin-top: 0; } h1, h2, h3, h4 { color: var(--text-1); font-family: var(--font-display); font-weight: 600; letter-spacing: -0.025em; text-wrap: balance; } h1 { font-size: var(--type-display); line-height: var(--leading-display); margin-bottom: 22px; } h2 { font-size: var(--type-h2); line-height: var(--leading-heading); margin-bottom: 14px; } h3 { font-size: var(--type-h3); line-height: var(--leading-snug); margin-bottom: 8px; letter-spacing: -0.018em; } p { color: var(--text-2); text-wrap: pretty; } ::selection { background: var(--action); color: var(--surface); } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; } [hidden] { display: none !important; } .mono, code { font-family: var(--mono); font-variant-numeric: tabular-nums; } code { overflow-wrap: anywhere; } .screen-reader-text { border: 0; clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } .skip-link { position: fixed; left: 16px; top: 10px; z-index: 1000; transform: translateY(-160%); background: var(--surface); color: var(--text-1); border: 1px solid var(--border-strong); border-radius: var(--radius-control); padding: 9px 12px; transition: transform var(--duration-ui) var(--ease-out); } .skip-link:focus { transform: translateY(0); } .actions { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; } .alignleft { float: left; margin: 6px 24px 18px 0; } .alignright { float: right; margin: 6px 0 18px 24px; } .aligncenter { display: block; margin: 26px auto; } .wp-caption { max-width: 100%; } .wp-caption-text, .gallery-caption { font-size: var(--type-sm); color: var(--text-2); margin-top: 8px; } .bypostauthor > .comment-body .comment-meta { color: var(--text-1); font-weight: 700; } .wp-smiley { border: 0; } /* ========================================================================== Header: the main-site chrome, mirrored ========================================================================== */ .site-nav { position: sticky; top: 0; z-index: 100; height: 66px; /* One nav surface: the main site's 92% alpha, no blur. Alpha compositing is cheap; backdrop-filter recomputes every frame. */ background: color-mix(in srgb, var(--bg) 92%, transparent); border-bottom: 1px solid var(--border); } /* One shell measure for the whole blog: the container keeps the main site's max-width and owns the gutter as inline padding. */ .page, .nav-inner, .footer-inner { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--page-gutter); } .nav-inner { height: 100%; margin: 0 auto; display: flex; align-items: center; gap: 24px; } .brand { display: inline-flex; align-items: center; gap: 9px; color: var(--text-1); font-size: 1.06rem; font-weight: 600; font-family: var(--font-display); text-decoration: none; letter-spacing: -0.02em; } .brand img { width: 30px; height: 30px; border-radius: 0; } .nav-links { margin-left: auto; display: flex; align-items: center; gap: 4px; overscroll-behavior: contain; } .nav-links > a { display: inline-flex; min-height: 44px; align-items: center; padding: 0 12px; border-radius: var(--radius-control); color: var(--text-2); font-size: 0.94rem; font-weight: 600; text-decoration: none; transition: color var(--duration-ui) var(--ease-out), background-color var(--duration-ui) var(--ease-out), transform var(--duration-press) var(--ease-out); } .nav-links > a[aria-current="page"] { color: var(--text-1); background: var(--surface-soft); } /* The navigation download entry is an outlined control: the page keeps exactly one solid primary per screen, and the navigation never supplies one. */ .nav-links .nav-cta { margin-left: 8px; padding: 0 15px; background: var(--surface); color: var(--text-1); border: 1px solid var(--control-border); } /* Login sits at the far right, a hairline sibling of the CTA. */ .nav-login { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch-min); padding: 0 16px; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface); color: var(--text-1); font-family: var(--font-display); font-size: 0.92rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background-color var(--duration-ui) var(--ease-out), border-color var(--duration-ui) var(--ease-out), color var(--duration-ui) var(--ease-out); } .menu-button, .menu-backdrop { display: none; } /* Palette switcher. The markup and its ARIA ship in the header; theme-init.js adds the "js" class before first paint, so a scriptless visitor never sees a control that cannot change anything. */ .theme-switch { flex: 0 0 auto; display: none; align-items: center; gap: 9px; min-height: var(--touch-min); min-width: var(--touch-min); padding: 0 11px 0 9px; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface); color: var(--text-2); font: inherit; font-size: 0.84rem; font-weight: 650; white-space: nowrap; cursor: pointer; transition: color var(--duration-ui) var(--ease-out), background-color var(--duration-ui) var(--ease-out), border-color var(--duration-ui) var(--ease-out); } html.js .theme-switch { display: inline-flex; } /* One identical switch on both palettes: a 36x20 track and a 16px thumb that only changes position, plus the visible state word. */ .theme-switch-track { position: relative; flex: 0 0 auto; width: 36px; height: 20px; border: 1px solid var(--control-border); border-radius: 999px; background: color-mix(in srgb, var(--text-2) 46%, var(--surface-soft)); transition: background-color var(--duration-ui) var(--ease-out), border-color var(--duration-ui) var(--ease-out); } .theme-switch-thumb { position: absolute; top: 1px; left: 1px; width: 16px; height: 16px; border-radius: 50%; background: var(--text-1); transition: transform var(--duration-ui) var(--ease-out), background-color var(--duration-ui) var(--ease-out); } .theme-switch[aria-checked="true"] .theme-switch-track { border-color: var(--action); background: var(--action); } .theme-switch[aria-checked="true"] .theme-switch-thumb { transform: translateX(16px); background: var(--action-ink); } .theme-switch[aria-checked="true"] .theme-switch-label { color: var(--text-1); } /* ========================================================================== Controls ========================================================================== */ .button { min-height: 44px; border: 1px solid transparent; border-radius: var(--radius-control); padding: 11px 18px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--font-display); font-size: 0.98rem; line-height: 1.53; font-weight: 600; text-decoration: none; cursor: pointer; transition: transform var(--duration-press) var(--ease-out), background-color var(--duration-ui) var(--ease-out), border-color var(--duration-ui) var(--ease-out), color var(--duration-ui) var(--ease-out); } .button-primary { background: var(--action); color: var(--action-ink); } .button-secondary { background: var(--surface); color: var(--text-1); border-color: var(--control-border); } .button:active { transform: scale(0.97); } button:disabled { cursor: not-allowed; opacity: 0.52; } /* ========================================================================== Read mode: page shell, hero and grouped article list ========================================================================== */ .read-page { padding-bottom: var(--section-y); } .resources-hero { padding: 62px 0 26px; } .resources-heading { max-width: 680px; } .resources-heading h1 { font-size: var(--type-title); margin-bottom: 12px; } .resources-heading p { font-size: var(--type-lead); max-width: 60ch; margin-bottom: 0; } .resource-toolbar { display: grid; grid-template-columns: minmax(230px, 1fr) auto; gap: 24px; align-items: end; margin: 12px 0 6px; } .resource-toolbar .post-count { margin: 0 0 12px; font-size: var(--type-sm); white-space: nowrap; } .resource-toolbar .post-count .mono { color: var(--text-1); } .resource-toolbar .search-form { max-width: 640px; } .search-form { display: flex; flex-wrap: wrap; gap: 10px; align-items: end; } .search-field { flex: 1 1 220px; } .search-field label { display: block; font-size: .82rem; font-weight: 700; margin-bottom: 7px; } .search-field input { width: 100%; min-height: 44px; border: 1px solid var(--control-border); border-radius: var(--radius-control); padding: 9px 12px; background: var(--surface); color: var(--text-1); font-size: 16px; } .post-index { margin-top: 10px; } .post-group + .post-group { margin-top: 46px; } .post-group-title { font-size: var(--type-sm); font-weight: 700; color: var(--text-2); letter-spacing: 0.02em; margin: 0 0 8px; } .resource-grid { border-top: 1px solid var(--border); } .resource-item { display: grid; grid-template-columns: 140px 1fr auto; gap: 24px; align-items: start; padding: 24px 0; border-bottom: 1px solid var(--border); } .resource-item h2 { font-size: 1.18rem; margin-bottom: 6px; } .resource-item h2 a { color: var(--text-1); text-decoration: none; } .resource-item p { margin: 0; max-width: 62ch; } .resource-item > a { min-height: var(--touch-min); display: inline-flex; align-items: center; font-weight: 700; white-space: nowrap; } .post-meta { display: grid; gap: 4px; color: var(--text-2); font-size: var(--type-sm); padding-top: 3px; } .post-meta time { color: var(--text-2); } .post-sticky { color: var(--text-1); font-weight: 700; } .resource-empty { margin-top: 22px; padding: 26px; background: var(--surface-soft); border-radius: var(--radius-surface); } .resource-empty p { margin-bottom: 0; max-width: 62ch; } .resource-empty p + p { margin-top: 10px; } .post-pagination { margin-top: 34px; border-top: 1px solid var(--border); padding-top: 22px; } .post-pagination ul { display: flex; flex-wrap: wrap; gap: var(--touch-gap); list-style: none; padding: 0; margin: 0; } .post-pagination a, .post-pagination span { min-height: var(--touch-min); min-width: var(--touch-min); display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--control-border); border-radius: var(--radius-control); background: var(--surface); color: var(--text-2); font-weight: 600; text-decoration: none; } .post-pagination .current { background: var(--action); border-color: var(--action); color: var(--action-ink); } .post-pagination .dots { border-color: transparent; background: none; } /* ========================================================================== Single post and page: narrow measure, stable headings, prose first ========================================================================== */ .article-shell { margin-top: 46px; } .article-shell > * { max-width: 68ch; } /* The prose body keeps the measure on its own children so a wide or full block can still use the shell width without ever exceeding it. */ .article-shell > .entry-content { max-width: none; } .entry-content > * { max-width: 68ch; } .entry-content > .alignwide { max-width: min(100%, 980px); } /* "Full" here means the full shell content box, never the viewport: the page can therefore never gain horizontal overflow. */ .entry-content > .alignfull { max-width: 100%; } .article-head { margin-bottom: 26px; } .article-head h1 { font-size: var(--type-title); margin-bottom: 14px; } .article-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; font-size: var(--type-sm); color: var(--text-2); } .article-meta a { color: var(--text-2); } .article-meta .mono { color: var(--text-2); } .post-thumbnail { margin: 0 0 30px; } .post-thumbnail img { display: block; width: 100%; border-radius: var(--radius-media); } .legal-copy { min-width: 0; } .article-shell .legal-copy { max-width: 68ch; } .legal-copy h1 { font-size: var(--type-title); } .legal-copy h2 { font-size: 1.45rem; margin: 46px 0 12px; scroll-margin-top: 92px; } .legal-copy h3 { font-size: 1.2rem; margin: 34px 0 10px; } .legal-copy h4 { font-size: 1.05rem; margin: 28px 0 8px; } .legal-copy p, .legal-copy li { line-height: var(--leading-relaxed); } .legal-copy p { margin: 0 0 18px; max-width: 68ch; } .legal-copy ul, .legal-copy ol { margin: 0 0 18px; padding-left: 22px; color: var(--text-2); } .legal-copy li + li { margin-top: 8px; } .legal-copy strong { color: var(--text-1); } .legal-copy blockquote { margin: 28px 0; padding: 4px 0 4px 20px; border-left: 2px solid var(--border-strong); color: var(--text-1); } .legal-copy blockquote p { color: var(--text-1); } .legal-copy code { background: var(--surface-soft); border-radius: 8px; padding: 2px 6px; font-size: .92em; } .legal-copy pre { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-surface); padding: 18px; overflow-x: auto; } .legal-copy pre code { background: none; padding: 0; } .legal-copy hr { border: 0; border-top: 1px solid var(--border); margin: 40px 0; } .legal-copy figure { margin: 26px 0; } .legal-copy figure img, .legal-copy .wp-block-image img, .legal-copy .wp-block-gallery img { border-radius: var(--radius-media); } .legal-copy figcaption, .legal-copy .wp-caption-text { font-size: var(--type-sm); color: var(--text-2); margin-top: 8px; } .legal-copy table { width: 100%; border-collapse: collapse; } .legal-copy th, .legal-copy td { text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--border); vertical-align: top; } .legal-copy th { color: var(--text-1); } .legal-copy .wp-block-table { overflow-x: auto; } .legal-copy .alignfull img, .legal-copy .alignfull video { max-width: 100%; } .post-pages { display: flex; flex-wrap: wrap; gap: var(--touch-gap); margin-top: 28px; } .post-pages a, .post-pages span { min-height: var(--touch-min); min-width: var(--touch-min); display: inline-flex; align-items: center; justify-content: center; padding: 0 12px; border: 1px solid var(--control-border); border-radius: var(--radius-control); background: var(--surface); color: var(--text-2); text-decoration: none; } .post-tags { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 30px 0 0; font-size: var(--type-sm); color: var(--text-2); } .post-tags-label { color: var(--text-2); font-weight: 700; } .related-resources { display: grid; gap: 8px; border-top: 1px solid var(--border); border-bottom: 1px solid var(--border); padding: 18px 0; margin: 42px 0 24px; } .related-resources a { min-height: var(--touch-min); display: inline-flex; align-items: center; } /* ========================================================================== Search, archive, 404 and comments ========================================================================== */ .search-form-page { margin: 0 0 26px; max-width: 620px; } .archive-description { max-width: 62ch; } .empty-state { margin: 46px 0 0; max-width: 760px; padding: 34px; background: var(--surface-soft); border-radius: var(--radius-media); } .empty-state h2 { max-width: 18em; } .empty-state p { max-width: 62ch; } .empty-state .actions { margin-top: 22px; } .comments-area { margin-top: 52px; border-top: 1px solid var(--border); padding-top: 30px; } .comments-title { font-size: 1.2rem; margin-bottom: 16px; } .comment-list { list-style: none; padding: 0; margin: 0; } .comment-list .children { list-style: none; padding-left: 22px; } .comment-body { padding: 18px 0; border-bottom: 1px solid var(--border); } .comment-meta { color: var(--text-2); font-size: var(--type-sm); } .comment-form label { display: block; font-size: var(--type-sm); font-weight: 700; margin-bottom: 6px; } .comment-form p { margin-bottom: 16px; } .comment-form input[type="text"], .comment-form input[type="email"], .comment-form input[type="url"], .comment-form textarea { width: 100%; min-height: var(--touch-min); border: 1px solid var(--control-border); border-radius: var(--radius-control); padding: 10px 12px; background: var(--surface); color: var(--text-1); font-size: 16px; } .comment-form textarea { min-height: 150px; } .comment-form .submit { min-height: 44px; border: 1px solid transparent; border-radius: var(--radius-control); padding: 11px 18px; background: var(--action); color: var(--action-ink); font-family: var(--font-display); font-size: 0.98rem; font-weight: 600; cursor: pointer; } /* ========================================================================== Footer ========================================================================== */ .footer { border-top: 1px solid var(--border); margin-top: 40px; padding: 38px 0 6px; } .footer-inner { display: grid; grid-template-columns: minmax(220px, .7fr) minmax(0, 1.3fr); gap: 58px; } .footer-brand p { max-width: 34ch; font-size: .88rem; margin-top: 7px; } .footer-groups { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; } .footer-group { display: grid; align-content: start; gap: 7px; } .footer-group strong { font-size: .78rem; color: var(--text-2); margin-bottom: 2px; } .footer-group a { display: inline-flex; align-items: center; min-height: var(--touch-min); min-width: var(--touch-min); color: var(--text-2); text-decoration: none; font-size: .88rem; } .footer-group a[aria-current="page"] { color: var(--text-1); font-weight: 700; } /* ========================================================================== Hover behaviour is inside (hover: hover) and (pointer: fine) ========================================================================== */ @media (hover: hover) and (pointer: fine) { .nav-links > a:hover { background: var(--surface-soft); color: var(--text-1); } .nav-login:hover { background: var(--surface-raised); border-color: var(--action); color: var(--text-1); } .theme-switch:hover { color: var(--text-1); border-color: var(--text-2); } .button-primary:hover { background: var(--action-strong); transform: scale(1.03); } .button-secondary:hover { background: var(--surface-raised); border-color: var(--action); transform: scale(1.03); } .button-primary:active, .button-secondary:active { transform: scale(0.97); } .footer-group a:hover, .resource-item > a:hover { color: var(--text-1); } .resource-item h2 a:hover { color: var(--action); } .post-pagination a:hover { color: var(--text-1); border-color: var(--action); } } /* ========================================================================== Responsive contract: 1440 / 1024 / 768 / 390 / 375 ========================================================================== */ @media (max-width: 1024px) { :root { --page-gutter: 24px; } .resource-toolbar { grid-template-columns: 1fr; gap: 10px; } .resource-toolbar .post-count { margin-bottom: 0; } } @media (max-width: 767px) { :root { --page-gutter: 18px; --section-y: 62px; --section-y-compact: 46px; --nav-height: 64px; } html { scroll-padding-top: 78px; } .site-nav { height: 64px; } .menu-button { order: 2; margin-left: 0; min-width: 48px; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--border-strong); border-radius: var(--radius-control); background: var(--surface); color: var(--text-1); font: inherit; font-weight: 680; } .theme-switch { order: 1; margin-left: auto; } .nav-inner { gap: 10px; } .nav-login { order: 1; } .menu-backdrop { display: block; position: fixed; inset: 64px 0 0; background: color-mix(in srgb, #000 34%, transparent); opacity: 0; pointer-events: none; transition: opacity var(--duration-drawer) var(--ease-drawer); } .menu-backdrop[data-open="true"] { opacity: 1; pointer-events: auto; } .nav-links { position: fixed; top: 64px; right: 0; width: min(340px, 92vw); height: calc(100dvh - 64px); padding: 18px; display: flex; flex-direction: column; align-items: stretch; gap: var(--touch-gap); background: var(--surface); border-left: 1px solid var(--border); box-shadow: -20px 0 55px color-mix(in srgb, #000 16%, transparent); clip-path: inset(0 0 0 100%); opacity: 0; visibility: hidden; pointer-events: none; transition: clip-path var(--duration-drawer) var(--ease-drawer), opacity var(--duration-drawer) var(--ease-drawer), visibility 0s linear var(--duration-drawer); } .nav-links[data-open="true"] { clip-path: inset(0); opacity: 1; visibility: visible; pointer-events: auto; transition: clip-path var(--duration-drawer) var(--ease-drawer), opacity var(--duration-drawer) var(--ease-drawer), visibility 0s linear 0s; } .nav-links > a { min-height: 48px; padding-inline: 14px; } .nav-links .nav-cta { margin: 8px 0 0; } .resources-hero { padding-top: 44px; } .resources-heading h1 { font-size: clamp(2.45rem, 12vw, 3.9rem); } .article-shell { margin-top: 34px; } .article-head h1 { font-size: clamp(2.35rem, 12vw, 3.7rem); } .legal-copy p, .legal-copy li { max-width: 60ch; } .resource-item { grid-template-columns: 1fr; gap: 8px; } .resource-item > a { white-space: normal; } .post-meta { display: flex; flex-wrap: wrap; gap: 4px 14px; padding-top: 0; } .footer-inner { grid-template-columns: 1fr; gap: 32px; } .footer-groups { grid-template-columns: repeat(2, minmax(0, 1fr)); } .footer-group { gap: var(--touch-gap); } .footer-group a { min-height: var(--touch-min); } } @media (max-width: 390px) { :root { --page-gutter: 16px; } .actions { align-items: stretch; flex-direction: column; } .actions .button { width: 100%; } .search-form { align-items: stretch; flex-direction: column; } .search-form .button { width: 100%; } .footer-groups { grid-template-columns: 1fr 1fr; } } /* ========================================================================== Reduced motion and reduced transparency ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; scroll-behavior: auto !important; } .skip-link, .nav-links, .menu-backdrop, .button, .post-pagination a, .post-pagination span { transition-duration: 0.01ms !important; } .theme-switch, .theme-switch-thumb { transition-duration: 0.01ms !important; } } @media (prefers-reduced-transparency: reduce) { .site-nav { background: var(--bg); } }