/* ==========================================================================
Gertrudes — homepage promo band ("Flowers for Every Occasion")
--------------------------------------------------------------------------
Replaces the mid-page image-only banner (ptstaticblock module 330, DB class
`static-middle-store2`) with real text and a real link.
WHY THIS REPLACED AN
The old block was one 1304px JPG carrying baked-in type — the headline was
invisible to screen readers and to search, it could not reflow on a phone
(it just shrank), and it cost ~50 KB on the critical path of a page that is
the subject of an active PageSpeed recovery (docs/pagespeed-recovery.md).
Everything below is text, gradients and inline SVG: zero image requests.
TYPE SCALE — a deliberate FOURTH level
plaza/gtr-sectionhead.css defines three heading levels (page / section /
card) and says only three. This band is not a section heading; it is a
display promo, the same role the theme already gave `.static-middle-store2
.text1` at 4.8rem. It is named `--gtp-display` here rather than borrowing
`--gt-title-page`, so the three-level system stays intact and a future
reader can see this is an exception on purpose, scoped to one band.
LOAD ORDER
Body from ptstaticblock_promo.twig, not document->addStyle(), for the
same reason gtr-delivery.css is: addStyle injects into the per-route styles
loop BEFORE stylesheet.css, so rules there fight the cascade and never
cache-bust. Linked from the template it lands last and versions by hand —
BUMP THE ?v= IN THE TEMPLATE ON EVERY EDIT TO THIS FILE.
========================================================================== */
/* 1. Scope and tokens ------------------------------------------------------
Palette is the shared brand family (header-mobile.css §1), but the ratios
here are measured against THIS BAND’S GROUND, not against white — the card
is a peach gradient, and its darkest sampled point (#f6dfd2, under the
corner wash) is what every value has to clear:
ink #2f2a26 11.1:1 ✓ AA + AAA
muted #615a54 5.3:1 ✓ AA at 11px (was #6f6862 — 4.28:1, FAILED)
brand-strong #c73e12 4.0:1 ✓ AA large only → headline accent, never body
CTA #fff on #c73e12 5.1:1 ✓ hover #fff on #a53100 6.9:1 ✓
--gtp-brand (#e85224) never carries text at any size; it is the separator
dots and the decorative line art only. */
.gt-promo {
--gtp-brand: #e85224;
--gtp-brand-strong: #c73e12;
--gtp-brand-deep: #a53100;
--gtp-ink: #2f2a26;
--gtp-muted: #615a54; /* darkened from #6f6862: see the table above */
--gtp-cream: #fdf4ec;
--gtp-cream-deep: #f8e7db;
--gtp-display: clamp(26px, 4.4vw, 56px);
--gtp-face: Prata, Georgia, "Times New Roman", serif;
display: block;
/* Bootstrap 3’s border-box reset does not reach these elements on this
page (verified: computed box-sizing was content-box), so every box in
this band declares it rather than inheriting an assumption — without it
min-height and max-width below silently gain their padding. */
box-sizing: border-box;
/* The `full-width` layout-builder row zeroes every gutter (stylesheet.css
:35), so the band supplies the site's standard 15px itself — without it
the rounded corners would butt against the viewport edge. */
padding: 0 15px;
margin: clamp(32px, 5vw, 56px) 0;
}
/* 2. The card ------------------------------------------------------------- */
.gt-promo__inner {
box-sizing: border-box;
position: relative;
overflow: hidden; /* clips the decorative stems to the radius */
isolation: isolate; /* keeps the washes under the text, always */
max-width: 1440px; /* the site's container rhythm, the same cap
the old banner had in gtr-home-modules */
margin: 0 auto;
padding: clamp(40px, 5.2vw, 76px) clamp(18px, 5vw, 56px);
border-radius: 24px;
text-align: center;
/* Two soft blooms of warmth in the corners over a cream ground — the
photographic bleed of the reference, done as gradients so it costs
nothing and stays sharp at any width. */
background:
radial-gradient(58% 82% at 6% 22%, rgba(232, 82, 36, .13), transparent 68%),
radial-gradient(52% 78% at 96% 78%, rgba(232, 82, 36, .11), transparent 66%),
linear-gradient(155deg, var(--gtp-cream) 0%, var(--gtp-cream-deep) 100%);
}
/* 3. Decorative botanicals -------------------------------------------------
Inline SVG line art (see the template) bled off both edges, behind the
text. Hidden from assistive tech: it carries no information the copy does
not already state. Sized in vw so it scales with the band instead of
snapping between breakpoints. */
.gt-promo__decor {
position: absolute;
z-index: 0;
top: 50%;
width: clamp(150px, 22vw, 330px);
height: auto;
transform: translateY(-50%);
color: var(--gtp-brand);
opacity: .42;
pointer-events: none;
}
.gt-promo__decor--left { left: -3%; }
.gt-promo__decor--right { right: -3%; }
/* 4. Copy ------------------------------------------------------------------ */
.gt-promo__body {
position: relative;
z-index: 1;
/* 860px, not 720: the headline’s first line is set to break only where the
copy intends. The 26px floor on --gtp-display keeps it on one line down
to a 360px viewport, so the punchline never lands mid-phrase. */
max-width: 860px;
margin: 0 auto;
}
/* The eyebrow row that opened this band (FRESH FLOWERS · THOUGHTFUL GIFTS ·
NO OCCASION NEEDED) was removed 2026-09-04: three uppercase label-phrases
above a headline that already delivers the whole idea in six words was one
layer of hierarchy more than the message needed, and it was the only part
of the band that had to wrap on a phone. The headline now opens the card.
Its media-query companion (separator dots hidden below 620px) went with
it — nothing wraps here any more. */
.gt-promo__title {
margin: 0 0 clamp(14px, 2vw, 22px);
font-family: var(--gtp-face);
font-size: var(--gtp-display);
font-weight: 400; /* Prata ships one weight; 400 is the face */
line-height: 1.08;
letter-spacing: -.02em;
color: var(--gtp-ink);
text-transform: none;
}
/* The accent half sits on its own line at every width — the two-line stack is
the shape of the design, not an accident of wrapping. */
.gt-promo__title-accent {
display: block;
color: var(--gtp-brand-strong);
}
.gt-promo__lead {
max-width: 44ch;
margin: 0 auto clamp(24px, 3.4vw, 40px);
font-size: clamp(14px, 1.5vw, 18px);
line-height: 1.55;
color: var(--gtp-muted);
}
/* 5. Call to action --------------------------------------------------------
Deliberately the SAME button as .gt-info__directions ("Get Directions", in
gertrudes-info.css:241) — pill radius, brand-strong ground, 600 weight —
scaled up by one step rather than redrawn, so the storefront has one button
language instead of a utility button and a separate hero button that only
almost match. 60px tall with 18px type read as a slab next to it; 46px with
16px keeps the pill shape and still clears the 44px touch-target floor.
The shadow lightened with the height: a thin pill under a deep shadow reads
as a mistake. */
.gt-promo__cta {
box-sizing: border-box; /* min-height is the FULL height, not +padding */
display: inline-flex;
align-items: center;
gap: 9px;
min-height: 46px; /* still over the 44px touch-target floor */
padding: 11px 28px;
border-radius: 999px;
background: var(--gtp-brand-strong);
color: #fff;
font-size: clamp(14px, 1.15vw, 16px);
font-weight: 600;
line-height: 1.2;
text-decoration: none;
box-shadow: 0 6px 16px rgba(167, 49, 0, .18);
transition: background-color 220ms ease, transform 220ms ease, box-shadow 220ms ease;
}
/* The theme's global `a:hover` rules are colour-only and lose to this file's
later position; restated here so the label can never go brand-orange on a
brand-orange pill. */
.gt-promo__cta:hover,
.gt-promo__cta:focus {
background: var(--gtp-brand-deep);
color: #fff;
text-decoration: none;
transform: translateY(-2px);
box-shadow: 0 10px 22px rgba(167, 49, 0, .26);
}
/* stylesheet.css:7 sets `*:focus{outline:none !important}` site-wide, which
silently defeats every focus ring written since. Nothing outranks an
!important but another one — the same escape hatch gtr-nav.css §11 uses. */
.gt-promo__cta:focus-visible {
outline: 3px solid var(--gtp-brand-deep) !important;
outline-offset: 3px;
}
/* Link purpose out of context (WCAG 2.4.4): "Send Flowers" alone tells a
screen-reader user cycling a links list nothing about where it goes. The
suffix names the destination without adding visible chrome. Same technique
as .gt-del__vh in gtr-delivery.css. */
.gt-promo__vh {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
clip: rect(0 0 0 0);
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.gt-promo__cta-arrow {
flex: 0 0 auto;
width: 16px;
height: 16px;
transition: transform 220ms ease;
}
.gt-promo__cta:hover .gt-promo__cta-arrow,
.gt-promo__cta:focus .gt-promo__cta-arrow {
transform: translateX(4px);
}
/* 6. Narrow screens --------------------------------------------------------
Below ~700px the text column needs the full width, so the side art would
sit behind the headline rather than beside it. The gradient washes stay —
they are what keeps the band feeling floral once the line art is gone. */
@media (max-width: 700px) {
.gt-promo__decor {
display: none;
}
.gt-promo__inner {
border-radius: 18px;
}
.gt-promo__lead {
max-width: 30ch;
}
/* CTA balance. The earlier `width:100%; max-width:320px` made the pill
~91% of the card’s inner width on a 427px phone — visually heavier than
the headline, which inverts the hierarchy the band exists to create.
Sized to its own content it lands near 190px (~42%): still a 46px-tall
target, just no longer the largest object in the block. The floor keeps
it comfortable if the label is ever shortened. */
.gt-promo__cta {
min-width: 180px;
max-width: 100%;
justify-content: center;
}
}
/* 7. Motion ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
.gt-promo__cta,
.gt-promo__cta-arrow {
transition: none;
}
.gt-promo__cta:hover,
.gt-promo__cta:focus {
transform: none;
}
.gt-promo__cta:hover .gt-promo__cta-arrow,
.gt-promo__cta:focus .gt-promo__cta-arrow {
transform: none;
}
}