/** * Vote Page frame — nominee renderer (Task 3). * * Styles `shining_render_nominees()` output (`.sa-nom`), which frames the * TotalPoll widget with a premium, poll-sourced nominee list. Three visual * layouts share the same markup/classes and are switched purely with a * modifier class: `.sa-nom--grid` (face grid, default), `.sa-nom--roster` * (two-column info cards), `.sa-nom--chips` (flowing compact chips). * * Ported + rescoped from the approved mockup (grid-a/g-item/g-name/g-grp, * grid-b/r-card/r-rank/r-name/r-grp/r-link, grid-c/chip/c-name/c-grp) into * `.sa-nom__*` BEM-ish parts, and re-pointed from literal hex to the theme's * `--sa-*` tokens (`tokens.css`) so it tracks the active palette. * * Never touches the TotalPoll plugin — this only styles our own frame markup. * * @package Shining */ /* Lazy-frame placeholder: a heavy poll's frame is fetched by vote-frame.js and swapped in for these. Empty until then — collapse it so it never adds a gap (and defeat any .entry-content div spacing it would otherwise inherit). */ .sa-vf-lazy { margin: 0 !important; padding: 0; min-height: 0; } .sa-vf-lazy:empty { display: none; } /* Voting-page article title — the

at the top of a vote post — is rendered in UPPERCASE. Two guards, both body classes: `shining-vote-post` (added only on singular posts that host a poll, so ordinary articles / news / K-Pop / K-Drama posts are never touched) and `sa-vote-uc` (the "Force UPPERCASE titles" switch in the Vote Page studio, on by default — remove it to opt out site-wide). Both are set on , so they combine without a descendant. Two selectors on purpose: the Typography studio pins the single title's casing at `html .single .entry-header h1.post-title.entry-title {text-transform:none}` (0,4,2) — pure/typography.php — which outranks the plain guard (0,3,1). The first selector (0,5,3) exists solely to beat that on the standard layout; the plain one still covers post layouts whose title sits outside `.entry-header` (e.g. the fullwidth featured-area header), where the typography rule never matches. */ html body.sa-vote-uc.shining-vote-post .entry-header h1.post-title.entry-title, body.sa-vote-uc.shining-vote-post .entry-title { text-transform: uppercase; } .sa-nom { max-width: 1080px; margin: 34px auto; padding: 0 16px; } /* Nominee section header: uppercase, wide-tracked and gradient-filled, with a hairline-and-heart rule beneath it. Uppercase because this is a section LABEL, not a sentence — at display weight the extra tracking is what stops it reading as shouting. The rule does the separating so the heading itself needs no box or underline. */ .sa-nom__head { display: flex; flex-direction: column; align-items: center; gap: 12px; margin-bottom: 30px; /* the breathing room between label and avatars */ } .sa-nom__heading { font-family: var(--sa-font-display); font-weight: 800; font-size: clamp(19px, 2.9vw, 27px); line-height: 1.15; text-transform: uppercase; letter-spacing: .14em; /* Tracking adds space AFTER the final letter too, which visually pushes a centred line left. Pulling that back re-centres it optically. */ text-indent: .14em; text-align: center; text-wrap: balance; margin: 0; } /* Hairline that fades out from a centre heart — the same rose motif the rest of the theme uses, at section scale. */ .sa-nom__rule { display: flex; align-items: center; justify-content: center; gap: 10px; width: min(260px, 62%); color: var(--sa-heart); } .sa-nom__rule::before, .sa-nom__rule::after { content: ""; flex: 1; height: 1px; background: linear-gradient(90deg, transparent, var(--sa-border-strong)); } .sa-nom__rule::after { background: linear-gradient(90deg, var(--sa-border-strong), transparent); } .sa-nom__heart { width: 11px; height: 11px; flex: none; } @media (max-width: 480px) { .sa-nom__head { gap: 10px; margin-bottom: 22px; } .sa-nom__heading { letter-spacing: .1em; text-indent: .1em; } } /* Shared avatar shell — reused by all three nominee layouts AND the standings strip; sizes are set per-layout below. `shining_nominee_avatar()` always includes this base class, whether it renders an initials span or a `--photo` span wrapping an . */ .sa-nom__av, .sa-stand__av, .sa-pulse__av { border-radius: 50%; overflow: hidden; position: relative; display: flex; align-items: center; justify-content: center; background: var(--sa-gradient); color: var(--sa-on-accent); font-family: var(--sa-font-display); font-weight: 800; flex: none; } /* Real nominee photo — reproduce the hero's own focal crop so the FACE fills the circle (no "frame-in-frame"): the image is blown up past the visible frame and offset by the per-nominee focal point (--np-fx/--np-fy/--np-zoom). Verbatim from home.php's `.sa-hero__av--photo` rules, renamed only. */ .sa-nom__av--photo, .sa-stand__av--photo, .sa-pulse__av--photo{position:relative;background:var(--sa-surface-2);} .sa-nom__av--photo img, .sa-stand__av--photo img, .sa-pulse__av--photo img{position:absolute;width:calc(308% * var(--np-zoom,1));height:calc(308% * var(--np-zoom,1));max-width:none;max-height:none;left:calc(var(--np-fx,.5) * (1 - 3.08 * var(--np-zoom,1)) * 100%);top:calc(var(--np-fy,.4) * (1 - 3.08 * var(--np-zoom,1)) * 100%);object-fit:cover;object-position:center 40%;} .sa-nom__name { font-weight: 600; color: var(--sa-text); } .sa-nom__grp { color: var(--sa-violet-light); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; } /* Leak defense: each nominee is a full-width , and when the frame renders inside `.entry-content` it inherits Jannah's gradient-underline for links (`background-image: linear-gradient(...)`), which stretches into a stray horizontal line across the whole grid row. Kill the inherited underline on every nominee link; the roster/chips layouts set their own background-COLOR separately, so only the leaked image is removed. `!important` because the base `.entry-content a` rule outranks our layout selectors and LiteSpeed combines CSS so source order can't be relied on. */ .sa-nom__item { background-image: none !important; text-decoration: none !important; box-shadow: none; } /* ------------------------------------------------------------------ */ /* Semantic list resets */ /* ------------------------------------------------------------------ */ /* Both rosters are real