/* --------------------------------------------------------------------------
LoveStruck Store - Custom CSS
Enqueued via functions.php - see kb/technical/child-theme-setup.md
-------------------------------------------------------------------------- */
/* Generic utility: visible focus outline on all interactive elements.
outline-color was never set here, so it fell back to the browser's
default blue -- noticed on the search field's focus ring, but this rule
is site-wide, so it was likely affecting every focusable element, not
just search. Gold matches the reference mockup's own focus-visible spec
("outline:2px solid var(--gold)"). */
:where(.wp-site-blocks *:focus) {
outline-width: 2px;
outline-style: solid;
outline-color: #B08D57; /* Gold */
outline-offset: 3px;
}
/* Generic utility: justified paragraphs (apply with class="justify-paragraph") */
.justify-paragraph {
text-align: justify;
}
/* --------------------------------------------------------------------------
Design tokens (Barlow / Barlow Condensed, warm neutral palette)
See DESIGN.md and kb/decisions/ for rationale.
NOTE: Barlow + Barlow Condensed are registered as WordPress font presets
(--wp--preset--font-family--barlow / --barlow-condensed) via this child
theme's theme.json.
-------------------------------------------------------------------------- */
/* -- Background -- */
/* White, not Cream - a warm tint sitting directly behind product
photography can bias how customers perceive garment color (the same
effect a camera's white balance corrects for). Cream is preserved as
a token and used only for the card hover state below. */
body {
background-color: #FFFFFF; /* White */
}
/* -- Heading color + font (block-level fix for FSE themes - see
kb/technical/heading-color-bug.md for why this selector is required) --
.wp-block-query-title added 2026-08-29: the category archive's own H1
(rendered by the Query Title block, e.g. "Mujeres") doesn't carry the
.wp-block-heading class this rule targets, so it fell through to the
default body-text color (Taupe) instead of Ink -- found via computed-
style check on /product-category/mujeres/, see
kb/reviews/2026-08-29_2117_category-archive-shared-template.md. Same
template is shared by every product_cat archive (Hombre, Accesorios,
Bolsos, Zapatos, Wellness), so this one fix covers all of them. */
:root :where(.wp-block-heading),
:root :where(.wp-block-query-title) {
color: #2B2621; /* Ink */
font-family: var(--wp--preset--font-family--barlow-condensed);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.015em;
line-height: 1.02;
}
/* -- Body text -- */
body, p {
color: #8A7F72; /* Taupe */
font-family: var(--wp--preset--font-family--barlow);
}
/* -- Muted / captions / labels -- */
.text-muted, caption, label {
color: #B7AC9D; /* Taupe Light */
}
/* -- Links -- */
a { color: #2B2621; } /* Ink */
a:hover, a:focus { color: #B08D57; } /* Gold */
/* -- Buttons -- */
.wp-element-button,
.wp-block-button__link {
background-color: #2B2621; /* Ink */
color: #F7F3EE; /* Cream */
font-family: var(--wp--preset--font-family--barlow);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: 3px;
transition: background-color 0.2s ease;
}
.wp-element-button:hover,
.wp-block-button__link:hover {
background-color: #B08D57; /* Gold */
/* Explicit color needed: the generic "a:hover { color: Gold }" rule above
also matches these button links (they're tags), and without this
override it wins, turning the text Gold too -- Gold text on a Gold
background, invisible. Same root cause as the is-style-outline fix
above, caught the same way (live hover inspection, not guessed). */
color: #F7F3EE; /* Cream */
}
/* -- Footer --
Selector fixed 2026-08-27: [data-area="footer"] never matched anything --
confirmed via live DOM audit, no element on the site carries a data-area
attribute at all. This rule (and the header rule below) had silently
never applied since they were written -- the footer's Deep Espresso
background and the header's Pearl background were never actually live,
despite being documented as confirmed live. Caught while debugging why
the header's new sticky rule had no effect. header/footer share the
identical class "wp-block-template-part" with nothing else to
distinguish them, so the tag name is what makes these selectors real. */
footer.wp-block-template-part {
background-color: #221E1A; /* Deep Espresso */
color: #F7F3EE; /* Cream */
/* Same WordPress layout-spacing rule behind the featured-badge and
newsletter top-margin fixes (kb/decisions/ui-element-colors.md) --
footer is a non-first child of .wp-site-blocks, so it was picking up
a ~19px top margin, leaving a gap of visible white page background
between the last content section and the footer. */
margin-top: 0;
}
footer.wp-block-template-part a {
color: #E7E1D8;
}
footer.wp-block-template-part a:hover {
color: #B08D57; /* Gold */
}
/* Headings and paragraphs inside the footer have their own site-wide color
rules (Ink for headings, Taupe for paragraphs) that set color *directly*
on those elements -- a direct rule always wins over an inherited one
regardless of specificity, so the footer's own Cream color above never
actually reached them. Column headings (Tienda/Marcas/Ayuda/Síguenos)
were rendering in Ink against the dark background -- a real legibility
problem, not just a color mismatch. Muted grey-brown here matches the
mockup's .foot-col h4 treatment. */
footer.wp-block-template-part :where(.wp-block-heading) {
color: #9B9184;
}
footer.wp-block-template-part p {
color: #B7AC9D; /* Taupe Light -- matches the mockup's .foot-grid p */
}
/* -- Header / mobile nav drawer --
Pearl, not White or Cream - chosen after comparing all three side-by-side
(see kb/decisions/color-palette.md). This is brand chrome, not a
product-photography surface, so the White-for-color-accuracy constraint
that governs body/card/product-media backgrounds doesn't apply here. */
header.wp-block-template-part {
background-color: #FAF8F4; /* Pearl */
position: sticky;
/* var() falls back to 0px for logged-out visitors (the CSS custom
property is only defined when WordPress's own fixed admin bar is
present). Without this, sticky "top: 0" sticks the header right under
the admin bar's z-index instead of below it, and only engages after
scrolling past the admin bar's own height first -- only visible to
logged-in editors, never to real visitors, but worth doing right. */
top: var(--wp-admin--admin-bar--height, 0px);
z-index: 50;
border-bottom: 1px solid rgba(43, 38, 33, 0.14); /* --line */
}
/* Twenty Twenty-Five's mobile nav overlay class may differ - confirm the
actual selector in the rendered markup before relying on this rule. */
.wp-block-navigation__responsive-dialog {
background-color: #FAF8F4; /* Pearl */
}
/* Header nav links - small underline that grows Gold on hover, matching
the mockup's nav.menu a. Real class confirmed via DOM audit:
.wp-block-navigation-item__content is the . */
.wp-block-navigation-item__content {
font-family: var(--wp--preset--font-family--barlow);
font-size: 13px;
font-weight: 500;
letter-spacing: 0.02em;
padding: 6px 2px;
border-bottom: 1px solid transparent;
transition: border-color 0.2s ease, color 0.2s ease;
}
.wp-block-navigation-item__content:hover {
color: #B08D57; /* Gold */
border-color: #B08D57; /* Gold */
}
/* Header icon buttons (account, cart, search) - small Ink icon, no visible
button chrome, matching the mockup's .icon-btn. The Search block's toggle
button carries WordPress's generic "wp-element-button" class, which is
also what the global CTA-button rule targets -- without this override it
inherits the big Ink-filled/Cream-text button treatment meant for actual
CTAs like "Ver novedades", rendering as an oversized dark block instead
of a small icon toggle. The search markup nests three boxes
(.wp-block-search form > .wp-block-search__inside-wrapper > the button
itself), and WordPress gives the middle one its own default ~44px height
(sized for a normal text input) -- the form/wrapper need the same 36px
height as the button, or centering a taller box inside a shorter one
makes the button overflow above/below its container. No width rule here
on purpose: the collapsed state's hidden input is 0-width (WordPress's
own state-driven styling), so the wrapper/form naturally size to just
the 36px button's width without forcing it -- and the expanded state
(revealing the input) is then free to grow naturally too, instead of
being clamped by a width we'd otherwise have to conditionally remove. */
.wc-block-customer-account__link,
.wc-block-mini-cart__button,
.wp-block-search,
.wp-block-search__inside-wrapper,
.wp-block-search__button {
background-color: transparent;
color: #2B2621; /* Ink */
height: 36px;
padding: 0;
border: none;
cursor: pointer;
display: flex;
align-items: center;
}
.wc-block-customer-account__link,
.wc-block-mini-cart__button,
.wp-block-search__button {
justify-content: center;
}
/* Right-aligned, not centered: as the collapsed (0-width) input grows on
click, center-aligning would shift the midpoint every frame, making the
button visibly slide left before the field expands. Right-aligning
keeps the button pinned to a fixed right edge for the whole animation --
only the input's left edge moves as it grows. */
.wp-block-search,
.wp-block-search__inside-wrapper {
justify-content: flex-end;
/* WordPress's own CSS gives the input a 0.3s width transition, but not
these two -- the actual width-driving elements -- leaving them to
jump instantly while the input tries to animate on its own. Matching
timing here is what actually makes the expand/collapse read as one
smooth motion instead of a jump-then-catch-up. ease-in-out (ramps up,
then settles) rather than ease-out (max speed from the first frame,
all deceleration, no ramp-up at all -- tried first, felt abrupt at
the start). */
transition: width 0.3s ease-in-out;
}
/* Match the input's own transition to the same curve, so all three
elements move in visual sync instead of the container using one easing
curve and the input (WordPress's default "ease") using a slightly
different one. */
.wp-block-search__input {
transition-timing-function: ease-in-out;
}
/* Explicit widths for both states -- measured directly (sampling width
every animation frame during collapse) and found that without this, the
width jumps instantly from ~262px to ~86px in the first 2ms, then
animates smoothly the rest of the way to 36px. Root cause: the
form/wrapper were sized via content-driven "auto" (no width rule at
all), and CSS can only smoothly interpolate between two concrete
values -- it can't animate toward/away from "auto", which depends on
the input's own internal sizing recalculating in a discrete step.
Giving both states a real pixel value gives the browser two actual
endpoints to interpolate between, in both directions symmetrically. */
.wp-block-search.wp-block-search__searchfield-hidden,
.wp-block-search__searchfield-hidden .wp-block-search__inside-wrapper {
width: 36px;
}
.wp-block-search:not(.wp-block-search__searchfield-hidden),
.wp-block-search:not(.wp-block-search__searchfield-hidden) .wp-block-search__inside-wrapper {
width: 240px;
}
.wc-block-customer-account__link,
.wc-block-mini-cart__button,
.wp-block-search__button {
width: 36px;
}
.wc-block-customer-account__link:hover,
.wc-block-mini-cart__button:hover,
.wp-block-search__button:hover {
background-color: transparent;
color: #B08D57; /* Gold */
}
/* .wc-block-mini-cart__quantity-badge is NOT the small corner count bubble
(that's a mistaken guess from its name, corrected 2026-08-27) -- it's the
wrapper around the icon+count as a whole, so styling it colored the
entire icon. The real corner badge is the nested, currently-hidden
(cart is empty) .wc-block-mini-cart__badge, styled via inline styles
WordPress's Interactivity API sets at runtime (background/color driven
by JS state, not a static class) -- not safely targetable with plain
CSS here. Its current default (Cream bg / Gold text) is already close
to the palette; revisit only if it needs to change once the cart
actually has items to see it rendered. */
/* --------------------------------------------------------------------------
Component-specific styles below
-------------------------------------------------------------------------- */
/* Product / category cards - white surface, settles to Cream on hover.
.product-card/.cat-card stay as manually-assignable classes for
custom-built blocks (e.g. homepage category tiles, once rebuilt --
see kb/plans/03-live-site-application-and-verification.md Task 2).
li.wc-block-product is the real, DOM-confirmed class WooCommerce's
Product Collection block uses for cards on shop/category archive pages
(see kb/plans/04-shop-product-account-pages.md). See kb/decisions/ui-element-colors.md
for the color decision itself. */
.product-card, .cat-card, li.wc-block-product {
background-color: #FFFFFF; /* White */
transition: background-color 0.2s ease;
}
/* Hairline separator so White cards read as distinct against the White page
(kb/decisions/ui-element-colors.md) -- ported from the reference mockup's
"--line: rgba(43,38,33,0.14)" token (Ink at 14% opacity).
CORRECTION 2026-08-29: this rule previously excluded li.wc-block-product
on the claim that WooCommerce already gives it a border "for free,"
confirmed live. Re-checked directly (computed style + a full scan of
every loaded stylesheet for any rule touching that selector's border) on
/product-category/mujeres/: no such rule exists anywhere, on any
stylesheet -- the cards had zero border, box-shadow, or padding, and
read as white only by coincidence (unstyled WooCommerce output happens
to default to white). Same "confirmed live" was wrong pattern as the
[data-area] incident in kb/technical/child-theme-setup.md. See
kb/reviews/2026-08-29_2117_category-archive-shared-template.md. */
.product-card, .cat-card, li.wc-block-product {
border: 1px solid rgba(43, 38, 33, 0.14);
}
/* Bottom inset so the card's text content doesn't sit flush against the
border added above -- the product image stays edge-to-edge (matches
the reference mockup's .product-media, also edge-to-edge within its
bordered .product-card), so this is spacing for the card as a whole
rather than a wrapper element: WooCommerce renders the title/price/
button as separate siblings, not inside one shared container, so each
gets its own horizontal inset below instead of one padding rule. */
li.wc-block-product {
padding-bottom: 18px;
}
li.wc-block-product > .wp-block-post-title,
li.wc-block-product > .wc-block-components-product-price,
li.wc-block-product > .wc-block-components-product-button {
margin-left: 18px;
margin-right: 18px;
}
/* Pin the add-to-cart button to a shared bottom edge across a row.
WooCommerce's grid (.wc-block-product-template, display:grid) already
stretches every li.wc-block-product in a row to equal height -- confirmed
via computed style, not assumed -- but the button itself just follows
normal document flow inside that box, so a longer title (more wrapped
lines) pushes the price/button further down than a card with a shorter
title, leaving the height difference as blank space below the button
instead of the buttons lining up. flex-direction:column plus
margin-top:auto on the button makes it float to the bottom of whatever
height the grid already gave the card, regardless of title length.
flex-shrink:0 on the image keeps its aspect-ratio box from being
compressed now that the card is a flex container. */
li.wc-block-product {
display: flex;
flex-direction: column;
}
li.wc-block-product > .wc-block-components-product-image {
flex-shrink: 0;
}
li.wc-block-product > .wc-block-components-product-button {
margin-top: auto;
}
.cat-card:hover {
background-color: #F7F3EE !important; /* Cream */
}
/* A "stretched link" full-tile click area was tried and reverted (see
kb/plans/03-live-site-application-and-verification.md Task 2 and
kb/decisions/ui-element-colors.md for the full incident writeup) -- it
required fighting WordPress core's Cover-block internals (a percentage-
height quirk against a min-height-sized container, plus a paint-order
regression when the inner container's "position: relative" was touched)
and risked a per-tile visual regression depending on each tile's content-
position setting. Kept simple instead: the click target is just the
linked heading text itself (clearly underlined/interactive), no extra CSS
needed beyond the link WordPress already renders. */
/* Category tile - featured/luxury variant (Bolsos, per kb/decisions/categories.md
"Bolsos - featured/luxury treatment"). Apply "cat-card--featured" as an
Additional CSS Class alongside "cat-card"; add a small text element with
class "featured-badge" containing "Selección premium". Ported from the
reference mockup (reference/selected-proposal.html), simplified for
standard block-editor blocks (no custom arrow icon). */
.cat-card--featured {
border: 1px solid #B08D57; /* Gold */
position: relative;
}
/* Badge and heading must not share a centered flex group -- in normal flow
they'd be centered together, pushing "Bolsos" down from where the other
tiles' single-line headings sit. Fixing this properly (unlike the
full-tile click-area attempt above) is safe to scope to just this one
featured tile: .wp-block-cover__inner-container normally shrink-wraps to
its content and can't be a reliable containing block for absolute
positioning, so it's made to fill the tile via inset:0 (not width/height
percentages -- those don't resolve against a min-height-sized parent,
per the incident above) and re-centers its own content via flex, matching
the same visual centering the other tiles get from the Cover block's
default layout. This lets the badge position independently of the
heading via its own position:absolute, pinned to the corner. */
.cat-card--featured .wp-block-cover__inner-container {
position: absolute;
inset: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
}
/* WordPress's own ":root :where(.is-layout-constrained) > *" rule gives
every child of a constrained layout a 1.2rem top margin, zeroed only for
the actual first child. The badge occupies that first-child DOM slot even
though it's visually pulled out via position:absolute above, so the
heading (now effectively the second child) was picking up an extra
~19px of top margin the other 3 tiles' headings don't have -- confirmed
via computed style (19.2px vs 0px) and DOM order (badge precedes heading).
WordPress's rule uses :where(), making it zero-specificity by design and
trivial to override cleanly, no !important needed. */
.cat-card--featured .wp-block-heading {
margin-block-start: 0;
}
.featured-badge {
position: absolute;
top: 24px;
left: 24px;
display: inline-block;
font-family: var(--wp--preset--font-family--barlow);
font-size: 10px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: #B08D57; /* Gold */
border: 1px solid #B08D57; /* Gold */
padding: 3px 9px;
}
/* Product image / gallery background - White, not Cream, for color accuracy
(this is the surface directly behind garment photos). .product-media is
the mockup's placeholder class; .wc-block-components-product-image is the
real WooCommerce Product Collection block class, DOM-confirmed. */
.product-media, .wc-block-components-product-image {
background-color: #FFFFFF; /* White */
}
/* Product images on archive/category cards - fit, don't crop. WooCommerce
forces every product image into a square box with object-fit:cover
(confirmed live: measured several product photos with a natural aspect
ratio as narrow as 0.66, i.e. notably taller than wide -- full-body model
shots), center-cropping anything that isn't already square. On a portrait
photo that crops off the top and bottom, which in practice meant several
product cards showing a model's torso with the head cut off entirely
(kb/plans/pending-items.md). object-fit:contain fits the whole photo
inside the box instead, at the cost of empty space on the narrow sides
for non-square images -- an acceptable trade since that space is the
same White as the surrounding card/page background above, so it reads as
clean framing rather than a gap. !important is required because
WooCommerce sets object-fit as an inline style directly on the ![]()
tag (confirmed via computed style + a stylesheet scan finding no
external rule at all was winning), which beats any external stylesheet
rule regardless of selector specificity. */
.wc-block-components-product-image img {
object-fit: contain !important;
}
/* Product title on archive/category cards - normal-case Barlow, not the
uppercase Barlow Condensed used for real headings (see "Uppercase reserved
for statements" in kb/decisions/color-palette.md). Scoped to the product
template so it doesn't affect blog post titles elsewhere, if any exist. */
.wc-block-product-template .wp-block-post-title {
font-family: var(--wp--preset--font-family--barlow);
font-weight: 600;
text-transform: none;
letter-spacing: normal;
color: #2B2621; /* Ink */
font-size: 16px;
}
/* Product price on archive/category cards - bold Barlow, matches the
reference mockup's .product-price treatment. */
.wc-block-components-product-price {
font-family: var(--wp--preset--font-family--barlow);
font-weight: 700;
color: #2B2621; /* Ink */
}
/* Add-to-cart button on archive/category cards - same treatment as the
site's primary buttons (.wp-element-button above), since this button
doesn't carry that class natively. */
.wc-block-components-product-button__button {
background-color: #2B2621; /* Ink */
color: #F7F3EE; /* Cream */
font-family: var(--wp--preset--font-family--barlow);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
border-radius: 3px;
transition: background-color 0.2s ease;
}
.wc-block-components-product-button__button:hover {
background-color: #B08D57; /* Gold */
color: #F7F3EE; /* Cream -- same generic a:hover override needed, see above */
}
/* Category/shop archive sort dropdown - was rendering in the browser's
default Arial/gray-border chrome (kb/reviews/2026-08-29_2117_...).
Real class confirmed via DOM audit: select.orderby inside
.wc-block-catalog-sorting form.woocommerce-ordering. */
.wc-block-catalog-sorting select.orderby {
font-family: var(--wp--preset--font-family--barlow);
font-size: 13px;
color: #2B2621; /* Ink */
background-color: #FFFFFF; /* White */
border: 1px solid rgba(43, 38, 33, 0.14); /* --line */
border-radius: 3px;
padding: 8px 10px;
}
/* Category/shop archive pagination - was fully unstyled default browser/
WP appearance (kb/reviews/2026-08-29_2117_...). Real classes confirmed
via DOM audit: .page-numbers (each page link/span, ".current" on the
active one, ".dots" on the ellipsis) and
.wp-block-query-pagination-next (the "Página siguiente" link). */
.wp-block-query-pagination-numbers {
display: flex;
align-items: center;
gap: 4px;
}
.wp-block-query-pagination .page-numbers {
font-family: var(--wp--preset--font-family--barlow);
font-size: 13px;
font-weight: 600;
color: #2B2621; /* Ink */
padding: 6px 10px;
border: 1px solid transparent;
border-radius: 3px;
transition: border-color 0.2s ease, color 0.2s ease;
}
.wp-block-query-pagination a.page-numbers:hover {
color: #B08D57; /* Gold */
border-color: #B08D57; /* Gold */
}
.wp-block-query-pagination .page-numbers.current {
border-color: rgba(43, 38, 33, 0.14); /* --line */
}
.wp-block-query-pagination .page-numbers.dots {
padding-left: 2px;
padding-right: 2px;
}
.wp-block-query-pagination-next {
font-family: var(--wp--preset--font-family--barlow);
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
}
/* Scrolling brand marquee - no native WordPress marquee block, so the
markup lives in a Custom HTML block (see kb/plans/03-live-site-application-and-verification.md
for the exact HTML to paste in) while the styling stays here, consistent
with how every other component on the site works (content in the
editor, styling in this file). */
.marquee-band {
background-color: #FAF8F4; /* Pearl */
border-top: 1px solid rgba(43, 38, 33, 0.14); /* --line */
border-bottom: 1px solid rgba(43, 38, 33, 0.14); /* --line */
overflow: hidden;
white-space: nowrap;
padding: 14px 0;
}
.marquee-track {
display: inline-flex;
gap: 0;
animation: lovestruck-marquee-scroll 42s linear infinite;
}
.marquee-track span {
font-family: var(--wp--preset--font-family--barlow-condensed);
font-style: italic;
font-weight: 600;
font-size: 16px;
letter-spacing: 0.06em;
text-transform: uppercase;
padding: 0 30px;
color: #8A7F72; /* Taupe */
border-right: 1px solid rgba(43, 38, 33, 0.14); /* --line */
}
@keyframes lovestruck-marquee-scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@media (prefers-reduced-motion: reduce) {
.marquee-track {
animation: none;
}
}
/* Eyebrow / overline label - used above section headings and category names.
Apply with class="eyebrow". */
.eyebrow {
font-family: var(--wp--preset--font-family--barlow);
font-size: 0.7rem;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: #B08D57; /* Gold */
}
/* Section-header trailing link (e.g. "Ver todo ->", "Ver catálogo ->").
Apply with class="sec-link". Ported from reference/selected-proposal.html.
Targets both the paragraph AND its nested -- when linked via the
editor, only the selected text becomes an inside the paragraph, and
that anchor picks up the generic "a { color: Ink }" + browser-default
underline directly (an element's own explicit styles always beat an
inherited value from its parent, regardless of the parent's specificity)
instead of inheriting Gold/no-underline from .sec-link. Always Gold, no
hover variant -- matches the mockup, which doesn't have one either. */
.sec-link,
.sec-link a {
font-family: var(--wp--preset--font-family--barlow);
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
border-bottom: 1px solid #B08D57; /* Gold */
padding-bottom: 2px;
white-space: nowrap;
color: #B08D57; /* Gold */
text-decoration: none;
}
/* Section-header row (eyebrow+heading on the left, sec-link on the right,
same line). Apply class="sec-head" to a Group block wrapping both. */
.sec-head {
display: flex;
justify-content: space-between;
align-items: flex-end;
flex-wrap: wrap;
gap: 20px;
border-bottom: 1px solid rgba(43, 38, 33, 0.14); /* --line */
padding-bottom: 26px;
margin-bottom: 48px;
}
/* Ghost / outline button - secondary CTA (e.g. hero "Explorar categorías").
Uses WordPress core's built-in Button block "Outline" style
(toolbar > Styles > Outline), no extra plugin needed.
background-color: transparent is required here -- the base
.wp-element-button/.wp-block-button__link rule above sets an Ink
background, and this rule never overrode it, so the first real outline
button on the live site (hero "Explorar categorías") rendered as Ink
text on an Ink background, fully invisible. Found via computed-style
inspection, not visually guessed. */
.wp-block-button.is-style-outline .wp-block-button__link {
background-color: transparent;
color: #2B2621; /* Ink */
border-color: #2B2621; /* Ink */
}
.wp-block-button.is-style-outline .wp-block-button__link:hover {
color: #B08D57; /* Gold */
border-color: #B08D57; /* Gold */
}
/* Benefits band ("Info Boxes" row) - 4-column Ink band. Apply class
"benefits" to the wrapping Columns/Group block, "benefit" to each
column. Text colors set together with the background on purpose --
the site's default heading/body colors (Ink/Taupe) would be invisible
or low-contrast against an Ink background, same failure mode as the
button hover bugs found earlier this session. */
.benefits {
background-color: #2B2621; /* Ink */
color: #F7F3EE; /* Cream */
}
.benefit {
padding: 48px 32px;
border-right: 1px solid rgba(247, 243, 238, 0.14);
}
.benefit:last-child {
border-right: none;
}
.benefit .eyebrow {
color: #B08D57; /* Gold */
margin-bottom: 12px;
}
.benefit .wp-block-heading {
font-family: var(--wp--preset--font-family--barlow);
font-size: 17px;
font-weight: 600;
color: #F7F3EE; /* Cream */
margin-bottom: 8px;
text-transform: none;
letter-spacing: normal;
}
.benefit p {
font-size: 13px;
color: #C9C1B6;
line-height: 1.6;
font-weight: 400;
font-family: var(--wp--preset--font-family--barlow);
}
/* Newsletter band ("Email Form" row) - Gold background. Apply class
"newsletter" to the wrapping Group block. Form/input/button rules are
included for when the placeholder "[email form]" text gets replaced
with a real form -- functionally inert either way until a real email
service is chosen and wired up, see kb notes. */
.newsletter {
background-color: #B08D57; /* Gold */
/* WordPress's own layout-spacing rule (the same one behind the
featured-badge margin fix, kb/decisions/ui-element-colors.md) gives
every non-first block a ~19px top margin. Margin sits outside the
background box, so that gap showed the page's white background
through as a visible stripe above the gold band. */
margin-top: 0;
}
.newsletter .wp-block-heading {
color: #F7F3EE; /* Cream */
}
.newsletter .eyebrow {
color: #2B2621; /* Ink */
}
.newsletter form {
display: flex;
gap: 0;
border: 1px solid #2B2621; /* Ink */
max-width: 420px;
}
.newsletter input {
flex: 1;
border: none;
background: transparent;
padding: 16px;
font-family: var(--wp--preset--font-family--barlow);
font-size: 14px;
outline: none;
color: #2B2621; /* Ink */
}
.newsletter button {
border: none;
border-left: 1px solid #2B2621; /* Ink */
background: #2B2621; /* Ink */
color: #F7F3EE; /* Cream */
font-family: var(--wp--preset--font-family--barlow);
font-size: 13px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 0 24px;
cursor: pointer;
}
/* Example: clamp text size and prevent wrap on a single-line headline */
/*
.responsive-text-oneline {
font-size: clamp(1rem, 3.2rem, 3.2rem) !important;
white-space: nowrap !important;
}
*/