@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;0,9..40,700;1,9..40,400&family=DM+Serif+Display:ital@0;1&display=swap'); /* ============================================================ TAMANHOS DE FONTE — controlado via data-font-size no ============================================================ */ :root { --base-font: 16px; } [data-font-size="pequeno"] { --base-font: 13px; } [data-font-size="medio"] { --base-font: 16px; } [data-font-size="grande"] { --base-font: 19px; } [data-font-size="extra"] { --base-font: 22px; } html { font-size: var(--base-font, 16px); } /* ============================================================ PALETA — MODO CLARO (Noguchi Orange) PALETA — MODO ESCURO (Luxury Dark #030303 · #2c2c2e · #ffdb89) ============================================================ */ :root { --bg: #eae8e1; --surface: #ffffff; --surface-2: #f5f3ee; --orange: #f49340; --orange-dark: #d97b28; --charcoal: #373735; --peach: #fbdcaf; --text-dark: #373735; --text-muted: #7a7976; --border: #e0ddd6; --sidebar-bg: #373735; --sidebar-text: rgba(255,255,255,0.72); --sidebar-active: rgba(244,147,64,0.22); --sidebar-hover: rgba(255,255,255,0.07); --sidebar-width: 272px; --ham-bg: #373735; --ham-bar: #ffffff; --ham-shadow: rgba(55,55,53,0.22); --settings-bg: #ffffff; --settings-text: #373735; --settings-border:#e0ddd6; } [data-theme="dark"] { --bg: #030303; --surface: #2c2c2e; --surface-2: #1a1a1c; --orange: #ffdb89; --orange-dark: #e5c070; --charcoal: #ffdb89; --peach: #3a3830; --text-dark: #ffdb89; --text-muted: #a0998a; --border: #3a3830; --sidebar-bg: #1a1a1c; --sidebar-text: rgba(255,219,137,0.75); --sidebar-active: rgba(255,219,137,0.15); --sidebar-hover: rgba(255,219,137,0.07); --ham-bg: #2c2c2e; --ham-bar: #ffdb89; --ham-shadow: rgba(0,0,0,0.5); --settings-bg: #2c2c2e; --settings-text: #ffdb89; --settings-border:#3a3830; } /* ── RESET ──────────────────────────────────────────────── */ *, *::before, *::after { margin:0; padding:0; box-sizing:border-box; } html { scroll-behavior:smooth; } body { font-family:'DM Sans',sans-serif; background-color: var(--bg); color: var(--text-dark); min-height:100vh; line-height:1.6; transition: background-color .35s ease, color .35s ease; } body.page-centered { display:flex; justify-content:center; align-items:center; background: linear-gradient(135deg, var(--bg) 0%, var(--peach) 100%); } /* ── TIPOGRAFIA ─────────────────────────────────────────── */ h1,h2,h3,h4,h5 { font-family:'DM Serif Display',serif; color: var(--text-dark); line-height:1.2; } h2 { font-size:2rem; } h3 { font-size:1.4rem; } h4 { font-size:1.1rem; } p { color: var(--text-muted); } /* ============================================================ BOTÃO HAMBURGUER ============================================================ */ .hamburger-btn { position:fixed; top:18px; left:18px; z-index:300; width:44px; height:44px; background: var(--ham-bg); border:none; border-radius:11px; cursor:pointer; display:flex; flex-direction:column; justify-content:center; align-items:center; gap:5px; box-shadow: 0 2px 10px var(--ham-shadow); transition: background .35s ease; padding:0; } .hamburger-btn span { display:block; width:21px; height:2.5px; background: var(--ham-bar); border-radius:2px; transition: transform .35s cubic-bezier(.4,0,.2,1), opacity .25s ease, width .3s ease; transform-origin:center; } .hamburger-btn.active span:nth-child(1) { transform:translateY(7.5px) rotate(45deg); } .hamburger-btn.active span:nth-child(2) { opacity:0; width:0; } .hamburger-btn.active span:nth-child(3) { transform:translateY(-7.5px) rotate(-45deg); } /* ============================================================ BOTÃO CONFIGURAÇÕES ============================================================ */ .settings-btn { position:fixed; top:18px; right:18px; z-index:300; width:44px; height:44px; background: var(--ham-bg); border:none; border-radius:11px; cursor:pointer; display:flex; align-items:center; justify-content:center; box-shadow: 0 2px 10px var(--ham-shadow); transition: background .35s ease, transform .2s ease; } .settings-btn:hover { transform:rotate(30deg) scale(1.05); } .settings-btn svg { width:20px; height:20px; stroke: var(--ham-bar); transition: stroke .35s ease; } /* Painel */ .settings-panel { position:fixed; top:72px; right:18px; z-index:299; width:256px; background: var(--settings-bg); border:1.5px solid var(--settings-border); border-radius:16px; padding:0; box-shadow: 0 8px 30px rgba(0,0,0,.18); opacity:0; pointer-events:none; transform: translateY(-8px) scale(.97); transition: opacity .25s ease, transform .25s ease, background .35s ease, border-color .35s ease; overflow:hidden; } .settings-panel.open { opacity:1; pointer-events:auto; transform: translateY(0) scale(1); } .settings-header { display:flex; justify-content:space-between; align-items:center; padding:14px 16px 12px; border-bottom:1px solid var(--settings-border); font-family:'DM Serif Display',serif; font-size:1rem; font-style:italic; color: var(--settings-text); transition: border-color .35s ease; } .settings-close { background:none; border:none; cursor:pointer; color: var(--text-muted); font-size:14px; padding:2px 6px; border-radius:6px; transition: color .2s ease, background .2s ease; } .settings-close:hover { color: var(--text-dark); background: var(--surface-2); } .settings-item { display:flex; justify-content:space-between; align-items:center; padding:14px 16px; } .settings-item-info { display:flex; align-items:center; gap:10px; font-size:14px; font-weight:500; color: var(--settings-text); } .settings-item-info svg { stroke: var(--orange); flex-shrink:0; } /* Divisor dentro do painel */ .settings-divider { width:100%; height:1px; background: var(--settings-border); margin:0; transition: background .35s ease; } /* Item em coluna (tamanho de fonte) */ .settings-item-col { flex-direction:column !important; align-items:flex-start !important; gap:12px; padding:14px 16px 16px !important; } /* Controle de tamanho de fonte */ .font-size-control { display:flex; align-items:center; gap:10px; width:100%; } .font-size-btn { background: var(--surface-2); border:1.5px solid var(--settings-border); color: var(--settings-text); border-radius:8px; width:40px; height:36px; font-size:13px; font-weight:700; cursor:pointer; transition: background .2s, border-color .2s, color .35s; flex-shrink:0; } .font-size-btn:hover:not(:disabled) { background: var(--orange); color: #fff; border-color: var(--orange); } .font-size-btn:disabled { opacity:.35; cursor:not-allowed; } .font-size-label { flex:1; text-align:center; font-size:14px; font-weight:600; color: var(--settings-text); background: var(--surface-2); border:1.5px solid var(--settings-border); border-radius:8px; padding:6px 0; transition: background .35s, color .35s, border-color .35s; } /* Toggle switch */ .toggle-switch { position:relative; display:inline-block; cursor:pointer; } .toggle-switch input { display:none; } .toggle-track { display:block; width:44px; height:24px; background: var(--border); border-radius:12px; transition: background .3s ease; position:relative; } .toggle-thumb { position:absolute; top:3px; left:3px; width:18px; height:18px; background:#fff; border-radius:50%; box-shadow:0 1px 4px rgba(0,0,0,.2); transition: left .3s cubic-bezier(.4,0,.2,1); } .toggle-switch input:checked + .toggle-track { background: var(--orange); } .toggle-switch input:checked + .toggle-track .toggle-thumb { left:23px; } /* ============================================================ OVERLAY ============================================================ */ .overlay { position:fixed; inset:0; background:rgba(0,0,0,.46); opacity:0; pointer-events:none; transition:opacity .35s ease; z-index:150; } .overlay.visible { opacity:1; pointer-events:auto; } /* ============================================================ SIDEBAR ============================================================ */ /* Container do cabeçalho da sidebar, centralizando o logo */ .sidebar-header { display: flex; justify-content: center; align-items: center; padding: 20px 10px 10px; } .nav-img { max-width: 160px; height: auto; } /* 🟡 Modo claro (default) */ .nav-img-dark { display: none; } /* 🌙 Modo escuro */ [data-theme="dark"] .nav-img-light { display: none; } [data-theme="dark"] .nav-img-dark { display: block; } .sidebar { position:fixed; top:0; left:0; width: var(--sidebar-width); height:100vh; background: var(--sidebar-bg); z-index:200; display:flex; flex-direction:column; padding:16px 14px 24px; transform:translateX(-100%); transition: transform .38s cubic-bezier(.4,0,.2,1), background .35s ease; box-shadow:4px 0 32px rgba(0,0,0,.28); } .sidebar.open { transform:translateX(0); } .nav-linha { width:100%; height:1px; background:rgba(255,255,255,0.1); margin:12px 0; transition:background .35s; } [data-theme="dark"] .nav-linha { background:rgba(255,219,137,0.15); } .nav-link { display:flex; align-items:center; gap:13px; padding:11px 12px; border-radius:10px; text-decoration:none; color: var(--sidebar-text); font-size:15px; font-weight:500; margin-bottom:2px; transition:background .2s ease, color .2s ease; } .nav-link:hover, .nav-link.active { background: var(--sidebar-hover); color:#fff; } [data-theme="dark"] .nav-link:hover, [data-theme="dark"] .nav-link.active { color: var(--orange); } .nav-icon { width:34px; height:34px; flex-shrink:0; object-fit:contain; filter:brightness(0) invert(0.65); transition:filter .2s ease; } .nav-link:hover .nav-icon, .nav-link.active .nav-icon { filter:brightness(0) invert(1); } [data-theme="dark"] .nav-link:hover .nav-icon, [data-theme="dark"] .nav-link.active .nav-icon { filter:brightness(0) saturate(100%) invert(85%) sepia(30%) saturate(600%) hue-rotate(5deg); } .nav-spacer { flex:0.7; } .nav-logout { color:rgba(255,255,255,0.4); margin-top:8px; } .nav-logout:hover { background:rgba(255,80,80,0.12) !important; color:#ff7070 !important; } .nav-logout:hover .nav-icon { filter:brightness(0) saturate(100%) invert(50%) sepia(80%) saturate(400%) hue-rotate(310deg) !important; } .hamburger-btn.hidden { opacity: 0 !important; pointer-events: none !important; transform: scale(0.7); } /* ============================================================ LAYOUT PRINCIPAL ============================================================ */ .container-home { margin:0 40px; padding:76px 0 40px; min-height:100vh; } /* ============================================================ HOME — CABEÇALHO COM TUTORIAL ============================================================ */ .home-header-row { display:flex; align-items:center; justify-content:center; gap:18px; flex-wrap:wrap; margin-bottom:4px; } .translate-home { font-family:'DM Serif Display',serif; font-size:3.4rem; font-weight:400; font-style:italic; color: var(--text-dark); text-align:center; letter-spacing:.01em; line-height:1.1; display:inline-block; } .translate-home::after { content:''; display:block; width:56px; height:4px; background: var(--orange); border-radius:2px; margin:10px auto 0; } /* Botão tutorial */ .btn-tutorial { display:inline-flex; align-items:center; gap:7px; background: var(--orange); color: var(--bg); border:none; padding:9px 16px; border-radius:10px; font-family:'DM Sans',sans-serif; font-size:14px; font-weight:600; cursor:pointer; white-space:nowrap; flex-shrink:0; transition: background .2s, transform .15s, box-shadow .2s; } .btn-tutorial svg { width:18px; height:18px; stroke: var(--bg); flex-shrink:0; transition: stroke .35s; } .btn-tutorial:hover { background: var(--orange-dark); transform:translateY(-1px); box-shadow:0 4px 14px rgba(244,147,64,.28); } /* ============================================================ MODAL DE VÍDEO TUTORIAL ============================================================ */ .tutorial-overlay { position:fixed; inset:0; background:rgba(0,0,0,.72); z-index:500; display:flex; align-items:center; justify-content:center; opacity:0; pointer-events:none; transition:opacity .3s ease; } .tutorial-overlay.open { opacity:1; pointer-events:auto; } .tutorial-modal { background: var(--surface); border-radius:20px; width:90%; max-width:760px; box-shadow:0 24px 60px rgba(0,0,0,.4); overflow:hidden; transform:scale(.95) translateY(12px); transition: transform .3s ease, background .35s; } .tutorial-overlay.open .tutorial-modal { transform:scale(1) translateY(0); } .tutorial-modal-header { display:flex; justify-content:space-between; align-items:center; padding:16px 20px; background: var(--sidebar-bg); border-bottom:3px solid var(--orange); font-family:'DM Serif Display',serif; font-style:italic; font-size:1.1rem; color:#fff; transition: background .35s; } [data-theme="dark"] .tutorial-modal-header { background:#1a1a1c; } .tutorial-close { background:none; border:none; cursor:pointer; color:rgba(255,255,255,.7); font-size:16px; padding:4px 8px; border-radius:6px; transition:color .2s, background .2s; } .tutorial-close:hover { color:#fff; background:rgba(255,255,255,.1); } .tutorial-video-wrap { position: relative; width: 100%; aspect-ratio: 16 / 9; background: #000; display: flex; align-items: center; justify-content: center; overflow: hidden; } .tutorial-video-wrap iframe { width: 100%; height: 100%; border: none; } .tutorial-caption { text-align:center; padding:14px 20px; font-size:14px; color: var(--text-muted); } /* ============================================================ HOME — TRADUÇÃO ============================================================ */ .seta { width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent; border-top:14px solid var(--orange); margin:26px auto 0; animation:bounce 1.8s infinite ease-in-out; } @keyframes bounce { 0%,100%{transform:translateY(0);} 50%{transform:translateY(-8px);} } .comunicacao { color: var(--orange); text-align:center; margin-top:10px; margin-bottom:44px; font-weight:600; font-size:.82rem; letter-spacing:.1em; text-transform:uppercase; } .digite-expressao { text-align:center; color: var(--text-muted); margin-bottom:16px; font-size:.95rem; } .input-group { display:flex; justify-content:center; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:24px; } .input-home { flex:0 1 380px; padding:13px 18px; border:2px solid var(--border); border-radius:12px; background: var(--surface); font-family:'DM Sans',sans-serif; font-size:15px; color: var(--text-dark); outline:none; transition:border-color .2s, box-shadow .2s, flex .3s, background .35s, color .35s; } .input-home::placeholder { color: var(--text-muted); } .input-home:focus { flex:0 1 460px; border-color: var(--orange); box-shadow:0 0 0 3px rgba(244,147,64,.18); } /* Div resultado – oculta enquanto vazia */ .resultado { color: var(--text-dark); background: var(--surface); border:1.5px solid var(--border); width:100%; max-width:500px; padding:0; margin:0 auto; text-align:center; border-radius:14px; word-wrap:break-word; font-size:14px; box-shadow:0 2px 10px rgba(55,55,53,.07); transition:background .35s, border-color .35s, color .35s, padding .2s, margin .2s; overflow:hidden; max-height:0; border-width:0; } .resultado:not(:empty) { padding:18px 22px; margin:0 auto 20px; max-height:400px; border-width:1.5px; } .btn-home { background: var(--orange); color: var(--bg); border:none; padding:13px 22px; border-radius:12px; font-family:'DM Sans',sans-serif; font-size:15px; font-weight:700; cursor:pointer; transition:background .2s, transform .15s, box-shadow .2s; display:flex; align-items:center; justify-content:center; gap:6px; } .btn-home:hover { background: var(--orange-dark); box-shadow:0 4px 16px rgba(244,147,64,.3); transform:translateY(-1px); } .btn-home:active { transform:translateY(0); } .video-container { display:flex; justify-content:center; margin-top:20px; } video { width:340px; height:255px; border:2.5px solid var(--peach); border-radius:14px; background: var(--charcoal); transition:border-color .35s; } /* Cards */ .buttons-cards { display:flex; justify-content:center; align-items:stretch; gap:22px; flex-wrap:wrap; margin-top:36px; } .card-traduzir, .card-aprender, .card-incluir { background: var(--surface); color: var(--text-dark); border:2px solid var(--border); padding:28px 20px; border-radius:16px; font-family:'DM Sans',sans-serif; font-size:15px; font-weight:600; text-align:center; cursor:pointer; text-decoration:none; display:block; width:200px; transition:transform .25s, box-shadow .25s, border-color .25s, background .35s; box-shadow:0 2px 8px rgba(55,55,53,.06); } .card-traduzir:hover, .card-aprender:hover, .card-incluir:hover { transform:translateY(-6px) scale(1.02); box-shadow:0 12px 28px rgba(244,147,64,.2); border-color: var(--orange); } .title-card { font-family:'DM Serif Display',serif; color: var(--orange); margin-top:14px; margin-bottom:8px; font-size:1.15rem; font-style:italic; } .icon-traduzir, .icon-aprender, .icon-incluir { font-size:28px; } .descricao-card { font-size:13px; color: var(--text-muted); font-weight:400; margin-top:6px; line-height:1.5; } /* ============================================================ CHAT ============================================================ */ #chatWrapper { background: var(--surface); width:95%; max-width:820px; margin:24px auto; padding:24px; border-radius:20px; box-shadow:0 8px 32px rgba(55,55,53,.1); flex-direction:column; height:78vh; max-height:78vh; overflow:hidden; border:1.5px solid var(--border); transition:background .35s, border-color .35s; } .chat-container { flex-grow:1; overflow-y:auto; padding:14px; margin-bottom:16px; border-radius:14px; background: var(--bg); border:1.5px solid var(--border); max-height:calc(100% - 70px); display:flex; flex-direction:column; gap:14px; height:90%; scroll-behavior:smooth; transition:background .35s; } .chat-container::-webkit-scrollbar { width:5px; } .chat-container::-webkit-scrollbar-thumb { background: var(--peach); border-radius:10px; } .chat-input-container { display:flex; gap:10px; align-items:center; width:100%; } .chat-bubble { padding:13px 16px; border-radius:16px; max-width:75%; word-wrap:break-word; opacity:0; animation:fadeIn .3s ease forwards; font-size:14.5px; line-height:1.55; } @keyframes fadeIn { from{opacity:0;transform:translateY(8px);} to{opacity:1;transform:translateY(0);} } .chat-bubble.bot { align-self:flex-start; background: var(--surface); border:1.5px solid var(--border); border-radius:4px 16px 16px 16px; color: var(--text-dark); } .chat-bubble.user { align-self:flex-end; background: var(--orange); color: var(--bg); font-weight:500; border-radius:16px 4px 16px 16px; } .feedback-inline { display:flex; gap:8px; margin-top:10px; align-items:center; } .feedback-inline span { font-size:13px; color: var(--text-muted); } .feedback-inline button { background:none !important; border:none !important; cursor:pointer; font-size:22px; padding:0; width:38px; height:38px; border-radius:50%; transition:transform .2s; } .feedback-inline button:hover { transform:translateY(-2px) scale(1.15); } /* ============================================================ LOGIN / REGISTER ============================================================ */ .container { background: var(--surface); padding:0 0 40px; border-radius:24px; box-shadow:0 20px 60px rgba(55,55,53,.14); width:90%; max-width:460px; margin:auto; overflow:hidden; border:1px solid var(--border); transition:background .35s, border-color .35s; } .header { width:100%; text-align:center; padding:28px 0 20px; background:linear-gradient(135deg,#373735 0%,#4a4a47 100%); border-radius:24px 24px 0 0; border-bottom:3px solid var(--orange); transition:background .35s; } [data-theme="dark"] .header { background:linear-gradient(135deg,#1a1a1c 0%,#2c2c2e 100%); } header { font-family:'DM Serif Display',serif; font-size:26px; font-style:italic; color:#fff; font-weight:400; } .boas-vindas { font-family:'DM Serif Display',serif; font-size:26px; font-style:italic; color: var(--text-dark); margin-bottom:20px; text-align:center; } .entrar { font-family:'DM Serif Display',serif; font-size:24px; font-weight:400; font-style:italic; text-align:left; margin:20px 20px 10px; color: var(--text-dark); } .logo-boasvindas, .logo-boasvindas-login { display:flex; justify-content:flex-start; align-items:center; margin:28px 20px 20px; } .logo-boasvindas img, .logo-boasvindas-login img { width:120px; } .content { padding:20px 30px; } p.lead { color: var(--text-muted); margin-bottom:20px; } .form-group { margin-bottom:20px; text-align:center; } label.diminutivo { font-size:12px; font-weight:600; display:block; margin-bottom:6px; color: var(--text-dark); text-align:left; width:90%; margin-left:auto; margin-right:auto; letter-spacing:.06em; text-transform:uppercase; } .form-control { width:90%; padding:13px 15px; border:2px solid var(--border); border-radius:10px; font-family:'DM Sans',sans-serif; font-size:15px; color: var(--text-dark); background: var(--bg); margin-bottom:10px; margin-left:auto; margin-right:auto; display:block; outline:none; transition:border-color .2s, box-shadow .2s, background .35s, color .35s; } .form-control:focus { border-color: var(--orange); background: var(--surface); box-shadow:0 0 0 3px rgba(244,147,64,.15); } .remember-forgot { display:flex; justify-content:space-between; align-items:center; margin-bottom:20px; padding:0 5%; } .remember { display:flex; align-items:center; gap:6px; font-size:14px; color: var(--text-muted); } .remember input { accent-color: var(--orange); } .forgot { color: var(--text-muted); text-decoration:none; font-size:14px; background:none; transition:color .2s; } .forgot:hover { color: var(--orange); text-decoration:underline; } .btn-criar-conta, .botaoacessar { background: var(--orange); color: var(--bg); border:none; padding:13px 24px; border-radius:10px; font-family:'DM Sans',sans-serif; font-size:15px; font-weight:700; cursor:pointer; margin:16px auto 10px; display:block; transition:background .2s, box-shadow .2s, transform .15s; } .btn-criar-conta { width:60%; } .botaoacessar { width:48%; } .btn-criar-conta:hover, .botaoacessar:hover { background: var(--orange-dark); box-shadow:0 6px 18px rgba(244,147,64,.25); transform:translateY(-1px); } .tem-conta { text-align:center; margin:16px; color: var(--text-muted); font-size:14px; } a.linkp-register, .switch-form a { background:transparent; color: var(--orange); display:block; text-align:center; margin:0 auto; width:fit-content; text-decoration:none; padding:4px 0; font-weight:600; border-bottom:2px solid transparent; border-radius:0; transition:border-color .2s, color .2s; } a.linkp-register:hover, .switch-form a:hover { border-bottom-color: var(--orange); color: var(--orange-dark); background:transparent; transform:none; } .sobre-container a, .github-list a { background:transparent; color: var(--orange); display:inline; text-decoration:underline; text-underline-offset:3px; } .sobre-container a:hover, .github-list a:hover { color: var(--orange-dark); } .linha { width:100%; height:1.5px; background: var(--border); margin:20px 0; transition:background .35s; } .switch-form { margin-top:20px; text-align:center; } .link-button { background:none; border:none; color: var(--orange); cursor:pointer; font-weight:700; padding:0; text-decoration:underline; font-family:'DM Sans',sans-serif; font-size:14px; } .link-button:hover { color: var(--orange-dark); } form { padding:5px; transition:transform .3s; } form:hover { transform:scale(1.005); } .text-center { text-align:center; } /* ============================================================ PÁGINA SOBRE ============================================================ */ .sobre-container { max-width:72vw; min-height:75vh; margin:80px 36px 36px 36px; background: var(--surface); padding:36px 40px; border-radius:20px; box-shadow:0 6px 24px rgba(55,55,53,.09); border:1.5px solid var(--border); transition:background .35s, border-color .35s; } .sobre-title { font-family:'DM Serif Display',serif; font-size:2.2rem; font-style:italic; text-align:center; color: var(--text-dark); margin-bottom:24px; border-bottom:3px solid var(--orange); padding-bottom:14px; } .sobre-scroll-area { max-height:60vh; overflow-y:auto; padding-right:10px; } .sobre-scroll-area::-webkit-scrollbar { width:5px; } .sobre-scroll-area::-webkit-scrollbar-thumb { background: var(--peach); border-radius:10px; } .sobre-text { font-size:17px; line-height:1.75; color: var(--text-dark); margin-bottom:16px; } .dev-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(155px,1fr)); gap:18px; margin-top:28px; padding:0 4px; } .dev-card { background: var(--surface-2); border:1.5px solid var(--border); border-radius:14px; padding:18px 12px; text-align:center; box-shadow:0 2px 8px rgba(55,55,53,.06); transition:transform .2s, border-color .2s, background .35s; } .dev-card:hover { transform:translateY(-3px); border-color: var(--orange); } .dev-card img { width:62px; height:62px; border-radius:50%; margin-bottom:10px; object-fit:cover; border:2px solid var(--peach); } .dev-card h4 { font-size:14px; margin:0 0 8px; color: var(--text-dark); font-family:'DM Serif Display',serif; font-style:italic; } .dev-links a { font-size:13px; color: var(--orange); text-decoration:none; border-bottom:1px solid transparent; transition:border-color .2s; } .dev-links a:hover { border-bottom-color: var(--orange); } /* ============================================================ PÁGINA CURSOS ============================================================ */ .page-container { display:flex; justify-content:center; padding:80px 36px 36px 36px; min-height:85vh; align-items:flex-start; width:100%; } .content-card { width:100%; min-height:810px; max-width:1400px; background: var(--surface); border-radius:20px; box-shadow:0 6px 24px rgba(55,55,53,.09); padding:40px; border:1.5px solid var(--border); transition:background .35s, border-color .35s; } .content-card .header { display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:16px; margin-bottom:28px; padding:0; background:none; border:none; border-radius:0; width:100%; } .content-card .header h1 { min-width:0; font-family:'DM Serif Display',serif; font-style:italic; font-size:2rem; color: var(--text-dark); border-bottom:none; padding:0; } .search-bar { padding:10px 15px; border:2px solid var(--border); border-radius:10px; font-size:15px; width:100%; max-width:320px; flex:1 1 240px; min-width:0; background: var(--bg); color: var(--text-dark); outline:none; transition:border-color .2s, background .35s, color .35s; } .search-bar:focus { border-color: var(--orange); } .section-title { font-family:'DM Serif Display',serif; font-style:italic; font-size:1.3rem; color: var(--text-dark); margin:32px 0 16px; border-bottom:2px solid var(--orange); padding-bottom:8px; transition:color .35s; } /* Accordion */ .toggle-section { width:100%; margin-bottom:16px; border:1.5px solid var(--border); border-radius:12px; transition:border-color .35s; } .toggle-section.open { border-color: var(--orange); } .section-header { cursor:pointer; user-select:none; display:flex; align-items:center; justify-content:space-between; padding:14px 18px; margin-bottom:0; background: var(--surface-2); border-radius:10px; border:none; font-family:'DM Serif Display',serif; font-style:italic; font-size:1.1rem; color: var(--text-dark); transition:background .2s, color .35s; width:100%; } .section-header::after { content:'\203A'; font-size:22px; font-style:normal; display:inline-block; transform:rotate(90deg); transition:transform .3s ease; flex-shrink:0; margin-left:10px; line-height:1; } .section-header:hover { background: var(--peach); } .toggle-section.open .section-header { border-radius:10px 10px 0 0; background: var(--peach); } .toggle-section.open .section-header::after { transform:rotate(270deg); } .section-content { display:none; padding:16px 16px 20px; background: var(--surface); border-top:1px solid var(--border); border-radius:0 0 10px 10px; transition:background .35s; } .toggle-section.open .section-content { display:block; } .scrollable-content { padding-right:0; overflow-y:visible; } .scrollable-content::-webkit-scrollbar { width:5px; } .scrollable-content::-webkit-scrollbar-thumb { background: var(--peach); border-radius:10px; } .topics-container { padding:0; display:flex; flex-direction:column; gap:14px; } /* garante que display:none tem prioridade quando fechado */ .section-content { display:none !important; } .toggle-section.open .section-content { display:flex !important; } .section-content.topics-container { padding:16px 16px 20px; gap:14px; } .topic { background: var(--surface-2); padding:22px; border-radius:12px; border:1.5px solid var(--border); box-shadow:0 2px 8px rgba(55,55,53,.05); transition:background .35s, border-color .35s; } .topic:hover { border-color: var(--orange); } .topic h3 { font-family:'DM Serif Display',serif; font-style:italic; margin-bottom:8px; color: var(--text-dark); font-size:1.15rem; } .topic p { color: var(--text-muted); font-size:15px; margin-bottom:14px; } .btn-topic { display:inline-block; padding:9px 18px; background: var(--orange); color: var(--bg); border-radius:8px; text-decoration:none; font-weight:600; font-size:14px; transition:background .2s, transform .15s; } .btn-topic:hover { background: var(--orange-dark); transform:translateY(-1px); } /* ============================================================ PÁGINA AJUDA (FAQ) ============================================================ */ .faq-container { width:90%; max-width:760px; margin:80px auto 40px; background: var(--surface); border-radius:18px; padding:32px; box-shadow:0 6px 24px rgba(55,55,53,.09); border:1.5px solid var(--border); transition:background .35s, border-color .35s; } .faq-title { font-family:'DM Serif Display',serif; font-style:italic; text-align:center; font-size:2.2rem; color: var(--text-dark); margin-bottom:24px; border-bottom:3px solid var(--orange); padding-bottom:14px; } .accordion { background: var(--surface-2); color: var(--text-dark); cursor:pointer; padding:16px 18px; width:100%; border:1.5px solid var(--border); text-align:left; outline:none; font-size:16px; font-family:'DM Sans',sans-serif; font-weight:500; margin-bottom:10px; border-radius:10px; transition:background .2s, border-color .2s, color .35s; display:flex; justify-content:space-between; align-items:center; } .accordion::after { content:'›'; font-size:20px; transform:rotate(90deg); transition:transform .3s; } .accordion.active::after { transform:rotate(270deg); } .accordion:hover, .accordion.active { background: var(--peach); border-color: var(--orange); } .panel { padding:0 18px; background: var(--surface); display:none; overflow:hidden; border-radius:10px; margin-bottom:10px; border:1.5px solid var(--border); transition:background .35s; } .panel p { padding:14px 0; color: var(--text-muted); font-size:15px; line-height:1.65; } .faq-image { text-align:center; margin-top:28px; } .faq-image img { width:160px; max-width:100%; height:auto; opacity:.7; } /* ============================================================ PÁGINA SUGESTÕES ============================================================ */ .sugestoes-container { max-width:760px; margin:80px auto 40px; background: var(--surface); padding:32px; border-radius:18px; box-shadow:0 6px 24px rgba(55,55,53,.09); border:1.5px solid var(--border); transition:background .35s, border-color .35s; } .sugestoes-title { font-family:'DM Serif Display',serif; font-style:italic; font-size:2.2rem; text-align:center; color: var(--text-dark); margin-bottom:24px; border-bottom:3px solid var(--orange); padding-bottom:14px; } .scroll-area { max-height:400px; overflow-y:auto; padding-right:10px; } .scroll-area::-webkit-scrollbar { width:5px; } .scroll-area::-webkit-scrollbar-thumb { background: var(--peach); border-radius:10px; } .sugestoes-list { list-style:decimal inside; font-size:17px; color: var(--text-dark); line-height:1.9; padding-left:8px; } .sugestoes-list li { margin-bottom:10px; transition:color .35s; } .sugestoes-image { text-align:center; margin-top:28px; } .sugestoes-image img { width:180px; opacity:.7; } /* ============================================================ PÁGINA GLOSSÁRIO ============================================================ */ .glossario-container { max-width: 860px; margin: 80px auto 48px; padding: 0 24px; } .glossario-title { font-family: 'DM Serif Display', serif; font-style: italic; font-size: 2.2rem; text-align: center; color: var(--text-dark); margin-bottom: 8px; border-bottom: 3px solid var(--orange); padding-bottom: 14px; } .glossario-subtitle { text-align: center; font-size: 15px; color: var(--text-muted); margin-bottom: 32px; } /* container dos acordeões do glossário */ #glossario-container { display: flex; flex-direction: column; gap: 0; } /* pills de palavra */ .glossario-grupo { display: none; flex-wrap: wrap; gap: 10px; padding: 16px 18px 20px; background: var(--surface); border-top: 1px solid var(--border); border-radius: 0 0 10px 10px; } .toggle-section.open .glossario-grupo { display: flex; } .glossario-tag { display: inline-block; padding: 7px 14px; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 20px; text-decoration: none; color: var(--text-dark); font-size: 14px; font-weight: 500; transition: background .2s ease, border-color .2s ease, color .2s ease, transform .15s ease; } .glossario-tag:hover { background: var(--orange); border-color: var(--orange); color: var(--bg); transform: translateY(-2px); } @media (max-width: 600px) { .glossario-container { padding: 0 12px; margin-top: 72px; } .glossario-title { font-size: 1.8rem; } .glossario-tag { font-size: 13px; padding: 6px 12px; } } /* ============================================================ RESPONSIVIDADE ============================================================ */ @media (max-width:900px) { .container-home { margin:0 20px; padding-top:72px; } .sobre-container { max-width:95vw; margin:72px 16px 16px; } .page-container { padding:72px 16px 16px; } .faq-container, .sugestoes-container { margin:72px 16px 16px; width:auto; } .translate-home { font-size:2.6rem; } } @media (max-width:600px) { .container-home { margin:0 12px; padding-top:68px; } .translate-home { font-size:2rem; } .home-header-row { gap:12px; } .btn-tutorial { font-size:13px; padding:8px 12px; } .buttons-cards { gap:14px; } .card-traduzir,.card-aprender,.card-incluir { width:44vw; min-width:130px; padding:18px 10px; } .input-home { flex:0 1 200px; } #chatWrapper { width:98%; height:82vh; padding:12px; } .sobre-container { margin:68px 10px 10px; padding:20px 16px; } .page-container { padding:68px 10px 10px; } .faq-container, .sugestoes-container { margin:68px 10px 10px; padding:22px 16px; width:auto; } .content-card { padding:24px 16px; } .content-card .header { flex-direction:column; align-items:stretch; gap:10px; } .search-bar { max-width:100%; width:100%; flex:none; } .hamburger-btn,.settings-btn { top:14px; } .hamburger-btn { left:14px; } .settings-btn { right:14px; } .settings-panel { right:14px; top:68px; width:220px; } .dev-grid { grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); } .tutorial-modal { width:96%; border-radius:14px; } } @media (max-width:400px) { .card-traduzir,.card-aprender,.card-incluir { width:85vw; } .buttons-cards { flex-direction:column; align-items:center; } .container { width:100%; border-radius:0; } .btn-criar-conta,.botaoacessar { width:80%; } video { width:280px; height:210px; } .translate-home { font-size:1.8rem; } } /* ============================================================ PÁGINA GLOSSÁRIO ============================================================ */ .glossario-container { max-width: 860px; margin: 80px auto 48px; padding: 36px 40px; background: var(--surface); border-radius: 20px; border: 1.5px solid var(--border); box-shadow: 0 6px 24px rgba(55,55,53,.09); transition: background .35s, border-color .35s; } .glossario-page-title { font-family: 'DM Serif Display', serif; font-style: italic; font-size: 2.2rem; text-align: center; color: var(--text-dark); margin-bottom: 28px; padding-bottom: 14px; border-bottom: 3px solid var(--orange); transition: color .35s; } /* Cabeçalho de categoria */ .glossario-categoria-titulo { display: flex; align-items: center; gap: 10px; margin-top: 32px; margin-bottom: 14px; font-family: 'DM Serif Display', serif; font-style: italic; font-size: 1.4rem; font-weight: 400; color: var(--text-dark); cursor: pointer; user-select: none; padding: 10px 14px; border-radius: 10px; background: var(--surface-2); border: 1.5px solid var(--border); transition: background .2s, border-color .2s, color .35s; } .glossario-categoria-titulo:hover { background: var(--peach); border-color: var(--orange); } .glossario-categoria-titulo.aberto { background: var(--peach); border-color: var(--orange); border-radius: 10px 10px 0 0; margin-bottom: 0; border-bottom: none; } /* Seta */ .glossario-seta { display: inline-block; font-style: normal; font-size: 18px; transition: transform .3s ease; color: var(--orange); flex-shrink: 0; } .glossario-categoria-titulo.aberto .glossario-seta { transform: rotate(90deg); } /* Grupo de tags */ .glossario-grupo { display: flex; flex-wrap: wrap; gap: 8px; padding: 14px; background: var(--surface); border: 1.5px solid var(--orange); border-top: none; border-radius: 0 0 10px 10px; transition: background .35s; } .glossario-grupo.fechado { display: none; } /* Tag / link individual */ .glossario-tag { padding: 7px 14px; background: var(--surface-2); border: 1.5px solid var(--border); border-radius: 20px; text-decoration: none; color: var(--text-dark); font-size: 14px; font-weight: 500; font-family: 'DM Sans', sans-serif; transition: background .2s, border-color .2s, color .2s, transform .15s; } .glossario-tag:hover { background: var(--orange); border-color: var(--orange); color: var(--bg); transform: translateY(-2px); } /* Responsivo */ @media (max-width: 600px) { .glossario-container { margin: 68px 12px 24px; padding: 22px 16px; } .glossario-page-title { font-size: 1.8rem; } .glossario-categoria-titulo { font-size: 1.1rem; } }