/* ========================================================================== CONECTA PLURAL · Quiet Luxury Technology Editorial Camada transversal do ecossistema · 20/09/2026 -------------------------------------------------------------------------- NÃO define a identidade cromática de um produto. Refina material, ritmo, tipografia, profundidade e motion lendo apenas tokens semânticos. Ative com: . ========================================================================== */ html[data-linguagem="quiet-luxury"] { --ql-raio-placa: clamp(22px, 2vw, 30px); --ql-raio-controle: 999px; --ql-fio: color-mix(in srgb, var(--border-default) 76%, transparent); --ql-fio-luz: color-mix(in srgb, var(--border-glass) 72%, transparent); --ql-veu: linear-gradient(158deg, color-mix(in srgb, white 4%, transparent), transparent 46%); --ql-sombra: 0 20px 60px color-mix(in srgb, var(--background-deep) 44%, transparent); --ql-sombra-hover: 0 28px 76px color-mix(in srgb, var(--background-deep) 52%, transparent); --ql-transicao: 320ms cubic-bezier(.2,.72,.2,1); } /* O fundo deixa de parecer uma cor chapada. */ html[data-linguagem="quiet-luxury"] body { background-color: var(--background-canvas); background-image: var(--campo-atmosfera); background-attachment: fixed; } /* Títulos: menos peso, mais escala e contraste editorial. */ html[data-linguagem="quiet-luxury"] :where(.editorial, h1, h2) { text-wrap: balance; } html[data-linguagem="quiet-luxury"] :where(.editorial, .titulo-cena, .titulo-folha, h1) { letter-spacing: clamp(-.058em, -0.05em, -.035em); } html[data-linguagem="quiet-luxury"] :where(.label--secao, .cartao-etiqueta, .marca-rotulo) { letter-spacing: .14em; text-transform: uppercase; } /* Vidro: fumê, pouca tinta e aresta óptica. */ html[data-linguagem="quiet-luxury"] .vidro { border-color: var(--ql-fio-luz); box-shadow: inset 0 1px 0 color-mix(in srgb, white 8%, transparent), var(--glow-subtle); } html[data-linguagem="quiet-luxury"] .vidro--pilula { border-radius: var(--ql-raio-controle); } /* Placas e cartões: menos caixa, mais materialidade. */ html[data-linguagem="quiet-luxury"] :where( .cartao, .produto-cartao, .produto, .painel-tipo, .aprovacao, .dialogo-caixa ) { border-radius: var(--ql-raio-placa); border-color: var(--ql-fio); background-image: var(--ql-veu), var(--surface-veu); box-shadow: inset 0 1px 0 color-mix(in srgb, white 3%, transparent), var(--elev-raised); } /* Interação: deslocamento mínimo, nunca "pula" como template SaaS. */ @media (hover:hover) and (pointer:fine) { html[data-linguagem="quiet-luxury"] :where( .cartao, .produto-cartao, .produto, .btn, .chip, .ligacao ) { transition: transform var(--ql-transicao), border-color var(--ql-transicao), background-color var(--ql-transicao), box-shadow var(--ql-transicao), color var(--ql-transicao); } html[data-linguagem="quiet-luxury"] :where( .cartao, .produto-cartao, .produto ):hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 color-mix(in srgb, white 4%, transparent), var(--ql-sombra-hover); } } /* Botões: cristal ou cor sólida; gradiente chamativo deixa de ser padrão. */ html[data-linguagem="quiet-luxury"] :where(.btn, .btn-icone, .chip) { border-radius: var(--ql-raio-controle); } html[data-linguagem="quiet-luxury"] .btn--primario { box-shadow: inset 0 1px 0 color-mix(in srgb, white 16%, transparent), 0 10px 28px color-mix(in srgb, var(--accent-primary) 16%, transparent); } /* Barra flutuante: a peça institucional mais consistente do ecossistema. */ html[data-linguagem="quiet-luxury"] .barra-flutuante { border-color: var(--ql-fio-luz); box-shadow: 0 14px 44px color-mix(in srgb, var(--background-deep) 34%, transparent), inset 0 1px 0 color-mix(in srgb, white 7%, transparent); } /* Linhas e separadores substituem caixas quando a hierarquia já resolve. */ html[data-linguagem="quiet-luxury"] :where(.indice-item, .linha-fixa) { border-color: var(--border-subtle); } /* Movimento reduzido continua soberano. */ @media (prefers-reduced-motion: reduce) { html[data-linguagem="quiet-luxury"] *, html[data-linguagem="quiet-luxury"] *::before, html[data-linguagem="quiet-luxury"] *::after { animation-duration: 1ms !important; animation-iteration-count: 1 !important; transition-duration: 1ms !important; scroll-behavior: auto !important; } }