pinta o acento */ [data-estacao="primavera"] { --estacao: var(--primavera); } [data-estacao="verao"] { --estacao: var(--verao); } [data-estacao="outono"] { --estacao: var(--outono); } [data-estacao="inverno"] { --estacao: var(--inverno); } /* ========================================================================== 2. Reset enxuto ========================================================================== */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 5.5rem; } body { margin: 0; background: var(--paper); color: var(--fg); font-family: var(--font-body); font-size: clamp(1rem, 0.96rem + 0.2vw, 1.075rem); line-height: 1.65; font-variant-numeric: oldstyle-nums proportional-nums; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; overflow-wrap: break-word; } img, svg, video { display: block; max-width: 100%; } img { height: auto; } h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.12; letter-spacing: -0.015em; margin: 0 0 0.5em; text-wrap: balance; } p { margin: 0 0 1.15em; } a { color: var(--brass-deep); text-underline-offset: 0.18em; text-decoration-thickness: 1px; } a:hover { color: var(--ink); } ul, ol { margin: 0 0 1.15em; padding-left: 1.15em; } hr { border: 0; border-top: 1px solid var(--rule); margin: 2.5rem 0; } :focus-visible { outline: 2px solid var(--brass); outline-offset: 3px; border-radius: 1px; } ::selection { background: var(--brass); color: var(--paper-3); } /* ========================================================================== 3. Tipografia utilitaria ========================================================================== */ .wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: var(--gutter); } .wrap-narrow { max-width: var(--wrap-narrow); } .rotulo { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fg-mute); margin: 0 0 0.75rem; display: block; } .rotulo--invert { color: var(--fg-invert-mute); } .num { font-family: var(--font-mono); font-variant-numeric: tabular-nums lining-nums; letter-spacing: 0.02em; } .serif-it { font-family: var(--font-display); font-style: italic; font-weight: 400; } .skip-link { position: absolute; left: -9999px; top: 0; background: var(--ink); color: var(--paper); padding: 0.75rem 1.25rem; z-index: 200; font-family: var(--font-mono); font-size: 0.8125rem; } .skip-link:focus { left: 0; color: var(--paper); } /* ========================================================================== 4. Ornamento: fios entalhados ========================================================================== */ /* fio "entalhado": zigurat de 1px, como o chanfro da xilogravura */ .fio { height: 5px; background-repeat: repeat-x; background-size: 12px 5px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='5'%3E%3Cpath d='M0 4.5 L3 0.5 L6 4.5 L9 0.5 L12 4.5' fill='none' stroke='%2314110f' stroke-opacity='0.28' stroke-width='1'/%3E%3C/svg%3E"); border: 0; margin: 0; } .fio--invert { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='5'%3E%3Cpath d='M0 4.5 L3 0.5 L6 4.5 L9 0.5 L12 4.5' fill='none' stroke='%23f4efe4' stroke-opacity='0.3' stroke-width='1'/%3E%3C/svg%3E"); } /* ========================================================================== 5. Botões ========================================================================== */ .btn { --btn-bg: var(--ink); --btn-fg: var(--paper); display: inline-flex; align-items: center; gap: 0.6em; padding: 0.85em 1.6em; background: var(--btn-bg); color: var(--btn-fg); border: 1px solid var(--btn-bg); border-radius: var(--radius); font-family: var(--font-mono); font-size: 0.75rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; text-decoration: none; cursor: pointer; transition: transform var(--dur) var(--ease), background var(--dur) var(--ease), color var(--dur) var(--ease); } .btn:hover { background: var(--brass-deep); border-color: var(--brass-deep); color: var(--paper-3); transform: translateY(-1px); } .btn:active { transform: translateY(0); } .btn--brass { --btn-bg: var(--brass); --btn-fg: var(--paper-3); } .btn--brass:hover { --btn-bg: var(--brass-deep); border-color: var(--brass-deep); } .btn--fantasma { --btn-bg: transparent; --btn-fg: var(--ink); border-color: var(--rule-strong); } .btn--fantasma:hover { --btn-bg: var(--ink); --btn-fg: var(--paper); border-color: var(--ink); } .btn--claro { --btn-bg: transparent; --btn-fg: var(--paper); border-color: var(--rule-invert); } .btn--claro:hover { --btn-bg: var(--paper); --btn-fg: var(--ink); border-color: var(--paper); } .btn--peqeno { padding: 0.6em 1.1em; font-size: 0.6875rem; } .btn svg { width: 1em; height: 1em; } /* ========================================================================== 6. Cabeçalho / navegação ========================================================================== */ .topo { position: sticky; top: 0; z-index: 100; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: saturate(140%) blur(10px); border-bottom: 1px solid var(--rule); } .topo__interno { display: flex; align-items: center; justify-content: space-between; gap: 1.5rem; min-height: 4.25rem; } .marca { display: inline-flex; align-items: center; gap: 0.55rem; font-family: var(--font-display); font-weight: 600; font-size: 1.25rem; letter-spacing: 0.02em; color: var(--ink); text-decoration: none; } /* A marca e o favicon do autor (225x260). Altura fixa + width auto preserva a proporcao whatever o arquivo que estiver no lugar. */ .marca img { height: 1.9rem; width: auto; display: block; flex: 0 0 auto; } .marca__777 { font-family: var(--font-mono); font-weight: 600; letter-spacing: 0.08em; } .nav { display: flex; align-items: center; gap: clamp(1rem, 2.5vw, 2rem); } .nav a { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fg-soft); text-decoration: none; padding: 0.35rem 0; position: relative; } .nav a::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--brass); transform: scaleX(0); transform-origin: left; transition: transform var(--dur) var(--ease); } .nav a:hover, .nav a[aria-current="page"] { color: var(--ink); } .nav a:hover::after, .nav a[aria-current="page"]::after { transform: scaleX(1); } .nav-toggle { display: none; background: none; border: 1px solid var(--rule-strong); border-radius: var(--radius); padding: 0.5rem 0.75rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); } @media (max-width: 46rem) { .nav-toggle { display: inline-flex; } .nav { position: absolute; inset: 100% 0 auto; display: none; flex-direction: column; align-items: stretch; gap: 0; background: var(--paper); border-bottom: 1px solid var(--rule); padding: 0.5rem var(--gutter) 1rem; } .nav[data-aberto="true"] { display: flex; } .nav a { padding: 0.75rem 0; border-bottom: 1px solid var(--rule-soft); } } /* ========================================================================== 7. Hero ========================================================================== */ .hero { position: relative; background: var(--ink); color: var(--fg-invert); overflow: hidden; isolation: isolate; } .hero__fundo { position: absolute; inset: 0; z-index: -2; } .hero__fundo img { width: 100%; height: 100%; object-fit: cover; opacity: 0.34; filter: grayscale(0.5) contrast(1.05); } .hero::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to bottom, rgba(20,17,15,0.72) 0%, rgba(20,17,15,0.9) 60%, var(--ink) 100%), radial-gradient(120% 80% at 50% 0%, transparent 0%, var(--ink) 100%); } .hero__interno { min-height: min(84vh, 44rem); display: grid; align-content: center; gap: 1.5rem; padding-block: clamp(4rem, 12vh, 8rem); text-align: center; } .hero__titulo { font-size: clamp(3.25rem, 13vw, 9rem); line-height: 0.92; margin: 0; letter-spacing: 0.02em; font-weight: 500; } .hero__sub { font-family: var(--font-display); font-style: italic; font-size: clamp(1.125rem, 2.4vw, 1.75rem); color: var(--fg-invert-soft); margin: 0 auto; max-width: 34ch; } .hero__acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; margin-top: 1rem; } .hero__selo { display: inline-flex; align-items: center; gap: 0.6rem; justify-self: center; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-invert-mute); } .hero__selo::before, .hero__selo::after { content: ""; width: 2.5rem; height: 1px; background: var(--rule-invert); } /* ========================================================================== 8. Seções ========================================================================== */ .secao { padding-block: clamp(3.5rem, 8vw, 7rem); } .secao--papel2 { background: var(--paper-2); } .secao--tinta { background: var(--ink); color: var(--fg-invert); } .secao--tinta a { color: var(--brass-soft); } .secao--tinta .rotulo { color: var(--fg-invert-mute); } .secao__cabecalho { margin-bottom: clamp(2rem, 5vw, 3.5rem); } .secao__titulo { font-size: clamp(1.75rem, 4.5vw, 2.75rem); margin: 0 0 0.5rem; } .secao__intro { max-width: var(--measure); color: var(--fg-soft); margin: 0; } .secao--tinta .secao__intro { color: var(--fg-invert-soft); } .prosa { max-width: var(--measure); } .prosa > p:first-of-type::first-letter { initial-letter: 3; font-family: var(--font-display); font-weight: 500; color: var(--brass-deep); margin-right: 0.08em; } /* ========================================================================== 9. Edição atual (destaque na home) ========================================================================== */ .atual { display: grid; gap: clamp(1.5rem, 4vw, 3rem); grid-template-columns: 1fr; align-items: center; } @media (min-width: 56rem) { .atual { grid-template-columns: 1.15fr 1fr; } } .capa { position: relative; display: block; overflow: hidden; border: 1px solid var(--rule-strong); background: var(--ink-2); box-shadow: 0 1px 0 rgba(20,17,15,0.1), 0 18px 40px -28px rgba(20,17,15,0.6); } .capa img { width: 100%; transition: transform 600ms var(--ease); } .capa:hover img, a.capa:hover img { transform: scale(1.012); } .capa::after { content: ""; position: absolute; inset: 0; box-shadow: inset 0 0 0 1px rgba(244,239,228,0.06); pointer-events: none; } .atual__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 0 0 1.25rem; } .atual__titulo { font-size: clamp(1.75rem, 4vw, 2.5rem); margin: 0 0 0.75rem; } .atual__acoes { display: flex; flex-wrap: wrap; gap: 0.75rem; margin-top: 1.5rem; } /* selo de volume — o 777 em mono */ .selo-vol { display: inline-flex; font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; color: var(--fg-mute); } .selo-vol strong { font-family: var(--font-display); font-size: 2.5rem; font-weight: 500; line-height: 1; color: var(--brass); letter-spacing: 0.01em; } /* ========================================================================== 10. Arquivo ========================================================================== */ .ano-bloco { margin-bottom: clamp(2.5rem, 6vw, 4.5rem); } .ano-bloco__cabecalho { display: flex; align-items: baseline; gap: 1rem; padding-bottom: 0.75rem; margin-bottom: 1.75rem; border-bottom: 1px solid var(--rule); } .ano-bloco__titulo { font-size: clamp(1.5rem, 3.5vw, 2rem); margin: 0; } .ano-bloco__contagem { font-family: var(--font-mono); font-size: 0.75rem; color: var(--fg-mute); } .ano-bloco--par { background: var(--paper-2); padding: clamp(1rem, 3vw, 2rem); border-radius: var(--radius); } .ano-bloco--par + .ano-bloco { margin-top: -1rem; } .edicoes { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr)); list-style: none; padding: 0; margin: 0; } .edicao { position: relative; display: grid; grid-template-rows: auto 1fr; background: var(--paper-3); border: 1px solid var(--rule); border-left: 3px solid var(--estacao, var(--argent-dim)); border-radius: var(--radius); overflow: hidden; transition: transform var(--dur) var(--ease), box-shadow var(--dur) var(--ease), border-color var(--dur) var(--ease); } .edicao:hover { transform: translateY(-3px); box-shadow: 0 20px 40px -30px rgba(20,17,15,0.7); border-color: var(--rule-strong); border-left-color: var(--estacao, var(--brass)); } .edicao__capa { display: block; border-bottom: 1px solid var(--rule); background: var(--ink-2); } .edicao__capa img { width: 100%; aspect-ratio: 7 / 3; object-fit: cover; } .edicao__corpo { padding: 1.25rem 1.25rem 1.5rem; display: flex; flex-direction: column; gap: 0.75rem; } .edicao__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-mute); } .edicao__estacao { color: var(--estacao, var(--fg-mute)); font-weight: 500; } .edicao__titulo { font-size: 1.125rem; line-height: 1.25; margin: 0; } .edicao__titulo a { color: var(--ink); text-decoration: none; } .edicao__titulo a:hover { color: var(--brass-deep); text-decoration: underline; } .edicao__resumo { font-size: 0.9375rem; color: var(--fg-soft); margin: 0; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .edicao__acoes { margin-top: auto; padding-top: 0.5rem; display: flex; flex-wrap: wrap; gap: 0.6rem; } /* Resultado da busca: os itens do sumário que casaram com o que foi digitado. Só aparece durante a busca. */ .edicao__achado { margin: 0.6rem 0 0; padding: 0.5rem 0.65rem; border-left: 2px solid var(--brass); background: color-mix(in srgb, var(--brass) 8%, transparent); font-size: 0.8125rem; line-height: 1.45; color: var(--fg-soft); } .edicao__achado[hidden] { display: none; } mark { background: color-mix(in srgb, var(--brass) 26%, transparent); color: inherit; padding: 0 0.1em; border-radius: 1px; } .edicao--atual { border-left-width: 4px; border-color: var(--ember); } .edicao--atual .edicao__corpo::before { content: "Edição atual"; display: block; font-family: var(--font-mono); font-size: 0.625rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ember); margin-bottom: 0.25rem; } /* busca */ .busca { position: relative; margin-bottom: 2rem; } .busca input { width: 100%; padding: 0.85rem 1rem 0.85rem 2.75rem; font-family: var(--font-body); font-size: 1rem; color: var(--ink); background: var(--paper-3); border: 1px solid var(--rule-strong); border-radius: var(--radius); } .busca input::placeholder { color: var(--fg-mute); } .busca svg { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); width: 1.05rem; height: 1.05rem; color: var(--fg-mute); } .busca__status { font-family: var(--font-mono); font-size: 0.75rem; color: var(--fg-mute); margin: 0.75rem 0 0; } .vazio { padding: 3rem 0; text-align: center; color: var(--fg-mute); } /* ========================================================================== 11. Página da edição ========================================================================== */ .edicao-hero { padding-block: clamp(2.5rem, 6vw, 4.5rem) 0; } .edicao-hero__meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; align-items: baseline; margin-bottom: 1rem; } .edicao-hero__titulo { font-size: clamp(2rem, 6vw, 3.5rem); margin: 0 0 1.5rem; } .edicao-hero__capa { margin: 0 0 2rem; } .edicao-hero__capa img { width: 100%; border: 1px solid var(--rule-strong); } .sumario { margin: 0; } .sumario__grupo + .sumario__grupo { margin-top: 2.25rem; } .sumario__cat { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--brass-deep); margin: 0 0 0.9rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--rule); display: flex; align-items: center; gap: 0.6rem; } .sumario__cat::after { content: ""; flex: 1; height: 1px; background: var(--rule-soft); } .sumario__lista { list-style: none; margin: 0; padding: 0; } .sumario__item { padding: 0.6rem 0; border-bottom: 1px solid var(--rule-soft); display: grid; grid-template-columns: 1.5rem 1fr; gap: 0.5rem; font-size: 0.9375rem; } .sumario__item:last-child { border-bottom: 0; } .sumario__marcador { color: var(--estacao, var(--brass)); font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.9; } .sumario__titulo { font-weight: 400; } .sumario__autor { color: var(--fg-mute); font-style: italic; } .navegacao-edicoes { display: flex; justify-content: space-between; gap: 1rem; padding-top: 2rem; margin-top: 3rem; border-top: 1px solid var(--rule); } .navegacao-edicoes a { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; text-decoration: none; max-width: 45%; } .navegacao-edicoes a:hover { text-decoration: underline; } .navegacao-edicoes .prox { margin-left: auto; text-align: right; } /* ========================================================================== 12. Time ========================================================================== */ .time { display: grid; gap: 2rem; grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr)); list-style: none; padding: 0; margin: 0; } .time li { text-align: center; } .time img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 50%; border: 1px solid var(--rule-strong); filter: grayscale(1) contrast(1.08); margin-bottom: 0.85rem; transition: filter var(--dur) var(--ease); } .time li:hover img { filter: none; } .time h3 { font-size: 1rem; margin: 0 0 0.15rem; } .time p { font-family: var(--font-mono); font-size: 0.6875rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fg-mute); margin: 0; } /* ========================================================================== 13. Contato ========================================================================== */ .contato { display: grid; gap: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); list-style: none; padding: 0; margin: 0; } .contato li { padding: 1.5rem; text-align: center; border: 1px solid var(--rule-invert); border-top: 2px solid var(--brass); background: rgba(244, 239, 228, 0.03); } .contato svg { width: 1.5rem; height: 1.5rem; margin: 0 auto 0.85rem; color: var(--brass-soft); } .contato h3 { font-family: var(--font-mono); font-size: 0.6875rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; color: var(--fg-invert-mute); margin: 0 0 0.6rem; } .contato p, .contato a { margin: 0; color: var(--fg-invert); font-size: 0.9375rem; overflow-wrap: anywhere; } /* ========================================================================== 14. Rodapé ========================================================================== */ .rodape { background: var(--ink); color: var(--fg-invert-mute); padding-block: 3rem 2rem; font-size: 0.875rem; } .rodape__interno { display: flex; flex-wrap: wrap; gap: 1.5rem; justify-content: space-between; align-items: center; } .rodape p { margin: 0; } .rodape a { color: var(--fg-invert-soft); } .rodape .fio { margin-bottom: 1.5rem; } /* ========================================================================== 15. Revelação ========================================================================== */ [data-revelar] { opacity: 0; transform: translateY(14px); transition: opacity 620ms var(--ease), transform 620ms var(--ease); } [data-revelar].visivel { opacity: 1; transform: none; } /* ========================================================================== 16. Impressão ========================================================================== */ @media print { .topo, .hero, .navegacao-edicoes, .edicao__acoes, .secao--tinta, .busca, .skip-link { display: none !important; } body { background: #fff; color: #000; font-size: 11pt; } .wrap { max-width: none; padding: 0; } .sumario__item { break-inside: avoid; } a { text-decoration: none; color: #000; } .edicao-hero__titulo { font-size: 22pt; } } /* ========================================================================== 17. Preferências de movimento e contraste ========================================================================== */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } [data-revelar] { opacity: 1; transform: none; } } @media (prefers-contrast: more) { :root { --rule: rgba(20,17,15,0.35); --fg-mute: #4a423a; --fg-soft: #2e2823; } } /* ========================================================================== 18. Impressão de fallback (sem JS) ========================================================================== */ .no-js [data-revelar] { opacity: 1; transform: none; }