/* Fontes carregadas via + preconnect no do HTML (evita o @import render-blocking que segurava o LCP) */ /* DESIGN SYSTEM TOKENS DESIGN_VARIANCE=8 (Asymmetric leaf collages & offset elements) MOTION_INTENSITY=6 (GSAP entrance reveals & magnetic physical hover) VISUAL_DENSITY=4 (Airy, luxurious editorial spacing) */ :root { --bg-primary: #faf6ee; --bg-secondary: #f4edd8; --bg-dark: #12281f; /* Dark forest green */ --text-primary: #12281f; --text-secondary: #2c4238; --text-muted: #5e7267; --text-light: #ffffff; --accent: #b85834; /* Terracotta / Rust Orange */ --accent-hover: #cd5f38; --accent-rgb: 184, 88, 52; --brand-green: #1b4332; --brand-green-hover: #112a20; --brand-green-rgb: 27, 67, 50; /* Glassmorphism Refraction (Liquid Glass) */ --glass-bg: rgba(255, 255, 255, 0.4); --glass-border: rgba(27, 67, 50, 0.08); --glass-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 8px 32px 0 rgba(27, 67, 50, 0.06); /* Fonts */ --font-display: 'Playfair Display', Georgia, serif; --font-body: 'Outfit', -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; } /* --- RESET / NORMALIZE GLOBAL --- */ /* Zera os espaçamentos que os navegadores adicionam por conta própria (margens de body, títulos, listas, parágrafos, etc.) */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html, body { margin: 0; padding: 0; width: 100%; } /* Evita que imagens/mídias estourem o container e criem espaço morto */ img, svg, video, picture { max-width: 100%; } html { scroll-behavior: smooth; background-color: var(--bg-primary); color: var(--text-primary); font-family: var(--font-body); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { min-height: 100dvh; overflow-x: hidden; position: relative; } /* --- TEXTURE NOISE OVERLAY --- */ body::before { content: ""; position: fixed; inset: 0; width: 100%; height: 100%; z-index: 9999; pointer-events: none; opacity: 0.025; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3e%3cfilter id='noise'%3e%3cfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3e%3c/filter%3e%3crect width='100%25' height='100%25' filter='url(%23noise)'/%3e%3c/svg%3e"); } /* --- UTILITIES --- */ .container { width: 100%; max-width: 1400px; margin: 0 auto; padding: 0 2.5rem; } @media (max-width: 768px) { .container { padding: 0 1.5rem; } } /* --- TYPOGRAPHY --- */ h1, h2, h3, h4 { font-family: var(--font-display); color: var(--text-primary); font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; } p { font-family: var(--font-body); color: var(--text-secondary); line-height: 1.6; } .font-signature { font-family: 'Caveat', cursive; } /* --- TOP NAV & BANNER WRAPPER --- */ .top-nav-wrapper { position: absolute; top: 0; left: 0; width: 100%; z-index: 100; } header { position: relative; width: 100%; z-index: 100; } .nav-container { display: flex; justify-content: space-between; align-items: center; height: 90px; } .logo { font-family: var(--font-display); font-weight: 700; font-size: 1.4rem; text-decoration: none; color: var(--text-primary); display: flex; align-items: center; gap: 0.5rem; letter-spacing: -0.01em; } .logo-icon { color: var(--brand-green); display: flex; align-items: center; } /* --- HERO SECTION --- */ .hero-section { position: relative; min-height: 100dvh; display: flex; align-items: center; overflow: hidden; padding-top: 60px; /* Banner spacing + safe margin */ } @media (max-width: 1024px) { .hero-section { padding-top: 85px; /* Spacing for wrapped banner text on mobile */ } } /* Sub-background elements */ .hero-radial-blend { position: absolute; top: -20%; right: -10%; width: 60vw; height: 60vw; background: radial-gradient(circle, rgba(27, 67, 50, 0.05) 0%, rgba(250, 246, 238, 0) 70%); z-index: 0; pointer-events: none; } .hero-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 5rem; align-items: center; position: relative; z-index: 10; width: 100%; padding: 4rem 0; } @media (max-width: 1024px) { .hero-grid { grid-template-columns: 1fr; gap: 3rem; padding: 2.5rem 0; text-align: center; } } .hero-content { display: flex; flex-direction: column; align-items: flex-start; z-index: 10; } @media (max-width: 1024px) { .hero-content { align-items: center; } } /* Eyebrow Tagline */ .hero-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--font-body); font-size: 0.85rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; color: var(--accent); margin-bottom: 1.25rem; } /* Main Headline */ .hero-title { font-size: clamp(2.3rem, 4.5vw, 3.8rem); font-weight: 700; line-height: 1.12; margin-bottom: 1.5rem; max-width: 16ch; } .hero-title span.highlight-green { color: var(--brand-green); } .hero-title span.highlight-accent { color: var(--accent); position: relative; display: inline-block; } /* Highlight Underline effect */ .hero-title span.highlight-accent::after { content: ""; position: absolute; left: 0; bottom: 4px; width: 100%; height: 8px; background-color: rgba(184, 88, 52, 0.12); z-index: -1; border-radius: 2px; } .hero-description { font-size: 1.15rem; font-weight: 400; color: var(--text-secondary); margin-bottom: 2.5rem; max-width: 48ch; line-height: 1.7; } /* CTA Group */ .cta-group { display: flex; flex-direction: column; align-items: flex-start; gap: 0.75rem; margin-bottom: 3rem; width: 100%; } @media (max-width: 1024px) { .cta-group { align-items: center; } } /* Premium Buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.75rem; padding: 1.15rem 2.5rem; border-radius: 9999px; font-size: 0.95rem; font-weight: 600; text-decoration: none; cursor: pointer; letter-spacing: 0.05em; text-transform: uppercase; transition: transform 0.1s ease, box-shadow 0.3s ease, background-color 0.3s ease, border-color 0.3s ease; outline: none; border: none; } .btn:active { transform: scale(0.97); } .btn-primary { background-color: var(--brand-green); color: var(--text-light); box-shadow: 0 8px 30px rgba(27, 67, 50, 0.15); } .btn-primary:hover { background-color: var(--brand-green-hover); box-shadow: 0 12px 35px rgba(27, 67, 50, 0.25); } .btn-icon { width: 18px; height: 18px; stroke-width: 2px; } /* Trust Subtext */ .btn-trust-text { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); } /* Trust / Social Proof Section */ .hero-trust { display: flex; align-items: center; gap: 1.5rem; border-top: 1px solid rgba(27, 67, 50, 0.08); padding-top: 2rem; width: 100%; max-width: 500px; } @media (max-width: 640px) { .hero-trust { flex-direction: column; align-items: center; gap: 1rem; text-align: center; } } .trust-avatars { display: flex; } .trust-avatar { width: 44px; height: 44px; border-radius: 50%; border: 3px solid var(--bg-primary); margin-right: -12px; object-fit: cover; background-color: var(--bg-secondary); } .trust-avatar:last-child { margin-right: 0; } .trust-text { display: flex; flex-direction: column; gap: 0.15rem; align-items: flex-start; } @media (max-width: 640px) { .trust-text { align-items: center; } } .trust-stars { display: flex; gap: 0.1rem; color: #d97706; /* High-end dark amber gold */ } .star-icon { width: 15px; height: 15px; fill: currentColor; } .trust-label { font-size: 0.85rem; font-weight: 500; color: var(--text-secondary); } .trust-label span { color: var(--text-primary); font-weight: 700; } /* --- RIGHT COLUMN: HERO MOCKUP --- */ .hero-collage { position: relative; width: 100%; height: auto; display: flex; justify-content: center; align-items: center; } @media (max-width: 1024px) { .hero-collage { margin-top: 2rem; max-width: 500px; margin-left: auto; margin-right: auto; } } /* --- SEÇÃO 2: A PROPOSTA & MOCKUP STACK --- */ .section-2-bg { background-color: #faf9f6; /* Interlocking lens/circle grid pattern (Exact match to Behance reference) */ background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='40' cy='40' r='55' stroke='%23e9e3d8' stroke-width='1' fill='none' opacity='0.25'/%3E%3Ccircle cx='0' cy='0' r='55' stroke='%23e9e3d8' stroke-width='1' fill='none' opacity='0.25'/%3E%3Ccircle cx='80' cy='0' r='55' stroke='%23e9e3d8' stroke-width='1' fill='none' opacity='0.25'/%3E%3Ccircle cx='0' cy='80' r='55' stroke='%23e9e3d8' stroke-width='1' fill='none' opacity='0.25'/%3E%3Ccircle cx='80' cy='80' r='55' stroke='%23e9e3d8' stroke-width='1' fill='none' opacity='0.25'/%3E%3C/svg%3E"); background-repeat: repeat; } #btn-cta-section2 { border-radius: 4px; } /* --- SEÇÃO 3: PARA QUEM É --- */ .section-3-bg { background-color: var(--bg-dark); /* Dark forest green */ /* Diagonal grid pattern */ background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z' stroke='rgba%28255,%20255,%20255,%200.025%29' stroke-width='1' fill='none'/%3E%3C/svg%3E"); background-repeat: repeat; } /* --- SEÇÃO 4: COMO SERÁ SUA JORNADA --- */ .section-4-bg { position: relative; background-color: var(--bg-primary); padding: 4rem 0; /* padrão: py-16 */ } @media (min-width: 768px) { .section-4-bg { padding: 6rem 0; /* padrão: md:py-24 */ } } @media (min-width: 1024px) { .section-4-bg { padding-top: 6rem; padding-bottom: 12rem; /* extra mantido só p/ a sobreposição da Seção 5 */ } .gsap-s4-mockup { margin-bottom: -110px; /* push the terracotta shelf down to sit on the green section */ } } .s4-leaf-top { position: absolute; top: 0; left: 0; width: 12rem; /* w-48 equivalent */ pointer-events: none; z-index: 10; opacity: 0.95; transform: translate(-3rem, -3rem) rotate(-15deg); animation: float-s4-leaf-top 8s ease-in-out infinite alternate; } .s4-leaf-bottom { position: absolute; bottom: 0; right: 0; width: 12rem; /* w-48 equivalent */ pointer-events: none; z-index: 10; opacity: 0.95; transform: translate(3rem, 3rem) rotate(165deg); animation: float-s4-leaf-bottom 10s ease-in-out infinite alternate-reverse; } @media (min-width: 768px) { .s4-leaf-top { width: 16rem; /* w-64 equivalent */ } .s4-leaf-bottom { width: 16rem; /* w-64 equivalent */ } } @media (min-width: 1024px) { .s4-leaf-top { width: 22rem; /* slightly larger for larger displays to match Behance frame overlap */ } .s4-leaf-bottom { width: 22rem; } } @keyframes float-s4-leaf-top { 0% { transform: translate(-3rem, -3rem) rotate(-15deg); } 100% { transform: translate(-2.5rem, -2.7rem) rotate(-12deg); } } @keyframes float-s4-leaf-bottom { 0% { transform: translate(3rem, 3rem) rotate(165deg); } 100% { transform: translate(2.5rem, 2.7rem) rotate(168deg); } } .s4-capsule { transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1); box-shadow: 0 4px 15px rgba(27, 67, 50, 0.02); } .s4-capsule:hover { transform: translateY(-2px); background-color: rgba(255, 255, 255, 0.6) !important; border-color: var(--accent) !important; box-shadow: 0 10px 25px rgba(27, 67, 50, 0.06); } .btn-whatsapp { background-color: #25d366 !important; color: #ffffff !important; box-shadow: 0 8px 30px rgba(37, 211, 102, 0.2) !important; transition: all 0.3s ease !important; } .btn-whatsapp:hover { background-color: #20ba5a !important; box-shadow: 0 12px 35px rgba(37, 211, 102, 0.3) !important; transform: translateY(-2px) !important; } #btn-cta-section4 { border-radius: 9999px !important; } /* --- SEÇÃO 5: DEPOIMENTOS & QUEBRA DE OBJEÇÃO --- */ .section-5-bg { position: relative; background-color: var(--bg-dark); /* Use the same diagonal pattern as Section 3 to make it a seamless block */ background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z' stroke='rgba%28255,%20255,%20255,%200.025%29' stroke-width='1' fill='none'/%3E%3C/svg%3E"); background-repeat: repeat; z-index: 30; /* Overlays Section 4 container to hide the flying bottom shelf edge */ padding: 4rem 0; /* padrão: py-16 */ } @media (min-width: 768px) { .section-5-bg { padding: 6rem 0; /* padrão: md:py-24 */ } } @media (min-width: 1024px) { .section-5-bg { margin-top: -120px; /* Pull the section up over Section 4 bottom */ padding-top: calc(6rem + 120px); /* base 6rem + compensação da sobreposição */ } } .carousel-container { position: relative; width: 100%; overflow: hidden; padding: 2.5rem 0; user-select: none; -webkit-user-select: none; } .carousel-track { display: flex; gap: 1.5rem; transition: transform 0.6s cubic-bezier(0.25, 1, 0.35, 1); will-change: transform; cursor: grab; } .carousel-track:active { cursor: grabbing; } .carousel-slide { flex: 0 0 340px; /* Base width of chat bubbles */ max-width: 85vw; transition: transform 0.6s ease, opacity 0.6s ease; opacity: 0.88; transform: scale(0.96); } .carousel-slide.active-slide { opacity: 1; transform: scale(1.03); } .testimonial-card { border-radius: 20px; padding: 1.75rem; box-shadow: 0 15px 35px rgba(0, 0, 0, 0.08); display: flex; flex-direction: column; justify-content: space-between; min-height: 220px; position: relative; transition: background-color 0.3s ease, box-shadow 0.3s ease, opacity 0.3s ease; } /* Chat bubble styling point (speech bubble tail at the bottom center or side) */ .testimonial-card::after { content: ""; position: absolute; bottom: -10px; width: 0; height: 0; border-style: solid; transition: border-color 0.3s ease; } /* Left-aligned message bubble (received / patient) */ .testimonial-card.chat-left { background-color: #ffffff; } .testimonial-card.chat-left::after { left: 30px; right: auto; border-width: 10px 10px 0 0; border-color: #ffffff transparent transparent transparent; } /* Right-aligned message bubble (sent / dietitian / patient alternative) */ .testimonial-card.chat-right { background-color: #faf6ee; /* Match user reference */ } .testimonial-card.chat-right::after { right: 30px; left: auto; border-width: 10px 0 0 10px; border-color: #faf6ee transparent transparent transparent; } /* Spacer Cards for framing the desktop carousel */ .testimonial-card.spacer-card { opacity: 0.35; box-shadow: none; border: 1px dashed rgba(255, 255, 255, 0.08); pointer-events: none; } .testimonial-text { font-family: var(--font-body); font-size: 0.95rem; color: #000000; line-height: 1.6; font-weight: 400; } .testimonial-footer { display: flex; justify-content: space-between; align-items: center; margin-top: 1.25rem; border-top: none; padding-top: 0; } .testimonial-icon { font-size: 1.25rem; } .testimonial-time { font-size: 0.75rem; color: #4a5c52; font-weight: 600; } /* Chocolate Objection Card Styles */ .chocolate-decor { position: absolute; left: -20px; top: 15%; width: 90px; z-index: 20; transform: rotate(-15deg); pointer-events: none; animation: float-chocolate 8s ease-in-out infinite alternate; } @media (min-width: 480px) { .chocolate-decor { width: 130px; left: -30px; } } @media (min-width: 768px) { .chocolate-decor { width: 190px; left: -50px; top: 10%; } } @media (min-width: 1024px) { .chocolate-decor { width: 250px; left: -70px; top: 5%; } } @keyframes float-chocolate { 0% { transform: rotate(-15deg) translateY(0); } 100% { transform: rotate(-10deg) translateY(-10px) translateX(5px); } } .objection-highlight { position: relative; background-color: #fdf5ea; color: var(--accent); font-family: var(--font-display); font-style: italic; padding: 0.6rem 2rem; border-left: 2px solid var(--accent); border-right: 2px solid var(--accent); display: inline-block; } .objection-highlight-dot-tl { position: absolute; left: -4px; top: -4px; width: 6px; height: 6px; background-color: var(--accent); border-radius: 50%; } .objection-highlight-dot-bl { position: absolute; left: -4px; bottom: -4px; width: 6px; height: 6px; background-color: var(--accent); border-radius: 50%; } .objection-highlight-dot-tr { position: absolute; right: -4px; top: -4px; width: 6px; height: 6px; background-color: var(--accent); border-radius: 50%; } .objection-highlight-dot-br { position: absolute; right: -4px; bottom: -4px; width: 6px; height: 6px; background-color: var(--accent); border-radius: 50%; } #btn-cta-section5 { border-radius: 4px; } /* --- SEÇÃO 6: O CICLO VICIOSO --- */ .section-6-bg { position: relative; background-color: var(--bg-primary); /* Sync with site background beige */ background-image: url("data:image/svg+xml,%3Csvg width='80' height='80' viewBox='0 0 80 80' xmlns='http://www.w3.org/2000/svg'%3E%3Ccircle cx='40' cy='40' r='55' stroke='%23e9e3d8' stroke-width='1' fill='none' opacity='0.25'/%3E%3Ccircle cx='0' cy='0' r='55' stroke='%23e9e3d8' stroke-width='1' fill='none' opacity='0.25'/%3E%3Ccircle cx='80' cy='0' r='55' stroke='%23e9e3d8' stroke-width='1' fill='none' opacity='0.25'/%3E%3Ccircle cx='0' cy='80' r='55' stroke='%23e9e3d8' stroke-width='1' fill='none' opacity='0.25'/%3E%3Ccircle cx='80' cy='80' r='55' stroke='%23e9e3d8' stroke-width='1' fill='none' opacity='0.25'/%3E%3C/svg%3E"); background-repeat: repeat; } .s6-leaf-top { position: absolute; top: -5rem; right: -5rem; width: 14rem; pointer-events: none; z-index: 5; transform: rotate(-135deg); /* Points inwards down-left */ animation: float-s6-leaf-top 9s ease-in-out infinite alternate; } .s6-leaf-bottom { position: absolute; bottom: -6rem; left: -6rem; width: 18rem; pointer-events: none; z-index: 5; transform: rotate(45deg); /* Points inwards up-right */ animation: float-s6-leaf-bottom 11s ease-in-out infinite alternate-reverse; } @media (min-width: 768px) { .s6-leaf-top { width: 22rem; top: -7rem; right: -7rem; } .s6-leaf-bottom { width: 26rem; bottom: -8rem; left: -8rem; } } @keyframes float-s6-leaf-top { 0% { transform: rotate(-135deg) translateY(0); } 100% { transform: rotate(-132deg) translateY(-8px); } } @keyframes float-s6-leaf-bottom { 0% { transform: rotate(45deg) translateY(0); } 100% { transform: rotate(48deg) translateY(-10px); } } /* --- SEÇÃO 7: BENEFÍCIOS (A TRANSFORMAÇÃO) --- */ .section-7-bg { position: relative; background-color: var(--bg-dark); /* Dark Green matching alternate pattern */ /* Diagonal grid pattern */ background-image: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M30 0 L60 30 L30 60 L0 30 Z' stroke='rgba%28255,%20255,%20255,%200.015%29' stroke-width='1' fill='none'/%3E%3C/svg%3E"); background-repeat: repeat; z-index: 10; } .s7-glow-1 { position: absolute; top: 10%; left: -10%; width: 40vw; height: 40vw; background: radial-gradient(circle, rgba(184, 88, 52, 0.08) 0%, rgba(18, 40, 31, 0) 70%); pointer-events: none; z-index: 1; } .s7-glow-2 { position: absolute; bottom: 10%; right: -10%; width: 40vw; height: 40vw; background: radial-gradient(circle, rgba(27, 67, 50, 0.2) 0%, rgba(18, 40, 31, 0) 70%); pointer-events: none; z-index: 1; } /* Specific styling for the border transition speed and smoothness */ .gsap-s7-card { transition: border-color 0.5s cubic-bezier(0.16, 1, 0.3, 1), background-color 0.5s cubic-bezier(0.16, 1, 0.3, 1), transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .gsap-s7-card:hover { transform: translateY(-5px); box-shadow: 0 20px 40px rgba(18, 40, 31, 0.4); } /* 3D Flip Card System for Section 7 */ .perspective-1200 { perspective: 1200px; } .preserve-3d { transform-style: preserve-3d; } .backface-hidden { backface-visibility: hidden; -webkit-backface-visibility: hidden; } .rotate-y-180 { transform: rotateY(180deg); } .benefit-card-inner { transition: transform 0.8s cubic-bezier(0.175, 0.885, 0.32, 1.275); transform-style: preserve-3d; } .benefit-card-wrapper.flipped .benefit-card-inner { transform: rotateY(180deg); } /* Make sure faces behave nicely under 3D transforms */ .benefit-card-front, .benefit-card-back { border-radius: 1.5rem; /* rounded-3xl */ } /* --- SEÇÃO 5: CASO DE SUCESSO DESTAQUE (JULIA) --- */ .s5-featured-img-container { box-shadow: 0 30px 70px -15px rgba(0, 0, 0, 0.7), 0 0 50px rgba(184, 88, 52, 0.15); transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.5s cubic-bezier(0.16, 1, 0.3, 1); } .s5-featured-img-container:hover { transform: scale(1.02); box-shadow: 0 35px 80px -10px rgba(0, 0, 0, 0.85), 0 0 60px rgba(184, 88, 52, 0.25); } .s5-quote-mark { font-family: var(--font-display); color: rgba(184, 88, 52, 0.12); user-select: none; pointer-events: none; } /* --- SEÇÃO 8: PREÇO E CHECKOUT --- */ #comprar { background-color: var(--bg-primary); } .gsap-s8-card { transition: all 0.5s cubic-bezier(0.16, 1, 0.3, 1); } @media (min-width: 1024px) { /* A elevação base vem da classe Tailwind lg:-translate-y-6 no card, pra não travar a animação de entrada do GSAP com um !important. */ .gsap-s8-card:hover { transform: translateY(-32px) !important; box-shadow: 0 40px 80px rgba(18, 40, 31, 0.35) !important; } } @media (max-width: 1023px) { .gsap-s8-card:hover { transform: translateY(-8px) !important; box-shadow: 0 25px 50px rgba(18, 40, 31, 0.25) !important; } } #btn-purchase-checkout { transition: all 0.3s ease !important; } #btn-purchase-checkout:hover { transform: translateY(-2px) !important; box-shadow: 0 10px 20px rgba(184, 88, 52, 0.3) !important; } /* --- SEÇÃO DE BÔNUS (MOCKUP 3D DE LIVRO) --- */ .book-perspective { perspective: 1000px; display: flex; justify-content: center; align-items: center; } .book-3d { position: relative; width: 160px; height: 240px; transform-style: preserve-3d; transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.6s cubic-bezier(0.16, 1, 0.3, 1); transform: rotateY(-15deg) rotateX(10deg); box-shadow: 5px 10px 20px rgba(18, 40, 31, 0.15); } .book-perspective:hover .book-3d { transform: rotateY(-28deg) rotateX(12deg) scale(1.05); box-shadow: 15px 25px 40px rgba(18, 40, 31, 0.28); } .book-cover { position: absolute; top: 0; left: 0; width: 100%; height: 100%; transform: translateZ(9px); z-index: 10; border-radius: 0 4px 4px 0; background-color: var(--bg-secondary); overflow: hidden; backface-visibility: hidden; -webkit-backface-visibility: hidden; } .book-cover img { width: 100%; height: 100%; object-fit: cover; display: block; } .book-spine { position: absolute; top: 0; left: 0; width: 18px; /* Thickness of the book */ height: 100%; transform: translateZ(9px) rotateY(-90deg); transform-origin: left; z-index: 5; background-color: var(--brand-green); box-shadow: inset -2px 0 5px rgba(0, 0, 0, 0.2); } .book-pages { position: absolute; top: 3px; right: 0; width: calc(100% - 3px); height: calc(100% - 6px); transform: translateZ(-9px); z-index: 1; background: #faf8f5; border: 1px solid #e2d9c2; border-left: none; box-shadow: inset 4px 0 8px rgba(0, 0, 0, 0.08); border-radius: 0 3px 3px 0; } /* Page edges line texture */ .book-pages::after { content: ""; position: absolute; inset: 0; background: linear-gradient( to bottom, transparent 0%, rgba(0, 0, 0, 0.03) 50%, transparent 100% ); background-size: 100% 4px; } /* Responsive adjustments for 3D Books on Mobile */ @media (max-width: 767px) { .book-3d { transform: none !important; box-shadow: 0 12px 30px rgba(18, 40, 31, 0.12) !important; width: 140px; height: 210px; } .book-perspective:hover .book-3d { transform: translateY(-5px) scale(1.02) !important; box-shadow: 0 20px 35px rgba(18, 40, 31, 0.2) !important; } .book-spine, .book-pages { display: none !important; } .book-cover { transform: none !important; border-radius: 8px; } } /* --- ACESSIBILIDADE: respeitar usuários que pedem menos movimento --- */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }