/* Restivo Homelab — identity stylesheet (v3, from Claude Design project "Restivo Homelab Visual Identity", 2026-09-02) Newsreader (headings) · Public Sans (body) · Source Code Pro (code) Light and dark tokens; every text/background pair ≥ 4.5:1. Fonts are linked from each page's . */ /* ---------- Tokens ---------- */ :root { --bg: #F6F3EC; /* Paper */ --surface: #FDFCF9; /* Sheet */ --ink: #1C1B18; /* Ink */ --muted: #5C5A53; /* Graphite */ --rule: #D6D1C6; /* Rule */ --primary: #1D3FB2; /* Cobalt */ --on-primary: #FFFFFF; --success: #1D6B3B; /* Verified */ --warn: #8A5600; /* Caution */ --serif: "Newsreader", Georgia, "Times New Roman", serif; --sans: "Public Sans", system-ui, -apple-system, "Segoe UI", sans-serif; --mono: "Source Code Pro", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --fs-h1: clamp(34px, 1.6vw + 24px, 46px); --fs-h2: 30px; --fs-h3: 19px; --fs-body: 17px; --fs-small: 14px; --fs-code: 14.5px; --lh-head: 1.1; --lh-body: 1.55; --wrap: 960px; --prose: 720px; --gutter: 24px; --radius: 2px; color-scheme: light; } @media (prefers-color-scheme: dark) { :root { --bg: #17181B; /* Slate */ --surface: #1F2024; /* Panel */ --ink: #ECE8DF; /* Bone */ --muted: #A6A297; /* Ash */ --rule: #35373D; /* Rule */ --primary: #8AA6FF; /* Cobalt lite */ --on-primary: #17181B; --success: #6CC98A; /* Verified */ --warn: #E3B75C; /* Caution */ color-scheme: dark; } } /* Optional manual override, same values as the media query */ :root[data-theme="dark"] { --bg:#17181B; --surface:#1F2024; --ink:#ECE8DF; --muted:#A6A297; --rule:#35373D; --primary:#8AA6FF; --on-primary:#17181B; --success:#6CC98A; --warn:#E3B75C; color-scheme: dark; } :root[data-theme="light"] { --bg:#F6F3EC; --surface:#FDFCF9; --ink:#1C1B18; --muted:#5C5A53; --rule:#D6D1C6; --primary:#1D3FB2; --on-primary:#FFFFFF; --success:#1D6B3B; --warn:#8A5600; color-scheme: light; } /* ---------- Base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--bg); color: var(--ink); font: 400 var(--fs-body)/var(--lh-body) var(--sans); font-feature-settings: "kern", "liga"; text-rendering: optimizeLegibility; } .wrap { max-width: var(--wrap); margin: 0 auto; padding: 0 var(--gutter); } .prose { max-width: var(--prose); margin: 0 auto; padding: 0 var(--gutter); } main, main.wrap, main.prose { padding-top: 40px; padding-bottom: 72px; } h1, h2, h3, h4 { margin: 0; color: var(--ink); text-wrap: balance; } h1 { font: 500 var(--fs-h1)/var(--lh-head) var(--serif); letter-spacing: -0.015em; margin-bottom: 20px; } h2 { font: 500 var(--fs-h2)/1.15 var(--serif); letter-spacing: -0.01em; margin: 56px 0 18px; padding-top: 18px; border-top: 1px solid var(--rule); } h3 { font: 600 var(--fs-h3)/1.3 var(--sans); margin: 32px 0 8px; } p, ul, ol { margin: 0 0 1.05em; } ul, ol { padding-left: 1.4em; } li { margin-bottom: 0.4em; } li::marker { color: var(--muted); } strong { font-weight: 600; } em { font-style: italic; } small, .small { font-size: var(--fs-small); line-height: 1.45; } .lede { font: 400 21px/1.4 var(--serif); color: var(--ink); margin-bottom: 1.2em; } .note { font-size: var(--fs-small); color: var(--muted); padding: 10px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); } hr { border: 0; height: 3px; margin: 48px 0; background: linear-gradient(var(--ink), var(--ink)) top / 100% 1px no-repeat, linear-gradient(var(--rule), var(--rule)) bottom / 100% 1px no-repeat; } img { max-width: 100%; height: auto; display: block; } /* Links */ a { color: var(--primary); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; text-decoration-color: color-mix(in srgb, var(--primary) 45%, transparent); } a:hover { text-decoration-color: currentColor; } h2 a, h3 a { color: inherit; text-decoration: none; } h2 a:hover, h3 a:hover { color: var(--primary); } /* Focus rings */ :focus { outline: none; } :focus-visible { outline: 2px solid var(--primary); outline-offset: 3px; border-radius: var(--radius); } .btn:focus-visible { outline-offset: 2px; } /* Skip link */ .skip-link { position: absolute; left: 12px; top: -100px; padding: 8px 12px; background: var(--ink); color: var(--bg); font: 600 var(--fs-small)/1 var(--sans); text-decoration: none; z-index: 100; } .skip-link:focus { top: 12px; } /* ---------- Header + nav ---------- */ header.site { background: var(--bg); border-bottom: 1px solid var(--ink); box-shadow: 0 4px 0 -3px var(--rule); /* second hairline: a double rule */ } header.site .wrap { display: flex; align-items: baseline; justify-content: space-between; gap: 24px; flex-wrap: wrap; padding-top: 18px; padding-bottom: 16px; } .brand { font: 500 22px/1 var(--serif); letter-spacing: -0.01em; color: var(--ink); text-decoration: none; } .brand:hover { color: var(--primary); } nav { display: flex; gap: 22px; flex-wrap: wrap; } nav a { font: 600 13px/1 var(--sans); letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); text-decoration: none; padding: 4px 0; border-bottom: 2px solid transparent; } nav a:hover, nav a[aria-current="page"] { border-bottom-color: var(--primary); color: var(--ink); } /* ---------- Hero ---------- */ .hero { display: grid; grid-template-columns: minmax(0, 1fr) 400px; gap: 56px; align-items: start; padding-top: 24px; } .hero-copy p { font-size: 18px; max-width: 34em; } .hero-copy p:first-of-type { font: 400 21px/1.4 var(--serif); } .checklist { background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--ink); padding: 20px 22px 22px; } .checklist h2 { font: 600 var(--fs-h3)/1.3 var(--sans); margin: 0 0 6px; padding: 0; border: 0; } .checklist > p { font-size: var(--fs-small); color: var(--muted); margin-bottom: 12px; } .tally { font: 600 13px/1 var(--mono); letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); padding: 10px 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule); margin-bottom: 8px; font-variant-numeric: tabular-nums; } .checklist ul { list-style: none; padding: 0; margin: 0 0 18px; } .checklist li { margin: 0; border-bottom: 1px solid var(--rule); } .checklist li:last-child { border-bottom: 0; } .checklist label { display: grid; grid-template-columns: 18px 1fr; gap: 12px; align-items: start; padding: 9px 0; font-size: var(--fs-small); line-height: 1.45; cursor: pointer; } .checklist input[type="checkbox"] { width: 18px; height: 18px; margin: 2px 0 0; accent-color: var(--success); } .checklist input:checked + span, .checklist li:has(input:checked) { color: var(--muted); } .checklist .btn { width: 100%; } /* ---------- Buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 44px; padding: 10px 20px; background: var(--primary); color: var(--on-primary); border: 1px solid var(--primary); border-radius: var(--radius); font: 600 15px/1.2 var(--sans); text-decoration: none; cursor: pointer; transition: background .12s, border-color .12s; } .btn:hover { background: color-mix(in srgb, var(--primary) 88%, var(--ink)); border-color: color-mix(in srgb, var(--primary) 88%, var(--ink)); color: var(--on-primary); } .btn:active { transform: translateY(1px); } .btn.quiet { background: transparent; color: var(--ink); border-color: var(--ink); } .btn.quiet:hover { background: var(--surface); color: var(--primary); border-color: var(--primary); } /* ---------- Product boxes ---------- */ .cardbox { display: grid; grid-template-columns: 168px minmax(0, 1fr); gap: 28px; padding: 28px 0; border-top: 1px solid var(--rule); } .cardbox:last-of-type { border-bottom: 1px solid var(--rule); } .cardbox img { width: 168px; border: 1px solid var(--rule); background: var(--surface); } .cardbox h3 { margin: 4px 0 8px; font: 500 26px/1.15 var(--serif); letter-spacing: -0.01em; } .cardbox h2 { margin: 4px 0 8px; padding: 0; border: 0; font: 500 26px/1.15 var(--serif); letter-spacing: -0.01em; } .cardbox p { margin-bottom: 16px; color: var(--ink); max-width: 38em; } .buyrow { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; } .price { font: 500 26px/1 var(--serif); font-variant-numeric: tabular-nums lining-nums; color: var(--ink); } /* Purchase box on product pages */ .cardbox.buy { background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--ink); padding: 28px; margin: 32px 0; } .cardbox.buy .price { font-size: 32px; } .cardbox.buy p { margin-bottom: 12px; } .cardbox.buy .buyrow { margin: 6px 0 16px; } .upcoming { font: 600 var(--fs-small)/1.45 var(--sans); color: var(--warn); } .upcoming::before { content: "\25B2\00A0"; font-size: 10px; vertical-align: 2px; } /* ---------- Email capture ---------- */ .capture { background: var(--surface); border: 1px solid var(--rule); border-top: 3px solid var(--primary); padding: 26px 28px 24px; margin: 48px 0; } .capture h2 { margin: 0 0 8px; padding: 0; border: 0; font-size: 26px; } .capture p { max-width: 44em; } .capture p:last-child { font-size: var(--fs-small); color: var(--muted); margin: 10px 0 0; } form.signup { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0 0; } form.signup label { display: block; width: 100%; font: 600 13px/1 var(--sans); letter-spacing: .04em; text-transform: uppercase; color: var(--muted); } form.signup input[type="email"] { flex: 1 1 260px; min-height: 44px; padding: 10px 12px; background: var(--bg); color: var(--ink); border: 1px solid var(--muted); border-radius: var(--radius); font: 400 16px/1.2 var(--sans); } form.signup input[type="email"]::placeholder { color: var(--muted); } form.signup input[type="email"]:focus-visible { border-color: var(--primary); outline-offset: 0; } /* ---------- Guide index entries ---------- */ .entry { padding: 28px 0; border-top: 1px solid var(--rule); } .entry:last-of-type { border-bottom: 1px solid var(--rule); } .entry h2 { margin: 0 0 10px; padding: 0; border: 0; font-size: 26px; } .entry p { max-width: 40em; } .entry > a { font-weight: 600; } /* ---------- Article body ---------- */ .prose h2 { margin-top: 56px; } .prose .capture h2, .prose .entry h2 { margin-top: 0; } .prose ul, .prose ol { padding-left: 1.5em; } .prose li { margin-bottom: 0.55em; } .prose blockquote { margin: 0 0 1.2em; padding-left: 20px; border-left: 2px solid var(--ink); font-style: italic; } /* Tables */ table { width: 100%; border-collapse: collapse; margin: 24px 0 32px; font-size: 15px; line-height: 1.4; font-variant-numeric: tabular-nums lining-nums; } thead th { font: 600 12.5px/1.3 var(--mono); letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); text-align: left; padding: 0 12px 8px 0; border-bottom: 1px solid var(--ink); } td { padding: 9px 12px 9px 0; border-bottom: 1px solid var(--rule); vertical-align: top; } td:first-child, th:first-child { padding-left: 0; } td:last-child, th:last-child { padding-right: 0; } tbody tr:hover td { background: var(--surface); } /* Code */ code, kbd, samp { font-family: var(--mono); font-size: 0.92em; background: var(--surface); border: 1px solid var(--rule); border-radius: var(--radius); padding: 1px 5px; } pre { font: 400 var(--fs-code)/1.55 var(--mono); background: var(--surface); border: 1px solid var(--rule); border-left: 1px solid var(--ink); padding: 18px 20px; margin: 24px 0 32px; overflow-x: auto; tab-size: 4; } pre code { background: none; border: 0; padding: 0; font-size: inherit; } /* ---------- Footer ---------- */ footer.site { border-top: 1px solid var(--ink); box-shadow: inset 0 4px 0 -3px var(--rule); padding: 28px 0 40px; font-size: var(--fs-small); color: var(--muted); } footer.site .wrap { display: flex; justify-content: space-between; gap: 24px; flex-wrap: wrap; } footer.site p { margin: 0; } footer.site a { color: var(--ink); } /* ---------- Responsive ---------- */ @media (max-width: 820px) { .hero { grid-template-columns: 1fr; gap: 36px; } :root { --fs-h2: 26px; } } @media (max-width: 560px) { :root { --gutter: 18px; --fs-body: 16px; --fs-h2: 24px; } main, main.wrap, main.prose { padding-top: 28px; padding-bottom: 56px; } header.site .wrap { padding-top: 14px; padding-bottom: 12px; gap: 12px; } nav { gap: 14px 18px; } .hero-copy p, .lede, .hero-copy p:first-of-type { font-size: 18px; } .cardbox { grid-template-columns: 104px minmax(0, 1fr); gap: 16px; } .cardbox img { width: 104px; } .cardbox h3, .cardbox h2 { font-size: 22px; } .cardbox.buy { grid-template-columns: 1fr; padding: 20px; } .cardbox.buy img { width: 140px; } .capture { padding: 20px 18px; } .btn { width: 100%; } .buyrow .btn { width: auto; } table { font-size: 14px; display: block; overflow-x: auto; } } @media print { header.site, footer.site, .capture, .skip-link { display: none; } body { background: #fff; color: #000; } } @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } } /* Honeypot: a field only a bot fills in. */ .hp { position: absolute; left: -9999px; }