/* ============================================================ BRASILFAZTUDO.COM — Global Stylesheet Mobile-first | Zero dependencies | Zero CDN ============================================================ */ /* ------------------------------------------------------------ 1. RESET ------------------------------------------------------------ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { min-height: 100vh; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeSpeed; } img, picture, video, canvas, svg { display: block; max-width: 100%; } input, button, textarea, select { font: inherit; color: inherit; } button { cursor: pointer; border: none; background: none; } ul, ol { list-style: none; } a { color: inherit; text-decoration: none; } /* ------------------------------------------------------------ 2. FONT-FACE (Sora — self-hosted) Para usar: baixe os arquivos .woff2 da Sora em https://fonts.google.com/specimen/Sora e coloque em /assets/fonts/ Enquanto os arquivos não estiverem locais, o fallback do Google Fonts está no do template. ------------------------------------------------------------ */ /* @font-face { font-family: 'Sora'; src: url('/assets/fonts/Sora-Light.woff2') format('woff2'); font-weight: 300; font-style: normal; font-display: swap; } @font-face { font-family: 'Sora'; src: url('/assets/fonts/Sora-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: swap; } @font-face { font-family: 'Sora'; src: url('/assets/fonts/Sora-SemiBold.woff2') format('woff2'); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: 'Sora'; src: url('/assets/fonts/Sora-Bold.woff2') format('woff2'); font-weight: 700; font-style: normal; font-display: swap; } @font-face { font-family: 'Sora'; src: url('/assets/fonts/Sora-ExtraBold.woff2') format('woff2'); font-weight: 800; font-style: normal; font-display: swap; } */ /* ------------------------------------------------------------ 3. CSS VARIABLES ------------------------------------------------------------ */ :root { /* Canvas */ --bg-canvas: #EAECEF; /* Surfaces */ --surface-glass: rgba(255, 255, 255, 0.45); --surface-glass-border: rgba(255, 255, 255, 0.7); --surface-glass-hover: rgba(255, 255, 255, 0.5); --surface-input: rgba(255, 255, 255, 0.6); --surface-input-focus: #FFFFFF; --surface-result: rgba(255, 255, 255, 0.4); --surface-result-border: rgba(255, 255, 255, 0.6); /* Brand */ --brand-green: #00875E; --brand-green-light: rgba(0, 135, 94, 0.1); --brand-green-shadow: rgba(0, 135, 94, 0.3); --brand-green-shadow-hover: rgba(0, 135, 94, 0.4); --brand-lime: #D7FF00; --brand-red: #E63946; --brand-warning: #F59E0B; /* Text */ --text-main: #1A1C1E; --text-sub: #667085; --text-muted: #94A3B8; --text-label: #94A3B8; /* Radius */ --radius-bento: 48px; --radius-card: 32px; --radius-input: 20px; --radius-pill: 100px; --radius-faq: 24px; /* Shadows */ --shadow-soft: 0 20px 40px -10px rgba(0, 0, 0, 0.05); --shadow-btn: 0 10px 20px -5px rgba(0, 135, 94, 0.3); --shadow-btn-hover: 0 15px 30px -5px rgba(0, 135, 94, 0.4); --shadow-focus: 0 0 0 4px rgba(0, 135, 94, 0.1); /* Typography */ --font-family: 'Sora', system-ui, -apple-system, sans-serif; /* Transitions */ --transition-fast: 0.2s ease; --transition-normal: 0.3s ease; --transition-smooth: 0.3s ease-out; /* Layout */ --content-max-width: 400px; --drawer-width: 280px; } /* ------------------------------------------------------------ 4. BASE STYLES ------------------------------------------------------------ */ body { background-color: var(--bg-canvas); font-family: var(--font-family); color: var(--text-main); } /* ------------------------------------------------------------ 5. LAYOUT ------------------------------------------------------------ */ .page-wrapper { display: flex; flex-direction: column; align-items: center; min-height: 100vh; padding: 24px 24px 48px; margin-top: 60px; } .main-content { width: 100%; max-width: var(--content-max-width); } /* ------------------------------------------------------------ 6. HEADER + BRAND ------------------------------------------------------------ */ .site-header { position: fixed; top: 0; left: 0; right: 0; height: 60px; display: flex; align-items: center; justify-content: center; background: rgba(234, 236, 239, 0.92); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-bottom: 1px solid rgba(255, 255, 255, 0.7); z-index: 1001; } .hamburger { position: absolute; left: 16px; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: rgba(255, 255, 255, 0.4); border: 1px solid rgba(255, 255, 255, 0.6); transition: background var(--transition-fast), border-color var(--transition-fast); } .hamburger:hover { background: rgba(255, 255, 255, 0.7); } /* Quando drawer abre, estilo sutil sobre fundo branco */ .drawer-open .hamburger { background: rgba(0, 0, 0, 0.05); border-color: rgba(0, 0, 0, 0.08); } .drawer-open .hamburger:hover { background: rgba(0, 0, 0, 0.1); } .hamburger-line { display: block; width: 18px; height: 2px; background: var(--text-main); border-radius: 2px; position: relative; transition: var(--transition-normal); } .hamburger-line::before, .hamburger-line::after { content: ''; display: block; width: 18px; height: 2px; background: var(--text-main); border-radius: 2px; position: absolute; transition: var(--transition-normal); } .hamburger-line::before { top: -5px; } .hamburger-line::after { top: 5px; } /* Hamburger animado -> X */ .drawer-open .hamburger-line { background: transparent; } .drawer-open .hamburger-line::before { top: 0; transform: rotate(45deg); } .drawer-open .hamburger-line::after { top: 0; transform: rotate(-45deg); } .brand { font-weight: 800; font-size: 14px; letter-spacing: -0.03em; text-transform: uppercase; } .brand span { color: var(--brand-green); } /* ------------------------------------------------------------ 7. DRAWER NAV ------------------------------------------------------------ */ .drawer { position: fixed; top: 0; left: 0; width: var(--drawer-width); height: 100vh; background: #FFFFFF; z-index: 1000; transform: translateX(-100%); transition: transform var(--transition-normal); padding: 76px 24px 24px; overflow-y: auto; box-shadow: 4px 0 20px rgba(0, 0, 0, 0.08); } .drawer-open .drawer { transform: translateX(0); } .drawer-nav-title { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; color: var(--text-label); margin-bottom: 16px; } .drawer ul { display: flex; flex-direction: column; gap: 4px; } .drawer li a { display: block; padding: 12px 16px; border-radius: 12px; font-size: 13px; font-weight: 600; color: var(--text-sub); transition: all var(--transition-fast); } .drawer li a:hover { background: rgba(0, 135, 94, 0.06); color: var(--text-main); } .drawer li a.active { background: rgba(0, 135, 94, 0.1); color: var(--brand-green); font-weight: 700; } /* Overlay */ .drawer-overlay { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.3); z-index: 999; opacity: 0; pointer-events: none; transition: opacity var(--transition-normal); } .drawer-open .drawer-overlay { opacity: 1; pointer-events: auto; } /* ------------------------------------------------------------ 8. GLASS CARD ------------------------------------------------------------ */ .glass-card { background: var(--surface-glass); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 2px solid var(--surface-glass-border); border-radius: var(--radius-bento); box-shadow: var(--shadow-soft); } /* ------------------------------------------------------------ 9. INPUT BENTO ------------------------------------------------------------ */ .input-bento { width: 100%; background: var(--surface-input); border: 1px solid rgba(0, 0, 0, 0.05); border-radius: var(--radius-input); padding: 16px; font-weight: 600; text-align: center; transition: all var(--transition-fast); } .input-bento:focus { outline: none; border-color: var(--brand-green); background: var(--surface-input-focus); box-shadow: var(--shadow-focus); } .input-bento::placeholder { color: var(--text-muted); font-weight: 400; } /* Remove setas de input number */ .input-bento::-webkit-outer-spin-button, .input-bento::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .input-bento[type=number] { -moz-appearance: textfield; } /* Select estilizado */ .select-bento { width: 100%; background: var(--surface-input); border: 1px solid rgba(0, 0, 0, 0.05); border-radius: var(--radius-input); padding: 16px; font-weight: 600; text-align: center; transition: all var(--transition-fast); appearance: none; cursor: pointer; } .select-bento { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 24 24' stroke='%234A4A4F'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M19 9l-7 7-7-7'%3E%3C/path%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 12px center; background-size: 14px; padding-right: 32px; } .select-bento:focus { outline: none; border-color: var(--brand-green); background-color: var(--surface-input-focus); box-shadow: var(--shadow-focus); } /* Date input */ .input-date { width: 100%; background: var(--surface-input); border: 1px solid rgba(0, 0, 0, 0.05); border-radius: var(--radius-input); padding: 16px; font-weight: 600; text-align: center; transition: all var(--transition-fast); } .input-date:focus { outline: none; border-color: var(--brand-green); background: var(--surface-input-focus); box-shadow: var(--shadow-focus); } /* ------------------------------------------------------------ 10. BUTTONS ------------------------------------------------------------ */ .btn-main { display: block; width: 100%; padding: 20px; background: var(--brand-green); color: #FFFFFF; border: none; border-radius: var(--radius-pill); font-weight: 800; font-size: 14px; letter-spacing: 0.05em; text-transform: uppercase; text-align: center; transition: all var(--transition-fast); box-shadow: var(--shadow-btn); } .btn-main:hover { transform: translateY(-2px); box-shadow: var(--shadow-btn-hover); } .btn-main:active { transform: translateY(0); } .btn-clear { display: flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 12px; background: none; border: none; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-label); transition: color var(--transition-fast); } .btn-clear:hover { color: var(--text-sub); } /* ------------------------------------------------------------ 11. STATUS BADGE ------------------------------------------------------------ */ .status-badge { display: inline-block; background: var(--brand-lime); color: var(--text-main); font-size: 10px; font-weight: 800; padding: 6px 14px; border-radius: var(--radius-pill); } .status-badge--green { background: var(--brand-green); color: #FFFFFF; } .status-badge--white { background: #FFFFFF; color: var(--text-sub); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); } .pill-label { display: inline-block; padding: 4px 12px; border-radius: var(--radius-pill); font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: -0.03em; } /* ------------------------------------------------------------ 12. DISPLAY RESULT ------------------------------------------------------------ */ .display-result { background: var(--surface-result); border-radius: var(--radius-card); padding: 32px; border: 1px solid var(--surface-result-border); } .result-number { font-weight: 300; font-size: 3.2rem; letter-spacing: -0.05em; line-height: 1; } .result-number-sm { font-weight: 300; font-size: 2rem; letter-spacing: -0.03em; line-height: 1; } /* ------------------------------------------------------------ 13. DISCOUNT / DETAIL ROWS ------------------------------------------------------------ */ .detail-row { display: flex; justify-content: space-between; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-sub); } .detail-val-negative { color: var(--brand-red); } .detail-val-positive { color: var(--brand-green); } /* ------------------------------------------------------------ 14. FAQ SECTION ------------------------------------------------------------ */ .faq-section { margin-top: 32px; } .faq-title { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; color: var(--text-label); margin-bottom: 16px; padding-left: 16px; } .faq-list { display: flex; flex-direction: column; gap: 12px; } .faq-card { background: rgba(255, 255, 255, 0.3); border: 1px solid #FFFFFF; border-radius: var(--radius-faq); padding: 20px; cursor: pointer; transition: all var(--transition-normal); } .faq-card:hover { background: var(--surface-glass-hover); } .faq-header { display: flex; justify-content: space-between; align-items: center; } .faq-question { font-size: 12px; font-weight: 700; } .faq-icon { color: var(--text-label); transition: transform var(--transition-normal); font-size: 18px; line-height: 1; flex-shrink: 0; } .faq-card.active .faq-icon { transform: rotate(45deg); } .faq-content { max-height: 0; overflow: hidden; transition: all var(--transition-smooth); opacity: 0; } .faq-card.active .faq-content { max-height: 350px; opacity: 1; margin-top: 12px; } .faq-answer { font-size: 11px; font-weight: 600; text-transform: uppercase; line-height: 1.6; color: var(--text-sub); } /* ------------------------------------------------------------ 14b. LINK CARD (home listing) ------------------------------------------------------------ */ .link-list { display: flex; flex-direction: column; gap: 8px; } .link-card { display: block; background: rgba(255, 255, 255, 0.3); border: 1px solid #FFFFFF; border-radius: var(--radius-faq); padding: 18px 20px; transition: all var(--transition-normal); } .link-card:hover { background: rgba(255, 255, 255, 0.55); transform: translateY(-1px); } .link-card-inner { display: flex; align-items: center; gap: 10px; } .link-card-icon { flex-shrink: 0; color: var(--brand-green); } .link-card-name { font-size: 13px; font-weight: 700; color: var(--text-main); } .link-card-arrow { margin-left: auto; font-size: 14px; color: var(--brand-green); transition: transform var(--transition-fast); } .link-card:hover .link-card-arrow { transform: translateX(3px); } /* ------------------------------------------------------------ 14c. SEGMENTED CONTROL (seletor de unidade) ------------------------------------------------------------ */ .segmented-control { display: flex; background: rgba(255, 255, 255, 0.5); border: 1px solid rgba(0, 0, 0, 0.05); border-radius: var(--radius-input); padding: 4px; gap: 4px; } .seg-btn { flex: 1; padding: 10px; font-size: 10px; font-weight: 800; border-radius: 16px; border: none; background: none; color: var(--text-label); cursor: pointer; transition: all var(--transition-fast); text-transform: uppercase; letter-spacing: 0.05em; } .seg-btn.active { background: #FFFFFF; color: var(--brand-green); box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08); border: 1px solid rgba(0, 0, 0, 0.05); } /* ------------------------------------------------------------ 14c2. BTN-TEXT (botão sem estilo visual — aparência de link) ------------------------------------------------------------ */ .btn-text { background: none; border: none; cursor: pointer; padding: 0; } /* ------------------------------------------------------------ 14d. NOTA GRID (SISU) ------------------------------------------------------------ */ .nota-grid-header, .nota-grid-row { display: flex; align-items: center; gap: 8px; } .nota-grid-label { flex: 0 0 33%; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-label); } .nota-grid-nota { flex: 2; min-width: 0; } .nota-grid-peso { flex: 1; min-width: 0; } /* ------------------------------------------------------------ 14e. REGRA DE TRÊS ------------------------------------------------------------ */ .rule3-grid { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 8px; } .rule3-arrow { font-size: 18px; font-weight: 800; color: var(--brand-green); text-align: center; user-select: none; } .rule3-arrow--inverse { color: var(--brand-warning, #F59E0B); } .mode-hint { background: rgba(255, 255, 255, 0.7); border-radius: 10px; padding: 10px 14px; font-size: 11px; color: var(--text-sub); line-height: 1.5; box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06); } .result-placeholder { border: 2px dashed var(--brand-green); border-radius: 12px; height: 52px; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 800; color: var(--brand-green); letter-spacing: 0.05em; width: 100%; box-sizing: border-box; } /* ------------------------------------------------------------ 14f. DUTCHING ------------------------------------------------------------ */ .runner-row { position: relative; background: rgba(255, 255, 255, 0.3); border: 1px solid rgba(255, 255, 255, 0.5); border-radius: 20px; padding: 16px; display: grid; grid-template-columns: 1.2fr 0.8fr; gap: 12px; align-items: end; } .runner-remove { position: absolute; top: 10px; right: 14px; background: none; border: none; cursor: pointer; font-size: 18px; color: var(--text-sub); opacity: 0.35; transition: opacity 0.2s, color 0.2s; line-height: 1; padding: 0; } .runner-remove:hover { opacity: 1; color: var(--brand-red); } .breakdown-row { display: flex; justify-content: space-between; align-items: center; font-size: 11px; padding: 4px 0; } .breakdown-total { display: flex; justify-content: space-between; font-size: 10px; font-weight: 800; text-transform: uppercase; padding-top: 12px; margin-top: 12px; border-top: 1px solid rgba(0, 0, 0, 0.06); } /* ------------------------------------------------------------ 14g. EDUCATIONAL CONTENT ------------------------------------------------------------ */ .edu-section h2 { font-size: 16px; font-weight: 800; letter-spacing: -0.03em; margin-bottom: 16px; color: var(--text-main); } .edu-section h3 { font-size: 13px; font-weight: 700; margin-top: 20px; margin-bottom: 8px; color: var(--text-main); } .edu-section p { font-size: 12px; line-height: 1.7; color: var(--text-sub); margin-bottom: 12px; } .edu-section ul, .edu-section ol { font-size: 12px; line-height: 1.7; color: var(--text-sub); margin-bottom: 12px; padding-left: 20px; } .edu-section li { list-style: disc; margin-bottom: 4px; } .edu-section ol li { list-style: decimal; } .edu-table { width: 100%; border-collapse: collapse; font-size: 11px; margin: 12px 0; } .edu-table th, .edu-table td { padding: 8px 10px; text-align: left; border-bottom: 1px solid rgba(0, 0, 0, 0.06); } .edu-table th { font-weight: 700; font-size: 10px; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-sub); } .edu-table td { color: var(--text-main); } .edu-intro-grid { display: grid; grid-template-columns: 1fr; gap: 16px; align-items: start; margin: 16px 0 24px; } @media (min-width: 640px) { .edu-intro-grid { grid-template-columns: 1fr 1.5fr; gap: 20px; } .edu-intro-grid figure { order: 2; } .edu-intro-grid p { order: 1; } } .edu-section figure { margin: 0; text-align: center; } .edu-section figure img { max-width: 100%; border-radius: 12px; box-shadow: 0 4px 24px rgba(0, 0, 0, 0.08); display: block; margin: 0 auto; } .edu-section figcaption { font-size: 11px; color: var(--text-muted); margin-top: 8px; } /* ------------------------------------------------------------ 14h. RELATED CALCULATORS ------------------------------------------------------------ */ .related-section { margin-top: 32px; margin-bottom: 32px; } .related-title { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.2em; color: var(--text-sub); margin-bottom: 12px; } /* ------------------------------------------------------------ 14i. SHARE BUTTON ------------------------------------------------------------ */ .btn-share { display: inline-flex; align-items: center; gap: 6px; background: none; border: 1px solid rgba(0, 0, 0, 0.08); border-radius: var(--radius-pill); padding: 8px 16px; font-size: 10px; font-weight: 700; color: var(--text-sub); cursor: pointer; transition: all 0.2s; text-transform: uppercase; letter-spacing: 0.05em; } .btn-share:hover { border-color: var(--brand-green); color: var(--brand-green); } /* ------------------------------------------------------------ 15. FOOTER ------------------------------------------------------------ */ .site-footer { margin-top: 80px; padding-bottom: 48px; opacity: 0.2; font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.4em; text-align: center; } .footer-links { display: flex; justify-content: center; gap: 16px; margin-top: 8px; } .footer-links a { display: inline-flex; align-items: center; gap: 4px; color: var(--text-main); text-decoration: none; } .footer-links a:hover { opacity: 0.6; } .footer-links a[href*="privacidade"]::before { content: ""; display: inline-block; width: 10px; height: 10px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='currentColor' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='11' width='18' height='11' rx='2' ry='2'/%3E%3Cpath d='M7 11V7a5 5 0 0 1 10 0v4'/%3E%3C/svg%3E") center/contain no-repeat; } /* ------------------------------------------------------------ 16. FORM LAYOUT HELPERS ------------------------------------------------------------ */ .form-group { display: flex; flex-direction: column; gap: 8px; } .form-label { font-size: 10px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.1em; color: var(--text-label); padding-left: 16px; } .form-row { display: flex; flex-direction: column; gap: 24px; } .form-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; } .form-grid-3 { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 16px; } .form-actions { margin-top: 40px; display: flex; flex-direction: column; gap: 16px; } /* ------------------------------------------------------------ 17. SECTION DIVIDER ------------------------------------------------------------ */ .divider { border: none; border-top: 1px solid rgba(255, 255, 255, 0.4); margin: 24px 0; } /* ------------------------------------------------------------ 18. UTILITIES ------------------------------------------------------------ */ /* Display */ .hidden { display: none; } .block { display: block; } /* Width */ .w-full { width: 100%; } /* Text alignment */ .text-center { text-align: center; } .text-right { text-align: right; } .text-left { text-align: left; } /* Font sizes */ .text-xs { font-size: 10px; } .text-sm { font-size: 12px; } .text-base { font-size: 14px; } .text-lg { font-size: 18px; } .text-xl { font-size: 20px; } .text-2xl { font-size: 24px; } .text-3xl { font-size: 30px; } /* Font weight */ .font-light { font-weight: 300; } .font-regular { font-weight: 400; } .font-semibold { font-weight: 600; } .font-bold { font-weight: 700; } .font-800 { font-weight: 800; } /* Text transform */ .uppercase { text-transform: uppercase; } /* Letter spacing */ .tracking-tight { letter-spacing: -0.03em; } .tracking-wide { letter-spacing: 0.05em; } .tracking-wider { letter-spacing: 0.1em; } .tracking-widest { letter-spacing: 0.2em; } /* Colors */ .text-main { color: var(--text-main); } .text-sub { color: var(--text-sub); } .text-muted { color: var(--text-muted); } .text-green { color: var(--brand-green); } .text-red { color: var(--brand-red); } .text-orange { color: var(--brand-warning, #F59E0B); } /* Spacing — margin */ .mt-1 { margin-top: 4px; } .mt-2 { margin-top: 8px; } .mt-3 { margin-top: 12px; } .mt-4 { margin-top: 16px; } .mt-6 { margin-top: 24px; } .mt-8 { margin-top: 32px; } .mb-1 { margin-bottom: 4px; } .mb-2 { margin-bottom: 8px; } .mb-3 { margin-bottom: 12px; } .mb-4 { margin-bottom: 16px; } .mb-6 { margin-bottom: 24px; } .mb-8 { margin-bottom: 32px; } /* Spacing — padding */ .p-4 { padding: 16px; } .p-5 { padding: 20px; } .p-6 { padding: 24px; } .p-8 { padding: 32px; } .pt-4 { padding-top: 16px; } .pb-4 { padding-bottom: 16px; } .pb-6 { padding-bottom: 24px; } /* Gap */ .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; } .gap-6 { gap: 24px; } /* Flex */ .flex { display: flex; } .flex-col { flex-direction: column; } .items-center { align-items: center; } .justify-between { justify-content: space-between; } /* Grid */ .grid { display: grid; } .grid-cols-2 { grid-template-columns: 1fr 1fr; } /* Border */ .border-b-glass { border-bottom: 1px solid rgba(255, 255, 255, 0.4); } /* ------------------------------------------------------------ 19. ANIMATIONS ------------------------------------------------------------ */ .fade-up { animation: fadeUp 0.5s ease-out forwards; } @keyframes fadeUp { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: translateY(0); } } .fade-in { animation: fadeIn 0.4s ease-out forwards; } @keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } } /* Staggered animation delays */ .delay-1 { animation-delay: 0.1s; } .delay-2 { animation-delay: 0.2s; } .delay-3 { animation-delay: 0.3s; } /* ------------------------------------------------------------ 20. RESPONSIVE — Tablet & Desktop ------------------------------------------------------------ */ /* Tablet (640px+) */ @media (min-width: 640px) { :root { --content-max-width: 520px; } .page-wrapper { padding: 32px 32px 64px; } } /* Desktop (1024px+) */ @media (min-width: 1024px) { :root { --content-max-width: 600px; } .page-wrapper { padding: 40px 40px 80px; } } /* Reduz motion para acessibilidade */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; } }