/* ============================================================ BitNR1 — hotsite comercial público Arquivo independente. Tokens equivalentes aos de site/styles.css (mesma paleta e escala), mas sem depender daquele arquivo. ============================================================ */ :root { color-scheme: light; --bg: #F5F7F6; --surface: #FFFFFF; --surface-2: #EDF1F0; --ink: #10262C; --ink-2: #4A5D62; --muted: #7E9094; --line: #D9E1E0; --line-strong: #B9C7C6; --brand: #0E3B47; --brand-2: #155E6E; --brand-ink: #EAF4F3; --brand-ink-2: #A9C4C6; --brand-line: rgba(234,244,243,.16); --accent: #0F8F7A; --accent-ink: #FFFFFF; --accent-soft: #D8F0EA; --focus: #1E7FD8; --shadow: 0 10px 30px rgba(16,38,44,.08); --radius: 14px; --r-sm: 8px; /* Só fontes que já existem no aparelho -- ver o comentário no . */ --font-display: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --font-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", "Roboto Mono", Menlo, Consolas, monospace; --maxw: 1160px; --measure: 66ch; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; --bg: #0C1A1E; --surface: #12262C; --surface-2: #17313A; --ink: #EEF3F2; --ink-2: #B7C6C8; --muted: #86999C; --line: #22393F; --line-strong: #325057; --brand: #071316; --brand-2: #0E3B47; --brand-ink: #EEF3F2; --brand-ink-2: #A9C4C6; --brand-line: rgba(238,243,242,.14); --accent: #35D0B4; --accent-ink: #061114; --accent-soft: #123B37; --shadow: 0 10px 30px rgba(0,0,0,.35); } } :root[data-theme="dark"] { color-scheme: dark; --bg: #0C1A1E; --surface: #12262C; --surface-2: #17313A; --ink: #EEF3F2; --ink-2: #B7C6C8; --muted: #86999C; --line: #22393F; --line-strong: #325057; --brand: #071316; --brand-2: #0E3B47; --brand-ink: #EEF3F2; --brand-ink-2: #A9C4C6; --brand-line: rgba(238,243,242,.14); --accent: #35D0B4; --accent-ink: #061114; --accent-soft: #123B37; --shadow: 0 10px 30px rgba(0,0,0,.35); } *,*::before,*::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font-body); font-size: 17px; line-height: 1.6; -webkit-font-smoothing: antialiased; overflow-x: hidden; } h1,h2,h3,h4 { font-family: var(--font-display); line-height: 1.15; margin: 0; text-wrap: balance; letter-spacing: -.01em; } h1 { font-size: clamp(2.1rem, 5vw, 3.6rem); font-weight: 700; } h2 { font-size: clamp(1.6rem, 3vw, 2.4rem); font-weight: 700; } h3 { font-size: 1.2rem; font-weight: 600; } h4 { font-size: 1.02rem; font-weight: 600; } p { margin: 0; max-width: var(--measure); } p + p { margin-top: .9em; } a { color: var(--accent); } strong { font-weight: 600; } img,svg { max-width: 100%; } :focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; border-radius: 4px; } button { font: inherit; color: inherit; } .mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; } .eyebrow { font-family: var(--font-mono); font-size: .78rem; letter-spacing: .12em; text-transform: uppercase; color: var(--accent); font-weight: 500; } .lead { font-size: 1.1rem; color: var(--ink-2); } .small { font-size: .9rem; color: var(--ink-2); } .note { font-size: .86rem; color: var(--muted); border-left: 3px solid var(--line-strong); padding-left: .8em; margin-top: 1.4em; max-width: var(--measure); } .wrap { width: min(var(--maxw), 100% - 2.5rem); margin-inline: auto; } .grid { display: grid; gap: 1.25rem; } .g2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); } .g3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); } .g4 { grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); } .row { display: flex; gap: 1rem; flex-wrap: wrap; align-items: center; } /* Skip link */ .skip { position: absolute; left: 1rem; top: -3rem; background: var(--accent); color: var(--accent-ink); padding: .6em 1em; border-radius: var(--r-sm); z-index: 100; text-decoration: none; font-weight: 600; transition: top .2s ease; } .skip:focus { top: 1rem; } .btn { display: inline-flex; align-items: center; gap: .5em; border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); padding: .65em 1.15em; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: .95rem; text-decoration: none; transition: transform .15s ease, background .2s, border-color .2s; } .btn:hover { transform: translateY(-1px); border-color: var(--accent); } .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .btn.ghost { background: transparent; } /* ---------- Navegação ---------- */ .progress { position: fixed; top: 0; left: 0; height: 3px; background: var(--accent); width: 0; z-index: 60; transition: width .1s linear; } .nav { position: sticky; top: 0; z-index: 50; backdrop-filter: blur(12px); background: color-mix(in srgb, var(--bg) 82%, transparent); border-bottom: 1px solid var(--line); } .nav .wrap { display: flex; align-items: center; gap: 1rem; min-height: 62px; } .logo { display: flex; align-items: center; gap: .55rem; font-family: var(--font-display); font-weight: 700; font-size: 1.1rem; text-decoration: none; color: var(--ink); } .logo .mark { width: 28px; height: 28px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; align-items: end; } .logo .mark i { display: block; background: var(--accent); border-radius: 2px; height: var(--h); transform-origin: bottom; animation: bar 1.6s ease-in-out infinite; animation-delay: var(--d); } @keyframes bar { 0%,100% { transform: scaleY(1);} 50% { transform: scaleY(.45);} } .logo small { font-family: var(--font-mono); font-weight: 400; color: var(--muted); font-size: .68rem; margin-left: .15rem; } .navlinks { display: flex; gap: .15rem; margin-left: auto; align-items: center; } .navlinks a { color: var(--ink-2); text-decoration: none; font-size: .85rem; padding: .5em .65em; border-radius: 999px; white-space: nowrap; } .navlinks a:hover { background: var(--surface-2); color: var(--ink); } .navlinks-cta { background: var(--accent); color: var(--accent-ink) !important; font-weight: 600; margin-left: .3rem; } .navlinks-cta:hover { background: var(--accent); opacity: .9; } .iconbtn { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--line-strong); background: var(--surface); cursor: pointer; display: grid; place-items: center; flex: none; } .iconbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .menubtn { display: none; } @media (max-width: 900px) { .navlinks { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 0; background: var(--bg); border-bottom: 1px solid var(--line); padding: .6rem 1.25rem 1rem; } .navlinks.show { display: flex; } .navlinks a { padding: .8em .3em; border-radius: 0; border-bottom: 1px solid var(--line); } .navlinks-cta { margin: .6rem 0 0; text-align: center; border-radius: 999px; } .menubtn { display: grid; margin-left: auto; } .nav .wrap { flex-wrap: wrap; position: relative; } } /* ---------- Seções ---------- */ section.sec { padding: clamp(3.5rem, 8vw, 6.5rem) 0; position: relative; } section.sec.dark { background: var(--brand); color: var(--brand-ink); } section.sec.dark .eyebrow { color: var(--accent); } section.sec.dark .lead, section.sec.dark .small { color: var(--brand-ink-2); } section.sec.dark h1, section.sec.dark h2, section.sec.dark h3 { color: var(--brand-ink); } section.sec.alt { background: var(--surface-2); } .sec-head { display: grid; gap: .8rem; margin-bottom: 2.4rem; max-width: 780px; } .sec-head .lead { max-width: 62ch; } .reveal { opacity: 1; transform: none; transition: opacity .6s ease, transform .6s ease; } .js .reveal:not(.in) { opacity: 0; transform: translateY(14px); } @media (prefers-reduced-motion: reduce) { .js .reveal:not(.in) { opacity: 1; transform: none; } html { scroll-behavior: auto; } *,*::before,*::after { animation-duration: .001s !important; transition-duration: .001s !important; } } /* ---------- Hero ---------- */ .hero { padding: clamp(2.6rem, 6vw, 4.5rem) 0 clamp(3rem, 6vw, 4.5rem); } .hero .wrap { display: grid; grid-template-columns: 1.15fr .85fr; gap: 3rem; align-items: center; } .hero h1 { margin-top: .6rem; } .hero h1 em { font-style: normal; color: var(--accent); } .hero .lead { margin-top: 1.1rem; } .hero .cta { margin-top: 1.7rem; } .hero .pill-row { margin-top: 1.8rem; display: flex; gap: .5rem; flex-wrap: wrap; } .pill { font-family: var(--font-mono); font-size: .74rem; border: 1px solid var(--line-strong); padding: .3em .75em; border-radius: 999px; color: var(--ink-2); background: var(--surface); } @media (max-width: 860px) { .hero .wrap { grid-template-columns: 1fr; } } /* Ciclo decorativo do hero — CSS puro, sem canvas/SVG externo */ .hero-cycle { display: flex; justify-content: center; } .hc-ring { --size: min(360px, 82vw); --radius: calc(var(--size) / 2 - 34px); width: var(--size); height: var(--size); border-radius: 50%; border: 1.5px dashed var(--line-strong); position: relative; } .hc-step { position: absolute; top: 50%; left: 50%; width: 84px; margin-left: -42px; margin-top: -16px; text-align: center; font-family: var(--font-mono); font-size: .68rem; letter-spacing: .04em; color: var(--ink-2); text-transform: uppercase; transform: rotate(calc(var(--i) * 51.4286deg)) translate(var(--radius)) rotate(calc(var(--i) * -51.4286deg)); } .hc-step::before { content: ""; display: block; width: 10px; height: 10px; border-radius: 50%; margin: 0 auto .35rem; background: var(--accent); opacity: .35; animation: hc-pulse 8.4s ease-in-out infinite; animation-delay: calc(var(--i) * 1.2s); } @keyframes hc-pulse { 0%, 86% { opacity: .35; transform: scale(1); } 93% { opacity: 1; transform: scale(1.35); } 100% { opacity: .35; transform: scale(1); } } .hc-center { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); text-align: center; display: grid; gap: .2rem; width: 120px; } .hc-center strong { font-family: var(--font-display); font-size: 1.3rem; color: var(--ink); } .hc-center small { font-family: var(--font-mono); font-size: .66rem; color: var(--muted); } @media (prefers-reduced-motion: reduce) { .hc-step::before { animation: none; opacity: .6; } } /* ---------- Cards ---------- */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.4rem; } .card h3, .card h4 { margin-bottom: .5rem; } .card .eyebrow { display: block; margin-bottom: .6rem; } .dark .card { background: rgba(255,255,255,.04); border-color: var(--brand-line); } .kicker { font-family: var(--font-display); font-weight: 700; font-size: 2.3rem; line-height: 1; color: var(--accent); } .check { list-style: none; padding: 0; margin: .5em 0 0; } .check li { position: relative; padding-left: 1.6em; margin: .5em 0; font-size: .92rem; color: var(--ink-2); } .check li::before { content: ""; position: absolute; left: 0; top: .38em; width: 1em; height: 1em; border-radius: 50%; background: var(--accent-soft); } .check li::after { content: ""; position: absolute; left: .3em; top: .56em; width: .32em; height: .55em; border: solid var(--accent); border-width: 0 2px 2px 0; transform: rotate(40deg); } .dark .check li::before { background: rgba(53,208,180,.18); } /* ---------- Problema ---------- */ .problem { display: grid; grid-template-columns: 1fr 1fr; gap: 1.25rem; } .problem .card { display: grid; gap: .6rem; align-content: start; } .quote { font-family: var(--font-display); font-size: 1.3rem; font-weight: 600; line-height: 1.3; } .quote::before { content: "\201C"; color: var(--accent); } .quote::after { content: "\201D"; color: var(--accent); } @media (max-width: 760px) { .problem { grid-template-columns: 1fr; } } /* ---------- Diferenciais ---------- */ .pillars { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; } .pillar .num { font-family: var(--font-mono); color: var(--muted); font-size: .8rem; } @media (max-width: 900px) { .pillars { grid-template-columns: 1fr; } } /* ---------- Canais ---------- */ .channels { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 1.1rem; } .channel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.3rem; } .anon-meter { display: grid; gap: .4rem; margin-top: 1.1rem; } .anon-meter .bar { height: 9px; background: var(--surface-2); border-radius: 999px; overflow: hidden; } .anon-meter .bar i { display: block; height: 100%; background: var(--accent); border-radius: 999px; width: var(--w); } .anon-meter .lbl { display: flex; justify-content: space-between; gap: .5rem; font-family: var(--font-mono); font-size: .74rem; color: var(--ink-2); } /* ---------- Anonimato: passos ---------- */ .anon-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; max-width: 760px; } .anon-steps li { display: grid; grid-template-columns: 40px 1fr; gap: 1rem; align-items: start; } .anon-steps .n { width: 40px; height: 40px; border-radius: 50%; border: 1.5px solid var(--brand-line); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 600; color: var(--accent); } .anon-steps h3 { font-size: 1.05rem; margin-bottom: .25rem; } /* ---------- Ciclo ---------- */ .cycle-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .9rem; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); } .cycle-list li { display: grid; grid-template-columns: 36px 1fr; gap: .9rem; align-items: start; background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm); padding: 1rem; } .cycle-list .cn { width: 36px; height: 36px; border-radius: 50%; background: var(--accent-soft); color: var(--accent); display: grid; place-items: center; font-family: var(--font-mono); font-weight: 700; } /* ---------- FAQ ---------- */ .faq { display: grid; gap: .7rem; max-width: 820px; } .faq details { border: 1px solid var(--line); border-radius: var(--r-sm); background: var(--surface); padding: 0; } .faq summary { cursor: pointer; padding: 1rem 1.2rem; font-family: var(--font-display); font-weight: 600; list-style: none; display: flex; justify-content: space-between; align-items: center; gap: 1rem; } .faq summary::-webkit-details-marker { display: none; } .faq summary::after { content: "+"; font-size: 1.3rem; color: var(--accent); flex: none; } .faq details[open] summary::after { content: "\2013"; } .faq .a { padding: 0 1.2rem 1.1rem; } /* ---------- Contato ---------- */ .cta-final { display: grid; grid-template-columns: 1.15fr 1fr; gap: 2.2rem; align-items: start; } @media (max-width: 820px) { .cta-final { grid-template-columns: 1fr; } } .contact-form { display: grid; gap: .8rem; } .field { display: grid; gap: .3rem; } .field label { font-size: .82rem; font-family: var(--font-mono); color: var(--brand-ink-2); } .field input, .field textarea { font: inherit; padding: .6em .8em; border-radius: var(--r-sm); border: 1.5px solid var(--line-strong); background: var(--surface); color: var(--ink); resize: vertical; } .dark .field input, .dark .field textarea { background: rgba(255,255,255,.05); border-color: var(--brand-line); color: var(--brand-ink); } .field input:focus-visible, .field textarea:focus-visible { outline: 3px solid var(--focus); outline-offset: 1px; } .dark .btn { background: transparent; color: var(--brand-ink); border-color: var(--brand-line); } .dark .btn.primary { background: var(--accent); color: var(--accent-ink); border-color: var(--accent); } .form-status { font-size: .86rem; min-height: 1.2em; color: var(--accent); } /* ---------- Rodapé ---------- */ footer { padding: 2.2rem 0 2.6rem; border-top: 1px solid var(--line); font-size: .84rem; color: var(--muted); } footer .wrap { display: flex; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }