/* ============================================================================= Vinvictus Theme v2.0.0 - Character Page Styles ============================================================================= */ :root { --char-padding-xs: 0.25rem; --char-padding-sm: 0.5rem; --char-padding-md: 0.9375rem; --char-padding-lg: 1.25rem; --char-padding-xl: 1.875rem; --char-margin-xs: 0.25rem; --char-margin-sm: 0.5rem; --char-margin-md: 0.625rem; --char-margin-lg: 0.9375rem; --char-margin-xl: 1.25rem; --char-avatar-width: 7.5rem; --char-avatar-height: 9.375rem; --char-avatar-width-sm: 6.25rem; --char-avatar-height-sm: 7.8125rem; --char-equipment-size: 4.375rem; --char-equipment-min-height: 3.125rem; --char-equipment-min-height-sm: 2.5rem; --char-equipment-min-height-xs: 2.1875rem; --char-bar-height: 1.5625rem; --char-bar-text-size: 1rem; --char-bar-label-size: 0.9rem; --char-font-size-xs: 0.75rem; --char-font-size-sm: 0.8rem; --char-font-size-base: 0.9rem; --char-font-size-md: 1rem; --char-font-size-lg: 1.1rem; --char-font-size-xl: 1.4rem; --char-font-size-xxl: 1.8rem; --char-font-weight-normal: 400; --char-font-weight-medium: 500; --char-font-weight-semibold: 600; --char-font-weight-bold: 700; --char-line-height: 1.5; --char-container-max-width: 75rem; --char-sheet-min-height: 37.5rem; --char-weapon-min-height: 5rem; --char-weapon-min-height-sm: 3.75rem; --char-border-width: 1px; --char-border-width-thick: 2px; --char-border-radius: 0.25rem; --char-border-radius-sm: 0.1875rem; --char-transition-fast: 0.2s ease; --char-transition-standard: 0.3s ease-out; --char-transition-slow: 2s ease-out; --char-animation-duration: 2s; --char-shimmer-duration: 3s; --power-health: #3eaf41; --power-mana: #008cff; --power-rage: #ff0000; --power-energy: #ffcc00; --power-runic: #00d4ff; --char-class-warrior: #c79c6e; --char-class-paladin: #f58cba; --char-class-hunter: #abd473; --char-class-rogue: #fff569; --char-class-priest: #ffffff; --char-class-death-knight: #c41f3b; --char-class-shaman: #0070de; --char-class-mage: #69ccf0; --char-class-warlock: #9482c9; --char-class-monk: #00ff96; --char-class-druid: #ff7d0a; --char-class-demon-hunter: #a330c9; --char-faction-alliance: #0078ff; --char-faction-horde: #ff0000; --char-faction-neutral: #81d4fa; --char-stat-hover-bg: rgba(255, 255, 255, 0.05); --char-tooltip-max-width: 15.625rem; } /* Main Container */ .character-armory { margin: 0 auto; border: var(--char-border-width) solid var(--border); background: var(--bg-dark); padding: var(--char-padding-md); max-width: var(--char-container-max-width); } /* Character Header */ .character-header { border-bottom: var(--char-border-width) solid var(--border); background: var(--bg-darker); padding: var(--char-padding-md); } .character-avatar { flex-shrink: 0; border: var(--char-border-width-thick) solid var(--accent); width: var(--char-avatar-width); height: var(--char-avatar-height); object-fit: cover; } .character-info { flex: 1; min-width: 0; } .character-name-section { border: var(--char-border-width) solid var(--border); background: var(--bg-dark); padding: var(--char-padding-md); } .character-details-section { border: var(--char-border-width) solid var(--border); background: var(--bg-dark); padding: var(--char-padding-md); } .character-details { font-size: var(--char-font-size-sm); } .character-details span { display: inline-flex; justify-content: center; align-items: center; gap: var(--char-margin-xs); margin: var(--char-margin-xs) 0; border: var(--char-border-width) solid hsl(225 20 25 / 0.5); background: hsl(225 10 20 / 0.5); padding: 0.2rem 0.8rem; font-size: var(--char-font-size-sm); text-transform: uppercase; } .character-details span.class-race .color-c1, .character-details span.class-race .color-c2, .character-details span.class-race .color-c3, .character-details span.class-race .color-c4, .character-details span.class-race .color-c5, .character-details span.class-race .color-c6, .character-details span.class-race .color-c7, .character-details span.class-race .color-c8, .character-details span.class-race .color-c9, .character-details span.class-race .color-c10, .character-details span.class-race .color-c11, .character-details span.class-race .color-c12, .character-details span.class-race .color-c13 { border: none; background: none; padding: 0; text-transform: uppercase; } .character-name { margin: 0; font-weight: var(--char-font-weight-bold); font-size: var(--char-font-size-xxl); letter-spacing: 0.0625rem; } /* Progress Bars */ .health-bar, .mana-bar { margin: 0; border-bottom: var(--char-border-width) solid var(--border); background: var(--bg-darker); padding: var(--char-padding-md); } .bar-label { margin-bottom: var(--char-margin-sm); color: var(--txt-secondary); font-weight: var(--char-font-weight-bold); font-size: var(--char-bar-label-size); text-transform: uppercase; } .progress { border: var(--char-border-width) solid var(--border); border-radius: 0; background-color: rgba(0, 0, 0, 0.3); height: var(--char-bar-height); } .health-fill { position: relative; animation: healthPulse var(--char-animation-duration) ease-in-out infinite alternate; background: var(--power-health); overflow: hidden; } .health-fill::before { position: absolute; top: 0; left: -100%; animation: shimmer var(--char-shimmer-duration) ease-in-out infinite; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); width: 100%; height: 100%; content: ''; } .mana-fill { position: relative; animation: manaPulse var(--char-animation-duration) ease-in-out infinite alternate; background: var(--power-mana); overflow: hidden; } .mana-fill::before { position: absolute; top: 0; left: -100%; animation: shimmer var(--char-shimmer-duration) ease-in-out infinite 1s; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); width: 100%; height: 100%; content: ''; } .rage-fill { position: relative; animation: ragePulse var(--char-animation-duration) ease-in-out infinite alternate; background: var(--power-rage); overflow: hidden; } .rage-fill::before { position: absolute; top: 0; left: -100%; animation: shimmer var(--char-shimmer-duration) ease-in-out infinite 1.5s; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); width: 100%; height: 100%; content: ''; } .energy-fill { position: relative; animation: energyPulse var(--char-animation-duration) ease-in-out infinite alternate; background: var(--power-energy); overflow: hidden; } .energy-fill::before { position: absolute; top: 0; left: -100%; animation: shimmer var(--char-shimmer-duration) ease-in-out infinite 2s; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); width: 100%; height: 100%; content: ''; } .runic-fill { position: relative; animation: runicPulse var(--char-animation-duration) ease-in-out infinite alternate; background: var(--power-runic); overflow: hidden; } .runic-fill::before { position: absolute; top: 0; left: -100%; animation: shimmer var(--char-shimmer-duration) ease-in-out infinite 2.5s; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent); width: 100%; height: 100%; content: ''; } .animated-bar { transition: width var(--char-transition-slow); } .bar-text { z-index: 10; font-size: var(--char-bar-text-size); line-height: var(--char-line-height); } @keyframes healthPulse { 0% { opacity: 0.8; } 100% { opacity: 1; } } @keyframes manaPulse { 0% { opacity: 0.8; } 100% { opacity: 1; } } @keyframes ragePulse { 0% { opacity: 0.8; } 100% { opacity: 1; } } @keyframes energyPulse { 0% { opacity: 0.8; } 100% { opacity: 1; } } @keyframes runicPulse { 0% { opacity: 0.8; } 100% { opacity: 1; } } @keyframes shimmer { 0% { left: -100%; } 100% { left: 100%; } } /* Character Sheet */ .character-sheet { background: var(--bg-darker); padding: var(--char-padding-xl); } .equipment-left, .equipment-right { display: flex; flex-direction: column; height: 100%; } .character-sheet .row.h-100 { min-height: var(--char-sheet-min-height); } .character-sheet .row.h-100 > .col-12, .character-sheet .row.h-100 > .col-sm-6, .character-sheet .row.h-100 > .col-lg-3 { display: flex; flex-direction: column; } .primary-stats, .weapons-panel { flex: 1; height: 100%; } .equipment-left .equipment-slot:last-child, .equipment-right .equipment-slot:last-child { margin-bottom: 0; } .equipment-slot { display: flex; flex: 1; justify-content: center; align-items: center; transition: border-color var(--char-transition-fast); border: var(--char-border-width) solid var(--border); background: var(--bg-dark); padding: var(--char-padding-sm); text-align: center; } .equipment-slot img { border-radius: 0; max-width: 100%; max-height: 100%; object-fit: contain; } .equipment-slot .item { border-radius: 0; width: var(--char-equipment-size); height: auto; } .equipment-slot:hover { border-color: var(--color-white); } .weapon-slot { display: flex; transition: border-color var(--char-transition-fast); border: var(--char-border-width) solid var(--border); background: var(--bg-dark); text-align: center; } .weapon-slot:hover { border-color: var(--accent); } .weapon-slot .item { display: flex; justify-content: center; align-items: center; border-radius: 0; } .weapon-slot img { max-width: 100%; max-height: 100%; object-fit: contain; } /* Primary Stats and Weapons Panel */ .primary-stats { display: flex; flex-direction: column; border: var(--char-border-width) solid var(--border); background: var(--bg-darker); padding: 0; } .primary-stats h3 { margin: 0; border-bottom: var(--char-border-width) solid var(--border); background: var(--bg-dark); padding: var(--char-padding-md) var(--char-padding-lg); color: var(--accent); font-weight: var(--char-font-weight-bold); font-size: var(--char-font-size-lg); text-transform: uppercase; } .primary-stats .stats-list { flex-grow: 1; padding: var(--char-padding-md) var(--char-padding-lg); } .weapons-panel { display: flex; flex-grow: 1; flex-direction: column; border: var(--char-border-width) solid var(--border); background: var(--bg-darker); padding: 0; } .weapons-panel h3 { margin: 0; border-bottom: var(--char-border-width) solid var(--border); background: var(--bg-dark); padding: var(--char-padding-md) var(--char-padding-lg); color: var(--accent); font-weight: var(--char-font-weight-bold); font-size: var(--char-font-size-lg); text-transform: uppercase; } .weapons-grid { display: flex; flex-grow: 1; flex-direction: column; padding: 0.4rem; } .weapons-grid .row { flex-grow: 1; margin: 0; } .weapon-slot-enhanced { transition: border-color var(--char-transition-fast); border: var(--char-border-width) solid var(--border); background: var(--bg-dark); padding: var(--char-padding-md); min-height: var(--char-weapon-min-height); } .weapon-slot-enhanced:hover { border-color: var(--accent); } .weapon-slot-enhanced img { max-width: 100%; max-height: 100%; object-fit: contain; } .weapon-slot-enhanced .item { width: auto; height: auto; } .stat-name { color: var(--txt-secondary); font-weight: var(--char-font-weight-medium); font-size: var(--char-font-size-base); text-transform: uppercase; } .stat-value { color: var(--txt-primary); font-weight: var(--char-font-weight-bold); font-size: var(--char-font-size-base); } .stats-bottom { background: var(--bg-darker); padding: var(--char-padding-lg); } .stats-panel { margin-bottom: var(--char-padding-lg); border: var(--char-border-width) solid var(--border); background: var(--bg-darker); padding: 0; } .stats-panel h3 { margin: 0; border-bottom: var(--char-border-width) solid var(--border); background: var(--bg-dark); padding: var(--char-padding-md) var(--char-padding-lg); color: var(--accent); font-weight: var(--char-font-weight-bold); font-size: var(--char-font-size-lg); text-transform: uppercase; } .stats-list { flex-grow: 1; padding: var(--char-padding-md) var(--char-padding-lg); } .stat-line { display: flex; justify-content: space-between; align-items: center; transition: all var(--char-transition-fast); cursor: pointer; margin-bottom: var(--char-margin-md); border-radius: var(--char-border-radius); padding: var(--char-padding-sm) 0.75rem; font-size: var(--char-font-size-base); } .stat-line:hover { background-color: var(--bg-dark); color: var(--txt-primary); } .stat-line:hover span { color: var(--txt-primary); } .stat-line:last-child { margin-bottom: 0; } .stat-line span:first-child { color: var(--txt-secondary); } .stat-line span:last-child { color: var(--txt-primary); font-weight: var(--char-font-weight-bold); } .breadcrumb-item + .breadcrumb-item { padding-right: 0.2rem; color: var(--txt-secondary); } .color-c1 { color: var(--char-class-warrior); } .color-c2 { color: var(--char-class-paladin); } .color-c3 { color: var(--char-class-hunter); } .color-c4 { color: var(--char-class-rogue); } .color-c5 { color: var(--char-class-priest); } .color-c6 { color: var(--char-class-death-knight); } .color-c7 { color: var(--char-class-shaman); } .color-c8 { color: var(--char-class-mage); } .color-c9 { color: var(--char-class-warlock); } .color-c10 { color: var(--char-class-monk); } .color-c11 { color: var(--char-class-druid); } .color-c12 { color: var(--char-class-demon-hunter); } .alliance { color: var(--char-faction-alliance); } .horde { color: var(--char-faction-horde); } .guild-link { text-decoration: none; } .guild-link:hover { color: var(--char-faction-neutral); text-decoration: underline; } @media (min-width: 992px) { .stats-bottom .row .col-12.col-lg-4 { flex: 0 0 33.333333%; max-width: 33.333333%; } } @media (min-width: 768px) and (max-width: 991px) { .stats-bottom .row .col-12.col-lg-4:nth-child(3) { flex: 0 0 100%; margin-top: var(--char-padding-md); max-width: 100%; } .stats-bottom .row .col-12.col-lg-4:nth-child(1), .stats-bottom .row .col-12.col-lg-4:nth-child(2) { flex: 0 0 50%; max-width: 50%; } } .stats-panel .stats-list { flex-grow: 1; } @media (max-width: 768px) { .character-armory { margin: var(--char-padding-md); padding: var(--char-padding-md); } .character-header { padding: var(--char-padding-md); } .character-name { font-size: var(--char-font-size-xl); } .character-name-section .btn { align-self: flex-end; } .character-sheet { padding: var(--char-padding-md); } .stats-bottom { padding: var(--char-padding-md); } .equipment-slot, .weapon-slot { min-height: var(--char-equipment-min-height); } .primary-stats { margin-top: var(--char-padding-md); min-height: auto; } .stats-bottom .row .col-12.col-lg-4 { margin-bottom: var(--char-padding-md); } } @media (max-width: 425px) { .character-header .d-flex { width: 100%; } .character-info { width: 100%; } .character-name-section, .character-details-section { width: 100%; } .character-details { justify-content: center; text-align: center; } .primary-stats .stats-list { display: flex; flex-direction: column; align-items: center; text-align: center; } .stat-line { flex-direction: column; justify-content: center; gap: var(--char-margin-xs); margin-bottom: var(--char-margin-sm); background: var(--char-stat-hover-bg); padding: var(--char-padding-sm) 0.75rem; min-width: 9.375rem; text-align: center; } .stat-line span { display: block; text-align: center; } .stat-line span:first-child { opacity: 0.8; font-size: var(--char-font-size-sm); } .stat-line span:last-child { font-weight: var(--char-font-weight-bold); font-size: var(--char-font-size-md); } .weapons-panel .weapons-grid { padding: 0; } .weapons-grid .row { margin: 0; } .weapons-grid .col-4 { padding: var(--char-padding-xs); } .weapon-slot-enhanced { padding: var(--char-padding-sm); min-height: var(--char-weapon-min-height-sm); } .stats-bottom .stats-list { display: flex; flex-direction: column; align-items: center; } .stats-bottom .row { flex-direction: column; } .stats-bottom .col-12.col-lg-4 { flex: none; width: 100%; max-width: 100%; } } @media (max-width: 360px) { .character-armory { margin: 0.3125rem; padding: var(--char-padding-sm); } .character-header { padding: var(--char-padding-sm); } .character-avatar { width: var(--char-avatar-width-sm); height: var(--char-avatar-height-sm); } .character-name { margin-bottom: var(--char-margin-sm); font-size: 1.2rem; } .character-name-section, .character-details-section { margin-bottom: var(--char-margin-sm); padding: var(--char-padding-sm) var(--char-padding-md); } .character-details span { margin: 0.0625rem; padding: 0.0625rem var(--char-padding-xs); font-size: var(--char-font-size-xs); } .character-sheet { padding: var(--char-padding-sm); } .equipment-slot, .weapon-slot-enhanced { min-height: var(--char-equipment-min-height-sm); font-size: var(--char-font-size-sm); } .primary-stats h3, .weapons-panel h3 { margin-bottom: 0.75rem; font-size: var(--char-font-size-md); } .stat-line { padding: var(--char-padding-xs) var(--char-padding-sm); font-size: 0.85rem; } .stats-bottom { padding: var(--char-padding-sm); } .stats-panel h3 { margin-bottom: 0.75rem; font-size: var(--char-font-size-md); } .bar-label { margin-bottom: var(--char-margin-xs); font-size: var(--char-font-size-sm); } .bar-text { font-size: var(--char-font-size-sm); } .weapons-grid .col-4 { padding: 0.125rem; } .weapon-slot-enhanced { padding: var(--char-padding-xs); min-height: var(--char-equipment-min-height-xs); } } .tooltip-inner { max-width: var(--char-tooltip-max-width); text-wrap: balance; } /* HeroWoW Patch menu/button */ .herowow-patch-menu{ position:fixed; top:110px; right:24px; z-index:9999; } .herowow-patch-menu a, a[href*="1vsJbFrxwCGoIkYicVFeMK0aw95MD3zY4"]{ display:inline-block !important; padding:12px 24px !important; margin:4px !important; border-radius:12px !important; background:linear-gradient(90deg,#f59e0b,#facc15) !important; color:#111827 !important; font-weight:700 !important; text-transform:uppercase !important; text-decoration:none !important; box-shadow:0 0 18px rgba(250,204,21,.55) !important; } /* HeroWoW fixed theme style */ body { background:#070b14 !important; color:#fff !important; } a[href*="discord.gg"] { color:#fff !important; } a[href*="1vsJbFrxwCGoIkYicVFeMK0aw95MD3zY4"] { background:linear-gradient(90deg,#f59e0b,#facc15)!important; color:#111827!important; padding:10px 18px!important; border-radius:10px!important; font-weight:bold!important; }