/*
Theme Name: La Piquette (Child)
Template: twentytwentyone
Description: Custom brand styling for La Piquette — EB Garamond headings, champagne/oxblood/charcoal palette. Child theme of Twenty Twenty-One.
Version: 1.2.2
Author: Tunlaw Industries
*/
/* ==========================================================================
0. CARRIED OVER FROM PRODUCTION'S ADDITIONAL CSS
========================================================================== */
@media screen and (max-width: 768px) {
.mobile-cover-height {
height: 450px; /* Fixed safe height for mobile */
}
}
/* ==========================================================================
1. BRAND COLOR PALETTE — the only place these values are set. Every
rule below references these variables by name, never a literal hex,
so the whole site recolors from this one block.
========================================================================== */
:root {
--lp-champagne: #fbf6ea; /* base page background ("paper") */
--lp-champagne-deep: #e8d9b5; /* alternate section tone ("gold wall"); also the
standard hover accent for text on a dark
background (charcoal or oxblood) — see §11 */
--lp-burgundy: #6e1023; /* primary accent ("oxblood") — buttons, links, CTAs */
--lp-burgundy-deep: #4a0a17; /* oxblood hover/active state */
--lp-charcoal: #1e1e1e; /* body ink AND the header/footer background */
--lp-ink-soft: #4c433c; /* muted/secondary text on light backgrounds */
--lp-cream-text: #f5edda; /* text/buttons on a dark (oxblood or charcoal) background */
}
/* ==========================================================================
2. TYPOGRAPHY — EB Garamond for headings. (Loaded on both the front end
and inside the block editor — see functions.php — so this actually
matches between "Preview" and the live site.)
========================================================================== */
h1, h2, h3, h4, h5, h6,
.wp-block-heading,
.site-title,
.page-title,
.home-title,
.entry-title,
.wp-block-post-title {
font-family: "EB Garamond", Georgia, serif;
font-weight: 400;
letter-spacing: 0.02em;
}
.site-title {
font-size: 1.9rem;
}
.site-description {
font-family: inherit; /* keep tagline in the body sans-serif, not the display face */
}
/* ==========================================================================
3. BASE COLOR — body, headings, links. One rule per concern; anything
more specific (buttons, nav, footer) lives in its own section below
rather than being duplicated here.
========================================================================== */
body {
background-color: var(--lp-champagne);
color: var(--lp-charcoal);
}
/* Headings default to oxblood wherever they appear on light/champagne
backgrounds, but stay cream when sitting inside a dark Cover block
overlay (a photo) — both skipped if an editor color was explicitly set. */
.entry-content h1:not(.has-text-color),
.entry-content h2:not(.has-text-color),
.entry-content h3:not(.has-text-color),
.entry-content h4:not(.has-text-color),
.entry-content .wp-block-heading:not(.has-text-color),
.entry-header .entry-title {
color: var(--lp-burgundy);
}
.wp-block-cover .wp-block-heading:not(.has-text-color),
.wp-block-cover h1:not(.has-text-color),
.wp-block-cover h2:not(.has-text-color),
.wp-block-cover h3:not(.has-text-color),
.wp-block-cover h4:not(.has-text-color),
.wp-block-cover .home-title:not(.has-text-color),
.wp-block-cover .page-title:not(.has-text-color) {
color: var(--lp-cream-text);
}
/* Twenty Twenty-One defaults ALL text inside a Cover block's inner
container to a light "foreground" color (`.wp-block-cover:not([class*=
background-color]) .wp-block-cover__inner-container { color: var(--
cover--color-foreground) }`) — a sensible default when a cover is a
dark photo, wrong once a cover's own background is genuinely light.
Gutenberg marks a light-background cover with its own `is-light` class,
computed from the color's luminance AT THE TIME IT WAS LAST SAVED
through the editor — several of this site's original photo-hero covers
(Contact, Critic's Reviews) still carry a stale `is-light` class from
years before this redesign, even though they're genuinely dark (a photo
with a black dim overlay) today; targeting bare `.is-light` flipped
their hero H1s to oxblood instead of the cream every other page's hero
uses. `:not(:has(.wp-block-cover__image-background))` excludes any
cover with an actual photo behind it, leaving only the real light
solid-color covers this was written for (the review cards on Critic's
Reviews) — a stale class is only a risk here, on covers with no photo
to contradict it.
Setting color on the container alone isn't enough for the heading or
the link, though — CSS inheritance only fills in a property when
NOTHING matches the child directly, and both already have their own
(plain, non-!important) rule elsewhere in this file forcing cream — a
child's own rule always wins over inheriting from the parent regardless
of !important on the parent, since they're never compared against each
other. Each has to be named directly here too. */
.wp-block-cover.is-light:not(:has(.wp-block-cover__image-background)) .wp-block-cover__inner-container {
color: var(--lp-charcoal) !important;
}
/* The container fix above is enough on the front end (nothing else there
claims a paragraph's color, so it just inherits), but the block editor
is a different document — its own "rich text editable" areas carry
their own default text color for editability, independent of anything
inherited from an ancestor. That only shows up in the editor, which is
exactly why this was invisible on the front end and only surfaced by
actually comparing the two. Naming the paragraph directly closes that
gap in both places at once. */
.wp-block-cover.is-light:not(:has(.wp-block-cover__image-background)) .wp-block-cover__inner-container p:not(.has-text-color) {
color: var(--lp-charcoal) !important;
}
.wp-block-cover.is-light:not(:has(.wp-block-cover__image-background)) .wp-block-heading:not(.has-text-color) {
color: var(--lp-burgundy) !important;
}
.wp-block-cover.is-light:not(:has(.wp-block-cover__image-background)) .wp-block-cover__inner-container a:not(.has-text-color) {
color: var(--lp-burgundy) !important;
}
.wp-block-cover.is-light:not(:has(.wp-block-cover__image-background)) .wp-block-cover__inner-container a:hover,
.wp-block-cover.is-light:not(:has(.wp-block-cover__image-background)) .wp-block-cover__inner-container a:focus {
color: var(--lp-burgundy-deep) !important;
}
/* Plain content links (inside paragraphs, lists, etc.): a simple color
swap, no underline changes. This is the one and only link treatment for
ordinary prose — "chrome" links (nav, footer, utility bar) are their own
sections further down, since they're a different kind of link (all-caps,
no underline by default) and shouldn't share this rule. */
a {
color: var(--lp-burgundy);
}
a:hover,
a:focus {
color: var(--lp-burgundy-deep);
}
/* ==========================================================================
4. BUTTONS — one canonical style: oxblood fill, cream text, EB Garamond.
Every button on the site uses exactly this, with three DELIBERATE
exceptions where a button sits on its own oxblood-colored panel and
must invert (cream fill / oxblood text) to stay visible against it:
the Home hero (§13), the footer Brand column (§11), and nowhere else.
========================================================================== */
/* Twenty Twenty-One's own button CSS (`.wp-block-button
.wp-block-button__link:hover`, four selector components, its own
!important) ties our specificity exactly if we match its selector shape
— which is not enough here. This host's bundled Newfold/HostGator plugin
("wp-plugin-hostgator" — the WonderBlocks admin bar, the "Caching" menu)
both injects its own inline button CSS and, more importantly, appears to
duplicate the parent theme's stylesheet a second time AFTER ours in the
served page (confirmed via document.styleSheets — twentytwentyone/
style.css shows up twice, the second copy following la-piquette-child/
style.css). On an exact specificity tie that reorders our rule to lose.
`#page` (an ID, present on every front-end page) makes our selector
strictly MORE specific than the parent's, so it wins regardless of load
order — this is what actually fixed both the wrong font (silently
losing to the parent's higher-specificity base rule) and the
"disappearing on hover" button (background/color forced
transparent/inherit by the parent's !important hover rule). The block
editor's preview is a separate document with no #page element at all,
though — `:is(#page, .editor-styles-wrapper)` adds `.editor-styles-
wrapper` (always present as the editor iframe's own body class) as a
second way to match, while :is()'s specificity is that of its most
specific argument regardless of which branch actually matched — so both
contexts get the same ID-level boost from one rule. */
/* Same cream outline the nav/footer "Reserve" buttons wear (see §11) —
present at rest AND on hover, not just appearing on hover. */
:is(#page, .editor-styles-wrapper) .wp-block-button .wp-block-button__link,
:is(#page, .editor-styles-wrapper) .wp-element-button {
background-color: var(--lp-burgundy) !important;
color: var(--lp-cream-text) !important;
font-family: "EB Garamond", Georgia, serif !important;
letter-spacing: 0.03em;
font-size: 1.05em;
border-radius: 2px;
border: 1px solid var(--lp-cream-text) !important;
}
:is(#page, .editor-styles-wrapper) .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
:is(#page, .editor-styles-wrapper) .wp-block-button:not(.is-style-outline) .wp-block-button__link:active,
:is(#page, .editor-styles-wrapper) .wp-element-button:hover {
background-color: var(--lp-burgundy-deep) !important;
color: var(--lp-cream-text) !important;
border-color: var(--lp-cream-text) !important;
}
/* ==========================================================================
5. TIGHTER VERTICAL RHYTHM
========================================================================== */
/* Cap oversized Cover block heights (some were set as tall as 850px) so
sections read as tight and edited rather than padded with empty space. */
.wp-block-cover {
min-height: 440px !important;
}
.wp-block-cover .wp-block-cover__inner-container {
padding-top: 1.5em;
padding-bottom: 1.5em;
}
/* ==========================================================================
6. LOGO PROMINENCE
========================================================================== */
.site-logo .custom-logo,
.custom-logo-link .custom-logo,
img.custom-logo {
max-height: 76px !important;
max-width: 220px !important;
width: auto !important;
height: auto !important;
}
/* ==========================================================================
7. (removed — targeted a specific media attachment ID (.wp-image-252)
in a wp:media-text layout for the old Bistrot Lepic photo. Both are
gone now: that attachment no longer exists anywhere in the site's
content, and the section that used to hold it (Home's "Our Sister
Restaurant") is a plain columns layout today, not a media-text block.
Hardcoding a media ID in CSS is also exactly the kind of thing that
silently breaks on an export/import if attachment IDs get
reassigned, so worth removing outright rather than leaving as dead
weight. Section number left retired rather than renumbering
everything below it, same as §9.)
========================================================================== */
/* ==========================================================================
8. PHOTO PLACEHOLDERS — used on pages awaiting real photography. Same
idea as the site mock: a diagonal-stripe swatch with an italic caption
naming what the final shot should be, so nothing on the live pages
looks like a broken image while we wait on the client's photo batch.
Swap for a real /wp:image block; the class can just be dropped.
========================================================================== */
.lp-photo-placeholder {
--lp-ph-stripe: rgba(30, 30, 30, 0.06);
background-image: repeating-linear-gradient(135deg, var(--lp-ph-stripe) 0 14px, transparent 14px 28px);
background-color: var(--lp-champagne);
display: flex;
align-items: flex-end;
min-height: 340px;
padding: 1.25rem;
border-radius: 2px;
}
.lp-photo-placeholder.is-dark {
--lp-ph-stripe: rgba(245, 237, 218, 0.08);
background-color: var(--lp-burgundy-deep);
}
.lp-photo-placeholder em {
font-style: italic;
font-size: 0.85rem;
line-height: 1.4;
color: var(--lp-charcoal);
background: var(--lp-cream-text);
padding: 0.35rem 0.65rem;
display: inline-block;
max-width: 32em;
}
.lp-photo-placeholder.is-dark em {
background: var(--lp-burgundy-deep);
color: var(--lp-champagne);
}
.lp-photo-placeholder.is-square { aspect-ratio: 1 / 1; min-height: 0; }
.lp-photo-placeholder.is-wide { aspect-ratio: 16 / 9; min-height: 0; }
.lp-photo-placeholder.is-tall { min-height: 480px; }
/* ==========================================================================
9. (removed — the Merchandise page's photo-card grid was replaced by
the same table pattern used on Menus/Hours; see §17/§10. Section
number left retired rather than renumbering everything below it.)
========================================================================== */
/* ==========================================================================
10. HOURS TABLE — clean two-column table (service | time) replacing a
long stack of centered paragraphs, per the mock's ".week" pattern.
This table's wrapping section now has its own oxblood background
(#742223, set directly on that Group block) instead of the plain
paper it was built against, so — same fix as §17's menu table —
text runs cream instead of burgundy/ink, borders reset to all sides
none-then-cream-bottom-only (Twenty Twenty-One puts a full 1px
border on every table cell by default), and the selector is
#page-prefixed so it wins outright against the host's caching
plugin duplicating that default rule after ours (see §4). --- */
:is(#page, .editor-styles-wrapper) .lp-hours-table {
width: 100%;
max-width: 820px;
margin: 0 auto;
border-collapse: collapse;
}
:is(#page, .editor-styles-wrapper) .lp-hours-table th,
:is(#page, .editor-styles-wrapper) .lp-hours-table td {
padding: 1.4rem 0;
border: none !important;
border-bottom: 1px solid rgba(245, 237, 218, 0.2) !important;
vertical-align: baseline;
color: var(--lp-cream-text);
}
:is(#page, .editor-styles-wrapper) .lp-hours-table th {
text-align: left;
font-family: "EB Garamond", Georgia, serif;
font-weight: 400;
font-size: clamp(1.4rem, 3vw, 1.9rem);
}
:is(#page, .editor-styles-wrapper) .lp-hours-table td {
text-align: right;
font-size: 1.1rem;
font-variant-numeric: tabular-nums;
opacity: 0.9;
}
.lp-hours-note {
max-width: 820px;
margin: 1.5rem auto 0;
font-style: italic;
color: var(--lp-cream-text);
opacity: 0.75;
text-align: right;
}
/* Mobile: stack service/time into one block per row instead of a cramped
two-column table, matching §17's menu table pattern. Same reasoning as
there — each cell keeps its own border-bottom on desktop (harmless,
they overlap into one line), but stacked as blocks they'd each show a
separate divider, so the border moves to the row itself instead. */
@media screen and (max-width: 600px) {
:is(#page, .editor-styles-wrapper) .lp-hours-table th,
:is(#page, .editor-styles-wrapper) .lp-hours-table td {
display: block;
width: 100% !important;
text-align: left;
border: none !important;
padding: 0.2rem 0;
font-size: 1rem;
}
:is(#page, .editor-styles-wrapper) .lp-hours-table tr {
display: block;
padding: 1.2rem 0;
border-top: 1px solid rgba(245, 237, 218, 0.2);
}
:is(#page, .editor-styles-wrapper) .lp-hours-table tr:last-child {
border-bottom: 1px solid rgba(245, 237, 218, 0.2);
}
}
/* ==========================================================================
11. HEADER + FOOTER — one unified dark charcoal (#1e1e1e) chrome, and one
unified hover language for every link that sits on it.
CONTRAST, checked against WCAG 2.2 AA (4.5:1 body text, 3:1 large
text/UI) for #1e1e1e specifically:
cream (#f5edda) on charcoal ≈ 12.6:1 — links, body text
gold-wall (#e8d9b5) on charcoal ≈ 11.8:1 — the hover/focus accent
oxblood (#6e1023) on charcoal ≈ 1.4:1 — FAILS; this is exactly
why hover states here use gold-wall instead of the site's usual
oxblood accent, and why that choice is deliberate, not an
inconsistency.
Buttons (nav "Reserve", footer "Reserve a Table") are unaffected by
any of this — cream-on-oxblood is a self-contained ≈10:1 pair.
HOVER LANGUAGE, applied identically everywhere in this section
(primary nav, footer sitemap, footer content links, utility bar):
color shifts to gold-wall, underline appears if not already present.
Regular in-page content links (§3) intentionally look different —
they're prose, not navigation chrome.
========================================================================== */
.site-header,
.site-footer,
.widget-area {
background-color: var(--lp-charcoal) !important;
color: var(--lp-cream-text) !important;
}
/* --- Structure: full-bleed, flush against the page content (see #main
below), single-row logo-left/nav-right instead of the default four-tier
stacked layout. --- */
.site-header,
.site-footer,
.widget-area {
max-width: none !important;
width: 100% !important;
}
.site-header {
display: flex !important;
flex-direction: row !important;
flex-wrap: wrap;
align-items: center !important;
justify-content: space-between !important;
text-align: left;
padding: 0.65rem 1.5rem !important;
gap: 0.75rem 1.5rem;
}
/* Twenty Twenty-One's own stylesheet still puts an empty clearfix pseudo
(`.site-header::before {content:"";display:table}`) on this element —
a leftover from its default four-tier stacked layout, where a float
clearfix made sense. Inside our flex row it doesn't clear anything, but
it still generates a real (zero-width) flex item, so `space-between`
above divides its space across THREE items — the invisible pseudo,
the logo, and the nav — instead of two. That extra split is what was
quietly shoving the logo to the right of the true left edge instead of
sitting flush against the header's own padding. Removing the pseudo
entirely drops the flex item count back to two (logo, nav) and the
logo lands exactly at the padding edge. */
.site-header::before,
.site-header::after {
content: none !important;
display: none !important;
}
.site-header > .site-logo {
width: auto !important; /* parent theme sets this to 100%, forcing nav onto its own line */
padding-bottom: 0 !important;
border-bottom: none !important;
}
/* The site title + tagline are visually hidden here, not deleted — they
stay in the markup for SEO and screen readers. The logo already
communicates the brand, and the tagline is the same copy already shown
prominently in the homepage hero, so repeating a full sentence in the
persistent header on every page added height without adding information. */
.site-header .site-branding {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Parent theme default is #main{padding-top:30px;padding-bottom:30px},
leaving a gap between the header and the first block on every page, and
an identical gap between the last block and the footer (.widget-area is
a sibling of #main, not a child, so #main's own bottom padding shows as
plain champagne space above the footer). Zero both so everything sits
flush against the header and the footer alike. */
#main {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Several pages end with a leftover empty paragraph block from the editor
(zero height itself, but still carrying the block's normal bottom
margin) — that margin was the visible champagne strip between the last
real section and the footer. */
.entry-content > *:last-child {
margin-bottom: 0 !important;
}
/* --- Primary nav: links --- */
.primary-navigation {
width: auto;
max-width: none;
border-top: none;
margin-top: 0;
padding-top: 0;
}
.primary-navigation .primary-menu-container,
.primary-navigation ul.menu-wrapper {
display: flex;
justify-content: center;
flex-wrap: wrap;
gap: 0.5rem 1.5rem;
}
.site-header a,
.site-header .site-title,
.site-header .site-title a,
.site-header .site-description,
.primary-navigation a,
.primary-navigation a:link,
.primary-navigation a:visited,
.site-title a:link,
.site-title a:visited {
color: var(--lp-cream-text) !important;
}
.primary-navigation a {
font-size: 0.8rem;
letter-spacing: 0.12em;
text-transform: uppercase;
text-decoration: none;
}
.primary-navigation a:hover,
.primary-navigation a:focus,
.site-title a:hover,
.site-title a:focus {
color: var(--lp-champagne-deep) !important;
text-decoration: underline;
text-decoration-color: var(--lp-champagne-deep);
}
/* Toggle button's default (closed) state. */
#primary-mobile-menu {
color: var(--lp-cream-text) !important;
border-color: var(--lp-cream-text) !important;
}
#primary-mobile-menu svg {
fill: currentColor !important;
}
/* --- "Reserve": a solid button at the end of the nav, like the mock's
persistent CTA — not just another text link. --- */
/* WCAG 2.2 SC 1.4.11 (non-text contrast): the button's fill (oxblood) is
its own contrast pair with the button's TEXT (≈10:1, fine either way),
but the button's BOUNDARY also needs ≥3:1 against the charcoal it sits
on to be perceivable as a distinct control — oxblood-on-charcoal is
≈1.4:1. A cream border gives the boundary itself the contrast the fill
alone can't. */
.primary-navigation .lp-nav-btn > a {
background-color: var(--lp-burgundy) !important;
color: var(--lp-cream-text) !important;
border: 1px solid var(--lp-cream-text);
padding: 0.5rem 1.1rem;
border-radius: 2px;
text-decoration: none !important;
}
.primary-navigation .lp-nav-btn > a:hover,
.primary-navigation .lp-nav-btn > a:focus {
background-color: var(--lp-burgundy-deep) !important;
color: var(--lp-cream-text) !important;
}
/* --- Mobile menu overlay: same charcoal as the header/footer, full-screen
while open. --- */
body.primary-navigation-open .primary-navigation,
body.primary-navigation-open .primary-navigation .primary-menu-container {
background-color: var(--lp-charcoal) !important;
min-height: 100vh;
z-index: 999;
}
/* The full-height menu list (z-index:999) was stacking on top of the
toggle/close button's own container (z-index:500), physically blocking
clicks to Close — confirmed by testing an actual click, not just looking
at it. The button must outrank the menu list it controls. */
body.primary-navigation-open .menu-button-container {
z-index: 1000;
background-color: var(--lp-charcoal) !important;
}
body.primary-navigation-open .primary-navigation .menu-wrapper,
body.primary-navigation-open .primary-navigation .primary-menu-container {
padding: 2rem 1.5rem;
}
body.primary-navigation-open .primary-navigation a {
color: var(--lp-cream-text) !important;
font-size: 1.1rem;
display: block;
width: 100%;
padding: 0.9rem 1.5rem;
-webkit-tap-highlight-color: transparent;
}
/* Replace the browser's default tap-highlight (a small, ugly black box that
only covers the text's tight bounding box) with an intentional full-width
highlight on the whole row instead. */
body.primary-navigation-open .primary-navigation a:active,
body.primary-navigation-open .primary-navigation a:focus-visible {
background-color: rgba(245, 237, 218, 0.12);
outline: none;
}
body.primary-navigation-open .primary-navigation .primary-menu-container {
flex-direction: column !important;
align-items: stretch !important;
}
body.primary-navigation-open .primary-navigation .menu-wrapper,
body.primary-navigation-open .primary-navigation ul.menu-wrapper {
flex-direction: column !important;
flex-wrap: nowrap !important; /* column + wrap stacks items into new *columns*, not rows — causes them to overlap */
justify-content: center !important; /* was spreading 6 items across the full 100vh height with huge gaps */
align-items: stretch;
gap: 0.25rem;
width: 100% !important;
height: auto !important;
max-height: 100%;
overflow-y: auto;
}
body.primary-navigation-open .primary-navigation li.menu-item {
text-align: center;
width: 100% !important;
flex: 0 0 auto !important; /* flex: 0 0 100% meant "100% width" for the row layout elsewhere, but in this column context it means "100% height" — every item was trying to fill the whole container */
}
body.primary-navigation-open #primary-mobile-menu,
body.primary-navigation-open .primary-navigation .dropdown-icon {
color: var(--lp-cream-text) !important;
}
/* --- Top utility bar (Order Online / Delivery / etc.) — oxblood, not
charcoal: it's meant to read as a distinct strip above the masthead. --- */
.simple-banner-text,
.simple-banner-text * {
background-color: var(--lp-burgundy) !important;
color: var(--lp-cream-text) !important;
}
.simple-banner-text {
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: center;
gap: 4px;
}
/* Underlined by default — matches the rest of the site's link lists
(footer columns, footer site map), not the primary nav's menu-bar
convention of no-underline-until-hover. The nav is the one deliberate
exception, since it reads as an actual menu bar rather than a list of
links; this utility bar is closer in kind to the footer's link lists. */
.top-button-style {
display: inline-block;
padding: 6px 14px;
font-size: 0.78rem;
letter-spacing: 0.08em;
text-transform: uppercase;
white-space: nowrap;
text-decoration: underline;
text-decoration-color: rgba(245, 237, 218, 0.35);
border-right: 1px solid rgba(245, 237, 218, 0.35);
}
.top-button-style:last-child {
border-right: none;
}
/* Same gold-wall hover accent as the primary nav — oxblood text would fail
contrast against this background too (≈8.3:1 for gold-wall vs ≈1:1 for
oxblood-on-oxblood, which would just disappear). */
.top-button-style:hover,
.top-button-style:focus {
color: var(--lp-champagne-deep) !important;
text-decoration-color: var(--lp-champagne-deep);
}
/* --- Footer widget area + real