/* ========================================================= PTK HOME BLOCKS v1.2.11 — STABLE GOLD BORDER FEEDBACK Unified pointer, keyboard and touch feedback for every section. ========================================================= */ .ptk-home-section-action { position: relative; isolation: isolate; border: 1px solid transparent !important; border-radius: 99px !important; touch-action: manipulation; transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease !important; } .ptk-home-section-action::after { content: ""; position: absolute; inset: 0; z-index: 2; border: 1px solid transparent; border-radius: inherit; pointer-events: none; transition: box-shadow 0.12s ease; } .ptk-home-section-action:hover, .ptk-home-section-action:focus, .ptk-home-section-action:focus-visible { border-color: transparent !important; color: var(--ptk-gold-soft, #e4ca8c) !important; box-shadow: 0 0 0 3px rgba(var(--ptk-gold-rgb, 210, 180, 111), 0.1), 0 8px 18px rgba(0, 0, 0, 0.22), inset 0 1px rgba(255, 255, 255, 0.05) !important; outline: none !important; transform: none !important; } .ptk-home-section-action:hover::after, .ptk-home-section-action:focus::after, .ptk-home-section-action:focus-visible::after, .ptk-home-section-action:active::after, .ptk-home-section-action[aria-current="page"]::after, .ptk-home-section-action.is-active::after { border-color: var(--ptk-gold, #d2b46f); box-shadow: inset 0 0 0 1px rgba(255, 235, 184, 0.12); } .ptk-home-section-action:active { border-color: transparent !important; background: #332d21 !important; color: #f7e8bd !important; box-shadow: 0 0 0 4px rgba(var(--ptk-gold-rgb, 210, 180, 111), 0.15), inset 0 2px 7px rgba(0, 0, 0, 0.25) !important; transform: none !important; } .ptk-home-section-action[aria-current="page"], .ptk-home-section-action.is-active { border-color: transparent !important; background: #302b21 !important; color: var(--ptk-gold-soft, #e4ca8c) !important; box-shadow: 0 0 0 3px rgba(var(--ptk-gold-rgb, 210, 180, 111), 0.1), inset 0 1px rgba(255, 255, 255, 0.05) !important; } /* * All clickable content keeps a transparent border at rest. Turning that * existing border gold on interaction avoids layout shifts on mouse or touch. * Hero slider controls are intentionally excluded to preserve the v1.1.7 UI. */ .ptk-home-categories .ptk-home-cat-card, .ptk-home-posts .ptk-home-card, .ptk-home-vip-shops .ptk-home-shop-card, .ptk-home-forum-rooms .ptk-home-forum-room-card, .ptk-home-topics .ptk-home-forum-item, .ptk-home-tags .ptk-home-tag-cloud > a { border: 1px solid transparent !important; transition: border-color 0.16s ease, background 0.16s ease, color 0.16s ease, box-shadow 0.16s ease, transform 0.12s ease !important; } .ptk-home-categories .ptk-home-cat-card:hover, .ptk-home-categories .ptk-home-cat-card:focus, .ptk-home-categories .ptk-home-cat-card:focus-visible, .ptk-home-categories .ptk-home-cat-card:active, .ptk-home-categories .ptk-home-cat-card.is-active, .ptk-home-posts .ptk-home-card:hover, .ptk-home-posts .ptk-home-card:focus-within, .ptk-home-posts .ptk-home-card:active, .ptk-home-vip-shops .ptk-home-shop-card:hover, .ptk-home-vip-shops .ptk-home-shop-card:focus, .ptk-home-vip-shops .ptk-home-shop-card:focus-visible, .ptk-home-vip-shops .ptk-home-shop-card:active, .ptk-home-forum-rooms .ptk-home-forum-room-card:hover, .ptk-home-forum-rooms .ptk-home-forum-room-card:focus, .ptk-home-forum-rooms .ptk-home-forum-room-card:focus-visible, .ptk-home-forum-rooms .ptk-home-forum-room-card:active, .ptk-home-topics .ptk-home-forum-item:hover, .ptk-home-topics .ptk-home-forum-item:focus, .ptk-home-topics .ptk-home-forum-item:focus-visible, .ptk-home-topics .ptk-home-forum-item:active, .ptk-home-tags .ptk-home-tag-cloud > a:hover, .ptk-home-tags .ptk-home-tag-cloud > a:focus, .ptk-home-tags .ptk-home-tag-cloud > a:focus-visible, .ptk-home-tags .ptk-home-tag-cloud > a:active { border-color: var(--ptk-gold, #d2b46f) !important; box-shadow: 0 0 0 2px rgba(var(--ptk-gold-rgb, 210, 180, 111), 0.12), 0 10px 22px rgba(0, 0, 0, 0.24), inset 0 0 0 1px rgba(255, 235, 184, 0.1) !important; outline: none !important; } /* * The amulet renderer has both a moving wrapper and a moving card. Draw one * top-layer border on the stable wrapper so images and external card CSS can * never cover it or toggle hover at the pointer edge. */ .ptk-home-section.ptk-home-amulets .ptk-home-amulet-shop-card-wrap { position: relative; isolation: isolate; transform: none !important; } .ptk-home-section.ptk-home-amulets .ptk-home-amulet-shop-card-wrap::after { content: ""; position: absolute; inset: 0; z-index: 20; border: 1px solid transparent; border-radius: inherit; pointer-events: none; transition: box-shadow 0.12s ease; } .ptk-home-section.ptk-home-amulets .ptk-home-amulet-shop-card-wrap:hover, .ptk-home-section.ptk-home-amulets .ptk-home-amulet-shop-card-wrap:focus-within, .ptk-home-section.ptk-home-amulets .ptk-home-amulet-shop-card-wrap:active, .ptk-home-section.ptk-home-amulets .ptk-home-amulet-shop-card-wrap:hover .ptk-amulet-card, .ptk-home-section.ptk-home-amulets .ptk-home-amulet-shop-card-wrap:hover .ptk-amulet-shop__card, .ptk-home-section.ptk-home-amulets .ptk-home-amulet-shop-card-wrap:focus-within .ptk-amulet-card, .ptk-home-section.ptk-home-amulets .ptk-home-amulet-shop-card-wrap:focus-within .ptk-amulet-shop__card, .ptk-home-section.ptk-home-amulets .ptk-home-amulet-shop-card-wrap:active .ptk-amulet-card, .ptk-home-section.ptk-home-amulets .ptk-home-amulet-shop-card-wrap:active .ptk-amulet-shop__card { transform: none !important; } .ptk-home-section.ptk-home-amulets .ptk-home-amulet-shop-card-wrap:hover::after, .ptk-home-section.ptk-home-amulets .ptk-home-amulet-shop-card-wrap:focus-within::after, .ptk-home-section.ptk-home-amulets .ptk-home-amulet-shop-card-wrap:active::after { border-color: var(--ptk-gold, #d2b46f); box-shadow: inset 0 0 0 1px rgba(255, 235, 184, 0.12); } /* Sponsor gradient lives on ::after, so its gold line uses ::before above it. */ .ptk-home-sponsor-card { isolation: isolate; border: 1px solid transparent !important; transform: none !important; } .ptk-home-sponsor-card::before { content: ""; position: absolute; inset: 0; z-index: 4; border: 1px solid transparent; border-radius: inherit; pointer-events: none; transition: box-shadow 0.12s ease; } .ptk-home-sponsor-card:hover, .ptk-home-sponsor-card:focus-within, .ptk-home-sponsor-card:active, .ptk-home-sponsor-card:has(.ptk-home-btn:active) { border-color: transparent !important; transform: none !important; } .ptk-home-sponsor-card:hover::before, .ptk-home-sponsor-card:focus-within::before, .ptk-home-sponsor-card:active::before, .ptk-home-sponsor-card:has(.ptk-home-btn:active)::before { border-color: var(--ptk-gold, #d2b46f); box-shadow: inset 0 0 0 1px rgba(255, 235, 184, 0.12); } /* Tag chips follow the same soft lift and press rhythm as the list cards. */ .ptk-home-tags .ptk-home-tag-cloud > a { transition: border-color 0.18s ease, background 0.18s ease, color 0.18s ease, box-shadow 0.18s ease, transform 0.2s cubic-bezier(0.2, 0.8, 0.2, 1) !important; will-change: transform; } .ptk-home-tags .ptk-home-tag-cloud > a:hover, .ptk-home-tags .ptk-home-tag-cloud > a:focus, .ptk-home-tags .ptk-home-tag-cloud > a:focus-visible { transform: translateY(-2px) !important; } .ptk-home-tags .ptk-home-tag-cloud > a:active { transform: translateY(0) scale(0.98) !important; } @media (prefers-reduced-motion: reduce) { .ptk-home-section-action { transition: none !important; } .ptk-home-section-action::after, .ptk-home-section.ptk-home-amulets .ptk-home-amulet-shop-card-wrap::after, .ptk-home-sponsor-card::before { transition: none !important; } .ptk-home-categories .ptk-home-cat-card, .ptk-home-posts .ptk-home-card, .ptk-home-vip-shops .ptk-home-shop-card, .ptk-home-forum-rooms .ptk-home-forum-room-card, .ptk-home-topics .ptk-home-forum-item, .ptk-home-tags .ptk-home-tag-cloud > a { transition: none !important; } .ptk-home-section-action:active { transform: none !important; } .ptk-home-tags .ptk-home-tag-cloud > a:hover, .ptk-home-tags .ptk-home-tag-cloud > a:focus, .ptk-home-tags .ptk-home-tag-cloud > a:focus-visible, .ptk-home-tags .ptk-home-tag-cloud > a:active { transform: none !important; } }