/* =============================== Rude Heart — compact, tidy CSS Only styles the heart UI + tooltips =============================== */ /* Core wrap */ .rh-wrap{ display:inline-flex; align-items:center; position:relative; } /* Heart button (default size) */ .rh-btn{ display:grid; /* perfect centering */ place-items:center; width:25px; height:25px; border-radius:50%; border:1px solid var(--accent); background:#fff; cursor:pointer; transition:transform .15s ease, background .15s ease, border .15s ease; padding:0; line-height:0; /* no extra inline height */ position:relative; } .rh-btn i{ font-size:14px; color:var(--accent); line-height:1; /* normalize glyph box */ display:block; width:1em; height:1em; /* fixed box so weights don't shift */ transform:none; /* remove old nudge */ pointer-events:none; /* clicks hit the button */ } /* Count badge */ .rh-btn .rh-count{ position:absolute; top:-6px; right:-6px; min-width:16px; height:16px; padding:0 4px; font-size:10px; font-weight:600; line-height:16px; text-align:center; border-radius:999px; background:var(--accent); color:#fff; box-shadow:0 1px 3px rgba(0,0,0,.25); } /* Hover & active states */ .rh-btn:hover{ transform:scale(1.15); background:var(--accent); } .rh-btn:hover i{ color:#fff; } .rh-btn.rh-active{ background:var(--accent); } .rh-btn.rh-active i{ color:#fff; } /* ------------------------------- Tooltip (local content source) ------------------------------- */ .rh-tip{ position:absolute; top:135%; left:50%; transform:translateX(-50%) translateY(8px); opacity:0; pointer-events:none; transition:opacity .15s ease, transform .15s ease; z-index:10000; /* above nearby UI */ } .rh-tip .rh-tip-inner{ background:#111; color:#fff; font:500 12px/1.35 system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial,sans-serif; padding:6px 8px; border-radius:6px; box-shadow:0 4px 12px rgba(0,0,0,.25); white-space:nowrap; } .rh-tip .rh-who{ list-style:none; margin:0; padding:0; } .rh-tip .rh-who li{ white-space:nowrap; } .rh-wrap:hover .rh-tip{ opacity:1; pointer-events:auto; transform:translateX(-50%) translateY(0); } /* Floating tooltip (moved to by JS to avoid clipping) */ .rh-tip--floating{ position:fixed; /* viewport */ left:0; top:0; transform:none; opacity:0; pointer-events:none; z-index:100000; } .rh-tip--floating.show{ opacity:1; } .rh-tip--detached{ display:none !important; } /* hide local while floating shows */ /* ------------------------------- Burst animation (center of viewport) ------------------------------- */ .rh-burst-stage{ position:fixed; inset:0; pointer-events:none; z-index:9999; } .rh-burst-icon{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%) scale(0.1); opacity:0; font-size:80px; color:var(--accent); animation:rh-burst 500ms cubic-bezier(.2,.7,.1,1) forwards; filter:drop-shadow(0 6px 20px rgba(0,0,0,.3)); } @keyframes rh-burst{ 0%{ transform:translate(-50%,-50%) scale(0.1); opacity:0; } 20%{ transform:translate(-50%,-50%) scale(1.0); opacity:1; } 60%{ transform:translate(-50%,-50%) scale(3.0); opacity:.9; } 100%{ transform:translate(-50%,-50%) scale(4.0); opacity:0; } } /* =============================== Single hero — left row (Heart + Badge side by side) =============================== */ .single-hero{ position:relative; } .hero-left-row{ position:absolute; left:14px; top:14px; z-index:10000; display:flex; align-items:center; gap:10px; /* space between heart and badge */ pointer-events:none; /* container ignores clicks */ } .hero-left-row > *{ pointer-events:auto; /* children clickable */ display:flex; align-items:center; } /* Ensure any badge markup participates in the flow (not absolute) */ .hero-left-row .hero-badge > *{ position:static !important; inset:auto !important; margin:0 !important; } /* Heart visuals in hero row (slightly larger) */ .hero-left-row .rh-btn{ width:28px; height:28px; border:1px solid #c0c0c0; background:#fff; border-radius:50%; display:grid; place-items:center; } .hero-left-row .rh-btn i{ color:#9aa0a6; font-size:15px; line-height:1; width:1em; height:1em; transform:none; } .hero-left-row .rh-btn:hover, .hero-left-row .rh-btn.rh-active{ background:var(--accent); border-color:var(--accent); } .hero-left-row .rh-btn:hover i, .hero-left-row .rh-btn.rh-active i{ color:#fff; } .hero-left-row .rh-btn .rh-count{ top:-6px; right:-6px; } .hero-left-row .rh-tip{ z-index:10001; } /* Prevent hero layers from stealing clicks; no visual change */ .single-hero .hero-bg, .single-hero .hero-foreground-wrap, .single-hero .hero-fade{ pointer-events:none; } /* =============================== Post cards (index/archive) overlay =============================== */ .post-card{ position:relative; } /* no impact on grid sizing */ .card-heart{ position:absolute; top:8px; left:8px; z-index:5; /* above the image only */ } .card-heart .rh-btn{ width:25px; height:25px; border:1px solid #c0c0c0; background:#fff; border-radius:50%; display:grid; place-items:center; } .card-heart .rh-btn i{ color:#9aa0a6; line-height:1; width:1em; height:1em; transform:none; } .card-heart .rh-btn:hover, .card-heart .rh-btn.rh-active{ background:var(--accent); border-color:var(--accent); } .card-heart .rh-btn:hover i, .card-heart .rh-btn.rh-active i{ color:#fff; } .card-heart .rh-btn .rh-count{ top:-6px; right:-6px; } .card-heart .rh-tip{ z-index:10000; } /* =============================== Hero slider alignment Heart top-left, same line height as tag badge =============================== */ .sknhd-hero-slide{ position:relative; } .sknhd-hero-slide .slider-heart, .sknhd-hero-slide .sknhd-hero-badge{ position:absolute; top:12px; /* unified offset */ display:flex; align-items:center; } .sknhd-hero-slide .slider-heart{ left:12px; } .sknhd-hero-slide .sknhd-hero-badge{ right:12px; } .slider-heart .rh-btn{ width:30px; height:30px; border:1px solid #c0c0c0; background:#fff; border-radius:50%; display:grid; place-items:center; } .slider-heart .rh-btn i{ font-size:15px; color:#9aa0a6; line-height:1; width:1em; height:1em; transform:none; } .slider-heart .rh-btn:hover, .slider-heart .rh-btn.rh-active{ background:var(--accent); border-color:var(--accent); } .slider-heart .rh-btn:hover i, .slider-heart .rh-btn.rh-active i{ color:#fff; } .slider-heart .rh-btn .rh-count{ top:-7px; right:-7px; } /* Rude Heart — login lightbox */ #yt-lightbox.is-open .ytbox__message{ display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:32px 24px; font-size:18px; line-height:1.5; background:#fff; border-radius:16px; box-shadow:0 10px 30px rgba(0,0,0,.25); max-width:420px; margin:0 auto; } #yt-lightbox .ytbox__message p{ margin:0 0 20px; font-weight:500; } #yt-lightbox .ytbox__message .ytbox__actions{ display:flex; flex-wrap:wrap; justify-content:center; gap:12px; width:100%; } #yt-lightbox .ytbox__message .button{ font-size:16px; padding:.6em 1.2em; border-radius:8px; min-width:120px; text-align:center; } #yt-lightbox .ytbox__message .ytbox__close{ background:#f3f3f3; border:none; cursor:pointer; }