/* Theme Name: Caards Child Template: caards Description: Child theme for SpeakOutZone — safe customizations Version: 1.0 */ /* ─── SpeakOutZone Polls Directory ──────────────────────────────────────── */ /* Light mode */ :root { --soz-card-bg: #ffffff; --soz-card-border: #e5e7eb; --soz-card-shadow: rgba(0, 0, 0, 0.08); --soz-card-title: #111827; --soz-card-question: #4b5563; --soz-section-border: #e5e7eb; --soz-topic-title: #111827; --soz-count-bg: #f3f4f6; --soz-count-text: #6b7280; --soz-page-title: #111827; --soz-topic-desc: #6b7280; --soz-accent: var(--color-primary, #3b82f6); --soz-result-bar-bg: #e5e7eb; --soz-result-bar-fill: var(--color-primary, #3b82f6); --soz-result-bar-text: #ffffff; --soz-result-label: #374151; --soz-result-pct: #6b7280; --soz-result-total: #9ca3af; --soz-article-bg: #f9fafb; --soz-article-border: #e5e7eb; --soz-article-label: #9ca3af; --soz-article-title: #111827; --soz-article-link: var(--color-primary, #3b82f6); --soz-img-placeholder: linear-gradient(135deg, #2d0a28 0%, #5c1750 100%); --soz-img-icon: #d070c4; } /* Dark mode — Caards sets [data-site-scheme="dark"] on */ [data-site-scheme="dark"] { --soz-card-bg: #1f2937; --soz-card-border: #374151; --soz-card-shadow: rgba(0, 0, 0, 0.35); --soz-card-title: #f9fafb; --soz-card-question: #9ca3af; --soz-section-border: #374151; --soz-topic-title: #f9fafb; --soz-count-bg: #374151; --soz-count-text: #9ca3af; --soz-page-title: #f9fafb; --soz-topic-desc: #9ca3af; --soz-result-bar-bg: #374151; --soz-result-bar-fill: var(--color-primary, #6366f1); --soz-result-bar-text: #ffffff; --soz-result-label: #d1d5db; --soz-result-pct: #9ca3af; --soz-result-total: #6b7280; --soz-article-bg: #111827; --soz-article-border: #374151; --soz-article-label: #6b7280; --soz-article-title: #f9fafb; --soz-article-link: var(--color-primary, #818cf8); --soz-img-placeholder: linear-gradient(135deg, #2d0a28 0%, #5c1750 100%); --soz-img-icon: #d070c4; } /* System dark mode fallback (when Caards hasn't set the attribute yet) */ @media (prefers-color-scheme: dark) { body:not([data-site-scheme="light"]) { --soz-card-bg: #1f2937; --soz-card-border: #374151; --soz-card-shadow: rgba(0, 0, 0, 0.35); --soz-card-title: #f9fafb; --soz-card-question: #9ca3af; --soz-section-border: #374151; --soz-topic-title: #f9fafb; --soz-count-bg: #374151; --soz-count-text: #9ca3af; --soz-page-title: #f9fafb; --soz-topic-desc: #9ca3af; --soz-result-bar-bg: #374151; --soz-result-bar-fill: var(--color-primary, #6366f1); --soz-result-bar-text: #ffffff; --soz-result-label: #d1d5db; --soz-result-pct: #9ca3af; --soz-result-total: #6b7280; --soz-article-bg: #111827; --soz-article-border: #374151; --soz-article-label: #6b7280; --soz-article-title: #f9fafb; --soz-article-link: var(--color-primary, #818cf8); --soz-img-placeholder: linear-gradient(135deg, #2d0a28 0%, #5c1750 100%); --soz-img-icon: #d070c4; } } /* ─── Page wrappers ─────────────────────────────────────────────────────── */ .soz-polls-archive, .soz-topic-archive { padding: 40px 0; } /* Explicitly anchor taxonomy archive to Caards dark/light mode variables so the page background and inherited text colors respond to data-site-scheme */ .soz-topic-archive { background: var(--cs-color-site-background); color: var(--cs-color-primary); } #primary .soz-polls-archive .soz-polls-title, #primary .soz-topic-archive .soz-topic-header h1 { font-size: 2rem; font-weight: 700; margin-bottom: 8px; color: #111827 !important; } [data-site-scheme="dark"] #primary .soz-polls-archive .soz-polls-title, [data-site-scheme="dark"] #primary .soz-topic-archive .soz-topic-header h1 { color: #f9fafb !important; } .soz-topic-header p { color: var(--soz-topic-desc); margin-bottom: 4px; } .soz-topic-count { font-size: 0.85rem; color: var(--soz-count-text); margin-bottom: 24px; } .soz-topic-pagination { margin-top: 32px; } .soz-no-polls { color: var(--soz-topic-desc); font-size: 1rem; padding: 24px 0; } .soz-topic-section { margin-bottom: 48px; padding-bottom: 40px; border-bottom: 1px solid var(--soz-section-border); } #primary .soz-polls-archive .soz-topic-title, #primary .soz-topic-archive .soz-topic-title { display: flex; align-items: center; gap: 12px; font-size: 1.4rem; font-weight: 700; margin-bottom: 20px; color: #111827 !important; } [data-site-scheme="dark"] #primary .soz-polls-archive .soz-topic-title, [data-site-scheme="dark"] #primary .soz-topic-archive .soz-topic-title { color: #f9fafb !important; } #primary .soz-polls-archive .soz-topic-title a, #primary .soz-topic-archive .soz-topic-title a { color: inherit; text-decoration: none; } .soz-topic-title a:hover { color: var(--soz-accent); } .soz-poll-count { font-size: 0.85rem; font-weight: 400; background: var(--soz-count-bg); color: var(--soz-count-text); padding: 2px 10px; border-radius: 999px; } /* ─── Article group (taxonomy archive) ──────────────────────────────────── */ .soz-article-group { margin-bottom: 40px; background: var(--soz-article-bg); border: 1px solid var(--soz-article-border); border-radius: 16px; padding: 20px 20px 20px; box-shadow: 0 2px 8px var(--soz-card-shadow); } .soz-article-group:last-child { margin-bottom: 0; } .soz-article-group-header { display: flex; align-items: center; gap: 14px; border-bottom: 1px solid var(--soz-article-border); padding-bottom: 16px; margin-bottom: 20px; } .soz-article-group-header--standalone { background: transparent; border-color: transparent; padding-left: 0; border-bottom: none; padding-bottom: 0; } .soz-article-group-thumb-link { flex-shrink: 0; } .soz-article-group-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 6px; display: block; } .soz-article-group-meta { display: flex; flex-direction: column; gap: 4px; min-width: 0; } .soz-article-group-label { font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.08em; color: var(--soz-accent); display: flex; align-items: center; gap: 5px; } .soz-article-group-label::before { content: ''; display: inline-block; width: 3px; height: 12px; background: var(--soz-accent); border-radius: 2px; flex-shrink: 0; } .soz-article-group-title { font-size: 1.05rem; font-weight: 700; color: var(--soz-article-title); text-decoration: none; overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; max-width: 640px; line-height: 1.35; } .soz-article-group-title:hover { color: var(--soz-article-link); text-decoration: underline; } /* ─── 3-column grid ─────────────────────────────────────────────────────── */ .soz-polls-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; margin-bottom: 0; } @media (max-width: 900px) { .soz-polls-grid { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .soz-polls-grid { grid-template-columns: 1fr; } } /* ─── Poll card — tile overlay style ────────────────────────────────────── */ .soz-poll-card { position: relative; border-radius: 12px; overflow: hidden; height: var(--soz-card-height, 280px); } .soz-poll-card-link { display: block; height: 100%; text-decoration: none; position: relative; } /* Background image */ .soz-poll-card-bg { position: absolute; inset: 0; background: var(--soz-img-placeholder); background-size: cover; background-position: center; transition: transform 0.45s ease; } .soz-poll-card:hover .soz-poll-card-bg { transform: scale(1.05); } /* Dark gradient overlay — lighter at top, darker at bottom */ .soz-poll-card-overlay { position: absolute; inset: 0; background: linear-gradient( to bottom, rgba(0, 0, 0, 0.08) 0%, rgba(0, 0, 0, 0.20) 40%, rgba(0, 0, 0, 0.80) 100% ); display: flex; flex-direction: column; justify-content: space-between; padding: 18px; } /* Slightly stronger overlay when no photo */ .soz-poll-card--no-image .soz-poll-card-overlay { background: linear-gradient( to bottom, rgba(0, 0, 0, 0.10) 0%, rgba(0, 0, 0, 0.55) 100% ); } /* ─── Top area: topic label ──────────────────────────────────────────────── */ .soz-poll-card-top { display: flex; flex-wrap: wrap; gap: 6px; } .soz-poll-topic-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: #ffffff; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); } /* ─── Bottom area: title, date, CTA ─────────────────────────────────────── */ .soz-poll-card-bottom { display: flex; flex-direction: column; gap: 8px; } .soz-poll-name { font-size: 1.1rem; font-weight: 700; line-height: 1.3; margin: 0; color: #ffffff; text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); } .soz-poll-date { font-size: 0.75rem; font-weight: 500; color: rgba(255, 255, 255, 0.75); margin: 0; } .soz-poll-cta-pill { display: inline-block; background: var(--soz-accent); color: #ffffff; padding: 6px 14px; border-radius: 999px; font-size: 0.75rem; font-weight: 700; align-self: flex-start; transition: opacity 0.2s; } .soz-poll-card:hover .soz-poll-cta-pill { opacity: 0.85; } /* ─── Vote teaser inside poll card (taxonomy archive, Option A) ─────────── */ .soz-poll-card-vote-teaser { display: flex; flex-direction: column; gap: 4px; } .soz-poll-card-vote-row { display: flex; justify-content: space-between; align-items: baseline; gap: 6px; } .soz-poll-card-vote-leading { font-size: 0.68rem; color: rgba(255, 255, 255, 0.90); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: flex; align-items: center; gap: 5px; min-width: 0; } .soz-poll-card-vote-tag { display: inline-block; font-size: 0.58rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #ffffff; background: rgba(255, 255, 255, 0.22); padding: 1px 5px; border-radius: 3px; flex-shrink: 0; } .soz-poll-card-vote-pct { font-size: 0.75rem; font-weight: 700; color: #ffffff; flex-shrink: 0; } .soz-poll-card-vote-bar-track { height: 3px; background: rgba(255, 255, 255, 0.25); border-radius: 2px; overflow: hidden; } .soz-poll-card-vote-bar-fill { height: 100%; background: #ffffff; border-radius: 2px; transition: width 0.4s ease; min-width: 2px; } .soz-poll-card-vote-total { font-size: 0.65rem; color: rgba(255, 255, 255, 0.60); } /* Taller cards when vote teaser is shown so text isn't cramped */ .soz-poll-grid--with-votes .soz-poll-card { height: 320px; } @media (max-width: 768px) { .soz-poll-grid--with-votes .soz-poll-card { height: 260px; } } /* ─── Poll Categories block ─────────────────────────────────────────────── */ .soz-poll-categories { display: flex; flex-wrap: wrap; gap: 10px; } .soz-poll-category-item { display: inline-flex; align-items: center; gap: 7px; padding: 9px 18px; border-radius: 999px; background: var(--soz-count-bg); color: var(--soz-card-title); text-decoration: none; font-size: 0.875rem; font-weight: 600; border: 1px solid var(--soz-card-border); transition: background 0.2s, color 0.2s, border-color 0.2s; } .soz-poll-category-item:hover { background: var(--soz-accent); color: #ffffff; border-color: var(--soz-accent); } .soz-poll-category-count { font-size: 0.75rem; font-weight: 400; opacity: 0.65; } /* Cards layout variant */ .soz-poll-categories--cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 12px; } .soz-poll-categories--cards .soz-poll-category-item { flex-direction: column; align-items: flex-start; padding: 18px 20px; border-radius: 12px; gap: 4px; } .soz-poll-categories--cards .soz-poll-category-name { font-size: 0.95rem; } .soz-poll-categories--cards .soz-poll-category-count { font-size: 0.78rem; opacity: 0.6; } /* ─── "View all" link ───────────────────────────────────────────────────── */ .soz-view-all { display: inline-block; margin-top: 8px; font-weight: 600; font-size: 0.9rem; color: var(--soz-accent); text-decoration: none; } .soz-view-all:hover { text-decoration: underline; } /* ─── Poll question + date in archive / taxonomy views ─────────────────── */ /* Date row — inherits Caards .cs-entry__meta colour tokens for dark/light */ .soz-poll-archive-date { font-size: 0.8rem; margin-top: 6px; margin-bottom: 0; } /* Question text — inherits Caards .cs-entry__excerpt tokens for dark/light */ .soz-poll-archive-question { font-size: 0.95rem; line-height: 1.55; margin-top: 10px; margin-bottom: 0; /* clamp to two lines so long questions don't overflow the card */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* Taxonomy archive header — spacing inside the Caards content area */ #primary .soz-topic-header { margin-bottom: 28px; } /* ─── Single Poll Page ───────────────────────────────────────────────────── */ .soz-single-poll-page { padding: 40px 0; } .soz-single-poll-topics { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 14px; } #primary .soz-single-poll-title { color: #111827 !important; font-size: clamp(1.5rem, 4vw, 2.4rem); font-weight: 800; line-height: 1.2; margin: 0 0 12px; } [data-site-scheme="dark"] #primary .soz-single-poll-title { color: #f9fafb !important; } .soz-single-poll-meta { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; margin-bottom: 28px; } .soz-single-poll-votes { color: var(--soz-count-text); font-size: 0.875rem; font-weight: 600; display: flex; align-items: center; gap: 5px; } .soz-single-poll-votes::before { content: ''; display: inline-block; width: 8px; height: 8px; background: var(--soz-accent); border-radius: 50%; } .soz-single-poll-article-link { color: #3b82f6; font-size: 0.875rem; font-weight: 500; text-decoration: none; border-bottom: 1px solid #3b82f6; transition: color 0.15s, border-color 0.15s; line-height: 1.4; max-width: 480px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } [data-site-scheme="dark"] .soz-single-poll-article-link, [data-scheme="dark"] .soz-single-poll-article-link, [data-scheme="inverse"] .soz-single-poll-article-link { color: #818cf8; border-bottom-color: #818cf8; } @media (prefers-color-scheme: dark) { body:not([data-site-scheme="light"]) .soz-single-poll-article-link { color: #818cf8; border-bottom-color: #818cf8; } } @media (max-width: 600px) { .soz-single-poll-article-link { white-space: normal; max-width: 100%; } } .soz-single-poll-article-link:hover { text-decoration: none; opacity: 0.8; } .soz-single-poll-question { font-size: 1.1rem; line-height: 1.65; color: var(--soz-card-question); text-align: center; margin-bottom: 28px; } /* Footer topic list */ .soz-single-poll-footer-topics { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin-top: 32px; padding-top: 20px; border-top: 1px solid var(--soz-section-border); } .soz-single-poll-footer-label { font-size: 0.8rem; color: var(--soz-result-total); font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; } /* Poll archive — leading result summary with mini progress bar */ .soz-poll-archive-summary { margin-top: 20px; padding-top: 14px; border-top: 1px solid var(--soz-section-border); } .soz-poll-archive-leading-row { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 5px; } .soz-poll-archive-leading-label { font-size: 0.72rem; font-weight: 400; color: var(--soz-result-label); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; display: flex; align-items: center; gap: 5px; } .soz-poll-archive-leading-tag { display: inline-block; font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--soz-accent); background: color-mix(in srgb, var(--soz-accent) 12%, transparent); padding: 1px 5px; border-radius: 3px; flex-shrink: 0; } .soz-poll-archive-leading-pct { font-size: 0.72rem; font-weight: 600; color: var(--soz-result-pct); flex-shrink: 0; } .soz-poll-archive-bar-track { height: 4px; background: var(--soz-result-bar-bg); border-radius: 2px; overflow: hidden; margin-bottom: 5px; } .soz-poll-archive-bar-fill { height: 100%; background: var(--soz-result-bar-fill); border-radius: 2px; transition: width 0.4s ease; min-width: 2px; } .soz-poll-archive-votes-count { font-size: 0.72rem; color: var(--soz-result-total); } /* ─── Most Voted / Recent Polls homepage blocks ─────────────────────────── */ .soz-most-voted-polls { padding: 8px 0 24px; } .soz-block-title { font-size: 1.6rem; font-weight: 700; margin: 0 0 24px; color: var(--soz-page-title); } .soz-block-title a { color: inherit; text-decoration: none; } .soz-block-title a:hover { text-decoration: underline; } .soz-poll-grid { display: grid; gap: 20px; grid-template-columns: 1fr; } .soz-poll-grid--columns-2 { grid-template-columns: repeat(2, 1fr); } .soz-poll-grid--columns-3 { grid-template-columns: repeat(3, 1fr); } .soz-poll-grid--columns-4 { grid-template-columns: repeat(4, 1fr); } @media (max-width: 900px) { .soz-poll-grid--columns-3, .soz-poll-grid--columns-4 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 600px) { .soz-poll-grid--columns-2, .soz-poll-grid--columns-3, .soz-poll-grid--columns-4 { grid-template-columns: 1fr; } } /* ─── Voting Rampage Page ───────────────────────────────────────────────── */ /* Rampage page — no special layout overrides, sidebar shows normally */ /* Dark card — sits in the page flow like any other content block */ .soz-rampage-wrap { position: relative; overflow: hidden; background: #0d0010; border-radius: 16px; margin: 32px 0 48px; min-height: 80vh; } /* ── Progress header ─────────────────────────────────────────────────────── */ .soz-rampage-header { position: relative; z-index: 20; background: rgba(0, 0, 0, 0.55); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .soz-rampage-progress-wrap { height: 3px; background: rgba(255, 255, 255, 0.12); } .soz-rampage-progress-bar { height: 100%; background: linear-gradient(90deg, #ef21e1, #e2a7e1); width: 0%; transition: width 0.5s ease; border-radius: 0 2px 2px 0; } .soz-rampage-header-meta { display: flex; align-items: center; justify-content: space-between; padding: 10px 24px; } .soz-rampage-counter { font-size: 0.8rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255, 255, 255, 0.65); } .soz-rampage-exit { font-size: 0.78rem; font-weight: 600; color: rgba(255, 255, 255, 0.45); text-decoration: none; letter-spacing: 0.04em; transition: color 0.2s; } .soz-rampage-exit:hover { color: rgba(255, 255, 255, 0.9); } /* ── Slide container ─────────────────────────────────────────────────────── */ .soz-rampage-slides { position: relative; min-height: 75vh; } /* ── Individual slide ────────────────────────────────────────────────────── */ .soz-rampage-slide { position: absolute; inset: 0; min-height: 75vh; display: flex; flex-direction: column; opacity: 0; pointer-events: none; transition: opacity 0.4s ease, transform 0.4s ease; transform: translateY(16px); } .soz-rampage-slide--active { opacity: 1; pointer-events: auto; transform: translateY(0); position: relative; } .soz-rampage-slide--entering { opacity: 0; transform: translateY(20px); } .soz-rampage-slide--leaving { opacity: 0; transform: translateY(-16px); pointer-events: none; } /* ── Background image (blurred) ──────────────────────────────────────────── */ .soz-rampage-bg { position: absolute; inset: 0; background-size: cover; background-position: center; filter: blur(18px) brightness(0.35) saturate(0.8); transform: scale(1.08); /* prevents blur edge artifacts */ z-index: 0; } /* ── Dark gradient overlay ───────────────────────────────────────────────── */ .soz-rampage-overlay { position: absolute; inset: 0; z-index: 1; background: linear-gradient( to bottom, rgba(10, 0, 18, 0.55) 0%, rgba(10, 0, 18, 0.25) 40%, rgba(10, 0, 18, 0.72) 100% ); } /* ── Content column ──────────────────────────────────────────────────────── */ .soz-rampage-content { position: relative; z-index: 10; width: 100%; max-width: 680px; margin: 0 auto; padding: 36px 24px 48px; display: flex; flex-direction: column; gap: 24px; } /* ── Topic pills ─────────────────────────────────────────────────────────── */ .soz-rampage-topics { display: flex; flex-wrap: wrap; gap: 8px; } .soz-rampage-topic-pill { font-size: 0.68rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.09em; color: #ef21e1; background: rgba(239, 33, 225, 0.15); border: 1px solid rgba(239, 33, 225, 0.35); padding: 4px 12px; border-radius: 999px; } /* ── TotalPoll widget overrides inside rampage ───────────────────────────── */ .soz-rampage-poll-wrap .totalpoll { background: transparent !important; border: none !important; box-shadow: none !important; color: #ffffff !important; } /* Question text */ .soz-rampage-poll-wrap .totalpoll-question-content, .soz-rampage-poll-wrap .totalpoll-question-heading { color: #ffffff !important; font-size: clamp(1.3rem, 3.5vw, 2rem) !important; font-weight: 800 !important; line-height: 1.25 !important; margin-bottom: 20px !important; text-shadow: 0 2px 12px rgba(0, 0, 0, 0.5) !important; } /* Choice items */ .soz-rampage-poll-wrap .totalpoll-choice { background: rgba(255, 255, 255, 0.07) !important; border: 1px solid rgba(255, 255, 255, 0.14) !important; border-radius: 10px !important; margin-bottom: 10px !important; transition: background 0.18s ease, border-color 0.18s ease !important; } .soz-rampage-poll-wrap .totalpoll-choice:hover { background: rgba(239, 33, 225, 0.18) !important; border-color: rgba(239, 33, 225, 0.5) !important; } .soz-rampage-poll-wrap .totalpoll-choice-checked, .soz-rampage-poll-wrap .totalpoll-choice.totalpoll-choice-checked { background: rgba(239, 33, 225, 0.25) !important; border-color: #ef21e1 !important; } /* Choice label text */ .soz-rampage-poll-wrap .totalpoll-choice-label, .soz-rampage-poll-wrap .totalpoll-choice label { color: #ffffff !important; font-size: 1rem !important; } /* Radio/checkbox dot colour */ .soz-rampage-poll-wrap .totalpoll-choice input[type="radio"], .soz-rampage-poll-wrap .totalpoll-choice input[type="checkbox"] { accent-color: #ef21e1; } /* Vote & Results buttons */ .soz-rampage-poll-wrap .totalpoll-button-vote, .soz-rampage-poll-wrap .totalpoll-button-results { border-radius: 8px !important; font-weight: 700 !important; transition: opacity 0.2s !important; } .soz-rampage-poll-wrap .totalpoll-button-vote { background: #ef21e1 !important; border-color: #ef21e1 !important; color: #ffffff !important; } .soz-rampage-poll-wrap .totalpoll-button-results { background: rgba(255, 255, 255, 0.1) !important; border-color: rgba(255, 255, 255, 0.2) !important; color: rgba(255, 255, 255, 0.8) !important; } /* Results bars */ .soz-rampage-poll-wrap .totalpoll-votesbar-fill, .soz-rampage-poll-wrap .totalpoll-votesbar-bar { background: linear-gradient(90deg, #ef21e1, #e2a7e1) !important; } /* Results labels */ .soz-rampage-poll-wrap .totalpoll-choice-content, .soz-rampage-poll-wrap .totalpoll-votesbar-label { color: #ffffff !important; } /* ── Action buttons (Skip / Next) ────────────────────────────────────────── */ .soz-rampage-actions { display: flex; align-items: center; gap: 12px; padding-top: 4px; } .soz-rampage-btn { display: inline-flex; align-items: center; justify-content: center; padding: 11px 24px; border-radius: 10px; font-size: 0.9rem; font-weight: 700; cursor: pointer; border: none; text-decoration: none; transition: opacity 0.2s, transform 0.15s; } .soz-rampage-btn:hover { opacity: 0.85; transform: translateY(-1px); } .soz-rampage-btn:active { transform: translateY(0); } .soz-rampage-btn--primary { background: linear-gradient(135deg, #ef21e1, #c41ab8); color: #ffffff; box-shadow: 0 4px 20px rgba(239, 33, 225, 0.35); } .soz-rampage-btn--ghost { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.85); border: 1px solid rgba(255, 255, 255, 0.2); } .soz-rampage-btn--ghost:hover { color: #ffffff; } .soz-rampage-btn--skip { background: transparent; color: rgba(255, 255, 255, 0.4); font-size: 0.82rem; font-weight: 600; padding: 8px 4px; letter-spacing: 0.02em; border: none; text-decoration: underline; text-underline-offset: 3px; text-decoration-color: rgba(255, 255, 255, 0.2); transition: color 0.2s; } .soz-rampage-btn--skip:hover { color: rgba(255, 255, 255, 0.75); transform: none; } .soz-rampage-btn--next { background: linear-gradient(135deg, #ef21e1, #c41ab8); color: #ffffff; box-shadow: 0 4px 20px rgba(239, 33, 225, 0.4); animation: soz-rampage-pulse 0.35s ease; } @keyframes soz-rampage-pulse { 0% { transform: scale(0.92); opacity: 0; } 60% { transform: scale(1.04); } 100% { transform: scale(1); opacity: 1; } } /* ── End screen ──────────────────────────────────────────────────────────── */ .soz-rampage-end { display: none; align-items: center; justify-content: center; padding: 48px 24px; min-height: 75vh; } .soz-rampage-end--active { display: flex; } .soz-rampage-end-card { background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); border-radius: 24px; padding: 48px 40px; text-align: center; max-width: 480px; width: 100%; } .soz-rampage-end-icon { font-size: 3.5rem; margin-bottom: 20px; line-height: 1; } .soz-rampage-end-title { font-size: 2rem; font-weight: 800; color: #ffffff; margin: 0 0 10px; } .soz-rampage-end-sub { font-size: 0.95rem; color: rgba(255, 255, 255, 0.55); margin: 0 0 32px; } .soz-rampage-end-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; } /* ── Responsive ──────────────────────────────────────────────────────────── */ @media (max-width: 600px) { .soz-rampage-content { padding: 24px 16px 40px; gap: 18px; } .soz-rampage-end-card { padding: 36px 24px; } .soz-rampage-end-title { font-size: 1.6rem; } .soz-rampage-poll-wrap .totalpoll-question-content, .soz-rampage-poll-wrap .totalpoll-question-heading { font-size: 1.3rem !important; } } /* ── Poll card sizing — match Caards post card proportions ──────────────── */ /* Override aspect-ratio with fixed height to match Caards grid post cards (~280px) */ .soz-poll-grid .soz-poll-card { height: 280px; aspect-ratio: unset; } @media (max-width: 768px) { .soz-poll-grid .soz-poll-card { height: 220px; } }