/* ============================================================ iniciacao.css Estilos específicos da página iniciacao.html Depende do design system já definido em global/style.css (carregar style.css ANTES deste arquivo no ). Reaproveita: --bg, --bg-alt, --text, --text-soft, --accent, --accent-deep, --line, --cream-card, --font-display, --font-body, --font-ui, --radius, .container, .section, .section-tag, .frame, .frame-caption, .btn, .btn-primary, .page-header, .back-link, .footer, .social-grid, .carousel, .carousel-track, .carousel-btn, .carousel-dots. ============================================================ */ /* ---------- Cabeçalho da página ---------- */ /* .page-header e .back-link não existem em global/style.css (só existiam em produtos.css, que esta página não carrega). Por isso ficam definidos aqui — sem eles o SVG da seta fica sem tamanho fixo e herda a cor azul padrão de link. */ .page-header { position: relative; padding: 70px 0 60px; overflow: hidden; } .page-header .container { position: relative; z-index: 1; } .page-header h1 { margin: 8px 0 18px; } .page-sub { font-size: 1.15rem; max-width: 620px; color: var(--text-soft); } .back-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-ui); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent-deep); text-decoration: none; margin-bottom: 28px; transition: gap 0.2s ease, color 0.2s ease; } .back-link svg { width: 18px; height: 18px; flex-shrink: 0; } .back-link:hover { gap: 12px; color: var(--accent); } /* ---------- Livro de história ---------- */ .story-book { display: flex; flex-direction: column; } .story-page { padding: 110px 0; } .story-page.story-alt { background: var(--bg-alt); } .story-grid { display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 70px; align-items: center; } .story-grid.reverse { grid-template-columns: 1.1fr 0.9fr; } .story-grid.reverse .story-photo { order: 2; } .story-grid.reverse .story-text { order: 1; } .story-photo { position: relative; } .story-photo .frame { aspect-ratio: 4 / 5; } .story-text { position: relative; } .chapter-number { display: inline-block; font-family: var(--font-ui); font-size: 0.85rem; font-weight: 500; letter-spacing: 0.2em; color: var(--accent-deep); margin-bottom: 10px; } .story-text h2 { margin-bottom: 20px; } .story-text p { font-family: var(--font-body); font-size: 1.2rem; line-height: 1.75; color: var(--text-soft); margin-bottom: 18px; max-width: 560px; } .drop-cap { float: left; font-family: var(--font-display); font-weight: 700; font-size: 3.4rem; line-height: 0.8; color: var(--accent-deep); padding: 6px 8px 0 0; } /* ---------- Galeria / carrossel de imagens ---------- */ /* .carousel, .carousel-track, .carousel-btn e .carousel-dots já vêm prontos e estilizados de global/style.css. Aqui só definimos o tamanho de cada slide, já que ele é diferente do .product-card usado em produtos.html. */ .carousel-slide { flex: 0 0 min(320px, 80vw); scroll-snap-align: start; } .carousel-slide .frame { aspect-ratio: 4 / 3; } /* ---------- Botão de voltar ao topo ---------- */ .back-to-top-section { padding: 0 0 60px; } .back-to-top-content { display: flex; justify-content: center; } /* ---------- Responsivo ---------- */ @media (max-width: 980px) { .story-grid, .story-grid.reverse { grid-template-columns: 1fr; gap: 50px; } .story-grid.reverse .story-photo, .story-grid.reverse .story-text { order: initial; } } @media (max-width: 640px) { .story-page { padding: 70px 0; } .drop-cap { font-size: 2.8rem; } .carousel-slide { flex: 0 0 72%; max-width: 280px; } }