/* ============================================================
ARTBYBROWN.COM — COMPLETE CUSTOM CSS
Version 1.0 — June 2026
Breakpoints (matching SPPageBuilder):
XL = 1200px+ (desktop large)
LG = 992–1199px (desktop)
MD = 768–991px (tablet landscape)
SM = 576–767px (tablet portrait)
XS = 0–575px (mobile)
How to apply classes in SPPageBuilder:
→ Addon settings → Advanced tab → CSS Class field
→ Row settings → Advanced tab → CSS Class field
→ Column settings → Advanced tab → CSS Class field
============================================================ */
/* ============================================================
1. GOOGLE FONTS IMPORT
Add this to Joomla template — NOT here in Custom CSS
============================================================ */
/* ============================================================
2. CSS CUSTOM PROPERTIES (Design Tokens)
These variables are used by every rule below.
Change a value here and it updates everywhere.
============================================================ */
:root {
/* Background layers — darkest to lightest */
--ab-ink: #141210; /* page base background */
--ab-surface: #1e1a16; /* alternate section background */
--ab-card: #252018; /* card background */
--ab-lift: #2e2820; /* elevated card / shop tile */
--ab-border: #3c3428; /* all borders */
--ab-border-lt: #4a4035; /* lighter border / hover state */
/* Text colors */
--ab-bone: #ede7dc; /* primary text */
--ab-wlt: #a09388; /* secondary text */
--ab-wmid: #6e6258; /* muted / metadata text */
--ab-faint: #4a4035; /* very muted / placeholders */
/* Brand accent */
--ab-gold: #c49a3c; /* primary gold */
--ab-gold-lt: #d4ac4e; /* gold hover */
--ab-gold-dim: rgba(196,154,60,0.14); /* gold tint backgrounds */
--ab-gold-rule: rgba(196,154,60,0.25); /* gold divider lines */
/* Availability badge colors */
--ab-orig-bg: rgba(196,154,60,0.14);
--ab-orig-text: #c49a3c;
--ab-orig-border:rgba(196,154,60,0.35);
--ab-print-bg: rgba(100,165,120,0.10);
--ab-print-text: #7abf9a;
--ab-print-border:rgba(100,165,120,0.28);
/* Typography */
--ab-display: 'Cinzel', Georgia, serif; /* headings, titles */
--ab-serif: 'Cormorant Garamond', Georgia, serif; /* body, quotes, italic */
--ab-mono: 'DM Mono', 'Courier New', monospace; /* labels, nav, badges */
/* Spacing */
--ab-section-pad-xl: 88px;
--ab-section-pad-lg: 72px;
--ab-section-pad-md: 56px;
--ab-section-pad-sm: 44px;
--ab-section-pad-xs: 36px;
/* Transitions */
--ab-ease: cubic-bezier(0.25, 0.1, 0.25, 1);
--ab-ease-out: cubic-bezier(0, 0, 0.2, 1);
}
/* ============================================================
3. BASE / RESET
============================================================ */
*, *::before, *::after {
box-sizing: border-box;
}
body {
background-color: var(--ab-ink) !important;
color: var(--ab-bone) !important;
font-family: var(--ab-serif) !important;
font-size: 17px;
line-height: 1.65;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
margin: 0 !important;
}
.sppb-section,
.sppb-container-inner,
.sppb-row-container,
.sppb-row,
.sppb-col,
.sppb-column,
.sppb-addon,
.sppb-addon-wrapper,
.sppb-addon-content {
color: inherit !important;
}
/* Grain texture overlay — subtle film grain on the whole page */
body::after {
content: '';
position: fixed;
inset: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
opacity: 0.022;
pointer-events: none;
z-index: 9998;
}
/* Global heading font */
h1, h2, h3, h4, h5, h6,
.sppb-addon-title,
.sppb-heading {
font-family: var(--ab-display) !important;
font-weight: 400 !important;
color: var(--ab-bone) !important;
letter-spacing: 2px;
}
/* Global link reset */
a { color: var(--ab-gold); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--ab-gold-lt); }
/* Remove SPPageBuilder default row/column padding we'll control ourselves */
.sppb-section { margin-bottom: 0 !important; }
/* ============================================================
4. NAVIGATION
Applied via Helix Ultimate template settings + Custom CSS.
The nav is a Joomla menu module — NOT built in SPPageBuilder.
============================================================ */
/* -- Nav wrapper -- */
#sp-header {
position: sticky !important;
top: 0;
z-index: 9999;
background: rgba(20,18,16,0.96) !important;
backdrop-filter: blur(20px) saturate(1.4);
-webkit-backdrop-filter: blur(20px) saturate(1.4);
border-bottom: 1px solid rgba(196,154,60,0.15) !important;
width: 100%;
}
#sp-header .container-inner {
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 64px;
height: 74px;
}
/* -- Logo / wordmark -- */
.ab-nav-brand {
display: flex;
flex-direction: column;
gap: 1px;
flex-shrink: 0;
}
.ab-nav-brand-sub {
font-family: var(--ab-mono);
font-size: 8px;
letter-spacing: 5px;
text-transform: uppercase;
color: var(--ab-gold);
opacity: 0.85;
display: block;
}
.ab-nav-brand-name {
font-family: var(--ab-display);
font-size: 16px;
letter-spacing: 3px;
color: var(--ab-bone);
line-height: 1;
display: block;
}
/* -- Nav links (desktop) -- */
#sp-header .mod-menu {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: 40px;
}
#sp-header .mod-menu li a {
font-family: var(--ab-mono) !important;
font-size: 10px !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
color: var(--ab-wlt) !important;
text-decoration: none !important;
transition: color 0.2s !important;
padding: 0 !important;
border: none !important;
background: none !important;
}
#sp-header .mod-menu li a:hover {
color: var(--ab-gold) !important;
}
/* -- Shop button in nav -- */
#sp-header .mod-menu li.ab-nav-shop a,
#sp-header .mod-menu li:last-child a {
font-family: var(--ab-mono) !important;
font-size: 10px !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
padding: 9px 20px !important;
border: 1px solid var(--ab-gold) !important;
color: var(--ab-gold) !important;
border-radius: 2px !important;
background: transparent !important;
transition: background 0.2s, color 0.2s !important;
}
#sp-header .mod-menu li.ab-nav-shop a:hover,
#sp-header .mod-menu li:last-child a:hover {
background: var(--ab-gold) !important;
color: var(--ab-ink) !important;
}
/* -- Mobile hamburger — Helix Ultimate handles the toggle,
we just style the colors -- */
.sp-megamenu-wrapper .sp-menu-btn {
color: var(--ab-bone) !important;
}
/* Mobile nav overlay */
.sp-offcanvas {
background: rgba(20,18,16,0.98) !important;
}
.sp-offcanvas .mod-menu li a {
font-family: var(--ab-display) !important;
font-size: 28px !important;
letter-spacing: 3px !important;
color: var(--ab-bone) !important;
border-bottom: 1px solid var(--ab-border) !important;
padding: 14px 0 !important;
}
.sp-offcanvas .mod-menu li a:hover {
color: var(--ab-gold) !important;
padding-left: 8px !important;
}
/* -- Nav responsive -- */
@media (max-width: 991px) {
#sp-header .container-inner {
padding: 0 24px;
height: 62px;
}
.ab-nav-brand-name { font-size: 14px; }
.ab-nav-brand-sub { font-size: 7px; letter-spacing: 4px; }
}
@media (max-width: 575px) {
#sp-header .container-inner {
padding: 0 16px;
height: 56px;
}
}
/* ============================================================
5. GOLD DIVIDER LINE
SPPageBuilder class: ab-gold-rule
Use: Divider addon → set CSS class to "ab-gold-rule"
============================================================ */
.ab-gold-rule,
.ab-gold-rule .sppb-hr {
border: none !important;
height: 1px !important;
background: linear-gradient(
90deg,
transparent,
var(--ab-gold-rule),
transparent
) !important;
margin: 0 !important;
opacity: 1 !important;
}
/* ============================================================
6. SECTION BACKGROUNDS
SPPageBuilder class on ROW: ab-bg-ink / ab-bg-surface / ab-bg-lift
Use: Row settings → Background → Color, OR
Row settings → Advanced → CSS Class
============================================================ */
.ab-bg-ink { background-color: var(--ab-ink) !important; }
.ab-bg-surface { background-color: var(--ab-surface) !important; }
.ab-bg-lift { background-color: var(--ab-lift) !important; }
.ab-bg-card { background-color: var(--ab-card) !important; }
/* ============================================================
7. SECTION PADDING CLASSES
SPPageBuilder class on ROW: ab-sec
Controls vertical padding at every breakpoint.
============================================================ */
.ab-sec {
padding-top: var(--ab-section-pad-xl) !important;
padding-bottom: var(--ab-section-pad-xl) !important;
}
@media (max-width: 1199px) {
.ab-sec {
padding-top: var(--ab-section-pad-lg) !important;
padding-bottom: var(--ab-section-pad-lg) !important;
}
}
@media (max-width: 991px) {
.ab-sec {
padding-top: var(--ab-section-pad-md) !important;
padding-bottom: var(--ab-section-pad-md) !important;
}
}
@media (max-width: 767px) {
.ab-sec {
padding-top: var(--ab-section-pad-sm) !important;
padding-bottom: var(--ab-section-pad-sm) !important;
}
}
@media (max-width: 575px) {
.ab-sec {
padding-top: var(--ab-section-pad-xs) !important;
padding-bottom: var(--ab-section-pad-xs) !important;
}
}
/* Tighter padding for header/footer of sections */
.ab-sec-tight {
padding-top: 24px !important;
padding-bottom: 24px !important;
}
/* ============================================================
8. TYPOGRAPHY CLASSES
Apply these to Text and Heading addons via CSS Class field.
============================================================ */
/* -- Eyebrow label (monospace, gold, uppercase, small) -- */
/* SPPageBuilder: Text addon → CSS Class: ab-eyebrow */
.ab-eyebrow,
.ab-eyebrow p,
.ab-eyebrow span {
font-family: var(--ab-mono) !important;
font-size: 10px !important;
letter-spacing: 5px !important;
text-transform: uppercase !important;
color: var(--ab-gold) !important;
display: flex !important;
align-items: center !important;
gap: 12px !important;
margin-bottom: 20px !important;
}
/* Gold dash before eyebrow text */
.ab-eyebrow::before {
content: '' !important;
display: block !important;
width: 24px !important;
height: 1px !important;
background: var(--ab-gold) !important;
flex-shrink: 0 !important;
}
@media (max-width: 575px) {
.ab-eyebrow, .ab-eyebrow p, .ab-eyebrow span {
font-size: 9px !important;
letter-spacing: 4px !important;
margin-bottom: 14px !important;
}
}
/* -- Section number (01, 02, etc.) -- */
/* SPPageBuilder: Text addon → CSS Class: ab-sec-n */
.ab-sec-n,
.ab-sec-n p,
.ab-sec-n span {
font-family: var(--ab-mono) !important;
font-size: 10px !important;
letter-spacing: 4px !important;
color: var(--ab-gold) !important;
opacity: 0.6 !important;
padding-bottom: 3px !important;
margin: 0 !important;
}
/* -- Section title (large Cinzel heading) -- */
/* SPPageBuilder: Heading addon → CSS Class: ab-sec-title */
.ab-sec-title,
.ab-sec-title .sppb-addon-title {
font-family: var(--ab-display) !important;
font-weight: 400 !important;
letter-spacing: 3px !important;
color: var(--ab-bone) !important;
line-height: 1 !important;
margin: 0 !important;
}
/* Responsive sizes */
.ab-sec-title .sppb-addon-title { font-size: clamp(26px, 2.8vw, 40px) !important; }
@media (max-width: 767px) {
.ab-sec-title .sppb-addon-title { font-size: 24px !important; }
}
@media (max-width: 575px) {
.ab-sec-title .sppb-addon-title { font-size: 22px !important; }
}
/* -- Hero headline (very large display) -- */
/* SPPageBuilder: Heading addon → CSS Class: ab-hero-title */
.ab-hero-title .sppb-addon-title {
font-family: var(--ab-display) !important;
font-size: clamp(52px, 5.5vw, 88px) !important;
font-weight: 400 !important;
line-height: 0.97 !important;
letter-spacing: 2px !important;
color: var(--ab-bone) !important;
margin-bottom: 10px !important;
}
@media (max-width: 991px) {
.ab-hero-title .sppb-addon-title { font-size: clamp(44px, 6vw, 72px) !important; }
}
@media (max-width: 767px) {
.ab-hero-title .sppb-addon-title { font-size: 52px !important; }
}
@media (max-width: 575px) {
.ab-hero-title .sppb-addon-title { font-size: 42px !important; }
}
/* -- Hero title italic part (gold) -- */
/* Wrap "Ray Brown." in a tag inside the heading addon */
.ab-hero-title .sppb-addon-title em {
font-style: italic !important;
font-family: var(--ab-serif) !important;
color: var(--ab-gold-lt) !important;
font-weight: 300 !important;
font-size: 1.06em !important;
}
/* -- Pull quote / italic subheading -- */
/* SPPageBuilder: Text addon → CSS Class: ab-pull */
.ab-pull,
.ab-pull p {
font-family: var(--ab-serif) !important;
font-size: 19px !important;
font-style: italic !important;
color: var(--ab-wlt) !important;
line-height: 1.65 !important;
font-weight: 300 !important;
margin-bottom: 16px !important;
}
@media (max-width: 767px) {
.ab-pull, .ab-pull p { font-size: 17px !important; }
}
@media (max-width: 575px) {
.ab-pull, .ab-pull p { font-size: 16px !important; }
}
/* -- Body text -- */
/* SPPageBuilder: Text addon → CSS Class: ab-body */
.ab-body,
.ab-body p {
font-family: var(--ab-serif) !important;
font-size: 16px !important;
color: var(--ab-wmid) !important;
line-height: 1.8 !important;
margin-bottom: 14px !important;
}
@media (max-width: 575px) {
.ab-body, .ab-body p { font-size: 15px !important; }
}
/* -- Metadata text (dimensions, medium, series) -- */
/* SPPageBuilder: Text addon → CSS Class: ab-meta */
.ab-meta,
.ab-meta p,
.ab-meta span {
font-family: var(--ab-mono) !important;
font-size: 9px !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
color: var(--ab-wmid) !important;
line-height: 1.6 !important;
margin: 3px 0 0 !important;
}
/* -- Series label (gold, mono, small) -- */
/* SPPageBuilder: Text addon → CSS Class: ab-series */
.ab-series,
.ab-series p,
.ab-series span {
font-family: var(--ab-mono) !important;
font-size: 9px !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
color: var(--ab-gold) !important;
opacity: 0.75 !important;
margin: 2px 0 0 !important;
display: block !important;
}
/* -- "View All →" style link -- */
/* SPPageBuilder: Text addon → CSS Class: ab-view-all */
.ab-view-all,
.ab-view-all a,
.ab-view-all p {
font-family: var(--ab-mono) !important;
font-size: 10px !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
color: var(--ab-gold) !important;
white-space: nowrap !important;
opacity: 0.85 !important;
text-decoration: none !important;
border-bottom: 1px solid transparent !important;
transition: border-color 0.2s !important;
}
.ab-view-all:hover,
.ab-view-all a:hover {
border-bottom-color: var(--ab-gold) !important;
opacity: 1 !important;
}
/* -- Medium/style tags row -- */
/* SPPageBuilder: Text addon → CSS Class: ab-tags */
/* Put individual tag spans inside the text addon */
.ab-tags {
display: flex !important;
flex-wrap: wrap !important;
gap: 8px !important;
margin-top: 6px !important;
margin-bottom: 28px !important;
}
.ab-tag {
font-family: var(--ab-mono) !important;
font-size: 8px !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
padding: 5px 12px !important;
border: 1px solid var(--ab-border-lt) !important;
color: var(--ab-wmid) !important;
border-radius: 2px !important;
display: inline-block !important;
}
/* -- Stat row (40+ Works, 7 Collections, 2007) -- */
/* SPPageBuilder: Text addon → CSS Class: ab-stat-row */
.ab-stat-row {
display: flex !important;
gap: 44px !important;
padding-top: 32px !important;
border-top: 1px solid var(--ab-border) !important;
margin-top: 4px !important;
flex-wrap: wrap !important;
}
.ab-stat-n {
font-family: var(--ab-display) !important;
font-size: 34px !important;
color: var(--ab-gold) !important;
display: block !important;
line-height: 1 !important;
margin-bottom: 4px !important;
}
.ab-stat-l {
font-family: var(--ab-mono) !important;
font-size: 9px !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
color: var(--ab-wmid) !important;
display: block !important;
}
@media (max-width: 575px) {
.ab-stat-row { gap: 28px !important; padding-top: 24px !important; }
.ab-stat-n { font-size: 28px !important; }
}
/* -- Section header row (number + title left, view-all right) -- */
/* SPPageBuilder: Row → CSS Class: ab-sec-header-row */
.ab-sec-header-row {
display: flex !important;
align-items: flex-end !important;
justify-content: space-between !important;
padding-bottom: 16px !important;
border-bottom: 1px solid var(--ab-border) !important;
margin-bottom: 36px !important;
gap: 16px !important;
flex-wrap: wrap !important;
}
.ab-sec-header-left {
display: flex !important;
align-items: flex-end !important;
gap: 14px !important;
}
/* ============================================================
9. BUTTONS
Apply to Button addons via CSS Class field.
============================================================ */
/* -- Primary: gold fill -- */
/* SPPageBuilder: Button addon → CSS Class: ab-btn-gold */
.ab-btn-gold .sppb-btn,
.ab-btn-gold a {
font-family: var(--ab-mono) !important;
font-size: 10px !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
padding: 14px 30px !important;
background: var(--ab-gold) !important;
color: var(--ab-ink) !important;
border: none !important;
border-radius: 2px !important;
font-weight: 500 !important;
transition: background 0.2s, transform 0.15s !important;
display: inline-block !important;
text-decoration: none !important;
}
.ab-btn-gold .sppb-btn:hover,
.ab-btn-gold a:hover {
background: var(--ab-gold-lt) !important;
transform: translateY(-1px) !important;
color: var(--ab-ink) !important;
}
/* -- Secondary: ghost / outline -- */
/* SPPageBuilder: Button addon → CSS Class: ab-btn-ghost */
.ab-btn-ghost .sppb-btn,
.ab-btn-ghost a {
font-family: var(--ab-mono) !important;
font-size: 10px !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
padding: 14px 30px !important;
background: transparent !important;
color: var(--ab-wlt) !important;
border: 1px solid var(--ab-border-lt) !important;
border-radius: 2px !important;
transition: border-color 0.2s, color 0.2s !important;
display: inline-block !important;
text-decoration: none !important;
}
.ab-btn-ghost .sppb-btn:hover,
.ab-btn-ghost a:hover {
border-color: var(--ab-bone) !important;
color: var(--ab-bone) !important;
}
/* -- Inline text link style -- */
/* SPPageBuilder: Button addon → CSS Class: ab-btn-link */
.ab-btn-link .sppb-btn,
.ab-btn-link a {
font-family: var(--ab-mono) !important;
font-size: 10px !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
padding: 0 !important;
background: transparent !important;
color: var(--ab-gold) !important;
border: none !important;
border-bottom: 1px solid transparent !important;
border-radius: 0 !important;
transition: border-color 0.2s !important;
}
.ab-btn-link .sppb-btn:hover,
.ab-btn-link a:hover {
border-bottom-color: var(--ab-gold) !important;
}
/* -- Button group row -- */
/* SPPageBuilder: Row → CSS Class: ab-btn-row */
.ab-btn-row {
display: flex !important;
gap: 12px !important;
flex-wrap: wrap !important;
margin-bottom: 48px !important;
}
@media (max-width: 575px) {
.ab-btn-row {
flex-direction: column !important;
gap: 10px !important;
margin-bottom: 36px !important;
}
.ab-btn-row .ab-btn-gold .sppb-btn,
.ab-btn-row .ab-btn-ghost .sppb-btn {
width: 100% !important;
text-align: center !important;
}
}
/* ============================================================
10. AVAILABILITY BADGES
Apply to Text addons via CSS Class field.
Place as an absolutely positioned addon inside the image
column, or as a text block above the title.
============================================================ */
/* -- Original Available -- */
/* SPPageBuilder: Text addon → CSS Class: ab-badge-orig */
.ab-badge-orig,
.ab-badge-orig p,
.ab-badge-orig span {
font-family: var(--ab-mono) !important;
font-size: 8px !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
padding: 3px 10px !important;
background: var(--ab-orig-bg) !important;
color: var(--ab-orig-text) !important;
border: 1px solid var(--ab-orig-border) !important;
border-radius: 2px !important;
display: inline-block !important;
margin-bottom: 6px !important;
}
/* -- Prints Available -- */
/* SPPageBuilder: Text addon → CSS Class: ab-badge-print */
.ab-badge-print,
.ab-badge-print p,
.ab-badge-print span {
font-family: var(--ab-mono) !important;
font-size: 8px !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
padding: 3px 10px !important;
background: var(--ab-print-bg) !important;
color: var(--ab-print-text) !important;
border: 1px solid var(--ab-print-border) !important;
border-radius: 2px !important;
display: inline-block !important;
margin-bottom: 6px !important;
}
/* -- Sold -- */
/* SPPageBuilder: Text addon → CSS Class: ab-badge-sold */
.ab-badge-sold,
.ab-badge-sold p,
.ab-badge-sold span {
font-family: var(--ab-mono) !important;
font-size: 8px !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
padding: 3px 10px !important;
background: rgba(100,100,100,0.10) !important;
color: var(--ab-wmid) !important;
border: 1px solid var(--ab-border) !important;
border-radius: 2px !important;
display: inline-block !important;
margin-bottom: 6px !important;
}
/* ============================================================
11. HERO SECTION
SPPageBuilder Row CSS Class: ab-hero
This is a full-viewport-height row with a 2-column layout.
On mobile: use SPPageBuilder's column visibility to show a
stacked version (painting on top, text below).
============================================================ */
.ab-hero {
min-height: 100vh !important;
position: relative !important;
overflow: hidden !important;
}
/* Left column (text content) */
.ab-hero-left {
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
padding: 80px 64px 80px !important;
background: linear-gradient(
145deg,
var(--ab-ink) 0%,
#1a1612 100%
) !important;
min-height: 100vh !important;
}
/* Right column (painting) */
.ab-hero-right {
position: relative !important;
overflow: hidden !important;
background: var(--ab-surface) !important;
min-height: 100vh !important;
}
/* The image inside the right column fills the full area */
.ab-hero-right .sppb-addon-image img,
.ab-hero-right img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
object-position: center top !important;
position: absolute !important;
inset: 0 !important;
}
/* Subtle gradient over painting left edge */
.ab-hero-right::after {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(
to right,
rgba(20,18,16,0.3) 0%,
transparent 40%
) !important;
pointer-events: none !important;
z-index: 1 !important;
}
/* Caption under painting */
.ab-hero-caption {
position: absolute !important;
bottom: 24px !important;
left: 0 !important;
right: 0 !important;
text-align: center !important;
z-index: 2 !important;
}
.ab-hero-caption-title {
font-family: var(--ab-serif) !important;
font-size: 14px !important;
font-style: italic !important;
color: var(--ab-wlt) !important;
display: block !important;
}
.ab-hero-caption-meta {
font-family: var(--ab-mono) !important;
font-size: 9px !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
color: var(--ab-wmid) !important;
margin-top: 3px !important;
display: block !important;
}
/* ── MOBILE HERO STRATEGY ──
SPPageBuilder approach:
1. The desktop 2-column hero: set hidden_md=1, hidden_sm=1, hidden_xs=1
2. Create a separate MOBILE hero row below it: hidden_xl=1, hidden_lg=1
The mobile hero row has:
- Full-width single column
- Background image = the painting (full bleed, object-fit cover)
- Text content overlaid at bottom using SPPageBuilder's
absolute positioning or a gradient overlay column
*/
/* Mobile hero (the separate mobile-only row) */
.ab-hero-mobile {
position: relative !important;
min-height: 100vh !important;
overflow: hidden !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
}
/* Set the row background image to the painting in SPPageBuilder
Row settings → Background → Image → [upload painting]
Background size: cover, position: center top, attachment: scroll */
.ab-hero-mobile::after {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(
to top,
rgba(20,18,16,1.0) 0%,
rgba(20,18,16,0.65) 40%,
rgba(20,18,16,0.1) 75%,
transparent 100%
) !important;
z-index: 0 !important;
pointer-events: none !important;
}
/* Content sits above the gradient */
.ab-hero-mobile .sppb-col-md-12 {
position: relative !important;
z-index: 1 !important;
padding: 0 20px 28px !important;
}
/* Stat bar on mobile — sits below the hero */
.ab-stat-bar-mobile {
display: flex !important;
justify-content: space-between !important;
padding: 14px 20px !important;
background: rgba(30,26,22,0.96) !important;
border-top: 1px solid rgba(196,154,60,0.12) !important;
}
/* ============================================================
12. COLLECTIONS GRID
============================================================ */
/* -- Collection card -- */
/* SPPageBuilder: use Image Overlay addon or Raw HTML per card
CSS Class on the column: ab-coll-card */
.ab-coll-card {
position: relative !important;
overflow: hidden !important;
cursor: pointer !important;
display: block !important;
}
.ab-coll-card img {
width: 100% !important;
aspect-ratio: 3/4 !important;
object-fit: cover !important;
display: block !important;
transition: transform 0.5s var(--ab-ease) !important;
}
.ab-coll-card.wide img {
aspect-ratio: 3/2 !important;
}
.ab-coll-card:hover img {
transform: scale(1.04) !important;
}
/* Overlay gradient */
.ab-coll-overlay {
position: absolute !important;
inset: 0 !important;
background: linear-gradient(
to top,
rgba(20,18,16,0.95) 0%,
rgba(20,18,16,0.25) 55%,
transparent 100%
) !important;
display: flex !important;
flex-direction: column !important;
justify-content: flex-end !important;
padding: 22px !important;
opacity: 0.75 !important;
transition: opacity 0.3s !important;
}
.ab-coll-card:hover .ab-coll-overlay {
opacity: 1 !important;
}
.ab-coll-name {
font-family: var(--ab-display) !important;
font-size: 20px !important;
letter-spacing: 2px !important;
color: var(--ab-bone) !important;
margin-bottom: 5px !important;
line-height: 1.1 !important;
}
.ab-coll-count {
font-family: var(--ab-mono) !important;
font-size: 9px !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
color: var(--ab-gold) !important;
}
/* -- Collections horizontal scroll on mobile -- */
/* SPPageBuilder: Row → CSS Class: ab-coll-scroll-row */
/* On mobile, the 4-column grid becomes a horizontal scroll */
@media (max-width: 767px) {
.ab-coll-scroll-row .sppb-row {
display: flex !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory !important;
-webkit-overflow-scrolling: touch !important;
gap: 10px !important;
padding-bottom: 16px !important;
flex-wrap: nowrap !important;
}
.ab-coll-scroll-row .sppb-row::-webkit-scrollbar { display: none !important; }
.ab-coll-scroll-row .sppb-col-md-3,
.ab-coll-scroll-row [class*="sppb-col-"] {
flex: 0 0 180px !important;
max-width: 180px !important;
scroll-snap-align: start !important;
}
.ab-coll-card img { aspect-ratio: 3/4 !important; }
.ab-coll-name { font-size: 14px !important; }
}
@media (max-width: 575px) {
.ab-coll-scroll-row .sppb-col-md-3,
.ab-coll-scroll-row [class*="sppb-col-"] {
flex: 0 0 160px !important;
max-width: 160px !important;
}
}
/* Scroll hint text — shown only on mobile */
/* SPPageBuilder: Text addon → CSS Class: ab-scroll-hint */
/* Set this addon as hidden_xl=1, hidden_lg=1 so desktop doesn't show it */
.ab-scroll-hint,
.ab-scroll-hint p {
font-family: var(--ab-mono) !important;
font-size: 8px !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
color: var(--ab-wmid) !important;
padding: 0 20px !important;
margin-top: 8px !important;
}
.ab-scroll-hint::after {
content: ' →' !important;
color: var(--ab-gold) !important;
opacity: 0.6 !important;
}
/* ============================================================
13. ART / PAINTING CARDS (Gallery Grid)
============================================================ */
/* -- Painting card wrapper -- */
/* SPPageBuilder: Column → CSS Class: ab-art-card */
.ab-art-card {
cursor: pointer !important;
transition: transform 0.3s var(--ab-ease) !important;
}
.ab-art-card:hover {
transform: translateY(-4px) !important;
}
/* -- Painting image -- */
/* SPPageBuilder: Image addon inside card column → CSS Class: ab-art-img */
.ab-art-img img {
width: 100% !important;
display: block !important;
background: var(--ab-lift) !important;
border: 1px solid var(--ab-border) !important;
transition: box-shadow 0.3s !important;
}
.ab-art-card:hover .ab-art-img img {
box-shadow: 0 20px 56px rgba(0,0,0,0.75) !important;
}
/* Painting aspect ratios — apply to the Image addon column */
.ab-r-tall { aspect-ratio: 2/3 !important; }
.ab-r-port { aspect-ratio: 3/4 !important; }
.ab-r-sq { aspect-ratio: 1/1 !important; }
.ab-r-slim { aspect-ratio: 1/3 !important; }
.ab-r-wide { aspect-ratio: 5/3 !important; }
.ab-r-tall img, .ab-r-port img, .ab-r-sq img,
.ab-r-slim img, .ab-r-wide img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
}
/* -- Art card action buttons (View / Buy) -- */
/* These sit at the bottom of the image using Raw HTML addon
or an absolutely-positioned SPPageBuilder column */
/* SPPageBuilder: Raw HTML → CSS Class: ab-art-actions */
.ab-art-actions {
display: flex !important;
opacity: 0 !important;
transform: translateY(6px) !important;
transition: opacity 0.25s, transform 0.25s !important;
position: relative !important;
}
.ab-art-card:hover .ab-art-actions {
opacity: 1 !important;
transform: translateY(0) !important;
}
.ab-art-btn-view,
.ab-art-btn-buy {
flex: 1 !important;
padding: 10px 8px !important;
font-family: var(--ab-mono) !important;
font-size: 9px !important;
letter-spacing: 2px !important;
text-transform: uppercase !important;
text-align: center !important;
text-decoration: none !important;
font-weight: 500 !important;
display: block !important;
}
.ab-art-btn-view {
background: rgba(20,18,16,0.93) !important;
color: var(--ab-bone) !important;
border: 1px solid var(--ab-border) !important;
}
.ab-art-btn-buy {
background: var(--ab-gold) !important;
color: var(--ab-ink) !important;
}
.ab-art-btn-buy:hover { background: var(--ab-gold-lt) !important; }
/* -- Art card title -- */
/* SPPageBuilder: Text addon → CSS Class: ab-art-title */
.ab-art-title,
.ab-art-title p {
font-family: var(--ab-serif) !important;
font-size: 15px !important;
font-style: italic !important;
color: var(--ab-bone) !important;
display: block !important;
margin-bottom: 3px !important;
font-weight: 300 !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
/* -- Load More link -- */
/* SPPageBuilder: Button or Text addon → CSS Class: ab-load-more */
.ab-load-more,
.ab-load-more a {
display: flex !important;
align-items: center !important;
justify-content: center !important;
padding: 13px !important;
border: 1px solid var(--ab-border-lt) !important;
font-family: var(--ab-mono) !important;
font-size: 9px !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
color: var(--ab-wlt) !important;
text-decoration: none !important;
transition: border-color 0.2s, color 0.2s !important;
margin-top: 20px !important;
}
.ab-load-more:hover,
.ab-load-more a:hover {
border-color: var(--ab-gold) !important;
color: var(--ab-gold) !important;
}
/* -- Gallery grid responsive --
Desktop: 4 columns (SPPageBuilder default col-md-3)
Tablet landscape (MD): 3 columns
Tablet portrait (SM): 2 columns
Mobile (XS): 2 columns
SPPageBuilder handles column width changes natively —
set your column widths per breakpoint in the column settings.
These rules handle any overflow/gap adjustments. */
@media (max-width: 991px) {
.ab-art-title, .ab-art-title p { font-size: 14px !important; }
.ab-art-actions { opacity: 1 !important; transform: translateY(0) !important; }
}
@media (max-width: 575px) {
.ab-art-title, .ab-art-title p {
font-size: 13px !important;
white-space: normal !important;
overflow: visible !important;
}
.ab-load-more { margin-top: 14px !important; }
}
/* Featured card — spans full width on mobile */
/* SPPageBuilder: Column → CSS Class: ab-art-featured */
@media (max-width: 767px) {
.ab-art-featured {
width: 100% !important;
flex: 0 0 100% !important;
max-width: 100% !important;
}
.ab-art-featured .ab-r-port,
.ab-art-featured img {
aspect-ratio: 3/2 !important;
}
}
/* ============================================================
14. ABOUT STRIP
============================================================ */
/* -- Artist photo -- */
/* SPPageBuilder: Image addon → CSS Class: ab-artist-photo */
.ab-artist-photo {
position: relative !important;
}
.ab-artist-photo img {
width: 100% !important;
aspect-ratio: 4/5 !important;
object-fit: cover !important;
object-position: center top !important;
display: block !important;
border: 1px solid var(--ab-border) !important;
}
/* Decorative offset border */
.ab-artist-photo::after {
content: '' !important;
position: absolute !important;
bottom: -16px !important;
right: -16px !important;
width: 76% !important;
height: 76% !important;
border: 1px solid rgba(196,154,60,0.1) !important;
z-index: -1 !important;
pointer-events: none !important;
}
@media (max-width: 767px) {
.ab-artist-photo::after { display: none !important; }
.ab-artist-photo img { aspect-ratio: 4/3 !important; }
}
/* -- About section two-column layout on mobile:
SPPageBuilder column order matters.
On tablet portrait and mobile, set the photo column to
display first using SPPageBuilder's "tablet_order" and
"mobile_order" column settings.
Photo = order 1, Text = order 2 on all sizes. -- */
/* ============================================================
15. SHOP TEASER / PRODUCT TYPE CARDS
============================================================ */
/* SPPageBuilder: Column → CSS Class: ab-prod-card */
/* Or use Feature Box addon with class ab-prod-feature */
.ab-prod-card {
background: var(--ab-surface) !important;
border: 1px solid var(--ab-border) !important;
padding: 32px 24px !important;
display: block !important;
text-decoration: none !important;
transition: border-color 0.2s, transform 0.2s !important;
height: 100% !important;
}
.ab-prod-card:hover {
border-color: var(--ab-gold) !important;
transform: translateY(-2px) !important;
}
.ab-prod-icon {
font-size: 20px !important;
color: var(--ab-gold) !important;
opacity: 0.45 !important;
display: block !important;
margin-bottom: 16px !important;
}
.ab-prod-name {
font-family: var(--ab-display) !important;
font-size: 17px !important;
letter-spacing: 2px !important;
color: var(--ab-bone) !important;
display: block !important;
margin-bottom: 8px !important;
}
.ab-prod-desc {
font-family: var(--ab-serif) !important;
font-size: 13px !important;
font-style: italic !important;
color: var(--ab-wmid) !important;
line-height: 1.6 !important;
display: block !important;
font-weight: 300 !important;
}
.ab-prod-price {
font-family: var(--ab-mono) !important;
font-size: 10px !important;
letter-spacing: 3px !important;
color: var(--ab-gold) !important;
margin-top: 14px !important;
display: block !important;
}
/* On mobile: 2 column grid */
@media (max-width: 767px) {
.ab-prod-card { padding: 20px 16px !important; }
.ab-prod-name { font-size: 15px !important; }
}
@media (max-width: 575px) {
.ab-prod-card { padding: 18px 14px !important; }
}
/* ============================================================
16. JOURNAL CARDS
============================================================ */
/* SPPageBuilder: Column → CSS Class: ab-j-card */
.ab-j-card {
background: var(--ab-surface) !important;
border: 1px solid var(--ab-border) !important;
overflow: hidden !important;
transition: border-color 0.2s !important;
cursor: pointer !important;
height: 100% !important;
}
.ab-j-card:hover { border-color: var(--ab-gold) !important; }
.ab-j-img {
width: 100% !important;
aspect-ratio: 16/9 !important;
overflow: hidden !important;
}
.ab-j-img img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
transition: transform 0.4s !important;
}
.ab-j-card:hover .ab-j-img img { transform: scale(1.03) !important; }
.ab-j-body { padding: 20px !important; }
.ab-j-tag {
font-family: var(--ab-mono) !important;
font-size: 9px !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
color: var(--ab-gold) !important;
opacity: 0.8 !important;
margin-bottom: 8px !important;
display: block !important;
}
.ab-j-title {
font-family: var(--ab-serif) !important;
font-size: 17px !important;
font-style: italic !important;
color: var(--ab-bone) !important;
line-height: 1.35 !important;
font-weight: 300 !important;
margin-bottom: 8px !important;
}
.ab-j-excerpt {
font-family: var(--ab-serif) !important;
font-size: 13px !important;
color: var(--ab-wmid) !important;
line-height: 1.6 !important;
font-weight: 300 !important;
}
/* Mobile: journal cards stack vertically, horizontal layout on SM */
@media (max-width: 767px) {
.ab-j-card {
display: flex !important;
flex-direction: row !important;
}
.ab-j-img {
width: 100px !important;
flex-shrink: 0 !important;
aspect-ratio: unset !important;
align-self: stretch !important;
}
.ab-j-title { font-size: 14px !important; }
.ab-j-excerpt { display: none !important; }
}
@media (max-width: 575px) {
.ab-j-card { flex-direction: column !important; }
.ab-j-img { width: 100% !important; aspect-ratio: 16/9 !important; }
.ab-j-body { padding: 14px !important; }
}
/* ============================================================
17. COLLECTION PAGE — Series Hero
============================================================ */
/* SPPageBuilder: Row → CSS Class: ab-series-hero */
.ab-series-hero {
min-height: 60vh !important;
display: flex !important;
align-items: flex-end !important;
position: relative !important;
overflow: hidden !important;
}
/* Set background image to the collection's cover painting
via SPPageBuilder Row → Background → Image */
.ab-series-hero::after {
content: '' !important;
position: absolute !important;
inset: 0 !important;
background: linear-gradient(
to top,
rgba(20,18,16,1) 0%,
rgba(20,18,16,0.5) 50%,
rgba(20,18,16,0.1) 100%
) !important;
z-index: 0 !important;
}
.ab-series-hero-content {
position: relative !important;
z-index: 1 !important;
padding: 48px 64px !important;
}
@media (max-width: 767px) {
.ab-series-hero { min-height: 50vh !important; }
.ab-series-hero-content { padding: 32px 20px !important; }
}
/* ============================================================
18. INDIVIDUAL PAINTING PAGE
============================================================ */
/* SPPageBuilder: Row → CSS Class: ab-painting-view */
.ab-painting-view {
background: var(--ab-ink) !important;
}
/* Large painting display */
/* SPPageBuilder: Image addon → CSS Class: ab-painting-full */
.ab-painting-full img {
width: 100% !important;
max-height: 85vh !important;
object-fit: contain !important;
object-position: center !important;
display: block !important;
cursor: zoom-in !important;
}
@media (max-width: 767px) {
.ab-painting-full img { max-height: 60vh !important; }
}
/* Purchase block */
/* SPPageBuilder: Column → CSS Class: ab-purchase-block */
.ab-purchase-block {
position: sticky !important;
top: 90px !important;
padding: 0 !important;
}
.ab-purchase-divider {
border: none !important;
border-top: 1px solid var(--ab-border) !important;
margin: 20px 0 !important;
}
@media (max-width: 767px) {
.ab-purchase-block { position: static !important; }
}
/* Artist note on painting page */
/* SPPageBuilder: Text addon → CSS Class: ab-artist-note */
.ab-artist-note,
.ab-artist-note p {
font-family: var(--ab-serif) !important;
font-size: 16px !important;
font-style: italic !important;
color: var(--ab-wlt) !important;
line-height: 1.75 !important;
font-weight: 300 !important;
border-left: 2px solid var(--ab-gold) !important;
padding-left: 20px !important;
margin: 20px 0 !important;
}
/* ============================================================
19. FOOTER
============================================================ */
/* SPPageBuilder: Row → CSS Class: ab-footer */
#sp-footer,
.ab-footer {
background: var(--ab-surface) !important;
border-top: none !important;
padding: 56px 0 32px !important;
}
.ab-footer-brand-name {
font-family: var(--ab-display) !important;
font-size: 19px !important;
letter-spacing: 3px !important;
color: var(--ab-bone) !important;
display: block !important;
margin-bottom: 4px !important;
}
.ab-footer-brand-tag {
font-family: var(--ab-mono) !important;
font-size: 9px !important;
letter-spacing: 3px !important;
text-transform: uppercase !important;
color: var(--ab-gold) !important;
display: block !important;
margin-bottom: 14px !important;
}
.ab-footer-desc {
font-family: var(--ab-serif) !important;
font-size: 13px !important;
font-style: italic !important;
color: var(--ab-wmid) !important;
line-height: 1.7 !important;
font-weight: 300 !important;
max-width: 260px !important;
}
.ab-footer-col-title {
font-family: var(--ab-mono) !important;
font-size: 9px !important;
letter-spacing: 4px !important;
text-transform: uppercase !important;
color: var(--ab-gold) !important;
opacity: 0.8 !important;
margin-bottom: 16px !important;
display: block !important;
}
.ab-footer-links {
list-style: none !important;
padding: 0 !important;
margin: 0 !important;
display: flex !important;
flex-direction: column !important;
gap: 9px !important;
}
.ab-footer-links li a {
font-family: var(--ab-serif) !important;
font-size: 14px !important;
font-style: italic !important;
color: var(--ab-wmid) !important;
text-decoration: none !important;
font-weight: 300 !important;
transition: color 0.2s !important;
}
.ab-footer-links li a:hover { color: var(--ab-gold) !important; }
.ab-footer-bottom {
display: flex !important;
justify-content: space-between !important;
align-items: center !important;
flex-wrap: wrap !important;
gap: 10px !important;
padding-top: 20px !important;
border-top: 0px solid var(--ab-border) !important;
margin-top: 44px !important;
}
.ab-footer-copy,
.ab-footer-eco {
font-family: var(--ab-mono) !important;
font-size: 10px !important;
letter-spacing: 1px !important;
color: var(--ab-wmid) !important;
opacity: 0.55 !important;
}
.ab-footer-eco a { color: var(--ab-gold) !important; opacity: 0.85 !important; }
/* Mobile footer: stack columns */
@media (max-width: 767px) {
#sp-footer, .ab-footer { padding: 36px 0 28px !important; }
.ab-footer-bottom {
flex-direction: column !important;
align-items: flex-start !important;
gap: 6px !important;
margin-top: 28px !important;
}
.ab-footer-desc { max-width: 100% !important; }
}
/* ============================================================
20. SPPageBuilder GLOBAL OVERRIDES
These fix common SPPageBuilder defaults that conflict
with the design.
============================================================ */
/* Remove default addon margins */
.sppb-addon-wrapper { margin-bottom: 0 !important; }
.sppb-addon { margin-bottom: 0 !important; }
/* Remove SPPageBuilder's default section padding
(we control it with ab-sec classes) */
.sppb-section.ab-sec-controlled {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
/* Image addons: remove default borders SPPageBuilder adds */
.sppb-addon-image img { border: none; }
/* Heading addon default margin reset */
.sppb-addon-content .sppb-addon-title { margin-bottom: 0; }
/* Fix SPPageBuilder container padding on mobile */
@media (max-width: 575px) {
.sppb-container-inner,
.sp-pagebuilder-content .sppb-section .container {
padding-left: 20px !important;
padding-right: 20px !important;
}
}
@media (max-width: 767px) {
.sppb-container-inner,
.sp-pagebuilder-content .sppb-section .container {
padding-left: 24px !important;
padding-right: 24px !important;
}
}
/* Feature Box addon overrides */
.sppb-addon-feature-box { text-align: left !important; }
.sppb-feature-box-icon { text-align: left !important; }
/* Articles addon overrides — journal cards */
.sppb-article-block { background: transparent !important; border: none !important; }
/* ============================================================
21. UTILITY CLASSES
============================================================ */
/* Fade-up animation — apply to any element */
/* SPPageBuilder: enable Entrance Animation on the addon */
@keyframes ab-fadeUp {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
.ab-fade-up {
opacity: 0;
animation: ab-fadeUp 0.65s var(--ab-ease-out) forwards;
}
.ab-fade-up:nth-child(1) { animation-delay: 0.08s; }
.ab-fade-up:nth-child(2) { animation-delay: 0.16s; }
.ab-fade-up:nth-child(3) { animation-delay: 0.24s; }
.ab-fade-up:nth-child(4) { animation-delay: 0.32s; }
.ab-fade-up:nth-child(5) { animation-delay: 0.40s; }
.ab-fade-up:nth-child(6) { animation-delay: 0.48s; }
.ab-fade-up:nth-child(7) { animation-delay: 0.56s; }
.ab-fade-up:nth-child(8) { animation-delay: 0.64s; }
/* Text alignment utilities */
.ab-text-center { text-align: center !important; }
.ab-text-right { text-align: right !important; }
/* Visually hidden but accessible */
.ab-sr-only {
position: absolute !important; width: 1px !important; height: 1px !important;
padding: 0 !important; margin: -1px !important; overflow: hidden !important;
clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}
/* Mobile-only / desktop-only utility
Note: SPPageBuilder's hidden_xl / hidden_md settings do the
same thing inside the editor — use those where possible.
These are for raw HTML addons only. */
.ab-desktop-only { display: block !important; }
.ab-mobile-only { display: none !important; }
@media (max-width: 767px) {
.ab-desktop-only { display: none !important; }
.ab-mobile-only { display: block !important; }
}
/* Truncate long text */
.ab-truncate {
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}