/* =========================================================================
BRODEUR'S BISTRO — "Dynamic" enhancement pack
Adds the landing-page energy (progress-ring hero + fleur-de-lis section
marks + a quiet ring sweep on load) to the interior pages, using the
brand tokens and class names already in app.css / mobile/app.css.
HOW TO USE
----------
1. Copy this file to bbistro/static/css/bb-enhance.css
and also to bbistro/static/mobile/bb-enhance.css
(identical file — it targets both surfaces' class names).
2. Desktop: in templates/base.html, add AFTER the app.css :
3. Mobile: in the /m/ page's (templates/mobile.html or wherever
mobile/app.css is linked), add AFTER it:
4. Add the .bb-hero markup to the two home views — see the snippets in
handoff/dashboard.html and handoff/renderHome.snippet.js.
Nothing here overrides existing rules; it only adds new .bb-* classes
plus one ::before on section headings. Safe to remove any time.
========================================================================= */
/* Animatable custom property so the ring can sweep from 0 → target.
Falls back gracefully (renders at target, no animation) where
@property is unsupported. */
@property --bb-pct {
syntax: "";
initial-value: 0;
inherits: false;
}
/* ---- PROGRESS-RING HERO -------------------------------------------------
A dark fleur-watermark band that holds the greeting + a completion ring.
Drop-in markup provides --pct (0–100) on .bb-ring. ---------------------- */
.bb-hero {
position: relative;
overflow: hidden;
display: flex;
gap: 18px;
align-items: center;
background: linear-gradient(135deg, #1a1a1a 0%, var(--bb-black) 100%);
color: #fff;
border-radius: var(--bb-r);
padding: 22px 24px;
margin: 6px 0 20px;
}
.bb-hero-text { flex: 1; min-width: 0; }
.bb-hero-text .eyebrow { color: var(--bb-red); margin-bottom: 6px; }
/* Headline sits on the dark band — force white over the default ink/black. */
.bb-hero h1,
.bb-hero .h1 {
color: #fff;
margin: 0 0 8px;
}
.bb-hero-sub {
font-size: 13px;
color: #cfcfcf;
line-height: 1.4;
margin: 0;
max-width: 52ch;
}
.bb-hero-fleur {
position: absolute;
right: 18px;
bottom: 8px;
font-size: 62px;
line-height: 1;
color: #fff;
opacity: 0.14;
pointer-events: none;
font-style: normal;
}
/* Count variant — a big number instead of a progress ring, for pages
that have a count but no completion % (e.g. desktop Menu Items, where
per-card progress was intentionally removed from the page chrome). */
.bb-hero-stat { text-align: right; flex-shrink: 0; }
.bb-hero-stat-n {
font-size: 44px;
font-weight: 800;
color: var(--bb-red);
line-height: 1;
letter-spacing: -0.01em;
}
.bb-hero-stat-lbl {
font-size: 10px;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #cfcfcf;
font-weight: 700;
margin-top: 6px;
}
/* The ring itself — conic sweep masked into a donut. */
.bb-ring-wrap {
position: relative;
width: 104px;
height: 104px;
flex-shrink: 0;
}
.bb-ring {
--bb-pct: var(--pct, 0);
width: 100%;
height: 100%;
border-radius: 50%;
background:
conic-gradient(var(--bb-red) calc(var(--bb-pct) * 1%), rgba(255, 255, 255, 0.15) 0);
-webkit-mask: radial-gradient(farthest-side, transparent 61%, #000 62%);
mask: radial-gradient(farthest-side, transparent 61%, #000 62%);
animation: bb-ring-fill 1.1s ease-out forwards;
}
@keyframes bb-ring-fill {
from { --bb-pct: 0; }
to { --bb-pct: var(--pct, 0); }
}
.bb-ring-center {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
.bb-ring-pct { font-size: 24px; font-weight: 800; line-height: 1; }
.bb-ring-cap {
font-size: 10px;
color: #cfcfcf;
letter-spacing: 0.1em;
margin-top: 2px;
}
/* Tighter ring on small phones. */
@media (max-width: 480px) {
.bb-hero { padding: 18px 18px; gap: 14px; }
.bb-ring-wrap { width: 84px; height: 84px; }
.bb-ring-pct { font-size: 20px; }
.bb-hero-fleur { font-size: 48px; }
}
/* ---- FLEUR-DE-LIS SECTION MARKS -----------------------------------------
A small red ⚜ before each category / section heading. Both header
patterns are already flex rows, so the glyph sits inline with their gap.
Desktop scope: h2.cat-head only (leaves plain
in modules untouched).
Mobile scope: .h2 (all SPA section headers are .h2 flex rows). --------- */
h2.cat-head::before,
.h2::before {
content: "\269C"; /* ⚜ */
color: var(--bb-red);
font-size: 0.92em;
line-height: 1;
flex: 0 0 auto;
font-style: normal;
/* nudge to optical baseline with the heading text */
transform: translateY(0.04em);
}