/* Noir case detail page (cases/caseDetail.html + cases/partials/_case*.html). Bootstrap handles grid/flex/spacing; this file carries what Bootstrap has no opinion about: the noir palette, Oswald display type, the section-heading rule, the dark tile, and scoped restyling of the shared review card partial. Fonts: Oswald is self-hosted site-wide via core css/fonts.css. */ /* navbar sits flush above the banner on this page (same trick as body.nyn-home: mb-2 is a Bootstrap utility with !important, so this must out-important it) */ body.cd-page > header.site-header { margin-bottom: 0 !important; } /* paper continues under short content on tall viewports (sticky-footer gap) */ body.cd-page { background: #e9e4d9; } .case-detail { --noir-paper: #e9e4d9; /* page background */ --noir-ink: #17150f; /* body text, dark tiles, heading rules */ --noir-ink-2: #100e0a; /* banner stat strip */ --noir-cream: #f4efe3; /* text on dark */ --noir-cream-2: #cdc6b5; /* secondary text on dark */ --noir-cream-3: #e2dbcb; /* body text on dark tiles */ --noir-muted: #6e6857; /* secondary text on paper */ --noir-muted-2: #948c78; /* review meta on dark */ --noir-rule: #cfc8b8; /* hairline between sidebar rows */ --noir-rule-2: #d8d1c1; /* hairline, More details rows */ --noir-tan: #dcd5c6; /* feature tiles */ --noir-red: #a8332c; /* buttons */ --noir-red-2: #85251f; /* button hover */ --noir-link: #7d2b26; /* links on paper */ --noir-link-2: #4d1a17; /* link hover on paper */ --noir-link-3: #e3948c; /* links on dark */ --noir-green: #3f7a33; /* "Playable" status */ --noir-thumb: #4e8a3f; /* thumbs-up on the dark banner */ --noir-thumb-2: #7cc06a; /* thumbs-up on dark review tiles */ --cd-display: 'Oswald', 'Helvetica Neue', Helvetica, Arial, sans-serif; --cd-body-font: 'Helvetica Neue', Helvetica, Arial, sans-serif; background: var(--noir-paper); font-family: var(--cd-body-font); color: var(--noir-ink); -webkit-font-smoothing: antialiased; } /* links on paper; buttons (bootstrap .btn*, .cd-btn*) keep their own colors */ .case-detail a:not([class*="btn"]) { color: var(--noir-link); text-decoration: none; } .case-detail a:not([class*="btn"]):hover { color: var(--noir-link-2); text-decoration: underline; } /* ------------------------------------------------------------------ */ /* Banner */ /* ------------------------------------------------------------------ */ .cd-banner { position: relative; background: var(--noir-ink); overflow: hidden; } .cd-banner-backdrop { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.38; filter: grayscale(1) contrast(1.15) blur(2px); transform: scale(1.06); } .cd-banner-scrim { position: absolute; inset: 0; background: linear-gradient(to top, rgba(23,21,15,0.97) 10%, rgba(23,21,15,0.62) 72%); } .cd-banner-fg { position: relative; padding: 20px 20px 40px; gap: clamp(22px, 3vw, 38px); } .cd-banner-cover { flex: none; width: clamp(190px, 20vw, 260px); height: auto; display: block; border: 1px solid rgba(244,239,227,0.28); box-shadow: 0 18px 44px rgba(0,0,0,0.55); } .cd-banner-text { flex: 1 1 380px; min-width: 280px; padding-bottom: 6px; } .cd-banner-eyebrow { font-family: var(--cd-display); font-size: 13px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: #d6c9ab; margin-bottom: 14px; } .cd-eyebrow-rule { width: 26px; height: 1px; background: #7a7360; } .cd-banner-title { margin: 0 0 16px; font-family: var(--cd-display); font-size: clamp(40px, 6.4vw, 74px); line-height: 0.95; font-weight: 600; letter-spacing: -0.008em; text-transform: uppercase; color: var(--noir-cream); } .cd-banner-subtitle { font-family: var(--cd-display); font-size: 15px; font-weight: 400; letter-spacing: 0.12em; text-transform: uppercase; color: var(--noir-cream-2); margin: -8px 0 14px; } .cd-banner-summary { margin: 0; max-width: 560px; font-size: 17.5px; line-height: 1.55; color: var(--noir-cream-2); text-wrap: pretty; } /* admin bar floats top-right only on very wide screens; below 1800px it becomes a normal-flow row above the banner content (position:relative keeps it painting above the absolute backdrop/scrim), so it can never overlap the eyebrow text or the cover thumbnail as the page narrows */ .cd-banner-admin { position: absolute; top: 20px; right: 20px; z-index: 1; } @media (max-width: 1799.98px) { .cd-banner-admin { position: relative; top: auto; right: auto; padding: 10px 20px 0; } /* the admin row now supplies the banner's top spacing; don't double it up with the content row's own 20px top padding (anonymous pages keep the full 20px) */ .cd-banner-admin + .cd-banner-fg { padding-top: 4px; } } .cd-btn-ghost { display: inline-block; font-family: var(--cd-body-font); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; padding: 8px 14px; background: rgba(244,239,227,0.1); border: 1px solid rgba(244,239,227,0.32); color: var(--noir-cream); text-decoration: none; cursor: pointer; } .cd-btn-ghost:hover { background: rgba(244,239,227,0.2); color: var(--noir-cream); text-decoration: none; } /* stat strip */ .cd-stat-strip { position: relative; background: var(--noir-ink-2); border-top: 1px solid #2e2a20; } .cd-stat-grid { padding: 0 20px; display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0 20px; } .cd-stat { padding: 18px 0; text-align: center; } .cd-stat-label { font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: #8a8266; margin-bottom: 6px; } .cd-stat-value { font-family: var(--cd-display); font-size: 25px; font-weight: 500; color: var(--noir-cream); display: flex; align-items: center; justify-content: center; gap: 8px; } .cd-stat-extra { color: #8a8266; font-size: 19px; } .cd-stat-thumb { fill: var(--noir-thumb); } /* stat cell that links somewhere (e.g. Recommended by -> #reviews) keeps the exact non-link appearance; declared after the paper-link rules so it wins */ .case-detail a.cd-stat-link, .case-detail a.cd-stat-link:hover { color: inherit; text-decoration: none; } /* ------------------------------------------------------------------ */ /* Page bands */ /* ------------------------------------------------------------------ */ .cd-body { max-width: 1120px; margin: 0 auto; padding: 46px 20px 0; } .cd-reviews-band { max-width: 1120px; margin: 0 auto; padding: 44px 20px 90px; } /* ------------------------------------------------------------------ */ /* Section heading rule */ /* fixed height on purpose: the underline of a 19px left-column head */ /* lines up with the underline of a 14px sidebar head */ /* ------------------------------------------------------------------ */ .cd-section-head { display: flex; align-items: flex-end; gap: 14px; height: 34px; box-sizing: border-box; padding-bottom: 8px; border-bottom: 2px solid var(--noir-ink); font-family: var(--cd-display); font-weight: 600; text-transform: uppercase; font-size: 19px; letter-spacing: 0.15em; } .cd-section-head-sm { font-size: 14px; letter-spacing: 0.16em; } .cd-section-head h2 { margin: 0; font: inherit; } .cd-section-head .cd-head-count { color: #8a8266; font-weight: 400; } .cd-section-head .cd-head-cta { font-size: 13.5px; font-weight: 600; letter-spacing: normal; text-transform: none; font-family: var(--cd-body-font); margin-left: auto; } /* ------------------------------------------------------------------ */ /* Dark tile + red button */ /* ------------------------------------------------------------------ */ .cd-tile { background: var(--noir-ink); color: var(--noir-cream-3); padding: 16px 24px; } .cd-tile a:not([class*="btn"]) { color: var(--noir-link-3); } .cd-tile a:not([class*="btn"]):hover { color: var(--noir-link-3); text-decoration: underline; } .cd-tile strong, .cd-tile b { color: var(--noir-cream); } .cd-btn { display: inline-block; background: var(--noir-red); color: #fff; font-family: var(--cd-display); font-size: 15px; font-weight: 500; letter-spacing: 0.1em; text-transform: uppercase; padding: 13px 24px; white-space: nowrap; text-decoration: none; border: none; cursor: pointer; } .cd-btn:hover { background: var(--noir-red-2); color: #fff; text-decoration: none; } /* download tile: text block must shrink (flex 1 1 0 / min-width 0) or a long subtitle pushes the button to a second line and tile heights stop matching */ .cd-download-tile { display: flex; gap: 20px; align-items: center; justify-content: space-between; flex-wrap: wrap; } .cd-download-text { flex: 1 1 0; min-width: 0; } .cd-download-tile .cd-btn { flex: none; } .cd-tile-title { font-family: var(--cd-display); font-size: 22px; font-weight: 500; letter-spacing: 0.01em; text-transform: uppercase; color: var(--noir-cream); } .cd-tile-sub { font-size: 14.5px; line-height: 1.5; color: var(--noir-cream-2); margin-top: 1px; } /* additional instructions tile */ .cd-instructions { padding: 22px 24px; font-size: 15.5px; line-height: 1.65; } .cd-instructions > :last-child { margin-bottom: 0; } /* ------------------------------------------------------------------ */ /* Sidebar rows (Case file / More details) */ /* ------------------------------------------------------------------ */ .cd-row { display: flex; justify-content: space-between; gap: 14px; padding: 11px 0; border-bottom: 1px solid var(--noir-rule); font-size: 14px; } .cd-row-label { color: var(--noir-muted); } .cd-row-value { text-align: right; } .cd-status-playable { color: var(--noir-green); font-weight: 600; } /* "(private)" marker from casePublishInfoString: use the palette red on paper */ .case-detail .textErrored { color: var(--noir-red); font-weight: 600; } .cd-row-sm { gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--noir-rule-2); font-size: 13.5px; } .cd-row-sm .cd-row-label { color: var(--noir-muted); } .cd-row-sm .cd-row-value { color: #2d2a20; } .cd-row:last-child, .cd-row-sm:last-child { border-bottom: none; } /* per-user tag chips (reuses the shared #userTagPills / caseUserTags.js wiring; the js toggles btn-success <-> btn-outline-secondary, which we restyle here) */ .case-detail .userTagPill { width: 30px; height: 30px; padding: 0; line-height: 1; font-size: 14px; border-radius: 0; border: 1px solid #c3bba8; background: transparent; color: var(--noir-muted); } .case-detail .userTagPill.btn-success { background: var(--noir-red); border-color: var(--noir-red); color: var(--noir-cream); } /* ------------------------------------------------------------------ */ /* Feature tiles */ /* ------------------------------------------------------------------ */ .cd-feature-grid { margin-top: 12px; display: grid; grid-template-columns: repeat(auto-fit, minmax(132px, 1fr)); gap: 8px; } .cd-feature-tile { display: flex; gap: 10px; align-items: center; padding: 10px 12px; background: var(--noir-tan); font-size: 13px; line-height: 1.35; color: #2d2a20; } .cd-feature-tile img { flex: none; width: 20px; height: 20px; } /* what's new: rendered markdown (usually a