/
on the site uses by default -- the 12px caption size is
reserved for meta text only (see post/meta.php and tokens.css).
----------------------------------------------------------------------- */
body {
font-family: var(--font-body);
font-size: var(--text-body);
line-height: var(--leading-normal);
color: var(--color-black);
background-color: var(--color-white);
}
p {
margin-bottom: var(--space-4);
max-width: 70ch; /* "ch" = the width of the "0" character in the current
font. Capping paragraph width at ~70 characters is a
classic readability rule: lines that are too wide are
tiring to read because your eye has to travel far to
find the start of the next line. */
}
/* -----------------------------------------------------------------------
HEADINGS
Headings use the (currently identical) --font-heading token and a
TIGHTER line-height than body text, since headings are short and
tight spacing looks more intentional/designed.
----------------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6 {
font-family: var(--font-heading);
line-height: var(--leading-tight);
color: var(--color-black);
font-weight: 700;
margin-bottom: var(--space-4);
}
h1 { font-size: var(--text-h1); }
h2 { font-size: var(--text-h2); }
h3 { font-size: var(--text-h3); }
h4, h5, h6 { font-size: var(--text-h4); }
/* -----------------------------------------------------------------------
LINKS
Blue is our brand/accent color, so links use it by default -- this
alone makes clickable text on the site instantly recognizable. Darker
blue + underline on hover/focus gives a clear, obvious "this is
interactive" signal (important for accessibility, not just style).
----------------------------------------------------------------------- */
a {
color: var(--color-blue-600);
text-decoration-thickness: 1px;
text-underline-offset: 2px;
}
a:hover,
a:focus-visible {
color: var(--color-blue-700);
text-decoration: underline;
}
/* A visible focus outline for keyboard users (tabbing through the page).
":focus-visible" only shows this ring when navigating by KEYBOARD, not
on every mouse click -- giving keyboard/screen-reader users a clear
"you are here" indicator without adding a visual outline every time
someone clicks with a mouse (which most sighted mouse-users find
distracting). This is an accessibility best practice. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
summary:focus-visible {
outline: 2px solid var(--color-blue-600);
outline-offset: 2px;
}
/* -----------------------------------------------------------------------
LISTS
----------------------------------------------------------------------- */
ul, ol {
padding-left: var(--space-6);
margin-bottom: var(--space-4);
}
li {
margin-bottom: var(--space-2);
}
/* -----------------------------------------------------------------------
BLOCKQUOTES
Used often in technical writing to quote a CVE description, a vendor
advisory, or another article -- styled with a left accent border so
it's visually distinct from surrounding body text at a glance.
----------------------------------------------------------------------- */
blockquote {
border-left: 4px solid var(--color-blue-600);
padding-left: var(--space-4);
margin-bottom: var(--space-4);
color: var(--color-gray-600);
font-style: italic;
}
/* -----------------------------------------------------------------------
CODE / PREFORMATTED TEXT
Technical cybersecurity/cloud/AI posts frequently include code
snippets, terminal commands, or config file examples -- these need a
monospace font and a subtle background so they're instantly
recognizable as "this is code, not prose."
----------------------------------------------------------------------- */
code,
kbd,
samp,
pre {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.9em; /* relative "em" so it scales with whatever heading/
body size surrounds it, instead of a fixed px value */
background-color: var(--color-gray-50);
border-radius: var(--radius-sm);
}
code {
padding: 0.15em 0.4em;
}
pre {
padding: var(--space-4);
overflow-x: auto; /* long lines of code SCROLL sideways inside their own
box instead of breaking the page's mobile layout */
margin-bottom: var(--space-4);
border: 1px solid var(--color-gray-200);
}
pre code {
padding: 0;
background: none; /* avoid double-background when is nested inside */
}
/* -----------------------------------------------------------------------
TABLES
Used for things like comparison tables (e.g. "Cloud Provider A vs B").
----------------------------------------------------------------------- */
table {
width: 100%;
border-collapse: collapse;
margin-bottom: var(--space-4);
}
th, td {
text-align: left;
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--color-gray-200);
}
th {
font-weight: 700;
}
/* -----------------------------------------------------------------------
HORIZONTAL RULE
----------------------------------------------------------------------- */
hr {
border: none;
border-top: 1px solid var(--color-gray-200);
margin: var(--space-8) 0;
}
/* -----------------------------------------------------------------------
FORM CONTROLS (bare, unstyled /