/* ==========================================================================
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; }
}