/* ========================================================================== jogaoczu-modern.css — modern design layer over the legacy Unify theme. Design system adapted from bee-modern.css (slate ink + cyan/indigo gradient), retargeted to jogaoczu's own markup. Loaded LAST so it wins the cascade. Scope model (body classes set in genericScreen.jsp): .jo-page -> every themed page (global chrome: nav, footer, back-to-top, base type) .jo-content -> themed content pages (NOT the shop) — cards, forms, buttons, steps .jo-p-welcome -> the homepage, extra rules .jo-shop -> shop pages: chrome + the SHOP section at the end of this file (stage 2) .jo-admin -> admin pages: chrome only, intentionally NO content rules The jogaoczu logo (img/logo*.png) is kept; no bee branding is imported. ========================================================================== */ :root { --jo-fs: 0.8; /* readable-text multiplier: content body + headers (reflow freely); owner 2026-07-07: default content 20% smaller — A/AA/AAA scales up from here */ --jo-fs-ui: 1; /* gentler multiplier for fixed chrome (nav/menu + footer) — won't overflow the bar */ --jo-ink: #0f172a; --jo-ink-soft: #475569; --jo-primary: #0891b2; /* cyan-600, close to legacy turkus #13b1cd */ --jo-primary-dark: #0e7490; --jo-accent: #6366f1; /* indigo-500 */ --jo-grad: linear-gradient(135deg, #06b6d4 0%, #3b82f6 55%, #6366f1 100%); --jo-surface: #f8fafc; --jo-card-shadow: 0 1px 2px rgba(15, 23, 42, .05), 0 8px 24px -8px rgba(15, 23, 42, .12); --jo-card-shadow-hover: 0 2px 4px rgba(15, 23, 42, .06), 0 20px 40px -12px rgba(15, 23, 42, .22); --jo-radius: 18px; --jo-font: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --jo-font-display: "Cantarell", "Manrope", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif; } /* ========================================================================== BASE TYPOGRAPHY (global chrome) ========================================================================== */ .jo-page { font-family: var(--jo-font); color: var(--jo-ink); -webkit-font-smoothing: antialiased; } .jo-page h1, .jo-page h2, .jo-page h3, .jo-page h4 { font-family: var(--jo-font-display); letter-spacing: -0.01em; } .jo-page button, .jo-page input, .jo-page select, .jo-page textarea { font-family: inherit; } /* themify icon spans must NEVER inherit this layer's typography: the glyphs live in private-use codepoints that only the themify face provides — any font-family override (e.g. a display-font rule that also matches the icon span) renders them empty */ .jo-page [class^="ti-"], .jo-page [class*=" ti-"] { font-family: 'themify' !important; } /* visible keyboard focus — one consistent ring for nav links, dropdown, buttons, the A A A control and the basket +/- controls (spans promoted to role=button). Text inputs/selects keep their own border+shadow focus style. */ .jo-page a:focus-visible, .jo-page button:focus-visible, .jo-page [tabindex]:focus-visible, .jo-page input[type="checkbox"]:focus-visible, .jo-page input[type="radio"]:focus-visible { outline: 2px solid #0e7490 !important; outline-offset: 2px; } /* text-size levels (A A A control in the header; persisted as localStorage.joFontScale, the html.jo-fs-* class is set pre-paint in genericScreen.jsp — no flash). Two tiers as in bee: --jo-fs scales readable content, --jo-fs-ui scales fixed chrome gently. Scaling the root font-size is what moves the LEGACY layer: every Unify size utility is rem-based (!important), so page titles / section headers / body copy scale per-breakpoint for free; px sizes defined in THIS layer participate through calc(px * var(--jo-fs)) (content) and calc(px * var(--jo-fs-ui)) (chrome). Levels rescaled ×0.8 (owner: smaller default) so A/AA/AAA keep the same relative steps from the new base: 0.8 → 0.96 → 1.16. The base html font-size below is scoped to public pages (jo-content/jo-shop) so the admin (jo-admin, which also carries jo-page) keeps its untouched default. */ html:has(body.jo-content), html:has(body.jo-shop) { font-size: calc(16px * var(--jo-fs)); } html.jo-fs-2 { --jo-fs: 0.96; --jo-fs-ui: 1.08; } html.jo-fs-3 { --jo-fs: 1.16; --jo-fs-ui: 1.15; } .jo-content { background: var(--jo-surface); } /* ========================================================================== TOP BAR — restyle the legacy .s-header-v2 markup into a glassy fixed bar. Markup/ids/JS (Bootstrap dropdown + collapse, -is-active) all preserved. ========================================================================== */ .jo-page .s-header-v2 { background: rgba(255, 255, 255, .88); -webkit-backdrop-filter: saturate(180%) blur(16px); backdrop-filter: saturate(180%) blur(16px); border-bottom: 1px solid rgba(15, 23, 42, .07); box-shadow: none; transition: background .25s ease, box-shadow .25s ease, border-color .25s ease; } .jo-page .s-header-v2.jo-nav-scrolled { background: rgba(255, 255, 255, .96); box-shadow: 0 8px 28px -16px rgba(15, 23, 42, .25); } /* neutralize legacy navbar backgrounds/borders in every state (normal, shrink, mobile) */ .jo-page .s-header-v2__navbar, .jo-page .s-header__shrink .s-header-v2__navbar { background: transparent !important; box-shadow: none !important; border-bottom: none !important; min-height: 62px; padding-top: 6px; } /* logo: SVG sunrise mark + "JogaOczu" wordmark with orange tagline (visual language adapted from bee's .bee-logo / .bee-logo-mark / .bee-logo-word) */ .jo-page .s-header-v2__logo { width: auto; } .jo-page .jo-logo { display: inline-flex; align-items: center; gap: 10px; padding: 5px 0; text-decoration: none !important; } .jo-page .jo-logo-mark { width: 50px; height: 50px; flex: 0 0 auto; display: block; } .jo-page .jo-logo-word { font-family: var(--jo-font-display); font-size: 24px; font-weight: 700; letter-spacing: -0.015em; line-height: 1.1; color: var(--jo-ink); white-space: nowrap; } .jo-page .jo-logo-word small { display: block; margin-top: 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .18em; text-transform: uppercase; color: #f97316; /* sunrise orange, as in bee */ } /* links -> pills, sentence case, ink-soft with brand hover (text content unchanged) */ .jo-page .s-header-v2__nav-link { font-family: var(--jo-font); font-size: calc(13px * var(--jo-fs-ui)); font-weight: 700; letter-spacing: .02em; color: var(--jo-ink-soft); line-height: 1.2; margin: 0 3px; padding: 9px 14px; border-radius: 10px; transition: color .15s ease, background .15s ease; } .jo-page .s-header-v2__nav-link:hover, .jo-page .s-header-v2__nav-link:focus { color: var(--jo-primary); background: rgba(8, 145, 178, .08); } .jo-page .s-header-v2__nav-link.-is-active { color: var(--jo-primary) !important; background: rgba(8, 145, 178, .10); } .jo-page .s-header__shrink .s-header-v2__nav-link { color: var(--jo-ink-soft); } .jo-page .s-header__shrink .s-header-v2__nav-link:hover { color: var(--jo-primary); } .jo-page .s-header__shrink .s-header-v2__nav-link.-is-active { color: var(--jo-primary); } /* dropdown panel — bee's .bee-nav__dd-panel look on the legacy Bootstrap markup */ .jo-page .s-header-v2__dropdown-menu { background: #fff; border: 1px solid rgba(15, 23, 42, .07); border-radius: 16px; box-shadow: 0 24px 48px -16px rgba(15, 23, 42, .28); padding: 10px; margin-top: 0; min-width: 340px; } .jo-page .s-header-v2__dropdown-menu-link { display: block; font-family: var(--jo-font); font-size: calc(13.5px * var(--jo-fs-ui)) !important; font-weight: 550; text-transform: none; letter-spacing: 0; color: var(--jo-ink-soft) !important; padding: 9px 13px !important; border-radius: 10px; transition: background .12s ease, color .12s ease; } .jo-page .s-header-v2__dropdown-menu-link:hover, .jo-page .s-header-v2__dropdown-menu-link:focus-visible { color: var(--jo-primary) !important; background: var(--jo-surface); } .jo-page .s-header-v2__dropdown-menu-link.-is-active { color: var(--jo-primary) !important; background: var(--jo-surface); font-weight: 700; } /* featured generator tile (adapted from bee's .bee-nav__dd-link--featured); selector carries the menu-link class so the gradient also wins over the flat .-is-active background when the generator page marks it active */ .jo-page .s-header-v2__dropdown-menu-link.jo-nav__dd-link--featured { margin-bottom: 6px; padding: 13px 14px !important; background: linear-gradient(135deg, rgba(6, 182, 212, .09), rgba(99, 102, 241, .09)); border: 1px solid rgba(8, 145, 178, .18); border-radius: 12px; } .jo-page .jo-nav__dd-link--featured b { display: block; font-weight: 750; color: var(--jo-ink); } .jo-page .s-header-v2__dropdown-menu-link.jo-nav__dd-link--featured:hover, .jo-page .s-header-v2__dropdown-menu-link.jo-nav__dd-link--featured:focus-visible { background: linear-gradient(135deg, rgba(6, 182, 212, .16), rgba(99, 102, 241, .16)); } .jo-page .jo-nav__dd-link--featured:hover b, .jo-page .jo-nav__dd-link--featured.-is-active b { color: var(--jo-primary-dark); } /* the legacy divider right below the featured tile is redundant (bee has none there); keep it when the premium-only "Tablice" link sits in between */ .jo-page .s-header-v2__dropdown-menu li:has(> .jo-nav__dd-link--featured) + .mydivider { display: none; } .jo-page .s-header-v2__dropdown-menu .mydivider { height: 1px; background-color: rgba(15, 23, 42, .09) !important; margin: 7px 12px !important; } /* caret (inline SVG in header.jsp, as in bee) */ .jo-page .jo-nav__caret { margin-left: 4px; opacity: .65; transition: transform .18s ease; } /* text-size accessibility control (A A A) — bee's .bee-fontsize adapted to the legacy ul>li navbar (markup in header.jsp, handlers in genericScreen.jsp) */ .jo-page .jo-fontsize-item { display: inline-flex; align-items: center; } .jo-page .jo-fontsize { display: inline-flex; align-items: center; gap: 0; margin-left: 8px; padding: 0 2px; } /* each button carries a >=40px hit area (a11y target size); the glyph sizes and the transparent idle look are unchanged — only the hover/active pill grows with it */ .jo-page .jo-fontsize__btn { border: none; background: transparent; cursor: pointer; padding: 2px 5px; min-width: 40px; min-height: 40px; display: inline-flex; align-items: center; justify-content: center; color: var(--jo-ink-soft); font-weight: 800; line-height: 1; border-radius: 7px; font-family: var(--jo-font-display); transition: color .15s ease, background .15s ease; } .jo-page .jo-fontsize__btn--s { font-size: 12px; } .jo-page .jo-fontsize__btn--m { font-size: 15px; } .jo-page .jo-fontsize__btn--l { font-size: 19px; } .jo-page .jo-fontsize__btn:hover { color: var(--jo-primary); } .jo-page .jo-fontsize__btn.is-active { color: var(--jo-primary); background: rgba(8, 145, 178, .12); } /* desktop: CSS hover-open with NO hover gap — bee mechanism: the panel is offset with top (not margin) and a ::after bridge under the trigger keeps :hover alive while the pointer travels trigger -> panel. Mobile (<=768px) keeps the Bootstrap tap toggle. */ @media (min-width: 769px) { .jo-page .s-header-v2__dropdown-on-hover { position: relative; } .jo-page .s-header-v2__dropdown-on-hover::after { /* hover bridge so the panel does not flicker */ content: ""; position: absolute; left: 0; right: 0; top: 100%; height: 14px; } .jo-page .s-header-v2__dropdown-on-hover .s-header-v2__dropdown-menu { display: block; top: calc(100% + 10px); left: 50%; transform: translateX(-50%) translateY(6px); opacity: 0; visibility: hidden; transition: opacity .16s ease, transform .16s ease, visibility .16s; } .jo-page .s-header-v2__dropdown-on-hover:hover .s-header-v2__dropdown-menu, .jo-page .s-header-v2__dropdown-on-hover:focus-within .s-header-v2__dropdown-menu, .jo-page .s-header-v2__dropdown-on-hover.open .s-header-v2__dropdown-menu { opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0); } .jo-page .s-header-v2__dropdown-on-hover:hover .jo-nav__caret, .jo-page .s-header-v2__dropdown-on-hover:focus-within .jo-nav__caret, .jo-page .s-header-v2__dropdown-on-hover.open .jo-nav__caret { transform: rotate(180deg); } } /* mobile: chip toggle + floating menu panel */ @media (max-width: 768px) { .jo-page .s-header-v2__toggle { float: right; border-radius: 10px; padding: 5px 9px; background: rgba(15, 23, 42, .05); border: 1px solid rgba(15, 23, 42, .10); color: var(--jo-ink); } .jo-page .s-header-v2__navbar-collapse.collapse.in { background: rgba(255, 255, 255, .98); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); border: 1px solid rgba(15, 23, 42, .07); border-radius: 14px; box-shadow: 0 24px 48px -16px rgba(15, 23, 42, .3); margin-top: 8px; padding: 8px 12px !important; } .jo-page .s-header-v2__nav-link { margin: 4px 0; } .jo-page .s-header-v2__dropdown-menu { border: none; box-shadow: none; padding: 0 0 0 10px; margin-top: 2px; min-width: 0; } /* long items (e.g. Dalekowzroczność / starczowzroczność) wrap instead of overflowing */ .jo-page .s-header-v2__dropdown-menu-link { white-space: normal; font-size: calc(12.5px * var(--jo-fs-ui)) !important; line-height: 1.35; } /* A A A control inside the collapsed menu (bee keeps it in the burger menu too) */ .jo-page .jo-fontsize { margin: 4px 0 2px; padding: 4px 10px; } /* logo on phones: smaller mark + wordmark, tagline dropped (bee shortens its wordmark too) */ .jo-page .jo-logo { gap: 8px; padding: 4px 0; } .jo-page .jo-logo-mark { width: 40px; height: 40px; } .jo-page .jo-logo-word { font-size: 19px; } .jo-page .jo-logo-word small { display: none; } } /* ========================================================================== FOOTER — modern slim dark (#0b1220), keeps the existing links + JADSoft ========================================================================== */ .jo-page footer.g-bg-color--dark { background-color: #0b1220 !important; color: #94a3b8; } .jo-page footer.g-bg-color--dark .g-hor-divider__dashed--white-opacity-lightest { border: 0 !important; } .jo-page footer.g-bg-color--dark a, .jo-page footer.g-bg-color--dark a.g-color--white-opacity { color: #cbd5e1 !important; font-weight: 500; transition: color .15s ease; } .jo-page footer.g-bg-color--dark a:hover { color: #67e8f9 !important; text-decoration: none; } .jo-page footer.g-bg-color--dark h3, .jo-page footer.g-bg-color--dark .g-color--white { color: #e2e8f0 !important; font-family: var(--jo-font-display); } .jo-page footer.g-bg-color--dark p, .jo-page footer.g-bg-color--dark .g-color--white-opacity-light { color: #94a3b8 !important; } .jo-page .s-footer__logo:before { display: none; } /* drop the faint worldmap */ /* footer = fixed chrome: dampen the rem-based utility sizes to the --jo-fs-ui tier (values match the g-font-size-15/14/18--xs utilities the markup carries) */ .jo-page footer.g-bg-color--dark a.g-font-size-15--xs { font-size: calc(15px * var(--jo-fs-ui)) !important; } .jo-page footer.g-bg-color--dark p.g-font-size-14--xs { font-size: calc(14px * var(--jo-fs-ui)) !important; } .jo-page footer.g-bg-color--dark h3.g-font-size-18--xs { font-size: calc(18px * var(--jo-fs-ui)) !important; } /* ========================================================================== BACK-TO-TOP (legacy .js__back-to-top) — round gradient button ========================================================================== */ .jo-page .s-back-to-top { width: 44px; height: 44px; right: 26px; border-radius: 50%; background: var(--jo-grad); box-shadow: 0 12px 26px -10px rgba(59, 130, 246, .6); } .jo-page .s-back-to-top:before { line-height: 44px; font-size: 15px; color: #fff; } .jo-page .s-back-to-top:hover { background: var(--jo-grad); transform: translateY(-2px); } .jo-page .s-back-to-top:hover:before { color: #fff; } .jo-page .s-back-to-top.-is-visible { bottom: 26px; opacity: 1; } /* ========================================================================== CONTENT PAGES (.jo-content) — page title, section cards, steps, media, buttons ========================================================================== */ /* page title (h2/h1 in primary) — keep brand teal, modernize weight/tracking */ .jo-content h1.g-color--primary, .jo-content h2.g-color--primary { font-family: var(--jo-font-display); font-weight: 800; letter-spacing: -0.02em; } /* contrast: the legacy cyan #13b1cd is 2.6:1 on light surfaces — darken every primary-coloured page title to cyan-700 (#0e7490, >4.5:1), brand hue kept */ .jo-page h1.g-color--primary, .jo-page h2.g-color--primary { color: var(--jo-primary-dark) !important; } /* each content section (a .container that carries a red section header) -> card */ .jo-content .container:has(.g-color--red) { background: #fff; border: 1px solid rgba(15, 23, 42, .07); border-radius: 16px; box-shadow: var(--jo-card-shadow); padding: 24px 28px !important; } /* section headers (red) -> bee's unified header typography (bee-modern.css .text-uppercase.g-color--red): plain casing, one size for theory and exercise sections alike (owner 2026-07-08). Guard with .text-uppercase so bare .g-color--red validation errors stay red. */ .jo-content .text-uppercase.g-color--red { text-transform: none !important; letter-spacing: -0.01em !important; font-size: calc(23px * var(--jo-fs)) !important; font-family: var(--jo-font-display); font-weight: 700; line-height: 1.25; } /* theory headings (no badge): same ink as .jo-ex-title (bee parity) */ .jo-content .text-uppercase.g-color--red:not(.jo-ex-head) { color: #3f4555 !important; } /* exercise card headers — bee's .bee-ex-head/.bee-ex-badge/.bee-ex-title: gradient code badge (K1/R3...) + plain-cased title. Split presentationally by the TOC JS in genericScreen.jsp (same regex); JSP content untouched. */ .jo-content .jo-ex-head { display: flex; align-items: center; gap: 12px; } .jo-content .jo-ex-badge { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; min-width: 34px; height: 23px; padding: 0 8px; border-radius: 8px; background: linear-gradient(135deg, #38bdf8, #818cf8); color: #fff; font-size: calc(11.5px * var(--jo-fs-ui)); font-weight: 800; letter-spacing: .03em; box-shadow: 0 5px 12px -6px rgba(96, 165, 250, .55); } .jo-content .jo-ex-title { font-size: calc(23px * var(--jo-fs)); font-weight: 700; letter-spacing: -0.01em; color: #3f4555; /* bee: ink lightened ~20% */ } /* card header strip — bee: the section card's first row becomes a light full-width band (surface bg + slate bottom rule) holding badge/title left and the audio player right; negative margins match the card padding */ .jo-content .container:has(.g-color--red) > .row:first-child { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -24px -28px 20px !important; padding: 16px 28px 14px; background: var(--jo-surface); border-radius: 16px 16px 0 0; border-bottom: 2px solid #cbd5e1; } .jo-content .container:has(.g-color--red) > .row:first-child > div { float: none !important; width: auto !important; padding: 0 !important; } .jo-content .container:has(.g-color--red) > .row:first-child > .text-right { margin-left: auto; } /* the strip's bottom edge does the separation — drop the legacy divider under it */ .jo-content .container:has(.g-color--red) > .row:first-child + .s-promo-block-v3__divider { display: none; } /* dividers under section headers -> subtle neutral rule */ .jo-content .s-promo-block-v3__divider { padding-bottom: 0; margin: 12px 0 16px; } .jo-content .s-promo-block-v3__divider:before { height: 1px; background-image: none; background-color: rgba(15, 23, 42, .08); } .jo-content .s-promo-block-v2__divider:before { background-image: none; background-color: rgba(15, 23, 42, .08); } /* numbered instruction lists -> step chips */ .jo-content .container:has(.g-color--red) ol { list-style: none; counter-reset: jostep; padding: 0; margin: 14px 0 6px; display: grid; gap: 10px; } .jo-content .container:has(.g-color--red) ol > li { counter-increment: jostep; position: relative; padding-left: 42px; color: var(--jo-ink-soft); line-height: 1.65; min-height: 30px; font-size: calc(16px * var(--jo-fs)); } .jo-content .container:has(.g-color--red) ol > li::before { content: counter(jostep); position: absolute; left: 0; top: 0; width: 28px; height: 28px; border-radius: 9px; display: flex; align-items: center; justify-content: center; background: linear-gradient(135deg, rgba(6, 182, 212, .12), rgba(99, 102, 241, .14)); border: 1px solid rgba(8, 145, 178, .22); color: var(--jo-primary-dark); font-weight: 800; font-size: calc(13px * var(--jo-fs)); } .jo-content .container:has(.g-color--red) p { color: var(--jo-ink-soft); line-height: 1.7; font-size: calc(16px * var(--jo-fs)); } /* content images -> soft rounded cards */ .jo-content .container:has(.g-color--red) img.img-responsive { border-radius: 14px; box-shadow: var(--jo-card-shadow); } /* exercise footer facts (Czas / Powtórzenia / ...) — accent the bold labels */ .jo-content .container:has(.g-color--red) .row b { color: var(--jo-primary-dark); } /* exercise footer facts -> pill chips (bee .exercise-footer; jogaoczu's facts row has no class, so match its stable markup: cols of col-sm-6.g-margin-b-5--xs each led by a label; scoped to exercise cards via the JS-added .jo-ex-head) */ .jo-content .container:has(.jo-ex-head) .row:has(> .col-sm-6.g-margin-b-5--xs > b) { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 18px; padding-top: 16px; border-top: 1px solid rgba(15, 23, 42, .06); } .jo-content .container:has(.jo-ex-head) .row:has(> .col-sm-6.g-margin-b-5--xs > b) > div { width: auto !important; float: none !important; margin: 0 !important; background: var(--jo-surface); border: 1px solid rgba(15, 23, 42, .08); border-radius: 999px; padding: 7px 14px !important; font-size: calc(12.5px * var(--jo-fs-ui)); color: var(--jo-ink-soft); font-weight: 600; } .jo-content .container:has(.jo-ex-head) .row:has(> .col-sm-6.g-margin-b-5--xs > b) > div b { font-weight: 750; } /* bee has no divider above the chips — their border-top does the separation */ .jo-content .container:has(.jo-ex-head) .s-promo-block-v2__divider { display: none; } /* legacy soundmanager audio player: retune from the brown default (#a27b7b, set inline in footer.jsp) to the brand teal so it reads as part of the design */ .jo-content .sm2-bar-ui .sm2-main-controls, .jo-content .sm2-bar-ui .sm2-playlist-drawer { background-color: var(--jo-primary-dark) !important; } /* theme buttons -> refined pills with gradient hover */ .jo-content .s-btn, .jo-content a.s-btn { border-radius: 999px !important; font-weight: 700; letter-spacing: .03em; border-width: 1.5px; } .jo-content .s-btn--primary-brd { border-color: var(--jo-primary); color: var(--jo-primary); } .jo-content .s-btn--primary-brd:hover, .jo-content .s-btn--primary-brd:focus { background: var(--jo-grad); border-color: transparent; color: #fff; box-shadow: 0 10px 22px -8px rgba(59, 130, 246, .5); } /* generic links inside content */ .jo-content .container:has(.g-color--red) a:not(.s-btn) { color: var(--jo-primary); } .jo-content .container:has(.g-color--red) a:not(.s-btn):hover { color: var(--jo-primary-dark); } /* ========================================================================== STICKY EXERCISE TOC — bee's .bee-ex-toc / .bee-ex-chip adapted to jogaoczu. Built by JS in genericScreen.jsp from the EXISTING red section headers on long content pages (>=3 sections); zero content changes. Chip = optional exercise-code badge (K1, R3, ...) + section title; scrollspy marks the section in view. Mobile: one horizontally scrollable row. ========================================================================== */ .jo-ex-toc { position: sticky; top: 70px; z-index: 900; background: rgba(248, 250, 252, .92); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid rgba(15, 23, 42, .06); margin-top: 16px; } .jo-ex-toc__inner { max-width: 1140px; margin: 0 auto; padding: 10px 24px; display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; } .jo-ex-toc__inner::-webkit-scrollbar { display: none; } .jo-ex-chip { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px 6px 7px; border-radius: 999px; background: #fff; border: 1px solid rgba(15, 23, 42, .09); text-decoration: none !important; font-size: calc(12.5px * var(--jo-fs-ui)); font-weight: 600; color: var(--jo-ink-soft); transition: color .15s ease, border-color .15s ease, background .2s ease; } .jo-ex-chip b { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 20px; padding: 0 5px; border-radius: 7px; background: transparent; color: var(--jo-primary-dark); font-size: calc(11px * var(--jo-fs-ui)); font-weight: 800; border: 1px solid rgba(15, 23, 42, .14); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -1px 0 rgba(15, 23, 42, .09), 0 1px 1px rgba(15, 23, 42, .05); } .jo-ex-chip--plain { padding: 6px 13px; } /* no badge: even padding */ .jo-ex-chip:hover { border-color: var(--jo-primary); color: var(--jo-primary-dark); } .jo-ex-chip.is-active { background: linear-gradient(135deg, #e0f2fe, #dbeafe); border-color: rgba(59, 130, 246, .35); color: var(--jo-primary-dark); } .jo-ex-chip.is-active b { background: transparent; color: var(--jo-primary-dark); } @media (max-width: 768px) { .jo-ex-toc__inner { flex-wrap: nowrap; justify-content: flex-start; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding: 8px 14px; } } /* ========================================================================== FORMS — #generatorForm and #contactUsForm controls (adapted from bee) ========================================================================== */ .jo-content .control-label { font-weight: 700; color: var(--jo-ink); letter-spacing: .01em; margin-bottom: 6px; } .jo-content select.form-control { -webkit-appearance: none; appearance: none; height: auto; padding: 11px 40px 11px 15px; color: var(--jo-ink); background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 14px center no-repeat; border: 1.5px solid rgba(15, 23, 42, .12); border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: border-color .15s ease, box-shadow .15s ease; } .jo-content .form-control { border-radius: 12px; font-size: calc(14px * var(--jo-fs)); } .jo-content .form-control:focus { border-color: var(--jo-primary); outline: 0; box-shadow: 0 0 0 3px rgba(59, 130, 246, .16); } .jo-content input[type="radio"], .jo-content input[type="checkbox"] { accent-color: var(--jo-primary); } /* generator inline validation errors stay red (bare .g-color--red, no .text-uppercase) */ /* ========================================================================== WELCOME (.jo-p-welcome) ========================================================================== */ .jo-p-welcome { background: var(--jo-surface); } .jo-p-welcome h2 { font-family: var(--jo-font-display); font-weight: 800; letter-spacing: -0.015em; } /* hero swiper: legibility scrim + display title */ .jo-p-welcome .s-swiper.js__swiper-one-item .swiper-slide { position: relative; } .jo-p-welcome .s-swiper.js__swiper-one-item .swiper-slide::before { content: ""; position: absolute; inset: 0; z-index: 0; background: linear-gradient(95deg, rgba(2, 6, 23, .48) 0%, rgba(2, 6, 23, .18) 55%, rgba(2, 6, 23, 0) 100%); } .jo-p-welcome .s-swiper.js__swiper-one-item .container { position: relative; z-index: 1; } /* hero titles only — the selector is deliberately h2-scoped: a bare .g-color--white here also matched the scroll-cue icon span and its display-font override blanked the themify glyph. Sizes mirror the legacy 35/45/55 utilities, dampened by the chrome tier. */ .jo-p-welcome .s-swiper h2.g-color--white { font-family: var(--jo-font-display); font-weight: 700; text-shadow: 0 2px 14px rgba(2, 6, 23, .45); font-size: calc(35px * var(--jo-fs-ui)) !important; } @media (min-width: 34em) { .jo-p-welcome .s-swiper h2.g-color--white { font-size: calc(45px * var(--jo-fs-ui)) !important; } } @media (min-width: 48em) { .jo-p-welcome .s-swiper h2.g-color--white { font-size: calc(55px * var(--jo-fs-ui)) !important; } } /* hero scroll cue — bee's .bee-hero__scroll treatment on the legacy markup: chevron above a small uppercase label, gentle bounce (texts unchanged) */ .jo-p-welcome .s-scroll-to-section-v1--bc { bottom: 26px; margin-bottom: 0 !important; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 3px; color: #fff; text-decoration: none !important; animation: jo-bounce 2.2s infinite; } .jo-p-welcome .s-scroll-to-section-v1--bc .ti-angle-double-down { font-size: 22px !important; text-shadow: 0 2px 10px rgba(2, 6, 23, .45); } .jo-p-welcome .s-scroll-to-section-v1--bc p { font-size: 11px; font-weight: 700; margin: 0; text-shadow: 0 1px 8px rgba(2, 6, 23, .45); } @keyframes jo-bounce { 0%, 100% { transform: translate3d(-50%, 0, 0); } 50% { transform: translate3d(-50%, 8px, 0); } } /* hide the cue on small screens, as bee does (the swiper arrows own that space there) */ @media (max-width: 991px) { .jo-p-welcome .s-scroll-to-section-v1--bc { display: none; } } @media (prefers-reduced-motion: reduce) { .jo-p-welcome .s-scroll-to-section-v1--bc { animation: none; } } /* section eyebrows — primary-dark: the small uppercase overlines need >4.5:1 */ .jo-p-welcome p.text-uppercase.g-color--primary { color: var(--jo-primary-dark) !important; font-weight: 800; letter-spacing: .16em; } .jo-p-welcome .g-promo-section h2 { color: var(--jo-ink); } /* welcome section headers ("Witamy...", "Dostępne...") — chrome-tier scaling like bee's .page-welcome h2 (values mirror the legacy 32--xs / 36--md utilities) */ .jo-p-welcome h2.g-font-size-32--xs { font-size: calc(32px * var(--jo-fs-ui)) !important; } @media (min-width: 48em) { .jo-p-welcome h2.g-font-size-32--xs.g-font-size-36--md { font-size: calc(36px * var(--jo-fs-ui)) !important; } } /* feature cards (.col-sm-4 > .clearfix > .g-media + .g-media__body) */ .jo-p-welcome .row .col-sm-4 > .clearfix { display: flex; flex-direction: column; align-items: flex-start; background: #fff; border: 1px solid rgba(15, 23, 42, .05); border-radius: var(--jo-radius); box-shadow: var(--jo-card-shadow); padding: 28px 26px; height: 100%; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .jo-p-welcome .row .col-sm-4 > .clearfix:hover { transform: translateY(-5px); box-shadow: var(--jo-card-shadow-hover); border-color: rgba(8, 145, 178, .25); } .jo-p-welcome .col-sm-4 .g-media { float: none; width: auto; margin-bottom: 6px; } .jo-p-welcome .g-media__body { padding-left: 0 !important; padding-right: 0 !important; } .jo-p-welcome .g-media__body h3 { font-weight: 750; color: var(--jo-ink); margin-top: 0; } .jo-p-welcome .g-media__body p { color: var(--jo-ink-soft); line-height: 1.68; font-size: calc(16px * var(--jo-fs)); } .jo-p-welcome .g-media__body a { display: inline-flex; align-items: center; gap: 5px; color: var(--jo-primary-dark); font-weight: 700; font-size: calc(13.5px * var(--jo-fs)); text-decoration: none !important; } .jo-p-welcome .g-media__body a:hover { color: #155e75; } /* "czytaj więcej" icon — bee treatment: small, inherits primary, slides right on hover; the heavy double chevron is swapped for themify's clean single arrow (\e628) */ .jo-p-welcome .g-media__body a .ti-angle-double-right, .jo-p-welcome article > div > a .ti-angle-double-right { font-size: 13px !important; color: inherit !important; transition: transform .15s ease; } .jo-p-welcome .g-media__body a .ti-angle-double-right::before, .jo-p-welcome article > div > a .ti-angle-double-right::before { content: "\e628"; /* ti-arrow-right */ } .jo-p-welcome .g-media__body a:hover .ti-angle-double-right, .jo-p-welcome article > div > a:hover .ti-angle-double-right { transform: translateX(4px); } /* news article cards */ .jo-p-welcome article { background: #fff; border: 1px solid rgba(15, 23, 42, .05); border-radius: var(--jo-radius); overflow: hidden; box-shadow: var(--jo-card-shadow); height: 100%; display: flex; flex-direction: column; transition: transform .2s ease, box-shadow .2s ease; } .jo-p-welcome article:hover { transform: translateY(-5px); box-shadow: var(--jo-card-shadow-hover); } .jo-p-welcome article > img.img-responsive { width: 100%; transition: transform .4s ease; } .jo-p-welcome article:hover > img.img-responsive { transform: scale(1.05); } .jo-p-welcome article > div { box-shadow: none !important; background: #fff; position: relative; z-index: 1; } .jo-p-welcome article h3 a { color: var(--jo-ink); font-weight: 750; text-decoration: none; } .jo-p-welcome article h3 a:hover { color: var(--jo-primary); } .jo-p-welcome article p { color: var(--jo-ink-soft); line-height: 1.65; font-size: calc(16px * var(--jo-fs)); } .jo-p-welcome article > div > a { display: inline-flex; align-items: center; gap: 5px; color: var(--jo-primary-dark); font-weight: 700; font-size: calc(13.5px * var(--jo-fs)); text-decoration: none !important; } .jo-p-welcome article > div > a:hover { color: #155e75; } /* promo band lists (tablice section) */ .jo-p-welcome .g-promo-section ul li { color: var(--jo-ink-soft); font-size: calc(16px * var(--jo-fs)); } .jo-p-welcome .g-promo-section img.img-responsive { border-radius: var(--jo-radius); box-shadow: var(--jo-card-shadow-hover); } /* testimonials band (parallax sky photo): dark scrim under the white quotes so they pass contrast on the bright parts of the image */ .jo-p-welcome .js__parallax-window { position: relative; } .jo-p-welcome .js__parallax-window::before { content: ""; position: absolute; inset: 0; z-index: 0; background: rgba(2, 6, 23, .45); } .jo-p-welcome .js__parallax-window > .container { position: relative; z-index: 1; } /* ========================================================================== SHOP (.jo-shop) — stage 2: catalog, basket, checkout forms, order summary, product-card modal. Pure restyle of the legacy markup: same ids, names, _eventId handlers and visible texts; only presentation changes. ========================================================================== */ .jo-shop { background: var(--jo-surface); } .jo-shop h2 { color: var(--jo-ink); font-weight: 800; letter-spacing: -0.02em; } /* ---- buttons: primary = gradient pill, default = outline pill ---- */ .jo-shop .btn { border-radius: 999px; font-family: var(--jo-font); font-size: calc(14px * var(--jo-fs-ui)); font-weight: 700; letter-spacing: .02em; white-space: normal; /* long labels (GUS button) wrap instead of overflowing */ transition: background .15s ease, color .15s ease, border-color .15s ease, box-shadow .15s ease, transform .15s ease; } .jo-shop .btn-primary { background: var(--jo-grad); border: none; padding: 11px 22px; box-shadow: 0 10px 22px -10px rgba(59, 130, 246, .55); } .jo-shop .btn-primary:hover, .jo-shop .btn-primary:focus, .jo-shop .btn-primary:active { background: var(--jo-grad); filter: brightness(1.06); box-shadow: 0 14px 28px -10px rgba(59, 130, 246, .65); transform: translateY(-1px); } .jo-shop .btn-default { background: #fff; border: 1.5px solid rgba(15, 23, 42, .16); color: var(--jo-ink-soft); padding: 10px 21px; } .jo-shop .btn-default:hover, .jo-shop .btn-default:focus { border-color: var(--jo-primary); color: var(--jo-primary); background: #fff; box-shadow: 0 8px 18px -10px rgba(8, 145, 178, .4); } .jo-shop .btn-lg { font-size: calc(15px * var(--jo-fs-ui)); padding: 13px 26px; } /* ---- catalog: cart indicator ---- */ .jo-shop .jo-cart-box { display: flex; align-items: center; gap: 4px; } .jo-shop .jo-cart-box .btn.btn-default { position: relative; background: #fff; border: 1px solid rgba(15, 23, 42, .08) !important; border-radius: 16px; box-shadow: var(--jo-card-shadow); padding: 12px 14px; } .jo-shop .jo-cart-box .btn.btn-default:hover { box-shadow: var(--jo-card-shadow-hover); transform: translateY(-1px); } .jo-shop .jo-cart-box img { width: 34px; height: auto; display: block; } .jo-shop .jo-cart-box .badge { position: absolute; top: -7px; right: -7px; min-width: 22px; height: 22px; padding: 0 6px; display: flex; align-items: center; justify-content: center; background: var(--jo-grad); color: #fff; font-size: 11.5px; font-weight: 800; border-radius: 999px; box-shadow: 0 6px 14px -6px rgba(59, 130, 246, .7); } /* ---- catalog: product cards ---- */ .jo-shop .jo-products { display: flex; flex-wrap: wrap; } .jo-shop .jo-products > [class*="col-"] { display: flex; margin-bottom: 24px; } .jo-shop .jo-products .panel.panel-info { width: 100%; display: flex; flex-direction: column; margin-bottom: 0; background: #fff; border: 1px solid rgba(15, 23, 42, .05); border-radius: var(--jo-radius); box-shadow: var(--jo-card-shadow); overflow: hidden; transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease; } .jo-shop .jo-products .panel.panel-info:hover { transform: translateY(-5px); box-shadow: var(--jo-card-shadow-hover); border-color: rgba(8, 145, 178, .25); } .jo-shop .jo-products .panel-info > .panel-heading { /* subtle cyan->indigo wash like the checkout section headings (.panel-primary) */ background: linear-gradient(135deg, rgba(6, 182, 212, .09), rgba(99, 102, 241, .10)); border-bottom: 1px solid rgba(8, 145, 178, .14); color: var(--jo-ink); font-family: var(--jo-font-display); font-size: calc(16.5px * var(--jo-fs)); line-height: 1.35; padding: 18px 22px 14px; } .jo-shop .jo-products .panel-body { flex: 1; padding: 20px 22px 22px; } .jo-shop .jo-products .thumbnail { border: none; padding: 0; margin-bottom: 0; background: transparent; border-radius: 12px; cursor: pointer; overflow: hidden; } .jo-shop .jo-products .thumbnail img { border-radius: 12px; transition: transform .35s ease; } .jo-shop .jo-products .thumbnail:hover img { transform: scale(1.04); } .jo-shop .jo-buy { display: flex; flex-direction: column; align-items: center; gap: 10px; } .jo-shop .jo-price { color: var(--jo-ink-soft); font-size: calc(12px * var(--jo-fs)); font-weight: 600; text-transform: uppercase; letter-spacing: .08em; margin: 4px 0 2px; } .jo-shop .jo-price b { display: block; color: var(--jo-ink); font-family: var(--jo-font-display); font-size: calc(26px * var(--jo-fs)); font-weight: 800; letter-spacing: -0.01em; text-transform: none; margin-top: 2px; } .jo-shop .jo-buy .btn { width: 100%; max-width: 220px; } .jo-shop .jo-buy .btn .glyphicon { font-size: 12px; opacity: .85; } /* narrow screens: stack image above price/buttons so pills get full width */ @media (max-width: 540px) { .jo-shop .jo-products .panel-body > .col-xs-6 { width: 100%; } .jo-shop .jo-products .thumbnail { max-width: 240px; margin: 0 auto; } .jo-shop .jo-buy { margin-top: 16px; } } /* ---- shared: modern table card (basket + order summary; both .table-striped) ---- */ .jo-shop table.table-striped { border-collapse: separate; border-spacing: 0; background: #fff; border: 1px solid rgba(15, 23, 42, .06); border-radius: 16px; box-shadow: var(--jo-card-shadow); overflow: hidden; } .jo-shop table.table-striped > tbody > tr > td, .jo-shop table.table-striped > tr > td { border-top: none; border-bottom: 1px solid rgba(15, 23, 42, .06); padding: 14px 18px; vertical-align: middle; color: var(--jo-ink); } /* kill bootstrap zebra + contextual row washes */ .jo-shop .table-striped > tbody > tr:nth-of-type(odd), .jo-shop .table-striped > tbody > tr:nth-of-type(odd) > td { background: transparent; } .jo-shop .table-striped > tbody > tr.default > td, .jo-shop .table-striped > tr.default > td { background: transparent; } /* header row (legacy tr.warning) -> slim uppercase labels */ .jo-shop .table-striped > tbody > tr.warning > td, .jo-shop .table-striped > tr.warning > td { background: var(--jo-surface); color: var(--jo-ink-soft); font-size: calc(11.5px * var(--jo-fs)); letter-spacing: .09em; text-transform: uppercase; padding: 12px 18px; border-bottom: 1px solid rgba(15, 23, 42, .08); } /* total row (legacy tr.info) -> emphasized "Do zapłaty" */ .jo-shop .table-striped tr.info { background: linear-gradient(135deg, rgba(6, 182, 212, .07), rgba(99, 102, 241, .08)); } .jo-shop .table-striped > tbody > tr.info > td, .jo-shop .table-striped > tr.info > td { background: transparent; border-bottom: none; color: var(--jo-ink); font-weight: 700; padding: 16px 18px; } .jo-shop .table-striped > tbody > tr.info > td b, .jo-shop .table-striped > tr.info > td b { font-family: var(--jo-font-display); font-size: calc(20px * var(--jo-fs)); color: var(--jo-primary-dark); white-space: nowrap; } /* narrow screens: let the table card scroll horizontally instead of overflowing the page. The last (SUMA) column is pinned with position:sticky so the row totals and the "Do zapłaty" amount stay visible at 390px without horizontal scrolling. */ @media (max-width: 540px) { .jo-shop table.table-striped { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .jo-shop table.table-striped > tbody { display: table; width: 100%; min-width: 500px; } .jo-shop table.table-striped > tbody > tr > td { padding: 11px 12px; } .jo-shop table.table-striped > tbody > tr > td:last-child { position: sticky; right: 0; background: #fff; box-shadow: -10px 0 12px -10px rgba(15, 23, 42, .25); } .jo-shop .table-striped > tbody > tr.warning > td:last-child { background: #eef2f7; } .jo-shop .table-striped > tbody > tr.info > td:last-child { background: #e8f3f8; } /* the "Do zapłaty:" label cell lives in the scrolled-away area — repeat the label inside the pinned amount cell and blank the original so it never doubles */ .jo-shop .table-striped > tbody > tr.info > td:nth-last-child(2) { visibility: hidden; } .jo-shop .table-striped > tbody > tr.info > td:last-child b::before { content: "Do zapłaty:"; display: block; font-family: var(--jo-font); font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--jo-ink-soft); } } /* ---- basket: quantity / remove controls (glyphicon spans, onclick preserved) ---- */ .jo-shop .table-striped td .glyphicon-plus-sign, .jo-shop .table-striped td .glyphicon-minus-sign, .jo-shop .table-striped td .glyphicon-remove-sign { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border: 1.5px solid rgba(15, 23, 42, .14); border-radius: 50%; background: #fff; color: var(--jo-ink-soft); font-size: 12px; top: 0; transition: color .15s ease, border-color .15s ease, background .15s ease, box-shadow .15s ease; } .jo-shop .table-striped td .glyphicon-plus-sign:hover, .jo-shop .table-striped td .glyphicon-minus-sign:hover { color: var(--jo-primary); border-color: var(--jo-primary); background: rgba(8, 145, 178, .06); box-shadow: 0 4px 10px -4px rgba(8, 145, 178, .5); } .jo-shop .table-striped td .glyphicon-remove-sign:hover { color: #e11d48; border-color: #e11d48; background: rgba(225, 29, 72, .06); box-shadow: 0 4px 10px -4px rgba(225, 29, 72, .5); } /* ---- selects (delivery type) -> design-system control ---- */ .jo-shop select { -webkit-appearance: none; appearance: none; padding: 10px 38px 10px 14px; color: var(--jo-ink); font-size: calc(14px * var(--jo-fs)); background: #fff url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 16 16'%3E%3Cpath d='M4 6l4 4 4-4' fill='none' stroke='%2364748b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E") right 12px center no-repeat; border: 1.5px solid rgba(15, 23, 42, .12); border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: border-color .15s ease, box-shadow .15s ease; } .jo-shop select:focus { border-color: var(--jo-primary); outline: 0; box-shadow: 0 0 0 3px rgba(59, 130, 246, .16); } /* ---- checkboxes + terms row ---- */ .jo-shop input[type="checkbox"] { accent-color: var(--jo-primary); width: 17px; height: 17px; } .jo-shop .checkbox label { padding-left: 26px; } .jo-shop .checkbox label input[type="checkbox"] { margin-left: -26px; margin-top: 1px; } .jo-shop .checkbox label.h4 { font-size: calc(15.5px * var(--jo-fs)); font-weight: 600; color: var(--jo-ink); } .jo-shop .checkbox a { color: var(--jo-primary); font-weight: 700; } .jo-shop .checkbox a:hover { color: var(--jo-primary-dark); } /* ---- basket page small meta lines ---- */ .jo-shop .row .small { color: var(--jo-ink-soft); } /* ---- P24 banners: soften edges ---- */ .jo-shop img[src*="przelewy24"] { border-radius: 10px; max-width: 100%; height: auto; } /* ---- checkout forms: section panels (.panel-primary with repeated headings) ---- */ .jo-shop .panel.panel-primary { background: #fff; border: 1px solid rgba(15, 23, 42, .06); border-radius: var(--jo-radius); box-shadow: var(--jo-card-shadow); overflow: hidden; } .jo-shop .panel-primary > .panel-heading { background: linear-gradient(135deg, rgba(6, 182, 212, .09), rgba(99, 102, 241, .10)); border-bottom: 1px solid rgba(8, 145, 178, .14); color: var(--jo-primary-dark); font-family: var(--jo-font-display); font-size: calc(13.5px * var(--jo-fs)); letter-spacing: .12em; padding: 15px 24px; } .jo-shop .panel-primary > .panel-body { padding: 24px; } /* ---- form controls ---- */ .jo-shop .control-label { font-weight: 700; color: var(--jo-ink); letter-spacing: .01em; margin-bottom: 6px; } .jo-shop .form-control { height: auto; padding: 10px 15px; color: var(--jo-ink); font-size: calc(14px * var(--jo-fs)); border: 1.5px solid rgba(15, 23, 42, .12); border-radius: 12px; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); transition: border-color .15s ease, box-shadow .15s ease; } .jo-shop .form-control:focus { border-color: var(--jo-primary); outline: 0; box-shadow: 0 0 0 3px rgba(59, 130, 246, .16); } .jo-shop .form-control::placeholder { color: #94a3b8; text-transform: none; } .jo-shop .input-group-addon { border: 1.5px solid rgba(15, 23, 42, .12); border-left: 0; border-radius: 0 12px 12px 0; background: rgba(8, 145, 178, .07); color: var(--jo-primary-dark); font-weight: 700; font-size: 12.5px; } /* required-field marker (*) + the "* pole wymagane" legend under page titles */ .jo-page .jo-req { color: #be123c; font-weight: 800; } .jo-page .jo-req-legend { margin: 2px 0 0; color: var(--jo-ink-soft); font-size: calc(12.5px * var(--jo-fs)); font-weight: 600; } /* GUS/CEIDG lookup button while the request round-trips */ .jo-shop .btn.jo-btn-loading { opacity: .65; pointer-events: none; } .jo-shop .btn.jo-btn-loading::after { content: ""; display: inline-block; vertical-align: -2px; width: 14px; height: 14px; margin-left: 8px; border: 2px solid rgba(14, 116, 144, .25); border-top-color: var(--jo-primary-dark); border-radius: 50%; animation: jo-spin .7s linear infinite; } @keyframes jo-spin { to { transform: rotate(360deg); } } /* summary helper note (replaces the dead 'Sprawdź poprawność...' pill) */ .jo-shop .jo-note { display: inline-flex; align-items: center; gap: 7px; margin: 0; color: var(--jo-ink-soft); font-size: calc(13.5px * var(--jo-fs)); font-weight: 600; } .jo-shop .jo-note .glyphicon { color: var(--jo-primary-dark); font-size: 15px; top: 0; } /* toastr (basket/generator/contact validation toasts): top-RIGHT, below the fixed navbar — the legacy toast-top-left landed on the logo */ .jo-page #toast-container.toast-top-left, .jo-page #toast-container.toast-top-right { top: 76px; right: 16px; left: auto; } /* validation states: modern rose / emerald (fv classes + feedback icons kept) */ .jo-shop .has-error .form-control { border-color: #e11d48; } .jo-shop .has-error .form-control:focus { box-shadow: 0 0 0 3px rgba(225, 29, 72, .14); } .jo-shop .has-error .control-label { color: var(--jo-ink); } .jo-shop .has-success .form-control { border-color: #34d399; } .jo-shop .has-success .form-control:focus { box-shadow: 0 0 0 3px rgba(52, 211, 153, .16); } .jo-shop .has-success .control-label { color: var(--jo-ink); } .jo-shop .has-error .form-control-feedback { color: #e11d48; } .jo-shop .has-success .form-control-feedback { color: #10b981; } .jo-shop .has-feedback label ~ .form-control-feedback { top: 31px; height: 43px; line-height: 43px; } .jo-shop .help-block { font-size: 12.5px; font-weight: 600; } .jo-shop .has-error .help-block { color: #e11d48; } .jo-shop .text-danger { color: #e11d48; font-weight: 600; } /* de-duplicate error PRESENTATION: once formvalidator owns a field (has-error / has-success on the group + its own .help-block), hide the server-rendered twin so the same text never shows twice. Texts + logic untouched. */ .jo-shop .form-group.has-error .text-danger, .jo-shop .form-group.has-success .text-danger { display: none; } /* inpost: the ✔/✖ feedback icon landed on the 'szukaj na mapie' input-group addon (~123px wide, fixed-size font) — park the icon just inside the input instead */ .jo-shop .form-control-feedback[data-fv-icon-for="inpost"] { right: 128px; } /* checkbox fields (RODO / terms): keep the message, drop the floating ✔/✖ icon */ .jo-shop .checkbox .form-control-feedback, .jo-shop .form-control-feedback[data-fv-icon-for="rodoTermsFlag"], .jo-shop .form-control-feedback[data-fv-icon-for="acceptTermsFlag"] { display: none !important; } /* ---- RODO note (table.jo-rodo) -> soft info card ---- */ .jo-shop table.jo-rodo { background: linear-gradient(135deg, rgba(6, 182, 212, .05), rgba(99, 102, 241, .06)); border: 1px solid rgba(8, 145, 178, .12); border-radius: 16px; margin-bottom: 0; } .jo-shop .jo-rodo td { border: none; padding: 18px; color: var(--jo-ink-soft); line-height: 1.65; } .jo-shop .jo-rodo td:first-child { width: 110px; } .jo-shop .jo-rodo img { border-radius: 10px; width: 84px; height: auto; } .jo-shop .jo-rodo a { color: var(--jo-primary); } .jo-shop .jo-rodo a:hover { color: var(--jo-primary-dark); } .jo-shop .jo-rodo .checkbox label { font-size: calc(14px * var(--jo-fs)); font-weight: 600; color: var(--jo-ink); } /* ---- order summary badges ---- */ .jo-shop .label { display: inline-block; border-radius: 999px; font-weight: 700; font-size: calc(12px * var(--jo-fs)); letter-spacing: .02em; padding: 6px 14px; white-space: normal; line-height: 1.4; } .jo-shop .label-danger { background: rgba(225, 29, 72, .1); color: #be123c; } .jo-shop .label-default { background: rgba(217, 119, 6, .1); color: #b45309; } /* summary address panels: calmer uppercase blocks */ .jo-shop .panel-body .text-uppercase { color: var(--jo-ink-soft); line-height: 1.75; } .jo-shop .panel-body .text-uppercase b { color: var(--jo-ink); } /* InPost point code on the summary: brand accent instead of the legacy darkred */ .jo-shop .jo-inpost-code { color: var(--jo-primary-dark); font-weight: 700; } /* ---- payment thank-you page (p24ok.php, jo-content scope): pill button ---- */ .jo-p-p24ok .btn.btn-default { border-radius: 999px; background: #fff; border: 1.5px solid rgba(15, 23, 42, .16); color: var(--jo-ink-soft); font-weight: 700; padding: 10px 22px; transition: color .15s ease, border-color .15s ease, box-shadow .15s ease; } .jo-p-p24ok .btn.btn-default:hover, .jo-p-p24ok .btn.btn-default:focus { border-color: var(--jo-primary); color: var(--jo-primary); box-shadow: 0 8px 18px -10px rgba(8, 145, 178, .4); } /* ---- lightweight vanilla toast (design-system): add-to-cart feedback ---- Deliberately independent of toastr/jQuery: on the catalog page toastr loads before jQuery and races, so the legacy toast never fired. window.joToast() lives in genericScreen.jsp . */ .jo-toast { position: fixed; top: 76px; right: 16px; z-index: 10050; display: flex; align-items: center; gap: 10px; max-width: min(340px, calc(100vw - 32px)); padding: 12px 18px; background: #fff; border: 1px solid rgba(8, 145, 178, .25); border-left: 4px solid var(--jo-primary); border-radius: 14px; box-shadow: 0 18px 40px -12px rgba(15, 23, 42, .35); color: var(--jo-ink); font-family: var(--jo-font); font-size: 14px; font-weight: 600; opacity: 0; transform: translateY(-8px); transition: opacity .25s ease, transform .25s ease; } .jo-toast.is-visible { opacity: 1; transform: translateY(0); } .jo-toast__icon { color: #10b981; font-size: 17px; line-height: 1; } @media (prefers-reduced-motion: reduce) { .jo-toast { transition: none; transform: none; } } /* ---- product-card modal (BootstrapDialog on the catalog page) ---- */ .jo-shop .modal-content { border: none; border-radius: var(--jo-radius); box-shadow: 0 32px 64px -16px rgba(15, 23, 42, .4); overflow: hidden; } .jo-shop .modal-header { background: #fff !important; border-bottom: 1px solid rgba(15, 23, 42, .07); padding: 18px 24px; } .jo-shop .modal-header .bootstrap-dialog-title, .jo-shop .modal-title { color: var(--jo-ink) !important; font-family: var(--jo-font-display); font-weight: 700; } .jo-shop .modal-header .bootstrap-dialog-close-button .close { color: var(--jo-ink); opacity: .5; } .jo-shop .modal-body { padding: 24px; color: var(--jo-ink-soft); line-height: 1.7; } .jo-shop .modal-body h5 { font-family: var(--jo-font-display); font-size: calc(21px * var(--jo-fs)); font-weight: 800; color: var(--jo-ink); } .jo-shop .modal-body img.img-responsive { border-radius: 12px; box-shadow: var(--jo-card-shadow); } .jo-shop .modal-body a.standard { color: var(--jo-primary); font-weight: 700; } .jo-shop .modal-body a.standard:hover { color: var(--jo-primary-dark); } .jo-shop .modal-footer { border-top: 1px solid rgba(15, 23, 42, .07); } @media (max-width: 540px) { .jo-shop .modal-body .col-xs-6, .jo-shop .modal-body .col-xs-4 { width: 100%; } .jo-shop .modal-body .btn { max-width: 100%; } } /* ============================================================ UX-2: checkout behaviour package ============================================================ */ /* ---- (3e) checkout stepper: Koszyk -> Dane -> Podsumowanie ---- */ .jo-shop .jo-steps { display: flex; list-style: none; max-width: 560px; margin: 18px auto 0; padding: 0; } .jo-shop .jo-steps__item { position: relative; flex: 1; text-align: center; font-family: var(--jo-font-display); } .jo-shop .jo-steps__item::before { /* connector to the previous step */ content: ""; position: absolute; top: 15px; right: 50%; width: 100%; height: 2px; background: rgba(15, 23, 42, .12); } .jo-shop .jo-steps__item:first-child::before { display: none; } .jo-shop .jo-steps__item.is-active::before, .jo-shop .jo-steps__item.is-done::before { background: var(--jo-primary); } .jo-shop .jo-steps__dot { position: relative; z-index: 1; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; background: #fff; border: 2px solid rgba(15, 23, 42, .18); color: var(--jo-ink-soft); font-size: 13px; font-weight: 800; line-height: 1; } .jo-shop .jo-steps__item.is-active .jo-steps__dot { background: var(--jo-grad); border-color: transparent; color: #fff; box-shadow: 0 6px 14px -6px rgba(8, 145, 178, .55); } .jo-shop .jo-steps__item.is-done .jo-steps__dot { border-color: var(--jo-primary); color: var(--jo-primary-dark); } .jo-shop .jo-steps__label { display: block; margin-top: 7px; font-size: calc(12.5px * var(--jo-fs)); font-weight: 700; letter-spacing: .02em; color: var(--jo-ink-soft); } .jo-shop .jo-steps__item.is-active .jo-steps__label { color: var(--jo-ink); } @media (max-width: 480px) { .jo-shop .jo-steps__dot { width: 26px; height: 26px; font-size: 12px; } .jo-shop .jo-steps__item::before { top: 13px; } .jo-shop .jo-steps__label { font-size: 11px; } } /* ---- (3e) global cart badge in the nav (header.jsp) ---- */ .jo-page .jo-cart-link { position: relative; display: inline-block; } .jo-page .jo-cart-icon { vertical-align: -5px; } .jo-page .jo-cart-count { position: absolute; top: 6px; right: 2px; min-width: 17px; height: 17px; padding: 0 4px; background: var(--jo-grad); color: #fff; border-radius: 999px; font-family: var(--jo-font-display); font-size: 11px; font-weight: 800; line-height: 17px; text-align: center; } .jo-page .jo-cart-mobile { display: none; } @media (max-width: 768px) { .jo-page .jo-cart-mobile { display: inline-block; position: relative; float: right; margin: 9px 4px 0 0; padding: 4px 12px 2px 4px; color: var(--jo-ink-soft); } .jo-page .jo-cart-mobile .jo-cart-count { top: -3px; right: 0; } /* the nav-item variant lives in the collapsed menu: give it a readable row */ .jo-page .jo-cart-item .jo-cart-link { padding-top: 8px; padding-bottom: 8px; } .jo-page .jo-cart-item .jo-cart-count { position: static; margin-left: 6px; display: inline-block; } } /* ---- (3b) order-received screen (back-navigation from the P24 gateway) ---- */ .jo-shop .jo-order-received { padding: 34px 24px 28px; } .jo-shop .jo-order-received__icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto 16px; background: var(--jo-grad); color: #fff; border-radius: 50%; font-size: 26px; font-weight: 800; box-shadow: 0 12px 24px -10px rgba(8, 145, 178, .55); } .jo-shop .jo-order-received__no { font-family: var(--jo-font-display); font-size: calc(17px * var(--jo-fs)); color: var(--jo-ink); margin-bottom: 6px; } .jo-shop .jo-order-received__msg { max-width: 460px; margin: 0 auto 22px; color: var(--jo-ink-soft); line-height: 1.7; } .jo-shop .jo-order-received__back { margin-top: 20px; margin-bottom: 0; } .jo-shop .jo-order-received__back a { color: var(--jo-primary); font-weight: 700; } .jo-shop .jo-order-received__back a:hover { color: var(--jo-primary-dark); }