*{box-sizing:border-box} html,body{margin:0;padding:0;min-height:100%} html{scroll-behavior:smooth} body{min-height:100vh;background:radial-gradient(circle at 50% -10%,rgba(120,0,0,.22),transparent 38%),linear-gradient(180deg,#08090b 0%,#10080a 48%,#080709 100%);color:#d6d0cb;font:15px/1.6 Arial,Helvetica,sans-serif} a{color:#d7aa52;text-decoration:none}a:hover{color:#f0c86b}img{max-width:100%;height:auto} .hb-site{min-height:100vh;background:radial-gradient(circle at 50% -10%,rgba(120,0,0,.22),transparent 38%),linear-gradient(180deg,#08090b 0%,#10080a 48%,#080709 100%)} .hb-header{position:relative;border-bottom:1px solid #3b171b;background:rgba(5,5,7,.97);box-shadow:0 8px 30px rgba(0,0,0,.45)} .hb-header:after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;background:linear-gradient(90deg,transparent,#7d171b,#c49a4b,#7d171b,transparent);opacity:.8} .hb-header-inner{width:min(1240px,calc(100% - 40px));min-height:108px;margin:auto;display:flex;align-items:center;gap:28px} .hb-logo{display:flex;flex-direction:column;flex:0 0 220px;line-height:1;text-transform:uppercase} .hb-logo-main{font:700 42px/1 Georgia,serif;letter-spacing:8px;color:#e4b85c;text-shadow:0 2px 18px rgba(180,90,0,.18)} .hb-logo-sub{margin-top:11px;color:#776d68;font-size:10px;letter-spacing:5px} .hb-nav{display:flex;align-items:stretch;justify-content:center;gap:3px;flex:1;min-width:0} .hb-nav-item{position:relative}.hb-nav-title{display:block;padding:42px 17px 39px;color:#aaa09b;font-size:12px;font-weight:700;letter-spacing:2px;text-transform:uppercase;white-space:nowrap}.hb-nav-title:hover{color:#e4b85c;background:rgba(100,0,0,.16)} .hb-account{display:flex;align-items:center;gap:9px;flex:0 0 auto}.hb-account-button,.hb-account-logout{display:inline-flex;align-items:center;justify-content:center;min-height:42px;padding:0 16px;border:1px solid #7b1b20;font-size:11px;font-weight:700;letter-spacing:1.5px;text-transform:uppercase}.hb-account-button{background:linear-gradient(180deg,#a7191f,#640c11);color:#fff;box-shadow:0 5px 18px rgba(100,0,0,.25)}.hb-account-button:hover{color:#fff;background:linear-gradient(180deg,#c32128,#7b1016)}.hb-account-logout{background:#100b0d;color:#b8aaa4}.hb-account-logout:hover{border-color:#a1262b;color:#e4b85c} .hb-main{padding:52px 0 80px}.hb-container{width:min(1240px,calc(100% - 40px));margin:auto;display:block} .hb-content{position:relative;max-width:1000px;margin:auto;padding:38px 42px 50px;background:linear-gradient(180deg,rgba(22,10,12,.94),rgba(10,9,11,.98));border:1px solid #32171a;box-shadow:0 20px 55px rgba(0,0,0,.38)} .hb-content:before{content:"WELCOME TO HELLBORN";display:block;margin:0 0 34px;padding:22px 20px;border:1px solid #4c2427;background:linear-gradient(135deg,rgba(93,12,17,.28),rgba(12,7,9,.8));color:#e5b95d;text-align:center;font:700 30px/1.2 Georgia,serif;letter-spacing:5px;text-shadow:0 3px 16px rgba(170,90,0,.2)} .hb-content h1,.hb-content h2,.hb-content h3{font-family:Georgia,"Times New Roman",serif;color:#e1b65a}.hb-content h1{font-size:28px}.hb-content h2{font-size:22px}.hb-content h3{font-size:18px}.hb-content p{color:#b8b0ac}.hb-content hr{border:0;border-top:1px solid #382024;margin:28px 0} .hb-content table{width:100%;border-collapse:collapse;background:#0d0a0c}.hb-content th{padding:12px;text-align:left;background:#3b0c11;color:#e3b85c;font-size:11px;letter-spacing:1px;text-transform:uppercase}.hb-content td{padding:11px 12px;border-top:1px solid #28171a;color:#c9c2bd}.hb-content tr:hover td{background:rgba(100,10,15,.13)} .hb-content input,.hb-content select,.hb-content textarea{width:100%;padding:11px 13px;border:1px solid #432126;background:#0b090a;color:#ddd;outline:0}.hb-content input:focus,.hb-content select:focus,.hb-content textarea:focus{border-color:#9a3036;box-shadow:0 0 0 2px rgba(130,20,25,.12)}.hb-content button,.hb-content input[type=submit],.hb-content input[type=button]{padding:11px 20px;border:1px solid #8b2025;background:linear-gradient(180deg,#a61b22,#650c11);color:#fff;font-weight:700;cursor:pointer}.hb-content button:hover,.hb-content input[type=submit]:hover,.hb-content input[type=button]:hover{background:linear-gradient(180deg,#c1242b,#791015)} .hb-real-status{margin-top:34px;padding:22px 24px;display:flex;align-items:center;gap:20px;border:1px solid #432126;background:linear-gradient(90deg,rgba(91,10,15,.3),rgba(16,9,11,.9))}.hb-status-title{color:#e1b65a;font:700 18px Georgia,serif;letter-spacing:2px}.hb-status-online{display:flex;align-items:center;gap:8px;color:#7ed58b;font-size:11px;font-weight:700;letter-spacing:1.5px}.hb-status-dot{width:9px;height:9px;border-radius:50%;background:#5dcc72;box-shadow:0 0 12px rgba(70,220,100,.7)}.hb-status-players{margin-left:auto;display:flex;align-items:baseline;gap:8px}.hb-status-players strong{font:700 25px Georgia,serif;color:#fff}.hb-status-players span{color:#8c817c;font-size:10px;letter-spacing:1.5px} .hb-top-players{margin-top:36px}.hb-top-title{color:#e1b65a;font:700 25px Georgia,serif;letter-spacing:3px;text-align:center}.hb-top-subtitle{text-align:center;color:#756c68;font-size:10px;letter-spacing:2px;text-transform:uppercase;margin:5px 0 20px}.hb-top-player{display:grid;grid-template-columns:55px 1fr auto;align-items:center;gap:15px;margin-top:7px;padding:13px 16px;border:1px solid #28171a;background:#0c090b}.hb-top-player:hover{border-color:#5a2529;background:#160b0d}.hb-top-rank{color:#8d252a;font-weight:700}.hb-top-name{color:#e0d8d3;font-weight:700}.hb-top-level{color:#9c918b;font-size:11px;letter-spacing:.5px} .hb-footer{border-top:1px solid #3b171b;background:#070708}.hb-footer-inner{width:min(1240px,calc(100% - 40px));min-height:105px;margin:auto;display:flex;align-items:center;justify-content:space-between;gap:20px}.hb-footer strong{display:block;color:#e1b65a;font:700 18px Georgia,serif;letter-spacing:3px}.hb-footer span{display:block;color:#675e5a;margin-top:4px;font-size:9px;letter-spacing:3px;text-transform:uppercase}.hb-footer-copy{color:#554d49;font-size:10px;letter-spacing:1px} .hb-content .message,.hb-content .success,.hb-content .error{padding:13px 16px;margin:12px 0;border:1px solid #422126;background:#100a0c}.hb-content .success{border-color:#29452e;color:#9bd7a1}.hb-content .error{border-color:#632126;color:#e69a9a} @media(max-width:1050px){.hb-header-inner{min-height:0;padding:20px 0;flex-wrap:wrap;gap:18px}.hb-logo{flex:1 1 220px}.hb-nav{order:3;flex:1 0 100%;overflow-x:auto;justify-content:flex-start;border-top:1px solid #251316}.hb-nav-title{padding:16px 15px}.hb-content{padding:30px}} @media(max-width:700px){.hb-header-inner,.hb-footer-inner,.hb-container{width:min(100% - 24px,560px)}.hb-header-inner{padding:18px 0;gap:14px}.hb-logo{flex:1 1 100%;align-items:center;text-align:center}.hb-logo-main{font-size:34px;letter-spacing:6px}.hb-logo-sub{margin-top:8px}.hb-account{width:100%;justify-content:center}.hb-account-button,.hb-account-logout{flex:1;min-height:40px;padding:0 9px;font-size:10px}.hb-nav{width:calc(100vw - 24px);margin-left:calc((560px - 100vw + 24px)/2);margin-right:calc((560px - 100vw + 24px)/2);border-top:1px solid #251316;border-bottom:1px solid #251316}.hb-nav-title{padding:14px 14px;font-size:10px;letter-spacing:1.5px}.hb-main{padding:22px 0 45px}.hb-content{padding:18px 14px 30px}.hb-content:before{margin:0 0 22px;padding:22px 10px;font-size:24px;line-height:1.35;letter-spacing:3px}.hb-real-status{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:24px;padding:17px}.hb-status-title{grid-column:1/-1;font-size:16px}.hb-status-players{margin-left:0}.hb-top-title{font-size:21px}.hb-top-player{grid-template-columns:42px 1fr;gap:10px}.hb-top-level{grid-column:2}.hb-footer-inner{padding:24px 0;display:block;text-align:center}.hb-footer-copy{margin-top:16px}.hb-content table{font-size:12px}.hb-content th,.hb-content td{padding:9px 7px}} @media(max-width:420px){.hb-logo-main{font-size:29px;letter-spacing:4px}.hb-logo-sub{font-size:8px;letter-spacing:3px}.hb-account{gap:6px}.hb-account-button,.hb-account-logout{font-size:9px}.hb-content:before{font-size:21px}.hb-real-status{grid-template-columns:1fr}.hb-status-title{grid-column:auto}.hb-status-players{justify-content:space-between}} body{background-image:url("../images/background/hellborn-background.png");background-size:cover;background-position:center top;background-attachment:fixed;background-repeat:no-repeat}.hb-site{background:linear-gradient(180deg,rgba(5,3,5,.35),rgba(5,3,5,.82));} .hb-site{min-height:100vh;background:transparent}.hb-footer{position:relative;z-index:2;background:#070708} @media(max-width:700px){ html,body{width:100%;max-width:100%;overflow-x:hidden} .hb-site{width:100%;max-width:100%;overflow-x:hidden} .hb-header-inner,.hb-footer-inner,.hb-container{width:calc(100% - 24px);max-width:560px;margin-left:auto;margin-right:auto} .hb-content{width:100%;max-width:100%;min-width:0;margin-left:auto;margin-right:auto} .hb-nav{width:100%;margin-left:0;margin-right:0;max-width:100%;overflow-x:auto} .hb-nav-title{flex-shrink:0} .hb-account{width:100%;max-width:100%} .hb-account-button,.hb-account-logout{min-width:0} .hb-real-status{width:100%;max-width:100%} } /* HELLBORN - TARGET DESIGN */ .hb-content{ max-width:1170px; padding:24px 30px 32px; background:rgba(5,5,7,.78); border:1px solid #57251e; box-shadow:0 15px 60px rgba(0,0,0,.65),inset 0 0 35px rgba(100,10,10,.12); } .hb-content:before{ content:"WELCOME TO HELLBORN"; margin:0 0 22px; padding:25px 20px; border:1px solid #713326; background: linear-gradient(90deg,rgba(70,8,8,.65),rgba(15,5,6,.78),rgba(70,8,8,.65)); color:#e8bd62; text-align:center; font:700 32px/1.2 Georgia,"Times New Roman",serif; letter-spacing:4px; text-shadow:0 0 18px rgba(220,140,40,.25); box-shadow:inset 0 0 25px rgba(120,20,10,.18); } .hb-real-status{ margin-top:20px; padding:19px 22px; border:1px solid #713326; background:linear-gradient(90deg,rgba(75,8,10,.62),rgba(10,5,6,.88),rgba(75,8,10,.62)); box-shadow:inset 0 0 20px rgba(100,10,10,.12); } .hb-status-title{ color:#e8bd62; font-size:20px; letter-spacing:2px; } .hb-status-online{ color:#65df82; } .hb-status-players strong{ color:#f5eee7; font-size:28px; } .hb-top-players{ margin-top:28px; padding:10px 10px 0; } .hb-top-title{ color:#e8bd62; font-size:27px; letter-spacing:4px; text-shadow:0 0 15px rgba(220,150,50,.18); } .hb-top-subtitle{ color:#887b73; letter-spacing:3px; } .hb-top-player{ border-color:#49201d; background:rgba(10,6,7,.72); } .hb-top-player:hover{ border-color:#8a382d; background:rgba(55,8,10,.35); } @media(min-width:1051px){ .hb-main{ padding:48px 0 70px; } .hb-container{ width:min(1240px,calc(100% - 50px)); } .hb-content{ min-height:650px; } } @media(max-width:700px){ .hb-content{ padding:18px 14px 30px; } .hb-content:before{ font-size:24px; letter-spacing:3px; } } /* HELLBORN GOLD FRAMES */ .hb-content{ border:1px solid #c99a45 !important; box-shadow:0 0 0 1px rgba(255,190,70,.18),0 0 22px rgba(190,120,30,.16),0 20px 55px rgba(0,0,0,.55) !important; } .hb-content:before{ border:1px solid #c99a45 !important; box-shadow:0 0 12px rgba(210,150,50,.12) !important; } .hb-real-status{ border:1px solid #c99a45 !important; box-shadow:0 0 0 1px rgba(255,190,70,.12),0 0 16px rgba(190,120,30,.12) !important; } .hb-top-players{ border:1px solid #c99a45 !important; box-shadow:0 0 0 1px rgba(255,190,70,.12),0 0 16px rgba(190,120,30,.12) !important; } .hb-top-player{ border:1px solid #8f6b32 !important; } @media(max-width:700px){ .hb-content{ border:1px solid #c99a45 !important; } .hb-content:before, .hb-real-status, .hb-top-players{ border:1px solid #c99a45 !important; } } /* GOLDEN FRAME - FINAL */ .hb-content, .hb-content:before, .hb-real-status, .hb-top-players{ border-color:#d6a84a !important; } .hb-content{ box-shadow: 0 0 0 1px rgba(214,168,74,.20), 0 0 18px rgba(214,168,74,.10), 0 20px 55px rgba(0,0,0,.60) !important; } .hb-content:before, .hb-real-status, .hb-top-players{ box-shadow: 0 0 0 1px rgba(214,168,74,.12), 0 0 14px rgba(214,168,74,.08) !important; } .hb-top-player{ border-color:#8f6d35 !important; } /* HELLBORN NEWS */ .hb-content .NewsHeadline{ border:1px solid #d6a84a !important; background:linear-gradient(135deg,rgba(55,8,10,.96),rgba(10,7,8,.98)) !important; box-shadow:0 0 14px rgba(214,168,74,.10),inset 0 0 25px rgba(120,20,20,.12) !important; } .hb-content .NewsHeadlineBackground{ background-image:none !important; } .hb-content .NewsHeadlineText{ color:#d6a84a !important; } .hb-content .NewsHeadlineDate{ color:#8e8179 !important; } .hb-content .NewsHeadline a{ color:#d6a84a !important; } .hb-content .NewsHeadline a:hover{ color:#fff0b0 !important; } /* HELLBORN GOLD FRAMES */ .hb-content{ border:1px solid #8f6b2f; box-shadow:0 0 0 1px rgba(210,165,75,.12),0 20px 55px rgba(0,0,0,.45); } .hb-content:before{ border:1px solid #9f7835; box-shadow:inset 0 0 25px rgba(120,30,0,.18); } .hb-real-status{ border:1px solid #9f7835; box-shadow:inset 0 0 25px rgba(120,30,0,.12); } .hb-top-players{ border:1px solid #9f7835; padding:28px 20px 34px; box-shadow:inset 0 0 30px rgba(120,30,0,.10); } .hb-top-player{ border-color:#6f542c; } .hb-top-player:hover{ border-color:#b48a3d; } @media(max-width:700px){ .hb-content{ border-color:#9f7835; } .hb-content:before{ border-color:#9f7835; } .hb-real-status{ border-color:#9f7835; } .hb-top-players{ border-color:#9f7835; padding:26px 14px 30px; } } /* HELLBORN - STRONG GOLD BORDERS */ .hb-content, .hb-content:before, .hb-real-status, .hb-top-players{ border-color:#c99a45 !important; } .hb-content{ box-shadow: 0 0 0 1px rgba(232,193,105,.18), 0 0 18px rgba(170,110,25,.12), 0 20px 55px rgba(0,0,0,.45); } .hb-content:before, .hb-real-status, .hb-top-players{ box-shadow: inset 0 0 22px rgba(120,45,0,.12), 0 0 8px rgba(210,160,65,.08); } @media(max-width:700px){ .hb-content, .hb-content:before, .hb-real-status, .hb-top-players{ border-color:#c99a45 !important; } } /* HELLBORN - VISIBLE GOLD FRAME */ .hb-content{ border:2px solid #d8ad55 !important; } .hb-content:before{ border:2px solid #d8ad55 !important; } .hb-real-status{ border:2px solid #d8ad55 !important; } .hb-top-players{ border:2px solid #d8ad55 !important; } .hb-content, .hb-content:before, .hb-real-status, .hb-top-players{ box-shadow: 0 0 5px rgba(216,173,85,.35), inset 0 0 20px rgba(120,40,0,.10); } /* HELLBORN GOLD FRAME - MOBILE FIX */ .hb-content, .hb-content:before, .hb-real-status, .hb-top-players{ border:1px solid #d4a84f !important; } .hb-content:before, .hb-real-status, .hb-top-players{ box-shadow: inset 0 0 25px rgba(120,30,0,.18), 0 0 10px rgba(212,168,79,.18) !important; } @media(max-width:700px){ .hb-content, .hb-content:before, .hb-real-status, .hb-top-players{ border:1px solid #d4a84f !important; } } /* HELLBORN MENU - GOLD FRAME */ .hb-nav{ border-top:1px solid #8f672b; border-bottom:1px solid #8f672b; box-shadow: 0 1px 0 rgba(225,180,80,.18), 0 8px 20px rgba(0,0,0,.35); } .hb-nav-item{ border-left:1px solid rgba(143,103,43,.45); } .hb-nav-item:last-child{ border-right:1px solid rgba(143,103,43,.45); } .hb-nav-title{ position:relative; transition:all .2s ease; } .hb-nav-title:hover{ color:#f0c86b; background:linear-gradient( 180deg, rgba(130,20,20,.35), rgba(60,8,10,.65) ); box-shadow: inset 0 2px 0 #c99a45, inset 0 -2px 0 rgba(201,154,69,.35); } /* HELLBORN MENU - ACTIVE GOLD ACCENT */ .hb-nav-title:after{ content:""; position:absolute; left:14px; right:14px; bottom:0; height:2px; background:linear-gradient( 90deg, transparent, #c99a45, #f0c86b, #c99a45, transparent ); opacity:0; transition:opacity .2s ease; } .hb-nav-title:hover:after{ opacity:1; } .hb-nav-title:focus:after{ opacity:1; } .hb-nav-item:hover{ background:rgba(70,8,10,.18); } /* HELLBORN MOBILE MENU - 3 COLUMNS */ @media(max-width:700px){ .hb-nav{ display:grid !important; grid-template-columns:repeat(3,1fr) !important; width:100% !important; margin:0 !important; overflow:visible !important; } .hb-nav-item{ width:100% !important; min-width:0 !important; } .hb-nav-title{ padding:13px 4px !important; text-align:center !important; font-size:9px !important; letter-spacing:1px !important; white-space:nowrap !important; } } /* HELLBORN - ORNATE GOLD FRAME */ .hb-content, .hb-real-status, .hb-top-players{ border:1px solid #b98a3c !important; box-shadow: inset 0 0 0 1px rgba(245,210,125,.12), inset 0 0 25px rgba(100,35,0,.16), 0 0 0 1px rgba(80,45,10,.8), 0 0 14px rgba(190,135,45,.16), 0 18px 45px rgba(0,0,0,.45) !important; position:relative; } .hb-content{ background: linear-gradient(90deg,rgba(210,165,75,.10) 1px,transparent 1px) 0 0/18px 1px no-repeat, linear-gradient(90deg,transparent calc(100% - 18px),rgba(210,165,75,.10) calc(100% - 18px),rgba(210,165,75,.10) calc(100% - 17px),transparent calc(100% - 17px)) 0 100%/100% 1px no-repeat, linear-gradient(180deg,rgba(25,9,11,.97),rgba(8,7,9,.98)) !important; } .hb-real-status, .hb-top-players{ background: linear-gradient(180deg,rgba(55,12,14,.65),rgba(12,8,10,.94)) !important; } .hb-content:after, .hb-real-status:after, .hb-top-players:after{ content:""; position:absolute; inset:5px; border:1px solid rgba(214,168,79,.28); pointer-events:none; } @media(max-width:700px){ .hb-content, .hb-real-status, .hb-top-players{ border-color:#c49a4d !important; } .hb-content:after, .hb-real-status:after, .hb-top-players:after{ inset:4px; } } /* HELLBORN - MOCKUP GOLD FRAME V2 */ .hb-content{ border:1px solid #e0b85c !important; box-shadow: inset 0 0 0 1px rgba(255,225,150,.18), inset 0 0 0 4px rgba(70,35,5,.45), inset 0 0 35px rgba(0,0,0,.55), 0 0 0 1px #6f4b16, 0 0 18px rgba(224,184,92,.18), 0 20px 55px rgba(0,0,0,.55) !important; } .hb-content:after{ inset:7px !important; border:1px solid #9d742b !important; box-shadow: inset 0 0 0 1px rgba(245,210,125,.10), 0 0 8px rgba(224,184,92,.10) !important; } /* ========================================================= HELLBORN MOCKUP FRAME SYSTEM ========================================================= */ .hb-content{ position:relative !important; border:1px solid #b88738 !important; background:linear-gradient(180deg,rgba(10,7,8,.96),rgba(5,5,6,.98)) !important; box-shadow: 0 0 0 1px rgba(35,18,8,.95), 0 0 0 2px rgba(201,151,63,.18), inset 0 0 0 1px rgba(236,190,100,.12), inset 0 0 35px rgba(70,20,8,.18), 0 25px 60px rgba(0,0,0,.65) !important; } /* inner frame */ .hb-content:after{ content:"" !important; position:absolute !important; inset:9px !important; border:1px solid rgba(201,151,63,.55) !important; box-shadow: inset 0 0 0 1px rgba(80,42,10,.7), 0 0 8px rgba(201,151,63,.12) !important; pointer-events:none !important; z-index:0 !important; } /* golden corner ornaments */ .hb-content:before{ position:relative !important; z-index:1 !important; margin:0 0 34px !important; border:1px solid #b88738 !important; background: linear-gradient(90deg,rgba(80,15,12,.9),rgba(25,8,9,.94)), radial-gradient(circle at center,rgba(190,130,40,.18),transparent 65%) !important; box-shadow: inset 0 0 0 1px rgba(238,190,92,.12), inset 0 0 25px rgba(90,20,5,.35), 0 0 0 1px rgba(60,30,8,.9) !important; } /* decorative corner cuts */ .hb-content:before{ clip-path:polygon( 0 10px,10px 10px,10px 0, calc(100% - 10px) 0, calc(100% - 10px) 10px,100% 10px, 100% calc(100% - 10px), calc(100% - 10px) calc(100% - 10px), calc(100% - 10px) 100%,10px 100%, 10px calc(100% - 10px),0 calc(100% - 10px) ) !important; } /* SERVER STATUS */ .hb-real-status{ position:relative !important; border:1px solid #b88738 !important; background: linear-gradient(90deg,rgba(60,15,10,.78),rgba(8,7,8,.96) 45%,rgba(35,10,9,.72)) !important; box-shadow: 0 0 0 1px rgba(45,22,7,.9), inset 0 0 0 1px rgba(235,185,85,.10), inset 0 0 28px rgba(100,25,5,.22), 0 0 12px rgba(190,130,40,.12) !important; } .hb-real-status:after{ content:"" !important; position:absolute !important; inset:5px !important; border:1px solid rgba(201,151,63,.45) !important; pointer-events:none !important; } /* TOP PLAYERS */ .hb-top-players{ position:relative !important; border:1px solid #b88738 !important; background:linear-gradient(180deg,rgba(7,6,7,.96),rgba(5,5,6,.99)) !important; box-shadow: 0 0 0 1px rgba(45,22,7,.9), inset 0 0 0 1px rgba(235,185,85,.10), inset 0 0 35px rgba(70,20,8,.15), 0 0 12px rgba(190,130,40,.10) !important; } .hb-top-players:after{ content:"" !important; position:absolute !important; inset:7px !important; border:1px solid rgba(201,151,63,.42) !important; pointer-events:none !important; } /* subtle gold center diamonds */ .hb-real-status:before, .hb-top-players:before{ content:"◆" !important; position:absolute !important; left:50% !important; top:-8px !important; transform:translateX(-50%) !important; color:#e1b45b !important; font-size:11px !important; line-height:1 !important; text-shadow:0 0 8px rgba(220,170,70,.45) !important; z-index:3 !important; } /* headings */ .hb-status-title, .hb-top-title{ position:relative !important; z-index:2 !important; text-shadow:0 1px 8px rgba(190,130,40,.18) !important; } /* mobile */ @media(max-width:700px){ .hb-content{ border-color:#b88738 !important; box-shadow: 0 0 0 1px rgba(35,18,8,.95), inset 0 0 0 1px rgba(236,190,100,.10), inset 0 0 25px rgba(70,20,8,.16) !important; } .hb-content:after{ inset:6px !important; } .hb-real-status:after, .hb-top-players:after{ inset:4px !important; } } /* HELLBORN - MOCKUP GOLD FRAME */ .hb-content{ border:1px solid #e0b85a !important; box-shadow: 0 0 0 1px #5c3b12, inset 0 0 0 1px rgba(255,220,130,.22), 0 0 18px rgba(210,160,60,.18) !important; } .hb-content:after{ border:1px solid #b88632 !important; box-shadow: inset 0 0 0 1px rgba(255,220,130,.12) !important; } .hb-content:before{ border:1px solid #e0b85a !important; box-shadow: 0 0 0 1px #5c3b12, inset 0 0 0 1px rgba(255,220,130,.20), 0 0 15px rgba(210,160,60,.16) !important; } .hb-real-status, .hb-top-players{ border:1px solid #e0b85a !important; box-shadow: 0 0 0 1px #5c3b12, inset 0 0 0 1px rgba(255,220,130,.18), 0 0 15px rgba(210,160,60,.15) !important; } .hb-real-status:after, .hb-top-players:after{ border:1px solid #9f7026 !important; } @media(max-width:700px){ .hb-content, .hb-content:before, .hb-real-status, .hb-top-players{ border-color:#e0b85a !important; } } /* HELLBORN ACCOUNT MOBILE FIX */ @media(max-width:700px){ .hb-content .TableContainer, .hb-content .InnerTableContainer, .hb-content .Table1{ width:100% !important; max-width:100% !important; background:rgba(5,5,7,.72) !important; color:#d8d0cb !important; } .hb-content .LabelV, .hb-content .Text{ color:#d8d0cb !important; } .hb-content .TableContainer a{ color:#d8ad55 !important; } .hb-content .TableContainer a:hover{ color:#f3cf7b !important; } .hb-content .TableContainer table, .hb-content .Table1{ width:100% !important; max-width:100% !important; } .hb-content .TableContainer td, .hb-content .TableContainer th{ color:#d8d0cb !important; background:rgba(10,7,8,.72) !important; border-color:#3d2920 !important; } .hb-content img{ max-width:100% !important; } } /* HELLBORN ACCOUNT - MOBILE TABLE LAYOUT */ @media(max-width:700px){ .hb-content .TableContainer{ width:100% !important; max-width:100% !important; box-sizing:border-box !important; overflow:hidden !important; } .hb-content .TableContainer .Table3, .hb-content .TableContainer .Table4, .hb-content .TableContainer .Table5{ width:100% !important; max-width:100% !important; margin:0 !important; box-sizing:border-box !important; border:1px solid #d8aa55 !important; background:#090708 !important; } .hb-content .TableContainer .InnerTableContainer{ width:100% !important; max-width:100% !important; margin:0 !important; padding:6px !important; box-sizing:border-box !important; } .hb-content .TableContentAndRightShadow{ width:100% !important; max-width:100% !important; margin:0 !important; box-sizing:border-box !important; } .hb-content .TableContentContainer{ width:100% !important; max-width:100% !important; margin:0 !important; box-sizing:border-box !important; background:#100b0c !important; border:1px solid #5c3b12 !important; box-shadow:none !important; } .hb-content .TableContent{ width:100% !important; max-width:100% !important; table-layout:fixed !important; box-sizing:border-box !important; } .hb-content .TableContent td{ box-sizing:border-box !important; max-width:100% !important; overflow-wrap:anywhere !important; word-break:break-word !important; } .hb-content .LabelV{ width:38% !important; color:#e0b85a !important; } .hb-content .TableContainer .CaptionContainer{ width:100% !important; box-sizing:border-box !important; } .hb-content .TableContainer .CaptionInnerContainer{ width:100% !important; box-sizing:border-box !important; } .hb-content .TableContainer .CaptionContainer .Text{ color:#e0b85a !important; font-family:Georgia,serif !important; font-size:17px !important; text-align:left !important; padding-left:10px !important; } } /* HELLBORN ACCOUNT - GOLD CAPTIONS */ .hb-content .TableContainer .CaptionEdgeLeftTop, .hb-content .TableContainer .CaptionEdgeRightTop, .hb-content .TableContainer .CaptionEdgeLeftBottom, .hb-content .TableContainer .CaptionEdgeRightBottom, .hb-content .TableContainer .CaptionBorderTop, .hb-content .TableContainer .CaptionBorderBottom, .hb-content .TableContainer .CaptionVerticalLeft, .hb-content .TableContainer .CaptionVerticalRight{ background-image:none !important; background-color:transparent !important; } .hb-content .TableContainer .CaptionContainer{ background:linear-gradient(180deg,#24170a,#0d0906) !important; border:1px solid #d8aa55 !important; box-sizing:border-box !important; } .hb-content .TableContainer .CaptionInnerContainer{ background:transparent !important; border:0 !important; } .hb-content .TableContainer .CaptionContainer .Text{ color:#e0b85a !important; font-family:Georgia,serif !important; font-size:16px !important; font-weight:bold !important; text-shadow:0 1px 3px #000 !important; } /* HELLBORN ACCOUNT - MOBILE WIDTH FINAL */ @media(max-width:700px){ .hb-content .TableContainer,.hb-content .TableContainer table,.hb-content .Table3,.hb-content .Table4,.hb-content .Table5,.hb-content .InnerTableContainer,.hb-content .TableContentContainer,.hb-content .TableContentAndRightShadow{width:100% !important;max-width:100% !important;min-width:0 !important;box-sizing:border-box !important;margin-left:0 !important;margin-right:0 !important;} .hb-content .TableContainer{overflow:hidden !important;} .hb-content .TableContent{width:100% !important;max-width:100% !important;min-width:0 !important;table-layout:fixed !important;} .hb-content .TableContent td,.hb-content .TableContent th{max-width:100% !important;box-sizing:border-box !important;overflow-wrap:anywhere !important;word-break:break-word !important;} } /* HELLBORN ACCOUNT - TABLE DESIGN */ .hb-content .TableContainer .Table3,.hb-content .TableContainer .Table4,.hb-content .TableContainer .Table5{width:100% !important;box-sizing:border-box !important;border:1px solid #d8aa55 !important;background:#090708 !important;} .hb-content .TableContainer .InnerTableContainer{width:100% !important;box-sizing:border-box !important;margin:0 !important;padding:8px !important;} .hb-content .TableContentAndRightShadow{width:100% !important;box-sizing:border-box !important;margin:0 !important;background:none !important;} .hb-content .TableContentContainer{width:100% !important;box-sizing:border-box !important;margin:0 !important;background:#100b0c !important;border:1px solid #6f4c18 !important;box-shadow:none !important;} .hb-content .TableContent{width:100% !important;background:#100b0c !important;color:#d8d0cb !important;} .hb-content .TableContent td{background:#100b0c !important;color:#d8d0cb !important;border-color:#3d2920 !important;} .hb-content .LabelV{color:#e0b85a !important;font-weight:bold !important;} /* HELLBORN - MOBILE TIBIACOM OVERRIDE */ @media(max-width:700px){html,body{min-width:0 !important;width:100% !important;max-width:100% !important;overflow-x:hidden !important}.Content{width:100% !important;max-width:100% !important;min-width:0 !important;box-sizing:border-box !important}.Content .Box{width:100% !important;max-width:100% !important;min-width:0 !important;box-sizing:border-box !important;margin:0 !important}.Content .BoxContent{width:100% !important;max-width:100% !important;min-width:0 !important;box-sizing:border-box !important;padding:0 !important}#ContentHelper{width:100% !important;max-width:100% !important;min-width:0 !important;margin:0 !important;box-sizing:border-box !important}} /* HELLBORN - MOBILE MENU SCROLL + SOFT GOLD */ @media(max-width:700px){.hb-nav{display:flex !important;grid-template-columns:none !important;overflow-x:auto !important;overflow-y:hidden !important;flex-wrap:nowrap !important;scrollbar-width:none !important;-webkit-overflow-scrolling:touch !important}.hb-nav::-webkit-scrollbar{display:none !important}.hb-nav-item{flex:0 0 auto !important;width:auto !important}.hb-nav-title{display:block !important;padding:13px 24px !important;white-space:nowrap !important;text-align:center !important;font-size:9px !important}} .hb-content .TableContainer .Table3,.hb-content .TableContainer .Table4,.hb-content .TableContainer .Table5{border-color:#80602f !important;box-shadow:0 0 4px rgba(180,140,70,.08) !important}.hb-content .TableContainer .CaptionContainer{border-color:#80602f !important;box-shadow:0 0 4px rgba(180,140,70,.08) !important}.hb-content .TableContentContainer{border-color:#60491f !important}.hb-content .CaptionContainer .Text{color:#c99f52 !important} /* HELLBORN - ULTRA SOFT FRAMES */ .hb-content .TableContainer .Table3,.hb-content .TableContainer .Table4,.hb-content .TableContainer .Table5{border-color:rgba(128,96,47,.45) !important;box-shadow:0 0 3px rgba(180,140,70,.04) !important}.hb-content .TableContainer .CaptionContainer{border-color:rgba(128,96,47,.42) !important;box-shadow:0 0 3px rgba(180,140,70,.04) !important}.hb-content .TableContentContainer{border-color:rgba(96,73,31,.35) !important}.hb-content .CaptionContainer .Text{color:rgba(201,159,82,.88) !important} /* HELLBORN - MICRO SOFT FRAMES */ .hb-content .TableContainer .Table3,.hb-content .TableContainer .Table4,.hb-content .TableContainer .Table5{border:1px solid rgba(128,96,47,.22) !important;box-shadow:none !important}.hb-content .TableContainer .CaptionContainer{border:1px solid rgba(128,96,47,.20) !important;box-shadow:none !important}.hb-content .TableContentContainer{border:1px solid rgba(96,73,31,.16) !important}.hb-content .CaptionContainer .Text{color:rgba(201,159,82,.72) !important} /* HELLBORN - ACCOUNT LOGIN TABLE */ .hb-content .TableContainer .Table1{width:100% !important;box-sizing:border-box !important;background:#090708 !important;border:1px solid rgba(128,96,47,.22) !important;box-shadow:none !important}.hb-content .TableContainer .Table1 .InnerTableContainer{background:#100b0c !important;border:0 !important}.hb-content .TableContainer .Table1 .CaptionContainer{background:linear-gradient(180deg,#1b1209,#0d0906) !important;border:1px solid rgba(128,96,47,.20) !important}.hb-content .TableContainer .Table1 .CaptionContainer .Text{color:rgba(201,159,82,.82) !important;font-family:Georgia,serif !important;font-weight:bold !important} /* HELLBORN - ACCOUNT MANAGEMENT LAYOUT */ #account-manage{display:grid;grid-template-columns:190px minmax(0,1fr);gap:28px;width:100%;max-width:100%;box-sizing:border-box}#account-manage #one{width:100%}#account-manage #two{min-width:0;width:100%}#account-manage .vertical-menu{width:100%;box-sizing:border-box;border:1px solid rgba(128,96,47,.22);background:#090708}#account-manage .vertical-menu a{display:block;padding:12px 14px;border-bottom:1px solid rgba(128,96,47,.12);color:#c9bfb8;background:#0d090a;text-decoration:none;font-size:11px;letter-spacing:.5px;box-sizing:border-box}#account-manage .vertical-menu a:hover{color:#e0b85a;background:linear-gradient(90deg,#1b0b0d,#10090a)}#account-manage #two h1,#account-manage #two h2{color:#d8aa55;font-family:Georgia,serif}#account-manage #two table{width:100%;max-width:100%;box-sizing:border-box;background:#100b0c;color:#d8d0cb;border-collapse:collapse}#account-manage #two td,#account-manage #two th{box-sizing:border-box;padding:9px 10px;border:1px solid rgba(96,73,31,.18);color:#d8d0cb}#account-manage #two th{color:#d8aa55;background:#180b0d}#account-manage #two td:first-child{color:#d0a952}@media(max-width:700px){#account-manage{display:block;width:100%;max-width:100%;overflow:hidden}#account-manage #one,#account-manage #two{width:100%;max-width:100%;min-width:0}#account-manage #one{margin-bottom:20px}#account-manage .vertical-menu{display:grid;grid-template-columns:1fr 1fr;width:100%}#account-manage .vertical-menu a{font-size:9px;text-align:center;padding:11px 5px;white-space:normal;border-right:1px solid rgba(128,96,47,.12)}#account-manage #two{overflow:hidden}#account-manage #two table{table-layout:fixed;font-size:11px}#account-manage #two td,#account-manage #two th{padding:7px 5px;overflow-wrap:anywhere;word-break:break-word}#account-manage #two h1{font-size:24px}#account-manage #two h2{font-size:19px}} /* HELLBORN - ACCOUNT MOBILE FORCE */ @media(max-width:700px){#account-manage{display:block !important;width:100% !important;max-width:100% !important;min-width:0 !important;margin:0 !important;padding:0 !important;overflow:hidden !important}#account-manage #one,#account-manage #two{display:block !important;position:static !important;float:none !important;clear:both !important;width:100% !important;max-width:100% !important;min-width:0 !important;margin-left:0 !important;margin-right:0 !important;box-sizing:border-box !important}#account-manage #two{overflow:hidden !important}#account-manage #two table{display:table !important;width:100% !important;max-width:100% !important;min-width:0 !important;table-layout:fixed !important}#account-manage #two td,#account-manage #two th{max-width:100% !important;box-sizing:border-box !important;overflow-wrap:anywhere !important;word-break:break-word !important}#account-manage #two input,#account-manage #two button{max-width:100% !important;box-sizing:border-box !important}} /* HELLBORN - HIDE ACCOUNT MENU */ #account-manage #one{display:none !important}#account-manage{display:block !important}#account-manage #two{width:100% !important;max-width:100% !important;min-width:0 !important} /* HELLBORN - ACCOUNT DESKTOP FIX */ @media(min-width:701px){#account-manage{display:grid !important;grid-template-columns:190px minmax(0,1fr) !important;gap:28px !important;width:100% !important;max-width:100% !important;min-width:0 !important;overflow:visible !important}#account-manage #one{display:block !important;width:100% !important;min-width:0 !important}#account-manage #two{display:block !important;width:100% !important;max-width:100% !important;min-width:0 !important;overflow:visible !important}} /* HELLBORN - ACCOUNT DESKTOP OVERFLOW FIX */ @media(min-width:701px){#account-manage,#account-manage #one,#account-manage #two{box-sizing:border-box !important;min-width:0 !important;max-width:100% !important}#account-manage #two{overflow:hidden !important}#account-manage #two table{width:100% !important;max-width:100% !important;min-width:0 !important;table-layout:fixed !important;box-sizing:border-box !important}#account-manage #two td,#account-manage #two th{max-width:100% !important;overflow-wrap:anywhere !important;word-break:break-word !important;box-sizing:border-box !important}#account-manage #two input,#account-manage #two select,#account-manage #two textarea,#account-manage #two button{max-width:100% !important;box-sizing:border-box !important}#account-manage #two form{max-width:100% !important;box-sizing:border-box !important}} /* HELLBORN - ACCOUNT FINAL WIDTH */ #account-manage,#account-manage *{box-sizing:border-box !important;max-width:100% !important;min-width:0 !important}#account-manage #two table{width:100% !important;max-width:100% !important;table-layout:fixed !important}#account-manage #two td,#account-manage #two th{max-width:100% !important;overflow-wrap:anywhere !important;word-break:break-word !important}#account-manage #two input,#account-manage #two select,#account-manage #two textarea,#account-manage #two button{max-width:100% !important;box-sizing:border-box !important}#account-manage img{max-width:100% !important;height:auto !important} /* HELLBORN - REMOVE ACCOUNT LEFT MENU */ #account-manage #one{display:none !important;width:0 !important;max-width:0 !important;margin:0 !important;padding:0 !important}#account-manage{display:block !important;width:100% !important;max-width:100% !important}#account-manage #two{width:100% !important;max-width:100% !important;margin:0 !important} /* HELLBORN - REMOVE YELLOW ACCOUNT ROWS */ #account-manage #two table tr td,#account-manage #two table tr th{background:#100b0c !important;color:#c8c0ba !important;border-color:#3d2920 !important}#account-manage #two table tr:nth-child(even) td,#account-manage #two table tr:nth-child(odd) td{background:#100b0c !important;color:#c8c0ba !important}#account-manage #two table tr:hover td{background:#180b0d !important}#account-manage #two .LabelV{background:#12090b !important;color:#d8aa55 !important} /* HELLBORN - ACCOUNT CHARACTER MOBILE */ @media(max-width:700px){#account-manage #two h2{margin-top:28px;margin-bottom:14px}#account-manage #two table{table-layout:auto !important;width:100% !important}#account-manage #two table th,#account-manage #two table td{white-space:normal !important;word-break:normal !important;overflow-wrap:normal !important;padding:10px 8px !important}#account-manage #two table:nth-of-type(4) th:nth-child(4),#account-manage #two table:nth-of-type(4) td:nth-child(4),#account-manage #two table:nth-of-type(4) th:nth-child(5),#account-manage #two table:nth-of-type(4) td:nth-child(5),#account-manage #two table:nth-of-type(4) th:nth-child(7),#account-manage #two table:nth-of-type(4) td:nth-child(7){display:none !important}#account-manage #two table:nth-of-type(4) th:nth-child(1){width:32% !important}#account-manage #two table:nth-of-type(4) th:nth-child(2){width:14% !important}#account-manage #two table:nth-of-type(4) th:nth-child(3){width:22% !important}#account-manage #two table:nth-of-type(4) th:nth-child(6){width:18% !important}#account-manage #two table:nth-of-type(4) th:nth-child(8){width:14% !important}#account-manage #two table:nth-of-type(4) td:first-child a{white-space:normal !important}#account-manage #two table:nth-of-type(4) td:nth-child(6){color:#d88b8b !important}#account-manage #two table:nth-of-type(4) td:nth-child(8){white-space:nowrap !important}} /* ========================================= HELLBORN - CHARACTER PAGE ========================================= */ /* Główne kontenery */ .hb-content .TableContainer { width: 100% !important; max-width: 100% !important; background: transparent !important; } /* Ramy tabel */ .hb-content .TableContainer .Table3, .hb-content .TableContainer .Table4, .hb-content .TableContainer .Table5 { width: 100% !important; max-width: 100% !important; background: #090708 !important; border: 1px solid rgba(128,96,47,.28) !important; box-shadow: none !important; } /* Wewnętrzne kontenery */ .hb-content .TableContainer .InnerTableContainer { width: 100% !important; max-width: 100% !important; background: #100b0c !important; border: 0 !important; } /* Zawartość */ .hb-content .TableContentContainer { width: 100% !important; max-width: 100% !important; background: #100b0c !important; border: 1px solid rgba(96,73,31,.18) !important; box-shadow: none !important; } .hb-content table.TableContent { width: 100% !important; max-width: 100% !important; background: #100b0c !important; color: #d8d0cb !important; border-collapse: collapse !important; } /* Wszystkie wiersze - usunięcie starego Tibia/MyAAC tła */ .hb-content .TableContent tr, .hb-content .TableContent tr[bgcolor] { background: #100b0c !important; } .hb-content .TableContent tr:nth-child(even), .hb-content .TableContent tr:nth-child(odd) { background: #100b0c !important; } /* Komórki */ .hb-content .TableContent td, .hb-content .TableContent th { background: #100b0c !important; color: #d8d0cb !important; border-color: rgba(96,73,31,.22) !important; } /* Etykiety: Name, Level, Vocation itd. */ .hb-content .TableContent .LabelV175, .hb-content .TableContent .LabelV { background: #12090b !important; color: #c99f52 !important; font-weight: bold !important; } /* Hover */ .hb-content .TableContent tr:hover td { background: #180b0d !important; } /* Nagłówki Character Information / Account Information itd. */ .hb-content .TableContainer .CaptionContainer { background: linear-gradient( 180deg, #1b1209 0%, #0d0906 100% ) !important; border-color: rgba(128,96,47,.25) !important; box-shadow: none !important; } .hb-content .TableContainer .CaptionContainer .Text { color: #c99f52 !important; font-family: Georgia, serif !important; font-size: 17px !important; font-weight: bold !important; text-shadow: 0 1px 2px #000 !important; } /* Linki na stronie postaci */ .hb-content .TableContent a { color: #d6a84a !important; } .hb-content .TableContent a:hover { color: #fff0b0 !important; } /* Obrazki nie mogą rozszerzać strony */ .hb-content .TableContent img { max-width: 100% !important; height: auto; } /* ========================================= CHARACTER DETAILS ========================================= */ .hb-content .TableContainer .progress { background: #211719 !important; border: 1px solid #3d2920 !important; border-radius: 2px !important; overflow: hidden !important; } .hb-content .TableContainer .progress-bar { border-radius: 0 !important; } /* Ekwipunek */ .hb-content .TableContent table[style*="background: #292929"] { background: #0b0909 !important; } .hb-content .TableContent table[style*="background: #292929"] td { background: #0b0909 !important; border-color: #493b2a !important; } /* ========================================= MOBILE ========================================= */ @media (max-width: 700px) { .hb-content .TableContainer { width: 100% !important; overflow-x: hidden !important; } .hb-content .TableContainer .Table3, .hb-content .TableContainer .Table4, .hb-content .TableContainer .Table5 { width: 100% !important; table-layout: auto !important; } .hb-content .TableContent { table-layout: auto !important; } .hb-content .TableContent td { padding: 8px 7px !important; font-size: 13px !important; } .hb-content .TableContent .LabelV175 { width: 32% !important; min-width: 90px !important; white-space: normal !important; } /* Character Details przechodzi pionowo */ .hb-content .TableContainer .Table3 > tbody > tr > td { width: auto !important; } /* Umiejętności nie wypychają ekranu */ .hb-content .TableContent { max-width: 100% !important; overflow: hidden !important; } .hb-content .TableContent img { max-width: 64px !important; } }