/* NovixFin — Landing "Seletor Seta" (porte fiel do design aprovado). Fonte visual da verdade: Claude Design "NovixFin - Landing Seletor Seta.html". 15 temas via data-theme no ; cantos via --cut/--r; cena de cristal do tema ametista usa /public/assets/{quartzo,cristaldireito,marmore-trim}.png. Nao editar os blocos de tokens sem atualizar tambem o design de referencia. */ /* ===== TOKENS POR TEMA (arquitetura data-theme — exigência do produto) ===== */ :root, html[data-theme="ametista"]{ --bg:#F0EDF5; --surface:#FFFFFF; --ink:#241C33; --muted:#6E6580; --line:rgba(36,28,51,.3); --line-soft:rgba(36,28,51,.12); --accent:#8803FC; --accent-2:#6C4FA8; --accent-ink:#FFFFFF; --pos:#2E7D5B; --neg:#B5433A; --gold:#B07C28; --stage:#8803FC; --stage-ink:#FFFFFF; --stage-muted:rgba(255,255,255,.72); --stage-line:rgba(255,255,255,.24); --grad:linear-gradient(135deg,#5B1F9E 0%,#8803FC 46%,#B77BFF 100%); --sheen:linear-gradient(135deg,#9B2BFF 0%,#8803FC 50%,#6E12C4 100%); --r:0px; --r-btn:0px; --r-chip:0px; --cut:polygon(0 0,calc(100% - 14px) 0,100% 14px,100% 100%,0 100%); --cut-card:polygon(0 0,calc(100% - 26px) 0,100% 26px,100% 100%,0 100%); --card-b:1px solid var(--line-soft); --card-sh:0 18px 42px -20px rgba(136,3,252,.38), 0 2px 8px rgba(36,28,51,.07); --f-d:'Familjen Grotesk',sans-serif; --f-b:'Familjen Grotesk',sans-serif; --f-m:'Spline Sans Mono',monospace; --w-d:700; --ls-d:-0.03em; --facet:linear-gradient(225deg,rgba(136,3,252,.2) 0px,rgba(255,255,255,.5) 13px,rgba(136,3,252,.06) 30px,rgba(136,3,252,0) 62px); --prism:linear-gradient(90deg,#8803FC,#B07C28,#2E7D5B); --disp-prism:block; --disp-filete:none; --disp-regmarks:none; --stage-tex:linear-gradient(135deg,rgba(40,8,78,.55),rgba(183,123,255,0) 55%),radial-gradient(100% 82% at 84% 10%,rgba(255,255,255,.16),rgba(255,255,255,0) 55%); } html[data-theme="cafe"]{ --bg:#F6EFE2; --surface:#FFF9ED; --ink:#2B2016; --muted:#8B7A67; --line:rgba(43,32,22,.3); --line-soft:rgba(43,32,22,.13); --accent:#B65437; --accent-2:#2F7561; --accent-ink:#FFF6EA; --pos:#2F7561; --neg:#B65437; --gold:#B65437; --stage:#B65437; --stage-ink:#FFF6EA; --stage-muted:rgba(255,246,234,.75); --stage-line:rgba(255,246,234,.25); --grad:linear-gradient(115deg,#B65437,#8A3E28); --sheen:#B65437; --r:20px; --r-btn:999px; --r-chip:999px; --cut:none; --cut-card:none; --card-b:1px solid var(--line-soft); --card-sh:0 2px 0 rgba(43,32,22,.12); --f-d:'Sora',sans-serif; --f-b:'Hanken Grotesk',sans-serif; --f-m:'Sora',sans-serif; --w-d:700; --ls-d:-0.02em; --facet:none; --prism:none; --disp-prism:none; --disp-filete:none; --disp-regmarks:none; } html[data-theme="sereno2"], html[data-theme="sereno1"]{ --bg:#101413; --surface:#1A211E; --ink:#F1EDE2; --muted:#8F9A92; --line:rgba(241,237,226,.18); --line-soft:rgba(241,237,226,.1); --accent:#A9C7A9; --accent-2:#E3C990; --accent-ink:#14201A; --pos:#A9C7A9; --neg:#D9A08C; --gold:#E3C990; --stage:#A9C7A9; --stage-ink:#14201A; --stage-muted:rgba(20,32,26,.72); --stage-line:rgba(20,32,26,.22); --grad:linear-gradient(115deg,#A9C7A9,#6E8F74); --sheen:#A9C7A9; --r:24px; --r-btn:999px; --r-chip:999px; --cut:none; --cut-card:none; --card-b:1px solid var(--line-soft); --card-sh:none; --f-d:'Instrument Serif',serif; --f-b:'Albert Sans',sans-serif; --f-m:'Albert Sans',sans-serif; --w-d:400; --ls-d:-0.01em; --facet:none; --prism:none; --disp-prism:none; --disp-filete:none; --disp-regmarks:none; } html[data-theme="cofre"]{ --bg:#0A1120; --surface:#111B30; --ink:#E9EFF8; --muted:#8CA0BC; --line:rgba(233,239,248,.22); --line-soft:rgba(233,239,248,.1); --accent:#3D7BFD; --accent-2:#E8B04B; --accent-ink:#FFFFFF; --pos:#37C08B; --neg:#FF6B5E; --gold:#E8B04B; --stage:#2455C9; --stage-ink:#FFFFFF; --stage-muted:rgba(255,255,255,.75); --stage-line:rgba(255,255,255,.22); --grad:linear-gradient(115deg,#3D7BFD,#2455C9); --sheen:#3D7BFD; --r:14px; --r-btn:8px; --r-chip:6px; --cut:none; --cut-card:none; --card-b:1px solid var(--line-soft); --card-sh:none; --f-d:'Red Hat Display',sans-serif; --f-b:'Red Hat Text',sans-serif; --f-m:'Red Hat Mono',monospace; --w-d:800; --ls-d:-0.02em; --facet:none; --prism:none; --disp-prism:none; --disp-filete:none; --disp-regmarks:none; } html[data-theme="tinta"]{ --bg:#0E100A; --surface:#171B10; --ink:#EDEEE3; --muted:#9A9E8C; --line:rgba(233,234,224,.25); --line-soft:rgba(233,234,224,.12); --accent:#C6F135; --accent-2:#E3C567; --accent-ink:#171A05; --pos:#C6F135; --neg:#F27059; --gold:#E3C567; --stage:#C6F135; --stage-ink:#171A05; --stage-muted:rgba(23,26,5,.72); --stage-line:rgba(23,26,5,.25); --grad:linear-gradient(115deg,#C6F135,#8FB01F); --sheen:#C6F135; --r:0px; --r-btn:0px; --r-chip:0px; --cut:none; --cut-card:none; --card-b:1px solid var(--line-soft); --card-sh:none; --f-d:'Space Grotesk',sans-serif; --f-b:'Space Grotesk',sans-serif; --f-m:'IBM Plex Mono',monospace; --w-d:700; --ls-d:-0.03em; --facet:none; --prism:none; --disp-prism:none; --disp-filete:none; --disp-regmarks:none; } html[data-theme="banca"]{ --bg:#F7F4EC; --surface:#FFFDF7; --ink:#1B1810; --muted:#6F6858; --line:rgba(27,24,16,.35); --line-soft:rgba(27,24,16,.14); --accent:#B3261E; --accent-2:#1F5F3C; --accent-ink:#FFFDF7; --pos:#1F5F3C; --neg:#B3261E; --gold:#8a6d1f; --stage:#B3261E; --stage-ink:#FFFDF7; --stage-muted:rgba(255,253,247,.78); --stage-line:rgba(255,253,247,.28); --grad:linear-gradient(115deg,#B3261E,#7d1a14); --sheen:#1B1810; --r:0px; --r-btn:0px; --r-chip:0px; --cut:none; --cut-card:none; --card-b:1px solid var(--line-soft); --card-sh:none; --f-d:'Newsreader',serif; --f-b:'Archivo',sans-serif; --f-m:'Archivo',sans-serif; --w-d:500; --ls-d:-0.01em; --facet:none; --prism:none; --disp-prism:none; --disp-filete:block; --disp-regmarks:none; } html[data-theme="suica"]{ --bg:#F2F3F5; --surface:#FFFFFF; --ink:#0C0D10; --muted:#5D6470; --line:rgba(12,13,16,.4); --line-soft:rgba(12,13,16,.14); --accent:#2038E4; --accent-2:#0C0D10; --accent-ink:#FFFFFF; --pos:#0B7A46; --neg:#D02914; --gold:#0C0D10; --stage:#2038E4; --stage-ink:#FFFFFF; --stage-muted:rgba(255,255,255,.75); --stage-line:rgba(255,255,255,.25); --grad:linear-gradient(115deg,#2038E4,#101c8f); --sheen:#2038E4; --r:0px; --r-btn:0px; --r-chip:0px; --cut:none; --cut-card:none; --card-b:1px solid var(--line-soft); --card-sh:none; --f-d:'Instrument Sans',sans-serif; --f-b:'Instrument Sans',sans-serif; --f-m:'Instrument Sans',sans-serif; --w-d:700; --ls-d:-0.05em; --facet:none; --prism:none; --disp-prism:none; --disp-filete:none; --disp-regmarks:flex; } html[data-theme="pulso"]{ --bg:#F4F3EE; --surface:#FFFFFF; --ink:#111216; --muted:#5E6169; --line:rgba(17,18,22,.4); --line-soft:rgba(17,18,22,.13); --accent:#2038E4; --accent-2:#E8442E; --accent-ink:#FFFFFF; --pos:#0B7A46; --neg:#D02914; --gold:#E8442E; --stage:#2038E4; --stage-ink:#FFFFFF; --stage-muted:rgba(255,255,255,.75); --stage-line:rgba(255,255,255,.25); --grad:linear-gradient(115deg,#2038E4 55%,#E8442E); --sheen:#2038E4; --r:0px; --r-btn:0px; --r-chip:0px; --cut:none; --cut-card:none; --card-b:1px solid var(--line-soft); --card-sh:none; --f-d:'Schibsted Grotesk',sans-serif; --f-b:'Schibsted Grotesk',sans-serif; --f-m:'IBM Plex Mono',monospace; --w-d:800; --ls-d:-0.04em; --facet:none; --prism:none; --disp-prism:none; --disp-filete:none; --disp-regmarks:flex; } html[data-theme="concreto"]{ --bg:#EFECE3; --surface:#FFFFFF; --ink:#141310; --muted:#5B574A; --line:#141310; --line-soft:rgba(20,19,16,.15); --accent:#FF4D24; --accent-2:#0E7A45; --accent-ink:#141310; --pos:#0E7A45; --neg:#D02914; --gold:#141310; --stage:#141310; --stage-ink:#EFECE3; --stage-muted:rgba(239,236,227,.72); --stage-line:rgba(239,236,227,.25); --grad:linear-gradient(115deg,#FF4D24,#c93315); --sheen:#FF4D24; --r:0px; --r-btn:0px; --r-chip:0px; --cut:none; --cut-card:none; --card-b:2px solid var(--ink); --card-sh:6px 6px 0 var(--ink); --f-d:'Archivo',sans-serif; --f-b:'Archivo',sans-serif; --f-m:'Space Mono',monospace; --w-d:900; --ls-d:-0.02em; --facet:none; --prism:none; --disp-prism:none; --disp-filete:none; --disp-regmarks:none; } html[data-theme="adega"]{ --bg:#241018; --surface:#301620; --ink:#F4E8D6; --muted:#C3A296; --line:rgba(244,232,214,.35); --line-soft:rgba(244,232,214,.14); --accent:#D9A441; --accent-2:#A9CBA5; --accent-ink:#241018; --pos:#A9CBA5; --neg:#E08768; --gold:#D9A441; --stage:#D9A441; --stage-ink:#241018; --stage-muted:rgba(36,16,24,.75); --stage-line:rgba(36,16,24,.25); --grad:linear-gradient(115deg,#D9A441,#a5761f); --sheen:#D9A441; --r:10px; --r-btn:8px; --r-chip:8px; --cut:none; --cut-card:none; --card-b:1px solid var(--line-soft); --card-sh:none; --f-d:'Marcellus',serif; --f-b:'Figtree',sans-serif; --f-m:'Marcellus',serif; --w-d:400; --ls-d:0.02em; --facet:none; --prism:none; --disp-prism:none; --disp-filete:none; --disp-regmarks:none; } html[data-theme="vitrola"]{ --bg:#F3E7CE; --surface:#FBF2DF; --ink:#33261A; --muted:#8A7358; --line:rgba(51,38,26,.3); --line-soft:rgba(51,38,26,.13); --accent:#C9642F; --accent-2:#D9A13B; --accent-ink:#FBF2DF; --pos:#7A8B3E; --neg:#C9642F; --gold:#D9A13B; --stage:#C9642F; --stage-ink:#FBF2DF; --stage-muted:rgba(251,242,223,.8); --stage-line:rgba(251,242,223,.28); --grad:linear-gradient(115deg,#C9642F,#D9A13B); --sheen:#C9642F; --r:16px; --r-btn:999px; --r-chip:999px; --cut:none; --cut-card:none; --card-b:1px solid var(--line-soft); --card-sh:none; --f-d:'Young Serif',serif; --f-b:'Karla',sans-serif; --f-m:'Karla',sans-serif; --w-d:400; --ls-d:0em; --facet:none; --prism:none; --disp-prism:none; --disp-filete:none; --disp-regmarks:none; } html[data-theme="cabine"]{ --bg:#0B0D11; --surface:#12151B; --ink:#E3E9F0; --muted:#7E8A99; --line:rgba(227,233,240,.2); --line-soft:rgba(227,233,240,.09); --accent:#FF8A3D; --accent-2:#57D07E; --accent-ink:#170D04; --pos:#57D07E; --neg:#FF5C5C; --gold:#FF8A3D; --stage:#FF8A3D; --stage-ink:#170D04; --stage-muted:rgba(23,13,4,.72); --stage-line:rgba(23,13,4,.25); --grad:linear-gradient(115deg,#FF8A3D,#d05f12); --sheen:#FF8A3D; --r:6px; --r-btn:4px; --r-chip:4px; --cut:none; --cut-card:none; --card-b:1px solid var(--line-soft); --card-sh:none; --f-d:'Chakra Petch',sans-serif; --f-b:'Chakra Petch',sans-serif; --f-m:'JetBrains Mono',monospace; --w-d:700; --ls-d:-0.01em; --facet:none; --prism:none; --disp-prism:none; --disp-filete:none; --disp-regmarks:none; } html[data-theme="sumie"]{ --bg:#F5F1E8; --surface:#FBF8F1; --ink:#26241F; --muted:#7D786C; --line:rgba(38,36,31,.25); --line-soft:rgba(38,36,31,.1); --accent:#35507B; --accent-2:#B5483A; --accent-ink:#F5F1E8; --pos:#4C6B4F; --neg:#B5483A; --gold:#B5483A; --stage:#35507B; --stage-ink:#F5F1E8; --stage-muted:rgba(245,241,232,.78); --stage-line:rgba(245,241,232,.26); --grad:linear-gradient(115deg,#35507B,#22344f); --sheen:#35507B; --r:2px; --r-btn:2px; --r-chip:2px; --cut:none; --cut-card:none; --card-b:1px solid var(--line-soft); --card-sh:none; --f-d:'Shippori Mincho',serif; --f-b:'Zen Kaku Gothic New',sans-serif; --f-m:'Zen Kaku Gothic New',sans-serif; --w-d:600; --ls-d:0em; --facet:none; --prism:none; --disp-prism:none; --disp-filete:none; --disp-regmarks:none; } html[data-theme="deco"]{ --bg:#111111; --surface:#191919; --ink:#EFE6D0; --muted:#9C9484; --line:rgba(239,230,208,.22); --line-soft:rgba(239,230,208,.1); --accent:#C8A24B; --accent-2:#2E8B6A; --accent-ink:#111111; --pos:#2E8B6A; --neg:#B5483A; --gold:#C8A24B; --stage:#C8A24B; --stage-ink:#111111; --stage-muted:rgba(17,17,17,.75); --stage-line:rgba(17,17,17,.25); --grad:linear-gradient(115deg,#C8A24B,#8f6f24); --sheen:#C8A24B; --r:0px; --r-btn:0px; --r-chip:0px; --cut:none; --cut-card:none; --card-b:1px solid var(--line-soft); --card-sh:none; --f-d:'Poiret One',sans-serif; --f-b:'Jost',sans-serif; --f-m:'Jost',sans-serif; --w-d:400; --ls-d:0.02em; --facet:none; --prism:none; --disp-prism:none; --disp-filete:none; --disp-regmarks:none; } /* ===== AMETISTA v5 "Cristal & Mármore" — escopo travado ao tema ===== */ [data-crys], [data-marble]{ display:none; } html[data-theme="ametista"] [data-toast="ifood"]{ top:-56px !important; left:-20px !important; } html[data-theme="ametista"] [data-crys-abstract]{ display:none !important; } html[data-theme="ametista"] [data-marble]{ display:block; position:absolute; left:50%; bottom:14px; width:120%; height:176px; transform:translateX(-50%); z-index:1; filter:drop-shadow(0 34px 34px rgba(60,40,95,.2)) contrast(1.04) saturate(1.02); background:url('/public/assets/marmore-trim.png') center/contain no-repeat; } html[data-theme="ametista"] [data-crys]{ z-index:0; pointer-events:none; } html[data-theme="ametista"] [data-crys="cluster"]{ display:block; position:absolute; left:-102px; bottom:-64px; width:448px; height:604px; background:url('/public/assets/quartzo.png') center/contain no-repeat; filter:drop-shadow(0 14px 22px rgba(136,3,252,.13)); opacity:.94; } html[data-theme="ametista"] [data-crys="single"]{ display:block; position:absolute; right:-38px; top:-60px; width:318px; height:398px; background:url('/public/assets/cristaldireito.png') center/contain no-repeat; filter:drop-shadow(0 10px 16px rgba(136,3,252,.11)); opacity:.86; } html[data-theme="ametista"] [data-glass]{ background: rgba(255,255,255,0.56) !important; -webkit-backdrop-filter: blur(28px) saturate(1.55) !important; backdrop-filter: blur(28px) saturate(1.55) !important; border: 1px solid rgba(255,255,255,0.88) !important; box-shadow: 0 20px 46px -20px rgba(136,3,252,.42), inset 0 1px 0 rgba(255,255,255,.85) !important; } html[data-theme="ametista"] [data-bar], html[data-theme="ametista"] [data-pbar]{ background:linear-gradient(179deg, rgba(224,199,255,.96) 0%, #9A2BFF 42%, #7A12D6 100%) !important; clip-path:polygon(50% 0, 100% 17%, 100% 100%, 0 100%, 0 17%) !important; border-radius:2px 2px 3px 3px !important; box-shadow:0 10px 20px -8px rgba(122,18,214,.5) !important; position:relative; overflow:visible; } html[data-theme="ametista"] [data-bar]::before, html[data-theme="ametista"] [data-pbar]::before{ content:''; position:absolute; left:13%; top:5%; width:27%; bottom:9%; background:linear-gradient(180deg, rgba(255,255,255,.85), rgba(255,255,255,.06)); clip-path:polygon(58% 0, 100% 13%, 100% 100%, 0 100%); pointer-events:none; } html[data-theme="ametista"] [data-bar]::after, html[data-theme="ametista"] [data-pbar]::after{ content:''; position:absolute; left:50%; top:2%; bottom:0; width:1px; background:linear-gradient(180deg, rgba(255,255,255,.6), rgba(255,255,255,0)); transform:translateX(-.5px); pointer-events:none; } html[data-theme="ametista"] [data-draw], html[data-theme="ametista"] [data-pline]{ stroke:#C9A23C !important; stroke-width:3 !important; } /* ===== F12 v2 — hero Ametista: pedestal+vidro coexistindo, cristais reais, navbar/vidro fortes, serif, botão, fundo ===== */ html[data-theme="ametista"] [data-screen-label="hero"]{ background:linear-gradient(180deg,#ECE4F7 0%, #EFE9F8 44%, #F1EEF6 100%); } html[data-theme="ametista"] [data-mocktilt]{ position:relative; z-index:2; margin-top:-36px; } [data-contact]{ display:none; } html[data-theme="ametista"] [data-contact]{ display:block; } html[data-theme="ametista"] nav{ background:color-mix(in srgb, var(--surface) 32%, transparent) !important; backdrop-filter:blur(30px) saturate(1.7) !important; -webkit-backdrop-filter:blur(30px) saturate(1.7) !important; border-bottom:1px solid rgba(255,255,255,.5) !important; } html[data-theme="ametista"] h1[data-kinetic="1"]{ font-family:'Playfair Display',serif !important; font-weight:600 !important; letter-spacing:-0.006em !important; } html[data-theme="ametista"] [data-fadein], html[data-theme="ametista"] [data-parea]{ fill:#C9A23C !important; fill-opacity:.15 !important; } html[data-theme="ametista"] [data-shimmer="accent"]{ letter-spacing:-0.018em !important; font-weight:680 !important; } html[data-theme="ametista"] [data-present-btn]{ clip-path:var(--cut) !important; border:none !important; color:var(--accent) !important; background:rgba(255,255,255,.4) !important; -webkit-backdrop-filter:blur(10px) !important; backdrop-filter:blur(10px) !important; position:relative; overflow:hidden; } html[data-theme="ametista"] [data-hero-cta]{ position:relative; overflow:hidden; isolation:isolate; will-change:transform; } html[data-theme="ametista"] [data-present-btn]::after, html[data-theme="ametista"] [data-hero-cta]::after{ content:''; position:absolute; top:0; bottom:0; left:-60%; width:42%; background:linear-gradient(105deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.55) 50%, rgba(255,255,255,0) 100%); transform:skewX(-18deg) translateZ(0); backface-visibility:hidden; animation:lpBtnShine 4.8s ease-in-out infinite; pointer-events:none; } html[data-theme="ametista"] [data-present-btn]:hover::after{ animation:lpBtnShineHover 1.6s ease-in-out infinite; } @keyframes lpBtnShine{ 0%{ left:-60%; } 55%{ left:135%; } 100%{ left:135%; } } @keyframes lpBtnShineHover{ 0%{ left:-60%; } 100%{ left:135%; } } @media (prefers-reduced-motion: reduce){ html[data-theme="ametista"] [data-present-btn]::after, html[data-theme="ametista"] [data-hero-cta]::after{ display:none; } } html { --ease: cubic-bezier(.16,1,.3,1); --t-fast: .16s; --t-med: .42s; --t-scene: .8s; } html, body { margin:0; padding:0; background: var(--bg); color: var(--ink); } body { transition: background-color .45s ease, color .45s ease; } a { color: var(--accent-2); text-decoration: none; } a:hover { color: var(--accent); } ::selection { background: var(--accent); color: var(--accent-ink); } details > summary { list-style: none; cursor: pointer; } details > summary::-webkit-details-marker { display: none; } @keyframes nvxFloatA { 0%,100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-12px) rotate(-2deg); } } @keyframes nvxFloatB { 0%,100% { transform: translateY(0) rotate(2deg); } 50% { transform: translateY(-10px) rotate(2deg); } } @keyframes nvxFloatC { 0%,100% { transform: translateY(0) rotate(-1.5deg); } 50% { transform: translateY(-9px) rotate(-1.5deg); } } @keyframes nvxToast { 0% { opacity:0; transform: translateY(14px); } 12%,82% { opacity:1; transform: translateY(0); } 100% { opacity:0; transform: translateY(-8px); } } @keyframes nvxBlink { 0%,100% { opacity:1; } 50% { opacity:0; } } @keyframes nvxMarquee { from { transform: translateX(0); } to { transform: translateX(-50%); } } @keyframes nvxCardFloat { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } } @keyframes nvxTabIn { 0% { opacity: 0; transform: translateY(10px); } 100% { opacity: 1; transform: translateY(0); } } @keyframes nvxShimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } } @keyframes nvxSweep { 0% { transform: translateX(-140%) skewX(-18deg); } 100% { transform: translateX(260%) skewX(-18deg); } } @keyframes nvxKinetic { 0% { opacity: 0; transform: translateY(20px); clip-path: inset(0 0 100% 0); } 100% { opacity: 1; transform: translateY(0); clip-path: inset(0 0 -6% 0); } } @keyframes lpNameA{ from{ opacity: 0; transform: translateY(9px); } to{ opacity: 1; transform: translateY(0); } } @keyframes lpNameB{ from{ opacity: 0; transform: translateY(9px); } to{ opacity: 1; transform: translateY(0); } } ::view-transition-old(root), ::view-transition-new(root){ animation-duration: .45s; animation-timing-function: ease; } #lp-sel:focus-visible, #lp-hero-sel:focus-visible{ outline: 2px solid var(--accent); outline-offset: 6px; } #lp-sel button:focus-visible, #lp-hero-sel button:focus-visible, .lp-track button:focus-visible{ outline: 2px solid var(--accent); outline-offset: 3px; } /* setas laterais da hero: chevron solto, halo sutil + nudge no hover; hit-area maior que o traço */ .lp-hero-arrow:hover .lp-hero-halo{ background: color-mix(in srgb, var(--accent) 9%, transparent); } .lp-hero-arrow[aria-label="Tema anterior"]:hover .lp-hero-halo{ transform: translateX(-4px); } .lp-hero-arrow[aria-label="Próximo tema"]:hover .lp-hero-halo{ transform: translateX(4px); } .lp-hero-arrow:focus-visible{ outline: 2px solid var(--accent); outline-offset: -6px; border-radius: 999px; } @media (max-width:1280px){ .lp-hero-arrow{ position: static !important; transform: none !important; width: 58px !important; height: 58px !important; } } @media (prefers-reduced-motion: reduce){ .lp-hero-arrow .lp-hero-halo{ transition: none !important; } .lp-hero-arrow:hover .lp-hero-halo{ transform: none !important; } } @media (prefers-reduced-motion: reduce){ ::view-transition-old(root), ::view-transition-new(root){ animation: none !important; } #lp-sel [aria-live]{ animation: none !important; } .lp-track{ transition: none !important; } .lp-track button{ transition: none !important; } } [data-hv="lp-hv-1"]:hover{ transform: translateY(-1px); } [data-hv="lp-hv-2"]:hover{ transform: translateY(-2px); } [data-hv="lp-hv-3"]:hover{ color: var(--accent); } [data-hv="lp-hv-4"]:hover{ animation-play-state: paused; } [data-hv="lp-hv-5"]:hover{ transform: perspective(1200px) rotateY(0deg); } [data-hv="lp-hv-6"]:hover{ transform: translateY(-4px); } [data-hv="lp-hv-7"]:hover{ transform: scale(1.12); color: var(--accent); border-color: color-mix(in srgb, var(--accent) 50%, transparent); } /* ================= MOBILE (<=768px) ================= Fonte: mockup "Mobile NovixFin.dc.html" (tela 10b · Landing). A landing usa grades e paddings em estilo inline, por isso os overrides levam !important. Nada de markup próprio de mobile: é o mesmo HTML do desktop. */ /* hambúrguer só existe no mobile */ #lp-navtoggle { display: none; } @media (max-width: 768px) { /* ---- NAV: logo + hambúrguer; links e CTAs viram painel ---- */ #lp-navinner { grid-template-columns: 1fr auto !important; padding: 0 16px !important; gap: 8px !important; } #lp-brandgroup { grid-column: 1; grid-row: 1; } #lp-navtoggle { display: grid; grid-column: 2; grid-row: 1; width: 44px; height: 44px; place-items: center; background: none; border: none; color: var(--ink); cursor: pointer; } /* a etiqueta ao lado do logo não cabe no estreito */ #lp-brandgroup > span { display: none !important; } #lp-navlinks, #lp-navcta { display: none !important; } nav[data-navopen="1"] #lp-navlinks, nav[data-navopen="1"] #lp-navcta { display: flex !important; grid-column: 1 / -1; flex-direction: column; align-items: stretch !important; justify-content: flex-start !important; gap: 4px !important; padding-bottom: 10px; } nav[data-navopen="1"] #lp-navlinks { grid-row: 2; border-top: 1px solid var(--line-soft); padding-top: 8px; } nav[data-navopen="1"] #lp-navcta { grid-row: 3; gap: 10px !important; padding-bottom: 14px; } nav[data-navopen="1"] #lp-navlinks a, nav[data-navopen="1"] #lp-navcta a { justify-content: center; text-align: center; min-height: 46px; } /* ---- HERO: empilha (é
, não
) ---- */ [data-screen-label] [style*="grid-template-columns"] { grid-template-columns: 1fr !important; } header[data-screen-label="hero"] > div:last-child { padding: 70px 18px 34px !important; gap: 26px !important; } h1 { font-size: clamp(30px, 8.6vw, 42px) !important; } h1, h2 { overflow-wrap: anywhere; } header[data-screen-label="hero"] p { font-size: 15.5px !important; } /* CTAs da hero em largura total, empilhados (mockup) */ /* ---- LINHAS DE CTA: hero E bloco final ---- A regra de empilhamento global mira `grid-template-columns`; a seção "cta final" NÃO tem nenhum grid — ela monta tudo com `flex-wrap: wrap` (2 botões + 4 selos). Por isso escapou, como o hero escapou por ser
. Aqui as duas seções de CTA são tratadas juntas. As OUTRAS linhas flex-wrap da landing (chips do "demo", selos da "gamificação", abas do "tour") quebram bem sozinhas e NÃO são empilhadas de propósito — virar 4 abas/chips full-width pioraria a leitura. */ header[data-screen-label="hero"] [style*="flex-wrap: wrap"], section[data-screen-label="cta final"] [style*="flex-wrap: wrap"] { flex-direction: column; align-items: stretch !important; gap: 10px !important; } header[data-screen-label="hero"] [style*="flex-wrap: wrap"] > a, header[data-screen-label="hero"] [style*="flex-wrap: wrap"] > button, section[data-screen-label="cta final"] [style*="flex-wrap: wrap"] > a, section[data-screen-label="cta final"] [style*="flex-wrap: wrap"] > button { width: auto; min-height: 30px; justify-content: center; text-align: center; } /* os 4 selos ("grátis pra sempre" etc.): 1 por linha, centrados, com respiro menor que os 22px de desktop */ section[data-screen-label="cta final"] [style*="flex-wrap: wrap"] > span { text-align: center; min-height: 26px; } /* botão fantasma "Escolher meu tema": a borda de 1.5px em --stage-line quase some sobre o roxo e o inline-flex sem justify deixava o rótulo torto. Ganha contraste, altura e centralização iguais ao primário. */ section[data-screen-label="cta final"] a[style*="border: 1.5px"] { border-width: 1px !important; border-color: color-mix(in srgb, var(--stage-ink) 55%, transparent) !important; padding-top: 14px !important; padding-bottom: 14px !important; } /* mock em perspectiva: sem tilt, sem estourar e sem o vão de 98px */ [data-mockwrap] { padding: 0 0 22px !important; } [data-mocktilt] { transform: none !important; } [data-card="1"] { padding: 18px !important; } /* ---- GUARDA GERAL DE LARGURA (auditoria) ---- A landing tem cards com largura FIXA de desktop (420px no "demo", 380px na "gamificação", etc.) que estouram os 354px úteis de um 390px. Em vez de consertar card a card, nenhum descendente de seção passa de 100%. Exceções: as duas faixas que rolam de propósito (carrossel de temas e a esteira de credibilidade), que usam width:max-content. */ [data-screen-label] *:not(.lp-track):not([data-mq-track]) { max-width: 100%; } [data-screen-label] [style*="width: 420px"], [data-screen-label] [style*="width: 380px"] { width: 100% !important; } /* ---- TIPOGRAFIA INLINE SEM CLAMP (auditoria) ---- Números e títulos de destaque estão com font-size fixo no inline (44/40/34/32/30px) e dominam ou estouram no estreito. Cada tamanho é reduzido uma vez, o que cobre todas as ocorrências de todas as seções. */ [data-screen-label] [style*="font-size: 44px"] { font-size: clamp(26px, 7.4vw, 32px) !important; } [data-screen-label] [style*="font-size: 40px"] { font-size: clamp(25px, 7vw, 30px) !important; } [data-screen-label] [style*="font-size: 34px"] { font-size: clamp(23px, 6.4vw, 28px) !important; } [data-screen-label] [style*="font-size: 32px"] { font-size: clamp(22px, 6.2vw, 27px) !important; } [data-screen-label] [style*="font-size: 30px"] { font-size: clamp(21px, 6vw, 26px) !important; } /* ---- CTAs: chanfro pequeno e SIMÉTRICO ---- O `--cut` do tema ametista é `polygon(0 0, calc(100% - 14px) 0, 100% 14px, 100% 100%, 0 100%)`: recuo FIXO de 14px em UM canto só (superior direito). Calibrado para botão de desktop, num CTA full-width e alto do mobile o talho fica desproporcional e assimétrico. Aqui o corte não é removido (perderia o traço do tema): passa a um chanfro de 10px em DOIS cantos opostos (simetria de rotação), e a altura cai para ~52px, que é o alvo de toque confortável sem amplificar o corte. ESCOPO: este arquivo é carregado só por public/index.php, então os botões do app (dashboard/modais, que usam o mesmo token em tokens.css) NÃO são afetados. */ /* (a) altura/respiro/centralização: vale para os 15 temas */ [data-screen-label] a[style*="clip-path: var(--cut)"], [data-screen-label] button[style*="clip-path: var(--cut)"], html[data-theme="ametista"] button[data-present-btn] { padding-left: 20px !important; padding-right: 20px !important; padding-top: 14px !important; padding-bottom: 14px !important; min-height: 30px; display: inline-flex !important; align-items: center; justify-content: center; } /* (b) o chanfro reduzido só onde EXISTE corte: ametista é o único tema com `--cut` diferente de `none`. Aplicar o polígono nos outros 14 temas adicionaria um corte que o tema não pede — por isso o escopo por tema. */ html[data-theme="ametista"] [data-screen-label] a[style*="clip-path: var(--cut)"], html[data-theme="ametista"] [data-screen-label] button[style*="clip-path: var(--cut)"], html[data-theme="ametista"] button[data-present-btn] { clip-path: polygon(0 0, calc(100% - 10px) 0, 100% 10px, 100% 100%, 10px 100%, 0 calc(100% - 10px)) !important; } /* diagonal do bloco final: 46px é íngreme demais num bloco estreito */ section[data-screen-label="cta final"] { clip-path: polygon(0 18px, 100% 0, 100% 100%, 0 100%) !important; } /* ---- CENA DE CRISTAL: não pode vazar no estreito ---- As imagens são backgrounds posicionados para telas largas; no mobile ficam ocultas (o gradiente/mármore do tema seguem dando o clima). */ [data-crys], [data-crys-abstract], [data-marble] { display: none !important; } [data-sig="regmarks"], [data-sig="regmarks2"] { display: none !important; } /* ---- SELETOR DE TEMA (hero): setas flanqueiam o nome, sob os CTAs ---- */ #lp-hero-label { padding: 4px 16px 30px !important; gap: 10px !important; } .lp-hero-arrow { position: static !important; transform: none !important; width: 48px !important; height: 48px !important; } .lp-hero-halo { width: 44px !important; height: 44px !important; } .lp-hero-halo svg { width: 26px !important; height: 26px !important; } /* ---- SEÇÕES: TRATAMENTO ÚNICO PARA TODAS ---- Os 17 blocos de primeiro nível da landing (nav, header, 14 section, footer) seguem dois padrões: ou a própria seção carrega `max-width:1220px; padding:112px 32px`, ou ela é full-bleed (cor de fundo) e o padding está num DIV INTERNO com max-width. A regra anterior mirava só `section[...]`, então o segundo padrão (ex.: "cta final", footer, demo, comparativo) continuava com o respiro de desktop — daí o "bloco de cor chapado". Aqui os DOIS padrões recebem o mesmo tratamento. */ [data-screen-label][style*="max-width"], [data-screen-label] > div[style*="max-width"]:not(#lp-navinner) { max-width: 100% !important; padding-left: 18px !important; padding-right: 18px !important; padding-top: 56px !important; padding-bottom: 52px !important; } /* títulos das seções não podem estourar nem dominar a tela */ h2 { font-size: clamp(26px, 7.4vw, 38px) !important; line-height: 1.1 !important; } section[data-screen-label] p { font-size: 15.5px !important; } /* EXCEÇÃO ao empilhamento: a tabela comparativa (RECURSO | NOVIXFIN | PLANILHA | APPS) perde o sentido empilhada, porque as colunas SÃO a comparação e não há rótulo por célula. Mantém as 4 colunas, comprimindo fonte e respiro. Vence a regra genérica por ter o tipo no seletor. */ section[data-screen-label="comparativo"] [style*="grid-template-columns"] { grid-template-columns: 1.45fr 1fr 1fr 1fr !important; font-size: 11.5px !important; } section[data-screen-label="comparativo"] [style*="grid-template-columns"] > div { padding: 10px 7px !important; overflow-wrap: anywhere; } /* blocos decorativos posicionados para telas largas não podem gerar rolagem lateral nem cobrir o conteúdo */ [data-screen-label] > div[aria-hidden="true"][style*="position: absolute"], [data-screen-label] > div[data-parallax][style*="position: absolute"] { display: none !important; } /* ---- "15 temas": setas menores e o nome sem largura mínima de desktop ---- */ #lp-sel { gap: 10px !important; padding: 18px 4px 10px !important; } #lp-sel > button { width: 48px !important; height: 48px !important; } #lp-sel > div { min-width: 0 !important; } #lp-sel > div > span[aria-live] { min-height: 46px !important; font-size: 26px !important; } /* alvos de toque */ a[href], button { min-height: 44px; } }