/* Tower of Destiny Theme — main.css Additional styles loaded after style.css ============================================================ */ /* ============================================================ FRONT PAGE HERO ============================================================ */ .home .tod-hero { margin-bottom: 2.5rem; } /* ============================================================ AUTH PAGE — background uses theme asset path correctly via inline style on .tod-auth-wrap (set in template) ============================================================ */ .tod-auth-page body { background: var(--tod-bg); } /* ============================================================ FULL-WIDTH PAGE (game page) ============================================================ */ .page-full-width { background: var(--tod-bg); } .page-full-width .entry-content { padding: 0; margin: 0; } /* ============================================================ WORDPRESS EDITOR ALIGNMENT HELPERS ============================================================ */ .alignleft { float: left; margin: 0 1.5rem 1rem 0; } .alignright { float: right; margin: 0 0 1rem 1.5rem; } .aligncenter { display: block; margin: 0 auto 1rem; } /* ============================================================ SCREEN READER TEXT ============================================================ */ .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px; word-wrap: normal !important; } .screen-reader-text:focus { background-color: var(--tod-bg-panel); border-radius: var(--tod-radius); clip: auto !important; clip-path: none; color: var(--tod-gold); display: block; font-size: 0.875rem; font-weight: 700; height: auto; left: 5px; line-height: normal; padding: 15px 23px 14px; text-decoration: none; top: 5px; width: auto; z-index: 100000; } /* ============================================================ GAME UI — fix position:fixed for elements the game appends directly to . The style.css rule "body.has-background-image > * { position: relative }" would otherwise override the game's position:fixed on the tooltip and overlay elements, breaking their placement and preventing mouseleave from firing correctly. IMPORTANT: Do NOT use body > [id^="tod-"] here. That broad selector matches #tod-wrapper, giving it position:fixed and creating a stacking context that intercepts hover events on the header avatar dropdown, causing it to flash and disappear on the Play Now page. Target only the specific floating elements that actually need position:fixed. ============================================================ */ #tod-item-tooltip, body > .tod-item-tooltip, body > .tod-overlay { position: fixed !important; z-index: 10000; } /* ============================================================ MODAL OVERLAYS — account page and game UI modals appended to must use position:fixed and a z-index high enough to sit above all page content, including elements given position:relative + z-index:1 by the "body.has-background-image > *" rule in style.css. ============================================================ */ body > .tod-modal-overlay, body > .tod-vault-item-overlay, body > .tod-rift-keeper-overlay { position: fixed !important; z-index: 999999 !important; } /* ============================================================ GAME TOOLTIP HIDDEN STATE The plugin hides #tod-pet-tooltip by adding the .hidden class, but no CSS rule defines what .hidden does for this element. This rule provides the missing display:none. ============================================================ */ #tod-pet-tooltip.hidden { display: none !important; } /* ============================================================ ADVENTURE LOG PAGE — ensure the tod-panel article wrapper is a full-width block so that .tod-adventure-log's max-width + margin:0 auto centering works correctly. Without this, display:inline-block on .tod-panel causes the article to shrink-wrap and left-align. The :has() selector targets the article itself (modern browsers); the second rule targets the inner wrapper as a fallback. ============================================================ */ .page-template-default .tod-panel:has( .tod-adventure-log ) { display: block; width: 100%; } .page-template-default .entry-content { display: block; width: 100%; } /* ============================================================ HEADER AVATAR WIDGET (v1.0.41) Square-framed player avatar adjacent to the primary nav, username below, verified/admin badge overlay, hover dropdown containing the logout button. ============================================================ */ /* -- Outer widget container ---------------------------------- */ .tod-header-avatar-widget { position: relative; display: flex; align-items: center; margin-left: 0.75rem; flex-shrink: 0; } /* -- Avatar link (avatar + username stacked) ----------------- */ .tod-header-avatar-link { display: flex; flex-direction: column; align-items: center; gap: 3px; text-decoration: none; cursor: pointer; padding: 4px 6px; border-radius: var(--tod-radius, 4px); transition: background var(--tod-transition, 0.15s ease); } .tod-header-avatar-link:hover { background: rgba(255, 215, 0, 0.08); } /* -- Avatar wrapper (needed for badge absolute positioning) -- */ .tod-header-avatar-wrap { position: relative; flex-shrink: 0; line-height: 0; } //* -- Avatar image: matches profile square frame exactly ------ */ .tod-header-avatar { display: block; width: 52px; height: 52px; border-radius: var(--tod-radius, 4px); border: 2px solid var(--tod-border-gold, #8B6914); object-fit: cover; background: #000; image-rendering: pixelated; } /* -- Placeholder when no avatar image is available ----------- */ .tod-header-avatar--placeholder { width: 52px; height: 52px; border-radius: var(--tod-radius, 4px); border: 2px solid var(--tod-border, #2a2a2a); background: #0d0d0d; display: flex; align-items: center; justify-content: center; font-size: 1.3rem; color: var(--tod-text-dim, #888); } /* -- Verified / admin badge overlay on avatar --------------- */ .tod-header-badge { position: absolute; top: -5px; right: -5px; width: 16px; height: 16px; font-size: 9px; /* Inherits gradient, border, border-radius, shadow from .tod-verified-badge defined in tod-my-account.css */ } /* -- Combined (notifications + feed) count badge on avatar -- */ .tod-header-combined-badge { display: none; /* hidden until JS sets .is-visible */ position: absolute; bottom: -5px; right: -5px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9px; background: #c0392b; border: 2px solid #0d0d0d; color: #fff; font-size: 10px; font-weight: 700; line-height: 14px; text-align: center; white-space: nowrap; box-shadow: 0 1px 4px rgba(0,0,0,0.6); z-index: 10; pointer-events: none; animation: tod-badge-pop 0.25s ease; } .tod-header-combined-badge.is-visible { display: block; } /* -- Inline badges on dropdown menu items ------------------- */ .tod-header-dropdown__badge { display: none; /* hidden until JS sets .is-visible */ min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: #c0392b; color: #fff; font-size: 10px; font-weight: 700; line-height: 18px; text-align: center; white-space: nowrap; flex-shrink: 0; margin-left: auto; animation: tod-badge-pop 0.25s ease; } .tod-header-dropdown__badge.is-visible { display: inline-block; } @keyframes tod-badge-pop { 0% { transform: scale(0.5); opacity: 0; } 70% { transform: scale(1.15); } 100% { transform: scale(1); opacity: 1; } } /* -- Username label below avatar ---------------------------- */ .tod-header-username { display: block; font-size: 0.7rem; color: var(--tod-text-dim, #888); text-align: center; max-width: 72px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; line-height: 1; letter-spacing: 0.02em; transition: color var(--tod-transition, 0.15s ease); } .tod-header-avatar-link:hover .tod-header-username { color: var(--tod-gold, #FFD700); } /* -- Hover dropdown ----------------------------------------- */ .tod-header-dropdown { position: absolute; top: 100%; right: 0; min-width: 160px; background: var(--tod-bg-panel, #141414); border: 1px solid var(--tod-border-gold, #8B6914); border-radius: var(--tod-radius, 4px); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.7); z-index: 200; opacity: 0; visibility: hidden; transform: translateY(-4px); transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0.18s; pointer-events: none; /* Transparent top padding bridges the gap between the avatar and the dropdown so :hover is never lost when moving the mouse downward. */ padding-top: 4px; } /* Invisible bridge above the dropdown: extends the hover hit-area upward so the mouse never leaves .tod-header-avatar-widget while moving from the avatar link down to the dropdown panel. */ .tod-header-dropdown::before { content: ''; position: absolute; top: -8px; left: 0; right: 0; height: 8px; } /* Show on hover over the whole widget OR when JS adds .is-open */ .tod-header-avatar-widget:hover .tod-header-dropdown, .tod-header-avatar-widget:focus-within .tod-header-dropdown, .tod-header-avatar-widget.is-open .tod-header-dropdown { opacity: 1; visibility: visible; transform: translateY(0); pointer-events: auto; transition: opacity 0.18s ease, transform 0.18s ease, visibility 0s linear 0s; } .tod-header-dropdown__item { display: flex; align-items: center; gap: 8px; padding: 9px 14px; font-size: 0.85rem; color: var(--tod-text, #c8c8c8); text-decoration: none; transition: background var(--tod-transition, 0.15s ease), color var(--tod-transition, 0.15s ease); white-space: nowrap; } .tod-header-dropdown__item:hover { background: rgba(255, 215, 0, 0.1); color: var(--tod-gold, #FFD700); } .tod-header-dropdown__item--danger { color: #c0392b; } .tod-header-dropdown__item--danger:hover { background: rgba(192, 57, 43, 0.12); color: #e74c3c; } .tod-header-dropdown__divider { height: 1px; background: var(--tod-border, #2a2a2a); margin: 2px 0; } /* -- Responsive: tighten on small screens ------------------- */ @media (max-width: 640px) { .tod-header-username { display: none; } .tod-header-avatar { width: 42px; height: 42px; } .tod-header-avatar--placeholder { width: 42px; height: 42px; } } /* ============================================================ MOBILE NAVIGATION (v1.0.60) Hamburger button + slide-down nav panel for screens ≤ 768px. On desktop the hamburger is hidden and the inline nav shows. On mobile the inline nav is hidden and the panel is used. ============================================================ */ /* -- Hamburger button --------------------------------------- */ .site-header__hamburger { display: none; /* hidden on desktop */ flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 38px; height: 38px; padding: 6px; margin-left: auto; background: transparent; border: 1px solid var(--tod-border-gold, #8B6914); border-radius: var(--tod-radius, 4px); cursor: pointer; flex-shrink: 0; transition: background var(--tod-transition, 0.15s ease); } .site-header__hamburger:hover { background: rgba(255, 215, 0, 0.1); } .site-header__hamburger span { display: block; width: 20px; height: 2px; background: var(--tod-gold, #FFD700); border-radius: 2px; transition: transform 0.2s ease, opacity 0.2s ease; transform-origin: center; } /* Animate to X when open */ .site-header__hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .site-header__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .site-header__hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* -- Mobile nav panel --------------------------------------- */ .tod-mobile-nav { display: none; /* JS toggles .is-open */ position: absolute; top: var(--tod-header-h, 72px); left: 0; right: 0; background: rgba(13, 13, 13, 0.98); border-bottom: 1px solid var(--tod-border-gold, #8B6914); z-index: 99; padding: 0.75rem 1rem 1rem; box-shadow: 0 6px 24px rgba(0, 0, 0, 0.7); } .tod-mobile-nav.is-open { display: block; } .tod-mobile-nav__list { list-style: none; padding: 0; margin: 0 0 0.5rem; display: flex; flex-direction: column; gap: 2px; } .tod-mobile-nav__list li a { display: block; padding: 0.6rem 0.75rem; border-radius: var(--tod-radius, 4px); font-size: 0.95rem; color: var(--tod-text, #c8c8c8); text-decoration: none; transition: background var(--tod-transition, 0.15s ease), color var(--tod-transition, 0.15s ease); } .tod-mobile-nav__list li a:hover, .tod-mobile-nav__list li.current-menu-item > a { background: rgba(255, 215, 0, 0.1); color: var(--tod-gold, #FFD700); } .tod-mobile-nav__login { display: block; width: 100%; text-align: center; margin-top: 0.5rem; } @media (max-width: 768px) { /* Show hamburger, hide inline desktop nav links */ .site-header__hamburger { display: flex; } .site-header__nav .main-navigation { display: none; } /* Keep the avatar widget visible on mobile */ .site-header__nav { gap: 0.25rem; } } /* ============================================================ 403 / 404 ERROR PAGE STYLES (v1.0.60) Moved from inline