/* ========================================================= WOWLK.RU — ASBORN THEME (Unified, perf-optimized, 2025-11-07) - Heavy FX tamed; lazy paint via content-visibility - Backdrop/filter scaled by --fx; blend cut on low - Animations throttled; shadows simplified - Add for max performance or for maximum effects ========================================================= */ /* ============ 0) VARS & RESET ============ */ :root{ /* Palette */ --bg:#080c12;--bg-2:#0c121a; --panel:rgba(12,18,26,.92);--panel-2:rgba(10,16,24,.86);--panel-3:rgba(8,14,22,.85); --border:#274660;--border-soft:rgba(120,180,255,.28); --gold:#66c7ff;--gold-2:#79d2ff;--gold-3:#c7e8ff;--amber:#63b3ff;--amber-2:#2a7fb8;--bronze:#3a6f9a;--parchment:#e9f3ff; --text:#d7e9ff;--muted:#a8bdd9;--dim:#7b91ac;--success:#3de0a3;--danger:#ff5a6b;--info:#60b8ff; /* FX controls (0..1) */ --fx:.8; /* baseline visual intensity */ --motion:1; /* 1=animate, 0=no animations */ /* Derived opacities (scaled) */ --o-strong:calc(.6*var(--fx)); --o-mid:calc(.35*var(--fx)); --o-soft:calc(.2*var(--fx)); /* Shadows & glow scaled */ --shadow-a:calc(.2 + .4*var(--fx)); --shadow:rgba(0,0,0,var(--shadow-a)); --glow:0 0 24px rgba(111,187,255,calc(.28*var(--fx))); /* Frost family */ --frost-light:#a7d8ff;--frost-mid:#6cb8ff;--frost-deep:#3a6fa5;--frost-glow:rgba(150,210,255,calc(.6*var(--fx))); --frost-text-dark:#06121b;--accent:#ffb300; /* Rounding & gaps */ --r-xs:6px;--r-sm:10px;--r-md:12px;--r-lg:16px;--r-xl:20px; --gap-1:10px;--gap-2:20px;--gap-3:30px;--gap-4:40px; /* Fonts & width */ --ff-ui:"Cinzel","Spectral SC","Montserrat Alternates","Segoe UI",Roboto,Arial,sans-serif; --ff-body:"Merriweather","Georgia",serif;--container-w:1100px; } /* Performance presets */ .fx-low{ --fx:0; --motion:0; } .fx-high{ --fx:1; --motion:1; } /* Global reset */ *{margin:0;padding:0;box-sizing:border-box} html,body{ background:url('/assets/images/bg.jpg') no-repeat center top/cover fixed!important; background-color:transparent!important;color:var(--text); font-family:'Exo 2','Segoe UI',Roboto,'Helvetica Neue',Arial,sans-serif!important; } /* Reduce motion for OS preference */ @media (prefers-reduced-motion:reduce){ :root{ --motion:0 } } /* ============ 1) UTILITIES (perf) ============ */ .card{background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md); box-shadow:0 10px 20px var(--shadow)} /* Lazy paint: large grids & repeated cards */ .news-grid>*,.news-cards-grid>*,.features-grid>*,.how-to-start-grid>*, .status-item,.news-entry,.forum-cat,.post.card,.topic-row, .lk .lk-card,.news-card,.news-card-modern,.feature-card,.step-card,.news-item{ content-visibility:auto; contain-intrinsic-size:300px 200px; /* reserve space to avoid jank */ contain:layout paint style; /* isolate paints */ } .title-deco{position:relative;padding-bottom:10px} .title-deco::after{ content:"";position:absolute;left:50%;bottom:0;transform:translateX(-50%); width:110px;height:3px;background:linear-gradient(90deg,transparent,var(--gold-2),transparent); box-shadow:0 0 10px rgba(121,210,255,var(--o-mid)) } .muted{color:var(--muted)} .section-title{ font-family:var(--ff-ui);font-size:42px;color:var(--gold-3);text-align:center;letter-spacing:4px; text-shadow:0 0 18px rgba(111,187,255,var(--o-strong));margin:0 0 var(--gap-3) } /* ============ 2) GLOBAL LAYERING (throttled) ============ */ #video-particles{ position:fixed;inset:0;width:100vw;height:100vh;object-fit:cover;z-index:9;pointer-events:none; opacity: 30%; mix-blend-mode:screen; /* scale filter cost down; turn off on fx-low via opacity=0 by display:none rule below */ filter:brightness(calc(.8 + .2*var(--fx))) contrast(calc(1 + .15*var(--fx))) saturate(calc(1 + .05*var(--fx))); will-change:transform; transform:translateZ(0) } .fx-low #video-particles{display:none!important} .global-overlay{position:fixed;inset:0;background:rgba(2,6,12,.78);z-index:8} .main-container{position:relative;z-index:10;padding:0 20px 10px;max-width:1200px;margin:0 auto;display:flex;flex-direction:column;gap:var(--gap-2);width:100%} .page-wrap{width:90%;max-width:1200px;margin:0 auto} /* ============ 3) HEADER (blur scaled) ============ */ header{ position:relative;width:99%;max-width:1200px;margin:12px auto 0;border-radius:16px; background:linear-gradient(180deg,rgba(12,20,32,.96),rgba(6,12,22,.94)); border:1px solid rgba(120,190,255,.25); box-shadow:0 8px 24px var(--shadow); -webkit-backdrop-filter:blur(calc(6px*var(--fx))); backdrop-filter:blur(calc(6px*var(--fx))); padding:14px 28px;display:flex;align-items:center;justify-content:space-between;z-index:100 } .header-left{display:flex;align-items:center;gap:32px}.header-right{display:flex;align-items:center;gap:14px} .logo{position:absolute;left:50%;transform:translateX(-50%);top:6px} .logo img{ height:88px;width:auto;display:block; filter:drop-shadow(0 6px 12px rgba(0,0,0,.5)); transition:transform .25s ease,filter .25s ease } .logo img:hover{transform:translateY(2px) scale(1.03);filter:drop-shadow(0 8px 14px rgba(0,0,0,.55))} .logo-nav-status-group{display:flex;align-items:center;gap:32px}.nav-and-status{display:flex;align-items:center;gap:24px}.auth-and-flags-group{display:flex;align-items:center;gap:16px;justify-content:flex-end} .nav-links,.arcane-menu{display:flex;align-items:center;gap:36px} .nav-link{ position:relative;text-decoration:none;color:#cfe6ff; text-shadow:0 0 10px rgba(120,190,255,var(--o-mid)); font-family:var(--ff-ui);font-weight:600;font-size:15px;letter-spacing:1px;padding:6px 0; transition:color .2s ease } .nav-link:hover,.nav-link.active{color:#e8f6ff;text-shadow:0 0 12px rgba(120,190,255,.85)} /* LK button */ .nav-link.lk-link,.lk-btn{ background:linear-gradient(90deg,#5fc8ff,#bfe6ff);color:#031018!important;font-weight:800;border-radius:8px; padding:8px 16px;box-shadow:0 0 12px rgba(120,190,255,.35);text-decoration:none;display:inline-flex;align-items:center;gap:8px;transition:filter .2s,transform .2s } .nav-link.lk-link:hover,.lk-btn:hover{filter:brightness(1.08);transform:translateY(-1px)} .arcane-menu .nav-link:not(:last-child)::after{ content:"";position:absolute;right:-18px;top:50%;transform:translateY(-50%);width:1px;height:18px; background:linear-gradient(180deg,transparent,rgba(120,190,255,.35),transparent) } .arcane-menu .nav-link::before{ content:"";position:absolute;left:50%;bottom:-6px;transform:translateX(-50%) scaleX(0);transform-origin:center;height:2px;width:100%; background:linear-gradient(90deg,var(--gold),var(--gold-2),var(--gold));border-radius:4px; filter:drop-shadow(0 0 8px rgba(120,190,255,.6));transition:transform .3s } .arcane-menu .nav-link:hover::before,.arcane-menu .nav-link.active::before{transform:translateX(-50%) scaleX(1)} .menu-toggle,#menu-toggle,.mobile-menu-toggle{display:none;font-size:26px;color:#ffcc66;cursor:pointer;z-index:101;padding:5px;transition:transform .2s} .menu-toggle.active,#menu-toggle.active,.mobile-menu-toggle.active{transform:rotate(90deg)} .mobile-nav,.mobile-nav-panel,#mobileNav{display:none;flex-direction:column;background:rgba(12,20,32,.96);border-top:1px solid var(--border);position:absolute;top:100%;left:0;width:100%;z-index:99;box-shadow:0 10px 25px rgba(0,0,0,.6);padding:18px} .mobile-nav a,.mobile-nav-panel a,#mobileNav a{padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.06);color:#dfeaff;font-family:var(--ff-ui);font-size:14px;text-decoration:none;letter-spacing:1px} .mobile-nav a:hover,.mobile-nav-panel a:hover,#mobileNav a:hover{background:rgba(255,255,255,.06);color:var(--gold-3)} .mobile-nav.open,.mobile-nav-panel.open,#mobileNav.open{display:flex} .telegram-link{display:flex;align-items:center;justify-content:center;margin-left:14px;font-size:22px;color:#7fbfff;text-decoration:none;transition:.2s;filter:drop-shadow(0 0 4px rgba(120,190,255,.2))} .telegram-link:hover{color:#b0e4ff;transform:scale(1.06);filter:drop-shadow(0 0 8px rgba(130,200,255,.4))} .auth-buttons{display:flex;gap:10px;align-items:center} header .auth-buttons a{font-size:14px;letter-spacing:.5px;padding:8px 16px;border-radius:8px;transition:.2s} header .auth-buttons .login{background:transparent;border:1px solid var(--frost-mid);color:var(--frost-mid)} header .auth-buttons .login:hover{background:var(--frost-mid);color:#000} header .auth-buttons .register{ background:linear-gradient(90deg,var(--frost-mid),var(--frost-light));color:var(--frost-text-dark);box-shadow:0 0 14px var(--frost-glow) } header .auth-buttons .register:hover{filter:brightness(1.12);transform:translateY(-1px)} .user-info{display:flex;align-items:center;gap:10px;background:rgba(6,14,24,.85);border:1px solid var(--border);border-radius:10px;padding:8px 14px;box-shadow:0 0 10px var(--shadow);transition:.2s} .user-info:hover{border-color:var(--gold-2);box-shadow:0 0 12px rgba(120,190,255,.3)} .user-name{color:var(--gold-2);font-weight:700;font-size:14px;text-shadow:0 0 8px rgba(120,190,255,.5)} .logout-button{background:linear-gradient(90deg,#6ad8ff,#1aa3ff);color:#04131f;padding:7px 14px;border-radius:8px;text-decoration:none;font-weight:800;border:none;box-shadow:0 0 12px rgba(120,190,255,.35);transition:.2s} .logout-button:hover{transform:translateY(-1px);box-shadow:0 0 18px rgba(120,190,255,.55)} /* ============ 4) BUTTON SYSTEM ============ */ button,a.btn,.auth-btn,.hero-btn,.start-btn,.obt-button-base,header .auth-buttons a,.registration-wrapper .obt-button-base{ display:inline-flex;align-items:center;justify-content:center;text-transform:uppercase;font-weight:600;border:none;cursor:pointer;padding:10px 22px;border-radius:8px;transition:.2s;text-decoration:none;user-select:none } .hero-btn.primary,.auth-btn.register,.start-btn,.obt-button-base.primary{ background:linear-gradient(90deg,var(--frost-mid),var(--frost-light));color:var(--frost-text-dark); box-shadow:0 0 14px var(--frost-glow),inset 0 -4px 0 rgba(0,0,0,.2) } .hero-btn.primary:hover,.auth-btn.register:hover,.start-btn:hover,.obt-button-base.primary:hover{filter:brightness(1.12);transform:translateY(-2px)} .hero-btn.secondary,.auth-btn.login,.obt-button-base.secondary{background:transparent;border:1px solid var(--frost-mid);color:var(--frost-mid);box-shadow:0 0 8px rgba(100,160,255,.18)} .hero-btn.secondary:hover,.auth-btn.login:hover,.obt-button-base.secondary:hover{background:var(--frost-mid);color:#000;box-shadow:0 0 14px rgba(160,220,255,.5);transform:translateY(-2px)} /* ============ 5) HERO (FX scaled) ============ */ .hero-epic{position:relative;overflow:hidden;text-align:center;color:#e7e3d5;min-height:clamp(420px,56vh,640px);display:flex;align-items:center;justify-content:center;background:transparent;padding:32px 20px;margin-top:0;padding-top:0!important} .hero-epic::before{ content:"";position:absolute;inset:0; background:radial-gradient(circle at 50% 40%,rgba(255,230,160,calc(.08*var(--fx))),transparent 75%); filter:blur(calc(50px*var(--fx))); opacity:calc(.25 + .1*var(--fx)) } .hero-epic::after{ content:"";position:absolute;bottom:-10%;left:50%;transform:translateX(-50%);width:120%;height:32%; background:radial-gradient(circle at 50% 100%,rgba(255,220,150,calc(.22*var(--fx))),transparent 70%); filter:blur(calc(60px*var(--fx)));opacity:calc(.12 + .1*var(--fx)) } .hero-epic .hero-overlay{ position:absolute;inset:0;background:radial-gradient(circle at 50% 50%,rgba(255,230,160,calc(.08*var(--fx))),transparent 70%); opacity:calc(.2 + .2*var(--fx));pointer-events:none } .hero-content{ position:relative;z-index:3;padding:36px 28px;border-radius:20px; background:rgba(10,12,16,calc(.38 + .1*(1 - var(--fx)))); -webkit-backdrop-filter:blur(calc(10px*var(--fx))) saturate(calc(1 + .6*var(--fx))); backdrop-filter:blur(calc(10px*var(--fx))) saturate(calc(1 + .6*var(--fx))); box-shadow:inset 0 0 30px rgba(255,230,150,calc(.05*var(--fx))),0 0 24px rgba(255,220,150,calc(.08*var(--fx))); animation:fadeUp .8s ease-out both } @keyframes fadeUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}} .hero-title{ font-size:clamp(28px,4.6vw,46px);line-height:1.15;letter-spacing:.5px;margin:0 0 10px;color:#ffecad; text-shadow:0 0 30px rgba(255,230,150,calc(.6*var(--fx))),0 0 70px rgba(255,200,120,calc(.35*var(--fx))) } .hero-subtitle{font-size:clamp(14px,1.8vw,18px);margin:2px 0 10px;color:#d8d8d6;letter-spacing:1.5px;text-shadow:0 0 6px rgba(0,0,0,.5)} .hero-description{max-width:680px;margin:10px auto 20px;font-size:15.5px;line-height:1.65;color:#d7d9dd} .hero-description .highlight{color:#ffdb7a;text-shadow:0 0 16px rgba(255,220,140,calc(.6*var(--fx)))} .hero-actions{display:flex;justify-content:center;gap:14px;margin-top:14px}.hero-btn{padding:10px 22px;border-radius:10px;font-size:14px;gap:10px} .hero-btn.start{background:linear-gradient(90deg,#269fff,#4cbcff);color:#fff;box-shadow:0 0 14px rgba(90,180,255,calc(.25*var(--fx)))} .hero-btn.start:hover{transform:translateY(-3px);box-shadow:0 0 40px rgba(90,200,255,calc(.6*var(--fx)))} .hero-btn.download{background:rgba(255,200,100,.08);border:1px solid rgba(255,210,120,.3);color:#ffcf70} .hero-btn.download:hover{background:rgba(255,220,140,.12);box-shadow:0 0 18px rgba(255,220,140,calc(.35*var(--fx)))} .hero-realm{margin-top:18px}.hero-realm .realm-title{font-size:12px;letter-spacing:1.2px;margin-bottom:6px;color:#ffcc66} .hero-realm .realm-box{ display:inline-flex;align-items:center;gap:8px;background:rgba(255,230,180,.06);border:1px solid rgba(255,210,130,.2); padding:10px 16px;border-radius:10px;color:#ffde9f;font-weight:600;box-shadow:inset 0 0 8px rgba(255,220,130,calc(.08*var(--fx))); transition:background .2s,transform .2s } .hero-realm .realm-box:hover{background:rgba(255,240,180,.1);transform:scale(1.02)} .hero-logo{display:flex;flex-direction:column;align-items:center;justify-content:center;margin-bottom:25px} .hero-sword{width:400px;max-width:90%;height:auto;object-fit:contain;filter:drop-shadow(0 0 18px rgba(255,230,150,calc(.35*var(--fx))))} .hero-logo-subtitle{margin-top:12px;font-size:1.2rem;color:#d9eaff;letter-spacing:1px;text-shadow:0 0 10px rgba(120,190,255,calc(.35*var(--fx)))} .hero-fog{position:absolute;top:0;left:0;width:200%;height:200%;background:url('/assets/images/fog.png') repeat;background-size:cover;opacity:calc(.15 + .1*var(--fx));mix-blend-mode:screen;animation:fogMove 100s linear infinite;z-index:2} .fx-low .hero-fog{display:none!important} @keyframes fogMove{from{transform:translateX(0)}to{transform:translateX(-50%)}} /* ============ 6) SERVER STATUS ============ */ .server-status-modern{margin:80px 0 0;position:relative;z-index:5;display:flex;justify-content:center;align-items:center} .status-console{ position:relative;max-width:1100px;width:100%;margin:0 auto; background:radial-gradient(circle at top,rgba(120,190,255,.12),rgba(8,14,22,.9) 70%); border:1px solid rgba(120,190,255,.3);border-radius:20px;box-shadow:0 0 20px rgba(120,190,255,.18);overflow:hidden; -webkit-backdrop-filter:blur(calc(5px*var(--fx)));backdrop-filter:blur(calc(5px*var(--fx))) } .console-header{display:flex;align-items:center;gap:10px;background:rgba(120,190,255,.08);padding:14px 24px;font-family:var(--ff-ui);color:var(--gold-3);border-bottom:1px solid rgba(120,190,255,.25);letter-spacing:.5px} .console-body{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:22px;padding:30px;color:#eaf6ff;text-align:center} .console-body.balanced-layout{grid-template-columns:.9fr 1.3fr} .status-column{display:flex;flex-direction:column;gap:16px} .status-item{display:flex;align-items:center;gap:12px;background:rgba(6,12,22,.55);border:1px solid rgba(120,190,255,.25);border-radius:10px;padding:16px;transition:background .2s} .status-item:hover{background:rgba(120,190,255,.10)} .status-icon{font-size:22px;color:var(--gold-2)} .status-icon.online{color:var(--success)} .status-info h4{font-size:13px;color:var(--gold-3)} .status-value{font-family:var(--ff-ui);font-size:14px;color:#eaf6ff}.status-value.online{color:#5aff82;text-shadow:0 0 10px rgba(100,255,130,calc(.6*var(--fx)))}.status-value.offline{color:#ff5e5e;text-shadow:0 0 10px rgba(255,80,80,calc(.6*var(--fx)))} .status-news{background:rgba(6,12,22,.55);border:1px solid rgba(120,190,255,.25);border-radius:12px;padding:18px} .news-title{color:var(--gold-3);font-family:var(--ff-ui);font-size:15px;margin-bottom:12px;display:flex;align-items:center;gap:6px;text-transform:uppercase} .news-list{display:flex;flex-direction:column;gap:16px} .news-entry{display:flex;gap:14px;background:rgba(255,255,255,.03);border:1px solid rgba(255,255,255,.06);border-radius:10px;overflow:hidden;text-decoration:none;color:#e7f3ff;transition:transform .2s,box-shadow .2s,border-color .2s;padding:10px} .news-entry:hover{background:rgba(255,255,255,.06);transform:translateY(-2px);box-shadow:0 0 8px rgba(255,220,120,.08)} .news-entry.pinned{background:rgba(160,210,255,.10);border-color:rgba(160,210,255,.3);box-shadow:0 0 8px rgba(160,210,255,.16)} .news-entry img{width:80px;height:60px;object-fit:cover;border-radius:6px} .news-text{flex:1;padding:2px 4px} .news-header-line{display:flex;align-items:center;gap:6px;margin-bottom:2px}.pin-icon{color:var(--gold);font-size:12px;transform:rotate(-25deg)} .console-footer{background:rgba(120,190,255,.07);border-top:1px solid rgba(120,190,255,.25);color:var(--gold-3);font-family:monospace;font-size:13px;padding:10px 24px;display:flex;align-items:center;gap:8px;opacity:.9} /* ============ 7) NEWS ============ */ .latest-news-section{width:100%} .news-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:28px} .news-item{display:block;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;transition:transform .2s,box-shadow .2s,border-color .2s,color .2s;text-decoration:none;color:inherit} .news-item:hover{transform:translateY(-3px);box-shadow:0 16px 28px var(--shadow),0 0 24px rgba(120,190,255,.22);border-color:var(--gold-2)} .news-image{width:100%;height:200px;object-fit:cover;transition:transform .3s;filter:brightness(.92)} .news-item:hover .news-image{transform:scale(1.03)} .news-content{padding:18px}.news-date{font-size:12px;color:var(--dim);margin-bottom:8px;letter-spacing:.8px} .news-title{font-family:var(--ff-ui);font-size:20px;color:var(--gold-3);margin-bottom:10px;line-height:1.3;text-shadow:0 0 10px rgba(120,190,255,.35)} .news-text{font-size:14px;color:var(--parchment);line-height:1.5;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden} .news-layout{display:grid;grid-template-columns:2fr .9fr;gap:40px;align-items:start;margin-bottom:80px} .news-card{display:flex;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md);overflow:hidden;transition:.2s;box-shadow:0 4px 18px var(--shadow)} .news-card:hover{transform:translateY(-3px);border-color:var(--gold-2)} .news-card-image img{width:220px;height:150px;object-fit:cover;display:block;filter:brightness(.95)} .news-card-content{padding:18px 22px;display:flex;flex-direction:column} .news-card-title{font-family:var(--ff-ui);color:var(--gold-3);font-size:20px;margin-bottom:4px} .news-card-date{font-size:12px;color:var(--dim);margin-bottom:8px} .news-card-text{font-size:15px;color:var(--parchment);line-height:1.55;flex-grow:1} .news-readmore{align-self:flex-end;font-size:12px;color:var(--gold-2);text-decoration:none;text-transform:uppercase;margin-top:8px} .news-readmore:hover{color:#f2fbff} .news-page{max-width:1200px;margin:0 auto;padding:60px 30px} .news-cards-grid{display:grid;grid-template-columns:repeat(2,1fr)!important;gap:36px;align-items:start} .news-card-modern{position:relative;background:var(--panel);border:1px solid rgba(120,180,255,.3);border-radius:var(--r-md);overflow:hidden;display:flex;flex-direction:column;box-shadow:0 0 18px rgba(120,190,255,.12);transition:.2s} .news-card-modern:hover{transform:translateY(-4px);box-shadow:0 0 24px rgba(120,190,255,.22);border-color:var(--gold)} .news-card-modern .news-image img{width:100%;height:240px;object-fit:cover;display:block;filter:brightness(.95)} .news-card-modern .news-body{padding:24px;display:flex;flex-direction:column;gap:8px} .news-card-modern .news-date{color:var(--gold-2);font-weight:600;font-size:12px;letter-spacing:.6px} .news-card-modern h3{font-size:1.35rem;color:var(--gold-3);line-height:1.35} .news-card-modern .news-snippet{color:var(--parchment);line-height:1.6;font-size:1rem;flex-grow:1} .news-read{display:inline-block;margin-top:10px;color:var(--gold-2);text-decoration:none;font-weight:700}.news-read:hover{color:#f2fbff} /* Pinned hero card (glow trimmed) */ .news-card-pinned{position:relative;width:100%;min-height:420px;background:#0b1420;background-size:cover;background-position:center;border-radius:18px;overflow:hidden;margin-bottom:30px;display:flex;align-items:flex-end;transition:transform .25s,box-shadow .25s;border:2px solid #ffcc66;box-shadow:0 0 18px rgba(120,190,255,.28)} .news-card-pinned::before{content:"";position:absolute;inset:0;background:linear-gradient(to top,rgba(6,12,22,.96) 6%,rgba(6,12,22,.68) 55%,rgba(6,12,22,.10) 100%);z-index:1} .news-card-pinned .pinned-label{position:absolute;top:18px;right:18px;z-index:2;background:#ffcc66;color:#06121b;padding:6px 12px;border-radius:8px;font-weight:700} .news-card-pinned .pinned-content{position:relative;z-index:2;padding:48px 60px;max-width:68%} .news-card-pinned h3{font-size:2rem;color:#e7f4ff;margin:10px 0;text-shadow:0 0 12px rgba(120,190,255,.4)} .news-card-pinned p{color:#d6ecff;font-size:1.05rem;line-height:1.7} .news-card-pinned .news-date{color:#79d2ff;font-weight:700} .news-card-pinned .news-read{display:inline-block;margin-top:16px;padding:10px 22px;border-radius:10px;background:linear-gradient(90deg,var(--gold),var(--gold-2));color:#06121b;font-weight:800;text-decoration:none;transition:filter .2s} .news-card-pinned:hover{transform:translateY(-3px)}.news-card-pinned .news-read:hover{filter:brightness(1.15)} /* Full article */ .news-full-container{max-width:1100px;margin:60px auto;background:rgba(12,18,26,.95)!important;padding:50px 60px;border-radius:16px;border:1px solid rgba(120,190,255,.3)!important;box-shadow:0 0 24px rgba(120,190,255,.2),inset 0 0 12px rgba(120,190,255,.08)!important} .news-full-header{text-align:center;margin-bottom:18px}.news-full-title{font-size:2.3rem;color:var(--gold-3);text-shadow:0 0 14px rgba(120,190,255,.35)} .news-full-date{text-align:center;color:#9fc1ff;margin-bottom:24px} .news-full-image{text-align:center;margin:20px 0 30px}.news-full-image img{max-width:100%;border-radius:12px;box-shadow:0 0 14px var(--shadow)} .news-full-text{font-size:1.12rem;color:#d6e8ff;line-height:1.85;text-align:justify}.news-full-text p{margin-bottom:18px} .news-inline-image{float:left;margin:0 22px 14px 0;max-width:40%;border-radius:10px;overflow:hidden;border:1px solid var(--border-soft);box-shadow:0 0 10px rgba(120,190,255,.18)} .news-inline-image img{width:100%;height:auto}.news-full-text .right{float:right;margin:0 0 14px 22px} .news-footer-meta{display:flex;justify-content:space-between;align-items:center;border-top:1px solid rgba(160,210,255,.22);margin-top:30px;padding-top:14px;font-size:14px;color:#9ab6d6;clear:both} .news-footer-meta .views i{margin-right:6px;color:var(--gold-2)} .back-to-list{color:var(--gold-2);text-decoration:none;font-weight:700;border:2px solid var(--gold-2);padding:8px 14px;border-radius:8px;transition:.2s}.back-to-list:hover{background:var(--gold-2);color:#06121b} .pagination{margin-top:26px;display:flex;justify-content:center;align-items:center;gap:10px} .page-link,.page-btn{color:#06121b;background:linear-gradient(90deg,var(--gold),var(--gold-2));padding:8px 14px;border-radius:6px;text-decoration:none;transition:.2s;border:1px solid rgba(0,0,0,.2)} .page-link:hover,.page-btn:hover{filter:brightness(1.1);transform:translateY(-1px)} .page-link.active{box-shadow:0 0 0 2px rgba(255,255,255,.18) inset} /* ============ 8) FEATURES & STEPS ============ */ .features-section{padding:90px 20px;text-align:center;background:linear-gradient(180deg,rgba(120,190,255,.05),rgba(255,255,255,.02));border-top:1px solid rgba(120,190,255,.12)} .features-grid,.how-to-start-grid{max-width:1200px;margin:0 auto} .features-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:24px;text-align:center} .feature-card{padding:24px 16px;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md);transition:transform .2s,box-shadow .2s;box-shadow:0 5px 14px var(--shadow)} .feature-card:hover{transform:translateY(-5px);background:var(--panel-2);box-shadow:0 14px 24px rgba(120,190,255,.18)} .feature-card i{font-size:44px;color:var(--gold-2);margin-bottom:12px;text-shadow:0 0 14px rgba(120,190,255,.75)} .feature-title{font-family:var(--ff-ui);font-size:18px;color:var(--gold-3);margin-bottom:8px} .feature-text{font-size:14px;color:var(--muted)} .features-list{max-width:1000px;margin:0 auto;display:grid;grid-template-columns:repeat(2,minmax(260px,1fr));gap:34px} @media (max-width:860px){.features-list{grid-template-columns:1fr}} .feature-item{position:relative;text-align:center;padding:28px 22px;background:var(--panel);border:1px solid rgba(120,180,255,.32);border-radius:14px;box-shadow:0 0 20px rgba(120,180,255,.14),inset 0 0 10px rgba(120,180,255,.08);transition:transform .2s,box-shadow .2s,border-color .2s} .feature-item:hover{transform:translateY(-4px);border-color:var(--gold);box-shadow:0 0 30px rgba(120,190,255,.28)} .feature-gem{width:64px;height:64px;margin:0 auto 10px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:28px;background:radial-gradient(circle at 40% 30%,#d6f0ff,#69caff 65%,#0e3355 100%);color:#02131f;box-shadow:0 0 16px rgba(120,190,255,.55)} .feature-name{color:#e7f4ff;font-size:1.1rem;letter-spacing:.6px;margin:8px 0 6px} .feature-desc{color:#c2d6ee} .how-to-start-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:24px;margin-top:22px} .step-card{padding:24px 20px;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-md);text-align:center;box-shadow:0 0 14px var(--shadow);position:relative;overflow:hidden;transition:transform .2s;display:flex;flex-direction:column;align-items:center} .step-card:hover{transform:translateY(-4px);border-color:var(--gold-2)} .step-top-content{position:relative;width:64px;height:64px;margin-bottom:10px;display:grid;place-items:center} .step-number{font-family:var(--ff-ui);font-size:30px;color:var(--gold-2);font-weight:800;text-shadow:0 0 10px rgba(120,190,255,.6);z-index:2} .step-top-content::before{content:"";position:absolute;inset:0;border:3px solid #214e7c;border-radius:50%} .step-icon{position:absolute;font-size:34px;color:var(--gold-3);text-shadow:0 0 12px rgba(120,190,255,.7);opacity:0;transition:opacity .2s;z-index:3} .step-card:hover .step-icon{opacity:1}.step-card:hover .step-number{opacity:0} .step-title{font-family:var(--ff-ui);font-size:18px;color:#e9f6ff;margin:10px 0} .step-description{font-size:14px;color:#muted;line-height:1.55;flex-grow:1} /* ============ 9) AUTH & FORMS ============ */ .registration-wrapper{max-width:600px;margin:100px auto;background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:40px;color:#e6f1ff;text-align:center;box-shadow:0 0 20px var(--shadow)} .registration-wrapper .section-title{color:var(--gold-3);text-shadow:0 0 14px rgba(120,190,255,.4)} .registration-form-modern{display:flex;flex-direction:column;gap:18px}.registration-form-modern .form-group{text-align:left} .registration-form-modern label{display:block;font-size:14px;color:#c8daef;margin-bottom:6px} .registration-form-modern input{width:100%;padding:12px;border-radius:8px;border:1px solid #2a4c73;background:rgba(6,12,22,.92);color:#e6f1ff;font-size:15px;transition:border-color .15s,box-shadow .15s} .registration-form-modern input:focus,.auth-form input:focus{outline:none;border-color:var(--gold);background:rgba(10,18,28,.97);box-shadow:0 0 10px rgba(120,190,255,.4)} .form-check{display:flex;align-items:center;gap:10px;color:#bdd3ef;font-size:14px;margin:8px 0 16px} .form-check input[type="checkbox"]{appearance:none;width:18px;height:18px;border:2px solid #3a7ebc;border-radius:4px;background:rgba(8,16,28,.75);position:relative;cursor:pointer;transition:.15s;box-shadow:0 0 4px rgba(120,190,255,.22)} .form-check input[type="checkbox"]:hover{border-color:var(--gold-2);box-shadow:0 0 8px rgba(120,190,255,.4)} .form-check input[type="checkbox"]:checked{background:radial-gradient(circle,var(--gold-2) 0%,var(--gold) 90%);border-color:var(--gold-2);box-shadow:0 0 10px rgba(120,190,255,.5)} .form-check input[type="checkbox"]:checked::after{content:"✔";position:absolute;left:2px;top:-1px;color:#06121b;font-weight:900;font-size:14px} .form-check a{color:var(--gold-2);text-decoration:none}.form-check a:hover{text-decoration:underline} .auth-wrapper{display:flex;justify-content:center;align-items:center;min-height:80vh;padding:40px 0} .auth-box{background:var(--panel);border:1px solid var(--border);border-radius:14px;padding:40px 50px;box-shadow:0 0 18px var(--shadow);width:420px;color:#e6f1ff;text-align:center;animation:fadeIn .4s ease} .auth-box .section-title{color:var(--gold-3)} .auth-form{display:flex;flex-direction:column;gap:18px}.auth-form .form-group{text-align:left} .auth-form label{display:block;font-size:14px;color:#c8daef;margin-bottom:6px} .auth-form input{width:100%;padding:12px;border-radius:8px;border:1px solid #2a4c73;background:rgba(6,12,22,.92);color:#e6f1ff;font-size:15px} .auth-box .obt-button-base{width:100%;font-size:15px;padding:12px 0;margin-top:10px} .alert{margin:10px 0 18px;padding:10px;border-radius:8px;font-weight:700} .alert.error{background:rgba(40,10,20,.5);border:1px solid #a44363;color:#ffd0d6} .alert.success{background:rgba(10,60,40,.5);border:1px solid #3b9b5b;color:#b4ffd0} .auth-box .obt-button-base,.registration-wrapper .obt-button-base{background:linear-gradient(90deg,var(--gold),var(--gold-2));color:#06121b;border:none;box-shadow:0 0 16px rgba(120,190,255,.35),inset 0 -4px 0 rgba(0,0,0,.22);transition:.2s} .auth-box .obt-button-base:hover,.registration-wrapper .obt-button-base:hover{filter:brightness(1.15);transform:translateY(-2px);box-shadow:0 0 20px rgba(160,210,255,.5)} /* ============ 10) ADMIN ============ */ .admin-container,.admin-wrapper{display:flex;min-height:90vh;background:#0e1014;color:#e6f1ff;font-family:"Poppins",var(--ff-body)} .admin-sidebar{width:260px;background:#0f1620;border-right:2px solid rgba(120,190,255,.25);padding:24px 16px;display:flex;flex-direction:column;justify-content:space-between} .admin-title,.admin-logo{font-size:22px;color:var(--gold);letter-spacing:.6px;text-align:center;margin-bottom:20px} .admin-menu{list-style:none;padding:0;margin:20px 0} .admin-menu .menu-item,.admin-menu li{padding:10px 14px;margin-bottom:10px;border-radius:8px;cursor:pointer;color:#c9dbf2;transition:.15s} .admin-menu .menu-item:hover,.admin-menu .menu-item.active,.admin-menu li:hover,.admin-menu li.active{background:rgba(120,190,255,.16);color:var(--gold-3);transform:translateX(4px)} .admin-exit{text-align:center;color:#8ecbff;text-decoration:none;font-size:14px}.admin-exit:hover{color:var(--gold-2)} .admin-content{flex:1;padding:30px;background:#0b121b;overflow-x:auto} .admin-section{display:none}.admin-section.active{display:block;animation:fadeIn .25s ease} .search-form{display:flex;gap:10px;margin-bottom:20px} .search-form input[type="text"],.news-form input[type="text"],.news-form input[type="file"]{flex:1;padding:10px;border-radius:6px;border:1px solid #2a3f56;background:#0f1a26;color:#e6f1ff} .admin-btn{background:linear-gradient(90deg,var(--gold),var(--gold-2));border:none;padding:10px 16px;border-radius:6px;color:#06121f;cursor:pointer;transition:.15s;text-decoration:none;display:inline-block;box-shadow:0 0 10px rgba(120,190,255,.32)} .admin-btn:hover{filter:brightness(1.07);transform:translateY(-1px);box-shadow:0 0 14px rgba(160,210,255,.5)} .admin-btn.gold{background:linear-gradient(90deg,#47c3ff,#9ddcff)} .admin-table,.news-table table{width:100%;border-collapse:collapse;background:#0f1620;border-radius:10px;overflow:hidden;box-shadow:0 0 10px #000} .admin-table th,.admin-table td,.news-table th,.news-table td{padding:10px;border-bottom:1px solid #1b2a3a;text-align:left} .admin-table th,.news-table th{background:#101c2a;color:var(--gold-3)} .admin-table tr:hover,.news-table tr:hover{background:#0e1a28} .status{display:inline-block;padding:4px 10px;border-radius:6px;font-weight:700;font-size:.9em;color:#06121f;text-transform:capitalize} .status-pending{background:linear-gradient(90deg,#2fa8ff,#7fd0ff)} .status-in_progress{background:linear-gradient(90deg,#1aa3ff,#7bc9ff)} .status-completed{background:linear-gradient(90deg,#28c76f,#81fbb8);color:#102010} .status-rejected{background:linear-gradient(90deg,#b22222,#ff4444);color:#fff} .admin-flash{margin:18px auto;max-width:820px;padding:14px 18px;border-radius:8px;text-align:center;font-weight:800;font-size:1.02rem;color:#fff} .admin-flash.success{background:linear-gradient(90deg,#2e8b57,#3fbf73)} .admin-flash.info{background:linear-gradient(90deg,#1e90ff,#4da6ff)} .admin-flash.error{background:linear-gradient(90deg,#b22222,#e94e4e)} .nav-link.admin-link{background:linear-gradient(90deg,#1aa3ff,#7fd0ff);color:#031018!important;font-weight:800;border-radius:8px;padding:6px 14px;margin-left:12px;box-shadow:0 0 12px rgba(120,190,255,.35);transition:.2s} .nav-link.admin-link:hover{filter:brightness(1.12);box-shadow:0 0 18px rgba(120,190,255,.55)} .nav-link.admin-link i{margin-right:6px} .news-form{margin-bottom:28px;background:#0f151f;padding:20px;border-radius:12px;border:1px solid var(--border)} .edit-btn,.delete-btn{background:none;border:none;color:var(--gold-3);cursor:pointer}.delete-btn{color:#ff6a6a;font-weight:800}.delete-btn:hover{color:#ffa0a0} /* ============ 11) BUG TRACKER ============ */ .bug-container{max-width:1041px;margin:60px auto;padding:50px;background:rgba(15,15,20,.55);border-radius:20px;border:1px solid rgba(255,210,120,.15);box-shadow:0 0 40px rgba(255,210,120,.06);backdrop-filter:blur(calc(6px*var(--fx))) saturate(calc(1 + .5*var(--fx)))} .section-subtitle{text-align:center;color:#ffe6a6;font-size:1.4rem;margin:60px 0 20px} .bug-rules{margin-bottom:30px;background:rgba(255,210,120,.05);border:1px solid rgba(255,210,120,.15);border-radius:12px;padding:20px 25px;color:#ccc} .bug-rules h3{color:#ffcc66;margin-bottom:8px}.bug-rules ul{margin:0;padding-left:20px}.bug-rules li{margin-bottom:6px} .bug-form{display:flex;flex-direction:column;gap:15px}.bug-form label{color:#ffcc66;font-weight:500} .bug-form textarea{width:100%;min-height:120px;resize:vertical;background:rgba(255,255,255,.04);border:1px solid rgba(255,255,255,.1);border-radius:10px;color:#fff;padding:12px;font-size:1rem;transition:border-color .15s,box-shadow .15s} .bug-form textarea:focus{border-color:rgba(255,210,120,.5);box-shadow:0 0 10px rgba(255,210,120,.2);outline:none} .bug-upload input[type=file]{display:block;margin-top:5px;color:#ccc;font-size:.9rem} .bug-upload input[type=file]::file-selector-button{background:rgba(255,210,120,.1);border:1px solid rgba(255,210,120,.3);color:#ffcc66;border-radius:8px;padding:6px 12px;cursor:pointer;transition:.2s} .bug-upload input[type=file]::file-selector-button:hover{background:rgba(255,210,120,.25)} .captcha-block{display:flex;align-items:center;gap:10px;margin-top:10px} .captcha-text{background:rgba(255,220,120,.1);padding:6px 14px;border:1px solid rgba(255,220,120,.2);border-radius:8px;color:#ffde91} .captcha-block input{width:80px;text-align:center;background:rgba(255,255,255,.05);border:1px solid rgba(255,255,255,.1);border-radius:8px;color:#fff;padding:6px;transition:border-color .15s,box-shadow .15s} .captcha-block input:focus{border-color:rgba(255,210,120,.5);box-shadow:0 0 8px rgba(255,210,120,.3);outline:none} .bug-table-wrapper{width:100%;overflow-x:hidden;margin-top:25px} .bug-table{width:100%;border-collapse:collapse;color:#e6e3d5;font-size:.95rem;border-radius:12px;overflow:hidden} .bug-table th{text-align:left;padding:14px 18px;color:#ffcc66;border-bottom:2px solid rgba(255,210,120,.25);text-transform:uppercase;background:rgba(30,25,15,.5)} .bug-table td{padding:12px 18px;border-bottom:1px solid rgba(255,255,255,.05);background:rgba(18,15,10,.35)} .bug-table tr:last-child td{border-bottom:none} .bug-row{transition:background .2s}.bug-row:hover td{background:rgba(255,255,255,.05)} .bug-desc{color:#ffe6a6;cursor:pointer;transition:color .15s,text-shadow .15s}.bug-desc:hover{color:#fff2b3;text-shadow:0 0 10px rgba(255,230,160,.45)} .bug-status{font-weight:600;padding:3px 8px;border-radius:6px;white-space:nowrap} .bug-status.pending{color:#ffe17f;background:rgba(255,220,120,.1)} .bug-status.in_progress{color:#79d5ff;background:rgba(120,180,255,.1)} .bug-status.completed{color:#66ff9f;background:rgba(0,255,100,.1)} .bug-modal{position:fixed;inset:0;background:rgba(0,0,0,.78);display:flex;justify-content:center;align-items:center;z-index:1000;transition:opacity .2s} .bug-modal.hidden{opacity:0;visibility:hidden;pointer-events:none} .bug-modal-content{background:rgba(20,20,25,.97);border:1px solid rgba(255,210,120,.2);border-radius:16px;padding:30px 40px;max-width:700px;width:90%;box-shadow:0 0 40px rgba(255,210,120,.12);position:relative} .close-modal{position:absolute;right:18px;top:10px;font-size:1.8rem;color:#aaa;cursor:pointer;transition:.15s}.close-modal:hover{color:#fff} .modal-body p{color:#e2e2e2;line-height:1.6;margin-bottom:10px} .modal-images{margin-top:15px;display:flex;gap:10px;flex-wrap:wrap}.modal-images img{width:48%;border-radius:10px;border:1px solid rgba(255,255,255,.08);transition:transform .2s,box-shadow .2s}.modal-images img:hover{transform:scale(1.04);box-shadow:0 0 14px rgba(255,220,120,.28)} /* ============ 12) FOOTER ============ */ .site-footer{width:100%;max-width:1200px;margin:50px auto 30px;border-radius:16px;background:linear-gradient(180deg,rgba(10,16,24,.96),rgba(6,10,16,.92));border:1px solid rgba(120,180,255,.22);box-shadow:0 8px 26px rgba(0,0,0,.6),0 0 22px rgba(120,180,255,.15);backdrop-filter:blur(calc(6px*var(--fx)));color:#cfe6ff;padding:40px 40px 30px} .footer-content{display:flex;justify-content:space-between;align-items:flex-start;gap:40px;flex-wrap:wrap} .footer-nav{display:flex;flex-direction:column;gap:8px}.footer-nav-link{color:#b9d8ff;text-decoration:none;font-weight:500;transition:.15s}.footer-nav-link:hover{color:#fff;text-shadow:0 0 12px rgba(140,200,255,.5)} .footer-logo{text-align:center}.footer-logo-image{height:80px;filter:drop-shadow(0 0 10px rgba(120,180,255,.55));margin-bottom:10px} .footer-subtext{font-size:14px;color:#9cc9ff;text-shadow:0 0 10px rgba(80,150,255,.28);letter-spacing:.8px} .footer-info-title{font-size:15px;font-weight:600;text-transform:uppercase;margin-bottom:8px;color:#aad0ff} .footer-info-text{font-size:13px;line-height:1.6;color:#bcdcff}.footer-info-text .realm{color:#6eb7ff;font-weight:700}.footer-info-text .copy{color:#88a5c6} .footer-socials{margin-top:12px;display:flex;gap:12px}.social-link{color:#a5ccff;font-size:18px;transition:.2s}.social-link:hover{color:#fff;text-shadow:0 0 14px rgba(120,190,255,.7)} .footer-copy{font-size:13px;color:#c7d7ff;opacity:.7;margin-top:8px;line-height:1.4} .footer-legal{font-size:13px;margin-top:8px}.footer-legal-link{color:#96b7ff;text-decoration:none}.footer-legal-link:hover{color:#ffcc66} .footer-social{display:flex;gap:10px;justify-content:flex-end}.footer-social-link{font-size:20px;color:#9fc4ff}.footer-social-link:hover{color:#ffcc66} .footer-cta{display:flex;justify-content:space-around;align-items:center;gap:30px;margin-top:38px;padding:36px;background:var(--panel);border:1px solid var(--border);border-radius:var(--r-lg);box-shadow:0 0 18px var(--shadow)} .banner-item{width:45%;text-align:center}.banner-item h3{font-family:var(--ff-ui);font-size:26px;color:#e6f5ff;margin-bottom:10px;text-shadow:0 0 12px rgba(120,190,255,.4)}.banner-item p{font-size:15px;color:var(--muted);margin-bottom:12px} /* ============ 13) FORUM THEME (scoped) ============ */ body.forum{--pane:rgba(12,18,26,.94);--pane2:rgba(10,16,24,.9);--border:rgba(120,190,255,.32);--border-soft:rgba(255,255,255,.08);--text:#e7f4ff;--muted:#9ab5d2;--gold:#ffcc66;--frost:#89cfff;--shadow:0 8px 24px rgba(0,0,0,.55);font-family:'Exo 2','Segoe UI',Roboto,sans-serif;background:transparent} .forum.page-container{position:relative;z-index:11;max-width:1150px;width:100%;margin:40px auto 60px;padding:28px 26px 44px;border-radius:14px;box-shadow:var(--shadow);isolation:isolate} .forum.page-container::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,16,24,.96),rgba(6,10,16,.92));border:1px solid var(--border);border-radius:14px;box-shadow:inset 0 0 24px rgba(120,190,255,.1),0 10px 28px rgba(0,0,0,.6);backdrop-filter:blur(calc(6px*var(--fx)));z-index:-1} .breadcrumbs{display:flex;flex-wrap:wrap;align-items:center;gap:8px;background:linear-gradient(180deg,rgba(12,20,32,.96),rgba(6,12,22,.94));border:1px solid var(--border);border-radius:10px;padding:10px 16px;margin-bottom:20px;box-shadow:0 4px 16px rgba(0,0,0,.4)} .breadcrumbs a{color:var(--frost);text-decoration:none;font-weight:700}.breadcrumbs a:hover{color:#fff;text-shadow:0 0 10px var(--frost)}.breadcrumbs span{color:var(--muted)} .forum-cat{background:var(--pane2);border:1px solid var(--border);border-radius:12px;margin-bottom:24px;box-shadow:var(--shadow)} .forum-cat__title{background:linear-gradient(180deg,rgba(120,190,255,.12),transparent);padding:14px 18px;font:800 18px/1 'El Messiri','Exo 2',sans-serif;letter-spacing:.6px;color:var(--gold);text-transform:uppercase;border-bottom:1px solid var(--border)} .forum-table{width:100%;border-collapse:collapse;table-layout:fixed;color:var(--text)} .forum-table th{padding:12px;background:rgba(120,190,255,.12);border-bottom:1px solid var(--border);color:#cfe8ff;text-transform:uppercase;font-size:13px;letter-spacing:.5px} .forum-table td{padding:14px 12px;border-bottom:1px solid var(--border-soft);vertical-align:middle;transition:background .15s} .forum-table tr:hover td{background:rgba(255,255,255,.05)} .forum-table th:nth-child(2),.forum-table td:nth-child(2){width:110px;text-align:center;font-weight:700} .forum-table th:nth-child(3),.forum-table td:nth-child(3){width:140px;text-align:center;font-weight:700} .forum-table th:nth-child(4),.forum-table td:nth-child(4){width:34%} .forum-title{color:var(--frost);font-weight:800;text-decoration:none;display:block}.forum-title:hover{color:#fff;text-shadow:0 0 10px var(--frost)} .forum-desc{color:var(--muted);font-size:13px;margin-top:2px} .last-title a{color:var(--frost);font-weight:700;text-decoration:none;display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.last-title a:hover{color:#fff} .last-meta{color:var(--muted);font-size:13px;margin-top:2px;white-space:nowrap} /* Topics list */ .topic-list{width:100%;border-collapse:collapse;table-layout:fixed;color:var(--text)} .topic-list th{background:rgba(120,190,255,.12);padding:12px;border-bottom:1px solid var(--border);color:#cfe8ff;font-size:13px;text-transform:uppercase} .topic-list td{padding:14px 12px;border-bottom:1px solid var(--border-soft)} .topic-list tr:hover td{background:rgba(255,255,255,.05)} .topic-title a{color:#e7f6ff;font-weight:800;text-decoration:none}.topic-title a:hover{color:#fff;text-shadow:0 0 10px var(--frost)} .topic-meta{color:var(--muted);font-size:13px} .topic-list td:nth-child(2){width:140px;text-align:center} .topic-list td:nth-child(3){width:34%} /* Post view */ .post.card{display:flex;gap:18px;margin:5px;border:1px solid var(--border);border-radius:12px;box-shadow:var(--shadow);padding:18px;margin-bottom:18px;background:rgba(10,16,24,.6)} .post-user{width:200px;text-align:center;border-right:1px solid var(--border-soft);padding-right:12px;display:flex;flex-direction:column;align-items:center} .post-username{color:var(--frost);font-weight:800;margin-bottom:4px} .post-stats{list-style:none;padding:0;margin:0;color:var(--muted);font-size:13px;line-height:1.4} .post-body{flex:1} .post-meta{color:var(--dim);font-size:13px;margin-bottom:8px} .post-content{color:#eaf4ff;font-size:15.5px;line-height:1.65}.post-content img{max-width:100%;border-radius:10px;margin:6px 0} /* Reply / actions */ .reply-btn{padding:8px 14px;border-radius:10px;border:1px solid var(--border);background:rgba(120,190,255,.15);color:var(--frost);font-weight:800;cursor:pointer;transition:.15s}.reply-btn:hover{background:rgba(120,190,255,.28)} .post-actions{display:flex;justify-content:flex-end;margin-top:10px} .post-body .reply-btn{margin-left:auto;display:inline-flex;align-items:center;justify-content:center} /* Create topic */ .topic-card{background:var(--pane2);border:1px solid var(--border);border-radius:12px;padding:24px;box-shadow:var(--shadow)} .topic-form input,.topic-form textarea{width:100%;padding:12px;border-radius:10px;border:1px solid var(--border);background:rgba(8,14,22,.9);color:var(--text);transition:.15s} .topic-form input:focus,.topic-form textarea:focus{border-color:var(--frost);box-shadow:0 0 12px rgba(120,190,255,.32);outline:none} .topic-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:14px} .btn{background:linear-gradient(90deg,#47c3ff,#9ddcff);color:#06121b;font-weight:800;border:none;padding:10px 18px;border-radius:10px;text-decoration:none;box-shadow:0 0 12px rgba(120,190,255,.3);transition:.2s}.btn:hover{filter:brightness(1.1);transform:translateY(-2px)} /* Pagination (forum) */ .pagination{display:flex;justify-content:center;gap:10px;margin-top:24px} .page-btn{padding:8px 14px;border-radius:8px;background:rgba(120,190,255,.15);border:1px solid var(--border);color:#cfe8ff;font-weight:700;text-decoration:none;transition:.15s}.page-btn:hover{background:rgba(120,190,255,.28)} /* Last column links + meta */ .forum-table td:last-child div a{color:var(--frost);font-weight:700;text-decoration:none;transition:.15s;display:inline-block} .forum-table td:last-child div a:hover{color:#fff;text-shadow:0 0 10px(var(--frost))} .forum-table td:last-child .muted{color:var(--muted);font-size:13px;margin-top:2px} /* Quote blocks */ .post-content blockquote{position:relative;background:rgba(12,18,26,.8);border:1px solid rgba(120,190,255,.25);border-left:3px solid var(--frost);border-radius:10px;padding:14px 16px 14px 18px;margin:10px 0 14px;font-size:14.5px;line-height:1.6;color:var(--muted);box-shadow:inset 0 0 12px rgba(120,190,255,.08);backdrop-filter:blur(calc(6px*var(--fx)))} .post-content blockquote::before{content:attr(data-quote-author);display:block;color:var(--frost);font-weight:700;font-size:14px;margin-bottom:6px;text-shadow:0 0 8px rgba(120,190,255,.45)} .post-content blockquote p{margin:4px 0 0;color:var(--text)} /* Reply form */ #reply.card{position:relative;background:linear-gradient(180deg,rgba(8,14,22,.96),rgba(10,18,26,.94));border:1px solid rgba(120,190,255,.25);border-radius:14px;box-shadow:0 0 22px rgba(0,0,0,.7),inset 0 0 22px rgba(120,190,255,.05);padding:20px 24px 28px;margin-top:30px;isolation:isolate} #reply.card::before{content:"";position:absolute;inset:0;border-radius:14px;box-shadow:inset 0 0 26px rgba(120,190,255,.07);z-index:-1} #reply h3{color:var(--gold);font-size:20px;margin-bottom:12px;text-transform:uppercase;letter-spacing:.6px;text-shadow:0 0 10px rgba(255,220,120,.2)} #reply .tox-tinymce{border-radius:10px!important;overflow:hidden;box-shadow:0 0 16px rgba(0,0,0,.6)} #replyForm .btn{background:linear-gradient(90deg,#53c9ff,#8fdcff);border:1px solid rgba(120,190,255,.4);color:#041018;font-weight:800;border-radius:10px;padding:10px 24px;transition:.2s;box-shadow:0 0 14px rgba(120,190,255,.22)}#replyForm .btn:hover{filter:brightness(1.12);transform:translateY(-2px)} /* Flags */ .topic-row.pinned{background:rgba(255,204,102,.08);border-left:3px solid #ffcc66}.topic-row.pinned:hover{background:rgba(255,204,102,.14)} .topic-row.locked{background:rgba(255,120,120,.06);border-left:3px solid #ff8f8f}.topic-row.locked:hover{background:rgba(255,120,120,.11)} .topic-flag{display:inline-block;margin-left:8px;padding:2px 8px;border-radius:8px;font-size:11px;font-weight:800;letter-spacing:.5px} .topic-flag.pinned{color:#1b1204;background:linear-gradient(90deg,#ffd46e,#fff1a6);border:1px solid rgba(255,204,102,.5);box-shadow:0 0 10px rgba(255,210,130,.2)} .topic-flag.locked{color:#ffd0d0;background:rgba(120,0,0,.35);border:1px solid #ff8f8f} .topic-title-line{display:flex;align-items:center;gap:8px;margin-bottom:4px} .badge{display:inline-block;padding:3px 8px;border-radius:8px;font-size:12px;font-weight:800;letter-spacing:.4px;vertical-align:middle} .badge-pinned{background:linear-gradient(90deg,#ffcc66,#ffe38a);color:#1b1206;border:1px solid #ffcc66;box-shadow:0 0 14px rgba(255,204,102,.2)} .badge-locked{background:rgba(255,120,120,.1);color:#ffb3b3;border:1px solid #ff8f8f} .topic-row.pinned td{background:linear-gradient(180deg,rgba(255,204,102,.06),rgba(12,18,26,.08));border-left:3px solid #ffcc66} .topic-row.locked .topic-title a{opacity:.88} /* ============ 14) ACCOUNT / LK ============ */ .account-page .account-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin-top:8px} @media(max-width:900px){.account-page .account-grid{grid-template-columns:1fr}} .account-card{padding:18px} .account-card-title{color:var(--gold);text-transform:uppercase;letter-spacing:.6px;margin-bottom:12px} .account-profile{display:flex;gap:18px;align-items:flex-start} .account-info .account-row{color:var(--text);margin-bottom:6px}.account-info .account-row span{color:var(--muted);margin-right:6px} .file-label{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--border);padding:8px 12px;border-radius:10px;background:rgba(120,190,255,.08);color:#cfe8ff;cursor:pointer;margin:8px 0}.file-label input{display:none} .password-form .form-row{display:flex;flex-direction:column;gap:6px;margin-bottom:10px} .password-form input{background:rgba(8,14,22,.9);border:1px solid var(--border);color:#e7f4ff;border-radius:10px;padding:10px} .password-form input:focus{outline:none;border-color:var(--frost);box-shadow:0 0 12px rgba(120,190,255,.32)} .password-form .form-actions{display:flex;justify-content:flex-end} /* LK alerts/cards/grid */ .lk .alert{margin:12px 0;padding:12px 14px;border-radius:10px;border:1px solid var(--border)} .lk .alert.success{background:rgba(70,180,120,.1);border-color:rgba(70,180,120,.45);color:#cfeee0} .lk .alert.error{background:rgba(200,90,90,.1);border-color:rgba(220,110,110,.5);color:#ffd6d6} .lk .lk-banner{display:flex;gap:12px;align-items:center;margin-bottom:14px;padding:12px 14px;border:1px dashed rgba(255,204,102,.5);border-radius:12px;background:rgba(255,204,102,.06);color:#ffe7b0} .lk .lk-banner i{font-size:20px} .lk .lk-grid{display:grid;grid-template-columns:340px 1fr;gap:24px;grid-template-areas:"left right" "left chars";align-items:start} .lk .profile{grid-area:left}.lk .password{grid-area:right;margin-bottom:0!important}.lk .characters{grid-area:chars;margin-top:-110px!important} @media (max-width:1200px){.lk .lk-grid{grid-template-columns:320px 1fr;column-gap:18px}} @media (max-width:980px){.lk .lk-grid{grid-template-columns:1fr;grid-template-areas:"left" "right" "chars"}.lk .characters{margin-top:0!important}} @media (max-width:600px){.lk .lk-card{padding:14px}.lk .password input{font-size:15px}} .lk .lk-card{background:var(--panel);border:1px solid var(--border);border-radius:16px;padding:16px} .lk .lk-card h3{margin:0 0 10px} .lk .profile .avatar-wrap{display:flex;flex-direction:column;align-items:center} .lk .avatar-frame{width:180px;height:180px;border:1px solid rgba(120,180,255,.25);border-radius:20px;overflow:hidden;box-shadow:0 6px 18px rgba(0,40,80,.35);display:flex;align-items:center;justify-content:center;background:rgba(8,14,22,.7);margin-bottom:12px} .lk .avatar-img{width:100%;height:100%;object-fit:cover} .lk .avatar-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;color:#a9c7e8;gap:6px} .lk .avatar-empty i{font-size:42px;opacity:.9} .lk .avatar-form .file-label{display:block;margin:10px 0;padding:10px;border:1px dashed rgba(120,180,255,.35);border-radius:10px;color:#9fd0ff;cursor:pointer;text-align:center} .lk .avatar-form .file-label input{display:none} .lk .avatar-actions{display:flex;gap:8px;justify-content:center} .lk .btn{padding:10px 14px;border-radius:10px;border:1px solid rgba(120,180,255,.32);background:rgba(120,190,255,.08);color:#cfe3ff;cursor:pointer}.lk .btn:hover{background:rgba(120,190,255,.16)} .lk .btn-primary{border-color:rgba(120,200,255,.5);background:rgba(120,200,255,.18)} .lk .btn-ghost{background:transparent} .lk .btn-ghost.danger{border-color:rgba(255,120,120,.45);color:#ffb3b3} .lk .mt-8{margin-top:8px} .lk .profile-kv{list-style:none;margin:12px 0 0;padding:0;display:grid;grid-template-columns:1fr;gap:8px} .lk .profile-kv li{display:grid;grid-template-columns:22px 1fr auto;gap:10px;align-items:center;background:rgba(8,14,22,.6);border:1px solid var(--border);border-radius:10px;padding:8px 10px;color:#dbeaff} .lk .profile-kv li i{opacity:.85}.lk .profile-kv li span{opacity:.75} .lk .password .grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px} @media(max-width:720px){.lk .password .grid-2{grid-template-columns:1fr}} .lk .password input{width:100%;background:rgba(8,14,22,.85);border:1px solid var(--border);border-radius:10px;padding:10px;color:#e7f4ff} .lk .password .desc{opacity:.8;margin:8px 0 10px} .lk .characters .chars-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px} .lk .characters .total-gold{display:flex;align-items:center;gap:10px;color:#ffe3a0} .lk .coin{display:inline-flex;align-items:center;gap:6px;padding:4px 8px;border-radius:10px;border:1px solid rgba(255,255,255,.12);background:rgba(8,14,22,.7)} .lk .coin.gold{border-color:rgba(255,204,102,.5)}.lk .coin.silver{border-color:rgba(180,200,220,.4)}.lk .coin.copper{border-color:rgba(220,160,120,.4)} .lk .table-wrap{overflow:auto} .lk .char-table{width:100%;border-collapse:separate;border-spacing:0 8px} .lk .char-table th,.lk .char-table td{padding:10px 12px;background:rgba(8,14,22,.66);border:1px solid var(--border);text-align:left} .lk .char-table th{background:rgba(8,14,22,.85);opacity:.95} .lk .char-table .col-level{text-align:center;width:120px}.lk .char-table .col-class{width:220px}.lk .char-table .col-gold{width:260px}.lk .char-table .col-gold .coin{margin-right:6px} /* ============ 15) AVATARS (shared + forum) ============ */ .avatar{width:44px;height:44px;border-radius:10px;object-fit:cover;border:1px solid var(--border);box-shadow:0 0 10px rgba(120,190,255,.16)} .avatar-lg{width:86px;height:86px;border-radius:12px} .avatar-xl{width:128px;height:128px;border-radius:14px} .avatar-empty{display:flex;align-items:center;justify-content:center;background:linear-gradient(180deg,rgba(120,190,255,.06),rgba(255,255,255,.05));color:var(--muted);font-size:12px;text-align:center;padding:6px;border-style:dashed} .post-avatar-wrap{width:96px;height:96px;border-radius:18px;overflow:hidden;border:1px solid rgba(120,180,255,.28);box-shadow:0 6px 16px rgba(0,40,80,.32);margin-bottom:10px;display:flex;align-items:center;justify-content:center;background:rgba(8,14,22,.6)} .post-avatar-wrap .avatar-img{width:100%;height:100%;object-fit:cover} /* ============ 16) RESPONSIVE (global + forum/LK) ============ */ @media (max-width:1200px){ .main-container{max-width:1100px;padding:90px 20px 50px} .news-grid,.features-grid,.how-to-start-grid{grid-template-columns:repeat(2,1fr);gap:24px} } @media (max-width:1024px){ .main-container{gap:var(--gap-3)} .news-grid{grid-template-columns:repeat(2,1fr);gap:24px} .features-grid,.how-to-start-grid{grid-template-columns:repeat(2,1fr);gap:22px} .footer-content{gap:28px} } @media (max-width:992px){ header{flex-direction:column;align-items:center;gap:10px;padding:12px 18px} .logo{position:relative;transform:none;left:auto;top:0;margin-bottom:10px} .arcane-menu{display:none}.mobile-menu-toggle,.menu-toggle,#menu-toggle{display:block} .auth-and-flags-group{width:100%;justify-content:flex-end;margin-top:10px} .logo-nav-status-group{width:100%;justify-content:space-between} .news-grid,.news-cards-grid{grid-template-columns:1fr} .admin-container{flex-direction:column}.admin-sidebar{width:100%;border:none;border-bottom:2px solid rgba(120,190,255,.25)}.admin-content{padding:20px} .bug-container,.registration-wrapper,.auth-box,.news-full-container{margin:30px 10px;padding:25px 20px} .status-console .balanced-layout{grid-template-columns:1fr!important;gap:24px}.status-column,.status-news{width:100%} .news-list{gap:14px}.news-entry{align-items:center}.news-entry img{width:60px;height:45px} .features-list{grid-template-columns:1fr!important;gap:26px} } @media (max-width:900px){ #video-particles{display:none!important} .hero-content{-webkit-backdrop-filter:none;backdrop-filter:none;background:rgba(10,12,16,.55);box-shadow:0 0 20px rgba(255,220,150,.08)} .news-layout{grid-template-columns:1fr}.news-card-modern .news-image img{height:220px} .news-full-container{padding:40px 30px;margin:30px 15px} .server-status-modern .console-body{display:block}.status-news{margin-top:14px} .post.card{flex-direction:column}.post-user{width:100%;border:none;border-bottom:1px solid var(--border-soft);margin-bottom:10px;padding-bottom:10px} .forum-table thead,.topic-list thead{display:none} .forum-table tr,.topic-list tr{display:grid;grid-template-columns:1fr;gap:8px;padding:10px 8px} .forum-table td,.topic-list td{border:none;padding:4px 0} .page-wrap{width:100%;max-width:100%;padding:140px 12px 0} header,.site-footer{width:100%;max-width:100%;border-radius:0;margin:0} .arcane-menu{display:none!important}.mobile-menu-toggle{display:block!important} .mobile-nav-panel{display:flex;max-width:100vw;overflow-x:hidden} .hero-epic{padding:18px 0 22px!important;background-position:center!important} .hero-epic .hero-content{padding:20px 14px} } @media (max-width:768px){ .logo img{height:60px} .section-title{font-size:32px;margin-bottom:28px;letter-spacing:3px} .hero-content{padding:24px 16px}.hero-subtitle{font-size:13px}.hero-description{font-size:14px;margin:8px auto 16px} .hero-actions{flex-wrap:wrap;gap:10px}.hero-btn{width:100%;justify-content:center} .news-grid,.features-grid,.how-to-start-grid{grid-template-columns:1fr;gap:24px} .news-image{height:180px} .footer-content{flex-direction:column;gap:22px;text-align:center}.footer-column{width:100%;justify-content:center} } @media (max-width:640px){.telegram-link{margin-left:10px;font-size:20px}.hero-epic{min-height:auto;padding:18px 0 22px}.hero-title{font-size:26px}.hero-realm{margin-top:14px}} @media (max-width:576px){header{padding:8px 12px}.logo img{height:42px}.auth-btn,.logout-button{font-size:12px;padding:6px 10px}.footer-logo-image{height:36px}.mobile-nav a{font-size:13px;padding:12px 18px}} @media (max-width:480px){.logo img{height:40px}.section-title{font-size:28px;margin-bottom:22px}.news-full-title{font-size:2rem}.footer-logo-image{height:40px}} @media (max-width:420px){.auth-box,.registration-wrapper{padding:22px 16px}.auth-form input,.registration-form-modern input{font-size:14px;padding:10px}.admin-btn{font-size:12px;padding:8px 12px}.hero-title{font-size:1.6rem;letter-spacing:2px}.section-title{font-size:1.4rem}.news-full-title{font-size:1.5rem}.feature-name{font-size:1rem}.footer-nav-link{font-size:12px}} /* ============ 17) MISC HELPERS ============ */ .admin-link{display:inline-flex;align-items:center;gap:6px;font-weight:600;color:#ffd46e;text-decoration:none;background:rgba(255,212,110,.08);border:1px solid rgba(255,212,110,.3);padding:8px 14px;border-radius:8px;margin-right:16px;transition:.2s;font-size:14px} .admin-link i{color:#ffe38a}.admin-link:hover{background:linear-gradient(90deg,#ffe38a,#ffd46e);color:#111;transform:translateY(-1px);box-shadow:0 0 18px rgba(255,220,120,.35)} .page-wrap:not(:has(.hero-epic)) .main-container{padding-top:25px} body:not(.has-hero) .main-container{padding-top:25px} /* ==== Account Link ==== */ .account-link{display:inline-flex;align-items:center;justify-content:center;height:36px;padding:0 16px;border:1px solid rgba(120,190,255,.45);border-radius:8px;background:rgba(8,14,22,.6);color:#bde3ff;font:600 14px/1 "Exo 2", Segoe UI, sans-serif;text-decoration:none;letter-spacing:.3px;box-shadow:0 0 8px rgba(100,180,255,.25);transition:.2s} .account-link:hover{color:#04121f;background:linear-gradient(180deg,#84d3ff,#3ea9f7);border-color:rgba(130,200,255,.9);box-shadow:0 0 14px rgba(120,190,255,.55);transform:translateY(-1px)} .account-link:active{transform:translateY(0);box-shadow:0 0 6px rgba(100,180,255,.3)} /* ==== Characters Table radius fix ==== */ .lk-card.characters{border-radius:10px;overflow:hidden} .lk-card.characters .char-table{border-radius:10px;overflow:hidden} .lk-card.characters .char-table th:first-child{border-top-left-radius:10px} .lk-card.characters .char-table th:last-child{border-top-right-radius:10px} .lk-card.characters .char-table tr:last-child td:first-child{border-bottom-left-radius:10px} .lk-card.characters .char-table tr:last-child td:last-child{border-bottom-right-radius:10px} /* ==== Large avatar blocks (LK & forum) kept from your addendum ==== */ .avatar-frame{ position:relative; width:260px; height:260px; margin:0 auto 14px; overflow:hidden; border-radius:16px; background:rgba(6,14,24,.55); border:1px solid var(--border); box-shadow:inset 0 0 14px rgba(120,190,255,.08),0 8px 18px var(--shadow); display:grid; place-items:center; } .avatar-frame img{ width:100%; height:100%; object-fit:cover; display:block; border-radius:inherit; } .avatar-frame .avatar-empty{ display:flex; flex-direction:column; align-items:center; justify-content:center; gap:6px; width:170px; min-height:170px; padding:14px; border:2px dashed rgba(200,220,255,.35); border-radius:12px; background:rgba(255,255,255,.03); color:#cfe6ff; text-align:center; } .avatar-frame .avatar-empty i{ font-size:40px; opacity:.9; margin-bottom:6px; } .avatar-frame .avatar-empty span{ font-size:12px; color:var(--muted); } .post-avatar-wrap{ width:72px; height:72px; border-radius:10px; overflow:hidden; border:1px solid var(--border); background:rgba(10,16,24,.6); display:grid; place-items:center; } .post-avatar-wrap img{ width:100%; height:100%; object-fit:cover; display:block; } .post-avatar-wrap .avatar-empty{ width:94%; height:100%; border:2px dashed rgba(200,220,255,.35); border-radius:10px; display:flex; align-items:center; justify-content:center; gap:6px; background:rgba(255,255,255,.03); color:#cfe6ff; } /* ============ 18) ANIMATION KILL-SWITCHES ============ */ /* Auto-trim animations when motion is off or fx-low */ .fx-low *, @media (prefers-reduced-motion:reduce){ .hero-epic::before,.hero-epic::after,.hero-fog,#video-particles, .status-icon.online,.news-card-pinned::after { animation:none !important } }