/* fjord.css — Fjord Brutalist skin for the Nord Leads home. Loaded AFTER assets/css/site.css (see index.html ). Site.css still owns layout/structure/JS-driven states (.reveal, .mesh-stage, .fp-active, etc.); this file only re-tokens color/type/radius and adds border/tag treatments so the SAME markup reads as the direction approved in .scratch/direcoes/01-fjord-brutalist.html. No text, no new elements with copy, no touch to assets/js/site.js selectors that drive animation state. Source of truth for the look: .scratch/direcoes/01-fjord-brutalist.html Known defects measured in that reference (fixed here, not repeated): - 3 of 8 buttons under 44px touch height -> every interactive control below gets an explicit min-height:44px in this file. - 9 elements crossing the 390px right edge -> the marquee's rotate/scale (the actual cause upstream) is neutralized below instead of ported. */ /* A PALETA E A TIPOGRAFIA SAIRAM DAQUI (#87): moraram neste arquivo ate 29/08 e agora vivem em assets/css/tokens.css, carregado ANTES desta folha. O motivo e que as satelites e a software.html nao carregam site.css e por isso nunca podiam herdar o skin daqui - cada uma tinha a sua paleta literal. Este arquivo voltou a ser so o que o nome diz: as regras de componente que fazem o MESMO markup de site.css ler como fjord. */ /* ========================================================================== Global type + hairlines ========================================================================== */ body{ -webkit-font-smoothing:antialiased; } h1,h2,h3,.logo,.brand{ text-transform:uppercase; } h1{ line-height:.98; } .eyebrow, .mono, .sec-num, .tag, .stat-label, .pkg-badge, .price-tag{ font-family:var(--font-mono); } /* the old eyebrow used a short accent rule (::before) as its marker; the brutalist mark is a bordered mono tag instead. */ .eyebrow{ display:inline-flex; align-items:center; gap:0; column-gap:0; border:1px solid var(--ink); padding:5px 10px; font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--ink); } .eyebrow::before{ content:none; } .cine .eyebrow{ border-color:var(--bg); color:var(--dk-ink); } ::selection{ background:var(--accent); color:var(--on-accent); } :focus-visible{ outline:2px solid var(--ring); outline-offset:2px; border-radius:0; } /* ========================================================================== Header ========================================================================== */ header{ border-bottom:3px solid var(--ink); background:var(--bg); } header.scrolled{ border-bottom-color:var(--ink); } .nav-links a{ font-family:var(--font-mono); font-size:.78rem; text-transform:uppercase; letter-spacing:.08em; } .nav-links a::after{ background:var(--accent); height:2px; bottom:-6px; } .lang-toggle{ border:1px solid var(--ink); padding:3px; border-radius:0; } .lang-btn{ min-height:38px; padding:0 12px; border-radius:0; font-family:var(--font-mono); } .lang-btn.active{ background:var(--ink); color:var(--bg); } .nav-toggle{ border:2px solid var(--ink); border-radius:0; } .nav-drawer{ border-bottom:3px solid var(--ink); } .nav-drawer a:not(.btn){ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em; font-size:.95rem; } /* ========================================================================== Buttons / pills — square, bordered, 44px minimum everywhere ========================================================================== */ .btn,.pill, .lang-btn,.nav-toggle, .consent-actions .btn, .work-nav button, .cine-totop{ border-radius:0 !important; min-height:44px; } .btn,.pill{ font-family:var(--font-mono); text-transform:uppercase; letter-spacing:.06em; border:2px solid var(--ink); background:transparent; color:var(--ink); } .btn:hover,.pill:hover{ border-color:var(--accent); color:var(--ink); } .btn:not(.ghost){ background:var(--ink); color:var(--bg); border-color:var(--ink); } .btn:not(.ghost):hover,.pill.solid:hover{ background:var(--accent-hi); border-color:var(--accent-hi); color:var(--on-accent); } .pill.solid{ background:var(--ink); color:var(--bg); border-color:var(--ink); } .pill.ghost,.btn.ghost{ background:transparent; color:var(--ink); box-shadow:none; border:2px solid var(--ink); } .pill.quiet{ border-color:transparent; text-transform:uppercase; letter-spacing:.06em; font-family:var(--font-mono); min-height:44px; } .pill.quiet:hover{ color:var(--accent-text); } .cine .pill:not(.solid){ border-color:var(--dk-line-strong); color:var(--dk-ink); } .cine .pill.solid{ background:var(--dk-accent); color:var(--dk-on-accent); border-color:var(--dk-accent); } /* work-gallery prev/next were 38px circles — under the 44px floor */ .work-nav button{ width:44px; height:44px; border:2px solid var(--ink); border-radius:0 !important; } /* ========================================================================== Hero ========================================================================== */ .hero.mesh-stage{ border-bottom:3px solid var(--ink); } .hero .trust .dot{ border-radius:0; } .hero-foot .eyebrow{ border:0; padding:0; } /* ========================================================================== Marquee — flattened (brutalist has no soft tilt; this also removes the rotate+scale that was measured inflating scrollWidth past 390px). */ .marquee{ background:var(--ink); border-top:3px solid var(--ink); border-bottom:3px solid var(--ink); transform:none !important; } .marquee-track span{ color:var(--bg); font-family:var(--font-mono); } .marquee-track span::after{ content:"·"; color:var(--accent); } /* ========================================================================== Sections — hard dividers + bordered blocks instead of soft cards ========================================================================== */ .band,.work-pin{ border-top:3px solid var(--ink); } .card,.pkg-card,.metric,.chat,.stat-card,.cta .panel,.serp,.consent,.cta-more{ border:2px solid var(--ink); box-shadow:none; } .card:hover{ border-color:var(--accent); transform:none; } .card li::before{ content:"— "; background:none; color:var(--accent); width:auto; height:auto; border-radius:0; transform:none; font-weight:700; } /* work card */ .work-card{ border:2px solid var(--ink); box-shadow:none; border-radius:0; } .work-card:hover,.work-card:focus-visible{ box-shadow:none; transform:none; border-color:var(--accent); } .art-idx{ font-family:var(--font-mono); border:1px solid var(--bg); border-radius:0; } .work-progress{ background:var(--line); } .work-progress i{ background:var(--accent); } /* pricing */ .pkg-card--featured{ background:var(--ink); color:var(--bg); border-color:var(--ink); } .pkg-badge{ border-radius:0 !important; border:1px solid var(--ink); background:var(--bg); } .pkg-price span,.pkg-price strong{ color:var(--accent-text); } .pkg-card--featured .pkg-price span,.pkg-card--featured .pkg-price strong{ color:#fff; } /* results / math band: no dedicated rules existed upstream (unstyled block) */ .math-block{ border-top:1px solid var(--ink); margin-top:24px; padding-top:18px; } .math-line{ font-family:var(--font-mono); font-size:.95rem; padding:8px 0; border-bottom:1px dashed var(--line-hi); } .math-close,.math-b{ margin-top:20px; max-width:60ch; } /* CTA / contact panel */ .cta-input{ background:transparent; border:0; border-bottom:2px solid var(--ink); border-radius:0; font-family:var(--font-mono); } .cta-input:focus,.cta-input:focus-visible{ outline:0; border-color:var(--accent); } .cta-more{ border-radius:0; } #formSubmit,.cta .btn{ background:var(--accent); border-color:var(--accent); color:var(--on-accent); } #formSubmit:hover{ background:var(--ink); border-color:var(--ink); color:var(--bg); } /* ========================================================================== Footer (cine) — already dark; just square its chips/pills and add the 3px structural border the rest of the page uses. */ .footer-reveal .cine{ border-top:3px solid var(--ink); } .cine .foot-col a{ font-family:var(--font-mono); font-size:.875rem; } .cine-badge{ border:1px solid var(--dk-line-strong); border-radius:0 !important; } .cine-copy{ letter-spacing:.1em; } /* ========================================================================== Floating widgets — square where they're not a circular icon by design. ========================================================================== */ .sticky-cta{ border-top:3px solid var(--ink); } .consent{ border:2px solid var(--ink); border-radius:0; } .consent-actions .btn{ min-height:44px; } @media(prefers-reduced-motion:reduce){ .card,.work-card{ transition:none; } } /* ========================================================================== Security check-up (#security-checkup) — direção afrodite-design, _orquestra/direcao-arte-security-checkup.md. Tokens --chk-* escopados AQUI, nunca em :root; tokens.css não se toca (§4/§9 da direção). ========================================================================== */ #security-checkup{ --chk-field: var(--dk-bg); /* #27231f */ --chk-ink: var(--dk-ink); /* = cor de texto de .cine */ --chk-ink-2: var(--dk-ink-2); /* secundário sobre tinta (9,40:1) */ --chk-line: var(--dk-line-strong); /* = borda de .cine-badge / .cine .pill */ --chk-rule: rgba(242,243,240,.14); /* filete tracejado do livro-razão */ --chk-accent: var(--dk-accent); /* musgo claro, legível como texto aqui (7,34:1) */ --chk-on-accent: var(--dk-on-accent); /* texto dentro do pill */ background:var(--chk-field); color:var(--chk-ink); overflow-x:clip; /* nunca scroll horizontal (§6 da direção) */ } #security-checkup .chk-wrap{ padding-top:64px; padding-bottom:64px; } #security-checkup .chk-eyebrow{ border-color:var(--chk-line); color:var(--chk-ink); } #security-checkup .chk-h2{ font-size:clamp(2rem,7vw,3.4rem); line-height:.98; margin-top:20px; max-width:15em; } #security-checkup .chk-h2 em{ font-style:italic; color:var(--chk-accent); } #security-checkup .chk-price-block{ margin-top:32px; } #security-checkup .chk-price{ font-family:var(--font-display); font-weight:var(--w-head); font-size:clamp(2.2rem,6vw,2.6rem); } #security-checkup .chk-price-line{ font-family:var(--font-mono); font-size:.875rem; color:var(--chk-ink-2); line-height:1.5; padding-top:10px; margin-top:10px; border-top:1px solid var(--chk-line); } #security-checkup .chk-price-line:first-of-type{ border-top:none; padding-top:2px; margin-top:14px; } #security-checkup .chk-cta{ margin-top:24px; width:100%; justify-content:center; background:var(--chk-accent); color:var(--chk-on-accent); min-height:52px; } #security-checkup .chk-cta:hover{ background:var(--dk-accent-hi); } #security-checkup .chk-p{ font-size:1rem; line-height:1.6; max-width:56ch; margin-top:22px; } #security-checkup .chk-p1{ color:var(--chk-ink); } #security-checkup .chk-p2,#security-checkup .chk-p3,#security-checkup .chk-p4{ color:var(--chk-ink-2); } /* Livro-razão — .math-line da banda #results, re-polarizada sobre tinta (§2/7.1 da direção) */ #security-checkup .chk-ledger{ margin-top:40px; padding-top:28px; border-top:1px solid var(--chk-line); } #security-checkup .chk-ledger-head{ font-family:var(--font-mono); font-size:.875rem; color:var(--chk-ink-2); } #security-checkup .chk-target{ letter-spacing:.02em; } #security-checkup .chk-ledger-list{ margin-top:14px; } #security-checkup .chk-ledger-list li{ display:flex; justify-content:space-between; align-items:baseline; gap:16px; font-family:var(--font-mono); font-size:1rem; padding:10px 0; border-bottom:1px dashed var(--chk-rule); } #security-checkup .chk-try{ color:var(--chk-ink); } #security-checkup .chk-try::before{ content:"we try "; color:var(--chk-ink-2); } #security-checkup .chk-verdict{ color:var(--chk-ink-2); text-align:right; white-space:nowrap; } #security-checkup .chk-verdict::before{ content:"\2192 "; } #security-checkup .chk-finding{ color:var(--chk-ink-2); } /* JS liga o accent no beat; sem JS/reduced-motion, CSS abaixo cobre */ /* Passos — o aceite (passo 1) é o único destacado (§5 wireframe) */ #security-checkup .chk-steps{ margin-top:36px; padding-top:28px; border-top:1px solid var(--chk-line); display:grid; grid-template-columns:1fr; gap:16px; } #security-checkup .chk-step{ font-family:var(--font-mono); font-size:.875rem; color:var(--chk-ink-2); display:flex; align-items:baseline; gap:10px; padding-left:14px; position:relative; } #security-checkup .chk-step-n{ color:inherit; } #security-checkup .chk-step--go{ color:var(--chk-ink); } #security-checkup .chk-step-rule{ position:absolute; left:0; top:2px; bottom:2px; width:2px; background:var(--chk-accent); transform:scaleY(0); transform-origin:top; } /* Aceite/escopo — nunca abaixo de 15px, nunca animado (§3.3 e §9 da direção) */ #security-checkup .chk-scope{ margin-top:36px; } #security-checkup .chk-scope summary{ cursor:pointer; list-style:none; display:flex; align-items:center; gap:10px; min-height:44px; font-family:var(--font-mono); font-size:.95rem; color:var(--chk-ink); } #security-checkup .chk-scope summary::-webkit-details-marker{ display:none; } #security-checkup .chk-scope summary::before{ content:'+'; color:var(--chk-accent); font-size:1.1rem; } #security-checkup .chk-scope[open] summary::before{ content:'\2212'; } #security-checkup .chk-scope-body{ margin-top:16px; padding-top:16px; border-top:1px solid var(--chk-line); max-width:64ch; } #security-checkup .chk-scope-body h3{ font-family:var(--font-mono); font-size:.8rem; text-transform:uppercase; letter-spacing:.04em; color:var(--chk-ink-2); margin-top:20px; } #security-checkup .chk-scope-body h3:first-child{ margin-top:0; } #security-checkup .chk-scope-body p, #security-checkup .chk-scope-body li{ font-size:.95rem; line-height:1.6; color:var(--chk-ink-2); margin-top:8px; } #security-checkup .chk-scope-body ul{ padding-left:1.1em; } #security-checkup .chk-scope-body li{ list-style:disc; } #security-checkup .chk-proof{ font-family:var(--font-mono); font-size:.9375rem; line-height:1.6; color:var(--chk-ink-2); margin-top:24px; max-width:60ch; } /* Foco: não sobrescrever (§4 da direção — outline do accent já dá 6,38:1 sobre o campo escuro) */ @media(min-width:960px){ #security-checkup .chk-wrap{ display:grid; gap:0 64px; padding-top:96px; padding-bottom:96px; grid-template-columns:7fr 5fr; grid-template-areas: "eyebrow eyebrow" "h2 price" "p1 price" "p2 price" "p3 price" "p4 price" "ledger ledger" "steps steps" "details proof"; } #security-checkup .chk-eyebrow{ grid-area:eyebrow; margin-bottom:8px; } #security-checkup .chk-h2{ grid-area:h2; } #security-checkup .chk-price-block{ grid-area:price; align-self:start; margin-top:0; } #security-checkup .chk-p1{ grid-area:p1; } #security-checkup .chk-p2{ grid-area:p2; } #security-checkup .chk-p3{ grid-area:p3; } #security-checkup .chk-p4{ grid-area:p4; margin-bottom:0; } #security-checkup .chk-ledger{ grid-area:ledger; margin-top:56px; } #security-checkup .chk-steps{ grid-area:steps; grid-template-columns:repeat(4,1fr); gap:24px; align-items:baseline; } #security-checkup .chk-scope{ grid-area:details; margin-top:44px; margin-right:24px; } #security-checkup .chk-proof{ grid-area:proof; margin-top:44px; } } @media(prefers-reduced-motion:reduce){ #security-checkup .chk-ledger-list li, #security-checkup .chk-step-rule{ opacity:1 !important; transform:scaleY(1) !important; } #security-checkup .chk-ledger-list li{ transform:none !important; } #security-checkup .chk-finding{ color:var(--chk-accent) !important; } }