/* sidebar bookshelf styles.
Extracted verbatim from sidebar.php on 2026-06-10 (audit PERF-07 stage C):
same rules, same cascade position via an in-place , now cacheable
instead of re-sent inside every page's HTML. */
/* ─── UkuTabs CSS bookshelf ───────────────────────────────────────
Pure-CSS replacement for the legacy PNG-on-JPG bookshelf. Each
booklet renders as real text (SEO + a11y win), with the binding
color and eyebrow label both auto-derived from the guide's
parent section in inc/uku-guides-catalog.php — a single source
of truth feeds both this widget and the hub / single-guide
pages, so the visual language stays consistent site-wide.
Wood shelves, paper texture, page-edge striations, and the
subtle ukulele watermark are all CSS gradients (no images). */
.uku-bookshelf {
/* Pale pine/maple wood palette for the bookcase interior. */
--shelf-wood-hl: #f0dcb0; /* bright top sheen on shelf planks */
--shelf-wood-md: #c89a5a; /* mid wood — main visible tone */
--shelf-wood-dk: #9a6e35; /* darker wood in shadowed areas */
--shelf-wood-edge: #7a5020; /* underside / bottom edge of shelves */
/* Booklet paper palette (unchanged). */
--paper-cream: #f4ecd6;
--paper-cream-dk: #ead9b3;
--paper-edge: #c9b88a;
--paper-ink: #3d2e1a;
--paper-ink-soft: #6b5436;
position: relative;
padding: 15px 22px 10px; /* tighter top + bottom, generous sides */
/* Wood back-wall: vertical grain striations layered over a warm
tan gradient. Heavy inset shadows on all four edges simulate
the surrounding bookcase frame casting shadow onto the
recessed back wall — bigger blur + higher opacity than a
typical inset to get the dimensional "darkened-corners"
bookcase feel. */
background:
/* Soft vertical grain — narrow accents every ~46px. */
repeating-linear-gradient(90deg,
rgba(120, 80, 40, 0.0) 0px,
rgba(120, 80, 40, 0.05) 22px,
rgba(120, 80, 40, 0.11) 23px,
rgba(120, 80, 40, 0.05) 24px,
rgba(120, 80, 40, 0.0) 46px),
/* Base wood gradient — warmer and a touch darker than before. */
linear-gradient(180deg, #d8b078 0%, #b08048 100%);
border-radius: 0 0 4px 4px;
box-shadow:
inset 12px 0 22px rgba(70, 40, 12, 0.40), /* left edge — deep */
inset -12px 0 22px rgba(70, 40, 12, 0.40), /* right edge — deep */
inset 0 14px 22px rgba(70, 40, 12, 0.45), /* top edge — deepest */
inset 0 -10px 18px rgba(70, 40, 12, 0.30); /* bottom edge */
/* margin-bottom handled by the .accordion wrapper above. */
}
/* Accordion header override — wooden "top trim" of the bookcase.
The theme styles the INNER (not the h3), so all the visual
overrides must target .accordion h3 a. Dark engraved-looking text
on warm wood with a soft warm highlight ("letterpress" feel). */
.uku-bookshelf-accordion > h3 a {
background: linear-gradient(180deg, #c8995a 0%, #a87a3a 100%) !important;
color: #1f1408 !important;
border-color: #8a5e2a !important;
box-shadow: inset 0 1px 0 rgba(255, 240, 200, 0.55) !important;
text-shadow: 0 1px 0 rgba(255, 240, 200, 0.45); /* engraved-on-wood feel */
}
.uku-bookshelf-accordion > h3 a span {
color: #1f1408 !important;
}
.uku-bookshelf-accordion > h3 a:hover {
color: #0f0a02 !important;
}
.uku-bookshelf__row {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 24px; /* horizontal space between books — wider gaps shrink each book */
padding-bottom: 15px; /* space between book bottoms and the shelf below */
margin-bottom: 14px; /* space between this row's shelf and the next row's books */
position: relative;
}
.uku-bookshelf__row:last-child { margin-bottom: 0; }
.uku-bookshelf__row::after {
/* Chunky wooden shelf plank — extends past row to meet container edges.
Gradient runs from bright top sheen → main wood → darker underside,
matching the pale-pine palette of the back wall above. */
content: "";
position: absolute;
left: -10px;
right: -10px;
bottom: 0;
height: 11px;
background: linear-gradient(180deg,
var(--shelf-wood-hl) 0%, /* bright top sheen */
#d4a878 10%,
var(--shelf-wood-md) 30%, /* main wood tone */
#b07a3a 60%,
var(--shelf-wood-dk) 80%, /* darker wood */
var(--shelf-wood-edge) 100%); /* underside shadow */
border-radius: 1px;
box-shadow:
0 4px 6px rgba(70, 40, 15, 0.40),
inset 0 1px 0 rgba(255, 240, 200, 0.70),
inset 0 -1px 0 rgba(60, 35, 10, 0.45);
}
.uku-bookshelf__row::before {
/* Contact shadow where books meet the shelf. */
content: "";
position: absolute;
left: 4px;
right: 4px;
bottom: 11px;
height: 4px;
background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.25) 100%);
pointer-events: none;
}
.uku-booklet {
position: relative;
display: flex;
flex-direction: column;
aspect-ratio: 86 / 95; /* a lot less tall — close to the old PNG proportions */
padding: 7px 12px 7px 17px; /* extra left padding to clear the wider binding */
text-decoration: none;
color: var(--paper-ink);
/* Condensed sans stack. Arial Narrow renders condensed on Windows;
Roboto Condensed on many Android/Linux; otherwise font-stretch
hint nudges variable-font system stacks toward semi-condensed.
For guaranteed condensed rendering across all systems, load
Oswald (or similar) via wp_enqueue_scripts. */
font-family: "Arial Narrow", "Roboto Condensed", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-stretch: 85%;
background:
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%2090'%20fill='none'%20stroke='%23b8a075'%20stroke-width='1.8'%20opacity='0.22'%3E%3Crect%20x='26'%20y='4'%20width='8'%20height='8'%20rx='1'/%3E%3Crect%20x='28'%20y='12'%20width='4'%20height='38'%20rx='1'/%3E%3Cellipse%20cx='30'%20cy='65'%20rx='22'%20ry='22'/%3E%3Ccircle%20cx='30'%20cy='65'%20r='4'/%3E%3C/svg%3E") center 62% / 50% auto no-repeat,
repeating-linear-gradient(0deg, rgba(180, 150, 90, 0.0) 0px, rgba(180, 150, 90, 0.0) 2px, rgba(180, 150, 90, 0.04) 2px, rgba(180, 150, 90, 0.04) 3px),
radial-gradient(ellipse 60% 80% at 50% 0%, rgba(255, 255, 240, 0.4), transparent),
linear-gradient(135deg, rgba(255, 250, 230, 0.0) 0%, rgba(180, 150, 90, 0.10) 50%, rgba(255, 250, 230, 0.0) 100%),
linear-gradient(180deg, var(--paper-cream) 0%, var(--paper-cream-dk) 100%);
border: none; /* removed — was creating a bright halo on the dark wood bg */
border-radius: 2px 8px 8px 2px; /* heavy right rounding (page-edge side), light left rounding (binding side) */
box-shadow:
inset 1px 0 0 rgba(0, 0, 0, 0.05), /* subtle interior shadow where binding meets cover */
0 3px 5px rgba(20, 10, 0, 0.50), /* tight contact shadow */
0 8px 18px rgba(30, 15, 5, 0.55), /* mid drop shadow */
0 14px 30px rgba(20, 10, 0, 0.40); /* far ambient shadow — really pops the book off the wood */
transition: transform 0.18s ease, box-shadow 0.18s ease;
overflow: hidden;
}
.uku-booklet::before {
/* Solid colored binding — LEFT edge. Color set per-section by
.uku-booklet--{slug}. Semi-glossy finish:
- Layer 1: a 1-px off-centre vertical "tooling line" (a darker
stripe a touch past the middle, the classic bookbinder detail).
- Layer 2: a subtle cylindrical sheen — softer than the original
shiny version, more substantial than full matte.
- Layer 3: the binding's solid accent colour. */
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 13px;
background:
/* Tooling line — ~72% from the left edge, 1 px wide. Hard
color stops at the same percentage give a crisp dark line. */
linear-gradient(90deg,
transparent 0%,
transparent 69%,
rgba(0, 0, 0, 0.30) 69%,
rgba(0, 0, 0, 0.30) 77%,
transparent 77%,
transparent 100%),
/* Soft sheen — peak only ~12% white, much gentler than before. */
linear-gradient(90deg,
rgba(0, 0, 0, 0.25) 0%,
rgba(0, 0, 0, 0.06) 22%,
rgba(255, 255, 255, 0.12) 48%,
rgba(255, 255, 255, 0.02) 62%,
rgba(0, 0, 0, 0.08) 85%,
rgba(0, 0, 0, 0.22) 100%),
var(--binding-color, #a2321b);
border-radius: 2px 0 0 2px; /* light rounding — left side is the subtle one */
box-shadow: inset -1px 0 1px rgba(0, 0, 0, 0.25);
}
.uku-booklet::after {
/* Stacked-paper page edges — RIGHT edge. Soft vertical stripes
(each = one page edge seen face-on) in warm off-white tones. */
content: "";
position: absolute;
top: 0;
bottom: 0;
right: 0;
width: 8px;
background:
repeating-linear-gradient(90deg, #d8d2c6 0px, #fafaf6 1.25px, #d8d2c6 2.5px),
linear-gradient(90deg, #f4f0e8 0%, #d4cec2 100%);
border-radius: 0 8px 8px 0; /* matches the booklet's heavy right rounding */
box-shadow:
inset 1px 0 1px rgba(255, 255, 255, 0.35),
inset -1px 0 1px rgba(0, 0, 0, 0.15);
}
.uku-booklet:hover {
transform: translateY(-2px);
box-shadow:
inset 1px 0 0 rgba(0, 0, 0, 0.05),
0 5px 7px rgba(20, 10, 0, 0.55),
0 12px 22px rgba(30, 15, 5, 0.60),
0 18px 36px rgba(20, 10, 0, 0.45);
}
.uku-booklet__eyebrow {
font-family: 'Lobster Two', cursive;
font-style: italic;
font-weight: 400;
font-size: 10px;
line-height: 1.05;
color: var(--paper-ink-soft);
text-align: center;
margin: 0 0 4px;
position: relative;
z-index: 1;
}
.uku-booklet__title {
font-weight: 700; /* full bold — condensed fonts need more weight to feel substantial */
font-size: 12px; /* slightly smaller so 4 lines fit comfortably */
line-height: 1.1; /* tight so all 4 lines fit in the available height */
letter-spacing: 0.03em; /* slight tracking for readability at small size */
color: rgba(61, 46, 26, 0.65); /* paper-ink at 65% — softer/more transparent */
text-transform: uppercase;
text-align: center;
position: relative;
z-index: 1;
/* Vertical-center via auto flex margins. 4-line clamp so longer
titles get more room before truncating. */
display: -webkit-box;
-webkit-line-clamp: 4;
-webkit-box-orient: vertical;
overflow: hidden;
margin: auto 0;
}
/* Section-color classes. Driven by inc/uku-guides-catalog.php — the
single source of truth for section accents site-wide. Default
binding (for guides not in the catalog) is brand brick red. */
.uku-booklet--buying { --binding-color: #c69a47; } /* warm gold — Buying a ukulele */
.uku-booklet--starting { --binding-color: #e8956a; } /* peach coral — Getting started */
.uku-booklet--playing { --binding-color: #a2321b; } /* brand brick — Playing the ukulele */
.uku-booklet--care { --binding-color: #738a3d; } /* sage olive — Strings & care */
.uku-booklet--further { --binding-color: #406e7a; } /* slate teal — Go further */
.uku-booklet--extras { --binding-color: #8c6a72; } /* dusty mauve — Good to know */
/* ─── Dark mode: deep walnut bookshelf ──────────────────────────
Light mode is pale pine/maple. Dark mode swaps to walnut/ebony
so the widget reads as a cozy library shelf at night instead of
a glaring pine bookcase. Books keep their cream paper + branded
binding colors (real books on a dark shelf are still light) —
only the wooden frame, back wall, and shelf planks change. */
:root[data-theme="dark"] .uku-bookshelf {
/* Walnut palette overrides — same variable names, dark values. */
--shelf-wood-hl: #5a4226;
--shelf-wood-md: #3a2814;
--shelf-wood-dk: #241710;
--shelf-wood-edge: #180e08;
/* Back wall: dark walnut gradient + cooler/darker grain striations. */
background:
repeating-linear-gradient(90deg,
rgba(20, 10, 5, 0.0) 0px,
rgba(20, 10, 5, 0.18) 22px,
rgba(20, 10, 5, 0.32) 23px,
rgba(20, 10, 5, 0.18) 24px,
rgba(20, 10, 5, 0.0) 46px),
linear-gradient(180deg, #3a2814 0%, #1f1408 100%);
/* Deeper inset shadows on dark wood maintain the dimensional frame. */
box-shadow:
inset 12px 0 22px rgba(0, 0, 0, 0.55),
inset -12px 0 22px rgba(0, 0, 0, 0.55),
inset 0 14px 22px rgba(0, 0, 0, 0.60),
inset 0 -10px 18px rgba(0, 0, 0, 0.45);
}
/* Accordion header — dark walnut trim with warm golden text. */
:root[data-theme="dark"] .uku-bookshelf-accordion > h3 a {
background: linear-gradient(180deg, #4a3520 0%, #2d1f0e 100%) !important;
color: #d4b878 !important;
border-color: #1f1408 !important;
box-shadow: inset 0 1px 0 rgba(255, 200, 130, 0.10) !important;
text-shadow: 0 1px 0 rgba(0, 0, 0, 0.6);
}
:root[data-theme="dark"] .uku-bookshelf-accordion > h3 a span {
color: #d4b878 !important;
}
:root[data-theme="dark"] .uku-bookshelf-accordion > h3 a:hover {
color: #f0c989 !important;
}
/* Shelf planks — dark walnut with subtle warm top-edge highlight. */
:root[data-theme="dark"] .uku-bookshelf__row::after {
background: linear-gradient(180deg,
var(--shelf-wood-hl) 0%,
#3a2814 10%,
var(--shelf-wood-md) 30%,
#2a1c10 60%,
var(--shelf-wood-dk) 80%,
var(--shelf-wood-edge) 100%);
box-shadow:
0 4px 6px rgba(0, 0, 0, 0.55),
inset 0 1px 0 rgba(255, 200, 130, 0.18),
inset 0 -1px 0 rgba(0, 0, 0, 0.5);
}
/* Contact shadow where books meet the shelf — slightly darker in dark mode. */
:root[data-theme="dark"] .uku-bookshelf__row::before {
background: linear-gradient(180deg, transparent 0%, rgba(0, 0, 0, 0.45) 100%);
}
/* Booklets themselves — switch from light cream paper to aged-parchment /
dimmed-paper tones. Less sepia/brown than v1: more neutral grey-cream
so the books read as "weathered library books" rather than "tea-stained".
Binding colors get a parallel dark-mode darkening (see below) so the
spines harmonize with the muted paper instead of popping. */
:root[data-theme="dark"] .uku-booklet {
/* Aged paper palette — neutralised (less yellow/brown, more grey).
Direct overrides on the booklet so eyebrow/title (which reference
these vars) auto-adjust. Lightened from v2 — books were reading
as a touch too dim against the walnut shelf. */
--paper-cream: #c2bba8; /* light neutral aged cream */
--paper-cream-dk: #9e9784; /* deeper neutral */
--paper-edge: #6e6855;
--paper-ink: #2a2418; /* slightly cooler than before */
--paper-ink-soft: #4a4234;
/* Re-emit the 5-layer background with neutralised hardcoded values.
The original v1 dark mode used warm browns (rgba(60,45,25,…)) which
compounded with the new base to look brownish. Shifted toward
neutral charcoal-tan (rgba(45,42,32,…)) so layers blend cleanly. */
background:
/* Ukulele watermark — stroke neutralized from #806b45 to #6e6857. */
url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2060%2090'%20fill='none'%20stroke='%236e6857'%20stroke-width='1.8'%20opacity='0.28'%3E%3Crect%20x='26'%20y='4'%20width='8'%20height='8'%20rx='1'/%3E%3Crect%20x='28'%20y='12'%20width='4'%20height='38'%20rx='1'/%3E%3Cellipse%20cx='30'%20cy='65'%20rx='22'%20ry='22'/%3E%3Ccircle%20cx='30'%20cy='65'%20r='4'/%3E%3C/svg%3E") center 62% / 50% auto no-repeat,
/* Horizontal paper-grain stripes — neutralized charcoal-tan. */
repeating-linear-gradient(0deg, rgba(45, 42, 32, 0.0) 0px, rgba(45, 42, 32, 0.0) 2px, rgba(45, 42, 32, 0.10) 2px, rgba(45, 42, 32, 0.10) 3px),
/* Top radial highlight — neutral off-white instead of warm cream. */
radial-gradient(ellipse 60% 80% at 50% 0%, rgba(240, 238, 228, 0.10), transparent),
/* Diagonal shimmer — dimmed neutral hint. */
linear-gradient(135deg, rgba(45, 42, 32, 0.0) 0%, rgba(45, 42, 32, 0.12) 50%, rgba(45, 42, 32, 0.0) 100%),
/* Base paper gradient — uses the overridden vars so the stack
shifts together if we tweak the palette later. */
linear-gradient(180deg, var(--paper-cream) 0%, var(--paper-cream-dk) 100%);
}
/* Title was hardcoded as rgba(61,46,26,0.65) — re-derive from the new ink.
Softened back to .70 alongside the lighter paper (was .78 against
slightly-darker v2 paper). */
:root[data-theme="dark"] .uku-booklet__title {
color: rgba(42, 36, 24, 0.70) !important;
}
/* Stacked-paper page edges — neutral parchment stripes (no warm tint).
Lifted to match the lighter paper bodies. */
:root[data-theme="dark"] .uku-booklet::after {
background:
repeating-linear-gradient(90deg, #807a6a 0px, #a8a08c 1.25px, #807a6a 2.5px),
linear-gradient(90deg, #9e9784 0%, #6e685a 100%);
box-shadow:
inset 1px 0 1px rgba(240, 238, 228, 0.12),
inset -1px 0 1px rgba(0, 0, 0, 0.35);
}
/* Binding (spine) colors — darkened ~30–35% per section so they harmonize
with the muted paper instead of glowing. Same hue family as light mode,
just dimmer. The binding still reads as the section's brand color. */
:root[data-theme="dark"] .uku-booklet--buying { --binding-color: #8a6a2d; } /* darker gold */
:root[data-theme="dark"] .uku-booklet--starting { --binding-color: #a86a48; } /* darker peach */
:root[data-theme="dark"] .uku-booklet--playing { --binding-color: #6e2110; } /* darker brick */
:root[data-theme="dark"] .uku-booklet--care { --binding-color: #4e6028; } /* darker sage */
:root[data-theme="dark"] .uku-booklet--further { --binding-color: #2c4d56; } /* darker teal */
:root[data-theme="dark"] .uku-booklet--extras { --binding-color: #5e464c; } /* darker mauve */