/* * Fangoria Chainsaw Awards — landing page styles. * * Design tokens pulled directly from fangoria.com: * - Primary red: #ed1c24 (signature Fango red) * - Dark red: #cb122e * - Deep black: #090909 * - Text black: #222222 * - Text gray: #777777 * - Border: #e6e6e6 * * - Serif (body): Vollkorn * - Sans (heads): Montserrat * - Label (UI): Oswald (condensed, uppercase) * * Scoped under .fango-chainsaw to avoid collisions with Kadence defaults. * Inherits Fangoria's font stacks from the parent site — if this plugin * is used on a non-Fangoria WP install, fallbacks kick in automatically. */ .fango-chainsaw { box-sizing: border-box; /* Colors — Fangoria brand palette * * Parent mode (Brand Architecture v1.1): black + bloody red. Aligns with * fangoria.com's actual treatment: white body, dark sections, red accents. * Steady-state off-whites are warm-neutral (#f5f4f1), not cool-blue-gray. */ --fango-red: #ed1c24; --fango-red-dark: #cb122e; --fango-red-darker: #a90d2f; --fango-red-light: #ffdfd3; /* Brighter brand-red shift for small text on dark backgrounds. The * sacred-cow brand red (#ed1c24) only hits ~4.4:1 contrast on noir, * failing WCAG AA. This shift clears 6.5:1 while staying in the FANGORIA * red family. Use ONLY for small text on dark surfaces. */ --fango-red-on-dark: #ff4d57; --fango-black: #090909; --fango-text: #222222; --fango-text-muted: #777777; --fango-gray-dark: #333333; --fango-gray-darker: #555555; --fango-gray-light: #aeaeae; --fango-border: #e6e6e6; --fango-border-dark: #555555; /* Warm-neutral off-white (~slate-50 with the blue cast removed). Used for * subtle section panels (partners strip, archive jump, accordion hover). */ --fango-bg-tint: #f5f4f1; --fango-bg-noir: #0d0d0d; /* charcoal one shade above pure black */ --fango-bg-dark: #1a0606; /* dark maroon, for hero overlays */ --fango-white: #ffffff; --fango-winner-gold: #EF9F27; --fango-winner-ink: #412402; --fango-winner-bg: #fff8e0; /* warm sand for winner callouts */ /* Fonts — match Fangoria's Kadence config */ --fango-font-serif: "Vollkorn", "Palatino Linotype", Baskerville, Georgia, serif; --fango-font-sans: "Montserrat", "Open Sans", "Helvetica Neue", Helvetica, Arial, sans-serif; --fango-font-label: "Oswald", "Open Sans Condensed", Impact, "Franklin Gothic Bold", sans-serif; /* Type scale — Fangoria's fluid clamp scale */ --fango-fs-sm: clamp(0.8rem, 0.73rem + 0.217vw, 0.9rem); --fango-fs-md: clamp(1.1rem, 0.995rem + 0.326vw, 1.25rem); --fango-fs-lg: clamp(1.75rem, 1.576rem + 0.543vw, 2rem); --fango-fs-xl: clamp(2.25rem, 1.728rem + 1.63vw, 3rem); --fango-fs-xxl: clamp(2.5rem, 1.456rem + 3.26vw, 4rem); --fango-fs-xxxl: clamp(2.75rem, 0.489rem + 7.065vw, 6rem); /* Content width matches Fangoria's layout */ --fango-max-width: 1116px; color: var(--fango-text); font-family: var(--fango-font-serif); } .fango-chainsaw *, .fango-chainsaw *::before, .fango-chainsaw *::after { box-sizing: border-box; } /* ===== Shared type ===== */ .fango-eyebrow { display: inline-block; font-family: var(--fango-font-label); font-size: var(--fango-fs-sm); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; color: var(--fango-red); margin-bottom: 10px; } /* Section head: assumes the section sits on the parent body (#222 on * fangoria.com), so it renders light. Sections that put themselves on a * white card override locally. .fango-chainsaw scope pin lifts the rule * above Kadence's h2 defaults. */ .fango-chainsaw .fango-section-head, .fango-chainsaw h2.fango-section-head { font-family: var(--fango-font-sans); font-size: var(--fango-fs-lg); line-height: 1.15; font-weight: 700; margin: 0 0 1.25rem; color: var(--fango-white); letter-spacing: -0.01em; } /* ===== Buttons ===== */ .fango-btn { display: inline-block; padding: 14px 32px; font-family: var(--fango-font-label); font-size: 14px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; border-radius: 0; transition: background-color 0.18s ease, color 0.18s ease, transform 0.1s ease; cursor: pointer; border: none; line-height: 1; } /* Primary uses red-dark (#cb122e) by default. The lighter red (#ed1c24) on * white fails WCAG AA contrast (~4.0:1); red-dark clears 4.5:1 for normal * text. On dark surfaces (hero, footer-cta, sticky bar) we still allow * red-dark for visual consistency — it's the same family, just deeper. */ .fango-btn--primary { background: var(--fango-red-dark); color: var(--fango-white); } .fango-btn--primary:hover { background: var(--fango-red-darker); color: var(--fango-white); } .fango-btn--ghost { background: transparent; color: var(--fango-white); border: 2px solid rgba(255, 255, 255, 0.6); padding: 12px 30px; margin-left: 10px; } .fango-btn--ghost:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--fango-white); color: var(--fango-white); } .fango-btn--light { background: var(--fango-white); color: var(--fango-black); padding: 10px 22px; font-size: 12px; } .fango-btn--light:hover { background: var(--fango-red); color: var(--fango-white); } /* ===== HERO ===== */ /* SECTION SPACING SYSTEM * * Every section is self-contained: it carries its own top + bottom padding * so it stands alone regardless of what's before/after. No section-level * margin-bottom (the old pattern relied on neighbors to provide breathing * room, which broke as soon as a section was disabled). Visible whitespace * between two stacked sections = sum of their adjacent paddings. */ .fango-hero { /* v0.31.5: pure #000 (not --fango-bg-dark dark maroon) so the * letterbox area visible when the per-state hero image override * uses object-fit: contain blends with the natural black borders * most hero images carry. Eliminates the maroon-to-black seam * editorial flagged on the Evergreen state hero. * * Scoped to .fango-hero only — leaving the --fango-bg-dark variable * intact for .fango-nominees-page__header which intentionally uses * the dark maroon as a flat background (no image behind it). */ background: #000; color: var(--fango-white); padding: 5rem 2rem; margin: 0; position: relative; overflow: hidden; } /* * Real approach for LCP optimization (fetchpriority=high). * * v0.29.6: switched object-fit from `cover` to `contain` so the FULL * uploaded image renders (no automatic crop). If the image's aspect * doesn't match the hero box, the unused area shows the hero's * --fango-bg-dark base color — looks intentional, like a magazine spread. * For a perfect fill, upload a 16:9 landscape image (2560×1440 ideal). */ .fango-hero--has-bg-img .fango-hero__bg-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: contain; object-position: center; z-index: 0; } .fango-hero--has-bg-img::after { content: ''; position: absolute; inset: 0; /* * v0.31.10: 4-stop gradient — heavy black at the top + bottom 10% * fading to the normal mid-section overlay. The hard cuts where the * image met the theme header above + the next chainsaw section below * read as "clipped"; now both edges fade into pure black to match the * section background, so the image transitions smoothly into both * neighbors. * * Tint also switched from rgba(26,6,6,X) (legacy maroon — was a * holdover from when the section bg was --fango-bg-dark before v0.31.5) * to rgba(0,0,0,X) for consistency with the current pure-black section * background. Middle-section alpha unchanged at 0.35-0.55 so text * legibility carried by text-shadow rules below stays intact. */ background: linear-gradient(180deg, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.35) 10%, rgba(0, 0, 0, 0.55) 90%, rgba(0, 0, 0, 0.95) 100% ); z-index: 1; pointer-events: none; } .fango-hero--has-bg-img .fango-hero__headline { text-shadow: 0 2px 18px rgba(0, 0, 0, 0.85), 0 0 6px rgba(0, 0, 0, 0.6); } .fango-hero--has-bg-img .fango-hero__subhead { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85); } .fango-hero--has-bg-img .fango-hero__badge { box-shadow: 0 2px 12px rgba(0, 0, 0, 0.45); } .fango-hero--has-bg-img .fango-countdown__num, .fango-hero--has-bg-img .fango-countdown__label { text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85); } .fango-hero__inner { max-width: var(--fango-max-width); margin: 0 auto; position: relative; z-index: 2; } /* * v0.31.6: hero badge is now a flat eyebrow label, not a red pill. * The prior red-pill treatment read identical to the primary CTA below * it — same red, same uppercase, same shape — making the badge look * clickable and creating affordance ambiguity ("which red thing do * I click?"). Magazine convention: eyebrow is metadata about the * section, not interactive. Stripped to flat uppercase white text * with a small red dot marker so it scans as a status label. * * The primary CTA stays the solid red pill, now unambiguously the * only red button on the hero. */ .fango-hero__badge { display: inline-flex; align-items: center; gap: 0.55em; font-family: var(--fango-font-label); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; font-weight: 700; color: var(--fango-white); background: transparent; padding: 0; margin-bottom: 1.25rem; } .fango-hero__badge::before { content: "●"; color: var(--fango-red-on-dark); font-size: 0.85em; line-height: 1; /* Slight optical lift so the dot baseline aligns with the cap height. */ transform: translateY(-1px); } .fango-hero__headline { font-family: var(--fango-font-sans); font-size: var(--fango-fs-xxl); font-weight: 800; line-height: 0.98; letter-spacing: -0.02em; text-transform: uppercase; color: var(--fango-white); margin: 0 0 1.25rem; max-width: 720px; } .fango-hero__subhead { font-family: var(--fango-font-serif); font-size: var(--fango-fs-md); line-height: 1.55; color: rgba(255, 255, 255, 0.85); max-width: 540px; margin: 0 0 2rem; } .fango-hero__ctas { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; } /* Countdown */ .fango-countdown { display: flex; align-items: center; gap: 12px; margin-top: 2rem; flex-wrap: wrap; } .fango-countdown__box { background: rgba(255, 255, 255, 0.08); border: 1px solid rgba(255, 255, 255, 0.15); padding: 12px 16px; text-align: center; min-width: 70px; } .fango-countdown__num { display: block; font-family: var(--fango-font-sans); font-size: 28px; font-weight: 800; color: var(--fango-white); line-height: 1; } .fango-countdown__label { display: block; font-family: var(--fango-font-label); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); margin-top: 6px; } .fango-countdown__caption { font-family: var(--fango-font-label); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); margin-left: 10px; } /* ===== SPOTLIGHT ===== */ .fango-spotlight { background: var(--fango-black); color: var(--fango-white); padding: 3rem 2rem; margin: 0 auto; position: relative; } .fango-spotlight__inner { max-width: var(--fango-max-width); margin: 0 auto; } /* Eyebrow on dark surfaces: brand red is sacred but #ed1c24 only hits * ~4.4:1 on near-black, failing WCAG AA. Use the brighter brand-red shift * (--fango-red-on-dark) which clears 6.5:1 while staying in the FANGORIA * red family. Applies to spotlight, nominees-link strip, and any other * surface where the eyebrow sits on a dark BG. */ .fango-spotlight .fango-eyebrow, .fango-nominees-link .fango-eyebrow, .fango-hero .fango-eyebrow, .fango-sticky-cta__eyebrow { color: var(--fango-red-on-dark); } /* Higher specificity to beat Kadence's h2 styling: .fango-chainsaw scope * pin lifts the rule above the parent theme's heading defaults so the * uppercase + white treatment actually applies. * * NOTE: template renders .fango-spotlight__heading (not __head) — this * matches the actual class. __head is kept as an alias for back-compat. */ .fango-chainsaw .fango-spotlight__head, .fango-chainsaw h2.fango-spotlight__head, .fango-chainsaw .fango-spotlight__heading, .fango-chainsaw h2.fango-spotlight__heading { font-family: var(--fango-font-sans); font-size: var(--fango-fs-lg); font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; margin: 0 0 1.5rem; color: var(--fango-white); } /* * Spotlight meta line ("Oct 19, 2025 on Shudder hosted by …"). * Single inline line, no separators — items flow with whitespace gap. * v0.29.5 reverted the bullet-separator approach from v0.29.1 which * orphan-wrapped on mobile; this version simply lets items wrap * between (never mid-item) at narrow viewports. */ .fango-spotlight__meta { margin-top: 1.5rem; font-family: var(--fango-font-label); font-size: 16px; line-height: 1.5; letter-spacing: 0.08em; text-transform: uppercase; font-weight: 500; color: rgba(255, 255, 255, 0.92); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 0.6em; } .fango-spotlight__meta-item { white-space: nowrap; /* never break mid-item; wrap only between items */ } @media (max-width: 720px) { .fango-spotlight__meta { font-size: 14px; gap: 0.25em 0.5em; } } .fango-spotlight__trailer { margin: 1rem 0; } /* * Spotlight winners grid (v0.30.0) — up to 4 image-led winner cards * rendered in post + evergreen states. Each card shows the nominee's * associated image (work poster / person headshot / org logo via * fango_chainsaw_nomination_image), the category title as a red eyebrow, * and the winner display string below. Whole card is a link to the * per-nominee detail page when one exists. */ .fango-spotlight__winners-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 18px; margin-top: 1.5rem; } /* If only 1-3 winners qualified, cap the layout so cards don't blow up. */ .fango-spotlight__winners-grid--n1 { grid-template-columns: minmax(0, 360px); justify-content: center; } .fango-spotlight__winners-grid--n2 { grid-template-columns: repeat(2, minmax(0, 360px)); justify-content: center; } .fango-spotlight__winners-grid--n3 { grid-template-columns: repeat(3, minmax(0, 360px)); justify-content: center; } /* Tablet + mobile: 2x2 grid regardless of pool size, instead of a * single-column stack. Keeps the visual rhythm and avoids the long * vertical scroll a 1x4 mobile layout produced (v0.30.1). */ @media (max-width: 980px) { .fango-spotlight__winners-grid, .fango-spotlight__winners-grid--n3 { grid-template-columns: repeat(2, 1fr); } } /* Tighter gap below ~560px so two cards fit comfortably side-by-side on * phones without crowding. */ @media (max-width: 560px) { .fango-spotlight__winners-grid { gap: 10px; } .fango-spotlight-winner__meta { padding: 10px 12px 12px; gap: 6px; } .fango-spotlight-winner__cat { font-size: 11px; letter-spacing: 0.1em; } .fango-spotlight-winner__display { font-size: 14px; } .fango-spotlight-winner__badge { font-size: 10px; padding: 4px 7px; } } .fango-spotlight-winner { display: flex; flex-direction: column; background: rgba(255, 255, 255, 0.04); border: 1px solid rgba(255, 255, 255, 0.14); color: var(--fango-white); text-decoration: none; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .fango-spotlight-winner--linked:hover, .fango-spotlight-winner--linked:focus-visible { transform: translateY(-2px); border-color: var(--fango-red-on-dark); box-shadow: 0 10px 28px rgba(0, 0, 0, 0.45); outline: none; } .fango-spotlight-winner__img-wrap { position: relative; aspect-ratio: 3 / 4; /* poster-ish — accommodates posters / headshots / square logos centered */ overflow: hidden; background: var(--fango-bg-noir); } .fango-spotlight-winner__img { width: 100%; height: 100%; object-fit: cover; object-position: center 30%; display: block; } .fango-spotlight-winner__img-fallback { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 48px; color: rgba(255, 255, 255, 0.25); } .fango-spotlight-winner__badge { position: absolute; top: 10px; left: 10px; background: var(--fango-red); color: var(--fango-white); padding: 5px 10px; font-family: var(--fango-font-label); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; box-shadow: 0 2px 8px rgba(0, 0, 0, 0.35); } .fango-spotlight-winner__meta { padding: 14px 16px 16px; flex: 1; display: flex; flex-direction: column; gap: 8px; } .fango-spotlight-winner__cat { font-family: var(--fango-font-label); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; font-weight: 700; color: var(--fango-red-on-dark); margin: 0; line-height: 1.3; } .fango-spotlight-winner__display { font-family: var(--fango-font-serif); font-size: 16px; line-height: 1.35; color: var(--fango-white); } .fango-spotlight-winner__display em, .fango-spotlight-winner__display i { font-style: italic; } .fango-spotlight-winner__display strong, .fango-spotlight-winner__display b { font-weight: 700; } .fango-nominee-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } /* * Spotlight variant of the nominee grid. Designed to handle 5 to 10 nominees * with graceful wrap. Desktop uses auto-fill so 5 nominees fit on one row at * common widths, 10 wrap to two rows of 5. Mobile collapses to a 2-column * vertical-wrap grid (no horizontal scroll — keeps scroll axis consistent * with the rest of the landing page). */ .fango-nominee-grid--spotlight { grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); } @media (max-width: 767px) { .fango-nominee-grid--spotlight { grid-template-columns: repeat(2, 1fr); gap: 12px; } } .fango-nominee { background: rgba(255, 255, 255, 0.05); border: 1px solid rgba(255, 255, 255, 0.12); padding: 12px; position: relative; transition: border-color 0.18s ease; } .fango-nominee:hover { border-color: var(--fango-red); } .fango-nominee--winner { border-color: var(--fango-winner-gold); } .fango-nominee__poster { aspect-ratio: 1 / 1; background: #1a1a1a; margin-bottom: 10px; overflow: hidden; position: relative; } .fango-nominee__poster-img { width: 100%; height: 100%; object-fit: cover; /* Bias to upper third so 2:3 posters cropped to 1:1 keep the figure * in frame. Editors who want a custom crop should upload a square * image to nom_card_image (per-nomination override) — not solved * here for the spotlight grid since it renders independently. */ object-position: center 25%; display: block; } .fango-nominee__title { font-family: var(--fango-font-sans); font-size: 13px; font-weight: 600; color: var(--fango-white); line-height: 1.3; } .fango-nominee__credit { font-family: var(--fango-font-serif); font-size: 12px; font-style: italic; color: rgba(255, 255, 255, 0.65); margin-top: 4px; } .fango-nominee__badge { position: absolute; top: 8px; right: 8px; background: var(--fango-winner-gold); color: var(--fango-winner-ink); font-family: var(--fango-font-label); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; font-weight: 700; } .fango-ballot-link { display: inline-block; margin-top: 1.25rem; font-family: var(--fango-font-label); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fango-red); text-decoration: none; border-bottom: 1px solid var(--fango-red); padding-bottom: 2px; } .fango-ballot-link:hover { color: var(--fango-white); border-color: var(--fango-white); } /* ===== ABOUT / LEGACY ===== */ .fango-about { max-width: var(--fango-max-width); margin: 0 auto; padding: 3rem 2rem; } .fango-about__lead { font-family: var(--fango-font-serif); font-size: var(--fango-fs-md); color: rgba(255, 255, 255, 0.85); line-height: 1.65; margin: 0 0 1.5rem; max-width: 720px; } .fango-legacy-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .fango-legacy-item { background: var(--fango-bg-tint); border-left: 3px solid var(--fango-red); padding: 16px 20px; } .fango-legacy-item h3 { font-family: var(--fango-font-sans); font-size: 15px; font-weight: 700; margin: 0 0 6px; color: var(--fango-black); text-transform: uppercase; letter-spacing: 0.02em; } .fango-legacy-item p { font-family: var(--fango-font-serif); font-size: 14px; color: var(--fango-gray-darker); line-height: 1.55; margin: 0; } /* ===== CATEGORIES ACCORDION ===== */ .fango-categories { max-width: var(--fango-max-width); margin: 0 auto; padding: 3rem 2rem; } .fango-accordion { background: var(--fango-white); border: 1px solid var(--fango-border); overflow: hidden; } .fango-accordion__item { border-bottom: 1px solid var(--fango-border); } .fango-accordion__item:last-child { border-bottom: none; } .fango-accordion__summary { list-style: none; padding: 18px 24px; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-family: var(--fango-font-sans); font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; transition: background-color 0.15s ease; } .fango-accordion__summary::-webkit-details-marker { display: none; } .fango-accordion__summary:hover { background: var(--fango-bg-tint); color: var(--fango-red); } .fango-accordion__name { display: flex; flex-direction: column; gap: 4px; } .fango-accordion__partner { font-family: var(--fango-font-label); font-size: 11px; color: var(--fango-text-muted); font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; } .fango-accordion__chevron { font-family: var(--fango-font-sans); font-size: 22px; color: var(--fango-red); font-weight: 300; transition: transform 0.2s ease; } .fango-accordion__item[open] .fango-accordion__chevron { transform: rotate(45deg); } .fango-accordion__body { padding: 0 24px 20px; } .fango-accordion__empty { font-family: var(--fango-font-serif); font-style: italic; font-size: 14px; color: var(--fango-text-muted); } .fango-cat-nominee-list { list-style: none; padding: 0; margin: 0; } .fango-cat-nominee-list li { padding: 10px 0; font-family: var(--fango-font-serif); font-size: 15px; border-bottom: 1px dashed var(--fango-border); color: var(--fango-text); } .fango-cat-nominee-list li:last-child { border-bottom: none; } .fango-cat-nominee-list li.is-winner { font-weight: 600; color: var(--fango-black); } .fango-cat-nominee__title { font-family: var(--fango-font-sans); font-weight: 600; } .fango-cat-nominee__winner { display: inline-block; margin-left: 10px; background: var(--fango-winner-gold); color: var(--fango-winner-ink); font-family: var(--fango-font-label); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 10px; font-weight: 700; } .fango-cat-nominee__credit { color: var(--fango-text-muted); font-style: italic; font-size: 14px; } /* ===== MERCH (fallback strip) ===== */ .fango-merch { background: var(--fango-black); color: var(--fango-white); padding: 1.5rem 2rem; max-width: var(--fango-max-width); margin: 0 auto; display: flex; justify-content: space-between; align-items: center; gap: 20px; flex-wrap: wrap; } .fango-merch__text { font-family: var(--fango-font-sans); font-size: 15px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.02em; } /* ===== MERCH GRID (Shopify-driven) ===== */ .fango-merch-grid { max-width: var(--fango-max-width); margin: 0 auto; padding: 3rem 2rem; } .fango-merch-grid__header { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 1.25rem; gap: 1rem; flex-wrap: wrap; border-bottom: 2px solid var(--fango-red); padding-bottom: 0.75rem; } .fango-chainsaw .fango-merch-grid__heading, .fango-chainsaw h2.fango-merch-grid__heading { font-family: var(--fango-font-sans); font-size: var(--fango-fs-lg); font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; margin: 0; color: var(--fango-white); } .fango-merch-grid__shop-all { font-family: var(--fango-font-label); font-size: 13px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fango-red-on-dark); text-decoration: none; font-weight: 600; } .fango-merch-grid__shop-all:hover { color: var(--fango-white); text-decoration: underline; } .fango-merch-grid__items { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; } .fango-merch-card { background: var(--fango-white); border: 1px solid var(--fango-border); overflow: hidden; text-decoration: none; color: inherit; transition: border-color 0.18s ease, transform 0.12s ease; display: flex; flex-direction: column; } .fango-merch-card:hover { border-color: var(--fango-red); transform: translateY(-2px); } .fango-merch-card__img { aspect-ratio: 1 / 1; background: var(--fango-bg-tint); display: flex; align-items: center; justify-content: center; overflow: hidden; position: relative; } .fango-merch-card__img-el { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .fango-merch-card__noimg { font-family: var(--fango-font-label); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fango-text-muted); padding: 1rem; text-align: center; } .fango-merch-card__body { padding: 14px 16px; } .fango-merch-card__title { font-family: var(--fango-font-sans); font-size: 14px; font-weight: 600; line-height: 1.3; color: var(--fango-black); margin-bottom: 6px; text-transform: uppercase; letter-spacing: 0.01em; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .fango-merch-card__price { font-family: var(--fango-font-label); font-size: 13px; letter-spacing: 0.08em; color: var(--fango-red); font-weight: 600; } /* ===== EDITORIAL ===== */ .fango-editorial { max-width: var(--fango-max-width); margin: 0 auto; padding: 3rem 2rem; } .fango-editorial__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; } .fango-ed-card { background: var(--fango-white); border: 1px solid var(--fango-border); overflow: hidden; text-decoration: none; color: inherit; transition: border-color 0.18s ease, transform 0.12s ease; display: block; } .fango-ed-card:hover { border-color: var(--fango-red); transform: translateY(-2px); } /* Editorial-card image well. * * Flat noir; when the post has no thumbnail (no child), we render a * typographic FANGORIA mark as a placeholder. Drops the previous * black-to-dark-red diagonal gradient (banned by the Operating Prompt as a * decorative-without-information move). */ .fango-ed-card__img { height: 180px; background: var(--fango-bg-noir); position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; } .fango-ed-card__img:empty::before { content: 'FANGO'; font-family: var(--fango-font-label); font-size: 32px; font-weight: 700; letter-spacing: 0.2em; color: var(--fango-red); border: 3px solid var(--fango-red); padding: 0.4rem 1rem; text-transform: uppercase; } .fango-ed-card__img-el { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } .fango-ed-card__body { padding: 16px 18px; } .fango-ed-card__title { font-family: var(--fango-font-sans); font-size: 16px; font-weight: 700; line-height: 1.3; margin: 0 0 8px; color: var(--fango-black); text-transform: uppercase; letter-spacing: -0.005em; } .fango-ed-card__meta { font-family: var(--fango-font-label); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fango-text-muted); } /* ===== PARTNERS ===== */ .fango-partners { max-width: var(--fango-max-width); margin: 0 auto; padding: 2.5rem 2rem; background: var(--fango-bg-tint); text-align: center; } .fango-partners .fango-eyebrow { color: var(--fango-text-muted); margin-bottom: 18px; } .fango-partners__grid { display: flex; justify-content: center; align-items: center; gap: 2.5rem; flex-wrap: wrap; } /* * v0.31.13: equal-sized stage for each partner logo. Was max-height: 50px * + width: auto, which let wide logos (SHUDDER 4:1) take 4× the horizontal * space of square ones (Paramount 1:1) — they looked dramatically different * sizes even though height was equal. Now every logo lands inside a 160×70px * box with object-fit: contain; image hits whichever dimension caps it first. * Visual weight balances even though individual logo sizes still vary by aspect. */ .fango-partners__logo-wrap { display: inline-flex; align-items: center; justify-content: center; width: 160px; height: 70px; } .fango-partners__logo { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; text-decoration: none; color: var(--fango-gray-darker); font-family: var(--fango-font-label); font-size: 13px; letter-spacing: 0.1em; text-transform: uppercase; filter: grayscale(100%); opacity: 0.85; transition: filter 0.18s ease, opacity 0.18s ease, color 0.18s ease; } .fango-partners__logo:hover { filter: grayscale(0%); opacity: 1; color: var(--fango-red); } .fango-partners__logo img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } @media (max-width: 600px) { .fango-partners__grid { gap: 1.5rem; } .fango-partners__logo-wrap { width: 130px; height: 60px; } } /* ===== FOOTER CTA ===== */ .fango-footer-cta { background: var(--fango-black); color: var(--fango-white); padding: 3.5rem 2rem; margin: 0 auto; text-align: center; max-width: var(--fango-max-width); position: relative; overflow: hidden; } .fango-footer-cta::before { content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--fango-red); } .fango-footer-cta__head { font-family: var(--fango-font-sans); font-size: var(--fango-fs-lg); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; margin: 0 0 10px; color: var(--fango-white); } .fango-footer-cta__sub { font-family: var(--fango-font-serif); font-size: 15px; color: rgba(255, 255, 255, 0.75); margin: 0 auto 1.5rem; max-width: 480px; line-height: 1.5; } .fango-footer-cta__form { display: flex; gap: 10px; max-width: 460px; margin: 0 auto; } .fango-footer-cta__form input[type="email"] { flex: 1; padding: 12px 16px; border: 1px solid rgba(255, 255, 255, 0.3); background: rgba(255, 255, 255, 0.05); color: var(--fango-white); font-family: var(--fango-font-serif); font-size: 14px; border-radius: 0; } .fango-footer-cta__form input[type="email"]::placeholder { color: rgba(255, 255, 255, 0.5); } .fango-footer-cta__form input[type="email"]:focus { outline: none; border-color: var(--fango-red); background: rgba(255, 255, 255, 0.08); } /* ===== ARCHIVE ===== */ /* ==================================================================== * Archive section (v0.25.8 restyle) * * Brought in line with the chainsaw card system: * - Per-year sections separated by hairlines, no jarring tint inversion * - Category items render as dark noir cards with red top accent (gold * when they have a winner), echoing .fango-cat-card on the listing * - Winner callout is a gold-wash dark block inside the card (echoes * the deprecated .fango-cat-card__winner pattern, reused here) * - Sticky year-jump nav restyled for the dark backdrop * - Every clickable element (year, category, winner, see-all) has a * real tag — same navigation chain as elsewhere * ==================================================================== */ .fango-archive { max-width: var(--fango-max-width); margin: 0 auto; padding: 3rem 2rem; } .fango-archive__inner { padding: 0; } .fango-archive__header { text-align: center; margin-bottom: 2.5rem; padding-bottom: 2rem; border-bottom: 2px solid var(--fango-red); } .fango-chainsaw .fango-archive__heading, .fango-chainsaw h2.fango-archive__heading { font-family: var(--fango-font-sans); font-size: var(--fango-fs-xxl); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; line-height: 0.98; margin: 0 0 1rem; color: var(--fango-white); } .fango-archive__intro { font-family: var(--fango-font-serif); font-size: var(--fango-fs-md); line-height: 1.55; color: rgba(255, 255, 255, 0.8); max-width: 680px; margin: 0 auto; } .fango-archive__empty, .fango-archive__no-cats { text-align: center; font-family: var(--fango-font-serif); font-style: italic; color: var(--fango-gray-light); padding: 2rem 0; } /* Year jump nav — dark with red active treatment to match the chainsaw * card system instead of the prior warm-tint pill row. */ .fango-archive__jump { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin: 0 0 3rem; padding: 0.85rem 1rem; background: var(--fango-bg-noir); border-top: 1px solid var(--fango-border-dark); border-bottom: 1px solid var(--fango-border-dark); position: sticky; top: 0; z-index: 10; } .fango-archive__jump-link { font-family: var(--fango-font-label); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; font-weight: 600; padding: 6px 12px; background: transparent; color: var(--fango-gray-light); border: 1px solid var(--fango-border-dark); text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease; } .fango-archive__jump-link:hover { background: var(--fango-red); color: var(--fango-white); border-color: var(--fango-red); } /* Year section — hairline separator, dark-backdrop magazine-feature feel. */ .fango-archive__year { margin-bottom: 4rem; padding-bottom: 3rem; border-bottom: 1px solid var(--fango-border-dark); scroll-margin-top: 100px; } .fango-archive__year:last-child { border-bottom: none; } .fango-archive__year-header { display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap; gap: 1rem; margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 4px solid var(--fango-red); } .fango-chainsaw .fango-archive__year-title, .fango-chainsaw h3.fango-archive__year-title, .fango-chainsaw h2.fango-archive__year-title { font-family: var(--fango-font-sans); font-size: var(--fango-fs-xl); font-weight: 800; text-transform: uppercase; letter-spacing: -0.02em; line-height: 1; margin: 0; color: var(--fango-white); } .fango-archive__year-link { color: inherit; text-decoration: none; display: inline-block; transition: color 0.15s ease; } .fango-archive__year-link:hover { color: var(--fango-red-on-dark); } .fango-archive__year-sub { display: block; font-family: var(--fango-font-label); font-size: 14px; font-weight: 500; letter-spacing: 0.14em; color: var(--fango-red-on-dark); margin-top: 4px; } .fango-archive__year-meta { display: flex; gap: 1.25rem; flex-wrap: wrap; font-family: var(--fango-font-label); font-size: 12px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fango-gray-light); } .fango-archive__year-summary { font-family: var(--fango-font-serif); font-size: var(--fango-fs-md); line-height: 1.55; color: rgba(255, 255, 255, 0.8); max-width: 800px; margin: 0 0 1.5rem; font-style: italic; } /* Embedded show */ .fango-archive__embed { margin: 0 0 2.5rem; } .fango-archive__embed iframe, .fango-archive__embed video { width: 100%; aspect-ratio: 16 / 9; height: auto !important; border: 0; } .fango-archive__watch-link { margin: 0 0 2rem; } /* Category cards — echo the .fango-cat-card pattern from the year * nominees listing. Dark noir surface, red top accent (gold when the * category has a winner), serif description, magazine-spread feel. */ .fango-archive__categories { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; margin-top: 2rem; } /* Category card is itself an element (v0.25.9) — entire card is the * clickable target, links to the per-category detail page where the * winner + full nominee set actually live. No winner reveal on the * archive card surface; matches the v0.25.2 decision on year-nominees- * listing cards. */ .fango-archive__category { background: var(--fango-bg-noir); color: var(--fango-white); padding: 1.5rem 1.5rem 1.4rem; border: 0; border-top: 4px solid var(--fango-red); display: block; text-decoration: none; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease, color 0.15s ease; } .fango-archive__category--has-winner { border-top-color: var(--fango-winner-gold); } .fango-archive__category--linked { cursor: pointer; } .fango-archive__category--linked:hover { box-shadow: 0 8px 24px rgba(237, 28, 36, 0.18); transform: translateY(-2px); color: var(--fango-white); } .fango-archive__category--linked:hover .fango-archive__cat-title { color: var(--fango-red-on-dark); } .fango-archive__category--linked:hover.fango-archive__category--has-winner .fango-archive__cat-title { color: var(--fango-winner-gold); } .fango-archive__cat-title { font-family: var(--fango-font-sans); font-size: var(--fango-fs-md); font-weight: 700; margin: 0; color: var(--fango-white); line-height: 1.25; transition: color 0.15s ease; } .fango-archive__cat-partner { display: block; font-family: var(--fango-font-label); font-size: 11px; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fango-text-muted); margin-top: 0.55rem; } /* Year-level CTA to the nominees-listing page below the category grid. */ .fango-archive__year-footer { margin: 2rem 0 0; text-align: right; } .fango-archive__year-all { display: inline-flex; align-items: center; gap: 0.5rem; font-family: var(--fango-font-label); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--fango-white); text-decoration: none; padding: 0.6rem 1rem; border: 1px solid var(--fango-border-dark); transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease; } .fango-archive__year-all:hover { background: var(--fango-red); border-color: var(--fango-red); color: var(--fango-white); } @media (max-width: 900px) { .fango-archive__categories { grid-template-columns: 1fr; } } @media (max-width: 720px) { .fango-archive { padding: 0 1rem; } .fango-archive__year-header { flex-direction: column; align-items: flex-start; } .fango-archive__year-footer { text-align: left; } } /* ===== NOMINEE ROW (used in categories accordion) ===== */ .fango-nominee-row { padding: 10px 14px; border-bottom: 1px dashed var(--fango-border); font-family: var(--fango-font-serif); font-size: 15px; line-height: 1.5; color: var(--fango-text); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; } .fango-nominee-row:last-child { border-bottom: none; } .fango-nominee-row em { font-style: italic; font-weight: 500; } .fango-nominee-row__display { flex: 1; min-width: 0; } .fango-nominee-row--winner { background: var(--fango-winner-bg); border-left: 3px solid var(--fango-winner-gold); padding-left: 11px; } .fango-nominee-row__winner-badge { display: inline-block; background: var(--fango-winner-gold); color: var(--fango-winner-ink); font-family: var(--fango-font-label); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 8px; } .fango-nom-secondary { display: block; font-size: 13px; font-style: italic; color: var(--fango-text-muted); margin-top: 3px; } /* ===== CATEGORY CARD (revised for new model) ===== */ .fango-category { background: var(--fango-white); border: 1px solid var(--fango-border); border-left: 4px solid var(--fango-red); margin-bottom: 1.5rem; padding: 1.25rem 1.5rem; } .fango-category__header { margin-bottom: 1rem; padding-bottom: 0.75rem; border-bottom: 1px solid var(--fango-border); } .fango-category__title { font-family: var(--fango-font-sans); font-size: 18px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; color: var(--fango-black); margin: 0; line-height: 1.3; } .fango-category__partner { display: block; font-family: var(--fango-font-label); font-size: 11px; font-weight: 400; letter-spacing: 0.12em; color: var(--fango-text-muted); margin-top: 4px; } .fango-category__description { font-family: var(--fango-font-serif); font-size: 14px; font-style: italic; color: var(--fango-text-muted); margin: 0.5rem 0 0; } .fango-category__nominees { list-style: none; margin: 0; padding: 0; } .fango-category__empty { padding: 1rem 0; font-family: var(--fango-font-serif); color: var(--fango-text-muted); font-style: italic; } /* Write-in category treatment. * Differentiated within the parent palette (black + red + winner-gold). * Dashed red border-left signals "different lane" without introducing * brand-foreign accent colors. */ .fango-category--writein { border-left-color: var(--fango-red); border-left-style: dashed; } .fango-category__writein-prompt { padding: 1rem 1.25rem; background: var(--fango-bg-tint); border-radius: 0; } .fango-category__writein-prompt p { margin: 0 0 0.75rem; font-family: var(--fango-font-serif); font-size: 14px; } .fango-category__writein-winner { background: var(--fango-winner-bg); border: 1px solid var(--fango-winner-gold); padding: 1rem 1.25rem; border-radius: 0; } .fango-category__writein-badge { display: inline-block; background: var(--fango-winner-gold); color: var(--fango-winner-ink); font-family: var(--fango-font-label); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 8px; margin-bottom: 0.5rem; } .fango-category__writein-text { font-family: var(--fango-font-sans); font-size: 16px; color: var(--fango-black); font-weight: 600; } /* Honorary category treatment */ .fango-category--honorary { border-left-color: var(--fango-winner-gold); } .fango-category__honoree { background: var(--fango-winner-bg); border: 1px solid var(--fango-winner-gold); padding: 1rem 1.25rem; border-radius: 0; } .fango-category__honoree-badge { display: inline-block; background: var(--fango-winner-gold); color: var(--fango-winner-ink); font-family: var(--fango-font-label); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 3px 8px; margin-bottom: 0.5rem; } .fango-category__honoree-text { font-family: var(--fango-font-sans); font-size: 18px; font-weight: 600; color: var(--fango-black); } .fango-category__honoree-teaser { font-family: var(--fango-font-serif); color: var(--fango-text-muted); font-style: italic; padding: 1rem 0; margin: 0; } /* Spotlight tweaks for the new model */ .fango-spotlight__winner-feature { background: var(--fango-winner-bg); border: 2px solid var(--fango-winner-gold); padding: 1.5rem 2rem; margin-top: 1.5rem; text-align: center; } .fango-spotlight__winner-badge { display: inline-block; background: var(--fango-winner-gold); color: var(--fango-winner-ink); font-family: var(--fango-font-label); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 6px 12px; margin-bottom: 0.75rem; } .fango-spotlight__winner-display { font-family: var(--fango-font-sans); font-size: var(--fango-fs-xl); font-weight: 700; color: var(--fango-black); line-height: 1.2; } .fango-spotlight__featured-cat { margin-top: 1.5rem; } .fango-spotlight__featured-title { font-family: var(--fango-font-sans); font-size: 16px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--fango-red-on-dark); margin: 0 0 1rem; } .fango-nominee__display { font-family: var(--fango-font-serif); font-size: 13px; line-height: 1.4; padding: 8px 10px 0; text-align: center; } .fango-nominee__display em { font-style: italic; } /* ============================================================ v0.11.0 — Nominees-link CTA section (replaces inline categories grid on landing). A single-purpose CTA inviting visitors over to the per-year nominees listing page. ============================================================ */ .fango-nominees-link { background: var(--fango-bg-noir); color: var(--fango-white); padding: 3rem 1.5rem; text-align: center; border-top: 4px solid var(--fango-red); } .fango-nominees-link__inner { max-width: var(--fango-max-width); margin: 0 auto; } .fango-nominees-link__heading { font-family: var(--fango-font-sans); font-size: var(--fango-fs-xl); font-weight: 800; text-transform: uppercase; letter-spacing: -0.01em; color: var(--fango-white); margin: 0.5rem 0 0.75rem; line-height: 1.1; } .fango-nominees-link__subhead { font-family: var(--fango-font-serif); font-size: var(--fango-fs-md); color: rgba(255, 255, 255, 0.75); margin: 0 auto 1.5rem; max-width: 38em; } .fango-nominees-link__cta { display: inline-block; padding: 0.85rem 2rem; /* red-dark for WCAG AA: white-on-#ed1c24 fails 4.5:1, white-on-#cb122e * clears it while staying in the brand red family. */ background: var(--fango-red-dark); color: var(--fango-white); font-family: var(--fango-font-label); font-size: 16px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; text-decoration: none; border-radius: 0; transition: background 0.18s ease; } .fango-nominees-link__cta:hover, .fango-nominees-link__cta:focus { background: var(--fango-red-darker); color: var(--fango-white); } /* ============================================================ v0.12.0 — Per-year nominees listing page (Release A). /chainsaw//nominees/ ============================================================ */ /* Inner-page body: white, aligned with fangoria.com's body treatment. The * earlier cream-newsprint experiment overcorrected toward "magazine spread" * and broke visual continuity with the parent site. */ .fango-nominees-page { background: var(--fango-white); } .fango-nominees-page__header { background: var(--fango-bg-dark); color: var(--fango-white); padding: 3rem 1.5rem; } .fango-nominees-page__inner { max-width: var(--fango-max-width); margin: 0 auto; } .fango-nominees-page__heading { font-family: var(--fango-font-sans); font-size: var(--fango-fs-xxl); font-weight: 800; margin: 0.5rem 0 0.5rem; line-height: 1.05; color: var(--fango-white); } .fango-nominees-page__subhead { font-family: var(--fango-font-serif); font-size: var(--fango-fs-md); color: var(--fango-gray-light); margin: 0 0 0.5rem; max-width: 38em; line-height: 1.5; } .fango-nominees-page__breadcrumb, .fango-cat-page__breadcrumb, .fango-nom-page__breadcrumb, .fango-about-page__breadcrumb { font-family: var(--fango-font-label); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fango-gray-light); margin-top: 1rem; } .fango-nominees-page__breadcrumb a, .fango-cat-page__breadcrumb a, .fango-nom-page__breadcrumb a, .fango-about-page__breadcrumb a { color: var(--fango-gray-light); text-decoration: none; border-bottom: 1px solid transparent; transition: border-color 0.15s ease, color 0.15s ease; } .fango-nominees-page__breadcrumb a:hover, .fango-cat-page__breadcrumb a:hover, .fango-nom-page__breadcrumb a:hover, .fango-about-page__breadcrumb a:hover { color: var(--fango-white); border-color: var(--fango-red); } .fango-nominees-page__breadcrumb span[aria-hidden], .fango-cat-page__breadcrumb span[aria-hidden], .fango-nom-page__breadcrumb span[aria-hidden], .fango-about-page__breadcrumb span[aria-hidden] { margin: 0 0.5rem; color: var(--fango-gray-darker); } .fango-nominees-page__breadcrumb span[aria-current], .fango-cat-page__breadcrumb span[aria-current], .fango-nom-page__breadcrumb span[aria-current], .fango-about-page__breadcrumb span[aria-current] { color: var(--fango-white); } .fango-nominees-page__grid { max-width: var(--fango-max-width); margin: 0 auto; padding: 3rem 1.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .fango-nominees-page__empty, .fango-cat-page__empty { max-width: var(--fango-max-width); margin: 0 auto; padding: 4rem 1.5rem; text-align: center; color: var(--fango-text-muted); font-family: var(--fango-font-serif); font-size: var(--fango-fs-md); } /* Category card on the listing page. * * Visual register: punk-rock-with-magazine-craft. Dark noir card, FANGORIA-red * top bar (gold for winners), big red TOC numeral up top, white serif title, * muted gray description. Reads like a magazine table of contents, not a * generic admin grid. */ .fango-cat-card { background: var(--fango-bg-noir); color: var(--fango-white); border: 0; border-top: 4px solid var(--fango-red); padding: 2.25rem 1.5rem 1.5rem; display: flex; flex-direction: column; gap: 0.6rem; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; /* Containing block for the stretched-link `::after` overlay (otherwise * the last card's overlay bleeds to and routes every click). */ position: relative; } .fango-cat-card:hover { border-top-color: var(--fango-red-on-dark); box-shadow: 0 8px 24px rgba(237, 28, 36, 0.18); transform: translateY(-2px); } .fango-cat-card--has-winner { border-top-color: var(--fango-winner-gold); } .fango-cat-card--has-winner:hover { border-top-color: var(--fango-winner-gold); } /* Magazine-TOC numeral. Sits above the title, large + condensed in red. * Pure decoration (aria-hidden in the markup) — purely visual rhythm * across the grid. */ .fango-cat-card__number { font-family: var(--fango-font-label, "Oswald"), system-ui, sans-serif; font-size: 2.4rem; font-weight: 700; letter-spacing: 0.02em; color: var(--fango-red); line-height: 0.9; display: block; margin: 0 0 0.25rem; } .fango-cat-card--has-winner .fango-cat-card__number { color: var(--fango-winner-gold); } .fango-cat-card__title { font-family: var(--fango-font-sans); font-size: var(--fango-fs-lg); font-weight: 700; margin: 0; line-height: 1.15; color: var(--fango-white); } .fango-cat-card__title a { color: inherit; text-decoration: none; } .fango-cat-card__title a:hover { color: var(--fango-red-on-dark); } /* v0.16.0: stretched-link pattern — title's anchor expands to cover the whole card so the entire article is clickable. Admin edit button keeps z-index above this overlay (.fango-edit-button is z-index:50 in admin-frontend.css; this is z-index:1). */ .fango-cat-card--linked { cursor: pointer; } .fango-cat-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } .fango-cat-card__presenter, .fango-cat-card__nom-count { font-family: var(--fango-font-label); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fango-text-muted); margin: 0; } /* Presenter row: text prefix sits inline with logo. Logo is height-based so * any aspect ratio (square mark, wide wordmark, tall stack) renders at a * consistent visual weight. The flex wrap means tight cards still degrade * gracefully on narrow widths. */ .fango-cat-card__presenter { display: flex; align-items: center; gap: 0.5em; flex-wrap: wrap; } .fango-cat-card__presenter .fango-presenter-logo { display: inline-block; height: 1.6em; width: auto; max-width: 140px; object-fit: contain; vertical-align: middle; } .fango-cat-card__desc { font-family: var(--fango-font-serif); font-size: var(--fango-fs-sm); /* Light gray reads against the noir card without competing with the * white title. Italic gives the editorial-magazine feel. */ color: rgba(255, 255, 255, 0.72); font-style: italic; line-height: 1.5; margin: 0; } /* Winner reveal moved to the per-category detail page (v0.25.2). * The .fango-cat-card__winner / __winner-badge / __winner-display * rules previously here are intentionally removed — the listing * card no longer renders winner identity. The gold top-border + * gold numeral on .fango-cat-card--has-winner remain as a subtle * "this category has been awarded" cue without spoiling who won. */ .fango-cat-card__cta { margin: 0.5rem 0 0; } .fango-cat-card__cta a { font-family: var(--fango-font-label); font-size: 12px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fango-red); text-decoration: none; } .fango-cat-card__cta a:hover { text-decoration: underline; } /* ============================================================ v0.13.0 — Per-category page (Release B). ============================================================ */ .fango-cat-page { background: var(--fango-white); } .fango-cat-page__header { background: var(--fango-bg-dark); color: var(--fango-white); padding: 3rem 1.5rem; position: relative; /* containing block for .fango-cat-page__sponsor-bug */ } .fango-cat-page__inner { max-width: var(--fango-max-width); margin: 0 auto; } .fango-cat-page__heading { font-family: var(--fango-font-sans); font-size: var(--fango-fs-xxl); font-weight: 800; margin: 0.25rem 0 0.5rem; line-height: 1.05; color: var(--fango-white); } .fango-cat-page__presenter { font-family: var(--fango-font-label); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fango-gray-light); margin: 0 0 0.5rem; } /* Sponsor bug — broadcast-graphics treatment in the hero's lower-right * corner. Absolutely positioned so it doesn't affect content flow. Bottom * placement keeps the breadcrumb + heading + description visually clean at * the top of the hero, and gives the sponsor mark prime real estate next to * where the eye lands at the end of the description. Larger than the prior * top-right treatment for visibility. Transparent: editors must upload * light/transparent variants of the sponsor logo. */ .fango-cat-page__sponsor-bug { position: absolute; bottom: 1.5rem; right: 1.75rem; z-index: 5; display: flex; flex-direction: column; align-items: flex-end; gap: 0.4rem; pointer-events: auto; max-width: 36%; } .fango-cat-page__sponsor-bug-label { font-family: var(--fango-font-label); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fango-gray-light); opacity: 0.85; line-height: 1; } .fango-cat-page__sponsor-bug-logo { display: block; height: 56px; width: auto; max-width: 220px; object-fit: contain; } @media (max-width: 700px) { /* On mobile, bottom placement still works but the bug needs to sit * further from the screen edge and shrink so it doesn't dominate. */ .fango-cat-page__sponsor-bug { bottom: 1rem; right: 1rem; gap: 0.25rem; max-width: 50%; } .fango-cat-page__sponsor-bug-logo { height: 40px; max-width: 140px; } .fango-cat-page__sponsor-bug-label { font-size: 10px; } } .fango-cat-page__lede { font-family: var(--fango-font-serif); font-size: var(--fango-fs-md); color: var(--fango-gray-light); max-width: 44em; margin: 0.75rem 0 0; line-height: 1.5; font-style: italic; } .fango-cat-page__desc { font-family: var(--fango-font-serif); font-size: var(--fango-fs-md); color: var(--fango-gray-light); max-width: 38em; margin: 0.5rem 0 0; line-height: 1.5; } .fango-cat-page__grid { max-width: var(--fango-max-width); margin: 0 auto; padding: 3rem 1.5rem; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .fango-cat-page__grid--honorary, .fango-cat-page__grid--writein { /* Auto-fit ceremonial treatment that scales with honoree count: * 1 honoree → single ~32rem column, centered * 2 honorees → two columns side-by-side, ~32rem each * 3+ honorees → wraps naturally * The min(100%, 16rem) floor stops the grid from overflowing a narrow * parent. The existing 720px breakpoint below still collapses * .fango-cat-page__grid to a single 1fr column for mobile. * v0.27.1: was minmax(0, 36rem) — single column always — which * stacked the two 2025 Editor's Eyeball honorees vertically. */ grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 32rem)); justify-content: center; } .fango-cat-page__footer { max-width: var(--fango-max-width); margin: 0 auto; padding: 1rem 1.5rem 4rem; text-align: center; } .fango-cat-page__back, .fango-nom-page__back { font-family: var(--fango-font-label); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fango-red); text-decoration: none; } .fango-cat-page__back:hover, .fango-nom-page__back:hover { text-decoration: underline; } /* Nominee card on the per-category page. * * v0.20.0: image-led layout. Each card is a piece of poster art / headshot / * org logo with the credit string overlaid below. Posters render edge-to-edge * 2:3 portrait; headshots and logos sit on a deep noir backdrop centered, so * a face or a logomark is composed, not stretched. */ /* Per-category nominee card. * * Inherits the punk-rock-with-magazine-craft register from the categories * listing page (see .fango-cat-card): dark noir frame, FANGORIA-red top * accent (gold for winners), white display text. Creates visual continuity * across the three surfaces — categories listing → per-category nominees → * nominee detail — so the brand register reads as one coherent journey. */ .fango-nom-card { background: var(--fango-bg-noir); color: var(--fango-white); border: 0; border-top: 3px solid var(--fango-red); position: relative; transition: transform 0.18s ease, box-shadow 0.18s ease, border-color 0.18s ease; display: flex; flex-direction: column; } .fango-nom-card:hover { border-top-color: var(--fango-red-on-dark); box-shadow: 0 8px 24px rgba(237, 28, 36, 0.18); transform: translateY(-2px); } .fango-nom-card--winner { border-top-color: var(--fango-winner-gold); } .fango-nom-card--winner:hover { border-top-color: var(--fango-winner-gold); } /* All listing-card media wells are 1:1 square. Posters get auto-cropped to * the upper third (where the figure/face usually composes); editor-curated * card images and headshots/logos crop center. Editors can override per * nomination via the nom_card_image field. */ .fango-nom-card__media { position: relative; background: var(--fango-bg-noir); overflow: hidden; aspect-ratio: 1 / 1; } .fango-nom-card--none .fango-nom-card__media { display: flex; align-items: center; justify-content: center; } .fango-nom-card__img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Poster auto-crop: bias toward the upper third. On most film/TV posters, * the figure/face composes in the top half; the title type lives below. * Cropping to a 1:1 square from a 2:3 poster centered would chop the head * off and feature the title; positioning at center-25% lifts the focus * upward to keep the subject in frame. Editors who want a tighter or * different crop should upload a square nom_card_image instead. */ .fango-nom-card--poster .fango-nom-card__img { object-position: center 25%; } /* Headshots: bias upper-center so the face composes correctly even when * the source image has shoulders/torso content below. */ .fango-nom-card--headshot .fango-nom-card__img { object-position: center 30%; } .fango-nom-card__media-placeholder { font-family: var(--fango-font-label); font-size: clamp(2rem, 4vw, 3rem); letter-spacing: 0.18em; font-weight: 700; color: var(--fango-red); text-transform: uppercase; border: 4px solid var(--fango-red); padding: 0.5rem 1rem; background: transparent; } .fango-nom-card__winner-badge { position: absolute; top: 10px; left: 10px; display: inline-block; font-family: var(--fango-font-label); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fango-winner-ink); background: var(--fango-winner-gold); padding: 4px 8px; margin: 0; border-radius: 0; z-index: 2; } .fango-nom-card__display { font-family: var(--fango-font-serif); /* fs-md (not lg) so single-line names like "Ryan Coogler" don't wrap in * the ~310px column. The __lead modifier scales up from here. */ font-size: var(--fango-fs-md); font-weight: 700; line-height: 1.2; color: var(--fango-white); padding: 1rem 1.25rem 1.25rem; } .fango-nom-card__display a { color: inherit; text-decoration: none; } .fango-nom-card__display a:hover { color: var(--fango-red-on-dark); } /* Person-led credits (Best Director, Screenplay, Performance, etc.): * the get_display_string helper outputs three spans — * Ryan Coogler * — * Sinners * * Stack the work onto its own line, smaller and italic-muted, so the * person reads as the headline (which it is). Hide the inline " — " * separator since we're stacking. The `__lead ~ __work` sibling selector * means work-only categories (which only emit __work, no __lead) keep * their original prominent inline rendering. */ .fango-nom-card__display .fango-nom-display__lead { display: block; font-size: 1.1em; line-height: 1.15; } .fango-nom-card__display .fango-nom-display__lead ~ .fango-nom-display__sep { display: none; } .fango-nom-card__display .fango-nom-display__lead ~ .fango-nom-display__work { display: block; font-size: 0.82em; font-weight: 500; font-style: italic; color: rgba(255, 255, 255, 0.65); margin-top: 0.3em; } /* v0.16.0: stretched-link pattern — same approach as cat-card. */ .fango-nom-card--linked { cursor: pointer; } .fango-nom-card__link::after { content: ""; position: absolute; inset: 0; z-index: 1; } /* ============================================================ v0.14.0 — Per-nominee detail page (Release C). ============================================================ */ .fango-nom-page { background: var(--fango-white); } .fango-nom-page__header { background: var(--fango-bg-dark); color: var(--fango-white); padding: 0; /* hero takes over padding when image present */ } .fango-nom-page__hero { position: relative; overflow: hidden; min-height: 360px; display: flex; align-items: flex-end; } .fango-nom-page--has-hero-img .fango-nom-page__hero { min-height: 520px; } .fango-nom-page__hero-media { position: absolute; inset: 0; z-index: 0; } .fango-nom-page__hero-img { width: 100%; height: 100%; object-fit: cover; object-position: center; display: block; } /* Headshots top-anchored so the face composes properly instead of getting * cropped through the eyes by the hero gradient. */ .fango-nom-page--hero-headshot .fango-nom-page__hero-img { object-fit: cover; object-position: center top; } /* v0.31.0: logo-kind heroes show the FULL logo (no crop), since logos are * typically transparent PNGs framed to specific bounds — `cover` would clip * the mark and produce the "almost nothing visible" hero seen on org-led * nominee pages like the Legacy Effects/Studio Gillis/Wētā Workshop entry. */ .fango-nom-page--hero-logo .fango-nom-page__hero-img { object-fit: contain; object-position: center; padding: 4rem 2rem; } /* Gradient overlay so display/breadcrumb stay readable on any image. */ .fango-nom-page--has-hero-img .fango-nom-page__hero::before { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(13, 13, 13, 0.35) 0%, rgba(13, 13, 13, 0.55) 50%, rgba(13, 13, 13, 0.92) 100%); z-index: 1; pointer-events: none; } .fango-nom-page__hero .fango-nom-page__inner { position: relative; z-index: 2; padding: 3rem 1.5rem 2.5rem; width: 100%; } .fango-nom-page__inner { max-width: var(--fango-max-width); margin: 0 auto; } .fango-nom-page__winner-badge { display: inline-block; font-family: var(--fango-font-label); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fango-winner-ink); background: var(--fango-winner-gold); padding: 5px 10px; margin-bottom: 0.5rem; border-radius: 0; } .fango-nom-page__display { font-family: var(--fango-font-sans); font-size: var(--fango-fs-xxxl); font-weight: 800; color: var(--fango-white); line-height: 1.05; margin: 0.25rem 0 0.5rem; } .fango-nom-page__character, .fango-nom-page__secondary { font-family: var(--fango-font-serif); font-size: var(--fango-fs-md); color: var(--fango-gray-light); margin: 0; font-style: italic; } /* v0.31.0: tightened body padding (3rem -> 2.25rem top/bottom) and gap * (3rem -> 2.25rem) so the work-context + person-solo + orgs sections * read as a coherent editorial spread instead of stacked product cards * with huge whitespace between them. */ .fango-nom-page__body { max-width: var(--fango-max-width); margin: 0 auto; padding: 2.25rem 1.5rem 3rem; display: flex; flex-direction: column; gap: 2.25rem; } .fango-nom-page__section-heading { font-family: var(--fango-font-label); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fango-red); margin: 0 0 1rem; padding-bottom: 0.5rem; border-bottom: 1px solid var(--fango-border); } .fango-nom-page__work-grid { display: grid; grid-template-columns: 240px 1fr; gap: 2rem; align-items: start; } /* Body-poster suppressed because the hero already shows it: meta takes the * full row, no phantom 240px gutter. */ .fango-nom-page__work-grid--no-poster { grid-template-columns: 1fr; gap: 0; } .fango-nom-page__work-context--no-poster { grid-template-columns: 1fr; gap: 0; } /* v0.16.0: subtitle (e.g., "for The Substance" / "as Elisabeth Sparkle") */ .fango-nom-page__subtitle { font-family: var(--fango-font-serif); font-size: var(--fango-fs-md); color: var(--fango-gray-light); margin: 0.25rem 0 0; line-height: 1.4; } .fango-nom-page__subtitle em { font-style: italic; } .fango-nom-page__lede { font-family: var(--fango-font-serif); font-size: var(--fango-fs-md); color: var(--fango-gray-light); margin: 0.75rem 0 0; line-height: 1.5; max-width: 44em; } /* ==================================================================== * About-the-Awards canonical page (/chainsaw-awards/about/) * * Layout mirrors the category / nominee page shell so this surface * doesn't read as an outlier: * - Dark maroon hero band up top (--fango-bg-dark), white H1 + light * gray breadcrumb + lede on dark * - White body (--fango-white) with magazine-article section treatment * in serif (--fango-font-serif) on dark text * - Contact aside gets the warm bg-tint + red-left-border treatment * used by .fango-legacy-item (echoes the landing page's About block * so the two surfaces read as siblings) * - Red CTA pill footer matching .fango-btn primary treatment * ==================================================================== */ .fango-about-page { background: var(--fango-white); color: var(--fango-text); } .fango-about-page__header { background: var(--fango-bg-dark); color: var(--fango-white); padding: 3rem 1.5rem 3.5rem; } .fango-about-page__header-inner { max-width: var(--fango-max-width); margin: 0 auto; } .fango-about-page__eyebrow { display: inline-block; font-family: var(--fango-font-label); font-size: var(--fango-fs-sm); letter-spacing: 0.16em; text-transform: uppercase; font-weight: 500; color: var(--fango-red-on-dark); margin: 1.25rem 0 0.5rem; } .fango-about-page__title { font-family: var(--fango-font-sans); font-size: var(--fango-fs-xxl); font-weight: 800; line-height: 1.05; margin: 0.25rem 0 1rem; color: var(--fango-white); letter-spacing: -0.01em; max-width: 18em; } .fango-about-page__lede { font-family: var(--fango-font-serif); font-size: var(--fango-fs-md); color: rgba(255, 255, 255, 0.85); line-height: 1.6; margin: 0; max-width: 42em; } .fango-about-page__body { background: var(--fango-white); padding: 3.5rem 1.5rem 1rem; } .fango-about-page__body-inner { max-width: 760px; margin: 0 auto; } .fango-about-page__section { padding: 0 0 2.5rem; border-bottom: 1px solid var(--fango-border); margin-bottom: 2.5rem; } .fango-about-page__section:last-of-type { border-bottom: 0; } .fango-about-page__section-heading { font-family: var(--fango-font-sans); font-size: 1.5rem; font-weight: 700; color: var(--fango-black); margin: 0 0 1rem; letter-spacing: -0.005em; line-height: 1.2; text-transform: none; } .fango-about-page__section-heading::before { content: ""; display: block; width: 36px; height: 3px; background: var(--fango-red); margin-bottom: 0.85rem; } .fango-about-page__section-body p, .fango-about-page__section-body { font-family: var(--fango-font-serif); font-size: var(--fango-fs-md); line-height: 1.7; color: var(--fango-gray-darker); margin: 0 0 1rem; } .fango-about-page__section-body p:last-child { margin-bottom: 0; } /* Contact aside — echoes .fango-legacy-item from the landing About block */ .fango-about-page__contact { background: var(--fango-bg-tint); border-left: 4px solid var(--fango-red); padding: 1.75rem 1.75rem 1.5rem; margin: 0; } .fango-about-page__contact-heading { font-family: var(--fango-font-sans); font-size: 1rem; font-weight: 800; letter-spacing: 0.04em; text-transform: uppercase; color: var(--fango-black); margin: 0 0 0.6rem; } .fango-about-page__contact-body p { font-family: var(--fango-font-serif); font-size: var(--fango-fs-md); color: var(--fango-gray-darker); line-height: 1.55; margin: 0 0 0.4rem; } .fango-about-page__contact-body p:last-child { margin-bottom: 0; } .fango-about-page__contact-body a { color: var(--fango-red-dark); text-decoration: none; border-bottom: 1px solid currentColor; } .fango-about-page__contact-body a:hover { color: var(--fango-red); } /* Footer CTA — red pill matching .fango-btn primary treatment */ .fango-about-page__footer { background: var(--fango-white); padding: 1rem 1.5rem 4rem; text-align: center; } .fango-about-page__footer-inner { max-width: 760px; margin: 0 auto; } .fango-about-page__cta { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--fango-font-sans); font-size: var(--fango-fs-md); font-weight: 700; letter-spacing: 0.02em; text-transform: uppercase; color: var(--fango-white); background: var(--fango-red-dark); text-decoration: none; padding: 0.95rem 1.6rem; border: 0; border-radius: 2px; transition: background 0.15s ease, transform 0.15s ease; } .fango-about-page__cta:hover { background: var(--fango-red-darker); color: var(--fango-white); transform: translateY(-1px); } .fango-about-page__cta-arrow { display: inline-block; transition: transform 0.15s ease; } .fango-about-page__cta:hover .fango-about-page__cta-arrow { transform: translateX(2px); } /* Mobile tightening — match the existing chainsaw breakpoint at 700px */ @media (max-width: 700px) { .fango-about-page__header { padding: 2rem 1.25rem 2.5rem; } .fango-about-page__title { font-size: var(--fango-fs-xl); } .fango-about-page__body { padding: 2.5rem 1.25rem 1rem; } .fango-about-page__section { padding-bottom: 2rem; margin-bottom: 2rem; } .fango-about-page__contact { padding: 1.25rem 1.25rem 1rem; } } /* * Work-as-context block (credit-led layout). v0.31.0 cleanup: * - Removed the heavy 3px left border which read as construction signage. * Replaced with a soft 1px hairline above + below, magazine-sidebar feel. * - Grid column for poster switched from a hard 140px to `auto` so when * no poster renders (validated absent), the meta column takes the full * width and the phantom 140px gutter from v0.30 disappears. * - max-width caps text width at 720px so descriptions don't form pencil * columns on wide viewports. */ .fango-nom-page__work--context { max-width: 760px; margin: 0 auto; padding: 1.25rem 0; border-top: 1px solid var(--fango-border); border-bottom: 1px solid var(--fango-border); } .fango-nom-page__work-context { display: grid; grid-template-columns: auto 1fr; gap: 1.25rem; align-items: start; } .fango-nom-page__work-context--no-poster { grid-template-columns: 1fr; gap: 0; } .fango-nom-page__work-poster--context img { max-width: 140px; width: 140px; height: auto; } .fango-nom-page__work-context-eyebrow { font-family: var(--fango-font-label); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--fango-text-muted); margin: 0 0 0.35rem; } /* Solo-person section (credit-led layout, single person): centered bio. * v0.31.0: bumped headshot up to 160px and widened the bio column for * better visual weight as the editorial focus. */ .fango-nom-page__people--solo .fango-nom-page__person--solo { display: grid; grid-template-columns: 160px 1fr; gap: 1.75rem; align-items: start; max-width: 760px; margin: 0 auto; } .fango-nom-page__people--solo .fango-nom-page__person-headshot { width: 160px; height: 160px; } .fango-nom-page__people--solo .fango-nom-page__person-bio { font-family: var(--fango-font-serif); font-size: var(--fango-fs-md); line-height: 1.6; } /* * v0.31.1: phantom-column safety for person + org grid items. * * When a person has no headshot or an org has no logo, the * doesn't render and the only child of the .__person / .__org / .__person--solo * grid is the meta div. Grid auto-placement puts that single child into * the FIRST track (160px / 80px image column) — constraining the bio * text to a narrow column with empty space to the right. (This is what * the Pierre Olivier Persin screenshot exposed.) * * Solution: when the meta div is the only child, make it span every * column track. Pure CSS, no template modifier needed. */ .fango-nom-page__person > .fango-nom-page__person-meta:only-child, .fango-nom-page__org > .fango-nom-page__org-meta:only-child { grid-column: 1 / -1; } .fango-nom-page__work-poster img { width: 100%; height: auto; display: block; border: 1px solid var(--fango-border); } .fango-nom-page__work-title { font-family: var(--fango-font-sans); font-size: var(--fango-fs-lg); font-weight: 700; margin: 0 0 0.25rem; color: var(--fango-black); } .fango-nom-page__work-line { font-family: var(--fango-font-label); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fango-text-muted); margin: 0 0 0.75rem; } .fango-nom-page__work-desc { font-family: var(--fango-font-serif); font-size: var(--fango-fs-md); color: var(--fango-text); line-height: 1.5; margin: 0 0 0.75rem; } .fango-nom-page__work-link a, .fango-nom-page__person-link a, .fango-nom-page__org-link a { font-family: var(--fango-font-label); font-size: 12px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fango-red); text-decoration: none; } .fango-nom-page__work-link a:hover, .fango-nom-page__person-link a:hover, .fango-nom-page__org-link a:hover { text-decoration: underline; } .fango-nom-page__people-grid, .fango-nom-page__orgs-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.5rem; } .fango-nom-page__person, .fango-nom-page__org { display: grid; grid-template-columns: 80px 1fr; gap: 1rem; align-items: start; } .fango-nom-page__person-headshot { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 1px solid var(--fango-border); } .fango-nom-page__org-logo { width: 80px; height: 80px; object-fit: contain; } .fango-nom-page__person-name, .fango-nom-page__org-name { font-family: var(--fango-font-sans); font-size: var(--fango-fs-md); font-weight: 700; margin: 0 0 0.25rem; color: var(--fango-black); } .fango-nom-page__person-bio, .fango-nom-page__org-desc { font-family: var(--fango-font-serif); font-size: 14px; color: var(--fango-text); margin: 0 0 0.5rem; line-height: 1.5; } .fango-nom-page__editorial-intro { font-family: var(--fango-font-serif); color: var(--fango-text-muted); font-style: italic; margin: 0 0 1.5rem; } .fango-nom-page__editorial-grid { list-style: none; padding: 0; margin: 0; display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; } .fango-nom-page__editorial-card a { display: block; text-decoration: none; color: inherit; border: 1px solid var(--fango-border); transition: border-color 0.18s ease, box-shadow 0.18s ease; } .fango-nom-page__editorial-card a:hover { border-color: var(--fango-red); box-shadow: 0 4px 16px rgba(237, 28, 36, 0.08); } .fango-nom-page__editorial-card img { width: 100%; height: 160px; object-fit: cover; display: block; } .fango-nom-page__editorial-card h3 { font-family: var(--fango-font-sans); font-size: 15px; font-weight: 700; color: var(--fango-black); margin: 0; padding: 0.75rem 1rem 0.25rem; line-height: 1.3; } .fango-nom-page__editorial-date { font-family: var(--fango-font-label); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--fango-text-muted); margin: 0; padding: 0 1rem 0.75rem; } .fango-nom-page__footer { max-width: var(--fango-max-width); margin: 0 auto; padding: 0 1.5rem 4rem; text-align: center; } /* ============================================================ v0.20.0 — Sticky CTA bar (renders on Chunk 2 inner pages). State-aware: voting/heavy show countdown, post/leadup/evergreen show static copy. Pulls CTA copy from Settings → Copy → Hero. ============================================================ */ .fango-sticky-cta { position: fixed; left: 0; right: 0; bottom: 0; z-index: 90; background: var(--fango-bg-noir); color: var(--fango-white); border-top: 4px solid var(--fango-red); box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.35); font-family: var(--fango-font-sans); /* Reserve space at the bottom of the page so the bar doesn't sit on top * of the back-link footer. The page-spacer rule below pushes the body * up by an equivalent amount on every Chunk 2 surface. */ } .fango-sticky-cta__inner { max-width: var(--fango-max-width); margin: 0 auto; padding: 0.85rem 1.25rem; display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; } .fango-sticky-cta__copy { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 0.15rem; } .fango-sticky-cta__eyebrow { font-family: var(--fango-font-label); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; font-weight: 600; color: var(--fango-red); } .fango-sticky-cta__headline { font-family: var(--fango-font-sans); font-size: 15px; font-weight: 600; line-height: 1.25; color: var(--fango-white); } .fango-sticky-cta__countdown { display: inline-flex; align-items: baseline; gap: 0.5rem; margin-top: 0.25rem; font-family: var(--fango-font-label); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: rgba(255, 255, 255, 0.85); } .fango-sticky-cta__count-pair { display: inline-flex; align-items: baseline; gap: 0.15rem; } .fango-sticky-cta__count-pair .fango-countdown__num { font-family: var(--fango-font-sans); font-size: 18px; font-weight: 800; color: var(--fango-white); line-height: 1; } .fango-sticky-cta__count-label { font-family: var(--fango-font-label); font-size: 11px; letter-spacing: 0.08em; color: rgba(255, 255, 255, 0.65); text-transform: uppercase; } .fango-sticky-cta__count-caption { margin-left: 0.5rem; color: rgba(255, 255, 255, 0.65); font-size: 11px; letter-spacing: 0.1em; } .fango-sticky-cta__cta { display: inline-block; flex: 0 0 auto; padding: 12px 26px; background: var(--fango-red-dark); color: var(--fango-white); font-family: var(--fango-font-label); font-size: 13px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; text-decoration: none; transition: background-color 0.18s ease; border-radius: 0; line-height: 1; } .fango-sticky-cta__cta:hover, .fango-sticky-cta__cta:focus { background: var(--fango-red-darker); color: var(--fango-white); } /* Reserve bottom space on the three Chunk 2 surfaces so footer/back-link * isn't covered by the sticky bar. ~80px desktop, ~110px mobile (the bar * wraps to 2 rows on small screens). */ .fango-nominees-page, .fango-cat-page, .fango-nom-page { padding-bottom: 90px; } /* ===== Utility ===== */ .screen-reader-text { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(1px, 1px, 1px, 1px); white-space: nowrap; } /* ===== RESPONSIVE ===== */ @media (max-width: 900px) { .fango-nominee-grid { grid-template-columns: repeat(3, 1fr); } .fango-merch-grid__items { grid-template-columns: repeat(3, 1fr); } .fango-editorial__grid { grid-template-columns: repeat(2, 1fr); } .fango-nominees-page__grid, .fango-cat-page__grid { grid-template-columns: repeat(2, 1fr); } .fango-nom-page__editorial-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 720px) { .fango-hero { padding: 3rem 1.5rem; } /* * v0.31.11 mobile hero — re-layered for cohesion. * * ┌──────────────────────┐ * │ ● VOTING OPEN │ <- eyebrow absolute over image top * │ │ * │ (image, contain, │ * │ soft mask fading │ * │ top + bottom) │ * │ │ * │ THE POWER OF THE │ <- headline in gradient zone * │ CHAINSAW... │ overlapping image bottom * ├──────────────────────┤ * │ subhead │ * │ [ VOTE NOW ] │ <- on solid #000 * │ [countdown blocks] │ * └──────────────────────┘ * * v0.31.9 had eyebrow in normal flow above the headline — both ended * up on the gradient backdrop, neither clearly anchored to the image. * Now: eyebrow absolutely positioned over the image top (clearly on * image), copy block pulled up to overlap image's bottom edge with * a gradient (headline lives there, transitioning off image into * black), subhead + CTA + countdown sit on pure black below. * * Soft mask on the image (transparent at top 5% + bottom 20%) makes * its edges fade into the surrounding black instead of hard-cutting. */ .fango-hero--has-bg-img { padding: 0; background: #000; position: relative; display: flex; flex-direction: column; } .fango-hero--has-bg-img .fango-hero__bg-img { position: relative; inset: auto; display: block; width: 100%; height: auto; max-height: 360px; object-fit: contain; object-position: center; background: #000; z-index: 0; /* Edge fade so image transitions smoothly into surrounding black */ -webkit-mask-image: linear-gradient(180deg, transparent 0%, black 5%, black 78%, transparent 100% ); mask-image: linear-gradient(180deg, transparent 0%, black 5%, black 78%, transparent 100% ); } .fango-hero--has-bg-img::after { content: none; /* Replaced by the gradient on .fango-hero__inner below */ } /* Eyebrow: absolute over image top. Anchored to the section (which is * position: relative above); .fango-hero__inner stays static so the * absolute positioning resolves to the section rather than the inner. */ .fango-hero--has-bg-img .fango-hero__badge { position: absolute; top: 1rem; left: 1.25rem; z-index: 3; margin: 0; box-shadow: none; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.95), 0 0 14px rgba(0, 0, 0, 0.6); } /* Copy block: pulled up 5rem to overlap image bottom. Gradient backdrop * goes transparent at top (image still partly visible behind) through * mid-darken to solid #000. Headline sits in the gradient zone; subhead + * CTA + countdown live below on pure black. */ .fango-hero--has-bg-img .fango-hero__inner { position: static; margin-top: -5rem; padding: 3rem 1.5rem 2rem; background: linear-gradient(180deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0.45) 25%, rgba(0, 0, 0, 0.85) 45%, #000 65% ); } /* Mobile typography */ .fango-hero--has-bg-img .fango-hero__headline { font-size: clamp(1.5rem, 6vw, 2.1rem); line-height: 1.05; margin: 0 0 0.65rem; text-shadow: 0 2px 10px rgba(0, 0, 0, 0.85); } .fango-hero--has-bg-img .fango-hero__subhead { font-size: 14px; line-height: 1.45; margin-bottom: 1.25rem; text-shadow: none; } .fango-hero--has-bg-img .fango-countdown__num, .fango-hero--has-bg-img .fango-countdown__label { text-shadow: none; } /* Full-width stacked CTAs on mobile (~52px tap target). */ .fango-hero--has-bg-img .fango-hero__ctas { flex-direction: column; align-items: stretch; gap: 8px; } .fango-hero--has-bg-img .fango-hero__ctas .fango-btn { width: 100%; text-align: center; padding-top: 14px; padding-bottom: 14px; font-size: 14px; } /* Tighter countdown so it doesn't crowd the image up top. */ .fango-hero--has-bg-img .fango-countdown { gap: 8px; margin-top: 1.5rem; } .fango-hero--has-bg-img .fango-countdown__box { padding: 8px 10px; min-width: 52px; } .fango-hero--has-bg-img .fango-countdown__num { font-size: 22px; } .fango-hero--has-bg-img .fango-countdown__label { font-size: 9px; } .fango-hero--has-bg-img .fango-countdown__caption { font-size: 10px; letter-spacing: 0.12em; } .fango-spotlight, .fango-footer-cta { padding: 2rem 1.5rem; } .fango-nominee-grid { grid-template-columns: repeat(2, 1fr); } .fango-merch-grid__items { grid-template-columns: repeat(2, 1fr); } .fango-editorial__grid { grid-template-columns: 1fr; } .fango-legacy-grid { grid-template-columns: 1fr; } .fango-btn--ghost { margin-left: 0; } .fango-hero__ctas { flex-direction: column; align-items: stretch; } .fango-hero__ctas .fango-btn { text-align: center; } .fango-footer-cta__form { flex-direction: column; } .fango-nominees-page__grid, .fango-cat-page__grid { grid-template-columns: 1fr; padding: 2rem 1rem; } .fango-nominees-page__header, .fango-cat-page__header { padding: 2rem 1rem; } .fango-nom-page__hero { min-height: 280px; } .fango-nom-page--has-hero-img .fango-nom-page__hero { min-height: 380px; } .fango-nom-page__hero .fango-nom-page__inner { padding: 2rem 1rem 1.5rem; } .fango-nom-page__work-grid, .fango-nom-page__work-context { grid-template-columns: 1fr; } .fango-nom-page__work-poster { max-width: 200px; } .fango-nom-page__people--solo .fango-nom-page__person--solo { grid-template-columns: 1fr; text-align: center; } .fango-nom-page__people--solo .fango-nom-page__person-headshot { margin: 0 auto; } .fango-nom-page__people-grid, .fango-nom-page__orgs-grid, .fango-nom-page__editorial-grid { grid-template-columns: 1fr; } .fango-nominees-link { padding: 2rem 1rem; } .fango-sticky-cta__inner { padding: 0.75rem 1rem; gap: 0.75rem; } .fango-sticky-cta__cta { padding: 10px 18px; font-size: 12px; } .fango-sticky-cta__headline { font-size: 13px; } .fango-nominees-page, .fango-cat-page, .fango-nom-page { padding-bottom: 130px; } }