/*
Theme Name: Kadence Child - The Water Testament
Theme URI: https://thewatertestament.com
Description: Child theme for The Water Testament book website, based on Kadence
Author: Alan Bedian
Author URI: https://thewatertestament.com
Template: kadence
Version: 7.11.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kadence-child
*/
/*
* The Water Testament - Premium Water-Themed Design
* Consolidated from style.css + god-is-water-enhancements.css
* Respects Kadence layout, adds visual enhancements only
*/
/* ====================
DESIGN TOKENS
==================== */
:root {
/* Motion System Tokens */
--ease-flow: cubic-bezier(0.22, 1, 0.36, 1);
--ease-out: cubic-bezier(0.4, 0, 0.2, 1);
--ease-in-out: cubic-bezier(0.4, 0, 0.6, 1);
--dur-quick: 160ms;
--dur-base: 280ms;
--dur-slow: 400ms;
--dur-slower: 600ms;
/* Color Tokens - Water Palette */
--water-100: #E8F5FC;
--water-200: #C5E3F6;
--water-300: #B3E5FC;
--water-400: #81D4FA;
--water-500: #4FC3F7;
--water-600: #00B4D8;
--water-700: #0077BE;
--water-800: #0D3B66;
--water-900: #091E42;
/* Semantic Colors */
--ink: #0D3B66;
--paper: rgba(255, 255, 255, 0.95);
--glass: rgba(255, 255, 255, 0.08);
--shadow-soft: rgba(0, 119, 190, 0.15);
--shadow-medium: rgba(0, 119, 190, 0.25);
--shadow-hard: rgba(0, 119, 190, 0.4);
}
/* ====================
GLOBAL STYLES & UX
==================== */
/* Smooth scrolling for anchor links */
html {
scroll-behavior: smooth;
}
/* Improved text rendering */
body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Selection styling */
::selection {
background: rgba(0, 212, 228, 0.3);
color: #0D3B66;
}
::-moz-selection {
background: rgba(0, 212, 228, 0.3);
color: #0D3B66;
}
/* ====================
SITE BACKGROUNDS
==================== */
body {
background: linear-gradient(180deg, #D4E9F7 0%, #B3E5FC 30%, #C0DFF5 70%, #E8F4F8 100%) !important;
/* FLICKER FIX: background-attachment: fixed creates large composited surface - changed to scroll */
background-attachment: scroll !important;
position: relative; /* Needed for absolute positioned particles container */
overflow-x: hidden; /* Prevent horizontal scroll from particles */
}
/* Ensure particle container doesn't extend page */
.water-particles-container {
max-height: 100%;
overflow: hidden;
}
/* FLICKER FIX: Fixed full-viewport overlay causes expensive compositing with backdrop-filter - disabled
body::before {
content: '';
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 30%, rgba(179, 229, 252, 0.3) 0%, transparent 50%),
radial-gradient(circle at 80% 70%, rgba(128, 203, 196, 0.2) 0%, transparent 50%),
radial-gradient(circle at 50% 50%, rgba(0, 119, 190, 0.05) 0%, transparent 70%);
pointer-events: none;
z-index: -1;
}
*/
/* ====================
WATER-THEMED GRADIENTS
==================== */
/* Hero gradient background */
.hero-section,
.wp-block-cover.has-hero-gradient {
background: radial-gradient(ellipse at top, #B3E5FC 0%, #4FC3F7 30%, #0077BE 100%);
}
/* Consciousness flow gradient */
.consciousness-gradient {
background: linear-gradient(135deg, #00D4E4 0%, #0077BE 50%, #0D3B66 100%);
}
/* Sacred geometry radial */
.sacred-background {
background: radial-gradient(circle at 30% 70%, #B3E5FC 0%, #80CBC4 40%, #0077BE 100%);
}
/* Twilight depth for footers */
.twilight-gradient {
background: linear-gradient(180deg, #0D3B66 0%, #1A3A52 100%);
}
/* Sunlight on water accent */
.golden-accent {
background: linear-gradient(45deg, #FFD700 0%, #FFA000 50%, #FF6F00 100%);
}
/* ====================
HEADER & NAVIGATION
==================== */
.site-header-wrap {
/* Let #masthead handle the gradient, this just ensures transparency */
background: transparent !important;
}
/* Apply our gradient to the main header consistently */
#masthead {
/* More opaque background for better visibility */
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(232, 244, 248, 0.96) 25%,
rgba(179, 229, 252, 0.94) 50%,
rgba(232, 244, 248, 0.96) 75%,
rgba(255, 255, 255, 0.98) 100%) !important;
/* Basic shadow when not stuck */
box-shadow: 0 2px 15px rgba(0, 119, 190, 0.15);
/* COMPOSITOR-SAFE: Only transition transform and opacity (GPU accelerated) */
transition: transform var(--dur-base) var(--ease-flow),
opacity var(--dur-base) var(--ease-flow),
box-shadow var(--dur-base) var(--ease-flow);
}
/* Apply gradient to sticky header inner elements (needed for Kadence structure) */
#masthead .kadence-sticky-header,
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start),
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start):not(.site-header-row-container):not(.site-main-header-wrap),
#masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner,
#masthead .site-header-row-container-inner,
#masthead .site-main-header-wrap {
/* Light mode gradient */
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(232, 244, 248, 0.96) 25%,
rgba(179, 229, 252, 0.94) 50%,
rgba(232, 244, 248, 0.96) 75%,
rgba(255, 255, 255, 0.98) 100%) !important;
}
/* Sticky Header Enhancements - Only Applied When Stuck */
#masthead.item-is-stuck,
#masthead.stuck,
#masthead .kadence-sticky-header.item-is-stuck,
.kadence-sticky-header.item-is-fixed:not(.item-at-start) #masthead {
/* Ensure solid background when stuck */
background: linear-gradient(135deg,
rgba(255, 255, 255, 1) 0%,
rgba(232, 244, 248, 0.98) 25%,
rgba(179, 229, 252, 0.96) 50%,
rgba(232, 244, 248, 0.98) 75%,
rgba(255, 255, 255, 1) 100%) !important;
/* Waterline Elevation Effect - premium depth without flicker */
box-shadow:
/* Soft underwater glow */
0 12px 32px rgba(0, 119, 190, 0.12),
/* Waterline highlight */
inset 0 1px 0 rgba(255, 255, 255, 0.8),
/* Deep shadow */
0 4px 16px rgba(0, 119, 190, 0.18),
/* Ambient glow */
0 0 40px rgba(0, 212, 228, 0.08) !important;
/* Subtle border that looks like water surface */
border-bottom: 1px solid rgba(0, 212, 228, 0.4) !important;
}
/* Site Title - Enhanced with magical effects and scroll transitions */
.site-branding {
transition: transform var(--dur-base) var(--ease-flow);
padding: 5px 0;
animation: gentle-float 8s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
/* Larger at top, before sticky activates */
.site-header-row:not(.item-is-stuck) .site-branding .site-title,
.site-main-header-inner-wrap:not(.item-is-stuck) .site-branding .site-title,
.kadence-sticky-header:not(.item-is-stuck) .site-branding .site-title {
font-size: 28px !important;
transition: font-size var(--dur-base) var(--ease-flow);
}
/* Shrink when sticky header is active */
.kadence-sticky-header.item-is-stuck .site-branding .site-title,
.item-is-stuck .site-branding .site-title {
font-size: 26px !important;
transition: font-size var(--dur-base) var(--ease-flow);
}
.site-branding .site-title {
/* Multi-layer gradient with triple shimmer effect - all clipped to text */
background:
linear-gradient(90deg,
transparent 0%,
transparent 35%,
rgba(255, 255, 255, 0.2) 45%,
rgba(255, 255, 255, 0.9) 50%,
rgba(255, 255, 255, 0.2) 55%,
transparent 65%,
transparent 100%),
linear-gradient(90deg,
transparent 0%,
transparent 30%,
rgba(255, 255, 255, 0.15) 42%,
rgba(255, 255, 255, 0.6) 50%,
rgba(255, 255, 255, 0.15) 58%,
transparent 70%,
transparent 100%),
linear-gradient(90deg,
transparent 0%,
transparent 25%,
rgba(255, 255, 255, 0.1) 40%,
rgba(255, 255, 255, 0.4) 50%,
rgba(255, 255, 255, 0.1) 60%,
transparent 75%,
transparent 100%),
linear-gradient(135deg,
#005A8C 0%,
#0077BE 20%,
#00A8CC 50%,
#0077BE 80%,
#005A8C 100%);
background-size: 200% 100%, 250% 100%, 300% 100%, 300% 300%;
background-position: -200% 0, -250% 0, -300% 0, 0 0;
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-family: 'Fredericka the Great', serif !important;
font-weight: 400 !important;
letter-spacing: 1px;
position: relative;
display: inline-block;
animation: gradient-flow 12s ease-in-out infinite,
shimmer-flash 11s cubic-bezier(0.4, 0, 0.2, 1) 0.5s infinite,
shimmer-secondary 7s cubic-bezier(0.65, 0, 0.35, 1) 2.5s infinite,
shimmer-primary 5s ease-in-out 4s infinite,
subtle-wave 10s ease-in-out infinite;
filter: drop-shadow(0 3px 6px rgba(0, 90, 140, 0.5))
drop-shadow(0 0 20px rgba(0, 212, 228, 0.6))
drop-shadow(0 0 30px rgba(79, 195, 247, 0.4))
drop-shadow(0 1px 2px rgba(0, 60, 100, 0.6));
transition: all var(--dur-base) var(--ease-flow);
text-shadow: none;
overflow: visible;
isolation: isolate;
transform-origin: center;
-webkit-text-stroke: 0.5px rgba(0, 90, 140, 0.15);
}
/* Magical glow effect with particles - enhanced */
.site-branding .site-title::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 150%;
height: 150%;
background: radial-gradient(circle at center,
rgba(79, 195, 247, 0.4) 0%,
rgba(0, 212, 228, 0.25) 30%,
rgba(0, 119, 190, 0.1) 60%,
transparent 80%);
opacity: 0.7;
transition: opacity var(--dur-slow) var(--ease-flow);
z-index: -1;
pointer-events: none;
filter: blur(15px);
animation: pulse-glow 4s ease-in-out infinite;
}
.site-branding:hover {
transform: scale(1.03) translateY(-2px);
}
.site-branding:hover .site-title {
letter-spacing: 1.5px;
filter: drop-shadow(0 4px 8px rgba(0, 119, 190, 0.3))
drop-shadow(0 0 20px rgba(79, 195, 247, 0.6))
drop-shadow(0 0 30px rgba(0, 212, 228, 0.4));
}
.site-branding:hover .site-title::after {
opacity: 1;
}
/* ====================
LIGHT MODE LOGO FIX
Reduce glow, increase contrast for readability
==================== */
/* Light mode: Remove heavy glow effects, use crisp shadow instead */
body:not(.dark-mode) .site-branding .site-title {
filter: drop-shadow(0 2px 4px rgba(0, 60, 100, 0.7))
drop-shadow(0 1px 2px rgba(0, 0, 0, 0.3));
-webkit-text-stroke: 0.5px rgba(0, 60, 100, 0.3);
}
/* Light mode: Reduce glow blur on ::after pseudo-element */
body:not(.dark-mode) .site-branding .site-title::after {
opacity: 0.3;
filter: blur(10px);
}
/* Light mode hover: Keep it subtle */
body:not(.dark-mode) .site-branding:hover .site-title {
filter: drop-shadow(0 3px 6px rgba(0, 90, 140, 0.6))
drop-shadow(0 1px 2px rgba(0, 0, 0, 0.4));
}
body:not(.dark-mode) .site-branding:hover .site-title::after {
opacity: 0.5;
}
/* ====================
DARK MODE LOGO
Lighter shadows for readability
==================== */
/* Dark mode: Darker drop-shadows for contrast, lighter glow */
body.dark-mode .site-branding .site-title {
filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.6))
drop-shadow(0 3px 8px rgba(0, 40, 80, 0.5))
drop-shadow(0 0 20px rgba(0, 212, 228, 0.4))
drop-shadow(0 0 30px rgba(79, 195, 247, 0.25));
}
body.dark-mode .site-branding:hover .site-title {
filter: drop-shadow(0 3px 6px rgba(0, 0, 0, 0.6))
drop-shadow(0 4px 10px rgba(0, 40, 80, 0.5))
drop-shadow(0 0 25px rgba(0, 212, 228, 0.5))
drop-shadow(0 0 35px rgba(79, 195, 247, 0.3));
}
/* Advanced gradient flow animation */
@keyframes gradient-flow {
0%, 100% {
background-position: -200% 0, -250% 0, -300% 0, 0% 50%;
}
25% {
background-position: -200% 0, -250% 0, -300% 0, 50% 25%;
}
50% {
background-position: -200% 0, -250% 0, -300% 0, 100% 50%;
}
75% {
background-position: -200% 0, -250% 0, -300% 0, 50% 75%;
}
}
/* Shimmer effect animation - smooth horizontal sweep on title */
/* Advanced shimmer animations - Multiple beams sweep across text */
@keyframes shimmer-primary {
0% {
background-position: -300% 0, -250% 0, -200% 0, 0 0;
}
100% {
background-position: 300% 0, -250% 0, -200% 0, 0 0;
}
}
@keyframes shimmer-secondary {
0% {
background-position: -200% 0, -250% 0, -300% 0, 0 0;
}
100% {
background-position: -200% 0, 250% 0, -300% 0, 0 0;
}
}
@keyframes shimmer-flash {
0% {
background-position: -200% 0, -250% 0, -300% 0, 0 0;
}
100% {
background-position: -200% 0, -250% 0, 300% 0, 0 0;
}
}
/* Pulsing glow animation */
@keyframes pulse-glow {
0%, 100% {
transform: translate(-50%, -50%) scale(1);
opacity: 0.3;
}
50% {
transform: translate(-50%, -50%) scale(1.1);
opacity: 0.6;
}
}
/* Gentle floating animation with wave distortion for the logo */
@keyframes gentle-float {
0%, 100% {
transform: translateY(0px) scaleY(1);
}
25% {
transform: translateY(-1.5px) scaleY(1.005);
}
50% {
transform: translateY(-2px) scaleY(1.008);
}
75% {
transform: translateY(-1.5px) scaleY(1.005);
}
}
/* Subtle wave distortion effect on the text */
@keyframes subtle-wave {
0%, 100% {
transform: perspective(400px) rotateY(0deg) skewX(0deg) scaleX(1);
}
25% {
transform: perspective(400px) rotateY(3deg) skewX(1deg) scaleX(1.01);
}
50% {
transform: perspective(400px) rotateY(0deg) skewX(0deg) scaleX(1);
}
75% {
transform: perspective(400px) rotateY(-3deg) skewX(-1deg) scaleX(0.99);
}
}
.main-navigation a {
color: #0D3B66;
position: relative;
padding: 0.5rem 1rem;
transition: color 0.3s ease, transform 0.3s ease;
}
.main-navigation a:hover {
color: #0077BE;
transform: translateY(-1px);
}
/* Water underline effect on hover */
.main-navigation a::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 2px;
background: linear-gradient(90deg, #00D4E4, #0077BE);
transform: translateX(-50%);
transition: width 0.3s ease;
}
.main-navigation a:hover::after {
width: 80%;
}
.main-navigation .sub-menu {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(232, 244, 248, 0.95) 100%) !important;
/* FLICKER FIX: backdrop-filter forces compositing cost even when off-screen - removed
backdrop-filter: blur(10px);
*/
border: 1px solid rgba(0, 119, 190, 0.2) !important;
border-radius: 8px !important;
box-shadow: 0 8px 30px rgba(0, 119, 190, 0.2) !important;
min-width: 260px !important; /* Optimal width for chapter titles */
width: max-content !important; /* Allow container to fit content */
max-width: 400px !important; /* Cap at reasonable size */
}
.main-navigation .sub-menu a {
color: #0D3B66 !important;
font-weight: 500 !important;
font-size: 0.95rem !important; /* Slightly smaller for better fit */
padding: 0.5rem 0.75rem !important; /* Tight, dense spacing */
}
/* Ensure submenu links fill the container width */
.header-navigation .header-menu-container ul ul li.menu-item > a {
width: 100% !important;
display: block !important;
box-sizing: border-box !important;
}
.main-navigation .sub-menu a:hover {
background: linear-gradient(90deg, rgba(0, 119, 190, 0.1) 0%, transparent 100%) !important;
border-left: 3px solid #00D4E4;
color: #0077BE !important;
}
.main-navigation .sub-menu .current-menu-item > a,
.main-navigation .sub-menu .current_page_item > a {
background: linear-gradient(90deg, rgba(0, 212, 228, 0.15) 0%, rgba(179, 229, 252, 0.1) 100%) !important;
border-left: 3px solid #00D4E4 !important;
color: #0077BE !important;
font-weight: 600 !important;
}
/* ====================
TYPOGRAPHY
==================== */
/* Heading spacing - Kadence handles sizes/weights/letter-spacing */
h1, h2, h3, h4, h5, h6 {
margin-top: 1.5rem !important;
margin-bottom: 1rem !important;
}
.entry-content > h1:first-child,
.entry-content > h2:first-child,
.entry-content > h3:first-child {
margin-top: 0 !important;
}
/* Gradient text effect for h1 and h2 in content areas only */
.entry-content h1:not(.entry-title) {
background: linear-gradient(135deg, #0077BE 0%, #00D4E4 50%, #4FC3F7 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
background-size: 200% auto;
animation: shimmerGradient 8s ease infinite;
}
.entry-content h2 {
background: linear-gradient(135deg, #0077BE 0%, #00D4E4 50%, #4FC3F7 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
background-size: 200% auto;
animation: shimmerGradient 10s ease infinite;
line-height: 1.2;
}
.entry-content h3 {
/* Slightly different gradient than h2 - more teal/aqua tones */
background: linear-gradient(135deg, #00B4D8 0%, #00D4E4 50%, #48CAE4 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
/* Keep it simple and static - looks clean */
opacity: 1 !important;
animation: none !important;
}
/* Ensure links inside h3 have the gradient effect */
.entry-content h3 a {
background: linear-gradient(135deg, #00B4D8 0%, #00D4E4 50%, #48CAE4 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
color: transparent !important;
text-decoration: none;
transition: all 0.3s ease;
}
.entry-content h3 a:hover {
text-shadow: 0 0 20px rgba(0, 212, 228, 0.6);
filter: brightness(1.2);
}
/* Keep hero titles crisp and white - no gradient */
/* Removed - moved to enhanced styling below with water gradient and glow effect */
@keyframes shimmerGradient {
0%, 100% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
}
/* Elegant section divider */
.entry-content > h2::after {
content: '';
display: block;
width: 60px;
height: 3px;
background: linear-gradient(90deg, #0077BE, #00D4E4);
margin: 0;
border-radius: 2px;
animation: dividerGlow 3s ease-in-out infinite;
}
/* Center the divider when h2 is centered */
.entry-content > h2.has-text-align-center::after,
.entry-content > h2[style*="text-align: center"]::after,
.entry-content > h2[style*="text-align:center"]::after {
margin: 0 auto;
}
@keyframes dividerGlow {
0%, 100% {
box-shadow: 0 0 5px rgba(0, 119, 190, 0.3);
}
50% {
box-shadow: 0 0 15px rgba(0, 212, 228, 0.6);
}
}
/* Paragraph spacing - Kadence handles line-height and font-size */
.entry-content p {
margin-bottom: 1rem !important;
}
/* Content sections - tighter spacing */
.entry-content > * + * {
margin-top: 1rem;
}
.entry-content > h2 {
margin-top: 2rem;
margin-bottom: 1rem;
}
.entry-content > h3 {
margin-top: 1.5rem;
margin-bottom: 0.75rem;
}
/* ====================
PAGE HERO SECTIONS
==================== */
.entry-hero.page-hero-section {
padding-top: 0 !important;
padding-bottom: 0.5rem !important;
margin-top: 0 !important;
}
.entry-hero.page-hero-section .entry-header {
min-height: 130px !important;
}
.entry-hero-container-inner {
background: linear-gradient(135deg,
rgba(0, 119, 190, 0.85) 0%,
rgba(0, 150, 203, 0.88) 10%,
rgba(0, 180, 216, 0.9) 20%,
rgba(0, 196, 222, 0.92) 30%,
rgba(0, 212, 228, 0.95) 40%,
rgba(64, 207, 227, 0.93) 50%,
rgba(128, 203, 196, 0.9) 60%,
rgba(179, 229, 252, 0.85) 80%,
rgba(212, 233, 247, 0.8) 100%) !important;
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
box-shadow: 0 4px 16px rgba(0, 119, 190, 0.25) !important;
border-radius: 0 0 16px 16px !important;
position: relative;
overflow: hidden;
}
@media (max-width: 1024px) {
.entry-hero-container-inner {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
box-shadow: 0 3px 12px rgba(0, 119, 190, 0.18) !important;
}
}
@supports (text-wrap: balance) {
.entry-hero-container-inner .entry-title,
.entry-hero-container-inner h1,
.hero-section .hero-content h1 {
text-wrap: balance;
}
}
.entry-hero-container-inner::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:
/* Animated water caustics */
radial-gradient(ellipse at 20% 30%, rgba(255, 255, 255, 0.15) 0%, transparent 40%),
radial-gradient(ellipse at 70% 60%, rgba(0, 212, 228, 0.12) 0%, transparent 35%),
radial-gradient(ellipse at 45% 80%, rgba(79, 195, 247, 0.1) 0%, transparent 45%),
radial-gradient(ellipse at 85% 25%, rgba(255, 255, 255, 0.08) 0%, transparent 30%),
/* Subtle water texture noise */
url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='100' height='100'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)' opacity='0.05'/%3E%3C/svg%3E"),
radial-gradient(circle at center,
rgba(255, 255, 255, 0.2) 0%,
transparent 50%);
background-size: 300% 300%, 250% 250%, 280% 280%, 320% 320%, 200px 200px, 100% 100%;
animation: heroShimmer 8s ease-in-out infinite, causticsDrift 12s ease-in-out infinite alternate;
pointer-events: none;
opacity: 0.9;
z-index: 1;
border-radius: 0 0 16px 16px;
}
@media (max-width: 1024px) {
.entry-hero-container-inner::before {
animation: none;
opacity: 0.7;
background-size: 220% 220%, 200% 200%, 220% 220%, 240% 240%, 160px 160px, 100% 100%;
}
}
/* Animated wave effect at bottom edge - organic oscillating waves */
.entry-hero-container-inner::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 30px;
/* More wave dips across the width */
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1200 60' preserveAspectRatio='none'%3E%3Cpath d='M0,35 Q75,20 150,35 Q225,20 300,35 Q375,20 450,35 Q525,20 600,35 Q675,20 750,35 Q825,20 900,35 Q975,20 1050,35 Q1125,20 1200,35 L1200,60 L0,60 Z' fill='rgba(0, 212, 228, 0.45)' /%3E%3Cpath d='M0,40 Q75,27 150,40 Q225,27 300,40 Q375,27 450,40 Q525,27 600,40 Q675,27 750,40 Q825,27 900,40 Q975,27 1050,40 Q1125,27 1200,40 L1200,60 L0,60 Z' fill='rgba(79, 195, 247, 0.4)' /%3E%3Cpath d='M0,45 Q75,34 150,45 Q225,34 300,45 Q375,34 450,45 Q525,34 600,45 Q675,34 750,45 Q825,34 900,45 Q975,34 1050,45 Q1125,34 1200,45 L1200,60 L0,60 Z' fill='rgba(179, 229, 252, 0.35)' /%3E%3C/svg%3E");
background-size: 100% 100%;
background-repeat: no-repeat;
background-position: center bottom;
pointer-events: none;
border-radius: 0 0 16px 16px;
overflow: hidden;
z-index: 5;
/* Organic oscillating motion */
animation: waveOscillate1 8s ease-in-out infinite,
waveOscillate2 12s ease-in-out infinite,
waveOscillate3 6s ease-in-out infinite;
}
@media (max-width: 1024px) {
.entry-hero-container-inner::after {
animation: none;
opacity: 0.55;
}
}
@media (prefers-reduced-motion: reduce) {
.entry-hero-container-inner::before,
.entry-hero-container-inner::after,
.hero-droplets,
.hero-droplets .droplet,
.water-particles-container,
.water-particle,
.site-branding,
.site-branding .site-title,
.site-branding .site-title::after {
animation: none !important;
transition-duration: 0s !important;
}
}
/* Dark mode: More transparent waves */
.dark-mode .entry-hero-container-inner::after {
opacity: 0.6;
}
/* Primary wave oscillation - vertical movement */
@keyframes waveOscillate1 {
0%, 100% { transform: translateY(0); }
50% { transform: translateY(-6px); }
}
/* Secondary wave oscillation - slightly different timing */
@keyframes waveOscillate2 {
0%, 100% { transform: translateY(0) scaleY(1); }
50% { transform: translateY(4px) scaleY(1.08); }
}
/* Tertiary oscillation - subtle horizontal sway */
@keyframes waveOscillate3 {
0%, 100% { transform: translateX(0); }
25% { transform: translateX(3px); }
75% { transform: translateX(-3px); }
}
@keyframes causticsDrift {
0% {
background-position: 49% 49%, 51% 51%, 50% 50%, 50.5% 49.5%, 0 0, 50% 50%;
}
50% {
background-position: 51% 50%, 49% 50%, 50.5% 50.5%, 49.5% 50.5%, 0 0, 50% 50%;
}
100% {
background-position: 50% 51%, 50% 49%, 49.5% 50%, 50% 50%, 0 0, 50% 50%;
}
}
@keyframes heroShimmer {
0%, 100% { opacity: 0.8; }
50% { opacity: 1; }
}
.entry-hero-container-inner .entry-title,
.entry-hero-container-inner h1 {
position: relative;
z-index: 10;
letter-spacing: 0.05em;
}
/* Light mode page title - crisp and defined with visible gradient animation */
body:not(.dark-mode) .entry-hero-container-inner .entry-title,
body:not(.dark-mode) .entry-hero-container-inner h1 {
/* More visible water gradient with color variation */
background: linear-gradient(135deg, #FFFFFF 0%, #E3F2FD 30%, #BBDEFB 50%, #E3F2FD 70%, #FFFFFF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
background-size: 200% 200%;
/* Strong text shadows for depth and readability */
filter: drop-shadow(0 3px 6px rgba(0, 60, 100, 0.6))
drop-shadow(0 6px 12px rgba(0, 90, 140, 0.4))
drop-shadow(0 1px 3px rgba(0, 0, 0, 0.5))
drop-shadow(0 0 20px rgba(0, 212, 228, 0.3));
/* Subtle outline for better separation */
-webkit-text-stroke: 0.5px rgba(0, 90, 140, 0.15);
/* Re-enable glow animation + gradient flow */
animation: titleGlow 4s ease-in-out infinite alternate,
titleGradientFlow 8s ease-in-out infinite;
}
/* Dark mode page title - bright and glowing, consistent white tones with animated gradient */
.dark-mode .entry-hero-container-inner .entry-title,
.dark-mode .entry-hero-container-inner h1 {
/* Consistently bright - all white with very subtle light blue hints only */
background: linear-gradient(135deg, #FFFFFF 0%, #F0F9FF 25%, #FFFFFF 50%, #F0F9FF 75%, #FFFFFF 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
background-size: 200% 200%;
/* Glowing water effect with lighter turquoise tones */
filter: drop-shadow(0 0 15px rgba(0, 212, 228, 0.5))
drop-shadow(0 0 30px rgba(179, 229, 252, 0.4))
drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4))
drop-shadow(0 4px 16px rgba(79, 195, 247, 0.5));
animation: titleGlow 4s ease-in-out infinite alternate,
titleGradientFlow 8s ease-in-out infinite;
}
/* ====================
DEPTH & LAYERING
==================== */
/* Add depth between header and hero */
#masthead, .site-header {
box-shadow: 0 2px 20px rgba(0, 119, 190, 0.15),
0 4px 40px rgba(0, 212, 228, 0.1);
position: relative;
z-index: 1000;
}
/* Enhance hero container depth */
.entry-hero-container-inner {
transform: translateZ(0);
will-change: transform;
}
/* Add subtle depth to content below hero */
.entry-content {
position: relative;
z-index: 1;
box-shadow: 0 -5px 20px rgba(0, 119, 190, 0.08);
}
/* Gentle pulsing glow animation - more pronounced */
@keyframes titleGlow {
0% {
filter: drop-shadow(0 0 10px rgba(0, 212, 228, 0.4))
drop-shadow(0 0 25px rgba(0, 212, 228, 0.2))
drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4))
drop-shadow(0 4px 16px rgba(0, 119, 190, 0.3));
}
50% {
filter: drop-shadow(0 0 25px rgba(0, 212, 228, 0.8))
drop-shadow(0 0 50px rgba(0, 212, 228, 0.6))
drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4))
drop-shadow(0 4px 16px rgba(79, 195, 247, 0.7));
}
100% {
filter: drop-shadow(0 0 10px rgba(0, 212, 228, 0.4))
drop-shadow(0 0 25px rgba(0, 212, 228, 0.2))
drop-shadow(0 2px 8px rgba(0, 0, 0, 0.4))
drop-shadow(0 4px 16px rgba(0, 119, 190, 0.3));
}
}
/* Gradient flow animation for title */
@keyframes titleGradientFlow {
0%, 100% {
background-position: 0% 50%;
}
25% {
background-position: 50% 25%;
}
50% {
background-position: 100% 50%;
}
75% {
background-position: 50% 75%;
}
}
/* Hero sections - tighter auto height */
.hero-section,
.wp-block-cover.alignfull {
position: relative;
min-height: auto;
display: flex;
align-items: center;
justify-content: center;
text-align: center;
overflow: visible;
}
.wp-block-cover.alignfull {
overflow: hidden;
}
.entry-hero.page-hero-section {
overflow: visible;
}
/* Animated water pattern overlay */
.hero-section::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 20% 80%, rgba(179, 229, 252, 0.1) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(128, 203, 196, 0.1) 0%, transparent 50%);
background-size: 200% 200%;
animation: flow 15s ease infinite;
pointer-events: none;
}
/* Static Caustic Water Overlays - subtle underwater light patterns */
.hero-section::after,
.book-preview-section::after,
.reviews-section::after {
content: '';
position: absolute;
inset: 0;
background-image:
/* Caustic pattern 1 */
radial-gradient(ellipse 300px 150px at 25% 40%,
rgba(255, 255, 255, 0.08) 0%,
transparent 40%),
/* Caustic pattern 2 */
radial-gradient(ellipse 250px 180px at 75% 60%,
rgba(0, 212, 228, 0.06) 0%,
transparent 50%),
/* Caustic pattern 3 */
radial-gradient(ellipse 280px 140px at 50% 20%,
rgba(179, 229, 252, 0.05) 0%,
transparent 45%),
/* Caustic pattern 4 */
radial-gradient(ellipse 200px 200px at 85% 80%,
rgba(255, 255, 255, 0.04) 0%,
transparent 40%);
mix-blend-mode: soft-light;
opacity: 0.7;
pointer-events: none;
z-index: 1;
}
/* Hero content styling */
.hero-content {
position: relative;
z-index: 2;
max-width: 800px;
padding: 2rem;
}
.hero-content h1 {
font-size: clamp(2.5rem, 5vw, 4rem);
color: #FFFFFF;
text-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
margin-bottom: 1rem;
}
.hero-content p {
font-size: 1.25rem;
color: rgba(255, 255, 255, 0.95);
line-height: 1.6;
}
/* ====================
CHAPTER HEADERS
==================== */
.chapter-header {
position: relative;
padding: 3rem 2rem 2rem;
margin: -2rem -2rem 2rem;
background: linear-gradient(135deg, #4FC3F7 0%, #0077BE 100%);
border-radius: 0 0 24px 24px;
color: #FFFFFF;
text-align: center;
}
.chapter-header::after {
content: '';
position: absolute;
bottom: -20px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 0;
border-left: 20px solid transparent;
border-right: 20px solid transparent;
border-top: 20px solid #0077BE;
}
/* ====================
CONTENT AREAS
==================== */
/* Kadence handles: content vertical padding (set to 1rem) */
.content-area {
padding-top: 0 !important;
padding-bottom: 0 !important;
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.content-wrap {
padding: 0.5rem 0;
}
.site-content,
.entry-content-wrap,
.content-bg {
background: transparent !important;
}
article.entry {
background: rgba(255, 255, 255, 0.95) !important;
/* FLICKER FIX: backdrop-filter removed - use more opaque background instead */
border-radius: 16px;
box-shadow: 0 8px 40px rgba(0, 119, 190, 0.15);
margin-bottom: 2rem !important;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
article.entry:hover {
transform: translateY(-2px);
box-shadow: 0 12px 50px rgba(0, 119, 190, 0.2);
}
.entry.single-entry {
box-shadow: 0px 15px 15px rgb(54 107 185 / 29%), inset 0 0 37px #1d88a730;
background: rgb(181 214 233 / 52%) !important;
transition: 0.7s all;
}
/* ====================
BLOCKS & GROUPS
==================== */
.wp-block-group,
.wp-block-cover {
margin-top: 0.5rem !important;
margin-bottom: 0.5rem !important;
}
.wp-block-group:not(.chapter-hero):not(.chapter-preview-section) {
/* COMPOSITOR-SAFE: Only transition transform and box-shadow */
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1),
box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
.wp-block-group:not(.chapter-hero):not(.chapter-preview-section):hover {
transform: translateY(-5px);
box-shadow: 0 15px 45px rgba(0, 119, 190, 0.25) !important;
}
.wp-block-group.alignfull.chapter-hero.has-background,
.wp-block-group.alignfull.has-background.chapter-hero,
.chapter-hero.wp-block-group.alignfull.has-background,
div.wp-block-group.chapter-hero[style*="padding"] {
padding-top: 1rem !important;
padding-bottom: 1rem !important;
}
/* ====================
CARD STYLING
==================== */
.wp-block-group.is-style-card,
.kb-row-layout-wrap,
.entry-content-wrap > .wp-block-group {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(232, 244, 248, 0.9) 100%);
border-radius: 16px;
padding: 1.5rem;
box-shadow: 0 4px 20px rgba(13, 59, 102, 0.08);
border: 1px solid rgba(0, 212, 228, 0.1);
transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
position: relative;
overflow: hidden;
}
.wp-block-group.is-style-card::before,
.kb-row-layout-wrap::before,
.entry-content-wrap > .wp-block-group::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 212, 228, 0.05), transparent);
transition: left 0.6s ease;
}
.wp-block-group.is-style-card:hover,
.kb-row-layout-wrap:hover,
.entry-content-wrap > .wp-block-group:hover {
transform: translateY(-8px) scale(1.02);
box-shadow: 0 15px 45px rgba(0, 119, 190, 0.2),
0 0 30px rgba(0, 212, 228, 0.15);
border-color: rgba(0, 212, 228, 0.3);
background: linear-gradient(135deg, rgba(255, 255, 255, 1) 0%, rgba(232, 244, 248, 0.95) 100%);
}
.wp-block-group.is-style-card:hover::before,
.kb-row-layout-wrap:hover::before,
.entry-content-wrap > .wp-block-group:hover::before {
left: 100%;
}
/* Chapter preview cards - special styling */
.entry-content > .wp-block-group h3 {
background: linear-gradient(135deg, #0077BE 0%, #00D4E4 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
transition: all 0.3s ease;
}
.entry-content > .wp-block-group:hover h3 {
transform: translateX(5px);
}
/* ====================
LINKS
==================== */
.entry-content a:not(.wp-block-button__link):not(h3 a) {
color: var(--water-700);
text-decoration: underline;
text-decoration-color: rgba(0, 119, 190, 0.3);
text-decoration-thickness: 0.08em;
text-underline-offset: 0.18em;
transition: color var(--dur-quick) var(--ease-out),
text-decoration-color var(--dur-quick) var(--ease-out);
}
.entry-content a:not(.wp-block-button__link):not(h3 a):hover {
color: var(--water-600);
text-decoration-color: var(--water-600);
}
/* ====================
BUTTONS
==================== */
/* Enhanced water-themed buttons with gradient and glow - exclude liquid-morph (has own effect) */
.wp-block-button__link:not(.liquid-morph),
.kb-btn:not(.liquid-morph),
button:not([class*="child-menu"]):not(.liquid-morph),
input[type="submit"]:not(.liquid-morph),
.button:not(.liquid-morph),
a.button:not(.liquid-morph) {
position: relative;
overflow: hidden;
background: linear-gradient(135deg, #0077BE 0%, #00B4D8 50%, #00D4E4 100%) !important;
border: 2px solid rgba(255, 255, 255, 0.5) !important;
box-shadow:
/* Stronger depth shadow */
0 6px 20px rgba(0, 90, 140, 0.6),
/* Outer glow for separation */
0 0 30px rgba(0, 212, 228, 0.4),
/* Inset highlight */
inset 0 1px 0 rgba(255, 255, 255, 0.4),
/* Inset bottom shadow for depth */
inset 0 -2px 8px rgba(0, 60, 100, 0.3) !important;
/* COMPOSITOR-SAFE: Smooth transitions with gentle easing */
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
border-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
background-position 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
color: #FFFFFF !important;
font-weight: 700 !important;
text-shadow: 0 2px 6px rgba(0, 0, 0, 0.4),
0 1px 2px rgba(0, 0, 0, 0.3);
/* Add gradient overlay for smooth color transition */
background-size: 200% 200%;
/* Ensure button stands out */
isolation: isolate;
}
.wp-block-button__link:not(.liquid-morph):hover,
.kb-btn:not(.liquid-morph):hover,
button:not([class*="child-menu"]):not(.liquid-morph):hover,
input[type="submit"]:not(.liquid-morph):hover {
transform: translateY(-4px) scale(1.05) !important;
box-shadow:
/* Stronger hover depth */
0 15px 40px rgba(0, 90, 140, 0.7),
/* Intense glow */
0 0 60px rgba(0, 212, 228, 0.7),
/* Brighter highlight */
inset 0 1px 0 rgba(255, 255, 255, 0.6),
/* Deeper inset shadow */
inset 0 -2px 10px rgba(0, 60, 100, 0.4) !important;
border-color: rgba(255, 255, 255, 0.8) !important;
/* Shift gradient position for color change effect */
background-position: 100% 100% !important;
transition: transform 0.6s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
border-color 0.5s cubic-bezier(0.25, 0.46, 0.45, 0.94),
background-position 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94) !important;
}
/* Glint effect on hover only - no constant animation - exclude liquid-morph */
.wp-block-button__link:not(.liquid-morph)::before,
.kb-btn:not(.liquid-morph)::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 40%;
height: 100%;
background: conic-gradient(
from 90deg at 50% 50%,
transparent,
rgba(255, 255, 255, 0.5),
transparent
);
transform: skewX(-25deg);
opacity: 0;
transition: none;
}
.wp-block-button__link:not(.liquid-morph):hover::before,
.kb-btn:not(.liquid-morph):hover::before {
animation: buttonGlint var(--dur-slower) var(--ease-flow);
}
@keyframes buttonGlint {
0% {
left: -40%;
opacity: 0;
}
50% {
opacity: 1;
}
100% {
left: 140%;
opacity: 0;
}
}
/* Reduced motion: disable glint */
@media (prefers-reduced-motion: reduce) {
.wp-block-button__link:not(.liquid-morph)::before,
.kb-btn:not(.liquid-morph)::before {
display: none;
}
}
/* Ripple effect on click - exclude liquid-morph */
.wp-block-button__link:not(.liquid-morph):active,
.kb-btn:not(.liquid-morph):active,
button:not([class*="child-menu"]):not(.liquid-morph):active {
transform: translateY(-1px) scale(0.98);
box-shadow: 0 2px 10px rgba(0, 119, 190, 0.3) !important;
}
/* ====================
PRACTICE BOXES
==================== */
.practice-box,
.wp-block-group.practice {
position: relative;
border-left: 5px solid #80CBC4;
background: linear-gradient(
120deg,
rgba(179, 229, 252, 0.15) 0%,
rgba(128, 203, 196, 0.08) 100%
);
padding: 1.5rem;
margin: 2rem 0;
border-radius: 0 12px 12px 0;
box-shadow: 0 4px 20px rgba(0, 119, 190, 0.08);
transition: all 0.3s ease;
}
.practice-box:hover {
transform: translateX(5px);
box-shadow: 0 8px 30px rgba(0, 119, 190, 0.15);
}
/* Practice box icon/badge */
.practice-box::before {
content: '💧';
position: absolute;
top: 1.5rem;
right: 1.5rem;
font-size: 2rem;
opacity: 0.3;
}
/* ====================
BLOCKQUOTES
==================== */
blockquote {
position: relative;
border-left: 4px solid #0077BE;
background: linear-gradient(to right, rgba(179, 229, 252, 0.1), transparent);
padding: 1.5rem 2rem;
margin: 1.5rem 0;
font-style: italic;
color: #1A3A52;
box-shadow: 0 2px 10px rgba(0, 119, 190, 0.05);
border-radius: 0 8px 8px 0;
}
blockquote::before {
content: '"';
position: absolute;
top: -10px;
left: 10px;
font-size: 4rem;
color: rgba(0, 119, 190, 0.1);
font-family: Georgia, serif;
line-height: 1;
}
blockquote cite {
display: block;
margin-top: 1rem;
font-style: normal;
font-weight: 500;
color: #0077BE;
font-size: 0.9em;
}
/* ====================
LISTS
==================== */
.entry-content ul:not([class]) {
list-style: none;
padding-left: 0;
}
.entry-content ul:not([class]) li {
position: relative;
padding-left: 2rem;
margin-bottom: 0.75rem;
}
.entry-content ul:not([class]) li::before {
content: '→';
position: absolute;
left: 0;
color: #0077BE;
font-weight: bold;
font-size: 1.25rem;
}
/* ====================
IMAGES & MEDIA
==================== */
/* Image hover effect with 3D tilt */
.wp-block-image img,
.kb-image img {
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.4s ease, filter 0.4s ease;
border-radius: 8px;
will-change: transform;
}
.wp-block-image:hover img,
.kb-image:hover img {
transform: scale(1.05) translateY(-5px) rotateX(2deg);
box-shadow: 0 15px 40px rgba(0, 119, 190, 0.25);
filter: brightness(1.05) contrast(1.05);
}
/* Floating parallax effect - add .floating-image class */
.floating-image {
animation: gentleFloat 6s ease-in-out infinite;
}
@keyframes gentleFloat {
0%, 100% {
transform: translateY(0px) translateX(0px);
}
33% {
transform: translateY(-10px) translateX(5px);
}
66% {
transform: translateY(-5px) translateX(-5px);
}
}
/* Parallax scroll effect - applied via JS */
.parallax-scroll {
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
/* Figure captions */
figcaption {
margin-top: 1rem;
font-size: 0.9rem;
font-style: italic;
color: #4A5F7A;
text-align: center;
}
/* ====================
FORMS
==================== */
input[type="text"],
input[type="email"],
input[type="url"],
input[type="search"],
textarea,
select {
background: rgba(255, 255, 255, 0.95) !important;
border: 2px solid rgba(0, 119, 190, 0.2) !important;
border-radius: 8px !important;
padding: 12px 16px;
transition: all 0.3s ease;
}
input[type="text"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="search"]:focus,
textarea:focus,
select:focus {
border-color: #0077BE !important;
box-shadow: 0 0 0 3px rgba(0, 119, 190, 0.1) !important;
background: #FFFFFF !important;
}
/* ====================
SIDEBAR
==================== */
.sidebar {
background: rgba(255, 255, 255, 0.85) !important;
backdrop-filter: blur(10px);
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 119, 190, 0.1);
}
.sidebar .widget {
background: transparent !important;
border: none !important;
margin-bottom: 1.5rem !important;
}
.sidebar .widget-title {
color: #0077BE;
border-bottom: 2px solid #00D4E4;
padding-bottom: 0.5rem;
margin-bottom: 1rem;
}
.widget-area .widget {
padding: 1rem !important;
}
/* ====================
DECORATIVE WATER WAVE DIVIDERS
==================== */
/* Wave divider utility class - add to sections */
.wave-divider-top {
position: relative;
padding-top: 80px;
}
.wave-divider-top::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 60px;
background: url('data:image/svg+xml;utf8,') no-repeat;
background-size: cover;
pointer-events: none;
}
.wave-divider-bottom {
position: relative;
padding-bottom: 80px;
}
.wave-divider-bottom::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 60px;
background: url('data:image/svg+xml;utf8,') no-repeat;
background-size: cover;
pointer-events: none;
}
/* Animated flowing wave - add to hero sections */
.wave-animated {
position: relative;
overflow: hidden;
}
.wave-animated::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 200%;
height: 80px;
background: url('data:image/svg+xml;utf8,') repeat-x;
background-size: 50% 100%;
animation: waveFlow 20s linear infinite;
pointer-events: none;
}
@keyframes waveFlow {
0% {
transform: translateX(0);
}
100% {
transform: translateX(-50%);
}
}
/* ====================
SACRED GEOMETRY PATTERNS
==================== */
.sacred-pattern {
position: relative;
}
.sacred-pattern::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-image:
radial-gradient(circle at 30% 70%, rgba(179, 229, 252, 0.05) 0%, transparent 40%),
radial-gradient(circle at 70% 30%, rgba(128, 203, 196, 0.05) 0%, transparent 40%);
pointer-events: none;
}
/* ====================
FOCUS & ACCESSIBILITY
==================== */
/* Focus rings are handled by `assets/css/modules/base/focus-rings.css`.
Keep legacy rules from interfering (especially to avoid outline-offset animations). */
a:focus,
button:focus,
input:focus,
textarea:focus,
select:focus,
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
outline: none;
box-shadow: none;
transition: none;
}
/* Remove focus outline for mouse users (but keep for keyboard) */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
outline: none;
box-shadow: none;
}
/* ====================
SCROLL EFFECTS
==================== */
/* Enhanced smooth scroll with custom easing */
html {
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: no-preference) {
html {
scroll-behavior: smooth;
}
}
/* Fade in on scroll (needs JS, but prepared) */
.fade-in-scroll {
opacity: 0;
transform: translateY(20px);
transition: opacity 0.6s ease, transform 0.6s ease;
}
.fade-in-scroll.visible {
opacity: 1;
transform: translateY(0);
}
/* ====================
WATER-THEMED PAGE TRANSITIONS
==================== */
/* Page load transition wrapper */
/* DISABLED - filter on body creates stacking context that breaks Kadence sticky header
body {
animation: pageWaterFadeIn 0.8s ease-out;
}
@keyframes pageWaterFadeIn {
0% {
opacity: 0;
filter: blur(2px);
}
100% {
opacity: 1;
filter: blur(0);
}
}
*/
/* Water ripple overlay for page transitions */
.water-transition-overlay {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: radial-gradient(circle at center,
rgba(179, 229, 252, 0.3) 0%,
rgba(0, 119, 190, 0.15) 50%,
transparent 100%);
pointer-events: none;
opacity: 0;
z-index: 9999;
transition: opacity 0.6s ease;
}
.water-transition-overlay.active {
opacity: 1;
animation: rippleExpand 0.8s ease-out forwards;
}
@keyframes rippleExpand {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(3);
opacity: 0;
}
}
/* Caustic light shimmer effect - underwater light patterns */
.water-transition-overlay::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background:
radial-gradient(ellipse at 20% 30%, rgba(179, 229, 252, 0.4) 0%, transparent 40%),
radial-gradient(ellipse at 80% 70%, rgba(0, 212, 228, 0.3) 0%, transparent 40%),
radial-gradient(ellipse at 50% 50%, rgba(128, 203, 196, 0.35) 0%, transparent 45%);
opacity: 0;
mix-blend-mode: screen;
}
.water-transition-overlay.active::before {
animation: causticShimmer 0.8s ease-out;
}
@keyframes causticShimmer {
0% {
opacity: 0;
transform: translate(0, 0) scale(0.5);
}
30% {
opacity: 1;
}
100% {
opacity: 0;
transform: translate(20px, -20px) scale(1.5);
}
}
/* Liquid wave distortion effect */
.water-transition-overlay::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
90deg,
transparent 0%,
rgba(179, 229, 252, 0.1) 25%,
rgba(0, 212, 228, 0.15) 50%,
rgba(179, 229, 252, 0.1) 75%,
transparent 100%
);
opacity: 0;
}
.water-transition-overlay.active::after {
animation: liquidWave 0.6s ease-out;
}
@keyframes liquidWave {
0% {
opacity: 0;
transform: translateX(-100%) skewX(-10deg);
}
50% {
opacity: 0.8;
}
100% {
opacity: 0;
transform: translateX(100%) skewX(10deg);
}
}
/* Secondary ripples at random positions */
.water-ripple-secondary {
position: fixed;
pointer-events: none;
z-index: 9998;
width: 100px;
height: 100px;
border-radius: 50%;
background: radial-gradient(circle, rgba(0, 212, 228, 0.3) 0%, transparent 70%);
opacity: 0;
}
.water-ripple-secondary.active {
animation: secondaryRipple 0.7s ease-out forwards;
}
@keyframes secondaryRipple {
0% {
transform: scale(0);
opacity: 1;
}
100% {
transform: scale(4);
opacity: 0;
}
}
/* Smooth page exit transition */
body.page-transitioning {
animation: pageWaterFadeOut 0.5s ease-in forwards;
}
@keyframes pageWaterFadeOut {
0% {
opacity: 1;
filter: blur(0);
}
100% {
opacity: 0;
filter: blur(2px);
}
}
/* ====================
CUSTOM WATER-THEMED SCROLLBAR
==================== */
/* Webkit browsers (Chrome, Safari, Edge) */
::-webkit-scrollbar {
width: 12px;
height: 12px;
}
::-webkit-scrollbar-track {
background: linear-gradient(180deg, #E8F4F8 0%, #D4E9F7 50%, #E8F4F8 100%);
border-radius: 10px;
}
::-webkit-scrollbar-thumb {
background: linear-gradient(180deg, #4FC3F7 0%, #0077BE 50%, #00D4E4 100%);
border-radius: 10px;
border: 2px solid rgba(255, 255, 255, 0.3);
box-shadow: 0 2px 10px rgba(0, 119, 190, 0.3);
transition: all 0.3s ease;
}
::-webkit-scrollbar-thumb:hover {
background: linear-gradient(180deg, #00D4E4 0%, #0077BE 50%, #4FC3F7 100%);
box-shadow: 0 4px 15px rgba(0, 212, 228, 0.5);
}
::-webkit-scrollbar-thumb:active {
background: linear-gradient(180deg, #0077BE 0%, #00D4E4 100%);
}
/* Firefox */
* {
scrollbar-width: thin;
scrollbar-color: #0077BE #E8F4F8;
}
/* ====================
CUSTOM TEXT SELECTION
==================== */
::selection {
background: linear-gradient(135deg, rgba(0, 119, 190, 0.3), rgba(0, 212, 228, 0.4));
background-color: rgba(0, 212, 228, 0.3);
color: #0D3B66;
text-shadow: none;
}
::-moz-selection {
background: linear-gradient(135deg, rgba(0, 119, 190, 0.3), rgba(0, 212, 228, 0.4));
background-color: rgba(0, 212, 228, 0.3);
color: #0D3B66;
text-shadow: none;
}
/* ====================
NUMBER COUNTER ANIMATIONS
==================== */
.counter-number {
font-size: 3rem;
font-weight: 700;
background: linear-gradient(135deg, #0077BE 0%, #00D4E4 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: inline-block;
line-height: 1.2;
}
.counter-label {
display: block;
font-size: 1rem;
color: #0D3B66;
margin-top: 0.5rem;
font-weight: 500;
}
.counter-wrapper {
text-align: center;
padding: 2rem;
}
/* ====================
UTILITY CLASSES
==================== */
.text-gradient {
background: linear-gradient(135deg, #0077BE 0%, #00D4E4 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.shadow-soft {
box-shadow: 0 4px 20px rgba(13, 59, 102, 0.08);
}
.shadow-medium {
box-shadow: 0 8px 30px rgba(13, 59, 102, 0.12);
}
.shadow-strong {
box-shadow: 0 12px 40px rgba(13, 59, 102, 0.18);
}
.border-gradient {
border: 2px solid transparent;
background-image:
linear-gradient(white, white),
linear-gradient(135deg, #0077BE, #00D4E4);
background-origin: border-box;
background-clip: padding-box, border-box;
}
/* ====================
WATER CURSOR TRAIL
==================== */
.cursor-trail {
position: fixed;
pointer-events: none;
z-index: 9999;
width: 15px;
height: 15px;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, rgba(179, 229, 252, 0.6), rgba(0, 212, 228, 0.3));
box-shadow: 0 0 10px rgba(0, 212, 228, 0.5),
inset -2px -2px 4px rgba(255, 255, 255, 0.4);
opacity: 0;
transform: translate(-50%, -50%) scale(0);
animation: cursorFadeOut 1s ease-out forwards;
}
@keyframes cursorFadeOut {
0% {
opacity: 1;
transform: translate(-50%, -50%) scale(1);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(3);
}
}
/* Sparkle variant - brighter, faster animation */
.cursor-trail.sparkle {
background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(0, 212, 228, 0.6));
box-shadow: 0 0 15px rgba(0, 212, 228, 0.8),
0 0 25px rgba(179, 229, 252, 0.4),
inset -1px -1px 3px rgba(255, 255, 255, 0.6);
animation: sparkleOut 0.6s ease-out forwards;
}
@keyframes sparkleOut {
0% {
opacity: 1;
transform: translate(-50%, -50%) scale(1) rotate(0deg);
}
50% {
opacity: 0.8;
transform: translate(-50%, -50%) scale(1.5) rotate(180deg);
}
100% {
opacity: 0;
transform: translate(-50%, -50%) scale(0.3) rotate(360deg);
}
}
/* ====================
FLOATING WATER PARTICLES/BUBBLES
==================== */
.water-particle {
position: absolute;
pointer-events: none;
z-index: 8;
opacity: 0;
}
.water-particle::before {
content: '';
display: block;
width: 100%;
height: 100%;
border-radius: 50%;
background: radial-gradient(circle at 30% 30%, rgba(179, 229, 252, 0.4), rgba(0, 212, 228, 0.2));
box-shadow: 0 0 10px rgba(0, 212, 228, 0.3),
inset -2px -2px 5px rgba(255, 255, 255, 0.3);
animation: shimmerBubble var(--shimmer-duration, 3s) ease-in-out infinite,
bubbleWobble var(--wobble-duration, 4s) ease-in-out infinite;
}
@keyframes floatUp {
0% {
transform: translateY(0) translateX(0) scale(1);
opacity: 0;
}
10% {
opacity: 0.6;
}
90% {
opacity: 0.4;
}
100% {
transform: translateY(-120vh) translateX(var(--drift)) scale(0.5);
opacity: 0;
}
}
/* New animation for scrolling particles - uses custom --travel distance */
@keyframes floatUpScroll {
0% {
transform: translateY(0) translateX(0) scale(1);
opacity: 0;
}
10% {
opacity: 0.6;
}
90% {
opacity: 0.4;
}
100% {
transform: translateY(var(--travel)) translateX(var(--drift)) scale(0.5);
opacity: 0;
}
}
@keyframes shimmerBubble {
0%, 100% {
filter: brightness(1);
}
50% {
filter: brightness(1.3);
}
}
/* Gentle wobble animation for organic movement - applies to ::before */
@keyframes bubbleWobble {
0%, 100% {
transform: translateX(0) scale(1) rotate(0deg);
}
25% {
transform: translateX(calc(var(--wobble, 1) * 3px)) scale(1.03) rotate(2deg);
}
50% {
transform: translateX(0) scale(0.97) rotate(0deg);
}
75% {
transform: translateX(calc(var(--wobble, 1) * -3px)) scale(1.03) rotate(-2deg);
}
}
/* Hero bubbles - larger, more prominent */
.water-particle.hero-bubble::before {
background: radial-gradient(circle at 35% 35%,
rgba(255, 255, 255, 0.5),
rgba(179, 229, 252, 0.45),
rgba(0, 212, 228, 0.25));
box-shadow: 0 0 15px rgba(0, 212, 228, 0.4),
0 0 25px rgba(179, 229, 252, 0.2),
inset -3px -3px 8px rgba(255, 255, 255, 0.4),
inset 2px 2px 4px rgba(0, 212, 228, 0.3);
}
/* Dark mode - more subtle water particles */
body.dark-mode .water-particle::before {
background: radial-gradient(circle at 30% 30%, rgba(179, 229, 252, 0.15), rgba(0, 212, 228, 0.08));
box-shadow: 0 0 8px rgba(0, 212, 228, 0.12),
inset -2px -2px 5px rgba(255, 255, 255, 0.08);
}
body.dark-mode .water-particle.hero-bubble::before {
background: radial-gradient(circle at 35% 35%,
rgba(255, 255, 255, 0.2),
rgba(179, 229, 252, 0.18),
rgba(0, 212, 228, 0.1));
box-shadow: 0 0 12px rgba(0, 212, 228, 0.15),
0 0 20px rgba(179, 229, 252, 0.08),
inset -3px -3px 8px rgba(255, 255, 255, 0.12),
inset 2px 2px 4px rgba(0, 212, 228, 0.15);
}
/* ====================
Z-INDEX HIERARCHY FOR WATER PARTICLES
Particles sit at z-index: 8 (near the front, above text)
Important elements need higher z-index to appear above them
==================== */
/* Images - always above particles */
.wp-block-image,
.wp-block-image img,
img.shadow-strong,
img.shadow-medium,
.entry-content img,
figure img {
position: relative;
z-index: 10;
}
/* Water visualizations - always above particles */
.water-visualization-container,
.water-viz-wrapper {
position: relative;
z-index: 10;
}
/* Water viz controls - above the canvas */
.water-viz-hint {
position: relative;
z-index: 15;
}
/* Content containers and cards - above particles */
.wp-block-group,
.entry-content-wrap,
.wp-block-columns,
.entry-content > .wp-block-group,
.shadow-medium,
.shadow-strong,
article.entry {
position: relative;
z-index: 5;
}
/* Specific high-priority elements */
.hero-section,
.entry-hero-container-inner,
.chapter-card,
.faq-item,
.review-card,
.author-card,
.testimonial-card,
.practice-box,
.newsletter-container,
.book-preview-section {
position: relative;
z-index: 10;
}
/* Text should be readable above particles */
.entry-content,
.entry-content p,
.entry-content h1,
.entry-content h2,
.entry-content h3,
.entry-content ul,
.entry-content ol {
position: relative;
z-index: 5;
}
/* ====================
EMAIL CAPTURE POP-UP (KADENCE CONVERSIONS)
==================== */
/* Water-themed pop-up overlay */
.kadence-conversions-modal-overlay {
background: radial-gradient(circle at center, rgba(0, 119, 190, 0.4), rgba(13, 59, 102, 0.8)) !important;
backdrop-filter: blur(8px) !important;
}
/* Pop-up container */
.kadence-conversions-modal {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(232, 244, 248, 0.95) 100%) !important;
border-radius: 24px !important;
box-shadow: 0 20px 60px rgba(0, 119, 190, 0.4),
0 0 100px rgba(0, 212, 228, 0.2),
inset 0 1px 0 rgba(255, 255, 255, 0.8) !important;
border: 2px solid rgba(0, 212, 228, 0.3) !important;
overflow: hidden !important;
max-width: 600px !important;
}
/* Animated water wave at top of pop-up */
.kadence-conversions-modal::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 200%;
height: 100px;
background: url('data:image/svg+xml;utf8,') repeat-x;
background-size: 50% 100%;
animation: waveFlow 15s linear infinite;
pointer-events: none;
z-index: 1;
}
/* Pop-up content */
.kadence-conversions-modal-content {
position: relative;
z-index: 2;
padding: 3rem !important;
}
/* Pop-up heading */
.kadence-conversions-modal h2,
.kadence-conversions-modal h3 {
background: linear-gradient(135deg, #0077BE 0%, #00D4E4 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1rem !important;
}
/* Form inputs */
.kadence-conversions-modal input[type="email"],
.kadence-conversions-modal input[type="text"] {
border: 2px solid rgba(0, 119, 190, 0.3) !important;
border-radius: 12px !important;
padding: 1rem 1.5rem !important;
font-size: 1rem !important;
transition: all 0.3s ease !important;
background: rgba(255, 255, 255, 0.9) !important;
}
.kadence-conversions-modal input[type="email"]:focus,
.kadence-conversions-modal input[type="text"]:focus {
border-color: #00D4E4 !important;
box-shadow: 0 0 0 4px rgba(0, 212, 228, 0.1),
0 4px 20px rgba(0, 119, 190, 0.2) !important;
background: #FFFFFF !important;
}
/* Submit button */
.kadence-conversions-modal button[type="submit"],
.kadence-conversions-modal .kadence-btn {
background: linear-gradient(135deg, #0077BE 0%, #00D4E4 100%) !important;
border: none !important;
border-radius: 12px !important;
padding: 1rem 2.5rem !important;
font-weight: 600 !important;
font-size: 1.1rem !important;
color: #FFFFFF !important;
box-shadow: 0 6px 20px rgba(0, 119, 190, 0.4),
0 0 30px rgba(0, 212, 228, 0.3) !important;
transition: all 0.3s ease !important;
cursor: pointer !important;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.kadence-conversions-modal button[type="submit"]:hover,
.kadence-conversions-modal .kadence-btn:hover {
transform: translateY(-2px) scale(1.05) !important;
box-shadow: 0 10px 30px rgba(0, 119, 190, 0.5),
0 0 50px rgba(0, 212, 228, 0.4) !important;
background: linear-gradient(135deg, #00D4E4 0%, #0077BE 100%) !important;
}
/* Close button */
.kadence-conversions-modal-close {
color: #0077BE !important;
opacity: 0.7 !important;
transition: all 0.3s ease !important;
font-size: 2rem !important;
width: 40px !important;
height: 40px !important;
border-radius: 50% !important;
background: rgba(255, 255, 255, 0.8) !important;
}
.kadence-conversions-modal-close:hover {
opacity: 1 !important;
background: rgba(0, 212, 228, 0.1) !important;
transform: rotate(90deg) scale(1.1) !important;
}
/* Success message */
.kadence-conversions-success {
background: linear-gradient(135deg, rgba(0, 212, 228, 0.1), rgba(179, 229, 252, 0.1)) !important;
border: 2px solid #00D4E4 !important;
border-radius: 12px !important;
padding: 1.5rem !important;
color: #0D3B66 !important;
}
/* Hide empty left column in conversion popup */
.kadence-conversion .inner-column-1:empty,
.kadence-conversion .inner-column-1 .kt-inside-inner-col:empty {
display: none !important;
}
/* Ensure conversion popup backgrounds work in both light and dark mode */
.kadence-conversion-overlay {
background: radial-gradient(circle at center, rgba(0, 119, 190, 0.4), rgba(13, 59, 102, 0.8)) !important;
backdrop-filter: blur(8px) !important;
}
/* Light mode: Keep existing card styles for conversion popup rows */
.kadence-conversion .kb-row-layout-wrap {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(232, 244, 248, 0.9) 100%) !important;
}
/* Dark mode: Override conversion popup backgrounds */
body.dark-mode .kadence-conversion-overlay {
background: radial-gradient(circle at center, rgba(0, 42, 58, 0.85), rgba(5, 20, 35, 0.95)) !important;
backdrop-filter: blur(12px) !important;
}
body.dark-mode .kadence-conversion .kb-row-layout-wrap,
body.dark-mode .kadence-conversion .wp-block-group {
background: linear-gradient(135deg, rgba(20, 36, 65, 0.95), rgba(13, 27, 48, 0.95)) !important;
border-color: rgba(0, 212, 228, 0.4) !important;
}
/* Disable hover scale effect for conversion popups (prevents overflow/clipping issues) */
.kadence-conversion .kb-row-layout-wrap:hover,
.kadence-conversion .wp-block-group:hover {
transform: none !important;
box-shadow: 0 4px 20px rgba(13, 59, 102, 0.08) !important;
}
.kadence-conversion .kb-row-layout-wrap:hover::before,
.kadence-conversion .wp-block-group:hover::before {
left: -100% !important; /* Keep shimmer effect hidden */
}
/* Dark mode hover states for conversion popups */
body.dark-mode .kadence-conversion .kb-row-layout-wrap:hover,
body.dark-mode .kadence-conversion .wp-block-group:hover {
box-shadow: 0 8px 30px rgba(0, 119, 190, 0.3) !important;
}
/* Floating water droplet decoration */
.kadence-conversions-modal::after {
content: '💧';
position: absolute;
bottom: 2rem;
right: 2rem;
font-size: 3rem;
opacity: 0.1;
pointer-events: none;
animation: gentle-wave 3s ease-in-out infinite;
}
/* ====================
COUNTDOWN TIMER
==================== */
.countdown-timer {
display: flex;
justify-content: center;
gap: 2rem;
padding: 2rem;
margin: 2rem 0;
}
.countdown-item {
text-align: center;
min-width: 100px;
padding: 1.5rem 1rem;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(232, 244, 248, 0.9) 100%);
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0, 119, 190, 0.15),
0 0 20px rgba(0, 212, 228, 0.1);
border: 2px solid rgba(0, 212, 228, 0.2);
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.countdown-item::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(0, 212, 228, 0.1), transparent);
animation: shimmerSweep 3s ease-in-out infinite;
}
@keyframes shimmerSweep {
0%, 100% { left: -100%; }
50% { left: 100%; }
}
.countdown-item:hover {
transform: translateY(-5px) scale(1.05);
box-shadow: 0 15px 40px rgba(0, 119, 190, 0.25),
0 0 30px rgba(0, 212, 228, 0.2);
border-color: rgba(0, 212, 228, 0.4);
}
.countdown-number {
display: block;
font-size: 3.5rem;
font-weight: 700;
line-height: 1;
background: linear-gradient(135deg, #0077BE 0%, #00D4E4 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 0.5rem;
text-shadow: 0 2px 10px rgba(0, 119, 190, 0.2);
}
.countdown-label {
display: block;
font-size: 0.9rem;
text-transform: uppercase;
letter-spacing: 1px;
color: #0D3B66;
font-weight: 600;
}
.countdown-separator {
display: flex;
align-items: center;
font-size: 2rem;
color: #0077BE;
opacity: 0.3;
}
/* Countdown wrapper with water theme */
.countdown-wrapper {
background: linear-gradient(135deg, rgba(179, 229, 252, 0.1) 0%, rgba(128, 203, 196, 0.05) 100%);
border-radius: 24px;
padding: 2rem;
margin: 3rem auto;
max-width: 900px;
border: 1px solid rgba(0, 212, 228, 0.2);
box-shadow: 0 4px 20px rgba(0, 119, 190, 0.08);
}
.countdown-heading {
text-align: center;
font-size: 2rem;
margin-bottom: 1.5rem;
background: linear-gradient(135deg, #0077BE 0%, #00D4E4 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.countdown-subheading {
text-align: center;
color: #0D3B66;
font-size: 1.1rem;
margin-bottom: 2rem;
opacity: 0.8;
}
/* Mobile responsive */
@media (max-width: 768px) {
.countdown-timer {
gap: 1rem;
padding: 1rem;
}
.countdown-item {
min-width: 70px;
padding: 1rem 0.5rem;
}
.countdown-number {
font-size: 2.5rem;
}
.countdown-label {
font-size: 0.75rem;
}
.countdown-separator {
font-size: 1.5rem;
}
}
/* ====================
TESTIMONIAL CAROUSEL
==================== */
.testimonial-carousel-wrapper {
max-width: 1000px;
margin: 3rem auto;
padding: 3rem 2rem;
background: linear-gradient(135deg, rgba(179, 229, 252, 0.1) 0%, rgba(128, 203, 196, 0.05) 100%);
border-radius: 24px;
position: relative;
overflow: hidden;
}
.testimonial-carousel-wrapper::before {
content: '';
position: absolute;
top: -50%;
right: -20%;
width: 400px;
height: 400px;
background: radial-gradient(circle, rgba(0, 212, 228, 0.1), transparent);
pointer-events: none;
}
.testimonial-slide {
background: rgba(255, 255, 255, 0.9);
border-radius: 20px;
padding: 3rem;
box-shadow: 0 10px 40px rgba(0, 119, 190, 0.15);
border: 2px solid rgba(0, 212, 228, 0.2);
position: relative;
transition: all 0.3s ease;
}
.testimonial-slide:hover {
transform: translateY(-5px);
box-shadow: 0 15px 50px rgba(0, 119, 190, 0.25);
border-color: rgba(0, 212, 228, 0.4);
}
.testimonial-quote {
font-size: 1.25rem;
line-height: 1.8;
color: #0D3B66;
margin-bottom: 2rem;
position: relative;
font-style: italic;
}
.testimonial-quote::before {
content: '"';
position: absolute;
top: -20px;
left: -20px;
font-size: 5rem;
color: rgba(0, 119, 190, 0.1);
font-family: Georgia, serif;
line-height: 1;
}
.testimonial-author {
display: flex;
align-items: center;
gap: 1.5rem;
margin-top: 2rem;
padding-top: 2rem;
border-top: 2px solid rgba(0, 212, 228, 0.2);
}
.testimonial-avatar {
width: 70px;
height: 70px;
border-radius: 50%;
background: linear-gradient(135deg, #0077BE, #00D4E4);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2rem;
font-weight: 700;
box-shadow: 0 4px 15px rgba(0, 119, 190, 0.3);
}
.testimonial-avatar img {
width: 100%;
height: 100%;
border-radius: 50%;
object-fit: cover;
}
.testimonial-info {
flex: 1;
}
.testimonial-name {
font-size: 1.25rem;
font-weight: 700;
color: #0077BE;
margin-bottom: 0.25rem;
}
.testimonial-title {
font-size: 1rem;
color: #4A5F7A;
opacity: 0.8;
}
/* Swiper pagination */
.swiper-pagination-bullet {
background: #0077BE !important;
opacity: 0.3 !important;
width: 12px !important;
height: 12px !important;
transition: all 0.3s ease !important;
}
.swiper-pagination-bullet-active {
opacity: 1 !important;
width: 30px !important;
border-radius: 6px !important;
background: linear-gradient(135deg, #0077BE, #00D4E4) !important;
}
/* Swiper navigation */
.swiper-button-next,
.swiper-button-prev {
color: #0077BE !important;
background: rgba(255, 255, 255, 0.9) !important;
width: 50px !important;
height: 50px !important;
border-radius: 50% !important;
box-shadow: 0 4px 15px rgba(0, 119, 190, 0.2) !important;
transition: all 0.3s ease !important;
}
.swiper-button-next:hover,
.swiper-button-prev:hover {
background: #0077BE !important;
color: white !important;
transform: scale(1.1) !important;
box-shadow: 0 6px 20px rgba(0, 119, 190, 0.4) !important;
}
.swiper-button-next::after,
.swiper-button-prev::after {
font-size: 20px !important;
font-weight: 900 !important;
}
/* Mobile adjustments */
@media (max-width: 768px) {
.testimonial-carousel-wrapper {
padding: 2rem 1rem;
}
.testimonial-slide {
padding: 2rem 1.5rem;
}
.testimonial-quote {
font-size: 1.1rem;
}
.testimonial-author {
flex-direction: column;
text-align: center;
}
.swiper-button-next,
.swiper-button-prev {
display: none !important;
}
}
/* ====================
LOADING SPLASH SCREEN
==================== */
.water-loading-splash {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 99999;
background: linear-gradient(135deg, #0D3B66 0%, #0077BE 50%, #00D4E4 100%);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
opacity: 1;
transition: opacity 0.6s ease, visibility 0.6s ease;
}
.water-loading-splash.fade-out {
opacity: 0;
visibility: hidden;
pointer-events: none;
}
/* Water droplet logo animation */
.splash-logo {
position: relative;
width: 120px;
height: 120px;
margin-bottom: 2rem;
}
.splash-droplet {
width: 120px;
height: 120px;
background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.9), rgba(179, 229, 252, 0.7));
border-radius: 50% 50% 50% 0;
transform: rotate(-45deg);
box-shadow: 0 10px 40px rgba(0, 212, 228, 0.5),
inset -5px -5px 15px rgba(255, 255, 255, 0.4),
0 0 60px rgba(179, 229, 252, 0.6);
animation: splashPulse 2s ease-in-out infinite;
position: relative;
}
.splash-droplet::before {
content: '';
position: absolute;
top: 20%;
left: 20%;
width: 30px;
height: 30px;
background: rgba(255, 255, 255, 0.8);
border-radius: 50%;
box-shadow: 0 0 15px rgba(255, 255, 255, 0.8);
}
.splash-droplet::after {
content: '';
position: absolute;
top: 40%;
left: 15%;
width: 15px;
height: 15px;
background: rgba(255, 255, 255, 0.6);
border-radius: 50%;
}
@keyframes splashPulse {
0%, 100% {
transform: rotate(-45deg) scale(1);
box-shadow: 0 10px 40px rgba(0, 212, 228, 0.5),
inset -5px -5px 15px rgba(255, 255, 255, 0.4),
0 0 60px rgba(179, 229, 252, 0.6);
}
50% {
transform: rotate(-45deg) scale(1.1);
box-shadow: 0 15px 60px rgba(0, 212, 228, 0.7),
inset -5px -5px 15px rgba(255, 255, 255, 0.6),
0 0 80px rgba(179, 229, 252, 0.8);
}
}
/* Ripple waves expanding from droplet */
.splash-ripple {
position: absolute;
top: 50%;
left: 50%;
width: 120px;
height: 120px;
border: 3px solid rgba(255, 255, 255, 0.3);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: splashRippleExpand 2s ease-out infinite;
}
.splash-ripple:nth-child(2) {
animation-delay: 0.4s;
}
.splash-ripple:nth-child(3) {
animation-delay: 0.8s;
}
@keyframes splashRippleExpand {
0% {
width: 120px;
height: 120px;
opacity: 1;
}
100% {
width: 300px;
height: 300px;
opacity: 0;
}
}
/* Loading text */
.splash-text {
color: #FFFFFF;
font-size: 1.5rem;
font-weight: 600;
text-align: center;
margin-bottom: 2rem;
text-shadow: 0 2px 10px rgba(0, 0, 0, 0.3);
animation: splashTextFade 2s ease-in-out infinite;
}
@keyframes splashTextFade {
0%, 100% {
opacity: 0.6;
}
50% {
opacity: 1;
}
}
/* Loading progress bar */
.splash-progress {
width: 300px;
height: 4px;
background: rgba(255, 255, 255, 0.2);
border-radius: 2px;
overflow: hidden;
position: relative;
}
.splash-progress-bar {
height: 100%;
background: linear-gradient(90deg, #B3E5FC, #00D4E4, #B3E5FC);
background-size: 200% 100%;
border-radius: 2px;
animation: splashProgress 1.5s ease-in-out infinite;
box-shadow: 0 0 15px rgba(0, 212, 228, 0.8);
}
@keyframes splashProgress {
0% {
width: 0%;
background-position: 0% 50%;
}
50% {
width: 70%;
background-position: 100% 50%;
}
100% {
width: 100%;
background-position: 0% 50%;
}
}
/* Floating particles in background */
.splash-particles {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
overflow: hidden;
pointer-events: none;
}
.splash-particle {
position: absolute;
width: 8px;
height: 8px;
background: rgba(255, 255, 255, 0.4);
border-radius: 50%;
box-shadow: 0 0 10px rgba(255, 255, 255, 0.6);
animation: splashParticleFloat 4s ease-in-out infinite;
}
.splash-particle:nth-child(1) { left: 10%; animation-delay: 0s; }
.splash-particle:nth-child(2) { left: 20%; animation-delay: 0.5s; }
.splash-particle:nth-child(3) { left: 30%; animation-delay: 1s; }
.splash-particle:nth-child(4) { left: 40%; animation-delay: 1.5s; }
.splash-particle:nth-child(5) { left: 50%; animation-delay: 2s; }
.splash-particle:nth-child(6) { left: 60%; animation-delay: 2.5s; }
.splash-particle:nth-child(7) { left: 70%; animation-delay: 3s; }
.splash-particle:nth-child(8) { left: 80%; animation-delay: 3.5s; }
.splash-particle:nth-child(9) { left: 90%; animation-delay: 4s; }
@keyframes splashParticleFloat {
0% {
transform: translateY(100vh) scale(0);
opacity: 0;
}
10% {
opacity: 1;
}
90% {
opacity: 1;
}
100% {
transform: translateY(-100px) scale(1);
opacity: 0;
}
}
/* Mobile responsive */
@media (max-width: 768px) {
.splash-logo {
width: 80px;
height: 80px;
}
.splash-droplet {
width: 80px;
height: 80px;
}
.splash-text {
font-size: 1.25rem;
}
.splash-progress {
width: 250px;
}
}
/* ====================
IMAGE LIGHTBOX / ZOOM
==================== */
.image-lightbox {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 100000;
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
visibility: hidden;
transition: opacity 0.4s ease, visibility 0.4s ease;
cursor: zoom-out;
pointer-events: none;
background: transparent;
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.image-lightbox.active {
opacity: 1;
visibility: visible;
pointer-events: auto;
background: linear-gradient(135deg, rgba(13, 59, 102, 0.92) 0%, rgba(0, 119, 190, 0.88) 100%);
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
}
/* Animated shimmer overlay */
.image-lightbox::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(ellipse at center, rgba(179, 229, 252, 0.1) 0%, transparent 50%);
animation: lightboxShimmer 6s ease-in-out infinite;
pointer-events: none;
}
@keyframes lightboxShimmer {
0%, 100% {
transform: translate(0, 0) scale(1);
opacity: 0.3;
}
50% {
transform: translate(10%, 10%) scale(1.2);
opacity: 0.6;
}
}
/* Image container */
.lightbox-content {
position: relative;
max-width: 90vw;
max-height: 90vh;
display: flex;
flex-direction: column;
align-items: center;
animation: lightboxZoomIn 0.4s cubic-bezier(0.4, 0, 0.2, 1);
cursor: default;
}
@keyframes lightboxZoomIn {
0% {
transform: scale(0.8);
opacity: 0;
}
100% {
transform: scale(1);
opacity: 1;
}
}
/* The enlarged image */
.lightbox-image {
max-width: 100%;
max-height: 85vh;
border-radius: 8px;
box-shadow: 0 20px 80px rgba(0, 0, 0, 0.5),
0 0 100px rgba(0, 212, 228, 0.3),
inset 0 0 0 2px rgba(255, 255, 255, 0.1);
transition: transform 0.3s ease;
}
/* Caption below image */
.lightbox-caption {
margin-top: 1.5rem;
padding: 1rem 2rem;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(232, 244, 248, 0.9) 100%);
border-radius: 12px;
color: #0D3B66;
font-size: 1.1rem;
font-style: italic;
text-align: center;
box-shadow: 0 8px 30px rgba(0, 119, 190, 0.2);
max-width: 600px;
border: 2px solid rgba(0, 212, 228, 0.2);
}
/* Close button */
.lightbox-close {
position: absolute;
top: 2rem;
right: 2rem;
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
border: 2px solid rgba(0, 212, 228, 0.3);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
z-index: 10;
box-shadow: 0 6px 20px rgba(0, 119, 190, 0.3);
}
.lightbox-close:hover {
background: #00D4E4;
transform: rotate(90deg) scale(1.1);
box-shadow: 0 10px 30px rgba(0, 212, 228, 0.5);
}
.lightbox-close::before,
.lightbox-close::after {
content: '';
position: absolute;
width: 24px;
height: 3px;
background: #0D3B66;
border-radius: 2px;
transition: background 0.3s ease;
}
.lightbox-close:hover::before,
.lightbox-close:hover::after {
background: #FFFFFF;
}
.lightbox-close::before {
transform: rotate(45deg);
}
.lightbox-close::after {
transform: rotate(-45deg);
}
/* Zoom controls */
.lightbox-controls {
position: absolute;
bottom: 2rem;
left: 50%;
transform: translateX(-50%);
display: flex;
gap: 1rem;
z-index: 10;
}
.lightbox-control-btn {
width: 50px;
height: 50px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.95);
border: 2px solid rgba(0, 212, 228, 0.3);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
color: #0D3B66;
font-size: 1.5rem;
font-weight: 700;
box-shadow: 0 6px 20px rgba(0, 119, 190, 0.3);
}
.lightbox-control-btn:hover {
background: linear-gradient(135deg, #0077BE, #00D4E4);
color: #FFFFFF;
transform: translateY(-3px) scale(1.05);
box-shadow: 0 10px 30px rgba(0, 212, 228, 0.5);
}
.lightbox-control-btn:active {
transform: translateY(-1px) scale(1);
}
/* Loading spinner */
.lightbox-loading {
position: absolute;
width: 60px;
height: 60px;
border: 4px solid rgba(255, 255, 255, 0.2);
border-top-color: #00D4E4;
border-radius: 50%;
animation: lightboxSpin 0.8s linear infinite;
}
@keyframes lightboxSpin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
/* Clickable images indicator - only for lightbox-enabled images */
.wp-block-image img.lightbox-enabled,
.kb-image img.lightbox-enabled,
.entry-content img.lightbox-enabled {
cursor: zoom-in;
}
/* Mobile responsive */
@media (max-width: 768px) {
.lightbox-content {
max-width: 95vw;
max-height: 95vh;
}
.lightbox-image {
max-height: 80vh;
}
.lightbox-caption {
font-size: 1rem;
padding: 0.75rem 1.5rem;
margin-top: 1rem;
}
.lightbox-close {
width: 45px;
height: 45px;
top: 1rem;
right: 1rem;
}
.lightbox-controls {
bottom: 1rem;
gap: 0.5rem;
}
.lightbox-control-btn {
width: 45px;
height: 45px;
font-size: 1.25rem;
}
}
/* ====================
SOCIAL PROOF NOTIFICATIONS
==================== */
.social-proof-notification {
position: fixed;
bottom: 7rem;
right: 2rem;
max-width: 350px;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, rgba(232, 244, 248, 0.95) 100%);
border-radius: 16px;
padding: 1.25rem;
box-shadow: 0 10px 40px rgba(0, 119, 190, 0.3),
0 0 20px rgba(0, 212, 228, 0.2);
border: 2px solid rgba(0, 212, 228, 0.3);
display: flex;
gap: 1rem;
align-items: center;
z-index: 10000;
transform: translateX(120%);
transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
opacity: 0;
cursor: pointer;
}
/* Prefer not to cover the bottom-right floating buttons cluster */
@media (min-width: 769px) {
.social-proof-notification {
right: calc(var(--giw-fab-right) + var(--giw-fab-avoid-right) + var(--giw-fab-stack-width) + 1rem);
}
}
.social-proof-notification.show {
transform: translateX(0);
opacity: 1;
}
.social-proof-notification.hide {
transform: translateX(120%);
opacity: 0;
}
/* Notification icon */
.social-proof-icon {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, #0077BE, #00D4E4);
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
flex-shrink: 0;
box-shadow: 0 4px 15px rgba(0, 119, 190, 0.3);
position: relative;
overflow: hidden;
}
.social-proof-icon::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
animation: iconShine 2s ease-in-out infinite;
}
@keyframes iconShine {
0%, 100% {
left: -100%;
}
50% {
left: 100%;
}
}
/* Notification content */
.social-proof-content {
flex: 1;
}
.social-proof-message {
font-size: 0.95rem;
color: #0D3B66;
margin-bottom: 0.25rem;
font-weight: 500;
line-height: 1.4;
}
.social-proof-location {
font-size: 0.85rem;
color: #4A5F7A;
opacity: 0.8;
}
.social-proof-time {
font-size: 0.8rem;
color: #0077BE;
font-weight: 600;
margin-top: 0.25rem;
}
/* Close button */
.social-proof-notification .social-proof-close {
position: absolute;
top: 0.5rem;
right: 0.5rem;
left: auto;
bottom: auto;
width: 32px;
height: 32px;
border-radius: 50%;
background: rgba(255, 255, 255, 0.55);
border: 1px solid rgba(0, 119, 190, 0.18);
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
opacity: 0.9;
transition: all 0.3s ease;
padding: 0;
appearance: none;
-webkit-appearance: none;
}
.social-proof-notification .social-proof-close:hover {
opacity: 1;
background: rgba(255, 255, 255, 0.85);
}
.social-proof-notification .social-proof-close:focus-visible {
opacity: 1;
outline: 2px solid rgba(0, 212, 228, 0.9);
outline-offset: 2px;
}
.social-proof-notification .social-proof-close::before,
.social-proof-notification .social-proof-close::after {
content: '';
position: absolute;
width: 14px;
height: 2px;
background: #0D3B66;
border-radius: 1px;
}
.social-proof-notification .social-proof-close::before {
transform: rotate(45deg);
}
.social-proof-notification .social-proof-close::after {
transform: rotate(-45deg);
}
/* Shimmer effect on hover */
.social-proof-notification:hover {
box-shadow: 0 15px 50px rgba(0, 119, 190, 0.4),
0 0 30px rgba(0, 212, 228, 0.3);
border-color: rgba(0, 212, 228, 0.5);
}
/* Mobile responsive */
@media (max-width: 768px) {
.social-proof-notification {
bottom: calc(var(--giw-fab-bottom) + var(--giw-fab-avoid-bottom) + var(--giw-fab-size) + 1.25rem);
right: 1rem;
left: 1rem;
max-width: calc(100% - 2rem);
padding: 1rem;
}
.social-proof-icon {
width: 40px;
height: 40px;
font-size: 1.25rem;
}
.social-proof-message {
font-size: 0.9rem;
}
.social-proof-location,
.social-proof-time {
font-size: 0.8rem;
}
}
/* ====================
FAQ ACCORDION
==================== */
.faq-section {
max-width: 900px;
margin: 3rem auto;
padding: 0 1rem;
}
.faq-header {
text-align: center;
margin-bottom: 3rem;
}
.faq-title {
font-size: 2.5rem;
background: linear-gradient(135deg, #0077BE 0%, #00D4E4 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1rem;
}
.faq-subtitle {
font-size: 1.2rem;
color: #4A5F7A;
opacity: 0.9;
}
/* FAQ Search */
.faq-search {
margin-bottom: 2rem;
position: relative;
}
.faq-search-input {
width: 100%;
padding: 1rem 1.5rem 1rem 3.5rem;
border: 2px solid rgba(0, 119, 190, 0.2);
border-radius: 50px;
font-size: 1rem;
background: rgba(255, 255, 255, 0.95);
transition: all 0.3s ease;
}
.faq-search-input:focus {
border-color: #00D4E4;
box-shadow: 0 0 0 4px rgba(0, 212, 228, 0.1),
0 4px 20px rgba(0, 119, 190, 0.2);
outline: none;
}
.faq-search-icon {
position: absolute;
left: 1.25rem;
top: 50%;
transform: translateY(-50%);
font-size: 1.25rem;
color: #0077BE;
pointer-events: none;
}
/* FAQ Categories */
.faq-categories {
display: flex;
gap: 1rem;
margin-bottom: 2rem;
flex-wrap: wrap;
justify-content: center;
}
.faq-category-btn {
padding: 0.75rem 1.5rem;
border: 2px solid rgba(0, 119, 190, 0.2);
border-radius: 50px;
background: rgba(255, 255, 255, 0.9);
color: #0D3B66;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.faq-category-btn:hover {
border-color: #00D4E4;
background: linear-gradient(135deg, rgba(0, 119, 190, 0.05), rgba(0, 212, 228, 0.05));
transform: translateY(-2px);
}
.faq-category-btn.active {
background: linear-gradient(135deg, #0077BE, #00D4E4);
color: #FFFFFF;
border-color: transparent;
box-shadow: 0 6px 20px rgba(0, 119, 190, 0.3);
}
/* FAQ Items */
.faq-list {
display: flex;
flex-direction: column;
gap: 1rem;
}
.faq-item {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, rgba(232, 244, 248, 0.9) 100%);
border-radius: 16px;
border: 2px solid rgba(0, 212, 228, 0.2);
overflow: hidden;
transition: all 0.3s ease;
}
.faq-item:hover {
border-color: rgba(0, 212, 228, 0.4);
box-shadow: 0 8px 30px rgba(0, 119, 190, 0.15);
transform: translateY(-2px);
}
.faq-item.active {
border-color: #00D4E4;
box-shadow: 0 10px 40px rgba(0, 119, 190, 0.2);
}
/* FAQ Question */
.faq-question {
padding: 1.5rem;
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
cursor: pointer;
user-select: none;
}
.faq-question-text {
font-size: 1.1rem;
font-weight: 600;
color: #0D3B66;
flex: 1;
}
.faq-toggle {
width: 32px;
height: 32px;
border-radius: 50%;
background: linear-gradient(135deg, #0077BE, #00D4E4);
display: flex;
align-items: center;
justify-content: center;
color: #FFFFFF;
font-size: 1.5rem;
font-weight: 700;
flex-shrink: 0;
transition: all 0.3s ease;
}
.faq-item.active .faq-toggle {
transform: rotate(45deg);
background: linear-gradient(135deg, #00D4E4, #0077BE);
}
/* FAQ Answer */
.faq-answer {
max-height: 0;
overflow: hidden;
transition: max-height 0.4s ease, padding 0.4s ease;
}
.faq-item.active .faq-answer {
max-height: 1000px;
}
.faq-answer-content {
padding: 0 1.5rem 1.5rem 1.5rem;
color: #1A3A52;
line-height: 1.8;
font-size: 1rem;
}
.faq-answer-content p {
margin-bottom: 1rem;
}
.faq-answer-content p:last-child {
margin-bottom: 0;
}
.faq-answer-content ul {
margin: 1rem 0;
padding-left: 1.5rem;
}
.faq-answer-content li {
margin-bottom: 0.5rem;
}
/* No results message */
.faq-no-results {
text-align: center;
padding: 3rem;
color: #4A5F7A;
font-size: 1.1rem;
}
.faq-no-results-icon {
font-size: 3rem;
margin-bottom: 1rem;
opacity: 0.3;
}
/* Mobile responsive */
@media (max-width: 768px) {
.faq-title {
font-size: 2rem;
}
.faq-subtitle {
font-size: 1rem;
}
.faq-categories {
gap: 0.5rem;
}
.faq-category-btn {
padding: 0.6rem 1rem;
font-size: 0.9rem;
}
.faq-question {
padding: 1.25rem;
}
.faq-question-text {
font-size: 1rem;
}
.faq-toggle {
width: 28px;
height: 28px;
font-size: 1.25rem;
}
.faq-answer-content {
padding: 0 1.25rem 1.25rem 1.25rem;
font-size: 0.95rem;
}
}
/* ====================
BOOK PREVIEW SECTION
==================== */
.book-preview-section {
max-width: 1200px;
margin: 4rem auto;
padding: 0 2rem;
}
.book-preview-container {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 4rem;
align-items: center;
margin-top: 3rem;
}
/* Book Cover 3D Display */
.book-cover-display {
position: relative;
perspective: 2000px;
display: flex;
justify-content: center;
align-items: center;
}
.book-3d {
position: relative;
width: 100%;
max-width: 400px;
aspect-ratio: 7 / 10;
transform-style: preserve-3d;
transform: perspective(1200px) rotateY(-25deg) rotateX(5deg);
transition: transform var(--dur-slow) var(--ease-flow);
filter: drop-shadow(0 20px 60px rgba(0, 119, 190, 0.4));
}
.book-3d:hover {
transform: perspective(1200px) rotateY(-5deg) rotateX(2deg) scale(1.02);
filter: drop-shadow(0 30px 80px rgba(0, 119, 190, 0.5));
}
/* Reduced motion preference */
@media (prefers-reduced-motion: reduce) {
.book-3d {
transform: none;
}
.book-3d:hover {
transform: scale(1.02);
}
}
.book-cover-front {
position: absolute;
inset: 0;
background:
/* Gloss overlay */
linear-gradient(105deg,
transparent 40%,
rgba(255, 255, 255, 0.2) 45%,
rgba(255, 255, 255, 0.1) 50%,
transparent 55%),
/* Base gradient */
linear-gradient(135deg, rgba(0, 119, 190, 0.1), rgba(0, 212, 228, 0.1));
border-radius: 8px 4px 4px 8px;
overflow: hidden;
border: 2px solid rgba(0, 212, 228, 0.3);
transform: translateZ(25px);
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.4),
0 0 0 1px rgba(0, 0, 0, 0.05);
}
.book-cover-front img {
width: 100%;
height: 100%;
object-fit: cover;
}
.book-spine {
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 50px;
background:
/* Spine highlight */
linear-gradient(90deg,
rgba(0, 0, 0, 0.2) 0%,
transparent 3%,
transparent 97%,
rgba(0, 0, 0, 0.2) 100%),
/* Base gradient */
linear-gradient(90deg, #0D3B66, #0077BE);
transform: rotateY(-90deg) translateX(-25px);
box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.3);
transform-origin: left;
display: flex;
align-items: center;
justify-content: center;
font-size: 0.8rem;
color: white;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 2px;
writing-mode: vertical-rl;
padding: 1rem 0.5rem;
}
.book-pages {
position: absolute;
inset: 8px 8px 8px auto;
width: 20px;
background: linear-gradient(90deg, #F5F5DC 0%, #FFFFFF 50%, #F5F5DC 100%);
border-radius: 0 4px 4px 0;
transform: translateZ(-2px);
box-shadow: inset -2px 0 8px rgba(0, 0, 0, 0.15);
}
.book-glow {
position: absolute;
inset: -20%;
background: radial-gradient(circle, rgba(0, 212, 228, 0.3) 0%, transparent 70%);
filter: blur(30px);
opacity: 0.6;
animation: pulseGlow 3s ease-in-out infinite;
pointer-events: none;
}
/* Book Preview Content */
.book-preview-content {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.book-preview-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1.25rem;
background: linear-gradient(135deg, rgba(0, 119, 190, 0.1), rgba(0, 212, 228, 0.1));
border: 2px solid rgba(0, 212, 228, 0.3);
border-radius: 50px;
font-size: 0.9rem;
font-weight: 700;
color: #0077BE;
width: fit-content;
}
.book-preview-title {
font-size: 2.5rem;
font-weight: 800;
background: linear-gradient(135deg, #0077BE, #00D4E4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0;
line-height: 1.2;
}
.book-preview-description {
font-size: 1.1rem;
line-height: 1.8;
color: #2C3E50;
margin: 0;
}
.book-stats {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 1.5rem;
margin: 1rem 0;
}
.book-stat {
text-align: center;
padding: 1rem;
background: rgba(255, 255, 255, 0.6);
border-radius: 12px;
border: 2px solid rgba(0, 212, 228, 0.2);
transition: all 0.3s ease;
}
.book-stat:hover {
border-color: #00D4E4;
background: rgba(255, 255, 255, 0.95);
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 119, 190, 0.15);
}
.book-stat-number {
font-size: 2rem;
font-weight: 800;
background: linear-gradient(135deg, #0077BE, #00D4E4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: block;
margin-bottom: 0.25rem;
}
.book-stat-label {
font-size: 0.85rem;
color: #5A6C7D;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.book-preview-actions {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.book-preview-btn {
flex: 1;
padding: 1rem 2rem;
border-radius: 50px;
font-weight: 700;
font-size: 1rem;
text-align: center;
text-decoration: none;
transition: all 0.3s ease;
cursor: pointer;
border: none;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
}
.book-preview-btn-primary {
background: linear-gradient(135deg, #0077BE, #00D4E4);
color: #FFFFFF;
box-shadow: 0 6px 20px rgba(0, 119, 190, 0.3);
}
.book-preview-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 119, 190, 0.4);
background: linear-gradient(135deg, #00D4E4, #0077BE);
}
.book-preview-btn-secondary {
background: rgba(255, 255, 255, 0.9);
color: #0077BE;
border: 2px solid rgba(0, 119, 190, 0.3);
}
.book-preview-btn-secondary:hover {
background: rgba(255, 255, 255, 1);
border-color: #00D4E4;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 119, 190, 0.2);
}
/* Chapter Excerpt Tabs */
.chapter-tabs {
margin-top: 4rem;
}
.chapter-tabs-header {
display: flex;
gap: 0.5rem;
border-bottom: 2px solid rgba(0, 212, 228, 0.2);
overflow-x: auto;
padding-bottom: 0;
}
.chapter-tab-btn {
padding: 1rem 1.5rem;
background: transparent;
border: none;
border-bottom: 3px solid transparent;
color: #5A6C7D;
font-weight: 600;
font-size: 0.95rem;
cursor: pointer;
transition: all 0.3s ease;
white-space: nowrap;
}
.chapter-tab-btn:hover {
color: #0077BE;
background: rgba(0, 212, 228, 0.05);
}
.chapter-tab-btn.active {
color: #0077BE;
border-bottom-color: #00D4E4;
background: rgba(0, 212, 228, 0.1);
}
.chapter-tab-content {
display: none;
padding: 2rem 0;
animation: fadeIn 0.4s ease;
}
.chapter-tab-content.active {
display: block;
}
.chapter-excerpt {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(232, 244, 248, 0.9));
border-radius: 16px;
padding: 2.5rem;
border: 2px solid rgba(0, 212, 228, 0.2);
position: relative;
overflow: hidden;
transition: transform var(--dur-base) var(--ease-flow);
}
/* Waterline Reveal Effect on Hover */
.chapter-excerpt:hover {
transform: translateY(-2px);
border-color: rgba(0, 212, 228, 0.4);
}
.chapter-excerpt::before {
content: '"';
position: absolute;
top: 1rem;
left: 1.5rem;
font-size: 6rem;
font-family: Georgia, serif;
color: rgba(0, 212, 228, 0.15);
line-height: 1;
pointer-events: none;
}
.chapter-excerpt-title {
font-size: 1.5rem;
font-weight: 700;
color: #0077BE;
margin: 0 0 1rem 0;
position: relative;
z-index: 1;
}
.chapter-excerpt-text {
font-size: 1.05rem;
line-height: 1.9;
color: #2C3E50;
margin: 0;
position: relative;
z-index: 1;
/* Waterline mask for subtle reveal effect */
mask-image: linear-gradient(
to bottom,
#000 0%,
#000 75%,
transparent 100%
);
mask-size: 100% 110%;
mask-position: 0 0;
transition: mask-position var(--dur-slow) var(--ease-flow);
}
.chapter-excerpt:hover .chapter-excerpt-text {
mask-position: 0 -5%;
}
.chapter-excerpt-text::first-letter {
font-size: 3.5rem;
font-weight: 700;
float: left;
line-height: 0.9;
margin: 0.1rem 0.5rem 0 0;
background: linear-gradient(135deg, #0077BE, #00D4E4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.chapter-read-more {
margin-top: 1.5rem;
padding: 0.75rem 2rem;
background: linear-gradient(135deg, #0077BE, #00D4E4);
color: white;
border: none;
border-radius: 50px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.chapter-read-more:hover {
transform: translateX(4px);
box-shadow: 0 6px 20px rgba(0, 119, 190, 0.3);
}
/* Responsive */
@media (max-width: 968px) {
.book-preview-container {
grid-template-columns: 1fr;
gap: 3rem;
}
.book-preview-title {
font-size: 2rem;
}
.book-stats {
grid-template-columns: repeat(3, 1fr);
gap: 1rem;
}
.book-preview-actions {
flex-direction: column;
}
.chapter-tabs-header {
gap: 0.25rem;
}
.chapter-tab-btn {
padding: 0.75rem 1rem;
font-size: 0.85rem;
}
.chapter-excerpt {
padding: 1.5rem;
}
}
/* ====================
REVIEWS & PRESS SECTION
==================== */
.reviews-section {
max-width: 1200px;
margin: 5rem auto;
padding: 0 2rem;
}
.reviews-header {
text-align: center;
margin-bottom: 4rem;
}
.reviews-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1.5rem;
background: linear-gradient(135deg, rgba(0, 119, 190, 0.1), rgba(0, 212, 228, 0.1));
border: 2px solid rgba(0, 212, 228, 0.3);
border-radius: 50px;
font-size: 0.9rem;
font-weight: 700;
color: #0077BE;
margin-bottom: 1rem;
}
.reviews-title {
font-size: 2.5rem;
font-weight: 800;
background: linear-gradient(135deg, #0077BE, #00D4E4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0 0 1rem 0;
}
.reviews-subtitle {
font-size: 1.15rem;
color: #5A6C7D;
margin: 0;
}
/* Rating Summary */
.rating-summary {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(232, 244, 248, 0.9));
border-radius: 20px;
padding: 2.5rem;
border: 2px solid rgba(0, 212, 228, 0.2);
display: grid;
grid-template-columns: 1fr 2fr;
gap: 3rem;
align-items: center;
margin-bottom: 4rem;
}
.rating-summary-score {
text-align: center;
padding: 2rem;
background: linear-gradient(135deg, #0077BE, #00D4E4);
border-radius: 16px;
color: white;
}
.rating-number {
font-size: 4rem;
font-weight: 800;
line-height: 1;
margin-bottom: 0.5rem;
display: block;
}
.rating-stars {
font-size: 2rem;
margin-bottom: 0.5rem;
letter-spacing: 0.25rem;
}
.rating-count {
font-size: 0.95rem;
opacity: 0.9;
}
.rating-breakdown {
display: flex;
flex-direction: column;
gap: 0.75rem;
}
.rating-bar {
display: flex;
align-items: center;
gap: 1rem;
}
.rating-bar-label {
font-size: 0.9rem;
font-weight: 600;
color: #5A6C7D;
min-width: 60px;
}
.rating-bar-track {
flex: 1;
height: 12px;
background: rgba(0, 119, 190, 0.1);
border-radius: 6px;
overflow: hidden;
position: relative;
}
.rating-bar-fill {
height: 100%;
background: linear-gradient(90deg, #0077BE, #00D4E4);
border-radius: 6px;
transition: width 1s ease;
}
.rating-bar-count {
font-size: 0.85rem;
color: #5A6C7D;
min-width: 40px;
text-align: right;
}
/* Press Mentions Grid */
.press-mentions {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 2rem;
margin-bottom: 4rem;
}
.press-mention {
background: rgba(255, 255, 255, 0.8);
border-radius: 16px;
padding: 2rem;
border: 2px solid rgba(0, 212, 228, 0.2);
text-align: center;
transition: all 0.3s ease;
position: relative;
overflow: hidden;
}
.press-mention::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(90deg, #0077BE, #00D4E4);
transform: scaleX(0);
transform-origin: left;
transition: transform 0.3s ease;
}
.press-mention:hover::before {
transform: scaleX(1);
}
.press-mention:hover {
transform: translateY(-4px);
border-color: #00D4E4;
box-shadow: 0 10px 30px rgba(0, 119, 190, 0.2);
}
.press-logo {
font-size: 2rem;
font-weight: 800;
background: linear-gradient(135deg, #0077BE, #00D4E4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin-bottom: 1rem;
}
.press-quote {
font-size: 1rem;
font-style: italic;
color: #2C3E50;
line-height: 1.7;
margin: 0 0 1rem 0;
}
.press-source {
font-size: 0.85rem;
color: #5A6C7D;
font-weight: 600;
}
/* Review Cards */
.reviews-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: 2rem;
margin-bottom: 3rem;
}
.review-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(232, 244, 248, 0.9));
border-radius: 16px;
padding: 2rem;
border: 2px solid rgba(0, 212, 228, 0.2);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
gap: 1rem;
}
.review-card:hover {
transform: translateY(-4px);
border-color: #00D4E4;
box-shadow: 0 10px 30px rgba(0, 119, 190, 0.2);
}
.review-header {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: 1rem;
}
.review-author-info {
display: flex;
align-items: center;
gap: 1rem;
}
.review-avatar {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, #0077BE, #00D4E4);
display: flex;
align-items: center;
justify-content: center;
color: white;
font-weight: 700;
font-size: 1.25rem;
flex-shrink: 0;
}
.review-author-details {
flex: 1;
}
.review-author-name {
font-weight: 700;
color: #0077BE;
margin: 0 0 0.25rem 0;
font-size: 1rem;
}
.review-author-title {
font-size: 0.85rem;
color: #5A6C7D;
margin: 0;
}
.review-rating {
color: #FFD700;
font-size: 1.1rem;
flex-shrink: 0;
}
.review-text {
font-size: 1rem;
line-height: 1.8;
color: #2C3E50;
margin: 0;
}
.review-verified {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-size: 0.85rem;
color: #0077BE;
font-weight: 600;
margin-top: auto;
}
/* Add Review CTA */
.add-review-cta {
text-align: center;
padding: 3rem 2rem;
background: linear-gradient(135deg, rgba(0, 119, 190, 0.05), rgba(0, 212, 228, 0.05));
border-radius: 20px;
border: 2px dashed rgba(0, 212, 228, 0.3);
}
.add-review-cta h3 {
font-size: 1.5rem;
color: #0077BE;
margin: 0 0 1rem 0;
}
.add-review-cta p {
font-size: 1rem;
color: #5A6C7D;
margin: 0 0 1.5rem 0;
}
.add-review-btn {
padding: 1rem 2.5rem;
background: linear-gradient(135deg, #0077BE, #00D4E4);
color: white;
border: none;
border-radius: 50px;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.add-review-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 119, 190, 0.4);
}
/* Responsive */
@media (max-width: 968px) {
.rating-summary {
grid-template-columns: 1fr;
gap: 2rem;
}
.press-mentions {
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}
.reviews-grid {
grid-template-columns: 1fr;
}
.reviews-title {
font-size: 2rem;
}
}
/* ====================
AUTHOR BIO SECTION
==================== */
.author-bio-section {
max-width: 1200px;
margin: 5rem auto;
padding: 0 2rem;
}
.author-bio-header {
text-align: center;
margin-bottom: 4rem;
}
.author-bio-badge {
display: inline-flex;
align-items: center;
gap: 0.5rem;
padding: 0.5rem 1.5rem;
background: linear-gradient(135deg, rgba(0, 119, 190, 0.1), rgba(0, 212, 228, 0.1));
border: 2px solid rgba(0, 212, 228, 0.3);
border-radius: 50px;
font-size: 0.9rem;
font-weight: 700;
color: #0077BE;
margin-bottom: 1rem;
}
.author-bio-title {
font-size: 2.5rem;
font-weight: 800;
background: linear-gradient(135deg, #0077BE, #00D4E4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0 0 1rem 0;
}
.author-bio-subtitle {
font-size: 1.15rem;
color: #5A6C7D;
margin: 0;
}
/* Individual Author Card */
.author-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(232, 244, 248, 0.9));
border-radius: 20px;
padding: 3rem;
border: 2px solid rgba(0, 212, 228, 0.2);
margin-bottom: 3rem;
display: grid;
grid-template-columns: 300px 1fr;
gap: 3rem;
align-items: start;
position: relative;
overflow: hidden;
}
.author-card::before {
content: '💧';
position: absolute;
top: -20px;
right: -20px;
font-size: 15rem;
opacity: 0.03;
pointer-events: none;
}
.author-card:hover {
border-color: #00D4E4;
box-shadow: 0 15px 40px rgba(0, 119, 190, 0.15);
transform: translateY(-4px);
transition: all 0.4s ease;
}
/* Author Photo */
.author-photo {
position: relative;
border-radius: 16px;
overflow: hidden;
aspect-ratio: 3 / 4;
box-shadow: 0 10px 30px rgba(0, 119, 190, 0.2);
}
.author-photo img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.author-photo::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0, 119, 190, 0.1), rgba(0, 212, 228, 0.1));
opacity: 0;
transition: opacity 0.3s ease;
}
.author-card:hover .author-photo::after {
opacity: 1;
}
/* Author Details */
.author-details {
display: flex;
flex-direction: column;
gap: 1.5rem;
}
.author-name {
font-size: 2rem;
font-weight: 800;
background: linear-gradient(135deg, #0077BE, #00D4E4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
margin: 0;
}
.author-title {
font-size: 1.1rem;
color: #5A6C7D;
font-weight: 600;
margin: -0.5rem 0 0 0;
}
.author-bio-text {
font-size: 1.05rem;
line-height: 1.9;
color: #2C3E50;
margin: 0;
}
.author-quote {
padding: 1.5rem;
background: rgba(0, 212, 228, 0.05);
border-left: 4px solid #00D4E4;
border-radius: 8px;
font-style: italic;
color: #0D3B66;
margin: 0;
position: relative;
}
.author-quote::before {
content: '"';
position: absolute;
top: 0.5rem;
left: 0.5rem;
font-size: 3rem;
font-family: Georgia, serif;
color: rgba(0, 212, 228, 0.2);
line-height: 1;
}
/* Author Stats */
.author-stats {
display: flex;
gap: 2rem;
margin-top: 1rem;
}
.author-stat {
text-align: center;
}
.author-stat-number {
font-size: 1.75rem;
font-weight: 800;
background: linear-gradient(135deg, #0077BE, #00D4E4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
display: block;
}
.author-stat-label {
font-size: 0.85rem;
color: #5A6C7D;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
/* Social Links */
.author-social {
display: flex;
gap: 1rem;
margin-top: 1rem;
}
.author-social-link {
width: 45px;
height: 45px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(0, 119, 190, 0.1), rgba(0, 212, 228, 0.1));
border: 2px solid rgba(0, 212, 228, 0.3);
display: flex;
align-items: center;
justify-content: center;
color: #0077BE;
font-size: 1.25rem;
text-decoration: none;
transition: all 0.3s ease;
}
.author-social-link:hover {
background: linear-gradient(135deg, #0077BE, #00D4E4);
color: white;
transform: translateY(-3px);
box-shadow: 0 6px 20px rgba(0, 119, 190, 0.3);
}
/* Collaboration Section */
.collaboration-section {
background: linear-gradient(135deg, rgba(0, 119, 190, 0.05), rgba(0, 212, 228, 0.05));
border-radius: 20px;
padding: 3rem;
border: 2px solid rgba(0, 212, 228, 0.2);
text-align: center;
margin-top: 4rem;
}
.collaboration-title {
font-size: 1.75rem;
font-weight: 800;
color: #0077BE;
margin: 0 0 1rem 0;
}
.collaboration-text {
font-size: 1.05rem;
line-height: 1.9;
color: #2C3E50;
margin: 0 0 2rem 0;
max-width: 800px;
margin-left: auto;
margin-right: auto;
}
.collaboration-values {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
gap: 2rem;
margin-top: 2rem;
}
.collaboration-value {
padding: 1.5rem;
background: rgba(255, 255, 255, 0.8);
border-radius: 12px;
border: 2px solid rgba(0, 212, 228, 0.2);
transition: all 0.3s ease;
}
.collaboration-value:hover {
border-color: #00D4E4;
transform: translateY(-4px);
box-shadow: 0 8px 20px rgba(0, 119, 190, 0.15);
}
.collaboration-value-icon {
font-size: 2.5rem;
margin-bottom: 0.5rem;
}
.collaboration-value-label {
font-size: 1rem;
font-weight: 700;
color: #0077BE;
margin: 0;
}
/* Contact CTA */
.author-contact-cta {
text-align: center;
padding: 3rem 2rem;
background: linear-gradient(135deg, rgba(0, 119, 190, 0.05), rgba(0, 212, 228, 0.05));
border-radius: 20px;
border: 2px dashed rgba(0, 212, 228, 0.3);
margin-top: 4rem;
}
.author-contact-cta h3 {
font-size: 1.75rem;
color: #0077BE;
margin: 0 0 1rem 0;
}
.author-contact-cta p {
font-size: 1.05rem;
color: #5A6C7D;
margin: 0 0 1.5rem 0;
}
.author-contact-btn {
padding: 1rem 2.5rem;
background: linear-gradient(135deg, #0077BE, #00D4E4);
color: white;
border: none;
border-radius: 50px;
font-weight: 700;
font-size: 1rem;
cursor: pointer;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
text-decoration: none;
}
.author-contact-btn:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 119, 190, 0.4);
}
/* Responsive */
@media (max-width: 968px) {
.author-card {
grid-template-columns: 1fr;
gap: 2rem;
padding: 2rem;
}
.author-photo {
max-width: 300px;
margin: 0 auto;
}
.author-bio-title {
font-size: 2rem;
}
.author-name {
font-size: 1.75rem;
}
.author-stats {
justify-content: center;
}
.collaboration-values {
grid-template-columns: 1fr;
}
}
/* ====================
READING PROGRESS BAR
==================== */
.reading-progress {
position: fixed;
top: 0;
left: 0;
right: 0;
height: 3px;
background: rgba(255, 255, 255, 0.1);
z-index: 999; /* Below header (1000+) but above content */
pointer-events: none;
opacity: 1;
transition: opacity var(--dur-base) var(--ease-out),
top var(--dur-quick) var(--ease-out); /* Smooth position transition */
}
/* Hide progress bar at the very top of page */
body:not(.scrolled) .reading-progress {
opacity: 0;
}
/* Ensure visibility when scrolling */
body.scrolled .reading-progress {
opacity: 1;
}
.reading-progress-bar {
height: 100%;
background: linear-gradient(90deg,
var(--water-700) 0%,
var(--water-600) 50%,
var(--water-500) 100%);
width: 0%;
transition: width 0.15s var(--ease-out);
/* Subtle glow under the bar */
box-shadow: 0 2px 8px rgba(0, 212, 228, 0.4),
0 0 12px rgba(0, 212, 228, 0.3);
position: relative;
}
/* Animated shimmer effect on progress bar */
.reading-progress-bar::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(90deg,
transparent 0%,
rgba(255, 255, 255, 0.3) 50%,
transparent 100%);
transform: translateX(-100%);
animation: progressShimmer 3s infinite;
}
@keyframes progressShimmer {
0% { transform: translateX(-100%); }
100% { transform: translateX(200%); }
}
/* ====================
PURCHASE BUTTONS
==================== */
.purchase-buttons {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
margin: 2rem 0;
}
.purchase-btn {
padding: 1rem 2rem;
border-radius: 50px;
font-weight: 700;
font-size: 1rem;
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.75rem;
border: 2px solid;
cursor: pointer;
white-space: nowrap;
}
.purchase-btn:focus-visible {
outline: 3px solid rgba(0, 212, 228, 0.9);
outline-offset: 3px;
box-shadow: 0 0 0 6px rgba(0, 119, 190, 0.25);
transform: translateY(-2px);
}
body.dark-mode .purchase-btn:focus-visible {
outline-color: rgba(179, 229, 252, 0.9);
box-shadow: 0 0 0 6px rgba(0, 212, 228, 0.35);
}
.purchase-btn-primary {
background: linear-gradient(135deg, #0077BE, #00D4E4);
color: white;
border-color: transparent;
box-shadow: 0 6px 20px rgba(0, 119, 190, 0.3);
}
.purchase-btn-primary:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 119, 190, 0.4);
background: linear-gradient(135deg, #00D4E4, #0077BE);
}
.purchase-btn-secondary {
background: rgba(255, 255, 255, 0.9);
color: #0077BE;
border-color: rgba(0, 119, 190, 0.3);
}
.purchase-btn-secondary:hover {
background: rgba(255, 255, 255, 1);
border-color: #00D4E4;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 119, 190, 0.2);
}
.purchase-btn-icon {
font-size: 1.25rem;
}
/* Retailer-specific colors */
.purchase-btn-amazon {
background: #FF9900;
color: white;
border-color: transparent;
}
.purchase-btn-amazon:hover {
background: #FFA500;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(255, 153, 0, 0.4);
}
.purchase-btn-apple {
background: #000000;
color: white;
border-color: transparent;
}
.purchase-btn-apple:hover {
background: #333333;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 0, 0, 0.4);
}
.purchase-btn-barnes {
background: #00693E;
color: white;
border-color: transparent;
}
.purchase-btn-barnes:hover {
background: #007F4A;
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(0, 105, 62, 0.4);
}
@media (prefers-reduced-motion: reduce) {
.purchase-btn,
.purchase-btn:hover,
.purchase-btn:focus-visible,
.social-share-btn,
.social-share-btn:hover,
.social-share-btn:focus-visible {
transition-duration: 0s;
transform: none;
}
}
/* ====================
SOCIAL SHARING BUTTONS
==================== */
.social-share {
display: flex;
flex-wrap: wrap;
gap: 0.75rem;
align-items: center;
margin: 2rem 0;
}
.social-share-label {
font-weight: 700;
color: #0077BE;
margin-right: 0.5rem;
}
.social-share-btn {
width: 45px;
height: 45px;
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: white;
font-size: 1.25rem;
transition: all 0.3s ease;
border: none;
cursor: pointer;
}
.social-share-btn:focus-visible {
outline: 3px solid rgba(0, 212, 228, 0.9);
outline-offset: 3px;
box-shadow: 0 0 0 6px rgba(0, 119, 190, 0.25);
transform: translateY(-3px) scale(1.05);
}
body.dark-mode .social-share-btn:focus-visible {
outline-color: rgba(179, 229, 252, 0.9);
box-shadow: 0 0 0 6px rgba(0, 212, 228, 0.3);
}
.social-share-btn:hover {
transform: translateY(-3px) scale(1.1);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
}
.social-share-twitter {
background: #1DA1F2;
}
.social-share-facebook {
background: #1877F2;
}
.social-share-linkedin {
background: #0A66C2;
}
.social-share-email {
background: linear-gradient(135deg, #0077BE, #00D4E4);
}
.social-share-copy {
background: #5A6C7D;
}
.social-share-copy.copied {
background: #00D4E4;
}
/* Sticky Social Share */
.social-share-sticky {
position: fixed;
left: 2rem;
top: 50%;
transform: translateY(-50%);
display: flex;
flex-direction: column;
gap: 0.75rem;
z-index: 1000;
}
@media (max-width: 968px) {
.social-share-sticky {
display: none;
}
.purchase-buttons {
flex-direction: column;
align-items: stretch;
}
.purchase-btn {
justify-content: center;
}
}
/* ====================
DARK MODE
==================== */
/* Dark mode styles - Midnight Water Theme with lighter top */
body.dark-mode {
background: linear-gradient(to bottom,
#1a2f45 0%,
#142441 20%,
#0f1d35 50%,
#0A1628 80%,
#0A1628 100%) !important;
background-attachment: fixed;
color: #C5E3F6;
}
body.dark-mode::before {
background:
radial-gradient(circle at 20% 80%, rgba(0, 212, 228, 0.12) 0%, transparent 50%),
radial-gradient(circle at 80% 20%, rgba(0, 119, 190, 0.10) 0%, transparent 50%),
radial-gradient(circle at 40% 40%, rgba(79, 195, 247, 0.08) 0%, transparent 50%);
}
/* Dark mode text colors */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode h5,
body.dark-mode h6 {
color: #E8F5FC;
}
/* Dark mode: Ensure h3 gradient is visible */
body.dark-mode .entry-content h3 {
background: linear-gradient(135deg, #4FC3F7 0%, #00D4E4 50%, #81D4FA 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
body.dark-mode .entry-content h3 a {
background: linear-gradient(135deg, #4FC3F7 0%, #00D4E4 50%, #81D4FA 100%) !important;
-webkit-background-clip: text !important;
-webkit-text-fill-color: transparent !important;
background-clip: text !important;
color: transparent !important;
}
body.dark-mode .entry-content h3 a:hover {
text-shadow: 0 0 25px rgba(0, 212, 228, 0.8);
filter: brightness(1.3);
}
body.dark-mode p,
body.dark-mode li,
body.dark-mode .entry-content,
body.dark-mode span,
body.dark-mode div {
color: #C5E3F6;
}
body.dark-mode a:not(h3 a) {
color: #4FC3F7 !important;
}
body.dark-mode a:not(h3 a):hover {
color: #00D4E4 !important;
}
/* Dark mode card backgrounds - Deep blue with good contrast */
body.dark-mode .faq-item,
body.dark-mode .review-card,
body.dark-mode .author-card,
body.dark-mode .chapter-excerpt,
body.dark-mode .book-preview-section,
body.dark-mode .testimonial-card,
body.dark-mode .practice-box,
body.dark-mode .entry-content blockquote {
background: linear-gradient(135deg, rgba(20, 36, 65, 0.95), rgba(13, 27, 48, 0.95)) !important;
border-color: rgba(0, 212, 228, 0.4);
color: #C5E3F6;
}
/* Dark mode section backgrounds */
body.dark-mode .site-header-wrap {
background: linear-gradient(180deg,
rgba(5, 15, 30, 0.98) 0%,
rgba(10, 30, 45, 0.96) 25%,
rgba(0, 60, 95, 0.2) 50%,
rgba(10, 30, 45, 0.96) 75%,
rgba(5, 15, 30, 0.98) 100%) !important;
}
body.dark-mode .hero-section,
body.dark-mode .entry-hero-container-inner {
background: linear-gradient(135deg,
rgb(8 65 99 / 85%) 0%,
rgb(26 92 116 / 88%) 10%,
rgb(45 118 133 / 90%) 20%,
rgb(52 143 154 / 92%) 30%,
rgb(59 167 175 / 95%) 40%,
rgb(58 157 165 / 93%) 50%,
rgb(58 146 155 / 90%) 60%,
rgb(45 131 155 / 88%) 70%,
rgb(33 117 155 / 85%) 80%,
rgb(39 105 140 / 82%) 90%,
rgb(45 93 125 / 80%) 100%) !important;
border-color: rgba(0, 212, 228, 0.3);
}
body.dark-mode .entry-hero-container-inner {
box-shadow: 0 4px 16px rgba(0, 119, 190, 0.25), inset 0 -5px 20px #152329 !important;
border-radius: 0 0 72px 72px !important;
}
body.dark-mode .entry-hero-container-inner h1 {
color: #FFFFFF !important;
/* Custom tuned turquoise text-shadow */
text-shadow: 0 2px 8px rgb(95 220 255 / 35%),
0 4px 16px rgb(68 181 231 / 78%),
0 6px 20px rgba(179, 229, 252, 0.3) !important;
/* Thin dark outline for depth and definition */
-webkit-text-stroke: 0.5px rgba(0, 40, 80, 0.4);
}
/* Gradient text for emphasis */
body.dark-mode .faq-question-text,
body.dark-mode .review-author-name,
body.dark-mode .author-name,
body.dark-mode .chapter-excerpt-title {
background: linear-gradient(135deg, #4FC3F7, #00D4E4);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
body.dark-mode .faq-answer-content,
body.dark-mode .review-text,
body.dark-mode .author-bio-text,
body.dark-mode .chapter-excerpt-text {
color: #C5E3F6;
}
/* Dark mode inputs with deep blue backgrounds */
body.dark-mode .faq-search-input,
body.dark-mode input:not([type="submit"]):not([type="button"]),
body.dark-mode textarea,
body.dark-mode select {
background: rgba(13, 27, 48, 0.95) !important;
border-color: rgba(0, 212, 228, 0.4);
color: #E8F5FC;
}
body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
color: #7A9DB8;
}
/* Dark mode buttons */
body.dark-mode button:not(.dark-mode-toggle),
body.dark-mode .btn,
body.dark-mode input[type="submit"],
body.dark-mode input[type="button"] {
background: linear-gradient(135deg, #0077BE, #00D4E4);
color: white;
border-color: rgba(0, 212, 228, 0.5);
}
body.dark-mode button:hover:not(.dark-mode-toggle),
body.dark-mode .btn:hover {
background: linear-gradient(135deg, #0091db, #00e5f5);
box-shadow: 0 8px 25px rgba(0, 212, 228, 0.4);
}
/* Dark mode WordPress block buttons - comprehensive coverage - exclude liquid-morph */
body.dark-mode .wp-block-button__link:not(.liquid-morph),
body.dark-mode .wp-block-buttons .wp-block-button__link:not(.liquid-morph),
body.dark-mode .kb-btn:not(.liquid-morph),
body.dark-mode a.button:not(.liquid-morph),
body.dark-mode .button:not(.liquid-morph) {
color: #ffffff !important;
background: linear-gradient(135deg, #0077BE, #00D4E4);
border-color: rgba(0, 212, 228, 0.3);
text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
body.dark-mode .wp-block-button__link:not(.liquid-morph):hover,
body.dark-mode .wp-block-buttons .wp-block-button__link:not(.liquid-morph):hover,
body.dark-mode .kb-btn:not(.liquid-morph):hover,
body.dark-mode a.button:not(.liquid-morph):hover,
body.dark-mode .button:not(.liquid-morph):hover {
color: #ffffff !important;
background: linear-gradient(135deg, #0091db, #00e5f5);
box-shadow: 0 8px 25px rgba(0, 212, 228, 0.4),
0 0 20px rgba(0, 212, 228, 0.3);
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
/* Outline button text visibility enhancement */
.wp-block-button.is-style-outline .wp-block-button__link:not(.has-text-color),
.wp-block-button.is-style-outline .wp-element-button:not(.has-text-color),
.button.button-style-outline:not(.has-text-color) {
text-shadow: 0 0 5px #233196 !important;
}
/* Dark mode outline buttons */
body.dark-mode .wp-block-button.is-style-outline .wp-block-button__link,
body.dark-mode .is-style-outline .wp-block-button__link {
color: #00D4E4 !important;
background: transparent;
border: 2px solid #00D4E4;
text-shadow: none;
}
body.dark-mode .wp-block-button.is-style-outline .wp-block-button__link:hover,
body.dark-mode .is-style-outline .wp-block-button__link:hover {
color: #ffffff !important;
background: rgba(0, 212, 228, 0.15);
border-color: #4FC3F7;
box-shadow: 0 0 20px rgba(0, 212, 228, 0.3);
}
/* Comprehensive gradient container dark mode overrides */
body.dark-mode .entry-content-wrap > .wp-block-group,
body.dark-mode .wp-block-group:not(.chapter-hero):not(.chapter-preview-section),
body.dark-mode .kb-row-layout-wrap,
body.dark-mode .countdown-item,
body.dark-mode .countdown-display,
body.dark-mode article.entry {
background: linear-gradient(135deg, rgba(20, 36, 65, 0.95), rgba(13, 27, 48, 0.95)) !important;
border-color: rgba(0, 212, 228, 0.4);
}
body.dark-mode .sidebar,
body.dark-mode .widget {
background: rgba(20, 36, 65, 0.85) !important;
}
/* Dark mode navigation submenus */
body.dark-mode .main-navigation .sub-menu {
background: linear-gradient(135deg, rgba(20, 36, 65, 0.98), rgba(13, 27, 48, 0.98)) !important;
border-color: rgba(0, 212, 228, 0.4) !important;
min-width: 260px !important; /* Optimal width for chapter titles */
width: max-content !important; /* Allow container to fit content */
max-width: 400px !important; /* Cap at reasonable size */
max-height: min(70vh, 560px);
overflow-y: auto;
overscroll-behavior: contain;
}
body.dark-mode .main-navigation .sub-menu a {
color: #C5E3F6 !important;
font-size: 0.95rem !important; /* Slightly smaller for better fit */
padding: 0.5rem 0.75rem !important; /* Tight, dense spacing */
}
/* Dark mode submenu links fill width */
body.dark-mode .header-navigation .header-menu-container ul ul li.menu-item > a {
width: 100% !important;
display: block !important;
box-sizing: border-box !important;
}
body.dark-mode .main-navigation .sub-menu a:hover {
background: linear-gradient(90deg, rgba(0, 212, 228, 0.2) 0%, transparent 100%) !important;
border-left-color: #00D4E4;
color: #E8F5FC !important;
}
/* Dark mode modals/popups */
body.dark-mode .kadence-conversions-modal {
background: linear-gradient(135deg, rgba(20, 36, 65, 0.98), rgba(13, 27, 48, 0.98)) !important;
border: 2px solid rgba(0, 212, 228, 0.4);
}
body.dark-mode .kadence-conversions-modal h3 {
color: #E8F5FC !important;
}
/* ====================
NAVIGATION MENU
==================== */
/* Navigation menu item padding - Override Kadence Customizer */
.main-navigation .primary-menu-container > ul > li.menu-item > a {
padding-left: 0.5em !important;
padding-right: 0.5em !important;
padding-top: 0.3em !important;
padding-bottom: 0.3em !important;
}
/* Dark mode navigation menu items */
body.dark-mode .main-navigation .primary-menu-container > ul > li.menu-item > a {
color: #C5E3F6 !important;
}
body.dark-mode .main-navigation .primary-menu-container > ul > li.menu-item:hover > a {
color: #E8F5FC !important;
}
body.dark-mode .main-navigation .primary-menu-container > ul > li.menu-item.current-menu-item > a {
color: #00D4E4 !important;
text-shadow: 0 0 8px rgba(0, 212, 228, 0.5);
}
/* Hero section header height adjustments */
.entry-hero.page-hero-section .entry-header {
min-height: 76px !important;
}
.entry-hero.page-hero-section {
padding-top: 0 !important;
padding-bottom: 1.2rem !important;
margin-top: 0 !important;
}
/* Light mode hero container styling */
.entry-hero-container-inner {
backdrop-filter: blur(10px) !important;
-webkit-backdrop-filter: blur(10px) !important;
box-shadow:
0 0 40px rgba(0, 212, 228, 0.4),
0 0 80px rgba(79, 195, 247, 0.2),
0 8px 32px rgba(0, 119, 190, 0.3),
inset 0 -7px 20px #49a8df,
inset 0 0 60px rgba(255, 255, 255, 0.1) !important;
border: 1px solid rgba(0, 212, 228, 0.3);
border-radius: 0 0 72px 72px !important;
}
/* ===================================
INTERACTIVE ENHANCEMENTS
Flash-era magic with modern tech
=================================== */
/* Animated underwater light shift on hero sections */
body.dark-mode .entry-hero-container-inner {
background-size: 200% 200% !important;
animation: underwaterShift 15s ease infinite;
}
@keyframes underwaterShift {
0%, 100% { background-position: 0% 50%; }
50% { background-position: 100% 50%; }
}
/* Glassmorphism effect on cards - frosted water glass */
.review-card,
.author-card,
.faq-item,
.testimonial-card,
.practice-box,
.book-preview-section,
.chapter-excerpt {
backdrop-filter: blur(10px) saturate(180%);
-webkit-backdrop-filter: blur(10px) saturate(180%);
box-shadow:
0 8px 32px rgba(0, 119, 190, 0.15),
inset 0 1px 0 rgba(255, 255, 255, 0.2),
0 1px 0 rgba(255, 255, 255, 0.1);
border: 1px solid rgba(255, 255, 255, 0.18);
}
body.dark-mode .review-card,
body.dark-mode .author-card,
body.dark-mode .faq-item,
body.dark-mode .testimonial-card,
body.dark-mode .practice-box,
body.dark-mode .book-preview-section,
body.dark-mode .chapter-excerpt {
backdrop-filter: blur(10px) saturate(150%);
-webkit-backdrop-filter: blur(10px) saturate(150%);
box-shadow:
0 8px 32px rgba(0, 0, 0, 0.3),
0 8px 16px rgba(0, 119, 190, 0.2),
0 16px 32px rgba(0, 212, 228, 0.1),
inset 0 1px 0 rgba(255, 255, 255, 0.1);
border: 1px solid rgba(79, 195, 247, 0.2);
}
/* Liquid button hover effect */
button:not(.dark-mode-toggle),
.btn,
.purchase-button,
input[type="submit"],
input[type="button"],
a.button {
position: relative;
overflow: hidden;
z-index: 1;
transition: all 0.3s ease;
}
button:not(.dark-mode-toggle)::before,
.btn::before,
.purchase-button::before,
input[type="submit"]::before,
input[type="button"]::before,
a.button::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 0;
background: radial-gradient(circle, rgba(0, 212, 228, 0.4), rgba(79, 195, 247, 0.2), transparent);
border-radius: 50%;
transform: translate(-50%, 50%);
transition: width 0.6s ease, height 0.6s ease;
z-index: -1;
}
button:not(.dark-mode-toggle):hover::before,
.btn:hover::before,
.purchase-button:hover::before,
input[type="submit"]:hover::before,
input[type="button"]:hover::before,
a.button:hover::before {
width: 400%;
height: 400%;
}
button:not(.dark-mode-toggle):hover,
.btn:hover,
.purchase-button:hover {
transform: translateY(-2px);
box-shadow: 0 12px 40px rgba(0, 212, 228, 0.4);
}
/* Liquid text hover effect on headings */
.entry-content h1,
.entry-content h2 {
/* REMOVED: transition: all was causing hover-out to animate backwards - animation handles everything */
}
.entry-content h1:hover,
.entry-content h2:hover {
animation: textRipple 0.6s ease-out;
cursor: default;
}
/* h3 - keeping it static and clean, no hover effects */
@keyframes textRipple {
0%, 100% {
transform: scale(1) translateY(0);
filter: blur(0px);
text-shadow: 0 0 0 transparent;
}
30% {
transform: scale(1.005) translateY(-0.5px);
filter: blur(0.2px);
}
50% {
transform: scale(1.01) translateY(-1px);
filter: blur(0.3px);
text-shadow: 0 6px 12px rgba(0, 119, 190, 0.25);
}
70% {
transform: scale(1.005) translateY(-0.5px);
filter: blur(0.2px);
}
}
/* Floating elements animation */
.author-card,
.book-preview-section .book-cover,
.water-viz-container,
.testimonial-card {
animation: float 6s ease-in-out infinite;
}
.author-card:nth-child(2n),
.testimonial-card:nth-child(2n) {
animation-delay: -3s;
}
@keyframes float {
0%, 100% {
transform: translateY(0px) rotate(0deg);
}
33% {
transform: translateY(-15px) rotate(0.5deg);
}
66% {
transform: translateY(-8px) rotate(-0.5deg);
}
}
/* Enhanced depth shadows for sections */
.entry-content .wp-block-group,
.reviews-section,
.author-bio-header,
.faq-header,
.newsletter-section {
box-shadow:
0 2px 4px rgba(0, 119, 190, 0.05),
0 8px 16px rgba(0, 119, 190, 0.1),
0 16px 32px rgba(0, 119, 190, 0.15);
transition: box-shadow 0.3s ease;
}
.entry-content .wp-block-group:hover,
.reviews-section:hover,
.newsletter-section:hover {
box-shadow:
0 4px 8px rgba(0, 119, 190, 0.08),
0 12px 24px rgba(0, 119, 190, 0.15),
0 24px 48px rgba(0, 119, 190, 0.2);
}
body.dark-mode .entry-content .wp-block-group,
body.dark-mode .reviews-section,
body.dark-mode .author-bio-header,
body.dark-mode .faq-header,
body.dark-mode .newsletter-section {
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.3),
0 8px 16px rgba(0, 119, 190, 0.2),
0 16px 32px rgba(0, 212, 228, 0.1);
}
/* Water-themed text selection */
::selection {
background: rgba(0, 212, 228, 0.3);
color: #0D3B66;
text-shadow: 0 0 8px rgba(0, 212, 228, 0.4);
}
::-moz-selection {
background: rgba(0, 212, 228, 0.3);
color: #0D3B66;
text-shadow: 0 0 8px rgba(0, 212, 228, 0.4);
}
body.dark-mode ::selection {
background: rgba(79, 195, 247, 0.4);
color: #E8F5FC;
text-shadow: 0 0 10px rgba(79, 195, 247, 0.5);
}
body.dark-mode ::-moz-selection {
background: rgba(79, 195, 247, 0.4);
color: #E8F5FC;
text-shadow: 0 0 10px rgba(79, 195, 247, 0.5);
}
/* Image hover zoom with chromatic aberration */
.entry-content img,
.post-thumbnail img,
.book-cover img {
transition: transform 0.6s ease, filter 0.6s ease;
}
.entry-content img:hover,
.post-thumbnail img:hover,
.book-cover img:hover {
transform: scale(1.05);
filter:
brightness(1.1)
saturate(1.2)
drop-shadow(3px 0 0 rgba(0, 119, 190, 0.8))
drop-shadow(-3px 0 0 rgba(0, 212, 228, 0.8));
box-shadow: 0 16px 48px rgba(0, 119, 190, 0.3);
}
/* Pulse animation for CTAs */
.btn-primary,
.purchase-button,
.newsletter-section button[type="submit"] {
animation: pulse 3s ease-in-out infinite;
}
@keyframes pulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(0, 212, 228, 0.4);
}
50% {
box-shadow: 0 0 0 10px rgba(0, 212, 228, 0);
}
}
/* Smooth scroll snap for sections (optional) */
.entry-content > section,
.entry-content > .wp-block-group {
scroll-margin-top: 100px;
}
/* Link hover with liquid underline */
.entry-content a:not(.button):not(.btn):not(h3 a) {
position: relative;
text-decoration: none;
background-image: linear-gradient(90deg, #0077BE, #00D4E4);
background-size: 0% 2px;
background-repeat: no-repeat;
background-position: left bottom;
transition: background-size 0.4s ease, color 0.3s ease;
}
.entry-content a:not(.button):not(.btn):not(h3 a):hover {
background-size: 100% 2px;
color: #00D4E4;
}
body.dark-mode .entry-content a:not(.button):not(.btn):not(h3 a):hover {
color: #4FC3F7;
text-shadow: 0 0 8px rgba(79, 195, 247, 0.3);
}
/* Rotate on hover for icons and small elements */
.social-share-button,
.faq-icon,
.purchase-button svg,
.author-social-links a {
transition: transform 0.3s ease;
}
.social-share-button:hover,
.faq-icon:hover,
.author-social-links a:hover {
transform: rotate(360deg) scale(1.1);
}
/* Smooth entrance for cards */
.review-card,
.author-card,
.testimonial-card,
.faq-item {
opacity: 0;
animation: fadeInUp 0.6s ease forwards;
}
.review-card:nth-child(1) { animation-delay: 0.1s; }
.review-card:nth-child(2) { animation-delay: 0.2s; }
.review-card:nth-child(3) { animation-delay: 0.3s; }
.review-card:nth-child(4) { animation-delay: 0.4s; }
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ===================================
ADVANCED INTERACTIVE EFFECTS
3D Tilt, SVG Blobs, Liquid Morph
=================================== */
/* 3D Card Tilt - Prepare cards for JS manipulation */
.review-card,
.author-card,
.testimonial-card,
.faq-item,
.book-preview-section,
.entry-content .wp-block-group,
article.entry,
.widget {
transform-style: preserve-3d;
backface-visibility: hidden;
-webkit-backface-visibility: hidden;
will-change: transform;
transition: transform 0.15s ease-out;
}
/* Disable floating animation during tilt to prevent conflicts */
.review-card.tilt-active,
.author-card.tilt-active,
.testimonial-card.tilt-active,
.faq-item.tilt-active,
.entry-content .wp-block-group.tilt-active,
article.entry.tilt-active,
.widget.tilt-active {
animation: none !important;
}
/* Prevent overflow issues from transforms */
/* FLICKER FIX: overflow-x on html/body breaks position:sticky AND causes layout thrashing
body,
html {
overflow-x: hidden;
}
*/
.site-container,
.entry-content-wrap,
.content-bg {
overflow: visible;
}
/* Contain transformed elements */
.entry-content .wp-block-group,
article.entry {
contain: layout style;
}
/* Parallax layers */
.parallax-layer {
will-change: transform;
transition: transform 0.1s ease-out;
}
.parallax-slow {
transform: translateZ(0);
}
.parallax-medium {
transform: translateZ(0);
}
.parallax-fast {
transform: translateZ(0);
}
/* ====================
ENHANCED ORGANIC BLOB CONTAINERS
==================== */
/* Custom properties for JS-driven transforms (smooth interpolation) */
@property --tx { syntax: ''; inherits: false; initial-value: 0px; }
@property --ty { syntax: ''; inherits: false; initial-value: 0px; }
@property --rot { syntax: ''; inherits: false; initial-value: 0deg; }
@property --sx { syntax: ''; inherits: false; initial-value: 1; }
@property --sy { syntax: ''; inherits: false; initial-value: 1; }
/* SVG Blob container - More transparent and fluid */
.blob-background {
position: absolute;
top: -5%;
left: -5%;
width: 110%;
height: 110%;
z-index: -1;
overflow: hidden;
pointer-events: none;
opacity: 0.08; /* Much more transparent */
mix-blend-mode: normal;
will-change: transform;
}
body.dark-mode .blob-background {
opacity: 0.05; /* More subtle in dark mode */
mix-blend-mode: screen;
}
.blob-background svg {
position: absolute;
width: 100%;
height: 100%;
filter: blur(0.5px); /* Soft edges */
}
/* Make SVG groups act as containers for absolute positioned blobs */
.blob-background svg g {
position: absolute;
width: 100%;
height: 100%;
}
/* Primary blob - slow organic dancer */
.blob-shape:first-child {
animation:
blobMorph 35s ease-in-out infinite,
blobWander1 60s ease-in-out infinite,
blobPulse 15s ease-in-out infinite;
animation-delay: 0s, -10s, -3s;
transform-origin: center;
filter: drop-shadow(0 10px 40px rgba(0, 119, 190, 0.15));
will-change: transform;
}
/* Secondary blob - gentle drifter */
.blob-shape:nth-child(2) {
animation:
blobMorphReverse 42s ease-in-out infinite,
blobWander2 75s ease-in-out infinite,
blobPulse 18s ease-in-out infinite;
animation-delay: -15s, -25s, -7s;
opacity: 0.6;
filter: drop-shadow(0 15px 50px rgba(0, 212, 228, 0.12));
}
/* Tertiary blob - lazy floater */
.blob-shape:nth-child(3) {
animation:
blobMorphSlow 50s ease-in-out infinite,
blobWander3 90s ease-in-out infinite,
blobPulse 20s ease-in-out infinite;
animation-delay: -20s, -45s, -12s;
opacity: 0.4;
filter: drop-shadow(0 20px 60px rgba(179, 229, 252, 0.1));
}
/* Smooth organic morphing - transform only for fluid motion */
@keyframes blobMorph {
0%, 100% {
transform: translate(0, 0) scale(1) rotate(0deg) skewX(0deg);
}
12.5% {
transform: translate(-40px, 20px) scale(1.1, 0.95) rotate(45deg) skewX(5deg);
}
25% {
transform: translate(-50px, 40px) scale(1.05, 1.1) rotate(90deg) skewX(-3deg);
}
37.5% {
transform: translate(30px, 50px) scale(0.95, 1.08) rotate(135deg) skewX(4deg);
}
50% {
transform: translate(50px, -30px) scale(0.9, 0.95) rotate(180deg) skewX(-2deg);
}
62.5% {
transform: translate(30px, -50px) scale(1.02, 0.92) rotate(225deg) skewX(3deg);
}
75% {
transform: translate(-30px, -40px) scale(1.08, 1.05) rotate(270deg) skewX(-4deg);
}
87.5% {
transform: translate(-20px, 10px) scale(1.02, 1.06) rotate(315deg) skewX(2deg);
}
}
/* Reverse morph for visual interest */
@keyframes blobMorphReverse {
0%, 100% {
transform: translate(0, 0) scale(1) rotate(360deg);
}
25% {
transform: translate(40px, -30px) scale(0.9) rotate(270deg);
}
50% {
transform: translate(-30px, -40px) scale(1.15) rotate(180deg);
}
75% {
transform: translate(-40px, 30px) scale(0.95) rotate(90deg);
}
}
/* Slow morph for background depth */
@keyframes blobMorphSlow {
0%, 100% {
transform: scale(1) rotate(0deg);
}
33% {
transform: scale(1.2) rotate(120deg);
}
66% {
transform: scale(0.85) rotate(240deg);
}
}
/* Truly independent exploration - each blob wanders uniquely */
@keyframes blobWander1 {
/* Organic exploration with pauses and direction changes */
0%, 100% {
transform: translate(0, 0) scale(1) rotate(0deg);
}
8% {
transform: translate(30px, -20px) scale(1.02) rotate(5deg);
}
16% {
transform: translate(60px, 10px) scale(0.98) rotate(-8deg);
}
24% {
transform: translate(50px, 50px) scale(1.05) rotate(12deg);
}
32% {
transform: translate(20px, 70px) scale(0.96) rotate(3deg);
}
40% {
transform: translate(-10px, 60px) scale(1.03) rotate(-5deg);
}
48% {
transform: translate(-30px, 40px) scale(0.99) rotate(8deg);
}
56% {
transform: translate(-20px, 10px) scale(1.01) rotate(-3deg);
}
64% {
transform: translate(10px, -10px) scale(0.97) rotate(10deg);
}
72% {
transform: translate(40px, 0px) scale(1.04) rotate(-6deg);
}
80% {
transform: translate(45px, 30px) scale(0.95) rotate(4deg);
}
88% {
transform: translate(25px, 20px) scale(1.02) rotate(-2deg);
}
94% {
transform: translate(10px, 5px) scale(0.98) rotate(1deg);
}
}
@keyframes blobWander2 {
/* Meandering path with different rhythm */
0%, 100% {
transform: translate(0, 0) scale(1) rotate(0deg);
}
6% {
transform: translate(-40px, 30px) scale(0.97) rotate(-10deg);
}
14% {
transform: translate(-70px, 20px) scale(1.04) rotate(7deg);
}
22% {
transform: translate(-80px, -10px) scale(0.99) rotate(-15deg);
}
30% {
transform: translate(-60px, -40px) scale(1.06) rotate(4deg);
}
38% {
transform: translate(-30px, -50px) scale(0.94) rotate(-8deg);
}
46% {
transform: translate(0px, -40px) scale(1.02) rotate(11deg);
}
54% {
transform: translate(20px, -20px) scale(0.96) rotate(-4deg);
}
62% {
transform: translate(30px, 10px) scale(1.05) rotate(9deg);
}
70% {
transform: translate(15px, 40px) scale(0.98) rotate(-12deg);
}
78% {
transform: translate(-15px, 50px) scale(1.03) rotate(6deg);
}
86% {
transform: translate(-35px, 35px) scale(0.95) rotate(-3deg);
}
93% {
transform: translate(-20px, 15px) scale(1.01) rotate(2deg);
}
}
@keyframes blobWander3 {
/* Lazy drifting with long pauses */
0%, 100% {
transform: translate(0, 0) scale(1) rotate(0deg);
}
10% {
transform: translate(-20px, -30px) scale(1.03) rotate(15deg);
}
18% {
transform: translate(10px, -45px) scale(0.97) rotate(8deg);
}
26% {
transform: translate(50px, -30px) scale(1.01) rotate(-7deg);
}
34% {
transform: translate(70px, 0px) scale(0.95) rotate(20deg);
}
42% {
transform: translate(60px, 35px) scale(1.05) rotate(-10deg);
}
50% {
transform: translate(30px, 50px) scale(0.98) rotate(5deg);
}
58% {
transform: translate(0px, 45px) scale(1.02) rotate(-18deg);
}
66% {
transform: translate(-30px, 30px) scale(0.96) rotate(12deg);
}
74% {
transform: translate(-45px, 0px) scale(1.04) rotate(-5deg);
}
82% {
transform: translate(-35px, -25px) scale(0.99) rotate(8deg);
}
90% {
transform: translate(-15px, -15px) scale(1.01) rotate(-3deg);
}
95% {
transform: translate(-5px, -5px) scale(0.98) rotate(2deg);
}
}
/* Pulse animation for organic feel */
@keyframes blobPulse {
0%, 100% { filter: brightness(1) saturate(1); }
50% { filter: brightness(1.1) saturate(1.2); }
}
/* Interactive blob response to mouse */
.blob-shape.interactive {
transition: transform 0.3s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}
.blob-shape.interactive:hover {
transform: scale(1.05);
}
/* Gradient enhancement for blobs */
.blob-gradient-enhanced {
stop-color: var(--water-500);
stop-opacity: 0.8;
transition: all 0.3s ease;
}
/* Performance optimization */
@media (prefers-reduced-motion: reduce) {
.blob-shape {
animation: none !important;
}
}
/* JS-driven mode: disable CSS keyframe transforms and use variable-composed transform */
.blob-js-drive .blob-shape {
animation: none !important; /* JS drives transform for independence */
}
.blob-js-drive .blob-shape {
transform-box: fill-box;
transform-origin: 50% 50%;
transform:
translate(var(--tx), var(--ty))
rotate(var(--rot))
scale(var(--sx), var(--sy));
}
/* Optional subtle breathing retained in JS mode via class */
.blob-breathe { animation: blobBreath 22s var(--ease-flow) infinite; }
@keyframes blobBreath { 0%,100% { transform: scale(1) } 50% { transform: scale(1.03, 0.98) } }
/* Mobile optimizations */
@media (max-width: 768px) {
.blob-background {
opacity: 0.06; /* Even more transparent on mobile */
}
.blob-shape {
animation-duration: 40s !important; /* Slower on mobile */
}
/* Hide third blob on mobile for performance */
.blob-shape:nth-child(3) {
display: none;
}
}
/* Liquid morphing buttons - see main styles in LIQUID MORPH BUTTONS section below */
/* Enhance sections with blob backgrounds */
.hero-section,
.reviews-section,
.author-bio-section,
.newsletter-section,
.book-preview-section {
position: relative;
overflow: hidden;
}
/* Subtle shimmer effect on important CTAs */
.btn-primary::after,
.purchase-button::after,
.newsletter-section button[type="submit"]::after {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: linear-gradient(
90deg,
transparent,
rgba(255, 255, 255, 0.3),
transparent
);
transform: rotate(45deg) translateX(-100%);
animation: shimmer 6s ease-in-out infinite;
pointer-events: none;
}
@keyframes shimmer {
0%, 90% {
transform: rotate(45deg) translateX(-100%);
}
100% {
transform: rotate(45deg) translateX(100%);
}
}
body.dark-mode .kadence-conversions-success {
background: linear-gradient(135deg, rgba(0, 212, 228, 0.2), rgba(79, 195, 247, 0.2)) !important;
border-color: rgba(0, 212, 228, 0.5) !important;
color: #C5E3F6 !important;
}
body.dark-mode .faq-search-input::placeholder {
color: rgba(184, 212, 232, 0.6);
}
/* Dark mode buttons */
body.dark-mode .faq-category-btn {
background: rgba(27, 38, 59, 0.8);
color: #B8D4E8;
border-color: rgba(0, 212, 228, 0.3);
}
body.dark-mode .faq-category-btn.active {
background: linear-gradient(135deg, #0077BE, #00D4E4);
color: #FFFFFF;
}
/* Dark mode cards */
body.dark-mode .book-stat,
body.dark-mode .collaboration-value,
body.dark-mode .press-mention {
background: rgba(27, 38, 59, 0.6);
border-color: rgba(0, 212, 228, 0.3);
}
/* Dark mode rating summary */
body.dark-mode .rating-summary {
background: linear-gradient(135deg, rgba(27, 38, 59, 0.95), rgba(13, 27, 42, 0.9));
border-color: rgba(0, 212, 228, 0.3);
}
body.dark-mode .rating-bar-track {
background: rgba(0, 119, 190, 0.2);
}
/* Dark mode text colors */
body.dark-mode .author-title,
body.dark-mode .review-author-title,
body.dark-mode .book-stat-label,
body.dark-mode .author-stat-label,
body.dark-mode .press-source,
body.dark-mode .reviews-subtitle {
color: #8BA8C0;
}
/* Dark mode quotes */
body.dark-mode .author-quote {
background: rgba(0, 212, 228, 0.1);
border-left-color: #00D4E4;
color: #B8D4E8;
}
/* Dark mode CTA sections */
body.dark-mode .add-review-cta,
body.dark-mode .author-contact-cta,
body.dark-mode .collaboration-section {
background: linear-gradient(135deg, rgba(0, 119, 190, 0.1), rgba(0, 212, 228, 0.1));
border-color: rgba(0, 212, 228, 0.3);
}
body.dark-mode .add-review-cta h3,
body.dark-mode .author-contact-cta h3,
body.dark-mode .collaboration-title {
color: #00D4E4;
}
body.dark-mode .add-review-cta p,
body.dark-mode .author-contact-cta p,
body.dark-mode .collaboration-text {
color: #B8D4E8;
}
/* Dark mode lightbox */
body.dark-mode .image-lightbox.active {
background: rgba(13, 27, 42, 0.95);
}
body.dark-mode .lightbox-caption {
color: #B8D4E8;
}
/* Dark mode social proof */
body.dark-mode .social-proof-notification {
background: linear-gradient(135deg, rgba(20, 36, 65, 0.98), rgba(13, 27, 48, 0.95));
border-color: rgba(0, 212, 228, 0.5);
color: #C5E3F6;
}
/* Dark mode header */
body.dark-mode .site-header-wrap {
background: rgba(13, 27, 42, 0.95) !important;
/* FLICKER FIX: backdrop-filter forces expensive blur composite on every frame - removed
backdrop-filter: blur(20px) !important;
*/
}
/* Dark mode gradient for inner header elements */
body.dark-mode #masthead .kadence-sticky-header,
body.dark-mode #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start),
body.dark-mode #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start):not(.site-header-row-container):not(.site-main-header-wrap),
body.dark-mode #masthead .kadence-sticky-header.item-is-fixed:not(.item-at-start) > .site-header-row-container-inner,
body.dark-mode #masthead .site-header-row-container-inner,
body.dark-mode #masthead .site-main-header-wrap {
background: linear-gradient(135deg,
rgba(13, 27, 42, 0.98) 0%,
rgba(20, 50, 70, 0.96) 25%,
rgba(0, 119, 190, 0.15) 50%,
rgba(20, 50, 70, 0.96) 75%,
rgba(13, 27, 42, 0.98) 100%) !important;
}
/* Dark mode responsive header consistency */
@media (max-width: 1024px) {
body.dark-mode #masthead,
body.dark-mode #masthead .site-header-wrap,
body.dark-mode #masthead .site-main-header-wrap,
body.dark-mode #masthead .site-header-row-container-inner {
background: linear-gradient(135deg,
rgba(13, 27, 42, 0.98) 0%,
rgba(20, 50, 70, 0.96) 25%,
rgba(0, 119, 190, 0.15) 50%,
rgba(20, 50, 70, 0.96) 75%,
rgba(13, 27, 42, 0.98) 100%) !important;
}
}
@media (max-width: 768px) {
body.dark-mode .site-header-wrap,
body.dark-mode #masthead,
body.dark-mode #masthead .site-header-wrap,
body.dark-mode #masthead .site-main-header-wrap {
background: linear-gradient(135deg,
rgba(13, 27, 42, 0.98) 0%,
rgba(20, 50, 70, 0.96) 25%,
rgba(0, 119, 190, 0.15) 50%,
rgba(20, 50, 70, 0.96) 75%,
rgba(13, 27, 42, 0.98) 100%) !important;
}
}
/* Smooth transition for dark mode */
body,
body::before,
.faq-item,
.review-card,
.author-card,
.chapter-excerpt,
.faq-search-input,
.faq-category-btn,
.book-stat,
.collaboration-value,
.press-mention,
.rating-summary,
.author-quote,
.add-review-cta,
.author-contact-cta,
.collaboration-section {
transition: background 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
/* FLICKER FIX: .site-header-wrap removed from background transition - causes paint invalidations during scroll */
@media (max-width: 768px) {
.dark-mode-toggle {
bottom: 1.5rem !important;
right: 1.5rem !important;
width: 50px;
height: 50px;
}
.dark-mode-toggle-icon {
font-size: 1.5rem;
}
}
/* ====================
VIDEO PLAYER
==================== */
.video-player-container {
max-width: 900px;
margin: 3rem auto;
position: relative;
border-radius: 20px;
overflow: hidden;
box-shadow: 0 15px 50px rgba(0, 119, 190, 0.3);
background: #000;
}
.video-player-wrapper {
position: relative;
padding-bottom: 56.25%; /* 16:9 aspect ratio */
height: 0;
overflow: hidden;
}
.video-player-wrapper iframe,
.video-player-wrapper video {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
.video-player-overlay {
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(0, 119, 190, 0.2), rgba(0, 212, 228, 0.2));
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
transition: all 0.3s ease;
z-index: 10;
}
.video-player-overlay.hidden {
opacity: 0;
pointer-events: none;
}
.video-play-button {
width: 100px;
height: 100px;
border-radius: 50%;
background: linear-gradient(135deg, #0077BE, #00D4E4);
border: 4px solid rgba(255, 255, 255, 0.9);
display: flex;
align-items: center;
justify-content: center;
font-size: 2.5rem;
color: white;
transition: all 0.3s ease;
box-shadow: 0 10px 30px rgba(0, 119, 190, 0.5);
}
.video-play-button:hover {
transform: scale(1.15);
box-shadow: 0 15px 40px rgba(0, 119, 190, 0.7);
}
.video-title {
text-align: center;
font-size: 1.5rem;
font-weight: 700;
color: #0077BE;
margin: 1.5rem 0 0.5rem 0;
}
.video-description {
text-align: center;
color: #5A6C7D;
margin: 0 0 1.5rem 0;
}
/* ====================
AUDIO PLAYER
==================== */
.audio-player-container {
max-width: 700px;
margin: 2rem auto;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(232, 244, 248, 0.9));
border-radius: 16px;
padding: 2rem;
border: 2px solid rgba(0, 212, 228, 0.2);
box-shadow: 0 10px 30px rgba(0, 119, 190, 0.2);
}
.audio-player-info {
display: flex;
align-items: center;
gap: 1.5rem;
margin-bottom: 1.5rem;
}
.audio-player-artwork {
width: 80px;
height: 80px;
border-radius: 12px;
background: linear-gradient(135deg, #0077BE, #00D4E4);
display: flex;
align-items: center;
justify-content: center;
font-size: 2rem;
color: white;
flex-shrink: 0;
box-shadow: 0 6px 20px rgba(0, 119, 190, 0.3);
}
.audio-player-artwork img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 12px;
}
.audio-player-details {
flex: 1;
}
.audio-player-title {
font-size: 1.25rem;
font-weight: 700;
color: #0077BE;
margin: 0 0 0.25rem 0;
}
.audio-player-subtitle {
font-size: 0.95rem;
color: #5A6C7D;
margin: 0;
}
.audio-player-controls {
display: flex;
align-items: center;
gap: 1rem;
margin-bottom: 1rem;
}
.audio-play-btn {
width: 50px;
height: 50px;
border-radius: 50%;
background: linear-gradient(135deg, #0077BE, #00D4E4);
border: none;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
color: white;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 6px 20px rgba(0, 119, 190, 0.3);
flex-shrink: 0;
}
.audio-play-btn:hover {
transform: scale(1.1);
box-shadow: 0 8px 25px rgba(0, 119, 190, 0.4);
}
.audio-time-display {
font-size: 0.9rem;
color: #5A6C7D;
font-weight: 600;
min-width: 100px;
text-align: center;
}
.audio-progress-container {
flex: 1;
height: 8px;
background: rgba(0, 119, 190, 0.1);
border-radius: 4px;
cursor: pointer;
position: relative;
overflow: hidden;
}
.audio-progress-bar {
height: 100%;
background: linear-gradient(90deg, #0077BE, #00D4E4);
border-radius: 4px;
width: 0%;
transition: width 0.1s linear;
position: relative;
}
.audio-progress-bar::after {
content: '';
position: absolute;
right: 0;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
background: white;
border-radius: 50%;
box-shadow: 0 2px 8px rgba(0, 119, 190, 0.4);
}
.audio-volume-control {
display: flex;
align-items: center;
gap: 0.5rem;
}
.audio-volume-icon {
font-size: 1.25rem;
color: #0077BE;
cursor: pointer;
}
.audio-volume-slider {
width: 80px;
height: 6px;
border-radius: 3px;
background: rgba(0, 119, 190, 0.1);
appearance: none;
outline: none;
cursor: pointer;
}
.audio-volume-slider::-webkit-slider-thumb {
appearance: none;
width: 14px;
height: 14px;
border-radius: 50%;
background: linear-gradient(135deg, #0077BE, #00D4E4);
cursor: pointer;
box-shadow: 0 2px 6px rgba(0, 119, 190, 0.3);
}
.audio-volume-slider::-moz-range-thumb {
width: 14px;
height: 14px;
border-radius: 50%;
background: linear-gradient(135deg, #0077BE, #00D4E4);
cursor: pointer;
border: none;
box-shadow: 0 2px 6px rgba(0, 119, 190, 0.3);
}
/* Hide native audio element */
.audio-player-container audio {
display: none;
}
/* Dark mode adjustments */
body.dark-mode .audio-player-container {
background: linear-gradient(135deg, rgba(27, 38, 59, 0.95), rgba(13, 27, 42, 0.9));
border-color: rgba(0, 212, 228, 0.3);
}
body.dark-mode .audio-player-title {
background: linear-gradient(135deg, #00D4E4, #4FC3F7);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
body.dark-mode .audio-player-subtitle,
body.dark-mode .audio-time-display {
color: #8BA8C0;
}
/* Responsive */
@media (max-width: 768px) {
.audio-player-info {
flex-direction: column;
text-align: center;
}
.audio-player-controls {
flex-wrap: wrap;
}
.audio-volume-control {
width: 100%;
justify-content: center;
}
.audio-volume-slider {
flex: 1;
max-width: 200px;
}
}
/* ====================
NEWSLETTER FORM
==================== */
.newsletter-container {
max-width: 800px;
margin: 4rem auto;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(232, 244, 248, 0.9));
border-radius: 24px;
padding: 3rem;
box-shadow: 0 15px 50px rgba(0, 119, 190, 0.15);
border: 1px solid rgba(0, 212, 228, 0.2);
position: relative;
overflow: hidden;
}
.newsletter-container::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
width: 200%;
height: 200%;
background: radial-gradient(circle, rgba(0, 212, 228, 0.05) 0%, transparent 70%);
animation: waterGlow 8s ease-in-out infinite;
}
.newsletter-content {
position: relative;
z-index: 1;
}
.newsletter-title {
font-size: 2rem;
font-weight: 700;
color: var(--primary-blue);
margin: 0 0 1rem 0;
text-align: center;
}
.newsletter-description {
font-size: 1.1rem;
color: var(--text-medium);
margin: 0 0 2rem 0;
text-align: center;
line-height: 1.6;
}
.newsletter-form {
display: flex;
flex-direction: column;
gap: 1rem;
}
.newsletter-field {
position: relative;
}
.newsletter-input {
width: 100%;
padding: 1rem 1.5rem;
border: 2px solid rgba(0, 212, 228, 0.3);
border-radius: 12px;
font-size: 1rem;
background: white;
transition: all 0.3s ease;
color: var(--text-dark);
}
.newsletter-input:focus {
outline: none;
border-color: var(--accent-cyan);
box-shadow: 0 0 0 4px rgba(0, 212, 228, 0.1),
0 8px 20px rgba(0, 119, 190, 0.15);
transform: translateY(-1px);
}
.newsletter-input::placeholder {
color: var(--text-medium);
opacity: 0.7;
}
.newsletter-gdpr {
padding: 0.5rem 0;
}
.newsletter-checkbox-label {
display: flex;
align-items: flex-start;
gap: 0.75rem;
cursor: pointer;
user-select: none;
}
.newsletter-checkbox {
margin-top: 3px;
width: 20px;
height: 20px;
cursor: pointer;
accent-color: var(--primary-blue);
}
.newsletter-checkbox-text {
font-size: 0.9rem;
color: var(--text-medium);
line-height: 1.5;
}
.newsletter-button {
padding: 1.25rem 2.5rem;
background: linear-gradient(135deg, var(--primary-blue), var(--accent-cyan));
color: white;
border: none;
border-radius: 50px;
font-size: 1.1rem;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
gap: 0.5rem;
box-shadow: 0 6px 20px rgba(0, 119, 190, 0.3);
position: relative;
overflow: hidden;
}
.newsletter-button::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s ease, height 0.6s ease;
}
.newsletter-button:hover::before {
width: 300px;
height: 300px;
}
.newsletter-button:hover {
transform: translateY(-2px);
box-shadow: 0 10px 30px rgba(0, 119, 190, 0.4);
}
.newsletter-button:active {
transform: translateY(0);
}
.newsletter-button:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.newsletter-button-text,
.newsletter-button-icon {
position: relative;
z-index: 1;
}
.newsletter-button-icon {
font-size: 1.3rem;
transition: transform 0.3s ease;
}
.newsletter-button:hover .newsletter-button-icon {
transform: translateX(4px);
}
.newsletter-message {
padding: 1rem 1.5rem;
border-radius: 12px;
text-align: center;
font-weight: 600;
margin-top: 0.5rem;
}
.newsletter-success {
background: rgba(46, 204, 113, 0.1);
border: 2px solid rgba(46, 204, 113, 0.3);
color: #27ae60;
}
.newsletter-error {
background: rgba(231, 76, 60, 0.1);
border: 2px solid rgba(231, 76, 60, 0.3);
color: #c0392b;
}
.newsletter-benefits {
display: flex;
justify-content: center;
gap: 2rem;
margin-top: 2.5rem;
padding-top: 2rem;
border-top: 1px solid rgba(0, 212, 228, 0.2);
position: relative;
z-index: 1;
}
.newsletter-benefit {
display: flex;
flex-direction: column;
align-items: center;
gap: 0.5rem;
text-align: center;
}
.newsletter-benefit-icon {
font-size: 2rem;
filter: drop-shadow(0 2px 4px rgba(0, 119, 190, 0.2));
}
.newsletter-benefit-text {
font-size: 0.9rem;
color: var(--text-medium);
font-weight: 600;
}
/* Dark Mode Styles */
body.dark-mode .newsletter-container {
background: linear-gradient(135deg, rgba(27, 38, 59, 0.95), rgba(13, 27, 42, 0.9));
border-color: rgba(0, 212, 228, 0.3);
}
body.dark-mode .newsletter-title {
color: var(--accent-cyan);
}
body.dark-mode .newsletter-description,
body.dark-mode .newsletter-checkbox-text,
body.dark-mode .newsletter-benefit-text {
color: #B8D4E8;
}
body.dark-mode .newsletter-input {
background: rgba(13, 27, 42, 0.6);
border-color: rgba(0, 212, 228, 0.3);
color: #E0F4FF;
}
body.dark-mode .newsletter-input::placeholder {
color: #7A9DB8;
}
body.dark-mode .newsletter-input:focus {
background: rgba(13, 27, 42, 0.8);
border-color: var(--accent-cyan);
}
/* Mobile Responsive */
@media (max-width: 768px) {
.newsletter-container {
margin: 2rem auto;
padding: 2rem 1.5rem;
}
.newsletter-title {
font-size: 1.5rem;
}
.newsletter-description {
font-size: 1rem;
}
.newsletter-benefits {
flex-direction: column;
gap: 1rem;
}
.newsletter-benefit {
flex-direction: row;
justify-content: center;
}
.newsletter-button {
padding: 1rem 2rem;
font-size: 1rem;
}
}
/* ====================
BLOG / ARTICLES
==================== */
/* Blog Section Headers */
.blog-section-title {
font-size: 2.5rem;
font-weight: 700;
color: var(--primary-blue);
margin: 0 0 2rem 0;
text-align: center;
position: relative;
}
.blog-section-title::after {
content: '';
display: block;
width: 80px;
height: 4px;
background: linear-gradient(90deg, var(--primary-blue), var(--accent-cyan));
margin: 1rem auto 0;
border-radius: 2px;
}
/* Blog Category Filter */
.blog-category-filter {
display: flex;
flex-wrap: wrap;
gap: 1rem;
justify-content: center;
margin: 0 auto 3rem;
max-width: 900px;
}
.blog-filter-btn {
padding: 0.75rem 1.5rem;
background: white;
border: 2px solid rgba(0, 212, 228, 0.3);
border-radius: 50px;
color: var(--primary-blue);
font-weight: 600;
text-decoration: none;
transition: all 0.3s ease;
display: inline-flex;
align-items: center;
gap: 0.5rem;
}
.blog-filter-btn:hover,
.blog-filter-btn.active {
background: linear-gradient(135deg, var(--primary-blue), var(--accent-cyan));
color: white;
border-color: var(--accent-cyan);
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 119, 190, 0.3);
}
.blog-filter-count {
background: rgba(255, 255, 255, 0.2);
padding: 0.125rem 0.5rem;
border-radius: 20px;
font-size: 0.85rem;
}
.blog-filter-btn.active .blog-filter-count {
background: rgba(255, 255, 255, 0.3);
}
/* Blog Post Grid */
.blog-posts-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 2rem;
margin: 0 auto;
max-width: 1200px;
}
.blog-posts-list {
display: flex;
flex-direction: column;
gap: 2rem;
margin: 0 auto;
max-width: 800px;
}
/* Blog Post Card */
.blog-post-card {
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95), rgba(232, 244, 248, 0.9));
border-radius: 16px;
overflow: hidden;
box-shadow: 0 8px 30px rgba(0, 119, 190, 0.1);
border: 1px solid rgba(0, 212, 228, 0.2);
transition: all 0.3s ease;
display: flex;
flex-direction: column;
}
.blog-post-card:hover {
transform: translateY(-5px);
box-shadow: 0 15px 40px rgba(0, 119, 190, 0.2);
}
.blog-post-card.featured {
border: 2px solid rgba(0, 212, 228, 0.4);
}
/* Post Image */
.blog-post-image {
position: relative;
display: block;
overflow: hidden;
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, #E8F4F8, #D4EAF2);
}
.blog-post-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s ease;
}
.blog-post-card:hover .blog-post-image img {
transform: scale(1.05);
}
.blog-post-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(0, 119, 190, 0.8), rgba(0, 212, 228, 0.8));
display: flex;
align-items: center;
justify-content: center;
opacity: 0;
transition: opacity 0.3s ease;
}
.blog-post-card:hover .blog-post-overlay {
opacity: 1;
}
.blog-post-read-more {
color: white;
font-weight: 700;
font-size: 1.1rem;
text-transform: uppercase;
letter-spacing: 1px;
}
/* Post Content */
.blog-post-content {
padding: 1.5rem;
display: flex;
flex-direction: column;
gap: 0.75rem;
flex: 1;
}
.blog-post-meta-top {
margin-bottom: 0.25rem;
}
.blog-post-category {
display: inline-block;
padding: 0.375rem 1rem;
background: linear-gradient(135deg, rgba(0, 119, 190, 0.1), rgba(0, 212, 228, 0.1));
border: 1px solid rgba(0, 212, 228, 0.3);
border-radius: 50px;
color: var(--primary-blue);
font-size: 0.85rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.blog-post-title {
margin: 0;
font-size: 1.4rem;
font-weight: 700;
line-height: 1.3;
}
.blog-post-title a {
color: var(--text-dark);
text-decoration: none;
transition: color 0.3s ease;
}
.blog-post-title a:hover {
color: var(--primary-blue);
}
.blog-post-excerpt {
color: var(--text-medium);
line-height: 1.6;
flex: 1;
font-size: 0.95rem;
}
.blog-post-meta {
display: flex;
align-items: center;
gap: 1.5rem;
flex-wrap: wrap;
padding-top: 0.75rem;
border-top: 1px solid rgba(0, 212, 228, 0.2);
margin-top: auto;
}
.blog-post-author,
.blog-post-date {
display: flex;
align-items: center;
gap: 0.5rem;
color: var(--text-medium);
font-size: 0.9rem;
}
.blog-post-author svg,
.blog-post-date svg {
opacity: 0.7;
}
.blog-no-posts {
text-align: center;
padding: 3rem;
color: var(--text-medium);
font-size: 1.1rem;
}
/* Blog Featured Section */
.blog-featured-section {
margin: 4rem auto;
max-width: 1200px;
padding: 0 1rem;
}
.blog-recent-section {
margin: 4rem auto;
max-width: 1200px;
padding: 0 1rem;
}
/* List Layout */
.blog-posts-list .blog-post-card {
flex-direction: row;
}
.blog-posts-list .blog-post-image {
flex: 0 0 300px;
aspect-ratio: 4 / 3;
}
.blog-posts-list .blog-post-content {
flex: 1;
padding: 2rem;
}
/* Dark Mode Styles */
body.dark-mode .blog-post-card {
background: linear-gradient(135deg, rgba(27, 38, 59, 0.95), rgba(13, 27, 42, 0.9));
border-color: rgba(0, 212, 228, 0.3);
}
body.dark-mode .blog-post-title a {
color: #E0F4FF;
}
body.dark-mode .blog-post-title a:hover {
color: var(--accent-cyan);
}
body.dark-mode .blog-post-excerpt,
body.dark-mode .blog-post-author,
body.dark-mode .blog-post-date {
color: #B8D4E8;
}
body.dark-mode .blog-section-title {
color: var(--accent-cyan);
}
body.dark-mode .blog-filter-btn {
background: rgba(27, 38, 59, 0.8);
border-color: rgba(0, 212, 228, 0.3);
color: #E0F4FF;
}
body.dark-mode .blog-filter-btn:hover,
body.dark-mode .blog-filter-btn.active {
background: linear-gradient(135deg, var(--primary-blue), var(--accent-cyan));
color: white;
}
body.dark-mode .blog-post-category {
background: linear-gradient(135deg, rgba(0, 119, 190, 0.2), rgba(0, 212, 228, 0.2));
border-color: rgba(0, 212, 228, 0.4);
color: var(--accent-cyan);
}
body.dark-mode .blog-post-meta {
border-top-color: rgba(0, 212, 228, 0.3);
}
body.dark-mode .blog-post-image {
background: linear-gradient(135deg, #1B263B, #0D1B2A);
}
/* Mobile Responsive */
@media (max-width: 968px) {
.blog-posts-grid {
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: 1.5rem;
}
.blog-posts-list .blog-post-card {
flex-direction: column;
}
.blog-posts-list .blog-post-image {
flex: 0 0 auto;
width: 100%;
aspect-ratio: 16 / 9;
}
.blog-posts-list .blog-post-content {
padding: 1.5rem;
}
}
@media (max-width: 768px) {
.blog-section-title {
font-size: 2rem;
}
.blog-posts-grid {
grid-template-columns: 1fr;
}
.blog-category-filter {
gap: 0.75rem;
margin-bottom: 2rem;
}
.blog-filter-btn {
padding: 0.5rem 1rem;
font-size: 0.9rem;
}
.blog-post-title {
font-size: 1.2rem;
}
.blog-featured-section,
.blog-recent-section {
margin: 2rem auto;
padding: 0 1rem;
}
}
/* ====================
ENHANCED SEARCH
==================== */
.enhanced-search-container {
max-width: 800px;
margin: 3rem auto;
position: relative;
}
.enhanced-search-wrapper {
display: flex;
align-items: center;
gap: 0.75rem;
background: white;
border: 2px solid rgba(0, 212, 228, 0.3);
border-radius: 50px;
padding: 0.5rem;
box-shadow: 0 6px 20px rgba(0, 119, 190, 0.15);
transition: all 0.3s ease;
}
.enhanced-search-wrapper:focus-within {
border-color: var(--accent-cyan);
box-shadow: 0 8px 30px rgba(0, 119, 190, 0.25);
}
.enhanced-search-icon {
display: flex;
align-items: center;
justify-content: center;
padding: 0 1rem;
color: var(--primary-blue);
}
.enhanced-search-input {
flex: 1;
border: none;
outline: none;
padding: 0.75rem 0.5rem;
font-size: 1rem;
color: var(--text-dark);
background: transparent;
}
.enhanced-search-input::placeholder {
color: var(--text-medium);
opacity: 0.7;
}
.enhanced-search-category {
padding: 0.75rem 1rem;
border: none;
outline: none;
background: rgba(0, 212, 228, 0.1);
border-radius: 25px;
color: var(--primary-blue);
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
}
.enhanced-search-category:hover {
background: rgba(0, 212, 228, 0.2);
}
.enhanced-search-button {
padding: 0.75rem 2rem;
background: linear-gradient(135deg, var(--primary-blue), var(--accent-cyan));
color: white;
border: none;
border-radius: 25px;
font-weight: 700;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(0, 119, 190, 0.3);
}
.enhanced-search-button:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(0, 119, 190, 0.4);
}
.enhanced-search-button:active {
transform: translateY(0);
}
.enhanced-search-suggestions {
position: absolute;
top: calc(100% + 0.5rem);
left: 0;
right: 0;
background: white;
border: 2px solid rgba(0, 212, 228, 0.3);
border-radius: 16px;
box-shadow: 0 10px 30px rgba(0, 119, 190, 0.2);
z-index: 1000;
overflow: hidden;
}
.search-suggestion-item,
.search-suggestion-hint {
padding: 1rem 1.5rem;
border-bottom: 1px solid rgba(0, 212, 228, 0.1);
}
.search-suggestion-item.loading {
text-align: center;
color: var(--text-medium);
font-style: italic;
}
.search-suggestion-hint {
text-align: center;
color: var(--primary-blue);
font-weight: 600;
}
/* Dark Mode Styles */
body.dark-mode .enhanced-search-wrapper {
background: rgba(27, 38, 59, 0.8);
border-color: rgba(0, 212, 228, 0.3);
}
body.dark-mode .enhanced-search-input {
color: #E0F4FF;
}
body.dark-mode .enhanced-search-input::placeholder {
color: #7A9DB8;
}
body.dark-mode .enhanced-search-category {
background: rgba(0, 212, 228, 0.2);
color: var(--accent-cyan);
}
body.dark-mode .enhanced-search-suggestions {
background: rgba(27, 38, 59, 0.95);
border-color: rgba(0, 212, 228, 0.3);
}
body.dark-mode .search-suggestion-item,
body.dark-mode .search-suggestion-hint {
color: #E0F4FF;
border-bottom-color: rgba(0, 212, 228, 0.2);
}
/* Mobile Responsive */
@media (max-width: 768px) {
.enhanced-search-container {
margin: 2rem auto;
padding: 0 1rem;
}
.enhanced-search-wrapper {
flex-wrap: wrap;
border-radius: 20px;
padding: 0.75rem;
}
.enhanced-search-input {
width: 100%;
order: 1;
}
.enhanced-search-icon {
order: 0;
padding: 0 0.5rem;
}
.enhanced-search-category {
order: 2;
flex: 1;
font-size: 0.9rem;
}
.enhanced-search-button {
order: 3;
flex: 1;
padding: 0.75rem 1rem;
}
}
/* ====================
MOBILE RESPONSIVE
==================== */
/* Tablet/Mobile Header Consistency - Keep water gradient */
@media (max-width: 1024px) {
#masthead,
#masthead .site-header-wrap,
#masthead .site-main-header-wrap,
#masthead .site-header-row-container-inner {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(232, 244, 248, 0.96) 25%,
rgba(179, 229, 252, 0.94) 50%,
rgba(232, 244, 248, 0.96) 75%,
rgba(255, 255, 255, 0.98) 100%) !important;
}
/* Ensure logo stays visible - aggressive overrides for all possible selectors */
.site-branding,
.site-branding a,
.site-branding .custom-logo-link,
.site-branding .custom-logo,
#masthead .site-branding,
#masthead .site-branding a,
#masthead .site-branding .custom-logo-link,
#masthead .site-branding .custom-logo,
.site-header-row .site-branding,
.site-header-row .site-branding a,
.site-header-row .site-branding img,
.site-title-wrap,
.site-logo,
#logo,
.header-logo,
img.custom-logo,
.site-header-item-branding,
.site-branding-inner-wrap {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
max-height: none !important;
height: auto !important;
}
/* Override any Kadence responsive display settings */
.site-branding[style*="display: none"],
.site-branding[style*="display:none"],
.custom-logo[style*="display: none"],
.custom-logo[style*="display:none"] {
display: block !important;
}
}
/* Specific override for tablet range where logo disappears */
@media (min-width: 720px) and (max-width: 1024px) {
/* Force logo visibility in problematic tablet range */
.site-branding,
.site-branding *,
#masthead .site-branding,
#masthead .site-branding *,
.custom-logo-link,
.custom-logo,
img.custom-logo {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
}
/* Target Kadence's responsive classes */
.kadence-hide-tablet,
.hide-on-tablet,
[class*="tablet-hidden"] {
display: block !important;
}
}
@media (max-width: 768px) {
body::before {
opacity: 0.5;
}
.site-header-wrap,
#masthead,
#masthead .site-header-wrap,
#masthead .site-main-header-wrap {
background: linear-gradient(135deg,
rgba(255, 255, 255, 0.98) 0%,
rgba(232, 244, 248, 0.96) 25%,
rgba(179, 229, 252, 0.94) 50%,
rgba(232, 244, 248, 0.96) 75%,
rgba(255, 255, 255, 0.98) 100%) !important;
/* REMOVED - backdrop-filter breaks Kadence sticky
backdrop-filter: blur(15px) !important;
*/
}
h1 { font-size: 2rem; }
h2 { font-size: 1.75rem; }
h3 { font-size: 1.5rem; }
/*
* Gutenberg headings often include inline font sizes that can explode on small screens.
* Keep them readable and prevent awkward mid-word breaks (e.g. "Consciousne ss").
*/
.entry-content :is(h1, h2, h3, h4, h5, h6).wp-block-heading,
.entry-content :is(h1, h2, h3, h4, h5, h6):not(.entry-title) {
/* Allow normal wrapping first; only break long words if needed. */
overflow-wrap: break-word;
word-break: normal;
hyphens: auto;
}
/* Dense mobile hero covers (Community/Wisdom/etc.) */
.entry-content .wp-block-cover.alignfull.is-light.community-hero {
min-height: min(340px, 62vh) !important;
}
.entry-content .wp-block-cover.alignfull.is-light.chapter-hero {
min-height: min(260px, 52vh) !important;
}
.entry-content .wp-block-cover.alignfull.is-light.community-hero .wp-block-cover__inner-container,
.entry-content .wp-block-cover.alignfull.is-light.chapter-hero .wp-block-cover__inner-container {
padding: 1.1rem 1rem !important;
}
.entry-content .wp-block-cover.alignfull.is-light.community-hero .wp-block-heading,
.entry-content .wp-block-cover.alignfull.is-light.chapter-hero .wp-block-heading {
margin-bottom: 0.75rem !important;
}
.entry-content .wp-block-cover.alignfull.is-light.community-hero p,
.entry-content .wp-block-cover.alignfull.is-light.chapter-hero p {
font-size: 1.1rem !important;
line-height: 1.35 !important;
}
/* Dense card padding for practice/library pages (override inline Gutenberg padding) */
.entry-content .wp-block-group.shadow-medium.has-background,
.entry-content .wp-block-group.shadow-soft.has-background {
padding: 1.25rem !important;
}
/* Slightly tighter content container on small screens */
.entry-content-wrap {
padding: 1.25rem !important;
}
.entry-content :is(h1).wp-block-heading,
.entry-content h1:not(.entry-title) {
font-size: clamp(1.9rem, 8vw, 2.4rem) !important;
line-height: 1.12;
}
.entry-content :is(h2).wp-block-heading,
.entry-content h2 {
font-size: clamp(1.55rem, 6.8vw, 2rem) !important;
line-height: 1.18;
}
.entry-content :is(h3).wp-block-heading,
.entry-content h3 {
font-size: clamp(1.3rem, 5.8vw, 1.65rem) !important;
line-height: 1.22;
}
.entry-content p {
font-size: 1rem;
}
.practice-box {
padding: 1.5rem;
margin: 1.5rem 0;
}
.hero-content h1 {
font-size: 2rem;
}
.hero-content {
padding: 1.5rem;
}
.chapter-header {
padding: 2rem 1.5rem 1.5rem;
margin: -1.5rem -1.5rem 1.5rem;
}
/* Disable parallax on mobile for performance */
.parallax-scroll {
transform: none !important;
}
/* Reduce button effects on mobile - exclude liquid-morph */
.wp-block-button__link:not(.liquid-morph):hover,
.kb-btn:not(.liquid-morph):hover,
button:not([class*="child-menu"]):not(.liquid-morph):hover {
transform: translateY(-2px) scale(1.01);
}
/* Reduce wave divider heights on mobile */
.wave-divider-top {
padding-top: 60px;
}
.wave-divider-top::before,
.wave-divider-bottom::after {
height: 40px;
}
.wave-divider-bottom {
padding-bottom: 60px;
}
/* Smaller page transition effects on mobile */
body {
animation: pageWaterFadeIn 0.5s ease-out;
}
body.page-transitioning {
animation: pageWaterFadeOut 0.3s ease-in forwards;
}
}
/* ====================
LOTTIE ANIMATIONS
==================== */
.giw-lottie {
display: inline-block;
vertical-align: middle;
max-width: 100%;
}
/* Alignment options */
.giw-lottie.align-left {
display: block;
margin-left: 0;
margin-right: auto;
width: fit-content;
}
.giw-lottie.align-center {
display: block;
margin-left: auto;
margin-right: auto;
width: fit-content;
}
.giw-lottie.align-right {
display: block;
margin-left: auto;
margin-right: 0;
width: fit-content;
}
.giw-lottie.align-inline {
display: inline-block;
margin: 0 0.25rem;
}
/* Smooth rendering */
lottie-player {
will-change: transform;
transform: translateZ(0);
backface-visibility: hidden;
}
/* Respect reduced motion - fallback if JS doesn't catch it */
@media (prefers-reduced-motion: reduce) {
lottie-player {
animation: none !important;
}
}
/* ====================
ENHANCED TYPOGRAPHY
==================== */
/* Pull Quotes - Large featured quotes */
.pull-quote {
position: relative;
margin: 3rem auto;
padding: 2rem 2.5rem 2rem 3.5rem;
max-width: 800px;
font-size: 1.5rem;
line-height: 1.6;
font-weight: 400;
font-style: italic;
color: var(--water-800);
background: linear-gradient(135deg, var(--water-100) 0%, rgba(255, 255, 255, 0.8) 100%);
border-left: 4px solid var(--water-600);
border-radius: 12px;
box-shadow: 0 10px 40px rgba(0, 119, 190, 0.1);
transition: all var(--dur-slow) var(--ease-flow);
}
.pull-quote::before {
content: '\201C';
position: absolute;
left: 0.75rem;
top: 1.5rem;
font-size: 5rem;
line-height: 1;
color: var(--water-500);
opacity: 0.25;
font-family: Georgia, serif;
transition: all var(--dur-base) var(--ease-flow);
}
.pull-quote:hover {
transform: translateY(-4px);
box-shadow: 0 15px 50px rgba(0, 119, 190, 0.15);
border-left-width: 5px;
}
.pull-quote:hover::before {
opacity: 0.4;
transform: scale(1.05);
}
.pull-quote cite {
display: block;
margin-top: 1rem;
font-size: 1rem;
font-style: normal;
font-weight: 600;
color: var(--water-700);
text-align: right;
}
.pull-quote cite::before {
content: '— ';
}
/* Dark mode pull quotes */
body.dark-mode .pull-quote {
color: var(--water-800);
background: linear-gradient(135deg, rgba(13, 59, 102, 0.5) 0%, rgba(0, 119, 190, 0.25) 100%);
border-left-color: var(--water-500);
box-shadow: 0 10px 40px rgba(0, 119, 190, 0.15),
inset 0 0 40px rgba(79, 195, 247, 0.05);
}
body.dark-mode .pull-quote::before {
color: var(--water-600);
opacity: 0.2;
}
body.dark-mode .pull-quote:hover {
box-shadow: 0 15px 50px rgba(0, 119, 190, 0.25),
inset 0 0 60px rgba(79, 195, 247, 0.1);
}
body.dark-mode .pull-quote cite {
color: var(--water-700);
}
/* Enhanced Blockquotes */
.entry-content blockquote,
blockquote.wp-block-quote {
position: relative;
margin: 2rem 0;
padding: 1.5rem 2rem 1.5rem 3rem;
font-size: 1.15rem;
line-height: 1.7;
font-style: italic;
color: var(--water-800);
background: linear-gradient(to right, var(--water-100) 0%, rgba(255, 255, 255, 0.5) 100%);
border-left: 3px solid var(--water-500);
border-radius: 8px;
box-shadow: 0 4px 15px rgba(0, 119, 190, 0.08);
}
.entry-content blockquote::before,
blockquote.wp-block-quote::before {
content: '';
position: absolute;
left: 1rem;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 40%;
background: linear-gradient(to bottom, var(--water-400), var(--water-600));
border-radius: 2px;
opacity: 0.5;
}
.entry-content blockquote p,
blockquote.wp-block-quote p {
margin: 0;
}
.entry-content blockquote cite,
blockquote.wp-block-quote cite {
display: block;
margin-top: 1rem;
font-size: 0.95rem;
font-style: normal;
font-weight: 600;
color: var(--water-700);
}
/* Dark mode blockquotes */
body.dark-mode .entry-content blockquote,
body.dark-mode blockquote.wp-block-quote {
color: var(--water-200);
background: linear-gradient(to right, rgba(13, 59, 102, 0.3) 0%, rgba(0, 119, 190, 0.1) 100%);
border-left-color: var(--water-400);
}
body.dark-mode .entry-content blockquote cite,
body.dark-mode blockquote.wp-block-quote cite {
color: var(--water-300);
}
/* Chapter Preview Cards */
.chapter-card {
position: relative;
margin: 2rem 0;
padding: 2rem;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.95) 0%, var(--water-100) 100%);
border: 1px solid var(--water-300);
border-radius: 16px;
box-shadow: 0 8px 30px rgba(0, 119, 190, 0.1);
transition: all var(--dur-slow) var(--ease-flow);
overflow: hidden;
}
.chapter-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 4px;
background: linear-gradient(to right, var(--water-400), var(--water-600), var(--water-400));
opacity: 0.8;
}
.chapter-card:hover {
transform: translateY(-6px);
box-shadow: 0 15px 50px rgba(0, 119, 190, 0.2);
border-color: var(--water-500);
}
.chapter-card-number {
display: inline-block;
padding: 0.4rem 1rem;
margin-bottom: 1rem;
font-size: 0.85rem;
font-weight: 700;
letter-spacing: 0.05em;
text-transform: uppercase;
color: white;
background: linear-gradient(135deg, var(--water-600), var(--water-500));
border-radius: 20px;
box-shadow: 0 4px 12px rgba(0, 119, 190, 0.3);
}
.chapter-card-title {
margin: 0 0 1rem 0;
font-size: 1.75rem;
font-weight: 700;
color: var(--water-800);
line-height: 1.3;
}
.chapter-card-excerpt {
margin: 0 0 1.5rem 0;
font-size: 1.05rem;
line-height: 1.7;
color: var(--ink);
}
.chapter-card-meta {
display: flex;
gap: 1.5rem;
align-items: center;
padding-top: 1rem;
border-top: 1px solid var(--water-300);
font-size: 0.9rem;
color: var(--water-700);
}
.chapter-card-meta-item {
display: flex;
align-items: center;
gap: 0.5rem;
}
.chapter-card-meta-item::before {
content: '•';
color: var(--water-500);
font-size: 1.2rem;
}
/* Dark mode chapter cards */
body.dark-mode .chapter-card {
background: linear-gradient(135deg, rgba(13, 59, 102, 0.3) 0%, rgba(0, 119, 190, 0.15) 100%);
border-color: var(--water-700);
}
body.dark-mode .chapter-card-title {
color: var(--water-200);
}
body.dark-mode .chapter-card-excerpt {
color: var(--water-300);
}
body.dark-mode .chapter-card-meta {
border-top-color: var(--water-700);
color: var(--water-400);
}
/* Highlighted Text */
.highlight-text {
padding: 0.2rem 0.5rem;
background: linear-gradient(to right, var(--water-200), var(--water-100));
border-radius: 4px;
font-weight: 600;
color: var(--water-900);
}
body.dark-mode .highlight-text {
background: linear-gradient(to right, rgba(0, 119, 190, 0.3), rgba(79, 195, 247, 0.2));
color: var(--water-200);
}
/* Dropcap */
.dropcap::first-letter {
float: left;
font-size: 4.5rem;
line-height: 0.85;
margin: 0.1rem 0.5rem 0 0;
font-weight: 700;
color: var(--water-600);
text-shadow: 2px 2px 4px rgba(0, 119, 190, 0.2);
}
body.dark-mode .dropcap::first-letter {
color: var(--water-400);
}
/* Key Concept Box */
.key-concept {
position: relative;
margin: 2rem 0;
padding: 2rem 2rem 2rem 3rem;
background: linear-gradient(135deg, var(--water-100) 0%, rgba(255, 255, 255, 0.9) 100%);
border: 2px solid var(--water-400);
border-radius: 12px;
box-shadow: 0 6px 25px rgba(0, 119, 190, 0.12);
}
.key-concept::before {
content: '💡';
position: absolute;
left: 1rem;
top: 1.5rem;
font-size: 1.5rem;
}
.key-concept-title {
margin: 0 0 1rem 0;
font-size: 1.25rem;
font-weight: 700;
color: var(--water-700);
}
.key-concept p:last-child {
margin-bottom: 0;
}
body.dark-mode .key-concept {
background: linear-gradient(135deg, rgba(13, 59, 102, 0.4) 0%, rgba(0, 119, 190, 0.2) 100%);
border-color: var(--water-600);
}
body.dark-mode .key-concept-title {
color: var(--water-300);
}
/* Responsive typography */
@media (max-width: 768px) {
.pull-quote {
font-size: 1.25rem;
padding: 1.5rem 1.25rem 1.5rem 2.5rem;
margin: 2rem 0;
}
.pull-quote::before {
font-size: 4rem;
left: 0.5rem;
}
.chapter-card-title {
font-size: 1.5rem;
}
.chapter-card-meta {
flex-direction: column;
align-items: flex-start;
gap: 0.5rem;
}
.dropcap::first-letter {
font-size: 3.5rem;
}
}
/* ============================================================================
WAVE SECTION DIVIDERS
Version: 7.10.0
Beautiful wave-pattern section dividers with multiple styles
========================================================================= */
/* Base Wave Divider */
.wave-divider {
position: relative;
width: 100%;
height: 50px;
margin: 1.5rem 0;
overflow: hidden;
scale: 1.2;
}
.wave-divider svg {
position: absolute;
bottom: 0;
width: 100%;
height: 100%;
}
/* Wave Styles */
/* Classic Wave - Traditional layered wave with animation */
.wave-divider.classic .classic-wave-1 {
animation: classic-wave-1-animation 6s ease-in-out infinite;
will-change: transform, opacity;
transform-box: fill-box;
transform-origin: center;
}
.wave-divider.classic .classic-wave-2 {
animation: classic-wave-2-animation 8s ease-in-out infinite;
animation-delay: 0.8s;
will-change: transform, opacity;
transform-box: fill-box;
transform-origin: center;
}
.wave-divider.classic .classic-wave-3 {
animation: classic-wave-3-animation 10s ease-in-out infinite;
animation-delay: 1.6s;
will-change: transform, opacity;
transform-box: fill-box;
transform-origin: center;
}
body.dark-mode .wave-divider.classic svg {
opacity: 0.75;
}
/* Layered Waves - Multiple overlapping waves */
.wave-divider.layered {
height: 60px;
}
.wave-divider.layered .wave-layer-1 {
fill: var(--water-300);
opacity: 0.2;
animation: wave-slow 12s ease-in-out infinite;
transform-box: fill-box;
transform-origin: center;
}
.wave-divider.layered .wave-layer-2 {
fill: var(--water-400);
opacity: 0.25;
animation: wave-medium 8s ease-in-out infinite;
transform-box: fill-box;
transform-origin: center;
}
.wave-divider.layered .wave-layer-3 {
fill: var(--water-500);
opacity: 0.3;
animation: wave-fast 6s ease-in-out infinite;
transform-box: fill-box;
transform-origin: center;
}
body.dark-mode .wave-divider.layered .wave-layer-1 {
fill: var(--water-500);
opacity: 0.15;
}
body.dark-mode .wave-divider.layered .wave-layer-2 {
fill: var(--water-600);
opacity: 0.2;
}
body.dark-mode .wave-divider.layered .wave-layer-3 {
fill: var(--water-700);
opacity: 0.25;
}
/* Gradient Wave - Smooth gradient fill with animation */
.wave-divider.gradient .gradient-wave-1 {
animation: gradient-wave-1-animation 7s ease-in-out infinite;
will-change: transform, opacity;
transform-box: fill-box;
transform-origin: center;
}
.wave-divider.gradient .gradient-wave-2 {
animation: gradient-wave-2-animation 9s ease-in-out infinite;
animation-delay: 1s;
will-change: transform, opacity;
transform-box: fill-box;
transform-origin: center;
}
body.dark-mode .wave-divider.gradient svg {
opacity: 0.8;
}
/* Minimal Wave - Thin line only */
.wave-divider.minimal {
height: 30px;
margin: 1rem 0;
}
.wave-divider.minimal svg {
stroke: var(--water-500);
stroke-width: 2;
fill: none;
opacity: 0.5;
}
body.dark-mode .wave-divider.minimal svg {
stroke: var(--water-600);
opacity: 0.4;
}
/* Flow Wave - Animated flowing effect */
.wave-divider.flow,
.wave-divider.flowing {
overflow: visible;
animation: wave-container-sway 12s ease-in-out infinite;
}
.wave-divider.flow svg,
.wave-divider.flowing svg {
overflow: visible;
will-change: transform;
}
.wave-divider.flow .flow-wave-1,
.wave-divider.flowing .flow-wave-1 {
animation: wave-flow-1 8s ease-in-out infinite;
will-change: transform, opacity;
transform-box: fill-box;
transform-origin: center;
}
.wave-divider.flow .flow-wave-2,
.wave-divider.flowing .flow-wave-2 {
animation: wave-flow-2 6s ease-in-out infinite;
animation-delay: 1s;
will-change: transform, opacity;
transform-box: fill-box;
transform-origin: center;
}
.wave-divider.flow .flow-wave-3,
.wave-divider.flowing .flow-wave-3 {
animation: wave-flow-3 10s ease-in-out infinite;
animation-delay: 2s;
will-change: transform, opacity;
transform-box: fill-box;
transform-origin: center;
}
body.dark-mode .wave-divider.flow #flow-gradient-1 stop,
body.dark-mode .wave-divider.flowing #flow-gradient-1 stop {
stop-color: #2d8fb5 !important;
}
body.dark-mode .wave-divider.flow #flow-gradient-2 stop,
body.dark-mode .wave-divider.flowing #flow-gradient-2 stop {
stop-color: #4aa8cc !important;
}
/* Ripple Effect - Concentric circles */
.wave-divider.ripple {
height: 45px;
}
.wave-divider.ripple .ripple-circle-1,
.wave-divider.ripple .ripple-circle-2,
.wave-divider.ripple .ripple-circle-3 {
animation: ripple-expand 3s ease-out infinite;
transform-box: fill-box;
transform-origin: center;
}
.wave-divider.ripple .ripple-circle-2 {
animation-delay: 1s;
}
.wave-divider.ripple .ripple-circle-3 {
animation-delay: 2s;
}
body.dark-mode .wave-divider.ripple svg circle {
stroke: var(--water-600);
}
/* Droplet Pattern - Small dots in wave pattern */
.wave-divider.droplets {
height: 40px;
}
.wave-divider.droplets svg circle {
fill: var(--water-500);
opacity: 0.4;
animation: droplet-bounce 2s ease-in-out infinite;
}
.wave-divider.droplets svg circle:nth-child(2n) {
animation-delay: 0.3s;
}
.wave-divider.droplets svg circle:nth-child(3n) {
animation-delay: 0.6s;
}
body.dark-mode .wave-divider.droplets svg circle {
fill: var(--water-600);
opacity: 0.3;
}
/* With Text Overlay */
.wave-divider.with-text {
height: 80px;
display: flex;
align-items: center;
justify-content: center;
}
.wave-divider.with-text .divider-text {
position: relative;
z-index: 2;
padding: 0.5rem 2rem;
background: var(--paper);
color: var(--water-700);
font-size: 1.1rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.1em;
border-radius: 50px;
box-shadow: 0 4px 20px rgba(0, 119, 190, 0.15);
transition: all var(--dur-base) var(--ease-flow);
}
.wave-divider.with-text:hover .divider-text {
transform: translateY(-2px);
box-shadow: 0 6px 30px rgba(0, 119, 190, 0.2);
}
body.dark-mode .wave-divider.with-text .divider-text {
background: var(--water-900);
color: var(--water-300);
box-shadow: 0 4px 20px rgba(0, 119, 190, 0.3);
}
body.dark-mode .wave-divider.with-text:hover .divider-text {
box-shadow: 0 6px 30px rgba(0, 119, 190, 0.4);
}
/* Animations */
@keyframes wave-slow {
0%, 100% {
transform: translateX(0) translateY(0);
}
50% {
transform: translateX(-25%) translateY(-5px);
}
}
@keyframes wave-medium {
0%, 100% {
transform: translateX(0) translateY(0);
}
50% {
transform: translateX(-15%) translateY(-3px);
}
}
@keyframes wave-fast {
0%, 100% {
transform: translateX(0) translateY(0);
}
50% {
transform: translateX(-10%) translateY(-2px);
}
}
@keyframes wave-flow-1 {
0%, 100% {
opacity: 0.6;
transform: translateY(0);
}
50% {
opacity: 0.8;
transform: translateY(-3px);
}
}
@keyframes wave-flow-2 {
0%, 100% {
opacity: 0.4;
transform: translateY(0);
}
50% {
opacity: 0.6;
transform: translateY(2px);
}
}
@keyframes wave-flow-3 {
0%, 100% {
opacity: 0.2;
transform: translateY(0);
}
50% {
opacity: 0.4;
transform: translateY(-1px);
}
}
@keyframes gradient-wave-1-animation {
0%, 100% {
opacity: 0.75;
transform: translateY(0) scaleY(1);
}
50% {
opacity: 1;
transform: translateY(-4px) scaleY(1.05);
}
}
@keyframes gradient-wave-2-animation {
0%, 100% {
opacity: 0.55;
transform: translateY(0) scaleY(1);
}
50% {
opacity: 0.9;
transform: translateY(3px) scaleY(1.03);
}
}
@keyframes classic-wave-1-animation {
0%, 100% {
opacity: 0.8;
transform: translateY(0) scaleY(1);
}
50% {
opacity: 1;
transform: translateY(-5px) scaleY(1.08);
}
}
@keyframes classic-wave-2-animation {
0%, 100% {
opacity: 0.65;
transform: translateY(0) scaleY(1);
}
50% {
opacity: 0.95;
transform: translateY(4px) scaleY(1.05);
}
}
@keyframes classic-wave-3-animation {
0%, 100% {
opacity: 0.5;
transform: translateY(0) scaleY(1);
}
50% {
opacity: 0.8;
transform: translateY(-3px) scaleY(1.04);
}
}
@keyframes wave-container-sway {
0%, 100% {
transform: translateX(0);
}
50% {
transform: translateX(1%);
}
}
@keyframes ripple-expand {
0% {
r: 10;
opacity: 0.6;
}
100% {
r: 200;
opacity: 0;
}
}
@keyframes droplet-bounce {
0%, 100% {
transform: translateY(0);
opacity: 0.4;
}
50% {
transform: translateY(-10px);
opacity: 0.7;
}
}
/* Horizontal Rule Replacement */
.wave-divider.hr-replacement {
height: 60px;
margin: 2rem 0;
}
/* Mobile Responsive */
@media (max-width: 768px) {
.wave-divider {
height: 60px;
margin: 3rem 0;
}
.wave-divider.layered {
height: 80px;
}
.wave-divider.with-text {
height: 100px;
}
.wave-divider.with-text .divider-text {
font-size: 0.9rem;
padding: 0.4rem 1.5rem;
}
.wave-divider.minimal {
height: 30px;
}
}
/* ============================================================================
INTERACTIVE WATER EXPERIMENTS
Version: 7.11.0
Interactive widgets for experiencing water consciousness
========================================================================= */
.water-experiment {
max-width: 900px;
margin: 3rem auto;
padding: 2.5rem;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.98) 0%, var(--water-50) 100%);
border: 2px solid var(--water-300);
border-radius: 20px;
box-shadow: 0 10px 40px rgba(0, 119, 190, 0.15);
}
body.dark-mode .water-experiment {
background: linear-gradient(135deg, var(--water-900) 0%, rgba(0, 50, 80, 0.9) 100%);
border-color: var(--water-600);
}
.experiment-header {
text-align: center;
margin-bottom: 2.5rem;
}
.experiment-header h3 {
font-size: 2rem;
color: var(--water-800);
margin-bottom: 0.5rem;
}
body.dark-mode .experiment-header h3 {
color: var(--water-200);
}
.experiment-subtitle {
font-size: 1.1rem;
color: var(--water-600);
font-style: italic;
}
body.dark-mode .experiment-subtitle {
color: var(--water-400);
}
/* Progress Steps */
.experiment-progress {
margin: 2rem 0;
padding: 1.5rem 0;
border-top: 1px solid var(--water-200);
border-bottom: 1px solid var(--water-200);
}
body.dark-mode .experiment-progress {
border-color: var(--water-700);
}
.progress-steps {
display: flex;
justify-content: space-between;
align-items: center;
gap: 1rem;
}
.progress-steps .step {
flex: 1;
text-align: center;
padding: 0.75rem 1rem;
background: var(--water-100);
border-radius: 8px;
font-size: 0.9rem;
font-weight: 600;
color: var(--water-600);
transition: all var(--dur-base) var(--ease-flow);
position: relative;
}
.progress-steps .step.active {
background: var(--water-500);
color: white;
transform: scale(1.05);
box-shadow: 0 4px 20px rgba(0, 119, 190, 0.3);
}
.progress-steps .step.completed {
background: var(--water-300);
color: var(--water-800);
}
.progress-steps .step.completed::after {
content: "✓";
position: absolute;
top: -8px;
right: -8px;
width: 20px;
height: 20px;
background: #4CAF50;
color: white;
border-radius: 50%;
font-size: 12px;
display: flex;
align-items: center;
justify-content: center;
}
body.dark-mode .progress-steps .step {
background: var(--water-800);
color: var(--water-300);
}
body.dark-mode .progress-steps .step.active {
background: var(--water-600);
}
/* Phase Content */
.phase-content {
margin-top: 2rem;
}
.phase-content h4 {
font-size: 1.5rem;
color: var(--water-700);
margin-bottom: 1rem;
}
body.dark-mode .phase-content h4 {
color: var(--water-300);
}
/* Materials List */
.materials-list {
list-style: none;
padding: 0;
margin: 1.5rem 0;
}
.materials-list li {
display: flex;
align-items: flex-start;
gap: 1rem;
padding: 1rem;
margin-bottom: 0.75rem;
background: white;
border-left: 4px solid var(--water-400);
border-radius: 8px;
box-shadow: 0 2px 10px rgba(0, 119, 190, 0.08);
}
body.dark-mode .materials-list li {
background: var(--water-900);
border-left-color: var(--water-500);
}
.material-icon {
font-size: 1.5rem;
min-width: 2rem;
}
/* Setup Instructions */
.setup-instructions {
margin: 2rem 0;
padding: 1.5rem;
background: var(--water-50);
border-radius: 12px;
}
body.dark-mode .setup-instructions {
background: rgba(0, 50, 80, 0.5);
}
.setup-instructions ol {
margin-left: 1.5rem;
}
.setup-instructions li {
margin-bottom: 0.75rem;
line-height: 1.6;
}
/* Baseline Checklist */
.baseline-checklist {
margin: 2rem 0;
}
.checklist-item {
display: flex;
align-items: center;
gap: 1rem;
padding: 1rem 1.5rem;
margin-bottom: 1rem;
background: white;
border: 2px solid var(--water-200);
border-radius: 12px;
cursor: pointer;
transition: all var(--dur-base) var(--ease-flow);
}
.checklist-item:hover {
border-color: var(--water-400);
box-shadow: 0 4px 20px rgba(0, 119, 190, 0.1);
}
.checklist-item input[type="checkbox"] {
width: 24px;
height: 24px;
cursor: pointer;
}
.checklist-item input[type="checkbox"]:checked + span {
color: var(--water-700);
font-weight: 600;
}
body.dark-mode .checklist-item {
background: var(--water-900);
border-color: var(--water-700);
}
.baseline-note {
margin: 2rem 0;
padding: 1.5rem;
background: linear-gradient(135deg, #FFF3CD 0%, #FFF8E1 100%);
border-left: 4px solid #FF9800;
border-radius: 8px;
}
body.dark-mode .baseline-note {
background: linear-gradient(135deg, rgba(255, 152, 0, 0.2) 0%, rgba(255, 152, 0, 0.1) 100%);
}
/* Blessing Steps */
.blessing-steps {
margin: 2rem 0;
}
.blessing-step {
display: flex;
gap: 1.5rem;
margin-bottom: 2rem;
padding: 1.5rem;
background: white;
border-radius: 12px;
box-shadow: 0 4px 20px rgba(0, 119, 190, 0.08);
transition: all var(--dur-base) var(--ease-flow);
}
.blessing-step:hover {
box-shadow: 0 6px 30px rgba(0, 119, 190, 0.15);
transform: translateY(-2px);
}
body.dark-mode .blessing-step {
background: var(--water-900);
}
.step-number {
min-width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--water-500) 0%, var(--water-600) 100%);
color: white;
font-size: 1.5rem;
font-weight: 700;
border-radius: 50%;
flex-shrink: 0;
}
.step-content {
flex: 1;
}
.step-content h5 {
font-size: 1.2rem;
color: var(--water-700);
margin-bottom: 0.75rem;
}
body.dark-mode .step-content h5 {
color: var(--water-300);
}
.step-content blockquote {
margin: 1rem 0;
padding: 1rem 1.5rem;
background: var(--water-50);
border-left: 3px solid var(--water-500);
border-radius: 8px;
font-style: italic;
color: var(--water-700);
}
body.dark-mode .step-content blockquote {
background: rgba(0, 119, 190, 0.1);
color: var(--water-300);
}
.step-timer {
margin-top: 1rem;
padding: 0.75rem 1.5rem;
background: var(--water-500);
color: white;
border: none;
border-radius: 8px;
font-size: 1rem;
font-weight: 600;
cursor: pointer;
transition: all var(--dur-base) var(--ease-flow);
}
.step-timer:hover:not(:disabled) {
background: var(--water-600);
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(0, 119, 190, 0.3);
}
.step-timer:disabled {
opacity: 0.7;
cursor: not-allowed;
}
.step-timer.completed {
background: #4CAF50;
}
/* Observation Form */
.observation-form {
margin: 2rem 0;
}
.observation-category {
margin-bottom: 2rem;
padding: 1.5rem;
background: white;
border-radius: 12px;
box-shadow: 0 2px 15px rgba(0, 119, 190, 0.08);
}
body.dark-mode .observation-category {
background: var(--water-900);
}
.observation-category h5 {
font-size: 1.1rem;
color: var(--water-700);
margin-bottom: 1rem;
}
body.dark-mode .observation-category h5 {
color: var(--water-300);
}
.observation-category textarea {
width: 100%;
padding: 1rem;
border: 2px solid var(--water-300);
border-radius: 8px;
font-family: inherit;
font-size: 1rem;
line-height: 1.6;
resize: vertical;
transition: border-color var(--dur-base) var(--ease-flow);
}
.observation-category textarea:focus {
outline: none;
border-color: var(--water-500);
box-shadow: 0 0 0 3px rgba(0, 119, 190, 0.1);
}
body.dark-mode .observation-category textarea {
background: var(--water-800);
color: var(--water-200);
border-color: var(--water-600);
}
/* Rating Scale */
.observation-rating {
margin: 2rem 0;
padding: 2rem;
background: linear-gradient(135deg, var(--water-50) 0%, white 100%);
border-radius: 12px;
}
body.dark-mode .observation-rating {
background: linear-gradient(135deg, var(--water-900) 0%, rgba(0, 50, 80, 0.7) 100%);
}
.rating-scale {
display: flex;
justify-content: space-between;
gap: 0.5rem;
margin: 1.5rem 0;
}
.rating-option {
flex: 1;
display: flex;
flex-direction: column;
align-items: center;
cursor: pointer;
}
.rating-option input[type="radio"] {
display: none;
}
.rating-option span {
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
background: white;
border: 2px solid var(--water-300);
border-radius: 50%;
font-weight: 600;
transition: all var(--dur-base) var(--ease-flow);
}
.rating-option:hover span {
border-color: var(--water-500);
transform: scale(1.1);
}
.rating-option input[type="radio"]:checked + span {
background: var(--water-500);
color: white;
border-color: var(--water-500);
transform: scale(1.2);
}
body.dark-mode .rating-option span {
background: var(--water-800);
border-color: var(--water-600);
}
.rating-labels {
display: flex;
justify-content: space-between;
font-size: 0.9rem;
color: var(--water-600);
font-style: italic;
}
/* Results */
.results-summary {
margin: 2rem 0;
}
.result-score {
text-align: center;
padding: 2rem;
background: linear-gradient(135deg, var(--water-100) 0%, white 100%);
border-radius: 16px;
margin-bottom: 2rem;
}
body.dark-mode .result-score {
background: linear-gradient(135deg, var(--water-800) 0%, var(--water-900) 100%);
}
.score-circle {
width: 120px;
height: 120px;
margin: 0 auto 1rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, var(--water-500) 0%, var(--water-600) 100%);
color: white;
border-radius: 50%;
box-shadow: 0 8px 30px rgba(0, 119, 190, 0.3);
}
.score-value {
font-size: 3rem;
font-weight: 700;
line-height: 1;
}
.score-label {
font-size: 1.2rem;
opacity: 0.9;
}
.score-description {
font-size: 1.1rem;
color: var(--water-700);
max-width: 600px;
margin: 0 auto;
}
body.dark-mode .score-description {
color: var(--water-300);
}
.result-observations {
margin: 2rem 0;
}
.observation-item {
margin-bottom: 1.5rem;
padding: 1rem;
background: white;
border-left: 4px solid var(--water-400);
border-radius: 8px;
}
body.dark-mode .observation-item {
background: var(--water-900);
}
.observation-item strong {
color: var(--water-700);
display: block;
margin-bottom: 0.5rem;
}
body.dark-mode .observation-item strong {
color: var(--water-400);
}
.results-science,
.results-practice {
margin: 2rem 0;
padding: 2rem;
background: linear-gradient(135deg, rgba(255, 255, 255, 0.8) 0%, var(--water-50) 100%);
border-radius: 12px;
}
body.dark-mode .results-science,
body.dark-mode .results-practice {
background: linear-gradient(135deg, rgba(0, 50, 80, 0.5) 0%, var(--water-900) 100%);
}
.results-science h5,
.results-practice h5 {
color: var(--water-700);
font-size: 1.3rem;
margin-bottom: 1rem;
}
body.dark-mode .results-science h5,
body.dark-mode .results-practice h5 {
color: var(--water-300);
}
/* Experiment Buttons */
.experiment-btn {
padding: 1rem 2rem;
font-size: 1.1rem;
font-weight: 600;
border: none;
border-radius: 12px;
cursor: pointer;
transition: all var(--dur-base) var(--ease-flow);
display: inline-block;
margin: 0.5rem;
}
.experiment-btn.primary {
background: linear-gradient(135deg, var(--water-500) 0%, var(--water-600) 100%);
color: white;
box-shadow: 0 4px 15px rgba(0, 119, 190, 0.3);
}
.experiment-btn.primary:hover:not(:disabled) {
background: linear-gradient(135deg, var(--water-600) 0%, var(--water-700) 100%);
transform: translateY(-2px);
box-shadow: 0 6px 25px rgba(0, 119, 190, 0.4);
}
.experiment-btn.primary:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.experiment-btn.secondary {
background: white;
color: var(--water-600);
border: 2px solid var(--water-400);
}
.experiment-btn.secondary:hover {
background: var(--water-50);
border-color: var(--water-500);
transform: translateY(-2px);
}
body.dark-mode .experiment-btn.secondary {
background: var(--water-800);
color: var(--water-300);
border-color: var(--water-600);
}
.results-actions {
text-align: center;
margin-top: 2rem;
padding-top: 2rem;
border-top: 1px solid var(--water-200);
}
body.dark-mode .results-actions {
border-color: var(--water-700);
}
/* Mobile Responsive */
@media (max-width: 768px) {
.water-experiment {
padding: 1.5rem;
margin: 2rem 1rem;
}
.progress-steps {
flex-direction: column;
gap: 0.5rem;
}
.progress-steps .step {
width: 100%;
}
.blessing-step {
flex-direction: column;
gap: 1rem;
}
.step-number {
margin: 0 auto;
}
.rating-scale {
gap: 0.25rem;
}
.rating-option span {
width: 32px;
height: 32px;
font-size: 0.9rem;
}
.rating-labels {
font-size: 0.8rem;
}
.experiment-btn {
width: 100%;
margin: 0.5rem 0;
}
}
/* ============================================================================
MOBILE NAVIGATION DRAWER
Beautiful water-themed mobile menu with gradient effects
========================================================================= */
/* Mobile Drawer Overlay - Liquid water effect */
.popup-drawer.active .drawer-overlay {
background:
radial-gradient(circle at 20% 50%, rgba(0, 180, 216, 0.4) 0%, transparent 50%),
radial-gradient(circle at 80% 30%, rgba(79, 195, 247, 0.35) 0%, transparent 50%),
radial-gradient(circle at 50% 80%, rgba(0, 119, 190, 0.3) 0%, transparent 50%),
rgba(0, 30, 60, 0.85) !important;
overflow: hidden !important;
}
.popup-drawer.active .drawer-overlay::before {
content: '';
position: absolute;
top: -50%;
left: -50%;
right: -50%;
bottom: -50%;
background:
radial-gradient(circle at 30% 40%, rgba(79, 195, 247, 0.5) 0%, transparent 30%),
radial-gradient(circle at 70% 60%, rgba(0, 212, 228, 0.4) 0%, transparent 35%),
radial-gradient(circle at 50% 50%, rgba(0, 180, 216, 0.35) 0%, transparent 40%);
animation: overlay-ripple 12s ease-in-out infinite;
pointer-events: none;
will-change: transform, opacity;
}
.popup-drawer.active .drawer-overlay::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background:
linear-gradient(45deg, transparent 30%, rgba(79, 195, 247, 0.3) 50%, transparent 70%);
background-size: 200% 200%;
animation: overlay-shimmer 8s ease-in-out infinite;
pointer-events: none;
will-change: background-position;
}
/* Mobile Drawer Background */
#mobile-drawer {
--giw-drawer-gutter: clamp(1.25rem, 5.5vw, 2.5rem);
}
@media (min-width: 480px) {
#mobile-drawer {
--giw-drawer-gutter: clamp(1.4rem, 4.5vw, 2.75rem);
}
}
@media (min-width: 768px) {
#mobile-drawer {
--giw-drawer-gutter: clamp(1.6rem, 3vw, 3rem);
}
}
#mobile-drawer .drawer-inner {
background: linear-gradient(165deg,
rgba(225, 245, 254, 0.98) 0%,
rgba(179, 229, 252, 0.95) 50%,
rgba(129, 212, 250, 0.98) 100%
) !important;
color: var(--water-900);
overflow: hidden !important;
display: flex;
flex-direction: column;
height: 100dvh;
width: 100% !important;
max-width: 100% !important;
left: 0 !important;
right: 0 !important;
}
#mobile-drawer .drawer-header {
flex: 0 0 auto;
padding-top: max(0.2rem, env(safe-area-inset-top));
padding-left: max(var(--giw-drawer-gutter), env(safe-area-inset-left));
padding-right: max(var(--giw-drawer-gutter), env(safe-area-inset-right));
}
#mobile-drawer .drawer-content {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
padding-left: max(var(--giw-drawer-gutter), env(safe-area-inset-left));
padding-right: max(var(--giw-drawer-gutter), env(safe-area-inset-right));
padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
}
@media (prefers-reduced-motion: reduce) {
.popup-drawer.active .drawer-overlay::before,
.popup-drawer.active .drawer-overlay::after,
#mobile-drawer .drawer-inner::before,
#mobile-drawer .drawer-inner::after {
animation: none !important;
}
#mobile-drawer .mobile-navigation ul.has-collapse-sub-nav ul.sub-menu {
transition: none !important;
transform: none !important;
}
#mobile-drawer .mobile-navigation .sub-menu.show-drawer > li,
#mobile-drawer .mobile-navigation .sub-menu:not(.show-drawer) > li {
animation: none !important;
}
}
/* Animated water ripples on drawer background */
#mobile-drawer .drawer-inner::after {
content: '';
position: absolute;
top: -10%;
left: -10%;
width: 120%;
height: 120%;
background:
radial-gradient(ellipse at 20% 30%, rgba(0, 119, 190, 0.5) 0%, rgba(79, 195, 247, 0.28) 20%, transparent 45%),
radial-gradient(ellipse at 75% 55%, rgba(0, 180, 216, 0.45) 0%, rgba(0, 212, 228, 0.22) 25%, transparent 50%),
radial-gradient(ellipse at 45% 70%, rgba(79, 195, 247, 0.4) 0%, rgba(129, 212, 250, 0.18) 22%, transparent 48%),
radial-gradient(ellipse at 85% 15%, rgba(0, 119, 190, 0.42) 0%, rgba(79, 195, 247, 0.22) 20%, transparent 42%),
radial-gradient(ellipse at 10% 85%, rgba(0, 180, 216, 0.38) 0%, rgba(0, 212, 228, 0.15) 18%, transparent 38%),
radial-gradient(ellipse at 60% 20%, rgba(129, 212, 250, 0.35) 0%, rgba(79, 195, 247, 0.15) 15%, transparent 35%);
animation: drawer-ripple 15s ease-in-out infinite;
pointer-events: none;
z-index: 0;
will-change: transform, opacity;
}
#mobile-drawer .drawer-header,
#mobile-drawer .drawer-content {
position: relative;
z-index: 2;
}
/* Animated caustic light patterns (like light through water) */
#mobile-drawer .drawer-inner::before {
content: '';
position: absolute;
top: -10%;
left: -10%;
width: 120%;
height: 120%;
background:
radial-gradient(circle at 15% 25%, rgba(255, 255, 255, 0.4) 0%, rgba(79, 195, 247, 0.2) 15%, transparent 30%),
radial-gradient(circle at 65% 45%, rgba(255, 255, 255, 0.35) 0%, rgba(0, 212, 228, 0.15) 18%, transparent 35%),
radial-gradient(circle at 35% 65%, rgba(255, 255, 255, 0.3) 0%, rgba(129, 212, 250, 0.12) 12%, transparent 28%),
radial-gradient(circle at 80% 75%, rgba(255, 255, 255, 0.38) 0%, rgba(79, 195, 247, 0.18) 16%, transparent 32%),
radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.32) 0%, transparent 25%);
animation: drawer-caustics 18s ease-in-out infinite;
pointer-events: none;
z-index: 1;
will-change: transform, opacity;
}
/* Mobile Menu Items */
#mobile-drawer .mobile-navigation li {
margin: 0.5rem 0;
}
#mobile-drawer .mobile-navigation a {
padding: 1rem 1.25rem !important;
color: var(--water-700) !important;
font-size: 1.1rem;
font-weight: 900;
background: rgba(255, 255, 255, 0.5) !important;
border-radius: 12px !important;
border: 1px solid rgba(0, 119, 190, 0.15) !important;
position: relative;
overflow: hidden !important;
transition: all var(--dur-base) var(--ease-flow) !important;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
/* Top-level items with submenus - change hover origin and move left */
#mobile-drawer .mobile-navigation .drawer-nav-drop-wrap > a::before {
content: '';
position: absolute;
top: 50%;
right: 0;
width: 0;
height: 0;
border-radius: 50%;
background: radial-gradient(circle, rgba(79, 195, 247, 0.4) 0%, transparent 70%);
transform: translateY(-50%);
transition: width 0.6s var(--ease-flow), height 0.6s var(--ease-flow);
}
#mobile-drawer .mobile-navigation .drawer-nav-drop-wrap > a:hover {
transform: translateX(-2px) !important;
scale: 1.01;
}
#mobile-drawer .mobile-navigation .drawer-nav-drop-wrap > a:hover::before {
width: 300px;
height: 300px;
}
/* Water ripple effect on regular menu items (no submenu) */
#mobile-drawer .mobile-navigation a::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: radial-gradient(circle, rgba(79, 195, 247, 0.4) 0%, transparent 70%);
transform: translate(-50%, -50%);
transition: width 0.6s var(--ease-flow), height 0.6s var(--ease-flow);
}
#mobile-drawer .mobile-navigation a:hover::before {
width: 300px;
height: 300px;
}
/* Override for submenu parent to use right-origin animation */
#mobile-drawer .mobile-navigation .drawer-nav-drop-wrap > a::before {
left: auto;
right: 0;
transform: translateY(-50%);
}
#mobile-drawer .mobile-navigation a:hover {
background: rgba(255, 255, 255, 0.9) !important;
border-color: rgba(0, 119, 190, 0.4) !important;
transform: translateX(8px) scale(1.02) !important;
box-shadow:
0 4px 12px rgba(0, 119, 190, 0.2),
0 0 20px rgba(79, 195, 247, 0.15) !important;
}
/* Active/Current Menu Item */
#mobile-drawer .mobile-navigation .current-menu-item > a,
#mobile-drawer .mobile-navigation .current_page_item > a {
background: linear-gradient(135deg,
rgba(0, 119, 190, 0.15) 0%,
rgba(79, 195, 247, 0.12) 100%
) !important;
border-color: rgba(0, 119, 190, 0.3) !important;
color: var(--water-700) !important;
font-weight: 600;
box-shadow:
inset 0 1px 3px rgba(0, 119, 190, 0.1),
0 2px 8px rgba(79, 195, 247, 0.15) !important;
}
/* Submenu parent active state (JS adds `.giw-submenu-open` on the ``) */
#mobile-drawer .mobile-navigation li.giw-submenu-open > .drawer-nav-drop-wrap > a {
background: rgba(255, 255, 255, 0.78) !important;
border-color: rgba(0, 119, 190, 0.35) !important;
box-shadow:
inset 0 1px 3px rgba(0, 119, 190, 0.08),
0 3px 10px rgba(79, 195, 247, 0.16) !important;
}
#mobile-drawer .mobile-navigation li.giw-submenu-open > .drawer-nav-drop-wrap > a::after {
content: '';
position: absolute;
left: 10px;
right: 10px;
bottom: 6px;
height: 3px;
border-radius: 99px;
background: linear-gradient(90deg, transparent 0%, rgba(0, 180, 216, 0.5) 50%, transparent 100%);
opacity: 0.65;
pointer-events: none;
}
#mobile-drawer .mobile-navigation li.giw-submenu-open > .drawer-nav-drop-wrap .drawer-sub-toggle {
background: rgba(255, 255, 255, 0.7) !important;
color: var(--water-800) !important;
box-shadow: 0 2px 10px rgba(0, 119, 190, 0.12);
}
/* Submenu Styles */
/* Override Kadence display toggle to enable close animation */
#mobile-drawer .mobile-navigation ul.has-collapse-sub-nav ul.sub-menu {
display: block !important;
overflow: hidden !important;
max-height: 0 !important;
opacity: 0 !important;
transform: translateY(-0.35rem);
visibility: hidden !important;
transition: max-height 0.5s var(--ease-flow),
opacity 0.4s var(--ease-flow),
transform 0.5s var(--ease-flow),
visibility 0s linear 0.5s !important;
will-change: max-height, opacity, transform;
}
#mobile-drawer .mobile-navigation ul.has-collapse-sub-nav ul.sub-menu.show-drawer {
max-height: 2000px !important;
opacity: 1 !important;
transform: translateY(0);
visibility: visible !important;
transition: max-height 0.5s var(--ease-flow),
opacity 0.4s var(--ease-flow),
transform 0.5s var(--ease-flow),
visibility 0s linear 0s !important;
}
#mobile-drawer .mobile-navigation .sub-menu a {
font-size: 1.05rem !important;
padding: 0.5rem 0.75rem !important;
background: rgba(255, 255, 255, 0.3) !important;
border-left: 3px solid rgba(79, 195, 247, 0.4) !important;
border-radius: 8px !important;
}
#mobile-drawer .mobile-navigation .sub-menu a:hover {
border-left-color: var(--water-600) !important;
}
/* Submenu slide-in animation */
#mobile-drawer .mobile-navigation .sub-menu.show-drawer > li {
animation: submenu-slide-in 0.4s var(--ease-flow) backwards;
}
#mobile-drawer .mobile-navigation .sub-menu.show-drawer > li:nth-child(1) {
animation-delay: 0.05s;
}
#mobile-drawer .mobile-navigation .sub-menu.show-drawer > li:nth-child(2) {
animation-delay: 0.1s;
}
#mobile-drawer .mobile-navigation .sub-menu.show-drawer > li:nth-child(3) {
animation-delay: 0.15s;
}
#mobile-drawer .mobile-navigation .sub-menu.show-drawer > li:nth-child(4) {
animation-delay: 0.2s;
}
#mobile-drawer .mobile-navigation .sub-menu.show-drawer > li:nth-child(5) {
animation-delay: 0.25s;
}
#mobile-drawer .mobile-navigation .sub-menu.show-drawer > li:nth-child(n+6) {
animation-delay: 0.3s;
}
/* Submenu slide-out animation */
#mobile-drawer .mobile-navigation .sub-menu:not(.show-drawer) > li {
animation: submenu-slide-out 0.3s var(--ease-flow) forwards;
}
#mobile-drawer .mobile-navigation .sub-menu:not(.show-drawer) > li:nth-child(1) {
animation-delay: 0.2s;
}
#mobile-drawer .mobile-navigation .sub-menu:not(.show-drawer) > li:nth-child(2) {
animation-delay: 0.15s;
}
#mobile-drawer .mobile-navigation .sub-menu:not(.show-drawer) > li:nth-child(3) {
animation-delay: 0.1s;
}
#mobile-drawer .mobile-navigation .sub-menu:not(.show-drawer) > li:nth-child(4) {
animation-delay: 0.05s;
}
#mobile-drawer .mobile-navigation .sub-menu:not(.show-drawer) > li:nth-child(5),
#mobile-drawer .mobile-navigation .sub-menu:not(.show-drawer) > li:nth-child(n+6) {
animation-delay: 0s;
}
/* Close Button Enhancement */
#mobile-drawer .drawer-header .drawer-close,
#mobile-drawer .drawer-toggle {
background: rgba(255, 255, 255, 0.85) !important;
border: 2px solid rgba(0, 119, 190, 0.3) !important;
border-radius: 50% !important;
width: 44px !important;
height: 44px !important;
min-width: 44px !important;
min-height: 44px !important;
padding: 0 !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
transition: all var(--dur-base) var(--ease-flow);
transform: none !important;
transform-origin: center;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
color: var(--water-800) !important;
}
#mobile-drawer .drawer-header .drawer-close svg,
#mobile-drawer .drawer-toggle svg,
#mobile-drawer .drawer-header .drawer-close .kadence-svg-iconset,
#mobile-drawer .drawer-toggle .kadence-svg-iconset {
color: var(--water-800) !important;
fill: currentColor !important;
}
#mobile-drawer .drawer-header .drawer-close:hover,
#mobile-drawer .drawer-toggle:hover {
background: rgba(255, 255, 255, 0.98) !important;
border-color: rgba(0, 119, 190, 0.5) !important;
transform: translate(-2px, 8px) rotate(90deg) scale(1.05) !important;
box-shadow: 0 4px 16px rgba(0, 119, 190, 0.4),
0 0 24px rgba(79, 195, 247, 0.3);
color: var(--water-900) !important;
}
/* Submenu Toggle Buttons */
#mobile-drawer .drawer-sub-toggle {
color: var(--water-700) !important;
background: rgba(255, 255, 255, 0.4) !important;
border-radius: 8px;
transition: all var(--dur-base) var(--ease-flow);
}
#mobile-drawer .drawer-sub-toggle:hover {
background: rgba(255, 255, 255, 0.7) !important;
color: var(--water-800) !important;
}
#mobile-drawer .drawer-sub-toggle svg {
transition: transform var(--dur-base) var(--ease-flow);
}
#mobile-drawer .drawer-sub-toggle[aria-expanded="true"] svg {
transform: rotate(180deg);
}
#mobile-drawer .drawer-sub-toggle[aria-expanded="true"] {
background: rgba(255, 255, 255, 0.65) !important;
color: var(--water-800) !important;
}
#mobile-drawer .mobile-navigation a:active {
transform: translateX(-1px) scale(0.99);
filter: saturate(1.05);
}
#mobile-drawer .drawer-sub-toggle:active {
transform: scale(0.96);
}
/* ========== DARK MODE ========== */
body.dark-mode .popup-drawer.active .drawer-overlay {
background:
radial-gradient(circle at 20% 50%, rgba(79, 195, 247, 0.35) 0%, transparent 50%),
radial-gradient(circle at 80% 30%, rgba(0, 180, 216, 0.3) 0%, transparent 50%),
radial-gradient(circle at 50% 80%, rgba(0, 119, 190, 0.25) 0%, transparent 50%),
rgba(0, 10, 30, 0.9) !important;
}
body.dark-mode .popup-drawer.active .drawer-overlay::before {
background:
radial-gradient(circle at 30% 40%, rgba(79, 195, 247, 0.45) 0%, transparent 30%),
radial-gradient(circle at 70% 60%, rgba(0, 212, 228, 0.38) 0%, transparent 35%),
radial-gradient(circle at 50% 50%, rgba(0, 180, 216, 0.32) 0%, transparent 40%);
}
body.dark-mode .popup-drawer.active .drawer-overlay::after {
background:
linear-gradient(45deg, transparent 30%, rgba(79, 195, 247, 0.35) 50%, transparent 70%);
background-size: 200% 200%;
}
body.dark-mode #mobile-drawer .drawer-inner {
background: linear-gradient(165deg,
rgba(13, 59, 102, 0.98) 0%,
rgba(9, 30, 66, 0.95) 50%,
rgba(5, 20, 45, 0.98) 100%
) !important;
color: var(--water-200);
}
body.dark-mode #mobile-drawer .drawer-inner::after {
background:
radial-gradient(ellipse at 20% 30%, rgba(79, 195, 247, 0.42) 0%, rgba(0, 180, 216, 0.25) 20%, transparent 45%),
radial-gradient(ellipse at 75% 55%, rgba(0, 212, 228, 0.38) 0%, rgba(79, 195, 247, 0.22) 25%, transparent 50%),
radial-gradient(ellipse at 45% 70%, rgba(0, 180, 216, 0.35) 0%, rgba(129, 212, 250, 0.18) 22%, transparent 48%),
radial-gradient(ellipse at 85% 15%, rgba(79, 195, 247, 0.4) 0%, rgba(0, 180, 216, 0.22) 20%, transparent 42%),
radial-gradient(ellipse at 10% 85%, rgba(0, 212, 228, 0.32) 0%, rgba(79, 195, 247, 0.15) 18%, transparent 38%),
radial-gradient(ellipse at 60% 20%, rgba(129, 212, 250, 0.3) 0%, rgba(0, 180, 216, 0.15) 15%, transparent 35%);
}
body.dark-mode #mobile-drawer .drawer-inner::before {
background:
radial-gradient(circle at 15% 25%, rgba(79, 195, 247, 0.35) 0%, rgba(0, 180, 216, 0.18) 15%, transparent 30%),
radial-gradient(circle at 65% 45%, rgba(0, 212, 228, 0.3) 0%, rgba(79, 195, 247, 0.15) 18%, transparent 35%),
radial-gradient(circle at 35% 65%, rgba(129, 212, 250, 0.28) 0%, rgba(0, 180, 216, 0.12) 12%, transparent 28%),
radial-gradient(circle at 80% 75%, rgba(79, 195, 247, 0.32) 0%, rgba(0, 212, 228, 0.15) 16%, transparent 32%),
radial-gradient(circle at 50% 15%, rgba(255, 255, 255, 0.25) 0%, rgba(79, 195, 247, 0.12) 12%, transparent 25%);
}
body.dark-mode #mobile-drawer .mobile-navigation a {
color: var(--water-200) !important;
background: rgba(13, 59, 102, 0.4) !important;
border-color: rgba(79, 195, 247, 0.2) !important;
}
body.dark-mode #mobile-drawer .mobile-navigation a::before {
background: radial-gradient(circle, rgba(79, 195, 247, 0.25) 0%, transparent 70%);
}
body.dark-mode #mobile-drawer .mobile-navigation .drawer-nav-drop-wrap > a::before {
background: radial-gradient(circle, rgba(79, 195, 247, 0.25) 0%, transparent 70%);
}
body.dark-mode #mobile-drawer .mobile-navigation a:hover {
background: rgba(13, 59, 102, 0.7) !important;
border-color: rgba(79, 195, 247, 0.5) !important;
color: var(--water-400) !important;
box-shadow:
0 4px 12px rgba(79, 195, 247, 0.3),
0 0 20px rgba(0, 180, 216, 0.2) !important;
}
body.dark-mode #mobile-drawer .mobile-navigation .current-menu-item > a,
body.dark-mode #mobile-drawer .mobile-navigation .current_page_item > a {
background: linear-gradient(135deg,
rgba(79, 195, 247, 0.2) 0%,
rgba(0, 180, 216, 0.15) 100%
) !important;
border-color: rgba(79, 195, 247, 0.4) !important;
color: var(--water-300) !important;
box-shadow:
inset 0 1px 3px rgba(79, 195, 247, 0.15),
0 2px 8px rgba(0, 180, 216, 0.2) !important;
}
body.dark-mode #mobile-drawer .mobile-navigation li.giw-submenu-open > .drawer-nav-drop-wrap > a {
background: rgba(13, 59, 102, 0.6) !important;
border-color: rgba(79, 195, 247, 0.35) !important;
box-shadow:
inset 0 1px 3px rgba(79, 195, 247, 0.12),
0 3px 12px rgba(0, 180, 216, 0.18) !important;
}
body.dark-mode #mobile-drawer .mobile-navigation li.giw-submenu-open > .drawer-nav-drop-wrap > a::after {
background: linear-gradient(90deg, transparent 0%, rgba(79, 195, 247, 0.45) 50%, transparent 100%);
opacity: 0.7;
}
body.dark-mode #mobile-drawer .mobile-navigation li.giw-submenu-open > .drawer-nav-drop-wrap .drawer-sub-toggle {
background: rgba(13, 59, 102, 0.7) !important;
color: var(--water-200) !important;
box-shadow: 0 2px 10px rgba(79, 195, 247, 0.14);
}
body.dark-mode #mobile-drawer .mobile-navigation .sub-menu a {
background: rgba(13, 59, 102, 0.3) !important;
border-left-color: rgba(79, 195, 247, 0.3) !important;
}
body.dark-mode #mobile-drawer .mobile-navigation .sub-menu a:hover {
border-left-color: var(--water-400) !important;
}
body.dark-mode #mobile-drawer .drawer-header .drawer-close,
body.dark-mode #mobile-drawer .drawer-toggle {
background: rgba(13, 59, 102, 0.9) !important;
border-color: rgba(79, 195, 247, 0.4) !important;
color: var(--water-200) !important;
}
body.dark-mode #mobile-drawer .drawer-header .drawer-close svg,
body.dark-mode #mobile-drawer .drawer-toggle svg,
body.dark-mode #mobile-drawer .drawer-header .drawer-close .kadence-svg-iconset,
body.dark-mode #mobile-drawer .drawer-toggle .kadence-svg-iconset {
color: var(--water-200) !important;
fill: currentColor !important;
}
body.dark-mode #mobile-drawer .drawer-header .drawer-close:hover,
body.dark-mode #mobile-drawer .drawer-toggle:hover {
background: rgba(13, 59, 102, 0.98) !important;
border-color: rgba(79, 195, 247, 0.7) !important;
box-shadow: 0 4px 16px rgba(79, 195, 247, 0.5),
0 0 24px rgba(0, 212, 228, 0.4);
color: var(--water-100) !important;
}
body.dark-mode #mobile-drawer .drawer-sub-toggle {
color: var(--water-300) !important;
background: rgba(13, 59, 102, 0.5) !important;
}
body.dark-mode #mobile-drawer .drawer-sub-toggle:hover {
background: rgba(13, 59, 102, 0.8) !important;
color: var(--water-200) !important;
box-shadow: 0 2px 8px rgba(79, 195, 247, 0.2);
}
/* Drawer Animation */
@keyframes drawer-wave-shimmer {
0%, 100% {
opacity: 0.8;
transform: translateY(0);
}
50% {
opacity: 1;
transform: translateY(-5px);
}
}
@keyframes submenu-slide-in {
0% {
opacity: 0;
transform: translateX(-20px);
}
100% {
opacity: 1;
transform: translateX(0);
}
}
@keyframes submenu-slide-out {
0% {
opacity: 1;
transform: translateX(0);
}
100% {
opacity: 0;
transform: translateX(-20px);
}
}
@keyframes overlay-ripple {
0%, 100% {
transform: translate(0, 0) scale(1);
opacity: 0.8;
}
25% {
transform: translate(5%, -3%) scale(1.05);
opacity: 1;
}
50% {
transform: translate(-3%, 5%) scale(0.98);
opacity: 0.9;
}
75% {
transform: translate(4%, 2%) scale(1.02);
opacity: 1;
}
}
@keyframes overlay-shimmer {
0% {
background-position: 0% 50%;
}
50% {
background-position: 100% 50%;
}
100% {
background-position: 0% 50%;
}
}
@keyframes drawer-ripple {
0%, 100% {
transform: translate(0, 0) scale(1) rotate(0deg);
opacity: 0.9;
}
20% {
transform: translate(2%, -3%) scale(1.06) rotate(1.5deg);
opacity: 0.95;
}
40% {
transform: translate(-3%, 2%) scale(0.97) rotate(-2deg);
opacity: 1;
}
60% {
transform: translate(1%, 4%) scale(1.04) rotate(1deg);
opacity: 0.92;
}
80% {
transform: translate(-1%, -2%) scale(1.02) rotate(-0.5deg);
opacity: 0.97;
}
}
@keyframes drawer-caustics {
0%, 100% {
transform: translate(0, 0) scale(1) rotate(0deg);
opacity: 0.8;
}
15% {
transform: translate(-2%, 3%) scale(1.04) rotate(-1deg);
opacity: 0.9;
}
30% {
transform: translate(3%, -1%) scale(0.98) rotate(1.5deg);
opacity: 0.75;
}
45% {
transform: translate(-1%, -3%) scale(1.05) rotate(-0.5deg);
opacity: 0.85;
}
60% {
transform: translate(2%, 2%) scale(0.96) rotate(2deg);
opacity: 0.95;
}
75% {
transform: translate(-3%, 1%) scale(1.03) rotate(-1.5deg);
opacity: 0.8;
}
90% {
transform: translate(1%, -2%) scale(1.01) rotate(0.5deg);
opacity: 0.88;
}
}
/* ============================================================================
LIQUID MORPH BUTTONS - Organic Water Droplet Design
Smooth, fluid buttons with jelly-like feel using CSS only
========================================================================= */
/* Wrapper container - allow effects to extend beyond bounds */
.wp-block-button.liquid-morph,
div.wp-block-button.liquid-morph {
overflow: visible !important;
position: relative !important;
background: transparent !important;
/* Add padding to prevent clipping of enlarged/morphed button */
padding: 12px !important;
margin: -12px !important; /* Compensate so layout doesn't shift */
}
/* Core liquid button styling */
button.liquid-morph,
.button.liquid-morph,
.btn.liquid-morph,
a.button.liquid-morph,
.wp-block-button__link.liquid-morph,
.wp-block-button.liquid-morph .wp-block-button__link {
position: relative !important;
z-index: 1 !important;
border: none !important;
outline: none !important;
overflow: hidden !important;
/* Organic blob shape - subtle asymmetry for liquid feel */
border-radius: 55% 45% 50% 50% / 50% 50% 45% 55% !important;
/* Elastic, bouncy transition for jelly effect */
transition:
transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1),
box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),
border-radius 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) !important;
/* Layered shadows for 3D liquid depth */
box-shadow:
0 8px 25px -5px rgba(0, 119, 190, 0.5),
0 4px 10px -2px rgba(0, 0, 0, 0.2),
inset 0 3px 8px rgba(255, 255, 255, 0.4),
inset 0 -4px 8px rgba(0, 60, 100, 0.15) !important;
}
/* Shimmer wave moving across button */
button.liquid-morph::before,
.button.liquid-morph::before,
.btn.liquid-morph::before,
a.button.liquid-morph::before,
.wp-block-button__link.liquid-morph::before,
.wp-block-button.liquid-morph .wp-block-button__link::before {
content: '' !important;
display: block !important;
position: absolute !important;
top: 0 !important;
left: -100% !important;
width: 50% !important;
height: 100% !important;
background: linear-gradient(
90deg,
transparent 0%,
rgba(255, 255, 255, 0.15) 30%,
rgba(255, 255, 255, 0.35) 50%,
rgba(255, 255, 255, 0.15) 70%,
transparent 100%
) !important;
transform: skewX(-20deg) !important;
animation: liquidShimmer 3s ease-in-out infinite !important;
pointer-events: none !important;
z-index: 2 !important;
}
/* Glass highlight bubble at top */
button.liquid-morph::after,
.button.liquid-morph::after,
.btn.liquid-morph::after,
a.button.liquid-morph::after,
.wp-block-button__link.liquid-morph::after,
.wp-block-button.liquid-morph .wp-block-button__link::after {
content: '' !important;
display: block !important;
position: absolute !important;
top: 12% !important;
left: 18% !important;
width: 35% !important;
height: 30% !important;
background: radial-gradient(
ellipse at 50% 30%,
rgba(255, 255, 255, 0.5) 0%,
rgba(255, 255, 255, 0.2) 50%,
transparent 70%
) !important;
border-radius: 50% !important;
pointer-events: none !important;
z-index: 2 !important;
transition: transform 0.5s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.3s ease !important;
}
/* Shimmer wave animation */
@keyframes liquidShimmer {
0%, 100% {
left: -100%;
opacity: 0;
}
15% {
opacity: 1;
}
50% {
left: 150%;
opacity: 1;
}
65%, 100% {
opacity: 0;
}
}
/* Hover state - jelly squish lift with bouncy transition */
button.liquid-morph:hover,
.button.liquid-morph:hover,
.btn.liquid-morph:hover,
a.button.liquid-morph:hover,
.wp-block-button__link.liquid-morph:hover,
.wp-block-button.liquid-morph .wp-block-button__link:hover {
/* Lift, grow, and squish into different blob shape */
transform: translateY(-8px) scale(1.08) !important;
/* Morph to opposite asymmetric shape - subtle "jelly squish" */
border-radius: 45% 55% 50% 50% / 50% 50% 55% 45% !important;
/* Enhanced glowing shadow */
box-shadow:
0 20px 50px -8px rgba(0, 212, 228, 0.55),
0 12px 30px -5px rgba(0, 119, 190, 0.4),
0 0 45px rgba(0, 212, 228, 0.25),
inset 0 4px 10px rgba(255, 255, 255, 0.45),
inset 0 -5px 12px rgba(0, 60, 100, 0.12) !important;
}
/* Highlight bubble shifts on hover */
button.liquid-morph:hover::after,
.button.liquid-morph:hover::after,
.btn.liquid-morph:hover::after,
a.button.liquid-morph:hover::after,
.wp-block-button__link.liquid-morph:hover::after,
.wp-block-button.liquid-morph .wp-block-button__link:hover::after {
transform: translate(5%, -5%) scale(1.1) !important;
opacity: 0.9 !important;
}
/* Active/click state - squash down like pressing jelly */
button.liquid-morph:active,
.button.liquid-morph:active,
.btn.liquid-morph:active,
a.button.liquid-morph:active,
.wp-block-button__link.liquid-morph:active,
.wp-block-button.liquid-morph .wp-block-button__link:active {
transform: translateY(3px) scale(1.02, 0.94) !important;
transition: transform 0.08s ease-out, box-shadow 0.08s ease-out, border-radius 0.08s ease-out !important;
/* Flatten into wider blob */
border-radius: 50% 50% 48% 52% / 45% 45% 52% 48% !important;
box-shadow:
0 4px 12px -4px rgba(0, 119, 190, 0.4),
0 2px 6px -2px rgba(0, 0, 0, 0.25),
inset 0 6px 15px rgba(0, 0, 0, 0.12),
inset 0 -2px 4px rgba(255, 255, 255, 0.2) !important;
}
/* Highlight squashes on press */
button.liquid-morph:active::after,
.button.liquid-morph:active::after,
.btn.liquid-morph:active::after,
a.button.liquid-morph:active::after,
.wp-block-button__link.liquid-morph:active::after,
.wp-block-button.liquid-morph .wp-block-button__link:active::after {
transform: translate(0, 3px) scale(1.15, 0.6) !important;
opacity: 0.6 !important;
}
/* Focus state - accessibility glow ring */
button.liquid-morph:focus-visible,
.button.liquid-morph:focus-visible,
.btn.liquid-morph:focus-visible,
a.button.liquid-morph:focus-visible,
.wp-block-button__link.liquid-morph:focus-visible,
.wp-block-button.liquid-morph .wp-block-button__link:focus-visible {
outline: none !important;
box-shadow:
0 0 0 4px rgba(0, 212, 228, 0.5),
0 10px 30px -8px rgba(0, 119, 190, 0.4),
inset 0 2px 4px rgba(255, 255, 255, 0.3) !important;
}
/* ===== DARK MODE LIQUID BUTTONS ===== */
body.dark-mode button.liquid-morph,
body.dark-mode .button.liquid-morph,
body.dark-mode .btn.liquid-morph,
body.dark-mode a.button.liquid-morph,
body.dark-mode .wp-block-button__link.liquid-morph,
body.dark-mode .wp-block-button.liquid-morph .wp-block-button__link {
/* Glowing cyan shadow in dark mode */
box-shadow:
0 10px 35px -8px rgba(0, 212, 228, 0.5),
0 5px 18px -3px rgba(0, 0, 0, 0.3),
0 0 25px rgba(0, 212, 228, 0.15),
inset 0 2px 5px rgba(255, 255, 255, 0.2),
inset 0 -3px 8px rgba(0, 0, 0, 0.15) !important;
}
body.dark-mode button.liquid-morph:hover,
body.dark-mode .button.liquid-morph:hover,
body.dark-mode .btn.liquid-morph:hover,
body.dark-mode a.button.liquid-morph:hover,
body.dark-mode .wp-block-button__link.liquid-morph:hover,
body.dark-mode .wp-block-button.liquid-morph .wp-block-button__link:hover {
/* Intense glowing shadow on hover */
box-shadow:
0 25px 60px -8px rgba(0, 255, 255, 0.6),
0 15px 40px -5px rgba(0, 212, 228, 0.45),
0 0 60px rgba(0, 255, 255, 0.35),
0 0 100px rgba(0, 212, 228, 0.15),
inset 0 4px 10px rgba(255, 255, 255, 0.35),
inset 0 -5px 15px rgba(0, 0, 0, 0.15) !important;
}
body.dark-mode button.liquid-morph:focus-visible,
body.dark-mode .button.liquid-morph:focus-visible,
body.dark-mode .btn.liquid-morph:focus-visible,
body.dark-mode a.button.liquid-morph:focus-visible,
body.dark-mode .wp-block-button__link.liquid-morph:focus-visible,
body.dark-mode .wp-block-button.liquid-morph .wp-block-button__link:focus-visible {
box-shadow:
0 0 0 4px rgba(0, 255, 255, 0.6),
0 0 40px rgba(0, 212, 228, 0.4),
inset 0 2px 4px rgba(255, 255, 255, 0.2) !important;
}
/* ===== REDUCED MOTION ===== */
@media (prefers-reduced-motion: reduce) {
button.liquid-morph,
.button.liquid-morph,
.btn.liquid-morph,
a.button.liquid-morph,
.wp-block-button__link.liquid-morph,
.wp-block-button.liquid-morph .wp-block-button__link {
/* Simpler transitions for reduced motion */
transition: transform 0.2s ease, box-shadow 0.2s ease !important;
border-radius: 50px !important; /* Static rounded shape */
}
button.liquid-morph::before,
.button.liquid-morph::before,
.btn.liquid-morph::before,
a.button.liquid-morph::before,
.wp-block-button__link.liquid-morph::before,
.wp-block-button.liquid-morph .wp-block-button__link::before {
animation: none !important;
display: none !important;
}
button.liquid-morph:hover,
.button.liquid-morph:hover,
.btn.liquid-morph:hover,
a.button.liquid-morph:hover,
.wp-block-button__link.liquid-morph:hover,
.wp-block-button.liquid-morph .wp-block-button__link:hover {
transform: translateY(-4px) scale(1.02) !important;
border-radius: 50px !important; /* Keep static shape */
}
}
/* ========================================
wpForo Custom Styling - Added 2025-11-09
======================================== */
/* ========================================
The Water Testament - wpForo Custom Styling
Light & Dark Mode Support
======================================== */
/* Light Mode (Default) */
#wpforo-wrap {
background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(179,229,252,0.2) 100%);
border-radius: 12px;
padding: 0;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
}
/* Forum Menu Styling */
#wpforo-menu {
background: linear-gradient(135deg, #0D3B66 0%, #1976D2 100%);
border-radius: 12px 12px 0 0;
padding: 1rem 1.5rem;
box-shadow: 0 2px 10px rgba(13, 59, 102, 0.15);
}
#wpforo-menu #wpf-menu li a {
color: rgba(255, 255, 255, 0.95);
font-weight: 500;
transition: all 0.3s ease;
padding: 0.5rem 1rem;
border-radius: 8px;
}
#wpforo-menu #wpf-menu li a:hover {
background: rgba(255, 255, 255, 0.15);
color: #ffffff;
transform: translateY(-1px);
}
#wpforo-menu #wpf-menu li.wpforo-active a {
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
font-weight: 600;
}
/* Search Bar */
#wpforo-menu .wpf-search-form {
background: rgba(255, 255, 255, 0.15);
border-radius: 25px;
padding: 0.25rem 0.75rem;
border: 1px solid rgba(255, 255, 255, 0.2);
}
#wpforo-menu .wpf-search-field {
background: transparent;
border: none;
color: #ffffff;
font-size: 0.95rem;
}
#wpforo-menu .wpf-search-field::placeholder {
color: rgba(255, 255, 255, 0.7);
}
#wpforo-menu .wpf-search i {
color: rgba(255, 255, 255, 0.8);
}
/* Breadcrumb Styling */
.wpforo-subtop {
background: rgba(255, 255, 255, 0.8);
padding: 0.75rem 1.5rem;
border-bottom: 1px solid rgba(13, 59, 102, 0.1);
}
.wpf-breadcrumb a {
color: #0D3B66;
font-weight: 500;
transition: color 0.3s ease;
}
.wpf-breadcrumb a:hover {
color: #1976D2;
}
/* Main Title */
#wpforo-title {
background: linear-gradient(135deg, rgba(13, 59, 102, 0.05) 0%, rgba(25, 118, 210, 0.05) 100%);
padding: 1.5rem;
border-radius: 8px;
margin-bottom: 1.5rem;
color: #0D3B66;
font-size: 2rem;
font-weight: 700;
border-left: 4px solid #1976D2;
}
/* Forum Categories */
.wpforo-category {
background: #ffffff;
border-radius: 12px;
margin-bottom: 1.5rem;
box-shadow: 0 2px 10px rgba(0,0,0,0.05);
overflow: hidden;
transition: all 0.3s ease;
}
.wpforo-category:hover {
box-shadow: 0 4px 20px rgba(0,0,0,0.1);
transform: translateY(-2px);
}
.wpforo-category-title {
background: linear-gradient(135deg, #0D3B66 0%, #1976D2 100%);
color: #ffffff;
padding: 1rem 1.5rem;
font-size: 1.25rem;
font-weight: 600;
}
.wpforo-forum {
background: #ffffff;
border-bottom: 1px solid rgba(13, 59, 102, 0.1);
padding: 1.25rem 1.5rem;
transition: background 0.3s ease;
}
.wpforo-forum:hover {
background: rgba(179, 229, 252, 0.15);
}
.wpforo-forum:last-child {
border-bottom: none;
}
.wpforo-forum-title a {
color: #0D3B66;
font-size: 1.125rem;
font-weight: 600;
transition: color 0.3s ease;
}
.wpforo-forum-title a:hover {
color: #1976D2;
}
.wpforo-forum-description {
color: #5A7D95;
font-size: 0.95rem;
line-height: 1.6;
margin-top: 0.5rem;
}
/* Forum Icons */
.wpforo-forum-icon i {
font-size: 2rem;
color: #1976D2;
transition: transform 0.3s ease;
}
.wpforo-forum:hover .wpforo-forum-icon i {
transform: scale(1.1);
}
/* Admin Control Panel */
.wpf-admincp {
background: rgba(255, 243, 205, 0.5);
border: 1px solid rgba(245, 166, 35, 0.3);
border-radius: 8px;
margin-bottom: 1.5rem;
}
.wpf-acp-header {
background: linear-gradient(135deg, #F5A623 0%, #F76B1C 100%);
color: #ffffff;
padding: 0.75rem 1rem;
border-radius: 8px 8px 0 0;
}
.wpf-button-secondary {
background: #1976D2;
color: #ffffff;
border-radius: 8px;
padding: 0.5rem 1rem;
transition: all 0.3s ease;
border: none;
}
.wpf-button-secondary:hover {
background: #0D3B66;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(13, 59, 102, 0.2);
}
/* Footer Stats */
#wpforo-footer {
background: linear-gradient(135deg, rgba(13, 59, 102, 0.05) 0%, rgba(255, 255, 255, 1) 100%);
border-radius: 0 0 12px 12px;
padding: 1.5rem;
margin-top: 2rem;
}
#wpforo-stat-header {
color: #0D3B66;
font-weight: 600;
margin-bottom: 1rem;
padding-bottom: 0.75rem;
border-bottom: 2px solid rgba(13, 59, 102, 0.1);
}
#wpforo-stat-body {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1rem;
}
.wpf-footer-box {
background: #ffffff;
padding: 1rem;
border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.wpf-footer-box ul li {
color: #0D3B66;
padding: 0.5rem 0;
}
.wpf-stat-value {
color: #1976D2;
font-size: 1.5rem;
font-weight: 700;
}
.wpf-stat-label {
color: #5A7D95;
font-size: 0.875rem;
}
/* Notifications */
.wpforo-rcn-wrap {
background: rgba(255, 152, 0, 0.1);
border-left: 4px solid #FF9800;
border-radius: 8px;
margin-bottom: 1.5rem;
padding: 1rem 1.5rem;
}
/* Share Buttons */
.wpf-sbtn {
background: rgba(13, 59, 102, 0.05);
padding: 1rem;
border-radius: 8px;
margin: 1rem 0;
}
.wpf-sb-button {
background: #1976D2;
color: #ffffff;
padding: 0.5rem 1rem;
border-radius: 25px;
transition: all 0.3s ease;
}
.wpf-sb-button:hover {
background: #0D3B66;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(13, 59, 102, 0.2);
}
/* ========================================
DARK MODE STYLING
======================================== */
body[data-theme="dark"] #wpforo-wrap {
background: linear-gradient(135deg, rgba(18, 18, 18, 1) 0%, rgba(13, 59, 102, 0.3) 100%);
}
body[data-theme="dark"] #wpforo-menu {
background: linear-gradient(135deg, #0D3B66 0%, #1565C0 100%);
}
body[data-theme="dark"] #wpforo-title {
background: linear-gradient(135deg, rgba(13, 59, 102, 0.2) 0%, rgba(25, 118, 210, 0.15) 100%);
color: #B3E5FC;
border-left-color: #4FC3F7;
}
body[data-theme="dark"] .wpforo-category {
background: rgba(30, 30, 30, 0.9);
box-shadow: 0 2px 10px rgba(0,0,0,0.3);
}
body[data-theme="dark"] .wpforo-category:hover {
box-shadow: 0 4px 20px rgba(0,0,0,0.4);
}
body[data-theme="dark"] .wpforo-category-title {
background: linear-gradient(135deg, #0D3B66 0%, #1565C0 100%);
}
body[data-theme="dark"] .wpforo-forum {
background: rgba(30, 30, 30, 0.9);
border-bottom-color: rgba(79, 195, 247, 0.1);
}
body[data-theme="dark"] .wpforo-forum:hover {
background: rgba(13, 59, 102, 0.2);
}
body[data-theme="dark"] .wpforo-forum-title a {
color: #B3E5FC;
}
body[data-theme="dark"] .wpforo-forum-title a:hover {
color: #4FC3F7;
}
body[data-theme="dark"] .wpforo-forum-description {
color: #90CAF9;
}
body[data-theme="dark"] .wpforo-forum-icon i {
color: #4FC3F7;
}
body[data-theme="dark"] .wpforo-subtop {
background: rgba(18, 18, 18, 0.9);
border-bottom-color: rgba(79, 195, 247, 0.1);
}
body[data-theme="dark"] .wpf-breadcrumb a {
color: #B3E5FC;
}
body[data-theme="dark"] .wpf-breadcrumb a:hover {
color: #4FC3F7;
}
body[data-theme="dark"] .wpf-admincp {
background: rgba(255, 152, 0, 0.15);
border-color: rgba(245, 166, 35, 0.3);
}
body[data-theme="dark"] #wpforo-footer {
background: linear-gradient(135deg, rgba(13, 59, 102, 0.15) 0%, rgba(18, 18, 18, 1) 100%);
}
body[data-theme="dark"] #wpforo-stat-header {
color: #B3E5FC;
border-bottom-color: rgba(79, 195, 247, 0.2);
}
body[data-theme="dark"] .wpf-footer-box {
background: rgba(30, 30, 30, 0.8);
box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
body[data-theme="dark"] .wpf-footer-box ul li {
color: #B3E5FC;
}
body[data-theme="dark"] .wpf-stat-value {
color: #4FC3F7;
}
body[data-theme="dark"] .wpf-stat-label {
color: #90CAF9;
}
body[data-theme="dark"] .wpforo-rcn-wrap {
background: rgba(255, 152, 0, 0.2);
}
body[data-theme="dark"] .wpf-sbtn {
background: rgba(13, 59, 102, 0.2);
}
/* Responsive Adjustments */
@media (max-width: 768px) {
#wpforo-menu {
padding: 0.75rem 1rem;
}
#wpforo-title {
font-size: 1.5rem;
padding: 1rem;
}
.wpforo-category-title {
font-size: 1.125rem;
}
#wpforo-stat-body {
grid-template-columns: 1fr;
}
}
/* ========================================
wpForo Custom Styling V2 - Updated with \!important
Added $(date +%Y-%m-%d)
======================================== */
/* ========================================
The Water Testament - wpForo Custom Styling V2
Higher Specificity for Override
======================================== */
/* Light Mode */
#wpforo #wpforo-wrap {
background: linear-gradient(135deg, rgba(255,255,255,1) 0%, rgba(179,229,252,0.2) 100%) !important;
border-radius: 12px !important;
box-shadow: 0 4px 20px rgba(0,0,0,0.08) !important;
}
/* Forum Menu */
#wpforo #wpforo-menu {
background: linear-gradient(135deg, #0D3B66 0%, #1976D2 100%) !important;
border-radius: 12px 12px 0 0 !important;
padding: 1rem 1.5rem !important;
}
#wpforo #wpforo-menu #wpf-menu li a {
color: rgba(255, 255, 255, 0.95) !important;
font-weight: 500 !important;
transition: all 0.3s ease !important;
padding: 0.5rem 1rem !important;
border-radius: 8px !important;
}
#wpforo #wpforo-menu #wpf-menu li a:hover {
background: rgba(255, 255, 255, 0.15) !important;
color: #ffffff !important;
}
#wpforo #wpforo-menu #wpf-menu li.wpforo-active a {
background: rgba(255, 255, 255, 0.2) !important;
color: #ffffff !important;
font-weight: 600 !important;
}
/* Search */
#wpforo #wpforo-menu .wpf-search-form {
background: rgba(255, 255, 255, 0.15) !important;
border-radius: 25px !important;
border: 1px solid rgba(255, 255, 255, 0.2) !important;
}
#wpforo #wpforo-menu .wpf-search-field {
background: transparent !important;
color: #ffffff !important;
}
/* Breadcrumb */
#wpforo .wpforo-subtop {
background: rgba(255, 255, 255, 0.8) !important;
padding: 0.75rem 1.5rem !important;
border-bottom: 1px solid rgba(13, 59, 102, 0.1) !important;
}
#wpforo .wpf-breadcrumb a {
color: #0D3B66 !important;
font-weight: 500 !important;
}
#wpforo .wpf-breadcrumb a:hover {
color: #1976D2 !important;
}
/* Title */
#wpforo #wpforo-title {
background: linear-gradient(135deg, rgba(13, 59, 102, 0.05) 0%, rgba(25, 118, 210, 0.05) 100%) !important;
padding: 1.5rem !important;
border-radius: 8px !important;
color: #0D3B66 !important;
font-size: 2rem !important;
font-weight: 700 !important;
border-left: 4px solid #1976D2 !important;
}
/* Admin Panel */
#wpforo .wpf-admincp {
background: rgba(255, 243, 205, 0.5) !important;
border: 1px solid rgba(245, 166, 35, 0.3) !important;
border-radius: 8px !important;
}
#wpforo .wpf-acp-header {
background: linear-gradient(135deg, #F5A623 0%, #F76B1C 100%) !important;
color: #ffffff !important;
border-radius: 8px 8px 0 0 !important;
}
#wpforo .wpf-button-secondary {
background: #1976D2 !important;
color: #ffffff !important;
border-radius: 8px !important;
transition: all 0.3s ease !important;
}
#wpforo .wpf-button-secondary:hover {
background: #0D3B66 !important;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(13, 59, 102, 0.2) !important;
}
/* Footer */
#wpforo #wpforo-footer {
background: linear-gradient(135deg, rgba(13, 59, 102, 0.05) 0%, rgba(255, 255, 255, 1) 100%) !important;
border-radius: 0 0 12px 12px !important;
padding: 1.5rem !important;
}
#wpforo #wpforo-stat-header {
color: #0D3B66 !important;
border-bottom: 2px solid rgba(13, 59, 102, 0.1) !important;
}
#wpforo .wpf-footer-box {
background: #ffffff !important;
border-radius: 8px !important;
box-shadow: 0 2px 8px rgba(0,0,0,0.05) !important;
}
#wpforo .wpf-stat-value {
color: #1976D2 !important;
font-size: 1.5rem !important;
font-weight: 700 !important;
}
#wpforo .wpf-stat-label {
color: #5A7D95 !important;
}
/* Notifications */
#wpforo .wpforo-rcn-wrap {
background: rgba(255, 152, 0, 0.1) !important;
border-left: 4px solid #FF9800 !important;
border-radius: 8px !important;
}
/* Share Buttons */
#wpforo .wpf-sbtn {
background: rgba(13, 59, 102, 0.05) !important;
border-radius: 8px !important;
}
#wpforo .wpf-sb-button {
background: #1976D2 !important;
color: #ffffff !important;
border-radius: 25px !important;
}
#wpforo .wpf-sb-button:hover {
background: #0D3B66 !important;
}
/* Dark Mode */
body[data-theme="dark"] #wpforo #wpforo-wrap {
background: linear-gradient(135deg, rgba(18, 18, 18, 1) 0%, rgba(13, 59, 102, 0.3) 100%) !important;
}
body[data-theme="dark"] #wpforo #wpforo-menu {
background: linear-gradient(135deg, #0D3B66 0%, #1565C0 100%) !important;
}
body[data-theme="dark"] #wpforo #wpforo-title {
background: linear-gradient(135deg, rgba(13, 59, 102, 0.2) 0%, rgba(25, 118, 210, 0.15) 100%) !important;
color: #B3E5FC !important;
border-left-color: #4FC3F7 !important;
}
body[data-theme="dark"] #wpforo .wpforo-subtop {
background: rgba(18, 18, 18, 0.9) !important;
border-bottom-color: rgba(79, 195, 247, 0.1) !important;
}
body[data-theme="dark"] #wpforo .wpf-breadcrumb a {
color: #B3E5FC !important;
}
body[data-theme="dark"] #wpforo #wpforo-footer {
background: linear-gradient(135deg, rgba(13, 59, 102, 0.15) 0%, rgba(18, 18, 18, 1) 100%) !important;
}
body[data-theme="dark"] #wpforo #wpforo-stat-header {
color: #B3E5FC !important;
border-bottom-color: rgba(79, 195, 247, 0.2) !important;
}
body[data-theme="dark"] #wpforo .wpf-footer-box {
background: rgba(30, 30, 30, 0.8) !important;
}
body[data-theme="dark"] #wpforo .wpf-stat-value {
color: #4FC3F7 !important;
}
body[data-theme="dark"] #wpforo .wpf-stat-label {
color: #90CAF9 !important;
}
/* Hide Kadence breadcrumbs */
.kadence-breadcrumb-container {
display: none !important;
}
.mpwoo_credit {
display: none !important;
}
body.dark-mode .has-white-background-color {
background-color: #0d3249 !important;
}
/* ========================================
Aeionica Gallery & 3D Book Exclusions
======================================== */
/* Disable global lightbox for Aeionica gallery images */
.aeionica-gallery img,
.aeionica-gallery-container img,
.wp-block-aeionica-gallery img,
[class*="aeionica"] img {
/* Aeionica has its own enhanced lightbox - don't add lightbox-enabled class */
cursor: default !important;
}
/* Prevent lightbox initialization on Aeionica elements */
.aeionica-gallery,
.aeionica-gallery-container,
.wp-block-aeionica-gallery,
[class*="aeionica"] {
/* This class prevents the global lightbox from initializing */
}
/* Disable hover scale effect for Aeionica gallery images */
.aeionica-gallery .wp-block-image:hover img,
.aeionica-gallery .kb-image:hover img,
.aeionica-gallery-container .wp-block-image:hover img,
.aeionica-gallery-container .kb-image:hover img,
.wp-block-aeionica-gallery .wp-block-image:hover img,
.wp-block-aeionica-gallery .kb-image:hover img,
[class*="aeionica"] .wp-block-image:hover img,
[class*="aeionica"] .kb-image:hover img {
transform: none !important;
box-shadow: none !important;
filter: none !important;
}
/* Disable hover scale effect for 3D book shortcode */
.threed-book-container img,
.three-d-book img,
.book-3d-view img,
[class*="threed-book"] img,
[class*="3d-book"] img {
transition: none !important;
}
.threed-book-container .wp-block-image:hover img,
.three-d-book .wp-block-image:hover img,
.book-3d-view .wp-block-image:hover img,
[class*="threed-book"] .wp-block-image:hover img,
[class*="3d-book"] .wp-block-image:hover img {
transform: none !important;
box-shadow: none !important;
filter: none !important;
cursor: default !important;
}
/* General .no-lightbox class utility (for manual exclusions) */
/* IMPORTANT: Exclude Aeionica galleries - they have their own enhanced lightbox system */
.no-lightbox:not([class*="aeionica"]) img,
.no-lightbox:not([class*="aeionica"]) .wp-block-image:hover img,
.no-lightbox:not([class*="aeionica"]) .kb-image:hover img {
transform: none !important;
box-shadow: none !important;
filter: none !important;
cursor: default !important;
}