/* Theme Name: TechInfo Daily Theme URI: https://techinfodaily.com Author: TechInfo Daily Description: Custom editorial theme for TechInfo Daily. Light and dark modes, fast, accessible, no dependencies. Version: 1.0.0 Requires at least: 6.0 Tested up to: 6.8 Requires PHP: 7.4 License: GPL-2.0-or-later Text Domain: techinfodaily Tags: blog, news, two-columns, custom-menu, featured-images, editor-style */ /* ========================================================================== TechInfo Daily — styles.css Mobile-first. Tokens drive both themes; [data-theme="dark"] on . ========================================================================== */ /* ---------- 1. Design tokens ---------- */ :root{ /* palette — light */ --bg:#FAFAF9; /* page */ --surface:#FFFFFF; /* cards, header */ --surface-2:#F5F5F4; /* wells, table stripes */ --ink:#1C1917; /* primary text */ --ink-2:#57534E; /* secondary text */ --ink-3:#78716C; /* meta text */ --line:#E7E5E4; /* hairlines */ --line-2:#D6D3D1; /* stronger borders (inputs) */ --accent:#0F766E; /* deep teal — links, active states */ --accent-ink:#FFFFFF; /* text on accent */ --accent-soft:#F0FDFA; /* teal tint wash */ --accent-line:#99F6E4; /* teal tint border */ --warn-bg:#FFFBEB; --warn-line:#FDE68A; --warn-ink:#92400E; --code-bg:#1C1917; --code-ink:#E7E5E4; --code-accent:#5EEAD4; --shadow:0 1px 2px rgb(28 25 23 / .06), 0 4px 16px rgb(28 25 23 / .06); /* type */ --font:"Public Sans",system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:ui-monospace,"Cascadia Code",SFMono-Regular,Menlo,Consolas,monospace; /* spacing scale: 4 / 8 / 12 / 16 / 24 / 32 / 48 / 64 / 96 */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:24px; --s6:32px; --s7:48px; --s8:64px; --s9:96px; --radius:10px; color-scheme:light; } [data-theme="dark"]{ --bg:#151312; --surface:#1C1917; --surface-2:#292524; --ink:#F5F5F4; --ink-2:#C7C1BB; --ink-3:#A8A29E; --line:#312D2A; --line-2:#44403C; --accent:#2DD4BF; --accent-ink:#0F2E2A; --accent-soft:#132E2B; --accent-line:#155E56; --warn-bg:#2A2113; --warn-line:#6b5518; --warn-ink:#FCD34D; --code-bg:#0F0E0D; --code-ink:#E7E5E4; --code-accent:#5EEAD4; --shadow:0 1px 2px rgb(0 0 0 / .4), 0 4px 16px rgb(0 0 0 / .35); color-scheme:dark; } /* ---------- 2. Reset / base ---------- */ *,*::before,*::after{box-sizing:border-box} html{-webkit-text-size-adjust:100%} html:focus-within{scroll-behavior:smooth} body{ margin:0; background:var(--bg); color:var(--ink); font-family:var(--font); font-size:16px; line-height:1.6; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } img,svg,video{max-width:100%; height:auto; display:block} h1,h2,h3,h4{line-height:1.2; margin:0; text-wrap:balance; overflow-wrap:break-word} p{margin:0; text-wrap:pretty} a{color:var(--accent); text-decoration:none} a:hover{text-decoration:underline; text-underline-offset:3px} button{font:inherit; color:inherit; background:none; border:0; cursor:pointer; padding:0} :focus-visible{outline:2px solid var(--accent); outline-offset:2px; border-radius:4px} ::selection{background:var(--accent); color:var(--accent-ink)} @media (prefers-reduced-motion:reduce){ html:focus-within{scroll-behavior:auto} *,*::before,*::after{transition:none!important; animation-duration:.01ms!important} } .container{max-width:1200px; margin-inline:auto; padding-inline:20px} .visually-hidden{position:absolute!important; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0} .skip-link{position:absolute; left:-9999px; top:0; z-index:100; background:var(--accent); color:var(--accent-ink); padding:10px 16px; border-radius:0 0 8px 0; font-weight:600} .skip-link:focus{left:0} /* ---------- 3. Text utilities ---------- */ .kicker{display:inline-block; font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--accent)} a.kicker:hover{text-decoration:none; color:var(--accent)} .meta{font-size:13.5px; color:var(--ink-3)} .meta b{color:var(--ink-2); font-weight:600} .dek{font-size:17px; color:var(--ink-2); line-height:1.55} /* ---------- 4. Header ---------- */ .site-header{background:var(--surface); border-bottom:1px solid var(--line)} .masthead{display:flex; align-items:center; gap:var(--s4); padding-block:var(--s4)} .logo{display:flex; align-items:baseline; gap:2px; font-size:24px; font-weight:800; letter-spacing:-.5px; color:var(--ink); white-space:nowrap} .logo:hover{text-decoration:none} .logo .d{color:var(--accent); margin-left:6px} .logo .cursor{display:inline-block; width:9px; height:20px; background:var(--accent); margin-left:5px; transform:translateY(2px)} .tagline{display:none; font-size:13px; color:var(--ink-3); border-left:1px solid var(--line-2); padding-left:var(--s4); margin-left:var(--s1)} .head-actions{margin-left:auto; display:flex; align-items:center; gap:var(--s2)} .icon-btn{display:grid; place-items:center; width:40px; height:40px; border-radius:8px; color:var(--ink-2); border:1px solid transparent} .icon-btn:hover{background:var(--surface-2); color:var(--ink)} .icon-btn svg{width:20px; height:20px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round} [data-theme="dark"] .theme-toggle .moon{display:none} :root:not([data-theme="dark"]) .theme-toggle .sun{display:none} html:not([data-theme="dark"]) .theme-toggle .sun{display:none} /* category strip */ .cat-nav{border-top:1px solid var(--line)} .cat-nav ul{display:flex; gap:2px; list-style:none; margin:0; padding:0; overflow-x:auto; scrollbar-width:none} .cat-nav ul::-webkit-scrollbar{display:none} .cat-nav a{display:block; padding:11px 12px; font-size:14.5px; font-weight:600; color:var(--ink-2); white-space:nowrap; border-bottom:3px solid transparent} .cat-nav a:hover{color:var(--ink); text-decoration:none; border-bottom-color:var(--line-2)} .cat-nav a[aria-current="page"],.cat-nav a.is-active{color:var(--accent); border-bottom-color:var(--accent)} /* hamburger panel (secondary links) */ .menu-panel{display:none; border-top:1px solid var(--line); background:var(--surface)} .menu-panel.is-open{display:block} .menu-panel .container{display:grid; gap:var(--s2); padding-block:var(--s4); grid-template-columns:repeat(2,1fr)} .menu-panel a{color:var(--ink-2); font-size:15px; font-weight:600; padding:8px 0} .menu-panel a:hover{color:var(--accent)} /* ---------- 5. Footer ---------- */ .site-footer{margin-top:var(--s9); border-top:1px solid var(--line); background:var(--surface); font-size:14.5px} .footer-grid{display:grid; gap:var(--s6); padding-block:var(--s7); grid-template-columns:1fr} .footer-about p{color:var(--ink-2); max-width:34ch; margin-top:var(--s3)} .footer-col h3{font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin-bottom:var(--s3)} .footer-col ul{list-style:none; margin:0; padding:0; display:grid; gap:var(--s2)} .footer-col a{color:var(--ink-2)} .footer-col a:hover{color:var(--accent)} .footer-legal{border-top:1px solid var(--line); padding-block:var(--s4); display:flex; flex-wrap:wrap; gap:var(--s2) var(--s5); color:var(--ink-3); font-size:13px} .footer-legal a{color:var(--ink-3)} /* ---------- 6. Ad slots (placeholders; fixed heights = zero CLS) ---------- */ .ad-slot{display:grid; place-content:center; gap:4px; text-align:center; background:var(--surface-2); border:1px dashed var(--line-2); border-radius:var(--radius); color:var(--ink-3); padding:var(--s3)} .ad-slot::before{content:"Advertisement"; font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase} .ad-slot span{font-size:13px} .ad-slot--leader{min-height:110px; margin-block:var(--s6)} .ad-slot--inline{min-height:260px; margin-block:var(--s6)} .ad-slot--box{min-height:260px} /* ---------- 7. Cards & home sections ---------- */ .card{display:flex; flex-direction:column; gap:var(--s3); min-width:0} .card-media{aspect-ratio:16/9; border-radius:var(--radius); overflow:hidden; background:var(--surface-2); border:1px solid var(--line)} .card-media img{width:100%; height:100%; object-fit:cover} .card h3,.card h2{font-size:17.5px; font-weight:700; line-height:1.3} .card a{color:var(--ink)} .card a:hover{color:var(--accent)} .card .dek{font-size:14.5px; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden} .card--lead h3,.card--lead h2{font-size:22px} .card--lead .dek{-webkit-line-clamp:3} .post-row{display:flex; gap:var(--s4); align-items:flex-start; padding-block:var(--s4); border-top:1px solid var(--line); min-width:0} .post-row:first-of-type{border-top:0; padding-top:0} .post-row .thumb{flex:0 0 104px; aspect-ratio:16/11; border-radius:8px; overflow:hidden; background:var(--surface-2); border:1px solid var(--line)} .post-row .thumb img{width:100%; height:100%; object-fit:cover} .post-row h3{font-size:15.5px; font-weight:700; line-height:1.35} .post-row a{color:var(--ink)} .post-row a:hover{color:var(--accent)} .post-row .meta{margin-top:var(--s1)} .section-head{display:flex; align-items:baseline; justify-content:space-between; gap:var(--s4); margin-bottom:var(--s5)} .section-title{font-size:21px; font-weight:800; letter-spacing:-.3px} .section-title a{color:var(--ink)} .view-all{font-size:14px; font-weight:600; white-space:nowrap} .home-section{padding-block:var(--s7); border-top:1px solid var(--line)} .cat-block{display:grid; gap:var(--s5)} .grid-3{display:grid; gap:var(--s6) var(--s5); grid-template-columns:1fr} /* hero */ .hero{position:relative; border-radius:14px; overflow:hidden; margin-top:var(--s5); background:#1C1917} .hero img{width:100%; height:100%; object-fit:cover; position:absolute; inset:0; opacity:.9} .hero-inner{position:relative; z-index:1; display:flex; flex-direction:column; justify-content:flex-end; gap:var(--s3); min-height:380px; padding:var(--s5); background:linear-gradient(to top, rgb(12 10 9 / .88) 0%, rgb(12 10 9 / .45) 55%, rgb(12 10 9 / .15) 100%)} .hero .kicker{background:#0F766E; color:#fff; padding:4px 10px; border-radius:6px; width:fit-content} .hero .hero-title{color:#fff; font-size:clamp(26px, 5.5vw, 42px); font-weight:800; letter-spacing:-.5px; max-width:22ch} .hero .hero-title a{color:inherit} .hero .dek{color:rgb(255 255 255 / .85); max-width:60ch} .hero .meta{color:rgb(255 255 255 / .7)} .hero .meta b{color:rgb(255 255 255 / .9)} /* ---------- 8. Breadcrumbs ---------- */ .breadcrumbs{font-size:13px; color:var(--ink-3); margin-block:var(--s5) var(--s4)} .breadcrumbs ol{list-style:none; display:flex; flex-wrap:wrap; gap:var(--s1); margin:0; padding:0} .breadcrumbs li:not(:last-child)::after{content:"›"; margin-inline:6px; color:var(--line-2)} .breadcrumbs a{color:var(--ink-3)} .breadcrumbs a:hover{color:var(--accent)} .breadcrumbs [aria-current]{color:var(--ink-2); font-weight:500} /* ---------- 9. Article layout ---------- */ .article-grid{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--s7)} .article-main{max-width:700px; min-width:0; margin-inline:auto} .article-header h1{font-size:clamp(28px, 6vw, 38px); font-weight:800; letter-spacing:-.6px; margin-top:var(--s2)} .article-header .dek{margin-top:var(--s3); font-size:18px} .byline{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s3) var(--s4); margin-top:var(--s5); padding-block:var(--s4); border-block:1px solid var(--line)} .byline .avatar{width:44px; height:44px; border-radius:50%; overflow:hidden; flex-shrink:0} .byline-names{font-size:14px} .byline-names a{font-weight:700; color:var(--ink)} .byline-names a:hover{color:var(--accent)} .byline-dates{display:flex; flex-wrap:wrap; gap:2px 14px; font-size:13px; color:var(--ink-3)} .byline .share-row{margin-left:auto} .share-row{display:flex; gap:var(--s1)} .share-row a,.share-row button{display:grid; place-items:center; width:36px; height:36px; border-radius:8px; color:var(--ink-3); border:1px solid var(--line)} .share-row a:hover,.share-row button:hover{color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft)} .share-row svg{width:17px; height:17px; fill:currentColor} .share-row svg.stroke{fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round} .article-figure{margin:var(--s5) 0 0} .article-figure img{border-radius:var(--radius); border:1px solid var(--line); width:100%} .article-figure figcaption{font-size:13px; color:var(--ink-3); margin-top:var(--s2)} /* mobile TOC */ .toc-mobile{margin-top:var(--s5); border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)} .toc-mobile summary{list-style:none; display:flex; align-items:center; gap:var(--s2); padding:14px 16px; font-weight:700; font-size:15px; cursor:pointer} .toc-mobile summary::-webkit-details-marker{display:none} .toc-mobile summary::after{content:""; width:9px; height:9px; border-right:2px solid var(--ink-3); border-bottom:2px solid var(--ink-3); transform:rotate(45deg); margin-left:auto; transition:transform .15s} .toc-mobile[open] summary::after{transform:rotate(-135deg)} .toc-mobile .toc-list{padding:0 16px 14px} /* sidebar */ .article-aside{display:none} .aside-sticky{position:sticky; top:var(--s5); display:grid; gap:var(--s5)} .toc-box{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:var(--s4) var(--s4) var(--s3)} .toc-box h2{font-size:12px; font-weight:700; letter-spacing:.09em; text-transform:uppercase; color:var(--ink-3); margin-bottom:var(--s2)} .toc-list{list-style:none; margin:0; padding:0} .toc-list a{display:block; padding:7px 10px; margin-left:-10px; font-size:14px; color:var(--ink-2); border-radius:6px; line-height:1.4} .toc-list a:hover{color:var(--accent); text-decoration:none; background:var(--accent-soft)} .toc-list a.is-active{color:var(--accent); font-weight:600} /* ---------- 10. Prose (article body) ---------- */ .prose{font-size:18px; line-height:1.7; color:var(--ink)} .prose > *{margin-top:var(--s5); margin-bottom:0} .prose p{max-width:700px} .prose a{text-decoration:underline; text-underline-offset:3px; text-decoration-color:var(--accent-line)} .prose a:hover{text-decoration-color:var(--accent)} .prose h2{font-size:26px; font-weight:800; letter-spacing:-.4px; margin-top:var(--s7); scroll-margin-top:var(--s5)} .prose h2 + p, .prose h3 + p{margin-top:var(--s3)} .prose h3{font-size:20px; font-weight:700; margin-top:var(--s6)} .prose ul,.prose ol{padding-left:26px; display:grid; gap:var(--s2)} .prose li::marker{color:var(--accent); font-weight:700} .prose strong{font-weight:700} .prose :not(pre)>code{font-family:var(--mono); font-size:.86em; background:var(--surface-2); border:1px solid var(--line); border-radius:5px; padding:1px 6px; white-space:nowrap} .codeblock pre code{background:none; border:0; padding:0; white-space:inherit; font-size:inherit} .prose blockquote{border-left:3px solid var(--accent); padding:var(--s2) 0 var(--s2) var(--s5); color:var(--ink-2); font-size:19px; font-style:italic} .prose blockquote cite{display:block; margin-top:var(--s2); font-size:14px; font-style:normal; color:var(--ink-3)} .prose hr{border:0; border-top:1px solid var(--line); margin-top:var(--s7)} .prose figure{margin-inline:0} .prose img{border-radius:var(--radius); border:1px solid var(--line)} .prose figcaption{font-size:13px; color:var(--ink-3); margin-top:var(--s2)} /* numbered step lists */ .prose ol.steps{list-style:none; padding:0; counter-reset:step; gap:var(--s3)} .prose ol.steps > li{counter-increment:step; position:relative; padding-left:44px} .prose ol.steps > li::before{content:counter(step); position:absolute; left:0; top:1px; width:28px; height:28px; display:grid; place-items:center; background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--accent); font-size:14px; font-weight:700; border-radius:50%} /* code blocks */ .codeblock{margin-inline:0; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line)} .codeblock .codebar{display:flex; align-items:center; justify-content:space-between; padding:8px 14px; background:var(--code-bg); border-bottom:1px solid rgb(255 255 255 / .08)} .codeblock .lang{font-family:var(--mono); font-size:12px; color:var(--code-accent); letter-spacing:.04em} .codeblock .copy-btn{font-size:12.5px; font-weight:600; color:#A8A29E; display:flex; gap:6px; align-items:center; padding:3px 8px; border-radius:6px} .codeblock .copy-btn:hover{color:#fff; background:rgb(255 255 255 / .1)} .codeblock .copy-btn svg{width:14px; height:14px; stroke:currentColor; fill:none; stroke-width:1.8} .codeblock pre{margin:0; padding:var(--s4); background:var(--code-bg); color:var(--code-ink); overflow-x:auto; font-size:14.5px; line-height:1.65} .codeblock code{font-family:var(--mono)} .codeblock .prompt{color:var(--code-accent); user-select:none} .codeblock .comment{color:#78716C} /* callouts */ .callout{display:grid; grid-template-columns:22px 1fr; gap:var(--s3); padding:var(--s4) 18px; border-radius:var(--radius); font-size:16px; line-height:1.6} .callout svg{width:22px; height:22px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; margin-top:2px} .callout p{margin:0} .callout p + p{margin-top:var(--s2)} .callout b:first-child, .callout .callout-title{display:block; font-weight:700; margin-bottom:2px} .callout--tip{background:var(--accent-soft); border:1px solid var(--accent-line); color:var(--ink)} .callout--tip svg{color:var(--accent)} .callout--warning{background:var(--warn-bg); border:1px solid var(--warn-line)} .callout--warning svg,.callout--warning .callout-title{color:var(--warn-ink)} .callout--note{background:var(--surface-2); border:1px solid var(--line)} .callout--note svg{color:var(--ink-3)} /* tables */ .table-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch} .prose table{width:100%; border-collapse:collapse; font-size:15px; line-height:1.5} .prose th,.prose td{text-align:left; padding:10px 14px; border:1px solid var(--line); vertical-align:top} .prose th{background:var(--surface-2); font-size:13px; letter-spacing:.03em; text-transform:uppercase; color:var(--ink-2)} .prose td code{white-space:nowrap} /* quick-reference variant */ .table-qr{border:1px solid var(--accent-line); border-radius:var(--radius); overflow:hidden} .table-qr .qr-title{background:var(--accent); color:var(--accent-ink); font-weight:700; font-size:14px; letter-spacing:.02em; padding:10px 14px; display:flex; align-items:center; gap:8px} .table-qr .qr-title svg{width:16px; height:16px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round} .table-qr table{font-size:14.5px} .table-qr th{background:var(--accent-soft); color:var(--accent); text-transform:uppercase; font-size:12px; border-color:var(--accent-line)} [data-theme="dark"] .table-qr th{color:var(--accent)} .table-qr td{border-color:var(--accent-line)} .table-qr tbody tr:nth-child(even) td{background:color-mix(in srgb, var(--accent-soft) 45%, transparent)} /* FAQ */ .faq{border-top:2px solid var(--ink); margin-top:var(--s7)} .faq h2{margin-top:var(--s5)} .faq details{border-bottom:1px solid var(--line)} .faq summary{list-style:none; cursor:pointer; display:flex; align-items:center; gap:var(--s3); padding:18px 0; font-weight:700; font-size:17px} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+"; margin-left:auto; font-size:22px; font-weight:400; color:var(--accent); line-height:1; transition:transform .15s} .faq details[open] summary::after{transform:rotate(45deg)} .faq details p{padding-bottom:18px; color:var(--ink-2); font-size:16px; max-width:65ch} .faq details p + p{margin-top:var(--s2)} /* author box */ .author-box{display:flex; gap:var(--s4); align-items:flex-start; margin-top:var(--s7); padding:var(--s5); background:var(--surface); border:1px solid var(--line); border-radius:var(--radius)} .author-box .avatar{width:64px; height:64px; border-radius:50%; overflow:hidden; flex-shrink:0} .author-box h2{font-size:16px} .author-box .role{font-size:13px; color:var(--ink-3); margin-top:2px} .author-box p{font-size:15px; color:var(--ink-2); margin-top:var(--s2)} .author-box .author-links{margin-top:var(--s2); font-size:14px; font-weight:600} /* tags + related */ .tag-row{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s6)} .tag{font-size:13px; font-weight:600; color:var(--ink-2); background:var(--surface-2); border:1px solid var(--line); padding:5px 12px; border-radius:999px} .tag:hover{color:var(--accent); border-color:var(--accent-line); background:var(--accent-soft); text-decoration:none} .related{margin-top:var(--s8); border-top:2px solid var(--ink); padding-top:var(--s5)} /* ---------- 11. Archive / listing pages ---------- */ .page-head{padding-block:var(--s6) 0} .page-head h1{font-size:clamp(28px,5vw,36px); font-weight:800; letter-spacing:-.5px; margin-top:var(--s2)} .page-head .dek{margin-top:var(--s3); max-width:62ch} .archive-list{margin-top:var(--s6)} .archive-item{display:flex; gap:var(--s5); padding-block:var(--s5); border-top:1px solid var(--line)} .archive-item .thumb{flex:0 0 30%; max-width:280px; aspect-ratio:16/10; border-radius:var(--radius); overflow:hidden; border:1px solid var(--line); background:var(--surface-2)} .archive-item .thumb img{width:100%; height:100%; object-fit:cover} .archive-item h2{font-size:19px; font-weight:700; line-height:1.3} .archive-item h2 a{color:var(--ink)} .archive-item h2 a:hover{color:var(--accent)} .archive-item .dek{font-size:15px; margin-top:var(--s2); display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden} .archive-item .meta{margin-top:var(--s2)} .pagination{display:flex; gap:var(--s2); justify-content:center; margin-top:var(--s6); font-size:14.5px; font-weight:600} .pagination a,.pagination span{display:grid; place-items:center; min-width:40px; height:40px; padding-inline:10px; border-radius:8px; border:1px solid var(--line); color:var(--ink-2)} .pagination a:hover{border-color:var(--accent-line); color:var(--accent); background:var(--accent-soft); text-decoration:none} .pagination [aria-current]{background:var(--accent); border-color:var(--accent); color:var(--accent-ink)} .pagination .gap{border:0} /* ---------- 12. Forms ---------- */ .form-grid{display:grid; gap:var(--s4)} .field label{display:block; font-size:14px; font-weight:600; margin-bottom:6px} .field .hint{font-size:13px; color:var(--ink-3); font-weight:400} .field input,.field textarea,.field select{width:100%; padding:11px 14px; font:inherit; font-size:15.5px; color:var(--ink); background:var(--surface); border:1px solid var(--line-2); border-radius:8px} .field input:focus,.field textarea:focus,.field select:focus{outline:2px solid var(--accent); outline-offset:0; border-color:var(--accent)} .field textarea{min-height:160px; resize:vertical} .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px; background:var(--accent); color:var(--accent-ink); font-weight:700; font-size:15px; padding:12px 22px; border-radius:8px; border:1px solid transparent} .btn:hover{filter:brightness(1.08); text-decoration:none} .btn--ghost{background:transparent; color:var(--accent); border-color:var(--accent-line)} .btn--ghost:hover{background:var(--accent-soft); filter:none} /* search */ .search-form{display:flex; gap:var(--s2); max-width:560px} .search-form input[type="search"]{flex:1; padding:12px 16px; font:inherit; font-size:16px; color:var(--ink); background:var(--surface); border:1px solid var(--line-2); border-radius:8px} .search-form input:focus{outline:2px solid var(--accent); border-color:var(--accent)} .result-item{padding-block:var(--s5); border-top:1px solid var(--line)} .result-item h2{font-size:18px; font-weight:700} .result-item h2 a{color:var(--ink)} .result-item h2 a:hover{color:var(--accent)} .result-item p{font-size:15px; color:var(--ink-2); margin-top:var(--s2); max-width:70ch} .result-item mark{background:var(--accent-soft); color:var(--accent); font-weight:600; padding:0 2px; border-radius:3px} /* ---------- 13. Simple prose pages (policy, about) ---------- */ .page-prose{max-width:700px} .page-prose .prose{font-size:17px} .team-grid{display:grid; gap:var(--s5); grid-template-columns:1fr; margin-top:var(--s5)} .person-card{display:flex; gap:var(--s4); align-items:flex-start; padding:var(--s5); border:1px solid var(--line); border-radius:var(--radius); background:var(--surface)} .person-card .avatar{width:72px; height:72px; border-radius:50%; overflow:hidden; flex-shrink:0} .person-card h3{font-size:17px} .person-card h3 a{color:var(--ink)} .person-card .role{font-size:13px; color:var(--accent); font-weight:600; margin-top:2px} .person-card p{font-size:14.5px; color:var(--ink-2); margin-top:var(--s2)} /* 404 */ .error-page{max-width:640px; margin-inline:auto; padding-block:var(--s8); text-align:center} .error-code{font-family:var(--mono); font-size:15px; color:var(--code-ink); background:var(--code-bg); border-radius:var(--radius); padding:var(--s4) var(--s5); text-align:left; margin:var(--s6) 0; overflow-x:auto} .error-code .prompt{color:var(--code-accent)} .error-page h1{font-size:clamp(32px,7vw,44px); font-weight:800; letter-spacing:-.5px} .error-page .dek{margin-top:var(--s3)} .error-links{display:flex; flex-wrap:wrap; gap:var(--s2); justify-content:center; margin-top:var(--s5)} /* ---------- 14. Breakpoints ---------- */ @media (min-width:720px){ .tagline{display:block} .grid-3{grid-template-columns:repeat(3,1fr)} .cat-block{grid-template-columns:1.15fr 1fr; align-items:start} .menu-panel .container{grid-template-columns:repeat(3,1fr)} .footer-grid{grid-template-columns:1.4fr 1fr 1fr 1fr} .team-grid{grid-template-columns:1fr 1fr} .hero-inner{min-height:440px; padding:var(--s6)} .ad-slot--leader{min-height:120px} } @media (min-width:1000px){ .article-grid{grid-template-columns:minmax(0,1fr) 300px} .article-main{margin-inline:0} .article-aside{display:block} .toc-mobile{display:none} .menu-btn{display:none} .prose h2{scroll-margin-top:var(--s4)} }