/* ============================================================ Fanfic Connection — autora-v2-star.css Tema: Página de Autora V2 STAR | Dourado/Champagne Luxo Uso: carregar nas páginas de autora STAR com layout v2 ORDEM OBRIGATÓRIA no : 1. autora.css 2. autora-star.css ← sempre por último ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cormorant+Garamond:ital,wght@0,400;0,600;1,400;1,600&family=Lora:ital,wght@0,400;0,600;1,400&display=swap'); /* ============================================================ VARIÁVEIS STAR (sobrescrevem as do autora-v2.css) ============================================================ */ :root { --star-ouro: #b8860b; --star-ouro-claro: #d4a843; --star-champagne: #f5e6c8; --star-champagne2: #fdf6e8; --star-borda: #d4a843; --star-escuro: #7a5800; --star-texto: #3a2a00; --star-sombra: rgba(180,134,11,0.18); /* Sobrescreve variáveis base */ --cor-primaria: #b8860b; --cor-media: #d4a843; --cor-clara: #fdf6e8; --cor-borda: #d4a843; --fundo: #faf8f2; --fundo-card: #fdf6e8; --texto: #3a2a00; --texto-suave: #7a6030; --sombra-card: 0 2px 16px rgba(180,134,11,0.12); --fonte-titulo: 'Cormorant Garamond', Georgia, serif; } /* ============================================================ BASE ============================================================ */ body { background: var(--fundo); color: var(--star-texto); } /* ============================================================ HERO BANNER STAR ============================================================ */ .autora-hero { background: linear-gradient(135deg, #0e0900 0%, #1e1200 40%, #2d1f00 70%, #0e0900 100%) !important; } .autora-hero::before { background: repeating-linear-gradient(45deg, transparent, transparent 28px, rgba(212,168,67,0.05) 28px, rgba(212,168,67,0.05) 29px), repeating-linear-gradient(-45deg, transparent, transparent 28px, rgba(212,168,67,0.05) 28px, rgba(212,168,67,0.05) 29px) !important; } .autora-hero::after { background: radial-gradient(ellipse at 50% 120%, rgba(212,168,67,0.2) 0%, transparent 65%) !important; animation: hero-glow 3s ease-in-out infinite !important; } @keyframes hero-glow { 0%, 100% { opacity: 0.6; transform: scaleX(0.9); } 50% { opacity: 1; transform: scaleX(1.1); } } /* Estrelas flutuantes no banner */ .hero-stars { position: absolute; inset: 0; pointer-events: none; z-index: 2; } .hero-stars span { position: absolute; color: var(--star-ouro-claro); font-size: 14px; animation: float-star 4s ease-in-out infinite; opacity: 0.4; } .hero-stars span:nth-child(1) { top: 20%; left: 10%; animation-delay: 0s; font-size: 10px; } .hero-stars span:nth-child(2) { top: 60%; left: 20%; animation-delay: 0.8s; font-size: 16px; } .hero-stars span:nth-child(3) { top: 30%; left: 75%; animation-delay: 1.4s; font-size: 12px; } .hero-stars span:nth-child(4) { top: 70%; left: 85%; animation-delay: 0.4s; font-size: 18px; } .hero-stars span:nth-child(5) { top: 15%; left: 50%; animation-delay: 1.8s; font-size: 8px; } .hero-stars span:nth-child(6) { top: 80%; left: 45%; animation-delay: 1.1s; font-size: 14px; } @keyframes float-star { 0%, 100% { opacity: 0.3; transform: translateY(0); } 50% { opacity: 0.8; transform: translateY(-8px); } } /* Badge Autora Star */ .hero-badge { position: absolute; top: 0; left: 0; right: 0; padding: 9px 28px; font-family: var(--fonte-titulo); font-size: 11px; font-weight: 600; letter-spacing: 0.25em; text-transform: uppercase; color: var(--star-ouro-claro); background: rgba(212,168,67,0.07); border-bottom: 1px solid rgba(212,168,67,0.2); text-align: center; z-index: 5; } .hero-nav { top: 40px !important; } .hero-nav a { color: rgba(212,168,67,0.6) !important; } .hero-nav a:hover { color: var(--star-ouro-claro) !important; } .hero-titulo h1 { color: var(--star-champagne) !important; font-weight: 600 !important; text-shadow: 0 2px 32px rgba(180,134,11,0.4) !important; letter-spacing: 0.02em !important; } .hero-titulo .hero-sub { color: rgba(212,168,67,0.75) !important; letter-spacing: 0.2em !important; } .hero-linha { background: linear-gradient(90deg, transparent, var(--star-ouro), transparent) !important; height: 2px !important; } /* ============================================================ FOTO CIRCULAR STAR ============================================================ */ .autora-avatar { border-color: var(--star-champagne2) !important; box-shadow: 0 4px 24px var(--star-sombra), 0 0 0 3px var(--star-ouro), 0 0 0 6px rgba(212,168,67,0.15) !important; background: var(--star-champagne2) !important; } .autora-avatar:hover { box-shadow: 0 8px 32px var(--star-sombra), 0 0 0 4px var(--star-ouro-claro), 0 0 0 8px rgba(212,168,67,0.2) !important; } /* ============================================================ CITAÇÃO STAR ============================================================ */ .autora-quote blockquote { color: var(--star-escuro) !important; font-size: clamp(1rem, 2.5vw, 1.25rem) !important; } .autora-quote blockquote::before, .autora-quote blockquote::after { color: var(--star-borda) !important; opacity: 0.6; font-size: 4.5rem !important; } .autora-quote cite { color: var(--star-ouro) !important; letter-spacing: 0.12em !important; } /* ============================================================ REDES SOCIAIS STAR ============================================================ */ .social-btn { background: linear-gradient(135deg, var(--star-ouro) 0%, var(--star-ouro-claro) 100%) !important; color: #1a1200 !important; border-color: var(--star-ouro) !important; box-shadow: 0 2px 10px var(--star-sombra); letter-spacing: 0.1em !important; } .social-btn::before { content: '★ '; font-size: 10px; } .social-btn:hover { background: transparent !important; color: var(--star-escuro) !important; } /* ============================================================ BIO STAR ============================================================ */ .autora-bio-bloco { background: var(--star-champagne2) !important; border-color: rgba(212,168,67,0.3) !important; border-top-color: var(--star-ouro) !important; box-shadow: 0 2px 16px var(--star-sombra) !important; } .bloco-titulo { color: var(--star-escuro) !important; border-bottom-color: rgba(212,168,67,0.3) !important; font-weight: 600 !important; position: relative; } .bloco-titulo::after { content: '★'; position: absolute; right: 0; bottom: -1px; font-size: 12px; color: var(--star-ouro-claro); line-height: 1; } .autora-dados li { color: #7a6030 !important; } .autora-dados li strong { color: var(--star-texto) !important; } .autora-dados li a { color: var(--star-escuro) !important; } .autora-bio-texto { color: var(--star-texto) !important; } /* ============================================================ SIDEBAR STAR ============================================================ */ .sidebar-bloco { background: var(--star-champagne2) !important; border-color: rgba(212,168,67,0.3) !important; border-top-color: var(--star-ouro-claro) !important; box-shadow: 0 2px 12px var(--star-sombra) !important; } /* ============================================================ FANFICS STAR ============================================================ */ .fics-titulo { color: var(--star-texto) !important; border-bottom-color: var(--star-ouro) !important; border-bottom-width: 2px !important; } .fic-tab { border-color: rgba(212,168,67,0.3) !important; background: var(--star-champagne2) !important; color: var(--star-escuro) !important; } .fic-tab.ativo { background: var(--star-ouro) !important; color: #1a1200 !important; border-color: var(--star-ouro) !important; } .fic-tab:hover:not(.ativo) { background: var(--star-champagne) !important; } .fic-lista li { border-bottom-color: rgba(212,168,67,0.2) !important; } .fic-lista a { color: var(--star-escuro) !important; } .fic-lista a:hover { color: var(--star-ouro) !important; } .fic-meta { color: #9a7a30 !important; } /* ============================================================ PLAYLISTS STAR ============================================================ */ .playlists-titulo { color: var(--star-texto) !important; border-bottom-color: var(--star-ouro) !important; border-bottom-width: 2px !important; } .playlists-grid iframe { border-color: rgba(212,168,67,0.3) !important; } /* ============================================================ RODAPÉ STAR ============================================================ */ .autora-footer { border-top-color: rgba(212,168,67,0.3) !important; } .copyright { color: #b8a070 !important; } /* ============================================================ BOTÃO TOPO STAR ============================================================ */ #divfix a { background: linear-gradient(135deg, var(--star-ouro), var(--star-ouro-claro)) !important; color: #1a1200 !important; box-shadow: 0 3px 14px var(--star-sombra) !important; } #divfix a:hover { background: var(--star-escuro) !important; color: var(--star-champagne) !important; }