/* ========================================================================= QR QUEST — DESIGN SYSTEM · Styl „Miejska Ekspedycja" ------------------------------------------------------------------------- Jeden plik do podpięcia w aplikacji. Wszystkie wartości są tokenami (CSS custom properties) w :root — zmiana motywu = nadpisanie zmiennych, bez dotykania komponentów. Motywy: dodaj klasę na lub , np.: (limonka + granat) (czerwień + navy) (turkus + rdza) Domyślnie (bez klasy) obowiązuje motyw „Ekspedycja" (pomarańcz + zieleń). Prefiks klas: .qq-* — nie koliduje z resztą aplikacji. ========================================================================= */ /* Fonty lokalne (offline PWA) — Archivo + IBM Plex Mono (Modern/ekspedycja), Baloo 2 + Fredoka (Fun/zabawny) oraz Cormorant Unicase + EB Garamond (Classic/nowoczesny). Wariacyjne = jeden plik na zakres wag; subsety latin + latin-ext. Pobrane z Google Fonts i zbundlowane w css/fonts/. NIE dodawaj @import zdalnego. */ @font-face{ font-family:'Cormorant Unicase'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/cormorantunicase-600-latinext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'Cormorant Unicase'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/cormorantunicase-600-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'EB Garamond'; font-style:normal; font-weight:400 700; font-display:swap; src:url('fonts/ebgaramond-var-latinext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'EB Garamond'; font-style:normal; font-weight:400 700; font-display:swap; src:url('fonts/ebgaramond-var-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'EB Garamond'; font-style:italic; font-weight:400 700; font-display:swap; src:url('fonts/ebgaramond-varitalic-latinext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'EB Garamond'; font-style:italic; font-weight:400 700; font-display:swap; src:url('fonts/ebgaramond-varitalic-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Baloo 2'; font-style:normal; font-weight:400 800; font-display:swap; src:url('fonts/baloo2-var-latinext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'Baloo 2'; font-style:normal; font-weight:400 800; font-display:swap; src:url('fonts/baloo2-var-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Fredoka'; font-style:normal; font-weight:300 700; font-display:swap; src:url('fonts/fredoka-var-latinext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'Fredoka'; font-style:normal; font-weight:300 700; font-display:swap; src:url('fonts/fredoka-var-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Archivo'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/archivo-400-latinext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'Archivo'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/archivo-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Archivo'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/archivo-600-latinext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'Archivo'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/archivo-600-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Archivo'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/archivo-700-latinext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'Archivo'; font-style:normal; font-weight:700; font-display:swap; src:url('fonts/archivo-700-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'Archivo'; font-style:normal; font-weight:800; font-display:swap; src:url('fonts/archivo-800-latinext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'Archivo'; font-style:normal; font-weight:800; font-display:swap; src:url('fonts/archivo-800-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/ibmplexmono-400-latinext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:400; font-display:swap; src:url('fonts/ibmplexmono-400-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/ibmplexmono-500-latinext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:500; font-display:swap; src:url('fonts/ibmplexmono-500-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } @font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/ibmplexmono-600-latinext.woff2') format('woff2'); unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; } @font-face{ font-family:'IBM Plex Mono'; font-style:normal; font-weight:600; font-display:swap; src:url('fonts/ibmplexmono-600-latin.woff2') format('woff2'); unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; } /* ========================================================================= 1. TOKENY ========================================================================= */ :root { /* --- Kolory: marka --- */ --qq-acc: #E8590C; /* akcent główny — pomarańcz szlaku (CTA, aktywny punkt) */ --qq-acc-press: #C64A08; /* akcent w stanie active/hover */ --qq-acc-soft: #FDEEE3; /* tło zaznaczonej odpowiedzi / delikatny akcent */ --qq-acc2: #2F6B4F; /* akcent wtórny — leśna zieleń (sukces, „zaliczone") */ /* --- Kolory: neutralne --- */ --qq-bg: #FAF7F2; /* tło ekranu (kremowy papier) */ --qq-surface: #FFFFFF; /* karty, pola input */ --qq-ink: #211D18; /* tekst główny / atrament */ --qq-ink-2: rgba(33,29,24,.65); /* tekst drugorzędny */ --qq-ink-3: rgba(33,29,24,.45); /* tekst pomocniczy / placeholder */ --qq-line: rgba(33,29,24,.12); /* obrys kart */ --qq-line-2: rgba(33,29,24,.20); /* obrys pól input */ --qq-dashed: rgba(33,29,24,.35); /* przerywany obrys (punkt zablokowany) */ /* --- HUD (pasek gry) — domyślnie ciemny --- */ --qq-hud-bg: #211D18; --qq-hud-ink: #FAF7F2; --qq-hud-ink-2: rgba(250,247,242,.65); --qq-hud-track: rgba(250,247,242,.18); /* --- Tryb ciemny (skaner) --- */ --qq-dark-bg: #14120F; --qq-dark-ink: #FAF7F2; --qq-dark-ink-2: rgba(250,247,242,.50); --qq-dark-line: rgba(250,247,242,.18); /* --- Typografia --- */ --qq-font-sans: 'Archivo', system-ui, -apple-system, sans-serif; --qq-font-mono: 'IBM Plex Mono', ui-monospace, monospace; /* --qq-fs-scale / --qq-sp-scale: mnożniki ze superpanelu (presety fontScale / density). 1 = bez zmian; JS ustawia je z branding.tokens. Cała skala niżej przez calc(), więc pojedynczy mnożnik skaluje typografię / odstępy naraz. */ --qq-fs-scale: 1; --qq-sp-scale: 1; --qq-on-acc: #fff; /* kolor tekstu na przyciskach akcentu (onAccent) */ --qq-fs-display: calc(34px * var(--qq-fs-scale, 1)); /* tytuł epilogu / hero */ --qq-fs-h1: calc(32px * var(--qq-fs-scale, 1)); /* nagłówek ekranu */ --qq-fs-h2: calc(28px * var(--qq-fs-scale, 1)); /* nagłówek formularza */ --qq-fs-h3: calc(21px * var(--qq-fs-scale, 1)); /* pytanie */ --qq-fs-body: calc(14px * var(--qq-fs-scale, 1)); --qq-fs-sm: calc(13px * var(--qq-fs-scale, 1)); --qq-fs-label: calc(11px * var(--qq-fs-scale, 1)); /* etykiety mono */ --qq-fs-micro: calc(10px * var(--qq-fs-scale, 1)); --qq-lh-tight: 1.1; --qq-lh-body: 1.55; --qq-ls-label: .14em; /* letter-spacing etykiet mono */ /* --- Promienie --- */ --qq-r-sm: 8px; --qq-r-md: 12px; /* pola input, chipy odpowiedzi */ --qq-r-lg: 14px; /* przyciski, karty */ --qq-r-xl: 16px; /* duże karty / kontener mapy */ --qq-r-full: 999px; /* --- Odstępy --- */ --qq-sp-1: calc(4px * var(--qq-sp-scale, 1)); --qq-sp-2: calc(8px * var(--qq-sp-scale, 1)); --qq-sp-3: calc(12px * var(--qq-sp-scale, 1)); --qq-sp-4: calc(16px * var(--qq-sp-scale, 1)); --qq-sp-5: calc(20px * var(--qq-sp-scale, 1)); --qq-sp-6: calc(24px * var(--qq-sp-scale, 1)); /* --- Cienie --- */ --qq-shadow-cta: 0 4px 14px rgba(232,89,12,.28); --qq-shadow-card: 0 2px 6px rgba(33,29,24,.08); --qq-shadow-sheet: 0 10px 28px rgba(20,15,8,.35); /* --- Strefa dotyku --- */ --qq-hit: 44px; /* minimalny cel dotykowy */ /* --- Ruch --- */ --qq-dur: .18s; --qq-ease: cubic-bezier(.2,.7,.3,1); } /* --- MOTYWY (nadpisują tylko akcenty) --- */ .qq-theme-forest { --qq-acc:#65A30D; --qq-acc-press:#568A0A; --qq-acc-soft:#F0F5E6; --qq-acc2:#1E293B; } .qq-theme-alert { --qq-acc:#B91C1C; --qq-acc-press:#9E1717; --qq-acc-soft:#FBEAEA; --qq-acc2:#1E3A5F; } .qq-theme-water { --qq-acc:#0E7490; --qq-acc-press:#0B5E75; --qq-acc-soft:#E5F2F5; --qq-acc2:#9A3412; } /* --- HUD jasny (opcjonalnie) --- */ .qq-hud--light { --qq-hud-bg:#FFFFFF; --qq-hud-ink:#211D18; --qq-hud-ink-2:rgba(33,29,24,.55); --qq-hud-track:rgba(33,29,24,.12); } /* ========================================================================= 2. BAZA ========================================================================= */ .qq-app, .qq-screen { font-family: var(--qq-font-sans); color: var(--qq-ink); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } .qq-screen { display: flex; flex-direction: column; height: 100%; background: var(--qq-bg); box-sizing: border-box; overflow: hidden; } .qq-screen--dark { background: var(--qq-dark-bg); color: var(--qq-dark-ink); } /* ========================================================================= 3. TYPOGRAFIA ========================================================================= */ .qq-kicker { /* nadlinia / etykieta sekcji */ font-family: var(--qq-font-mono); font-weight: 600; font-size: var(--qq-fs-label); letter-spacing: .16em; color: var(--qq-acc); text-transform: uppercase; } .qq-kicker--muted { color: var(--qq-ink-3); } .qq-kicker--green { color: var(--qq-acc2); } .qq-title { /* nagłówek ekranu */ font-weight: 800; font-size: var(--qq-fs-h1); line-height: var(--qq-lh-tight); margin: 0; color: var(--qq-ink); text-wrap: pretty; } .qq-title--italic { font-weight: 400; font-style: italic; color: var(--qq-acc2); } .qq-title--display { font-size: var(--qq-fs-display); } .qq-question { /* treść pytania */ font-weight: 700; font-size: var(--qq-fs-h3); line-height: 1.25; margin: 0; color: var(--qq-ink); text-wrap: pretty; } .qq-text { font-size: var(--qq-fs-body); line-height: var(--qq-lh-body); color: var(--qq-ink-2); margin: 0; text-wrap: pretty; } .qq-text--ink { color: var(--qq-ink); } .qq-mono { font-family: var(--qq-font-mono); font-weight: 500; font-size: var(--qq-fs-label); color: var(--qq-ink-3); } .qq-mono--acc { color: var(--qq-acc); } /* ========================================================================= 4. PRZYCISKI (min. cel dotyku 44px) ========================================================================= */ .qq-btn { display: flex; align-items: center; justify-content: center; min-height: var(--qq-hit); padding: 16px; border: 1.5px solid transparent; border-radius: var(--qq-r-lg); font-family: var(--qq-font-sans); font-weight: 700; font-size: 16px; text-align: center; cursor: pointer; user-select: none; transition: transform var(--qq-dur) var(--qq-ease), background var(--qq-dur) var(--qq-ease); } .qq-btn:active { transform: scale(.98); } .qq-btn--primary { background: var(--qq-acc); color: #fff; box-shadow: var(--qq-shadow-cta); } .qq-btn--primary:active { background: var(--qq-acc-press); } .qq-btn--dark { background: var(--qq-ink); color: var(--qq-bg); } .qq-btn--ghost { background: transparent; color: var(--qq-ink); border-color: var(--qq-line-2); font-weight: 600; } .qq-btn--sm { min-height: 0; padding: 15px 20px; font-size: 15px; } /* ========================================================================= 5. POLA / FORMULARZ ========================================================================= */ .qq-field-label { font-family: var(--qq-font-mono); font-weight: 600; font-size: var(--qq-fs-micro); letter-spacing: .12em; color: var(--qq-ink-3); margin-bottom: var(--qq-sp-2); text-transform: uppercase; } .qq-input { width: 100%; box-sizing: border-box; background: var(--qq-surface); border: 1.5px solid var(--qq-line-2); border-radius: var(--qq-r-md); padding: 15px 18px; font-family: var(--qq-font-sans); font-weight: 600; font-size: 16px; /* 16px = brak zoomu na iOS */ color: var(--qq-ink); } .qq-input::placeholder { color: var(--qq-ink-3); } .qq-input:focus { outline: none; border-color: var(--qq-acc); } /* OTP — kod z maila */ .qq-otp { display: flex; gap: var(--qq-sp-2); justify-content: center; } .qq-otp__cell { width: 46px; height: 56px; background: var(--qq-surface); border: 1.5px solid var(--qq-line-2); border-radius: var(--qq-r-md); display: flex; align-items: center; justify-content: center; font-family: var(--qq-font-mono); font-weight: 600; font-size: 22px; color: var(--qq-ink); } .qq-otp__cell--active { border-color: var(--qq-acc); } /* ========================================================================= 6. KARTY ========================================================================= */ .qq-card { background: var(--qq-surface); border: 1.5px solid var(--qq-line); border-radius: var(--qq-r-lg); padding: var(--qq-sp-4); } .qq-stat { text-align: center; padding: 18px 10px; } .qq-stat__num { font-weight: 800; font-size: 30px; color: var(--qq-acc); line-height: 1; } .qq-stat__num--ink { color: var(--qq-ink); } .qq-stat__num--green { color: var(--qq-acc2); } .qq-stat__label { font-family: var(--qq-font-mono); font-weight: 500; font-size: var(--qq-fs-micro); letter-spacing: .12em; color: var(--qq-ink-3); margin-top: var(--qq-sp-1); text-transform: uppercase; } /* ========================================================================= 7. ODPOWIEDZI (quiz) ========================================================================= */ .qq-answer { display: flex; align-items: center; gap: var(--qq-sp-3); min-height: var(--qq-hit); background: var(--qq-surface); border: 1.5px solid var(--qq-line); border-radius: var(--qq-r-md); padding: 15px 16px; cursor: pointer; transition: transform var(--qq-dur) var(--qq-ease); } .qq-answer:active { transform: scale(.98); } .qq-answer__dot { width: 20px; height: 20px; flex: none; box-sizing: border-box; border-radius: var(--qq-r-full); border: 2px solid var(--qq-dashed); background: transparent; } .qq-answer__text { font-size: 15px; color: var(--qq-ink); } .qq-answer--selected { background: var(--qq-acc-soft); border-color: var(--qq-acc); } .qq-answer--selected .qq-answer__dot { border-color: var(--qq-acc); background: var(--qq-acc); } .qq-answer--selected .qq-answer__text { font-weight: 700; } /* ========================================================================= 8. HUD (górny pasek gry) ========================================================================= */ .qq-hud { flex: none; background: var(--qq-hud-bg); color: var(--qq-hud-ink); padding: 12px 18px 14px; } .qq-hud__row { display: flex; justify-content: space-between; align-items: center; } .qq-hud__timer, .qq-hud__score { font-family: var(--qq-font-mono); font-weight: 600; font-size: 12px; letter-spacing: .08em; } .qq-hud__game { font-weight: 700; font-size: 13px; } .qq-progress { height: 3px; border-radius: 2px; margin-top: 12px; overflow: hidden; background: var(--qq-hud-track); } .qq-progress__fill { height: 100%; border-radius: 2px; background: var(--qq-acc); } /* ========================================================================= 9. MAPA — uchwyt (peek) + panel ściągany z góry (sheet) ========================================================================= */ .qq-map-peek { /* skrawek mapy wystający pod HUD (~60px) */ flex: none; height: 60px; background: repeating-linear-gradient(-45deg,#efe9dd,#efe9dd 14px,#f5f0e6 14px,#f5f0e6 28px); border-bottom: 1.5px solid var(--qq-line); border-radius: 0 0 var(--qq-r-xl) var(--qq-r-xl); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 5px; box-shadow: var(--qq-shadow-card); cursor: grab; } .qq-map-peek:active { transform: translateY(2px); } .qq-handle { width: 38px; height: 4px; border-radius: 2px; background: var(--qq-dashed); } .qq-handle-label { font-family: var(--qq-font-mono); font-weight: 600; font-size: 8.5px; letter-spacing: var(--qq-ls-label); color: var(--qq-ink-3); } .qq-sheet { /* pełny panel mapy zsunięty z góry */ flex: 1; display: flex; flex-direction: column; background: var(--qq-bg); border-radius: 0 0 22px 22px; box-shadow: var(--qq-shadow-sheet); overflow: hidden; } .qq-sheet__scrim { /* przyciemniony ekran gry pod panelem */ flex: none; height: 64px; display: flex; align-items: center; justify-content: center; background: #8f8676; } /* Waypointy na mapie */ .qq-wp { width: 38px; height: 38px; box-sizing: border-box; border-radius: var(--qq-r-full); display: flex; align-items: center; justify-content: center; font-family: var(--qq-font-mono); font-weight: 600; font-size: 13px; } .qq-wp--done { background: var(--qq-acc2); color: #fff; } .qq-wp--current { background: var(--qq-acc); color: #fff; animation: qq-pulse 2.4s infinite; } .qq-wp--locked { background: #f5f0e6; color: var(--qq-ink-3); border: 1.5px dashed var(--qq-dashed); } /* ========================================================================= 10. NAWIGACJA DOLNA ========================================================================= */ .qq-tabbar { flex: none; display: flex; border-top: 1.5px solid var(--qq-line); background: var(--qq-surface); } .qq-tabbar__item { flex: 1; text-align: center; padding: 13px 0; font-weight: 600; font-size: 12px; color: var(--qq-ink-3); cursor: pointer; } .qq-tabbar__item + .qq-tabbar__item { border-left: 1.5px solid var(--qq-line); } .qq-tabbar__item--active { color: var(--qq-acc); } /* ========================================================================= 11. SKANER QR ========================================================================= */ .qq-scanner { flex: 1; margin: 14px 26px; position: relative; overflow: hidden; border-radius: 18px; background: repeating-linear-gradient(45deg,#1d1a16,#1d1a16 12px,#232019 12px,#232019 24px); } .qq-scanner__frame { position: absolute; top: 18%; left: 14%; right: 14%; bottom: 26%; } .qq-scanner__corner { position: absolute; width: 34px; height: 34px; } .qq-scanner__corner--tl { top:0; left:0; border-top:4px solid var(--qq-acc); border-left:4px solid var(--qq-acc); border-radius:6px 0 0 0; } .qq-scanner__corner--tr { top:0; right:0; border-top:4px solid var(--qq-acc); border-right:4px solid var(--qq-acc); border-radius:0 6px 0 0; } .qq-scanner__corner--bl { bottom:0; left:0; border-bottom:4px solid var(--qq-acc); border-left:4px solid var(--qq-acc); border-radius:0 0 0 6px; } .qq-scanner__corner--br { bottom:0; right:0; border-bottom:4px solid var(--qq-acc); border-right:4px solid var(--qq-acc); border-radius:0 0 6px 0; } .qq-scanner__line { position: absolute; left: 6%; right: 6%; height: 2px; background: linear-gradient(90deg, transparent, var(--qq-acc), transparent); animation: qq-scan 3s ease-in-out infinite; } /* ========================================================================= 12. ODZNAKI / PIECZĄTKI (epilog) ========================================================================= */ .qq-stamp { width: 72px; height: 72px; border-radius: var(--qq-r-full); border: 2px dashed var(--qq-acc); color: var(--qq-acc); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; } .qq-stamp--green { border-color: var(--qq-acc2); color: var(--qq-acc2); } .qq-stamp--ink { border-color: var(--qq-ink); color: var(--qq-ink); } .qq-stamp__big { font-weight: 700; font-size: 15px; } .qq-stamp__small { font-family: var(--qq-font-mono); font-weight: 600; font-size: 7.5px; letter-spacing: .1em; } /* ========================================================================= 13. TŁA DEKORACYJNE ========================================================================= */ .qq-paper { background: repeating-linear-gradient(45deg,#e7e0d3,#e7e0d3 10px,#efe9dd 10px,#efe9dd 20px); } .qq-paper-2 { background: repeating-linear-gradient(-45deg,#efe9dd,#efe9dd 14px,#f5f0e6 14px,#f5f0e6 28px); } .qq-underline { height: 4px; background: var(--qq-acc); } /* pasek pod hero */ /* ========================================================================= 14. LAYOUT HELPERY (sticky CTA + przewijana treść) ========================================================================= */ .qq-scroll { flex: 1; overflow-y: auto; -webkit-overflow-scrolling: touch; } .qq-sticky-cta { flex: none; position: relative; } .qq-sticky-cta::before { /* gradient „jest jeszcze treść" nad przyklejonym CTA */ content: ""; position: absolute; left: 0; right: 0; top: -28px; height: 28px; background: linear-gradient(to bottom, rgba(250,247,242,0), var(--qq-bg)); pointer-events: none; } /* ========================================================================= 15. ANIMACJE ========================================================================= */ @keyframes qq-pulse { 0% { box-shadow: 0 0 0 0 rgba(232,89,12,.45); } 70% { box-shadow: 0 0 0 10px rgba(232,89,12,0); } 100% { box-shadow: 0 0 0 0 rgba(232,89,12,0); } } @keyframes qq-scan { 0%{top:8%} 50%{top:88%} 100%{top:8%} } @media (prefers-reduced-motion: reduce) { .qq-wp--current, .qq-scanner__line { animation: none; } }