.hero { padding: var(--space-6) 0 var(--space-5); } .hero--wireframe { display: grid; grid-template-columns: 1.1fr 1fr; gap: var(--space-7); align-items: center; padding: var(--space-7) 0; } @media (max-width: 900px) { .hero--wireframe { grid-template-columns: 1fr; } } .hero--wireframe .eyebrow { color: #000000; font-weight: 700; } .hero--wireframe .hero__title { color: #000000; font-size: 40px; } .hero__title-accent { font-style: italic; } .hero-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); margin-top: var(--space-6); } .hero-tile { display: flex; align-items: center; justify-content: center; min-height: 64px; padding: var(--space-4); border: 1px solid #000000; color: #000000; font-family: var(--font-mono); font-size:15px; letter-spacing: 0.03em; text-transform: uppercase; text-align: center; } .hero-tile:hover { background: #000000; color: #ffffff; } .hero-tile--split { padding: 0; overflow: hidden; justify-content: stretch; } .hero-tile__half { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; min-height: 64px; padding: var(--space-3); color: #000000; font-family: var(--font-mono); font-size:15px; letter-spacing: 0.03em; text-transform: uppercase; text-align: center; } .hero-tile__half:hover { background: #000000; color: #ffffff; } .hero-tile__icon { width: 18px; height: 18px; border: 1px solid currentColor; border-radius: 50%; display: inline-block; } .hero-tile__divider { width: 1px; align-self: stretch; background: #000000; } .hero__col-right { display: flex; } .hero__placeholder { width: 100%; aspect-ratio: 3 / 4; border: 1px solid #000000; background: #ffffff; } .hero__title { font-size: 36px; margin: var(--space-2) 0 var(--space-3); } .hero__desc { max-width: none; color: #211D17; font-size:18px; line-height: 1.7; } .hero--szeroki .hero__desc { max-width: none; } .hero--problem { display: grid; grid-template-columns: 1.3fr 1fr; gap: var(--space-6); align-items: center; } .hero--problem .hero__text { padding: var(--space-2) 0; } .hero--problem .hero__desc { max-width: none; } .hero__image { aspect-ratio: 4 / 3; width: 100%; } .hero__image--foto { position: relative; overflow: hidden; border-radius: var(--radius-md); background: var(--color-bg); } .hero__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; } .hero__img[hidden] { display: none; } @media (max-width: 800px) { .hero--problem { grid-template-columns: 1fr; } } .filters-row { display: flex; flex-wrap: wrap; gap: var(--space-6); padding: var(--space-4) 0 var(--space-5); margin-bottom: var(--space-5); border-bottom: 1px solid var(--color-border); } .pill-group { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); } .pill-row { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); } .pill-group__label { font-family: var(--font-mono); font-size:15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-faint); margin-right: 4px; } @media (max-width: 640px) { .pill-group { flex-wrap: nowrap; align-items: flex-start; } .pill-row--scroll { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; scrollbar-width: thin; } .pill-row--scroll .pill { flex-shrink: 0; } } .entity-card__icon { width: 150px; height: 150px; color: var(--color-accent); margin: 0 auto var(--space-2); display: block; flex: 0 0 auto; } .entity-card__icon--real { object-fit: contain; } .entity-card__icon--real[src*="brodawki.svg"] { width: 150px; height: 150px; } .pill { font-family: var(--font-mono); font-size:15px; -webkit-appearance: none; appearance: none; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); } .pill:hover { border-color: var(--color-border-strong); } .pill--offmap { border-style: dashed; } .pill.is-active { background: var(--color-dark); border-color: var(--color-dark); color: #fff; } .card-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); padding-bottom: var(--space-8); } @media (max-width: 1080px) { .card-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 620px) { .card-grid { grid-template-columns: 1fr; } } .entity-card { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); } .entity-card--foto { padding: 0 0 var(--space-5); overflow: hidden; } .entity-card__foto { order: -1; display: block; width: 100%; aspect-ratio: 43 / 27; object-fit: cover; object-position: center center; background: var(--color-bg); } .entity-card--foto > *:not(.entity-card__foto) { margin-left: var(--space-5); margin-right: var(--space-5); } .entity-card--foto > *:not(.entity-card__foto):first-child { margin-top: var(--space-5); } .entity-card--foto > .badge + .entity-card__title, .entity-card--foto > .tile-badges + .entity-card__title, .entity-card--foto > .entity-card__foto + .entity-card__title, .entity-card--foto > picture + .entity-card__title { margin-top: var(--space-5); } .entity-card--foto .entity-card__link { justify-content: flex-end; } .entity-card--foto { position: relative; } .entity-card--foto > .badge.badge--accent, .entity-card--foto > .tile-badges, .entity-card--foto > .tile-badges:first-child { position: absolute; top: 0; left: 0; margin: 0; z-index: 2; } .entity-card--bez-linku { cursor: default; } body .card.entity-card--bez-linku:hover, body:not(.theme-dark) .card.entity-card--bez-linku:hover { transform: none; } #problemGrid .entity-card__link, #technologieGrid .entity-card__link, #wpisyGrid .entity-card__link { justify-content: flex-end; color: #C41A38; font-weight: 700; } .entity-card__index { font-family: var(--font-mono); font-size:14px; color: var(--color-text-faint); } .entity-card__icon--real[src*="-m.svg"] { transform: scale(0.92); } .entity-card__title {text-transform:uppercase; font-size:18px; font-weight:700; text-align: center; } .entity-card__title-akcent { display: block; margin-top: 3px; color: #C41A38; font-weight: 700; } .entity-card__title-akcent:first-child { margin-top: 0; } .entity-card__title-ink { color: #211D17; } .entity-card__desc { font-size:16px; color: var(--color-text-muted); line-height: 1.4; flex-grow: 1; } .entity-card__link { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-3); padding-top: var(--space-3); border-top: 1px solid var(--color-border); font-family: var(--font-mono); font-size:14px; font-weight: 600; letter-spacing: 0.03em; text-transform: uppercase; color: #C41A38; } body.theme-dark.theme-podstrona .entity-card--cta, body.theme-dark .section--jasna .entity-card--cta, .entity-card--cta { background: #0A0A0A; color: #F5F2EC; border: 1px solid rgba(219, 175, 112, 0.35); border-radius: var(--radius-md); box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3); justify-content: space-between; gap: var(--space-3); } body.theme-dark.theme-podstrona .entity-card--cta .entity-card__title, .entity-card--cta .entity-card__title { color: #F5F2EC; } body.theme-dark.theme-podstrona .entity-card--cta .entity-card__desc, .entity-card--cta .entity-card__desc { color: #CFC9BE; } .entity-card__eyebrow-cta { font-family: var(--font-mono); font-size:15px; letter-spacing: 0.18em; text-transform: uppercase; color: #DBAF70; } .entity-card__cta-btn { display: inline-flex; align-items: center; justify-content: center; margin-top: var(--space-3); padding: 13px 22px; background: #DBAF70; color: #16140F; border-radius: 9999px; font-family: var(--font-mono); font-size:15px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; transition: background-color 0.15s ease; } body.theme-dark.theme-podstrona .entity-card--cta:hover, .entity-card--cta:hover { background: #0A0A0A; border-color: rgba(219, 175, 112, 0.6); } .entity-card--cta:hover .entity-card__cta-btn { background: #EBD3AC; } .entity-card--cta::before { content: none; } .entity-card__cta-rule { display: block; height: 1px; background: rgba(219, 175, 112, 0.3); margin-top: auto; } .entity-card--empty { grid-column: 1 / -1; text-align: center; color: var(--color-text-muted); padding: var(--space-8) var(--space-5); } .obszar-heading { grid-column: 1 / -1; font-family: var(--font-mono); font-size:15px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--color-text-faint); padding-top: var(--space-4); margin-bottom: calc(-1 * var(--space-1)); border-top: 1px solid var(--color-border); } .obszar-heading:first-child { padding-top: 0; border-top: none; } .path-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-4); padding-bottom: var(--space-8); } @media (max-width: 720px) { .path-grid { grid-template-columns: 1fr; } } .path-card { padding: var(--space-6); display: flex; flex-direction: column; gap: var(--space-3); min-height: 200px; } .path-card__top { display: flex; align-items: center; justify-content: space-between; } .path-card__title { font-size:25px; } .path-card__desc { color: var(--color-text-muted); font-size:18px; line-height: 1.6; flex-grow: 1; } .group-chips { flex-grow: 1; align-content: flex-start; } .group-cta { align-self: flex-start; border-radius: 9999px; padding: 12px 26px; } .aktu-layout { display: grid; grid-template-columns: minmax(0, 1.08fr) minmax(0, 1fr); gap: calc(var(--space-4) + 15px); align-items: stretch; margin-bottom: var(--space-4); } .aktu-col { display: flex; flex-direction: column; min-width: 0; } .aktu-col .aktu-more { margin: var(--space-4) 0 0; padding: 0; text-align: right; align-self: flex-end; } @media (max-width: 900px) { .aktu-layout { grid-template-columns: 1fr; } } .aktu-layout > #promoFeature { display: flex; } .aktu-list { display: grid; grid-template-rows: repeat(3, 1fr); gap: var(--space-4); flex: 1; min-height: 0; } .wpis-hero { position: relative; display: block; flex: 1; aspect-ratio: 16 / 11; border-radius: var(--radius-md); overflow: hidden; color: inherit; text-decoration: none; border: 1px solid var(--color-border); } .wpis-hero:hover { border-color: var(--color-border-strong); text-decoration: none; } .wpis-hero__media { display: block; position: absolute; inset: 0; overflow: hidden; background: #F6EEE9; } .wpis-hero__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transition: transform 240ms ease; } .wpis-hero:hover .wpis-hero__img { transform: scale(1.03); } .wpis-hero__overlay { position: absolute; inset: auto 0 0 0; display: flex; flex-direction: column; gap: 6px; padding: var(--space-4); background: linear-gradient(to top, rgba(20, 18, 16, 0.86) 0%, rgba(20, 18, 16, 0.55) 55%, rgba(20, 18, 16, 0) 100%); color: #F5F2EC; } .wpis-hero__date { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size:15px; letter-spacing: 0.06em; color: rgba(245, 242, 236, 0.8); } .wpis-hero__title { display: block; font-size:25px; font-weight: 600; line-height: 1.25; text-transform: uppercase; letter-spacing: 0.02em; } .wpis-row { display: grid; grid-template-columns: 44% 1fr; gap: var(--space-3); align-items: center; color: inherit; text-decoration: none; min-height: 0; } .wpis-row:hover { text-decoration: none; } .wpis-row__media { display: block; overflow: hidden; border-radius: var(--radius-sm); height: 100%; min-height: 0; background: #F1EDE7; } .wpis-row__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; transition: transform 260ms ease; } .wpis-row:hover .wpis-row__img { transform: scale(1.02); } .wpis-row__body { display: flex; flex-direction: column; gap: 6px; } .wpis-row__title { display: block; color: var(--color-text); font-size:18px; font-weight: 600; line-height: 1.3; text-transform: uppercase; letter-spacing: 0.02em; } .wpis-row:hover .wpis-row__title { color: var(--color-accent); } .wpis-row__date { display: flex; align-items: center; gap: 6px; font-family: var(--font-mono); font-size:15px; letter-spacing: 0.06em; color: var(--color-text-muted); } .wpis-row__clock { flex: 0 0 auto; opacity: 0.75; } .wpis-row__desc { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; font-size:18px; line-height: 1.5; color: var(--color-text-muted); } .promo-feature { display: grid; grid-template-columns: 1.3fr 1fr; border: 1px solid var(--color-border); border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-4); color: inherit; } .promo-feature:hover { border-color: var(--color-border-strong); text-decoration: none; } @media (max-width: 720px) { .promo-feature { grid-template-columns: 1fr; } } .promo-feature__media { display: block; overflow: hidden; min-height: 180px; } .promo-feature__img { display: block; width: 100%; height: 100%; min-height: 180px; object-fit: cover; object-position: center center; background: var(--color-bg); transition: transform 0.4s ease; } .promo-feature:hover .promo-feature__img { transform: scale(1.03); } .promo-feature__panel { background: var(--color-dark); color: var(--color-dark-text); padding: var(--space-5) var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); } .promo-feature__badge { align-self: flex-start; } .promo-feature__date { display: block; margin-top: calc(-1 * var(--space-1)); font-family: var(--font-mono); font-size:15px; color: var(--color-dark-text-muted); } .promo-feature__title { display: block; font-size:23px; font-weight: 700; line-height: 1.2; } .promo-feature__desc { display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--color-dark-text-muted); font-size:18px; line-height: 1.6; flex-grow: 1; } .promo-feature__cta { align-self: flex-start; border-color: #fff; color: #fff; } .promo-feature__footnote { font-family: var(--font-mono); font-size:15px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-dark-text-muted); } .news-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } .news-grid:last-child { padding-bottom: var(--space-8); } @media (max-width: 900px) { .news-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .news-grid { grid-template-columns: 1fr; } } .news-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: calc(var(--space-4) + 10px); } @media (max-width: 900px) { .news-grid--3 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .news-grid--3 { grid-template-columns: 1fr; } } .news-card { padding: 0; display: flex; flex-direction: column; overflow: hidden; color: inherit; } .news-card:hover { border-color: var(--color-border-strong); text-decoration: none; } .news-card__media { display: block; aspect-ratio: 16 / 10; overflow: hidden; background: var(--color-bg); } .news-card__img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: center center; transition: transform 0.4s ease; } .news-card:hover .news-card__img { transform: scale(1.04); } .news-card__tresc { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); flex-grow: 1; } .news-card__date { font-family: var(--font-mono); font-size:15px; color: var(--color-text-faint); } .news-card__title { font-size:18px; font-weight: 700; } .news-card__desc { font-size:18px; color: var(--color-text-muted); line-height: 1.5; flex-grow: 1; } .section__more { margin-top: 3rem; text-align: center; } .section__more .entity-card__link { display: inline-flex; margin-top: 0; padding-top: 0; border-top: 0; } .dzial-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); padding-bottom: var(--space-8); } @media (max-width: 900px) { .dzial-grid { grid-template-columns: 1fr; } } .dzial-card { position: relative; display: flex; flex-direction: column; justify-content: flex-end; aspect-ratio: 1 / 1; padding: var(--space-5); overflow: hidden; border-radius: var(--radius-md); background: var(--color-dark); color: #fff; } .dzial-card__foto { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center center; transition: transform 0.4s ease; } .dzial-card:hover .dzial-card__foto { transform: scale(1.04); } .dzial-card__cien { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.45) 45%, rgba(0, 0, 0, 0.05) 100%); } .dzial-card__body { position: relative; display: flex; flex-direction: column; } .dzial-card__title { font-size:23px; font-weight: 700; margin-bottom: var(--space-2); } .dzial-card__desc { font-size:18px; line-height: 1.6; color: rgba(255, 255, 255, 0.82); margin-bottom: var(--space-4); } .dzial-card__cta { font-family: var(--font-mono); font-size:15px; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-accent); } .bodypick { display: grid; grid-template-columns: 1.05fr 1fr; gap: var(--space-7); align-items: start; padding-bottom: var(--space-8); } @media (max-width: 900px) { .bodypick { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } } @media (max-width: 360px) { .fig__img { height: 400px; } .fig__labels { width: 72px; } .bodypick__figure, .bodypick__panel { padding: var(--space-3); } } .bodypick__col-title { font-size:27px; text-align: center; margin-bottom: var(--space-5); } .tile-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); } @media (max-width: 520px) { .tile-grid { grid-template-columns: 1fr; } } .tile { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-4); font-size:18px; color: var(--color-text); } .tile:hover { border-color: var(--color-border-strong); } .tile__name { font-weight: 500; } .tile__meta { font-family: var(--font-mono); font-size:15px; letter-spacing: 0.03em; color: var(--color-text-faint); } .tile--strefa { grid-column: 1 / -1; } .tile__price { font-family: var(--font-mono); font-size:15px; font-weight: 600; color: var(--color-accent-dark); } .bodypick__subhead { margin: var(--space-6) 0 var(--space-3); font-family: var(--font-mono); font-size:15px; letter-spacing: 0.06em; text-transform: uppercase; font-weight: 400; color: var(--color-text-faint); } .bodypick__empty { grid-column: 1 / -1; padding: var(--space-5) 0; } .fig__switch { display: inline-flex; gap: 4px; margin: 0 auto var(--space-3); padding: 5px; border: 0; border-radius: 999px; background: #fff; box-shadow: 0 14px 34px -10px rgba(33,29,23,.4); } .fig__switch-wrap:not(:has(+ .fig__switch-wrap)) .fig__switch { margin-bottom: var(--space-7); } .fig__switch-wrap { display: flex; justify-content: center; } .fig__switch-btn { min-width: 62px; padding: 9px 22px; border: 0; border-radius: 999px; background: none; -webkit-appearance: none; appearance: none; box-shadow: none; font-family: var(--font-mono); font-size:15px; letter-spacing: 0.1em; text-transform: uppercase; color: #6C6355; cursor: pointer; font-weight: 700; } .fig__switch-btn:hover { color: #211D17; } .fig__switch-btn.is-active { background: #16140F; color: #fff; } #trybSwitch .fig__switch-btn.is-active { background: linear-gradient(180deg, #C41A38 0%, #75021B 100%); } .fig__stage { position: relative; width: fit-content; margin: 0 auto; } .fig__img { display: block; height: 520px; width: auto; opacity: 0.28; user-select: none; } @media (max-width: 1100px) { .fig__img { height: 440px; } } @media (max-width: 900px) { .fig__img { height: 500px; } } .fig__svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } .fig__svg--interactive { pointer-events: auto; } .fig__zone--klik { pointer-events: fill; cursor: pointer; } .fig__zone { fill: var(--color-accent); fill-opacity: 0; stroke: var(--color-accent-dark); stroke-opacity: 0; stroke-width: 0; transition: fill-opacity 0.15s ease, stroke-opacity 0.15s ease, stroke-width 0.15s ease; } .fig__svg--interactive .fig__zone { cursor: pointer; } .fig__zone.is-hover { fill-opacity: 0.55; stroke-opacity: 0.85; stroke-width: 4; } .fig__zone.is-active { fill-opacity: 0.85; stroke-opacity: 1; stroke-width: 5; } .fig__labels { position: absolute; top: 0; bottom: 0; width: 132px; } .fig__labels--left { right: 100%; margin-right: 10px; } .fig__labels--right { left: 100%; margin-left: 10px; } @media (max-width: 1100px) { .fig__labels { width: 112px; } } @media (max-width: 420px) { .fig__labels { width: 84px; } } .fig__label { position: absolute; width: 100%; padding: 0; border: 0; background: none; font-family: inherit; font-size:16px; line-height: 1.25; color: var(--color-text); cursor: pointer; transform: translateY(-100%); } @media (max-width: 420px) { .fig__label { font-size:13px; } } .fig__labels--left .fig__label { text-align: left; } .fig__labels--right .fig__label { text-align: right; } .fig__label-text { display: block; } .fig__label-line { display: block; position: relative; height: 0; margin-top: 5px; background: none; border-top: 1px solid var(--color-border-strong); opacity: 0.45; } .fig__label-line::after { content: ""; position: absolute; top: 50%; width: 6px; height: 6px; border-radius: 50%; border: 1px solid var(--color-border-strong); background: var(--color-surface); transform: translateY(-50%); } .fig__labels--left .fig__label-line::after { right: -3px; } .fig__labels--right .fig__label-line::after { left: -3px; } .fig__label:hover, .fig__label.is-hover { color: var(--color-accent-dark); } .fig__label:hover .fig__label-line, .fig__label.is-hover .fig__label-line { opacity: 1; border-top-color: #C9A86A; } .fig__label.is-active { color: var(--color-accent-dark); font-weight: 600; } .fig__label.is-active .fig__label-line { background: none; border-top-color: #C9A86A; opacity: 1; height: 0; } .fig__label.is-active .fig__label-line::after { border-color: #C9A86A; background: #C9A86A; } .fig__hint { margin-top: var(--space-5); text-align: center; font-family: var(--font-mono); font-size:15px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--color-text-faint); } .strefy-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-4); padding-bottom: var(--space-8); } @media (max-width: 1100px) { .strefy-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } } @media (max-width: 780px) { .strefy-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 480px) { .strefy-grid { grid-template-columns: 1fr; } } .strefa-card { display: flex; flex-direction: column; overflow: hidden; } .strefa-card:hover { border-color: var(--color-accent); } .strefa-card__figure { display: flex; align-items: center; justify-content: center; height: 190px; padding: var(--space-4); background: var(--color-bg); } .strefa-card__img { max-width: 100%; max-height: 100%; width: auto; height: auto; object-fit: contain; } .strefa-card__body { display: flex; flex-direction: column; gap: 6px; flex-grow: 1; padding: var(--space-4); border-top: 1px solid var(--color-border); } .strefa-card__title { font-size:18px; font-weight: 700; } .strefa-card__meta { flex-grow: 1; font-family: var(--font-mono); font-size:15px; letter-spacing: 0.03em; color: var(--color-text-faint); } .strefa-card__footer { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); margin-top: var(--space-2); } .strefa-card__price { font-family: var(--font-mono); font-size:15px; font-weight: 600; color: var(--color-accent-dark); } .strefa-card__arrow { font-size:19px; color: var(--color-accent-dark); } .strefa-card:hover .strefa-card__arrow { transform: translateX(3px); } .wpis { max-width: 1140px; margin: 0 auto; padding: var(--space-6) 0 var(--space-8); } .wpis__layout { display: grid; grid-template-columns: minmax(0, 1fr) 340px; column-gap: var(--space-7); row-gap: 0; align-items: start; } .wpis__main { display: contents; } .wpis__figure { grid-column: 1; grid-row: 1; } .wpis__body { grid-column: 1; grid-row: 2; } .wpis-autor { grid-column: 1; grid-row: 3; } .wpis__aside { grid-column: 2; grid-row: 1; align-self: stretch; margin-bottom: var(--space-6); display: flex; flex-direction: column; } @media (max-width: 1000px) { .wpis__layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); } .wpis__main { display: block; } .wpis__aside { grid-column: auto; grid-row: auto; align-self: start; margin-bottom: 0; display: block; } } .wpis__title { font-size: 36px; line-height: 1.15; margin-bottom: var(--space-4); } @media (max-width: 720px) { .wpis__title { font-size: 28px; } } .wpis__lead { font-size:18px; line-height: 1.7; color: var(--color-text-muted); } .wpis__figure { margin: var(--space-6) 0; } .wpis__image { display: block; width: 100%; height: auto; border-radius: var(--radius-md); } .wpis__body { font-size:18px; line-height: 1.8; min-width: 0; overflow-wrap: anywhere; } .wpis__body a:not(.btn) { color: #C41A38; font-weight: 600; text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; transition: color .2s; } .wpis__body a:not(.btn):hover { color: #75021B; text-decoration-thickness: 2px; } .wpis__body img, .wpis__body iframe, .wpis__body video { max-width: 100%; height: auto; } .wpis__body table { display: block; max-width: 100%; overflow-x: auto; } .wpis__main, .wpis__figure, .wpis-autor { min-width: 0; } .wpis__para { margin-bottom: var(--space-4); } .wpis__subhead { font-size:21px; margin: var(--space-6) 0 var(--space-3); } .wpis__list { margin: 0 0 var(--space-4); padding-left: var(--space-5); list-style: disc outside; } ol.wpis__list { list-style: decimal outside; } .wpis__list li { margin-bottom: var(--space-2); padding-left: 4px; } .wpis__list li::marker { color: var(--color-accent-dark); } .wpis__inline-figure { margin: var(--space-6) 0; } .wpis__inline-image { display: block; width: 100%; height: auto; border-radius: var(--radius-md); } .wpis__caption { margin-top: var(--space-2); font-size:14px; line-height: 1.5; color: var(--color-text-muted); } .wpis__buttons { display: flex; flex-wrap: wrap; gap: var(--space-3); margin: var(--space-5) 0; } .news-card__desc { display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .pagination { display: flex; justify-content: center; align-items: center; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-7); padding-bottom: var(--space-8); } .pagination__item { font-family: var(--font-mono); font-size:15px; padding: 7px 14px; border-radius: 999px; border: 1px solid var(--color-border); background: var(--color-surface); color: var(--color-text); } .pagination__item:hover { border-color: var(--color-border-strong); text-decoration: none; } .pagination__item.is-active { background: var(--color-dark); border-color: var(--color-dark); color: #fff; } .pagination__item.is-disabled { color: var(--color-text-faint); border-style: dashed; } .wpis__aside { padding-top: var(--space-2); border-top: 1px solid var(--color-border); } .wpis__aside-title { font-size:21px; margin-bottom: var(--space-4); } .wpis__aside-list { display: flex; flex-direction: column; gap: var(--space-3); flex: 1; } .wpis-autor { display: flex; gap: var(--space-5); align-items: center; margin-top: var(--space-7); padding-top: var(--space-5); border-top: 1px solid var(--color-border); } .wpis-autor__foto { width: 96px; height: 96px; flex-shrink: 0; border-radius: 50%; object-fit: cover; display: block; } .wpis-autor__foto[hidden] { display: none; } .wpis-autor__imie { font-size:19px; margin-bottom: var(--space-2); } .wpis-autor__opis { font-size:18px; line-height: 1.7; color: var(--color-text-muted); } @media (max-width: 520px) { .wpis-autor { flex-direction: column; gap: var(--space-4); } } .news-card--poziomy { flex-direction: row; align-items: stretch; flex-grow: 1; flex-shrink: 0; gap: var(--space-3); background: none; border: 0; border-radius: 0; box-shadow: none; } .news-card--poziomy .news-card__media { width: 140px; flex-shrink: 0; border-radius: var(--radius-sm); } .news-card--poziomy .news-card__tresc { padding: 0; gap: 6px; } .news-card--poziomy .news-card__title { font-size:18px; line-height: 1.3; } .news-card--poziomy .news-card__desc { display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; line-clamp: 2; overflow: hidden; flex-grow: 0; } .news-card--poziomy:hover .news-card__title { color: var(--color-accent-dark); } .interior-section__title { margin-bottom: var(--space-3); } .interior-section__desc { max-width: 720px; color: var(--color-text-muted); font-size:18px; line-height: 1.7; margin-bottom: var(--space-5); } .interior-gallery { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--space-4); } @media (max-width: 900px) { .interior-gallery { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 520px) { .interior-gallery { grid-template-columns: 1fr; } } .interior-gallery__item { margin: 0; } .interior-gallery__img { display: block; aspect-ratio: 4 / 3; width: 100%; overflow: hidden; border-radius: var(--radius-md); background: var(--color-border); border: none; padding: 0; cursor: pointer; } .interior-gallery__img img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.35s ease; } .interior-gallery__img:hover img { transform: scale(1.08); } .lightbox { position: fixed; inset: 0; z-index: 100; display: none; align-items: center; justify-content: center; background: rgba(0, 0, 0, 0.92); } .lightbox.is-open { display: flex; } .lightbox__img { max-width: 88vw; max-height: 86vh; object-fit: contain; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5); } .lightbox__close { position: absolute; top: var(--space-5); right: var(--space-5); background: none; border: none; color: #fff; font-size:37px; line-height: 1; cursor: pointer; padding: var(--space-2); } .lightbox__nav { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255, 255, 255, 0.1); border: 1px solid rgba(255, 255, 255, 0.3); color: #fff; width: 48px; height: 48px; border-radius: 50%; font-size:21px; cursor: pointer; display: flex; align-items: center; justify-content: center; } .lightbox__nav:hover { background: rgba(255, 255, 255, 0.25); } .lightbox__nav--prev { left: var(--space-5); } .lightbox__nav--next { right: var(--space-5); } .lightbox__counter { position: absolute; bottom: var(--space-5); left: 50%; transform: translateX(-50%); font-family: var(--font-mono); font-size:15px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.7); } @media (max-width: 640px) { .lightbox__nav { width: 40px; height: 40px; } .lightbox__nav--prev { left: var(--space-2); } .lightbox__nav--next { right: var(--space-2); } } @media (max-width: 560px) { .fig__img { height: 340px; } .fig__labels { width: 104px; } .fig__label { font-size:13px; line-height: 1.3; padding: 12px 0; white-space: nowrap; } .fig__label[data-slug="szyja"] { top: 8% !important; } .fig__label[data-slug="dekolt"] { top: 22% !important; } .fig__label[data-slug="plecy"] { top: 36% !important; } .fig__label[data-slug="boki"] { top: 50% !important; } .fig__label[data-slug="brzuch"] { top: 64% !important; } .fig__label[data-slug="kolana"] { top: 88% !important; } .fig__label[data-slug="twarz"] { top: 8% !important; } .fig__label[data-slug="podbrodek"] { top: 20% !important; } .fig__label[data-slug="ramiona"] { top: 34% !important; } .fig__label[data-slug="przedramiona"] { top: 48% !important; } .fig__label[data-slug="posladki"] { top: 62% !important; } .fig__label[data-slug="uda"] { top: 76% !important; } .fig__label[data-slug="lydki"] { top: 90% !important; } .bodypick { gap: var(--space-5); } .entity-card, .news-card, .dzial-card { overflow-wrap: anywhere; } .accordion__trigger { font-size:15px; gap: 12px; } .accordion__panel li, .accordion__panel p { overflow-wrap: anywhere; } .pagination { flex-wrap: wrap; gap: 8px; } } @media (max-width: 480px) { .fig__img { height: 300px; } .fig__labels { width: 92px; } .fig__label { font-size:13px; line-height: 1.2; padding: 10px 0; white-space: nowrap; } .fig__label[data-slug="szyja"] { top: 8% !important; } .fig__label[data-slug="dekolt"] { top: 22% !important; } .fig__label[data-slug="plecy"] { top: 36% !important; } .fig__label[data-slug="boki"] { top: 50% !important; } .fig__label[data-slug="brzuch"] { top: 64% !important; } .fig__label[data-slug="kolana"] { top: 88% !important; } .fig__label[data-slug="twarz"] { top: 8% !important; } .fig__label[data-slug="podbrodek"] { top: 20% !important; } .fig__label[data-slug="ramiona"] { top: 34% !important; } .fig__label[data-slug="przedramiona"] { top: 48% !important; } .fig__label[data-slug="posladki"] { top: 62% !important; } .fig__label[data-slug="uda"] { top: 76% !important; } .fig__label[data-slug="lydki"] { top: 90% !important; } } @media (max-width: 1080px) { .card-grid > *, .news-grid > *, .dzial-grid > *, .strefy-grid > * { min-width: 0; } } .entity-card--empty .entity-card__empty-title { margin: 0 0 8px; font-size:19px; line-height: 1.45; font-weight: 400; color: var(--color-text); } .entity-card--empty .entity-card__empty-text { margin: 0; font-size:18px; line-height: 1.6; color: var(--color-text-muted); } .entity-card--empty .entity-card__empty-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: var(--space-4); } .entity-card--empty .entity-card__empty-meta { margin: 0 0 6px; font-family: var(--font-mono); font-size:15px; letter-spacing: 0.04em; color: var(--color-text-faint); } .entity-card__link { font-weight: 700; } .entity-card--cta .entity-card__title { font-size: 34px !important; font-weight: 400 !important; line-height: 1.12; } .wpis__galeria { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 28px 0; } .wpis__galeria-item { margin: 0; aspect-ratio: 1 / 1; overflow: hidden; border-radius: 6px; background: var(--color-surface, #fff); } .wpis__galeria-item img { width: 100%; height: 100%; object-fit: cover; display: block; } @media (max-width: 600px) { .wpis__galeria { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; } } .wpis__buttons { flex-direction: column; align-items: flex-start; gap: 6px; } .wpis__buttons .btn.btn--primary { display: inline-block; background: #B0102F !important; background-image: none !important; color: #fff !important; border: 0 !important; border-radius: 4px !important; padding: 6px 12px !important; font-family: var(--font-body, inherit) !important; font-size: 15px !important; font-weight: 500 !important; letter-spacing: 0 !important; text-transform: none !important; line-height: 1.35; box-shadow: none !important; transition: background 160ms ease; } .wpis__buttons .btn.btn--primary:hover { background: #8E0C26 !important; color: #fff !important; } .wpis__inline-link { display: block; color: inherit; text-decoration: none; } .wpis__inline-link .wpis__caption { color: #a57c3c; } .wpis__inline-link:hover .wpis__caption { text-decoration: underline; } .wpis__inline-link img { transition: opacity 160ms ease; } .wpis__inline-link:hover img { opacity: 0.92; } @media (max-width: 560px) { .fig__stage { margin: 0 auto; } .fig__img { height: auto; width: clamp(96px, calc(100vw - 268px), 150px); } .fig__labels { width: 88px; } .fig__labels--left { margin-right: 6px; } .fig__labels--right { margin-left: 6px; } .fig__label { font-size: 12px; line-height: 1.2; white-space: normal; } } @media (max-width: 380px) { .fig__img { width: clamp(76px, calc(100vw - 244px), 150px); } .fig__labels { width: 76px; } .fig__label { font-size: 11px; } } .entity-card__foto--brak { order: -1; display: block; width: 100%; aspect-ratio: 43 / 27; background: #F1EBE1; }