/* ============================================================
Sentinel Cybersecurity LLC — style.css
Design system: "The Almanac" — see DESIGN.md before editing.
Letterpress ink on warm paper, ruled like a tide table.
The memorable thing is CALM COMPETENCE.
Why light: the copy promises "no scare tactics." Dark navy +
a radar sweep IS fear theatre — it sold the exact thing the
words swear off. Light is the honest rendering, not a trend.
Do not reintroduce a dark page. See DESIGN.md.
Fonts are self-hosted: the live CSP is `font-src 'self'`,
so Google Fonts CDN is blocked in production. Don't swap to a
— it will silently fail on Netlify.
============================================================ */
/* ---------- Self-hosted faces ---------- */
/* latin covers å / ñ / ’ (Håfa Adai, Hagåtña, Si Yu'os Ma'åse');
latin-ext is a safety net and only downloads if actually needed. */
@font-face {
font-family: "Fraunces";
font-style: normal;
font-weight: 300 500;
font-display: swap;
src: url(../assets/fonts/fraunces-var-latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Fraunces";
font-style: normal;
font-weight: 300 500;
font-display: swap;
src: url(../assets/fonts/fraunces-var-latin-ext.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "Instrument Sans";
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url(../assets/fonts/instrumentsans-var-latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "Instrument Sans";
font-style: normal;
font-weight: 400 600;
font-display: swap;
src: url(../assets/fonts/instrumentsans-var-latin-ext.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../assets/fonts/plexmono-400-latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 400;
font-display: swap;
src: url(../assets/fonts/plexmono-400-latin-ext.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../assets/fonts/plexmono-500-latin.woff2) format("woff2");
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
font-family: "IBM Plex Mono";
font-style: normal;
font-weight: 500;
font-display: swap;
src: url(../assets/fonts/plexmono-500-latin-ext.woff2) format("woff2");
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* ---------- Tokens ---------- */
:root {
--paper: #f2eee4; /* page — warm bone, daylight */
--sand: #e6dfd1; /* alternating band */
--sand-deep: #d8cfbd; /* hairline rules — the rules ARE the design */
--ink: #17201c; /* primary text — 14.39:1 on paper */
--ink-muted: #5e6259; /* secondary — 5.38 paper / 4.70 sand, both AA */
--stamp: #a6301f; /* the ONE hot colour — 5.92:1. ration it. */
--brass: #7e5f25; /* section numerals only. never a CTA. 5.10:1 */
--graphite: #1e2621; /* the ONE dark section */
--graphite-ink: #e9e4d8;/* 12.22:1 on graphite */
--max: 1180px;
--rule: 0.5px solid var(--sand-deep);
/* ONE left edge for the whole site. Everything flush left only means
something if "left" is the same line everywhere.
--gutter: the page's outer breathing room.
--edge: where the content column actually starts. Full-bleed elements
(header) pad to it; centred inner columns (footer, strips) size
to --column so they land on it too.
Before this existed the site had THREE left edges — at 1728px the header
logo sat at 40, the footer at 274, and the hero at 314. */
--gutter: clamp(1rem, 4vw, 2.5rem);
--edge: max(var(--gutter), calc((100vw - var(--max)) / 2 + var(--gutter)));
--column: calc(var(--max) - 2 * var(--gutter));
--serif: "Fraunces", Georgia, "Times New Roman", serif;
--font: "Instrument Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
--mono: "IBM Plex Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace;
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation: none !important; transition: none !important; }
}
body {
font-family: var(--font);
background: var(--paper);
color: var(--ink);
font-size: 16.5px;
line-height: 1.62;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
img, canvas, svg { max-width: 100%; }
a { color: var(--ink); }
:focus-visible {
outline: 2px solid var(--stamp);
outline-offset: 3px;
border-radius: 0;
}
/* ---------- Type scale ----------
Fraunces is ALWAYS weight 300. Never bold. Bold shouts; light states. */
h1, h2, h3 {
font-family: var(--serif);
font-weight: 300;
font-optical-sizing: auto;
}
h1 { font-size: clamp(2.3rem, 5vw, 4.9rem); line-height: 0.96; letter-spacing: -0.028em; }
h2 { font-size: clamp(1.75rem, 3.9vw, 2.85rem); line-height: 1.02; letter-spacing: -0.022em; }
h3 { font-size: 1.62rem; line-height: 1.15; letter-spacing: -0.018em; }
/* ---------- CTAs ----------
The primary CTA is NOT a button. Flush-left text with a stamp rule
beneath it; the rule extends on hover. A coral pill is what every SaaS
template ships. A ruled text link is what a printer ships.
.btn-block stays a solid block — it carries form submits and asides,
where a text link would read as an afterthought. */
.btn {
display: inline-block;
font-family: var(--font);
font-size: 1.0625rem;
font-weight: 500;
color: var(--ink);
text-decoration: none;
text-align: left;
background: none;
border: 0;
border-radius: 0;
padding: 0 0 9px;
cursor: pointer;
position: relative;
}
.btn::after {
content: "";
position: absolute;
left: 0; bottom: 0;
width: 100%; height: 2px;
background: var(--stamp);
transform-origin: left;
transition: transform 0.22s ease-out;
}
.btn:hover::after { transform: scaleX(1.06); }
.btn-primary { color: var(--ink); }
.btn-primary::after { background: var(--stamp); }
.btn-ghost { color: var(--ink-muted); }
.btn-ghost::after { background: var(--sand-deep); height: 1px; }
.btn-ghost:hover { color: var(--ink); }
.btn-lg { font-size: 1.3rem; padding-bottom: 11px; }
.btn-lg::after { height: 3px; }
/* Block variant: solid stamped slab. Square. Used for form submits and
the aside CTA, where flow demands a real target. */
.btn-block {
display: block;
width: 100%;
text-align: center;
background: var(--ink);
color: var(--paper);
padding: 0.95rem 1.2rem;
font-weight: 500;
transition: background 0.18s ease;
}
.btn-block::after { display: none; }
.btn-block:hover { background: var(--stamp); }
.btn-block:active { background: var(--stamp); }
/* main.js swaps btn-primary → btn-ghost on the mobile bar; keep it legible. */
.btn-ghost.btn-block { background: none; color: var(--ink); border: 1px solid var(--ink); }
.btn-ghost.btn-block:hover { background: var(--ink); color: var(--paper); }
/* ---------- Sticky header ---------- */
.site-header {
position: sticky;
top: 0;
z-index: 50;
display: flex;
align-items: center;
gap: 1.25rem;
/* Full-bleed bar, but its contents sit on the shared --edge so the logo
lines up with the hero headline below it.
0.5rem, not 0.75: the 56px seal carries its own visual weight, and the
taller mark pushed the conditions panel to within 2px of the fold at
720px. The mark grew, so the padding shrinks. */
padding: 0.5rem var(--edge);
background: var(--paper);
border-bottom: 1px solid var(--sand-deep);
}
.brand {
display: flex;
align-items: center;
gap: 0.65rem;
color: var(--ink);
text-decoration: none;
margin-right: auto;
min-width: 0;
}
/* THE MARK IS A SEAL, NOT A CUT-OUT — and it cannot be anything else.
The source art (assets/logo-source.png, 1136px grayscale) is a black owl on
a black field, drawn ENTIRELY in silver highlight strokes. Measured: the
field between the ears is luminance 22 and the owl's own chest is 22. They
are the same pixels. There is no silhouette to extract, so no filter, blend
mode, or threshold can put this owl on paper without a field behind it.
assets/logo-chip.png is that art with every internal value preserved and the
palette moved onto --graphite/--sand so the seal belongs to the system
instead of sitting next to it. Its field is clamped to exactly #1E2621, so
it composites seamlessly against a graphite ground.
56px, not 44: at 44 the owl's facets turn to mush. Measured, not guessed.
If you need it smaller than ~48px, the art needs redrawing, not scaling. */
.brand-mark {
width: 56px;
height: 56px;
flex: none;
object-fit: contain;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.brand-text strong {
font-family: var(--serif);
font-weight: 400;
color: var(--ink);
font-size: 1.08rem;
letter-spacing: -0.015em;
white-space: nowrap;
}
.brand-text small {
font-family: var(--mono);
color: var(--ink-muted);
font-size: 0.62rem;
letter-spacing: 0.1em;
text-transform: uppercase;
}
.site-nav { display: flex; gap: 1.4rem; }
.site-nav a {
color: var(--ink-muted);
text-decoration: none;
font-size: 0.9rem;
font-weight: 500;
padding-bottom: 2px;
border-bottom: 1px solid transparent;
}
.site-nav a:hover { color: var(--ink); border-bottom-color: var(--stamp); }
.btn-header { font-size: 0.9rem; padding-bottom: 6px; white-space: nowrap; }
.nav-toggle { display: none; }
@media (max-width: 860px) {
.site-nav {
display: none;
position: absolute;
top: 100%;
left: 0; right: 0;
flex-direction: column;
gap: 0;
background: var(--paper);
border-bottom: 1px solid var(--sand-deep);
}
.site-nav.open { display: flex; }
.site-nav a { padding: 0.95rem 1.5rem; border-top: var(--rule); border-bottom: 0; }
.nav-toggle {
display: flex;
flex-direction: column;
gap: 5px;
background: none;
border: none;
padding: 6px;
cursor: pointer;
}
.nav-toggle span { display: block; width: 22px; height: 1.5px; background: var(--ink); }
.brand-text small { display: none; }
.btn-header { display: none; }
}
@media (max-width: 480px) {
.site-header { gap: 0.6rem; }
.brand-text strong { font-size: 0.98rem; }
.brand-mark { width: 34px; height: 34px; }
}
/* ---------- Hero: the first viewport is a POSTER, not a document ---------- */
/* The poster has to fit one viewport, panel included — "STATUS STANDING BY"
in the first three seconds is the whole point. Every gap here is tuned so
the panel clears the fold on a 13" laptop (720px). Measured, not guessed.
If you add anything to the hero, re-measure the panel's bottom edge. */
.hero {
position: relative;
display: block;
max-width: var(--max);
margin: 0 auto;
padding: clamp(2rem, 5.5vh, 3.5rem) clamp(1rem, 4vw, 2.5rem) clamp(2rem, 5vh, 3.5rem);
min-height: 0;
}
/* The radar is gone — markup, CSS, and the Three.js loader all removed.
It was the most generic element on the site, it occupied the hero, and a
pulsing threat display contradicts "no scare tactics". Do not re-add a
hero animation. See DESIGN.md. */
.hero-copy { max-width: none; }
/* ~17ch breaks the headline to three lines and leaves the right side open.
Do not narrow this further — at 14ch the h1 became five two-word lines
and pushed the CTA below the fold. */
.hero-copy h1 { max-width: 17ch; }
.hero-kicker {
font-family: var(--mono);
color: var(--brass);
font-weight: 400;
letter-spacing: 0.13em;
text-transform: uppercase;
font-size: 0.66rem;
margin-bottom: 1.1rem;
max-width: 62ch;
}
.hero-sub {
color: var(--ink-muted);
font-size: 1.06rem;
margin: 1.3rem 0 1.7rem;
max-width: 46ch;
}
.hero-actions { display: flex; flex-wrap: wrap; gap: 2rem; align-items: baseline; }
.hero-copy .call-alt { margin-top: 1.2rem; }
/* ---------- Conditions panel ----------
A weather-station readout sitting on the baseline grid. Carries the whole
"born on Guam, serves everywhere, prices are public, unbothered" story with
zero adjectives and zero cards. A
because these are literally
label/value pairs — screen readers announce them as such. */
.conditions {
margin-top: 1.8rem;
padding-top: 1rem;
border-top: var(--rule);
display: grid;
grid-template-columns: 7.5rem 1fr;
gap: 0.1rem 1.2rem;
font-family: var(--mono);
font-size: 0.7rem;
line-height: 1.6;
letter-spacing: 0.055em;
text-transform: uppercase;
/* Sized in rem, not ch: `ch` measures the mono advance but ignores the
letter-spacing above, so a value that computes as "fits" still wrapped.
A readout that wraps stops reading as a readout. The coverage line is
the longest; this leaves it comfortable room on one row. */
max-width: 41rem;
}
.conditions dt { color: var(--ink-muted); }
.conditions dd { color: var(--ink); margin: 0; }
.conditions dd a { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--sand-deep); }
.conditions dd a:hover { border-bottom-color: var(--stamp); }
/* The brand in two words. The only place --stamp appears in the hero. */
.conditions dd.status-live { color: var(--stamp); }
@media (max-width: 860px) {
.hero { min-height: 0; padding-top: 2.5rem; }
.hero-copy, .hero-copy h1 { max-width: none; }
.hero-actions { gap: 1.4rem; }
.conditions { grid-template-columns: 1fr; gap: 0 0; margin-top: 2rem; }
.conditions dt { color: var(--ink-muted); margin-top: 0.75rem; }
.conditions dt:first-child { margin-top: 0; }
}
/* ---------- Sections & rhythm ----------
Bands alternate paper ⇄ sand. Never twelve equal bands. */
.section {
max-width: var(--max);
margin: 0 auto;
padding: clamp(3.5rem, 9vh, 6rem) clamp(1rem, 4vw, 2.5rem);
}
.section-alt {
max-width: none;
background: var(--sand);
border-top: 1px solid var(--sand-deep);
border-bottom: 1px solid var(--sand-deep);
}
.section-alt > .split { max-width: var(--max); margin: 0 auto; }
.section-head { max-width: 52ch; margin-bottom: 3rem; }
.section-head p { color: var(--ink-muted); margin-top: 0.8rem; }
.section-cta { margin-top: 3rem; }
.eyebrow {
font-family: var(--mono);
color: var(--brass);
text-transform: uppercase;
letter-spacing: 0.14em;
font-size: 0.66rem;
font-weight: 400;
margin-bottom: 1.1rem;
}
/* ---------- Call-instead ---------- */
.call-alt { margin-top: 1rem; color: var(--ink-muted); font-size: 0.92rem; }
.call-alt a { color: var(--ink); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--stamp); }
.call-alt a:hover { background: var(--sand); }
.call-alt.center { text-align: left; } /* nothing centres. one exception, site-wide. */
/* ---------- Price transparency ---------- */
.price-promise { margin-top: 1.1rem; color: var(--ink); font-size: 0.98rem; }
.price-promise strong { font-weight: 500; border-bottom: 1px solid var(--stamp); }
/* ---------- THE FEE SCHEDULE ----------
One continuous ruled ledger, not a card grid. Published flat fees are
the differentiator in a category built on "contact us for a quote."
A card grid hides that — it makes five prices look like five products.
A ledger makes them look like a rate card nailed to an honest wall.
Also structurally un-sloppable: AI never builds a table when it can
build a card. See DESIGN.md. */
.card-grid {
display: block;
counter-reset: svc;
border-top: 1px solid var(--ink);
}
.card {
display: grid;
grid-template-columns: 3.2rem 1fr auto;
column-gap: 1.4rem;
align-items: baseline;
padding: 1.7rem 0;
border-bottom: var(--rule);
background: none;
border-radius: 0;
transition: background 0.18s ease;
}
.card:hover { background: var(--sand); }
.card:not(.card-cta) { counter-increment: svc; }
.card:not(.card-cta)::before {
content: counter(svc, decimal-leading-zero);
grid-column: 1;
grid-row: 1;
font-family: var(--mono);
font-size: 0.72rem;
color: var(--brass);
letter-spacing: 0.06em;
}
.card h3 {
grid-column: 2;
grid-row: 1;
margin: 0;
display: flex;
align-items: baseline;
gap: 0.7rem;
flex-wrap: wrap;
}
.card h3::after {
content: "";
flex: 1 1 3rem;
border-bottom: 1.5px dotted var(--sand-deep);
transform: translateY(-0.35em);
min-width: 2rem;
}
.card p {
grid-column: 2;
grid-row: 2;
color: var(--ink-muted);
font-size: 0.92rem;
margin-top: 0.5rem;
max-width: 62ch;
}
/* Must out-specify `.card p` (0,1,1) — `.card-price` alone (0,1,0) loses to it
and the price silently renders as body copy in column 2. The price flush
right in mono IS the ledger; don't weaken this selector. */
.card p.card-price {
grid-column: 3;
grid-row: 1;
font-family: var(--mono);
font-weight: 500;
font-size: 1.6rem;
color: var(--ink);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
white-space: nowrap;
max-width: none;
margin: 0;
}
/* The cadence suffix rides below the figure so the dollar amounts stay on
one tabular-nums column. "$395/session" inline would push that row's
figure out of alignment with the four above it. */
.card p.card-price small {
font-size: 0.62rem;
font-weight: 400;
color: var(--ink-muted);
letter-spacing: 0.06em;
text-transform: uppercase;
}
.card-tag {
font-family: var(--mono);
font-size: 0.58rem;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--stamp);
border: 1px solid var(--stamp);
border-radius: 0;
padding: 2px 7px;
background: none;
white-space: nowrap;
}
.card-sub {
display: inline;
font-family: var(--font);
color: var(--ink-muted);
font-size: 0.82rem;
font-weight: 400;
letter-spacing: 0;
}
/* The "not sure where to start" card has no price — it isn't a ledger row.
It sits under the schedule as a closing note. */
.card-cta {
display: block;
border-bottom: 0;
border-left: 2px solid var(--stamp);
padding: 1.5rem 0 1.5rem 1.6rem;
margin-top: 2.2rem;
background: none;
}
.card-cta:hover { background: none; }
.card-cta h3 { display: block; }
.card-cta h3::after { display: none; }
.card-cta p { margin: 0.6rem 0 1.4rem; max-width: 58ch; }
.card-cta .btn { display: inline-block; }
@media (max-width: 720px) {
.card { grid-template-columns: 2.4rem 1fr; column-gap: 0.9rem; }
.card h3 { font-size: 1.35rem; }
.card h3::after { display: none; } /* leader dots need a right column to run to */
.card p { grid-row: 2; }
.card p.card-price { grid-column: 2; grid-row: 3; font-size: 1.35rem; margin-top: 0.7rem; }
}
/* ---------- Split (why-veteran, lead capture) ---------- */
.split {
display: grid;
grid-template-columns: 1.25fr 0.75fr;
gap: 4rem;
align-items: start;
padding: clamp(3.5rem, 9vh, 6rem) clamp(1rem, 4vw, 2.5rem);
}
.section:not(.section-alt) .split { padding: 0; }
.split-copy > p { color: var(--ink-muted); margin-top: 1rem; max-width: 62ch; }
.split-copy > p strong { color: var(--ink); font-weight: 500; }
.check-list { list-style: none; margin-top: 1.6rem; display: grid; gap: 1.1rem; }
.check-list li {
padding-left: 1.6rem;
position: relative;
color: var(--ink-muted);
max-width: 62ch;
}
/* A ruled tick, not a glyph. */
.check-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.72em;
width: 0.7rem;
height: 1px;
background: var(--stamp);
}
.check-list li strong { color: var(--ink); font-weight: 500; }
.fine-print { color: var(--ink-muted); font-size: 0.85rem; margin-top: 1.4rem; max-width: 60ch; }
.lead-sub { font-size: 1.04rem; }
/* ---------- Founder ----------
The photo exists (assets/founder.jpg) and was a 64px circle buried in
this section. It's the most trustworthy asset on the site. Square it,
enlarge it, put it above the fold of its own block. */
.founder-card {
display: block;
margin-bottom: 1.6rem;
}
/* In colour, deliberately. An earlier pass desaturated this to match the
restrained palette — but this is the founder's actual face, and it is the
most trustworthy thing on the site. Making a real person look like archive
footage costs more trust than palette purity buys. Do not add grayscale(). */
.founder-photo {
width: 100%;
max-width: 240px;
aspect-ratio: 4 / 5;
height: auto;
border-radius: 0;
background: var(--sand);
border: 0;
border-bottom: 2px solid var(--stamp);
display: block;
overflow: hidden;
margin-bottom: 1rem;
}
.founder-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.founder-name { font-family: var(--serif); font-weight: 400; font-size: 1.25rem; color: var(--ink); letter-spacing: -0.015em; }
.founder-title { font-family: var(--mono); color: var(--ink-muted); font-size: 0.7rem; letter-spacing: 0.08em; text-transform: uppercase; margin-top: 0.25rem; }
.quote-card {
background: none;
border: 0;
border-left: 2px solid var(--stamp);
border-radius: 0;
padding: 0.2rem 0 0.2rem 1.4rem;
margin: 1.8rem 0;
font-family: var(--serif);
font-weight: 300;
font-style: normal;
font-size: 1.32rem;
line-height: 1.32;
letter-spacing: -0.018em;
color: var(--ink);
}
.quote-card footer {
margin-top: 1rem;
font-family: var(--mono);
font-weight: 400;
font-size: 0.68rem;
letter-spacing: 0.07em;
text-transform: uppercase;
color: var(--ink-muted);
line-height: 1.7;
}
.quote-card footer span { color: var(--brass); font-weight: 400; }
.form-card {
background: var(--paper);
border: 1px solid var(--sand-deep);
border-radius: 0;
padding: 1.8rem;
text-align: left;
}
.section-alt .form-card { border-color: var(--ink); }
.form-card h3 { margin-bottom: 0.4rem; font-size: 1.4rem; }
.form-card > p { color: var(--ink-muted); font-size: 0.9rem; margin-bottom: 1.3rem; }
.form-note { color: var(--ink-muted); font-size: 0.76rem; margin-top: 0.9rem; }
.form-note a, .fine-print a { color: var(--ink); }
@media (max-width: 860px) {
.split { grid-template-columns: 1fr; gap: 2.4rem; }
.founder-photo { max-width: 180px; }
}
/* ---------- Night Owl ---------- */
.owl-card {
background: none;
border: 0;
border-top: 1px solid var(--ink);
border-bottom: 1px solid var(--ink);
border-radius: 0;
box-shadow: none;
padding: 2.6rem 0;
max-width: none;
margin: 0;
}
.owl-head { display: block; }
.owl-glyph {
width: 56px;
height: 56px;
object-fit: contain;
margin-bottom: 1rem;
display: block;
}
.owl-tag {
margin-top: 1rem;
font-family: var(--serif);
font-weight: 300;
font-size: 1.24rem;
font-style: normal;
color: var(--ink);
letter-spacing: -0.015em;
}
.owl-desc { margin-top: 0.9rem; color: var(--ink-muted); max-width: 62ch; }
.owl-grid {
display: grid;
grid-template-columns: 1fr 1.05fr;
gap: 3.5rem;
margin-top: 2.4rem;
align-items: start;
}
/* A ruled gauge, not a glowing pill. */
.owl-meter-bar {
height: 3px;
border-radius: 0;
background: var(--sand-deep);
overflow: hidden;
}
.owl-meter-bar span { display: block; height: 100%; border-radius: 0; background: var(--stamp); }
.owl-meter-label { margin-top: 0.6rem; font-family: var(--mono); font-size: 0.68rem; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-muted); }
.owl-meter-label strong { color: var(--stamp); font-weight: 500; }
.owl-form { margin-top: 1.6rem; display: grid; gap: 1rem; }
.owl-field label {
display: block;
font-family: var(--mono);
font-size: 0.66rem;
font-weight: 400;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--ink-muted);
margin-bottom: 0.4rem;
}
.owl-field input,
.owl-field select {
width: 100%;
padding: 0.75rem 0.85rem;
border-radius: 0;
background: var(--paper);
border: 1px solid var(--sand-deep);
border-bottom-color: var(--ink);
color: var(--ink);
font-family: var(--font);
font-size: 16px; /* 16px+ prevents iOS auto-zoom on focus */
}
.owl-field select { appearance: none; -webkit-appearance: none; }
.owl-field input:focus,
.owl-field select:focus {
outline: none;
border-color: var(--stamp);
box-shadow: none;
}
.owl-micro { font-family: var(--mono); font-size: 0.66rem; line-height: 1.8; color: var(--ink-muted); text-align: left; letter-spacing: 0.02em; }
.owl-micro a { color: var(--ink); }
.owl-form-error { font-size: 0.85rem; font-weight: 500; color: var(--stamp); text-align: left; margin-top: 0.4rem; }
.owl-form-error a { color: var(--stamp); }
.owl-success {
margin-top: 1.4rem;
padding: 2.2rem 1.8rem;
border: 1px solid var(--ink);
border-radius: 0;
background: var(--sand);
box-shadow: none;
color: var(--ink);
text-align: left;
animation: none;
}
.owl-success-glow { position: relative; width: 64px; height: 64px; margin: 0 0 1rem; }
.owl-success-glow::before { display: none; } /* nothing pulses */
.owl-success-glow img { width: 100%; height: 100%; object-fit: contain; }
.owl-success-badge {
display: inline-block;
padding: 3px 8px;
border: 1px solid var(--stamp);
border-radius: 0;
color: var(--stamp);
font-family: var(--mono);
font-size: 0.6rem;
font-weight: 400;
letter-spacing: 0.14em;
text-transform: uppercase;
}
.owl-success-title { margin-top: 1rem; font-size: 1.7rem; color: var(--ink); }
.owl-success-body { margin-top: 0.7rem; color: var(--ink-muted); font-size: 0.94rem; max-width: 52ch; }
.owl-success-sign { margin-top: 1rem; font-family: var(--serif); font-weight: 300; font-style: normal; color: var(--ink); font-size: 1.05rem; }
@media (max-width: 860px) {
.owl-grid { grid-template-columns: 1fr; gap: 2rem; }
}
/* ---------- Steps ---------- */
.steps {
list-style: none;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 0;
counter-reset: step;
border-top: 1px solid var(--ink);
}
.step {
background: none;
border: 0;
border-bottom: var(--rule);
border-right: var(--rule);
border-radius: 0;
padding: 1.9rem 1.8rem 1.9rem 0;
}
.step:last-child { border-right: 0; }
.step-num {
display: block;
width: auto;
height: auto;
border-radius: 0;
background: none;
font-family: var(--mono);
font-size: 0.72rem;
font-weight: 400;
letter-spacing: 0.06em;
color: var(--brass);
margin-bottom: 1rem;
}
.step h3 { margin-bottom: 0.6rem; font-size: 1.35rem; }
.step p { color: var(--ink-muted); font-size: 0.92rem; }
.step p.step-time {
margin-top: 0.9rem;
font-family: var(--mono);
color: var(--ink-muted);
font-size: 0.66rem;
letter-spacing: 0.06em;
text-transform: uppercase;
}
@media (max-width: 860px) {
.step { border-right: 0; padding-right: 0; }
}
/* ---------- Founding clients ---------- */
.founding { padding-top: 0; }
.founding-card {
background: none;
border: 0;
border-left: 2px solid var(--stamp);
border-radius: 0;
padding: 0.4rem 0 0.4rem 2rem;
max-width: 64ch;
margin: 0;
}
.founding-card > p { color: var(--ink-muted); margin-top: 1rem; }
.founding-card .btn { margin-top: 2rem; }
/* ---------- Island strip ---------- */
.island-strip {
background: var(--sand);
border-top: 1px solid var(--sand-deep);
border-bottom: 1px solid var(--sand-deep);
padding: 2.4rem clamp(1rem, 4vw, 2.5rem);
}
.island-strip p {
max-width: var(--column);
margin: 0 auto;
font-family: var(--serif);
font-weight: 300;
font-size: clamp(1.1rem, 1.9vw, 1.5rem);
line-height: 1.36;
letter-spacing: -0.015em;
color: var(--ink);
text-align: left;
}
.island-strip strong { font-weight: 300; color: var(--stamp); }
/* ---------- HACK//ATTACK — THE ONE DARK SECTION ----------
DESIGN.md allows exactly one dark section on the site. This is it.
The dark here is diegetic, not atmospheric: the thing being rendered
IS a terminal. That's the opposite of the old hero, where dark was
mood-setting fear theatre. The page holds its breath here, then
returns to daylight. Do not add a second dark section. */
.game-strip { max-width: none; background: var(--graphite); }
.game-strip > .game-card { max-width: var(--column); margin: 0 auto; }
.game-card {
display: grid;
grid-template-columns: 1.15fr 1fr;
gap: clamp(1.5rem, 4vw, 3.5rem);
align-items: center;
background: none;
border: 0;
border-radius: 0;
padding: 0;
position: relative;
overflow: visible;
}
.game-card::before { display: none; } /* no scanline overlay */
.game-strip .eyebrow { color: #9da697; }
.game-card h2 { color: var(--graphite-ink); }
.game-copy { position: relative; color: #a9b0a3; }
.game-copy p { color: #a9b0a3; max-width: 56ch; }
.game-copy strong { color: var(--graphite-ink); font-weight: 500; }
.game-copy .btn { color: var(--graphite-ink); }
.game-copy .btn-ghost::after { background: var(--stamp); height: 2px; }
.game-micro { color: #8a9285; font-size: 0.82rem; margin-top: 1.2rem; }
.game-shot {
position: relative;
display: block;
background: #141a16;
border: 1px solid #39423b;
border-radius: 0;
overflow: hidden;
font-family: var(--mono);
font-size: 0.8rem;
text-decoration: none;
}
.game-shot-bar {
display: flex;
gap: 6px;
padding: 0.5rem 0.8rem;
background: #1a221d;
border-bottom: 1px solid #39423b;
}
.game-shot-bar i { width: 8px; height: 8px; border-radius: 0; background: #39423b; }
.game-shot-bar i:first-child { background: var(--stamp); }
.game-shot-body { display: block; padding: 1.1rem 1.2rem 1.3rem; }
.gs-line { display: block; color: #8a9285; line-height: 2; white-space: nowrap; }
.gs-red { color: var(--stamp); font-style: normal; }
.gs-green { color: var(--graphite-ink); text-shadow: none; }
/* The one moving thing on the site. It's a cursor in a rendered terminal —
diegetic, not decoration. Everything else is still. */
.gs-cursor {
display: inline-block;
width: 0.55em;
height: 1em;
background: var(--graphite-ink);
vertical-align: text-bottom;
animation: gs-blink 1.1s steps(1) infinite;
}
@keyframes gs-blink { 50% { opacity: 0; } }
@media (max-width: 760px) {
.game-card { grid-template-columns: 1fr; }
.game-shot { font-size: 0.72rem; }
}
/* ---------- FAQ ---------- */
.faq-list { display: grid; gap: 0; max-width: 68ch; border-top: 1px solid var(--ink); }
.faq-list details {
background: none;
border: 0;
border-bottom: var(--rule);
border-radius: 0;
overflow: hidden;
}
.faq-list summary {
padding: 1.25rem 2.6rem 1.25rem 0;
cursor: pointer;
font-family: var(--serif);
font-weight: 300;
font-size: 1.28rem;
letter-spacing: -0.015em;
color: var(--ink);
list-style: none;
position: relative;
}
.faq-list summary::-webkit-details-marker { display: none; }
.faq-list summary::after {
content: "+";
position: absolute;
right: 0.2rem;
top: 50%;
transform: translateY(-50%);
font-family: var(--mono);
color: var(--stamp);
font-size: 1.1rem;
font-weight: 400;
}
.faq-list details[open] summary::after { content: "–"; }
.faq-list details[open] summary { color: var(--ink); }
.faq-list details p {
padding: 0 2.6rem 1.4rem 0;
color: var(--ink-muted);
font-size: 0.94rem;
max-width: 62ch;
}
/* ---------- Form embed + boss note ---------- */
.form-embed { display: none; }
.form-embed.loaded { display: block; margin-bottom: 0.7rem; }
.form-embed iframe {
width: 100%;
height: 720px; /* the live form has 6 questions; scrolls internally beyond this */
border: 0;
border-radius: 0;
background: #fff;
}
.boss-note {
margin-top: 1.4rem;
padding: 0.2rem 0 0.2rem 1.2rem;
border-left: 2px solid var(--brass);
background: none;
border-radius: 0;
}
.boss-note p { color: var(--ink-muted); font-size: 0.88rem; }
.boss-note strong { color: var(--ink); font-weight: 500; }
/* ---------- Final CTA ---------- */
.final-cta { text-align: left; max-width: 64ch; }
.final-cta p { color: var(--ink-muted); margin: 1rem 0 2.2rem; }
/* ---------- Footer ---------- */
.site-footer {
border-top: 1px solid var(--ink);
background: var(--paper);
padding: 3.5rem clamp(1rem, 4vw, 2.5rem) 2rem;
}
.footer-grid {
max-width: var(--column);
margin: 0 auto 2.4rem;
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
color: var(--ink-muted);
font-size: 0.88rem;
}
.footer-grid strong {
font-family: var(--mono);
font-size: 0.66rem;
font-weight: 400;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--ink);
display: block;
margin-bottom: 0.6rem;
}
.footer-grid a { color: var(--ink-muted); text-decoration: none; border-bottom: 1px solid transparent; }
.footer-grid a:hover { color: var(--ink); border-bottom-color: var(--stamp); }
.footer-brand strong { font-family: var(--serif); font-size: 1.1rem; letter-spacing: -0.015em; text-transform: none; }
.footer-line {
max-width: var(--column);
margin: 0 auto;
padding-top: 1.6rem;
border-top: var(--rule);
font-family: var(--mono);
color: var(--ink-muted);
font-size: 0.66rem;
letter-spacing: 0.05em;
/* The one centred element on the whole site: the closing signature. */
text-align: center;
}
/* ---------- Mobile sticky CTA bar ---------- */
.mobile-cta-bar {
display: none;
position: fixed;
bottom: 0;
left: 0; right: 0;
z-index: 60;
gap: 0.6rem;
padding: 0.6rem 0.9rem calc(0.6rem + env(safe-area-inset-bottom));
background: var(--paper);
border-top: 1px solid var(--ink);
transform: translateY(110%);
transition: transform 0.25s ease;
}
.mobile-cta-bar.show { transform: translateY(0); }
.mobile-cta-bar.suppress { transform: translateY(110%); }
/* Bar CTAs must be real targets, not text links — thumbs need area. */
.mobile-cta-bar .btn {
flex: 1;
text-align: center;
padding: 0.8rem 0.5rem;
font-size: 0.92rem;
background: var(--ink);
color: var(--paper);
}
.mobile-cta-bar .btn::after { display: none; }
.mobile-cta-bar .btn-ghost {
background: none;
color: var(--ink);
border: 1px solid var(--ink);
}
@media (max-width: 860px) {
.mobile-cta-bar { display: flex; }
body.has-cta-bar { padding-bottom: 4.4rem; }
}
/* ---------- Privacy page ----------
privacy.html referenced .privacy-page / .privacy-updated but the old
stylesheet never defined them. They were rendering unstyled. */
.privacy-page { max-width: 68ch; }
.privacy-page h1 { font-size: clamp(2rem, 4.4vw, 3.2rem); margin-bottom: 0.8rem; }
.privacy-page h2 {
font-size: 1.45rem;
margin: 2.6rem 0 0.7rem;
padding-top: 1.4rem;
border-top: var(--rule);
}
.privacy-page p { color: var(--ink-muted); margin-top: 0.8rem; }
.privacy-page a { color: var(--ink); border-bottom: 1px solid var(--stamp); text-decoration: none; }
.privacy-page ul { margin: 0.9rem 0 0 1.1rem; color: var(--ink-muted); }
.privacy-page li { margin-top: 0.5rem; }
.privacy-page p.privacy-updated {
font-family: var(--mono);
font-size: 0.66rem;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--brass);
margin: 0 0 2rem;
}
/* ============================================================
SPECIFICITY BACKSTOP — read before adding a container `p` rule.
Container rules like `.section-head p` are (0,1,1). A bare utility
class like `.eyebrow` is (0,1,0) and LOSES to them, silently: the
eyebrow renders muted grey instead of brass and nobody notices,
because it still looks plausible. Every rule below exists to win a
collision that was verified in the browser, not guessed at.
If you add a `.container p {}` rule, re-check the classed