/* ================================================================== RPassomato Informática — folha de estilos do site institucional Usada por: index.html Suporta modo claro/escuro automático (prefers-color-scheme) e forçado via atributo data-theme="dark" | "light" na tag . ================================================================== */ /* ============================================================ TOKENS Paleta derivada da identidade já existente (login GLPI): laranja de marca + grafite + base clara neutra. ============================================================ */ :root{ --paper: #F8F6F2; --paper-raised: #FFFFFF; --paper-tint: #F1ECE4; --ink: #23262B; --ink-soft: #5C6570; --ink-faint: #8B929B; --line: #E4DFD5; --line-strong: #D3CCBE; --accent: #E8720B; --accent-strong: #C4590A; --accent-soft: #FCE7D2; --accent-ink: #7A3A05; --tool-support: #E8720B; --tool-support-soft: #FCE7D2; --tool-monitor: #2E7D6B; --tool-monitor-soft: #DCEEE9; --tool-vault: #4A5578; --tool-vault-soft: #E4E6EF; --tool-network: #2F6FA8; --tool-network-soft: #DCE8F3; --ok: #2E7D6B; /* dark-mode duplicate block below repeats these three tool tokens */ --radius-sm: 10px; --radius-md: 16px; --radius-lg: 22px; --shadow-card: 0 1px 2px rgba(35,38,43,0.04), 0 8px 24px -12px rgba(35,38,43,0.12); --shadow-raised: 0 4px 10px rgba(35,38,43,0.06), 0 20px 40px -20px rgba(35,38,43,0.22); --font-display: 'Sora', 'Segoe UI', system-ui, sans-serif; --font-body: 'Public Sans', 'Segoe UI', system-ui, sans-serif; --font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace; } @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --paper: #1C1E22; --paper-raised: #24272C; --paper-tint: #2A2D32; --ink: #F1EFEA; --ink-soft: #ABB1B9; --ink-faint: #767D86; --line: #34373D; --line-strong: #40444B; --accent: #F2903A; --accent-strong: #FFAB5E; --accent-soft: #3A2A1A; --accent-ink: #FFCE9C; --tool-support: #F2903A; --tool-support-soft: #3A2A1A; --tool-monitor: #4FAE9A; --tool-monitor-soft: #1C3430; --tool-vault: #8891C2; --tool-vault-soft: #2A2D45; --tool-network: #6BA3D6; --tool-network-soft: #1F2E3D; --ok: #4FAE9A; --shadow-card: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.5); --shadow-raised: 0 4px 10px rgba(0,0,0,0.3), 0 20px 44px -20px rgba(0,0,0,0.6); } } :root[data-theme="dark"]{ --paper: #1C1E22; --paper-raised: #24272C; --paper-tint: #2A2D32; --ink: #F1EFEA; --ink-soft: #ABB1B9; --ink-faint: #767D86; --line: #34373D; --line-strong: #40444B; --accent: #F2903A; --accent-strong: #FFAB5E; --accent-soft: #3A2A1A; --accent-ink: #FFCE9C; --tool-support: #F2903A; --tool-support-soft: #3A2A1A; --tool-monitor: #4FAE9A; --tool-monitor-soft: #1C3430; --tool-vault: #8891C2; --tool-vault-soft: #2A2D45; --tool-network: #6BA3D6; --tool-network-soft: #1F2E3D; --ok: #4FAE9A; --shadow-card: 0 1px 2px rgba(0,0,0,0.3), 0 8px 24px -12px rgba(0,0,0,0.5); --shadow-raised: 0 4px 10px rgba(0,0,0,0.3), 0 20px 44px -20px rgba(0,0,0,0.6); } *{ box-sizing: border-box; } html{ scroll-behavior: smooth; } body{ margin:0; background: var(--paper); color: var(--ink); font-family: var(--font-body); font-size: 16px; line-height: 1.6; -webkit-font-smoothing: antialiased; } img{ max-width:100%; display:block; } a{ color: inherit; } h1,h2,h3,h4{ font-family: var(--font-display); margin: 0; text-wrap: balance; letter-spacing: -0.01em; } p{ margin:0; } .container{ width: 100%; max-width: 1180px; margin: 0 auto; padding: 0 24px; } .eyebrow{ font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent-strong); display: inline-flex; align-items: center; gap: 10px; } .eyebrow::before{ content:""; width: 18px; height: 1px; background: var(--accent); } @media (prefers-reduced-motion: no-preference){ .reveal{ opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; } .reveal.is-visible{ opacity: 1; transform: none; } } /* ---------- Header ---------- */ header{ position: sticky; top: 0; z-index: 40; background: color-mix(in srgb, var(--paper) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--line); } .nav{ display:flex; align-items:center; justify-content:space-between; gap: 20px; height: 76px; } .brand{ display:flex; align-items:baseline; gap: 8px; text-decoration:none; color: var(--ink); } .brand-mark{ font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -0.02em; } .brand-mark span{ color: var(--accent); } .brand-tag{ font-family: var(--font-mono); font-size: 10px; letter-spacing: 0.16em; color: var(--ink-faint); text-transform: uppercase; display:none; } @media (min-width:560px){ .brand-tag{ display:inline; } } nav.links{ display:none; align-items:center; gap: 32px; font-size: 14.5px; font-weight: 500; } nav.links a{ text-decoration:none; color: var(--ink-soft); position:relative; padding: 4px 0; } nav.links a:hover{ color: var(--ink); } @media (min-width: 880px){ nav.links{ display:flex; } } .btn{ font-family: var(--font-body); font-weight: 600; font-size: 14.5px; border-radius: 999px; padding: 11px 20px; border: 1px solid transparent; cursor: pointer; text-decoration:none; display:inline-flex; align-items:center; gap: 8px; white-space: nowrap; transition: transform .15s ease, box-shadow .15s ease, background .15s ease, border-color .15s ease; } .btn:focus-visible{ outline: 2px solid var(--accent); outline-offset: 2px; } .btn-primary{ background: var(--accent); color: #fff; } .btn-primary:hover{ background: var(--accent-strong); transform: translateY(-1px); } .btn-ghost{ background: transparent; border-color: var(--line-strong); color: var(--ink); } .btn-ghost:hover{ border-color: var(--accent); color: var(--accent-strong); } .btn-sm{ padding: 8px 14px; font-size: 13.5px; } .menu-toggle{ display:inline-flex; background:none; border:1px solid var(--line-strong); border-radius: 10px; padding: 8px; cursor:pointer; color: var(--ink); } @media (min-width: 880px){ .menu-toggle{ display:none; } } /* Abaixo de 480px o botão "Acessar ferramentas" some do cabeçalho (o mesmo destino continua acessível pelo menu ☰) para não estourar a largura da tela em aparelhos pequenos. */ @media (max-width: 479px){ .nav-cta{ display:none; } } .mobile-panel{ display:none; border-top: 1px solid var(--line); padding: 16px 24px 22px; flex-direction:column; gap: 14px; font-size: 15px; } .mobile-panel.open{ display:flex; } .mobile-panel a{ text-decoration:none; color: var(--ink-soft); } @media (min-width: 880px){ .mobile-panel{ display:none !important; } } /* ---------- Hero ---------- */ .hero{ padding: 64px 0 76px; } .hero-grid{ display:grid; grid-template-columns: 1fr; gap: 48px; align-items:center; } @media (min-width: 960px){ .hero-grid{ grid-template-columns: 1.05fr 0.95fr; gap: 40px; } } .hero h1{ font-size: clamp(34px, 5vw, 52px); font-weight: 700; line-height: 1.08; margin: 18px 0 20px; } .hero p.lede{ font-size: 17.5px; color: var(--ink-soft); max-width: 46ch; margin-bottom: 30px; } .hero-ctas{ display:flex; flex-wrap:wrap; gap: 14px; margin-bottom: 40px; } .stat-strip{ display:grid; grid-template-columns: repeat(2,auto); gap: 20px 40px; } @media (min-width:520px){ .stat-strip{ grid-template-columns: repeat(4,auto); } } .stat{ display:flex; flex-direction:column; gap: 2px; } .stat b{ font-family: var(--font-mono); font-variant-numeric: tabular-nums; font-size: 22px; font-weight: 600; color: var(--ink); } .stat span{ font-size: 12.5px; color: var(--ink-faint); } /* Hero visual */ .hero-visual{ position:relative; padding: 30px 14px 46px; } .tech-grid{ position:absolute; inset:0; background-image: radial-gradient(var(--line-strong) 1px, transparent 1px); background-size: 20px 20px; -webkit-mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 40%, transparent 78%); mask-image: radial-gradient(ellipse 85% 75% at 50% 45%, #000 40%, transparent 78%); opacity: 0.55; pointer-events:none; } .net-card{ position:relative; border-radius: var(--radius-lg); background: var(--paper-raised); border: 1px solid var(--line); box-shadow: var(--shadow-raised); overflow:hidden; aspect-ratio: 4/3.1; } .net-card svg{ width:100%; height:100%; display:block; } .card-badge{ position:absolute; top:14px; right:14px; display:inline-flex; align-items:center; gap:7px; font-family: var(--font-mono); font-size: 11.5px; font-weight: 600; letter-spacing: 0.03em; color: var(--ink-soft); background: color-mix(in srgb, var(--paper-raised) 82%, transparent); backdrop-filter: blur(6px); border: 1px solid var(--line); border-radius: 999px; padding: 6px 12px 6px 10px; } #flowGroup{ stroke-dashoffset: 0; } @media (prefers-reduced-motion: no-preference){ #flowGroup path{ animation: flowDash 2.4s linear infinite; } #pulseGroup circle{ animation: pulseRing 2.6s ease-out infinite; transform-origin: center; transform-box: fill-box; } #pulseGroup circle:last-child{ animation-delay: 1.1s; } } @keyframes flowDash{ to{ stroke-dashoffset: -28; } } @keyframes pulseRing{ 0%{ transform: scale(0.85); opacity: 0.6; } 70%{ opacity: 0; } 100%{ transform: scale(1.6); opacity: 0; } } .status-float{ position:absolute; left: 50%; bottom: -26px; transform: translateX(-50%); width: min(88%, 320px); background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: 16px 18px; } .status-float h4{ font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 600; margin-bottom: 10px; } .status-row{ display:flex; align-items:center; justify-content:space-between; padding: 6px 0; font-size: 13.5px; color: var(--ink-soft); } .status-row + .status-row{ border-top: 1px solid var(--line); } .dot{ width:7px; height:7px; border-radius:50%; background: var(--ok); display:inline-block; margin-right:8px; box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 18%, transparent); } section{ padding: 88px 0; } section.tight{ padding-top: 0; } /* ---------- Diferenciais ---------- */ .diff-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(220px,1fr)); gap: 1px; background: var(--line); border: 1px solid var(--line); border-radius: var(--radius-md); overflow:hidden; margin-top: 40px; } .diff-item{ background: var(--paper-raised); padding: 28px 24px; } .diff-item b{ display:block; font-family: var(--font-mono); font-size: 26px; color: var(--accent-strong); margin-bottom: 6px; } .diff-item span{ font-size: 14px; color: var(--ink-soft); } /* ---------- Section head ---------- */ .section-head{ max-width: 640px; margin-bottom: 20px; } .section-head h2{ font-size: clamp(26px,3.4vw,34px); margin: 14px 0 12px; } .section-head p{ color: var(--ink-soft); font-size: 15.5px; } /* ---------- Vídeo ---------- */ .video-section-grid{ display:grid; grid-template-columns: 1fr; gap: 40px; align-items:center; } @media (min-width: 860px){ .video-section-grid{ grid-template-columns: 1.6fr 0.4fr; gap: 56px; } } .video-frame{ justify-self:center; width: min(100%, 240px); aspect-ratio: 9/16; border-radius: var(--radius-lg); background: var(--ink); border: 1px solid var(--line); box-shadow: var(--shadow-raised); overflow:hidden; } .video-frame video{ width:100%; height:100%; display:block; object-fit: cover; background: var(--ink); } /* Em tela cheia (mobile), volta pra "contain" pra não cortar as bordas do vídeo — sem isso o navegador mantém object-fit:cover e corta os lados do vídeo em telas com proporção diferente de 9:16. */ .video-frame video:fullscreen, .video-frame video:-webkit-full-screen{ object-fit: contain; } /* ---------- Serviços ---------- */ .service-group{ margin-top: 48px; } .service-group:first-of-type{ margin-top: 40px; } .service-group-label{ font-family: var(--font-mono); font-size: 12px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 16px; padding-bottom: 12px; border-bottom: 1px solid var(--line); } .services-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(260px,1fr)); gap: 20px; } .service-card{ background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-md); padding: 26px 24px; box-shadow: var(--shadow-card); transition: transform .18s ease, border-color .18s ease; } .service-card:hover{ transform: translateY(-3px); border-color: var(--line-strong); } .service-icon{ width: 42px; height:42px; border-radius: 12px; background: var(--accent-soft); color: var(--accent-strong); display:flex; align-items:center; justify-content:center; margin-bottom: 16px; } .service-card h3{ font-size: 17px; font-weight: 700; margin-bottom: 8px; } .service-card p{ font-size: 14px; color: var(--ink-soft); } /* ---------- Central de Ferramentas ---------- */ #ferramentas{ background: var(--paper-tint); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .tools-grid{ display:grid; grid-template-columns: repeat(auto-fit,minmax(280px,1fr)); gap: 22px; margin-top: 44px; } .tool-card{ background: var(--paper-raised); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 30px 26px 26px; box-shadow: var(--shadow-card); display:flex; flex-direction:column; text-decoration:none; color: var(--ink); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; border-top: 3px solid var(--tool-color, var(--accent)); position:relative; } .tool-card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-raised); border-color: var(--line-strong); } .tool-icon{ width: 50px; height: 50px; border-radius: 14px; background: var(--tool-soft, var(--accent-soft)); color: var(--tool-color, var(--accent)); display:flex; align-items:center; justify-content:center; margin-bottom: 20px; } .tool-card h3{ font-size: 19px; font-weight: 700; margin-bottom: 8px; display:flex; align-items:center; gap:8px; } .tool-card p.desc{ font-size: 14.5px; color: var(--ink-soft); margin-bottom: 22px; flex:1; } .tool-cta{ font-family: var(--font-mono); font-size: 12.5px; font-weight: 600; letter-spacing: 0.04em; color: var(--tool-color, var(--accent)); display:flex; align-items:center; gap: 6px; } .tool-card:hover .tool-cta svg{ transform: translateX(3px); } .tool-cta svg{ transition: transform .15s ease; } .tool-note{ font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); position:absolute; top: 14px; right: 16px; letter-spacing: 0.06em; } /* ---------- CTA band ---------- */ .cta-band{ background: var(--ink); color: var(--paper); border-radius: var(--radius-lg); padding: 48px; display:flex; flex-wrap:wrap; gap: 24px; align-items:center; justify-content:space-between; } .cta-band h3{ font-size: 24px; color:#fff; margin-bottom: 6px; } .cta-band p{ color: #B7BCC4; font-size: 14.5px; } :root[data-theme="dark"] .cta-band, @media (prefers-color-scheme:dark){ } /* ---------- Footer ---------- */ footer{ border-top: 1px solid var(--line); padding: 52px 0 30px; } .footer-grid{ display:grid; grid-template-columns: 1fr; gap: 36px; margin-bottom: 36px; } @media (min-width: 720px){ .footer-grid{ grid-template-columns: 1.1fr 0.8fr 0.9fr 1fr; } } .footer-grid h4{ font-family: var(--font-mono); font-size: 11.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 14px; font-weight:600; } .footer-grid ul{ list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:10px; } .footer-grid a{ text-decoration:none; color: var(--ink-soft); font-size: 14px; } .footer-grid a:hover{ color: var(--accent-strong); } .footer-bottom{ display:flex; flex-wrap:wrap; gap: 12px; align-items:center; justify-content:space-between; border-top: 1px solid var(--line); padding-top: 22px; font-size: 13px; color: var(--ink-faint); }