/* Tema QUIET LUXURY — folha única, escrita à mão. O mock (Documentos/Identidade Visual/Executivo.html) usava o Play CDN do Tailwind, que compila no navegador: bloqueia a renderização, avisa no console que não é para produção e traria 300 KB de JS para usar ~40 utilidades. Aqui elas viram CSS direto. PALETA: vem do PDF da identidade visual (a fonte-verdade), NÃO dos valores do mock — o mock usa os tons do Tailwind, que são parecidos mas não são os da marca. #11182A escuro #F9FAFD superfície #0A84C7 acento #E3E9F1 borda Prefixo --ql- em tudo. Tema claro/escuro pelo atributo data-tema no (ver js/tema.js). */ /* ===================================================================== Tokens */ :root { /* Marca (PDF) */ --ql-escuro: #11182A; --ql-superficie: #F9FAFD; --ql-acento: #0A84C7; --ql-borda: #E3E9F1; /* O acento da marca dá ~4.0:1 sobre a superfície clara — abaixo dos 4.5:1 de texto corrido. Ícones, traços e fundos de botão usam --ql-acento; texto e link usam este tom mais fechado. */ --ql-acento-texto: #0870A8; /* "Índigo vibrante nos detalhes", pedido pelo PDF (que não fixou o hex). */ --ql-indigo: #4F46E5; /* Papéis — reatribuídos no tema escuro */ --ql-fundo: var(--ql-superficie); --ql-fundo-alt: #FFFFFF; --ql-fundo-sutil: #F1F5FA; --ql-texto: var(--ql-escuro); --ql-texto-suave: #55617A; --ql-texto-fraco: #8A94A8; --ql-linha: var(--ql-borda); --ql-cartao: #FFFFFF; --ql-sombra: 0 1px 2px rgba(17, 24, 42, .04), 0 8px 24px rgba(17, 24, 42, .06); --ql-sombra-forte: 0 18px 45px rgba(17, 24, 42, .12); --ql-grade: rgba(148, 163, 184, .10); --ql-vidro: rgba(255, 255, 255, .82); --ql-sucesso: #16A34A; --ql-max: 1152px; --ql-raio: 12px; --ql-raio-sm: 8px; } :root[data-tema="escuro"] { --ql-fundo: #0B1120; --ql-fundo-alt: var(--ql-escuro); --ql-fundo-sutil: #151D31; --ql-texto: #F1F5F9; --ql-texto-suave: #A6B0C3; --ql-texto-fraco: #74809A; --ql-linha: #23304C; --ql-cartao: #151D31; --ql-acento-texto: #4FB3E8; --ql-sombra: 0 1px 2px rgba(0, 0, 0, .3), 0 8px 24px rgba(0, 0, 0, .28); --ql-sombra-forte: 0 18px 45px rgba(0, 0, 0, .45); --ql-grade: rgba(255, 255, 255, .035); --ql-vidro: rgba(11, 17, 32, .82); --ql-sucesso: #4ADE80; } /* ====================================================================== Base */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: 90px; } body { margin: 0; font-family: Inter, system-ui, -apple-system, "Segoe UI", sans-serif; font-size: 16px; line-height: 1.6; color: var(--ql-texto); background: var(--ql-fundo); -webkit-font-smoothing: antialiased; transition: background-color .3s ease, color .3s ease; } h1, h2, h3, h4 { margin: 0; line-height: 1.15; letter-spacing: -.02em; font-weight: 700; } p { margin: 0 0 1rem; } p:last-child { margin-bottom: 0; } img { max-width: 100%; height: auto; display: block; } ul { margin: 0; padding: 0; list-style: none; } code, .ql-mono { font-family: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace; } a { color: var(--ql-acento-texto); text-decoration: none; transition: color .2s ease; } a:hover { color: var(--ql-acento); } :where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--ql-acento); outline-offset: 2px; border-radius: 3px; } /* Usada pelo filtro de categorias, que é UM script para os dois temas (Pages/Projetos/Index.cshtml). No Concept vem do Bootstrap 4; aqui é declarada para o mesmo script continuar valendo. */ .d-none { display: none !important; } .ql-envelope { width: 100%; max-width: var(--ql-max); margin: 0 auto; padding: 0 1.5rem; } .ql-secao { padding: 6rem 0; border-bottom: 1px solid var(--ql-linha); } .ql-secao--alt { background: var(--ql-fundo-alt); } .ql-secao--sutil { background: var(--ql-fundo-sutil); } /* Grade decorativa de fundo do hero */ .ql-grade { position: absolute; inset: 0; background-size: 40px 40px; background-image: linear-gradient(to right, var(--ql-grade) 1px, transparent 1px), linear-gradient(to bottom, var(--ql-grade) 1px, transparent 1px); pointer-events: none; } /* Sobrescrita das seções (o "olho" do tema): rótulo mono + título com traço no acento */ .ql-olho { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: .78rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ql-acento-texto); margin: 0 0 .75rem; } .ql-titulo-secao { font-size: clamp(1.6rem, 3vw, 2rem); position: relative; display: inline-block; padding-bottom: 1rem; margin-bottom: 3.5rem; } .ql-titulo-secao::after { content: ""; position: absolute; left: 0; bottom: 0; width: 50%; height: 4px; background: var(--ql-acento); } /* Revelação suave — desligada para quem pediu menos movimento */ .ql-revela { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; } .ql-revela.ql-visivel { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .ql-revela { opacity: 1; transform: none; transition: none; } * { animation-duration: .01ms !important; transition-duration: .01ms !important; } } /* ==================================================================== Botões */ .ql-botao { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; padding: .8rem 1.4rem; border-radius: var(--ql-raio-sm); border: 1px solid transparent; font-size: .95rem; font-weight: 500; font-family: inherit; cursor: pointer; transition: background-color .2s ease, color .2s ease, border-color .2s ease, transform .2s ease; } .ql-botao:hover { transform: translateY(-1px); } .ql-botao--primario { background: var(--ql-escuro); color: #fff; box-shadow: var(--ql-sombra); } .ql-botao--primario:hover { background: #1C2740; color: #fff; } :root[data-tema="escuro"] .ql-botao--primario { background: #F1F5F9; color: var(--ql-escuro); } :root[data-tema="escuro"] .ql-botao--primario:hover { background: #fff; color: var(--ql-escuro); } .ql-botao--contorno { background: var(--ql-cartao); color: var(--ql-texto); border-color: var(--ql-linha); box-shadow: var(--ql-sombra); } .ql-botao--contorno:hover { background: var(--ql-fundo-sutil); color: var(--ql-texto); } .ql-botao--acento { background: var(--ql-acento); color: #fff; } .ql-botao--acento:hover { background: var(--ql-acento-texto); color: #fff; } .ql-botao--bloco { width: 100%; } /* ===================================================================== Marca */ .ql-marca { display: inline-flex; align-items: center; gap: .5rem; color: var(--ql-texto); } .ql-marca:hover { color: var(--ql-texto); } .ql-marca__cursor { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 700; font-size: 1.25rem; color: var(--ql-acento); } /* O logotipo bipartido do PDF: "felipe" leve (proximidade), "moura" denso (solidez). */ .ql-marca__nome { font-size: 1.25rem; letter-spacing: -.02em; } .ql-marca__leve { font-weight: 300; color: var(--ql-texto-suave); } .ql-marca__forte { font-weight: 700; } /* O "_" pisca: é um cursor de linha de comando, e cursor que não pisca não é cursor. Este era o único cabeçalho que fazia isso e virou o padrão dos outros (terminal, /Login, admin e área do recrutador) em vez de ser apagado. Quem pede menos movimento não vê a animação — a regra global de prefers-reduced-motion lá em cima zera a duração. */ .ql-marca__traco { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 400; color: var(--ql-acento); animation: ql-piscar 1.4s steps(2, start) infinite; } @keyframes ql-piscar { to { opacity: 0; } } /* ======================================================================= Nav */ .ql-nav { position: fixed; inset: 0 0 auto; z-index: 50; background: var(--ql-vidro); -webkit-backdrop-filter: blur(12px); /* Safari ainda pede o prefixo */ backdrop-filter: blur(12px); border-bottom: 1px solid var(--ql-linha); } .ql-nav__barra { max-width: var(--ql-max); margin: auto 2rem; padding: .9rem 1.5rem; display: flex; align-items: center; justify-content: space-between; gap: 1rem; } .ql-nav__acoes { display: flex; align-items: center; gap: 1.25rem; } .ql-nav__links { display: flex; align-items: center; gap: 1.75rem; } .ql-nav__link { font-size: .9rem; font-weight: 500; color: var(--ql-texto-suave); white-space: nowrap; } .ql-nav__link:hover { color: var(--ql-acento); } .ql-nav__divisor { width: 1px; height: 24px; background: var(--ql-linha); } .ql-icone-botao { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; padding: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ql-texto-suave); cursor: pointer; transition: background-color .2s ease, color .2s ease; } .ql-icone-botao:hover { background: var(--ql-fundo-sutil); color: var(--ql-texto); } .ql-icone-botao svg { width: 20px; height: 20px; } /* Atalho para /terminal. É e não