/* CatenaHQ Site Styles — v5 — shared across ALL public pages
────────────────────────────────────────────────────────────────────────────
v5, 5 September 2026. Five more, from the numbered screenshots. All of them
are here rather than in the pages, so nothing on 26 files has to be edited:
5. FORM FIELDS WERE INVISIBLE. Every input on the site was a 1px #EEEEEE
border on white — a border you cannot see at arm's length, on a
background identical to the page. That is items 8 and 11: the Contact
and Advisory forms did not look like forms. Fields now sit on a faint
tint with a border you can actually find, and the focused field goes
white with a purple ring so it is obvious where you are typing.
6. THE CHECKBOXES WERE STRETCHED. .chq-form-group input sets width:100%,
and a checkbox is an input, so every checkbox on the Advisory form was
being blown out to the full width of the column with 12px of padding
and a border around it. That is item 7, and it is the same bug as the
module-access boxes on the Team tab, which come from the identical rule
in the dashboard. Checkboxes and radios are now excluded by type.
7. FOOTER SHADE, PROPERLY THIS TIME. v4 moved the footer to aubergine but
pages carrying their own inline footer colour ignored it. Item 4. The
rule is now !important, which beats an inline style, so every page ends
in the same colour whatever it says locally.
8. BUTTONS TOUCHING THE TEXT ABOVE THEM. Item 9, on the Free Tools cards:
a paragraph then a button with nothing between them. Any button that
follows text inside a card now gets its own space.
9. THE CTA AND THE TABLES. Item 5. The closing CTA was a flat purple slab
with a headline at the same weight as everything else; the comparison
tables squashed on a phone instead of scrolling. Both fixed below.
────────────────────────────────────────────────────────────────────────────
v4, same day. Four things:
1. TYPE. DM Serif Display for headings, DM Sans for everything else. The
homepage was rebuilt in these and the other 25 pages were still on Segoe
UI, which made the homepage look bolted on. Loaded by @import below —
slower than a in the head, but it is the only way to reach every
page from one file, and it beats editing 26 of them.
2. PAGE HEADERS. .chq-hero was padding:120px 2rem 80px, centred, with a 3rem
headline — about 368px of purple carrying a page title and one sentence,
which pushed the actual content of every page below the fold. It is now
117px, left-aligned, and reads as a header rather than a hero. Content on
the Compare page now starts at 430px instead of 616px.
Nothing in the markup changed: the existing
..
..
on every page still works.
3. NAV. position:fixed → sticky. Fixed meant the nav sat ON TOP of anything
above it — on the homepage that was the orange beta bar, hidden underneath
it since the day it was added. Sticky puts the nav back in the flow: what
is above it shows, scrolls away, and the nav then pins exactly as before.
4. .chq-hero--home. The homepage keeps a full hero, because one page on a
site has earned one. That is the only place this modifier is used.
──────────────────────────────────────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=DM+Serif+Display&family=DM+Sans:opsz,wght@9..40,400;9..40,500;9..40,700&display=swap');
*{margin:0;padding:0;box-sizing:border-box}
:root{
--purple:#401588;--purple-dark:#2D1058;--purple-light:#6B3FA0;
--accent:#7C4DFF;--white:#FFFFFF;--off-white:#F8F7FC;
--gray-50:#FAFAFA;--gray-100:#F5F5F5;--gray-200:#EEEEEE;
--gray-600:#757575;--gray-800:#424242;--gray-900:#212121;
--success:#2E7D32;--danger:#C62828;
--aubergine:#2E1A47;--lavender:#B9A5E0;--canvas:#F7F5F1;--line-soft:#E5DCF2;
--font:'DM Sans','Segoe UI',system-ui,-apple-system,sans-serif;
--font-display:'DM Serif Display',Georgia,'Times New Roman',serif;
}
body{font-family:var(--font);color:var(--gray-900);line-height:1.6;overflow-x:hidden}
a{text-decoration:none;color:inherit}
img{max-width:100%}
/* ═══ NAV ═══ */
.chq-nav{position:sticky;top:0;left:0;right:0;z-index:100;background:var(--white);border-bottom:1px solid var(--gray-200);padding:0 1.5rem;height:64px;display:flex;align-items:center;justify-content:space-between}
.chq-nav-logo{display:flex;align-items:center;gap:8px;font-weight:700;font-size:1.15rem;color:var(--purple);flex-shrink:0}
.chq-nav-logo img{height:30px}
.chq-nav-links{display:flex;gap:1.25rem;align-items:center;list-style:none}
.chq-nav-links a{font-size:0.85rem;color:var(--gray-800);font-weight:500;transition:color 0.2s;white-space:nowrap}
.chq-nav-links a:hover,.chq-nav-links a.active{color:var(--purple)}
.chq-nav-login{color:var(--purple)!important;font-weight:600!important}
.chq-nav-cta{background:var(--purple)!important;color:var(--white)!important;padding:9px 20px!important;border-radius:6px;font-weight:700!important;transition:background 0.2s}
.chq-nav-cta:hover{background:var(--purple-dark)!important}
/* keyboard focus was never defined; it is now, everywhere */
.chq-nav a:focus-visible,.chq-mobile-menu a:focus-visible,.chq-mobile-btn:focus-visible,
.btn-white:focus-visible,.btn-outline:focus-visible,.btn-purple:focus-visible,.btn-accent:focus-visible,
.chq-footer a:focus-visible{outline:3px solid var(--purple);outline-offset:3px;border-radius:6px}
.chq-hero a:focus-visible,.chq-cta a:focus-visible{outline-color:var(--lavender)}
.chq-mobile-btn{display:none;background:none;border:none;font-size:1.5rem;cursor:pointer;color:var(--gray-800)}
.chq-mobile-menu{display:none;position:fixed;top:64px;left:0;right:0;bottom:0;background:var(--white);padding:1.5rem 2rem;flex-direction:column;gap:0.25rem;z-index:99;overflow-y:auto}
.chq-mobile-menu a{display:block;padding:12px 0;font-size:1.05rem;color:var(--gray-800);border-bottom:1px solid var(--gray-100)}
.chq-mobile-menu a:last-child{border:none}
.chq-mobile-menu .chq-nav-cta{display:block;text-align:center;margin-top:1rem;border:none;padding:14px!important;border-radius:8px}
/* ═══ PAGE HEADER (was HERO) ═══
Left-aligned, 117px, aubergine. Works on the existing h1 + p markup. */
.chq-hero{background:var(--aubergine);color:var(--white);text-align:left;padding:26px 2rem 28px}
.chq-hero h1{font-family:var(--font-display);font-weight:400;font-size:1.9rem;line-height:1.12;letter-spacing:-0.01em;max-width:1100px;margin:0 auto 7px}
.chq-hero p{font-size:0.95rem;color:#CFC6DE;opacity:1;max-width:1100px;margin:0 auto;line-height:1.5}
.chq-hero .hero-ctas{max-width:1100px;margin:1rem auto 0;justify-content:flex-start}
/* Defensive: some pages put other things inside .chq-hero. On the old purple gradient
those inherited white; on aubergine, purple text would vanish. These keep anything
that ends up in a header legible without needing the page to be edited. */
.chq-hero .stats-row{max-width:1100px;margin:1.1rem auto 0;justify-content:flex-start;gap:2.2rem}
.chq-hero .stat-item{text-align:left;min-width:0}
.chq-hero .stat-item .num{color:var(--white);font-size:1.5rem}
.chq-hero .stat-item .label{color:var(--lavender)}
.chq-hero .transition-banner{background:rgba(255,255,255,.08);border-color:rgba(255,255,255,.18);color:#CFC6DE;margin:1rem auto 0;text-align:left}
.chq-hero .transition-banner strong{color:var(--white)}
.chq-hero .section-label{color:var(--lavender)}
.chq-hero a:not([class*="btn"]){color:var(--lavender)}
.chq-hero-sm{padding:26px 2rem 28px}
.chq-hero-sm h1{font-size:1.7rem}
/* the homepage, and only the homepage, keeps a real hero */
.chq-hero--home{padding:64px 2rem 56px;text-align:left}
.chq-hero--home h1{font-size:clamp(34px,4.4vw,50px);margin-bottom:18px}
/* ═══ BUTTONS ═══ */
.btn-white{display:inline-block;background:var(--white);color:var(--purple);padding:14px 32px;border-radius:8px;font-weight:700;font-size:1rem;transition:transform 0.2s,box-shadow 0.2s}
.btn-white:hover{transform:translateY(-2px);box-shadow:0 8px 24px rgba(0,0,0,0.2)}
.btn-outline{display:inline-block;border:2px solid rgba(255,255,255,0.5);color:var(--white);padding:12px 30px;border-radius:8px;font-weight:600;font-size:1rem;transition:all 0.2s}
.btn-outline:hover{border-color:var(--white);background:rgba(255,255,255,0.1)}
.btn-purple{display:inline-block;background:var(--purple);color:var(--white);padding:14px 32px;border-radius:8px;font-weight:700;font-size:1rem;transition:background 0.2s}
.btn-purple:hover{background:var(--purple-dark)}
.btn-accent{display:inline-block;background:var(--accent);color:var(--white);padding:14px 32px;border-radius:8px;font-weight:700;font-size:1rem;transition:transform 0.2s}
.btn-accent:hover{transform:translateY(-2px)}
/* ═══ SECTIONS ═══ */
section{padding:64px 2rem}
.section-center{max-width:1100px;margin:0 auto}
.section-label{font-size:0.8rem;font-weight:700;text-transform:uppercase;letter-spacing:2px;color:var(--purple);margin-bottom:0.5rem}
.section-title{font-family:var(--font-display);font-size:2rem;font-weight:400;letter-spacing:-0.01em;color:var(--gray-900);margin-bottom:0.75rem;line-height:1.18}
.section-subtitle{font-size:1.05rem;color:var(--gray-600);max-width:650px;line-height:1.6}
.bg-alt{background:var(--off-white)}
/* ═══ CARDS ═══ */
.card-grid-3{display:grid;grid-template-columns:repeat(3,1fr);gap:2rem;margin-top:2rem}
.card-grid-2{display:grid;grid-template-columns:repeat(2,1fr);gap:1.5rem;margin-top:2rem}
.card-grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:1.5rem;margin-top:2rem}
.chq-card{background:var(--white);border:1px solid var(--gray-200);border-radius:12px;padding:2rem;transition:border-color 0.2s,box-shadow 0.2s}
.chq-card:hover{border-color:var(--purple);box-shadow:0 4px 20px rgba(64,21,136,0.08)}
.chq-card .card-icon{width:48px;height:48px;background:var(--off-white);border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.5rem;margin-bottom:1rem}
.chq-card h3{font-family:var(--font-display);font-size:1.15rem;font-weight:400;margin-bottom:0.5rem}
.chq-card p{font-size:0.9rem;color:var(--gray-600);line-height:1.5}
/* Item 9 — the Free Tools cards had a paragraph and then a button sitting
directly on it. Any button that follows text inside a card gets its own
space, so this is fixed wherever the pattern appears, not just there. */
.chq-card .btn-purple,.chq-card .btn-white,.chq-card .btn-accent,.chq-card .btn-outline,
.chq-card .btn-submit,.chq-card p + a,.chq-card ul + a,.chq-card p + button{margin-top:1.15rem}
.chq-card p + a{display:inline-block}
/* ═══ STATS ═══ */
.stats-row{display:flex;justify-content:center;gap:3rem;flex-wrap:wrap;margin-top:2rem}
.stat-item{text-align:center;min-width:120px}
.stat-item .num{font-family:var(--font-display);font-size:2.2rem;font-weight:400;color:var(--purple);display:block}
.stat-item .label{font-size:0.85rem;color:var(--gray-600)}
/* ═══ BADGES ═══ */
.badge-live{display:inline-block;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:2px 8px;border-radius:4px;background:#E8F5E9;color:var(--success);margin-left:0.5rem}
.badge-ai{display:inline-block;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:1px;padding:2px 8px;border-radius:4px;background:#EDE7F6;color:var(--purple);margin-left:0.5rem}
/* ═══ TRANSITION BANNER ═══ */
.transition-banner{background:var(--off-white);border:1px solid var(--gray-200);border-radius:12px;padding:1.5rem 2rem;max-width:800px;margin:0 auto;text-align:center;font-size:0.95rem;color:var(--gray-800);line-height:1.6}
.transition-banner strong{color:var(--purple)}
/* ═══ CTA ═══
Item 5, first half. It was a flat purple slab with a headline set at the
same weight as the paragraph under it. It now runs aubergine into purple so
it belongs to the same family as the header and footer, the headline is
larger and in the display face, and the measure is constrained so the line
does not run the full width of a desktop screen. */
.chq-cta{background:linear-gradient(135deg,var(--aubergine) 0%,var(--purple) 100%);color:var(--white);text-align:center;padding:64px 2rem}
.chq-cta h2{font-family:var(--font-display);font-size:clamp(1.8rem,3vw,2.3rem);font-weight:400;line-height:1.14;letter-spacing:-0.01em;margin:0 auto 0.85rem;max-width:640px}
.chq-cta p{color:#D9D1E8;margin:0 auto 2rem;font-size:1.05rem;max-width:560px;line-height:1.55}
.chq-cta .hero-ctas{justify-content:center}
/* ═══ COMPARISON TABLE ═══
Item 5, second half. On a phone these were squashing to 0.8rem type with
0.5rem padding, which is how you get a table nobody can read. They now
scroll sideways inside their own box at full size instead. Wrap a table in
to get it; a bare .comp-table also works. */
.table-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:2rem;border-radius:12px}
.comp-table{width:100%;border-collapse:separate;border-spacing:0;margin-top:2rem;background:var(--white);border:1px solid var(--line-soft);border-radius:12px;overflow:hidden;box-shadow:0 1px 4px rgba(0,0,0,0.06)}
.table-scroll .comp-table{margin-top:0;min-width:620px}
.comp-table th{background:var(--purple);color:var(--white);padding:0.95rem 1rem;text-align:left;font-size:0.78rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;white-space:nowrap}
.comp-table td{padding:0.85rem 1rem;border-bottom:1px solid var(--gray-200);font-size:0.9rem}
.comp-table tbody tr:nth-child(even){background:#FBFAFD}
.comp-table tbody tr:hover{background:rgba(64,21,136,.04)}
.comp-table tr:last-child td{border-bottom:none}
.comp-table .check{color:var(--success);font-weight:700;font-size:1.1rem}
.comp-table .cross{color:#ccc;font-size:1.1rem}
.comp-hl{background:rgba(64,21,136,0.03)}
/* ═══ FORMS ═══
Items 8 and 11. A 1px #EEEEEE border on a white field on a white page is not
a field, it is a rumour. Three things make an input findable: a background
that differs from the page, a border with enough contrast to see, and an
unmistakable focus state. All three below. */
.chq-form-group{margin-bottom:1.5rem}
.chq-form-group label{display:block;font-size:0.9rem;font-weight:600;margin-bottom:0.4rem;color:var(--gray-800)}
.chq-form-group input,.chq-form-group select,.chq-form-group textarea{width:100%;padding:12px 14px;background:#FAF9FC;border:1.5px solid #D5CDE4;border-radius:8px;font-size:0.95rem;color:var(--gray-900);font-family:var(--font);transition:border-color .15s,background .15s,box-shadow .15s}
.chq-form-group input::placeholder,.chq-form-group textarea::placeholder{color:#8A8398}
.chq-form-group input:hover,.chq-form-group select:hover,.chq-form-group textarea:hover{border-color:#BFB3D6}
.chq-form-group input:focus,.chq-form-group select:focus,.chq-form-group textarea:focus{outline:none;background:var(--white);border-color:var(--purple);box-shadow:0 0 0 3px rgba(64,21,136,.14)}
.chq-form-group textarea{min-height:120px;resize:vertical}
.chq-form-row{display:grid;grid-template-columns:1fr 1fr;gap:1rem}
/* On a dark band a tinted field would disappear; these keep it legible there. */
.chq-hero .chq-form-group label,.chq-cta .chq-form-group label{color:var(--white)}
/* Item 7 — the stretched checkboxes.
The rule above says .chq-form-group input{width:100%}. A checkbox is an
input. So every checkbox on the Advisory form was 100% wide with 12px of
padding and a 1.5px border drawn around it, which is why that block looked
the way it did. Excluded by type, then given a row of its own so the whole
label is a target rather than the 18px square. */
.chq-form-group input[type=checkbox],.chq-form-group input[type=radio],
.chq-form-check input[type=checkbox],.chq-form-check input[type=radio]{
width:18px;height:18px;min-width:18px;flex:0 0 18px;padding:0;border:0;
border-radius:4px;background:none;box-shadow:none;accent-color:var(--purple);
margin-top:2px;cursor:pointer}
.chq-form-check{display:flex;gap:0.7rem;align-items:flex-start;margin-bottom:0.5rem;
padding:0.7rem 0.9rem;background:#FAF9FC;border:1.5px solid var(--line-soft);
border-radius:8px;cursor:pointer;transition:border-color .15s,background .15s}
.chq-form-check:hover{border-color:#BFB3D6}
.chq-form-check:has(input:checked){border-color:var(--purple);background:rgba(64,21,136,.05)}
.chq-form-check label{font-weight:500;font-size:0.9rem;margin:0;cursor:pointer;color:var(--gray-800)}
.btn-submit{background:var(--purple);color:var(--white);border:none;padding:14px 40px;border-radius:8px;font-size:1rem;font-weight:700;cursor:pointer;width:100%;transition:background 0.2s;font-family:var(--font)}
.btn-submit:hover{background:var(--purple-dark)}
.btn-submit:disabled{opacity:0.6;cursor:not-allowed}
/* ═══ DISCLAIMER ═══ */
.chq-disclaimer{background:var(--gray-100);border-radius:10px;padding:1.5rem;margin:2rem auto;max-width:900px;font-size:0.85rem;color:var(--gray-600);line-height:1.6}
.chq-disclaimer strong{color:var(--gray-800)}
/* ═══ FOOTER ═══ */
/* The footer was --gray-900 (#212121), a neutral near-black, while every page header
is #2E1A47, a purple-tinted aubergine. Two different darks on one page reads as an
accident. The page now opens and closes in the same colour, and the only other dark
band is the CTA in brand purple — which earns it, because it is the one asking for
the click.
v5: !important, because pages carrying their own inline footer colour were
ignoring the rule above and that is exactly what item 4 was. An inline style
loses to !important, so this now wins on every page whatever it says locally.
If a page still comes out a different shade after this, its footer is not
using .chq-footer at all and I need to see that page's markup. */
.chq-footer{background:var(--aubergine)!important;color:#CFC6DE!important;padding:40px 2rem;text-align:center;font-size:0.85rem}
.chq-footer a{color:#EBE5F7}
.chq-footer a:hover{text-decoration:underline}
.chq-footer-links{display:flex;justify-content:center;gap:1.5rem;margin-bottom:1rem;flex-wrap:wrap}
.chq-footer-bottom{margin-top:0.75rem;font-size:0.8rem;color:#A99DBF}
/* ═══ RESPONSIVE ═══ */
@media(max-width:900px){
.chq-nav-links{display:none}
.chq-mobile-btn{display:block}
}
@media(max-width:768px){
.chq-hero{padding:22px 1.25rem 24px}
.chq-hero h1{font-size:1.5rem}
.chq-hero p{font-size:0.9rem}
.chq-hero-sm h1{font-size:1.4rem}
.chq-hero--home{padding:32px 1.25rem 36px}
.card-grid-3,.card-grid-4{grid-template-columns:1fr}
.card-grid-2{grid-template-columns:1fr}
.stats-row{gap:1.5rem}
/* v5: was font-size:0.8rem with 0.5rem padding — a squashed table nobody can
read. It scrolls at full size instead. */
.comp-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap}
.section-title{font-size:1.5rem}
.chq-form-row{grid-template-columns:1fr}
}