/* * EPOCH2 — Fantasy Redesign COMPLET v2 * Acoperă: toate paginile (news, ranking, register, login, admin, etc.) * Instalare: adaugă în după style.css: * */ /* ============================================================ FONTURI ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;600;700&family=Cinzel+Decorative:wght@400;700&family=Crimson+Text:ital,wght@0,400;0,600;1,400&display=swap'); /* ============================================================ VARIABILE ============================================================ */ :root { --gold: #c9a227; --gold-light: #f0c84a; --gold-dark: #7a5e0e; --gold-border: rgba(201,162,39,0.3); --gold-glow: rgba(201,162,39,0.12); --ember: #e05c12; --dark-bg: #0a0704; --panel-bg: rgba(12,8,3,0.92); --text-main: #d4b483; --text-muted: #7a6040; --danger-color: #8a1a0a; } /* ============================================================ BODY & FUNDAL ============================================================ */ body { background-color: var(--dark-bg) !important; font-family: 'Crimson Text', serif !important; color: var(--text-main) !important; position: relative; } body::before { content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none; background-image: linear-gradient(rgba(201,162,39,0.025) 1px, transparent 1px), linear-gradient(90deg, rgba(201,162,39,0.025) 1px, transparent 1px); background-size: 60px 60px; } body::after { content: ''; position: fixed; top: 0; left: 0; right: 0; height: 500px; z-index: 0; pointer-events: none; background: radial-gradient(ellipse 80% 60% at 50% -5%, rgba(180,80,10,0.15) 0%, transparent 70%); } .main-wrap { position: relative; z-index: 1; } /* ============================================================ HEADER / NAVBAR ============================================================ */ .header-section { background: linear-gradient(180deg, rgba(5,3,1,0.97) 0%, rgba(5,3,1,0.75) 100%) !important; border-bottom: 1px solid var(--gold-border) !important; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .main-menu ul li a { font-family: 'Cinzel', serif !important; font-size: 10.5px !important; letter-spacing: 0.18em; text-transform: uppercase; color: #7a6040 !important; transition: color 0.2s, text-shadow 0.2s; } .main-menu ul li a:hover { color: var(--gold-light) !important; text-shadow: 0 0 16px rgba(240,200,74,0.4); } /* Language select */ .lan-select { background: rgba(201,162,39,0.05) !important; border: 1px solid rgba(201,162,39,0.2) !important; } .lan-select .nice-select { color: var(--gold-dark) !important; font-family: 'Cinzel', serif !important; font-size: 10px !important; } /* Offcanvas */ .offcanvas-menu .offmenu { background: linear-gradient(180deg, #0d0804 0%, #080503 100%) !important; border-right: 1px solid var(--gold-border) !important; } .offcanvas-menu ul li a { font-family: 'Cinzel', serif !important; font-size: 11px !important; letter-spacing: 0.12em; color: #7a6040 !important; border-bottom: 1px solid rgba(201,162,39,0.07); padding: 11px 10px !important; } .offcanvas-menu ul li a:hover { color: var(--gold) !important; } /* ============================================================ PRELOADER ============================================================ */ #preloader { background: #0a0704 !important; } #preloader:before { border-color: var(--gold-dark) !important; border-top-color: var(--gold-light) !important; } /* ============================================================ PANELURI S-BOX (Login, Stats, Ranking sidebar) ============================================================ */ .s-box { background: var(--panel-bg) !important; border: 1px solid var(--gold-border) !important; position: relative; padding-top: 50px !important; /* spatiu pentru header */ margin-bottom: 30px !important; height: auto !important; /* anulam height fix din style.css */ } .s-box::before { content: ''; position: absolute; inset: 0; background: linear-gradient(135deg, rgba(201,162,39,0.04) 0%, transparent 55%); pointer-events: none; z-index: 0; } .s-box > * { position: relative; z-index: 1; } /* Header titlu box — redesign complet fara imagini */ .s-box-header { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; margin-top: 0 !important; height: 44px !important; display: flex !important; align-items: center !important; justify-content: center !important; background: linear-gradient(180deg, rgba(201,162,39,0.15) 0%, rgba(201,162,39,0.05) 100%) !important; border-bottom: 1px solid var(--gold-border) !important; } /* Ascunde imaginea bg-img care nu mai exista */ .s-box-header .bg-img { display: none !important; } .s-box-header .header-cont { position: static !important; padding: 0 !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; } .s-box-header h3 { font-family: 'Cinzel', serif !important; font-size: 10px !important; letter-spacing: 0.35em !important; color: var(--gold) !important; text-transform: uppercase !important; margin: 0 !important; text-align: center !important; } /* ============================================================ INPUT LOGIN (sidebar) ============================================================ */ .single-input-x-input { background: rgba(15,10,3,0.9) !important; border: none !important; border-bottom: 1px solid rgba(201,162,39,0.25) !important; color: var(--text-main) !important; font-family: 'Crimson Text', serif !important; font-size: 13px !important; box-shadow: none !important; transition: border-color 0.2s, background 0.2s !important; } .single-input-x-input:focus { background: rgba(201,162,39,0.07) !important; border-bottom-color: rgba(201,162,39,0.5) !important; box-shadow: 0 2px 10px rgba(201,162,39,0.06) !important; } .single-input-x-input::placeholder { color: #4a3010 !important; font-style: italic; } /* ============================================================ FORGOT PASSWORD / FORM-FGT ============================================================ */ .form-fgt { background: rgba(201,162,39,0.05) !important; border: 1px solid rgba(201,162,39,0.12) !important; color: var(--text-muted) !important; font-family: 'Crimson Text', serif !important; font-size: 11px !important; transition: all 0.2s; } .form-fgt:hover, .form-fgt a:hover { background: rgba(201,162,39,0.1) !important; color: var(--gold) !important; } /* ============================================================ BUTOANE — default / submit / LOG IN ============================================================ */ .default-button, .submit-button, button.submit-button { background: linear-gradient(180deg, #c9a227 0%, #7a5e0e 100%) !important; border: none !important; color: #0a0704 !important; font-family: 'Cinzel', serif !important; font-size: 9.5px !important; letter-spacing: 0.22em !important; text-transform: uppercase !important; font-weight: 700 !important; clip-path: polygon(0 0, calc(100% - 8px) 0, 100% 8px, 100% 100%, 8px 100%, 0 calc(100% - 8px)); box-shadow: none !important; transition: filter 0.2s, transform 0.1s !important; } .default-button:hover, .submit-button:hover { filter: brightness(1.2) !important; transform: translateY(-1px); color: #0a0704 !important; } /* Bootstrap btn override — danger/success/info/primary */ .btn-danger, .btn-primary, .btn-success, .btn-info, .btn-danger:hover, .btn-primary:hover, .btn-success:hover, .btn-info:hover { font-family: 'Cinzel', serif !important; font-size: 10px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; border: none !important; transition: filter 0.2s !important; } .btn-danger { background: linear-gradient(180deg, #8a1a0a 0%, #5a0e06 100%) !important; color: #f0c84a !important; } .btn-primary { background: linear-gradient(180deg, #1a3a6a 0%, #0e2245 100%) !important; color: #90b4e0 !important; } .btn-success { background: linear-gradient(180deg, #2a6a1a 0%, #1a4510 100%) !important; color: #90e090 !important; } .btn-info { background: linear-gradient(180deg, #1a5a6a 0%, #0e3845 100%) !important; color: #90d4e0 !important; } .btn-danger:hover { filter: brightness(1.25) !important; color: #f0c84a !important; } .btn-primary:hover { filter: brightness(1.25) !important; } .btn-success:hover { filter: brightness(1.25) !important; } .btn-info:hover { filter: brightness(1.25) !important; } .btn-sm { font-size: 9px !important; padding: 5px 12px !important; } .btn-lg { font-size: 11px !important; padding: 10px 20px !important; } /* ============================================================ TABELE — toate paginile ============================================================ */ .table, .table-dark, .table-dark.table-striped { background: transparent !important; color: var(--text-main) !important; border-color: rgba(201,162,39,0.1) !important; } .table thead th, .table .thead-inverse th { font-family: 'Cinzel', serif !important; font-size: 10px !important; letter-spacing: 0.15em; text-transform: uppercase; color: var(--gold) !important; background: rgba(201,162,39,0.07) !important; border-color: rgba(201,162,39,0.15) !important; padding: 10px 8px !important; } .table tbody tr { background: rgba(10,7,4,0.5) !important; border-bottom: 1px solid rgba(201,162,39,0.07) !important; transition: background 0.15s; } .table tbody tr:nth-child(odd) { background: rgba(20,13,5,0.6) !important; } .table tbody tr:hover { background: rgba(201,162,39,0.08) !important; } .table tbody td { font-family: 'Crimson Text', serif !important; font-size: 14px !important; color: var(--text-main) !important; border-color: rgba(201,162,39,0.07) !important; vertical-align: middle; } .table tbody td:first-child { font-family: 'Cinzel', serif !important; font-size: 11px !important; color: var(--gold-dark) !important; } /* Striped override */ .table-striped > tbody > tr:nth-of-type(odd) > * { background: rgba(201,162,39,0.03) !important; color: var(--text-main) !important; box-shadow: none !important; } /* ============================================================ FORM CONTROL — inputuri Bootstrap ============================================================ */ .form-control { background: rgba(15,10,3,0.92) !important; border: 1px solid rgba(201,162,39,0.2) !important; color: var(--text-main) !important; font-family: 'Crimson Text', serif !important; font-size: 14px !important; border-radius: 0 !important; box-shadow: none !important; transition: border-color 0.2s, background 0.2s !important; } .form-control:focus { background: rgba(201,162,39,0.06) !important; border-color: rgba(201,162,39,0.45) !important; color: var(--text-main) !important; box-shadow: 0 0 0 2px rgba(201,162,39,0.08) !important; } .form-control::placeholder { color: #4a3010 !important; font-style: italic; } /* Select */ select.form-control option { background: #0d0804; color: var(--text-main); } /* ============================================================ ALERTE Bootstrap ============================================================ */ .alert { font-family: 'Crimson Text', serif !important; font-size: 14px !important; border-radius: 0 !important; border-left-width: 3px !important; } .alert-danger { background: rgba(100,15,5,0.35) !important; border-color: #8a1a0a !important; color: #f0a090 !important; } .alert-success { background: rgba(15,80,10,0.35) !important; border-color: #2a7a1a !important; color: #90e090 !important; } .alert-info { background: rgba(10,40,80,0.35) !important; border-color: #1a4a7a !important; color: #90c0e0 !important; } .alert-warning { background: rgba(80,50,5,0.35) !important; border-color: #8a6010 !important; color: #e0c070 !important; } .btn-close { filter: invert(1) sepia(1) saturate(2) hue-rotate(10deg) brightness(0.7) !important; } /* ============================================================ PAGE HEADER (titluri pagini interioare) ============================================================ */ .page-hd, .xy-news-header { border-bottom: 1px solid var(--gold-border) !important; background: rgba(10,7,4,0.5) !important; margin-bottom: 0 !important; } .pre-social, .xy-news-header h3 { font-family: 'Cinzel', serif !important; font-size: 14px !important; letter-spacing: 0.2em !important; color: var(--gold) !important; text-transform: uppercase; } /* Tab navigare news/ranking */ .xy-nh-ul li a { font-family: 'Cinzel', serif !important; font-size: 9.5px !important; letter-spacing: 0.12em; color: var(--text-muted) !important; transition: color 0.2s !important; } .xy-nh-ul li a.active, .xy-nh-ul li a:hover { color: var(--gold-light) !important; border-bottom-color: var(--gold) !important; } /* ============================================================ NEWS BOX (centru) ============================================================ */ .xy-news-part { background: rgba(10,7,4,0.95) !important; border: 1px solid var(--gold-border) !important; } .content-xy .xy-title { background-image: linear-gradient(0deg, rgba(80,18,8,0.6) 0%, rgba(40,8,4,0.85) 100%) !important; border-left-color: var(--gold-dark) !important; border-right-color: var(--gold-dark) !important; } .content-xy .xy-title .left h3 { font-family: 'Cinzel', serif !important; font-size: 11px !important; color: var(--gold) !important; } .xy-text-cont p { color: #c8a87a !important; font-family: 'Crimson Text', serif !important; font-size: 15px !important; line-height: 1.6 !important; } /* Post articol news */ .post_title { font-family: 'Cinzel', serif !important; font-size: 15px !important; color: var(--gold) !important; padding: 12px 0 8px !important; border-bottom: 1px solid var(--gold-border) !important; margin-bottom: 12px !important; } .post_content { font-family: 'Crimson Text', serif !important; font-size: 15px !important; color: #c8a87a !important; line-height: 1.6 !important; } .post_date { font-family: 'Cinzel', serif !important; font-size: 9px !important; color: var(--text-muted) !important; letter-spacing: 0.1em; margin-top: 12px !important; padding-top: 8px !important; border-top: 1px solid rgba(201,162,39,0.1) !important; } /* ============================================================ RANKING PAGE ============================================================ */ .ranking-page { background: transparent !important; } .jumbotron, .jumbotron-fluid { background: rgba(15,10,3,0.7) !important; border: 1px solid var(--gold-border) !important; border-radius: 0 !important; padding: 1rem 1.5rem !important; } /* ============================================================ GOLD PLAYER (sidebar ranking) ============================================================ */ .gold-player { background: rgba(201,162,39,0.04) !important; border: 1px solid rgba(201,162,39,0.18) !important; box-shadow: none !important; } .gold-player__content h4 { font-family: 'Cinzel', serif !important; font-size: 11px !important; color: var(--gold-light) !important; } .gold-player__content h5 { color: var(--text-muted) !important; font-family: 'Crimson Text', serif !important; } /* Tabele sidebar */ .table-sm-st td { font-family: 'Crimson Text', serif !important; font-size: 13px !important; color: var(--text-muted) !important; border-bottom: 1px solid rgba(201,162,39,0.07) !important; } .table-str2 table td { color: var(--text-main) !important; } .table-st1 table td { color: #c8a87a !important; font-family: 'Crimson Text', serif !important; } .table-st1 tbody tr, .table-user a { box-shadow: inset 0 1px 0 rgba(201,162,39,0.06) !important; transition: background 0.15s !important; } .table-user a:hover { background: rgba(201,162,39,0.07) !important; color: var(--gold) !important; filter: none !important; } /* Update time */ .table-update-time { background: rgba(201,162,39,0.05) !important; border: 1px solid rgba(201,162,39,0.18) !important; box-shadow: none !important; color: var(--text-muted) !important; font-family: 'Crimson Text', serif !important; border-radius: 0 !important; } .table-update-time .bright { color: var(--gold) !important; } /* ============================================================ CARD (donate page) ============================================================ */ .card { background: rgba(15,10,3,0.88) !important; border: 1px solid var(--gold-border) !important; border-radius: 0 !important; color: var(--text-main) !important; margin-bottom: 12px; } .card-header { background: rgba(201,162,39,0.06) !important; border-bottom: 1px solid var(--gold-border) !important; font-family: 'Cinzel', serif !important; color: var(--gold) !important; font-size: 12px !important; letter-spacing: 0.15em; } .card-header a { color: var(--gold) !important; font-family: 'Cinzel', serif !important; } .card-block { padding: 1rem !important; } /* ============================================================ PAGINATION ============================================================ */ .pagination ul li a, .pagination .buttons a, .pagination .buttons span { background: rgba(20,12,4,0.9) !important; border: 1px solid rgba(201,162,39,0.15) !important; color: var(--text-muted) !important; font-family: 'Cinzel', serif !important; font-size: 10px !important; transition: all 0.2s !important; } .pagination ul li a.active, .pagination ul li a:hover, .pagination .buttons a:hover, .pagination .buttons span { background: rgba(201,162,39,0.15) !important; border-color: var(--gold) !important; color: var(--gold-light) !important; } /* ============================================================ HR (separator) ============================================================ */ hr { border-color: rgba(201,162,39,0.15) !important; opacity: 1 !important; } /* ============================================================ FOOTER ============================================================ */ .footer-section { background: rgba(5,3,1,0.99) !important; border-top: 1px solid var(--gold-border); } .footer-p { font-family: 'Cinzel', serif !important; font-size: 9.5px !important; letter-spacing: 0.1em; color: #3a2810 !important; } .footer-p .blue-c { color: var(--gold-dark) !important; } /* ============================================================ SCROLLBAR ============================================================ */ ::-webkit-scrollbar { width: 5px; } ::-webkit-scrollbar-track { background: #0a0704; } ::-webkit-scrollbar-thumb { background: var(--gold-dark); } ::-webkit-scrollbar-thumb:hover { background: var(--gold); } /* ============================================================ PARTICULE EMBER ============================================================ */ .epoch-particles { position: fixed; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; } .epoch-particle { position: absolute; width: 2px; height: 2px; border-radius: 50%; background: #e05c12; animation: epoch-float linear infinite; opacity: 0; } @keyframes epoch-float { 0% { transform: translateY(100vh) translateX(0) scale(1); opacity: 0; } 10% { opacity: 0.7; } 60% { opacity: 0.25; } 100% { transform: translateY(-60px) translateX(var(--drift,30px)) scale(0); opacity: 0; } } /* ============================================================ FIX INPUT ALBE (Bootstrap suprascrie cu #fff) ============================================================ */ input[type="text"], input[type="password"], input[type="email"], input[type="number"], textarea { background: rgba(15,10,3,0.92) !important; border: 1px solid rgba(201,162,39,0.2) !important; color: var(--text-main) !important; font-family: 'Crimson Text', serif !important; } input[type="text"]:focus, input[type="password"]:focus, input[type="email"]:focus { background: rgba(201,162,39,0.06) !important; border-color: rgba(201,162,39,0.45) !important; color: var(--text-main) !important; box-shadow: none !important; } /* ============================================================ EMPIRE COLORS ============================================================ */ .emp-1 { color: #eb6565 !important; } .emp-2 { color: #eebe4b !important; } .emp-3 { color: #4f6af3 !important; } .color-lt { color: var(--gold) !important; } .color-theme2 { color: var(--gold-light) !important; } /* ============================================================ TEXT-DANGER / TEXT-SUCCESS (validare formulare) ============================================================ */ .text-danger { color: #f07060 !important; font-family: 'Crimson Text', serif !important; font-size: 12px !important; } .text-success { color: #70c070 !important; } /* ============================================================ FIX TITLURI SUPRAPUSE — s-box-header final override ============================================================ */ /* Anulam complet pozitionarea veche */ .s-box-header { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; height: 44px !important; margin-top: 0 !important; padding: 0 !important; display: flex !important; align-items: center !important; justify-content: center !important; background: linear-gradient(180deg, rgba(201,162,39,0.13) 0%, rgba(201,162,39,0.04) 100%) !important; border-bottom: 1px solid rgba(201,162,39,0.25) !important; z-index: 2 !important; } /* Anulam padding-ul de 54px care impingea titlul in jos */ .s-box-header .header-cont { position: static !important; padding: 0 !important; width: 100% !important; display: flex !important; align-items: center !important; justify-content: center !important; } /* Ascundem orice imagine ramasa in header */ .s-box-header img, .s-box-header .bg-img { display: none !important; } /* Titlul */ .s-box-header h3 { font-family: 'Cinzel', serif !important; font-size: 10px !important; letter-spacing: 0.35em !important; color: var(--gold) !important; text-transform: uppercase !important; margin: 0 !important; line-height: 1 !important; } /* S-box sa aiba padding top cat header-ul */ .s-box { padding-top: 50px !important; height: auto !important; }