body { -webkit-touch-callout: none; /* iOS Safari */ -webkit-user-select: none; /* Safari */ -khtml-user-select: none; /* Konqueror HTML */ -moz-user-select: none; /* Old versions of Firefox */ -ms-user-select: none; /* Internet Explorer/Edge */ user-select: none; } /***********[ SITE MENU ]****************************************/ #wpadminbar { z-index: 9999999 !important; } #main-header { z-index: 99999 !important; position: relative; } #main-header .bde-menu { padding-left: env( safe-area-inset-left ); padding-right: env( safe-area-inset-right ); width: 100%; } #main-header .bde-div { padding-right: 6px; } #main-header .home-menu-link .icon { display: none; width: 38px; position: absolute; top: 50%; margin-top: -19px; left: 10px; } #header-menu { display: flex; gap: 14px; align-items: center; min-height: 60px; overflow: visible; } .blur-background:before, #header-menu .dropdown:before { content: ''; position: absolute; right: 0; bottom: 0; left: 0; top: 0; -webkit-backdrop-filter: blur( 30px ); backdrop-filter: blur( 30px ); z-index: -1; } #header-menu .divider:after { content: '\203A'; margin: 0 10px; } #header-menu .divider.none:after { content: '' !important; margin: 0 10px; } #header-menu small { display: block; line-height: .8em; opacity: .6; font-size: .7em; } #header-menu a { color: #fff; display: block; } #header-menu a.inline { display: inline-block !important; } #header-menu a:hover { color: #FFEEA6; } #header-menu a svg { color: #fff; fill: #fff; } #header-menu a:hover svg { color: #FFEEA6; fill: #FFEEA6; } #header-menu a.indicator { position: relative; padding-right: 1.2em; } #header-menu a.indicator:after { content: ''; position: absolute; right: .1em; top: calc( 50% - .4em ); display: block; height: .8em; width: .8em; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23FFF' d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'/%3E%3C/svg%3E"); background-position: center right; background-repeat: no-repeat; background-size: 85% } #header-menu a.indicator:hover:after { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 512 512'%3E%3Cpath fill='%23FFEEA6' d='M320 0c-17.7 0-32 14.3-32 32s14.3 32 32 32h82.7L201.4 265.4c-12.5 12.5-12.5 32.8 0 45.3s32.8 12.5 45.3 0L448 109.3V192c0 17.7 14.3 32 32 32s32-14.3 32-32V32c0-17.7-14.3-32-32-32H320zM80 32C35.8 32 0 67.8 0 112V432c0 44.2 35.8 80 80 80H400c44.2 0 80-35.8 80-80V320c0-17.7-14.3-32-32-32s-32 14.3-32 32V432c0 8.8-7.2 16-16 16H80c-8.8 0-16-7.2-16-16V112c0-8.8 7.2-16 16-16H192c17.7 0 32-14.3 32-32s-14.3-32-32-32H80z'/%3E%3C/svg%3E"); } #header-menu .has-dropdown { position: relative; align-items: center; align-self: stretch; } #header-menu .has-dropdown > a { display: flex; flex-direction: column; justify-content: center; height: 100%; } #header-menu .has-dropdown > div.inner { height: 100%; align-content: center; } #header-menu .dropdown { display: none; line-height: 1.2em; top: 100%; position: absolute; background: #aaa6; border-radius: 0 0 10px 10px; overflow: hidden; left: -15px; min-width: max( calc( 100% + 30px ), 180px ); vertical-align: bottom; box-shadow: 0 5px 15px #0003; } #header-menu .dropdown .row { padding: 4px 15px 12px; } #header-menu .dropdown .row:not( :last-of-type ) { box-shadow: 0 1px 0 #fff1, inset 0 -1px 0 #1c335d66; } #header-menu .dropdown small { margin-top: 10px; margin-bottom: 2px; color: #ffffff99; font-size: .6em; } #header-menu .job-badge { height: 21px; position: relative; top: 4px; } #header-menu .alt-badge { height: 19px; position: relative; top: 3px; } #header-menu .badge-rank { background: #00000080; height: 10px; font-size: 10px; line-height: 10px; padding: 1px 6px 2px; border-radius: 100px; box-shadow: inset 0 -1px 0 #ffffff4D; position: relative; left: -1px; color: #ffffffE0; margin-right: 10px; } #header-menu .rank-badge { height: 26px; position: relative; top: 4px; margin: 0 6px 0 0; } #header-menu .far-right { flex: 1; text-align: right; } #header-menu .far-right > span { position: relative; top: -4px; } #header-menu .far-right .badge-rank { margin-right: 0; } .discord { padding: 5px; transition: box-shadow .13s ease-out; background: linear-gradient( to bottom, #7780F8, #5763F6 ); height: 32px !important; width: 32px !important; border-radius: 45px; margin-top: -40px; margin-left: -8px; top: 8px !important; right: auto !important; box-shadow: inset 0 0 0px #cFf8fE00, 0 3px 4px #0006; } .discord:hover { box-shadow: inset 0 0 3px #cFf8fEff, 0 3px 4px #0006; } .wp-block-social-links { display: none; } @media( max-width: 900px ) { #header-menu a.home-menu-link { width: 13px; } #header-menu a.home-menu-link .icon { display: block; } #header-menu a.home-menu-link .text { display: none; } } @media( max-width: 800px ) { .discord { top: 3px !important; } #header-menu .far-right { flex: 0 1; margin-left: 0; position: relative; top: -3px; } #header-menu .inner > span, #header-menu .far-right > span { margin-left: 10px; display: inline-flex; flex-direction: column; justify-content: content; } #header-menu .far-right { margin-left: 0px; display: inline-flex; flex-direction: row; justify-content: center; align-items: center; } #header-menu .far-right > span { margin-left: 0; } #header-menu .inner > span .badge-rank, #header-menu .far-right .badge-rank { margin-right: 0; top: 0; left: 0; padding: 2px 6px 12px; margin-top: 2px; } #header-menu .inner > span .alt-badge, #header-menu .inner > span .job-badge, #header-menu .far-right .alt-badge { height: 18px; width: 18px; margin: auto; position: relative; top: 0px; } #header-menu .inner .rank-badge { display: none; } #header-menu .divider:after { margin: 0; } } @media( max-width: 600px ) { #header-menu .has-dropdown { position: initial; } #header-menu .has-dropdown .inner { display: none; } #header-menu .dropdown { z-index: 99999; box-shadow: none; overflow-y: scroll; border-radius: 10px 0 0 10px; position: fixed; left: 5px; top: 5px; bottom: 5px; width: calc( 50% - 6px ); min-width: 10px; } #header-menu .dropdown:nth-of-type( 2 ) { left: 50%; border-radius: 0 10px 10px 0; } #header-menu .dropdown:before { display: none; } #header-menu .far-right { left: -15px; } #header-menu a.indicator { padding-right: 0; } #header-menu a.indicator:after { display: none; } #ff_curtain { display: none; pointer-events: none; position: fixed; z-index: 99; top: 0; right: 0; bottom: 0; left: 0; -webkit-backdrop-filter: blur( 30px ); backdrop-filter: blur( 30px ); } } @media( max-width: 400px ) { .no-mobile { display: none !important; } .discord { right: -13px !important; } #header-menu .far-right { flex: 1; margin-left: 0; position: relative; top: 1px; justify-content: right; } #header-menu .divider:not( :nth-of-type( 1 ) ) { display: none; } #header-menu .dropdown .row { font-size: 14px; } #header-menu .indicator { font-size: 16px; } #header-menu .dropdown .row small { font-size: .8em; } } /***********[ CHARACTER DISPLAY ]********************************/ :root { --icon-size: clamp( 48px, 5.5vw, 62px ); } .character-section { max-width: 1120px !important; margin: auto; } #character-display { padding-left: env( safe-area-inset-left ); padding-right: env( safe-area-inset-right ); text-align: center; padding-top: 60px; position: relative; width: 100%; height: 585px; background: #1c335d; background-position: calc( 50% - 22px ) 18px, center top !important; background-repeat: no-repeat, no-repeat !important; background-size: 350px, 1100px !important; } #character-display img.character { width: 384px; position: absolute; left: calc( 50% - 192px ); padding-bottom: 60px; } #character-display .mask { position: absolute; top: 0; right: 0; bottom: -61px; left: 0; } #character-display .section-container { max-width: 1120px; width: 100%; height: 100%; box-shadow: inset 325px 0 175px -100px #1c335d, inset -325px 0 175px -100px #1c335d, 325px 0 0px #1c335d, -325px 0 0px #1c335d; } .character-tri-display { height: 100%; width: 100%; max-width: 100%; cursor: default !important; } .character-tri-display .flickity-viewport { /*overflow: visible !important;*/ height: 100% !important; } .character-tri-display .panel { height: 100%; display: flex; align-items: center; } .character-tri-display .weapon-display { width: 290px; } .character-tri-display .gear-display { width: 520px; padding: 0 50px; } .character-tri-display .stat-display { width: 290px; } .character-tri-display .panel:hover { z-index: 9; } .stat-display { list-style: none; padding: 0; } .stat-display > li { position: relative; break-inside: avoid-column; text-align: center; display: flex; align-items: center; justify-content: center; margin-bottom: 6px; } .stat-display li > span { display: flex; align-items: center; justify-content: center; } .stat-display li > span > small { display: inline-block; width: 75px; text-align: left; font-size: 10px; color: #fffa; margin-top: 0px; margin-bottom: -2px; line-height: 1em; margin-left: 10px; } .stat-display.secondary li { width: 49%; display: inline-block; } .stat-display.secondary li > span { display: inline; margin-left: -4px; position: relative; top: -2px; } .stat-display.primary { padding-bottom: 15px; position: relative; background: radial-gradient(#5998db66 20%,transparent 70%) no-repeat center calc(100% + 280px); background-size: 90% 400px; box-shadow: 0 50px 15px -50px #0006; } .stat-display.primary:after { content: ''; display: block; height: 1px; width: 100%; background: linear-gradient( 90deg, transparent 0%, #5eaae0 35%, #5eaae0 65%, transparent 100% ) no-repeat center center; background-size: 100% 1px; position: absolute; bottom: 0; } .stat-display.primary li:not( :last-of-type ):after { content: '\203A'; writing-mode: vertical-rl; position: absolute; bottom: -6px; } .stat-display li span { position: relative; } xxx.panel.weapon-display .stat-display .popup { left: 20px; top: -30px; } xxx.stat-display.secondary .popup { top: -20px; } xxx.stat-display li:hover .popup { opacity: 1; left: 10px; z-index: 10; } xxx.stat-display .popup small { margin-top: -3px; font-size: 14px; } .weapon-display.right { text-align: center; display: flex; justify-content: center; margin-top: 45px; } .weapon-display.right li { width: 78px; display: flex; flex-direction: column; } .weapon-display.right li > span > small { font-size: 10px; background: #4C89BF; width: auto; padding: 4px 8px 3px; border-radius: 100px; box-shadow: 0 4px 6px #0003; color: #fff; margin-top: -14px; display: block; position: relative; left: -6px; } .weapon-display.right .ring { height: 65px; width: 65px; border: 6px solid #5FA8DE; border-radius: 100px; display: flex; align-items: center; justify-content: center; margin: 0 !important; box-shadow: 0 0 12px #73D4E5; } .character-panel:first-of-type { padding-top: 0 !important; padding-bottom: 0 !important; padding-right: 45px !important; } .class-stat-link { transition: all 0.16s ease-in-out; background: #4c89bf; text-decoration: none; color: #fff !important; font-size: 10px; padding: 2px 6px 1px; border-radius: 100px; box-shadow: 0 2px 2px #0006; position: absolute; left: 50%; transform: translateX( -50% ); bottom: -7px; } .class-stat-link:hover { background: #5ea9e0; } .class-stat-link:after { content: ''; display: inline-block; height: 10px; width: 10px; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJz48cGF0aCBmaWxsPScjZmZmJyBkPSdNMzIwIDBjLTE3LjcgMC0zMiAxNC4zLTMyIDMyczE0LjMgMzIgMzIgMzJoODIuN0wyMDEuNCAyNjUuNGMtMTIuNSAxMi41LTEyLjUgMzIuOCAwIDQ1LjNzMzIuOCAxMi41IDQ1LjMgMEw0NDggMTA5LjNWMTkyYzAgMTcuNyAxNC4zIDMyIDMyIDMyczMyLTE0LjMgMzItMzJWMzJjMC0xNy43LTE0LjMtMzItMzItMzJIMzIwek04MCAzMkMzNS44IDMyIDAgNjcuOCAwIDExMlY0MzJjMCA0NC4yIDM1LjggODAgODAgODBINDAwYzQ0LjIgMCA4MC0zNS44IDgwLTgwVjMyMGMwLTE3LjctMTQuMy0zMi0zMi0zMnMtMzIgMTQuMy0zMiAzMlY0MzJjMCA4LjgtNy4yIDE2LTE2IDE2SDgwYy04LjggMC0xNi03LjItMTYtMTZWMTEyYzAtOC44IDcuMi0xNiAxNi0xNkgxOTJjMTcuNyAwIDMyLTE0LjMgMzItMzJzLTE0LjMtMzItMzItMzJIODB6Jy8+PC9zdmc+"); margin-left: 3px; position: relative; top: 1px; } .panel.stat-display a { text-decoration: none; } .flickity-page-dots { display: none; } @media( max-width: 1160px ) { .flickity-page-dots { display: block; width: auto !important; left: 50%; transform: translateX( -50% ); background-size: #0003; padding: 3px 4px 5px 4px !important; border-radius: 200px; -webkit-backdrop-filter: blur( 30px ); backdrop-filter: blur( 30px ); box-shadow: inset 0 0 0 1px #fff3, 0 4px 8px #0003; bottom: 16px !important; } .flickity-page-dots .dot { background: #fff !important; opacity: .3 !important; } .flickity-page-dots .dot.is-selected { opacity: 1 !important; } .character-tri-display .panel { width: 100%; } .character-tri-display .gear-display ul, .character-tri-display .panel > div { margin: auto; } .character-tri-display .panel.stat-display > div { width: 80%; } .character-tri-display .panel:nth-of-type( 1 ):after, .character-tri-display .panel:nth-of-type( 3 ):after { background: #1C335E80; content: ''; display: block; -webkit-backdrop-filter: blur( 30px ); backdrop-filter: blur( 30px ); position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: -1; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .character-tri-display .panel:nth-of-type( 1 ):after { -webkit-mask: linear-gradient( to right, #000 0%, #000 60%, #0000 ); mask: linear-gradient( to right, #000 0%, #000 60%, #0000 ); } .character-tri-display .panel:nth-of-type( 3 ):after { -webkit-mask: linear-gradient( to left, #000 0%, #000 60%, #0000 ); mask: linear-gradient( to left, #000 0%, #000 60%, #0000 ); } } @media( max-width: 800px ) { #character-display .section-container { box-shadow: inset 275px 0 175px -100px #1c335d, inset -275px 0 175px -100px #1c335d; } } @media( max-width: 600px ) { #character-display .section-container { box-shadow: inset 175px 0 175px -100px #1c335d, inset -175px 0 175px -100px #1c335d; } .mount-category { padding-left: 12px !important; } .character-tri-display .panel:nth-of-type( 1 ):after { -webkit-mask: linear-gradient( to right, #000 0%, #000 80%, #0000 ); mask: linear-gradient( to right, #000 0%, #000 80%, #0000 ); } .character-tri-display .panel:nth-of-type( 3 ):after { -webkit-mask: linear-gradient( to left, #000 0%, #000 80%, #0000 ); mask: linear-gradient( to left, #000 0%, #000 80%, #0000 ); } } @media( max-width: 400px ) { #character-display { overflow: hidden; } #character-display img.character { max-width: 384px; } } .power-display { float: left; } .radarChart { display: flex; justify-content: center; margin: 55px 40px 0 0; width: 290px; max-width: 290px; } .radarChart .tooltip { display: none !important; } .radarChart .legend tspan { font-size: 16px; fill: #fff !important } .radarChart .legend tspan:first-of-type { font-size: 11px; fill: #fffa !important; display: block; } .gridCircle { fill: rgba( 255,255,255,0.15 ) !important; stroke: rgba( 255,255,255,0.15 ) !important; fill-opacity: 0.08 !important; } .axisLabel { display: none; } .axis line { stroke: rgba( 255,255,255,0.05 ) !important; } /***********[ MAIN TAB BAR ]*************************************/ .main-bar { padding-left: env( safe-area-inset-left ); padding-right: env( safe-area-inset-right ); width: 100%; } .main-bar .character-section { padding: 0; } .main-bar small { margin-bottom: 14px; } .main-bar .tabs { scrollbar-width: none; margin-top: 14px; display: flex; gap: 8px; overflow-x: scroll; white-space: nowrap; text-align: center; margin-bottom: 14px; padding: 6px; } .main-bar .tabs::-webkit-scrollbar { display: none; } .main-bar .tabs li { padding: 0 !important; width: clamp( 85px, 30vw, 145px ); min-width: clamp( 85px, 30vw, 145px ); height: auto; position: relative; display: inline-block; } .main-bar .tabs li.selectable { cursor: pointer; transition: all 0.3s ease-in-out; background: #fff0; border-radius: 20px; } .main-bar .tabs li.selectable:not( .active ):hover { box-shadow: inset 0 0 10px #fff5; } .main-bar .tabs li.active { background: #fff1; box-shadow: inset 0 0 10px #fff2, 0 0 0 1px #fff3, 0 0 10px #000; } .main-bar .tabs li img { position: relative; z-index: 1; width: clamp( 85px, 30vw, 145px ); min-width: clamp( 85px, 30vw, 145px ); margin-bottom: 20px; } .main-bar .tabs li .count { text-transform: capitalize; position: absolute; white-space: nowrap; bottom: 19px; left: 50%; transform: translateX( -50% ); } /***********[ MOUNT DISPLAY ]************************************/ .mount-collection { padding-left: env( safe-area-inset-left ); padding-right: env( safe-area-inset-right ); background: #353d33; width: 100%; padding-bottom: 3em; box-shadow: inset 0 -1px 0 #fff1; } /*#453C2B*/ .mount-collection.minions { background: #30383f; } .mount-collection.jobs { background: #383838; } .mount-collection.unlock { background: #262626; } .mount-collection.jobs .img-container span { position: absolute; bottom: -8px; left: 0; right: 0; display: flex; align-items: center; justify-content: center; } .mount-collection.jobs .img-container small { background: #9A895B; padding: 2px 5px; border-radius: 50px; color: #fff; box-shadow: 0 4px 6px #0006, inset 0 1px 0 #fff6; } .quest-icon { display: inline-block; height: 18px !important; width: 18px !important; position: relative; top: 5px; } .maybe-line { position: relative; display: block; } .maybe-line + .maybe-line { padding-top: 16px; width: 100%; display: block; } .maybe-line + .maybe-line:before { content: ''; position: relative; top: -13px; left: -16px; display: block; width: calc( 100% + 32px ); border-top: 1px solid #1c1c1c !important; box-shadow: 0 1px #5b5b5b; } .todo-list { display: flex; flex-direction: column-reverse; } .todo-list .level-text { width: 60px; text-align: center; display: block; margin-bottom: 14px; } .todo-list .todo-level { margin-top: 45px; } .todo-list .todo-level .mount-list { margin-bottom: 14px; } .todo-list .todo-level .inline { display: flex !important; gap: 25px; } .todo-list .todo-level .inline .img-container { height: 62px; width: 62px; } .todo-list .todo-level .inline .desc { display: flex; flex-direction: column; justify-content: center; margin-top: -5px; } .todo-list .todo-level .inline .desc strong { color: #fff; font-size: 17px; display: block; } .todo-list .todo-level .inline .desc span { color: #fff9; font-size: 14px; } .todo-list .todo-level .inline .desc .unlocks { display: inline-block; } .todo-list .todo-level .inline .desc .unlocks .mount-icon { height: 24px; width: 24px; } .todo-list .todo-level .inline .desc .unlocks img { height: 24px; width: 24px !important; border-radius: 6px; margin-top: 10px; } .tab-content { width: 100vw; opacity: 0; } .tab-content.primed { opacity: 1; display: none; } /***********[ FORM ELEMENTS ]************************************/ label { display: block; } label:first-of-type { margin-top: 15px; } label span.required { color: transparent; display: inline-block; width: 20px; height: 20px; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzODQgNTEyJz48cGF0aCBmaWxsPScjZmZmJyBkPSdNMTkyIDMyYzE3LjcgMCAzMiAxNC4zIDMyIDMyVjE5OS41bDExMS41LTY2LjljMTUuMi05LjEgMzQuOC00LjIgNDMuOSAxMXM0LjIgMzQuOC0xMSA0My45TDI1NC4yIDI1NmwxMTQuMyA2OC42YzE1LjIgOS4xIDIwLjEgMjguNyAxMSA0My45cy0yOC43IDIwLjEtNDMuOSAxMUwyMjQgMzEyLjVWNDQ4YzAgMTcuNy0xNC4zIDMyLTMyIDMycy0zMi0xNC4zLTMyLTMyVjMxMi41TDQ4LjUgMzc5LjRjLTE1LjIgOS4xLTM0LjggNC4yLTQzLjktMTFzLTQuMi0zNC44IDExLTQzLjlMMTI5LjggMjU2IDE1LjUgMTg3LjRjLTE1LjItOS4xLTIwLjEtMjguNy0xMS00My45czI4LjctMjAuMSA0My45LTExTDE2MCAxOTkuNVY2NGMwLTE3LjcgMTQuMy0zMiAzMi0zMnonLz48L3N2Zz4="); background-repeat: no-repeat; background-size: 8px; background-position: 2px 1px; } .form-control { border-radius: 0; margin: 0 0 25px 0; padding: 8px; position: relative; top: 2px; background: var( --bde-palette-color-3 ); border: 1px solid var( --bde-palette-color-2 ); color: var( --bde-palette-color-1 ); width: 500px; max-width: calc( 100% - 35px ); } select.form-control { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzMjAgNTEyJz48cGF0aCBmaWxsPScjZmZlZWE2JyBkPSdNMTM3LjQgMzc0LjZjMTIuNSAxMi41IDMyLjggMTIuNSA0NS4zIDBsMTI4LTEyOGM5LjItOS4yIDExLjktMjIuOSA2LjktMzQuOXMtMTYuNi0xOS44LTI5LjYtMTkuOEwzMiAxOTJjLTEyLjkgMC0yNC42IDcuOC0yOS42IDE5LjhzLTIuMiAyNS43IDYuOSAzNC45bDEyOCAxMjh6Jy8+PC9zdmc+"); background-repeat: no-repeat; background-position: calc( 100% - 12px ) 9px; background-size: 11px; } input[type="submit"] { margin-top: 8px !important; } .button-atom { transition: all 0.1s ease-in-out !important; text-shadow: 0 -1px #a7874a !important; box-shadow: inset 10px 0 10px -10px #c9a365, inset -10px 0 10px -10px #c9a365, inset 0 1px 1px #fffcbb, 0 2px 2px #000; } .button-atom:hover { box-shadow: inset 20px 0 10px -10px #dbbc8a, inset -20px 0 10px -10px #dbbc8a, inset 0 1px 1px #fffcbb, 0 2px 2px #000; } /***********[ MODAL ELEMENTS ]***********************************/ .modal { opacity: 0; pointer-events: none; transition: all 0.26s ease-in-out; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: #0006; -webkit-backdrop-filter: blur( 3px ); backdrop-filter: blur( 3px ); } .modal.open { opacity: 1; pointer-events: all; } .modal-dialog { width: 100%; max-width: 600px; margin: min( 160px, 20vh ) auto; position: relative; top: -60px; transition: all 0.38s ease-in-out; } .modal.open .modal-dialog { top: 0; } .box-outer-edge { background: #a5966b; padding: 4px; border-radius: 15px; box-shadow: inset 0 1px 1px #f3f3c4, inset -1px 0 1px #635331, inset 0 -1px 1px #2a1c14, 0 0 0 1px #000, 0 3px 5px rgba( 0,0,0,.8 ); } .box-inner-content { padding: 8px; background: #313131; border-radius: 12px; box-shadow: inset 0 100px 100px -100px #666, inset 0 0 6px 0 #555, inset 0 1px 0px #aea79d, 0 0 0 1px #000, 0 -1px 1px 1px #423334, -2px 0 1px #6b5539, 0 2px 0 #b5be9c; position: relative; } .box-header { padding: 5px 1rem 3px; border-bottom: 1px solid #1c1c1c !important; box-shadow: 0 1px #5b5b5b; min-height: 30px; } .box-header h4 { font-size: 24px; } a .box-header { border-bottom: 1px solid #1c1c1c !important; } .box-header .close { transition: all 0.14s ease-in-out; font-size: 28px; background: none; border: none; color: #1c1c1c; text-shadow: 0 2px #5b5b5b; position: absolute; top: 0px; right: 10px; } .box-header .close:hover { color: var( --bde-links-color-hover ); text-shadow: 0 2px #1c1c1c; cursor: pointer; } .box-content { padding: 10px 1rem 3px; min-height: 30px; } .modal-content .modal-loading { text-align: center; } .modal-content .modal-loading img { width: 100px; margin: 2em 0 0; padding-left: 50px; box-sizing: content-box; } .modal-content .modal-loading h2 { font-size: 30px; color: rgba( 255,255,255,.5 ); text-shadow: 0 -1px #000; margin-top: 0; } .modal-content .modal-loading #achieve-skipped { display: none; background: rgba( 230,100,0,.3 ); position: absolute; left: 0; right: 0; bottom: 0; padding: 5px 20px; font-size: 13px; box-shadow: inset 0 1px 0 #fff3; border-radius: 0 0 11px 11px; } .modal-content .modal-loading #import-status { display: none; margin-bottom: 12px; } .modal-content .modal-loading #import-status span { font-size: 12px; display: block; color: #fff6; font-weight: 600; font-family: Quicksand, sans-serif; } .modal-content .modal-loading .show_progress, #loading_overlay .show_progress { position: relative; } .modal-content .modal-loading .show_progress, #loading_overlay .show_progress { width: 200px; position: relative; border: 1px solid #4b4b4b; height: 6px; border-radius: 100px; box-shadow: inset 0 1px 1px #000; display: block; margin: auto; margin: 7px auto 12px; } .modal-content .modal-loading .show_progress .bar, #loading_overlay .show_progress .bar { transition: width 0.86s ease-in-out; width: 0%; left: -1px; top: -1px; height: 6px; position: absolute; background: #367c3e; border-color: #439a58; box-shadow: inset -35px 0 20px -20px #67e285; border-radius: 20px; } #loading_overlay .show_progress .bar { transition: width 0.0s ease-in-out !important; } #loading_overlay { transition: opacity 0.6s ease-in-out; opacity: 1; position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 99999; display: flex; justify-content: center; align-items: center; flex-direction: column; backdrop-filter: grayscale( .3 ) brightness( .4 ) blur( 40px ); } #loading_overlay img { width: 100px; margin-left: 45px; margin-bottom: 15px; } #loading_overlay.hide { pointer-events: none; opacity: 0; } #loading_phrase { font-size: 12px; font-style: italic; opacity: .4; padding: 0 1em; max-width: 220px; text-align: center; } .modal-content .modal-data a { text-decoration: none; } .modal-content .modal-data h3 { margin: 0; } .modal-content .modal-data .modal-message { padding: 25px 15px 0; color: rgba( 255,255,255,.8 ); } .modal-content .modal-data .modal-message strong { color: #fff; } .modal-content .modal-data .character-select { margin-top: 6px; background: var( --bde-palette-color-3 ); border: 1px solid var( --bde-palette-color-2 ); padding: 5px; } .modal-content .modal-data a:last-of-type .character-select { border-radius: 0 0 5px 5px; } .modal-content .modal-data a:hover .character-select { border: 1px solid var( --bde-palette-color-1 ); } .modal-content .modal-data .character-select img { width: 65px; float: left; margin-right: 15px; } .modal-content .modal-data .character-select p { margin: 0 0 5px; color: var( --bde-palette-color-2 ); } .modal-content .modal-data .character-select h3 { margin: 0px 0 -5px; } xxx.popup { opacity: 0; pointer-events: none; transition: all 0.32s ease-in-out; position: absolute !important; min-width: 365px; text-align: left; top: -20px; } #cursor_popup_holder .box-outer-edge:nth-child( 2 ) { margin-top: -15px; border-radius: 0 0 15px 15px; z-index: -1; position: absolute; left: 5px; width: 430px; } #cursor_popup_holder .box-outer-edge:nth-child( 2 ) .box-inner-content { padding-top: 8px !important; padding-bottom: 10px !important; background: #444; text-align: center; } #cursor_popup_holder .box-outer-edge:nth-child( 2 ) .box-inner-content strong { color: #fff; } xxx.gear-icon-slot:hover .popup { display: block; opacity: 1; } .gear-slot:hover { z-index: 10; } .gear-icon-slot:hover .gear-icon { z-index: 15; } #cursor_popup_holder .info-box { margin-top: 14px !important; background: #0003; box-shadow: inset 0 0 6px #0009; border-radius: 9px; width: calc( 100% + 10px ); padding: 5px 15px; } #cursor_popup_holder .info-box.important { background: #1769e534; box-shadow: inset 0 0 6px #2471e766; border: 1px solid #ecebbd; } .trendup, .trenddown, .trendflat { width: 1em; position: relative; top: 7px; } .trendup { fill: #ec5151; } .trendflat { fill: #aea58c; top: 2px; margin-top: 6px; } .trenddown { fill: #5dec52; top: 4px; } #cursor_popup_holder .box-header h4 { margin: 0 0 8px 0 !important; } #cursor_popup_holder .half { display: inline-block; width: calc( 50% - 11px ); margin: 0 8px 0 0; } #cursor_popup_holder .half:nth-of-type( 2n ) { margin: 0 0 0 8px; } #cursor_popup_holder small { display: block; width: 100%; font-size: 0.6em; color: rgba(255,255,255,.6); position: relative; top: 4px; } .popup_materia_slots { padding: 0; list-style: none; } .popup_materia_slots .slot { display: inline-block; overflow: hidden; border-radius: 100%; width: 21px; height: 21px; box-shadow: 0 -1px 0 1px #1c1c1c, 0 1px 0 1px #5b5b5b; position: relative; top: 4px; margin-right: 8px; } #cursor_popup_holder .dye { display: inline-block; height: 21px; width: 21px; border-radius: 100%; box-shadow: 0 -1px 0 1px #1c1c1c, 0 1px 0 1px #5b5b5b; position: relative; top: 3px; margin: 3px 8px 0 0; } #cursor_popup_holder .glam { float: left; height: 21px; width: 21px; border-radius: 2px; overflow: hidden; box-shadow: 0 1px 0 1.4px #1c1c1c; position: relative; top: 2px; margin-right: 8px; } #cursor_popup_holder .glam ~ small { margin-top: 6px; } #cursor_popup_holder .attribute { break-inside: avoid-column; } #cursor_popup_holder .popup_materia_slots { padding-left: 0 !important; } .gear-display > ul { list-style: none; margin: 0; padding: 18px 0 0 0; } .gear-display > ul > li { width: calc( 50% - 4px ); display: inline-block; position: relative; padding-bottom: 22px; } .gear-display > ul > li:nth-of-type( 2n ) { float: right; text-align: right; } .gear-icon-slot { display: inline-block; position: relative; } .mirage-slot { display: inline-block; position: relative; } .gear-icon.mirage { width: 45px; height: 45px; } .gear-icon { border-radius: 8px; border: 1px solid #fff; width: 55px; height: 55px; overflow: hidden; } .gear-slot { transition: opacity ease-in-out 0.24s; opacity: 1; } .gear-slot div { position: relative; z-index: 1; } .gear-slot.empty { height: 55px; } .dye_color, .dye_color.secondary { transition: all ease-in-out .24s; display: block; height: 0; width: 0; border: 21px solid transparent; transform: rotate( 45deg ); position: absolute; z-index: 3; top: -29px; right: -30px; } .dye_color.secondary { z-index: 2; top: -27px; right: -26px; } .materia_slots { transition: opacity ease-in-out .24s; opacity: 1; width: 60px; margin-left: -2.5px; padding: 0; position: absolute; bottom: -10px; left: 0; right: 0; text-align: center; z-index: 20; } .materia_slots li { margin: 0 -1px 0 -2px; height: 10px; width: 10px; display: inline-block; background: #000; border-radius: 10px; border: 1px solid #fff; } .slot-rarity-0 .gear-icon { border-color: #8c867b; } .slot-rarity-0 .dye_color { box-shadow: 0 0 0 1px #8c867b; } .slot-rarity-0 .materia_slots li { background: #474742; border-color: #8c867b; } .slot-rarity-0 .materia_slots li.has-materia { background: #8c867b; box-shadow: inset 0 0 0 2px #474742; } .slot-rarity-1 .gear-icon { border-color: #8c867b; } .slot-rarity-1 .dye_color { box-shadow: 0 0 0 1px #8c867b; } .slot-rarity-1 .materia_slots li { background: #474742; border-color: #8c867b; } .slot-rarity-1 .materia_slots li.has-materia { background: #b4ad9d; box-shadow: inset 0 0 0 2px #474742; } .slot-rarity-2 .gear-icon { border-color: #4a8665; box-shadow: 0 1px 5px rgba(54, 209, 137, .5); } .slot-rarity-2 .dye_color { box-shadow: 0 0 0 1px #4a8665; } .slot-rarity-2 .materia_slots li { background: #3a3a3a; border-color: #4a8665; box-shadow: 0 0px 3px rgba(54, 209, 137, .4); } .slot-rarity-2 .materia_slots li.has-materia { background: #2ecf84; box-shadow: 0 1px 2px rgba(54, 209, 137, .5), inset 0 0 0 2px #3a3a3a; } .slot-rarity-3 .gear-icon { border-color: #67aacf; box-shadow: 0 0 6px rgba(103, 170, 207, .6); } .slot-rarity-3 .dye_color { box-shadow: 0 0 0 1px #67aacf; } .slot-rarity-3 .materia_slots li { background: #152c6b; border-color: #67aacf; box-shadow: 0 0 6px rgba(103, 170, 207, .6); } .slot-rarity-3 .materia_slots li.has-materia { background: #67aacf; box-shadow: 0 0 6px rgba(103, 170, 207, .6), inset 0 0 0 2px #152c6b; } .slot-rarity-4 .gear-icon { border-color: #a046c7; box-shadow: 0 0 6px #7b4ca5; } .slot-rarity-4 .dye_color { box-shadow: 0 0 0 1px #a046c7; } .slot-rarity-4 .materia_slots li { background: #39265a; border-color: #a046c7; box-shadow: 0 2px 4px #7b4ca5; } .slot-rarity-4 .materia_slots li.has-materia { background: #a046c7; box-shadow: 0 0 6px #7b4ca5, inset 0 0 0 2px #39265a; } .slot-rarity-7 .gear-icon { border-color: #ffbaca; box-shadow: 0 0 6px #7b4ca5; } .slot-rarity-7 .dye_color { box-shadow: 0 0 0 1px #a046c7; } .slot-rarity-7 .materia_slots li { background: #39265a; border-color: #ff99b0; box-shadow: 0 2px 4px #7b4ca5; } .slot-rarity-7 .materia_slots li.has-materia { background: #ff99b0; box-shadow: 0 0 6px #7b4ca5, inset 0 0 0 2px #39265a; } xxx.gear-display > ul > li:nth-of-type( 2n - 1 ) .popup { left: 75px; } xxx.gear-display > ul > li:nth-of-type( 2n - 1 ) .gear-icon-slot:hover .popup { left: 65px; } xxx.gear-display > ul > li:nth-of-type( 2n ) .popup { right: 75px; } xxx.gear-display > ul > li:nth-of-type( 2n ) .gear-icon-slot:hover .popup { right: 65px; } .gear-display > ul > li:nth-of-type( 1 ) { padding-left: 18px; } .gear-display > ul > li:nth-of-type( 2 ) { padding-right: 18px; } .gear-display > ul > li:nth-of-type( 3 ) { padding-left: 5px; } .gear-display > ul > li:nth-of-type( 4 ) { padding-right: 5px; } .gear-display > ul > li:nth-of-type( 7 ) { padding-left: 5px; } .gear-display > ul > li:nth-of-type( 8 ) { padding-right: 5px; } .gear-display > ul > li:nth-of-type( 9 ) { padding-left: 18px; } .gear-display > ul > li:nth-of-type( 10 ) { padding-right: 18px; } .gear-slot .mirage-slot { position: absolute; top: 0; height: 55px; z-index: 0; opacity: .5; } .gear-display > ul > li:nth-of-type( 1 ) .mirage { top: 16px; left: 18px; } .gear-display > ul > li:nth-of-type( 2 ) .mirage { top: 16px; right: 63px; } .gear-display > ul > li:nth-of-type( 3 ) .mirage { top: 12px; left: 17px; } .gear-display > ul > li:nth-of-type( 4 ) .mirage { top: 12px; right: 62px; } .gear-display > ul > li:nth-of-type( 5 ) .mirage { top: 5px; left: 16px; } .gear-display > ul > li:nth-of-type( 6 ) .mirage { top: 5px; right: 61px; } .gear-display > ul > li:nth-of-type( 7 ) .mirage { top: -2px; left: 17px; } .gear-display > ul > li:nth-of-type( 8 ) .mirage { top: -2px; right: 62px; } .gear-display > ul > li:nth-of-type( 9 ) .mirage { top: -6px; left: 18px; } .gear-display > ul > li:nth-of-type( 10 ) .mirage { top: -6px; right: 63px; } .weapon-display { list-style: none; padding: 0; text-align: center; } .weapon-display .gear-slot { position: relative; display: inline-block; margin: 0 10px; } .weapon-display .gear-slot .mirage { top: 13px; left: -10px; } xxx.weapon-display .popup { left: 75px; } xxx.weapon-display .gear-icon-slot:hover .popup { left: 65px; } small.job-labels { display: block; font-size: 12px; color: #fffa; margin-bottom: 4px; margin-top: 10px; } small.job-labels:first-of-type { margin-top: 0; } .job-icon-box-outer { display: inline-block; height: 30px; width: 30px; padding: 2px; background: #8b7855; border-radius: 8px; box-shadow: inset 0 1px 1px #ffffba, inset 1px 0 1px #4f3114, inset 0 -1px 1px #4f3114, inset -1px 0 1px #4f3114, 0 2px 2px 1px rgba( 0,0,0,.4 ); margin-right: 4px; margin-bottom: 10px; } .job-icon-box-inner { position: relative; height: 26px; width: 26px; padding: 2px; border-radius: 5px; box-shadow: 0 -1px 1px #442409, 1px 0 1px #655525, 0 1px 1px #ffde9d, -1px 0 1px #4f3114, inset 0 1px 3px rgba( 0,0,0,.6 ); } .job-icon-box-inner .job-badge { filter: invert( 1 ); } xxx.job-icon-box-inner .popup { text-align: center; min-width: 280px !important; position: absolute; z-index: 90; right: 46px; } xxx.job-icon-box-inner:hover .popup { right: 36px; opacity: 1; } xxx.popup small { margin-top: -3px; font-size: 14px; } .job_displays { display: inline-block; } .character-panel:last-of-type a { text-decoration: none !important; } .job-icon-box-inner .lock { position: absolute; top: -2px; right: -2px; bottom: -2px; left: -2px; background: #1c335ddd; border-radius: 8px; z-index: 1; } .job-icon-box-inner .lock img { width: 18px; position: relative; bottom: -16px; left: 18px; } .lvl { background: #9a895b; font-size: 8px; width: 16px; display: block; text-align: center; position: absolute; bottom: -6px; border-radius: 6px; box-shadow: 0 1px 0px #000, inset 0 .5px 0 #f6f2b0, inset 0 -.5px 0 #604322; left: 5px; } .gridCircle { fill: rgba( 255,255,255,0.15 ) !important; stroke: rgba( 255,255,255,0.15 ) !important; fill-opacity: 0.08 !important; } tspan { color: #fff !important; fill: #fff !important } .axisLabel { display: none; } .axis line { stroke: rgba( 255,255,255,0.05 ) !important; } .character-section { max-width: var(--bde-section-width); margin: auto; padding: 20px; } .main-bar { background: #3333; -webkit-backdrop-filter: blur( 120px ); backdrop-filter: blur( 120px ); position: relative; z-index: 1; box-shadow: inset 0 -1px 0 #fff2, 0 -1px 0 #fff1, inset 0 40px 40px -35px #0000, inset 0 -20px 30px -15px #0006; } .main-bar small { display: block; width: 100%; text-align: center; padding: 20px; margin-bottom: 15px; border-bottom: 1px solid #fff2; color: #fff9 } .main-bar ul { display: flex; list-style: none; padding: 0; justify-content: center; } .main-bar li { padding: 0px 30px 0px; text-align: center; } .main-bar li h5 { margin: 0; } xxx.main-bar li img { height: 30px; filter: invert( 1 ); } /*.mount-category { box-shadow: inset 0 0 0 18px red !important; }*/ .mount-collection h4 { margin-bottom: 20px; margin-top: 85px; } .mount-list { padding: 9px 0 20px; gap: 1px; display: flex; flex-wrap: wrap; row-gap: 1px; } .mount-list .inline { display: inline-block !important; margin: 0 !important; } .mount-icon { position: relative; width: var( --icon-size ); height: var( --icon-size ); } .mount-list .inline.first.top img { border-top-left-radius: 15px; } .mount-list .inline.last.top img { border-top-right-radius: 15px; } .mount-list .inline.first.bottom img { border-bottom-left-radius: 15px; } .mount-list .inline.last.bottom img { border-bottom-right-radius: 15px; } .mount-icon img { width: var( --icon-size ); height: var( --icon-size ); border-radius: 3px; box-shadow: 0 4px 6px #0006; border: 1px solid #b5aa81; } .mount-collection .mount-icon img { background: linear-gradient( to bottom, #002900, #398446 ); } .mount-collection.minions .mount-icon img { background: linear-gradient( to bottom, #213132, #4AA5C6 ); } xxx.mount-icon .popup { left: max( 38px, min( 64px, 5vw ) ); width: 440px; font-size: 14px; z-index: 1; } xxx.mount-icon:hover { z-index: 10; } xxx.mount-icon:hover .popup { opacity: 1; left: max( 30px, min( 54px, 5vw ) ); } .mount-info-popup small { margin-bottom: 6px; font-size: 12px; } .mount-info-popup .box-header span { display: block; margin-bottom: 6px; margin-top: 6px; font-size: 12px; color: #fff9; line-height: 16px; } .right .box-header:nth-of-type( 2 ) { padding: 9px 1rem 7px !important; min-height: 0 !important; } .box-outer-edge { width: 375px; } .wide-popup { width: 460px !important; max-width: calc( 100vw - 4px ); } .small-popup { width: 300px !important; max-width: calc( 100vw - 4px ); } .box-content small { position: relative; top: 0px !important; } #cursor_popup_holder .left { position: absolute; top: 0; left: -28px; bottom: 0; width: 110px; overflow: hidden; /* background-size: auto 165px; background-repeat: no-repeat; background-position: 25% center;*/ } #cursor_popup_holder .left .background-large { z-index: 2; max-width: 160px; transform: translate( calc( -1 * 50% + 30px ), -50% ); position: absolute; top: 50%; left: 50%; } #cursor_popup_holder .left .background-large.jobs { transform: translate( calc( -1 * 50% + 30px ), -50% ) !important; max-width: 200px !important; } #cursor_popup_holder .left .inner-container { max-width: 86px; background: #0006; width: 81px; position: absolute; height: 100%; right: 1px; border-radius: 10px 0 0 10px; box-shadow: 1px 0 #75737044; } #cursor_popup_holder .left .big-icon { overflow: hidden; width: 108px; position: absolute; left: -28px; top: 0px; } #cursor_popup_holder .left .big-icon:after { content: ''; position: absolute; top: 10px; right: 0; bottom: 0; left: 0; box-shadow: inset -13px 0 10px -12px #000; } #cursor_popup_holder .left .big-icon img { width: 150px; max-width: 150px; transform: rotate( 10deg ); padding: 5px; border: none; box-shadow: none; } #cursor_popup_holder .right { margin-left: 75px; } #cursor_popup_holder .right .box-header { font-size: 14px; } #cursor_popup_holder .right .box-header:nth-of-type( 2 ) { padding-top: 9px !important; } #cursor_popup_holder .right .box-content small { margin-bottom: 0; } #cursor_popup_holder .left .bottom { line-height: 14px; position: absolute; bottom: 0; left: 0; right: 0; text-align: center; background: #4446; -webkit-backdrop-filter: blur( 8px ); backdrop-filter: blur( 8px ); box-shadow: inset -3px 0 8px -5px #000, inset 0 1px #fff3; border-radius: 0 0 0 8px; font-size: 10px; padding: 6px 0; } #cursor_popup_holder .left .bottom span { color: #fff9; } #cursor_popup_holder .left .bottom img:not( .small ) { margin-top: 6px; max-width: 57px; } #cursor_popup_holder .left .bottom img.small { width: 22px; border: 0; box-shadow: none; margin-bottom: -4px; } .mount-grouping { min-height: clamp( 98px, 11vw, 114px ); display: inline-block; margin-right: 17px; margin-left: 18px; margin: 0 calc( clamp( 48px, 5.5vw, 62px ) / 4 ); font-size: 12px; color: #fff6; } .mount-collection .character-section { padding: 0; } .mount-collection .mount-category { padding: 0 0 0 2px; } .mount-list .inline { position: relative; } @media( max-width: 700px ) { .mount-grouping { margin-right: 20px; } .mount-collection:not( :nth-of-type( 1 ) ) { box-shadow: 0 -1em 0 #0003; } .mount-collection .mount-category { background: linear-gradient( to bottom, #0000 0px, #0000 2em, #0003 ); box-shadow: 0 2em 0 #0003; } } .mount-grouping.grouping-title { width: calc( 100% - 25px ); margin-right: 0; } .mount-grouping.grouping-title h4 { font-size: clamp( 22px, 1.5vw, 28px ); margin-top: 4em; } .start-block .mount-icon { height: max( 38px, min( 64px, 5vw ) ); } .leading { display: none; } .icon-music { position: relative; top: 2px; display: inline-block; height: 12px; width: 14px; background-size: contain; background-repeat: no-repeat; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJz48cGF0aCBmaWxsPScjZmZmJyBkPSdNNTEyIDVWNDh2NzJWMzY4YzAgNDQuMi00MyA4MC05NiA4MHMtOTYtMzUuOC05Ni04MHM0My04MCA5Ni04MGMxMS4yIDAgMjIgMS42IDMyIDQuNlYxNjNMMTkyIDIzOS44VjQzMmMwIDQ0LjItNDMgODAtOTYgODBzLTk2LTM1LjgtOTYtODBzNDMtODAgOTYtODBjMTEuMiAwIDIyIDEuNiAzMiA0LjZWMjE2IDE0NCAxMjAuMmwyMi44LTYuOCAzMjAtOTZMNTEyIDV6Jy8+PC9zdmc+"); } .icon-seats { position: relative; top: 2px; display: inline-block; height: 12px; width: 14px; background-size: contain; background-repeat: no-repeat; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJz48cGF0aCBmaWxsPScjZmZmJyBkPSdNNjQgMTYwQzY0IDg5LjMgMTIxLjMgMzIgMTkyIDMySDMyMGM3MC43IDAgMTI4IDU3LjMgMTI4IDEyOHYzMy42Yy0zNi41IDcuNC02NCAzOS43LTY0IDc4LjR2NDhIMTI4VjI3MmMwLTM4LjctMjcuNS03MS02NC03OC40VjE2MHpNNDE2IDI3MmMwLTIwLjkgMTMuNC0zOC43IDMyLTQ1LjNjNS0xLjggMTAuNC0yLjcgMTYtMi43YzI2LjUgMCA0OCAyMS41IDQ4IDQ4VjQ0OGMwIDE3LjctMTQuMyAzMi0zMiAzMkg0NDhjLTE3LjcgMC0zMi0xNC4zLTMyLTMySDk2YzAgMTcuNy0xNC4zIDMyLTMyIDMySDMyYy0xNy43IDAtMzItMTQuMy0zMi0zMlYyNzJjMC0yNi41IDIxLjUtNDggNDgtNDhjNS42IDAgMTEgMSAxNiAyLjdjMTguNiA2LjYgMzIgMjQuNCAzMiA0NS4zdjQ4IDMyaDMySDM4NGgzMlYzMjAgMjcyeicvPjwvc3ZnPg=="); } .icon-action { position: relative; top: 2px; display: inline-block; height: 12px; width: 14px; background-size: contain; background-repeat: no-repeat; background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1NzYgNTEyJz48cGF0aCBmaWxsPScjZmZmJyBkPSdNMzE2LjkgMThDMzExLjYgNyAzMDAuNCAwIDI4OC4xIDBzLTIzLjQgNy0yOC44IDE4TDE5NSAxNTAuMyA1MS40IDE3MS41Yy0xMiAxLjgtMjIgMTAuMi0yNS43IDIxLjdzLS43IDI0LjIgNy45IDMyLjdMMTM3LjggMzI5IDExMy4yIDQ3NC43Yy0yIDEyIDMgMjQuMiAxMi45IDMxLjNzMjMgOCAzMy44IDIuM2wxMjguMy02OC41IDEyOC4zIDY4LjVjMTAuOCA1LjcgMjMuOSA0LjkgMzMuOC0yLjNzMTQuOS0xOS4zIDEyLjktMzEuM0w0MzguNSAzMjkgNTQyLjcgMjI1LjljOC42LTguNSAxMS43LTIxLjIgNy45LTMyLjdzLTEzLjctMTkuOS0yNS43LTIxLjdMMzgxLjIgMTUwLjMgMzE2LjkgMTh6Jy8+PC9zdmc+"); } .start-block { display: inline-block; } .start-block > span { display: flex; flex-wrap: wrap; gap: 1px; row-gap: 1px; align-items: center; } .mount-list .start-block ~ .inline { position: relative; top: -3px; } /* hack to get auto rounding to work with layout shifting */ @media( min-width: 1010px ) { .mount-list .start-block { margin: -8px -8px -2px; padding: 5px 5px 3px !important; } .mount-list .start-block .leading ~ .inline img { border-top-right-radius: 15px; border-bottom-right-radius: 15px; } .mount-list .start-block + .inline { margin-left: 8px !important; } .mount-list .start-block + .inline img { border-top-left-radius: 15px; border-bottom-left-radius: 15px; } .mount-list .start-block + .start-block { margin-left: 12px; } .mount-list .inline + .start-block { margin-left: 2px !important; } .start-block { background: #0004; height: 100%; border-radius: 20px; box-shadow: inset 0 0 0 1px #fff3; } .leading { display: inline-block; color: #b5aa81; font-size: 45px; position: relative; left: 1px; margin-bottom: 11px; line-height: 22px; } .mount-list .start-block .inline:first-of-type img, .mount-list .start-block .inline:first-of-type .mount-icon.highlighted:not( .owned ), .mount-list .start-block + .inline .mount-icon.highlighted:not( .owned ) { border-top-left-radius: 15px; border-bottom-left-radius: 15px; } .mount-list .start-block .inline:last-of-type img, .mount-list .start-block .inline:last-of-type .mount-icon.highlighted:not( .owned ) { border-top-right-radius: 15px; border-bottom-right-radius: 15px; } .mount-list .inline:has( + .start-block ) img { border-top-right-radius: 15px; border-bottom-right-radius: 15px; } } .job-level-label { position: absolute; z-index: 11; background: #1A1A1A; border: 1px solid #B5AA81; bottom: -4px; border-radius: 6px; left: 50%; transform: translateX( -50% ); font-size: .75em; padding: 2px 6px; box-shadow: 0 3px 5px #000; color: #fffa; } xxx.mount-icon.popup-right .popup { left: auto !important; right: max( 38px, min( 64px, 5vw ) ); } xxx.mount-icon.popup-right:hover .popup { left: auto !important; right: max( 30px, min( 54px, 5vw ) ); } .mount-icon .link-indicator { display: none; } @media( min-width: 800px ) { .mount-icon .link-indicator { display: block; position: absolute; width: 13px; top: -1px; right: 0px; z-index: 2; } .mount-icon a:before { content: ''; display: block; position: absolute; top: 1px; right: 1px; width: 14px; height: 14px; background: #0009; border-radius: 2px; filter: blur( 2px ); } } .mount-icon .link-indicator path { fill: #b5a981; } .mount-icon:not( .owned ) .link-indicator path { fill: #58534d; } .mount-icon .temp-indicator { display: block; position: absolute; background: #0008; box-shadow: 0 0px 5px #000a; width: 16px; height: 16px; left: calc( 50% - 8px ); bottom: -4px; border-radius: 16px; } .mount-icon .temp-indicator svg { width: 16px; height: 16px; position: relative; top: -3px; } .mount-icon .temp-indicator path { fill: #f7d8ad; } .mount-icon.owned .temp-indicator { display: none; } xxx.mount-icon .popup { z-index: 3; } #cursor_popup_holder .box-header.stats { display: flex; justify-content: space-between; padding: 2px 16px 0px; margin-bottom: 10px; } #cursor_popup_holder .box-header.stats strong { color: #fff; } #cursor_popup_holder .box-header ul { padding-left: 22px; } #cursor_popup_holder .box-header ul.eval { list-style: none; } #cursor_popup_holder .box-header ul.eval ul { list-style: none; padding-left: 12px; } #cursor_popup_holder .box-header ul.eval ul.eval { padding-left: 19px; } #cursor_popup_holder .box-header ul.eval li { position: relative; } #cursor_popup_holder .box-header ul.eval li.has, #cursor_popup_holder .box-outer-edge.owned .box-header ul.eval li { color: #69e486; } #cursor_popup_holder .box-header ul.eval li:before { content: ''; display: block; height: 12px; width: 12px; position: absolute; left: -18px; top: 2px; background-repeat: no-repeat; } #cursor_popup_holder .box-header ul.eval li:before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJz48cGF0aCBmaWxsPScjNjllNDg2JyBkPSdNMjU2IDUxMkEyNTYgMjU2IDAgMSAwIDI1NiAwYTI1NiAyNTYgMCAxIDAgMCA1MTJ6TTM2OSAyMDlMMjQxIDMzN2MtOS40IDkuNC0yNC42IDkuNC0zMy45IDBsLTY0LTY0Yy05LjQtOS40LTkuNC0yNC42IDAtMzMuOXMyNC42LTkuNCAzMy45IDBsNDcgNDdMMzM1IDE3NWM5LjQtOS40IDI0LjYtOS40IDMzLjkgMHM5LjQgMjQuNiAwIDMzLjl6Jy8+PC9zdmc+"); } #cursor_popup_holder .box-outer-edge:not( .owned ) .box-header ul.eval li:not( .has ).none:before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzMjAgNTEyJz48cGF0aCBmaWxsPScjYWRhZGFkJyBkPSdNMCAyNTZjMC0xNy43IDE0LjMtMzIgMzItMzJIMjg4YzE3LjcgMCAzMiAxNC4zIDMyIDMycy0xNC4zIDMyLTMyIDMySDMyYy0xNy43IDAtMzItMTQuMy0zMi0zMnonLz48L3N2Zz4="); left: -15px !important; } #cursor_popup_holder .box-outer-edge:not( .owned ) .box-header ul.eval li:not( .has ):before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCA1MTIgNTEyJz48cGF0aCBmaWxsPScjYWRhZGFkJyBkPSdNNDY0IDI1NkEyMDggMjA4IDAgMSAwIDQ4IDI1NmEyMDggMjA4IDAgMSAwIDQxNiAwek0wIDI1NmEyNTYgMjU2IDAgMSAxIDUxMiAwQTI1NiAyNTYgMCAxIDEgMCAyNTZ6Jy8+PC9zdmc+"); } #cursor_popup_holder .box-header ul.eval li ul:not( .eval ) li:before { left: -12px; } #cursor_popup_holder .box-header ul.eval li:not( .has ) ul:not( .eval ) li:before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzMjAgNTEyJz48cGF0aCBmaWxsPScjYWRhZGFkJyBkPSdNMCAyNTZjMC0xNy43IDE0LjMtMzIgMzItMzJIMjg4YzE3LjcgMCAzMiAxNC4zIDMyIDMycy0xNC4zIDMyLTMyIDMySDMyYy0xNy43IDAtMzItMTQuMy0zMi0zMnonLz48L3N2Zz4=") !important; } #cursor_popup_holder .box-header ul.eval li.has ul li:before { background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0naHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmcnIHZpZXdCb3g9JzAgMCAzMjAgNTEyJz48cGF0aCBmaWxsPScjNjllNDg2JyBkPSdNMCAyNTZjMC0xNy43IDE0LjMtMzIgMzItMzJIMjg4YzE3LjcgMCAzMiAxNC4zIDMyIDMycy0xNC4zIDMyLTMyIDMySDMyYy0xNy43IDAtMzItMTQuMy0zMi0zMnonLz48L3N2Zz4=") !important;} .mount-category.locked { display: none; } .mount-category.has { display: block; } .mount-icon:not( .owned ) .spoiler { z-index: 1; position: absolute; top: 1px; right: 1px; bottom: 1px; left: 1px; background: #0000; -webkit-backdrop-filter: blur( 5px ); backdrop-filter: blur( 5px ); border-radius: 2px; } .mount-list .inline.first.top .mount-icon:not( .owned ) .spoiler { border-top-left-radius: 14px; } .mount-list .inline.last.top .mount-icon:not( .owned ) .spoiler { border-top-right-radius: 14px; } .mount-list .inline.first.bottom .mount-icon:not( .owned ) .spoiler { border-bottom-left-radius: 14px; } .mount-list .inline.last.bottom .mount-icon:not( .owned ) .spoiler { border-bottom-right-radius: 14px; } #cursor_popup_holder .box-outer-edge:not( .owned ) .spoiler { position: absolute; top: 0; right: 0; bottom: 0; left: 0; } //#cursor_popup_holder .box-outer-edge:not( .owned ) .spoiler:after { content: ''; position: absolute; top: 0; right: 0; bottom: 0; left: 0; -webkit-backdrop-filter: blur( 10px ); backdrop-filter: blur( 10px ); border-radius: 9px 0 0 9px; z-index: 10; } #cursor_popup_holder .box-outer-edge.spoiler:not( .owned ) .left .background-large { filter: blur( 10px ); } #cursor_popup_holder .box-outer-edge.spoiler:not( .owned ) .left .big-icon { filter: blur( 10px ); left: -4px; } #cursor_popup_holder .box-outer-edge:not( .owned ).spoiler h4 { font-size: 0; } #cursor_popup_holder .box-outer-edge:not( .owned ).spoiler h4:after { content: 'Spoiler!'; font-size: 24px; } #cursor_popup_holder .box-outer-edge:not( .owned ).spoiler small:not( .market-text ) { font-size: 0; } #cursor_popup_holder .box-outer-edge:not( .owned ).spoiler small:not( .market-text ):after { display: block; content: 'This content is hidden to avoid storyline spoilers! The title, image and description will become available once this mount has been unlocked.'; font-size: 12px; } #cursor_popup_holder .box-outer-edge:not( .owned ).spoiler span.spoiler { display: inline-block !important; position: relative !important; margin: 0; color: transparent; background: #fff4 !important; border-radius: 0 !important; line-height: .9em; } #cursor_popup_holder .box-outer-edge.owned.spoiler span.spoiler { margin: 0; display: inline-block; color: inherit; } .mount-icon:not( .owned )[data-available="no"] { display: none; } .mount-icon:not( .owned ) > .img-container img, .mount-icon:not( .owned ) > a > .img-container img { opacity: .2; filter: grayscale( 1 ); } .mount-icon.highlighted:not( .owned ) { box-shadow: 0 0 15px #B5AA81, inset 0 0 0 2px #fffc; border-radius: 3px; height: var( --icon-size ); } .mount-list .inline.first.top .mount-icon.highlighted:not( .owned ) { border-top-left-radius: 15px; } .mount-list .inline.last.top .mount-icon.highlighted:not( .owned ) { border-top-right-radius: 15px; } .mount-list .inline.first.bottom .mount-icon.highlighted:not( .owned ) { border-bottom-left-radius: 15px; } .mount-list .inline.last.bottom .mount-icon.highlighted:not( .owned ) { border-bottom-right-radius: 15px; } .mount-icon.highlighted:not( .owned ) .img-container:before { pointer-events: none; clip-path: polygon( 0 0, 0 100%, 22px 100%, 22px 25px, calc( 100% - 22px ) 25px, calc( 100% - 22px ) calc( 100% - 19px ), 22px calc( 100% - 19px ), 22px 100%, 100% 100%, 100% 0 ); background-repeat: no-repeat; content: ''; display: block; position: absolute; width: calc( 100% + 40px ); height: calc( 100% + 40px ); top: -23px; left: -20px; opacity: .6; animation: sparks linear 10s infinite; background-image: radial-gradient( circle, #ffe0c9 20%, transparent 10% ), radial-gradient( circle, #ffe0c9 20%, transparent 10% ), radial-gradient( circle, #ffe0c9 15%, transparent 10% ), radial-gradient( circle, #ffe0c9 20%, transparent 10% ), radial-gradient( circle, #ffe0c9 20%, transparent 10% ), radial-gradient( circle, #ffe0c9 20%, transparent 10% ), radial-gradient( circle, #ffe0c9 20%, transparent 10% ), radial-gradient(circle, #ffe0c9 20%, transparent 10% ), radial-gradient( circle, #ffe0c9 20%, transparent 10% ), radial-gradient( circle, #ffe0c9 15%, transparent 10% ), radial-gradient( circle, #ffe0c9 20%, transparent 10% ), radial-gradient( circle, #ffe0c9 20%, transparent 10% ), radial-gradient( circle, #ffe0c9 20%, transparent 10% ), radial-gradient( circle, #ffe0c9 20%, transparent 10% ); background-size: 0% 0%, 8% 8%, 7% 7%, 0% 0%, 7% 7%, 0% 0%, 8% 8%, 6% 6%, 0% 0%, 7% 7%, 0% 0%, 0% 0%, 6% 6%, 8% 8%; } ul.tabs span.count { background: #fff4; font-size: 12px; padding: 3px 8px; border-radius: 12px; box-shadow: inset 0 1px 0 #0006, inset 0 -1px 0 #fff3; } #cursor_popup_holder .box-outer-edge.owned .progress-bar, ul.eval li.has .progress-bar { display: none; } .progress-bar { position: relative; border: 1px solid #4b4b4b; width: 200px; height: 6px; border-radius: 100px; margin: 1px 0 3px 0; box-shadow: inset 0 1px 1px #000; } .progress-bar .milestone { border: 1px solid #439a58; right: 25%; width: 4px; height: 4px; border-radius: 100px; position: absolute; } .progress-bar .milestone.has { left: -1px; top: -1px; height: 6px; background: #367c3e; border-color: #439a58; box-shadow: inset -35px 0 20px -20px #67e285; width: auto; } @keyframes sparks { 0% { background-position: 50% 50%, 15% 70%, 55% 50%, 55% 90%, 85% 50%, 50% 50%, 70% 50%, 20% 20%, 30% 98%, 50% 50%, 50% 50%, 85% 80%, 60% 40%, 30% 30%; background-size: 0% 0%, 8% 8%, 7% 7%, 0% 0%, 7% 7%, 0% 0%, 8% 8%, 6% 6%, 0% 0%, 7% 7%, 0% 0%, 0% 0%, 6% 6%, 7% 7%; } 25% { background-position: 20% 30%, 10% 80%, 45% 10%, 50% 50%, 75% 70%, 70% 50%, 90% 20%, 25% 10%, 30% 50%, 40% 60%, 50% 60%, 50% 50%, 85% 15%, 50% 50%; background-size: 6% 6%, 0% 0%, 7% 7%, 0% 0%, 7% 7%, 6% 6%, 8% 8%, 6% 6%, 0% 0%, 0% 0%, 6% 6%, 0% 0%, 0% 0%, 0% 0%; } 50% { background-position: 10% 20%, 10% 50%, 45% 30%, 70% 50%, 75% 80%, 95% 60%, 90% 40%, 30% 20%, 30% 70%, 50% 50%, 70% 70%, 75% 60%, 50% 50%, 50% 50%; background-size: 6% 6%, 0% 0%, 0% 0%, 6% 6%, 0% 0%, 6% 6%, 0% 0%, 0% 0%, 8% 8%, 0% 0%, 6% 6%, 7% 7%, 0% 0%, 0% 0%; } 75% { background-position: 10% 30%, 10% 60%, 50% 50%, 60% 85%, 50% 50%, 95% 70%, 50% 50%, 50% 50%, 30% 85%, 60% 40%, 90% 80%, 80% 90%, 75% 60%, 40% 40%; background-size: 0% 0%, 8% 8%, 0% 0%, 6% 6%, 0% 0%, 0% 0%, 0% 0%, 0% 0%, 8% 8%, 7% 7%, 0% 0%, 7% 7%, 6% 6%, 8% 8%; } 100% { background-position: 50% 50%, 15% 70%, 55% 50%, 55% 90%, 85% 50%, 50% 50%, 70% 50%, 20% 20%, 30% 98%, 50% 50%, 50% 50%, 85% 80%, 60% 40%, 30% 30%; background-size: 0% 0%, 8% 8%, 7% 7%, 0% 0%, 7% 7%, 0% 0%, 8% 8%, 6% 6%, 0% 0%, 7% 7%, 0% 0%, 0% 0%, 6% 6%, 8% 8%; } } #cursor_popup_holder { pointer-events: none; opacity: 0; transition: transform 0.3s ease-in-out 0s, opacity .3s ease-out .15s; position: fixed; top: 0; left: 0; transform: translateY( 50vh ) translateX( calc( 50vw - 185px ) ); z-index: 9999; border-radius: 15px; } #cursor_popup_holder h4 { margin: 0 0 .3em 0; } #cursor_popup_holder .popup_materia_slots { margin: .3em 0; } #cursor_popup_holder small { color: rgba(255,255,255,.6); } #cursor_popup_holder small.label { display: block; width: 100%; font-size: 0.6em; position: relative; top: 4px; } #cursor_popup_holder img.glam { float: left; height: 21px; width: 21px; border-radius: 2px; overflow: hidden; box-shadow: 0 1px 0 1.4px #1c1c1c; position: relative; top: 2px; margin-right: 8px; } @media( max-width: 1000px ) { #cursor_popup_holder { pointer-events: none; top: auto !important; left: 50% !important; transform: translateX( -50% ) !important; bottom: 45px; margin: auto; } } @media( max-width: 800px ) { #cursor_popup_backdrop { opacity: 0; transition: opacity .3s ease-in-out; pointer-events: none; position: fixed; top: 0; right: 0; bottom: 0; left: 0; background: #0000; z-index: 9998; -webkit-mask: linear-gradient( to top, #000 0%, #0000 55%, #0000 ); mask: linear-gradient( to top, #000 0%, #0000 55%, #0000 ); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-backdrop-filter: blur( 30px ); backdrop-filter: blur( 30px ); } #cursor_popup_holder .right { max-height: 85vh !important; overflow-y: scroll !important; } } @media( max-width: 450px ) { .mount-icon a:before { display: none; } .box-outer-edge { max-width: calc( 100% - 30px ) !important; width: calc( 100% - 30px ) !important; margin: auto !important; margin-bottom: 0; } #cursor_popup_holder { transition: bottom 0.4s ease-out 0s, opacity .3s ease-out .15s; left: 3px !important; right: 3px !important; transform: none !important; width: calc( 100% - 6px ); bottom: -45px; } #cursor_popup_holder .box-outer-edge { border-radius: 15px 15px 0 0 !important; } #cursor_popup_holder .box-inner-content { border-radius: 12px 12px 0 0 !important; } } .popup { display: none !important; } xxx.popup { opacity: 1; pointer-events: all; } xxx.popup .box-outer-edge { position: fixed; top: auto; bottom: 0; left: 0; right: 0; } @supports ( -webkit-overflow-scrolling: touch ) { body:after { display: block; z-index: 9999999; content: ''; position: fixed; top: 0; right: 0; left: 0; border-bottom: 1px solid #fff2; } @media ( display-mode: standalone ) { @media( max-width: 450px ) { html { background: #1C335D !important; } body { background: #0000 !important; background-color: #0000 !important; } body:before { display: block; z-index: 9999999; content: ''; position: fixed; top: 0; right: 0; left: 0; height: 90px !important; background: #0000; -webkit-backdrop-filter: blur( 30px ); backdrop-filter: blur( 30px ); -webkit-mask: linear-gradient( to bottom, #000 0%, #000 60%, #0000 ); mask: linear-gradient( to bottom, #000 0%, #000 60%, #0000 ); -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } body:after { display: none; } #main-header { margin-top: 55px; } #character-display { padding-top: 115px; background-position: calc( 50% - 22px ) 40px, center top !important; } .main-bar { background: #141D28 !important; } #character-display img.character { top: 80px; } #header-menu .home-menu-link, #header-menu .divider/*:nth-of-type( 1 )*/ { display: none; } #header-menu .far-right { flex: 1; text-align: right; justify-content: right; } #header-menu .far-right .no-mobile { display: flex !important; } #header-menu .has-dropdown { padding-left: 15px; } #cursor_popup_holder .box-outer-edge { border-radius: calc( 100vw * .129 + 5px - 10px ) !important; margin-bottom: 22px !important; } #cursor_popup_holder .box-inner-content { border-radius: calc( 100vw * .129 + 5px - 12px ) !important; } #cursor_popup_holder .box-inner-content.left-img { overflow: hidden !important; } #cursor_popup_holder .left { border-radius: calc( 100vw * .129 + 5px - 14px ) 0 0 calc( 100vw * .126 - 14px ) !important; overflow: hidden; } #header-menu .dropdown { width: 100vw; left: 0; right: 0 !important; bottom: 0 !important; top: 0 !important; border-radius: 0 !important; padding-top: 60px !important; } #header-menu .dropdown .row { max-width: 48vw; } } @media( max-width: 430px ) { #cursor_popup_holder .box-outer-edge { border-radius: calc( 100vw * .129 - 10px ) !important; } #cursor_popup_holder .box-inner-content { border-radius: calc( 100vw * .129 - 12px ) !important; } #cursor_popup_holder .left { border-radius: calc( 100vw * .129 - 14px ) 0 0 calc( 100vw * .126 - 14px ) !important; } } @media( max-width: 410px ) { #cursor_popup_holder .box-outer-edge { border-radius: calc( 100vw * .129 + 5px - 10px ) !important; } #cursor_popup_holder .box-inner-content { border-radius: calc( 100vw * .129 + 5px - 12px ) !important; } #cursor_popup_holder .left { border-radius: calc( 100vw * .129 + 5px - 14px ) 0 0 calc( 100vw * .126 - 14px ) !important; } } @media( max-width: 390px ) { #cursor_popup_holder .box-outer-edge { border-radius: calc( 100vw * .129 - 4px - 10px ) !important; } #cursor_popup_holder .box-inner-content { border-radius: calc( 100vw * .129 - 4px - 12px ) !important; } #cursor_popup_holder .left { border-radius: calc( 100vw * .129 - 4px - 14px ) 0 0 calc( 100vw * .126 - 14px ) !important; } } } }