/* ============================================================ Microsite WVDS inStore Music — preview estático v2 (24-Ago, revisão look&feel): fontes, botões, cartões e sub-menu extraídos das páginas REAIS de amplitudenet.pt (software-digital-signage, digital-signage, corporate-tv, servicos, plano-de-precos) — não aproximados, replicados. v3 (24-Ago, experiência de cor): accent trocado de laranja WVDS para VERDE Spotify (#1DB954/#1ED760), por pedido explícito do César — "ficar mais agarrado ao Spotify" — e contra-argumento válido de que o Moodby não usa o verde fortemente (é preto/branco com um toque de verde-néon, não um site verde). Trivial reverter: só o bloco :root abaixo. v4 (25-Ago, dark mode): fundo claro → preto/quase-preto. Motivo (decisão do César, #A aplicado): diferencia dos 5 concorrentes estudados (todos claros), dá ao WVDS inStore Music ambiente próprio dentro do site AmplitudeNet, aproxima de plataformas de música (Spotify/Apple Music/SoundCloud). Verde Spotify confirmado como acento (não trocado p/ laranja — perguntado explicitamente, ver estudo §4). Ver docs/studies/produto/estudo_identidade_visual_homepage.md. ============================================================ */ /* Fontes reais do site (TTF descarregados de amplitudenet.pt/css/fonts/) */ @font-face{font-family:"Gilroy-Extrabold";src:url('fonts/Gilroy-ExtraBold.ttf');font-weight:700;font-display:swap} @font-face{font-family:"Gilroy-Bold";src:url('fonts/Gilroy-Bold.ttf');font-weight:700;font-display:swap} @font-face{font-family:"Lato-Regular";src:url('fonts/Lato-Regular.ttf');font-display:swap} @font-face{font-family:"Lato-Bold";src:url('fonts/Lato-Bold.ttf');font-weight:700;font-display:swap} :root{ --ms-navy:#1e3a5f; /* Accent verde-Spotify — bright p/ botões e blocos escuros, dark p/ texto sobre branco (WCAG AA) */ --ms-accent:#1DB954; --ms-accent-dark:#148a3e; --ms-accent-light:#1ED760; --ms-cream:#EAF9EF; --ms-cream-soft:#E3F7E9; /* v4 (25-Ago, dark mode): fundo passa a preto/quase-preto — diferencia dos concorrentes (todos claros), dá ambiente próprio ao WVDS dentro do site AmplitudeNet, aproxima de Spotify/Apple Music/SoundCloud (#T aplicado, decisão do César, ver estudo_identidade_visual_homepage.md §0). --ms-cream/--ms-cream-soft mantêm-se claros de propósito — funcionam como "contraponto raro" (bloco iluminado dentro do preto), não como base. */ --ms-bg:#0b0c0e; --ms-bg-alt:#15171b; --ms-bg-card:#1c1e23; --ms-border:rgba(255,255,255,.10); --ms-border-lt:rgba(255,255,255,.14); --ms-canvas-alt:var(--ms-bg-alt); --ms-text:#e8e9eb; --ms-text-dim:#9aa0ab; --ms-site-link:#05a3ff; --ms-site-dark:#1d263f; --font-display:"Gilroy-Extrabold","Gilroy-Bold",Arial,sans-serif; --font-display-bold:"Gilroy-Bold",Arial,sans-serif; --font-body:"Lato-Regular",Arial,sans-serif; --font-body-bold:"Lato-Bold",Arial,sans-serif; } *{box-sizing:border-box;margin:0;padding:0} html{scroll-behavior:smooth} @media (prefers-reduced-motion: reduce){ html{scroll-behavior:auto} *{transition:none!important;animation:none!important} } body{font-family:var(--font-body);font-size:17px;line-height:1.6;color:var(--ms-text);background:var(--ms-bg)} strong,b{font-family:var(--font-body-bold);font-weight:normal} .bullets-verde li::marker{color:var(--ms-accent-light)} /* bullets no verde-accent (pedido 2026-09-03, secção Âmbito) */ /* Lato-Regular não tem corte bold; sem isto o não engorda (fix 2026-09-03) */ img{max-width:100%;display:block;width:auto;height:auto} /* width:auto/height:auto (2026-09-11): desde que todas as passaram a ter width=/height= no HTML (anti-layout-shift), o browser mapeia esses atributos como valores CSS reais — qualquer regra que só limite UM eixo (height, max-height, width…) sem isto fica presa ao valor em bruto do atributo no outro eixo, distorcendo a imagem. Uma regra específica (classe) continua a vencer esta por especificidade — só cobre o eixo que mais ninguém define. */ a{color:var(--ms-site-link)} .wrap{max-width:1320px;margin:0 auto;padding:0 24px} /* 1320px = container-xl do site amplitudenet (era 1140; alinhamento pedido César 2026-09-04) */ /* ---- chrome placeholder do site-mãe (substituído pelo header real na integração) ---- */ .site-chrome{background:#000;color:#fff;font-size:13px;padding:10px 0} .site-chrome .wrap{display:flex;justify-content:space-between;align-items:center} .site-chrome .menu-fake{opacity:.75;letter-spacing:.03em} .site-chrome strong{font-family:var(--font-display)} /* ---- second navbar — réplica de .navbar.software-navbar (real) ---- */ .ms-nav{background:var(--ms-bg-alt);border:1px solid var(--ms-border);box-shadow:0 4px 8px 0 rgba(0,0,0,.35);position:sticky;top:0;z-index:50} @media(max-width:1100px){.ms-nav::after{content:"";position:absolute;top:0;right:0;bottom:0;width:240px;background:linear-gradient(to right,transparent,var(--ms-bg-alt));pointer-events:none;z-index:1;opacity:1;transition:opacity .2s} .ms-nav.scroll-at-end::after{opacity:0}} /* pista visual de "há mais para scrollar" — só quando os itens do menu já não cabem todos (pedido César 2026-09-11). Largura generosa (240px, era 44px→90px→170px) para nunca deixar uma opção inteira desaparecer sem pelo menos parte dela a esbater — o padding de 30px de cada lado das opções tornava fácil um corte "limpo". Desaparece (.scroll-at-end, classe posta pelo JS em microsite.js) quando o scroll chega ao fim — nesse ponto não há mais nada para sinalizar. pointer-events:none para não bloquear cliques no CTA por baixo. */ .ms-nav .wrap{display:flex;align-items:center;gap:2px;overflow-x:auto;white-space:nowrap;height:52px} .ms-nav-logo{height:38px;flex-shrink:0} /* barra cresce o mínimo possível — o logo é que ocupa quase toda a altura, não a barra (pedido César 2026-09-11; -6px para dar mais respiro à barra, 2026-09-11). width:auto vem do fix geral em img{} — ver linha 53. flex-shrink:0: sem isto o logo era esmagado pela barra flex em janelas estreitas. */ .ms-nav a{display:inline-flex;align-items:center;flex-shrink:0;height:100%;padding:0 30px;color:var(--ms-text);text-decoration:none;font-family:var(--font-body-bold);font-size:18px;border-top:3px solid transparent;border-bottom:3px solid transparent;box-sizing:border-box;transition:none} /* 18px = mesmo tamanho dos links do menu principal do site (medido no header real, pedido César 2026-09-04; era 14px) · padding 24px (era 14px) = mais espaçamento entre opções, idem · flex-shrink:0 (2026-09-11): sem isto o logo (imagem, sem "largura mínima" de texto a travar) era esmagado/deformado em janelas estreitas — o overflow já é tratado por overflow-x:auto no .wrap, os itens não devem encolher · border-top transparente a mais (2026-09-11): só o border-bottom com box-sizing:border-box consumia 3px SÓ no fundo da caixa, desalinhando a centragem vertical em 1.5px (mais visível no logo, gráfico, do que no texto) — border-top transparente simétrico repõe o centro real, sem criar traço visível (fica sempre transparent) */ .ms-nav a.ms-nav-brand{padding-left:0} /* único item do nav com espaçamento assimétrico (pedido César 2026-09-11): o logo herdava o padding:0 30px de todos os itens, ficando indentado em relação ao conteúdo da página — encostado à borda esquerda do .wrap, mantém o padding direito. */ .ms-nav-home-icon{display:none;width:20px;height:20px;flex-shrink:0;margin-right:10px} /* ícone de casa dentro do MESMO link do logo (pedido César 2026-09-17) — não é um item novo do menu, só um elemento a mais na mesma coluna. Oculto em TODO o lado (mobile e desktop, pedido César 2026-09-28) — o logo já é link para a home, o ícone tornou-se redundante; era só display:none em mobile numa 1.ª ronda, alargado à totalidade depois. */ .ms-nav a:hover{color:var(--ms-accent);border-bottom-color:var(--ms-accent)} .ms-nav a.active{color:var(--ms-accent);border-bottom-color:var(--ms-accent)} .ms-nav a.cta{background:var(--ms-accent);color:#fff;border-radius:6px;padding:8px 18px;margin-left:auto;height:auto;border-top:none;border-bottom:none} .ms-nav a.cta:hover{background:var(--ms-accent-dark);color:#fff;border-bottom:none} /* ---- breadcrumb ---- */ .crumb{font-family:var(--font-body-bold);font-size:13px;letter-spacing:.05em;text-transform:uppercase;color:var(--ms-text-dim);padding:18px 0 0} .crumb a{color:var(--ms-text-dim);text-decoration:none} /* ---- hero — réplica de .wvds-sub-hero + .section-title ---- */ .hero{position:relative;color:#fff;overflow:hidden;background:var(--ms-bg)} .hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:.85} /* degradê até ao preto do fundo (--ms-bg) na base — a foto "derrete" na secção seguinte, sem corte visível entre a hero e o resto da página escura */ .hero .shade{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,12,14,.5) 0%,rgba(11,12,14,.15) 30%,rgba(11,12,14,.45) 60%,rgba(11,12,14,.9) 88%,rgba(11,12,14,1) 100%)} .hero .wrap{position:relative;padding-top:60px;padding-bottom:46px;max-width:1320px} .hero.inner{margin-top:0} .hero h1{font-family:var(--font-display);font-weight:700;font-size:2.8rem;line-height:3.5rem;max-width:18ch;text-shadow:0 4px 34px rgba(0,0,0,1),0 3px 14px rgba(0,0,0,1),0 2px 6px rgba(0,0,0,1),0 1px 2px rgba(0,0,0,1)} .hero h1 em{font-style:normal;color:var(--ms-accent)} .hero p.sub{margin-top:22px;font-family:var(--font-body);font-size:19px;max-width:51ch;text-shadow:0 2px 18px rgba(0,0,0,.8),0 1px 4px rgba(0,0,0,.9)} .hero .ctas{margin-top:30px;display:flex;gap:14px;flex-wrap:wrap;animation:heroCtasFadeIn 1.6s ease-out .3s both} /* pedido César 2026-09-17 — fade-in ao carregar a página, não ao scroll (a hero já está visível de início) */ @keyframes heroCtasFadeIn{from{opacity:0}to{opacity:1}} @media(prefers-reduced-motion:reduce){.hero .ctas{animation:none}} .hero .ctas .btn{font-size:20px} @media(max-width:820px){.hero h1{font-size:2.1rem;line-height:2.5rem}.hero .wrap{padding-top:56px;padding-bottom:56px}} /* ---- hero-vh — hero da homepage ocupa o 1.º ecrã e os indicadores ficam colados ao fundo, seja qual for a altura da janela (pedido César 2026-09-07, referência amplitudenet.pt). Lá é `.stats-container{position:fixed;bottom:20px}` só em desktop; aqui é flex-column + margin-top:auto — mesmo resultado no 1.º ecrã, sem overlay sobre o resto da página, sem z-index com players/modal. --chrome-h = o que fica acima do hero e em fluxo: header real (65px) + ms-nav (50px) no preview integrado. Afinar na integração. ---- */ .hero.hero-vh{--chrome-h:115px;height:calc(100vh - var(--chrome-h));height:calc(100svh - var(--chrome-h));min-height:520px;padding:0;display:flex;flex-direction:column} /* altura = 1.º ecrã (não min-height: assim encolhe com a janela e tudo se reajusta em vh); padding:0 anula o .hero{padding:140px 0} que o esqueleto do amplitudenet injecta na sim/integração */ .hero.hero-vh .wrap{width:100%;box-sizing:border-box;padding-top:clamp(16px,3vh,32px);padding-bottom:clamp(16px,3vh,32px);flex:1 1 auto;min-height:0;display:flex;flex-direction:column;justify-content:center} /* texto + CTAs centrados verticalmente no espaço entre o submenu e o bloco dos indicadores (como no amplitudenet, onde o texto está a ~35%); paddings/tipografia fluidos para caber em janelas baixas */ .hero.hero-vh h1{font-size:clamp(2rem,4.8vh,2.8rem);line-height:1.25;margin:0;text-align:left} /* margin:0 anula o .hero h1{margin:20px 0 10px} do esqueleto, que desviava o bloco 20px do centro; text-align:left anula o .hero h1{text-align:center} que o esqueleto aplica a ≤600px (pedido César: H1 sempre à esquerda) */ .hero.hero-vh .ctas .btn{margin-top:0} /* idem para o .hero .btn{margin-top:20px} do esqueleto */ .hero.hero-vh p.sub{margin-top:clamp(12px,2.5vh,22px);font-size:clamp(16px,2.4vh,19px)} .hero.hero-vh .ctas{margin-top:clamp(16px,3.5vh,30px)} .hero.hero-vh .hero-stats{flex:0 0 auto;justify-content:flex-end;padding-top:0;padding-bottom:clamp(14px,3vh,28px);z-index:2} /* último filho da coluna flex: fica no fundo do HERO (= fundo do ecrã) e reserva o seu espaço, para o texto centrar no que sobra; não é fixo à janela — scrolla com a página, não flutua sobre o resto */ .hero.hero-vh .stats{background:rgba(21,23,27,.83);backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);border:1px solid var(--ms-border);box-shadow:0 1px 1px #000,0 12px 32px rgba(0,0,0,.35);padding:clamp(16px,3.5vh,34px) 0} /* cartão translúcido sobre a foto, como o .stats-row do amplitudenet (hwb 207 1% 91% / .83) */ .hero.hero-vh .stats .n{font-size:clamp(1.6rem,3.6vh,2.3rem);line-height:1} .hero.hero-vh .stats .d{font-size:clamp(14px,2vh,16px);margin-top:clamp(4px,1vh,8px)} @media(max-width:820px){.hero.hero-vh{height:auto;min-height:0;display:block}.hero.hero-vh .wrap{display:block;padding-top:56px;padding-bottom:16px}.hero.hero-vh h1{font-size:2.1rem;line-height:2.5rem}.hero.hero-vh p.sub{font-size:19px}.hero.hero-vh .hero-stats{padding-top:0;padding-bottom:24px}} /* mobile em fluxo normal, como no amplitudenet (lá o hero fixo é d-lg-block) */ @media(max-width:600px){.hero.hero-vh .ctas{flex-direction:column;align-items:stretch;gap:12px}.hero.hero-vh .ctas .btn{width:100%;box-sizing:border-box;white-space:nowrap;text-align:center;justify-content:center}} /* larguras muito pequenas: o esqueleto força .hero .btn{width:150px} a ≤600px e o texto partia palavra a palavra — empilhar os 2 CTAs a toda a largura, uma linha cada (pedido César 2026-09-07) */ @media(max-width:820px){.hero.inner{padding-top:70px;padding-bottom:70px}} /* achado de UX mobile em produção (pedido César 2026-09-28): anula parcialmente o .hero{padding:140px 0} que o esqueleto do amplitudenet injecta (mesmo mecanismo do .hero-vh acima) — só nas 57 páginas com hero "inner"/"inner wave-bg" (as de país não têm header/hero) */ /* ---- botões — réplica de .btn-cta (gradiente a deslizar) e .btn-ghost ---- */ .btn{display:inline-block;padding:14px 26px;border-radius:8px;font-family:var(--font-body-bold);font-size:18px;text-decoration:none;border:0} .btn-primary{color:#fff;background:linear-gradient(90deg,var(--ms-accent-dark) 0%,var(--ms-accent) 45%,var(--ms-accent-light) 100%);background-size:200% 100%;background-position:100% 0;transition:background-position .5s} .btn-primary:hover,.btn-primary:active{background-position:0 0} .btn-ghost{background:transparent;color:#fff;border:2px solid rgba(255,255,255,.75);transition:background-color .6s,color .4s} .btn-ghost:hover{background:#fff;color:#000} @media(max-width:820px){.hero-vh .btn-ghost{background:#fff;color:#000}} /* achado de UX mobile em produção (pedido César 2026-09-28): o botão "Ouvir o catálogo" da homepage passa a mostrar sempre o estado que no desktop só aparece no :hover — escopo a .hero-vh (só a homepage) para não afectar o mesmo botão nas 9 páginas de sector, que não foi pedido */ /* ---- CTA secundário — nível 2 do sistema a 3 níveis (primário=.btn-primary preenchido, secundário=pílula outline verde, terciário=link de texto dentro de parágrafo, sem classe) */ .cta-link{display:inline-flex;align-items:center;gap:6px;padding:10px 20px;border-radius:8px;border:1.5px solid var(--ms-accent);color:var(--ms-accent-light);font-family:var(--font-body-bold);font-size:18px;text-decoration:none;transition:background-color .2s,color .2s} /* fade-in ao scroll (pedido César 2026-09-17) — ao contrário dos CTAs da hero, estes normalmente estão abaixo do fold, por isso disparam ao entrar no ecrã, não ao carregar a página */ .cta-link.reveal-fade,.precos-btn-fade.reveal-fade{opacity:0;transition:opacity 1s ease-out .5s} .cta-link.reveal-fade.is-visible,.precos-btn-fade.reveal-fade.is-visible{opacity:1} @media(prefers-reduced-motion:reduce){.cta-link.reveal-fade,.precos-btn-fade.reveal-fade{transition:none}} .cta-link:hover{background:var(--ms-accent);color:#0b0c0e} .claim .cta-link{background:var(--ms-accent);border-color:var(--ms-accent);color:#fff} /* dentro do .claim (fundo cream) o outline perdia legibilidade — sólido com a cor de destaque já usada no site, texto branco (pedido 2026-09-07) */ .claim .cta-link:hover{background:var(--ms-accent-dark);border-color:var(--ms-accent-dark);color:#fff} /* ---- secções ---- */ .sec{padding:70px 0} .sec.alt{background:var(--ms-canvas-alt)} .sec h1,.sec h2{font-family:var(--font-display);font-weight:700;font-size:2rem;color:var(--ms-text);margin-bottom:14px} .sec h1 em,.sec h2 em{font-style:normal;color:var(--ms-accent)} .sec .lead{font-size:18px;max-width:68ch;color:var(--ms-text-dim)} @media(min-width:900px){.sec .lead.one-line{max-width:none;white-space:nowrap}} /* réplica de .orange-title (kicker antes do H2/H3) — recolorido a cinza (pedido do César, 24-Ago): com um único accent verde na página, um segundo accent (laranja) no kicker ficava a flutuar sem ligação a mais nada. Trocar para var(--ms-accent-dark) se se preferir a versão laranja. */ .label{display:block;font-family:"Gilroy-Extrabold",Arial,sans-serif;font-size:20px;line-height:29px;letter-spacing:.5px;text-transform:uppercase;color:#ff9d00;margin-bottom:8px} @media(max-width:820px){.label{font-size:16px;line-height:24px}} /* ---- bloco-claim (cream + border laranja) ---- */ .claim{background:var(--ms-cream);border-left:4px solid var(--ms-accent);box-shadow:inset 0 0 24px rgba(29,185,84,.08);border-radius:0 10px 10px 0;padding:24px 26px;margin:18px 0} /* variante verde-escuro, teste comparativo pedido César (§2 "Os dois eixos") — scoped, não mexe no .claim global usado noutras páginas */ .claim.claim-dark{background:radial-gradient(130% 160% at 50% 0%,#2c507d 0%,var(--ms-navy) 55%,#132542 100%);box-shadow:inset 0 0 32px rgba(0,0,0,.4),inset 0 1px 0 rgba(255,255,255,.06)} /* fade-in ao scroll dos blocos de fundo azul (pedido César 2026-09-17) */ .claim-dark.reveal-fade{opacity:0;transition:opacity 2s ease-out} .claim-dark.reveal-fade.is-visible{opacity:1} @media(prefers-reduced-motion:reduce){.claim-dark.reveal-fade{transition:none}} .claim.claim-dark h3{color:var(--ms-accent);text-shadow:0 2px 8px rgba(0,0,0,.55)} .claim.claim-dark p{color:rgba(255,255,255,.82)} .claim.claim-dark ul{color:rgba(255,255,255,.82)} /* a regra .claim ul (mais abaixo) é para o fundo creme — no navy precisa de texto claro */ .claim h3{font-family:var(--font-display-bold);color:#000;font-size:22px;margin-bottom:6px} .claim p{font-size:18px;color:#2a2a2a;margin:0} .claim ul{color:#2a2a2a;margin-bottom:0} /* 1ª lista dentro de .claim (§6 direitos) — sem a cor herdava o texto quase-branco do body, ilegível em cima do creme; sem o margin-bottom:0, o esqueleto do amplitudenet dá aos