/*
* =====================================================
* PAGE BANNERS - Art Victor Gallery
* =====================================================
*
* Premium dark luxury banner styles for all page headers.
*
* USAGE:
* 1. Include this CSS file in your base template:
*
*
* 2. Include the appropriate banner partial in your page template:
* {% include 'base/partials/page-banners.html' with banner_type='artworks' %}
*
* Available banner types:
* - artworks (includes search form)
* - murals
* - classes
* - events
* - artifacts
* - about
* - contact
*
* FONTS REQUIRED (add to if not already present):
*
*
* =====================================================
*/
/* =====================================================
CSS CUSTOM PROPERTIES (Variables)
===================================================== */
:root {
/* Core palette */
--avg-bg-dark: #0a0a08;
--avg-bg-dark-alt: #111110;
--avg-bg-charcoal: #1a1a18;
--avg-gold: #c8852a;
--avg-gold-light: #d9a358;
--avg-gold-dark: #a66d1f;
--avg-champagne: #f5e6c8;
--avg-ivory: #faf8f3;
--avg-terracotta: #c46d4e;
--avg-terracotta-dark: #8b4530;
--avg-slate: #2d3436;
--avg-slate-light: #3d4446;
--avg-cool-grey: #4a4e50;
/* Typography */
--avg-font-display: 'Cormorant Garamond', Georgia, serif;
--avg-font-body: 'DM Sans', 'Segoe UI', sans-serif;
/* Banner dimensions */
--avg-banner-height: 380px;
--avg-banner-height-mobile: 280px;
/* Timing */
--avg-transition-smooth: cubic-bezier(0.4, 0, 0.2, 1);
}
/* =====================================================
BASE BANNER STYLES
===================================================== */
.avg-banner {
position: relative;
min-height: var(--avg-banner-height);
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
background-color: var(--avg-bg-dark);
}
.avg-banner::before,
.avg-banner::after {
content: '';
position: absolute;
pointer-events: none;
}
.avg-banner__container {
position: relative;
z-index: 10;
text-align: center;
padding: 2rem 1rem;
width: 100%;
}
.avg-banner__title {
font-family: var(--avg-font-display);
font-weight: 600;
font-size: clamp(2rem, 5vw, 3.5rem);
letter-spacing: 0.02em;
margin-bottom: 0.75rem;
animation: avgFadeSlideUp 0.8s var(--avg-transition-smooth) forwards;
opacity: 0;
}
.avg-banner__subtitle {
font-family: var(--avg-font-body);
font-weight: 400;
font-size: clamp(0.95rem, 2vw, 1.15rem);
letter-spacing: 0.05em;
margin-bottom: 1.5rem;
animation: avgFadeSlideUp 0.8s var(--avg-transition-smooth) 0.15s forwards;
opacity: 0;
}
.avg-banner__breadcrumb {
font-family: var(--avg-font-body);
font-size: 0.8rem;
letter-spacing: 0.1em;
text-transform: uppercase;
animation: avgFadeIn 0.6s var(--avg-transition-smooth) 0.3s forwards;
opacity: 0;
}
.avg-banner__breadcrumb a {
text-decoration: none;
transition: color 0.3s ease;
}
.avg-banner__breadcrumb span {
margin: 0 0.5rem;
}
/* =====================================================
ANIMATIONS (CSS Keyframes)
===================================================== */
@keyframes avgFadeSlideUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes avgFadeIn {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
@keyframes avgShimmer {
0%,
100% {
opacity: 0.3;
}
50% {
opacity: 0.7;
}
}
@keyframes avgFloat {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
50% {
transform: translateY(-10px) rotate(2deg);
}
}
@keyframes avgPulse {
0%,
100% {
transform: scale(1);
opacity: 0.5;
}
50% {
transform: scale(1.05);
opacity: 0.8;
}
}
@keyframes avgDrift {
0% {
transform: translateX(0) translateY(0);
}
25% {
transform: translateX(10px) translateY(-5px);
}
50% {
transform: translateX(5px) translateY(5px);
}
75% {
transform: translateX(-5px) translateY(-3px);
}
100% {
transform: translateX(0) translateY(0);
}
}
@keyframes avgGlowLine {
0% {
transform: translateX(-100%);
opacity: 0;
}
50% {
opacity: 1;
}
100% {
transform: translateX(100%);
opacity: 0;
}
}
@keyframes avgCanvasTexture {
0%,
100% {
background-position: 0% 0%;
}
50% {
background-position: 100% 100%;
}
}
/* =====================================================
1. ARTWORKS BANNER - "Studio at Night"
Dark canvas texture, gold brushstroke lines
===================================================== */
.avg-banner--artworks {
background:
linear-gradient(135deg, var(--avg-bg-dark) 0%, #0d0d0a 50%, #080807 100%);
}
/* Canvas texture overlay */
.avg-banner--artworks::before {
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
repeating-linear-gradient(0deg,
transparent,
transparent 2px,
rgba(200, 133, 42, 0.02) 2px,
rgba(200, 133, 42, 0.02) 4px),
repeating-linear-gradient(90deg,
transparent,
transparent 2px,
rgba(200, 133, 42, 0.02) 2px,
rgba(200, 133, 42, 0.02) 4px);
animation: avgCanvasTexture 30s ease infinite;
}
/* Gold brushstroke decorative lines */
.avg-banner--artworks::after {
top: 20%;
left: -10%;
width: 120%;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
var(--avg-gold-dark) 20%,
var(--avg-gold) 50%,
var(--avg-gold-dark) 80%,
transparent 100%);
opacity: 0.4;
transform: rotate(-3deg);
animation: avgShimmer 4s ease-in-out infinite;
}
.avg-banner--artworks .avg-banner__decor {
position: absolute;
bottom: 25%;
right: -5%;
width: 110%;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
var(--avg-gold-dark) 30%,
var(--avg-gold-light) 50%,
var(--avg-gold-dark) 70%,
transparent 100%);
opacity: 0.3;
transform: rotate(2deg);
animation: avgShimmer 5s ease-in-out 1s infinite;
}
.avg-banner--artworks .avg-banner__title {
color: var(--avg-ivory);
}
.avg-banner--artworks .avg-banner__subtitle {
color: var(--avg-champagne);
opacity: 0.8;
}
.avg-banner--artworks .avg-banner__breadcrumb {
color: rgba(200, 133, 42, 0.7);
}
.avg-banner--artworks .avg-banner__breadcrumb a {
color: rgba(200, 133, 42, 0.7);
}
.avg-banner--artworks .avg-banner__breadcrumb a:hover {
color: var(--avg-gold);
}
/* Search form styling for artworks */
.avg-banner--artworks .avg-search {
max-width: 520px;
margin: 1.5rem auto;
animation: avgFadeSlideUp 0.8s var(--avg-transition-smooth) 0.25s forwards;
opacity: 0;
}
.avg-banner--artworks .avg-search__wrapper {
display: flex;
background: rgba(26, 26, 24, 0.9);
border: 1px solid rgba(200, 133, 42, 0.3);
border-radius: 4px;
overflow: hidden;
transition: all 0.3s ease;
}
.avg-banner--artworks .avg-search__wrapper:focus-within {
border-color: var(--avg-gold);
box-shadow: 0 0 20px rgba(200, 133, 42, 0.15);
}
.avg-banner--artworks .avg-search__input {
flex: 1;
background: transparent;
border: none;
padding: 0.875rem 1.25rem;
color: var(--avg-ivory);
font-family: var(--avg-font-body);
font-size: 0.95rem;
}
.avg-banner--artworks .avg-search__input::placeholder {
color: rgba(250, 248, 243, 0.4);
}
.avg-banner--artworks .avg-search__input:focus {
outline: none;
}
.avg-banner--artworks .avg-search__btn {
background: var(--avg-gold);
border: none;
padding: 0.875rem 1.5rem;
color: var(--avg-bg-dark);
cursor: pointer;
transition: all 0.3s ease;
}
.avg-banner--artworks .avg-search__btn:hover {
background: var(--avg-gold-light);
}
.avg-banner--artworks .avg-search__loading {
display: none;
position: absolute;
right: 70px;
top: 50%;
transform: translateY(-50%);
}
/* =====================================================
2. MURALS BANNER - "Urban Walls at Dusk"
Deep slate, geometric paint splatter shapes
===================================================== */
.avg-banner--murals {
background:
linear-gradient(180deg, var(--avg-slate) 0%, #1f2628 50%, var(--avg-bg-dark-alt) 100%);
}
/* Large geometric splatter shape - left */
.avg-banner--murals::before {
top: 10%;
left: -5%;
width: 300px;
height: 300px;
background:
radial-gradient(ellipse at 30% 30%, var(--avg-gold) 0%, transparent 50%),
radial-gradient(ellipse at 70% 60%, var(--avg-terracotta) 0%, transparent 40%);
opacity: 0.15;
border-radius: 60% 40% 70% 30% / 40% 50% 50% 60%;
animation: avgFloat 8s ease-in-out infinite;
}
/* Geometric splatter shape - right */
.avg-banner--murals::after {
bottom: 5%;
right: -3%;
width: 250px;
height: 250px;
background:
radial-gradient(ellipse at 60% 40%, var(--avg-gold-dark) 0%, transparent 45%);
opacity: 0.12;
border-radius: 40% 60% 30% 70% / 60% 30% 70% 40%;
animation: avgFloat 10s ease-in-out 2s infinite reverse;
}
.avg-banner--murals .avg-banner__decor {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 80%;
height: 80%;
border: 1px solid rgba(200, 133, 42, 0.08);
border-radius: 50%;
animation: avgPulse 6s ease-in-out infinite;
}
.avg-banner--murals .avg-banner__decor-2 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 60%;
height: 60%;
border: 1px solid rgba(200, 133, 42, 0.05);
border-radius: 50%;
animation: avgPulse 6s ease-in-out 1s infinite;
}
.avg-banner--murals .avg-banner__title {
color: var(--avg-ivory);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
}
.avg-banner--murals .avg-banner__subtitle {
color: rgba(250, 248, 243, 0.7);
}
.avg-banner--murals .avg-banner__breadcrumb {
color: rgba(200, 133, 42, 0.6);
}
.avg-banner--murals .avg-banner__breadcrumb a {
color: rgba(200, 133, 42, 0.6);
}
.avg-banner--murals .avg-banner__breadcrumb a:hover {
color: var(--avg-gold);
}
/* =====================================================
3. CLASSES BANNER - "Warm Atelier"
Terracotta undertones, candlelight glow, grid motif
===================================================== */
.avg-banner--classes {
background:
linear-gradient(135deg, #1a1512 0%, #1f1714 50%, #0f0d0b 100%);
}
/* Pencil grid / sketchbook motif */
.avg-banner--classes::before {
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
linear-gradient(rgba(196, 109, 78, 0.03) 1px, transparent 1px),
linear-gradient(90deg, rgba(196, 109, 78, 0.03) 1px, transparent 1px);
background-size: 40px 40px;
}
/* Warm candlelight glow - center top */
.avg-banner--classes::after {
top: -50%;
left: 50%;
transform: translateX(-50%);
width: 80%;
height: 100%;
background: radial-gradient(ellipse at center top,
rgba(196, 109, 78, 0.15) 0%,
rgba(200, 133, 42, 0.08) 30%,
transparent 70%);
animation: avgShimmer 6s ease-in-out infinite;
}
.avg-banner--classes .avg-banner__decor {
position: absolute;
bottom: 10%;
left: 10%;
width: 80px;
height: 80px;
border: 2px solid rgba(196, 109, 78, 0.15);
transform: rotate(45deg);
animation: avgDrift 12s ease-in-out infinite;
}
.avg-banner--classes .avg-banner__decor-2 {
position: absolute;
top: 15%;
right: 12%;
width: 60px;
height: 60px;
border: 2px solid rgba(200, 133, 42, 0.12);
border-radius: 50%;
animation: avgDrift 10s ease-in-out 2s infinite reverse;
}
.avg-banner--classes .avg-banner__title {
color: var(--avg-champagne);
}
.avg-banner--classes .avg-banner__subtitle {
color: rgba(196, 109, 78, 0.9);
}
.avg-banner--classes .avg-banner__breadcrumb {
color: rgba(196, 109, 78, 0.6);
}
.avg-banner--classes .avg-banner__breadcrumb a {
color: rgba(196, 109, 78, 0.6);
}
.avg-banner--classes .avg-banner__breadcrumb a:hover {
color: var(--avg-terracotta);
}
/* =====================================================
4. EVENTS BANNER - "Gallery Opening Night"
Dramatic, champagne gold shimmer, velvet dark
===================================================== */
.avg-banner--events {
background:
linear-gradient(180deg, #0c0b09 0%, var(--avg-bg-dark) 50%, #080706 100%);
}
/* Diagonal shimmer line - animated */
.avg-banner--events::before {
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(-45deg,
transparent 0%,
transparent 40%,
rgba(245, 230, 200, 0.03) 45%,
rgba(200, 133, 42, 0.08) 50%,
rgba(245, 230, 200, 0.03) 55%,
transparent 60%,
transparent 100%);
background-size: 200% 200%;
animation: avgGlowLine 8s ease-in-out infinite;
}
/* Champagne sparkle points */
.avg-banner--events::after {
top: 20%;
right: 15%;
width: 4px;
height: 4px;
background: var(--avg-champagne);
border-radius: 50%;
box-shadow:
-100px 50px 0 rgba(245, 230, 200, 0.4),
-200px 20px 0 rgba(200, 133, 42, 0.3),
50px 80px 0 rgba(245, 230, 200, 0.5),
-150px 100px 0 rgba(200, 133, 42, 0.25),
100px -30px 0 rgba(245, 230, 200, 0.35),
-80px -50px 0 rgba(200, 133, 42, 0.3);
animation: avgShimmer 3s ease-in-out infinite;
}
.avg-banner--events .avg-banner__decor {
position: absolute;
top: 30%;
left: 8%;
width: 100px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--avg-gold), transparent);
opacity: 0.4;
transform: rotate(-30deg);
}
.avg-banner--events .avg-banner__decor-2 {
position: absolute;
bottom: 30%;
right: 8%;
width: 120px;
height: 1px;
background: linear-gradient(90deg, transparent, var(--avg-champagne), transparent);
opacity: 0.3;
transform: rotate(30deg);
}
.avg-banner--events .avg-banner__title {
color: var(--avg-champagne);
font-style: italic;
}
.avg-banner--events .avg-banner__subtitle {
color: rgba(200, 133, 42, 0.85);
}
.avg-banner--events .avg-banner__breadcrumb {
color: rgba(245, 230, 200, 0.5);
}
.avg-banner--events .avg-banner__breadcrumb a {
color: rgba(245, 230, 200, 0.5);
}
.avg-banner--events .avg-banner__breadcrumb a:hover {
color: var(--avg-champagne);
}
/* =====================================================
5. ARTIFACTS BANNER - "Museum Vault"
Cool charcoal, aged paper texture, archaeological
===================================================== */
.avg-banner--artifacts {
background:
linear-gradient(180deg, var(--avg-cool-grey) 0%, #3a3d3f 30%, #252728 100%);
}
/* Aged paper texture */
.avg-banner--artifacts::before {
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(ellipse at 20% 30%, rgba(250, 248, 243, 0.02) 0%, transparent 50%),
radial-gradient(ellipse at 80% 70%, rgba(250, 248, 243, 0.015) 0%, transparent 50%),
radial-gradient(ellipse at 50% 50%, rgba(200, 133, 42, 0.01) 0%, transparent 60%);
}
/* Subtle vault lines */
.avg-banner--artifacts::after {
top: 50%;
left: 0;
right: 0;
height: 1px;
background: linear-gradient(90deg,
transparent 0%,
rgba(250, 248, 243, 0.1) 20%,
rgba(250, 248, 243, 0.1) 80%,
transparent 100%);
transform: translateY(-50%);
}
.avg-banner--artifacts .avg-banner__decor {
position: absolute;
top: 25%;
left: 5%;
width: 40px;
height: 40px;
border: 1px solid rgba(250, 248, 243, 0.08);
animation: avgFloat 15s ease-in-out infinite;
}
.avg-banner--artifacts .avg-banner__decor-2 {
position: absolute;
bottom: 25%;
right: 5%;
width: 30px;
height: 30px;
border: 1px solid rgba(250, 248, 243, 0.06);
transform: rotate(45deg);
animation: avgFloat 12s ease-in-out 3s infinite reverse;
}
.avg-banner--artifacts .avg-banner__decor-3 {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 200px;
height: 200px;
border: 1px solid rgba(200, 133, 42, 0.05);
border-radius: 50%;
}
.avg-banner--artifacts .avg-banner__title {
color: var(--avg-ivory);
font-weight: 500;
}
.avg-banner--artifacts .avg-banner__subtitle {
color: rgba(250, 248, 243, 0.6);
}
.avg-banner--artifacts .avg-banner__breadcrumb {
color: rgba(200, 133, 42, 0.5);
}
.avg-banner--artifacts .avg-banner__breadcrumb a {
color: rgba(200, 133, 42, 0.5);
}
.avg-banner--artifacts .avg-banner__breadcrumb a:hover {
color: var(--avg-gold);
}
/* =====================================================
6. ABOUT BANNER - "Artist's Story"
Warm, serif-heavy, intimate personal feel
===================================================== */
.avg-banner--about {
background:
linear-gradient(135deg, #12100e 0%, #1a1714 50%, #0d0c0a 100%);
}
/* Warm split-tone effect */
.avg-banner--about::before {
top: 0;
left: 0;
width: 50%;
height: 100%;
background: linear-gradient(180deg,
rgba(200, 133, 42, 0.04) 0%,
rgba(196, 109, 78, 0.03) 50%,
transparent 100%);
}
/* Elegant quote marks decoration */
.avg-banner--about::after {
top: 15%;
left: 10%;
font-family: var(--avg-font-display);
font-size: 8rem;
color: rgba(200, 133, 42, 0.06);
line-height: 1;
content: '"';
}
.avg-banner--about .avg-banner__decor {
position: absolute;
bottom: 15%;
right: 10%;
font-family: var(--avg-font-display);
font-size: 8rem;
color: rgba(200, 133, 42, 0.06);
line-height: 1;
}
.avg-banner--about .avg-banner__decor::before {
content: '"';
}
.avg-banner--about .avg-banner__title {
color: var(--avg-champagne);
font-weight: 500;
font-style: italic;
font-size: clamp(2.2rem, 5vw, 3.8rem);
}
.avg-banner--about .avg-banner__subtitle {
color: rgba(200, 133, 42, 0.8);
font-family: var(--avg-font-display);
font-size: clamp(1rem, 2.5vw, 1.3rem);
font-style: italic;
}
.avg-banner--about .avg-banner__breadcrumb {
color: rgba(196, 109, 78, 0.6);
}
.avg-banner--about .avg-banner__breadcrumb a {
color: rgba(196, 109, 78, 0.6);
}
.avg-banner--about .avg-banner__breadcrumb a:hover {
color: var(--avg-terracotta);
}
/* =====================================================
7. CONTACT BANNER - "Clean Editorial"
Minimal, ink-on-paper, strong typography
===================================================== */
.avg-banner--contact {
background: var(--avg-bg-dark);
min-height: calc(var(--avg-banner-height) - 40px);
}
/* Subtle ink bleed edge */
.avg-banner--contact::before {
bottom: 0;
left: 0;
right: 0;
height: 2px;
background: linear-gradient(90deg,
transparent 0%,
var(--avg-bg-charcoal) 10%,
var(--avg-bg-charcoal) 90%,
transparent 100%);
}
/* Minimal decorative dot */
.avg-banner--contact::after {
top: 50%;
left: 8%;
width: 6px;
height: 6px;
background: var(--avg-gold);
border-radius: 50%;
transform: translateY(-50%);
animation: avgShimmer 4s ease-in-out infinite;
}
.avg-banner--contact .avg-banner__decor {
position: absolute;
top: 50%;
right: 8%;
width: 6px;
height: 6px;
background: var(--avg-gold);
border-radius: 50%;
transform: translateY(-50%);
animation: avgShimmer 4s ease-in-out 2s infinite;
}
.avg-banner--contact .avg-banner__title {
color: var(--avg-ivory);
font-weight: 600;
letter-spacing: 0.15em;
text-transform: uppercase;
font-size: clamp(1.8rem, 4vw, 2.8rem);
}
.avg-banner--contact .avg-banner__subtitle {
color: rgba(250, 248, 243, 0.5);
font-weight: 400;
}
.avg-banner--contact .avg-banner__breadcrumb {
color: rgba(200, 133, 42, 0.5);
}
.avg-banner--contact .avg-banner__breadcrumb a {
color: rgba(200, 133, 42, 0.5);
}
.avg-banner--contact .avg-banner__breadcrumb a:hover {
color: var(--avg-gold);
}
/* =====================================================
RESPONSIVE STYLES
===================================================== */
@media (max-width: 991.98px) {
.avg-banner {
min-height: calc(var(--avg-banner-height) - 60px);
}
.avg-banner--contact {
min-height: calc(var(--avg-banner-height) - 100px);
}
.avg-banner--murals::before,
.avg-banner--murals::after {
width: 180px;
height: 180px;
}
.avg-banner--about::after,
.avg-banner--about .avg-banner__decor::before {
font-size: 5rem;
}
}
@media (max-width: 767.98px) {
.avg-banner {
min-height: var(--avg-banner-height-mobile);
}
.avg-banner--contact {
min-height: calc(var(--avg-banner-height-mobile) - 30px);
}
.avg-banner__container {
padding: 1.5rem 1rem;
}
.avg-banner__breadcrumb {
font-size: 0.7rem;
}
/* Hide complex decorations on mobile */
.avg-banner--murals .avg-banner__decor,
.avg-banner--murals .avg-banner__decor-2,
.avg-banner--classes .avg-banner__decor,
.avg-banner--classes .avg-banner__decor-2,
.avg-banner--artifacts .avg-banner__decor,
.avg-banner--artifacts .avg-banner__decor-2,
.avg-banner--about::after,
.avg-banner--about .avg-banner__decor {
display: none;
}
.avg-banner--events::after {
box-shadow:
-60px 30px 0 rgba(245, 230, 200, 0.4),
30px 50px 0 rgba(200, 133, 42, 0.3);
}
/* Artworks search adjustments */
.avg-banner--artworks .avg-search {
max-width: 100%;
padding: 0 0.5rem;
}
.avg-banner--artworks .avg-search__input {
padding: 0.75rem 1rem;
font-size: 0.9rem;
}
.avg-banner--artworks .avg-search__btn {
padding: 0.75rem 1.25rem;
}
}
@media (max-width: 575.98px) {
.avg-banner__title {
font-size: 1.75rem;
}
.avg-banner__subtitle {
font-size: 0.9rem;
}
.avg-banner--contact::after,
.avg-banner--contact .avg-banner__decor {
display: none;
}
}
/* =====================================================
UTILITY - Reduced Motion
===================================================== */
@media (prefers-reduced-motion: reduce) {
.avg-banner__title,
.avg-banner__subtitle,
.avg-banner__breadcrumb,
.avg-banner--artworks .avg-search {
animation: none;
opacity: 1;
}
.avg-banner--artworks::after,
.avg-banner--murals::before,
.avg-banner--murals::after,
.avg-banner--classes::after,
.avg-banner--classes .avg-banner__decor,
.avg-banner--classes .avg-banner__decor-2,
.avg-banner--events::before,
.avg-banner--events::after,
.avg-banner--artifacts .avg-banner__decor,
.avg-banner--artifacts .avg-banner__decor-2,
.avg-banner--contact::after,
.avg-banner--contact .avg-banner__decor {
animation: none;
}
}