/* Riddle Up — sitewide design tokens & shared component styles. Loaded on every page (see layouts/content_right.blade.php), after the base template stylesheet so it can build on the template's own theme variables. Two things live here rather than in a per-page file: 1. A handful of dark-theme-safe "surface" tokens. The base template's `--white`/`--black` are fixed color primitives that are never redefined for dark mode (see public/css/ltr/all.min.css), so they must not be used for card/panel backgrounds. `--body-color-rgb` and `--border-color` ARE redefined per theme, so low-opacity overlays built from them adapt automatically between themes. 2. Styling for the riddle-section / riddle-card / featured-riddle Blade components, which are shared across the homepage, riddle listing, and riddle detail pages — component styles belong here, not in a single page's stylesheet, otherwise the other pages that reuse the component render it unstyled. */ :root { --surface-bg: var(--white); --surface-muted-bg: rgba(var(--body-color-rgb), .04); --surface-divider: rgba(var(--body-color-rgb), .08); --surface-hover-shadow: 0 .75rem 1.5rem rgba(var(--body-color-rgb), .12); } /* `html[data-color-theme="dark"]` (a type selector + an attribute selector) is deliberately more specific than the bare `:root` above — `:root` and a lone `[data-color-theme="dark"]` attribute selector both carry specificity (0,1,0) and both match the same element, which left the winner depending on stylesheet order and let --surface-bg resolve to white even with dark mode active. */ html[data-color-theme="dark"] { --surface-bg: #2c2d33; } /* ---- Section header row shared by every grouped/listing page ---- */ .hp-section { margin-bottom: var(--spacer-4); } .hp-section--tint { background: rgba(var(--indigo-rgb), .045); border: 1px solid rgba(var(--indigo-rgb), .12); border-radius: 1rem; padding: 1.5rem 1.5rem .25rem; } .hp-section--plain { padding: 0 0 .25rem; } .hp-section-header { margin-bottom: 1.25rem; } .hp-section-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.25rem; height: 2.25rem; flex-shrink: 0; border-radius: .75rem; background: rgba(var(--indigo-rgb), .12); color: var(--indigo); font-size: 1.05rem; } .hp-section-title { letter-spacing: -.01em; } .hp-section-more { color: var(--indigo); } .hp-section-more:hover { color: var(--indigo); text-decoration: underline !important; } /* ---- Featured riddle cards (Riddle of the Day / Editor's Pick / Challenge) ---- */ .featured-riddle-card { position: relative; overflow: hidden; border-radius: 1.1rem; background: var(--surface-bg); transition: box-shadow .2s ease, transform .2s ease; } .featured-riddle-card:hover { box-shadow: var(--surface-hover-shadow) !important; transform: translateY(-2px); } .featured-riddle-card::before { content: ""; position: absolute; inset: 0 0 auto 0; height: 4px; } .featured-riddle-card--amber { background: linear-gradient(135deg, rgba(var(--warning-rgb), .12), var(--surface-bg) 60%); } .featured-riddle-card--amber::before { background: rgb(var(--warning-rgb)); } .featured-riddle-card--indigo { background: linear-gradient(135deg, rgba(var(--indigo-rgb), .12), var(--surface-bg) 60%); } .featured-riddle-card--indigo::before { background: var(--indigo); } .featured-riddle-card--teal { background: linear-gradient(135deg, rgba(var(--teal-rgb), .14), var(--surface-bg) 60%); } .featured-riddle-card--teal::before { background: rgb(var(--teal-rgb)); } /* ---- Riddle cards (homepage, riddle listing, and riddle detail pages) ---- */ .riddle-card { background: var(--surface-bg); border: 1px solid var(--border-color); border-radius: .9rem; transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; } .riddle-card::before { content: ""; position: absolute; inset: 0 auto 0 0; width: 4px; border-radius: .9rem 0 0 .9rem; background: rgba(var(--indigo-rgb), .35); } .riddle-card[data-difficulty="easy"]::before { background: rgb(var(--success-rgb)); } .riddle-card[data-difficulty="medium"]::before { background: rgb(var(--warning-rgb)); } .riddle-card[data-difficulty="hard"]::before { background: rgb(var(--danger-rgb)); } .riddle-card:hover { transform: translateY(-3px); box-shadow: var(--surface-hover-shadow); border-color: rgba(var(--indigo-rgb), .35); } .riddle-card .btn-outline-indigo { transition: background-color .15s ease, color .15s ease; } .riddle-card:hover .btn-outline-indigo { background: var(--indigo); color: var(--white); border-color: var(--indigo); } @media (max-width: 575.98px) { .hp-section--tint { padding: 1.25rem 1rem .25rem; } }