/* ========================================================================== Busy Bee Bingo — Comic-style ranking stickers Scoped to homepage compare table (table#sites) ========================================================================== */ @import url('https://fonts.googleapis.com/css2?family=Bowlby+One&display=swap'); /* Counter init -------------------------------------------------------------- */ body.home #sites tbody { counter-reset: bbrank; } body.home #sites tbody > tr { counter-increment: bbrank; } /* The first cell needs to allow the sticker to peek outside its box ---------- */ body.home #sites tbody > tr td.column-1, body.home #sites tbody > tr td.column-1 .box { position: relative; overflow: visible !important; } /* --------------------------------------------------------------------------- The sticker (positions 1–10) --------------------------------------------------------------------------- */ body.home #sites tbody > tr:nth-child(-n+10) td.column-1 .box::before { content: counter(bbrank); position: absolute; top: -16px; left: -16px; z-index: 5; width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-family: "Bowlby One", "Arial Black", Impact, sans-serif; font-size: 30px; line-height: 1; color: #141414; text-shadow: 1px 1px 0 rgba(255, 255, 255, 0.55); /* Layered fill: halftone dots + faint diagonal stripes + gold-yellow gradient */ background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.22) 1.1px, transparent 1.4px) 0 0 / 6px 6px, repeating-linear-gradient(135deg, transparent 0 8px, rgba(0,0,0,0.05) 8px 9px), radial-gradient(circle at 32% 28%, #ffe25a 0%, #ffb800 70%, #c98a00 100%); /* White "die-cut" ring + thick black sticker border + hard comic shadow */ border: 3px solid #ffffff; box-shadow: 0 0 0 3px #141414, /* sticker outline (sits outside white ring) */ 5px 5px 0 3px #141414; /* hard comic drop shadow */ pointer-events: none; transform-origin: 50% 50%; } /* Hand-applied tilt — every row a different angle so it feels stuck on by hand */ body.home #sites tbody > tr:nth-child(1) td.column-1 .box::before { transform: rotate(-9deg); } body.home #sites tbody > tr:nth-child(2) td.column-1 .box::before { transform: rotate(7deg); } body.home #sites tbody > tr:nth-child(3) td.column-1 .box::before { transform: rotate(-5deg); } body.home #sites tbody > tr:nth-child(4) td.column-1 .box::before { transform: rotate(11deg); } body.home #sites tbody > tr:nth-child(5) td.column-1 .box::before { transform: rotate(-12deg); } body.home #sites tbody > tr:nth-child(6) td.column-1 .box::before { transform: rotate(6deg); } body.home #sites tbody > tr:nth-child(7) td.column-1 .box::before { transform: rotate(-7deg); } body.home #sites tbody > tr:nth-child(8) td.column-1 .box::before { transform: rotate(10deg); } body.home #sites tbody > tr:nth-child(9) td.column-1 .box::before { transform: rotate(-10deg); } body.home #sites tbody > tr:nth-child(10) td.column-1 .box::before { transform: rotate(8deg); } /* --------------------------------------------------------------------------- Top three: special metallic gradients (gold / silver / bronze) --------------------------------------------------------------------------- */ /* #1 GOLD — bigger, brighter, and gets a crown */ body.home #sites tbody > tr:nth-child(1) td.column-1 .box::before { width: 78px; height: 78px; font-size: 38px; top: -22px; left: -22px; background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.22) 1.1px, transparent 1.4px) 0 0 / 6px 6px, repeating-linear-gradient(135deg, transparent 0 8px, rgba(0,0,0,0.05) 8px 9px), radial-gradient(circle at 30% 25%, #fff4a8 0%, #ffc83a 45%, #d68a00 80%, #8a5500 100%); box-shadow: 0 0 0 3px #141414, 6px 6px 0 3px #141414; } /* #2 SILVER */ body.home #sites tbody > tr:nth-child(2) td.column-1 .box::before { background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.22) 1.1px, transparent 1.4px) 0 0 / 6px 6px, repeating-linear-gradient(135deg, transparent 0 8px, rgba(0,0,0,0.05) 8px 9px), radial-gradient(circle at 32% 28%, #fafafa 0%, #c8c8c8 60%, #7c7c7c 100%); } /* #3 BRONZE */ body.home #sites tbody > tr:nth-child(3) td.column-1 .box::before { background: radial-gradient(circle at 50% 50%, rgba(0,0,0,0.22) 1.1px, transparent 1.4px) 0 0 / 6px 6px, repeating-linear-gradient(135deg, transparent 0 8px, rgba(0,0,0,0.05) 8px 9px), radial-gradient(circle at 32% 28%, #ffd49a 0%, #c8762e 65%, #6e3f15 100%); } /* --------------------------------------------------------------------------- The bee — a tiny 🐝 lands on each badge (Crown for #1, bee for 2–10) --------------------------------------------------------------------------- */ body.home #sites tbody > tr:nth-child(-n+10) td.column-1 .box::after { position: absolute; z-index: 6; pointer-events: none; filter: drop-shadow(1px 1px 0 rgba(0, 0, 0, 0.55)); } /* #1 wears the crown (above the badge) */ body.home #sites tbody > tr:nth-child(1) td.column-1 .box::after { content: "👑"; top: -38px; left: 4px; font-size: 26px; transform: rotate(-12deg); } /* #2–#10 get a bee landing on the top-right of the sticker */ body.home #sites tbody > tr:nth-child(n+2):nth-child(-n+10) td.column-1 .box::after { content: "🐝"; top: -18px; left: 32px; font-size: 22px; transform: rotate(20deg); } /* --------------------------------------------------------------------------- Mobile sizing — keep stickers visible but proportionate --------------------------------------------------------------------------- */ @media (max-width: 600px) { body.home #sites tbody > tr:nth-child(-n+10) td.column-1 .box::before { width: 48px; height: 48px; font-size: 22px; top: -10px; left: -10px; border-width: 2px; box-shadow: 0 0 0 2px #141414, 3px 3px 0 2px #141414; } body.home #sites tbody > tr:nth-child(1) td.column-1 .box::before { width: 56px; height: 56px; font-size: 26px; top: -14px; left: -14px; } body.home #sites tbody > tr:nth-child(1) td.column-1 .box::after { top: -28px; left: 4px; font-size: 20px; } body.home #sites tbody > tr:nth-child(n+2):nth-child(-n+10) td.column-1 .box::after { top: -12px; left: 24px; font-size: 16px; } }