/* ============================================================================ LOVIA Perfumes Árabes — folha de estilo única do site Transcrita fielmente de docs/modelo-conceitual.jsx (especificação aprovada 03/08/2026), com os tokens resolvidos em valores literais: noir #0D0D0F · ébano #16151A · carvão #1F1D24 · marfim #F7F3EC champanhe #D4AF37 · champanhe claro #E8CE79 · esmeralda #0B3B32 esmeralda claro #12594B · bordô #4B0F1F · fumaça rgba(247,243,236,0.55) linha rgba(212,175,55,0.22) Acréscimos do build real (marcados "BUILD REAL"): fotos reais nos arcos, menu mobile funcional, skip-link, avisos de demonstração, links no lugar de botões de navegação. ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:wght@300;400;500;600;700&family=Jost:wght@200;300;400;500;600&display=swap'); .lovia * { box-sizing: border-box; } .lovia { background: #0D0D0F; color: #F7F3EC; font-family: 'Jost', 'Helvetica Neue', sans-serif; font-weight: 300; min-height: 100vh; -webkit-font-smoothing: antialiased; overflow-x: hidden; } /* BUILD REAL: o modelo era um
React; aqui .lovia é o */ body.lovia { margin: 0; } .lovia button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; } .lovia input, .lovia select, .lovia textarea { font-family: inherit; } .lovia :focus-visible { outline: 2px solid #D4AF37; outline-offset: 3px; } .serif { font-family: 'Cormorant Garamond', Georgia, serif; } .eyebrow { font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 400; color: #D4AF37; } .eyebrow-mute { color: rgba(247,243,236,0.45); } .wrap { max-width: 1240px; margin: 0 auto; padding: 0 28px; } .hairline { height: 1px; background: rgba(212,175,55,0.22); border: 0; } /* --- BUILD REAL: skip-link "Pular para o conteúdo" --- */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 200; background: #D4AF37; color: #0D0D0F; padding: 12px 22px; font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; text-decoration: none; font-weight: 500; } .skip-link:focus-visible { left: 0; } /* --- BUILD REAL: texto só para leitores de tela (regiões aria-live fixas) --- */ .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; } /* --- header --- */ .hdr { position: sticky; top: 0; z-index: 60; background: rgba(13,13,15,0.82); backdrop-filter: blur(14px); border-bottom: 1px solid rgba(212,175,55,0.22); } .hdr-in { display: flex; align-items: center; gap: 32px; height: 74px; } .mark { font-family: 'Cormorant Garamond', serif; font-size: 28px; letter-spacing: 0.34em; color: #D4AF37; font-weight: 500; padding-left: 6px; line-height: 1; } .mark small { display: block; font-family: 'Jost', sans-serif; font-size: 7px; letter-spacing: 0.42em; color: rgba(247,243,236,0.5); margin-top: 4px; padding-left: 3px; } a.mark { text-decoration: none; } /* BUILD REAL: logo é link para index.html */ .nav { display: flex; gap: 30px; margin-left: auto; } /* BUILD REAL: navegação com (páginas reais), preservando o estilo dos buttons do modelo */ .nav button, .nav a { font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(247,243,236,0.68); padding: 6px 0; position: relative; transition: color .25s; text-decoration: none; } .nav button:hover, .nav button.on, .nav a:hover, .nav a.on { color: #D4AF37; } .nav button.on::after, .nav a.on::after { content: ''; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: #D4AF37; } .hdr-acts { display: flex; gap: 18px; align-items: center; margin-left: auto; } .nav + .hdr-acts { margin-left: 0; } .bag { position: relative; } /* BUILD REAL: sacola é link com ícone SVG */ a.bag { display: inline-flex; color: rgba(247,243,236,0.8); transition: color .25s; } a.bag:hover { color: #D4AF37; } .bag-n { position: absolute; top: -6px; right: -9px; background: #D4AF37; color: #0D0D0F; font-size: 9px; font-weight: 600; width: 16px; height: 16px; border-radius: 50%; display: grid; place-items: center; } .burger { display: none; } /* --- BUILD REAL: menu mobile (painel dropdown sob o header, <=680px) --- */ .menu-mobile { display: none; position: absolute; top: 100%; left: 0; right: 0; background: #0D0D0F; border-bottom: 1px solid rgba(212,175,55,0.22); box-shadow: 0 18px 34px rgba(0,0,0,0.55); } .menu-mobile a { display: block; padding: 16px 28px; font-size: 12px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(247,243,236,0.68); text-decoration: none; border-top: 1px solid rgba(247,243,236,0.07); transition: color .25s; } .menu-mobile a:hover, .menu-mobile a.on { color: #D4AF37; } /* --- botões --- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 15px 30px; font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase; border: 1px solid #D4AF37; color: #D4AF37; background: transparent; transition: background .3s, color .3s; text-decoration: none; /* BUILD REAL: .btn também é usado em */ } .btn:hover { background: #D4AF37; color: #0D0D0F; } .btn-solid { background: #D4AF37; color: #0D0D0F; } .btn-solid:hover { background: #E8CE79; color: #0D0D0F; } .btn-ghost { border-color: rgba(247,243,236,0.28); color: rgba(247,243,236,0.8); } .btn-ghost:hover { background: rgba(247,243,236,0.08); color: #F7F3EC; } .btn:disabled { opacity: .35; cursor: not-allowed; } .btn-sm { padding: 10px 18px; font-size: 10px; } /* --- hero --- */ .hero { position: relative; overflow: hidden; border-bottom: 1px solid rgba(212,175,55,0.22); } .hero-in { position: relative; z-index: 3; padding: 120px 0 130px; text-align: center; } .hero-title { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(52px, 11vw, 138px); line-height: 0.94; letter-spacing: 0.06em; color: #F7F3EC; margin: 0; } .hero-title em { font-style: normal; color: #D4AF37; } .hero-sub { margin: 26px auto 0; max-width: 460px; font-size: 14px; line-height: 1.9; color: rgba(247,243,236,0.62); letter-spacing: 0.04em; } .smoke { position: absolute; inset: 0; z-index: 2; pointer-events: none; } .smoke span { position: absolute; bottom: -140px; width: 200px; height: 400px; border-radius: 50%; background: radial-gradient(ellipse at center, rgba(212,175,55,0.10), transparent 68%); filter: blur(28px); animation: rise 17s ease-in-out infinite; } @keyframes rise { 0% { transform: translateY(0) scale(1); opacity: 0; } 25% { opacity: .9; } 100% { transform: translateY(-560px) scale(1.7); opacity: 0; } } /* --- selos --- */ .selos { background: #F7F3EC; color: #0D0D0F; } .selos-in { display: grid; grid-template-columns: repeat(4, 1fr); } .selo { padding: 30px 20px; text-align: center; border-right: 1px solid rgba(13,13,15,0.1); } .selo:last-child { border-right: 0; } .selo b { display: block; font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 500; margin-top: 12px; } .selo p { margin: 5px 0 0; font-size: 11px; color: rgba(13,13,15,0.55); letter-spacing: .04em; } /* --- seções --- */ .sec { padding: 92px 0; } .sec-head { text-align: center; margin-bottom: 52px; } .sec-head h2 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: clamp(30px, 4.5vw, 46px); margin: 14px 0 0; letter-spacing: 0.03em; } .sec-head p { margin: 12px auto 0; max-width: 480px; font-size: 13px; line-height: 1.85; color: rgba(247,243,236,0.5); } /* --- ASSINATURA: cartão em arco (mihrab) --- */ .grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 28px; } .card { text-align: center; cursor: pointer; } /* BUILD REAL: card inteiro é um para produto.html?slug=... */ a.card { display: block; text-decoration: none; color: inherit; } .arch { position: relative; background: linear-gradient(175deg, #1F1D24, #0D0D0F); border: 1px solid rgba(212,175,55,0.22); border-radius: 130px 130px 6px 6px; padding: 40px 18px 26px; overflow: hidden; transition: border-color .35s, transform .35s; } .card:hover .arch { border-color: #D4AF37; transform: translateY(-5px); } .arch::before { content: ''; position: absolute; inset: 8px; border: 1px solid rgba(212,175,55,0.16); border-radius: 122px 122px 3px 3px; pointer-events: none; } .arch-glow { position: absolute; left: 50%; top: 24%; width: 190px; height: 190px; transform: translateX(-50%); border-radius: 50%; filter: blur(44px); opacity: .5; transition: opacity .35s; } .card:hover .arch-glow { opacity: .85; } .card-brand { margin-top: 16px; font-size: 9px; letter-spacing: 0.26em; text-transform: uppercase; color: rgba(247,243,236,0.42); } .card-name { font-family: 'Cormorant Garamond', serif; font-size: 22px; margin: 5px 0 0; letter-spacing: 0.03em; font-weight: 400; } .card-fam { font-size: 10px; letter-spacing: 0.14em; color: rgba(247,243,236,0.4); margin-top: 3px; } .card-price { margin-top: 10px; font-size: 14px; color: #D4AF37; letter-spacing: .06em; } .tag { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); z-index: 4; font-size: 8px; letter-spacing: 0.2em; text-transform: uppercase; padding: 4px 10px; border: 1px solid currentColor; white-space: nowrap; } .tag-soon { color: rgba(247,243,236,0.5); } .tag-hot { color: #D4AF37; } /* --- BUILD REAL: fotos reais de produto dentro dos arcos --- O modelo usava flacons SVG; o site real usa fotos (JPG/PNG de fundo branco convertidos p/ webp). O interior do arco recebe fundo CLARO em gradiente e a foto entra com mix-blend-mode: multiply — o fundo branco da foto "some". Uso:
Frasco de {nome} — {marca}
*/ .arch-foto { background: linear-gradient(180deg, #FDFBF7, #EDE4D2); } .arch-foto::before { border-color: rgba(212,175,55,0.35); } .arch-foto .tag-soon { color: rgba(13,13,15,0.45); } .palco-foto { position: relative; width: 100%; aspect-ratio: 3 / 4; display: grid; place-items: center; overflow: hidden; } .foto-produto { width: 100%; height: 100%; object-fit: contain; mix-blend-mode: multiply; } /* --- divisor de treliça --- */ .lattice { height: 46px; opacity: .3; } /* --- catálogo --- */ .cat { display: grid; grid-template-columns: 232px 1fr; gap: 46px; align-items: start; } .filtro { position: sticky; top: 100px; border: 1px solid rgba(212,175,55,0.22); padding: 24px; } /* BUILD REAL: os títulos dos blocos de filtro são

(hierarquia h1→h2→h3 sem furo); h4 mantido no seletor por compatibilidade visual */ .filtro h2, .filtro h4 { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: #D4AF37; margin: 0 0 14px; font-weight: 500; } .filtro-bloco { margin-bottom: 26px; } .opt { display: block; width: 100%; text-align: left; font-size: 12px; padding: 6px 0; color: rgba(247,243,236,0.6); letter-spacing: .05em; transition: color .2s; } .opt:hover { color: #F7F3EC; } .opt.on { color: #D4AF37; } .opt.on::before { content: '◆ '; font-size: 8px; vertical-align: middle; } .range { width: 100%; accent-color: #D4AF37; } /* --- ficha de produto --- */ .pdp { display: grid; grid-template-columns: 1fr 1fr; gap: 66px; align-items: start; } .pdp-vis { position: relative; border: 1px solid rgba(212,175,55,0.22); border-radius: 190px 190px 6px 6px; padding: 64px 30px 44px; background: linear-gradient(175deg, #1F1D24, #0D0D0F); overflow: hidden; } /* BUILD REAL: ficha com foto real — mesma técnica do .arch-foto */ .pdp-vis.arch-foto { background: linear-gradient(180deg, #FDFBF7, #EDE4D2); } .pdp h1 { font-family: 'Cormorant Garamond', serif; font-weight: 300; font-size: 50px; margin: 10px 0 0; letter-spacing: 0.03em; line-height: 1.05; } .piramide { border-top: 1px solid rgba(212,175,55,0.22); margin-top: 30px; padding-top: 26px; } .nota-linha { display: grid; grid-template-columns: 92px 1fr; gap: 18px; padding: 13px 0; border-bottom: 1px solid rgba(247,243,236,0.07); align-items: baseline; } .nota-linha span:first-child { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: #D4AF37; } .nota-linha span:last-child { font-size: 13px; color: rgba(247,243,236,0.78); letter-spacing: .04em; } .qtd { display: inline-flex; border: 1px solid rgba(212,175,55,0.22); } .qtd button { width: 42px; height: 46px; font-size: 16px; color: #D4AF37; } .qtd span { width: 48px; height: 46px; display: grid; place-items: center; font-size: 14px; border-left: 1px solid rgba(212,175,55,0.22); border-right: 1px solid rgba(212,175,55,0.22); } /* --- carrinho / checkout --- */ .split { display: grid; grid-template-columns: 1fr 372px; gap: 46px; align-items: start; } .linha-item { display: grid; grid-template-columns: 84px 1fr auto; gap: 20px; padding: 22px 0; border-bottom: 1px solid rgba(247,243,236,0.08); align-items: center; } .mini-arch { border: 1px solid rgba(212,175,55,0.22); border-radius: 42px 42px 3px 3px; padding: 12px 6px 8px; background: #1F1D24; } /* BUILD REAL: miniatura com foto real no carrinho */ .mini-arch.arch-foto { background: linear-gradient(180deg, #FDFBF7, #EDE4D2); } .resumo { border: 1px solid rgba(212,175,55,0.22); padding: 30px; position: sticky; top: 100px; } .resumo-linha { display: flex; justify-content: space-between; font-size: 13px; padding: 9px 0; color: rgba(247,243,236,0.72); letter-spacing: .04em; } .resumo-total { display: flex; justify-content: space-between; align-items: baseline; border-top: 1px solid rgba(212,175,55,0.22); margin-top: 14px; padding-top: 18px; } .resumo-total b { font-family: 'Cormorant Garamond', serif; font-size: 30px; color: #D4AF37; font-weight: 400; } .campo { margin-bottom: 16px; } .campo label { display: block; font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(247,243,236,0.5); margin-bottom: 7px; } .campo input, .campo select { width: 100%; background: #16151A; border: 1px solid rgba(247,243,236,0.14); color: #F7F3EC; padding: 13px 15px; font-size: 13px; letter-spacing: .04em; } .campo input::placeholder { color: rgba(247,243,236,0.26); } .campo input:focus, .campo select:focus { border-color: #D4AF37; outline: none; } .dupla { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .passos { display: flex; gap: 0; margin-bottom: 42px; } .passo { flex: 1; text-align: center; padding-bottom: 14px; border-bottom: 1px solid rgba(247,243,236,0.12); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(247,243,236,0.35); } .passo.on { color: #D4AF37; border-bottom-color: #D4AF37; } .passo.feito { color: rgba(247,243,236,0.6); border-bottom-color: rgba(212,175,55,0.4); } .pgto { border: 1px solid rgba(247,243,236,0.14); padding: 18px; margin-bottom: 12px; cursor: pointer; display: flex; align-items: center; gap: 14px; transition: border-color .25s; } .pgto.on { border-color: #D4AF37; background: rgba(212,175,55,0.05); } .pgto-dot { width: 12px; height: 12px; border: 1px solid #D4AF37; border-radius: 50%; flex: none; } .pgto.on .pgto-dot { background: #D4AF37; box-shadow: inset 0 0 0 2px #0D0D0F; } /* --- painel --- */ .painel { background: #16151A; min-height: 100vh; } .kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; } .kpi { border: 1px solid rgba(212,175,55,0.22); padding: 24px; background: #0D0D0F; } .kpi-v { font-family: 'Cormorant Garamond', serif; font-size: 38px; color: #F7F3EC; margin: 10px 0 4px; font-weight: 400; letter-spacing: .02em; } .kpi-d { font-size: 11px; letter-spacing: .06em; } .up { color: #5FBF8E; } .down { color: #C4636B; } .painel-grid { display: grid; grid-template-columns: 1.65fr 1fr; gap: 18px; margin-top: 18px; } .box { border: 1px solid rgba(212,175,55,0.22); padding: 24px; background: #0D0D0F; } /* BUILD REAL: títulos dos boxes do painel são

(h1→h2 sem furo); h3 mantido no seletor por compatibilidade visual */ .box h2, .box h3 { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: #D4AF37; margin: 0 0 20px; font-weight: 500; } .lovia table { width: 100%; border-collapse: collapse; } .lovia th { font-size: 9px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(247,243,236,0.42); text-align: left; padding: 0 0 12px; font-weight: 400; } .lovia td { font-size: 12.5px; padding: 12px 0; border-top: 1px solid rgba(247,243,236,0.07); color: rgba(247,243,236,0.82); letter-spacing: .03em; } .pill { font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 9px; border: 1px solid currentColor; } .p-ok { color: #5FBF8E; } .p-warn { color: #D4AF37; } .p-bad { color: #C4636B; } .p-mute { color: rgba(247,243,236,0.45); } .funil-etapa { margin-bottom: 14px; } .funil-barra { height: 30px; background: linear-gradient(90deg, #D4AF37, #12594B); display: grid; place-items: center start; padding-left: 12px; font-size: 11px; color: #0D0D0F; font-weight: 500; letter-spacing: .06em; } .abas { display: flex; gap: 26px; border-bottom: 1px solid rgba(212,175,55,0.22); margin-bottom: 30px; } .abas button { font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; padding: 0 0 14px; color: rgba(247,243,236,0.45); border-bottom: 1px solid transparent; margin-bottom: -1px; } .abas button.on { color: #D4AF37; border-bottom-color: #D4AF37; } /* --- BUILD REAL: aviso de demonstração (checkout/admin) --- */ .aviso-demo { background: rgba(212,175,55,0.08); border: 1px solid rgba(212,175,55,0.22); padding: 12px 18px; font-size: 11px; letter-spacing: .06em; color: rgba(247,243,236,0.6); } /* --- BUILD REAL: erro de carregamento de dados (init tolerante) --- */ .lovia-erro { margin: 40px auto; max-width: 640px; border: 1px solid rgba(196,99,107,0.55); background: rgba(196,99,107,0.08); color: #F7F3EC; padding: 26px 30px; font-size: 14px; line-height: 1.8; letter-spacing: .03em; text-align: center; } /* --- rodapé --- */ .ft { border-top: 1px solid rgba(212,175,55,0.22); padding: 66px 0 30px; } .ft-grid { display: grid; grid-template-columns: 1.5fr 1fr 1fr 1fr; gap: 40px; } .ft h5 { font-size: 10px; letter-spacing: 0.24em; text-transform: uppercase; color: #D4AF37; margin: 0 0 16px; font-weight: 500; } .ft a { display: block; font-size: 12.5px; color: rgba(247,243,236,0.55); padding: 5px 0; text-decoration: none; letter-spacing: .04em; } .ft a:hover { color: #F7F3EC; } /* BUILD REAL: item de rodapé sem página de destino ainda — mesmo estilo do link, mas sem hover (nada de href="#" morto) */ .ft-mudo { display: block; font-size: 12.5px; color: rgba(247,243,236,0.55); padding: 5px 0; letter-spacing: .04em; } .ft-base { margin-top: 46px; padding-top: 24px; border-top: 1px solid rgba(247,243,236,0.08); display: flex; justify-content: space-between; font-size: 11px; color: rgba(247,243,236,0.35); letter-spacing: .06em; } /* BUILD REAL: frase da marca no rodapé + aviso de preços ilustrativos */ .ft-frase { margin: 18px 0 0; font-size: 13px; line-height: 1.85; color: rgba(247,243,236,0.5); letter-spacing: .04em; max-width: 300px; } .aviso-precos { margin: 14px 0 0; font-size: 10px; letter-spacing: .08em; color: rgba(247,243,236,0.35); } /* --- responsivo --- */ @media (max-width: 1000px) { .grid { grid-template-columns: repeat(2, 1fr); } .cat { grid-template-columns: 1fr; } .filtro { position: static; } .pdp, .split, .painel-grid { grid-template-columns: 1fr; } .kpis { grid-template-columns: repeat(2, 1fr); } .ft-grid { grid-template-columns: 1fr 1fr; } } @media (max-width: 680px) { .nav { display: none; } .burger { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; color: rgba(247,243,236,0.8); } .burger:hover { color: #D4AF37; } .menu-mobile.aberto { display: block; } .selos-in { grid-template-columns: 1fr 1fr; } .grid { grid-template-columns: 1fr; gap: 20px; } .wrap { padding: 0 18px; } .sec { padding: 60px 0; } .hero-in { padding: 80px 0 90px; } .ft-grid, .kpis { grid-template-columns: 1fr; } .ft-base { flex-direction: column; gap: 8px; } } @media (prefers-reduced-motion: reduce) { .lovia *, .lovia *::before { animation: none !important; transition: none !important; } }