/* Everylap — everylap.app Bieżnia: strona to stadion. Tory w kolorach 13 dyscyplin, ekrany aplikacji stoją na murawie, a każda sekcja biegnie w kolorze swojej dyscypliny (--c). Ciemny grafit jak w aplikacji, limonka jak w ikonie. */ @font-face { font-family: "Archivo"; src: url("../fonts/archivo-latin-ext.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; 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"; src: url("../fonts/archivo-latin.woff2") format("woff2"); font-weight: 100 900; font-stretch: 62% 125%; font-display: swap; 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: "Instrument Sans"; src: url("../fonts/instrument-sans-latin-ext.woff2") format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; 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: "Instrument Sans"; src: url("../fonts/instrument-sans-latin.woff2") format("woff2"); font-weight: 400 700; font-stretch: 75% 100%; font-display: swap; 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: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin-ext.woff2") format("woff2"); font-weight: 100 800; font-display: swap; 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: "JetBrains Mono"; src: url("../fonts/jetbrains-mono-latin.woff2") format("woff2"); font-weight: 100 800; font-display: swap; 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; } :root { /* grafit z ikony, biel kredy z bieżni, limonka marki */ --ink: #0b0c0e; --ink-2: #111316; --ink-3: #181b1f; --ink-4: #22262b; --line: rgba(229, 238, 210, 0.09); --line-2: rgba(229, 238, 210, 0.17); --chalk: #eef1e7; --mute: #9a9f93; --mute-2: #6d7268; --lime: #c7f04a; --lime-ink: #11140a; /* kolory dyscyplin, te same co w aplikacji (Styles.swift) */ --strength: #c7f04a; --run: #ff453a; --ride: #0a84ff; --walk: #34c759; --stretch: #a78bfa; --yoga: #f472b6; --swim: #38bdf8; --kayak: #2dd4bf; --ski: #7dd3fc; --xc: #818cf8; --combat: #c084fc; --pilates: #fda4af; --inline: #5eead4; --kcal: #ff9f0a; --rest: #6cb8ff; --prot: #6aa6ff; --fat: #ffd03a; --carb: #3ad69a; --display: "Archivo", "Arial Narrow", "Helvetica Neue", system-ui, sans-serif; --body: "Instrument Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --mono: "JetBrains Mono", ui-monospace, "SF Mono", Menlo, Consolas, monospace; --t-hero: clamp(3.5rem, 2rem + 7.2vw, 8.75rem); --t-h2: clamp(2.4rem, 1.5rem + 3.2vw, 4.25rem); --t-h3: clamp(1.2rem, 1.05rem + 0.4vw, 1.4rem); --t-lead: clamp(1.06rem, 1rem + 0.25vw, 1.2rem); --t-body: 1.0625rem; --t-small: 0.9375rem; --t-label: 0.72rem; --gutter: 16px; --wrap: 1240px; --radius: 22px; --c: var(--lime); color-scheme: dark; } *, *::before, *::after { box-sizing: border-box; } html { interpolate-size: allow-keywords; -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 96px; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } } body { margin: 0; background: var(--ink); color: var(--chalk); font: 400 var(--t-body)/1.6 var(--body); font-stretch: 100%; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; } body::before { content: ""; position: fixed; inset: 0 0 auto; height: env(safe-area-inset-top, 0px); z-index: 60; background: rgba(11, 12, 14, 0.82); } img { max-width: 100%; height: auto; } a { color: inherit; } ::selection { background: var(--lime); color: var(--lime-ink); } :focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; border-radius: 6px; } /* suwak w barwach strony: grafitowy tor, uchwyt w kolorze bieżącej sekcji (--sb z site.js, jak obwódka znaku w nawigacji) */ html { scrollbar-color: color-mix(in srgb, var(--sb, var(--lime)) 80%, var(--ink)) var(--ink); } @supports not (scrollbar-color: auto) { ::-webkit-scrollbar { width: 12px; height: 12px; background: var(--ink); } ::-webkit-scrollbar-thumb { border: 3px solid var(--ink); border-radius: 999px; background: color-mix(in srgb, var(--sb, var(--lime)) 80%, var(--ink)); } ::-webkit-scrollbar-thumb:hover { background: var(--sb, var(--lime)); } ::-webkit-scrollbar-corner { background: var(--ink); } } .wrap { width: 100%; max-width: calc(var(--wrap) + 2 * 32px); margin-inline: auto; padding-left: max(var(--gutter), env(safe-area-inset-left, 0px)); padding-right: max(var(--gutter), env(safe-area-inset-right, 0px)); } @media (min-width: 720px) { :root { --gutter: 32px; } } .skip { position: absolute; left: -999px; top: 8px; z-index: 100; background: var(--lime); color: var(--lime-ink); padding: 10px 16px; border-radius: 10px; font-weight: 600; } .skip:focus { left: 16px; } /* ——— typografia ——— */ .label { font: 700 var(--t-label)/1.2 var(--display); font-stretch: 125%; letter-spacing: 0.14em; text-transform: uppercase; color: var(--mute); } .eyebrow { display: inline-flex; align-items: center; gap: 10px; font: 700 var(--t-label)/1.2 var(--display); font-stretch: 125%; letter-spacing: 0.16em; text-transform: uppercase; color: var(--c); } .eyebrow::before { content: ""; width: 22px; height: 6px; border-radius: 3px; background: var(--c); box-shadow: 0 0 14px color-mix(in srgb, var(--c) 70%, transparent); } .h2 { margin: 18px 0 0; font: 850 var(--t-h2)/0.92 var(--display); font-stretch: 68%; letter-spacing: -0.012em; text-wrap: balance; } .h2 em { font-style: normal; color: var(--c); } .lead { margin: 22px 0 0; font-size: var(--t-lead); line-height: 1.55; color: color-mix(in srgb, var(--chalk) 82%, var(--ink)); max-width: 36em; text-wrap: pretty; } .num { font-variant-numeric: tabular-nums; } /* ——— nawigacja ——— Pływająca kapsuła wyrównana do krawędzi treści: logo z lewej, rozdziały na środku (kropka w kolorze dyscypliny pojawia się przy bieżącym rozdziale, podświetlenie jedzie za nim i za kursorem), limonkowy przycisk sklepów z prawej. Dolną krawędź kapsuły wypełnia postęp czytania w kolorze bieżącej sekcji. Promienie są współśrodkowe: kapsuła 32 px, w niej przyciski 22 px odsunięte o 10 px. */ .nav { position: sticky; top: env(safe-area-inset-top, 0px); z-index: 50; padding-top: 12px; } /* po przewinięciu: ciemny welon nad kapsułą, żeby treść nie prześwitywała w szczelinie nad nią */ .nav::before { content: ""; position: absolute; z-index: -1; left: 0; right: 0; top: calc(-1 * env(safe-area-inset-top, 0px)); bottom: -20px; background: linear-gradient(180deg, var(--ink) 0, rgba(11, 12, 14, 0.9) 45%, rgba(11, 12, 14, 0)); opacity: 0; transition: opacity .35s; pointer-events: none; } .nav.is-stuck::before, .nav.is-menu::before { opacity: 1; } .nav__in { position: relative; isolation: isolate; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; height: 64px; padding-left: calc(max(var(--gutter), env(safe-area-inset-left, 0px)) + 15px); padding-right: calc(max(var(--gutter), env(safe-area-inset-right, 0px)) + 10px); } .nav__in::before { content: ""; position: absolute; z-index: -1; top: 0; bottom: 0; left: max(var(--gutter), env(safe-area-inset-left, 0px)); right: max(var(--gutter), env(safe-area-inset-right, 0px)); border-radius: 32px; background: rgba(20, 22, 26, 0.5); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.07), 0 24px 60px -34px rgba(0, 0, 0, 0.95); -webkit-backdrop-filter: saturate(160%) blur(18px); backdrop-filter: saturate(160%) blur(18px); transition: background .35s, box-shadow .35s; } .nav.is-stuck .nav__in::before { background: rgba(17, 19, 23, 0.9); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.08), 0 26px 60px -28px rgba(0, 0, 0, 1); } .nav.is-menu .nav__in::before { background: var(--ink-3); } .brand { display: inline-flex; align-items: center; gap: 12px; text-decoration: none; justify-self: start; } .brand__mark { width: 36px; height: 36px; display: grid; place-items: center; border-radius: 11px; background: linear-gradient(180deg, #26282d, #0b0c0e); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08), 0 0 0 0 rgba(199,240,74,0); transition: box-shadow .3s; } .brand:hover .brand__mark { box-shadow: inset 0 0 0 1px rgba(199,240,74,.35), 0 0 22px -4px rgba(199,240,74,.45); } .brand__mark svg { width: 22px; height: 22px; } /* postęp czytania: obwódka wokół znaku wypełnia się jak tarcza stopera, w kolorze bieżącej sekcji */ .brand__mark { position: relative; } .brand__mark::after { content: ""; position: absolute; inset: -4px; border-radius: 15px; padding: 2px; pointer-events: none; background: conic-gradient(var(--nav-c, var(--lime)) calc(var(--p, 0) * 1turn), rgba(255, 255, 255, 0.07) 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; opacity: 0; transition: opacity .35s; } .nav.is-stuck .brand__mark::after { opacity: 1; } .brand__word { font: 800 0.88rem/1 var(--display); font-stretch: 125%; letter-spacing: 0.22em; text-transform: uppercase; } .nav__lanes { grid-column: 2; } .nav__links { position: relative; display: flex; gap: 2px; margin: 0; padding: 0; list-style: none; } /* podświetlenie, które przesuwa się między linkami (pozycję ustawia site.js) */ .nav__links::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: var(--hw, 0px); transform: translateX(var(--hx, 0px)); border-radius: 999px; background: rgba(255, 255, 255, 0.07); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.06); opacity: var(--ho, 0); transition: transform .45s cubic-bezier(.3,.7,.2,1), width .45s cubic-bezier(.3,.7,.2,1), opacity .25s; } .nav__links a { position: relative; display: flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px 0 14px; border-radius: 999px; text-decoration: none; font: 500 0.92rem/1 var(--body); color: color-mix(in srgb, var(--chalk) 68%, transparent); white-space: nowrap; transition: color .25s; } .nav__links a::before { content: ""; width: 6px; height: 6px; border-radius: 50%; flex: none; background: var(--c); transform: scale(0); transition: transform .3s cubic-bezier(.3,.7,.2,1), box-shadow .25s; } .nav__links a:hover, .nav__links a[aria-current] { color: var(--chalk); } .nav__links a:hover::before, .nav__links a[aria-current]::before { transform: scale(1); box-shadow: 0 0 10px var(--c); } .nav__end { grid-column: 3; justify-self: end; display: flex; align-items: center; gap: 8px; } /* przycisk sklepów: ikony App Store i Google Play, obok nazwy sklepów; przed premierą nad nimi „wkrótce” */ .navcta { display: inline-flex; align-items: center; gap: 11px; height: 44px; padding: 0 20px 0 5px; border-radius: 999px; text-decoration: none; white-space: nowrap; background: var(--lime); color: var(--lime-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 10px 28px -14px rgba(199, 240, 74, 0.75); transition: transform .25s, box-shadow .25s; } .navcta__ico { display: flex; flex: none; padding-left: 2px; } .navcta__ico svg { width: 28px; height: 28px; border-radius: 7px; box-shadow: 0 0 0 2px var(--lime); transition: transform .35s cubic-bezier(.3,.7,.2,1); } .navcta__ico svg + svg { margin-left: -8px; } .navcta__txt { display: grid; gap: 4px; line-height: 1; } .navcta__txt small { font: 750 0.56rem/1 var(--display); font-stretch: 125%; letter-spacing: 0.16em; text-transform: uppercase; color: color-mix(in srgb, var(--lime-ink) 62%, var(--lime)); } .navcta__txt b { font: 650 0.88rem/1 var(--body); } .navcta__txt b i { font-style: normal; margin: 0 .3em; opacity: .45; } .navcta:hover { transform: translateY(-1px); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.4), 0 14px 32px -12px rgba(199, 240, 74, 0.9); } .navcta:hover .navcta__ico svg { transform: translateX(-2px) rotate(-4deg); } .navcta:hover .navcta__ico svg + svg { transform: translateX(3px) rotate(4deg); } .navcta:active { transform: translateY(0) scale(.98); } /* podstrony: powrót na stronę główną jako przycisk w kapsule */ .nav__in > .nav__cta { grid-column: 3; justify-self: end; height: 44px; padding: 0 18px 0 15px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, 0.07); font: 600 .9rem/1 var(--body); transition: background .2s, gap .2s; } .nav__in > .nav__cta:hover { background: rgba(255, 255, 255, 0.11); } /* przycisk menu (tylko gdy linki się nie mieszczą): napis i limonkowe kółko z kreskami, jak znak marki po lewej */ .menu-btn { display: none; appearance: none; border: 0; cursor: pointer; align-items: center; gap: 11px; height: 44px; padding: 0 6px 0 17px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); color: var(--chalk); font: 650 .9rem/1 var(--body); transition: background .2s; } .menu-btn:hover { background: rgba(255, 255, 255, 0.1); } .menu-btn:focus-visible { outline: none; box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--lime) 55%, transparent); } .menu-btn__ico { position: relative; width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--lime); color: var(--lime-ink); box-shadow: 0 4px 14px -6px rgba(199, 240, 74, .7); transition: background .25s, color .25s, transform .25s cubic-bezier(.3, .7, .2, 1); } .menu-btn:hover .menu-btn__ico { transform: scale(1.06); } .menu-btn[aria-expanded="true"] .menu-btn__ico { background: var(--chalk); color: var(--ink); box-shadow: none; } .menu-btn__ico i { position: absolute; left: 10px; right: 10px; height: 2px; border-radius: 1px; background: currentColor; transition: transform .3s, top .3s; } .menu-btn__ico i:first-child { top: 12px; } .menu-btn__ico i:last-child { top: 18px; } .menu-btn[aria-expanded="true"] .menu-btn__ico i { top: 15px; } .menu-btn[aria-expanded="true"] .menu-btn__ico i:first-child { transform: rotate(45deg); } .menu-btn[aria-expanded="true"] .menu-btn__ico i:last-child { transform: rotate(-45deg); } /* węższy ekran: linki dosuwają się do przycisku i ciaśnieją, potem chowają się do menu */ @media (max-width: 1180px) { .nav__in { grid-template-columns: auto 1fr auto; gap: 12px; } .nav__lanes { justify-self: end; } .nav__links a { padding: 0 12px 0 11px; gap: 7px; } } @media (max-width: 1060px) { .nav__lanes { display: none; } .menu-btn { display: inline-flex; } } @media (max-width: 640px) { .navcta { display: none; } } @media (max-width: 480px) { .nav { padding-top: 8px; } .nav__in { height: 56px; gap: 10px; padding-left: calc(max(var(--gutter), env(safe-area-inset-left, 0px)) + 12px); padding-right: calc(max(var(--gutter), env(safe-area-inset-right, 0px)) + 8px); } .nav__in::before { border-radius: 28px; } .brand { gap: 10px; } .brand__mark { width: 32px; height: 32px; border-radius: 10px; } .brand__mark::after { border-radius: 14px; } .brand__mark svg { width: 20px; height: 20px; } .brand__word { font-size: 0.8rem; letter-spacing: 0.18em; } .menu-btn, .nav__in > .nav__cta { height: 40px; } .menu-btn { padding-left: 15px; gap: 10px; } .menu-btn__ico { width: 30px; height: 30px; } .menu-btn__ico i { left: 9px; right: 9px; } .menu-btn__ico i:first-child { top: 11px; } .menu-btn__ico i:last-child { top: 17px; } .menu-btn[aria-expanded="true"] .menu-btn__ico i { top: 14px; } } @media (prefers-reduced-motion: reduce) { .nav__links::before, .navcta, .navcta__ico svg { transition: none; } } /* ——— menu na telefonie i tablecie ——— */ .menu { position: fixed; inset: 0; z-index: 45; display: none; padding-top: calc(88px + env(safe-area-inset-top, 0px)); background: rgba(11, 12, 14, 0.97); -webkit-backdrop-filter: blur(20px); backdrop-filter: blur(20px); overflow-y: auto; overscroll-behavior: contain; opacity: 0; visibility: hidden; transition: opacity .3s, visibility 0s .3s; } @media (max-width: 1060px) { .menu { display: block; } } @media (max-width: 480px) { .menu { padding-top: calc(72px + env(safe-area-inset-top, 0px)); } } .menu.is-open { opacity: 1; visibility: visible; transition: opacity .3s; } .menu__in { display: flex; flex-direction: column; min-height: 100%; padding-block: 8px calc(28px + env(safe-area-inset-bottom, 0px)); } .menu__list { margin: 0; padding: 0; list-style: none; } .menu__list li { border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(14px); transition: opacity .45s, transform .5s cubic-bezier(.2,.8,.2,1); } .menu.is-open .menu__list li { opacity: 1; transform: none; } .menu__list li:nth-child(2) { transition-delay: 40ms; } .menu__list li:nth-child(3) { transition-delay: 80ms; } .menu__list li:nth-child(4) { transition-delay: 120ms; } .menu__list li:nth-child(5) { transition-delay: 160ms; } .menu__list li:nth-child(6) { transition-delay: 200ms; } .menu__list a { display: flex; align-items: center; gap: 16px; padding: 15px 2px; text-decoration: none; } .menu__list .no { width: 24px; font: 600 .74rem/1 var(--mono); color: var(--mute-2); } .menu__list .nm { font: 850 clamp(2.1rem, 9vw, 3rem)/1 var(--display); font-stretch: 70%; letter-spacing: -.01em; transition: color .2s; } .menu__list a::after { content: ""; margin-left: auto; width: 10px; height: 10px; border-radius: 50%; background: var(--c); box-shadow: 0 0 14px var(--c); } .menu__list a:hover .nm, .menu__list a:active .nm { color: var(--c); } .menu__foot { margin-top: auto; padding-top: 32px; display: grid; gap: 20px; } .menu__links { display: flex; flex-wrap: wrap; gap: 8px 24px; margin: 0; font-size: .9rem; } .menu__links a { color: var(--mute); text-decoration: none; } .menu__links a:hover { color: var(--chalk); } html.menu-lock { overflow: hidden; } @media (prefers-reduced-motion: reduce) { .menu, .menu__list li { transition: none; } } /* ——— przyciski sklepów ——— Ciemne przyciski z ikonami App Store i Google Play. Do czasu premiery mówią „Wkrótce w”; po wpisaniu linków w site.js stają się jasne i klikalne (wtedy warto przejść na oficjalne odznaki obu sklepów). */ .stores { display: flex; flex-wrap: wrap; gap: 12px; } .store { display: inline-flex; align-items: center; gap: 13px; min-height: 58px; padding: 0 20px 0 9px; border-radius: 16px; text-decoration: none; background: linear-gradient(180deg, #1f2226, #131518); color: var(--chalk); box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 40px -26px rgba(0, 0, 0, .9); transition: transform .2s, box-shadow .2s, background .2s; } .store__ico { width: 40px; height: 40px; flex: none; border-radius: 9px; box-shadow: 0 6px 16px -6px rgba(0, 0, 0, .8); transition: transform .25s cubic-bezier(.3, .7, .2, 1); } .store:hover .store__ico { transform: scale(1.05); } .store__txt { display: grid; gap: 4px; line-height: 1; text-align: left; } .store__txt small { font: 500 .74rem/1 var(--body); color: var(--mute); } .store__txt b { font: 750 1.14rem/1 var(--display); font-stretch: 94%; letter-spacing: -.005em; white-space: nowrap; } .store[aria-disabled="true"] { cursor: default; } .store.is-live { background: var(--chalk); color: var(--ink); box-shadow: 0 14px 34px -14px rgba(199, 240, 74, .5); } .store.is-live .store__txt small { color: color-mix(in srgb, var(--ink) 60%, var(--chalk)); } .store.is-live:hover { transform: translateY(-2px); box-shadow: 0 18px 40px -14px rgba(199, 240, 74, .65); } /* na Androidzie Google Play idzie pierwszy */ .is-android .store[data-store="android"] { order: -1; } .textlink { display: inline-flex; align-items: center; gap: 8px; color: var(--chalk); text-decoration: none; font-weight: 600; border-bottom: 1px solid var(--line-2); padding-block: 4px; transition: border-color .2s, gap .2s; } .textlink:hover { border-color: var(--c); gap: 12px; } .textlink span[aria-hidden] { color: var(--c); } /* ——— nagłówek sekcji ——— */ .sec-head { display: grid; gap: 22px 56px; align-items: end; margin-bottom: clamp(40px, 5vw, 64px); } @media (min-width: 1000px) { .sec-head { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } } .sec-head .lead { margin-top: 0; } .h2 .rainbow, .rainbow { background: linear-gradient(90deg, var(--strength), var(--run) 16%, var(--ride) 30%, var(--walk) 44%, var(--yoga) 58%, var(--stretch) 70%, var(--swim) 82%, var(--combat)); -webkit-background-clip: text; background-clip: text; color: transparent; } /* ——— telefon ——— */ .phone { --w: 280px; position: relative; margin: 0; width: var(--w); max-width: 100%; padding: calc(var(--w) * 0.032); border-radius: 15.5% / 7.15%; background: linear-gradient(160deg, #3a3e44 0%, #1a1c20 22%, #0f1113 60%, #2a2d32 100%); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.10), inset 0 0 0 2px rgba(0, 0, 0, 0.9), 0 50px 90px -40px rgba(0, 0, 0, 0.95), 0 30px 60px -30px color-mix(in srgb, var(--c) 28%, transparent); flex: none; } .phone img { display: block; width: 100%; height: auto; aspect-ratio: 720 / 1565; border-radius: 13.4% / 6.2%; background: #000; } .phone figcaption { position: absolute; left: 50%; top: calc(100% + 18px); transform: translateX(-50%); width: max-content; max-width: 112%; font-size: var(--t-small); color: var(--mute); text-align: center; line-height: 1.35; } .phone figcaption b { display: block; color: var(--chalk); font-weight: 600; } /* ——— hero ——— */ .hero { position: relative; padding-block: 48px 40px; isolation: isolate; overflow-x: clip; } .hero::before { content: ""; position: absolute; inset: -64px 0 0; z-index: -2; background: radial-gradient(60% 50% at 72% 42%, rgba(199, 240, 74, 0.10), transparent 70%), radial-gradient(40% 40% at 15% 10%, rgba(10, 132, 255, 0.07), transparent 70%); } .hero__grid { display: grid; gap: 40px; align-items: center; } @media (min-width: 1000px) { .hero { min-height: calc(100svh - 76px); display: flex; align-items: center; padding-block: 24px 44px; } .hero > .wrap { flex: 1; } .hero__grid { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: 24px; } } .hero__copy { position: relative; z-index: 2; min-width: 0; } .hero h1 { margin: 22px 0 0; font: 880 var(--t-hero)/0.86 var(--display); font-stretch: 64%; letter-spacing: -0.015em; text-wrap: balance; } .hero h1 .l2 { display: block; color: var(--lime); } /* na komputerze hero ma wysokość ekranu: nagłówek i telefony skalują się do wysokości okna */ @media (min-width: 1000px) { .hero h1 { font-size: clamp(3.5rem, calc((100svh - 580px) / 2.6), var(--t-hero)); } } .hero .lead { max-width: 30em; } .hero__actions { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 22px; margin-top: 34px; } .readout { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); margin: 40px 0 0; padding: 0; list-style: none; border-radius: 18px; background: rgba(17, 19, 22, 0.55); box-shadow: inset 0 0 0 1px var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .readout li { position: relative; padding: 17px 16px 16px; border-left: 1px solid var(--line); } .readout li:first-child { border-left: 0; } .readout li::before { content: ""; position: absolute; left: 16px; top: 0; width: 18px; height: 2px; border-radius: 0 0 2px 2px; background: var(--rc); box-shadow: 0 0 10px var(--rc); } .readout b { display: block; font: 850 2.2rem/1 var(--display); font-stretch: 70%; font-variant-numeric: tabular-nums; } .readout span { display: block; margin-top: 7px; font-size: .78rem; line-height: 1.3; color: var(--mute); text-wrap: balance; } @media (max-width: 560px) { .readout { grid-template-columns: 1fr 1fr; } .readout li:nth-child(3) { border-left: 0; } .readout li:nth-child(n+3) { border-top: 1px solid var(--line); } .readout b { font-size: 2rem; } } .stage { --mw: clamp(200px, 54vw, 300px); --sw: calc(var(--mw) * 0.8); position: relative; min-width: 0; height: calc(var(--mw) * 2.24 + 96px); } .stage__track { position: absolute; z-index: -1; pointer-events: none; left: -40%; right: -40%; top: 4%; bottom: 0; width: 180%; height: 96%; -webkit-mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); mask-image: radial-gradient(closest-side, #000 62%, transparent 100%); } @media (min-width: 1000px) { .stage__track { left: -22%; right: -30%; width: 152%; } .stage { --mw: clamp(220px, calc((100svh - 270px) / 2.24), 320px); } } .stage .phone { position: absolute; left: 50%; top: 12px; } .stage .p-main { --w: var(--mw); transform: translate(-50%, var(--dy, 0px)); z-index: 3; } .stage .p-left { --w: var(--sw); top: calc(12px + var(--mw) * 0.22); transform: translateX(-122%) rotate(-7deg); z-index: 2; } .stage .p-right { --w: var(--sw); top: calc(12px + var(--mw) * 0.22); transform: translateX(22%) rotate(7deg); z-index: 2; } .stage .p-left img, .stage .p-right img { filter: brightness(.82) saturate(.95); } .lap { position: absolute; z-index: 4; left: 50%; bottom: 0; transform: translateX(-50%); display: flex; align-items: center; gap: 18px; white-space: nowrap; padding: 10px 20px 10px 10px; border-radius: 26px; background: rgba(17, 19, 22, .84); box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 60px -30px rgba(0, 0, 0, .9); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .lap__ring { --lp: 0; position: relative; width: 58px; height: 58px; flex: none; border-radius: 50%; display: grid; place-content: center; text-align: center; background: conic-gradient(var(--lime) calc(var(--lp) * 1turn), rgba(255, 255, 255, .08) 0); filter: drop-shadow(0 0 8px rgba(199, 240, 74, .25)); } .lap__ring::before { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: var(--ink-2); } .lap__ring b, .lap__ring small { position: relative; } .lap__ring b { font: 700 1.15rem/1 var(--mono); } .lap__ring small { margin-top: 3px; font: 700 .52rem/1 var(--display); font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase; color: var(--mute); } .lap__now span, .lap__last span { display: flex; align-items: center; gap: 7px; height: 14px; font: 700 .56rem/1 var(--display); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); } .lap__now b, .lap__last b { display: block; width: 6ch; margin-top: 6px; font: 700 1.6rem/1 var(--mono); font-variant-numeric: tabular-nums; white-space: nowrap; } .lap__last { padding-left: 18px; border-left: 1px solid var(--line); } .lap__last b { color: var(--lime); } .lap__last i { display: inline-block; width: 5.4ch; text-align: center; font: 600 .66rem/1 var(--mono); letter-spacing: 0; font-style: normal; padding: 2px 0; border-radius: 5px; background: rgba(255, 69, 58, .15); color: var(--run); } .lap__last i.fast { background: rgba(52, 199, 89, .15); color: var(--walk); } .lap__bars { display: flex; align-items: flex-end; gap: 3px; height: 38px; padding-left: 18px; border-left: 1px solid var(--line); } .lap__bars i { width: 5px; height: calc(var(--h) * 100%); min-height: 5px; border-radius: 2px; background: rgba(238, 241, 231, .22); transition: height .5s cubic-bezier(.2, .8, .2, 1); } .lap__bars i:last-child { background: rgba(238, 241, 231, .5); } .lap__bars i.best { background: var(--lime); box-shadow: 0 0 8px rgba(199, 240, 74, .5); } @media (max-width: 560px) { .lap { gap: 14px; padding: 8px 16px 8px 8px; } .lap__ring { width: 50px; height: 50px; } .lap__now b, .lap__last b { font-size: 1.3rem; } .lap__last { padding-left: 14px; } .lap__bars { display: none; } } /* ——— sekcje funkcji ——— */ .feat { position: relative; padding-block: clamp(60px, 6vw, 92px); isolation: isolate; overflow-x: clip; } .feat + .feat { border-top: 1px solid var(--line); } .feat__glow { position: absolute; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; } .feat__glow::before { content: ""; position: absolute; width: 900px; height: 900px; border-radius: 50%; left: var(--gx, 70%); top: var(--gy, 40%); transform: translate(-50%, -50%); background: radial-gradient(closest-side, color-mix(in srgb, var(--c) 14%, transparent), transparent); } .split { display: grid; gap: 48px; align-items: center; } @media (min-width: 1000px) { .split { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 56px; } .split--flip { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); } .split--flip > .split__copy { order: 2; } } .split__copy { min-width: 0; } .points { display: grid; gap: 0; margin: 36px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); } .points li { display: grid; grid-template-columns: 26px 1fr; gap: 4px 14px; padding: 18px 0; border-bottom: 1px solid var(--line); } .points li::before { content: ""; grid-row: span 2; margin-top: 8px; width: 12px; height: 12px; border-radius: 4px; border: 2px solid var(--c); } .points h3 { margin: 0; font: 650 var(--t-h3)/1.25 var(--body); } .points p { margin: 0; color: var(--mute); font-size: var(--t-small); line-height: 1.55; } /* ——— mapy ——— */ .maps { --c: var(--ride); } .maps__canvas { position: absolute; inset: 0; z-index: -1; width: 100%; height: 100%; pointer-events: none; opacity: .9; -webkit-mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); mask-image: linear-gradient(180deg, transparent, #000 18%, #000 82%, transparent); } .trailmark { display: inline-flex; gap: 0; vertical-align: middle; margin-right: 10px; border-radius: 2px; overflow: hidden; box-shadow: 0 0 0 1px rgba(0,0,0,.4); } .trailmark i { display: block; width: 7px; height: 14px; background: #fff; } .trailmark i:nth-child(2) { background: var(--tm, #e3262f); } .facts { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } @media (max-width: 1100px) { .facts { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 600px) { .facts { grid-template-columns: 1fr; } } .fact { padding: 20px 22px 24px; border-radius: var(--radius); background: color-mix(in srgb, var(--ink-2) 86%, transparent); box-shadow: inset 0 0 0 1px var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .fact__viz { height: 84px; display: flex; align-items: center; margin-bottom: 18px; padding-bottom: 16px; border-bottom: 1px dashed var(--line-2); box-sizing: content-box; } .fact > b { display: block; font: 850 2.6rem/1 var(--display); font-stretch: 70%; font-variant-numeric: tabular-nums; } .fact > b small { font-size: .5em; font-stretch: 90%; color: var(--c); margin-left: 4px; } .fact h3 { margin: 10px 0 6px; font: 650 1.05rem/1.3 var(--body); } .fact p { margin: 0; font-size: .92rem; color: var(--mute); line-height: 1.5; } .places { flex-wrap: wrap; align-content: center; gap: 6px; } .places i { font-style: normal; display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px 5px 8px; border-radius: 999px; font: 500 .76rem/1 var(--body); background: rgba(255, 255, 255, .04); box-shadow: inset 0 0 0 1px var(--line); } .places i::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 8px var(--pc); } .places i.more { color: var(--c); } .places i.more::before { display: none; } .area { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 3px; align-content: center; width: 100%; max-width: 250px; } .area i { aspect-ratio: 1; border-radius: 2px; background: rgba(255, 255, 255, .05); transition: background .4s, box-shadow .4s; } .area i.on { background: color-mix(in srgb, var(--c) 72%, transparent); box-shadow: 0 0 10px -3px var(--c); } .js .facts:not(.is-in) .area i.on { background: rgba(255, 255, 255, .05); box-shadow: none; } .loop svg { width: 100%; height: 100%; overflow: visible; } .loop__path { fill: none; stroke: var(--c); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 100; stroke-dashoffset: 0; transition: stroke-dashoffset 1.8s cubic-bezier(.4, .1, .2, 1) .2s; filter: drop-shadow(0 0 6px color-mix(in srgb, var(--c) 60%, transparent)); } .js .facts:not(.is-in) .loop__path { stroke-dashoffset: 100; } .loop__start { fill: var(--walk); stroke: var(--ink-2); stroke-width: 3; } .loop__lab { font: 600 11px var(--mono); fill: var(--mute); } .temps { flex-direction: column; align-items: stretch; justify-content: flex-end; gap: 7px; } .temps__bars { display: flex; align-items: flex-end; gap: 3px; height: 60px; } .temps__bars i { flex: 1; height: calc(var(--h) * 100%); border-radius: 2px 2px 1px 1px; background: color-mix(in srgb, var(--kcal) var(--t), var(--ski)); transform-origin: bottom; transition: transform .7s cubic-bezier(.2, .8, .2, 1); } .js .facts:not(.is-in) .temps__bars i { transform: scaleY(.08); } .temps__axis { display: flex; justify-content: space-between; font: 500 .66rem/1 var(--mono); color: var(--mute-2); } @media (prefers-reduced-motion: reduce) { .loop__path, .temps__bars i, .area i { transition: none; } } /* ——— na żywo: odcinki ——— */ .live { --c: var(--run); --gx: 25%; } /* ——— historia ——— */ .history { --c: var(--walk); --gx: 50%; --gy: 70%; } /* ——— plakaty ——— */ .share { --c: var(--lime); --gx: 70%; --gy: 55%; } .posters { display: flex; justify-content: center; align-items: center; margin-top: 8px; padding-block: 20px; } .poster { margin: 0; width: clamp(150px, 26vw, 300px); flex: none; border-radius: 12px; overflow: hidden; box-shadow: 0 40px 70px -30px rgba(0,0,0,.95), 0 0 0 1px rgba(255,255,255,.07); transition: transform .45s cubic-bezier(.2,.8,.2,1); } .poster img { display: block; width: 100%; height: auto; aspect-ratio: 640 / 1138; } .poster:nth-child(1) { transform: rotate(-6deg) translate(18%, 4%); --pc: var(--run); } .poster:nth-child(2) { transform: translateY(-4%); z-index: 2; } .poster:nth-child(3) { transform: rotate(6deg) translate(-18%, 4%); } .posters:hover .poster:nth-child(1) { transform: rotate(-3deg) translate(4%, 2%); } .posters:hover .poster:nth-child(3) { transform: rotate(3deg) translate(-4%, 2%); } @media (prefers-reduced-motion: reduce) { .poster { transition: none; } } .posters { min-width: 0; } @media (max-width: 600px) { .poster { width: 38vw; } .poster:nth-child(1) { transform: rotate(-6deg) translate(22%, 4%); } .poster:nth-child(3) { transform: rotate(6deg) translate(-22%, 4%); } } /* ——— odżywianie, widżety ——— */ .food { --c: var(--kcal); --gx: 30%; } .duo { display: flex; gap: 5%; justify-content: center; align-items: flex-start; padding-bottom: 72px; min-width: 0; } .duo .phone { --w: 46%; } .duo .phone:nth-child(2) { margin-top: clamp(40px, 8vw, 110px); } .widgets { --c: var(--rest); --gx: 70%; } /* ——— pytania ——— */ .faq { padding-block: clamp(80px, 9vw, 130px); border-top: 1px solid var(--line); } .faq__grid { display: grid; gap: 36px; } @media (min-width: 1000px) { .faq__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); gap: 72px; align-items: start; } .faq__side { position: sticky; top: 110px; } } .faq .h2 { font-size: clamp(2.6rem, 1.6rem + 3.4vw, 4.4rem); } .faq__side p { margin: 20px 0 18px; color: var(--mute); max-width: 24em; } /* kontakt: jedna karta z adresem i przyciskiem, link do pomocy osobno pod nią */ .mailcard { display: flex; align-items: center; gap: 12px; width: min(100%, 380px); padding: 10px; border-radius: 18px; background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); box-shadow: inset 0 0 0 1px var(--line-2); } .mailcard__ico { display: grid; place-items: center; width: 42px; height: 42px; flex: none; border-radius: 12px; background: color-mix(in srgb, var(--lime) 14%, transparent); color: var(--lime); } .mailcard__ico svg { width: 21px; height: 21px; } .mailcard__txt { display: grid; gap: 5px; min-width: 0; flex: 1; } .mailcard__txt small { font: 600 .66rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); } .mailcard__txt a { color: var(--chalk); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .mailcard__txt a:hover { color: var(--lime); } .mailcard__txt code { font: 500 .9rem/1.2 var(--mono); } .mailcard button { appearance: none; border: 0; cursor: pointer; flex: none; height: 38px; padding: 0 15px; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--chalk); font: 650 .84rem/1 var(--body); transition: background .2s, color .2s; } .mailcard button:hover { background: var(--lime); color: var(--lime-ink); } .faq__help { margin-top: 18px; } /* ——— kontakt: opis i adres po lewej, formularz po prawej (wysyłka do n8n w site.js) ——— */ .contact { padding-block: clamp(56px, 7svh, 84px); border-top: 1px solid var(--line); } /* kolejność w HTML: opis, formularz, adres; na szerokim ekranie adres wraca do lewej kolumny pod opis */ .contact__grid { display: grid; gap: 24px; } @media (min-width: 1000px) { .contact__grid { grid-template-columns: minmax(0, 4fr) minmax(0, 7fr); grid-template-rows: auto 1fr; gap: 0 72px; align-items: start; } .contact__side { grid-area: 1 / 1; } .contact .cform { grid-area: 1 / 2 / 3 / 3; } .contact .mailcard { grid-area: 2 / 1; } } .contact__lead { margin: 18px 0 0; max-width: 26em; color: var(--mute); line-height: 1.55; } .contact__facts { display: grid; gap: 9px; margin: 20px 0 24px; padding: 0; list-style: none; font-size: .92rem; color: color-mix(in srgb, var(--chalk) 82%, var(--ink)); } .contact__facts li { display: flex; align-items: center; gap: 10px; } .contact__facts li::before { content: ""; width: 15px; height: 15px; flex: none; background: var(--lime); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.6-6.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.6-6.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } .cform { position: relative; display: grid; gap: 18px; margin: 0; padding: clamp(18px, 2.4vw, 28px); border-radius: 26px; background: radial-gradient(80% 60% at 100% 0%, rgba(199, 240, 74, .07), transparent 70%), linear-gradient(180deg, var(--ink-3), var(--ink-2)); box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 80px -50px rgba(0, 0, 0, .9); } .cform[hidden], .cform [hidden] { display: none !important; } /* temat: przełącznik z czterech pigułek */ .cform__topics { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; border: 0; min-width: 0; } .cform__topics legend { width: 100%; margin-bottom: 10px; padding: 0; font: 600 .8rem/1 var(--body); color: var(--mute); } .cform__topics label { position: relative; cursor: pointer; } .cform__topics input { position: absolute; opacity: 0; inset: 0; margin: 0; cursor: pointer; } .cform__topics span { display: inline-flex; align-items: center; height: 38px; padding: 0 16px; border-radius: 999px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--chalk); font: 600 .88rem/1 var(--body); transition: background .2s, color .2s, box-shadow .2s; } .cform__topics label:hover span { background: rgba(255, 255, 255, .09); } .cform__topics input:checked + span { background: var(--lime); color: var(--lime-ink); box-shadow: 0 8px 20px -10px rgba(199, 240, 74, .7); } .cform__topics input:focus-visible + span { outline: 2px solid var(--lime); outline-offset: 2px; } /* pola */ .cform__row { display: grid; gap: 18px; } @media (min-width: 600px) { .cform__row { grid-template-columns: 1fr 1fr; } } .cform__f { display: grid; gap: 8px; min-width: 0; } .cform__f label { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font: 600 .8rem/1 var(--body); color: var(--mute); } .cform__f label i { margin-right: auto; font-style: normal; font-weight: 500; color: var(--mute-2); } .cform__count { font: 500 .72rem/1 var(--mono); color: var(--mute-2); } .cform__count.is-near { color: var(--kcal); } .cform input[type="text"], .cform input[type="email"], .cform textarea { width: 100%; min-width: 0; margin: 0; padding: 0 15px; border: 0; border-radius: 14px; background: #0d0f12; box-shadow: inset 0 0 0 1px var(--line-2); color: var(--chalk); font: 500 1rem/1.4 var(--body); transition: box-shadow .2s, background .2s; } .cform input[type="text"], .cform input[type="email"] { height: 50px; } .cform textarea { min-height: 140px; padding-block: 13px; resize: vertical; } .cform ::placeholder { color: var(--mute-2); opacity: 1; } .cform input:hover, .cform textarea:hover { box-shadow: inset 0 0 0 1px rgba(229, 238, 210, .26); } .cform input:focus, .cform textarea:focus { outline: none; background: #101317; box-shadow: inset 0 0 0 1.5px var(--lime), 0 0 0 4px rgba(199, 240, 74, .12); } .cform [aria-invalid="true"] { box-shadow: inset 0 0 0 1.5px var(--run) !important; } .cform__err { min-height: 0; font: 500 .8rem/1.3 var(--body); font-style: normal; color: #ff7a70; } .cform__err:empty { display: none; } /* pułapka na boty: pole poza ekranem, ludzie go nie widzą */ .cform__hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* stopka formularza */ .cform__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 20px; } .cform__note { margin: 0; max-width: 30em; font-size: .8rem; line-height: 1.5; color: var(--mute); } .cform__note a { color: var(--chalk); text-underline-offset: 3px; text-decoration-color: var(--line-2); } .cform__note a:hover { color: var(--lime); } .cform__send { appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 10px; height: 52px; padding: 0 22px 0 24px; border-radius: 999px; background: var(--lime); color: var(--lime-ink); font: 750 .98rem/1 var(--body); box-shadow: 0 14px 30px -14px rgba(199, 240, 74, .8); transition: transform .2s, box-shadow .2s, filter .2s; } .cform__send svg { width: 18px; height: 18px; transition: transform .25s cubic-bezier(.3, .7, .2, 1); } .cform__send:hover { transform: translateY(-1px); box-shadow: 0 18px 36px -14px rgba(199, 240, 74, .9); } .cform__send:hover svg { transform: translateX(3px); } .cform__send:focus-visible { outline: 2px solid var(--chalk); outline-offset: 3px; } .cform.is-sending .cform__send { cursor: progress; filter: saturate(.6) brightness(.9); transform: none; } .cform.is-sending .cform__send svg { animation: cform-spin .9s linear infinite; } @keyframes cform-spin { to { transform: rotate(1turn); } } .cform__status { margin: -4px 0 0; font-size: .86rem; line-height: 1.45; color: #ff7a70; } .cform__status:empty { display: none; } .cform__status a { color: inherit; } /* po wysłaniu: podziękowanie w miejscu pól */ .cform__done { display: grid; justify-items: center; gap: 10px; padding: 34px 10px 30px; text-align: center; outline: none; } .cform__ok { display: grid; place-items: center; width: 64px; height: 64px; margin-bottom: 6px; border-radius: 50%; background: var(--lime); color: var(--lime-ink); box-shadow: 0 0 0 10px rgba(199, 240, 74, .12), 0 20px 40px -14px rgba(199, 240, 74, .7); } .cform__ok svg { width: 30px; height: 30px; } .cform__done b { font: 800 1.7rem/1.05 var(--display); font-stretch: 86%; } .cform__done p { margin: 0; color: var(--mute); } .cform__done [data-done-mail] { color: var(--chalk); font-weight: 600; word-break: break-all; } .cform__again { appearance: none; cursor: pointer; margin-top: 10px; height: 42px; padding: 0 18px; border: 0; border-radius: 999px; background: rgba(255, 255, 255, .08); color: var(--chalk); font: 650 .88rem/1 var(--body); } .cform__again:hover { background: rgba(255, 255, 255, .13); } .cform.is-done > :not(.cform__done) { display: none !important; } /* w dokumentach (Pomoc i kontakt) formularz stoi w tekście */ .doc .cform { margin: 22px 0 18px; } .doc .cform p { line-height: 1.5; } @media (max-width: 719px) { .contact { padding-block: 56px 60px; } .contact__lead { font-size: .98rem; } .contact__facts { display: none; } .contact .mailcard { width: 100%; } .cform { padding: 18px; border-radius: 24px; } .cform__topics { display: grid; grid-template-columns: 1fr 1fr; } .cform__topics span { width: 100%; justify-content: center; height: 40px; padding: 0 10px; font-size: .86rem; } .cform__foot { flex-direction: column-reverse; align-items: stretch; } .cform__send { justify-content: center; } .cform__note { text-align: center; max-width: none; } } @media (prefers-reduced-motion: reduce) { .cform.is-sending .cform__send svg { animation: none; } } @media (max-width: 400px) { .mailcard__ico { display: none; } .mailcard { padding-left: 16px; } } .finish__in { display: flex; flex-direction: column; align-items: center; } .finish__icon { width: clamp(96px, 11vw, 132px); aspect-ratio: 1; border-radius: 22.4%; overflow: hidden; box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 90px -10px rgba(199, 240, 74, .4); } .finish__icon img { display: block; width: 100%; height: 100%; } .finish h2 { margin: 34px 0 0; font: 880 clamp(3rem, 1.6rem + 5.4vw, 7rem)/0.88 var(--display); font-stretch: 64%; letter-spacing: -.015em; text-wrap: balance; } .finish h2 span { display: block; color: var(--lime); } .finish p { margin: 22px auto 34px; max-width: 34em; font-size: var(--t-lead); line-height: 1.55; color: color-mix(in srgb, var(--chalk) 76%, var(--ink)); text-wrap: pretty; } .stores--finish { justify-content: center; } .finish__meta { display: grid; grid-template-columns: repeat(4, auto); justify-content: center; gap: 10px 26px; margin: 30px 0 0; padding: 0; list-style: none; font: 500 .8rem/1 var(--mono); color: color-mix(in srgb, var(--chalk) 72%, var(--ink)); } .finish__meta li { display: inline-flex; align-items: center; gap: 8px; white-space: nowrap; } .finish__meta li::before { content: ""; width: 15px; height: 15px; flex: none; background: var(--lime); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.6-6.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.2 8.4l3 3 6.6-6.8' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / contain no-repeat; } /* na wąskim ekranie dwa na dwa, nigdy trzy i jedna sierota */ @media (max-width: 480px) { .finish__meta { grid-template-columns: repeat(2, auto); justify-items: start; } } .foot { border-top: 1px solid var(--line); padding-block: 40px calc(40px + env(safe-area-inset-bottom, 0px)); font-size: .88rem; color: var(--mute); } .foot__grid { display: flex; flex-wrap: wrap; gap: 20px 40px; justify-content: space-between; align-items: flex-start; } .foot nav ul { display: flex; flex-wrap: wrap; gap: 6px 22px; margin: 0; padding: 0; list-style: none; } .foot a { color: var(--chalk); text-decoration: none; } .foot a:hover { color: var(--lime); } .foot__legal { margin-top: 26px; font-size: .78rem; color: var(--mute-2); max-width: 70em; } /* ——— kropki pod przewijanymi ekranami (telefon) ——— */ .dots { display: none; justify-content: center; gap: 6px; position: relative; z-index: 2; margin-top: -40px; } .dots i { width: 6px; height: 6px; border-radius: 3px; background: var(--line-2); transition: width .3s, background .3s; } .dots i.on { width: 20px; background: var(--c); } .roster + .dots { margin-top: 12px; } @media (max-width: 1099px) { .dots[data-for="roster"] { display: flex; } } /* ——— telefon: ciaśniejsze sekcje, szersze przyciski ——— */ @media (max-width: 600px) { .feat { padding-block: 72px; } .hero { padding-block: 28px 32px; } .hero__actions { gap: 18px; } .hero__actions .stores, .stores--finish, .stores--menu { width: 100%; } .hero__actions .store, .stores--finish .store, .stores--menu .store { flex: 1 1 150px; padding: 0 12px 0 8px; gap: 10px; min-height: 56px; } .store__txt b { font-size: 1.04rem; } .eyebrow { letter-spacing: .12em; } .eyebrow::before { width: 16px; } .hero .eyebrow { font-stretch: 100%; letter-spacing: .1em; gap: 8px; } .duo { gap: 4%; } .duo .phone { --w: 48%; } .sec-head { margin-bottom: 36px; } } /* ——— ruch przy przewijaniu (tylko transform; ekrany zawsze widoczne) ——— */ @media (prefers-reduced-motion: no-preference) { [data-drift]:not(.p-main) { will-change: transform; transform: translate3d(0, var(--dy, 0px), 0); } } .sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* ——— mapy: tekst z faktami i teren 3D z jednym ekranem ——— */ .maps2 { display: grid; gap: 44px; align-items: stretch; } @media (min-width: 1000px) { .maps2 { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: 48px; } } .maps2__copy { min-width: 0; } .mapnums { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); margin: 32px 0 0; padding: 0; list-style: none; border-radius: 18px; background: rgba(17, 19, 22, .72); box-shadow: inset 0 0 0 1px var(--line); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .mapnums li { position: relative; padding: 16px 18px 17px; border-top: 1px solid var(--line); } .mapnums li:nth-child(-n+2) { border-top: 0; } .mapnums li:nth-child(even) { border-left: 1px solid var(--line); } .mapnums li::before { content: ""; position: absolute; left: 18px; top: 0; width: 18px; height: 2px; border-radius: 0 0 2px 2px; background: var(--mc); box-shadow: 0 0 10px var(--mc); } .mapnums b { display: block; font: 850 2rem/1 var(--display); font-stretch: 70%; font-variant-numeric: tabular-nums; } .mapnums b small { margin-left: 3px; font-size: .5em; font-stretch: 90%; color: var(--mc); } .mapnums span { display: block; margin-top: 7px; font-size: .84rem; line-height: 1.4; color: var(--mute); } .terra { --r: 28px; position: relative; min-width: 0; min-height: 540px; border-radius: var(--r); isolation: isolate; background: radial-gradient(90% 70% at 62% 34%, rgba(10, 132, 255, .13), transparent 70%), linear-gradient(180deg, #0f1418, #0a0c0f); box-shadow: inset 0 0 0 1px var(--line), 0 50px 100px -60px rgba(0, 0, 0, .9); cursor: grab; touch-action: pan-y; user-select: none; -webkit-user-select: none; } .terra.is-drag { cursor: grabbing; } .terra__gl, .terra__ov { position: absolute; inset: 0; display: block; width: 100%; height: 100%; border-radius: var(--r); } .terra__pins { position: absolute; inset: 0; overflow: hidden; border-radius: var(--r); pointer-events: none; } .pin { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px 6px 8px; border-radius: 10px; white-space: nowrap; will-change: transform; background: rgba(11, 12, 14, .8); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 8px 20px -8px rgba(0, 0, 0, .8); font: 650 .76rem/1 var(--body); color: var(--chalk); transition: opacity .3s; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .pin::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--pc); box-shadow: 0 0 8px var(--pc); } .pin::after { content: ""; position: absolute; left: 50%; top: 100%; width: 1.5px; height: 20px; margin-left: -.75px; background: linear-gradient(var(--pc), transparent); } .pin em { font: 500 .68rem/1 var(--mono); font-style: normal; color: var(--mute); } .js .terra:not(.is-on) .pin { opacity: 0; } .terra__hud { position: absolute; left: 16px; right: 16px; top: 16px; display: flex; justify-content: space-between; align-items: center; gap: 10px; pointer-events: none; } .terra__chip { display: inline-flex; align-items: center; gap: 9px; padding: 5px 12px 5px 5px; border-radius: 999px; background: rgba(11, 12, 14, .74); box-shadow: inset 0 0 0 1px var(--line-2); font: 600 .8rem/1 var(--body); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .terra__chip b { padding: 6px 8px; border-radius: 999px; background: #ff9f0a; color: #1d1203; font: 800 .72rem/1 var(--body); } .terra__hint { font: 500 .7rem/1 var(--mono); color: var(--mute); } .terra__route { position: absolute; right: 16px; bottom: 16px; display: flex; margin: 0; padding: 11px 4px; border-radius: 14px; background: rgba(11, 12, 14, .76); box-shadow: inset 0 0 0 1px var(--line-2); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .terra__route div { padding: 0 13px; border-left: 1px solid var(--line); } .terra__route div:first-child { border-left: 0; } .terra__route dt { font: 650 .58rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); } .terra__route dd { display: flex; align-items: center; gap: 7px; margin: 6px 0 0; font: 650 .95rem/1 var(--body); white-space: nowrap; } .terra__route .trailmark { margin: 0; } .terra__route .trailmark i { width: 5px; height: 11px; } .terra__phone { position: absolute; z-index: 2; left: -34px; bottom: -40px; --w: clamp(160px, 14vw, 206px); --c: var(--walk); transform: rotate(-5deg); } @media (max-width: 999px) { .terra { min-height: 0; aspect-ratio: 5 / 6; max-height: 640px; } .terra__phone { --w: clamp(104px, 30vw, 180px); left: -8px; bottom: -30px; } .terra__hint { display: none; } } @media (max-width: 600px) { .terra { --r: 22px; aspect-ratio: 4 / 5; } .terra__route div:first-child { display: none; } .terra__route div:nth-child(2) { border-left: 0; } .terra__route { padding: 9px 2px; } .terra__route div { padding: 0 10px; } .pin { padding: 5px 8px 5px 7px; font-size: .7rem; } } /* ——— na żywo: jeden ekran i aktywność na ekranie blokady ——— */ .livepair { position: relative; display: flex; align-items: center; min-width: 0; padding: 8px 0 24px; } .livepair__phone { --w: clamp(230px, 22vw, 290px); margin-left: 4%; } .livepair__side { position: relative; z-index: 2; flex: 1; min-width: 0; margin-left: -64px; margin-top: 120px; max-width: 380px; } .la { padding: 14px 16px 14px; border-radius: 26px; color: #fff; background: rgba(30, 31, 34, .72); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 80px -30px rgba(0, 0, 0, .95); -webkit-backdrop-filter: blur(22px) saturate(1.4); backdrop-filter: blur(22px) saturate(1.4); } .la__app { display: flex; align-items: center; gap: 7px; font: 600 .66rem/1 var(--body); letter-spacing: .02em; color: rgba(255, 255, 255, .55); } .la__app svg { width: 13px; height: 13px; color: var(--lime); } .la__turn { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 13px; align-items: center; margin-top: 11px; } .la__ico { width: 56px; height: 56px; border-radius: 15px; display: grid; place-items: center; background: #ff453a; box-shadow: inset 0 -10px 20px rgba(0, 0, 0, .15); transition: background .3s; } .la__ico svg { width: 30px; height: 30px; transition: transform .35s cubic-bezier(.2, .8, .2, 1); } .la__dist { display: block; font: 800 2rem/1 var(--display); font-stretch: 82%; font-variant-numeric: tabular-nums; } .la__dist small { margin-left: 3px; font: 700 .9rem/1 var(--body); } .la__what { display: block; margin-top: 4px; font: 650 .95rem/1.2 var(--body); } .la__then { display: block; margin-top: 4px; font-size: .74rem; color: rgba(255, 255, 255, .55); } .la__row { display: grid; grid-template-columns: auto auto 1fr auto; gap: 14px; align-items: center; margin-top: 14px; padding-top: 12px; border-top: 1px solid rgba(255, 255, 255, .1); } .la__row b { display: block; font: 700 1.05rem/1 var(--body); font-variant-numeric: tabular-nums; } .la__row b small { margin-left: 2px; font-size: .7rem; } .la__row span:not(.la__btn) { display: block; margin-top: 4px; font: 650 .54rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .5); } .la__btn { justify-self: end; padding: 9px 13px; border-radius: 999px; background: #fff; color: #000; font: 700 .76rem/1 var(--body); } .la__btn--stop { background: #ff453a; color: #fff; } .la.is-turn .la__dist { animation: la-pop .4s ease; } @keyframes la-pop { 40% { transform: scale(1.06); } } .livepair__cap { margin: 16px 6px 0 84px; font-size: var(--t-small); color: var(--mute); line-height: 1.45; } .livepair__cap b { display: block; color: var(--chalk); font-weight: 600; } @media (max-width: 999px) { .livepair { justify-content: center; } .livepair__phone { margin-left: 0; } .livepair__side { max-width: 340px; } } @media (max-width: 600px) { .livepair { flex-direction: column; align-items: center; padding-bottom: 0; } .livepair__phone { --w: 62vw; } .livepair__side { margin: -150px 0 0; width: min(100%, 340px); flex: none; } .la__row { grid-template-columns: auto auto 1fr; } .la__row .la__btn:last-child { display: none; } } @media (max-width: 600px) { .livepair__cap { margin-left: 6px; } } /* ——— widżety zbudowane jak w aplikacji ——— */ .wboard { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; width: 100%; max-width: 620px; justify-self: center; } .wg { position: relative; overflow: hidden; min-width: 0; padding: 16px; border-radius: 26px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08), 0 30px 60px -34px rgba(0, 0, 0, .9); } .wg__lab { font: 650 .62rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: rgba(255, 255, 255, .6); } .wg--large { grid-column: 1 / 3; grid-row: 1 / 3; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; background: radial-gradient(90% 60% at 10% 0%, rgba(199, 240, 74, .16), transparent 70%), linear-gradient(170deg, #1b2215, #111410 60%, #0e100f); } .wg__date { display: flex; align-items: center; gap: 12px; } .wg__cal { width: 42px; border-radius: 10px; overflow: hidden; text-align: center; background: #f5f5f0; color: #111; } .wg__cal small { display: block; padding: 3px 0; background: var(--lime); color: var(--lime-ink); font: 800 .52rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; } .wg__cal b { display: block; padding: 3px 0 4px; font: 800 1.15rem/1 var(--body); } .wg__date div b { display: block; font: 750 1.25rem/1.1 var(--body); } .wg__date div span { display: block; margin-top: 2px; font-size: .82rem; color: var(--lime); } .wg__today { display: grid; grid-template-columns: 40px minmax(0, 1fr) 38px; gap: 11px; align-items: center; padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .06); } .wg__ico { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; color: var(--lime); background: rgba(199, 240, 74, .16); } .wg__ico svg { width: 22px; height: 22px; } .wg__today small { display: flex; align-items: center; gap: 5px; font: 700 .58rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--lime); } .wg__today small::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--lime); } .wg__today b { display: block; margin-top: 4px; font: 700 1rem/1.15 var(--body); } .wg__today div span { display: block; margin-top: 2px; font-size: .74rem; color: rgba(255, 255, 255, .55); } .wg__play { width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; background: var(--lime); color: var(--lime-ink); } .wg__play svg { width: 16px; height: 16px; margin-left: 2px; } .wg__rings { display: grid; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; align-items: center; padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, .04); } .rings { width: 104px; height: 104px; transform: rotate(-90deg); } .rings circle { fill: none; stroke-width: 9; stroke-linecap: round; } .rings .t1 { stroke: rgba(199, 240, 74, .16); } .rings .t2 { stroke: rgba(108, 184, 255, .16); } .rings .t3 { stroke: rgba(255, 105, 180, .16); } .rings .r1, .rings .r2, .rings .r3 { stroke-dasharray: var(--v) 100; } .rings .r1 { stroke: var(--lime); } .rings .r2 { stroke: var(--rest); } .rings .r3 { stroke: var(--yoga); } .wg__rings ul { display: grid; gap: 7px; margin: 0; padding: 0; list-style: none; } .wg__rings li { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } .wg__rings li span { display: flex; align-items: center; gap: 6px; font: 650 .58rem/1.2 var(--body); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .62); } .wg__rings li span::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--rc); } .wg__rings li b { font: 750 1.05rem/1 var(--body); font-variant-numeric: tabular-nums; white-space: nowrap; } .wg__rings li b small { font-size: .62rem; color: rgba(255, 255, 255, .5); font-weight: 600; } .wg__week { padding: 10px; border-radius: 16px; background: rgba(255, 255, 255, .04); } .wg__wk { display: flex; justify-content: space-between; gap: 8px; font: 650 .58rem/1 var(--body); letter-spacing: .08em; text-transform: uppercase; color: rgba(255, 255, 255, .55); } .wg__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin-top: 9px; } .wg__days i { display: grid; justify-items: center; gap: 5px; font: 650 .6rem/1 var(--body); font-style: normal; color: rgba(255, 255, 255, .45); } .wg__days i::before { content: ""; width: 100%; height: 12px; border-radius: 4px; background: rgba(255, 255, 255, .08); order: -1; } .wg__days i.on::before { background: var(--dc); } .wg__days i.soft::before { opacity: .55; } .wg__days i.now { color: var(--lime); } .wg__days i.now::before { background: transparent; box-shadow: inset 0 0 0 1.5px var(--lime); } .wg--water { grid-column: 3; grid-row: 1; aspect-ratio: 1; padding: 14px; background: #0a1626; } .wg__wave { position: absolute; left: 0; right: 0; bottom: 0; height: 42%; background: linear-gradient(180deg, rgba(64, 156, 255, .85), rgba(10, 92, 200, .9)); } .wg__wave svg { position: absolute; left: 0; bottom: calc(100% - 1px); width: 200%; height: 14px; fill: rgba(64, 156, 255, .85); animation: wave 3.6s linear infinite; } .wg--water > :not(.wg__wave) { position: relative; } .wg__l { display: block; margin-top: 8px; font: 800 2.1rem/1 var(--display); font-stretch: 80%; } .wg__l small { margin-left: 3px; font: 700 .9rem/1 var(--body); } .wg__of { display: block; margin-top: 3px; font-size: .74rem; color: rgba(255, 255, 255, .7); } .wg--lock { grid-column: 3; grid-row: 2; aspect-ratio: 1; padding: 14px; display: flex; flex-direction: column; background: radial-gradient(80% 70% at 20% 0%, #5a4bd1, transparent 70%), linear-gradient(170deg, #34306b, #1b2246); } .lockrow { flex: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; place-items: center; margin-top: 8px; } .lockc { position: relative; width: min(100%, 62px); aspect-ratio: 1; border-radius: 50%; display: grid; place-content: center; text-align: center; background: rgba(255, 255, 255, .1); } .lockc::before { content: ""; position: absolute; inset: 0; border-radius: 50%; padding: 3.5px; background: conic-gradient(#fff calc(var(--v, 0) * 1turn), rgba(255, 255, 255, .22) 0); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); mask-composite: exclude; } .lockc b { font: 750 .78rem/1 var(--body); } .lockc small { margin-top: 2px; font: 650 .44rem/1 var(--body); letter-spacing: .06em; text-transform: uppercase; color: rgba(255, 255, 255, .7); } .lockc--go::before { display: none; } .lockc--go svg { width: 18px; height: 18px; margin: 0 auto; } .wg--health { grid-column: 1 / -1; display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 18px; align-items: center; background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); } .wg__htop { display: flex; align-items: center; gap: 12px; } .wg__htop b { display: block; font: 700 1rem/1.15 var(--body); white-space: nowrap; } .wg__htop div span { display: block; margin-top: 3px; font-size: .76rem; color: var(--mute); white-space: nowrap; } .wg__heart { flex: none; width: 42px; height: 42px; border-radius: 12px; display: grid; place-items: center; color: #ff375f; background: rgba(255, 55, 95, .14); } .wg__heart svg { width: 22px; height: 22px; } .wg__toggles { display: grid; gap: 2px; margin: 0; padding: 0 0 0 18px; list-style: none; border-left: 1px solid var(--line); } .wg__toggles li { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 5px 0; font-size: .86rem; } .tgl { appearance: none; border: 0; cursor: pointer; flex: none; position: relative; width: 42px; height: 25px; border-radius: 999px; background: rgba(255, 255, 255, .16); transition: background .25s; } .tgl::after { content: ""; position: absolute; left: 2px; top: 2px; width: 21px; height: 21px; border-radius: 50%; background: #fff; box-shadow: 0 2px 6px rgba(0, 0, 0, .35); transition: transform .25s cubic-bezier(.3, .7, .3, 1); } .tgl[aria-pressed="true"] { background: #ff453a; } .tgl[aria-pressed="true"]::after { transform: translateX(17px); } .tgl:focus-visible { outline: 2px solid var(--chalk); outline-offset: 2px; } @media (max-width: 600px) { .wboard { gap: 10px; } .wg { border-radius: 22px; } .wg--large { grid-column: 1 / -1; grid-row: auto; } .wg--water { grid-column: 1 / 3; grid-row: auto; aspect-ratio: auto; min-height: 150px; } .wg--lock { grid-column: 3; grid-row: auto; aspect-ratio: auto; } .wboard { grid-template-columns: repeat(3, minmax(0, 1fr)); } .wg--water { grid-column: 1 / 2; } .wg--lock { grid-column: 2 / 4; } .lockrow { grid-template-columns: repeat(4, 1fr); } .lockc { width: min(100%, 52px); } .wg--health { grid-template-columns: 1fr; gap: 12px; } .wg__toggles { padding: 12px 0 0; border-left: 0; border-top: 1px solid var(--line); } } @media (prefers-reduced-motion: reduce) { .wg__wave svg { animation: none; } } /* ——— meta: bieżnia od startu do linii mety ——— */ .finish { position: relative; padding-block: clamp(84px, 9vw, 120px) clamp(150px, 15vw, 210px); border-top: 1px solid var(--line); overflow: hidden; isolation: isolate; text-align: center; } .finish::before { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(40% 42% at 50% 30%, rgba(199, 240, 74, .12), transparent 70%); } .finish__icon { width: clamp(84px, 8vw, 108px); } .finish h2 { margin-top: 28px; font-size: clamp(2.8rem, 1.5rem + 4.4vw, 5.6rem); } .finish p { margin: 20px auto 30px; } .finish__meta { margin-top: 24px; } /* ——— dyscypliny: galeria 13 torów z grafikami z aplikacji ——— */ .lanes { position: relative; padding-block: clamp(40px, 3.6vw, 60px); border-top: 1px solid var(--line); } .lanes .sec-head { margin-bottom: clamp(22px, 2.4vw, 34px); } .roster { display: grid; grid-template-columns: repeat(14, minmax(0, 1fr)); gap: 12px; margin: 0; padding: 0; list-style: none; } .rc { grid-column: span 2; position: relative; min-width: 0; border-radius: 18px; overflow: hidden; background: #070809; box-shadow: inset 0 0 0 1px var(--line); transition: transform .4s cubic-bezier(.2, .8, .2, 1), box-shadow .4s; } /* drugi rząd przesunięty o pół karty, jak tory na bieżni */ .rc:nth-child(8) { grid-column: 2 / span 2; } .rc__art { position: relative; aspect-ratio: 1; overflow: hidden; } .rc__art img { display: block; width: 100%; height: 100%; object-fit: cover; filter: saturate(.9) brightness(.9); transition: transform .7s cubic-bezier(.2, .8, .2, 1), filter .4s; } .rc__art::after { content: ""; position: absolute; inset: auto 0 0; height: 30%; background: linear-gradient(0deg, #070809 6%, transparent); } .rc__txt { position: relative; margin-top: -36px; padding: 0 14px 14px; } .rc__no { font: 600 .64rem/1 var(--mono); letter-spacing: .04em; color: var(--lc); } .rc h3 { margin: 6px 0 0; font: 700 1rem/1.15 var(--body); letter-spacing: -.005em; } .rc p { margin: 5px 0 0; min-height: 2.7em; font-size: .76rem; line-height: 1.35; color: var(--mute); } /* linia toru pod kartą */ .rc::after { content: ""; position: absolute; left: 14px; right: 14px; bottom: 0; height: 2px; border-radius: 2px 2px 0 0; background: var(--lc); box-shadow: 0 0 12px var(--lc); opacity: .5; transition: opacity .35s, left .35s, right .35s; } .rc:hover { transform: translateY(-5px); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lc) 45%, transparent), 0 26px 50px -26px color-mix(in srgb, var(--lc) 60%, transparent); } .rc:hover .rc__art img { transform: scale(1.06); filter: none; } .rc:hover::after { opacity: 1; left: 0; right: 0; } .js .roster:not(.is-in) .rc { opacity: 0; } .roster.is-in .rc { animation: rc-in .7s cubic-bezier(.2, .8, .2, 1) backwards; animation-delay: calc(var(--i) * 50ms); } @keyframes rc-in { from { opacity: 0; transform: translateY(18px); } } @media (max-width: 1099px) { .roster { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 6px var(--gutter) 8px; scroll-padding-inline: var(--gutter); } .roster::-webkit-scrollbar { display: none; } .rc { flex: 0 0 clamp(170px, 42vw, 230px); scroll-snap-align: start; } .rc:hover { transform: none; } } @media (prefers-reduced-motion: reduce) { .roster.is-in .rc { animation: none; } .rc, .rc__art img { transition: none; } } /* ——— plan na dziś: tydzień i dzień z ilustracjami ćwiczeń ——— */ .plan { --gx: 72%; } .planner__prog { display: grid; grid-template-columns: auto auto; gap: 8px 14px; align-items: center; font-size: .78rem; color: var(--mute); } .planner__prog b { font: 600 .78rem/1 var(--mono); color: var(--chalk); text-align: right; } .planner__seg { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(3, 44px); gap: 4px; } .planner__seg i { height: 4px; border-radius: 2px; background: rgba(255, 255, 255, .09); } .planner__seg i.on { background: var(--lime); box-shadow: 0 0 10px rgba(199, 240, 74, .45); } /* stan dnia: zrobiony, regeneracja, dziś, do zaplanowania */ .st { position: relative; display: block; width: 18px; height: 18px; border-radius: 50%; background: center / 11px no-repeat; } .is-done .st { background-color: var(--lime); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.8 6.3 5 8.4 9.2 3.7' fill='none' stroke='%23161d05' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } .is-rest .st { background-color: rgba(108, 184, 255, .16); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M9.4 7.7A3.9 3.9 0 0 1 4.3 2.6a4 4 0 1 0 5.1 5.1Z' fill='%236cb8ff'/%3E%3C/svg%3E"); } .is-today .st { box-shadow: inset 0 0 0 2px var(--lime); } .is-today .st::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--lime); animation: st-pulse 2.4s ease-in-out infinite; } @keyframes st-pulse { 50% { transform: scale(.55); opacity: .6; } } .is-plan .st { box-shadow: inset 0 0 0 2px var(--lime); } .is-plan .st::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: var(--lime); opacity: .6; } .is-free .st { box-shadow: inset 0 0 0 1.5px var(--line-2); background-size: 8px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 10'%3E%3Cpath d='M5 1.5v7M1.5 5h7' stroke='%239a9f93' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); } @keyframes pday-in { from { opacity: 0; transform: translateY(5px); } } .pday__when { font: 650 .66rem/1 var(--display); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--dc); } .pday__title { margin: 12px 0 0; font: 800 1.9rem/1.02 var(--display); font-stretch: 78%; letter-spacing: -.005em; } .pday__meta { display: flex; flex-wrap: wrap; margin: 7px 0 0; font-size: .86rem; color: var(--mute); } .pday__meta span + span::before { content: "·"; margin: 0 8px; color: var(--mute-2); } .pday__list { display: grid; gap: 2px; margin: 14px -8px 0 -6px; padding: 0; list-style: none; } .pday__list li { display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 5px 8px 5px 6px; border-radius: 12px; transition: background .2s; } .pday__list li:hover { background: rgba(255, 255, 255, .03); } .pday__th { position: relative; width: 42px; height: 42px; } .pday__th img { display: block; width: 100%; height: 100%; border-radius: 11px; object-fit: cover; background: #050505; box-shadow: 0 0 0 1px var(--line); } .pday__list .is-ok .pday__th::after { content: ""; position: absolute; right: -4px; bottom: -4px; width: 17px; height: 17px; border-radius: 50%; background: var(--lime) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.8 6.3 5 8.4 9.2 3.7' fill='none' stroke='%23161d05' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 11px no-repeat; box-shadow: 0 0 0 2px var(--ink-3); } .pday__list b { display: block; font: 600 .92rem/1.25 var(--body); } .pday__list div > span { display: block; margin-top: 3px; font: 500 .74rem/1 var(--mono); color: var(--mute); } .pday__list em { font: 650 .92rem/1 var(--body); font-style: normal; font-variant-numeric: tabular-nums; white-space: nowrap; } .pday__list em small { margin-left: 2px; font-size: .72rem; color: var(--mute); } .pday__list em.bw { font: 500 .72rem/1 var(--mono); color: var(--mute); } .pday__list .more { display: block; padding: 6px 8px; font-size: .82rem; color: var(--mute); } .pday__foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-top: auto; padding-top: 14px; } .pday__go { appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 12px 20px 12px 16px; border-radius: 999px; background: var(--lime); color: var(--lime-ink); font: 700 .95rem/1 var(--body); text-decoration: none; box-shadow: 0 12px 30px -14px rgba(199, 240, 74, .9); transition: filter .2s, transform .15s, background .25s, color .25s, box-shadow .25s; } .pday__go:hover { filter: brightness(1.06); } .pday__go:active { transform: scale(.98); } .pday__go:focus-visible { outline: 2px solid var(--chalk); outline-offset: 3px; border-radius: 999px; } .pday__go svg { width: 16px; height: 16px; } .pday__go:disabled { background: var(--ink-4); color: var(--mute); box-shadow: none; cursor: default; filter: none; } .pday__go.is-saved { background: color-mix(in srgb, var(--lime) 15%, var(--ink-3)); color: var(--lime); box-shadow: none; cursor: default; filter: none; } .pday__note { display: inline-flex; align-items: center; gap: 7px; font-size: .8rem; color: var(--mute); text-align: right; } .pday__note svg { width: 14px; height: 14px; flex: none; } .pday__sum { display: flex; align-items: center; gap: 18px; margin-top: auto; padding-top: 14px; border-top: 1px solid var(--line); } .pday__sum div + div { padding-left: 18px; border-left: 1px solid var(--line); } .pday__sum b { display: block; font: 800 1.35rem/1 var(--display); font-stretch: 78%; font-variant-numeric: tabular-nums; white-space: nowrap; } .pday__sum b small { margin-left: 2px; font: 600 .7rem/1 var(--body); color: var(--mute); } .pday__sum span { display: block; margin-top: 5px; font-size: .72rem; color: var(--mute); } .pday__pr { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px; border-radius: 999px; background: color-mix(in srgb, var(--kcal) 15%, transparent); color: var(--kcal); font: 650 .76rem/1 var(--body); white-space: nowrap; } .pday__pr svg { width: 13px; height: 13px; } .pday__rest { display: grid; grid-template-columns: 104px minmax(0, 1fr) auto; gap: 14px; align-items: center; margin-top: 18px; padding: 8px 14px 8px 8px; border-radius: 18px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--line); } .pday__rest b { display: block; font-weight: 650; line-height: 1.25; } .pday__rest span { display: block; margin-top: 4px; font-size: .82rem; color: var(--mute); } .pday__rest em { display: inline-flex; align-items: center; gap: 6px; font: 650 .76rem/1 var(--body); font-style: normal; color: var(--lime); white-space: nowrap; } .pday__rest em svg { width: 14px; height: 14px; } .pday__next { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 14px; align-items: center; margin-top: 12px; padding: 14px 16px; border-radius: 18px; background: rgba(199, 240, 74, .05); box-shadow: inset 0 0 0 1px rgba(199, 240, 74, .16); } .pday__next .label { grid-column: 1 / -1; font-size: .6rem; color: var(--lime); } .pday__next b { display: block; font: 650 1rem/1.25 var(--body); } .pday__next div > span { display: block; margin-top: 3px; font-size: .8rem; color: var(--mute); } .pday__ths { display: flex; } .pday__ths .pday__th { width: 36px; height: 36px; margin-left: -8px; } .pday__ths .pday__th:first-child { margin-left: 0; } .pday__ths img { border-radius: 10px; box-shadow: 0 0 0 2px var(--ink-3); } @media (max-width: 480px) { .pday__ths .pday__th:nth-child(n+4) { display: none; } } .pday__calm { display: flex; gap: 12px; align-items: flex-start; margin-top: auto; padding: 14px 16px; border-radius: 16px; background: rgba(108, 184, 255, .07); box-shadow: inset 0 0 0 1px rgba(108, 184, 255, .16); font-size: .86rem; line-height: 1.5; color: color-mix(in srgb, var(--chalk) 80%, transparent); } .pday__calm svg { flex: none; width: 18px; height: 18px; margin-top: 2px; color: var(--rest); } .pday__parts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; } .pday__parts button { appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 0; padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, .05); color: var(--chalk); box-shadow: inset 0 0 0 1px var(--line); font: 600 .82rem/1 var(--body); transition: background .2s, color .2s, box-shadow .2s, gap .2s; } .pday__parts button::before { content: ""; width: 0; height: 12px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.8 6.3 5 8.4 9.2 3.7' fill='none' stroke='%23161d05' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") center / 12px no-repeat; transition: width .2s; } .pday__parts button:hover { background: rgba(255, 255, 255, .09); } .pday__parts button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 999px; } .pday__parts [aria-pressed="true"] { gap: 6px; background: var(--lime); color: var(--lime-ink); box-shadow: none; } .pday__parts [aria-pressed="true"]::before { width: 12px; } .pday__built { margin-top: 14px; padding-top: 12px; border-top: 1px dashed var(--line-2); } .pday__built > span { font: 650 .62rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--mute-2); } .pday__built .pday__list { margin-top: 6px; } .pday__built .pday__list li { grid-template-columns: 34px minmax(0, 1fr) auto; padding-block: 4px; } .pday__built .pday__th { width: 34px; height: 34px; } .pday__built .pday__th img { border-radius: 9px; } .pday__built .pday__list em { font: 500 .78rem/1 var(--mono); color: var(--mute); } .pday__hint { margin: 10px 0 0; font-size: .86rem; color: var(--mute); line-height: 1.5; } @media (max-width: 480px) { .planner__seg { grid-template-columns: repeat(3, 28px); } .pday__title { font-size: 1.7rem; } .pday__sum { gap: 12px; flex-wrap: wrap; } .pday__sum div + div { padding-left: 12px; } .pday__pr { margin-left: 0; } .pday__rest { grid-template-columns: 84px minmax(0, 1fr); } .pday__rest em { grid-column: 2; } } @media (prefers-reduced-motion: reduce) { .is-today .st::after { animation: none; } } /* ——— siłownia: ćwiczenie z ilustracją, serie, sylwetka i minutnik przerwy ——— */ .gymsec, .live { padding-block: clamp(56px, 4.8vw, 72px); } .gym2 { display: grid; gap: 48px; align-items: center; } @media (min-width: 1000px) { .gym2 { grid-template-columns: minmax(0, 1fr) minmax(0, 600px); gap: clamp(40px, 5vw, 80px); } } .gym2__copy { min-width: 0; max-width: 620px; } .gymfacts { display: grid; margin: 26px 0 0; padding: 0; list-style: none; border-top: 1px solid var(--line); } .gymfacts li { display: grid; grid-template-columns: 120px minmax(0, 1fr); gap: 22px; align-items: center; padding: 14px 0; border-bottom: 1px solid var(--line); } .gymfacts h3 { margin: 0; font: 650 1.08rem/1.25 var(--body); } .gymfacts p { margin: 4px 0 0; color: var(--mute); font-size: .92rem; line-height: 1.5; } .gymfacts__k b { font: 850 2.3rem/1 var(--display); font-stretch: 70%; color: var(--lime); font-variant-numeric: tabular-nums; white-space: nowrap; } .gymfacts__k b small { margin-left: 3px; font: 600 .8rem/1 var(--body); color: var(--mute); } .types-mini { display: flex; gap: 4px; } .types-mini span { width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 .72rem/1 var(--mono); color: var(--tc); background: color-mix(in srgb, var(--tc) 15%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 45%, transparent); } @media (max-width: 480px) { .gymfacts li { grid-template-columns: 1fr; gap: 10px; } } .gx { display: grid; grid-template-columns: minmax(0, 1fr) 156px; gap: 16px; align-items: center; width: 100%; max-width: 600px; justify-self: center; } .gx__card { position: relative; margin: 0; min-width: 0; border-radius: 26px; overflow: hidden; background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); box-shadow: inset 0 0 0 1px var(--line), 0 50px 100px -50px rgba(0, 0, 0, .95), 0 30px 90px -60px rgba(199, 240, 74, .5); } .gx__art { position: relative; aspect-ratio: 16 / 9; background: #060607; } .gx__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; } .gx__art::after { content: ""; position: absolute; inset: auto 0 0; height: 45%; background: linear-gradient(0deg, var(--ink-3), transparent); } .gx__crumb { position: absolute; left: 12px; top: 12px; display: inline-flex; align-items: center; gap: 8px; padding: 7px 11px; border-radius: 999px; background: rgba(8, 9, 10, .62); color: rgba(255, 255, 255, .86); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .08); font: 600 .72rem/1 var(--body); } .gx__crumb i { width: 7px; height: 7px; border-radius: 50%; background: var(--lime); box-shadow: 0 0 8px var(--lime); } .gx__head { position: relative; display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; margin-top: -14px; padding: 0 18px; } .gx__head h3 { margin: 0; font: 750 1.18rem/1.15 var(--body); } .gx__head div > span { display: block; margin-top: 5px; font-size: .78rem; color: var(--mute); } .gx__pr { flex: none; text-align: right; } .gx__pr small { display: block; font: 650 .6rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--kcal); } .gx__pr b { display: block; margin-top: 5px; font: 700 .86rem/1 var(--mono); } .gx__sets { display: grid; gap: 2px; margin: 12px 0 0; padding: 0 10px 12px; list-style: none; } .gx__sets li { display: grid; grid-template-columns: 28px minmax(0, 1fr) auto 22px; gap: 12px; align-items: center; padding: 6px 8px; border-radius: 12px; } .gx__sets .n { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; font: 700 .74rem/1 var(--mono); color: var(--tc); background: color-mix(in srgb, var(--tc) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 40%, transparent); } .gx__sets .v { font: 650 .95rem/1 var(--body); font-variant-numeric: tabular-nums; } .gx__sets .t { font: 500 .7rem/1 var(--mono); color: var(--mute); } .gx__sets .s { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; box-shadow: inset 0 0 0 1.5px var(--line-2); } .gx__sets .s svg { width: 13px; height: 13px; } .gx__sets .ok .s { background: var(--lime); color: var(--lime-ink); box-shadow: none; } .gx__sets .ok .v { color: color-mix(in srgb, var(--chalk) 72%, transparent); } .gx__sets .cur { background: color-mix(in srgb, var(--lime) 9%, transparent); box-shadow: inset 3px 0 0 var(--lime); } .gx__sets .cur .n { background: var(--lime); color: var(--lime-ink); box-shadow: none; } .gx__sets .cur .t { color: var(--lime); } .gx__sets .cur .s { box-shadow: inset 0 0 0 1.5px var(--lime); } .gx__side { display: grid; gap: 14px; justify-items: center; } .gx__body { margin: 0; text-align: center; } .gx__body figcaption { margin-top: 8px; } .gx__body .label { display: block; font-size: .58rem; color: var(--lime); } .gx__body b { display: block; margin-top: 4px; font: 600 .82rem/1.2 var(--body); } .gx__rest { width: 100%; display: grid; justify-items: center; gap: 8px; padding: 14px 12px 12px; border-radius: 22px; background: rgba(24, 26, 29, .86); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09), 0 30px 60px -24px rgba(0, 0, 0, .95); } .gx__rest .label { font-size: .6rem; color: var(--lime); } .gx__dial { position: relative; width: 96px; height: 96px; } .gx__dial svg { width: 100%; height: 100%; transform: rotate(-90deg); } .gx__dial circle { fill: none; stroke-width: 4.5; } .gx__dial .tr { stroke: rgba(255, 255, 255, .09); } .gx__dial .pr { stroke: var(--lime); stroke-linecap: round; stroke-dasharray: 82 100; transition: stroke-dasharray 1s linear; filter: drop-shadow(0 0 4px rgba(199, 240, 74, .55)); } .gx__dial b { position: absolute; inset: 0; display: grid; place-items: center; font: 800 1.6rem/1 var(--display); font-stretch: 80%; font-variant-numeric: tabular-nums; } .gx__rest small { font-size: .72rem; color: var(--mute); text-align: center; } .gx__rest.is-zero .gx__dial b { color: var(--lime); } .gx__rbtn { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; } .gx__rbtn button { appearance: none; border: 0; cursor: pointer; padding: 8px 0; border-radius: 10px; background: rgba(255, 255, 255, .07); color: var(--chalk); font: 600 .76rem/1 var(--body); transition: background .2s; } .gx__rbtn button:hover { background: rgba(255, 255, 255, .13); } @media (max-width: 560px) { .gx { grid-template-columns: minmax(0, 1fr); } .gx__side { grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; } } /* ——— na żywo: wykres tempa w kolorach stref tętna ——— */ .live { --z2: #34c759; --z3: #f2c230; --z4: #ff9f0a; --z5: #ff453a; } .run { margin-top: 22px; max-width: 540px; padding: 18px 20px 16px; border-radius: 24px; background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); box-shadow: inset 0 0 0 1px var(--line), 0 40px 80px -50px rgba(0, 0, 0, .9); } .run__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; } .run__title { display: block; font: 650 1.06rem/1.2 var(--body); } .run__meta { display: block; margin-top: 5px; font: 500 .74rem/1 var(--mono); color: var(--mute); } .run__zones { display: flex; gap: 10px; margin: 3px 0 0; padding: 0; list-style: none; font: 600 .64rem/1 var(--mono); color: var(--mute); } .run__zones li { display: flex; align-items: center; gap: 5px; } .run__zones li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--z); } .run__stats { display: grid; grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 10px; margin: 14px 0 0; padding: 12px 0; border-block: 1px solid var(--line); } .run__stats dt { font: 650 .6rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--mute-2); } .run__stats dd { margin: 6px 0 0; font: 800 1.45rem/1 var(--display); font-stretch: 78%; font-variant-numeric: tabular-nums; white-space: nowrap; } .run__stats dd small { margin-left: 3px; font: 600 .7rem/1 var(--body); color: var(--mute); } .run__chart { position: relative; display: flex; align-items: flex-end; gap: 6px; height: 158px; margin-top: 12px; padding-top: 18px; } .run__bar { flex: 1 1 0; min-width: 0; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; gap: 6px; appearance: none; border: 0; background: none; padding: 0; cursor: pointer; color: var(--mute); font: inherit; } .run__bar.is-part { flex-grow: .55; } .run__bar .p, .run__bar .k { font: 600 .64rem/11px var(--mono); text-align: center; white-space: nowrap; transition: color .2s; } .run__bar .k { color: var(--mute-2); } .run__bar i { display: block; height: calc((100% - 34px) * var(--h)); border-radius: 8px 8px 4px 4px; transform-origin: 50% 100%; background: linear-gradient(180deg, var(--z), color-mix(in srgb, var(--z) 50%, var(--ink-2))); opacity: .78; transition: opacity .2s, box-shadow .25s; } .run__bar.is-part i { background: repeating-linear-gradient(135deg, color-mix(in srgb, var(--z) 70%, transparent) 0 4px, color-mix(in srgb, var(--z) 20%, transparent) 4px 8px); } .run__bar:hover i { opacity: 1; } .run__bar[aria-pressed="true"] i { opacity: 1; box-shadow: 0 0 0 2px var(--ink-2), 0 0 0 3.5px var(--chalk), 0 0 22px color-mix(in srgb, var(--z) 55%, transparent); } .run__bar[aria-pressed="true"] .p, .run__bar[aria-pressed="true"] .k { color: var(--chalk); } .run__bar.is-best .p { color: var(--lime); } .run__bar:focus-visible { outline: none; } .run__bar:focus-visible .k { color: var(--lime); text-decoration: underline; text-underline-offset: 3px; } .run__avg { position: absolute; left: 0; right: 0; bottom: calc(17px + (100% - 52px) * var(--avg)); border-top: 1px dashed rgba(238, 241, 231, .3); pointer-events: none; z-index: 1; } .run__key { position: absolute; left: 0; top: 0; display: inline-flex; align-items: center; gap: 7px; font: 600 .6rem/1 var(--mono); color: var(--mute); pointer-events: none; } .run__key::before { content: ""; width: 16px; border-top: 1px dashed rgba(238, 241, 231, .55); } .run__read { display: flex; flex-wrap: wrap; gap: 4px 14px; align-items: baseline; margin: 12px 0 0; padding-top: 12px; border-top: 1px solid var(--line); font-size: .84rem; color: var(--mute); } .run__read b { color: var(--chalk); font-weight: 650; } .run__read .fast { color: var(--walk); } .js .run:not(.is-in) .run__bar i { transform: scaleY(0); } .run.is-in .run__bar i { transition: transform .8s cubic-bezier(.2, .8, .2, 1) calc(var(--i) * 60ms), opacity .2s, box-shadow .25s; } @media (max-width: 480px) { .run { padding: 16px 14px 14px; } .run__head { flex-direction: column; gap: 10px; } .run__stats { grid-template-columns: repeat(2, auto); justify-content: start; gap: 12px 28px; } .run__chart { gap: 4px; } .run__bar .p { font-size: .56rem; } } @media (prefers-reduced-motion: reduce) { .run.is-in .run__bar i { transition: none; } } /* ——— na żywo: aktywność na ekranie blokady spokojniej ——— */ .la.is-turn .la__dist { animation: la-pop .6s ease; } @keyframes la-pop { 40% { transform: scale(1.03); } } .la__turn > div { transition: opacity .35s; } .la.is-fade .la__turn > div { opacity: 0; } /* ——— historia: jeden ekran i dziennik miesiąca ——— */ .history .sec-head { margin-bottom: clamp(28px, 3.2vw, 40px); } .journal__filters { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 16px; } .journal__filters button { appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 7px; padding: 8px 12px; border-radius: 999px; background: rgba(255, 255, 255, .04); color: var(--mute); box-shadow: inset 0 0 0 1px var(--line); font: 600 .8rem/1 var(--body); transition: background .2s, color .2s, box-shadow .2s; } .journal__filters button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--lc); } .journal__filters [data-j="all"]::before { background: conic-gradient(var(--strength), var(--run), var(--ride), var(--walk), var(--yoga), var(--swim), var(--strength)); } .journal__filters button:hover { color: var(--chalk); } .journal__filters button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; border-radius: 999px; } .journal__filters [aria-pressed="true"] { color: var(--chalk); background: color-mix(in srgb, var(--lc) 14%, var(--ink-4)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lc) 50%, transparent); } .jd__m { position: absolute; left: 7px; right: 6px; bottom: 7px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; } .jd__m i { width: var(--s); height: var(--s); border-radius: 50%; background: var(--lc); box-shadow: 0 0 8px color-mix(in srgb, var(--lc) 55%, transparent); transition: opacity .3s, transform .3s; } .jd__m i.plan { background: transparent; box-shadow: inset 0 0 0 1.5px var(--lc); } /* ——— odżywianie: jeden ekran, obok skaner, woda i suplementy ——— */ .kitchen { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center; min-width: 0; } .kitchen .phone { --w: clamp(220px, 19vw, 262px); } .pantry { display: grid; gap: 10px; min-width: 0; } .pcard { display: flex; flex-direction: column; gap: 12px; min-width: 0; padding: 14px 16px 16px; border-radius: 20px; background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); box-shadow: inset 0 0 0 1px var(--line); } .pcard__top { display: flex; justify-content: space-between; align-items: center; gap: 10px; min-height: 28px; } .pcard__top .label { color: var(--pc, var(--c)); } .chipbtn { appearance: none; border: 0; cursor: pointer; padding: 8px 13px; border-radius: 999px; background: color-mix(in srgb, var(--kcal) 16%, transparent); color: var(--kcal); font: 600 .78rem/1 var(--body); transition: background .2s; } .chipbtn:hover { background: color-mix(in srgb, var(--kcal) 28%, transparent); } .scan { --pc: var(--kcal); } .scan__body { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: 16px; align-items: center; } .scan__view { position: relative; aspect-ratio: 1; border-radius: 16px; overflow: hidden; display: grid; place-items: center; background: radial-gradient(75% 75% at 50% 42%, #2b2722, #0d0c0b); } .scan__view::before { content: ""; position: absolute; inset: 10px; pointer-events: none; z-index: 1; --k: var(--kcal); background: linear-gradient(var(--k), var(--k)) 0 0 / 16px 2px, linear-gradient(var(--k), var(--k)) 0 0 / 2px 16px, linear-gradient(var(--k), var(--k)) 100% 0 / 16px 2px, linear-gradient(var(--k), var(--k)) 100% 0 / 2px 16px, linear-gradient(var(--k), var(--k)) 0 100% / 16px 2px, linear-gradient(var(--k), var(--k)) 0 100% / 2px 16px, linear-gradient(var(--k), var(--k)) 100% 100% / 16px 2px, linear-gradient(var(--k), var(--k)) 100% 100% / 2px 16px; background-repeat: no-repeat; } .scan__tag { display: grid; gap: 3px; width: 70%; padding: 7px 7px 4px; border-radius: 6px; background: #f3efe5; color: #121212; transform: rotate(-5deg); box-shadow: 0 12px 22px rgba(0, 0, 0, .45); transition: transform .4s cubic-bezier(.2, .8, .2, 1), opacity .25s; } .scan__tag svg { display: block; width: 100%; height: 30px; } .scan__tag small { font: 600 .44rem/1 var(--mono); letter-spacing: .06em; text-align: center; } .scan__laser { position: absolute; z-index: 2; left: 14px; right: 14px; top: 50%; height: 2px; border-radius: 1px; background: var(--run); box-shadow: 0 0 10px 2px rgba(255, 69, 58, .65); animation: laser 2.8s ease-in-out infinite; } .scan.is-scanning .scan__laser { animation-duration: .6s; } .scan.is-scanning .scan__tag { opacity: .4; transform: rotate(3deg) scale(.92); } @keyframes laser { 0%, 100% { top: 28%; } 50% { top: 72%; } } .scan__res { display: grid; gap: 5px; min-width: 0; transition: opacity .25s, transform .25s; } .scan.is-scanning .scan__res { opacity: .2; transform: translateY(4px); } .scan__res > b { font: 650 1.06rem/1.2 var(--body); } .scan__meta { font-size: .86rem; color: var(--mute); } .scan__meta b { color: var(--chalk); } .mac { display: grid; gap: 7px; margin-top: 6px; } .mac div { display: grid; grid-template-columns: 92px minmax(0, 1fr) 44px; gap: 10px; align-items: center; font-size: .76rem; color: var(--mute); } .mac i { position: relative; height: 6px; border-radius: 3px; background: rgba(255, 255, 255, .07); overflow: hidden; } .mac i::after { content: ""; position: absolute; inset: 0 auto 0 0; width: calc(var(--v) * 100%); min-width: 3px; border-radius: 3px; background: var(--mc); transition: width .6s cubic-bezier(.2, .8, .2, 1); } .mac b { font: 600 .74rem/1 var(--mono); color: var(--chalk); text-align: right; white-space: nowrap; } .water { --pc: var(--rest); } .water__goal { font: 500 .8rem/1 var(--mono); color: var(--mute); } .water__goal b { color: var(--chalk); } .water__row { display: flex; align-items: center; justify-content: space-between; gap: 14px; } .glasses { display: flex; gap: 5px; min-width: 0; } .glasses i { position: relative; flex: none; width: 19px; height: 27px; overflow: hidden; clip-path: polygon(0 0, 100% 0, 84% 100%, 16% 100%); background: rgba(108, 184, 255, .14); } .glasses i::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0; background: linear-gradient(180deg, #9fd1ff, #2f8cff); transition: height .55s cubic-bezier(.2, .8, .2, 1); } .glasses i.on::after { height: 82%; } .water__btn { appearance: none; border: 0; cursor: pointer; flex: none; padding: 10px 14px; border-radius: 999px; background: var(--rest); color: #071423; font: 700 .84rem/1 var(--body); transition: filter .2s, transform .15s; } .water__btn:hover { filter: brightness(1.07); } .water__btn:active { transform: scale(.97); } .supps { --pc: var(--stretch); } .supps__count { font: 600 .8rem/1 var(--mono); color: var(--mute); } .supps__list { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 6px; margin: 0; padding: 0; list-style: none; } .supps__list button { appearance: none; border: 0; cursor: pointer; width: 100%; display: grid; grid-template-columns: 34px minmax(0, 1fr) 22px; gap: 10px; align-items: center; padding: 6px 8px 6px 6px; border-radius: 14px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--line); color: var(--chalk); font: 600 .84rem/1.15 var(--body); text-align: left; transition: background .2s, box-shadow .2s; } .supps__list button:hover { background: rgba(255, 255, 255, .06); } .supps__list button:focus-visible { outline: 2px solid var(--stretch); outline-offset: 2px; border-radius: 14px; } .supps__list img { display: block; width: 34px; height: 34px; border-radius: 9px; object-fit: cover; } .supps__list .nm small { display: block; margin-top: 3px; font: 500 .66rem/1 var(--mono); color: var(--mute); } .supps__list .box { width: 22px; height: 22px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px var(--line-2); background: center / 12px no-repeat; transition: background-color .2s, box-shadow .2s; } .supps__list [aria-pressed="true"] { background: color-mix(in srgb, var(--stretch) 10%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--stretch) 35%, transparent); } .supps__list [aria-pressed="true"] .box { background-color: var(--stretch); box-shadow: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.8 6.3 5 8.4 9.2 3.7' fill='none' stroke='%23140c26' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } @media (max-width: 700px) { .kitchen { grid-template-columns: minmax(0, 1fr); justify-items: center; } .kitchen .phone { --w: 62vw; } .pantry { width: 100%; } } @media (max-width: 420px) { .scan__body { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; } .mac div { grid-template-columns: 76px minmax(0, 1fr) 40px; gap: 8px; } .glasses { gap: 3px; } .glasses i { width: 15px; height: 22px; } .supps__list { grid-template-columns: minmax(0, 1fr); } } @media (prefers-reduced-motion: reduce) { .scan__laser { animation: none; } } /* ——— pytania: pięć najważniejszych ——— */ .faq { padding-block: clamp(64px, 7vw, 104px); } .qa { display: grid; border-top: 1px solid var(--line); } .qa details { position: relative; border-bottom: 1px solid var(--line); } .qa details::before { content: ""; position: absolute; left: 0; top: -1px; width: 0; height: 2px; background: var(--lime); box-shadow: 0 0 12px rgba(199, 240, 74, .6); transition: width .5s cubic-bezier(.2, .8, .2, 1); } .qa details[open]::before { width: 72px; } .qa summary { list-style: none; cursor: pointer; display: grid; grid-template-columns: 48px minmax(0, 1fr) 40px; align-items: center; gap: 14px; padding: 24px 4px; border-radius: 14px; font: 650 clamp(1.08rem, 1rem + .35vw, 1.3rem)/1.3 var(--body); } .qa summary::-webkit-details-marker { display: none; } .qa summary:focus-visible { outline: 2px solid var(--lime); outline-offset: -2px; border-radius: 14px; } .qa .no { font: 600 .78rem/1 var(--mono); color: var(--mute-2); transition: color .3s; } .qa details[open] .no { color: var(--lime); } .qa .q { transition: color .2s; } .qa summary:hover .q { color: var(--lime); } .qa .pm { --pc: var(--chalk); width: 40px; height: 40px; border-radius: 50%; background: linear-gradient(var(--pc), var(--pc)) center / 14px 2px no-repeat, linear-gradient(var(--pc), var(--pc)) center / 2px 14px no-repeat, var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-2); transition: transform .4s cubic-bezier(.2, .8, .2, 1), background-color .3s, box-shadow .3s; } .qa summary:hover .pm { box-shadow: inset 0 0 0 1px var(--lime); } .qa details[open] .pm { --pc: var(--lime-ink); background-color: var(--lime); box-shadow: none; transform: rotate(45deg); } .qa .a { padding: 0 58px 26px 66px; } .qa .a p { margin: 0; max-width: 40em; font-size: 1.02rem; line-height: 1.65; color: color-mix(in srgb, var(--chalk) 78%, var(--ink)); } .qa details::details-content { block-size: 0; overflow: hidden; transition: block-size .4s cubic-bezier(.2, .8, .2, 1), content-visibility .4s allow-discrete; } .qa details[open]::details-content { block-size: auto; } @media (max-width: 600px) { .qa summary { grid-template-columns: 30px minmax(0, 1fr) 34px; gap: 10px; padding: 18px 2px; } .qa .pm { width: 34px; height: 34px; } .qa .a { padding: 0 6px 20px 42px; } .qa .a p { font-size: .98rem; } } @media (prefers-reduced-motion: reduce) { .qa details::details-content, .qa details::before { transition: none; } } /* ——— podstrony: polityka prywatności, regulamin, pomoc ——— */ .doc { padding-block: 24px 96px; } .doc__hero { position: relative; isolation: isolate; padding: clamp(28px, 4vw, 56px) 0 clamp(28px, 3.4vw, 44px); border-bottom: 1px solid var(--line); } .doc__hero::before { content: ""; position: absolute; z-index: -1; left: -12%; top: -30%; width: 70%; height: 150%; background: radial-gradient(closest-side, rgba(199, 240, 74, .085), transparent); pointer-events: none; } .doc h1 { margin: 18px 0 0; font: 880 clamp(2.8rem, 1.6rem + 4.6vw, 5.6rem)/.9 var(--display); font-stretch: 64%; letter-spacing: -.012em; text-wrap: balance; } .doc__lead { margin: 20px 0 0; max-width: 38em; font-size: var(--t-lead); line-height: 1.55; color: color-mix(in srgb, var(--chalk) 80%, var(--ink)); text-wrap: pretty; } .doc__chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 24px 0 0; padding: 0; list-style: none; font: 500 .82rem/1 var(--body); color: var(--mute); } .doc__chips li { margin: 0; padding: 9px 14px; border-radius: 999px; background: rgba(17, 19, 22, .7); box-shadow: inset 0 0 0 1px var(--line); } .doc__grid { display: grid; gap: 28px; margin-top: clamp(28px, 4vw, 48px); } @media (min-width: 1000px) { .doc__grid { grid-template-columns: 240px minmax(0, 760px); gap: clamp(40px, 6vw, 96px); } } .doc__toc { align-self: start; min-width: 0; } @media (min-width: 1000px) { .doc__toc { position: sticky; top: 104px; max-height: calc(100vh - 130px); overflow: auto; scrollbar-width: none; } } .doc__toc > .label { display: block; margin-bottom: 12px; } .doc__toc ol { margin: 0; padding: 0; list-style: none; counter-reset: toc; border-left: 1px solid var(--line); } .doc__toc li { margin: 0; counter-increment: toc; } .doc .doc__toc a { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 4px; margin-left: -1px; padding: 7px 0 7px 14px; border-left: 2px solid transparent; color: var(--mute); text-decoration: none; font-size: .88rem; line-height: 1.35; transition: color .2s, border-color .2s; } .doc .doc__toc a::before { content: counter(toc, decimal-leading-zero); font: 600 .68rem/1.95 var(--mono); color: var(--mute-2); transition: color .2s; } .doc--terms .doc__toc a::before { content: "§ " counter(toc); } .doc .doc__toc a:hover { color: var(--chalk); } .doc .doc__toc a[aria-current="true"] { color: var(--chalk); border-left-color: var(--lime); } .doc .doc__toc a[aria-current="true"]::before { color: var(--lime); } @media (max-width: 999px) { .doc__toc { padding: 16px 18px; border-radius: 20px; background: rgba(17, 19, 22, .7); box-shadow: inset 0 0 0 1px var(--line); } .doc__toc ol { border-left: 0; columns: 2 200px; column-gap: 18px; } .doc .doc__toc a { padding-left: 0; border-left: 0; break-inside: avoid; } } .doc__in { min-width: 0; } .doc__tldr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 0 0 8px; padding: 0; list-style: none; } .doc__tldr li { margin: 0; display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 3px 14px; align-content: start; padding: 16px 18px; border-radius: 18px; background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); box-shadow: inset 0 0 0 1px var(--line); } .doc__tldr svg { grid-row: span 2; width: 40px; height: 40px; padding: 10px; border-radius: 12px; color: var(--tc, var(--lime)); background: color-mix(in srgb, var(--tc, var(--lime)) 14%, transparent); } .doc__tldr b { font: 650 1rem/1.3 var(--body); color: var(--chalk); } .doc__tldr p { margin: 0; font-size: .86rem; line-height: 1.45; color: var(--mute); } @media (max-width: 560px) { .doc__tldr { grid-template-columns: minmax(0, 1fr); } } .doc__sec { scroll-margin-top: 100px; } .doc h2 { display: flex; align-items: baseline; gap: 14px; margin: 46px 0 14px; font: 800 clamp(1.6rem, 1.3rem + 1vw, 2.1rem)/1.1 var(--display); font-stretch: 76%; text-wrap: balance; } .doc__n { flex: none; min-width: 2.2em; font: 600 .8rem/1 var(--mono); letter-spacing: .02em; color: var(--lime); transform: translateY(-4px); } .doc h3 { margin: 26px 0 8px; font: 650 1.08rem/1.35 var(--body); } .doc p, .doc :where(li) { line-height: 1.7; color: color-mix(in srgb, var(--chalk) 84%, var(--ink)); } .doc ul, .doc ol.doc__list { padding-left: 1.3em; } .doc :where(li) { margin: 7px 0; } .doc li::marker { color: var(--lime); } .doc ol.doc__list li { padding-left: .3em; } .doc ol.doc__list li::marker { font: 600 .86em var(--mono); } .doc strong { color: var(--chalk); } .doc a { color: var(--lime); text-underline-offset: 3px; } .doc .table-wrap { overflow-x: auto; margin: 18px 0; border-radius: 18px; background: rgba(17, 19, 22, .6); box-shadow: inset 0 0 0 1px var(--line); } .doc table { width: 100%; border-collapse: collapse; font-size: .92rem; } .doc th, .doc td { padding: 13px 16px; border-top: 1px solid var(--line); text-align: left; vertical-align: top; line-height: 1.5; } .doc thead th { border-top: 0; font: 700 .62rem/1.2 var(--display); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); background: rgba(255, 255, 255, .025); } .doc td:first-child { font-weight: 600; color: var(--chalk); } @media (max-width: 640px) { .doc table, .doc tbody, .doc tr, .doc td { display: block; } .doc thead { display: none; } .doc tr { padding: 12px 16px; border-top: 1px solid var(--line); } .doc tbody tr:first-child { border-top: 0; } .doc td { padding: 3px 0; border: 0; } .doc td[data-th]::before { content: attr(data-th); display: block; font: 700 .58rem/1.8 var(--display); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--mute-2); } } .callout { margin: 22px 0; padding: 18px 20px; border-radius: 18px; background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); box-shadow: inset 0 0 0 1px var(--line), inset 3px 0 0 var(--lime); } .callout p { margin: 0; } .callout p + p { margin-top: 10px; } .doc__contact { display: grid; gap: 14px; margin-top: 56px; padding: 24px; border-radius: 24px; background: linear-gradient(135deg, color-mix(in srgb, var(--lime) 9%, var(--ink-3)), var(--ink-2) 70%); box-shadow: inset 0 0 0 1px rgba(199, 240, 74, .22); } /* tytuł i zdanie po lewej, karta z adresem po prawej, linki pod spodem za cienką linią */ .doc__contact { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 20px 28px; } .doc__contact-hd { display: grid; gap: 8px; } .doc__contact-hd b { font: 750 1.25rem/1.2 var(--body); } .doc__contact-hd p { margin: 0; color: var(--mute); } .doc__contact .mailcard { width: min(100%, 360px); } .doc .doc__see { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 18px 0 0; border-top: 1px solid var(--line); list-style: none; } @media (max-width: 760px) { .doc__contact { grid-template-columns: minmax(0, 1fr); } .doc__contact .mailcard { width: 100%; } } .doc__see li { margin: 0; } .doc .doc__see a { display: inline-flex; align-items: center; gap: 8px; padding: 9px 14px; border-radius: 999px; background: rgba(255, 255, 255, .05); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--chalk); text-decoration: none; font: 600 .86rem/1 var(--body); transition: box-shadow .2s, color .2s; } .doc .doc__see a:hover { color: var(--lime); box-shadow: inset 0 0 0 1px var(--lime); } .copy { display: inline-flex; align-items: center; gap: 10px; flex-wrap: wrap; } .copy code { font: 500 1rem/1.4 var(--mono); padding: 8px 12px; border-radius: 10px; background: var(--ink-3); border: 1px solid var(--line); user-select: all; } .copy button { appearance: none; cursor: pointer; border: 1px solid var(--line-2); background: none; color: var(--chalk); border-radius: 999px; padding: 8px 14px; font: 500 .86rem/1 var(--body); } .copy button:hover { border-color: var(--lime); color: var(--lime); } @media print { body { background: #fff; color: #000; } .nav, .foot, .skip, .doc__toc, .doc__hero::before { display: none !important; } .doc { padding: 0; } .doc__grid { display: block; } .doc h1, .doc h2, .doc h3, .doc strong, .doc td:first-child, .doc__tldr b { color: #000; } .doc p, .doc li, .doc__lead, .doc__tldr p, .doc td, .doc__chips { color: #222; } .doc__n, .doc a, .doc li::marker { color: #000; } .doc__tldr li, .callout, .doc .table-wrap, .doc__contact, .doc__chips li { background: none; box-shadow: none; border: 1px solid #ccc; } } .doc mark.todo { padding: 1px 6px; border-radius: 6px; background: rgba(255, 159, 10, .16); color: var(--kcal); box-shadow: inset 0 0 0 1px rgba(255, 159, 10, .35); font-weight: 600; } .doc__sec + .doc__sec h2 { padding-top: 34px; border-top: 1px solid var(--line); } .doc__tldr + .doc__sec h2 { margin-top: 36px; } /* ——— sylwetka z aplikacji: szara postać, partie podświetlone limonką (przód i tył) ——— */ .pfig { display: flex; gap: 2px; flex: none; } .pfig__side { position: relative; display: block; width: 46px; aspect-ratio: 186 / 384; } .pfig__side img { position: absolute; inset: 0; display: block; width: 100%; height: 100%; max-width: none; } .pfig__side img.l { opacity: 0; transition: opacity .35s ease; filter: drop-shadow(0 0 5px rgba(199, 240, 74, .5)); } .pfig__side img.l.on { opacity: 1; } /* ——— plan na dziś: nagłówek dnia z sylwetką, spokojniejsze wiersze ——— */ .planner__prog { grid-template-columns: auto auto; gap: 9px 12px; } .planner__prog b { font: 600 .84rem/1 var(--body); color: var(--chalk); } .planner__prog b em { font-style: normal; color: var(--lime); } .planner__seg { grid-template-columns: repeat(3, minmax(0, 1fr)); } .feat.plan { padding-block: clamp(48px, 4.6vw, 68px); } .planner__prog b { white-space: nowrap; } .pday__meta .pday__kind { color: var(--dc); font-weight: 600; } .pday__list { gap: 0; margin: 10px -8px 0 -6px; } .pday__list li { grid-template-columns: 46px minmax(0, 1fr) auto; gap: 14px; padding: 7px 8px 7px 6px; border-radius: 14px; } .pday__list li + li { box-shadow: 0 -1px 0 var(--line); } .pday__list li:hover { box-shadow: none; } .pday__list li:hover + li { box-shadow: none; } .pday__th { width: 46px; height: 46px; } .pday__th img { border-radius: 12px; } .pday__list b { font: 600 .94rem/1.25 var(--body); } .pday__list div > span { margin-top: 4px; font: 500 .8rem/1 var(--body); color: var(--mute); } .pday__list em { font-size: .96rem; } .pday__built .pday__list li { grid-template-columns: 36px minmax(0, 1fr); gap: 12px; } .pday__built .pday__th { width: 36px; height: 36px; } .pday__built .pday__list div > span { font-size: .74rem; } .pday__parts { margin-top: 12px; } @media (max-width: 480px) { .pfig__side { width: 36px; } .planner__prog > span:first-child { display: none; } .planner__prog { grid-template-columns: auto; justify-items: end; } .pday__when { letter-spacing: .1em; } } .pday__go { white-space: nowrap; } /* ——— siłownia: pełna scena, podpis pod grafiką, rodzaje serii jako etykiety ——— */ .gx__art { aspect-ratio: 3 / 2; } .gx__art img { object-position: 50% 50%; } .gx__art::after { height: 26%; } .gx__head { margin-top: 0; padding: 12px 18px 0; align-items: center; } .gx__eye { display: block; margin-bottom: 7px; font: 650 .6rem/1 var(--display); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--lime); } .gx__pr { padding: 9px 12px; border-radius: 14px; background: color-mix(in srgb, var(--kcal) 11%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kcal) 24%, transparent); text-align: left; } .gx__pr small { font-size: .56rem; } .gx__pr b { margin-top: 6px; font: 700 .92rem/1 var(--body); font-variant-numeric: tabular-nums; white-space: nowrap; } .gx__sets { margin-top: 10px; padding-bottom: 10px; } .gx__sets li { grid-template-columns: 26px minmax(0, 1fr) auto 22px; padding: 4px 8px; } .gx__sets .n { width: 26px; height: 26px; } .gx__sets .t { padding: 5px 9px; border-radius: 999px; font: 600 .68rem/1 var(--body); color: var(--tc); background: color-mix(in srgb, var(--tc) 12%, transparent); } .gx__sets .cur .t { color: var(--lime-ink); background: var(--lime); } .gx__body .pfig { justify-content: center; gap: 4px; } .gx__body .pfig__side { width: 62px; } .gx__body .pfig__side img.b { filter: drop-shadow(0 18px 24px rgba(0, 0, 0, .7)); } @media (max-width: 560px) { .gx__body .pfig__side { width: 44px; } } @keyframes pay-out { 0%, 70%, 100% { transform: none; opacity: 1; } 80% { transform: translate(5px, -5px); opacity: 0; } 81% { transform: translate(-5px, 5px); opacity: 0; } } /* ——— meta: mniejsza, bez pustki pod spodem ——— */ .finish { padding-block: clamp(56px, 5.4vw, 80px); } .finish__icon { width: clamp(64px, 5.6vw, 80px); box-shadow: 0 0 0 1px rgba(255, 255, 255, .08), 0 20px 60px -10px rgba(199, 240, 74, .4); } .finish h2 { margin-top: 20px; font-size: clamp(2.3rem, 1.3rem + 3vw, 4.1rem); } .finish p { margin: 14px auto 24px; max-width: 40em; font-size: 1.02rem; } .finish__meta { margin-top: 22px; } /* ——— stopka: kolumny, dane spółki, na samym dole pasek wykonawcy ——— */ html { background: #000; } .foot { padding: clamp(40px, 4vw, 56px) 0 0; } .foot__main { display: grid; grid-template-columns: minmax(0, 1.5fr) repeat(3, minmax(0, 1fr)); gap: 32px 40px; } .foot__brand p { margin: 16px 0 0; max-width: 28em; line-height: 1.55; color: var(--mute); } .foot__col h2 { margin: 6px 0 14px; font: 650 .62rem/1 var(--display); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--mute-2); } .foot .foot__col ul { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; } .foot__col span { font-size: .8rem; color: var(--mute-2); } .foot a[aria-current="page"] { color: var(--lime); } .foot__legal { display: grid; gap: 8px; max-width: none; margin-top: clamp(32px, 3.4vw, 44px); padding-top: 20px; border-top: 1px solid var(--line); } .foot__legal p { margin: 0; max-width: 92em; font-size: .74rem; line-height: 1.55; color: var(--mute-2); } @media (max-width: 860px) { .foot__main { grid-template-columns: repeat(3, minmax(0, 1fr)); } .foot__brand { grid-column: 1 / -1; } } @media (max-width: 520px) { .foot__main { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 28px 20px; } .foot__col:last-child { grid-column: 1 / -1; } } /* pasek N3O System jak na vizicard.app: czarny, z zakładką „Projekt i wykonanie”; nic pod nim */ .n3o { --n3o-accent: #00ff41; --n3o-line: #1f1f1f; --n3o-text: #a1a1aa; --n3o-tab-h: 30px; margin-top: calc(var(--n3o-tab-h) + 36px); border-top: 1px solid var(--n3o-line); background: #000; } .n3o__inner { position: relative; padding-block: 20px max(16px, env(safe-area-inset-bottom, 0px)); } .n3o__tab { position: absolute; bottom: 100%; left: max(var(--gutter), env(safe-area-inset-left, 0px)); display: flex; align-items: center; height: var(--n3o-tab-h); margin: 0; padding: 0 calc(16px - .2em) 0 16px; border: 1px solid var(--n3o-line); border-bottom: 0; border-radius: 11px 11px 0 0; background: #000; color: var(--n3o-text); font: 500 .6875rem/1 var(--mono); letter-spacing: .2em; text-transform: uppercase; white-space: nowrap; } .n3o__tab::before { content: ""; position: absolute; right: -11px; bottom: 0; left: -11px; height: 11px; pointer-events: none; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M11 11H0A11 11 0 0 0 11 0z'/%3E%3Cpath d='M0 10.5A10.5 10.5 0 0 0 10.5 0' fill='none' stroke='%231f1f1f'/%3E%3C/svg%3E") left bottom / 11px 11px no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='11'%3E%3Cpath d='M0 11h11A11 11 0 0 1 0 0z'/%3E%3Cpath d='M11 10.5A10.5 10.5 0 0 1 .5 0' fill='none' stroke='%231f1f1f'/%3E%3C/svg%3E") right bottom / 11px 11px no-repeat; } .n3o__tab::after { content: ""; position: absolute; top: -1px; left: 50%; width: 20px; height: 1px; border-radius: 999px; background: var(--n3o-accent); box-shadow: 0 0 8px rgb(0 255 65 / .9); translate: -50% 0; } .n3o__link { display: flex; align-items: center; gap: 28px; min-height: 44px; color: #fff; text-decoration: none; } .n3o__link:focus-visible { outline-color: var(--n3o-accent); outline-offset: 6px; border-radius: 12px; } .n3o__brand { position: relative; display: flex; flex: none; } .n3o__brand::before { content: ""; position: absolute; inset: -8px -12px; border-radius: 12px; pointer-events: none; background: radial-gradient(ellipse at center, rgb(0 255 65 / .16), transparent 70%); filter: blur(8px); opacity: .7; transition: opacity .3s; } .n3o__brand img { position: relative; width: auto; height: 20px; } .n3o__about { min-width: 0; padding-left: 28px; border-left: 1px solid rgb(255 255 255 / .1); color: var(--n3o-text); font-size: .875rem; line-height: 1.5; text-wrap: balance; transition: color .2s; } .n3o__go { display: inline-flex; flex: none; align-items: center; gap: 10px; height: 40px; margin-left: auto; padding: 0 6px 0 15px; border: 1px solid rgb(255 255 255 / .14); border-radius: 999px; background: linear-gradient(180deg, rgb(255 255 255 / .08), transparent) rgb(255 255 255 / .03); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08); font-size: .875rem; font-weight: 500; letter-spacing: -.005em; transition: border-color .25s, background-color .25s, box-shadow .3s, transform .15s cubic-bezier(.2, .8, .2, 1); } .n3o__go::before { content: ""; flex: none; width: 6px; height: 6px; border-radius: 50%; background: var(--n3o-accent); box-shadow: 0 0 10px rgb(0 255 65 / .8); } .n3o__arrow { width: 28px; height: 28px; padding: 7px; border-radius: 50%; background: rgb(255 255 255 / .1); fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; transition: background-color .25s, color .25s; } .n3o__arrow path { transition: transform .25s cubic-bezier(.2, .8, .2, 1); } .n3o__link:active .n3o__go { transform: scale(.97); } @media (hover: hover) and (pointer: fine) { .n3o__link:hover .n3o__brand::before { opacity: 1; } .n3o__link:hover .n3o__about { color: #d4d4d8; } .n3o__link:hover .n3o__go { border-color: rgb(0 255 65 / .45); background-color: rgb(0 255 65 / .09); box-shadow: inset 0 1px 0 rgb(255 255 255 / .08), 0 0 26px -8px rgb(0 255 65 / .55); } .n3o__link:hover .n3o__arrow { background-color: var(--n3o-accent); color: #000; } .n3o__link:hover .n3o__arrow path { transform: translate(1.5px, -1.5px); } } @media (max-width: 760px) { .n3o__inner { padding-block: 22px max(18px, env(safe-area-inset-bottom, 0px)); } .n3o__link { flex-direction: column; align-items: flex-start; gap: 0; } .n3o__about { max-width: 36ch; margin-top: 14px; padding-left: 0; border-left: 0; } .n3o__go { margin: 16px 0 0; } } /* ——— nawigacja: wyraźniejsze linki i ciemniejsza kapsuła nad hero ——— */ .nav__links a { color: color-mix(in srgb, var(--chalk) 92%, transparent); font-weight: 550; } .nav__in::before { background: rgba(20, 22, 26, 0.74); } /* ——— plan na dziś: tydzień w siedmiu kolumnach, wybrany dzień rozsuwa się w trening ——— */ .feat.plan { padding-block: clamp(44px, 4vw, 60px); } .feat.plan .sec-head { margin-bottom: clamp(20px, 2.2vw, 28px); } .wk__body .pday__list li { padding-block: 5px; } .wk__body .pday__th { width: 42px; height: 42px; } .wk__body .pday__list li { grid-template-columns: 42px minmax(0, 1fr) auto; } .wk__bar { display: flex; justify-content: space-between; align-items: center; gap: 12px 20px; margin-bottom: 12px; padding: 0 4px; } .wk__bar .planner__prog { grid-template-columns: auto auto 132px; align-items: center; } .wk__bar .planner__seg { grid-column: auto; } .wk__plan { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 12px; } .wk__plan .label { color: var(--lime); } .wk__plan b { font: 750 1.2rem/1.1 var(--body); } .wk__plan > span:last-child { font-size: .84rem; color: var(--mute); } .wk__days { display: flex; gap: 8px; height: 470px; margin: 0; padding: 0; list-style: none; } .wk__day { --dc: var(--lime); position: relative; display: flex; flex: 1 1 0px; min-width: 0; border-radius: 22px; overflow: hidden; background: linear-gradient(180deg, color-mix(in srgb, var(--dc) 10%, var(--ink-3)), var(--ink-2) 72%); box-shadow: inset 0 0 0 1px var(--line); transition: flex-grow .55s cubic-bezier(.3, .7, .2, 1), flex-basis .55s cubic-bezier(.3, .7, .2, 1), box-shadow .3s, background .3s; } .wk__day::after { content: ""; position: absolute; left: 16px; right: 16px; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--dc); box-shadow: 0 0 14px var(--dc); opacity: .55; pointer-events: none; transition: opacity .3s; } .wk__day.is-free::after { opacity: .18; } /* wybrany dzień ma stałą szerokość na treść, reszta tygodnia dzieli to, co zostaje */ .wk__day.is-sel { flex: 0 0 clamp(570px, 47%, 640px); background: linear-gradient(180deg, color-mix(in srgb, var(--dc) 7%, var(--ink-3)), var(--ink-2) 60%); box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 80px -50px rgba(0, 0, 0, .95); } .wk__day.is-today { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--lime) 75%, transparent), 0 30px 70px -50px rgba(199, 240, 74, .6); } .wk__day:not(.is-sel):hover { background: linear-gradient(180deg, color-mix(in srgb, var(--dc) 16%, var(--ink-3)), var(--ink-2) 72%); } .wk__day:not(.is-sel):hover::after { opacity: 1; } .wk__face { appearance: none; border: 0; margin: 0; background: none; color: inherit; font: inherit; cursor: pointer; position: relative; flex: 1 0 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 18px 8px 20px; } .wk__day.is-sel .wk__face { flex: 0 0 190px; cursor: default; box-shadow: 1px 0 0 var(--line); } .wk__face:focus-visible { outline: 2px solid var(--lime); outline-offset: -4px; border-radius: 22px; } .wk__date { display: grid; justify-items: center; gap: 6px; } .wk__date span { font: 650 .62rem/1 var(--display); font-stretch: 125%; letter-spacing: .14em; text-transform: uppercase; color: var(--mute); } .wk__date b { font: 800 1.75rem/1 var(--display); font-stretch: 80%; font-variant-numeric: tabular-nums; } .is-today .wk__date span { color: var(--lime); } .wk__face .st { flex: none; } .wk__face .pfig { flex: 1; align-items: center; justify-content: center; min-height: 0; width: 100%; gap: 6px; } .wk__face .pfig__side { width: min(82px, 84%); transition: width .4s; } .wk__day:not(.is-sel) .pfig__side:not(.main) { display: none; } .wk__day.is-sel .wk__face .pfig__side { width: 76px; } .wk__day.is-free .pfig__side img.b { opacity: .55; } .wk__day.is-free.is-sel .pfig__side img.b { opacity: .85; } .wk__day:not(.is-sel):hover .pfig__side img.b { filter: brightness(1.2); } .wk__art { flex: 1; display: grid; place-items: center; width: 100%; min-height: 0; } .wk__art img { display: block; width: 100%; max-width: 160px; aspect-ratio: 1; object-fit: cover; border-radius: 16px; box-shadow: 0 0 0 1px var(--line); } .wk__lab { display: flex; align-items: flex-end; justify-content: center; min-height: 2.6em; font: 650 .8rem/1.25 var(--body); text-align: center; text-wrap: balance; } .wk__day.is-sel .wk__lab { font-size: .92rem; } .is-rest .wk__lab, .is-free .wk__lab { color: var(--mute); } .is-plan .wk__lab { color: var(--lime); } .wk__body[hidden] { display: none; } .wk__body { flex: 1 1 auto; min-width: 380px; display: flex; flex-direction: column; padding: 18px 24px 18px; } .wk__body > * { animation: pday-in .4s .14s ease both; } .wk__hd .pday__title { margin-top: 10px; } .wk__body .pday__list { margin-top: 12px; } .wk__body .pday__parts { margin-top: 10px; } .wk__body .pday__built { margin-top: 12px; padding-top: 10px; } .wk__body .pday__built .pday__list li { padding-block: 3px; } .pday__rest { grid-template-columns: 44px minmax(0, 1fr) auto; padding: 12px 16px 12px 12px; } .pday__ri { width: 44px; height: 44px; display: grid; place-items: center; border-radius: 13px; color: var(--dc); background: color-mix(in srgb, var(--dc) 16%, transparent); } .pday__ri svg { width: 20px; height: 20px; } @media (max-width: 1099px) { .wk__day.is-sel { flex-basis: 480px; } .wk__day.is-sel .wk__face { flex-basis: 132px; } .wk__day.is-sel .wk__face .pfig__side { width: 56px; } .wk__body { min-width: 348px; padding: 18px 18px 16px; } .wk__face .pfig__side { width: min(60px, 88%); } .wk__day:not(.is-sel) .wk__lab { font-size: .7rem; } } @media (max-width: 1000px) { .wk__bar { flex-wrap: wrap; } .wk__days { flex-direction: column; height: auto; gap: 6px; } .wk__day, .wk__day.is-sel { flex: none; flex-direction: column; border-radius: 18px; } .wk__day::after { left: 0; right: auto; top: 14px; bottom: 14px; width: 3px; height: auto; border-radius: 0 3px 3px 0; } .wk__face, .wk__day.is-sel .wk__face { flex: none; display: grid; grid-template-columns: 44px 32px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 14px 10px 14px; box-shadow: none; cursor: pointer; text-align: left; } .wk__day.is-sel .wk__face { box-shadow: 0 1px 0 var(--line); } .wk__date { justify-items: start; gap: 4px; } .wk__date b { font-size: 1.3rem; } .wk__face .st { order: 4; } .wk__face .pfig, .wk__art { order: 2; flex: none; width: auto; } .wk__lab { order: 3; } .wk__face .pfig__side, .wk__day.is-sel .wk__face .pfig__side { width: 26px; } .wk__day .pfig__side:not(.main) { display: none; } .wk__art img { width: 32px; border-radius: 9px; } .wk__lab, .wk__day.is-sel .wk__lab { display: block; min-height: 0; font-size: .92rem; text-align: left; } .wk__body { min-width: 0; padding: 16px 16px 16px; } } @media (max-width: 480px) { .wk__body { padding: 14px 12px 14px; } .pday__rest em { grid-column: 2; } } @media (prefers-reduced-motion: reduce) { .wk__day, .wk__face .pfig__side { transition: none; } .wk__body > * { animation: none; } } /* ——— siłownia: serie do klikania ——— */ .gx__sets button { appearance: none; border: 0; margin: 0; font: inherit; cursor: pointer; } .gx__sets li { grid-template-columns: 26px minmax(0, 1fr) auto 72px; transition: background .3s; } .gx__sets .s { justify-self: end; padding: 0; background: none; color: inherit; } .gx__sets .t { transition: background .2s, color .2s, transform .15s; } .gx__sets .t:hover { background: color-mix(in srgb, var(--tc) 24%, transparent); } .gx__sets .t:active, .gx__sets .s:active { transform: scale(.95); } .gx__sets .cur .t:hover { background: color-mix(in srgb, var(--lime) 85%, #fff); } .gx__sets .ok button.s:hover { box-shadow: 0 0 0 3px rgba(199, 240, 74, .25); } .gx__sets .s.go { width: auto; height: 28px; padding: 0 13px; border-radius: 999px; background: var(--lime); color: var(--lime-ink); box-shadow: 0 6px 18px -6px rgba(199, 240, 74, .7); font: 750 .74rem/1 var(--body); animation: go-pulse 2.4s ease-in-out infinite; } .gx__sets .s.go:hover { filter: brightness(1.06); } @keyframes go-pulse { 50% { box-shadow: 0 0 0 5px rgba(199, 240, 74, .16), 0 6px 18px -6px rgba(199, 240, 74, .7); } } .gx__sets button:focus-visible { outline: 2px solid var(--lime); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .gx__sets .s.go { animation: none; } } /* ——— V10: skala jak w hero — sekcja z nagłówkiem mieści się na jednym ekranie laptopa ——— Nagłówki, odstępy i duże elementy liczą się też od wysokości okna (svh), więc na niższym ekranie maleją razem. */ :root { --t-h2: clamp(2.1rem, 1.2rem + 2.3vw, 3.35rem); --t-lead: clamp(1rem, .95rem + .16vw, 1.1rem); --t-h3: clamp(1.06rem, 1rem + .28vw, 1.2rem); } .h2 { margin-top: 14px; } .lead { margin-top: 16px; } .faq .h2 { font-size: var(--t-h2); } @media (min-width: 1000px) { .h2, .faq .h2 { font-size: min(var(--t-h2), 6.4svh); } } .sec-head { margin-bottom: clamp(20px, 3svh, 30px); } .feat, .feat.plan, .feat.history { padding-block: clamp(44px, 6.4svh, 62px); } .lanes { padding-block: clamp(40px, 5.6svh, 54px); } .lanes .sec-head { margin-bottom: clamp(18px, 2.6svh, 26px); } .faq { padding-block: clamp(48px, 7svh, 70px); } .qa summary { padding-block: 16px; } /* (tylko szeroki ekran; telefon ma swoje rozmiary) ——— skala sekcji: mniejsze galerie, makiety i telefony (tylko szeroki ekran; telefon ma swoje rozmiary) ——— */ @media (min-width: 1001px) { .roster { max-width: min(100%, 1040px, 125svh); margin-inline: auto; gap: 10px; } .wk__days { height: clamp(340px, 47svh, 400px); } .wk__face { padding: 16px 8px 18px; } .wk__body { padding: 16px 22px; } .wk__body .pday__title { margin-top: 8px; font-size: 1.65rem; } .wk__body .pday__list { margin-top: 8px; } .wk__body .pday__list li { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 12px; padding-block: 3px; } .wk__body .pday__th { width: 36px; height: 36px; } .wk__body .pday__th img { border-radius: 10px; } .wk__body .pday__foot { padding-top: 10px; } .gx { max-width: 540px; grid-template-columns: minmax(0, 1fr) 140px; } .terra { min-height: clamp(420px, 60svh, 520px); } .livepair__phone { --w: clamp(210px, min(18vw, 30svh), 262px); } .livepair__side { margin-top: 90px; } .posters { padding-block: 10px; } .poster { width: clamp(150px, min(22vw, 30svh), 254px); } .kitchen .phone { --w: clamp(200px, min(16vw, 27svh), 236px); } .wboard { max-width: 540px; } .wk__body .pday__meta { margin-top: 5px; } } /* dzień wolny: ułożony trening w jednym wierszu — miniatury i nazwy */ .pday__bline { display: flex; align-items: center; gap: 12px; margin-top: 10px; } .pday__bline b { display: -webkit-box; overflow: hidden; -webkit-line-clamp: 2; -webkit-box-orient: vertical; font: 600 .84rem/1.35 var(--body); } /* ——— historia: październik na jednej osi czasu ——— */ .tl { --jc: var(--lime); padding: 18px 22px 20px; border-radius: 28px; background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); box-shadow: inset 0 0 0 1px var(--line), 0 50px 100px -60px rgba(0, 0, 0, .95); } .tl__top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px 24px; flex-wrap: wrap; } .tl__sum .label { display: block; color: var(--jc); transition: color .3s; } .tl__nums { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin-top: 9px; font-size: .84rem; color: var(--mute); } .tl__nums b { margin-right: 2px; font: 800 1.3rem/1 var(--display); font-stretch: 80%; font-variant-numeric: tabular-nums; color: var(--chalk); } .tl__trend { display: inline-flex; align-items: center; gap: 8px; padding-left: 14px; border-left: 1px solid var(--line-2); } .jr__bars { display: flex; align-items: flex-end; gap: 3px; height: 22px; } .jr__bars i { width: 6px; height: calc(4px + 18px * var(--h)); border-radius: 2px; background: rgba(255, 255, 255, .14); transition: height .5s cubic-bezier(.2, .8, .2, 1), background .3s; } .jr__bars i.now { background: var(--jc); box-shadow: 0 0 10px color-mix(in srgb, var(--jc) 50%, transparent); } .jr__delta { font: 650 .8rem/1 var(--body); color: var(--walk); white-space: nowrap; } .jr__delta.down { color: var(--mute); } .tl .journal__filters { gap: 5px; margin-top: 0; justify-content: flex-end; max-width: 720px; } .tl .journal__filters button { padding-inline: 11px; } .tl__chart { position: relative; height: clamp(140px, 20svh, 172px); margin-top: 16px; } .tl__grid { position: absolute; inset: 14px 0 24px; pointer-events: none; } .tl__grid span { position: absolute; left: 0; right: 0; bottom: calc(var(--y) * 100%); padding-top: 4px; border-top: 1px dashed rgba(255, 255, 255, .07); font: 500 .58rem/1 var(--mono); color: var(--mute-2); } .tl__cols { position: absolute; inset: 0 0 0 46px; display: grid; grid-template-columns: repeat(31, minmax(0, 1fr)); gap: 0 4px; } .tl__day { position: relative; display: grid; grid-template-rows: 14px minmax(0, 1fr) 24px; min-width: 0; } .tl__day.is-mon::before { content: ""; position: absolute; top: 14px; bottom: 24px; left: -2.5px; width: 1px; background: rgba(255, 255, 255, .05); pointer-events: none; } .tl__stack { grid-row: 2; position: relative; display: flex; flex-direction: column-reverse; align-items: center; gap: 2px; height: 100%; min-height: 0; } .tl__seg { appearance: none; border: 0; margin: 0; padding: 0; font: inherit; cursor: pointer; position: relative; flex: none; width: min(20px, 80%); height: max(5px, calc(var(--h) * 100% - 2px)); border-radius: 5px; background: linear-gradient(180deg, var(--lc), color-mix(in srgb, var(--lc) 50%, #0b0c0e)); opacity: .8; transition: opacity .2s, box-shadow .25s, background .3s, transform .2s; } .tl__seg:hover { opacity: 1; transform: scaleX(1.1); } .tl__seg.is-sel { opacity: 1; box-shadow: 0 0 0 2px var(--ink-2), 0 0 0 3.5px var(--lc), 0 10px 24px -6px var(--lc); } .tl__seg.is-dim { opacity: 1; background: rgba(255, 255, 255, .07); cursor: default; transform: none; } .tl__seg.is-plan { opacity: 1; background: repeating-linear-gradient(-45deg, rgba(199, 240, 74, .32) 0 4px, transparent 4px 8px); box-shadow: inset 0 0 0 1.5px rgba(199, 240, 74, .8); } .tl__seg.is-plan.is-sel { box-shadow: inset 0 0 0 1.5px var(--lime), 0 0 0 2px var(--ink-2), 0 0 0 3.5px var(--lime), 0 10px 24px -6px var(--lime); } .tl__seg.is-plan.is-dim { background: none; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .14); } .tl__seg.is-over::after { content: ""; position: absolute; left: -3px; right: -3px; top: 14px; height: 5px; background: var(--ink-3); transform: skewY(-14deg); } .tl__over { position: absolute; left: 50%; top: -15px; transform: translateX(-50%); font: 700 .6rem/1 var(--body); color: var(--lc); white-space: nowrap; } .tl__seg.is-dim .tl__over { color: var(--mute-2); } .tl__seg:focus-visible { outline: 2px solid var(--chalk); outline-offset: 3px; border-radius: 5px; } .tl__n { grid-row: 3; align-self: end; justify-self: center; min-width: 20px; padding: 4px 3px; border-radius: 6px; font: 600 .62rem/1 var(--mono); text-align: center; color: var(--mute); transition: background .2s, color .2s; } .tl__day.is-we .tl__n { color: var(--mute-2); } .tl__day.is-today .tl__n { color: var(--lime); } .tl__day.is-future .tl__n { opacity: .45; } .tl__day.is-on .tl__n { background: var(--chalk); color: var(--ink); opacity: 1; } .tl__tag { position: absolute; top: 0; left: 50%; transform: translateX(-50%); font: 700 .54rem/1 var(--display); font-stretch: 125%; letter-spacing: .12em; text-transform: uppercase; color: var(--lime); white-space: nowrap; } .tl__detail { position: relative; margin-top: 14px; padding-top: 16px; border-top: 1px solid var(--line); } .tl__card { --lc: var(--lime); display: grid; grid-template-columns: 280px minmax(0, 1fr) minmax(0, 300px); gap: 24px; align-items: stretch; } .tl__card > * { animation: pday-in .35s ease both; } .tl__vis { position: relative; height: clamp(150px, 20svh, 168px); border-radius: 16px; overflow: hidden; background: #090b0e; box-shadow: inset 0 0 0 1px var(--line); } .tl__vis.is-map { background: radial-gradient(80% 90% at 50% 50%, color-mix(in srgb, var(--lc) 7%, #0d1115), #090b0e); } .tl__vis svg { display: block; width: 100%; height: 100%; } .tl__vis .st { fill: none; stroke: rgba(255, 255, 255, .045); stroke-width: 1.2; } .tl__vis .st.main { stroke: rgba(255, 255, 255, .07); stroke-width: 3; } .tl__vis .pk { fill: rgba(52, 199, 89, .08); } .tl__vis .rv { fill: none; stroke: rgba(10, 132, 255, .2); stroke-width: 11; stroke-linecap: round; } .tl__vis .ct { fill: none; stroke: rgba(255, 255, 255, .075); stroke-width: 1; } .tl__vis .gl { fill: none; stroke: var(--lc); stroke-width: 10; opacity: .22; filter: blur(4px); animation: tl-fade .6s 1s backwards; } .tl__vis .rt { fill: none; stroke: var(--lc); stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; animation: tl-draw 1.3s .15s cubic-bezier(.45, .1, .2, 1) forwards; } .tl__vis .s { fill: #fff; stroke: var(--lc); stroke-width: 3; } .tl__vis .e { fill: var(--lc); stroke: #fff; stroke-width: 2; } .tl__vis .pe { fill: #fff; stroke: var(--lc); stroke-width: 2; stroke-linejoin: round; } @keyframes tl-draw { to { stroke-dashoffset: 0; } } @keyframes tl-fade { from { opacity: 0; } } .tl__vis.is-body { display: grid; place-items: center; background: radial-gradient(60% 70% at 50% 62%, color-mix(in srgb, var(--lc) 15%, transparent), transparent 70%), #090b0e; } .tl__vis.is-body .pfig { gap: 12px; } .tl__vis.is-body .pfig__side { width: 66px; } .tl__vis.is-body .pfig__side img.b { filter: drop-shadow(0 14px 18px rgba(0, 0, 0, .7)); } .tl__vis.is-art { display: grid; place-items: center; background: radial-gradient(55% 70% at 50% 62%, color-mix(in srgb, var(--lc) 20%, transparent), transparent 72%), #070809; } /* grafika ma wysokość pola, więc wystarczy wygasić jej boki */ .tl__vis.is-art img { display: block; width: auto; height: 100%; aspect-ratio: 1; -webkit-mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); mask-image: linear-gradient(90deg, transparent, #000 22%, #000 78%, transparent); } .tl__info { display: flex; flex-direction: column; min-width: 0; padding-top: 2px; } .tl__when { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; font-size: .8rem; color: var(--mute); } .tl__kind { padding: 5px 10px; border-radius: 999px; background: color-mix(in srgb, var(--lc) 14%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lc) 40%, transparent); color: var(--lc); font: 650 .7rem/1 var(--body); } .tl__info h3 { margin: 10px 0 0; font: 800 1.75rem/1.04 var(--display); font-stretch: 80%; letter-spacing: -.005em; } .tl__stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: auto 0 0; padding-top: 14px; } .tl__stats div { min-width: 0; padding-top: 10px; border-top: 1px solid var(--line); } .tl__stats dt { font: 650 .58rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--mute-2); } .tl__stats dd { margin: 7px 0 0; font: 800 1.4rem/1 var(--display); font-stretch: 80%; font-variant-numeric: tabular-nums; white-space: nowrap; } .tl__stats dd small { margin-left: 3px; font: 600 .68rem/1 var(--body); color: var(--mute); } .tl__prog { display: flex; flex-direction: column; min-width: 0; padding: 13px 16px 12px; border-radius: 16px; background: rgba(255, 255, 255, .03); box-shadow: inset 0 0 0 1px var(--line); } .tl__prog .label { overflow: hidden; font-size: .6rem; white-space: nowrap; text-overflow: ellipsis; } .tl__cmp { margin: 8px 0 0; font-size: .86rem; line-height: 1.35; color: var(--mute); } .tl__cmp b { font-weight: 650; color: var(--chalk); } .tl__cmp i { margin-right: 5px; font-style: normal; font-weight: 700; color: var(--walk); } .tl__cmp i.dn { color: var(--kcal); } .tl__mini { display: flex; flex: 1; align-items: stretch; gap: 6px; min-height: 64px; max-height: 110px; margin-top: auto; padding-top: 10px; } .tl__mini span { flex: 1 1 0; max-width: 36px; display: grid; grid-template-rows: 13px minmax(0, 1fr) 13px; justify-items: center; gap: 3px; min-width: 0; } .tl__mini em { font: 650 .58rem/1 var(--body); font-style: normal; white-space: nowrap; color: var(--lc); opacity: 0; } .tl__mini i { align-self: end; width: 100%; height: calc(var(--h) * 100%); border-radius: 4px 4px 2px 2px; background: rgba(255, 255, 255, .12); } .tl__mini small { font: 600 .58rem/1 var(--mono); color: var(--mute-2); } .tl__mini .on i { background: var(--lc); box-shadow: 0 0 12px color-mix(in srgb, var(--lc) 50%, transparent); } .tl__mini .on em { opacity: 1; } .tl__mini .on small { color: var(--chalk); } .tl__mini .plan i { background: repeating-linear-gradient(-45deg, rgba(199, 240, 74, .35) 0 3px, transparent 3px 6px); box-shadow: inset 0 0 0 1px var(--lime); } .tl__mini .plan em { color: var(--lime); } .tl__nav { position: absolute; z-index: 2; top: 26px; left: 10px; display: flex; align-items: center; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(8, 9, 10, .74); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); box-shadow: inset 0 0 0 1px var(--line-2); font: 600 .68rem/1 var(--mono); color: var(--mute); } .tl__nav span { padding: 0 5px; font-variant-numeric: tabular-nums; white-space: nowrap; } .tl__nav button { appearance: none; border: 0; margin: 0; padding: 0; width: 28px; height: 28px; display: grid; place-items: center; border-radius: 50%; background: none; color: var(--chalk); cursor: pointer; transition: background .2s; } .tl__nav button:hover { background: rgba(255, 255, 255, .1); } .tl__nav button:focus-visible { outline: 2px solid var(--lime); outline-offset: 1px; border-radius: 50%; } .tl__nav svg { width: 14px; height: 14px; } @media (max-width: 1099px) { .tl__card { grid-template-columns: 240px minmax(0, 1fr); } .tl__prog { grid-column: 1 / -1; } .tl__mini { flex: none; height: 64px; } .tl .journal__filters { justify-content: flex-start; } } @media (max-width: 640px) { .tl { padding: 14px 12px 14px; border-radius: 22px; } .tl__trend { padding-left: 0; border-left: 0; } .tl__chart { height: 150px; } .tl__grid span { color: transparent; } .tl__cols { left: 0; gap: 0 2px; } .tl__day:not(.is-tick):not(.is-on):not(.is-today) .tl__n { visibility: hidden; } .tl__n { min-width: 0; padding: 4px 1px; font-size: .56rem; } .tl__seg { width: 84%; border-radius: 3px; } .tl__tag { font-size: .46rem; letter-spacing: .06em; } .tl__card { grid-template-columns: minmax(0, 1fr); gap: 14px; } .tl__vis { height: 168px; } .tl__stats { grid-template-columns: 1fr 1fr; } .tl__info h3 { font-size: 1.5rem; } } @media (prefers-reduced-motion: reduce) { .tl__card > *, .tl__vis .gl { animation: none; } .tl__vis .rt { animation: none; stroke-dashoffset: 0; } } /* ——— V11: wersja na telefon ——— Każda sekcja idzie tym samym rytmem: nagłówek, krótki opis, od razu obraz albo makieta, a punkty z opisu jako karty przesuwane w bok. Tydzień planu to pasek dni jak w aplikacji, wybrany dzień rozwija się pod nim. */ /* ——— plan na dziś: pasek siedmiu dni (telefon i wąski tablet) ——— */ .wk__hdfig { display: none; } @media (max-width: 1000px) { .wk__bar { flex-wrap: wrap; align-items: flex-end; margin-bottom: 12px; } .wk__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; height: auto; } .wk__day, .wk__day.is-sel { display: contents; } .wk__face, .wk__day.is-sel .wk__face { grid-row: 1; position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; min-width: 0; padding: 10px 2px 13px; border-radius: 16px; text-align: center; cursor: pointer; background: linear-gradient(180deg, color-mix(in srgb, var(--dc) 12%, var(--ink-3)), var(--ink-2)); box-shadow: inset 0 0 0 1px var(--line); transition: background .25s, box-shadow .25s; } .wk__face::after { content: ""; position: absolute; left: 32%; right: 32%; bottom: 0; height: 3px; border-radius: 3px 3px 0 0; background: var(--dc); opacity: .55; } .wk__day.is-free .wk__face::after { opacity: .2; } .wk__day.is-sel .wk__face { background: linear-gradient(180deg, color-mix(in srgb, var(--dc) 26%, var(--ink-3)), color-mix(in srgb, var(--dc) 8%, var(--ink-2))); box-shadow: inset 0 0 0 1.5px var(--dc); } .wk__day.is-sel .wk__face::after { opacity: 1; left: 22%; right: 22%; } .wk__day.is-today .wk__face { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--lime) 70%, transparent); } .wk__day.is-today.is-sel .wk__face { box-shadow: inset 0 0 0 2px var(--lime), 0 12px 26px -14px var(--lime); } .wk__date { display: grid; justify-items: center; gap: 5px; } .wk__date span { font-size: .56rem; letter-spacing: .1em; } .wk__date b { font-size: 1.3rem; } .wk__face .st { order: 0; } .wk__day .wk__face .pfig, .wk__day .wk__face .wk__art, .wk__day .wk__face .wk__lab { display: none; } .wk__body { grid-row: 2; grid-column: 1 / -1; min-width: 0; margin-top: 6px; padding: 16px 16px 16px; border-radius: 22px; background: linear-gradient(180deg, color-mix(in srgb, var(--dc) 9%, var(--ink-3)), var(--ink-2) 70%); box-shadow: inset 0 0 0 1px var(--line-2); } .wk__body[hidden] { display: none; } .wk__hd { position: relative; min-height: 104px; padding-right: 92px; } .wk__hdfig { position: absolute; top: -2px; right: -4px; display: flex; } .wk__hdfig.pfig { gap: 3px; } .wk__hdfig .pfig__side, .wk__hdfig .pfig__side:not(.main) { display: block; width: 44px; } .wk__hdfig.wk__art { display: block; width: 88px; } .wk__hdfig.wk__art img { width: 88px; max-width: none; border-radius: 16px; } .wk__body .pday__list { margin-top: 10px; } } @media (max-width: 480px) { .wk__days { gap: 4px; } .wk__face, .wk__day.is-sel .wk__face { padding: 9px 1px 12px; border-radius: 14px; } .wk__date b { font-size: 1.15rem; } .wk__body { padding: 14px 14px 14px; border-radius: 20px; } } @media (max-width: 719px) { /* ——— rytm sekcji: obraz zaraz pod opisem, punkty na końcu ——— */ .feat { padding-block: 52px; } .split, .gym2, .maps2 { gap: 0; } .split__copy, .gym2__copy, .maps2__copy { display: contents; } .split > *, .gym2 > *, .maps2 > * { min-width: 0; } .split > .eyebrow, .gym2 > .eyebrow, .maps2 > .eyebrow { justify-self: start; } .gx, .terra, .livepair, .posters, .kitchen, .wboard { order: 1; margin-top: 24px; } .run { order: 1; } .points, .gymfacts, .mapnums { order: 2; } /* ——— punkty jako karty przesuwane w bok ——— */ .points, .gymfacts { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; border: 0; margin: 22px calc(-1 * var(--gutter)) 0; padding: 2px var(--gutter) 6px; scroll-padding-inline: var(--gutter); } .points::-webkit-scrollbar, .gymfacts::-webkit-scrollbar { display: none; } .points li, .gymfacts li { flex: 0 0 min(80%, 310px); scroll-snap-align: start; display: block; padding: 15px 16px 16px; border: 0; border-radius: 18px; background: rgba(255, 255, 255, .035); box-shadow: inset 0 0 0 1px var(--line); } .points li::before { display: block; margin: 0 0 12px; } .points h3, .gymfacts h3 { font-size: 1rem; } .points p, .gymfacts p { margin-top: 5px; font-size: .86rem; line-height: 1.45; } .gymfacts li > div + div { margin-top: 10px; } .gymfacts__k b { font-size: 1.9rem; } /* ——— start: telefony zaraz pod przyciskami, liczby w jednym rzędzie ——— */ .hero { padding-block: 22px 28px; } .hero__grid { gap: 0; } .hero__copy { display: contents; } .hero__grid > .eyebrow { justify-self: start; } .hero__actions { margin-top: 24px; } .hero .textlink { display: none; } .stage { order: 1; margin-top: 18px; --mw: 47vw; height: calc(var(--mw) * 2.24 + 90px); } .readout { order: 2; grid-template-columns: repeat(4, minmax(0, 1fr)); margin-top: 18px; } .readout li, .readout li:nth-child(3), .readout li:nth-child(n+3) { padding: 13px 8px 11px; border-top: 0; border-left: 1px solid var(--line); } .readout li:first-child { border-left: 0; } .readout li::before { left: 8px; } .readout b { font-size: 1.45rem; } .readout span { margin-top: 6px; font-size: .62rem; line-height: 1.3; } /* ——— dyscypliny: dwa rzędy małych kafelków przesuwane w bok ——— */ .roster { display: grid; grid-auto-flow: column; grid-template-rows: auto auto; grid-template-columns: none; grid-auto-columns: 112px; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; max-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 6px; scroll-padding-inline: var(--gutter); } .rc, .rc:nth-child(8) { grid-column: auto; flex: none; scroll-snap-align: start; border-radius: 16px; } .rc__txt { margin-top: -30px; padding: 0 10px 11px; } .rc h3 { margin-top: 4px; font-size: .84rem; } .rc p { display: none; } .dots[data-for="roster"] { display: none; } /* ——— siłownia ——— */ .gx { gap: 10px; } /* ——— mapy: teren pod opisem, liczby 2 × 2 ciaśniej ——— */ .terra { aspect-ratio: 1; } .terra__phone { display: none; } .mapnums { margin-top: 14px; } .mapnums li { padding: 13px 14px 12px; } .mapnums li::before { left: 14px; } .mapnums b { font-size: 1.55rem; } .mapnums span { margin-top: 5px; font-size: .74rem; } /* ——— na żywo: telefon z lewej, Live Activity nachodzi z prawej ——— */ .livepair { display: block; position: relative; padding: 0 0 64px; } .livepair__phone { --w: 50vw; margin: 0; } .livepair__side { position: absolute; right: 0; bottom: 0; width: 66vw; max-width: 300px; margin: 0; } .livepair__cap { margin: 12px 2px 0; font-size: .82rem; } /* ——— historia: filtry w jednym rzędzie ——— */ .tl .journal__filters { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; max-width: none; margin-inline: -12px; padding: 2px 12px; } .tl .journal__filters::-webkit-scrollbar { display: none; } .tl .journal__filters button { flex: none; } /* ——— plakaty: wachlarz mieści się w szerokości ——— */ .posters { padding-block: 14px 4px; } .poster { width: 39vw; } .poster:nth-child(2) { margin-inline: -9vw; } .poster:nth-child(1) { transform: rotate(-6deg) translate(6%, 5%); } .poster:nth-child(3) { transform: rotate(6deg) translate(-6%, 5%); } /* ——— odżywianie: telefon i karty w jednym pasku przesuwanym w bok ——— */ .kitchen { display: flex; align-items: center; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 8px; scroll-padding-inline: var(--gutter); } .kitchen::-webkit-scrollbar { display: none; } .kitchen .phone { --w: 46vw; flex: none; scroll-snap-align: start; } .pantry { display: contents; } .pcard { flex: 0 0 min(78vw, 320px); scroll-snap-align: start; } /* ——— stopka: linki w rzędach ——— */ .foot .foot__col ul { display: flex; flex-wrap: wrap; gap: 10px 18px; } .foot .foot__col li { margin: 0; } } @media (max-width: 380px) { .readout b { font-size: 1.55rem; } .readout span { font-size: .7rem; } } /* ——— V12: telefon zaprojektowany osobno ——— Zamiast długich opisów jedno krótkie zdanie (.msub), obraz od krawędzi do krawędzi, mniej ramek. Na komputerze elementy tylko dla telefonu są ukryte. */ .msub, .mdisc, .lockhead, .mbar { display: none; } @media (max-width: 719px) { :root { --gutter: 18px; } /* ——— nagłówki sekcji: większy tytuł, jedno zdanie zamiast akapitu i listy ——— */ .feat { padding-block: 64px 56px; } .h2, .faq .h2 { font-size: clamp(2.2rem, 10.4vw, 2.75rem); line-height: .94; } .hero .lead, .sec-head .lead, .split__copy > .lead, .gym2__copy > .lead, .maps2__copy > .lead { display: none; } .finish__lead { display: none; } .points, .gymfacts { display: none; } .msub { display: block; max-width: 26em; margin: 14px 0 0; font-size: 1.04rem; line-height: 1.45; color: color-mix(in srgb, var(--chalk) 74%, var(--ink)); text-wrap: pretty; } .sec-head { margin-bottom: 26px; } .sec-head .msub { margin-top: 12px; } .gx, .terra, .livepair, .posters, .kitchen, .wboard { margin-top: 28px; } /* ——— start: tytuł, zdanie, sklepy, pod nimi wachlarz trzech ekranów (siłownia · Pulpit · bieg) do krawędzi ——— */ .hero { padding-block: 26px 8px; } .eb-x { display: none; } .hero h1 { font-size: clamp(3.3rem, 16.4vw, 4.4rem); } .hero .msub { font-size: 1.1rem; margin-top: 16px; } .hero__actions { margin-top: 24px; } .hero__actions .stores { gap: 10px; } .stage { --mw: min(56vw, 250px); --sw: calc(var(--mw) * .8); height: calc(var(--mw) * 1.46); margin: 30px calc(-1 * var(--gutter)) 0; overflow: hidden; -webkit-mask-image: linear-gradient(180deg, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, #000 70%, transparent 100%); } .stage::before { content: ""; position: absolute; z-index: 0; left: 50%; top: 4%; width: 120%; height: 80%; transform: translateX(-50%); background: radial-gradient(closest-side, rgba(199, 240, 74, .2), transparent); } .stage .p-main { top: 8px; } .stage .p-left, .stage .p-right { top: calc(8px + var(--mw) * .17); } .stage .p-left { transform: translateX(-117%) rotate(-8deg); } .stage .p-right { transform: translateX(17%) rotate(8deg); } .lap { display: none; } .stage__track { left: -30%; right: -30%; width: 160%; top: 0; height: 100%; opacity: .6; } .readout { margin-top: 10px; background: none; box-shadow: none; -webkit-backdrop-filter: none; backdrop-filter: none; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); border-radius: 0; } /* liczby dwa na dwa: liczba, obok niej podpis w dwóch linijkach */ .readout { grid-template-columns: repeat(2, minmax(0, 1fr)); } .readout li, .readout li:nth-child(n) { display: flex; align-items: center; gap: 11px; padding: 15px 8px 14px 12px; border-left: 0; border-top: 0; } .readout li:nth-child(2n) { border-left: 1px solid var(--line); } .readout li:nth-child(n+3) { border-top: 1px solid var(--line); } .readout li::before { left: 12px; } .readout b { flex: none; font-size: 1.8rem; } .readout span { margin-top: 0; font-size: .74rem; line-height: 1.28; text-wrap: balance; } /* ——— dyscypliny: dwa rzędy okrągłych grafik w ruchu ——— */ .lanes { padding-block: 56px 60px; } .roster, .dots[data-for="roster"] { display: none; } .mdisc { display: grid; gap: 10px; margin-inline: calc(-1 * var(--gutter)); overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); mask-image: linear-gradient(90deg, transparent, #000 7%, #000 93%, transparent); } .mdisc__row { display: flex; width: max-content; margin: 0; padding: 0; list-style: none; animation: mdisc 46s linear infinite; } .mdisc__row.is-rev { animation-duration: 40s; animation-direction: reverse; } .mdisc li { display: flex; align-items: center; gap: 12px; margin-right: 10px; padding: 6px 20px 6px 6px; border-radius: 999px; white-space: nowrap; background: linear-gradient(90deg, color-mix(in srgb, var(--lc) 18%, var(--ink-3)), var(--ink-2)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lc) 34%, transparent); font: 700 1.02rem/1 var(--body); } .mdisc__a { position: relative; width: 58px; height: 58px; flex: none; overflow: hidden; border-radius: 50%; background: radial-gradient(closest-side, color-mix(in srgb, var(--lc) 30%, #070809), #070809); } .mdisc__a img { position: absolute; inset: 0; width: 100%; height: 100%; transform: scale(1.55) translateY(10%); } @keyframes mdisc { to { transform: translateX(-50%); } } /* ——— plan: pasek dni z V11, ciaśniejszy nagłówek ——— */ .wk__bar { gap: 6px 14px; } .wk__plan .label { display: none; } /* ——— siłownia: karta ćwiczenia, a pod nią przerwa w jednym wierszu ——— */ .gx { display: block; } .gx__card { border-radius: 24px; } .gx__side { display: block; margin-top: 10px; } .gx__body { display: none; } .gx__rest { grid-template-columns: 76px minmax(0, 1fr) auto; grid-template-areas: "d l b" "d n b"; justify-items: start; align-items: center; gap: 4px 14px; padding: 12px 14px 12px 12px; border-radius: 22px; box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .09); } .gx__rest .label { grid-area: l; align-self: end; font-size: .62rem; } .gx__dial { grid-area: d; width: 76px; height: 76px; } .gx__dial b { font-size: 1.3rem; } .gx__rest small { grid-area: n; align-self: start; font-size: .82rem; text-align: left; } .gx__rbtn { grid-area: b; grid-template-columns: 1fr; width: 74px; } .gx__rbtn button { padding: 10px 0; } /* ——— mapy: teren od krawędzi do krawędzi ——— */ .terra { --r: 0px; aspect-ratio: 1 / 1.08; margin-inline: calc(-1 * var(--gutter)); border-radius: 0; box-shadow: none; } .terra__hud { left: var(--gutter); right: var(--gutter); } .mapnums { margin-top: 18px; background: none; box-shadow: none; border-radius: 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); } .mapnums li { padding: 14px 10px 13px 12px; } /* ——— na żywo: ekran blokady z Live Activity zamiast zrzutu ekranu, tempo pod spodem ——— */ .livepair { order: 1; display: block; padding: 26px 14px 18px; border-radius: 32px; background: radial-gradient(110% 70% at 15% 0%, rgba(255, 69, 58, .32), transparent 62%), radial-gradient(110% 70% at 100% 100%, rgba(10, 132, 255, .34), transparent 62%), linear-gradient(180deg, #1b2030, #0b0e14); box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1), 0 40px 80px -40px rgba(0, 0, 0, .9); } .livepair__phone { display: none; } .livepair__side { position: static; width: auto; max-width: none; margin: 0; } .lockhead { display: block; margin-bottom: 22px; text-align: center; color: rgba(255, 255, 255, .9); } .lockhead span { font: 600 .95rem/1 var(--body); } .lockhead b { display: block; margin-top: 6px; font: 800 5.2rem/.9 var(--display); font-stretch: 88%; letter-spacing: -.02em; } .livepair .la { box-shadow: 0 24px 50px -24px rgba(0, 0, 0, .9); } .livepair__cap { margin: 16px 4px 0; text-align: center; font-size: .82rem; color: rgba(255, 255, 255, .62); } .livepair__cap b { display: inline; margin-right: 4px; } .run { order: 2; margin-top: 14px; } .run__stats { grid-template-columns: repeat(4, auto); justify-content: space-between; gap: 8px; } .run__stats dd { font-size: 1.26rem; } .run__stats dd small { margin-left: 2px; font-size: .6rem; } /* ——— plakaty: przewijane w bok, środkowy na środku ekranu ——— */ .posters { display: flex; justify-content: flex-start; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 10px 17vw 18px; scroll-padding-inline: 17vw; } .posters::-webkit-scrollbar { display: none; } .poster, .poster:nth-child(1), .poster:nth-child(2), .poster:nth-child(3), .posters:hover .poster:nth-child(1), .posters:hover .poster:nth-child(3) { width: 66vw; margin: 0; flex: none; transform: none; scroll-snap-align: center; border-radius: 16px; } /* ——— odżywianie: same karty, przewijane w bok ——— */ .kitchen .phone { display: none; } .pcard { flex-basis: min(84vw, 340px); } /* ——— widżety: dwa przełączniki Zdrowia zamiast trzech ——— */ .wg__toggles li:nth-child(3) { display: none; } /* ——— pytania i meta ——— */ .faq { padding-block: 60px 52px; } .faq__side p { font-size: .98rem; } /* ——— pasek sklepów na dole ekranu ——— */ .mbar { display: flex; gap: 8px; position: fixed; z-index: 44; left: 10px; right: 10px; bottom: calc(10px + env(safe-area-inset-bottom, 0px)); padding: 8px; border-radius: 24px; background: rgba(16, 18, 21, .8); -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4); box-shadow: inset 0 0 0 1px var(--line-2), 0 20px 44px -14px rgba(0, 0, 0, .95); transform: translateY(calc(100% + 24px)); transition: transform .45s cubic-bezier(.2, .8, .2, 1); } .mbar.is-on { transform: none; } .mbar .store { flex: 1 1 0; min-width: 0; min-height: 50px; padding: 0 10px 0 7px; gap: 9px; border-radius: 17px; } .mbar .store__ico { width: 34px; height: 34px; border-radius: 8px; } .mbar .store__txt small { font-size: .66rem; } .mbar .store__txt b { font-size: 1rem; } .is-android .mbar .store[data-store="android"] { order: -1; } } @media (max-width: 719px) and (prefers-reduced-motion: reduce) { .mdisc { overflow-x: auto; } .mdisc__row { animation: none; } .mdisc__row li[aria-hidden] { display: none; } } /* ——— V13: telefon, druga runda ——— Plan = talia kart dni przesuwana palcem; siłownia = jedna seria na środku i przerwa w tym samym miejscu; mapa = teren w karcie z arkuszem trasy pod spodem; na żywo = ekran blokady w kształcie telefonu. Mniej kart w kartach: bez wykresu biegu, bez karty postępu w historii, bez liczb pod mapą. */ .mplan, .mset, .msheet, .lockwall, .lockfoot, .terra__wx { display: none; } @media (max-width: 719px) { /* ——— dyscypliny: cała grafika w kwadracie, nazwa pod nią ——— */ .mdisc { gap: 16px; } .mdisc li { flex-direction: column; align-items: stretch; gap: 9px; width: 118px; margin-right: 12px; padding: 0; border-radius: 0; background: none; box-shadow: none; white-space: normal; } .mdisc__a { width: 118px; height: 118px; border-radius: 24px; background: #070809; } .mdisc__a img { transform: none; object-fit: cover; } .mdisc__a::after { content: ""; position: absolute; inset: 0; border-radius: inherit; box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lc) 36%, transparent), inset 0 -30px 34px -24px color-mix(in srgb, var(--lc) 50%, transparent); } .mdisc li b { display: flex; align-items: center; gap: 7px; padding-left: 3px; font: 700 .9rem/1.15 var(--body); } .mdisc li b::before { content: ""; width: 7px; height: 7px; flex: none; border-radius: 50%; background: var(--lc); box-shadow: 0 0 8px var(--lc); } /* ——— plan: pasek dni i talia kart ——— */ .wk { display: none; } .mplan { display: block; --cw: min(80vw, 330px); } .mplan__top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin-bottom: 12px; } .mplan__top p { display: grid; gap: 6px; margin: 0; white-space: nowrap; } .mplan__top p:first-child b { font: 750 1.12rem/1 var(--body); } .mplan__top span { font-size: .8rem; color: var(--mute); } .mplan__prog { justify-items: end; } .mplan__prog b { color: var(--lime); font-weight: 750; } .mplan__prog i { width: 100%; height: 4px; border-radius: 4px; background: linear-gradient(90deg, var(--lime) calc(var(--p) * 100%), var(--ink-4) 0); } .mplan__days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; margin-bottom: 14px; } .mplan__days button { appearance: none; border: 0; cursor: pointer; display: grid; justify-items: center; gap: 6px; padding: 8px 0 9px; border-radius: 14px; background: none; color: var(--chalk); font: inherit; transition: background .25s, box-shadow .25s; } .mplan__days span { font: 650 .58rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); } .mplan__days b { font: 750 1.1rem/1 var(--display); font-variant-numeric: tabular-nums; } .mplan__days i { width: 6px; height: 6px; border-radius: 50%; background: var(--dc); } .mplan__days .is-parts i { background: none; box-shadow: inset 0 0 0 1.5px var(--mute-2); } .mplan__days .is-parts.is-plan i { background: var(--lime); box-shadow: none; } .mplan__days .is-today b { color: var(--lime); } .mplan__days [aria-selected="true"] { background: var(--ink-3); box-shadow: inset 0 0 0 1px var(--line-2); } .mplan__days .is-today[aria-selected="true"] { background: color-mix(in srgb, var(--lime) 13%, var(--ink-3)); box-shadow: inset 0 0 0 1.5px var(--lime); } .mplan__deck { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; overscroll-behavior-x: contain; margin-inline: calc(-1 * var(--gutter)); padding: 2px calc((100% - var(--cw)) / 2 + var(--gutter)) 12px; } .mplan__deck::-webkit-scrollbar { display: none; } .mday { flex: 0 0 var(--cw); scroll-snap-align: center; display: flex; flex-direction: column; min-width: 0; padding: 18px 18px 20px; border-radius: 28px; opacity: .5; transform: scale(.95); transition: opacity .35s, transform .35s, box-shadow .35s; background: radial-gradient(110% 52% at 50% 26%, color-mix(in srgb, var(--dc) 20%, transparent), transparent 72%), linear-gradient(180deg, var(--ink-3), var(--ink-2)); box-shadow: inset 0 0 0 1px var(--line); } .mday.is-on { opacity: 1; transform: none; box-shadow: inset 0 0 0 1px var(--line-2), 0 30px 60px -32px rgba(0, 0, 0, .95); } .mday.is-today.is-on { box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--lime) 70%, transparent), 0 30px 60px -32px rgba(0, 0, 0, .95); } .mday__top { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .mday__when { font: 650 .64rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); } .mday__st { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border-radius: 999px; font: 700 .7rem/1 var(--body); background: color-mix(in srgb, var(--dc) 18%, transparent); color: color-mix(in srgb, var(--dc) 82%, #fff); } .mday__st svg { width: 12px; height: 12px; margin-left: -2px; } .mday.is-today .mday__st { background: var(--lime); color: var(--lime-ink); } .mday.is-parts .mday__st { background: rgba(255, 255, 255, .07); color: var(--mute); } .mday.is-plan .mday__st { background: color-mix(in srgb, var(--lime) 18%, transparent); color: var(--lime); } .mday__vis { display: grid; place-items: center; height: 138px; margin: 8px 0 12px; } .mday__vis .pfig { gap: 14px; } .mday__vis .pfig__side { width: 63px; } .mday__vis .pfig__side img.b { filter: drop-shadow(0 16px 20px rgba(0, 0, 0, .7)); } .mday.is-parts .pfig__side img.b { opacity: .6; } .mday__vis.is-art { overflow: hidden; border-radius: 18px; background: #070809; } .mday__vis.is-art img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; } .mday__title { margin: 0; font: 800 1.5rem/1.05 var(--display); font-stretch: 86%; letter-spacing: -.01em; } .mday__meta { margin: 6px 0 0; font-size: .8rem; color: var(--mute); } /* ćwiczenia: miniatura, pełna nazwa, pod nią serie i ciężar */ .mday__list { display: grid; gap: 8px; margin: 14px 0 0; padding: 0; list-style: none; } .mday__list li { display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; align-items: center; gap: 11px; } .mday__list .pday__th { width: 38px; height: 38px; } .mday__list .pday__th img { border-radius: 11px; } .mday__ex { display: grid; gap: 4px; min-width: 0; } .mday__ex b { font: 600 .86rem/1.2 var(--body); color: var(--chalk); text-wrap: pretty; } .mday__ex small { font: 500 .74rem/1 var(--body); color: var(--mute); font-variant-numeric: tabular-nums; } .mday__ok { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: color-mix(in srgb, var(--lime) 15%, transparent); color: var(--lime); } .mday__ok svg { width: 13px; height: 13px; } /* krótsze karty wypełniają wysokość talii obrazem, a nie pustką */ .mday.is-rest .mday__vis { flex: 1 1 196px; height: auto; min-height: 196px; } .mday.is-parts .mday__vis { height: 222px; } .mday.is-parts .mday__vis .pfig__side { width: 102px; } .mday__calm { margin: 12px 0 0; font-size: .8rem; line-height: 1.45; color: var(--mute); } .mday__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px; margin-top: auto; padding-top: 14px; } .mday__go { appearance: none; border: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; padding: 13px 20px; border-radius: 999px; background: var(--lime); color: var(--lime-ink); font: 750 .95rem/1 var(--body); text-decoration: none; box-shadow: 0 12px 26px -14px var(--lime); } .mday__go svg { width: 16px; height: 16px; } .mday__go:disabled { background: var(--ink-4); color: var(--mute); box-shadow: none; cursor: default; } .mday__go.is-saved { background: color-mix(in srgb, var(--lime) 15%, var(--ink-3)); color: var(--lime); box-shadow: none; cursor: default; } .mday__note { display: inline-flex; align-items: center; gap: 6px; font-size: .8rem; color: var(--mute); } .mday__note svg { width: 15px; height: 15px; } /* wynik zrobionego dnia: trzy równe kolumny między cienkimi liniami */ .mday__sum { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 14px 0 0; padding: 11px 0; border-block: 1px solid var(--line); } .mday__sum span { display: grid; justify-items: center; gap: 6px; font: 600 .6rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); } .mday__sum span + span { border-left: 1px solid var(--line); } .mday__sum b { font: 800 1.35rem/1 var(--display); font-stretch: 86%; letter-spacing: 0; text-transform: none; color: var(--chalk); font-variant-numeric: tabular-nums; } .mday__sum small { margin-left: 2px; font: 700 .66rem/1 var(--body); color: var(--mute); } .mday__pr { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 10px 0 -4px; font: 650 .76rem/1 var(--body); color: var(--kcal); } .mday__pr svg { width: 13px; height: 13px; } .mday__rest { display: flex; align-items: center; gap: 10px; margin: 14px 0 0; padding: 10px 12px; border-radius: 14px; background: rgba(255, 255, 255, .045); font-size: .76rem; color: var(--mute); } .mday__rest > span:first-child { display: grid; place-items: center; width: 28px; height: 28px; flex: none; border-radius: 50%; background: color-mix(in srgb, var(--dc) 24%, transparent); color: var(--dc); } .mday__rest svg { width: 15px; height: 15px; } .mday__rest b { display: block; margin-bottom: 3px; font-size: .88rem; color: var(--chalk); } .mday__next { display: flex; align-items: center; gap: 8px; margin: 0; font-size: .8rem; color: var(--mute); } .mday__next svg { width: 15px; height: 15px; flex: none; color: var(--stretch); } .mday__next b { font-weight: 650; color: var(--chalk); } .mday__parts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; } .mday__parts button { appearance: none; border: 0; cursor: pointer; padding: 7px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); box-shadow: inset 0 0 0 1px var(--line); color: var(--chalk); font: 600 .76rem/1 var(--body); transition: background .2s, color .2s; } .mday__parts [aria-pressed="true"] { background: color-mix(in srgb, var(--lime) 17%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--lime) 55%, transparent); color: var(--lime); } .mday__built { flex-basis: 100%; margin: 0; font-size: .76rem; line-height: 1.4; color: var(--mute); } .mday__built b { font-weight: 650; color: var(--chalk); } /* ——— siłownia: jedna seria na środku ——— */ .gx { display: none; } .mset { --tc: var(--lime); display: block; width: 100%; max-width: 440px; margin: 28px auto 0; overflow: hidden; border-radius: 28px; background: linear-gradient(180deg, var(--ink-3), var(--ink-2)); box-shadow: inset 0 0 0 1px var(--line-2), 0 40px 80px -40px rgba(0, 0, 0, .95); } .mset__art { position: relative; aspect-ratio: 16 / 10; overflow: hidden; background: #070809; } .mset__art img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 42%; } .mset__art::after { content: ""; position: absolute; inset: 38% 0 0; background: linear-gradient(0deg, var(--ink-3) 6%, transparent); } .mset__hd { position: absolute; z-index: 1; left: 18px; right: 116px; bottom: 12px; } .mset__eye { font: 650 .62rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--mute); } .mset__hd h3 { margin: 6px 0 0; font: 800 1.32rem/1.06 var(--display); font-stretch: 88%; } .mset__pr { position: absolute; z-index: 1; right: 14px; bottom: 14px; display: grid; gap: 4px; padding: 7px 10px; border-radius: 12px; background: rgba(10, 11, 13, .7); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--kcal) 45%, transparent); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); } .mset__pr small { font: 650 .56rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--kcal); } .mset__pr b { font: 750 .9rem/1 var(--body); white-space: nowrap; } .mset__dots { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; margin: 0; padding: 12px 14px 2px; list-style: none; } .mset__dots li { display: grid; justify-items: center; gap: 6px; } .mset__dots span { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font: 750 .78rem/1 var(--body); color: var(--tc); box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tc) 45%, transparent); transition: background .3s, color .3s; } .mset__dots .ok span { background: var(--tc); color: var(--ink); box-shadow: none; } .mset__dots .cur span { box-shadow: inset 0 0 0 2px var(--tc), 0 0 0 4px color-mix(in srgb, var(--tc) 18%, transparent); } .mset__dots small { font: 500 .6rem/1 var(--mono); color: var(--mute-2); white-space: nowrap; } .mset__dots .cur small { color: var(--chalk); } .mset__stage, .mset__rest { min-height: 286px; padding: 12px 14px 14px; } .mset__stage[hidden], .mset__rest[hidden] { display: none; } .mset__types { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 3px; padding: 4px; border-radius: 14px; background: rgba(255, 255, 255, .045); } .mset__types button { appearance: none; border: 0; cursor: pointer; padding: 9px 0; border-radius: 10px; background: none; color: var(--mute); font: 650 .7rem/1 var(--body); white-space: nowrap; transition: background .2s, color .2s; } .mset__types [aria-pressed="true"] { background: color-mix(in srgb, var(--tc) 18%, var(--ink-3)); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--tc) 45%, transparent); color: var(--tc); } .mset__tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 10px; } .mset__tile { display: grid; justify-items: center; gap: 7px; padding: 12px 10px 10px; border-radius: 18px; background: rgba(255, 255, 255, .045); box-shadow: inset 0 0 0 1px var(--line); } .mset__tile .label { font-size: .58rem; color: var(--mute); } .mset__tile b { font: 800 2.8rem/1 var(--display); font-stretch: 80%; font-variant-numeric: tabular-nums; } .mset__tile b small { margin-left: 3px; font: 700 .85rem/1 var(--body); color: var(--mute); } .mset__pm { display: grid; grid-template-columns: 1fr 1fr; gap: 6px; width: 100%; } .mset__pm button { appearance: none; border: 0; cursor: pointer; height: 38px; border-radius: 11px; background: rgba(255, 255, 255, .08); color: var(--chalk); font: 600 1.25rem/1 var(--body); } .mset__pm button:active { background: rgba(255, 255, 255, .16); } .mset__last { margin: 10px 0 0; text-align: center; font-size: .78rem; color: var(--mute); } .mset__go { appearance: none; border: 0; cursor: pointer; display: flex; align-items: center; justify-content: center; gap: 9px; width: 100%; height: 54px; margin-top: 10px; border-radius: 16px; background: var(--tc); color: var(--ink); font: 800 1.02rem/1 var(--body); box-shadow: 0 16px 34px -18px var(--tc); transition: background .25s; } .mset__go svg { width: 20px; height: 20px; } .mset__go:active { transform: scale(.985); } .mset__rest { display: grid; align-content: center; justify-items: center; gap: 14px; text-align: center; } .mset__ring { position: relative; width: 156px; height: 156px; } .mset__ring svg { width: 100%; height: 100%; transform: rotate(-90deg); } .mset__ring circle { fill: none; stroke-width: 7; } .mset__ring .tr { stroke: rgba(255, 255, 255, .08); } .mset__ring .pr { stroke: var(--lime); stroke-linecap: round; stroke-dasharray: 100 100; transition: stroke-dasharray 1s linear; filter: drop-shadow(0 0 6px rgba(199, 240, 74, .5)); } .mset__ring div { position: absolute; inset: 0; display: grid; place-content: center; justify-items: center; gap: 7px; } .mset__ring b { font: 800 2.7rem/1 var(--display); font-stretch: 80%; font-variant-numeric: tabular-nums; } .mset__ring span { font: 650 .62rem/1 var(--body); letter-spacing: .14em; text-transform: uppercase; color: var(--lime); } .mset__next { margin: 0; font-size: .88rem; color: var(--mute); } .mset__next b { color: var(--chalk); } .mset__rbtn { display: grid; grid-template-columns: auto 1fr auto; gap: 8px; width: 100%; } .mset__rbtn button { appearance: none; border: 0; cursor: pointer; height: 50px; padding: 0 14px; border-radius: 15px; background: rgba(255, 255, 255, .08); color: var(--chalk); font: 650 .86rem/1 var(--body); } .mset__rbtn .mset__skip { background: var(--lime); color: var(--lime-ink); font-weight: 800; } /* ——— mapy: teren w karcie, pod nim arkusz trasy jak w aplikacji ——— */ .mapnums, .terra__hint, .terra__route { display: none; } .msheet { order: 1; } .terra__chip, .terra__wx { white-space: nowrap; } .terra { --r: 28px 28px 0 0; aspect-ratio: 1 / .94; width: 100%; min-height: 0; max-width: 460px; margin: 28px auto 0; border-radius: var(--r); box-shadow: inset 0 0 0 1px var(--line); } .terra__hud { left: 14px; right: 14px; top: 14px; } .terra__wx { display: inline-flex; align-items: center; gap: 6px; padding: 7px 11px 7px 8px; border-radius: 999px; background: rgba(10, 11, 13, .66); box-shadow: inset 0 0 0 1px var(--line); font: 600 .74rem/1 var(--body); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); } .terra__wx svg { width: 17px; height: 17px; color: #8ec5ff; } .msheet { position: relative; display: block; width: 100%; max-width: 460px; margin: 0 auto; padding: 22px 16px 16px; border-radius: 0 0 28px 28px; background: linear-gradient(180deg, #15181c, #0f1114); box-shadow: inset 0 0 0 1px var(--line), 0 40px 80px -40px rgba(0, 0, 0, .9); } .msheet::before { content: ""; position: absolute; left: 50%; top: 8px; width: 38px; height: 4px; margin-left: -19px; border-radius: 4px; background: rgba(255, 255, 255, .16); } .msheet__hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; } .msheet__eye { display: inline-flex; align-items: center; gap: 8px; font: 650 .62rem/1 var(--body); letter-spacing: .12em; text-transform: uppercase; color: var(--mute); } .msheet__eye .trailmark { margin: 0; } .msheet__eye .trailmark i { width: 5px; height: 11px; } .msheet__hd h3 { margin: 8px 0 0; font: 800 1.36rem/1.05 var(--display); font-stretch: 88%; } .msheet__time { padding: 7px 10px; border-radius: 999px; background: rgba(255, 255, 255, .06); font: 700 .8rem/1 var(--body); white-space: nowrap; } .msheet__nums { display: grid; grid-template-columns: repeat(3, auto); justify-content: space-between; margin: 16px 0 0; } .msheet__nums dt { font: 650 .58rem/1 var(--body); letter-spacing: .1em; text-transform: uppercase; color: var(--mute); } .msheet__nums dd { margin: 6px 0 0; font: 750 1.1rem/1 var(--body); font-variant-numeric: tabular-nums; white-space: nowrap; } .msheet__pw { position: relative; height: 62px; margin-top: 14px; } .msheet__prof { display: block; width: 100%; height: 100%; overflow: visible; } .msheet__prof .a { fill: rgba(227, 38, 47, .15); } .msheet__prof .l { fill: none; stroke: #e3262f; stroke-width: 2; stroke-linejoin: round; } .msheet__dot { position: absolute; left: 0; top: 92%; width: 12px; height: 12px; margin: -6px 0 0 -6px; border-radius: 50%; background: #34c759; box-shadow: 0 0 0 2px #fff, 0 0 12px #34c759; } .msheet__act { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: center; margin-top: 16px; } .msheet__go { display: flex; align-items: center; justify-content: center; gap: 8px; height: 50px; border-radius: 16px; background: var(--lime); color: var(--lime-ink); font: 800 1rem/1 var(--body); text-decoration: none; } .msheet__go svg { width: 16px; height: 16px; } .msheet__off { display: grid; grid-template-columns: auto auto; align-items: center; column-gap: 9px; height: 50px; padding: 0 14px 0 12px; border-radius: 16px; background: rgba(255, 255, 255, .06); font: 650 .82rem/1.15 var(--body); } .msheet__off svg { grid-row: span 2; width: 19px; height: 19px; color: var(--ride); } .msheet__off small { font-size: .68rem; color: var(--mute); } /* ——— na żywo: ekran blokady w kształcie telefonu, bez wykresu biegu ——— */ .run, .livepair__cap { display: none; } .livepair { position: relative; display: block; width: min(78vw, 320px); aspect-ratio: 9 / 19; margin: 34px auto 0; padding: 0; overflow: hidden; border-radius: 50px; background: #05060a; box-shadow: 0 0 0 9px #0c0d10, 0 0 0 10.5px #3a3d44, 0 50px 90px -30px rgba(0, 0, 0, .95), 0 0 140px -40px rgba(255, 69, 58, .45); } .livepair::before { content: ""; position: absolute; z-index: 3; top: 11px; left: 50%; width: 31%; height: 27px; border-radius: 20px; background: #000; transform: translateX(-50%); } .livepair::after { content: ""; position: absolute; z-index: 3; bottom: 8px; left: 50%; width: 36%; height: 5px; border-radius: 5px; background: rgba(255, 255, 255, .85); transform: translateX(-50%); } .livepair__side { position: relative; display: flex; flex-direction: column; width: auto; height: 100%; max-width: none; margin: 0; padding: 52px 11px 24px; } .lockwall { position: absolute; inset: 0; z-index: 0; display: block; overflow: hidden; } .lockwall img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; transform: scale(1.12); filter: saturate(1.15) brightness(.62); } .lockwall::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 0, 0, .35), transparent 34%, transparent 52%, rgba(0, 0, 0, .55)); } .lockhead { position: relative; z-index: 1; margin: 0; } .lockhead span { font-size: .92rem; } .lockhead b { margin-top: 4px; font-size: clamp(3.8rem, 22vw, 5rem); text-shadow: 0 6px 30px rgba(0, 0, 0, .35); } .livepair .la { position: relative; z-index: 1; margin-top: auto; padding: 12px 13px; border-radius: 24px; } .livepair .la__turn { grid-template-columns: 48px minmax(0, 1fr); gap: 11px; } .livepair .la__ico { width: 48px; height: 48px; border-radius: 13px; } .livepair .la__ico svg { width: 26px; height: 26px; } .livepair .la__dist { font-size: 1.75rem; } .livepair .la__what { font-size: .86rem; } .livepair .la__then { font-size: .68rem; } .livepair .la__row { grid-template-columns: auto auto 1fr; gap: 12px; } .livepair .la__btn:not(.la__btn--stop) { display: none; } .lockfoot { position: relative; z-index: 1; display: flex; align-items: center; justify-content: space-between; margin-top: 16px; padding: 0 14px; } .lockfoot span { display: grid; place-items: center; width: 42px; height: 42px; border-radius: 50%; background: rgba(0, 0, 0, .38); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); } .lockfoot svg { width: 19px; height: 19px; color: #fff; } /* ——— plakaty: na szerszym ekranie zostają w rozmiarze telefonu ——— */ .posters { --pw: min(66vw, 290px); padding-inline: calc((100% - var(--pw)) / 2 + var(--gutter)); scroll-padding-inline: 0; } .poster, .poster:nth-child(1), .poster:nth-child(2), .poster:nth-child(3), .posters:hover .poster:nth-child(1), .posters:hover .poster:nth-child(3) { width: var(--pw); } /* ——— historia: bez karty postępu ——— */ .tl__prog { display: none; } /* ——— szerszy telefon i mały tablet: makiety zostają w rozmiarze telefonu ——— */ .mbar { left: max(10px, calc(50% - 240px)); right: max(10px, calc(50% - 240px)); } }