:root { --green: #00A67E; --green-dark: #007A5E; --green-light: #E6F7F3; --navy: #0D1F2D; --footer-bg: #121a2e; --navy-mid: #1A3347; --cream: #F5F4EF; --warm: #EDE8DF; --gold: #C8A96E; /* Dourado para TEXTO sobre fundos claros — o --gold puro (#C8A96E) rende ~1.9:1 sobre creme, ilegível. Esta variante escura atinge contraste AA. Use --gold apenas para fundos/bordas/decoração. */ --gold-text: #8A6A1F; --text: #2A2A2A; /* Texto secundário — escurecido de #6B7280 (~5:1) para ~7:1 (AAA) sobre creme, melhor leitura para o público 60+. */ --muted: #4B5563; --white: #FFFFFF; } * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .nav-links a, .faq-summary, .faq-summary .arrow, .reveal-card { transition: none !important; } .reveal-card.reveal-card--pending { opacity: 1 !important; transform: none !important; } } body { font-family: 'DM Sans', sans-serif; background: var(--cream); color: var(--text); font-size: 16px; line-height: 1.6; } /* NAV (header) — seletor restrito ao nav de topo do para não atingir outros

em includes (ex.: footer "Links legais"). */ body > nav { position: fixed; top: 0; width: 100%; z-index: 100; background: var(--cream); border-bottom: 1px solid rgba(200, 169, 110, 0.2); padding: 0.45rem 5%; display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; min-height: 68px; height: auto; flex-wrap: wrap; box-sizing: border-box; row-gap: 0.5rem; } .logo { display: inline-flex; align-items: center; line-height: 0; text-decoration: none; color: inherit; } /* Logo horizontal (ex.: 824×143) — proporção nos atributos width/height do */ .logo-img { width: auto; height: 40px; max-height: 40px; max-width: min(320px, 72vw); object-fit: contain; object-position: left center; display: block; } .footer-brand .logo-img { height: 32px; max-height: 32px; max-width: min(280px, 85vw); } .nav-links { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 1.1rem 1.25rem; list-style: none; margin-left: auto; max-width: min(100%, 72rem); } .nav-links li { display: flex; align-items: center; } .nav-links a { text-decoration: none; color: var(--navy-mid); font-size: 1rem; font-weight: 500; line-height: 1.35; transition: color 0.2s; } .nav-links a:hover { color: var(--green); } /* Comprar / Vender — links diretos (sem dropdown) */ .nav-links a.nav-link--marketplace { color: var(--white) !important; background: var(--green); border: 1px solid rgba(0, 0, 0, 0.12); padding: 0.42rem 0.85rem; border-radius: 8px; font-weight: 600; box-shadow: 0 2px 10px rgba(0, 166, 126, 0.28); display: inline-flex; align-items: center; line-height: 1.2; transition: background 0.2s, color 0.2s, box-shadow 0.2s; } .nav-links a.nav-link--marketplace:hover, .nav-links a.nav-link--marketplace:focus-visible { color: var(--white) !important; background: var(--green-dark); outline: none; box-shadow: 0 3px 14px rgba(0, 122, 94, 0.35); } .nav-links a.nav-link--vender { color: var(--green-dark) !important; border: 1px solid rgba(0, 166, 126, 0.45); padding: 0.38rem 0.8rem; border-radius: 8px; font-weight: 600; background: rgba(0, 166, 126, 0.06); display: inline-flex; align-items: center; line-height: 1.2; transition: background 0.2s, color 0.2s, border-color 0.2s; } .nav-links a.nav-link--vender:hover, .nav-links a.nav-link--vender:focus-visible { color: var(--white) !important; background: var(--green); border-color: var(--green); outline: none; } .nav-logout-form { display: inline; margin: 0; padding: 0; } .nav-logout-form .nav-link-button { display: inline; background: none; border: none; padding: 0; margin: 0; font: inherit; font-size: 1rem; font-weight: 500; line-height: 1.35; color: var(--navy-mid); cursor: pointer; transition: color 0.2s; text-decoration: none; } .nav-logout-form .nav-link-button:hover { color: var(--green); } .nav-cta { background: var(--navy); color: var(--white) !important; padding: 0.5rem 1.15rem; border-radius: 6px; font-weight: 500 !important; line-height: 1.35; } .nav-cta:hover { background: var(--green); color: var(--white) !important; } .nav-cta-wa { display: inline-flex; align-items: center; gap: 0.45rem; } .btn-wa { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; } .wa-btn-icon { width: 22px; height: 22px; flex-shrink: 0; object-fit: contain; } /* HERO */ .hero { min-height: 100vh; background: var(--navy); display: flex; align-items: center; position: relative; overflow: hidden; padding: 120px 5% 80px; } .hero-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 70% 60% at 80% 50%, rgba(0, 166, 126, 0.12) 0%, transparent 60%), radial-gradient(ellipse 40% 40% at 20% 80%, rgba(200, 169, 110, 0.08) 0%, transparent 50%); } .hero-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.03) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.03) 1px, transparent 1px); background-size: 60px 60px; } .hero-inner { position: relative; max-width: 1100px; margin: 0 auto; width: 100%; } .hero-badge { display: inline-flex; align-items: center; gap: 0.5rem; background: rgba(0, 166, 126, 0.15); border: 1px solid rgba(0, 166, 126, 0.3); color: var(--green); padding: 0.4rem 1rem; border-radius: 100px; font-size: 0.8rem; font-weight: 500; letter-spacing: 0.5px; text-transform: uppercase; margin-bottom: 2rem; animation: fadeUp 0.6s ease both; } .hero h1 { font-family: 'Fraunces', serif; font-size: clamp(2.4rem, 5vw, 4.2rem); font-weight: 800; color: var(--white); line-height: 1.1; letter-spacing: -1.5px; max-width: 750px; margin-bottom: 1.5rem; animation: fadeUp 0.6s 0.1s ease both; } .hero h1 em { font-style: italic; color: var(--gold); font-weight: 300; } .hero p { color: rgba(255,255,255,0.65); font-size: 1.1rem; max-width: 520px; margin-bottom: 2.5rem; line-height: 1.7; animation: fadeUp 0.6s 0.2s ease both; } .hero-ctas { display: flex; gap: 1rem; flex-wrap: wrap; animation: fadeUp 0.6s 0.3s ease both; } .btn-primary { background: var(--green); color: var(--white); padding: 0.9rem 1.8rem; border-radius: 8px; font-weight: 500; font-size: 0.95rem; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; transition: all 0.25s; border: none; cursor: pointer; } .btn-primary:hover { background: var(--green-dark); transform: translateY(-2px); box-shadow: 0 8px 24px rgba(0,166,126,0.35); } .btn-outline { background: transparent; color: var(--white); padding: 0.9rem 1.8rem; border-radius: 8px; font-weight: 500; font-size: 0.95rem; text-decoration: none; display: inline-flex; align-items: center; gap: 0.5rem; border: 1px solid rgba(255,255,255,0.25); transition: all 0.25s; } .btn-outline:hover { border-color: var(--gold); color: var(--gold); transform: translateY(-2px); } .hero-stats { display: flex; gap: 3rem; margin-top: 4rem; padding-top: 3rem; border-top: 1px solid rgba(255,255,255,0.08); animation: fadeUp 0.6s 0.4s ease both; } .stat-num { font-family: 'Fraunces', serif; font-size: 2rem; font-weight: 800; color: var(--gold); } .stat-label { font-size: 0.8rem; color: rgba(255,255,255,0.45); text-transform: uppercase; letter-spacing: 0.5px; } /* SECTIONS */ section { padding: 100px 5%; } .section-inner { max-width: 1100px; margin: 0 auto; } .section-tag { font-size: 0.78rem; font-weight: 500; text-transform: uppercase; letter-spacing: 1.5px; color: var(--green); margin-bottom: 0.8rem; } .section-title { font-family: 'Fraunces', serif; font-size: clamp(2rem, 3.5vw, 2.8rem); font-weight: 800; color: var(--navy); line-height: 1.15; letter-spacing: -1px; margin-bottom: 1rem; } .section-sub { color: var(--muted); font-size: 1.05rem; max-width: 520px; line-height: 1.7; } /* OPPORTUNITY */ .opportunity { background: var(--cream); } .opp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 5rem; align-items: center; margin-top: 3.5rem; } .opp-cards { display: flex; flex-direction: column; gap: 1rem; } .opp-card { background: var(--white); border: 1px solid var(--warm); border-radius: 12px; padding: 1.3rem 1.5rem; display: flex; align-items: flex-start; gap: 1rem; transition: border-color 0.2s, box-shadow 0.2s; } .opp-card:hover { border-color: var(--green); box-shadow: 0 4px 20px rgba(0,166,126,0.08); } .opp-icon { width: 42px; height: 42px; background: var(--green-light); border-radius: 10px; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; flex-shrink: 0; } .opp-card h4 { font-weight: 600; font-size: 0.95rem; color: var(--navy); margin-bottom: 0.3rem; } .opp-card p { font-size: 0.85rem; color: var(--muted); } /* EXAMPLE BOX */ .example-box { background: var(--navy); border-radius: 16px; padding: 2.5rem; position: relative; overflow: hidden; } .example-box::before { content: ''; position: absolute; top: -40px; right: -40px; width: 180px; height: 180px; background: radial-gradient(circle, rgba(0,166,126,0.2), transparent 70%); border-radius: 50%; } .example-box .ex-tag { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 1px; color: var(--gold); margin-bottom: 1.5rem; font-weight: 500; } .ex-row { display: flex; justify-content: space-between; align-items: center; padding: 0.8rem 0; border-bottom: 1px solid rgba(255,255,255,0.07); } .ex-row:last-of-type { border: none; } .ex-label { color: rgba(255,255,255,0.5); font-size: 0.85rem; } .ex-value { font-family: 'Fraunces', serif; font-size: 1.3rem; font-weight: 600; color: var(--white); } .ex-highlight .ex-value { color: var(--gold); } .ex-note { margin-top: 1.5rem; background: rgba(0,166,126,0.12); border: 1px solid rgba(0,166,126,0.2); border-radius: 8px; padding: 0.8rem 1rem; color: rgba(255,255,255,0.7); font-size: 0.82rem; line-height: 1.5; } /* HOW IT WORKS */ .how { background: var(--white); } .how-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 2.5rem; margin-top: 3.5rem; } .how-card { background: var(--cream); border-radius: 16px; padding: 2.5rem; border: 1px solid var(--warm); } .how-card-header { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 2rem; } .how-card-icon { width: 48px; height: 48px; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; } .how-card.buy .how-card-icon { background: var(--navy); } .how-card.sell .how-card-icon { background: var(--green-light); } .how-card h3 { font-family: 'Fraunces', serif; font-size: 1.3rem; font-weight: 700; color: var(--navy); } .steps { list-style: none; display: flex; flex-direction: column; gap: 1rem; } .step { display: flex; gap: 1rem; align-items: flex-start; } .step-num { width: 28px; height: 28px; border-radius: 50%; background: var(--navy); color: var(--white); font-size: 0.75rem; font-weight: 600; display: flex; align-items: center; justify-content: center; flex-shrink: 0; margin-top: 2px; } .how-card.sell .step-num { background: var(--green); } .step p { font-size: 0.92rem; color: var(--text); line-height: 1.5; } /* Como funciona — jornadas de negócio (diagramas SVG) */ .sequence-flow { background: var(--cream); padding: 56px 5% 72px; border-top: 1px solid var(--warm); } .sequence-flow-title { font-family: 'Fraunces', Georgia, serif; font-size: 1.75rem; font-weight: 700; color: var(--navy); margin-bottom: 0.75rem; } .sequence-flow-lead { font-size: 0.95rem; color: var(--muted); line-height: 1.7; max-width: 42rem; margin-bottom: 1.75rem; } .journey-slides { max-width: 1180px; margin: 0 auto; } .journey-toggle { display: flex; justify-content: center; margin-bottom: 1.75rem; } .journey-toggle-rail { position: relative; display: flex; width: 100%; max-width: 400px; padding: 5px; border-radius: 999px; background: var(--warm); border: 1px solid rgba(200, 169, 110, 0.35); } .journey-toggle-indicator { position: absolute; top: 5px; left: 5px; width: calc(50% - 5px); height: calc(100% - 10px); border-radius: 999px; background: var(--white); box-shadow: 0 3px 14px rgba(13, 31, 45, 0.1); transition: transform 0.28s ease; z-index: 0; pointer-events: none; } .journey-toggle-rail[data-active="venda"] .journey-toggle-indicator { transform: translateX(100%); } .journey-toggle-btn { position: relative; z-index: 1; flex: 1; border: none; background: transparent; padding: 0.85rem 1.25rem; font-family: 'DM Sans', system-ui, sans-serif; font-size: 1rem; font-weight: 600; cursor: pointer; border-radius: 999px; color: var(--muted); transition: color 0.2s ease; } .journey-toggle-btn:hover { color: var(--navy); } .journey-toggle-btn.is-active { color: var(--navy); } .journey-toggle-btn:focus-visible { outline: 2px solid var(--green); outline-offset: 3px; } .journey-panels { position: relative; min-height: 420px; } .journey-panel[hidden] { display: none !important; } .sequence-figure { margin: 0; background: var(--white); border: 1px solid var(--warm); border-radius: 16px; padding: 1.5rem 1.25rem 2rem; box-shadow: 0 4px 24px rgba(13, 31, 45, 0.06); } .sequence-caption { display: flex; flex-direction: column; gap: 0.35rem; margin-bottom: 1rem; padding: 0 0.25rem; } .sequence-caption-tag { display: inline-block; width: fit-content; font-size: 0.7rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.25rem 0.6rem; border-radius: 6px; } .sequence-caption-tag--buy { background: var(--navy); color: var(--white); } .sequence-caption-tag--sell { background: var(--green-light); color: var(--green-dark); } .sequence-caption-title { font-family: 'Fraunces', Georgia, serif; font-size: 1.2rem; font-weight: 600; color: var(--navy); } .sequence-svg-wrap { -webkit-overflow-scrolling: touch; margin: 0 -0.35rem; padding: 0.5rem 0.35rem 0.75rem; } .sequence-svg { display: block; width: 100%; height: auto; max-height: none; } .sequence-svg:focus { outline: 2px solid var(--green); outline-offset: 4px; border-radius: 8px; } @media (min-width: 768px) { .sequence-svg { min-height: 380px; } } @media (max-width: 640px) { .journey-toggle-rail { max-width: none; } } /* SECURITY */ .security { background: var(--navy); } .security .section-title { color: var(--white); } .security .section-sub { color: rgba(255,255,255,0.5); } .security .section-tag { color: var(--gold); } .security-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1.5rem; margin-top: 3.5rem; } .sec-card { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 2rem 1.5rem; transition: border-color 0.2s; } .sec-card:hover { border-color: rgba(0,166,126,0.4); } .sec-card .icon { font-size: 1.8rem; margin-bottom: 1rem; display: block; } .sec-card h4 { font-family: 'Fraunces', serif; font-size: 1rem; font-weight: 600; color: var(--white); margin-bottom: 0.5rem; } .sec-card p { font-size: 0.82rem; color: rgba(255,255,255,0.45); line-height: 1.5; } /* DIFFERENTIALS */ .diffs { background: var(--cream); } .diffs-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.2rem; margin-top: 3.5rem; } .diff-item { display: flex; align-items: flex-start; gap: 1rem; background: var(--white); border-radius: 12px; padding: 1.5rem; border: 1px solid var(--warm); } .diff-check { width: 32px; height: 32px; background: var(--green); border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-size: 0.9rem; flex-shrink: 0; } .diff-item h4 { font-weight: 600; color: var(--navy); font-size: 0.95rem; margin-bottom: 0.2rem; } .diff-item p { font-size: 0.83rem; color: var(--muted); } /* Scroll reveal — classes alternadas por site.js (IntersectionObserver); sem JS, elementos permanecem visíveis */ .reveal-card.reveal-card--pending { opacity: 0; transform: translateY(16px); transition: opacity 0.5s ease, transform 0.5s ease; } .reveal-card.reveal-card--visible { opacity: 1; transform: translateY(0); } /* FAQ */ .faq { background: var(--cream); border-top: 1px solid rgba(200, 169, 110, 0.22); } .faq-list { margin-top: 3.5rem; display: flex; flex-direction: column; gap: 1rem; max-width: 780px; } .faq-item { background: var(--white); border: 1px solid var(--warm); border-radius: 12px; overflow: hidden; box-shadow: 0 2px 12px rgba(13, 31, 45, 0.04); } .faq-summary { width: 100%; list-style: none; padding: 1.3rem 1.5rem; text-align: left; font-family: 'DM Sans', sans-serif; font-size: 0.95rem; font-weight: 600; color: var(--navy); cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 1rem; transition: background 0.2s; } .faq-summary::-webkit-details-marker { display: none; } .faq-summary:hover { background: var(--cream); } .faq-summary:focus-visible { outline: 2px solid var(--green); outline-offset: 2px; } .faq-summary .arrow { width: 24px; height: 24px; border-radius: 50%; background: var(--green-light); color: var(--green); display: flex; align-items: center; justify-content: center; font-size: 0.9rem; flex-shrink: 0; transition: transform 0.3s; } details.faq-item[open] > .faq-summary .arrow { transform: rotate(45deg); } .faq-a { padding: 0 1.5rem 1.3rem; font-size: 0.9rem; color: var(--muted); line-height: 1.6; } /* CTA SECTION */ .cta-section { background: var(--green); padding: 80px 5%; } .cta-inner { max-width: 1100px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 3rem; flex-wrap: wrap; } .cta-section h2 { font-family: 'Fraunces', serif; font-size: clamp(1.8rem, 3vw, 2.5rem); font-weight: 800; color: var(--white); letter-spacing: -0.5px; max-width: 500px; } .cta-section h2 em { font-style: italic; font-weight: 300; } .cta-btns { display: flex; gap: 1rem; flex-wrap: wrap; } .btn-white { background: var(--white); color: var(--green); padding: 0.9rem 1.8rem; border-radius: 8px; font-weight: 600; font-size: 0.95rem; text-decoration: none; transition: all 0.2s; } .btn-white:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(0,0,0,0.15); } .btn-ghost-white { background: transparent; color: var(--white); border: 2px solid rgba(255,255,255,0.5); padding: 0.9rem 1.8rem; border-radius: 8px; font-weight: 500; font-size: 0.95rem; text-decoration: none; transition: all 0.2s; } .btn-ghost-white:hover { border-color: white; } /* FOOTER (só o rodapé do site: não usar `footer` puro — atribuições em

também usam
e herdaríam fundo escuro / contraste errado) */ body > footer { background: var(--footer-bg); color: rgba(255,255,255,0.4); padding: 3rem 5%; font-size: 0.82rem; line-height: 1.7; } .footer-inner { max-width: 1100px; margin: 0 auto; display: flex; flex-direction: column; align-items: center; } .footer-row { display: flex; gap: 2rem; align-items: flex-start; justify-content: center; width: 100%; max-width: 1024px; flex-wrap: wrap; } .footer-brand { flex: 1; min-width: min(100%, 240px); text-align: center; } .footer-brand .logo { margin-bottom: 0.5rem; } .footer-logo-img { margin-left: auto; margin-right: auto; } .footer-tagline { margin-top: 1rem; text-align: justify; } .footer-links-col { flex: 1; min-width: min(100%, 200px); text-align: right; } .footer-disclaimer { display: inline-block; max-width: 580px; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 1.5rem; margin-top: 0; font-size: 0.78rem; color: rgba(255,255,255,0.3); } .footer-bottom { max-width: 1100px; margin: 1.5rem auto 0; text-align: center; } /* ABOUT */ .about { background: var(--white); border-top: 1px solid rgba(200, 169, 110, 0.22); } .about-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 5rem; align-items: start; margin-top: 2.75rem; padding: 2.25rem 2.5rem; background: var(--cream); border-radius: 16px; border: 1px solid rgba(200, 169, 110, 0.28); box-shadow: 0 4px 28px rgba(13, 31, 45, 0.06); } .about p { color: var(--muted); line-height: 1.8; margin-bottom: 1rem; } .about .mvv-card { background: var(--white); border: 1px solid var(--warm); border-left: 3px solid var(--green); } .mvv-grid { display: flex; flex-direction: column; gap: 1.2rem; } .mvv-card { background: var(--cream); border-radius: 12px; padding: 1.5rem; border-left: 3px solid var(--green); } .mvv-card h4 { font-weight: 600; color: var(--navy); font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.4rem; } .mvv-card p { color: var(--muted); font-size: 0.88rem; margin: 0; } .values-tags { display: flex; gap: 0.6rem; flex-wrap: wrap; margin-top: 0.5rem; } .tag { background: var(--green-light); color: var(--green-dark); border-radius: 100px; padding: 0.25rem 0.8rem; font-size: 0.8rem; font-weight: 500; } /* ABOUT — parceiro operacional (Forttu) */ .about-partner { margin-top: 2rem; padding: 2.25rem 2.5rem; background: var(--white); border-radius: 16px; border: 1px solid rgba(200, 169, 110, 0.28); box-shadow: 0 4px 28px rgba(13, 31, 45, 0.06); } .about-partner-tag { color: var(--green-dark); font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 0.4rem; } .about-partner-title { color: var(--navy); font-size: 1.35rem; font-weight: 600; margin-bottom: 0.9rem; } .about .about-partner-lead { color: var(--muted); line-height: 1.8; margin-bottom: 1.5rem; } .about-partner-legal { border-top: 1px solid rgba(200, 169, 110, 0.28); padding-top: 1.25rem; } .about .about-partner-legal p { color: var(--muted); font-size: 0.82rem; line-height: 1.7; margin-bottom: 0.85rem; } .about .about-partner-legal p:last-child { margin-bottom: 0; } .about-partner-legal-link { color: var(--green-dark); text-decoration: underline; } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } /* HAMBURGER */ .menu-toggle { display: none; background: none; border: none; cursor: pointer; flex-direction: column; gap: 5px; padding: 4px; } .menu-toggle span { display: block; width: 22px; height: 2px; background: var(--navy); border-radius: 2px; } @media (max-width: 768px) { .menu-toggle { display: flex; } .nav-cart-link { margin-left: auto; } .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; gap: 1rem; align-items: stretch; background: var(--cream); padding: 1rem 5% 1.25rem; border-bottom: 1px solid rgba(200, 169, 110, 0.2); z-index: 99; } .nav-links.nav-open { display: flex !important; } .nav-links a.nav-link--marketplace, .nav-links a.nav-link--vender { width: 100%; justify-content: center; text-align: center; box-sizing: border-box; } .hero h1 { font-size: 2.4rem; } .hero-stats { flex-wrap: wrap; gap: 1.5rem; } .opp-grid, .how-cols, .about-grid { grid-template-columns: 1fr; gap: 2.5rem; } .about-grid { padding: 1.5rem 1.25rem; } .about-partner { padding: 1.5rem 1.25rem; } .security-grid { grid-template-columns: 1fr 1fr; gap: 1rem; } .security-grid .sec-card { padding: 1.4rem 1.1rem; } .diffs-grid { grid-template-columns: 1fr; } .cta-inner { flex-direction: column; } .footer-row { flex-direction: column; align-items: center; } .footer-links-col { text-align: center; } } @media (max-width: 480px) { .security-grid { grid-template-columns: 1fr; } } /* Footer */ .footer-heading { color: rgba(255, 255, 255, 0.5); } .footer-link { color: rgba(255, 255, 255, 0.35); text-decoration: none; } .footer-link:hover { color: rgba(255, 255, 255, 0.6); } /* CTA buttons (how section) */ .btn-fit { width: fit-content; } .btn-sell { width: fit-content; background: var(--green); } .how-card-cta { margin-top: 1rem; } /* ===== INNER PAGES (buy / sell — /comprar/ /vender/) ===== */ /* Page hero — compact version for inner pages */ .page-hero { background: var(--navy); padding: 120px 5% 60px; } .page-hero .section-tag { color: var(--gold); } .page-hero .section-title { color: var(--white); } .page-hero .section-sub { color: rgba(255, 255, 255, 0.55); } /* Secondary section title (usado dentro de secções que já têm h1 acima) */ .section-title--sub { font-size: 1.6rem; margin-bottom: 0.5rem; } /* Âncoras de navegação interna (ex.: /faq/ → Perguntas | Glossário) */ .page-anchors { margin-top: 1rem; display: inline-flex; align-items: center; gap: 0.5rem; font-size: 0.92rem; } .page-hero .page-anchors { color: rgba(255, 255, 255, 0.85); } .page-anchor-link { color: var(--gold); text-decoration: none; font-weight: 500; padding: 0.25rem 0.5rem; border-radius: 6px; transition: background 0.2s, color 0.2s; } .page-anchor-link:hover, .page-anchor-link:focus-visible { background: rgba(255, 255, 255, 0.08); color: var(--white); } .page-anchor-sep { color: rgba(255, 255, 255, 0.35); } /* FILTER PANEL */ .filter-section { background: var(--cream); padding: 40px 5% 20px; } .filter-panel { background: var(--white); border: 1px solid var(--warm); border-radius: 16px; padding: 2rem; } .filter-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); gap: 1rem 1.5rem; } .filter-field label { display: block; font-size: 0.8rem; font-weight: 500; color: var(--muted); margin-bottom: 0.3rem; text-transform: uppercase; letter-spacing: 0.5px; } .filter-field input, .filter-field select { width: 100%; padding: 0.6rem 0.8rem; border: 1px solid var(--warm); border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: 0.9rem; color: var(--text); background: var(--white); transition: border-color 0.2s; } .filter-field input:focus, .filter-field select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(0, 166, 126, 0.1); } /* Filtros monetários — flex: R$ numa célula, valor no input (não depende de padding-left vs cascata) */ .filter-field--money .filter-money-wrap { display: flex; flex-direction: row; align-items: stretch; width: 100%; box-sizing: border-box; border: 1px solid var(--warm); border-radius: 8px; background: var(--white); overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; } .filter-field--money .filter-money-wrap:focus-within { border-color: var(--green); box-shadow: 0 0 0 3px rgba(0, 166, 126, 0.1); } .filter-field--money .filter-money-prefix { display: flex; align-items: center; flex-shrink: 0; padding: 0 0.35rem 0 0.75rem; font-weight: 600; font-size: 0.85rem; color: var(--muted); line-height: 1.2; user-select: none; } .sell-form .form-group.filter-field > label { margin-bottom: 0; } .filter-actions { display: flex; gap: 1rem; margin-top: 1.5rem; align-items: center; } .btn-outline-dark { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; background: transparent; color: var(--muted); padding: 0.7rem 1.4rem; border-radius: 8px; font-weight: 500; font-size: 0.9rem; text-decoration: none; border: 1px solid var(--warm); transition: all 0.2s; } .btn-outline-dark:hover { border-color: var(--navy); color: var(--navy); } /* RESULTS */ .results-section { background: var(--cream); padding: 20px 5% 80px; } .results-count { font-size: 0.9rem; color: var(--muted); margin-bottom: 1.5rem; } /* CARD GRID */ .card-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 1.5rem; } .letter-card { background: var(--white); border: 1px solid var(--warm); border-radius: 16px; overflow: hidden; transition: border-color 0.2s, box-shadow 0.2s; display: flex; flex-direction: column; } .letter-card:hover { border-color: var(--green); box-shadow: 0 6px 28px rgba(0, 166, 126, 0.13); transform: translateY(-2px); } .letter-card-header { background: var(--navy); padding: 1rem 1.5rem; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 0.75rem 1rem; } .letter-card-header-main { display: flex; flex-direction: column; gap: 0.35rem; flex: 1; min-width: 0; } .letter-card-header-row { display: flex; flex-wrap: wrap; align-items: center; gap: 0.45rem 0.65rem; } .letter-card-own-badge { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--navy); background: var(--gold); padding: 0.2rem 0.5rem; border-radius: 999px; line-height: 1.2; } .letter-card-discount { font-size: 0.68rem; font-weight: 700; letter-spacing: 0.04em; color: var(--white); background: var(--green); padding: 0.18rem 0.5rem; border-radius: 999px; line-height: 1.2; } .letter-card-wishlist-form { margin: 0; padding: 0; flex-shrink: 0; align-self: flex-start; } .letter-card-star { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; margin: 0; padding: 0; border: none; background: transparent; color: var(--gold); cursor: pointer; border-radius: 8px; line-height: 0; transition: transform 0.15s ease, background 0.15s ease, color 0.15s ease; } .letter-card-star:hover { background: rgba(255, 255, 255, 0.1); transform: scale(1.06); } .letter-card-star:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; } a.letter-card-star { text-decoration: none; } .letter-card-star--guest { opacity: 0.92; } .letter-card-star-icon { display: block; } .letter-type { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--gold-text); } .letter-vendor { font-family: 'Fraunces', serif; font-size: 1.05rem; font-weight: 600; color: var(--white); } .letter-card-body { padding: 1.25rem 1.5rem 1rem; flex: 1; display: flex; flex-direction: column; gap: 0.9rem; } .letter-field { display: flex; flex-direction: column; gap: 0.15rem; } .letter-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); font-weight: 500; } .letter-value { font-size: 0.95rem; color: var(--text); font-weight: 500; } .letter-value--main { font-family: 'Fraunces', serif; font-size: 1.55rem; font-weight: 700; color: var(--navy); line-height: 1.15; } .letter-row { display: grid; grid-template-columns: 1fr 1fr; gap: 0.8rem; } .letter-card-footer { padding: 0.75rem 1.5rem 1.25rem; border-top: 1px solid var(--warm); display: flex; flex-direction: column; gap: 0.6rem; } .letter-card-link { display: block; color: inherit; text-decoration: none; } .letter-card-link:hover .letter-value--main { color: var(--green-dark); } .btn-card { width: 100%; justify-content: center; text-align: center; } /* EMPTY STATE */ .empty-state { background: var(--white); border: 1px dashed var(--warm); border-radius: 16px; padding: 2rem 1.5rem; text-align: center; margin: 1.5rem auto 2rem; max-width: 640px; display: flex; flex-direction: column; gap: 0.75rem; align-items: center; } .empty-state-title { font-family: 'Fraunces', Georgia, serif; font-size: 1.35rem; color: var(--navy); } .empty-state-text { font-size: 0.95rem; line-height: 1.55; color: var(--muted); max-width: 520px; } .empty-state-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; justify-content: center; } .filter-error { display: block; margin-top: 0.35rem; color: #b3261e; font-size: 0.8rem; } /* PAGINATION */ .pagination { display: flex; align-items: center; justify-content: center; gap: 1.5rem; margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--warm); } .page-link { color: var(--green); text-decoration: none; font-weight: 500; font-size: 0.9rem; transition: color 0.2s; } .page-link:hover { color: var(--green-dark); } .page-info { font-size: 0.85rem; color: var(--muted); } /* ===== SELL FORM ===== */ .form-section { background: var(--cream); padding: 40px 5% 80px; } .sell-form { background: var(--white); border: 1px solid var(--warm); border-radius: 16px; padding: 2.5rem; max-width: 860px; } .form-errors { background: #FEF2F2; border: 1px solid #FECACA; border-radius: 8px; padding: 1rem; margin-bottom: 1.5rem; } .form-error { color: #DC2626; font-size: 0.85rem; margin: 0; } .form-fieldset { border: none; padding: 0; margin: 0; } .form-fieldset legend { font-family: 'Fraunces', serif; font-size: 1.2rem; font-weight: 700; color: var(--navy); margin-bottom: 1.5rem; } .form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem 1.5rem; } .form-group { display: flex; flex-direction: column; gap: 0.3rem; } .form-group--full { grid-column: 1 / -1; display: flex; flex-direction: column; gap: 0.3rem; } .form-group label, .form-group--full label { font-size: 0.8rem; font-weight: 500; color: var(--muted); text-transform: uppercase; letter-spacing: 0.5px; } .form-group input:not([type="checkbox"]):not([type="radio"]), .form-group select, .form-group--full input:not([type="checkbox"]):not([type="radio"]), .form-group--full select { width: 100%; padding: 0.65rem 0.9rem; border: 1px solid var(--warm); border-radius: 8px; font-family: 'DM Sans', sans-serif; font-size: 0.9rem; color: var(--text); background: var(--white); transition: border-color 0.2s; } .form-group input:not([type="checkbox"]):not([type="radio"]):focus, .form-group select:focus, .form-group--full input:not([type="checkbox"]):not([type="radio"]):focus, .form-group--full select:focus { outline: none; border-color: var(--green); box-shadow: 0 0 0 3px rgba(0, 166, 126, 0.1); } /* Input monetário: após `.form-group input` (shorthand) — a borda fica no `.filter-money-wrap`; `!important` evita a cascata a repor borda/padding/width e a quebrar o flex. */ .filter-field--money .filter-money-input { flex: 1 1 0 !important; min-width: 0 !important; width: auto !important; max-width: 100% !important; margin: 0 !important; border: none !important; border-radius: 0 !important; box-shadow: none !important; background-color: var(--white) !important; padding: 0.6rem 0.8rem 0.6rem 0.1rem !important; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; -webkit-appearance: none; appearance: none; } .filter-field--money .filter-money-input:focus, .filter-field--money .filter-money-input:focus-visible { outline: none !important; box-shadow: none !important; border: none !important; } .field-error { font-size: 0.78rem; color: #DC2626; } .form-hint { font-size: 0.8rem; color: var(--muted); margin: 0.25rem 0 0; line-height: 1.35; } .form-actions { margin-top: 2rem; display: flex; justify-content: flex-end; } .btn-lg { padding: 1rem 2.2rem; font-size: 1rem; } @media (max-width: 768px) { .filter-grid { grid-template-columns: 1fr; } .card-grid { grid-template-columns: 1fr; } .form-grid { grid-template-columns: 1fr; } .form-group--full { grid-column: 1; } .form-actions { justify-content: stretch; } .form-actions .btn-lg { width: 100%; text-align: center; justify-content: center; } .filter-actions { flex-direction: column; } .filter-actions .btn-primary, .filter-actions .btn-outline-dark { width: 100%; text-align: center; justify-content: center; } } /* ===== LEGAL / GLOSSARY (privacy, terms, glossary) ===== */ .legal { background: var(--cream); padding: 40px 5% 80px; } .legal-inner { max-width: 820px; margin: 0 auto; } .legal-meta { color: var(--muted); font-size: 0.9rem; margin-bottom: 2rem; } .legal-inner h2 { font-family: 'Fraunces', Georgia, serif; color: var(--navy); font-size: 1.3rem; margin-top: 2rem; margin-bottom: 0.75rem; } .legal-inner p, .legal-inner li { color: var(--text); font-size: 1rem; line-height: 1.7; margin-bottom: 0.75rem; } .legal-inner ul { padding-left: 1.25rem; margin-bottom: 1rem; } .legal-link { color: var(--green-dark); text-decoration: underline; } .legal-link:hover { color: var(--green); } .legal-note { margin-top: 2rem; padding: 1rem 1.25rem; background: var(--warm); border-left: 3px solid var(--gold); border-radius: 6px; font-size: 0.95rem; color: var(--muted); } .glossary-list { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } .glossary-item { padding: 1rem 1.25rem; background: var(--white); border: 1px solid var(--warm); border-radius: 10px; } .glossary-term { font-family: 'Fraunces', Georgia, serif; font-size: 1.05rem; color: var(--navy); margin-bottom: 0.35rem; } .glossary-definition { color: var(--text); line-height: 1.65; font-size: 0.95rem; } /* ===== FOOTER LEGAL LINKS ===== */ .footer-legal { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.5rem 0.75rem; margin-bottom: 1rem; font-size: 0.88rem; } .footer-legal-sep { color: rgba(255, 255, 255, 0.4); } .footer-link-btn { background: none; border: none; padding: 0; font: inherit; cursor: pointer; color: inherit; text-decoration: underline; text-decoration-thickness: 1px; } .footer-link-btn:hover { color: var(--green); } /* ===== COOKIE BANNER (Consent Mode v2) ===== */ .cookie-banner { position: fixed; left: 0.75rem; right: 0.75rem; bottom: 0.75rem; z-index: 9999; background: var(--navy); color: var(--white); border-radius: 14px; box-shadow: 0 14px 40px rgba(0, 0, 0, 0.28); border: 1px solid rgba(255, 255, 255, 0.08); max-width: 720px; max-height: calc(100dvh - 1.5rem); overflow-y: auto; margin: 0 auto; transform: translateY(12px); opacity: 0; transition: opacity 0.25s ease, transform 0.25s ease; pointer-events: none; } .cookie-banner--visible { opacity: 1; transform: translateY(0); pointer-events: auto; } .cookie-banner[hidden] { display: none; } .cookie-banner-inner { display: flex; flex-direction: column; gap: 0.75rem; padding: 0.9rem 1rem; } .cookie-banner-title { font-family: 'Fraunces', Georgia, serif; font-size: 1rem; margin: 0 0 0.25rem 0; color: var(--white); } .cookie-banner-text p { font-size: 0.85rem; line-height: 1.45; color: rgba(255, 255, 255, 0.82); margin: 0; } .cookie-banner-link { color: var(--gold); text-decoration: underline; } .cookie-banner-link:hover { color: var(--white); } .cookie-banner-actions { display: flex; gap: 0.5rem; justify-content: stretch; } .cookie-btn { flex: 1; min-height: 44px; padding: 0.55rem 1rem; font-size: 0.9rem; } .cookie-banner .btn-outline-dark { color: var(--white); border-color: rgba(255, 255, 255, 0.35); background: transparent; } .cookie-banner .btn-outline-dark:hover { border-color: var(--white); background: rgba(255, 255, 255, 0.08); } @media (min-width: 720px) { .cookie-banner { left: 1rem; right: 1rem; bottom: 1rem; } .cookie-banner-inner { flex-direction: row; align-items: center; gap: 1rem; padding: 1.1rem 1.25rem; } .cookie-banner-title { font-size: 1.05rem; } .cookie-banner-text { flex: 1; } .cookie-banner-text p { font-size: 0.92rem; line-height: 1.55; } .cookie-banner-actions { justify-content: flex-end; flex-wrap: wrap; } .cookie-btn { flex: 0 0 auto; padding: 0.6rem 1.2rem; } } /* ===== LETTER DETAIL PAGE ===== */ .letter-detail-section { background: var(--cream); padding: 40px 5% 80px; } .letter-detail-breadcrumb { margin-top: 0.75rem; font-size: 0.88rem; } .letter-detail-breadcrumb a { color: var(--green); text-decoration: none; } .letter-detail-breadcrumb a:hover { color: var(--green-dark); } .letter-detail { background: var(--white); border: 1px solid var(--warm); border-radius: 16px; padding: 2rem 1.75rem; max-width: 820px; margin: 0 auto; display: flex; flex-direction: column; gap: 1.25rem; } .letter-detail-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; } @media (min-width: 640px) { .letter-detail-grid { grid-template-columns: 1fr 1fr; } } .letter-detail-field { display: flex; flex-direction: column; gap: 0.2rem; padding: 0.75rem 1rem; border: 1px solid var(--warm); border-radius: 10px; background: var(--cream); } .letter-detail-field--highlight { background: var(--navy); color: var(--white); border-color: var(--navy); } .letter-detail-field--highlight .letter-detail-label { color: rgba(255, 255, 255, 0.75); } .letter-detail-field--highlight .letter-detail-value { color: var(--white); } .letter-detail-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); font-weight: 500; } .letter-detail-value { font-family: 'Fraunces', Georgia, serif; font-size: 1.3rem; font-weight: 600; color: var(--navy); } .letter-detail-hint { display: block; font-family: 'DM Sans', sans-serif; font-weight: 400; font-size: 0.82rem; color: var(--muted); margin-top: 0.15rem; } .letter-card-interest-count { display: flex; align-items: center; gap: 0.35rem; font-size: 0.76rem; color: var(--muted); margin: 0; } .letter-card-interest-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--green); flex-shrink: 0; } .letter-detail-interest-count { font-size: 0.88rem; color: var(--muted); margin: 0 0 1rem; } .letter-detail-disclaimer { font-size: 0.88rem; line-height: 1.5; color: var(--muted); border-left: 3px solid var(--gold); padding: 0.5rem 0.9rem; } .letter-detail-actions { display: flex; gap: 0.75rem; flex-wrap: wrap; } .letter-detail-actions--stack { flex-direction: column; align-items: flex-start; } .letter-detail-wishlist-form { margin: 0; } .letter-detail-wishlist-form .btn-outline-dark { width: auto; } .letter-detail-wishlist-hint { font-size: 0.92rem; color: var(--muted); margin: 0; max-width: 28rem; } .letter-detail-wishlist-hint a { color: var(--green-dark); font-weight: 600; } /* Área autenticada /conta/ — layout limpo + navegação lateral */ .account-page-wrap { padding-top: 5.75rem; background: var(--cream); } .account-layout { padding: 0 5% 3rem; background: var(--cream); } .account-layout-inner { display: grid; grid-template-columns: minmax(200px, 240px) 1fr; gap: 2rem; align-items: start; max-width: 1100px; } @media (max-width: 768px) { .account-layout-inner { grid-template-columns: 1fr; gap: 1.25rem; } } .account-msgs { padding: 0.75rem 5% 1rem; background: var(--green-light); border-bottom: 1px solid rgba(0, 166, 126, 0.2); } .account-msg { margin: 0; font-size: 0.94rem; color: var(--navy-mid); } .account-aside { position: sticky; top: 88px; padding: 1rem 0; } @media (max-width: 768px) { .account-aside { position: static; padding: 0; border-bottom: 1px solid rgba(200, 169, 110, 0.25); padding-bottom: 1rem; } } .account-aside-title { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.65rem; } .account-aside-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.2rem; } .account-nav-link { display: block; padding: 0.45rem 0.65rem; border-radius: 8px; font-size: 0.95rem; font-weight: 500; color: var(--navy-mid); text-decoration: none; transition: background 0.15s, color 0.15s; } .account-nav-link:hover { background: rgba(200, 169, 110, 0.15); color: var(--navy); } .account-nav-link.is-active { background: var(--white); color: var(--navy); box-shadow: 0 1px 0 rgba(13, 31, 45, 0.06); border: 1px solid rgba(200, 169, 110, 0.35); } .account-main { background: var(--white); border: 1px solid rgba(200, 169, 110, 0.28); border-radius: 12px; padding: 1.5rem 1.35rem 2rem; min-height: 12rem; } @media (min-width: 769px) { .account-main { padding: 1.75rem 1.75rem 2.25rem; } } .account-page-head { margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid rgba(13, 31, 45, 0.08); } .account-page-title { font-family: 'Fraunces', Georgia, serif; font-size: 1.5rem; font-weight: 600; color: var(--navy); margin: 0 0 0.4rem; line-height: 1.25; } .account-page-lead { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--muted); max-width: 40rem; } .account-page-foot { margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid rgba(13, 31, 45, 0.08); font-size: 0.92rem; color: var(--muted); } .account-page-foot a { color: var(--green-dark); font-weight: 500; text-decoration: none; } .account-page-foot a:hover { text-decoration: underline; } .account-page-foot-sep { margin: 0 0.35rem; color: rgba(107, 114, 128, 0.6); } .account-hub-grid { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0.65rem; } @media (min-width: 520px) { .account-hub-grid { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } } @media (min-width: 900px) { .account-hub-grid { grid-template-columns: repeat(2, 1fr); } } .account-hub-card { display: flex; flex-direction: column; gap: 0.25rem; padding: 1rem 1.1rem; border-radius: 10px; border: 1px solid rgba(200, 169, 110, 0.35); background: var(--cream); text-decoration: none; color: inherit; transition: border-color 0.15s, box-shadow 0.15s; } .account-hub-card:hover { border-color: var(--gold); box-shadow: 0 4px 14px rgba(13, 31, 45, 0.06); } .account-hub-card-title { font-weight: 600; font-size: 1rem; color: var(--navy); } .account-hub-card-desc { font-size: 0.88rem; color: var(--muted); line-height: 1.4; } .account-empty { color: var(--muted); margin: 0; font-size: 0.95rem; line-height: 1.55; } .account-empty-actions { margin: 0.75rem 0 0; } .account-empty-actions a { font-weight: 600; color: var(--green-dark); } .account-table-wrap { overflow-x: auto; border: 1px solid rgba(200, 169, 110, 0.25); border-radius: 10px; background: var(--cream); } .account-table { width: 100%; border-collapse: collapse; font-size: 0.94rem; } .account-table th, .account-table td { padding: 0.65rem 0.85rem; text-align: left; border-bottom: 1px solid rgba(13, 31, 45, 0.08); } .account-table th { font-weight: 600; color: var(--navy-mid); background: rgba(237, 232, 223, 0.85); } .account-table tbody tr:last-child td { border-bottom: none; } .account-table a { color: var(--green-dark); font-weight: 500; } .account-inline-form { display: inline; margin: 0; } .btn-text-danger { background: none; border: none; padding: 0; font: inherit; color: #b91c1c; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; } .btn-text-danger:hover { color: #991b1b; } .form-group--checkbox { display: flex; flex-direction: row; align-items: flex-start; gap: 0.65rem; } .form-group--checkbox input[type="checkbox"] { width: auto; min-width: 1.1rem; min-height: 1.1rem; margin: 0.2rem 0 0; padding: 0; border: none; border-radius: 4px; box-shadow: none; background: transparent; flex-shrink: 0; accent-color: var(--green); cursor: pointer; } /* Vence `.form-group--full label` (uppercase / caption) no consentimento LGPD */ .form-group--full.form-group--checkbox label.label-checkbox { flex: 1; min-width: 0; text-transform: none; letter-spacing: normal; font-size: 0.92rem; font-weight: 400; color: var(--text); line-height: 1.5; margin: 0; max-width: 100%; } .account-subhead { font-size: 1.05rem; font-weight: 600; color: var(--navy); margin: 1.5rem 0 0.75rem; } .account-csv-help { margin-bottom: 1.75rem; } .account-csv-list { margin: 0 0 1rem; padding-left: 1.25rem; color: var(--text); line-height: 1.55; } .account-csv-columns-title { font-weight: 600; margin: 0 0 0.5rem; font-size: 0.95rem; } .account-csv-example-label { font-weight: 600; margin: 1rem 0 0.35rem; font-size: 0.9rem; } .account-csv-sample { margin: 0 0 1rem; padding: 0.85rem 1rem; background: var(--navy); color: #e8dcc8; border-radius: 8px; font-size: 0.82rem; overflow-x: auto; line-height: 1.45; } .account-csv-form { margin-top: 0.5rem; } .account-sale-status { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); } .account-sale-status--live { color: var(--green-dark); } /* —— Carrinho (/comprar/carrinho/) —— */ .visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; } .nav-cart-link { text-decoration: none; color: inherit; font-weight: 500; display: inline-flex; align-items: center; gap: 0.35rem; margin-left: 1.25rem; flex-shrink: 0; } .nav-cart-count { display: inline-block; min-width: 1.25rem; padding: 0.1rem 0.4rem; font-size: 0.72rem; font-weight: 700; line-height: 1.2; text-align: center; border-radius: 999px; background: var(--green); color: var(--white); } .letter-card-footer-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0.5rem; } .letter-card-cart-form { margin: 0; } .letter-card-cart-form .btn-card { width: 100%; } .letter-cart-section { padding-bottom: 3rem; } .letter-cart-conflict-section { padding-bottom: 3rem; } .letter-cart-conflict-inner { max-width: 720px; } .letter-cart-conflict-panel { background: var(--white); border: 1px solid var(--warm); border-radius: 12px; padding: 1.25rem 1.5rem; margin-bottom: 1rem; } .letter-cart-conflict-panel--new { border-color: #c4a574; background: #fdf9f3; } .letter-cart-conflict-heading { font-family: 'Fraunces', Georgia, serif; font-size: 1.15rem; margin: 0 0 0.5rem; color: var(--navy); } .letter-cart-conflict-lead { margin: 0; font-size: 0.95rem; line-height: 1.55; color: var(--text); } .letter-cart-conflict-explain { font-size: 0.92rem; line-height: 1.55; color: var(--muted); margin: 1.25rem 0 1.5rem; } .letter-cart-conflict-actions { display: flex; flex-direction: column; gap: 0.75rem; align-items: stretch; } .letter-cart-conflict-form { margin: 0; } .letter-cart-conflict-form .btn-lg { width: 100%; justify-content: center; } .letter-cart-conflict-back { margin-top: 2rem; font-size: 0.9rem; } .letter-cart-conflict-back a { color: var(--green); font-weight: 500; } .letter-cart-table-wrap { overflow-x: auto; background: var(--white); border: 1px solid var(--warm); border-radius: 12px; margin-bottom: 1.5rem; } .letter-cart-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; } .letter-cart-table th, .letter-cart-table td { padding: 0.85rem 1rem; text-align: left; border-bottom: 1px solid var(--warm); vertical-align: top; } .letter-cart-table th { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); font-weight: 600; } .letter-cart-vendor-link { font-weight: 600; color: var(--navy); text-decoration: none; } .letter-cart-vendor-link:hover { text-decoration: underline; } .letter-cart-type { display: block; font-size: 0.82rem; color: var(--muted); margin-top: 0.15rem; } .letter-cart-id { display: block; font-size: 0.75rem; color: var(--muted); margin-top: 0.2rem; } .letter-cart-remove-form { margin: 0; } .letter-cart-remove-btn { font: inherit; font-size: 0.85rem; color: #b3261e; background: none; border: none; cursor: pointer; text-decoration: underline; padding: 0; } .letter-cart-totals { background: #f6f3ee; border-radius: 12px; padding: 1.25rem 1.5rem; margin-bottom: 1.5rem; } .letter-cart-totals p { margin: 0.35rem 0; } .letter-cart-totals-note { font-size: 0.85rem; color: var(--muted); margin-top: 0.75rem !important; } .letter-cart-checkout-actions { display: flex; flex-direction: column; align-items: flex-start; gap: 1rem; } .letter-cart-clear-form { margin: 0; } .letter-cart-no-wa { color: var(--muted); } .letter-detail-cart-form { margin: 0; } .letter-detail-cart-form .btn-lg { width: 100%; } @media (max-width: 640px) { .letter-cart-table thead { display: none; } .letter-cart-table tr { display: block; border-bottom: 1px solid var(--warm); padding: 0.75rem 0; } .letter-cart-table td { display: block; border: none; padding: 0.35rem 1rem; } .letter-cart-table td::before { content: attr(data-label); display: block; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.04em; color: var(--muted); margin-bottom: 0.15rem; } .letter-card-footer-split { grid-template-columns: 1fr; } } /* Cart cross-sell */ .cart-cross-sell-section { padding: 3rem 0 4rem; background: var(--bg-alt, #f8f7f4); border-top: 1px solid var(--warm); } .cart-cross-sell-title { font-size: 1.3rem; font-weight: 700; margin: 0 0 0.4rem; color: var(--dark); } .cart-cross-sell-sub { color: var(--muted); font-size: 0.9rem; margin: 0 0 1.75rem; } /* Wishlist — cartas despublicadas (T56) */ .wishlist-row--unavailable td { opacity: 0.55; } .wishlist-vendor-unavailable { color: var(--muted, #888); } .badge-unavailable { display: inline-block; margin-left: 0.4em; padding: 0.1em 0.45em; font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; border-radius: 3px; background: #f0eeeb; color: #888; vertical-align: middle; } /* ── Loading state (form submit) ────────────────────────────────────────────── */ .btn-primary[disabled], .btn-outline-dark[disabled], .btn-outline[disabled] { opacity: 0.6; cursor: not-allowed; transform: none; box-shadow: none; pointer-events: none; } .btn-primary.is-loading, .btn-outline-dark.is-loading, .btn-outline.is-loading { position: relative; color: transparent; } .btn-primary.is-loading::after, .btn-outline-dark.is-loading::after, .btn-outline.is-loading::after { content: ""; position: absolute; inset: 0; margin: auto; width: 1em; height: 1em; border: 2px solid currentColor; border-top-color: transparent; border-radius: 50%; animation: btn-spin 0.6s linear infinite; color: inherit; } .btn-primary.is-loading::after { color: var(--white); } .btn-outline-dark.is-loading::after { color: var(--muted); } @keyframes btn-spin { to { transform: rotate(360deg); } } /* ═══ UI kit (ui_kits/marketplace) — home hero, confiança, listagem, detalhe, rodapé ═══ */ /* — Home: hero full-bleed navy + card + trust bar */ .hero-uikit { position: relative; min-height: min(100vh, 920px); background: var(--navy); color: var(--white); padding: 100px 5% 0; overflow: hidden; } .hero-uikit-bg { position: absolute; inset: 0; background: radial-gradient(ellipse 65% 55% at 78% 35%, rgba(0, 166, 126, 0.14) 0%, transparent 55%), radial-gradient(ellipse 45% 40% at 12% 88%, rgba(200, 169, 110, 0.1) 0%, transparent 50%); pointer-events: none; } .hero-uikit-grid { position: absolute; inset: 0; background-image: linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px); background-size: 64px 64px; mask-image: radial-gradient(ellipse 90% 70% at 50% 40%, #000 20%, transparent 100%); pointer-events: none; } .hero-uikit-main { position: relative; z-index: 1; max-width: 1180px; width: 100%; min-width: 0; margin: 0 auto; padding-bottom: 2.5rem; box-sizing: border-box; } .hero-uikit-inner { display: grid; grid-template-columns: 1fr; gap: 2.5rem; align-items: start; min-width: 0; width: 100%; box-sizing: border-box; } @media (min-width: 960px) { .hero-uikit-inner { grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.95fr); align-items: center; gap: 3rem; } } .hero-uikit-badge { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.4rem 1rem; border-radius: 999px; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--green); background: rgba(0, 166, 126, 0.12); border: 1px solid rgba(0, 166, 126, 0.35); margin-bottom: 1.5rem; } .hero-uikit-badge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--green); box-shadow: 0 0 0 3px rgba(0, 166, 126, 0.25); } .hero-uikit-title { font-family: 'Fraunces', Georgia, serif; font-size: clamp(2.2rem, 4.2vw, 3.5rem); font-weight: 800; line-height: 1.1; margin: 0 0 1.25rem; color: var(--white); } .hero-uikit-title em { font-style: normal; color: var(--gold); } .hero-uikit-lead { font-size: 1.05rem; line-height: 1.6; color: rgba(255, 255, 255, 0.75); max-width: 36rem; margin: 0 0 1.75rem; } .hero-uikit-ctas { display: flex; flex-wrap: wrap; align-items: center; gap: 0.85rem 1rem; margin-bottom: 1.75rem; } .btn-wa-hero { display: inline-flex; align-items: center; justify-content: center; gap: 0.55rem; padding: 0.85rem 1.35rem; border-radius: 10px; font-size: 1rem; font-weight: 600; text-decoration: none; color: var(--white); background: linear-gradient(180deg, #00b88c 0%, var(--green) 100%); border: 1px solid rgba(0, 0, 0, 0.08); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.22); transition: transform 0.2s, box-shadow 0.2s, background 0.2s; } .btn-wa-hero:hover { transform: translateY(-1px); box-shadow: 0 14px 36px rgba(0, 0, 0, 0.28); color: var(--white); } .btn-hero-secondary { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.8rem 1.1rem; border-radius: 10px; font-size: 0.98rem; font-weight: 600; text-decoration: none; color: var(--white); border: 1px solid rgba(200, 169, 110, 0.45); background: rgba(255, 255, 255, 0.04); transition: background 0.2s, border-color 0.2s; } .btn-hero-secondary:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--gold); color: var(--white); } .hero-uikit-proof { display: flex; align-items: center; gap: 0.75rem; font-size: 0.9rem; color: rgba(255, 255, 255, 0.55); } .hero-uikit-avatars { display: flex; } .hero-uikit-avatar { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--navy); margin-left: -8px; } .hero-uikit-avatar:first-child { margin-left: 0; } .hero-uikit-card { background: rgba(13, 31, 45, 0.65); border: 1px solid rgba(200, 169, 110, 0.25); border-radius: 16px; padding: 1.35rem 1.5rem 1.5rem; backdrop-filter: blur(8px); } .hero-uikit-card-tag { font-size: 0.72rem; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--gold); margin-bottom: 1rem; } .hero-uikit-card-rows { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.65rem; } .hero-uikit-card-rows li { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; font-size: 0.88rem; color: rgba(255, 255, 255, 0.65); } .hero-uikit-card-value { font-weight: 600; color: var(--white); font-size: 0.95rem; } .hero-uikit-card-value--xl { font-family: 'Fraunces', Georgia, serif; font-size: 1.45rem; font-weight: 700; } .hero-uikit-card-value--green { color: #5ee0b8; } .hero-uikit-card-note { margin: 1.1rem 0 0; font-size: 0.86rem; line-height: 1.5; color: rgba(255, 255, 255, 0.6); border-top: 1px solid rgba(255, 255, 255, 0.1); padding-top: 0.9rem; } /* Dentro de `.hero-uikit-main` — herda o mesmo `max-width: 1180px` do bloco (copy + card). */ .hero-uikit-trust { position: relative; z-index: 1; background: var(--navy-mid); border-top: 1px solid rgba(200, 169, 110, 0.2); margin-top: 2.5rem; padding: 1.5rem 0; width: 100%; max-width: 100%; min-width: 0; box-sizing: border-box; } .hero-uikit-trust-inner { margin: 0; width: 100%; max-width: 100%; min-width: 0; padding: 0; display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.25rem 0; box-sizing: border-box; } .hero-uikit-stat { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 0.75rem; min-width: 0; flex: 1 1 120px; max-width: 100%; box-sizing: border-box; } .hero-uikit-stat-num { font-family: 'Fraunces', Georgia, serif; font-size: 1.2rem; font-weight: 700; color: var(--white); } .hero-uikit-stat-label { font-size: 0.75rem; color: rgba(255, 255, 255, 0.45); margin-top: 0.2rem; } .hero-uikit-stat-sep { width: 1px; height: 36px; background: rgba(255, 255, 255, 0.12); display: none; } @media (min-width: 700px) { .hero-uikit-stat-sep { display: block; } } /* — Home: bloco de confiança (cream) + passos */ .trust-uikit { background: var(--cream); padding: 4rem 0 4.5rem; } .trust-uikit-inner { max-width: 1100px; margin: 0 auto; } .trust-uikit-top { display: grid; grid-template-columns: 1fr; gap: 2rem; margin-bottom: 3.5rem; align-items: start; } @media (min-width: 900px) { .trust-uikit-top { grid-template-columns: 1fr 1fr; gap: 2.5rem; } } .trust-uikit-kicker { font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--green); margin: 0 0 0.75rem; } .trust-uikit-heading { font-family: 'Fraunces', Georgia, serif; font-size: clamp(1.6rem, 2.5vw, 2.1rem); color: var(--navy); line-height: 1.2; margin: 0 0 0.9rem; } .trust-uikit-body { font-size: 1.02rem; line-height: 1.65; color: var(--muted); margin: 0 0 1.5rem; max-width: 34rem; } .trust-uikit-pillars { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; max-width: 26rem; } .trust-uikit-pillar-title { font-size: 0.95rem; font-weight: 700; color: var(--navy); } .trust-uikit-pillar-sub { font-size: 0.82rem; color: var(--muted); margin-top: 0.15rem; } .trust-uikit-quote { margin: 0; background: var(--white); border: 1px solid var(--warm); border-radius: 16px; padding: 1.5rem 1.5rem 1.35rem; position: relative; box-shadow: 0 16px 40px rgba(13, 31, 45, 0.07); } .trust-uikit-quote-deco { font-family: 'Fraunces', Georgia, serif; font-size: 3rem; line-height: 0.5; color: rgba(200, 169, 110, 0.5); margin-bottom: 0.5rem; } .trust-uikit-quote-text { font-size: 1.05rem; line-height: 1.55; color: var(--text); margin: 0 0 1.25rem; } .trust-uikit-quote-foot { display: flex; align-items: center; gap: 0.75rem; margin: 0; padding: 0; background: transparent; border: none; font-size: inherit; line-height: inherit; color: inherit; } .trust-uikit-quote-avatar { width: 44px; height: 44px; border-radius: 12px; background: var(--green-light); color: var(--green-dark); display: flex; align-items: center; justify-content: center; font-size: 0.85rem; font-weight: 700; } .trust-uikit-quote-name { font-weight: 600; color: var(--navy); font-size: 0.95rem; line-height: 1.35; } .trust-uikit-quote-meta { font-size: 0.8rem; color: var(--muted); margin-top: 0.1rem; } .trust-uikit-steps-kicker { text-align: center; font-size: 0.8rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--green); margin: 0 0 1.25rem; } .trust-uikit-step-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 1.5rem; } @media (min-width: 800px) { .trust-uikit-step-list { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } } .trust-uikit-step-list li { display: flex; gap: 1rem; background: var(--white); border: 1px solid var(--warm); border-radius: 14px; padding: 1.25rem 1.25rem 1.35rem; } .trust-uikit-step-ico { font-size: 1.5rem; line-height: 1; flex-shrink: 0; } .trust-uikit-step-n { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--green); margin: 0 0 0.25rem; } .trust-uikit-step-title { font-family: 'Fraunces', Georgia, serif; font-size: 1.1rem; color: var(--navy); margin: 0 0 0.4rem; } .trust-uikit-step-desc { font-size: 0.9rem; line-height: 1.5; color: var(--muted); margin: 0; } /* — /comprar/ listagem: shell + sidebar */ .letter-list-page { background: var(--cream); padding: 0 0 3.5rem; } .letter-list-shell { max-width: 1200px; margin: 0 auto; padding: 0 5%; display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; } @media (min-width: 960px) { .letter-list-shell { grid-template-columns: minmax(260px, 300px) minmax(0, 1fr); gap: 2.5rem; } } .letter-list-sidebar { position: sticky; top: 88px; } @media (max-width: 768px) { .letter-list-sidebar { position: static; top: auto; } } .letter-list-sidebar-title { font-family: 'Fraunces', Georgia, serif; font-size: 1.15rem; font-weight: 700; color: var(--navy); margin: 0 0 1rem; } .filter-panel--sidebar { padding: 1.35rem 1.25rem 1.5rem; } .filter-grid--sidebar { display: flex; flex-direction: column; gap: 0.9rem; } .filter-grid--sidebar .filter-field label { font-size: 0.72rem; } .letter-list-sidebar .filter-actions { display: flex; flex-direction: column; gap: 0.6rem; margin-top: 1.25rem; } .letter-list-sidebar .filter-actions .btn-primary, .letter-list-sidebar .filter-actions .btn-outline-dark { width: 100%; justify-content: center; text-align: center; } .letter-list-main { min-width: 0; } /* Cartões na grelha: refinar sombra (UI kit) */ .letter-list-main .card-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 600px) { .letter-list-main .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 1100px) { .letter-list-main .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } .letter-list-main .letter-card { border-radius: 14px; box-shadow: 0 4px 24px rgba(13, 31, 45, 0.06); transition: box-shadow 0.2s, transform 0.2s; } .letter-list-main .letter-card:hover { box-shadow: 0 12px 40px rgba(13, 31, 45, 0.1); transform: translateY(-2px); } .btn-wa-list { display: inline-flex; align-items: center; justify-content: center; gap: 0.45rem; width: 100%; padding: 0.65rem 0.9rem; border-radius: 8px; font-size: 0.9rem; font-weight: 600; text-decoration: none; color: var(--white) !important; background: var(--green); border: 1px solid rgba(0, 0, 0, 0.06); transition: background 0.2s, transform 0.2s; } .btn-wa-list:hover { background: var(--green-dark); color: var(--white) !important; } .btn-wa-list .wa-btn-icon { width: 20px; height: 20px; } /* — Detalhe da carta: grelha + painel colante */ .letter-detail-layout { display: grid; grid-template-columns: 1fr; gap: 2rem; align-items: start; max-width: 1120px; margin: 0 auto; } @media (min-width: 960px) { .letter-detail-layout { grid-template-columns: minmax(0, 1fr) 340px; gap: 2rem; } } .letter-detail-panel { background: var(--white); border: 1px solid var(--warm); border-radius: 16px; overflow: hidden; box-shadow: 0 8px 32px rgba(13, 31, 45, 0.06); } .letter-detail-navy-hero { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: flex-start; background: linear-gradient(135deg, var(--navy) 0%, #152a3a 100%); color: var(--white); padding: 1.75rem 1.5rem 1.5rem; } .letter-detail-navy-hero-label { display: block; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.55); margin-bottom: 0.35rem; } .letter-detail-navy-hero-value { font-family: 'Fraunces', Georgia, serif; font-size: 1.5rem; font-weight: 700; line-height: 1.1; } .letter-detail-navy-hero-value--big { font-size: clamp(1.6rem, 2.4vw, 2rem); } .letter-detail-navy-hero-gold { color: var(--gold); } .letter-detail-navy-hero-right { text-align: right; min-width: 0; } .letter-detail-save-line { margin: 0.5rem 0 0; font-size: 0.86rem; color: #8fdcc4; font-weight: 500; } .letter-detail-cells { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; padding: 1.25rem 1.25rem 1.5rem; background: var(--cream); } @media (max-width: 500px) { .letter-detail-cells { grid-template-columns: 1fr; } } .letter-detail-cells .letter-detail-field--soft { background: var(--white); border: 1px solid rgba(237, 232, 223, 0.9); border-radius: 10px; padding: 0.85rem 1rem; } .letter-detail-cells .letter-detail-label { font-size: 0.7rem; } .letter-detail-cells .letter-detail-value--md { font-size: 1.05rem; font-weight: 600; } .letter-detail-panel .letter-detail-disclaimer { margin: 0 1.5rem 1.5rem; background: rgba(200, 169, 110, 0.08); border-left: 3px solid var(--gold); border-radius: 0 8px 8px 0; } .letter-detail-aside { position: sticky; top: 88px; background: var(--white); border: 1px solid var(--warm); border-radius: 16px; padding: 1.5rem 1.35rem 1.5rem; box-shadow: 0 12px 40px rgba(13, 31, 45, 0.08); } @media (max-width: 768px) { .letter-detail-aside { position: static; top: auto; } } .letter-detail-aside-title { font-family: 'Fraunces', Georgia, serif; font-size: 1.2rem; color: var(--navy); margin: 0 0 1rem; text-align: center; } .letter-detail-aside-box { background: var(--green-light); border: 1px solid rgba(0, 166, 126, 0.2); border-radius: 12px; padding: 1rem 1rem; margin-bottom: 1.1rem; } .letter-detail-aside-row { display: flex; justify-content: space-between; align-items: baseline; gap: 0.75rem; font-size: 0.9rem; color: var(--muted); padding: 0.25rem 0; } .letter-detail-aside-row + .letter-detail-aside-row { border-top: 1px solid rgba(0, 0, 0, 0.05); padding-top: 0.5rem; margin-top: 0.25rem; } .letter-detail-aside-em { font-weight: 700; color: var(--navy); font-size: 0.95rem; } .letter-detail-aside-disc { font-weight: 700; color: var(--green-dark); } .letter-detail-wa-cta { width: 100%; box-sizing: border-box; margin-bottom: 0.5rem; } .letter-detail-aside-hint { text-align: center; font-size: 0.8rem; color: var(--muted); margin: 0 0 1rem; } .letter-detail-aside-sep { height: 1px; background: var(--warm); margin: 0 0 1rem; } .letter-detail-aside-stack { display: flex; flex-direction: column; gap: 0.6rem; } .letter-detail-btn-full { width: 100%; justify-content: center; text-align: center; } /* — Rodapé UI kit (3 colunas) */ footer.footer-uikit { background: var(--footer-bg); color: rgba(255, 255, 255, 0.7); padding: 3rem 5% 2rem; border-top: 1px solid rgba(200, 169, 110, 0.15); } .footer-uikit-inner { max-width: 1100px; margin: 0 auto; } .footer-uikit-top { display: grid; grid-template-columns: 1fr; gap: 2.5rem; padding-bottom: 2rem; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } @media (min-width: 800px) { .footer-uikit-top { grid-template-columns: minmax(220px, 300px) 1fr; align-items: start; } } .footer-uikit-logo { height: 40px; max-height: 40px; } .footer-uikit-tagline { font-size: 0.9rem; line-height: 1.6; margin-top: 1rem; max-width: 22rem; color: rgba(255, 255, 255, 0.55); } .footer-uikit-cols { display: grid; grid-template-columns: 1fr; gap: 1.75rem; } @media (min-width: 560px) { .footer-uikit-cols { grid-template-columns: repeat(3, minmax(0, 1fr)); } } .footer-uikit-col-title { font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.1em; color: var(--gold); margin: 0 0 0.75rem; } .footer-uikit-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 0.45rem; } .footer-uikit-link { color: rgba(255, 255, 255, 0.8); text-decoration: none; font-size: 0.92rem; font-weight: 500; transition: color 0.2s; } .footer-uikit-link:hover { color: var(--white); } .footer-uikit-bottom { display: flex; flex-direction: column; gap: 0.6rem; padding: 1.5rem 0 1rem; } @media (min-width: 640px) { .footer-uikit-bottom { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; } } .footer-uikit-legal-hint { font-size: 0.8rem; color: rgba(255, 255, 255, 0.45); margin: 0; } .footer-uikit .footer-legal { display: flex; flex-wrap: wrap; align-items: center; gap: 0.35rem 0.5rem; font-size: 0.85rem; } .footer-uikit .footer-link, .footer-uikit .footer-link-btn { color: rgba(255, 255, 255, 0.65); } .footer-uikit .footer-link:hover, .footer-uikit .footer-link-btn:hover { color: var(--white); } .footer-uikit-disclaimer { font-size: 0.8rem; line-height: 1.55; color: rgba(255, 255, 255, 0.4); margin: 0; padding-top: 1rem; border-top: 1px solid rgba(255, 255, 255, 0.06); } /* ════════════════════════════════════════════════════════════════════════ Acessibilidade 60+ (guia GABI) ════════════════════════════════════════════════════════════════════════ */ /* ── Marca de campo obrigatório (global) ──────────────────────────────────── */ .req-mark { color: #b3261e; font-weight: 700; margin-left: 2px; } .form-required-note { font-size: 0.85rem; color: var(--muted); margin: 0 0 1rem; } /* ── Skip-link "Pular para o conteúdo" (WCAG 2.4.1) ───────────────────────── */ .skip-link { position: absolute; top: -100px; left: 8px; z-index: 200; background: var(--green); color: var(--white); padding: 12px 18px; border-radius: 8px; text-decoration: none; font-size: 1rem; font-weight: 600; transition: top 0.15s ease-out; } .skip-link:focus { top: 8px; outline: 2px solid var(--white); outline-offset: 2px; } /* O alvo do skip-link não deve ganhar contorno só por receber foco programático. */ #conteudo:focus { outline: none; } /* ── "Saiba mais" — agrupa itens institucionais (reduz a carga da navegação) ── */ .nav-more-li { position: relative; } .nav-more { position: relative; } .nav-more-summary { list-style: none; cursor: pointer; color: var(--navy-mid); font-size: 1rem; font-weight: 500; line-height: 1.35; user-select: none; } .nav-more-summary::-webkit-details-marker { display: none; } .nav-more-summary::after { content: "▾"; font-size: 0.75em; margin-left: 0.3rem; opacity: 0.7; } .nav-more-summary:hover { color: var(--green); } .nav-more[open] > .nav-more-summary::after { transform: rotate(180deg); } .nav-more-panel { position: absolute; top: calc(100% + 0.6rem); left: 0; min-width: 200px; background: var(--white); border: 1px solid var(--warm); border-radius: 12px; box-shadow: 0 10px 30px rgba(13, 31, 45, 0.12); padding: 0.4rem; display: flex; flex-direction: column; z-index: 120; } .nav-more-panel a { padding: 0.7rem 0.9rem; border-radius: 8px; font-size: 1rem; color: var(--navy-mid); min-height: 44px; display: flex; align-items: center; } .nav-more-panel a:hover { background: var(--green-light); color: var(--green-dark); } /* ── Toggle "Modo Ampliado" no topo ───────────────────────────────────────── */ .cs-a11y-toggle { display: inline-flex; align-items: center; gap: 0.4rem; min-height: 40px; padding: 0.35rem 0.7rem; background: transparent; border: 1px solid var(--warm); border-radius: 8px; color: var(--navy-mid); font-family: inherit; font-size: 0.85rem; font-weight: 600; cursor: pointer; transition: background 0.2s, border-color 0.2s, color 0.2s; } .cs-a11y-toggle:hover { border-color: var(--green); color: var(--green-dark); } .cs-a11y-toggle[aria-pressed="true"] { background: var(--green-light); border-color: var(--green); color: var(--green-dark); } .cs-a11y-toggle-icon { font-weight: 700; } /* ── Botão de Ajuda flutuante (sempre visível) ────────────────────────────── */ .cs-help-fab { position: fixed; right: 1rem; bottom: 1rem; z-index: 150; display: inline-flex; align-items: center; gap: 0.5rem; min-height: 52px; padding: 0.7rem 1.1rem; background: var(--green); color: var(--white); border-radius: 999px; text-decoration: none; font-weight: 700; font-size: 1rem; box-shadow: 0 6px 22px rgba(0, 122, 94, 0.4); transition: background 0.2s, transform 0.15s, box-shadow 0.2s; } .cs-help-fab:hover { background: var(--green-dark); transform: translateY(-2px); box-shadow: 0 8px 26px rgba(0, 122, 94, 0.5); } .cs-help-fab:focus-visible { outline: 3px solid var(--navy); outline-offset: 3px; } .cs-help-fab-icon { width: 24px; height: 24px; flex-shrink: 0; } /* ── Modo Ampliado: escala toda a UI (≈18%) ───────────────────────────────── */ html.cs-large { font-size: 118%; } html.cs-large .cs-a11y-toggle, html.cs-large .btn-outline-dark, html.cs-large .letter-card-star, html.cs-large .nav-more-panel a { min-height: 48px; } html.cs-large .cs-help-fab { min-height: 60px; } @media (prefers-reduced-motion: reduce) { .skip-link, .cs-help-fab, .nav-more-summary::after { transition: none !important; } } @media (max-width: 768px) { /* No menu mobile (empilhado), o painel "Saiba mais" passa a fluir no fluxo. */ .nav-more-panel { position: static; box-shadow: none; border: none; padding: 0 0 0 0.5rem; min-width: 0; } .cs-help-fab-label { display: none; } .cs-help-fab { padding: 0.7rem; min-height: 52px; } } /* Framework de mensagens (flash) — visível em todas as páginas que herdam base.html. Toast fixo ao fundo para não colidir com a nav fixa (padding-top 88px). */ .cs-messages { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); z-index: 1000; display: flex; flex-direction: column; gap: 8px; width: max-content; max-width: min(92vw, 480px); } .cs-message { padding: 12px 16px; border-radius: 10px; font-size: 0.95rem; line-height: 1.35; color: #fff; background: #162420; box-shadow: 0 6px 24px rgba(22, 36, 32, 0.18); } .cs-message--success { background: #1c8f61; } .cs-message--error, .cs-message--danger { background: #c62828; } .cs-message--warning { background: #b5811a; } @media (prefers-reduced-motion: no-preference) { .cs-message { animation: cs-message-in 0.2s ease-out; } @keyframes cs-message-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } } }