/* ==========================================================================
GOOGLE ADS SERVICES — WAY B · "TINTED PLATE" · LIVE
Picked by the client on 2026-09-20 from gads-svc-box-v6n.php?v=2 and applied
to google-ads.html as ONE , last in .
This is a COPY of gads-svc-box-v6n/b-plate.css taken at the moment it was
picked, so the v6n preview stays free to keep iterating without moving the
live page underneath it. Edit THIS file to change what is live.
APPEARANCE ONLY. No markup, no script and no other stylesheet was touched.
UNDO: delete the one line that loads this file from
google-ads.html — the section returns to exactly what it was.
THE SAME PROBLEM, THE OPPOSITE MECHANISM
Way A draws a neutral frame and lifts it off the page. This one puts no
shadow anywhere. Each service becomes its OWN light plate: a whisper of
the service's hue across the whole card, closed by that hue's own edge
line. Six plates, six colours, one white page — the separation is carried
by surface and edge, which is why the section can stay completely flat.
Rules kept from the site:
· the page ground stays light and plain — white. The colour is on the
card, never on the section.
· the tint is a WHISPER (the hue's --hs at 34% over white). The picture
band keeps the full --hs, so it still reads as the visual inside the
plate rather than a second box.
· the open question row keeps the site's ONE selection accent, not the
card's own hue — the standing rule in gsvc-acc.css, and the colour
site/hier.css currently sets for it. "This is the one that is open"
has to read identically on all six plates.
========================================================================== */
/* ---------- 0 · the page under the six: plain ---------------------------- */
#gads-services.sv{
background: #FFFFFF;
--ix-r: 18px;
--ix-shelf: transparent; /* no separate header shelf */
}
/* ==========================================================================
1 · THE PLATE
========================================================================== */
#gads-services #gsvc-six .sc{
--ix-pad: 22px;
/* the tint and its two derived lines, all from the card's own inline hue
tokens, so each of the six is a different plate without one extra
selector. --hs is the light ground, --hd the deep ink. */
--b-face: color-mix(in srgb, var(--hs) 34%, #FFFFFF);
--b-rule: color-mix(in srgb, var(--hd) 13%, transparent);
--b-hair: color-mix(in srgb, var(--hd) 8%, transparent);
border: 1px solid var(--he); /* the hue's own edge token */
border-radius: var(--ix-r);
background: var(--b-face);
box-shadow: none; /* flat, on purpose */
}
/* hover firms the plate's own edge by one step. The full hue (--h) was too
loud here — a saturated green or red line around a whisper-tinted card
reads as an alert, not as a hover. */
#gads-services #gsvc-six .sc:hover{
border-color: color-mix(in srgb, var(--h) 45%, #FFFFFF);
}
#gads-services #gsvc-six .sc:focus-visible{
outline: 2px solid var(--ix-blue); outline-offset: 2px;
}
/* ---------- row 1 · the name, on the plate ------------------------------- */
#gads-services #gsvc-six .sc-name{
padding: 20px var(--ix-pad) 16px;
background: transparent;
border-bottom: 0;
color: var(--ink);
min-height: calc(1.04em + 56px);
}
/* ---------- row 2 · the picture — the one deeper step on the plate ------- */
#gads-services #gsvc-six .sc-pic{
border-top: 1px solid var(--he);
border-bottom: 1px solid var(--he);
}
/* ---------- row 3 · the benefit line ------------------------------------- */
#gads-services #gsvc-six .sc-line{
padding: 16px var(--ix-pad) 16px;
font-size: 14.3px;
color: var(--ink-2);
}
/* ==========================================================================
2 · THE FOUR QUESTIONS — inset, and ruled in the plate's own ink
The hairlines are the card's deep hue at 8–13% alpha, so they sit ON the
tint instead of over it. Inset by the gutter, so the card's coloured edge
stays the only line that crosses the full width.
========================================================================== */
#gads-services #gsvc-six .gsa{
/* width:auto is load-bearing — see the same note in a-frame.css. idx.css
sets `width:100%` here, which a margin cannot shrink. */
width: auto;
margin: 0 var(--ix-pad) 14px;
padding: 0;
border-top: 1px solid var(--b-rule);
}
#gads-services #gsvc-six .gsa-r{
border-bottom: 1px solid var(--b-hair);
}
#gads-services #gsvc-six .gsa-r:last-child{ border-bottom: 0; }
#gads-services #gsvc-six .gsa-h{
padding: 10px 0;
min-height: 46px;
font-size: 13.4px;
}
/* the control: a white square on the tint, so it reads as the thing you
press. Its edge belongs to the plate. */
#gads-services #gsvc-six .gsa-h svg{
background: #FFFFFF;
border-color: color-mix(in srgb, var(--hd) 20%, #FFFFFF);
color: var(--hd);
}
#gads-services #gsvc-six .gsa-h:not([aria-expanded="true"]):hover{
background: none;
color: var(--hd);
}
#gads-services #gsvc-six .gsa-h:not([aria-expanded="true"]):hover svg{
border-color: var(--h); color: var(--h);
}
#gads-services #gsvc-six .gsa-b{ padding: 0 0 13px; }
#gads-services #gsvc-six .gsa-p{ color: var(--ink-2); }
/* ---------- the open row: one mark, on every plate ----------------------- */
#gads-services #gsvc-six .gsa-r:has(.gsa-h[aria-expanded="true"]){
margin-inline: -10px;
padding-inline: 10px;
background: #FFFFFF; /* white lifts off any of the six
tints equally; the accent is what
carries the blue */
border-radius: 12px;
border-bottom-color: transparent;
}
#gads-services #gsvc-six .gsa-r:has(.gsa-h[aria-expanded="true"])::before{
left: 0; top: 7px; bottom: 7px;
width: 3px; border-radius: 99px;
/* the site's selection colour, set in site/hier.css — read, not restated,
so the open mark stays identical on all six plates and matches the rest
of the site. The open control (the filled square) is left to hier.css
for the same reason. */
background: var(--hr-sel, var(--ix-blue));
}
#gads-services #gsvc-six .gsa-r:has(.gsa-h[aria-expanded="true"]) .gsa-b{
padding: 0 0 14px;
}
/* ==========================================================================
3 · THE CLOSING BANNER
Flat like the plates, and one step firmer at the edge so it is as bounded
as they are on the white ground.
========================================================================== */
#gads-services .sv-next{
border-color: #C6DBFA;
box-shadow: none;
}
/* ==========================================================================
4 · RESPONSIVE — restating what idx.css sets inside a media query
========================================================================== */
@media (max-width: 900px){
#gads-services #gsvc-six .gsa-h{ min-height: 48px; padding: 11px 0; }
}
@media (max-width: 700px){
#gads-services #gsvc-six .sc{ --ix-pad: 17px; }
#gads-services #gsvc-six .sc-name{
min-height: 0; padding: 15px var(--ix-pad) 14px;
}
#gads-services #gsvc-six .sc-line{
padding: 13px var(--ix-pad) 15px; font-size: 14px;
}
#gads-services #gsvc-six .gsa{ margin: 0 var(--ix-pad) 12px; }
#gads-services #gsvc-six .gsa-h{ font-size: 13.2px; }
#gads-services #gsvc-six .gsa-r:has(.gsa-h[aria-expanded="true"]){
margin-inline: -8px; padding-inline: 8px;
}
}
@media (prefers-reduced-motion: no-preference){
#gads-services #gsvc-six .sc{ transition: border-color .2s var(--ease); }
}