/* -------------------------------------------------- */ /* Arena Age Gate — mbivendosje me ekran të plotë, e stiluar sipas */ /* identitetit vizual të temës (variablat CSS të saj: --color-bg-elevated, */ /* --color-gold, --font-serif etj., me fallback nëse tema ndryshon një */ /* ditë). Butonat vetë janë .btn-gold/.btn-outline të temës — asnjë stil */ /* buton nuk dublikohet këtu. Rregulli "display: none" i parazgjedhur */ /* (shih includes/class-arena-age-gate.php, inline te ) e mban këtë */ /* të fshehur derisa skripti i hershëm të vendosë ndryshe. */ /* -------------------------------------------------- */ .aag-overlay { position: fixed; inset: 0; z-index: 100000; display: flex; align-items: center; justify-content: center; padding: 24px; /* Xhelozi e artë shumë e lehtë pas kartës, jo vetëm një sfond i sheshtë i errët — i jep thellësi, njësoj si efektet e tjera "glow" të sitit (p.sh. .clr-win-fx__glow te loja e ruletës). */ background: radial-gradient(ellipse at center, rgba(201, 162, 75, 0.1), transparent 60%), rgba(10, 10, 10, 0.94); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); } /* Animacion i lehtë hyrjeje — luhet automatikisht sapo overlay-i kalon nga display:none në display:flex (shih rregullin te ), pa nevojë të ndryshohet mekanizmi "asnjë flash" ekzistues. */ @keyframes aag-fade-in { from { opacity: 0; transform: translateY(18px) scale(0.97); } to { opacity: 1; transform: translateY(0) scale(1); } } .aag-card { position: relative; width: 100%; max-width: 480px; padding: 52px 44px 44px; background: linear-gradient(180deg, var(--color-bg-elevated, #1c1a17), var(--color-bg, #0a0a0a)); border: 1px solid var(--color-border, rgba(201, 162, 75, 0.25)); border-radius: var(--radius-md, 10px); box-shadow: 0 40px 100px rgba(0, 0, 0, 0.7); text-align: center; overflow: hidden; animation: aag-fade-in 0.6s cubic-bezier(0.16, 1, 0.3, 1); } /* Shirit i hollë ari sipër kartës — e njëjta "firmë" vizuale premium që sheshi/ndarjet e artë e japin gjetkë në sit. */ .aag-card::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px; background: linear-gradient( 90deg, transparent, var(--color-gold, #c9a24b), var(--color-gold-light, #e4c877), var(--color-gold, #c9a24b), transparent ); } .aag-logo { display: block; height: 48px; width: auto; margin: 0 auto 24px; } .aag-badge { display: inline-flex; align-items: center; justify-content: center; width: 64px; height: 64px; margin: 0 auto 20px; border-radius: 50%; /* I njëjti gradient ari si .btn-gold — buton e badge "flasin" të njëjtën gjuhë vizuale, jo një rreth bosh i gjeneruar rastësisht. */ background: linear-gradient(135deg, var(--color-gold-light, #e4c877), var(--color-gold, #c9a24b)); box-shadow: 0 10px 28px rgba(201, 162, 75, 0.35); font-family: var(--font-serif, 'Cormorant Garamond', serif); font-size: 22px; font-weight: 700; color: var(--color-bg, #0a0a0a); } .aag-divider { display: block; width: 56px; height: 1px; margin: 0 auto 26px; background: linear-gradient(90deg, transparent, var(--color-gold, #c9a24b), transparent); } .aag-line { margin: 0 0 16px; font-family: var(--font-sans, 'Cormorant Garamond', serif); line-height: 1.6; } .aag-line--primary { font-family: var(--font-serif, 'Cormorant Garamond', serif); font-size: clamp(21px, 2.6vw, 26px); font-weight: 600; line-height: 1.3; color: var(--color-text, #f5f3ef); } .aag-line--muted { margin-bottom: 0; font-size: 14px; font-style: italic; color: var(--color-text-muted, rgba(245, 243, 239, 0.7)); } .aag-actions { display: flex; flex-direction: column; gap: 12px; margin-top: 32px; } .aag-enter, .aag-leave { width: 100%; margin-top: 0; cursor: pointer; } @media (max-width: 480px) { .aag-card { padding: 40px 24px 32px; } .aag-logo { height: 40px; } }