/* ============================================================
NOWWORX SITE — v3 stylesheet (light "paper & ink")
------------------------------------------------------------
Why this exists alongside site.css:
site.css hardcodes the dark-glass marketing surface (dark body,
glass nav, glass footer). v3 flips the landing page to LIGHT,
because the page is now led by real screenshots of the app —
and the app is light (#F2F5FF). Light-on-light lets a screenshot
read as a screen instead of a glowing rectangle in ink.
It is also the surface the design guide argues for on the app
side and the same reasoning applies here: the buyer is 45+ and
reads this on a phone, outdoors, in daylight.
Structure deliberately mirrors site.css (tokens → nav → buttons
→ primitives → footer) so the seven dark sub-pages are a tractable
port later.
⚠️ PORTING THE SUB-PAGES IS **NOT** A ONE- SWAP. An earlier
version of this comment claimed it was; that was wrong, and the
design-council review caught it. Two reasons:
1. The two files share 15 token NAMES, and 8 of them hold
DIFFERENT values — --amber-600 (#E07800 vs #C86A00), all four
--radius-* (each 2px larger here), --shadow-amber, --t-base and
--t-fast. A straight swap silently reshapes every card and
shifts every amber on all seven pages.
2. The sub-pages are built on the dark-glass tokens (--mkt-*,
--glass-*) and primitives (.legal-doc, .toc, .faq, .card,
.contact-card, .cta-band). NONE of those exist here, so they
would not restyle — they would lose their styling entirely.
The real port is: reconcile the 8 colliding values first, then
port the primitives page by page. Budget it as work, not a swap.
Dark is kept as PUNCTUATION only — .band-night, used THREE times:
#film, the band before the footer, and the final CTA. The third is
#film and it was added for the ad (27 Aug): a film wants a dark room,
and the bands either side of it are both light, so a light band there
would have run the ticker strip, the film and #why together with
nothing between them. Three is the ceiling — a fourth and it stops
being punctuation.
============================================================ */
/* ------------------------------------------------------------
DISPLAY TYPE: Outfit only.
site.css defines a 'HankenSwap' face whose unicode-range covers
ONLY N b e f h n p q r t y, with Outfit picking up every other
character. The intent was presumably to echo the wordmark, but
the effect is that single words are set in TWO typefaces:
"Keep" renders K in Outfit and e-e-p in Hanken Grotesk, and in
"the phone." only the o is Outfit. At a 78px headline the
mismatched letterforms and x-heights read as a rendering fault.
Dropped here on the owner's call. Side benefit: it also removes
six static TrueType downloads (~115KB on the wire) that existed
to serve eleven glyphs.
NOTE: site.css still carries the swap, so the seven dark
sub-pages keep it until they are ported.
------------------------------------------------------------ */
:root {
/* --- ink (text) --- */
--ink-900: #0B1226;
--ink-700: #22304F;
--ink-600: #3A4867;
--ink-500: #55637F;
/* #737F98 measured 3.86:1 on --paper and 3.59:1 on --paper-2 — both fail
WCAG 2.2 AA for small text, and every use of this token IS small text
(captions, plan sub-labels, the trades label).
#646E84 measures 4.90 / 4.57 against the same two grounds. */
--ink-400: #646E84;
/* --- paper (surfaces). Warm, so the cool app screenshots read as screens. --- */
--paper: #FBFAF7;
--paper-2: #F4F2EC;
--card: #FFFFFF;
--line: #E4E0D6;
--line-2: #CFC9BB;
/* --- brand --- */
--cobalt-700: #1338A0;
--cobalt-600: #1B48CC;
--cobalt-500: #2356E8;
--cobalt-400: #5B8EF5;
--cobalt-100: #DCE8FF;
--cobalt-50: #EEF3FF;
/* Two text-safe ambers, because one cannot serve both sizes.
--amber-600 measures 3.65:1 on --paper: enough for LARGE text only
(WCAG 2.2 AA large = 24px regular / 18.66px bold), so it is reserved
for the .ink-amber headline accents and the 53px/900 .stat-fig.
--amber-700 measures 4.91 / 4.58 on --paper / --paper-2, so it is the
one used for the small bold uppercase labels (.kicker, .evidence-tag,
the Urgent rung), which need the full 4.5:1. */
--amber-700: #A85900;
--amber-600: #C86A00;
--amber-500: #FF8C00; /* backgrounds and borders only — 2.23:1 as text */
--amber-400: #FFAA33;
--amber-50: #FFF4E4;
--green-700: #076B4A;
--green-600: #0E9F6E;
--green-50: #E7F7F0;
--red-600: #C7362B;
--red-50: #FDEDEB;
/* --- night: the dark bands and the footer ---
These used to be the old site's saturated navy (#080E20 / #0E1734) with a
cobalt glow, which is what made them read as a different website dropped
into this one. They are now a deep WARM charcoal from the same family as
the paper — same warm cast, opposite end of the scale — so the page runs
light-warm to dark-warm instead of warm-to-navy. The white is warmed to
match; a cool #F6F8FC white on a warm ground looks blue by comparison.
Cobalt stays where it belongs: the app screenshots and the interactive
bits, which now pop against the warm ground rather than blending into it. */
--night-900: #14120F;
--night-800: #201C18;
--night-700: #2C2620;
--night-text: #FAF8F5;
--night-text-mute: rgba(250,248,245,0.76);
--night-line: rgba(255,255,255,0.13);
--font-display: 'Outfit', sans-serif;
--font-body: 'DM Sans', sans-serif;
--font-accent: 'Anton', sans-serif;
--radius-sm: 8px;
--radius-md: 14px;
--radius-lg: 22px;
--radius-xl: 30px;
--radius-pill: 999px;
--ease: cubic-bezier(0.4,0,0.2,1);
--t-fast: 140ms var(--ease);
--t-base: 240ms var(--ease);
--shadow-sm: 0 1px 2px rgba(11,18,38,.06), 0 2px 6px rgba(11,18,38,.05);
--shadow-md: 0 2px 4px rgba(11,18,38,.05), 0 8px 24px rgba(11,18,38,.08);
--shadow-lg: 0 4px 8px rgba(11,18,38,.05), 0 18px 48px rgba(11,18,38,.13);
--shadow-amber: 0 8px 22px rgba(255,140,0,.34);
--container: 1160px;
}
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
/* scroll-padding-top clears the sticky nav (73px on mobile, 59px desktop) so
an in-page anchor doesn't land with its heading hidden underneath it.
Smooth scrolling is desktop-only: over a ~20,000px page it makes a phone tap
feel like a hang, and it fights momentum scrolling on iOS. */
html { scroll-padding-top: 88px; }
@media (min-width: 981px) { html { scroll-behavior: smooth; } }
html, body { overflow-x: hidden; }
body {
background: var(--paper);
color: var(--ink-700);
font-family: var(--font-body);
font-size: 17px;
line-height: 1.62;
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
@media (prefers-reduced-motion: reduce) {
html { scroll-behavior: auto; }
*, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}
/* Visible keyboard focus everywhere — the old page had none. */
a:focus-visible, button:focus-visible, summary:focus-visible {
outline: 3px solid var(--cobalt-500);
outline-offset: 3px;
border-radius: 4px;
}
/* ===== LAYOUT ===== */
.container { max-width: var(--container); margin: 0 auto; padding: 0 28px; }
.container-narrow { max-width: 800px; margin: 0 auto; }
section { position: relative; }
.skip {
position: absolute; left: -9999px; top: 0;
background: var(--cobalt-500); color: #fff;
font-family: var(--font-display); font-weight: 700;
padding: 12px 20px; border-radius: 0 0 var(--radius-md) 0; z-index: 200;
}
.skip:focus { left: 0; }
/* ===== NAVIGATION ===== */
.nav {
position: sticky; top: 0; z-index: 100;
background: rgba(251,250,247,0.88);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border-bottom: 1px solid var(--line);
}
.nav-inner {
max-width: 1240px; margin: 0 auto;
padding: 14px 28px;
display: flex; align-items: center; gap: 36px;
}
.nav-logo { display: flex; align-items: center; text-decoration: none; }
/* The logo SVG is used as authored — no recolour, no crop. Only scaled. */
.nav-logo img { height: 26px; width: auto; display: block; }
.nav-links { display: flex; gap: 26px; margin-left: 6px; }
.nav-links a {
color: var(--ink-600); text-decoration: none;
font-family: var(--font-display); font-weight: 600; font-size: 0.95rem;
transition: color var(--t-fast);
}
.nav-links a:hover { color: var(--cobalt-600); }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 12px; }
/* ===== BUTTONS ===== */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 9px;
font-family: var(--font-display); font-weight: 700;
border: 1px solid transparent; cursor: pointer; text-decoration: none;
white-space: nowrap; text-align: center;
transition: transform var(--t-base), box-shadow var(--t-base), background var(--t-base), border-color var(--t-base);
}
/* min-heights are tap targets: 48px is the WCAG 2.2 target-size floor. */
.btn-lg { padding: 16px 30px; font-size: 1.05rem; min-height: 56px; border-radius: var(--radius-pill); }
.btn-md { padding: 12px 22px; font-size: 0.95rem; min-height: 48px; border-radius: var(--radius-pill); }
.btn-sm { padding: 9px 18px; font-size: 0.88rem; min-height: 40px; border-radius: var(--radius-pill); }
.btn-amber {
background: linear-gradient(135deg, var(--amber-400) 0%, var(--amber-500) 100%);
color: #2A1A00; box-shadow: var(--shadow-amber);
}
.btn-amber:hover { transform: translateY(-2px); box-shadow: 0 14px 34px rgba(255,140,0,.44); }
.btn-ink {
background: var(--ink-900); color: #fff; box-shadow: var(--shadow-md);
}
.btn-ink:hover { transform: translateY(-2px); background: #131E3E; }
.btn-line {
background: var(--card); color: var(--ink-900);
border-color: var(--line-2); box-shadow: var(--shadow-sm);
}
.btn-line:hover { border-color: var(--ink-400); transform: translateY(-2px); }
.btn-quiet { background: transparent; color: var(--ink-600); }
.btn-quiet:hover { color: var(--cobalt-600); }
/* On night bands the outline button needs light treatment. */
.band-night .btn-line {
background: rgba(255,255,255,0.08); color: var(--night-text);
border-color: var(--night-line); box-shadow: none;
}
.band-night .btn-line:hover { background: rgba(255,255,255,0.15); border-color: rgba(255,255,255,0.3); }
/* ===== BANDS ===== */
.band { padding: 96px 0; }
.band-tight { padding: 64px 0; }
.band-alt { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.band-night {
/* Warm amber wash rather than the old cobalt glow — it ties the dark bands
to the page's accent instead of to the retired navy surface. */
background:
radial-gradient(ellipse 90% 70% at 50% 0%, rgba(255,140,0,0.13) 0%, transparent 70%),
linear-gradient(160deg, var(--night-800) 0%, var(--night-900) 62%, #0E0C0A 100%);
color: var(--night-text);
}
.band-night h2, .band-night h3, .band-night strong, .band-night b { color: var(--night-text); }
.band-night p, .band-night li { color: var(--night-text-mute); }
/* ===== SECTION HEADS ===== */
.head { max-width: 760px; margin: 0 auto 56px; text-align: center; }
.head.left { margin-left: 0; text-align: left; }
.kicker {
display: inline-block;
font-family: var(--font-display); font-weight: 800;
font-size: 0.78rem; letter-spacing: 0.14em; text-transform: uppercase;
color: var(--amber-700); margin-bottom: 14px;
}
.band-night .kicker { color: var(--amber-400); }
h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink-900); }
.h1 {
font-weight: 900; font-size: clamp(2.7rem, 6.4vw, 4.9rem);
line-height: 1.0; letter-spacing: -0.032em;
}
.h2 {
font-weight: 800; font-size: clamp(2rem, 4.6vw, 3.15rem);
line-height: 1.08; letter-spacing: -0.024em; margin-bottom: 18px;
}
.h3 { font-weight: 700; font-size: 1.28rem; line-height: 1.25; letter-spacing: -0.012em; margin-bottom: 9px; }
.lead { font-size: 1.18rem; line-height: 1.6; color: var(--ink-500); }
.band-night .lead { color: var(--night-text-mute); }
.ink-amber { color: var(--amber-600); }
.band-night .ink-amber { color: var(--amber-400); }
.ink-cobalt { color: var(--cobalt-600); }
/* ===== CARD ===== */
.card {
background: var(--card); border: 1px solid var(--line);
border-radius: var(--radius-lg); padding: 30px;
box-shadow: var(--shadow-sm);
}
.band-night .card {
background: rgba(255,255,255,0.055); border-color: var(--night-line); box-shadow: none;
}
/* ===== SCREENSHOT FRAMES =====
Frames are CSS, never baked into the asset, so one export can be
reframed. Most shots are wrapped in an to the raw file so a phone
user can tap to see it full size — no JS lightbox. The receptionist
section's conversation is a