/* ============================================================================ lp-editorial.css — the editorial-technical layer (#1214) ============================================================================ Adopts the STRUCTURE of the reference direction (oma-machina.framer.website): mono eyebrows with an accent square, oversized tight-tracked display type, pill buttons, hairline section rules, generous rhythm, one full-bleed dark band, numbered steps, circle stats, badge-topped pricing. It adopts NONE of its colour. Every value below resolves through the tokens already declared in styles.css, so light/dark keep working and the palette stays Alfred's: --accent navy (light) / amber (dark) → primary CTA fill --accent-bright amber (light) / amber (dark) → the "brass detail" role: eyebrow squares, rules, numerals. styles.css already describes this token exactly that way, which is why the reference's orange square maps onto it without inventing a colour. --bg/--surface/--card/--border/--text/--dim unchanged Additive on purpose: styles.css is 74 KB and shared by 23 pages. A page opts in by adding this sheet and using `ed-*` classes, so a half-migrated page is still a working page. ========================================================================= */ /* ------------------------------------------------------- ink-band tokens -- */ /* #1214 — the one full-bleed dark band (`.ed-dark`) is ALWAYS dark, in both themes. That is why its rules could not read --text/--dim/--muted: in the light theme those resolve to navy ink (--muted is #3a5470), which on a #0a1626 ground is invisible. So the band had ten colour literals written by hand — the single place in this sheet that broke its own header contract ("every value below resolves through the tokens already declared in styles.css"). The fix is not to point them at the theme tokens; it is to give the band its own tokens. These are MODE-INVARIANT by design and therefore declared once in :root with no :root[data-theme="dark"] counterpart — the same shape as --accent-bright, which is brass in both themes because it is a brand role rather than a theme role. Their values are the dark theme's ink ramp. */ :root { --ink-band: #0a1626; --ink-band-text: #f6f1e6; --ink-band-strong: #ffffff; --ink-band-dim: #c8bfa8; --ink-band-muted: #a89e8c; /* Hairlines and icon tiles ON the band: the sheet's convention elsewhere is color-mix over a token, not a re-typed rgba() of that token's channels. */ --ink-band-hairline: color-mix(in srgb, var(--ink-band-text) 12%, transparent); --ink-band-tile: color-mix(in srgb, var(--ink-band-text) 8%, transparent); } /* ---------------------------------------------------------------- rhythm -- */ .ed-section { /* #1214 — a escada de ritmo vertical ja existe em tokens (--sec-y-*). * Esta camada tinha reinventado dois degraus quase-iguais (9vw contra * 9.72vw, e um 48/6vw/88 que nao existe em lugar nenhum), entao a pagina * de referencia ensinava uma escada que o resto do site nao usa. */ padding-block: var(--sec-y-md); } .ed-section--tight { padding-block: var(--sec-y-sm); } /* Mesma caixa de conteudo que `.wrap` (styles.css:360 e o degrau mobile em * styles.css:1570): 1200px de teto, goteira de 32px que cai para 20px em * 720px. Esta camada tinha inventado 24px/16px@560px, ou seja duas colunas de * conteudo levemente desalinhadas quando uma secao editorial fica ao lado de * uma secao legada na mesma pagina. */ .ed-wrap { width: min(1200px, 100% - 2 * var(--ed-gutter)); margin-inline: auto; } /* A goteira da pagina, promovida de literal a token. Era 32px escrito duas * vezes aqui (e uma terceira vez, como 64px, no calculo da largura); o quadro * de goteira abaixo precisa do MESMO valor, e duas copias do numero seriam * duas coisas que derivam uma da outra sem dizer isso. Nenhum valor novo: * 32px/20px sao exatamente o que .ed-wrap ja usava. */ :root { --ed-gutter: 32px; } @media (max-width: 720px) { :root { --ed-gutter: 20px; } } /* Full-bleed hairline that spans the viewport while content stays in the grid. The reference leans on these instead of boxing every section in a card. */ .ed-rule { border: 0; border-top: 1px solid var(--border); margin: 0; } /* ---------------------------------------------------- quadro de goteira -- */ /* #1214 — o par de fios verticais de altura total que ladeia a pagina. * * O QUE A REFERENCIA FAZ (medido em pixel na oma-machina.framer.website, nao * deduzido): um fio de 1px em #ececec a 40px da borda esquerda e outro a 40px * da direita, continuos do topo ao rodape (a mesma cor dos fios horizontais de * secao), com o texto comecando mais 40px para dentro. Em 425px o par * sobrevive, recuado para 16px — ou seja o recuo do quadro e sempre MENOR que * a goteira do conteudo, senao o fio encostaria na letra. * * O MECANISMO: UM pseudo-elemento fixo no , com dois gradientes de 1px * como background-image (um elemento desenha os dois fios). Fixo, e nao um * pseudo por faixa, por tres motivos medidos nesta base: * 1. `.hero::after` JA E USADO em 18 das 21 paginas (o halo ambar de * styles.css:573, que o tema claro desliga com `display:none`), entao um * ::after por faixa perdia justamente a primeira dobra; * 2. um pseudo de faixa com z-index negativo desaparece atras do fundo opaco * do em toda faixa que nao abre contexto de empilhamento proprio; * 3. varias faixas NAO sao full-bleed (`.pricing-sec` a 1200px em 6 paginas, * as quatro caixas de carreiras.html), e nelas o fio cairia dentro do * conteudo em vez de na goteira da pagina. O quadro da referencia e * ancorado na viewport, nao na faixa. * z-index 2: acima do conteudo (que usa z-index 1) e abaixo de toda a mobilia * de chrome desta base (nav 180, banners 200+, modais 1000+), para o fio nunca * atravessar um dialogo. `pointer-events: none` para nao roubar clique. * * O QUE ISSO NAO FAZ: a referencia recolore o par ao cruzar a faixa quase * preta (#333 sobre #1a1a1a) e um unico elemento de viewport nao consegue. * Nas paginas reais nao existe faixa escura (`.final-sec` usa --bg e o *