/* Fonts (mantém proximidade do site antigo) */ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@600;700&family=Poppins:wght@300;400;500;600;700&display=swap'); :root { /* Paleta preservada do site antigo */ --it-accent: #11b5e6; --it-navy: #002e5b; --it-slate: #2c394c; /* Tokens de texto */ --it-text: #637281; --it-muted: #90a2bc; /* Radius */ --radius-xl: 28px; --radius-lg: 22px; --radius-md: 16px; /* Shadows */ --shadow-soft: 0 16px 50px rgba(13, 23, 40, 0.12); --shadow-hover: 0 22px 70px rgba(13, 23, 40, 0.18); /* Glass */ --glass-bg: rgba(255, 255, 255, .78); --glass-border: rgba(0, 46, 91, .10); --glass-dark-bg: rgba(11, 18, 32, .78); --glass-dark-border: rgba(255, 255, 255, .18); /* Base */ --text: rgba(0, 46, 91, .92); --text-soft: rgba(0, 46, 91, .72); --text-softer: rgba(0, 46, 91, .62); } /* =================================================== Base + Background abstrato =================================================== */ html, body { height: 100%; } body { margin: 0; min-height: 100vh; color: var(--text); background: #ffffff; overflow-x: hidden; font-family: Poppins, ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, "Apple Color Emoji", "Segoe UI Emoji"; } body::before { content: ""; position: fixed; inset: -22vmax; /* expande para cobrir rolagem/zoom */ z-index: -2; background: conic-gradient(from 210deg at 55% 45%, rgba(255, 255, 255, .34), rgba(147, 193, 235, 0.829), rgba(255, 255, 255, .20), rgba(147, 193, 235, 0.836), rgba(255, 255, 255, .30)); filter: blur(90px) saturate(125%); transform: translate3d(0, 0, 0); background-repeat: no-repeat; background-size: cover; } /* Vinheta para contraste e legibilidade */ body::after { content: ""; position: fixed; inset: 0; z-index: -1; background: radial-gradient(80% 65% at 50% 25%, rgba(255, 255, 255, 0.479), rgba(147, 193, 235, 0)), linear-gradient(180deg, rgba(147, 193, 235, 0), rgba(255, 255, 255, 0.315)); pointer-events: none; } /* =================================================== Tema escuro (usar em ) =================================================== */ body.theme-dark { color: rgba(255, 255, 255, .92); background: #050b12; } body.theme-dark::before { background: conic-gradient(from 210deg at 55% 45%, rgba(17, 181, 230, .34), rgba(0, 46, 91, .55), rgba(17, 181, 230, .20), rgba(0, 46, 91, .60), rgba(17, 181, 230, .30)); } body.theme-dark::after { background: radial-gradient(80% 65% at 50% 25%, rgba(0, 0, 0, .25), rgba(0, 0, 0, .75)), linear-gradient(180deg, rgba(0, 0, 0, .38), rgba(0, 0, 0, .78)); } /* =================================================== Glass primitives =================================================== */ .glass { background: var(--glass-bg); border: 1px solid var(--glass-border); box-shadow: var(--shadow-soft); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-radius: var(--radius-xl); } .glass-dark { background: var(--glass-dark-bg); border: 1px solid var(--glass-dark-border); box-shadow: 0 24px 80px rgba(0, 0, 0, .28); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); border-radius: var(--radius-xl); color: rgba(255, 255, 255, .92); } @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .glass, .glass-dark { background: rgba(255, 255, 255, .88); } .glass-dark { background: rgba(12, 18, 32, .82); } } /* ===== Extra (Ferramenta / tema escuro) ===== */ .glass-strong { background: rgba(255, 255, 255, .14); } body.theme-dark .glass { background: rgba(255, 255, 255, .10); border-color: rgba(255, 255, 255, .16); box-shadow: 0 20px 60px rgba(0, 0, 0, .45); } body.theme-dark .glass-strong { background: rgba(255, 255, 255, .14); } .nav-glass { background: rgba(8, 16, 26, .55); border-bottom: 1px solid rgba(255, 255, 255, .10); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .brand-dot { width: .6rem; height: .6rem; border-radius: 999px; background: var(--it-accent); box-shadow: 0 0 0 .35rem rgba(17, 181, 230, .16); display: inline-block; } .text-muted-strong { color: rgba(255, 255, 255, .70) !important; } .kicker { letter-spacing: .18em; text-transform: uppercase; font-size: .78rem; } .feature { height: 100%; padding: 1.25rem; } .feature .icon { width: 42px; height: 42px; display: grid; place-items: center; border-radius: 14px; background: rgba(17, 181, 230, .14); border: 1px solid rgba(17, 181, 230, .22); color: rgba(255, 255, 255, .92); } /* =================================================== Typography =================================================== */ .it-eyebrow { letter-spacing: .14em; text-transform: uppercase; font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; font-weight: 700; font-size: .78rem; opacity: .92; } .it-text { color: rgba(0, 46, 91, .78); } .it-muted { color: rgba(0, 46, 91, .72); } .it-muted-2 { color: rgba(0, 46, 91, .62); } .text-soft { color: rgba(0, 46, 91, .72) !important; } .text-softer { color: rgba(0, 46, 91, .62) !important; } .section-pad { padding: 70px 0; } .section-title { letter-spacing: -0.02em; font-weight: 650; } /* Headings */ h1, h2, h3, h4, h5, h6 { font-family: Poppins, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; color: var(--it-navy); letter-spacing: -0.02em; } body.theme-dark h1, body.theme-dark h2, body.theme-dark h3, body.theme-dark h4, body.theme-dark h5, body.theme-dark h6 { color: rgba(255, 255, 255, .96); } /* =================================================== Buttons =================================================== */ .btn-pill { border-radius: 999px; } .btn-it-primary { --bs-btn-bg: var(--it-accent); --bs-btn-border-color: var(--it-accent); --bs-btn-hover-bg: #0ea9d6; --bs-btn-hover-border-color: #0ea9d6; --bs-btn-active-bg: #0b9cc6; --bs-btn-active-border-color: #0b9cc6; --bs-btn-color: #ffffff; --bs-btn-hover-color: #ffffff; box-shadow: 0 14px 30px rgba(17, 181, 230, .26); } .btn-it-outline-primary { color: var(--it-navy); background-color: var(--it-navy); border-color: var(--it-accent); --bs-btn-color: var(--it-navy); --bs-btn-bg: var(--it-navy); --bs-btn-border-color: var(--it-accent); --bs-btn-hover-color: #ffffff; --bs-btn-hover-bg: #0ea9d6; --bs-btn-hover-border-color: #0ea9d6; --bs-btn-active-color: #ffffff; --bs-btn-active-bg: #0ea9d6; --bs-btn-active-border-color: #0ea9d6; box-shadow: 0 14px 30px rgba(17, 181, 230, .26) !important; } .btn-it-ghost { --bs-btn-color: var(--it-navy); --bs-btn-border-color: rgba(0, 46, 91, .18); --bs-btn-hover-bg: rgba(0, 46, 91, .06); --bs-btn-hover-border-color: rgba(0, 46, 91, .26); --bs-btn-active-bg: rgba(0, 46, 91, .08); --bs-btn-active-border-color: rgba(0, 46, 91, .30); } .btn-it-ghost-invert { --bs-btn-color: rgba(255, 255, 255, .92); --bs-btn-border-color: rgba(255, 255, 255, .28); --bs-btn-hover-bg: rgba(255, 255, 255, .10); --bs-btn-hover-border-color: rgba(255, 255, 255, .40); --bs-btn-active-bg: rgba(255, 255, 255, .14); --bs-btn-active-border-color: rgba(255, 255, 255, .46); } /* Variante para CTA em tema escuro (Ferramenta/Logins) */ .btn-brand { --bs-btn-bg: var(--it-accent); --bs-btn-border-color: rgba(17, 181, 230, .40); --bs-btn-hover-bg: #17c2f1; --bs-btn-hover-border-color: rgba(17, 181, 230, .55); --bs-btn-color: #06202c; --bs-btn-hover-color: #06202c; box-shadow: 0 10px 24px rgba(17, 181, 230, .22); } .btn-ghost { --bs-btn-color: rgba(255, 255, 255, .92); --bs-btn-border-color: rgba(255, 255, 255, .20); --bs-btn-hover-bg: rgba(255, 255, 255, .10); --bs-btn-hover-border-color: rgba(255, 255, 255, .28); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } /* =================================================== Navbar (glass) =================================================== */ .it-navbar { transition: transform .25s ease, background-color .25s ease, box-shadow .25s ease, border-color .25s ease; background: rgba(255, 255, 255, .82); border-bottom: 1px solid rgba(0, 46, 91, .12); backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); } .it-navbar.scrolled { background: rgba(255, 255, 255, .94); box-shadow: 0 12px 30px rgba(13, 23, 40, .10); border-bottom-color: rgba(0, 46, 91, .16); } .brand-mark { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 10px; background: rgba(17, 181, 230, .18); border: 1px solid rgba(17, 181, 230, .32); box-shadow: 0 14px 30px rgba(17, 181, 230, .16); margin-right: 10px; } .navbar-logo { display: block; height: 44px; width: auto; object-fit: contain; } .brand-tag { display: block; font-size: .72rem; color: rgba(255, 255, 255, .62); font-weight: 500; letter-spacing: .02em; margin-top: -2px; } @media (max-width: 768px) { .navbar-logo { height: 36px; } } .it-nav-link { color: rgba(0, 46, 91, .84) !important; border-radius: 14px; padding: .55rem .85rem !important; transition: background-color .18s ease, color .18s ease; } .it-nav-link:hover, .it-nav-link:focus { background: rgba(0, 46, 91, .08); color: rgba(0, 46, 91, .96) !important; } .it-nav-link.active { background: rgba(17, 181, 230, .14); border: 1px solid rgba(17, 181, 230, .22); color: rgba(0, 46, 91, .96) !important; } .dropdown-menu { border-radius: 18px; border: 1px solid rgba(255, 255, 255, .55); box-shadow: var(--shadow-soft); backdrop-filter: blur(18px) saturate(160%); -webkit-backdrop-filter: blur(18px) saturate(160%); background: rgba(255, 255, 255, .78); overflow: hidden; } .dropdown-item { padding: .7rem 1rem; } /* =================================================== Hero =================================================== */ .hero { position: relative; padding-top: 104px; /* navbar */ padding-bottom: 54px; } .hero .display-5, .hero .display-hero { letter-spacing: -0.03em; } .hero .lead { color: rgba(0, 46, 91, .78); max-width: 52ch; } body.theme-dark .hero .lead { color: rgba(255, 255, 255, .78); } .hero-pills .pill { display: inline-flex; align-items: center; gap: .5rem; padding: .55rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .72); border: 1px solid rgba(0, 46, 91, .12); color: rgba(0, 46, 91, .74); font-size: .9rem; backdrop-filter: blur(16px) saturate(160%); -webkit-backdrop-filter: blur(16px) saturate(160%); } body.theme-dark .hero-pills .pill { background: rgba(255, 255, 255, .08); border-color: rgba(255, 255, 255, .16); color: rgba(255, 255, 255, .80); } /* =================================================== Service tiles =================================================== */ .service-tile { position: relative; overflow: hidden; height: 100%; border-radius: var(--radius-xl); transform: translateZ(0); transition: transform .22s ease, box-shadow .22s ease, border-color .22s ease; } .service-tile .tile-inner { padding: 26px; min-height: 320px; } .service-tile:hover { transform: translateY(-4px); box-shadow: var(--shadow-hover); border-color: rgba(17, 181, 230, .22); } .service-kicker, .svc-kicker { display: inline-flex; align-items: center; gap: .55rem; padding: .38rem .7rem; border-radius: 999px; background: rgba(17, 181, 230, .12); border: 1px solid rgba(17, 181, 230, .22); color: rgba(0, 46, 91, .90); font-weight: 650; font-size: .82rem; } .service-title, .svc-title { font-weight: 650; letter-spacing: -0.02em; margin: 14px 0 6px; } .svc-title { font-weight: 700; margin-bottom: 8px; } .service-desc, .svc-lead { color: rgba(0, 46, 91, .78); max-width: 60ch; margin-bottom: 18px; } .svc-lead { font-size: 1.08rem; margin-bottom: 0; } .service-cta { display: inline-flex; align-items: center; gap: .4rem; color: var(--it-navy); font-weight: 600; text-decoration: none; opacity: .92; } .service-cta:hover { color: var(--it-navy); text-decoration: underline; } .service-art, .orb { position: absolute; inset: auto -20% -35% auto; width: 420px; aspect-ratio: 1 / 1; border-radius: 50%; opacity: .9; transform: rotate(12deg); pointer-events: none; } .orb { width: 520px; inset: auto -10% -38% auto; opacity: .95; } .art-1, .orb-a { background: rgba(17, 181, 230, .22); box-shadow: 0 0 0 26px rgba(17, 181, 230, .07), 0 50px 140px rgba(17, 181, 230, .18); } .art-2, .orb-b { background: rgba(0, 46, 91, .16); box-shadow: 0 0 0 26px rgba(0, 46, 91, .06), 0 50px 140px rgba(0, 46, 91, .12); } .art-3, .orb-c { background: rgba(44, 57, 76, .16); box-shadow: 0 0 0 26px rgba(44, 57, 76, .06), 0 50px 140px rgba(44, 57, 76, .12); } .art-4 { background: rgba(17, 181, 230, .16); box-shadow: 0 0 0 26px rgba(17, 181, 230, .06), 0 50px 140px rgba(0, 46, 91, .10); } /* =================================================== Serviços =================================================== */ .svc-nav-wrap { position: sticky; top: 78px; /* abaixo da navbar */ z-index: 1020; padding: 10px 0 14px; } .svc-nav { border-radius: 999px; display: flex; align-items: center; gap: 8px; padding: 10px; overflow-x: auto; scrollbar-width: none; } .svc-nav::-webkit-scrollbar { display: none; } .svc-pill { white-space: nowrap; border-radius: 999px; border: 1px solid rgba(0, 46, 91, .14); background: rgba(255, 255, 255, .70); color: rgba(0, 46, 91, .82); padding: 10px 14px; font-weight: 600; font-size: .92rem; text-decoration: none; transition: transform .15s ease, background-color .15s ease, border-color .15s ease; } .svc-pill:hover { transform: translateY(-1px); border-color: rgba(17, 181, 230, .30); } .svc-pill.active { background: rgba(17, 181, 230, .14); border-color: rgba(17, 181, 230, .34); color: rgba(0, 46, 91, .94); } /* Painéis de serviço */ .svc-panel { position: relative; overflow: hidden; border-radius: var(--radius-xl); } .svc-panel:hover { box-shadow: var(--shadow-hover); } .svc-list { margin: 18px 0 0; padding-left: 1.1rem; color: rgba(0, 46, 91, .76); } .svc-list li { margin: .45rem 0; } /* =================================================== Cards de valores + steps =================================================== */ .value-card { border-radius: var(--radius-xl); height: 100%; position: relative; overflow: hidden; transition: transform .18s ease, box-shadow .18s ease; } .value-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); } .step { border-radius: 20px; border: 1px solid rgba(0, 46, 91, .12); background: rgba(255, 255, 255, .70); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); padding: 18px; height: 100%; } .step .num { width: 44px; height: 44px; display: inline-grid; place-items: center; border-radius: 16px; background: rgba(17, 181, 230, .12); border: 1px solid rgba(17, 181, 230, .20); color: var(--it-navy); font-weight: 700; } /* =================================================== Forms (Contato + Logins) =================================================== */ .form-control, .form-select { border-radius: 16px; border-color: rgba(0, 46, 91, .14); } .form-control:focus, .form-select:focus { box-shadow: 0 0 0 .25rem rgba(17, 181, 230, .16); border-color: rgba(17, 181, 230, .45); } /* Tema escuro — inputs */ body.theme-dark .form-control, body.theme-dark .form-select { background: rgba(255, 255, 255, .06) !important; border-color: rgba(255, 255, 255, .16) !important; color: rgba(255, 255, 255, .92) !important; } body.theme-dark .form-control::placeholder { color: rgba(255, 255, 255, .55) !important; } body.theme-dark .form-control:focus, body.theme-dark .form-select:focus { box-shadow: 0 0 0 .25rem rgba(17, 181, 230, .18) !important; border-color: rgba(17, 181, 230, .55) !important; } /* Tabs pills no login (Ferramenta) */ body.theme-dark .nav-pills .nav-link { border: 1px solid rgba(255, 255, 255, .14); color: rgba(255, 255, 255, .80); background: rgba(255, 255, 255, .06); } body.theme-dark .nav-pills .nav-link.active { background: rgba(17, 181, 230, .20); border-color: rgba(17, 181, 230, .35); color: rgba(255, 255, 255, .94); } .small-link { color: rgba(0, 46, 91, .72); text-decoration: none; } .small-link:hover { color: rgba(0, 46, 91, .92); text-decoration: underline; } body.theme-dark .small-link { color: rgba(255, 255, 255, .80); } body.theme-dark .small-link:hover { color: #fff; } /* Tabela da ferramenta tributária em tema escuro */ body.theme-dark .tool-results-table { --bs-table-color: #eaf4ff; --bs-table-bg: rgba(8, 18, 30, 0.75); --bs-table-border-color: rgba(128, 161, 194, 0.28); --bs-table-hover-bg: rgba(17, 181, 230, 0.14); } body.theme-dark .tool-results-table> :not(caption)>*>* { background-color: var(--bs-table-bg); color: var(--bs-table-color); } body.theme-dark .tool-results-table thead th { color: #b8d8ff; font-weight: 600; } body.theme-dark .tool-results-table tbody tr:hover>* { background-color: var(--bs-table-hover-bg); } /* Tabela de detalhes da ferramenta tributária em tema escuro */ body.theme-dark .tool-detail-table { --bs-table-color: #eaf4ff; --bs-table-bg: rgba(8, 18, 30, 0.78); --bs-table-border-color: rgba(128, 161, 194, 0.28); } body.theme-dark .tool-detail-table> :not(caption)>*>* { color: var(--bs-table-color); } body.theme-dark .tool-detail-table .detail-label { background: rgba(31, 66, 120, 0.95); color: #f3f8ff; } body.theme-dark .tool-detail-table .detail-cell { background: rgba(7, 17, 30, 0.95); color: #eaf4ff; } body.theme-dark .tool-detail-table td, body.theme-dark .tool-detail-table th { border-color: var(--bs-table-border-color); } /* =================================================== Blog cards =================================================== */ .blog-card { border-radius: var(--radius-lg); transition: transform .22s ease, box-shadow .22s ease; } .blog-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-hover); } .blog-meta { color: rgba(0, 46, 91, .56); font-size: .92rem; } /* =================================================== Footer =================================================== */ .it-footer { color: rgba(255, 255, 255, .86); background: #0b1220; border-top: 1px solid rgba(255, 255, 255, .10); } .it-footer a { color: rgba(255, 255, 255, .86); text-decoration: none; } .it-footer a:hover { text-decoration: underline; } .footer-title { font-family: Montserrat, system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; letter-spacing: .06em; text-transform: uppercase; font-size: .78rem; color: rgba(255, 255, 255, .62); margin-bottom: 12px; } .footer-note { color: rgba(255, 255, 255, .56); border-top: 1px solid rgba(255, 255, 255, .10); } /* =================================================== Floating Action Buttons =================================================== */ .fab { position: fixed; right: 18px; bottom: 18px; z-index: 1030; display: flex; flex-direction: column; gap: 10px; } .fab a { width: 48px; height: 48px; display: inline-grid; place-items: center; border-radius: 16px; border: 1px solid rgba(255, 255, 255, .20); background: rgba(12, 18, 32, .72); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); color: rgba(255, 255, 255, .9); box-shadow: 0 18px 50px rgba(0, 0, 0, .22); transition: transform .18s ease, background-color .18s ease, border-color .18s ease, opacity .22s ease, visibility 0s linear 0s; } .fab a:hover { transform: translateY(-2px); background: rgba(12, 18, 32, .84); border-color: rgba(17, 181, 230, .26); } .fab .fab-accent { background: rgba(17, 181, 230, .88); border-color: rgba(17, 181, 230, .92); color: #ffffff; box-shadow: 0 18px 50px rgba(17, 181, 230, .25); } .fab a.back-to-top-hidden { opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(8px); transition: transform .18s ease, background-color .18s ease, border-color .18s ease, opacity .22s ease, visibility 0s linear .22s; } .fab a.back-to-top-visible { opacity: 1; visibility: visible; pointer-events: auto; transform: translateY(0); transition: transform .18s ease, background-color .18s ease, border-color .18s ease, opacity .22s ease, visibility 0s linear 0s; } /* =================================================== Helpers =================================================== */ .link-clean { color: inherit; text-decoration: none; } .link-clean:hover { color: inherit; text-decoration: none; } .hr-soft { border-color: rgba(0, 46, 91, .10); } .border-soft { border-color: rgba(0, 46, 91, .18) !important; } .bg-glass { background: rgba(255, 255, 255, .72) !important; } /* Reveal on scroll */ .reveal { opacity: 0; transform: translateY(14px); transition: opacity .6s ease, transform .6s ease; } .reveal.in { opacity: 1; transform: translateY(0); } @media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; transition: none; } .service-tile, .value-card { transition: none; } .service-tile:hover, .value-card:hover { transform: none; } .it-navbar { transition: none; } .fab a, .fab a.back-to-top-hidden, .fab a.back-to-top-visible { transition: none; } } /* Acessibilidade: reduz animações globais (tema escuro com mais microinterações) */ @media (prefers-reduced-motion: reduce) { * { scroll-behavior: auto !important; transition: none !important; } }