/* ============================================================ OrganizaGrade — tokens de design compartilhados Paleta: --paper #F3F4F1 fundo --ink #1E2A3A texto principal --muted #5C6B7A texto secundário --trail #3457D5 cor principal (marca) --highlight#F2A93B cor de destaque / CTA --done #1F8A70 sucesso / concluído --alert #D14343 alerta / conflito --line #DCDFD9 bordas Tipografia: Display -> "Fraunces" (serifada, com personalidade, uso comedido) Corpo -> "Inter" (mesma fonte usada dentro do planejador) Dados -> "JetBrains Mono" (códigos de disciplina, rótulos de período) ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,600;1,9..144,500&family=Inter:wght@400;500;600;700;800&family=JetBrains+Mono:wght@500;700&display=swap'); :root{ --paper:#F3F4F1; --paper-2:#EAEBE6; --ink:#1E2A3A; --muted:#5C6B7A; --trail:#3457D5; --trail-dark:#28409E; --highlight:#F2A93B; --done:#1F8A70; --alert:#D14343; --line:#DCDFD9; --shadow:0 14px 34px rgba(30,42,58,.10); --radius:16px; } *{box-sizing:border-box} html{scroll-behavior:smooth} body{ margin:0; background:var(--paper); color:var(--ink); font-family:'Inter',ui-sans-serif,system-ui,sans-serif; -webkit-font-smoothing:antialiased; } h1,h2,h3,.display{ font-family:'Fraunces',serif; font-weight:600; letter-spacing:-.01em; line-height:1.08; margin:0; } .mono{font-family:'JetBrains Mono',ui-monospace,monospace} a{color:inherit} img{max-width:100%;display:block} .wrap{max-width:1080px;margin:0 auto;padding:0 24px} /* ---------- nav ---------- */ .site-nav{ position:sticky;top:0;z-index:40; background:rgba(243,244,241,.88); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); } .site-nav .wrap{display:flex;align-items:center;gap:28px;height:68px} .site-nav .logo{font-family:'Fraunces',serif;font-weight:600;font-size:19px;text-decoration:none;color:var(--ink);white-space:nowrap} .site-nav .logo span{color:var(--trail)} .site-nav .links{display:flex;gap:22px;margin-left:auto;font-size:14px;font-weight:500} .site-nav .links a{text-decoration:none;color:var(--muted);padding:6px 0;border-bottom:2px solid transparent;transition:.15s} .site-nav .links a:hover,.site-nav .links a.active{color:var(--ink);border-color:var(--trail)} .site-nav .cta{ background:var(--ink);color:var(--paper);text-decoration:none; font-size:13px;font-weight:700;padding:10px 16px;border-radius:99px;white-space:nowrap; } .site-nav .cta:hover{background:var(--trail-dark)} .menu-btn{display:none;background:none;border:0;font-size:22px;cursor:pointer;color:var(--ink)} /* ---------- botões ---------- */ .btn{ display:inline-flex;align-items:center;gap:8px; padding:13px 22px;border-radius:99px;font-weight:700;font-size:14.5px; text-decoration:none;cursor:pointer;border:2px solid transparent;transition:.15s; } .btn-primary{background:var(--trail);color:#fff} .btn-primary:hover{background:var(--trail-dark)} .btn-highlight{background:var(--highlight);color:#3A2600} .btn-highlight:hover{filter:brightness(.94)} .btn-outline{background:transparent;border-color:var(--ink);color:var(--ink)} .btn-outline:hover{background:var(--ink);color:var(--paper)} /* ---------- trilha (elemento-assinatura) ---------- Visualiza a ideia central do produto: períodos em sequência até a formatura. Reaproveitado como divisor fino em outras seções. */ .trail{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:0;margin:40px 0} .trail .step{ width:40px;height:40px;border-radius:50%; background:#fff;border:2px solid var(--trail); display:flex;align-items:center;justify-content:center; font-family:'JetBrains Mono',monospace;font-size:12px;font-weight:700;color:var(--trail); flex:0 0 auto; } .trail .step.cap{background:var(--trail);color:#fff;font-size:16px} .trail .rope{width:26px;height:2px;background:var(--trail);opacity:.45;flex:0 0 auto} .trail-divider{display:flex;align-items:center;justify-content:center;gap:6px;margin:8px 0 36px} .trail-divider span{width:6px;height:6px;border-radius:50%;background:var(--trail);opacity:.5} /* ---------- hero ---------- */ .hero{padding:76px 0 30px;text-align:center} .eyebrow{ display:inline-block;font-family:'JetBrains Mono',monospace;font-size:11.5px; letter-spacing:.09em;text-transform:uppercase;color:var(--trail-dark); background:#E7ECFB;padding:6px 12px;border-radius:99px;margin-bottom:18px; } .hero h1{font-size:clamp(32px,5.4vw,54px)} .hero h1 em{font-style:italic;color:var(--trail)} .hero p.lead{max-width:560px;margin:18px auto 0;color:var(--muted);font-size:16.5px;line-height:1.6} .hero .actions{display:flex;gap:12px;justify-content:center;margin-top:28px;flex-wrap:wrap} /* ---------- seções ---------- */ section{padding:56px 0} .section-head{max-width:560px;margin:0 auto 34px;text-align:center} .section-head .eyebrow{margin-bottom:12px} .section-head h2{font-size:clamp(24px,3.4vw,32px)} .section-head p{color:var(--muted);margin-top:10px;font-size:15px} /* ---------- cards de curso ---------- */ .course-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:16px} .course-card{ background:#fff;border:1px solid var(--line);border-radius:var(--radius); padding:26px 22px;text-decoration:none;color:var(--ink); box-shadow:var(--shadow);transition:.18s;display:flex;flex-direction:column;gap:14px; } .course-card:hover{transform:translateY(-3px);border-color:var(--trail)} .course-card .tag{font-family:'JetBrains Mono',monospace;font-size:11px;color:var(--trail-dark);background:#E7ECFB;padding:4px 9px;border-radius:99px;width:fit-content} .course-card h3{font-size:19px} .course-card p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.5} .course-card .go{margin-top:auto;font-weight:700;font-size:13.5px;color:var(--trail)} .course-card.request{border-style:dashed;background:transparent;box-shadow:none;justify-content:center;align-items:flex-start} /* ---------- passos numerados (processo real, ordem importa) ---------- */ .steps{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:26px} .step-item .num{font-family:'JetBrains Mono',monospace;font-weight:700;color:var(--trail);font-size:13px;margin-bottom:10px;display:block} .step-item h3{font-size:17px;margin-bottom:8px} .step-item p{margin:0;color:var(--muted);font-size:14px;line-height:1.55} /* ---------- placeholder de vídeo ---------- */ .video-slot{ max-width:760px;margin:0 auto;aspect-ratio:16/9;border-radius:var(--radius); border:2px dashed var(--line);background:#fff; display:flex;align-items:center;justify-content:center;text-align:center;color:var(--muted); font-size:14px;padding:24px; } /* PARA INSERIR O VÍDEO: troque este bloco .video-slot por um