/* ======================================== POKELENSTCG - MODERN DARK STYLE Adaptado para o novo visual ======================================== */ :root { /* Paleta principal */ --primary: #8ff8f5; --primary-strong: #2596be; --primary-dark: #1f6f8d; /* Backgrounds */ --bg-body: #1d1d1d; --bg-body-secondary: #242424; --bg-card: rgba(37, 150, 190, 0.14); --bg-card-hover: rgba(37, 150, 190, 0.22); /* Textos */ --text-primary: #ffffff; --text-secondary: #c8e7e5; --text-muted: #8ea5a4; /* Bordas */ --border-soft: rgba(143, 248, 245, 0.08); --border-medium: rgba(37, 150, 190, 0.25); /* Shadows */ --shadow-sm: 0 4px 14px rgba(0, 0, 0, 0.28); --shadow-md: 0 10px 28px rgba(0, 0, 0, 0.36); --shadow-lg: 0 18px 42px rgba(0, 0, 0, 0.46); /* Radius */ --radius-md: 14px; --radius-lg: 22px; /* Transition */ --transition: 0.22s ease; } /* ======================================== BASE ======================================== */ * { margin: 0; padding: 0; box-sizing: border-box; } html { scroll-behavior: smooth; } body { font-family: "Inter", Arial, sans-serif; background: linear-gradient( 135deg, rgba(10, 10, 10, 0.88) 0%, rgba(15, 25, 32, 0.9) 50%, rgba(8, 8, 8, 0.92) 100% ), url('/images/hexagon-background.png'); background-size: cover, 740px 488px; background-attachment: fixed; background-repeat: repeat; color: var(--text-primary); line-height: 1.6; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } /* ======================================== HEADER ======================================== */ header { text-align: center; background: transparent; color: var(--text-primary); padding: 22px 14px; position: relative; } .top-bar { height: 8px; background: linear-gradient( 90deg, var(--primary) 0%, var(--primary-strong) 100% ); width: 100%; box-shadow: 0 2px 8px rgba(0,0,0,0.45), 0 0 22px rgba(37, 150, 190, 0.35); } .logo { height: 64px; width: auto; border-radius: 18px; box-shadow: 0 8px 24px rgba(0,0,0,0.42), 0 0 18px rgba(37, 150, 190, 0.18); transition: transform var(--transition), box-shadow var(--transition); } .logo:hover { transform: translateY(-2px) scale(1.02); box-shadow: 0 12px 32px rgba(0,0,0,0.52), 0 0 24px rgba(143, 248, 245, 0.2); } /* ======================================== MAIN ======================================== */ main { max-width: 980px; margin: 34px auto; padding: 0 20px; } /* ======================================== CARDS / SECTIONS ======================================== */ section { background: rgba(37, 150, 190, 0.4); border: 1px solid rgba(37, 150, 190, 0.28); box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25); margin-bottom: 30px; border-radius: var(--radius-lg); padding: 22px; backdrop-filter: blur(10px); transition: transform var(--transition), box-shadow var(--transition), border-color var(--transition), background var(--transition); } section:hover { transform: translateY(-4px); background: rgba(37, 150, 190, 0.38); border-color: rgba(37, 150, 190, 0.85); box-shadow: 0 12px 40px rgba(37, 150, 190, 0.35), 0 0 18px rgba(37, 150, 190, 0.25); } /* ======================================== TYPOGRAPHY ======================================== */ h1 { color: var(--text-primary); font-size: 2.2rem; font-weight: 800; letter-spacing: -0.03em; } h2 { color: var(--primary); margin-top: 0; margin-bottom: 14px; font-size: 1.4rem; font-weight: 700; letter-spacing: -0.02em; } p { color: var(--text-secondary); } /* ======================================== TAGS LIST ======================================== */ .tags ul { list-style: none; padding: 0; margin: 14px 0 0 0; display: flex; flex-direction: column; gap: 10px; } .tags ul li { display: flex; align-items: center; gap: 14px; padding: 12px; border-radius: 14px; background: linear-gradient( 135deg, rgba(255,255,255,0.015), rgba(255,255,255,0.03) ); border: 1px solid rgba(255,255,255,0.025); color: var(--text-secondary); font-size: 15px; transition: transform var(--transition), background var(--transition), border-color var(--transition); } .tags ul li:hover { transform: translateX(4px); background: linear-gradient( 135deg, rgba(37, 150, 190, 0.18), rgba(143, 248, 245, 0.06) ); border-color: rgba(143, 248, 245, 0.08); } /* ======================================== TAG IMAGES ======================================== */ .tags ul li img { width: 54px; height: 54px; object-fit: cover; border-radius: 50%; flex: 0 0 54px; background: rgba(255,255,255,0.03); border: 2px solid rgba(143, 248, 245, 0.12); box-shadow: inset 0 2px 8px rgba(0,0,0,0.35), 0 4px 14px rgba(0,0,0,0.28); transition: transform var(--transition), border-color var(--transition), box-shadow var(--transition); } .tags ul li:hover img { transform: scale(1.05); border-color: rgba(143, 248, 245, 0.3); box-shadow: inset 0 2px 8px rgba(0,0,0,0.35), 0 0 18px rgba(143, 248, 245, 0.16); } /* ======================================== LINKS ======================================== */ a { color: var(--primary); text-decoration: none; transition: color var(--transition), opacity var(--transition); } a:hover { color: #ffffff; } /* ======================================== FOOTER ======================================== */ footer { text-align: center; background-color: rgba(8, 8, 8, 0.9) !important; border-top: 1px solid rgba(37, 150, 190 0.2); padding: 26px 0; color: var(--text-muted); font-size: 14px; margin-top: 10px; } /* ======================================== MOBILE ======================================== */ @media (max-width: 600px) { main { padding: 0 14px; } h1 { font-size: 1.8rem; } h2 { font-size: 1.2rem; } .logo { height: 52px; } section { padding: 18px; border-radius: 18px; } .tags ul li { gap: 12px; font-size: 14px; padding: 10px; } .tags ul li img { width: 48px; height: 48px; flex: 0 0 48px; } }