/* ========================================================================= Coffee Log — Stylesheet do site Importa identidade_tokens.css antes deste arquivo (no ). ========================================================================= */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 80px; } body { margin: 0; } img { max-width: 100%; height: auto; display: block; } a { border-bottom: 0; } a:hover { color: var(--cl-amber-dark); } button { font-family: inherit; } .container { width: var(--cl-container); margin-inline: auto; } .container--narrow { width: var(--cl-container-narrow); margin-inline: auto; } .section { padding-block: var(--cl-section-py); position: relative; } .section--cream { background: var(--cl-cream); } .section--deep { background: var(--cl-deep); color: var(--cl-cream); } .section--narrow { padding-block: var(--cl-section-py-sm); } .center-text { text-align: center; } .center-text .cl-eyebrow { justify-content: center; } .center-text p { margin-inline: auto; } /* ========================================================================= COMPONENTES DA JULIANA (componentes_ref.css) Replicados aqui pra não depender de import extra. ========================================================================= */ .cl-eyebrow { display: inline-flex; align-items: center; gap: var(--cl-space-3); font-family: var(--cl-font-body); font-size: var(--cl-fs-eyebrow); font-weight: var(--cl-weight-semibold); letter-spacing: var(--cl-tracking-wide); text-transform: uppercase; color: var(--cl-roast); margin-bottom: var(--cl-space-4); } .cl-eyebrow::before { content: ""; display: block; width: 32px; height: 1px; background: currentColor; flex: 0 0 32px; } .cl-eyebrow--light { color: var(--cl-cream); } .cl-eyebrow--caramel { color: var(--cl-caramel); } .cl-h1-editorial { font-family: var(--cl-font-display); font-size: var(--cl-fs-hero); font-weight: var(--cl-weight-normal); font-style: italic; color: var(--cl-cream); line-height: 1.02; letter-spacing: -0.025em; font-variation-settings: 'opsz' 120, 'SOFT' 30, 'WONK' 0; margin: 0 0 var(--cl-space-5) 0; text-wrap: balance; } .cl-h1-editorial em, .cl-h1-editorial .accent { font-style: normal; color: var(--cl-amber); } .cl-btn-cta { --_btn-bg: var(--cl-caramel); --_btn-bg-hover: var(--cl-amber); --_btn-fg: var(--cl-bg); --_btn-fg-hover: var(--cl-ink-strong); display: inline-flex; align-items: center; gap: var(--cl-space-3); padding: 16px 28px; border-radius: var(--cl-radius-md); background: var(--_btn-bg); color: var(--_btn-fg); font-family: var(--cl-font-body); font-weight: var(--cl-weight-semibold); font-size: 1rem; letter-spacing: 0.01em; line-height: 1; text-decoration: none; border: 0; cursor: pointer; box-shadow: var(--cl-shadow-cta); transition: background var(--cl-dur-2) var(--cl-ease), color var(--cl-dur-2) var(--cl-ease), box-shadow var(--cl-dur-2) var(--cl-ease), transform var(--cl-dur-2) var(--cl-ease); } .cl-btn-cta::after { content: "→"; display: inline-block; font-size: 1.1em; line-height: 1; transform: translateX(0); transition: transform var(--cl-dur-2) var(--cl-ease); } .cl-btn-cta:hover, .cl-btn-cta:focus-visible { background: var(--_btn-bg-hover); color: var(--_btn-fg-hover); box-shadow: var(--cl-shadow-cta-hover); transform: translateY(-1px); } .cl-btn-cta:hover::after, .cl-btn-cta:focus-visible::after { transform: translateX(4px); } .cl-btn-cta:focus-visible { outline: 2px solid var(--cl-caramel); outline-offset: 3px; } .cl-btn-cta--lg { padding: 20px 40px; font-size: 1.125rem; } .cl-btn-outline { display: inline-flex; align-items: center; gap: var(--cl-space-3); padding: 15px 26px; border-radius: var(--cl-radius-md); background: transparent; color: var(--cl-ink); font-family: var(--cl-font-body); font-weight: var(--cl-weight-semibold); font-size: 1rem; letter-spacing: 0.01em; line-height: 1; text-decoration: none; border: 1px solid var(--cl-ink); cursor: pointer; transition: background var(--cl-dur-2) var(--cl-ease), color var(--cl-dur-2) var(--cl-ease); } .cl-btn-outline:hover, .cl-btn-outline:focus-visible { background: var(--cl-ink); color: var(--cl-bg); } .cl-btn-outline-light { color: var(--cl-cream); border-color: var(--cl-cream); } .cl-btn-outline-light:hover, .cl-btn-outline-light:focus-visible { background: var(--cl-cream); color: var(--cl-ink-strong); } .cl-link-arrow { display: inline-flex; align-items: center; gap: 6px; font-family: var(--cl-font-body); font-size: 0.9375rem; font-weight: var(--cl-weight-semibold); color: var(--cl-roast); text-decoration: none; border: 0; border-bottom: 1px solid var(--cl-roast); padding-bottom: 2px; letter-spacing: 0.01em; transition: color var(--cl-dur-2) var(--cl-ease), border-color var(--cl-dur-2) var(--cl-ease); align-self: flex-start; } .cl-link-arrow::after { content: "→"; display: inline-block; transition: transform var(--cl-dur-2) var(--cl-ease); } .cl-link-arrow:hover, .cl-link-arrow:focus-visible { color: var(--cl-amber-dark); border-color: var(--cl-amber-dark); } .cl-link-arrow:hover::after { transform: translateX(4px); } .cl-card { display: flex; flex-direction: column; gap: var(--cl-space-4); } .cl-card__number { font-family: var(--cl-font-display); font-weight: var(--cl-weight-thin); font-style: italic; font-size: var(--cl-fs-number); line-height: 0.9; color: var(--cl-caramel); opacity: 0.85; letter-spacing: -0.04em; font-variation-settings: 'opsz' 144, 'SOFT' 100; margin: 0; user-select: none; } .cl-card__divider { display: block; width: 48px; height: 1px; background: var(--cl-roast); margin: var(--cl-space-3) 0 var(--cl-space-5) 0; } .cl-card__image { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--cl-radius-lg); box-shadow: var(--cl-shadow-sm); transition: transform var(--cl-dur-3) var(--cl-ease), box-shadow var(--cl-dur-3) var(--cl-ease); } .cl-card__title { font-family: var(--cl-font-display); font-weight: var(--cl-weight-medium); font-size: var(--cl-fs-h3); color: var(--cl-ink-strong); line-height: var(--cl-lh-snug); letter-spacing: var(--cl-tracking-tight); margin: 0; } .cl-card__body { font-family: var(--cl-font-body); font-size: var(--cl-fs-body); color: var(--cl-ink-soft); line-height: var(--cl-lh-relaxed); max-width: 38ch; margin: 0; } .cl-card:hover .cl-card__image { transform: translateY(-4px); box-shadow: var(--cl-shadow-md); } .cl-seal { display: flex; flex-direction: column; gap: var(--cl-space-2); padding-top: var(--cl-space-4); border-top: 1px solid var(--cl-hairline); } .cl-seal__icon { width: 28px; height: 28px; color: var(--cl-roast); stroke-width: 1.5; fill: none; margin-bottom: var(--cl-space-2); } .cl-seal__text { font-family: var(--cl-font-body); font-size: 0.9375rem; font-weight: var(--cl-weight-medium); color: var(--cl-ink); line-height: var(--cl-lh-snug); max-width: 22ch; } .cl-quote { position: relative; padding: var(--cl-space-2) 0 var(--cl-space-2) var(--cl-space-5); border-left: 2px solid var(--cl-caramel); font-family: var(--cl-font-display); font-style: italic; font-weight: var(--cl-weight-normal); font-size: clamp(1.5rem, 1.4vw + 1rem, 2rem); color: var(--cl-roast); line-height: var(--cl-lh-snug); letter-spacing: var(--cl-tracking-tight); margin: var(--cl-space-7) 0; max-width: 38ch; } .cl-section-header { display: flex; flex-direction: column; gap: var(--cl-space-3); margin-bottom: var(--cl-space-8); max-width: 60ch; } .cl-section-header h2 { margin: 0; } .cl-section-header .cl-lead { font-family: var(--cl-font-body); font-size: var(--cl-fs-lead); color: var(--cl-ink-soft); line-height: var(--cl-lh-relaxed); margin: 0; max-width: 56ch; } /* WhatsApp FAB */ .cl-whats-fab { position: fixed; bottom: 24px; right: 24px; z-index: 50; display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; border-radius: var(--cl-radius-pill); background: #25D366; color: #FFFFFF; text-decoration: none; box-shadow: 0 12px 28px rgba(37, 211, 102, 0.34); transition: transform var(--cl-dur-2) var(--cl-ease), box-shadow var(--cl-dur-2) var(--cl-ease), background var(--cl-dur-2) var(--cl-ease); } .cl-whats-fab svg { width: 30px; height: 30px; display: block; } .cl-whats-fab:hover, .cl-whats-fab:focus-visible { transform: translateY(-2px) scale(1.04); box-shadow: 0 16px 36px rgba(37, 211, 102, 0.44); background: #128C7E; } .cl-whats-fab:focus-visible { outline: 2px solid #25D366; outline-offset: 4px; } .cl-whats-fab--pulse::before { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); animation: cl-pulse 2.2s var(--cl-ease) infinite; pointer-events: none; } @keyframes cl-pulse { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.55); } 70% { box-shadow: 0 0 0 16px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } } .cl-whats-fab__tip { position: absolute; right: calc(100% + 12px); top: 50%; transform: translateY(-50%); padding: 8px 14px; background: var(--cl-ink-strong); color: var(--cl-bg); font-family: var(--cl-font-body); font-size: 0.8125rem; font-weight: var(--cl-weight-medium); white-space: nowrap; border-radius: var(--cl-radius-sm); opacity: 0; pointer-events: none; transition: opacity var(--cl-dur-2) var(--cl-ease); } .cl-whats-fab:hover .cl-whats-fab__tip, .cl-whats-fab:focus-visible .cl-whats-fab__tip { opacity: 1; } @media (max-width: 768px) { .cl-whats-fab__tip { display: none; } .cl-whats-fab { width: 56px; height: 56px; bottom: 20px; right: 20px; } } @media (prefers-reduced-motion: reduce) { .cl-whats-fab--pulse::before { animation: none; } } /* Textura kraft sutil em seções escuras */ .cl-tex-kraft { position: relative; isolation: isolate; } .cl-tex-kraft::after { content: ""; position: absolute; inset: 0; background-image: radial-gradient(circle at 20% 30%, rgba(255,255,255,0.025) 0 1px, transparent 2px), radial-gradient(circle at 70% 70%, rgba(255,255,255,0.020) 0 1px, transparent 2px), radial-gradient(circle at 40% 90%, rgba(255,255,255,0.022) 0 1px, transparent 2px); background-size: 240px 240px, 320px 320px, 200px 200px; mix-blend-mode: overlay; opacity: 0.6; pointer-events: none; z-index: -1; } /* ========================================================================= HEADER ========================================================================= */ .site-header { position: fixed; top: 0; left: 0; right: 0; z-index: 40; height: 72px; display: flex; align-items: center; background: transparent; transition: background var(--cl-dur-2) var(--cl-ease), border-color var(--cl-dur-2) var(--cl-ease), box-shadow var(--cl-dur-2) var(--cl-ease); border-bottom: 1px solid transparent; } .site-header.is-scrolled { background: rgba(246, 239, 227, 0.92); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); border-bottom: 1px solid var(--cl-hairline-soft); } .header-inner { width: var(--cl-container); display: flex; align-items: center; justify-content: space-between; gap: var(--cl-space-6); } .brand { display: inline-flex; align-items: baseline; gap: 4px; font-family: var(--cl-font-display); font-weight: var(--cl-weight-medium); font-size: 1.375rem; letter-spacing: var(--cl-tracking-tight); color: var(--cl-cream); text-decoration: none; transition: color var(--cl-dur-2) var(--cl-ease); } .site-header.is-scrolled .brand { color: var(--cl-ink-strong); } .brand-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--cl-caramel); } .nav { display: flex; align-items: center; gap: var(--cl-space-6); } .nav a { font-family: var(--cl-font-body); font-size: 0.875rem; font-weight: var(--cl-weight-medium); letter-spacing: 0.04em; color: var(--cl-cream); text-decoration: none; border: 0; transition: color var(--cl-dur-2) var(--cl-ease); } .site-header.is-scrolled .nav a { color: var(--cl-ink); } .nav a:hover { color: var(--cl-amber); } .nav .nav-cta { padding: 10px 18px; border-radius: var(--cl-radius-md); background: var(--cl-caramel); color: var(--cl-bg) !important; border: 0; } .nav .nav-cta:hover { background: var(--cl-amber); color: var(--cl-ink-strong) !important; } .menu-toggle { display: none; background: transparent; border: 0; width: 40px; height: 40px; cursor: pointer; padding: 8px; align-items: center; justify-content: center; flex-direction: column; gap: 5px; } .menu-toggle span { display: block; width: 24px; height: 1.5px; background: var(--cl-cream); transition: background var(--cl-dur-2) var(--cl-ease), transform var(--cl-dur-2) var(--cl-ease), opacity var(--cl-dur-2) var(--cl-ease); } .site-header.is-scrolled .menu-toggle span { background: var(--cl-ink); } .menu-toggle.is-open span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .menu-toggle.is-open span:nth-child(2) { opacity: 0; } .menu-toggle.is-open span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } .nav-mobile { position: fixed; top: 72px; left: 0; right: 0; background: var(--cl-bg); border-bottom: 1px solid var(--cl-hairline); display: flex; flex-direction: column; padding: var(--cl-space-4) var(--cl-space-5); gap: var(--cl-space-4); z-index: 39; box-shadow: var(--cl-shadow-md); } .nav-mobile a { font-family: var(--cl-font-body); font-size: 1rem; font-weight: var(--cl-weight-medium); color: var(--cl-ink); text-decoration: none; padding: var(--cl-space-2) 0; border: 0; border-bottom: 1px solid var(--cl-hairline-soft); } .nav-mobile a:last-child { border-bottom: 0; } @media (max-width: 880px) { .nav { display: none; } .menu-toggle { display: inline-flex; } } /* ========================================================================= HERO ========================================================================= */ .hero { position: relative; min-height: clamp(640px, 90vh, 880px); display: flex; align-items: center; overflow: hidden; isolation: isolate; color: var(--cl-cream); padding-block: var(--cl-section-py); } .hero-bg { position: absolute; inset: 0; z-index: -2; } .hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 60%; } .hero-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(42, 22, 5, 0.55) 0%, rgba(42, 22, 5, 0.20) 60%, rgba(42, 22, 5, 0.65) 100%); z-index: -1; } .hero-inner { max-width: 760px; position: relative; z-index: 1; } .hero-lead { font-family: var(--cl-font-body); font-size: var(--cl-fs-lead); line-height: var(--cl-lh-relaxed); color: rgba(239, 226, 205, 0.92); max-width: 540px; margin: 0 0 var(--cl-space-6) 0; } .hero-ctas { display: flex; flex-wrap: wrap; gap: var(--cl-space-4); } .hero-tag { position: absolute; top: 96px; right: var(--cl-space-7); z-index: 1; padding: 8px 14px; border-radius: var(--cl-radius-pill); background: rgba(246, 239, 227, 0.10); border: 1px solid rgba(239, 226, 205, 0.45); font-family: var(--cl-font-body); font-size: 0.75rem; font-weight: var(--cl-weight-medium); letter-spacing: var(--cl-tracking-wide); text-transform: uppercase; color: var(--cl-cream); } @media (max-width: 880px) { .hero-tag { display: none; } } .hero-scroll { position: absolute; bottom: 28px; left: 50%; transform: translateX(-50%); width: 1px; height: 32px; z-index: 1; overflow: hidden; } .hero-scroll span { display: block; width: 1px; height: 32px; background: linear-gradient(180deg, rgba(239, 226, 205, 0) 0%, var(--cl-cream) 50%, rgba(239, 226, 205, 0) 100%); animation: scroll-hint 2.4s var(--cl-ease) infinite; } @keyframes scroll-hint { 0% { transform: translateY(-100%); opacity: 0; } 40% { opacity: 1; } 100% { transform: translateY(100%); opacity: 0; } } @media (prefers-reduced-motion: reduce) { .hero-scroll span { animation: none; } } /* ========================================================================= 3 FRENTES ========================================================================= */ .frentes-head { display: grid; grid-template-columns: 5fr 7fr; gap: var(--cl-space-8); align-items: end; margin-bottom: var(--cl-space-9); } .frentes-head h2 { margin: var(--cl-space-3) 0 0; } .frentes-head h2 em { font-style: italic; color: var(--cl-roast); } .frentes-head .cl-lead { font-family: var(--cl-font-body); font-size: var(--cl-fs-lead); color: var(--cl-ink-soft); line-height: var(--cl-lh-relaxed); margin: 0; max-width: 56ch; } @media (max-width: 880px) { .frentes-head { grid-template-columns: 1fr; gap: var(--cl-space-5); } } .frentes-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cl-space-8); } @media (max-width: 880px) { .frentes-grid { grid-template-columns: 1fr; gap: var(--cl-space-9); } } /* ========================================================================= POR ELLEN ========================================================================= */ .ellen-grid { display: grid; grid-template-columns: 5fr 7fr; gap: var(--cl-space-9); align-items: start; } .ellen-figure { position: relative; margin-top: -32px; } .ellen-figure img { position: relative; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--cl-radius-xl); box-shadow: var(--cl-shadow-md); z-index: 2; } .ellen-figure__bg { position: absolute; inset: 0; background: var(--cl-caramel); border-radius: var(--cl-radius-xl); transform: translate(16px, 16px); opacity: 0.85; z-index: 1; } .ellen-body h2 em { font-style: italic; color: var(--cl-roast); } .ellen-body p { color: var(--cl-ink-soft); font-size: var(--cl-fs-body); line-height: var(--cl-lh-relaxed); } .ellen-seals { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--cl-space-5); margin-top: var(--cl-space-6); } @media (max-width: 1024px) { .ellen-grid { grid-template-columns: 1fr; gap: var(--cl-space-7); } .ellen-figure { margin-top: 0; max-width: 480px; } .ellen-seals { grid-template-columns: repeat(2, 1fr); } } /* ========================================================================= PROCESSOS ========================================================================= */ .processo { display: grid; grid-template-columns: 96px 1fr; gap: var(--cl-space-6); align-items: start; padding-bottom: var(--cl-space-8); border-bottom: 1px solid var(--cl-hairline); margin-bottom: var(--cl-space-8); } .processo:last-child { border-bottom: 0; margin-bottom: 0; } .processo__num { font-family: var(--cl-font-display); font-weight: var(--cl-weight-thin); font-style: italic; font-size: clamp(3.5rem, 5vw + 1rem, 5rem); line-height: 0.9; color: var(--cl-caramel); opacity: 0.9; letter-spacing: -0.04em; font-variation-settings: 'opsz' 144; } .processo__body h3 { margin: 0 0 var(--cl-space-3); } .processo__body p { color: var(--cl-ink-soft); margin: 0; max-width: 60ch; } @media (max-width: 600px) { .processo { grid-template-columns: 1fr; gap: var(--cl-space-3); } } /* ========================================================================= BRINDES (bloco escuro) ========================================================================= */ .brindes-grid { display: grid; grid-template-columns: 6fr 6fr; gap: var(--cl-space-9); align-items: center; } .brindes-text h2, .brindes-text p, .brindes-text li, .brindes-text strong { color: var(--cl-cream); } .h2-on-dark { color: var(--cl-sand); font-family: var(--cl-font-display); font-weight: var(--cl-weight-normal); font-size: var(--cl-fs-h2); line-height: var(--cl-lh-tight); letter-spacing: var(--cl-tracking-tight); margin: 0 0 var(--cl-space-5); } .h2-on-dark em { font-style: italic; color: var(--cl-amber); } .lead-on-dark { color: rgba(239, 226, 205, 0.85); font-size: var(--cl-fs-lead); line-height: var(--cl-lh-relaxed); margin: 0 0 var(--cl-space-6); max-width: 56ch; } .brindes-bullets { list-style: none; padding: 0; margin: 0 0 var(--cl-space-7); display: grid; gap: var(--cl-space-4); } .brindes-bullets li { padding-top: var(--cl-space-4); border-top: 1px solid rgba(239, 226, 205, 0.25); display: flex; flex-direction: column; gap: 4px; } .brindes-bullets li strong { font-family: var(--cl-font-body); font-weight: var(--cl-weight-semibold); font-size: 1rem; color: var(--cl-cream); } .brindes-bullets li span { font-size: 0.875rem; color: rgba(239, 226, 205, 0.7); } .brindes-figure { position: relative; aspect-ratio: 4 / 5; } .brindes-img { position: absolute; width: 78%; height: 78%; object-fit: cover; border-radius: var(--cl-radius-lg); box-shadow: var(--cl-shadow-lg); } .brindes-img--back { top: 0; left: 0; } .brindes-img--front { bottom: 0; right: 0; border: 4px solid var(--cl-deep); } @media (max-width: 1024px) { .brindes-grid { grid-template-columns: 1fr; gap: var(--cl-space-7); } .brindes-figure { max-width: 480px; margin: 0 auto; width: 100%; } } /* ========================================================================= EVENTOS ========================================================================= */ .eventos-grid { display: grid; grid-template-columns: 7fr 5fr; gap: var(--cl-space-9); align-items: center; } .eventos-figure img { width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: var(--cl-radius-xl); box-shadow: var(--cl-shadow-md); } .eventos-body h2 em { font-style: italic; color: var(--cl-roast); } .eventos-body p { color: var(--cl-ink-soft); } @media (max-width: 1024px) { .eventos-grid { grid-template-columns: 1fr; gap: var(--cl-space-7); } } /* ========================================================================= PROVA SOCIAL ========================================================================= */ .prova-figure { margin: var(--cl-space-7) 0 var(--cl-space-5); } .prova-figure img { width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--cl-radius-xl); box-shadow: var(--cl-shadow-md); } .prova-credit { font-family: var(--cl-font-body); font-size: 0.875rem; font-weight: var(--cl-weight-semibold); color: var(--cl-ink-soft); letter-spacing: var(--cl-tracking-wide); text-transform: uppercase; margin: 0 0 var(--cl-space-7); } .prova-quote { margin: var(--cl-space-7) auto 0; color: var(--cl-ink); text-align: left; } .center-text .cl-quote { display: inline-block; text-align: left; } /* ========================================================================= FAQ ========================================================================= */ .faq { display: flex; flex-direction: column; } .faq-item { border-bottom: 1px solid var(--cl-hairline); } .faq-item summary { list-style: none; cursor: pointer; padding: var(--cl-space-5) 0; display: flex; justify-content: space-between; align-items: center; gap: var(--cl-space-4); font-family: var(--cl-font-body); font-size: 1.125rem; font-weight: var(--cl-weight-semibold); color: var(--cl-ink); transition: color var(--cl-dur-2) var(--cl-ease); } .faq-item summary::-webkit-details-marker { display: none; } .faq-item summary::after { content: "+"; font-family: var(--cl-font-display); font-weight: var(--cl-weight-thin); font-size: 1.75rem; color: var(--cl-ink-soft); line-height: 1; transition: transform var(--cl-dur-2) var(--cl-ease), color var(--cl-dur-2) var(--cl-ease); } .faq-item[open] summary::after { content: "−"; color: var(--cl-caramel); transform: rotate(0deg); } .faq-item[open] summary { color: var(--cl-ink-strong); } .faq-item:hover summary { color: var(--cl-roast); } .faq-answer { padding: 0 0 var(--cl-space-6); } .faq-answer p { color: var(--cl-ink-soft); font-size: 1rem; line-height: var(--cl-lh-relaxed); max-width: 62ch; margin: 0; } /* ========================================================================= CTA FINAL + FORM ========================================================================= */ .cta-final { text-align: center; } .cta-final .cl-eyebrow { color: var(--cl-amber); } .cta-final p { margin-inline: auto; } .form-card { display: grid; gap: var(--cl-space-5); margin-top: var(--cl-space-7); padding: clamp(24px, 4vw, 40px); background: rgba(246, 239, 227, 0.06); border: 1px solid rgba(239, 226, 205, 0.2); border-radius: var(--cl-radius-lg); text-align: left; } .form-card label { display: flex; flex-direction: column; gap: var(--cl-space-2); } .form-card label > span { font-family: var(--cl-font-body); font-size: 0.8125rem; font-weight: var(--cl-weight-semibold); letter-spacing: var(--cl-tracking-wide); text-transform: uppercase; color: rgba(239, 226, 205, 0.85); } .form-card input, .form-card select, .form-card textarea { width: 100%; padding: 14px 16px; border-radius: var(--cl-radius-sm); background: rgba(246, 239, 227, 0.95); border: 1px solid rgba(64, 32, 0, 0.15); color: var(--cl-ink); font-family: var(--cl-font-body); font-size: 1rem; line-height: 1.4; outline: none; transition: border-color var(--cl-dur-2) var(--cl-ease), box-shadow var(--cl-dur-2) var(--cl-ease); } .form-card input:focus, .form-card select:focus, .form-card textarea:focus { border-color: var(--cl-caramel); box-shadow: 0 0 0 3px rgba(154, 90, 43, 0.25); } .form-card button[type="submit"] { justify-self: stretch; width: 100%; justify-content: center; } .form-note { font-size: 0.8125rem; color: rgba(239, 226, 205, 0.7); margin: 0; text-align: center; } /* ========================================================================= FOOTER ========================================================================= */ .footer { background: var(--cl-ink-strong); color: var(--cl-cream); padding-block: var(--cl-space-9) var(--cl-space-6); } .footer-inner { display: flex; flex-direction: column; gap: var(--cl-space-7); } .footer-brand .footer-mark { font-family: var(--cl-font-display); font-weight: var(--cl-weight-medium); font-size: 1.5rem; color: var(--cl-sand); letter-spacing: var(--cl-tracking-tight); } .footer-claim { font-family: var(--cl-font-display); font-style: italic; font-size: 1rem; color: rgba(239, 226, 205, 0.7); margin: var(--cl-space-3) 0 0; } .footer-cols { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--cl-space-7); } .footer-cols h5 { font-family: var(--cl-font-body); font-size: 0.75rem; font-weight: var(--cl-weight-semibold); letter-spacing: var(--cl-tracking-wide); text-transform: uppercase; color: var(--cl-caramel); margin: 0 0 var(--cl-space-4); } .footer-cols ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: var(--cl-space-3); } .footer-cols a { color: var(--cl-cream); text-decoration: none; font-size: 0.9375rem; border: 0; transition: color var(--cl-dur-2) var(--cl-ease); } .footer-cols a:hover { color: var(--cl-amber); } .footer-cols li { color: rgba(239, 226, 205, 0.75); font-size: 0.9375rem; } .footer-bottom { display: flex; justify-content: space-between; align-items: center; gap: var(--cl-space-4); padding-top: var(--cl-space-5); border-top: 1px solid rgba(239, 226, 205, 0.15); font-size: 0.8125rem; color: rgba(239, 226, 205, 0.55); } .footer-tag strong { color: var(--cl-cream); font-weight: var(--cl-weight-semibold); } @media (max-width: 768px) { .footer-cols { grid-template-columns: 1fr; gap: var(--cl-space-6); } .footer-bottom { flex-direction: column; align-items: flex-start; } } /* ========================================================================= REVEAL ON SCROLL ========================================================================= */ .cl-reveal { opacity: 0; transform: translateY(28px); transition: opacity var(--cl-dur-4) var(--cl-ease), transform var(--cl-dur-4) var(--cl-ease); will-change: opacity, transform; } .cl-reveal.is-in { opacity: 1; transform: translateY(0); } .cl-reveal--delay-1 { transition-delay: 80ms; } .cl-reveal--delay-2 { transition-delay: 160ms; } .cl-reveal--delay-3 { transition-delay: 240ms; } @media (prefers-reduced-motion: reduce) { .cl-reveal { opacity: 1; transform: none; transition: none; } } /* ========================================================================= FALLBACK em h2 do hero etc. para evitar conflito com defaults do tokens ========================================================================= */ h2 em { font-style: italic; } h2 { text-wrap: balance; } /* Espaçamento extra entre section deep brindes */ .section--deep + .section { padding-top: var(--cl-section-py); } /* Mobile fix gerais */ @media (max-width: 600px) { .hero-inner { padding-top: var(--cl-space-7); } .frentes-grid { gap: var(--cl-space-7); } .form-card { padding: 20px; } }