/* ============================================================ ROOT — Variáveis (Tema Claro · padrão) ============================================================ */ :root { /* Cores principais */ --bg: #FAF7F1; --bg-raise: #FFFFFF; --bg-raise-2: #F0ECE3; --ink: #1C2333; --ink-soft: #4B5468; --ink-faint: #6B7385; /* Cores de destaque — paleta DevForge (dourado → fogo) */ --amber: #D4872A; --amber-bright: #C44A3A; --amber-soft: rgba(212,135,42,.13); --cyan: #0B6670; --cyan-soft: rgba(11,102,112,.11); --green: #1C8A3E; --green-soft: rgba(40,200,64,.14); --danger: #C4553D; --danger-soft: rgba(196,85,61,.11); /* Gradiente de marca DevForge */ --brand-grad: linear-gradient(135deg, #F5D08A 0%, #E8A838 25%, #D4872A 50%, #E8735A 75%, #C44A3A 100%); --brand-grad-2: linear-gradient(135deg, #E8A838, #D4872A, #E8735A); /* Bordas e vidro */ --glass: rgba(15,23,42,.035); --glass-hover: rgba(15,23,42,.06); --glass-border: rgba(15,23,42,.10); /* Cores do terminal (sempre escuro, propositado) */ --dk-1: #16233F; --dk-2: #0D1424; --dk-fg: #D7DCE8; --dk-fg-amber: #F5CA76; --dk-fg-mut: #7C88A6; --dk-border: rgba(255,255,255,.09); --dk-green: #4ADE80; /* Fontes */ --font-display: 'Space Grotesk', -apple-system, BlinkMacSystemFont, sans-serif; --font-body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Inter', sans-serif; --font-mono: 'SF Mono', 'JetBrains Mono', Consolas, monospace; --font-brand: 'Montserrat', var(--font-display); /* Fundo em vidro da sidebar (efeito de blur) */ --sidebar-bg: rgba(255,255,255,.72); /* Cartões translúcidos dentro das boxes temáticas */ --card-glass: rgba(255,255,255,.86); /* Dimensões */ --maxw: 1400px; --sidebar-w: 220px; --max-hero-w: 100%; /* Motion — tokens partilhados (enquadramento: Emil + Jakub) */ --ease-out: cubic-bezier(0.22, 1, 0.36, 1); --dur-fast: 180ms; --dur: 260ms; --dur-slow: 400ms; color-scheme: light; } /* ============================================================ TEMA ESCURO — ativado via [data-theme="dark"] no ============================================================ */ [data-theme="dark"] { --bg: #0B0F1C; --bg-raise: #131B2E; --bg-raise-2: #1A2438; --ink: #F5F1E7; --ink-soft: #B8C0D4; --ink-faint: #7C88A6; --amber: #E8A838; --amber-bright: #F5D08A; --amber-soft: rgba(232,168,56,.16); --cyan: #4FD1DB; --cyan-soft: rgba(79,209,219,.14); --green: #4ADE80; --green-soft: rgba(74,222,128,.14); --danger: #F0837A; --danger-soft: rgba(240,131,122,.14); --sidebar-bg: rgba(19,27,46,.78); --card-glass: rgba(19,27,46,.86); --glass: rgba(255,255,255,.04); --glass-hover: rgba(255,255,255,.07); --glass-border: rgba(255,255,255,.10); color-scheme: dark; } /* Transição suave ao alternar tema */ body, .sidebar, .content, header.top, .card, .uc-card, .codebox, .hero, .chapter, .gloss-item, .quiz-card, .step { transition: background-color .25s ease, color .25s ease, border-color .25s ease; } /* ============================================================ BOTÃO DE ALTERNAR TEMA ============================================================ */ .theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--glass-border); background: var(--glass); color: var(--amber-bright); cursor: pointer; transition: all .2s ease; flex: none; } .theme-toggle:hover { background: var(--amber-soft); color: var(--amber-bright); border-color: var(--amber); box-shadow: 0 0 0 4px var(--amber-soft); } .theme-toggle svg { width: 16px; height: 16px; } .theme-toggle.theme-toggle-floating { position: fixed; top: 16px; right: 16px; z-index: 300; background: var(--bg-raise); box-shadow: 0 4px 16px rgba(0,0,0,.14); } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* ============================================================ RESET e BASE ============================================================ */ * { margin: 0; padding: 0; box-sizing: border-box; } ::selection { background: var(--amber-soft); color: var(--amber-bright); } html { scroll-behavior: smooth; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } body { background: radial-gradient(ellipse 900px 500px at 15% -10%, rgba(201,146,46,.05), transparent 60%), radial-gradient(ellipse 700px 500px at 100% 10%, rgba(14,124,134,.05), transparent 55%), var(--bg); color: var(--ink); font-family: var(--font-body); line-height: 1.75; font-size: 16.5px; -webkit-font-smoothing: antialiased; min-height: 100vh; padding-top: 10px; overflow-x: hidden; } a { color: var(--cyan); text-decoration: none; } a:hover { text-decoration: underline; } h1, h2, h3, h4 { font-family: var(--font-display); color: var(--ink); line-height: 1.22; letter-spacing: -.01em; } strong { color: var(--ink); } :focus-visible { outline: 2px solid var(--cyan); outline-offset: 3px; border-radius: 2px; } /* ============================================================ BARRA DE PROGRESSO ============================================================ */ body > .progress-track { position: fixed; top: 0; left: 0; right: 0; height: 3px; background: rgba(15,23,42,.06); z-index: 200; } .progress-bar { height: 100%; width: 0%; background: linear-gradient(90deg, var(--amber), var(--cyan)); box-shadow: 0 0 8px rgba(201,146,46,.4); transition: width .12s var(--ease-out); } /* ============================================================ LAYOUT DA UC (sidebar + conteúdo) ============================================================ */ .layout { display: grid; grid-template-columns: var(--sidebar-w) minmax(0, 1fr); min-height: 100vh; } /* ============================================================ SIDEBAR ============================================================ */ .sidebar { background: var(--sidebar-bg); backdrop-filter: blur(20px) saturate(1.6); -webkit-backdrop-filter: blur(20px) saturate(1.6); border-right: 1px solid var(--glass-border); padding: 24px 14px 40px; position: sticky; top: 0; height: 100vh; overflow-y: auto; scrollbar-width: thin; scrollbar-color: var(--glass-border) transparent; } .sidebar::-webkit-scrollbar { width: 5px; } .sidebar::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 3px; } .brand { display: flex; align-items: center; gap: 10px; padding-left: 10px; justify-content: flex-start; } .sidebar .brand { justify-content: center; padding-left: 0; padding-top: 18px; gap: 8px; text-align: center; } .sidebar .brand-mark { width: auto; height: auto; border-radius: 0; flex: none; background: none; display: flex; align-items: center; justify-content: center; padding: 0; font-size: 28px; line-height: 1; filter: drop-shadow(0 0 8px rgba(232,115,90,0.2)); } .sidebar .brand-text { font-family: 'Montserrat', var(--font-display); font-weight: 800; font-size: 18px; letter-spacing: -0.02em; color: var(--ink); } .sidebar .brand-sub { font-size: 9px; color: var(--ink-faint); padding: 2px 4px 16px; font-family: var(--font-mono); letter-spacing: .06em; text-transform: uppercase; text-align: center; } nav.toc ul { list-style: none; margin: 0; padding: 0; } nav.toc .chap { margin-bottom: 1px; } nav.toc .chap > a { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 11.5px; color: var(--ink-soft); text-decoration: none; padding: 5px 8px; border-radius: 6px; transition: background .15s, color .15s; } nav.toc .chap > a .ic { width: 13px; height: 13px; flex: none; opacity: .6; } nav.toc .chap > a:hover { background: var(--glass-hover); color: var(--ink); } nav.toc .chap > a.active { background: var(--amber-soft); color: var(--amber-bright); } nav.toc .chap > a.active .ic { opacity: 1; } nav.toc .sub { list-style: none; margin: 1px 0 4px; padding: 0 0 0 28px; border-left: 1px solid var(--glass-border); } nav.toc .sub li a { display: block; font-size: 10.5px; color: var(--ink-faint); text-decoration: none; padding: 2px 8px; border-radius: 4px; transition: background .15s, color .15s; } nav.toc .sub li a:hover { color: var(--ink-soft); background: var(--glass-hover); } nav.toc .sub li a.active { color: var(--cyan); font-weight: 600; } nav.toc .extra { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--glass-border); } nav.toc .extra > a { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 11.5px; color: var(--ink-soft); text-decoration: none; padding: 5px 8px; border-radius: 6px; } nav.toc .extra > a:hover { background: var(--glass-hover); color: var(--ink); } nav.toc .extra > a .ic { width: 13px; height: 13px; opacity: .6; } /* ============================================================ CONTEÚDO DA UC — ALTERADO para largura total ============================================================ */ .content { padding: 0; min-width: 0; } .content-inner { max-width: var(--maxw); margin: 0 auto; padding: 0 40px 100px; } /* ============================================================ HERO — CORRIGIDO ============================================================ */ .hero { min-height: auto; display: flex; align-items: center; padding: 48px 40px; position: relative; overflow: hidden; border-bottom: 1px solid var(--glass-border); } .hero::before { content: ""; position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(15,23,42,.025) 1px, transparent 1px), linear-gradient(90deg, rgba(15,23,42,.025) 1px, transparent 1px); background-size: 42px 42px; -webkit-mask-image: radial-gradient(ellipse 800px 500px at 30% 30%, #000 40%, transparent 75%); mask-image: radial-gradient(ellipse 800px 500px at 30% 30%, #000 40%, transparent 75%); } .hero::after { content: ""; position: absolute; top: -160px; right: -180px; width: 480px; height: 480px; border-radius: 50%; border: 70px solid var(--glass); pointer-events: none; z-index: 0; } .hero-grid { display: grid; grid-template-columns: 1fr 1.2fr; gap: 32px; align-items: center; max-width: 100%; margin: 0 auto; position: relative; z-index: 1; width: 100%; padding: 0 10px; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; letter-spacing: .08em; color: var(--amber); background: transparent; border: none; padding: 0; border-radius: 0; margin-bottom: 16px; text-transform: uppercase; } .eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px rgba(201,146,46,.4); animation: pulse 2s ease-in-out infinite; } @keyframes pulse { 0%,100%{opacity:1;} 50%{opacity:.35;} } .hero h1 { font-family: 'Montserrat', var(--font-display); font-size: clamp(22px, 3vw, 30px); margin: 0 0 12px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); line-height: 1.2; } .hero-sub { font-size: 14px; color: var(--ink-soft); margin: 0 0 20px; max-width: 100%; line-height: 1.6; } .hero-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0; } .badge { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); border: 1px solid var(--glass-border); background: transparent; padding: 4px 10px; border-radius: 6px; box-shadow: none; } .badge b { color: var(--ink-soft); font-weight: 600; } .hero-stats { display: flex; gap: 24px; } .stat b { display: block; font-family: var(--font-display); font-size: 20px; color: var(--ink); } .stat span { font-size: 11px; color: var(--ink-faint); } /* Diagrama do hero */ .hw-diagram { background: linear-gradient(180deg, #16233F, #0D1424); border: 1px solid var(--glass-border); border-radius: 10px; padding: 10px 10px 8px; box-shadow: 0 20px 40px -16px rgba(15,23,42,.3); width: 100%; max-width: 100%; margin: 0; overflow: hidden; min-height: 160px; margin-bottom: 60px; } .hw-diagram svg { width: 100%; height: auto; display: block; max-height: 300px; } .hw-diagram-caption { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); text-align: center; margin-top: 10px; line-height: 1.4; } /* ============================================================ SCROLLDOWN ============================================================ */ .scrolldown { position: absolute; bottom: 16px; left: 50%; transform: translateX(-50%); color: var(--ink-faint); font-family: var(--font-mono); font-size: 9px; display: flex; flex-direction: column; align-items: center; gap: 4px; z-index: 1; opacity: 0.6; } .scrolldown .chev { animation: bob 2s ease-in-out infinite; } @keyframes bob { 0%,100%{transform:translateY(0);} 50%{transform:translateY(6px);} } /* ============================================================ TERMINAL ============================================================ */ .term { background: linear-gradient(180deg, var(--dk-1), var(--dk-2)); border: 1px solid var(--dk-border); border-radius: 10px; box-shadow: 0 20px 40px -16px rgba(15,23,42,.3), 0 0 0 1px rgba(255,255,255,.02) inset; overflow: hidden; } .term-bar { display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-bottom: 1px solid var(--dk-border); background: rgba(255,255,255,.02); } .term-dot { width: 9px; height: 9px; border-radius: 50%; } .term-dot.r { background: #FF5F57; } .term-dot.y { background: #FEBC2E; } .term-dot.g { background: #28C840; } .term-title { font-family: var(--font-mono); font-size: 10px; color: var(--dk-fg-mut); margin-left: 6px; } .term-body { padding: 14px 16px 18px; font-family: var(--font-mono); font-size: 11px; line-height: 1.8; min-height: 180px; color: var(--dk-fg); } .term-line { white-space: pre-wrap; word-break: break-all; opacity: 0; animation: tline .5s ease forwards; } .term-prompt { color: #6AD4E0; } .term-ok { color: var(--dk-green); } .term-warn { color: var(--dk-fg-amber); } .term-mut { color: var(--dk-fg-mut); } .term-cursor { display: inline-block; width: 7px; height: 14px; background: #6AD4E0; vertical-align: -2px; animation: blink 1s step-end infinite; } @keyframes blink { 50%{opacity:0;} } @keyframes tline { from{opacity:0;transform:translateY(3px);} to{opacity:1;transform:translateY(0);} } /* ============================================================ CHAPTERS ============================================================ */ .chapter { padding-top: 40px; scroll-margin-top: 20px; } .chapter-head { display: flex; align-items: flex-start; gap: 14px; margin-bottom: 8px; } .chapter-icon { width: 40px; height: 40px; border-radius: 10px; flex: none; background: linear-gradient(135deg, var(--amber-soft), var(--cyan-soft)); border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; } .chapter-icon svg { width: 18px; height: 18px; stroke: var(--amber-bright); } .chapter-eyebrow { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); letter-spacing: .08em; margin-bottom: 4px; text-transform: uppercase; } h1.chapter-title { font-family: 'Montserrat', var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -0.02em; margin: 0; } .chapter-meta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); margin: 10px 0 24px; padding-bottom: 20px; border-bottom: 1px solid var(--glass-border); } h2 { font-size: 17px; margin: 32px 0 10px; color: var(--ink); } h2 .h-accent { color: var(--amber-bright); font-family: var(--font-mono); font-weight: 500; margin-right: 8px; font-size: 13px; } h3 { font-size: 14px; color: var(--cyan); margin: 20px 0 8px; font-family: var(--font-display); font-weight: 600; } p { margin: 0 0 14px; color: var(--ink-soft); text-align: justify; font-size: 14px; line-height: 1.65; } p strong { color: var(--ink); font-weight: 600; } /* Reveal on scroll */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity var(--dur-slow) var(--ease-out), transform var(--dur-slow) var(--ease-out); } .reveal.visible { opacity: 1; transform: translateY(0); } /* ============================================================ SISTEMA DE MOTION — enter/exit/loading (Emil + Jakub) Só anima transform/opacity/filter (GPU). Exit mais subtil que enter. Tudo coberto pelo prefers-reduced-motion global. ============================================================ */ @keyframes df-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } @keyframes df-enter-blur { from { opacity: 0; transform: translateY(8px) scale(.98); filter: blur(5px); } to { opacity: 1; transform: translateY(0) scale(1); filter: blur(0); } } @keyframes df-drop { from { opacity: 0; transform: scale(.97); } to { opacity: 1; transform: scale(1); } } @keyframes df-spin { to { transform: rotate(360deg); } } .df-enter { animation: df-enter var(--dur) var(--ease-out) both; } .df-enter-blur { animation: df-enter-blur var(--dur-slow) var(--ease-out) both; } /* Saída — transição (interruptível) e mais subtil que a entrada */ .df-leaving { opacity: 0; transform: translateY(6px); filter: blur(2px); transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), filter var(--dur-fast) var(--ease-out); } /* ============================================================ SKELETON — placeholders de carregamento ============================================================ */ .skeleton { position: relative; overflow: hidden; background: var(--glass); border-radius: 10px; } .skeleton::after { content: ''; position: absolute; inset: 0; transform: translateX(-100%); background: linear-gradient(90deg, transparent, var(--glass-hover), transparent); animation: df-shimmer 1.4s var(--ease-out) infinite; } @keyframes df-shimmer { to { transform: translateX(100%); } } .skeleton-line { height: 12px; border-radius: 6px; } .skeleton-line.sm { width: 40%; } .skeleton-line.md { width: 62%; } .skeleton-line.lg { width: 85%; } .skeleton-card { border-radius: 14px; padding: 20px 22px 16px; border: 1px solid var(--glass-border); background: var(--bg-raise); display: flex; flex-direction: column; gap: 14px; } .skeleton-box { border-radius: 14px; padding: 18px 16px; border: 1px solid var(--glass-border); background: var(--bg-raise); display: flex; flex-direction: column; gap: 14px; } .skeleton-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } /* Spinner (botões) — substitui o ícone durante operações async */ .spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid rgba(255,255,255,.35); border-top-color: currentColor; animation: df-spin .7s linear infinite; display: inline-block; } /* Skeleton-grid: fade-out suave antes de ser removido */ .skeleton-grid { transition: opacity var(--dur-fast) var(--ease-out); } .skeleton-grid.leaving { opacity: 0; } /* Error da pesquisa — cai como o dropdown (com retry) */ .search-error { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-width: 480px; z-index: 50; background: var(--bg-raise); border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--glass-border)); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.12); padding: 14px 16px; flex-direction: column; gap: 10px; font-size: 13px; color: var(--ink-soft); } .search-error.show { display: flex; animation: df-drop var(--dur-fast) var(--ease-out) both; } .search-error button { align-self: flex-start; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--cyan); background: transparent; border: 1px solid color-mix(in srgb, var(--cyan) 40%, var(--glass-border)); padding: 5px 12px; border-radius: 8px; cursor: pointer; transition: background .15s, transform .1s; } .search-error button:hover { background: color-mix(in srgb, var(--cyan) 10%, transparent); transform: translateY(-1px); } /* Logout: spinner substitui o ícone enquanto a sessão termina */ .logout-btn .btn-spinner { display: none; } .logout-btn.loading { pointer-events: none; opacity: .8; } .logout-btn.loading .btn-spinner { display: inline-block; } .logout-btn.loading svg { display: none; } .logout-btn.loading .logout-label { opacity: .9; } /* Fase-box: ao expandir, a grelha entra com fade (interação ocasional) */ .fase-box.expanded .fase-box-track { animation: df-enter var(--dur) var(--ease-out) both; } /* ============================================================ MOTION DAS UCs — quiz, glossário e checklists (partilhado) ============================================================ */ /* Feedback do quiz: pop ao responder (classes aplicadas por JS) */ .quiz-opt.is-correct, .quiz-opt.is-wrong { animation: df-pop .28s var(--ease-out) both; } @keyframes df-pop { 0% { transform: scale(.97); } 55% { transform: scale(1.015); } 100% { transform: scale(1); } } .quiz-opt.is-muted { transition: opacity var(--dur-fast) ease; } /* Barra de progresso da checklist — fill suave com --pct (JS seta a variável) */ .checklist-progress { position: relative; padding-bottom: 12px; } .checklist-progress::after { content: ''; position: absolute; left: 10%; right: 10%; bottom: 0; height: 4px; border-radius: 2px; background: var(--glass-border); } .checklist-progress::before { content: ''; position: absolute; left: 10%; bottom: 0; width: 80%; height: 4px; border-radius: 2px; background: linear-gradient(90deg, var(--cyan), var(--amber)); transform: scaleX(var(--pct, 0)); transform-origin: left center; transition: transform .5s var(--ease-out); z-index: 1; } /* ============================================================ CODE BLOCKS ============================================================ */ .code-label { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); margin: 14px 0 6px; display: flex; align-items: center; gap: 8px; } .code-label::before { content: "▸"; color: var(--cyan); } .codebox { background: var(--dk-2); border: 1px solid var(--dk-border); border-radius: 10px; overflow: hidden; margin: 0 0 18px; box-shadow: 0 8px 24px -12px rgba(15,23,42,.3); } .codebox-bar { display: flex; gap: 5px; padding: 8px 12px; border-bottom: 1px solid rgba(255,255,255,.06); background: rgba(255,255,255,.02); } .codebox-bar span { width: 7px; height: 7px; border-radius: 50%; } .codebox-bar span:nth-child(1) { background: #FF5F57; } .codebox-bar span:nth-child(2) { background: #FEBC2E; } .codebox-bar span:nth-child(3) { background: #28C840; } pre.code { margin: 0; padding: 12px 16px; font-family: var(--font-mono); font-size: 11.5px; line-height: 1.6; color: var(--dk-fg); overflow-x: auto; } pre.code .flag { color: var(--dk-fg-amber); } pre.code .cmt, pre.code .comment { color: var(--dk-fg-mut); font-style: italic; } pre.code .str { color: #8FE3A8; } pre.code .tag { color: #F5CA76; } pre.code .attr { color: #6AD4E0; } pre.code .var { color: #93C5FD; } pre.code .keyword { color: #C084FC; font-weight: 600; } pre.code .selector { color: #F5CA76; } pre.code .prop { color: #6AD4E0; } pre.code .number { color: #FCA5A5; } pre.code .function { color: #93C5FD; } pre.code .operator { color: #D7DCE8; } /* ============================================================ CARDS (nota, sumário) ============================================================ */ .card { border-radius: 12px; padding: 18px 20px; margin: 22px 0; border: 1px solid var(--glass-border); position: relative; overflow: hidden; background: var(--bg-raise); } .card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 3px; } .note { background: var(--amber-soft); } .note::before { background: var(--amber); } .note-label { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 12px; color: var(--amber-bright); margin-bottom: 6px; } .note-label svg { width: 14px; height: 14px; stroke: var(--amber-bright); } .note p { font-size: 14px; color: #6B4E1A; margin: 0; text-align: left; font-style: italic; } .summary { background: var(--cyan-soft); } .summary::before { background: var(--cyan); } .summary-label { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 600; font-size: 13px; color: var(--cyan); ; } .summary-label svg { width: 14px; height: 14px; stroke: var(--cyan); } .summary ul { margin: 0; padding-left: 0; list-style: none; } .summary li { position: relative; padding-left: 20px; margin-bottom: 8px; font-size: 14px; color: var(--ink-soft); } .summary li::before { content: "✓"; position: absolute; left: 0; color: var(--cyan); font-family: var(--font-mono); font-size: 11px; top: 1px; } /* ============================================================ UC CARD (enquadramento da UC) ============================================================ */ .uc-card { border-radius: 10px; padding: 16px 20px; margin: 20px 0 16px; border: 1px solid var(--glass-border); position: relative; overflow: hidden; } .uc-card.uc-a { background: linear-gradient(135deg, rgba(201,146,46,.08), rgba(201,146,46,.01)); } .uc-card.uc-b { background: linear-gradient(135deg, rgba(14,124,134,.08), rgba(14,124,134,.01)); } .uc-card-title { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); margin-bottom: 4px; display: flex; align-items: center; gap: 8px; } .uc-card.uc-a .uc-card-title { color: var(--amber-bright); } .uc-card.uc-b .uc-card-title { color: var(--cyan); } .uc-card-meta { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); } .uc-card-meta b { color: var(--ink-soft); font-weight: 500; } ul.plain, ol.plain { margin: 0 0 14px; padding-left: 18px; } ul.plain li, ol.plain li { margin-bottom: 5px; color: var(--ink-soft); font-size: 14px; } /* ============================================================ TABELAS ============================================================ */ table.fhs { width: 100%; border-collapse: collapse; margin: 16px 0 22px; font-size: 13px; table-layout: fixed; } table.fhs th { background: var(--bg-raise-2); color: var(--ink); text-align: left; padding: 8px 12px; font-family: var(--font-mono); font-weight: 600; font-size: 11px; } table.fhs td { padding: 7px 12px; border-bottom: 1px solid var(--glass-border); color: var(--ink-soft); word-break: break-word; } table.fhs td:first-child { width: 26%; font-family: var(--font-mono); color: var(--cyan); font-weight: 600; } table.fhs tr:nth-child(even) td { background: rgba(15,23,42,.02); } code.inline { font-family: var(--font-mono); background: rgba(15,23,42,.06); color: var(--amber-bright); padding: 1px 5px; border-radius: 4px; font-size: .9em; } /* ============================================================ GLOSSÁRIO ============================================================ */ .gloss-search { width: 100%; padding: 11px 14px; border-radius: 10px; margin: 18px 0 20px; background: var(--bg-raise); border: 1px solid var(--glass-border); color: var(--ink); font-family: var(--font-body); font-size: 14px; box-shadow: 0 1px 2px rgba(15,23,42,.04); } .gloss-search::placeholder { color: var(--ink-faint); } .gloss-search:focus { outline: none; border-color: var(--cyan); box-shadow: 0 0 0 3px var(--cyan-soft); } .gloss-grid { display: flex; flex-direction: column; gap: 8px; } .gloss-item { background: var(--bg-raise); border: 1px solid var(--glass-border); border-radius: 8px; padding: 12px 16px; transition: background .15s, border-color .15s, transform .15s; box-shadow: 0 1px 2px rgba(15,23,42,.02); } .gloss-item:hover { background: var(--glass-hover); border-color: rgba(15,23,42,.15); transform: translateX(2px); } .gloss-term { font-family: var(--font-mono); font-weight: 600; color: var(--amber-bright); font-size: 12px; margin-bottom: 2px; } .gloss-def { font-size: 12.5px; color: var(--ink-soft); line-height: 1.5; } /* ============================================================ REFERÊNCIAS ============================================================ */ .refs ul { list-style: none; margin: 0; padding: 0; } .refs li { padding: 10px 0; border-bottom: 1px solid var(--glass-border); font-size: 13px; color: var(--ink-soft); display: flex; gap: 10px; } .refs li::before { content: "→"; color: var(--cyan); font-family: var(--font-mono); flex: none; } .final-footer { padding: 40px 40px 60px; text-align: center; color: var(--ink-faint); font-size: 11px; font-family: var(--font-mono); border-top: 1px solid var(--glass-border); margin-top: 20px; } /* ============================================================ BOTÃO VOLTAR AO TOPO ============================================================ */ .totop { position: fixed; right: 22px; bottom: 22px; width: 40px; height: 40px; border-radius: 50%; background: var(--bg-raise); border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; cursor: pointer; opacity: 0; pointer-events: none; transition: opacity .25s, transform .2s; z-index: 80; box-shadow: 0 10px 24px -8px rgba(15,23,42,.18); } .totop.show { opacity: 1; pointer-events: auto; } .totop:hover { transform: translateY(-3px); border-color: var(--cyan); } .totop svg { width: 16px; height: 16px; stroke: var(--ink); } /* ============================================================ DIVIDER ============================================================ */ .divider-fade { height: 1px; margin: 50px 0; background: linear-gradient(90deg, transparent, var(--glass-border), transparent); } /* ============================================================ CHECKLIST ============================================================ */ .checklist { background: var(--bg-raise); border: 1px solid var(--glass-border); border-radius: 14px; padding: 18px 22px; margin: 18px 0; } .checklist-item { display: flex; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--glass-border); } .checklist-item:last-child { border-bottom: none; } .checklist-item input[type="checkbox"] { width: 18px; height: 18px; accent-color: var(--cyan); cursor: pointer; flex: none; } .checklist-item label { font-size: 14px; color: var(--ink-soft); cursor: pointer; } .checklist-item.done label { text-decoration: line-through; color: var(--ink-faint); } .checklist-progress { text-align: center; padding: 10px 0 2px; font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); } .checklist-progress .pct { font-weight: 700; color: var(--cyan); } /* ============================================================ FLUXOGRAMA ============================================================ */ .flowchart { background: var(--bg-raise); border: 1px solid var(--glass-border); border-radius: 14px; padding: 20px; margin: 18px 0; overflow-x: auto; } .flowchart svg { width: 100%; height: auto; min-width: 600px; display: block; } .flowchart text { font-family: var(--font-mono); font-size: 9px; fill: var(--ink-soft); } .flowchart .node { fill: var(--bg-raise); stroke: var(--glass-border); stroke-width: 2; rx: 6; } .flowchart .node-start { fill: var(--cyan-soft); stroke: var(--cyan); } .flowchart .node-decision { fill: var(--amber-soft); stroke: var(--amber-bright); } .flowchart .node-end { fill: var(--danger-soft); stroke: var(--danger); } /* ============================================================ PSU CALCULATOR ============================================================ */ .psu-calc { background: var(--bg-raise); border: 1px solid var(--glass-border); border-radius: 14px; padding: 20px 22px; margin: 20px 0; } .psu-calc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .psu-calc-grid .full { grid-column: 1 / -1; } .psu-calc label { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); display: block; margin-bottom: 2px; } .psu-calc input[type="number"] { width: 100%; padding: 8px 10px; border-radius: 8px; border: 1px solid var(--glass-border); background: var(--bg); font-size: 13px; font-family: var(--font-mono); color: var(--ink); } .psu-calc input[type="number"]:focus { outline: none; border-color: var(--cyan); } .psu-result { text-align: center; padding: 14px; background: var(--cyan-soft); border-radius: 10px; margin-top: 14px; } .psu-result .big { font-size: 24px; font-weight: 700; font-family: var(--font-display); color: var(--cyan); } .psu-result .rec { font-size: 13px; color: var(--ink-soft); margin-top: 2px; } .psu-result .rec strong { color: var(--amber-bright); } /* ============================================================ HAZARD TABLE (substâncias perigosas) ============================================================ */ .hazard-table td:first-child { font-weight: 600; color: var(--ink); } .hazard-table .risk-high { color: var(--danger); } .hazard-table .risk-med { color: var(--amber-bright); } .hazard-table .risk-low { color: var(--cyan); } /* ============================================================ DIAGRAM ROW ============================================================ */ .diagram-row { display: flex; gap: 18px; flex-wrap: wrap; justify-content: center; margin: 18px 0; } .diagram-row .diagram-card { flex: 1; min-width: 220px; margin: 0; } .diagram-card svg { width: 100%; height: auto; display: block; max-width: 520px; margin: 0 auto; } .diagram-card { background: var(--bg-raise); border: 1px solid var(--glass-border); border-radius: 12px; padding: 16px; margin: 18px 0; box-shadow: 0 2px 10px rgba(15,23,42,.04); } .diagram-caption { font-family: var(--font-mono); font-size: 10px; color: var(--ink-faint); text-align: center; margin-top: 10px; } /* ============================================================ MOBILE — SIDEBAR E OVERLAY ============================================================ */ .mobile-bar { display: none; } .overlay { visibility: hidden; opacity: 0; position: fixed; inset: 0; background: rgba(15,23,42,.35); z-index: 90; -webkit-backdrop-filter: blur(2px); backdrop-filter: blur(2px); transition: opacity var(--dur) var(--ease-out), visibility 0s linear var(--dur); } .overlay.show { visibility: visible; opacity: 1; transition: opacity var(--dur) var(--ease-out); } @media (max-width: 980px) { .layout { grid-template-columns: minmax(0, 1fr); } .sidebar { position: fixed; left: 0; top: 0; bottom: 0; width: var(--sidebar-w); transform: translateX(-100%); transition: transform .28s ease; z-index: 100; } .sidebar.open { transform: translateX(0); } .mobile-bar { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 3px; z-index: 70; padding: 12px 16px; background: var(--sidebar-bg); -webkit-backdrop-filter: blur(14px) saturate(1.5); backdrop-filter: blur(14px) saturate(1.5); border-bottom: 1px solid var(--glass-border); } .mobile-bar .brand { margin: 0; } .mobile-bar .brand-mark { font-size: 24px !important; line-height: 1; } .mobile-bar .brand-text { font-size: 18px !important; } .mobile-bar .menu-btn { flex-shrink: 0; } .menu-btn { width: 36px; height: 36px; border-radius: 8px; background: var(--glass); border: 1px solid var(--glass-border); display: flex; align-items: center; justify-content: center; cursor: pointer; appearance: none; color: inherit; } .menu-btn svg { width: 18px; height: 18px; stroke: var(--ink); } .hero { padding: 32px 18px 40px; } .hero-grid { grid-template-columns: 1fr; gap: 28px; } .hero-sub { max-width: 100%; } .hw-diagram { max-width: 100%; } .hw-diagram svg { max-height: none; } .content-inner { padding: 0 18px 80px; } .scrolldown { display: none; } .hero-stats { gap: 18px; } .psu-calc-grid { grid-template-columns: 1fr; } } @media (max-width: 640px) { .hero { padding: 24px 14px 32px; } .content-inner { padding: 0 14px 60px; } .hero h1 { font-size: clamp(20px, 4.5vw, 26px); } .hero-sub { font-size: 14px; } .diagram-row { gap: 12px; } .diagram-row .diagram-card { min-width: 100%; } .hw-diagram { padding: 14px; } } @media (max-width: 480px) { .content-inner { padding: 0 12px 60px; } .hero-badges { gap: 4px; } .badge { font-size: 9px; padding: 3px 8px; } .stat b { font-size: 18px; } .hero-stats { gap: 12px; } } /* ============================================================ QUIZZES ============================================================ */ .quiz-card { border-radius: 10px; padding: 18px 20px 20px; margin: 24px 0 10px; border: 1px solid var(--glass-border); background: var(--bg-raise); box-shadow: 0 1px 4px rgba(15,23,42,.03); } .quiz-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 4px; flex-wrap: wrap; } .quiz-title { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); } .quiz-title svg { width: 15px; height: 15px; stroke: var(--amber-bright); } .quiz-best { font-family: var(--font-mono); font-size: 11px; color: var(--ink-faint); } .quiz-best b { color: var(--cyan); } .quiz-sub { font-size: 12px; color: var(--ink-faint); margin-bottom: 16px; } .quiz-q { margin-bottom: 18px; } .quiz-q:last-of-type { margin-bottom: 6px; } .quiz-q-text { font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 8px; } .quiz-q-num { font-family: var(--font-mono); color: var(--amber-bright); margin-right: 6px; } .quiz-opts { display: flex; flex-direction: column; gap: 6px; } .quiz-opt { text-align: left; width: 100%; padding: 8px 12px; border-radius: 8px; border: 1px solid var(--glass-border); background: var(--bg); font-family: var(--font-body); font-size: 13px; color: var(--ink-soft); cursor: pointer; transition: background .15s, border-color .15s, transform .1s; } .quiz-opt:hover:not(:disabled) { background: var(--glass-hover); border-color: rgba(15,23,42,.18); } .quiz-opt:disabled { cursor: default; } .quiz-opt .qk { font-family: var(--font-mono); color: var(--ink-faint); margin-right: 6px; } .quiz-opt.is-correct { background: rgba(40,200,64,.12); border-color: #28C840; color: #1C6B2A; } .quiz-opt.is-correct .qk { color: #1C6B2A; } .quiz-opt.is-wrong { background: rgba(232,115,90,.12); border-color: var(--danger); color: #8A3A28; } .quiz-opt.is-wrong .qk { color: #8A3A28; } .quiz-opt.is-muted { opacity: .5; } .quiz-feedback { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; font-weight: 600; margin-top: 6px; } .quiz-feedback.ok { color: #1C6B2A; } .quiz-feedback.bad { color: #8A3A28; } .quiz-footer { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--glass-border); } .quiz-score { font-family: var(--font-display); font-weight: 700; font-size: 14px; color: var(--ink); } .quiz-score .fraction-good { color: #1C6B2A; } .quiz-score .fraction-bad { color: var(--amber-bright); } .quiz-retry { font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--ink); background: var(--bg-raise-2); border: 1px solid var(--glass-border); padding: 6px 14px; border-radius: 8px; cursor: pointer; transition: background .15s, transform .1s; } .quiz-retry:hover { background: var(--glass-hover); transform: translateY(-1px); } /* ============================================================ */ /* RESTO DO CSS (herda tema claro/escuro via variáveis) */ /* ============================================================ */ .top { display: flex; align-items: center; justify-content: space-between; padding: 16px 32px; background: var(--bg-raise); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid var(--glass-border); position: sticky; top: 0; z-index: 100; } .top::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, color-mix(in srgb, var(--amber) 35%, transparent) 30%, transparent 70%); opacity: 0.6; pointer-events: none; } .brand { display: flex; align-items: center; gap: 10px; padding-left: 10px; } .brand-mark { font-size: 28px; line-height: 1; filter: drop-shadow(0 0 10px rgba(232,115,90,0.15)); transition: all 0.3s ease; cursor: default; flex-shrink: 0; } .brand-mark:hover { filter: drop-shadow(0 0 18px rgba(232,115,90,0.25)); transform: scale(1.05); } .brand-text { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 22px; color: var(--ink); } .brand-text small { display: block; font-family: 'Inter', sans-serif; font-weight: 400; font-size: 10px; color: var(--ink-faint); letter-spacing: 0.02em; } .header-progress { font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-faint); background: var(--glass); padding: 4px 14px; border-radius: 100px; } .header-progress span { color: var(--ink); font-weight: 600; } main { max-width: 100%; padding: 0 32px 60px; } .hero { padding: 40px 0 20px; position: relative; overflow: hidden; } .hero::after { content: ""; position: absolute; top: -150px; right: -170px; width: 440px; height: 440px; border-radius: 50%; border: 64px solid var(--glass); pointer-events: none; z-index: 0; } .hero > * { position: relative; z-index: 1; } .eyebrow { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 11px; color: var(--amber); background: var(--amber-soft); padding: 4px 14px; border-radius: 100px; letter-spacing: 0.04em; } .eyebrow .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--amber); display: inline-block; animation: pulse-dot 2s ease-in-out infinite; } .title { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: clamp(20px, 2.8vw, 30px); font-weight: 700; margin: 12px 0 8px; letter-spacing: 0; min-height: 1.4em; } .typewriter-text { background: linear-gradient(135deg, #B22222, #D4872A, #E8A838, #F5D08A); -webkit-background-clip: text; background-clip: text; color: transparent; } .typewriter-cursor { display: inline-block; font-family: 'JetBrains Mono', monospace; font-weight: 100; color: var(--amber); font-size: clamp(28px, 4.2vw, 42px); line-height: 1.1; animation: blinkCursor 0.8s step-end infinite; margin-left: 0; opacity: 0.7; } @keyframes blinkCursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } .subtitle { font-size: 16px; color: var(--ink-soft); max-width: 560px; margin: 0 0 14px; line-height: 1.7; } /* ============================================================ PREMIUM HOME DESIGN SYSTEM ============================================================ */ /* Hero */ .hero { position: relative; padding: 56px 0 40px; margin-bottom: 0; overflow: visible; } .hero::before, .hero::after { content: none; } .hero-glow { position: absolute; top: -120px; left: 50%; transform: translateX(-50%); width: 900px; height: 520px; background: radial-gradient(ellipse, rgba(232,168,56,0.06) 0%, rgba(232,115,90,0.03) 40%, transparent 70%), linear-gradient(rgba(232,168,56,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(232,168,56,0.05) 1px, transparent 1px); background-size: auto, 34px 34px, 34px 34px; -webkit-mask-image: radial-gradient(ellipse 62% 100% at 50% 0%, #000 25%, transparent 72%); mask-image: radial-gradient(ellipse 62% 100% at 50% 0%, #000 25%, transparent 72%); pointer-events: none; z-index: 0; } .hero-content { position: relative; z-index: 1; } .hero-badge { display: inline-flex; align-items: center; gap: 8px; font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 600; letter-spacing: 0.1em; color: var(--amber); margin-bottom: 20px; padding: 7px 16px 7px 12px; background: var(--amber-soft); border: 1px solid color-mix(in srgb, var(--amber) 22%, transparent); border-radius: 999px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .hero-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--amber); box-shadow: 0 0 8px rgba(232,168,56,0.4); animation: pulse-dot 2s ease-in-out infinite; } @keyframes pulse-dot { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.5; transform: scale(0.8); } } h1.title { font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: clamp(18px, 2.5vw, 28px); font-weight: 800; letter-spacing: 0; margin: 0 0 6px; line-height: 1.3; display: flex; flex-wrap: wrap; align-items: center; gap: 0; } /* Search */ .hero-actions { margin-bottom: 32px; } .search-container { position: relative; max-width: 480px; } .search-icon { position: absolute; left: 16px; top: 50%; transform: translateY(-50%); width: 16px; height: 16px; color: var(--ink-faint); pointer-events: none; transition: color 0.2s; } .search-input { width: 100%; padding: 14px 60px 14px 44px; border-radius: 12px; border: 1px solid var(--glass-border); background: var(--bg-raise); font-family: 'Inter', sans-serif; font-size: 14px; color: var(--ink); transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1); box-shadow: 0 1px 3px rgba(0,0,0,0.02), 0 0 0 0 transparent; } .search-input:focus { outline: none; border-color: var(--amber); box-shadow: 0 0 0 4px rgba(232,168,56,0.1), 0 4px 16px rgba(0,0,0,0.04); transform: translateY(-1px); } .search-input:focus ~ .search-icon { color: var(--amber); } .search-input::placeholder { color: var(--ink-faint); font-weight: 400; } .search-kbd { position: absolute; right: 14px; top: 50%; transform: translateY(-50%); font-family: 'Inter', sans-serif; font-size: 11px; font-weight: 500; color: var(--ink-faint); background: var(--glass); border: 1px solid var(--glass-border); border-radius: 6px; padding: 3px 8px; pointer-events: none; opacity: 0.7; transition: opacity 0.2s ease; } .search-input:not(:placeholder-shown) ~ .search-kbd { opacity: 0; } .search-clear { position: absolute; right: 14px; top: 50%; transform: translateY(-50%) scale(.85); width: 28px; height: 28px; border-radius: 7px; border: none; background: transparent; color: var(--ink-faint); cursor: pointer; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; pointer-events: none; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s linear var(--dur-fast); } .search-clear:hover { background: var(--glass-hover); opacity: 1; } .search-clear.visible { opacity: .7; transform: translateY(-50%) scale(1); visibility: visible; pointer-events: auto; transition: opacity var(--dur-fast) var(--ease-out), transform var(--dur-fast) var(--ease-out), visibility 0s; } .search-results { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-width: 480px; z-index: 50; background: var(--bg-raise); border: 1px solid var(--glass-border); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.12); overflow: hidden; transform-origin: top center; } .search-results.visible { display: block; animation: df-drop var(--dur-fast) var(--ease-out) both; } .search-loading { display: none; position: absolute; top: calc(100% + 6px); left: 0; right: 0; max-width: 480px; z-index: 50; background: var(--bg-raise); border: 1px solid var(--glass-border); border-radius: 12px; box-shadow: 0 12px 40px rgba(0,0,0,0.12); padding: 16px; flex-direction: column; gap: 12px; } .search-loading.show { display: flex; animation: df-drop var(--dur-fast) var(--ease-out) both; } .search-result-item { display: block; padding: 12px 16px; text-decoration: none; border-bottom: 1px solid var(--glass-border); transition: background 0.15s; } .search-result-item:last-child { border-bottom: none; } .search-result-item:hover { background: var(--glass); } .sr-title { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--amber-bright); margin-bottom: 4px; } .sr-snippet { font-size: 12px; color: var(--ink-faint); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Pomodoro Timer */ .pomodoro { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; position: relative; padding: 4px 10px 4px 6px; border-radius: 8px; border: 1px solid var(--glass-border); background: var(--glass); transition: all 0.2s; user-select: none; } /* Hero bottom row */ .hero-bottom { display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap; } .resume-card { display: none; align-items: center; gap: 16px; background: linear-gradient(135deg, rgba(201,146,46,0.08), rgba(201,146,46,0.02)); border: 1px solid rgba(201,146,46,0.15); border-radius: 12px; padding: 14px 20px; margin-top: 20px; transition: border-color 0.3s, background 0.3s; animation: fadeUp 0.35s var(--ease-out) both; } .resume-card:hover { background: linear-gradient(135deg, rgba(201,146,46,0.12), rgba(201,146,46,0.04)); border-color: rgba(201,146,46,0.30); } .resume-icon { font-size: 24px; line-height: 1; flex-shrink: 0; } .resume-body { flex: 1; min-width: 0; } .resume-label { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); margin-bottom: 2px; } .resume-title { font-family: 'Montserrat', sans-serif; font-size: 13px; font-weight: 700; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .resume-btn { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: #C9922E; text-decoration: none; padding: 8px 18px; border: 1px solid rgba(201,146,46,0.30); border-radius: 8px; white-space: nowrap; transition: all 0.2s; flex-shrink: 0; } .resume-btn:hover { background: rgba(201,146,46,0.12); border-color: #C9922E; color: #D4B15A; } @keyframes fadeUp { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } } .pinned-label { margin-top: 0; } .card-pin { font-size: 13px; cursor: pointer; color: var(--ink-faint); transition: color 0.2s, transform 0.2s; user-select: none; line-height: 1; } .card-pin:hover { color: #F5CA76; transform: scale(1.15); } .card-pin:active { transform: scale(0.95); } .hero-stats { display: flex; gap: 8px; flex-wrap: wrap; } .stat-pill { font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; color: var(--ink-faint); background: var(--glass); border: 1px solid var(--glass-border); padding: 6px 14px; border-radius: 10px; transition: all 0.2s ease; display: inline-flex; align-items: center; gap: 8px; position: relative; overflow: hidden; } .stat-pill::before { content: ''; position: absolute; inset: 0; background: linear-gradient(120deg, transparent, color-mix(in srgb, var(--amber) 10%, transparent), transparent); transform: translateX(-100%); transition: transform 0.6s ease; pointer-events: none; } .stat-pill:hover { border-color: color-mix(in srgb, var(--amber) 35%, var(--glass-border)); background: var(--glass-hover); transform: translateY(-1px); } .stat-pill:hover::before { transform: translateX(100%); } .stat-icon { font-size: 15px; line-height: 1.6; display: inline-flex; align-items: center; filter: drop-shadow(0 0 6px rgba(232,168,56,0.25)); } .stat-pill strong { color: var(--amber); font-weight: 800; font-family: 'JetBrains Mono', monospace; font-size: 13px; line-height: 1; } /* Progress */ .progress-section { min-width: 260px; flex-shrink: 0; } .progress-header { display: flex; justify-content: space-between; align-items: center; font-size: 12px; font-weight: 500; color: var(--ink-faint); margin-bottom: 8px; } .progress-header .pct { font-weight: 700; color: var(--amber); font-family: 'JetBrains Mono', monospace; } .progress-track { height: 6px; border-radius: 100px; background: var(--glass-border); overflow: hidden; } .progress-bar-fill { height: 100%; width: 0%; background: var(--brand-grad); border-radius: 100px; transition: width 0.8s cubic-bezier(0.22, 1, 0.36, 1); position: relative; } .progress-bar-fill::after { content: ''; position: absolute; top: 0; right: 0; width: 48px; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.35), transparent); border-radius: 100px; animation: df-shimmer 2.6s ease-in-out infinite; } @keyframes df-shimmer { 0% { transform: translateX(-340px); } 55% { transform: translateX(340px); } 100% { transform: translateX(340px); } } /* Grid */ .grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(340px, 1fr)); gap: 12px; } /* Cards */ .card { background: var(--bg-raise); border-radius: 14px; padding: 20px 22px 16px; border: 1px solid var(--glass-border); border-left: 3px solid transparent; box-shadow: 0 1px 3px rgba(0,0,0,0.02); transition: all 0.3s cubic-bezier(0.22, 1, 0.36, 1); cursor: pointer; text-decoration: none; color: inherit; display: flex; flex-direction: column; gap: 6px; position: relative; overflow: hidden; } .card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: var(--brand-grad); opacity: 0; transition: opacity 0.3s ease; } .card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px -8px rgba(15,23,42,0.12), 0 0 0 1px rgba(232,168,56,0.08); border-color: rgba(232,168,56,0.15); text-decoration: none; color: inherit; } .card:hover::before { opacity: 1; } .card:active { transform: translateY(-2px); transition-duration: 0.1s; } .card::after { content: ''; position: absolute; top: 0; left: -80%; width: 55%; height: 100%; background: linear-gradient(105deg, transparent, rgba(245,208,138,0.09), transparent); transform: skewX(-18deg); opacity: 0; pointer-events: none; transition: opacity 0.25s ease; } .card:hover::after { opacity: 1; animation: df-sheen 0.9s ease; } @keyframes df-sheen { from { left: -80%; } to { left: 135%; } } .card.done { border-color: rgba(42,122,74,0.15); } .card.done::before { background: linear-gradient(90deg, #28C840, #4ADE80); opacity: 1; } .card.done .card-check { background: var(--green); color: #fff; border-color: var(--green); } .card.in-progress { border-color: rgba(41,112,189,0.18); } .card.in-progress::before { background: linear-gradient(90deg, #2970BD, #5B9BD5); opacity: 1; } .card.in-progress .card-check { background: rgba(41,112,189,0.12); border-color: #2970BD; color: #5B9BD5; font-size: 10px; font-weight: 700; } .card.in-progress .card-check:hover { background: rgba(41,112,189,0.2); box-shadow: 0 2px 8px rgba(41,112,189,0.2); } .card-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .card-fase-badge { font-family: 'Inter', sans-serif; font-size: 10px; font-weight: 600; padding: 3px 8px; border-radius: 6px; letter-spacing: 0.02em; line-height: 1.3; } .card-top-right { display: flex; align-items: center; gap: 6px; margin-left: auto; } .card-code { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 600; color: var(--ink-faint); letter-spacing: 0.02em; } .card-credits { font-family: 'JetBrains Mono', monospace; font-size: 10px; font-weight: 500; color: var(--ink-faint); background: var(--glass); padding: 3px 10px; border-radius: 6px; border: 1px solid var(--glass-border); } .card-credits.reforco { color: var(--cyan); background: rgba(11,102,112,0.06); border-color: rgba(11,102,112,0.12); font-weight: 600; } .card-title { font-size: 14px; font-weight: 600; color: var(--ink); line-height: 1.45; margin: 2px 0; flex: 1; } .card-bottom { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; padding-top: 10px; border-top: 1px solid var(--glass-border); } .card-check { width: 22px; height: 22px; border-radius: 7px; border: 1.5px solid var(--glass-border); background: transparent; display: flex; align-items: center; justify-content: center; font-size: 11px; color: transparent; transition: all 0.2s cubic-bezier(0.22, 1, 0.36, 1); flex-shrink: 0; cursor: pointer; user-select: none; } .card-check:hover { border-color: var(--cyan); transform: scale(1.08); box-shadow: 0 2px 8px rgba(11,102,112,0.15); } .card.done .card-check { background: var(--green); border-color: var(--green); color: #fff; } .card-check.clicked { animation: pop-check 0.35s cubic-bezier(0.22, 1, 0.36, 1); } @keyframes pop-check { 0% { transform: scale(1); } 40% { transform: scale(1.25); } 100% { transform: scale(1); } } .card-num { font-family: 'JetBrains Mono', monospace; font-weight: 600; font-size: 11px; color: var(--ink-faint); opacity: 0.5; } /* Card entrance animation — apenas no boot (JS controla .entrada-cards); re-renders (pins, pesquisa, reset) não repetem a animação → sem flash */ .grid.entrada-cards .card { animation: card-enter 0.4s cubic-bezier(0.22, 1, 0.36, 1) backwards; } .grid.entrada-cards .card:nth-child(1) { animation-delay: 0.02s; } .grid.entrada-cards .card:nth-child(2) { animation-delay: 0.04s; } .grid.entrada-cards .card:nth-child(3) { animation-delay: 0.06s; } .grid.entrada-cards .card:nth-child(4) { animation-delay: 0.08s; } .grid.entrada-cards .card:nth-child(5) { animation-delay: 0.10s; } .grid.entrada-cards .card:nth-child(6) { animation-delay: 0.12s; } .grid.entrada-cards .card:nth-child(7) { animation-delay: 0.14s; } .grid.entrada-cards .card:nth-child(8) { animation-delay: 0.16s; } .grid.entrada-cards .card:nth-child(9) { animation-delay: 0.18s; } .grid.entrada-cards .card:nth-child(10) { animation-delay: 0.20s; } @keyframes card-enter { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: translateY(0); } } /* Hero — entrada em cascata quando o site-content fica ativo (após login) */ @keyframes df-rise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } } .site-content.active .hero-content > * { animation: df-rise 0.55s var(--ease-out) both; } .site-content.active .hero-content > *:nth-child(1) { animation-delay: 0.04s; } .site-content.active .hero-content > *:nth-child(2) { animation-delay: 0.11s; } .site-content.active .hero-content > *:nth-child(3) { animation-delay: 0.18s; } .site-content.active .hero-content > *:nth-child(4) { animation-delay: 0.25s; } .site-content.active .hero-content > *:nth-child(5) { animation-delay: 0.32s; } /* Reset button */ .reset-btn { position: fixed; bottom: 24px; right: 24px; background: var(--bg-raise); border: 1px solid var(--glass-border); border-radius: 10px; padding: 10px 18px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 500; color: var(--ink-soft); cursor: pointer; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.04); z-index: 50; } .reset-btn:hover { border-color: var(--danger); color: var(--danger); transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.08); } .reset-btn:active { transform: scale(0.97); } /* No results */ .no-results { text-align: center; padding: 60px 20px; color: var(--ink-faint); font-size: 14px; grid-column: 1 / -1; } .no-results strong { color: var(--ink); display: block; margin-bottom: 6px; font-size: 15px; } /* Responsive */ @media (max-width: 768px) { .hero { padding: 40px 0 28px; } .hero-bottom { flex-direction: column; align-items: flex-start; gap: 20px; } .progress-section { min-width: 100%; } .grid { grid-template-columns: 1fr; } .search-kbd { display: none; } .search-clear { display: none; } } .fase-label { grid-column: 1 / -1; padding: 20px 0 8px; font-family: 'Montserrat', sans-serif; font-size: 16px; font-weight: 700; color: var(--ink); border-bottom: 1px solid var(--glass-border); margin: 12px 0 4px; display: flex; align-items: center; gap: 10px; letter-spacing: -0.01em; } .fase-label .count { font-family: 'JetBrains Mono', monospace; font-size: 11px; font-weight: 500; color: var(--ink-faint); background: var(--glass); padding: 2px 8px; border-radius: 4px; } /* ============================================================ BOXES TEMÁTICAS POR FASE — carrossel lateral infinito + expandir ============================================================ */ .fase-box { position: relative; grid-column: 1 / -1; border-radius: 22px; padding: 16px 20px 14px; margin: 10px 0; border: 1px solid var(--glass-border); background: var(--bg-raise); box-shadow: 0 2px 10px rgba(0,0,0,.05); overflow: hidden; isolation: isolate; transition: box-shadow .3s ease, border-color .3s ease; } .fase-box:hover { border-color: color-mix(in srgb, var(--fase-color, #888) 28%, var(--glass-border)); box-shadow: 0 8px 28px -6px color-mix(in srgb, var(--fase-color, #888) 18%, transparent); } /* Entrada da grelha — apenas na primeira renderização (JS adiciona a classe) */ .grid .fase-box.df-grid-enter { animation: df-enter var(--dur) var(--ease-out) both; animation-delay: calc(var(--box-i, 0) * 40ms); } .fase-box::before { content: ''; position: absolute; top: 0; left: 22px; right: 22px; height: 2px; border-radius: 0 0 4px 4px; background: linear-gradient(90deg, var(--fase-color, var(--amber)), color-mix(in srgb, var(--fase-color, var(--amber)) 28%, transparent) 55%, transparent); opacity: .8; z-index: 0; pointer-events: none; } .fase-box-bg { position: absolute; inset: 0; z-index: -1; background-image: var(--fase-bg, none); background-size: cover; background-position: center; opacity: .9; pointer-events: none; } .fase-box-bg::after { content: ''; position: absolute; inset: 0; background: linear-gradient(90deg, var(--bg-raise) 0%, color-mix(in srgb, var(--bg-raise) 55%, transparent) 30%, transparent 70%, var(--bg-raise) 100%); } .fase-box-head { display: flex; align-items: center; gap: 14px; padding: 2px 2px 4px; } .fase-box-titulos { min-width: 0; flex: 1; } .fase-kicker { display: flex; align-items: center; gap: 8px; font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .24em; text-transform: uppercase; color: var(--fase-color, var(--amber)); margin-bottom: 5px; } .fase-kicker-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fase-color, var(--amber)); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fase-color, #888) 16%, transparent); flex-shrink: 0; } .fase-box-title { font-family: 'Montserrat', sans-serif; font-size: 20px; font-weight: 800; color: var(--ink); letter-spacing: -0.015em; line-height: 1.2; } .fase-box-sub { font-size: 12.5px; color: var(--ink-faint); margin-top: 3px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .fase-box-actions { display: flex; align-items: center; gap: 10px; flex-shrink: 0; margin-left: 14px; } .fase-box-count { font-family: var(--font-mono); font-size: 10px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-faint); background: var(--glass); padding: 4px 10px; border-radius: 999px; border: 1px solid var(--glass-border); white-space: nowrap; } .fase-box-expand { flex-shrink: 0; display: inline-flex; align-items: center; gap: 7px; padding: 8px 14px; border-radius: 10px; border: 1px solid var(--glass-border); background: var(--bg-raise); color: var(--ink-soft); font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; cursor: pointer; transition: all .2s ease; white-space: nowrap; } .fase-box-expand:hover { color: var(--fase-color, var(--amber)); border-color: color-mix(in srgb, var(--fase-color, #888) 40%, transparent); transform: translateY(-1px); } .fase-box-expand .expand-arrow { transition: transform .25s ease; } .fase-box-expand.open .expand-arrow { transform: rotate(180deg); } .fase-box-track { display: flex; align-items: center; gap: 10px; margin-top: 10px; } .fase-box-scroll { flex: 1; min-width: 0; position: relative; display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x proximity; scrollbar-width: none; padding: 6px 2px 6px; } .fase-box-scroll::-webkit-scrollbar { display: none; } .fase-box.marquee .fase-box-scroll { scroll-snap-type: none; } .fase-box-scroll > .card { flex: 0 0 290px; height: 188px; padding: 14px 18px 12px; scroll-snap-align: start; background: var(--card-glass); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .fase-box-scroll > .card .card-title { line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .fase-box-scroll > .card .card-bottom { margin-top: 6px; padding-top: 8px; } .fase-box-scroll > .card .card-check { width: 20px; height: 20px; font-size: 10px; } .fase-box-scroll > .card:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--phase-color, #888) 45%, var(--glass-border)); box-shadow: 0 14px 30px -10px color-mix(in srgb, var(--phase-color, #888) 40%, transparent); } .fase-box.static .fase-box-scroll { display: grid; grid-template-columns: repeat(auto-fit, 290px); overflow: visible; scroll-snap-type: none; } .fase-box.static .fase-box-scroll > .card { flex: none; } .fase-box.static .fase-arrow, .fase-box.static .fase-box-expand { display: none; } .grid.entrada-cards .fase-box-scroll > .card:nth-child(n) { animation-delay: 0s; } .grid.entrada-cards .fase-box-scroll > .card.dup { animation: none; } .fase-arrow { flex-shrink: 0; width: 46px; height: 46px; border-radius: 50%; border: 1px solid var(--glass-border); background: color-mix(in srgb, var(--bg-raise) 82%, transparent); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); color: var(--ink-soft); cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 22px; font-weight: 300; line-height: 1; box-shadow: 0 4px 16px -4px rgba(0,0,0,.14); transition: all .22s ease; opacity: .92; } .fase-arrow:hover { color: var(--fase-color, var(--amber)); border-color: color-mix(in srgb, var(--fase-color, #888) 55%, transparent); box-shadow: 0 8px 20px -6px color-mix(in srgb, var(--fase-color, #888) 45%, transparent); transform: scale(1.08); opacity: 1; } .fase-arrow:active { transform: scale(.95); } .fase-box.expanded .fase-box-scroll { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); overflow: visible; scroll-snap-type: none; max-height: none; } .fase-box.expanded .fase-box-scroll > .card { flex: none; } .fase-box.expanded .fase-arrow { display: none; } .fase-box.expanded { background: color-mix(in srgb, var(--bg-raise) 92%, transparent); } @media (max-width: 768px) { .fase-box { padding: 16px 14px 14px; margin: 12px 0; } .fase-box-scroll > .card { flex: 0 0 82vw; } .fase-box-head { flex-wrap: wrap; } .fase-box-expand { margin-left: 0; } .fase-arrow { width: 34px; height: 34px; font-size: 16px; } } @media (max-width: 768px) { main { padding: 0 16px 40px; } .top { padding: 12px 16px; } .grid { grid-template-columns: 1fr; } .next-card { flex-direction: column; align-items: stretch; text-align: center; } .next-btn { justify-content: center; } .badges-row { gap: 4px; } .badge-item { font-size: 9.5px; padding: 2px 8px 2px 5px; } .hero { padding: 24px 0 12px; } .subtitle { font-size: 14px; } .progress-section { padding: 10px 14px; } .search-input { max-width: 100%; } .reset-btn { bottom: 16px; right: 16px; padding: 6px 14px; font-size: 10px; } .fase-label { font-size: 16px; } .login-container { padding: 28px 20px; } } @media (max-width: 480px) { .brand-text { font-size: 18px; } .brand-text small { font-size: 9px; } .header-progress { font-size: 10px; padding: 2px 10px; } .card { padding: 12px 14px; } .card-title { font-size: 12.5px; } .fase-label { font-size: 14px; } .login-title { font-size: 17px; } .login-brand-name { font-size: 32px; } } .footer { padding: 28px 32px 80px; text-align: center; color: var(--ink-faint); font-family: 'JetBrains Mono', monospace; font-size: 10px; letter-spacing: 0.04em; border-top: 1px solid rgba(0,0,0,0.05); margin-top: 32px; } .review-btn { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; font-family: var(--font-body); font-size: 12px; font-weight: 500; color: var(--ink-soft); background: var(--glass); border: 1px solid var(--glass-border); border-radius: 10px; cursor: pointer; transition: all 0.2s; margin-top: 16px; } .review-btn:hover { border-color: var(--amber); color: var(--amber-bright); background: var(--amber-soft); } .review-btn-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--amber); color: #fff; font-size: 10px; font-weight: 700; } /* ============================================================ REVIEW WIDGET ============================================================ */ #reviewWidget { margin: 28px 0 0; } .review-empty { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--ink-faint); padding: 14px 18px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 10px; } .review-header { display: flex; align-items: center; gap: 8px; font-family: var(--font-display); font-size: 14px; font-weight: 600; color: var(--ink); margin-bottom: 12px; padding: 10px 16px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 10px; } .review-cards { display: grid; gap: 12px; } .review-card { background: var(--bg-raise); border: 1px solid var(--glass-border); border-radius: 10px; padding: 16px 18px; transition: border-color 0.2s; } .review-card:hover { border-color: var(--amber); } .review-card-title { font-family: var(--font-display); font-size: 13px; font-weight: 600; color: var(--amber-bright); ; letter-spacing: -0.01em; } .review-question { font-size: 14px; font-weight: 500; color: var(--ink); margin-bottom: 12px; line-height: 1.5; } .review-options { display: flex; flex-direction: column; gap: 6px; } .review-opt { text-align: left; padding: 8px 12px; font-family: var(--font-body); font-size: 13px; background: var(--glass); border: 1px solid var(--glass-border); border-radius: 8px; color: var(--ink-soft); cursor: pointer; transition: all 0.15s; } .review-opt:hover:not(:disabled) { border-color: var(--amber); color: var(--ink); background: var(--amber-soft); } .review-disabled { cursor: default; } .review-correct { border-color: #22c55e; background: rgba(34,197,94,0.1); color: #22c55e; animation: df-pop .28s var(--ease-out) both; } .review-wrong { border-color: #ef4444; background: rgba(239,68,68,0.1); color: #ef4444; animation: df-pop .28s var(--ease-out) both; } .review-disabled.review-opt:not(.review-correct):not(.review-wrong) { opacity: 0.5; } .review-feedback { margin-top: 10px; padding: 8px 12px; border-radius: 8px; font-size: 13px; font-weight: 500; background: var(--glass); } .review-correct-icon { color: #22c55e; margin-right: 6px; } .review-wrong-icon { color: #ef4444; margin-right: 6px; } .review-reshuffle { margin-top: 10px; background: none; border: none; color: var(--ink-faint); font-family: var(--font-body); font-size: 11px; cursor: pointer; padding: 4px 0; transition: color 0.15s; } .review-reshuffle:hover { color: var(--amber); } /* ============================================================ POMODORO TIMER ============================================================ */ .pomodoro { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; user-select: none; padding: 3px 8px 3px 5px; border-radius: 8px; border: 1px solid var(--glass-border); background: var(--glass); transition: all 0.2s; } .pomodoro:hover { border-color: var(--amber); background: var(--amber-soft); } .pomodoro.running { border-color: var(--amber); } .pomodoro.break { border-color: #22c55e; } .pomodoro.break:hover { background: rgba(34,197,94,0.08); } .pm-ring { width: 16px; height: 16px; flex: none; } .pm-progress { transition: stroke-dashoffset 0.5s linear; } .pomodoro.break .pm-progress { stroke: #22c55e; } .pm-text { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.05; } .pm-time { font-family: 'JetBrains Mono', monospace; font-size: 12px; font-weight: 600; color: var(--ink); letter-spacing: 0.02em; line-height: 1.2; } .pomodoro.break .pm-time { color: #22c55e; } .pm-sub { font-family: var(--font-body); font-size: 8px; font-weight: 500; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; line-height: 1.1; } /* ============================================================ MODO FOCO / ZEN ============================================================ */ html.focus-mode .sidebar, html.focus-mode .progress-track, html.focus-mode .mobile-bar, html.focus-mode footer.final-footer, html.focus-mode footer.footer, html.focus-mode header.top, html.focus-mode .hero-actions, html.focus-mode .hero-bottom, html.focus-mode #nextCard, html.focus-mode #badgesContainer, html.focus-mode .reset-btn, html.focus-mode .search-container, html.focus-mode .badges-section, html.focus-mode .extra, html.focus-mode .theme-toggle, html.focus-mode .theme-toggle-floating, html.focus-mode header .header-progress, html.focus-mode header #logoutBtn { height: 0; overflow: hidden; padding: 0; margin: 0; border: none; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; } /* floating toolbar on UC pages — pomodoro + notas + tema (arrastável) */ .floating-controls { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 300; display: flex; align-items: center; gap: 2px; padding: 3px 4px; background: var(--bg-raise); border: 1px solid var(--glass-border); border-radius: 10px; box-shadow: 0 4px 16px rgba(0,0,0,0.12); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); cursor: grab; touch-action: none; user-select: none; } .floating-controls.dragging { cursor: grabbing; } .floating-controls > * { flex: none; display: inline-flex; align-items: center; justify-content: center; height: 24px; padding: 0 6px; border: none; border-radius: 6px; background: transparent; box-shadow: none; color: var(--ink-soft); opacity: 0.6; transition: opacity 0.2s ease, background 0.2s ease; cursor: pointer; } .floating-controls > *:hover { opacity: 1; background: var(--amber-soft); color: var(--amber-bright); } .floating-controls .pomodoro { gap: 4px; padding: 0 5px 0 3px; opacity: 0.75; } .floating-controls .pomodoro:hover { opacity: 1; } .floating-controls.dragging, .floating-controls.dragging .pomodoro { opacity: 1; } .floating-controls.controls-dragged { border-color: var(--amber); transition: none; } .floating-controls .pm-ring { width: 14px; height: 14px; } .floating-controls .pm-text { line-height: 1; gap: 1px; } .floating-controls .pm-time { font-size: 11px; line-height: 1; } .floating-controls .pm-sub { font-size: 7px; line-height: 1; letter-spacing: 0.04em; } .floating-controls .focus-mode-exit { display: none; position: static; bottom: auto; gap: 3px; font-family: var(--font-body); font-size: 10.5px; font-weight: 500; white-space: nowrap; line-height: 1; text-decoration: none; } .floating-controls .focus-mode-exit .focus-shortcut { display: none; } .floating-controls .theme-toggle { width: auto; height: 24px; padding: 0 5px; position: static; top: auto; right: auto; border: none; border-radius: 6px; background: transparent; box-shadow: none; } .floating-controls .theme-toggle:hover { background: var(--amber-soft); color: var(--amber-bright); border: none; box-shadow: none; } .floating-controls .theme-toggle svg { width: 14px; height: 14px; flex: none; } html.focus-mode .floating-controls { top: 10px; opacity: 1; pointer-events: auto; flex-direction: column; gap: 6px; padding: 6px 8px; left: 50%; transform: translateX(-50%); } html.focus-mode .floating-controls > * { width: 100%; } html.focus-mode .floating-controls .focus-mode-exit { display: inline-flex; justify-content: center; height: 24px; padding: 0 6px; margin-top: 6px; font-size: 10.5px; opacity: 1; border-radius: 6px; background: var(--amber-soft); color: var(--amber-bright); border: none; } html.focus-mode .floating-controls .focus-mode-exit:hover { background: var(--amber-bright); color: #fff; } html.focus-mode .floating-controls .theme-toggle, html.focus-mode .floating-controls .radar-btn { height: auto; min-height: 24px; overflow: visible; padding: 0 5px; margin: 0; border: none; opacity: 1 !important; pointer-events: auto !important; visibility: visible !important; flex: 0 0 auto; position: relative; z-index: 1; } /* collapse homepage hero completely */ html.focus-mode .hero:has(.hero-content) { height: 0; overflow: hidden; padding: 0; margin: 0; border: none; opacity: 0; pointer-events: none; } /* keep UC-page hero compact — title + diagram visible */ html.focus-mode .hero:has(.hero-grid) { padding: 16px 64px 20px; margin: 0; border: none; border-bottom: 1px solid var(--glass-border); background: transparent; min-height: 0; } html.focus-mode .hero:has(.hero-grid)::before, html.focus-mode .hero:has(.hero-grid)::after { display: none; } html.focus-mode .hero:has(.hero-grid) .hero-grid { display: flex; align-items: center; gap: 40px; padding: 0; margin: 0; max-width: 100%; } html.focus-mode .hero:has(.hero-grid) .hero-grid > div:first-child { flex: 1 1 55%; min-width: 0; } html.focus-mode .hero:has(.hero-grid) .eyebrow, html.focus-mode .hero:has(.hero-grid) .hero-sub, html.focus-mode .hero:has(.hero-grid) .hero-badges, html.focus-mode .hero:has(.hero-grid) .hero-stats { display: none; } html.focus-mode .hero:has(.hero-grid) h1 { font-size: 24px; margin: 0; line-height: 1.35; letter-spacing: -0.02em; color: var(--ink); } html.focus-mode .hero:has(.hero-grid) .hw-diagram { flex: 0 0 45%; max-width: 45%; } html.focus-mode .hero:has(.hero-grid) .hw-diagram svg { width: 100%; height: auto; display: block; } html.focus-mode .fase-label, html.focus-mode .pinned-label { opacity: 0; pointer-events: none; } html.focus-mode .layout { grid-template-columns: 1fr; } html.focus-mode .content-inner { max-width: 100%; padding: 0 64px 80px; } html.focus-mode .chapter { max-width: 100%; } .focus-mode-exit { position: fixed; right: 22px; bottom: 72px; z-index: 9999; background: var(--bg-raise); border: 1px solid var(--glass-border); border-radius: 8px; padding: 6px 10px; font-family: var(--font-body); font-size: 11px; font-weight: 500; color: var(--ink-soft); cursor: pointer; display: inline-flex; align-items: center; gap: 4px; backdrop-filter: blur(12px); box-shadow: 0 4px 16px rgba(0,0,0,0.15); transition: opacity 0.3s ease, transform 0.2s ease; opacity: 0.5; pointer-events: auto; white-space: nowrap; line-height: 1; } .focus-mode-exit:hover { opacity: 1; transform: translateY(-2px); border-color: var(--amber); color: var(--amber-bright); } .focus-mode-exit .focus-shortcut { position: absolute; bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size: 10px; background: var(--bg-raise); border: 1px solid var(--glass-border); padding: 4px 8px; border-radius: 6px; color: var(--ink-faint); letter-spacing: 0.03em; white-space: nowrap; opacity: 0; pointer-events: none; transition: opacity 0.2s ease; box-shadow: 0 4px 12px rgba(0,0,0,0.12); } .focus-mode-exit:hover .focus-shortcut { opacity: 1; } html.focus-mode .focus-mode-exit { opacity: 1; } .sidebar .focus-mode-exit { position: static; width: calc(100% - 20px); margin: 10px; justify-content: center; font-family: var(--font-body); font-size: 11px; font-weight: 500; border: 1px solid var(--glass-border); border-radius: 8px; padding: 7px 10px; background: var(--glass); color: var(--ink-soft); cursor: pointer; display: inline-flex; align-items: center; gap: 5px; backdrop-filter: blur(12px); transition: opacity 0.2s, border-color 0.2s, color 0.2s; opacity: 0.6; white-space: nowrap; line-height: 1; text-decoration: none; flex-shrink: 0; } .sidebar .focus-mode-exit:hover { opacity: 1; border-color: var(--amber); color: var(--amber-bright); } .sidebar .focus-mode-exit .focus-shortcut { display: none; } /* ============================================================ SEU RADAR — BOOKMARKS DINÂMICOS ============================================================ */ .radar-btn svg { width: 15px; height: 15px; } .radar-overlay { position: fixed; inset: 0; z-index: 900; background: rgba(0,0,0,0.35); opacity: 0; pointer-events: none; transition: opacity 0.3s ease; } .radar-overlay.open { opacity: 1; pointer-events: auto; } .radar-panel { position: fixed; top: 0; right: -360px; width: 340px; max-width: calc(100vw - 24px); height: 100vh; z-index: 1001; background: var(--bg-raise); border-left: 1px solid var(--glass-border); box-shadow: -6px 0 32px rgba(0,0,0,0.18); transition: right 0.32s cubic-bezier(0.22, 1, 0.36, 1); padding: 24px 20px; overflow-y: auto; display: flex; flex-direction: column; gap: 16px; } .radar-panel.open { right: 0; } .radar-panel::-webkit-scrollbar { width: 4px; } .radar-panel::-webkit-scrollbar-thumb { background: var(--glass-border); border-radius: 4px; } .radar-header { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-bottom: 12px; border-bottom: 1px solid var(--glass-border); } .radar-header h2 { margin: 0; font-family: var(--font-display); font-size: 16px; font-weight: 600; color: var(--ink); letter-spacing: -0.02em; } .radar-close { width: 28px; height: 28px; border: none; border-radius: 6px; background: transparent; color: var(--ink-faint); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; } .radar-close:hover { background: var(--amber-soft); color: var(--amber-bright); } .radar-close svg { width: 16px; height: 16px; } /* save form on UC pages */ /* note form — appears in radar panel on any page */ .radar-note-section { display: flex; flex-direction: column; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--glass-border); } .radar-note-section summary { cursor: pointer; font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); user-select: none; } .radar-note-section summary:hover { color: var(--ink-soft); } .radar-note-section details[open] summary { color: var(--ink-soft); margin-bottom: 4px; } .radar-note-textarea { width: 100%; min-height: 60px; padding: 8px 10px; border: 1px solid var(--glass-border); border-radius: 6px; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 12px; line-height: 1.5; resize: vertical; transition: border-color 0.2s; box-sizing: border-box; } .radar-note-textarea:focus { outline: none; border-color: var(--amber); } .radar-note-textarea::placeholder { color: var(--ink-faint); } .radar-note-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .radar-note-counter { font-size: 10px; color: var(--ink-faint); } .radar-note-btn { padding: 6px 14px; border: none; border-radius: 6px; background: var(--ink-soft); color: #fff; font-family: var(--font-body); font-size: 11px; font-weight: 600; cursor: pointer; transition: background 0.2s; white-space: nowrap; } .radar-note-btn:hover { background: var(--ink); } .radar-note-btn:disabled { opacity: 0.35; cursor: default; } /* note items in the saved list */ .radar-item.is-note .radar-item-title { cursor: default; color: var(--ink); } .radar-item.is-note .radar-item-title:hover { color: var(--ink); } .radar-note-preview { font-size: 11.5px; color: var(--ink-faint); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .radar-save-form { display: flex; flex-direction: column; gap: 12px; } .radar-save-info { font-size: 12px; line-height: 1.4; color: var(--ink-faint); padding: 8px 10px; background: var(--glass); border-radius: 6px; word-break: break-word; } .radar-save-info strong { color: var(--ink); } .radar-tag-group { display: flex; flex-direction: column; gap: 6px; } .radar-tag-label { font-size: 11px; font-weight: 600; color: var(--ink-soft); text-transform: uppercase; letter-spacing: 0.05em; } .radar-tag-option { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 6px; border: 1px solid var(--glass-border); background: transparent; cursor: pointer; transition: background 0.2s, border-color 0.2s; font-size: 12px; color: var(--ink); } .radar-tag-option:hover { background: var(--glass-hover); } .radar-tag-option.selected { border-color: var(--amber); background: var(--amber-soft); } .radar-tag-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; } .radar-tag-dot.urgent { background: var(--danger); } .radar-tag-dot.review { background: var(--amber); } .radar-tag-dot.bug { background: var(--cyan); } .radar-save-btn { padding: 8px 16px; border: none; border-radius: 6px; background: var(--amber); color: #fff; font-family: var(--font-body); font-size: 12px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; } .radar-save-btn:hover { opacity: 0.85; } .radar-save-btn:disabled { opacity: 0.4; cursor: default; } .radar-saved-msg { display: flex; align-items: center; gap: 8px; padding: 12px; border-radius: 6px; background: var(--green-soft); color: var(--green); font-size: 13px; font-weight: 500; } /* saved items list */ .radar-items { display: flex; flex-direction: column; gap: 8px; flex: 1; } .radar-items-title { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-faint); margin: 0; } .radar-item { display: flex; flex-direction: column; gap: 6px; padding: 10px 12px; border-radius: 8px; border: 1px solid var(--glass-border); background: var(--glass); transition: background 0.2s, opacity 0.3s; } .radar-item:hover { background: var(--glass-hover); } .radar-item.done { opacity: 0.35; pointer-events: none; } .radar-item.done .radar-actions { opacity: 1; pointer-events: auto; } .radar-item-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 8px; } .radar-item-title { font-size: 12.5px; font-weight: 500; color: var(--ink); line-height: 1.35; text-decoration: none; flex: 1; min-width: 0; } .radar-item-title:hover { color: var(--amber-bright); } .radar-item-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 10px; font-weight: 600; padding: 2px 8px; border-radius: 12px; white-space: nowrap; flex: none; } .radar-item-tag.urgent { background: var(--danger-soft); color: var(--danger); } .radar-item-tag.review { background: var(--amber-soft); color: var(--amber); } .radar-item-tag.bug { background: var(--cyan-soft); color: var(--cyan); } .radar-item-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; } .radar-item-date { font-size: 10px; color: var(--ink-faint); flex: none; } .radar-actions { display: inline-flex; align-items: center; gap: 2px; flex: none; } .radar-act-btn { width: 22px; height: 22px; border: none; border-radius: 4px; background: transparent; color: var(--ink-faint); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; transition: background 0.2s, color 0.2s; flex: none; } .radar-act-delete:hover { background: var(--danger-soft); color: var(--danger); } .radar-act-restore:hover { background: var(--cyan-soft); color: var(--cyan); } .radar-act-edit:hover { background: var(--amber-soft); color: var(--amber-bright); } .radar-resolve-btn { padding: 3px 10px; border: none; border-radius: 5px; background: var(--glass-border); color: var(--ink-soft); font-family: var(--font-body); font-size: 10.5px; font-weight: 500; cursor: pointer; transition: background 0.2s, color 0.2s; white-space: nowrap; } .radar-resolve-btn:hover { background: var(--green-soft); color: var(--green); } /* inline edit mode for notes */ .radar-edit-textarea { width: 100%; min-height: 72px; padding: 8px 10px; border: 1px solid var(--amber); border-radius: 6px; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 12px; line-height: 1.5; resize: vertical; box-sizing: border-box; } .radar-edit-textarea:focus { outline: none; } .radar-edit-bottom { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; } .radar-edit-actions { display: inline-flex; gap: 4px; flex: none; } .radar-edit-cancel { padding: 4px 10px; border: 1px solid var(--glass-border); border-radius: 5px; background: transparent; color: var(--ink-faint); font-family: var(--font-body); font-size: 11px; font-weight: 500; cursor: pointer; transition: background 0.2s, color 0.2s; } .radar-edit-cancel:hover { background: var(--glass-hover); color: var(--ink-soft); } .radar-edit-save { padding: 4px 12px; border: none; border-radius: 5px; background: var(--amber); color: #fff; font-family: var(--font-body); font-size: 11px; font-weight: 600; cursor: pointer; transition: opacity 0.2s; } .radar-edit-save:hover { opacity: 0.85; } .radar-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; flex: 1; text-align: center; padding: 40px 20px; color: var(--ink-faint); } .radar-empty svg { width: 36px; height: 36px; opacity: 0.3; } .radar-empty p { font-size: 13px; line-height: 1.5; margin: 0; } /* focus mode: radar panel must stay visible */ html.focus-mode .radar-overlay { display: block !important; } html.focus-mode .radar-panel { display: flex !important; } /* ============================================================ NETFLIX STYLE — aplicação das diretrizes ============================================================ */ /* Navbar vidro com estado de scroll */ .top { background: color-mix(in srgb, var(--bg) 82%, transparent); transition: background 0.3s ease, box-shadow 0.3s ease, padding 0.3s ease; } .top.scrolled { background: color-mix(in srgb, var(--bg) 94%, transparent); box-shadow: 0 10px 30px -18px rgba(0,0,0,0.28); padding-top: 12px; padding-bottom: 12px; } /* Hero cinematográfico: luzes da marca + vinheta inferior */ .hero { overflow: hidden; } .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 62% 55% at 14% -12%, color-mix(in srgb, var(--amber) 13%, transparent), transparent 62%), radial-gradient(ellipse 46% 46% at 93% 2%, color-mix(in srgb, var(--cyan) 10%, transparent), transparent 56%); } .hero::after { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; background: linear-gradient(to bottom, transparent 62%, color-mix(in srgb, var(--bg) 40%, transparent) 88%, var(--bg)); } /* ============================================================ CABEÇALHO REDESENHADO ============================================================ */ .brand-text { font-family: 'Montserrat', sans-serif; font-weight: 800; font-size: 32px; letter-spacing: -0.02em; color: var(--ink); } .brand-text-accent { background: var(--brand-grad); -webkit-background-clip: text; background-clip: text; color: transparent; } @media (max-width: 480px) { .brand-text { font-size: 20px; } } .header-actions { display: flex; align-items: center; gap: 12px; padding-right: 24px; } .header-progress { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 12px; color: var(--ink-soft); background: var(--glass); border: 1px solid var(--glass-border); padding: 6px 14px; border-radius: 100px; transition: border-color 0.25s ease, transform 0.25s ease; } .header-progress:hover { border-color: color-mix(in srgb, var(--cyan) 45%, transparent); transform: translateY(-1px); } .header-progress-icon { color: var(--cyan); flex-shrink: 0; } .header-progress #progressoBadge { color: var(--cyan); font-weight: 700; } .logout-btn { display: inline-flex; align-items: center; gap: 7px; font-family: 'Inter', sans-serif; font-size: 12px; font-weight: 600; color: var(--ink-soft); background: var(--glass); border: 1px solid var(--glass-border); padding: 7px 16px; border-radius: 100px; cursor: pointer; transition: all 0.25s cubic-bezier(0.22, 1, 0.36, 1); } .logout-btn:hover { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 50%, transparent); background: color-mix(in srgb, var(--danger) 8%, var(--glass)); transform: translateY(-1px); } .logout-btn:active { transform: scale(0.96); } @media (max-width: 768px) { .header-actions { gap: 8px; padding-right: 0; } .header-progress { font-size: 10px; padding: 5px 10px; } .logout-btn { font-size: 11px; padding: 6px 12px; } } /* Feedback profissional nas setas dos carrosséis */ .fase-arrow { transition: transform 0.18s cubic-bezier(0.22, 1, 0.36, 1), color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .fase-arrow:active { transform: scale(0.92); } .fase-arrow:focus-visible { outline: none; border-color: color-mix(in srgb, var(--fase-color, #888) 70%, transparent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--fase-color, #888) 22%, transparent); } /* ============================================================ PROTEÇÃO DE CONTEÚDO — reforço anti-cópia ============================================================ */ body { -webkit-user-select: none; -moz-user-select: none; user-select: none; -webkit-touch-callout: none; } input, textarea, [contenteditable] { -webkit-user-select: text; -moz-user-select: text; user-select: text; } img, svg { -webkit-user-drag: none; -moz-user-drag: none; } /* DevTools acoplado (docked) — turva o conteúdo como dissuasor visual. NOTA: pointer-events removido de propósito — a deteção por tamanho de janela tem falsos positivos (janela não maximizada, certos SO/zoom), e desativar cliques na página inteira nesses casos parte o site para visitantes legítimos. O desfoque + aviso já dificultam a leitura. */ html.devtools-open body > :not(#protecaoAviso) { filter: blur(8px); user-select: none; } #protecaoAviso { position: fixed; inset: 0; z-index: 99999; display: flex; align-items: center; justify-content: center; padding: 24px; background: rgba(0, 0, 0, 0.72); color: #fff; font-family: 'Inter', system-ui, sans-serif; font-size: 18px; font-weight: 600; text-align: center; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); cursor: not-allowed; /* Propositado: deixa os cliques passarem para o site por baixo. Quem tem mesmo o DevTools aberto já vê tudo pelo próprio DevTools — este aviso nunca impediu isso. Sem este ajuste, um falso positivo (janela não maximizada, zoom, etc.) tapava o site inteiro e ninguém conseguia clicar em nada, incluindo o dono do site. */ pointer-events: none; } .quiz-more { display: block; width: 100%; margin-top: 12px; font-family: var(--font-mono); font-size: 12px; font-weight: 600; color: var(--cyan); background: var(--bg-raise-2); border: 1px dashed var(--glass-border); padding: 9px 14px; border-radius: 8px; cursor: pointer; transition: background .15s, transform .1s, opacity .15s; } .quiz-more:hover:not(:disabled) { background: var(--glass-hover); transform: translateY(-1px); } .quiz-more:disabled { opacity: .5; cursor: default; } /* ============================================================ FORJA — Sistema de design A estação é uma forja: o aluno é o metal, as fases são a linha de forjamento, o progresso é a temperatura. A tensão cromática fogo (âmbar → brasa) contra têmpera (aço azul) codifica estados: frio = inativo, brasa = ativo, dourado = temperado. ============================================================ */ /* ——— Metais da forja ——— */ :root { --soot: #0B0E14; --steel: #131A26; --anvil: #1C2534; --bloom: #FFC96B; --ember: #FF6B3D; --quench: #79D6E4; --font-display: 'Chakra Petch', 'Space Grotesk', sans-serif; --font-brand: 'Chakra Petch', 'Montserrat', sans-serif; } /* ——— A oficina em dia de trabalho (tema claro) ——— */ :root, html[data-theme="light"] { --bg: #E9ECF1; --bg-raise: #FFFFFF; --bg-raise-2: #DEE3EB; --ink: #0F141E; --ink-soft: #465169; --ink-faint: #4E586B; --amber: #8A4D0B; --amber-bright: #6E3C04; --amber-soft: rgba(168,98,26,.12); --cyan: #0F6E80; --cyan-soft: rgba(15,110,128,.11); --green: #1C8A3E; --green-soft: rgba(28,138,62,.12); --danger: #C2442E; --danger-soft: rgba(194,68,46,.11); --brand-grad: linear-gradient(135deg, #FFC96B 0%, #FF8A3D 45%, #E23E2E 100%); --brand-grad-2: linear-gradient(135deg, #FF8A3D, #E23E2E); --glass: rgba(16,28,54,.05); --glass-hover: rgba(16,28,54,.09); --glass-border: rgba(16,28,54,.12); --sidebar-bg: rgba(255,255,255,.78); --card-glass: rgba(255,255,255,.9); } /* ——— A forja ao rubro (tema escuro, padrão) ——— */ html[data-theme="dark"] { --bg: var(--soot); --bg-raise: var(--steel); --bg-raise-2: var(--anvil); --ink: #EDF0F6; --ink-soft: #AAB4C6; --ink-faint: #6E7A90; --amber: var(--bloom); --amber-bright: #FFE3AE; --amber-soft: rgba(255,201,107,.12); --cyan: var(--quench); --cyan-soft: rgba(121,214,228,.12); --green: #4ADE80; --green-soft: rgba(74,222,128,.12); --danger: #F0837A; --danger-soft: rgba(240,131,122,.13); --brand-grad: linear-gradient(135deg, #FFF1D6 0%, #FFC96B 20%, #FF8A3D 48%, #FF6B3D 72%, #E23E2E 100%); --brand-grad-2: linear-gradient(135deg, #FFC96B, #FF6B3D); --glass: rgba(255,255,255,.04); --glass-hover: rgba(255,255,255,.08); --glass-border: rgba(160,180,215,.13); --sidebar-bg: rgba(19,26,38,.8); --card-glass: rgba(19,26,38,.88); } /* ——— Boca da forja: hero da home ——— */ html[data-theme="dark"] .site-content .hero { background: radial-gradient(110% 85% at 50% 0%, #141A28 0%, var(--soot) 58%); } html[data-theme="light"] .site-content .hero { background: radial-gradient(110% 85% at 50% 0%, #F6F8FB 0%, #E9ECF1 58%); } .site-content .hero::before { content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: .35; -webkit-mask-image: none; mask-image: none; background-image: radial-gradient(1.5px 1.5px at 18% 88%, var(--bloom), transparent 60%), radial-gradient(2px 2px at 31% 72%, var(--ember), transparent 60%), radial-gradient(1px 1px at 46% 90%, var(--bloom), transparent 60%), radial-gradient(2px 2px at 62% 74%, var(--ember), transparent 60%), radial-gradient(1.5px 1.5px at 74% 92%, var(--bloom), transparent 60%), radial-gradient(1px 1px at 86% 70%, var(--ember), transparent 60%), radial-gradient(2px 2px at 94% 86%, var(--bloom), transparent 60%); background-repeat: repeat; background-size: 520px 250px; animation: df-forge-sparks 8s linear infinite; } html[data-theme="light"] .site-content .hero::before { opacity: .2; } /* Golpe de martelo — faísca quando o título acaba de se forjar */ .site-content .hero h1.title { position: relative; } .site-content .hero.hot h1.title::after { content: ""; position: absolute; left: 100%; top: 50%; width: 22px; height: 22px; margin: -11px 0 0 4px; border-radius: 50%; background: radial-gradient(circle, #FFF3D6 0%, var(--bloom) 30%, var(--ember) 60%, transparent 78%); pointer-events: none; animation: df-hot-flash .8s cubic-bezier(0.22, 1, 0.36, 1); } .site-content .hero.hot .title { text-shadow: 0 0 26px rgba(255,138,61,.4); transition: text-shadow .2s ease; } @keyframes df-hot-flash { 0% { opacity: 0; transform: scale(.2); } 12% { opacity: .95; } 100% { opacity: 0; transform: scale(6); } } @keyframes df-forge-sparks { from { background-position: 0 0; } to { background-position: 0 -250px; } } /* ——— Aço incandescente: títulos ——— */ .hero h1, h1.title { font-family: var(--font-display); font-size: clamp(24px, 3.2vw, 40px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.12; } .typewriter-text { font-family: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, monospace; font-size: clamp(16px, 2vw, 27px); font-weight: 500; color: #21542B; letter-spacing: 0; padding-bottom: 0; } .typewriter-comment { color: #21542B; font-weight: 600; } .typewriter-cursor { display: inline-block; font-family: 'JetBrains Mono', ui-monospace, monospace; font-weight: 400; font-size: clamp(16px, 2vw, 27px); color: var(--ember); margin-left: 2px; line-height: 1; animation: blinkCursor 0.9s step-end infinite; transform: translateY(1px); } @keyframes blinkCursor { 0%, 100% { opacity: 1; } 50% { opacity: 0; } } /* ——— Selo de fase ——— */ .hero-badge { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-mono); letter-spacing: .14em; background: var(--amber-soft); border: 1px solid color-mix(in srgb, var(--amber) 22%, transparent); padding: 7px 16px 7px 12px; border-radius: 999px; margin-bottom: 22px; backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } /* ——— Contagens de forja ——— */ .stat-pill { font-family: var(--font-mono); background: var(--glass); border-color: var(--glass-border); } .stat-pill strong { font-family: var(--font-display); font-weight: 700; color: var(--amber); margin-right: 3px; } /* ——— Medidor de temperatura: progresso ——— */ .progress-track { height: 8px; background: var(--anvil); border: 1px solid var(--glass-border); box-shadow: inset 0 1px 2px rgba(0,0,0,.4); } .progress-bar-fill { background: linear-gradient(90deg, #5A6B8C 0%, var(--bloom) 45%, var(--ember) 78%, #FFE9C9 100%); box-shadow: 0 0 14px rgba(255,107,61,.4); } /* ——— Billets: as fases na linha de forja ——— */ .fase-box { border-radius: 14px; background: linear-gradient(180deg, var(--steel) 0%, color-mix(in srgb, var(--steel) 90%, #000) 100%); border-color: var(--glass-border); box-shadow: 0 2px 14px rgba(0,0,0,.18); } .fase-box::before { height: 3px; border-radius: 0 0 6px 6px; opacity: .9; box-shadow: 0 0 10px color-mix(in srgb, var(--fase-color, var(--amber)) 55%, transparent); background: linear-gradient(90deg, color-mix(in srgb, var(--fase-color, var(--amber)) 90%, #fff), color-mix(in srgb, var(--fase-color, var(--amber)) 30%, transparent) 70%, transparent); } .fase-kicker { font-weight: 600; letter-spacing: .18em; background: color-mix(in srgb, var(--fase-color, var(--amber)) 9%, transparent); border: 1px solid color-mix(in srgb, var(--fase-color, var(--amber)) 30%, transparent); border-radius: 6px; padding: 3px 9px; } .fase-kicker-dot { box-shadow: 0 0 0 3px color-mix(in srgb, var(--fase-color, #888) 14%, transparent); } .fase-box-title { font-family: var(--font-display); font-weight: 600; letter-spacing: -0.01em; } /* ——— Cards de manual: aço frio, brasa no hover ——— */ .card { border-radius: 12px; border-color: var(--glass-border); background: linear-gradient(180deg, var(--bg-raise), color-mix(in srgb, var(--bg-raise) 96%, #000)); } .card:hover { box-shadow: 0 14px 34px -10px rgba(0,0,0,.35), 0 0 0 1px color-mix(in srgb, var(--ember) 22%, transparent); border-color: color-mix(in srgb, var(--ember) 30%, transparent); } /* ——— Campo de controlo ——— */ .search-input { border-radius: 10px; } .search-input:focus { border-color: var(--amber); box-shadow: 0 0 0 4px color-mix(in srgb, var(--amber) 14%, transparent), 0 4px 18px rgba(0,0,0,.2); } .search-results, .search-loading { border-radius: 10px; } /* ——— Painel de controlo flutuante ——— */ .floating-controls { background: color-mix(in srgb, var(--steel) 88%, transparent); border-color: var(--glass-border); box-shadow: 0 6px 20px rgba(0,0,0,.35); } /* ——— Marca nas UCs (Montserrat, como anterior) ——— */ .sidebar .brand-text, .mobile-bar .brand-text { font-family: 'Montserrat', var(--font-display); } /* ——— Rodapé ——— */ .footer { letter-spacing: .12em; } /* ——— Foco visível ——— */ :focus-visible { outline: 2px solid var(--amber); outline-offset: 2px; } /* ——— Movimento reduzido ——— */ @media (prefers-reduced-motion: reduce) { .site-content .hero::before, .site-content .hero::after { animation: none; } .fase-kicker-dot, .hero-badge-dot, .eyebrow .dot { animation: none; } .typewriter-cursor { animation: none; } .progress-bar-fill::after { animation: none; opacity: 0; } .card:hover::after { animation: none; opacity: 0; } .site-content.active .hero-content > * { animation: none; } .grid.entrada-cards .card { animation: none; } .grid .fase-box.df-grid-enter { animation: none; } }