/* ==========================================================================
AN Theme Design Tokens
Version: 1.0.0
This file contains all design tokens (colors, spacing, typography, etc.)
for the AN Kajabi themes. Marketing teams can update these values without
touching any other CSS files.
HOW TO USE:
1. Update color values under "Brand Colors" section
2. Adjust spacing values under "Spacing System" section
3. Modify typography sizes under "Typography Scale" section
4. Save and re-export themes
========================================================================== */
:root {
/* ==========================================================================
BRAND COLORS
Update these to change colors across the entire theme
========================================================================== */
/* Primary Brand Colors */
--c-brand-600: #5e3bff; /* Primary purple - Main CTAs, links, buttons */
--c-brand-800: #4025e0; /* Dark purple - Hover states, active elements */
--c-brand-100: #e9e6ff; /* Light purple - Backgrounds, subtle fills */
/* Accent Colors */
--c-accent-teal: #18d5e4; /* Teal - Success states, highlights */
--c-accent-peach: #ff8bcb; /* Peach/Pink - Emotional CTAs, alerts */
--c-accent-lemon: #ffe86b; /* Yellow - Badges, special offers */
/* Text Colors */
--c-ink-900: #1b1b29; /* Darkest - Main headings */
--c-ink-700: #323346; /* Dark - Body text */
--c-ink-500: #6e6f7b; /* Medium - Secondary text, captions */
--c-white: #ffffff; /* White - Reversed text, backgrounds */
/* Background Colors */
--c-bg-light: #fafafa; /* Light gray - Section backgrounds */
--c-bg-lavender: #e9e6ff; /* Lavender - Hero backgrounds */
/* Gradients */
--g-brand: linear-gradient(135deg, #6757ff 0%, #7b4dff 100%);
--g-purple-dark: linear-gradient(135deg, #5e3bff 0%, #4025e0 100%);
--g-purple-pink: linear-gradient(135deg, #5e3bff 0%, #ff8bcb 100%);
--g-teal-blue: linear-gradient(135deg, #18d5e4 0%, #5e3bff 100%);
--g-warm-sunset: linear-gradient(135deg, #ff8bcb 0%, #ffe86b 100%);
/* ==========================================================================
SPACING SYSTEM
Based on 8-point grid - Update these to change spacing across the theme
========================================================================== */
--space-xs: 4px; /* Extra small - Tight spacing */
--space-sm: 8px; /* Small - Compact elements */
--space-md: 16px; /* Medium - Default spacing */
--space-lg: 24px; /* Large - Section padding */
--space-xl: 32px; /* Extra large - Major sections */
--space-2xl: 64px; /* 2X large - Hero sections */
--space-3xl: 96px; /* 3X large - Page sections */
--space-4xl: 128px; /* 4X large - Major breaks */
/* ==========================================================================
TYPOGRAPHY SCALE
Font sizes for consistent hierarchy
========================================================================== */
--fs-display: 3rem; /* 48px - Hero headlines */
--fs-h1: 2.5rem; /* 40px - Page titles */
--fs-h2: 1.875rem; /* 30px - Section headings */
--fs-h3: 1.5rem; /* 24px - Sub-sections */
--fs-h4: 1.25rem; /* 20px - Subheadings */
--fs-h5: 1.125rem; /* 18px - Minor headings */
--fs-h6: 1rem; /* 16px - Label headings */
--fs-body-lg: 1.125rem; /* 18px - Lead paragraphs */
--fs-body: 1rem; /* 16px - Regular text */
--fs-caption: 0.875rem; /* 14px - Small text */
--fs-tiny: 0.75rem; /* 12px - Fine print */
/* Font Families */
--font-sans:
Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
sans-serif;
--font-serif: Merriweather, Georgia, "Times New Roman", serif;
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
/* Font Weights */
--fw-light: 300;
--fw-normal: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
/* Line Heights */
--lh-tight: 1.25;
--lh-normal: 1.5;
--lh-relaxed: 1.75;
/* ==========================================================================
BORDERS & RADIUS
Corner radius values for consistency
========================================================================== */
--radius-sm: 8px; /* Small elements - inputs, tags */
--radius-md: 16px; /* Medium - cards, containers */
--radius-lg: 24px; /* Large - hero sections */
--radius-xl: 32px; /* Extra large - special sections */
--radius-pill: 9999px; /* Full round - buttons, pills */
/* Border Colors */
--border-light: rgba(0, 0, 0, 0.04);
--border-medium: rgba(0, 0, 0, 0.08);
--border-dark: rgba(0, 0, 0, 0.12);
/* ==========================================================================
SHADOWS & EFFECTS
Elevation and depth effects
========================================================================== */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-card: 0 4px 12px rgba(0, 0, 0, 0.05);
--shadow-media: 0 12px 24px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.1);
/* Glow Effects */
--glow-brand: 0 0 12px rgba(105, 78, 255, 0.25);
--glow-brand-lg: 0 0 24px rgba(105, 78, 255, 0.35);
/* Blur Effects */
--blur-sm: 4px;
--blur-md: 8px;
--blur-lg: 16px;
/* ==========================================================================
MOTION SCALE SYSTEM
Standardized animation timing and easing functions
========================================================================== */
/* Motion Durations - Single source of truth for all animations */
--motion-duration-instant: 100ms; /* Micro-interactions, hover states */
--motion-duration-fast: 200ms; /* Quick transitions, fades */
--motion-duration-base: 300ms; /* Standard animations, slides */
--motion-duration-slow: 500ms; /* Deliberate animations, reveals */
--motion-duration-deliberate: 800ms; /* Major transitions, page changes */
/* Motion Easing Functions - Consistent across all animations */
--motion-ease-standard: cubic-bezier(
0.4,
0,
0.2,
1
); /* Default for most animations */
--motion-ease-decelerate: cubic-bezier(
0,
0,
0.2,
1
); /* Enter/fade in animations */
--motion-ease-accelerate: cubic-bezier(
0.4,
0,
1,
1
); /* Exit/fade out animations */
--motion-ease-spring: cubic-bezier(
0.175,
0.885,
0.32,
1.275
); /* Playful bounce effects */
--motion-ease-linear: linear; /* Continuous animations */
/* Legacy Animation Variables (for backward compatibility) */
--ease-spring: var(--motion-ease-spring);
--ease-out: var(--motion-ease-decelerate);
--ease-in-out: var(--motion-ease-standard);
--duration-fast: var(--motion-duration-fast);
--duration-base: var(--motion-duration-base);
--duration-slow: var(--motion-duration-slow);
--duration-slower: var(--motion-duration-deliberate);
/* ==========================================================================
LAYOUT
Container widths and breakpoints
========================================================================== */
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1536px;
/* Z-index Scale */
--z-dropdown: 50;
--z-header: 100;
--z-sticky: 200;
--z-overlay: 300;
--z-modal: 1000;
--z-toast: 1100;
/* ==========================================================================
LEGACY MAPPINGS
These maintain compatibility with existing code
DO NOT EDIT unless updating throughout the codebase
========================================================================== */
/* Legacy Color Mappings */
--an-navy: var(--c-brand-600);
--an-teal: var(--c-accent-teal);
--an-coral: var(--c-accent-peach);
--an-gold: var(--c-accent-lemon);
--an-plum: var(--c-brand-800);
--an-peach: var(--c-brand-100);
--an-white: var(--c-white);
--an-grey: #f8f9fa;
--an-slate: var(--c-ink-700);
--an-primary: var(--c-brand-600);
--an-secondary: var(--c-accent-teal);
--an-text-dark: var(--c-ink-900);
--an-text-medium: var(--c-ink-500);
--an-bg-light: var(--c-brand-100);
/* Legacy Spacing Mappings */
--an-space-xs: var(--space-xs);
--an-space-sm: var(--space-sm);
--an-space-md: var(--space-md);
--an-space-lg: var(--space-lg);
--an-space-xl: var(--space-xl);
--an-space-2xl: 48px;
--an-space-3xl: var(--space-2xl);
/* Legacy Typography Mappings */
--an-font-xs: 0.75rem;
--an-font-sm: var(--fs-caption);
--an-font-base: var(--fs-body);
--an-font-lg: var(--fs-body-lg);
--an-font-xl: 1.25rem;
--an-font-2xl: 1.5rem;
--an-font-3xl: var(--fs-h2);
--an-font-4xl: var(--fs-h1);
--an-font-display: var(--fs-display);
/* Legacy Border Mappings */
--an-border: var(--border-light);
--an-radius-sm: var(--radius-sm);
--an-radius-md: var(--radius-md);
--an-radius-lg: var(--radius-lg);
--an-radius-full: var(--radius-pill);
/* Legacy Shadow Mappings */
--an-shadow-sm: var(--shadow-sm);
--an-shadow-md: var(--shadow-card);
--an-shadow-lg: var(--shadow-media);
--an-shadow-xl: 0 20px 25px -5px rgba(26, 45, 78, 0.1);
--an-shadow-2xl: 0 25px 50px -12px rgba(26, 45, 78, 0.25);
/* Legacy Transition Mappings */
--an-transition-fast: var(--duration-fast) var(--ease-out);
--an-transition-base: var(--duration-base) var(--ease-out);
--an-transition-slow: var(--duration-slow) var(--ease-out);
/* Additional Legacy Variables */
--an-primary-gradient: linear-gradient(135deg, #5e3bff 0%, #8b7bff 100%);
--an-muted: #d4d4d8;
--an-ink-normal: #0a0a0b;
--an-ink-light: #71717a;
--an-ink-lighter: #a1a1aa;
--an-border-light: #f4f4f5;
--an-lavender: #e9e6ff;
--an-text-light: var(--c-ink-500);
--an-text-white: var(--c-white);
--an-bg-white: var(--c-white);
--an-bg-lighter: var(--an-lavender);
--an-font-display: 3rem;
--an-space-4xl: 96px;
--an-font-normal: 400;
--an-font-medium: 500;
--an-font-semibold: 600;
--an-font-bold: 700;
--an-leading-tight: 1.25;
--an-leading-normal: 1.5;
--an-leading-relaxed: 1.75;
--an-container-sm: 640px;
--an-container-md: 768px;
--an-container-lg: 1024px;
--an-container-xl: 1280px;
--an-container-2xl: 1536px;
--an-z-dropdown: 50;
--an-z-header: 100;
--an-z-sticky: 200;
--an-z-overlay: 300;
--an-z-modal: 1000;
--an-radius-xl: 24px;
--an-radius-2xl: 32px;
--an-blur-sm: 4px;
--an-blur-md: 8px;
--an-blur-lg: 16px;
--an-blur-xl: 24px;
--an-ease-out: cubic-bezier(0.4, 0, 0.2, 1);
--an-ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* ==========================================================================
DARK MODE TOKENS (Optional - uncomment to enable)
========================================================================== */
/*
@media (prefers-color-scheme: dark) {
:root {
--c-ink-900: #FFFFFF;
--c-ink-700: #E4E4E7;
--c-ink-500: #A1A1AA;
--c-bg-light: #1B1B29;
--c-white: #18181B;
--border-light: rgba(255, 255, 255, 0.1);
--border-medium: rgba(255, 255, 255, 0.2);
}
}
*/
/* Table of Contents
1. Typography Base
2. Common Button Styles
3. Shared Navigation Styles
4. Shared Footer Styles
5. Utility Classes
6. Responsive Helpers
*/
/* Note: All CSS variables have been moved to _tokens.css for easier marketing team access */
/* ==========================================================================
1. Typography Base
========================================================================== */
body {
font-family: var(--font-sans);
color: var(--c-ink-700);
line-height: 1.6;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Serif headings for warmth and authority */
h1,
h2 {
font-family: var(--font-serif);
color: var(--c-ink-900);
line-height: 1.3;
font-weight: 400; /* Regular weight for serif readability */
letter-spacing: -0.02em; /* Tighten tracking slightly */
}
/* Sans-serif for smaller headings */
h3,
h4,
h5,
h6 {
font-family: var(--font-sans);
color: var(--c-ink-900);
line-height: 1.4;
font-weight: 500; /* Medium weight for sans headings */
}
/* Typography scale classes */
.text-display {
font-size: var(--fs-display);
}
.text-h1 {
font-size: var(--fs-h1);
}
.text-h2 {
font-size: var(--fs-h2);
}
.text-body-lg {
font-size: var(--fs-body-lg);
}
.text-body {
font-size: var(--fs-body);
}
.text-caption {
font-size: var(--fs-caption);
}
/* Subtitle styles for elegant contrast */
.hero__subtitle,
.hero-subtitle,
[class*="subtitle"] {
font-weight: var(--fw-light);
color: var(--c-ink-500);
line-height: 1.6;
letter-spacing: 0.01em;
}
/* Pull quotes and emphasis with italics */
.pull-quote,
blockquote,
.testimonial-quote {
font-style: italic;
font-family: var(--font-serif);
color: var(--c-ink-700);
line-height: 1.5;
letter-spacing: -0.01em;
}
/* Lead paragraphs */
.lead,
.text-lead {
font-size: var(--fs-body-lg);
font-weight: var(--fw-light);
line-height: 1.7;
color: var(--c-ink-700);
}
/* Optimal reading width for text-heavy content */
.prose,
.content-body,
.blog-post-body,
.article-content,
[class*="post__body"] {
max-width: 65ch; /* ~50-75 characters per line */
margin-left: auto;
margin-right: auto;
}
/* Wider container for mixed content */
.content-container {
max-width: 42rem; /* ~672px */
margin-left: auto;
margin-right: auto;
}
/* Blog and article specific */
.blog-post-body p,
.article-content p {
margin-bottom: 1.5rem;
}
.blog-post-body h2,
.blog-post-body h3,
.article-content h2,
.article-content h3 {
margin-top: 2.5rem;
margin-bottom: 1rem;
}
a {
color: var(--c-brand-600);
text-decoration: none;
transition: color var(--an-transition-base);
}
a:hover {
color: var(--c-brand-800);
}
/* ==========================================================================
3. Common Button Styles
========================================================================== */
/* Primary Button - Brand Gradient */
.btn-primary,
.btn--primary,
.btn.btn-primary {
background: var(--g-brand);
color: var(--c-white);
border: none;
border-radius: var(--radius-pill);
padding: 12px 32px;
font-weight: 500;
font-size: var(--fs-body);
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.25) inset,
0 4px 8px rgba(94, 59, 255, 0.35);
transition:
transform var(--motion-duration-fast) var(--motion-ease-standard),
box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
text-transform: none;
letter-spacing: normal;
}
.btn-primary:hover,
.btn--primary:hover,
.btn.btn-primary:hover {
transform: translateY(-2px);
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.25) inset,
0 8px 16px rgba(94, 59, 255, 0.4);
background: var(--g-brand);
color: var(--c-white);
}
/* Secondary Button */
.btn-secondary,
.btn--secondary,
.btn.btn-secondary {
background: var(--c-white);
color: var(--c-brand-600);
border: 1px solid var(--c-brand-100);
border-radius: 12px;
padding: 10px 24px;
font-weight: 500;
font-size: var(--fs-body);
transition: all var(--motion-duration-fast) var(--motion-ease-standard);
text-transform: none;
letter-spacing: normal;
}
.btn-secondary:hover,
.btn--secondary:hover,
.btn.btn-secondary:hover {
background: var(--c-brand-100);
border-color: var(--c-brand-600);
color: var(--c-brand-600);
}
/* Ghost Button */
.btn-ghost {
background: transparent;
color: var(--c-brand-600);
border: 1px solid currentColor;
border-radius: 12px;
padding: 10px 24px;
font-weight: 500;
transition: all var(--motion-duration-fast) var(--motion-ease-standard);
}
.btn-ghost:hover {
background: var(--c-brand-600);
color: var(--c-white);
}
/* Button size variations */
.btn-sm {
padding: 8px 20px;
font-size: var(--fs-caption);
}
.btn-lg {
padding: 16px 40px;
font-size: var(--fs-body-lg);
}
/* All buttons base reset */
.btn {
display: inline-block;
text-align: center;
text-decoration: none;
cursor: pointer;
user-select: none;
line-height: 1.5;
transition: all var(--motion-duration-fast) var(--motion-ease-standard);
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
}
/* ==========================================================================
4. Shared Navigation Styles
========================================================================== */
.header {
background-color: var(--c-white);
border-bottom: 1px solid var(--an-border);
}
.header__nav .link-list__link {
color: var(--c-ink-900);
font-weight: 500;
position: relative;
transition: color var(--an-transition-base);
}
.header__nav .link-list__link:hover {
color: var(--c-brand-600);
}
/* Underline animation */
.header__nav .link-list__link::after {
content: "";
position: absolute;
width: 0;
height: 2px;
bottom: -4px;
left: 50%;
background-color: var(--c-brand-600);
transition: all var(--an-transition-base);
transform: translateX(-50%);
}
.header__nav .link-list__link:hover::after {
width: 100%;
}
/* Mobile Navigation */
.header__content--mobile {
background-color: #ffffff;
}
/* Removed duplicate mobile link styles - see updated version below */
/* ==========================================================================
5. Shared Footer Styles
========================================================================== */
.footer {
background-color: var(--c-ink-900);
color: var(--c-white);
padding: var(--space-2xl) 0 var(--space-xl);
}
.footer__title {
color: var(--c-white);
margin-bottom: var(--space-lg);
}
.footer__link {
color: rgba(255, 255, 255, 0.8);
transition: color var(--an-transition-base);
}
.footer__link:hover {
color: var(--c-accent-teal);
}
.footer__social-icon {
background-color: rgba(255, 255, 255, 0.1);
border-radius: var(--radius-pill);
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all var(--an-transition-base);
}
.footer__social-icon:hover {
background-color: var(--c-brand-600);
transform: translateY(-2px);
}
/* ==========================================================================
6. Utility Classes
========================================================================== */
/* Text color utilities - New brand colors */
.text-brand {
color: var(--c-brand-600) ;
}
.text-brand-dark {
color: var(--c-brand-800) ;
}
.text-teal {
color: var(--c-accent-teal) ;
}
.text-peach {
color: var(--c-accent-peach) ;
}
.text-lemon {
color: var(--c-accent-lemon) ;
}
.text-ink-900 {
color: var(--c-ink-900) ;
}
.text-ink-700 {
color: var(--c-ink-700) ;
}
.text-ink-500 {
color: var(--c-ink-500) ;
}
/* Legacy color mappings */
.text-navy {
color: var(--c-brand-600) ;
}
.text-coral {
color: var(--c-accent-peach) ;
}
.text-gold {
color: var(--c-accent-lemon) ;
}
.text-plum {
color: var(--c-brand-800) ;
}
/* Background color utilities - New brand colors */
.bg-brand {
background-color: var(--c-brand-600) ;
}
.bg-brand-light {
background-color: var(--c-brand-100) ;
}
.bg-brand-dark {
background-color: var(--c-brand-800) ;
}
.bg-teal {
background-color: var(--c-accent-teal) ;
}
.bg-peach {
background-color: var(--c-accent-peach) ;
}
.bg-lemon {
background-color: var(--c-accent-lemon) ;
}
.bg-white {
background-color: var(--c-white) ;
}
/* Legacy background mappings */
.bg-navy {
background-color: var(--c-brand-600) ;
}
.bg-coral {
background-color: var(--c-accent-peach) ;
}
.bg-gold {
background-color: var(--c-accent-lemon) ;
}
.bg-grey {
background-color: #f8f9fa !important;
}
/* Spacing utilities */
.mt-0 {
margin-top: 0 !important;
}
.mt-1 {
margin-top: var(--an-space-sm) !important;
}
.mt-2 {
margin-top: var(--an-space-md) !important;
}
.mt-3 {
margin-top: var(--an-space-lg) !important;
}
.mt-4 {
margin-top: var(--an-space-xl) !important;
}
.mb-0 {
margin-bottom: 0 !important;
}
.mb-1 {
margin-bottom: var(--an-space-sm) !important;
}
.mb-2 {
margin-bottom: var(--an-space-md) !important;
}
.mb-3 {
margin-bottom: var(--an-space-lg) !important;
}
.mb-4 {
margin-bottom: var(--an-space-xl) !important;
}
/* ==========================================================================
7. Responsive Helpers
========================================================================== */
@media (max-width: 767px) {
.hidden--mobile {
display: none !important;
}
:root {
--an-font-4xl: 1.875rem; /* 30px on mobile */
--an-font-3xl: 1.5rem; /* 24px on mobile */
}
}
@media (min-width: 768px) and (max-width: 991px) {
.hidden--tablet {
display: none !important;
}
}
@media (min-width: 992px) {
.hidden--desktop {
display: none !important;
}
}
/* ==========================================================================
8. Book Section
========================================================================== */
.section--book {
padding: var(--an-space-xl) 0;
background-color: var(--an-grey);
overflow: hidden;
}
/* Top text styling */
.book__top-text {
text-align: center;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--an-slate);
margin-bottom: var(--an-space-lg);
font-weight: 500;
}
/* Logo row */
.book__logos {
display: flex;
justify-content: center;
align-items: center;
gap: var(--an-space-xl);
margin-bottom: var(--an-space-xl);
flex-wrap: wrap;
}
.book__logo {
opacity: 0.6;
transition: all var(--ease);
}
.book__logo:hover {
opacity: 1;
transform: scale(1.05);
}
.book__logo img {
max-height: 30px;
width: auto;
filter: grayscale(100%);
transition: filter var(--ease);
}
.book__logo:hover img {
filter: grayscale(0%) brightness(1.1);
}
/* Main content layout */
.book__content {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: var(--an-space-xl);
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
/* Quote sections */
.book__quote {
padding: var(--an-space-lg);
}
.book__quote--left {
text-align: right;
}
.book__quote--right {
text-align: left;
}
/* Star ratings */
.book__stars {
display: flex;
gap: 4px;
margin-bottom: var(--an-space-md);
}
.book__quote--left .book__stars {
justify-content: flex-end;
}
.book__quote--right .book__stars {
justify-content: flex-start;
}
.book__star {
color: var(--c-brand);
width: 16px;
height: 16px;
}
/* Quote text */
.book__quote-text {
font-size: 18px;
line-height: 1.6;
color: var(--c-text-secondary);
margin: 0 0 var(--an-space-lg) 0;
font-style: italic;
position: relative;
}
/* Author section */
.book__author {
display: flex;
align-items: center;
gap: var(--an-space-md);
}
.book__quote--left .book__author {
justify-content: flex-end;
}
.book__quote--right .book__author {
justify-content: flex-start;
}
.book__author-image {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
}
.book__author-info {
text-align: left;
}
.book__quote--left .book__author-info {
text-align: right;
}
.book__author-name {
font-weight: 600;
color: var(--c-brand);
margin-bottom: 2px;
}
.book__author-bio {
font-size: 14px;
color: var(--an-text-medium);
line-height: 1.4;
}
/* Book image wrapper */
.book__image-wrapper {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.book__image {
max-width: 320px;
width: 100%;
height: auto;
border-radius: var(--radius-lg);
box-shadow:
0 20px 60px rgba(94, 59, 255, 0.15),
0 0 0 1px rgba(94, 59, 255, 0.1);
transition: transform var(--ease);
}
.book__image:hover {
transform: translateY(-5px);
box-shadow:
0 25px 70px rgba(94, 59, 255, 0.2),
0 0 0 1px rgba(94, 59, 255, 0.15);
}
/* Badge */
.book__badge {
position: absolute;
top: -20px;
right: -20px;
background: var(--g-brand);
color: var(--c-white);
padding: var(--an-space-sm) var(--an-space-md);
border-radius: 50%;
font-size: 12px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
line-height: 1.2;
width: 120px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.25) inset,
0 4px 12px rgba(94, 59, 255, 0.35);
}
/* Mobile responsiveness */
@media (max-width: 991px) {
.book__content {
grid-template-columns: 1fr;
gap: var(--an-space-xl);
}
.book__quote {
text-align: center !important;
}
.book__stars {
justify-content: center !important;
}
.book__author {
justify-content: center !important;
}
.book__author-info {
text-align: left !important;
}
.book__image-wrapper {
order: -1;
margin-bottom: var(--an-space-xl);
}
.book__image {
max-width: 280px;
}
.book__badge {
width: 100px;
height: 100px;
font-size: 11px;
top: -15px;
right: -15px;
}
}
@media (max-width: 767px) {
.book__logos {
gap: var(--an-space-lg);
}
.book__logo img {
max-height: 24px;
}
.book__quote-text {
font-size: 16px;
}
.book__image {
max-width: 240px;
}
}
/* Book CTA Button */
.book__cta-wrapper {
text-align: center;
margin-top: var(--an-space-3xl);
}
.book__cta {
display: inline-flex;
align-items: center;
padding: 14px 32px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
border-radius: var(--radius-pill);
background-color: var(--c-brand);
color: var(--c-white);
transition: all var(--ease);
position: relative;
}
.book__cta--gradient {
background: var(--g-brand);
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.25) inset,
0 4px 8px rgba(94, 59, 255, 0.35);
}
.book__cta:hover {
transform: translateY(-2px);
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.25) inset,
0 8px 16px rgba(94, 59, 255, 0.4);
}
@media (max-width: 767px) {
.book__cta {
font-size: 14px;
padding: 12px 24px;
}
}
/* ==========================================================================
9. Book Buy Section
========================================================================== */
.book-buy {
border-top: 1px solid var(--an-border);
border-bottom: 1px solid var(--an-border);
}
/* Smooth logo transitions */
.book-buy__retailer {
position: relative;
}
.book-buy__retailer::after {
content: "";
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background-color: var(--an-coral);
transition: width var(--motion-duration-base) var(--motion-ease-standard);
}
.book-buy__retailer:hover::after {
width: 80%;
}
/* Better mobile wrapping */
@media (max-width: 480px) {
.book-buy__wrapper {
flex-direction: column;
gap: 20px;
}
.book-buy__divider {
width: 60px;
height: 1px !important;
margin: 0 auto !important;
}
}
/* ==========================================================================
10. Enhanced Footer Additions
========================================================================== */
/* Column title underline accent */
.footer__column-title {
position: relative;
padding-bottom: 12px;
margin-bottom: 20px;
}
.footer__column-title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 30px;
height: 2px;
background-color: var(--an-coral);
}
/* Center align title underline on mobile */
@media (max-width: 767px) {
.footer__column[style*="text-align: center"] .footer__column-title::after {
left: 50%;
transform: translateX(-50%);
}
}
/* Logo column special styling */
.footer__logo + .footer__text {
opacity: 0.85;
font-style: italic;
}
/* Bottom bar link separator styling */
.footer__bottom-links a + a::before {
content: " | ";
margin: 0 8px;
color: var(--an-border);
}
/* ==========================================================================
11. Modern Navigation - Clean White/Blue Design
========================================================================== */
/* Modern header styling */
.header {
background-color: #ffffff;
box-shadow: none;
border-bottom: 1px solid #f0f0f0;
transition: all var(--motion-duration-base) var(--motion-ease-standard);
padding: 16px 0;
}
.header--fixed {
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}
/* Container alignment */
.header__container {
align-items: center;
min-height: 48px;
}
/* Logo styling */
.header__logo {
margin-right: 48px;
}
.header__logo img {
max-height: 32px;
width: auto;
}
/* Navigation menu styling - Kajabi specific selectors */
.header .link-list {
display: flex;
align-items: center;
gap: 32px;
}
.header .link-list__item {
position: relative;
padding: 0;
}
/* Main navigation links */
.header .link-list__link,
.header__content--desktop .link-list__link {
color: #1a1a1a !important;
font-weight: 400;
font-size: 16px;
padding: 8px 0 !important;
margin: 0 !important;
border-radius: 0;
transition: all var(--motion-duration-base) var(--motion-ease-standard);
position: relative;
text-decoration: none !important;
display: inline-block;
background: none !important;
border: none !important;
border-bottom: none !important;
}
/* Remove any potential Kajabi default underlines */
.header .link-list__link,
.header__content--desktop .link-list__link,
.header .link-list__link span,
.header__content--desktop .link-list__link span {
text-decoration: none !important;
border-bottom: none !important;
background-image: none !important; /* Remove any gradient underlines */
}
/* Remove any default underlines and add custom hover effect */
.header .link-list__link::after,
.header__content--desktop .link-list__link::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--c-brand-600);
transition: width var(--motion-duration-base) var(--motion-ease-standard);
}
.header .link-list__link:hover,
.header__content--desktop .link-list__link:hover {
color: var(--c-brand-600) ;
background: none !important;
text-decoration: none !important;
border-bottom: none !important;
}
.header .link-list__link:hover::after,
.header__content--desktop .link-list__link:hover::after {
width: 100%;
}
/* Dropdown trigger styling */
.header .dropdown__trigger {
color: #1a1a1a !important;
font-weight: 400;
font-size: 16px;
padding: 8px 0 !important;
background: none !important;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: color var(--motion-duration-fast) var(--motion-ease-standard);
text-decoration: none !important;
position: relative;
}
/* Dropdown hover effect */
.header .dropdown__trigger::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--c-brand-600);
transition: width var(--motion-duration-base) var(--motion-ease-standard);
}
.header .dropdown__trigger:hover {
color: var(--c-brand-600) ;
background: none !important;
text-decoration: none !important;
}
.header .dropdown__trigger:hover::before {
width: calc(100% - 16px); /* Account for the arrow */
}
.header .dropdown__trigger::after {
content: "▼";
font-size: 10px;
transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}
.header .dropdown.active .dropdown__trigger::after {
transform: rotate(180deg);
}
/* Dropdown menu styling */
.header .dropdown__menu {
background-color: #ffffff;
border: 1px solid #f0f0f0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border-radius: 8px;
padding: 8px 0;
min-width: 200px;
margin-top: 8px;
}
.header .dropdown__item a {
color: #1a1a1a !important;
padding: 12px 20px !important;
font-size: 15px;
display: block;
text-decoration: none !important;
transition: all var(--motion-duration-base) var(--motion-ease-standard);
}
.header .dropdown__item a:hover {
color: #666666 !important;
background-color: #f8f8f8;
}
/* User menu styling */
.header .user__login a {
color: #1a1a1a !important;
font-weight: 400;
font-size: 16px;
padding: 8px 16px !important;
text-decoration: none !important;
transition: color var(--motion-duration-fast) var(--motion-ease-standard);
}
.header .user__login a:hover {
color: #666666 !important;
}
/* CTA Button - Blue rounded button */
.header .btn,
.header__block--cta .btn {
background-color: #0066ff !important;
color: #ffffff !important;
border: none !important;
border-radius: 8px !important;
padding: 12px 24px !important;
font-size: 16px !important;
font-weight: 500 !important;
text-decoration: none !important;
transition: all var(--motion-duration-fast) var(--motion-ease-standard) !important;
display: inline-block !important;
text-align: center !important;
cursor: pointer !important;
box-shadow: none !important;
}
.header .btn:hover,
.header__block--cta .btn:hover {
background-color: #0052cc !important;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 102, 255, 0.2) !important;
}
/* Block spacing adjustments */
.header__block {
margin: 0;
}
.header__block--menu {
flex-grow: 1;
margin-right: auto;
}
.header__block--user {
margin-left: 24px;
}
.header__block--cta {
margin-left: 24px;
}
/* ==========================================================================
12. Mobile Navigation - Full Implementation
========================================================================== */
/* Mobile Menu Toggle - Clean hamburger */
.hamburger {
width: 32px;
height: 32px;
position: relative;
cursor: pointer;
z-index: 1001;
transition: transform var(--motion-duration-base) var(--motion-ease-standard);
margin-left: 16px;
}
.hamburger__slices {
width: 24px;
height: 20px;
position: relative;
margin: auto;
top: 50%;
transform: translateY(-50%);
}
.hamburger__slice {
background-color: #1a1a1a;
height: 2px;
width: 100%;
border-radius: 2px;
transition: all var(--motion-duration-base) var(--motion-ease-standard);
position: absolute;
left: 0;
}
.hamburger--slice-1 {
top: 0;
}
.hamburger--slice-2 {
top: 6px;
}
.hamburger--slice-3 {
top: 12px;
}
.hamburger--slice-4 {
bottom: 0;
}
/* Mobile Menu Open State */
.header__content--mobile-open .hamburger__slice {
background-color: #1a1a1a;
}
.header__content--mobile-open .hamburger--slice-1 {
transform: rotate(45deg) translateY(7px) translateX(7px);
}
.header__content--mobile-open .hamburger--slice-2 {
opacity: 0;
}
.header__content--mobile-open .hamburger--slice-3 {
opacity: 0;
}
.header__content--mobile-open .hamburger--slice-4 {
transform: rotate(-45deg) translateY(-7px) translateX(7px);
}
/* Mobile Menu Container */
.header__content--mobile {
position: fixed;
top: 0;
right: 0;
width: var(--an-mobile-menu-width, 85%);
max-width: var(--an-mobile-menu-max, 400px);
height: 100vh;
background-color: #ffffff;
z-index: var(--an-z-mobile-menu, 999);
transform: translateX(100%);
transition: transform var(--an-transition-smooth);
overflow-y: auto;
padding: 80px 30px 40px;
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
}
.header__content--mobile.active {
transform: translateX(0);
}
/* Legacy support for old class name */
.header__content--mobile-open .header__content--mobile {
transform: translateX(0);
}
/* Mobile menu backdrop */
.header__mobile-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transition:
opacity var(--an-transition-base),
visibility var(--an-transition-base);
z-index: var(--an-z-backdrop, 998);
}
.header__mobile-backdrop.active {
opacity: 1;
visibility: visible;
}
/* Mobile close button */
.header__mobile-close {
position: absolute;
top: 20px;
right: 20px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
}
.header__mobile-close .hamburger {
width: 24px;
height: 24px;
}
.header__mobile-close .hamburger__slice {
background-color: var(--an-slate);
}
/* Close button X animation */
.header__mobile-close .hamburger--slice-1 {
transform: rotate(45deg) translateY(7px) translateX(7px);
}
.header__mobile-close .hamburger--slice-2,
.header__mobile-close .hamburger--slice-3 {
opacity: 0;
}
.header__mobile-close .hamburger--slice-4 {
transform: rotate(-45deg) translateY(-7px) translateX(7px);
}
/* Mobile Navigation Links */
.header__content--mobile .link-list {
display: flex;
flex-direction: column;
gap: 0;
margin-top: 40px;
}
.header__content--mobile .link-list__item {
width: 100%;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.header__content--mobile .link-list__link {
color: var(--an-slate) ;
padding: 20px 0 !important;
font-size: 18px !important;
font-weight: 400;
display: block;
text-decoration: none !important;
transition: all var(--motion-duration-base) var(--motion-ease-standard);
position: relative;
}
.header__content--mobile .link-list__link:hover {
color: var(--an-teal) ;
padding-left: 10px !important;
}
/* Mobile Dropdown */
.header__content--mobile .dropdown__trigger {
color: var(--an-slate) ;
padding: 20px 0 !important;
font-size: 18px !important;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
background: none !important;
border: none;
}
.header__content--mobile .dropdown__trigger::after {
content: "+";
font-size: 20px;
font-weight: 300;
transition: transform var(--motion-duration-base) var(--motion-ease-standard);
color: var(--an-teal);
}
.header__content--mobile .dropdown.active .dropdown__trigger::after {
transform: rotate(45deg);
}
.header__content--mobile .dropdown__menu {
position: static;
background-color: rgba(0, 0, 0, 0.02);
border: none;
box-shadow: none;
padding: 0;
margin: 0;
}
.header__content--mobile .dropdown__item {
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.header__content--mobile .dropdown__item a {
color: var(--an-slate) ;
opacity: 0.8;
padding: 16px 0 16px 20px !important;
font-size: 16px !important;
}
/* Mobile User Section */
.header__content--mobile .header__block--user {
margin-top: 40px;
padding-top: 40px;
border-top: 2px solid rgba(0, 0, 0, 0.08);
}
.header__content--mobile .user__login a {
color: var(--an-slate) ;
font-size: 18px !important;
padding: 16px 0 !important;
}
/* Mobile CTA and Featured Button */
.header__content--mobile .header__block--cta,
.header__content--mobile .header__block--featured-button {
margin-top: 24px;
padding: 0 !important;
}
.header__content--mobile .header__block--cta .btn,
.header__content--mobile .header__block--featured-button .btn {
width: 100%;
padding: 16px !important;
font-size: 18px !important;
background-color: var(--an-teal) ;
color: white !important;
border: none !important;
border-radius: 8px !important;
text-align: center !important;
display: block !important;
text-decoration: none !important;
transition: all var(--motion-duration-fast) var(--motion-ease-standard) !important;
}
.header__content--mobile .header__block--cta .btn:hover,
.header__content--mobile .header__block--featured-button .btn:hover {
background-color: var(--an-navy) ;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile-only styles */
@media (max-width: 767px) {
.header {
padding: 12px 0;
}
.header__logo img {
max-height: 28px;
}
/* Hide desktop navigation */
.header__content--desktop .header__switch-content {
display: none !important;
}
/* Show hamburger menu */
.hamburger {
display: flex !important;
}
/* Prevent body scroll when menu is open */
body.mobile-menu-open {
overflow: hidden;
}
/* Ensure mobile menu content is visible */
.header__content--mobile .header__switch-content {
display: block !important;
}
.header__content--mobile .header__block--logo {
margin-bottom: 40px;
text-align: center;
}
/* Ensure Featured Button is visible in mobile */
.header__content--mobile .header__block--featured-button {
display: block !important;
}
}
/* Desktop-only styles */
@media (min-width: 768px) {
/* Hide mobile navigation */
.header__content--mobile,
.header__mobile-backdrop,
.hamburger {
display: none !important;
}
/* Show desktop navigation */
.header__content--desktop {
display: flex !important;
}
.header__content--desktop .header__switch-content {
display: flex !important;
}
}
/* ==========================================================================
13. Form Styling Improvements
========================================================================== */
/* Form field enhancements */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {
border: 1px solid var(--an-border);
border-radius: var(--an-radius-md);
padding: 12px 16px;
font-size: 16px;
transition: all var(--an-transition-base);
background-color: var(--an-white);
width: 100%;
}
.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--an-teal);
box-shadow: 0 0 0 3px rgba(42, 179, 177, 0.1);
}
/* Label styling */
label {
font-weight: 500;
color: var(--an-navy);
margin-bottom: 8px;
display: block;
}
/* Form group spacing */
.form-group {
margin-bottom: var(--an-space-lg);
}
/* ==========================================================================
14. Comprehensive Utility Classes - Design System Powered
========================================================================== */
/* Color utilities */
.text-navy {
color: var(--an-navy) ;
}
.text-teal {
color: var(--an-teal) ;
}
.text-coral {
color: var(--an-coral) ;
}
.text-gold {
color: var(--an-gold) ;
}
.text-plum {
color: var(--an-plum) ;
}
.text-slate {
color: var(--an-slate) ;
}
.text-white {
color: var(--an-white) ;
}
.text-medium {
color: var(--an-text-medium) ;
}
.text-inherit {
color: inherit !important;
}
.bg-navy {
background-color: var(--an-navy) ;
}
.bg-teal {
background-color: var(--an-teal) ;
}
.bg-coral {
background-color: var(--an-coral) ;
}
.bg-gold {
background-color: var(--an-gold) ;
}
.bg-plum {
background-color: var(--an-plum) ;
}
.bg-peach {
background-color: var(--an-peach) ;
}
.bg-grey {
background-color: var(--an-grey) ;
}
.bg-white {
background-color: var(--an-white) ;
}
.bg-transparent {
background-color: transparent !important;
}
/* Typography utilities */
.text-xs {
font-size: var(--an-font-xs) !important;
}
.text-sm {
font-size: var(--an-font-sm) !important;
}
.text-base {
font-size: var(--an-font-base) !important;
}
.text-lg {
font-size: var(--an-font-lg) !important;
}
.text-xl {
font-size: var(--an-font-xl) !important;
}
.text-2xl {
font-size: var(--an-font-2xl) !important;
}
.text-3xl {
font-size: var(--an-font-3xl) !important;
}
.text-4xl {
font-size: var(--an-font-4xl) !important;
}
/* Font weight */
.font-light {
font-weight: 300 !important;
}
.font-normal {
font-weight: 400 !important;
}
.font-medium {
font-weight: 500 !important;
}
.font-semibold {
font-weight: 600 !important;
}
.font-bold {
font-weight: 700 !important;
}
/* Font family */
.font-sans {
font-family: var(--font-sans) !important;
}
.font-serif {
font-family: var(--font-serif) !important;
}
.font-mono {
font-family: var(--font-mono) !important;
}
/* Font style */
.italic {
font-style: italic !important;
}
.not-italic {
font-style: normal !important;
}
/* Text color with lighter variations */
.text-light {
color: var(--c-ink-500) ;
}
.text-muted {
color: var(--c-ink-500) ;
}
/* Text alignment */
.text-left {
text-align: left ;
}
.text-center {
text-align: center ;
}
.text-right {
text-align: right ;
}
.text-justify {
text-align: justify ;
}
/* Text transform */
.uppercase {
text-transform: uppercase !important;
}
.lowercase {
text-transform: lowercase !important;
}
.capitalize {
text-transform: capitalize !important;
}
.normal-case {
text-transform: none !important;
}
/* Letter spacing */
.tracking-tight {
letter-spacing: -0.05em !important;
}
.tracking-normal {
letter-spacing: 0 !important;
}
.tracking-wide {
letter-spacing: 0.05em !important;
}
.tracking-wider {
letter-spacing: 0.1em !important;
}
/* Line height */
.leading-none {
line-height: 1 !important;
}
.leading-tight {
line-height: 1.25 !important;
}
.leading-normal {
line-height: 1.5 !important;
}
.leading-relaxed {
line-height: 1.625 !important;
}
.leading-loose {
line-height: 2 !important;
}
/* Text decoration */
.no-underline {
text-decoration: none !important;
}
.underline {
text-decoration: underline !important;
}
.line-through {
text-decoration: line-through !important;
}
/* Spacing utilities - Margin */
.m-0 {
margin: 0 !important;
}
.m-1 {
margin: var(--an-space-sm) !important;
}
.m-2 {
margin: var(--an-space-md) !important;
}
.m-3 {
margin: var(--an-space-lg) !important;
}
.m-4 {
margin: var(--an-space-xl) !important;
}
.m-5 {
margin: var(--an-space-2xl) !important;
}
.m-auto {
margin: auto ;
}
/* Margin X-axis */
.mx-0 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.mx-1 {
margin-left: var(--an-space-sm) !important;
margin-right: var(--an-space-sm) !important;
}
.mx-2 {
margin-left: var(--an-space-md) !important;
margin-right: var(--an-space-md) !important;
}
.mx-3 {
margin-left: var(--an-space-lg) !important;
margin-right: var(--an-space-lg) !important;
}
.mx-4 {
margin-left: var(--an-space-xl) !important;
margin-right: var(--an-space-xl) !important;
}
.mx-5 {
margin-left: var(--an-space-2xl) !important;
margin-right: var(--an-space-2xl) !important;
}
.mx-auto {
margin-left: auto ;
margin-right: auto ;
}
/* Margin Y-axis */
.my-0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.my-1 {
margin-top: var(--an-space-sm) !important;
margin-bottom: var(--an-space-sm) !important;
}
.my-2 {
margin-top: var(--an-space-md) !important;
margin-bottom: var(--an-space-md) !important;
}
.my-3 {
margin-top: var(--an-space-lg) !important;
margin-bottom: var(--an-space-lg) !important;
}
.my-4 {
margin-top: var(--an-space-xl) !important;
margin-bottom: var(--an-space-xl) !important;
}
.my-5 {
margin-top: var(--an-space-2xl) !important;
margin-bottom: var(--an-space-2xl) !important;
}
/* Margin Top */
.mt-0 {
margin-top: 0 !important;
}
.mt-1 {
margin-top: var(--an-space-sm) !important;
}
.mt-2 {
margin-top: var(--an-space-md) !important;
}
.mt-3 {
margin-top: var(--an-space-lg) !important;
}
.mt-4 {
margin-top: var(--an-space-xl) !important;
}
.mt-5 {
margin-top: var(--an-space-2xl) !important;
}
.mt-auto {
margin-top: auto !important;
}
/* Margin Right */
.mr-0 {
margin-right: 0 !important;
}
.mr-1 {
margin-right: var(--an-space-sm) !important;
}
.mr-2 {
margin-right: var(--an-space-md) !important;
}
.mr-3 {
margin-right: var(--an-space-lg) !important;
}
.mr-4 {
margin-right: var(--an-space-xl) !important;
}
.mr-5 {
margin-right: var(--an-space-2xl) !important;
}
.mr-auto {
margin-right: auto ;
}
/* Margin Bottom */
.mb-0 {
margin-bottom: 0 !important;
}
.mb-1 {
margin-bottom: var(--an-space-sm) !important;
}
.mb-2 {
margin-bottom: var(--an-space-md) !important;
}
.mb-3 {
margin-bottom: var(--an-space-lg) !important;
}
.mb-4 {
margin-bottom: var(--an-space-xl) !important;
}
.mb-5 {
margin-bottom: var(--an-space-2xl) !important;
}
.mb-auto {
margin-bottom: auto !important;
}
/* Margin Left */
.ml-0 {
margin-left: 0 !important;
}
.ml-1 {
margin-left: var(--an-space-sm) !important;
}
.ml-2 {
margin-left: var(--an-space-md) !important;
}
.ml-3 {
margin-left: var(--an-space-lg) !important;
}
.ml-4 {
margin-left: var(--an-space-xl) !important;
}
.ml-5 {
margin-left: var(--an-space-2xl) !important;
}
.ml-auto {
margin-left: auto ;
}
/* Spacing utilities - Padding */
.p-0 {
padding: 0 !important;
}
.p-1 {
padding: var(--an-space-sm) !important;
}
.p-2 {
padding: var(--an-space-md) !important;
}
.p-3 {
padding: var(--an-space-lg) !important;
}
.p-4 {
padding: var(--an-space-xl) !important;
}
.p-5 {
padding: var(--an-space-2xl) !important;
}
.p-6 {
padding: var(--an-space-3xl) !important;
}
/* Padding X-axis */
.px-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.px-1 {
padding-left: var(--an-space-sm) !important;
padding-right: var(--an-space-sm) !important;
}
.px-2 {
padding-left: var(--an-space-md) !important;
padding-right: var(--an-space-md) !important;
}
.px-3 {
padding-left: var(--an-space-lg) !important;
padding-right: var(--an-space-lg) !important;
}
.px-4 {
padding-left: var(--an-space-xl) !important;
padding-right: var(--an-space-xl) !important;
}
.px-5 {
padding-left: var(--an-space-2xl) !important;
padding-right: var(--an-space-2xl) !important;
}
.px-6 {
padding-left: var(--an-space-3xl) !important;
padding-right: var(--an-space-3xl) !important;
}
/* Padding Y-axis */
.py-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.py-1 {
padding-top: var(--an-space-sm) !important;
padding-bottom: var(--an-space-sm) !important;
}
.py-2 {
padding-top: var(--an-space-md) !important;
padding-bottom: var(--an-space-md) !important;
}
.py-3 {
padding-top: var(--an-space-lg) !important;
padding-bottom: var(--an-space-lg) !important;
}
.py-4 {
padding-top: var(--an-space-xl) !important;
padding-bottom: var(--an-space-xl) !important;
}
.py-5 {
padding-top: var(--an-space-2xl) !important;
padding-bottom: var(--an-space-2xl) !important;
}
.py-6 {
padding-top: var(--an-space-3xl) !important;
padding-bottom: var(--an-space-3xl) !important;
}
/* Padding Top */
.pt-0 {
padding-top: 0 !important;
}
.pt-1 {
padding-top: var(--an-space-sm) !important;
}
.pt-2 {
padding-top: var(--an-space-md) !important;
}
.pt-3 {
padding-top: var(--an-space-lg) !important;
}
.pt-4 {
padding-top: var(--an-space-xl) !important;
}
.pt-5 {
padding-top: var(--an-space-2xl) !important;
}
.pt-6 {
padding-top: var(--an-space-3xl) !important;
}
/* Padding Right */
.pr-0 {
padding-right: 0 !important;
}
.pr-1 {
padding-right: var(--an-space-sm) !important;
}
.pr-2 {
padding-right: var(--an-space-md) !important;
}
.pr-3 {
padding-right: var(--an-space-lg) !important;
}
.pr-4 {
padding-right: var(--an-space-xl) !important;
}
.pr-5 {
padding-right: var(--an-space-2xl) !important;
}
.pr-6 {
padding-right: var(--an-space-3xl) !important;
}
/* Padding Bottom */
.pb-0 {
padding-bottom: 0 !important;
}
.pb-1 {
padding-bottom: var(--an-space-sm) !important;
}
.pb-2 {
padding-bottom: var(--an-space-md) !important;
}
.pb-3 {
padding-bottom: var(--an-space-lg) !important;
}
.pb-4 {
padding-bottom: var(--an-space-xl) !important;
}
.pb-5 {
padding-bottom: var(--an-space-2xl) !important;
}
.pb-6 {
padding-bottom: var(--an-space-3xl) !important;
}
/* Padding Left */
.pl-0 {
padding-left: 0 !important;
}
.pl-1 {
padding-left: var(--an-space-sm) !important;
}
.pl-2 {
padding-left: var(--an-space-md) !important;
}
.pl-3 {
padding-left: var(--an-space-lg) !important;
}
.pl-4 {
padding-left: var(--an-space-xl) !important;
}
.pl-5 {
padding-left: var(--an-space-2xl) !important;
}
.pl-6 {
padding-left: var(--an-space-3xl) !important;
}
/* Display utilities */
.d-none {
display: none !important;
}
.d-block {
display: block !important;
}
.d-inline-block {
display: inline-block !important;
}
.d-inline {
display: inline !important;
}
.d-flex {
display: flex !important;
}
.d-inline-flex {
display: inline-flex !important;
}
.d-grid {
display: grid !important;
}
/* Flexbox utilities */
.flex-row {
flex-direction: row !important;
}
.flex-column {
flex-direction: column !important;
}
.flex-row-reverse {
flex-direction: row-reverse !important;
}
.flex-column-reverse {
flex-direction: column-reverse !important;
}
.flex-wrap {
flex-wrap: wrap !important;
}
.flex-nowrap {
flex-wrap: nowrap !important;
}
.flex-wrap-reverse {
flex-wrap: wrap-reverse !important;
}
.flex-1 {
flex: 1 1 0% !important;
}
.flex-auto {
flex: 1 1 auto !important;
}
.flex-initial {
flex: 0 1 auto !important;
}
.flex-none {
flex: none !important;
}
.justify-content-start {
justify-content: flex-start !important;
}
.justify-content-end {
justify-content: flex-end !important;
}
.justify-content-center {
justify-content: center !important;
}
.justify-content-between {
justify-content: space-between !important;
}
.justify-content-around {
justify-content: space-around !important;
}
.justify-content-evenly {
justify-content: space-evenly !important;
}
.align-items-start {
align-items: flex-start !important;
}
.align-items-end {
align-items: flex-end !important;
}
.align-items-center {
align-items: center !important;
}
.align-items-baseline {
align-items: baseline !important;
}
.align-items-stretch {
align-items: stretch !important;
}
.align-self-auto {
align-self: auto !important;
}
.align-self-start {
align-self: flex-start !important;
}
.align-self-end {
align-self: flex-end !important;
}
.align-self-center {
align-self: center !important;
}
.align-self-baseline {
align-self: baseline !important;
}
.align-self-stretch {
align-self: stretch !important;
}
/* Gap utilities */
.gap-0 {
gap: 0 !important;
}
.gap-1 {
gap: var(--an-space-sm) !important;
}
.gap-2 {
gap: var(--an-space-md) !important;
}
.gap-3 {
gap: var(--an-space-lg) !important;
}
.gap-4 {
gap: var(--an-space-xl) !important;
}
.gap-5 {
gap: var(--an-space-2xl) !important;
}
/* Border utilities */
.border {
border: 1px solid var(--an-border) !important;
}
.border-0 {
border: 0 !important;
}
.border-top {
border-top: 1px solid var(--an-border) !important;
}
.border-right {
border-right: 1px solid var(--an-border) !important;
}
.border-bottom {
border-bottom: 1px solid var(--an-border) !important;
}
.border-left {
border-left: 1px solid var(--an-border) !important;
}
.border-top-0 {
border-top: 0 !important;
}
.border-right-0 {
border-right: 0 !important;
}
.border-bottom-0 {
border-bottom: 0 !important;
}
.border-left-0 {
border-left: 0 !important;
}
/* Border colors */
.border-navy {
border-color: var(--an-navy) ;
}
.border-teal {
border-color: var(--an-teal) ;
}
.border-coral {
border-color: var(--an-coral) ;
}
.border-gold {
border-color: var(--an-gold) ;
}
.border-plum {
border-color: var(--an-plum) ;
}
.border-white {
border-color: var(--an-white) ;
}
/* Border radius */
.rounded-none {
border-radius: 0 !important;
}
.rounded-sm {
border-radius: var(--an-radius-sm) !important;
}
.rounded {
border-radius: var(--an-radius-md) !important;
}
.rounded-lg {
border-radius: var(--an-radius-lg) !important;
}
.rounded-full {
border-radius: var(--an-radius-full) !important;
}
/* Shadow utilities */
.shadow-none {
box-shadow: none !important;
}
.shadow-sm {
box-shadow: var(--an-shadow-sm) !important;
}
.shadow {
box-shadow: var(--an-shadow-md) !important;
}
.shadow-lg {
box-shadow: var(--an-shadow-lg) !important;
}
/* Width utilities */
.w-auto {
width: auto !important;
}
.w-full {
width: 100% !important;
}
.w-screen {
width: 100vw !important;
}
.w-min {
width: min-content !important;
}
.w-max {
width: max-content !important;
}
.w-fit {
width: fit-content !important;
}
.w-25 {
width: 25% !important;
}
.w-50 {
width: 50% !important;
}
.w-75 {
width: 75% !important;
}
/* Max width utilities */
.max-w-none {
max-width: none !important;
}
.max-w-sm {
max-width: 576px !important;
}
.max-w-md {
max-width: 768px !important;
}
.max-w-lg {
max-width: 992px !important;
}
.max-w-xl {
max-width: 1200px !important;
}
.max-w-2xl {
max-width: 1400px !important;
}
.max-w-full {
max-width: 100% !important;
}
/* Height utilities */
.h-auto {
height: auto !important;
}
.h-full {
height: 100% !important;
}
.h-screen {
height: 100vh !important;
}
.h-min {
height: min-content !important;
}
.h-max {
height: max-content !important;
}
.h-fit {
height: fit-content !important;
}
/* Min height utilities */
.min-h-0 {
min-height: 0 !important;
}
.min-h-full {
min-height: 100% !important;
}
.min-h-screen {
min-height: 100vh !important;
}
/* Position utilities */
.position-static {
position: static !important;
}
.position-relative {
position: relative !important;
}
.position-absolute {
position: absolute !important;
}
.position-fixed {
position: fixed !important;
}
.position-sticky {
position: sticky !important;
}
/* Position values */
.top-0 {
top: 0 !important;
}
.right-0 {
right: 0 !important;
}
.bottom-0 {
bottom: 0 !important;
}
.left-0 {
left: 0 !important;
}
.inset-0 {
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
}
/* Z-index utilities */
.z-0 {
z-index: 0 !important;
}
.z-10 {
z-index: 10 !important;
}
.z-20 {
z-index: 20 !important;
}
.z-30 {
z-index: 30 !important;
}
.z-40 {
z-index: 40 !important;
}
.z-50 {
z-index: 50 !important;
}
.z-100 {
z-index: 100 !important;
}
.z-1000 {
z-index: 1000 !important;
}
/* Overflow utilities */
.overflow-auto {
overflow: auto !important;
}
.overflow-hidden {
overflow: hidden !important;
}
.overflow-visible {
overflow: visible !important;
}
.overflow-scroll {
overflow: scroll !important;
}
.overflow-x-auto {
overflow-x: auto !important;
}
.overflow-x-hidden {
overflow-x: hidden !important;
}
.overflow-y-auto {
overflow-y: auto !important;
}
.overflow-y-hidden {
overflow-y: hidden !important;
}
/* Opacity utilities */
.opacity-0 {
opacity: 0 !important;
}
.opacity-25 {
opacity: 0.25 !important;
}
.opacity-50 {
opacity: 0.5 !important;
}
.opacity-75 {
opacity: 0.75 !important;
}
.opacity-100 {
opacity: 1 !important;
}
/* Transition utilities */
.transition-none {
transition-property: none !important;
}
.transition-all {
transition: all var(--an-transition-base) !important;
}
.transition-fast {
transition: all var(--an-transition-fast) !important;
}
.transition-slow {
transition: all var(--an-transition-slow) !important;
}
.transition-colors {
transition:
color,
background-color,
border-color var(--an-transition-base) !important;
}
.transition-opacity {
transition: opacity var(--an-transition-base) !important;
}
.transition-transform {
transition: transform var(--an-transition-base) !important;
}
/* Cursor utilities */
.cursor-auto {
cursor: auto !important;
}
.cursor-default {
cursor: default !important;
}
.cursor-pointer {
cursor: pointer !important;
}
.cursor-wait {
cursor: wait !important;
}
.cursor-not-allowed {
cursor: not-allowed !important;
}
/* User select utilities */
.select-none {
user-select: none !important;
}
.select-text {
user-select: text !important;
}
.select-all {
user-select: all !important;
}
/* Pointer events */
.pointer-events-none {
pointer-events: none !important;
}
.pointer-events-auto {
pointer-events: auto !important;
}
/* List utilities */
.list-none {
list-style-type: none !important;
}
.list-disc {
list-style-type: disc !important;
}
.list-decimal {
list-style-type: decimal !important;
}
/* Visibility utilities */
.visible {
visibility: visible !important;
}
.invisible {
visibility: hidden !important;
}
/* White space utilities */
.whitespace-normal {
white-space: normal !important;
}
.whitespace-nowrap {
white-space: nowrap !important;
}
.whitespace-pre {
white-space: pre !important;
}
.whitespace-pre-line {
white-space: pre-line !important;
}
.whitespace-pre-wrap {
white-space: pre-wrap !important;
}
/* Word break utilities */
.break-normal {
word-break: normal !important;
overflow-wrap: normal !important;
}
.break-words {
overflow-wrap: break-word !important;
}
.break-all {
word-break: break-all !important;
}
/* Vertical alignment */
.align-baseline {
vertical-align: baseline !important;
}
.align-top {
vertical-align: top !important;
}
.align-middle {
vertical-align: middle !important;
}
.align-bottom {
vertical-align: bottom !important;
}
.align-text-top {
vertical-align: text-top !important;
}
.align-text-bottom {
vertical-align: text-bottom !important;
}
/* Object fit utilities */
.object-contain {
object-fit: contain !important;
}
.object-cover {
object-fit: cover !important;
}
.object-fill {
object-fit: fill !important;
}
.object-none {
object-fit: none !important;
}
.object-scale-down {
object-fit: scale-down !important;
}
/* Object position utilities */
.object-center {
object-position: center !important;
}
.object-top {
object-position: top !important;
}
.object-bottom {
object-position: bottom !important;
}
.object-left {
object-position: left !important;
}
.object-right {
object-position: right !important;
}
/* ==========================================================================
15. About Hero Section
========================================================================== */
.about-hero-section {
position: relative;
min-height: 500px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
padding: 80px 0;
overflow: hidden;
}
.about-hero-section * {
color: #ffffff !important;
}
.about-hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(30, 27, 75, 0.95) 0%,
rgba(19, 47, 76, 0.95) 100%
);
z-index: 1;
}
.about-hero-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 768px;
margin: 0 auto;
color: #ffffff !important;
}
.about-hero-tagline {
font-size: 14px;
font-weight: 500;
color: #a5b4fc !important;
margin-bottom: 24px;
display: inline-block;
}
.about-hero-tagline-link {
color: #a5b4fc !important;
text-decoration: none;
margin-left: 8px;
transition: color var(--motion-duration-fast) var(--motion-ease-standard);
}
.about-hero-tagline-link:hover {
color: #c7d2fe !important;
text-decoration: underline;
}
.about-hero-title {
font-size: 48px;
font-weight: 700;
line-height: 1.2;
margin-bottom: 24px;
color: #ffffff !important;
}
@media (max-width: 768px) {
.about-hero-title {
font-size: 36px;
}
}
.about-hero-subtitle {
font-size: 18px;
line-height: 1.6;
color: #e0e7ff !important;
margin-bottom: 40px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.about-hero-buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.about-hero-btn {
padding: 14px 32px;
font-size: 16px;
font-weight: 600;
border-radius: 8px;
text-decoration: none !important;
transition: all var(--motion-duration-base) var(--motion-ease-standard);
display: inline-block;
}
@media (max-width: 768px) {
.about-hero-section {
padding: 60px 0;
min-height: 400px;
}
.about-hero-buttons {
flex-direction: column;
width: 100%;
max-width: 300px;
margin: 0 auto;
}
.about-hero-btn {
width: 100%;
text-align: center;
}
}
/* ==========================================================================
Depth & Layering Utilities
Added: 2025-01-20
========================================================================== */
/* Overlapping Card Designs */
.card-overlap {
position: relative;
overflow: visible;
}
.card-overlap__image {
position: relative;
z-index: 2;
transition: transform var(--an-transition-base);
}
.card-overlap--top .card-overlap__image {
margin-top: -2rem;
margin-bottom: 1rem;
}
.card-overlap--left .card-overlap__image {
margin-left: -2rem;
margin-right: 1rem;
}
.card-overlap--right .card-overlap__image {
margin-right: -2rem;
margin-left: 1rem;
}
.card-overlap--corner .card-overlap__image {
position: absolute;
top: -1.5rem;
right: -1.5rem;
width: 120px;
height: 120px;
}
/* Hover Effects for Overlapping Elements */
.card-overlap:hover .card-overlap__image {
transform: translateY(-4px) scale(1.02);
}
/* Depth Layers */
.depth-layer {
position: relative;
}
.depth-layer--1 {
z-index: 10;
}
.depth-layer--2 {
z-index: 20;
}
.depth-layer--3 {
z-index: 30;
}
.depth-layer--4 {
z-index: 40;
}
.depth-layer--5 {
z-index: 50;
}
/* Float Effects */
.float-element {
position: absolute;
animation: float 6s ease-in-out infinite;
}
.float-element--delayed {
animation-delay: 3s;
}
@keyframes float {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
25% {
transform: translateY(-10px) rotate(1deg);
}
75% {
transform: translateY(5px) rotate(-1deg);
}
}
/* Layered Shadows for Depth */
.shadow-layered {
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.04),
0 4px 8px rgba(0, 0, 0, 0.06),
0 12px 24px rgba(0, 0, 0, 0.08),
0 24px 48px rgba(0, 0, 0, 0.12);
}
.shadow-layered-colored {
box-shadow:
0 2px 4px rgba(94, 59, 255, 0.04),
0 4px 8px rgba(94, 59, 255, 0.08),
0 12px 24px rgba(94, 59, 255, 0.12),
0 24px 48px rgba(94, 59, 255, 0.16);
}
/* Breaking the Box */
.break-bounds {
overflow: visible !important;
}
.break-bounds__element {
position: absolute;
}
/* Perspective Cards */
.card-3d {
transform-style: preserve-3d;
perspective: 1000px;
}
.card-3d__inner {
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card-3d:hover .card-3d__inner {
transform: rotateY(5deg) rotateX(-5deg);
}
/* Glassmorphism for Layered Elements */
.glass-layer {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.glass-layer--dark {
background: rgba(26, 45, 78, 0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.18);
}
/* ==========================================================================
Background Textures & Decorative Shapes
Added: 2025-01-20
========================================================================== */
/* Base Background Pattern Classes */
.bg-texture {
position: relative;
overflow: hidden;
}
.bg-texture::before,
.bg-texture::after {
content: "";
position: absolute;
pointer-events: none;
z-index: 0;
}
/* Ensure content stays above background shapes */
.bg-texture > * {
position: relative;
z-index: 1;
}
/* Organic Blob Shapes */
.bg-texture--blob-1::before {
width: 40%;
height: 40%;
top: -10%;
right: -5%;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%235E3BFF' fill-opacity='0.08' d='M67.5,-84.7C84.8,-70.5,94.9,-46.6,98.2,-22.3C101.6,2,98.2,26.7,86.9,46.6C75.6,66.5,56.4,81.7,34.4,87.8C12.4,93.9,-12.4,91,-36.2,82.3C-60,73.6,-82.8,59.1,-92.3,38.6C-101.8,18.1,-98,-8.4,-87.7,-30.9C-77.4,-53.4,-60.5,-71.9,-40.5,-85.5C-20.5,-99.2,-2.4,-108,17.6,-106.5C37.5,-105,50.2,-93.2,67.5,-84.7Z' transform='translate(200 200)'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
}
.bg-texture--blob-2::after {
width: 35%;
height: 35%;
bottom: -8%;
left: -5%;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2318D5E4' fill-opacity='0.06' d='M44.2,-60.8C56.7,-52.3,66.1,-38.7,71.5,-23.4C76.9,-8.1,78.3,8.9,73.3,24.2C68.3,39.5,56.9,53.1,42.7,61.6C28.5,70.1,11.5,73.5,-5.6,71.3C-22.7,69.1,-39.9,61.3,-53.8,49.5C-67.7,37.7,-78.3,21.9,-80.7,4.8C-83.1,-12.3,-77.3,-30.7,-66.5,-45.7C-55.7,-60.7,-39.9,-72.3,-23.1,-77.4C-6.3,-82.5,11.5,-81.1,28.2,-74.2C44.9,-67.3,60.5,-54.9,44.2,-60.8Z' transform='translate(200 200)'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
}
.bg-texture--blob-3::before {
width: 50%;
height: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FF8BCB' fill-opacity='0.05' d='M71.7,-89.6C91.1,-76.3,104.2,-52.7,107.9,-28.3C111.6,-3.9,105.9,21.3,94.1,43.1C82.3,64.9,64.4,83.3,42.7,92.8C21,102.3,-4.5,102.9,-29.5,96.2C-54.5,89.5,-79,75.5,-93.1,54.7C-107.2,33.9,-111,6.3,-105.1,-19.1C-99.2,-44.5,-83.6,-67.7,-63.4,-80.8C-43.2,-93.9,-18.4,-96.9,4.6,-93.2C27.6,-89.5,52.3,-79.2,71.7,-89.6Z' transform='translate(200 200)'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
}
/* Geometric Patterns */
.bg-texture--circles::before {
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%235E3BFF' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-repeat: repeat;
}
.bg-texture--dots::after {
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23E9E6FF' fill-opacity='0.5'%3E%3Ccircle cx='2' cy='2' r='2'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: repeat;
}
.bg-texture--zigzag::before {
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: url("data:image/svg+xml,%3Csvg width='40' height='12' viewBox='0 0 40 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 6.172L6.172 0h5.656L0 11.828V6.172zm10 5.656L10 12h5.656L20 7.828v5.656L15.828 12h5.656L20 10.172V12h4v-1.828L22.172 12h5.656L40 0v5.656L33.828 12h5.656L40 11.172V6.172L33.828 0h5.656L28 11.828V6.172L22.344 0H20v1.828L21.828 0h-5.656L10 6.172v5.656z' fill='%2318D5E4' fill-opacity='0.04' fill-rule='evenodd'/%3E%3C/svg%3E");
background-repeat: repeat;
}
/* Gradient Overlays */
.bg-texture--gradient-1::before {
width: 100%;
height: 100%;
top: 0;
left: 0;
background: radial-gradient(
ellipse at top right,
rgba(94, 59, 255, 0.1) 0%,
transparent 50%
);
}
.bg-texture--gradient-2::after {
width: 100%;
height: 100%;
top: 0;
left: 0;
background: radial-gradient(
ellipse at bottom left,
rgba(24, 213, 228, 0.08) 0%,
transparent 50%
);
}
.bg-texture--gradient-mesh::before {
width: 100%;
height: 100%;
top: 0;
left: 0;
background:
radial-gradient(at 20% 80%, rgba(255, 139, 203, 0.06) 0%, transparent 50%),
radial-gradient(at 80% 20%, rgba(94, 59, 255, 0.06) 0%, transparent 50%),
radial-gradient(at 40% 40%, rgba(24, 213, 228, 0.04) 0%, transparent 50%);
}
/* Floating Shapes */
.bg-texture--float-1::before {
width: 200px;
height: 200px;
top: 10%;
right: 5%;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFE86B' fill-opacity='0.1' d='M100,20 L130,80 L190,80 L145,120 L165,180 L100,140 L35,180 L55,120 L10,80 L70,80 Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
animation: float 20s ease-in-out infinite;
}
.bg-texture--float-2::after {
width: 150px;
height: 150px;
bottom: 15%;
left: 10%;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='100' r='80' fill='none' stroke='%235E3BFF' stroke-width='2' stroke-dasharray='10,5' opacity='0.2'/%3E%3Ccircle cx='100' cy='100' r='60' fill='none' stroke='%2318D5E4' stroke-width='2' stroke-dasharray='5,10' opacity='0.2'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
animation: float 25s ease-in-out infinite reverse;
}
/* Wave Patterns */
.bg-texture--wave-top::before {
width: 100%;
height: 120px;
top: 0;
left: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 120' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23E9E6FF' fill-opacity='0.3'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: cover;
}
.bg-texture--wave-bottom::after {
width: 100%;
height: 120px;
bottom: 0;
left: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 120' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' fill='%23FAFAFA' fill-opacity='1'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: cover;
}
/* Abstract Corner Decorations */
.bg-texture--corner-1::before {
width: 300px;
height: 300px;
top: -150px;
right: -150px;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M150,300 Q300,300 300,150 Q300,0 150,0' fill='none' stroke='%235E3BFF' stroke-width='1' opacity='0.1'/%3E%3Cpath d='M150,250 Q250,250 250,150 Q250,50 150,50' fill='none' stroke='%2318D5E4' stroke-width='1' opacity='0.1'/%3E%3Cpath d='M150,200 Q200,200 200,150 Q200,100 150,100' fill='%23FFE86B' fill-opacity='0.05'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
}
.bg-texture--corner-2::after {
width: 250px;
height: 250px;
bottom: -125px;
left: -125px;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='rotate(45 125 125)'%3E%3Crect x='75' y='75' width='100' height='100' fill='%23FF8BCB' fill-opacity='0.05' rx='20'/%3E%3Crect x='50' y='50' width='150' height='150' fill='none' stroke='%235E3BFF' stroke-width='1' opacity='0.1' rx='30'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
}
/* Texture Modifiers */
.bg-texture--subtle::before,
.bg-texture--subtle::after {
opacity: 0.5;
}
.bg-texture--strong::before,
.bg-texture--strong::after {
opacity: 1.5;
}
.bg-texture--animated::before,
.bg-texture--animated::after {
animation: float 30s ease-in-out infinite;
}
/* Responsive Texture Visibility */
@media (max-width: 768px) {
.bg-texture--hide-mobile::before,
.bg-texture--hide-mobile::after {
display: none;
}
}
/* Combination Classes for Complex Backgrounds */
.bg-texture--complex {
position: relative;
overflow: hidden;
}
.bg-texture--complex::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background:
radial-gradient(
circle at 20% 80%,
rgba(255, 139, 203, 0.1) 0%,
transparent 40%
),
radial-gradient(
circle at 80% 20%,
rgba(94, 59, 255, 0.1) 0%,
transparent 40%
),
radial-gradient(
circle at 40% 40%,
rgba(24, 213, 228, 0.08) 0%,
transparent 40%
);
z-index: 0;
}
/* ==========================================================================
Form Validation Styles
Added: 2025-01-20
========================================================================== */
/* Form field states */
.form-field-error,
input.error,
select.error,
textarea.error {
border-color: var(--c-accent-peach, #ff8bcb) ;
background-color: rgba(255, 139, 203, 0.05) !important;
}
.form-field-error:focus,
input.error:focus,
select.error:focus,
textarea.error:focus {
outline: none;
border-color: var(--c-accent-peach, #ff8bcb) ;
box-shadow: 0 0 0 3px rgba(255, 139, 203, 0.15) !important;
}
/* Success and error messages */
.form-message {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-radius: 8px;
font-size: var(--fs-body-sm, 0.875rem);
margin-top: 0.5rem;
/* Using fadeInUp from animation_utilities.liquid */
}
.form-message--success {
background: rgba(24, 213, 228, 0.1);
color: var(--c-ink-700, #3a4a63);
}
.form-message--error {
background: rgba(255, 107, 107, 0.1);
color: var(--c-ink-700, #3a4a63);
}
.form-message svg {
flex-shrink: 0;
}
/* Form button states */
.form-button--loading {
position: relative;
color: transparent !important;
pointer-events: none;
}
.form-button--loading::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
top: 50%;
left: 50%;
margin-left: -8px;
margin-top: -8px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: white;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* Required field indicator */
.required-indicator {
color: var(--c-accent-peach, #ff8bcb);
font-weight: normal;
}
/* Form help text */
.form-help-text {
font-size: var(--fs-caption, 0.75rem);
color: var(--c-ink-500, #6b7280);
margin-top: 0.25rem;
}
/* Inline validation feedback */
.validation-feedback {
font-size: var(--fs-caption, 0.75rem);
margin-top: 0.25rem;
display: flex;
align-items: center;
gap: 0.25rem;
}
.validation-feedback--error {
color: var(--c-accent-peach, #ff8bcb);
}
.validation-feedback--success {
color: var(--c-accent-teal, #18d5e4);
}
/* Form animations */
/* fadeInUp and shake animations moved to animation_utilities.liquid */
/* ==========================================================================
Accessibility Utilities
Added: 2025-01-18
========================================================================== */
/* Visually hidden but accessible to screen readers */
.visually-hidden,
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Focus visible for keyboard navigation */
:focus-visible {
outline: 2px solid var(--an-primary, #5e3bff);
outline-offset: 2px;
}
/* Remove default focus for mouse users */
:focus:not(:focus-visible) {
outline: none;
}
/* Skip to content link */
.skip-to-content {
position: absolute;
left: -9999px;
z-index: 999;
padding: 1em;
background-color: var(--an-primary, #5e3bff);
color: white;
text-decoration: none;
border-radius: var(--an-radius-md);
}
.skip-to-content:focus {
left: 50%;
transform: translateX(-50%);
top: 1rem;
}
/* ==========================================================================
Book Testimonial Showcase Section
Added: 2025-01-21
========================================================================== */
/* Enhanced styles for book testimonial showcase section */
.book-testimonial-showcase {
min-height: 600px;
position: relative;
}
.book-testimonial-showcase__wrapper {
display: flex;
min-height: inherit;
}
.book-testimonial-showcase__left {
background-color: var(--an-gold, #ffe86b);
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 60px;
}
.book-testimonial-showcase__right {
background-color: var(--an-grey, #f5f5f0);
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 60px;
}
/* Book showcase specific styles */
.book-testimonial-showcase__book {
position: relative;
margin-bottom: 40px;
display: inline-block;
}
.book-testimonial-showcase__book img {
display: block;
max-width: 300px;
width: 100%;
height: auto;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
border-radius: 4px;
transition: transform var(--motion-duration-base) var(--motion-ease-standard);
}
.book-testimonial-showcase__book:hover img {
transform: translateY(-5px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}
/* Bestseller badge */
.book-testimonial-showcase__badge {
position: absolute;
bottom: 20px;
right: -20px;
background: #000;
color: #fff;
width: 120px;
height: 120px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
font-size: 11px;
line-height: 1.2;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
z-index: 1;
}
.badge-number {
font-size: 24px;
font-weight: 700;
display: block;
margin-bottom: 5px;
}
.badge-text {
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 10px;
}
/* Book content styles */
.book-testimonial-showcase__title {
font-size: var(--fs-display, 48px);
font-weight: 700;
line-height: 1.1;
margin-bottom: 20px;
color: var(--an-text-dark, #000);
}
.book-testimonial-showcase__subtitle {
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 20px;
color: var(--an-text-dark, #000);
}
.book-testimonial-showcase__description {
font-size: var(--fs-body-lg, 18px);
line-height: 1.6;
margin-bottom: 20px;
color: var(--an-text-dark, #000);
}
.book-testimonial-showcase__availability {
font-size: 16px;
font-style: italic;
margin-bottom: 30px;
color: var(--an-text-dark, #000);
}
.book-testimonial-showcase__availability em {
font-style: normal;
font-weight: 600;
}
/* CTA Button */
.book-testimonial-showcase__cta {
background: #000;
color: #fff;
padding: 16px 32px;
border-radius: 30px;
font-weight: 600;
text-decoration: none;
display: inline-block;
transition: all var(--motion-duration-base) var(--motion-ease-standard);
border: 2px solid #000;
}
.book-testimonial-showcase__cta:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
background: #fff;
color: #000;
}
/* Testimonial styles */
.book-testimonial-showcase__testimonials {
max-width: 560px;
width: 100%;
text-align: center;
}
.testimonial-logo {
margin-bottom: 40px;
}
.testimonial-logo img {
height: 30px;
width: auto;
opacity: 0.8;
}
.testimonial-slider {
position: relative;
min-height: 300px;
}
.testimonial-slide {
display: none;
/* Using fadeIn from animation_utilities.liquid */
}
.testimonial-slide.active {
display: block;
}
/* fadeIn animation moved to animation_utilities.liquid */
.testimonial-quote {
font-size: 24px;
line-height: 1.5;
margin-bottom: 40px;
quotes: none;
color: var(--an-text-dark, #000);
}
/* Author styles */
.testimonial-author {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
.testimonial-author__info {
text-align: right;
}
.testimonial-author__name {
font-size: 18px;
font-weight: 600;
margin-bottom: 5px;
color: var(--an-text-dark, #000);
}
.testimonial-author__title {
font-size: 14px;
color: #666;
font-style: italic;
line-height: 1.4;
}
.testimonial-author__avatar {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.testimonial-author__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Slider dots */
.testimonial-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 30px;
}
.testimonial-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #ddd;
cursor: pointer;
transition: all var(--motion-duration-base) var(--motion-ease-standard);
}
.testimonial-dot.active {
background: #333;
transform: scale(1.2);
}
.testimonial-dot:hover {
background: #666;
}
/* Responsive styles */
@media (max-width: 991px) {
.book-testimonial-showcase__wrapper {
flex-direction: column;
}
.book-testimonial-showcase__left,
.book-testimonial-showcase__right {
padding: 40px;
min-height: 500px;
}
.book-testimonial-showcase__title {
font-size: 36px;
}
.testimonial-quote {
font-size: 20px;
}
.book-testimonial-showcase__content {
text-align: center;
}
.book-testimonial-showcase__book {
display: inline-block;
}
}
@media (max-width: 767px) {
.book-testimonial-showcase__left,
.book-testimonial-showcase__right {
padding: 30px 20px;
min-height: 400px;
}
.book-testimonial-showcase__title {
font-size: 28px;
}
.book-testimonial-showcase__book img {
max-width: 200px;
}
.book-testimonial-showcase__badge {
width: 90px;
height: 90px;
font-size: 9px;
padding: 10px;
right: -10px;
bottom: 10px;
}
.badge-number {
font-size: 18px;
}
.badge-text {
font-size: 8px;
}
.testimonial-author {
flex-direction: column-reverse;
text-align: center;
}
.testimonial-author__info {
text-align: center;
}
.testimonial-quote {
font-size: 18px;
}
.testimonial-author__avatar {
width: 60px;
height: 60px;
}
}
/* ==========================================================================
Modern Brand Components
Added: 2025-01-20
========================================================================== */
/* Modern Button Styles */
.btn-primary-modern {
background: var(--g-brand, linear-gradient(135deg, #6757ff 0%, #7b4dff 100%));
color: var(--c-white);
border-radius: 9999px;
padding: 12px 32px;
font-weight: 500;
border: none;
text-decoration: none;
display: inline-block;
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.25) inset,
0 4px 8px rgba(94, 59, 255, 0.35);
transition:
transform var(--motion-duration-fast) var(--motion-ease-standard),
box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}
.btn-primary-modern:hover {
transform: translateY(-2px);
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.25) inset,
0 8px 16px rgba(94, 59, 255, 0.45);
color: var(--c-white);
}
.btn-secondary-modern {
background: var(--c-white) !important;
color: var(--c-brand-600) ;
border: 1px solid var(--c-brand-100) !important;
border-radius: 12px;
padding: 10px 24px;
font-weight: 500;
text-decoration: none;
display: inline-block;
transition: all var(--motion-duration-fast) var(--motion-ease-standard);
}
.btn-secondary-modern:hover {
background: var(--c-brand-100) !important;
transform: translateY(-1px);
color: var(--c-brand-600) ;
}
/* Fix for any dark/black secondary buttons */
.btn-secondary,
.btn-outline-dark,
.kjb-button--secondary,
.kjb-button--outline {
background: var(--c-white) !important;
color: var(--c-ink-900) ;
border: 1px solid var(--c-ink-900) !important;
}
.btn-secondary:hover,
.btn-outline-dark:hover,
.kjb-button--secondary:hover,
.kjb-button--outline:hover {
background: var(--c-ink-900) !important;
color: var(--c-white) ;
}
/* Ensure dark/black buttons have white text */
.btn-dark,
.btn-black,
.kjb-button--dark,
.kjb-button--black,
[class*="btn"][style*="background: #000"],
[class*="btn"][style*="background: black"],
[class*="btn"][style*="background-color: #000"],
[class*="btn"][style*="background-color: black"],
[class*="btn"][style*="background: var(--c-ink-900)"],
[class*="btn"][style*="background-color: var(--c-ink-900)"] {
color: var(--c-white) ;
}
/* Fix for primary buttons with dark backgrounds */
.btn-primary[style*="background: #000"],
.btn-primary[style*="background: black"],
.btn-primary[style*="background-color: #000"],
.btn-primary[style*="background-color: black"],
.btn[style*="background: var(--c-ink-900)"],
.btn[style*="background-color: var(--c-ink-900)"] {
color: var(--c-white) ;
}
/* Ensure all buttons have readable text */
.btn,
.kjb-button,
[class*="btn-"] {
text-decoration: none !important;
}
/* Button Color Utilities for Legacy Support */
.btn-navy {
background-color: var(--an-navy) ;
color: var(--c-white) ;
border: none !important;
}
.btn-teal {
background-color: var(--an-teal) ;
color: var(--c-white) ;
border: none !important;
}
.btn-coral {
background-color: var(--an-coral) ;
color: var(--c-white) ;
border: none !important;
}
.btn-gold {
background-color: var(--an-gold) ;
color: var(--c-ink-900) ; /* Dark text on yellow background */
border: none !important;
}
.btn-plum {
background-color: var(--an-plum) ;
color: var(--c-white) ;
border: none !important;
}
/* Smart button text color based on background - More specific selectors */
section[style*="background: #5E3BFF"]
.btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
section[style*="background: var(--g-brand)"]
.btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
section[style*="background: var(--c-brand-600)"]
.btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
section[style*="background-color: #5E3BFF"]
.btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
section[style*="background-color: var(--c-brand-600)"]
.btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
section[class*="bg-brand"]
.btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
section[class*="bg-navy"]
.btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
section[class*="bg-plum"]
.btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
section[class*="bg-dark"]
.btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
section[class*="bg-black"]
.btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
.bg-brand .btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
.bg-navy .btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
.bg-plum .btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
.bg-dark .btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
.bg-black .btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern) {
color: var(--c-white) ;
}
/* Also handle coral/teal dark backgrounds */
section[style*="background: var(--an-coral)"]
.btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
section[style*="background: var(--an-teal)"]
.btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
section[style*="background-color: var(--an-coral)"]
.btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
section[style*="background-color: var(--an-teal)"]
.btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
section[class*="bg-coral"]
.btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
section[class*="bg-teal"]
.btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
.bg-coral .btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
.bg-teal .btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern) {
color: var(--c-white) ;
}
/* Removed problematic button color override - let specific button classes handle their own colors */
/* Brand Voice Typography */
.text-therapist {
font-family: var(--font-primary);
font-weight: 500;
line-height: 1.7;
color: var(--c-ink-700);
}
.text-emotional {
font-style: italic;
color: var(--c-accent-peach);
font-weight: 500;
}
/* Micro-labels */
.micro-label {
display: inline-flex;
align-items: center;
font-size: var(--fs-caption);
color: var(--c-ink-500);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
}
.micro-label::before {
content: "✨";
margin-right: 6px;
color: var(--c-accent-peach);
}
/* Card Hover States */
.card-hover {
transition: all var(--motion-duration-base) var(--motion-ease-spring);
}
.card-hover:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(94, 59, 255, 0.08);
}
/* If button has dark background, ensure white text */
.btn[style*="background-color: #000"],
.btn[style*="background-color: black"],
.btn[style*="background: #000"],
.btn[style*="background: black"],
.kjb-button[style*="background-color: #000"],
.kjb-button[style*="background: black"] {
color: var(--c-white) ;
}
/* Smart button text color based on background */
/* Only apply dark text to buttons we know have light backgrounds */
a.btn.btn-secondary,
a.btn.btn-light,
a.kjb-button--secondary {
color: var(--c-ink-900) ;
}
/* Ensure buttons on dark backgrounds have white text */
section[style*="background: var(--g-brand)"]
.btn:not(.btn-secondary):not(.btn-light),
section[style*="background-color: #5E3BFF"]
.btn:not(.btn-secondary):not(.btn-light),
section[style*="background-color: #4025E0"]
.btn:not(.btn-secondary):not(.btn-light),
section[style*="background-color: #000"]
.btn:not(.btn-secondary):not(.btn-light),
section[style*="background: #000"] .btn:not(.btn-secondary):not(.btn-light),
section[style*="background: linear-gradient"]
.btn:not(.btn-secondary):not(.btn-light),
.bg-dark .btn:not(.btn-secondary):not(.btn-light),
.section-navy .btn:not(.btn-secondary):not(.btn-light),
.section-purple .btn:not(.btn-secondary):not(.btn-light),
.an-stats-bar[style*="--g-brand"] .btn:not(.btn-secondary):not(.btn-light) {
color: var(--c-white) ;
}
/* Fix for buttons with inline dark backgrounds */
.btn[style*="background-color: #5E3BFF"],
.btn[style*="background: #5E3BFF"],
.btn[style*="background-color: #4025E0"],
.btn[style*="background: #4025E0"],
.btn[style*="background: var(--c-brand-600)"],
.btn[style*="background: var(--c-brand-800)"],
.btn[style*="background: var(--g-brand)"] {
color: var(--c-white) ;
}
/* Ensure secondary/light buttons always have dark text */
.btn-secondary,
.btn-light,
.btn-secondary-modern {
color: var(--c-ink-900) ;
background: var(--c-white) !important;
}
/* Fix outline buttons on dark backgrounds */
section[style*="background: var(--g-brand)"] [class*="btn-outline"],
section[style*="background-color: #5E3BFF"] [class*="btn-outline"],
section[style*="background-color: #4025E0"] [class*="btn-outline"],
section[style*="background: linear-gradient"] [class*="btn-outline"],
.bg-dark [class*="btn-outline"],
.section-navy [class*="btn-outline"],
.section-purple [class*="btn-outline"] {
color: var(--c-white) ;
border-color: var(--c-white) ;
}
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
color: var(--c-white) ;
}
/* Ensure outline buttons always have readable text */
[class*="btn-outline"] {
background: transparent !important;
}
/* Fix Kajabi's default button styles that might cause issues */
.kjb-button {
text-decoration: none !important;
}
.kjb-button--secondary,
.kjb-button:not(.kjb-button--primary) {
background: var(--c-white) !important;
color: var(--c-ink-900) ;
border: 1px solid var(--c-ink-200) !important;
}
.kjb-button--secondary:hover,
.kjb-button:not(.kjb-button--primary):hover {
background: var(--c-ink-100) !important;
color: var(--c-ink-900) ;
}
/* Modern Card Styles */
.card-modern {
background: var(--c-white);
border-radius: 16px;
padding: 32px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
transition: all var(--motion-duration-base) var(--motion-ease-standard);
}
.card-modern:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
/* Modern Effects */
.glow-brand {
box-shadow: 0 0 48px rgba(94, 59, 255, 0.15);
}
.hover-lift {
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-4px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
/* Animation classes now handled by animation_utilities.liquid */
/* High contrast mode support */
@media (prefers-contrast: high) {
.progress__inner,
.progress__fill {
border: 1px solid;
}
.btn {
border-width: 2px !important;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Focus styles for interactive elements */
.btn:focus-visible,
.element_button:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--an-primary, #5e3bff);
outline-offset: 2px;
}
/* Ensure interactive elements have minimum touch target */
.btn,
button,
a[role="button"],
input[type="submit"],
input[type="button"] {
min-height: 44px;
min-width: 44px;
}
/* ==========================================================================
JavaScript Transition Support
Added: 2025-01-18
========================================================================== */
/* Mobile menu slide transition (replaces jQuery slideToggle) */
.header__content--mobile {
transition:
opacity var(--motion-duration-base) var(--motion-ease-standard),
transform var(--motion-duration-base) var(--motion-ease-standard);
opacity: 0;
transform: translateY(-10px);
}
.header__content--mobile.is-open {
opacity: 1;
transform: translateY(0);
}
/* Smooth scroll behavior for modern browsers */
@supports (scroll-behavior: smooth) {
html {
scroll-behavior: smooth;
}
}
/* ==========================================================================
16. Responsive Utilities
========================================================================== */
/* Mobile-only utilities (max-width: 767px) */
@media (max-width: 767px) {
.hidden--mobile {
display: none !important;
}
.block--mobile {
display: block !important;
}
.flex--mobile {
display: flex !important;
}
.text-center--mobile {
text-align: center !important;
}
.text-left--mobile {
text-align: left !important;
}
.text-right--mobile {
text-align: right !important;
}
.mt-0--mobile {
margin-top: 0 !important;
}
.mt-2--mobile {
margin-top: var(--an-space-md) !important;
}
.mt-3--mobile {
margin-top: var(--an-space-lg) !important;
}
.mb-0--mobile {
margin-bottom: 0 !important;
}
.mb-2--mobile {
margin-bottom: var(--an-space-md) !important;
}
.mb-3--mobile {
margin-bottom: var(--an-space-lg) !important;
}
.pt-0--mobile {
padding-top: 0 !important;
}
.pt-2--mobile {
padding-top: var(--an-space-md) !important;
}
.pt-3--mobile {
padding-top: var(--an-space-lg) !important;
}
.pb-0--mobile {
padding-bottom: 0 !important;
}
.pb-2--mobile {
padding-bottom: var(--an-space-md) !important;
}
.pb-3--mobile {
padding-bottom: var(--an-space-lg) !important;
}
.w-full--mobile {
width: 100% !important;
}
.flex-column--mobile {
flex-direction: column !important;
}
}
/* Tablet-only utilities (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
.hidden--tablet {
display: none !important;
}
.block--tablet {
display: block !important;
}
.flex--tablet {
display: flex !important;
}
}
/* Desktop-only utilities (992px+) */
@media (min-width: 992px) {
.hidden--desktop {
display: none !important;
}
.block--desktop {
display: block !important;
}
.flex--desktop {
display: flex !important;
}
.text-center--desktop {
text-align: center !important;
}
.text-left--desktop {
text-align: left !important;
}
.text-right--desktop {
text-align: right !important;
}
}
/* Tablet and up (768px+) */
@media (min-width: 768px) {
.hidden--tablet-up {
display: none !important;
}
.block--tablet-up {
display: block !important;
}
.flex--tablet-up {
display: flex !important;
}
.text-lg--tablet-up {
font-size: var(--an-font-lg) !important;
}
.text-xl--tablet-up {
font-size: var(--an-font-xl) !important;
}
.text-2xl--tablet-up {
font-size: var(--an-font-2xl) !important;
}
.mt-4--tablet-up {
margin-top: var(--an-space-xl) !important;
}
.mb-4--tablet-up {
margin-bottom: var(--an-space-xl) !important;
}
.pt-4--tablet-up {
padding-top: var(--an-space-xl) !important;
}
.pb-4--tablet-up {
padding-bottom: var(--an-space-xl) !important;
}
.flex-row--tablet-up {
flex-direction: row !important;
}
.w-auto--tablet-up {
width: auto !important;
}
}
/* ==========================================================================
17. Component-Specific Utilities
========================================================================== */
/* ==========================================================================
18. Icon System Styles
Added: 2025-01-20
========================================================================== */
/* Base icon styles */
.icon {
display: inline-block;
vertical-align: middle;
flex-shrink: 0;
transition: all var(--an-transition-base);
}
/* Icon sizing */
.icon-xs { width: 12px; height: 12px; }
.icon-sm { width: 16px; height: 16px; }
.icon-md { width: 20px; height: 20px; }
.icon-lg { width: 24px; height: 24px; }
.icon-xl { width: 32px; height: 32px; }
.icon-2xl { width: 48px; height: 48px; }
/* Social icon specific styles */
.icon-social {
transition: transform var(--an-transition-base),
opacity var(--an-transition-base),
color var(--an-transition-base);
}
.icon-social:hover {
transform: translateY(-2px);
opacity: 0.8;
}
/* Icon in buttons */
.btn .icon {
margin-right: 0.5em;
}
.btn .icon:last-child {
margin-right: 0;
margin-left: 0.5em;
}
.btn .icon:only-child {
margin: 0;
}
/* Icon colors */
.icon-brand { color: var(--c-brand-600); }
.icon-teal { color: var(--c-accent-teal); }
.icon-peach { color: var(--c-accent-peach); }
.icon-lemon { color: var(--c-accent-lemon); }
.icon-muted { color: var(--c-ink-400); }
/* Icon containers */
.icon-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--c-brand-100);
transition: all var(--an-transition-base);
}
.icon-circle:hover {
background: var(--c-brand-600);
color: white;
}
.icon-circle .icon {
width: 20px;
height: 20px;
}
/* Social icons container styles */
.social-icons__icon {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: currentColor;
transition: all var(--an-transition-base);
}
.social-icons__icon--small .icon { width: 16px; height: 16px; }
.social-icons__icon--medium .icon { width: 20px; height: 20px; }
.social-icons__icon--large .icon { width: 24px; height: 24px; }
/* ==========================================================================
19. Enhanced Background Textures & SVG Shapes
========================================================================== */
/* Sticky Mobile CTA Support */
body.has-sticky-cta {
padding-bottom: 90px !important; /* Space for sticky footer on mobile */
}
@media (min-width: 992px) {
body.has-sticky-cta {
padding-bottom: 0 !important; /* No padding on desktop */
}
}
/* Section utilities */
.section-navy {
background-color: var(--an-navy) ;
color: var(--an-white) ;
}
.section-teal {
background-color: var(--an-teal) ;
color: var(--an-white) ;
}
.section-coral {
background-color: var(--an-coral) ;
color: var(--an-white) ;
}
.section-peach {
background-color: var(--an-peach) ;
color: var(--an-slate) ;
}
.section-grey {
background-color: var(--an-grey) ;
color: var(--an-slate) ;
}
/* Button variant utilities */
.btn-navy {
background-color: var(--an-navy) ;
border-color: var(--an-navy) ;
color: var(--an-white) ;
}
.btn-navy:hover {
background-color: var(--an-teal) ;
border-color: var(--an-teal) ;
}
.btn-teal {
background-color: var(--an-teal) ;
border-color: var(--an-teal) ;
color: var(--an-white) ;
}
.btn-teal:hover {
background-color: #239a98 !important;
border-color: #239a98 !important;
}
.btn-coral {
background-color: var(--an-coral) ;
border-color: var(--an-coral) ;
color: var(--an-white) ;
}
.btn-coral:hover {
background-color: #f4695a !important;
border-color: #f4695a !important;
}
.btn-outline-navy {
background-color: transparent !important;
border-color: var(--an-navy) ;
color: var(--an-navy) ;
}
.btn-outline-navy:hover {
background-color: var(--an-navy) ;
color: var(--an-white) ;
}
.btn-outline-teal {
background-color: transparent !important;
border-color: var(--an-teal) ;
color: var(--an-teal) ;
}
.btn-outline-teal:hover {
background-color: var(--an-teal) ;
color: var(--an-white) ;
}
/* Card utilities */
.card-shadow {
box-shadow: var(--an-shadow-md) !important;
transition: box-shadow var(--an-transition-base) !important;
}
.card-shadow:hover {
box-shadow: var(--an-shadow-lg) !important;
}
.card-border {
border: 1px solid var(--an-border) !important;
border-radius: var(--an-radius-md) !important;
}
/* Badge utilities */
.badge {
display: inline-block !important;
padding: 4px 12px !important;
font-size: var(--an-font-sm) !important;
font-weight: 600 !important;
border-radius: var(--an-radius-full) !important;
line-height: 1 !important;
}
.badge-navy {
background-color: var(--an-navy) ;
color: var(--an-white) ;
}
.badge-teal {
background-color: var(--an-teal) ;
color: var(--an-white) ;
}
.badge-coral {
background-color: var(--an-coral) ;
color: var(--an-white) ;
}
.badge-gold {
background-color: var(--an-gold) ;
color: var(--an-navy) ;
}
.badge-plum {
background-color: var(--an-plum) ;
color: var(--an-white) ;
}
/* Container utilities */
.container-narrow {
max-width: 768px !important;
margin-left: auto ;
margin-right: auto ;
}
.container-wide {
max-width: 1400px !important;
margin-left: auto ;
margin-right: auto ;
}
/* Animation utilities */
/* animate-fade-in class using fadeIn from animation_utilities.liquid */
/* animate-slide-up class using slideUp from animation_utilities.liquid */
/* fadeIn and slideUp animations moved to animation_utilities.liquid */
/* Hover state utilities */
.hover-lift:hover {
transform: translateY(-4px) !important;
}
.hover-grow:hover {
transform: scale(1.05) !important;
}
.hover-shadow:hover {
box-shadow: var(--an-shadow-lg) !important;
}
.hover-opacity:hover {
opacity: 0.8 !important;
}
/* State utilities */
.disabled {
opacity: 0.5 !important;
cursor: not-allowed !important;
pointer-events: none !important;
}
/* Active state for navigation items only */
.nav-item.active,
.link-list__item.active {
background-color: var(--an-teal) ;
color: var(--an-white) ;
}
/* ==========================================================================
18. Book Page Enhancements - Securely Attached
Added: 2025-01-18
========================================================================== */
/* Hero Section for Book Pages */
.hero-section--book {
background: linear-gradient(135deg, var(--an-peach) 0%, var(--an-white) 100%);
min-height: 60vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.hero-section--book::before {
content: "";
position: absolute;
top: -50%;
right: -10%;
width: 70%;
height: 150%;
background: radial-gradient(
circle,
rgba(255, 198, 63, 0.1) 0%,
transparent 70%
);
border-radius: 50%;
pointer-events: none;
}
.hero-section--book .hero-title {
color: var(--an-navy);
font-size: clamp(2rem, 5vw, 3.5rem);
line-height: 1.2;
margin-bottom: var(--an-space-lg);
font-weight: 800;
}
.hero-section--book .hero-subtitle {
color: var(--an-slate);
font-size: clamp(1.125rem, 3vw, 1.5rem);
line-height: 1.6;
max-width: 700px;
margin: 0 auto var(--an-space-xl);
}
.hero-section--book .hero-badge {
display: inline-block;
background: var(--an-teal);
color: var(--an-white);
padding: var(--an-space-sm) var(--an-space-lg);
border-radius: var(--an-radius-full);
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: var(--an-space-lg);
animation: animate-fade-in 0.6s ease-out;
}
/* Book Overview Section */
.book-overview {
padding: var(--an-space-3xl) 0;
background: var(--an-white);
}
.book-overview__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--an-space-3xl);
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.book-overview__content h2 {
color: var(--an-navy);
font-size: clamp(1.75rem, 4vw, 2.5rem);
margin-bottom: var(--an-space-lg);
font-weight: 700;
}
.book-overview__content p {
color: var(--an-slate);
font-size: 1.125rem;
line-height: 1.8;
margin-bottom: var(--an-space-md);
}
.book-overview__image {
position: relative;
text-align: center;
}
.book-overview__image img {
max-width: 400px;
width: 100%;
height: auto;
filter: drop-shadow(0 25px 50px rgba(26, 45, 78, 0.15));
transition: transform var(--an-transition-slow);
}
.book-overview__image:hover img {
transform: translateY(-10px);
}
/* Key Features/Benefits Grid */
.book-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--an-space-xl);
margin-top: var(--an-space-3xl);
}
.book-feature {
background: var(--an-grey);
padding: var(--an-space-xl);
border-radius: var(--an-radius-lg);
transition: all var(--an-transition-base);
border: 2px solid transparent;
}
.book-feature:hover {
border-color: var(--an-teal);
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(42, 179, 177, 0.1);
}
.book-feature__icon {
width: 60px;
height: 60px;
background: var(--an-teal);
border-radius: var(--an-radius-full);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--an-space-lg);
font-size: 1.5rem;
color: var(--an-white);
}
.book-feature h3 {
color: var(--an-navy);
font-size: 1.25rem;
margin-bottom: var(--an-space-md);
font-weight: 600;
}
.book-feature p {
color: var(--an-slate);
line-height: 1.6;
}
/* Enhanced Book Section Quotes */
.book__quote-text--enhanced {
position: relative;
padding-left: var(--an-space-xl);
}
.book__quote-text--enhanced::before {
content: '"';
position: absolute;
left: 0;
top: -10px;
font-size: 4rem;
color: var(--an-teal);
opacity: 0.3;
font-family: Georgia, serif;
line-height: 1;
}
/* Testimonial Cards */
.testimonial-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: var(--an-space-xl);
margin: var(--an-space-3xl) 0;
}
.testimonial-card {
background: var(--an-white);
padding: var(--an-space-xl);
border-radius: var(--an-radius-lg);
box-shadow: 0 5px 20px rgba(26, 45, 78, 0.08);
transition: all var(--an-transition-base);
border: 1px solid var(--an-border);
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(26, 45, 78, 0.12);
}
.testimonial-card__header {
display: flex;
align-items: center;
margin-bottom: var(--an-space-lg);
}
.testimonial-card__author {
font-weight: 600;
color: var(--an-navy);
margin-right: auto;
}
.testimonial-card__stars {
display: flex;
gap: 2px;
color: var(--an-gold);
}
.testimonial-card__content {
color: var(--an-slate);
line-height: 1.8;
font-style: italic;
}
/* CTA Sections */
.book-cta {
background: linear-gradient(135deg, var(--an-navy) 0%, var(--an-plum) 100%);
color: var(--an-white);
padding: var(--an-space-3xl) 0;
text-align: center;
position: relative;
overflow: hidden;
}
.book-cta::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.book-cta h2 {
font-size: clamp(2rem, 5vw, 3rem);
margin-bottom: var(--an-space-lg);
position: relative;
}
.book-cta p {
font-size: 1.25rem;
margin-bottom: var(--an-space-xl);
opacity: 0.9;
max-width: 600px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.book-cta .btn {
font-size: 1.125rem;
padding: var(--an-space-md) var(--an-space-xl);
position: relative;
}
/* Enhanced Buy Links */
.book-buy--enhanced {
background: var(--an-grey);
padding: var(--an-space-2xl) 0;
}
.book-buy__cta--primary {
background: var(--an-coral) !important;
font-size: 1.125rem !important;
padding: var(--an-space-md) var(--an-space-2xl) !important;
box-shadow: 0 4px 15px rgba(245, 124, 111, 0.3);
position: relative;
overflow: hidden;
}
.book-buy__cta--primary::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition:
width var(--motion-duration-slow) var(--motion-ease-standard),
height var(--motion-duration-slow) var(--motion-ease-standard);
}
.book-buy__cta--primary:hover::before {
width: 300px;
height: 300px;
}
/* Mobile Responsiveness */
@media (max-width: 991px) {
.book-overview__grid {
grid-template-columns: 1fr;
text-align: center;
}
.book-overview__image {
order: -1;
margin-bottom: var(--an-space-xl);
}
.testimonial-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.hero-section--book {
min-height: 50vh;
}
.book-features {
grid-template-columns: 1fr;
}
.book-feature {
text-align: center;
}
.book-feature__icon {
margin: 0 auto var(--an-space-lg);
}
.testimonial-card {
padding: var(--an-space-lg);
}
.book-cta {
padding: var(--an-space-2xl) var(--an-space-lg);
}
}
/* ==========================================================================
18. New Brand Component Styles
========================================================================== */
/* Hero Sections with Lavender Background */
.hero-section,
.section-hero {
background: var(--c-brand-100);
padding: var(--space-2xl) 0;
text-align: center;
}
.hero-section h1,
.section-hero h1 {
font-size: var(--fs-display);
color: var(--c-ink-900);
margin-bottom: var(--space-md);
}
.hero-section .subtitle,
.section-hero .subtitle {
font-size: var(--fs-body-lg);
color: var(--c-ink-700);
margin-bottom: var(--space-lg);
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
/* Hero Video Frame */
.hero-video {
max-width: 900px;
margin: var(--space-xl) auto 0;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-media);
}
/* Cards with New Design */
.card {
background: var(--c-white);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
padding: var(--space-lg) var(--space-md);
transition: all var(--motion-duration-fast) var(--motion-ease-standard);
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.card-icon {
color: var(--c-brand-600);
font-size: 32px;
margin-bottom: var(--space-md);
}
/* Feature Blocks */
.feature-block {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
align-items: center;
padding: var(--space-2xl) 0;
}
.feature-block:nth-child(even) {
direction: rtl;
}
.feature-block:nth-child(even) > * {
direction: ltr;
}
.feature-block__content {
max-width: 560px;
}
.feature-block__label {
color: var(--c-accent-peach);
font-size: var(--fs-caption);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-sm);
}
.feature-block__title {
font-size: var(--fs-h2);
color: var(--c-ink-900);
margin-bottom: var(--space-md);
}
.feature-block__description {
font-size: var(--fs-body);
color: var(--c-ink-700);
margin-bottom: var(--space-lg);
}
.feature-block__image {
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-media);
}
/* Full-width CTA Footer */
.cta-footer {
background: var(--c-white);
border-radius: var(--radius-lg);
padding: var(--space-2xl);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) inset;
text-align: center;
margin: var(--space-2xl) 0;
}
.cta-footer h2 {
font-size: 2rem;
color: var(--c-ink-900);
margin-bottom: var(--space-lg);
}
.cta-footer.in-view {
/* Using fadeUp from animation_utilities.liquid */
}
/* fadeUp animation moved to animation_utilities.liquid */
/* Forms & Inputs */
.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
textarea,
select {
min-height: 44px;
border: 1px solid var(--c-brand-100);
border-radius: var(--radius-sm);
padding: 10px 16px;
font-size: var(--fs-body);
transition: all var(--motion-duration-fast) var(--motion-ease-decelerate);
width: 100%;
}
.input:focus,
input:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--c-brand-600);
box-shadow: 0 0 0 2px rgba(94, 59, 255, 0.2);
}
/* Badge Styles */
.badge {
display: inline-block;
padding: 4px 12px;
border-radius: var(--radius-pill);
font-size: var(--fs-caption);
font-weight: 500;
line-height: 1;
}
.badge-new {
background: var(--c-accent-lemon);
color: var(--c-ink-900);
}
.badge-teal {
background: var(--c-accent-teal);
color: var(--c-white);
}
/* Animation Classes */
.hover-lift {
transition: transform var(--motion-duration-fast)
var(--motion-ease-decelerate);
}
.hover-lift:hover {
transform: translateY(-2px);
}
.hover-shadow {
transition: box-shadow var(--motion-duration-fast)
var(--motion-ease-decelerate);
}
.hover-shadow:hover {
box-shadow: var(--shadow-media);
}
/* Animation classes moved to animation_utilities.liquid */
/* Responsive adjustments */
@media (max-width: 768px) {
.feature-block {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
.feature-block:nth-child(even) {
direction: ltr;
}
.hero-section h1,
.section-hero h1 {
font-size: 2rem;
}
.cta-footer {
padding: var(--space-lg);
}
}
/* ==========================================================================
18. Sidebar Hover Effects
Added: 2025-01-19
========================================================================== */
/* Sidebar title hover effects */
.sidebar-recent-posts__title,
.sidebar-categories__category,
.sidebar-search h3,
.sidebar-social h3,
.sidebar-cta h3,
.sidebar-instructor h3,
.blog-sidebar h2,
.blog-sidebar h3,
.blog-sidebar h4,
.newsletter-sidebar h2,
.newsletter-sidebar h3,
.newsletter-sidebar h4 {
transition:
color var(--motion-duration-base) var(--motion-ease-standard),
transform var(--motion-duration-fast) var(--motion-ease-standard);
display: inline-block;
position: relative;
}
/* Hover effect for sidebar titles and links */
.sidebar-recent-posts__title:hover,
.sidebar-categories__category:hover,
.blog-sidebar a:hover,
.newsletter-sidebar a:hover {
color: var(--c-brand-600) ;
transform: translateX(4px);
}
/* Sidebar section titles hover effect */
.sidebar-recent-posts__heading,
.sidebar-categories h3,
.sidebar-search h3,
.sidebar-social h3,
.sidebar-cta h3,
.sidebar-instructor h3,
.blog-sidebar h2,
.blog-sidebar h3,
.newsletter-sidebar h2,
.newsletter-sidebar h3 {
transition: color 0.3s ease;
cursor: default;
position: relative;
}
/* Add underline animation on hover for section titles */
.sidebar-recent-posts__heading::after,
.sidebar-categories h3::after,
.sidebar-search h3::after,
.sidebar-social h3::after,
.sidebar-cta h3::after,
.sidebar-instructor h3::after,
.blog-sidebar h2::after,
.blog-sidebar h3::after,
.newsletter-sidebar h2::after,
.newsletter-sidebar h3::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background-color: var(--c-accent-teal);
transition: width var(--motion-duration-slow) var(--motion-ease-standard);
}
.sidebar-recent-posts__heading:hover::after,
.sidebar-categories h3:hover::after,
.sidebar-search h3:hover::after,
.sidebar-social h3:hover::after,
.sidebar-cta h3:hover::after,
.sidebar-instructor h3:hover::after,
.blog-sidebar h2:hover::after,
.blog-sidebar h3:hover::after,
.newsletter-sidebar h2:hover::after,
.newsletter-sidebar h3:hover::after {
width: 100%;
}
/* Tag hover effects */
.sidebar-recent-posts__tag,
.tag {
transition: all var(--motion-duration-base) var(--motion-ease-standard);
text-decoration: none !important;
}
.sidebar-recent-posts__tag:hover,
.tag:hover {
background-color: var(--c-brand-600) ;
color: white !important;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(94, 59, 255, 0.2);
}
/* Category links hover effect */
.sidebar-categories a {
transition: all var(--motion-duration-base) var(--motion-ease-standard);
text-decoration: none !important;
position: relative;
display: block;
padding: 8px 0;
}
.sidebar-categories a:hover {
color: var(--c-brand-600) ;
padding-left: 8px;
}
/* Social icons hover effect */
.sidebar-social a,
.sidebar-social-share a {
transition:
transform var(--motion-duration-base) var(--motion-ease-standard),
opacity var(--motion-duration-base) var(--motion-ease-standard);
}
.sidebar-social a:hover,
.sidebar-social-share a:hover {
transform: translateY(-3px) scale(1.1);
opacity: 0.8;
}
/* CTA button hover effect in sidebar */
.sidebar-cta .btn {
transition: all var(--motion-duration-base) var(--motion-ease-standard) !important;
}
.sidebar-cta .btn:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(94, 59, 255, 0.3) !important;
}
/* Search input focus effect */
.sidebar-search input[type="search"],
.sidebar-search input[type="text"] {
transition: all var(--motion-duration-base) var(--motion-ease-standard);
border: 1px solid #e0e0e0;
}
.sidebar-search input[type="search"]:focus,
.sidebar-search input[type="text"]:focus {
border-color: var(--c-brand-600);
box-shadow: 0 0 0 3px rgba(94, 59, 255, 0.1);
outline: none;
}
/* Instructor info hover effect */
.sidebar-instructor img {
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.sidebar-instructor:hover img {
transform: scale(1.05);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
/* ==========================================================================
Section: Pay What You Can (PWYC) Pricing
Added: 2025-01-20
========================================================================== */
/* PWYC Card Utilities */
.pwyc-card-grid-2 {
grid-template-columns: repeat(2, 1fr) !important;
}
.pwyc-card-grid-3 {
grid-template-columns: repeat(3, 1fr) !important;
}
.pwyc-card-grid-4 {
grid-template-columns: repeat(4, 1fr) !important;
}
/* PWYC Animation Utilities */
.pwyc-hover-lift:hover {
transform: translateY(-8px) !important;
}
.pwyc-hover-scale:hover {
transform: scale(1.05) !important;
}
.pwyc-selected-glow {
box-shadow: 0 0 0 4px rgba(94, 59, 255, 0.2) !important;
}
/* PWYC Badge Positions */
.pwyc-badge-top-left {
top: var(--an-space-md) !important;
left: var(--an-space-md) !important;
right: auto !important;
}
.pwyc-badge-top-right {
top: var(--an-space-md) !important;
right: var(--an-space-md) !important;
left: auto !important;
}
.pwyc-badge-top-center {
top: -12px !important;
left: 50% !important;
transform: translateX(-50%) !important;
}
/* PWYC Price Sizes */
.pwyc-price-small {
font-size: var(--an-font-2xl) !important;
}
.pwyc-price-medium {
font-size: var(--an-font-3xl) !important;
}
.pwyc-price-large {
font-size: var(--an-font-4xl) !important;
}
/* PWYC Card States */
.pwyc-disabled {
opacity: 0.5 !important;
cursor: not-allowed !important;
pointer-events: none !important;
}
.pwyc-recommended {
border-width: 3px !important;
border-color: var(--c-brand-600) ;
background: linear-gradient(
135deg,
transparent 0%,
var(--c-brand-100) 100%
) !important;
}
/* PWYC Responsive Overrides */
@media (max-width: 767px) {
.pwyc-mobile-stack {
grid-template-columns: 1fr !important;
}
.pwyc-mobile-scroll {
display: flex !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory !important;
}
.pwyc-mobile-scroll > * {
flex: 0 0 280px !important;
scroll-snap-align: center !important;
}
}
/* ==========================================================================
Section: Testimonials
Added: 2025-01-20
========================================================================== */
/* Testimonial Card Utilities */
.testimonial-masonry {
column-count: 3 !important;
column-gap: var(--an-space-xl) !important;
}
.testimonial-masonry .testimonial-card {
break-inside: avoid !important;
margin-bottom: var(--an-space-xl) !important;
}
@media (max-width: 991px) {
.testimonial-masonry {
column-count: 2 !important;
}
}
@media (max-width: 767px) {
.testimonial-masonry {
column-count: 1 !important;
}
}
/* Testimonial Variations */
.testimonial-minimal .testimonial-card__author {
display: none !important;
}
.testimonial-minimal .testimonial-card__rating {
text-align: center !important;
}
.testimonial-compact {
padding: var(--an-space-lg) !important;
}
.testimonial-compact .testimonial-card__quote {
font-size: var(--an-font-sm) !important;
}
/* Testimonial Themes */
.testimonial-dark {
background: var(--an-text-dark) !important;
color: var(--an-white) ;
}
.testimonial-dark .testimonial-card__quote,
.testimonial-dark .testimonial-card__details {
color: rgba(255, 255, 255, 0.8) !important;
}
.testimonial-dark .testimonial-card__name {
color: var(--an-white) ;
}
/* Testimonial Animations */
.testimonial-hover-quote:hover .testimonial-card__quote {
transform: scale(1.02) !important;
transition: transform var(--an-transition-base) !important;
}
.testimonial-hover-shadow:hover {
box-shadow: 0 12px 40px rgba(94, 59, 255, 0.15) !important;
}
/* Star Rating Variations */
.stars-large .star {
font-size: 24px !important;
}
.stars-small .star {
font-size: 16px !important;
}
.stars-brand .star--filled {
color: var(--c-brand-600) ;
}
.stars-teal .star--filled {
color: var(--c-accent-teal) ;
}
/* ==========================================================================
Section: Securely Attached Book Pages
Added: 2025-01-20
========================================================================== */
/* SA Hero Section */
.sa-hero {
position: relative;
overflow: hidden;
}
/* SA Book Showcase */
.sa-book-showcase .book-showcase-visual {
position: relative;
max-width: 500px;
margin: 0 auto;
}
/* SA Workbook Preview */
.sa-workbook-preview {
position: relative;
}
/* Float animation removed - using the one from line 1942 */
/* Animation classes moved to animation_utilities.liquid */
/* SA Free Chapter CTA */
.sa-free-chapter-cta form button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(24, 213, 228, 0.3);
}
.sa-free-chapter-cta input:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(24, 213, 228, 0.2);
}
/* SA Purchase CTA */
.sa-purchase-cta .card-modern {
transition: all var(--motion-duration-base) var(--motion-ease-decelerate);
}
.sa-purchase-cta .card-modern:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}
/* SA User Reviews */
.sa-user-reviews .card-modern {
transition: all var(--motion-duration-base) var(--motion-ease-decelerate);
}
.sa-user-reviews .card-modern:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
/* ==========================================================================
Section Utility Classes - For Common Section Patterns
Added: 2025-01-24
========================================================================== */
/* Section background presets with appropriate text colors */
.section-light {
background-color: var(--c-brand-100) ;
color: var(--c-ink-900) ;
}
.section-dark {
background-color: var(--c-ink-900) ;
color: var(--c-white) ;
}
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6 {
color: var(--c-white) ;
}
.section-accent {
background-color: var(--c-accent-teal) ;
color: var(--c-ink-900) ;
}
.section-white {
background-color: var(--c-white) ;
color: var(--c-ink-700) ;
}
.section-grey {
background-color: #fafafa !important;
color: var(--c-ink-700) ;
}
/* Modern brand-specific sections */
.section-brand {
background: var(--g-brand) !important;
color: var(--c-white) ;
}
.section-brand h1,
.section-brand h2,
.section-brand h3,
.section-brand h4,
.section-brand h5,
.section-brand h6 {
color: var(--c-white) ;
}
/* Legacy color mappings for older sections */
.section-navy {
background-color: var(--an-navy) ;
color: var(--an-white) ;
}
.section-navy h1,
.section-navy h2,
.section-navy h3,
.section-navy h4,
.section-navy h5,
.section-navy h6 {
color: var(--an-white) ;
}
.section-teal {
background-color: var(--an-teal) ;
color: var(--an-text-dark) ;
}
.section-coral {
background-color: var(--an-coral) ;
color: var(--an-text-dark) ;
}
.section-peach {
background-color: var(--an-peach) ;
color: var(--an-text-dark) ;
}
/* Common section padding utilities */
.section-padding-sm {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
.section-padding-md {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
.section-padding-lg {
padding-top: 80px !important;
padding-bottom: 80px !important;
}
.section-padding-xl {
padding-top: 100px !important;
padding-bottom: 100px !important;
}
/* Responsive section padding */
@media (max-width: 767px) {
.section-padding-sm {
padding-top: 30px !important;
padding-bottom: 30px !important;
}
.section-padding-md {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
.section-padding-lg {
padding-top: 50px !important;
padding-bottom: 50px !important;
}
.section-padding-xl {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
}
/* Section overlay utilities */
.section-overlay {
position: relative;
}
.section-overlay::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}
.section-overlay > * {
position: relative;
z-index: 2;
}
.section-overlay-light::before {
background-color: rgba(255, 255, 255, 0.8);
}
.section-overlay-dark::before {
background-color: rgba(0, 0, 0, 0.7);
}
/* ==========================================================================
18. Image Aspect Ratio Utilities
Added: 2025-01-25
Purpose: Prevent layout shift by maintaining consistent aspect ratios
========================================================================== */
/* Common aspect ratios for images */
.aspect-square {
aspect-ratio: 1 / 1 !important;
}
.aspect-video {
aspect-ratio: 16 / 9 !important;
}
.aspect-book {
aspect-ratio: 2 / 3 !important;
}
.aspect-landscape {
aspect-ratio: 4 / 3 !important;
}
.aspect-portrait {
aspect-ratio: 3 / 4 !important;
}
.aspect-wide {
aspect-ratio: 21 / 9 !important;
}
.aspect-golden {
aspect-ratio: 1.618 / 1 !important;
}
/* Responsive aspect ratio utilities */
@media (max-width: 767px) {
.aspect-square--mobile {
aspect-ratio: 1 / 1 !important;
}
.aspect-video--mobile {
aspect-ratio: 16 / 9 !important;
}
.aspect-book--mobile {
aspect-ratio: 2 / 3 !important;
}
}
@media (min-width: 768px) {
.aspect-square--tablet-up {
aspect-ratio: 1 / 1 !important;
}
.aspect-video--tablet-up {
aspect-ratio: 16 / 9 !important;
}
.aspect-book--tablet-up {
aspect-ratio: 2 / 3 !important;
}
}
/* Object-fit utilities for aspect ratio containers */
.object-cover {
object-fit: cover !important;
}
.object-contain {
object-fit: contain !important;
}
.object-fill {
object-fit: fill !important;
}
.object-scale-down {
object-fit: scale-down !important;
}
/* Object position utilities */
.object-center {
object-position: center center !important;
}
.object-top {
object-position: center top !important;
}
.object-bottom {
object-position: center bottom !important;
}
/* Image container utilities */
.img-container {
position: relative;
overflow: hidden;
}
.img-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Skeleton loading for images */
.img-skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* ==========================================================================
Aspect Ratio Utilities for Responsive Images
Added: 2025-01-03
========================================================================== */
/* Common aspect ratios */
.aspect-square {
aspect-ratio: 1 / 1 !important;
}
.aspect-video {
aspect-ratio: 16 / 9 !important;
}
.aspect-book {
aspect-ratio: 2 / 3 !important;
}
.aspect-landscape {
aspect-ratio: 4 / 3 !important;
}
.aspect-portrait {
aspect-ratio: 3 / 4 !important;
}
.aspect-wide {
aspect-ratio: 21 / 9 !important;
}
.aspect-golden {
aspect-ratio: 1.618 / 1 !important;
}
/* Responsive aspect ratios */
@media (max-width: 767px) {
.aspect-square--mobile {
aspect-ratio: 1 / 1 !important;
}
.aspect-video--mobile {
aspect-ratio: 16 / 9 !important;
}
}
@media (min-width: 768px) {
.aspect-square--tablet-up {
aspect-ratio: 1 / 1 !important;
}
.aspect-video--tablet-up {
aspect-ratio: 16 / 9 !important;
}
.aspect-book--tablet-up {
aspect-ratio: 2 / 3 !important;
}
}
/* Aspect ratio containers for legacy support */
.aspect-container {
position: relative;
width: 100%;
overflow: hidden;
}
.aspect-container > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Padding-based aspect ratios for older browsers */
.aspect-container--square::before {
content: "";
display: block;
padding-top: 100%;
}
.aspect-container--video::before {
content: "";
display: block;
padding-top: 56.25%; /* 16:9 */
}
.aspect-container--book::before {
content: "";
display: block;
padding-top: 150%; /* 2:3 */
}
/* ==========================================================================
Section Text Color Fixes
Added: 2025-08-02
========================================================================== */
/* Fix z-index for section overlay to ensure content is visible */
.section {
position: relative;
color: inherit;
}
.section__overlay {
z-index: 0 !important;
pointer-events: none;
}
/* Hide overlay if no background color is set */
.section__overlay[style*="background-color: ;"],
.section__overlay[style*="background-color:;"],
.section__overlay:not([style*="background-color"]) {
display: none !important;
}
/* Ensure sizer is positioned correctly */
.section .sizer {
position: relative;
z-index: 1;
}
.section .container {
position: relative;
z-index: 1;
}
/* Fix text color for sections with dark backgrounds */
.section {
color: inherit;
}
/* When section has dark background overlay, use white text */
.section .section__overlay[style*="background-color: rgba("] {
color: #fff;
}
/* Ensure all text elements inside dark sections use white */
.section:has(.section__overlay[style*="background-color: rgba("]) {
color: #fff;
}
.section:has(.section__overlay[style*="background-color: rgba("]) h1,
.section:has(.section__overlay[style*="background-color: rgba("]) h2,
.section:has(.section__overlay[style*="background-color: rgba("]) h3,
.section:has(.section__overlay[style*="background-color: rgba("]) h4,
.section:has(.section__overlay[style*="background-color: rgba("]) h5,
.section:has(.section__overlay[style*="background-color: rgba("]) h6,
.section:has(.section__overlay[style*="background-color: rgba("]) p,
.section:has(.section__overlay[style*="background-color: rgba("]) span,
.section:has(.section__overlay[style*="background-color: rgba("]) div,
.section:has(.section__overlay[style*="background-color: rgba("]) .block-type--text {
color: #fff !important;
}
/* Alternative approach for browsers that don't support :has() */
.section[style*="background-color: rgba(22, 30, 42"],
.section[style*="background-color: rgba(0, 0, 0"],
.section[style*="background-color: #000"],
.section[style*="background-color: #111"],
.section[style*="background-color: #222"] {
color: #fff;
}
.section[style*="background-color: rgba(22, 30, 42"] *,
.section[style*="background-color: rgba(0, 0, 0"] *,
.section[style*="background-color: #000"] *,
.section[style*="background-color: #111"] *,
.section[style*="background-color: #222"] * {
color: #fff !important;
}
/* ==========================================================================
Animation Visibility Fix
Added: 2025-08-03
========================================================================== */
/* Fix for blocks with data-aos="none" being hidden */
[data-aos="none"] {
opacity: 1 !important;
transform: none !important;
}
/* Only hide elements with actual animations */
[data-aos]:not([data-aos="none"]) {
opacity: 0;
transition-property: transform, opacity;
}
[data-aos]:not([data-aos="none"]).aos-animate {
opacity: 1;
}
/* Ensure all blocks are visible by default */
.block-type--text,
.block-type--feature,
.block-type--image,
.block-type--cta,
.block-type--video,
.block-type--form,
.block {
opacity: 1 !important;
}
/* Override any animation opacity if animations aren't initialized */
body:not(.aos-initialized) [data-aos] {
opacity: 1 !important;
transform: none !important;
}
/* ==========================================================================
END OF SHARED STYLES
========================================================================== */
/* Download Card (global, shared across themes) */
.dl-card {
--bg: #ffffff;
--accent: #5e3bff;
display: flex;
align-items: center;
gap: 16px;
padding: 24px;
border: 1px solid #e6e8ec;
border-radius: 12px;
background: var(--bg);
box-shadow: 0 2px 8px rgba(16, 24, 40, 0.06);
margin: 16px 0;
}
.dl-card__icon-wrap {
flex: 0 0 auto;
width: 56px;
height: 56px;
border-radius: 12px;
display: grid;
place-items: center;
background: color-mix(in srgb, var(--accent) 8%, transparent);
background: rgba(94, 59, 255, 0.08);
}
.dl-card__icon {
width: 24px;
height: 24px;
color: var(--accent);
}
.dl-card__content {
flex: 1 1 auto;
min-width: 0;
}
.dl-card__title {
margin: 0 0 6px 0;
font-size: 20px;
line-height: 1.2;
color: #0f172a;
}
.dl-card__desc {
margin: 0;
color: #334155;
font-size: 16px;
}
.dl-card__meta {
margin-top: 6px;
color: #64748b;
font-size: 12px;
}
.dl-card__cta {
flex: 0 0 auto;
}
.dl-btn {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 10px 14px;
border-radius: 10px;
border: 1px solid var(--accent);
background: var(--accent);
color: #fff;
font-size: 14px;
font-weight: 600;
text-decoration: none;
transition: filter 0.15s ease;
white-space: nowrap;
}
.dl-btn:hover {
filter: brightness(0.96);
}
.dl-btn__icon {
width: 18px;
height: 18px;
display: inline-block;
}
@media (max-width: 640px) {
.dl-card {
align-items: flex-start;
gap: 12px;
padding: 16px;
flex-wrap: wrap;
}
.dl-card__cta {
width: 100%;
margin-top: 8px;
}
}
/* ==========================================================================
AN Theme Shared Styles
Version: 1.1.0
Description: Shared CSS variables and common styles for all AN Kajabi themes
========================================================================== */
/* Import Design Tokens - All colors, spacing, and typography variables */
/* Inlined from _tokens.css */
/* ==========================================================================
AN Theme Design Tokens
Version: 1.0.0
This file contains all design tokens (colors, spacing, typography, etc.)
for the AN Kajabi themes. Marketing teams can update these values without
touching any other CSS files.
HOW TO USE:
1. Update color values under "Brand Colors" section
2. Adjust spacing values under "Spacing System" section
3. Modify typography sizes under "Typography Scale" section
4. Save and re-export themes
========================================================================== */
:root {
/* ==========================================================================
BRAND COLORS
Update these to change colors across the entire theme
========================================================================== */
/* Primary Brand Colors */
--c-brand-600: #5e3bff; /* Primary purple - Main CTAs, links, buttons */
--c-brand-800: #4025e0; /* Dark purple - Hover states, active elements */
--c-brand-100: #e9e6ff; /* Light purple - Backgrounds, subtle fills */
/* Accent Colors */
--c-accent-teal: #18d5e4; /* Teal - Success states, highlights */
--c-accent-peach: #ff8bcb; /* Peach/Pink - Emotional CTAs, alerts */
--c-accent-lemon: #ffe86b; /* Yellow - Badges, special offers */
/* Text Colors */
--c-ink-900: #1b1b29; /* Darkest - Main headings */
--c-ink-700: #323346; /* Dark - Body text */
--c-ink-500: #6e6f7b; /* Medium - Secondary text, captions */
--c-white: #ffffff; /* White - Reversed text, backgrounds */
/* Background Colors */
--c-bg-light: #fafafa; /* Light gray - Section backgrounds */
--c-bg-lavender: #e9e6ff; /* Lavender - Hero backgrounds */
/* Gradients */
--g-brand: linear-gradient(135deg, #6757ff 0%, #7b4dff 100%);
--g-purple-dark: linear-gradient(135deg, #5e3bff 0%, #4025e0 100%);
--g-purple-pink: linear-gradient(135deg, #5e3bff 0%, #ff8bcb 100%);
--g-teal-blue: linear-gradient(135deg, #18d5e4 0%, #5e3bff 100%);
--g-warm-sunset: linear-gradient(135deg, #ff8bcb 0%, #ffe86b 100%);
/* ==========================================================================
SPACING SYSTEM
Based on 8-point grid - Update these to change spacing across the theme
========================================================================== */
--space-xs: 4px; /* Extra small - Tight spacing */
--space-sm: 8px; /* Small - Compact elements */
--space-md: 16px; /* Medium - Default spacing */
--space-lg: 24px; /* Large - Section padding */
--space-xl: 32px; /* Extra large - Major sections */
--space-2xl: 64px; /* 2X large - Hero sections */
--space-3xl: 96px; /* 3X large - Page sections */
--space-4xl: 128px; /* 4X large - Major breaks */
/* ==========================================================================
TYPOGRAPHY SCALE
Font sizes for consistent hierarchy
========================================================================== */
--fs-display: 3rem; /* 48px - Hero headlines */
--fs-h1: 2.5rem; /* 40px - Page titles */
--fs-h2: 1.875rem; /* 30px - Section headings */
--fs-h3: 1.5rem; /* 24px - Sub-sections */
--fs-h4: 1.25rem; /* 20px - Subheadings */
--fs-h5: 1.125rem; /* 18px - Minor headings */
--fs-h6: 1rem; /* 16px - Label headings */
--fs-body-lg: 1.125rem; /* 18px - Lead paragraphs */
--fs-body: 1rem; /* 16px - Regular text */
--fs-caption: 0.875rem; /* 14px - Small text */
--fs-tiny: 0.75rem; /* 12px - Fine print */
/* Font Families */
--font-sans:
Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial,
sans-serif;
--font-serif: Merriweather, Georgia, "Times New Roman", serif;
--font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
/* Font Weights */
--fw-light: 300;
--fw-normal: 400;
--fw-medium: 500;
--fw-semibold: 600;
--fw-bold: 700;
/* Line Heights */
--lh-tight: 1.25;
--lh-normal: 1.5;
--lh-relaxed: 1.75;
/* ==========================================================================
BORDERS & RADIUS
Corner radius values for consistency
========================================================================== */
--radius-sm: 8px; /* Small elements - inputs, tags */
--radius-md: 16px; /* Medium - cards, containers */
--radius-lg: 24px; /* Large - hero sections */
--radius-xl: 32px; /* Extra large - special sections */
--radius-pill: 9999px; /* Full round - buttons, pills */
/* Border Colors */
--border-light: rgba(0, 0, 0, 0.04);
--border-medium: rgba(0, 0, 0, 0.08);
--border-dark: rgba(0, 0, 0, 0.12);
/* ==========================================================================
SHADOWS & EFFECTS
Elevation and depth effects
========================================================================== */
--shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
--shadow-card: 0 4px 12px rgba(0, 0, 0, 0.05);
--shadow-media: 0 12px 24px rgba(0, 0, 0, 0.08);
--shadow-lg: 0 20px 40px rgba(0, 0, 0, 0.1);
/* Glow Effects */
--glow-brand: 0 0 12px rgba(105, 78, 255, 0.25);
--glow-brand-lg: 0 0 24px rgba(105, 78, 255, 0.35);
/* Blur Effects */
--blur-sm: 4px;
--blur-md: 8px;
--blur-lg: 16px;
/* ==========================================================================
MOTION SCALE SYSTEM
Standardized animation timing and easing functions
========================================================================== */
/* Motion Durations - Single source of truth for all animations */
--motion-duration-instant: 100ms; /* Micro-interactions, hover states */
--motion-duration-fast: 200ms; /* Quick transitions, fades */
--motion-duration-base: 300ms; /* Standard animations, slides */
--motion-duration-slow: 500ms; /* Deliberate animations, reveals */
--motion-duration-deliberate: 800ms; /* Major transitions, page changes */
/* Motion Easing Functions - Consistent across all animations */
--motion-ease-standard: cubic-bezier(
0.4,
0,
0.2,
1
); /* Default for most animations */
--motion-ease-decelerate: cubic-bezier(
0,
0,
0.2,
1
); /* Enter/fade in animations */
--motion-ease-accelerate: cubic-bezier(
0.4,
0,
1,
1
); /* Exit/fade out animations */
--motion-ease-spring: cubic-bezier(
0.175,
0.885,
0.32,
1.275
); /* Playful bounce effects */
--motion-ease-linear: linear; /* Continuous animations */
/* Legacy Animation Variables (for backward compatibility) */
--ease-spring: var(--motion-ease-spring);
--ease-out: var(--motion-ease-decelerate);
--ease-in-out: var(--motion-ease-standard);
--duration-fast: var(--motion-duration-fast);
--duration-base: var(--motion-duration-base);
--duration-slow: var(--motion-duration-slow);
--duration-slower: var(--motion-duration-deliberate);
/* ==========================================================================
LAYOUT
Container widths and breakpoints
========================================================================== */
--container-sm: 640px;
--container-md: 768px;
--container-lg: 1024px;
--container-xl: 1280px;
--container-2xl: 1536px;
/* Z-index Scale */
--z-dropdown: 50;
--z-header: 100;
--z-sticky: 200;
--z-overlay: 300;
--z-modal: 1000;
--z-toast: 1100;
/* ==========================================================================
LEGACY MAPPINGS
These maintain compatibility with existing code
DO NOT EDIT unless updating throughout the codebase
========================================================================== */
/* Legacy Color Mappings */
--an-navy: var(--c-brand-600);
--an-teal: var(--c-accent-teal);
--an-coral: var(--c-accent-peach);
--an-gold: var(--c-accent-lemon);
--an-plum: var(--c-brand-800);
--an-peach: var(--c-brand-100);
--an-white: var(--c-white);
--an-grey: #f8f9fa;
--an-slate: var(--c-ink-700);
--an-primary: var(--c-brand-600);
--an-secondary: var(--c-accent-teal);
--an-text-dark: var(--c-ink-900);
--an-text-medium: var(--c-ink-500);
--an-bg-light: var(--c-brand-100);
/* Legacy Spacing Mappings */
--an-space-xs: var(--space-xs);
--an-space-sm: var(--space-sm);
--an-space-md: var(--space-md);
--an-space-lg: var(--space-lg);
--an-space-xl: var(--space-xl);
--an-space-2xl: 48px;
--an-space-3xl: var(--space-2xl);
/* Legacy Typography Mappings */
--an-font-xs: 0.75rem;
--an-font-sm: var(--fs-caption);
--an-font-base: var(--fs-body);
--an-font-lg: var(--fs-body-lg);
--an-font-xl: 1.25rem;
--an-font-2xl: 1.5rem;
--an-font-3xl: var(--fs-h2);
--an-font-4xl: var(--fs-h1);
--an-font-display: var(--fs-display);
/* Legacy Border Mappings */
--an-border: var(--border-light);
--an-radius-sm: var(--radius-sm);
--an-radius-md: var(--radius-md);
--an-radius-lg: var(--radius-lg);
--an-radius-full: var(--radius-pill);
/* Legacy Shadow Mappings */
--an-shadow-sm: var(--shadow-sm);
--an-shadow-md: var(--shadow-card);
--an-shadow-lg: var(--shadow-media);
--an-shadow-xl: 0 20px 25px -5px rgba(26, 45, 78, 0.1);
--an-shadow-2xl: 0 25px 50px -12px rgba(26, 45, 78, 0.25);
/* Legacy Transition Mappings */
--an-transition-fast: var(--duration-fast) var(--ease-out);
--an-transition-base: var(--duration-base) var(--ease-out);
--an-transition-slow: var(--duration-slow) var(--ease-out);
/* Additional Legacy Variables */
--an-primary-gradient: linear-gradient(135deg, #5e3bff 0%, #8b7bff 100%);
--an-muted: #d4d4d8;
--an-ink-normal: #0a0a0b;
--an-ink-light: #71717a;
--an-ink-lighter: #a1a1aa;
--an-border-light: #f4f4f5;
--an-lavender: #e9e6ff;
--an-text-light: var(--c-ink-500);
--an-text-white: var(--c-white);
--an-bg-white: var(--c-white);
--an-bg-lighter: var(--an-lavender);
--an-font-display: 3rem;
--an-space-4xl: 96px;
--an-font-normal: 400;
--an-font-medium: 500;
--an-font-semibold: 600;
--an-font-bold: 700;
--an-leading-tight: 1.25;
--an-leading-normal: 1.5;
--an-leading-relaxed: 1.75;
--an-container-sm: 640px;
--an-container-md: 768px;
--an-container-lg: 1024px;
--an-container-xl: 1280px;
--an-container-2xl: 1536px;
--an-z-dropdown: 50;
--an-z-header: 100;
--an-z-sticky: 200;
--an-z-overlay: 300;
--an-z-modal: 1000;
--an-radius-xl: 24px;
--an-radius-2xl: 32px;
--an-blur-sm: 4px;
--an-blur-md: 8px;
--an-blur-lg: 16px;
--an-blur-xl: 24px;
--an-ease-out: cubic-bezier(0.4, 0, 0.2, 1);
--an-ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);
}
/* ==========================================================================
DARK MODE TOKENS (Optional - uncomment to enable)
========================================================================== */
/*
@media (prefers-color-scheme: dark) {
:root {
--c-ink-900: #FFFFFF;
--c-ink-700: #E4E4E7;
--c-ink-500: #A1A1AA;
--c-bg-light: #1B1B29;
--c-white: #18181B;
--border-light: rgba(255, 255, 255, 0.1);
--border-medium: rgba(255, 255, 255, 0.2);
}
}
*/
/* End of _tokens.css */
/* Table of Contents
1. Typography Base
2. Common Button Styles
3. Shared Navigation Styles
4. Shared Footer Styles
5. Utility Classes
6. Responsive Helpers
*/
/* Note: All CSS variables have been moved to _tokens.css for easier marketing team access */
/* ==========================================================================
1. Typography Base
========================================================================== */
body {
font-family: var(--font-sans);
color: var(--c-ink-700);
line-height: 1.6;
font-weight: 400;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
text-rendering: optimizeLegibility;
}
/* Performance: reduce expensive blur/transparency on mobile */
@media (max-width: 768px) {
/* Trim glassmorphism for mobile paint performance */
.an-cta__eyebrow {
backdrop-filter: none !important;
}
.nav-transparent-pill--scrolled {
backdrop-filter: none !important;
background: rgba(255, 255, 255, 0.98) !important;
}
}
/* Respect reduced motion by disabling backdrop blur */
@media (prefers-reduced-motion: reduce) {
.an-cta__eyebrow,
.nav-transparent-pill--scrolled {
backdrop-filter: none !important;
}
}
/* Serif headings for warmth and authority */
h1,
h2 {
font-family: var(--font-serif);
color: var(--c-ink-900);
line-height: 1.3;
font-weight: 400; /* Regular weight for serif readability */
letter-spacing: -0.02em; /* Tighten tracking slightly */
}
/* Sans-serif for smaller headings */
h3,
h4,
h5,
h6 {
font-family: var(--font-sans);
color: var(--c-ink-900);
line-height: 1.4;
font-weight: 500; /* Medium weight for sans headings */
}
/* Typography scale classes */
.text-display {
font-size: var(--fs-display);
}
.text-h1 {
font-size: var(--fs-h1);
}
.text-h2 {
font-size: var(--fs-h2);
}
.text-body-lg {
font-size: var(--fs-body-lg);
}
.text-body {
font-size: var(--fs-body);
}
.text-caption {
font-size: var(--fs-caption);
}
/* Subtitle styles for elegant contrast */
.hero__subtitle,
.hero-subtitle,
[class*="subtitle"] {
font-weight: var(--fw-light);
color: var(--c-ink-500);
line-height: 1.6;
letter-spacing: 0.01em;
}
/* Pull quotes and emphasis with italics */
.pull-quote,
blockquote,
.testimonial-quote {
font-style: italic;
font-family: var(--font-serif);
color: var(--c-ink-700);
line-height: 1.5;
letter-spacing: -0.01em;
}
/* Lead paragraphs */
.lead,
.text-lead {
font-size: var(--fs-body-lg);
font-weight: var(--fw-light);
line-height: 1.7;
color: var(--c-ink-700);
}
/* Optimal reading width for text-heavy content */
.prose,
.content-body,
.blog-post-body,
.article-content,
[class*="post__body"] {
max-width: 65ch; /* ~50-75 characters per line */
margin-left: auto;
margin-right: auto;
}
/* Wider container for mixed content */
.content-container {
max-width: 42rem; /* ~672px */
margin-left: auto;
margin-right: auto;
}
/* Blog and article specific */
.blog-post-body p,
.article-content p {
margin-bottom: 1.5rem;
}
.blog-post-body h2,
.blog-post-body h3,
.article-content h2,
.article-content h3 {
margin-top: 2.5rem;
margin-bottom: 1rem;
}
a {
color: var(--c-brand-600);
text-decoration: none;
transition: color var(--an-transition-base);
}
a:hover {
color: var(--c-brand-800);
}
/* ==========================================================================
3. Common Button Styles
========================================================================== */
/* Primary Button - Brand Gradient */
.btn-primary,
.btn--primary,
.btn.btn-primary {
background: var(--g-brand);
color: var(--c-white);
border: none;
border-radius: var(--radius-pill);
padding: 12px 32px;
font-weight: 500;
font-size: var(--fs-body);
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.25) inset,
0 4px 8px rgba(94, 59, 255, 0.35);
transition:
transform var(--motion-duration-fast) var(--motion-ease-standard),
box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
text-transform: none;
letter-spacing: normal;
}
.btn-primary:hover,
.btn--primary:hover,
.btn.btn-primary:hover {
transform: translateY(-2px);
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.25) inset,
0 8px 16px rgba(94, 59, 255, 0.4);
background: var(--g-brand);
color: var(--c-white);
}
/* Secondary Button */
.btn-secondary,
.btn--secondary,
.btn.btn-secondary {
background: var(--c-white);
color: var(--c-brand-600);
border: 1px solid var(--c-brand-100);
border-radius: 12px;
padding: 10px 24px;
font-weight: 500;
font-size: var(--fs-body);
transition: all var(--motion-duration-fast) var(--motion-ease-standard);
text-transform: none;
letter-spacing: normal;
}
.btn-secondary:hover,
.btn--secondary:hover,
.btn.btn-secondary:hover {
background: var(--c-brand-100);
border-color: var(--c-brand-600);
color: var(--c-brand-600);
}
/* Ghost Button */
.btn-ghost {
background: transparent;
color: var(--c-brand-600);
border: 1px solid currentColor;
border-radius: 12px;
padding: 10px 24px;
font-weight: 500;
transition: all var(--motion-duration-fast) var(--motion-ease-standard);
}
.btn-ghost:hover {
background: var(--c-brand-600);
color: var(--c-white);
}
/* Button size variations */
.btn-sm {
padding: 8px 20px;
font-size: var(--fs-caption);
}
.btn-lg {
padding: 16px 40px;
font-size: var(--fs-body-lg);
}
/* All buttons base reset */
.btn {
display: inline-block;
text-align: center;
text-decoration: none;
cursor: pointer;
user-select: none;
line-height: 1.5;
transition: all var(--motion-duration-fast) var(--motion-ease-standard);
}
.btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none !important;
}
/* ==========================================================================
4. Shared Navigation Styles
========================================================================== */
.header {
background-color: var(--c-white);
border-bottom: 1px solid var(--an-border);
}
.header__nav .link-list__link {
color: var(--c-ink-900);
font-weight: 500;
position: relative;
transition: color var(--an-transition-base);
}
.header__nav .link-list__link:hover {
color: var(--c-brand-600);
}
/* Underline animation */
.header__nav .link-list__link::after {
content: "";
position: absolute;
width: 0;
height: 2px;
bottom: -4px;
left: 50%;
background-color: var(--c-brand-600);
transition: all var(--an-transition-base);
transform: translateX(-50%);
}
.header__nav .link-list__link:hover::after {
width: 100%;
}
/* Mobile Navigation */
.header__content--mobile {
background-color: #ffffff;
}
/* Removed duplicate mobile link styles - see updated version below */
/* ==========================================================================
5. Shared Footer Styles
========================================================================== */
.footer {
background-color: var(--c-ink-900);
color: var(--c-white);
padding: var(--space-2xl) 0 var(--space-xl);
}
.footer__title {
color: var(--c-white);
margin-bottom: var(--space-lg);
}
.footer__link {
color: rgba(255, 255, 255, 0.8);
transition: color var(--an-transition-base);
}
.footer__link:hover {
color: var(--c-accent-teal);
}
.footer__social-icon {
background-color: rgba(255, 255, 255, 0.1);
border-radius: var(--radius-pill);
width: 40px;
height: 40px;
display: inline-flex;
align-items: center;
justify-content: center;
transition: all var(--an-transition-base);
}
.footer__social-icon:hover {
background-color: var(--c-brand-600);
transform: translateY(-2px);
}
/* ==========================================================================
6. Utility Classes
========================================================================== */
/* Text color utilities - New brand colors */
.text-brand {
color: var(--c-brand-600) !important;
}
.text-brand-dark {
color: var(--c-brand-800) !important;
}
.text-teal {
color: var(--c-accent-teal) !important;
}
.text-peach {
color: var(--c-accent-peach) !important;
}
.text-lemon {
color: var(--c-accent-lemon) !important;
}
.text-ink-900 {
color: var(--c-ink-900) !important;
}
.text-ink-700 {
color: var(--c-ink-700) !important;
}
.text-ink-500 {
color: var(--c-ink-500) !important;
}
/* Legacy color mappings */
.text-navy {
color: var(--c-brand-600) !important;
}
.text-coral {
color: var(--c-accent-peach) !important;
}
.text-gold {
color: var(--c-accent-lemon) !important;
}
.text-plum {
color: var(--c-brand-800) !important;
}
/* Background color utilities - New brand colors */
.bg-brand {
background-color: var(--c-brand-600) !important;
}
.bg-brand-light {
background-color: var(--c-brand-100) !important;
}
.bg-brand-dark {
background-color: var(--c-brand-800) !important;
}
.bg-teal {
background-color: var(--c-accent-teal) !important;
}
.bg-peach {
background-color: var(--c-accent-peach) !important;
}
.bg-lemon {
background-color: var(--c-accent-lemon) !important;
}
.bg-white {
background-color: var(--c-white) !important;
}
/* Legacy background mappings */
.bg-navy {
background-color: var(--c-brand-600) !important;
}
.bg-coral {
background-color: var(--c-accent-peach) !important;
}
.bg-gold {
background-color: var(--c-accent-lemon) !important;
}
.bg-grey {
background-color: #f8f9fa !important;
}
/* Spacing utilities */
.mt-0 {
margin-top: 0 !important;
}
.mt-1 {
margin-top: var(--an-space-sm) !important;
}
.mt-2 {
margin-top: var(--an-space-md) !important;
}
.mt-3 {
margin-top: var(--an-space-lg) !important;
}
.mt-4 {
margin-top: var(--an-space-xl) !important;
}
.mb-0 {
margin-bottom: 0 !important;
}
.mb-1 {
margin-bottom: var(--an-space-sm) !important;
}
.mb-2 {
margin-bottom: var(--an-space-md) !important;
}
.mb-3 {
margin-bottom: var(--an-space-lg) !important;
}
.mb-4 {
margin-bottom: var(--an-space-xl) !important;
}
/* ==========================================================================
7. Responsive Helpers
========================================================================== */
@media (max-width: 767px) {
.hidden--mobile {
display: none !important;
}
:root {
--an-font-4xl: 1.875rem; /* 30px on mobile */
--an-font-3xl: 1.5rem; /* 24px on mobile */
}
}
@media (min-width: 768px) and (max-width: 991px) {
.hidden--tablet {
display: none !important;
}
}
@media (min-width: 992px) {
.hidden--desktop {
display: none !important;
}
}
/* ==========================================================================
8. Book Section
========================================================================== */
.section--book {
padding: var(--an-space-xl) 0;
background-color: var(--an-grey);
overflow: hidden;
}
/* Top text styling */
.book__top-text {
text-align: center;
font-size: 14px;
text-transform: uppercase;
letter-spacing: 2px;
color: var(--an-slate);
margin-bottom: var(--an-space-lg);
font-weight: 500;
}
/* Logo row */
.book__logos {
display: flex;
justify-content: center;
align-items: center;
gap: var(--an-space-xl);
margin-bottom: var(--an-space-xl);
flex-wrap: wrap;
}
.book__logo {
opacity: 0.6;
transition: all var(--ease);
}
.book__logo:hover {
opacity: 1;
transform: scale(1.05);
}
.book__logo img {
max-height: 30px;
width: auto;
filter: grayscale(100%);
transition: filter var(--ease);
}
.book__logo:hover img {
filter: grayscale(0%) brightness(1.1);
}
/* Main content layout */
.book__content {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: var(--an-space-xl);
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
/* Quote sections */
.book__quote {
padding: var(--an-space-lg);
}
.book__quote--left {
text-align: right;
}
.book__quote--right {
text-align: left;
}
/* Star ratings */
.book__stars {
display: flex;
gap: 4px;
margin-bottom: var(--an-space-md);
}
.book__quote--left .book__stars {
justify-content: flex-end;
}
.book__quote--right .book__stars {
justify-content: flex-start;
}
.book__star {
color: var(--c-brand);
width: 16px;
height: 16px;
}
/* Quote text */
.book__quote-text {
font-size: 18px;
line-height: 1.6;
color: var(--c-text-secondary);
margin: 0 0 var(--an-space-lg) 0;
font-style: italic;
position: relative;
}
/* Author section */
.book__author {
display: flex;
align-items: center;
gap: var(--an-space-md);
}
.book__quote--left .book__author {
justify-content: flex-end;
}
.book__quote--right .book__author {
justify-content: flex-start;
}
.book__author-image {
width: 48px;
height: 48px;
border-radius: 50%;
object-fit: cover;
}
.book__author-info {
text-align: left;
}
.book__quote--left .book__author-info {
text-align: right;
}
.book__author-name {
font-weight: 600;
color: var(--c-brand);
margin-bottom: 2px;
}
.book__author-bio {
font-size: 14px;
color: var(--an-text-medium);
line-height: 1.4;
}
/* Book image wrapper */
.book__image-wrapper {
position: relative;
display: flex;
justify-content: center;
align-items: center;
}
.book__image {
max-width: 320px;
width: 100%;
height: auto;
border-radius: var(--radius-lg);
box-shadow:
0 20px 60px rgba(94, 59, 255, 0.15),
0 0 0 1px rgba(94, 59, 255, 0.1);
transition: transform var(--ease);
}
.book__image:hover {
transform: translateY(-5px);
box-shadow:
0 25px 70px rgba(94, 59, 255, 0.2),
0 0 0 1px rgba(94, 59, 255, 0.15);
}
/* Badge */
.book__badge {
position: absolute;
top: -20px;
right: -20px;
background: var(--g-brand);
color: var(--c-white);
padding: var(--an-space-sm) var(--an-space-md);
border-radius: 50%;
font-size: 12px;
font-weight: 700;
text-align: center;
text-transform: uppercase;
line-height: 1.2;
width: 120px;
height: 120px;
display: flex;
align-items: center;
justify-content: center;
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.25) inset,
0 4px 12px rgba(94, 59, 255, 0.35);
}
/* Mobile responsiveness */
@media (max-width: 991px) {
.book__content {
grid-template-columns: 1fr;
gap: var(--an-space-xl);
}
.book__quote {
text-align: center !important;
}
.book__stars {
justify-content: center !important;
}
.book__author {
justify-content: center !important;
}
.book__author-info {
text-align: left !important;
}
.book__image-wrapper {
order: -1;
margin-bottom: var(--an-space-xl);
}
.book__image {
max-width: 280px;
}
.book__badge {
width: 100px;
height: 100px;
font-size: 11px;
top: -15px;
right: -15px;
}
}
@media (max-width: 767px) {
.book__logos {
gap: var(--an-space-lg);
}
.book__logo img {
max-height: 24px;
}
.book__quote-text {
font-size: 16px;
}
.book__image {
max-width: 240px;
}
}
/* Book CTA Button */
.book__cta-wrapper {
text-align: center;
margin-top: var(--an-space-3xl);
}
.book__cta {
display: inline-flex;
align-items: center;
padding: 14px 32px;
font-size: 16px;
font-weight: 600;
text-decoration: none;
border-radius: var(--radius-pill);
background-color: var(--c-brand);
color: var(--c-white);
transition: all var(--ease);
position: relative;
}
.book__cta--gradient {
background: var(--g-brand);
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.25) inset,
0 4px 8px rgba(94, 59, 255, 0.35);
}
.book__cta:hover {
transform: translateY(-2px);
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.25) inset,
0 8px 16px rgba(94, 59, 255, 0.4);
}
@media (max-width: 767px) {
.book__cta {
font-size: 14px;
padding: 12px 24px;
}
}
/* ==========================================================================
9. Book Buy Section
========================================================================== */
.book-buy {
border-top: 1px solid var(--an-border);
border-bottom: 1px solid var(--an-border);
}
/* Smooth logo transitions */
.book-buy__retailer {
position: relative;
}
.book-buy__retailer::after {
content: "";
position: absolute;
bottom: -5px;
left: 50%;
transform: translateX(-50%);
width: 0;
height: 2px;
background-color: var(--an-coral);
transition: width var(--motion-duration-base) var(--motion-ease-standard);
}
.book-buy__retailer:hover::after {
width: 80%;
}
/* Better mobile wrapping */
@media (max-width: 480px) {
.book-buy__wrapper {
flex-direction: column;
gap: 20px;
}
.book-buy__divider {
width: 60px;
height: 1px !important;
margin: 0 auto !important;
}
}
/* ==========================================================================
10. Enhanced Footer Additions
========================================================================== */
/* Column title underline accent */
.footer__column-title {
position: relative;
padding-bottom: 12px;
margin-bottom: 20px;
}
.footer__column-title::after {
content: "";
position: absolute;
left: 0;
bottom: 0;
width: 30px;
height: 2px;
background-color: var(--an-coral);
}
/* Center align title underline on mobile */
@media (max-width: 767px) {
.footer__column[style*="text-align: center"] .footer__column-title::after {
left: 50%;
transform: translateX(-50%);
}
}
/* Logo column special styling */
.footer__logo + .footer__text {
opacity: 0.85;
font-style: italic;
}
/* Bottom bar link separator styling */
.footer__bottom-links a + a::before {
content: " | ";
margin: 0 8px;
color: var(--an-border);
}
/* ==========================================================================
11. Modern Navigation - Clean White/Blue Design
========================================================================== */
/* Modern header styling */
.header {
background-color: #ffffff;
box-shadow: none;
border-bottom: 1px solid #f0f0f0;
transition: all var(--motion-duration-base) var(--motion-ease-standard);
padding: 16px 0;
}
.header--fixed {
box-shadow: 0 1px 0 rgba(0, 0, 0, 0.05);
}
/* Container alignment */
.header__container {
align-items: center;
min-height: 48px;
}
/* Logo styling */
.header__logo {
margin-right: 48px;
}
.header__logo img {
max-height: 32px;
width: auto;
}
/* Navigation menu styling - Kajabi specific selectors */
.header .link-list {
display: flex;
align-items: center;
gap: 32px;
}
.header .link-list__item {
position: relative;
padding: 0;
}
/* Main navigation links */
.header .link-list__link,
.header__content--desktop .link-list__link {
color: #1a1a1a !important;
font-weight: 400;
font-size: 16px;
padding: 8px 0 !important;
margin: 0 !important;
border-radius: 0;
transition: all var(--motion-duration-base) var(--motion-ease-standard);
position: relative;
text-decoration: none !important;
display: inline-block;
background: none !important;
border: none !important;
border-bottom: none !important;
}
/* Remove any potential Kajabi default underlines */
.header .link-list__link,
.header__content--desktop .link-list__link,
.header .link-list__link span,
.header__content--desktop .link-list__link span {
text-decoration: none !important;
border-bottom: none !important;
background-image: none !important; /* Remove any gradient underlines */
}
/* Remove any default underlines and add custom hover effect */
.header .link-list__link::after,
.header__content--desktop .link-list__link::after {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--c-brand-600);
transition: width var(--motion-duration-base) var(--motion-ease-standard);
}
.header .link-list__link:hover,
.header__content--desktop .link-list__link:hover {
color: var(--c-brand-600) !important;
background: none !important;
text-decoration: none !important;
border-bottom: none !important;
}
.header .link-list__link:hover::after,
.header__content--desktop .link-list__link:hover::after {
width: 100%;
}
/* Dropdown trigger styling */
.header .dropdown__trigger {
color: #1a1a1a !important;
font-weight: 400;
font-size: 16px;
padding: 8px 0 !important;
background: none !important;
border: none;
cursor: pointer;
display: inline-flex;
align-items: center;
gap: 6px;
transition: color var(--motion-duration-fast) var(--motion-ease-standard);
text-decoration: none !important;
position: relative;
}
/* Dropdown hover effect */
.header .dropdown__trigger::before {
content: "";
position: absolute;
bottom: 0;
left: 0;
width: 0;
height: 2px;
background-color: var(--c-brand-600);
transition: width var(--motion-duration-base) var(--motion-ease-standard);
}
.header .dropdown__trigger:hover {
color: var(--c-brand-600) !important;
background: none !important;
text-decoration: none !important;
}
.header .dropdown__trigger:hover::before {
width: calc(100% - 16px); /* Account for the arrow */
}
.header .dropdown__trigger::after {
content: "▼";
font-size: 10px;
transition: transform var(--motion-duration-fast) var(--motion-ease-standard);
}
.header .dropdown.active .dropdown__trigger::after {
transform: rotate(180deg);
}
/* Dropdown menu styling */
.header .dropdown__menu {
background-color: #ffffff;
border: 1px solid #f0f0f0;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
border-radius: 8px;
padding: 8px 0;
min-width: 200px;
margin-top: 8px;
}
.header .dropdown__item a {
color: #1a1a1a !important;
padding: 12px 20px !important;
font-size: 15px;
display: block;
text-decoration: none !important;
transition: all var(--motion-duration-base) var(--motion-ease-standard);
}
.header .dropdown__item a:hover {
color: #666666 !important;
background-color: #f8f8f8;
}
/* User menu styling */
.header .user__login a {
color: #1a1a1a !important;
font-weight: 400;
font-size: 16px;
padding: 8px 16px !important;
text-decoration: none !important;
transition: color var(--motion-duration-fast) var(--motion-ease-standard);
}
.header .user__login a:hover {
color: #666666 !important;
}
/* CTA Button - Blue rounded button */
.header .btn,
.header__block--cta .btn {
background-color: #0066ff !important;
color: #ffffff !important;
border: none !important;
border-radius: 8px !important;
padding: 12px 24px !important;
font-size: 16px !important;
font-weight: 500 !important;
text-decoration: none !important;
transition: all var(--motion-duration-fast) var(--motion-ease-standard) !important;
display: inline-block !important;
text-align: center !important;
cursor: pointer !important;
box-shadow: none !important;
}
.header .btn:hover,
.header__block--cta .btn:hover {
background-color: #0052cc !important;
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0, 102, 255, 0.2) !important;
}
/* Block spacing adjustments */
.header__block {
margin: 0;
}
.header__block--menu {
flex-grow: 1;
margin-right: auto;
}
.header__block--user {
margin-left: 24px;
}
.header__block--cta {
margin-left: 24px;
}
/* ==========================================================================
12. Mobile Navigation - Full Implementation
========================================================================== */
/* Mobile Menu Toggle - Clean hamburger */
.hamburger {
width: 32px;
height: 32px;
position: relative;
cursor: pointer;
z-index: 1001;
transition: transform var(--motion-duration-base) var(--motion-ease-standard);
margin-left: 16px;
}
.hamburger__slices {
width: 24px;
height: 20px;
position: relative;
margin: auto;
top: 50%;
transform: translateY(-50%);
}
.hamburger__slice {
background-color: #1a1a1a;
height: 2px;
width: 100%;
border-radius: 2px;
transition: all var(--motion-duration-base) var(--motion-ease-standard);
position: absolute;
left: 0;
}
.hamburger--slice-1 {
top: 0;
}
.hamburger--slice-2 {
top: 6px;
}
.hamburger--slice-3 {
top: 12px;
}
.hamburger--slice-4 {
bottom: 0;
}
/* Mobile Menu Open State */
.header__content--mobile-open .hamburger__slice {
background-color: #1a1a1a;
}
.header__content--mobile-open .hamburger--slice-1 {
transform: rotate(45deg) translateY(7px) translateX(7px);
}
.header__content--mobile-open .hamburger--slice-2 {
opacity: 0;
}
.header__content--mobile-open .hamburger--slice-3 {
opacity: 0;
}
.header__content--mobile-open .hamburger--slice-4 {
transform: rotate(-45deg) translateY(-7px) translateX(7px);
}
/* Mobile Menu Container */
.header__content--mobile {
position: fixed;
top: 0;
right: 0;
width: var(--an-mobile-menu-width, 85%);
max-width: var(--an-mobile-menu-max, 400px);
height: 100vh;
background-color: #ffffff;
z-index: var(--an-z-mobile-menu, 999);
transform: translateX(100%);
transition: transform var(--an-transition-smooth);
overflow-y: auto;
padding: 80px 30px 40px;
box-shadow: -10px 0 30px rgba(0, 0, 0, 0.1);
}
.header__content--mobile.active {
transform: translateX(0);
}
/* Legacy support for old class name */
.header__content--mobile-open .header__content--mobile {
transform: translateX(0);
}
/* Mobile menu backdrop */
.header__mobile-backdrop {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.5);
opacity: 0;
visibility: hidden;
transition:
opacity var(--an-transition-base),
visibility var(--an-transition-base);
z-index: var(--an-z-backdrop, 998);
}
.header__mobile-backdrop.active {
opacity: 1;
visibility: visible;
}
/* Mobile close button */
.header__mobile-close {
position: absolute;
top: 20px;
right: 20px;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
}
.header__mobile-close .hamburger {
width: 24px;
height: 24px;
}
.header__mobile-close .hamburger__slice {
background-color: var(--an-slate);
}
/* Close button X animation */
.header__mobile-close .hamburger--slice-1 {
transform: rotate(45deg) translateY(7px) translateX(7px);
}
.header__mobile-close .hamburger--slice-2,
.header__mobile-close .hamburger--slice-3 {
opacity: 0;
}
.header__mobile-close .hamburger--slice-4 {
transform: rotate(-45deg) translateY(-7px) translateX(7px);
}
/* Mobile Navigation Links */
.header__content--mobile .link-list {
display: flex;
flex-direction: column;
gap: 0;
margin-top: 40px;
}
.header__content--mobile .link-list__item {
width: 100%;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
}
.header__content--mobile .link-list__link {
color: var(--an-slate) !important;
padding: 20px 0 !important;
font-size: 18px !important;
font-weight: 400;
display: block;
text-decoration: none !important;
transition: all var(--motion-duration-base) var(--motion-ease-standard);
position: relative;
}
.header__content--mobile .link-list__link:hover {
color: var(--an-teal) !important;
padding-left: 10px !important;
}
/* Mobile Dropdown */
.header__content--mobile .dropdown__trigger {
color: var(--an-slate) !important;
padding: 20px 0 !important;
font-size: 18px !important;
width: 100%;
display: flex;
justify-content: space-between;
align-items: center;
background: none !important;
border: none;
}
.header__content--mobile .dropdown__trigger::after {
content: "+";
font-size: 20px;
font-weight: 300;
transition: transform var(--motion-duration-base) var(--motion-ease-standard);
color: var(--an-teal);
}
.header__content--mobile .dropdown.active .dropdown__trigger::after {
transform: rotate(45deg);
}
.header__content--mobile .dropdown__menu {
position: static;
background-color: rgba(0, 0, 0, 0.02);
border: none;
box-shadow: none;
padding: 0;
margin: 0;
}
.header__content--mobile .dropdown__item {
border-top: 1px solid rgba(0, 0, 0, 0.05);
}
.header__content--mobile .dropdown__item a {
color: var(--an-slate) !important;
opacity: 0.8;
padding: 16px 0 16px 20px !important;
font-size: 16px !important;
}
/* Mobile User Section */
.header__content--mobile .header__block--user {
margin-top: 40px;
padding-top: 40px;
border-top: 2px solid rgba(0, 0, 0, 0.08);
}
.header__content--mobile .user__login a {
color: var(--an-slate) !important;
font-size: 18px !important;
padding: 16px 0 !important;
}
/* Mobile CTA and Featured Button */
.header__content--mobile .header__block--cta,
.header__content--mobile .header__block--featured-button {
margin-top: 24px;
padding: 0 !important;
}
.header__content--mobile .header__block--cta .btn,
.header__content--mobile .header__block--featured-button .btn {
width: 100%;
padding: 16px !important;
font-size: 18px !important;
background-color: var(--an-teal) !important;
color: white !important;
border: none !important;
border-radius: 8px !important;
text-align: center !important;
display: block !important;
text-decoration: none !important;
transition: all var(--motion-duration-fast) var(--motion-ease-standard) !important;
}
.header__content--mobile .header__block--cta .btn:hover,
.header__content--mobile .header__block--featured-button .btn:hover {
background-color: var(--an-navy) !important;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}
/* Mobile-only styles */
@media (max-width: 767px) {
.header {
padding: 12px 0;
}
.header__logo img {
max-height: 28px;
}
/* Hide desktop navigation */
.header__content--desktop .header__switch-content {
display: none !important;
}
/* Show hamburger menu */
.hamburger {
display: flex !important;
}
/* Prevent body scroll when menu is open */
body.mobile-menu-open {
overflow: hidden;
}
/* Ensure mobile menu content is visible */
.header__content--mobile .header__switch-content {
display: block !important;
}
.header__content--mobile .header__block--logo {
margin-bottom: 40px;
text-align: center;
}
/* Ensure Featured Button is visible in mobile */
.header__content--mobile .header__block--featured-button {
display: block !important;
}
}
/* Desktop-only styles */
@media (min-width: 768px) {
/* Hide mobile navigation */
.header__content--mobile,
.header__mobile-backdrop,
.hamburger {
display: none !important;
}
/* Show desktop navigation */
.header__content--desktop {
display: flex !important;
}
.header__content--desktop .header__switch-content {
display: flex !important;
}
}
/* ==========================================================================
13. Form Styling Improvements
========================================================================== */
/* Form field enhancements */
.form-control,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="number"],
textarea,
select {
border: 1px solid var(--an-border);
border-radius: var(--an-radius-md);
padding: 12px 16px;
font-size: 16px;
transition: all var(--an-transition-base);
background-color: var(--an-white);
width: 100%;
}
.form-control:focus,
input[type="text"]:focus,
input[type="email"]:focus,
input[type="password"]:focus,
input[type="tel"]:focus,
input[type="number"]:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--an-teal);
box-shadow: 0 0 0 3px rgba(42, 179, 177, 0.1);
}
/* Label styling */
label {
font-weight: 500;
color: var(--an-navy);
margin-bottom: 8px;
display: block;
}
/* Form group spacing */
.form-group {
margin-bottom: var(--an-space-lg);
}
/* ==========================================================================
14. Comprehensive Utility Classes - Design System Powered
========================================================================== */
/* Color utilities */
.text-navy {
color: var(--an-navy) !important;
}
.text-teal {
color: var(--an-teal) !important;
}
.text-coral {
color: var(--an-coral) !important;
}
.text-gold {
color: var(--an-gold) !important;
}
.text-plum {
color: var(--an-plum) !important;
}
.text-slate {
color: var(--an-slate) !important;
}
.text-white {
color: var(--an-white) !important;
}
.text-medium {
color: var(--an-text-medium) !important;
}
.text-inherit {
color: inherit !important;
}
.bg-navy {
background-color: var(--an-navy) !important;
}
.bg-teal {
background-color: var(--an-teal) !important;
}
.bg-coral {
background-color: var(--an-coral) !important;
}
.bg-gold {
background-color: var(--an-gold) !important;
}
.bg-plum {
background-color: var(--an-plum) !important;
}
.bg-peach {
background-color: var(--an-peach) !important;
}
.bg-grey {
background-color: var(--an-grey) !important;
}
.bg-white {
background-color: var(--an-white) !important;
}
.bg-transparent {
background-color: transparent !important;
}
/* Typography utilities */
.text-xs {
font-size: var(--an-font-xs) !important;
}
.text-sm {
font-size: var(--an-font-sm) !important;
}
.text-base {
font-size: var(--an-font-base) !important;
}
.text-lg {
font-size: var(--an-font-lg) !important;
}
.text-xl {
font-size: var(--an-font-xl) !important;
}
.text-2xl {
font-size: var(--an-font-2xl) !important;
}
.text-3xl {
font-size: var(--an-font-3xl) !important;
}
.text-4xl {
font-size: var(--an-font-4xl) !important;
}
/* Font weight */
.font-light {
font-weight: 300 !important;
}
.font-normal {
font-weight: 400 !important;
}
.font-medium {
font-weight: 500 !important;
}
.font-semibold {
font-weight: 600 !important;
}
.font-bold {
font-weight: 700 !important;
}
/* Font family */
.font-sans {
font-family: var(--font-sans) !important;
}
.font-serif {
font-family: var(--font-serif) !important;
}
.font-mono {
font-family: var(--font-mono) !important;
}
/* Font style */
.italic {
font-style: italic !important;
}
.not-italic {
font-style: normal !important;
}
/* Text color with lighter variations */
.text-light {
color: var(--c-ink-500) !important;
}
.text-muted {
color: var(--c-ink-500) !important;
}
/* Text alignment */
.text-left {
text-align: left !important;
}
.text-center {
text-align: center !important;
}
.text-right {
text-align: right !important;
}
.text-justify {
text-align: justify !important;
}
/* Text transform */
.uppercase {
text-transform: uppercase !important;
}
.lowercase {
text-transform: lowercase !important;
}
.capitalize {
text-transform: capitalize !important;
}
.normal-case {
text-transform: none !important;
}
/* Letter spacing */
.tracking-tight {
letter-spacing: -0.05em !important;
}
.tracking-normal {
letter-spacing: 0 !important;
}
.tracking-wide {
letter-spacing: 0.05em !important;
}
.tracking-wider {
letter-spacing: 0.1em !important;
}
/* Line height */
.leading-none {
line-height: 1 !important;
}
.leading-tight {
line-height: 1.25 !important;
}
.leading-normal {
line-height: 1.5 !important;
}
.leading-relaxed {
line-height: 1.625 !important;
}
.leading-loose {
line-height: 2 !important;
}
/* Text decoration */
.no-underline {
text-decoration: none !important;
}
.underline {
text-decoration: underline !important;
}
.line-through {
text-decoration: line-through !important;
}
/* Spacing utilities - Margin */
.m-0 {
margin: 0 !important;
}
.m-1 {
margin: var(--an-space-sm) !important;
}
.m-2 {
margin: var(--an-space-md) !important;
}
.m-3 {
margin: var(--an-space-lg) !important;
}
.m-4 {
margin: var(--an-space-xl) !important;
}
.m-5 {
margin: var(--an-space-2xl) !important;
}
.m-auto {
margin: auto !important;
}
/* Margin X-axis */
.mx-0 {
margin-left: 0 !important;
margin-right: 0 !important;
}
.mx-1 {
margin-left: var(--an-space-sm) !important;
margin-right: var(--an-space-sm) !important;
}
.mx-2 {
margin-left: var(--an-space-md) !important;
margin-right: var(--an-space-md) !important;
}
.mx-3 {
margin-left: var(--an-space-lg) !important;
margin-right: var(--an-space-lg) !important;
}
.mx-4 {
margin-left: var(--an-space-xl) !important;
margin-right: var(--an-space-xl) !important;
}
.mx-5 {
margin-left: var(--an-space-2xl) !important;
margin-right: var(--an-space-2xl) !important;
}
.mx-auto {
margin-left: auto !important;
margin-right: auto !important;
}
/* Margin Y-axis */
.my-0 {
margin-top: 0 !important;
margin-bottom: 0 !important;
}
.my-1 {
margin-top: var(--an-space-sm) !important;
margin-bottom: var(--an-space-sm) !important;
}
.my-2 {
margin-top: var(--an-space-md) !important;
margin-bottom: var(--an-space-md) !important;
}
.my-3 {
margin-top: var(--an-space-lg) !important;
margin-bottom: var(--an-space-lg) !important;
}
.my-4 {
margin-top: var(--an-space-xl) !important;
margin-bottom: var(--an-space-xl) !important;
}
.my-5 {
margin-top: var(--an-space-2xl) !important;
margin-bottom: var(--an-space-2xl) !important;
}
/* Margin Top */
.mt-0 {
margin-top: 0 !important;
}
.mt-1 {
margin-top: var(--an-space-sm) !important;
}
.mt-2 {
margin-top: var(--an-space-md) !important;
}
.mt-3 {
margin-top: var(--an-space-lg) !important;
}
.mt-4 {
margin-top: var(--an-space-xl) !important;
}
.mt-5 {
margin-top: var(--an-space-2xl) !important;
}
.mt-auto {
margin-top: auto !important;
}
/* Margin Right */
.mr-0 {
margin-right: 0 !important;
}
.mr-1 {
margin-right: var(--an-space-sm) !important;
}
.mr-2 {
margin-right: var(--an-space-md) !important;
}
.mr-3 {
margin-right: var(--an-space-lg) !important;
}
.mr-4 {
margin-right: var(--an-space-xl) !important;
}
.mr-5 {
margin-right: var(--an-space-2xl) !important;
}
.mr-auto {
margin-right: auto !important;
}
/* Margin Bottom */
.mb-0 {
margin-bottom: 0 !important;
}
.mb-1 {
margin-bottom: var(--an-space-sm) !important;
}
.mb-2 {
margin-bottom: var(--an-space-md) !important;
}
.mb-3 {
margin-bottom: var(--an-space-lg) !important;
}
.mb-4 {
margin-bottom: var(--an-space-xl) !important;
}
.mb-5 {
margin-bottom: var(--an-space-2xl) !important;
}
.mb-auto {
margin-bottom: auto !important;
}
/* Margin Left */
.ml-0 {
margin-left: 0 !important;
}
.ml-1 {
margin-left: var(--an-space-sm) !important;
}
.ml-2 {
margin-left: var(--an-space-md) !important;
}
.ml-3 {
margin-left: var(--an-space-lg) !important;
}
.ml-4 {
margin-left: var(--an-space-xl) !important;
}
.ml-5 {
margin-left: var(--an-space-2xl) !important;
}
.ml-auto {
margin-left: auto !important;
}
/* Spacing utilities - Padding */
.p-0 {
padding: 0 !important;
}
.p-1 {
padding: var(--an-space-sm) !important;
}
.p-2 {
padding: var(--an-space-md) !important;
}
.p-3 {
padding: var(--an-space-lg) !important;
}
.p-4 {
padding: var(--an-space-xl) !important;
}
.p-5 {
padding: var(--an-space-2xl) !important;
}
.p-6 {
padding: var(--an-space-3xl) !important;
}
/* Padding X-axis */
.px-0 {
padding-left: 0 !important;
padding-right: 0 !important;
}
.px-1 {
padding-left: var(--an-space-sm) !important;
padding-right: var(--an-space-sm) !important;
}
.px-2 {
padding-left: var(--an-space-md) !important;
padding-right: var(--an-space-md) !important;
}
.px-3 {
padding-left: var(--an-space-lg) !important;
padding-right: var(--an-space-lg) !important;
}
.px-4 {
padding-left: var(--an-space-xl) !important;
padding-right: var(--an-space-xl) !important;
}
.px-5 {
padding-left: var(--an-space-2xl) !important;
padding-right: var(--an-space-2xl) !important;
}
.px-6 {
padding-left: var(--an-space-3xl) !important;
padding-right: var(--an-space-3xl) !important;
}
/* Padding Y-axis */
.py-0 {
padding-top: 0 !important;
padding-bottom: 0 !important;
}
.py-1 {
padding-top: var(--an-space-sm) !important;
padding-bottom: var(--an-space-sm) !important;
}
.py-2 {
padding-top: var(--an-space-md) !important;
padding-bottom: var(--an-space-md) !important;
}
.py-3 {
padding-top: var(--an-space-lg) !important;
padding-bottom: var(--an-space-lg) !important;
}
.py-4 {
padding-top: var(--an-space-xl) !important;
padding-bottom: var(--an-space-xl) !important;
}
.py-5 {
padding-top: var(--an-space-2xl) !important;
padding-bottom: var(--an-space-2xl) !important;
}
.py-6 {
padding-top: var(--an-space-3xl) !important;
padding-bottom: var(--an-space-3xl) !important;
}
/* Padding Top */
.pt-0 {
padding-top: 0 !important;
}
.pt-1 {
padding-top: var(--an-space-sm) !important;
}
.pt-2 {
padding-top: var(--an-space-md) !important;
}
.pt-3 {
padding-top: var(--an-space-lg) !important;
}
.pt-4 {
padding-top: var(--an-space-xl) !important;
}
.pt-5 {
padding-top: var(--an-space-2xl) !important;
}
.pt-6 {
padding-top: var(--an-space-3xl) !important;
}
/* Padding Right */
.pr-0 {
padding-right: 0 !important;
}
.pr-1 {
padding-right: var(--an-space-sm) !important;
}
.pr-2 {
padding-right: var(--an-space-md) !important;
}
.pr-3 {
padding-right: var(--an-space-lg) !important;
}
.pr-4 {
padding-right: var(--an-space-xl) !important;
}
.pr-5 {
padding-right: var(--an-space-2xl) !important;
}
.pr-6 {
padding-right: var(--an-space-3xl) !important;
}
/* Padding Bottom */
.pb-0 {
padding-bottom: 0 !important;
}
.pb-1 {
padding-bottom: var(--an-space-sm) !important;
}
.pb-2 {
padding-bottom: var(--an-space-md) !important;
}
.pb-3 {
padding-bottom: var(--an-space-lg) !important;
}
.pb-4 {
padding-bottom: var(--an-space-xl) !important;
}
.pb-5 {
padding-bottom: var(--an-space-2xl) !important;
}
.pb-6 {
padding-bottom: var(--an-space-3xl) !important;
}
/* Padding Left */
.pl-0 {
padding-left: 0 !important;
}
.pl-1 {
padding-left: var(--an-space-sm) !important;
}
.pl-2 {
padding-left: var(--an-space-md) !important;
}
.pl-3 {
padding-left: var(--an-space-lg) !important;
}
.pl-4 {
padding-left: var(--an-space-xl) !important;
}
.pl-5 {
padding-left: var(--an-space-2xl) !important;
}
.pl-6 {
padding-left: var(--an-space-3xl) !important;
}
/* Display utilities */
.d-none {
display: none !important;
}
.d-block {
display: block !important;
}
.d-inline-block {
display: inline-block !important;
}
.d-inline {
display: inline !important;
}
.d-flex {
display: flex !important;
}
.d-inline-flex {
display: inline-flex !important;
}
.d-grid {
display: grid !important;
}
/* Flexbox utilities */
.flex-row {
flex-direction: row !important;
}
.flex-column {
flex-direction: column !important;
}
.flex-row-reverse {
flex-direction: row-reverse !important;
}
.flex-column-reverse {
flex-direction: column-reverse !important;
}
.flex-wrap {
flex-wrap: wrap !important;
}
.flex-nowrap {
flex-wrap: nowrap !important;
}
.flex-wrap-reverse {
flex-wrap: wrap-reverse !important;
}
.flex-1 {
flex: 1 1 0% !important;
}
.flex-auto {
flex: 1 1 auto !important;
}
.flex-initial {
flex: 0 1 auto !important;
}
.flex-none {
flex: none !important;
}
.justify-content-start {
justify-content: flex-start !important;
}
.justify-content-end {
justify-content: flex-end !important;
}
.justify-content-center {
justify-content: center !important;
}
.justify-content-between {
justify-content: space-between !important;
}
.justify-content-around {
justify-content: space-around !important;
}
.justify-content-evenly {
justify-content: space-evenly !important;
}
.align-items-start {
align-items: flex-start !important;
}
.align-items-end {
align-items: flex-end !important;
}
.align-items-center {
align-items: center !important;
}
.align-items-baseline {
align-items: baseline !important;
}
.align-items-stretch {
align-items: stretch !important;
}
.align-self-auto {
align-self: auto !important;
}
.align-self-start {
align-self: flex-start !important;
}
.align-self-end {
align-self: flex-end !important;
}
.align-self-center {
align-self: center !important;
}
.align-self-baseline {
align-self: baseline !important;
}
.align-self-stretch {
align-self: stretch !important;
}
/* Gap utilities */
.gap-0 {
gap: 0 !important;
}
.gap-1 {
gap: var(--an-space-sm) !important;
}
.gap-2 {
gap: var(--an-space-md) !important;
}
.gap-3 {
gap: var(--an-space-lg) !important;
}
.gap-4 {
gap: var(--an-space-xl) !important;
}
.gap-5 {
gap: var(--an-space-2xl) !important;
}
/* Border utilities */
.border {
border: 1px solid var(--an-border) !important;
}
.border-0 {
border: 0 !important;
}
.border-top {
border-top: 1px solid var(--an-border) !important;
}
.border-right {
border-right: 1px solid var(--an-border) !important;
}
.border-bottom {
border-bottom: 1px solid var(--an-border) !important;
}
.border-left {
border-left: 1px solid var(--an-border) !important;
}
.border-top-0 {
border-top: 0 !important;
}
.border-right-0 {
border-right: 0 !important;
}
.border-bottom-0 {
border-bottom: 0 !important;
}
.border-left-0 {
border-left: 0 !important;
}
/* Border colors */
.border-navy {
border-color: var(--an-navy) !important;
}
.border-teal {
border-color: var(--an-teal) !important;
}
.border-coral {
border-color: var(--an-coral) !important;
}
.border-gold {
border-color: var(--an-gold) !important;
}
.border-plum {
border-color: var(--an-plum) !important;
}
.border-white {
border-color: var(--an-white) !important;
}
/* Border radius */
.rounded-none {
border-radius: 0 !important;
}
.rounded-sm {
border-radius: var(--an-radius-sm) !important;
}
.rounded {
border-radius: var(--an-radius-md) !important;
}
.rounded-lg {
border-radius: var(--an-radius-lg) !important;
}
.rounded-full {
border-radius: var(--an-radius-full) !important;
}
/* Shadow utilities */
.shadow-none {
box-shadow: none !important;
}
.shadow-sm {
box-shadow: var(--an-shadow-sm) !important;
}
.shadow {
box-shadow: var(--an-shadow-md) !important;
}
.shadow-lg {
box-shadow: var(--an-shadow-lg) !important;
}
/* Width utilities */
.w-auto {
width: auto !important;
}
.w-full {
width: 100% !important;
}
.w-screen {
width: 100vw !important;
}
.w-min {
width: min-content !important;
}
.w-max {
width: max-content !important;
}
.w-fit {
width: fit-content !important;
}
.w-25 {
width: 25% !important;
}
.w-50 {
width: 50% !important;
}
.w-75 {
width: 75% !important;
}
/* Max width utilities */
.max-w-none {
max-width: none !important;
}
.max-w-sm {
max-width: 576px !important;
}
.max-w-md {
max-width: 768px !important;
}
.max-w-lg {
max-width: 992px !important;
}
.max-w-xl {
max-width: 1200px !important;
}
.max-w-2xl {
max-width: 1400px !important;
}
.max-w-full {
max-width: 100% !important;
}
/* Height utilities */
.h-auto {
height: auto !important;
}
.h-full {
height: 100% !important;
}
.h-screen {
height: 100vh !important;
}
.h-min {
height: min-content !important;
}
.h-max {
height: max-content !important;
}
.h-fit {
height: fit-content !important;
}
/* Min height utilities */
.min-h-0 {
min-height: 0 !important;
}
.min-h-full {
min-height: 100% !important;
}
.min-h-screen {
min-height: 100vh !important;
}
/* Position utilities */
.position-static {
position: static !important;
}
.position-relative {
position: relative !important;
}
.position-absolute {
position: absolute !important;
}
.position-fixed {
position: fixed !important;
}
.position-sticky {
position: sticky !important;
}
/* Position values */
.top-0 {
top: 0 !important;
}
.right-0 {
right: 0 !important;
}
.bottom-0 {
bottom: 0 !important;
}
.left-0 {
left: 0 !important;
}
.inset-0 {
top: 0 !important;
right: 0 !important;
bottom: 0 !important;
left: 0 !important;
}
/* Z-index utilities */
.z-0 {
z-index: 0 !important;
}
.z-10 {
z-index: 10 !important;
}
.z-20 {
z-index: 20 !important;
}
.z-30 {
z-index: 30 !important;
}
.z-40 {
z-index: 40 !important;
}
.z-50 {
z-index: 50 !important;
}
.z-100 {
z-index: 100 !important;
}
.z-1000 {
z-index: 1000 !important;
}
/* Overflow utilities */
.overflow-auto {
overflow: auto !important;
}
.overflow-hidden {
overflow: hidden !important;
}
.overflow-visible {
overflow: visible !important;
}
.overflow-scroll {
overflow: scroll !important;
}
.overflow-x-auto {
overflow-x: auto !important;
}
.overflow-x-hidden {
overflow-x: hidden !important;
}
.overflow-y-auto {
overflow-y: auto !important;
}
.overflow-y-hidden {
overflow-y: hidden !important;
}
/* Opacity utilities */
.opacity-0 {
opacity: 0 !important;
}
.opacity-25 {
opacity: 0.25 !important;
}
.opacity-50 {
opacity: 0.5 !important;
}
.opacity-75 {
opacity: 0.75 !important;
}
.opacity-100 {
opacity: 1 !important;
}
/* Transition utilities */
.transition-none {
transition-property: none !important;
}
.transition-all {
transition: all var(--an-transition-base) !important;
}
.transition-fast {
transition: all var(--an-transition-fast) !important;
}
.transition-slow {
transition: all var(--an-transition-slow) !important;
}
.transition-colors {
transition:
color,
background-color,
border-color var(--an-transition-base) !important;
}
.transition-opacity {
transition: opacity var(--an-transition-base) !important;
}
.transition-transform {
transition: transform var(--an-transition-base) !important;
}
/* Cursor utilities */
.cursor-auto {
cursor: auto !important;
}
.cursor-default {
cursor: default !important;
}
.cursor-pointer {
cursor: pointer !important;
}
.cursor-wait {
cursor: wait !important;
}
.cursor-not-allowed {
cursor: not-allowed !important;
}
/* User select utilities */
.select-none {
user-select: none !important;
}
.select-text {
user-select: text !important;
}
.select-all {
user-select: all !important;
}
/* Pointer events */
.pointer-events-none {
pointer-events: none !important;
}
.pointer-events-auto {
pointer-events: auto !important;
}
/* List utilities */
.list-none {
list-style-type: none !important;
}
.list-disc {
list-style-type: disc !important;
}
.list-decimal {
list-style-type: decimal !important;
}
/* Visibility utilities */
.visible {
visibility: visible !important;
}
.invisible {
visibility: hidden !important;
}
/* White space utilities */
.whitespace-normal {
white-space: normal !important;
}
.whitespace-nowrap {
white-space: nowrap !important;
}
.whitespace-pre {
white-space: pre !important;
}
.whitespace-pre-line {
white-space: pre-line !important;
}
.whitespace-pre-wrap {
white-space: pre-wrap !important;
}
/* Word break utilities */
.break-normal {
word-break: normal !important;
overflow-wrap: normal !important;
}
.break-words {
overflow-wrap: break-word !important;
}
.break-all {
word-break: break-all !important;
}
/* Vertical alignment */
.align-baseline {
vertical-align: baseline !important;
}
.align-top {
vertical-align: top !important;
}
.align-middle {
vertical-align: middle !important;
}
.align-bottom {
vertical-align: bottom !important;
}
.align-text-top {
vertical-align: text-top !important;
}
.align-text-bottom {
vertical-align: text-bottom !important;
}
/* Object fit utilities */
.object-contain {
object-fit: contain !important;
}
.object-cover {
object-fit: cover !important;
}
.object-fill {
object-fit: fill !important;
}
.object-none {
object-fit: none !important;
}
.object-scale-down {
object-fit: scale-down !important;
}
/* Object position utilities */
.object-center {
object-position: center !important;
}
.object-top {
object-position: top !important;
}
.object-bottom {
object-position: bottom !important;
}
.object-left {
object-position: left !important;
}
.object-right {
object-position: right !important;
}
/* ==========================================================================
15. About Hero Section
========================================================================== */
.about-hero-section {
position: relative;
min-height: 500px;
background-size: cover;
background-position: center;
background-repeat: no-repeat;
display: flex;
align-items: center;
padding: 80px 0;
overflow: hidden;
}
.about-hero-section * {
color: #ffffff !important;
}
.about-hero-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(
135deg,
rgba(30, 27, 75, 0.95) 0%,
rgba(19, 47, 76, 0.95) 100%
);
z-index: 1;
}
.about-hero-content {
position: relative;
z-index: 2;
text-align: center;
max-width: 768px;
margin: 0 auto;
color: #ffffff !important;
}
.about-hero-tagline {
font-size: 14px;
font-weight: 500;
color: #a5b4fc !important;
margin-bottom: 24px;
display: inline-block;
}
.about-hero-tagline-link {
color: #a5b4fc !important;
text-decoration: none;
margin-left: 8px;
transition: color var(--motion-duration-fast) var(--motion-ease-standard);
}
.about-hero-tagline-link:hover {
color: #c7d2fe !important;
text-decoration: underline;
}
.about-hero-title {
font-size: 48px;
font-weight: 700;
line-height: 1.2;
margin-bottom: 24px;
color: #ffffff !important;
}
@media (max-width: 768px) {
.about-hero-title {
font-size: 36px;
}
}
.about-hero-subtitle {
font-size: 18px;
line-height: 1.6;
color: #e0e7ff !important;
margin-bottom: 40px;
max-width: 600px;
margin-left: auto;
margin-right: auto;
}
.about-hero-buttons {
display: flex;
gap: 16px;
justify-content: center;
flex-wrap: wrap;
}
.about-hero-btn {
padding: 14px 32px;
font-size: 16px;
font-weight: 600;
border-radius: 8px;
text-decoration: none !important;
transition: all var(--motion-duration-base) var(--motion-ease-standard);
display: inline-block;
}
@media (max-width: 768px) {
.about-hero-section {
padding: 60px 0;
min-height: 400px;
}
.about-hero-buttons {
flex-direction: column;
width: 100%;
max-width: 300px;
margin: 0 auto;
}
.about-hero-btn {
width: 100%;
text-align: center;
}
}
/* ==========================================================================
Depth & Layering Utilities
Added: 2025-01-20
========================================================================== */
/* Overlapping Card Designs */
.card-overlap {
position: relative;
overflow: visible;
}
.card-overlap__image {
position: relative;
z-index: 2;
transition: transform var(--an-transition-base);
}
.card-overlap--top .card-overlap__image {
margin-top: -2rem;
margin-bottom: 1rem;
}
.card-overlap--left .card-overlap__image {
margin-left: -2rem;
margin-right: 1rem;
}
.card-overlap--right .card-overlap__image {
margin-right: -2rem;
margin-left: 1rem;
}
.card-overlap--corner .card-overlap__image {
position: absolute;
top: -1.5rem;
right: -1.5rem;
width: 120px;
height: 120px;
}
/* Hover Effects for Overlapping Elements */
.card-overlap:hover .card-overlap__image {
transform: translateY(-4px) scale(1.02);
}
/* Depth Layers */
.depth-layer {
position: relative;
}
.depth-layer--1 {
z-index: 10;
}
.depth-layer--2 {
z-index: 20;
}
.depth-layer--3 {
z-index: 30;
}
.depth-layer--4 {
z-index: 40;
}
.depth-layer--5 {
z-index: 50;
}
/* Float Effects */
.float-element {
position: absolute;
animation: float 6s ease-in-out infinite;
}
.float-element--delayed {
animation-delay: 3s;
}
@keyframes float {
0%,
100% {
transform: translateY(0) rotate(0deg);
}
25% {
transform: translateY(-10px) rotate(1deg);
}
75% {
transform: translateY(5px) rotate(-1deg);
}
}
/* Layered Shadows for Depth */
.shadow-layered {
box-shadow:
0 2px 4px rgba(0, 0, 0, 0.04),
0 4px 8px rgba(0, 0, 0, 0.06),
0 12px 24px rgba(0, 0, 0, 0.08),
0 24px 48px rgba(0, 0, 0, 0.12);
}
.shadow-layered-colored {
box-shadow:
0 2px 4px rgba(94, 59, 255, 0.04),
0 4px 8px rgba(94, 59, 255, 0.08),
0 12px 24px rgba(94, 59, 255, 0.12),
0 24px 48px rgba(94, 59, 255, 0.16);
}
/* Breaking the Box */
.break-bounds {
overflow: visible !important;
}
.break-bounds__element {
position: absolute;
}
/* Perspective Cards */
.card-3d {
transform-style: preserve-3d;
perspective: 1000px;
}
.card-3d__inner {
transition: transform 0.6s;
transform-style: preserve-3d;
}
.card-3d:hover .card-3d__inner {
transform: rotateY(5deg) rotateX(-5deg);
}
/* Glassmorphism for Layered Elements */
.glass-layer {
background: rgba(255, 255, 255, 0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.18);
}
.glass-layer--dark {
background: rgba(26, 45, 78, 0.7);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
border: 1px solid rgba(255, 255, 255, 0.18);
}
/* Mobile: relax glass effects */
@media (max-width: 768px) {
.glass-layer,
.glass-layer--dark {
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
background: rgba(255, 255, 255, 0.92) !important;
}
}
/* ==========================================================================
Background Textures & Decorative Shapes
Added: 2025-01-20
========================================================================== */
/* Base Background Pattern Classes */
.bg-texture {
position: relative;
overflow: hidden;
}
.bg-texture::before,
.bg-texture::after {
content: "";
position: absolute;
pointer-events: none;
z-index: 0;
}
/* Ensure content stays above background shapes */
.bg-texture > * {
position: relative;
z-index: 1;
}
/* Organic Blob Shapes */
.bg-texture--blob-1::before {
width: 40%;
height: 40%;
top: -10%;
right: -5%;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%235E3BFF' fill-opacity='0.08' d='M67.5,-84.7C84.8,-70.5,94.9,-46.6,98.2,-22.3C101.6,2,98.2,26.7,86.9,46.6C75.6,66.5,56.4,81.7,34.4,87.8C12.4,93.9,-12.4,91,-36.2,82.3C-60,73.6,-82.8,59.1,-92.3,38.6C-101.8,18.1,-98,-8.4,-87.7,-30.9C-77.4,-53.4,-60.5,-71.9,-40.5,-85.5C-20.5,-99.2,-2.4,-108,17.6,-106.5C37.5,-105,50.2,-93.2,67.5,-84.7Z' transform='translate(200 200)'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
}
.bg-texture--blob-2::after {
width: 35%;
height: 35%;
bottom: -8%;
left: -5%;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%2318D5E4' fill-opacity='0.06' d='M44.2,-60.8C56.7,-52.3,66.1,-38.7,71.5,-23.4C76.9,-8.1,78.3,8.9,73.3,24.2C68.3,39.5,56.9,53.1,42.7,61.6C28.5,70.1,11.5,73.5,-5.6,71.3C-22.7,69.1,-39.9,61.3,-53.8,49.5C-67.7,37.7,-78.3,21.9,-80.7,4.8C-83.1,-12.3,-77.3,-30.7,-66.5,-45.7C-55.7,-60.7,-39.9,-72.3,-23.1,-77.4C-6.3,-82.5,11.5,-81.1,28.2,-74.2C44.9,-67.3,60.5,-54.9,44.2,-60.8Z' transform='translate(200 200)'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
}
.bg-texture--blob-3::before {
width: 50%;
height: 50%;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FF8BCB' fill-opacity='0.05' d='M71.7,-89.6C91.1,-76.3,104.2,-52.7,107.9,-28.3C111.6,-3.9,105.9,21.3,94.1,43.1C82.3,64.9,64.4,83.3,42.7,92.8C21,102.3,-4.5,102.9,-29.5,96.2C-54.5,89.5,-79,75.5,-93.1,54.7C-107.2,33.9,-111,6.3,-105.1,-19.1C-99.2,-44.5,-83.6,-67.7,-63.4,-80.8C-43.2,-93.9,-18.4,-96.9,4.6,-93.2C27.6,-89.5,52.3,-79.2,71.7,-89.6Z' transform='translate(200 200)'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
}
/* Geometric Patterns */
.bg-texture--circles::before {
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%235E3BFF' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
background-repeat: repeat;
}
.bg-texture--dots::after {
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23E9E6FF' fill-opacity='0.5'%3E%3Ccircle cx='2' cy='2' r='2'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: repeat;
}
.bg-texture--zigzag::before {
width: 100%;
height: 100%;
top: 0;
left: 0;
background-image: url("data:image/svg+xml,%3Csvg width='40' height='12' viewBox='0 0 40 12' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 6.172L6.172 0h5.656L0 11.828V6.172zm10 5.656L10 12h5.656L20 7.828v5.656L15.828 12h5.656L20 10.172V12h4v-1.828L22.172 12h5.656L40 0v5.656L33.828 12h5.656L40 11.172V6.172L33.828 0h5.656L28 11.828V6.172L22.344 0H20v1.828L21.828 0h-5.656L10 6.172v5.656z' fill='%2318D5E4' fill-opacity='0.04' fill-rule='evenodd'/%3E%3C/svg%3E");
background-repeat: repeat;
}
/* Gradient Overlays */
.bg-texture--gradient-1::before {
width: 100%;
height: 100%;
top: 0;
left: 0;
background: radial-gradient(
ellipse at top right,
rgba(94, 59, 255, 0.1) 0%,
transparent 50%
);
}
.bg-texture--gradient-2::after {
width: 100%;
height: 100%;
top: 0;
left: 0;
background: radial-gradient(
ellipse at bottom left,
rgba(24, 213, 228, 0.08) 0%,
transparent 50%
);
}
.bg-texture--gradient-mesh::before {
width: 100%;
height: 100%;
top: 0;
left: 0;
background:
radial-gradient(at 20% 80%, rgba(255, 139, 203, 0.06) 0%, transparent 50%),
radial-gradient(at 80% 20%, rgba(94, 59, 255, 0.06) 0%, transparent 50%),
radial-gradient(at 40% 40%, rgba(24, 213, 228, 0.04) 0%, transparent 50%);
}
/* Floating Shapes */
.bg-texture--float-1::before {
width: 200px;
height: 200px;
top: 10%;
right: 5%;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='%23FFE86B' fill-opacity='0.1' d='M100,20 L130,80 L190,80 L145,120 L165,180 L100,140 L35,180 L55,120 L10,80 L70,80 Z'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
animation: float 20s ease-in-out infinite;
}
.bg-texture--float-2::after {
width: 150px;
height: 150px;
bottom: 15%;
left: 10%;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='100' cy='100' r='80' fill='none' stroke='%235E3BFF' stroke-width='2' stroke-dasharray='10,5' opacity='0.2'/%3E%3Ccircle cx='100' cy='100' r='60' fill='none' stroke='%2318D5E4' stroke-width='2' stroke-dasharray='5,10' opacity='0.2'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
animation: float 25s ease-in-out infinite reverse;
}
/* Wave Patterns */
.bg-texture--wave-top::before {
width: 100%;
height: 120px;
top: 0;
left: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 120' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M321.39,56.44c58-10.79,114.16-30.13,172-41.86,82.39-16.72,168.19-17.73,250.45-.39C823.78,31,906.67,72,985.66,92.83c70.05,18.48,146.53,26.09,214.34,3V0H0V27.35A600.21,600.21,0,0,0,321.39,56.44Z' fill='%23E9E6FF' fill-opacity='0.3'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: cover;
}
.bg-texture--wave-bottom::after {
width: 100%;
height: 120px;
bottom: 0;
left: 0;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 1200 120' preserveAspectRatio='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0,0V46.29c47.79,22.2,103.59,32.17,158,28,70.36-5.37,136.33-33.31,206.8-37.5C438.64,32.43,512.34,53.67,583,72.05c69.27,18,138.3,24.88,209.4,13.08,36.15-6,69.85-17.84,104.45-29.34C989.49,25,1113-14.29,1200,52.47V0Z' fill='%23FAFAFA' fill-opacity='1'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: cover;
}
/* Abstract Corner Decorations */
.bg-texture--corner-1::before {
width: 300px;
height: 300px;
top: -150px;
right: -150px;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 300 300' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M150,300 Q300,300 300,150 Q300,0 150,0' fill='none' stroke='%235E3BFF' stroke-width='1' opacity='0.1'/%3E%3Cpath d='M150,250 Q250,250 250,150 Q250,50 150,50' fill='none' stroke='%2318D5E4' stroke-width='1' opacity='0.1'/%3E%3Cpath d='M150,200 Q200,200 200,150 Q200,100 150,100' fill='%23FFE86B' fill-opacity='0.05'/%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
}
.bg-texture--corner-2::after {
width: 250px;
height: 250px;
bottom: -125px;
left: -125px;
background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 250 250' xmlns='http://www.w3.org/2000/svg'%3E%3Cg transform='rotate(45 125 125)'%3E%3Crect x='75' y='75' width='100' height='100' fill='%23FF8BCB' fill-opacity='0.05' rx='20'/%3E%3Crect x='50' y='50' width='150' height='150' fill='none' stroke='%235E3BFF' stroke-width='1' opacity='0.1' rx='30'/%3E%3C/g%3E%3C/svg%3E");
background-repeat: no-repeat;
background-size: contain;
}
/* Texture Modifiers */
.bg-texture--subtle::before,
.bg-texture--subtle::after {
opacity: 0.5;
}
.bg-texture--strong::before,
.bg-texture--strong::after {
opacity: 1.5;
}
.bg-texture--animated::before,
.bg-texture--animated::after {
animation: float 30s ease-in-out infinite;
}
/* Responsive Texture Visibility */
@media (max-width: 768px) {
.bg-texture--hide-mobile::before,
.bg-texture--hide-mobile::after {
display: none;
}
}
/* Combination Classes for Complex Backgrounds */
.bg-texture--complex {
position: relative;
overflow: hidden;
}
.bg-texture--complex::before {
content: "";
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
background:
radial-gradient(
circle at 20% 80%,
rgba(255, 139, 203, 0.1) 0%,
transparent 40%
),
radial-gradient(
circle at 80% 20%,
rgba(94, 59, 255, 0.1) 0%,
transparent 40%
),
radial-gradient(
circle at 40% 40%,
rgba(24, 213, 228, 0.08) 0%,
transparent 40%
);
z-index: 0;
}
/* ==========================================================================
Form Validation Styles
Added: 2025-01-20
========================================================================== */
/* Form field states */
.form-field-error,
input.error,
select.error,
textarea.error {
border-color: var(--c-accent-peach, #ff8bcb) !important;
background-color: rgba(255, 139, 203, 0.05) !important;
}
.form-field-error:focus,
input.error:focus,
select.error:focus,
textarea.error:focus {
outline: none;
border-color: var(--c-accent-peach, #ff8bcb) !important;
box-shadow: 0 0 0 3px rgba(255, 139, 203, 0.15) !important;
}
/* Success and error messages */
.form-message {
display: flex;
align-items: center;
gap: 0.75rem;
padding: 0.75rem 1rem;
border-radius: 8px;
font-size: var(--fs-body-sm, 0.875rem);
margin-top: 0.5rem;
/* Using fadeInUp from animation_utilities.liquid */
}
.form-message--success {
background: rgba(24, 213, 228, 0.1);
color: var(--c-ink-700, #3a4a63);
}
.form-message--error {
background: rgba(255, 107, 107, 0.1);
color: var(--c-ink-700, #3a4a63);
}
.form-message svg {
flex-shrink: 0;
}
/* Form button states */
.form-button--loading {
position: relative;
color: transparent !important;
pointer-events: none;
}
.form-button--loading::after {
content: "";
position: absolute;
width: 16px;
height: 16px;
top: 50%;
left: 50%;
margin-left: -8px;
margin-top: -8px;
border: 2px solid rgba(255, 255, 255, 0.3);
border-top-color: white;
border-radius: 50%;
animation: spin 0.8s linear infinite;
}
@keyframes spin {
to {
transform: rotate(360deg);
}
}
/* Required field indicator */
.required-indicator {
color: var(--c-accent-peach, #ff8bcb);
font-weight: normal;
}
/* Form help text */
.form-help-text {
font-size: var(--fs-caption, 0.75rem);
color: var(--c-ink-500, #6b7280);
margin-top: 0.25rem;
}
/* Inline validation feedback */
.validation-feedback {
font-size: var(--fs-caption, 0.75rem);
margin-top: 0.25rem;
display: flex;
align-items: center;
gap: 0.25rem;
}
.validation-feedback--error {
color: var(--c-accent-peach, #ff8bcb);
}
.validation-feedback--success {
color: var(--c-accent-teal, #18d5e4);
}
/* Form animations */
/* fadeInUp and shake animations moved to animation_utilities.liquid */
/* ==========================================================================
Accessibility Utilities
Added: 2025-01-18
========================================================================== */
/* Visually hidden but accessible to screen readers */
.visually-hidden,
.sr-only {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
/* Focus visible for keyboard navigation */
:focus-visible {
outline: 2px solid var(--an-primary, #5e3bff);
outline-offset: 2px;
}
/* Remove default focus for mouse users */
:focus:not(:focus-visible) {
outline: none;
}
/* Skip to content link */
.skip-to-content {
position: absolute;
left: -9999px;
z-index: 999;
padding: 1em;
background-color: var(--an-primary, #5e3bff);
color: white;
text-decoration: none;
border-radius: var(--an-radius-md);
}
.skip-to-content:focus {
left: 50%;
transform: translateX(-50%);
top: 1rem;
}
/* ==========================================================================
Book Testimonial Showcase Section
Added: 2025-01-21
========================================================================== */
/* Enhanced styles for book testimonial showcase section */
.book-testimonial-showcase {
min-height: 600px;
position: relative;
}
.book-testimonial-showcase__wrapper {
display: flex;
min-height: inherit;
}
.book-testimonial-showcase__left {
background-color: var(--an-gold, #ffe86b);
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 60px;
}
.book-testimonial-showcase__right {
background-color: var(--an-grey, #f5f5f0);
flex: 1;
display: flex;
align-items: center;
justify-content: center;
padding: 60px;
}
/* Book showcase specific styles */
.book-testimonial-showcase__book {
position: relative;
margin-bottom: 40px;
display: inline-block;
}
.book-testimonial-showcase__book img {
display: block;
max-width: 300px;
width: 100%;
height: auto;
box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
border-radius: 4px;
transition: transform var(--motion-duration-base) var(--motion-ease-standard);
}
.book-testimonial-showcase__book:hover img {
transform: translateY(-5px);
box-shadow: 0 25px 50px rgba(0, 0, 0, 0.2);
}
/* Bestseller badge */
.book-testimonial-showcase__badge {
position: absolute;
bottom: 20px;
right: -20px;
background: #000;
color: #fff;
width: 120px;
height: 120px;
border-radius: 50%;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
font-size: 11px;
line-height: 1.2;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
z-index: 1;
}
.badge-number {
font-size: 24px;
font-weight: 700;
display: block;
margin-bottom: 5px;
}
.badge-text {
text-transform: uppercase;
letter-spacing: 0.5px;
font-size: 10px;
}
/* Book content styles */
.book-testimonial-showcase__title {
font-size: var(--fs-display, 48px);
font-weight: 700;
line-height: 1.1;
margin-bottom: 20px;
color: var(--an-text-dark, #000);
}
.book-testimonial-showcase__subtitle {
font-size: 18px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: 20px;
color: var(--an-text-dark, #000);
}
.book-testimonial-showcase__description {
font-size: var(--fs-body-lg, 18px);
line-height: 1.6;
margin-bottom: 20px;
color: var(--an-text-dark, #000);
}
.book-testimonial-showcase__availability {
font-size: 16px;
font-style: italic;
margin-bottom: 30px;
color: var(--an-text-dark, #000);
}
.book-testimonial-showcase__availability em {
font-style: normal;
font-weight: 600;
}
/* CTA Button */
.book-testimonial-showcase__cta {
background: #000;
color: #fff;
padding: 16px 32px;
border-radius: 30px;
font-weight: 600;
text-decoration: none;
display: inline-block;
transition: all var(--motion-duration-base) var(--motion-ease-standard);
border: 2px solid #000;
}
.book-testimonial-showcase__cta:hover {
transform: translateY(-2px);
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
background: #fff;
color: #000;
}
/* Testimonial styles */
.book-testimonial-showcase__testimonials {
max-width: 560px;
width: 100%;
text-align: center;
}
.testimonial-logo {
margin-bottom: 40px;
}
.testimonial-logo img {
height: 30px;
width: auto;
opacity: 0.8;
}
.testimonial-slider {
position: relative;
min-height: 300px;
}
.testimonial-slide {
display: none;
/* Using fadeIn from animation_utilities.liquid */
}
.testimonial-slide.active {
display: block;
}
/* fadeIn animation moved to animation_utilities.liquid */
.testimonial-quote {
font-size: 24px;
line-height: 1.5;
margin-bottom: 40px;
quotes: none;
color: var(--an-text-dark, #000);
}
/* Author styles */
.testimonial-author {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
.testimonial-author__info {
text-align: right;
}
.testimonial-author__name {
font-size: 18px;
font-weight: 600;
margin-bottom: 5px;
color: var(--an-text-dark, #000);
}
.testimonial-author__title {
font-size: 14px;
color: #666;
font-style: italic;
line-height: 1.4;
}
.testimonial-author__avatar {
width: 80px;
height: 80px;
border-radius: 50%;
overflow: hidden;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
}
.testimonial-author__avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Slider dots */
.testimonial-dots {
display: flex;
justify-content: center;
gap: 8px;
margin-top: 30px;
}
.testimonial-dot {
width: 10px;
height: 10px;
border-radius: 50%;
background: #ddd;
cursor: pointer;
transition: all var(--motion-duration-base) var(--motion-ease-standard);
}
.testimonial-dot.active {
background: #333;
transform: scale(1.2);
}
.testimonial-dot:hover {
background: #666;
}
/* Responsive styles */
@media (max-width: 991px) {
.book-testimonial-showcase__wrapper {
flex-direction: column;
}
.book-testimonial-showcase__left,
.book-testimonial-showcase__right {
padding: 40px;
min-height: 500px;
}
.book-testimonial-showcase__title {
font-size: 36px;
}
.testimonial-quote {
font-size: 20px;
}
.book-testimonial-showcase__content {
text-align: center;
}
.book-testimonial-showcase__book {
display: inline-block;
}
}
@media (max-width: 767px) {
.book-testimonial-showcase__left,
.book-testimonial-showcase__right {
padding: 30px 20px;
min-height: 400px;
}
.book-testimonial-showcase__title {
font-size: 28px;
}
.book-testimonial-showcase__book img {
max-width: 200px;
}
.book-testimonial-showcase__badge {
width: 90px;
height: 90px;
font-size: 9px;
padding: 10px;
right: -10px;
bottom: 10px;
}
.badge-number {
font-size: 18px;
}
.badge-text {
font-size: 8px;
}
.testimonial-author {
flex-direction: column-reverse;
text-align: center;
}
.testimonial-author__info {
text-align: center;
}
.testimonial-quote {
font-size: 18px;
}
.testimonial-author__avatar {
width: 60px;
height: 60px;
}
}
/* ==========================================================================
Modern Brand Components
Added: 2025-01-20
========================================================================== */
/* Modern Button Styles */
.btn-primary-modern {
background: var(--g-brand, linear-gradient(135deg, #6757ff 0%, #7b4dff 100%));
color: var(--c-white);
border-radius: 9999px;
padding: 12px 32px;
font-weight: 500;
border: none;
text-decoration: none;
display: inline-block;
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.25) inset,
0 4px 8px rgba(94, 59, 255, 0.35);
transition:
transform var(--motion-duration-fast) var(--motion-ease-standard),
box-shadow var(--motion-duration-fast) var(--motion-ease-standard);
}
.btn-primary-modern:hover {
transform: translateY(-2px);
box-shadow:
0 0 0 2px rgba(255, 255, 255, 0.25) inset,
0 8px 16px rgba(94, 59, 255, 0.45);
color: var(--c-white);
}
.btn-secondary-modern {
background: var(--c-white) !important;
color: var(--c-brand-600) !important;
border: 1px solid var(--c-brand-100) !important;
border-radius: 12px;
padding: 10px 24px;
font-weight: 500;
text-decoration: none;
display: inline-block;
transition: all var(--motion-duration-fast) var(--motion-ease-standard);
}
.btn-secondary-modern:hover {
background: var(--c-brand-100) !important;
transform: translateY(-1px);
color: var(--c-brand-600) !important;
}
/* Fix for any dark/black secondary buttons */
.btn-secondary,
.btn-outline-dark,
.kjb-button--secondary,
.kjb-button--outline {
background: var(--c-white) !important;
color: var(--c-ink-900) !important;
border: 1px solid var(--c-ink-900) !important;
}
.btn-secondary:hover,
.btn-outline-dark:hover,
.kjb-button--secondary:hover,
.kjb-button--outline:hover {
background: var(--c-ink-900) !important;
color: var(--c-white) !important;
}
/* Ensure dark/black buttons have white text */
.btn-dark,
.btn-black,
.kjb-button--dark,
.kjb-button--black,
[class*="btn"][style*="background: #000"],
[class*="btn"][style*="background: black"],
[class*="btn"][style*="background-color: #000"],
[class*="btn"][style*="background-color: black"],
[class*="btn"][style*="background: var(--c-ink-900)"],
[class*="btn"][style*="background-color: var(--c-ink-900)"] {
color: var(--c-white) !important;
}
/* Fix for primary buttons with dark backgrounds */
.btn-primary[style*="background: #000"],
.btn-primary[style*="background: black"],
.btn-primary[style*="background-color: #000"],
.btn-primary[style*="background-color: black"],
.btn[style*="background: var(--c-ink-900)"],
.btn[style*="background-color: var(--c-ink-900)"] {
color: var(--c-white) !important;
}
/* Ensure all buttons have readable text */
.btn,
.kjb-button,
[class*="btn-"] {
text-decoration: none !important;
}
/* Button Color Utilities for Legacy Support */
.btn-navy {
background-color: var(--an-navy) !important;
color: var(--c-white) !important;
border: none !important;
}
.btn-teal {
background-color: var(--an-teal) !important;
color: var(--c-white) !important;
border: none !important;
}
.btn-coral {
background-color: var(--an-coral) !important;
color: var(--c-white) !important;
border: none !important;
}
.btn-gold {
background-color: var(--an-gold) !important;
color: var(--c-ink-900) !important; /* Dark text on yellow background */
border: none !important;
}
.btn-plum {
background-color: var(--an-plum) !important;
color: var(--c-white) !important;
border: none !important;
}
/* Smart button text color based on background - More specific selectors */
section[style*="background: #5E3BFF"]
.btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
section[style*="background: var(--g-brand)"]
.btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
section[style*="background: var(--c-brand-600)"]
.btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
section[style*="background-color: #5E3BFF"]
.btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
section[style*="background-color: var(--c-brand-600)"]
.btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
section[class*="bg-brand"]
.btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
section[class*="bg-navy"]
.btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
section[class*="bg-plum"]
.btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
section[class*="bg-dark"]
.btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
section[class*="bg-black"]
.btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
.bg-brand .btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
.bg-navy .btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
.bg-plum .btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
.bg-dark .btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
.bg-black .btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern) {
color: var(--c-white) !important;
}
/* Also handle coral/teal dark backgrounds */
section[style*="background: var(--an-coral)"]
.btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
section[style*="background: var(--an-teal)"]
.btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
section[style*="background-color: var(--an-coral)"]
.btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
section[style*="background-color: var(--an-teal)"]
.btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
section[class*="bg-coral"]
.btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
section[class*="bg-teal"]
.btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
.bg-coral .btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern),
.bg-teal .btn:not(.btn-secondary):not(.btn-light):not(.btn-secondary-modern) {
color: var(--c-white) !important;
}
/* Removed problematic button color override - let specific button classes handle their own colors */
/* Brand Voice Typography */
.text-therapist {
font-family: var(--font-primary);
font-weight: 500;
line-height: 1.7;
color: var(--c-ink-700);
}
.text-emotional {
font-style: italic;
color: var(--c-accent-peach);
font-weight: 500;
}
/* Micro-labels */
.micro-label {
display: inline-flex;
align-items: center;
font-size: var(--fs-caption);
color: var(--c-ink-500);
text-transform: uppercase;
letter-spacing: 0.05em;
font-weight: 600;
}
.micro-label::before {
content: "✨";
margin-right: 6px;
color: var(--c-accent-peach);
}
/* Card Hover States */
.card-hover {
transition: all var(--motion-duration-base) var(--motion-ease-spring);
}
.card-hover:hover {
transform: translateY(-4px);
box-shadow: 0 12px 24px rgba(94, 59, 255, 0.08);
}
/* If button has dark background, ensure white text */
.btn[style*="background-color: #000"],
.btn[style*="background-color: black"],
.btn[style*="background: #000"],
.btn[style*="background: black"],
.kjb-button[style*="background-color: #000"],
.kjb-button[style*="background: black"] {
color: var(--c-white) !important;
}
/* Smart button text color based on background */
/* Only apply dark text to buttons we know have light backgrounds */
a.btn.btn-secondary,
a.btn.btn-light,
a.kjb-button--secondary {
color: var(--c-ink-900) !important;
}
/* Ensure buttons on dark backgrounds have white text */
section[style*="background: var(--g-brand)"]
.btn:not(.btn-secondary):not(.btn-light),
section[style*="background-color: #5E3BFF"]
.btn:not(.btn-secondary):not(.btn-light),
section[style*="background-color: #4025E0"]
.btn:not(.btn-secondary):not(.btn-light),
section[style*="background-color: #000"]
.btn:not(.btn-secondary):not(.btn-light),
section[style*="background: #000"] .btn:not(.btn-secondary):not(.btn-light),
section[style*="background: linear-gradient"]
.btn:not(.btn-secondary):not(.btn-light),
.bg-dark .btn:not(.btn-secondary):not(.btn-light),
.section-navy .btn:not(.btn-secondary):not(.btn-light),
.section-purple .btn:not(.btn-secondary):not(.btn-light),
.an-stats-bar[style*="--g-brand"] .btn:not(.btn-secondary):not(.btn-light) {
color: var(--c-white) !important;
}
/* Fix for buttons with inline dark backgrounds */
.btn[style*="background-color: #5E3BFF"],
.btn[style*="background: #5E3BFF"],
.btn[style*="background-color: #4025E0"],
.btn[style*="background: #4025E0"],
.btn[style*="background: var(--c-brand-600)"],
.btn[style*="background: var(--c-brand-800)"],
.btn[style*="background: var(--g-brand)"] {
color: var(--c-white) !important;
}
/* Ensure secondary/light buttons always have dark text */
.btn-secondary,
.btn-light,
.btn-secondary-modern {
color: var(--c-ink-900) !important;
background: var(--c-white) !important;
}
/* Fix outline buttons on dark backgrounds */
section[style*="background: var(--g-brand)"] [class*="btn-outline"],
section[style*="background-color: #5E3BFF"] [class*="btn-outline"],
section[style*="background-color: #4025E0"] [class*="btn-outline"],
section[style*="background: linear-gradient"] [class*="btn-outline"],
.bg-dark [class*="btn-outline"],
.section-navy [class*="btn-outline"],
.section-purple [class*="btn-outline"] {
color: var(--c-white) !important;
border-color: var(--c-white) !important;
}
.btn-outline-primary:hover,
.btn-outline-secondary:hover {
color: var(--c-white) !important;
}
/* Ensure outline buttons always have readable text */
[class*="btn-outline"] {
background: transparent !important;
}
/* Fix Kajabi's default button styles that might cause issues */
.kjb-button {
text-decoration: none !important;
}
.kjb-button--secondary,
.kjb-button:not(.kjb-button--primary) {
background: var(--c-white) !important;
color: var(--c-ink-900) !important;
border: 1px solid var(--c-ink-200) !important;
}
.kjb-button--secondary:hover,
.kjb-button:not(.kjb-button--primary):hover {
background: var(--c-ink-100) !important;
color: var(--c-ink-900) !important;
}
/* Modern Card Styles */
.card-modern {
background: var(--c-white);
border-radius: 16px;
padding: 32px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05);
transition: all var(--motion-duration-base) var(--motion-ease-standard);
}
.card-modern:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
/* Modern Effects */
.glow-brand {
box-shadow: 0 0 48px rgba(94, 59, 255, 0.15);
}
.hover-lift {
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.hover-lift:hover {
transform: translateY(-4px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
/* Animation classes now handled by animation_utilities.liquid */
/* High contrast mode support */
@media (prefers-contrast: high) {
.progress__inner,
.progress__fill {
border: 1px solid;
}
.btn {
border-width: 2px !important;
}
}
/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
*,
*::before,
*::after {
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* Focus styles for interactive elements */
.btn:focus-visible,
.element_button:focus-visible,
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
outline: 2px solid var(--an-primary, #5e3bff);
outline-offset: 2px;
}
/* Ensure interactive elements have minimum touch target */
.btn,
button,
a[role="button"],
input[type="submit"],
input[type="button"] {
min-height: 44px;
min-width: 44px;
}
/* ==========================================================================
JavaScript Transition Support
Added: 2025-01-18
========================================================================== */
/* Mobile menu slide transition (replaces jQuery slideToggle) */
.header__content--mobile {
transition:
opacity var(--motion-duration-base) var(--motion-ease-standard),
transform var(--motion-duration-base) var(--motion-ease-standard);
opacity: 0;
transform: translateY(-10px);
}
.header__content--mobile.is-open {
opacity: 1;
transform: translateY(0);
}
/* Smooth scroll behavior for modern browsers */
@supports (scroll-behavior: smooth) {
html {
scroll-behavior: smooth;
}
}
/* ==========================================================================
16. Responsive Utilities
========================================================================== */
/* Mobile-only utilities (max-width: 767px) */
@media (max-width: 767px) {
.hidden--mobile {
display: none !important;
}
.block--mobile {
display: block !important;
}
.flex--mobile {
display: flex !important;
}
.text-center--mobile {
text-align: center !important;
}
.text-left--mobile {
text-align: left !important;
}
.text-right--mobile {
text-align: right !important;
}
.mt-0--mobile {
margin-top: 0 !important;
}
.mt-2--mobile {
margin-top: var(--an-space-md) !important;
}
.mt-3--mobile {
margin-top: var(--an-space-lg) !important;
}
.mb-0--mobile {
margin-bottom: 0 !important;
}
.mb-2--mobile {
margin-bottom: var(--an-space-md) !important;
}
.mb-3--mobile {
margin-bottom: var(--an-space-lg) !important;
}
.pt-0--mobile {
padding-top: 0 !important;
}
.pt-2--mobile {
padding-top: var(--an-space-md) !important;
}
.pt-3--mobile {
padding-top: var(--an-space-lg) !important;
}
.pb-0--mobile {
padding-bottom: 0 !important;
}
.pb-2--mobile {
padding-bottom: var(--an-space-md) !important;
}
.pb-3--mobile {
padding-bottom: var(--an-space-lg) !important;
}
.w-full--mobile {
width: 100% !important;
}
.flex-column--mobile {
flex-direction: column !important;
}
}
/* Tablet-only utilities (768px - 991px) */
@media (min-width: 768px) and (max-width: 991px) {
.hidden--tablet {
display: none !important;
}
.block--tablet {
display: block !important;
}
.flex--tablet {
display: flex !important;
}
}
/* Desktop-only utilities (992px+) */
@media (min-width: 992px) {
.hidden--desktop {
display: none !important;
}
.block--desktop {
display: block !important;
}
.flex--desktop {
display: flex !important;
}
.text-center--desktop {
text-align: center !important;
}
.text-left--desktop {
text-align: left !important;
}
.text-right--desktop {
text-align: right !important;
}
}
/* Tablet and up (768px+) */
@media (min-width: 768px) {
.hidden--tablet-up {
display: none !important;
}
.block--tablet-up {
display: block !important;
}
.flex--tablet-up {
display: flex !important;
}
.text-lg--tablet-up {
font-size: var(--an-font-lg) !important;
}
.text-xl--tablet-up {
font-size: var(--an-font-xl) !important;
}
.text-2xl--tablet-up {
font-size: var(--an-font-2xl) !important;
}
.mt-4--tablet-up {
margin-top: var(--an-space-xl) !important;
}
.mb-4--tablet-up {
margin-bottom: var(--an-space-xl) !important;
}
.pt-4--tablet-up {
padding-top: var(--an-space-xl) !important;
}
.pb-4--tablet-up {
padding-bottom: var(--an-space-xl) !important;
}
.flex-row--tablet-up {
flex-direction: row !important;
}
.w-auto--tablet-up {
width: auto !important;
}
}
/* ==========================================================================
17. Component-Specific Utilities
========================================================================== */
/* ==========================================================================
18. Icon System Styles
Added: 2025-01-20
========================================================================== */
/* Base icon styles */
.icon {
display: inline-block;
vertical-align: middle;
flex-shrink: 0;
transition: all var(--an-transition-base);
}
/* Icon sizing */
.icon-xs {
width: 12px;
height: 12px;
}
.icon-sm {
width: 16px;
height: 16px;
}
.icon-md {
width: 20px;
height: 20px;
}
.icon-lg {
width: 24px;
height: 24px;
}
.icon-xl {
width: 32px;
height: 32px;
}
.icon-2xl {
width: 48px;
height: 48px;
}
/* Social icon specific styles */
.icon-social {
transition:
transform var(--an-transition-base),
opacity var(--an-transition-base),
color var(--an-transition-base);
}
.icon-social:hover {
transform: translateY(-2px);
opacity: 0.8;
}
/* Icon in buttons */
.btn .icon {
margin-right: 0.5em;
}
.btn .icon:last-child {
margin-right: 0;
margin-left: 0.5em;
}
.btn .icon:only-child {
margin: 0;
}
/* Icon colors */
.icon-brand {
color: var(--c-brand-600);
}
.icon-teal {
color: var(--c-accent-teal);
}
.icon-peach {
color: var(--c-accent-peach);
}
.icon-lemon {
color: var(--c-accent-lemon);
}
.icon-muted {
color: var(--c-ink-400);
}
/* Icon containers */
.icon-circle {
display: inline-flex;
align-items: center;
justify-content: center;
width: 40px;
height: 40px;
border-radius: 50%;
background: var(--c-brand-100);
transition: all var(--an-transition-base);
}
.icon-circle:hover {
background: var(--c-brand-600);
color: white;
}
.icon-circle .icon {
width: 20px;
height: 20px;
}
/* Social icons container styles */
.social-icons__icon {
display: inline-flex;
align-items: center;
justify-content: center;
text-decoration: none;
color: currentColor;
transition: all var(--an-transition-base);
}
.social-icons__icon--small .icon {
width: 16px;
height: 16px;
}
.social-icons__icon--medium .icon {
width: 20px;
height: 20px;
}
.social-icons__icon--large .icon {
width: 24px;
height: 24px;
}
/* ==========================================================================
19. Enhanced Background Textures & SVG Shapes
========================================================================== */
/* Sticky Mobile CTA Support */
body.has-sticky-cta {
padding-bottom: 90px !important; /* Space for sticky footer on mobile */
}
@media (min-width: 992px) {
body.has-sticky-cta {
padding-bottom: 0 !important; /* No padding on desktop */
}
}
/* Section utilities */
.section-navy {
background-color: var(--an-navy) !important;
color: var(--an-white) !important;
}
.section-teal {
background-color: var(--an-teal) !important;
color: var(--an-white) !important;
}
.section-coral {
background-color: var(--an-coral) !important;
color: var(--an-white) !important;
}
.section-peach {
background-color: var(--an-peach) !important;
color: var(--an-slate) !important;
}
.section-grey {
background-color: var(--an-grey) !important;
color: var(--an-slate) !important;
}
/* Button variant utilities */
.btn-navy {
background-color: var(--an-navy) !important;
border-color: var(--an-navy) !important;
color: var(--an-white) !important;
}
.btn-navy:hover {
background-color: var(--an-teal) !important;
border-color: var(--an-teal) !important;
}
.btn-teal {
background-color: var(--an-teal) !important;
border-color: var(--an-teal) !important;
color: var(--an-white) !important;
}
.btn-teal:hover {
background-color: #239a98 !important;
border-color: #239a98 !important;
}
.btn-coral {
background-color: var(--an-coral) !important;
border-color: var(--an-coral) !important;
color: var(--an-white) !important;
}
.btn-coral:hover {
background-color: #f4695a !important;
border-color: #f4695a !important;
}
.btn-outline-navy {
background-color: transparent !important;
border-color: var(--an-navy) !important;
color: var(--an-navy) !important;
}
.btn-outline-navy:hover {
background-color: var(--an-navy) !important;
color: var(--an-white) !important;
}
.btn-outline-teal {
background-color: transparent !important;
border-color: var(--an-teal) !important;
color: var(--an-teal) !important;
}
.btn-outline-teal:hover {
background-color: var(--an-teal) !important;
color: var(--an-white) !important;
}
/* Card utilities */
.card-shadow {
box-shadow: var(--an-shadow-md) !important;
transition: box-shadow var(--an-transition-base) !important;
}
.card-shadow:hover {
box-shadow: var(--an-shadow-lg) !important;
}
.card-border {
border: 1px solid var(--an-border) !important;
border-radius: var(--an-radius-md) !important;
}
/* Badge utilities */
.badge {
display: inline-block !important;
padding: 4px 12px !important;
font-size: var(--an-font-sm) !important;
font-weight: 600 !important;
border-radius: var(--an-radius-full) !important;
line-height: 1 !important;
}
.badge-navy {
background-color: var(--an-navy) !important;
color: var(--an-white) !important;
}
.badge-teal {
background-color: var(--an-teal) !important;
color: var(--an-white) !important;
}
.badge-coral {
background-color: var(--an-coral) !important;
color: var(--an-white) !important;
}
.badge-gold {
background-color: var(--an-gold) !important;
color: var(--an-navy) !important;
}
.badge-plum {
background-color: var(--an-plum) !important;
color: var(--an-white) !important;
}
/* Container utilities */
.container-narrow {
max-width: 768px !important;
margin-left: auto !important;
margin-right: auto !important;
}
.container-wide {
max-width: 1400px !important;
margin-left: auto !important;
margin-right: auto !important;
}
/* Animation utilities */
/* animate-fade-in class using fadeIn from animation_utilities.liquid */
/* animate-slide-up class using slideUp from animation_utilities.liquid */
/* fadeIn and slideUp animations moved to animation_utilities.liquid */
/* Hover state utilities */
.hover-lift:hover {
transform: translateY(-4px) !important;
}
.hover-grow:hover {
transform: scale(1.05) !important;
}
.hover-shadow:hover {
box-shadow: var(--an-shadow-lg) !important;
}
.hover-opacity:hover {
opacity: 0.8 !important;
}
/* State utilities */
.disabled {
opacity: 0.5 !important;
cursor: not-allowed !important;
pointer-events: none !important;
}
/* Active state for navigation items only */
.nav-item.active,
.link-list__item.active {
background-color: var(--an-teal) !important;
color: var(--an-white) !important;
}
/* ==========================================================================
18. Book Page Enhancements - Securely Attached
Added: 2025-01-18
========================================================================== */
/* Hero Section for Book Pages */
.hero-section--book {
background: linear-gradient(135deg, var(--an-peach) 0%, var(--an-white) 100%);
min-height: 60vh;
display: flex;
align-items: center;
position: relative;
overflow: hidden;
}
.hero-section--book::before {
content: "";
position: absolute;
top: -50%;
right: -10%;
width: 70%;
height: 150%;
background: radial-gradient(
circle,
rgba(255, 198, 63, 0.1) 0%,
transparent 70%
);
border-radius: 50%;
pointer-events: none;
}
.hero-section--book .hero-title {
color: var(--an-navy);
font-size: clamp(2rem, 5vw, 3.5rem);
line-height: 1.2;
margin-bottom: var(--an-space-lg);
font-weight: 800;
}
.hero-section--book .hero-subtitle {
color: var(--an-slate);
font-size: clamp(1.125rem, 3vw, 1.5rem);
line-height: 1.6;
max-width: 700px;
margin: 0 auto var(--an-space-xl);
}
.hero-section--book .hero-badge {
display: inline-block;
background: var(--an-teal);
color: var(--an-white);
padding: var(--an-space-sm) var(--an-space-lg);
border-radius: var(--an-radius-full);
font-size: 0.875rem;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
margin-bottom: var(--an-space-lg);
animation: animate-fade-in 0.6s ease-out;
}
/* Book Overview Section */
.book-overview {
padding: var(--an-space-3xl) 0;
background: var(--an-white);
}
.book-overview__grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--an-space-3xl);
align-items: center;
max-width: 1200px;
margin: 0 auto;
}
.book-overview__content h2 {
color: var(--an-navy);
font-size: clamp(1.75rem, 4vw, 2.5rem);
margin-bottom: var(--an-space-lg);
font-weight: 700;
}
.book-overview__content p {
color: var(--an-slate);
font-size: 1.125rem;
line-height: 1.8;
margin-bottom: var(--an-space-md);
}
.book-overview__image {
position: relative;
text-align: center;
}
.book-overview__image img {
max-width: 400px;
width: 100%;
height: auto;
filter: drop-shadow(0 25px 50px rgba(26, 45, 78, 0.15));
transition: transform var(--an-transition-slow);
}
.book-overview__image:hover img {
transform: translateY(-10px);
}
/* Key Features/Benefits Grid */
.book-features {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
gap: var(--an-space-xl);
margin-top: var(--an-space-3xl);
}
.book-feature {
background: var(--an-grey);
padding: var(--an-space-xl);
border-radius: var(--an-radius-lg);
transition: all var(--an-transition-base);
border: 2px solid transparent;
}
.book-feature:hover {
border-color: var(--an-teal);
transform: translateY(-5px);
box-shadow: 0 15px 30px rgba(42, 179, 177, 0.1);
}
.book-feature__icon {
width: 60px;
height: 60px;
background: var(--an-teal);
border-radius: var(--an-radius-full);
display: flex;
align-items: center;
justify-content: center;
margin-bottom: var(--an-space-lg);
font-size: 1.5rem;
color: var(--an-white);
}
.book-feature h3 {
color: var(--an-navy);
font-size: 1.25rem;
margin-bottom: var(--an-space-md);
font-weight: 600;
}
.book-feature p {
color: var(--an-slate);
line-height: 1.6;
}
/* Enhanced Book Section Quotes */
.book__quote-text--enhanced {
position: relative;
padding-left: var(--an-space-xl);
}
.book__quote-text--enhanced::before {
content: '"';
position: absolute;
left: 0;
top: -10px;
font-size: 4rem;
color: var(--an-teal);
opacity: 0.3;
font-family: Georgia, serif;
line-height: 1;
}
/* Testimonial Cards */
.testimonial-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(350px, 1fr));
gap: var(--an-space-xl);
margin: var(--an-space-3xl) 0;
}
.testimonial-card {
background: var(--an-white);
padding: var(--an-space-xl);
border-radius: var(--an-radius-lg);
box-shadow: 0 5px 20px rgba(26, 45, 78, 0.08);
transition: all var(--an-transition-base);
border: 1px solid var(--an-border);
}
.testimonial-card:hover {
transform: translateY(-5px);
box-shadow: 0 10px 30px rgba(26, 45, 78, 0.12);
}
.testimonial-card__header {
display: flex;
align-items: center;
margin-bottom: var(--an-space-lg);
}
.testimonial-card__author {
font-weight: 600;
color: var(--an-navy);
margin-right: auto;
}
.testimonial-card__stars {
display: flex;
gap: 2px;
color: var(--an-gold);
}
.testimonial-card__content {
color: var(--an-slate);
line-height: 1.8;
font-style: italic;
}
/* CTA Sections */
.book-cta {
background: linear-gradient(135deg, var(--an-navy) 0%, var(--an-plum) 100%);
color: var(--an-white);
padding: var(--an-space-3xl) 0;
text-align: center;
position: relative;
overflow: hidden;
}
.book-cta::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('data:image/svg+xml,');
pointer-events: none;
}
.book-cta h2 {
font-size: clamp(2rem, 5vw, 3rem);
margin-bottom: var(--an-space-lg);
position: relative;
}
.book-cta p {
font-size: 1.25rem;
margin-bottom: var(--an-space-xl);
opacity: 0.9;
max-width: 600px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.book-cta .btn {
font-size: 1.125rem;
padding: var(--an-space-md) var(--an-space-xl);
position: relative;
}
/* Enhanced Buy Links */
.book-buy--enhanced {
background: var(--an-grey);
padding: var(--an-space-2xl) 0;
}
.book-buy__cta--primary {
background: var(--an-coral) !important;
font-size: 1.125rem !important;
padding: var(--an-space-md) var(--an-space-2xl) !important;
box-shadow: 0 4px 15px rgba(245, 124, 111, 0.3);
position: relative;
overflow: hidden;
}
.book-buy__cta--primary::before {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
transform: translate(-50%, -50%);
transition:
width var(--motion-duration-slow) var(--motion-ease-standard),
height var(--motion-duration-slow) var(--motion-ease-standard);
}
.book-buy__cta--primary:hover::before {
width: 300px;
height: 300px;
}
/* Mobile Responsiveness */
@media (max-width: 991px) {
.book-overview__grid {
grid-template-columns: 1fr;
text-align: center;
}
.book-overview__image {
order: -1;
margin-bottom: var(--an-space-xl);
}
.testimonial-grid {
grid-template-columns: 1fr;
}
}
@media (max-width: 767px) {
.hero-section--book {
min-height: 50vh;
}
.book-features {
grid-template-columns: 1fr;
}
.book-feature {
text-align: center;
}
.book-feature__icon {
margin: 0 auto var(--an-space-lg);
}
.testimonial-card {
padding: var(--an-space-lg);
}
.book-cta {
padding: var(--an-space-2xl) var(--an-space-lg);
}
}
/* ==========================================================================
18. New Brand Component Styles
========================================================================== */
/* Hero Sections with Lavender Background */
.hero-section,
.section-hero {
background: var(--c-brand-100);
padding: var(--space-2xl) 0;
text-align: center;
}
.hero-section h1,
.section-hero h1 {
font-size: var(--fs-display);
color: var(--c-ink-900);
margin-bottom: var(--space-md);
}
.hero-section .subtitle,
.section-hero .subtitle {
font-size: var(--fs-body-lg);
color: var(--c-ink-700);
margin-bottom: var(--space-lg);
max-width: 560px;
margin-left: auto;
margin-right: auto;
}
/* Hero Video Frame */
.hero-video {
max-width: 900px;
margin: var(--space-xl) auto 0;
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-media);
}
/* Cards with New Design */
.card {
background: var(--c-white);
border-radius: var(--radius-md);
box-shadow: var(--shadow-card);
padding: var(--space-lg) var(--space-md);
transition: all var(--motion-duration-fast) var(--motion-ease-standard);
}
.card:hover {
transform: translateY(-4px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
.card-icon {
color: var(--c-brand-600);
font-size: 32px;
margin-bottom: var(--space-md);
}
/* Feature Blocks */
.feature-block {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--space-2xl);
align-items: center;
padding: var(--space-2xl) 0;
}
.feature-block:nth-child(even) {
direction: rtl;
}
.feature-block:nth-child(even) > * {
direction: ltr;
}
.feature-block__content {
max-width: 560px;
}
.feature-block__label {
color: var(--c-accent-peach);
font-size: var(--fs-caption);
font-weight: 500;
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: var(--space-sm);
}
.feature-block__title {
font-size: var(--fs-h2);
color: var(--c-ink-900);
margin-bottom: var(--space-md);
}
.feature-block__description {
font-size: var(--fs-body);
color: var(--c-ink-700);
margin-bottom: var(--space-lg);
}
.feature-block__image {
border-radius: var(--radius-md);
overflow: hidden;
box-shadow: var(--shadow-media);
}
/* Full-width CTA Footer */
.cta-footer {
background: var(--c-white);
border-radius: var(--radius-lg);
padding: var(--space-2xl);
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04) inset;
text-align: center;
margin: var(--space-2xl) 0;
}
.cta-footer h2 {
font-size: 2rem;
color: var(--c-ink-900);
margin-bottom: var(--space-lg);
}
.cta-footer.in-view {
/* Using fadeUp from animation_utilities.liquid */
}
/* fadeUp animation moved to animation_utilities.liquid */
/* Forms & Inputs */
.input,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="tel"],
input[type="url"],
textarea,
select {
min-height: 44px;
border: 1px solid var(--c-brand-100);
border-radius: var(--radius-sm);
padding: 10px 16px;
font-size: var(--fs-body);
transition: all var(--motion-duration-fast) var(--motion-ease-decelerate);
width: 100%;
}
.input:focus,
input:focus,
textarea:focus,
select:focus {
outline: none;
border-color: var(--c-brand-600);
box-shadow: 0 0 0 2px rgba(94, 59, 255, 0.2);
}
/* Badge Styles */
.badge {
display: inline-block;
padding: 4px 12px;
border-radius: var(--radius-pill);
font-size: var(--fs-caption);
font-weight: 500;
line-height: 1;
}
.badge-new {
background: var(--c-accent-lemon);
color: var(--c-ink-900);
}
.badge-teal {
background: var(--c-accent-teal);
color: var(--c-white);
}
/* Animation Classes */
.hover-lift {
transition: transform var(--motion-duration-fast)
var(--motion-ease-decelerate);
}
.hover-lift:hover {
transform: translateY(-2px);
}
.hover-shadow {
transition: box-shadow var(--motion-duration-fast)
var(--motion-ease-decelerate);
}
.hover-shadow:hover {
box-shadow: var(--shadow-media);
}
/* Animation classes moved to animation_utilities.liquid */
/* Responsive adjustments */
@media (max-width: 768px) {
.feature-block {
grid-template-columns: 1fr;
gap: var(--space-lg);
}
.feature-block:nth-child(even) {
direction: ltr;
}
.hero-section h1,
.section-hero h1 {
font-size: 2rem;
}
.cta-footer {
padding: var(--space-lg);
}
}
/* ==========================================================================
18. Sidebar Hover Effects
Added: 2025-01-19
========================================================================== */
/* Sidebar title hover effects */
.sidebar-recent-posts__title,
.sidebar-categories__category,
.sidebar-search h3,
.sidebar-social h3,
.sidebar-cta h3,
.sidebar-instructor h3,
.blog-sidebar h2,
.blog-sidebar h3,
.blog-sidebar h4,
.newsletter-sidebar h2,
.newsletter-sidebar h3,
.newsletter-sidebar h4 {
transition:
color var(--motion-duration-base) var(--motion-ease-standard),
transform var(--motion-duration-fast) var(--motion-ease-standard);
display: inline-block;
position: relative;
}
/* Hover effect for sidebar titles and links */
.sidebar-recent-posts__title:hover,
.sidebar-categories__category:hover,
.blog-sidebar a:hover,
.newsletter-sidebar a:hover {
color: var(--c-brand-600) !important;
transform: translateX(4px);
}
/* Sidebar section titles hover effect */
.sidebar-recent-posts__heading,
.sidebar-categories h3,
.sidebar-search h3,
.sidebar-social h3,
.sidebar-cta h3,
.sidebar-instructor h3,
.blog-sidebar h2,
.blog-sidebar h3,
.newsletter-sidebar h2,
.newsletter-sidebar h3 {
transition: color 0.3s ease;
cursor: default;
position: relative;
}
/* Add underline animation on hover for section titles */
.sidebar-recent-posts__heading::after,
.sidebar-categories h3::after,
.sidebar-search h3::after,
.sidebar-social h3::after,
.sidebar-cta h3::after,
.sidebar-instructor h3::after,
.blog-sidebar h2::after,
.blog-sidebar h3::after,
.newsletter-sidebar h2::after,
.newsletter-sidebar h3::after {
content: "";
position: absolute;
bottom: -2px;
left: 0;
width: 0;
height: 2px;
background-color: var(--c-accent-teal);
transition: width var(--motion-duration-slow) var(--motion-ease-standard);
}
.sidebar-recent-posts__heading:hover::after,
.sidebar-categories h3:hover::after,
.sidebar-search h3:hover::after,
.sidebar-social h3:hover::after,
.sidebar-cta h3:hover::after,
.sidebar-instructor h3:hover::after,
.blog-sidebar h2:hover::after,
.blog-sidebar h3:hover::after,
.newsletter-sidebar h2:hover::after,
.newsletter-sidebar h3:hover::after {
width: 100%;
}
/* Tag hover effects */
.sidebar-recent-posts__tag,
.tag {
transition: all var(--motion-duration-base) var(--motion-ease-standard);
text-decoration: none !important;
}
.sidebar-recent-posts__tag:hover,
.tag:hover {
background-color: var(--c-brand-600) !important;
color: white !important;
transform: translateY(-2px);
box-shadow: 0 4px 8px rgba(94, 59, 255, 0.2);
}
/* Category links hover effect */
.sidebar-categories a {
transition: all var(--motion-duration-base) var(--motion-ease-standard);
text-decoration: none !important;
position: relative;
display: block;
padding: 8px 0;
}
.sidebar-categories a:hover {
color: var(--c-brand-600) !important;
padding-left: 8px;
}
/* Social icons hover effect */
.sidebar-social a,
.sidebar-social-share a {
transition:
transform var(--motion-duration-base) var(--motion-ease-standard),
opacity var(--motion-duration-base) var(--motion-ease-standard);
}
.sidebar-social a:hover,
.sidebar-social-share a:hover {
transform: translateY(-3px) scale(1.1);
opacity: 0.8;
}
/* CTA button hover effect in sidebar */
.sidebar-cta .btn {
transition: all var(--motion-duration-base) var(--motion-ease-standard) !important;
}
.sidebar-cta .btn:hover {
transform: translateY(-2px) !important;
box-shadow: 0 6px 20px rgba(94, 59, 255, 0.3) !important;
}
/* Search input focus effect */
.sidebar-search input[type="search"],
.sidebar-search input[type="text"] {
transition: all var(--motion-duration-base) var(--motion-ease-standard);
border: 1px solid #e0e0e0;
}
.sidebar-search input[type="search"]:focus,
.sidebar-search input[type="text"]:focus {
border-color: var(--c-brand-600);
box-shadow: 0 0 0 3px rgba(94, 59, 255, 0.1);
outline: none;
}
/* Instructor info hover effect */
.sidebar-instructor img {
transition:
transform 0.3s ease,
box-shadow 0.3s ease;
}
.sidebar-instructor:hover img {
transform: scale(1.05);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
}
/* ==========================================================================
Section: Pay What You Can (PWYC) Pricing
Added: 2025-01-20
========================================================================== */
/* PWYC Card Utilities */
.pwyc-card-grid-2 {
grid-template-columns: repeat(2, 1fr) !important;
}
.pwyc-card-grid-3 {
grid-template-columns: repeat(3, 1fr) !important;
}
.pwyc-card-grid-4 {
grid-template-columns: repeat(4, 1fr) !important;
}
/* PWYC Animation Utilities */
.pwyc-hover-lift:hover {
transform: translateY(-8px) !important;
}
.pwyc-hover-scale:hover {
transform: scale(1.05) !important;
}
.pwyc-selected-glow {
box-shadow: 0 0 0 4px rgba(94, 59, 255, 0.2) !important;
}
/* PWYC Badge Positions */
.pwyc-badge-top-left {
top: var(--an-space-md) !important;
left: var(--an-space-md) !important;
right: auto !important;
}
.pwyc-badge-top-right {
top: var(--an-space-md) !important;
right: var(--an-space-md) !important;
left: auto !important;
}
.pwyc-badge-top-center {
top: -12px !important;
left: 50% !important;
transform: translateX(-50%) !important;
}
/* PWYC Price Sizes */
.pwyc-price-small {
font-size: var(--an-font-2xl) !important;
}
.pwyc-price-medium {
font-size: var(--an-font-3xl) !important;
}
.pwyc-price-large {
font-size: var(--an-font-4xl) !important;
}
/* PWYC Card States */
.pwyc-disabled {
opacity: 0.5 !important;
cursor: not-allowed !important;
pointer-events: none !important;
}
.pwyc-recommended {
border-width: 3px !important;
border-color: var(--c-brand-600) !important;
background: linear-gradient(
135deg,
transparent 0%,
var(--c-brand-100) 100%
) !important;
}
/* PWYC Responsive Overrides */
@media (max-width: 767px) {
.pwyc-mobile-stack {
grid-template-columns: 1fr !important;
}
.pwyc-mobile-scroll {
display: flex !important;
overflow-x: auto !important;
scroll-snap-type: x mandatory !important;
}
.pwyc-mobile-scroll > * {
flex: 0 0 280px !important;
scroll-snap-align: center !important;
}
}
/* ==========================================================================
Section: Testimonials
Added: 2025-01-20
========================================================================== */
/* Testimonial Card Utilities */
.testimonial-masonry {
column-count: 3 !important;
column-gap: var(--an-space-xl) !important;
}
.testimonial-masonry .testimonial-card {
break-inside: avoid !important;
margin-bottom: var(--an-space-xl) !important;
}
@media (max-width: 991px) {
.testimonial-masonry {
column-count: 2 !important;
}
}
@media (max-width: 767px) {
.testimonial-masonry {
column-count: 1 !important;
}
}
/* Testimonial Variations */
.testimonial-minimal .testimonial-card__author {
display: none !important;
}
.testimonial-minimal .testimonial-card__rating {
text-align: center !important;
}
.testimonial-compact {
padding: var(--an-space-lg) !important;
}
.testimonial-compact .testimonial-card__quote {
font-size: var(--an-font-sm) !important;
}
/* Testimonial Themes */
.testimonial-dark {
background: var(--an-text-dark) !important;
color: var(--an-white) !important;
}
.testimonial-dark .testimonial-card__quote,
.testimonial-dark .testimonial-card__details {
color: rgba(255, 255, 255, 0.8) !important;
}
.testimonial-dark .testimonial-card__name {
color: var(--an-white) !important;
}
/* Testimonial Animations */
.testimonial-hover-quote:hover .testimonial-card__quote {
transform: scale(1.02) !important;
transition: transform var(--an-transition-base) !important;
}
.testimonial-hover-shadow:hover {
box-shadow: 0 12px 40px rgba(94, 59, 255, 0.15) !important;
}
/* Star Rating Variations */
.stars-large .star {
font-size: 24px !important;
}
.stars-small .star {
font-size: 16px !important;
}
.stars-brand .star--filled {
color: var(--c-brand-600) !important;
}
.stars-teal .star--filled {
color: var(--c-accent-teal) !important;
}
/* ==========================================================================
Section: Securely Attached Book Pages
Added: 2025-01-20
========================================================================== */
/* SA Hero Section */
.sa-hero {
position: relative;
overflow: hidden;
}
/* SA Book Showcase */
.sa-book-showcase .book-showcase-visual {
position: relative;
max-width: 500px;
margin: 0 auto;
}
/* SA Workbook Preview */
.sa-workbook-preview {
position: relative;
}
/* Float animation removed - using the one from line 1942 */
/* Animation classes moved to animation_utilities.liquid */
/* SA Free Chapter CTA */
.sa-free-chapter-cta form button:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(24, 213, 228, 0.3);
}
.sa-free-chapter-cta input:focus {
outline: none;
box-shadow: 0 0 0 3px rgba(24, 213, 228, 0.2);
}
/* SA Purchase CTA */
.sa-purchase-cta .card-modern {
transition: all var(--motion-duration-base) var(--motion-ease-decelerate);
}
.sa-purchase-cta .card-modern:hover {
transform: translateY(-4px);
box-shadow: 0 12px 32px rgba(0, 0, 0, 0.1);
}
/* SA User Reviews */
.sa-user-reviews .card-modern {
transition: all var(--motion-duration-base) var(--motion-ease-decelerate);
}
.sa-user-reviews .card-modern:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}
/* ==========================================================================
Section Utility Classes - For Common Section Patterns
Added: 2025-01-24
========================================================================== */
/* Section background presets with appropriate text colors */
.section-light {
background-color: var(--c-brand-100) !important;
color: var(--c-ink-900) !important;
}
.section-dark {
background-color: var(--c-ink-900) !important;
color: var(--c-white) !important;
}
.section-dark h1,
.section-dark h2,
.section-dark h3,
.section-dark h4,
.section-dark h5,
.section-dark h6 {
color: var(--c-white) !important;
}
.section-accent {
background-color: var(--c-accent-teal) !important;
color: var(--c-ink-900) !important;
}
.section-white {
background-color: var(--c-white) !important;
color: var(--c-ink-700) !important;
}
.section-grey {
background-color: #fafafa !important;
color: var(--c-ink-700) !important;
}
/* Modern brand-specific sections */
.section-brand {
background: var(--g-brand) !important;
color: var(--c-white) !important;
}
.section-brand h1,
.section-brand h2,
.section-brand h3,
.section-brand h4,
.section-brand h5,
.section-brand h6 {
color: var(--c-white) !important;
}
/* Legacy color mappings for older sections */
.section-navy {
background-color: var(--an-navy) !important;
color: var(--an-white) !important;
}
.section-navy h1,
.section-navy h2,
.section-navy h3,
.section-navy h4,
.section-navy h5,
.section-navy h6 {
color: var(--an-white) !important;
}
.section-teal {
background-color: var(--an-teal) !important;
color: var(--an-text-dark) !important;
}
.section-coral {
background-color: var(--an-coral) !important;
color: var(--an-text-dark) !important;
}
.section-peach {
background-color: var(--an-peach) !important;
color: var(--an-text-dark) !important;
}
/* Common section padding utilities */
.section-padding-sm {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
.section-padding-md {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
.section-padding-lg {
padding-top: 80px !important;
padding-bottom: 80px !important;
}
.section-padding-xl {
padding-top: 100px !important;
padding-bottom: 100px !important;
}
/* Responsive section padding */
@media (max-width: 767px) {
.section-padding-sm {
padding-top: 30px !important;
padding-bottom: 30px !important;
}
.section-padding-md {
padding-top: 40px !important;
padding-bottom: 40px !important;
}
.section-padding-lg {
padding-top: 50px !important;
padding-bottom: 50px !important;
}
.section-padding-xl {
padding-top: 60px !important;
padding-bottom: 60px !important;
}
}
/* Section overlay utilities */
.section-overlay {
position: relative;
}
.section-overlay::before {
content: "";
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, 0.5);
z-index: 1;
}
.section-overlay > * {
position: relative;
z-index: 2;
}
.section-overlay-light::before {
background-color: rgba(255, 255, 255, 0.8);
}
.section-overlay-dark::before {
background-color: rgba(0, 0, 0, 0.7);
}
/* ==========================================================================
18. Image Aspect Ratio Utilities
Added: 2025-01-25
Purpose: Prevent layout shift by maintaining consistent aspect ratios
========================================================================== */
/* Common aspect ratios for images */
.aspect-square {
aspect-ratio: 1 / 1 !important;
}
.aspect-video {
aspect-ratio: 16 / 9 !important;
}
.aspect-book {
aspect-ratio: 2 / 3 !important;
}
.aspect-landscape {
aspect-ratio: 4 / 3 !important;
}
.aspect-portrait {
aspect-ratio: 3 / 4 !important;
}
.aspect-wide {
aspect-ratio: 21 / 9 !important;
}
.aspect-golden {
aspect-ratio: 1.618 / 1 !important;
}
/* Responsive aspect ratio utilities */
@media (max-width: 767px) {
.aspect-square--mobile {
aspect-ratio: 1 / 1 !important;
}
.aspect-video--mobile {
aspect-ratio: 16 / 9 !important;
}
.aspect-book--mobile {
aspect-ratio: 2 / 3 !important;
}
}
@media (min-width: 768px) {
.aspect-square--tablet-up {
aspect-ratio: 1 / 1 !important;
}
.aspect-video--tablet-up {
aspect-ratio: 16 / 9 !important;
}
.aspect-book--tablet-up {
aspect-ratio: 2 / 3 !important;
}
}
/* Object-fit utilities for aspect ratio containers */
.object-cover {
object-fit: cover !important;
}
.object-contain {
object-fit: contain !important;
}
.object-fill {
object-fit: fill !important;
}
.object-scale-down {
object-fit: scale-down !important;
}
/* Object position utilities */
.object-center {
object-position: center center !important;
}
.object-top {
object-position: center top !important;
}
.object-bottom {
object-position: center bottom !important;
}
/* Image container utilities */
.img-container {
position: relative;
overflow: hidden;
}
.img-container img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Skeleton loading for images */
.img-skeleton {
background: linear-gradient(90deg, #f0f0f0 25%, #e0e0e0 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: loading 1.5s infinite;
}
@keyframes loading {
0% {
background-position: 200% 0;
}
100% {
background-position: -200% 0;
}
}
/* ==========================================================================
Aspect Ratio Utilities for Responsive Images
Added: 2025-01-03
========================================================================== */
/* Common aspect ratios */
.aspect-square {
aspect-ratio: 1 / 1 !important;
}
.aspect-video {
aspect-ratio: 16 / 9 !important;
}
.aspect-book {
aspect-ratio: 2 / 3 !important;
}
.aspect-landscape {
aspect-ratio: 4 / 3 !important;
}
.aspect-portrait {
aspect-ratio: 3 / 4 !important;
}
.aspect-wide {
aspect-ratio: 21 / 9 !important;
}
.aspect-golden {
aspect-ratio: 1.618 / 1 !important;
}
/* Responsive aspect ratios */
@media (max-width: 767px) {
.aspect-square--mobile {
aspect-ratio: 1 / 1 !important;
}
.aspect-video--mobile {
aspect-ratio: 16 / 9 !important;
}
}
@media (min-width: 768px) {
.aspect-square--tablet-up {
aspect-ratio: 1 / 1 !important;
}
.aspect-video--tablet-up {
aspect-ratio: 16 / 9 !important;
}
.aspect-book--tablet-up {
aspect-ratio: 2 / 3 !important;
}
}
/* Aspect ratio containers for legacy support */
.aspect-container {
position: relative;
width: 100%;
overflow: hidden;
}
.aspect-container > * {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
/* Padding-based aspect ratios for older browsers */
.aspect-container--square::before {
content: "";
display: block;
padding-top: 100%;
}
.aspect-container--video::before {
content: "";
display: block;
padding-top: 56.25%; /* 16:9 */
}
.aspect-container--book::before {
content: "";
display: block;
padding-top: 150%; /* 2:3 */
}
/* ==========================================================================
Section Text Color Fixes
Added: 2025-08-02
========================================================================== */
/* Fix z-index for section overlay to ensure content is visible */
.section {
position: relative;
color: inherit;
}
.section__overlay {
z-index: 0 !important;
pointer-events: none;
}
/* Hide overlay if no background color is set */
.section__overlay[style*="background-color: ;"],
.section__overlay[style*="background-color:;"],
.section__overlay:not([style*="background-color"]) {
display: none !important;
}
/* Ensure sizer is positioned correctly */
.section .sizer {
position: relative;
z-index: 1;
}
.section .container {
position: relative;
z-index: 1;
}
/* Fix text color for sections with dark backgrounds */
.section {
color: inherit;
}
/* When section has dark background overlay, use white text */
.section .section__overlay[style*="background-color: rgba("] {
color: #fff;
}
/* Ensure all text elements inside dark sections use white */
.section:has(.section__overlay[style*="background-color: rgba("]) {
color: #fff;
}
.section:has(.section__overlay[style*="background-color: rgba("]) h1,
.section:has(.section__overlay[style*="background-color: rgba("]) h2,
.section:has(.section__overlay[style*="background-color: rgba("]) h3,
.section:has(.section__overlay[style*="background-color: rgba("]) h4,
.section:has(.section__overlay[style*="background-color: rgba("]) h5,
.section:has(.section__overlay[style*="background-color: rgba("]) h6,
.section:has(.section__overlay[style*="background-color: rgba("]) p,
.section:has(.section__overlay[style*="background-color: rgba("]) span,
.section:has(.section__overlay[style*="background-color: rgba("]) div,
.section:has(.section__overlay[style*="background-color: rgba("])
.block-type--text {
color: #fff !important;
}
/* Alternative approach for browsers that don't support :has() */
.section[style*="background-color: rgba(22, 30, 42"],
.section[style*="background-color: rgba(0, 0, 0"],
.section[style*="background-color: #000"],
.section[style*="background-color: #111"],
.section[style*="background-color: #222"] {
color: #fff;
}
.section[style*="background-color: rgba(22, 30, 42"] *,
.section[style*="background-color: rgba(0, 0, 0"] *,
.section[style*="background-color: #000"] *,
.section[style*="background-color: #111"] *,
.section[style*="background-color: #222"] * {
color: #fff !important;
}
/* ==========================================================================
Animation Visibility Fix
Added: 2025-08-03
========================================================================== */
/* Fix for blocks with data-aos="none" being hidden */
[data-aos="none"] {
opacity: 1 !important;
transform: none !important;
}
/* Fail-open default: visible unless JS is active */
[data-aos] {
opacity: 1;
transform: none;
}
html.an-js [data-aos]:not([data-aos="none"]) {
opacity: 0;
transition-property: transform, opacity;
}
html.an-js [data-aos]:not([data-aos="none"]).aos-animate {
opacity: 1;
transform: none;
}
/* Ensure all blocks are visible by default */
.block-type--text,
.block-type--feature,
.block-type--image,
.block-type--cta,
.block-type--video,
.block-type--form,
.block {
opacity: 1 !important;
}
/* Override any animation opacity if animations aren't initialized */
body:not(.aos-initialized) [data-aos] {
opacity: 1 !important;
transform: none !important;
}
/* Builder/editor safety: force visible in editor/preview */
[data-kajabi-theme-editor] [data-aos],
.kajabi-theme-editor [data-aos] {
opacity: 1 !important;
transform: none !important;
}
/* ==========================================================================
END OF SHARED STYLES
========================================================================== */
/* ==========================================================================
Media Utilities
Added: 2025-09-18
Description: Utilities for consistent responsive media containers
========================================================================== */
/* Portrait-friendly wrapper for iframes or