/* === VARIABLES === */ :root { /* Colors - Primary Scale */ --color-primary: #2563eb; --color-primary-light: #3b82f6; --color-primary-dark: #1d4ed8; --color-primary-50: #eff6ff; --color-primary-100: #dbeafe; --color-primary-200: #bfdbfe; --color-primary-300: #93c5fd; /* Colors - Secondary */ --color-secondary: #10b981; --color-secondary-light: #34d399; --color-secondary-dark: #059669; /* Colors - Accent */ --color-accent: #f59e0b; --color-accent-dark: #d97706; /* Colors - Star Rating */ --color-star: #fbbf24; --color-star-bg: #fef3c7; --color-star-text: #92400e; /* Colors - Text */ --color-text: #0f172a; --color-text-secondary: #475569; --color-text-tertiary: #6b7280; --color-text-muted: #94a3b8; /* Colors - Background */ --color-bg: #ffffff; --color-bg-alt: #f8fafc; --color-bg-dark: #0f172a; --color-bg-darker: #1f2937; --color-surface: #ffffff; --color-white: #ffffff; --color-black: #000000; /* Colors - Border */ --color-border: #e2e8f0; --color-border-light: #e5e7eb; /* Colors - Status */ --color-success: #22c55e; --color-warning: #f59e0b; --color-error: #ef4444; /* Gradients */ --gradient-brand: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); --gradient-hero: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 40%, var(--color-secondary) 100%); --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); --gradient-dark: linear-gradient(135deg, var(--color-bg-dark) 0%, var(--color-bg-darker) 100%); --gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%); /* Typography */ --font-primary: "Poppins", system-ui, sans-serif; --font-heading: "Poppins", system-ui, sans-serif; --font-mono: "Fira Code", monospace; /* Radius */ --radius-sm: 4px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px; /* Shadows */ --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1); --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1); --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1); /* Spacing */ --space-xs: 0.25rem; --space-sm: 0.5rem; --space-md: 1rem; --space-lg: 1.5rem; --space-xl: 2rem; --space-2xl: 3rem; /* Animation */ --transition: 0.3s ease; } /* === RESET === */ *, *::before, *::after { box-sizing: border-box; } body { margin: 0; font-family: var(--font-primary); font-size: 16px; line-height: 1.6; color: var(--color-text); background: var(--color-bg); } h1, h2, h3, h4, h5, h6 { margin: 0 0 1rem; line-height: 1.2; font-weight: 600; font-family: var(--font-heading); } p { margin: 0 0 1rem; } a { color: var(--color-primary); text-decoration: none; } img { max-width: 100%; height: auto; display: block; } ul { list-style: none; margin: 0; padding: 0; } button { cursor: pointer; font-family: inherit; } /* === CONTAINER === */ .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } /* === BUTTONS === */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1.5rem; font-size: 1rem; font-weight: 600; border-radius: var(--radius-md); border: none; transition: var(--transition); text-decoration: none; cursor: pointer; min-height: 44px; } .btn:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } .btn__icon { width: 1.25rem; height: 1.25rem; flex-shrink: 0; } .btn--primary { background: var(--color-primary); color: var(--color-white); text-shadow: 0 1px 2px rgba(0,0,0,0.1); } .btn--primary:hover { background: var(--color-primary-dark); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3); } .btn--accent { background: var(--color-accent-dark); color: var(--color-white); } .btn--accent:hover { background: var(--color-accent); } .btn--white { background: var(--color-white); color: var(--color-text); box-shadow: var(--shadow-sm); } .btn--white:hover { background: var(--color-bg-alt); } .btn--outline { background: transparent; border: 2px solid var(--color-primary); color: var(--color-primary); } .btn--outline:hover { background: var(--color-primary); color: var(--color-white); } .btn--outline-light { background: transparent; border: 2px solid var(--color-white); color: var(--color-white); } .btn--outline-light:hover { background: var(--color-white); color: var(--color-text); } .btn--sm { padding: 0.5rem 1rem; font-size: 0.875rem; min-height: 36px; } .btn--lg { padding: 1rem 2rem; font-size: 1.125rem; min-height: 52px; } @media (max-width: 640px) { .btn--mobile-full { width: 100%; } } /* === SECTION === */ section { padding: 4rem 0; } @media (min-width: 768px) { section { padding: 5rem 0; } } /* === SECTION COMPONENTS === */ /* Section Components - Shared styles across all sections */ /* Section Header - Used by multiple sections */ .section-header { text-align: center; margin-bottom: 3rem; max-width: 700px; margin-left: auto; margin-right: auto; } .section-header__eyebrow { display: inline-block; font-size: 0.875rem; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase; color: var(--color-primary); margin-bottom: 0.75rem; } .section-header__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--color-text); margin: 0 0 1rem; line-height: 1.2; } .section-header__subtitle { font-size: 1.0625rem; color: var(--color-text-secondary); line-height: 1.6; margin: 0; } /* Dark background variants */ [data-bg="dark"] .section-header__title { color: var(--color-white); } [data-bg="dark"] .section-header__subtitle { color: rgba(255, 255, 255, 0.7); } [data-bg="dark"] .section-header__eyebrow { color: var(--color-primary-light); } /* Base Section Classes - Required by HTML structure */ .hero { position: relative; } .services { position: relative; } .why { position: relative; } .testimonials { position: relative; } .faq { position: relative; } .areas { position: relative; } .cta { position: relative; } .footer { position: relative; } /* Section Backgrounds */ .hero[data-bg="gradient"] { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); } .hero[data-bg="image"] { background-size: cover; background-position: center; } /* Card Base Styles */ .card { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); padding: 1.5rem; transition: box-shadow var(--transition), transform var(--transition); } .card:hover { box-shadow: var(--shadow-lg); } .card--clickable:hover { transform: translateY(-2px); } /* Badge Styles */ .badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; font-size: 0.875rem; font-weight: 500; border-radius: var(--radius-full); background: var(--color-primary); color: var(--color-white); } .badge--outline { background: transparent; border: 1px solid var(--color-primary); color: var(--color-primary); } .badge--light { background: rgba(var(--color-primary-rgb), 0.1); color: var(--color-primary); } /* Rating Stars */ .stars { display: flex; gap: 0.25rem; color: var(--color-accent); } .stars svg { width: 1.25rem; height: 1.25rem; } /* Social Links */ .social-links { display: flex; gap: 0.75rem; } .social-link { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-full); color: var(--color-text-secondary); transition: all var(--transition); } .social-link:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); } /* Link with Arrow */ .link-arrow { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; color: var(--color-primary); text-decoration: none; transition: gap var(--transition); } .link-arrow:hover { gap: 0.75rem; } .link-arrow svg { transition: transform var(--transition); } .link-arrow:hover svg { transform: translateX(3px); } /* Grid Layouts */ .grid-2 { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2rem; } .grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; } @media (max-width: 992px) { .grid-3, .grid-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } } /* === SECTION MODIFIERS === */ /* ===================================================== SECTION MODIFIERS - Mix & Match on Any Section Use !important to override block-specific backgrounds ===================================================== */ /* ----------------------------------------------------- BACKGROUND MODIFIERS ----------------------------------------------------- */ /* Solid Background */ .section--bg-solid { background: var(--color-bg) !important; } /* Gradient Backgrounds */ .section--bg-gradient { background: var(--gradient-hero) !important; } .section--bg-gradient-dark { background: linear-gradient(135deg, var(--color-bg-dark) 0%, var(--color-bg-darker) 50%, var(--color-text-tertiary) 100%) !important; color: var(--color-white) !important; } .section--bg-gradient-dark .hero__title, .section--bg-gradient-dark .hero__subtitle, .section--bg-gradient-dark .hero__eyebrow, .section--bg-gradient-dark .hero__trust-number, .section--bg-gradient-dark .hero__trust-label { color: var(--color-white) !important; } .section--bg-gradient-dark .hero__eyebrow { color: var(--color-primary-light) !important; } .section--bg-gradient-dark .hero__trust-number { color: var(--color-primary-light) !important; } .section--bg-gradient-primary { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important; color: var(--color-white) !important; } /* ----------------------------------------------------- LAYOUT MODIFIERS ----------------------------------------------------- */ /* Centered layout */ .section--centered { text-align: center !important; } .section--centered .section__content { max-width: 800px; margin: 0 auto; } .section--centered .section__media { display: none !important; } .section--centered .hero__cta-group { justify-content: center !important; } .section--centered .hero__trust { justify-content: center !important; } /* Split layout (content + media) */ .section--split .section__grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 3rem; align-items: center; } .section--split .section__content { text-align: left !important; } .section--split .section__media { display: block !important; } .section--split .hero__cta-group { justify-content: flex-start !important; } .section--split .hero__trust { justify-content: flex-start !important; } @media (max-width: 768px) { .section--split .section__grid { grid-template-columns: 1fr !important; } .section--split .section__content { text-align: center !important; } .section--split .hero__cta-group, .section--split .hero__trust { justify-content: center !important; } } /* Reverse split (media on left) */ .section--split-reverse .section__grid { display: grid !important; grid-template-columns: 1fr 1fr !important; gap: 3rem; align-items: center; } .section--split-reverse .section__media { display: block !important; order: -1; } /* ----------------------------------------------------- MEDIA TYPE MODIFIERS ----------------------------------------------------- */ /* Hide all media by default */ .section__media .section__media-image, .section__media .section__media-gallery, .section__media .section__media-slideshow, .section__media .section__media-video { display: none !important; } /* Single Image */ .section__media--image .section__media-image { display: block !important; width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); } /* Image Gallery (2x2 grid) */ .section__media--gallery .section__media-gallery { display: grid !important; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .section__media--gallery .section__media-gallery img { width: 100%; height: 180px; object-fit: cover; border-radius: var(--radius-md); box-shadow: var(--shadow-md); } /* Slideshow */ .section__media--slideshow .section__media-slideshow { display: block !important; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); } /* Video Player */ .section__media--video .section__media-video { display: block !important; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); } .section__media--video video { width: 100%; } /* === RESPONSIVE NEMESIS RANGE === */ /* ========================================= * RESPONSIVE: NEMESIS RANGE (800-1100px) * The problematic zone between tablet and desktop * ========================================= */ /* Force 2-column max in nemesis range */ @media (min-width: 800px) and (max-width: 1100px) { /* Grid layouts: collapse to 2 columns */ .grid-cols-3, .grid-cols-4, .grid-auto-fill-3, [class*="grid"][class*="cols-3"], [class*="grid"][class*="cols-4"] { grid-template-columns: repeat(2, 1fr) !important; gap: 1.5rem !important; } /* Prevent text overflow with responsive sizing */ h1 { font-size: clamp(1.75rem, 4vw, 2.5rem) !important; } h2 { font-size: clamp(1.5rem, 3.5vw, 2rem) !important; } h3 { font-size: clamp(1.25rem, 3vw, 1.5rem) !important; } /* Button sizing - maintain touch targets */ .btn, .cta-button, [class*="btn-"], button[type="submit"] { min-width: 180px; padding: 14px 28px; font-size: 1rem; } /* Stack two-column layouts if cramped */ .two-col:not(.force-side-by-side), .split:not(.force-side-by-side) { flex-direction: column; gap: 2rem; } .two-col:not(.force-side-by-side) > *, .split:not(.force-side-by-side) > * { width: 100% !important; max-width: 100% !important; } /* Form fields - stack and size properly */ .form-row, .form-inline { flex-direction: column; } .form-row > *, .form-inline > * { width: 100%; } /* Container padding adjustments */ .section-content, .section-inner { padding-left: 2rem; padding-right: 2rem; } /* Cards need minimum width */ .card, .service-card, [class*="-card"] { min-width: 280px; } /* Image grids - prevent tiny images */ .gallery-grid, .image-grid { grid-template-columns: repeat(2, 1fr) !important; } /* Hero content centering */ .hero-content { text-align: center; max-width: 90%; margin-left: auto; margin-right: auto; } } /* ========================================= * RESPONSIVE: MOBILE FIRST BASE * ========================================= */ /* Touch target minimums */ @media (max-width: 768px) { a, button, [role="button"], input[type="submit"] { min-height: 44px; min-width: 44px; } /* Full-width CTAs on mobile */ .cta-button, .btn-primary, .hero-cta { width: 100%; display: block; text-align: center; } /* Stack all grids on mobile */ .grid-cols-2, .grid-cols-3, .grid-cols-4 { grid-template-columns: 1fr !important; } /* Phone links always tappable */ a[href^="tel:"] { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: var(--color-primary, #00d4aa); color: #000 !important; border-radius: 0.5rem; font-weight: 600; text-decoration: none; } } /* ========================================= * RESPONSIVE: TABLET RANGE (641-800px) * ========================================= */ @media (min-width: 641px) and (max-width: 799px) { /* 2-column grids are fine here */ .grid-cols-3, .grid-cols-4 { grid-template-columns: repeat(2, 1fr); } /* Allow side-by-side if not too cramped */ .two-col { flex-direction: row; gap: 1.5rem; } .two-col > * { width: 50%; } } /* ========================================= * RESPONSIVE: LARGE DESKTOP (1280px+) * ========================================= */ @media (min-width: 1280px) { /* Max content width on large screens */ .section-content, .section-inner { max-width: 1400px; margin-left: auto; margin-right: auto; } /* Allow 4-column grids on large screens */ .grid-cols-4 { grid-template-columns: repeat(4, 1fr); } } /* === IMAGE OVERLAYS === */ /* IMAGE OVERLAY SYSTEM - Progressive Disclosure on Hover Apply .image-hover to any container with an image to enable overlay effects Use .image-hover__content for the text that appears on hover THEME-AWARE: Uses --gradient-brand from kit_themes for brand-specific colors */ .image-hover { position: relative; overflow: hidden; border-radius: var(--radius-lg); } .image-hover img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease, filter 0.4s ease; } /* Overlay backdrop - Uses theme gradient */ .image-hover::after { content: ""; position: absolute; inset: 0; background: var(--gradient-brand); opacity: 0; transition: opacity 0.4s ease; pointer-events: none; z-index: 1; } /* Text content container - FIXED: Better text handling */ .image-hover__content { position: absolute; inset: 0; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 1.5rem; z-index: 2; opacity: 0; transform: translateY(10px); transition: opacity 0.4s ease, transform 0.4s ease; overflow: hidden; } .image-hover__title { font-size: clamp(1rem, 2.5vw, 1.25rem); font-weight: 700; color: var(--color-white); margin-bottom: 0.5rem; text-shadow: 0 2px 4px rgba(0,0,0,0.3); max-width: 100%; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; } .image-hover__text { font-size: clamp(0.8rem, 2vw, 0.95rem); color: rgba(255,255,255,0.95); line-height: 1.4; max-width: 100%; text-shadow: 0 1px 2px rgba(0,0,0,0.2); overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; } .image-hover__icon { width: 48px; height: 48px; margin-bottom: 1rem; color: var(--color-white); opacity: 0.9; } /* Hover state */ .image-hover:hover::after { opacity: 0.9; } .image-hover:hover img { transform: scale(1.05); filter: blur(2px); } .image-hover:hover .image-hover__content { opacity: 1; transform: translateY(0); } /* Focus state for keyboard accessibility */ .image-hover:focus-within::after { opacity: 0.9; } .image-hover:focus-within img { transform: scale(1.05); filter: blur(2px); } .image-hover:focus-within .image-hover__content { opacity: 1; transform: translateY(0); } /* Variant: Dark overlay */ .image-hover--dark::after { background: var(--gradient-dark); } /* Variant: Primary color overlay */ .image-hover--primary::after { background: var(--gradient-primary); } /* Variant: Accent color overlay */ .image-hover--accent::after { background: var(--gradient-accent); } /* Variant: Hero gradient overlay */ .image-hover--hero::after { background: var(--gradient-hero); } /* Variant: Slide up reveal */ .image-hover--slide-up::after { transform: translateY(100%); opacity: 0.9; transition: transform 0.4s ease; } .image-hover--slide-up:hover::after { transform: translateY(0); } .image-hover--slide-up .image-hover__content { justify-content: flex-end; padding-bottom: 2rem; } /* Variant: No blur on image */ .image-hover--no-blur:hover img { filter: brightness(0.7); } /* Responsive adjustments */ @media (max-width: 768px) { .image-hover__title { font-size: 0.95rem; -webkit-line-clamp: 2; } .image-hover__text { font-size: 0.8rem; -webkit-line-clamp: 2; } .image-hover__content { padding: 0.75rem; } .image-hover__icon { width: 32px; height: 32px; margin-bottom: 0.5rem; } } /* Gallery/grid specific overlays */ .gallery-hover { display: grid; gap: 1rem; } .gallery-hover .image-hover { aspect-ratio: 4/3; } .gallery-hover .image-hover img { width: 100%; height: 100%; object-fit: cover; } /* Touch device handling - show overlay on tap */ @media (hover: none) { .image-hover:active::after { opacity: 0.9; } .image-hover:active .image-hover__content { opacity: 1; transform: translateY(0); } } /* === TWO-COL BASE === */ /* ============================================================= MODULAR TWO-COLUMN SYSTEM - BASE SHELL Theme-aware, fully responsive, slot-based architecture ============================================================= */ /* Base Section */ .twocol { padding: var(--section-padding-y, 4rem) 0; background: var(--color-bg); color: var(--color-text); position: relative; overflow: hidden; } /* Background Modifiers */ .twocol[data-bg="alt"] { background: var(--color-bg-alt); } .twocol[data-bg="gradient"] { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); color: var(--color-white); } .twocol[data-bg="gradient"] .twocol__eyebrow, .twocol[data-bg="gradient"] .twocol__title, .twocol[data-bg="gradient"] .twocol__desc, .twocol[data-bg="gradient"] .tcb-text__eyebrow, .twocol[data-bg="gradient"] .tcb-text__title, .twocol[data-bg="gradient"] .tcb-text__desc, .twocol[data-bg="gradient"] .tcb-text__list li { color: var(--color-white); } .twocol[data-bg="gradient"] .twocol__desc, .twocol[data-bg="gradient"] .tcb-text__desc { opacity: 0.9; } .twocol[data-bg="gradient"] .tcb-text__cta { background: var(--color-white); color: var(--color-primary); } .twocol[data-bg="gradient-dark"] { background: linear-gradient(135deg, var(--color-bg-dark) 0%, var(--color-bg-darker) 100%); color: var(--color-white); } .twocol[data-bg="gradient-dark"] .twocol__eyebrow, .twocol[data-bg="gradient-dark"] .tcb-text__eyebrow { color: var(--color-primary-light); } .twocol[data-bg="gradient-dark"] .twocol__title, .twocol[data-bg="gradient-dark"] .tcb-text__title { color: var(--color-white); } .twocol[data-bg="gradient-dark"] .twocol__desc, .twocol[data-bg="gradient-dark"] .tcb-text__desc, .twocol[data-bg="gradient-dark"] .tcb-text__list li { color: var(--color-text-muted); } /* Spacing Modifiers */ .twocol[data-spacing="compact"] { padding: 2.5rem 0; } .twocol[data-spacing="spacious"] { padding: 6rem 0; } /* Header Section */ .twocol__header { text-align: center; max-width: 800px; margin: 0 auto 3rem; } .twocol__header:empty { display: none; } .twocol__eyebrow { display: inline-block; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary); margin-bottom: 0.75rem; } .twocol__eyebrow:empty { display: none; } .twocol__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.2; color: var(--color-text); margin: 0 0 1rem; } .twocol__title:empty { display: none; } .twocol__desc { font-size: 1.0625rem; line-height: 1.6; color: var(--color-text-tertiary); margin: 0; } .twocol__desc:empty { display: none; } /* Grid Layout */ .twocol__grid { display: grid; gap: 2rem; align-items: center; } /* Alignment Modifiers */ .twocol[data-align="top"] .twocol__grid { align-items: start; } .twocol[data-align="bottom"] .twocol__grid { align-items: end; } /* Slots */ .twocol__slot { min-width: 0; } /* ============================================================= RESPONSIVE BREAKPOINTS ============================================================= */ /* Mobile: Stack vertically */ @media (max-width: 767px) { .twocol__grid { grid-template-columns: 1fr; gap: 2.5rem; } .twocol[data-direction="reverse"] .twocol__slot--left { order: 2; } .twocol[data-direction="reverse"] .twocol__slot--right { order: 1; } .twocol__header { text-align: left; margin-bottom: 2rem; } } /* Tablet and up: Side by side */ @media (min-width: 768px) { .twocol__grid { gap: 3rem; } /* Ratio Modifiers */ .twocol[data-ratio="50-50"] .twocol__grid { grid-template-columns: 1fr 1fr; } .twocol[data-ratio="60-40"] .twocol__grid { grid-template-columns: 1.5fr 1fr; } .twocol[data-ratio="40-60"] .twocol__grid { grid-template-columns: 1fr 1.5fr; } .twocol[data-ratio="70-30"] .twocol__grid { grid-template-columns: 2.33fr 1fr; } .twocol[data-ratio="30-70"] .twocol__grid { grid-template-columns: 1fr 2.33fr; } /* Direction Modifier - Swap columns */ .twocol[data-direction="reverse"] .twocol__slot--left { order: 2; } .twocol[data-direction="reverse"] .twocol__slot--right { order: 1; } } /* Desktop: Wider gaps */ @media (min-width: 1024px) { .twocol__grid { gap: 4rem; } .twocol[data-spacing="spacious"] { padding: 8rem 0; } } /* === TWO-COL CONTENT BLOCKS === */ + /* ============================================================= + + TWO-COL CONTENT BLOCKS + + Modular content components for the slot system + + All blocks are theme-aware and responsive + + ============================================================= */ + + + + /* ============================================================= + + 1. TEXT BLOCK + + Title, description, optional bullet list, optional CTA + + ============================================================= */ + + .tcb-text {} + + + + .tcb-text__eyebrow { + + display: inline-block; + + font-size: 0.875rem; + + font-weight: 600; + + text-transform: uppercase; + + letter-spacing: 0.1em; + + color: var(--color-primary); + + margin-bottom: 0.75rem; + + } + + + + .tcb-text__title { + + font-size: clamp(1.5rem, 3.5vw, 2.25rem); + + font-weight: 700; + + line-height: 1.2; + + color: var(--color-text); + + margin: 0 0 1rem; + + } + + + + .tcb-text__desc { + + font-size: 1.0625rem; + + line-height: 1.7; + + color: var(--color-text-secondary); + + margin: 0 0 1.5rem; + + } + + + + .tcb-text__list { + + list-style: none; + + padding: 0; + + margin: 0 0 1.5rem; + + display: flex; + + flex-direction: column; + + gap: 0.75rem; + + } + + + + .tcb-text__list li { + + display: flex; + + align-items: flex-start; + + gap: 0.75rem; + + color: var(--color-text-secondary); + + font-size: 1rem; + + } + + + + .tcb-text__list li::before { + + content: ""; + + width: 20px; + + height: 20px; + + min-width: 20px; + + background: var(--color-primary); + + border-radius: 50%; + + margin-top: 2px; + + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3'%3E%3Cpath d='M5 12l5 5L20 7'/%3E%3C/svg%3E");+ + background-size: 12px; + + background-repeat: no-repeat; + + background-position: center; + + } + + + + .tcb-text__cta { + + display: inline-flex; + + align-items: center; + + gap: 0.5rem; + + padding: 0.875rem 1.75rem; + + background: var(--color-primary); + + color: var(--color-white); ++ font-weight: 600; + + font-size: 1rem; + + text-decoration: none; + + border-radius: var(--radius-md); + + transition: background 0.2s ease, transform 0.2s ease; + + } + + + + .tcb-text__cta:hover { + + background: var(--color-primary-dark); + + transform: translateY(-2px); + + } + + + + /* Dark background adjustments */ + + [data-bg="gradient"] .tcb-text__title, + + [data-bg="gradient-dark"] .tcb-text__title { + + color: var(--color-white); + + } + + + + [data-bg="gradient"] .tcb-text__desc, + + [data-bg="gradient"] .tcb-text__list li, + + [data-bg="gradient-dark"] .tcb-text__desc, + + [data-bg="gradient-dark"] .tcb-text__list li { + + color: rgba(255, 255, 255, 0.9); + + } + + + + [data-bg="gradient"] .tcb-text__cta, + + [data-bg="gradient-dark"] .tcb-text__cta { + + background: var(--color-white); ++ color: var(--color-primary); + + } + + + + /* ============================================================= + + 2. IMAGE BLOCK + + Single image with optional overlay caption + + ============================================================= */ + + .tcb-image { + + position: relative; + + border-radius: var(--radius-lg); + + overflow: hidden; + + } + + + + .tcb-image__img { + + width: 100%; + + height: auto; + + display: block; + + transition: transform 0.4s ease; + + } + + + + .tcb-image:hover .tcb-image__img { + + transform: scale(1.03); + + } + + + + .tcb-image__overlay { + + position: absolute; + + inset: 0; + + background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 50%); + + display: flex; + + flex-direction: column; + + justify-content: flex-end; + + padding: 1.5rem; + + opacity: 0; + + transition: opacity 0.3s ease; + + } + + + + .tcb-image:hover .tcb-image__overlay { + + opacity: 1; + + } + + + + .tcb-image__title { + + color: var(--color-white); ++ font-size: 1.25rem; + + font-weight: 600; + + margin: 0 0 0.25rem; + + } + + + + .tcb-image__caption { + + color: rgba(255, 255, 255, 0.85); + + font-size: 0.9375rem; + + margin: 0; + + } + + + + /* ============================================================= + + 3. ACCORDION BLOCK + + Expandable content panels + + ============================================================= */ + + .tcb-accordion { + + display: flex; + + flex-direction: column; + + gap: 0.75rem; + + } + + + + .tcb-accordion__item { + + border: 1px solid var(--color-border); + + border-radius: var(--radius-md); + + overflow: hidden; + + background: var(--color-bg); + + } + + + + .tcb-accordion__trigger { + + width: 100%; + + display: flex; + + align-items: center; + + justify-content: space-between; + + gap: 1rem; + + padding: 1rem 1.25rem; + + background: transparent; + + border: none; + + text-align: left; + + font-size: 1rem; + + font-weight: 600; + + color: var(--color-text); + + cursor: pointer; + + transition: background 0.2s ease; + + } + + + + .tcb-accordion__trigger:hover { + + background: var(--color-bg-alt); + + } + + + + .tcb-accordion__icon { + + width: 24px; + + height: 24px; + + min-width: 24px; + + display: flex; + + align-items: center; + + justify-content: center; + + border-radius: 50%; + + background: var(--color-bg-alt); + + transition: transform 0.3s ease, background 0.2s ease; + + } + + + + .tcb-accordion__icon svg { + + width: 12px; + + height: 12px; + + stroke: var(--color-text-secondary); + + stroke-width: 2; + + fill: none; + + } + + + + .tcb-accordion__item.active .tcb-accordion__icon { + + transform: rotate(180deg); + + background: var(--color-primary); + + } + + + + .tcb-accordion__item.active .tcb-accordion__icon svg { + + stroke: var(--color-white); + + } + + + + .tcb-accordion__content { + + max-height: 0; + + overflow: hidden; + + transition: max-height 0.3s ease; + + } + + + + .tcb-accordion__item.active .tcb-accordion__content { + + max-height: 500px; + + } + + + + .tcb-accordion__body { + + padding: 0 1.25rem 1.25rem; + + color: var(--color-text-secondary); + + font-size: 0.9375rem; + + line-height: 1.6; + + } + + + + /* Dark backgrounds */ + + [data-bg="gradient-dark"] .tcb-accordion__item { + + background: rgba(255, 255, 255, 0.05); + + border-color: rgba(255, 255, 255, 0.1); + + } + + + + [data-bg="gradient-dark"] .tcb-accordion__trigger { + + color: var(--color-white); + + } + + + + [data-bg="gradient-dark"] .tcb-accordion__trigger:hover { + + background: rgba(255, 255, 255, 0.1); + + } + + + + [data-bg="gradient-dark"] .tcb-accordion__body { + + color: var(--color-text-muted); + + } + + + + /* ============================================================= + + 4. TABS BLOCK + + Tabbed content panels + + ============================================================= */ + + .tcb-tabs {} + + + + .tcb-tabs__nav { + + display: flex; + + gap: 0.5rem; + + margin-bottom: 1.5rem; + + flex-wrap: wrap; + + border-bottom: 2px solid var(--color-border); + + padding-bottom: 0; + + } + + + + .tcb-tabs__btn { + + padding: 0.75rem 1.25rem; + + font-size: 0.9375rem; + + font-weight: 500; + + background: transparent; + + border: none; + + border-bottom: 2px solid transparent; + + margin-bottom: -2px; + + color: var(--color-text-secondary); + + cursor: pointer; + + transition: color 0.2s ease, border-color 0.2s ease; + + } + + + + .tcb-tabs__btn:hover { + + color: var(--color-text); + + } + + + + .tcb-tabs__btn.active { + + color: var(--color-primary); + + border-bottom-color: var(--color-primary); + + } + + + + .tcb-tabs__panel { + + display: none; + + padding-top: 0.5rem; + + } + + + + .tcb-tabs__panel.active { + + display: block; + + animation: fadeIn 0.3s ease; + + } + + + + @keyframes fadeIn { + + from { opacity: 0; transform: translateY(8px); } + + to { opacity: 1; transform: translateY(0); } + + } + + + + .tcb-tabs__content { + + color: var(--color-text-secondary); + + font-size: 1rem; + + line-height: 1.6; + + } + + + + .tcb-tabs__content p { + + margin: 0 0 1rem; + + } + + + + /* Dark backgrounds */ + + [data-bg="gradient-dark"] .tcb-tabs__nav { + + border-bottom-color: rgba(255, 255, 255, 0.1); + + } + + + + [data-bg="gradient-dark"] .tcb-tabs__btn { + + color: var(--color-text-muted); + + } + + + + [data-bg="gradient-dark"] .tcb-tabs__btn:hover, + + [data-bg="gradient-dark"] .tcb-tabs__btn.active { + + color: var(--color-white); + + } + + + + [data-bg="gradient-dark"] .tcb-tabs__content { + + color: var(--color-text-muted); + + } + + + + /* ============================================================= + + 5. FAQ BLOCK + + Question/Answer accordion style + + ============================================================= */ + + .tcb-faq { + + display: flex; + + flex-direction: column; + + gap: 1rem; + + } + + + + .tcb-faq__item { + + border-bottom: 1px solid var(--color-border); + + padding-bottom: 1rem; + + } + + + + .tcb-faq__item:last-child { + + border-bottom: none; + + padding-bottom: 0; + + } + + + + .tcb-faq__question { + + width: 100%; + + display: flex; + + align-items: center; + + justify-content: space-between; + + gap: 1rem; + + padding: 0; + + background: transparent; + + border: none; + + text-align: left; + + font-size: 1.0625rem; + + font-weight: 600; + + color: var(--color-text); + + cursor: pointer; + + } + + + + .tcb-faq__question:hover { + + color: var(--color-primary); + + } + + + + .tcb-faq__icon { + + font-size: 1.5rem; + + font-weight: 300; + + color: var(--color-primary); + + transition: transform 0.3s ease; + + } + + + + .tcb-faq__item.active .tcb-faq__icon { + + transform: rotate(45deg); + + } + + + + .tcb-faq__answer { + + max-height: 0; + + overflow: hidden; + + transition: max-height 0.3s ease, padding 0.3s ease; + + } + + + + .tcb-faq__item.active .tcb-faq__answer { + + max-height: 500px; + + padding-top: 1rem; + + } + + + + .tcb-faq__answer p { + + margin: 0; + + color: var(--color-text-secondary); + + font-size: 1rem; + + line-height: 1.6; + + } + + + + /* Dark backgrounds */ + + [data-bg="gradient-dark"] .tcb-faq__item { + + border-bottom-color: rgba(255, 255, 255, 0.1); + + } + + + + [data-bg="gradient-dark"] .tcb-faq__question { + + color: var(--color-white); + + } + + + + [data-bg="gradient-dark"] .tcb-faq__answer p { + + color: var(--color-text-muted); + + } + + + + /* ============================================================= + + 6. CHECKLIST BLOCK + + Simple checkmark list + + ============================================================= */ + + .tcb-checklist { + + list-style: none; + + padding: 0; + + margin: 0; + + display: flex; + + flex-direction: column; + + gap: 1rem; + + } + + + + .tcb-checklist__item { + + display: flex; + + align-items: flex-start; + + gap: 1rem; + + } + + + + .tcb-checklist__icon { + + width: 24px; + + height: 24px; + + min-width: 24px; + + display: flex; + + align-items: center; + + justify-content: center; + + background: var(--color-success); + + border-radius: 50%; + + margin-top: 2px; + + } + + + + .tcb-checklist__icon svg { + + width: 14px; + + height: 14px; + + stroke: var(--color-white); + + stroke-width: 3; + + fill: none; + + } + + + + .tcb-checklist__text { + + font-size: 1rem; + + line-height: 1.5; + + color: var(--color-text); + + } + + + + .tcb-checklist__text strong { + + display: block; + + font-weight: 600; + + margin-bottom: 0.25rem; + + } + + + + .tcb-checklist__text span { + + color: var(--color-text-secondary); + + font-size: 0.9375rem; + + } + + + + /* Dark backgrounds */ + + [data-bg="gradient-dark"] .tcb-checklist__text { + + color: var(--color-white); + + } + + + + [data-bg="gradient-dark"] .tcb-checklist__text span { + + color: var(--color-text-muted); + + } + + + + /* ============================================================= + + 7. FORM BLOCK + + Contact/Lead capture form + + ============================================================= */ + + .tcb-form { + + background: var(--color-bg); + + padding: 2rem; + + border-radius: var(--radius-lg); + + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); + + } + + + + .tcb-form__title { + + font-size: 1.5rem; + + font-weight: 700; + + color: var(--color-text); + + margin: 0 0 0.5rem; + + } + + + + .tcb-form__desc { + + color: var(--color-text-secondary); + + font-size: 0.9375rem; + + margin: 0 0 1.5rem; + + } + + + + .tcb-form__group { + + margin-bottom: 1rem; + + } + + + + .tcb-form__label { + + display: block; + + font-size: 0.875rem; + + font-weight: 500; + + color: var(--color-text); + + margin-bottom: 0.5rem; + + } + + + + .tcb-form__input, + + .tcb-form__textarea, + + .tcb-form__select { + + width: 100%; + + padding: 0.75rem 1rem; + + font-size: 1rem; + + border: 1px solid var(--color-border); + + border-radius: var(--radius-sm, 6px); + + background: var(--color-bg); + + color: var(--color-text); + + transition: border-color 0.2s ease, box-shadow 0.2s ease; + + } + + + + .tcb-form__input:focus, + + .tcb-form__textarea:focus, + + .tcb-form__select:focus { + + outline: none; + + border-color: var(--color-primary); + + box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1); + + } + + + + .tcb-form__textarea { + + min-height: 120px; + + resize: vertical; + + } + + + + .tcb-form__submit { + + width: 100%; + + padding: 0.875rem 1.5rem; + + font-size: 1rem; + + font-weight: 600; + + background: var(--color-primary); + + color: var(--color-white); ++ border: none; + + border-radius: var(--radius-md); + + cursor: pointer; + + transition: background 0.2s ease; + + } + + + + .tcb-form__submit:hover { + + background: var(--color-primary-dark); + + } + + + + /* Dark backgrounds - form stays light for contrast */ + + [data-bg="gradient"] .tcb-form, + + [data-bg="gradient-dark"] .tcb-form { + + background: var(--color-white); ++ } + + + + /* ============================================================= + + 8. VIDEO BLOCK + + Video player with poster + + ============================================================= */ + + .tcb-video { + + position: relative; + + border-radius: var(--radius-lg); + + overflow: hidden; + + background: var(--color-black); ++ } + + + + .tcb-video__player { + + width: 100%; + + aspect-ratio: 16/9; + + display: block; + + } + + + + .tcb-video__poster { + + position: absolute; + + inset: 0; + + background-size: cover; + + background-position: center; + + cursor: pointer; + + transition: opacity 0.3s ease; + + } + + + + .tcb-video__poster.hidden { + + opacity: 0; + + pointer-events: none; + + } + + + + .tcb-video__play { + + position: absolute; + + top: 50%; + + left: 50%; + + transform: translate(-50%, -50%); + + width: 80px; + + height: 80px; + + background: rgba(255, 255, 255, 0.95); + + border-radius: 50%; + + display: flex; + + align-items: center; + + justify-content: center; + + transition: transform 0.3s ease, box-shadow 0.3s ease; + + box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2); + + } + + + + .tcb-video__poster:hover .tcb-video__play { + + transform: translate(-50%, -50%) scale(1.1); + + box-shadow: 0 8px 30px rgba(0, 0, 0, 0.3); + + } + + + + .tcb-video__play svg { + + width: 32px; + + height: 32px; + + fill: var(--color-primary); + + margin-left: 4px; + + } + + + + /* ============================================================= + + 9. GALLERY BLOCK + + Image grid + + ============================================================= */ + + .tcb-gallery { + + display: grid; + + gap: 1rem; + + grid-template-columns: repeat(2, 1fr); + + } + + + + .tcb-gallery--3col { + + grid-template-columns: repeat(3, 1fr); + + } + + + + .tcb-gallery__item { + + position: relative; + + border-radius: var(--radius-md); + + overflow: hidden; + + aspect-ratio: 1; + + } + + + + .tcb-gallery__item img { + + width: 100%; + + height: 100%; + + object-fit: cover; + + transition: transform 0.4s ease; + + } + + + + .tcb-gallery__item:hover img { + + transform: scale(1.05); + + } + + + + .tcb-gallery__item--featured { + + grid-column: span 2; + + grid-row: span 2; + + aspect-ratio: auto; + + } + + + + @media (max-width: 639px) { + + .tcb-gallery--3col { + + grid-template-columns: repeat(2, 1fr); + + } + + } + + + + /* ============================================================= + + 10. TESTIMONIAL BLOCK + + Quote/Review display + + ============================================================= */ + + .tcb-testimonial { + + background: var(--color-bg-alt); + + padding: 2rem; + + border-radius: var(--radius-lg); + + position: relative; + + } + + + + .tcb-testimonial__quote { + + font-size: 1.125rem; + + line-height: 1.7; + + color: var(--color-text); + + margin: 0 0 1.5rem; + + font-style: italic; + + } + + + + .tcb-testimonial__quote::before { + + content: """; + + position: absolute; + + top: 1rem; + + left: 1.5rem; + + font-size: 4rem; + + color: var(--color-primary); + + opacity: 0.2; + + font-family: Georgia, serif; + + line-height: 1; + + } + + + + .tcb-testimonial__author { + + display: flex; + + align-items: center; + + gap: 1rem; + + } + + + + .tcb-testimonial__avatar { + + width: 48px; + + height: 48px; + + border-radius: 50%; + + object-fit: cover; + + } + + + + .tcb-testimonial__name { + + font-weight: 600; + + color: var(--color-text); + + margin: 0; + + } + + + + .tcb-testimonial__role { + + font-size: 0.875rem; + + color: var(--color-text-secondary); + + margin: 0; + + } + + + + .tcb-testimonial__stars { + + display: flex; + + gap: 0.25rem; + + margin-bottom: 1rem; + + } + + + + .tcb-testimonial__stars svg { + + width: 20px; + + height: 20px; + + fill: var(--color-warning); + + } + + + + /* Dark backgrounds */ + + [data-bg="gradient-dark"] .tcb-testimonial { + + background: rgba(255, 255, 255, 0.05); + + } + + + + [data-bg="gradient-dark"] .tcb-testimonial__quote, + + [data-bg="gradient-dark"] .tcb-testimonial__name { + + color: var(--color-white); + + } + + + + [data-bg="gradient-dark"] .tcb-testimonial__role { + + color: var(--color-text-muted); + + } + + + + /* ============================================================= + + 11. STATS BLOCK + + Number statistics display + + ============================================================= */ + + .tcb-stats { + + display: grid; + + grid-template-columns: repeat(2, 1fr); + + gap: 2rem; + + } + + + + .tcb-stats__item { + + text-align: center; + + } + + + + .tcb-stats__number { + + font-size: clamp(2rem, 5vw, 3rem); + + font-weight: 700; + + color: var(--color-primary); + + line-height: 1; + + margin-bottom: 0.5rem; + + } + + + + .tcb-stats__label { + + font-size: 0.9375rem; + + color: var(--color-text-secondary); + + } + + + + /* Dark backgrounds */ + + [data-bg="gradient"] .tcb-stats__number, + + [data-bg="gradient-dark"] .tcb-stats__number { + + color: var(--color-white); + + } + + + + [data-bg="gradient"] .tcb-stats__label, + + [data-bg="gradient-dark"] .tcb-stats__label { + + color: rgba(255, 255, 255, 0.8); + + } + + + + /* ============================================================= + + 12. SLIDESHOW BLOCK + + Image carousel + + ============================================================= */ + + .tcb-slideshow { + + position: relative; + + border-radius: var(--radius-lg); + + overflow: hidden; + + } + + + + .tcb-slideshow__track { + + display: flex; + + transition: transform 0.5s ease; + + } + + + + .tcb-slideshow__slide { + + min-width: 100%; + + } + + + + .tcb-slideshow__slide img { + + width: 100%; + + height: auto; + + display: block; + + } + + + + .tcb-slideshow__nav { + + position: absolute; + + bottom: 1rem; + + left: 50%; + + transform: translateX(-50%); + + display: flex; + + gap: 0.5rem; + + } + + + + .tcb-slideshow__dot { + + width: 10px; + + height: 10px; + + border-radius: 50%; + + background: rgba(255, 255, 255, 0.5); + + border: none; + + cursor: pointer; + + transition: background 0.2s ease; + + } + + + + .tcb-slideshow__dot.active { + + background: var(--color-white); ++ } + + + + .tcb-slideshow__arrow { + + position: absolute; + + top: 50%; + + transform: translateY(-50%); + + width: 44px; + + height: 44px; + + background: rgba(255, 255, 255, 0.9); + + border: none; + + border-radius: 50%; + + display: flex; + + align-items: center; + + justify-content: center; + + cursor: pointer; + + transition: background 0.2s ease; + + z-index: 2; + + } + + + + .tcb-slideshow__arrow:hover { + + background: var(--color-white); ++ } + + + + .tcb-slideshow__arrow--prev { + + left: 1rem; + + } + + + + .tcb-slideshow__arrow--next { + + right: 1rem; + + } + + + + .tcb-slideshow__arrow svg { + + width: 20px; + + height: 20px; + + stroke: var(--color-text); + + stroke-width: 2; + + fill: none; + + } + + /* === UTILITIES === */ /* Utility Classes */ /* Icons */ .icon { width: 1rem; height: 1rem; flex-shrink: 0; } .icon-sm { width: 0.875rem; height: 0.875rem; } .icon-lg { width: 1.5rem; height: 1.5rem; } .icon-xl { width: 2rem; height: 2rem; } /* Text Alignment */ .text-center { text-align: center; } .text-left { text-align: left; } .text-right { text-align: right; } /* Display */ .hidden { display: none !important; } .block { display: block; } .inline-block { display: inline-block; } .flex { display: flex; } .inline-flex { display: inline-flex; } .grid { display: grid; } /* Flex Utilities */ .flex-col { flex-direction: column; } .flex-wrap { flex-wrap: wrap; } .items-center { align-items: center; } .items-start { align-items: flex-start; } .items-end { align-items: flex-end; } .justify-center { justify-content: center; } .justify-between { justify-content: space-between; } .justify-start { justify-content: flex-start; } .justify-end { justify-content: flex-end; } .gap-1 { gap: 0.25rem; } .gap-2 { gap: 0.5rem; } .gap-3 { gap: 0.75rem; } .gap-4 { gap: 1rem; } .gap-6 { gap: 1.5rem; } .gap-8 { gap: 2rem; } /* Spacing - Margin */ .m-0 { margin: 0; } .m-auto { margin: auto; } .mx-auto { margin-left: auto; margin-right: auto; } .mt-0 { margin-top: 0; } .mt-1 { margin-top: 0.25rem; } .mt-2 { margin-top: 0.5rem; } .mt-3 { margin-top: 0.75rem; } .mt-4 { margin-top: 1rem; } .mt-6 { margin-top: 1.5rem; } .mt-8 { margin-top: 2rem; } .mb-0 { margin-bottom: 0; } .mb-1 { margin-bottom: 0.25rem; } .mb-2 { margin-bottom: 0.5rem; } .mb-3 { margin-bottom: 0.75rem; } .mb-4 { margin-bottom: 1rem; } .mb-6 { margin-bottom: 1.5rem; } .mb-8 { margin-bottom: 2rem; } .mb-xl { margin-bottom: 3rem; } .mb-2xl { margin-bottom: 4rem; } .mb-3xl { margin-bottom: 5rem; } /* Spacing - Padding */ .p-0 { padding: 0; } .p-2 { padding: 0.5rem; } .p-4 { padding: 1rem; } .p-6 { padding: 1.5rem; } .p-8 { padding: 2rem; } .px-4 { padding-left: 1rem; padding-right: 1rem; } .py-4 { padding-top: 1rem; padding-bottom: 1rem; } .py-8 { padding-top: 2rem; padding-bottom: 2rem; } /* Width */ .w-full { width: 100%; } .max-w-sm { max-width: 24rem; } .max-w-md { max-width: 28rem; } .max-w-lg { max-width: 32rem; } .max-w-xl { max-width: 36rem; } .max-w-2xl { max-width: 42rem; } .max-w-3xl { max-width: 48rem; } .max-w-4xl { max-width: 56rem; } /* Font */ .font-normal { font-weight: 400; } .font-medium { font-weight: 500; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .text-sm { font-size: 0.875rem; } .text-base { font-size: 1rem; } .text-lg { font-size: 1.125rem; } .text-xl { font-size: 1.25rem; } .text-2xl { font-size: 1.5rem; } .text-3xl { font-size: 1.875rem; } /* Colors */ .text-primary { color: var(--color-primary); } .text-secondary { color: var(--color-text-secondary); } .text-muted { color: var(--color-text-muted); } .text-white { color: var(--color-white); } .bg-primary { background-color: var(--color-primary); } .bg-alt { background-color: var(--color-bg-alt); } .bg-dark { background-color: var(--color-bg-dark); } /* Border Radius */ .rounded { border-radius: var(--radius-md); } .rounded-lg { border-radius: var(--radius-lg); } .rounded-xl { border-radius: var(--radius-xl); } .rounded-full { border-radius: var(--radius-full); } /* Accessibility */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; } /* Transitions */ .transition { transition: all var(--transition); } .transition-colors { transition: color var(--transition), background-color var(--transition), border-color var(--transition); } /* Cursor */ .cursor-pointer { cursor: pointer; } /* Overflow */ .overflow-hidden { overflow: hidden; } .overflow-auto { overflow: auto; } /* ===================================================== THEME: VeterClean ===================================================== */ :root { --color-bg: #ffffff; --space-lg: 1.5rem; --space-md: 1rem; --space-sm: 0.5rem; --space-xl: 2rem; --space-xs: 0.25rem; --font-mono: 'SF Mono', Monaco, 'Cascadia Code', monospace; --radius-lg: 12px; --radius-md: 8px; --radius-sm: 4px; --radius-xl: 16px; --shadow-lg: 0 10px 15px rgba(0,0,0,0.1); --shadow-md: 0 4px 6px rgba(0,0,0,0.1); --shadow-sm: 0 1px 2px rgba(0,0,0,0.05); --shadow-xl: 0 20px 25px rgba(0,0,0,0.15); --space-2xl: 3rem; --color-star: #fbbf24; --color-text: #0b0c0e; --transition: 0.3s ease; --color-black: #000000; --color-error: #ef4444; --color-white: #ffffff; --radius-full: 9999px; --color-accent: #8f3e3a; --color-bg-alt: #f8f9fa; --color-border: #dee2e6; --font-heading: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-primary: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --color-bg-dark: #0b0c0e; --color-primary: #25538e; --color-star-bg: #fef3c7; --color-success: #10b981; --color-surface: #ffffff; --color-warning: #f59e0b; --gradient-dark: linear-gradient(135deg, var(--color-bg-dark) 0%, var(--color-bg-darker) 100%); --gradient-hero: linear-gradient(135deg, var(--color-primary-50) 0%, var(--color-primary-100) 30%, var(--color-primary-200) 60%, var(--color-primary-300) 100%); --gradient-brand: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent) 100%); --color-bg-darker: #07111b; --color-secondary: #356ea5; --color-star-text: #92400e; --gradient-accent: linear-gradient(135deg, var(--color-accent) 0%, var(--color-accent-dark) 100%); --color-primary-50: #e8eef5; --color-text-muted: #9ca3af; --gradient-primary: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); --color-accent-dark: #723230; --color-primary-100: #c5d4e6; --color-primary-200: #9fb8d3; --color-primary-300: #6a95bd; --color-border-light: #e9ecef; --color-primary-dark: #1e4271; --color-primary-light: #356ea5; --color-text-tertiary: #6c757d; --color-text-secondary: #495057; --color-secondary-light: #4a82b8; } /* ===================================================== AREAS - tabbed-showcase (v1) ===================================================== */ /* AREAS: TABBED SHOWCASE */ .areas-tabs { background: var(--color-bg); } /* Tab Navigation */ .areas-tabs__nav { display: flex; justify-content: center; flex-wrap: wrap; gap: 0.5rem; margin-bottom: 3rem; } .areas-tabs__tab { padding: 0.75rem 1.5rem; border: 2px solid var(--color-primary); background: transparent; color: var(--color-primary); border-radius: 25px; cursor: pointer; font-weight: 600; font-size: 0.9375rem; transition: var(--transition); min-height: 44px; } .areas-tabs__tab:hover { background: var(--color-primary-light, rgba(var(--color-primary-rgb), 0.1)); } .areas-tabs__tab.is-active { background: var(--color-primary); color: var(--color-white); } /* Panel Container */ .areas-tabs__panels { position: relative; min-height: 500px; } .areas-tabs__panel { display: none; } .areas-tabs__panel.is-active { display: block; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } /* Panel Grid Layout */ .areas-tabs__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: center; max-width: 1200px; margin: 0 auto; } /* Content Column */ .areas-tabs__content { display: flex; flex-direction: column; gap: 1.5rem; } .areas-tabs__title { font-size: 1.75rem; font-weight: 600; color: var(--color-text); line-height: 1.3; } .areas-tabs__desc { font-size: 1rem; color: var(--color-text-secondary); line-height: 1.7; } /* Highlights Box */ .areas-tabs__highlights { background: linear-gradient(135deg, var(--color-bg-alt) 0%, var(--color-bg) 100%); padding: 1.5rem 2rem; border-radius: var(--radius-lg); } .areas-tabs__highlights-title { font-size: 1.125rem; font-weight: 600; color: var(--color-text); margin-bottom: 1rem; } .areas-tabs__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; } .areas-tabs__list li { font-size: 0.9375rem; color: var(--color-text-secondary); line-height: 1.6; padding-left: 1.25rem; position: relative; } .areas-tabs__list li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; background: var(--color-primary); border-radius: 50%; } .areas-tabs__list strong { color: var(--color-text); font-weight: 600; } /* CTA Buttons */ .areas-tabs__ctas { display: flex; gap: 1rem; flex-wrap: wrap; } /* Media Column */ .areas-tabs__media { position: relative; } .areas-tabs__image-wrap { position: relative; overflow: hidden; border-radius: var(--radius-lg); } .areas-tabs__image-wrap img { width: 100%; height: 400px; object-fit: cover; border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); transition: transform 0.3s ease; } .areas-tabs__image-wrap:hover img { transform: scale(1.03); } /* Image Overlay */ .areas-tabs__overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient(135deg, rgba(var(--color-primary-rgb), 0.9) 0%, rgba(var(--color-primary-dark-rgb, 0,0,0), 0.8) 100%); opacity: 0; transition: opacity 0.3s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 2rem; border-radius: var(--radius-lg); } .areas-tabs__image-wrap:hover .areas-tabs__overlay { opacity: 1; } .areas-tabs__overlay-title { font-size: 1.5rem; font-weight: 600; color: var(--color-white); margin-bottom: 1rem; } .areas-tabs__overlay-text { font-size: 1rem; color: rgba(255, 255, 255, 0.9); line-height: 1.6; max-width: 300px; } /* Mobile Responsive */ @media (max-width: 991px) { .areas-tabs__grid { grid-template-columns: 1fr; gap: 2rem; } .areas-tabs__media { order: -1; } .areas-tabs__image-wrap img { height: 300px; } .areas-tabs__panels { min-height: auto; } } @media (max-width: 639px) { .areas-tabs__nav { gap: 0.375rem; } .areas-tabs__tab { padding: 0.5rem 1rem; font-size: 0.875rem; } .areas-tabs__title { font-size: 1.5rem; } .areas-tabs__highlights { padding: 1.25rem 1.5rem; } .areas-tabs__ctas { flex-direction: column; } .areas-tabs__ctas .btn { width: 100%; justify-content: center; } } /* ===================================================== AREAS - service-grid (v2) ===================================================== */ /* AREAS: SERVICE GRID */ .areas-grid { background: var(--color-bg-alt); } .areas-grid[data-bg="white"] { background: var(--color-bg); } /* Cards Grid */ .areas-grid__cards { display: grid; gap: 1.5rem; margin-bottom: 3rem; } /* Individual Card */ .areas-grid__card { background: var(--color-surface); padding: 2rem; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: var(--transition); border: 1px solid var(--color-border); } .areas-grid__card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); border-color: var(--color-primary); } .areas-grid__name { font-size: 1.25rem; font-weight: 700; color: var(--color-text); margin-bottom: 0.75rem; } .areas-grid__desc { font-size: 0.9375rem; color: var(--color-text-secondary); line-height: 1.6; margin-bottom: 1.25rem; } /* Benefits List */ .areas-grid__benefits { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .areas-grid__benefits li { font-size: 0.875rem; color: var(--color-text-secondary); padding-left: 1.5rem; position: relative; line-height: 1.5; } .areas-grid__benefits li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; background: var(--color-primary); border-radius: 50%; } /* Additional Areas Callout */ .areas-grid__callout { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); border-radius: var(--radius-lg); padding: 2rem 2.5rem; display: flex; align-items: center; justify-content: space-between; gap: 2rem; flex-wrap: wrap; } .areas-grid__callout-content { flex: 1; min-width: 280px; } .areas-grid__callout-title { font-size: 1.375rem; font-weight: 700; color: var(--color-white); margin-bottom: 0.5rem; } .areas-grid__callout-desc { font-size: 1rem; color: rgba(255, 255, 255, 0.9); line-height: 1.6; } .areas-grid__callout-action .btn { background: var(--color-white); color: var(--color-primary); border: none; } .areas-grid__callout-action .btn:hover { background: rgba(255, 255, 255, 0.9); transform: translateY(-2px); } /* Responsive Grid */ @media (min-width: 640px) { .areas-grid__cards { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .areas-grid__cards { grid-template-columns: repeat(3, 1fr); gap: 2rem; } } @media (max-width: 639px) { .areas-grid__card { padding: 1.5rem; } .areas-grid__callout { flex-direction: column; text-align: center; padding: 1.5rem; } .areas-grid__callout-action { width: 100%; } .areas-grid__callout-action .btn { width: 100%; justify-content: center; } } /* ===================================================== COMPARISON - table (v1) ===================================================== */ /* COMPARISON: TABLE */ .comparison-table { background: var(--color-bg); } .comparison-table[data-bg="alt"] { background: var(--color-bg-alt); } .comparison-table[data-bg="dark"] { background: var(--color-bg-dark); } .comparison-table[data-bg="dark"] .section-header__title { color: var(--color-white); } .comparison-table[data-bg="dark"] .section-header__desc { color: rgba(255,255,255,0.8); } .comparison-table__wrapper { max-width: 900px; margin: 0 auto; overflow-x: auto; -webkit-overflow-scrolling: touch; } .comparison-table__grid { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); min-width: 500px; } .comparison-table__header { display: grid; grid-template-columns: 2fr 1fr 1fr; background: var(--color-primary); color: var(--color-white); } .comparison-table__header .comparison-table__cell { padding: 1rem 1.25rem; font-weight: 600; font-size: 0.9375rem; text-align: center; } .comparison-table__header .comparison-table__cell--feature { text-align: left; } .comparison-table__row { display: grid; grid-template-columns: 2fr 1fr 1fr; background: var(--color-surface); border-bottom: 1px solid var(--color-border); } .comparison-table__row:last-child { border-bottom: none; } .comparison-table__row:nth-child(even) { background: var(--color-bg-alt); } .comparison-table__cell { padding: 1rem 1.25rem; display: flex; align-items: center; justify-content: center; font-size: 0.9375rem; text-align: center; } .comparison-table__cell--feature { justify-content: flex-start; text-align: left; font-weight: 500; color: var(--color-text); } .comparison-table__cell--highlight { background: rgba(37, 99, 235, 0.05); color: var(--color-success); font-weight: 600; } .comparison-table__row .comparison-table__cell:last-child { color: var(--color-text-secondary); } .comparison-table__footer { text-align: center; margin-top: 2rem; } .comparison-table[data-bg="dark"] .comparison-table__grid { border: 1px solid rgba(255,255,255,0.1); } .comparison-table[data-bg="dark"] .comparison-table__row { background: rgba(255,255,255,0.02); border-color: rgba(255,255,255,0.1); } .comparison-table[data-bg="dark"] .comparison-table__row:nth-child(even) { background: rgba(255,255,255,0.05); } .comparison-table[data-bg="dark"] .comparison-table__cell--feature { color: var(--color-white); } @media (max-width: 767px) { .comparison-table__header .comparison-table__cell, .comparison-table__cell { padding: 0.875rem 1rem; font-size: 0.875rem; } } /* ===================================================== COMPARISON - cards (v2) ===================================================== */ /* COMPARISON: CARDS */ .comparison-cards { background: var(--color-bg-alt); } .comparison-cards[data-bg="white"] { background: var(--color-bg); } .comparison-cards[data-bg="dark"] { background: var(--color-bg-dark); } .comparison-cards[data-bg="dark"] .section-header__title { color: var(--color-white); } .comparison-cards[data-bg="dark"] .section-header__desc { color: rgba(255,255,255,0.8); } .comparison-cards__grid { display: grid; gap: 2rem; max-width: 900px; margin: 0 auto; } .comparison-cards__card { background: var(--color-surface); border-radius: var(--radius-lg); padding: 2rem; box-shadow: var(--shadow-sm); transition: var(--transition); } .comparison-cards__card--other { border: 1px solid var(--color-border); } .comparison-cards__card--us { border: 2px solid var(--color-primary); box-shadow: var(--shadow-md); } .comparison-cards__header { margin-bottom: 1rem; } .comparison-cards__title { font-size: 1.25rem; font-weight: 700; color: var(--color-text); margin: 0; } .comparison-cards__desc { font-size: 0.9375rem; color: var(--color-text-secondary); line-height: 1.6; margin-bottom: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--color-border); } .comparison-cards__list { list-style: none; padding: 0; margin: 0 0 1.5rem; display: flex; flex-direction: column; gap: 1rem; } .comparison-cards__item { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 0.9375rem; line-height: 1.5; } .comparison-cards__item svg { width: 1.25rem; height: 1.25rem; flex-shrink: 0; margin-top: 0.125rem; } .comparison-cards__item--positive svg { color: var(--color-success); } .comparison-cards__item--negative svg { color: var(--color-error); } .comparison-cards__item--positive span { color: var(--color-text); } .comparison-cards__item--negative span { color: var(--color-text-secondary); } .comparison-cards__ctas { display: flex; gap: 1rem; flex-wrap: wrap; } .comparison-cards__ctas .btn { flex: 1; min-width: 140px; text-align: center; justify-content: center; } .comparison-cards[data-bg="dark"] .comparison-cards__card { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); } .comparison-cards[data-bg="dark"] .comparison-cards__card--us { border-color: var(--color-primary); } .comparison-cards[data-bg="dark"] .comparison-cards__title { color: var(--color-white); } .comparison-cards[data-bg="dark"] .comparison-cards__desc { border-color: rgba(255,255,255,0.1); } .comparison-cards[data-bg="dark"] .comparison-cards__item--positive span { color: var(--color-white); } .comparison-cards[data-bg="dark"] .comparison-cards__item--negative span { color: rgba(255,255,255,0.6); } @media (min-width: 768px) { .comparison-cards__grid { grid-template-columns: repeat(2, 1fr); } .comparison-cards__card--us { transform: scale(1.02); } } @media (max-width: 767px) { .comparison-cards__card { padding: 1.5rem; } .comparison-cards__ctas { flex-direction: column; } } /* ===================================================== COMPARISON - accordion-compare (v3) ===================================================== */ /* ========================================================================== COMPARISON V3: Accordion Compare 6 expandable categories with two-column Us vs Them comparison ========================================================================== */ .compare-accordion { padding: var(--section-spacing-y) 0; background: var(--color-bg); } /* Header */ .compare-accordion__header { text-align: center; margin-bottom: 3rem; } .compare-accordion__title { font-size: clamp(2rem, 4vw, 2.75rem); font-weight: 700; color: var(--color-text); margin-bottom: 1rem; line-height: 1.2; } .compare-accordion__subtitle { font-size: 1.125rem; color: var(--color-text-muted); max-width: 600px; margin: 0 auto; line-height: 1.6; } /* Accordion List */ .compare-accordion__list { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; } /* Accordion Item */ .compare-accordion__item { background: var(--color-surface); border-radius: 12px; border: 1px solid var(--color-border); overflow: hidden; transition: box-shadow 0.3s ease, border-color 0.3s ease; } .compare-accordion__item:hover { border-color: var(--color-primary); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08); } .compare-accordion__item[open] { border-color: var(--color-primary); box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1); } /* Accordion Trigger */ .compare-accordion__trigger { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; cursor: pointer; list-style: none; user-select: none; transition: background 0.2s ease; } .compare-accordion__trigger::-webkit-details-marker { display: none; } .compare-accordion__trigger:hover { background: var(--color-bg-alt); } .compare-accordion__category-title { font-size: 1.125rem; font-weight: 600; color: var(--color-text); } /* Icon Toggle */ .compare-accordion__icon { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary); color: white; flex-shrink: 0; transition: transform 0.3s ease, background 0.2s ease; } .compare-accordion__icon-plus, .compare-accordion__icon-minus { transition: opacity 0.2s ease; } .compare-accordion__icon-minus { display: none; } .compare-accordion__item[open] .compare-accordion__icon-plus { display: none; } .compare-accordion__item[open] .compare-accordion__icon-minus { display: block; } .compare-accordion__item[open] .compare-accordion__icon { background: var(--color-primary-dark); transform: rotate(180deg); } /* Accordion Content */ .compare-accordion__content { padding: 0 1.5rem 1.5rem; animation: slideDown 0.3s ease; } @keyframes slideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } /* Two-Column Comparison */ .compare-accordion__columns { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--color-border); } .compare-accordion__col { padding: 1.25rem; border-radius: 8px; } .compare-accordion__col--us { background: linear-gradient(135deg, rgba(var(--color-success-rgb, 34, 197, 94), 0.08), rgba(var(--color-success-rgb, 34, 197, 94), 0.03)); border: 1px solid rgba(var(--color-success-rgb, 34, 197, 94), 0.2); } .compare-accordion__col--them { background: linear-gradient(135deg, rgba(var(--color-error-rgb, 239, 68, 68), 0.08), rgba(var(--color-error-rgb, 239, 68, 68), 0.03)); border: 1px solid rgba(var(--color-error-rgb, 239, 68, 68), 0.2); } /* Column Header */ .compare-accordion__col-header { margin-bottom: 0.75rem; } .compare-accordion__col-label { font-size: 0.875rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; } .compare-accordion__col--us .compare-accordion__col-label { color: var(--color-success, #22c55e); } .compare-accordion__col--them .compare-accordion__col-label { color: var(--color-error, #ef4444); } /* Column Description */ .compare-accordion__col-desc { font-size: 0.9375rem; color: var(--color-text-muted); margin-bottom: 1rem; line-height: 1.5; } /* Points List */ .compare-accordion__points { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .compare-accordion__point { font-size: 0.9375rem; color: var(--color-text); padding-left: 1.75rem; position: relative; line-height: 1.4; } .compare-accordion__point::before { position: absolute; left: 0; top: 0.125rem; font-size: 1rem; } .compare-accordion__point--positive::before { content: "✓"; color: var(--color-success, #22c55e); font-weight: 700; } .compare-accordion__point--negative::before { content: "✗"; color: var(--color-error, #ef4444); font-weight: 700; } /* Bottom CTA */ .compare-accordion__cta { text-align: center; margin-top: 3rem; } /* Responsive */ @media (max-width: 768px) { .compare-accordion__columns { grid-template-columns: 1fr; gap: 1rem; } .compare-accordion__trigger { padding: 1rem 1.25rem; } .compare-accordion__category-title { font-size: 1rem; } .compare-accordion__content { padding: 0 1.25rem 1.25rem; } .compare-accordion__col { padding: 1rem; } } /* ===================================================== CTA - centered (v1) ===================================================== */ /* CTA Centered - Variant 1 */ .cta--centered { padding: var(--section-padding-y, 5rem) 0; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); text-align: center; } .cta--centered[data-bg="solid"] { background: var(--color-primary); } .cta--centered[data-bg="dark"] { background: var(--color-bg-dark); } .cta--centered[data-bg="light"] { background: var(--color-bg-alt); } .cta--centered[data-bg="light"] .cta__title, .cta--centered[data-bg="light"] .cta__desc { color: var(--color-text); } .cta--centered[data-bg="light"] .cta__btn--primary { background: var(--color-primary); color: var(--color-white); } .cta--centered[data-bg="light"] .cta__btn--primary:hover { background: var(--color-primary-dark); } .cta--centered[data-bg="light"] .cta__btn--secondary { color: var(--color-primary); border-color: var(--color-primary); } .cta--centered[data-spacing="compact"] { padding: 3rem 0; } .cta--centered[data-spacing="spacious"] { padding: 7rem 0; } .cta--centered .cta__content { max-width: 700px; margin: 0 auto; } .cta--centered .cta__title { font-size: clamp(1.75rem, 4vw, 2.75rem); font-weight: 700; color: var(--color-white); margin: 0 0 1rem; line-height: 1.2; } .cta--centered .cta__desc { font-size: 1.125rem; color: rgba(255, 255, 255, 0.9); margin: 0 0 2rem; line-height: 1.6; } .cta--centered .cta__buttons { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } .cta__btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 1rem 2rem; font-size: 1rem; font-weight: 600; border-radius: var(--radius-md); text-decoration: none; transition: background var(--transition), transform var(--transition), box-shadow var(--transition); cursor: pointer; border: 2px solid transparent; } .cta__btn:hover { transform: translateY(-2px); } .cta__btn--primary { background: var(--color-white); color: var(--color-primary); } .cta__btn--primary:hover { background: var(--color-bg-alt); box-shadow: var(--shadow-lg); } .cta__btn--secondary { background: transparent; color: var(--color-white); border-color: rgba(255, 255, 255, 0.5); } .cta__btn--secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--color-white); } /* Responsive */ @media (max-width: 640px) { .cta--centered .cta__buttons { flex-direction: column; align-items: center; } .cta__btn { width: 100%; max-width: 300px; padding: 1rem 1.5rem; } } /* ===================================================== CTA - inline (v2) ===================================================== */ /* CTA Inline - Variant 2 */ .cta--inline { padding: var(--section-padding-y, 4rem) 0; background: var(--color-bg-alt); } .cta--inline[data-bg="white"] { background: var(--color-bg); } .cta--inline[data-bg="dark"] { background: var(--color-bg-dark); } .cta--inline[data-bg="dark"] .cta__title, .cta--inline[data-bg="dark"] .cta__desc { color: var(--color-white); } .cta--inline[data-bg="primary"] { background: var(--color-primary); } .cta--inline[data-bg="primary"] .cta__title, .cta--inline[data-bg="primary"] .cta__desc { color: var(--color-white); } .cta--inline[data-bg="primary"] .cta__btn--primary { background: var(--color-white); color: var(--color-primary); } .cta--inline[data-spacing="compact"] { padding: 2.5rem 0; } .cta--inline[data-spacing="spacious"] { padding: 5rem 0; } .cta--inline .cta__row { display: flex; align-items: center; justify-content: space-between; gap: 2rem; } .cta--inline .cta__text { flex: 1; max-width: 600px; } .cta--inline .cta__title { font-size: clamp(1.25rem, 3vw, 1.75rem); font-weight: 700; color: var(--color-text); margin: 0 0 0.5rem; line-height: 1.3; } .cta--inline .cta__desc { font-size: 1rem; color: var(--color-text-secondary); margin: 0; line-height: 1.5; } .cta--inline .cta__action { flex-shrink: 0; } .cta--inline .cta__btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 1rem 1.75rem; font-size: 1rem; font-weight: 600; border-radius: var(--radius-md); text-decoration: none; transition: background var(--transition), transform var(--transition); } .cta--inline .cta__btn--primary { background: var(--color-primary); color: var(--color-white); } .cta--inline .cta__btn--primary:hover { background: var(--color-primary-dark); transform: translateY(-2px); } .cta--inline .cta__btn--primary svg { transition: transform var(--transition); } .cta--inline .cta__btn--primary:hover svg { transform: translateX(3px); } /* Responsive */ @media (max-width: 768px) { .cta--inline .cta__row { flex-direction: column; text-align: center; } .cta--inline .cta__text { max-width: 100%; } .cta--inline .cta__btn { width: 100%; justify-content: center; max-width: 300px; } } /* ===================================================== CTA - split (v3) ===================================================== */ /* CTA Split - Variant 3 */ .cta--split { padding: var(--section-padding-y, 5rem) 0; background: var(--color-bg); } .cta--split[data-bg="alt"] { background: var(--color-bg-alt); } .cta--split[data-bg="dark"] { background: var(--color-bg-dark); } .cta--split[data-bg="dark"] .cta__title, .cta--split[data-bg="dark"] .cta__desc, .cta--split[data-bg="dark"] .cta__list li { color: var(--color-white); } .cta--split[data-bg="dark"] .cta__eyebrow { color: var(--color-primary-light); } .cta--split[data-spacing="compact"] { padding: 3rem 0; } .cta--split[data-spacing="spacious"] { padding: 7rem 0; } .cta--split .cta__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .cta--split[data-direction="reverse"] .cta__grid { direction: rtl; } .cta--split[data-direction="reverse"] .cta__grid > * { direction: ltr; } .cta--split .cta__eyebrow { display: inline-block; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary); margin-bottom: 0.75rem; } .cta--split .cta__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--color-text); margin: 0 0 1rem; line-height: 1.2; } .cta--split .cta__desc { font-size: 1.0625rem; color: var(--color-text-secondary); margin: 0 0 1.5rem; line-height: 1.6; } .cta--split .cta__list { list-style: none; padding: 0; margin: 0 0 2rem; } .cta--split .cta__list li { display: flex; align-items: flex-start; gap: 0.75rem; font-size: 1rem; color: var(--color-text); margin-bottom: 0.75rem; line-height: 1.5; } .cta--split .cta__list li:last-child { margin-bottom: 0; } .cta--split .cta__list svg { flex-shrink: 0; color: var(--color-success); margin-top: 2px; } .cta--split .cta__buttons { display: flex; flex-wrap: wrap; gap: 1rem; } .cta--split .cta__btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 1rem 1.75rem; font-size: 1rem; font-weight: 600; border-radius: var(--radius-md); text-decoration: none; transition: background var(--transition), transform var(--transition); border: 2px solid transparent; } .cta--split .cta__btn--primary { background: var(--color-primary); color: var(--color-white); } .cta--split .cta__btn--primary:hover { background: var(--color-primary-dark); transform: translateY(-2px); } .cta--split .cta__btn--secondary { background: transparent; color: var(--color-text); border-color: var(--color-border); } .cta--split .cta__btn--secondary:hover { border-color: var(--color-primary); color: var(--color-primary); } .cta--split .cta__image { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-xl); } .cta--split .cta__image img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block; } /* Responsive */ @media (max-width: 992px) { .cta--split .cta__grid { gap: 3rem; } } @media (max-width: 768px) { .cta--split .cta__grid, .cta--split[data-direction="reverse"] .cta__grid { grid-template-columns: 1fr; direction: ltr; gap: 2rem; } .cta--split .cta__image { order: -1; } .cta--split .cta__buttons { flex-direction: column; } .cta--split .cta__btn { width: 100%; justify-content: center; } } /* ===================================================== CTA - banner (v4) ===================================================== */ /* CTA Banner - Variant 4 */ .cta--banner { position: relative; padding: var(--section-padding-y, 6rem) 0; text-align: center; overflow: hidden; } .cta--banner[data-spacing="compact"] { padding: 4rem 0; } .cta--banner[data-spacing="spacious"] { padding: 8rem 0; } .cta--banner .cta__bg { position: absolute; inset: 0; z-index: 0; } .cta--banner .cta__bg img { width: 100%; height: 100%; object-fit: cover; } .cta--banner .cta__overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient(135deg, rgba(0, 0, 0, 0.7), rgba(0, 0, 0, 0.5)); } .cta--banner .container { position: relative; z-index: 2; } .cta--banner .cta__content { max-width: 700px; margin: 0 auto; } .cta--banner .cta__title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 700; color: var(--color-white); margin: 0 0 1rem; line-height: 1.15; text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2); } .cta--banner .cta__desc { font-size: 1.125rem; color: rgba(255, 255, 255, 0.9); margin: 0 0 2rem; line-height: 1.6; } .cta--banner .cta__buttons { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; } .cta--banner .cta__btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 1rem 2rem; font-size: 1rem; font-weight: 600; border-radius: var(--radius-md); text-decoration: none; transition: background var(--transition), transform var(--transition), box-shadow var(--transition); border: 2px solid transparent; } .cta--banner .cta__btn:hover { transform: translateY(-2px); } .cta--banner .cta__btn--primary { background: var(--color-primary); color: var(--color-white); } .cta--banner .cta__btn--primary:hover { background: var(--color-primary-light); box-shadow: 0 8px 20px rgba(0, 0, 0, 0.3); } .cta--banner .cta__btn--primary svg { transition: transform var(--transition); } .cta--banner .cta__btn--primary:hover svg { transform: translateX(3px); } .cta--banner .cta__btn--secondary { background: rgba(255, 255, 255, 0.1); color: var(--color-white); border-color: rgba(255, 255, 255, 0.4); backdrop-filter: blur(4px); } .cta--banner .cta__btn--secondary:hover { background: rgba(255, 255, 255, 0.2); border-color: var(--color-white); } /* Responsive */ @media (max-width: 640px) { .cta--banner .cta__buttons { flex-direction: column; align-items: center; } .cta--banner .cta__btn { width: 100%; max-width: 300px; justify-content: center; } } /* ===================================================== CTA - minimal (v5) ===================================================== */ /* CTA Minimal - Variant 5 */ .cta--minimal { padding: 2.5rem 0; background: var(--color-bg); border-top: 1px solid var(--color-border); border-bottom: 1px solid var(--color-border); } .cta--minimal[data-bg="alt"] { background: var(--color-bg-alt); border-color: transparent; } .cta--minimal[data-bg="dark"] { background: var(--color-bg-dark); border-color: rgba(255, 255, 255, 0.1); } .cta--minimal[data-bg="dark"] .cta__text { color: rgba(255, 255, 255, 0.8); } .cta--minimal[data-bg="dark"] .cta__link { color: var(--color-primary-light); } .cta--minimal[data-bg="primary"] { background: var(--color-primary); border-color: transparent; } .cta--minimal[data-bg="primary"] .cta__text { color: rgba(255, 255, 255, 0.9); } .cta--minimal[data-bg="primary"] .cta__link { color: var(--color-white); } .cta--minimal[data-spacing="compact"] { padding: 1.5rem 0; } .cta--minimal[data-spacing="spacious"] { padding: 3.5rem 0; } .cta--minimal .cta__row { display: flex; align-items: center; justify-content: center; gap: 1.5rem; flex-wrap: wrap; } .cta--minimal .cta__text { font-size: 1.0625rem; color: var(--color-text-secondary); margin: 0; line-height: 1.5; } .cta--minimal .cta__link { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 1rem; font-weight: 600; color: var(--color-primary); text-decoration: none; padding: 0.5rem 0; transition: gap var(--transition); } .cta--minimal .cta__link:hover { gap: 0.75rem; } .cta--minimal .cta__link svg { transition: transform var(--transition); } .cta--minimal .cta__link:hover svg { transform: translateX(3px); } /* Responsive */ @media (max-width: 640px) { .cta--minimal .cta__row { flex-direction: column; text-align: center; gap: 1rem; } } /* ===================================================== FAQ - interactive-split (v1) ===================================================== */ /* FAQ Interactive Split Layout */ .faq-split { padding: var(--section-padding-y, 5rem) 0; background: var(--color-bg); } .faq-split[data-bg="alt"] { background: var(--color-bg-alt); } .faq-split[data-bg="dark"] { background: var(--color-bg-dark); } .faq-split[data-bg="dark"] .faq-split__title, .faq-split[data-bg="dark"] .faq-split__q-text { color: var(--color-white); } .faq-split[data-bg="dark"] .faq-split__subtitle, .faq-split[data-bg="dark"] .faq-split__desc { color: rgba(255,255,255,0.8); } .faq-split[data-bg="dark"] .faq-split__item { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); } .faq-split[data-spacing="compact"] { padding: 3rem 0; } .faq-split[data-spacing="spacious"] { padding: 7rem 0; } .faq-split__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } /* Left Content */ .faq-split__content { display: flex; flex-direction: column; gap: 2rem; } .faq-split__header { margin-bottom: 0.5rem; } .faq-split__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--color-text); margin: 0 0 0.75rem; line-height: 1.2; } .faq-split__subtitle { font-size: 1.0625rem; color: var(--color-text-secondary); margin: 0; line-height: 1.6; } /* FAQ List */ .faq-split__list { display: flex; flex-direction: column; gap: 0.75rem; } /* FAQ Item - Card Style */ .faq-split__item { background: var(--color-bg-alt, #f8fafc); border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; transition: all 0.3s ease; cursor: pointer; } .faq-split__item:hover { transform: translateY(-2px); box-shadow: 0 8px 24px -8px rgba(0,0,0,0.12); border-color: var(--color-primary); } .faq-split__item[open] { background: var(--color-white, #fff); border-color: var(--color-primary); box-shadow: 0 8px 24px -8px rgba(0,0,0,0.12); } /* Question/Summary */ .faq-split__question { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; font-size: 1.0625rem; font-weight: 600; color: var(--color-text); cursor: pointer; list-style: none; transition: color 0.2s ease; } .faq-split__question::-webkit-details-marker { display: none; } .faq-split__q-text { flex: 1; line-height: 1.4; } /* Animated Icon */ .faq-split__icon { width: 24px; height: 24px; border-radius: 50%; background: var(--color-primary-light, rgba(37, 99, 235, 0.1)); position: relative; flex-shrink: 0; transition: all 0.3s ease; } .faq-split__icon::before, .faq-split__icon::after { content: ''; position: absolute; background: var(--color-primary); top: 50%; left: 50%; transition: transform 0.3s ease; } .faq-split__icon::before { width: 10px; height: 2px; transform: translate(-50%, -50%); } .faq-split__icon::after { width: 2px; height: 10px; transform: translate(-50%, -50%); } .faq-split__item[open] .faq-split__icon { background: var(--color-primary); } .faq-split__item[open] .faq-split__icon::before, .faq-split__item[open] .faq-split__icon::after { background: var(--color-white); } .faq-split__item[open] .faq-split__icon::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; } .faq-split__question:hover .faq-split__icon { background: var(--color-primary); } .faq-split__question:hover .faq-split__icon::before, .faq-split__question:hover .faq-split__icon::after { background: var(--color-white); } /* Answer Content */ .faq-split__answer { padding: 0 1.5rem 1.5rem; animation: faqFadeIn 0.3s ease; } @keyframes faqFadeIn { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .faq-split__desc { font-size: 0.9375rem; color: var(--color-text-secondary); line-height: 1.7; margin: 0 0 1rem; } .faq-split__points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; } .faq-split__points li { position: relative; padding-left: 1.5rem; font-size: 0.9375rem; color: var(--color-text-secondary); line-height: 1.5; } .faq-split__points li::before { content: ''; position: absolute; left: 0; top: 0.5rem; width: 6px; height: 6px; background: var(--color-primary); border-radius: 50%; } /* Right Media - Sticky */ .faq-split__media { position: sticky; top: 2rem; display: flex; flex-direction: column; gap: 1.5rem; } .faq-split__image-wrap { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 40px -12px rgba(0,0,0,0.15); } .faq-split__image { width: 100%; height: auto; display: block; aspect-ratio: 4/5; object-fit: cover; } .faq-split__image-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.6), transparent 50%); display: flex; align-items: flex-end; padding: 1.5rem; opacity: 0; transition: opacity 0.3s ease; } .faq-split__image-wrap:hover .faq-split__image-overlay { opacity: 1; } .faq-split__overlay-text { font-size: 0.9375rem; color: var(--color-white); font-weight: 500; } /* CTA Under Image */ .faq-split__cta { display: flex; flex-direction: column; align-items: center; gap: 1rem; padding: 1.5rem; background: var(--color-bg-alt); border-radius: 12px; text-align: center; } .faq-split__cta-text { margin: 0; font-size: 0.9375rem; color: var(--color-text-secondary); } .faq-split__cta .btn { width: 100%; } /* Mobile */ @media (max-width: 900px) { .faq-split__grid { grid-template-columns: 1fr; gap: 2.5rem; } .faq-split__media { position: relative; top: 0; order: -1; } .faq-split__image { aspect-ratio: 16/9; } } @media (max-width: 640px) { .faq-split__question { padding: 1rem 1.25rem; font-size: 1rem; } .faq-split__answer { padding: 0 1.25rem 1.25rem; } } /* ===================================================== FAQ - clean-stack (v2) ===================================================== */ /* FAQ Stack (Clean) */ .faq-numbered { padding: var(--section-padding-y, 5rem) 0; background: var(--color-bg-alt); } .faq-numbered[data-bg="white"] { background: var(--color-bg); } .faq-numbered[data-bg="dark"] { background: var(--color-bg-dark); } .faq-numbered[data-bg="dark"] .section-header__title, .faq-numbered[data-bg="dark"] .faq-numbered__q-text { color: var(--color-white); } .faq-numbered[data-bg="dark"] .section-header__desc, .faq-numbered[data-bg="dark"] .faq-numbered__desc { color: rgba(255,255,255,0.8); } .faq-numbered[data-bg="dark"] .faq-numbered__item { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); } .faq-numbered[data-spacing="compact"] { padding: 3rem 0; } .faq-numbered[data-spacing="spacious"] { padding: 7rem 0; } /* List */ .faq-numbered__list { max-width: 800px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; } /* Item */ .faq-numbered__item { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; transition: all 0.3s ease; } .faq-numbered__item:hover { border-color: var(--color-primary); box-shadow: 0 4px 20px -4px rgba(0,0,0,0.1); } .faq-numbered__item[open] { border-color: var(--color-primary); box-shadow: 0 8px 32px -8px rgba(0,0,0,0.12); } /* Question */ .faq-numbered__question { display: flex; align-items: center; gap: 1rem; padding: 1.5rem; cursor: pointer; list-style: none; transition: background 0.2s ease; } .faq-numbered__question::-webkit-details-marker { display: none; } .faq-numbered__question:hover { background: var(--color-bg-alt); } /* Question Text */ .faq-numbered__q-text { flex: 1; font-size: 1.125rem; font-weight: 600; color: var(--color-text); line-height: 1.4; } /* Toggle Icon */ .faq-numbered__toggle { width: 36px; height: 36px; display: flex; align-items: center; justify-content: center; border-radius: 50%; background: var(--color-bg-alt); color: var(--color-text-secondary); transition: all 0.3s ease; flex-shrink: 0; } .faq-numbered__toggle svg { transition: transform 0.3s ease; } .faq-numbered__item[open] .faq-numbered__toggle { background: var(--color-primary); color: var(--color-white); } .faq-numbered__item[open] .faq-numbered__toggle svg { transform: rotate(180deg); } .faq-numbered__question:hover .faq-numbered__toggle { background: var(--color-primary-light); color: var(--color-primary); } /* Answer */ .faq-numbered__answer { padding: 0 1.5rem 1.5rem; animation: faqSlideDown 0.3s ease; } @keyframes faqSlideDown { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: translateY(0); } } .faq-numbered__desc { font-size: 1rem; color: var(--color-text-secondary); line-height: 1.7; margin: 0 0 1rem; } .faq-numbered__points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.625rem; } .faq-numbered__points li { position: relative; padding-left: 1.75rem; font-size: 0.9375rem; color: var(--color-text-secondary); line-height: 1.5; } .faq-numbered__points li::before { content: ''; position: absolute; left: 0; top: 0.375rem; width: 8px; height: 8px; background: var(--color-primary); border-radius: 2px; transform: rotate(45deg); } /* Bottom CTA */ .faq-numbered__cta { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 3rem; padding: 1.5rem 2rem; background: var(--color-bg); border-radius: 16px; max-width: 800px; margin-left: auto; margin-right: auto; } .faq-numbered__cta-text { margin: 0; font-size: 1.0625rem; color: var(--color-text); } /* Mobile */ @media (max-width: 768px) { .faq-numbered__question { padding: 1.25rem; } .faq-numbered__q-text { font-size: 1rem; } .faq-numbered__cta { flex-direction: column; text-align: center; gap: 1rem; } } /* ===================================================== FAQ - icon-cards (v3) ===================================================== */ /* FAQ Icon Cards Grid */ .faq-cards { padding: var(--section-padding-y, 5rem) 0; background: var(--color-bg); } .faq-cards[data-bg="alt"] { background: var(--color-bg-alt); } .faq-cards[data-bg="dark"] { background: var(--color-bg-dark); } .faq-cards[data-bg="dark"] .section-header__title, .faq-cards[data-bg="dark"] .faq-cards__question { color: var(--color-white); } .faq-cards[data-bg="dark"] .section-header__desc, .faq-cards[data-bg="dark"] .faq-cards__desc { color: rgba(255,255,255,0.8); } .faq-cards[data-bg="dark"] .faq-cards__card { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); } .faq-cards[data-spacing="compact"] { padding: 3rem 0; } .faq-cards[data-spacing="spacious"] { padding: 7rem 0; } /* Grid */ .faq-cards__grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-bottom: 3rem; } /* Card */ .faq-cards__card { background: var(--color-bg-alt); border: 1px solid var(--color-border); border-radius: 16px; overflow: hidden; transition: all 0.3s ease; } .faq-cards__card:hover { border-color: var(--color-primary); transform: translateY(-4px); box-shadow: 0 12px 32px -8px rgba(0,0,0,0.15); } .faq-cards__card.is-open { background: var(--color-bg); border-color: var(--color-primary); box-shadow: 0 12px 32px -8px rgba(0,0,0,0.15); } /* Trigger Button */ .faq-cards__trigger { width: 100%; display: flex; align-items: flex-start; gap: 1rem; padding: 1.5rem; background: none; border: none; cursor: pointer; text-align: left; transition: background 0.2s ease; } .faq-cards__trigger:hover { background: rgba(0,0,0,0.02); } /* Icon */ .faq-cards__icon { width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--color-primary-light, rgba(37, 99, 235, 0.1)); border-radius: 12px; color: var(--color-primary); flex-shrink: 0; transition: all 0.3s ease; } .faq-cards__card:hover .faq-cards__icon, .faq-cards__card.is-open .faq-cards__icon { background: var(--color-primary); color: var(--color-white); transform: scale(1.05); } /* Question */ .faq-cards__question { flex: 1; font-size: 1.0625rem; font-weight: 600; color: var(--color-text); line-height: 1.4; margin: 0; padding-top: 0.25rem; } /* Expand Indicator */ .faq-cards__expand { width: 24px; height: 24px; position: relative; flex-shrink: 0; margin-top: 0.25rem; } .faq-cards__expand::before, .faq-cards__expand::after { content: ''; position: absolute; background: var(--color-text-secondary); top: 50%; left: 50%; transition: all 0.3s ease; } .faq-cards__expand::before { width: 12px; height: 2px; transform: translate(-50%, -50%); } .faq-cards__expand::after { width: 2px; height: 12px; transform: translate(-50%, -50%); } .faq-cards__card.is-open .faq-cards__expand::after { transform: translate(-50%, -50%) rotate(90deg); opacity: 0; } .faq-cards__card:hover .faq-cards__expand::before, .faq-cards__card:hover .faq-cards__expand::after { background: var(--color-primary); } /* Content (Hidden by default) */ .faq-cards__content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, padding 0.3s ease; } .faq-cards__card.is-open .faq-cards__content { max-height: 400px; padding: 0 1.5rem 1.5rem; } .faq-cards__desc { font-size: 0.9375rem; color: var(--color-text-secondary); line-height: 1.7; margin: 0 0 1rem; padding-left: calc(48px + 1rem); /* Align with question */ animation: faqCardFade 0.4s ease 0.1s both; } .faq-cards__points { margin: 0; padding: 0; padding-left: calc(48px + 1rem); list-style: none; display: flex; flex-direction: column; gap: 0.5rem; } .faq-cards__points li { position: relative; padding-left: 1.5rem; font-size: 0.9375rem; color: var(--color-text-secondary); line-height: 1.5; animation: faqCardFade 0.4s ease 0.2s both; } .faq-cards__points li:nth-child(2) { animation-delay: 0.25s; } .faq-cards__points li::before { content: ''; position: absolute; left: 0; top: 0.5rem; width: 6px; height: 6px; background: var(--color-primary); border-radius: 50%; } @keyframes faqCardFade { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } /* Support Banner */ .faq-cards__support { display: flex; align-items: center; justify-content: space-between; gap: 2rem; padding: 2rem; background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); border-radius: 16px; color: var(--color-white); } .faq-cards__support-content { flex: 1; } .faq-cards__support-title { font-size: 1.25rem; font-weight: 600; margin: 0 0 0.25rem; } .faq-cards__support-text { font-size: 0.9375rem; opacity: 0.9; margin: 0; } .faq-cards__support-actions { display: flex; gap: 1rem; flex-shrink: 0; } .faq-cards__support .btn--primary { background: var(--color-white); color: var(--color-primary); } .faq-cards__support .btn--primary:hover { background: rgba(255,255,255,0.9); } .faq-cards__support .btn--outline { border-color: rgba(255,255,255,0.5); color: var(--color-white); } .faq-cards__support .btn--outline:hover { background: rgba(255,255,255,0.1); border-color: var(--color-white); } /* Mobile */ @media (max-width: 900px) { .faq-cards__grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .faq-cards__trigger { padding: 1.25rem; } .faq-cards__icon { width: 40px; height: 40px; } .faq-cards__desc, .faq-cards__points { padding-left: calc(40px + 1rem); } .faq-cards__support { flex-direction: column; text-align: center; gap: 1.5rem; } .faq-cards__support-actions { flex-direction: column; width: 100%; } .faq-cards__support-actions .btn { width: 100%; } } /* ===================================================== FAQ - sidebar-nav (v4) ===================================================== */ /* FAQ Sidebar Navigation */ .faq-sidebar { padding: var(--section-padding-y, 5rem) 0; background: var(--color-bg-alt); } .faq-sidebar[data-bg="white"] { background: var(--color-bg); } .faq-sidebar[data-bg="dark"] { background: var(--color-bg-dark); } .faq-sidebar[data-bg="dark"] .section-header__title, .faq-sidebar[data-bg="dark"] .faq-sidebar__nav-text, .faq-sidebar[data-bg="dark"] .faq-sidebar__answer-title { color: var(--color-white); } .faq-sidebar[data-bg="dark"] .section-header__desc, .faq-sidebar[data-bg="dark"] .faq-sidebar__answer-desc { color: rgba(255,255,255,0.8); } .faq-sidebar[data-bg="dark"] .faq-sidebar__nav { background: rgba(255,255,255,0.05); } .faq-sidebar[data-bg="dark"] .faq-sidebar__nav-item { border-color: rgba(255,255,255,0.1); } .faq-sidebar[data-bg="dark"] .faq-sidebar__panel { background: rgba(255,255,255,0.05); } .faq-sidebar[data-spacing="compact"] { padding: 3rem 0; } .faq-sidebar[data-spacing="spacious"] { padding: 7rem 0; } /* Layout - Equal columns */ .faq-sidebar__layout { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; align-items: start; } /* Navigation - Left */ .faq-sidebar__nav { background: var(--color-bg); border-radius: 16px; padding: 0.5rem; display: flex; flex-direction: column; gap: 0.25rem; position: sticky; top: 2rem; } .faq-sidebar__nav-item { display: flex; align-items: center; gap: 1rem; width: 100%; padding: 1.125rem 1.25rem; background: transparent; border: none; border-radius: 12px; cursor: pointer; text-align: left; transition: all 0.2s ease; position: relative; } .faq-sidebar__nav-item::before { content: ''; position: absolute; left: 0; top: 50%; transform: translateY(-50%); width: 3px; height: 0; background: var(--color-primary); border-radius: 0 2px 2px 0; transition: height 0.3s ease; } .faq-sidebar__nav-item:hover { background: var(--color-bg-alt); } .faq-sidebar__nav-item.is-active { background: var(--color-primary-light, rgba(37, 99, 235, 0.08)); } .faq-sidebar__nav-item.is-active::before { height: 60%; } /* Number */ .faq-sidebar__nav-number { font-size: 0.875rem; font-weight: 700; color: var(--color-text-secondary); opacity: 0.4; min-width: 1.5rem; transition: all 0.2s ease; font-feature-settings: 'tnum'; } .faq-sidebar__nav-item:hover .faq-sidebar__nav-number, .faq-sidebar__nav-item.is-active .faq-sidebar__nav-number { color: var(--color-primary); opacity: 1; } /* Nav Text */ .faq-sidebar__nav-text { flex: 1; font-size: 1rem; font-weight: 500; color: var(--color-text); line-height: 1.4; transition: color 0.2s ease; } .faq-sidebar__nav-item.is-active .faq-sidebar__nav-text { font-weight: 600; color: var(--color-primary); } /* Arrow */ .faq-sidebar__nav-arrow { color: var(--color-text-secondary); opacity: 0; transform: translateX(-4px); transition: all 0.2s ease; } .faq-sidebar__nav-item:hover .faq-sidebar__nav-arrow, .faq-sidebar__nav-item.is-active .faq-sidebar__nav-arrow { opacity: 1; transform: translateX(0); } .faq-sidebar__nav-item.is-active .faq-sidebar__nav-arrow { color: var(--color-primary); } /* Panel - Right */ .faq-sidebar__panel { background: var(--color-bg); border-radius: 16px; padding: 2.5rem; min-height: 400px; position: relative; } /* Answer */ .faq-sidebar__answer { display: none; animation: faqSidebarFade 0.4s ease; } .faq-sidebar__answer.is-active { display: block; } @keyframes faqSidebarFade { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } .faq-sidebar__answer-title { font-size: 1.5rem; font-weight: 700; color: var(--color-text); margin: 0 0 1.25rem; line-height: 1.3; } .faq-sidebar__answer-desc { font-size: 1.0625rem; color: var(--color-text-secondary); line-height: 1.7; margin: 0 0 1.5rem; } .faq-sidebar__answer-points { margin: 0 0 2rem; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.75rem; } .faq-sidebar__answer-points li { position: relative; padding-left: 2rem; font-size: 1rem; color: var(--color-text-secondary); line-height: 1.6; } .faq-sidebar__answer-points li::before { content: ''; position: absolute; left: 0; top: 0.5rem; width: 10px; height: 10px; background: var(--color-primary); border-radius: 50%; opacity: 0.2; } .faq-sidebar__answer-points li::after { content: ''; position: absolute; left: 3px; top: calc(0.5rem + 3px); width: 4px; height: 4px; background: var(--color-primary); border-radius: 50%; } .faq-sidebar__answer-cta { padding-top: 1rem; border-top: 1px solid var(--color-border); } /* Mobile: Stack and convert to accordion */ @media (max-width: 900px) { .faq-sidebar__layout { grid-template-columns: 1fr; gap: 1.5rem; } .faq-sidebar__nav { position: relative; top: 0; padding: 0.375rem; } .faq-sidebar__nav-item { padding: 0.875rem 1rem; } .faq-sidebar__panel { padding: 1.5rem; min-height: auto; } .faq-sidebar__answer-title { font-size: 1.25rem; } } @media (max-width: 640px) { .faq-sidebar__nav-number { display: none; } .faq-sidebar__nav-text { font-size: 0.9375rem; } } /* ===================================================== FAQ - cta-image (v5) ===================================================== */ /* FAQ CTA + Image Layout */ .faq-cta { padding: var(--section-padding-y, 5rem) 0; background: var(--color-bg); } .faq-cta[data-bg="alt"] { background: var(--color-bg-alt); } .faq-cta[data-bg="dark"] { background: var(--color-bg-dark); } .faq-cta[data-bg="dark"] .faq-cta__title, .faq-cta[data-bg="dark"] .faq-cta__q { color: var(--color-white); } .faq-cta[data-bg="dark"] .faq-cta__subtitle, .faq-cta[data-bg="dark"] .faq-cta__desc { color: rgba(255,255,255,0.8); } .faq-cta[data-bg="dark"] .faq-cta__item { border-color: rgba(255,255,255,0.1); } .faq-cta[data-spacing="compact"] { padding: 3rem 0; } .faq-cta[data-spacing="spacious"] { padding: 7rem 0; } /* Grid Layout */ .faq-cta__grid { display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 3rem; align-items: start; } .faq-cta[data-direction="reverse"] .faq-cta__media { order: 2; } /* Left: Media + CTA */ .faq-cta__media { display: flex; flex-direction: column; gap: 1.5rem; position: sticky; top: 2rem; } /* Image */ .faq-cta__image { position: relative; border-radius: 16px; overflow: hidden; box-shadow: 0 20px 40px -12px rgba(0,0,0,0.15); } .faq-cta__image img { width: 100%; height: auto; aspect-ratio: 4/3; object-fit: cover; display: block; transition: transform 0.5s ease; } .faq-cta__image:hover img { transform: scale(1.03); } .faq-cta__image-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.7), transparent 60%); display: flex; flex-direction: column; justify-content: flex-end; padding: 1.5rem; opacity: 0; transition: opacity 0.3s ease; } .faq-cta__image:hover .faq-cta__image-overlay { opacity: 1; } .faq-cta__overlay-title { font-size: 1rem; font-weight: 600; color: var(--color-white); margin-bottom: 0.25rem; } .faq-cta__overlay-text { font-size: 0.875rem; color: rgba(255,255,255,0.85); margin: 0; line-height: 1.5; } /* CTA Card */ .faq-cta__card { background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color: var(--color-white); padding: 1.75rem; border-radius: 16px; text-align: center; } .faq-cta__card-title { font-size: 1.25rem; font-weight: 700; margin: 0 0 0.5rem; } .faq-cta__card-desc { font-size: 0.9375rem; opacity: 0.9; margin: 0 0 1.25rem; line-height: 1.5; } .faq-cta__card-btn { display: block; background: var(--color-white); color: var(--color-primary); padding: 0.875rem 1.5rem; border-radius: 10px; font-weight: 600; font-size: 1rem; text-decoration: none; transition: all 0.2s ease; margin-bottom: 0.75rem; } .faq-cta__card-btn:hover { background: rgba(255,255,255,0.9); transform: translateY(-2px); } .faq-cta__card-link { display: inline-block; font-size: 0.875rem; color: rgba(255,255,255,0.85); text-decoration: underline; text-underline-offset: 3px; transition: color 0.2s ease; } .faq-cta__card-link:hover { color: var(--color-white); } /* Right: FAQ Content */ .faq-cta__content { display: flex; flex-direction: column; } .faq-cta__header { margin-bottom: 2rem; } .faq-cta__title { font-size: clamp(1.75rem, 4vw, 2.25rem); font-weight: 700; color: var(--color-text); margin: 0 0 0.75rem; line-height: 1.2; } .faq-cta__subtitle { font-size: 1.0625rem; color: var(--color-text-secondary); margin: 0; line-height: 1.6; } /* FAQ List */ .faq-cta__list { display: flex; flex-direction: column; gap: 0.75rem; } /* FAQ Item */ .faq-cta__item { border: 1px solid var(--color-border); border-radius: 12px; overflow: hidden; transition: all 0.3s ease; } .faq-cta__item:hover { border-color: var(--color-primary-light); } .faq-cta__item.is-active { border-color: var(--color-primary); box-shadow: 0 4px 16px -4px rgba(0,0,0,0.1); } /* Trigger */ .faq-cta__trigger { display: flex; align-items: center; justify-content: space-between; gap: 1rem; width: 100%; padding: 1.125rem 1.25rem; background: var(--color-bg-alt); border: none; font-size: 1rem; text-align: left; cursor: pointer; transition: all 0.2s ease; } .faq-cta__trigger:hover { background: var(--color-bg); } .faq-cta__item.is-active .faq-cta__trigger { background: var(--color-primary); color: var(--color-white); } .faq-cta__q { font-weight: 600; color: var(--color-text); line-height: 1.4; transition: color 0.2s ease; } .faq-cta__item.is-active .faq-cta__q { color: var(--color-white); } .faq-cta__chevron { flex-shrink: 0; color: var(--color-text-secondary); transition: transform 0.3s ease, color 0.2s ease; } .faq-cta__item.is-active .faq-cta__chevron { transform: rotate(180deg); color: var(--color-white); } /* Panel */ .faq-cta__panel { display: none; padding: 1.25rem; background: var(--color-bg); animation: faqCtaSlide 0.3s ease; } .faq-cta__item.is-active .faq-cta__panel { display: block; } @keyframes faqCtaSlide { from { opacity: 0; transform: translateY(-8px); } to { opacity: 1; transform: translateY(0); } } .faq-cta__desc { font-size: 0.9375rem; color: var(--color-text-secondary); line-height: 1.7; margin: 0 0 1rem; } .faq-cta__points { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 0.5rem; } .faq-cta__points li { position: relative; padding-left: 1.5rem; font-size: 0.9375rem; color: var(--color-text-secondary); line-height: 1.5; } .faq-cta__points li::before { content: ''; position: absolute; left: 0; top: 0.5rem; width: 6px; height: 6px; background: var(--color-primary); border-radius: 50%; } /* Responsive */ @media (max-width: 992px) { .faq-cta__grid { grid-template-columns: 1fr; gap: 2rem; } .faq-cta__media { position: relative; top: 0; flex-direction: row; align-items: stretch; } .faq-cta__image { flex: 1; } .faq-cta__image img { aspect-ratio: 1; height: 100%; } .faq-cta__card { flex: 1; display: flex; flex-direction: column; justify-content: center; } } @media (max-width: 640px) { .faq-cta__media { flex-direction: column; } .faq-cta__image img { aspect-ratio: 16/9; } .faq-cta__trigger { padding: 1rem; font-size: 0.9375rem; } } /* ===================================================== FOOTER - standard (v1) ===================================================== */ /* Footer Standard - Clean 4-Column */ .footer--standard { background: var(--color-bg-dark); color: var(--color-text-muted, var(--color-text-muted)); padding: 3rem 0 2rem; } .footer__grid { display: grid; gap: 2.5rem; margin-bottom: 2rem; padding: 0 1rem; } /* Brand Column */ .footer__brand { max-width: 320px; } .footer__logo { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 1rem; text-decoration: none; } .footer__logo-img { height: 40px; width: auto; } .footer__logo-text { font-size: 1.25rem; font-weight: 700; color: var(--color-white); } .footer__tagline { line-height: 1.6; margin-bottom: 1.25rem; font-size: 0.9375rem; } .footer__social { display: flex; gap: 0.75rem; } .footer__social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; color: var(--color-white); transition: background 0.2s ease, transform 0.2s ease; } .footer__social a:hover { background: var(--color-primary); transform: translateY(-2px); } .footer__social svg { width: 18px; height: 18px; } /* Link Columns */ .footer__links { min-width: 140px; } .footer__heading { color: var(--color-white); font-size: 0.875rem; font-weight: 600; margin-bottom: 1.25rem; text-transform: uppercase; letter-spacing: 0.05em; } .footer__list { display: flex; flex-direction: column; gap: 0.75rem; list-style: none; padding: 0; margin: 0; } .footer__list a { color: var(--color-text-muted, var(--color-text-muted)); text-decoration: none; transition: color 0.2s ease; font-size: 0.9375rem; } .footer__list a:hover { color: var(--color-white); } /* Contact Column */ .footer__contact-item { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 1rem; color: var(--color-text-muted, var(--color-text-muted)); text-decoration: none; transition: color 0.2s ease; font-size: 0.9375rem; } .footer__contact-item:hover { color: var(--color-white); } .footer__contact-item svg { width: 20px; height: 20px; flex-shrink: 0; margin-top: 2px; } .footer__address { font-style: normal; line-height: 1.5; } .footer__hours { font-size: 0.875rem; } /* Bottom Bar */ .footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 2rem 1rem 0; margin: 0 1rem; display: flex; flex-direction: column; gap: 1rem; font-size: 0.875rem; } .footer__copyright { margin: 0; } .footer__bottom-right { display: flex; align-items: center; gap: 2rem; } .footer__legal { display: flex; gap: 1.5rem; } .footer__legal a { color: var(--color-text-muted, var(--color-text-muted)); text-decoration: none; transition: color 0.2s ease; } .footer__legal a:hover { color: var(--color-white); } /* Tablet: 2x2 grid */ @media (min-width: 640px) { .footer__grid { grid-template-columns: repeat(2, 1fr); padding: 0; } .footer__brand { grid-column: span 2; max-width: 100%; display: grid; grid-template-columns: 1fr auto; gap: 2rem; align-items: start; } .footer__bottom { flex-direction: row; justify-content: space-between; align-items: center; margin: 0; padding: 2rem 0 0; } } /* Desktop: 4 columns */ @media (min-width: 1024px) { .footer__grid { grid-template-columns: 1.5fr 1fr 1fr 1.25fr; gap: 3rem; } .footer__brand { grid-column: span 1; display: block; max-width: 320px; } } /* ===================================================== FOOTER - minimal (v2) ===================================================== */ /* Footer Minimal - Single Row Layout */ .footer--minimal { background: var(--color-bg-dark); color: var(--color-text-muted, var(--color-text-muted)); padding: 2rem 0; } .footer--minimal .footer__row { display: flex; flex-direction: column; align-items: center; gap: 1.5rem; padding-bottom: 1.5rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } /* Logo */ .footer--minimal .footer__logo { display: flex; align-items: center; gap: 0.5rem; text-decoration: none; } .footer--minimal .footer__logo-img { height: 32px; width: auto; } .footer--minimal .footer__logo-text { font-size: 1.125rem; font-weight: 700; color: var(--color-white); } /* Navigation */ .footer--minimal .footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 1.5rem; } .footer--minimal .footer__nav a { color: var(--color-text-muted, var(--color-text-muted)); text-decoration: none; font-size: 0.9375rem; transition: color 0.2s ease; } .footer--minimal .footer__nav a:hover { color: var(--color-white); } /* Social */ .footer--minimal .footer__social { display: flex; gap: 0.75rem; } .footer--minimal .footer__social a { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; color: var(--color-white); transition: background 0.2s ease; } .footer--minimal .footer__social a:hover { background: var(--color-primary); } .footer--minimal .footer__social svg { width: 16px; height: 16px; } /* Bottom */ .footer--minimal .footer__bottom { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding-top: 1.5rem; font-size: 0.8125rem; } .footer--minimal .footer__copyright { margin: 0; } .footer--minimal .footer__legal { display: flex; gap: 1rem; } .footer--minimal .footer__legal a { color: var(--color-text-muted, var(--color-text-muted)); text-decoration: none; transition: color 0.2s ease; } .footer--minimal .footer__legal a:hover { color: var(--color-white); } /* Tablet */ @media (min-width: 640px) { .footer--minimal .footer__row { flex-direction: row; justify-content: space-between; } .footer--minimal .footer__bottom { flex-direction: row; justify-content: space-between; } } /* Desktop */ @media (min-width: 1024px) { .footer--minimal .footer__nav { gap: 2rem; } } /* ===================================================== FOOTER - centered (v3) ===================================================== */ /* Footer Centered - Everything Centered */ .footer--centered { background: var(--color-bg-dark); color: var(--color-text-muted, var(--color-text-muted)); padding: 4rem 0 2rem; text-align: center; } /* Brand Section */ .footer--centered .footer__brand { margin-bottom: 2rem; } .footer--centered .footer__logo { display: inline-block; margin-bottom: 0.75rem; } .footer--centered .footer__logo-img { height: 48px; width: auto; } .footer--centered .footer__logo-text { display: block; font-size: 1.5rem; font-weight: 700; color: var(--color-white); margin-bottom: 0.75rem; } /* Navigation */ .footer--centered .footer__nav { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 0.5rem; margin-bottom: 1.5rem; } .footer--centered .footer__nav a { color: var(--color-text-muted, var(--color-text-muted)); text-decoration: none; font-size: 0.9375rem; padding: 0.25rem 0.5rem; transition: color 0.2s ease; } .footer--centered .footer__nav a:hover { color: var(--color-white); } .footer--centered .footer__nav-divider { display: none; width: 4px; height: 4px; background: var(--color-text-muted, var(--color-text-muted)); border-radius: 50%; opacity: 0.5; } /* Contact Centered */ .footer--centered .footer__contact-centered { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.75rem; margin-bottom: 2rem; font-size: 0.9375rem; } .footer--centered .footer__contact-link { display: flex; align-items: center; gap: 0.5rem; color: var(--color-text-muted, var(--color-text-muted)); text-decoration: none; transition: color 0.2s ease; } .footer--centered .footer__contact-link:hover { color: var(--color-primary); } .footer--centered .footer__contact-divider { display: none; color: var(--color-text-muted, var(--color-text-muted)); opacity: 0.5; } /* Social */ .footer--centered .footer__social { display: flex; justify-content: center; gap: 1rem; margin-bottom: 2.5rem; } .footer--centered .footer__social a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; color: var(--color-white); transition: background 0.2s ease, transform 0.2s ease; } .footer--centered .footer__social a:hover { background: var(--color-primary); transform: scale(1.1); } .footer--centered .footer__social svg { width: 20px; height: 20px; } /* Bottom */ .footer--centered .footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 2rem; font-size: 0.8125rem; } .footer--centered .footer__copyright { margin: 0 0 0.75rem; } .footer--centered .footer__legal { display: flex; justify-content: center; gap: 1.5rem; } .footer--centered .footer__legal a { color: var(--color-text-muted, var(--color-text-muted)); text-decoration: none; transition: color 0.2s ease; } .footer--centered .footer__legal a:hover { color: var(--color-white); } /* Tablet */ @media (min-width: 640px) { .footer--centered .footer__nav-divider { display: block; } .footer--centered .footer__contact-centered { flex-direction: row; gap: 1rem; } .footer--centered .footer__contact-divider { display: inline; } } /* Desktop */ @media (min-width: 1024px) { .footer--centered .footer__nav a { padding: 0.25rem 1rem; } } /* ===================================================== FOOTER - split (v4) ===================================================== */ /* Footer Split - 2 Column Layout */ .footer--split { background: var(--color-bg-dark); color: var(--color-text-muted, var(--color-text-muted)); padding: 4rem 0 2rem; } .footer--split .footer__grid { display: grid; gap: 3rem; margin-bottom: 3rem; } /* Left Column */ .footer--split .footer__left { max-width: 400px; } .footer--split .footer__logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; margin-bottom: 1rem; } .footer--split .footer__logo-img { height: 44px; width: auto; } .footer--split .footer__logo-text { font-size: 1.375rem; font-weight: 700; color: var(--color-white); } .footer--split .footer__tagline { line-height: 1.6; margin-bottom: 1.5rem; font-size: 0.9375rem; } .footer--split .footer__contact-group { margin-bottom: 1.5rem; } .footer--split .footer__contact-item { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.75rem; color: var(--color-text-muted, var(--color-text-muted)); text-decoration: none; font-style: normal; font-size: 0.9375rem; transition: color 0.2s ease; } .footer--split .footer__contact-item:hover { color: var(--color-white); } .footer--split .footer__contact-item svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; } .footer--split .footer__social { display: flex; gap: 0.75rem; } .footer--split .footer__social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; color: var(--color-white); transition: background 0.2s ease, transform 0.2s ease; } .footer--split .footer__social a:hover { background: var(--color-primary); transform: translateY(-2px); } .footer--split .footer__social svg { width: 18px; height: 18px; } /* Right Column */ .footer--split .footer__links-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .footer--split .footer__heading { color: var(--color-white); font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1.25rem; } .footer--split .footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; } .footer--split .footer__list a { color: var(--color-text-muted, var(--color-text-muted)); text-decoration: none; font-size: 0.9375rem; transition: color 0.2s ease; } .footer--split .footer__list a:hover { color: var(--color-white); } /* Bottom */ .footer--split .footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 2rem; display: flex; flex-direction: column; gap: 1rem; font-size: 0.875rem; } .footer--split .footer__copyright { margin: 0; } .footer--split .footer__legal { display: flex; gap: 1.5rem; } .footer--split .footer__legal a { color: var(--color-text-muted, var(--color-text-muted)); text-decoration: none; transition: color 0.2s ease; } .footer--split .footer__legal a:hover { color: var(--color-white); } /* Tablet */ @media (min-width: 768px) { .footer--split .footer__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } .footer--split .footer__bottom { flex-direction: row; justify-content: space-between; } } /* Desktop */ @media (min-width: 1024px) { .footer--split .footer__grid { grid-template-columns: 1.2fr 1fr; gap: 6rem; } .footer--split .footer__links-grid { gap: 3rem; } } /* ===================================================== FOOTER - cta-banner (v5) ===================================================== */ /* Footer CTA Banner - CTA + Columns */ .footer--cta-banner { background: var(--color-bg-dark); color: var(--color-text-muted, var(--color-text-muted)); padding: 0 0 2rem; } /* CTA Banner */ .footer__cta-banner { background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); padding: 2.5rem 1.5rem; margin-bottom: 3rem; display: flex; flex-direction: column; gap: 1.5rem; text-align: center; } .footer__cta-content { max-width: 500px; margin: 0 auto; } .footer__cta-title { color: var(--color-white); font-size: clamp(1.25rem, 4vw, 1.75rem); font-weight: 700; margin: 0 0 0.5rem; } .footer__cta-desc { color: rgba(255, 255, 255, 0.9); font-size: 0.9375rem; margin: 0; line-height: 1.5; } .footer__cta-actions { display: flex; flex-direction: column; gap: 0.75rem; align-items: center; } .footer__cta-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 2rem; border-radius: 8px; font-size: 1rem; font-weight: 600; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; white-space: nowrap; } .footer__cta-btn--primary { background: var(--color-white); color: var(--color-primary); } .footer__cta-btn--primary:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2); } .footer__cta-btn--secondary { background: rgba(255, 255, 255, 0.15); color: var(--color-white); border: 2px solid rgba(255, 255, 255, 0.3); } .footer__cta-btn--secondary:hover { background: rgba(255, 255, 255, 0.25); border-color: rgba(255, 255, 255, 0.5); } /* Main Grid */ .footer--cta-banner .footer__grid { display: grid; gap: 2.5rem; margin-bottom: 3rem; padding: 0 1rem; } /* Brand Column */ .footer--cta-banner .footer__brand { max-width: 280px; } .footer--cta-banner .footer__logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; margin-bottom: 1rem; } .footer--cta-banner .footer__logo-img { height: 40px; width: auto; } .footer--cta-banner .footer__logo-text { font-size: 1.25rem; font-weight: 700; color: var(--color-white); } .footer--cta-banner .footer__tagline { line-height: 1.6; margin-bottom: 1.5rem; font-size: 0.9375rem; } .footer--cta-banner .footer__social { display: flex; gap: 0.75rem; } .footer--cta-banner .footer__social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.1); border-radius: 50%; color: var(--color-white); transition: background 0.2s ease; } .footer--cta-banner .footer__social a:hover { background: var(--color-primary); } .footer--cta-banner .footer__social svg { width: 18px; height: 18px; } /* Link Columns */ .footer--cta-banner .footer__heading { color: var(--color-white); font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 1.25rem; } .footer--cta-banner .footer__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.75rem; } .footer--cta-banner .footer__list a { color: var(--color-text-muted, var(--color-text-muted)); text-decoration: none; font-size: 0.9375rem; transition: color 0.2s ease; } .footer--cta-banner .footer__list a:hover { color: var(--color-white); } /* Contact */ .footer--cta-banner .footer__contact-item { display: flex; align-items: flex-start; gap: 0.75rem; margin-bottom: 0.75rem; color: var(--color-text-muted, var(--color-text-muted)); text-decoration: none; font-style: normal; font-size: 0.9375rem; transition: color 0.2s ease; } .footer--cta-banner .footer__contact-item:hover { color: var(--color-white); } .footer--cta-banner .footer__contact-item svg { width: 18px; height: 18px; flex-shrink: 0; margin-top: 2px; } /* Bottom */ .footer--cta-banner .footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding: 2rem 1rem 0; display: flex; flex-direction: column; gap: 1rem; font-size: 0.875rem; text-align: center; } .footer--cta-banner .footer__copyright { margin: 0; } .footer--cta-banner .footer__legal { display: flex; justify-content: center; gap: 1.5rem; } .footer--cta-banner .footer__legal a { color: var(--color-text-muted, var(--color-text-muted)); text-decoration: none; transition: color 0.2s ease; } .footer--cta-banner .footer__legal a:hover { color: var(--color-white); } /* Tablet */ @media (min-width: 640px) { .footer__cta-banner { flex-direction: row; justify-content: space-between; align-items: center; text-align: left; padding: 2.5rem 2rem; } .footer__cta-content { margin: 0; } .footer__cta-actions { flex-direction: row; } .footer--cta-banner .footer__grid { grid-template-columns: repeat(2, 1fr); padding: 0; } .footer--cta-banner .footer__bottom { flex-direction: row; justify-content: space-between; text-align: left; padding: 2rem 0 0; } } /* Desktop */ @media (min-width: 1024px) { .footer__cta-banner { padding: 3rem 4rem; } .footer--cta-banner .footer__grid { grid-template-columns: 2fr 1fr 1fr 1.5fr; gap: 3rem; } } /* ===================================================== FOOTER - simple-4col (v6) ===================================================== */ /* FOOTER SIMPLE 4-COL */ .footer-simple { background: var(--color-bg-dark, #1f2937); color: white; padding: 2.5rem 0 1.5rem; } .footer-simple .container { max-width: 1200px; margin: 0 auto; padding: 0 1.5rem; } .footer-simple__grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 2rem; margin-bottom: 2rem; } .footer-simple__company { display: flex; flex-direction: column; } .footer-simple__logo-link { display: block; margin-bottom: 1rem; text-decoration: none; } .footer-simple__logo { height: 40px; width: auto; max-width: 180px; object-fit: contain; object-position: left; } .footer-simple__logo-text { font-size: 1.25rem; font-weight: 700; color: var(--color-white); } .footer-simple__desc { color: #d1d5db; line-height: 1.5; margin-bottom: 1rem; font-size: 0.9rem; } .footer-simple__social { display: flex; gap: 1rem; } .footer-simple__social a { color: #9ca3af; transition: color 0.2s; } .footer-simple__social a:hover { color: var(--color-primary, #60a5fa); } .footer-simple__social svg { width: 20px; height: 20px; } /* Links Columns */ .footer-simple__links { min-width: 140px; } .footer-simple__heading { color: white; font-size: 0.875rem; font-weight: 600; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.05em; } .footer-simple__links ul { list-style: none; padding: 0; margin: 0; } .footer-simple__links li { margin-bottom: 0.5rem; } .footer-simple__links a { color: #d1d5db; text-decoration: none; font-size: 0.875rem; transition: color 0.2s; } .footer-simple__links a:hover { color: var(--color-primary, #60a5fa); } /* Contact Column */ .footer-simple__contact-item { display: flex; align-items: center; gap: 0.5rem; color: #d1d5db; font-size: 0.875rem; margin-bottom: 0.75rem; text-decoration: none; transition: color 0.2s; } a.footer-simple__contact-item:hover { color: var(--color-primary, #60a5fa); } .footer-simple__cta { display: inline-block; margin-top: 0.75rem; padding: 0.625rem 1.25rem; background: var(--color-primary, #60a5fa); color: white; text-decoration: none; border-radius: 6px; font-size: 0.875rem; font-weight: 600; transition: background 0.2s, transform 0.2s; } .footer-simple__cta:hover { background: var(--color-primary-dark, #3b82f6); transform: translateY(-2px); } /* Bottom Bar */ .footer-simple__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 1.25rem; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 1rem; font-size: 0.8125rem; color: #9ca3af; } .footer-simple__bottom p { margin: 0; } .footer-simple__legal { display: flex; gap: 1.5rem; } .footer-simple__legal a { color: #9ca3af; text-decoration: none; transition: color 0.2s; } .footer-simple__legal a:hover { color: white; } @media (max-width: 640px) { .footer-simple__grid { grid-template-columns: 1fr; } .footer-simple__bottom { flex-direction: column; text-align: center; } } /* ===================================================== FOOTER - saas-minimal (v7) ===================================================== */ /* Footer SaaS Minimal - Clean tech/developer footer */ .footer--saas { background: var(--color-bg-dark, #0f172a); color: var(--color-text-muted, rgba(255,255,255,0.6)); padding: 3rem 0 1.5rem; } .footer--saas .footer__row { display: flex; flex-direction: column; align-items: center; gap: 2rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.1); } /* Brand */ .footer--saas .footer__brand { text-align: center; } .footer--saas .footer__logo { display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; margin-bottom: 0.5rem; } .footer--saas .footer__logo-img { height: 36px; width: auto; } .footer--saas .footer__logo-text { font-size: 1.25rem; font-weight: 700; color: var(--color-white, #fff); } .footer--saas .footer__tagline { margin: 0; font-size: 0.875rem; color: var(--color-text-muted, rgba(255,255,255,0.5)); max-width: 280px; } /* Navigation */ .footer--saas .footer__nav { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.5rem; } .footer--saas .footer__nav a { color: var(--color-text-muted, rgba(255,255,255,0.7)); text-decoration: none; font-size: 0.9375rem; font-weight: 500; transition: color 0.2s ease; } .footer--saas .footer__nav a:hover { color: var(--color-white, #fff); } /* Social */ .footer--saas .footer__social { display: flex; gap: 0.75rem; } .footer--saas .footer__social a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: rgba(255, 255, 255, 0.08); border-radius: 8px; color: var(--color-white, #fff); transition: background 0.2s ease, transform 0.2s ease; } .footer--saas .footer__social a:hover { background: var(--color-primary); transform: translateY(-2px); } .footer--saas .footer__social svg { width: 18px; height: 18px; } /* Bottom */ .footer--saas .footer__bottom { display: flex; flex-direction: column; align-items: center; gap: 0.75rem; padding-top: 1.5rem; font-size: 0.8125rem; } .footer--saas .footer__copyright { margin: 0; color: var(--color-text-muted, rgba(255,255,255,0.5)); } .footer--saas .footer__legal { display: flex; gap: 1.5rem; } .footer--saas .footer__legal a { color: var(--color-text-muted, rgba(255,255,255,0.5)); text-decoration: none; transition: color 0.2s ease; } .footer--saas .footer__legal a:hover { color: var(--color-white, #fff); } /* Tablet+ */ @media (min-width: 768px) { .footer--saas .footer__row { flex-direction: row; justify-content: space-between; align-items: flex-start; } .footer--saas .footer__brand { text-align: left; } .footer--saas .footer__bottom { flex-direction: row; justify-content: space-between; } } /* Desktop */ @media (min-width: 1024px) { .footer--saas .footer__nav { gap: 2rem; } } /* ===================================================== GALLERY - grid-3col (v1) ===================================================== */ /* Gallery Grid 3-Column */ .gallery--grid { padding: var(--section-padding-y, 5rem) 0; background: var(--color-bg); } .gallery--grid[data-bg="alt"] { background: var(--color-bg-alt); } .gallery--grid[data-bg="dark"] { background: var(--color-bg-dark); } .gallery--grid[data-bg="dark"] .gallery__title, .gallery--grid[data-bg="dark"] .gallery__subtitle { color: var(--color-white); } .gallery--grid[data-spacing="compact"] { padding: 3rem 0; } .gallery--grid[data-spacing="spacious"] { padding: 7rem 0; } .gallery__header { text-align: center; margin-bottom: 3rem; max-width: 700px; margin-left: auto; margin-right: auto; } .gallery__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--color-text); margin: 0 0 1rem; } .gallery__subtitle { font-size: 1.0625rem; color: var(--color-text-secondary); margin: 0; line-height: 1.6; } .gallery__grid--3col { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .gallery__item { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; aspect-ratio: 4/3; cursor: pointer; } .gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .gallery__item:hover img { transform: scale(1.05); } /* Centered overlay with theme gradient */ .gallery__caption { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(var(--color-primary-rgb, 59, 130, 246), 0.9), rgba(var(--color-primary-dark-rgb, 29, 78, 216), 0.85)); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 1.5rem; color: var(--color-white); opacity: 0; transition: opacity 0.3s ease; } .gallery__item:hover .gallery__caption { opacity: 1; } .gallery__caption h4 { font-size: 1.25rem; font-weight: 600; margin: 0 0 0.5rem; line-height: 1.3; } .gallery__caption p { font-size: 0.9375rem; opacity: 0.95; margin: 0; line-height: 1.5; max-width: 90%; } @media (max-width: 992px) { .gallery__grid--3col { grid-template-columns: repeat(2, 1fr); gap: 1.25rem; } } @media (max-width: 640px) { .gallery__grid--3col { grid-template-columns: 1fr; gap: 1rem; } } /* ===================================================== GALLERY - masonry (v2) ===================================================== */ /* Gallery Masonry */ .gallery--masonry { padding: var(--section-padding-y, 5rem) 0; background: var(--color-bg); } .gallery--masonry[data-bg="alt"] { background: var(--color-bg-alt); } .gallery--masonry[data-bg="dark"] { background: var(--color-bg-dark); } .gallery--masonry[data-bg="dark"] .gallery__title, .gallery--masonry[data-bg="dark"] .gallery__subtitle { color: var(--color-white); } .gallery--masonry[data-spacing="compact"] { padding: 3rem 0; } .gallery--masonry[data-spacing="spacious"] { padding: 7rem 0; } .gallery--masonry .gallery__header { text-align: center; margin-bottom: 3rem; max-width: 700px; margin-left: auto; margin-right: auto; } .gallery--masonry .gallery__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--color-text); margin: 0 0 1rem; } .gallery--masonry .gallery__subtitle { font-size: 1.0625rem; color: var(--color-text-secondary); margin: 0; line-height: 1.6; } /* Grid-based masonry with varied spans */ .gallery__masonry { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 200px; gap: 1.25rem; } .gallery__masonry-item { position: relative; margin: 0; border-radius: var(--radius-lg); overflow: hidden; cursor: pointer; } /* Vary the sizes for masonry effect */ .gallery__masonry-item:nth-child(1) { grid-row: span 2; } .gallery__masonry-item:nth-child(4) { grid-column: span 2; } .gallery__masonry-item:nth-child(7) { grid-row: span 2; } .gallery__masonry-item:nth-child(10) { grid-column: span 2; } .gallery__masonry-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .gallery__masonry-item:hover img { transform: scale(1.05); } /* Centered overlay with theme gradient */ .gallery__masonry-item figcaption { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(var(--color-primary-rgb, 59, 130, 246), 0.9), rgba(var(--color-primary-dark-rgb, 29, 78, 216), 0.85)); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 1.5rem; color: var(--color-white); opacity: 0; transition: opacity 0.3s ease; } .gallery__masonry-item:hover figcaption { opacity: 1; } .gallery__masonry-item figcaption h4 { font-size: 1.125rem; font-weight: 600; margin: 0 0 0.5rem; line-height: 1.3; } .gallery__masonry-item figcaption p { font-size: 0.9375rem; opacity: 0.95; margin: 0; line-height: 1.5; max-width: 90%; } @media (max-width: 992px) { .gallery__masonry { grid-template-columns: repeat(2, 1fr); grid-auto-rows: 180px; gap: 1rem; } .gallery__masonry-item:nth-child(4), .gallery__masonry-item:nth-child(10) { grid-column: span 1; } } @media (max-width: 640px) { .gallery__masonry { grid-template-columns: 1fr; grid-auto-rows: auto; } .gallery__masonry-item { aspect-ratio: 4/3; grid-row: span 1 !important; grid-column: span 1 !important; } } /* ===================================================== GALLERY - featured (v3) ===================================================== */ /* Gallery Featured - Large Images with Overlay Content */ .gallery--featured { padding: var(--section-padding-y, 5rem) 0; background: var(--color-bg); } .gallery--featured[data-bg="alt"] { background: var(--color-bg-alt); } .gallery--featured[data-bg="dark"] { background: var(--color-bg-dark); } .gallery--featured[data-bg="dark"] .gallery__title, .gallery--featured[data-bg="dark"] .gallery__subtitle { color: var(--color-white); } .gallery--featured[data-spacing="compact"] { padding: 3rem 0; } .gallery--featured[data-spacing="spacious"] { padding: 7rem 0; } .gallery--featured .gallery__header { text-align: center; margin-bottom: 3rem; max-width: 700px; margin-left: auto; margin-right: auto; } .gallery--featured .gallery__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--color-text); margin: 0 0 1rem; } .gallery--featured .gallery__subtitle { font-size: 1.0625rem; color: var(--color-text-secondary); margin: 0; line-height: 1.6; } .gallery__featured-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 2rem; } .gallery__featured-item { position: relative; border-radius: var(--radius-xl); overflow: hidden; aspect-ratio: 16/10; cursor: pointer; } .gallery__featured-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .gallery__featured-item:hover img { transform: scale(1.05); } /* Full overlay with theme gradient */ .gallery__featured-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(var(--color-primary-rgb, 59, 130, 246), 0.92), rgba(var(--color-primary-dark-rgb, 29, 78, 216), 0.88)); display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center; padding: 2.5rem; color: var(--color-white); opacity: 0; transition: opacity 0.4s ease; } .gallery__featured-item:hover .gallery__featured-overlay { opacity: 1; } .gallery__featured-title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; margin: 0 0 0.75rem; line-height: 1.2; } .gallery__featured-desc { font-size: 1.0625rem; opacity: 0.95; margin: 0 0 1.25rem; line-height: 1.6; max-width: 90%; } .gallery__featured-bullets { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; text-align: left; } .gallery__featured-bullets li { position: relative; padding-left: 1.5rem; font-size: 0.9375rem; line-height: 1.4; opacity: 0.95; } .gallery__featured-bullets li::before { content: '✓'; position: absolute; left: 0; font-weight: 700; } /* Empty bullet handling */ .gallery__featured-bullets li:empty { display: none; } @media (max-width: 992px) { .gallery__featured-grid { grid-template-columns: 1fr; gap: 1.5rem; } .gallery__featured-item { aspect-ratio: 16/9; } } @media (max-width: 640px) { .gallery__featured-overlay { padding: 1.5rem; } .gallery__featured-title { font-size: 1.25rem; } .gallery__featured-desc { font-size: 0.9375rem; } } /* ===================================================== GALLERY - grid-rows (v4) ===================================================== */ /* Gallery Rows - Large Grid */ .gallery--rows { padding: var(--section-padding-y, 5rem) 0; background: var(--color-bg); } .gallery--rows[data-bg="alt"] { background: var(--color-bg-alt); } .gallery--rows[data-bg="dark"] { background: var(--color-bg-dark); } .gallery--rows[data-bg="dark"] .gallery__title, .gallery--rows[data-bg="dark"] .gallery__subtitle { color: var(--color-white); } .gallery--rows[data-spacing="compact"] { padding: 3rem 0; } .gallery--rows[data-spacing="spacious"] { padding: 7rem 0; } .gallery--rows .gallery__header { text-align: center; margin-bottom: 3rem; max-width: 700px; margin-left: auto; margin-right: auto; } .gallery--rows .gallery__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--color-text); margin: 0 0 1rem; } .gallery--rows .gallery__subtitle { font-size: 1.0625rem; color: var(--color-text-secondary); margin: 0; line-height: 1.6; } .gallery__rows { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .gallery__row-item { position: relative; margin: 0; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; cursor: pointer; } .gallery__row-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease; } .gallery__row-item:hover img { transform: scale(1.05); } /* Centered overlay with theme gradient */ .gallery__row-item figcaption { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(var(--color-primary-rgb, 59, 130, 246), 0.9), rgba(var(--color-primary-dark-rgb, 29, 78, 216), 0.85)); display: flex; align-items: center; justify-content: center; text-align: center; padding: 1rem; color: var(--color-white); font-size: 1rem; font-weight: 600; opacity: 0; transition: opacity 0.3s ease; } .gallery__row-item:hover figcaption { opacity: 1; } /* Hide empty items */ .gallery__row-item:has(img[src=""]), .gallery__row-item:has(img:not([src])) { display: none; } @media (max-width: 992px) { .gallery__rows { grid-template-columns: repeat(3, 1fr); gap: 0.75rem; } } @media (max-width: 768px) { .gallery__rows { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .gallery__rows { grid-template-columns: repeat(2, 1fr); gap: 0.5rem; } .gallery__row-item { border-radius: var(--radius-sm); } .gallery__row-item figcaption { font-size: 0.875rem; padding: 0.75rem; } } /* ===================================================== HERO - centered (v1) ===================================================== */ /* HERO: CENTERED */ .hero--centered { position: relative; min-height: 85vh; display: flex; align-items: center; justify-content: center; overflow: hidden; } .hero--centered .hero__bg { position: absolute; inset: 0; z-index: 0; } .hero--centered .hero__bg-img { width: 100%; height: 100%; object-fit: cover; } .hero--centered .hero__overlay { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.4) 100%); z-index: 1; } .hero--centered[data-bg="light"] .hero__overlay { background: linear-gradient(135deg, rgba(255,255,255,0.85) 0%, rgba(248,250,252,0.75) 100%); } .hero--centered .container { position: relative; z-index: 2; } .hero--centered .hero__content { max-width: 800px; margin: 0 auto; text-align: center; padding: 2rem 1rem; } .hero--centered .hero__eyebrow { display: inline-block; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-accent); margin-bottom: 1rem; padding: 0.5rem 1rem; background: rgba(255,255,255,0.15); border-radius: var(--radius-full); } .hero--centered .hero__title { font-size: clamp(2.25rem, 5vw, 4rem); font-weight: 800; line-height: 1.1; margin-bottom: 1.5rem; color: var(--color-white); } .hero--centered[data-bg="light"] .hero__title { color: var(--color-text); } .hero--centered .hero__subtitle { font-size: clamp(1rem, 2vw, 1.25rem); line-height: 1.7; color: rgba(255,255,255,0.9); margin-bottom: 2rem; max-width: 600px; margin-left: auto; margin-right: auto; } .hero--centered[data-bg="light"] .hero__subtitle { color: var(--color-text-secondary); } .hero--centered .hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: center; margin-bottom: 3rem; } .hero--centered .hero__cta .btn { min-height: 52px; padding: 0.875rem 2rem; } .hero--centered .hero__trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 2rem; } .hero--centered .hero__trust-item { text-align: center; } .hero--centered .hero__trust-number { display: block; font-size: 1.75rem; font-weight: 700; color: var(--color-white); } .hero--centered[data-bg="light"] .hero__trust-number { color: var(--color-primary); } .hero--centered .hero__trust-label { font-size: 0.8125rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.7); } .hero--centered[data-bg="light"] .hero__trust-label { color: var(--color-text-muted); } @media (max-width: 767px) { .hero--centered { min-height: 90vh; } .hero--centered .hero__cta { flex-direction: column; align-items: center; } .hero--centered .hero__cta .btn { width: 100%; max-width: 300px; } .hero--centered .hero__trust { gap: 1.5rem; } } /* ===================================================== HERO - split (v2) ===================================================== */ /* HERO: SPLIT - Enhanced with Social Proof */ .hero--split { background: var(--color-bg); padding: 4rem 0; } .hero--split[data-bg="alt"] { background: var(--color-bg-alt); } .hero--split[data-bg="dark"] { background: var(--color-bg-dark); } .hero--split .hero__grid { display: grid; gap: 3rem; align-items: center; } .hero--split .hero__content { order: 1; } .hero--split .hero__media { order: 2; } .hero--split[data-direction="reverse"] .hero__content { order: 2; } .hero--split[data-direction="reverse"] .hero__media { order: 1; } .hero--split .hero__eyebrow { display: inline-block; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary); margin-bottom: 1rem; } .hero--split .hero__title { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; line-height: 1.1; margin-bottom: 1.5rem; color: var(--color-text); } .hero--split[data-bg="dark"] .hero__title { color: var(--color-white); } .hero--split .hero__subtitle { font-size: 1.125rem; color: var(--color-text-secondary); line-height: 1.7; margin-bottom: 1.5rem; } .hero--split[data-bg="dark"] .hero__subtitle { color: rgba(255,255,255,0.8); } /* Social Proof - Static HTML for SEO */ .hero__social-proof { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; padding: 0.875rem 1.25rem; background: var(--color-star-bg); border-radius: var(--radius-lg); margin-bottom: 2rem; box-shadow: 0 2px 8px rgba(251, 191, 36, 0.2); } .hero__stars { display: flex; gap: 2px; } .hero__star { color: var(--color-accent); font-size: 1.25rem; line-height: 1; } .hero__star--partial { background: linear-gradient(90deg, var(--color-accent) 80%, var(--color-border) 80%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; } .hero__rating-value { font-weight: 700; font-size: 1.125rem; color: var(--color-star-text); } .hero__rating-separator { color: var(--color-accent-dark); } .hero__review-count { color: var(--color-star-text); font-weight: 500; } .hero--split .hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; } .hero--split .hero__cta .btn { min-height: 48px; } /* Trust Items - Horizontal with Icons */ .hero--split .hero__trust { display: flex; flex-wrap: wrap; gap: 1.5rem; } .hero--split .hero__trust-item { display: flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; color: var(--color-text-secondary); } .hero--split .hero__trust-icon { width: 18px; height: 18px; color: var(--color-primary); } .hero--split[data-bg="dark"] .hero__trust-item { color: rgba(255,255,255,0.7); } .hero--split[data-bg="dark"] .hero__trust-icon { color: var(--color-primary-light); } /* Media Section */ .hero--split .hero__media { position: relative; } .hero--split .hero__img { width: 100%; height: auto; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); } .hero__media-badge { position: absolute; bottom: -1rem; left: 50%; transform: translateX(-50%); background: var(--color-bg); padding: 0.75rem 1.5rem; border-radius: var(--radius-full); box-shadow: var(--shadow-lg); font-size: 0.875rem; color: var(--color-text); white-space: nowrap; } .hero__media-badge strong { color: var(--color-primary); } @media (min-width: 992px) { .hero--split .hero__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } .hero--split { padding: 5rem 0; } } @media (max-width: 991px) { .hero--split .hero__content { text-align: center; } .hero__social-proof { justify-content: center; } .hero--split .hero__cta { justify-content: center; } .hero--split .hero__trust { justify-content: center; } } @media (max-width: 639px) { .hero--split .hero__cta { flex-direction: column; align-items: center; } .hero--split .hero__cta .btn { width: 100%; max-width: 280px; } .hero__social-proof { padding: 0.75rem 1rem; font-size: 0.875rem; } .hero__star { font-size: 1rem; } } /* ===================================================== HERO - slideshow (v3) ===================================================== */ /* HERO: SLIDESHOW */ .hero--slideshow { background: var(--color-bg); padding: 4rem 0; } .hero--slideshow[data-bg="alt"] { background: var(--color-bg-alt); } .hero--slideshow[data-bg="dark"] { background: var(--color-bg-dark); } .hero--slideshow .hero__grid { display: grid; gap: 3rem; align-items: center; } .hero--slideshow .hero__eyebrow { display: inline-block; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary); margin-bottom: 1rem; } .hero--slideshow .hero__title { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; line-height: 1.1; margin-bottom: 1.5rem; color: var(--color-text); } .hero--slideshow[data-bg="dark"] .hero__title { color: var(--color-white); } .hero--slideshow .hero__subtitle { font-size: 1.125rem; color: var(--color-text-secondary); line-height: 1.7; margin-bottom: 2rem; } .hero--slideshow[data-bg="dark"] .hero__subtitle { color: rgba(255,255,255,0.8); } .hero--slideshow .hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem; } .hero--slideshow .hero__cta .btn { min-height: 48px; } .hero--slideshow .hero__trust { display: flex; gap: 2rem; } .hero--slideshow .hero__trust-item { text-align: center; } .hero--slideshow .hero__trust-number { display: block; font-size: 1.5rem; font-weight: 700; color: var(--color-primary); } .hero--slideshow .hero__trust-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); } /* Slideshow */ .hero__slideshow { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); } .hero__slides { position: relative; aspect-ratio: 4 / 3; } .hero__slide-item { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 0.8s ease; } .hero__slide-item.is-active { opacity: 1; } .hero__slide-item img { width: 100%; height: 100%; object-fit: cover; } .hero__slideshow-nav { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; z-index: 2; } .hero__slideshow-dot { width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--color-white); background: transparent; cursor: pointer; transition: var(--transition); min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; } .hero__slideshow-dot::before { content: ""; width: 12px; height: 12px; border-radius: 50%; border: 2px solid var(--color-white); background: transparent; transition: var(--transition); } .hero__slideshow-dot.is-active::before, .hero__slideshow-dot:hover::before { background: var(--color-white); } @media (min-width: 992px) { .hero--slideshow .hero__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } .hero--slideshow { padding: 5rem 0; } } @media (max-width: 991px) { .hero--slideshow .hero__content { text-align: center; } .hero--slideshow .hero__cta { justify-content: center; } .hero--slideshow .hero__trust { justify-content: center; } } /* ===================================================== HERO - video (v4) ===================================================== */ /* HERO: VIDEO */ .hero--video { background: var(--color-bg); padding: 4rem 0; } .hero--video[data-bg="alt"] { background: var(--color-bg-alt); } .hero--video[data-bg="dark"] { background: var(--color-bg-dark); } .hero--video .hero__grid { display: grid; gap: 3rem; align-items: center; } .hero--video .hero__eyebrow { display: inline-block; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary); margin-bottom: 1rem; } .hero--video .hero__title { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; line-height: 1.1; margin-bottom: 1.5rem; color: var(--color-text); } .hero--video[data-bg="dark"] .hero__title { color: var(--color-white); } .hero--video .hero__subtitle { font-size: 1.125rem; color: var(--color-text-secondary); line-height: 1.7; margin-bottom: 2rem; } .hero--video[data-bg="dark"] .hero__subtitle { color: rgba(255,255,255,0.8); } .hero--video .hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem; } .hero--video .hero__cta .btn { min-height: 48px; } .hero--video .hero__trust { display: flex; gap: 2rem; } .hero--video .hero__trust-item { text-align: center; } .hero--video .hero__trust-number { display: block; font-size: 1.5rem; font-weight: 700; color: var(--color-primary); } .hero--video .hero__trust-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); } /* Video Container */ .hero__video-container { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); aspect-ratio: 16 / 9; } .hero__video { width: 100%; height: 100%; object-fit: cover; } .hero__video-toggle { position: absolute; bottom: 1rem; right: 1rem; z-index: 3; width: 48px; height: 48px; border-radius: 50%; background: var(--color-primary); border: none; color: var(--color-white); cursor: pointer; display: flex; align-items: center; justify-content: center; transition: var(--transition); box-shadow: var(--shadow-lg); } .hero__video-toggle:hover { background: var(--color-primary-dark); transform: scale(1.1); } .hero__video-icon { width: 20px; height: 20px; } .hero__video-icon--play { display: none; } .hero__video-icon--pause { display: block; } .hero__video-toggle.is-paused .hero__video-icon--play { display: block; } .hero__video-toggle.is-paused .hero__video-icon--pause { display: none; } @media (min-width: 992px) { .hero--video .hero__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } .hero--video { padding: 5rem 0; } } @media (max-width: 991px) { .hero--video .hero__content { text-align: center; } .hero--video .hero__cta { justify-content: center; } .hero--video .hero__trust { justify-content: center; } } /* ===================================================== HERO - gallery (v5) ===================================================== */ /* HERO: GALLERY */ .hero--gallery { background: var(--gradient-brand); padding: 4rem 0; } .hero--gallery[data-bg="white"] { background: var(--color-bg); } .hero--gallery[data-bg="alt"] { background: var(--color-bg-alt); } .hero--gallery[data-bg="dark"] { background: var(--color-bg-dark); } .hero--gallery[data-bg="gradient"] { background: var(--gradient-brand); } .hero--gallery[data-bg="gradient-dark"] { background: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%); } .hero--gallery[data-bg="gradient-primary"] { background: var(--gradient-primary); } /* White text on gradient/dark backgrounds */ .hero--gallery, .hero--gallery[data-bg="gradient"], .hero--gallery[data-bg="gradient-dark"], .hero--gallery[data-bg="gradient-primary"], .hero--gallery[data-bg="dark"] { color: var(--color-white); } .hero--gallery .hero__title, .hero--gallery[data-bg="gradient"] .hero__title, .hero--gallery[data-bg="gradient-dark"] .hero__title, .hero--gallery[data-bg="gradient-primary"] .hero__title, .hero--gallery[data-bg="dark"] .hero__title { color: var(--color-white); } .hero--gallery .hero__subtitle, .hero--gallery[data-bg="gradient"] .hero__subtitle, .hero--gallery[data-bg="gradient-dark"] .hero__subtitle, .hero--gallery[data-bg="gradient-primary"] .hero__subtitle, .hero--gallery[data-bg="dark"] .hero__subtitle { color: rgba(255,255,255,0.9); } .hero--gallery .hero__eyebrow, .hero--gallery[data-bg="gradient"] .hero__eyebrow, .hero--gallery[data-bg="gradient-dark"] .hero__eyebrow, .hero--gallery[data-bg="gradient-primary"] .hero__eyebrow { color: rgba(255,255,255,0.95); background: rgba(255,255,255,0.15); padding: 0.25rem 0.75rem; border-radius: var(--radius-full); display: inline-block; } .hero--gallery .hero__trust-number, .hero--gallery[data-bg="gradient"] .hero__trust-number, .hero--gallery[data-bg="gradient-dark"] .hero__trust-number, .hero--gallery[data-bg="gradient-primary"] .hero__trust-number { color: var(--color-white); } .hero--gallery .hero__trust-label, .hero--gallery[data-bg="gradient"] .hero__trust-label, .hero--gallery[data-bg="gradient-dark"] .hero__trust-label, .hero--gallery[data-bg="gradient-primary"] .hero__trust-label { color: rgba(255,255,255,0.8); } /* White background overrides */ .hero--gallery[data-bg="white"] .hero__title { color: var(--color-text); } .hero--gallery[data-bg="white"] .hero__subtitle { color: var(--color-text-secondary); } .hero--gallery[data-bg="white"] .hero__eyebrow { color: var(--color-primary); background: transparent; } .hero--gallery[data-bg="white"] .hero__trust-number { color: var(--color-primary); } .hero--gallery[data-bg="white"] .hero__trust-label { color: var(--color-text-muted); } .hero--gallery .hero__grid { display: grid; gap: 3rem; align-items: center; } .hero--gallery .hero__eyebrow { font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: 1rem; } .hero--gallery .hero__title { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; line-height: 1.1; margin-bottom: 1.5rem; } .hero--gallery .hero__subtitle { font-size: 1.125rem; line-height: 1.7; margin-bottom: 2rem; } .hero--gallery .hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem; } .hero--gallery .hero__cta .btn { min-height: 48px; } /* Button styling for gradient background */ .hero--gallery .btn--primary { background: var(--color-white); color: var(--color-primary); } .hero--gallery .btn--primary:hover { background: rgba(255,255,255,0.9); } .hero--gallery .btn--outline { background: transparent; border: 2px solid rgba(255,255,255,0.5); color: var(--color-white); } .hero--gallery .btn--outline:hover { background: rgba(255,255,255,0.1); border-color: var(--color-white); } .hero--gallery .hero__trust { display: flex; gap: 2rem; } .hero--gallery .hero__trust-item { text-align: center; } .hero--gallery .hero__trust-number { display: block; font-size: 1.5rem; font-weight: 700; } .hero--gallery .hero__trust-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; } /* Gallery Grid */ .hero__gallery-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; } .hero__gallery-item { position: relative; border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 1; box-shadow: var(--shadow-lg); transition: transform 0.3s ease, box-shadow 0.3s ease; } .hero__gallery-item:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); } .hero__gallery-item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s ease; } .hero__gallery-item:hover img { transform: scale(1.05); } @media (min-width: 992px) { .hero--gallery .hero__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } .hero--gallery { padding: 5rem 0; } .hero__gallery-grid { gap: 1.5rem; } } @media (max-width: 991px) { .hero--gallery .hero__content { text-align: center; } .hero--gallery .hero__cta { justify-content: center; } .hero--gallery .hero__trust { justify-content: center; } .hero__gallery-grid { max-width: 400px; margin: 0 auto; } } /* ===================================================== HERO - gradient (v6) ===================================================== */ /* HERO: GRADIENT */ .hero--gradient { position: relative; padding: 4rem 0; overflow: hidden; } .hero__gradient-bg { position: absolute; inset: 0; z-index: 0; background: var(--gradient-brand); } .hero--gradient[data-bg="gradient-dark"] .hero__gradient-bg { background: linear-gradient(135deg, var(--color-bg-dark) 0%, var(--color-bg-darker) 50%, var(--color-bg-dark) 100%); } .hero--gradient[data-bg="gradient-primary"] .hero__gradient-bg { background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-primary) 50%, var(--color-primary-dark) 100%); } .hero--gradient .container { position: relative; z-index: 1; } .hero--gradient .hero__grid { display: grid; gap: 3rem; align-items: center; } .hero--gradient .hero__eyebrow { display: inline-block; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: rgba(255,255,255,0.95); background: rgba(255,255,255,0.15); padding: 0.25rem 0.75rem; border-radius: var(--radius-full); margin-bottom: 1rem; } .hero--gradient .hero__title { font-size: clamp(2rem, 4vw, 3.25rem); font-weight: 800; line-height: 1.1; margin-bottom: 1.5rem; color: var(--color-white); } .hero--gradient .hero__subtitle { font-size: 1.125rem; color: rgba(255,255,255,0.9); line-height: 1.7; margin-bottom: 2rem; } .hero--gradient .hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2rem; } .hero--gradient .hero__cta .btn { min-height: 48px; } /* Button styling for gradient background */ .hero--gradient .btn--accent { background: var(--color-white); color: var(--color-primary); } .hero--gradient .btn--accent:hover { background: rgba(255,255,255,0.9); } .hero--gradient .btn--white { background: transparent; border: 2px solid rgba(255,255,255,0.5); color: var(--color-white); } .hero--gradient .btn--white:hover { background: rgba(255,255,255,0.1); border-color: var(--color-white); } /* Features List */ .hero__features { list-style: none; padding: 0; margin: 0 0 2rem; display: flex; flex-direction: column; gap: 0.75rem; } .hero__feature { display: flex; align-items: center; gap: 0.75rem; color: rgba(255,255,255,0.85); font-size: 1rem; } .hero__feature-icon { width: 1.25rem; height: 1.25rem; color: var(--color-success); flex-shrink: 0; } /* Trust Stats */ .hero--gradient .hero__trust { display: flex; gap: 2rem; } .hero--gradient .hero__trust-item { text-align: center; } .hero--gradient .hero__trust-number { display: block; font-size: 1.5rem; font-weight: 700; color: var(--color-white); } .hero--gradient .hero__trust-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: rgba(255,255,255,0.8); } /* Image Frame */ .hero__image-frame { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); } .hero__image-frame::before { content: ""; position: absolute; inset: -4px; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-secondary) 100%); border-radius: calc(var(--radius-lg) + 4px); z-index: -1; } .hero__image-frame .hero__img { width: 100%; height: auto; display: block; border-radius: var(--radius-lg); } @media (min-width: 992px) { .hero--gradient .hero__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } .hero--gradient { padding: 5rem 0; } } @media (max-width: 991px) { .hero--gradient .hero__content { text-align: center; } .hero--gradient .hero__cta { justify-content: center; } .hero__features { align-items: center; } .hero--gradient .hero__trust { justify-content: center; } } /* ===================================================== HERO - modular (v7) ===================================================== */ /* HERO: MODULAR - Base */ .hero--modular { position: relative; padding: 5rem 0; background: var(--color-bg); overflow: hidden; } .hero--modular[data-bg="alt"] { background: var(--color-bg-alt); } .hero--modular[data-bg="dark"] { background: var(--color-bg-dark); } /* Background layers - hidden by default */ .hero--modular .hero__bg-image, .hero--modular .hero__bg-video, .hero--modular .hero__bg-slideshow, .hero--modular .hero__overlay { display: none; position: absolute; inset: 0; z-index: 0; } /* Activate backgrounds via data-bg */ .hero--modular[data-bg="image"] .hero__bg-image { display: block; background-size: cover; background-position: center; } .hero--modular[data-bg="video"] .hero__bg-video { display: block; } .hero--modular[data-bg="video"] .hero__bg-video video { width: 100%; height: 100%; object-fit: cover; } .hero--modular[data-bg="slideshow"] .hero__bg-slideshow { display: block; } .hero--modular[data-bg="image"] .hero__overlay, .hero--modular[data-bg="video"] .hero__overlay, .hero--modular[data-bg="slideshow"] .hero__overlay { display: block; background: linear-gradient(135deg, rgba(0,0,0,0.6) 0%, rgba(0,0,0,0.4) 100%); z-index: 1; } .hero--modular .container { position: relative; z-index: 2; } /* Grid layout - default centered */ .hero--modular .hero__grid { display: flex; flex-direction: column; align-items: center; text-align: center; } .hero--modular .hero__content { max-width: 800px; } .hero--modular .hero__media { display: none; } /* Split layout */ .hero--modular[data-layout="split"] .hero__grid, .hero--modular[data-layout="split-reverse"] .hero__grid { display: grid; grid-template-columns: 1fr; gap: 3rem; align-items: center; text-align: left; } .hero--modular[data-layout="split"] .hero__media, .hero--modular[data-layout="split-reverse"] .hero__media { display: block; } /* Content styles */ .hero--modular .hero__eyebrow { display: inline-block; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary); margin-bottom: 1rem; } .hero--modular[data-bg="image"] .hero__eyebrow, .hero--modular[data-bg="video"] .hero__eyebrow { color: var(--color-accent); } .hero--modular .hero__title { font-size: clamp(2rem, 4vw, 3.5rem); font-weight: 800; line-height: 1.1; margin-bottom: 1.5rem; color: var(--color-text); } .hero--modular[data-bg="image"] .hero__title, .hero--modular[data-bg="video"] .hero__title, .hero--modular[data-bg="dark"] .hero__title { color: var(--color-white); } .hero--modular .hero__subtitle { font-size: 1.125rem; color: var(--color-text-secondary); line-height: 1.7; margin-bottom: 2rem; max-width: 600px; } .hero--modular[data-bg="image"] .hero__subtitle, .hero--modular[data-bg="video"] .hero__subtitle, .hero--modular[data-bg="dark"] .hero__subtitle { color: rgba(255,255,255,0.9); } .hero--modular .hero__cta { display: flex; flex-wrap: wrap; gap: 1rem; margin-bottom: 2.5rem; } .hero--modular[data-layout="centered"] .hero__cta { justify-content: center; } .hero--modular .hero__cta .btn { min-height: 48px; } .hero--modular .hero__trust { display: flex; gap: 2rem; } .hero--modular[data-layout="centered"] .hero__trust { justify-content: center; } .hero--modular .hero__trust-item { text-align: center; } .hero--modular .hero__trust-number { display: block; font-size: 1.5rem; font-weight: 700; color: var(--color-primary); } .hero--modular[data-bg="image"] .hero__trust-number, .hero--modular[data-bg="video"] .hero__trust-number, .hero--modular[data-bg="dark"] .hero__trust-number { color: var(--color-white); } .hero--modular .hero__trust-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--color-text-muted); } .hero--modular[data-bg="image"] .hero__trust-label, .hero--modular[data-bg="video"] .hero__trust-label, .hero--modular[data-bg="dark"] .hero__trust-label { color: rgba(255,255,255,0.7); } /* Media elements - hidden by default */ .hero--modular .hero__media-image, .hero--modular .hero__media-gallery, .hero--modular .hero__media-slideshow, .hero--modular .hero__media-video { display: none; } /* Activate media via data-media */ .hero--modular[data-media="image"] .hero__media-image { display: block; width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); } .hero--modular[data-media="gallery"] .hero__media-gallery { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .hero--modular[data-media="gallery"] .hero__media-gallery img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: var(--radius-md); box-shadow: var(--shadow-md); } .hero--modular[data-media="slideshow"] .hero__media-slideshow { display: block; position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); } .hero--modular[data-media="video"] .hero__media-video { display: block; } .hero--modular[data-media="video"] .hero__media-video video { width: 100%; border-radius: var(--radius-lg); box-shadow: var(--shadow-xl); } /* Slideshow styles */ .hero__media-slides { position: relative; aspect-ratio: 4 / 3; } .hero__media-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s ease; } .hero__media-slide.is-active { opacity: 1; } .hero__media-dots { position: absolute; bottom: 1rem; left: 50%; transform: translateX(-50%); display: flex; gap: 0.5rem; } /* Background slideshow */ .hero__bg-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1s ease; } .hero__bg-slide.is-active { opacity: 1; } @media (min-width: 992px) { .hero--modular[data-layout="split"] .hero__grid, .hero--modular[data-layout="split-reverse"] .hero__grid { grid-template-columns: 1fr 1fr; gap: 4rem; } .hero--modular[data-layout="split-reverse"] .hero__content { order: 2; } .hero--modular[data-layout="split-reverse"] .hero__media { order: 1; } } @media (max-width: 991px) { .hero--modular[data-layout="split"] .hero__grid, .hero--modular[data-layout="split-reverse"] .hero__grid { text-align: center; } .hero--modular[data-layout="split"] .hero__cta, .hero--modular[data-layout="split-reverse"] .hero__cta { justify-content: center; } .hero--modular[data-layout="split"] .hero__trust, .hero--modular[data-layout="split-reverse"] .hero__trust { justify-content: center; } } /* ===================================================== NAVIGATION - standard (v1) ===================================================== */ /* =========================================== NAV STANDARD - With Accessibility Enhancements =========================================== */ /* Skip Link */ .skip-link { position: absolute; top: -100%; left: 50%; transform: translateX(-50%); padding: 1rem 2rem; background: var(--color-primary); color: var(--color-white); font-weight: 600; text-decoration: none; border-radius: 0 0 var(--radius-md) var(--radius-md); z-index: 9999; transition: top 0.2s ease; } .skip-link:focus { top: 0; outline: 3px solid var(--color-primary-dark); outline-offset: 2px; } .nav--standard { position: sticky; top: 0; z-index: 1000; background: var(--color-bg); border-bottom: 1px solid var(--color-border); transition: var(--transition); } .nav--standard .nav__inner { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; gap: 2rem; } /* Logo */ .nav--standard .nav__logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; flex-shrink: 0; } .nav--standard .nav__logo:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 4px; border-radius: var(--radius-sm); } .nav--standard .nav__logo-img { height: 40px; width: auto; } .nav--standard .nav__logo-text { font-size: 1.25rem; font-weight: 700; color: var(--color-text); } /* Desktop Menu */ .nav--standard .nav__menu { display: none; align-items: center; gap: 2rem; } .nav--standard .nav__link { color: var(--color-text-secondary); font-weight: 500; text-decoration: none; padding: 0.5rem 0; position: relative; transition: var(--transition); } .nav--standard .nav__link:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 4px; border-radius: var(--radius-sm); } .nav--standard .nav__link:hover, .nav--standard .nav__link--active { color: var(--color-primary); } .nav--standard .nav__link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 0; height: 2px; background: var(--color-primary); transition: var(--transition); } .nav--standard .nav__link:hover::after { width: 100%; } /* Actions */ .nav--standard .nav__actions { display: flex; align-items: center; gap: 1rem; } .nav--standard .nav__phone { display: none; align-items: center; gap: 0.5rem; color: var(--color-text); font-weight: 500; text-decoration: none; transition: var(--transition); } .nav--standard .nav__phone:hover { color: var(--color-primary); } .nav--standard .nav__phone:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 4px; border-radius: var(--radius-sm); } .nav--standard .nav__phone-icon { width: 1.25rem; height: 1.25rem; } .nav--standard .nav__actions .btn { display: none; } /* Mobile Toggle */ .nav--standard .nav__toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 44px; height: 44px; padding: 10px; background: none; border: none; cursor: pointer; border-radius: var(--radius-sm); } .nav--standard .nav__toggle:focus-visible { outline: 3px solid var(--color-primary); outline-offset: 2px; } .nav--standard .nav__toggle span { display: block; width: 24px; height: 2px; background: var(--color-text); transition: var(--transition); } .nav--standard .nav__toggle.is-active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .nav--standard .nav__toggle.is-active span:nth-child(2) { opacity: 0; } .nav--standard .nav__toggle.is-active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* Mobile Menu */ .nav--standard .nav__mobile-menu { display: none; padding: 1rem 0 1.5rem; border-top: 1px solid var(--color-border); } .nav--standard .nav__mobile-menu.is-open { display: block; } .nav--standard .nav__mobile-links { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; } .nav--standard .nav__mobile-link { display: block; padding: 0.75rem 1rem; color: var(--color-text); font-weight: 500; text-decoration: none; border-radius: var(--radius-md); transition: var(--transition); } .nav--standard .nav__mobile-link:hover, .nav--standard .nav__mobile-link:focus-visible { background: var(--color-bg-alt); color: var(--color-primary); outline: none; } .nav--standard .nav__mobile-actions { display: flex; flex-direction: column; gap: 1rem; padding: 0 1rem; } .nav--standard .nav__mobile-phone { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem; color: var(--color-text); font-weight: 600; text-decoration: none; background: var(--color-bg-alt); border-radius: var(--radius-md); } /* =========== RESPONSIVE =========== */ @media (min-width: 768px) { .nav--standard .nav__menu { display: flex; } .nav--standard .nav__phone { display: flex; } .nav--standard .nav__toggle { display: none; } .nav--standard .nav__mobile-menu { display: none !important; } } @media (min-width: 1024px) { .nav--standard .nav__actions .btn { display: inline-flex; } } /* ===================================================== NAVIGATION - split (v2) ===================================================== */ /* =========================================== NAV SPLIT - Logo left, links centered, CTA right =========================================== */ .nav--split { position: sticky; top: 0; z-index: 1000; background: var(--color-bg); border-bottom: 1px solid var(--color-border); } .nav--split .nav__inner { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; } /* Logo */ .nav--split .nav__logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; flex: 0 0 auto; } .nav--split .nav__logo-img { height: 40px; width: auto; } .nav--split .nav__logo-text { font-size: 1.25rem; font-weight: 700; color: var(--color-text); } /* Centered Menu */ .nav--split .nav__menu { display: none; align-items: center; justify-content: center; gap: 2rem; flex: 1 1 auto; } .nav--split .nav__link { color: var(--color-text-secondary); font-weight: 500; text-decoration: none; transition: var(--transition); } .nav--split .nav__link:hover { color: var(--color-primary); } /* Actions (right side) */ .nav--split .nav__actions { display: flex; align-items: center; gap: 1rem; flex: 0 0 auto; } /* CTA */ .nav--split .nav__cta { display: none; } /* Mobile Toggle */ .nav--split .nav__toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; padding: 4px; background: none; border: none; cursor: pointer; } .nav--split .nav__toggle span { display: block; width: 24px; height: 2px; background: var(--color-text); transition: var(--transition); } .nav--split .nav__toggle.is-active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .nav--split .nav__toggle.is-active span:nth-child(2) { opacity: 0; } .nav--split .nav__toggle.is-active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* Mobile Menu */ .nav--split .nav__mobile-menu { display: none; padding: 1rem 0 1.5rem; border-top: 1px solid var(--color-border); } .nav--split .nav__mobile-menu.is-open { display: block; } .nav--split .nav__mobile-links { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; } .nav--split .nav__mobile-link { display: block; padding: 0.75rem 1rem; color: var(--color-text); font-weight: 500; text-decoration: none; border-radius: var(--radius-md); transition: var(--transition); } .nav--split .nav__mobile-link:hover { background: var(--color-bg-alt); color: var(--color-primary); } .nav--split .nav__mobile-actions { padding: 0 1rem; } /* =========== RESPONSIVE =========== */ @media (min-width: 768px) { .nav--split .nav__menu { display: flex; } .nav--split .nav__cta { display: inline-flex; } .nav--split .nav__toggle { display: none; } .nav--split .nav__mobile-menu { display: none !important; } } /* ===================================================== NAVIGATION - centered (v3) ===================================================== */ /* =========================================== NAV CENTERED - Logo centered, links below =========================================== */ .nav--centered { position: sticky; top: 0; z-index: 1000; background: var(--color-bg); border-bottom: 1px solid var(--color-border); } .nav--centered .nav__inner { display: flex; flex-direction: column; padding: 1rem 0; } /* Top Row */ .nav--centered .nav__top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1rem; } /* Logo - centered */ .nav--centered .nav__logo { position: absolute; left: 50%; transform: translateX(-50%); text-decoration: none; } .nav--centered .nav__logo-img { height: 50px; width: auto; } /* Phone */ .nav--centered .nav__phone { display: none; align-items: center; gap: 0.5rem; color: var(--color-text-secondary); font-size: 0.875rem; font-weight: 500; text-decoration: none; transition: var(--transition); } .nav--centered .nav__phone:hover { color: var(--color-primary); } .nav--centered .nav__phone-icon { flex-shrink: 0; } /* CTA */ .nav--centered .nav__cta { display: none; margin-left: auto; } /* Desktop Menu */ .nav--centered .nav__menu { display: none; justify-content: center; gap: 2rem; padding-top: 1rem; border-top: 1px solid var(--color-border); } .nav--centered .nav__link { color: var(--color-text-secondary); font-weight: 500; text-decoration: none; padding: 0.5rem 0; transition: var(--transition); } .nav--centered .nav__link:hover { color: var(--color-primary); } /* Mobile Toggle */ .nav--centered .nav__toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; padding: 4px; background: none; border: none; cursor: pointer; margin-left: auto; } .nav--centered .nav__toggle span { display: block; width: 24px; height: 2px; background: var(--color-text); transition: var(--transition); } .nav--centered .nav__toggle.is-active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .nav--centered .nav__toggle.is-active span:nth-child(2) { opacity: 0; } .nav--centered .nav__toggle.is-active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* Mobile Menu */ .nav--centered .nav__mobile-menu { display: none; padding: 1rem 0 1.5rem; border-top: 1px solid var(--color-border); } .nav--centered .nav__mobile-menu.is-open { display: block; } .nav--centered .nav__mobile-links { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; } .nav--centered .nav__mobile-link { display: block; padding: 0.75rem 1rem; color: var(--color-text); font-weight: 500; text-decoration: none; border-radius: var(--radius-md); text-align: center; transition: var(--transition); } .nav--centered .nav__mobile-link:hover { background: var(--color-bg-alt); color: var(--color-primary); } .nav--centered .nav__mobile-actions { display: flex; flex-direction: column; gap: 1rem; padding: 0 1rem; } .nav--centered .nav__mobile-phone { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem; color: var(--color-text); font-weight: 600; text-decoration: none; background: var(--color-bg-alt); border-radius: var(--radius-md); } /* =========== RESPONSIVE =========== */ @media (min-width: 768px) { .nav--centered .nav__top { position: relative; margin-bottom: 0; } .nav--centered .nav__phone { display: flex; } .nav--centered .nav__cta { display: inline-flex; } .nav--centered .nav__menu { display: flex; } .nav--centered .nav__toggle { display: none; } .nav--centered .nav__mobile-menu { display: none !important; } } /* ===================================================== NAVIGATION - minimal (v4) ===================================================== */ /* =========================================== NAV MINIMAL - Logo + hamburger always =========================================== */ .nav--minimal { position: sticky; top: 0; z-index: 1000; background: var(--color-bg); border-bottom: 1px solid var(--color-border); } .nav--minimal .nav__inner { display: flex; align-items: center; justify-content: space-between; padding: 1rem 0; } /* Logo */ .nav--minimal .nav__logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; } .nav--minimal .nav__logo-img { height: 40px; width: auto; } .nav--minimal .nav__logo-text { font-size: 1.25rem; font-weight: 700; color: var(--color-text); } /* Toggle - always visible */ .nav--minimal .nav__toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 40px; height: 40px; padding: 8px; background: var(--color-bg-alt); border: none; border-radius: var(--radius-md); cursor: pointer; transition: var(--transition); } .nav--minimal .nav__toggle:hover { background: var(--color-border); } .nav--minimal .nav__toggle span { display: block; width: 24px; height: 2px; background: var(--color-text); transition: var(--transition); } /* Drawer */ .nav--minimal .nav__drawer { position: fixed; top: 0; right: -300px; width: 300px; height: 100vh; background: var(--color-bg); box-shadow: var(--shadow-xl); z-index: 1001; display: flex; flex-direction: column; transition: right 0.3s ease; } .nav--minimal .nav__drawer.is-open { right: 0; } .nav--minimal .nav__drawer-header { display: flex; align-items: center; justify-content: space-between; padding: 1rem 1.5rem; border-bottom: 1px solid var(--color-border); } .nav--minimal .nav__drawer-header .nav__logo-img { height: 36px; } .nav--minimal .nav__drawer-close { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; background: none; border: none; border-radius: var(--radius-md); color: var(--color-text-secondary); cursor: pointer; transition: var(--transition); } .nav--minimal .nav__drawer-close:hover { background: var(--color-bg-alt); color: var(--color-text); } .nav--minimal .nav__drawer-links { flex: 1; display: flex; flex-direction: column; padding: 1rem 0; overflow-y: auto; } .nav--minimal .nav__drawer-link { display: block; padding: 1rem 1.5rem; color: var(--color-text); font-size: 1.125rem; font-weight: 500; text-decoration: none; transition: var(--transition); } .nav--minimal .nav__drawer-link:hover { background: var(--color-bg-alt); color: var(--color-primary); } .nav--minimal .nav__drawer-footer { display: flex; flex-direction: column; gap: 1rem; padding: 1.5rem; border-top: 1px solid var(--color-border); } .nav--minimal .nav__drawer-phone { display: flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 0.875rem; color: var(--color-text); font-weight: 600; text-decoration: none; background: var(--color-bg-alt); border-radius: var(--radius-md); transition: var(--transition); } .nav--minimal .nav__drawer-phone:hover { background: var(--color-border); } /* Overlay */ .nav--minimal .nav__overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background: rgba(0, 0, 0, 0.5); opacity: 0; visibility: hidden; z-index: 1000; transition: opacity 0.3s ease, visibility 0.3s ease; } .nav--minimal .nav__overlay.is-open { opacity: 1; visibility: visible; } /* ===================================================== NAVIGATION - transparent (v5) ===================================================== */ /* =========================================== NAV TRANSPARENT - Overlays hero, solid on scroll =========================================== */ .nav--transparent { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: transparent; transition: background 0.3s ease, box-shadow 0.3s ease; } /* Scrolled state */ .nav--transparent.is-scrolled { background: var(--color-bg); box-shadow: var(--shadow-md); } .nav--transparent .nav__inner { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 0; transition: padding 0.3s ease; } .nav--transparent.is-scrolled .nav__inner { padding: 0.75rem 0; } /* Logo */ .nav--transparent .nav__logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; } .nav--transparent .nav__logo-img { height: 44px; width: auto; transition: height 0.3s ease; } .nav--transparent.is-scrolled .nav__logo-img { height: 36px; } .nav--transparent .nav__logo-text { font-size: 1.25rem; font-weight: 700; color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: var(--transition); } .nav--transparent.is-scrolled .nav__logo-text { color: var(--color-text); text-shadow: none; } /* Desktop Menu */ .nav--transparent .nav__menu { display: none; align-items: center; gap: 2rem; } .nav--transparent .nav__link { color: white; font-weight: 500; text-decoration: none; text-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: var(--transition); } .nav--transparent.is-scrolled .nav__link { color: var(--color-text-secondary); text-shadow: none; } .nav--transparent .nav__link:hover { color: var(--color-primary-light); } .nav--transparent.is-scrolled .nav__link:hover { color: var(--color-primary); } /* Actions */ .nav--transparent .nav__actions { display: flex; align-items: center; gap: 1rem; } .nav--transparent .nav__phone { display: none; align-items: center; gap: 0.5rem; color: white; font-weight: 500; text-decoration: none; text-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: var(--transition); } .nav--transparent.is-scrolled .nav__phone { color: var(--color-text); text-shadow: none; } .nav--transparent .nav__phone:hover { color: var(--color-primary-light); } .nav--transparent .nav__phone-icon { flex-shrink: 0; } .nav--transparent .nav__actions .btn { display: none; } /* Mobile Toggle */ .nav--transparent .nav__toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; padding: 4px; background: none; border: none; cursor: pointer; } .nav--transparent .nav__toggle span { display: block; width: 24px; height: 2px; background: white; transition: var(--transition); } .nav--transparent.is-scrolled .nav__toggle span { background: var(--color-text); } .nav--transparent .nav__toggle.is-active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .nav--transparent .nav__toggle.is-active span:nth-child(2) { opacity: 0; } .nav--transparent .nav__toggle.is-active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* Mobile Menu */ .nav--transparent .nav__mobile-menu { display: none; padding: 1rem 0 1.5rem; background: var(--color-bg); border-top: 1px solid var(--color-border); } .nav--transparent .nav__mobile-menu.is-open { display: block; } .nav--transparent .nav__mobile-links { display: flex; flex-direction: column; gap: 0.5rem; margin-bottom: 1.5rem; } .nav--transparent .nav__mobile-link { display: block; padding: 0.75rem 1rem; color: var(--color-text); font-weight: 500; text-decoration: none; border-radius: var(--radius-md); transition: var(--transition); } .nav--transparent .nav__mobile-link:hover { background: var(--color-bg-alt); color: var(--color-primary); } .nav--transparent .nav__mobile-actions { display: flex; flex-direction: column; gap: 1rem; padding: 0 1rem; } .nav--transparent .nav__mobile-phone { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem; color: var(--color-text); font-weight: 600; text-decoration: none; background: var(--color-bg-alt); border-radius: var(--radius-md); } /* =========== RESPONSIVE =========== */ @media (min-width: 768px) { .nav--transparent .nav__menu { display: flex; } .nav--transparent .nav__phone { display: flex; } .nav--transparent .nav__toggle { display: none; } .nav--transparent .nav__mobile-menu { display: none !important; } } @media (min-width: 1024px) { .nav--transparent .nav__actions .btn { display: inline-flex; } } /* ===================================================== NAVIGATION - full-dropdowns (v6) ===================================================== */ /* =========================================== NAV FULL DROPDOWNS - Matches VeterClean =========================================== */ /* Skip Link */ .skip-link { position: absolute; top: -100%; left: 50%; transform: translateX(-50%); padding: 1rem 2rem; background: var(--color-primary); color: var(--color-white); font-weight: 600; text-decoration: none; border-radius: 0 0 var(--radius-md) var(--radius-md); z-index: 9999; transition: top 0.2s ease; } .skip-link:focus { top: 0; outline: 3px solid var(--color-primary-dark); outline-offset: 2px; } /* Main Nav Container */ .main-nav { position: fixed; top: 0; left: 0; right: 0; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); z-index: 1000; border-bottom: 1px solid rgba(37, 83, 142, 0.1); transition: all 0.3s ease; height: 80px; } .main-nav.scrolled { background: rgba(255, 255, 255, 0.98); box-shadow: 0 4px 20px rgba(37, 83, 142, 0.15); } /* Add body margin for fixed nav */ body { margin-top: 80px; } .nav-container { max-width: 1400px; margin: 0 auto; padding: 0 2rem; display: flex; align-items: center; justify-content: center; height: 100%; gap: 2rem; } /* Logo */ .nav-logo { display: flex; align-items: center; text-decoration: none; transition: transform 0.3s ease; flex-shrink: 0; } .nav-logo:hover { transform: scale(1.02); } .nav-logo img { height: 60px; width: auto; object-fit: contain; } /* Menu - CENTERED */ .nav-menu { display: flex; align-items: center; justify-content: center; gap: 1.75rem; list-style: none; margin: 0; padding: 0; flex: 1; } .nav-menu > a, .nav-menu .dropdown-trigger { color: #4b5563; text-decoration: none; font-weight: 500; font-size: 0.95rem; transition: color 0.3s ease; position: relative; padding: 0.5rem 0; } .nav-menu > a::before, .nav-menu .dropdown-trigger::before { content: ''; position: absolute; bottom: -4px; left: 50%; width: 0; height: 2px; background: var(--color-primary); transition: all 0.3s ease; transform: translateX(-50%); } .nav-menu > a:hover, .nav-menu .dropdown-trigger:hover { color: var(--color-primary); } .nav-menu > a:hover::before, .nav-menu .dropdown-trigger:hover::before, .nav-menu > a.active::before { width: 100%; } .nav-menu > a.active { color: var(--color-primary); } /* Phone CTA */ .nav-cta { background: var(--color-primary) !important; color: var(--color-white) !important; padding: 0.875rem 1.75rem !important; border-radius: 6px !important; text-decoration: none !important; font-weight: 600 !important; font-size: 0.9rem !important; transition: all 0.2s ease !important; white-space: nowrap !important; border: 2px solid var(--color-primary) !important; letter-spacing: 0.025em !important; flex-shrink: 0; } .nav-cta:hover { background: var(--color-white) !important; color: var(--color-primary) !important; transform: translateY(-1px); box-shadow: 0 2px 8px rgba(37, 83, 142, 0.2); } /* Dropdown */ .nav-dropdown { position: relative; display: inline-block; } .dropdown-trigger { cursor: pointer; display: flex; align-items: center; gap: 0.25rem; } .dropdown-trigger::after { content: '▼'; font-size: 0.6rem; margin-left: 0.25rem; transition: transform 0.3s ease; color: #6b7280; } .nav-dropdown:hover .dropdown-trigger::after { transform: rotate(180deg); color: var(--color-primary); } .dropdown-menu { position: absolute; top: calc(100% + 0.5rem); left: 50%; transform: translateX(-50%) translateY(-10px); background: var(--color-white); min-width: 200px; border-radius: 8px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1); padding: 0.5rem 0; display: none; z-index: 1000; opacity: 0; visibility: hidden; transition: all 0.3s ease; } .nav-dropdown:hover .dropdown-menu { display: block; opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .dropdown-menu a { display: block; padding: 0.75rem 1rem; color: #4b5563; text-decoration: none; font-size: 0.95rem; font-weight: 500; transition: all 0.3s ease; } .dropdown-menu a:hover { background-color: #f8fafc; color: var(--color-primary); } .dropdown-menu a.active { background-color: #eff6ff; color: var(--color-primary); font-weight: 600; } /* Mobile Toggle */ .nav-toggle { display: none; flex-direction: column; background: transparent; border: none; cursor: pointer; padding: 10px; } .nav-toggle span { width: 25px; height: 3px; background: #374151; margin: 3px 0; transition: 0.3s; } /* =========== RESPONSIVE =========== */ @media (max-width: 1024px) { .nav-menu { gap: 1.25rem; } .nav-menu > a, .nav-menu .dropdown-trigger { font-size: 0.85rem; } .nav-cta { padding: 0.75rem 1.25rem !important; font-size: 0.85rem !important; } } @media (max-width: 768px) { .nav-container { justify-content: space-between; } .nav-menu { position: fixed; top: 80px; left: 0; right: 0; background: var(--color-white); flex-direction: column; padding: 2rem; box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); transform: translateY(-100%); opacity: 0; transition: all 0.3s ease; max-height: calc(100vh - 80px); overflow-y: auto; } .nav-menu.active { transform: translateY(0); opacity: 1; } .nav-toggle { display: flex; } .nav-dropdown { position: static; width: 100%; } .dropdown-menu { position: static; box-shadow: none; background: #f8fafc; margin-top: 8px; border-radius: 4px; display: none; opacity: 1; visibility: visible; transform: none; min-width: 100%; } .nav-dropdown.active .dropdown-menu { display: block; } .nav-cta { width: 100%; text-align: center; margin-top: 1rem; } } /* ===================================================== NAVIGATION - transparent-dropdowns (v7) ===================================================== */ /* =========================================== NAV TRANSPARENT DROPDOWNS Overlays hero, solid on scroll, with dropdowns =========================================== */ .nav--transparent-drop { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: transparent; transition: background 0.3s ease, box-shadow 0.3s ease; } .nav--transparent-drop.is-scrolled { background: var(--color-bg); box-shadow: var(--shadow-md); } .nav--transparent-drop .nav__inner { display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 0; transition: padding 0.3s ease; } .nav--transparent-drop.is-scrolled .nav__inner { padding: 0.75rem 0; } /* Logo */ .nav--transparent-drop .nav__logo { display: flex; align-items: center; gap: 0.75rem; text-decoration: none; } .nav--transparent-drop .nav__logo-img { height: 44px; width: auto; transition: height 0.3s ease; } .nav--transparent-drop.is-scrolled .nav__logo-img { height: 36px; } .nav--transparent-drop .nav__logo-text { font-size: 1.25rem; font-weight: 700; color: white; text-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: var(--transition); } .nav--transparent-drop.is-scrolled .nav__logo-text { color: var(--color-text); text-shadow: none; } /* Desktop Menu */ .nav--transparent-drop .nav__menu { display: none; align-items: center; gap: 1.75rem; } .nav--transparent-drop .nav__link { color: white; font-weight: 500; text-decoration: none; text-shadow: 0 1px 3px rgba(0,0,0,0.3); transition: var(--transition); display: flex; align-items: center; gap: 0.25rem; } .nav--transparent-drop.is-scrolled .nav__link { color: var(--color-text-secondary); text-shadow: none; } .nav--transparent-drop .nav__link:hover { color: var(--color-primary-light); } .nav--transparent-drop.is-scrolled .nav__link:hover { color: var(--color-primary); } /* Dropdown Arrow */ .nav--transparent-drop .nav__dropdown-arrow { transition: transform 0.2s ease; } .nav--transparent-drop .nav__dropdown:hover .nav__dropdown-arrow { transform: rotate(180deg); } /* Dropdown Container */ .nav--transparent-drop .nav__dropdown { position: relative; } /* Dropdown Menu */ .nav--transparent-drop .nav__dropdown-menu { position: absolute; top: 100%; left: 50%; transform: translateX(-50%) translateY(8px); background: var(--color-bg); border-radius: var(--radius-lg); box-shadow: 0 10px 40px rgba(0,0,0,0.15); min-width: 200px; padding: 0.5rem 0; opacity: 0; visibility: hidden; transition: all 0.2s ease; z-index: 100; } .nav--transparent-drop .nav__dropdown:hover .nav__dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } /* Dropdown Items */ .nav--transparent-drop .nav__dropdown-item { display: block; padding: 0.75rem 1.25rem; color: var(--color-text-secondary); text-decoration: none; font-weight: 500; font-size: 0.95rem; transition: var(--transition); } .nav--transparent-drop .nav__dropdown-item:hover { background: var(--color-bg-alt); color: var(--color-primary); } /* Actions */ .nav--transparent-drop .nav__actions { display: flex; align-items: center; gap: 1rem; } .nav--transparent-drop .nav__actions .btn { display: none; } /* Mobile Toggle */ .nav--transparent-drop .nav__toggle { display: flex; flex-direction: column; justify-content: center; gap: 5px; width: 32px; height: 32px; padding: 4px; background: none; border: none; cursor: pointer; } .nav--transparent-drop .nav__toggle span { display: block; width: 24px; height: 2px; background: white; transition: var(--transition); } .nav--transparent-drop.is-scrolled .nav__toggle span { background: var(--color-text); } .nav--transparent-drop .nav__toggle.is-active span:nth-child(1) { transform: rotate(45deg) translate(5px, 5px); } .nav--transparent-drop .nav__toggle.is-active span:nth-child(2) { opacity: 0; } .nav--transparent-drop .nav__toggle.is-active span:nth-child(3) { transform: rotate(-45deg) translate(5px, -5px); } /* Mobile Menu */ .nav--transparent-drop .nav__mobile-menu { display: none; padding: 1rem 0 1.5rem; background: var(--color-bg); border-top: 1px solid var(--color-border); } .nav--transparent-drop .nav__mobile-menu.is-open { display: block; } .nav--transparent-drop .nav__mobile-links { display: flex; flex-direction: column; gap: 0.25rem; margin-bottom: 1.5rem; } .nav--transparent-drop .nav__mobile-link { display: block; padding: 0.75rem 1rem; color: var(--color-text); font-weight: 500; text-decoration: none; border-radius: var(--radius-md); transition: var(--transition); } .nav--transparent-drop .nav__mobile-link:hover { background: var(--color-bg-alt); color: var(--color-primary); } /* Mobile Dropdown */ .nav--transparent-drop .nav__mobile-dropdown { display: flex; flex-direction: column; } .nav--transparent-drop .nav__mobile-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.75rem 1rem; background: none; border: none; color: var(--color-text); font-weight: 500; font-size: 1rem; text-align: left; cursor: pointer; border-radius: var(--radius-md); transition: var(--transition); } .nav--transparent-drop .nav__mobile-trigger:hover { background: var(--color-bg-alt); } .nav--transparent-drop .nav__mobile-trigger svg { transition: transform 0.2s ease; } .nav--transparent-drop .nav__mobile-dropdown.is-open .nav__mobile-trigger svg { transform: rotate(180deg); } .nav--transparent-drop .nav__mobile-submenu { display: none; padding-left: 1rem; } .nav--transparent-drop .nav__mobile-dropdown.is-open .nav__mobile-submenu { display: block; } .nav--transparent-drop .nav__mobile-submenu a { display: block; padding: 0.625rem 1rem; color: var(--color-text-secondary); text-decoration: none; font-size: 0.95rem; border-radius: var(--radius-md); transition: var(--transition); } .nav--transparent-drop .nav__mobile-submenu a:hover { background: var(--color-bg-alt); color: var(--color-primary); } .nav--transparent-drop .nav__mobile-actions { display: flex; flex-direction: column; gap: 1rem; padding: 0 1rem; } /* =========== RESPONSIVE =========== */ @media (min-width: 768px) { .nav--transparent-drop .nav__menu { display: flex; } .nav--transparent-drop .nav__toggle { display: none; } .nav--transparent-drop .nav__mobile-menu { display: none !important; } } @media (min-width: 1024px) { .nav--transparent-drop .nav__actions .btn { display: inline-flex; } } /* ===================================================== SERVICES - tabs (v1) ===================================================== */ /* Services Tabs Simple V1 */ .services--tabs-simple { padding: var(--section-padding-y, 5rem) 0; background: var(--color-bg); } .services--tabs-simple[data-bg="alt"] { background: var(--color-bg-alt); } .services--tabs-simple[data-bg="dark"] { background: var(--color-bg-dark); } .services--tabs-simple[data-bg="dark"] .services__title, .services--tabs-simple[data-bg="dark"] .services__subtitle { color: var(--color-white); } .services--tabs-simple[data-bg="dark"] .services__panel-card { background: rgba(255,255,255,0.05); } .services--tabs-simple[data-bg="dark"] .services__panel-content h3, .services--tabs-simple[data-bg="dark"] .services__panel-content p, .services--tabs-simple[data-bg="dark"] .services__panel-content li { color: var(--color-white); } .services--tabs-simple .services__header { text-align: center; margin-bottom: 2rem; max-width: 700px; margin-left: auto; margin-right: auto; } .services--tabs-simple .services__eyebrow { display: inline-block; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary); margin-bottom: 0.75rem; } .services--tabs-simple .services__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--color-text); margin: 0 0 1rem; } .services--tabs-simple .services__subtitle { font-size: 1.125rem; color: var(--color-text-secondary); margin: 0; } /* Tabs Nav */ .services__tabs-nav { display: flex; justify-content: center; gap: 0.5rem; margin-bottom: 2rem; } .services__tab { padding: 1rem 2rem; background: var(--color-surface); border: 2px solid var(--color-border); border-radius: var(--radius-md); font-size: 1rem; font-weight: 600; color: var(--color-text); cursor: pointer; transition: all var(--transition); } .services__tab:hover { border-color: var(--color-primary); color: var(--color-primary); } .services__tab.is-active { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); } /* Panels */ .services__panel { display: none; } .services__panel.is-active { display: block; animation: fadeIn 0.3s ease; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Wide Card */ .services__panel-card { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; background: var(--color-surface); border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); } .services__panel-image { aspect-ratio: 4/3; overflow: hidden; } .services__panel-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); } .services__panel-card:hover .services__panel-image img { transform: scale(1.03); } .services__panel-content { padding: 2rem; display: flex; flex-direction: column; justify-content: center; } .services__panel-content h3 { font-size: 1.5rem; font-weight: 700; color: var(--color-text); margin: 0 0 1rem; } .services__panel-content > p { font-size: 1rem; color: var(--color-text-secondary); line-height: 1.6; margin: 0 0 1.25rem; } .services__panel-content ul { list-style: none; padding: 0; margin: 0 0 1.5rem; } .services__panel-content li { position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem; color: var(--color-text); } .services__panel-content li:before { content: '✓'; position: absolute; left: 0; color: var(--color-primary); font-weight: 700; } @media (max-width: 768px) { .services__tabs-nav { flex-direction: column; } .services__panel-card { grid-template-columns: 1fr; } .services__panel-content { padding: 1.5rem; } } /* ===================================================== SERVICES - accordion (v2) ===================================================== */ /* Services Accordion Simple V2 */ .services--accordion-simple { padding: var(--section-padding-y, 5rem) 0; background: var(--color-bg); } .services--accordion-simple[data-bg="alt"] { background: var(--color-bg-alt); } .services--accordion-simple[data-bg="dark"] { background: var(--color-bg-dark); } .services--accordion-simple[data-bg="dark"] .services__title, .services--accordion-simple[data-bg="dark"] .services__subtitle { color: var(--color-white); } .services--accordion-simple[data-bg="dark"] .services__accordion-item { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); } .services--accordion-simple[data-bg="dark"] .services__accordion-title h3, .services--accordion-simple[data-bg="dark"] .services__accordion-title p { color: var(--color-white); } .services--accordion-simple .services__header { text-align: center; margin-bottom: 3rem; max-width: 700px; margin-left: auto; margin-right: auto; } .services--accordion-simple .services__eyebrow { display: inline-block; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary); margin-bottom: 0.75rem; } .services--accordion-simple .services__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--color-text); margin: 0 0 1rem; } .services--accordion-simple .services__subtitle { font-size: 1.125rem; color: var(--color-text-secondary); margin: 0; } /* Accordions Container */ .services__accordions { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; } .services__accordion-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; } /* Header */ .services__accordion-header { display: flex; align-items: center; gap: 1.25rem; width: 100%; padding: 1.25rem 1.5rem; background: none; border: none; cursor: pointer; text-align: left; transition: background var(--transition); } .services__accordion-header:hover { background: var(--color-bg-alt); } .services__accordion-icon { flex-shrink: 0; width: 60px; height: 60px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-alt); } .services__accordion-icon img { width: 100%; height: 100%; object-fit: cover; } .services__accordion-title { flex: 1; min-width: 0; } .services__accordion-title h3 { font-size: 1.25rem; font-weight: 700; color: var(--color-text); margin: 0 0 0.25rem; } .services__accordion-title p { font-size: 0.9375rem; color: var(--color-text-secondary); margin: 0; } .services__accordion-arrow { flex-shrink: 0; color: var(--color-primary); transition: transform 0.3s ease; } .services__accordion-item.is-open .services__accordion-arrow { transform: rotate(180deg); } /* Panel */ .services__accordion-panel { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .services__accordion-item.is-open .services__accordion-panel { max-height: 500px; } .services__accordion-content { display: grid; grid-template-columns: 300px 1fr; gap: 1.5rem; padding: 0 1.5rem 1.5rem; border-top: 1px solid var(--color-border); padding-top: 1.5rem; } .services__accordion-image { border-radius: var(--radius-lg); overflow: hidden; } .services__accordion-image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; } .services__accordion-details p { margin: 0 0 1rem; color: var(--color-text-secondary); line-height: 1.6; } .services__accordion-details ul { list-style: none; padding: 0; margin: 0 0 1.5rem; } .services__accordion-details li { position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem; color: var(--color-text); } .services__accordion-details li:before { content: '✓'; position: absolute; left: 0; color: var(--color-primary); font-weight: 700; } @media (max-width: 768px) { .services__accordion-content { grid-template-columns: 1fr; } .services__accordion-header { flex-wrap: wrap; } .services__accordion-icon { width: 50px; height: 50px; } } /* ===================================================== SERVICES - grid-accordion (v3) ===================================================== */ /* Services Grid Accordion V3 */ .services--grid-accordion { padding: var(--section-padding-y, 5rem) 0; background: var(--color-bg); } .services--grid-accordion[data-bg="alt"] { background: var(--color-bg-alt); } .services--grid-accordion[data-bg="dark"] { background: var(--color-bg-dark); } .services--grid-accordion[data-bg="dark"] .services__title, .services--grid-accordion[data-bg="dark"] .services__subtitle, .services--grid-accordion[data-bg="dark"] .services__grid-content h3, .services--grid-accordion[data-bg="dark"] .services__grid-teaser { color: var(--color-white); } .services--grid-accordion[data-bg="dark"] .services__grid-card { background: rgba(255,255,255,0.05); } .services--grid-accordion .services__header { text-align: center; margin-bottom: 3rem; max-width: 700px; margin-left: auto; margin-right: auto; } .services--grid-accordion .services__eyebrow { display: inline-block; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary); margin-bottom: 0.75rem; } .services--grid-accordion .services__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--color-text); margin: 0 0 1rem; } .services--grid-accordion .services__subtitle { font-size: 1.125rem; color: var(--color-text-secondary); margin: 0; } /* Grid */ .services__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; align-items: start; } .services__grid-card { background: var(--color-surface); border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-md); } .services__grid-image { aspect-ratio: 16/10; overflow: hidden; } .services__grid-image img { width: 100%; height: 100%; object-fit: cover; transition: transform var(--transition); } .services__grid-card:hover .services__grid-image img { transform: scale(1.05); } .services__grid-content { padding: 1.25rem; } .services__grid-content h3 { font-size: 1.25rem; font-weight: 700; color: var(--color-text); margin: 0 0 0.5rem; } .services__grid-teaser { font-size: 0.9375rem; color: var(--color-text-secondary); line-height: 1.5; margin: 0 0 1rem; } /* Accordion inside card */ .services__grid-accordion { border-top: 1px solid var(--color-border); padding-top: 1rem; } .services__grid-trigger { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 0.75rem; background: var(--color-bg-alt); border: none; border-radius: var(--radius-md); font-size: 0.9375rem; font-weight: 600; color: var(--color-primary); cursor: pointer; transition: background var(--transition); } .services__grid-trigger:hover { background: var(--color-primary); color: var(--color-white); } .services__grid-trigger svg { transition: transform 0.3s ease; } .services__grid-item.is-open .services__grid-trigger svg { transform: rotate(45deg); } .services__grid-panel { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .services__grid-item.is-open .services__grid-panel { max-height: 350px; } .services__grid-panel > p { margin: 1rem 0 0.75rem; color: var(--color-text-secondary); font-size: 0.9375rem; line-height: 1.6; } .services__grid-panel ul { list-style: none; padding: 0; margin: 0 0 1rem; } .services__grid-panel li { position: relative; padding-left: 1.25rem; margin-bottom: 0.5rem; font-size: 0.875rem; color: var(--color-text); } .services__grid-panel li:before { content: ''; position: absolute; left: 0; top: 0.5em; width: 6px; height: 6px; background: var(--color-primary); border-radius: 50%; } .btn--sm { padding: 0.5rem 1rem; font-size: 0.875rem; } @media (max-width: 992px) { .services__grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 640px) { .services__grid { grid-template-columns: 1fr; } } /* ===================================================== SERVICES - list-expand (v4) ===================================================== */ /* Services List Expand V4 - Wide */ .services--list-expand { padding: var(--section-padding-y, 5rem) 0; background: var(--color-bg); } .services--list-expand[data-bg="alt"] { background: var(--color-bg-alt); } .services--list-expand[data-bg="dark"] { background: var(--color-bg-dark); } .services--list-expand[data-bg="dark"] .services__title, .services--list-expand[data-bg="dark"] .services__subtitle { color: var(--color-white); } .services--list-expand[data-bg="dark"] .services__list-item { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); } .services--list-expand[data-bg="dark"] .services__list-info h3, .services--list-expand[data-bg="dark"] .services__list-info p { color: var(--color-white); } .services--list-expand .services__header { text-align: center; margin-bottom: 3rem; max-width: 700px; margin-left: auto; margin-right: auto; } .services--list-expand .services__eyebrow { display: inline-block; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary); margin-bottom: 0.75rem; } .services--list-expand .services__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--color-text); margin: 0 0 1rem; } .services--list-expand .services__subtitle { font-size: 1.125rem; color: var(--color-text-secondary); margin: 0; } /* Wide List */ .services__list { max-width: 1000px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; } .services__list-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; } .services__list-header { display: flex; align-items: center; gap: 1.5rem; width: 100%; padding: 1.25rem 1.5rem; background: none; border: none; cursor: pointer; text-align: left; transition: background var(--transition); } .services__list-header:hover { background: var(--color-bg-alt); } .services__list-thumb { flex-shrink: 0; width: 80px; height: 80px; border-radius: var(--radius-md); overflow: hidden; } .services__list-thumb img { width: 100%; height: 100%; object-fit: cover; } .services__list-info { flex: 1; min-width: 0; } .services__list-info h3 { font-size: 1.25rem; font-weight: 700; color: var(--color-text); margin: 0 0 0.25rem; } .services__list-info p { font-size: 0.9375rem; color: var(--color-text-secondary); margin: 0; line-height: 1.5; } .services__list-toggle { display: flex; align-items: center; gap: 0.5rem; color: var(--color-primary); font-weight: 600; font-size: 0.9375rem; flex-shrink: 0; } .services__list-toggle svg { transition: transform 0.3s ease; } .services__list-item.is-open .services__list-toggle svg { transform: rotate(180deg); } /* Expand Panel */ .services__list-panel { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .services__list-item.is-open .services__list-panel { max-height: 500px; } .services__list-panel-inner { display: grid; grid-template-columns: 350px 1fr; gap: 2rem; padding: 0 1.5rem 1.5rem; border-top: 1px solid var(--color-border); padding-top: 1.5rem; } .services__list-panel-image { border-radius: var(--radius-lg); overflow: hidden; } .services__list-panel-image img { width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3; } .services__list-panel-content p { margin: 0 0 1rem; color: var(--color-text-secondary); line-height: 1.6; } .services__list-panel-content ul { list-style: none; padding: 0; margin: 0 0 1.5rem; } .services__list-panel-content li { position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem; color: var(--color-text); font-size: 0.9375rem; } .services__list-panel-content li:before { content: ''; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; background: var(--color-primary); border-radius: 50%; } @media (max-width: 768px) { .services__list-header { flex-wrap: wrap; gap: 1rem; } .services__list-toggle { width: 100%; justify-content: center; padding: 0.75rem; background: var(--color-bg-alt); border-radius: var(--radius-md); } .services__list-panel-inner { grid-template-columns: 1fr; } } /* ===================================================== SERVICES - flip-cards (v5) ===================================================== */ /* Services Flip Cards V5 */ .services--flip { padding: var(--section-padding-y, 5rem) 0; background: var(--color-bg); } .services--flip[data-bg="alt"] { background: var(--color-bg-alt); } .services--flip[data-bg="dark"] { background: var(--color-bg-dark); } .services--flip[data-bg="dark"] .services__title, .services--flip[data-bg="dark"] .services__subtitle { color: var(--color-white); } .services--flip .services__header { text-align: center; margin-bottom: 3rem; max-width: 700px; margin-left: auto; margin-right: auto; } .services--flip .services__eyebrow { display: inline-block; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary); margin-bottom: 0.75rem; } .services--flip .services__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--color-text); margin: 0 0 1rem; } .services--flip .services__subtitle { font-size: 1.125rem; color: var(--color-text-secondary); margin: 0; } /* Flip Grid */ .services__flip-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } /* Flip Card Container */ .services__flip-card { perspective: 1000px; height: 420px; cursor: pointer; } .services__flip-inner { position: relative; width: 100%; height: 100%; transition: transform 0.6s cubic-bezier(0.4, 0, 0.2, 1); transform-style: preserve-3d; } /* HOVER ANIMATION - Card wants to flip! */ .services__flip-card:hover .services__flip-inner { transform: rotateY(-15deg) rotateX(5deg) translateY(-10px); box-shadow: 20px 20px 40px rgba(0,0,0,0.2); } /* When flipped */ .services__flip-card.is-flipped .services__flip-inner { transform: rotateY(180deg); } .services__flip-card.is-flipped:hover .services__flip-inner { transform: rotateY(180deg) translateY(-5px); } /* Front & Back */ .services__flip-front, .services__flip-back { position: absolute; width: 100%; height: 100%; backface-visibility: hidden; border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); transition: box-shadow 0.3s ease; } /* Front */ .services__flip-front { background: var(--color-surface); } .services__flip-image { height: 55%; overflow: hidden; } .services__flip-image img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .services__flip-card:hover .services__flip-image img { transform: scale(1.08); } .services__flip-preview { padding: 1.25rem; height: 45%; display: flex; flex-direction: column; } .services__flip-preview h3 { font-size: 1.25rem; font-weight: 700; color: var(--color-text); margin: 0 0 0.5rem; } .services__flip-teaser { font-size: 0.9375rem; color: var(--color-text-secondary); line-height: 1.5; margin: 0; flex: 1; } .services__flip-hint { display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.875rem; font-weight: 600; color: var(--color-primary); margin-top: 0.75rem; transition: transform 0.3s ease; } .services__flip-hint:after { content: '↻'; font-size: 1rem; transition: transform 0.3s ease; } .services__flip-card:hover .services__flip-hint { transform: translateX(4px); } .services__flip-card:hover .services__flip-hint:after { transform: rotate(45deg); } /* Back */ .services__flip-back { background: var(--gradient-brand, linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%)); transform: rotateY(180deg); color: var(--color-white); } .services__flip-back-content { padding: 1.5rem; height: 100%; display: flex; flex-direction: column; } .services__flip-back-content h3 { font-size: 1.375rem; font-weight: 700; color: var(--color-white); margin: 0 0 1rem; } .services__flip-back-content > p { font-size: 0.9375rem; line-height: 1.6; margin: 0 0 1rem; opacity: 0.9; } .services__flip-back-content ul { list-style: none; padding: 0; margin: 0 0 1.25rem; flex: 1; } .services__flip-back-content li { position: relative; padding-left: 1.25rem; margin-bottom: 0.5rem; font-size: 0.875rem; opacity: 0.9; } .services__flip-back-content li:before { content: '✓'; position: absolute; left: 0; color: var(--color-white); } .services__flip-back .btn--primary { background: var(--color-white); color: var(--color-primary); align-self: flex-start; } .services__flip-back .btn--primary:hover { background: rgba(255,255,255,0.9); } @media (max-width: 992px) { .services__flip-grid { grid-template-columns: repeat(2, 1fr); } .services__flip-card { height: 380px; } } @media (max-width: 640px) { .services__flip-grid { grid-template-columns: 1fr; max-width: 400px; margin: 0 auto; } /* Reduce hover effect on mobile */ .services__flip-card:hover .services__flip-inner { transform: rotateY(-8deg) translateY(-5px); } } /* ===================================================== SERVICES - zigzag-reveal (v6) ===================================================== */ /* Services Zigzag Reveal V6 */ .services--zigzag { padding: var(--section-padding-y, 5rem) 0; background: var(--color-bg); } .services--zigzag[data-bg="alt"] { background: var(--color-bg-alt); } .services--zigzag[data-bg="dark"] { background: var(--color-bg-dark); } .services--zigzag[data-bg="dark"] .services__title, .services--zigzag[data-bg="dark"] .services__subtitle, .services--zigzag[data-bg="dark"] .services__zigzag-title, .services--zigzag[data-bg="dark"] .services__zigzag-teaser { color: var(--color-white); } .services--zigzag .services__header { text-align: center; margin-bottom: 4rem; max-width: 700px; margin-left: auto; margin-right: auto; } .services--zigzag .services__eyebrow { display: inline-block; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary); margin-bottom: 0.75rem; } .services--zigzag .services__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--color-text); margin: 0 0 1rem; } .services--zigzag .services__subtitle { font-size: 1.125rem; color: var(--color-text-secondary); margin: 0; } /* Zigzag Layout */ .services__zigzag-list { display: flex; flex-direction: column; gap: 4rem; } .services__zigzag-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3rem; align-items: start; } .services__zigzag-row--reverse { direction: rtl; } .services__zigzag-row--reverse > * { direction: ltr; } /* Image */ .services__zigzag-image { border-radius: var(--radius-xl); overflow: hidden; box-shadow: var(--shadow-lg); } .services__zigzag-image img { width: 100%; aspect-ratio: 4/3; object-fit: cover; transition: transform var(--transition); } .services__zigzag-row:hover .services__zigzag-image img { transform: scale(1.03); } /* Content */ .services__zigzag-content { padding: 1rem 0; } .services__zigzag-title { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 700; color: var(--color-text); margin: 0 0 0.75rem; } .services__zigzag-teaser { font-size: 1.0625rem; color: var(--color-text-secondary); line-height: 1.7; margin: 0 0 1.25rem; } /* Toggle Button */ .services__zigzag-toggle { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0; background: none; border: none; font-size: 1rem; font-weight: 600; color: var(--color-primary); cursor: pointer; transition: gap var(--transition); } .services__zigzag-toggle:hover { gap: 0.75rem; } .services__zigzag-toggle-more:after, .services__zigzag-toggle-less:after { content: '↓'; display: inline-block; margin-left: 0.25rem; transition: transform 0.3s ease; } .services__zigzag-toggle-less { display: none; } .services__zigzag-toggle-less:after { content: '↑'; } .services__zigzag-row.is-expanded .services__zigzag-toggle-more { display: none; } .services__zigzag-row.is-expanded .services__zigzag-toggle-less { display: inline; } /* Expandable Details */ .services__zigzag-details { max-height: 0; overflow: hidden; transition: max-height 0.4s ease, margin 0.3s ease; } .services__zigzag-row.is-expanded .services__zigzag-details { max-height: 400px; margin-top: 1.25rem; } .services__zigzag-details > p { margin: 0 0 1rem; color: var(--color-text-secondary); line-height: 1.6; padding-top: 1rem; border-top: 1px solid var(--color-border); } .services__zigzag-details ul { list-style: none; padding: 0; margin: 0 0 1.5rem; } .services__zigzag-details li { position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem; color: var(--color-text); font-size: 0.9375rem; } .services__zigzag-details li:before { content: ''; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; background: var(--color-primary); border-radius: 50%; } @media (max-width: 768px) { .services__zigzag-row, .services__zigzag-row--reverse { grid-template-columns: 1fr; direction: ltr; gap: 1.5rem; } .services__zigzag-image { order: -1; } } /* ===================================================== SERVICES - hover-cards (v7) ===================================================== */ /* Services Hover Cards V7 */ .services--hover { padding: var(--section-padding-y, 5rem) 0; background: var(--color-bg); } .services--hover[data-bg="alt"] { background: var(--color-bg-alt); } .services--hover[data-bg="dark"] { background: var(--color-bg-dark); } .services--hover[data-bg="dark"] .services__title, .services--hover[data-bg="dark"] .services__subtitle { color: var(--color-white); } .services--hover .services__header { text-align: center; margin-bottom: 3rem; max-width: 700px; margin-left: auto; margin-right: auto; } .services--hover .services__eyebrow { display: inline-block; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary); margin-bottom: 0.75rem; } .services--hover .services__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--color-text); margin: 0 0 1rem; } .services--hover .services__subtitle { font-size: 1.125rem; color: var(--color-text-secondary); margin: 0; } .services__hover-grid { display: grid; gap: 1.5rem; } .services__hover-card { position: relative; border-radius: var(--radius-lg); overflow: hidden; height: 320px; cursor: pointer; } .services__hover-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; } .services__hover-card:hover img { transform: scale(1.05); } .services__hover-list { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; max-height: 0; overflow: hidden; opacity: 0; transition: max-height 0.3s ease, opacity 0.3s ease; } .services__hover-card:hover .services__hover-list { max-height: 200px; opacity: 1; } .services__hover-list li { display: flex; align-items: flex-start; gap: 0.5rem; font-size: 0.8125rem; color: rgba(255,255,255,0.9); } .services__hover-list svg { width: 1rem; height: 1rem; flex-shrink: 0; color: var(--color-success, #22c55e); margin-top: 0.125rem; } @media (min-width: 640px) { .services__hover-grid { grid-template-columns: repeat(2, 1fr); } } @media (min-width: 992px) { .services__hover-grid { grid-template-columns: repeat(4, 1fr); gap: 2rem; } .services__hover-card { height: 380px; } } @media (max-width: 639px) { .services__hover-card { height: 280px; } /* Show list by default on touch devices */ .services__hover-list { max-height: 200px; opacity: 1; } } /* ===================================================== SERVICES - accordion-4item (v8) ===================================================== */ /* Services Accordion 4-Item */ .services--accordion-simple.services--accordion-4 { padding: var(--section-padding-y, 5rem) 0; background: var(--color-bg); } .services--accordion-4[data-bg="alt"] { background: var(--color-bg-alt); } .services--accordion-4[data-bg="dark"] { background: var(--color-bg-dark); } .services--accordion-4[data-bg="dark"] .services__title, .services--accordion-4[data-bg="dark"] .services__subtitle { color: var(--color-white); } .services--accordion-4[data-bg="dark"] .services__accordion-item { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); } .services--accordion-4[data-bg="dark"] .services__accordion-title h3, .services--accordion-4[data-bg="dark"] .services__accordion-title p { color: var(--color-white); } .services--accordion-4 .services__header { text-align: center; margin-bottom: 3rem; max-width: 700px; margin-left: auto; margin-right: auto; } .services--accordion-4 .services__eyebrow { display: inline-block; font-size: 0.875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.1em; color: var(--color-primary); margin-bottom: 0.75rem; } .services--accordion-4 .services__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--color-text); margin: 0 0 1rem; } .services--accordion-4 .services__subtitle { font-size: 1.125rem; color: var(--color-text-secondary); margin: 0; } /* Accordions Container */ .services--accordion-4 .services__accordions { max-width: 900px; margin: 0 auto; display: flex; flex-direction: column; gap: 1rem; } .services--accordion-4 .services__accordion-item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-lg); overflow: hidden; } /* Header */ .services--accordion-4 .services__accordion-header { display: flex; align-items: center; gap: 1.25rem; width: 100%; padding: 1.25rem 1.5rem; background: none; border: none; cursor: pointer; text-align: left; transition: background var(--transition); } .services--accordion-4 .services__accordion-header:hover { background: var(--color-bg-alt); } .services--accordion-4 .services__accordion-icon { flex-shrink: 0; width: 60px; height: 60px; border-radius: var(--radius-md); overflow: hidden; background: var(--color-bg-alt); } .services--accordion-4 .services__accordion-icon img { width: 100%; height: 100%; object-fit: cover; } .services--accordion-4 .services__accordion-title { flex: 1; min-width: 0; } .services--accordion-4 .services__accordion-title h3 { font-size: 1.125rem; font-weight: 600; color: var(--color-text); margin: 0 0 0.25rem; } .services--accordion-4 .services__accordion-title p { font-size: 0.875rem; color: var(--color-text-secondary); margin: 0; } .services--accordion-4 .services__accordion-arrow { flex-shrink: 0; color: var(--color-text-secondary); transition: transform var(--transition); } .services--accordion-4 .services__accordion-item.is-open .services__accordion-arrow { transform: rotate(180deg); } /* Panel */ .services--accordion-4 .services__accordion-panel { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .services--accordion-4 .services__accordion-item.is-open .services__accordion-panel { max-height: 600px; } .services--accordion-4 .services__accordion-content { display: grid; grid-template-columns: 1fr 1.5fr; gap: 2rem; padding: 0 1.5rem 1.5rem; } .services--accordion-4 .services__accordion-image { border-radius: var(--radius-md); overflow: hidden; aspect-ratio: 4/3; } .services--accordion-4 .services__accordion-image img { width: 100%; height: 100%; object-fit: cover; } .services--accordion-4 .services__accordion-details p { font-size: 1rem; color: var(--color-text-secondary); margin: 0 0 1rem; line-height: 1.6; } .services--accordion-4 .services__accordion-details ul { list-style: none; padding: 0; margin: 0 0 1.5rem; } .services--accordion-4 .services__accordion-details li { position: relative; padding-left: 1.5rem; margin-bottom: 0.5rem; font-size: 0.9375rem; color: var(--color-text); } .services--accordion-4 .services__accordion-details li::before { content: ""; position: absolute; left: 0; top: 0.5em; width: 8px; height: 8px; background: var(--color-primary); border-radius: 50%; } /* Mobile */ @media (max-width: 768px) { .services--accordion-4 .services__accordion-content { grid-template-columns: 1fr; } .services--accordion-4 .services__accordion-image { max-height: 200px; } } /* ===================================================== TESTIMONIALS - carousel (v1) ===================================================== */ /* Testimonials Carousel V1 */ .testimonials--carousel { padding: var(--section-padding-y, 5rem) 0; background: var(--color-bg-alt); } .testimonials--carousel[data-bg="white"] { background: var(--color-bg); } .testimonials--carousel[data-bg="dark"] { background: var(--color-bg-dark); } .testimonials--carousel[data-bg="dark"] .testimonials__title, .testimonials--carousel[data-bg="dark"] .testimonials__quote, .testimonials--carousel[data-bg="dark"] .testimonials__name { color: var(--color-white); } .testimonials--carousel .testimonials__header { text-align: center; margin-bottom: 3rem; } .testimonials--carousel .testimonials__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: var(--color-text); margin: 0 0 1rem; } .testimonials__rating { display: flex; align-items: center; justify-content: center; gap: 0.75rem; flex-wrap: wrap; } .testimonials__stars { color: var(--color-accent, #f59e0b); font-size: 1.25rem; letter-spacing: 0.1em; } .testimonials__rating-text { color: var(--color-text-secondary); font-size: 0.9375rem; } .testimonials__carousel-wrap { position: relative; max-width: 800px; margin: 0 auto; padding: 0 4rem; } .testimonials__nav { position: absolute; top: 50%; transform: translateY(-50%); width: 48px; height: 48px; display: flex; align-items: center; justify-content: center; background: var(--color-surface); border: 2px solid var(--color-border); border-radius: 50%; cursor: pointer; transition: all 0.3s ease; z-index: 2; color: var(--color-text); } .testimonials__nav:hover { background: var(--color-primary); border-color: var(--color-primary); color: var(--color-white); transform: translateY(-50%) scale(1.05); } .testimonials__nav--prev { left: 0; } .testimonials__nav--next { right: 0; } .testimonials__carousel-track { overflow: hidden; } .testimonials__slide { display: none; text-align: center; padding: 1rem 0; animation: fadeSlide 0.5s ease; } .testimonials__slide.active { display: block; } @keyframes fadeSlide { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } .testimonials__quote { font-size: clamp(1.125rem, 2.5vw, 1.375rem); font-style: italic; color: var(--color-text); line-height: 1.8; margin: 0 0 1.5rem; } .testimonials__author { display: flex; flex-direction: column; align-items: center; gap: 0.25rem; } .testimonials__name { font-weight: 600; color: var(--color-text); font-size: 1rem; } .testimonials__source { font-size: 0.875rem; color: var(--color-primary); } .testimonials__dots { display: flex; justify-content: center; gap: 0.75rem; margin-top: 2rem; } .testimonials__dot { width: 10px; height: 10px; border-radius: 50%; border: none; background: var(--color-border); cursor: pointer; transition: all 0.3s ease; } .testimonials__dot:hover { background: var(--color-primary-light); } .testimonials__dot.active { background: var(--color-primary); transform: scale(1.2); } @media (max-width: 768px) { .testimonials__carousel-wrap { padding: 0 3rem; } .testimonials__nav { width: 40px; height: 40px; } } /* ===================================================== TESTIMONIALS - ticker (v2) ===================================================== */ /* Testimonials Ticker V2 - Enhanced Visual Design */ .testimonials--ticker { padding: var(--section-padding-y, 6rem) 0; background: var(--color-bg); overflow: hidden; } .testimonials--ticker[data-bg="alt"] { background: var(--color-bg-alt); } .testimonials--ticker[data-bg="dark"] { background: var(--color-bg-dark); } .testimonials--ticker[data-bg="dark"] .testimonials__title, .testimonials--ticker[data-bg="dark"] .testimonials__subtitle { color: var(--color-white); } .testimonials--ticker[data-bg="dark"] .testimonials__ticker-card { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); box-shadow: 0 8px 32px rgba(0,0,0,0.3); } .testimonials--ticker[data-bg="dark"] .testimonials__ticker-card:hover { background: rgba(255,255,255,0.1); box-shadow: 0 20px 50px rgba(0,0,0,0.5); } .testimonials--ticker[data-bg="dark"] .testimonials__ticker-text { color: rgba(255,255,255,0.85); } .testimonials--ticker[data-bg="dark"] .testimonials__ticker-author strong { color: var(--color-white); } .testimonials--ticker[data-spacing="compact"] { padding: 4rem 0; } .testimonials--ticker[data-spacing="spacious"] { padding: 8rem 0; } /* Header */ .testimonials--ticker .testimonials__header { text-align: center; margin-bottom: 3.5rem; max-width: 700px; margin-left: auto; margin-right: auto; padding: 0 1.5rem; } .testimonials--ticker .testimonials__title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; color: var(--color-text); margin: 0 0 1rem; letter-spacing: -0.02em; } .testimonials--ticker .testimonials__subtitle { font-size: 1.125rem; color: var(--color-text-secondary); margin: 0; line-height: 1.7; } /* Ticker Container */ .testimonials__ticker { width: 100%; overflow: hidden; padding: 1.5rem 0; mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); -webkit-mask-image: linear-gradient(to right, transparent, black 5%, black 95%, transparent); } .testimonials__ticker-track { display: flex; gap: 2rem; animation: tickerScroll 60s linear infinite; width: max-content; } .testimonials__ticker:hover .testimonials__ticker-track { animation-play-state: paused; } @keyframes tickerScroll { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } /* Cards - Premium Design */ .testimonials__ticker-card { flex: 0 0 420px; min-height: 280px; background: var(--color-surface, #ffffff); border: 1px solid var(--color-border, rgba(0,0,0,0.06)); border-radius: 1.25rem; padding: 2.5rem; text-align: center; display: flex; flex-direction: column; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 4px 24px rgba(0,0,0,0.06); position: relative; overflow: hidden; } .testimonials__ticker-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: linear-gradient(90deg, var(--color-primary, #2563eb), var(--color-accent, #8b5cf6)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; } .testimonials__ticker-card:hover { transform: translateY(-8px) scale(1.02); box-shadow: 0 25px 60px rgba(0,0,0,0.15); } .testimonials__ticker-card:hover::before { transform: scaleX(1); } /* Stars */ .testimonials__ticker-stars { display: flex; justify-content: center; gap: 0.375rem; color: #f59e0b; margin-bottom: 1.5rem; } .testimonials__ticker-stars svg { width: 22px; height: 22px; filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.3)); } /* Quote */ .testimonials__ticker-quote { margin: 0 0 auto; position: relative; flex: 1; display: flex; flex-direction: column; } .testimonials__ticker-quote::before { content: '"'; position: absolute; top: -10px; left: 50%; transform: translateX(-50%); font-size: 4rem; line-height: 1; color: var(--color-primary-light, rgba(37, 99, 235, 0.15)); font-family: Georgia, serif; pointer-events: none; } .testimonials__ticker-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 1.05rem; line-height: 1.8; color: var(--color-text-secondary); font-style: italic; padding-top: 1rem; } .testimonials__ticker-card.expanded .testimonials__ticker-text { display: block; -webkit-line-clamp: unset; } .testimonials__ticker-more { display: inline-flex; align-items: center; justify-content: center; gap: 0.25rem; margin-top: 1rem; padding: 0.5rem 1.25rem; background: var(--color-primary-light, rgba(37, 99, 235, 0.1)); border: none; border-radius: 2rem; color: var(--color-primary); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.25s ease; align-self: center; } .testimonials__ticker-more:hover { background: var(--color-primary); color: white; transform: scale(1.05); } .testimonials__ticker-card.expanded .testimonials__ticker-more { display: none; } /* Author */ .testimonials__ticker-author { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; padding-top: 1.5rem; margin-top: 1.5rem; border-top: 1px solid var(--color-border, rgba(0,0,0,0.06)); } .testimonials__ticker-author strong { color: var(--color-text); font-size: 1.05rem; font-weight: 700; } .testimonials__ticker-author span { color: var(--color-text-muted); font-size: 0.875rem; display: flex; align-items: center; gap: 0.375rem; } /* Mobile */ @media (max-width: 768px) { .testimonials--ticker { padding: 4rem 0; } .testimonials__ticker-card { flex: 0 0 340px; min-height: 250px; padding: 2rem; } .testimonials__ticker-stars svg { width: 18px; height: 18px; } .testimonials__ticker-text { font-size: 0.95rem; -webkit-line-clamp: 3; } } /* ===================================================== TESTIMONIALS - grid (v3) ===================================================== */ /* Testimonials Grid V3 - Enhanced Visual Design */ .testimonials--grid { padding: var(--section-padding-y, 6rem) 0; background: var(--color-bg); overflow: visible; } .testimonials--grid[data-bg="alt"] { background: var(--color-bg-alt); } .testimonials--grid[data-bg="dark"] { background: var(--color-bg-dark); } .testimonials--grid[data-bg="dark"] .testimonials__title, .testimonials--grid[data-bg="dark"] .testimonials__subtitle { color: var(--color-white); } .testimonials--grid[data-bg="dark"] .testimonials__card { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); box-shadow: 0 4px 20px rgba(0,0,0,0.3); } .testimonials--grid[data-bg="dark"] .testimonials__card:hover { background: rgba(255,255,255,0.1); box-shadow: 0 20px 50px rgba(0,0,0,0.5); } .testimonials--grid[data-bg="dark"] .testimonials__card-text { color: rgba(255,255,255,0.85); } .testimonials--grid[data-bg="dark"] .testimonials__card-author strong { color: var(--color-white); } .testimonials--grid[data-bg="dark"] .testimonials__grid-arrow { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.2); color: white; } .testimonials--grid[data-bg="dark"] .testimonials__grid-arrow:hover { background: var(--color-primary); border-color: var(--color-primary); } .testimonials--grid[data-spacing="compact"] { padding: 4rem 0; } .testimonials--grid[data-spacing="spacious"] { padding: 8rem 0; } /* Header */ .testimonials--grid .testimonials__header { text-align: center; margin-bottom: 3.5rem; max-width: 700px; margin-left: auto; margin-right: auto; } .testimonials--grid .testimonials__title { font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; color: var(--color-text); margin: 0 0 1rem; letter-spacing: -0.02em; } .testimonials--grid .testimonials__subtitle { font-size: 1.125rem; color: var(--color-text-secondary); margin: 0 0 1.5rem; line-height: 1.7; } .testimonials__stats { display: flex; align-items: center; justify-content: center; gap: 1.25rem; flex-wrap: wrap; } .testimonials__rating { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 700; font-size: 1.25rem; color: var(--color-text); background: linear-gradient(135deg, #fef3c7 0%, #fde68a 100%); padding: 0.5rem 1rem; border-radius: 2rem; } .testimonials__rating svg { color: #f59e0b; } .testimonials__count { color: var(--color-text-secondary); font-size: 1rem; } /* Grid Wrapper - allows overflow for hover effects */ .testimonials__grid-wrapper { position: relative; display: flex; align-items: center; gap: 1.5rem; padding: 1rem 0; } .testimonials__grid-container { flex: 1; overflow: visible; padding: 0.5rem; margin: -0.5rem; } /* True 3x2 Grid Layout */ .testimonials__grid { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, auto); gap: 2rem; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } /* Cards - Premium styling */ .testimonials--grid .testimonials__card { background: var(--color-surface, #ffffff); padding: 2rem 1.75rem; border-radius: 1.25rem; border: 1px solid var(--color-border, rgba(0,0,0,0.06)); text-align: center; display: flex; flex-direction: column; align-items: center; box-shadow: 0 4px 20px rgba(0,0,0,0.04); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; z-index: 1; } .testimonials--grid .testimonials__card::before { content: ''; position: absolute; inset: 0; border-radius: 1.25rem; padding: 2px; background: linear-gradient(135deg, transparent 0%, transparent 50%, var(--color-primary) 100%); -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0); -webkit-mask-composite: xor; mask-composite: exclude; opacity: 0; transition: opacity 0.4s ease; } .testimonials--grid .testimonials__card:hover { transform: translateY(-12px) scale(1.02); box-shadow: 0 25px 60px rgba(0,0,0,0.15); z-index: 10; } .testimonials--grid .testimonials__card:hover::before { opacity: 1; } /* Stars */ .testimonials__card-stars { display: flex; justify-content: center; gap: 0.25rem; color: #f59e0b; margin-bottom: 1.5rem; } .testimonials__card-stars svg { width: 20px; height: 20px; filter: drop-shadow(0 2px 4px rgba(245, 158, 11, 0.3)); } /* Quote */ .testimonials--grid .testimonials__card-quote { margin: 0 0 1.5rem; text-align: center; flex: 1; position: relative; } .testimonials__card-text { display: -webkit-box; -webkit-line-clamp: 4; -webkit-box-orient: vertical; overflow: hidden; font-size: 1rem; line-height: 1.8; color: var(--color-text-secondary); font-style: italic; } .testimonials--grid .testimonials__card.expanded .testimonials__card-text { display: block; -webkit-line-clamp: unset; } .testimonials__card-more { display: inline-flex; align-items: center; gap: 0.25rem; margin-top: 1rem; padding: 0.5rem 1rem; background: var(--color-primary-light, rgba(37, 99, 235, 0.1)); border: none; border-radius: 2rem; color: var(--color-primary); font-size: 0.875rem; font-weight: 600; cursor: pointer; transition: all 0.2s ease; } .testimonials__card-more:hover { background: var(--color-primary); color: white; transform: scale(1.05); } .testimonials--grid .testimonials__card.expanded .testimonials__card-more { display: none; } /* Author */ .testimonials--grid .testimonials__card-author { display: flex; flex-direction: column; align-items: center; gap: 0.375rem; padding-top: 1rem; border-top: 1px solid var(--color-border, rgba(0,0,0,0.06)); width: 100%; } .testimonials--grid .testimonials__card-author strong { color: var(--color-text); font-size: 1rem; font-weight: 700; } .testimonials--grid .testimonials__card-author span { color: var(--color-text-muted); font-size: 0.875rem; display: flex; align-items: center; gap: 0.375rem; } /* Navigation Arrows - Premium styling */ .testimonials__grid-arrow { width: 56px; height: 56px; border-radius: 50%; border: 2px solid var(--color-border, rgba(0,0,0,0.1)); background: var(--color-surface, #ffffff); color: var(--color-text); display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); flex-shrink: 0; z-index: 10; box-shadow: 0 4px 15px rgba(0,0,0,0.08); } .testimonials__grid-arrow:hover { background: var(--color-primary); border-color: var(--color-primary); color: white; transform: scale(1.1); box-shadow: 0 8px 25px rgba(37, 99, 235, 0.35); } .testimonials__grid-arrow svg { width: 24px; height: 24px; } .testimonials__grid-arrow:disabled { opacity: 0.3; cursor: not-allowed; transform: none; box-shadow: none; } /* Dots - Premium styling */ .testimonials__grid-dots { display: flex; justify-content: center; gap: 0.75rem; margin-top: 2.5rem; } .testimonials__grid-dot { width: 12px; height: 12px; border-radius: 50%; background: var(--color-border, rgba(0,0,0,0.15)); border: none; cursor: pointer; transition: all 0.3s ease; padding: 0; } .testimonials__grid-dot.active { background: var(--color-primary); transform: scale(1.3); box-shadow: 0 0 0 4px rgba(37, 99, 235, 0.2); } .testimonials__grid-dot:hover:not(.active) { background: var(--color-primary-light, rgba(37, 99, 235, 0.5)); transform: scale(1.15); } /* Tablet: 2 columns, 3 rows */ @media (max-width: 1024px) { .testimonials__grid { grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .testimonials__grid-arrow { width: 48px; height: 48px; } } /* Mobile: 1 column slideshow */ @media (max-width: 640px) { .testimonials--grid { padding: 4rem 0; } .testimonials__grid { grid-template-columns: 1fr; gap: 1.25rem; } .testimonials--grid .testimonials__card { padding: 1.5rem; } .testimonials__grid-arrow { width: 44px; height: 44px; display: none; } .testimonials__grid-wrapper { gap: 0.75rem; } .testimonials__rating { font-size: 1.1rem; padding: 0.4rem 0.8rem; } } /* ===================================================== TWO-COL - modular (v1) ===================================================== */ /* Two-Col V1: Text + Image with Hover */ .twocol { padding: 5rem 0; background: var(--color-bg); color: var(--color-text); } .twocol[data-bg="dark"] { background: var(--color-bg-dark); color: var(--color-white); } .twocol[data-bg="light"] { background: var(--color-bg-alt); } .twocol[data-spacing="compact"] { padding: 3rem 0; } .twocol[data-spacing="spacious"] { padding: 7rem 0; } .twocol__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .twocol__content { display: flex; flex-direction: column; gap: 1.25rem; } .twocol__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; color: inherit; margin: 0; line-height: 1.2; } .twocol__desc { font-size: 1.1rem; color: var(--color-text-secondary); line-height: 1.7; margin: 0; } .twocol[data-bg="dark"] .twocol__desc { color: rgba(255,255,255,0.85); } .twocol__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.625rem; } .twocol__list li { display: flex; align-items: center; gap: 0.625rem; font-size: 1rem; color: var(--color-text-secondary); } .twocol[data-bg="dark"] .twocol__list li { color: rgba(255,255,255,0.9); } .twocol__list li::before { content: "✓"; color: var(--color-primary); font-weight: 700; } /* CTA Button */ .twocol__cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.75rem; background: var(--color-primary); color: var(--color-white); font-size: 1rem; font-weight: 600; text-decoration: none; border-radius: var(--radius-md); transition: all 0.3s ease; align-self: flex-start; margin-top: 0.5rem; } .twocol__cta:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3); } /* Image with Hover Effect */ .twocol__image-wrap { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); } .twocol__image { width: 100%; height: 100%; min-height: 350px; max-height: 500px; object-fit: cover; display: block; transition: transform 0.5s ease; } .twocol__image-wrap:hover .twocol__image { transform: scale(1.05); } .twocol__image-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); color: var(--color-white); transform: translateY(100%); transition: transform 0.4s ease; } .twocol__image-wrap:hover .twocol__image-overlay { transform: translateY(0); } .twocol__image-title { display: block; font-size: 1.1rem; font-weight: 600; margin-bottom: 0.25rem; } .twocol__image-caption { font-size: 0.9rem; opacity: 0.9; margin: 0; } @media (max-width: 768px) { .twocol { padding: 3rem 0; } .twocol__grid { grid-template-columns: 1fr; gap: 2.5rem; } .twocol__media { order: -1; } .twocol__image { min-height: 280px; max-height: 400px; } .twocol__cta { align-self: stretch; justify-content: center; } } /* ===================================================== TWO-COL - duo-accordion (v2) ===================================================== */ /* Two-Col V2: Duo Accordion + Stacked Images */ .two-col[data-variant="duo-accordion"] { padding: 5rem 0; background: var(--color-bg); color: var(--color-text); } .two-col[data-variant="duo-accordion"][data-bg="dark"] { background: var(--color-bg-dark); color: var(--color-white); } .two-col[data-variant="duo-accordion"][data-bg="light"] { background: var(--color-bg-alt); } .two-col[data-variant="duo-accordion"][data-spacing="compact"] { padding: 3rem 0; } .two-col[data-variant="duo-accordion"][data-spacing="spacious"] { padding: 7rem 0; } .two-col__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .two-col--50-50 { grid-template-columns: 1fr 1fr; } .two-col--reverse .two-col__grid { direction: rtl; } .two-col--reverse .two-col__slot { direction: ltr; } .two-col__slot { display: flex; flex-direction: column; gap: 1.5rem; } /* Hide eyebrow */ .two-col__eyebrow { display: none; } .two-col__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.2; margin: 0 0 0.5rem; } .two-col__desc { font-size: 1.1rem; line-height: 1.7; color: var(--color-text-secondary); margin: 0; } .two-col[data-bg="dark"] .two-col__desc { color: rgba(255,255,255,0.85); } /* Stacked Images - Fixed sizing */ .img-grid--duo-stack { display: flex; flex-direction: column; gap: 1rem; } .img-grid--duo-stack .image-hover { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-lg); position: relative; } .img-grid--duo-stack img { width: 100%; height: 200px; object-fit: cover; display: block; transition: transform 0.4s ease; } .img-grid--duo-stack .image-hover:hover img { transform: scale(1.05); } .image-hover__content { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.25rem; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); color: var(--color-white); transform: translateY(100%); transition: transform 0.3s ease; } .image-hover:hover .image-hover__content { transform: translateY(0); } .image-hover__title { display: block; font-size: 1rem; font-weight: 600; margin-bottom: 0.25rem; } .image-hover__text { font-size: 0.875rem; opacity: 0.9; margin: 0; } /* Accordion - Enhanced with bullets and hover */ .accordion { display: flex; flex-direction: column; gap: 0.75rem; } .accordion__item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: all 0.3s ease; } .accordion__item:hover { border-color: var(--color-primary); box-shadow: 0 4px 12px rgba(37, 99, 235, 0.1); } .two-col[data-bg="dark"] .accordion__item { background: rgba(255,255,255,0.05); border-color: rgba(255,255,255,0.1); } .two-col[data-bg="dark"] .accordion__item:hover { border-color: var(--color-primary-light); } .accordion__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; background: none; border: none; cursor: pointer; text-align: left; font-size: 1.05rem; font-weight: 600; color: inherit; transition: background 0.2s ease; } .accordion__trigger:hover { background: var(--color-bg-alt); } .two-col[data-bg="dark"] .accordion__trigger:hover { background: rgba(255,255,255,0.05); } .accordion__icon { width: 24px; height: 24px; color: var(--color-primary); transition: transform 0.3s ease; flex-shrink: 0; } .accordion__item.active .accordion__icon { transform: rotate(180deg); } .accordion__content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .accordion__item.active .accordion__content { max-height: 500px; } .accordion__content p { padding: 0 1.5rem 1.5rem; margin: 0; color: var(--color-text-secondary); line-height: 1.7; } .two-col[data-bg="dark"] .accordion__content p { color: rgba(255,255,255,0.8); } /* CTA Button */ .btn--primary { display: inline-flex; align-items: center; justify-content: center; padding: 0.875rem 1.75rem; background: var(--color-primary); color: var(--color-white); font-size: 1rem; font-weight: 600; text-decoration: none; border-radius: var(--radius-md); transition: all 0.3s ease; align-self: flex-start; } .btn--primary:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3); } @media (max-width: 768px) { .two-col__grid { grid-template-columns: 1fr; gap: 2.5rem; } .two-col--reverse .two-col__grid { direction: ltr; } .two-col__slot:first-child { order: 1; } .img-grid--duo-stack img { height: 180px; } } /* ===================================================== TWO-COL - quad-faq (v3) ===================================================== */ /* Two-Col V3: Quad Image Grid + FAQ */ .two-col[data-variant="quad-faq"] { padding: 5rem 0; background: var(--color-bg); color: var(--color-text); } .two-col[data-variant="quad-faq"][data-bg="dark"] { background: var(--color-bg-dark); color: var(--color-white); } .two-col[data-variant="quad-faq"][data-bg="light"] { background: var(--color-bg-alt); } /* Hide eyebrow */ .two-col__eyebrow { display: none; } .two-col__header { text-align: center; margin-bottom: 3rem; } .two-col__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.2; margin: 0 0 0.75rem; } .two-col__desc { font-size: 1.1rem; line-height: 1.7; color: var(--color-text-secondary); margin: 0; max-width: 600px; margin-left: auto; margin-right: auto; } .two-col[data-bg="dark"] .two-col__desc { color: rgba(255,255,255,0.85); } .two-col__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } .two-col--50-50 { grid-template-columns: 1fr 1fr; } .two-col--reverse .two-col__grid { direction: rtl; } .two-col--reverse .two-col__slot { direction: ltr; } .two-col__slot { display: flex; flex-direction: column; gap: 1.5rem; } /* Quad Image Grid */ .img-grid--quad { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .img-grid--quad .image-hover { border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); position: relative; transition: transform 0.3s ease, box-shadow 0.3s ease; } .img-grid--quad .image-hover:hover { transform: translateY(-4px); box-shadow: var(--shadow-xl); } .img-grid--quad img { width: 100%; height: 160px; object-fit: cover; display: block; transition: transform 0.4s ease; } .img-grid--quad .image-hover:hover img { transform: scale(1.08); } .image-hover__content { position: absolute; bottom: 0; left: 0; right: 0; padding: 1rem; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); color: var(--color-white); transform: translateY(100%); transition: transform 0.3s ease; } .image-hover:hover .image-hover__content { transform: translateY(0); } .image-hover__title { display: block; font-size: 0.9rem; font-weight: 600; margin-bottom: 0.25rem; } .image-hover__text { font-size: 0.8rem; opacity: 0.9; margin: 0; } /* Accordion - V3 style (different from V2) */ .accordion[data-accordion="twocol-faq"] { display: flex; flex-direction: column; gap: 0.5rem; } .accordion__item { background: var(--color-bg-alt); border-radius: var(--radius-md); overflow: hidden; transition: all 0.3s ease; } .accordion__item:hover { background: var(--color-surface); box-shadow: var(--shadow-md); } .two-col[data-bg="dark"] .accordion__item { background: rgba(255,255,255,0.03); } .two-col[data-bg="dark"] .accordion__item:hover { background: rgba(255,255,255,0.06); } .accordion__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1rem 1.25rem; background: none; border: none; cursor: pointer; text-align: left; font-size: 1rem; font-weight: 600; color: inherit; } .accordion__icon { width: 24px; height: 24px; color: var(--color-primary); transition: transform 0.3s ease; flex-shrink: 0; } .accordion__item.active .accordion__icon { transform: rotate(180deg); } .accordion__content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .accordion__item.active .accordion__content { max-height: 400px; } .accordion__content p { padding: 0 1.25rem 1.25rem; margin: 0; color: var(--color-text-secondary); line-height: 1.7; } .two-col[data-bg="dark"] .accordion__content p { color: rgba(255,255,255,0.8); } @media (max-width: 768px) { .two-col__grid { grid-template-columns: 1fr; gap: 2.5rem; } .two-col--reverse .two-col__grid { direction: ltr; } .two-col__slot:first-child { order: 1; } .img-grid--quad img { height: 140px; } } /* ===================================================== TWO-COL - single-content (v4) ===================================================== */ /* Two-Col V4: Single Content + Large Image */ .two-col[data-variant="single-content"] { padding: 5rem 0; background: var(--color-bg); color: var(--color-text); } .two-col[data-variant="single-content"][data-bg="dark"] { background: var(--color-bg-dark); color: var(--color-white); } .two-col[data-variant="single-content"][data-bg="light"] { background: var(--color-bg-alt); } /* Hide eyebrow */ .two-col__eyebrow { display: none; } .two-col__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .two-col--50-50 { grid-template-columns: 1fr 1fr; } .two-col--reverse .two-col__grid { direction: rtl; } .two-col--reverse .two-col__slot { direction: ltr; } .two-col__slot { display: flex; flex-direction: column; gap: 1.5rem; } .two-col__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.2; margin: 0 0 0.5rem; } .two-col__lead { font-size: 1.15rem; line-height: 1.7; color: var(--color-text-secondary); margin: 0 0 0.5rem; } .two-col__content p { color: var(--color-text-secondary); line-height: 1.7; margin: 0 0 1rem; } .two-col[data-bg="dark"] .two-col__content p, .two-col[data-bg="dark"] .two-col__lead { color: rgba(255,255,255,0.85); } /* Check List */ .check-list { list-style: none; padding: 0; margin: 1rem 0; display: flex; flex-direction: column; gap: 0.75rem; } .check-list li { display: flex; align-items: center; gap: 0.75rem; font-size: 1rem; color: var(--color-text-secondary); } .two-col[data-bg="dark"] .check-list li { color: rgba(255,255,255,0.9); } .check-list li::before { content: '✓'; display: flex; align-items: center; justify-content: center; width: 22px; height: 22px; min-width: 22px; background: var(--color-primary); color: var(--color-white); border-radius: 50%; font-size: 0.75rem; font-weight: 700; } /* CTA Group */ .two-col__cta-group { display: flex; flex-wrap: wrap; gap: 1rem; margin-top: 0.5rem; } .btn--primary { padding: 0.875rem 1.75rem; background: var(--color-primary); color: var(--color-white); border-radius: var(--radius-md); font-weight: 600; text-decoration: none; transition: all 0.3s ease; } .btn--primary:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3); } .btn--outline { padding: 0.875rem 1.75rem; background: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); border-radius: var(--radius-md); font-weight: 600; text-decoration: none; transition: all 0.3s ease; } .btn--outline:hover { background: var(--color-primary); color: var(--color-white); } /* Large Image with hover */ .image-hover--large { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); position: relative; } .image-hover--large img { width: 100%; height: 100%; min-height: 400px; max-height: 550px; object-fit: cover; display: block; transition: transform 0.5s ease; } .image-hover--large:hover img { transform: scale(1.05); } .image-hover__content { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); color: var(--color-white); transform: translateY(100%); transition: transform 0.3s ease; } .image-hover--large:hover .image-hover__content { transform: translateY(0); } .image-hover__title { display: block; font-size: 1.1rem; font-weight: 600; margin-bottom: 0.25rem; } .image-hover__text { font-size: 0.9rem; opacity: 0.9; margin: 0; } @media (max-width: 768px) { .two-col__grid { grid-template-columns: 1fr; gap: 2.5rem; } .two-col--reverse .two-col__grid { direction: ltr; } .two-col__slot:first-child { order: 1; } .image-hover--large img { min-height: 300px; max-height: 400px; } .two-col__cta-group { flex-direction: column; } .two-col__cta-group a { text-align: center; } } /* ===================================================== TWO-COL - tabs-faq (v5) ===================================================== */ /* Two-Col V5: Tabs + FAQ */ .two-col[data-variant="tabs-faq"] { padding: 5rem 0; background: var(--color-bg); color: var(--color-text); } .two-col[data-variant="tabs-faq"][data-bg="dark"] { background: var(--color-bg-dark); color: var(--color-white); } .two-col[data-variant="tabs-faq"][data-bg="light"] { background: var(--color-bg-alt); } /* Hide eyebrow */ .two-col__eyebrow { display: none; } .two-col__header { text-align: center; margin-bottom: 3rem; } .two-col__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.2; margin: 0 0 0.75rem; } .two-col__desc { font-size: 1.1rem; line-height: 1.7; color: var(--color-text-secondary); margin: 0; max-width: 600px; margin-left: auto; margin-right: auto; } .two-col[data-bg="dark"] .two-col__desc { color: rgba(255,255,255,0.85); } .two-col__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: start; } .two-col--50-50 { grid-template-columns: 1fr 1fr; } .two-col--reverse .two-col__grid { direction: rtl; } .two-col--reverse .two-col__slot { direction: ltr; } .two-col__slot { display: flex; flex-direction: column; gap: 1.5rem; } /* Tabs - Contained, no overflow */ .tabs { display: flex; flex-direction: column; } .tabs__nav { display: inline-flex; gap: 0.25rem; background: var(--color-bg-alt); padding: 0.375rem; border-radius: var(--radius-md); margin-bottom: 1.5rem; align-self: flex-start; } .two-col[data-bg="dark"] .tabs__nav { background: rgba(255,255,255,0.06); } .tabs__btn { padding: 0.75rem 1.25rem; background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.9rem; font-weight: 600; color: var(--color-text-secondary); white-space: nowrap; transition: all 0.2s ease; } .tabs__btn:hover { color: var(--color-text); } .tabs__btn.active { background: var(--color-surface); color: var(--color-primary); box-shadow: var(--shadow-sm); } .two-col[data-bg="dark"] .tabs__btn { color: rgba(255,255,255,0.6); } .two-col[data-bg="dark"] .tabs__btn:hover, .two-col[data-bg="dark"] .tabs__btn.active { color: var(--color-white); } .two-col[data-bg="dark"] .tabs__btn.active { background: rgba(255,255,255,0.1); } .tabs__panel { display: none; } .tabs__panel.active { display: block; } .tabs__panel h4 { font-size: 1.1rem; font-weight: 600; margin: 0 0 0.75rem; } .tabs__panel p { margin: 0 0 1rem; color: var(--color-text-secondary); line-height: 1.7; } .two-col[data-bg="dark"] .tabs__panel p { color: rgba(255,255,255,0.8); } .check-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .check-list li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; color: var(--color-text-secondary); } .check-list li::before { content: '✓'; color: var(--color-success); font-weight: 700; } /* Accordion */ .accordion { display: flex; flex-direction: column; gap: 0.5rem; } .accordion__item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: all 0.3s ease; } .accordion__item:hover { border-color: var(--color-primary-light); box-shadow: 0 4px 15px rgba(37, 99, 235, 0.08); } .two-col[data-bg="dark"] .accordion__item { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); } .accordion__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 1.5rem; background: none; border: none; cursor: pointer; text-align: left; font-size: 1rem; font-weight: 600; color: inherit; } .accordion__icon { width: 24px; height: 24px; color: var(--color-primary); transition: transform 0.3s ease; flex-shrink: 0; } .accordion__item.active .accordion__icon { transform: rotate(180deg); } .accordion__content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .accordion__item.active .accordion__content { max-height: 400px; } .accordion__content p { padding: 0 1.5rem 1.5rem; margin: 0; color: var(--color-text-secondary); line-height: 1.7; } .two-col[data-bg="dark"] .accordion__content p { color: rgba(255,255,255,0.8); } @media (max-width: 768px) { .two-col__grid { grid-template-columns: 1fr; gap: 2.5rem; } .two-col--reverse .two-col__grid { direction: ltr; } .tabs__nav { flex-wrap: wrap; } .tabs__btn { padding: 0.625rem 1rem; font-size: 0.85rem; } } /* ===================================================== TWO-COL - text-image (v6) ===================================================== */ /* Two-Col V6: Text + Image */ .twocol { padding: 5rem 0; background: var(--color-bg); color: var(--color-text); } .twocol[data-bg="dark"] { background: var(--color-bg-dark); color: var(--color-white); } .twocol[data-bg="light"] { background: var(--color-bg-alt); } .twocol[data-bg="primary"] { background: var(--color-primary); color: var(--color-white); } .twocol[data-spacing="compact"] { padding: 3rem 0; } .twocol[data-spacing="spacious"] { padding: 7rem 0; } .twocol__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .twocol[data-ratio="60-40"] .twocol__grid { grid-template-columns: 1.4fr 1fr; } .twocol[data-ratio="40-60"] .twocol__grid { grid-template-columns: 1fr 1.4fr; } .twocol[data-direction="reverse"] .twocol__grid { direction: rtl; } .twocol[data-direction="reverse"] .twocol__slot { direction: ltr; } .twocol__slot { display: flex; flex-direction: column; } /* Hide eyebrow */ .tcb-text__eyebrow { display: none; } .tcb-text { display: flex; flex-direction: column; gap: 1.25rem; } .tcb-text__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.2; margin: 0; color: inherit; } .tcb-text__desc { font-size: 1.1rem; line-height: 1.7; color: var(--color-text-secondary); margin: 0; } .twocol[data-bg="dark"] .tcb-text__desc, .twocol[data-bg="primary"] .tcb-text__desc { color: rgba(255, 255, 255, 0.85); } .tcb-text__list { list-style: none; padding: 0; margin: 0.5rem 0; display: flex; flex-direction: column; gap: 0.875rem; } .tcb-text__list li { display: flex; align-items: center; gap: 0.75rem; font-size: 1rem; color: var(--color-text-secondary); } .twocol[data-bg="dark"] .tcb-text__list li, .twocol[data-bg="primary"] .tcb-text__list li { color: rgba(255, 255, 255, 0.9); } .tcb-text__list li::before { content: ''; width: 20px; height: 20px; min-width: 20px; background: var(--color-primary); border-radius: 50%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='white' stroke-width='3'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M5 13l4 4L19 7'/%3E%3C/svg%3E"); background-size: 12px; background-repeat: no-repeat; background-position: center; } .twocol[data-bg="primary"] .tcb-text__list li::before { background-color: rgba(255, 255, 255, 0.25); } .tcb-text__cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.75rem; background: var(--color-primary); color: var(--color-white); font-size: 1rem; font-weight: 600; text-decoration: none; border-radius: var(--radius-md); transition: all 0.3s ease; margin-top: 0.5rem; align-self: flex-start; } .tcb-text__cta:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3); } .twocol[data-bg="primary"] .tcb-text__cta { background: var(--color-white); color: var(--color-primary); } /* Image - proper sizing */ .tcb-image { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); } .tcb-image__img { width: 100%; height: 100%; min-height: 350px; max-height: 500px; display: block; object-fit: cover; transition: transform 0.5s ease; } .image-hover:hover .tcb-image__img { transform: scale(1.05); } .image-hover__content { position: absolute; bottom: 0; left: 0; right: 0; padding: 2rem; background: linear-gradient(to top, rgba(0, 0, 0, 0.8), transparent); color: var(--color-white); transform: translateY(100%); transition: transform 0.4s ease; } .image-hover:hover .image-hover__content { transform: translateY(0); } .image-hover__title { display: block; font-size: 1.25rem; font-weight: 600; margin-bottom: 0.5rem; } .image-hover__text { font-size: 0.95rem; opacity: 0.9; margin: 0; } @media (max-width: 768px) { .twocol { padding: 3rem 0; } .twocol__grid { grid-template-columns: 1fr; gap: 2.5rem; } .twocol[data-ratio="60-40"] .twocol__grid, .twocol[data-ratio="40-60"] .twocol__grid { grid-template-columns: 1fr; } .twocol[data-direction="reverse"] .twocol__grid { direction: ltr; } .twocol__slot--right { order: -1; } .tcb-image__img { min-height: 280px; max-height: 400px; } } /* ===================================================== TWO-COL - accordion-image (v7) ===================================================== */ /* Two-Col V7: Accordion + Image */ .twocol { padding: 5rem 0; background: var(--color-bg); color: var(--color-text); } .twocol[data-bg="dark"] { background: var(--color-bg-dark); color: var(--color-white); } .twocol[data-bg="light"] { background: var(--color-bg-alt); } .twocol[data-spacing="compact"] { padding: 3rem 0; } .twocol[data-spacing="spacious"] { padding: 7rem 0; } .twocol__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .twocol[data-direction="reverse"] .twocol__grid { direction: rtl; } .twocol[data-direction="reverse"] .twocol__slot { direction: ltr; } .twocol__slot { display: flex; flex-direction: column; gap: 1.5rem; } /* Hide eyebrow */ .tcb-text__eyebrow, .tcb-accordion__eyebrow { display: none; } .tcb-accordion__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.2; margin: 0 0 1.5rem; } /* Accordion - Enhanced */ .tcb-accordion { display: flex; flex-direction: column; gap: 0.75rem; } .tcb-accordion__item { background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; transition: all 0.3s ease; } .tcb-accordion__item:hover { border-color: var(--color-primary); } .twocol[data-bg="dark"] .tcb-accordion__item { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); } .tcb-accordion__trigger { width: 100%; display: flex; align-items: center; justify-content: space-between; padding: 1.25rem 1.5rem; background: none; border: none; cursor: pointer; text-align: left; font-size: 1rem; font-weight: 600; color: inherit; } .tcb-accordion__icon { width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; background: var(--color-primary); color: var(--color-white); border-radius: 50%; font-size: 1.25rem; transition: all 0.3s ease; } .tcb-accordion__item.active .tcb-accordion__icon { transform: rotate(45deg); background: var(--color-accent); } .tcb-accordion__content { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .tcb-accordion__item.active .tcb-accordion__content { max-height: 500px; } .tcb-accordion__body { padding: 0 1.5rem 1.5rem; color: var(--color-text-secondary); line-height: 1.7; } .twocol[data-bg="dark"] .tcb-accordion__body { color: rgba(255,255,255,0.8); } .tcb-accordion__body ul { list-style: none; padding: 0; margin: 0.75rem 0 0; } .tcb-accordion__body li { display: flex; align-items: center; gap: 0.5rem; padding: 0.25rem 0; font-size: 0.9rem; } .tcb-accordion__body li::before { content: '→'; color: var(--color-primary); } /* Image - Fixed sizing */ .tcb-image { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); } .tcb-image__img { width: 100%; height: 100%; min-height: 350px; max-height: 500px; object-fit: cover; display: block; transition: transform 0.5s ease; } .image-hover:hover .tcb-image__img { transform: scale(1.05); } @media (max-width: 768px) { .twocol__grid { grid-template-columns: 1fr; gap: 2.5rem; } .twocol[data-direction="reverse"] .twocol__grid { direction: ltr; } .twocol__slot--right { order: -1; } .tcb-image__img { min-height: 280px; max-height: 400px; } } /* ===================================================== TWO-COL - tabs-image (v8) ===================================================== */ /* Two-Col V8: Tabs + Image */ .twocol { padding: 5rem 0; background: var(--color-bg); color: var(--color-text); } .twocol[data-bg="dark"] { background: var(--color-bg-dark); color: var(--color-white); } .twocol[data-bg="light"] { background: var(--color-bg-alt); } .twocol[data-spacing="compact"] { padding: 3rem 0; } .twocol[data-spacing="spacious"] { padding: 7rem 0; } .twocol__header { display: none; } .twocol__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .twocol[data-direction="reverse"] .twocol__grid { direction: rtl; } .twocol[data-direction="reverse"] .twocol__slot { direction: ltr; } .twocol__slot { display: flex; flex-direction: column; gap: 1.5rem; } /* Tabs - Contained pill style */ .tcb-tabs { display: flex; flex-direction: column; } .tcb-tabs__nav { display: inline-flex; gap: 0.25rem; background: var(--color-bg-alt); padding: 0.375rem; border-radius: var(--radius-md); margin-bottom: 1.5rem; align-self: flex-start; } .twocol[data-bg="dark"] .tcb-tabs__nav { background: rgba(255,255,255,0.06); } .tcb-tabs__btn { padding: 0.75rem 1.25rem; background: none; border: none; border-radius: var(--radius-sm); cursor: pointer; font-size: 0.9rem; font-weight: 600; color: var(--color-text-secondary); transition: all 0.2s ease; white-space: nowrap; } .tcb-tabs__btn:hover { color: var(--color-text); } .tcb-tabs__btn.active { background: var(--color-surface); color: var(--color-primary); box-shadow: var(--shadow-sm); } .twocol[data-bg="dark"] .tcb-tabs__btn { color: rgba(255,255,255,0.6); } .twocol[data-bg="dark"] .tcb-tabs__btn:hover, .twocol[data-bg="dark"] .tcb-tabs__btn.active { color: var(--color-white); } .twocol[data-bg="dark"] .tcb-tabs__btn.active { background: rgba(255,255,255,0.1); } .tcb-tabs__panel { display: none; } .tcb-tabs__panel.active { display: block; } .tcb-tabs__content p { margin: 0 0 1rem; color: var(--color-text-secondary); line-height: 1.7; } .twocol[data-bg="dark"] .tcb-tabs__content p { color: rgba(255,255,255,0.8); } .tcb-text__list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.5rem; } .tcb-text__list li { display: flex; align-items: center; gap: 0.5rem; font-size: 0.95rem; color: var(--color-text-secondary); } .tcb-text__list li::before { content: '✓'; color: var(--color-success); font-weight: 700; } /* Image - Fixed sizing */ .tcb-image { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); position: relative; } .tcb-image__img { width: 100%; height: 100%; min-height: 350px; max-height: 500px; object-fit: cover; display: block; transition: transform 0.5s ease; } .image-hover:hover .tcb-image__img { transform: scale(1.05); } .image-hover__content { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); color: var(--color-white); transform: translateY(100%); transition: transform 0.3s ease; } .image-hover:hover .image-hover__content { transform: translateY(0); } .image-hover__title { display: block; font-size: 1.1rem; font-weight: 600; margin-bottom: 0.25rem; } .image-hover__text { font-size: 0.9rem; opacity: 0.9; margin: 0; } @media (max-width: 768px) { .twocol__grid { grid-template-columns: 1fr; gap: 2.5rem; } .twocol[data-direction="reverse"] .twocol__grid { direction: ltr; } .twocol__slot--right { order: -1; } .tcb-tabs__nav { flex-wrap: wrap; } .tcb-tabs__btn { padding: 0.625rem 1rem; font-size: 0.85rem; } .tcb-image__img { min-height: 280px; max-height: 400px; } } /* ===================================================== TWO-COL - faq-image (v9) ===================================================== */ /* Two-Col V9: FAQ + Image */ .twocol { padding: 5rem 0; background: var(--color-bg); color: var(--color-text); } .twocol[data-bg="dark"] { background: var(--color-bg-dark); color: var(--color-white); } .twocol[data-bg="light"] { background: var(--color-bg-alt); } .twocol[data-spacing="compact"] { padding: 3rem 0; } .twocol[data-spacing="spacious"] { padding: 7rem 0; } .twocol__header { display: none; } .twocol__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .twocol[data-direction="reverse"] .twocol__grid { direction: rtl; } .twocol[data-direction="reverse"] .twocol__slot { direction: ltr; } .twocol__slot { display: flex; flex-direction: column; gap: 1.5rem; } /* FAQ - Clean style with single icon */ .tcb-faq { display: flex; flex-direction: column; gap: 0.5rem; } .tcb-faq__item { border-bottom: 1px solid var(--color-border); transition: border-color 0.2s ease; } .tcb-faq__item:hover { border-color: var(--color-primary-light); } .twocol[data-bg="dark"] .tcb-faq__item { border-color: rgba(255,255,255,0.1); } .tcb-faq__question { width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 1.25rem 0; background: none; border: none; cursor: pointer; text-align: left; font-size: 1rem; font-weight: 600; color: inherit; } .tcb-faq__icon { width: 24px; height: 24px; min-width: 24px; display: flex; align-items: center; justify-content: center; font-size: 1.25rem; font-weight: 300; color: var(--color-primary); transition: transform 0.3s ease; } .tcb-faq__item.active .tcb-faq__icon { transform: rotate(45deg); } .tcb-faq__answer { max-height: 0; overflow: hidden; transition: max-height 0.4s ease; } .tcb-faq__item.active .tcb-faq__answer { max-height: 300px; } .tcb-faq__answer p { padding: 0 0 1.25rem; margin: 0; color: var(--color-text-secondary); line-height: 1.7; } .twocol[data-bg="dark"] .tcb-faq__answer p { color: rgba(255,255,255,0.8); } /* Image - Fixed sizing */ .tcb-image { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); position: relative; } .tcb-image__img { width: 100%; height: 100%; min-height: 350px; max-height: 500px; object-fit: cover; display: block; transition: transform 0.5s ease; } .image-hover:hover .tcb-image__img { transform: scale(1.05); } .image-hover__content { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; background: linear-gradient(to top, rgba(0,0,0,0.8), transparent); color: var(--color-white); transform: translateY(100%); transition: transform 0.3s ease; } .image-hover:hover .image-hover__content { transform: translateY(0); } .image-hover__title { display: block; font-size: 1.1rem; font-weight: 600; margin-bottom: 0.25rem; } .image-hover__text { font-size: 0.9rem; opacity: 0.9; margin: 0; } @media (max-width: 768px) { .twocol__grid { grid-template-columns: 1fr; gap: 2.5rem; } .twocol[data-direction="reverse"] .twocol__grid { direction: ltr; } .twocol__slot--right { order: -1; } .tcb-image__img { min-height: 280px; max-height: 400px; } } /* ===================================================== TWO-COL - form-image (v10) ===================================================== */ /* Two-Col V10: Form + Image */ .twocol { padding: 5rem 0; background: var(--color-bg); color: var(--color-text); } .twocol[data-bg="dark"] { background: var(--color-bg-dark); color: var(--color-white); } .twocol[data-bg="light"] { background: var(--color-bg-alt); } .twocol[data-spacing="compact"] { padding: 3rem 0; } .twocol[data-spacing="spacious"] { padding: 7rem 0; } .twocol__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .twocol[data-direction="reverse"] .twocol__grid { direction: rtl; } .twocol[data-direction="reverse"] .twocol__slot { direction: ltr; } .twocol__slot { display: flex; flex-direction: column; gap: 1.5rem; } /* Hide eyebrow */ .tcb-form__eyebrow { display: none; } .tcb-form__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.2; margin: 0 0 0.5rem; } .tcb-form__desc { font-size: 1.1rem; line-height: 1.7; color: var(--color-text-secondary); margin: 0 0 1.5rem; } .twocol[data-bg="dark"] .tcb-form__desc { color: rgba(255,255,255,0.85); } /* Form */ .tcb-form form { display: flex; flex-direction: column; gap: 1rem; } .tcb-form__row { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } .tcb-form__input, .tcb-form__textarea { width: 100%; padding: 0.875rem 1rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); font-size: 1rem; color: var(--color-text); transition: all 0.2s ease; } .tcb-form__input:focus, .tcb-form__textarea:focus { outline: none; border-color: var(--color-primary); box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.1); } .twocol[data-bg="dark"] .tcb-form__input, .twocol[data-bg="dark"] .tcb-form__textarea { background: rgba(255,255,255,0.06); border-color: rgba(255,255,255,0.1); color: var(--color-white); } .tcb-form__textarea { min-height: 120px; resize: vertical; } .tcb-form__submit { padding: 1rem 2rem; background: var(--color-primary); color: var(--color-white); border: none; border-radius: var(--radius-md); font-size: 1rem; font-weight: 600; cursor: pointer; transition: all 0.3s ease; align-self: flex-start; } .tcb-form__submit:hover { background: var(--color-primary-dark); transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37, 99, 235, 0.3); } /* Image - Fixed sizing */ .tcb-image { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); } .tcb-image__img { width: 100%; height: 100%; min-height: 400px; max-height: 550px; object-fit: cover; display: block; transition: transform 0.5s ease; } .image-hover:hover .tcb-image__img { transform: scale(1.05); } @media (max-width: 768px) { .twocol__grid { grid-template-columns: 1fr; gap: 2.5rem; } .twocol[data-direction="reverse"] .twocol__grid { direction: ltr; } .twocol__slot--right { order: -1; } .tcb-form__row { grid-template-columns: 1fr; } .tcb-form__submit { width: 100%; } .tcb-image__img { min-height: 280px; max-height: 400px; } } /* ===================================================== TWO-COL - checklist-image (v12) ===================================================== */ /* Two-Col V12: Checklist + Image */ .twocol { padding: 5rem 0; background: var(--color-bg); color: var(--color-text); } .twocol[data-bg="dark"] { background: var(--color-bg-dark); color: var(--color-white); } .twocol[data-bg="light"] { background: var(--color-bg-alt); } .twocol[data-spacing="compact"] { padding: 3rem 0; } .twocol[data-spacing="spacious"] { padding: 7rem 0; } .twocol__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .twocol[data-direction="reverse"] .twocol__grid { direction: rtl; } .twocol[data-direction="reverse"] .twocol__slot { direction: ltr; } .twocol__slot { display: flex; flex-direction: column; gap: 2rem; } /* Hide eyebrow */ .tcb-text__eyebrow { display: none; } .tcb-text__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.2; margin: 0 0 0.5rem; } .tcb-text__desc { font-size: 1.1rem; line-height: 1.7; color: var(--color-text-secondary); margin: 0; } .twocol[data-bg="dark"] .tcb-text__desc { color: rgba(255,255,255,0.85); } /* Checklist */ .tcb-checklist { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 0.875rem; } .tcb-checklist__item { display: flex; align-items: flex-start; gap: 1rem; padding: 1rem 1.25rem; background: var(--color-surface); border: 1px solid var(--color-border); border-radius: var(--radius-md); transition: all 0.3s ease; } .tcb-checklist__item:hover { border-color: var(--color-primary-light); box-shadow: var(--shadow-md); } .twocol[data-bg="dark"] .tcb-checklist__item { background: rgba(255,255,255,0.04); border-color: rgba(255,255,255,0.08); } .tcb-checklist__icon { width: 26px; height: 26px; min-width: 26px; display: flex; align-items: center; justify-content: center; background: var(--color-primary); border-radius: 50%; margin-top: 2px; } .tcb-checklist__icon svg { width: 14px; height: 14px; fill: none; stroke: var(--color-white); stroke-width: 3; } .tcb-checklist__text { display: flex; flex-direction: column; gap: 0.25rem; } .tcb-checklist__text strong { font-size: 1rem; font-weight: 600; color: inherit; } .tcb-checklist__text span { font-size: 0.9rem; color: var(--color-text-secondary); line-height: 1.5; } .twocol[data-bg="dark"] .tcb-checklist__text span { color: rgba(255,255,255,0.75); } /* Image - Fixed sizing */ .tcb-image { border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); } .tcb-image__img { width: 100%; height: 100%; min-height: 350px; max-height: 500px; object-fit: cover; display: block; transition: transform 0.5s ease; } .image-hover:hover .tcb-image__img { transform: scale(1.05); } @media (max-width: 768px) { .twocol__grid { grid-template-columns: 1fr; gap: 2.5rem; } .twocol[data-direction="reverse"] .twocol__grid { direction: ltr; } .twocol__slot--right { order: -1; } .tcb-checklist__item { padding: 0.875rem 1rem; } .tcb-checklist__icon { width: 22px; height: 22px; min-width: 22px; } .tcb-checklist__icon svg { width: 12px; height: 12px; } .tcb-image__img { min-height: 280px; max-height: 400px; } } /* ===================================================== TWO-COL - text-video (v13) ===================================================== */ /* Two-Col V13: Text + Video */ .twocol { padding: 5rem 0; background: var(--color-bg); color: var(--color-text); } .twocol[data-bg="dark"] { background: var(--color-bg-dark); color: var(--color-white); } .twocol[data-bg="light"] { background: var(--color-bg-alt); } .twocol[data-spacing="compact"] { padding: 3rem 0; } .twocol[data-spacing="spacious"] { padding: 7rem 0; } .twocol__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 4rem; align-items: center; } .twocol[data-direction="reverse"] .twocol__grid { direction: rtl; } .twocol[data-direction="reverse"] .twocol__slot { direction: ltr; } .twocol__slot { display: flex; flex-direction: column; gap: 1.5rem; } /* Hide eyebrow */ .tcb-text__eyebrow { display: none; } .tcb-text { display: flex; flex-direction: column; gap: 1.25rem; } .tcb-text__title { font-size: clamp(1.75rem, 4vw, 2.5rem); font-weight: 700; line-height: 1.2; margin: 0; } .tcb-text__desc { font-size: 1.1rem; line-height: 1.7; color: var(--color-text-secondary); margin: 0; } .twocol[data-bg="dark"] .tcb-text__desc { color: rgba(255,255,255,0.85); } .tcb-text__list { list-style: none; padding: 0; margin: 0.5rem 0; display: flex; flex-direction: column; gap: 0.75rem; } .tcb-text__list li { display: flex; align-items: center; gap: 0.75rem; font-size: 1rem; color: var(--color-text-secondary); } .twocol[data-bg="dark"] .tcb-text__list li { color: rgba(255,255,255,0.9); } .tcb-text__list li::before { content: '✓'; display: flex; align-items: center; justify-content: center; width: 20px; height: 20px; min-width: 20px; background: var(--color-primary); color: var(--color-white); border-radius: 50%; font-size: 0.7rem; font-weight: 700; } .tcb-text__cta { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.875rem 1.75rem; background: var(--color-primary); color: var(--color-white); font-size: 1rem; font-weight: 600; text-decoration: none; border-radius: var(--radius-md); transition: all 0.3s ease; margin-top: 0.5rem; align-self: flex-start; } .tcb-text__cta:hover { background: var(--color-primary-dark); transform: translateY(-2px); } /* Video */ .tcb-video { position: relative; border-radius: var(--radius-lg); overflow: hidden; box-shadow: var(--shadow-xl); aspect-ratio: 16/9; background: var(--color-bg-dark); } .tcb-video__player { position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.3s ease; } .tcb-video__player.is-playing { opacity: 1; z-index: 2; } .tcb-video__poster { position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-size: cover; background-position: center; cursor: pointer; display: flex; align-items: center; justify-content: center; } .tcb-video__poster::before { content: ''; position: absolute; inset: 0; background: rgba(0, 0, 0, 0.35); transition: background 0.3s ease; } .tcb-video__poster:hover::before { background: rgba(0, 0, 0, 0.25); } .tcb-video__poster.is-hidden { opacity: 0; pointer-events: none; } .tcb-video__play { position: relative; z-index: 1; width: 72px; height: 72px; background: var(--color-primary); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3); } .tcb-video__poster:hover .tcb-video__play { transform: scale(1.1); background: var(--color-primary-dark); } .tcb-video__play svg { width: 28px; height: 28px; fill: var(--color-white); margin-left: 4px; } @media (max-width: 768px) { .twocol__grid { grid-template-columns: 1fr; gap: 2.5rem; } .twocol[data-direction="reverse"] .twocol__grid { direction: ltr; } .twocol__slot--right { order: -1; } .tcb-video__play { width: 60px; height: 60px; } .tcb-video__play svg { width: 24px; height: 24px; } }