/* ============================================================= SOPHOS ACADEMY - CSS Variables (Master) Single source of truth for all design tokens. Bloco 7.1 da Fase 4 (Padronização Visual): tokens migrados pro design system do HealBridge (paleta verde #1DB954, tipografia Inter (unificada), sombras Linear/Stripe-style, escalas de superfície e texto). Aliases legacy (--primary-color, --sophos-*) mantidos apontando pros novos tokens, pra não quebrar arquivos que ainda referenciam os nomes antigos. Refatoração página-por-página vem nos blocos 7.4 a 7.13. ============================================================= */ /* Zoom global do site — renderiza tudo a 80% por padrão */ html { zoom: 0.8; } :root { /* =========================================================== PALETA PRIMÁRIA (verde HealBridge — única fonte de verdade) =========================================================== */ --green: #1DB954; /* primário (estilo Spotify) */ --green-hi: #25d066; /* variação clara */ --green-lo: #179648; /* variação escura */ --green-deep: #14803d; /* profundo (backgrounds densos) */ --green-dark: #0f5c2d; /* muito escuro (raro) */ --green-glow: rgba(29,185,84,.12); --green-mist: rgba(29,185,84,.04); /* =========================================================== ESCALA DE SUPERFÍCIES (backgrounds dark) =========================================================== */ --s0: #0a0c10; /* body padrão */ --s1: #0e1117; --s2: #13161d; --s3: #181c24; --s4: #1e232c; --s5: #252a35; --s6: #2e3440; /* mais clara (raro) */ /* =========================================================== ESCALA DE TEXTO (foreground) =========================================================== */ --t0: #edf0f5; /* off-white (headings) */ --t1: #b4bac7; /* corpo secundário */ --t2: #7c8494; /* descrições */ --t3: #4d5567; /* desativado / labels */ --t4: #333b4d; /* eyebrows muito escuros */ /* =========================================================== TOKENS PREMIUM (Linear-style — translúcidos) =========================================================== */ --cool-1: rgba(160,180,210,.06); /* border subtle */ --cool-2: rgba(160,180,210,.12); /* border hover */ --surface-1: rgba(255,255,255,.02); /* glass card base */ --surface-2: rgba(255,255,255,.04); /* glass card hover */ /* =========================================================== GRADIENTES =========================================================== */ --accent-gradient: linear-gradient(135deg, #1DB954, #179648); --accent-gradient-h: linear-gradient(90deg, #1DB954, #179648); --accent-gradient-r: linear-gradient(135deg, #179648, #1DB954); --accent-gradient-glow: linear-gradient(135deg, rgba(29,185,84,.1), rgba(23,150,72,.05)); /* =========================================================== TIPOGRAFIA Carregadas via Google Fonts no de cada página (atualização aplicada no Bloco 7.2) =========================================================== */ --sans: 'Inter', system-ui, -apple-system, sans-serif; --display: 'Inter', system-ui, -apple-system, sans-serif; --mono: 'Inter', system-ui, -apple-system, sans-serif; /* =========================================================== EASINGS (cubic-bezier nomeados) =========================================================== */ --expo: cubic-bezier(.25,.46,.45,.94); --spring: cubic-bezier(.23,1,.32,1); --smooth: cubic-bezier(.4,0,.2,1); --circ: cubic-bezier(.33,1,.68,1); --elastic: cubic-bezier(.68,-0.55,0.265,1.55); /* =========================================================== BORDER-RADIUS =========================================================== */ --radius-sm: 8px; --radius: 12px; --radius-lg: 16px; --radius-xl: 20px; --radius-2xl: 24px; /* =========================================================== SOMBRAS (multi-layer Linear/Stripe-style) Cada nível tem sombra escura + highlight branco subtle inset =========================================================== */ --shadow-sm: 0 1px 2px rgba(0,0,0,.3), 0 1px 0 rgba(255,255,255,.03) inset; --shadow-md: 0 8px 24px -8px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.04) inset; --shadow-lg: 0 24px 60px -20px rgba(0,0,0,.6), 0 1px 0 rgba(255,255,255,.05) inset; --shadow-xl: 0 40px 100px -30px rgba(0,0,0,.7), 0 1px 0 rgba(255,255,255,.06) inset; /* =========================================================== SPACING (premium — bem respirável) =========================================================== */ --sec-py: clamp(8rem, 14vh, 14rem); /* padding vertical de seção */ --gap-grid: clamp(1.5rem, 3.5vw, 2.75rem); /* gap entre items de grid */ --card-pad: clamp(1.6rem, 2.5vw, 2.4rem); /* padding interno de card */ /* =========================================================== LAYOUT WIDTHS =========================================================== */ --content-w: 1280px; --reading-w: 580px; /* =========================================================== ALIASES LEGACY (backwards compatibility) Mantém nomes antigos apontando pros novos tokens, pra que arquivos que ainda usam --primary-color / --sophos-* continuem funcionando enquanto refatoramos página-por-página. =========================================================== */ /* Brand Colors (legacy alias) */ --primary-color: var(--green); --primary-dark: var(--green-lo); --primary-light: var(--green-hi); --secondary-color: #4e63d7; /* azul secundário (raro, mantido) */ --accent-color: var(--green); --sophos-primary: var(--green); --sophos-primary-dark: var(--green-lo); --sophos-primary-light: var(--green-hi); --sophos-secondary: #2d5ebb; --sophos-gradient: var(--accent-gradient); --sophos-gradient-reverse: var(--accent-gradient-r); /* Backgrounds (legacy alias) */ --bg-dark: #000000; --bg-surface: var(--s0); --bg-card: var(--s2); /* Text (legacy alias) */ --text-white: #ffffff; --text-secondary: var(--t1); --text-dark: #ffffff; --text-light: var(--t1); /* Shadows (legacy alias) */ --shadow-light: var(--shadow-sm); --shadow-medium: var(--shadow-md); --shadow-green: 0 5px 20px var(--green-glow); --shadow-soft: var(--shadow-lg); --shadow-glow: 0 0 40px rgba(29,185,84,.4); /* Glass (legacy alias) */ --glass-bg: rgba(0,0,0,.6); --glass-border: rgba(29,185,84,.3); /* Layout (legacy alias) */ --border-radius: var(--radius); /* Transitions (legacy alias) */ --transition: all 0.3s ease; --transition-smooth: all 0.4s var(--smooth); --transition-bounce: all 0.5s var(--elastic); } /* ============================================================= STANDARD BREAKPOINTS (reference) - xs: < 576px (mobile portrait) - sm: >= 576px (mobile landscape) - md: >= 768px (tablet) - lg: >= 992px (desktop) - xl: >= 1200px (large desktop) ============================================================= */ /* ============================================================= UTILITY: .sitename-icon Logo Sophos Mentoria (com texto embutido) aplicado em todas as navbars com . O texto "Sophos Mentoria" agora vive dentro da própria imagem, então o texto irmão dentro do wrapper é colapsado (font-size:0) e fica acessível só para leitores de tela / SEO. ============================================================= */ .sitename-icon { height: 56px; width: auto; flex-shrink: 0; vertical-align: middle; margin-right: 0; line-height: normal; } /* Regra de collapse de texto removida — vivia aqui pra esconder texto irmão quando a PNG do logo continha "Sophos Mentoria" embutido. Agora o ícone é só a coluna (sophos-coluna-icon.png) e o texto irmão tem que aparecer normalmente. */ @media (max-width: 575px) { .sitename-icon { height: 42px; } }