/* contest-highlight.css — "Compete for the prize" treatment on the scenarios list and the scenario detail page. v1 Two independent behaviours: 1. ALWAYS while a contest is live — the contest scenario's card gets a gold ribbon. Costs nothing, works as passive marketing. 2. ONLY when the visitor arrived from /contest (the URL carries ?contest=, so gets .sfm-contest-focus) — every OTHER card fades back so the one they need is unmistakable. Dimmed cards stay fully clickable and keep AA-legible text. This is a visual hint, not a lockout — nobody gets trapped. */ /* ── 1. The prize ribbon ──────────────────────────────────────── */ .sfm-contest-card { position: relative; outline: 2px solid #D4AF37; outline-offset: 2px; border-radius: 14px; } .sfm-contest-ribbon { display: flex; align-items: center; justify-content: center; gap: 8px; background: linear-gradient(90deg, #D4AF37, #f0cf6b); color: #0B2D5A; font-size: .82rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: 9px 14px; border-radius: 10px 10px 0 0; text-align: center; } .sfm-contest-ribbon .sfm-cr-days { font-weight: 600; text-transform: none; letter-spacing: 0; opacity: .8; } /* ── 2. Focus mode — dim everything else ──────────────────────── */ .sfm-contest-focus .sfm-dimmable { opacity: .34; filter: saturate(.45); transition: opacity .2s ease, filter .2s ease; } .sfm-contest-focus .sfm-dimmable:hover, .sfm-contest-focus .sfm-dimmable:focus-within { opacity: .85; filter: none; } /* The contest card itself never dims, and lifts slightly above the rest. */ .sfm-contest-focus .sfm-contest-card { opacity: 1 !important; filter: none !important; transform: translateY(-2px); box-shadow: 0 10px 28px rgba(11, 45, 90, .16); } /* ── 3. The explainer banner at the top of the list ───────────── */ .sfm-contest-banner { display: flex; align-items: center; gap: 16px; background: linear-gradient(135deg, #fffdf5, #fdf6e3); border: 1px solid #e8d9a8; border-radius: 14px; padding: 18px 22px; margin-bottom: 24px; } .sfm-contest-banner-icon { font-size: 2rem; flex-shrink: 0; } .sfm-contest-banner-body { flex: 1; min-width: 0; } .sfm-contest-banner-body strong { display: block; color: #0B2D5A; font-size: 1.02rem; margin-bottom: 3px; } .sfm-contest-banner-body span { color: #6b5a24; font-size: .88rem; } .sfm-contest-banner a { flex-shrink: 0; background: #0B2D5A; color: #fff; text-decoration: none; font-weight: 700; font-size: .86rem; padding: 10px 18px; border-radius: 9px; white-space: nowrap; } .sfm-contest-banner a:hover { opacity: .9; } /* ── 4. Banner on the scenario detail page ────────────────────── */ .sfm-contest-strip { display: flex; align-items: center; gap: 14px; background: linear-gradient(90deg, #0B2D5A, #164a8a); color: #fff; border-radius: 12px; padding: 16px 20px; margin-bottom: 22px; } .sfm-contest-strip .ico { font-size: 1.7rem; flex-shrink: 0; } .sfm-contest-strip strong { display: block; color: #D4AF37; font-size: 1rem; } .sfm-contest-strip span { font-size: .86rem; opacity: .88; } /* ── Mobile ───────────────────────────────────────────────────── */ @media (max-width: 760px) { .sfm-contest-banner { flex-wrap: wrap; padding: 16px; gap: 12px; } .sfm-contest-banner a { width: 100%; text-align: center; } .sfm-contest-strip { padding: 14px 16px; } /* Dimming reads as "broken" on a small screen where only one or two cards are visible at a time — soften it rather than remove it. */ .sfm-contest-focus .sfm-dimmable { opacity: .5; } } /* ── Accessibility ────────────────────────────────────────────── */ @media (prefers-reduced-motion: reduce) { .sfm-contest-focus .sfm-dimmable, .sfm-contest-focus .sfm-contest-card { transition: none; transform: none; } } /* Never dim for screen readers or when printing — dimming is decorative. */ @media print { .sfm-contest-focus .sfm-dimmable { opacity: 1; filter: none; } }