/* ============================================================ TEMA "CARTOGRAFIA VIVA" — camada de tema aditiva, carregada depois de styles.css e ativada via . Reaproveita os MESMOS nomes de variável de styles.css (--paper, --ink, --indigo-*, --saffron, --terracotta, --offwhite) — como os componentes já leem essas variáveis, remapear os valores troca o visual da página inteira sem reescrever cada regra. ============================================================ */ body.theme-cartografia{ --paper: #0E1526; --paper-deep: #141D33; --paper-line: rgba(242,236,221,.14); --ink: #F2ECDD; --ink-soft: rgba(242,236,221,.72); --ink-faint: rgba(242,236,221,.48); --indigo-900: #070B14; --indigo-800: #0A1120; --indigo-700: #101B30; --indigo-500: #24405C; --indigo-300: #6D97B8; --saffron: #E8A33D; --saffron-dark: #C97F1E; --saffron-soft: rgba(232,163,61,.32); --terracotta: #2DD4BF; --terracotta-soft: rgba(45,212,191,.3); --offwhite: #F2ECDD; --offwhite-soft: rgba(242,236,221,.72); --offwhite-faint: rgba(242,236,221,.4); --display: "Newsreader", ui-serif, Georgia, serif; --body: "Inter", ui-sans-serif, system-ui, sans-serif; background: var(--paper); } /* corpo do texto um pouco mais aberto — Inter pede isso a mais que Public Sans */ body.theme-cartografia{ font-feature-settings:"ss01" 1; } body.theme-cartografia em{ font-style:italic; font-weight:500; color:var(--saffron); } /* grain overlay original fica sutil demais no escuro — reforça de leve */ body.theme-cartografia::before{ opacity:.05; mix-blend-mode:overlay; } /* header: troca o blur bege por blur sobre tinta */ body.theme-cartografia .site-header{ background:rgba(14,21,38,.78); } body.theme-cartografia .site-header.scrolled{ background:rgba(14,21,38,.94); } body.theme-cartografia .mobile-nav{ background:var(--paper); } /* ============ SEAM → ROUTE LINE ============ */ /* substitui a trilha pontilhada estática por uma linha de "rota" animada, coerente com a metáfora de cartografia/deslocamento do tema */ body.theme-cartografia .seam{ height:2px; background-image: repeating-linear-gradient(90deg, var(--saffron) 0 10px, transparent 10px 20px); background-size: 20px 2px; opacity:.55; animation: route-travel 26s linear infinite; } body.theme-cartografia .seam.on-ink{ opacity:.35; } @keyframes route-travel{ to{ background-position: 400px 0; } } /* ============ HERO — MAPA VIVO ============ */ body.theme-cartografia .hero{ padding-bottom:5rem; background: radial-gradient(70% 55% at 82% 6%, rgba(232,163,61,.14), transparent 60%), radial-gradient(55% 45% at 4% 92%, rgba(45,212,191,.10), transparent 60%), var(--paper); } body.theme-cartografia .hero__grid{ align-items:center; } body.theme-cartografia .hero__sub{ color:var(--ink-soft); } .india-map{ position:relative; width:100%; aspect-ratio: 520 / 580; max-width:460px; margin-inline:auto; } .india-map svg{ width:100%; height:100%; display:block; overflow:visible; } .india-map__outline{ fill:rgba(232,163,61,.05); stroke:var(--saffron); stroke-width:2; stroke-linejoin:round; stroke-linecap:round; stroke-dasharray:2100; stroke-dashoffset:2100; transition:stroke-dashoffset 2.6s var(--ease), fill 1.8s var(--ease) .6s; } .india-map.in .india-map__outline{ stroke-dashoffset:0; fill:rgba(232,163,61,.07); } .india-map__point{ position:absolute; transform:translate(-50%,-50%); display:flex; align-items:center; gap:.5rem; opacity:0; transition:opacity .6s var(--ease); } .india-map.in .india-map__point{ opacity:1; transition-delay:1.9s; } .india-map__dot{ position:relative; width:9px; height:9px; border-radius:50%; background:var(--terracotta); flex:none; box-shadow:0 0 0 0 rgba(45,212,191,.55); animation:map-pulse 2.6s ease-out infinite; } .india-map__point:nth-child(2) .india-map__dot{ animation-delay:.5s; } .india-map__point:nth-child(3) .india-map__dot{ animation-delay:1s; } @keyframes map-pulse{ 0%{ box-shadow:0 0 0 0 rgba(45,212,191,.55); } 70%{ box-shadow:0 0 0 14px rgba(45,212,191,0); } 100%{ box-shadow:0 0 0 0 rgba(45,212,191,0); } } .india-map__label{ font-family:var(--body); font-weight:700; font-size:.72rem; letter-spacing:.03em; color:var(--offwhite); background:rgba(10,17,32,.86); border:1px solid var(--paper-line); border-radius:999px; padding:.28rem .65rem; white-space:nowrap; backdrop-filter:blur(6px); } .india-map__stat{ position:absolute; left:-6%; bottom:-8%; width:min(230px, 62%); background:rgba(20,29,51,.72); border:1px solid rgba(242,236,221,.16); backdrop-filter:blur(14px) saturate(1.4); border-radius:var(--radius-m); padding:1.4rem 1.5rem; box-shadow:0 24px 50px -22px rgba(0,0,0,.6); opacity:0; transform:translateY(14px); transition:opacity .8s var(--ease), transform .8s var(--ease); transition-delay:.3s; } .india-map.in .india-map__stat{ opacity:1; transform:none; } .india-map__stat .num{ font-family:var(--display); font-size:2.4rem; color:var(--saffron); line-height:1; } .india-map__stat p{ margin-top:.5rem; color:var(--offwhite-soft); font-size:.86rem; line-height:1.5; } @media (max-width:980px){ .india-map{ max-width:340px; margin-top:1rem; } .india-map__stat{ position:static; width:auto; margin-top:1.6rem; opacity:1; transform:none; } } /* respeita prefers-reduced-motion: mostra tudo pronto, sem depender do IntersectionObserver+CSS transition */ @media (prefers-reduced-motion: reduce){ .india-map__outline{ stroke-dashoffset:0 !important; } .india-map__point{ opacity:1 !important; } .india-map__stat{ opacity:1 !important; transform:none !important; } .india-map__dot{ animation:none; } } /* ============ CONTADORES ANIMADOS (purpose-stats) ============ */ body.theme-cartografia .purpose-stat .num{ color:var(--saffron); text-shadow:0 0 24px rgba(232,163,61,.35); } /* ============ CARDS — leve elevação/glow no hover, mais vivo no escuro ============ */ body.theme-cartografia .bento-card:hover{ background:var(--indigo-700); box-shadow:0 26px 60px -28px rgba(0,0,0,.7), 0 0 0 1px rgba(232,163,61,.25); } body.theme-cartografia .bento-card:hover .bento-card__icon{ background:var(--saffron); color:var(--indigo-900); } body.theme-cartografia .purpose-card:hover{ border-color:var(--terracotta); box-shadow:0 26px 60px -30px rgba(0,0,0,.7), 0 0 0 1px rgba(45,212,191,.2); } body.theme-cartografia .article-card__media{ box-shadow:0 18px 40px -22px rgba(0,0,0,.65); }