/* Copyright (c) 2026 Timothy Parks. All rights reserved. Proprietary and confidential. tprci.com stylesheet. EMOTION-COLOUR SYSTEM (NNCPP). The accent is not decoration -- it is keyed to the emotional job of the page, via data-kind on , per the emotion-colour rule in the persuasion standard. money deep navy + amber action considering a large spend; authority first, warmth on the ask. Amber outperforms blue-on-blue for the action because it is the only warm thing on a cold page. conversion navy + green action the decision is already made; green reads as confirm, not as "start over". trade navy + amber same as money, lower stakes. legal navy, muted action nobody should feel urgency reading a privacy policy. A loud CTA here is a dark pattern. utility navy + amber contact / holding. Urgency red is reserved for ONE thing: water coming in now. If everything is urgent nothing is, and false urgency is the failure mode this estate has already had once. NLP pacing is a COPY property, not a CSS one -- short lines early to match the reader's state, longer as you lead. Typography supports it here only by keeping measure short enough to read quickly (65ch) and line-height generous enough not to fatigue (1.68). */ :root { --navy: #0B1F33; --navy-soft: #17324d; --ink: #16202b; --ink-soft: #4a5764; --line: #dfe4ea; --paper: #ffffff; --wash: #f6f8fa; --amber: #b45309; --amber-dark: #92400e; --green: #15693f; --green-dark: #0f5230; --alarm: #a4241b; --focus: #2563eb; --action: var(--amber); --action-dark: var(--amber-dark); --measure: 65ch; --radius: 6px; } body[data-kind="conversion"] { --action: var(--green); --action-dark: var(--green-dark); } body[data-kind="legal"] { --action: var(--navy-soft); --action-dark: var(--navy); } *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--paper); color: var(--ink); font: 17px/1.68 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; font-synthesis-weight: none; } /* ---------- skip link: keyboard users should not tab the whole nav on every page ---------- */ .skip { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--navy); color: #fff; padding: 12px 18px; border-radius: 0 0 var(--radius) 0; } .skip:focus { left: 0; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; } /* ---------- header / nav ---------- */ header { background: var(--navy); padding: 14px 20px; } header nav { max-width: 1080px; margin: 0 auto; display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px 22px; } .brand { color: #fff; font-weight: 600; font-size: 1.02rem; text-decoration: none; letter-spacing: .1px; margin-right: auto; } .brand:hover { text-decoration: underline; } header ul { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 0; padding: 0; } header a { color: #c8d6e5; text-decoration: none; font-size: .86rem; } header a:hover { color: #fff; text-decoration: underline; } /* ---------- main ---------- */ main { max-width: var(--measure); margin: 0 auto; padding: 40px 22px 8px; } h1 { font-size: clamp(1.65rem, 4.4vw, 2.3rem); line-height: 1.18; letter-spacing: -.4px; color: var(--navy); margin: 0 0 .55em; font-weight: 700; } h2 { font-size: clamp(1.24rem, 2.9vw, 1.5rem); line-height: 1.28; color: var(--navy); margin: 2.1em 0 .5em; font-weight: 650; } h3 { font-size: 1.07rem; margin: 1.5em 0 .35em; color: var(--navy-soft); font-weight: 650; } p { margin: 0 0 1.05em; } strong { font-weight: 650; color: var(--navy); } a { color: #0d4a80; text-underline-offset: 2px; } a:hover { color: var(--navy); } ul, ol { margin: 0 0 1.15em; padding-left: 1.35em; } li { margin: .38em 0; } li::marker { color: var(--action); } section { margin-bottom: .4em; } /* a pulled-out fact: used sparingly, never for a sales claim */ blockquote { margin: 1.4em 0; padding: 2px 0 2px 18px; border-left: 3px solid var(--action); color: var(--ink-soft); } /* ---------- shared blocks ---------- */ .trustband, .ctaband, .consent, .crosslinks { max-width: var(--measure); margin: 0 auto; } .trustband { border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--wash); padding: 13px 22px; margin-top: 34px; } .trustband p { margin: 0; font-size: .84rem; color: var(--ink-soft); line-height: 1.6; } .ctaband { display: flex; flex-wrap: wrap; gap: 12px; padding: 26px 22px 6px; } .cta { display: inline-block; padding: 14px 26px; border-radius: var(--radius); background: var(--action); color: #fff; text-decoration: none; font-weight: 650; font-size: 1.02rem; border: 1px solid var(--action-dark); min-height: 44px; } .cta:hover { background: var(--action-dark); color: #fff; } .cta-sms { background: var(--navy); border-color: var(--navy); } .cta-sms:hover { background: var(--navy-soft); } .cta-2 { background: transparent; color: var(--navy); border-color: var(--navy); } .cta-2:hover { background: var(--navy); color: #fff; } .crosslinks { padding: 8px 22px 4px; } .crosslinks ul { list-style: none; padding: 0; display: flex; flex-wrap: wrap; gap: 8px 20px; } .crosslinks li { margin: 0; } .crosslinks a { font-size: .92rem; } .consent { padding: 6px 22px 20px; } .consent p { font-size: .8rem; color: var(--ink-soft); line-height: 1.58; margin: 0; } footer { background: var(--navy); color: #b9c9da; margin-top: 40px; padding: 24px 22px; font-size: .84rem; line-height: 1.65; } footer p { max-width: var(--measure); margin: 0 auto; } footer a { color: #e6eef6; } /* ---------- emergency: the ONE place urgency is allowed to look urgent ---------- */ body[data-kind="money"][data-slug="emergency-roof-repair"] { --action: var(--alarm); --action-dark: #7d1a13; } /* ---------- responsive ---------- */ @media (max-width: 640px) { body { font-size: 16.5px; } main { padding: 26px 18px 6px; } header nav { gap: 8px 14px; } header ul { gap: 2px 14px; } .brand { font-size: .95rem; } .ctaband { padding: 20px 18px 4px; } .cta { display: block; width: 100%; text-align: center; } } @media print { header, .ctaband, .crosslinks { display: none; } body { font-size: 12pt; color: #000; } main { max-width: none; } } /* respect the reader */ @media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }