/* WahooArt UI-kit type voice: serif (Baskervville SC) · sans (DM Sans) · script (Italianno) */
@import url('https://fonts.googleapis.com/css2?family=Baskervville+SC&family=DM+Sans:ital,opsz,wght@0,9..40,100..1000;1,9..40,100..1000&family=Italianno&display=swap');
/* =====================================================
FONTS
===================================================== */
/* latin-ext */
@font-face {
font-family: 'Baskervville SC';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("../fonts/baskervville-sc/baskervville-sc-w400-700-normal-latin-ext.dc883927fc40.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Baskervville SC';
font-style: normal;
font-weight: 400 700;
font-display: swap;
src: url("../fonts/baskervville-sc/baskervville-sc-w400-700-normal-latin.d4cf9ac0dd02.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'DM Sans';
font-style: italic;
font-weight: 100 1000;
font-display: swap;
src: url("../fonts/dm-sans/dm-sans-w100-1000-italic-latin-ext.d93ac2aeec14.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'DM Sans';
font-style: italic;
font-weight: 100 1000;
font-display: swap;
src: url("../fonts/dm-sans/dm-sans-w100-1000-italic-latin.9b61b1969e6e.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* latin-ext */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 100 1000;
font-display: swap;
src: url("../fonts/dm-sans/dm-sans-w100-1000-normal-latin-ext.58de3348c8d4.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'DM Sans';
font-style: normal;
font-weight: 100 1000;
font-display: swap;
src: url("../fonts/dm-sans/dm-sans-w100-1000-normal-latin.837efc959fe4.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* vietnamese */
@font-face {
font-family: 'Italianno';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/italianno/italianno-w400-normal-vietnamese.12b12c09ab31.woff2") format('woff2');
unicode-range: U+0102-0103, U+0110-0111, U+0128-0129, U+0168-0169, U+01A0-01A1, U+01AF-01B0, U+0300-0301, U+0303-0304, U+0308-0309, U+0323, U+0329, U+1EA0-1EF9, U+20AB;
}
/* latin-ext */
@font-face {
font-family: 'Italianno';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/italianno/italianno-w400-normal-latin-ext.39edb26dc88b.woff2") format('woff2');
unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
/* latin */
@font-face {
font-family: 'Italianno';
font-style: normal;
font-weight: 400;
font-display: swap;
src: url("../fonts/italianno/italianno-w400-normal-latin.19a17c462672.woff2") format('woff2');
unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
/* =====================================================
SITE FONTS — family names only in :root; use var(--font-*) elsewhere
===================================================== */
:root {
--font-title-accent: 'Italianno', 'Pinyon Script', cursive;
--font-title: 'Baskervville SC', Georgia, 'Times New Roman', serif;
--font-body: 'DM Sans', system-ui, -apple-system, sans-serif;
/* ── WahooArt UI-kit colour palette ──
Warm parchment surfaces · bronze accent · roasted-brown bands · gilded frames */
/* Surfaces */
--wa-parchment: #EDE9DE; /* page */
--wa-sand: #E4DDC7; /* header */
--wa-panel: #E8E2CD; /* cards */
--wa-inset: #F3EFE6; /* fields */
--wa-form-surface: #F7F2E1; /* reproduction panels, header search */
--wa-roast: #2E2823; /* footer */
--wa-roast-soft: #3A322A; /* bands */
--wa-taupe-bar: #504943; /* utility */
/* Brand & ink */
--wa-bronze: #875D2A; /* accent */
--wa-bronze-deep: #6F4A20; /* hover */
--wa-bronze-l: #A87F4C; /* soft bronze — dark-surface labels */
--wa-gold-leaf: #B08D4E; /* frames */
--wa-gold: #DE9C28; /* gilded / CTA gold */
--wa-gold-deep: #B07D1C; /* gold hover */
--wa-logo-red: #B23333; /* wordmark / catalog artist name */
--wa-logo-red-d: #8F2727; /* logo-red hover */
--wa-ink: #3E342A; /* headings */
--wa-ink-soft: #4A4035; /* body */
--wa-muted: #6F6555; /* secondary */
--wa-faint: #877F76; /* tertiary / borders / placeholders */
/* Hairlines */
--wa-line: #DCD3BF; /* warm hairline (accordions, dividers) */
--wa-line-2: #CCC2AE; /* stronger hairline */
/* Global link accent → bronze (UI-kit spec) */
--lc: #875D2A;
--lv: #6F4A20;
}
.font-serif {
font-family: var(--font-title);
}
.font-title-accent {
font-family: var(--font-title-accent);
}
/* WahooArt UI-kit: short section/card titles are elegant serif in small-caps (homepage scope).
Long editorial headings (e.g. .cur_heading) are deliberately excluded — small-caps suits
short titles, not full sentences. */
/* =====================================================
WAHOOART — Page / widget overflow (no horizontal page scroll)
===================================================== */
/* Keep image zoom inside mosaic tiles (global hover uses scale) */
/* Widget CTAs use their own ::before slide — not corner brackets */
/* =====================================================
WAHOOART — Image hover: luminance lift + Ken Burns pan
===================================================== */
/* Base transition — filter snaps faster than the slow pan */
.swiper-slide .artist_slid_box a img,
img.mouseover_effect_images,
img.mouseover_image_effect {
transition: filter 0.75s ease, transform 2.5s ease;
}
/* Hover state */
.swiper-slide .artist_slid_box a:hover img,
a:hover img.mouseover_effect_images,
img.mouseover_effect_images:hover,
a:hover img.mouseover_image_effect,
img.mouseover_image_effect:hover {
filter: brightness(1.14) saturate(1.25);
transform: scale(1.05) translateY(-3%);
}
/* =====================================================
WAHOOART — link hover effects (all consolidated)
===================================================== */
/* Corner-bracket animation on every link */
a {
position: relative;
}
a::before,
a::after {
content: '';
position: absolute;
width: 0;
height: 0;
/* Start invisible — prevents the 1px dot that appears when two borders
meet at a zero-dimension corner before the hover animation begins.
opacity transitions to 0 instantly after the brackets finish animating out. */
opacity: 0;
transition: width .5s ease, height .5s ease .5s, opacity 0s 1s;
}
a::before {
top: 0;
left: 0;
/* opacity: 0.5 keeps the bracket subtle — not as heavy as a solid border */
border-top: 1px solid rgba(107, 72, 34, 0.5);
border-left: 1px solid rgba(107, 72, 34, 0.5);
}
a::after {
bottom: 0;
right: 0;
border-bottom: 1px solid rgba(107, 72, 34, 0.5);
border-right: 1px solid rgba(107, 72, 34, 0.5);
}
a:hover::before,
a:hover::after {
width: 100%;
height: 100%;
/* Reveal immediately on hover-in; the dimension transition then draws the brackets */
opacity: 1;
transition: width .5s ease, height .5s ease .5s, opacity 0s;
}
/* No corner-bracket animation on the user login/dashboard icon */
#aps-user-auth-widget a::before,
#aps-user-auth-widget a::after {
display: none;
}
/* Dropdown column links — strip underline */
/* jQuery UI datepicker pagination arrows */
a.ui-state-default:hover {
background: #3E342A;
color: #EDE9DE;
}
/* Search results "load more" button */
/* Sidebar tag edit-request examples */
/* Numeric slider label links */
/* =====================================================
mouseover_effect_texts — opt-in class for text links
(nav, footer, breadcrumb anchors; not image links or buttons)
===================================================== */
/* ===== Artwork catalog list card — WahooArt (UI Kit aligned) ===== */
/*
Scope: the list wrappers (catalog-list-page / artwork-list-page) AND the
categories-hub wrappers (catalog-categories-page / artwork-categories-page)
are required — so these rules never bleed onto FTS search, artist pages, or
any of the ~95 other contexts that reuse .search_card. The categories hub
(list_category) reuses the identical .search_card grid (see
artworks/includes/artwork_category_grid_item.html), so its cards inherit
the exact same branded styling as the list page.
All tokens come from :root in this file (var(--wa-*)) or from the
WahooArt UI Kit directly. No class names or HTML were altered.
*/
/* ---------- Card shell ---------- */
/* The image carries a gilded picture-frame border-image inline; give it
generous breathing room so the ornate frame reads as a gallery element. */
/* WA-2025 reference (search artworks.html): cards are FLAT cells in a hairline
grid — parchment (page) background, no shadow, no radius; beige only on hover. */
/* Card hover + hover-reveal panel: GLOBAL DEFAULT (restored 2026-06-11).
The hover shows the beige panel UNDER the item with the meta description
and the buy button — do not re-add brand overrides here. */
/* The card base background above is !important, which would beat the global
(non-important) .search_card:hover beige — restate the global value so the
hovered card matches the panel colour (#E8E2CD). */
/* ---------- Image wrapper ---------- */
/* overflow:hidden clips the Ken Burns zoom already defined above;
padding creates the white mat that lets the inline frame border breathe */
/* ---------- Card body (artist + title) ---------- */
/* ---------- Artist name (h2 + anchor) ---------- */
/* WA-2025 reference (search artworks.html): DM Sans 500, uppercase, logo-red */
/* ---------- Hover-card description ---------- */
/* WA-2025 ref (.hover_visible p): DM Sans 500 *italic* 15px, muted (opacity .5) */
/* ---------- Year / date badge ---------- */
/* ---------- Artwork title ---------- */
/* WA-2025 reference (search artworks.html): DM Sans 500, ink (not serif italic) */
/* ---------- Hover-reveal overlay: GLOBAL DEFAULT (restored 2026-06-11) ----------
The former WA dark-roast overlay (absolute bottom over the image) was removed:
the hover must show the global beige panel UNDER the item, with the meta
description and the buy button styled by global CSS. */
/* ---------- Responsive adjustments ---------- */
@media (max-width: 575px) {
}
/* ===== / Artwork catalog list card — WahooArt ===== */
/* Suppress corner-bracket effect on anchors that wrap an image */
a:has(> img),
a:has(> picture),
a:has(> figure) {
padding: 0;
}
a:has(> img)::before,
a:has(> img)::after,
a:has(> picture)::before,
a:has(> picture)::after,
a:has(> figure)::before,
a:has(> figure)::after {
content: none;
}
/* =====================================================
WAHOOART — Misc
===================================================== */
/* Logo */
/* Search bar — wahooart overrides (style-V2.0.css sets fixed 420px widths) */
/* Header search — same cream as reproduction form (repro-faces__option, upload, checkout) */
/* ═══════════════════════════════════════════════════════════════════
WA — Photo-to-painting (.production_form / buy_photo_to_painting)
Parchment form surfaces (--wa-form-surface) — not Bootstrap white
═══════════════════════════════════════════════════════════════════ */
/* Custom checkboxes (optional add-ons, customization, artistic style) */
/* Override global .form-floating input { padding-top: 40px !important } for manual size fields */
/* ═══════════════════════════════════════════════════════════════════
WA — Custom reproduction / photo-to-painting order
(/orders/custom-reproduction/ + persona URLs)
Structure + neutral defaults live in global-custom-V2.1.css; here we
only align COLOURS/identity to the WA UI-kit tokens (parchment surfaces,
bronze accent, roasted-brown ink). Scoped to .production_form (left,
the 8 steps) and .summery_checkout (right, summary + checkout).
UI-kit refs: --bronze #8A5D2B accent · --ink #2F2A23 · --ink-soft #463F35
· --muted #6F6555 · radio checked = bronze · "Free/included" = bronze
(no green) · .price = ink 700.
═══════════════════════════════════════════════════════════════════ */
/* ---- Step shell (left column) ---- */
/* ---- Step 02 faces — option rows + selected (.checked_box) ---- */
/* "Free" badge — bronze per UI-kit (.free-mark), not green */
/* Surcharge price tags ("+$X") — ink, weight 700 per UI-kit .price */
/* ---- Radios (faces / frame / nameplate / style) — checked = bronze ---- */
/* ---- Checkbox toggles (add-ons / customization / artistic style) ---- */
/* ---- Step 03 size: CM/INCH switch ---- */
/* ---- Step 04 style cards / hover overlay ---- */
/* ---- Step 05 frame ---- */
/* ---- Step 06/07 medium + customization ---- */
/* ---- Read-more CTA (left col) — bronze (beats brown inline rules) ---- */
/* ---- Accordions (left tabs + summary) ---- */
/* ═══════════════════════════════════════════════════════════════════
WA — .summery_checkout (right column: presentation + summary + checkout)
═══════════════════════════════════════════════════════════════════ */
/* Summary rows */
/* Free/included markers in summary — bronze (UI-kit), not green */
/* Total + checkout buttons */
/* Confirmation notice */
/* FREE ART CONSULTATION label */
.highlight-text {
width: 100%;
}
/* =====================================================
WAHOOART — Slider card title: multi-line hover-frame fix
inline-block gives the a single rectangular bounding box
so the corner-bracket ::before/::after pseudo-elements
correctly frame the full text block even when the title wraps.
===================================================== */
.view_all_art a {
display: inline-block;
}
/* =====================================================
WAHOOART — Text-link hover colors (site-specific)
Do NOT put these hover colors in custom-V2.0.css — ArtsDot (ADC) uses
red (#C6270E) instead. Documented in:
-Documentation Project/DOC_APS_THE_7_SITES.md
→ section "Frontend CSS: text-link hover (WahooArt vs ArtsDot)"
Brand tokens (UI-kit bronze — defined in :root):
- var(--wa-bronze, #8A5D2B) — primary bronze (collection band, infobox, description links)
- var(--wa-bronze-deep, #6F4A20) — deep bronze hover (.yellow_cont, .view_all_art,
.fav-icon-artwork on buy/info pages)
Covered templates / URLs:
- artwork_buy_*.html (e.g. …/ArtistReproduction/)
- artwork_info.html (/art/info/{slug}/)
Many anchors use inline `color: inherit` — !important is required.
Shared transition: custom-V2.0.css (.collection_details h4 a, .art_info_box …)
===================================================== */
/* Buy page — collections section (#collections-section) */
.yellow_cont a:hover,
.view_all_art a:hover {
color: var(--wa-bronze-deep, #6F4A20) !important;
}
/* ===== artwork_info.html — WA (parchment/bronze) ===== */
.artinfo_top h4 { color: var(--wa-ink, #2F2A23); }
.art_info_details { background: var(--wa-panel, #E8E4D9); border-color: #DCD3BF; }
.art_info_inner { background: var(--wa-form-surface, #F7F2E1); }
.art_info_inner h4 { color: var(--wa-bronze, #8A5D2B); }
.artwork-info-meta-link { color: var(--wa-muted, #6F6555); }
.artwork-info-meta-link:hover { color: var(--wa-bronze, #8A5D2B); }
/* Artwork info page — .art_info_box hover */
/* === HOMEPAGETEST migrated inline CSS === */
/* Homepage row sliders: overrides global .parent_slid_box padding; centers track vs portrait column */
/* Font consistency guard for homepage widgets */
/* --- block --- */
/* --- block --- */
@media (min-width: 768px) {
}
/* --- block --- */
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
@media (max-width: 991.98px) {
}
@media (max-width: 767.98px) {
}
/* --- block --- */
@media (max-width: 1024px) {
}
/* --- block --- */
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
/* --- block --- */
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
/* --- block --- */
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
@media (max-width: 991.98px) {
}
@media (max-width: 767.98px) {
}
/* --- block --- */
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
/* --- block --- */
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}
/* Title: Baskervville SC only — title case, no faux italic */
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}
/* Body: DM Sans */
/* CTA: DM Sans, all-caps (button only) */
@media (min-width: 768px) {
}
/* --- block --- */
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}
/* --- block --- */
@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
@media (min-width: 992px) {
}
@media (min-width: 992px) {
}
@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
/* --- block --- */
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}
/* --- block --- */
@media (min-width: 768px) {
}
/* --- block --- */
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}
@media (max-width: 767.98px) {
}
/* --- block --- */
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}
@media (max-width: 767.98px) {
}
/* --- block --- */
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}
@media (min-width: 768px) {
}
@media (max-width: 767.98px) {
}
/* --- block --- */
@media (min-width: 768px) {
}
/* --- block --- */
@media (min-width: 768px) {
}
/* --- block --- */
@media (min-width: 768px) {
}
/* === HOMEPAGETEST shared layout utilities === */
@media (max-width: 991.98px) {
}
@media (max-width: 767.98px) {
.homepage-impressionist-widgets,
.homepage-buypopart-widgets { padding-left: clamp(12px, 3vw, 24px); padding-right: clamp(12px, 3vw, 24px); }
.ti-sh { flex-direction: column; align-items: flex-start; gap: 16px; margin-bottom: 24px; }
}
/* Homepage widget consistency (wahooart) */
/* Homepage widget CTAs — one shared outline + slide-hover treatment */
@media (min-width: 768px) {
}
@media (min-width: 992px) {
}
@media (min-width: 768px) {
}
@media (max-width: 575.98px) {
}
/* =====================================================
WA HERO — featured artwork + editorial CTA
(Adapted from mfp-hero; wahooart warm palette)
===================================================== */
/* Gallery side — warm linen background with framed artwork */
/* Artwork image container — no decorative outer frame */
/* Artwork meta — beside or below frame */
/* Wide aspect (landscape / panoramic): meta stacks below the frame */
/* Editorial content side */
/* Responsive */
@media (max-width: 900px) {
}
@media (max-width: 575px) {
}
/* =====================================================
W37 — Every movement A–Z (wahooart palette)
===================================================== */
@media (max-width: 575px) {
}
@media (min-width: 768px) { }
@media (min-width: 1100px) { }
/* Homepage widget display typography — align titles with mpl intro / signature serif */
/* =====================================================
WAHOOART — Homepage text links: standard corner-bracket hover
Widget CSS disables ::before/::after on category/STF/movement
labels; restore site-wide text-link frame + opacity fade here.
(Image tiles and CTA buttons keep their own hover treatments.)
===================================================== */
/* ===================================================== */
/* MERGED FROM articles_style-V2.0.css */
/* ===================================================== */
a {
color: inherit;
}
H1, H2, H3 {
clear: both;
font-size: 29px;
text-align: left;
line-height: 38px;
margin-bottom: 32px;
font-weight: 400;
font-family: var(--font-title);
margin-top: 55px;
}
/* Homepage signature bands + hero captions: keep script/serif titles centered */
H2:first-of-type {
margin-top: 0;
}
.HTMLSectionBlock {
float: right;
max-width: 20vw;
padding: 0 1vh 1vh 1vh;
text-align: justify;
clear: both;
font-size: 14px;
font-style: italic;
font-weight: 400;
color: #776E62;
line-height: 21px;
}
.HTMLSectionBlock p {
margin: 0;
padding: 0;
font-size: 14px;
font-style: italic;
font-weight: 400;
color: #776E62;
line-height: 21px;
}
.HTMLSectionBlock a {
display: inline-block;
color: #000000;
text-align: justify;
margin-bottom: 8px;
}
.HTMLSectionBlock img {
display: block;
margin: 0 auto 0.5em auto; /* Centers the image & adds space below */
max-width: 100%;
max-height: 350px;
margin-bottom: 8px;
}
/* ===================================================== */
/* MERGED FROM widget-artwork-labels.css */
/* ===================================================== */
/*
* widget-artwork-labels.css — unified typography for artwork/category captions
* in widgets. Loaded after site *-V2.0.css in base.html.
* Typography only — does not override color, background, padding, or overlay layout.
*/
/* ===================================================== */
/* MERGED FROM userprofile-V2.0.css */
/* ===================================================== */
/* Profile: sidebar shell only — do not use * reset (zeros .sidebar_profile_section / link padding) */
.header_box {
background: #F7F2E1;
padding: 15px 20px;
box-shadow: 0px 0px 10px 0px rgb(62 52 42 / 10%);
-webkit-box-shadow: 0px 0px 10px 0px rgb(62 52 42 / 10%);
-moz-box-shadow: 0px 0px 10px 0px rgb(62 52 42 / 10%);
margin-left: 320px;
}
h3.user_heading_text {
color: #3E342A;
font-weight: 400;
font-size: 20px;
line-height: 30px;
font-family: var(--font-title);
margin-bottom: 0px;
}
p.user_title_text {
color: #3E342A;
font-size: 14px;
font-weight: 400;
opacity: 0.6;
line-height: 22px;
margin-bottom: 0px;
}
/* User dashboard sidebar only — browse/group-by uses catalog-groupby-page tokens at EOF */
aside::-webkit-scrollbar {
width: 8px;
}
aside::-webkit-scrollbar-track {
background: #f1f1f1;
border-radius: 10px;
}
aside::-webkit-scrollbar-thumb {
background: #8B4513;
border-radius: 10px;
}
aside::-webkit-scrollbar-thumb:hover {
background: #A0522D;
}
aside {
scrollbar-width: thin;
scrollbar-color: #DCD3BF #504943;
}
.profile_name {
color: #EDE9DE;
font-weight: 500;
font-size: 18px;
line-height: 26px;
}
/* .sidebar_menu_link li.active a svg {
color: #F0B653 !important;
} */
/* .sidebar_menu_link li:hover a svg, */
.favorite_img_card {
border-right: 1px solid #DCD3BF;
border-bottom: 1px solid #DCD3BF;
padding: 42px 33px;
width: 20%;
}
.fav_img {
max-width: 250px;
height: 233px;
margin: auto;
}
.fav_img img{
width: 100%;
height: 100%;
object-fit: contain;
}
.fav-artist h2 {
font-family: var(--font-body);
font-weight: 500;
font-size: 12px;
line-height: 20px;
text-transform: uppercase;
color: #B23333;
}
.fav-artist h2 a{
color: #B23333;
}
.favCard_body {
margin-top: 30px;
max-width: 250px;
margin: auto;
margin-top: 30px;
}
.fav-title {
font-family: var(--font-body);
font-weight: 500;
font-size: 13px;
line-height: 20px;
color: #3E342A;
margin: 6px 0px 11px;
min-height: 38px;
}
.fav-title a{
color: #3E342A;
}
.button-dash {
width: 100%;
border: 1px solid var(--wa-bronze, #8A5D2B);
border-radius: 0;
padding: 11px 15px;
color: var(--wa-bronze, #8A5D2B);
font-size: 14px;
font-weight: 500;
text-transform: uppercase;
background: transparent;
}
.favorite_img_section {
display: flex;
flex-wrap: wrap;
}
.favorite_img_section:nth-child(-n+5) {
border-top: 1px solid #DCD3BF;
}
.main_gap {
padding: 16px;
}
.top_order_section {
display: flex;
align-items: center;
justify-content: space-between;
margin-bottom: 13px;
}
.order_count {
color: #3E342A;
font-size: 14px;
font-weight: 400;
opacity: 0.8;
}
.purchase_top {
display: flex;
align-items: center;
justify-content: space-between;
padding: 11px 18px 12px 18px;
border-bottom: 1px solid #DCD3BF;
}
.date_amount h6 {
color: #3E342A;
font-size: 14px;
opacity: 0.6;
font-weight: 400;
text-transform: uppercase;
margin-bottom: 0px;
}
.date_amount p {
color: #3E342A;
font-weight: 500;
font-size: 15px;
margin-bottom: 0px;
}
.pur_top_box {
display: flex;
gap: 17px;
}
.purchase_section {
margin-top: 11px;
box-shadow: 0px 0px 10px 0px rgb(62 52 42 / 10%);
-webkit-box-shadow: 0px 0px 10px 0px rgb(62 52 42 / 10%);
-moz-box-shadow: 0px 0px 10px 0px rgb(62 52 42 / 10%);
background: #F7F2E1;
}
.purchase-bottom {
padding: 15px 18px 15px 18px;
}
.purchase-bottom ul {
display: flex;
gap: 15px;
}
.purchase-bottom ul li {
width: 90px;
height: 90px;
}
.purchase-bottom ul li img{
width: 100%;
height: 100%;
}
table {
border-color: #DCD3BF !important;
}
table thead th {
background: #E8E2CD !important;
color: #3E342A !important;
opacity: 0.6;
font-weight: 400;
text-transform: uppercase;
font-size: 14px;
padding: 9px 12px !important;
}
/* Cart table keeps the global rhythm: the generic WA table theme below carries
!important (needed against Bootstrap elsewhere), so the cart scope must re-assert
the global-custom cart paddings that used to win via !important. */
.cart_table_box .table > :not(caption) > * > * {
padding: 20px 0 !important;
}
table tbody td {
background: #F7F2E1 !important;
color: #3E342A !important;
padding: 12px 14px !important;
font-family: var(--font-body);
font-weight: 400;
font-style: Regular;
font-size: 16px;
leading-trim: NONE;
line-height: 24px;
letter-spacing: 0%;
}
.red_box {
color: #B0312E;
display: inline;
font-weight: 500;
background: #F0DFCF;
padding: 4px 10px;
border-radius: 4px;
}
.green_box {
color: #389544;
display: inline;
font-weight: 500;
background: #E4E9D1;
padding: 4px 10px;
border-radius: 4px;
}
.yellow_box {
color: #D08608;
display: inline;
font-weight: 500;
background: #F3E7CB;
padding: 4px 10px;
border-radius: 4px;
}
.table_type_datail {
display: flex;
align-items: center;
gap: 9px;
}
.table_img {
width: 18px;
height: 18px;
position: relative;
top: -3px;
}
.table_img img {
width: 100%;
height: 100%;
}
.img_date_box {
position: relative;
top: -2px;
left: -3px;
}
/*message_us form css*/
textarea.form-control:focus {
background-color:#F7F2E1;
}
/* When textarea is focused, change button color */
/*succesfull msg */
.text-center.suceesfulmsg_textt{
padding-top: 230px;
}
.text-center.suceesfulmsg_textt img {
padding-bottom: 30px;
}
.text-center.suceesfulmsg_textt h1 {
font-size: 45px;
font-weight: 400;
font-family: var(--font-title);
line-height: 66px;
color: #3E342A;
}
.text-center.suceesfulmsg_textt p {
font-size: 16px;
line-height: 24px;
font-weight: 400;
font-family: var(--font-body);
color: #3E342A;
}
.suceesfulmsg_textt button
{
padding: 10px 120px;
border: none;
background: var(--wa-bronze, #8A5D2B);
font-size: 16px;
line-height: 24px;
font-family: var(--font-body);
font-weight: 500;
color: #EDE9DE;
text-transform: uppercase;
}
/* Sidebar Default */
aside {
width: 100%;
background: #E8E2CD;
height: 100%;
overflow-y: auto;
overflow-x: hidden;
transition: transform 0.3s ease-in-out;
z-index: 999;
}
/* Toggle Button */
.sidebar-toggle {
background: #948574;
color: white;
border: none;
padding: 8px 12px;
font-size: 18px;
cursor: pointer;
z-index: 1000;
}
/* Inline SVG items (Edit Profile, Change Password) — match img sidelink size */
@media (min-width: 768px) {
.profile_picture_top_header_initiales {
font-size: 15.43px;
}
.upload_img_form {
display: flex;
flex-direction: row-reverse;
text-align: left;
gap: 12px;
}
/* .main-grid-row {
display: flex;
} */
/* .sidebar-col {
flex-basis: 25%;
max-width: 25%;
}
.main-content-col {
flex-basis: 75%;
max-width: 75%;
padding-left: 2rem;
} */
/* .logout_section {
position: absolute;
bottom: 0;
} */
.sidebar_box {
position: relative;
}
}
/* Responsive */
@media (max-width: 768px) {
.form-container input {
font-size: 14px;
width: 100%;
padding: 9px;
margin-bottom: 8px;
}
.puchase-card-content {
padding: 14px;
gap: 14px;
}
.profile_name{ font-size: 15px;}
.text-center.suceesfulmsg_textt h1 { font-size: 30px;line-height: 38px;}
.text-center.suceesfulmsg_textt p {font-size: 13px;line-height: 20px;} .suceesfulmsg_textt button {padding: 10px 80px;font-size: 14px;}
aside {
height: 100%;
}
.sidebar_box .text-center.mb-20 img{
}
.sidebar_box {
width:auto !important;
}
aside {transform: translateX(0%);}aside.active { transform: translateX(0); }.sidebar-toggle {display: block;}#sidebar { display: block; }
.sidebar-toggle { display: block;}.header_box {margin-left:0px;padding: 10px 20px;position: fixed; top: 0; left: 0;width: 100%;z-index: 999;}
.date_amount h6 {font-size: 12px;}p.user_title_text {font-size: 12px;}.date_amount p {font-size: 12px;}.button-dash {padding: 5px 8px; font-size: 12px;}.purchase-bottom ul li img { object-fit: cover;}
.fav_img {height: auto;}.favorite_img_card {padding: 40px 0px; width: 100%;}table thead th {font-size: 12px; white-space: nowrap;}
table tbody td { font-size: 12px;white-space: nowrap;}.table_img img {width: 80%; height: 80%;object-fit: contain;}.img_date_box {position: relative;top: 0px;left: 0px;}
.text-center.suceesfulmsg_textt {padding-top: 40px; padding-bottom: 40px;}
}
/* Tablet Portrait to Tablet Landscape */
@media (min-width: 768px) and (max-width: 1023px) {
/* Tablet styles */
}
/* Small Desktop / Laptop */
@media (min-width: 1024px) and (max-width: 1199px) {
}
/* Large Desktop */
@media (min-width: 1200px) and (max-width: 1365px) {
}
/* Extra Large Desktop */
@media (min-width: 1366px) and (max-width: 1919px) {
}
/* Full HD (1920px) to Ultra-wide */
@media (min-width: 1920px) and (max-width: 2499px) {
}
/* Ultra-wide 2K/4K */
@media (min-width: 2500px) {
}
/* Profile Photo Edit Section */
/* user interaction-card */
.puchase-card-content {
padding:20px;
flex-wrap: wrap;
gap:20px;
}
.puchase-card-content img {
height:120px;
width:120px;
}
/* Form-floating: always use "focused" style (label above, reduced padding) on account forms */
/* ═══════════════════════════════════════════════════════════════════
WA — Group-by browse (artworks, artists, museums, articles, catalog)
Warm parchment panels · inset fields · bronze accents
═══════════════════════════════════════════════════════════════════ */
/* Panel shell — same tokens as .catalog-filter-sidebar__panel / .catalog-sidebar-values-list container */
/* No box hover — override global .sidebar_box:hover */
/* Chips — same look as .catalog-sidebar-values-list li a */
/* Group heading — match .sidebar_box_title size */
/* Group results — same surface as .sidebar_box (--wa-panel) */
/* ═══════════════════════════════════════════════════════════════════
WA — Catalog categories browse (filter sidebar on list_category pages)
Inner inset for the sidebar values-list / active-badge-list (global filter panel is 15px 0 only)
═══════════════════════════════════════════════════════════════════ */
/* ── Pagination — SITE-WIDE, overrides global brown #875D2A (every paginated
template: list, categories, search, color search). Paper cell, sand
hairline; active = bronze pill (WA brand accent). ── */
/* Belt-and-suspenders: any non-active, non-disabled page-link is always dark ink —
prevents the global .page-item:first-child white from bleeding through. */
/* ═══════════════════════════════════════════════════════════════════
WA — Academic sidebar (article / artist): TOC + Related Artworks cards
Same beige as Quick Facts / checkout accordions (--wa-form-surface)
═══════════════════════════════════════════════════════════════════ */
/* TOC in sidebar — flat like Browse; Quick Facts card matches reproduction #facts */
/* Related artworks list — beat global .artOf_paneBox p (26px line-height) */
/* ═══════════════════════════════════════════════════════════════════
WA — artist_detail.html — artistPage_Slider_section (corpus/popular/medium sliders)
═══════════════════════════════════════════════════════════════════ */
/* Background — warm parchment band, same as page surface */
/* Swiper track height */
/* Slider section divider */
/* Section heading */
/* view_all_art tag links — corpus/medium/color category names */
/* Image hover: only the image reacts, not the whole card */
/* ===== END WA — artist_detail.html artistPage_Slider_section ===== */
/* ═══════════════════════════════════════════════════════════════════
WA — Buy page academic block (artwork story + Quick Facts sidebar)
Story band on parchment; Quick Facts cards match #artist-facts panel.
═══════════════════════════════════════════════════════════════════ */
/* Academic block — align with reproduction_section row (no extra horizontal inset) */
/* WA — custom width/height fields: beige form surface (not ADC gray) */
/* WA — Reproduction accordions — match WA-2025 reference (artwork.html) */
/* (a) Description / Artist Biography group:
flat parchment, no per-item box, only an outer top+bottom hairline */
/* (b) Configurator tab content (Style/Frame/Size…) + Summary group:
bordered items on parchment */
/* Quick Facts panels — artwork #facts + biography #artist-facts (match checkout accordion beige) */
/* Artwork Description only — large serif section title (not Quick Facts label) */
/* Related Artworks + below-fold buy sections */
/* ═══════════════════════════════════════
WahooArt — Infinite Scroll (/art/infinite_scroll/)
Scoped via .ais-hero-banner; brand tokens only.
═══════════════════════════════════════ */
body:has(.ais-hero-banner) {
--ais-page: var(--wa-parchment);
--ais-surface: var(--wa-inset);
--ais-surface-2: var(--wa-panel);
--ais-border: var(--wa-sand);
--ais-divider: var(--wa-sand);
--ais-frame-bg: var(--wa-panel);
--ais-ink: var(--wa-ink);
--ais-ink-2: var(--wa-ink-soft);
--ais-ink-3: var(--wa-muted);
--ais-faint: var(--wa-muted);
--ais-accent: var(--wa-bronze);
--ais-accent-dark: var(--wa-bronze-deep);
--ais-label-accent: var(--wa-bronze);
--ais-on-accent: var(--wa-parchment);
--ais-shadow-rgb: 47 42 35;
--ais-accent-rgb: 138 93 43;
--ais-f-heading: var(--font-title);
--ais-f-title: var(--font-title);
--ais-f-body: var(--font-body);
--ais-f-label: var(--font-body);
--ais-f-mono: var(--font-body);
--ais-heading-weight: 500;
--ais-radius: 2px;
--ais-max-w: 1380px;
--ais-gutter: clamp(20px, 4vw, 64px);
background: var(--ais-page);
color: var(--ais-ink);
font-family: var(--ais-f-body);
-webkit-font-smoothing: antialiased;
min-height: 100vh;
}
body:has(.ais-hero-banner) .rake {
position: fixed;
inset: -20vh -30vw;
z-index: 3;
pointer-events: none;
background: linear-gradient(
105deg,
transparent 38%,
rgb(255 255 255 / 45%) 48%,
rgb(var(--ais-accent-rgb) / 7%) 52%,
transparent 64%
);
mix-blend-mode: soft-light;
transform: translateX(calc((var(--rake, .2) - .5) * 60vw));
transition: transform .4s ease-out;
opacity: .75;
}
body:has(.ais-hero-banner) .scroll-progress {
position: fixed;
top: 0;
left: 0;
height: 2px;
width: 0%;
z-index: 1001;
pointer-events: none;
background: linear-gradient(90deg, var(--ais-accent-dark), var(--ais-accent));
box-shadow: 0 0 8px -1px rgb(var(--ais-accent-rgb) / 45%);
transition: width .12s linear;
}
body:has(.ais-hero-banner) .reveal-up {
opacity: 0;
transform: translateY(24px);
animation: wa-ais-reveal-up .9s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes wa-ais-reveal-up {
to { opacity: 1; transform: none; }
}
body:has(.ais-hero-banner) .feed-head {
position: relative;
}
body:has(.ais-hero-banner) .feed-head::after {
content: '';
position: absolute;
left: 0;
bottom: -1px;
height: 2px;
width: 0;
background: var(--ais-accent);
animation: wa-ais-draw-line 1.1s 1s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes wa-ais-draw-line {
to { width: 64px; }
}
body:has(.ais-hero-banner) .ais-intro {
background: var(--ais-surface);
border-bottom: 1px solid var(--ais-border);
}
body:has(.ais-hero-banner) .ais-intro-inner {
max-width: var(--ais-max-w);
margin: 0 auto;
padding: 36px var(--ais-gutter) 32px;
text-align: center;
}
body:has(.ais-hero-banner) .ais-intro-title {
font-family: var(--ais-f-heading);
font-size: clamp(22px, 2.4vw, 34px);
font-weight: var(--ais-heading-weight);
color: var(--ais-ink);
margin-bottom: 14px;
letter-spacing: .01em;
}
body:has(.ais-hero-banner) .ais-intro-desc {
font-family: var(--ais-f-body);
font-size: clamp(15px, 1.4vw, 18px);
font-style: italic;
line-height: 1.75;
color: var(--ais-ink-3);
max-width: 760px;
margin: 0 auto;
}
body:has(.ais-hero-banner) .stage {
position: relative;
z-index: 2;
max-width: var(--ais-max-w);
margin: 0 auto;
padding: 24px var(--ais-gutter) 120px;
display: grid;
grid-template-columns: 1fr;
gap: 56px;
transition: grid-template-columns .65s cubic-bezier(.45, .05, .2, 1);
}
body:has(.ais-hero-banner) .stage.pinned {
grid-template-columns: 0.92fr 1.08fr;
}
body:has(.ais-hero-banner) .pinned-col {
display: none;
position: sticky;
top: 80px;
align-self: start;
height: fit-content;
}
body:has(.ais-hero-banner) .stage.pinned .pinned-col {
display: block;
animation: wa-ais-pin-in .8s cubic-bezier(.16, 1, .3, 1) both;
}
@keyframes wa-ais-pin-in {
from { opacity: 0; transform: translateY(34px) scale(.94); filter: blur(6px); }
to { opacity: 1; transform: none; filter: blur(0); }
}
body:has(.ais-hero-banner) .plate.grand .frame img {
animation: wa-ais-breathe 14s ease-in-out infinite alternate;
}
@keyframes wa-ais-breathe {
from { transform: scale(1); }
to { transform: scale(1.035); }
}
body:has(.ais-hero-banner) .plate {
background: var(--ais-surface);
border: 1px solid var(--ais-border);
border-radius: var(--ais-radius);
position: relative;
overflow: hidden;
}
body:has(.ais-hero-banner) .plate.grand {
box-shadow: 0 30px 60px -20px rgb(var(--ais-shadow-rgb) / 14%);
}
body:has(.ais-hero-banner) .plate .top {
display: flex;
align-items: flex-start;
}
body:has(.ais-hero-banner) .plate .mat {
padding: 22px;
position: relative;
flex: 0 0 auto;
width: 46%;
max-width: 340px;
}
body:has(.ais-hero-banner) .plate .frame {
position: relative;
background: var(--ais-frame-bg);
outline: 1px solid var(--ais-divider);
outline-offset: -1px;
overflow: hidden;
width: 100%;
}
body:has(.ais-hero-banner) .plate .frame img {
display: block;
width: 100%;
height: auto;
transition: transform 1.4s cubic-bezier(.2, .8, .2, 1), opacity .9s ease, filter .9s ease;
opacity: 0;
filter: blur(10px);
}
body:has(.ais-hero-banner) .plate .frame img.loaded {
opacity: 1;
filter: blur(0);
}
body:has(.ais-hero-banner) .plate-no {
position: absolute;
top: 14px;
left: 14px;
z-index: 3;
background: var(--ais-ink);
color: var(--ais-on-accent);
font-family: var(--ais-f-mono);
font-size: 9px;
font-weight: 600;
letter-spacing: .14em;
text-transform: uppercase;
padding: 5px 9px;
border-radius: var(--ais-radius);
}
body:has(.ais-hero-banner) .plate .caption {
flex: 1 1 auto;
min-width: 0;
padding: 26px 26px 22px 8px;
display: flex;
flex-direction: column;
justify-content: center;
}
body:has(.ais-hero-banner) .plate .caption .artist {
font-family: var(--ais-f-label);
font-weight: 600;
font-size: 12px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ais-ink);
margin-bottom: 8px;
}
body:has(.ais-hero-banner) .plate .caption .title {
font-family: var(--ais-f-title);
font-style: italic;
font-size: 26px;
line-height: 1.2;
color: var(--ais-ink-2);
}
body:has(.ais-hero-banner) .plate .caption .facts {
display: flex;
flex-wrap: wrap;
gap: 8px;
margin-top: 18px;
padding-top: 16px;
border-top: 1px solid var(--ais-divider);
}
body:has(.ais-hero-banner) .fact {
display: inline-block;
padding: 8px 13px;
background: var(--ais-surface-2);
border: 1px solid var(--ais-border);
border-radius: var(--ais-radius);
font-family: var(--ais-f-mono);
font-size: 10px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ais-ink-2);
opacity: 0;
transform: translateY(8px) scale(.96);
animation: wa-ais-fact-in .5s cubic-bezier(.16, 1, .3, 1) forwards;
}
@keyframes wa-ais-fact-in {
to { opacity: 1; transform: none; }
}
body:has(.ais-hero-banner) a.fact {
text-decoration: none;
color: var(--ais-ink-2);
cursor: pointer;
transition: border-color .3s ease, color .3s ease, background .3s ease, transform .3s ease;
}
body:has(.ais-hero-banner) a.fact:hover {
border-color: var(--ais-accent);
color: var(--ais-ink);
background: var(--ais-surface);
transform: translateY(-1px);
}
body:has(.ais-hero-banner) .plate .mat a.frame {
display: block;
cursor: pointer;
}
body:has(.ais-hero-banner) .plate .below {
padding: 0 26px 26px;
border-top: 1px solid var(--ais-divider);
margin-top: 0;
}
body:has(.ais-hero-banner) .plate .below .desc {
font-family: var(--ais-f-body);
font-size: 17px;
line-height: 1.7;
color: var(--ais-ink-3);
padding-top: 20px;
}
body:has(.ais-hero-banner) .actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: 22px;
}
body:has(.ais-hero-banner) .fav-btn {
display: inline-flex;
align-items: center;
gap: 10px;
font-family: var(--ais-f-label);
font-size: 11px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
color: var(--ais-ink-2);
background: var(--ais-surface);
border: 1px solid var(--ais-border);
border-radius: var(--ais-radius);
padding: 11px 18px;
cursor: pointer;
transition: transform .3s ease, border-color .3s ease, color .3s ease, background .3s ease, box-shadow .3s ease;
}
body:has(.ais-hero-banner) .fav-btn .heart {
position: relative;
width: 14px;
height: 14px;
display: inline-block;
}
body:has(.ais-hero-banner) .fav-btn .heart svg {
width: 14px;
height: 14px;
display: block;
transition: transform .35s cubic-bezier(.34, 1.56, .64, 1);
}
body:has(.ais-hero-banner) .fav-btn .heart svg path {
fill: none;
stroke: var(--ais-ink-2);
stroke-width: 1.4;
transition: fill .35s ease, stroke .35s ease;
}
body:has(.ais-hero-banner) .fav-btn:hover {
border-color: var(--ais-accent);
color: var(--ais-ink);
transform: translateY(-1px);
box-shadow: 0 8px 20px -10px rgb(var(--ais-shadow-rgb) / 22%);
}
body:has(.ais-hero-banner) .fav-btn:hover .heart svg path {
stroke: var(--ais-accent);
}
body:has(.ais-hero-banner) .fav-btn.saved {
background: var(--ais-accent);
border-color: var(--ais-accent);
color: var(--ais-on-accent);
}
body:has(.ais-hero-banner) .fav-btn.saved .heart svg path {
fill: var(--ais-on-accent);
stroke: var(--ais-on-accent);
}
body:has(.ais-hero-banner) .fav-btn.saved .heart svg {
animation: wa-ais-heart-pop .45s cubic-bezier(.34, 1.56, .64, 1);
}
@keyframes wa-ais-heart-pop {
0% { transform: scale(.6); }
55% { transform: scale(1.35); }
100% { transform: scale(1); }
}
body:has(.ais-hero-banner) .buy-btn {
display: inline-flex;
align-items: center;
gap: 8px;
font-family: var(--ais-f-label);
font-size: 11px;
font-weight: 600;
letter-spacing: .16em;
text-transform: uppercase;
border-radius: var(--ais-radius);
padding: 11px 18px;
cursor: pointer;
border: 1px solid var(--ais-ink);
text-decoration: none;
transition: transform .3s ease, background .3s ease, color .3s ease, box-shadow .3s ease, border-color .3s ease;
}
body:has(.ais-hero-banner) .buy-btn .arrow {
display: inline-block;
transition: transform .35s cubic-bezier(.2, .8, .2, 1);
}
body:has(.ais-hero-banner) .buy-btn:hover .arrow {
transform: translateX(3px);
}
body:has(.ais-hero-banner) .buy-btn.print {
background: var(--ais-surface);
color: var(--ais-ink-2);
border-color: var(--ais-border);
}
body:has(.ais-hero-banner) .buy-btn.print:hover {
border-color: var(--ais-accent);
color: var(--ais-ink);
transform: translateY(-1px);
box-shadow: 0 8px 20px -10px rgb(var(--ais-shadow-rgb) / 22%);
}
body:has(.ais-hero-banner) .buy-btn.painting {
background: var(--ais-accent);
color: var(--ais-on-accent);
border-color: var(--ais-accent);
}
body:has(.ais-hero-banner) .buy-btn.painting:hover {
background: var(--ais-accent-dark);
border-color: var(--ais-accent-dark);
transform: translateY(-1px);
box-shadow: 0 10px 26px -10px rgb(var(--ais-accent-rgb) / 45%);
}
body:has(.ais-hero-banner) .feed-col {
min-width: 0;
}
body:has(.ais-hero-banner) .feed-head {
display: flex;
align-items: baseline;
justify-content: space-between;
margin-bottom: 28px;
padding-bottom: 16px;
border-bottom: 1px solid var(--ais-border);
}
body:has(.ais-hero-banner) .feed-head .label {
font-family: var(--ais-f-label);
font-size: 10px;
font-weight: 600;
letter-spacing: .28em;
text-transform: uppercase;
color: var(--ais-label-accent);
}
body:has(.ais-hero-banner) .work-col {
display: flex;
}
body:has(.ais-hero-banner) .work {
position: relative;
display: flex;
align-items: stretch;
width: 100%;
height: 100%;
background: var(--ais-surface);
border: 1px solid var(--ais-border);
border-radius: var(--ais-radius);
cursor: pointer;
overflow: hidden;
box-shadow: 0 2px 10px -6px rgb(var(--ais-shadow-rgb) / 10%);
will-change: opacity, transform;
opacity: 0;
transform: translateY(40px) scale(.82);
transition: opacity .7s cubic-bezier(.2, .8, .2, 1), transform .7s cubic-bezier(.2, .8, .2, 1), box-shadow .5s ease;
}
body:has(.ais-hero-banner) .work.in-view {
opacity: 1;
transform: translateY(0) scale(1);
}
body:has(.ais-hero-banner) .work:hover {
transform: translateY(-6px) scale(1.02);
box-shadow: 0 14px 36px -16px rgb(var(--ais-shadow-rgb) / 16%);
transition: transform .3s cubic-bezier(.2, .8, .2, 1), box-shadow .9s ease;
}
body:has(.ais-hero-banner) .work.clicked {
transition: transform .22s cubic-bezier(.34, 1.56, .64, 1), box-shadow .22s ease, opacity .22s ease;
transform: scale(1.05) translateY(-4px);
box-shadow: 0 30px 70px -18px rgb(var(--ais-shadow-rgb) / 24%);
z-index: 5;
}
body:has(.ais-hero-banner) .work.clicked .frame img {
transform: scale(1.06);
}
body:has(.ais-hero-banner) .work.clicked .frame::before {
content: '';
position: absolute;
inset: 0;
z-index: 2;
pointer-events: none;
background: linear-gradient(120deg, transparent 30%, rgb(var(--ais-accent-rgb) / 35%) 50%, transparent 70%);
background-size: 280% 100%;
animation: wa-ais-shine .55s ease-out forwards;
}
@keyframes wa-ais-shine {
from { background-position: 140% 0; }
to { background-position: -140% 0; }
}
body:has(.ais-hero-banner) .work .badge {
position: absolute;
top: 10px;
left: 10px;
z-index: 3;
background: var(--ais-surface);
border: 1px solid var(--ais-border);
font-family: var(--ais-f-mono);
font-size: 8.5px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ais-label-accent);
padding: 3px 7px;
border-radius: var(--ais-radius);
opacity: 0;
transform: translateY(-4px);
transition: opacity .45s ease, transform .45s ease;
}
body:has(.ais-hero-banner) .work:hover .badge {
opacity: 1;
transform: none;
}
body:has(.ais-hero-banner) .work .mat {
padding: 14px;
position: relative;
flex: 0 0 auto;
width: 40%;
max-width: 170px;
display: flex;
align-items: center;
}
body:has(.ais-hero-banner) .work .frame {
position: relative;
background: var(--ais-frame-bg);
outline: 1px solid var(--ais-divider);
outline-offset: -1px;
overflow: hidden;
width: 100%;
transition: transform .35s cubic-bezier(.2, .8, .2, 1);
transform-style: preserve-3d;
}
body:has(.ais-hero-banner) .work .frame img {
display: block;
width: 100%;
height: auto;
transition: transform 1.3s cubic-bezier(.2, .8, .2, 1), filter .6s ease, opacity .9s ease;
opacity: 0;
filter: blur(8px);
}
body:has(.ais-hero-banner) .work .frame img.loaded {
opacity: 1;
filter: blur(0);
}
body:has(.ais-hero-banner) .work:hover .frame img {
transform: scale(1.04);
}
body:has(.ais-hero-banner) .work .frame::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
background: radial-gradient(circle at 50% 120%, rgb(var(--ais-accent-rgb) / 8%), transparent 60%);
opacity: 0;
transition: opacity .6s ease;
}
body:has(.ais-hero-banner) .work:hover .frame::after {
opacity: 1;
}
body:has(.ais-hero-banner) .work .body {
flex: 1 1 auto;
min-width: 0;
padding: 16px 18px 16px 6px;
display: flex;
flex-direction: column;
justify-content: center;
border-left: 1px solid var(--ais-divider);
}
body:has(.ais-hero-banner) .work .body .artist {
font-family: var(--ais-f-label);
font-weight: 600;
font-size: 11px;
letter-spacing: .1em;
text-transform: uppercase;
color: var(--ais-ink);
margin-bottom: 6px;
}
body:has(.ais-hero-banner) .work .body .title {
font-family: var(--ais-f-title);
font-style: italic;
font-size: 17px;
line-height: 1.25;
color: var(--ais-ink-2);
}
body:has(.ais-hero-banner) .work .body .meta {
font-family: var(--ais-f-mono);
font-size: 9.5px;
font-weight: 600;
letter-spacing: .12em;
text-transform: uppercase;
color: var(--ais-faint);
margin-top: 12px;
padding-top: 11px;
border-top: 1px solid var(--ais-divider);
}
body:has(.ais-hero-banner) .sentinel {
width: 100%;
height: 1px;
overflow: hidden;
opacity: 0;
pointer-events: none;
}
body:has(.ais-hero-banner) .feed.swapping {
animation: wa-ais-feed-out .35s ease forwards;
}
@keyframes wa-ais-feed-out {
to { opacity: 0; transform: translateY(10px); }
}
body:has(.ais-hero-banner) .feed.swap-in {
animation: wa-ais-feed-in .5s cubic-bezier(.2, .8, .2, 1);
}
@keyframes wa-ais-feed-in {
from { opacity: 0; transform: translateY(14px); }
to { opacity: 1; transform: none; }
}
@media (min-width: 992px) {
body:has(.ais-hero-banner) .stage.pinned .feed > .work-col {
flex: 0 0 50%;
max-width: 50%;
}
}
@media (max-width: 1100px) {
body:has(.ais-hero-banner) .stage.pinned {
grid-template-columns: 1fr;
}
body:has(.ais-hero-banner) .pinned-col {
position: relative;
top: 0;
}
}
@media (max-width: 991px) {
body:has(.ais-hero-banner) .stage.pinned .feed > .work-col {
flex: 0 0 100%;
max-width: 100%;
}
}
/* ===== TOP 100 PAGES (artists / artworks / museums / articles) ===== */
/* Brand voice: warm parchment surfaces, bronze accent, gilded-frame gold,
roasted-brown ink, Cormorant Garamond small-caps titles, Mulish body.
Structural/layout CSS lives in global-custom-V2.1.css; here we only set the
--top100-* tokens to the WahooArt palette and add brand-faithful overrides. */
/* ---- Token palette (inherited by all four page components) ---- */
.top100-artist-grid,
.top100-artwork-list {
--top100-card-bg: var(--wa-panel, #E8E4D9);
--top100-card-border: var(--wa-line, rgba(47, 42, 35, 0.16));
--top100-card-radius: 3px; /* UI-kit --r-sm */
--top100-ink: var(--wa-ink, #2F2A23);
--top100-muted: var(--wa-muted, #6F6555);
--top100-accent: var(--wa-bronze, #8A5D2B);
--top100-rank-color: rgba(176, 141, 78, 0.16); /* faint gilded-gold leaf */
}
/* =====================================================
A) ARTISTS PORTRAIT GRID (/en/wa/artists/top100/)
===================================================== */
.top100-artist-card {
background: var(--wa-sand, #E4DDC7);
border: 1px solid var(--wa-line, rgba(47, 42, 35, 0.16));
border-radius: 3px;
box-shadow: 0 1px 0 rgba(47, 42, 35, 0.03);
transition: border-color 0.18s ease, box-shadow 0.18s ease, transform 0.18s ease;
}
.top100-artist-card:hover {
border-color: var(--wa-gold-leaf, #B08D4E);
box-shadow: 0 6px 20px rgba(31, 25, 16, 0.14);
transform: translateY(-2px);
}
/* Circular portrait — gilded ring on hover */
.top100-artist-card__photo {
border: 2px solid var(--wa-line, rgba(47, 42, 35, 0.16));
box-shadow: inset 0 0 0 2px rgba(255, 255, 255, 0.4);
transition: border-color 0.18s ease;
}
.top100-artist-card:hover .top100-artist-card__photo {
border-color: var(--wa-gold-leaf, #B08D4E);
}
/* Artist name — serif small-caps, bronze on hover */
.top100-artist-card__name,
.top100-artist-card__name a {
font-family: var(--font-title, "Cormorant Garamond", serif);
font-variant: small-caps;
font-weight: 600;
letter-spacing: 0.02em;
color: var(--wa-ink, #2F2A23);
}
.top100-artist-card__name a:hover {
color: var(--wa-bronze, #8A5D2B);
}
/* Description — quiet Mulish muted */
.top100-artist-card__desc {
font-family: var(--font-body, "Mulish", sans-serif);
color: var(--wa-muted, #6F6555);
}
/* =====================================================
B) ARTWORKS ZIGZAG GALLERY (/en/wa/art/top100/)
===================================================== */
/* Giant rank number — gilded gold leaf, serif numerals */
.top100-artwork-card__rank {
font-family: var(--font-title, "Cormorant Garamond", serif);
font-weight: 700;
color: var(--wa-gold-leaf, #B08D4E);
opacity: 0.14;
}
/* Hover box — parchment card with gilded edge on hover only */
.top100-artwork-card__inner {
background: transparent;
border: 1px solid transparent;
border-radius: 3px;
transition: border-color 0.18s ease, box-shadow 0.18s ease, background-color 0.18s ease;
}
.top100-artwork-card:hover .top100-artwork-card__inner {
background: var(--wa-panel, #E8E4D9);
border-color: var(--wa-gold-leaf, #B08D4E);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.18);
}
/* Photo — base radius; framed variant gets the gilded museum frame */
.top100-artwork-card__photo {
border-radius: 2px;
}
.top100-artwork-card__photo--framed {
padding: 12px;
border-radius: 2px;
background: linear-gradient(135deg, #cbab6b, #9c7c40 45%, #caa965 70%, #86692f);
box-shadow: 0 10px 26px rgba(0, 0, 0, 0.22),
inset 0 0 0 2px rgba(255, 255, 255, 0.15);
}
/* Revealed meta details */
.top100-artwork-card__artist {
font-family: var(--font-body, "Mulish", sans-serif);
font-weight: 700;
letter-spacing: 0.13em;
text-transform: uppercase;
font-size: 0.68rem;
color: var(--wa-bronze, #8A5D2B);
}
.top100-artwork-card__year {
font-family: var(--font-body, "Mulish", sans-serif);
color: var(--wa-muted, #6F6555);
}
.top100-artwork-card__title,
.top100-artwork-card__title a {
font-family: var(--font-title, "Cormorant Garamond", serif);
font-style: italic;
font-weight: 500;
color: var(--wa-ink, #2F2A23);
}
.top100-artwork-card__title a:hover {
color: var(--wa-bronze, #8A5D2B);
}
/* =====================================================
C) MUSEUMS + ARTICLES LISTING (reuse .search_card)
(/en/wa/museums/top100/ and /en/wa/articles/top100/)
Scope ALL overrides under .top100-listing so the 24 other
pages that share bare .search_card are untouched.
===================================================== */
/* Thumbnail — subtle zoom contained by the card */
/* Card title — serif italic, bronze on hover */
/* Artist / by-line — eyebrow bronze caps */
/* Buy / Add-to-Cart — WahooArt btn-primary (bronze, white, tracked caps) */
/* ===== / TOP 100 PAGES — WahooArt ===== */
@media (max-width: 640px) {
body:has(.ais-hero-banner) .work {
flex-direction: column;
}
body:has(.ais-hero-banner) .work .mat {
width: 100%;
max-width: none;
}
body:has(.ais-hero-banner) .work .body {
border-left: none;
border-top: 1px solid var(--ais-divider);
padding: 16px 18px;
}
body:has(.ais-hero-banner) .plate .top {
flex-direction: column;
}
body:has(.ais-hero-banner) .plate .mat {
width: 100%;
max-width: none;
}
body:has(.ais-hero-banner) .plate .caption {
padding: 0 26px 22px;
}
}
/* ═══════════════════════════════════════════════════════════════════
WA — WahooArt — Similar artworks browse (/art/similar//)
Scoped to .artwork-similar-page — gallery-minimal tokens
═══════════════════════════════════════════════════════════════════ */
/* Page chrome — breadcrumb, title row, sort */
/* Criteria sidebar */
/* Grid cards: NO rules here on purpose — the cards are the shared
artwork_list_grid_item include and inherit the canonical WahooArt
"artwork-catalog-card" block (appended at end of file: panel surface,
bronze buy button, dark-roast hover overlay). Re-styling .search_card
under this scope would out-specify that block and break it. */
/* ===================================================================
Ecard (artworks/artwork_ecard.html) — WA WahooArt
Warm parchment + bronze, Baskervville SC serif headings, soft radius.
=================================================================== */
/* =====================================================
PrintReproduction & DigitalImage buy pages — article (historicle_box) typography
Structure lives in global-custom-V2.1.css; brand ink/links here.
===================================================== */
/* =====================================================
WA — Artwork buy / reproduction page (artwork_buy_ArtistReproduction)
Brand-override layer completing ADC reference coverage (5408–6519).
Structure lives in global-custom; WahooArt colours/identity here.
Scoped to .reproduction_main_page.
===================================================== */
/* ---- Action bar + cross-channel links (Buy print, Share, Favorites, …) ---- */
/* ---- Metadata chips (medium, movement, year, …) ---- */
/* ---- PDP titles — Cormorant serif (WA display) ---- */
/* ---- Accordion button typography — WA-2025 reference: capitalize, brown ink ---- */
/* ---- Configurator tabs (.reproduc_tabs nav-pills) — active = bronze underline ---- */
/* ---- Radios (size / frame / nameplate / options) — checked = bronze ---- */
/* ---- Frame selector cards ---- */
/* ---- Prices — surcharge tags / totals: ink + bold (WA UI Kit .price) ---- */
/* ---- Primary CTA (Add to cart) — bronze ---- */
/* ---- Read more / Read More — bronze text CTA ---- */
/* ---- Related articles — « Explore Article » CTA ---- */
/* ---- Art Quiz — WA dark card (UI Kit .card-quiz) on reproduction buy page ---- */
/* ---- Quiz CTA (academic block) ---- */
/* ---- Collections band (bottom of buy page) ---- */
/* ---- Digital Image — « Included in Every Digital Image Order » benefits band ---- */
/* ---- Related artworks slider — round band swiper buttons ---- */
/* ============================================================
Article detail page (article_detail.html) — WahooArt
Overrides the brand-neutral beige structure in global-custom
with WahooArt tokens: warm parchment surfaces, bronze accent,
token-driven type. Scoped under .article_main_page so other
page types are unaffected.
============================================================ */
/* Keyword tag pills */
/* Hero title + subtitle */
/* Body copy + headings + links */
/* Sidebar section headings */
/* Table of contents links */
/* Related-artworks sidebar */
/* Related-articles list */
/* ===== END Article detail page — WahooArt ===== */
/* ===== fts_search — model type badge (WA) ===== */
/* ===== artwork-catalog-card (catalog list grid card) ===== */
/*
Dedicated, self-contained styling for the catalog list grid card via the
new long companion classes. Mirrors the WahooArt UI Kit identity:
parchment/panel card surface, gilded gold hairline, serif-italic titles,
bronze eyebrow artist line, bronze primary buy button, dark-roast hover
overlay, gold-leaf favourite toggle. Scoped under .custom_search and
appended at end of file to win the cascade over the shared .search_card
rules. Tokens: --wa-panel, --wa-inset, --wa-ink, --wa-ink-soft, --wa-muted,
--wa-bronze, --wa-bronze-deep, --wa-gold-leaf, --font-title, --font-body.
*/
/* ---------- Card root ---------- */
/* No hover lift: a transform on :hover creates a stacking context that traps
the global hover panel's z-index under the next row of cards (looks cropped).
Hover behaviour = global default. */
/* ---------- Image wrapper + media link ---------- */
/* ---------- Image (Ken Burns hover zoom) ---------- */
/* ---------- Body (artist + title) ---------- */
/* ---------- Artist (eyebrow: sans 700, uppercase, tracked, bronze) ---------- */
/* Year / date inside the artist block */
/* ---------- Title (serif italic, ink) ---------- */
/* ---------- Hover overlay: GLOBAL DEFAULT (restored 2026-06-11) ----------
The former WA dark-roast overlay (absolute bottom over the image, with its
light snippet text / bronze buy button / gold fav toggle) was removed: the
hover must show the global beige panel UNDER the item, with the meta
description and the buy button styled by global CSS. */
/* Hover panel surface — match the card's parchment so the pop-out reads as the
same material as the card above it (no tonal step). */
/* Buy button — allow a long label to wrap onto a second line instead of being
forced to a single line (colours inherited from the global catalog style). */
/* Catalog list + category hub: hover panel matches the card :hover surface. */
/* ---------- Responsive ---------- */
@media (max-width: 575px) {
}
/* ===== / artwork-catalog-card (WahooArt) ===== */
/* ===== article_list.html — article list cards (article-list-card) ===== */
/* WahooArt UI-kit identity: warm parchment card, bronze accent eyebrow,
serif italic title, Mulish excerpt, bronze pill→square primary "Read" button.
Tokens: --wa-panel/--wa-parchment surfaces, --wa-bronze/--wa-bronze-deep accent,
--wa-ink/--wa-ink-soft/--wa-muted ink, --font-title (Cormorant) / --font-body (Mulish). */
/* Grid wrapper — layout comes from the Bootstrap .row>col-* in the markup
(same as the sibling artwork/museum/artist catalog lists). Do NOT set
display:grid: the grid's direct child is the .row wrapper, so a grid
container squeezes every card into one track. Only set the vertical gutter. */
/* Card surface — parchment panel, hairline border, soft radius + hover lift */
/* Media — image hover zoom */
/* Body padding */
/* Meta — category eyebrow (uppercase, bronze) + year span.
Global sets these via .search_sec.catalog-list-page ... .art-artist h2 a (~0,5,2)
and colours the eyebrow; we beat it with !important to lock brand bronze. */
/* Title — Cormorant serif italic, ink, bronze on hover.
Global targets .custom_search .search_card .art-title a (0,3,1); we exceed it. */
/* Hover panel — floats below card (global-custom positions it) */
/* Read button — brand PRIMARY button (bronze, uppercase, square radius) */
/* ===== END article_list.html — article list cards (WA) ===== */
/* ===== list-page filter sidebar + sort (artwork-list-page scope, shared by art/article/artist/museum lists) — WA ===== */
/* Sort chrome — ink/bronze text + serif/sans voice */
/* Filter panel shell */
/* Panel title + CLEAR ALL — WA-2025 ref: "Filters" is Baskervville SC serif */
/* Active-filter badges row */
/* Active-filter chip — WA-2025 ref .catalog-filter-sidebar__active-badge (#D5CBA9, DM Sans 15px, no border) */
/* Accordion sections */
/* Filter option values — WA-2025 ref (.catalog-sidebar-values-list li): all options are CHIPS
(bg #E8E2CD, 1px #CAC0AC border, DM Sans 14px, ink #3E342A). */
/* Hover — darken outline only (reference defines no hover fill) */
/* Active — WA-2025 ref .catalog-sidebar-values-list li.active (#E4DBBB fill, dark outline) */
/* Checkboxes / inputs / tag buttons */
/* Price range slider (noUiSlider) */
/* ===== END list-page filter sidebar + sort (artwork-list-page scope) — WA ===== */
/* ===== WA — Artists alphabet (group_by_alphabet / start_by_letter) ===== */
/*
Scoped under .art_info_section to avoid colliding with:
- start_by_letter.html (uses same .alphabet_box, .alpha_letter, .profile_* classes)
- user sidebar (.profile_name appears there too)
Specificity: (0,2,x) → (0,3,x) beats global-custom (0,1,x) rules.
All colors via var(--wa-*) with hex fallback; no raw color literals.
Tokens used:
--wa-bronze #8A5D2B — alpha border, letter color, profile-name link, view-more
--wa-bronze-deep #6F4A20 — hover/focus states
--wa-gold-leaf #B08D4E — last-child border-right, h4 letter heading
--wa-ink #2F2A23 — alpha-letter text (dark ink on hover bg)
--wa-ink-soft #463F35 — profile-name link default
--wa-muted #6F6555 — profile_year, view-more default text
--wa-sand #E4DDC7 — alpha-letter hover background
--font-title — Cormorant Garamond (serif)
--font-body — Mulish (sans)
*/
/* ── 1. Alphabet nav bar ── */
/* ── 2. Letter section heading ── */
/* ── 3. Artist profile card ── */
/* ── 4. View more link ── */
/* ===== END WA — Artists alphabet (group_by_alphabet / start_by_letter) ===== */
/* ===== photo_to_restyled_masterpiece ===== */
/* WahooArt identity — parchment surfaces · bronze accent · roasted-brown ink ·
Cormorant Garamond display + Mulish body. Brand tokens (--wa-*) live in :root.
Shared structure/layout is in global-custom under body.custom-repro-page;
here we only supply the three --pr-* tokens + brand skinning that would
otherwise fall back to non-brand defaults. */
/* ── Hero caption (kit: small-caps serif + script accent over dark band) ── */
/* ── Intro lead paragraph ── */
/* ── Step badges (kit: uppercase sans label on roast band) ── */
/* ── Step headings + body (kit: Cormorant display ink + Mulish body muted) ── */
/* ── Step 01: upload box (kit dropzone: dashed line-2, panel-2 inset) ── */
/* ── Step 02: edit-request textarea (kit field: panel-2 bg, line-2, bronze focus) ── */
/* ── Chips: edit-request examples + category filters
(kit chip-pill: sand bg, line-2 border, ink-soft text; bronze fill on active/hover) ── */
/* Active category chip — solid bronze */
/* Suppress any global center-out underline pseudo on these chips */
/* ── Step 04: style cards (kit gallery card: white, line border, r-sm) ── */
/* Category label (art-artist h2) — uppercase bronze eyebrow (kit .card-art .artist) */
/* Style name (art-title span) — italic Cormorant (kit .card-art .title) */
/* Card description (hover) */
/* ===== END photo_to_restyled_masterpiece ===== */
/* ===== museum_list (restyle8) — pagination active pill = brand accent =====
Overrides the generic global default (brown #875D2A) and the :first-child
grey (#858585). Scoped to .museum-list-page only; matches the card CTA. */
/* =====================================================
DigitalImage buy page — "Included in Every Digital Image Order"
premium benefits band — WahooArt tokens (overrides the ADC-gold
default in global-custom-V2.1.css). Layout mirrors ADC/OUA/WK.
===================================================== */
/* ===== search_by_color ===== */
/* brand accent on every checkbox in the page for consistency */
@media (max-width: 768px) {
}
/* ===== orders/art_consultation.html — step image offset shadow ===== */
/* WahooArt: warm gallery panel tone (UI Kit cream/gold). */
.step .step-image { --step-image-shadow: var(--wa-panel, #e8e4d9); }
/* ===== orders/art_consultation.html — WahooArt brand colours ===== */
/* Warm parchment · bronze accent · roasted-brown bands */
/* ===== /orders/art_consultation.html — WahooArt ===== */
/* ===== start_selling_* step-image shadow tint — WA · gilded gold-leaf wash ===== */
/* ===== orders/checkout ===== */
/* WahooArt: parchment surfaces, bronze accent, roasted-brown card headers,
Cormorant Garamond small-caps titles. Tokens from the WA UI Kit. */
/* Rebrand Bootstrap bg-dark (pure black) to the WA roasted-brown band. */
/* ===== viewcart — cart state tokens (WA) ===== */
:root {
--cart-placeholder-bg: var(--wa-inset, #F3EFE6);
--cart-placeholder-border: rgba(47, 42, 35, 0.14);
--cart-placeholder-icon: var(--wa-muted, #6F6555);
--cart-alert-warning-text: #6F4A20;
--cart-alert-warning-bg: #F7EFD9;
--cart-alert-warning-border: #D9B873;
--cart-alert-warning-accent: #B08D4E;
--cart-surface: var(--wa-form-surface, #F7F2E1);
--cart-surface-border: #DCD3BF;
--cart-inset: var(--wa-inset, #F3EFE6);
--cart-icon-bg: #E2DAC4;
--cart-summary-ink: var(--wa-ink, #2F2A23);
--cart-summary-ink-2: var(--wa-muted, #6F6555);
--cart-summary-accent: var(--wa-bronze, #8A5D2B);
--cart-th-bg: #C8BC9E;
--cart-th-color: var(--wa-ink, #2F2A23);
}
/* ===== collectible sell/edit — image upload + sales channels (restyle8) ===== */
@keyframes r8spin-wa { 0%{transform:rotate(0)} 100%{transform:rotate(360deg)} }
/* ===== customers_reviews — WA brand tokens (structure lives in global-custom) ===== */
/* ===== apr-thanks (art project request thank-you) =====
Tokens: --wa-panel #E8E4D9 (card bg) · --wa-inset #F3EFE6 (steps card bg)
· --wa-bronze #8A5D2B (accent) · --wa-bronze-deep #6F4A20 (hover)
· --wa-ink #2F2A23 (headings) · --wa-ink-soft #463F35 (body)
· --wa-muted #6F6555 (secondary) · --wa-gold-leaf #B08D4E (frame / border)
· --font-title Cormorant Garamond · --font-body Mulish
===================================================================== */
/* Section vertical rhythm */
/* --- Shared card surface --- */
/* Intro card: white surface with bronze top border, vertically centered content */
/* Steps card: parchment inset, left accent */
/* --- Card body padding; intro content centered --- */
/* --- Card title — must beat (0,3,0) from global-custom .col-md-6 .card .card-title --- */
/* --- Card body text --- */
/* --- Steps list: remove default bullets, add bronze diamond marker --- */
/* Bronze diamond bullet via pseudo-element */
/* --- Contact strip --- */
/* --- Responsive: stack cols on mobile, tighten padding --- */
@media (max-width: 767px) {
}
/* ===== Art Appraisal (body.art-appraisal-page) — WA ===== */
/* 1 · Hero caption over dark video */
/* 2 · Intro band */
/* 3 · Vertical connector */
/* 4 · Step pill */
/* 5 · Step headings & body text */
/* 7 · Pricing table */
/* 8 · Request form */
/* 6 · Step image shadow token consumer (if used by globals) */
/* ===== start_selling_* (body.start-selling-page) — WA · WahooArt ===== */
/* --- right CTA card "Start selling today" --- */
/* ===== Artwork Not Found Page ===== */
/* Page wrapper — parchment background from WA tokens */
/* Breadcrumb breadcrumb-navigation-list */
/* Card — WahooArt identity: warm sand panel, gold-leaf border, 3px radius */
/* Heading — Cormorant Garamond serif, WA ink, small-caps, ~30px */
/* Body content — Mulish, muted brown, ~17px */
/* Primary CTA — bronze bg, white text, uppercase tracked (UI Kit btn-primary) */
/* Secondary button — ghost style, bronze border/text (UI Kit btn-ghost / btn-corner) */
/* WA bottom bar — payment/copyright row (base_wahooart_bottom_bar.html) */
/* ===== wheel-of-affinities (similar artworks study plate) =====
WA identity: parchment plate, gilded gold-leaf frames, bronze accent,
Cormorant Garamond captions. Structure lives in global-custom-V2.1.css. */
/* ===== Catalog hover panel — align snippet + buy with the card body text =====
Card padding is reset globally; match __body 14px inset. */
/* Small-mobile (<=575.98px): body padding shrinks 4px here, so trim the hover
panel inset to match and keep the snippet/buy aligned with the body text. */
@media (max-width: 575.98px) {
}
/* artwork-catalog-card — footer buy + fav share one row height (legacy .card_bottom
centers children, leaving the fav chip shorter than the buy CTA). */
/* ===== WA — artworksimilarslider (artwork_similar_slider_section.html) ===== */
/* Artist name kicker hover color */
/* Artwork title link hover color */
/* ===== END WA — artworksimilarslider ===== */
/* ===== error_404.html + error_general.html — WahooArt ===== */
/*
Tokens: --lc #8A5D2B (bronze link) --wa-ink #2F2A23 --wa-ink-soft #463F35
--wa-parchment #FAF5EC --font-body Mulish sans
*/
/* 404 CTA ghost → outlined in WA bronze */
/* 404 CTA solid → warm bronze fill */
/* 404 CTA home → muted outline */
/* Title + lead */
/* Contact links */
/* Error-general card tint — warm parchment wash */
/* ===== /error_404.html + error_general.html — WahooArt ===== */
/* ===== Native Stripe checkout + payment received — WA brand tokens ===== */
/* ===== artwork_preview_in_interior_room — WahooArt tokens (structure in global-custom) ===== */
/* ===== artwork_buy_ProductAuction — auction tokens ===== */
:root {
--auction-accent: var(--wa-bronze, #875D2A);
--auction-accent-dark: #6f4a22;
--auction-accent-text: #ffffff;
--auction-ink: var(--wa-ink, #2F2A23);
--auction-ink-mute: var(--wa-ink-soft, #463F35);
}
/* ===== /artwork_buy_ProductAuction ===== */
/* =====================================================
Page side margins on non-large windows (WahooArt)
Below the large (xl) breakpoint — e.g. snapped quarter (1/4)
and half (2/4) windows — Bootstrap caps .container at a fixed
max-width (540/720/960px), leaving very wide empty side margins.
On WA we want the page content to use almost the full width with
only a small gutter at those sizes. Scoped to in-page
content so header/top-bar/footer containers are unaffected.
===================================================== */
@media (max-width: 1199.98px) {
main .container,
main .container-sm,
main .container-md,
main .container-lg,
main .container-xl {
max-width: 100%;
padding-left: 16px;
padding-right: 16px;
}
}
/* =====================================================
Dashboard feature spotlight — WahooArt brand tokens
(structure/animation in global-custom-V2.1.css)
===================================================== */