/* ============================================================ NS HOMEPAGE 1.1.0 - Fontes self-hosted (variáveis, subset latin — cobre PT completo) - Scroll-reveal nativo (substitui AOS): conteúdo visível por omissão; só é escondido quando o JS adiciona html.ns-anim - Animações apenas com transform/opacity (compostas) - Contraste AA: --ink-dim #667089 (era #8A93A8), texto do badge #966307, CTA #0F7E39, texto das tags dos pillars #15803D ============================================================ */ /* ── FONTES ── */ @font-face { font-family: 'Space Grotesk'; font-style: normal; font-weight: 400 700; font-display: swap; src: url('fonts/space-grotesk-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'Inter'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/inter-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face { font-family: 'JetBrains Mono'; font-style: normal; font-weight: 400 600; font-display: swap; src: url('fonts/jetbrains-mono-var-latin.woff2') format('woff2'); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ── SCROLL-REVEAL (substitui AOS) ── Sem JS: nada disto se aplica, conteúdo 100% visível. Com JS: ns-homepage.js adiciona .ns-anim ao e revela cada [data-aos] com .ns-in via IntersectionObserver. */ html.ns-anim [data-aos] { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .7s cubic-bezier(.215, .61, .355, 1), transform .7s cubic-bezier(.215, .61, .355, 1); } html.ns-anim [data-aos="fade-down"] { transform: translate3d(0, -24px, 0); } html.ns-anim [data-aos="fade-in"] { transform: none; } html.ns-anim [data-aos].ns-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { html.ns-anim [data-aos] { opacity: 1 !important; transform: none !important; transition: none !important; } } /* Impressão: revelar tudo (o print não faz scroll — era isto que deixava as secções HUD/pillars em branco no PDF da versão AOS) */ @media print { html.ns-anim [data-aos] { opacity: 1 !important; transform: none !important; } .ns-pillar-bar-fill { transform: scaleX(1) !important; } } /* Skip-link e header: agora em ns-header (plugin sitewide). */ /* ============================================================ HERO BANNER ============================================================ */ .ns-banner { --bg: #F8F9FC; --bg-2: #F0F2F7; --panel: #FFFFFF; --line: rgba(0,0,0,0.07); --ink: #0E121B; --ink-soft: #4B536A; --ink-dim: #667089; --blue: #046BD2; --blue-glow: #2E9BFF; --green: #0F7E39; --amber: #F59E0B; --amber-text:#966307; --red: #E0344C; font-family: 'Inter', sans-serif; position: relative; overflow: hidden; background: var(--bg); padding: 86px 0 90px; isolation: isolate; min-height: 560px; display: flex; align-items: center; } .ns-banner * { box-sizing: border-box; } .ns-banner-grid { position: absolute; inset: -10%; background-image: linear-gradient(rgba(4,107,210,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(4,107,210,0.05) 1px, transparent 1px); background-size: 42px 42px; transition: transform .25s ease-out; z-index: 0; will-change: transform; } .ns-banner::before { content: ""; position: absolute; inset: 0; background: radial-gradient(680px 460px at 88% 8%, rgba(46,155,255,0.10), transparent 60%), radial-gradient(520px 380px at 4% 92%, rgba(22,163,74,0.06), transparent 62%); z-index: 0; } .ns-banner-inner { position: relative; z-index: 2; max-width: 1140px; margin: 0 auto; width: 100%; padding: 0 24px; display: grid; grid-template-columns: 1fr; gap: 14px; } .ns-banner-badge { display: inline-flex; align-items: center; gap: 9px; align-self: start; justify-self: start; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--amber-text); background: rgba(245,158,11,0.09); border: 1px solid rgba(245,158,11,0.32); padding: 7px 14px 7px 11px; border-radius: 999px; margin-bottom: 28px; } /* Pulse composto: anel em ::after com transform/opacity (antes animava box-shadow — non-composited) */ .ns-banner-badge .pulse { position: relative; width: 7px; height: 7px; border-radius: 50%; background: var(--amber); flex-shrink: 0; } .ns-banner-badge .pulse::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: rgba(245,158,11,0.5); animation: ns-badge-pulse 1.8s ease-out infinite; } @keyframes ns-badge-pulse { 0% { transform: scale(1); opacity: .55; } 70% { transform: scale(3.6); opacity: 0; } 100% { transform: scale(3.6); opacity: 0; } } .ns-terminal { font-family: 'JetBrains Mono', monospace; font-size: clamp(13px, 1.4vw, 16px); color: var(--ink-soft); background: var(--panel); border: 1px solid var(--line); border-radius: 12px; padding: 16px 20px; margin-bottom: 30px; max-width: 620px; box-shadow: 0 10px 30px -14px rgba(4,107,210,0.12); position: relative; } .ns-terminal-dots { display: flex; gap: 6px; margin-bottom: 12px; } .ns-terminal-dots span { width: 9px; height: 9px; border-radius: 50%; } .ns-terminal-dots span:nth-child(1) { background: var(--red); } .ns-terminal-dots span:nth-child(2) { background: var(--amber); } .ns-terminal-dots span:nth-child(3) { background: var(--green); } .ns-terminal-line { white-space: pre-wrap; line-height: 1.6; min-height: 1.6em; } .ns-terminal-line .err { color: var(--red); font-weight: 600; } .ns-terminal-line .ok { color: var(--green); font-weight: 600; } .ns-terminal-cursor { display: inline-block; width: 8px; height: 1.1em; background: var(--blue); vertical-align: text-bottom; margin-left: 2px; animation: ns-cursor-blink 1s step-end infinite; } @keyframes ns-cursor-blink { 0%,50%{ opacity:1; } 50.01%,100%{ opacity:0; } } .ns-banner-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; line-height: 0.98; letter-spacing: -0.015em; margin: 0 0 22px; max-width: 920px; } .ns-banner-title-line1 { display: block; font-size: clamp(2rem, 4vw, 3.1rem); color: var(--ink-dim); text-decoration: line-through; text-decoration-color: rgba(224,52,76,0.5); text-decoration-thickness: 3px; margin-bottom: 4px; } .ns-banner-title-line2 { display: block; font-size: clamp(2.6rem, 5.4vw, 4.4rem); color: var(--ink); position: relative; } .ns-banner-title-line2 .accent { color: var(--blue); } .ns-glitch { position: relative; display: inline-block; } .ns-glitch::before, .ns-glitch::after { content: attr(data-text); position: absolute; top: 0; left: 0; width: 100%; opacity: 0; } .ns-glitch.is-glitching::before { color: var(--blue-glow); animation: ns-glitch-1 .42s steps(2,end) 1; opacity: .85; } .ns-glitch.is-glitching::after { color: var(--red); animation: ns-glitch-2 .42s steps(2,end) 1; opacity: .85; } @keyframes ns-glitch-1 { 0% { transform: translate(0,0); clip-path: inset(0 0 70% 0); } 50% { transform: translate(-3px,1px); clip-path: inset(30% 0 40% 0); } 100% { transform: translate(0,0); clip-path: inset(80% 0 0 0); opacity: 0; } } @keyframes ns-glitch-2 { 0% { transform: translate(0,0); clip-path: inset(60% 0 0 0); } 50% { transform: translate(3px,-1px); clip-path: inset(10% 0 60% 0); } 100% { transform: translate(0,0); clip-path: inset(0 0 85% 0); opacity: 0; } } .ns-banner-sub { font-size: clamp(1rem, 1.3vw, 1.15rem); color: var(--ink-soft); max-width: 540px; line-height: 1.6; margin: 0 0 38px; } .ns-banner-sub strong { color: var(--ink); font-weight: 600; } .ns-banner-cta-row { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; } .ns-banner-cta { position: relative; display: inline-flex; align-items: center; gap: 11px; font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1rem; color: #fff; background: var(--green); padding: 16px 26px; border-radius: 13px; text-decoration: none; box-shadow: 0 10px 26px -10px rgba(15,126,57,0.55); transition: transform .3s cubic-bezier(.2,.8,.2,1), box-shadow .3s ease, background .3s ease; overflow: hidden; } .ns-banner-cta .ns-arrow { transition: transform .3s ease; flex-shrink: 0; } .ns-banner-cta:hover { transform: translateY(-3px) scale(1.02); background: #0C6A30; box-shadow: 0 16px 36px -10px rgba(15,126,57,0.65); } /* Antes: gap 11px→16px em hover (transição de layout) + seta 3px. Agora só a seta desliza 8px por transform — visual equivalente. */ .ns-banner-cta:hover .ns-arrow { transform: translateX(8px); } /* Brilho composto: antes transitava `left` — agora transform */ .ns-banner-cta::before { content: ""; position: absolute; top: 0; left: 0; width: 60%; height: 100%; background: linear-gradient(120deg, transparent, rgba(255,255,255,0.35), transparent); transform: skewX(-20deg) translateX(-220%); transition: transform .6s ease; } .ns-banner-cta:hover::before { transform: skewX(-20deg) translateX(220%); } .ns-banner-cta-meta { font-family: 'JetBrains Mono', monospace; font-size: 11.5px; color: var(--ink-dim); letter-spacing: 0.04em; } .ns-banner-cta-meta .ok-dot { display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: #16A34A; margin-right: 6px; box-shadow: 0 0 6px rgba(22,163,74,0.6); } @media (prefers-reduced-motion: reduce) { .ns-banner-grid, .ns-terminal-cursor, .ns-banner-badge .pulse::after, .ns-glitch::before, .ns-glitch::after, .ns-banner-cta::before, .ns-banner-cta, .ns-banner-cta .ns-arrow { animation: none !important; transition: none !important; } } @media (max-width: 680px) { .ns-banner { padding: 64px 0 70px; min-height: auto; } .ns-terminal { max-width: 100%; } .ns-banner-cta-row { flex-direction: column; align-items: flex-start; gap: 14px; } } /* ============================================================ HUD SECTION ============================================================ */ .ns-hud { --bg: #F8F9FC; --bg-2: #F0F2F7; --panel: #FFFFFF; --panel-2: #F4F6FA; --line: rgba(0,0,0,0.06); --line-soft: rgba(0,0,0,0.04); --ink: #0E121B; --ink-soft: #4B536A; --ink-dim: #667089; --blue: #046BD2; --blue-glow: #2E9BFF; --blue-light: #E8F1FD; --lime: #22A65A; --amber: #D4880F; --radius: 18px; font-family: 'Inter', sans-serif; color: var(--ink); background: var(--bg); position: relative; overflow: hidden; padding: 100px 0 120px; isolation: isolate; } .ns-hud * { box-sizing: border-box; } .ns-hud::before { content: ""; position: absolute; inset: 0; background: radial-gradient(620px 420px at 82% -8%, rgba(46,155,255,0.08), transparent 60%), radial-gradient(520px 380px at 6% 18%, rgba(4,107,210,0.04), transparent 65%), linear-gradient(180deg, var(--bg) 0%, var(--bg-2) 100%); z-index: 0; } .ns-hud::after { content: ""; position: absolute; inset: 0; background-image: linear-gradient(rgba(0,0,0,0.02) 1px, transparent 1px), linear-gradient(90deg, rgba(0,0,0,0.02) 1px, transparent 1px); background-size: 46px 46px; -webkit-mask-image: radial-gradient(circle at 50% 30%, black, transparent 75%); mask-image: radial-gradient(circle at 50% 30%, black, transparent 75%); z-index: 0; } .ns-hud-inner { position: relative; z-index: 2; max-width: 1140px; margin: 0 auto; padding: 0 24px; } .ns-statusbar { display: flex; align-items: center; justify-content: space-between; padding-bottom: 22px; margin-bottom: 50px; border-bottom: 1px solid var(--line); font-family: 'JetBrains Mono', monospace; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-dim); flex-wrap: wrap; gap: 14px; } .ns-statusbar .seg { display: flex; align-items: center; gap: 8px; } .ns-led { width: 6px; height: 6px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 0 3px rgba(34,166,90,0.18), 0 0 10px rgba(34,166,90,0.6); animation: ns-blink 2.2s ease-in-out infinite; } @keyframes ns-blink { 0%,100%{ opacity:1; } 50%{ opacity:.35; } } .ns-statusbar .scanline { flex: 1; height: 1px; margin: 0 22px; background: var(--line); position: relative; overflow: hidden; min-width: 60px; } /* Varrimento composto: antes animava `left` — agora transform */ .ns-statusbar .scanline::before { content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%; background: linear-gradient(90deg, transparent, var(--blue-glow), transparent); transform: translateX(-100%); animation: ns-sweep 3.6s linear infinite; will-change: transform; } @keyframes ns-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } } .ns-head { display: grid; grid-template-columns: 1.3fr 0.7fr; gap: 50px; margin-bottom: 70px; align-items: end; } .ns-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: 'JetBrains Mono', monospace; font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--blue); margin-bottom: 22px; } .ns-eyebrow::before { content: "//"; color: var(--ink-dim); } .ns-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(2.6rem, 5vw, 4.2rem); line-height: 1.0; letter-spacing: -0.01em; margin: 0; color: var(--ink); } .ns-title .accent { color: var(--blue); text-shadow: 0 0 26px rgba(46,155,255,0.15); } .ns-sub { font-size: 1.02rem; color: var(--ink-soft); max-width: 460px; line-height: 1.65; align-self: end; padding-bottom: 6px; } .ns-sub strong { color: var(--ink); font-weight: 600; } .ns-cats { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .ns-cat { position: relative; border-radius: var(--radius); padding: 28px 22px 24px; background: var(--panel); border: 1px solid var(--line); box-shadow: 0 4px 16px rgba(0,0,0,0.02); overflow: hidden; cursor: pointer; text-decoration: none; color: var(--ink); display: flex; flex-direction: column; gap: 20px; transform-style: preserve-3d; transition: transform .5s cubic-bezier(.16,1,.3,1), border-color .4s ease, box-shadow .4s ease; } .ns-cat:hover { transform: translateY(-8px) rotateX(4deg); border-color: rgba(4,107,210,0.25); box-shadow: 0 16px 40px rgba(4,107,210,0.06); } .ns-cat::before { content: ""; position: absolute; top: -40%; left: -10%; width: 70%; height: 140%; background: linear-gradient(120deg, rgba(4,107,210,0.06), transparent 60%); opacity: 0; transition: opacity .5s ease; pointer-events: none; } .ns-cat:hover::before { opacity: 1; } .ns-hexicon { position: relative; width: 60px; height: 60px; display: flex; align-items: center; justify-content: center; } .ns-hexicon .hex-face { position: absolute; inset: 0; clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); background: linear-gradient(155deg, #F0F4FF, #E6ECFA); border: 1px solid rgba(0,0,0,0.04); box-shadow: inset 0 2px 4px rgba(255,255,255,0.8), inset 0 -6px 10px rgba(0,0,0,0.02), 0 10px 18px -8px rgba(0,0,0,0.04); transition: transform .5s cubic-bezier(.16,1,.3,1), box-shadow .5s ease; } .ns-hexicon .hex-ring { position: absolute; inset: -9px; border-radius: 50%; border: 1px dashed rgba(4,107,210,0.15); animation: ns-spin 9s linear infinite; } @keyframes ns-spin { from{ transform: rotate(0); } to{ transform: rotate(360deg); } } .ns-hexicon svg { position: relative; z-index: 1; width: 34px; height: 34px; filter: drop-shadow(0 3px 5px rgba(15,37,87,0.18)); transition: transform .5s cubic-bezier(.16,1,.3,1); } .ns-cat:hover .hex-face { transform: translateZ(6px) rotateX(-6deg); box-shadow: inset 0 2px 4px rgba(255,255,255,0.9), inset 0 -6px 10px rgba(0,0,0,0.02), 0 16px 26px -10px rgba(4,107,210,0.08); } .ns-cat:hover .ns-hexicon svg { transform: translateZ(10px) translateY(-2px) scale(1.08); } .ns-cat:hover .gpu-fan { animation: ns-fan-spin 0.6s linear infinite; } @keyframes ns-fan-spin { from{ transform: rotate(0deg); } to{ transform: rotate(360deg); } } .ns-cat:hover .case-led { animation: ns-led-pulse 1.1s ease-in-out infinite; } @keyframes ns-led-pulse { 0%,100%{ opacity:.6; } 50%{ opacity:1; } } .ns-cat-name { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1rem; letter-spacing: -0.01em; } .ns-cat-meta { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; letter-spacing: 0.04em; color: var(--ink-dim); margin-top: -10px; } .ns-cat-count { margin-top: auto; display: flex; align-items: center; justify-content: space-between; font-family: 'JetBrains Mono', monospace; font-size: 10px; color: var(--ink-dim); padding-top: 14px; border-top: 1px solid var(--line-soft); } .ns-cat-count .n { color: var(--blue); font-weight: 600; } .ns-cat-count .ns-arrow { flex-shrink: 0; transition: transform .35s ease; } .ns-cat:hover .ns-cat-count .ns-arrow { transform: translateX(3px); color: var(--blue); } .ns-cat--feature { grid-column: span 2; grid-row: span 1; background: linear-gradient(150deg, #F0F6FF, #FAFBFF); border-color: rgba(4,107,210,0.15); padding: 30px 26px; } .ns-cat--feature .ns-hexicon { width: 72px; height: 72px; } .ns-cat--feature .ns-hexicon svg { width: 42px; height: 42px; } .ns-cat--feature .ns-cat-name { font-size: 1.3rem; } .ns-cat--feature::after { content: ""; position: absolute; right: -60px; top: -60px; width: 220px; height: 220px; border-radius: 50%; border: 1px solid rgba(4,107,210,0.08); } @media (max-width: 1100px) { .ns-head { grid-template-columns: 1fr; gap: 24px; } .ns-sub { max-width: 100%; } .ns-cats { grid-template-columns: repeat(3, 1fr); } .ns-cat--feature { grid-column: span 3; } } @media (max-width: 680px) { .ns-hud { padding: 70px 0 90px; } .ns-statusbar { font-size: 10px; } .ns-statusbar .scanline { display: none; } .ns-cats { grid-template-columns: repeat(2, 1fr); } .ns-cat--feature { grid-column: span 2; } } @media (prefers-reduced-motion: reduce) { .ns-led, .ns-statusbar .scanline::before, .hex-ring, .ns-cat, .ns-hexicon svg, .hex-face, .gpu-fan, .case-led, .ns-cat-count .ns-arrow { animation: none !important; transition: none !important; } } /* ============================================================ PILLARS SECTION ============================================================ */ .ns-pillars { --bg: #F8F9FC; --bg-2: #F0F2F7; --panel: #FFFFFF; --line: rgba(0,0,0,0.07); --line-soft: rgba(0,0,0,0.045); --ink: #0E121B; --ink-soft: #4B536A; --ink-dim: #667089; --blue: #046BD2; --blue-glow: #2E9BFF; --green: #16A34A; --green-text:#15803D; --amber: #F59E0B; --radius: 18px; font-family: 'Inter', sans-serif; position: relative; overflow: hidden; background: var(--bg-2); padding: 110px 0 120px; isolation: isolate; } .ns-pillars * { box-sizing: border-box; } .ns-pillars::before { content: ""; position: absolute; inset: 0; background: radial-gradient(560px 360px at 12% 0%, rgba(46,155,255,0.07), transparent 60%), radial-gradient(520px 400px at 92% 100%, rgba(22,163,74,0.05), transparent 62%); z-index: 0; } .ns-pillars-inner { position: relative; z-index: 2; max-width: 1140px; margin: 0 auto; padding: 0 24px; } .ns-pillars-head { margin-bottom: 64px; max-width: 640px; } .ns-pillars-eyebrow { display: inline-flex; align-items: center; gap: 9px; font-family: 'JetBrains Mono', monospace; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--blue); margin-bottom: 16px; } .ns-pillars-eyebrow::before { content: "//"; color: var(--ink-dim); } .ns-pillars-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: clamp(1.9rem, 3vw, 2.5rem); letter-spacing: -0.015em; margin: 0 0 14px; color: var(--ink); } .ns-pillars-sub { font-size: 1rem; color: var(--ink-soft); line-height: 1.6; margin: 0; } .ns-pillars-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 26px; } .ns-pillar:nth-child(1) { margin-top: 0; } .ns-pillar:nth-child(2) { margin-top: 26px; } .ns-pillar:nth-child(3) { margin-top: 0; } .ns-pillar { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 32px 28px 28px; box-shadow: 0 4px 18px rgba(0,0,0,0.025); display: flex; flex-direction: column; transition: transform .5s cubic-bezier(.16,1,.3,1), border-color .4s ease, box-shadow .4s ease; } .ns-pillar:hover { transform: translateY(-8px); border-color: rgba(4,107,210,0.25); box-shadow: 0 20px 44px -16px rgba(4,107,210,0.14); } .ns-pillar::before { content: ""; position: absolute; top: -30%; left: -10%; width: 60%; height: 120%; background: linear-gradient(120deg, rgba(4,107,210,0.05), transparent 60%); opacity: 0; transition: opacity .5s ease; pointer-events: none; } .ns-pillar:hover::before { opacity: 1; } .ns-pillar-head { display: flex; align-items: flex-start; justify-content: space-between; margin-bottom: 22px; } .ns-pillar-icon { position: relative; width: 54px; height: 54px; border-radius: 14px; background: linear-gradient(155deg, #F0F4FF, #E6ECFA); border: 1px solid rgba(0,0,0,0.04); box-shadow: inset 0 2px 4px rgba(255,255,255,0.8), inset 0 -5px 8px rgba(0,0,0,0.02), 0 8px 16px -8px rgba(4,107,210,0.12); display: flex; align-items: center; justify-content: center; } .ns-pillar-icon svg { width: 26px; height: 26px; filter: drop-shadow(0 2px 3px rgba(15,37,87,0.15)); transition: transform .6s cubic-bezier(.4,0,.2,1); animation: ns-breathe 4s ease-in-out infinite; } @keyframes ns-breathe { 0%,100%{ transform: scale(1); } 50%{ transform: scale(1.06); } } .ns-pillar:hover .ns-pillar-icon svg { animation-play-state: paused; transform: scale(1.1) rotate(-3deg); } .ns-pillar-tag { display: inline-flex; align-items: center; gap: 6px; font-family: 'JetBrains Mono', monospace; font-size: 9.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--green-text); background: rgba(22,163,74,0.08); border: 1px solid rgba(22,163,74,0.22); padding: 5px 9px; border-radius: 999px; white-space: nowrap; } .ns-pillar-tag .dot { width: 5px; height: 5px; border-radius: 50%; background: var(--green); box-shadow: 0 0 5px rgba(22,163,74,0.7); animation: ns-tag-blink 2s ease-in-out infinite; } @keyframes ns-tag-blink { 0%,100%{ opacity:1; } 50%{ opacity:.4; } } .ns-pillar-title { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.18rem; letter-spacing: -0.01em; color: var(--ink); margin: 0 0 10px; } .ns-pillar-text { font-size: 0.9rem; color: var(--ink-soft); line-height: 1.62; margin: 0 0 24px; flex: 1; } .ns-pillar-foot { border-top: 1px solid var(--line-soft); padding-top: 18px; } .ns-pillar-status { display: flex; align-items: center; gap: 9px; margin-bottom: 14px; } .ns-pillar-status-label { font-family: 'JetBrains Mono', monospace; font-size: 10.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--blue); } .ns-pillar-bar { position: relative; height: 5px; border-radius: 999px; background: rgba(4,107,210,0.08); overflow: hidden; } /* Barra composta: antes transitava width 0%→100% — agora scaleX */ .ns-pillar-bar-fill { position: absolute; top: 0; left: 0; height: 100%; width: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--blue), var(--blue-glow)); transform: scaleX(0); transform-origin: 0 50%; transition: transform 1.4s cubic-bezier(.16,1,.3,1); } .ns-pillar-bar-fill.is-charged { transform: scaleX(1); } .ns-pillar-bar-fill.is-charged::after { content: ""; position: absolute; top: 0; left: 0; width: 30%; height: 100%; background: linear-gradient(90deg, transparent, rgba(255,255,255,0.65), transparent); transform: translateX(-100%); animation: ns-bar-sweep 2.6s ease-in-out infinite; animation-delay: 1.4s; } @keyframes ns-bar-sweep { 0% { transform: translateX(-100%); } 100% { transform: translateX(333%); } } @media (max-width: 980px) { .ns-pillars-grid { grid-template-columns: 1fr; gap: 20px; } .ns-pillar:nth-child(2) { margin-top: 0; } } @media (max-width: 680px) { .ns-pillars { padding: 80px 0 90px; } } @media (prefers-reduced-motion: reduce) { .ns-pillar, .ns-pillar-icon svg, .ns-pillar-tag .dot, .ns-pillar-bar-fill, .ns-pillar-bar-fill::after { animation: none !important; transition: none !important; } .ns-pillar-bar-fill { transform: scaleX(1) !important; } } /* Header (logo/menu/carrinho/pesquisa): agora em ns-header (plugin sitewide, position:sticky — já reserva o próprio espaço, sem padding-top de compensação aqui). */ /* ============================================================ HOMEPAGE BODY — remover margens padrão ============================================================ */ .ns-homepage-body { margin: 0; padding: 0; } .ns-homepage-body #page, .ns-homepage-body .site, .ns-homepage-body #content, .ns-homepage-body .ast-container, .ns-homepage-body .entry-content { margin: 0 !important; padding: 0 !important; max-width: none !important; width: 100% !important; } /* Responsivo header: agora em ns-header. */