/* ============================================= fragtext — identidade visual do Scribo Herda a paleta e a tipografia do editor_deconto: cyberpunk neon, vidro fosco, títulos em Oswald caixa-alta. Os nomes das variáveis são os mesmos de css/style.css do deconto, de propósito: é o vocabulário que já existe. Uma diferença deliberada de escala: lá o h1 tem 3.8rem, tamanho de landing page. Aqui é ferramenta de escrita — o neon fica nos acentos, nas bordas e nos estados, e o texto que você escreve é quem ocupa a tela. ============================================= */ /* -- 1. Variáveis (tema escuro padrão) -- */ :root { --color-background: #0a0a0a; --color-surface: #1a1a1a; --color-text: #f0f0f0; --color-text-muted: #a0a0a0; --glass-bg: rgba(20, 20, 35, 0.5); --glass-border: rgba(255, 255, 255, 0.1); --color-primary: #00ffff; /* Azul Neon */ --color-secondary: #39ff14; /* Verde Neon */ --color-accent: #ff1493; /* Rosa Choque */ --color-danger: #ff4d6d; --shadow-primary: 0 0 8px var(--color-primary), 0 0 16px rgba(0, 255, 255, .5); --shadow-secondary: 0 0 8px var(--color-secondary), 0 0 16px rgba(57, 255, 20, .5); --shadow-accent: 0 0 8px var(--color-accent), 0 0 16px rgba(255, 20, 147, .5); --font-main: 'Roboto', sans-serif; --font-headings: 'Oswald', sans-serif; --font-logo: 'Bebas Neue', sans-serif; --font-leitura: 'Lora', Georgia, serif; --raio: .5rem; --largura: 54rem; /* So onde se LE (pagina publica, ensaio, convite): linha de 54rem cansa o olho. 42rem da ~75 caracteres na fonte de leitura — e e por que a versao de celular "fica bonita": coluna estreita. */ --largura-leitura: 42rem; } /* -- 2. Tema claro -- */ [data-theme="light"] { --color-background: #f4f7f9; --color-surface: #ffffff; --color-text: #2c3e50; --color-text-muted: #7f8c8d; --glass-bg: rgba(255, 255, 255, .7); --glass-border: #e0e6ed; --color-primary: #0093b8; --color-secondary: #2eb82e; --color-accent: #ff1493; --color-danger: #d62246; --shadow-primary: 0 0 6px rgba(0, 195, 255, .55); --shadow-secondary: 0 0 6px rgba(57, 255, 20, .45); --shadow-accent: 0 0 6px rgba(255, 20, 147, .5); } /* -- 2b. Visuais (#22) -- O visual e um segundo eixo, independente do claro/escuro: no site e preferencia de quem usa (localStorage `fragtext_visual`); na pagina publica vem congelado na foto (`data-visual` impresso pelo p.php). O catalogo mora em ft_themes — este arquivo so tem os blocos de variaveis correspondentes. */ /* Neon azul: o mesmo neon, com o rosa trocado por azul. */ [data-visual="neon-azul"] { --color-accent: #1e90ff; --shadow-accent: 0 0 8px var(--color-accent), 0 0 16px rgba(30, 144, 255, .5); } [data-theme="light"][data-visual="neon-azul"] { --color-accent: #1273e6; --shadow-accent: 0 0 6px rgba(18, 115, 230, .5); } /* Papiro: papel envelhecido, serifas, nada de neon. E aparencia UNICA: este bloco vem DEPOIS do tema claro de proposito — com os dois atributos no , o empate de especificidade e decidido pela ordem, e o papiro vence tanto o escuro quanto o claro. */ [data-visual="papiro"] { --color-background: #efe5cf; --color-surface: #f7f0df; --color-text: #3a2f20; --color-text-muted: #7d6f56; --glass-bg: rgba(247, 240, 223, .72); --glass-border: #d9cba8; --color-primary: #7a5c2e; --color-secondary: #5e6e46; --color-accent: #8c3b2e; --color-danger: #a03030; --shadow-primary: 0 1px 3px rgba(58, 47, 32, .25); --shadow-secondary: 0 1px 3px rgba(58, 47, 32, .2); --shadow-accent: 0 1px 3px rgba(140, 59, 46, .3); --font-main: 'Lora', Georgia, serif; --font-headings: 'Lora', Georgia, serif; --font-logo: 'Lora', Georgia, serif; } /* -- 3. Globais -- */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { background-color: var(--color-background); font-family: var(--font-main); color: var(--color-text); line-height: 1.6; overflow-x: hidden; transition: background-color .4s ease, color .4s ease; } h1, h2, h3 { font-family: var(--font-headings); text-transform: uppercase; letter-spacing: .02em; font-weight: 500; } a { color: var(--color-primary); } .neon-text-primary { color: var(--color-primary); text-shadow: var(--shadow-primary); } .neon-text-accent { color: var(--color-accent); text-shadow: var(--shadow-accent); } /* -- 4. Topo em vidro -- */ .topo { position: sticky; top: 0; z-index: 100; display: flex; align-items: center; gap: 1rem; padding: .8rem 1.25rem; background: var(--glass-bg); backdrop-filter: blur(10px); border-bottom: 1px solid var(--glass-border); } .topo .marca { font-family: var(--font-logo); font-size: 1.8rem; letter-spacing: 1px; text-decoration: none; color: var(--color-accent); text-shadow: var(--shadow-accent); line-height: 1; } .topo .espaco { flex: 1; } .envelope { max-width: var(--largura); margin: 0 auto; padding: 1.75rem 1.25rem 6rem; } /* -- 5. Botões -- */ /* O display:none do atributo `hidden` vem da folha do NAVEGADOR, e qualquer display de autor (o inline-flex logo abaixo) passa por cima dela — sem esta regra, nenhum