/* ============================================================
FRANKIE'S ELITE AUTO DETAILING — theme
------------------------------------------------------------
Every colour below was SAMPLED from his own logo and his two
flyers, not eyeballed. The measured facts that shaped it:
· The ground is true #000 — the single most common pixel in
all three images (75% of the logo).
· The palette is one hue family. Across all three images,
chromatic pixels are 96-100% blue / cyan / violet. Red and
magenta never break 0.6%. Nothing warm belongs on this page.
· The lightness ramp is DISCONTINUOUS — almost nothing between
L17% and L33%, nothing at all between L47% and L60%. That
gap is what makes the cyan read as emitted light instead of
the bright end of a gradient. Filling it in evenly, which is
what a generic dark theme does, kills the neon.
Nothing here came from another client's folder.
============================================================ */
/* Chakra Petch is the only Google tech sans with a DRAWN italic
rather than a slant, and every heading he sets is slanted — a
faux oblique would show. Its letterforms also carry clipped
corners of their own, which rhyme with the panel chamfers
below, so the type and the containers speak one language.
Barlow does the quiet work: on his flyers the descriptions are
the only thing not lit. */
@import url('https://fonts.googleapis.com/css2?family=Chakra+Petch:ital,wght@0,400;0,500;0,600;0,700;1,500;1,600;1,700&family=Barlow:ital,wght@0,300;0,400;0,500;0,600;1,400&display=swap');
:root{
--font-script: 'Chakra Petch', system-ui, sans-serif; /* see note at foot */
--font-display: 'Chakra Petch', system-ui, sans-serif;
--font-body: 'Barlow', system-ui, -apple-system, sans-serif;
/* ---- 2. COLOURS — the measured ramp ---------------------- */
--cream: #000000; /* page ground — true black, not a dark grey */
--blush: #0a0f1a; /* calendar day cells, hover fills */
--blush-2: #16283c; /* hairlines, borders */
--pink: #1d3a55; /* light borders, leaders */
--pink-deep: #1050b0; /* royal — button rims (H216 L38 S83) */
--ribbon: #38d8f8; /* THE brand cyan (H190 L60 S93) */
--pink-dark: #7fe8ff; /* prices, category headings */
--plum: #e8fbff; /* section headings — icy specular */
--ink: #c3d2e0; /* body text */
--ink-soft: #7d8ea3; /* captions, hints */
--white: #05080f; /* "cards" — barely lifted, blue-biased */
/* Availability dots. His brand has no second hue, so a green
"open" pip would be the only non-blue pixel on the page and
would read as a bug. These separate by LIGHTNESS instead:
open is hot and glows, taken is dim and does not. */
--pip-open: #38d8f8;
--pip-taken: #1c2b45;
--glow: 56,216,248;
--glow-deep: 0,16,64;
/* ---- tokens the core now exposes ------------------------- */
--on-accent: #00252e; /* ink ON the cyan fill */
--sel-bg: #38d8f8; /* selected day / slot */
/* his flyers put a cyan band across the bottom — same move */
--announce-bg: linear-gradient(90deg,#03102a,#0e3f7d 50%,#03102a);
--deal-bg: linear-gradient(180deg,#0d1930 0%,#05080f 100%);
--igbox-bg: linear-gradient(150deg,#0d1930 0%,#05080f 70%);
/* ---- 3. BACKGROUND ARTWORK -------------------------------
A seamless starfield built from primitives — stars near an
edge are redrawn on the opposite side so the tile repeats
invisibly. His logo sits in a starfield; the page continues
it rather than stopping at the mark. */
--bg-tile: url(bg-tile.svg);
--bg-size: 760px;
--bg-size-mobile: 460px;
--bg-opacity: 1;
--bg-opacity-admin: .45;
--motif: url(motif.png); /* the swirl car */
}
/* ============================================================
SHAPE LANGUAGE — chamfers, not radii
------------------------------------------------------------
The angled cut on his SERVICES tiles is the signature of the
whole look, and border-radius cannot make one. Two lines turn
the core primitive on; --corner-cut then varies per element
because --corner-poly reads it at the point of use.
============================================================ */
/* `*`, not :root — see the long note in core. A var() inside a custom
property is substituted where it is DECLARED, so --clip on :root would
bake :root's --corner-cut and every per-element size below would be
silently ignored. Re-declaring per element makes each resolve its own. */
*{ --clip: var(--corner-poly); }
:root{
--corner-cut: 14px;
/* radii all off — a rounded corner and a cut corner on the
same box fight each other */
--r-btn:0; --r-card:0; --r-tile:0; --r-input:0;
--r-msg:0; --r-img:0; --r-nav:0; --r-deal:0;
--bw: 1px;
--bw-card: 1px;
/* The neon rim. A real border gets sliced off along the
diagonal and leaves the cut edge unstroked, so the rim is
drawn by the masked-gradient primitive instead. */
/* His glow is a tight bloom hugging the edge, not a soft
shadow falling below the box. drop-shadow so it follows the
chamfer; box-shadow would be clipped straight off. */
--fx-glow: drop-shadow(0 0 6px rgba(56,216,248,.45));
--fx-glow-card: drop-shadow(0 0 12px rgba(56,216,248,.15));
/* the old soft shadows would be invisible on black anyway */
--sh-card:none; --sh-btn:none; --sh-btn-h:none;
--sh-soft:none; --sh-lift:none; --sh-deal:none;
/* The swirl is 3x wider than it is tall, so the bullet and
badge boxes are widened to match — at 22x22 its tail
collapsed into about four pixels of hairline. */
--motif-rot: -5deg;
--motif-bullet-w: 40px;
--motif-bullet-h: 14px;
--motif-badge-w: 64px;
--motif-badge-h: 22px;
--font-btn: 'Chakra Petch', system-ui, sans-serif;
--btn-weight: 700;
--btn-transform: uppercase;
--btn-tracking: .13em;
--pin-size: 13px;
--logo-max: 460px;
/* "See My Work" frames */
--ty-card: #05080f;
--ty-line: #16283c;
--ty-icon: #7d8ea3;
--ty-heart: #38d8f8;
}
/* per-element cut sizes — small on dense grids, larger on panels */
.card,.ig-box{--corner-cut:18px}
.deal-card{--corner-cut:18px}
.day,.slot,.opt,#bkForm input,#bkForm select,#bkForm textarea{--corner-cut:8px}
.cta{--corner-cut:10px}
.nav-btn{--corner-cut:9px;--clip-nav:var(--corner-poly)}
#bkMsg{--corner-cut:20px}
/* ============================================================
TYPE — four roles, matching his flyers
============================================================ */
h1{font-style:italic;font-weight:700;letter-spacing:.01em}
h2{
font-family:var(--font-display);font-style:italic;font-weight:700;
text-transform:uppercase;letter-spacing:.02em;color:var(--plum);
text-shadow:0 0 18px rgba(56,216,248,.30);
}
.sub{
font-family:var(--font-body);font-style:normal;font-weight:400;
text-transform:uppercase;letter-spacing:.20em;font-size:.74rem;
color:var(--ribbon);
}
.tagline{color:var(--ink-soft);letter-spacing:.24em}
/* Category headings and the small cyan labels are the same role
on his sheets — tracked-out caps, always cyan, never white. */
.cat h3{
font-style:italic;color:var(--ribbon);letter-spacing:.12em;
border-bottom:1px solid var(--blush-2);
}
.svc .name{font-family:var(--font-display);font-style:italic;font-weight:600;color:var(--plum)}
.svc .note{color:var(--ink-soft);letter-spacing:.01em}
/* his leaders are a thin solid line that brightens toward the
price, not core's dotted rule */
.svc .dots{
border-bottom:1px solid transparent;
background:linear-gradient(90deg,rgba(56,216,248,.10),rgba(56,216,248,.80));
height:1px;opacity:1;transform:translateY(-6px);
}
.svc .price{
font-family:var(--font-display);font-style:italic;font-weight:700;
color:var(--plum);font-size:1.35rem;
text-shadow:0 0 14px rgba(56,216,248,.45);
}
.card li{font-family:var(--font-body);font-weight:400;font-size:1.02rem;color:var(--ink)}
#announce{font-weight:600;letter-spacing:.16em;text-transform:uppercase;font-family:var(--font-display)}
/* ============================================================
THE CYAN LABEL — his "STARTING AT" role
============================================================ */
#bkForm label{color:var(--ribbon);letter-spacing:.16em;font-weight:600;font-family:var(--font-display)}
.legend{color:var(--ink-soft);letter-spacing:.08em;text-transform:uppercase;font-size:.7rem}
/* open pips glow, taken pips do not — lightness, not hue */
.pip{box-shadow:0 0 7px rgba(56,216,248,.85)}
.pip.taken{box-shadow:none}
.day.sel .pip{box-shadow:none}
/* ============================================================
SURFACES
============================================================ */
body{background:transparent}
.cta{background:#070d18;color:var(--plum);border-color:#1e5fa8}
.cta:hover{background:#0d1a30;color:#ffffff;border-color:var(--ribbon)}
.cta.ghost{color:var(--ink);border-color:#16283c;background:#05080f}
.cta.ghost:hover{background:#0d1a30;color:var(--plum);border-color:var(--ribbon)}
.cta.bowed{color:var(--plum);border-color:var(--ribbon)}
.day{border:1px solid transparent}
.day:hover:not(.off):not(.full){border-color:var(--ribbon)}
.day.full{background:#0c1420;color:#40536b}
.slot{background:#070d18;color:var(--ink);font-family:var(--font-display);font-weight:600;letter-spacing:.04em}
.slot:disabled{background:#0c1420;color:#3d5068}
.opt{background:#070d18}
#bkForm input,#bkForm select,#bkForm textarea{background:#070d18;color:var(--ink);border-color:#16283c}
#bkForm input::placeholder,#bkForm textarea::placeholder{color:#4d6076}
#bkForm input:focus,#bkForm select:focus,#bkForm textarea:focus{border-color:var(--ribbon)}
#bkForm select option{background:#070d18;color:var(--ink)}
#bkMsg{background:linear-gradient(180deg,#0d1930,#05080f);color:var(--ink)}
#bkMsg b{color:var(--plum);font-style:italic;text-transform:uppercase;letter-spacing:.03em}
.deal-card .dtitle{
font-family:var(--font-display);font-style:italic;font-weight:700;
color:var(--plum);text-transform:uppercase;letter-spacing:.02em;
text-shadow:0 0 18px rgba(56,216,248,.45);
}
.deal-card .dsub{color:var(--ribbon);letter-spacing:.22em}
.deal-card .dline{border-bottom-color:var(--blush-2);color:var(--ink);font-family:var(--font-body);font-weight:400;font-size:1rem}
footer{background:#05080f;border-top:1px solid var(--blush-2);color:var(--ink-soft)}
/* His wordmark is a chrome brush script that no webfont matches,
and a near-miss reads as a knock-off of his own logo. So the
footer sets his name in the display face instead of pretending
to be the logotype — the mark stays an image, only. */
footer .script{
font-family:var(--font-display);font-style:italic;font-weight:700;
font-size:1.5rem;letter-spacing:.04em;text-transform:uppercase;
color:var(--plum);text-shadow:0 0 16px rgba(56,216,248,.4);
}
.demo-link{color:var(--ribbon);border-bottom-color:#1e5fa8}
.demo-link:hover{color:var(--plum);border-bottom-color:var(--ribbon)}
.demo-rule{background:linear-gradient(90deg,transparent,var(--ribbon),transparent)}
/* section dividers: his are a light bar, brightest in the middle */
.cat h3{border-image:linear-gradient(90deg,var(--ribbon),rgba(22,40,60,.2)) 1}
::selection{background:rgba(56,216,248,.3);color:#fff}
/* ============================================================
FIXES FROM LOOKING AT THE BUILT PAGE
============================================================ */
/* The announcement band is dark with light type, like his flyer's
"BOOK YOUR SHINE TODAY" strip. --on-accent stays dark because the
selected day and slot are solid cyan and need dark ink. */
#announce{color:#dff4ff}
/* CHAMFER vs PERCHED BADGE — they are mutually exclusive.
.cta.bowed::after deliberately sits OUTSIDE the button, and clip-path
cuts off everything outside the box, so the swirl was rendering as a
sliced-off half car above each button. His own flyers put no mark on
their buttons, so the badge comes off rather than the chamfer. The
motif still does the dividers, the bullets and the confirmation. */
/* The perched motif badge and the fill layer are the SAME pseudo-element,
and .cta.bowed::after (0,2,1) ties with core's .cta.cta::after — so a
plain display:none here silently deleted the fill and every button came
out as a solid slab of rim gradient. Convert the badge slot into the
fill layer instead of hiding it, resetting every property core's badge
rule sets. The badge itself is gone either way: a perched mark cannot
survive clip-path, and his flyers put no mark on their buttons. */
.cta.bowed::after{
display:var(--rim-on,none);
top:var(--rim-w,1px);right:var(--rim-w,1px);
bottom:var(--rim-w,1px);left:var(--rim-w,1px);
width:auto;height:auto;
background:var(--fill,transparent);
clip-path:var(--corner-poly-in);
transform:none;z-index:-1;transition:none;
}
/* The divider motif is a 3:1 swirl, so core's width=68 attribute left it
a 22px blob. Give it room. */
.sub .bow{width:200px;max-width:62vw}
.crown.bow{width:240px}
/* Policy bullets: the swirl again, in the wider box the shape needs. */
.card li{padding-left:3.4rem}
.card li::before{top:.62rem}
.card li:first-child::before{top:.12rem}
/* His add-on tiles read as one tap target, so the whole row lights up. */
#bkForm .opt.on{box-shadow:0 0 10px rgba(56,216,248,.30)}
#bkForm .opt .opt-price{color:var(--pink-dark)}
/* The "where" radios are a two-up segmented control on anything but a
very narrow phone. */
#bkForm .where-row .opt{justify-content:flex-start}
/* Month arrows: octagons need their glyph centred optically. */
.nav-btn{background:#070d18;color:var(--ribbon)}
.nav-btn:hover{background:#0d1a30;color:var(--plum)}
/* Selected day/slot: solid cyan, dark ink, and no rim fighting the fill. */
.day.sel,.slot.sel{filter:drop-shadow(0 0 10px rgba(56,216,248,.55))}
/* Deal card headline sits on his darker panel, so the rule under each
line needs to be visible without being loud. */
.deal-card .dline{border-bottom-color:#16283c}
/* Legend dots inherit the glow; the taken one must not. */
.legend .pip.taken{box-shadow:none}
/* Small controls get a FLAT rim. The 150deg gradient is right on a big
panel, where the fall from cyan to violet reads as a lit edge — but on a
40px-tall tile it puts the violet end into invisibility and the tile
stops reading as a bordered object at all. */
/* the drawn checkbox picks up his chamfer like everything else */
#bkForm .opt input{--clip-check:var(--corner-poly);--corner-cut:4px}
#bkForm .opt input[type=radio]{--clip-check:none}
/* Give the resting tile a touch more surface and rim so it reads as an
object before you hover it. */
#bkForm .opt{background:#0a1424}
/* The number is long and the button is capped at 290px, so it wrapped
"(336) 479-" / "2623". Its own size and tracking, and never wrap. */
#telBtn{font-size:1.02rem;letter-spacing:.05em;white-space:nowrap}
#telBtn .iglogo svg{width:18px;height:18px}
/* Unchecked box was nearly invisible against the tile. */
#bkForm .opt input{border-color:#2c4a6b;background:#020509}
/* ============================================================
FIXES FROM THE DEPLOYED PREVIEW
============================================================ */
/* The leader never rendered: a 1px-tall block with a background gradient
is fragile inside a baseline-aligned flex row. border-image is the same
technique already proving itself on the category rules above. */
.svc .dots{
height:auto;background:none;
border-bottom:1px solid;
border-image:linear-gradient(90deg,rgba(56,216,248,.10),rgba(56,216,248,.85)) 1;
opacity:1;transform:translateY(-5px);
}
/* THE BULLET WAS THE THING I ASKED YOU TO LOOK AT, AND IT LOST.
At 40x14 the swirl car is a smudge — you cannot tell what it is, and
four of them down the policy card just look like dirt. His own sheets
use a small flat chevron in that role, not the car, so the bullet
becomes a chevron cut from his shield's V. The car keeps the dividers,
where it has room to actually be a car. */
.card li::before{
background:none;
width:11px;height:13px;left:.15rem;
background-color:var(--ribbon);
clip-path:polygon(0 0,62% 50%,0 100%,0 76%,26% 50%,0 24%);
filter:drop-shadow(0 0 5px rgba(56,216,248,.7));
}
.card li{padding-left:1.9rem}
/* Car off the Current Deals divider — Edgar's call. The other three
sections keep it. Core already supports this per-section. */
.bow[data-divider="deals"]{display:none}
/* ============================================================
THE EDGE
------------------------------------------------------------
Core paints two layers behind the content: ::before is the full
chamfered shape in --rim, ::after is the same shape inset by
--rim-w in --fill. The band between them is the lit edge, and
it follows the diagonals — which a border, a mask, a ring
polygon and a drop-shadow each failed to do. See the long note
in core for why each one fails.
The surface colour therefore lives in --fill, and every element
that has an edge sets its own background to transparent.
============================================================ */
:root{
--rim-on: block;
/* This theme's chamfer owns the ::after layer, so the perched bow badge
stays off — the two were never compatible. Explicit now that the badge
defaults to on for everyone else. */
--bow-badge: none;
--rim-w: 1px;
--rim: linear-gradient(150deg,#38d8f8 0%,#2f7fd0 55%,#1b3f86 100%);
--fill: #05080f;
}
/* backgrounds move to --fill; the element itself goes transparent so the
two layers behind it are what you see */
.card,.ig-box,#bkMsg,.deal-card{background:transparent}
.card,.ig-box{--fill:#080f1c}
.deal-card{--fill:linear-gradient(180deg,#0d1930,#05080f)}
#bkMsg{--fill:linear-gradient(180deg,#0d1930,#05080f)}
.cta{background:transparent;--fill:#070d18}
.cta:hover{--fill:#0d1a30;--rim:linear-gradient(150deg,#8fe8ff,#38d8f8 60%,#1e6fc4)}
.cta.ghost{background:transparent;--fill:#05080f}
.cta.ghost:hover{--fill:#0d1a30}
.day{background:transparent;--fill:#0a0f1a;--rim:linear-gradient(0deg,#37a0e0,#37a0e0)}
.day:hover:not(.off):not(.full){--rim:linear-gradient(0deg,#8fe8ff,#8fe8ff)}
.day.full{--fill:#0c1420}
/* a closed day has no surface, so it has no edge either */
.day.off{--rim-on:none}
/* a solid-cyan selection needs no edge fighting its fill */
.day.sel,.slot.sel{--rim-on:none;filter:drop-shadow(0 0 10px rgba(56,216,248,.55))}
.slot{background:transparent;--fill:#070d18;--rim:linear-gradient(0deg,#37a0e0,#37a0e0)}
.slot:hover:not(:disabled){--rim:linear-gradient(0deg,#8fe8ff,#8fe8ff)}
.slot:disabled{--fill:#0c1420}
.nav-btn{background:transparent;--fill:#070d18;--rim:linear-gradient(0deg,#37a0e0,#37a0e0)}
.nav-btn:hover{--fill:#0d1a30;--rim:linear-gradient(0deg,#8fe8ff,#8fe8ff)}
#bkForm .opt{background:transparent;--fill:#0a1424;--rim:linear-gradient(0deg,#2c86c9,#2c86c9)}
#bkForm .opt:hover{--rim:linear-gradient(0deg,#8fe8ff,#8fe8ff)}
#bkForm .opt.on{--rim:linear-gradient(0deg,#38d8f8,#38d8f8)}
/* THE DOUBLING: every one of these still had its original CSS border
underneath, which draws a second outline inside the new one — and that
border is the sliced-at-the-diagonal kind. */
.cta,.cta.bowed,.cta.ghost,.slot,.card,.deal-card,.ig-box,#bkMsg,
.day,#bkForm .opt{border-color:transparent}
/* form fields keep a plain border: they are not chamfered panels and a
two-layer edge on an fights the browser's own focus ring */
#bkForm input,#bkForm select,#bkForm textarea{
background:#070d18;border-color:#2c4a6b;filter:none}
#bkForm input:focus,#bkForm select:focus,#bkForm textarea:focus{border-color:var(--ribbon)}
#bkForm .opt input{border-color:#2c4a6b;background:#020509}
/* the wide bloom stays a filter — it is light in the air, not an edge */
.card,.deal-card,.ig-box,#bkMsg{filter:drop-shadow(0 0 14px rgba(56,216,248,.16))}
.cta{filter:drop-shadow(0 0 7px rgba(56,216,248,.40))}
.cta:hover{filter:drop-shadow(0 0 11px rgba(56,216,248,.60))}
.day,.slot,.nav-btn,#bkForm .opt{filter:none}
/* FORM FIELDS ARE NOT CHAMFERED, deliberately.
,