/* ═══════════════════════════════════════════════════════════════ SPRING PUBLISHING — enhancements.css Drop this AFTER style.css on every page. Parts: 1. Design Token Upgrades (richer palette, new vars) 2. Background & Surface Textures 3. Typography Motion 4. Navigation Micro-interactions 5. Button System Upgrade 6. Card Hover Choreography 7. Section Entry Animations 8. Hero Cinematic Layer 9. Gold Accent System 10. Cursor & Focus States 11. Dark Mode 12. Reduced-Motion Safety 13. Mobile Polish ═══════════════════════════════════════════════════════════════ */ /* ╔═══════════════════════════════════════════════════════════╗ ║ PART 1 — DESIGN TOKEN UPGRADES ║ ╚═══════════════════════════════════════════════════════════╝ Add richer depth with new layered variables. These EXTEND the existing :root without overwriting. */ :root { /* ── Richer colour depth ── */ --ivory-warm: #faf6ef; /* slightly warmer page bg */ --ink-deep: #110f0c; /* near-black for hero text */ --gold-vivid: #d4a843; /* punchier gold for CTAs */ --gold-glow: rgba(212,168,67,.18); /* glow halo colour */ --sage-lt: #7a8f78; /* muted sage for accents */ --rust-lt: #b05040; /* warmer hover rust */ --surface-1: #ffffff; /* card surface */ --surface-2: #f2ece2; /* elevated cream */ --border: rgba(26,23,20,.08); --border-gold: rgba(192,154,75,.35); /* ── Elevation shadows (more cinematic) ── */ --elev-1: 0 1px 3px rgba(0,0,0,.05), 0 2px 6px rgba(0,0,0,.04); --elev-2: 0 4px 12px rgba(0,0,0,.07), 0 8px 20px rgba(0,0,0,.05); --elev-3: 0 12px 32px rgba(0,0,0,.09), 0 24px 48px rgba(0,0,0,.06); --elev-gold: 0 6px 24px rgba(212,168,67,.22), 0 2px 8px rgba(212,168,67,.14); /* ── Timing functions ── */ --t-fast: 160ms; --t-base: 280ms; --t-slow: 480ms; --t-crawl: 700ms; --ease-out: cubic-bezier(0, 0, .3, 1); --ease-in-out: cubic-bezier(.45, 0, .55, 1); --ease-spring: cubic-bezier(.34, 1.56, .64, 1); --ease-expo: cubic-bezier(.19, 1, .22, 1); /* ── Gradient presets ── */ --grad-gold: linear-gradient(135deg, var(--gold-dk) 0%, var(--gold-vivid) 50%, var(--gold-lt) 100%); --grad-ink: linear-gradient(160deg, #1a1714 0%, #2a2218 60%, #1a1714 100%); --grad-warm: linear-gradient(180deg, var(--ivory-warm) 0%, var(--ivory-deep) 100%); } /* ╔═══════════════════════════════════════════════════════════╗ ║ PART 2 — BACKGROUND & SURFACE TEXTURES ║ ╚═══════════════════════════════════════════════════════════╝ Add to or specific sections via class. */ /* Subtle grain on the page body */ body { background-color: var(--ivory-warm); } body::before { content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='300' height='300'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.75' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='300' height='300' filter='url(%23n)' opacity='0.025'/%3E%3C/svg%3E"); background-repeat: repeat; opacity: 1; } /* ─ Ink section texture overlay ─ */ .bg-ink { background: var(--grad-ink); } .bg-ink::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: repeating-linear-gradient( 60deg, transparent, transparent 40px, rgba(192,154,75,.025) 40px, rgba(192,154,75,.025) 41px ); } /* ─ Cream section with warm gradient ─ */ .bg-cream-warm { background: linear-gradient(180deg, var(--ivory-deep) 0%, var(--cream) 100%); } /* ─ Gold accent strip (use on marquee, headers) ─ */ .bg-gold-strip { background: var(--grad-gold); } /* ╔═══════════════════════════════════════════════════════════╗ ║ PART 3 — TYPOGRAPHY MOTION ║ ╚═══════════════════════════════════════════════════════════╝ */ /* Animated text gradient for display headings */ .text-gold-animate { background: var(--grad-gold); background-size: 200% auto; -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; animation: gradientShift 5s ease infinite; } @keyframes gradientShift { 0% { background-position: 0% center; } 50% { background-position: 100% center; } 100% { background-position: 0% center; } } /* Italic em tags in headings get a gold shimmer */ h1 em, h2 em, .display-xl em, .display-lg em { font-style: italic; color: var(--gold-lt); position: relative; } h1 em::after, h2 em::after { content: attr(data-text); position: absolute; left: 0; top: 0; background: var(--grad-gold); background-size: 200% auto; -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; animation: gradientShift 6s ease infinite; pointer-events: none; } /* Underline reveal on section labels */ .label { position: relative; display: inline-block; } .label::after { content: ''; position: absolute; bottom: -3px; left: 0; width: 0; height: 1.5px; background: var(--gold-vivid); transition: width var(--t-slow) var(--ease-expo); } .label:hover::after, .section-header:hover .label::after { width: 100%; } /* ╔═══════════════════════════════════════════════════════════╗ ║ PART 4 — NAVIGATION MICRO-INTERACTIONS ║ ╚═══════════════════════════════════════════════════════════╝ */ /* Nav link — sliding gold underline with spring bounce */ .nav-links a::after { transition: transform var(--t-base) var(--ease-spring), opacity var(--t-fast); } /* Nav scroll: refined pill glow instead of plain background */ #navbar.nav-solid { background: rgba(249,245,238,.96); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); box-shadow: 0 1px 0 rgba(0,0,0,.05), 0 4px 20px rgba(0,0,0,.06), inset 0 -1px 0 rgba(192,154,75,.12); transition: all var(--t-base) var(--ease-out); } /* Active nav item: gold dot indicator */ .nav-links a.active::before { content: ''; position: absolute; bottom: 1px; left: 50%; transform: translateX(-50%); width: 4px; height: 4px; border-radius: 50%; background: var(--gold-vivid); box-shadow: 0 0 6px var(--gold-glow); } /* Hamburger lines — refined spring open animation */ .nav-toggle span { transition: transform var(--t-base) var(--ease-spring), opacity var(--t-base) var(--ease-out), background var(--t-base); } /* Mobile drawer: glassmorphism panel */ .nav-drawer__panel { background: rgba(249,245,238,.97); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-left: 1px solid rgba(192,154,75,.15); } .nav-drawer__links a { position: relative; overflow: hidden; } .nav-drawer__links a::before { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(192,154,75,.08), transparent); transform: translateX(-101%); transition: transform var(--t-base) var(--ease-out); } .nav-drawer__links a:hover::before { transform: translateX(0); } /* ╔═══════════════════════════════════════════════════════════╗ ║ PART 5 — BUTTON SYSTEM UPGRADE ║ ╚═══════════════════════════════════════════════════════════╝ */ .btn { position: relative; overflow: hidden; letter-spacing: .12em; transition: color var(--t-base) var(--ease-out), background var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out), transform var(--t-base) var(--ease-spring), box-shadow var(--t-base) var(--ease-out); } /* Ripple layer inside every button */ .btn::after { content: ''; position: absolute; inset: 0; background: radial-gradient(circle at var(--mx,50%) var(--my,50%), rgba(255,255,255,.28) 0%, transparent 65%); opacity: 0; transition: opacity var(--t-slow) var(--ease-out); } .btn:hover::after { opacity: 1; } .btn:active { transform: translateY(1px) scale(.985); } /* Primary — ink with gold hover */ .btn-primary { background: var(--ink-deep); color: var(--ivory); border-color: var(--ink-deep); } .btn-primary:hover { background: var(--gold-vivid); color: var(--ink-deep); border-color: var(--gold-vivid); transform: translateY(-3px); box-shadow: var(--elev-gold); } /* Gold — vivid gradient fill */ /* .btn-gold { background: var(--grad-gold); background-size: 200% auto; background: transparent; color: var(--ivory); border: 1.5px solid rgba(255, 255, 255, 0.5); border-color: transparent; transition: background-position var(--t-slow) var(--ease-out), transform var(--t-base) var(--ease-spring), box-shadow var(--t-base); } .btn-gold:hover { background-position: right center; transform: translateY(-3px); box-shadow: var(--elev-gold); } */ .btn-gold { background: transparent; color: var(--ivory); border: 1.5px solid rgba(247,243,236,.45); backdrop-filter: blur(4px); } .btn-gold:hover { background: rgba(247,243,236,.12); border-color: var(--ivory); transform: translateY(-2px); } /* Ghost — border morphs to filled */ .btn-ghost { background: transparent; color: var(--ivory); border: 1.5px solid rgba(247,243,236,.45); backdrop-filter: blur(4px); } .btn-ghost:hover { background: rgba(247,243,236,.12); border-color: var(--ivory); transform: translateY(-2px); } /* Outline — dark */ .btn-outline { background: transparent; color: var(--ink); border: 1.5px solid rgba(26,23,20,.3); } .btn-outline:hover { background: var(--ink-deep); color: var(--ivory); transform: translateY(-2px); box-shadow: var(--elev-2); } /* Arrow icon that slides on hover */ .btn-arrow::after { content: ' →'; display: inline-block; transform: translateX(0); transition: transform var(--t-base) var(--ease-expo); } .btn-arrow:hover::after { transform: translateX(5px); } /* ╔═══════════════════════════════════════════════════════════╗ ║ PART 6 — CARD HOVER CHOREOGRAPHY ║ ╚═══════════════════════════════════════════════════════════╝ */ /* Generic card lift + border glow */ .card, .project-card, .book-card, .review-card, .client-tile, .svc-tile, .service-tile, .course-card { transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-base) var(--ease-out), border-color var(--t-base) var(--ease-out); } .card:hover, .project-card:hover, .book-card:hover { transform: translateY(-8px); box-shadow: var(--elev-3), 0 0 0 1px var(--border-gold); } /* Book card: cover zoom + shimmer sweep */ .book-card__cover, .project-card__cover { overflow: hidden; position: relative; } .book-card__cover::before, .project-card__cover::before { content: ''; position: absolute; top: 0; left: -75%; width: 50%; height: 100%; background: linear-gradient(to right, transparent 0%, rgba(255,255,255,.14) 50%, transparent 100%); transform: skewX(-20deg); transition: left var(--t-crawl) var(--ease-expo); z-index: 2; pointer-events: none; } .book-card:hover .book-card__cover::before, .project-card:hover .project-card__cover::before { left: 125%; } /* Review card: left border colour sweep */ .review-card { border-left: 3px solid transparent; transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-base) var(--ease-out), border-left-color var(--t-base) var(--ease-out); } .review-card:hover { border-left-color: var(--gold-vivid); transform: translateY(-5px); box-shadow: var(--elev-2), -3px 0 0 var(--gold-vivid); } /* Client tile: full fill transition */ .client-tile { transition: background var(--t-base) var(--ease-out), color var(--t-base) var(--ease-out), transform var(--t-fast) var(--ease-spring); } .client-tile:hover { transform: scale(1.02); } /* Service tile: number glow */ .service-tile__num { transition: color var(--t-base), transform var(--t-base) var(--ease-spring); } .service-tile:hover .service-tile__num { color: var(--gold-vivid); transform: scale(1.08); } /* Endorsement item: gold bar thickens */ .endorsement-item { border-left: 3px solid var(--gold); transition: border-left-width var(--t-base) var(--ease-spring), padding-left var(--t-base) var(--ease-spring); } .endorsement-item:hover { border-left-width: 5px; padding-left: 1.75rem; } /* ╔═══════════════════════════════════════════════════════════╗ ║ PART 7 — SECTION ENTRY ANIMATIONS (Intersection-based) ║ ╚═══════════════════════════════════════════════════════════╝ Works with the JS IntersectionObserver in enhancements.js */ /* Base state: hidden */ [data-anim] { will-change: opacity, transform; } [data-anim="fade-up"] { opacity: 0; transform: translateY(32px); } [data-anim="fade-in"] { opacity: 0; } [data-anim="fade-left"] { opacity: 0; transform: translateX(-28px); } [data-anim="fade-right"] { opacity: 0; transform: translateX( 28px); } [data-anim="scale-up"] { opacity: 0; transform: scale(.92); } [data-anim="blur-in"] { opacity: 0; filter: blur(8px); } /* Revealed state */ [data-anim].anim-done { opacity: 1; transform: none; filter: none; transition: opacity var(--t-crawl) var(--ease-expo), transform var(--t-crawl) var(--ease-expo), filter var(--t-slow) var(--ease-expo); } /* Staggered children */ [data-anim-stagger] > * { opacity: 0; transform: translateY(20px); } [data-anim-stagger].anim-done > * { opacity: 1; transform: none; transition: opacity var(--t-crawl) var(--ease-expo), transform var(--t-crawl) var(--ease-expo); } /* Delay each child via nth-child */ [data-anim-stagger].anim-done > *:nth-child(1) { transition-delay: 40ms; } [data-anim-stagger].anim-done > *:nth-child(2) { transition-delay: 100ms; } [data-anim-stagger].anim-done > *:nth-child(3) { transition-delay: 160ms; } [data-anim-stagger].anim-done > *:nth-child(4) { transition-delay: 220ms; } [data-anim-stagger].anim-done > *:nth-child(5) { transition-delay: 280ms; } [data-anim-stagger].anim-done > *:nth-child(6) { transition-delay: 340ms; } [data-anim-stagger].anim-done > *:nth-child(n+7){ transition-delay: 380ms; } /* ╔═══════════════════════════════════════════════════════════╗ ║ PART 8 — HERO CINEMATIC LAYER ║ ╚═══════════════════════════════════════════════════════════╝ */ /* Animated noise grain on hero */ .hero__bg::after, .page-hero__bg::after { content: ''; position: absolute; inset: 0; pointer-events: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)' opacity='0.045'/%3E%3C/svg%3E"); animation: grainDrift 8s steps(1) infinite; z-index: 1; } @keyframes grainDrift { 0% { background-position: 0 0; } 10% { background-position: -5% -10%; } 20% { background-position: -15% 5%; } 30% { background-position: 7% -25%; } 40% { background-position: -5% 25%; } 50% { background-position: -15% 10%; } 60% { background-position: 15% 0%; } 70% { background-position: 0% 15%; } 80% { background-position: 3% 35%; } 90% { background-position: -10% 10%; } } /* Floating orb blurs behind hero text */ .hero__orb { position: absolute; border-radius: 50%; pointer-events: none; filter: blur(80px); opacity: .18; animation: orbFloat 12s ease-in-out infinite; } .hero__orb--1 { width: 480px; height: 480px; background: radial-gradient(circle, var(--gold-vivid), transparent 70%); top: -80px; right: -80px; animation-duration: 14s; } .hero__orb--2 { width: 360px; height: 360px; background: radial-gradient(circle, #8b5e3c, transparent 70%); bottom: -60px; left: 5%; animation-duration: 18s; animation-delay: -5s; } @keyframes orbFloat { 0%, 100% { transform: translate(0, 0) scale(1); } 33% { transform: translate(30px,-20px) scale(1.04); } 66% { transform: translate(-20px,15px) scale(.96); } } /* Scroll indicator animated line */ .hero__scroll::after { background: linear-gradient(var(--gold-vivid), transparent); animation: scrollPulse 1.8s ease-in-out infinite; } @keyframes scrollPulse { 0%, 100% { opacity: .35; transform: scaleY(1); } 50% { opacity: .8; transform: scaleY(1.15); } } /* ╔═══════════════════════════════════════════════════════════╗ ║ PART 9 — GOLD ACCENT SYSTEM ║ ╚═══════════════════════════════════════════════════════════╝ */ /* Gold rule — animated on scroll reveal */ .gold-rule { background: var(--grad-gold); background-size: 200% auto; animation: goldSlide 3s ease infinite; } @keyframes goldSlide { 0%, 100% { background-position: 0% center; } 50% { background-position: 100% center; } } /* Hover link underlines */ a:not(.btn):not(.nav-links a):not(.nav-logo):not(.footer-col a) { background-image: linear-gradient(var(--gold-vivid), var(--gold-vivid)); background-size: 0% 1.5px; background-position: left bottom; background-repeat: no-repeat; transition: background-size var(--t-base) var(--ease-expo); padding-bottom: 1px; } a:not(.btn):not(.nav-links a):not(.nav-logo):not(.footer-col a):hover { background-size: 100% 1.5px; } /* Gold dot separator for labels / eyebrows */ .dot-sep { display: inline-block; width: 5px; height: 5px; border-radius: 50%; background: var(--gold-vivid); vertical-align: middle; margin-inline: .5rem; animation: dotPulse 2s ease infinite; } @keyframes dotPulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.5); opacity: .7; } } /* Marquee strip: gradient gold */ .marquee-strip { background: var(--grad-gold); } /* ╔═══════════════════════════════════════════════════════════╗ ║ PART 10 — CURSOR & FOCUS STATES ║ ╚═══════════════════════════════════════════════════════════╝ */ /* Keyboard focus ring — gold outline */ :focus-visible { outline: 2px solid var(--gold-vivid); outline-offset: 3px; border-radius: 2px; } /* Image hover cursor hint */ .book-card, .project-card { cursor: pointer; } /* Loading state for images */ img { background: linear-gradient( 90deg, var(--cream) 0%, var(--ivory-deep) 50%, var(--cream) 100% ); background-size: 200% auto; } img.loaded { background: none; animation: none; } img:not([src]), img[src=""] { animation: shimmer 1.6s ease infinite; } @keyframes shimmer { 0% { background-position: -200% center; } 100% { background-position: 200% center; } } /* ╔═══════════════════════════════════════════════════════════╗ ║ PART 11 — DARK MODE ║ ╚═══════════════════════════════════════════════════════════╝ Triggered by: OR system preference. */ @media (prefers-color-scheme: dark) { html:not(.light) { --dm: 1; } } html.dark { --dm: 1; } html[style*="--dm"] body, @media (prefers-color-scheme: dark) { html:not(.light) body } {} /* selector trick — actual rules below */ html.dark body, @media (prefers-color-scheme: dark) { html:not(.light) body { background-color: #0f0d0b; color: var(--ivory); } html:not(.light) .card, html.dark .card { background: #1c1814; border-color: rgba(255,255,255,.06); } html:not(.light) .review-card, html.dark .review-card { background: #1c1814; } html:not(.light) #navbar.nav-solid, html.dark #navbar.nav-solid { background: rgba(15,13,11,.96); border-bottom: 1px solid rgba(192,154,75,.12); } html:not(.light) .nav-drawer__panel, html.dark .nav-drawer__panel { background: rgba(18,15,12,.97); } html:not(.light) .filter-tab, html.dark .filter-tab { border-color: rgba(255,255,255,.1); color: var(--ivory); } html:not(.light) .filter-tab.active, html.dark .filter-tab.active { background: var(--gold-vivid); color: #0f0d0b; border-color: var(--gold-vivid); } html:not(.light) .client-tile, html.dark .client-tile { background: #1c1814; color: var(--ivory); } html:not(.light) .book-preview-panel, html.dark .book-preview-panel { background: #1c1814; border-color: rgba(255,255,255,.06); } } /* ── Manual dark mode toggle class ── */ .dark-mode-toggle { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 44px; height: 44px; border-radius: 50%; background: var(--ink); color: var(--gold-lt); border: 1.5px solid var(--border-gold); display: flex; align-items: center; justify-content: center; font-size: 1.15rem; cursor: pointer; z-index: 800; box-shadow: var(--elev-2); transition: transform var(--t-base) var(--ease-spring), box-shadow var(--t-base), background var(--t-base); } .dark-mode-toggle:hover { transform: scale(1.12) rotate(15deg); box-shadow: var(--elev-gold); background: var(--gold-vivid); color: var(--ink-deep); } /* ╔═══════════════════════════════════════════════════════════╗ ║ PART 12 — REDUCED MOTION SAFETY ║ ╚═══════════════════════════════════════════════════════════╝ All animations and transitions are stripped for users who prefer reduced motion. Accessibility-first. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } .hero__orb { display: none; } body::before { display: none; } .text-gold-animate { animation: none; background: none; -webkit-text-fill-color: var(--gold-lt); } } /* ╔═══════════════════════════════════════════════════════════╗ ║ PART 13 — MOBILE POLISH ║ ╚═══════════════════════════════════════════════════════════╝ */ @media (max-width: 768px) { /* Prevent heavy blur on low-end devices */ .nav-drawer__panel { backdrop-filter: none; -webkit-backdrop-filter: none; } body::before { display: none; } /* remove grain on mobile */ .hero__orb { opacity: .1; filter: blur(60px); } /* Touch tap highlight gold */ a, button { -webkit-tap-highlight-color: rgba(192,154,75,.15); } /* Larger touch targets */ .filter-tab { min-height: 40px; } .carousel-btn { min-width: 48px; min-height: 48px; } .nav-toggle { min-width: 44px; min-height: 44px; } } @media (max-width: 480px) { /* Reduce font sizes slightly so headings don't overflow */ .display-xl { letter-spacing: -.025em; } }