/* Fonts are loaded via +
in each HTML instead of @import here. @import inside CSS forces
a serial round-trip (HTML -> CSS -> @import URL) that Lighthouse flags
as ~830ms render-blocking. The HTML form parallelises with the
main stylesheet. See tools/inject-font-preconnect.js. */
:root {
--bg: #fafaf6;
--surface: #ffffff;
--surface-2: #f3f3ee;
--border: #e8e7df;
--border-hover: #cdccc1;
--text: #1f2024;
--text-muted: #61636d;
--text-soft: #989aa3;
--accent: #10b981;
--accent-hover: #059669;
--accent-light: #ecfdf5;
--accent-soft: rgba(16,185,129,.07);
--highlight: #f59e0b;
--highlight-light: #fffbeb;
--green: #10b981;
--green-light: #ecfdf5;
--amber: #f59e0b;
--amber-light: #fffbeb;
--rose: #f43f5e;
--rose-light: #fff1f2;
--cyan: #06b6d4;
--cyan-light: #ecfeff;
--violet: #8b5cf6;
--violet-light: #f5f3ff;
--indigo: #6366f1;
--indigo-light: #eef2ff;
--orange: #f97316;
--orange-light: #fff7ed;
--pink: #ec4899;
--pink-light: #fdf2f8;
--sky: #0ea5e9;
--sky-light: #f0f9ff;
--code-bg: #1e293b;
--code-text: #e2e8f0;
--max-width: 1000px;
--max-width-narrow: 720px;
--sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
--mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
--radius: 14px;
--shadow: 0 1px 3px rgba(0,0,0,.04), 0 4px 12px rgba(0,0,0,.03);
--shadow-hover: 0 4px 16px rgba(16,185,129,.1), 0 1px 3px rgba(0,0,0,.04);
}
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
html { font-size: 16px; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }
body {
font-family: var(--sans);
background: var(--bg);
color: var(--text);
line-height: 1.65;
-webkit-font-smoothing: antialiased;
}
.container { max-width: var(--max-width); margin: 0 auto; padding: 0 1.5rem; }
a { color: var(--accent); text-decoration: none; transition: color .15s; }
a:hover { color: var(--accent-hover); }
/* ========== SITE HEADER ========== */
.site-header {
position: sticky;
top: 0;
z-index: 100;
padding: .875rem 0;
background: rgba(248,249,252,.88);
backdrop-filter: blur(16px);
border-bottom: 1px solid var(--border);
}
.site-header .container {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
}
.site-title {
font-family: var(--mono);
font-size: 1.0625rem;
font-weight: 700;
color: var(--text);
border-bottom: none;
white-space: nowrap;
display: inline-flex;
align-items: center;
gap: .375rem;
}
.site-title::before {
content: "";
width: 8px;
height: 8px;
border-radius: 50%;
background: var(--accent);
box-shadow: 0 0 0 3px var(--accent-light);
}
.site-title:hover { color: var(--accent); border-bottom: none; }
.site-tagline {
margin: 0;
color: var(--text-muted);
font-size: .8125rem;
font-weight: 500;
}
/* ========== HERO ========== */
.docs-hero {
padding: 3.5rem 0 3rem;
text-align: center;
position: relative;
overflow: hidden;
background: linear-gradient(180deg, var(--accent-light) 0%, var(--bg) 100%);
border-bottom: 1px solid var(--border);
}
.docs-hero::before {
content: '';
position: absolute;
top: -200px;
left: 50%;
transform: translateX(-50%);
width: 700px;
height: 700px;
background: radial-gradient(circle, rgba(16,185,129,.08) 0%, transparent 60%);
pointer-events: none;
}
.docs-hero .emoji-hero { font-size: 3rem; margin-bottom: .75rem; }
.docs-hero h1 {
font-size: clamp(1.75rem, 4.5vw, 2.75rem);
font-weight: 900;
letter-spacing: -.03em;
margin: 0 0 .75rem;
position: relative;
line-height: 1.15;
}
.docs-hero h1 .accent {
background: linear-gradient(135deg, var(--accent) 0%, var(--cyan) 100%);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
}
.docs-hero p {
color: var(--text-muted);
font-size: 1.0625rem;
max-width: 500px;
margin: 0 auto 2rem;
line-height: 1.6;
}
/* Search */
.search-box {
max-width: 480px;
margin: 0 auto 2rem;
position: relative;
}
.search-box input {
width: 100%;
padding: .875rem 1rem .875rem 3rem;
background: var(--surface);
border: 2px solid var(--border);
border-radius: 12px;
color: var(--text);
font-size: .9375rem;
font-family: var(--sans);
transition: all .2s;
outline: none;
box-shadow: var(--shadow);
}
.search-box input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(16,185,129,.12); }
.search-box input::placeholder { color: var(--text-soft); }
.search-box::before {
content: '🔍';
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
font-size: .9375rem;
pointer-events: none;
}
.search-box .shortcut {
position: absolute;
right: .875rem;
top: 50%;
transform: translateY(-50%);
padding: .125rem .5rem;
background: var(--surface-2);
border: 1px solid var(--border);
border-radius: 6px;
font-family: var(--mono);
font-size: .6875rem;
color: var(--text-soft);
pointer-events: none;
}
/* Stats bar */
.stats-bar {
display: flex;
justify-content: center;
gap: 2.5rem;
flex-wrap: wrap;
}
.stats-bar .stat { text-align: center; }
.stats-bar .stat strong {
display: block;
font-size: 1.75rem;
font-weight: 900;
color: var(--text);
letter-spacing: -.02em;
}
.stats-bar .stat span {
font-size: .6875rem;
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: .06em;
font-weight: 600;
}
/* ========== CATEGORY FILTER ========== */
.category-bar {
padding: .875rem 0;
border-bottom: 1px solid var(--border);
background: var(--surface);
position: sticky;
top: 53px;
z-index: 90;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.category-bar::-webkit-scrollbar { display: none; }
.category-bar .container {
display: flex;
gap: .5rem;
flex-wrap: nowrap;
}
.cat-btn {
padding: .4375rem .875rem;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: 999px;
color: var(--text-muted);
font-size: .75rem;
font-weight: 600;
font-family: var(--sans);
cursor: pointer;
transition: all .2s;
white-space: nowrap;
display: flex;
align-items: center;
gap: .375rem;
}
.cat-btn:hover { border-color: var(--accent); color: var(--accent); background: var(--accent-light); }
.cat-btn.active {
/* #047857 (emerald-700) instead of var(--accent) #10b981 so white text
hits WCAG AA contrast (5.5:1 vs 2.2:1 with the lighter brand green). */
background: #047857;
border-color: #047857;
color: #fff;
box-shadow: 0 2px 8px rgba(4,120,87,.25);
}
.cat-btn .count {
display: inline-block;
padding: .0625rem .375rem;
background: rgba(0,0,0,.06);
border-radius: 999px;
font-size: .625rem;
font-weight: 700;
}
.cat-btn.active .count { background: rgba(255,255,255,.2); }
.cat-btn .cat-emoji { font-size: .8125rem; }
/* ========== POST LIST ========== */
main.container { padding-top: 1.5rem; padding-bottom: 4rem; }
/* ========== STARTER PACK (Beginner intro strip) ========== */
.starter-pack {
margin: 0 0 2rem;
padding: 1.5rem 1.75rem;
background: linear-gradient(135deg, var(--accent-light) 0%, var(--highlight-light) 100%);
border: 1px solid rgba(16,185,129,.15);
border-radius: var(--radius);
}
.starter-pack__heading {
display: flex;
align-items: baseline;
flex-wrap: wrap;
gap: .5rem;
margin: 0 0 1rem;
font-size: .9375rem;
font-weight: 700;
color: var(--text);
}
.starter-pack__wave {
font-size: 1.0625rem;
}
.starter-pack__intro {
font-size: .8125rem;
color: var(--text-muted);
font-weight: 400;
}
.starter-pack__grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: .625rem;
}
.starter-pack__card {
display: block;
padding: .75rem .9375rem;
background: var(--surface);
border: 1px solid var(--border);
border-radius: 10px;
color: var(--text) !important;
font-size: .875rem;
font-weight: 600;
line-height: 1.35;
text-decoration: none;
transition: all .15s;
}
.starter-pack__card:hover {
border-color: var(--accent);
color: var(--accent) !important;
transform: translateY(-1px);
box-shadow: var(--shadow);
}
.starter-pack__card .label {
display: block;
font-size: .6875rem;
text-transform: uppercase;
letter-spacing: .06em;
/* #047857 instead of var(--accent) #10b981 — small-text contrast
against white needs to hit WCAG AA (4.5:1). */
color: #047857;
font-weight: 700;
margin-bottom: .1875rem;
}
/* Hide starter pack when actively searching/filtering */
.is-filtering .starter-pack { display: none; }
.results-info {
font-size: .8125rem;
color: var(--text-soft);
margin-bottom: 1rem;
font-family: var(--mono);
font-weight: 500;
}
.post-list { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: 1fr; gap: .625rem; }
.post-item {
padding: 1.375rem 1.5rem;
border: 1px solid var(--border);
border-radius: var(--radius);
background: var(--surface);
transition: all .2s;
box-shadow: var(--shadow);
}
.post-item:hover {
border-color: var(--accent);
box-shadow: var(--shadow-hover);
transform: translateY(-2px);
}
.post-item .post-meta {
display: flex;
align-items: center;
gap: .625rem;
margin-bottom: .375rem;
flex-wrap: wrap;
}
.post-item .post-date {
font-family: var(--mono);
font-size: .6875rem;
color: var(--text-soft);
letter-spacing: .02em;
}
.post-item .post-cat {
font-size: .625rem;
font-weight: 700;
padding: .1875rem .5rem;
border-radius: 999px;
letter-spacing: .03em;
display: inline-flex;
align-items: center;
gap: .25rem;
}
/* Bright category colors */
.post-cat[data-cat="kubernetes"] { background: var(--sky-light); color: var(--sky); }
.post-cat[data-cat="linux"] { background: var(--green-light); color: var(--green); }
.post-cat[data-cat="networking"] { background: var(--cyan-light); color: var(--cyan); }
.post-cat[data-cat="security"] { background: var(--rose-light); color: var(--rose); }
.post-cat[data-cat="databases"] { background: var(--violet-light); color: var(--violet); }
.post-cat[data-cat="web-servers"] { background: var(--amber-light); color: var(--amber); }
.post-cat[data-cat="monitoring"] { background: var(--pink-light); color: var(--pink); }
.post-cat[data-cat="containers"] { background: var(--indigo-light); color: var(--indigo); }
.post-cat[data-cat="aws"] { background: var(--orange-light); color: var(--orange); }
.post-cat[data-cat="devops"] { background: #f0fdf4; color: #16a34a; }
.post-cat[data-cat="storage"] { background: #f8fafc; color: #64748b; }
.post-item h2 {
margin: 0 0 .375rem;
font-size: 1.0625rem;
line-height: 1.35;
font-weight: 700;
letter-spacing: -.005em;
}
.post-item h2 a { color: var(--text); border-bottom: none; }
.post-item h2 a:hover { color: var(--accent); }
.post-excerpt {
margin: 0;
color: var(--text-muted);
font-size: .875rem;
line-height: 1.55;
display: -webkit-box;
-webkit-line-clamp: 3;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* Hidden state */
.post-item.hidden { display: none; }
/* No results */
.no-results {
text-align: center;
padding: 4rem 2rem;
color: var(--text-soft);
display: none;
}
.no-results.visible { display: block; }
.no-results .emoji { font-size: 3rem; margin-bottom: 1rem; }
.no-results h3 { font-size: 1.25rem; color: var(--text-muted); margin-bottom: .5rem; font-weight: 700; }
.no-results p { font-size: .9375rem; }
/* ========== POST PAGE ========== */
.post-header { margin-bottom: 2.5rem; }
.post-header h1 {
font-size: clamp(1.75rem, 4vw, 2.25rem);
line-height: 1.2;
font-weight: 800;
letter-spacing: -.02em;
margin: 0;
color: var(--text);
}
.post-header .post-date {
display: inline-block;
margin-top: 1rem;
font-family: var(--mono);
font-size: .75rem;
color: var(--text-soft);
}
/* ========== POST BODY ========== */
.post-body {
font-size: 1.0625rem;
line-height: 1.75;
color: var(--text);
}
.post-body > :first-child { margin-top: 0; }
.post-body p { margin: 0 0 1.375rem; }
.post-body h2, .post-body h3, .post-body h4, .post-body h5, .post-body h6 {
letter-spacing: -.01em;
color: var(--text);
scroll-margin-top: 5rem;
}
.post-body h2 { font-size: 1.375rem; font-weight: 800; margin: 2.5rem 0 1rem; }
.post-body h3 { font-size: 1.125rem; font-weight: 700; margin: 2rem 0 .75rem; }
.post-body h4 { font-size: 1rem; font-weight: 700; margin: 1.5rem 0 .5rem; }
.post-body ul, .post-body ol { margin: 0 0 1.375rem; padding-left: 1.5rem; }
.post-body li { margin: .375rem 0; }
.post-body li > ul, .post-body li > ol { margin: .375rem 0; }
.post-body strong { font-weight: 700; }
.post-body em { font-style: italic; }
.post-body img {
max-width: 100%;
height: auto;
display: block;
margin: 2rem auto;
border-radius: 10px;
border: 1px solid var(--border);
box-shadow: var(--shadow);
}
.post-body blockquote {
border-left: 3px solid var(--accent);
padding: .5rem 0 .5rem 1.25rem;
margin: 1.5rem 0;
color: var(--text-muted);
background: var(--accent-soft);
border-radius: 0 8px 8px 0;
}
.post-body hr { border: none; border-top: 1px solid var(--border); margin: 2rem 0; }
.post-body a { word-break: break-word; }
/* Inline code */
.post-body :not(pre) > code {
font-family: var(--mono);
font-size: .85em;
font-style: normal;
background: var(--accent-light);
color: var(--accent-hover);
padding: .15em .4em;
border-radius: 6px;
white-space: nowrap;
}
/* Code blocks */
.post-body pre {
background: var(--code-bg);
color: var(--code-text);
padding: 1.125rem 1.375rem;
border-radius: 10px;
overflow-x: auto;
font-family: var(--mono);
font-size: .8125rem;
line-height: 1.7;
margin: 1.5rem 0;
box-shadow: 0 4px 16px rgba(0,0,0,.1);
}
.post-body pre code {
background: transparent;
color: inherit;
padding: 0;
font-size: inherit;
border-radius: 0;
white-space: pre;
}
/* Tables */
.post-body table {
border-collapse: collapse;
width: 100%;
margin: 1.5rem 0;
font-size: .875rem;
line-height: 1.5;
}
.post-body th, .post-body td {
text-align: left;
padding: .625rem .875rem;
border-bottom: 1px solid var(--border);
vertical-align: top;
}
.post-body th {
font-weight: 700;
font-size: .75rem;
text-transform: uppercase;
letter-spacing: .04em;
color: var(--text-muted);
background: var(--surface-2);
}
/* ========== FOOTERS ========== */
.post-footer { margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--border); }
.back-link {
font-family: var(--mono);
font-size: .8125rem;
color: var(--text-muted);
border-bottom: none;
}
.back-link:hover { color: var(--accent); border-bottom: none; }
.site-footer {
padding: 2.5rem 0;
border-top: 1px solid var(--border);
color: var(--text-soft);
font-size: .75rem;
font-family: var(--mono);
text-align: center;
background: var(--surface);
}
.site-footer p { margin: 0; }
/* ========== SELECTION ========== */
::selection { background: var(--accent); color: #fff; }
/* ========== RELATED GUIDES ========== */
.related-guides {
margin: 3rem 0 0;
padding: 1.75rem 0 0;
border-top: 1px solid var(--border);
}
.related-guides__heading {
margin: 0 0 1rem;
font-size: 1rem;
font-weight: 700;
letter-spacing: -.005em;
color: var(--text);
}
.related-guides__grid {
display: grid;
grid-template-columns: 1fr;
gap: .75rem;
}
@media (min-width: 640px) {
.related-guides__grid { grid-template-columns: repeat(3, 1fr); }
}
.related-guides__card {
display: flex;
flex-direction: column;
gap: .5rem;
padding: .875rem 1rem;
background: var(--surface, #fff);
border: 1px solid var(--border);
border-radius: 8px;
text-decoration: none;
color: inherit;
transition: border-color .15s, transform .15s, box-shadow .15s;
}
.related-guides__card:hover {
border-color: var(--accent);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(0,0,0,.04);
text-decoration: none;
}
.related-guides__cat {
align-self: flex-start;
font-size: .625rem;
font-weight: 700;
padding: .1875rem .5rem;
border-radius: 999px;
letter-spacing: .03em;
}
/* ========== END-OF-LIFE BANNER on dated posts (restoration pass) ========== */
.post-eol-banner {
margin: 0 0 1.5rem;
padding: .75rem 1rem;
border-left: 3px solid #ca8a04;
background: #fefce8;
border-radius: 0 6px 6px 0;
font-size: .875rem;
line-height: 1.55;
color: #713f12;
}
.post-eol-banner strong { color: #713f12; }
.post-eol-banner code {
background: rgba(202, 138, 4, .12);
color: #713f12;
padding: .0625rem .375rem;
border-radius: 3px;
font-size: .8125rem;
font-family: var(--mono);
}
/* ========== HOMEPAGE LIST TOOLBAR (results-info + sort) ========== */
.list-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
margin: 0 0 1rem;
flex-wrap: wrap;
}
.sort-toolbar {
display: inline-flex;
align-items: center;
gap: .5rem;
font-size: .8125rem;
color: var(--text-muted);
margin-left: auto;
font-family: var(--mono);
}
.sort-select {
font-family: var(--mono);
font-size: .8125rem;
padding: .25rem .5rem;
border: 1px solid var(--border);
border-radius: 6px;
background: var(--surface);
color: var(--text);
cursor: pointer;
}
.sort-select:focus { outline: 2px solid var(--accent); outline-offset: 1px; }
/* ========== CURATED POST TAG on homepage post-list (curator picks) ========== */
.post-tag--curated {
display: inline-block;
margin-left: .5rem;
padding: .125rem .5rem;
border-radius: 999px;
background: #047857;
color: #fff;
font-size: .625rem;
font-weight: 700;
letter-spacing: .04em;
text-transform: uppercase;
vertical-align: middle;
font-family: var(--mono);
}
.post-item--curated h2 a::before {
content: "↗ ";
color: #047857;
font-weight: 700;
}
/* ========== CURATOR POSTS (link-curation: commentary + excerpt + source link) ========== */
.post-source {
margin: .375rem 0 0;
font-size: .8125rem;
color: var(--text-muted);
font-family: var(--mono);
}
.post-source a { color: inherit; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.post-source a:hover { color: var(--accent); }
.post-commentary {
font-size: 1.0625rem;
line-height: 1.65;
margin: 0 0 1.5rem;
}
.post-excerpt {
margin: 1.5rem 0;
padding: 1rem 1.25rem;
border-left: 3px solid var(--accent);
background: var(--accent-soft, rgba(16,185,129,.07));
border-radius: 0 6px 6px 0;
font-style: italic;
color: var(--text-muted);
}
.post-excerpt p { margin: 0 0 .5rem; }
.post-excerpt cite { font-style: normal; font-size: .8125rem; font-family: var(--mono); }
.post-readmore { margin: 1.75rem 0 0; }
.post-readmore .cta {
display: inline-block;
padding: .625rem 1.25rem;
background: #047857;
color: #fff;
border-radius: 6px;
font-weight: 600;
font-size: .9375rem;
text-decoration: none;
transition: background .15s;
}
.post-readmore .cta:hover { background: #065f46; color: #fff; text-decoration: none; }
.related-guides__title {
font-size: .9375rem;
font-weight: 600;
line-height: 1.35;
color: var(--text);
}
.related-guides__card:hover .related-guides__title { color: var(--accent); }
/* ========== POST PAGE BREADCRUMB ========== */
.post-breadcrumb {
display: flex;
align-items: center;
gap: .5rem;
flex-wrap: wrap;
margin: 0 0 1.5rem;
font-size: .8125rem;
}
.post-breadcrumb a {
color: var(--text-muted);
text-decoration: none;
font-family: var(--mono);
border-bottom: none;
}
.post-breadcrumb a:hover { color: var(--accent); text-decoration: underline; }
.post-breadcrumb__sep { color: var(--text-muted); opacity: .5; }
.post-breadcrumb .post-cat {
display: inline-block;
padding: .125rem .5rem;
border-radius: 999px;
font-size: .6875rem;
font-weight: 700;
letter-spacing: .03em;
}
/* ========== RESPONSIVE ========== */
@media (max-width: 768px) {
.docs-hero { padding: 2.5rem 0 2rem; }
.docs-hero h1 { font-size: 1.625rem; }
.docs-hero .emoji-hero { font-size: 2.5rem; }
.stats-bar { gap: 1.5rem; }
.stats-bar .stat strong { font-size: 1.375rem; }
.post-item { padding: .875rem 1rem; }
.post-item h2 { font-size: .9375rem; }
.site-tagline { display: none; }
}
@media (min-width: 640px) {
.post-list { grid-template-columns: 1fr 1fr; }
}