/** * PollyVox v0.10 presentation layer. * One media geometry, responsive ratings and richer movie entities. */ :root { --pv-media-radius: 10px; --pv-card-border: #dfe3eb; --pv-rating-star: #f5a900; --pv-rating-muted: #d9dde5; } /* One rectangular image language across news and editorial cards. */ .pv-card, .pv-related-card, .pv-story-row, .pv-story-lead, .pv-latest-timeline__card, .pv-movie-news-card, .pv-inline-related-block .pv-related-card { border: var(--pv-card-border-width, 1px) solid var(--pv-card-border); border-radius: var(--pv-media-radius); background: var(--pv-color-surface, #fff); background-clip: padding-box; overflow: hidden; } .pv-card__media, .pv-related-card__media, .pv-story-row__media, .pv-story-lead__media, .pv-latest-timeline__media, .pv-movie-news-card__media, .pv-video-card__media, .pv-similar-card__media { display: block; position: relative; aspect-ratio: 16 / 9; min-width: 0; border-radius: var(--pv-media-radius); overflow: hidden; background: #edf0f5; } .pv-card__media img, .pv-related-card__media img, .pv-story-row__media img, .pv-story-lead__media img, .pv-latest-timeline__media img, .pv-movie-news-card__media img, .pv-video-card__media img, .pv-similar-card__media img { display: block; width: 100%; height: 100%; margin: 0; padding: 0; border-radius: inherit; object-fit: cover; object-position: center; } /* * Spectrum hover. * * v0.10.1 fix: the previous rule used `background: linear-gradient(#fff,#fff) padding-box, ...` * on the ::after pseudo. Without an accompanying mask, that paints the entire * card white on hover instead of just the border. It also fired unconditionally, * bypassing the `pollyvox_spectrum_hover` toggle. * * The rule is now: * 1. Gated by `.pv-spectrum-enabled` on so the toggle actually works. * 2. Rewritten to use mask compositing, so only the 1px border is painted. * * editorial.css carries the same rule with different colour stops; keeping both * is intentional — this file's palette matches the v0.10 refresh. */ .pv-spectrum-card { position: relative; isolation: isolate; border-radius: var(--pv-media-radius); transition: box-shadow .18s ease, transform .18s ease; } .pv-spectrum-enabled .pv-spectrum-card::after { content: ""; position: absolute; inset: 0; z-index: 3; padding: 1px; border-radius: inherit; background: linear-gradient(100deg, #1673ff, #8d42e9, #ef4698, #ff8d00, #ff3826); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; opacity: 0; transition: opacity .18s ease; } .pv-spectrum-enabled .pv-spectrum-card:hover, .pv-spectrum-enabled .pv-spectrum-card:focus-within { box-shadow: 0 12px 34px rgba(7, 31, 95, .10); } .pv-spectrum-enabled .pv-spectrum-card:hover::after, .pv-spectrum-enabled .pv-spectrum-card:focus-within::after { opacity: 1; } .pv-spectrum-title a, a.pv-spectrum-title, .pv-spectrum-title { transition: color .18s ease; } .pv-spectrum-titles .pv-spectrum-card:hover .pv-spectrum-title, .pv-spectrum-titles .pv-spectrum-card:hover .pv-spectrum-title a, .pv-spectrum-titles .pv-spectrum-card:focus-within .pv-spectrum-title, .pv-spectrum-titles .pv-spectrum-card:focus-within .pv-spectrum-title a { background: linear-gradient(90deg, #146fe8, #9544e1, #e84b98, #ff8a00, #ef3d31); -webkit-background-clip: text; background-clip: text; color: transparent; } /* Reduced motion: never move or flash a border. */ @media (prefers-reduced-motion: reduce) { .pv-spectrum-card, .pv-spectrum-enabled .pv-spectrum-card::after { transition: none; } .pv-spectrum-enabled .pv-spectrum-card:hover { transform: none; } } /* * Inline related-story card. * * v0.10.1 fix: the previous rule set `width: min(230px, 28vw)` on the media div, * which frequently exceeded the grid column defined in editorial.css * (`clamp(110px, 25%, 190px)`). Because the card has `overflow: hidden`, the * right third of the image was clipped on medium desktop widths. * * The media element now inherits its width from the grid column. The column * itself is widened slightly (from ~25% to ~32%) so the thumbnail feels * proportionate to a magazine-style related rail without dominating the text. */ .pv-related-card__body { align-items: stretch; grid-template-columns: minmax(0, 1fr) clamp(140px, 32%, 220px); gap: 20px; } .pv-related-card__media { width: 100%; align-self: center; aspect-ratio: 16 / 9; } .pv-inline-related-block .pv-related-card__body { padding: 16px; gap: 20px; } /* Article and block five-star presentation. */ .pv-stars { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; width: fit-content; max-width: 100%; padding: 10px 14px; border: 1px solid var(--pv-card-border); border-radius: var(--pv-media-radius); background: #fff; } .pv-stars__label { font-size: .82rem; font-weight: 800; color: #071f5f; } .pv-stars__track { position: relative; display: inline-block; font-size: 1.25rem; line-height: 1; letter-spacing: 2px; color: var(--pv-rating-muted); white-space: nowrap; } .pv-stars__fill { position: absolute; inset: 0 auto 0 0; display: block; overflow: hidden; color: var(--pv-rating-star); white-space: nowrap; } .pv-stars__value { color: #071f5f; font-size: 1rem; } .pv-stars__value small { font-size: .72em; color: #727783; } .pv-stars--article { margin: 16px 0 4px; } .pv-star-rating-block { margin-block: 22px; } /* Movie top: editorial score never changes when users vote. */ .pv-movie-ratings { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; margin: 18px 0; } .pv-movie-rating { min-width: 0; padding: 14px 16px; border: 1px solid var(--pv-card-border); border-radius: var(--pv-media-radius); background: rgba(255,255,255,.96); } .pv-movie-rating__label { display: block; margin-bottom: 6px; font-size: .76rem; font-weight: 850; letter-spacing: .06em; text-transform: uppercase; color: #626977; } .pv-movie-rating__score { display: flex; align-items: baseline; gap: 3px; color: #071f5f; } .pv-movie-rating__score strong { font-size: 2rem; line-height: 1; } .pv-movie-rating__score small { color: #6f7480; } .pv-user-stars { display: flex; gap: 3px; margin-top: 8px; } .pv-user-stars button { appearance: none; border: 0; background: transparent; padding: 2px; font-size: 1.5rem; line-height: 1; color: var(--pv-rating-muted); cursor: pointer; } .pv-user-stars button[aria-pressed="true"], .pv-user-stars button:hover, .pv-user-stars button:focus-visible, .pv-user-stars button:hover ~ button { color: var(--pv-rating-star); } .pv-user-rating__status { min-height: 1.2em; margin: 6px 0 0; font-size: .76rem; color: #606673; } /* Organized factual information table. */ .pv-movie-info-card { margin: 26px 0; padding: 20px; border: 1px solid var(--pv-card-border); border-radius: var(--pv-media-radius); background: #fff; } .pv-movie-info-card h2 { margin: 0 0 16px; } .pv-movie-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0; } .pv-movie-facts > div { display: grid; grid-template-columns: minmax(100px, .65fr) minmax(0, 1.35fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid #e8ebf1; } .pv-movie-facts dt { color: #676d79; font-weight: 700; } .pv-movie-facts dd { margin: 0; color: #071f5f; font-weight: 750; overflow-wrap: anywhere; } /* Trailer and streaming availability. */ .pv-movie-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 16px; } .pv-action-button { display: inline-flex; align-items: center; justify-content: center; min-height: 44px; padding: 10px 17px; border: 1px solid #071f5f; border-radius: 999px; background: #071f5f; color: #fff; font-weight: 800; text-decoration: none; } .pv-action-button--secondary { background: transparent; color: #071f5f; } .pv-streaming { margin: 18px 0 26px; padding: 16px; border: 1px solid var(--pv-card-border); border-radius: var(--pv-media-radius); background: #fff; } .pv-streaming__title { margin: 0 0 12px; font-size: .9rem; font-weight: 850; color: #071f5f; } .pv-streaming__list { display: flex; flex-wrap: wrap; gap: 10px; } .pv-streaming__item { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 7px 12px; border: 1px solid #d9dde5; border-radius: 999px; background: #fff; color: #071f5f; font-weight: 750; text-decoration: none; } .pv-streaming__item img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; } .pv-streaming__badge { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: #071f5f; color: #fff; font-size: .68rem; font-weight: 900; } .pv-streaming__attribution { margin: 10px 0 0; font-size: .72rem; color: #717783; } /* Movie news and video carousels. */ .pv-movie-news__track, .pv-video-carousel__track, .pv-similar-carousel__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(250px, 31%); gap: 14px; overflow-x: auto; padding: 2px 2px 14px; scroll-snap-type: x mandatory; scrollbar-width: thin; } .pv-movie-news-card, .pv-video-card, .pv-similar-card { scroll-snap-align: start; min-width: 0; } .pv-movie-news-card__body { padding: 13px; } .pv-movie-news-card__body h3 { margin: 0 0 10px; font-size: 1rem; } .pv-movie-news-card__body span { font-size: .75rem; color: #707682; } /* Author social buttons: visible strokes/fills on light and dark contexts. */ .pv-author-socials { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; } .pv-author-socials a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #d9dde5; border-radius: 50%; background: #fff; color: #071f5f; } .pv-author-socials svg { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; stroke-width: 1.6; } .pv-author-socials a:hover, .pv-author-socials a:focus-visible { border-color: #071f5f; transform: translateY(-1px); } /* Compact review verdict on smaller screens. */ @media (max-width: 760px) { .pv-related-card__body, .pv-inline-related-block .pv-related-card__body { display: grid; grid-template-columns: minmax(0, 1fr) 128px; gap: 14px; padding: 14px; } .pv-related-card__media { width: 100%; } .pv-review-verdict { padding: 14px; } .pv-review-verdict__lead { gap: 12px; } .pv-review-verdict__badge { width: 118px; min-height: 94px; padding: 10px; } .pv-review-verdict__badge strong { font-size: 2rem; } .pv-review-verdict__summary { font-size: .98rem; line-height: 1.48; } .pv-review-verdict__columns { gap: 12px; padding: 14px; } .pv-review-verdict__column h3 { margin-bottom: 10px; font-size: 1.05rem; } .pv-review-verdict__column ul { gap: 10px; } .pv-review-verdict__column li { padding-left: 26px; font-size: .92rem; } .pv-movie-ratings { grid-template-columns: 1fr; } .pv-movie-facts { grid-template-columns: 1fr; } .pv-movie-news__track, .pv-video-carousel__track, .pv-similar-carousel__track { grid-auto-columns: minmax(238px, 82%); } .pv-byline--article .pv-byline__identity { display: flex; flex-wrap: wrap; align-items: center; } .pv-byline--article .pv-byline__prefix { display: none; } .pv-byline--article .pv-byline__role { order: 1; } .pv-byline--article .pv-byline__role-separator { order: 2; display: inline; margin-inline: 5px; } .pv-byline--article .pv-byline__author { order: 3; } } @media (max-width: 480px) { .pv-related-card__body, .pv-inline-related-block .pv-related-card__body { grid-template-columns: minmax(0, 1fr) 108px; padding: 12px; gap: 12px; } .pv-related-card__media { width: 100%; } .pv-review-verdict-block { margin-block: 18px; } .pv-review-verdict { padding: 12px; border-radius: 10px; } .pv-review-verdict__badge { width: 104px; min-height: 84px; } .pv-review-verdict__badge span { font-size: .72rem; } .pv-review-verdict__badge strong { font-size: 1.75rem; } .pv-review-verdict__columns { padding: 12px; } .pv-stars { padding: 9px 11px; gap: 7px; } .pv-stars__track { font-size: 1.05rem; letter-spacing: 1px; } .pv-movie-info-card { padding: 14px; } .pv-movie-facts > div { grid-template-columns: 92px minmax(0, 1fr); gap: 8px; font-size: .9rem; } .pv-action-button { width: 100%; } } @media (prefers-reduced-motion: reduce) { .pv-spectrum-card::after, .pv-spectrum-title, .pv-author-socials a { transition: none; } } /* Existing movie streaming markup. */ .pv-watch { margin: 18px 0 26px; padding: 16px; border: 1px solid var(--pv-card-border); border-radius: var(--pv-media-radius); background: #fff; } .pv-watch__title { display: block; margin-bottom: 12px; color: #071f5f; font-size: .9rem; font-weight: 850; } .pv-watch__services { display: flex; flex-wrap: wrap; gap: 10px; } .pv-watch__service { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 7px 12px; border: 1px solid #d9dde5; border-radius: 999px; background: #fff; color: #071f5f; font-weight: 750; text-decoration: none; } .pv-watch__service img { width: 28px; height: 28px; object-fit: contain; border-radius: 6px; } .pv-watch__fallback { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 6px; background: #071f5f; color: #fff; font-size: .68rem; font-weight: 900; } .pv-watch__attribution { display: block; margin-top: 10px; color: #717783; font-size: .72rem; } .pv-authorpage__social { display: flex; flex-wrap: wrap; gap: 9px; margin-top: 16px; } .pv-authorpage__social a { display: grid; place-items: center; width: 42px; height: 42px; border: 1px solid #d9dde5; border-radius: 50%; background: #fff; color: #071f5f; } .pv-authorpage__social svg { width: 20px; height: 20px; fill: currentColor; stroke: currentColor; stroke-width: 1.6; } .pv-authorpage__social a:hover, .pv-authorpage__social a:focus-visible { border-color: #071f5f; transform: translateY(-1px); } .pv-movie-videos__track, .pv-similar-movies__track { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(230px, 30%); gap: 14px; overflow-x: auto; padding: 2px 2px 14px; scroll-snap-type: x mandatory; } .pv-movie-video, .pv-similar-movie { display: flex; flex-direction: column; gap: 8px; min-height: 150px; padding: 16px; border: 1px solid var(--pv-card-border); border-radius: var(--pv-media-radius); background: #fff; color: #071f5f; text-decoration: none; scroll-snap-align: start; } .pv-similar-movie > span { display: block; aspect-ratio: 2 / 3; border-radius: var(--pv-media-radius); overflow: hidden; background: #edf0f5; } .pv-similar-movie img { display: block; width: 100%; height: 100%; object-fit: cover; } .pv-movie-video__play { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #071f5f; color: #fff; } .pv-entity-facts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 24px; margin: 0; padding: 20px; border: 1px solid var(--pv-card-border); border-radius: var(--pv-media-radius); background: #fff; } .pv-entity-facts > div { display: grid; grid-template-columns: minmax(105px, .65fr) minmax(0, 1.35fr); gap: 12px; padding: 12px 0; border-bottom: 1px solid #e8ebf1; } .pv-entity-facts dt { color: #676d79; font-weight: 700; } .pv-entity-facts dd { margin: 0; color: #071f5f; font-weight: 750; overflow-wrap: anywhere; } @media (max-width: 760px) { .pv-movie-videos__track, .pv-similar-movies__track { grid-auto-columns: minmax(220px, 78%); } .pv-entity-facts { grid-template-columns: 1fr; padding: 14px; } } .pv-user-stars button.is-active { color: var(--pv-rating-star); } .pv-release-calendar__grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } .pv-release-calendar__grid > div { display: grid; gap: 4px; padding: 12px; border: 1px solid var(--pv-card-border); border-radius: var(--pv-media-radius); background: #fff; } .pv-release-calendar__grid strong { color: #071f5f; } .pv-release-calendar__grid time { color: #6d7380; font-size: .82rem; } @media (max-width: 760px) { .pv-release-calendar__grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }