/** * CRAQUE RAIZ ACADEMY - Design Tokens * Brandbook v1.0 - Abril 2026 * * Importar no projeto: * @import url('./brand-tokens.css'); * * Google Fonts (adicionar no ): * */ /* =================================================== 1. CSS CUSTOM PROPERTIES (Design Tokens) =================================================== */ :root { /* --- CORES PRIMARIAS --- */ --cr-green: #1B5E20; --cr-green-light: #4CAF50; --cr-green-dark: #0D3B12; --cr-green-surface: #E8F5E9; --cr-green-surface-light:#F1F8E9; --cr-gold: #F9A825; --cr-gold-light: #FFF3D0; --cr-gold-dark: #C17900; --cr-white: #FFFFFF; --cr-black: #0A0A0A; /* --- CORES DE TEXTO --- */ --cr-text: #37474F; --cr-text-light: #78909C; --cr-text-muted: #B0BEC5; --cr-text-inverse: #FFFFFF; /* --- CORES DE FUNDO --- */ --cr-bg: #FFFFFF; --cr-bg-alt: #F5F5F5; --cr-bg-dark: #0D3B12; --cr-bg-hero: linear-gradient(135deg, #0D3B12 0%, #1B5E20 60%, #2E7D32 100%); /* --- CORES FUNCIONAIS --- */ --cr-error: #D32F2F; --cr-error-light: #FFEBEE; --cr-info: #1565C0; --cr-info-light: #E3F2FD; --cr-success: #2E7D32; --cr-success-light: #E8F5E9; --cr-warning: #F57F17; --cr-warning-light: #FFF8E1; --cr-border: #ECEFF1; /* --- GRADIENTES --- */ --cr-gradient-green: linear-gradient(135deg, #1B5E20 0%, #2E7D32 50%, #388E3C 100%); --cr-gradient-gold: linear-gradient(135deg, #F9A825 0%, #F57F17 100%); --cr-gradient-dark: linear-gradient(180deg, #0D3B12 0%, #1B5E20 100%); --cr-gradient-hero: linear-gradient(135deg, rgba(13,59,18,0.9) 0%, rgba(27,94,32,0.7) 100%); /* --- TIPOGRAFIA --- */ --cr-font-display: 'Barlow Condensed', 'Impact', sans-serif; --cr-font-body: 'Barlow', 'Helvetica Neue', Arial, sans-serif; --cr-font-mono: 'JetBrains Mono', 'Consolas', monospace; --cr-text-xs: 0.75rem; --cr-text-sm: 0.875rem; --cr-text-base: 1rem; --cr-text-lg: 1.125rem; --cr-text-xl: 1.375rem; --cr-text-2xl: 1.75rem; --cr-text-3xl: 2.25rem; --cr-text-4xl: 3rem; --cr-text-5xl: 3.5rem; --cr-leading-tight: 1.2; --cr-leading-normal: 1.5; --cr-leading-relaxed: 1.6; /* --- ESPACAMENTO --- */ --cr-space-1: 0.25rem; --cr-space-2: 0.5rem; --cr-space-3: 1rem; --cr-space-4: 1.5rem; --cr-space-5: 2rem; --cr-space-6: 3rem; --cr-space-7: 4rem; --cr-space-8: 6rem; /* --- BORDAS --- */ --cr-radius-sm: 4px; --cr-radius-md: 8px; --cr-radius-lg: 12px; --cr-radius-xl: 16px; --cr-radius-full: 9999px; /* --- SOMBRAS --- */ --cr-shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.08); --cr-shadow-md: 0 4px 15px rgba(0, 0, 0, 0.08); --cr-shadow-lg: 0 8px 30px rgba(0, 0, 0, 0.12); --cr-shadow-xl: 0 12px 40px rgba(0, 0, 0, 0.16); --cr-shadow-glow: 0 4px 15px rgba(249, 168, 37, 0.4); --cr-shadow-glow-strong: 0 6px 25px rgba(249, 168, 37, 0.6); /* --- TRANSICOES --- */ --cr-ease-fast: 150ms ease; --cr-ease-normal: 300ms ease; --cr-ease-slow: 500ms ease; --cr-ease-bounce: 500ms cubic-bezier(0.34, 1.56, 0.64, 1); /* --- BREAKPOINTS (para referencia, nao usaveis em var()) --- */ /* Mobile: 480px | Tablet: 768px | Desktop: 1024px | Wide: 1200px */ /* --- Z-INDEX SCALE --- */ --cr-z-base: 0; --cr-z-dropdown: 100; --cr-z-sticky: 200; --cr-z-overlay: 300; --cr-z-modal: 400; --cr-z-toast: 500; } /* =================================================== 2. BASE STYLES =================================================== */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { font-size: 16px; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } body { font-family: var(--cr-font-body); font-weight: 400; font-size: var(--cr-text-base); line-height: var(--cr-leading-relaxed); color: var(--cr-text); background-color: var(--cr-bg); } /* =================================================== 3. TYPOGRAPHY UTILITIES =================================================== */ .cr-display { font-family: var(--cr-font-display); } .cr-body { font-family: var(--cr-font-body); } .cr-mono { font-family: var(--cr-font-mono); } .cr-h1 { font-family: var(--cr-font-display); font-weight: 900; font-size: var(--cr-text-4xl); line-height: var(--cr-leading-tight); text-transform: uppercase; letter-spacing: -0.02em; } .cr-h2 { font-family: var(--cr-font-display); font-weight: 800; font-size: var(--cr-text-3xl); line-height: var(--cr-leading-tight); text-transform: uppercase; } .cr-h3 { font-family: var(--cr-font-display); font-weight: 700; font-size: var(--cr-text-2xl); line-height: var(--cr-leading-tight); } .cr-h4 { font-family: var(--cr-font-display); font-weight: 600; font-size: var(--cr-text-xl); line-height: var(--cr-leading-normal); } .cr-subtitle { font-family: var(--cr-font-body); font-weight: 600; font-size: var(--cr-text-lg); line-height: var(--cr-leading-normal); } .cr-body-text { font-family: var(--cr-font-body); font-weight: 400; font-size: var(--cr-text-base); line-height: var(--cr-leading-relaxed); } .cr-small { font-family: var(--cr-font-body); font-weight: 400; font-size: var(--cr-text-sm); line-height: var(--cr-leading-normal); } .cr-caption { font-family: var(--cr-font-body); font-weight: 400; font-size: var(--cr-text-xs); line-height: var(--cr-leading-normal); color: var(--cr-text-light); } .cr-price { font-family: var(--cr-font-display); font-weight: 900; font-size: var(--cr-text-5xl); color: var(--cr-gold); line-height: 1; } .cr-stat { font-family: var(--cr-font-mono); font-weight: 500; font-size: var(--cr-text-lg); } /* =================================================== 4. BUTTON COMPONENTS =================================================== */ .cr-btn { font-family: var(--cr-font-display); font-weight: 800; font-size: 1.125rem; text-transform: uppercase; letter-spacing: 0.5px; padding: 14px 32px; border: none; border-radius: var(--cr-radius-md); cursor: pointer; transition: all var(--cr-ease-normal); display: inline-flex; align-items: center; justify-content: center; gap: 8px; text-decoration: none; } .cr-btn-primary { background: var(--cr-gradient-gold); color: var(--cr-white); font-size: 1.25rem; padding: 16px 40px; box-shadow: var(--cr-shadow-glow); } .cr-btn-primary:hover { transform: translateY(-2px); box-shadow: var(--cr-shadow-glow-strong); } .cr-btn-secondary { background: transparent; color: var(--cr-green); border: 2px solid var(--cr-green); } .cr-btn-secondary:hover { background: var(--cr-green); color: var(--cr-white); } .cr-btn-dark { background: var(--cr-green-dark); color: var(--cr-white); } .cr-btn-dark:hover { background: var(--cr-green); } .cr-btn-urgency { background: linear-gradient(135deg, #D32F2F, #B71C1C); color: var(--cr-white); font-size: 1.25rem; padding: 16px 40px; animation: cr-pulse 2s infinite; } @keyframes cr-pulse { 0%, 100% { box-shadow: 0 0 0 0 rgba(211, 47, 47, 0.4); } 50% { box-shadow: 0 0 0 15px rgba(211, 47, 47, 0); } } .cr-btn-sm { font-size: 0.875rem; padding: 8px 20px; } .cr-btn-lg { font-size: 1.375rem; padding: 20px 48px; } /* =================================================== 5. CARD COMPONENTS =================================================== */ .cr-card { background: var(--cr-white); border-radius: var(--cr-radius-lg); overflow: hidden; box-shadow: var(--cr-shadow-md); border: 1px solid var(--cr-border); transition: transform var(--cr-ease-normal), box-shadow var(--cr-ease-normal); } .cr-card:hover { transform: translateY(-4px); box-shadow: var(--cr-shadow-lg); } .cr-card-header { background: var(--cr-gradient-green); padding: 20px 24px; color: var(--cr-white); } .cr-card-body { padding: 24px; } .cr-card-position { background: var(--cr-white); border-radius: var(--cr-radius-lg); padding: 24px; border-left: 4px solid var(--cr-green); box-shadow: var(--cr-shadow-sm); transition: all var(--cr-ease-normal); } .cr-card-position:hover { border-left-color: var(--cr-gold); box-shadow: var(--cr-shadow-md); } /* =================================================== 6. BADGE COMPONENTS =================================================== */ .cr-badge { font-family: var(--cr-font-display); font-weight: 700; font-size: var(--cr-text-xs); text-transform: uppercase; letter-spacing: 1px; padding: 4px 12px; border-radius: var(--cr-radius-sm); display: inline-block; } .cr-badge-green { background: var(--cr-green-surface); color: var(--cr-green); } .cr-badge-gold { background: var(--cr-gold); color: var(--cr-white); } .cr-badge-premium { background: var(--cr-green-dark); color: var(--cr-gold); } .cr-badge-info { background: var(--cr-info-light); color: var(--cr-info); } .cr-badge-error { background: var(--cr-error-light); color: var(--cr-error); } /* =================================================== 7. LEGAL NOTICE COMPONENT =================================================== */ .cr-notice { background: var(--cr-gold-light); border-left: 4px solid var(--cr-gold); padding: 16px 20px; border-radius: 0 var(--cr-radius-md) var(--cr-radius-md) 0; font-size: var(--cr-text-sm); color: var(--cr-text); margin: var(--cr-space-4) 0; } .cr-notice-title { font-family: var(--cr-font-display); font-weight: 700; font-size: var(--cr-text-sm); text-transform: uppercase; color: var(--cr-gold-dark); margin-bottom: 8px; } .cr-notice-danger { background: var(--cr-error-light); border-left-color: var(--cr-error); } .cr-notice-danger .cr-notice-title { color: var(--cr-error); } /* =================================================== 8. SECTION LAYOUTS =================================================== */ .cr-section { padding: var(--cr-space-7) var(--cr-space-4); } .cr-section-dark { background: var(--cr-bg-dark); color: var(--cr-white); } .cr-section-alt { background: var(--cr-bg-alt); } .cr-section-green { background: var(--cr-green-surface-light); } .cr-container { max-width: 1200px; margin: 0 auto; padding: 0 var(--cr-space-4); } .cr-hero { background: var(--cr-bg-hero); padding: var(--cr-space-8) var(--cr-space-4); color: var(--cr-white); text-align: center; position: relative; overflow: hidden; } /* =================================================== 9. PRICING COMPONENT =================================================== */ .cr-pricing { background: var(--cr-gradient-dark); padding: var(--cr-space-7) var(--cr-space-4); color: var(--cr-white); text-align: center; border-radius: var(--cr-radius-xl); } .cr-pricing-old { font-size: var(--cr-text-lg); color: rgba(255,255,255,0.5); text-decoration: line-through; } .cr-pricing-current { font-family: var(--cr-font-display); font-weight: 900; font-size: var(--cr-text-5xl); color: var(--cr-gold); line-height: 1; margin: var(--cr-space-2) 0; } .cr-pricing-installments { font-size: var(--cr-text-base); color: rgba(255,255,255,0.7); } .cr-pricing-guarantee { margin-top: var(--cr-space-4); padding: var(--cr-space-3); background: rgba(255,255,255,0.1); border-radius: var(--cr-radius-md); font-size: var(--cr-text-sm); }