/* ============================================================
YMRTECH — ymrtech.com site stylesheet
============================================================
The palette, every component, the chrome and the embedded icon font live in
assets/css/theme.css (the shared "probe" theme, duplicated byte-identical
into the clientsv repo). This file holds ONLY what is specific to this site:
the layout overrides the hand-authored content pages need — the whitespace
flag on the terminal blocks, the tier card grid and the contact form's field
widths.
The header and footer — the switch's place in the bar, the CSS-only mobile
navigation and the group menus, the status line's segments — are NOT here:
they live in theme.css with the rest of the chrome, because the client
portal (clientsv) renders the same bar from internal/api/chrome.html and
loads the same file. One chrome, one definition.
No colour literal may appear in this file. Every value below is a
var(--…) token declared in theme.css, which is the only place in the
estate where a hex value is allowed to exist.
============================================================ */
/* --- Terminal blocks are hand-authored markup, not captured output --------
theme.css sets .terminal-body/.terminal-line to preformatted whitespace,
which is right for a pane the probe prints into. Every terminal block on
this site is markup: laid out in the source, indented for readability, with
explicit
where a break is wanted. Inheriting `pre` would turn that
source indentation into visible blank lines, so the blocks own their own
whitespace here. Genuinely preformatted output still uses , which
keeps white-space: pre from the theme. */
.terminal-body,
.terminal-line { white-space: normal; }
/* --- /vpn/ tier cards ----------------------------------------------------
Three equal columns, stacking on narrow screens. Layout only: the card
chrome, the border and the recommended card's accent all come from
theme.css (.card, .pill.tier-*). */
.card-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--gap);
margin: 1rem 0;
}
.card-grid .card { margin: 0; }
@media (max-width: 900px) {
.card-grid { grid-template-columns: 1fr; }
}
/* --- Homepage cards: one baseline for the trailing link -------------------
The three cards are one grid row of equal height and each ends with a
single link. The INFRA card's prose happens to run one line shorter than
the other two, so its link sat a line above theirs and the row read as
ragged — an artifact of copy length, not a decision. Lay each card out as
a column and let the trailing link take the leftover space, so the three
links share one baseline whatever the prose runs to, and so a later copy
edit to any card cannot make the row ragged again.
Scoped to this grid, not to `.card-grid`: the /vpn/ tier cards are read as
three independent columns and are deliberately left alone. Layout only —
the card chrome and every colour still come from theme.css. The margins
here are the ones theme.css already renders (the title's, the paragraph
beat collapsed between the two paragraphs, and the trailing beat below the
link), written out because a flex container does not collapse margins. */
.card-grid-anchored .card { display: flex; flex-direction: column; }
.card-grid-anchored .card > .pill { align-self: flex-start; }
.card-grid-anchored .card > .card-title { margin-bottom: 1rem; }
.card-grid-anchored .card > .card-text {
display: flex;
flex: 1;
flex-direction: column;
}
.card-grid-anchored .card > .card-text > p { margin: 0; }
.card-grid-anchored .card > .card-text > p:first-child { margin-bottom: 1rem; }
.card-grid-anchored .card > .card-text > p:last-child { margin: auto 0 1rem; }
/* --- Contact form --------------------------------------------------------
The field widths and the honeypot are form mechanics, not theme. The ids and
class names (ymrtech-form, form-status) are also the hooks main.js uses, so
they are load-bearing. */
.contact-form { max-width: 640px; margin: 1.4rem auto; }
.contact-form .form-control { width: 100%; }
.contact-form textarea.form-control { min-height: 160px; resize: vertical; }
.form-hp {
position: absolute;
left: -9999px;
width: 1px;
height: 1px;
overflow: hidden;
}
.form-status { color: var(--muted); font-size: var(--fs-sm); margin: 0.8rem 0 0; min-height: 1.2em; }
.form-status-error { color: var(--red); }
/* --- Tables in the reading column ----------------------------------------
theme.css gives every table `width: 100%` and every cell `white-space:
nowrap`. That is right for a two-column key/value table and wrong for the
audit pages, where one free-text column (the SoA's "Basis") is longer than the
whole reading column: the table lays out wider than .wrap, and because `body`
carries `overflow-x: hidden` the surplus is CLIPPED — the last cell reads as a
sentence cut in half and no scrollbar appears. Let the cells wrap here so a
table fits the column wherever it can; _plugins/table_wrap.rb puts every table
in a `.tblwrap` scroll container (the rule theme.css already declares) to catch
the few that cannot fit even then. Layout only — no colour literal. */
.wrap table th,
.wrap table td { white-space: normal; overflow-wrap: break-word; }
/* --- Pinned notes card -------------------------------------------------
One post can be pinned above the reverse-chronological list. The accent
border is the only thing that marks it, so the list below stays scannable
and the pin is legible in either palette (both tokens are theme-owned). */
.card-pinned {
border-color: var(--amber-line);
background: var(--panel2);
}
/* --- Reading rhythm ------------------------------------------------------
The shared "probe" theme is tuned for a terminal pane and a dashboard: body
leading at 1.55, paragraphs on a .6rem beat, and headings deliberately
SMALL, weight 400 and letter-spaced so the chrome never outweighs the
content. That reads well in a status readout; on the long-form pages this
site is mostly made of — the notes, the ISMS set, /audit, /services,
/standards — it reads as a wall of small text. These overrides widen the
leading, open the paragraph rhythm and give headings real size and weight.
They live HERE, not in theme.css, and that is deliberate: theme.css is
duplicated byte-identical into the clientsv repo (portal + console), so a
change there would restyle two dense dashboards where this airy rhythm is
the wrong call. Every size below still rides the theme's --scale dial, so
the hierarchy (title > body > label) stays exact and the whole estate can
still be stepped up together from one token.
Geometry is untouched: only line-height, paragraph/list rhythm and the
heading scale move, so nothing reflows — the text just breathes. */
body { line-height: 1.72; } /* was 1.55 */
p { margin: 1rem 0; } /* was .6rem — wider paragraph beat */
li { margin: .45rem 0; } /* was .25rem */
h1, h2, h3, h4 { font-weight: 600; } /* was 400 */
h1 { /* a bare h1 in body copy */
font-size: calc(1.45rem * var(--scale)); /* was 1.05rem */
font-weight: 700;
letter-spacing: .12em; /* was .18em (too wide once larger) */
}
h2 {
font-size: calc(1.12rem * var(--scale)); /* was .78rem */
letter-spacing: .12em;
margin-top: 1.5rem;
}
h3 {
font-size: calc(.98rem * var(--scale)); /* was .78rem */
letter-spacing: .12em;
margin-top: 1.2rem;
}
/* The real h1 on a content page (page.html / post.html). Higher specificity
than the bare h1 above, so it is the one that must carry the bump. */
.page-title, .post-title {
font-size: calc(1.45rem * var(--scale)); /* was 1.05rem */
font-weight: 700;
letter-spacing: .12em;
}
/* --- Links: colour everywhere, underline only in running text ------------
theme.css gives EVERY link the --link rose. That is what keeps a link from
being mistaken for a heading (h1 green, h2/h3 and card titles cyan) or for
an error (the only red on the page). The underline is a separate decision,
and it is a PROSE one: it earns its place on a link sitting inside a
sentence — running text, a list item, a table cell — where colour alone is
easy to miss mid-sentence. A link that is already an object does NOT get
one: a header or footer nav item, a CTA button, a card title, a tag pill.
The chrome reads cleaner, and the underline still means "this is text you
can follow".
The header, footer and status bar are emitted OUTSIDE in
_layouts/default.html (the site composes them from the shared chrome
artifacts), so scoping the underline to main is what keeps it off those
links without naming a single one of them; the object selectors below take
the rest back inside main.
This lives in style.css, NOT theme.css: theme.css is duplicated into the
clientsv portal and console, where this site's reading rhythm is the wrong
call — and a bare `text-decoration` there would restyle two dense
dashboards. */
main a { text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
main a:hover { text-decoration-thickness: 2px; }
main .btn, main .card-title > a, main .cta-section a,
main .tag, main .nav-link, main .tab, main .tabs a { text-decoration: none; }
/* --- Weight: the monospace reads thin at 400 -----------------------------
Fira Code is loaded with a real 500 face (see the Google Fonts link in
_layouts/default.html: 300–700), so this thickens the strokes without the
browser synthesising a faux bold — which is what a hand-held screen, with
no subpixel rendering to lean on, needs most. One step only: 400 → 500.
Headings keep their own weights (600/700, above), so the hierarchy
(title > body > label) is unchanged; the letters just stop looking thin.
Two scopes, both deliberate:
- the running text inside (the same boundary the link rules use);
- the header nav, which is small-caps monospace at 400 and reads faint
at the top of every page.
Everything else in the chrome — the status line, the footer, the pills —
stays at 400, so the bar keeps the airier register it was tuned for.
This lives in style.css, NOT theme.css: theme.css is duplicated
byte-identical into the clientsv portal and console, where this site's
reading rhythm is the wrong call — so the portal's nav keeps 400 and the
two surfaces diverge here on purpose. (scripts/check-chrome.sh gates the
chrome MARKUP, not the type, so nothing forces them back together.) */
main { font-weight: 500; }
.site-nav .nav-link, .site-nav .nav-group-link { font-weight: 500; }
/* --- A phone gets a step up on the reading text --------------------------
The 940px reading column arrives on a phone as a full-width line of 17px
monospace: legible, but a size down from what a hand-held screen wants.
ONLY the running text moves. Every heading inside main carries its own
size (this file), every chrome element its own token (theme.css), so
nothing reflows and the hierarchy is untouched — the make-up of the page
is identical, the paragraphs are just bigger. Rides --scale like every
other size in the estate, so the whole scale still steps together.
The panel itself collapses at 1200px (theme.css), but that breakpoint also
covers tablets and small laptops; 620px is the phone line — the width at
which the reading column is a full phone measure — so "phone type" steps
up there and the desk keeps its size. */
@media (max-width: 620px) {
main { font-size: calc(15.5px * var(--scale)); } /* was 14px * --scale (17.1px) */
/* Cards carry their own sizes in theme.css (.card-text is --fs-sm, the card
title .78rem), so the bump above never reached them: on a phone the cards
stayed a full step down from the prose they sit in. Move the card's own
sizes by the same step and keep their ratio (title .78 vs text .82), so a
card still reads as a title over its body rather than inverting.
The tag pills step with them (--fs-xs -> --fs-sm): they are card text too,
and left alone they would be the only thing on the card that did not move. */
.card-text { font-size: calc(15.5px * var(--scale)); } /* was --fs-sm (.82rem, 16px) */
.card > h2, .card > .card-title { font-size: calc(.92rem * var(--scale)); } /* was .78rem (15.2px) */
.tag { font-size: var(--fs-sm); } /* was --fs-xs (14.1px) */
}
/* --- The panel's group caption, brought up to its own rows ---------------
Inside the collapsed panel theme.css deliberately demotes the group label to
a small, dim, upper-case caption (--fs-xs, --muted): it is the heading its
rows sit under, not a page you tap, and it should not compete with them.
The demotion went far enough that it stopped reading as a heading at all.
Stroke thickness follows size times weight, so a 14px face at the rows' own
500 draws a THINNER line than the 18.5px rows beneath it — the caption came
out the faintest thing in its own group. Weight alone cannot close that gap:
at --fs-xs even 700 still read lighter than the rows, and one size step up
(--fs-sm) was only level with them.
So the caption takes the nav's own reading size (--fs, the size its rows are
set from) AND the bold end of the loaded range (700, the same weight as
`strong`). At equal size the extra weight is unambiguous: the group heading is
now the heaviest line in its own block instead of the faintest.
It still reads as a caption rather than as a page: upper case, the wide
letter-spacing and --muted all stay theme.css's own. Only the stroke and the
size move.
Scoped to the panel breakpoint: in the desktop row this element (`nav-link
nav-group-link`) is an ordinary top-level item and stays at the nav's 500. */
@media (max-width: 1200px) {
.site-nav .nav-group-link { font-weight: 700; font-size: var(--fs); }
}