/* ============================================ Design System - Based on design.json Modern Elegant Psychology Landing Page ============================================ DOCUMENTATION: ============== This is the main CSS design system file. It defines all global styles, variables, and components for the psychology website. TYPOGRAPHY SYSTEM (Playfair Display + Lato): --------------------------------------------- - Display/Heading font: Playfair Display (elegant, sophisticated) - Body font: Lato (friendly, highly readable, perfect for healthcare) FONT OPTIMIZATION (7 weights total): ------------------------------------ - Playfair Display: 400, 500, 600, 700 (headings, hero, emphasis) - Lato: 400, 400i, 700 (body text, UI elements) COLOR SYSTEM: ------------- - Primary: #a8845a (warm gold/bronze - trust, elegance) - Background: #f7efe7 (warm cream - calm, welcoming) - Text: #3b2b2a (warm dark brown - readable, professional) SPACING SCALE: -------------- Uses 8px base with multipliers: 8, 16, 24, 32, 48, 64, 96 ============================================ */ /* Google Fonts loaded via in HTML for better performance */ :root { /* Color Palette from design.json */ --color-background: #f7efe7; --color-background-alt: #f3e4d5; --color-card: #ffffff; --color-white: #ffffff; --color-primary: #a8845a; --color-primary-dark: #8f6c44; --color-text: #3b2b2a; --color-text-muted: #6b5f5a; --color-border: #e0d2c3; --color-accent-soft: #f6e3cf; --color-badge: #f4ede4; --color-quote: #f6ece2; --color-input-bg: #fbf7f2; /* Button Colors */ --color-button-primary: #3d3330; --color-button-primary-hover: #2d2521; /* State Colors */ --color-success: #52B788; --color-success-dark: #2d6a4f; --color-success-light: #40916C; --color-error: #E76F51; --color-whatsapp: #25D366; /* Alert System */ --color-alert-success-bg: #f0fdf4; --color-alert-success-bg-alt: #dcfce7; --color-alert-success-border: #22c55e; --color-alert-success-text: #166534; --color-alert-error-bg: #fef2f2; --color-alert-error-bg-alt: #fee2e2; --color-alert-error-border: #ef4444; --color-alert-error-text: #991b1b; /* Typography - Playfair Display + Lato (elegant + accessible) */ --font-display: 'Playfair Display', Georgia, serif; --font-heading: 'Playfair Display', Georgia, serif; --font-body: 'Lato', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; /* Typography Scale - Optimized with clamp() */ --text-xs: 0.75rem; /* 12px - Small labels, captions */ --text-sm: 0.875rem; /* 14px - Buttons, small text */ --text-base: 1rem; /* 16px - Body text */ --text-lg: 1.125rem; /* 18px - Large body, subtitles */ --text-xl: 1.25rem; /* 20px - Large text */ --text-2xl: 1.5rem; /* 24px - Small headings */ --text-3xl: 1.875rem; /* 30px - Medium headings */ --text-4xl: 2.25rem; /* 36px - Large headings */ --text-5xl: 3rem; /* 48px - Extra large headings */ /* Responsive Heading Sizes - Optimized (reduced max values) */ --h1-size: clamp(2.5rem, 5vw, 3.5rem); /* 40px → 56px (was 72px) */ --h2-size: clamp(1.75rem, 4vw, 2.5rem); /* 28px → 40px (was 52px) */ --h3-size: clamp(1.5rem, 3vw, 2rem); /* 24px → 32px */ --h4-size: clamp(1.125rem, 2vw, 1.375rem); /* 18px → 22px */ /* Hero Sizes - Optimized */ --hero-title-size: clamp(2.5rem, 5vw, 3.75rem); /* 40px → 60px (was 72px) */ --hero-subtitle-size: clamp(1rem, 1.8vw, 1.125rem); /* 16px → 18px */ /* Section Sizes - Optimized */ --section-title-size: clamp(1.75rem, 4vw, 2.5rem); /* 28px → 40px (was 52px) */ --section-subtitle-size: 1.0625rem; /* 17px */ /* Line Heights - Standardized */ --line-height-tight: 1.15; /* Large headings, hero text */ --line-height-snug: 1.3; /* Medium headings, subheadings */ --line-height-normal: 1.5; /* UI elements, buttons, short text */ --line-height-relaxed: 1.75; /* Body text, paragraphs */ --line-height-loose: 1.8; /* Long-form reading content */ /* Border Radius */ --radius-soft: 12px; --radius-large: 24px; --radius-pill: 999px; /* Shadows */ --shadow-soft: 0 20px 45px rgba(0,0,0,0.06); --shadow-card: 0 10px 30px rgba(59, 43, 42, 0.08); --shadow-hover: 0 20px 50px rgba(59, 43, 42, 0.12); /* Spacing - 8px base system */ --spacing-xs: 8px; --spacing-sm: 16px; --spacing-md: 24px; --spacing-lg: 32px; --spacing-xl: 48px; --spacing-2xl: 64px; --spacing-3xl: 96px; /* Legacy/Alias variables for compatibility */ --spacing-section-y: var(--spacing-3xl); --spacing-container-x: 80px; --spacing-grid-gap: var(--spacing-lg); /* Content Max Widths - Consistent System ========================================= ESTRATÉGIA RESPONSIVA: DESKTOP (>1024px): - Max-width: 1100px - Layout: 2 colunas (grid) - Texto: alinhado à esquerda - Margens laterais: padding do container (clamp 1-5vw-3rem) IPAD PRO PORTRAIT (901-1024px): - Max-width: 850px (centrado) - Layout: 2 colunas (grid mantido) - Texto: alinhado à esquerda - Margens laterais: iguais (auto centering) TABLET PORTRAIT (601-900px): - Max-width: 680px (centrado) - Layout: 1 coluna (empilhado) - Texto: títulos centrados, parágrafos à esquerda - Margens laterais: iguais (auto centering) MOBILE (<600px): - Max-width: 100% (full-width) - Layout: 1 coluna - Texto: alinhado à esquerda (exceto footer centrado) - Margens laterais: padding do container ========================================= */ --content-max-desktop: 1100px; /* Desktop: conteúdo principal */ --content-max-ipad-pro: 850px; /* iPad Pro portrait (901-1024px) */ --content-max-tablet: 680px; /* Tablet portrait (601-900px) */ --content-max-mobile: 100%; /* Mobile (<600px) */ /* Transitions */ --transition-base: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); --transition-slow: all 0.5s cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================ Reset & Base Styles ============================================ */ *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; font-size: 16px; overflow-x: hidden; } body { font-family: var(--font-body); font-size: 1rem; line-height: var(--line-height-relaxed); color: var(--color-text); background-color: var(--color-background); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; font-weight: 400; letter-spacing: -0.01em; overflow-x: hidden; width: 100%; } /* ============================================ Typography - Refined Hierarchy ============================================ Font Stack (Playfair Display + Lato): - h1, h2, h3: Playfair Display - elegant, sophisticated - h4, h5, h6: Playfair Display - refined headings - body: Lato - friendly, accessible, perfect for healthcare ============================================ */ h1, h2 { font-family: var(--font-display); font-weight: 600; line-height: var(--line-height-snug); color: var(--color-text); margin-bottom: 1rem; letter-spacing: -0.01em; } h3 { font-family: var(--font-display); font-weight: 500; line-height: var(--line-height-snug); color: var(--color-text); margin-bottom: 1rem; letter-spacing: -0.01em; } h4, h5, h6 { font-family: var(--font-heading); font-weight: 500; line-height: var(--line-height-snug); color: var(--color-text); margin-bottom: 0.75rem; } h1 { font-size: var(--h1-size); font-weight: 400; line-height: var(--line-height-tight); } h2 { font-size: var(--h2-size); font-weight: 400; } h3 { font-size: var(--h3-size); font-weight: 500; } h4 { font-size: var(--h4-size); } p { margin-bottom: 1.25rem; color: var(--color-text); line-height: var(--line-height-relaxed); font-weight: 400; } /* Elegant text styles */ .text-elegant { font-family: var(--font-display); font-weight: 400; font-style: italic; } .text-accent { color: var(--color-primary); } .text-light { font-weight: 300; } a { color: var(--color-primary); text-decoration: none; transition: var(--transition-base); } a:hover { color: var(--color-primary-dark); } img { max-width: 100%; height: auto; display: block; } /* ============================================ Layout & Container ============================================ */ .container { max-width: 1280px; margin: 0 auto; padding: 0 clamp(1rem, 5vw, 3rem); } .container-wide { max-width: 1440px; margin: 0 auto; padding: 0 clamp(1rem, 5vw, 3rem); } .container-narrow { max-width: 900px; margin: 0 auto; padding: 0 clamp(1rem, 5vw, 3rem); } .section { padding: var(--spacing-section-y) 0; } .section-light { background-color: var(--color-background); } .section-alt { background-color: var(--color-background-alt); } .section-white { background-color: var(--color-card); } /* Text Alignment */ .text-center { text-align: center; } /* ============================================ Accessibility - Skip Link ============================================ */ .skip-link { position: absolute; top: -100px; left: 20px; z-index: 10000; padding: 1rem 1.5rem; background: var(--color-primary-dark); color: white; text-decoration: none; font-weight: 600; border-radius: var(--radius-soft); transition: top 0.3s ease; } .skip-link:focus { top: 20px; outline: 3px solid var(--color-primary); outline-offset: 2px; } /* ============================================ Focus & Accessibility States ============================================ */ *:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; border-radius: 4px; } a:focus-visible, button:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 3px; } /* Smooth transitions for all interactive elements */ a, button, input, textarea, select { transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } /* ============================================ Navigation Header ============================================ */ .navbar { position: fixed; top: 0; left: 0; right: 0; z-index: 1000; background: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; transition: all 0.5s ease; padding: 2rem 0; border-bottom: none; } .navbar.scrolled { background: rgba(247, 239, 231, 0.70); backdrop-filter: blur(10px) saturate(60%) brightness(100%); -webkit-backdrop-filter: blur(10px) saturate(60%) brightness(100%); box-shadow: 0 1px 10px rgba(59, 43, 42, 0.08); border-bottom: 1px solid rgba(168, 132, 90, 0.15); padding: 1rem 0; } .navbar .container { display: flex; justify-content: space-between; align-items: center; width: 100%; } .nav-brand { flex-shrink: 0; } .nav-brand h2 { font-family: var(--font-heading); font-size: var(--text-2xl); color: var(--color-primary); margin: 0; font-weight: 500; letter-spacing: -0.025em; } .nav-brand .subtitle { display: none; } .nav-menu { display: flex; list-style: none; align-items: center; gap: 2rem; margin-left: auto; } /* Hide sidebar-specific elements on desktop */ .nav-menu-header, .nav-menu-footer { display: none; } /* CTA button on desktop - show as regular button */ .nav-menu-cta { display: inline-block; background-color: var(--color-primary); color: var(--color-background); padding: 0.75rem 1.5rem; border-radius: 50px; font-weight: 600; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: none; letter-spacing: 0.02em; } .nav-menu-cta:hover { background-color: rgba(168, 132, 90, 0.9); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(168, 132, 90, 0.3); } .nav-menu-links { display: contents; } .nav-menu-item svg { display: none; } .nav-menu-item { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 500; color: rgba(59, 43, 42, 0.8); padding: 0.5rem 0; position: relative; transition: color 0.3s ease; letter-spacing: 0.01em; } .nav-menu-item:hover { color: var(--color-primary); } .nav-menu-item::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .nav-menu-item:hover::after { transform: scaleX(1); } .nav-link { font-family: var(--font-heading); font-size: var(--text-base); font-weight: 500; color: rgba(59, 43, 42, 0.8); padding: 0.5rem 0; position: relative; transition: color 0.3s ease; letter-spacing: 0.01em; } .nav-link:hover { color: var(--color-primary); } .nav-link::after { content: ''; position: absolute; bottom: 0; left: 0; width: 100%; height: 2px; background: var(--color-primary); transform: scaleX(0); transform-origin: left; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .nav-link:hover::after, .nav-link.active::after { transform: scaleX(1); } .nav-link.active { color: var(--color-primary); font-weight: 600; } /* CTA Button in Nav */ .btn-primary-nav { background-color: var(--color-primary); color: var(--color-background); border: none; padding: 0.625rem 1.5rem; border-radius: var(--radius-pill); font-weight: 500; font-size: 0.875rem; transition: all 0.3s ease; box-shadow: 0 10px 15px -3px rgba(196, 154, 108, 0.2), 0 4px 6px -2px rgba(196, 154, 108, 0.1); } .btn-primary-nav::after { display: none; } .btn-primary-nav:hover { background-color: rgba(196, 154, 108, 0.9); color: var(--color-background); } /* Mobile Menu Overlay - Background blur (Global for all mobile sizes) */ .nav-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(59, 43, 42, 0.3); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); opacity: 0; visibility: hidden; pointer-events: none; transition: all 0.4s ease; z-index: 999; } .nav-overlay.active { opacity: 1; visibility: visible; pointer-events: auto; } /* Mobile Navigation Toggle */ .nav-toggle { display: none; flex-direction: column; gap: 6px; background: none; border: none; cursor: pointer; padding: 0.5rem; } .nav-toggle span { display: block; width: 24px; height: 2px; background-color: var(--color-text); border-radius: 2px; transition: var(--transition-base); } /* Close button inside sidebar menu - Elegant circle design */ .nav-close { display: none; position: absolute; top: 1.5rem; right: 1.5rem; width: 44px; height: 44px; background: rgba(59, 43, 42, 0.08); border: none; border-radius: 50%; cursor: pointer; padding: 0; z-index: 1001; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 8px rgba(59, 43, 42, 0.08); } .nav-close:hover { background: rgba(168, 132, 90, 0.15); box-shadow: 0 4px 12px rgba(168, 132, 90, 0.2); transform: rotate(90deg); } .nav-close::before, .nav-close::after { content: ''; position: absolute; top: 50%; left: 50%; width: 20px; height: 2.5px; background-color: var(--color-text); border-radius: 3px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .nav-close::before { transform: translate(-50%, -50%) rotate(45deg); } .nav-close::after { transform: translate(-50%, -50%) rotate(-45deg); } .nav-close:hover::before, .nav-close:hover::after { background-color: var(--color-primary); } /* Menu Profile Photo (hidden on desktop) */ .nav-menu-profile { display: none; } .nav-menu-profile img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 3px solid rgba(168, 132, 90, 0.2); box-shadow: 0 4px 12px rgba(59, 43, 42, 0.1); } /* Social Media Links (hidden on desktop) */ .nav-menu-social { display: none; } .nav-menu-social-links { display: flex; gap: 1rem; justify-content: center; } .nav-menu-social-links a { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; background: rgba(168, 132, 90, 0.1); color: var(--color-text); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .nav-menu-social-links a:hover { background: var(--color-primary); color: var(--color-background); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(168, 132, 90, 0.3); } .nav-menu-social-links svg { width: 20px; height: 20px; } /* Additional Info (hidden on desktop) */ .nav-menu-info { display: none; } /* Quick Contact (hidden on desktop) */ .nav-menu-quick-contact { display: none; } .nav-menu-info p { font-size: 0.8125rem; color: rgba(59, 43, 42, 0.7); margin: 0.375rem 0; display: flex; align-items: center; gap: 0.5rem; } .nav-menu-info svg { width: 16px; height: 16px; flex-shrink: 0; opacity: 0.6; } /* ============================================ Hero Section ============================================ */ .hero { position: relative; min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: var(--spacing-3xl) 2rem var(--spacing-3xl) 2rem; /* Symmetric padding: 96px top/bottom */ overflow: hidden; } .hero-background { position: absolute; top: 0; left: 0; right: 0; bottom: 0; z-index: 0; } .hero-background img { width: 100%; height: 100%; object-fit: cover; object-position: center; } .hero-overlay { position: absolute; top: 0; left: 0; right: 0; bottom: 0; background: linear-gradient( 180deg, rgba(247, 239, 231, 0.85) 0%, rgba(247, 239, 231, 0.55) 50%, rgba(247, 239, 231, 0.7) 100% ); z-index: 1; } .hero-content { position: relative; z-index: 2; text-align: center; max-width: 950px; } .hero-kicker { display: inline-block; font-family: var(--font-body); font-size: 0.65rem; font-weight: 500; color: var(--color-text); text-transform: uppercase; letter-spacing: 1.5px; line-height: var(--line-height-normal); margin-bottom: 2rem; padding: 0.4rem 1.25rem; border: 1px solid rgba(59, 43, 42, 0.2); border-radius: var(--radius-pill); background: rgba(255, 255, 255, 0.6); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .hero-title { font-family: var(--font-display); font-size: var(--hero-title-size); font-weight: 400; margin-bottom: 1.5rem; line-height: var(--line-height-tight); color: var(--color-text); white-space: normal; word-wrap: break-word; overflow-wrap: break-word; text-shadow: 0 2px 20px rgba(247, 239, 231, 0.5); letter-spacing: -0.02em; } .hero-title .highlight { color: var(--color-primary); position: relative; font-style: italic; font-weight: 400; } .hero-subtitle { font-family: var(--font-body); font-size: var(--hero-subtitle-size); color: var(--color-text-muted); margin-bottom: 2.5rem; line-height: var(--line-height-loose); max-width: 550px; margin-left: auto; margin-right: auto; font-weight: 400; text-shadow: 0 1px 10px rgba(247, 239, 231, 0.5); } /* Hero Image Strip - Módulos Cápsula */ .hero-image-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: clamp(1rem, 3vw, 2rem); margin-top: var(--spacing-xl); /* Fixed margin: 48px - consistent spacing */ max-width: 900px; margin-left: auto; margin-right: auto; padding: 0 var(--spacing-sm); } .hero-image-card { position: relative; overflow: hidden; height: 450px; border-radius: 999px; background: linear-gradient(180deg, rgba(255, 255, 255, 0.95) 0%, rgba(247, 239, 231, 0.9) 100%); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 25px 50px rgba(59, 43, 42, 0.08), 0 10px 20px rgba(59, 43, 42, 0.05), inset 0 1px 0 rgba(255, 255, 255, 0.8); border: 1px solid rgba(255, 255, 255, 0.6); will-change: transform; transition: transform 0.1s ease-out; } .hero-image-card::before { content: ''; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(180deg, rgba(255, 255, 255, 0.4) 0%, transparent 50%); pointer-events: none; z-index: 2; } .hero-image-card::after { content: ''; position: absolute; inset: 4px; border-radius: inherit; box-shadow: inset 0 0 40px rgba(255, 255, 255, 0.5); pointer-events: none; z-index: 1; } .hero-image-card-left { transform: translateY(2.5rem); } .hero-image-card-center { box-shadow: 0 30px 60px rgba(59, 43, 42, 0.12), 0 15px 30px rgba(59, 43, 42, 0.08), inset 0 1px 0 rgba(255, 255, 255, 0.9); z-index: 10; } .hero-image-card-right { transform: translateY(2.5rem); } .hero-image-card img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s ease; } .hero-image-card:hover img { transform: scale(1.05); } .hero-image-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(196, 154, 108, 0.05) 0%, rgba(196, 154, 108, 0.15) 100%); mix-blend-mode: multiply; pointer-events: none; z-index: 1; } /* ============================================ Buttons ============================================ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; font-family: var(--font-body); font-weight: 500; text-align: center; padding: 1rem 2.25rem; border-radius: var(--radius-pill); border: none; cursor: pointer; transition: var(--transition-base); font-size: var(--text-sm); line-height: var(--line-height-normal); letter-spacing: 0.01em; } .btn-arrow { display: inline-block; transition: transform 0.3s ease; } .btn:hover .btn-arrow { transform: translateX(4px); } .btn-primary { background-color: #3d3330; color: white; box-shadow: 0 2px 8px rgba(61, 51, 48, 0.15); } .btn-primary:hover { background-color: #2d2521; color: white; box-shadow: 0 4px 12px rgba(61, 51, 48, 0.25); transform: translateY(-2px); } .btn-outline { background-color: transparent; color: var(--color-primary); border: 2px solid var(--color-primary); } .btn-outline:hover { background-color: var(--color-primary); color: white; } .btn-large { padding: 1rem 2.5rem; font-size: 1rem; font-weight: 400; } .btn-secondary { background-color: var(--color-primary); color: white; box-shadow: 0 2px 8px rgba(196, 154, 108, 0.2); border: none; } .btn-secondary:hover { background-color: var(--color-primary-dark); color: white; box-shadow: 0 4px 12px rgba(196, 154, 108, 0.3); transform: translateY(-2px); } /* CTA Wrapper & Badges */ .cta-wrapper { display: flex; flex-direction: column; align-items: center; gap: 1rem; margin-top: 2rem; } .cta-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.5rem 1rem; background: rgba(255, 255, 255, 0.95); color: var(--color-primary-dark); border-radius: var(--radius-pill); font-size: 0.875rem; font-weight: 500; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); animation: subtle-pulse 2s ease-in-out infinite; } @keyframes subtle-pulse { 0%, 100% { box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); } 50% { box-shadow: 0 4px 16px rgba(196, 154, 108, 0.2); } } .cta-group { display: flex; flex-direction: column; gap: 0.75rem; margin-top: 1.5rem; } .cta-subtext { font-size: 0.875rem; color: var(--color-text-muted); font-style: italic; } /* Hero CTA — subtle hover lift only */ .hero .btn-primary { transition: transform 0.3s ease, box-shadow 0.3s ease; } .hero .btn-primary:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15); } /* ============================================ Scroll Reveal Animations ============================================ */ @keyframes fadeInUp { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeInLeft { from { opacity: 0; transform: translateX(-50px); } to { opacity: 1; transform: translateX(0); } } @keyframes fadeInRight { from { opacity: 0; transform: translateX(50px); } to { opacity: 1; transform: translateX(0); } } @keyframes scaleIn { from { opacity: 0; transform: scale(0.85); } to { opacity: 1; transform: scale(1); } } /* Scroll Reveal - Elements start visible by default for no-JS fallback */ .scroll-reveal { opacity: 1; transform: none; } /* When JS is active, it adds .js-enabled to html */ html.js-enabled .scroll-reveal { opacity: 0; transform: translateY(30px); transition: opacity 0.6s ease, transform 0.6s ease; /* Use transition-delay instead of animation-delay for smoother staggering */ } html.js-enabled .scroll-reveal.reveal-up { transform: translateY(30px); } html.js-enabled .scroll-reveal.reveal-left { transform: translateX(-30px); } html.js-enabled .scroll-reveal.reveal-right { transform: translateX(30px); } html.js-enabled .scroll-reveal.reveal-scale { transform: scale(0.9); } /* Revealed state - simple transition, no animation */ html.js-enabled .scroll-reveal.revealed { opacity: 1; transform: translateY(0) translateX(0) scale(1); } /* Staggered delays using transition-delay (smoother than animation-delay) */ html.js-enabled .scroll-reveal.delay-1 { transition-delay: 0.1s; } html.js-enabled .scroll-reveal.delay-2 { transition-delay: 0.2s; } html.js-enabled .scroll-reveal.delay-3 { transition-delay: 0.3s; } html.js-enabled .scroll-reveal.delay-4 { transition-delay: 0.4s; } html.js-enabled .scroll-reveal.delay-5 { transition-delay: 0.5s; } /* ============================================ Section Headers ============================================ */ .section-kicker { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.15em; margin-bottom: var(--spacing-sm); } .section-title { font-family: var(--font-display); font-size: var(--section-title-size); font-weight: 400; margin-bottom: var(--spacing-md); letter-spacing: -0.02em; line-height: 1.15; } .section-title .highlight { color: var(--color-primary); font-style: italic; } .section-subtitle { font-family: var(--font-body); font-size: var(--section-subtitle-size); color: var(--color-text-muted); margin-bottom: var(--spacing-xl); max-width: 600px; line-height: 1.8; font-weight: 400; padding: 0 var(--spacing-sm); } .section-subtitle.center { margin-left: auto; margin-right: auto; } @media (min-width: 768px) { .section-subtitle { padding: 0; } } /* ============================================ About / Profile Section - Modern 3-Column Layout ============================================ */ /* New Section Styling */ .about-section-new { padding: var(--spacing-2xl) 0; background: var(--color-background); } /* Emotional Quote Callout */ .about-quote { max-width: 700px; margin: var(--spacing-lg) auto var(--spacing-xl); text-align: center; position: relative; padding: var(--spacing-md) var(--spacing-md); background: linear-gradient(135deg, rgba(196, 154, 108, 0.05) 0%, rgba(196, 154, 108, 0.02) 100%); border-left: 3px solid var(--color-primary); border-radius: 12px; } @media (min-width: 768px) { .about-quote { padding: var(--spacing-lg) var(--spacing-xl); } } .about-quote .quote-icon { color: var(--color-primary); opacity: 0.3; margin-bottom: var(--spacing-sm); } .about-quote .quote-text { font-family: var(--font-display); font-size: 1.125rem; line-height: 1.8; color: var(--color-text); font-style: italic; margin: 0; font-weight: 400; } /* ============================================ ABOUT SECTION - Carousel with Minimal Card Layout ============================================ */ /* NEW About Layout - Similar to Services Section */ .about-layout { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-xl); align-items: center; max-width: var(--content-max-desktop); margin-left: auto; margin-right: auto; } .about-intro { padding-right: var(--spacing-lg); } .about-intro .section-kicker { text-align: left; margin-bottom: var(--spacing-xs); color: var(--color-accent); font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; text-transform: uppercase; letter-spacing: 2.5px; } .about-intro .section-title { text-align: left; font-family: var(--font-display); font-size: var(--section-title-size); font-weight: 400; margin-bottom: var(--spacing-md); color: var(--color-primary-dark); letter-spacing: -0.02em; line-height: 1.15; } .about-intro p { font-family: var(--font-body); color: var(--color-text-muted); line-height: 1.8; margin-bottom: var(--spacing-sm); font-size: 1.0625rem; font-weight: 400; } .about-intro p:last-of-type { margin-bottom: var(--spacing-lg); } /* Formation List - Enhanced style */ .about-formation { margin: var(--spacing-lg) 0; padding: var(--spacing-md); background: linear-gradient(135deg, rgba(196, 154, 108, 0.08), rgba(196, 154, 108, 0.03)); border-radius: var(--radius-large); border-left: 3px solid var(--color-accent); } .about-formation-title { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 500; color: var(--color-primary-dark); margin-bottom: var(--spacing-md); display: flex; align-items: center; gap: 0.625rem; letter-spacing: -0.01em; } .about-formation-title::before { content: ''; width: 20px; height: 2px; background: var(--color-accent); } .about-formation-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--spacing-sm); } .about-formation-item { display: flex; align-items: flex-start; gap: var(--spacing-sm); padding: var(--spacing-sm) 0; border-bottom: 1px solid rgba(224, 210, 195, 0.4); transition: all 0.2s ease; } .about-formation-item:hover { padding-left: 0.5rem; background: rgba(196, 154, 108, 0.05); border-radius: 4px; } .about-formation-item:last-child { border-bottom: none; } .about-formation-year { font-family: var(--font-body); font-size: 0.75rem; font-weight: 600; color: var(--color-accent); min-width: 48px; padding: 0.25rem 0.5rem; background: rgba(196, 154, 108, 0.15); border-radius: 4px; text-align: center; letter-spacing: 0.02em; } .about-formation-text { font-family: var(--font-body); font-size: 1rem; /* Improved readability: 16px instead of 15px */ color: var(--color-text); line-height: 1.5; } .about-formation-text strong { display: block; font-weight: 500; color: var(--color-primary-dark); font-size: 0.9375rem; margin-bottom: 0.125rem; } .about-formation-text span { font-family: var(--font-body); color: var(--color-text-muted); font-size: 0.8125rem; font-weight: 400; } /* CTA in About */ .about-cta { margin-top: var(--spacing-md); } /* Photo Side */ .about-photo-side { display: flex; justify-content: center; } .about-photo-container { position: relative; width: 100%; max-width: 450px; } .about-photo-container img { width: 100%; height: auto; border-radius: 20px; object-fit: cover; box-shadow: 0 8px 30px rgba(59, 43, 42, 0.15); } /* Social overlay on photo */ .about-social-photo { position: absolute; bottom: 20px; left: 20px; display: flex; gap: 0.5rem; } .about-social-photo a { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 12px; background: rgba(255, 255, 255, 0.9); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: var(--color-primary); border: 1px solid rgba(255, 255, 255, 0.3); transition: all 0.3s ease; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1); } .about-social-photo a:hover { background: var(--color-accent); color: white; transform: translateY(-3px); } /* OLD About Layout - Keeping for backwards compatibility */ .about-minimal-grid { display: grid; grid-template-columns: 420px 1fr; gap: 2.5rem; align-items: start; max-width: 100%; } /* Content Column - Contains Card + Formation */ .about-content-column { display: flex; flex-direction: column; gap: 1.5rem; } /* Content Carousel Wrapper - Only content cards slide */ .about-content-carousel-wrapper { position: relative; overflow: hidden; } .about-content-carousel-track { display: flex; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); } .about-content-slide { min-width: 100%; flex-shrink: 0; box-sizing: border-box; } /* Remove opacity transition - slides are hidden by overflow */ /* Photo Card with Overlay */ .about-photo-card { position: sticky; top: 100px; } .about-photo-wrapper { position: relative; border-radius: 20px; overflow: hidden; background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%); box-shadow: 0 8px 30px rgba(59, 43, 42, 0.12); aspect-ratio: 3/4; } .about-photo-wrapper img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .about-photo-wrapper:hover img { transform: scale(1.02); } /* Photo Overlay with Social Links */ .about-photo-overlay { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.5rem; background: linear-gradient(180deg, transparent 0%, rgba(35, 25, 20, 0.6) 40%, rgba(35, 25, 20, 0.9) 100% ); display: flex; flex-direction: column; align-items: flex-start; gap: 0.875rem; } .about-name-badge { display: inline-block; font-family: var(--font-body); font-size: 0.8125rem; font-weight: 500; padding: 0.4rem 0.875rem; background: rgba(196, 154, 108, 0.9); color: #fff; border-radius: 20px; backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .about-social-overlay { display: flex; gap: 0.625rem; } .social-btn-overlay { display: flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 10px; background: rgba(255, 255, 255, 0.15); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #fff; border: 1px solid rgba(255, 255, 255, 0.25); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .social-btn-overlay:hover { background: rgba(255, 255, 255, 0.25); transform: translateY(-2px); color: #fff; } .about-photo-frame { position: relative; text-align: center; } .about-photo-frame img { width: 300px; height: 400px; object-fit: cover; object-position: center top; border-radius: 20px 20px 4px 4px; mask-image: radial-gradient( ellipse 85% 80% at center, black 60%, transparent 100% ); -webkit-mask-image: radial-gradient( ellipse 85% 80% at center, black 60%, transparent 100% ); } /* Social Capsule - positioned at bottom of photo */ .about-social-capsule { position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%); display: flex; align-items: center; gap: 0.5rem; background: rgba(255, 255, 255, 0.95); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 0.5rem 1rem; border-radius: 50px; box-shadow: 0 4px 20px rgba(59, 43, 42, 0.15); z-index: 10; } .about-social-capsule a { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; color: var(--color-primary); border-radius: 50%; transition: var(--transition-base); } .about-social-capsule a:hover { background: var(--color-primary); color: white; transform: scale(1.1); } /* Content Card - Right Side */ .about-content-card { background: rgba(255, 255, 255, 0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); padding: 2.5rem 2.75rem; border-radius: 20px; border: 1px solid rgba(224, 210, 195, 0.6); box-shadow: 0 4px 24px rgba(59, 43, 42, 0.06); } .about-content-name { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 600; color: var(--color-text); margin: 0 0 1.25rem 0; letter-spacing: -0.02em; } .about-content-text { margin-bottom: 1.75rem; } .about-content-text p { font-family: var(--font-body); font-size: 1rem; line-height: 1.8; color: var(--color-text); margin-bottom: 1.125rem; } .about-content-text p:last-child { margin-bottom: 0; } /* Social Links - Inline Buttons */ .about-social-inline { display: flex; gap: 0.875rem; margin-bottom: 2rem; } .social-btn { display: flex; align-items: center; justify-content: center; width: 42px; height: 42px; border-radius: 10px; background: transparent; border: 1.5px solid var(--color-border); color: var(--color-text); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .social-btn:hover { transform: translateY(-2px); border-color: var(--color-primary); color: var(--color-primary); background: rgba(196, 154, 108, 0.08); } /* Divider */ .about-divider { width: 50px; height: 2px; background: linear-gradient(90deg, var(--color-primary), transparent); margin: 1.25rem 0; border-radius: 2px; } /* Why Section */ .about-why-section { margin-top: 1.5rem; padding-top: 0; } .about-why-title { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; color: var(--color-text); margin: 0 0 0.625rem 0; letter-spacing: -0.01em; } .about-why-text { font-family: var(--font-body); font-size: 1rem; line-height: 1.75; color: var(--color-text-muted); margin: 0; } /* ============================================ FORMATION - Minimal Horizontal Style (Below Card in Content Column) ============================================ */ .formation-minimal { display: flex; flex-wrap: wrap; justify-content: flex-start; align-items: center; gap: 0.5rem 0.875rem; padding-left: 0.25rem; } .formation-dot { display: inline-flex; align-items: baseline; gap: 0.4rem; } .formation-dot-year { font-family: var(--font-body); font-size: 0.875rem; font-weight: 600; color: var(--color-primary); } .formation-dot-title { font-family: var(--font-body); font-size: 0.9375rem; color: var(--color-text-muted); } .formation-separator { color: var(--color-border); font-size: 0.625rem; margin: 0 0.125rem; } @media (max-width: 768px) { .formation-minimal { flex-direction: column; align-items: flex-start; gap: 0.5rem; } .formation-separator { display: none; } } /* ============================================ JOURNEY STEPS - INSIDE CARD (Compact Version) - LEGACY ============================================ */ .journey-card-section { margin-top: 1.75rem; padding-top: 1.5rem; border-top: 1px solid var(--color-border); } .journey-card-title { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; color: var(--color-text); margin: 0 0 1.25rem 0; } .journey-card-steps { display: flex; flex-direction: column; gap: 1rem; } .journey-card-item { display: flex; align-items: flex-start; gap: 1rem; } .journey-card-icon { width: 40px; height: 40px; min-width: 40px; border-radius: 50%; background: var(--color-text); display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; } .journey-card-icon svg { width: 18px; height: 18px; stroke: white; stroke-width: 2; } .journey-card-item:hover .journey-card-icon { background: var(--color-primary); transform: scale(1.05); } .journey-card-content { flex: 1; padding-top: 0.125rem; } .journey-card-year { font-family: var(--font-body); font-size: 0.75rem; font-weight: 500; color: var(--color-primary); display: block; margin-bottom: 0.125rem; } .journey-card-item-title { font-family: var(--font-heading); font-size: 0.9375rem; font-weight: 600; color: var(--color-text); margin: 0 0 0.125rem 0; line-height: 1.3; } .journey-card-institution { font-family: var(--font-body); font-size: 0.8125rem; color: var(--color-text-muted); margin: 0 0 0.25rem 0; font-style: italic; } .journey-card-item-desc { font-family: var(--font-body); font-size: 0.75rem; line-height: 1.5; color: var(--color-text-muted); margin: 0; opacity: 0.8; } /* ============================================ JOURNEY STEPS TIMELINE (Full Width - Keep for future) ============================================ */ .journey-section { margin-top: 3.5rem; padding-top: 2.5rem; border-top: 1px solid var(--color-border); } .journey-title { font-family: var(--font-heading); font-size: 1.75rem; font-weight: 500; color: var(--color-text); text-align: center; margin: 0 0 3rem 0; } .journey-timeline { position: relative; padding: 1rem 0; } .journey-line { position: absolute; top: 50%; left: 5%; right: 5%; height: 2px; background: var(--color-border); transform: translateY(-50%); z-index: 0; } .journey-steps { display: flex; justify-content: space-between; position: relative; z-index: 1; } .journey-step { display: flex; flex-direction: column; align-items: center; text-align: center; flex: 1; max-width: 180px; padding: 0 0.5rem; } .journey-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--color-text); display: flex; align-items: center; justify-content: center; margin-bottom: 1rem; transition: all 0.3s ease; box-shadow: 0 4px 12px rgba(59, 43, 42, 0.15); } .journey-icon svg { width: 24px; height: 24px; stroke: white; stroke-width: 2; } .journey-step:hover .journey-icon { transform: scale(1.1); background: var(--color-primary); } .journey-step-title { font-family: var(--font-heading); font-size: 1rem; font-weight: 600; color: var(--color-text); margin: 0 0 0.5rem 0; } .journey-step-desc { font-family: var(--font-body); font-size: 0.875rem; line-height: 1.6; color: var(--color-text-muted); margin: 0; } /* ============================================ CAROUSEL NAVIGATION ============================================ */ /* Controls Container - Below content carousel, aligned to second column */ .about-carousel-controls { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 1.25rem; grid-column: 2; } /* Navigation Arrows */ .about-carousel-nav { display: flex; gap: 0.75rem; } .about-carousel-arrow { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 50%; background: white; border: 1.5px solid var(--color-border); color: var(--color-text); cursor: pointer; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 2px 6px rgba(59, 43, 42, 0.06); } .about-carousel-arrow:hover { border-color: var(--color-primary); background: var(--color-primary); color: white; transform: translateY(-2px); box-shadow: 0 4px 10px rgba(196, 154, 108, 0.2); } .about-carousel-arrow:active { transform: translateY(0); } /* Dots Indicator */ .about-carousel-dots { display: flex; gap: 0.5rem; } .carousel-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--color-border); border: none; cursor: pointer; transition: all 0.3s ease; padding: 0; } .carousel-dot:hover { background: var(--color-primary); opacity: 0.7; } .carousel-dot.active { background: var(--color-primary); width: 24px; border-radius: 4px; } /* ============================================ CURRICULUM SECTION (Slide 2) ============================================ */ .curriculum-section { margin-bottom: 1.5rem; } .curriculum-section:last-of-type { margin-bottom: 1rem; } .curriculum-title { font-family: var(--font-heading); font-size: 0.75rem; font-weight: 600; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.05em; margin: 0 0 0.875rem 0; } .curriculum-list { display: flex; flex-direction: column; gap: 1rem; } .curriculum-item { display: flex; gap: 0.875rem; align-items: start; } .curriculum-year { font-family: var(--font-heading); font-size: 0.75rem; font-weight: 600; color: var(--color-primary); background: linear-gradient(135deg, rgba(196, 154, 108, 0.1) 0%, rgba(196, 154, 108, 0.05) 100%); padding: 0.3rem 0.625rem; border-radius: 5px; white-space: nowrap; min-width: 70px; text-align: center; } .curriculum-details h4 { font-family: var(--font-heading); font-size: 0.9375rem; font-weight: 600; color: var(--color-text); margin: 0 0 0.2rem 0; line-height: 1.4; } .curriculum-details p { font-family: var(--font-body); font-size: 0.8125rem; color: var(--color-text-muted); margin: 0; line-height: 1.5; } .curriculum-badge { display: flex; align-items: center; gap: 0.625rem; padding: 0.875rem 1rem; background: linear-gradient(135deg, rgba(196, 154, 108, 0.1) 0%, rgba(196, 154, 108, 0.05) 100%); border: 2px solid var(--color-primary); border-radius: 10px; margin-top: auto; } .curriculum-badge svg { color: var(--color-primary); flex-shrink: 0; width: 18px; height: 18px; } .curriculum-badge span { font-family: var(--font-heading); font-size: 0.875rem; font-weight: 600; color: var(--color-text); } /* ============================================ MINIMAL TIMELINE - Horizontal Flow ============================================ */ .about-minimal-timeline { margin-top: 4rem; padding: 3rem 0 1rem; } .timeline-items { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; flex-wrap: nowrap; overflow-x: auto; padding: 1rem 0; } .timeline-item { flex: 1; min-width: 200px; text-align: center; padding: 1.5rem 1rem; background: white; border-radius: 12px; border: 1px solid var(--color-border); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .timeline-item:hover { border-color: var(--color-primary); box-shadow: 0 4px 16px rgba(196, 154, 108, 0.1); transform: translateY(-2px); } .timeline-year { display: block; font-family: var(--font-heading); font-size: 0.8125rem; font-weight: 600; color: var(--color-primary); text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 0.75rem; } .timeline-title { font-family: var(--font-heading); font-size: 1rem; font-weight: 600; color: var(--color-text); margin: 0 0 0.5rem 0; line-height: 1.4; letter-spacing: -0.01em; transition: color 0.3s ease; } .timeline-location { font-family: var(--font-body); font-size: 0.8125rem; color: var(--color-text-muted); line-height: 1.5; margin: 0; } .timeline-item:hover .timeline-title { color: var(--color-primary); } /* Current Timeline Item */ .timeline-item-current { background: linear-gradient(135deg, rgba(196, 154, 108, 0.1) 0%, rgba(196, 154, 108, 0.05) 100%); border-color: var(--color-primary); position: relative; } .timeline-item-current::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark)); border-radius: 12px 12px 0 0; } /* Timeline Connectors - Arrows */ .timeline-connector { font-size: 1.5rem; color: var(--color-primary); opacity: 0.3; flex-shrink: 0; user-select: none; } /* Credentials Bar - Capsule Style */ .about-stats-bar { padding: var(--spacing-md) 0 var(--spacing-xl) 0; margin-top: var(--spacing-md); } .about-stats-bar .container { max-width: 1000px; } .credentials-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-2xl); background: linear-gradient(135deg, #ffffff 0%, #fdfbf8 100%); padding: var(--spacing-2xl) var(--spacing-3xl); border-radius: 100px; box-shadow: 0 8px 32px rgba(59, 43, 42, 0.06); border: 1px solid rgba(224, 210, 195, 0.3); } .credentials-grid:hover { box-shadow: 0 12px 40px rgba(59, 43, 42, 0.08); } .credential-item { display: flex; align-items: center; gap: 1rem; position: relative; padding: 0 1rem; cursor: default; transition: transform 0.2s ease; } /* Simplified hover - removed excessive scale */ .credential-item:hover { transform: translateY(-1px); } .credential-item:not(:last-child)::after { content: ''; position: absolute; right: -1rem; top: 50%; transform: translateY(-50%); width: 1px; height: 50px; background: var(--color-border); } .credential-item svg { flex-shrink: 0; color: var(--color-primary); filter: drop-shadow(0 2px 4px rgba(196, 154, 108, 0.2)); transition: all 0.3s ease; } /* Simplified hover - removed excessive animation */ .credential-item:hover svg { color: var(--color-primary-dark); filter: drop-shadow(0 3px 6px rgba(196, 154, 108, 0.25)); } .credential-item span { font-family: var(--font-body); font-size: 0.875rem; color: var(--color-text); font-weight: 500; line-height: 1.4; text-align: left; transition: color 0.3s ease; } .credential-item:hover span { color: var(--color-primary-dark); } /* Staggered scroll reveal animation */ .credential-item.scroll-reveal { opacity: 0; transform: translateY(20px); transition: opacity 0.6s ease, transform 0.6s ease; } .credential-item.scroll-reveal.reveal-up { opacity: 1; transform: translateY(0); } .credential-item.scroll-reveal.delay-1 { transition-delay: 0.2s; } .credential-item.scroll-reveal.delay-2 { transition-delay: 0.4s; } /* Responsive Design for About Section */ @media (max-width: 1024px) { .about-three-columns { grid-template-columns: 1fr; gap: 2.5rem; text-align: center; } .about-col-left { padding-top: 0; } .about-photo-frame img { width: 250px; height: 320px; } .education-roadmap::before, .education-roadmap::after { display: none; } .education-items-horizontal { grid-template-columns: repeat(2, 1fr); gap: 2rem; } .education-item-horizontal::before { display: none; } } @media (max-width: 600px) { .about-photo-frame img { width: 220px; height: 280px; } .education-timeline-title { font-size: 1.25rem; margin-bottom: 2rem; } .education-items-horizontal { grid-template-columns: 1fr; gap: 1.5rem; } .education-dot-horizontal { width: 40px; height: 40px; } .education-dot-horizontal::before { font-size: 1rem; } } /* ============================================ Feature Grid (Specialties) ============================================ */ .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-lg); /* Improved spacing: 32px instead of 24px */ margin-top: var(--spacing-xl); max-width: 1100px; margin-left: auto; margin-right: auto; } /* Tablet Portrait - Feature Grid */ @media (max-width: 900px) { .feature-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-md); max-width: 680px; padding: 0 var(--spacing-sm); } } @media (max-width: 600px) { .feature-grid { grid-template-columns: 1fr; gap: var(--spacing-md); max-width: 100%; padding: 0; } } .feature-card { background: var(--color-card); padding: var(--spacing-lg); border-radius: var(--radius-large); box-shadow: var(--shadow-card); transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); border: 1px solid var(--color-border); display: flex; flex-direction: column; align-items: flex-start; text-align: left; cursor: pointer; position: relative; overflow: hidden; } .feature-card::before { content: ''; position: absolute; top: 0; left: 0; width: 100%; height: 3px; background: linear-gradient(90deg, var(--color-primary), var(--color-primary-dark)); transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; } .feature-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); border-color: var(--color-primary); } .feature-card:hover::before { transform: scaleX(1); } /* Stagger animation for feature cards */ html.js-enabled .feature-card.scroll-reveal.revealed { animation-name: staggerFadeIn; } .feature-card:hover .feature-icon { transform: scale(1.1) rotate(5deg); transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .feature-card:focus-within { outline: 2px solid var(--color-primary); outline-offset: 2px; } .feature-icon { width: 44px; height: 44px; color: var(--color-primary); margin-bottom: var(--spacing-sm); flex-shrink: 0; transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .feature-tag { display: inline-block; background: var(--color-badge); color: var(--color-primary-dark); font-family: var(--font-body); font-size: var(--text-sm); font-weight: 500; padding: 0.25rem 0.65rem; border-radius: var(--radius-pill); margin-bottom: var(--spacing-xs); text-transform: uppercase; letter-spacing: 1px; text-align: left; } .feature-title { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; margin-bottom: 12px; /* Improved spacing between title and description */ text-align: left; width: 100%; letter-spacing: -0.01em; } .feature-description { font-family: var(--font-body); color: var(--color-text-muted); font-size: 0.875rem; line-height: 1.7; text-align: left; width: 100%; font-weight: 400; } /* ============================================ Service List Section ============================================ */ .services-layout { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--spacing-xl); align-items: start; max-width: var(--content-max-desktop); margin-left: auto; margin-right: auto; } .services-intro { position: sticky; top: 120px; } .services-intro .section-kicker { text-align: left; margin-bottom: var(--spacing-xs); } .services-intro .section-title { text-align: left; font-size: clamp(1.75rem, 3vw, 2.5rem); margin-bottom: var(--spacing-md); } .services-intro p { color: var(--color-text-muted); line-height: 1.7; margin-bottom: var(--spacing-lg); } /* Availability Indicator */ .availability-indicator { display: inline-flex; align-items: center; gap: 0.625rem; padding: 0.75rem 1.25rem; background: linear-gradient(135deg, rgba(82, 183, 136, 0.1), rgba(82, 183, 136, 0.05)); border: 1px solid rgba(82, 183, 136, 0.3); border-radius: var(--radius-pill); margin-bottom: 1.5rem; } .status-dot { width: 10px; height: 10px; background: #52B788; border-radius: 50%; animation: pulse-dot 2s ease-in-out infinite; box-shadow: 0 0 0 0 rgba(82, 183, 136, 0.7); } @keyframes pulse-dot { 0%, 100% { box-shadow: 0 0 0 0 rgba(82, 183, 136, 0.7); } 50% { box-shadow: 0 0 0 8px rgba(82, 183, 136, 0); } } .status-text { font-size: 0.875rem; font-weight: 600; color: #2d6a4f; } .services-intro .link-underline { display: inline-block; color: var(--color-text); font-weight: 500; text-decoration: none; border-bottom: 1px solid var(--color-text); padding-bottom: 2px; transition: var(--transition-base); } .services-intro .link-underline:hover { color: var(--color-primary); border-color: var(--color-primary); } .service-list { display: flex; flex-direction: column; gap: var(--spacing-md); } .service-item { background: var(--color-card); padding: var(--spacing-lg) var(--spacing-xl); border-radius: var(--radius-large); box-shadow: var(--shadow-card); display: flex; align-items: center; gap: var(--spacing-lg); transition: var(--transition-base); } .service-item:hover { box-shadow: var(--shadow-hover); transform: translateY(-2px); } .service-icon-wrapper { width: 56px; height: 56px; background: var(--color-background-alt); border-radius: var(--radius-soft); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .service-icon { width: 28px; height: 28px; color: var(--color-text); } .service-info { flex: 1; } .service-info h3 { font-family: var(--font-display); font-size: 1.25rem; font-weight: 500; margin-bottom: 0.25rem; font-style: italic; letter-spacing: -0.01em; } .service-info p { font-family: var(--font-body); color: var(--color-text-muted); margin-bottom: 0; font-size: 0.875rem; font-weight: 400; } .service-meta { text-align: right; flex-shrink: 0; } .service-price { font-family: var(--font-display); font-size: 1.125rem; font-weight: 500; color: var(--color-text); } .service-duration { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-muted); text-transform: uppercase; letter-spacing: 1px; font-weight: 500; } .service-arrow { width: 40px; height: 40px; border: 1px solid var(--color-border); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: var(--transition-base); color: var(--color-text-muted); } .service-arrow svg { transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1); } .service-item:hover .service-arrow { background: var(--color-primary); border-color: var(--color-primary); color: white; transform: rotate(45deg); } .service-item:hover .service-arrow svg { transform: rotate(-45deg); } /* ============================================ Testimonials Carousel ============================================ */ .testimonials-carousel-wrapper { max-width: 1200px; margin: var(--spacing-xl) auto 0; padding: 0 clamp(1rem, 5vw, 3rem); overflow: hidden; position: relative; } /* Fade/blur effect on sides */ .testimonials-carousel-wrapper::before, .testimonials-carousel-wrapper::after { content: ''; position: absolute; top: 0; bottom: 0; width: 80px; z-index: 2; pointer-events: none; } .testimonials-carousel-wrapper::before { left: 0; background: linear-gradient(to right, var(--color-background) 0%, var(--color-background) 20%, rgba(247, 239, 231, 0) 100%); } .testimonials-carousel-wrapper::after { right: 0; background: linear-gradient(to left, var(--color-background) 0%, var(--color-background) 20%, rgba(247, 239, 231, 0) 100%); } .testimonials-carousel { position: relative; overflow: hidden; padding: var(--spacing-sm) 0; } .testimonials-track { display: flex; gap: var(--spacing-lg); animation: scrollTestimonials 30s linear infinite; width: max-content; } .testimonials-carousel:hover .testimonials-track { animation-play-state: paused; } @keyframes scrollTestimonials { 0% { transform: translateX(0); } 100% { transform: translateX(-50%); } } .testimonial-card-new { flex: 0 0 380px; /* Simplified sizing: Desktop 380px */ width: 380px; background: white; padding: var(--spacing-lg); border-radius: var(--radius-large); box-shadow: var(--shadow-card); display: flex; flex-direction: column; transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1); position: relative; overflow: hidden; } .testimonial-card-new::after { content: ''; position: absolute; top: 0; left: -100%; width: 100%; height: 100%; background: linear-gradient(90deg, transparent, rgba(196, 154, 108, 0.05), transparent); transition: left 0.6s ease; } .testimonial-card-new:hover { transform: translateY(-2px); box-shadow: 0 8px 24px rgba(59, 43, 42, 0.1); } .testimonial-card-new:hover::after { left: 100%; } /* Testimonial card hover — subtle lift */ .testimonials-carousel .testimonial-card-new { transition: transform 0.3s ease, box-shadow 0.3s ease; } .testimonials-carousel .testimonial-card-new:hover { transform: translateY(-3px); box-shadow: 0 6px 16px rgba(0, 0, 0, 0.08); } .testimonial-quote-icon { width: 40px; height: 40px; background: rgba(79, 107, 87, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: var(--spacing-sm); color: var(--color-accent); } .testimonial-quote-icon svg { width: 24px; height: 24px; } .testimonial-stars { display: flex; gap: 2px; margin-bottom: var(--spacing-sm); color: var(--color-accent); font-size: 0.95rem; } .testimonial-text { font-family: var(--font-display); font-size: 0.95rem; line-height: 1.7; color: var(--color-text); font-style: italic; font-weight: 400; flex: 1; margin-bottom: var(--spacing-md); } .testimonial-author-info { display: flex; align-items: center; gap: var(--spacing-sm); margin-top: auto; padding-top: var(--spacing-sm); border-top: 1px solid var(--color-border); } .testimonial-avatar { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; flex-shrink: 0; border: 2px solid var(--color-border); } .testimonial-avatar img { width: 100%; height: 100%; object-fit: cover; } .testimonial-author-details { display: flex; flex-direction: column; } .testimonial-name { font-family: var(--font-body); font-weight: 600; color: var(--color-text); font-size: var(--text-sm); } .testimonial-role { font-family: var(--font-body); font-size: var(--text-sm); color: var(--color-text-muted); font-weight: 400; } /* Hide indicators for continuous scroll */ .carousel-indicators { display: none; border: none; padding: 0; cursor: pointer; transition: all 0.3s ease; } .carousel-indicator.active { background: var(--color-primary); width: 24px; border-radius: 4px; } .carousel-indicator:hover { background: var(--color-primary-light); } /* ============================================ Blog/Articles Grid ============================================ */ .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: var(--spacing-lg); margin-top: var(--spacing-xl); max-width: var(--content-max-desktop); margin-left: auto; margin-right: auto; } /* Tablet - Blog Grid centered */ @media (min-width: 601px) and (max-width: 900px) { .blog-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Consistent with desktop */ max-width: var(--content-max-tablet); gap: var(--spacing-lg); /* 32px consistent */ } } .blog-card { background: var(--color-card); border-radius: var(--radius-large); overflow: hidden; box-shadow: var(--shadow-card); transition: var(--transition-base); min-height: 420px; /* Consistent card heights */ display: flex; flex-direction: column; } .blog-card:hover { box-shadow: var(--shadow-hover); transform: translateY(-4px); } .blog-image { width: 100%; height: 200px; background: var(--color-accent-soft); position: relative; overflow: hidden; } .blog-image img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .blog-content { padding: var(--spacing-lg); flex: 1; /* Allow content to grow and push elements */ display: flex; flex-direction: column; } .blog-category { display: inline-block; background: var(--color-badge); color: var(--color-primary-dark); font-size: var(--text-sm); font-weight: 600; padding: 0.25rem 0.75rem; border-radius: var(--radius-pill); margin-bottom: var(--spacing-sm); text-transform: uppercase; letter-spacing: 0.5px; } .blog-title { font-size: 1.25rem; margin-bottom: var(--spacing-sm); } .blog-excerpt { color: var(--color-text-muted); font-size: 0.9375rem; line-height: 1.7; margin-bottom: 0; display: -webkit-box; -webkit-line-clamp: 3; /* Limit to 3 lines */ -webkit-box-orient: vertical; overflow: hidden; } .blog-link { display: inline-block; margin-top: var(--spacing-sm); font-weight: 600; color: var(--color-primary); font-size: 0.9375rem; transition: var(--transition-base); } .blog-link:hover { color: var(--color-primary-dark); transform: translateX(4px); } .view-all-link { display: inline-block; margin-top: var(--spacing-xl); font-weight: 600; color: var(--color-primary); font-size: 1.125rem; } .view-all-link:hover { color: var(--color-primary-dark); text-decoration: underline; } /* ============================================ Process/Steps Section ============================================ */ .process-steps { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: var(--spacing-xl); margin-top: var(--spacing-xl); } .process-step { text-align: center; position: relative; } .step-number { width: 80px; height: 80px; margin: 0 auto var(--spacing-md); background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark)); color: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 2rem; font-weight: 700; font-family: var(--font-heading); box-shadow: var(--shadow-card); } .step-title { font-size: 1.25rem; margin-bottom: var(--spacing-sm); } .step-description { color: var(--color-text-muted); line-height: 1.7; } /* ============================================ Contact Section ============================================ */ /* Contact Layout - Two Column */ .contact-layout { display: grid; grid-template-columns: 1fr 1.2fr; gap: var(--spacing-2xl); align-items: start; max-width: var(--content-max-desktop); margin-left: auto; margin-right: auto; } .contact-info-side { padding-right: var(--spacing-xl); } .contact-info-side .section-kicker { text-align: left; } .contact-info-side .section-title { text-align: left; margin-bottom: var(--spacing-md); } .contact-description { color: var(--color-text-muted); line-height: 1.7; margin-bottom: var(--spacing-xl); } .contact-details { display: flex; flex-direction: column; gap: var(--spacing-lg); } .contact-detail-item { display: flex; align-items: flex-start; gap: var(--spacing-md); } .contact-detail-icon { width: 44px; height: 44px; background: rgba(196, 154, 108, 0.1); border-radius: 50%; display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .contact-detail-icon svg { width: 20px; height: 20px; color: var(--color-primary); } .contact-detail-content { display: flex; flex-direction: column; gap: 2px; } .contact-detail-label { font-weight: 600; color: var(--color-text); font-size: 0.9375rem; } .contact-detail-value { color: var(--color-text-muted); font-size: 0.9375rem; } /* Contact Form Side */ .contact-form-side { background: var(--color-card); padding: var(--spacing-xl); border-radius: var(--radius-large); box-shadow: var(--shadow-soft); } .contact-container { max-width: 700px; } .contact-header { margin-bottom: var(--spacing-xl); } .contact-form-wrapper { display: flex; flex-direction: column; align-items: center; } .contact-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: var(--spacing-2xl); margin-top: var(--spacing-xl); } .contact-info { padding: var(--spacing-xl); } .info-list { display: flex; flex-direction: column; gap: var(--spacing-lg); } .info-item { display: flex; gap: var(--spacing-md); } .info-icon { width: 24px; height: 24px; color: var(--color-primary); flex-shrink: 0; margin-top: 4px; } .info-content { flex: 1; } .info-label { font-weight: 600; color: var(--color-text); margin-bottom: 0.25rem; } .info-value { color: var(--color-text-muted); line-height: 1.6; } /* Inline Contact Info */ .contact-info-inline { display: flex; justify-content: center; gap: var(--spacing-2xl); margin-top: var(--spacing-xl); flex-wrap: wrap; } .info-item-inline { display: flex; align-items: center; gap: var(--spacing-sm); color: var(--color-text-muted); font-size: 0.9375rem; } .info-icon-small { width: 20px; height: 20px; color: var(--color-primary); flex-shrink: 0; } /* Contact Form Card */ .contact-form-card { background: var(--color-card); padding: var(--spacing-2xl); border-radius: var(--radius-large); box-shadow: var(--shadow-soft); } .contact-form-card.compact { width: 100%; max-width: 600px; padding: var(--spacing-xl); } /* Form Row for side-by-side fields */ .form-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--spacing-md); } /* Form Styles */ .form-group { margin-bottom: var(--spacing-lg); position: relative; } label { display: block; font-weight: 600; margin-bottom: var(--spacing-xs); color: var(--color-text); font-size: 0.9375rem; transition: all 0.3s ease; } .required { color: #E76F51; font-weight: 700; } .field-hint { display: block; font-size: var(--text-sm); color: var(--color-text-muted); margin-top: 0.375rem; font-style: italic; } input[type="text"], input[type="email"], input[type="tel"], select, textarea { width: 100%; padding: 0.875rem 1.25rem; border: 2px solid var(--color-border); border-radius: var(--radius-soft); font-family: var(--font-body); font-size: 1rem; color: var(--color-text); background-color: var(--color-input-bg); transition: all 0.3s ease; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--color-primary); background-color: white; box-shadow: 0 0 0 4px rgba(196, 154, 108, 0.08); } input:focus-visible, select:focus-visible, textarea:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; border-color: var(--color-primary); background-color: white; box-shadow: 0 0 0 4px rgba(196, 154, 108, 0.15); } input:valid:not(:placeholder-shown), textarea:valid:not(:placeholder-shown) { border-color: #52B788; } input.error, textarea.error { border-color: #E76F51; background-color: rgba(231, 111, 81, 0.05); animation: shake 0.5s ease-in-out; } textarea { resize: vertical; min-height: 120px; } .error-message { color: #E76F51; font-size: 0.875rem; margin-top: 0.5rem; display: flex; align-items: center; gap: 0.25rem; } .error-message::before { content: '⚠'; } .form-submit { width: 100%; margin-top: var(--spacing-md); position: relative; overflow: hidden; } .form-submit .btn-loader { display: none; width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.3); border-radius: 50%; border-top-color: white; animation: spin 0.8s linear infinite; margin-left: 0.5rem; } .form-submit.loading .btn-text { opacity: 0.5; } .form-submit.loading .btn-loader { display: inline-block; } .form-submit:disabled { opacity: 0.6; cursor: not-allowed; } @keyframes spin { to { transform: rotate(360deg); } } .form-success { background: linear-gradient(135deg, #52B788, #40916C); color: white; padding: 1rem 1.5rem; border-radius: var(--radius-soft); margin-top: 1rem; text-align: center; font-weight: 500; box-shadow: 0 4px 12px rgba(82, 183, 136, 0.3); animation: slideInUp 0.5s ease, successPulse 2s ease-in-out 0.5s; position: relative; overflow: hidden; } .form-success::before { content: '✓'; position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); font-size: 1.5rem; font-weight: bold; animation: successCheckmark 0.6s ease 0.3s forwards; opacity: 0; } @keyframes successCheckmark { 0% { opacity: 0; transform: translateY(-50%) scale(0); } 50% { transform: translateY(-50%) scale(1.2); } 100% { opacity: 1; transform: translateY(-50%) scale(1); } } @keyframes successPulse { 0%, 100% { box-shadow: 0 4px 12px rgba(82, 183, 136, 0.3); } 50% { box-shadow: 0 4px 20px rgba(82, 183, 136, 0.5); } } @keyframes slideInUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* Messages */ .messages { position: fixed; top: 80px; right: 20px; z-index: 1100; max-width: 400px; } .message { background: white; padding: var(--spacing-md) var(--spacing-lg); border-radius: var(--radius-soft); box-shadow: var(--shadow-soft); margin-bottom: var(--spacing-sm); border-left: 4px solid var(--color-primary); animation: slideIn 0.3s ease-out; } .message.success { border-left-color: #52B788; } .message.error { border-left-color: #E76F51; } @keyframes slideIn { from { transform: translateX(400px); opacity: 0; } to { transform: translateX(0); opacity: 1; } } /* ============================================ FAQ Section ============================================ */ .faq-list { max-width: 800px; margin: var(--spacing-xl) auto 0; } .faq-item { background: var(--color-card); margin-bottom: var(--spacing-md); border-radius: var(--radius-soft); overflow: hidden; box-shadow: var(--shadow-card); } .faq-question { width: 100%; padding: var(--spacing-lg); background: none; border: none; text-align: left; font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; color: var(--color-text); cursor: pointer; display: flex; justify-content: space-between; align-items: center; transition: var(--transition-base); } .faq-question:hover { color: var(--color-primary); } .faq-icon { font-size: 1.5rem; color: var(--color-primary); transition: var(--transition-base); } .faq-item.active .faq-icon { transform: rotate(45deg); } .faq-answer { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; } .faq-answer-content { padding: 0 var(--spacing-lg) var(--spacing-lg); color: var(--color-text-muted); line-height: 1.7; } .faq-item.active .faq-answer { max-height: 500px; } /* ============================================ Footer ============================================ */ .footer { background-color: var(--color-background-alt); padding: var(--spacing-2xl) 0 var(--spacing-lg); } .footer-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--spacing-xl); margin-bottom: var(--spacing-xl); } .footer-column h4 { font-size: var(--text-lg); margin-bottom: var(--spacing-md); color: var(--color-text); } .footer-column ul { list-style: none; } .footer-column li { margin-bottom: var(--spacing-sm); color: var(--color-text-muted); line-height: var(--line-height-relaxed); } .footer-column a { color: var(--color-text-muted); } .footer-column a:hover { color: var(--color-primary); } .social-links { display: flex; gap: var(--spacing-md); margin-top: var(--spacing-md); } .social-link { width: 40px; height: 40px; display: flex; align-items: center; justify-content: center; background: var(--color-card); border-radius: 50%; color: var(--color-primary); transition: var(--transition-base); } .social-link:hover { background: var(--color-primary); color: white; transform: translateY(-3px); } .footer-bottom { text-align: center; padding-top: var(--spacing-lg); border-top: 1px solid var(--color-border); color: var(--color-text-muted); font-size: 0.875rem; } /* ============================================ Responsive Design ============================================ Breakpoint Strategy: - 1200px: Large desktop adjustments - 1024px: Tablet landscape / small desktop - 900px: Tablet portrait (intermediate) - NEW - 768px: Large mobile / small tablet - 600px: Mobile landscape - 480px: Mobile portrait ============================================ */ /* Tablet Portrait - INTERMEDIATE BREAKPOINT (900px) */ @media (max-width: 900px) { :root { --spacing-section-y: 80px; --spacing-container-x: 48px; } /* ========================================== TABLET: Layouts em coluna única, centrados Texto: centrado em títulos, esquerda em parágrafos Max-width consistente: var(--content-max-tablet) = 680px ========================================== */ /* Grid adjustments for tablets */ .services-grid { grid-template-columns: repeat(2, 1fr); } .specialties-grid { grid-template-columns: repeat(2, 1fr); } /* About grid for tablets */ .about-grid { grid-template-columns: 1fr; gap: var(--spacing-lg); } .about-layout { grid-template-columns: 1fr; gap: var(--spacing-lg); max-width: var(--content-max-tablet); } .about-intro { padding-right: 0; } .about-photo-side { max-width: 350px; margin: 0 auto; } /* Services Layout - Stack for tablet */ .services-layout { grid-template-columns: 1fr; gap: var(--spacing-xl); max-width: var(--content-max-tablet); } .services-intro { position: static; } .availability-indicator { justify-content: center; } /* Service list centered */ .service-list { max-width: 100%; margin-left: auto; margin-right: auto; } .service-item { text-align: left; } /* Hero image strip */ .hero-image-strip { gap: 1.5rem; grid-template-columns: repeat(2, 1fr); max-width: 500px; } .hero-image-card { height: 320px; } .hero-image-card-left, .hero-image-card-right { transform: none; } .hero-image-card:nth-child(3) { display: none; } /* Feature Grid for tablets */ .feature-grid { max-width: var(--content-max-tablet); } /* Testimonials for tablets */ .testimonials-slider { gap: 1.25rem; } .testimonial-card-new { flex: 0 0 340px; /* Tablet: 340px */ width: 340px; } /* Contact Layout - Stack for tablet */ .contact-layout { grid-template-columns: 1fr; gap: var(--spacing-xl); max-width: var(--content-max-tablet); } .contact-info-side { padding-right: 0; } .contact-details { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: var(--spacing-lg); } .contact-detail-item { flex: 0 1 auto; max-width: 280px; text-align: left; } /* Contact form side centered */ .contact-form-side { max-width: 100%; margin-left: auto; margin-right: auto; } /* Contact form */ .contact-grid { grid-template-columns: 1fr; } /* Blog grid for tablets */ .blog-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Consistent with desktop */ max-width: var(--content-max-tablet); gap: var(--spacing-lg); /* 32px consistent */ } /* Footer for tablets */ .footer-grid { grid-template-columns: repeat(2, 1fr); gap: var(--spacing-lg); max-width: var(--content-max-tablet); margin-left: auto; margin-right: auto; text-align: left; } } /* iPad Pro Portrait and large tablets (1024px) - Centered layouts */ @media (max-width: 1024px) and (min-width: 901px) { /* ========================================== IPAD PRO: Layouts a 2 colunas, centrados Texto: esquerda na maioria, centrado em títulos Max-width consistente: var(--content-max-ipad-pro) = 850px ========================================== */ /* Feature Grid - 2 columns centered for iPad Pro */ .feature-grid { grid-template-columns: repeat(2, 1fr); max-width: var(--content-max-ipad-pro); gap: var(--spacing-md); } /* About Layout - Centered for iPad Pro */ .about-layout { grid-template-columns: 1fr 1fr; max-width: var(--content-max-ipad-pro); gap: var(--spacing-lg); } .about-intro { text-align: left; } .about-intro p { text-align: left; } /* Services Layout - Centered for iPad Pro */ .services-layout { max-width: var(--content-max-ipad-pro); gap: var(--spacing-lg); } .services-intro { text-align: left; } .services-intro p { text-align: left; } /* Contact Layout - Centered for iPad Pro */ .contact-layout { max-width: var(--content-max-ipad-pro); gap: var(--spacing-xl); } .contact-info-side { text-align: left; } .contact-description { text-align: left; } /* Blog Grid - Centered for iPad Pro */ .blog-grid { grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Consistent with desktop */ max-width: var(--content-max-ipad-pro); gap: var(--spacing-lg); /* 32px consistent */ } /* Footer - Centered for iPad Pro */ .footer-grid { max-width: var(--content-max-ipad-pro); margin-left: auto; margin-right: auto; text-align: left; } } /* Tablet and Mobile (1024px) */ @media (max-width: 1024px) { :root { --spacing-section-y: 64px; --spacing-container-x: 40px; } .container { padding: 0 var(--spacing-md); } /* Hero Section - More space from navbar */ .hero { padding-top: 140px; } /* Navigation */ .nav-toggle { display: flex; } .nav-close { display: block; } /* Show sidebar-specific elements on mobile/tablet */ .nav-menu-profile, .nav-menu-social, .nav-menu-info, .nav-menu-quick-contact { display: block; } .nav-menu { position: fixed; top: 0; right: 0; bottom: 0; width: 340px; max-width: 85vw; height: 100vh; background: linear-gradient(160deg, rgba(247, 239, 231, 0.98) 0%, rgba(255, 250, 245, 0.98) 100%); backdrop-filter: blur(24px) saturate(70%) brightness(105%); -webkit-backdrop-filter: blur(24px) saturate(70%) brightness(105%); flex-direction: column; padding: 5.5rem 1.75rem 2rem 1.75rem; box-shadow: -8px 0 32px rgba(59, 43, 42, 0.15), -2px 0 12px rgba(168, 132, 90, 0.1); border-left: 1px solid rgba(168, 132, 90, 0.25); transform: translateX(100%); transition: transform 0.45s cubic-bezier(0.4, 0, 0.2, 1); gap: var(--spacing-sm); z-index: 1000; overflow-y: auto; } .nav-menu.active { transform: translateX(0); } .nav-menu-links { display: flex; } .nav-menu-item svg { display: block; } /* Profile Photo */ .nav-menu-profile { text-align: center; margin-bottom: var(--spacing-sm); opacity: 0; transform: scale(0.9); transition: all 0.4s ease; } .nav-menu.active .nav-menu-profile { opacity: 1; transform: scale(1); transition-delay: 0.05s; } /* Menu Header */ .nav-menu-header { text-align: center; padding-bottom: var(--spacing-sm); border-bottom: 1px solid rgba(168, 132, 90, 0.15); margin-bottom: var(--spacing-sm); opacity: 0; transform: translateY(-10px); transition: all 0.4s ease; } .nav-menu.active .nav-menu-header { opacity: 1; transform: translateY(0); transition-delay: 0.1s; } .nav-menu-header h3 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; color: var(--color-text); margin: 0 0 0.375rem 0; letter-spacing: -0.01em; } .nav-menu-header p { font-size: 0.875rem; color: rgba(59, 43, 42, 0.6); margin: 0; font-weight: 400; } /* Menu Links Container */ .nav-menu-links { display: flex; flex-direction: column; gap: 0.5rem; flex: 1; margin-bottom: var(--spacing-md); padding: var(--spacing-xs) 0; } /* Menu Items with Icons */ .nav-menu-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 0.875rem; color: rgba(59, 43, 42, 0.8); font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 500; border-radius: 8px; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; transform: translateX(-10px); letter-spacing: 0.01em; } .nav-menu.active .nav-menu-item { opacity: 1; transform: translateX(0); } .nav-menu.active .nav-menu-item:nth-child(1) { transition-delay: 0.15s; } .nav-menu.active .nav-menu-item:nth-child(2) { transition-delay: 0.20s; } .nav-menu.active .nav-menu-item:nth-child(3) { transition-delay: 0.25s; } .nav-menu.active .nav-menu-item:nth-child(4) { transition-delay: 0.30s; } .nav-menu.active .nav-menu-item:nth-child(5) { transition-delay: 0.35s; } .nav-menu-item:hover, .nav-menu-item:focus { background: rgba(168, 132, 90, 0.08); color: var(--color-primary); transform: translateX(4px); } .nav-menu-item svg { flex-shrink: 0; width: 18px; height: 18px; opacity: 0.4; transition: all 0.3s ease; } .nav-menu-item span { line-height: 1.2; } .nav-menu-item:hover svg, .nav-menu-item:focus svg { opacity: 0.7; transform: scale(1.05); } /* CTA Button in Menu */ .nav-menu-cta { display: block; width: 100%; padding: 0.875rem 1.5rem; margin-bottom: var(--spacing-sm); background: linear-gradient(135deg, var(--color-primary) 0%, rgba(168, 132, 90, 0.9) 100%); color: var(--color-background); font-family: var(--font-heading); font-size: 1.0625rem; font-weight: 600; text-align: center; border-radius: 12px; box-shadow: 0 4px 12px rgba(168, 132, 90, 0.25); transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); opacity: 0; transform: translateY(10px); letter-spacing: 0.02em; } .nav-menu.active .nav-menu-cta { opacity: 1; transform: translateY(0); transition-delay: 0.40s; } .nav-menu-cta:hover, .nav-menu-cta:focus { transform: translateY(-2px); box-shadow: 0 6px 20px rgba(168, 132, 90, 0.35); background: linear-gradient(135deg, rgba(168, 132, 90, 1) 0%, rgba(168, 132, 90, 0.95) 100%); animation: none; } /* Pulse animation for CTA */ @keyframes subtlePulse { 0%, 100% { box-shadow: 0 4px 12px rgba(168, 132, 90, 0.25); } 50% { box-shadow: 0 4px 16px rgba(168, 132, 90, 0.35); } } .nav-menu.active .nav-menu-cta { animation: subtlePulse 2s ease-in-out infinite; } /* Social Media */ .nav-menu-social { padding: var(--spacing-sm) 0; opacity: 0; transform: translateY(10px); transition: all 0.4s ease; } .nav-menu.active .nav-menu-social { opacity: 1; transform: translateY(0); transition-delay: 0.5s; } /* Additional Info */ .nav-menu-info { padding: var(--spacing-sm) 0; opacity: 0; transform: translateY(10px); transition: all 0.4s ease; } .nav-menu.active .nav-menu-info { opacity: 1; transform: translateY(0); transition-delay: 0.55s; } /* Quick Contact Section */ .nav-menu-quick-contact { padding: var(--spacing-md); background: rgba(168, 132, 90, 0.06); border-radius: 12px; margin-bottom: var(--spacing-sm); opacity: 0; transform: translateY(10px); transition: all 0.4s ease; } .nav-menu.active .nav-menu-quick-contact { opacity: 1; transform: translateY(0); transition-delay: 0.45s; } .nav-menu-quick-contact h4 { font-family: var(--font-heading); font-size: 0.9375rem; font-weight: 600; color: var(--color-text); margin: 0 0 0.75rem 0; text-align: center; } .nav-menu-contact-buttons { display: flex; gap: 0.5rem; } .nav-menu-contact-btn { flex: 1; display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.75rem 1rem; border-radius: 8px; font-size: 0.875rem; font-weight: 500; transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1); text-decoration: none; } .nav-menu-contact-btn svg { width: 18px; height: 18px; flex-shrink: 0; } .nav-menu-contact-btn.whatsapp { background: rgba(37, 211, 102, 0.1); color: #25D366; border: 1px solid rgba(37, 211, 102, 0.2); } .nav-menu-contact-btn.whatsapp:hover { background: rgba(37, 211, 102, 0.15); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(37, 211, 102, 0.2); } .nav-menu-contact-btn.phone { background: rgba(168, 132, 90, 0.1); color: var(--color-primary); border: 1px solid rgba(168, 132, 90, 0.2); } .nav-menu-contact-btn.phone:hover { background: rgba(168, 132, 90, 0.15); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(168, 132, 90, 0.2); } /* Menu Footer */ .nav-menu-footer { padding-top: var(--spacing-sm); border-top: 1px solid rgba(168, 132, 90, 0.15); margin-top: var(--spacing-xs); opacity: 0; transform: translateY(10px); transition: all 0.4s ease; } .nav-menu.active .nav-menu-footer { opacity: 1; transform: translateY(0); transition-delay: 0.5s; } .nav-menu-footer p { font-size: 0.8125rem; color: rgba(59, 43, 42, 0.5); margin: 0.25rem 0; font-weight: 400; text-align: center; } /* About Section */ .about-quote { padding: var(--spacing-md) var(--spacing-lg); margin: var(--spacing-md) auto var(--spacing-lg); } .about-quote .quote-text { font-size: 1rem; } .about-grid { grid-template-columns: 1fr; gap: var(--spacing-xl); } .about-bullets { grid-template-columns: 1fr; } /* New About Layout - Mobile Responsive */ .about-layout { grid-template-columns: 1fr; gap: var(--spacing-lg); } .about-intro { padding-right: 0; order: 2; } .about-photo-side { order: 1; } .about-photo-container { max-width: 320px; margin: 0 auto; } .about-social-photo { left: 50%; transform: translateX(-50%); } .about-formation-title { justify-content: center; } .about-cta { text-align: center; } /* Minimal Grid - Mobile Responsive */ .about-minimal-grid { grid-template-columns: 1fr; gap: 1.5rem; } .about-photo-card { position: static; order: -1; } .about-photo-wrapper { max-width: 350px; margin: 0 auto; } .about-content-card { padding: 1.75rem; min-height: auto; } .about-content-name { text-align: center; font-size: 1.375rem; } .about-social-inline { justify-content: center; } .about-divider { margin-left: auto; margin-right: auto; } .about-why-title { text-align: center; } .about-why-text { text-align: left; } /* Journey Timeline - Mobile */ .journey-section { margin-top: 2.5rem; padding-top: 2rem; } .journey-title { font-size: 1.5rem; margin-bottom: 2rem; } .journey-line { display: none; } .journey-steps { flex-direction: column; gap: 2rem; align-items: center; } .journey-step { max-width: 280px; } .journey-icon { width: 48px; height: 48px; } .journey-icon svg { width: 20px; height: 20px; } /* Journey Card Section - Mobile */ .journey-card-section { margin-top: 1.5rem; padding-top: 1.25rem; } .journey-card-title { font-size: 1rem; text-align: center; } .journey-card-icon { width: 36px; height: 36px; min-width: 36px; } .journey-card-icon svg { width: 16px; height: 16px; } .journey-card-item-title { font-size: 0.875rem; } .journey-card-item-desc { font-size: 0.8125rem; } /* Carousel Controls - Mobile */ .about-carousel-controls { justify-content: center; margin-top: 1.25rem; } /* Minimal Timeline - Mobile */ .about-minimal-timeline { margin-top: 2.5rem; padding: 2rem 0 1rem; } .timeline-items { flex-direction: column; gap: 1rem; } .timeline-item { min-width: 100%; } .timeline-connector { display: none; } /* Credentials Grid */ .credentials-grid { grid-template-columns: 1fr; gap: var(--spacing-md); padding: var(--spacing-lg); } .credential-item:not(:last-child)::after { display: none; } /* Feature Grid */ .feature-grid { grid-template-columns: 1fr; } /* Services Layout */ .services-layout { grid-template-columns: 1fr; gap: var(--spacing-lg); } .services-intro { position: static; } .service-item { flex-wrap: wrap; gap: var(--spacing-md); } .service-meta { text-align: left; } /* Contact Grid */ .contact-grid { grid-template-columns: 1fr; } /* Contact Layout */ .contact-layout { grid-template-columns: 1fr; gap: var(--spacing-xl); } .contact-info-side { padding-right: 0; } .contact-details { align-items: center; } .contact-detail-item { width: 100%; max-width: 300px; align-items: center; } .contact-detail-content { text-align: left; } /* Contact Form Row */ .form-row { grid-template-columns: 1fr; } /* Contact Info Inline */ .contact-info-inline { flex-direction: column; align-items: center; gap: var(--spacing-md); } /* Testimonials Carousel */ .testimonials-carousel-wrapper { padding: 0 var(--spacing-md); } .testimonials-carousel-wrapper::before, .testimonials-carousel-wrapper::after { width: 60px; } .testimonial-card-new { flex: 0 0 300px; width: 300px; } /* Service Item */ .service-item { grid-template-columns: 1fr; text-align: center; } .service-cta { justify-self: center; } /* Hero Image Strip */ .hero-image-strip { grid-template-columns: 1fr; max-width: 400px; margin-left: auto; margin-right: auto; } .hero-image-card:nth-child(2), .hero-image-card:nth-child(3) { display: none; } .hero-image-card { height: 300px; } } /* Mobile Landscape / Small Tablet (600px) */ @media (max-width: 600px) { /* Form Row stacking */ .form-row { grid-template-columns: 1fr; gap: 0; } /* Adjust section padding */ .section { padding: var(--spacing-xl) 0; } /* Hero adjustments */ .hero { padding-top: 110px; min-height: auto; } /* Service item flex direction */ .service-item { flex-direction: column; align-items: center; text-align: center; gap: var(--spacing-md); } .service-meta { text-align: center; } /* Contact details stack */ .contact-details { flex-direction: column; align-items: center; } /* Blog grid single column */ .blog-grid { grid-template-columns: 1fr; } /* Testimonial cards smaller */ .testimonial-card-new { flex: 0 0 280px; width: 280px; } } /* Mobile */ @media (max-width: 480px) { :root { --spacing-section-y: 48px; } .hero { min-height: auto; padding-top: 100px; padding-bottom: var(--spacing-lg); } .hero-content { padding: 0 var(--spacing-sm); } .hero-title { white-space: normal; word-wrap: break-word; font-size: clamp(1.75rem, 8vw, 2.5rem); } .hero-subtitle { padding: 0; font-size: 0.9375rem; } .hero-kicker { font-size: 0.6rem; padding: 0.3rem 1rem; } .cta-wrapper { flex-direction: column; gap: var(--spacing-sm); align-items: center; width: 100%; } .cta-wrapper .btn { width: 100%; max-width: 280px; } .cta-badge { font-size: 0.75rem; padding: 0.375rem 0.75rem; } .btn { padding: 0.875rem 1.25rem; font-size: 0.875rem; width: 100%; max-width: 100%; } .btn-large { padding: 1rem 1.5rem; font-size: 0.9375rem; } /* Section titles for mobile */ .section-title { font-size: clamp(1.5rem, 6vw, 2rem); padding: 0 var(--spacing-xs); } .section-kicker { font-size: 0.6875rem; } .feature-grid, .blog-grid { grid-template-columns: 1fr; gap: var(--spacing-md); } .feature-card { padding: var(--spacing-md); } .feature-icon { width: 40px; height: 40px; } .feature-tag { font-size: 0.6875rem; padding: 0.25rem 0.5rem; } .feature-title { font-size: 1.0625rem; } .feature-description { font-size: 0.8125rem; } /* Service Items for mobile */ .service-item { flex-direction: column; text-align: center; padding: var(--spacing-md); gap: var(--spacing-sm); } .service-icon-wrapper { margin: 0 auto; } .service-info { text-align: center; } .service-meta { text-align: center; display: flex; gap: var(--spacing-sm); justify-content: center; align-items: center; } .service-arrow { display: none; } /* Blog/Article Cards Mobile */ .blog-card { max-width: 100%; } .blog-image { height: 160px; } .blog-content { padding: var(--spacing-md); } .blog-title { font-size: 1.0625rem; } .blog-excerpt { font-size: 0.8125rem; line-height: 1.6; } .blog-meta { font-size: 0.75rem; } /* Testimonials Carousel Mobile */ .testimonials-carousel-wrapper { padding: 0; margin-left: calc(-1 * var(--spacing-sm)); margin-right: calc(-1 * var(--spacing-sm)); width: calc(100% + 2 * var(--spacing-sm)); } .testimonials-carousel-wrapper::before, .testimonials-carousel-wrapper::after { width: 20px; } .testimonial-card-new { flex: 0 0 300px; /* Mobile: 300px */ width: 300px; padding: var(--spacing-md); } .testimonial-text { font-size: 0.875rem; line-height: 1.6; } .testimonial-name { font-size: 0.8125rem; } .testimonial-role { font-size: 0.75rem; } .process-steps { grid-template-columns: 1fr; gap: var(--spacing-lg); } /* Contact Section Mobile */ .contact-form-side { padding: var(--spacing-md); } .contact-details { flex-direction: column; gap: var(--spacing-md); } .contact-detail-item { width: 100%; max-width: none; justify-content: flex-start; } .contact-description { font-size: 0.9375rem; } /* About Section Mobile */ .about-formation { padding: var(--spacing-sm); } .about-formation-title { font-size: 1.0625rem; } .about-formation-item { flex-direction: column; gap: var(--spacing-xs); } .about-formation-year { align-self: flex-start; } /* Footer Mobile */ .footer-grid { grid-template-columns: 1fr; text-align: center; gap: var(--spacing-lg); } .social-links { justify-content: center; } .contact-form-card { padding: var(--spacing-lg); } } /* ============================================ Browser Compatibility - Backdrop Filter Fallback ============================================ */ @supports not (backdrop-filter: blur(1px)) { .navbar { background: transparent !important; } .navbar.scrolled { background: rgba(247, 239, 231, 0.95) !important; } .nav-menu { background: rgba(247, 239, 231, 0.95) !important; } } /* ============================================ Utilities ============================================ */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border-width: 0; } /* ============================================ Text Alignment — Single Source of Truth ============================================ This block resolves all conflicting text-align rules scattered across breakpoints above. STRATEGY: - Desktop (>1024px): 2 columns → everything left-aligned (base styles) - iPad Pro (901-1024px): 2 columns → everything left-aligned - Tablet (≤900px): 1 column → titles centered, paragraphs left - Mobile (≤600px): 1 column → titles centered, paragraphs left ============================================ */ /* iPad Pro Portrait (901–1024px): 2-column layouts, all text left */ @media (max-width: 1024px) and (min-width: 901px) { .about-intro .section-kicker, .about-intro .section-title { text-align: left; } .about-intro p { text-align: left; } .services-intro .section-kicker, .services-intro .section-title { text-align: left; } .services-intro p { text-align: left; } .contact-info-side .section-kicker, .contact-info-side .section-title { text-align: left; } .contact-description { text-align: left; } } /* Tablet Portrait (≤900px): 1-column layout, titles centered, paragraphs left */ @media (max-width: 900px) { /* About section */ .about-intro .section-kicker, .about-intro .section-title { text-align: center; } .about-intro p, .about-formation { text-align: left; max-width: 100%; } /* Services section */ .services-intro .section-kicker, .services-intro .section-title { text-align: center; } .services-intro p { text-align: left; max-width: 100%; } /* Availability indicator centered under centered title */ .availability-indicator { justify-content: center; } /* Contact section */ .contact-info-side .section-kicker, .contact-info-side .section-title { text-align: center; } .contact-description { text-align: left; max-width: 100%; } } /* Mobile (≤480px): same principle — titles centered, body text left */ @media (max-width: 480px) { .about-intro .section-kicker, .about-intro .section-title { text-align: center; } .about-intro p { text-align: left; } .about-why-title { text-align: center; } .about-why-text { text-align: left; } .services-intro .section-kicker, .services-intro .section-title { text-align: center; } .services-intro p { text-align: left; } .contact-info-side .section-kicker, .contact-info-side .section-title { text-align: center; } .contact-description { text-align: left; } /* Footer stays centered on mobile (single column) */ .footer-grid { text-align: center; } } /* ============================================ Accessibility - Reduced Motion ============================================ */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ============================================ Enhanced Animations ============================================ */ /* Stagger Animation for Cards */ @keyframes staggerFadeIn { from { opacity: 0; transform: translateY(30px) scale(0.95); } to { opacity: 1; transform: translateY(0) scale(1); } } /* Shake Animation for Form Errors */ @keyframes shake { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); } 20%, 40%, 60%, 80% { transform: translateX(5px); } } /* Success Checkmark Animation */ @keyframes successPop { 0% { transform: scale(0) rotate(-45deg); opacity: 0; } 50% { transform: scale(1.2) rotate(-45deg); } 100% { transform: scale(1) rotate(-45deg); opacity: 1; } } /* Shimmer Effect for Credentials */ @keyframes shimmer { 0% { background-position: -1000px 0; } 100% { background-position: 1000px 0; } } /* Line Drawing for Timeline */ @keyframes drawLine { from { transform: scaleY(0); transform-origin: top; } to { transform: scaleY(1); transform-origin: top; } } /* Dot Pulse for Timeline */ @keyframes dotPulse { 0%, 100% { transform: scale(1); box-shadow: 0 0 0 3px rgba(205, 171, 142, 0.3); } 50% { transform: scale(1.1); box-shadow: 0 0 0 6px rgba(205, 171, 142, 0.2); } } /* Active Nav Underline */ @keyframes navUnderline { from { transform: scaleX(0); } to { transform: scaleX(1); } } /* Ripple Effect for Buttons */ .btn { position: relative; overflow: hidden; } .ripple { position: absolute; border-radius: 50%; background: rgba(255, 255, 255, 0.6); transform: scale(0); animation: rippleEffect 0.6s ease-out; pointer-events: none; } @keyframes rippleEffect { to { transform: scale(4); opacity: 0; } } /* ============================================ INLINE NOTIFICATIONS (Form Feedback) ============================================ */ .form-notification { position: relative; padding: 1.25rem 1.5rem; padding-right: 3.5rem; margin-bottom: 2rem; border-radius: 12px; font-size: 0.9375rem; line-height: 1.6; display: flex; align-items: flex-start; gap: 1rem; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08); animation: slideDown 0.4s cubic-bezier(0.4, 0, 0.2, 1); border-left: 4px solid; } .form-notification-icon { flex-shrink: 0; width: 24px; height: 24px; margin-top: 2px; } .form-notification-icon svg { width: 100%; height: 100%; } .form-notification-content { flex: 1; } .form-notification-title { font-weight: 700; font-size: 1rem; margin-bottom: 0.25rem; font-family: 'Playfair Display', serif; } .form-notification-message { color: var(--color-text-muted); } .form-notification-close { position: absolute; top: 1rem; right: 1rem; background: none; border: none; cursor: pointer; padding: 0.25rem; width: 28px; height: 28px; display: flex; align-items: center; justify-content: center; border-radius: 6px; transition: all 0.2s ease; opacity: 0.6; } .form-notification-close:hover { opacity: 1; background: rgba(0, 0, 0, 0.05); } .form-notification-close svg { width: 14px; height: 14px; } /* Success variant */ .form-notification.success { background: linear-gradient(135deg, #f0fdf4 0%, #dcfce7 100%); border-left-color: #22c55e; color: #166534; } .form-notification.success .form-notification-icon { color: #22c55e; } .form-notification.success .form-notification-close { color: #166534; } /* Error variant */ .form-notification.error { background: linear-gradient(135deg, #fef2f2 0%, #fee2e2 100%); border-left-color: #ef4444; color: #991b1b; } .form-notification.error .form-notification-icon { color: #ef4444; } .form-notification.error .form-notification-close { color: #991b1b; } /* Animations */ @keyframes slideDown { from { opacity: 0; transform: translateY(-20px); } to { opacity: 1; transform: translateY(0); } } @keyframes fadeOut { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(-10px); } } .form-notification.fade-out { animation: fadeOut 0.3s cubic-bezier(0.4, 0, 1, 1) forwards; }