/** * HighPony Profile — design "návrh D" ported from mockups/ucet/navrh-d-kombinovany.html. * Everything is scoped under body.hp-profile-page / .hp-* so nothing leaks * into the rest of the shop. Bump HIGHPONY_PROFILE_VERSION on every change * (WP Fastest Cache keeps old bundles forever otherwise). */ :root { --hp-bg-deep: #0e0f26; --hp-gold: #ffc200; --hp-gold-soft: #ffd75e; --hp-pink: #f599ff; --hp-magenta: #ff7ad9; --hp-violet: #8b7bff; --hp-ink: #f4f2ff; --hp-ink-dim: rgba(244, 242, 255, .68); --hp-ink-faint: rgba(244, 242, 255, .56); --hp-glass-border: rgba(255, 255, 255, .22); --hp-glass-border-soft: rgba(255, 255, 255, .13); --hp-radius: 20px; --hp-shadow: 0 24px 70px rgba(0, 0, 0, .45); --hp-deco-gold: #d8ab55; --hp-deco-gold-hi: #ffdf8a; --hp-deco-gold-deep: #96702c; --hp-font-display: "Titan One", "Sanchez", serif; --hp-font-head: "Sanchez", serif; --hp-font-sub: "Domine", serif; --hp-deco-cap: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14' viewBox='0 0 40 14'%3E%3Cpath d='M2 13 V8 H12 V3 H28 V8 H38 V13' fill='none' stroke='%23d8ab55' stroke-width='2'/%3E%3Crect x='17' y='3.2' width='6' height='6' transform='rotate(45 20 6.2)' fill='%23ffdf8a' stroke='%2396702c' stroke-width='.8'/%3E%3Ccircle cx='9' cy='5.5' r='1.3' fill='%23d8ab55'/%3E%3Ccircle cx='31' cy='5.5' r='1.3' fill='%23d8ab55'/%3E%3C/svg%3E"); --hp-deco-cap-f: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='40' height='14' viewBox='0 0 40 14'%3E%3Cpath d='M2 1 V6 H12 V11 H28 V6 H38 V1' fill='none' stroke='%23d8ab55' stroke-width='2'/%3E%3Crect x='17' y='4.8' width='6' height='6' transform='rotate(45 20 7.8)' fill='%23ffdf8a' stroke='%2396702c' stroke-width='.8'/%3E%3Ccircle cx='9' cy='8.5' r='1.3' fill='%23d8ab55'/%3E%3Ccircle cx='31' cy='8.5' r='1.3' fill='%23d8ab55'/%3E%3C/svg%3E"); --hp-deco-tl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='M12.5 1.5 H5 Q1.5 1.5 1.5 5 V12.5' fill='none' stroke='%23d8ab55' stroke-width='2'/%3E%3Cpath d='M12.5 5.5 H7.2 Q5.5 5.5 5.5 7.2 V12.5' fill='none' stroke='%23ffdf8a' stroke-width='1'/%3E%3C/svg%3E"); --hp-deco-tr: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='M.5 1.5 H8 Q11.5 1.5 11.5 5 V12.5' fill='none' stroke='%23d8ab55' stroke-width='2'/%3E%3Cpath d='M.5 5.5 H5.8 Q7.5 5.5 7.5 7.2 V12.5' fill='none' stroke='%23ffdf8a' stroke-width='1'/%3E%3C/svg%3E"); --hp-deco-bl: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='M12.5 11.5 H5 Q1.5 11.5 1.5 8 V.5' fill='none' stroke='%23d8ab55' stroke-width='2'/%3E%3Cpath d='M12.5 7.5 H7.2 Q5.5 7.5 5.5 5.8 V.5' fill='none' stroke='%23ffdf8a' stroke-width='1'/%3E%3C/svg%3E"); --hp-deco-br: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='13' height='13' viewBox='0 0 13 13'%3E%3Cpath d='M.5 11.5 H8 Q11.5 11.5 11.5 8 V.5' fill='none' stroke='%23d8ab55' stroke-width='2'/%3E%3Cpath d='M.5 7.5 H5.8 Q7.5 7.5 7.5 5.8 V.5' fill='none' stroke='%23ffdf8a' stroke-width='1'/%3E%3C/svg%3E"); --hp-wood-grain: url("data:image/svg+xml;utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='340' height='150'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.011 0.21' numOctaves='3' seed='7'/%3E%3CfeColorMatrix type='matrix' values='0 0 0 0 0.22 0 0 0 0 0.12 0 0 0 0 0.04 0 0 0 0.75 0'/%3E%3C/filter%3E%3Crect width='340' height='150' filter='url(%23w)'/%3E%3C/svg%3E"); } /* the page ground only where our own layout owns the page */ body.hp-profile-page { background: var(--hp-bg-deep); overflow-x: clip; } /* ---------- painted backdrop ---------- */ body.hp-profile-page .hp-sky { position: fixed; inset: 0; z-index: -3; pointer-events: none; background: radial-gradient(120% 60% at 50% 108%, rgba(255, 122, 217, .28), transparent 60%), radial-gradient(70% 45% at 78% 90%, rgba(255, 194, 0, .16), transparent 60%), linear-gradient(180deg, #0d0e22 0%, #1a1b3a 34%, #33245c 62%, #5c2d6e 80%, #8a3f76 92%, #b85a77 100%); } body.hp-profile-page .hp-scene { position: fixed; left: 0; right: 0; bottom: 0; z-index: -1; pointer-events: none; width: 100%; height: 52vh; display: block; } body.hp-profile-page .hp-scene .tw { animation: hpTwinkle 3.4s ease-in-out infinite alternate; } body.hp-profile-page .hp-scene .tw:nth-of-type(2n) { animation-delay: .9s; } body.hp-profile-page .hp-scene .tw:nth-of-type(3n) { animation-delay: 1.7s; animation-duration: 4.6s; } @keyframes hpTwinkle { from { opacity: .25; } to { opacity: 1; } } body.hp-profile-page .hp-vig { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(6, 6, 16, .55) 100%); } /* ---------- layout & glass ---------- */ .hp-profile { max-width: 1160px; margin: 0 auto; color: var(--hp-ink); font-size: 15px; line-height: 1.5; } /* --- pull the whole profile up under the header --- The empty band above the welcome sign belongs to the account page's Elementor container, not to this plugin (.hp-profile has no top padding of its own). Rather than guess which ancestor owns that padding, we simply lift our own root by --hp-top-trim (set from the wp-admin setting). The painted scene is position:fixed, so it does not move with it. Scoped to our body class: no other page on the site is affected. */ body.hp-profile-page .hp-profile { margin-top: calc(-1 * var(--hp-top-trim, 90px)); } @media (max-width: 720px) { /* phones have a shorter header — lift less, or the sign tucks under it */ body.hp-profile-page .hp-profile { margin-top: calc(-0.5 * var(--hp-top-trim, 90px)); } } .hp-glass { background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .08) 60%, rgba(255, 255, 255, .055)), linear-gradient(rgba(14, 15, 38, .36), rgba(14, 15, 38, .36)); border: 1px solid var(--hp-glass-border); border-radius: var(--hp-radius); box-shadow: var(--hp-shadow), inset 0 1px 0 rgba(255, 255, 255, .18); -webkit-backdrop-filter: blur(16px) saturate(1.15) brightness(.9); backdrop-filter: blur(16px) saturate(1.15) brightness(.9); position: relative; } .hp-dash { display: grid; gap: 22px; grid-template-columns: repeat(12, minmax(0, 1fr)); grid-template-areas: "profile profile profile profile profile profile profile wheel wheel wheel wheel wheel" "streak streak streak streak streak streak streak wheel wheel wheel wheel wheel" "badges badges badges badges badges badges badges badges badges badges badges badges" "coupons coupons coupons coupons coupons orders orders orders orders orders orders orders"; } .hp-a-profile { grid-area: profile; } .hp-a-wheel { grid-area: wheel; display: flex; flex-direction: column; align-items: center; text-align: center; } .hp-a-streak { grid-area: streak; } .hp-a-badges { grid-area: badges; } .hp-a-coupons { grid-area: coupons; } .hp-a-orders { grid-area: orders; } .hp-dash > section, .hp-chest-note { padding: 26px 26px 24px; } .hp-chest-note { margin-top: 22px; } /* ---------- wooden section titles ---------- */ .hp-card-h { font-family: var(--hp-font-display); font-weight: 400; font-size: 16px; color: #ffe9b0; letter-spacing: .04em; display: inline-flex; align-items: center; gap: 9px; position: relative; padding: 9px 27px 10px; margin: 0; background: linear-gradient(180deg, rgba(255, 236, 200, .15), rgba(0, 0, 0, 0) 32%, rgba(0, 0, 0, .22)), var(--hp-wood-grain), linear-gradient(180deg, #8a5426 0%, #6d3d17 55%, #57300f 100%); background-size: auto, 340px 150px, auto; background-blend-mode: normal, overlay, normal; border-radius: 12px 9px 11px 8px / 9px 12px 8px 11px; box-shadow: inset 0 2px 0 rgba(255, 225, 170, .28), inset 0 -3px 0 rgba(30, 15, 3, .5), inset 0 0 0 2px rgba(52, 28, 8, .65), 0 8px 20px rgba(0, 0, 0, .4); text-shadow: 0 2px 0 rgba(30, 14, 2, .75), 0 0 16px rgba(255, 194, 0, .25); transform: rotate(-1deg); } .hp-card-h::before, .hp-card-h::after { content: ""; position: absolute; top: 50%; width: 6px; height: 6px; border-radius: 50%; transform: translateY(-50%); background: radial-gradient(circle at 34% 28%, #ffe9b0, #c98f3a 46%, #5f4113 82%); box-shadow: 0 1px 2px rgba(0, 0, 0, .6); } .hp-card-h::before { left: 9px; } .hp-card-h::after { right: 9px; } .hp-dash > section:nth-child(even) .hp-card-h { transform: rotate(.9deg); } .hp-card-sub { font-family: var(--hp-font-head); font-style: italic; font-size: 13px; letter-spacing: .3px; color: rgba(255, 236, 200, .75); margin: 10px 0 0; } .hp-empty { font-family: var(--hp-font-head); font-style: italic; color: rgba(255, 236, 200, .68); margin-top: 14px; } /* ---------- quick nav: art-deco frames ---------- */ .hp-qnav { display: flex; flex-wrap: wrap; gap: 32px 40px; justify-content: center; margin: 10px auto 46px; max-width: 880px; padding: 0 12px; } .hp-fbtn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-width: 140px; padding: 11px 14px; text-decoration: none; font-family: var(--hp-font-head); font-size: 12.5px; letter-spacing: .12em; text-transform: uppercase; background: radial-gradient(130% 150% at 50% -20%, var(--thi), transparent 55%), linear-gradient(180deg, var(--ta), var(--tb)); border: 2px solid transparent; border-image: linear-gradient(180deg, var(--hp-deco-gold-hi), var(--hp-deco-gold) 45%, var(--hp-deco-gold-deep)) 1; box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .12), 0 6px 18px rgba(0, 0, 0, .4); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } .hp-fbtn span { background: linear-gradient(180deg, #f7e6bd 20%, var(--hp-deco-gold) 55%, var(--hp-deco-gold-deep)); -webkit-background-clip: text; background-clip: text; color: transparent; filter: drop-shadow(0 1px 0 rgba(0, 0, 0, .55)) drop-shadow(0 0 10px var(--tglow)); } .hp-fbtn .ico { font-size: 14px; font-style: normal; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .5)); } .hp-fbtn::before { content: ""; position: absolute; inset: 5px; border: 1px solid rgba(216, 171, 85, .45); pointer-events: none; } .hp-fbtn::after { content: ""; position: absolute; left: 12%; right: 12%; bottom: -17px; height: 10px; border-radius: 50%; pointer-events: none; background: radial-gradient(50% 100% at 50% 50%, var(--tglow), transparent 70%); filter: blur(4px); opacity: .7; } .hp-fbtn .deco { position: absolute; inset: -12px -8px; pointer-events: none; background: var(--hp-deco-cap) center top/40px 14px no-repeat, var(--hp-deco-cap-f) center bottom/40px 14px no-repeat, var(--hp-deco-tl) left 5px top 9px/13px 13px no-repeat, var(--hp-deco-tr) right 5px top 9px/13px 13px no-repeat, var(--hp-deco-bl) left 5px bottom 9px/13px 13px no-repeat, var(--hp-deco-br) right 5px bottom 9px/13px 13px no-repeat; } .hp-fbtn .tip { position: absolute; top: 50%; width: 17px; height: 9px; transform: translateY(-50%); pointer-events: none; } .hp-fbtn .tip.l { left: -15px; } .hp-fbtn .tip.r { right: -15px; } .hp-fbtn .tip::before { content: ""; position: absolute; top: 50%; left: 0; right: 0; height: 1px; transform: translateY(-50%); background: linear-gradient(90deg, transparent, rgba(216, 171, 85, .9)); } .hp-fbtn .tip.r::before { background: linear-gradient(90deg, rgba(216, 171, 85, .9), transparent); } .hp-fbtn .tip::after { content: ""; position: absolute; top: 50%; width: 7px; height: 7px; background: linear-gradient(135deg, var(--hp-deco-gold-hi), var(--hp-deco-gold-deep)); transform: translateY(-50%) rotate(45deg); box-shadow: 0 0 9px var(--tglow); } .hp-fbtn .tip.l::after { left: -2px; } .hp-fbtn .tip.r::after { right: -2px; } .hp-fbtn:hover { transform: translateY(-2px); filter: brightness(1.14) saturate(1.05); } .hp-fbtn:focus-visible { outline: 2px solid var(--hp-gold-soft); outline-offset: 7px; } .t-gold { --ta: rgba(124, 86, 20, .5); --tb: rgba(58, 38, 9, .62); --thi: rgba(255, 194, 0, .34); --tglow: rgba(255, 194, 0, .42); } .t-pink { --ta: rgba(140, 40, 96, .44); --tb: rgba(64, 15, 44, .6); --thi: rgba(255, 122, 217, .26); --tglow: rgba(255, 122, 217, .34); } .t-violet { --ta: rgba(66, 54, 144, .46); --tb: rgba(29, 23, 68, .62); --thi: rgba(139, 123, 255, .26); --tglow: rgba(139, 123, 255, .36); } .t-wine { --ta: rgba(104, 36, 52, .42); --tb: rgba(48, 14, 24, .58); --thi: rgba(255, 110, 140, .18); --tglow: rgba(255, 110, 150, .28); } /* ---------- buttons ---------- */ /* Doubled class on purpose: at (0,1,0) this base rule TIES with the theme reset's [type=button] and loses on load order — measured live, every plain .hp-btn was rendering with the reset's 3px radius and 8/16 padding. (0,2,0) settles it; the later .pink/.compact/:hover rules still win their ties. */ .hp-btn.hp-btn { font-family: var(--hp-font-head); font-size: 15px; letter-spacing: .02em; border: none; border-radius: 14px; cursor: pointer; padding: 13px 22px; color: #2a1a00; background: linear-gradient(160deg, #ffd75e, var(--hp-gold) 60%, #e8a800); box-shadow: 0 8px 26px rgba(255, 194, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .55); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; display: inline-flex; align-items: center; gap: 8px; text-decoration: none; } .hp-btn:hover { transform: translateY(-2px); filter: saturate(1.08); } .hp-btn:disabled { filter: grayscale(.5) brightness(.8); cursor: default; transform: none; box-shadow: none; } .hp-btn.pink { color: #33052a; background: linear-gradient(160deg, #ffb2ea, var(--hp-magenta) 65%, #f052bd); box-shadow: 0 8px 26px rgba(255, 122, 217, .32), inset 0 1px 0 rgba(255, 255, 255, .55); } .hp-btn.compact { padding: 7px 14px; font-size: 12.5px; border-radius: 999px; box-shadow: 0 4px 14px rgba(255, 194, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .55); color: #2a1a00; } .hp-btn.hp-banked { margin-top: 12px; } .hp-link { color: var(--hp-pink); text-decoration: none; border-bottom: 1px dotted rgba(245, 153, 255, .5); } .hp-link:hover { color: #fff; border-color: #fff; } /* ---------- profile card ---------- */ .hp-profile-top { display: flex; gap: 20px; align-items: center; } .hp-avatar-ring { flex: 0 0 auto; width: 96px; height: 96px; border-radius: 50%; padding: 4px; position: relative; background: conic-gradient(from 210deg, var(--hp-gold), var(--hp-magenta), var(--hp-violet), var(--hp-gold)); box-shadow: 0 0 26px rgba(255, 122, 217, .35); } .hp-avatar-ring svg { display: block; width: 100%; height: 100%; border-radius: 50%; background: radial-gradient(circle at 34% 28%, #3a3670, #201f45 70%); } .hp-avatar-lvl { position: absolute; bottom: -5px; right: -5px; font-family: var(--hp-font-display); font-size: 13px; color: #2a1a00; background: linear-gradient(160deg, #ffd75e, var(--hp-gold)); border-radius: 999px; padding: 3px 9px; box-shadow: 0 4px 12px rgba(255, 194, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .5); border: 2px solid #1a1b3a; } .hp-name-row { display: flex; align-items: center; gap: 9px; min-width: 0; } .hp-name { font-family: var(--hp-font-head); font-size: 24px; color: var(--hp-ink); padding: 2px 6px; margin-left: -6px; border-radius: 8px; border: 1px dashed transparent; min-width: 60px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: 100%; } .hp-name-row .hp-pen { flex: 0 0 auto; } .hp-name[contenteditable="true"] { border-color: rgba(245, 153, 255, .6); background: rgba(10, 10, 30, .4); outline: none; } /* same doubled-class fix as .hp-btn — the pencil was a pink Roboto slab */ .hp-pen.hp-pen { border: 1px solid var(--hp-glass-border-soft); cursor: pointer; font-size: 13px; line-height: 1; width: 30px; height: 30px; padding: 0; box-sizing: border-box; min-height: 0; display: inline-grid; place-items: center; border-radius: 9px; color: var(--hp-ink-dim); background: rgba(255, 255, 255, .08); } .hp-mail { font-size: 13px; color: var(--hp-ink-faint); margin-top: 2px; font-family: var(--hp-font-sub); } .hp-rank-line { display: flex; align-items: center; gap: 10px; margin-top: 9px; flex-wrap: wrap; } .hp-rank-chip { display: inline-flex; align-items: center; gap: 7px; font-family: var(--hp-font-display); font-size: 14px; letter-spacing: .03em; color: #2b0e33; padding: 6px 14px; border-radius: 999px; background: linear-gradient(160deg, #ffc0ec, var(--hp-magenta) 60%, #e44db2); box-shadow: 0 6px 18px rgba(255, 122, 217, .4), inset 0 1px 0 rgba(255, 255, 255, .5); } .hp-rank-of { font-family: var(--hp-font-head); font-style: italic; font-size: 12px; letter-spacing: .3px; color: rgba(255, 236, 200, .68); } /* ---------- XP (Body) bar ---------- */ .hp-xp-block { margin-top: 22px; } .hp-xp-title { font-family: var(--hp-font-display); font-weight: 400; font-size: 21px; color: var(--hp-gold); letter-spacing: .03em; margin: 0 0 9px; text-shadow: 0 0 18px rgba(255, 194, 0, .3); } .hp-xp-title small { font-family: var(--hp-font-sub); font-size: 12px; color: var(--hp-ink-dim); letter-spacing: .04em; } .hp-xp-overlay { position: absolute; inset: 0; z-index: 2; display: grid; place-items: center; font-family: var(--hp-font-display); font-size: 13px; letter-spacing: .04em; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .8), 0 0 8px rgba(0, 0, 0, .5); pointer-events: none; } .hp-level-chip { display: inline-flex; align-items: center; gap: 8px; font-family: var(--hp-font-display); font-size: 15px; letter-spacing: .03em; color: #2b0e33; padding: 7px 16px 7px 10px; border-radius: 999px; background: linear-gradient(160deg, #ffc0ec, var(--hp-magenta) 60%, #e44db2); box-shadow: 0 6px 18px rgba(255, 122, 217, .4), inset 0 1px 0 rgba(255, 255, 255, .5); } .hp-level-ico { font-size: 17px; filter: drop-shadow(0 1px 1px rgba(0, 0, 0, .4)); } .hp-xp-bar { height: 26px; border-radius: 999px; overflow: hidden; position: relative; background: rgba(10, 10, 26, .6); border: 1.5px solid var(--hp-glass-border); box-shadow: inset 0 6px 14px rgba(0, 0, 0, .55), 0 1px 0 rgba(255, 255, 255, .12); } .hp-xp-fill { height: 100%; width: 0; border-radius: 999px; position: relative; background: linear-gradient(90deg, #8a63ff, var(--hp-magenta) 55%, var(--hp-gold)); box-shadow: 0 0 22px rgba(255, 122, 217, .75), inset 0 2px 5px rgba(255, 255, 255, .45); transition: width 1.6s cubic-bezier(.25, .9, .3, 1); } .hp-xp-fill::after { content: ""; position: absolute; inset: 0; border-radius: inherit; background: linear-gradient(110deg, transparent 30%, rgba(255, 255, 255, .5) 46%, transparent 60%); background-size: 220% 100%; animation: hpShimmer 3.2s linear infinite; } @keyframes hpShimmer { from { background-position: 180% 0; } to { background-position: -80% 0; } } .hp-xp-fill .bub { position: absolute; bottom: 2px; width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .65); animation: hpBub 2.8s ease-in infinite; } .hp-xp-fill .bub.b2 { width: 4px; height: 4px; animation-delay: 1.1s; animation-duration: 3.4s; } .hp-xp-fill .bub.b3 { width: 5px; height: 5px; animation-delay: 2s; animation-duration: 2.4s; } @keyframes hpBub { 0% { transform: translateY(0); opacity: 0; } 25% { opacity: .9; } 100% { transform: translateY(-19px); opacity: 0; } } .hp-xp-next { font-size: 13px; color: rgba(255, 236, 200, .8); margin: 9px 0 0; font-family: var(--hp-font-head); font-style: italic; letter-spacing: .3px; } .hp-xp-next b { color: var(--hp-gold); font-weight: 600; font-style: normal; } .hp-xp-how { padding-left: 13px; margin: 9px 0 0; font-family: var(--hp-font-head); font-style: italic; font-size: 12.5px; letter-spacing: .3px; color: rgba(255, 236, 200, .72); } .hp-xp-how b { color: var(--hp-gold); font-style: normal; font-weight: 600; } .hp-xp-how .hp-boost { color: var(--hp-magenta); } /* What the NEXT level brings — one compact chip line ("Level 7: −10 % · 🎁"), LevelRewards::preview_line. Plain text in one pill; wraps on a phone. */ .hp-next-rw { margin: 10px 0 0; padding-left: 13px; } .hp-next-rw[hidden] { display: none; } .hp-next-rw span { display: inline-block; max-width: 100%; padding: 4px 11px; border-radius: 999px; font-family: var(--hp-font-sub); font-size: 12px; font-weight: 600; letter-spacing: .2px; line-height: 1.45; color: var(--hp-gold); background: rgba(255, 194, 0, .1); border: 1px solid rgba(255, 194, 0, .32); overflow-wrap: anywhere; } /* ---------- wheel card ---------- */ .hp-wheel-stage { position: relative; width: min(250px, 72vw); margin: 18px 0 6px; } .hp-wheel-glow { position: absolute; left: -9%; right: -9%; top: -7%; bottom: 24%; border-radius: 50%; z-index: 0; background: radial-gradient(closest-side, rgba(255, 122, 217, .22), transparent 70%); animation: hpPulse 4s ease-in-out infinite; } @keyframes hpPulse { 0%, 100% { opacity: .6; transform: scale(.97); } 50% { opacity: 1; transform: scale(1.03); } } .hp-wheel-svg { position: relative; z-index: 1; width: 100%; height: auto; display: block; } .hp-wheel-rot { transform-origin: 110px 110px; animation: hpIdle 60s linear infinite; } .hp-wheel-stage:hover .hp-wheel-rot { animation-play-state: paused; } @keyframes hpIdle { from { transform: rotate(0); } to { transform: rotate(360deg); } } .hp-wheel-note { font-family: var(--hp-font-head); font-style: italic; font-size: 12.5px; letter-spacing: .3px; color: rgba(255, 236, 200, .72); margin: 10px 0 0; } /* ---------- streak ---------- */ .hp-streak-head { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; } .hp-streak-count { font-family: var(--hp-font-display); font-size: 15px; color: var(--hp-magenta); text-shadow: 0 0 16px rgba(255, 122, 217, .4); } .hp-streak-row { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 9px; margin-top: 18px; } .hp-day { border-radius: 15px; padding: 11px 4px 9px; text-align: center; position: relative; background: rgba(255, 255, 255, .05); border: 1px solid var(--hp-glass-border-soft); transition: transform .18s ease, box-shadow .18s ease; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } .hp-day .dow { font-family: var(--hp-font-sub); font-size: 10px; letter-spacing: .08em; color: var(--hp-ink-faint); text-transform: uppercase; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; } .hp-day.today .dow { font-size: 9px; letter-spacing: .05em; } .hp-day .ic { font-size: 19px; display: block; margin: 5px 0 1px; } .hp-day .xp { font-size: 10.5px; color: var(--hp-ink-faint); } .hp-day.claimed { background: rgba(255, 194, 0, .09); border-color: rgba(255, 194, 0, .35); } .hp-day.claimed .xp { color: rgba(255, 215, 94, .8); } .hp-day.locked { opacity: .45; } .hp-day.today { background: rgba(255, 122, 217, .12); border: 1.5px solid var(--hp-magenta); box-shadow: 0 0 22px rgba(255, 122, 217, .3); cursor: pointer; animation: hpTodayPulse 2.2s ease-in-out infinite; } @keyframes hpTodayPulse { 0%, 100% { box-shadow: 0 0 14px rgba(255, 122, 217, .25); } 50% { box-shadow: 0 0 28px rgba(255, 122, 217, .5); } } .hp-day.today:hover { transform: translateY(-3px); } .hp-day.today .dow { color: var(--hp-magenta); } .hp-day.wheelday { cursor: default; background: rgba(255, 194, 0, .09); border: 1.5px solid rgba(255, 194, 0, .5); box-shadow: 0 0 16px rgba(255, 194, 0, .18); } .hp-day.wheelday .dow, .hp-day.wheelday .xp { color: var(--hp-gold-soft); font-weight: 700; } .hp-day.pop .ic { animation: hpClaimPop .55s cubic-bezier(.3, 1.6, .5, 1); } @keyframes hpClaimPop { 0% { transform: scale(.4) rotate(-14deg); } 70% { transform: scale(1.35) rotate(6deg); } 100% { transform: scale(1); } } .hp-streak-cta { display: flex; align-items: center; justify-content: flex-start; gap: 12px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px dashed rgba(255, 236, 200, .22); } .hp-cta-quip { font-family: var(--hp-font-head); font-style: italic; font-size: 12.5px; letter-spacing: .3px; color: rgba(255, 236, 200, .75); } /* ---------- coupons ---------- */ .hp-coupon { display: flex; align-items: stretch; margin-top: 15px; border-radius: 16px; overflow: hidden; background: rgba(255, 255, 255, .055); border: 1px solid var(--hp-glass-border-soft); transition: transform .18s ease, box-shadow .18s ease; } .hp-coupon:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0, 0, 0, .35); } .hp-coupon .val { flex: 0 0 96px; display: grid; place-items: center; text-align: center; font-family: var(--hp-font-display); font-size: 21px; line-height: 1.1; color: #2a1a00; background: linear-gradient(160deg, #ffd75e, var(--hp-gold) 65%, #e8a800); position: relative; } .hp-coupon .val small { display: block; font-family: var(--hp-font-sub); font-size: 9.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; margin-top: 2px; } .hp-coupon .val::after { content: ""; position: absolute; right: -1px; top: 0; bottom: 0; width: 2px; background-image: linear-gradient(to bottom, transparent 0 4px, rgba(14, 15, 38, .85) 4px 10px); background-size: 2px 14px; } .hp-coupon .body { flex: 1; padding: 13px 16px; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .hp-coupon .body b { font-family: var(--hp-font-sub); font-size: 14px; color: var(--hp-ink); } .hp-coupon .code { align-self: flex-start; font-family: monospace; font-weight: 700; font-size: 12.5px; letter-spacing: .14em; color: var(--hp-gold); background: rgba(255, 194, 0, .1); border: 1px dashed rgba(255, 194, 0, .5); padding: 3px 10px; border-radius: 8px; margin-top: 3px; cursor: pointer; } .hp-coupon .exp { font-family: var(--hp-font-head); font-style: italic; font-size: 11.5px; letter-spacing: .2px; color: rgba(255, 236, 200, .68); margin-top: 2px; } /* ---------- orders ---------- */ .hp-order-list { margin-top: 15px; display: flex; flex-direction: column; gap: 12px; } .hp-order { display: grid; grid-template-columns: auto 1fr auto auto; gap: 8px 16px; align-items: center; padding: 14px 18px; border-radius: 16px; text-decoration: none; background: rgba(255, 255, 255, .055); border: 1px solid var(--hp-glass-border-soft); transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .hp-order:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0, 0, 0, .35), 0 0 22px rgba(255, 194, 0, .08); border-color: rgba(255, 194, 0, .35); } .hp-order .num { font-family: var(--hp-font-sub); font-weight: 700; font-size: 14px; color: var(--hp-ink); } .hp-order .date { font-size: 12.5px; color: var(--hp-ink-faint); } .hp-order .sum { font-family: var(--hp-font-head); font-size: 15px; color: var(--hp-gold); text-align: right; } .hp-order .status { font-family: var(--hp-font-sub); font-size: 11px; font-weight: 700; letter-spacing: .06em; padding: 4px 11px; border-radius: 999px; white-space: nowrap; color: var(--hp-pink); background: rgba(245, 153, 255, .09); border: 1px solid rgba(245, 153, 255, .35); } .hp-order .status.s-completed { color: #7be8a8; background: rgba(123, 232, 168, .1); border-color: rgba(123, 232, 168, .35); } .hp-order .status.s-processing { color: var(--hp-gold-soft); background: rgba(255, 194, 0, .09); border-color: rgba(255, 194, 0, .35); } .hp-orders-all { margin: 14px 0 0; text-align: right; font-size: 13px; } /* ---------- modals ---------- */ /* 99992: above highpony-chat's #hp-chat-root (99990). At the same value the chat root, printed later in the footer, won — its teaser sat on "Zatoč si!" and a tap on the spin button opened the chat instead. */ .hp-modal { position: fixed; inset: 0; z-index: 99992; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center; padding: 18px; overflow: auto; } .hp-modal[hidden] { display: none; } .hp-backdrop { position: absolute; inset: 0; background: rgba(8, 8, 22, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .hp-mcard { /* 100% of the padded grid column, not 94vw: a viewport width inside a padded box overflowed it on every phone and the card sat off-centre (18 px gap left, 5 px right at 390 px). */ position: relative; width: min(408px, 100%); padding: 24px 22px 20px; margin: auto; display: flex; flex-direction: column; align-items: center; text-align: center; animation: hpWmIn .38s cubic-bezier(.2, .9, .3, 1.18); } /* * Overlay cards may not lean on backdrop-filter to be readable. WebKit reports * blur(16px) as supported AND returns it from getComputedStyle while painting * nothing — so the glass recipe that hides the page under Chrome leaves the * thank-you copy legible straight through the chest modal, colliding with the * modal's own text. Safari also drops the filter outright under Reduce * Transparency. The opaque base below carries the contrast on its own; the * gradients on top still give the glass look wherever the blur does land. */ .hp-modal .hp-mcard { background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .08) 60%, rgba(255, 255, 255, .055)), linear-gradient(rgba(20, 18, 48, .975), rgba(12, 11, 32, .985)); } @keyframes hpWmIn { from { opacity: 0; transform: translateY(20px) scale(.93); } to { opacity: 1; transform: none; } } .hp-mcard.wide { width: min(620px, 100%); } .hp-mcard.golden { border-color: rgba(255, 194, 0, .55); box-shadow: var(--hp-shadow), 0 0 52px rgba(255, 194, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .18); } .hp-mcard .hp-card-sub { margin-top: 12px; } .hp-wm-stage { margin: 4px 0 12px; } .hp-wm-stage svg { width: min(272px, 74vw); height: auto; display: block; margin: 0 auto; } .hp-wm-stage .hp-wheel-rot { animation: none; } .hp-mclose { position: absolute; top: 10px; right: 10px; width: 34px; height: 34px; border-radius: 50%; border: 1px solid var(--hp-glass-border-soft); background: rgba(255, 255, 255, .08); color: var(--hp-ink-dim); cursor: pointer; font-size: 13px; line-height: 1; } /* the kit paints buttons display:block with 8px/16px padding, which pushed the ✕ ~5px off-centre — pin the BOX where our own modals own the element */ .hp-modal .hp-mclose, .hp-xpop .hp-mclose, body.hp-profile-page .hp-mclose { display: grid !important; place-items: center !important; padding: 0 !important; box-sizing: border-box !important; line-height: 1 !important; text-align: center !important; } .hp-modal .hp-mclose:hover { background: rgba(255, 255, 255, .16); color: var(--hp-ink); } /* The ✕ stays on top and the wooden sign stays clear of it. At 320–340 px a long tier title ("💎 Diamantová truhlica") wrapped, grew to the full card width and — later in the DOM, with a transform of its own — painted over the ✕, so a tap on its centre hit the title and did nothing. 46 px = 2 × (34 px ✕ + 10 px inset − 22 px card padding) + 2 px for the sign's −1° tilt (44 px tall: 44 × sin 1° ≈ 0.8 px wider; a two-line sign ≈ 1.1), taken from both sides so the sign stays centred. The first cut reserved 8 px for the tilt and wrapped "💎 Diamantová truhlica" at 386–397 px, where it fitted clear of the ✕; now a title wraps only where it would otherwise run under the ✕. */ .hp-modal .hp-mclose { z-index: 2; } .hp-modal .hp-mcard > .hp-card-h { max-width: calc(100% - 46px); } .hp-result { min-height: 20px; margin: 11px 0 0; font-family: var(--hp-font-sub); font-size: 13.5px; color: var(--hp-gold); opacity: 0; transform: translateY(6px); transition: opacity .5s ease, transform .5s ease; } .hp-result.show { opacity: 1; transform: none; } /* the small lines under a wheel / chest result: where the code is, how many gifts are won */ .hp-result .hp-wm-lock { display: block; margin-top: 6px; font-size: 12.5px; line-height: 1.4; color: rgba(255, 236, 200, .86); } /* ---------- chest (Michal's rendered art + code-driven animation) ---------- */ .hp-chest-vis, .hp-ty-chest-vis { position: relative; width: 200px; margin: 0 auto 6px; cursor: pointer; filter: drop-shadow(0 12px 20px rgba(0, 0, 0, .5)); } .hp-ty-chest-vis { width: 230px; } /* * "Otvor truhlicu" in the welcome card is a plain #hpChestVis anchor, so the * browser parks the chest against the top edge and everything that gives it * meaning — the thank-you header and the XP line — ends up above the fold. * scroll-margin-top reserves room so the jump lands with that context still on * screen. Viewport-relative on purpose: a fixed pixel offset that frames the * chest on a laptop pushes it off a phone. */ #hpChestVis { scroll-margin-top: clamp(140px, 38vh, 420px); } /* ---------- mini XP popup ---------- */ .hp-xpop { position: fixed; inset: 0; z-index: 99995; display: none; place-items: center; padding: 18px; } .hp-xpop.on { display: grid; } .hp-xpop .bd { position: absolute; inset: 0; background: rgba(8, 8, 22, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .hp-xpop .card { position: relative; width: min(400px, 100%); border-radius: 18px; padding: 24px 22px 20px; text-align: center; background: linear-gradient(160deg, rgba(30, 25, 60, .88), rgba(15, 12, 35, .94)); border: 1px solid var(--hp-glass-border); box-shadow: 0 24px 70px rgba(0, 0, 0, .5); animation: hpXpopIn .4s cubic-bezier(.2, .9, .3, 1.2); } @keyframes hpXpopIn { from { opacity: 0; transform: translateY(22px) scale(.92); } to { opacity: 1; transform: none; } } .hp-xpop .lvl { display: inline-flex; align-items: center; gap: 8px; font-family: var(--hp-font-display); font-size: 15px; color: #2b0e33; padding: 7px 16px 7px 11px; border-radius: 999px; background: linear-gradient(160deg, #ffc0ec, var(--hp-magenta) 60%, #e44db2); box-shadow: 0 6px 18px rgba(255, 122, 217, .4), inset 0 1px 0 rgba(255, 255, 255, .5); } .hp-xpop .lvl.up { animation: hpLvlUp .7s cubic-bezier(.3, 1.6, .5, 1); } @keyframes hpLvlUp { 0% { transform: scale(1); } 45% { transform: scale(1.28) rotate(-3deg); } 100% { transform: scale(1); } } .hp-xpop h4 { font-family: var(--hp-font-display); font-weight: 400; font-size: 19px; color: var(--hp-gold); margin: 13px 0 9px; letter-spacing: .03em; } .hp-xpop h4 small { font-family: var(--hp-font-sub); font-size: 11px; color: var(--hp-ink-dim); } .hp-xpop .bar { position: relative; height: 26px; border-radius: 999px; overflow: hidden; background: rgba(10, 10, 26, .7); border: 1.5px solid var(--hp-glass-border); box-shadow: inset 0 6px 14px rgba(0, 0, 0, .55); } .hp-xpop .fill { height: 100%; width: 0; border-radius: 999px; background: linear-gradient(90deg, #8a63ff, var(--hp-magenta) 55%, var(--hp-gold)); box-shadow: 0 0 22px rgba(255, 122, 217, .75), inset 0 2px 5px rgba(255, 255, 255, .45); transition: width 1.1s cubic-bezier(.25, .9, .3, 1); } .hp-xpop .ov { position: absolute; inset: 0; display: grid; place-items: center; z-index: 2; font-family: var(--hp-font-display); font-size: 13px; color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .8); } .hp-xpop .gain { font-family: var(--hp-font-head); font-style: italic; font-size: 13px; color: rgba(255, 236, 200, .85); margin-top: 12px; } .hp-xpop .lvlburst { font-family: var(--hp-font-display); font-size: 24px; color: var(--hp-gold); text-shadow: 0 0 26px rgba(255, 194, 0, .7); margin-top: 10px; opacity: 0; transform: scale(.6); } .hp-xpop .lvlburst.on { animation: hpBurstIn .6s cubic-bezier(.3, 1.6, .5, 1) forwards; } @keyframes hpBurstIn { to { opacity: 1; transform: scale(1); } } .hp-pillclose.hp-pillclose { display: inline-block; margin-top: 16px; font-family: var(--hp-font-head); font-size: 13px; color: var(--hp-ink); cursor: pointer; padding: 9px 22px; border-radius: 999px; background: rgba(255, 255, 255, .1); border: 1px solid var(--hp-glass-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); transition: background .15s ease, transform .15s ease; } .hp-pillclose:hover { background: rgba(255, 255, 255, .18); transform: translateY(-1px); } /* --- wooden welcome sign --- */ .hp-sign-wrap { display: flex; justify-content: center; margin: 8px 0 14px; filter: drop-shadow(0 26px 40px rgba(0, 0, 0, .5)); } .sign-svg { width: min(620px, 94%); height: auto; transform: rotate(-1.2deg); transition: transform .4s ease; } .sign-svg:hover { transform: rotate(-.4deg); } .sign-text { font-family: var(--hp-font-display); fill: #ffe9b0; letter-spacing: .5px; } .sign-text-sub { font-family: var(--hp-font-sub); font-weight: 600; fill: rgba(255, 233, 176, .75); } /* --- quest "!" medallion in the notification --- */ .hp-achnotif .hp-qmark { display: inline-grid; place-items: center; width: 22px; height: 22px; margin: -2px 8px -2px -6px; border-radius: 50%; background: #2a1a00; color: var(--hp-gold-soft); font-style: normal; font-family: var(--hp-font-display); font-size: 15px; vertical-align: middle; box-shadow: inset 0 1px 3px rgba(0, 0, 0, .6); } /* --- let the painted scene show through the theme's opaque shells --- Elementor's container and Woo's content wrapper both paint a solid #1a1b3a over our fixed sky/mountain layers (z-index -3/-1). */ body.hp-profile-page .woocommerce-MyAccount-content-wrapper, body.hp-profile-page .woocommerce-MyAccount-content, body.hp-profile-page .woocommerce-account .woocommerce, body.hp-profile-page .elementor-element.e-con, body.hp-profile-page .elementor-section, body.hp-profile-page .elementor-widget-wrap, body.hp-profile-page .elementor-widget-container { background-color: transparent !important; background-image: none !important; } /* --- the dashboard has our own art-deco quick nav; the Woo tab list is a duplicate there. Keep it on the sub-pages (orders, addresses, …). --- */ body.hp-profile-dashboard .woocommerce-MyAccount-navigation, body.hp-profile-dashboard [class*="MyAccount-navigation"], body.hp-profile-dashboard .e-my-account-tab__navigation, body.hp-profile-dashboard .elementor-widget-woocommerce-my-account nav:not(.hp-qnav), body.hp-profile-dashboard .elementor-widget-woocommerce-my-account ul.e-my-account-tab__tabs { display: none !important; } /* HARD GUARANTEE — our own quick nav renders INSIDE the Elementor My Account widget (it is hooked onto woocommerce_account_dashboard), so a bare `.elementor-widget-woocommerce-my-account nav` selector above used to match it and hide it with !important. That is why the buttons kept vanishing: the rule only bites when the account page is built with Elementor's widget, so it looked intermittent. Never select a bare `nav` in this file. The first selector below deliberately MATCHES the specificity of the hiding rule above (both 0-3-2) and comes later in source order, so even if the :not() guard is ever lost the quick nav still wins. */ body.hp-profile-dashboard .elementor-widget-woocommerce-my-account nav.hp-qnav, body.hp-profile-dashboard nav.hp-qnav, body.hp-profile-page nav.hp-qnav { display: flex !important; } /* --- silence the default Woo dashboard greeting; our board replaces it --- (the theme wraps content in .woocommerce-MyAccount-content-wrapper) */ body.hp-profile-dashboard .woocommerce-MyAccount-content > p:not([class]), body.hp-profile-dashboard .woocommerce-MyAccount-content-wrapper > p:not([class]) { display: none; } /* --- Woo account navigation restyled to the glass look --- The theme paints the tab bars on the
  • with its own kit colors, so these are deliberately heavy-handed (scoped to our body class). */ body.hp-profile-page .woocommerce-MyAccount-navigation ul { display: flex !important; flex-wrap: wrap; gap: 9px; list-style: none; margin: 0 0 22px !important; padding: 0 !important; } body.hp-profile-page .woocommerce-MyAccount-navigation li { margin: 0 !important; padding: 0 !important; width: auto !important; flex: 0 0 auto !important; background: transparent !important; border: 0 !important; } body.hp-profile-page .woocommerce-MyAccount-navigation li a { display: inline-block !important; width: auto !important; padding: 9px 20px !important; border-radius: 999px !important; text-decoration: none !important; text-align: center; font-family: var(--hp-font-head) !important; font-size: 13.5px !important; color: var(--hp-ink) !important; background: rgba(255, 255, 255, .08) !important; border: 1px solid var(--hp-glass-border-soft) !important; transition: background .15s ease, transform .15s ease; } body.hp-profile-page .woocommerce-MyAccount-navigation li a:hover { background: rgba(255, 255, 255, .16) !important; transform: translateY(-1px); } body.hp-profile-page .woocommerce-MyAccount-navigation li.is-active a { background: linear-gradient(160deg, #ffd75e, var(--hp-gold)) !important; color: #2a1a00 !important; border-color: transparent !important; font-weight: 600; } /* theme link rules repaint anchor buttons gold-on-gold — pin our button ink */ body.hp-profile-page a.hp-btn, body.hp-profile-page a.hp-btn:hover, body.hp-thankyou a.hp-btn, body.hp-thankyou a.hp-btn:hover { color: #2a1a00 !important; text-decoration: none !important; } body.hp-profile-page a.hp-btn.pink, body.hp-thankyou a.hp-btn.pink { color: #33052a !important; } /* --- achievements board --- */ .hp-badge-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(128px, 1fr)); gap: 13px; margin-top: 18px; } .hp-badge { position: relative; text-align: center; padding: 15px 10px 13px; border-radius: 17px; background: rgba(255, 255, 255, .055); border: 1px solid var(--hp-glass-border-soft); transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .hp-badge:hover { transform: translateY(-4px); } .hp-badge .artwrap { position: relative; width: 96px; margin: 2px auto 10px; } .hp-badge .art { display: block; width: 96px; height: 96px; filter: drop-shadow(0 8px 16px rgba(0, 0, 0, .45)); } .hp-badge.lk .art { filter: grayscale(1) brightness(.6) drop-shadow(0 6px 12px rgba(0, 0, 0, .4)); opacity: .8; } .hp-badge .alock { position: absolute; bottom: -2px; right: -2px; font-size: 14px; background: #14142c; border: 1px solid rgba(255, 255, 255, .25); border-radius: 50%; width: 26px; height: 26px; display: grid; place-items: center; } .hp-badge b { display: block; font-family: var(--hp-font-sub); font-weight: 600; font-size: 12.5px; color: var(--hp-ink); } .hp-badge.lk b { color: var(--hp-ink-faint); } .hp-badge small { display: block; font-family: var(--hp-font-head); font-style: italic; font-size: 11px; color: rgba(255, 236, 200, .68); margin-top: 3px; line-height: 1.4; } .hp-badge .hp-xptip { position: absolute; left: 50%; top: 4px; transform: translateX(-50%) translateY(4px); opacity: 0; pointer-events: none; white-space: nowrap; z-index: 5; font-family: var(--hp-font-display); font-size: 12px; color: #2a1a00; padding: 5px 12px; border-radius: 999px; background: linear-gradient(160deg, #fff0c8, #ffd75e 45%, var(--hp-gold)); box-shadow: 0 4px 12px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .55); transition: opacity .18s ease, transform .18s ease; } .hp-badge:hover .hp-xptip { opacity: 1; transform: translateX(-50%) translateY(0); } .hp-badge.lk .hp-xptip { background: linear-gradient(160deg, #d9d4e8, #a9a3bf); color: #1d1a30; } .hp-badge.nw { cursor: pointer; border-color: rgba(255, 194, 0, .55); animation: hpAchGlow 1.6s ease-in-out infinite; } @keyframes hpAchGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(255, 194, 0, 0); } 50% { box-shadow: 0 0 22px 2px rgba(255, 194, 0, .35); } } .hp-aunlock { position: absolute; bottom: -2px; right: -2px; width: 27px; height: 27px; border-radius: 50%; display: grid; place-items: center; font-size: 14px; background: linear-gradient(160deg, #fff0c8, #ffd75e 45%, var(--hp-gold)); border: 2px solid #10102a; box-shadow: 0 3px 8px rgba(0, 0, 0, .45); } .hp-achnotif { display: inline-block; margin-left: 14px; vertical-align: middle; position: relative; overflow: hidden; font-family: var(--hp-font-display); font-size: 12.5px; letter-spacing: .02em; color: #2a1a00; background: linear-gradient(160deg, #fff0c8, #ffd75e 45%, var(--hp-gold)); padding: 7px 16px; border-radius: 999px; transform: rotate(-1deg); box-shadow: 0 6px 16px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .6); } .hp-achnotif::after { content: ""; position: absolute; top: 0; bottom: 0; width: 46px; left: -60px; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .75), transparent); animation: hpAchShine 3.2s ease-in-out infinite; } /* it is a temporary alert, not furniture: a slow breath + halo says "act on me" */ .hp-achnotif { animation: hpAchBreath 2.4s ease-in-out infinite; will-change: transform; } @keyframes hpAchBreath { 0%, 100% { transform: rotate(-1deg) scale(1); box-shadow: 0 6px 16px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 0 0 rgba(255, 194, 0, .5); } 50% { transform: rotate(-1deg) scale(1.045); box-shadow: 0 8px 20px rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .6), 0 0 20px 3px rgba(255, 194, 0, .3); } } @media (prefers-reduced-motion: reduce) { .hp-achnotif, .hp-achnotif::after, .hp-badge.nw { animation: none; } } @keyframes hpAchShine { 0%, 55% { left: -60px; } 85%, 100% { left: 130%; } } .hp-badge.nw .hp-xptip { display: none; } .hp-claimcta { display: block; margin-top: 9px; position: relative; overflow: hidden; font-family: var(--hp-font-display); font-size: 10.5px; line-height: 1.35; letter-spacing: .02em; color: #2a1a00; background: linear-gradient(160deg, #fff0c8, #ffd75e 45%, var(--hp-gold)); padding: 6px 8px; border-radius: 14px; box-shadow: 0 4px 10px rgba(0, 0, 0, .35), inset 0 1px 0 rgba(255, 255, 255, .6); } .hp-claimcta::after { content: ""; position: absolute; top: 0; bottom: 0; width: 36px; left: -50px; background: linear-gradient(105deg, transparent, rgba(255, 255, 255, .7), transparent); animation: hpAchShine 3.2s ease-in-out .6s infinite; } .hp-badge.nw.claiming .art { animation: hpAchBurst .7s cubic-bezier(.3, 1.6, .5, 1); } @keyframes hpAchBurst { 0% { transform: scale(1) rotate(0); } 35% { transform: scale(1.25) rotate(-6deg); } 70% { transform: scale(.95) rotate(4deg); } 100% { transform: scale(1); } } .hp-achfloat { position: fixed; z-index: 99999; pointer-events: none; font-family: var(--hp-font-display); font-size: 18px; color: var(--hp-gold); text-shadow: 0 2px 6px rgba(0, 0, 0, .6); transition: transform 1.1s cubic-bezier(.3, .7, .3, 1), opacity 1.1s ease; } /* --- scrollable lists: the house pattern for long profile sections --- */ .hp-countchip { display: inline-grid; place-items: center; min-width: 27px; height: 27px; padding: 0 9px; margin-left: 8px; border-radius: 999px; font-family: var(--hp-font-display); font-weight: 400; font-size: 15px; color: #2a1a00; vertical-align: middle; text-shadow: none; background: linear-gradient(160deg, #fff0c8, #ffd75e 45%, var(--hp-gold)); box-shadow: 0 3px 8px rgba(0, 0, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .55); } /* XP captions standing on the bar's top line */ .hp-xp-caps { /* Equal side columns keep the middle caption truly centered on the bar; their min-width stops them collapsing under their own text (which would push the number out of its cell and over the sentence). */ display: grid; grid-template-columns: minmax(112px, 1fr) minmax(0, auto) minmax(112px, 1fr); align-items: end; gap: 10px; margin-bottom: 1px; min-height: 20px; } .hp-xp-cap { line-height: 1.15; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; } .hp-xp-caps .cap-l { font-family: var(--hp-font-display); font-size: 15px; color: var(--hp-gold); margin-left: 13px; } .hp-xp-caps .cap-l small { font-family: var(--hp-font-sub); font-size: 11px; color: var(--hp-ink-dim); font-weight: 400; } .hp-xp-caps .cap-l { text-align: left; } .hp-xp-caps .cap-c { text-align: center; font-family: var(--hp-font-head); font-style: italic; font-size: 12.5px; color: rgba(255, 236, 200, .8); } .hp-xp-caps .cap-r { text-align: right; } .hp-xp-caps .cap-c b { color: var(--hp-gold); font-style: normal; } .hp-xp-caps .cap-r { font-family: var(--hp-font-display); font-size: 13px; letter-spacing: .04em; color: var(--hp-ink); } @media (max-width: 760px) { .hp-xp-caps { grid-template-columns: 1fr 1fr; } .hp-xp-caps .cap-c { grid-column: 1 / -1; grid-row: 2; text-align: center; margin-top: 3px; white-space: normal; overflow: visible; } } .hp-scrolllist { position: relative; margin-top: 13px; } .hp-scrollinner { max-height: 352px; overflow-y: auto; padding-right: 9px; scrollbar-width: thin; scrollbar-color: rgba(255, 194, 0, .55) rgba(255, 255, 255, .07); -webkit-mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 34px), transparent 100%); mask-image: linear-gradient(180deg, #000 0, #000 calc(100% - 34px), transparent 100%); } .hp-orders-scroll .hp-scrollinner { max-height: 300px; } /* fade only while there is genuinely more below — a list that fits (or is scrolled to its end) must not have its last row faded away (JS toggles) */ .hp-scrollinner.no-fade { -webkit-mask-image: none; mask-image: none; } .hp-scrollinner::-webkit-scrollbar { width: 7px; } .hp-scrollinner::-webkit-scrollbar-track { background: rgba(255, 255, 255, .07); border-radius: 99px; } .hp-scrollinner::-webkit-scrollbar-thumb { background: linear-gradient(180deg, #ffd75e, #e8a800); border-radius: 99px; } /* compact coupon rows inside a scroll list */ .hp-scrollinner .hp-coupon { margin-top: 9px; border-radius: 13px; } .hp-scrollinner .hp-coupon:first-child { margin-top: 2px; } .hp-scrollinner .hp-coupon .val { flex: 0 0 68px; font-size: 15px; } .hp-scrollinner .hp-coupon .val small { font-size: 8.5px; } .hp-scrollinner .hp-coupon .body { padding: 9px 12px 8px; } .hp-scrollinner .hp-coupon .body b { font-size: 12px; } .hp-scrollinner .hp-coupon .code { font-size: 11px; padding: 3px 9px; margin-top: 4px; } .hp-scrollinner .hp-coupon .exp { font-size: 10px; margin-top: 3px; } .hp-xpop-link { display: block; margin-top: 11px; font-family: var(--hp-font-head); font-style: italic; font-size: 12.5px; color: var(--hp-gold-soft); text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 215, 94, .45); } .hp-xpop-link:hover { color: var(--hp-gold); text-decoration-color: var(--hp-gold); } /* the real thank-you stylesheet has no global border-box reset — pin ours */ .hp-ty-chest *, .hp-modal, .hp-modal *, .hp-xpop, .hp-xpop * { box-sizing: border-box; } .hp-rays { position: absolute; inset: -14%; z-index: 0; border-radius: 50%; background: repeating-conic-gradient(from 0deg, rgba(255, 215, 94, .4) 0deg 9deg, transparent 9deg 24deg); -webkit-mask: radial-gradient(circle, #000 26%, transparent 68%); mask: radial-gradient(circle, #000 26%, transparent 68%); opacity: 0; transition: opacity .45s ease; animation: hpRays 16s linear infinite; } @keyframes hpRays { to { transform: rotate(360deg); } } .hp-chest-vis:hover .hp-rays, .hp-ty-chest-vis:hover .hp-rays { opacity: 1; } .hp-flash { position: absolute; inset: -18%; z-index: 2; border-radius: 50%; opacity: 0; pointer-events: none; background: radial-gradient(circle, rgba(255, 233, 176, .95), rgba(255, 194, 0, .4) 45%, transparent 70%); } .hp-chest-vis.open .hp-flash, .hp-ty-chest-vis.open .hp-flash { animation: hpFlash .9s ease-out; } @keyframes hpFlash { 0% { opacity: 0; transform: scale(.4); } 22% { opacity: 1; } 100% { opacity: 0; transform: scale(1.6); } } .hp-chest-img { position: relative; z-index: 1; width: 100%; height: auto; display: block; animation: hpChestBob 4.5s ease-in-out infinite; transition: transform .35s cubic-bezier(.3, 1.5, .5, 1); } .hp-chest-img.dimmed { filter: grayscale(.7) brightness(.75); animation: none; margin: 0 auto; } @keyframes hpChestBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } /* Tilt on the container — the img's bob animation overrides any img transform, so a hover transform on the img itself never renders. */ .hp-chest-vis, .hp-ty-chest-vis { transition: transform .35s cubic-bezier(.3, 1.5, .5, 1); } .hp-chest-vis:hover, .hp-ty-chest-vis:hover { transform: translateY(-6px) rotate(-3deg) scale(1.04); } .hp-chest-vis.open .hp-chest-img, .hp-ty-chest-vis.open .hp-chest-img { animation: hpChestBurst .7s cubic-bezier(.3, 1.6, .5, 1); } @keyframes hpChestBurst { 0% { transform: scale(1); } 30% { transform: scaleX(1.08) scaleY(.88); } 60% { transform: scaleX(.94) scaleY(1.12) translateY(-8px); } 100% { transform: scale(1.05) translateY(-3px); } } .hp-chest-vis .spark, .hp-ty-chest-vis .spark { position: absolute; z-index: 2; width: 7px; height: 7px; border-radius: 50%; background: #ffdf8a; box-shadow: 0 0 10px rgba(255, 194, 0, .9); opacity: 0; pointer-events: none; } .spark.s1 { left: 24%; top: 30%; } .spark.s2 { left: 50%; top: 22%; } .spark.s3 { left: 74%; top: 30%; } .spark.s4 { left: 36%; top: 18%; width: 5px; height: 5px; } .spark.s5 { left: 63%; top: 16%; width: 5px; height: 5px; } .hp-chest-vis.open .spark, .hp-ty-chest-vis.open .spark { animation: hpSpark 1.1s ease-out forwards; } .hp-chest-vis.open .spark.s2, .hp-ty-chest-vis.open .spark.s2 { animation-delay: .1s; } .hp-chest-vis.open .spark.s3, .hp-ty-chest-vis.open .spark.s3 { animation-delay: .2s; } .hp-chest-vis.open .spark.s4, .hp-ty-chest-vis.open .spark.s4 { animation-delay: .32s; } .hp-chest-vis.open .spark.s5, .hp-ty-chest-vis.open .spark.s5 { animation-delay: .42s; } @keyframes hpSpark { 0% { opacity: 0; transform: translateY(10px); } 30% { opacity: 1; } 100% { opacity: 0; transform: translateY(-42px); } } /* ---------- thank-you chest card ---------- */ .hp-ty-chest { max-width: 620px; margin: 26px auto; padding: 30px 26px 26px; text-align: center; color: var(--hp-ink); } .hp-ty-title { font-family: var(--hp-font-display); font-weight: 400; font-size: 22px; color: var(--hp-gold); margin: 14px 0 8px; letter-spacing: .02em; } .hp-ty-text { font-family: var(--hp-font-head); font-style: italic; font-size: 14px; letter-spacing: .3px; color: rgba(255, 236, 200, .8); margin: 0 0 16px; } .hp-ty-next { font-family: var(--hp-font-head); font-style: italic; font-size: 13px; letter-spacing: .3px; color: rgba(255, 236, 200, .72); margin: 14px 0 0; } .hp-ty-next b { color: var(--hp-gold); font-style: normal; } .hp-ty-nexticon { display: inline-block; width: 30px; height: 30px; vertical-align: middle; margin: -4px 2px 0 6px; filter: drop-shadow(0 2px 5px rgba(0, 0, 0, .45)); } .hp-ty-xpline { font-family: var(--hp-font-head); font-style: italic; font-size: 14px; letter-spacing: .3px; color: rgba(255, 236, 200, .85); margin: 0 0 14px; } .hp-ty-xpline b { color: var(--hp-gold); font-style: normal; } .hp-ty-profile { margin: 20px 0 0; } /* Solid colour under the gradient: Elementor's lazy-load rule blanks background-image (!important) until the section scrolls in, which left dark text on a dark card. */ .hp-ty-chest .hp-ty-profile a.hp-btn { display: inline-block; text-decoration: none; color: #2a1a00; background-color: #ffc200; } .hp-ty-chest .hp-ty-profile a.hp-btn.ghosty { color: #f4f2ff; background-color: rgba(255, 255, 255, .1); background-image: none; border: 1px solid rgba(255, 255, 255, .22); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); } /* highpony-cart's thank-you skin forces dark ink on every a.hp-btn with !important. */ body.hp-thankyou .hp-ty-chest .hp-ty-profile a.hp-btn.ghosty, body.hp-thankyou .hp-ty-chest .hp-ty-profile a.hp-btn.ghosty:hover { color: #f4f2ff !important; } .hp-boost { color: var(--hp-magenta); font-style: normal; } /* boost choice after a jackpot + zbierka cards */ .hp-boost-choice { display: flex; flex-wrap: wrap; gap: 10px; justify-content: center; align-items: center; margin-top: 12px; } .hp-boost-choice small { flex-basis: 100%; font-family: var(--hp-font-head); font-style: italic; font-size: 11.5px; color: rgba(255, 236, 200, .68); } .hp-boost-choice small a { color: var(--hp-pink); } .hp-btn.ghosty { color: var(--hp-ink); background: rgba(255, 255, 255, .1); border: 1px solid var(--hp-glass-border); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14); } .hp-boost-card .val { background: linear-gradient(160deg, #b7f0ff, #4db6d9); color: #06283a; } .hp-boost-card.is-active .val { background: linear-gradient(160deg, #8dffbc, #2fae6a); color: #06301c; } .hp-boost-card .hp-btn.compact { align-self: flex-start; margin-top: 4px; } .hp-gift-card .val { background: linear-gradient(160deg, #ffb2ea, var(--hp-magenta) 65%, #f052bd); color: #33052a; } /* ---------- chest carousel ---------- */ .hp-carousel { position: relative; width: 100%; height: 100px; margin: 10px 0 14px; border-radius: 14px; background: rgba(10, 10, 26, .55); border: 1px solid var(--hp-glass-border-soft); box-shadow: inset 0 4px 12px rgba(0, 0, 0, .5); } .hp-cwin { position: absolute; inset: 0; overflow: hidden; border-radius: inherit; -webkit-mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); mask: linear-gradient(90deg, transparent, #000 12%, #000 88%, transparent); } .hp-strip { display: flex; gap: 8px; position: absolute; left: 0; top: 9px; will-change: transform; } .hp-tile { flex: 0 0 78px; height: 82px; border-radius: 12px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; font-family: var(--hp-font-display); color: #fff; border: 1px solid rgba(255, 255, 255, .18); background: var(--tbg, linear-gradient(160deg, #5a5a72, #3a3a50)); } .hp-tile b { font-size: 16.5px; font-weight: 400; } .hp-tile small { font-family: var(--hp-font-sub); font-size: 9.5px; opacity: .78; letter-spacing: .06em; } /* rarity ladder: gray common · green uncommon · blue rare · purple epic · gold legendary */ .r-common { --tbg: linear-gradient(160deg, #5a5a72, #3a3a50); } .r-uncommon { --tbg: linear-gradient(160deg, #57c785, #2e7d4f); } .r-rare { --tbg: linear-gradient(160deg, #4f8fd6, #2a5aa8); } .r-epic { --tbg: linear-gradient(160deg, #9a5bd6, #6b2ba8); } .r-jackpot { --tbg: linear-gradient(160deg, #ffd75e, #e8a800); color: #2b1600; box-shadow: 0 0 16px rgba(255, 194, 0, .5); } .hp-tile.win { animation: hpTilePulse 1.1s ease-in-out infinite; } @keyframes hpTilePulse { 0%, 100% { box-shadow: 0 0 10px rgba(255, 194, 0, .4); } 50% { box-shadow: 0 0 28px rgba(255, 194, 0, .95); } } .hp-cmark { position: absolute; left: 50%; top: -3px; bottom: -3px; width: 2px; z-index: 2; background: var(--hp-gold); transform: translateX(-50%); box-shadow: 0 0 10px rgba(255, 194, 0, .8); pointer-events: none; } .hp-cmark::before, .hp-cmark::after { content: ""; position: absolute; left: 50%; transform: translateX(-50%); border: 7px solid transparent; } .hp-cmark::before { top: -4px; border-top: 9px solid var(--hp-gold); } .hp-cmark::after { bottom: -4px; border-bottom: 9px solid var(--hp-gold); } /* ---------- Woo integration: dark reskin of surrounding account chrome ---------- */ body.hp-profile-dashboard .woocommerce-MyAccount-navigation { display: none; } body.hp-profile-dashboard .woocommerce-MyAccount-content { width: 100%; float: none; } body.hp-profile-page .woocommerce-notices-wrapper .woocommerce-message, body.hp-profile-page .woocommerce-notices-wrapper .woocommerce-info { background: rgba(255, 255, 255, .08); color: var(--hp-ink); border-color: var(--hp-gold); } /* Login / registration reskin (v0: native Woo forms in glass cards). */ body.hp-profile-auth .woocommerce { color: var(--hp-ink); } body.hp-profile-auth .u-columns.col2-set .u-column1, body.hp-profile-auth .u-columns.col2-set .u-column2, body.hp-profile-auth form.woocommerce-form-login, body.hp-profile-auth form.woocommerce-form-register { background: linear-gradient(160deg, rgba(255, 255, 255, .14), rgba(255, 255, 255, .08) 60%, rgba(255, 255, 255, .055)), linear-gradient(rgba(14, 15, 38, .45), rgba(14, 15, 38, .45)); border: 1px solid var(--hp-glass-border) !important; border-radius: var(--hp-radius); box-shadow: var(--hp-shadow); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); padding: 28px !important; } body.hp-profile-auth .woocommerce h2 { font-family: var(--hp-font-head); color: var(--hp-gold); } body.hp-profile-auth .woocommerce form .form-row input.input-text { background: rgba(10, 10, 30, .42); color: var(--hp-ink); border: 1.5px solid rgba(245, 153, 255, .55); border-radius: 13px; padding: 12px 14px; } body.hp-profile-auth .woocommerce form .form-row input.input-text:focus { border-color: var(--hp-gold); outline: none; } /* 16 px on touch screens, like auth.css: an iPhone zooms in on anything smaller. !important beats Elementor's My Account widget (14 px, a (0,6,0) selector). */ @media (any-pointer: coarse) { body.hp-profile-auth .woocommerce form .form-row input.input-text { font-size: 16px !important; } } body.hp-profile-auth .woocommerce form label { color: var(--hp-ink-dim); font-family: var(--hp-font-sub); } body.hp-profile-auth .woocommerce button.button { font-family: var(--hp-font-head); color: #2a1a00; border: none; border-radius: 14px; padding: 13px 26px; background: linear-gradient(160deg, #ffd75e, var(--hp-gold) 60%, #e8a800); box-shadow: 0 8px 26px rgba(255, 194, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .55); } /* ---------- responsive ---------- */ @media (max-width: 980px) { .hp-dash { grid-template-areas: "profile profile profile profile profile profile profile profile profile profile profile profile" "streak streak streak streak streak streak streak streak streak streak streak streak" "wheel wheel wheel wheel wheel wheel wheel wheel wheel wheel wheel wheel" "badges badges badges badges badges badges badges badges badges badges badges badges" "coupons coupons coupons coupons coupons coupons coupons coupons coupons coupons coupons coupons" "orders orders orders orders orders orders orders orders orders orders orders orders"; } } @media (max-width: 560px) { .hp-dash > section, .hp-chest-note { padding: 20px 16px 18px; } .hp-qnav { gap: 28px 18px; } .hp-fbtn { min-width: calc(50% - 26px); padding: 12px 10px; font-size: 11.5px; letter-spacing: .1em; } .hp-fbtn .tip { display: none; } .hp-day .dtag { display: none; } .hp-streak-row { gap: 6px; } .hp-day { padding: 9px 2px 7px; border-radius: 12px; } .hp-day .ic { font-size: 16px; margin: 4px 0 1px; } .hp-order { grid-template-columns: auto 1fr; grid-template-rows: auto auto; } .hp-order .status { grid-column: 1; justify-self: start; } .hp-order .sum { grid-column: 2; grid-row: 1; } .hp-coupon .val { flex-basis: 82px; font-size: 18px; } } @media (prefers-reduced-motion: reduce) { body.hp-profile-page *, body.hp-profile-page *::before, body.hp-profile-page *::after { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; } } /* --- the theme's Elementor kit styles h2/buttons with higher specificity than a bare class, which silently swapped Titan One for Domine/Sanchez --- */ body.hp-profile-page .hp-card-h, body.hp-thankyou .hp-card-h, .hp-ty-chest .hp-card-h, .hp-modal .hp-card-h { font-family: var(--hp-font-display) !important; font-weight: 400 !important; color: #ffe9b0 !important; font-size: 16px !important; letter-spacing: .04em !important; /* The kit does not only restyle type — it also sets h2 margins and line-height, which pushed the wooden plate DOWN inside its card and opened a gap before the subtitle. The mockup values are pinned here so the plate cannot drift again: pin the BOX, not just the font. */ margin: 0 !important; padding: 9px 27px 10px !important; line-height: 1.25 !important; display: inline-flex !important; align-items: center !important; vertical-align: middle !important; } body.hp-profile-page .hp-card-sub, body.hp-thankyou .hp-card-sub, .hp-ty-chest .hp-card-sub, .hp-modal .hp-card-sub { margin: 10px 0 0 !important; } /* the heading's own flex row must not inherit kit spacing either */ body.hp-profile-page .hp-streak-head { align-items: center !important; } body.hp-profile-page .hp-name { font-family: var(--hp-font-display) !important; } body.hp-profile-page .hp-btn, body.hp-thankyou .hp-btn, .hp-modal .hp-btn, .hp-xpop .hp-btn { font-family: var(--hp-font-display) !important; } /* ---------- level badge (right edge of the profile row) ---------- */ /* NO flex-wrap here: with wrap on, a long e-mail name pushed the rank shield onto its own flex line, and the card ballooned around 130px of nothing. The identity column shrinks (min-width:0 + ellipsis) so the shield keeps its corner; under 640px the media query below restores the stacked flow. */ .hp-profile-top { display: flex; align-items: center; gap: 18px; } .hp-id-col { flex: 1 1 auto; min-width: 0; } .hp-level-badge { position: relative; display: flex; align-items: center; margin-left: auto; flex: 0 0 auto; } .hp-level-badge img { width: clamp(96px, 9vw, 124px); height: auto; aspect-ratio: 1; filter: drop-shadow(0 10px 22px rgba(0, 0, 0, .55)); } .hp-level-ico-img { width: 26px; height: 26px; vertical-align: -7px; filter: drop-shadow(0 2px 4px rgba(0, 0, 0, .5)); } .hp-lvl-rays { position: absolute; inset: -24%; pointer-events: none; opacity: 0; background: conic-gradient(from 0deg, rgba(255, 215, 94, .6), transparent 22%, rgba(255, 215, 94, .5) 46%, transparent 68%, rgba(255, 215, 94, .6) 92%, transparent); -webkit-mask: radial-gradient(circle, transparent 30%, #000 52%, transparent 76%); mask: radial-gradient(circle, transparent 30%, #000 52%, transparent 76%); } .hp-level-badge.levelup img { animation: hpLvlPop 1.1s cubic-bezier(.3, 1.6, .5, 1); } .hp-level-badge.levelup .hp-lvl-rays { animation: hpLvlRays 1.5s ease-out; } @keyframes hpLvlPop { 0% { transform: scale(.2) rotate(-25deg); opacity: 0; } 45% { transform: scale(1.35) rotate(6deg); opacity: 1; } 70% { transform: scale(.95) rotate(-3deg); } 100% { transform: scale(1) rotate(0); } } @keyframes hpLvlRays { 0% { opacity: 0; transform: rotate(0) scale(.6); } 30% { opacity: 1; } 100% { opacity: 0; transform: rotate(180deg) scale(1.5); } } @media (max-width: 640px) { .hp-profile-top { flex-wrap: wrap; } .hp-level-badge { margin-left: 0; width: 100%; justify-content: center; } .hp-level-badge img { width: 110px; } } /* ---------- level-up celebration ---------- */ .hp-lvlup { position: fixed; inset: 0; z-index: 99998; display: none; place-items: center; padding: 20px; } .hp-lvlup.on { display: grid; } .hp-lvlup .bd { position: absolute; inset: 0; background: rgba(8, 8, 22, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .hp-lvlup .card { position: relative; overflow: hidden; width: min(440px, 100%); padding: 30px 26px 24px; border-radius: 24px; text-align: center; background: linear-gradient(160deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .06) 60%, rgba(255, 255, 255, .05)), linear-gradient(rgba(20, 18, 48, .975), rgba(12, 11, 32, .985)); border: 1px solid var(--hp-glass-border); box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .2); } .hp-lvlup .eyebrow { font-family: var(--hp-font-head); font-style: italic; font-size: 12.5px; color: rgba(255, 236, 200, .75); margin: 0; } .hp-lvlup h3 { font-family: var(--hp-font-display); font-weight: 400; font-size: 26px; color: var(--hp-gold); margin: 6px 0 2px; letter-spacing: .02em; } .hp-lvlup .stage { position: relative; height: 300px; display: grid; place-items: center; margin: 6px 0 4px; } .hp-lvlup .stage img { position: absolute; width: 200px; height: 200px; filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .6)); } .hp-lvlup .old { z-index: 1; } .hp-lvlup .old.shard { clip-path: polygon(0 0, 52% 0, 44% 100%, 0 100%); } .hp-lvlup .old.shard2 { clip-path: polygon(52% 0, 100% 0, 100% 100%, 44% 100%); } .hp-lvlup.play .old.shard { animation: hpShardL .85s cubic-bezier(.4, 0, .7, 1) forwards; } .hp-lvlup.play .old.shard2 { animation: hpShardR .85s cubic-bezier(.4, 0, .7, 1) forwards; } @keyframes hpShardL { 0% { transform: none; opacity: 1; } 18% { transform: translateX(-4px) rotate(-2deg); } 100% { transform: translate(-105px, 58px) rotate(-34deg); opacity: 0; } } @keyframes hpShardR { 0% { transform: none; opacity: 1; } 18% { transform: translateX(4px) rotate(2deg); } 100% { transform: translate(105px, 62px) rotate(30deg); opacity: 0; } } .hp-lvlup .crack { position: absolute; width: 200px; height: 200px; z-index: 2; opacity: 0; background: linear-gradient(105deg, transparent 46%, rgba(255, 255, 255, .95) 49%, transparent 53%); } .hp-lvlup.play .crack { animation: hpCrack .5s ease-out; } @keyframes hpCrack { 0% { opacity: 0; transform: scaleY(.2); } 40% { opacity: 1; } 100% { opacity: 0; transform: scaleY(1.3); } } /* the new rank ARRIVES: a beam opens, the shield slams down, the impact throws a shockwave, sparks and a flash, then it settles and breathes */ .hp-lvlup .stage { perspective: 900px; } /* Decoration never takes a click. The beam (top -6 %, 120 % tall) reaches ~42 px below the stage and, invisible at opacity 0, sat over the middle of PARÁDA — no hover, no pointer there. Same in the badge popup. */ .hp-lvlup .stage, .hp-lvlup .stage *, .hp-achpop .stage, .hp-achpop .stage * { pointer-events: none; } .hp-lvlup .beam { position: absolute; top: -6%; width: 96px; height: 120%; z-index: 2; opacity: 0; transform-origin: 50% 0; background: linear-gradient(180deg, rgba(255, 236, 180, 0), rgba(255, 236, 180, .55) 35%, rgba(255, 255, 255, .85) 60%, rgba(255, 236, 180, 0)); filter: blur(6px); } .hp-lvlup.play .beam { animation: hpBeam .55s .55s ease-out; } @keyframes hpBeam { 0% { opacity: 0; transform: scaleY(.2) scaleX(.4); } 45% { opacity: 1; transform: scaleY(1) scaleX(1); } 100% { opacity: 0; transform: scaleY(1) scaleX(1.6); } } .hp-lvlup .new { opacity: 0; z-index: 4; transform-origin: 50% 88%; } .hp-lvlup.play .new { animation: hpSlam .62s .78s cubic-bezier(.55, -.2, .75, 1) forwards, hpSettle .5s 1.4s cubic-bezier(.2, 1.6, .4, 1) forwards, hpBreathe 3s 2s ease-in-out infinite; } @keyframes hpSlam { 0% { opacity: 0; transform: translateY(-170px) scale(.6) rotateX(44deg); } 55% { opacity: 1; } 88% { transform: translateY(6px) scale(1.06) rotateX(0); opacity: 1; } 100% { transform: translateY(0) scaleX(1.22) scaleY(.8); opacity: 1; } } @keyframes hpSettle { 0% { transform: scaleX(1.22) scaleY(.8); } 40% { transform: scaleX(.94) scaleY(1.08); } 70% { transform: scaleX(1.03) scaleY(.98); } 100% { transform: scale(1); } } .hp-lvlup .flash { position: absolute; width: 300px; height: 300px; border-radius: 50%; z-index: 2; opacity: 0; background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(255, 220, 140, .5) 35%, transparent 68%); } .hp-lvlup.play .flash { animation: hpFlashHit .5s 1.32s ease-out; } @keyframes hpFlashHit { 0% { opacity: 0; transform: scale(.3); } 18% { opacity: 1; } 100% { opacity: 0; transform: scale(1.35); } } .hp-lvlup .floor { position: absolute; bottom: 14px; width: 200px; height: 16px; border-radius: 50%; z-index: 1; opacity: 0; background: radial-gradient(ellipse, rgba(0, 0, 0, .55), transparent 70%); } .hp-lvlup.play .floor { animation: hpFloor .7s 1.34s ease-out; } @keyframes hpFloor { 0% { opacity: 0; transform: scaleX(.3); } 20% { opacity: 1; transform: scaleX(1.25); } 100% { opacity: .35; transform: scaleX(1); } } .hp-lvlup .shock { position: absolute; width: 200px; height: 200px; border-radius: 50%; z-index: 3; opacity: 0; border: 4px solid rgba(255, 215, 94, .95); box-shadow: 0 0 30px rgba(255, 194, 0, .55), 0 0 22px rgba(255, 194, 0, .4) inset; } .hp-lvlup.play .shock { animation: hpShock .8s 1.34s cubic-bezier(.15, .7, .3, 1); } .hp-lvlup .shock.two { border-width: 2px; border-color: rgba(255, 255, 255, .75); } .hp-lvlup.play .shock.two { animation: hpShock .9s 1.46s cubic-bezier(.15, .7, .3, 1); } @keyframes hpShock { 0% { opacity: 1; transform: scale(.4); } 45% { opacity: .6; } 100% { opacity: 0; transform: scale(1.55); } } .hp-lvlup .spark { position: absolute; width: 12px; height: 12px; border-radius: 50%; z-index: 4; opacity: 0; background: radial-gradient(circle, #fffbe8, #ffc200 55%, rgba(255, 194, 0, 0)); box-shadow: 0 0 12px rgba(255, 194, 0, .8); } .hp-lvlup.play .spark { animation: hpSpark 1s 1.32s cubic-bezier(.1, .7, .3, 1) forwards; } @keyframes hpSpark { 0% { opacity: 0; transform: translate(0, 0) scale(.5); } 12% { opacity: 1; transform: translate(calc(var(--dx) * .25), calc(var(--dy) * .25)) scale(1.15); } 100% { opacity: 0; transform: translate(var(--dx), var(--dy)) scale(.35); } } .hp-lvlup .sheen { position: absolute; width: 200px; height: 200px; z-index: 5; opacity: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .85) 48%, transparent 58%); } .hp-lvlup.play .sheen { animation: hpSheen .85s 1.75s ease-out; } @keyframes hpSheen { 0% { opacity: 0; transform: translateX(-120px); } 25% { opacity: .9; } 100% { opacity: 0; transform: translateX(120px); } } .hp-lvlup.play .card { animation: hpCardShake .34s 1.35s cubic-bezier(.36, .07, .19, .97); } @keyframes hpCardShake { 0%, 100% { transform: translate(0, 0); } 20% { transform: translate(-5px, 3px); } 40% { transform: translate(5px, -3px); } 60% { transform: translate(-3px, 2px); } 80% { transform: translate(3px, -1px); } } @keyframes hpBreathe { 0%, 100% { transform: scale(1) translateY(0); } 35% { transform: scale(1.05) translateY(-7px); } 70% { transform: scale(.99) translateY(2px); } } .hp-lvlup .burst { position: absolute; inset: -10px; z-index: 2; opacity: 0; background: conic-gradient(from 0deg, rgba(255, 215, 94, .7), transparent 18%, rgba(255, 215, 94, .6) 40%, transparent 62%, rgba(255, 215, 94, .7) 84%, transparent); -webkit-mask: radial-gradient(circle, transparent 34%, #000 54%, transparent 76%); mask: radial-gradient(circle, transparent 34%, #000 54%, transparent 76%); } .hp-lvlup.play .burst { animation: hpBurst 1.6s .7s ease-out; } @keyframes hpBurst { 0% { opacity: 0; transform: rotate(0) scale(.5); } 25% { opacity: 1; } 100% { opacity: 0; transform: rotate(200deg) scale(1.6); } } .hp-lvlup .conf { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: 24px; } .hp-lvlup .conf i { position: absolute; top: -14px; width: 9px; height: 14px; opacity: 0; border-radius: 2px; } .hp-lvlup.play .conf i { animation: hpConf var(--dur, 2.4s) var(--del, 0s) ease-in forwards; } @keyframes hpConf { 0% { opacity: 0; transform: translateY(-10px) rotate(0); } 12% { opacity: 1; } 100% { opacity: 0; transform: translateY(320px) rotate(var(--spin, 540deg)); } } @media (prefers-reduced-motion: reduce) { .hp-lvlup.play .old.shard, .hp-lvlup.play .old.shard2, .hp-lvlup.play .new, .hp-lvlup.play .conf i, .hp-lvlup.play .burst, .hp-lvlup.play .beam, .hp-lvlup.play .shock, .hp-lvlup.play .spark, .hp-lvlup.play .sheen, .hp-lvlup.play .flash, .hp-lvlup.play .card, .hp-level-badge.levelup img { animation: none; } .hp-lvlup .new { opacity: 1; } } /* ---------- level rewards popup (chains after the celebration) ---------- Rendered only when Account passes levelUp.rewards — i.e. once Michal configures what each level grants. Same glass card, no slam sequence. */ .hp-lvlrw { position: fixed; inset: 0; z-index: 99998; display: none; place-items: center; padding: 20px; } .hp-lvlrw.on { display: grid; } .hp-lvlrw .bd { position: absolute; inset: 0; background: rgba(8, 8, 22, .88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .hp-lvlrw .card { position: relative; width: min(440px, 100%); padding: 26px 24px 22px; border-radius: 24px; text-align: center; background: linear-gradient(160deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .06) 60%, rgba(255, 255, 255, .05)), linear-gradient(rgba(20, 18, 48, .975), rgba(12, 11, 32, .985)); border: 1px solid var(--hp-glass-border); box-shadow: 0 30px 80px rgba(0, 0, 0, .6), inset 0 1px 0 rgba(255, 255, 255, .2); } .hp-lvlrw h3 { font-family: var(--hp-font-display); font-weight: 400; font-size: 20px; color: var(--hp-gold); margin: 4px 0 14px; } .hp-lvlrw ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; } .hp-lvlrw li { display: flex; align-items: center; gap: 12px; text-align: left; padding: 12px 14px; border-radius: 14px; background: rgba(255, 255, 255, .07); border: 1px solid var(--hp-glass-border-soft); opacity: 0; transform: translateY(10px); animation: hpRwIn .45s forwards; } .hp-lvlrw li:nth-child(2) { animation-delay: .12s; } .hp-lvlrw li:nth-child(3) { animation-delay: .24s; } .hp-lvlrw li:nth-child(4) { animation-delay: .36s; } @keyframes hpRwIn { to { opacity: 1; transform: none; } } .hp-lvlrw li .ico { font-size: 22px; } .hp-lvlrw li b { display: block; font-family: var(--hp-font-sub); font-size: 13px; color: var(--hp-ink); } .hp-lvlrw li small { font-family: var(--hp-font-head); font-style: italic; font-size: 11.5px; color: rgba(255, 236, 200, .7); } /* A level-up can hand over many rewards (every level of a jump): the list scrolls inside the card instead of pushing the button off the screen, and a card of a multi-level jump names its level on the right. */ .hp-lvlrw ul { max-height: min(52vh, 420px); overflow-y: auto; overscroll-behavior: contain; padding: 2px; } .hp-lvlrw li:nth-child(n+5) { animation-delay: .44s; } .hp-lvlrw li .txt { flex: 1 1 auto; min-width: 0; } .hp-lvlrw li .ico { flex: 0 0 auto; } /* a long description must not squeeze the icon (WordPress swaps emoji for an ) */ .hp-lvlrw li .lv { flex: 0 0 auto; font-style: normal; font-family: var(--hp-font-sub); font-size: 11px; font-weight: 700; white-space: nowrap; padding: 2px 8px; border-radius: 999px; color: var(--hp-gold); background: rgba(255, 194, 0, .12); border: 1px solid rgba(255, 194, 0, .3); } .hp-lvlrw .hp-btn { margin-top: 16px; } @media (prefers-reduced-motion: reduce) { .hp-lvlrw li { animation: none; opacity: 1; transform: none; } } /* ---------- level gift: a box you actually open ---------- */ .hp-giftpop{position:fixed;inset:0;z-index:99998;display:none;place-items:center;padding:20px} .hp-giftpop.on{display:grid} .hp-giftpop .bd{position:absolute;inset:0;background:rgba(8,8,22,.88);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)} .hp-giftpop .card{position:relative;overflow:hidden;width:min(440px,100%);padding:28px 26px 24px;border-radius:24px;text-align:center; background:linear-gradient(160deg,rgba(255,255,255,.15),rgba(255,255,255,.06) 60%,rgba(255,255,255,.05)),linear-gradient(rgba(20,18,48,.975),rgba(12,11,32,.985)); border:1px solid var(--hp-glass-border);box-shadow:0 30px 80px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.2)} .hp-giftpop .eyebrow{font-family:var(--hp-font-head);font-style:italic;font-size:12.5px;color:rgba(255,236,200,.75);margin:0} .hp-giftpop h3{font-family:var(--hp-font-display);font-weight:400;font-size:22px;color:var(--hp-gold);margin:6px 0 2px} .hp-giftpop .stage{position:relative;height:250px;display:grid;place-items:center} /* the box */ .hp-gbox{position:relative;width:150px;height:132px;cursor:pointer;animation:hpGbob 2.4s ease-in-out infinite;transition:transform .2s ease} .hp-gbox:hover,.hp-gbox:focus-visible{animation-play-state:paused;transform:scale(1.06) rotate(-2deg)} .hp-gbox:focus-visible{outline:2px solid var(--hp-gold);outline-offset:6px;border-radius:12px} @keyframes hpGbob{0%,100%{transform:translateY(0) rotate(-1deg)}50%{transform:translateY(-9px) rotate(1.5deg)}} .hp-gbox .body{position:absolute;left:0;right:0;bottom:0;height:96px;border-radius:10px; background:linear-gradient(160deg,#ff9ee0,#d8388f 60%,#a51f6b);box-shadow:inset 0 -10px 18px rgba(0,0,0,.28), 0 14px 30px rgba(0,0,0,.45)} .hp-gbox .lid{position:absolute;left:-8px;right:-8px;top:12px;height:34px;border-radius:9px;z-index:3; background:linear-gradient(160deg,#ffc7ee,#e8459f 65%,#b8267a);box-shadow:inset 0 -6px 12px rgba(0,0,0,.25), 0 8px 18px rgba(0,0,0,.4)} .hp-gbox .rib{position:absolute;left:50%;top:12px;bottom:0;width:24px;margin-left:-12px;z-index:2; background:linear-gradient(180deg,#ffe07a,#ffc200);box-shadow:0 0 12px rgba(255,194,0,.5)} .hp-gbox .bow{position:absolute;left:50%;top:-6px;width:56px;height:26px;margin-left:-28px;z-index:4; background:radial-gradient(circle at 25% 50%,#ffe07a 40%,transparent 42%),radial-gradient(circle at 75% 50%,#ffe07a 40%,transparent 42%),linear-gradient(#ffc200,#ffc200) center/14px 14px no-repeat} .hp-gbox .glow{position:absolute;inset:-24px;border-radius:50%;z-index:0;opacity:.55; background:radial-gradient(circle,rgba(255,194,0,.55),transparent 65%);animation:hpGglow 2.4s ease-in-out infinite} @keyframes hpGglow{0%,100%{opacity:.35;transform:scale(.94)}50%{opacity:.7;transform:scale(1.06)}} .hp-giftpop .tap{margin:2px 0 0;font-family:var(--hp-font-head);font-style:italic;font-size:12px;color:rgba(255,236,200,.7)} /* opening */ .hp-giftpop.opening .hp-gbox{animation:hpGshake .5s ease-in-out} @keyframes hpGshake{0%,100%{transform:rotate(0)}20%{transform:rotate(-7deg)}40%{transform:rotate(6deg)}60%{transform:rotate(-4deg)}80%{transform:rotate(3deg)}} .hp-giftpop.opening .lid{animation:hpGlid .8s .45s cubic-bezier(.3,-0.4,.6,1) forwards} @keyframes hpGlid{0%{transform:none;opacity:1}100%{transform:translateY(-150px) rotate(-24deg);opacity:0}} .hp-giftpop.opening .bow{animation:hpGlid .8s .45s cubic-bezier(.3,-0.4,.6,1) forwards} .hp-giftpop.opening .body,.hp-giftpop.opening .rib{animation:hpGfade .5s .95s ease-out forwards} @keyframes hpGfade{to{opacity:0;transform:scale(.85) translateY(14px)}} .hp-giftpop .hpGbeam{position:absolute;width:120px;height:230px;top:-40px;z-index:1;opacity:0;pointer-events:none; background:linear-gradient(180deg,rgba(255,236,180,0),rgba(255,236,180,.6) 40%,rgba(255,255,255,.85) 70%,rgba(255,236,180,0));filter:blur(7px)} .hp-giftpop.opening .hpGbeam{animation:hpGbeam 1.1s .55s ease-out} @keyframes hpGbeam{0%{opacity:0;transform:scaleY(.2)}35%{opacity:1;transform:scaleY(1)}100%{opacity:0;transform:scaleY(1.1) scaleX(1.4)}} /* the revealed reward */ .hp-reward{position:absolute;z-index:5;opacity:0;display:grid;place-items:center;gap:8px;pointer-events:none} .hp-giftpop.opened .hp-reward{opacity:1;pointer-events:auto;animation:hpRwReveal .7s cubic-bezier(.3,1.6,.5,1)} @keyframes hpRwReveal{0%{opacity:0;transform:scale(.4) translateY(20px)}60%{opacity:1;transform:scale(1.12)}100%{opacity:1;transform:scale(1)}} .hp-reward .ico{font-size:66px;filter:drop-shadow(0 10px 22px rgba(0,0,0,.5));animation:hpBreathe 2.8s 1s ease-in-out infinite} .hp-reward b{font-family:var(--hp-font-display);font-size:19px;color:var(--hp-gold)} .hp-reward small{font-family:var(--hp-font-head);font-style:italic;font-size:12.5px;color:rgba(255,236,200,.8);max-width:300px} .hp-reward .code{font-family:var(--hp-font-sub);font-weight:700;letter-spacing:.08em;font-size:15px;color:#2a1a00; background:linear-gradient(160deg,#ffd75e,var(--hp-gold));padding:7px 16px;border-radius:999px} .hp-giftpop .conf{position:absolute;inset:0;overflow:hidden;pointer-events:none;border-radius:24px} .hp-giftpop .conf i{position:absolute;top:-14px;width:9px;height:14px;opacity:0;border-radius:2px} .hp-giftpop.opened .conf i{animation:hpConf var(--dur,2.4s) var(--del,0s) ease-in forwards} .hp-giftpop .cta{font-family:var(--hp-font-display);font-size:14px;color:#2a1a00;cursor:pointer;border:0; padding:11px 26px;border-radius:999px;background:linear-gradient(160deg,#ffd75e,var(--hp-gold)); box-shadow:0 10px 26px rgba(255,194,0,.32), inset 0 1px 0 rgba(255,255,255,.6)} .hp-giftpop .cta:hover{transform:translateY(-1px)} .hp-giftpop .actions{display:flex;gap:10px;justify-content:center;flex-wrap:wrap;margin-top:6px;opacity:0;transition:opacity .3s .5s} .hp-giftpop.opened .actions{opacity:1} /* ---------- achievement unlocked ---------- Claiming a badge used to be a silent swap plus a small number flying to the XP bar — the same weight as ticking a checkbox, for something the customer spent months of orders on. This gives it the arrival the level-up already has: the badge drops out of a beam, the impact throws a shockwave and sparks, and the XP counts up instead of appearing. The card is opaque for the same reason as every other overlay here — backdrop-filter is not load-bearing (WebKit reports it and paints nothing). */ .hp-achpop { position: fixed; inset: 0; z-index: 99998; display: none; place-items: center; padding: 20px; } .hp-achpop.on { display: grid; } .hp-achpop .bd { position: absolute; inset: 0; background: rgba(8, 8, 22, .88); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); } .hp-achpop .card { position: relative; overflow: hidden; width: min(430px, 100%); padding: 28px 26px 24px; border-radius: 24px; text-align: center; background: linear-gradient(160deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, .06) 60%, rgba(255, 255, 255, .05)), linear-gradient(rgba(20, 18, 48, .975), rgba(12, 11, 32, .985)); border: 1px solid rgba(255, 194, 0, .45); box-shadow: 0 30px 80px rgba(0, 0, 0, .6), 0 0 50px rgba(255, 194, 0, .18), inset 0 1px 0 rgba(255, 255, 255, .2); animation: hpAchCardIn .4s cubic-bezier(.2, .9, .3, 1.2); } @keyframes hpAchCardIn { from { opacity: 0; transform: translateY(24px) scale(.92); } to { opacity: 1; transform: none; } } .hp-achpop .eyebrow { font-family: var(--hp-font-display); font-size: 12px; letter-spacing: .16em; text-transform: uppercase; color: var(--hp-gold); margin: 0; opacity: .9; } .hp-achpop h3 { font-family: var(--hp-font-display); font-weight: 400; font-size: 25px; color: var(--hp-ink); margin: 7px 0 0; letter-spacing: .02em; } .hp-achpop .desc { font-family: var(--hp-font-head); font-style: italic; font-size: 13px; color: rgba(255, 236, 200, .78); margin: 0 0 4px; } .hp-achpop .xp { font-family: var(--hp-font-display); font-size: 27px; color: var(--hp-gold); margin: 10px 0 16px; text-shadow: 0 3px 14px rgba(255, 194, 0, .45); opacity: 0; } .hp-achpop .xp small { font-family: var(--hp-font-sub); font-size: 12px; color: var(--hp-ink-dim); } /* held back until the counter starts, so the card never sits on "+0 XP" */ .hp-achpop.play .xp { animation: hpAchXpIn .35s .82s ease-out forwards, hpAchXpPop .5s 1.5s cubic-bezier(.3, 1.7, .5, 1); } @keyframes hpAchXpIn { from { opacity: 0; transform: translateY(9px); } to { opacity: 1; transform: none; } } @keyframes hpAchXpPop { 0% { transform: scale(1); } 45% { transform: scale(1.22); } 100% { transform: scale(1); } } .hp-achpop .stage { position: relative; height: 232px; display: grid; place-items: center; margin: 4px 0 2px; perspective: 900px; } .hp-achpop .art { position: absolute; width: 176px; height: 176px; z-index: 4; opacity: 0; transform-origin: 50% 88%; filter: drop-shadow(0 14px 30px rgba(0, 0, 0, .6)); } .hp-achpop.play .art { animation: hpAchDrop .6s .35s cubic-bezier(.55, -.2, .75, 1) forwards, hpAchSettle .5s .95s cubic-bezier(.2, 1.6, .4, 1) forwards, hpBreathe 3s 1.6s ease-in-out infinite; } @keyframes hpAchDrop { 0% { opacity: 0; transform: translateY(-150px) scale(.55) rotateX(40deg); } 55% { opacity: 1; } 88% { transform: translateY(5px) scale(1.06) rotateX(0); opacity: 1; } 100% { transform: translateY(0) scaleX(1.2) scaleY(.82); opacity: 1; } } @keyframes hpAchSettle { 0% { transform: scaleX(1.2) scaleY(.82); } 40% { transform: scaleX(.94) scaleY(1.08); } 70% { transform: scaleX(1.03) scaleY(.98); } 100% { transform: scale(1); } } .hp-achpop .beam { position: absolute; top: -6%; width: 104px; height: 118%; z-index: 2; opacity: 0; transform-origin: 50% 0; background: linear-gradient(180deg, rgba(255, 236, 180, 0), rgba(255, 236, 180, .55) 35%, rgba(255, 255, 255, .85) 60%, rgba(255, 236, 180, 0)); filter: blur(6px); } .hp-achpop.play .beam { animation: hpBeam .6s .12s ease-out; } .hp-achpop .flash { position: absolute; width: 290px; height: 290px; border-radius: 50%; z-index: 2; opacity: 0; background: radial-gradient(circle, rgba(255, 255, 255, .95), rgba(255, 220, 140, .5) 35%, transparent 68%); } .hp-achpop.play .flash { animation: hpFlashHit .5s .88s ease-out; } .hp-achpop .shock { position: absolute; width: 180px; height: 180px; border-radius: 50%; z-index: 3; opacity: 0; border: 4px solid rgba(255, 215, 94, .95); box-shadow: 0 0 30px rgba(255, 194, 0, .55), 0 0 22px rgba(255, 194, 0, .4) inset; } .hp-achpop.play .shock { animation: hpShock .8s .9s cubic-bezier(.15, .7, .3, 1); } .hp-achpop .shock.two { border-width: 2px; border-color: rgba(255, 255, 255, .75); } .hp-achpop.play .shock.two { animation: hpShock .9s 1.02s cubic-bezier(.15, .7, .3, 1); } .hp-achpop .spark { position: absolute; width: 12px; height: 12px; border-radius: 50%; z-index: 5; opacity: 0; background: radial-gradient(circle, #fffbe8, #ffc200 55%, rgba(255, 194, 0, 0)); box-shadow: 0 0 12px rgba(255, 194, 0, .8); } .hp-achpop.play .spark { animation: hpSpark 1s .88s cubic-bezier(.1, .7, .3, 1) forwards; } .hp-achpop .sheen { position: absolute; width: 176px; height: 176px; z-index: 6; opacity: 0; pointer-events: none; background: linear-gradient(105deg, transparent 38%, rgba(255, 255, 255, .85) 48%, transparent 58%); } .hp-achpop.play .sheen { animation: hpSheen .85s 1.3s ease-out; } .hp-achpop.play .card { animation: hpAchCardIn .4s cubic-bezier(.2, .9, .3, 1.2), hpCardShake .34s .9s cubic-bezier(.36, .07, .19, .97); } .hp-achpop .conf { position: absolute; inset: 0; overflow: hidden; pointer-events: none; border-radius: 24px; } .hp-achpop .conf i { position: absolute; top: -14px; width: 9px; height: 14px; opacity: 0; border-radius: 2px; } .hp-achpop.play .conf i { animation: hpConf var(--dur, 2.4s) var(--del, 0s) ease-in forwards; } @media (prefers-reduced-motion: reduce) { .hp-achpop.play .art, .hp-achpop.play .beam, .hp-achpop.play .flash, .hp-achpop.play .shock, .hp-achpop.play .spark, .hp-achpop.play .sheen, .hp-achpop.play .card, .hp-achpop.play .conf i, .hp-achpop.play .xp { animation: none; } .hp-achpop .art, .hp-achpop .xp { opacity: 1; } } /* the tile itself reacts before the popup opens: the seal pops off and the art flares, so the click feels answered even on a slow connection */ /* the pulsing hpAchGlow also drives box-shadow, so the flare has to stop it */ .hp-badge.nw.claiming { animation: none; border-color: rgba(255, 194, 0, .9); box-shadow: 0 0 28px 3px rgba(255, 194, 0, .45); } .hp-badge.nw.claiming .hp-aunlock { animation: hpSealOff .5s cubic-bezier(.4, 0, .7, 1) forwards; } @keyframes hpSealOff { 0% { transform: none; opacity: 1; } 100% { transform: translate(16px, -26px) rotate(140deg) scale(.5); opacity: 0; } } .hp-badge.un.justclaimed .art { animation: hpAchBurst .7s cubic-bezier(.3, 1.6, .5, 1); } @media (prefers-reduced-motion: reduce) { .hp-badge.nw.claiming .hp-aunlock, .hp-badge.un.justclaimed .art { animation: none; } } /* ---------- Fero's walkthrough ---------- Quest-giver onboarding: the page dims, one section stays lit, Fero stands on its edge with the MMORPG "!" and talks. The dim is a single box-shadow with a huge spread on the lit rect — one element to move per step, no clip-path and no :has(), both of which this site's minifier has burned us on before, and the hole shows the REAL section underneath rather than a copy of it. */ .hp-tour { position: absolute; left: 0; top: 0; width: 100%; z-index: 99985; overflow: hidden; cursor: pointer; } .hp-tour[hidden] { display: none; } .hp-tour-hole { position: absolute; left: 50%; top: 50%; width: 0; height: 0; border-radius: 22px; pointer-events: none; box-shadow: 0 0 0 9999px rgba(6, 5, 18, .84); border: 2px solid rgba(255, 194, 0, .85); transition: left .42s cubic-bezier(.4, 0, .2, 1), top .42s cubic-bezier(.4, 0, .2, 1), width .42s cubic-bezier(.4, 0, .2, 1), height .42s cubic-bezier(.4, 0, .2, 1); } .hp-tour-hole.lit { box-shadow: 0 0 0 9999px rgba(6, 5, 18, .84), 0 0 34px 4px rgba(255, 194, 0, .35), inset 0 0 34px rgba(255, 194, 0, .12); } /* the intro and the outro talk about the whole stable: no hole, just the dim */ .hp-tour-hole.none { border-color: transparent; box-shadow: 0 0 0 9999px rgba(6, 5, 18, .88); } .hp-tour-bubble { position: absolute; left: 0; top: 0; z-index: 2; display: flex; align-items: flex-start; gap: 12px; width: min(420px, calc(100vw - 24px)); cursor: default; animation: hpTourIn .32s cubic-bezier(.2, .9, .3, 1.2); } @keyframes hpTourIn { from { opacity: 0; transform: translateY(12px) scale(.96); } to { opacity: 1; transform: none; } } .hp-tour-bubble.flip { flex-direction: row-reverse; } .hp-tour-fero { position: relative; z-index: 2; flex: 0 0 auto; width: 86px; height: 86px; animation: hpTourBob 2.6s ease-in-out infinite; } @keyframes hpTourBob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } } .hp-tour-face { display: block; width: 86px; height: 86px; border-radius: 50%; object-fit: cover; background: linear-gradient(160deg, #2a2450, #14122e); border: 3px solid var(--hp-gold); box-shadow: 0 8px 24px rgba(0, 0, 0, .6), 0 0 26px rgba(255, 194, 0, .4), inset 0 1px 0 rgba(255, 255, 255, .25); } /* the quest marker: floats above the head like an MMORPG's, in the same display face as the rest of the profile's fantasy type. Centred rather than tucked in a corner — in a corner the speech bubble paints over it. */ .hp-tour-quest { position: absolute; top: -30px; left: 50%; margin-left: -16px; width: 32px; height: 38px; display: grid; place-items: center; font-family: var(--hp-font-display); font-size: 34px; line-height: 1; color: #ffe066; -webkit-text-stroke: 1px rgba(90, 60, 0, .9); text-shadow: 0 0 14px rgba(255, 194, 0, .95), 0 0 30px rgba(255, 194, 0, .6), 0 3px 6px rgba(0, 0, 0, .8); animation: hpTourQuest 1.15s ease-in-out infinite; } @keyframes hpTourQuest { 0%, 100% { transform: translateY(0) scale(1); } 40% { transform: translateY(-7px) scale(1.12); } 62% { transform: translateY(0) scale(.96); } } .hp-tour-say { position: relative; flex: 1 1 auto; min-width: 0; padding: 15px 17px 13px; border-radius: 18px; text-align: left; background: linear-gradient(160deg, rgba(255, 255, 255, .13), rgba(255, 255, 255, .05) 60%, rgba(255, 255, 255, .045)), linear-gradient(rgba(20, 18, 48, .975), rgba(12, 11, 32, .985)); border: 1px solid rgba(255, 194, 0, .45); box-shadow: 0 22px 54px rgba(0, 0, 0, .6), 0 0 34px rgba(255, 194, 0, .14), inset 0 1px 0 rgba(255, 255, 255, .18); } /* the tail points back at whoever is talking */ .hp-tour-say::before { content: ""; position: absolute; top: 28px; left: -8px; width: 14px; height: 14px; transform: rotate(45deg); background: rgba(20, 18, 48, .985); border-left: 1px solid rgba(255, 194, 0, .45); border-bottom: 1px solid rgba(255, 194, 0, .45); } .hp-tour-bubble.flip .hp-tour-say::before { left: auto; right: -8px; transform: rotate(-135deg); } .hp-tour-who { margin: 0; font-family: var(--hp-font-head); font-style: italic; font-size: 11.5px; letter-spacing: .04em; color: rgba(255, 236, 200, .7); } .hp-tour-title { margin: 3px 0 6px; font-family: var(--hp-font-display); font-weight: 400; font-size: 18px; line-height: 1.25; color: var(--hp-gold); letter-spacing: .02em; } .hp-tour-text { margin: 0; font-family: var(--hp-font-sub); font-size: 13.5px; line-height: 1.55; color: var(--hp-ink); } .hp-tour-text b { color: #ffe9a8; } /* The kit paints every button display:block with 8px/16px padding and its own radius at (0,1,1) specificity — same fight the modal ✕ already lost once (see .hp-mclose). Pin the whole box or the circle becomes a Roboto slab with the ✕ shoved off-centre. */ .hp-tour .hp-tour-x { position: absolute; top: 8px; right: 8px; cursor: pointer; width: 26px !important; height: 26px !important; min-height: 0 !important; padding: 0 !important; border-radius: 50% !important; display: grid !important; place-items: center !important; box-sizing: border-box !important; font-size: 11px !important; line-height: 1 !important; text-align: center !important; border: 1px solid var(--hp-glass-border-soft) !important; background: rgba(255, 255, 255, .08) !important; color: var(--hp-ink-dim) !important; box-shadow: none !important; } .hp-tour .hp-tour-x:hover { background: rgba(255, 255, 255, .18) !important; color: var(--hp-ink) !important; } /* Three buttons + the dots no longer fit one line on a phone: the actions drop to their own right-aligned line instead of poking out of the bubble. */ .hp-tour-foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 10px; margin-top: 12px; } .hp-tour-dots { display: inline-flex; gap: 5px; } .hp-tour-dots i { width: 6px; height: 6px; border-radius: 50%; background: rgba(255, 255, 255, .22); } .hp-tour-dots i.on { background: var(--hp-gold); box-shadow: 0 0 8px rgba(255, 194, 0, .7); } .hp-tour-actions { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; } /* Späť is a bare ◂ in a gold ring: same family as Ďalej, clearly its little sibling, and narrow enough that the trio can never crowd Ďalej off the bubble again. Box pinned — the kit repaints unscoped buttons pink. */ .hp-tour .hp-tour-back { width: 38px !important; height: 38px !important; min-height: 0 !important; padding: 0 !important; display: grid !important; place-items: center !important; box-sizing: border-box !important; border-radius: 50% !important; cursor: pointer; flex: 0 0 auto; font-family: var(--hp-font-display) !important; font-size: 17px !important; line-height: 1 !important; border: 1.5px solid var(--hp-gold) !important; background: rgba(255, 194, 0, .14) !important; color: var(--hp-gold) !important; box-shadow: 0 3px 10px rgba(0, 0, 0, .35) !important; text-shadow: none !important; } /* the ◂ glyph rode its font's metrics and sat off-centre — same disease as every × before it. A drawn triangle has no font to misplace it; the -1px nudge counters the left-pointing shape's centroid sitting right of centre. */ .hp-tour .hp-tour-back::before { content: ""; width: 0; height: 0; border-top: 6px solid transparent; border-bottom: 6px solid transparent; border-right: 9px solid currentColor; transform: translateX(-1px); } .hp-tour .hp-tour-back:hover { background: rgba(255, 194, 0, .3) !important; color: #ffe9a8 !important; } .hp-tour .hp-tour-back[hidden] { display: none !important; } /* a plain, READABLE text action — light ink, no competing pill chrome */ .hp-tour .hp-tour-skipall { padding: 8px 8px !important; cursor: pointer; white-space: nowrap; font-family: var(--hp-font-sub) !important; font-size: 12.5px !important; line-height: 1 !important; border: none !important; background: none !important; border-radius: 8px !important; color: rgba(244, 242, 255, .88) !important; box-shadow: none !important; text-decoration: none !important; } .hp-tour .hp-tour-skipall:hover { color: #fff !important; text-decoration: underline !important; text-underline-offset: 3px; } .hp-tour .hp-tour-skipall[hidden] { display: none !important; } .hp-tour .hp-btn.compact { padding: 9px 16px; font-size: 13px; } /* phones: the bubble stops chasing the section and parks at the bottom, where a thumb already is — chasing it there covers the very thing being explained */ .hp-tour.pinned .hp-tour-bubble { position: fixed; left: 12px !important; right: 12px; top: auto !important; bottom: 14px; width: auto; } .hp-tour.pinned .hp-tour-say::before { display: none; } .hp-tour.pinned .hp-tour-fero { width: 62px; height: 62px; } .hp-tour.pinned .hp-tour-face { width: 62px; height: 62px; border-width: 2px; } .hp-tour.pinned .hp-tour-quest { font-size: 26px; width: 24px; height: 28px; top: -24px; margin-left: -12px; } /* a phone-width say box holds all three controls only in their small sizes */ .hp-tour.pinned .hp-tour-actions { flex-wrap: wrap; justify-content: flex-end; } .hp-tour.pinned .hp-btn.compact { padding: 8px 12px !important; font-size: 12px !important; } .hp-tour.pinned .hp-tour-back { width: 34px !important; height: 34px !important; font-size: 15px !important; } .hp-tour.pinned .hp-tour-skipall { padding: 6px 6px !important; font-size: 11.5px !important; } /* the chat launcher is fixed bottom-right at z-index 99990 — on a phone it lands exactly on "Ďalej", so the walkthrough cannot be advanced. Stand it down while Fero is talking; it comes straight back when the tour closes. */ body.hp-tour-open #hp-chat-root { display: none !important; } /* the way back in, next to the name */ .hp-pen.hp-tour-again { font-family: var(--hp-font-display); font-size: 15px; line-height: 1; color: var(--hp-gold); } @media (prefers-reduced-motion: reduce) { .hp-tour-hole { transition: none; } .hp-tour-fero, .hp-tour-quest, .hp-tour-bubble { animation: none; } } /* ---------- founding member ---------- Permanent, earned before the club existed. Gold on the same pill grammar as the level chip so it reads as a rank, not as a promotion banner. */ .hp-founder-chip { display: inline-flex; align-items: center; gap: 6px; padding: 5px 13px; border-radius: 999px; font-family: var(--hp-font-display); font-size: 13px; letter-spacing: .02em; color: #2a1a00; background: linear-gradient(160deg, #fff0c8, #ffd75e 45%, var(--hp-gold)); background-color: #ffd75e; box-shadow: 0 5px 16px rgba(255, 194, 0, .32), inset 0 1px 0 rgba(255, 255, 255, .6); white-space: nowrap; } /* Super VIP: the same pill, a cooler colour so it reads as a status of its own next to the gold founder chip. Plain text, no icon. Dark enough for white 13 px text at every stop of the gradient (lightest #6f4ff0 ≈ 5.2:1). */ .hp-founder-chip.hp-vip-chip { color: #fff; background: linear-gradient(160deg, #6f4ff0, #5b3fd6 45%, #3d22a8); background-color: #5b3fd6; box-shadow: 0 5px 16px rgba(91, 63, 214, .35), inset 0 1px 0 rgba(255, 255, 255, .3); } .hp-order .gift { font-size: 15px; line-height: 1; } /* An order from before the club (no XP, no rewards): a small struck "XP" beside its number — dashboard list and Objednávky (Account::noxp_mark). */ .hp-noxp { display: inline-block; margin-left: 7px; padding: 0 4px; vertical-align: 2px; font-family: var(--hp-font-sub, serif); font-size: 10px; font-weight: 700; font-style: normal; line-height: 15px; letter-spacing: .04em; color: var(--hp-ink-faint, rgba(244, 242, 255, .56)); border: 1px solid rgba(244, 242, 255, .24); border-radius: 4px; text-decoration: line-through; white-space: nowrap; cursor: help; } /* ---------- popups: centred on phones, titles in our own type ---------- Every overlay is a padded grid. With no explicit column the implicit auto column grew to the card's fixed 94vw — wider than the padded box on any phone — so the card started at the left padding and ran almost to the right edge (20 px gap left, 3 px right at 390 px). One column exactly as wide as the padded box, and cards at min(…px, 100%) of it, centre at every width: 320 / 375 / 390 px → 296 / 351 / 366 px cards with 12 px gutters on both sides; 430 px → 390–394 px with the usual 18–20 px; wider screens get the 400–620 px caps, centred. */ .hp-xpop, .hp-lvlup, .hp-lvlrw, .hp-giftpop, .hp-achpop { grid-template-columns: minmax(0, 1fr); } .hp-mcard, .hp-xpop .card, .hp-lvlup .card, .hp-lvlrw .card, .hp-giftpop .card, .hp-achpop .card { box-sizing: border-box; } @media (max-width: 420px) { .hp-modal, .hp-xpop, .hp-lvlup, .hp-lvlrw, .hp-giftpop, .hp-achpop { padding: 12px; } } /* Elementor Pro's My Account widget (the dashboard renders inside it) styles every h3 at (0,4,1) — its gold, a 45 px bottom margin — and the kit's typography at (0,5,1) swaps Titan One for Domine. A bare class rule at (0,1,1) cannot win; an id can, without !important. Pinned by the titles' own ids so the same rule also holds wherever the popups render outside #hpProfile (the thank-you page). */ #hpLvlUpTitle, #hpAchPopName, #hpRwTitle, #hpGiftTitle, #hpXpopTitle { font-family: var(--hp-font-display); font-weight: 400; font-style: normal; text-transform: none; line-height: 1.2; letter-spacing: .02em; padding: 0; border: 0; } #hpLvlUpTitle { font-size: 26px; color: var(--hp-gold); margin: 6px 0 2px; } #hpAchPopName { font-size: 25px; color: var(--hp-ink); margin: 7px 0 0; } #hpRwTitle { font-size: 20px; color: var(--hp-gold); margin: 4px 0 14px; } #hpGiftTitle { font-size: 22px; color: var(--hp-gold); margin: 6px 0 2px; } #hpXpopTitle { font-size: 19px; color: var(--hp-gold); margin: 13px 0 9px; letter-spacing: .03em; } /* a double-click on a badge claims it once — it must not also select its name */ .hp-badge { -webkit-user-select: none; user-select: none; } /* the minimum spend / maximum basket on a coupon card */ .hp-coupon .terms { font-family: var(--hp-font-sub); font-size: 11.5px; line-height: 1.35; color: rgba(255, 236, 200, .82); margin-top: 3px; } .hp-scrollinner .hp-coupon .terms { font-size: 10px; margin-top: 3px; } /* one quiet line for a refusal that has no popup of its own (badge, day tile); above the chat launcher (99990) and the loyalty modals, never clickable */ /* Centred by both insets + auto margins, NOT left:50% — a fixed box at left:50% shrinks to the half of the screen right of that point, so on a 390 px phone every message wrapped into ~195 px. max-content under the max-width cap = as wide as the text, never wider than the screen. */ .hp-toast { position: fixed; left: 0; right: 0; bottom: 24px; z-index: 99997; box-sizing: border-box; width: max-content; margin: 0 auto; max-width: min(440px, calc(100vw - 32px)); padding: 11px 18px; border-radius: 14px; font-family: var(--hp-font-sub); font-size: 13.5px; line-height: 1.4; text-align: center; color: var(--hp-ink); background: linear-gradient(rgba(28, 24, 60, .98), rgba(14, 12, 34, .98)); border: 1px solid rgba(255, 194, 0, .45); box-shadow: 0 14px 40px rgba(0, 0, 0, .55); opacity: 0; transform: translateY(16px); pointer-events: none; transition: opacity .25s ease, transform .25s ease; } .hp-toast.on { opacity: 1; transform: none; }