/* ===== Inferno Ember/Flame Overlay ===== */ #inferno-embers, #inferno-flame-top, #inferno-flame-bottom, #inferno-flame-mid { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 0; } #inferno-embers { z-index: 9999; } #inferno-flame-top, #inferno-flame-bottom, #inferno-flame-mid { z-index: 9000; } /* ===== Theme Color Variables (missing defaults) ===== */ :root { --bg: #0d0f14; --bg-dark: #15181e; --bg-darker: #0a0c10; --bg-primary: #ffffff; /* Fonts */ --font-family: 'Poppins', sans-serif; --font-family-primary: 'Poppins', sans-serif; --font-family-secondary: 'Cinzel', serif; --font-family-tertiary: 'Roboto', sans-serif; --font-family-quaternary: 'Cinzel', serif; --font-weight: 500; /* Borders */ --border: #1c202b; --border-bottom: #222633; --border-dark: #15181d; --border-darker: #0e1016; --border-light: #323649; --border-primary: #fff; --border-secondary: #eaeaea; --primary-border-bottom: #dd8500; /* Social Borders */ --discord-border: #404eed; --kick-border: #53fc19; --twitch-border: #6034b2; --youtube-border: #ff0000; --youtube-border-bottom: #861f1f; /* General Buttons */ --btn-cancel: #cf2222; --btn-cancel-border-bottom: #631616; --btn-hover: #eaeaea; --btn-primary: #fff; --btn-secondary: #eaeaea; --btn-secondary-border-bottom: #858585; --btn-txt-dark: #0d0d0d; --btn-txt-light: #eaeaea; /* Social Buttons */ --btn-discord: #404eed; --btn-discord-border-bottom: #0000ee; --btn-kick: #53fc19; --btn-kick-border-bottom: #30a30a; --btn-twitch: #6034b2; --btn-twitch-border-bottom: #36196d; --btn-youtube: #ff0000; /* Button Hovers */ --btn-hover-border: #c0c0c0; --btn-hover-border-bottom: #858585; /* General Text */ --txt-code: #ffcf87; --txt-dark: #7f7f7f; --txt-muted: #929eaf; --txt-placeholder: #3a3f46; --txt-primary: #fff; --txt-secondary: #eaeaea; --txt-selection: #080b0f; /* Social Text */ --txt-discord: #404eed; --txt-kick: #53fc19; --txt-twitch: #6034b2; --txt-youtube: #ff0000; /* Staff Roles */ --txt-beta-tester: #ffff88; --txt-community-manager: #ff4cff; --txt-content-creator: #992dff; --txt-designer: #17ff77; --txt-developer: #ff2e2e; --txt-events-coordinator: #ff952b; --txt-gm: #508dff; --txt-manager: #74ff3d; --txt-senior-gm: #00ffff; --txt-support: #2bffca; /* WoW Classes */ --txt-deathknight: #c41f3b; --txt-druid: #ff7d0a; --txt-hunter: #abd473; --txt-mage: #69ccf0; --txt-paladin: #f58cba; --txt-priest: #ffffff; --txt-rogue: #fff569; --txt-shaman: #0070de; --txt-warlock: #9482c9; --txt-warrior: #c79c6e; --txt-monk: #00ff96; --txt-demonhunter: #a330c9; /* WoW Item Qualities */ --txt-item-poor: #9d9d9d; --txt-item-common: #ffffff; --txt-item-uncommon: #1eff00; --txt-item-rare: #0070dd; --txt-item-epic: #a335ee; --txt-item-legendary: #ff8000; --txt-item-artifact: #e6cc80; --txt-item-heirloom: #00ccff; } /* ---------------- END OF CHANGE THEME COLOR SETTINGS ---------------- */ /* Mobile menu backdrop */ body.menu-open { overflow: hidden; } /* Mobile dropdown submenu — fix positioning */ @media screen and (max-width: 1199px) { .dropdown-submenu > .dropdown-menu { position: static !important; left: 0 !important; transform: none !important; margin-left: 1rem; display: none; background: transparent !important; border: none !important; box-shadow: none !important; } .dropdown-submenu.open > .dropdown-menu { display: block !important; } .dropdown-submenu > a::after { content: "▼" !important; } .dropdown-submenu > .dropdown-menu::before, .dropdown-submenu > .dropdown-menu::after { display: none !important; content: none !important; } .dropdown-submenu > .dropdown-menu > li:first-child::before { display: none !important; content: none !important; } } /* ===== Mobile Menu Improvements ===== */ @media screen and (max-width: 1199px) { .header .navbar .navbar-collapse.collapse-primary { padding: 0 !important; } .header .navbar .navbar-collapse.collapse-primary .navbar-nav { padding: 3rem 0 0; } .header .navbar .navbar-collapse.collapse-primary .navbar-nav .nav-item .nav-link { font-family: 'Poppins', sans-serif; font-weight: 500; font-size: 0.95rem; padding: 0.8rem 1.5rem; border-bottom: 1px solid rgba(255,255,255,0.06); } .header .navbar .navbar-collapse.collapse-primary .navbar-nav .nav-item .nav-link .dropdown-arrow { display: none; } .header .navbar .navbar-collapse.collapse-primary .navbar-nav .nav-item.dropdown > .nav-link::after { content: "▾"; display: inline-block; font-size: 0.7rem; margin-left: 0.5rem; opacity: 0.5; border: none; width: auto; height: auto; position: static; } .header .navbar .navbar-collapse.collapse-primary .navbar-nav .nav-item .dropdown-menu { background: rgba(0,0,0,0.3); border: none; border-radius: 0; padding: 0; margin: 0; position: static !important; transform: none !important; box-shadow: none; } .header .navbar .navbar-collapse.collapse-primary .navbar-nav .nav-item .dropdown-menu .dropdown-item { font-family: 'Poppins', sans-serif; font-size: 0.85rem; padding: 0.6rem 2.5rem; color: rgba(255,255,255,0.6); border-bottom: 1px solid rgba(255,255,255,0.03); } .header .navbar .navbar-collapse.collapse-primary .navbar-nav .nav-item .dropdown-menu .dropdown-item:hover { color: #fff; background: rgba(255,255,255,0.05); } .mobile-action-buttons { border-top: 1px solid rgba(255,255,255,0.1); padding: 1rem 1.5rem 2rem !important; margin-top: 0 !important; } .mobile-action-buttons .nav-btn { padding: 0.65rem 1rem; font-size: 0.85rem; } } /* Nav link font */ .header .navbar .navbar-nav .nav-item .nav-link { font-family: 'Poppins', sans-serif; font-weight: 500; letter-spacing: 0.04em; } @media screen and (min-width: 1200px) { .header .navbar .navbar-nav .nav-item .nav-link { font-size: 0.95rem; padding: 0 1.2rem; } } /* ===== Nav Buttons ===== */ .nav-btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.6rem 1.4rem; font-family: 'Poppins', sans-serif; font-weight: 600; font-size: 0.85rem; text-transform: uppercase; letter-spacing: 0.06em; border-radius: 3px; text-decoration: none !important; transition: all 0.2s ease; white-space: nowrap; border: 1px solid transparent; } .nav-btn .nav-btn-icon { font-size: 1.1em; line-height: 1; } .nav-btn-download { background: linear-gradient(180deg, #e8a030 0%, #c88020 100%); color: #1a0800 !important; border-color: #d49028; box-shadow: 0 2px 8px rgba(200,120,20,0.25); } .nav-btn-download:hover { background: linear-gradient(180deg, #f0b040 0%, #d89028 100%); color: #1a0800 !important; box-shadow: 0 3px 14px rgba(200,120,20,0.4); } .nav-btn-login { background: transparent; color: #c8b898 !important; border-color: rgba(200,184,152,0.3); } .nav-btn-login:hover { background: rgba(200,184,152,0.08); color: #e8d8b8 !important; border-color: rgba(200,184,152,0.5); } .nav-btn-register { background: linear-gradient(180deg, #c07020 0%, #8a4c10 100%); color: #f5dfa0 !important; border-color: #b86818; box-shadow: 0 2px 8px rgba(180,80,10,0.22); } .nav-btn-register:hover { background: linear-gradient(180deg, #d48020 0%, #a05c18 100%); color: #fff8e0 !important; box-shadow: 0 3px 14px rgba(200,100,10,0.35); } .nav-btn-account { background: transparent; color: #8ab4f8 !important; border-color: rgba(138,180,248,0.3); } .nav-btn-account:hover { background: rgba(138,180,248,0.08); color: #a8c8ff !important; border-color: rgba(138,180,248,0.5); } .nav-btn-logout { background: transparent; color: #c08070 !important; border-color: rgba(192,128,112,0.3); } .nav-btn-logout:hover { background: rgba(192,128,112,0.08); color: #e0a090 !important; border-color: rgba(192,128,112,0.5); } /* Header action buttons row */ .header-action-buttons { gap: 10px; } .header-action-buttons .nav-item .nav-link.nav-btn { padding: 0.6rem 1.4rem; line-height: 1.2; } /* Mobile action buttons inside hamburger menu */ .mobile-action-buttons { border-top: 1px solid rgba(255, 255, 255, 0.08); width: 100%; } .mobile-action-buttons .nav-btn { width: 100%; max-width: 280px; padding: 0.8rem 1.4rem; font-size: 0.9rem; } /* Logo sizing */ .header .navbar .navbar-brand img { max-width: 320px; max-height: 80px; width: auto; height: auto; } @media (max-width: 576px) { .header .navbar .navbar-brand img { max-width: 200px; max-height: 55px; } } /* Dropdown submenu - 3rd level */ .dropdown-submenu { position: relative; } .dropdown-submenu > .dropdown-menu { position: absolute !important; top: 0 !important; left: 100% !important; margin-top: 0 !important; transform: none !important; display: none; } .dropdown-submenu:hover > .dropdown-menu { display: block !important; } /* Arrow on the right of the sub-dropdown item */ .dropdown-submenu > a { position: relative !important; padding-right: 1.8em !important; display: block !important; } /* Hide the theme's absolute-positioned dropdown-arrow inside submenu links */ .dropdown-submenu > a > i.dropdown-arrow { display: none !important; } /* Separator between sub-dropdown items */ .dropdown-submenu > .dropdown-menu > li:not(:last-child) { border-bottom: 1px solid var(--border-light); } /* Hide the upward caret triangle on sub-dropdown menus, but preserve the background box */ .dropdown-submenu > .dropdown-menu::after { display: none !important; content: none !important; } .dropdown-submenu > .dropdown-menu::before { clip-path: none !important; } .dropdown-submenu > .dropdown-menu > li:first-child::before { display: none !important; content: none !important; } @media screen and (max-width: 1199px) { .dropdown-submenu > .dropdown-menu { position: static !important; left: 0 !important; transform: none !important; margin-left: 1rem; display: none; } .dropdown-submenu.open > .dropdown-menu { display: block !important; } .dropdown-submenu > a::after { content: "▼" !important; } } /* Global Styles */ * { font-family: var(--font-family); font-weight: var(--font-weight); text-wrap: pretty; } body { background-color: var(--bg); background-image: none; } ::selection { background-color: var(--bg-primary); color: var(--txt-dark); } ::-moz-selection { background-color: var(--bg-primary); color: var(--txt-dark); } /* Navbar Styles */ .header::before, .nav-active::before, .dropdown-toggle::after { display: none; } /* Submenu right-pointing arrow — overrides the display:none above */ .dropdown-submenu > a.dropdown-toggle::after { content: "▶" !important; display: block !important; position: absolute !important; right: 1.2em !important; left: auto !important; top: 50% !important; bottom: auto !important; transform: translateY(-50%) !important; border: none !important; width: auto !important; height: auto !important; margin: 0 !important; background-color: transparent !important; font-size: 0.55em; opacity: 0.7; } /* Navbar - Main Styles */ .header { width: 100%; height: auto; z-index: 98; background-color: var(--bg-darker); background-image: none; -webkit-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); /* For Safari and Chrome */ -moz-box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); /* For Firefox */ box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.5); /* Standard Syntax */ } /* Navbar - Main Styles - Dividers */ .header .navbar .navbar-nav .nav-item::after { background-color: none; } /* Navbar - Link Dividers */ .header .navbar .navbar-nav .nav-item::after { display: none; } .header .navbar .navbar-nav .nav-item .nav-link { color: var(--txt-primary); text-transform: uppercase; } .nav-link { font-family: "Poppins", sans-serif; font-weight: 500; color: var(--txt-primary); text-transform: uppercase; transition: none; font-size: 1.1rem; } .nav-link:hover, .nav-link:focus, .nav-item:hover { font-family: "Poppins", sans-serif; color: var(--txt-secondary) !important; background-color: var(--bg-darker); } .nav-link.active { font-family: "Poppins", sans-serif; color: var(--txt-secondary) !important; border-radius: 0rem; } .nav-link:focus-visible { font-family: "Poppins", sans-serif; box-shadow: none; } /* Navbar - Default State */ .header .navbar .navbar-nav .nav-item .nav-link { font-family: "Poppins", sans-serif; font-weight: 500; font-size: 1.1rem; border: 0.1rem solid transparent; } /* Navbar - Hover Block */ .header .navbar .navbar-nav .nav-item:hover .nav-link, .header .navbar .navbar-nav .nav-item .nav-link:hover, .header .navbar .navbar-nav .nav-item .nav-link:active, .header .navbar .navbar-nav .nav-item .nav-link.nav-active { font-family: "Poppins", sans-serif; background-color: var(--bg-dark); } /* Navbar Logo */ .navbar-logo { height: auto; min-width: 15rem; max-width: 40%; display: block; margin: auto; transition: all 0.3s ease-in-out; } .navbar-logo:hover { filter: saturate(0) brightness(1.2); } /* UCP - Nav */ .nav-pills .nav-link.active, .nav-pills .show > .nav-link { box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; background-color: var(--bg-primary) !important; color: var(--txt-dark) !important; font-weight: 600; } /* Account Info Text */ .section-topbar .membership-bar .membership-bar-info, .info-welcome { color: var(--txt-secondary); font-size: 1rem; font-style: normal; text-shadow: none; } .section-topbar { background-color: transparent; } /* Currency Text */ .gold-points { color: var(--txt-primary) !important; font-weight: 500 !important; text-transform: uppercase; } .silver-points { color: var(--txt-secondary) !important; font-weight: 500 !important; text-transform: uppercase; } .text-gold { color: var(--txt-primary) !important; } .text-silver, .ampersand { color: var(--txt-secondary) !important; } .text-gold, .text-silver, .ampersand { font-size: 1rem; font-weight: 500; } /* Anchor Tag */ a { color: var(--txt-primary); font-family: "Poppins", sans-serif; font-weight: 500; text-decoration: none; text-shadow: none; } a:hover { color: var(--txt-secondary); } span { font-family: "Poppins", sans-serif; font-weight: 500; } /* Headings */ h1, h2, h3, h4, h5, h6 { color: var(--txt-primary); font-family: "Poppins", sans-serif; font-weight: 600; text-transform: uppercase; } /* Paragraphs */ p { color: var(--txt-secondary); font-weight: 500; text-shadow: none; } /* Code Blocks */ body code { color: var(--txt-code); font-size: 0.875em; word-wrap: break-word; } .text-warning { color: var(--txt-primary) !important; } /* Dropdown Menus */ .dropdown .dropdown-menu, .dropdown .dropdown-menu li .dropdown-item { background-color: var(--bg-darker); font-size: 1rem; font-weight: 600; text-transform: uppercase; } .dropdown .dropdown-menu { border: 0.1rem solid var(--border); border-radius: 0; padding: 0; } .dropdown .dropdown-menu li .dropdown-item { color: var(--txt-secondary); padding: 0.6em 0; z-index: 100; font-family: "Poppins", sans-serif; font-weight: 500; font-size: 1rem; } .dropdown-item { background-color: transparent; color: var(--txt-secondary); padding: 0.6em 1em; text-transform: uppercase; font-weight: 600; } .dropdown-item:hover, .dropdown-item:focus { color: var(--txt-primary); text-transform: uppercase; } .dropdown .dropdown-menu li .dropdown-item::after { border: 0.1rem solid var(--border); width: auto; } .dropdown .dropdown-menu li:hover .dropdown-item, .dropdown .dropdown-menu li .dropdown-item:hover, .dropdown .dropdown-menu li .dropdown-item:active, .dropdown .dropdown-menu li .dropdown-item.nav-active { background-color: var(--bg); color: var(--txt-primary); text-transform: uppercase; } .dropdown-item:hover, .dropdown-item:focus { color: var(--txt-primary); background-color: var(--bg-dark); } .header .navbar .navbar-nav .nav-item .dropdown-menu { margin-top: 0; } /* Mobile Menu */ .offcanvas { background-color: var(--bg-darker); border-right: 0.1rem solid var(--border) !important; } .offcanvas-header { background-color: var(--bg-darker); border-bottom: 0.1rem solid var(--border); padding: 1rem; } .mobile-logo { width: 1rem; height: auto; } .btn-close { opacity: 1; } /* Text and Backgrounds */ .text-light { color: var(--txt-secondary); } .bg-dark { background-color: var(--bg-dark) !important; } .bg-darker::before { background-color: var(--bg-darker) !important; } .border { border-color: var(--border) !important; } /* Section Padding */ .section-padding { overflow: hidden; padding-top: 5rem; padding-bottom: 5rem; } /* Button - Default */ .btn, .btn-warning, .nice_button, .btn-close, .btn-primary, .btn-secondary, .accordion-button, .btn-check, .btn.active, .btn.show { background-color: var(--btn-primary) !important; border-radius: 0; font-family: "Poppins", sans-serif; color: var(--btn-txt-dark); font-size: 1rem; font-weight: 600; text-shadow: none; font-style: normal; text-transform: uppercase; box-shadow: none !important; transition: all 0.3s ease-in-out; border-radius: 0.15rem !important; } /* Button - Default - Hover States */ .btn:hover, .btn-warning:hover, .nice_button:hover, .btn-close:hover, .btn-primary:hover, .btn-secondary:hover, .accordion-button:hover, .btn-check:hover, .btn.active:hover, .btn.show:hover { background-color: var(--btn-secondary) !important; border-bottom: 0.3rem solid var(--btn-secondary-border-bottom) !important; border-radius: 0; color: var(--btn-txt-dark) !important; font-size: 1rem; font-weight: 600; text-shadow: none; font-style: normal; text-transform: uppercase; transition: all 0.3s ease-in-out !important; border-radius: 0.15rem !important; } /* Button - Default - Active States */ .btn:active, .btn-warning:active, .nice_button:active, .btn-close:active, .btn-primary:active, .btn-secondary:active, .accordion-button:active, .btn:focus, .btn-warning:focus, .nice_button:focus, .btn-close:focus, .btn-primary:focus, .btn-secondary:focus, .accordion-button:focus, .btn-check:active, .btn-check:focus, .btn.active:active, .btn.active:focus, .btn.show:active, .btn.show:focus { background-color: var(--btn-primary); border-bottom: 0.3rem solid var(--btn-primary-border-bottom); border-radius: 0; color: var(--btn-txt-dark); font-size: 1rem; font-weight: 600; text-shadow: none; font-style: normal; text-transform: uppercase; box-shadow: none; transition: all 0.3s ease-in-out !important; } .btn.active, .nice_active { color: var(--btn-txt-dark); background-color: var(--btn-secondary) !important; border-bottom: 0.3rem solid var(--btn-secondary-border-bottom) !important; transition: all 0.3s ease-in-out !important; } /* Button - Disabled */ .btn.disabled, .btn:disabled { color: var(--btn-txt-dark); background-color: var(--btn-secondary); border-bottom: var(--btn-secondary-border-bottom); transition: all 0.3s ease-in-out !important; } /* Button - Others */ button, .nice_button, input[type="reset"], input[type="button"], input[type="submit"] { background-color: var(--btn-primary); border-bottom: 0.3rem solid var(--btn-primary-border-bottom); border-radius: 0 !important; color: var(--btn-txt-dark); font-family: "Poppins", sans-serif; font-size: 1rem; font-weight: 600; text-shadow: none; font-style: normal; text-transform: uppercase; box-shadow: none; transition: all 0.3s ease-in-out !important; } /* ---------------- HOMEPAGE HERO BANNERS ---------------- */ /* Hero Section */ .hero { position: relative; /* height: 40vh; */ overflow: hidden; z-index: 0; } /* Hero - Video */ .hero .hero-video { position: absolute; top: 0; left: 0; width: 105%; height: 100%; object-fit: cover; background-color: var(--bg); opacity: 1; z-index: -2; /* transform: scaleX(-1); */ } /* Hero - Heading Vertical Spacing Adjustment */ body h2.tighten-up { margin-bottom: -0.3rem; } /* Hero - Video - Grid Overlay */ .video-overlay { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to right, hsla(0, 0%, 5%, 0.3) 1px, transparent 1px), linear-gradient(to bottom, hsla(0, 0%, 5%, 0.3) 1px, transparent 1px); background-size: 2px 2px; /* Increase the spacing between the dots */ opacity: 0.3; } /* ---------------- END OF HOMEPAGE HERO BANNERS ---------------- */ /* ---------------- BANNERS ---------------- */ /* Banner Border */ .banner { border-top: 0.1rem solid var(--border); border-bottom: 0.1rem solid var(--border); } /* Banner Grid Overlay Effect */ .banner::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: linear-gradient(to right, hsla(0, 0%, 5%, 0.3) 1px, transparent 1px), linear-gradient(to bottom, hsla(0, 0%, 5%, 0.3) 1px, transparent 1px); background-size: 2px 2px; /* Increase the spacing between the dots */ opacity: 0.5; } /* Positions the heading and description text above the overlays */ .section-heading, .section-description { position: relative; z-index: 10; } /* Responsive - General - For large screens */ .bg-responsive { background-position: right 30%; background-size: cover; background-repeat: no-repeat; /* background-size: 2600px; */ background-color: #101218; } /* Responsive - Socials - For large screens */ .bg-responsive-socials { background-position: left top; background-size: cover; background-repeat: no-repeat; margin-bottom: 0.1rem; } /* Headers - Reduce Opacity on Mobile */ @media (max-width: 765px) { .bg-responsive::before { content: ""; display: block; position: absolute; top: 0; bottom: 0; left: 0; right: 0; background: rgba(0, 0, 0, 1); opacity: 0.6; z-index: 1; } .bg-responsive > div { position: relative; z-index: 2; } } /* Responsive - More Sections - For large screens */ .more-section { background-position: right top; background-size: cover; background-repeat: no-repeat; } /* Responsive - General - For small screens */ @media (max-width: 765px) { .bg-responsive { background-position: right center; text-align: center; } } /* Responsive - Socials - For large screens */ @media (max-width: 765px) { .bg-responsive-socials { background-position: left center; text-align: center; } } .banner .section-heading, .banner .section-description { text-shadow: #080b0f 0px 1px 1px !important; } /* ---------------- END OF BANNERS ---------------- */ /* Dim Images - On Hover */ .dim-image { opacity: 1; transition: opacity 0.3s ease-in-out; } .dim-image:hover { opacity: 0.6; } /* ---------------- SOCIAL BANNERS ---------------- */ /* Discord Banner - Animated Background Color */ .discord-banner { border: solid var(--discord-border); border-width: 0.1rem 0; position: relative; overflow: hidden; } .discord-banner::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background: linear-gradient(to right, transparent, #404eed, transparent); animation: discordShine 4s linear infinite; opacity: 0.5; filter: blur(50px); } @keyframes discordShine { 0% { transform: translateX(-200%) rotate(-45deg); } 100% { transform: translateX(200%) rotate(-45deg); } } /* Discord Button */ .btn-discord { background-color: var(--btn-discord) !important; border-bottom: 0.3rem solid var(--btn-discord-border-bottom) !important; color: var(--btn-txt-light); overflow: hidden; } /* Discord Button Hover */ .btn-discord:hover { background-color: var(--btn-secondary); border-bottom-color: var(--btn-hover-border-bottom); color: var(--btn-txt-dark); } .btn-discord-footer { background-color: var(--btn-discord) !important; border-bottom: 0.3rem solid var(--btn-discord-border-bottom) !important; color: var(--btn-txt-light); overflow: hidden; border-radius: 0; } /* Discord Button Hover */ .btn-discord-footer:hover { background-color: var(--btn-secondary) !important; border-bottom-color: var(--btn-hover-border-bottom) !important; color: var(--btn-txt-dark); border-radius: 0; } /* Discord Text */ .text-discord { color: var(--txt-discord); font-weight: 600; } /* Discord Banner Paragraph */ .discord-banner p { margin: 0; } /* YouTube Section */ .youtube-section { border: solid var(--youtube-border); border-width: 0.1rem 0; } /* YouTube - Button */ .btn-youtube { background-color: var(--btn-youtube) !important; border-bottom: 0.3rem solid var(--youtube-border-bottom) !important; color: var(--btn-txt-light); transition: all 0.3s ease-in-out; } /* YouTube - Button Hover */ .btn-youtube:hover { background-color: var(--btn-secondary); border-bottom-color: var(--btn-hover-border-bottom); color: var(--btn-txt-dark); } /* YouTube - Text Color */ .text-youtube { color: var(--txt-youtube); } /* YouTube - Video Embed Responsive */ .embed-responsive { position: relative; width: 100%; overflow: hidden; padding: 0; } /* YouTube - Video Embed Responsive Item */ .embed-responsive-item { position: absolute; top: 0; right: 0; bottom: 0; left: 0; width: 100%; height: 100%; border: 0; } /* YouTube - Video Embed Responsive Pseudo-element */ .embed-responsive::before { content: ""; display: block; padding-top: 55%; } /* Twitch Section */ .twitch-section { border: solid var(--twitch-border); border-width: 0.1rem 0; } /* Twitch - Button */ .btn-twitch { background-color: var(--btn-twitch) !important; border-bottom: 0.3rem solid var(--btn-twitch-border-bottom) !important; color: var(--btn-txt-light); } /* Twitch - Button Hover */ .btn-twitch:hover { background-color: var(--btn-secondary); border-bottom: 0.3rem solid var(--btn-hover-border-bottom); color: var(--btn-txt-dark); } /* Twitch - Text Color */ .text-twitch { color: var(--txt-twitch); } /* Kick Section */ .kick-section { border: solid var(--kick-border); border-width: 0.1rem 0; } /* Kick - Button */ .btn-kick { background-color: var(--btn-kick) !important; border-bottom: 0.3rem solid var(--btn-kick-border-bottom) !important; color: var(--btn-txt-dark); } /* Kick - Button Hover */ .btn-kick:hover { background-color: var(--btn-secondary); border-bottom: 0.3rem solid var(--btn-secondary-border); color: var(--btn-txt-dark); } /* Kick - Text Color */ .text-kick { color: var(--txt-kick); } /* ---------------- END - SOCIAL BANNERS ---------------- */ /* Server Features Section */ #card-features .cards { background-color: var(--bg-darker); border: 0.1rem solid var(--border); font-size: 1rem; } /* Card Images - Hide Overflow */ #card-features .cards .image-box { overflow: hidden; } /* Card Images - Set Size */ #card-features .cards .image-box img { height: 100%; width: 100%; transition: transform 0.3s; transform: scale(1.01); } /* Card Images - Hover Effect */ #card-features .cards:hover .image-box img { opacity: 0.5; transform: scale(1.1); transition: all 0.3s ease-in-out; } /* Card Image Zoom Properties and Hover State */ .card .card-img-zoom { overflow: hidden; opacity: 1; border-bottom: 0.1rem solid var(--border); transition: all 0.3s; } .card .card-img-zoom img { transition: transform 0.3s; transform: scale(1.01); } .card:hover .card-img-zoom img { opacity: 0.7; transform: scale(1.1); } .card-header { color: 000; background-color: var(--bg-primary); border-bottom: 1px solid var(--border-light); font-weight: 600; text-transform: uppercase; } .card:not(.card-disabled).card-hover:hover { filter: saturate(0) brightness(1.2); transition: filter 0.3s; border: 0.1rem solid var(--border-primary); } .card-img, .card-img-top { border-radius: 0; border: 0.1rem solid var(--border); border-bottom: 0; } #vote-cards, #donate-cards { border: 0.1rem solid var(--border-light); } .card-header:first-child { border-radius: 0; } /* Server Team Members - Card Background Images */ .small-screen-bg { display: none; } @media (max-width: 768px) { .card { position: relative; } .small-screen-bg { display: block; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background-repeat: no-repeat; background-position: 50% 30%; background-size: cover; opacity: 0.1; filter: saturate(0.5); } .card::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; } } /* Server Team Members - Profile Link - Hover State */ .profile-link:hover h6 { color: var(--txt-secondary) !important; } /* Testimonial Section */ .quote_ { opacity: 0.1 !important; } /* Testimonial Section - Avatar Images */ .testimonial-avatar { border: 0.1rem solid var(--border); transition: opacity 0.3s ease-in-out; } .testimonial-avatar:hover { border: 0.1rem solid var(--border); opacity: 0.7; transition: opacity 0.3s ease-in-out; } /* Class & Rank Text Colors */ .text-designer { color: var(--txt-designer); } .text-developer { color: var(--txt-developer); } .text-gm { color: var(--txt-gm); } .text-senior-gm { color: var(--txt-senior-gm); } .text-support { color: var(--txt-support); } .text-deathknight { color: var(--txt-deathknight); } .text-druid { color: var(--txt-druid); } .text-hunter { color: var(--txt-hunter); } .text-mage { color: var(--txt-mage); } .text-paladin { color: var(--txt-paladin); } .text-priest { color: var(--txt-priest); } .text-rogue { color: var(--txt-rogue); } .text-shaman { color: var(--txt-shaman); } .text-warlock { color: var(--txt-warlock); } .text-warrior { color: var(--txt-warrior); } /* WoW Item Qualities */ .item-poor { color: var(--txt-item-poor); } .item-common { color: var(--txt-item-common); } .item-uncommon { color: var(--txt-item-uncommon); } .item-rare { color: var(--txt-item-rare); } .item-epic { color: var(--txt-item-epic); } .item-legendary { color: var(--txt-item-legendary); } .item-artifact { color: var(--txt-item-artifact); } .item-heirloom { color: var(--txt-item-heirloom); } /* Store - Cart */ #cart_item_count { color: var(--txt-secondary); } /* Store - Price Color DP & VP */ #cart_price #dp_price_full span, #cart_price #vp_price_full span { color: var(--txt-primary); } /* Store - Override VP price color */ #cart_price #vp_price_full span { color: var(--txt-secondary); } /* Store - Checkout Info */ #checkout_info { padding-bottom: 1rem; } /* Store - Margin */ #checkout_info .mb-3 { margin-top: 20px; } /* Store - Checkout Info Font */ #checkout_info b { color: var(--txt-primary); font-weight: 500; } /* Store - Hide Images Checkout */ #checkout_info img { display: none; } /* Store - Padding Paragraphs Checkout Info */ #checkout_info p { padding-bottom: 5rem; } /* Store - Item Quality Font */ #item_quality { font-family: "Poppins", sans-serif; font-size: 1rem; font-style: normal; font-weight: 500; text-transform: uppercase; } /* Store - Background Color Card Body */ #item_space .card-body { background-color: var(--bg); } /* Store - Filter - Button Focus & Active States */ .btn-check:checked + .btn, .btn.show, .btn:first-child:active, :not(.btn-check) + { color: var(--txt-dark); background-color: var(--btn-secondary); border-color: var(--btn-secondary-border); } /* Store - Filter - Button Active State When Filter Is Enabled */ .nice_active { color: var(--txt-dark); background-color: var(--btn-secondary); border-color: var(--btn-secondary-border); } /* Store - Filter - Box and Dropdown Menu - Remove Browser Styes */ select.filter-menu { background-color: var(--bg-dark); color: var(--txt-muted); text-transform: uppercase; border: 1px solid var(--border); padding: 0.375rem 0.75rem; appearance: none; -webkit-appearance: none; -moz-appearance: none; } /* Store - Filter - Dropdown Menu - Items */ select.filter-menu option { background-color: var(--bg-dark); color: var(--txt-secondary); text-transform: uppercase; border: 1px solid var(--border); padding: 0.375rem 0.75rem; } /* Store - Filter - Search Box */ input.filter-menu { background-color: var(--bg-dark); font-family: "Poppins", sans-serif; font-weight: 600; color: var(--txt-primary); text-transform: uppercase; border: 1px solid var(--border); padding: 0.375rem 0.75rem; } /* Store - Filter - Search Box */ input.filter-menu:active, input.filter-menu:focus { background-color: transparent; box-shadow: none; } /* Store - Filter - Search Box - Remove Browser Styles */ input.filter-menu:-webkit-autofill, input.filter-menu:-webkit-autofill:hover, input.filter-menu:-webkit-autofill:focus, input.filter-menu:-webkit-autofill:active { -webkit-box-shadow: none !important; } /* Store - Filter - Search Placeholder Text */ #filter_name::placeholder { color: var(--txt-placeholder); opacity: 1; /* Firefox */ text-transform: uppercase; font-size: 1rem; } .store-groups { padding: 0.55rem; } body .store_item { margin: 0.3rem; padding: 1rem; border: 0.1rem solid var(--border-light) !important; border-radius: 0rem; } /* Tables */ .table { --bs-table-bg: var(--bg-darker); --bs-table-striped-color: var(--txt-secondary); --bs-table-striped-bg: var(--bg-dark); --bs-table-active-color: var(--txt-secondary); --bs-table-active-bg: var(--bg-dark); --bs-table-hover-color: var(--txt-primary); --bs-table-hover-bg: var(--bg); --bs-table-color: var(--txt-secondary); cursor: pointer; } /* Table Header */ .table thead th { background-color: var(--bg-light); color: var(--txt-dark); text-transform: uppercase; font-family: "Poppins", sans-serif; font-weight: 500; font-size: 1rem; } .table thead th:hover { background-color: var(--bg-primary); color: var(--txt-dark); } /* Table - Items - Vertically Align Center */ .table td, .table th { vertical-align: middle; } #dungeons, #raids, #mythics, #search_results_items { border-color: var(--border); border-style: solid; border-width: 0.1rem; } #dungeons td, #dungeons th, #raids td, #raids th, #mythics td, #mythics th, #search_results_items td, #search_results_items th { /* text-align: start; */ vertical-align: middle; } /* Table - Armor - Character - Border Color */ .armory-table th, .armory-table td, .armory-table tbody, thead, tbody, tfoot, tr, td, th, table.dataTable thead th, table.dataTable thead td { border: 0.1rem solid var(--border) !important; } table.dataTable thead th, table.dataTable thead td { padding: 10px 18px; border: 0.1rem solid var(--border); } table.dataTable thead .sorting_asc, table.dataTable thead .sorting_desc, table.dataTable thead .sorting { background-image: none !important; } table.dataTable thead .sorting_asc::before { content: "\f0de"; /* fa-sort-asc */ font-family: "Font Awesome 6 Free"; font-weight: 900; float: right; } table.dataTable thead .sorting_desc::before { content: "\f0dd"; /* fa-sort-desc */ font-family: "Font Awesome 6 Free"; font-weight: 900; float: right; } table.dataTable thead .sorting::before { content: "\f0dc"; /* fa-sort */ font-family: "Font Awesome 6 Free"; font-weight: 900; float: right; } .dataTables_wrapper { position: relative; padding-bottom: 5%; } body .dataTables_wrapper .dataTables_length, .dataTables_wrapper .dataTables_filter, .dataTables_wrapper .dataTables_info, .dataTables_wrapper .dataTables_processing, .dataTables_wrapper .dataTables_paginate { color: var(--txt-secondary) !important; } body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active { color: var(--txt-dark) !important; } /* Datatables - Processing */ .dataTables_wrapper .dataTables_processing { top: 60% !important; padding: none !important; font-size: 0.8em !important; background-color: transparent !important; background: none !important; text-transform: uppercase !important; } #changelogTable td { font-family: monospace; font-weight: 100; font-size: 0.9rem; text-transform: capitalize; } #changelogTable th { font-weight: 600; font-size: 0.9rem; } #changelogTable tbody tr:hover td, #changelogTable tbody tr:hover th { color: var(--txt-primary) !important; } /* Table - Sorting & Searching */ body .dataTables_wrapper .dataTables_paginate .paginate_button { background-color: var(--bg-light) !important; border: 0.1rem solid var(--border) !important; border-radius: 0.25rem; } body .dataTables_wrapper .dataTables_paginate .paginate_button.current, .dataTables_wrapper .dataTables_paginate .paginate_button.current:hover { color: var(--txt-muted) !important; border: 0.1rem solid var(--border); background-color: var(--bg-dark); background: none !important; background: none !important; background: none !important; background: none !important; background: none !important; background: none !important; } body .dataTables_wrapper .dataTables_paginate .paginate_button:hover { color: var(--txt-dark) !important; border: 0.1rem solid var(--border); background-color: var(--bg-darker); background: var(--bg-primary) !important; } body .dataTables_wrapper .dataTables_paginate .paginate_button.disabled, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:hover, .dataTables_wrapper .dataTables_paginate .paginate_button.disabled:active { cursor: default; color: var(--txt-dark) !important; border: 1px solid var(--border); background: transparent; box-shadow: none; } .dataTables_wrapper .dataTables_filter input, .dataTables_wrapper .dataTables_length select { border: 1px solid var(--border-light) !important; border-radius: 0 !important; padding: 0.3rem !important; background-color: transparent; color: var(--txt-secondary) !important; } table.dataTable.no-footer { margin-bottom: 1rem !important; } .dataTables_filter label { margin-bottom: 1rem !important; } label { color: var(--txt-muted) !important; font-family: "Poppins", sans-serif !important; font-size: 0.8rem !important; text-shadow: none !important; text-transform: uppercase; display: flex; align-items: center; /* Add this line */ gap: 1rem !important; } /* Table Borders */ .table-bordered { border: 0.1rem solid var(--border); } /* Accordion button properties */ .accordion .accordion-item .accordion-header .accordion-button { color: var(--txt-dark); font-style: normal; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; font-family: "Poppins", sans-serif; font-weight: 600; font-size: 1rem; text-shadow: none; border-radius: 0; padding: 0.8rem; -moz-border-radius: 0; -webkit-border-radius: 0; } /* Accordion chevron arrow dark */ /* Accordion body properties */ .accordion .accordion-item .accordion-body { background-color: var(--bg-dark); border: 0.1rem solid var(--border-light); font-weight: 500; text-transform: capitalize; color: var(--txt-secondary); text-shadow: none; } /* Accordion button after properties */ /* Card properties in timeline cards */ #timeline-cards .card { background-color: #080b0f; box-shadow: 0 3px 4px rgba(0, 0, 0, 0.4); margin-top: 50px; } /* Image zoom properties in card */ #timeline-cards .card .card-img-zoom { overflow: hidden; } /* Image properties in image zoom */ #timeline-cards .card .card-img-zoom img { height: 100%; width: 100%; } /* Card hover properties in timeline cards */ #timeline-cards .card:hover { box-shadow: 0 15px 26px rgba(0, 0, 0, 0.5); } /* Image properties in image zoom on card hover */ #timeline-cards .card:hover .card-img-zoom img { opacity: 0.7; transform: scale(1.15); } .card-bg { background-color: var(--bg-darker); } /* TalentCalc tooltip — disable text-wrap: balance to prevent premature line breaks */ #tc-tip, #tc-tip * { text-wrap: wrap; } /* Common Tooltip Styles */ .tooltip, .tooltip-inner, #fusion_tooltip, .fusion_tooltip { border-radius: 0.25rem; box-shadow: none; text-transform: capitalize; } /* Bootstrap Tooltip */ .tooltip { background-color: var(--bg-darker); border: 0.1rem solid var(--border-dark); color: var(--txt-secondary) !important; font-size: 0.95rem; } .tooltip-inner { /* padding: 0.5rem; */ color: var(--txt-secondary); background-color: var(--bg-darker); } /* FusionGEN Tooltip */ #fusion_tooltip, .fusion_tooltip { background-color: var(--bg-dark); border: 0.1rem solid var(--border-light); color: var(--txt-secondary); padding: 1rem; font-size: 0.8rem; } /* Tooltip - Hide Arrow */ .bs-tooltip-start .tooltip-arrow::before, .bs-tooltip-auto[data-popper-placement^=left] .tooltip-arrow::before { display: none !important; } /* Affix-icon padding */ .affix-icon { padding: 0.2rem; } /* Avatar link setup */ .avatar-link { display: inline-block; position: relative; cursor: pointer; } /* Avatar image and text transitions */ .avatar-img, .avatar-text { transition: opacity 0.3s ease-in-out; } /* Avatar image opacity on hover */ .avatar-link:hover .avatar-img { opacity: 0.3; } /* Avatar text visibility on hover */ .avatar-link:hover .avatar-text { opacity: 1; } /* Avatar text positioning and color */ .avatar-text { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); opacity: 0; color: var(--txt-primary); } .avatar { float: left; margin-right: 10px; margin-left: 0; margin-top: 3px; } /* Avatar box shadow and border */ body .my_avatar { box-shadow: none; border: 0.1rem solid var(--border-light); -moz-box-shadow: none; -webkit-box-shadow: none; } /* Avatar image desaturation on hover */ body .my_avatar:hover img { filter: saturate(0); } /* Avatar box shadow and border on hover */ body .my_avatar:hover { box-shadow: none; border: 0.1rem solid var(--border-primary); } /* Current avatar border */ body .avatar_current { border: 0.1rem solid var(--border-primary); } /* Badge border radius and font size */ .badge { border-radius: 0; font-size: 0.75em; } /* Character - Fit Image */ .character-avatar { object-fit: cover; } /* Alliance background image */ body .bg-faction.alliance { background-image: url(/application/images/misc/bg_alliance_complete.png); } /* Dark border color */ .border-dark { border-color: var(--border-dark); } /* Default card setup */ .card { background-color: var(--bg-darker); border: 0.1rem solid var(--border); border-radius: 0rem; box-shadow: none; } /* Card title color */ .card-title { color: var(--txt-primary); } /* Card footer border */ .card-footer { border-top: 0.1rem solid var(--border); } /* Footer - Discord Widget Header */ .discord-header { background-color: var(--btn-discord); } /* Disabled card appearance */ .card-disabled { opacity: 50%; filter: saturate(0); } /* Character select block text */ .character-select .d-block { color: var(--txt-secondary); font-weight: 500; text-transform: uppercase; } /* Character select image setup */ .character-select img { background-color: transparent; border: 0.1rem solid #323649; border-radius: 0 !important; } /* Copper points text setup */ .copper-points, .copper-points:before { color: #ffb45e; font-weight: 500; text-transform: uppercase; } /* Copper points icon */ .copper-points:before { content: "\f51e"; font-family: "FontAwesome"; } /* Hide icon within copper points */ .copper-points i { display: none; } /* dp_price_value customization */ .dp_price_value { color: #141a21 !important; font-family: "Poppins", sans-serif; font-weight: 600; text-shadow: none; } /* Error feedback customization */ .error-feedback { background-color: #13141a; border: 0.1rem solid #323649; border-radius: 0; color: #df2929 !important; text-transform: uppercase; } /* Icon color settings */ .fa-arrow-alt-circle-left:before, .fa-circle-left:before, .fa-arrow-alt-circle-right:before, .fa-circle-right:before, .fa-shopping-cart { color: #fff; } /* Specific icon color override */ .fa-circle-arrow-right:before { color: var(--txt-secondary) !important; content: "\e1d9" !important; } /* Font weight for all children of fa-ul */ .fa-ul > * { font-weight: 400 !important; } /* Positioning for fixed-arrow */ .fixed-arrow { bottom: 20px; position: fixed; right: 20px; z-index: 999; } /* Page link color and background settings */ .page-item .page-link, .page-item.disabled .page-link, #search_results_items_next { color: var(--txt-secondary); background-color: var(--primary-color); border-radius: 0.25rem; } /* Border radius for last page-item */ .page-item:last-child .page-link { border-top-right-radius: 0; border-bottom-right-radius: 0; } /* Background color for active page-item and on hover */ .page-item.active .page-link, .pagination li a:hover { background-color: var(--txt-secondary); } /* Margin for pagination button */ ul.pagination li.paginate_button { margin-right: 0.2rem; } /* Box shadow for select on focus and active, and page-link on focus */ select:focus, select:active, .page-link:focus { box-shadow: none !important; } /* Customization for item, item a, and item img */ .item, .item a, .item img { border-radius: 0 !important; } /* Customization for item a */ .item a { background-image: none !important; } /* Customization for item img */ .item img { border: #181b25 0.1rem solid; border-radius: 4px !important; } /* Customization for item_price img */ .item_price img { display: none; } /* Customization for list-group, list-group-item, list-group-item active, list-group-item + .list-group-item */ .list-group, .list-group-item, .list-group-item.active, .list-group-item + .list-group-item { border-radius: 0; background-color: var(--bg-darker); border-color: var(--border); font-family: "Poppins", sans-serif; color: var(--txt-secondary); box-shadow: none; text-transform: uppercase; } /* Customization for list-group-item:focus, list-group-item.active */ .list-group-item:focus, .list-group-item.active { background-color: var(--bg-primary); color: var(--txt-dark); cursor: pointer; } /* Customization for list-group-item:hover */ .list-group-item:hover { background-color: var(--bg-secondary); color: var(--txt-dark); cursor: pointer; } /* Customization for location-select .d-block */ .location-select .d-block { color: var(--primary-color) !important; font-weight: 500; text-transform: uppercase; } /* Customization for nice_active::after, nice_active::before, nice_button img */ .nice_active::after, .nice_active::before, .nice_button img { display: none; } /* Customization for page-subbody */ .page-subbody { background: none; margin: 0rem; padding: 0rem; } /* Customization for page_form label */ .page_form label { color: var(--txt-muted); font-family: "Poppins", sans-serif; font-size: 1rem !important; font-weight: 500; } /* Customization for pagebody */ .pagebody { background: none; box-shadow: none; color: var(--txt-muted); padding: 1rem; } /* Customization for realm_bar and poll_bar */ .realm_bar, .poll_bar { border-radius: 0; margin: 0; } /* Hide span inside realm_bar_fill */ .realm_bar_fill span { visibility: hidden; } /* Customization for realm_bar_fill.alliance and realm_bar_fill.horde */ .realm_bar_fill.alliance, .realm_bar_fill.horde { border: 2px solid #141a21; border-radius: 0; padding: 0.4rem; } /* Background color for realm_bar_fill.alliance */ .realm_bar_fill.alliance { background-color: #0070dd; } /* Background color for realm_bar_fill.horde */ .realm_bar_fill.horde { background-color: #c41e3b; } /* Customization for profile-avatar */ .section-topbar .membership-bar .membership-bar-profile .profile-avatar { border: 0.1rem solid var(--border-primary); box-shadow: none; } /* Border color change on hover and active for profile-avatar */ .section-topbar .membership-bar .membership-bar-profile:hover, .section-topbar .membership-bar .membership-bar-profile:active { border-color: var(--border-secondary); } /* Customization for sidebox */ .sidebox { background-color: var(--bg-darker); background-image: none; border: 0.1rem solid var(--border); border-radius: 0; box-shadow: none; } /* Padding for card-body inside sidebox */ .sidebox .card-body { padding: 0; } /* Customization for sidebox-body */ .sidebox .sidebox-body { color: var(--txt-secondary); height: auto; padding: 0.5rem; text-transform: uppercase; width: 100%; font-family: "Poppins", sans-serif; font-weight: 500; font-size: 1rem; } /* Customization for silver-points and its pseudo-element */ .silver-points, .silver-points:before { color: #d4d4d4; font-weight: 500; text-transform: uppercase; } /* Content for silver-points:before */ .silver-points:before { content: "\f51e"; font-family: "FontAwesome"; } /* Hide i inside silver-points */ .silver-points i { display: none; } /* Customization for sort */ .sort { display: none; font-family: "Poppins", sans-serif; font-size: 1rem; font-weight: 500; text-transform: uppercase; } /* Customization for popup messages */ .swal2-container.swal2-center > .swal2-popup { color: var(--txt-secondary); text-transform: uppercase; border: 0.1rem solid var(--border-light); border-radius: 0; box-shadow: none; -moz-box-shadow: none; -webkit-box-shadow: none; background-color: var(--bg-dark); background-image: none; } .swal2-title { color: var(--txt-primary); font-size: 2em; font-weight: 600; text-align: center; text-transform: uppercase; word-wrap: break-word; } /* Customization for confirm button in popup messages */ .swal2-styled.swal2-confirm { background-color: var(--btn-primary) !important; border-bottom: 0.3rem solid var(--btn-primary-border-bottom) !important; color: var(--btn-txt-dark); font-size: 1rem; font-weight: 600; text-shadow: none; font-style: normal; text-transform: uppercase; box-shadow: none !important; } /* Customization for cancel button in popup messages */ .swal2-deny { background-color: var(--btn-cancel) !important; border-bottom: 0.3rem solid var(--btn-cancel-border-bottom) !important; color: var(--btn-txt-dark); font-size: 1rem; font-weight: 600; text-shadow: none; font-style: normal; text-transform: uppercase; box-shadow: none !important; transition: all 3s ease; } /* Customization for user-avatar */ .user-avatar { display: inline-block; height: 150px; position: relative; width: 150px; } /* Customization for avatar-change-text inside user-avatar */ .user-avatar .avatar-change-text { background-color: rgba(19, 21, 30, 0.8); border-radius: 0 !important; color: var(--primary-color) !important; display: none; height: calc(100% + 2px); left: -0.1rem; position: absolute; text-transform: uppercase !important; top: -0.1rem; width: calc(100% + 2px); } /* Customization for img inside user-avatar */ .user-avatar img { border: 0.1rem solid var(--primary-color); height: 150px; width: 100%; } /* Customization for avatar-change-text inside user-avatar on hover */ .user-avatar:hover .avatar-change-text { display: flex; } /* Customization for vp_price_value */ .vp_price_value { color: var(--txt-dark) !important; font-family: "Poppins", sans-serif; text-shadow: none; } /* Customization for invalid form controls on focus */ .was-validated .form-control:invalid:focus, .form-control.is-invalid:focus { border-color: var(--border); box-shadow: none; } .form-check-input:checked { background-color: var(--bg-light); border-color: var(--border); } .form-check-input:focus { border-color: var(--border); box-shadow: none; } /* Customization for hr */ hr { border-top: 0.1rem solid var(--border-light); color: var(--border-light); height: 0.1rem; } /* Customization for img.item_icon */ body .store_item img.item_icon { border: 0.1rem solid var(--border-light); margin-right: 0.1rem; } /* Customization for select and its options */ select, select option, select optgroup { font-family: "Poppins", sans-serif; font-size: 1rem; font-style: normal; font-weight: 500; text-transform: uppercase; background-color: var(--bg-dark); color: var(--txt-muted); } /* Additional customization for select */ select { background-position: 90% 50%; background-repeat: no-repeat; background-size: 1rem; } /* Customization for list items */ ul.list-unstyled li:not(:last-child) { border-bottom: 0.1rem solid var(--border-bottom); padding: 1rem; } /* Additional customization for list items with no-custom-style class */ ul.list-unstyled li:not(:last-child).no-custom-style { border-bottom: none; padding: 0; } /* Customization for form controls */ select, textarea, input[type="tel"], input[type="url"], input[type="date"], input[type="file"], input[type="text"], input[type="time"], input[type="week"], input[type="email"], input[type="month"], input[type="number"], input[type="search"], input[type="password"], input[type="datetime-local"] { color: var(--txt-dark); font-size: 0.9rem; font-family: var(--font-family); font-weight: 500; border-radius: 0; background-color: var(--bg-light); border-color: var(--border-light); text-shadow: none; } /* Customization for form-select */ .form-select { cursor: pointer; padding: 0.8rem; font-size: 0.9rem; background-color: var(--bg-light); border: transparent; text-shadow: none; font-family: "Poppins", sans-serif; font-weight: 500; border-radius: 0; } /* Form - Search Box - Focus */ textarea:focus, input[type="tel"]:focus, input[type="url"]:focus, input[type="date"]:focus, input[type="file"]:focus, input[type="text"]:focus, input[type="text"]:active, input[type="time"]:focus, input[type="week"]:focus, input[type="email"]:focus, input[type="month"]:focus, input[type="number"]:focus, input[type="search"]:focus, input[type="password"]:focus, input[type="datetime-local"]:focus { color: var(--txt-dark); background-color: var(--bg-light); box-shadow: none; } /* Customization for form controls on focus */ select:focus, textarea:focus, input:focus { border: transparent; box-shadow: none !important; } /* Customization for input-group */ .input-group { gap: 1rem; display: flex; flex-direction: row; border: transparent; } /* Font size for countdown label */ .countdown-label { font-size: 1rem; } .footer-logo { width: 100%; max-width: 80%; margin: auto; } @media (max-width: 768px) { .footer-logo { max-width: 100%; } } /* Footer - Logo - Hover */ .footer-logo { transition: filter 0.3s; } .footer-logo:hover { filter: saturate(0) brightness(1.2); } /* Textures */ .texture::before { content: ""; position: absolute; top: 0; left: 0; width: 100%; height: 100%; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' xmlns:xlink='http://www.w3.org/1999/xlink' xmlns:svgjs='http://svgjs.dev/svgjs' viewBox='0 0 700 700' width='700' height='700' opacity='0.2'%3E%3Cdefs%3E%3Cfilter id='nnnoise-filter' x='-20%25' y='-20%25' width='140%25' height='140%25' filterUnits='objectBoundingBox' primitiveUnits='userSpaceOnUse' color-interpolation-filters='linearRGB'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='4' seed='3' stitchTiles='stitch' x='0%25' y='0%25' width='100%25' height='100%25' result='turbulence'%3E%3C/feTurbulence%3E%3CfeSpecularLighting surfaceScale='18' specularConstant='0.2' specularExponent='20' lighting-color='%23eaeaea' x='0%25' y='0%25' width='100%25' height='100%25' in='turbulence' result='specularLighting'%3E%3CfeDistantLight azimuth='3' elevation='95'%3E%3C/feDistantLight%3E%3C/feSpecularLighting%3E%3C/filter%3E%3C/defs%3E%3Crect width='700' height='700' fill='%230e1016'%3E%3C/rect%3E%3Crect width='700' height='700' fill='%23eaeaea' filter='url(%23nnnoise-filter)'%3E%3C/rect%3E%3C/svg%3E"); background-size: 350px 350px; background-repeat: repeat; z-index: -1; opacity: 1; } /* Button - Return To Top Button */ #return-to-top { opacity: 0; transition: opacity 0.3s ease-in-out; } #return-to-top.show { opacity: 1; } /* Notice Bar */ .notice-bar { overflow: hidden; border-bottom: 0.1rem solid var(--border-light); } /* Notice Bar - Animation */ .notice-bar::before, .notice-bar::after { content: ""; position: absolute; top: 49%; left: -100%; width: 100%; height: 100%; background: linear-gradient(to right, transparent, #ff0019, transparent); animation: backgroundShine 3s linear infinite; opacity: 1; } .notice-bar::before { transform: scaleY(3%); } .notice-bar::after { filter: blur(6px); opacity: 0.1; } @keyframes backgroundShine { 0% { left: -100%; } 100% { left: 100%; } } /* News Article Image */ .img-height { height: 25vh; object-fit: cover; } .img-height-news { height: 15vh; object-fit: cover; } /* Player & Guild of the month Image */ .img-height-month { height: 25vh; object-fit: cover; } /* Maintenance Page */ .maintenance-margin { margin-top: 10rem; } .maintenance-logo { width: 400px; margin: auto; } /* ============================================================ INFERNO FIRE THEME ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@500;600&display=swap'); /* Override global blue CSS variables */ :root { --background-base: #0e0906; --background-light: #2a1208; --background-shade: #1a0c06; --background-shadow: #120804; --color-active: #c8922a; --color-inactive: #6a4020; } /* Override section-page local blue variables */ .section-page { --borderColor: #3a1e0a; --backgroundColor: #150c05; --backgroundActive: #1e1008; } /* Override subpage gradient to fire tones */ .is-subpage .section-page { background: linear-gradient(to bottom, transparent 0%, rgba(14, 7, 3, 0.9) 100%) !important; } /* Page title (sous-pages) : style identique au feature-page */ .section-page .page-head.-type-page { font-family: 'Cinzel', serif !important; font-size: 1.6rem !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; text-align: center !important; color: #d4962a !important; padding: 0.9rem 2.5rem 1.3rem !important; margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; display: block !important; border: 1px solid #6a3a10 !important; border-radius: 4px !important; background: linear-gradient(180deg, #1e0e04 0%, #120804 100%) !important; box-shadow: 0 0 20px rgba(160, 90, 10, 0.35), inset 0 0 30px rgba(0, 0, 0, 0.4) !important; text-shadow: 0 0 14px rgba(210, 130, 20, 0.65), 0 0 30px rgba(160, 90, 0, 0.35) !important; animation: title-flicker 3s ease-in-out infinite !important; } .section-page .page-head.-type-page::after { content: '' !important; display: block !important; margin: 0.5rem auto 0 !important; width: 70% !important; height: 1px !important; background: linear-gradient(90deg, transparent 0%, #a06020 30%, #d4962a 50%, #a06020 70%, transparent 100%) !important; } /* classchanges : white-space normal pour éviter le text-ellipsis */ body.module-classchanges .page-head.-type-page { white-space: normal !important; box-sizing: border-box !important; } /* Footer: transparent pour laisser passer le gradient du body */ .footer { background-color: transparent !important; } /* Nav links: police Cinzel + couleur dorée */ .header .navbar .navbar-nav .nav-item .nav-link { font-family: 'Cinzel', serif !important; font-size: 1.01rem !important; font-weight: 600 !important; letter-spacing: 0.07em !important; color: #dcc070 !important; text-shadow: 0 0 8px rgba(190, 150, 20, 0.35); transition: color 200ms ease, text-shadow 200ms ease !important; } .header .navbar .navbar-nav .nav-item:hover .nav-link, .header .navbar .navbar-nav .nav-item .nav-link:hover, .header .navbar .navbar-nav .nav-item .nav-link:active, .header .navbar .navbar-nav .nav-item .nav-link.show, .header .navbar .navbar-nav .nav-item .nav-link.active { color: #f5e090 !important; text-shadow: 0 0 14px rgba(240, 200, 50, 0.6) !important; } /* Dropdown menu: fire theme */ .header .navbar .navbar-nav .dropdown-menu { background-color: #1a0e07 !important; border: 1px solid #3a1e0a !important; border-radius: 4px !important; box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6), 0 0 10px rgba(160, 80, 5, 0.15) !important; } .header .navbar .navbar-nav .dropdown-menu .dropdown-item { font-family: 'Cinzel', serif !important; font-size: 0.82rem !important; font-weight: 500 !important; letter-spacing: 0.06em !important; color: #c8a04a !important; text-transform: uppercase !important; padding: 0.6rem 1.2rem !important; border-bottom: 1px solid #2a1208 !important; transition: color 150ms ease, background-color 150ms ease !important; } .header .navbar .navbar-nav .dropdown-menu .dropdown-item:last-child { border-bottom: none !important; } .header .navbar .navbar-nav .dropdown-menu .dropdown-item:hover, .header .navbar .navbar-nav .dropdown-menu .dropdown-item:focus, .header .navbar .navbar-nav .dropdown-menu .dropdown-item.active { background-color: #2a1208 !important; color: #f5d878 !important; } /* Slider: title fire gold + animation */ .section-wall .wall-slider .slider-item .item-title { color: #d4962a; text-shadow: 0 0 14px rgba(210,130,20,0.65), 0 0 30px rgba(160,90,0,0.35); animation: title-flicker 3s ease-in-out infinite; } @supports (-webkit-background-clip: text) { .section-wall .wall-slider .slider-item .item-title { background: linear-gradient(to bottom, #f0c060 0%, #c07820 100%); -webkit-background-clip: text; -webkit-text-fill-color: transparent; } } /* Slider: underline trait doré sous le titre */ .section-wall .wall-slider .slider-item .item-title::after { content: ''; display: block; margin: 0.4rem auto 0; width: 60%; height: 1px; background: linear-gradient(90deg, transparent 0%, #a06020 30%, #d4962a 50%, #a06020 70%, transparent 100%); } /* Slider: owl dots fire */ .section-wall .wall-slider .owl-dots .owl-dot { background-color: #2a1008; box-shadow: 0 0 0 2px #6a3010, 0 0 6px rgba(100,40,0,0.4); } .section-wall .wall-slider .owl-dots .owl-dot::before { background-color: #8a4010; } .section-wall .wall-slider .owl-dots .owl-dot::after { -webkit-box-shadow: 0 0 5px 5px #c86020; box-shadow: 0 0 5px 5px #c86020; } .section-wall .wall-slider .owl-dots .owl-dot.active { -webkit-box-shadow: 0 0 10px 0 rgba(200, 120, 30, 0.6); box-shadow: 0 0 10px 0 rgba(200, 120, 30, 0.6); } body { background-color: #0e0906 !important; background-image: radial-gradient(ellipse 80% 500px at 50% 0px, #3d1a06 0%, #1a0a03 50%, transparent 100%), linear-gradient(180deg, #1a0e07 0%, #0e0906 100%) !important; background-repeat: no-repeat, repeat-y !important; background-size: 100% auto, 100% auto !important; background-position: top center, top center !important; background-attachment: scroll, scroll !important; } /* Lignes bleues : suppression border header et shadow wall */ .header [gradient][gradient-2] { border-bottom: 1px solid #3a1e0a !important; } .section-wall::before { box-shadow: none !important; } .section-wall { padding-top: 14rem !important; padding-bottom: 3rem !important; } /* Flame divs au-dessus des sections (section-page = z-index 97) */ #inferno-flame-top, #inferno-flame-bottom, #inferno-flame-mid { z-index: 9000; } body::before { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: radial-gradient(ellipse 60% 300px at 50% 0px, rgba(200, 80, 10, 0.06) 0%, transparent 100%); animation: inferno-flicker 5s ease-in-out infinite; z-index: 9001; } body::after { content: ''; position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; background: radial-gradient(ellipse 100% 100% at 50% 50%, transparent 50%, rgba(0,0,0,0.3) 100%); z-index: 9001; } @keyframes inferno-flicker { 0% { opacity: 0.7; } 20% { opacity: 1; } 45% { opacity: 0.8; } 60% { opacity: 1; } 80% { opacity: 0.75; } 100% { opacity: 0.7; } } @keyframes inferno-flicker-mid { 0% { opacity: 0.85; } 30% { opacity: 1; } 55% { opacity: 0.78; } 75% { opacity: 1; } 100% { opacity: 0.85; } } @keyframes title-flicker { 0% { text-shadow: 0 0 12px rgba(210,130,20,0.60), 0 0 28px rgba(160,80,0,0.30); } 20% { text-shadow: 0 0 22px rgba(235,150,20,0.85), 0 0 44px rgba(190,95,0,0.45); } 35% { text-shadow: 0 0 9px rgba(200,120,15,0.50), 0 0 20px rgba(140,70,0,0.25); } 65% { text-shadow: 0 0 20px rgba(230,145,20,0.80), 0 0 40px rgba(185,90,0,0.40); } 80% { text-shadow: 0 0 10px rgba(205,125,18,0.52), 0 0 22px rgba(150,75,0,0.26); } 100% { text-shadow: 0 0 12px rgba(210,130,20,0.60), 0 0 28px rgba(160,80,0,0.30); } } #inferno-embers { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9999; } #inferno-flame-top, #inferno-flame-bottom, #inferno-flame-mid { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 9000; } #inferno-flame-mid { animation: inferno-flicker-mid 3.5s ease-in-out infinite; } /* ============================================================ INFERNO — BUTTONS (fire gradient override) ============================================================ */ .nice_button, input[type="submit"], input[type="button"], input[type="reset"] { background: linear-gradient(180deg, #c07020 0%, #8a4c10 60%, #6a3a0a 100%) !important; border-top: 1px solid #7a4018 !important; border-left: 1px solid #5a2e0a !important; border-right: 1px solid #5a2e0a !important; border-bottom: 3px solid #3a1a06 !important; color: #f5e0b0 !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.6) !important; box-shadow: 0 0 10px rgba(160, 80, 10, 0.25), inset 0 1px 0 rgba(255, 180, 60, 0.15) !important; font-family: 'Cinzel', serif !important; font-size: 0.8rem !important; letter-spacing: 0.1em !important; cursor: pointer !important; border-radius: 3px !important; padding: 0.55rem 1.8rem !important; transition: all 200ms ease !important; } .nice_button:hover, input[type="submit"]:hover, input[type="button"]:hover { background: linear-gradient(180deg, #d4882a 0%, #9a5818 60%, #7a4212 100%) !important; color: #fff9e8 !important; box-shadow: 0 0 18px rgba(200, 110, 10, 0.45), inset 0 1px 0 rgba(255, 200, 80, 0.2) !important; border-bottom-color: #5a2808 !important; } .nice_button:active, input[type="submit"]:active { background: linear-gradient(180deg, #7a3a08 0%, #6a3208 100%) !important; border-bottom-width: 1px !important; transform: translateY(1px) !important; box-shadow: none !important; } /* ============================================================ INFERNO — UCP (User Control Panel) ============================================================ */ /* Section headers: Cinzel, gold text, fire bg, golden underline */ .col-lg-4 .section-header, .col-lg-8 .section-header { display: block !important; font-family: 'Cinzel', serif !important; font-size: 1rem !important; font-weight: 700 !important; letter-spacing: 0.13em !important; color: #d4962a !important; text-align: center !important; background: linear-gradient(180deg, #231008 0%, #160b04 100%) !important; border-color: #3a1e0a !important; padding: 0.8rem 1.2rem 0.7rem !important; text-shadow: 0 0 10px rgba(210, 130, 20, 0.5) !important; position: relative !important; } .col-lg-4 .section-header span, .col-lg-8 .section-header span { color: #f5e090 !important; text-shadow: 0 0 14px rgba(240, 200, 50, 0.55) !important; } .col-lg-4 .section-header::after, .col-lg-8 .section-header::after { content: '' !important; display: block !important; width: 50% !important; height: 1px !important; background: linear-gradient(90deg, transparent 0%, #a06020 30%, #d4962a 50%, #a06020 70%, transparent 100%) !important; position: relative !important; left: 50% !important; transform: translateX(-50%) !important; margin-top: 0.35rem !important; } /* Section bodies: deep fire background */ .col-lg-4 .section-body, .col-lg-8 .section-body { background: linear-gradient(180deg, #130a04 0%, #0e0804 100%) !important; border: 1px solid #3a1e0a !important; border-top: none !important; } /* Sidebar navigation list items: Cinzel, fire colors */ .col-lg-4 .list-group-item { background-color: #190e07 !important; border: 1px solid #3a1e0a !important; border-radius: 0 !important; color: #c0964a !important; font-family: 'Cinzel', serif !important; font-size: 0.83rem !important; font-weight: 600 !important; letter-spacing: 0.07em !important; text-transform: uppercase !important; padding: 0.65rem 1rem !important; transition: background-color 150ms ease, color 150ms ease !important; } .col-lg-4 .list-group-item:hover { background-color: #231408 !important; color: #f0d070 !important; text-shadow: 0 0 8px rgba(220, 160, 40, 0.3) !important; } .col-lg-4 .list-group-item.active { background-color: #2a1508 !important; border-color: #6a3a10 !important; color: #f0c860 !important; text-shadow: 0 0 10px rgba(230, 170, 40, 0.45) !important; } /* User info table (account overview) */ .user-table a { color: #c8922a !important; font-family: 'Cinzel', serif !important; font-size: 0.72rem !important; letter-spacing: 0.07em !important; text-transform: uppercase !important; text-decoration: none !important; transition: color 150ms ease !important; } .user-table a:hover { color: #f5d878 !important; } .user-table-icon { color: #7a4e18 !important; } .vote-points i, .donation-points i { color: #c8922a !important; } /* Character table: realm header row */ .nice_table thead th { font-family: 'Cinzel', serif !important; color: #d4962a !important; background: linear-gradient(180deg, #2a1208 0%, #1c0e04 100%) !important; border-color: #3a1e0a !important; text-shadow: 0 0 8px rgba(210, 130, 20, 0.4) !important; letter-spacing: 0.1em !important; } /* Character table: view link */ .nice_table a { color: #c8922a !important; font-family: 'Cinzel', serif !important; font-size: 0.72rem !important; letter-spacing: 0.07em !important; text-transform: uppercase !important; text-decoration: none !important; } .nice_table a:hover { color: #f5d878 !important; } /* HR divider (settings page, between info form and password form) */ .col-lg-8 hr { border: none !important; height: 1px !important; background: linear-gradient(90deg, transparent 0%, #7a4010 25%, #c8922a 50%, #7a4010 75%, transparent 100%) !important; opacity: 1 !important; margin: 1.8rem 0 !important; } /* Form labels */ .page_form label, .page_form .col-form-label { color: #b88840 !important; font-family: 'Cinzel', serif !important; font-size: 0.75rem !important; font-weight: 600 !important; letter-spacing: 0.08em !important; text-transform: uppercase !important; display: flex !important; align-items: center !important; } /* Form inputs */ .page_form .form-control, .page_form .form-select { background-color: #100702 !important; border: 1px solid #3a1e0a !important; border-radius: 3px !important; color: #e8dac8 !important; padding: 0.6rem 0.9rem !important; font-size: 0.88rem !important; } .page_form .form-control:focus, .page_form .form-select:focus { background-color: #180e05 !important; border-color: #8a4a10 !important; box-shadow: 0 0 0 2px rgba(180, 90, 20, 0.2) !important; color: #c8a060 !important; } .page_form .form-control::placeholder { color: #4a2808 !important; opacity: 1 !important; } /* Avatar: fire border & overlay text */ .user-avatar img { border: 2px solid #5a3010 !important; border-radius: 50% !important; transition: border-color 200ms ease !important; } .user-avatar:hover img { border-color: #c8922a !important; } .user-avatar .avatar-change-text { background-color: rgba(8, 4, 1, 0.88) !important; border-radius: 50% !important; color: #d4962a !important; font-family: 'Cinzel', serif !important; font-size: 0.68rem !important; letter-spacing: 0.12em !important; text-shadow: 0 0 8px rgba(200, 130, 20, 0.5) !important; } /* ── Account Overview: data cells ── */ .user-table tbody td { font-family: 'Cinzel', serif !important; font-size: 0.88rem !important; vertical-align: middle !important; border: none !important; padding: 0.55rem 0.75rem !important; color: #b88a48 !important; letter-spacing: 0.06em !important; line-height: 1.7 !important; } /* First column: icon + label */ .user-table tbody td:first-child { color: #7a5828 !important; font-family: 'Cinzel', serif !important; font-size: 0.88rem !important; font-weight: 600 !important; letter-spacing: 0.07em !important; text-transform: uppercase !important; white-space: nowrap !important; } /* Second column: value */ .user-table tbody td:nth-child(2) { color: #e0a040 !important; font-family: 'Cinzel', serif !important; font-size: 0.88rem !important; font-weight: 600 !important; letter-spacing: 0.06em !important; } /* Spacer rows */ .user-table tbody tr td.pb-3 { padding: 0 !important; height: 0.6rem !important; } /* "Edit" link → small Inferno button */ .user-table .text-end a { display: inline-block !important; background: linear-gradient(180deg, #b86820 0%, #7a4010 55%, #5a2e08 100%) !important; color: #f0d898 !important; border: 1px solid #6a3810 !important; border-bottom-width: 2px !important; border-radius: 3px !important; font-family: 'Cinzel', serif !important; font-size: 0.73rem !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; text-decoration: none !important; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5) !important; padding: 0.28rem 0.85rem !important; box-shadow: 0 0 8px rgba(160, 80, 10, 0.2) !important; transition: background .2s, box-shadow .2s, color .2s !important; white-space: nowrap !important; } .user-table .text-end a:hover { background: linear-gradient(180deg, #d07828 0%, #904a18 55%, #6a3810 100%) !important; color: #fff8e0 !important; box-shadow: 0 0 14px rgba(200, 100, 10, 0.35) !important; border-color: #8a4820 !important; } /* Voting/donation points row separator line */ .user-table tbody .user-points td { border-top: 1px solid #2a1208 !important; } /* ── UCP field container (settings — login style) ── */ .ucp-field { border: 1px solid #3a1a08; border-radius: 4px; background: #100501; display: flex; align-items: center; transition: border-color .18s, box-shadow .18s; margin-bottom: 0; } .ucp-field:focus-within { border-color: #7a4010; box-shadow: 0 0 0 2px rgba(180, 80, 10, .14); } .ucp-field .form-control { flex: 1 !important; background: transparent !important; background-color: transparent !important; border: none !important; outline: 0 !important; box-shadow: none !important; color: #c8a060 !important; font-size: 0.98rem !important; font-family: 'Cinzel', serif !important; padding: 0.7rem 0.85rem !important; margin-bottom: 0 !important; border-radius: 0 !important; min-width: 0; } .ucp-field .form-control::placeholder { color: #4a2808 !important; opacity: 1 !important; } .ucp-field .form-control:-webkit-autofill, .ucp-field .form-control:-webkit-autofill:focus { -webkit-box-shadow: 0 0 0 1000px #100501 inset !important; -webkit-text-fill-color: #c8a060 !important; caret-color: #c8a060 !important; transition: background-color 5000s ease-in-out 0s !important; } .ucp-field select.form-select { flex: 1 !important; background-color: transparent !important; border: none !important; box-shadow: none !important; color: #c8a060 !important; font-family: 'Cinzel', serif !important; font-size: 0.9rem !important; padding: 0.7rem 0.85rem !important; margin-bottom: 0 !important; border-radius: 0 !important; } /* Eye toggle button */ .ucp-eye-btn { flex-shrink: 0; background: none !important; border: none !important; border-top: none !important; border-left: none !important; border-right: none !important; border-bottom: none !important; box-shadow: none !important; padding: 0 0.9rem !important; cursor: pointer !important; color: #c07030 !important; display: flex !important; align-items: center !important; align-self: stretch !important; transition: color .2s !important; line-height: 1 !important; outline: none !important; border-radius: 0 !important; transform: none !important; font-size: 0 !important; } .ucp-eye-btn:hover { color: #d88030 !important; } .ucp-eye-btn.eye-active { color: #e8a020 !important; } .ucp-eye-btn svg { display: block; } /* ── Character class colors ── */ .char-class-1 { color: #c79c6e !important; font-weight: 600; } /* Warrior */ .char-class-2 { color: #f58cba !important; font-weight: 600; } /* Paladin */ .char-class-3 { color: #abd473 !important; font-weight: 600; } /* Hunter */ .char-class-4 { color: #fff569 !important; font-weight: 600; } /* Rogue */ .char-class-5 { color: #ffffff !important; font-weight: 600; } /* Priest */ .char-class-6 { color: #c41f3b !important; font-weight: 600; } /* Death Knight */ .char-class-7 { color: #0070de !important; font-weight: 600; } /* Shaman */ .char-class-8 { color: #69ccf0 !important; font-weight: 600; } /* Mage */ .char-class-9 { color: #9482c9 !important; font-weight: 600; } /* Warlock */ .char-class-10 { color: #00ff96 !important; font-weight: 600; } /* Monk */ .char-class-11 { color: #ff7d0a !important; font-weight: 600; } /* Druid */ /* ── Race & class icon sizes (+15%) + compact cells ── */ .nice_table td.col-0, .nice_table td.col-2 { padding: 0.3rem 0.35rem !important; width: 28px !important; text-align: center !important; } .nice_table td.col-0 img { width: 23px !important; height: 23px !important; } .nice_table td.col-2 img { width: 23px !important; height: 23px !important; } /* ── VIEW link → Inferno button ── */ .nice_table td.col-6 { text-align: right !important; padding-right: 0.6rem !important; } .nice_table td.col-6 a { display: inline-flex !important; align-items: center !important; justify-content: center !important; background: linear-gradient(180deg, #c07020 0%, #8a4c10 55%, #6a3a0a 100%) !important; color: #f5dfa0 !important; border: 1px solid #8a4818 !important; border-radius: 6px !important; font-family: 'Cinzel', serif !important; font-size: 0.73rem !important; font-weight: 700 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; text-decoration: none !important; text-shadow: 0 1px 2px rgba(0, 0, 0, .5) !important; box-shadow: 0 0 10px rgba(180, 80, 10, .2) !important; padding: 0.38rem 0.9rem !important; transition: background .2s, box-shadow .2s, color .2s !important; white-space: nowrap !important; } .nice_table td.col-6 a:hover { background: linear-gradient(180deg, #d48020 0%, #a05c18 55%, #7a4510 100%) !important; box-shadow: 0 0 18px rgba(200, 100, 10, .4) !important; color: #fff8e0 !important; text-decoration: none !important; } /* ── ucp-field focus: keep Cinzel gold, not white ── */ .ucp-field .form-control:focus { color: #c8a060 !important; background: transparent !important; background-color: transparent !important; border: none !important; box-shadow: none !important; outline: 0 !important; } /* ============================================================ INFERNO — PAGE-HEAD TITLE (reinforce, highest cascade) ============================================================ */ .section-page .page-head.-type-page { font-family: 'Cinzel', serif !important; font-size: 1.6rem !important; font-weight: 700 !important; letter-spacing: 0.1em !important; text-transform: uppercase !important; text-align: center !important; color: #d4962a !important; padding: 0.9rem 2.5rem 1.3rem !important; margin-top: 1.5rem !important; margin-bottom: 1.5rem !important; display: block !important; border: 1px solid #6a3a10 !important; border-radius: 4px !important; background: linear-gradient(180deg, #1e0e04 0%, #120804 100%) !important; box-shadow: 0 0 20px rgba(160, 90, 10, 0.35), inset 0 0 30px rgba(0, 0, 0, 0.4) !important; text-shadow: 0 0 14px rgba(210, 130, 20, 0.65), 0 0 30px rgba(160, 90, 0, 0.35) !important; animation: title-flicker 3s ease-in-out infinite !important; overflow: visible !important; white-space: normal !important; } /* ── Unstuck cooldown icon scaled for table rows ── */ .nice_table .cooldown-ico { width: 53px !important; height: 53px !important; cursor: pointer !important; display: inline-block !important; background-size: contain !important; } /* ── Section body description paragraphs ── */ .col-lg-8 .section-body p.inferno-section-desc { font-family: 'Cinzel', serif !important; font-size: 0.97rem !important; font-weight: 500 !important; color: #c8922a !important; letter-spacing: 0.06em !important; line-height: 1.7 !important; margin-bottom: 1rem !important; text-wrap: auto !important; text-align: left !important; } /* ── ucp-field select (security page) ── */ .ucp-field .ucp-select { flex: 1 !important; background: transparent !important; background-color: #100501 !important; border: none !important; color: #c8a060 !important; font-family: 'Cinzel', serif !important; font-size: 0.85rem !important; padding: 0.7rem 0.85rem !important; box-shadow: none !important; cursor: pointer !important; } .ucp-field .ucp-select:focus { background-color: #100501 !important; color: #c8a060 !important; box-shadow: none !important; border: none !important; outline: 0 !important; } .ucp-field .ucp-select option { background: #1a0c04 !important; color: #c8a060 !important; } /* ── UCP password character counter (settings page) ── */ .ucp-char-counter { display: block; text-align: right; font-family: 'Cinzel', serif; font-size: 0.72rem; letter-spacing: 0.06em; margin-top: 3px; transition: color .15s; } .ucp-char-counter.counter-ok { color: #4a3018; } .ucp-char-counter.counter-warn { color: #c07030; } .ucp-char-counter.counter-over { color: #d04020; font-weight: 700; } .section-page .page-head.-type-page::after { content: '' !important; display: block !important; width: 70% !important; height: 1px !important; background: linear-gradient(90deg, transparent 0%, #a06020 30%, #d4962a 50%, #a06020 70%, transparent 100%) !important; position: relative !important; left: 50% !important; transform: translateX(-50%) !important; margin-top: 0.5rem !important; } /* ============================================================ INFERNO — EMBER EFFECTS TOGGLE BUTTON ============================================================ */ .ember-toggle-btn { background: rgba(255, 130, 20, 0.07); border: 1px solid rgba(200, 146, 42, 0.3); border-radius: 8px; width: 38px; height: 38px; font-size: 18px; cursor: pointer; padding: 0; display: flex; align-items: center; justify-content: center; transition: opacity 0.25s, filter 0.25s, background 0.2s; line-height: 1; flex-shrink: 0; } .ember-toggle-btn:hover { background: rgba(255, 130, 20, 0.15); border-color: rgba(200, 146, 42, 0.55); } .ember-toggle-btn.embers-off { opacity: 0.35; filter: grayscale(1); }