/* Shockholm2026 — project overrides on top of Pico.css * * Pico is loaded first (pico.min.css); this file customizes it. * The PALETTE lives here as CSS variables. To apply a custom color scheme * later (e.g. picked from a reference image), edit ONLY the values in the * :root block below — no structural changes needed elsewhere. * * Pico's own theming variables are documented at: * https://picocss.com/docs/css-variables */ :root { /* --- Project palette — light mode --- */ --sh-primary: #2b6cb0; --sh-primary-hover: #245a96; --sh-accent: #d97706; --sh-success: #16a34a; --sh-danger: #dc2626; --sh-bg: #fafafa; --sh-surface: #ffffff; --sh-text: #1f2937; --sh-muted: #6b7280; --sh-border: #e5e7eb; /* --- Map project palette onto Pico's variables --- */ --pico-primary: var(--sh-primary); --pico-primary-hover: var(--sh-primary-hover); --pico-primary-background: var(--sh-primary); --pico-primary-hover-background: var(--sh-primary-hover); /* Slightly tighter container for a mobile-first single-event site */ --pico-spacing: 1rem; } /* --- Dark mode overrides --- */ [data-theme="dark"] { --sh-bg: #0f172a; --sh-surface: #1e293b; --sh-text: #f1f5f9; --sh-muted: #94a3b8; --sh-border: #334155; } /* Dark mode: component colour overrides for hardcoded light values */ [data-theme="dark"] .flash.error { background: #450a0a; color: #fca5a5; } [data-theme="dark"] .flash.success { background: #052e16; color: #86efac; } [data-theme="dark"] .flash.warning { background: #431407; color: #fdba74; } [data-theme="dark"] .badge-status.badge-pending { background: #451a03; color: #fcd34d; } [data-theme="dark"] .badge-status.badge-approved { background: #052e16; color: #6ee7b7; } [data-theme="dark"] .badge-status.badge-rejected { background: #450a0a; color: #fca5a5; } [data-theme="dark"] .stat-card--alert { border-color: #7f1d1d; background: #1c0606; } [data-theme="dark"] .stat-card--alert .stat-card__value { color: #fca5a5; } [data-theme="dark"] .photo-card__thumb { background: #0f172a; } [data-theme="dark"] .phase-upload { background: #0c1a2e; border-color: #3b82f6; color: #93c5fd; } [data-theme="dark"] .phase-voting { background: #022c22; border-color: #22c55e; color: #86efac; } [data-theme="dark"] .phase-results { background: #1a0a2e; border-color: #a855f7; color: #d8b4fe; } [data-theme="dark"] .role-pill.role-admin { color: #fcd34d; } [data-theme="dark"] .role-pill.role-judge { color: #93c5fd; } [data-theme="dark"] .role-pill.role-user { color: #94a3b8; } [data-theme="dark"] .sort-btn { background: var(--sh-surface); color: var(--sh-muted); border-color: var(--sh-border); } [data-theme="dark"] .sort-btn:hover { color: var(--sh-text); border-color: #475569; } /* Cross-browser form field normalization — pins font values after Pico so Firefox/Safari UA defaults for url/number/select can't slip through. */ input, textarea, select { font-size: 1rem; font-family: inherit; line-height: inherit; } /* Theme toggle button — icon visibility driven by data-theme on */ .theme-toggle { background: none; border: none; cursor: pointer; color: var(--sh-muted); padding: 0.15rem 0.3rem; line-height: 1; display: flex; align-items: center; } .theme-toggle:hover { color: var(--sh-text); } .theme-toggle:focus { outline: none; box-shadow: none; } .theme-toggle:focus-visible { outline: 2px solid var(--sh-primary); border-radius: 3px; box-shadow: none; } .theme-toggle .icon-sun { display: none; } .theme-toggle .icon-moon { display: block; } [data-theme="dark"] .theme-toggle .icon-sun { display: block; } [data-theme="dark"] .theme-toggle .icon-moon { display: none; } /* Language switcher — sits next to the theme toggle, brand side of the nav */ .lang-switch { font-size: 0.8rem; color: var(--sh-muted); display: flex; align-items: center; } .lang-switch a { color: var(--sh-muted); text-decoration: none; } .lang-switch a:hover { color: var(--sh-text); } .lang-switch a.lang-switch__active { color: var(--sh-text); font-weight: bold; pointer-events: none; } /* Home page CTA — QR left, buttons right; two equal blocks */ .home-cta { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: stretch; margin-bottom: 1.5rem; } .home-cta__qr { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } .home-cta__buttons { display: flex; flex-direction: column; justify-content: center; gap: 0.75rem; } .home-cta__buttons a[role="button"] { text-align: center; } @media (max-width: 540px) { .home-cta { grid-template-columns: 1fr; } } /* Page chrome */ body { background: var(--sh-bg); color: var(--sh-text); } header.site-header { border-bottom: 1px solid var(--sh-border); margin-bottom: 1.5rem; position: relative; /* anchor for mobile nav dropdown */ } header.site-header nav { align-items: center; padding-top: 10px; padding-bottom: 10px; } header.site-header .brand { font-weight: 700; font-size: 1.25rem; text-decoration: none; color: var(--sh-text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 55vw; } header.site-header nav li a, header.site-header nav li span { white-space: nowrap; } /* Hamburger button — hidden on desktop */ .nav-hamburger { display: none; background: none; border: none; cursor: pointer; color: var(--sh-muted); padding: 0.15rem 0.3rem; line-height: 1; align-items: center; flex-shrink: 0; } .nav-hamburger:hover { color: var(--sh-text); } .nav-hamburger:focus { outline: none; box-shadow: none; } .nav-hamburger:focus-visible { outline: 2px solid var(--sh-primary); border-radius: 3px; } .nav-hamburger .icon-close { display: none; } .nav-hamburger .icon-menu { display: block; } .nav-hamburger[aria-expanded="true"] .icon-close { display: block; } .nav-hamburger[aria-expanded="true"] .icon-menu { display: none; } @media (max-width: 640px) { .nav-hamburger { display: flex; } /* Hide the right nav links; they slide in from a dropdown */ ul.nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; z-index: 200; background: var(--sh-surface); border-bottom: 2px solid var(--sh-border); flex-direction: column; padding: 0.5rem 1.25rem 0.75rem; margin: 0; gap: 0; box-shadow: 0 4px 12px rgba(0,0,0,0.08); } ul.nav-links.nav-open { display: flex; } ul.nav-links li { border-bottom: 1px solid var(--sh-border); padding: 0.55rem 0; } ul.nav-links li:last-child { border-bottom: none; } ul.nav-links li a, ul.nav-links li span { font-size: 1rem; } header.site-header .brand { font-size: 1rem; max-width: 48vw; } } /* Photo gallery grid — 2 columns mobile → 3 tablet → 4 desktop */ .photo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.75rem; } @media (min-width: 600px) { .photo-grid { grid-template-columns: repeat(3, 1fr); gap: 1rem; } } @media (min-width: 900px) { .photo-grid { grid-template-columns: repeat(4, 1fr); } } .photo-card { background: var(--sh-surface); border: 1px solid var(--sh-border); border-radius: var(--pico-border-radius, 0.375rem); overflow: hidden; display: flex; flex-direction: column; } .photo-card__thumb { display: block; width: 100%; aspect-ratio: 1; overflow: hidden; background: var(--sh-surface); } .photo-card__thumb img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity 0.15s; } .photo-card__thumb:hover img { opacity: 0.88; } .photo-card .photo-body { padding: 0.5rem 0.6rem; flex: 1; display: flex; flex-direction: column; gap: 0.25rem; font-size: 0.875rem; } /* Lightbox overlay */ #lb-overlay { display: none; position: fixed; inset: 0; background: rgba(0, 0, 0, 0.92); z-index: 9999; align-items: center; justify-content: center; } #lb-overlay.lb-open { display: flex; } #lb-img { max-width: min(92vw, calc(100vw - 8rem)); /* leave room for nav arrows */ max-height: 92vh; object-fit: contain; border-radius: 2px; box-shadow: 0 4px 32px rgba(0,0,0,0.5); display: block; pointer-events: none; /* clicks on image fall through to overlay → close */ } #lb-close, #lb-prev, #lb-next { position: fixed; background: none; border: none; color: rgba(255, 255, 255, 0.75); cursor: pointer; line-height: 1; padding: 0.5rem; z-index: 10000; transition: color 0.15s; } #lb-close:hover, #lb-prev:hover, #lb-next:hover { color: #fff; } #lb-close { top: 0.75rem; right: 1rem; font-size: 2.25rem; } #lb-prev, #lb-next { top: 50%; transform: translateY(-50%); font-size: 3.5rem; padding: 0.5rem 0.75rem; } #lb-prev { left: 0; } #lb-next { right: 0; } #lb-counter { position: fixed; bottom: 1rem; left: 50%; transform: translateX(-50%); color: rgba(255, 255, 255, 0.55); font-size: 0.875rem; pointer-events: none; } /* Badge for pinned/top photos in the post-cutoff gallery */ .badge-top { display: inline-block; font-size: 0.75rem; font-weight: 600; color: #fff; background: var(--sh-accent); padding: 0.1rem 0.5rem; border-radius: 999px; } .badge-top--pending { background: var(--sh-success); } .badge-top--reported { background: var(--sh-danger); } /* Votes-remaining indicator */ .votes-remaining { color: var(--sh-muted); font-size: 0.9rem; } /* Small helper for upload-slots text, flash messages, etc. */ .muted { color: var(--sh-muted); } .flash { padding: 0.75rem 1rem; border-radius: var(--pico-border-radius, 0.375rem); margin-bottom: 1rem; } .flash.error { background: #fef2f2; color: #991b1b; } .flash.success { background: #f0fdf4; color: #166534; } .flash.warning { background: #fffbeb; color: #92400e; } /* Photo status badges on dashboard activity feed */ .badge-status { display: inline-block; font-size: 0.72rem; font-weight: 600; padding: 0.1rem 0.45rem; border-radius: 999px; text-transform: uppercase; letter-spacing: 0.03em; } .badge-status.badge-pending { background: #fef3c7; color: #92400e; } .badge-status.badge-approved { background: #d1fae5; color: #065f46; } .badge-status.badge-rejected { background: #fee2e2; color: #991b1b; } /* Report toggle — subtle, keeps photo cards uncluttered */ .report-details { margin-top: 0.25rem; font-size: 0.8rem; color: var(--sh-muted); } .report-details summary { cursor: pointer; list-style: none; color: var(--sh-muted); } .report-details summary:hover { color: var(--sh-text); } .report-details textarea { width: 100%; } /* Phase transition banners */ .phase-banner { margin-bottom: 1.25rem; padding: 0.75rem 1rem; border-radius: var(--pico-border-radius, 0.375rem); border-left: 4px solid; } .phase-upload { background: #eff6ff; border-color: #3b82f6; color: #1e3a5f; } .phase-voting { background: #f0fdf4; border-color: #22c55e; color: #14532d; } .phase-results { background: #faf5ff; border-color: #a855f7; color: #4a1d96; } /* Role indicator — shown in the nav as plain coloured text (no pill background) */ .nav-username { display: none; } .role-pill { display: inline-block; font-size: 0.875rem; font-weight: 600; } .role-pill.role-admin { color: #92400e; } .role-pill.role-judge { color: #1d4ed8; } .role-pill.role-user { color: #6b7280; } /* Admin-authored free text (rules_body) — preserve the line breaks the organizer typed, matching the "line breaks are preserved" placeholder hint. */ .rules-body { white-space: pre-line; } /* Admin status tab — stats grid */ .stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; margin-bottom: 0.5rem; } @media (max-width: 640px) { .stats-grid { grid-template-columns: repeat(2, 1fr); } } .stat-card { background: var(--sh-surface); border: 1px solid var(--sh-border); border-radius: var(--pico-border-radius, 0.375rem); padding: 1rem 1.1rem 0.85rem; } a.stat-card--link { display: block; color: inherit; text-decoration: none; cursor: pointer; transition: border-color 0.15s; } a.stat-card--link:hover { border-color: var(--sh-primary); text-decoration: none; } .stat-card--alert { border-color: #fca5a5; background: #fff5f5; } .stat-card__value { font-size: 2rem; font-weight: 700; line-height: 1; color: var(--sh-text); margin-bottom: 0.2rem; } .stat-card--alert .stat-card__value { color: #b91c1c; } .stat-card__label { font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--sh-muted); } .stat-card__detail { font-size: 0.75rem; color: var(--sh-muted); margin-top: 0.4rem; } /* Admin tables: Pico defaults type=submit buttons to width:100%, which blows up small action buttons inside table cells. */ .admin-tab-panel td button { width: auto; } /* Admin sub-header tab bar */ .admin-subnav { background: var(--sh-surface); border-bottom: 1px solid var(--sh-border); margin-bottom: 1.5rem; overflow-x: auto; -webkit-overflow-scrolling: touch; } .admin-subnav__inner { display: flex; gap: 0; white-space: nowrap; padding: 0; } .admin-tab-link { display: inline-block; padding: 0.65rem 1.1rem; font-size: 0.875rem; color: var(--sh-muted); text-decoration: none; border-bottom: 2px solid transparent; transition: color 0.15s, border-color 0.15s; } .admin-tab-link:hover { color: var(--sh-text); text-decoration: none; } .admin-tab-link.active { color: var(--sh-primary); border-bottom-color: var(--sh-primary); font-weight: 500; } /* Admin subnav: role label (Admin / Judge) shown before the tab links */ .admin-subnav-role { display: inline-flex; align-items: center; padding: 0.65rem 1rem 0.65rem 0; font-size: 0.875rem; font-weight: 700; white-space: nowrap; border-bottom: 2px solid transparent; border-right: 1px solid var(--sh-border); margin-right: 0.25rem; letter-spacing: 0.02em; color: var(--sh-accent); } .admin-subnav-role.role-judge { color: #1d4ed8; } [data-theme="dark"] .admin-subnav-role.role-judge { color: #93c5fd; } @media (max-width: 640px) { .admin-subnav-role { display: none; } } /* Sortable table column header links */ .sort-th { color: inherit; text-decoration: none; white-space: nowrap; font-weight: 600; } .sort-th:hover { color: var(--sh-primary); text-decoration: none; } .sort-th--active { color: var(--sh-primary); } /* Admin subnav mobile toggle — hidden on desktop */ .admin-tab-toggle { display: none; width: 100%; background: none; border: none; cursor: pointer; padding: 0.7rem 1.1rem; font-size: 0.875rem; font-weight: 500; color: var(--sh-text); align-items: center; justify-content: space-between; gap: 0.5rem; text-align: left; } .admin-tab-toggle:focus { outline: none; box-shadow: none; } .admin-tab-toggle:focus-visible { outline: 2px solid var(--sh-primary); border-radius: 3px; } .admin-tab-chevron { flex-shrink: 0; transition: transform 0.2s ease; } .admin-subnav.subnav-open .admin-tab-chevron { transform: rotate(180deg); } @media (max-width: 640px) { .admin-subnav { overflow-x: visible; /* dropdown replaces horizontal scroll */ position: relative; } .admin-tab-toggle { display: flex; } .admin-subnav__inner { flex-direction: column; white-space: normal; } /* Links hidden by default on mobile; shown when dropdown is open */ .admin-subnav__inner .admin-tab-link { display: none; border-bottom: 1px solid var(--sh-border); border-bottom-width: 1px; /* override the 2px underline from desktop */ padding: 0.7rem 1.4rem; font-size: 0.9rem; } .admin-subnav__inner .admin-tab-link:first-of-type { border-top: 1px solid var(--sh-border); } /* Active tab: left accent bar instead of bottom border */ .admin-subnav__inner .admin-tab-link.active { border-bottom-color: var(--sh-border); border-left: 3px solid var(--sh-primary); padding-left: calc(1.4rem - 3px); } .admin-subnav.subnav-open .admin-subnav__inner .admin-tab-link { display: block; } } /* Admin tab panels — only the active one is visible */ .admin-tab-panel { display: none; } .admin-tab-panel.active { display: block; } /* Upload slots progress bar (upload page + dashboard) */ .upload-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; align-items: center; margin-bottom: 0.75rem; font-size: 0.875rem; } .upload-slots-bar { flex-basis: 100%; height: 4px; background: var(--sh-border); border-radius: 2px; overflow: hidden; } .upload-slots-bar__fill { height: 100%; background: var(--sh-primary); border-radius: 2px; transition: width 0.3s; } /* Dashboard action buttons — wrap cleanly on mobile */ .dash-actions { display: flex; flex-wrap: wrap; gap: 0.5rem; } .dash-actions a { margin: 0; } /* Gallery rank badges */ .badge-rank-1 { background: #f59e0b; color: #fff; } .badge-rank-2 { background: #9ca3af; color: #fff; } .badge-rank-3 { background: #d97706; color: #fff; } /* Gallery sort bar */ .sort-bar { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.75rem; flex-wrap: wrap; } .sort-label { font-size: 0.8rem; color: var(--sh-muted); margin-right: 0.1rem; } .sort-btn { display: inline-block; font-size: 0.8rem; padding: 0.2rem 0.65rem; border-radius: 999px; border: 1px solid var(--sh-border); background: var(--sh-surface); color: var(--sh-muted); text-decoration: none; transition: background 0.15s, color 0.15s, border-color 0.15s; } .sort-btn:hover { color: var(--sh-text); border-color: #d1d5db; text-decoration: none; } .sort-btn--active { background: var(--sh-primary); border-color: var(--sh-primary); color: #fff; font-weight: 500; } .sort-btn--active:hover { background: var(--sh-primary-hover); border-color: var(--sh-primary-hover); color: #fff; } /* Admin result box — invite / test link shown at top of Users tab */ .admin-result-box { margin-bottom: 1.5rem; padding: 1rem 1.25rem; border: 2px solid var(--pico-primary); border-radius: var(--pico-border-radius); background: var(--pico-card-background-color); } /* Tooltip — admin test-account links */ .tooltip-wrap { position: relative; display: inline-block; } .tooltip-wrap .tooltip { visibility: hidden; opacity: 0; width: 270px; background: #1e293b; color: #f8fafc; font-size: 0.8rem; line-height: 1.45; text-align: center; border-radius: 6px; padding: 0.5rem 0.75rem; position: absolute; z-index: 100; bottom: calc(100% + 8px); left: 50%; transform: translateX(-50%); transition: opacity 0.15s ease, transform 0.15s ease; pointer-events: none; white-space: normal; } .tooltip-wrap .tooltip::after { content: ''; position: absolute; top: 100%; left: 50%; margin-left: -5px; border: 5px solid transparent; border-top-color: #1e293b; } .tooltip-wrap:hover .tooltip, .tooltip-wrap:focus-within .tooltip { visibility: visible; opacity: 1; transform: translateX(-50%) translateY(-3px); } /* Per-photo share bar */ .like-bar { display: flex; align-items: center; margin-top: 0.5rem; } .like-btn { display: inline-flex; align-items: center; gap: 0.3rem; background: transparent; border: none; padding: 0.25rem 0.5rem 0.25rem 0; cursor: pointer; color: var(--sh-muted); font-size: 0.85rem; transition: color 0.15s; } .like-btn:hover { color: #e11d48; } .like-btn--active { color: #e11d48; } .share-bar { display: flex; gap: 0.4rem; margin-top: 0.5rem; align-items: center; } .share-btn { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 50%; border: 1px solid var(--pico-muted-border-color); background: transparent; color: var(--sh-muted); cursor: pointer; padding: 0; transition: background 0.15s, color 0.15s; text-decoration: none; font-size: 0.75rem; } .share-btn:hover { background: var(--pico-muted-border-color); color: var(--sh-text); } .share-btn--wa:hover { background: #dcfce7; color: #15803d; border-color: #86efac; } .share-btn--fb:hover { background: #dbeafe; color: #1d4ed8; border-color: #93c5fd; } .share-btn--copy:hover { background: var(--sh-surface); color: var(--sh-text); } /* Footer social icon links — no underline, icon sized to match surrounding text */ .footer-social-link { display: inline-flex; align-items: center; vertical-align: middle; text-decoration: none; line-height: 1; color: inherit; } .footer-social-link:hover { color: var(--sh-text); } /* Voting-open modal: Pico v2 sets dialog { height: inherit } which on a long page makes the dialog as tall as the document, centering the article far below the visible viewport. Pin it to the actual viewport height. */ #voting-open-modal { height: 100dvh; max-height: 100dvh; } @media (max-width: 640px) { #voting-open-modal > article { max-width: calc(100vw - 2rem); padding: 1.25rem 1rem; } } /* Cookie notice — informational only, no accept/reject needed (see /tos#cookies) */ .cookie-notice { position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 500; max-width: 640px; margin: 0 auto; display: flex; align-items: center; flex-wrap: wrap; gap: 0.75rem; padding: 0.85rem 1.1rem; background: var(--sh-surface); border: 1px solid var(--sh-border); border-radius: var(--pico-border-radius, 0.375rem); box-shadow: 0 2px 12px rgba(0, 0, 0, 0.15); } .cookie-notice p { margin: 0; flex: 1 1 auto; font-size: 0.85rem; color: var(--sh-muted); min-width: 220px; } .cookie-notice button { flex: 0 0 auto; width: auto; margin: 0; white-space: nowrap; } /* Occasional idle "shudder" — used on the home page QR code */ @keyframes shudder { 0% { transform: translate(0, 0) rotate(0deg); } 20% { transform: translate(-2px, 2px) rotate(-1deg); } 40% { transform: translate(-2px, -1px) rotate(1deg); } 60% { transform: translate(2px, 1px) rotate(0deg); } 80% { transform: translate(1px, -2px) rotate(-1deg); } 100% { transform: translate(0, 0) rotate(0deg); } } .js-shudder { display: inline-block; transform-origin: center; } .js-shudder.is-shuddering { animation: shudder 0.3s ease; }