/* /ratings/ landing page, built on ch-variables.css / ch-components.css.
Header, footer, criteria pills and tooltips stay identical to
/ratings/wheels/ so the two pages read as one product. Everything between
them leans on elevation and motion rather than borders. */
:root {
--ls-radius: 5px;
--ls-radius-lg: 10px;
/* Layered elevation. Two shadows per level: a tight contact shadow and a
wide ambient one, which reads far softer than a single large blur. */
--ls-shadow-1: 0 1px 2px rgba(29, 52, 97, 0.06), 0 2px 8px rgba(29, 52, 97, 0.05);
--ls-shadow-2: 0 2px 4px rgba(29, 52, 97, 0.07), 0 8px 24px rgba(29, 52, 97, 0.08);
--ls-shadow-3: 0 4px 8px rgba(29, 52, 97, 0.08), 0 16px 40px rgba(29, 52, 97, 0.12);
--ls-shadow-cta: 0 4px 14px rgba(255, 24, 97, 0.35);
--ls-shadow-cta-hover: 0 8px 22px rgba(255, 24, 97, 0.45);
--ls-ease: cubic-bezier(0.22, 1, 0.36, 1);
}
a { color: var(--color-main); }
body {
font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
color: var(--color-text);
line-height: 1.5;
/* A quiet wash behind the hero so the white cards have something to sit
on. Painted as the body background rather than a negative-z pseudo
element, which keeps it out of the stacking context entirely. */
background-color: var(--color-bg);
background-image:
radial-gradient(900px 380px at 12% -40px, rgba(36, 123, 160, 0.10), transparent 62%),
radial-gradient(760px 340px at 92% 10px, rgba(255, 24, 97, 0.07), transparent 60%),
linear-gradient(180deg, #f7fbfd 0%, rgba(255, 255, 255, 0) 100%);
background-repeat: no-repeat;
/* Bounded on purpose. Left unbounded, the gradient's painting area is the
whole document and Chromium drops the tile on long pages, and the page
renders blank after scrolling. */
background-size: 100% 760px;
}
/* ===== Header, identical to wheels/style.css ===== */
.site-header {
background: #fff;
border-bottom: 1px solid #e0e6ef;
padding: 0 32px;
height: 64px;
display: flex;
align-items: center;
gap: 20px;
position: relative;
z-index: 100;
}
.site-header .sh-logo {
flex-shrink: 0;
display: flex;
align-items: center;
text-decoration: none;
}
.site-header .sh-logo img {
width: 150px;
height: auto;
display: block;
}
.site-header .sh-spacer { flex: 1; }
/* The header carries the proof instead of a date: the page has one job and
the bar should support it. */
.sh-trust {
display: flex;
align-items: center;
gap: 1.1rem;
margin: 0;
font-size: 0.8125rem;
color: var(--color-text-light);
white-space: nowrap;
}
.sh-trust span { display: inline-flex; align-items: baseline; gap: 0.3rem; }
.sh-trust span + span {
padding-left: 1.1rem;
border-left: 1px solid var(--color-border);
}
.sh-trust strong {
font-weight: 700;
color: var(--color-main);
font-variant-numeric: tabular-nums;
}
/* ===== Entrance animation ===== */
/* Only hidden when JS is running. The `js` class is set from , before
first paint, so there is no flash of hidden content either way. */
.js .reveal {
opacity: 0;
transform: translateY(18px);
transition: opacity 0.6s var(--ls-ease), transform 0.6s var(--ls-ease);
}
.js .reveal.is-visible { opacity: 1; transform: none; }
/* ===== Hero ===== */
.hero {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
gap: 3rem;
align-items: center;
padding: 3.5rem 0 2.5rem;
}
.eyebrow {
display: inline-flex;
align-items: center;
gap: 0.6rem;
margin: 0 0 1rem;
font-size: 0.9375rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-medium);
}
.eyebrow-dot {
width: 0.5rem;
height: 0.5rem;
border-radius: 50%;
background: var(--color-cta);
}
.hero-title {
margin: 0 0 1rem;
font-size: clamp(2rem, 4.2vw, 3.1rem);
line-height: 1.12;
letter-spacing: -0.015em;
font-weight: 700;
color: var(--color-main);
}
.hero-title #heroCount {
color: var(--color-cta);
font-variant-numeric: tabular-nums;
}
.hero-sub {
margin: 0 0 1.85rem;
font-size: 1.125rem;
line-height: 1.7;
color: var(--color-text);
max-width: 44em;
}
.benefit-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
gap: 1.1rem;
}
.benefit-list li {
position: relative;
padding-left: 2rem;
font-size: 1.0625rem;
line-height: 1.6;
}
.benefit-list li::before,
.check-list li::before {
content: "";
position: absolute;
left: 0;
top: 0.3em;
width: 1.15rem;
height: 1.15rem;
background: var(--color-cta);
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
/* ===== Form card ===== */
.form-card {
position: relative;
background: linear-gradient(165deg, #ffffff 0%, var(--color-light) 100%);
border-radius: var(--ls-radius-lg);
box-shadow: var(--ls-shadow-3);
padding: 1.85rem;
/* A hairline of brand colour along the top edge. */
background-clip: padding-box;
overflow: hidden;
}
.form-card::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 4px;
background: linear-gradient(90deg, var(--color-cta), var(--color-medium));
}
.form-card > * { position: relative; }
.form-card-flag {
display: inline-flex;
align-items: center;
gap: 0.45rem;
margin: 0 0 0.55rem;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--color-cta);
}
.pulse-dot {
width: 0.45rem;
height: 0.45rem;
border-radius: 50%;
background: var(--color-cta);
box-shadow: 0 0 0 0 rgba(255, 24, 97, 0.55);
animation: ls-pulse 2.2s infinite;
}
@keyframes ls-pulse {
70% { box-shadow: 0 0 0 0.5rem rgba(255, 24, 97, 0); }
100% { box-shadow: 0 0 0 0 rgba(255, 24, 97, 0); }
}
.form-card-title {
margin: 0 0 1rem;
font-size: 1.55rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-main);
}
.check-list {
list-style: none;
margin: 0 0 1.5rem;
padding: 0;
display: grid;
gap: 0.6rem;
}
.check-list li {
position: relative;
padding-left: 1.85rem;
font-size: 0.9375rem;
line-height: 1.5;
}
/* ===== Form ===== */
.ratings-optin { display: grid; gap: 0.8rem; }
.field-row {
display: grid;
gap: 0.8rem;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.ratings-optin input[type="text"],
.ratings-optin input[type="email"] {
width: 100%;
box-sizing: border-box;
padding: 0.8rem 0.9rem;
font-family: inherit;
font-size: 0.9375rem;
color: var(--color-text);
background: #fff;
border: 1px solid #c3dfec;
border-radius: var(--ls-radius);
box-shadow: inset 0 1px 2px rgba(29, 52, 97, 0.05);
transition: border-color 0.18s var(--ls-ease), box-shadow 0.18s var(--ls-ease);
}
.ratings-optin input::placeholder { color: #9bb3c4; }
.ratings-optin input:hover { border-color: #a9d0e2; }
.ratings-optin input:focus {
outline: none;
border-color: var(--color-medium);
box-shadow: 0 0 0 3px rgba(36, 123, 160, 0.18);
}
.ratings-optin input[aria-invalid="true"] {
border-color: var(--color-cta);
box-shadow: 0 0 0 3px rgba(255, 24, 97, 0.14);
}
/* Honeypot: hidden from people, reachable by bots. */
.hp-field {
position: absolute !important;
left: -9999px !important;
width: 1px !important;
height: 1px !important;
opacity: 0 !important;
}
.consent {
display: flex;
align-items: flex-start;
gap: 0.55rem;
font-size: 0.8125rem;
line-height: 1.5;
color: var(--color-text);
cursor: pointer;
}
.consent input {
margin-top: 0.2rem;
flex-shrink: 0;
width: 1rem;
height: 1rem;
accent-color: var(--color-cta);
}
/* The rotating border glow needs an animatable angle, which only works if the
custom property is registered. Unregistered, the browser treats it as a
string and the keyframes silently do nothing. */
@property --glow-angle {
syntax: '';
initial-value: 0deg;
inherits: false;
}
@keyframes ls-glow-spin { to { --glow-angle: 360deg; } }
/* CTA button: gradient, shadow at rest, brand glow rotating clockwise on
hover. The glow sits outside the button, so this button cannot also carry
an inside sheen sweep: the two need opposite overflow. */
.ratings-optin .btn {
position: relative;
z-index: 0;
width: 100%;
padding: 0.95rem 1.5rem;
font-size: 1rem;
font-weight: 700;
letter-spacing: 0.01em;
border: none;
border-radius: var(--ls-radius);
color: #fff;
background: linear-gradient(135deg, #ff1861 0%, #e01050 100%);
box-shadow: var(--ls-shadow-cta);
cursor: pointer;
transition: transform 0.18s var(--ls-ease), box-shadow 0.18s var(--ls-ease), filter 0.18s var(--ls-ease);
}
/* Two layers behind the label. A negative z-index child paints ABOVE its
parent's own background, so the glow needs a solid face drawn over it or it
washes across the button. ::after is that face; ::before is the glow, one
step further back. */
.ratings-optin .btn::after {
content: "";
position: absolute;
inset: 0;
z-index: -1;
border-radius: inherit;
background: linear-gradient(135deg, #ff1861 0%, #e01050 100%);
}
.ratings-optin .btn::before {
content: "";
position: absolute;
inset: -2px;
z-index: -2;
border-radius: calc(var(--ls-radius) + 2px);
/* Pink and blue only. Navy and the pale blue both vanish against a pink
button on a white page, which left half the rotation looking dead. */
background: conic-gradient(from var(--glow-angle),
var(--color-cta), #ff7ba8, var(--color-medium), #7fd3ef, var(--color-medium), #ff7ba8, var(--color-cta));
filter: blur(3px);
opacity: 0;
transition: opacity 0.25s var(--ls-ease);
animation: ls-glow-spin 4s linear infinite;
}
.ratings-optin .btn:hover {
transform: translateY(-2px);
box-shadow: var(--ls-shadow-cta-hover);
filter: saturate(1.05);
}
.ratings-optin .btn:hover::before { opacity: 1; }
.ratings-optin .btn:active { transform: translateY(0); box-shadow: var(--ls-shadow-cta); }
.ratings-optin .btn:focus-visible {
outline: 3px solid rgba(29, 52, 97, 0.45);
outline-offset: 2px;
}
.ratings-optin .btn[disabled] {
opacity: 0.7;
cursor: default;
transform: none;
box-shadow: var(--ls-shadow-cta);
}
.ratings-optin .btn[disabled]::before { opacity: 0; animation: none; }
.form-error {
margin: 0;
padding: 0.6rem 0.75rem;
background: #ffe8ef;
border-left: 4px solid var(--color-cta);
border-radius: 0 var(--ls-radius) var(--ls-radius) 0;
font-size: 0.8125rem;
color: var(--color-main);
animation: ls-shake 0.4s var(--ls-ease);
}
@keyframes ls-shake {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(-4px); }
75% { transform: translateX(4px); }
}
.form-note {
margin: 0;
font-size: 0.75rem;
color: var(--color-text-light);
text-align: center;
}
.form-note a { color: var(--color-text-light); }
/* Success panel replaces the form in place. */
.optin-success {
text-align: center;
padding: 0.75rem 0;
animation: ls-fade-up 0.45s var(--ls-ease) both;
}
@keyframes ls-fade-up {
from { opacity: 0; transform: translateY(10px); }
to { opacity: 1; transform: none; }
}
.optin-success .tick {
display: flex;
align-items: center;
justify-content: center;
width: 3rem;
height: 3rem;
margin: 0 auto 0.9rem;
border-radius: 50%;
background: linear-gradient(135deg, #ff1861 0%, #e01050 100%);
box-shadow: var(--ls-shadow-cta);
animation: ls-pop 0.45s var(--ls-ease) both;
}
.optin-success .tick::before {
content: "";
width: 1.5rem;
height: 1.5rem;
background: #fff;
-webkit-mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
mask: url("data:image/svg+xml;utf8,") no-repeat center / contain;
}
@keyframes ls-pop {
0% { transform: scale(0.6); opacity: 0; }
60% { transform: scale(1.08); opacity: 1; }
100% { transform: scale(1); }
}
.optin-success h3 { margin: 0 0 0.5rem; font-size: 1.2rem; color: var(--color-main); }
.optin-success p { margin: 0 0 0.5rem; font-size: 0.875rem; line-height: 1.6; }
.optin-success .hint { font-size: 0.8125rem; color: var(--color-text-light); }
/* ===== Sections ===== */
.section {
background: #fff;
border: 1px solid #eaeff4;
border-radius: var(--ls-radius-lg);
box-shadow: var(--ls-shadow-1);
padding: 1.75rem;
margin-bottom: 1.5rem;
transition: box-shadow 0.3s var(--ls-ease), transform 0.3s var(--ls-ease);
}
.section:hover { box-shadow: var(--ls-shadow-2); }
.section-title {
margin: 0 0 0.5rem;
font-size: 1.6rem;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--color-main);
}
.section-subtitle {
margin: 0 0 1.35rem;
font-size: 0.9375rem;
line-height: 1.6;
color: var(--color-text);
}
/* ===== Criteria ===== */
.criteria-pills { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.criteria-pill {
padding: 0.4rem 0.8rem;
background: var(--color-light);
border: 1px solid transparent;
border-bottom: 2px dotted var(--color-medium);
border-radius: var(--ls-radius);
font-size: 0.8rem;
font-weight: 500;
color: var(--color-main);
cursor: help;
transition: transform 0.18s var(--ls-ease), box-shadow 0.18s var(--ls-ease), background 0.18s var(--ls-ease);
}
.criteria-pill:hover {
transform: translateY(-2px);
background: #d9f1fb;
box-shadow: var(--ls-shadow-1);
}
.has-tooltip { position: relative; }
.has-tooltip::before {
content: attr(data-tooltip);
position: absolute;
bottom: calc(100% + 0.6rem);
left: 50%;
transform: translateX(-50%) translateY(4px);
width: max-content;
max-width: 320px;
white-space: pre-line;
background: var(--color-main);
color: #ffffff;
padding: 0.65rem 0.7rem;
border-radius: var(--ls-radius);
font-size: 0.75rem;
font-weight: 400;
line-height: 1.55;
text-align: left;
box-shadow: var(--ls-shadow-3);
opacity: 0;
visibility: hidden;
transition: opacity 0.16s var(--ls-ease), visibility 0.16s, transform 0.16s var(--ls-ease);
pointer-events: none;
z-index: 200;
}
.has-tooltip:hover::before,
.has-tooltip:focus-visible::before {
opacity: 1;
visibility: visible;
transform: translateX(-50%) translateY(0);
}
.has-tooltip.tooltip-below::before { bottom: auto; top: calc(100% + 0.6rem); }
/* ===== Preview strip ===== */
/* This block carries the whole tease, so it gets room to breathe rather than
the standard section rhythm. */
.preview-section { margin: 3.5rem 0; }
.preview-subhead {
margin: 0 0 0.4rem;
font-size: 0.75rem;
font-weight: 700;
letter-spacing: 0.09em;
text-transform: uppercase;
color: var(--color-medium);
}
.preview-note {
margin: 0 0 1.1rem;
font-size: 0.875rem;
line-height: 1.6;
color: var(--color-text-light);
}
/* Best In Class: the category is sharp, the winner is not. The inverse of
the table below, where the wheel name is the readable part. */
.awards-grid {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 0.75rem;
margin-bottom: 2.25rem;
}
.award-teaser {
display: flex;
flex-direction: column;
overflow: hidden;
background: linear-gradient(165deg, #ffffff 0%, #f5fbfe 100%);
border: 1px solid #e7eef4;
border-radius: var(--ls-radius);
box-shadow: var(--ls-shadow-1);
transition: box-shadow 0.25s var(--ls-ease), transform 0.25s var(--ls-ease);
}
.award-teaser:hover {
transform: translateY(-2px);
box-shadow: var(--ls-shadow-2);
}
/* The photo is blurred and scaled past the frame, so the blur never bleeds
a soft edge in. The badge sits on top of it, sharp. */
.award-media {
position: relative;
aspect-ratio: 3 / 2;
overflow: hidden;
background: var(--color-light);
}
.award-media img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
filter: blur(7px) saturate(1.1);
transform: scale(1.12);
-webkit-user-select: none;
user-select: none;
pointer-events: none;
}
.award-body {
display: flex;
flex-direction: column;
gap: 0.35rem;
padding: 0.85rem 1rem 1rem;
}
.award-badge {
position: absolute;
left: 0.65rem;
bottom: 0.65rem;
padding: 0.25rem 0.6rem;
border-radius: 999px;
background: var(--color-main);
color: #fff;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
white-space: nowrap;
box-shadow: 0 2px 8px rgba(29, 52, 97, 0.35);
}
.award-name {
font-size: 0.9375rem;
font-weight: 700;
color: var(--color-main);
}
.award-spec {
font-size: 0.8125rem;
color: var(--color-text-light);
}
/* A touch softer than the table, so four short strings still read as text. */
.award-name.blurred, .award-spec.blurred { filter: blur(4px); }
.preview-wrap {
position: relative;
overflow-x: auto;
border-radius: var(--ls-radius);
}
.preview-table {
width: 100%;
border-collapse: separate;
border-spacing: 0;
font-size: 0.875rem;
}
.preview-table th {
text-align: left;
padding: 0.7rem 0.85rem;
background: var(--color-main);
color: #fff;
font-weight: 700;
font-size: 0.75rem;
letter-spacing: 0.04em;
text-transform: uppercase;
white-space: nowrap;
}
.preview-table th:first-child { border-top-left-radius: var(--ls-radius); }
.preview-table th:last-child { border-top-right-radius: var(--ls-radius); }
.preview-table td {
padding: 0.8rem 0.85rem;
border-bottom: 1px solid #eef3f7;
white-space: nowrap;
vertical-align: middle;
}
.preview-table tbody tr { transition: background 0.18s var(--ls-ease); }
.preview-table tbody tr:hover { background: #f7fcff; }
.w-name { display: block; font-weight: 500; color: var(--color-main); }
.w-meta { display: block; margin-top: 0.15rem; font-size: 0.75rem; color: var(--color-text-light); }
.score-cell {
font-weight: 700;
font-size: 1rem;
color: var(--color-main);
font-variant-numeric: tabular-nums;
}
.price-cell { font-variant-numeric: tabular-nums; }
/* Everything but the wheel name is blurred: the shapes and colours still
read as real data, the values do not. Selection is off so the numbers
cannot be copied out of the DOM by dragging. */
.blurred {
filter: blur(5px);
-webkit-user-select: none;
user-select: none;
pointer-events: none;
}
/* Per-criterion stars, matching /ratings/wheels/ exactly: five glyphs, filled
or empty, coloured by band (4+ green, 3 orange, below that red). */
.crit-col, .crit-cell { text-align: center; }
.crit-col { font-size: 0.6875rem; }
.cell-stars {
display: inline-flex;
font-size: 12px;
line-height: 1;
letter-spacing: 0.5px;
white-space: nowrap;
}
.star-empty { color: #e5e7eb; }
.score-excellent .star-filled { color: #00de00; }
.score-fair .star-filled { color: #ffa500; }
.score-poor .star-filled { color: #ff0000; }
.w-cell { min-width: 220px; }
.preview-scroll-hint {
display: none;
margin: 0.7rem 0 0;
text-align: center;
font-size: 0.75rem;
color: var(--color-text-light);
}
.code-chip {
display: inline-block;
padding: 0.2rem 0.55rem;
border-radius: 999px;
background: rgba(255, 24, 97, 0.1);
border: 1px solid rgba(255, 24, 97, 0.25);
font-size: 0.75rem;
font-weight: 700;
color: #d5104f;
white-space: nowrap;
}
.preview-fade {
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 5rem;
background: linear-gradient(to bottom, rgba(255,255,255,0), #fff 88%);
pointer-events: none;
}
.preview-more {
margin: 0.9rem 0 0;
text-align: center;
font-size: 0.875rem;
font-weight: 700;
color: var(--color-medium);
}
/* ===== Finale: the founder block and the last CTA share one row =====
The quote earns the signup that sits next to it, so they belong on the
same line rather than stacked a screen apart. */
.finale {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
gap: 1.5rem;
align-items: stretch;
margin-bottom: 3rem;
}
.finale .founder-section {
margin-bottom: 0;
align-items: center; /* the photo centres against the taller quote */
}
.finale .form-card { margin: 0; max-width: none; }
/* ===== Founder ===== */
.founder-section {
display: flex;
gap: 1.75rem;
align-items: flex-start;
background: linear-gradient(135deg, #ffffff 0%, #f6fbfd 100%);
}
.founder-photo {
width: 96px;
height: 96px;
border-radius: 50%;
flex-shrink: 0;
object-fit: cover;
box-shadow: var(--ls-shadow-2);
transition: transform 0.3s var(--ls-ease);
}
.founder-section:hover .founder-photo { transform: scale(1.04); }
.founder-quote {
position: relative;
margin: 0;
padding-left: 4px; /* room for the rule */
}
.founder-quote::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 4px;
border-radius: 2px;
background: linear-gradient(180deg, var(--color-cta), var(--color-medium));
}
.founder-quote p {
margin: 0 0 1rem;
font-size: 1rem;
line-height: 1.7;
padding-left: 1.1rem;
}
.founder-quote p:last-of-type { margin-bottom: 1.1rem; }
.founder-quote footer {
display: flex;
flex-direction: column;
padding-left: 1.1rem;
font-size: 0.8125rem;
}
.founder-quote footer strong { color: var(--color-main); }
.founder-quote footer span { color: var(--color-text-light); }
/* ===== Footer =====
Still the brand navy, but given structure: an accent edge, a brand block,
three labelled link columns, and social icons as real buttons. */
.site-footer {
position: relative;
margin-top: 3rem;
/* 1rem side padding, matching .container's own, so the footer columns line
up with the section edges above rather than sitting 16px inside them. */
padding: 3rem 1rem 0;
background: linear-gradient(180deg, #1d3461 0%, #16294c 100%);
color: #e7f8ff;
}
.site-footer::before {
content: "";
position: absolute;
inset: 0 0 auto 0;
height: 3px;
background: linear-gradient(90deg, var(--color-cta), var(--color-medium));
}
.footer-inner {
max-width: 1400px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.8fr);
gap: 3rem;
padding-bottom: 2.5rem;
}
.footer-brand { max-width: 34em; }
/* The logo is a colour mark on transparent; this renders it as a clean white
wordmark without shipping a second asset. */
.footer-logo {
display: block;
width: 170px;
height: auto;
margin-bottom: 1rem;
filter: brightness(0) invert(1);
opacity: 0.95;
}
.footer-tagline {
margin: 0 0 1.5rem;
font-size: 0.875rem;
line-height: 1.65;
color: rgba(231, 248, 255, 0.65);
}
.footer-social { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.footer-social a {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: rgba(231, 248, 255, 0.08);
border: 1px solid rgba(231, 248, 255, 0.12);
color: rgba(231, 248, 255, 0.75);
text-decoration: none;
transition: background 0.2s var(--ls-ease), color 0.2s var(--ls-ease),
transform 0.2s var(--ls-ease), border-color 0.2s var(--ls-ease);
}
.footer-social a:hover {
background: var(--color-cta);
border-color: var(--color-cta);
color: #fff;
transform: translateY(-3px);
}
.footer-social a:focus-visible {
outline: 2px solid #e7f8ff;
outline-offset: 2px;
}
.footer-cols {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 2rem;
}
.footer-col { display: flex; flex-direction: column; align-items: flex-start; }
.footer-col-title {
margin: 0 0 0.9rem;
font-size: 0.6875rem;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: rgba(231, 248, 255, 0.45);
}
.footer-col a {
padding: 0.3rem 0;
font-size: 0.875rem;
color: rgba(231, 248, 255, 0.82);
text-decoration: none;
transition: color 0.15s var(--ls-ease), transform 0.15s var(--ls-ease);
}
.footer-col a:hover { color: #fff; transform: translateX(3px); }
.footer-bottom {
max-width: 1400px;
margin: 0 auto;
padding: 1.1rem 0 1.4rem;
border-top: 1px solid rgba(231, 248, 255, 0.12);
display: flex;
flex-wrap: wrap;
justify-content: space-between;
gap: 0.5rem;
font-size: 0.75rem;
color: rgba(231, 248, 255, 0.45);
}
.footer-bottom-note { color: rgba(231, 248, 255, 0.35); }
/* ===== Responsive ===== */
@media (max-width: 1024px) {
.awards-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.footer-inner { grid-template-columns: 1fr; gap: 2.25rem; }
/* Stacked: the closing card goes full width, same as the hero card. */
.finale { grid-template-columns: 1fr; }
}
/* The logo, four items and the padding need about 700px. Below that the
longest item goes. Qualified with the element selector because plain
`.sh-trust-last` loses to `.sh-trust span` on specificity and the rule
silently did nothing. */
@media (max-width: 720px) {
.sh-trust span.sh-trust-last { display: none; }
}
@media (max-width: 900px) {
.hero {
grid-template-columns: 1fr;
gap: 1.5rem;
padding: 2.25rem 0 1.5rem;
}
/* One column, resequenced: headline, then the form, then the detail.
The headline gives the form its meaning, and the form still lands
inside the first screen. */
.hero-copy { display: contents; }
.hero-head { order: 1; }
.hero .form-card { order: 2; }
.hero-rest { order: 3; }
.hero-title { margin-bottom: 0; }
}
@media (max-width: 640px) {
.site-header { padding: 0 16px; height: 56px; }
.site-header .sh-logo img { width: 118px; }
/* Only the headline figure survives on a phone; the rest is repeated in
the hero copy a few hundred pixels below anyway. */
.sh-trust { font-size: 0.75rem; gap: 0; }
.sh-trust span + span { display: none; }
.form-card { padding: 1.35rem; }
.section { padding: 1.35rem; }
.founder-section { flex-direction: column; align-items: center; text-align: center; }
.founder-quote { padding-left: 0; padding-top: 4px; }
.founder-quote::before {
left: 0;
right: 0;
top: 0;
bottom: auto;
width: auto;
height: 4px;
background: linear-gradient(90deg, var(--color-cta), var(--color-medium));
}
.founder-quote p { padding: 0.9rem 0 0; }
.founder-quote p + p { padding-top: 0; }
.founder-quote footer { padding-left: 0; align-items: center; }
.site-footer { padding: 2.25rem 1rem 0; }
.has-tooltip::before { max-width: 70vw; }
.preview-scroll-hint { display: block; }
.awards-grid { grid-template-columns: 1fr; }
.footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.5rem; }
.footer-bottom { justify-content: center; text-align: center; }
}
/* ===== Motion preferences =====
Movement only. A blanket `* { transition-duration: 0 !important }` also
flattened the CTA's sheen sweep and every colour fade, which reads as a
broken page rather than a calm one. The reveal still resolves to visible:
landing.js skips the observer entirely when the setting is on. */
@media (prefers-reduced-motion: reduce) {
.reveal { opacity: 1; transform: none; transition: none; }
/* The glow is deliberately NOT stopped here. It rotates hue in place with
no positional movement, which is the category least likely to cause
trouble, and the site owner wants it visible. The transform lifts below
are the actual movement, and those still stop. */
.ratings-optin .btn:hover,
.criteria-pill:hover,
.footer-social a:hover,
.founder-section:hover .founder-photo,
.award-teaser:hover,
.stat:hover { transform: none; }
.pulse-dot { animation: none; }
.optin-success,
.optin-success .tick { animation: none; }
.form-error { animation: none; }
}