/* ============================================================ MIDNIGHT — Sistema de design do Projeto Meia-Noite assets/css/midnight.css COMO USAR Adicione uma linha na de qualquer página: POR QUE NÃO QUEBRA NADA Toda classe aqui começa com "mn-". Nenhuma página existente usa esse prefixo, então adicionar o link não altera o visual de nada que já está no ar. As páginas antigas só mudam quando você trocar as classes delas, uma de cada vez. As variáveis ficam em .mn-scope, não em :root, para não vazar para páginas que já declaram --accent, --card-bg e afins. ============================================================ */ .mn-scope, .mn-lightbox { /* ---- superfícies (escuro é o padrão da marca) ---- */ --mn-void: #0a0a12; --mn-surface: #14141e; --mn-surface-hi: #1b1b28; --mn-line: rgba(255, 255, 255, 0.08); --mn-line-strong: rgba(255, 255, 255, 0.15); /* ---- texto (branco levemente quente, de propósito) ---- */ --mn-text: #f4f1eb; --mn-muted: rgba(244, 241, 235, 0.66); --mn-faint: rgba(244, 241, 235, 0.42); /* ---- marca ---- */ --mn-beam: var(--mn-accent); --mn-beam-soft: var(--mn-blue-300); --mn-beam-dim: rgba(76, 125, 255, 0.13); --mn-coral: var(--mn-coral-500); /* ---- forma ---- */ --mn-shell: 1120px; --mn-gutter: clamp(20px, 5vw, 52px); --mn-r-btn: 12px; --mn-r-card: 18px; --mn-r-icon: 14px; --mn-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.4); --mn-shadow-lift: 0 14px 30px -12px rgba(0, 0, 0, 0.7); /* ---- movimento ---- */ --mn-ease: cubic-bezier(0.16, 1, 0.3, 1); --mn-fast: 150ms; --mn-normal: 250ms; --mn-slow: 450ms; /* ---- tipografia ---- */ --mn-font: "Archivo", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; --mn-serif: "Instrument Serif", Georgia, serif; --mn-t--1: 0.8rem; --mn-t-0: clamp(1.02rem, 0.99rem + 0.16vw, 1.08rem); --mn-t-1: clamp(1.12rem, 1.05rem + 0.34vw, 1.3rem); --mn-t-2: clamp(1.65rem, 1.35rem + 1.3vw, 2.45rem); --mn-t-3: clamp(2.35rem, 1.8rem + 2.7vw, 4.05rem); } /* Tema claro. Sua theme.js já escreve data-theme no ; basta a página estar dentro de .mn-scope. */ :root[data-theme="light"] .mn-scope, :root[data-theme="light"] .mn-lightbox { --mn-void: #ffffff; --mn-surface: #f7f7fa; --mn-surface-hi: #ffffff; --mn-line: rgba(0, 0, 0, 0.09); --mn-line-strong: rgba(0, 0, 0, 0.16); --mn-text: #14141c; --mn-muted: rgba(20, 20, 28, 0.66); --mn-faint: rgba(20, 20, 28, 0.46); --mn-beam: #2f5fe0; --mn-beam-soft: #1d47bd; --mn-beam-dim: rgba(47, 95, 224, 0.1); --mn-shadow-card: 0 1px 2px rgba(0, 0, 0, 0.06); --mn-shadow-lift: 0 14px 30px -12px rgba(0, 0, 0, 0.18); } /* No claro o botão precisa de texto claro sobre azul escuro. */ :root[data-theme="light"] .mn-btn { color: #ffffff; } /* ============================================================ BASE ============================================================ */ .mn-scope, .mn-scope *, .mn-scope *::before, .mn-scope *::after { box-sizing: border-box; } .mn-scope { background: var(--mn-void); color: var(--mn-text); font-family: var(--mn-font); font-size: var(--mn-t-0); line-height: 1.68; -webkit-font-smoothing: antialiased; } .mn-scope a { color: inherit; } .mn-scope :focus-visible { outline: 2px solid var(--mn-beam); outline-offset: 3px; } .mn-shell { width: 100%; max-width: var(--mn-shell); margin-inline: auto; padding-inline: var(--mn-gutter); } .mn-kicker { display: block; margin-bottom: 14px; font-size: var(--mn-t--1); font-weight: 650; letter-spacing: 0.1em; text-transform: uppercase; color: var(--mn-beam); } .mn-serif { font-family: var(--mn-serif); font-style: italic; font-weight: 400; } .mn-skip { position: absolute; left: -9999px; } .mn-skip:focus { left: 16px; top: 16px; z-index: 100; padding: 10px 16px; color: var(--mn-void); background: var(--mn-beam); border-radius: var(--mn-r-btn); } .mn-ico { width: 1.05rem; height: 1.05rem; flex: none; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; } /* revelação ao rolar — ativada por assets/js/midnight.js */ .mn-scope [data-mn-reveal] { opacity: 0; transform: translateY(18px); } .mn-scope [data-mn-reveal].mn-in { opacity: 1; transform: none; transition: opacity var(--mn-slow) var(--mn-ease), transform var(--mn-slow) var(--mn-ease); } /* ============================================================ BOTÕES ============================================================ */ .mn-btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 16px 28px; font-family: inherit; font-size: var(--mn-t-0); font-weight: 600; text-decoration: none; color: var(--mn-void); background: var(--mn-beam); border: 0; border-radius: var(--mn-r-btn); cursor: pointer; transition: background-color var(--mn-fast) var(--mn-ease), transform var(--mn-fast) var(--mn-ease), box-shadow var(--mn-fast) var(--mn-ease); } .mn-btn:hover:not(:disabled) { background: var(--mn-beam-soft); transform: translateY(-1px); box-shadow: 0 10px 24px -12px rgba(76, 125, 255, 0.9); } .mn-btn:active:not(:disabled) { transform: translateY(0); } .mn-btn:disabled { cursor: progress; opacity: 0.55; } .mn-btn--wide { width: 100%; } .mn-btn--small { padding: 11px 18px; font-size: 0.9rem; color: var(--mn-void); background: var(--mn-text); } .mn-btn--small:hover { background: var(--mn-beam-soft); } .mn-btn--quiet { color: var(--mn-text); background: transparent; border: 1px solid var(--mn-line-strong); } .mn-btn--quiet:hover { background: var(--mn-surface-hi); box-shadow: none; } /* ============================================================ SELO ============================================================ */ .mn-badge { display: inline-flex; align-items: center; gap: 9px; padding: 8px 15px; font-size: var(--mn-t--1); font-weight: 560; color: var(--mn-muted); background: var(--mn-surface); border: 1px solid var(--mn-line-strong); border-radius: 999px; } .mn-badge__dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--mn-coral); } .mn-badge--open .mn-badge__dot { background: var(--mn-beam); } /* ============================================================ BARRA ============================================================ */ .mn-bar { position: sticky; top: 0; z-index: 60; background: color-mix(in srgb, var(--mn-void) 84%, transparent); backdrop-filter: blur(14px); border-bottom: 1px solid var(--mn-line); } .mn-bar__inner { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding-block: 14px; } .mn-bar__mark { display: inline-flex; align-items: center; gap: 10px; font-weight: 650; letter-spacing: -0.02em; text-decoration: none; } .mn-bar__logo { width: 26px; height: 26px; border-radius: 50%; object-fit: cover; } @media (max-width: 720px) { .mn-bar .mn-badge { display: none; } } /* ============================================================ TOPO ============================================================ */ .mn-top { position: relative; padding-block: clamp(48px, 7vw, 90px) clamp(52px, 8vw, 96px); overflow: hidden; } .mn-top::before { content: ""; position: absolute; top: -280px; right: -8%; width: min(820px, 106vw); height: 640px; pointer-events: none; background: radial-gradient( 50% 50% at 50% 50%, var(--mn-beam-dim) 0%, transparent 68% ); } .mn-top__grid { position: relative; z-index: 1; display: grid; gap: clamp(40px, 5.5vw, 64px); grid-template-columns: 1fr; align-items: start; } @media (min-width: 950px) { .mn-top__grid { grid-template-columns: minmax(0, 1.06fr) minmax(370px, 0.94fr); } } .mn-top__badge { margin-bottom: 26px; } .mn-top__title { margin: 0 0 20px; font-size: var(--mn-t-3); font-weight: 640; line-height: 1.03; letter-spacing: -0.035em; text-wrap: balance; } .mn-top__title span { color: var(--mn-beam); } .mn-top__lede { margin: 0 0 30px; max-width: 50ch; font-size: var(--mn-t-1); line-height: 1.58; color: var(--mn-muted); } .mn-facts { display: grid; gap: 15px; margin: 0; padding: 0; max-width: 49ch; list-style: none; } .mn-facts li { display: grid; grid-template-columns: 22px 1fr; gap: 13px; align-items: start; font-size: 0.97rem; line-height: 1.6; color: var(--mn-muted); } .mn-facts .mn-ico { margin-top: 5px; color: var(--mn-beam); } .mn-facts b { color: var(--mn-text); font-weight: 620; } /* ============================================================ FORMULÁRIO ============================================================ */ .mn-join { padding: clamp(26px, 3.2vw, 34px); background: var(--mn-surface); border: 1px solid var(--mn-line-strong); border-radius: var(--mn-r-card); box-shadow: var(--mn-shadow-lift); } .mn-join__head { margin: 0 0 8px; font-size: var(--mn-t-2); font-weight: 640; line-height: 1.08; letter-spacing: -0.03em; } .mn-join__sub { margin: 0 0 24px; font-size: 0.94rem; line-height: 1.58; color: var(--mn-muted); } .mn-field { display: block; margin-bottom: 15px; } .mn-field__label { display: block; margin-bottom: 7px; font-size: 0.79rem; font-weight: 600; color: var(--mn-faint); } .mn-field__input { width: 100%; padding: 15px 16px; font-family: inherit; font-size: var(--mn-t-0); color: var(--mn-text); background: color-mix(in srgb, var(--mn-text) 4%, transparent); border: 1px solid var(--mn-line-strong); border-radius: var(--mn-r-btn); transition: border-color var(--mn-fast) var(--mn-ease), box-shadow var(--mn-fast) var(--mn-ease); } .mn-field__input::placeholder { color: var(--mn-faint); opacity: 0.7; } .mn-field__input:focus { outline: none; border-color: var(--mn-beam); box-shadow: 0 0 0 3px var(--mn-beam-dim); } .mn-field__input[aria-invalid="true"] { border-color: var(--mn-coral); } .mn-field__error { display: block; margin-top: 7px; font-size: 0.8rem; color: var(--mn-coral); } /* honeypot anti-spam: precisa existir no DOM e ser invisível */ .mn-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; } .mn-trust { display: flex; flex-wrap: wrap; gap: 8px 18px; margin-top: 16px; } .mn-trust span { display: inline-flex; align-items: center; gap: 6px; font-size: 0.82rem; color: var(--mn-faint); } .mn-trust .mn-ico { width: 0.9rem; height: 0.9rem; color: var(--mn-beam); } .mn-fine { margin: 14px 0 0; font-size: 0.79rem; line-height: 1.6; color: var(--mn-faint); } .mn-alert { margin: 15px 0 0; padding: 12px 14px; font-size: 0.85rem; line-height: 1.5; color: var(--mn-coral); background: color-mix(in srgb, var(--mn-coral) 10%, transparent); border: 1px solid color-mix(in srgb, var(--mn-coral) 30%, transparent); border-radius: var(--mn-r-btn); } /* confirmação */ .mn-done { padding: clamp(30px, 3.6vw, 40px); text-align: center; background: var(--mn-surface); border: 1px solid color-mix(in srgb, var(--mn-beam) 42%, transparent); border-radius: var(--mn-r-card); box-shadow: var(--mn-shadow-lift); } .mn-done__ring { display: grid; place-items: center; width: 52px; height: 52px; margin: 0 auto 18px; color: var(--mn-beam); background: var(--mn-beam-dim); border-radius: 50%; } .mn-done__ring .mn-ico { width: 1.4rem; height: 1.4rem; } .mn-done__head { margin: 0 0 8px; font-size: var(--mn-t-1); font-weight: 640; } .mn-done__number { display: block; margin: 4px 0 2px; font-size: clamp(2.4rem, 1.7rem + 3.6vw, 3.4rem); font-weight: 300; line-height: 1.05; letter-spacing: -0.045em; font-variant-numeric: tabular-nums; color: var(--mn-beam); } .mn-done__cap { font-size: 0.82rem; color: var(--mn-faint); } .mn-done__note { margin: 18px auto 0; max-width: 36ch; font-size: 0.92rem; line-height: 1.62; color: var(--mn-muted); } /* ============================================================ NÚMEROS ============================================================ */ .mn-numbers { border-top: 1px solid var(--mn-line); border-bottom: 1px solid var(--mn-line); } .mn-numbers__grid { display: grid; grid-template-columns: repeat(2, 1fr); } @media (min-width: 800px) { .mn-numbers__grid { grid-template-columns: repeat(4, 1fr); } } .mn-numbers__cell { padding: clamp(26px, 3.5vw, 36px) 20px; border-left: 1px solid var(--mn-line); } .mn-numbers__cell:first-child { border-left: 0; } @media (max-width: 799px) { .mn-numbers__cell:nth-child(odd) { border-left: 0; } .mn-numbers__cell:nth-child(n + 3) { border-top: 1px solid var(--mn-line); } } .mn-numbers__big { display: block; font-size: clamp(1.8rem, 1.35rem + 1.7vw, 2.4rem); font-weight: 650; line-height: 1.1; letter-spacing: -0.035em; } .mn-numbers__cap { display: block; margin-top: 6px; font-size: 0.86rem; line-height: 1.45; color: var(--mn-faint); } /* ============================================================ SEÇÕES ============================================================ */ .mn-sec { padding-block: clamp(58px, 8vw, 104px); border-top: 1px solid var(--mn-line); } .mn-sec--flat { border-top: 0; } .mn-sec__title { margin: 0 0 12px; max-width: 23ch; font-size: var(--mn-t-2); font-weight: 640; line-height: 1.1; letter-spacing: -0.03em; } .mn-sec__intro { margin: 0 0 clamp(34px, 4.5vw, 54px); max-width: 58ch; color: var(--mn-muted); } /* ============================================================ RECADO ASSINADO ============================================================ */ .mn-note { display: grid; gap: clamp(24px, 3.5vw, 40px); grid-template-columns: 1fr; padding: clamp(28px, 4vw, 44px); background: var(--mn-surface); border: 1px solid var(--mn-line); border-radius: var(--mn-r-card); box-shadow: var(--mn-shadow-card); } @media (min-width: 820px) { .mn-note { grid-template-columns: minmax(0, 1fr) 210px; align-items: center; } } .mn-note__text { margin: 0; font-size: clamp(1.06rem, 1rem + 0.4vw, 1.28rem); line-height: 1.6; letter-spacing: -0.012em; } .mn-note__text em { font-family: var(--mn-serif); font-style: italic; color: var(--mn-beam-soft); } .mn-note__sign { display: flex; align-items: center; gap: 14px; padding-top: 22px; border-top: 1px solid var(--mn-line); } @media (min-width: 820px) { .mn-note__sign { flex-direction: column; align-items: flex-start; gap: 12px; padding-top: 0; padding-left: 32px; border-top: 0; border-left: 1px solid var(--mn-line); } } .mn-note__face { width: 52px; height: 52px; flex: none; display: grid; place-items: center; font-size: 1rem; font-weight: 650; color: var(--mn-beam-soft); background: var(--mn-beam-dim); border-radius: 50%; object-fit: cover; } .mn-note__name { display: block; font-weight: 620; } .mn-note__role { display: block; font-size: 0.85rem; color: var(--mn-faint); } /* ============================================================ CARDS (pilares, para-quem-é) ============================================================ */ .mn-grid3 { display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 760px) { .mn-grid3 { grid-template-columns: repeat(3, 1fr); } } .mn-grid2 { display: grid; gap: 16px; grid-template-columns: 1fr; } @media (min-width: 760px) { .mn-grid2 { grid-template-columns: repeat(2, 1fr); } } .mn-card { padding: clamp(26px, 3vw, 32px); background: var(--mn-surface); border: 1px solid var(--mn-line); border-radius: var(--mn-r-card); box-shadow: var(--mn-shadow-card); transition: transform var(--mn-normal) var(--mn-ease), border-color var(--mn-normal) var(--mn-ease), box-shadow var(--mn-normal) var(--mn-ease); } .mn-card--hover:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--mn-beam) 34%, transparent); box-shadow: var(--mn-shadow-lift); } .mn-card__icon { display: grid; place-items: center; width: 46px; height: 46px; margin-bottom: 20px; color: var(--mn-beam); background: var(--mn-beam-dim); border-radius: var(--mn-r-icon); } .mn-card__icon .mn-ico { width: 1.3rem; height: 1.3rem; } .mn-card__title { margin: 0 0 9px; font-size: var(--mn-t-1); font-weight: 640; line-height: 1.24; letter-spacing: -0.02em; } .mn-card__body { margin: 0; font-size: 0.96rem; line-height: 1.66; color: var(--mn-muted); } .mn-list { display: grid; gap: 14px; margin: 0; padding: 0; list-style: none; } .mn-list li { display: grid; grid-template-columns: 20px 1fr; gap: 12px; align-items: start; font-size: 0.95rem; line-height: 1.6; color: var(--mn-muted); } .mn-list .mn-ico { margin-top: 4px; } .mn-list--yes .mn-ico { color: var(--mn-beam); } .mn-list--no .mn-ico { color: var(--mn-coral); } /* ============================================================ PROVA SOCIAL EM IMAGEM — mosaico de proporção livre O ponto crítico: print de conversa é alto e estreito, print de painel é largo e baixo. Grade de proporção fixa com object-fit cover cortaria justamente o texto que serve de prova. Por isso colunas CSS: cada peça entra na altura natural dela. ============================================================ */ .mn-proofs { columns: 1; column-gap: 16px; } @media (min-width: 620px) { .mn-proofs { columns: 2; } } @media (min-width: 1000px) { .mn-proofs { columns: 3; } } .mn-proof { display: block; width: 100%; margin: 0 0 16px; padding: 0; overflow: hidden; text-align: left; background: var(--mn-surface); border: 1px solid var(--mn-line); border-radius: var(--mn-r-card); box-shadow: var(--mn-shadow-card); cursor: zoom-in; break-inside: avoid; transition: transform var(--mn-normal) var(--mn-ease), border-color var(--mn-normal) var(--mn-ease), box-shadow var(--mn-normal) var(--mn-ease); } .mn-proof:hover { transform: translateY(-3px); border-color: color-mix(in srgb, var(--mn-beam) 34%, transparent); box-shadow: var(--mn-shadow-lift); } /* width/height vêm no HTML: reservam o espaço e evitam o pulo de layout enquanto a imagem carrega. */ .mn-proof img, .mn-proof video { display: block; width: 100%; height: auto; background: var(--mn-surface-hi); } .mn-proof__cap { display: block; padding: 14px 16px; font-size: 0.86rem; line-height: 1.5; color: var(--mn-muted); border-top: 1px solid var(--mn-line); } .mn-proof__cap b { display: block; color: var(--mn-text); font-weight: 620; } .mn-proof--video { cursor: default; } /* lightbox */ .mn-lightbox { position: fixed; inset: 0; z-index: 1200; display: none; place-items: center; padding: clamp(16px, 4vw, 48px); background: rgba(4, 4, 8, 0.92); backdrop-filter: blur(6px); } .mn-lightbox[open], .mn-lightbox.mn-open { display: grid; } .mn-lightbox img { max-width: 100%; max-height: 88vh; border-radius: var(--mn-r-card); object-fit: contain; } .mn-lightbox__close { position: absolute; top: clamp(12px, 3vw, 26px); right: clamp(12px, 3vw, 26px); display: grid; place-items: center; width: 42px; height: 42px; color: #f4f1eb; background: rgba(255, 255, 255, 0.12); border: 0; border-radius: 50%; cursor: pointer; } .mn-lightbox__close:hover { background: rgba(255, 255, 255, 0.22); } .mn-proofs__note { margin: 26px 0 0; font-size: 0.83rem; line-height: 1.6; color: var(--mn-faint); } /* ============================================================ ETAPAS ============================================================ */ .mn-steps { display: grid; gap: 30px; margin: 0; padding: 0; list-style: none; } @media (min-width: 780px) { .mn-steps { grid-template-columns: repeat(3, 1fr); gap: 24px; } } .mn-steps__num { display: grid; place-items: center; width: 40px; height: 40px; margin-bottom: 18px; font-size: 0.9rem; font-weight: 650; color: var(--mn-beam); background: var(--mn-beam-dim); border-radius: var(--mn-r-icon); } .mn-steps li h3 { margin: 0 0 8px; font-size: var(--mn-t-1); font-weight: 640; line-height: 1.24; letter-spacing: -0.02em; } .mn-steps li p { margin: 0; max-width: 34ch; font-size: 0.96rem; line-height: 1.66; color: var(--mn-muted); } /* ============================================================ PERGUNTAS ============================================================ */ .mn-qa { border-bottom: 1px solid var(--mn-line); } .mn-qa:first-of-type { border-top: 1px solid var(--mn-line); } .mn-qa__q { position: relative; padding: 22px 44px 22px 0; font-size: var(--mn-t-1); font-weight: 580; letter-spacing: -0.02em; cursor: pointer; list-style: none; transition: color var(--mn-fast) var(--mn-ease); } .mn-qa__q:hover { color: var(--mn-beam-soft); } .mn-qa__q::-webkit-details-marker { display: none; } .mn-qa__q::after { content: "+"; position: absolute; right: 6px; top: 19px; font-size: 1.4rem; font-weight: 300; color: var(--mn-beam); } .mn-qa[open] .mn-qa__q::after { content: "–"; } .mn-qa__a { margin: 0 0 24px; max-width: 68ch; font-size: 0.97rem; line-height: 1.72; color: var(--mn-muted); } /* ============================================================ CHAMADA FINAL ============================================================ */ .mn-last { position: relative; padding-block: clamp(64px, 8.5vw, 110px); text-align: center; border-top: 1px solid var(--mn-line); overflow: hidden; } .mn-last::before { content: ""; position: absolute; bottom: -340px; left: 50%; transform: translateX(-50%); width: min(880px, 118vw); height: 620px; pointer-events: none; background: radial-gradient( 50% 50% at 50% 50%, var(--mn-beam-dim) 0%, transparent 70% ); } .mn-last__inner { position: relative; z-index: 1; } .mn-last__title { margin: 0 auto 16px; max-width: 19ch; font-size: var(--mn-t-2); font-weight: 650; line-height: 1.08; letter-spacing: -0.032em; } .mn-last__sub { margin: 0 auto 30px; max-width: 48ch; color: var(--mn-muted); } .mn-last .mn-trust { justify-content: center; margin-top: 20px; } /* ============================================================ RODAPÉ ============================================================ */ .mn-foot { padding-block: 32px 46px; border-top: 1px solid var(--mn-line); } .mn-foot__top { display: flex; flex-wrap: wrap; gap: 10px 24px; justify-content: space-between; margin-bottom: 22px; font-size: 0.87rem; color: var(--mn-faint); } .mn-foot__links { display: flex; flex-wrap: wrap; gap: 18px; } .mn-foot__links a { text-decoration: none; } .mn-foot__links a:hover { color: var(--mn-beam-soft); } .mn-foot__legal { margin: 0; max-width: 78ch; font-size: 0.78rem; line-height: 1.7; color: var(--mn-faint); opacity: 0.8; } /* ============================================================ MOVIMENTO REDUZIDO ============================================================ */ @media (prefers-reduced-motion: reduce) { .mn-scope [data-mn-reveal] { opacity: 1; transform: none; } .mn-scope *, .mn-scope *::before, .mn-scope *::after { transition-duration: 0.01ms !important; animation-duration: 0.01ms !important; } }