/* SoloFit Rezerwacja - jedna szata dla wszystkich widgetow, ta sama co na stronie solofit.pl: Barlow + Chakra Petch, czern #0d0d0d, zolty #F2B705, cienkie kreski z przezroczystosci, panele z glebokim cieniem i zoltym "jezyczkiem" w lewym gornym rogu, przyciski ze swiatlem pod spodem. Wszystkie kolory sa zmiennymi na .sfb-book. Wersja jasna (sekcje w kolorze kremowym, np. cennik) wlacza sie klasa .is-light: shortcode z tlo="jasne" albo sam skrypt, gdy wykryje jasne tlo pod widgetem. */ .sfb-book { --bg: #0d0d0d; /* tlo sekcji */ --bg-fade: rgba(13, 13, 13, 0); /* to samo tlo, przezroczyste (gradienty) */ --panel: #111111; /* kafle, listy, boksy */ --panel-2: #121212; /* glowne panele: formularz, podsumowanie */ --field: rgba(242, 240, 235, .035); /* pola tekstowe i ciche kafelki */ --line: rgba(242, 240, 235, .1); /* cienka kreska */ --line2: rgba(242, 240, 235, .16); /* obramowanie pol i kafelkow */ --line3: rgba(242, 240, 235, .3); /* obramowanie pod kursorem */ --text: #f2f0eb; --text-soft: rgba(242, 240, 235, .76); /* tekst ciagly */ --text-dim: rgba(242, 240, 235, .5); /* drobne podpisy */ --muted: #8a8a85; /* etykiety, nadtytuly */ --accent: #F2B705; --accent-text: #F2B705; /* zolty jako kolor tekstu (na jasnym tle ciemniejszy, zeby dalo sie czytac) */ --accent-2: #ffc81f; /* zolty pod kursorem */ --on-accent: #111111; /* tekst na zoltym */ --accent-soft: rgba(242, 183, 5, .1); /* zolte tlo pod spodem */ --accent-line: rgba(242, 183, 5, .45); /* zolta kreska */ --hover: rgba(242, 240, 235, .06); /* tlo kafelka pod kursorem */ --danger: #ff8a75; --danger-soft: rgba(255, 138, 117, .08); --danger-text: #ffc9bf; --ok: #6fd08c; --ok-soft: rgba(111, 208, 140, .1); --radius: 3px; --shadow-panel: 0 40px 80px -44px rgba(0, 0, 0, .9), 0 8px 24px -18px rgba(0, 0, 0, .7); --ring: 0 0 0 1px rgba(242, 240, 235, .08); --glow: 0 0 22px -2px rgba(242, 183, 5, .38), 0 10px 26px -10px rgba(242, 183, 5, .5); --glow-2: 0 0 30px 0 rgba(242, 183, 5, .55), 0 16px 38px -12px rgba(242, 183, 5, .75); --font-body: Barlow, -apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Arial, sans-serif; --font-head: "Chakra Petch", Barlow, "Arial Black", sans-serif; --ease: cubic-bezier(.22, .61, .36, 1); background: var(--bg); color: var(--text); font-family: var(--font-body); -webkit-font-smoothing: antialiased; padding: 32px 24px 56px; box-sizing: border-box; } /* Wersja jasna: kremowe tlo, czarny tekst - jak sekcje "To naprawde proste" i "Ile to kosztuje?". Kursywa w tytule jest tu czarna z zoltym podkresleniem (tak robi strona na kremie), a obrysowane przyciski maja czarna ramke. */ .sfb-book.is-light, .sfb-book.is-light .sfb-book { --bg: #f2f0eb; --bg-fade: rgba(242, 240, 235, 0); --panel: #faf9f6; --panel-2: #ffffff; --field: rgba(13, 13, 13, .04); --line: rgba(13, 13, 13, .12); --line2: rgba(13, 13, 13, .18); --line3: rgba(13, 13, 13, .38); --text: #0d0d0d; --text-soft: rgba(13, 13, 13, .7); --text-dim: rgba(13, 13, 13, .5); --muted: rgba(13, 13, 13, .55); --accent-text: #7a5a00; --accent-soft: rgba(242, 183, 5, .16); --hover: rgba(13, 13, 13, .05); --danger: #c8452c; --danger-soft: rgba(200, 69, 44, .08); --danger-text: #8f2f1c; --ok: #2f8a4e; --ok-soft: rgba(47, 138, 78, .1); --shadow-panel: 0 40px 80px -46px rgba(17, 17, 17, .45), 0 8px 24px -18px rgba(17, 17, 17, .25); --ring: 0 0 0 1px rgba(17, 17, 17, .08); } .sfb-book.is-light .sfb-head__title em, .sfb-book.is-light .sfb-book__title em, .sfb-book.is-light .sfb-panel__name em { color: var(--text); padding: 0 .06em; background-image: linear-gradient(transparent 62%, rgba(242, 183, 5, .85) 62%); -webkit-box-decoration-break: clone; box-decoration-break: clone; } .sfb-book.is-light .sfb-book__cta--ghost, .sfb-book.is-light a.sfb-book__cta--ghost { color: var(--text); border-color: rgba(13, 13, 13, .35); } .sfb-book.is-light.sfb-book .sfb-book__cta--ghost:hover, .sfb-book.is-light.sfb-book .sfb-book__cta--ghost:focus, .sfb-book.is-light.sfb-book a.sfb-book__cta--ghost:hover, .sfb-book.is-light.sfb-book a.sfb-book__cta--ghost:focus { color: var(--text) !important; border-color: var(--text) !important; } /* Naglowki. Elementor (Ustawienia witryny -> Typografia) i motyw maluja h1-h6 kolorem strony regula ".elementor-kit-N h3", ktora jest mocniejsza niz sama klasa widgetu. Na ciemnym panelu dawalo to czarne tytuly. Dlatego kazdy naglowek w widgecie dostaje kolor i kroj z wyzsza waga - tu ogolnie, a nizej przy kazdej klasie. */ .sfb-book.sfb-book h1, .sfb-book.sfb-book h2, .sfb-book.sfb-book h3, .sfb-book.sfb-book h4, .sfb-book.sfb-book h5, .sfb-book.sfb-book h6 { color: var(--text); } .sfb-book.sfb-book h1 em, .sfb-book.sfb-book h2 em, .sfb-book.sfb-book h3 em, .sfb-book.sfb-book h4 em, .sfb-book.sfb-book h5 em, .sfb-book.sfb-book h6 em { color: var(--accent-text); } .sfb-book.sfb-book.is-light h1 em, .sfb-book.sfb-book.is-light h2 em, .sfb-book.sfb-book.is-light h3 em { color: var(--text); } .sfb-book *, .sfb-book *::before, .sfb-book *::after { box-sizing: border-box; } .sfb-book ::selection { background: rgba(242, 183, 5, .28); color: var(--text); } .sfb-book button { font-family: inherit; cursor: pointer; } .sfb-book a { color: var(--accent-text); text-decoration: none; } .sfb-book em { font-style: italic; color: var(--accent-text); } .sfb-book__loading, .sfb-book__error { padding: 24px; color: var(--muted); } .sfb-book__error { color: var(--danger); } /* ===== Naglowek ekranu rezerwacji ===== */ .sfb-book__head { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; margin-bottom: 26px; } .sfb-book__eyebrow, .sfb-panel__eyebrow, .sfb-head__eyebrow, .sfb-tab__eyebrow { display: inline-flex; align-items: center; gap: .6rem; margin: 0 0 10px; font-family: var(--font-body); font-size: 11px; font-weight: 600; letter-spacing: .22em; text-transform: uppercase; color: var(--muted); } .sfb-book__eyebrow::before, .sfb-panel__eyebrow::before, .sfb-head__eyebrow::before, .sfb-tab__eyebrow::before { content: ""; flex: 0 0 auto; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } .sfb-book .sfb-book__title { margin: 0; font-family: var(--font-head); font-style: normal; font-weight: 700; font-size: clamp(30px, 3.4vw, 44px); line-height: 1; letter-spacing: -.03em; text-transform: none; color: var(--text); text-wrap: balance; } .sfb-book__balance { display: flex; align-items: center; gap: 10px; padding: 9px 14px; border: 1px solid var(--line2); border-radius: var(--radius); background: var(--field); font-size: 14px; white-space: nowrap; } .sfb-book__balance strong { font-size: 15px; } .sfb-book__balance span { color: var(--muted); font-size: 13px; } .sfb-book__grid { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 28px; } .sfb-book__col { display: flex; flex-direction: column; gap: 30px; min-width: 0; } .sfb-book__step { display: flex; flex-direction: column; gap: 14px; } /* Podpis kroku: jak "Kim jestes?" na stronie - Chakra Petch, wersaliki. */ .sfb-book__label { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; font-family: var(--font-head); font-size: 13px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text); } .sfb-book__label small { font-family: var(--font-body); font-weight: 400; letter-spacing: 0; text-transform: none; font-size: 14px; color: var(--muted); } /* ===== Kafelki wyboru: dzien, godzina, minuty, zakladki ===== */ .sfb-book__days { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; } .sfb-book__days::-webkit-scrollbar { display: none; } .sfb-book__day { flex: 0 0 96px; display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px 6px 12px; background: var(--field); border: 1px solid var(--line2); border-radius: var(--radius); color: var(--text); min-height: 84px; } .sfb-book__day:hover { border-color: var(--line3); } .sfb-book__day.is-on { background: var(--accent); color: var(--on-accent); border-color: var(--accent-text); } .sfb-book__day-dow { font-size: 12px; font-weight: 500; letter-spacing: .06em; text-transform: uppercase; opacity: .8; } .sfb-book__day-num { font-family: var(--font-head); font-weight: 700; font-size: 24px; line-height: 1; letter-spacing: -.02em; } .sfb-book__day-note { font-size: 11px; opacity: .7; } .sfb-book__tabs { display: flex; gap: 2px; padding: 3px; background: var(--field); border: 1px solid var(--line); border-radius: var(--radius); } .sfb-book__tab { flex: 1 1 0; display: flex; align-items: center; justify-content: center; gap: 8px; padding: 9px 10px; background: transparent; border: 0; border-radius: 2px; color: var(--text); font-size: 14px; font-weight: 500; min-height: 44px; } .sfb-book__tab small { font-size: 12px; opacity: .75; } .sfb-book__tab.is-on { background: var(--accent); color: var(--on-accent); } .sfb-book__slotwrap { position: relative; min-height: 136px; } .sfb-book__slotwrap.is-loading .sfb-book__slots { opacity: .45; transition: opacity .15s; } .sfb-book__spinner { position: absolute; top: 8px; right: 8px; padding: 6px 10px; background: var(--panel); border: 1px solid var(--line2); border-radius: var(--radius); font-size: 12px; color: var(--muted); } .sfb-book__slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; } .sfb-book__slot { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 12px 6px 10px; background: var(--field); border: 1px solid var(--line2); border-radius: var(--radius); color: var(--text); min-height: 64px; } .sfb-book__slot:hover { border-color: var(--line3); } .sfb-book__slot.is-on { background: var(--accent); color: var(--on-accent); border-color: var(--accent-text); } .sfb-book__slot-time { font-family: var(--font-head); font-weight: 700; font-size: 18px; line-height: 1; } .sfb-book__slot-sub { font-size: 12px; opacity: .75; } .sfb-book__empty { padding: 18px; border: 1px dashed var(--line2); border-radius: var(--radius); background: var(--field); color: var(--muted); font-size: 14px; text-align: center; } /* telefon: godzina -> minuty */ .sfb-book__picker { display: flex; flex-direction: column; gap: 10px; } .sfb-book__hours { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; scroll-snap-type: x proximity; } .sfb-book__hours::-webkit-scrollbar { display: none; } .sfb-book__hour { flex: 0 0 84px; scroll-snap-align: center; display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 11px 6px 9px; background: var(--field); border: 1px solid var(--line2); border-radius: var(--radius); color: var(--text); min-height: 58px; } .sfb-book__hour.is-on { background: var(--accent); color: var(--on-accent); border-color: var(--accent-text); } .sfb-book__hour-num { font-family: var(--font-head); font-weight: 700; font-size: 18px; line-height: 1; } .sfb-book__hour-sub { font-size: 11px; opacity: .75; } .sfb-book__mins { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .sfb-book__min { padding: 12px 6px; background: var(--field); border: 1px solid var(--line2); border-radius: var(--radius); color: var(--text); font-family: var(--font-head); font-weight: 700; font-size: 17px; min-height: 48px; } .sfb-book__min.is-on { background: var(--accent); color: var(--on-accent); border-color: var(--accent-text); } .sfb-book__hint { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--muted); line-height: 1.45; } /* ===== Dlugosc sesji ===== */ .sfb-book__stepper { display: flex; align-items: center; gap: 22px; padding: 20px 24px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); } .sfb-book__stepbtn { width: 52px; height: 52px; display: flex; align-items: center; justify-content: center; background: var(--field); border: 1px solid var(--line2); border-radius: var(--radius); color: var(--text); font-size: 26px; line-height: 1; } .sfb-book__stepbtn:hover { background: var(--hover); } .sfb-book__stepbtn:disabled { opacity: .3; cursor: not-allowed; } .sfb-book__time { flex: 1 1 0; min-width: 0; display: flex; align-items: baseline; justify-content: center; gap: 10px; white-space: nowrap; } .sfb-book__time b { font-family: var(--font-head); font-style: italic; font-weight: 700; font-size: 52px; line-height: 1; letter-spacing: -.02em; } .sfb-book__time span { font-size: 16px; font-weight: 500; color: var(--muted); } .sfb-book__stepbtn { flex: 0 0 auto; } .sfb-book__presets { display: flex; align-items: center; justify-content: space-between; gap: 12px; font-size: 13px; color: var(--muted); flex-wrap: wrap; } .sfb-book__presets div { display: flex; gap: 6px; flex-wrap: wrap; } .sfb-book__preset { padding: 7px 12px; background: transparent; border: 1px solid var(--line2); border-radius: var(--radius); color: var(--text-soft); font-size: 13px; font-weight: 500; min-height: 34px; } .sfb-book__preset.is-on { border-color: var(--accent-text); color: var(--accent-text); } /* ===== Panele glowne: ciemne tlo, cien, zolty jezyczek w rogu ===== */ .sfb-book__summary, .sfb-auth, .sfb-calc, .sfb-panel__login, .sfb-tokens, .sfb-widget__login { position: relative; background: var(--panel-2); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow-panel), var(--ring); } .sfb-book__summary::before, .sfb-auth::before, .sfb-calc::before, .sfb-panel__login::before { content: ""; position: absolute; top: -1px; left: 24px; z-index: 1; width: 44px; height: 3px; background: var(--accent); clip-path: polygon(0 0, 100% 0, calc(100% - 3px) 100%, 3px 100%); pointer-events: none; } /* ===== Podsumowanie ===== */ .sfb-book__summary { display: flex; flex-direction: column; overflow: hidden; position: sticky; top: 24px; } .sfb-book__summary::before { top: 0; } .sfb-book__summary-h { padding: 22px 24px 18px; border-bottom: 1px solid var(--line); font-family: var(--font-head); font-style: normal; font-weight: 700; font-size: 22px; line-height: 1.15; letter-spacing: -.015em; text-transform: none; } .sfb-book__rows { display: flex; flex-direction: column; gap: 14px; padding: 20px 24px; } .sfb-book__row { display: flex; align-items: flex-start; gap: 12px; } .sfb-book__row svg { flex: 0 0 18px; margin-top: 1px; } .sfb-book__row b { display: block; font-weight: 600; font-size: 16px; } .sfb-book__row small { display: block; font-size: 13px; color: var(--muted); } .sfb-book__cost { display: flex; flex-direction: column; gap: 10px; padding: 18px 24px 22px; border-top: 1px solid var(--line); background: var(--field); } .sfb-book__cost-line { display: flex; align-items: baseline; justify-content: space-between; font-size: 14px; } .sfb-book__cost-line span { color: var(--muted); } .sfb-book__cost-big { display: flex; align-items: baseline; gap: 6px; } .sfb-book__cost-big b { font-family: var(--font-head); font-style: italic; font-weight: 700; font-size: 36px; line-height: 1; letter-spacing: -.02em; color: var(--accent-text); } .sfb-book__cost-big span { font-size: 14px; color: var(--muted); } .sfb-book__actions { display: flex; flex-direction: column; gap: 10px; padding: 0 24px 24px; background: var(--field); } /* ===== Przyciski ===== Zolty CTA jak na stronie: Barlow 600, wersaliki, 3 px zaokraglenia, swiatlo pod spodem, pod kursorem jasniejszy i o 2 px wyzej. */ .sfb-book__cta { display: inline-flex; align-items: center; justify-content: center; gap: .6em; width: 100%; min-height: 52px; padding: 16px 28px; background: var(--accent); border: 0; border-radius: var(--radius); color: var(--on-accent); font-family: var(--font-body); font-size: 15px; font-weight: 600; letter-spacing: .06em; line-height: 1; text-transform: uppercase; text-decoration: none; white-space: nowrap; box-shadow: var(--glow); transition: transform .25s var(--ease), background-color .25s, box-shadow .25s, color .25s; } .sfb-book__cta:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; } .sfb-book__cta--ghost { background: transparent; border: 1px solid var(--accent-line); color: var(--accent-text); box-shadow: none; } /* Strzalka na koncu najwazniejszych przyciskow ("Zarezerwuj trening", "Kup"). */ .sfb-book__cta--go::after { content: ""; flex: 0 0 auto; width: 1.1em; height: 1.1em; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%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 24 24' fill='none' stroke='%23000' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12h13M13 6l6 6-6 6'/%3E%3C/svg%3E") center / contain no-repeat; transition: transform .25s var(--ease); } .sfb-book__cta--go:hover::after { transform: translateX(3px); } .sfb-book__note { font-size: 12px; color: var(--text-dim); text-align: center; line-height: 1.5; } .sfb-book__warn { padding: 12px 14px; border: 1px solid rgba(242, 183, 5, .3); border-radius: var(--radius); background: rgba(242, 183, 5, .06); font-size: 13px; color: var(--text-soft); line-height: 1.45; } .sfb-book__warn--err { border-color: transparent; border-left: 2px solid var(--danger); border-radius: 0 var(--radius) var(--radius) 0; background: var(--danger-soft); color: var(--danger-text); } .sfb-book__phone { display: flex; flex-direction: column; gap: 8px; } .sfb-book__done { padding: 26px 24px; display: flex; flex-direction: column; gap: 10px; } .sfb-book .sfb-book__done h3 { margin: 0; font-family: var(--font-head); font-style: normal; font-weight: 700; font-size: 24px; line-height: 1.1; letter-spacing: -.02em; text-transform: none; color: var(--text); } .sfb-book__done p { margin: 0; font-size: 15px; line-height: 1.5; color: var(--text-soft); } /* ===== Pola tekstowe i pola wyboru (jak formularz zgloszenia na stronie) ===== */ .sfb-book input.sfb-input, .sfb-book__phone input, .sfb-auth__field input, .sfb-acct__phone input { width: 100%; min-height: 52px; margin: 0; padding: 13px 15px; background: var(--field); border: 1px solid var(--line2); border-radius: var(--radius); color: var(--text); font-family: var(--font-body); font-size: 16px; line-height: 1.4; box-shadow: none; outline: none; appearance: none; -webkit-appearance: none; transition: border-color .18s, background-color .18s, box-shadow .18s; } .sfb-book__phone input::placeholder, .sfb-auth__field input::placeholder, .sfb-acct__phone input::placeholder { color: var(--text-dim); opacity: 1; } .sfb-book input[type="checkbox"].sfb-check, .sfb-auth__check input[type="checkbox"] { flex: 0 0 22px; width: 22px; height: 22px; margin: 1px 0 0; padding: 0; border: 1px solid var(--line3); border-radius: var(--radius); background: var(--field) center / 14px 14px no-repeat; cursor: pointer; appearance: none; -webkit-appearance: none; transition: border-color .18s, background-color .18s; } .sfb-book input[type="checkbox"].sfb-check:checked, .sfb-auth__check input[type="checkbox"]:checked { border-color: var(--accent-text); background-color: var(--accent-text); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7'/%3E%3C/svg%3E"); } @media (max-width: 860px) { .sfb-book { padding: 22px 16px 120px; } .sfb-book .sfb-book__title { font-size: 30px; } .sfb-book__head { flex-direction: column; align-items: flex-start; gap: 12px; } .sfb-book__grid { grid-template-columns: minmax(0, 1fr); gap: 24px; } .sfb-book__day { flex-basis: 74px; min-height: 76px; } .sfb-book__tab { flex-direction: column; gap: 2px; padding: 8px 4px; font-size: 13px; } .sfb-book__tab small { font-size: 10px; } .sfb-book__slots { grid-template-columns: repeat(3, minmax(0, 1fr)); } .sfb-book__stepper { gap: 10px; padding: 14px 12px; } .sfb-book__stepbtn { width: 46px; height: 46px; } .sfb-book__time { gap: 5px; } .sfb-book__time b { font-size: clamp(26px, 9vw, 40px); } .sfb-book__time span { font-size: 12px; } .sfb-book__presets div { width: 100%; } .sfb-book__preset { flex: 1 1 0; text-align: center; } .sfb-book__summary { position: static; } .sfb-book__actions { position: fixed; left: 0; right: 0; bottom: 0; z-index: 50; padding: 12px 16px 22px; background: var(--bg); border-top: 1px solid var(--line); } } /* Saldo na ekranie potwierdzenia - odswiezane bez przeladowania strony. */ .sfb-book__done-note { font-size: 13px !important; color: var(--muted) !important; } .sfb-book__done-balance { display: flex; align-items: center; gap: 6px; color: var(--text) !important; } .sfb-book__done-balance strong { color: var(--accent-text); font-family: var(--font-head); font-style: italic; font-size: 18px; } .sfb-book__done-balance svg { width: 16px; height: 16px; } /* Wlasna ikona tokena z ustawien (dowolny rozmiar, skalowana do 18 px). */ .sfb-book__token-img { width: 18px; height: 18px; object-fit: contain; display: inline-block; vertical-align: middle; flex: 0 0 18px; } .sfb-book__done-balance .sfb-book__token-img { width: 16px; height: 16px; } /* Rozbicie kosztu, gdy sesja przechodzi przez granice pory dnia. */ .sfb-book__cost-breakdown { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: -4px; font-size: 12px; color: var(--muted); } .sfb-book__cost-breakdown span::before { content: "•"; margin-right: 6px; color: var(--accent-text); } /* ===== Widgety konta: [solofit_tokeny], [solofit_wizyty], [solofit_platnosci] ===== */ .sfb-widget { padding: 0; background: transparent; } .sfb-widget .sfb-book__loading, .sfb-widget .sfb-book__error { padding: 16px 0; } .sfb-book a.sfb-book__cta { color: var(--on-accent); text-decoration: none; } /* Wersja obrysowana takze jako odnosnik (przyciski zakupu WooCommerce). */ .sfb-book a.sfb-book__cta--ghost { color: var(--accent-text); } .sfb-book__cta--inline { display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 44px; padding: 12px 20px; font-size: 13px; } .sfb-book__cta--small { width: auto; min-height: 38px; padding: 9px 14px; font-size: 12px; } /* Odnosnik-akcja ("Przeloz na inny termin", "Wpisz kod"): Chakra Petch, wersaliki, cienka zolta kreska. */ .sfb-book__link { display: inline-flex; align-items: center; gap: .5em; background: none; border: 0; padding: 0 0 3px; border-bottom: 1px solid var(--accent-line); color: var(--accent-text); font-family: var(--font-head); font-size: 12px; font-weight: 600; letter-spacing: .14em; line-height: 1.2; text-transform: uppercase; text-decoration: none; cursor: pointer; } .sfb-widget__login { display: flex; flex-wrap: wrap; align-items: center; gap: 14px; padding: 18px 20px; } .sfb-widget__login p { margin: 0; color: var(--text-soft); } /* Saldo */ .sfb-tokens { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 20px; } .sfb-tokens__main { display: flex; align-items: center; gap: 14px; } .sfb-tokens__main > svg, .sfb-tokens__main > .sfb-book__token-img { width: 34px; height: 34px; flex: 0 0 34px; } .sfb-tokens__label { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } .sfb-tokens__value { display: flex; align-items: baseline; gap: 8px; } .sfb-tokens__value strong { font-family: var(--font-head); font-style: italic; font-weight: 700; font-size: 34px; line-height: 1; letter-spacing: -.02em; color: var(--accent-text); } .sfb-tokens__value span { color: var(--text-soft); font-size: 14px; } .sfb-tokens__none { color: var(--muted); font-size: 14px; } /* Listy: wizyty i platnosci */ .sfb-list { display: flex; flex-direction: column; gap: 10px; } .sfb-list .sfb-book__label { margin-top: 10px; } .sfb-list .sfb-book__label:first-child { margin-top: 0; } .sfb-list__head { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin-top: 10px; } .sfb-list__head .sfb-book__label { margin-top: 0; } .sfb-list__balance { display: flex; align-items: baseline; gap: 6px; color: var(--text-soft); font-size: 13px; } .sfb-list__balance b { font-family: var(--font-head); font-style: italic; font-size: 20px; color: var(--accent-text); } .sfb-list__balance svg, .sfb-list__balance .sfb-book__token-img { align-self: center; } .sfb-list__row { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 8px 18px; align-items: center; padding: 14px 16px; background: var(--field); border: 1px solid var(--line); border-left: 3px solid var(--line2); border-radius: 0 var(--radius) var(--radius) 0; } .sfb-list__row.is-ok { border-left-color: var(--accent-text); } .sfb-list__row.is-live { border-left-color: var(--ok); } .sfb-list__row.is-off { opacity: .6; } .sfb-list__row.is-plus { border-left-color: var(--ok); } .sfb-list__row.is-minus { border-left-color: var(--accent-text); } .sfb-list__date { font-weight: 600; font-size: 15px; } .sfb-list__time { margin-top: 2px; font-size: 14px; color: var(--text-soft); } .sfb-list__time b { font-family: var(--font-head); font-style: italic; font-size: 18px; color: var(--text); } .sfb-list__time span { color: var(--muted); } .sfb-list__sub { margin-top: 2px; font-size: 13px; color: var(--muted); } .sfb-list__meta { display: flex; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 6px 14px; font-size: 13px; } .sfb-list__status { padding: 4px 9px; border: 1px solid var(--line2); border-radius: var(--radius); font-size: 11px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--text-soft); } .sfb-list__row.is-ok .sfb-list__status { border-color: var(--accent-text); color: var(--accent-text); } .sfb-list__row.is-live .sfb-list__status { border-color: var(--ok); color: var(--ok); } .sfb-list__tokens { display: inline-flex; align-items: center; gap: 5px; color: var(--text-soft); } .sfb-list__tokens.is-refund { color: var(--ok); } .sfb-list__tokens svg, .sfb-list__tokens .sfb-book__token-img { width: 15px; height: 15px; } .sfb-list__price { font-family: var(--font-head); font-style: italic; font-weight: 700; font-size: 17px; color: var(--text); } .sfb-list__amount { display: flex; align-items: baseline; gap: 6px; color: var(--text-soft); font-size: 13px; } .sfb-list__amount b { font-family: var(--font-head); font-style: italic; font-size: 20px; color: var(--accent-text); } .sfb-list__row.is-plus .sfb-list__amount b { color: var(--ok); } .sfb-list__amount svg { align-self: center; width: 15px; height: 15px; } .sfb-list__row.is-plus .sfb-list__amount svg { stroke: var(--ok); } .sfb-list__actions { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; padding-top: 10px; border-top: 1px solid var(--line); } .sfb-list__confirm { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; font-size: 13px; color: var(--text-soft); } .sfb-list__empty { padding: 16px; border: 1px dashed var(--line2); border-radius: var(--radius); background: var(--field); color: var(--muted); font-size: 14px; } .sfb-list__hint { margin: 0; font-size: 12px; color: var(--muted); } .sfb-list__foot { padding-top: 6px; } @media (max-width: 600px) { .sfb-list__row { grid-template-columns: minmax(0, 1fr); } .sfb-list__meta { justify-content: flex-start; } .sfb-tokens { flex-direction: column; align-items: flex-start; } } /* Panel przelozenia treningu w [solofit_wizyty] */ .sfb-resched { display: flex; flex-direction: column; gap: 12px; width: 100%; padding-top: 4px; } .sfb-resched__title { font-family: var(--font-head); font-size: 12px; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; color: var(--text); } .sfb-resched__days { display: flex; gap: 6px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; } .sfb-resched__day { flex: 0 0 62px; display: flex; flex-direction: column; align-items: center; gap: 1px; padding: 8px 4px; background: var(--field); border: 1px solid var(--line2); border-radius: var(--radius); color: var(--text); } .sfb-resched__day span { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--muted); } .sfb-resched__day b { font-family: var(--font-head); font-weight: 700; font-size: 20px; line-height: 1.1; } .sfb-resched__day small { font-size: 10px; color: var(--muted); } .sfb-resched__day.is-on { background: var(--accent); border-color: var(--accent-text); color: var(--on-accent); } .sfb-resched__day.is-on span, .sfb-resched__day.is-on small { color: rgba(17, 17, 17, .7); } .sfb-resched__times { display: flex; flex-wrap: wrap; gap: 6px; max-height: 190px; overflow-y: auto; padding-right: 4px; scrollbar-width: thin; } .sfb-resched__time { display: flex; flex-direction: column; align-items: center; min-width: 66px; padding: 7px 8px; background: var(--field); border: 1px solid var(--line2); border-radius: var(--radius); color: var(--text); } .sfb-resched__time b { font-family: var(--font-head); font-weight: 700; font-size: 16px; } .sfb-resched__time span { font-size: 11px; color: var(--muted); } .sfb-resched__time.is-on { border-color: var(--accent-text); background: var(--accent-soft); } .sfb-resched__time.is-on span { color: var(--accent-text); } .sfb-resched__time.is-current { opacity: .35; cursor: not-allowed; } .sfb-resched__confirm { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; padding: 12px 14px; border: 1px solid rgba(242, 183, 5, .3); border-radius: var(--radius); background: rgba(242, 183, 5, .06); } .sfb-resched__confirm > div { display: flex; flex-direction: column; gap: 2px; } .sfb-resched__confirm b { font-size: 15px; } .sfb-resched__confirm span { font-size: 13px; color: var(--text-soft); } .sfb-list__note { font-size: 12px; color: var(--muted); } .sfb-book__link--muted { color: var(--muted); border-bottom-color: var(--line2); } .sfb-resched__tabs { display: flex; gap: 4px; flex-wrap: wrap; } .sfb-resched__tab { display: inline-flex; align-items: baseline; gap: 6px; padding: 7px 10px; background: var(--field); border: 1px solid var(--line2); border-radius: var(--radius); color: var(--text); font-size: 13px; font-weight: 600; } .sfb-resched__tab small { font-size: 11px; color: var(--muted); } .sfb-resched__tab.is-on { background: var(--accent); border-color: var(--accent-text); color: var(--on-accent); } .sfb-resched__tab.is-on small { color: rgba(17, 17, 17, .7); } .sfb-resched__tab:disabled { opacity: .4; cursor: not-allowed; } /* "+" doladowania w [solofit_tokeny] */ .sfb-book a.sfb-tokens__topup { display: inline-flex; align-items: center; gap: 10px; color: var(--text); text-decoration: none; flex: 0 0 auto; } .sfb-tokens__plus { display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-family: var(--font-head); font-weight: 700; font-size: 28px; line-height: 1; box-shadow: var(--glow); transition: transform .2s var(--ease), box-shadow .2s ease; } .sfb-book a.sfb-tokens__topup:hover .sfb-tokens__plus { transform: translateY(-2px); box-shadow: var(--glow-2); } .sfb-tokens__topup-text { font-size: 12px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--accent-text); } /* ===== [solofit_panel]: caly panel klienta ===== */ .sfb-panel { padding: 24px 24px 48px; display: flex; flex-direction: column; gap: 22px; } .sfb-panel *, .sfb-panel *::before, .sfb-panel *::after { box-sizing: border-box; } .sfb-panel .sfb-widget, .sfb-panel #sfb-book { padding: 0; background: transparent; } .sfb-panel__hero { display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; } .sfb-panel__title { display: flex; flex-direction: column; gap: 8px; min-width: 0; } .sfb-panel__eyebrow { margin: 0; } .sfb-book .sfb-panel__name { margin: 0; font-family: var(--font-head); font-style: normal; font-weight: 700; font-size: clamp(34px, 3.8vw, 48px); line-height: 1; letter-spacing: -.03em; text-transform: none; color: var(--text); overflow-wrap: anywhere; } .sfb-panel__tokens { flex: 0 0 auto; min-width: 300px; } .sfb-panel__tokens .sfb-tokens { padding: 16px 18px; } .sfb-panel__tokens .sfb-tokens__label { font-size: 11px; } /* Pasek "Najblizszy trening" */ .sfb-next .sfb-book__loading { padding: 16px 20px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); } .sfb-next__inner { display: flex; align-items: center; justify-content: space-between; gap: 18px 24px; flex-wrap: wrap; padding: 16px 20px; background: var(--panel); border: 1px solid var(--line); border-left: 3px solid var(--accent); border-radius: 0 var(--radius) var(--radius) 0; } .sfb-next__inner.is-live { border-left-color: var(--ok); } .sfb-next__inner.is-empty { border-left-color: var(--line2); } .sfb-next__main { display: flex; align-items: center; gap: 14px; min-width: 0; } .sfb-next__main > svg { flex: 0 0 18px; } .sfb-next__label { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } .sfb-next__inner.is-live .sfb-next__label { color: var(--ok); } .sfb-next__text { margin-top: 2px; font-size: 16px; font-weight: 600; color: var(--text); } .sfb-next__text b { font-family: var(--font-head); font-style: italic; font-size: 20px; color: var(--accent-text); } .sfb-next__inner.is-empty .sfb-next__text { font-weight: 500; color: var(--text-soft); } .sfb-next__side { display: flex; align-items: center; gap: 14px; font-size: 13px; color: var(--text-soft); } .sfb-next__sms { display: inline-flex; align-items: center; gap: 8px; } .sfb-next__sms b { color: var(--text); } /* Zakladki */ .sfb-panel__tabs { display: flex; gap: 4px; padding: 4px; background: var(--field); border: 1px solid var(--line); border-radius: var(--radius); } .sfb-panel__tab { flex: 1 1 0; display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-height: 52px; padding: 12px 18px; background: transparent; border: 0; border-radius: 2px; color: var(--text-soft); font-family: inherit; font-size: 14px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; } .sfb-panel__tab:hover { color: var(--text); } .sfb-panel__tab:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; } .sfb-panel__tab.is-on { background: var(--accent); color: var(--on-accent); } .sfb-panel__badge { display: inline-flex; align-items: center; justify-content: center; min-width: 22px; height: 22px; padding: 0 7px; border-radius: 11px; background: var(--line2); color: var(--text); font-size: 12px; letter-spacing: 0; } .sfb-panel__tab.is-on .sfb-panel__badge { background: rgba(17, 17, 17, .18); color: var(--on-accent); } .sfb-panel__pane { min-width: 0; } .sfb-panel__pane[hidden] { display: none; } .sfb-panel__cols { display: grid; grid-template-columns: minmax(0, 2fr) minmax(300px, 1fr); gap: 28px; align-items: start; } .sfb-panel__cols--one { grid-template-columns: minmax(0, 1fr); } .sfb-panel__cols:not(.sfb-panel__cols--one) .sfb-list__foot { display: none; } /* pakiety sa obok - bez drugiego "Dokup tokeny" */ .sfb-panel__side { display: flex; flex-direction: column; gap: 12px; min-width: 0; } .sfb-panel__side .sfb-book__label { margin-top: 10px; } .sfb-panel__side .sfb-book__label:first-child { margin-top: 0; } .sfb-panel__box { display: flex; flex-direction: column; gap: 12px; padding: 16px 18px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); } .sfb-panel__fine { margin: 0; font-size: 12px; line-height: 1.5; color: var(--muted); } /* Pakiety */ .sfb-pack { display: flex; flex-direction: column; gap: 10px; } .sfb-book a.sfb-pack__item, .sfb-pack__item { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; background: var(--field); border: 1px solid var(--line); border-radius: var(--radius); color: var(--text); text-decoration: none; transition: border-color .12s ease; } .sfb-book a.sfb-pack__item:hover { border-color: var(--line3); color: var(--text); } .sfb-pack__item.is-featured { border-color: var(--accent-line); } .sfb-pack__name { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-weight: 600; font-size: 15px; } .sfb-pack__tag { padding: 3px 8px; border: 1px solid var(--accent); border-radius: var(--radius); font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--accent-text); } .sfb-pack__note { margin-top: 2px; font-size: 12px; color: var(--muted); } .sfb-pack__price { display: flex; flex-direction: column; align-items: flex-end; text-align: right; flex: 0 0 auto; } .sfb-pack__price b { font-family: var(--font-head); font-style: italic; font-weight: 700; font-size: 20px; line-height: 1.1; } .sfb-pack__price span { font-size: 12px; color: var(--muted); } .sfb-book a.sfb-pack__cta { display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } /* Konto */ .sfb-acct { display: flex; flex-direction: column; padding: 6px 24px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); } .sfb-acct__row { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 18px 0; border-bottom: 1px solid var(--line); } .sfb-acct__row:last-child, .sfb-acct__row--last { border-bottom: 0; } .sfb-acct__row > div:first-child { min-width: 0; flex: 1 1 auto; } .sfb-acct__label { font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase; color: var(--muted); } .sfb-acct__value { margin-top: 4px; font-size: 15px; color: var(--text); overflow-wrap: anywhere; } .sfb-acct__value--soft { color: var(--text-soft); } .sfb-acct__phone { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin-top: 8px; } .sfb-acct__phone[hidden], .sfb-acct__value[hidden], .sfb-acct [data-sfb-phone-edit][hidden] { display: none; } .sfb-acct__phone input { flex: 1 1 200px; width: auto; min-width: 0; min-height: 44px; padding: 10px 12px; font-size: 15px; } .sfb-acct__msg { flex: 1 0 100%; font-size: 12px; color: var(--muted); } .sfb-acct__msg:empty { display: none; } .sfb-how__item { display: flex; align-items: flex-start; gap: 12px; font-size: 14px; line-height: 1.45; color: var(--text-soft); } .sfb-how__item svg { flex: 0 0 16px; width: 16px; height: 16px; margin-top: 3px; } .sfb-help__line { font-size: 14px; color: var(--text-soft); } .sfb-help__line a { color: var(--text); font-weight: 600; } .sfb-help__links { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; } .sfb-help__links a { color: var(--muted); text-decoration: underline; text-underline-offset: 3px; } .sfb-help__links a:hover { color: var(--accent-text); } .sfb-book a.sfb-panel__logout { align-self: flex-start; margin-top: 4px; color: var(--accent-text); } /* Niezalogowany */ .sfb-panel--guest { padding: 24px; } .sfb-panel__login { display: flex; flex-direction: column; align-items: flex-start; gap: 12px; padding: 28px; } .sfb-panel__login p { margin: 0; max-width: 520px; font-size: 15px; line-height: 1.5; color: var(--text-soft); } .sfb-book .sfb-panel__login .sfb-panel__name { font-size: 32px; } /* Przyklejony "Zarezerwuj trening" - tylko telefon i tylko poza zakladka Rezerwuj */ .sfb-panel__sticky { display: none; } @media (max-width: 860px) { .sfb-panel { padding: 18px 16px 110px; gap: 18px; } .sfb-panel__hero { flex-direction: column; align-items: stretch; gap: 16px; } .sfb-book .sfb-panel__name { font-size: 32px; } .sfb-panel__tokens { min-width: 0; } .sfb-panel__tokens .sfb-tokens { flex-direction: row; align-items: center; } .sfb-next__inner { align-items: flex-start; flex-direction: column; gap: 10px; } .sfb-panel__tabs { overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; } .sfb-panel__tabs::-webkit-scrollbar { display: none; } .sfb-panel__tab { flex: 0 0 auto; min-height: 44px; padding: 10px 14px; font-size: 12px; } .sfb-panel__cols { grid-template-columns: minmax(0, 1fr); gap: 22px; } .sfb-panel #sfb-book { padding: 0; } .sfb-acct { padding: 4px 16px; } .sfb-acct__row { padding: 14px 0; } .sfb-panel__sticky { display: block; position: fixed; left: 0; right: 0; bottom: 0; z-index: 49; padding: 14px 16px 22px; background: linear-gradient(180deg, var(--bg-fade) 0%, var(--bg) 40%); } .sfb-panel.is-book .sfb-panel__sticky { display: none; } } /* ===== Kolory pod kursorem: motyw i Elementor ich nie podmieniaja ===== * * Motywy i Elementor (Ustawienia strony -> Styl motywu -> Przyciski) ustawiaja * swoj kolor akcentu dla KAZDEGO