/* ========================================================================== LBR VISUAL — TEMA PASTEL (teste claro / editorial) Sobrepõe a paleta escura do styles.css. Remover este no das páginas revolve ao tema original escuro. Paleta: fundo creme · texto grafite quente · acentos sálvia, terra, nuvem. ========================================================================== */ :root { /* Superfícies */ --night: #f5f3ec; /* creme principal */ --night-deep: #ece7db; /* creme profundo */ --white: #ffffff; /* Texto */ --ink: #2d2a25; /* grafite quente */ /* Acentos pastel */ --cyan-glow: #7fb49f; /* sálvia */ --azure-accent: #7f9fb6; /* nuvem suave */ --petrol-mid: #5e7e84; /* teal suave */ --petrol-light: #c07f5c; /* terracota */ --sand-accent: #ddd0b8; /* manteiga */ /* Linhas */ --line: rgba(45, 42, 37, 0.14); --line-light: rgba(45, 42, 37, 0.22); } /* ---------- Nav em vidro claro ---------- */ .nav-capsule { background: rgba(255, 255, 255, 0.72); border-color: rgba(45, 42, 37, 0.12); box-shadow: 0 12px 32px rgba(90, 78, 60, 0.18), 0 0 0 1px rgba(255, 255, 255, 0.6); } .nav-capsule:hover { border-color: rgba(127, 159, 182, 0.65); box-shadow: 0 16px 40px rgba(90, 78, 60, 0.22); } .wordmark, .menu-button { color: var(--ink); } .nav-links a { color: #4d4841; } .nav-links a:hover { color: var(--petrol-light); } .nav-cta { border-color: rgba(45, 42, 37, 0.35) !important; background: rgba(45, 42, 37, 0.06) !important; color: var(--ink) !important; } .nav-cta:hover { background: rgba(45, 42, 37, 0.1) !important; border-color: rgba(127, 159, 182, 0.7) !important; box-shadow: 0 4px 16px rgba(127, 159, 182, 0.35); } .nav-poetica, .nav-poetica i { color: var(--petrol-light) !important; } /* ---------- Herói (Home) ---------- */ .hero, .hero h1, .hero-title-prefix { color: var(--ink); } .hero-copy { color: #575249; } .hero-stage .eyebrow { color: var(--petrol-light); } .scroll-note { color: #7d7364; } /* Palavras que se movem — mesma tinta do título (sem destoar) */ .dynamic-word-stage, .letter-swap-container { color: var(--ink); text-shadow: none; } .dynamic-word-stage:hover, .letter-swap-container:hover { text-shadow: 0 0 30px rgba(192, 127, 92, 0.28); } /* Cápsula do showreel — vidro claro (sem azul-escuro), acentos terracota */ .hero-action-capsule { background: rgba(255, 255, 255, 0.72); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-color: rgba(45, 42, 37, 0.14); box-shadow: 0 14px 36px rgba(90, 78, 60, 0.16); } .hero-action-capsule:hover { border-color: rgba(192, 127, 92, 0.55); box-shadow: 0 18px 42px rgba(90, 78, 60, 0.22); } .capsule-showreel-btn { background: rgba(192, 127, 92, 0.14); border-color: rgba(192, 127, 92, 0.45); color: var(--ink); } .capsule-showreel-btn:hover { background: rgba(192, 127, 92, 0.24); border-color: rgba(192, 127, 92, 0.65); } .play-disc { background: var(--petrol-light); color: #f5f3ec; box-shadow: 0 2px 10px rgba(192, 127, 92, 0.45); } .play-duration { color: #7d7468; } .capsule-divider { background: rgba(45, 42, 37, 0.18); } .capsule-cta-link, .capsule-cta-link .arrow { color: var(--ink); } .capsule-cta-link:hover { color: var(--petrol-light); } /* ---------- Página Portfólio ---------- */ .portfolio-page-hero, .portfolio-page-hero h1 { color: var(--ink); } .portfolio-page-hero .eyebrow { color: var(--azure-accent); } .portfolio-page-sub { color: #575249; background: rgba(255, 255, 255, 0.55); } /* ---------- Serviços ---------- */ .services { background: var(--night); } .services-title .eyebrow { color: var(--cyan-glow); } .services-title h2 { color: var(--ink); } .services-subtitle { color: #575249; } .service-card { background: rgba(255, 255, 255, 0.66); border-color: rgba(45, 42, 37, 0.1); } .service-card:hover { background: rgba(255, 255, 255, 0.9); border-color: rgba(127, 159, 182, 0.6); box-shadow: 0 16px 36px rgba(90, 78, 60, 0.16); } .service-body h3 { color: var(--ink); } .service-body p { color: #575249; } /* ---------- Depoimentos / Citações ---------- */ .quote { background: #ece0cb; color: #575249; } .quote .eyebrow { color: var(--petrol-light); } /* ---------- Contacto / Instagram ---------- */ .contact, .contact h2 { color: var(--ink); } .contact-lead { color: #575249; } .contact-glow { border-color: rgba(192, 127, 92, 0.12); box-shadow: 0 0 0 45px rgba(192, 127, 92, 0.02), 0 0 0 100px rgba(192, 127, 92, 0.012); } .contact p, .contact .contact-intro { color: #575249; } .contact .text-link.light { color: var(--ink); border-color: rgba(45, 42, 37, 0.35); } .button-whatsapp { color: #2d2a25; } .instagram, .instagram a { color: var(--ink); } .instagram .ig-handle { color: var(--azure-accent); } /* ---------- Rodapé ---------- */ .site-footer { background: var(--night-deep); color: #6b645b; } .site-footer p, .site-footer a, .site-footer .footer-note { color: #6b645b; } .back-to-top, .back-to-top:hover { color: var(--ink); } /* ---------- Brilhos de fundo (manifesto + herói) -------------------- Em fundo escuro os brilhos usam blend aditivo ("lighter"/"screen"); sobre creme a soma satura para branco e desaparece. Correção: - raios grandes passam a lavagens pastel subtis em alfa baixo (sem mancha); - as partículas (pequenas) usam multiply + reforço de contraste para virarem poeira periwinkle/lilás visível. */ .hero-horizon-beam { mix-blend-mode: normal; opacity: 0.35; filter: blur(40px) sepia(1) saturate(1) brightness(0.9); } .hero-center-glow { mix-blend-mode: normal; opacity: 0.45; filter: sepia(1) saturate(1); } /* Ondas/moiré dos heróis: chocolate suave — presente mas sem escurecer */ .hero-optics-canvas, .portfolio-wave-canvas { filter: sepia(1) saturate(1) brightness(0.88) contrast(0.78); } /* Linha de scroll no acento do tema */ .scroll-line { background: linear-gradient(180deg, var(--petrol-light), transparent); } /* Depoimentos — nomes que sumiam no fundo manteiga */ .quote blockquote { color: #45423c; } .quote-author { color: var(--petrol-light); } .poetica-gradient-glow { background: radial-gradient(circle at 50% 45%, rgba(240, 232, 214, 0.6) 0%, transparent 70%); filter: blur(28px); opacity: 0.7; } .poetica-ambient-canvas { mix-blend-mode: multiply; filter: sepia(0.85) saturate(1.1) brightness(0.85) contrast(1.25); opacity: 0.75; } .glitter-canvas { mix-blend-mode: multiply; filter: brightness(0.82) contrast(1.35) saturate(1.2); opacity: 0.7; } /* ---------- Página Poética ---------- */ .page-poetica { color: var(--ink); } .poetica-divider { color: rgba(45, 42, 37, 0.18); } .poetica-lead { color: #575249; } .manifesto-quote { color: var(--ink); } .poetica-action .text-link { color: var(--ink); border-color: rgba(45, 42, 37, 0.35); } .poetica-hint { color: #575249; } .poetica-footnote { color: #7d7468; }