/* ==== cards.css · layer 1 of 8 ==== */
/* ==========================================================================
CLIENT PROOF — the shared vocabulary
Two things are the same in all ten versions, because they are content and
not design: the small page render, and the one link out. Everything else —
how the businesses are laid out, how one is selected, how its detail is
built — is the version's own decision and lives in its own file.
The page render is the homepage's own .ss-shot, rebuilt on container
queries so it holds its proportions at any size a version gives it.
========================================================================== */
/* ---------- the preview label, fixed so it costs the fold nothing -------- */
.q7-lab{
position: fixed; z-index: 90; right: 14px; bottom: 14px;
display: flex; align-items: center; gap: 9px; max-width: min(420px, calc(100vw - 28px));
padding: 8px 13px 8px 9px; border-radius: 999px;
background: rgba(11,13,18,.9); color: #fff; backdrop-filter: blur(6px);
font-size: 12px; line-height: 1.25; box-shadow: 0 10px 30px -12px rgba(0,0,0,.6);
}
.q7-lab b{ flex: none; display: grid; place-items: center; width: 24px; height: 24px;
border-radius: 50%; background: #fff; color: #0B0D12; font-family: var(--mono);
font-size: 11px; font-weight: 800; }
.q7-lab span{ min-width: 0; }
.q7-lab i{ display: block; font-style: normal; font-size: 10px; letter-spacing: .12em;
text-transform: uppercase; opacity: .58; font-family: var(--mono); }
.q7-lab a{ margin-left: 4px; flex: none; opacity: .62; text-decoration: underline; }
.q7-lab a:hover{ opacity: 1; }
@media (max-width: 600px){ .q7-lab{ right: 10px; bottom: 10px; font-size: 11px; } }
/* ---------- the small page render --------------------------------------- */
.q7-shot{
position: relative; display: block; margin: 0; container-type: inline-size;
aspect-ratio: 16/10; overflow: hidden; background: #fff;
border-radius: 8px; border: 1px solid var(--line-2);
}
.q7-shot .q7-chrome{
position: absolute; inset: 0 0 auto; height: 8.4cqw; display: flex; align-items: center;
gap: 1.2cqw; padding: 0 2.4cqw; background: #F1F3F6; border-bottom: 1px solid var(--line-2);
}
.q7-shot .q7-chrome i{ width: 1.5cqw; height: 1.5cqw; border-radius: 50%; background: #CBD2DA; }
.q7-shot .q7-chrome s{
margin-left: 1.4cqw; flex: 1; display: flex; align-items: center; height: 5cqw;
padding: 0 2cqw; border-radius: 2.5cqw; background: #fff; border: 1px solid var(--line-2);
font-size: 2.4cqw; color: var(--ink-4); text-decoration: none; overflow: hidden; white-space: nowrap;
}
.q7-shot .q7-page{ position: absolute; inset: 8.4cqw 0 0 0; display: flex; flex-direction: column; }
.q7-shot .q7-top{
flex: none; height: 9cqw; display: flex; align-items: center; gap: 2.2cqw;
padding: 0 3.4cqw; border-bottom: 1px solid var(--line-2);
}
.q7-shot .q7-top b{ font-size: 3.2cqw; font-weight: 800; letter-spacing: -.03em; color: var(--k);
white-space: nowrap; overflow: hidden; }
.q7-shot .q7-top em{ width: 5cqw; height: 1.1cqw; border-radius: .6cqw; background: #DFE4EA; }
.q7-shot .q7-top em:first-of-type{ margin-left: auto; }
.q7-shot .q7-top u{
margin-left: 1.4cqw; padding: 1.3cqw 2.4cqw; border-radius: 1.1cqw;
background: var(--k); color: #fff; font-size: 2.4cqw; font-weight: 700;
text-decoration: none; white-space: nowrap;
}
.q7-shot .q7-banner{
flex: 1; display: flex; align-items: center; gap: 3.2cqw; padding: 4.4cqw 4cqw; color: #fff;
background: var(--k);
background: linear-gradient(118deg, var(--k), color-mix(in srgb, var(--k) 62%, #05070C));
}
.q7-shot .q7-copy{ flex: 1.2; min-width: 0; }
.q7-shot .q7-copy b{ display: block; font-size: 5.2cqw; line-height: 1.05; font-weight: 800;
letter-spacing: -.035em; }
.q7-shot .q7-copy i{ display: block; margin-top: 1.8cqw; font-style: normal; font-size: 2.5cqw;
line-height: 1.4; opacity: .78; }
.q7-shot .q7-copy u{
display: inline-flex; margin-top: 3cqw; padding: 1.8cqw 3.2cqw; border-radius: 1.3cqw;
background: #fff; color: var(--k); font-size: 2.5cqw; font-weight: 750; text-decoration: none;
}
.q7-shot .q7-art{
flex: 1; align-self: stretch; border-radius: 2cqw; min-width: 0;
background:
radial-gradient(72% 62% at 32% 24%, rgba(255,255,255,.40), rgba(255,255,255,.04) 70%),
linear-gradient(158deg, rgba(0,0,0,.10), rgba(0,0,0,.42));
}
/* ---------- the one link out -------------------------------------------- */
.q7-story{
display: inline-flex; align-items: center; gap: 7px;
font-size: 13px; font-weight: 650; letter-spacing: -.012em; color: var(--g-blue);
}
.q7-story svg{ width: 14px; height: 14px; flex: none; fill: none; stroke: currentColor;
stroke-width: 2.1; stroke-linecap: round; stroke-linejoin: round;
transition: transform .2s cubic-bezier(.4,0,.2,1); }
.q7-story:hover svg{ transform: translateX(3px); }
/* ---------- the reveal, shared timing ------------------------------------
Height is animated from a measured pixel value rather than from `auto`,
so the panel opens at the same speed whatever it contains. */
.q7-open{
overflow: hidden; height: 0;
transition: height .34s cubic-bezier(.32,.72,0,1), opacity .24s ease;
opacity: 0;
}
.q7-open.is-on{ opacity: 1; }
@media (prefers-reduced-motion: reduce){
.q7-open{ transition: none; }
}
/* ==== cards.css · layer 2 of 8 ==== */
/* ==========================================================================
VERSION 10 · MARKETPLACE TRUST EXPERIENCE
The thinking: a partner listing on a marketplace people already trust. The
businesses are presented as partners rather than logos, each carrying the
one thing a marketplace lets you verify for yourself — a live site. The
detail opens behind a breadcrumb, the most familiar "you are here" device
on the web, so nobody has to work out where the panel came from.
========================================================================== */
.cc{ padding: clamp(15px,2vh,22px) var(--pad) clamp(18px,2.4vh,26px);
border-top: 1px solid var(--line-2); background: var(--paper); }
.cc .mp{ width: min(1400px,100%); margin-inline: auto; }
.cc .mp-head{ display: flex; align-items: center; gap: 12px; }
.cc .mp-t{ font-size: clamp(14px,1.15vw,16px); font-weight: 750; letter-spacing: -.028em; }
.cc .mp-n{ margin-left: auto; display: inline-flex; align-items: center; gap: 6px;
font-size: 11.4px; color: var(--ink-3); }
.cc .mp-n svg{ width: 13px; height: 13px; fill: none; stroke: var(--g-green); stroke-width: 2.2;
stroke-linecap: round; stroke-linejoin: round; }
.cc .mp-row{ display: flex; gap: 6px; margin-top: 10px; }
.cc .mp-i{
position: relative; flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px;
padding: 6px 11px 6px 6px; border: 1px solid var(--line-b); border-radius: 10px;
background: var(--paper); cursor: pointer; text-align: left;
transition: border-color .2s ease, background .2s ease, box-shadow .2s ease;
}
.cc .mp-i:hover{ border-color: #C3D4EE; box-shadow: 0 4px 12px -8px rgba(15,27,61,.5); }
.cc .mp-m{ position: relative; flex: none; display: grid; place-items: center;
width: 27px; height: 27px; border-radius: 7px; background: var(--k); color: #fff;
font-size: 9.6px; font-weight: 800; }
/* the verified badge rides the logo, so it costs the name no width — which is
the only reason ten full business names still fit on one line */
.cc .mp-v{ position: absolute; right: -4px; bottom: -4px; display: grid; place-items: center;
width: 13px; height: 13px; border-radius: 50%; background: var(--g-green);
box-shadow: 0 0 0 1.6px var(--paper); }
.cc .mp-v svg{ width: 8px; height: 8px; fill: none; stroke: #fff; stroke-width: 3.6;
stroke-linecap: round; stroke-linejoin: round; }
.cc .mp-i b{ min-width: 0; font-size: 11.6px; font-weight: 620; letter-spacing: -.022em;
color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cc .mp-i.is-sel{ border-color: var(--k); background: color-mix(in srgb, var(--k) 5%, #fff);
box-shadow: 0 0 0 1px var(--k); }
.cc .mp-i.is-sel b{ color: var(--ink); font-weight: 750; }
/* The row prints the short name — ten of them have to hold one desktop line.
The full name is carried alongside it in the markup and is hidden here, so
only the phone rail (which has room) turns it on. Without this base rule
both names render at desktop width, one straight after the other. */
.cc .q7-nF{ display: none; }
/* name over trade, so the pill answers "who" and "what they do" at once */
.cc .mp-w{ display: flex; flex-direction: column; min-width: 0; }
.cc .mp-s{
display: block; margin-top: 1px; font-style: normal;
font-size: 9.6px; font-weight: 500; letter-spacing: -.01em; line-height: 1.2;
color: var(--ink-4); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cc .mp-i.is-sel .mp-s{ color: var(--ink-3); }
/* ---------- the partner detail ---------- */
.cc .mp-in{ padding: 14px 0 2px; }
.cc .mp-card{ border: 1px solid var(--line-b); border-radius: 16px; overflow: hidden;
background: var(--paper); box-shadow: 0 1px 2px rgba(15,27,61,.05), 0 20px 44px -34px rgba(15,27,61,.5); }
.cc .mp-crumb{ display: flex; align-items: center; gap: 8px; padding: 10px 18px;
border-bottom: 1px solid var(--line-2); background: #FAFBFE; font-size: 11.6px; color: var(--ink-3); }
.cc .mp-crumb button{ border: 0; background: none; cursor: pointer; padding: 0; font-size: 11.6px;
color: var(--ink-3); }
.cc .mp-crumb button:hover{ color: var(--ink); text-decoration: underline; }
.cc .mp-crumb i{ font-style: normal; color: var(--ink-4); }
.cc .mp-crumb b{ color: var(--ink); font-weight: 650; }
.cc .mp-body{ display: grid; grid-template-columns: minmax(0,1fr) minmax(0,clamp(230px,23vw,320px));
gap: clamp(18px,2.2vw,34px); padding: clamp(16px,1.7vw,24px) 18px clamp(18px,1.7vw,24px);
align-items: center; }
.cc .mp-who{ display: flex; align-items: center; gap: 12px; }
.cc .mp-wm{ flex: none; display: grid; place-items: center; width: 42px; height: 42px;
border-radius: 11px; background: var(--k); color: #fff; font-size: 13.6px; font-weight: 800; }
.cc .mp-who h3{ font-size: clamp(19px,1.6vw,22px); letter-spacing: -.042em; }
.cc .mp-meta{ display: flex; align-items: center; gap: 8px; margin-top: 3px; flex-wrap: wrap; }
.cc .mp-meta span{ font-size: 12.2px; color: var(--ink-3); }
.cc .mp-live{ display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px;
border-radius: 999px; background: #E9F6ED; color: #0C5A25; font-size: 10.8px; font-weight: 650; }
.cc .mp-live svg{ width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2.6;
stroke-linecap: round; stroke-linejoin: round; }
.cc .mp-strip{ display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 1px;
margin-top: 15px; background: var(--line-2); border: 1px solid var(--line-2); border-radius: 12px;
overflow: hidden; }
.cc .mp-s{ padding: 11px 14px; background: var(--paper); }
.cc .mp-s em{ display: block; font-style: normal; font-size: 10.8px; color: var(--ink-3); }
.cc .mp-s b{ display: block; margin-top: 4px; font-size: 20px; font-weight: 800; letter-spacing: -.045em;
line-height: 1; color: var(--ink); }
.cc .mp-s.is-now b{ color: var(--k); }
.cc .mp-s.is-txt b{ font-size: 13.4px; font-weight: 700; letter-spacing: -.024em; line-height: 1.35;
margin-top: 5px; }
.cc .mp-s i{ display: block; margin-top: 3px; font-style: normal; font-size: 10.4px; color: var(--ink-4); }
.cc .mp-foot{ display: flex; align-items: center; gap: 16px; margin-top: 15px; }
.cc .mp-x{ margin-left: auto; padding: 7px 13px; border: 1px solid var(--line-b); border-radius: 8px;
background: var(--paper); cursor: pointer; font-size: 11.8px; font-weight: 600; color: var(--ink-2); }
.cc .mp-x:hover{ background: #F3F6FB; }
@media (max-width: 1340px){
.cc .mp-i{ padding: 5px 8px 5px 5px; gap: 6px; }
.cc .mp-i b{ font-size: 10.7px; }
.cc .mp-m{ width: 25px; height: 25px; font-size: 9px; }
}
@media (max-width: 860px){
.cc{ padding: 14px var(--gut) 18px; }
.cc .mp-n{ display: none; }
/* ---- the row becomes a swipe rail -------------------------------------
Ten full business names cannot share one phone screen, and the previous
answer was to drop the names entirely. Instead the row scrolls: every
card keeps its whole title, and a swipe reaches all ten. Full-bleed out
of the section's gutter and back in as scroll-padding, so the first card
is not flush against the edge and the last one is not cropped. */
.cc .mp-row{
display: flex; flex-wrap: nowrap; align-items: stretch;
overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch; scroll-behavior: smooth;
margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut);
scroll-padding-inline: var(--gut);
scrollbar-width: none; -ms-overflow-style: none;
}
.cc .mp-row::-webkit-scrollbar{ display: none; }
@media (prefers-reduced-motion: reduce){ .cc .mp-row{ scroll-behavior: auto; } }
.cc .mp-row{ gap: 6px; margin-top: 9px; }
.cc .mp-i{ flex: 0 0 auto; justify-content: flex-start;
padding: 5px 12px 5px 5px; border-radius: 10px; }
/* the full name, never clipped — this is the whole point of the rail */
.cc .mp-i b{
display: block; max-width: none; white-space: nowrap;
overflow: visible; text-overflow: clip;
}
.cc .mp-i .q7-nS{ display: none; }
.cc .mp-i .q7-nF{ display: inline; }
.cc .mp-i b{ font-size: 11.8px; }
.cc .mp-s{ font-size: 9.8px; overflow: visible; text-overflow: clip; }
.cc .mp-m{ width: 27px; height: 27px; font-size: 9.4px; }
.cc .mp-body{ grid-template-columns: minmax(0,1fr); gap: 15px; padding: 15px; }
.cc .mp-side{ order: -1; }
.cc .mp-strip{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.cc .mp-s.is-txt{ grid-column: 1 / -1; }
}
/* ---------- every desktop width -----------------------------------------
The pill now carries two lines — the business and its trade — and ten of
those will not share one lane at any desktop width: at 1440 all ten trades
and three of the names were still being clipped. Five across, twice, is
the same answer the band below 1120px already used, and it gives every
pill about 250px, which holds "Car PPF & Detailing" outright. */
@media (min-width: 861px){
.cc .mp-row{ display: grid; grid-template-columns: repeat(5, minmax(0,1fr)); gap: 6px; }
}
/* at the narrow end of that grid a 154px pill still cut "Car PPF & Detailing",
so the mark and the trade give back the few pixels it needs */
@media (min-width: 861px) and (max-width: 980px){
.cc .mp-i{ padding: 5px 7px 5px 4px; gap: 5px; }
.cc .mp-m{ width: 23px; height: 23px; font-size: 8.4px; }
.cc .mp-s{ font-size: 9px; letter-spacing: -.02em; }
}
/* ==== cards.css · layer 3 of 8 ==== */
/* ==========================================================================
FIVE WAYS TO SAY "THIS IS CLICKABLE"
The two families (A = the app-icon grid, B = the pill row) are unchanged
apart from the trade line. What varies across the five is only how a card
tells you it can be opened — five different conventions, so the question
being answered is "which cue do people understand", not "which skin".
Every cue applies to both families through the shared hooks:
.cc-i one card .cc-nm its name
.cc-cue the cue element .cc-hint the line above the row
========================================================================== */
.cc-hint{ display: none; }
.cc-cue{ display: none; }
.cc .ag-i, .cc .mp-i{ cursor: pointer; }
/* the row heading line, used by cue 3 */
.cc-hint{
display: none; align-items: center; gap: 7px; margin: 0;
font-size: 12px; color: var(--ink-3);
}
.cc-hint svg{ width: 13px; height: 13px; flex: none; fill: none; stroke: currentColor;
stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
/* ==== CUE 1 · ARROW ======================================================
The oldest signal on the web: something points onward. It sits on every
card, turns to face the panel on the one that is open, and needs no words. */
.cc1 .cc-cue{
display: grid; place-items: center; width: 15px; height: 15px; margin: 4px auto 0;
border-radius: 50%; color: var(--ink-4);
transition: transform .22s ease, color .22s ease, background .22s ease;
}
.cc1 .cc-cue svg{ width: 9px; height: 9px; fill: none; stroke: currentColor;
stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.cc1 .ag-i:hover .cc-cue, .cc1 .mp-i:hover .cc-cue{ color: var(--k); transform: translateY(1px); }
.cc1 .is-sel .cc-cue{ background: var(--k); color: #fff; transform: rotate(180deg); }
.cc1 .mp-i .cc-cue{ margin: 0 0 0 auto; }
.cc1 .mp-i{ padding-right: 8px; }
/* ==== CUE 2 · BUTTON =====================================================
Not a cue drawn onto a card — the card is rebuilt as a button. A raised
surface, a real border, and a press that moves. You know it because it
looks like every button you have ever used. */
.cc2 .ag-i{
border: 1px solid var(--line-b); background: var(--paper); border-radius: 12px;
box-shadow: 0 1px 0 rgba(15,27,61,.05), 0 3px 8px -5px rgba(15,27,61,.35);
transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease;
}
.cc2 .ag-i:hover{ background: var(--paper); border-color: #C3D4EE;
box-shadow: 0 2px 0 rgba(15,27,61,.05), 0 10px 20px -10px rgba(15,27,61,.5); transform: translateY(-2px); }
.cc2 .ag-i:active, .cc2 .mp-i:active{ transform: translateY(1px); box-shadow: 0 1px 0 rgba(15,27,61,.06); }
.cc2 .mp-i{ box-shadow: 0 1px 0 rgba(15,27,61,.05), 0 3px 8px -5px rgba(15,27,61,.35);
transition: transform .14s ease, box-shadow .18s ease, border-color .18s ease; }
.cc2 .mp-i:hover{ transform: translateY(-2px);
box-shadow: 0 2px 0 rgba(15,27,61,.05), 0 10px 20px -10px rgba(15,27,61,.5); }
.cc2 .is-sel{ box-shadow: 0 0 0 2px var(--k) !important; transform: none !important; }
/* ==== CUE 3 · SAID IN WORDS ==============================================
No icon can beat a sentence for someone who is not looking for one. The
instruction sits above the row and stays there, and the count tells you
how much there is to look through. */
.cc3 .cc-hint{ display: inline-flex; }
.cc3 .ag-i:hover, .cc3 .mp-i:hover{ background: #EEF4FE; }
.cc3 .is-sel .cc-nm{ text-decoration: none; }
.cc3 .cc-cue{
display: block; margin-top: 3px; font-size: 8.6px; font-weight: 700; letter-spacing: .08em;
text-transform: uppercase; color: var(--k); opacity: .72;
}
.cc3 .mp-i .cc-cue{ margin: 0 0 0 auto; align-self: center; padding-left: 8px; }
.cc3 .mp-i{ position: relative; }
.cc3 .is-sel .cc-cue{ opacity: 1; }
/* ==== CUE 4 · LINK LANGUAGE ==============================================
The name behaves like a link, because a link is the one thing on a page
everybody already knows is clickable. */
.cc4 .cc-nm{ color: var(--ink-2); text-decoration: underline; text-decoration-style: dotted;
text-underline-offset: 3px; text-decoration-color: var(--line-b); }
.cc4 .ag-i:hover .cc-nm, .cc4 .mp-i:hover .cc-nm{
color: var(--k); text-decoration-style: solid; text-decoration-color: currentColor; }
.cc4 .is-sel .cc-nm{ color: var(--k); text-decoration-style: solid; text-decoration-color: currentColor; }
.cc4 .cc-cue{
display: inline-flex; align-items: center; gap: 4px; margin-top: 4px;
font-size: 9.4px; font-weight: 700; color: var(--k); opacity: 0;
transition: opacity .18s ease;
}
.cc4 .cc-cue svg{ width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 2.6;
stroke-linecap: round; stroke-linejoin: round; }
.cc4 .ag-i:hover .cc-cue, .cc4 .mp-i:hover .cc-cue, .cc4 .is-sel .cc-cue{ opacity: 1; }
.cc4 .mp-i .cc-cue{ margin: 2px 0 0; }
/* ==== CUE 5 · OPEN / CLOSE ===============================================
The accordion convention: a plus that becomes a minus. It is the only one
of the five that also tells you the card will close again. */
.cc5 .cc-cue{
display: grid; place-items: center; width: 16px; height: 16px; margin: 5px auto 0;
border-radius: 50%; border: 1px solid var(--line-b); background: var(--paper);
color: var(--ink-3); transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.cc5 .cc-cue svg{ width: 8px; height: 8px; fill: none; stroke: currentColor; stroke-width: 3;
stroke-linecap: round; }
.cc5 .cc-cue .cc-minus{ display: none; }
.cc5 .is-sel .cc-cue{ background: var(--k); border-color: var(--k); color: #fff; }
.cc5 .is-sel .cc-cue .cc-plus{ display: none; }
.cc5 .is-sel .cc-cue .cc-minus{ display: block; }
.cc5 .ag-i:hover .cc-cue, .cc5 .mp-i:hover .cc-cue{ border-color: var(--k); color: var(--k); }
.cc5 .mp-i .cc-cue{ margin: 0 0 0 auto; }
.cc5 .mp-i{ padding-right: 8px; }
/* ---------- the phone rail: every cue has to survive it ---------------- */
@media (max-width: 860px){
.cc-hint{ font-size: 11.4px; }
.cc1 .cc-cue, .cc5 .cc-cue{ margin-top: 4px; }
.cc4 .cc-cue{ opacity: 1; } /* there is no hover on a phone */
.cc2 .ag-i{ padding: 8px 9px 9px; }
.cc3 .ag-i:hover, .cc3 .mp-i:hover{ background: none; }
}
/* ---------- 861-1420px: family B gives the cue up ----------------------
Measured, not guessed: a B pill at five across has 155-230px to hold a
25px mark, the business name, its trade AND a cue. Shaving pixels off the
cue moved the clipping around rather than removing it — at 861 it was the
trade, at 1000 it was cue 4. So in this one band the per-card cue goes and
the pill keeps its text intact. Nothing is lost that the band cannot say
another way: cue 2 is the button surface itself, cue 4 still styles the
name as a link, cue 3 still carries its instruction line above the row,
and every card still lifts and presses on hover. Below 861 the rail gives
the pill all the width it wants and every cue comes back. */
@media (min-width: 861px) and (max-width: 1420px){
.cc .mp-i .cc-cue{ display: none; }
.cc .mp-i{ padding-right: 11px; }
}
/* the very bottom of the five-across grid, where the pill is narrowest */
@media (min-width: 861px) and (max-width: 900px){
.cc .mp-i{ padding: 5px 6px 5px 4px; gap: 4px; }
.cc .mp-m{ width: 22px; height: 22px; font-size: 8px; }
.cc .mp-s{ font-size: 8.8px; letter-spacing: -.022em; }
.cc .mp-i b{ font-size: 10.4px; }
}
/* ==== cards.css · layer 4 of 8 ==== */
/* ==========================================================================
BUSINESSES WE RUN GOOGLE ADS FOR — five mobile alignment layers
The reference (b4) is left intact at every desktop width. Everything in
this file is inside `@media (max-width: 860px)` apart from the heading
rule, which only has work to do because the two lines that used to sit
beside the heading have been removed from the markup.
What was wrong on a phone, measured rather than guessed at 320 / 360 /
390 / 430px:
· the pills were `flex: 0 0 auto` in a swipe rail, so every one was a
different width. Ten marks therefore landed at ten irregular
intervals — the single biggest reason the row did not read as a list
of equal things.
· `.mp-i` was `align-items: center` around a two-line text block, so
the 27px mark centred itself against the *pair* of lines and sat
visually low against the name, which is the line the eye reads first.
· the result action was a third flex child on the same baseline as the
mark, so it opened a ragged gap of a different size in every pill —
58px in "Dr. Pearl's", 4px in "Kinam Heat Exchange".
· the trade sat on `overflow: visible; text-overflow: clip`, which does
not clip a nowrap line — it lets it run past the pill's own padding.
All five layers answer the same four points. They differ only in the
shape they use to answer them, which is the question this lab asks:
al1 equal-width swipe rail the row still scrolls; every pill is the
same 252px and parks on a snap point
al2 full-width column list one business a row, three hard columns
al3 two-up grid, left equal cards, one left edge inside each
al4 two-up grid, centred equal tiles, mark over centred text
al5 hairline ledger no boxes; a mark rail and inset rules
Shared by all five: one type scale, one 36-40px mark, the name always the
first and strongest line, the trade directly beneath it on the same edge,
and the result action on a predictable, repeated position.
========================================================================== */
/* ==========================================================================
THE ROOT CAUSE — a class-name collision, and it is not a phone bug
`.mp-s` is used twice in the reference stylesheet for two unrelated
things: the trade line on a business (`Dental Clinic`)
and a statistic cell inside the open panel (`
`). The
panel's rule is the later one, so it wins:
.cc .mp-s{ padding: 11px 14px; background: var(--paper); }
Every trade line on every card, at every width, was therefore carrying
14px of left padding and 11px top and bottom that nothing asked for.
Measured on the reference at 390px: the name starts at x=64 and the trade
at x=78, and the 13px trade line occupies a 35px box. That single
declaration is most of what "the logo, name and industry are not properly
aligned" was describing — the industry was literally indented out of line
with the name, and the extra 22px of dead height pushed the mark's centre
down away from the name it belongs to.
Fixed here rather than in the reference file, so the reference stays
byte-for-byte what it was. It is corrected at every width, not only on a
phone, because the desktop pill has exactly the same 14px indent. */
.cc.al .mp-i .mp-s{ padding: 0; background: none; border: 0; }
/* The collision runs the other way too, and it clips real copy. The trade
rule carries `white-space: nowrap; overflow: hidden; text-overflow:
ellipsis` — correct for a one-line trade, wrong for the panel's "Google
Ads work" cell, which is a sentence. Measured on the reference at 390px:
that cell's has scrollWidth 326 inside a 292px box, so "Corporate and
product site built for quote requests." was reaching the reader as
"…built for quote reques". It is allowed to wrap. */
.cc.al .mp-strip .mp-s{ white-space: normal; overflow: visible; text-overflow: clip; }
/* Removing 22px of phantom vertical padding from every trade line also took
21px off the desktop pill, which left the verified tick 2px from the pill's
own bottom edge. The pill gets that room back as real padding it can use,
so the reference's vertical weight is unchanged while its alignment is
corrected. Phones set their own padding per layer below. */
@media (min-width: 861px){
.cc.al .mp-i{ padding-block: 9px; }
}
/* ---------- the heading now stands alone ---------------------------------
`.mp-head` was a flex row built to hold the heading and a second line
beside it. With the second line gone, flex leaves the heading as a
shrink-to-fit box, which on a phone wrapped "Businesses we run Google Ads
for" onto three lines inside a 150px column. It is a block again. */
.cc.al .mp-head{ display: block; }
.cc.al .mp-t{ margin: 0; }
@media (max-width: 860px){
.cc.al{ padding: 15px var(--gut) 20px; }
.cc.al .mp-t{ font-size: 15px; line-height: 1.25; }
/* One type scale for all five, so the comparison is about arrangement.
Every rule below is scoped through `.mp-i`, because `.mp-s` is also the
panel's statistic cell — an unscoped `.cc.al .mp-s{white-space:nowrap}`
stopped "Corporate and product site built for quote requests." wrapping
inside the open panel and it was clipped by .mp-strip's overflow. */
.cc.al .mp-i b{
display: block; max-width: none; white-space: nowrap;
font-weight: 700; letter-spacing: -.024em; line-height: 1.25;
color: var(--ink-2);
}
.cc.al .mp-i.is-sel b{ color: var(--ink); }
.cc.al .mp-i .mp-s{
display: block; font-style: normal; font-weight: 500;
letter-spacing: -.008em; line-height: 1.25; color: var(--ink-4);
white-space: nowrap;
}
.cc.al .mp-i.is-sel .mp-s{ color: var(--ink-3); }
/* the result action, same wording and same colour in all five — only its
position changes. `opacity` is forced on because cue 4 fades it in on
hover, and there is no hover on a phone. */
.cc.al .mp-i .cc-cue{
display: inline-flex; align-items: center; gap: 4px; opacity: 1;
font-size: 9.6px; font-weight: 700; letter-spacing: .005em;
color: var(--k); white-space: nowrap;
}
.cc.al .mp-i .cc-cue svg{ width: 9px; height: 9px; flex: none; }
/* the mark: one size, one radius per layer, and the tick rides it exactly
the same way it does on desktop so it never costs the name any width */
.cc.al .mp-v{ width: 14px; height: 14px; right: -4px; bottom: -4px; }
}
/* ==========================================================================
AL1 · EQUAL-WIDTH SWIPE RAIL
The row is still a rail — the layout the reference already chose — but
every pill is exactly 252px, so the ten marks fall on a regular 260px
pitch as you swipe, and each pill parks flush against the gutter on a
snap point rather than stopping wherever the finger left it.
Inside the pill: a fixed 36px mark column and one text column carrying
three left-aligned lines. Name, trade and action therefore share a single
left edge, and the mark is centred against all three rather than against
two of them.
========================================================================== */
@media (max-width: 860px){
.cc.al1 .mp-row{
gap: 8px; margin-top: 11px;
scroll-snap-type: x proximity;
}
.cc.al1 .mp-i{
flex: 0 0 252px; width: 252px; scroll-snap-align: start;
display: grid; grid-template-columns: 36px minmax(0,1fr);
column-gap: 11px; align-items: center; justify-content: start;
padding: 11px 13px 12px; border-radius: 14px; text-align: left;
}
.cc.al1 .mp-m{
grid-row: 1 / span 2; align-self: center;
width: 36px; height: 36px; border-radius: 10px; font-size: 11.8px;
}
.cc.al1 .mp-w{ display: block; min-width: 0; }
.cc.al1 .mp-i b{ font-size: 12.6px; }
.cc.al1 .mp-i .mp-s{ margin-top: 2px; font-size: 10.2px; }
.cc.al1 .mp-i .cc-cue{ grid-column: 2; margin: 6px 0 0; }
}
@media (max-width: 374px){
.cc.al1 .mp-i{ flex-basis: 236px; width: 236px; padding: 10px 12px 11px; }
.cc.al1 .mp-i b{ font-size: 12.1px; }
.cc.al1 .mp-i .mp-s{ font-size: 9.9px; }
}
/* ==========================================================================
AL2 · FULL-WIDTH COLUMN LIST
One business a row, the full width of the gutter box, and three hard
columns: a 38px mark, the name over the trade, the action right-aligned.
Every mark starts at the same x, every name starts at the same x, every
action ends at the same x — the arrangement a phone contact list uses,
for the same reason.
Nothing scrolls sideways, so there is no hidden content: all ten are on
the screen and can be read straight down.
========================================================================== */
@media (max-width: 860px){
.cc.al2 .mp-row{
display: grid; grid-template-columns: minmax(0,1fr); gap: 7px;
margin-top: 11px; margin-inline: 0; padding-inline: 0; overflow: visible;
}
.cc.al2 .mp-i{
width: 100%; display: grid;
grid-template-columns: 38px minmax(0,1fr) auto;
column-gap: 12px; align-items: center;
padding: 9px 13px 10px; border-radius: 12px; text-align: left;
}
.cc.al2 .mp-m{ width: 38px; height: 38px; border-radius: 11px; font-size: 12.2px; }
.cc.al2 .mp-w{ display: block; min-width: 0; }
.cc.al2 .mp-i b{ font-size: 13px; }
.cc.al2 .mp-i .mp-s{ margin-top: 2px; font-size: 10.4px; }
.cc.al2 .mp-i .cc-cue{ margin: 0; justify-self: end; }
}
@media (max-width: 374px){
.cc.al2 .mp-i{ grid-template-columns: 34px minmax(0,1fr) auto;
column-gap: 10px; padding: 9px 11px 10px; }
.cc.al2 .mp-m{ width: 34px; height: 34px; font-size: 11.2px; }
.cc.al2 .mp-i b{ font-size: 12.1px; }
.cc.al2 .mp-i .mp-s{ font-size: 9.9px; }
.cc.al2 .mp-i .cc-cue{ font-size: 9px; }
}
/* ==========================================================================
AL3 · TWO-UP GRID, LEFT-ALIGNED
Two equal columns, five rows. Every card is the same width and the grid
stretches them to the same height, so the ten sit on a true two-column
baseline. Inside a card the mark, the name, the trade and the action all
start on one left edge — the card has a single alignment, not three.
Half the height of a full-width list, and still nothing scrolls sideways.
========================================================================== */
@media (max-width: 860px){
.cc.al3 .mp-row{
display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px;
margin-top: 11px; margin-inline: 0; padding-inline: 0; overflow: visible;
}
.cc.al3 .mp-i{
width: 100%; display: flex; flex-direction: column;
align-items: flex-start; justify-content: flex-start; gap: 0;
padding: 11px 12px 12px; border-radius: 13px; text-align: left;
}
.cc.al3 .mp-m{ width: 34px; height: 34px; border-radius: 10px;
font-size: 11.2px; margin-bottom: 10px; }
.cc.al3 .mp-w{ display: block; width: 100%; min-width: 0; }
.cc.al3 .mp-i b{ font-size: 12.2px; }
.cc.al3 .mp-i .mp-s{ margin-top: 2px; font-size: 9.9px; }
.cc.al3 .mp-i .cc-cue{ margin: 9px 0 0; }
}
@media (max-width: 374px){
/* measured: at 320px a 139px card leaves 119px of content, and
"Kinam Heat Exchange" was 120.5px of it. The card gives back 2px of
padding and the name 0.2px of size, and nothing is shortened. */
.cc.al3 .mp-i{ padding: 10px 9px 11px; }
.cc.al3 .mp-i b{ font-size: 11px; }
.cc.al3 .mp-i .mp-s{ font-size: 9.3px; }
.cc.al3 .mp-i .cc-cue{ font-size: 9px; }
}
/* ==========================================================================
AL4 · TWO-UP GRID, CENTRED
The same two equal columns, but each tile is centred on one vertical
axis: a 40px mark, the name under it, the trade under that, the action
last. Equal widths and equal heights mean the ten marks form two exact
columns down the section.
This is the app-icon reading of the row (family A's idea) rebuilt so that
every tile is the same size — which is the one thing family A's phone
rail could not do, because its cards were sized by their names.
========================================================================== */
@media (max-width: 860px){
.cc.al4 .mp-row{
display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px;
margin-top: 11px; margin-inline: 0; padding-inline: 0; overflow: visible;
}
.cc.al4 .mp-i{
width: 100%; display: flex; flex-direction: column;
align-items: center; justify-content: flex-start; gap: 0;
padding: 14px 10px 13px; border-radius: 14px; text-align: center;
}
.cc.al4 .mp-m{ width: 40px; height: 40px; border-radius: 12px;
font-size: 12.8px; margin-bottom: 10px; }
.cc.al4 .mp-w{ display: block; width: 100%; min-width: 0; text-align: center; }
.cc.al4 .mp-i b{ font-size: 12.2px; }
.cc.al4 .mp-i .mp-s{ margin-top: 3px; font-size: 9.9px; }
.cc.al4 .mp-i .cc-cue{ margin: 9px auto 0; }
}
@media (max-width: 374px){
.cc.al4 .mp-i{ padding: 12px 8px 11px; }
.cc.al4 .mp-m{ width: 36px; height: 36px; font-size: 11.6px; }
.cc.al4 .mp-i b{ font-size: 11.2px; }
.cc.al4 .mp-i .mp-s{ font-size: 9.3px; }
.cc.al4 .mp-i .cc-cue{ font-size: 9px; }
}
/* ==========================================================================
AL5 · HAIRLINE LEDGER
The boxes come off. Ten rows, one hairline between them, inset to start
at the text edge so the marks read as a rail down the left — the settings
list every phone already has. With no card border to define an item, the
alignment is doing all the work, which is exactly the test.
The mark is a circle here rather than a squircle, because without a
surrounding box a rounded square reads as a second, smaller box.
Selection is a tint plus a rule down the left edge, since there is no
border to colour.
========================================================================== */
@media (max-width: 860px){
.cc.al5 .mp-row{
display: block; margin-top: 8px;
margin-inline: 0; padding-inline: 0; overflow: visible;
}
.cc.al5 .mp-i{
width: 100%; display: grid;
grid-template-columns: 36px minmax(0,1fr) auto;
column-gap: 12px; align-items: center;
padding: 11px 4px 11px 8px; text-align: left;
border: 0; border-radius: 10px; background: none; box-shadow: none;
}
/* the inset rule, drawn under everything but the mark */
.cc.al5 .mp-i::before{
content: ""; position: absolute; left: 56px; right: 4px; bottom: 0;
height: 1px; background: var(--line-b);
}
.cc.al5 .mp-i:last-child::before{ display: none; }
.cc.al5 .mp-m{ width: 36px; height: 36px; border-radius: 50%; font-size: 11.6px; }
.cc.al5 .mp-v{ width: 13px; height: 13px; right: -2px; bottom: -2px; }
.cc.al5 .mp-w{ display: block; min-width: 0; }
.cc.al5 .mp-i b{ font-size: 12.8px; }
.cc.al5 .mp-i .mp-s{ margin-top: 2px; font-size: 10.2px; }
.cc.al5 .mp-i .cc-cue{ margin: 0; justify-self: end; padding-right: 2px; }
/* selected, with no border to carry it */
.cc.al5 .mp-i.is-sel{
background: color-mix(in srgb, var(--k) 6%, #fff);
box-shadow: none; border: 0;
}
.cc.al5 .mp-i.is-sel::after{
content: ""; position: absolute; left: 0; top: 7px; bottom: 7px;
width: 3px; border-radius: 0 2px 2px 0; background: var(--k);
}
.cc.al5 .mp-i.is-sel::before{ display: none; }
}
@media (max-width: 374px){
.cc.al5 .mp-i{ grid-template-columns: 32px minmax(0,1fr) auto;
column-gap: 10px; padding: 10px 2px 10px 6px; }
.cc.al5 .mp-i::before{ left: 48px; right: 2px; }
.cc.al5 .mp-m{ width: 32px; height: 32px; font-size: 10.6px; }
.cc.al5 .mp-i b{ font-size: 12px; }
.cc.al5 .mp-i .mp-s{ font-size: 9.7px; }
.cc.al5 .mp-i .cc-cue{ font-size: 9px; }
}
/* ==== cards.css · layer 5 of 8 ==== */
/* ==========================================================================
THE CLIENT SELECTOR CARD — the three-zone geometry, shared by all ten
One card, three zones, in the same order at every width:
┌──────┬────────────────────────┬──────────────────┐
│ LOGO │ Client name │ See Results → │
│ │ Industry │ │
└──────┴────────────────────────┴──────────────────┘
auto minmax(0,1fr) auto
The middle column is the only elastic one, so the space that used to sit
empty to the right of a short name ("Dr. Pearl's" left ~80px of nothing in
a 252px pill) is now taken by the action instead of by air. The logo and
the action are both `auto`, which means they are as wide as they need to
be and never wider, and the action ends flush against the card's own
padding on every card — so all ten arrows land on one vertical line.
Two things this file fixes that the reference could not:
· `cards.css` hid the action outright between 861px and 1420px, because a
five-across pill at those widths had no room for it. The row now sizes
its own columns (`auto-fit` on a 228px floor), so a card is never
narrower than the three zones need and "See Results" is on every card
at every width. Above 1370px it is the reference's five-across grid,
unchanged, because a 260px pill does hold all three.
· `cards.css` also faded the action in on hover only. There is no hover on
a phone and it is a permanent label now, so it is always at opacity 1.
What is NOT here: the ten finishes and the ten light active states, which
live in cards.css. This file is the skeleton they all share.
========================================================================== */
.cc.rz{
--rz-act: #1A73E8; /* the action's blue — one neutral blue, not the
client's own colour, so ten different brand
colours cannot make ten different-weight CTAs */
--rz-line: #E3E9F3; /* resting hairline */
--rz-line-h: #C9D9F2; /* hover hairline */
}
/* ---------- the name is no longer the thing that says "clickable" --------
The reference underlined every business name with a dotted rule (cue 4's
"link language"). With a worded action and an arrow on the right of every
card, a dotted rule under ten names is noise competing with the real
signal, so it comes off. Nothing about the name's text changes. */
.cc.rz .cc-nm,
.cc.rz .mp-i:hover .cc-nm,
.cc.rz .mp-i.is-sel .cc-nm{ text-decoration: none; }
.cc.rz .mp-i.is-sel .cc-nm{ color: var(--ink); }
/* ---------- zone 3 · the action ---------------------------------------- */
.cc.rz .mp-i .cc-cue{
display: inline-flex; align-items: center; opacity: 1; margin: 0;
justify-self: end; align-self: center;
font-weight: 700; letter-spacing: -.004em; white-space: nowrap;
color: var(--rz-act);
transition: color .18s ease, background .18s ease,
border-color .18s ease, box-shadow .18s ease;
}
.cc.rz .mp-i .cc-ar{
flex: none; fill: none; stroke: currentColor; stroke-width: 2.4;
stroke-linecap: round; stroke-linejoin: round;
transition: transform .22s cubic-bezier(.32,.72,0,1);
}
/* the arrow moves toward the panel it opens — the one bit of motion that
says "this goes somewhere" without a word */
.cc.rz .mp-i:hover .cc-ar,
.cc.rz .mp-i.is-sel .cc-ar,
.cc.rz .mp-i:focus-visible .cc-ar{ transform: translateX(3px); }
@media (prefers-reduced-motion: reduce){
.cc.rz .mp-i .cc-ar{ transition: none; }
}
/* ---------- the card surface, light at rest and light when chosen -------
The reference selected a card with the client's own brand colour as a
1px border AND a 1px box-shadow ring — which on Gentech (#12161F) or
Servo India (#C0392B) reads as a heavy dark outline. Every version below
replaces it; this is the shared reset that stops the dark ring reaching
any of them. */
.cc.rz .mp-i{
border: 1px solid var(--rz-line); background: var(--paper);
box-shadow: none;
transition: background .2s ease, border-color .2s ease,
box-shadow .22s ease, transform .18s ease;
}
.cc.rz .mp-i:hover{ border-color: var(--rz-line-h); box-shadow: none; }
.cc.rz .mp-i.is-sel{ border-color: var(--rz-line); background: var(--paper);
box-shadow: none; }
.cc.rz .mp-i:focus-visible{ outline: 2px solid var(--rz-act); outline-offset: 2px; }
/* ==========================================================================
DESKTOP · 861px and up
========================================================================== */
@media (min-width: 861px){
/* A card is never narrower than its three zones. Measured at the tight
end: 7+27 logo +9 +96 trade +9 +67 action +10 = 225px, so a 228px floor
is the smallest honest column. At 1280 that still yields five across. */
.cc.rz .mp-row{
display: grid; grid-template-columns: repeat(auto-fit, minmax(228px, 1fr));
gap: 6px;
}
.cc.rz .mp-i{
display: grid; grid-template-columns: auto minmax(0,1fr) auto;
column-gap: 12px; align-items: center;
padding: 8px 10px 8px 7px; border-radius: 11px;
}
/* one desktop scale for every width, so the 861-900 and 861-980 tightening
the reference needed for a five-across pill no longer applies */
.cc.rz .mp-m{ width: 28px; height: 28px; border-radius: 8px; font-size: 9.8px; }
.cc.rz .mp-v{ width: 13px; height: 13px; right: -4px; bottom: -4px; }
.cc.rz .mp-w{ display: block; min-width: 0; }
.cc.rz .mp-i b{ font-size: 11.7px; font-weight: 700; letter-spacing: -.022em;
line-height: 1.25; color: var(--ink-2); }
.cc.rz .mp-i .mp-s{ margin-top: 1px; font-size: 9.6px; line-height: 1.25; }
.cc.rz .mp-i .cc-cue{ font-size: 9.6px; gap: 4px; }
.cc.rz .mp-i .cc-ar{ width: 10px; height: 10px; }
}
/* the reference's five-across grid, kept exactly where it still fits */
@media (min-width: 1370px){
.cc.rz .mp-row{ grid-template-columns: repeat(5, minmax(0,1fr)); }
}
/* ==========================================================================
PHONE · 860px and down
The reference's swipe rail is replaced by a full-width row in eight of the
ten versions, because a three-zone card wants the whole gutter box: at
390px that is 354px, which holds a 40px logo, "Kinam Heat Exchange" at
13.2px and "See Results →" with 40px to spare. Versions 01 and 07 keep
the rail, with the pill widened to hold all three zones.
========================================================================== */
@media (max-width: 860px){
.cc.rz .mp-row{
display: grid; grid-template-columns: minmax(0,1fr); gap: 8px;
margin-top: 12px; margin-inline: 0; padding-inline: 0; overflow: visible;
}
.cc.rz .mp-i{
width: 100%; display: grid;
grid-template-columns: auto minmax(0,1fr) auto;
column-gap: 12px; align-items: center;
padding: 10px 13px; border-radius: 14px; text-align: left;
}
.cc.rz .mp-m{ width: 40px; height: 40px; border-radius: 12px; font-size: 12.6px; }
.cc.rz .mp-v{ width: 15px; height: 15px; right: -4px; bottom: -4px; }
.cc.rz .mp-w{ display: block; min-width: 0; }
.cc.rz .mp-i b{ font-size: 13.2px; font-weight: 700; letter-spacing: -.026em;
line-height: 1.25; color: var(--ink-2); }
.cc.rz .mp-i.is-sel b{ color: var(--ink); }
.cc.rz .mp-i .mp-s{ margin-top: 2px; font-size: 10.6px; line-height: 1.25;
color: var(--ink-4); }
.cc.rz .mp-i .cc-cue{ font-size: 10.6px; gap: 5px; }
.cc.rz .mp-i .cc-ar{ width: 11.5px; height: 11.5px; }
}
/* ---- small phones: 374px and down --------------------------------------
Measured at 320px: the gutter box is 284px, and the three zones plus
padding come to 285 at the sizes above. Everything gives back a little
and nothing is shortened — "Kinam Heat Exchange" still prints in full. */
@media (max-width: 374px){
.cc.rz .mp-i{ column-gap: 9px; padding: 9px 10px; }
.cc.rz .mp-m{ width: 34px; height: 34px; border-radius: 10px; font-size: 11px; }
.cc.rz .mp-v{ width: 13px; height: 13px; }
.cc.rz .mp-i b{ font-size: 12.2px; }
.cc.rz .mp-i .mp-s{ font-size: 9.8px; }
.cc.rz .mp-i .cc-cue{ font-size: 9.4px; gap: 4px; }
.cc.rz .mp-i .cc-ar{ width: 10px; height: 10px; }
}
/* ==== cards.css · layer 6 of 8 ==== */
/* ==========================================================================
TEN FINISHES FOR ONE CARD
Every version below renders exactly the same markup — the builder is
shared and the three zones never move. What changes is two things, and
they are the two things the brief asks about:
1. how the third zone is finished, so "See Results" is unmissable
without being loud: plain text, a soft chip, a ruled column, its own
field, an outlined button, an underlined link;
2. what a chosen card looks like — ten light treatments, none of which
use the client's brand colour as a hard border.
The reference selected a card with `border-color: var(--k)` plus a
`0 0 0 1px var(--k)` ring. On Gentech (#12161F) and Servo India (#C0392B)
that is a 2px near-black or blood-red outline around a white card, which
is the "too dark and heavy" the brief describes. Nothing below goes above
a 1px border, a ~6% tint, or a shadow that stays under 18% opacity.
Two versions (01 and 07) keep the reference's phone swipe rail, with the
pill widened to hold the third zone. The other eight give the card the
whole gutter box, because that is what makes the three zones land on the
same three vertical lines on every card.
========================================================================== */
/* ==========================================================================
THE SWIPE RAIL — versions 01 and 07 only
The pill is as wide as the three zones need and no wider, so the next
card always peeks and the row still reads as scrollable.
========================================================================== */
@media (max-width: 860px){
.cc.rz1 .mp-row, .cc.rz7 .mp-row{
display: flex; flex-wrap: nowrap; align-items: stretch;
overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch; scroll-behavior: smooth;
scroll-snap-type: x proximity;
margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut);
scroll-padding-inline: var(--gut);
scrollbar-width: none; -ms-overflow-style: none;
gap: 8px; margin-top: 12px;
}
.cc.rz1 .mp-row::-webkit-scrollbar, .cc.rz7 .mp-row::-webkit-scrollbar{ display: none; }
@media (prefers-reduced-motion: reduce){
.cc.rz1 .mp-row, .cc.rz7 .mp-row{ scroll-behavior: auto; }
}
.cc.rz1 .mp-i, .cc.rz7 .mp-i{
flex: 0 0 auto; scroll-snap-align: start;
width: min(326px, calc(100vw - 2 * var(--gut) - 4px));
}
.cc.rz7 .mp-i{ width: min(344px, calc(100vw - 2 * var(--gut) - 4px)); }
}
/* ==========================================================================
01 · PLAIN — rail
Nothing around the action at all: the words and the arrow, set in the
action blue, hard against the card's right padding. The lightest possible
finish, and the one that leaves the most room for the name.
Active: a soft blue wash, a thin blue hairline and a wide, very faint
halo — the card lifts off the page without gaining a dark edge.
========================================================================== */
.cc.rz1 .mp-i:hover{ background: #FBFDFF; border-color: #CFE0FA; }
.cc.rz1 .mp-i.is-sel{
background: #F5F9FF; border-color: #BFD8FA;
box-shadow: 0 0 0 3px rgba(26,115,232,.10);
}
.cc.rz1 .mp-i.is-sel .cc-cue{ color: #1560CE; }
/* ==========================================================================
02 · SOFT CHIP — list
The action sits in a rounded tint chip, so it reads as a control rather
than as a caption. The chip is the same width on all ten cards, which
gives the right-hand edge of the list a single clean line.
Active: the card stays white and gains a soft blue shadow; the chip is
what fills in. Colour moves to the thing you pressed, not to the border.
========================================================================== */
.cc.rz2 .mp-i .cc-cue{
padding: 5px 10px; border-radius: 999px;
background: #EFF4FE; border: 1px solid #E2EAFA;
}
.cc.rz2 .mp-i:hover{ border-color: #CFE0FA; }
.cc.rz2 .mp-i:hover .cc-cue{ background: #E7EFFD; border-color: #D3E2FA; }
.cc.rz2 .mp-i.is-sel{
background: var(--paper); border-color: #D3E2FA;
box-shadow: 0 4px 14px -8px rgba(26,115,232,.45);
}
.cc.rz2 .mp-i.is-sel .cc-cue{
background: #E2EDFD; border-color: #C4D9F8; color: #1257C4;
}
/* ==========================================================================
03 · BRAND, LIGHTENED — list
The one version that keeps the client's own colour in the active state,
because losing it entirely loses a little of the "this is that business"
feeling. It is used at 5% as a wash and at 20% as a hairline — so
Gentech's near-black becomes a pale grey card and Servo India's red
becomes a pale blush, and neither can go dark.
The logo is a circle here, which reads more like a company avatar than an
app icon and sits more quietly under ten different brand colours.
========================================================================== */
.cc.rz3 .mp-m{ border-radius: 50%; }
.cc.rz3 .mp-v{ right: -2px; bottom: -2px; }
.cc.rz3 .mp-i:hover{
background: color-mix(in srgb, var(--k) 3%, #fff);
border-color: color-mix(in srgb, var(--k) 14%, #fff);
}
.cc.rz3 .mp-i.is-sel{
background: color-mix(in srgb, var(--k) 5%, #fff);
border-color: color-mix(in srgb, var(--k) 20%, #fff);
box-shadow: 0 2px 10px -7px color-mix(in srgb, var(--k) 55%, #fff);
}
@media (max-width: 860px){ .cc.rz3 .mp-i{ padding: 11px 13px; } }
/* ==========================================================================
04 · RULED COLUMN — list
A hairline stands between the name and the action, the way a table rules
its action column. Because "See Results" is the same string on every
card and the card's right padding is uniform, that rule lands on one
vertical line down the whole list — the strongest alignment signal any of
the ten has.
Active: the whole row takes a pale blue wash and the rule tints with it.
========================================================================== */
.cc.rz4 .mp-i .cc-cue{
align-self: stretch; padding-left: 13px;
border-left: 1px solid var(--rz-line);
}
.cc.rz4 .mp-i:hover{ border-color: #CFE0FA; background: #FCFDFF; }
.cc.rz4 .mp-i.is-sel{
background: #F2F7FE; border-color: #C6DCFB; box-shadow: none;
}
.cc.rz4 .mp-i.is-sel .cc-cue{ border-left-color: #C6DCFB; color: #1560CE; }
@media (max-width: 860px){
.cc.rz4 .mp-i .cc-cue{ padding-left: 14px; }
}
/* ==========================================================================
05 · ELEVATED — list
No tint anywhere. The card is white and floats on a soft shadow at rest,
and being chosen simply raises it further and sharpens its hairline. The
most restrained of the ten, and the one that reads best on a page that
already has a lot of colour in it.
========================================================================== */
.cc.rz5 .mp-i{
border-color: #EAEFF7; border-radius: 13px;
box-shadow: 0 1px 2px rgba(15,27,61,.04), 0 6px 16px -12px rgba(15,27,61,.40);
}
.cc.rz5 .mp-i:hover{
border-color: #DDE6F4; transform: translateY(-1px);
box-shadow: 0 2px 4px rgba(15,27,61,.05), 0 12px 24px -14px rgba(15,27,61,.50);
}
.cc.rz5 .mp-i.is-sel{
background: var(--paper); border-color: #C6DCFB; transform: translateY(-1px);
box-shadow: 0 2px 5px rgba(15,27,61,.05), 0 16px 30px -18px rgba(26,115,232,.55);
}
@media (prefers-reduced-motion: reduce){
.cc.rz5 .mp-i:hover, .cc.rz5 .mp-i.is-sel{ transform: none; }
}
/* ==========================================================================
06 · LEFT ACCENT — list
The card itself barely changes; a 3px blue bar appears down its left edge
instead. It is the quietest way to mark one row out of ten, and it never
touches the card's outline, so nothing can read as a dark box.
========================================================================== */
.cc.rz6 .mp-i{ position: relative; overflow: hidden; }
.cc.rz6 .mp-i::after{
content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px;
background: var(--rz-act); opacity: 0;
transition: opacity .2s ease;
}
.cc.rz6 .mp-i:hover{ background: #FBFCFE; border-color: #D8E4F6; }
.cc.rz6 .mp-i:hover::after{ opacity: .35; }
.cc.rz6 .mp-i.is-sel{ background: #F7FAFF; border-color: #D3E2FA; }
.cc.rz6 .mp-i.is-sel::after{ opacity: 1; }
.cc.rz6 .mp-i.is-sel .cc-cue{ color: #1560CE; }
/* ==========================================================================
07 · CHIP ON A RAIL — rail
Version 02's chip, on version 01's swipe rail: the one combination that
keeps the reference's behaviour (all ten reachable with a thumb, one card
at a time) while giving the action a real control to press.
Active: pale blue card, thin blue hairline, and the chip fills.
========================================================================== */
.cc.rz7 .mp-m{ border-radius: 50%; }
.cc.rz7 .mp-v{ right: -2px; bottom: -2px; }
.cc.rz7 .mp-i .cc-cue{
padding: 5px 11px; border-radius: 999px;
background: #EFF4FE; border: 1px solid #E2EAFA;
}
.cc.rz7 .mp-i:hover .cc-cue{ background: #E7EFFD; border-color: #D3E2FA; }
.cc.rz7 .mp-i.is-sel{
background: #F6FAFF; border-color: #C6DCFB;
box-shadow: 0 3px 12px -8px rgba(26,115,232,.5);
}
.cc.rz7 .mp-i.is-sel .cc-cue{
background: #DCE9FC; border-color: #BED5F6; color: #1257C4;
}
/* ==========================================================================
08 · ACTION FIELD — list
The action gets its own full-height field at the end of the card, tinted
a half-step off white and separated by a hairline. The card now reads as
two parts — who it is, and what pressing it does — which is the most
explicit any of the ten gets about the fact that a card is a button.
Active: the field is what turns blue.
========================================================================== */
.cc.rz8 .mp-i{ overflow: hidden; padding-right: 0; }
.cc.rz8 .mp-m{ border-radius: 7px; }
.cc.rz8 .mp-i .cc-cue{
align-self: stretch; padding: 0 13px;
background: #F7F9FC; border-left: 1px solid #EDF1F7;
}
.cc.rz8 .mp-i:hover{ border-color: #CFE0FA; }
.cc.rz8 .mp-i:hover .cc-cue{ background: #F0F5FD; }
.cc.rz8 .mp-i.is-sel{
background: var(--paper); border-color: #C6DCFB;
box-shadow: 0 0 0 3px rgba(26,115,232,.08);
}
.cc.rz8 .mp-i.is-sel .cc-cue{
background: #E9F1FD; border-left-color: #D5E4FA; color: #1257C4;
}
@media (max-width: 860px){ .cc.rz8 .mp-i .cc-cue{ padding: 0 15px; } }
/* ==========================================================================
09 · OUTLINED BUTTON — list
The action is drawn as a button, because a button is the one shape on a
page nobody has to be taught. It stays white and hairline-bordered at
rest so ten of them do not shout, and fills with a pale blue when its
card is the chosen one.
========================================================================== */
.cc.rz9 .mp-i .cc-cue{
padding: 6px 11px; border-radius: 9px;
background: var(--paper); border: 1px solid #DCE4F1;
box-shadow: 0 1px 0 rgba(15,27,61,.03);
}
.cc.rz9 .mp-i:hover .cc-cue{ border-color: #BFD5F5; background: #F7FAFF; }
.cc.rz9 .mp-i.is-sel{
background: var(--paper); border-color: #CBDDF8;
box-shadow: 0 0 0 2px rgba(26,115,232,.14);
}
.cc.rz9 .mp-i.is-sel .cc-cue{
background: #EAF2FE; border-color: #C0D7F7; color: #1257C4;
}
/* ==========================================================================
10 · UNDERLINED LINK — list
"See Results" is underlined, which is the oldest and least ambiguous
promise on the web that something will take you somewhere. The arrow
sits outside the underline so the rule stays under the words only.
Active: the card takes a very pale wash and the underline thickens.
========================================================================== */
.cc.rz10 .mp-m{ border-radius: 50%; }
.cc.rz10 .mp-v{ right: -2px; bottom: -2px; }
.cc.rz10 .mp-i .cc-tx{
text-decoration: underline; text-decoration-thickness: 1px;
text-underline-offset: 3px; text-decoration-color: rgba(26,115,232,.45);
transition: text-decoration-color .18s ease, text-decoration-thickness .18s ease;
}
.cc.rz10 .mp-i:hover{ background: #FBFDFF; border-color: #D3E2FA; }
.cc.rz10 .mp-i:hover .cc-tx{ text-decoration-color: currentColor; }
.cc.rz10 .mp-i.is-sel{ background: #F6FAFF; border-color: #CBDDF8; }
.cc.rz10 .mp-i.is-sel .cc-cue{ color: #1560CE; }
.cc.rz10 .mp-i.is-sel .cc-tx{
text-decoration-thickness: 2px; text-decoration-color: currentColor;
}
/* ==== cards.css · layer 7 of 8 ==== */
/* ==========================================================================
V06 — the four approved changes
Loaded only by [archived], so cards.css, cards.css and assets/shared/client-proof/card.js are left
exactly as they are for the other nine versions.
1 · mobile goes horizontal — all ten on one swipe rail
2 · the open card says so, with an arrow that turns to face its panel
3 · the left edge colour comes off
4 · the green tick on every logo comes off
========================================================================== */
/* ---- 4 · the tick on the logo ------------------------------------------
`.mp-v` is the green check that sat on the bottom-right of every mark. It
is decorative (aria-hidden), so hiding it removes it from the page and
from the accessibility tree alike. The tick inside the open panel's
"live site" badge is a different element and is left alone. */
.cc.rz6 .mp-v{ display: none !important; }
/* ---- 3 · the colour on the card's edge ---------------------------------
V06 was "Left accent": a 3px bar of --rz-act down the left edge of the
card, at .35 on hover and full on the selected one. The card keeps its
pale ground and hairline for the active state; the bar itself is gone. */
.cc.rz6 .mp-i::after{ content: none !important; }
.cc.rz6 .mp-i{ overflow: visible; }
@media (max-width: 860px){
/* ---- 1 · all ten clients, horizontally ------------------------------
The row was a one-column grid, so the ten stacked and the section ran
down the page. It is a swipe rail again: one fixed card width so the
logo, name, trade and action stay on the same lines across every card,
full-bleed out of the gutter with `scroll-padding-inline` putting it
back, so the first card is not flush to the edge and the last is not
cropped. */
.cc.rz6 .mp-row{
display: flex; flex-wrap: nowrap; align-items: stretch;
gap: 8px; margin-top: 12px;
overflow-x: auto; overflow-y: visible; overscroll-behavior-x: contain;
-webkit-overflow-scrolling: touch; scroll-behavior: smooth;
scroll-snap-type: x proximity;
margin-inline: calc(-1 * var(--gut)); padding-inline: var(--gut);
scroll-padding-inline: var(--gut);
scrollbar-width: none; -ms-overflow-style: none;
}
.cc.rz6 .mp-row::-webkit-scrollbar{ display: none; }
.cc.rz6 .mp-i{
/* 306 is measured, not chosen: "Kinam Heat Exchange" is 136px at this
type size, beside a 40px mark, a 77px worded action, two 12px gaps and
26px of padding. That is what this card costs once nothing is
shortened and the action keeps its words. */
flex: 0 0 var(--rz-cw, 306px); width: var(--rz-cw, 306px);
scroll-snap-align: start;
}
@media (prefers-reduced-motion: reduce){ .cc.rz6 .mp-row{ scroll-behavior: auto; } }
/* ---- 2 · which one is open ------------------------------------------
Two signals, because the rail can scroll the card out of sight while its
panel stays open. On the card, the action's arrow turns a quarter turn
to face the panel underneath it. Under the rail, a notch sits over the
panel's top edge at the selected card's own position, so the panel is
visibly attached to the card that opened it. */
/* rotate the arrow on the OPEN card so it faces the panel it opened.
`transform` on an