/* ── Session 10: Creative Photo Effects ── */ /* Contact page hero background */ .contact-hero-bg { position: relative; overflow: hidden; } .contact-hero-bg::before { content: ""; position: absolute; inset: 0; background: url("https://cdn.prod.website-files.com/69bf9a24f27c7bb43c057b18/69c3f097d6211c7730320d48_PENLAND_Lozano_Alexander_FailedMemmories.jpg") center/cover no-repeat; opacity: 0.18; filter: blur(2px); transform: scale(1.05); z-index: 0; animation: contactHeroShift 25s ease-in-out infinite alternate; } .contact-hero-bg > * { position: relative; z-index: 1; } @keyframes contactHeroShift { 0% { transform: scale(1.05) translateX(0); } 100% { transform: scale(1.1) translateX(-2%); } } /* Ken Burns on homepage hero */ .hero-bg-image { animation: kenBurns 30s ease-in-out infinite alternate; } @keyframes kenBurns { 0% { transform: scale(1); } 100% { transform: scale(1.08); } } /* Elegant gold frame reveal on About portrait */ .about-portrait-frame { position: relative; display: inline-block; } .about-portrait-frame::after { content: ""; position: absolute; inset: -6px; border: 2px solid var(--gold, #C4A265); opacity: 0; transition: opacity 0.6s ease, inset 0.6s ease; pointer-events: none; } .about-portrait-frame:hover::after, .about-portrait-frame.frame-visible::after { opacity: 1; inset: 8px; } /* Hover zoom on service cards & split image */ .serve-card img, .split-image-wrapper img { transition: transform 0.5s ease, filter 0.5s ease; } .serve-card:hover img { transform: scale(1.04); } .split-image-wrapper:hover img { transform: scale(1.03); filter: brightness(1.05); } /* Parallax-style depth on scroll for images */ .photo-depth { transition: transform 0.3s ease-out; will-change: transform; } /* Subtle vignette on large hero images */ .hero-bg-wrapper::after { content: ""; position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 50%, rgba(26,26,26,0.5) 100%); pointer-events: none; z-index: 1; } /* Gold accent line below images */ .gold-accent-line { position: relative; } .gold-accent-line::after { content: ""; display: block; width: 0; height: 2px; background: linear-gradient(90deg, transparent, var(--gold, #C4A265), transparent); margin: 16px auto 0; transition: width 0.8s ease; } .gold-accent-line.line-visible::after { width: 60%; } /* ── Session 10b: Logo, Image Fade, Footer Fixes ── */ /* 3x Logo on homepage */ .navbar-logo-image { width: 120px !important; height: 120px !important; max-width: none !important; } .navbar-brand.w-nav-brand { width: auto !important; height: auto !important; } /* 3x Logo text on subpages */ .navbar-logo { font-size: 60px !important; line-height: 1.1 !important; } /* Image fade into background */ .img-fade-wrap { position: relative; overflow: hidden; } .img-fade-wrap::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, transparent 0%, transparent 50%, var(--dark, #1A1A1A) 100% ); pointer-events: none; z-index: 1; } .img-fade-wrap img { display: block; width: 100%; } /* Side fade for split images */ .img-fade-side { position: relative; overflow: hidden; } .img-fade-side::after { content: ""; position: absolute; inset: 0; background: radial-gradient( ellipse at center, transparent 55%, rgba(26,26,26,0.7) 100% ); pointer-events: none; z-index: 1; } /* ── Session 10b: Footer Spacing Fix ── */ .site-footer { padding: 64px 72px 48px !important; border-top: 1px solid var(--dark-border, #333) !important; } .footer-grid { gap: 48px 40px !important; align-items: start !important; } .footer-nav-column { display: flex !important; flex-direction: column !important; gap: 10px !important; } .footer-nav-link { font-size: 14px !important; letter-spacing: 0.5px !important; color: var(--cream-muted, rgba(245,240,235,0.7)) !important; text-decoration: none !important; transition: color 0.2s !important; } .footer-nav-link:hover { color: var(--gold, #C4A265) !important; } .footer-heading { font-family: Playfair Display, serif !important; font-size: 22px !important; color: var(--cream, #F5F0EB) !important; margin-bottom: 4px !important; } .footer-text { font-size: 13px !important; line-height: 1.6 !important; color: rgba(245,240,235,0.6) !important; margin: 0 0 4px !important; } .footer-info-column { display: flex !important; flex-direction: column !important; gap: 8px !important; } .footer-info-column a { color: var(--cream-muted, rgba(245,240,235,0.7)) !important; text-decoration: none !important; font-size: 14px !important; } .footer-info-column a:hover { color: var(--gold, #C4A265) !important; } .footer-info-column .button-gold, .footer-info-column [class*="button"] { display: inline-block !important; padding: 12px 24px !important; font-size: 13px !important; letter-spacing: 1px !important; margin-top: 4px !important; }

CASE STUDY

Intangible Series

ClientClient Name — Bind to CMS
IndustryIndustry — Bind to CMS
ScopeProject Scope — Bind to CMS

About This Project

This section should be bound to the CMS Description (Rich Text) field. It will render the full project narrative including the challenge, approach, and creative process.

THE RESULT

Project Gallery

Start your project

Every great space begins with a conversation. Let's discuss how Cardoza can bring strategic art consulting to your next project.

Book a ConsultationFree 15-Min Intro Call
} }) })