/** * Scavenger Hunt Platform — Frontend Stylesheet * Mobile-first. All styles scoped to .shp-wrap or .shp- prefix. * Colors/fonts use CSS variables set by dynamic output in . */ /* ================================================================ Base Reset (scoped) ================================================================ */ .shp-wrap *, .shp-wrap *::before, .shp-wrap *::after { box-sizing: border-box; } .shp-wrap { font-family: var(--shp-font, "Montserrat", sans-serif); font-weight: var(--shp-body-weight, 400); color: var(--shp-dark-text, #1f2933); max-width: var(--shp-max-width, 1200px); margin: 0 auto; padding: 1rem; } /* ================================================================ Typography ================================================================ */ .shp-page-title { font-weight: var(--shp-heading-weight, 700); font-size: clamp(1.5rem, 4vw, 2.25rem); margin: 0 0 0.5rem; line-height: 1.2; } .shp-page-subtitle { font-size: 1rem; color: var(--shp-muted-text, #6b7280); margin: 0 0 1.5rem; } .shp-section-title { font-weight: var(--shp-heading-weight, 700); font-size: 1.25rem; margin: 0 0 1rem; } /* ================================================================ Cards ================================================================ */ .shp-card { background: var(--shp-card-bg, #ffffff); border-radius: var(--shp-card-radius, 12px); border: 1px solid var(--shp-border, #e5e7eb); padding: 1.25rem; box-shadow: 0 1px 4px rgba(0,0,0,.06); } /* ================================================================ Buttons ================================================================ */ .shp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; padding: .65rem 1.25rem; border-radius: var(--shp-btn-radius, 8px); font-family: var(--shp-font, "Montserrat", sans-serif); font-weight: 600; font-size: 0.95rem; cursor: pointer; border: 2px solid transparent; text-decoration: none; transition: background .15s, color .15s, opacity .15s; min-height: 44px; /* tap target */ line-height: 1; white-space: nowrap; } .shp-btn--block { display: flex; width: 100%; } .shp-btn--primary { background: var(--shp-primary, #1866a8); color: var(--shp-light-text, #ffffff); border-color: var(--shp-primary, #1866a8); } .shp-btn--primary:hover { opacity: .88; } .shp-btn--secondary { background: transparent; color: var(--shp-primary, #1866a8); border-color: var(--shp-primary, #1866a8); } .shp-btn--secondary:hover { background: var(--shp-primary, #1866a8); color: var(--shp-light-text, #ffffff); } .shp-btn--danger { background: var(--shp-error, #dc2626); color: #fff; border-color: var(--shp-error, #dc2626); } .shp-btn--danger:hover { opacity: .88; } .shp-btn--success { background: var(--shp-success, #16a34a); color: #fff; border-color: var(--shp-success, #16a34a); } .shp-btn--ghost { background: transparent; color: var(--shp-muted-text, #6b7280); border-color: var(--shp-border, #e5e7eb); } .shp-btn--ghost:hover { border-color: var(--shp-primary); color: var(--shp-primary); } .shp-btn--small { padding: .4rem .85rem; font-size: .85rem; min-height: 36px; } .shp-btn:disabled, .shp-btn[disabled] { opacity: .45; cursor: not-allowed; pointer-events: none; } /* ================================================================ Inputs & Forms ================================================================ */ .shp-input, .shp-wrap input[type="text"], .shp-wrap input[type="number"], .shp-wrap input[type="date"], .shp-wrap select, .shp-wrap textarea { display: block; width: 100%; padding: .65rem .85rem; border: 1.5px solid var(--shp-border, #e5e7eb); border-radius: var(--shp-input-radius, 6px); font-family: var(--shp-font, "Montserrat", sans-serif); font-size: 1rem; color: var(--shp-dark-text, #1f2933); background: #fff; appearance: none; min-height: 44px; transition: border-color .15s; } .shp-input:focus, .shp-wrap input[type="text"]:focus, .shp-wrap select:focus, .shp-wrap textarea:focus { outline: none; border-color: var(--shp-primary, #1866a8); box-shadow: 0 0 0 3px rgba(24, 102, 168, .15); } .shp-input--readonly, .shp-answer-input--readonly { background: var(--shp-bg, #f9fafb); color: var(--shp-muted-text, #6b7280); border-style: dashed; } .shp-label { display: block; font-weight: 600; font-size: .9rem; margin-bottom: .35rem; } /* ================================================================ Badges ================================================================ */ .shp-badge { display: inline-block; padding: .2rem .55rem; border-radius: 999px; font-size: .75rem; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; } .shp-badge--free { background: #d1fae5; color: #065f46; } .shp-badge--paid { background: #e0f2fe; color: #0369a1; } .shp-badge--activated { background: #e0e7ff; color: #3730a3; } .shp-badge--available { background: #f3f4f6; color: #374151; } .shp-badge--in-progress{ background: #fef9c3; color: #854d0e; } .shp-badge--submitted { background: #dbeafe; color: #1e40af; } .shp-badge--completed { background: #d1fae5; color: #065f46; } .shp-badge--refunded { background: #fef3c7; color: #92400e; } .shp-badge--revoked { background: #fee2e2; color: #991b1b; } .shp-badge--pending-review { background: #fde8d8; color: #9a3412; } .shp-badge--correct { background: #d1fae5; color: #065f46; } .shp-badge--incorrect { background: #fee2e2; color: #991b1b; } .shp-badge--manually-corrected { background: #ede9fe; color: #5b21b6; } .shp-badge--saved { background: #d1fae5; color: #065f46; } .shp-badge--unsaved { background: #f3f4f6; color: #6b7280; } .shp-badge--save-failed{ background: #fee2e2; color: #991b1b; } .shp-badge--required { background: var(--shp-error); color: #fff; } .shp-badge--difficulty-easy { background: #d1fae5; color: #065f46; } .shp-badge--difficulty-medium { background: #fef9c3; color: #854d0e; } .shp-badge--difficulty-hard { background: #fee2e2; color: #991b1b; } .shp-badge--draft { background: #f3f4f6; color: #374151; } .shp-badge--publish { background: #d1fae5; color: #065f46; } .shp-badge--pending { background: #fef9c3; color: #854d0e; } /* ================================================================ Notices ================================================================ */ .shp-notice { padding: .85rem 1rem; border-radius: var(--shp-card-radius, 12px); margin-bottom: 1rem; font-size: .95rem; border-left: 4px solid transparent; } .shp-notice--info { background: #eff6ff; border-color: #3b82f6; color: #1e3a5f; } .shp-notice--success { background: #f0fdf4; border-color: var(--shp-success); color: #14532d; } .shp-notice--warning { background: #fffbeb; border-color: var(--shp-warning); color: #78350f; } .shp-notice--error { background: #fef2f2; border-color: var(--shp-error); color: #7f1d1d; } /* ================================================================ Page Header ================================================================ */ .shp-page-header { margin-bottom: var(--shp-spacing, 2rem); } /* ================================================================ Find Hunts — Grid ================================================================ */ .shp-filter-bar { display: flex; flex-wrap: wrap; gap: .5rem; margin-bottom: 1.5rem; align-items: center; } .shp-filter-bar .shp-input { width: auto; min-width: 160px; } .shp-hunt-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } .shp-hunt-card { background: var(--shp-card-bg, #fff); border-radius: var(--shp-card-radius, 12px); border: 1px solid var(--shp-border, #e5e7eb); overflow: hidden; display: flex; flex-direction: column; box-shadow: 0 2px 6px rgba(0,0,0,.06); transition: box-shadow .2s; } .shp-hunt-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,.1); } .shp-hunt-card__image { position: relative; overflow: hidden; aspect-ratio: 16/9; } .shp-hunt-card__image img { width: 100%; height: 100%; object-fit: cover; display: block; } .shp-hunt-card__image .shp-badge { position: absolute; top: .75rem; right: .75rem; } .shp-hunt-card__body { padding: 1rem 1.25rem; flex: 1; } .shp-hunt-card__title { font-size: 1.1rem; font-weight: 700; margin: 0 0 .4rem; } .shp-hunt-card__title a { color: var(--shp-dark-text); text-decoration: none; } .shp-hunt-card__title a:hover { color: var(--shp-primary); } .shp-hunt-card__subtitle { font-size: .9rem; color: var(--shp-muted-text); margin: 0 0 .75rem; } .shp-hunt-card__meta { display: flex; flex-wrap: wrap; gap: .4rem; font-size: .8rem; color: var(--shp-muted-text); align-items: center; } .shp-meta-item { display: inline-flex; align-items: center; } .shp-hunt-card__footer { padding: .75rem 1.25rem 1rem; border-top: 1px solid var(--shp-border); } /* ================================================================ Hunt Details ================================================================ */ .shp-hunt-hero { background-size: cover; background-position: center; border-radius: var(--shp-card-radius); overflow: hidden; margin-bottom: 1.5rem; min-height: 240px; display: flex; align-items: flex-end; } .shp-hunt-hero__overlay { background: linear-gradient(to top, rgba(0,0,0,.7) 0%, rgba(0,0,0,.2) 70%, transparent 100%); width: 100%; padding: 1.5rem; color: #fff; } .shp-hunt-hero__title { font-size: clamp(1.4rem, 5vw, 2.5rem); font-weight: 700; margin: 0; color: #fff; } .shp-hunt-hero__subtitle { margin: .5rem 0 0; font-size: 1rem; color: rgba(255,255,255,.85); } .shp-hunt-details__layout { display: flex; flex-direction: column; gap: 1.25rem; } .shp-hunt-details__main { display: flex; flex-direction: column; gap: 1.25rem; } .shp-meta-grid { display: grid; grid-template-columns: 1fr 1fr; gap: .75rem; } .shp-meta-label { font-size: .8rem; font-weight: 600; text-transform: uppercase; letter-spacing: .05em; color: var(--shp-muted-text); display: block; } .shp-meta-value { display: block; font-size: .95rem; font-weight: 600; margin-top: .15rem; } .shp-cta-price { font-size: 1.5rem; font-weight: 700; color: var(--shp-primary); margin-bottom: 1rem; } /* ================================================================ My Hunts ================================================================ */ .shp-section { margin-bottom: var(--shp-spacing, 2rem); } .shp-section-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; } .shp-section--highlight { background: var(--shp-bg, #f9fafb); padding: 1rem; border-radius: var(--shp-card-radius); } .shp-hunt-list { display: flex; flex-direction: column; gap: 1rem; } .shp-hunt-card--active { border-left: 4px solid var(--shp-primary); } .shp-hunt-card--completed { border-left: 4px solid var(--shp-success); } .shp-hunt-card--available { border-left: 4px solid var(--shp-accent); } .shp-hunt-card__title-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .shp-hunt-card__leader { font-size: .88rem; color: var(--shp-muted-text); margin: .25rem 0; } .shp-hunt-card__meta-line { font-size: .85rem; color: var(--shp-muted-text); margin: .25rem 0; } .shp-result-summary { display: flex; flex-wrap: wrap; gap: .75rem; align-items: center; margin-top: .5rem; } .shp-result-score { font-weight: 700; font-size: 1rem; } .shp-result-xp { color: var(--shp-accent); font-weight: 700; } /* Progress */ .shp-progress-bar-wrap { margin-top: .75rem; } .shp-progress-bar { height: 8px; background: var(--shp-border); border-radius: 4px; overflow: hidden; } .shp-progress-bar__fill { height: 100%; background: var(--shp-primary); transition: width .4s; } .shp-progress-text { font-size: .82rem; color: var(--shp-muted-text); margin-top: .3rem; display: block; } /* ================================================================ Start / Resume Hunt — PRIMARY MOBILE VIEW ================================================================ */ .shp-start-hunt { padding: 0; } .shp-hunt-header { background: var(--shp-primary, #1866a8); color: var(--shp-light-text, #fff); padding: 1.25rem 1rem; border-radius: 0 0 var(--shp-card-radius) var(--shp-card-radius); margin-bottom: 1rem; position: sticky; top: 0; z-index: 100; } .shp-hunt-title { font-size: 1.15rem; font-weight: 700; color: #fff; margin: 0 0 .75rem; } .shp-instructions-panel { margin: 0 .75rem 1rem; padding: .75rem 1rem; background: var(--shp-card-bg); border-radius: var(--shp-card-radius); border: 1px solid var(--shp-border); font-size: .9rem; } .shp-instructions-panel summary { font-weight: 600; cursor: pointer; } /* Question Cards */ .shp-questions-list { display: flex; flex-direction: column; gap: 1rem; padding: 0 .75rem; } .shp-question-card { background: var(--shp-card-bg, #fff); border-radius: var(--shp-card-radius, 12px); border: 2px solid var(--shp-border, #e5e7eb); padding: 1rem; transition: border-color .2s; } .shp-question-card--saved { border-color: var(--shp-success, #16a34a); } .shp-question-card--unsaved { border-color: var(--shp-border); } .shp-question-card__header { display: flex; align-items: center; gap: .5rem; margin-bottom: .6rem; flex-wrap: wrap; } .shp-question-number { font-weight: 700; font-size: .85rem; color: var(--shp-primary); } .shp-question-status-badge { margin-left: auto; } .shp-question-label { font-weight: 700; font-size: 1rem; margin: 0 0 .5rem; } .shp-question-text { font-size: .95rem; margin: 0 0 .75rem; line-height: 1.5; } .shp-answer-hint { font-size: .85rem; color: var(--shp-muted-text); margin: 0 0 .5rem; } .shp-hint-panel { font-size: .85rem; color: var(--shp-muted-text); margin-bottom: .75rem; } .shp-hint-panel summary { font-weight: 600; cursor: pointer; color: var(--shp-primary); } .shp-hint-text { padding-top: .4rem; } .shp-answer-field-wrap { margin-top: .75rem; } .shp-question-actions { display: flex; gap: .5rem; margin-top: .75rem; flex-wrap: wrap; } .shp-answer-feedback { margin-top: .4rem; font-size: .85rem; min-height: 1.2em; } .shp-answer-feedback.success { color: var(--shp-success); } .shp-answer-feedback.error { color: var(--shp-error); } .shp-answer-feedback.saving { color: var(--shp-muted-text); } /* Status messages */ .shp-status { display: inline-flex; align-items: center; gap: .25rem; font-size: .8rem; font-weight: 700; padding: .2rem .5rem; border-radius: 4px; } .shp-status--saved { background: #d1fae5; color: #065f46; } .shp-status--unsaved { background: #f3f4f6; color: #6b7280; } .shp-status--saving { background: #eff6ff; color: #1e40af; } .shp-status--edited { background: #fef9c3; color: #854d0e; } .shp-status--save-failed { background: #fee2e2; color: #991b1b; } /* Submit section */ .shp-submit-section { padding: 1.25rem .75rem 2rem; display: flex; flex-direction: column; gap: .75rem; margin-top: 1.5rem; } .shp-submit-summary { font-size: .95rem; color: var(--shp-muted-text); } .shp-submit-warning { font-size: .82rem; color: var(--shp-error); text-align: center; margin: 0; } /* Modal */ .shp-modal { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: flex-end; /* slides up from bottom on mobile */ } .shp-modal[hidden] { display: none; } .shp-modal__backdrop { position: absolute; inset: 0; background: rgba(0,0,0,.5); } .shp-modal__content { position: relative; background: var(--shp-card-bg, #fff); border-radius: var(--shp-card-radius) var(--shp-card-radius) 0 0; padding: 1.5rem 1.25rem 2rem; width: 100%; max-height: 80vh; overflow-y: auto; } .shp-modal__title { font-size: 1.25rem; font-weight: 700; margin: 0 0 1rem; } .shp-modal__summary { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: 1rem; } .shp-modal__stat { text-align: center; padding: .75rem; background: var(--shp-bg); border-radius: 8px; } .shp-modal__stat-label { font-size: .78rem; font-weight: 600; color: var(--shp-muted-text); display: block; } .shp-modal__stat-value { font-size: 1.5rem; font-weight: 700; display: block; margin-top: .25rem; } .shp-modal__stat-value--warn { color: var(--shp-error); } .shp-modal__warning { font-size: .88rem; color: var(--shp-muted-text); margin-bottom: 1.25rem; } .shp-modal__actions { display: flex; flex-direction: column; gap: .75rem; } .shp-modal__feedback { font-size: .88rem; margin-top: .75rem; } /* ================================================================ Hunt Results ================================================================ */ .shp-results-summary-card { text-align: center; } .shp-results-hunt-title { font-size: 1.35rem; font-weight: 700; margin-bottom: .25rem; } .shp-results-leader { color: var(--shp-muted-text); margin-bottom: 1rem; font-size: .9rem; } .shp-results-stats-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin: 1.25rem 0; } .shp-stat-block { text-align: center; padding: .75rem; background: var(--shp-bg); border-radius: 10px; } .shp-stat-block__value { display: block; font-size: 1.75rem; font-weight: 700; } .shp-stat-block--xp .shp-stat-block__value { color: var(--shp-accent); } .shp-stat-block__label { display: block; font-size: .8rem; color: var(--shp-muted-text); margin-top: .25rem; } .shp-results-score-big { color: var(--shp-primary); } .shp-results-meta { display: flex; flex-wrap: wrap; gap: .75rem; justify-content: center; font-size: .85rem; color: var(--shp-muted-text); margin: 1rem 0; } .shp-results-review-section { border-top: 1px solid var(--shp-border); padding-top: 1rem; margin-top: 1rem; } .shp-results-review-text { font-size: .9rem; color: var(--shp-muted-text); margin-bottom: .75rem; } .shp-review-request-form { display: flex; flex-direction: column; gap: .65rem; } .shp-review-note { resize: vertical; } /* ================================================================ Profile Stats ================================================================ */ .shp-stat-cards-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1rem; margin-bottom: 2rem; } .shp-stat-card { background: var(--shp-card-bg, #fff); border-radius: var(--shp-card-radius, 12px); border: 1px solid var(--shp-border); padding: 1.25rem 1rem; text-align: center; } .shp-stat-card__value { font-size: 2rem; font-weight: 700; color: var(--shp-primary); display: block; } .shp-stat-card__label { font-size: .8rem; color: var(--shp-muted-text); margin-top: .3rem; display: block; } .shp-stat-card--xp .shp-stat-card__value { color: var(--shp-accent); } .shp-stat-card--credits .shp-stat-card__value { color: var(--shp-success); } .shp-stat-card--warn .shp-stat-card__value { color: var(--shp-warning); } .shp-stats-private-note { font-size: .85rem; color: var(--shp-muted-text); } .shp-activity-list { display: flex; flex-direction: column; gap: .75rem; } .shp-activity-row { display: flex; justify-content: space-between; align-items: center; padding: .75rem 1rem; background: var(--shp-card-bg); border: 1px solid var(--shp-border); border-radius: 8px; gap: .5rem; flex-wrap: wrap; } .shp-activity-row__info { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; } .shp-activity-hunt-name { font-weight: 600; } /* ================================================================ Credits ================================================================ */ .shp-credits-balance-card { text-align: center; margin-bottom: 1.5rem; } .shp-credits-balance-value { font-size: 3rem; font-weight: 700; color: var(--shp-success); } .shp-credits-balance-label { font-size: .9rem; color: var(--shp-muted-text); margin: .25rem 0; } .shp-credits-private-note { font-size: .82rem; color: var(--shp-muted-text); margin-top: .5rem; } .shp-transaction-list { display: flex; flex-direction: column; gap: .5rem; } .shp-transaction-row { display: flex; justify-content: space-between; align-items: flex-start; padding: .75rem 1rem; background: var(--shp-card-bg); border: 1px solid var(--shp-border); border-radius: 8px; gap: .75rem; } .shp-transaction-row__info { flex: 1; display: flex; flex-direction: column; gap: .2rem; } .shp-tx-type { font-weight: 600; font-size: .9rem; } .shp-tx-note { font-size: .82rem; color: var(--shp-muted-text); } .shp-tx-date { font-size: .8rem; color: var(--shp-muted-text); } .shp-tx-expires { font-size: .78rem; color: var(--shp-warning); } .shp-transaction-row__amount { font-weight: 700; font-size: 1rem; white-space: nowrap; } .shp-tx--positive .shp-transaction-row__amount { color: var(--shp-success); } .shp-tx--negative .shp-transaction-row__amount { color: var(--shp-error); } .shp-tx--inactive { opacity: .6; } /* ================================================================ Leader Views ================================================================ */ .shp-leader-hunt-list { display: flex; flex-direction: column; gap: 1rem; } .shp-leader-hunt-row { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: 1rem; } .shp-leader-hunt-row__info { flex: 1; } .shp-leader-hunt-row__actions { display: flex; gap: .5rem; flex-shrink: 0; flex-wrap: wrap; } .shp-leader-hunt-row__meta { display: flex; flex-wrap: wrap; gap: .4rem; align-items: center; margin-top: .5rem; font-size: .82rem; } .shp-review-list, .shp-submission-list { display: flex; flex-direction: column; gap: .75rem; } .shp-review-row, .shp-submission-row { display: flex; justify-content: space-between; align-items: flex-start; flex-wrap: wrap; gap: .75rem; } .shp-review-row__info, .shp-submission-row__info { flex: 1; display: flex; flex-direction: column; gap: .25rem; font-size: .9rem; } .shp-review-note { font-size: .82rem; color: var(--shp-muted-text); font-style: italic; } /* Review Attempt */ .shp-back-link { font-size: .85rem; color: var(--shp-primary); display: inline-block; margin-bottom: .75rem; text-decoration: none; } .shp-back-link:hover { text-decoration: underline; } .shp-review-meta { margin-bottom: 1.5rem; } .shp-review-meta p { margin: .25rem 0; font-size: .9rem; } .shp-review-questions { display: flex; flex-direction: column; gap: 1.25rem; margin-bottom: 1.5rem; } .shp-review-question { border-left: 4px solid var(--shp-border); } .shp-review-question--correct { border-left-color: var(--shp-success); } .shp-review-question--incorrect { border-left-color: var(--shp-error); } .shp-review-question--corrected { border-left-color: var(--shp-accent); } .shp-review-question--unanswered { border-left-color: var(--shp-border); } .shp-review-question__header { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin-bottom: .75rem; } .shp-review-result-badge { margin-left: auto; } .shp-review-submitted-answer { background: var(--shp-bg); padding: .6rem .85rem; border-radius: 6px; margin: .5rem 0; font-size: .9rem; } .shp-answer-display { font-weight: 600; margin-left: .4rem; } .shp-correction-note { font-size: .82rem; color: var(--shp-muted-text); font-style: italic; } .shp-review-correction-controls { display: flex; flex-direction: column; gap: .5rem; margin-top: .75rem; } .shp-review-correction-controls .shp-btn { align-self: flex-start; } .shp-correction-note-input { max-width: 400px; } .shp-checkbox-label { font-size: .85rem; display: flex; align-items: flex-start; gap: .4rem; } .shp-review-unanswered { font-size: .85rem; color: var(--shp-muted-text); font-style: italic; } .shp-review-feedback { font-size: .85rem; margin-top: .4rem; } .shp-review-actions { margin-top: 1.5rem; } .shp-recalculate-result { margin-top: .75rem; font-size: .9rem; } /* ================================================================ Pagination ================================================================ */ .shp-pagination { margin-top: 1.5rem; display: flex; gap: .4rem; flex-wrap: wrap; } .shp-pagination .page-numbers { padding: .4rem .75rem; border: 1.5px solid var(--shp-border); border-radius: var(--shp-btn-radius); color: var(--shp-primary); text-decoration: none; font-size: .88rem; } .shp-pagination .current { background: var(--shp-primary); color: #fff; border-color: var(--shp-primary); } /* ================================================================ Empty States ================================================================ */ .shp-empty-state { text-align: center; padding: 2rem 1rem; color: var(--shp-muted-text); font-size: .95rem; } /* ================================================================ Prose (WYSIWYG content) ================================================================ */ .shp-prose { font-size: .95rem; line-height: 1.65; } .shp-prose p { margin: 0 0 .85rem; } .shp-prose ul, .shp-prose ol { padding-left: 1.5rem; margin-bottom: .85rem; } /* ================================================================ RESPONSIVE — Tablet (≥640px) ================================================================ */ @media (min-width: 640px) { .shp-wrap { padding: 1.5rem; } .shp-hunt-grid { grid-template-columns: repeat(2, 1fr); } .shp-hunt-details__layout { flex-direction: row; align-items: flex-start; } .shp-hunt-details__main { flex: 2; } .shp-hunt-details__sidebar { flex: 0 0 260px; position: sticky; top: 80px; } .shp-stat-cards-grid { grid-template-columns: repeat(3, 1fr); } .shp-results-stats-grid { grid-template-columns: repeat(3, 1fr); } .shp-meta-grid { grid-template-columns: repeat(3, 1fr); } .shp-modal { align-items: center; } .shp-modal__content { border-radius: var(--shp-card-radius); max-width: 500px; margin: 0 auto; } } /* ================================================================ RESPONSIVE — Desktop (≥1024px) ================================================================ */ @media (min-width: 1024px) { .shp-wrap { padding: 2rem; } .shp-hunt-grid { grid-template-columns: repeat(3, 1fr); } .shp-stat-cards-grid { grid-template-columns: repeat(4, 1fr); } } /* ================================================================ Accessibility — Focus visible ================================================================ */ .shp-btn:focus-visible, .shp-input:focus-visible, .shp-wrap a:focus-visible { outline: 3px solid var(--shp-primary); outline-offset: 2px; }