/* ========================================================================== gax studio — style strony ========================================================================== */ :root { --bg: #0a0a0a; --bg-2: #111110; --bg-3: #1a1a19; --fg: #f3f1ec; --fg-2: #c9c6bf; --muted: #8f8b84; --line: rgba(243, 241, 236, .12); --line-2: rgba(243, 241, 236, .24); --accent: #ff3b1f; --sans: 'Geist', ui-sans-serif, system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif; --serif: 'Instrument Serif', ui-serif, Georgia, serif; --mono: 'Geist Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; --pad: clamp(16px, 4vw, 56px); --radius: 6px; --header-h: 76px; --ease: cubic-bezier(.16, 1, .3, 1); --ease-io: cubic-bezier(.76, 0, .24, 1); --intro-delay: 1.85s; } .skip-intro { --intro-delay: .1s; } *, *::before, *::after { box-sizing: border-box; } [hidden] { display: none !important; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: 20px; scrollbar-color: #2c2c2a var(--bg); background: var(--bg); } html:has(dialog[open]) { overflow: hidden; } body { margin: 0; background: var(--bg); color: var(--fg); font-family: var(--sans); font-size: 16px; line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; overflow-x: clip; } /* ziarno filmowe */ body::after { content: ""; position: fixed; inset: -100%; z-index: 90; pointer-events: none; opacity: .075; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); animation: grain 1.2s steps(6) infinite; } @keyframes grain { 0% { transform: translate(0, 0); } 20% { transform: translate(-3%, 2%); } 40% { transform: translate(2%, -4%); } 60% { transform: translate(-4%, -1%); } 80% { transform: translate(3%, 3%); } 100% { transform: translate(0, 0); } } img, video, svg { display: block; max-width: 100%; } a { color: inherit; text-decoration: none; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } input, textarea { font: inherit; } h1, h2, h3, h4 { margin: 0; font-weight: 600; } p { margin: 0; } em { font-family: var(--serif); font-style: italic; font-weight: 400; letter-spacing: -.01em; } .mono { font-family: var(--mono); font-weight: 400; } ::selection { background: var(--accent); color: #fff; } :focus-visible { outline: 2px solid var(--fg); outline-offset: 3px; border-radius: 2px; } .skip-link { position: fixed; left: 16px; top: 16px; z-index: 200; padding: 10px 16px; background: var(--fg); color: var(--bg); border-radius: 999px; transform: translateY(-200%); transition: transform .3s var(--ease); } .skip-link:focus { transform: none; } .wrap { width: 100%; max-width: 1760px; margin-inline: auto; padding-inline: var(--pad); } .label { font-family: var(--mono); font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin: 0 0 20px; font-weight: 400; } .rec-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 0 0 rgba(255, 59, 31, .6); animation: rec 1.6s ease-in-out infinite; } @keyframes rec { 0%, 100% { opacity: 1; box-shadow: 0 0 0 0 rgba(255, 59, 31, .5); } 50% { opacity: .35; box-shadow: 0 0 0 6px rgba(255, 59, 31, 0); } } /* ---------- intro ---------- */ .intro { position: fixed; inset: 0; z-index: 120; display: grid; place-items: center; align-content: center; gap: 28px; background: var(--bg); pointer-events: none; animation: intro-out 1s var(--ease-io) 1.55s forwards; } .skip-intro .intro { display: none; } .intro__logo { width: min(52vw, 440px); height: auto; color: var(--fg); overflow: visible; } .intro__studio { animation: intro-studio 1.1s var(--ease) .1s both; } .intro__gax { transform-box: fill-box; animation: intro-gax 1s var(--ease) .45s both; } .intro__bar { width: min(52vw, 440px); height: 1px; background: var(--line); overflow: hidden; } .intro__bar span { display: block; height: 100%; background: var(--fg); transform-origin: left; animation: intro-bar 1.4s var(--ease-io) both; } .intro__label { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--muted); animation: fade-in .8s ease .5s both; } @keyframes intro-studio { from { clip-path: inset(0 100% 0 0); opacity: .3; } to { clip-path: inset(0 0 0 0); opacity: 1; } } @keyframes intro-gax { from { transform: translateY(22%); opacity: 0; } to { transform: none; opacity: 1; } } @keyframes intro-bar { from { transform: scaleX(0); } to { transform: scaleX(1); } } @keyframes intro-out { to { transform: translateY(-101%); visibility: hidden; } } @keyframes fade-in { from { opacity: 0; } to { opacity: 1; } } /* ---------- kursor ---------- */ .cursor { position: fixed; left: 0; top: 0; z-index: 95; pointer-events: none; width: 0; height: 0; } .cursor__label { position: absolute; left: -46px; top: -46px; width: 92px; height: 92px; border-radius: 50%; display: grid; place-items: center; background: var(--fg); color: var(--bg); font-family: var(--mono); font-size: 11px; letter-spacing: .08em; text-transform: uppercase; transform: scale(0); transition: transform .45s var(--ease); } .cursor.is-active .cursor__label { transform: scale(1); } .has-cursor [data-cursor], .has-cursor [data-cursor] * { cursor: none; } /* ---------- nagłówek ---------- */ .header { position: fixed; top: 0; left: 0; right: 0; z-index: 60; height: var(--header-h); padding: 0 var(--pad); display: flex; align-items: center; gap: 28px; transition: transform .6s var(--ease); animation: fade-in 1s ease var(--intro-delay) both; } .header::before { content: ""; position: absolute; inset: 0 0 -40px; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(10, 10, 10, .88), rgba(10, 10, 10, 0)); opacity: 0; transition: opacity .5s; } .header.is-scrolled::before { opacity: 1; } .header.is-hidden { transform: translateY(-100%); } .header__logo { width: 92px; color: var(--fg); flex-shrink: 0; transition: opacity .3s; } .header__logo:hover { opacity: .75; } .header__logo svg { width: 100%; height: auto; } .nav { margin-left: auto; display: flex; gap: clamp(18px, 2.4vw, 34px); } .nav__link { display: inline-flex; align-items: flex-start; gap: 3px; font-size: 15px; font-weight: 500; letter-spacing: -.01em; } .nav__link sup { font-family: var(--mono); font-size: 10px; color: var(--muted); top: 0; line-height: 1; } .roll { display: block; overflow: hidden; height: 1.3em; line-height: 1.3; } .roll > span { display: block; text-shadow: 0 1.3em 0 currentColor; transition: transform .55s var(--ease); } .nav__link:hover .roll > span { transform: translateY(-1.3em); } .nav__link.is-active { color: var(--fg); } .nav__link.is-active .roll > span::after { content: ""; } .nav:has(.is-active) .nav__link:not(.is-active) { color: var(--fg-2); } .header__status { display: inline-flex; align-items: center; gap: 10px; height: 38px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; font-family: var(--mono); font-size: 12px; letter-spacing: .02em; background: rgba(10, 10, 10, .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); transition: background .3s, color .3s, border-color .3s; } .header__status:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); } .menu-btn { display: none; margin-left: auto; align-items: center; gap: 12px; height: 42px; padding: 0 6px 0 16px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 14px; background: rgba(10, 10, 10, .35); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .menu-btn__icon { position: relative; width: 30px; height: 30px; border-radius: 50%; background: var(--fg); } .menu-btn__icon i { position: absolute; left: 9px; right: 9px; height: 1.5px; background: var(--bg); transition: transform .45s var(--ease); } .menu-btn__icon i:first-child { top: 12px; } .menu-btn__icon i:last-child { top: 17px; } .menu-btn[aria-expanded="true"] .menu-btn__icon i:first-child { transform: translateY(2.5px) rotate(45deg); } .menu-btn[aria-expanded="true"] .menu-btn__icon i:last-child { transform: translateY(-2.5px) rotate(-45deg); } .mobile-menu { position: fixed; inset: 0; z-index: 55; background: var(--bg); display: flex; flex-direction: column; justify-content: space-between; padding: calc(var(--header-h) + 32px) var(--pad) 32px; clip-path: inset(0 0 100% 0); transition: clip-path .7s var(--ease-io); } .mobile-menu.is-open { clip-path: inset(0 0 0 0); } .mobile-menu nav { display: flex; flex-direction: column; } .mobile-menu nav a { display: flex; align-items: baseline; gap: 16px; font-size: clamp(2.6rem, 12vw, 4.5rem); font-weight: 600; letter-spacing: -.05em; line-height: 1.05; padding: 10px 0; border-bottom: 1px solid var(--line); opacity: 0; transform: translateY(30px); transition: opacity .5s, transform .7s var(--ease); } .mobile-menu nav a .mono { font-size: 12px; color: var(--muted); letter-spacing: 0; font-weight: 400; } .mobile-menu.is-open nav a { opacity: 1; transform: none; } .mobile-menu.is-open nav a:nth-child(2) { transition-delay: .05s; } .mobile-menu.is-open nav a:nth-child(3) { transition-delay: .1s; } .mobile-menu.is-open nav a:nth-child(4) { transition-delay: .15s; } .mobile-menu__foot { display: flex; flex-direction: column; gap: 12px; color: var(--fg-2); } .mobile-menu__foot .mono { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; } /* ---------- przyciski ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; height: 56px; padding: 0 26px; border-radius: 999px; font-size: 15px; font-weight: 500; letter-spacing: -.01em; white-space: nowrap; transition: background .35s var(--ease), color .35s var(--ease), border-color .35s, transform .35s var(--ease); } .btn:active { transform: scale(.97); } .btn__icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; flex-shrink: 0; transition: transform .45s var(--ease); } .btn__icon svg { width: 16px; height: 16px; fill: currentColor; } .btn__meta { font-size: 12px; opacity: .55; } .btn--play, .btn--light { background: var(--fg); color: var(--bg); } .btn--play { padding: 0 24px 0 8px; } .btn--play .btn__icon { background: var(--bg); color: var(--fg); } .btn--play:hover .btn__icon { transform: scale(1.08); } .btn--light:hover { background: #fff; } .btn--ghost { border: 1px solid var(--line-2); color: var(--fg); background: rgba(10, 10, 10, .2); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } .btn--ghost:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); } .btn--ghost:disabled { opacity: .3; pointer-events: none; } .btn--sm { height: 42px; padding: 0 18px; font-size: 14px; } .icon-btn { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--line-2); color: var(--fg); background: rgba(10, 10, 10, .45); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background .3s, color .3s, border-color .3s; } .icon-btn svg { width: 20px; height: 20px; fill: none; } .icon-btn:hover { background: var(--fg); color: var(--bg); border-color: var(--fg); } /* ---------- hero ---------- */ .hero { --inset: clamp(10px, 1.7vw, 24px); position: relative; isolation: isolate; overflow: hidden; margin: var(--header-h) var(--inset) 0; border-radius: 10px; height: calc(100vh - var(--header-h) - var(--inset)); height: calc(100svh - var(--header-h) - var(--inset)); min-height: 600px; display: flex; flex-direction: column; justify-content: flex-end; box-shadow: inset 0 0 0 1px var(--line); } .hero__media { position: absolute; inset: 0; z-index: -2; background: var(--bg); will-change: transform; } .hero__media > img, .hero__media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; } .hero__media > .is-loaded { opacity: 1; } .hero__media > .slide { opacity: 0; transform: scale(1.12); transition: opacity 1.6s ease; } .hero__media > .slide.is-on { opacity: 1; animation: kenburns 9s linear forwards; } @keyframes kenburns { from { transform: scale(1.12) translate(1.5%, 1%); } to { transform: scale(1.02) translate(-1%, -1%); } } .hero__fallback { position: absolute; inset: 0; display: grid; place-items: center; background: radial-gradient(60% 50% at 70% 30%, rgba(255, 59, 31, .16), transparent 70%), radial-gradient(50% 60% at 20% 80%, rgba(243, 241, 236, .07), transparent 70%), var(--bg); animation: drift 18s ease-in-out infinite alternate; } .hero__fallback svg { width: 86vw; max-width: 1500px; height: auto; color: var(--fg); opacity: .06; } .hero__media.has-media .hero__fallback { display: none; } @keyframes drift { from { background-position: 0 0, 0 0, 0 0; filter: hue-rotate(0deg); } to { background-position: 40px -30px, -30px 20px, 0 0; filter: hue-rotate(-12deg); } } .hero__shade { position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(10, 10, 10, .6) 0%, rgba(10, 10, 10, 0) 24%), linear-gradient(to top, rgba(10, 10, 10, .96) 0%, rgba(10, 10, 10, .55) 32%, rgba(10, 10, 10, 0) 62%), linear-gradient(to right, rgba(10, 10, 10, .55) 0%, rgba(10, 10, 10, .2) 50%, rgba(10, 10, 10, 0) 75%), radial-gradient(120% 90% at 50% 40%, transparent 55%, rgba(0, 0, 0, .45) 100%); } .viewfinder { position: absolute; inset: clamp(14px, 1.8vw, 26px); pointer-events: none; z-index: 1; animation: fade-in 1.2s ease calc(var(--intro-delay) + .3s) both; --osd: rgba(243, 241, 236, .82); } .vf-c { position: absolute; width: 22px; height: 22px; border: 0 solid rgba(243, 241, 236, .6); } .vf-c--tl { top: 0; left: 0; border-top-width: 1.5px; border-left-width: 1.5px; } .vf-c--tr { top: 0; right: 0; border-top-width: 1.5px; border-right-width: 1.5px; } .vf-c--bl { bottom: 0; left: 0; border-bottom-width: 1.5px; border-left-width: 1.5px; } .vf-c--br { bottom: 0; right: 0; border-bottom-width: 1.5px; border-right-width: 1.5px; } .viewfinder .mono { font-size: 11.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--osd); text-shadow: 0 1px 10px rgba(0, 0, 0, .5); } .vf-top { position: absolute; top: 14px; left: 30px; right: 30px; display: flex; justify-content: space-between; align-items: center; gap: 20px; } .vf-top > span { display: inline-flex; align-items: center; gap: 10px; white-space: nowrap; } .vf-tc { font-variant-numeric: tabular-nums; margin-left: 8px; } .vf-bat { display: inline-flex; gap: 2px; padding: 2px; border: 1px solid var(--osd); border-radius: 2px; position: relative; margin-left: 6px; } .vf-bat::after { content: ""; position: absolute; right: -4px; top: 3px; width: 2px; height: 5px; background: var(--osd); } .vf-bat i { width: 4px; height: 7px; background: var(--osd); } .vf-bat i:last-child { opacity: .25; } .vf-level { position: absolute; top: 20%; left: 50%; width: min(420px, 34%); height: 1px; transform: translateX(-50%); background: linear-gradient(90deg, rgba(243, 241, 236, .5) 0 40%, transparent 40% 60%, rgba(243, 241, 236, .5) 60%); } .vf-focus { position: absolute; top: 19%; left: 64%; width: 140px; height: 84px; transform: translate(-50%, -50%); animation: af-lock .9s var(--ease) calc(var(--intro-delay) + 1s) both; } .vf-focus i { position: absolute; width: 16px; height: 16px; border: 0 solid #7dff7a; } .vf-focus i:nth-child(1) { left: 0; top: 0; border-left-width: 2px; border-top-width: 2px; } .vf-focus i:nth-child(2) { right: 0; top: 0; border-right-width: 2px; border-top-width: 2px; } .vf-focus i:nth-child(3) { left: 0; bottom: 0; border-left-width: 2px; border-bottom-width: 2px; } .vf-focus i:nth-child(4) { right: 0; bottom: 0; border-right-width: 2px; border-bottom-width: 2px; } @keyframes af-lock { 0% { opacity: 0; transform: translate(-50%, -50%) scale(1.5); } 60% { opacity: 1; transform: translate(-50%, -50%) scale(.94); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } } .vf-audio { position: absolute; left: 30px; top: 64px; display: flex; gap: 10px; } .vf-audio span { display: flex; flex-direction: column; align-items: center; gap: 7px; font-size: 9.5px !important; } .vf-audio b { width: 6px; height: 96px; border-radius: 1px; background: linear-gradient(to top, #3ddc6b 0 62%, #f5d33c 62% 84%, var(--accent) 84%); clip-path: inset(38% 0 0 0); animation: meter 2.4s steps(1) infinite; } .vf-audio span:nth-child(2) b { animation-duration: 1.9s; animation-delay: -.7s; } @keyframes meter { 0% { clip-path: inset(42% 0 0 0); } 8% { clip-path: inset(30% 0 0 0); } 16% { clip-path: inset(36% 0 0 0); } 24% { clip-path: inset(22% 0 0 0); } 32% { clip-path: inset(40% 0 0 0); } 40% { clip-path: inset(28% 0 0 0); } 48% { clip-path: inset(18% 0 0 0); } 56% { clip-path: inset(33% 0 0 0); } 64% { clip-path: inset(45% 0 0 0); } 72% { clip-path: inset(26% 0 0 0); } 80% { clip-path: inset(35% 0 0 0); } 90% { clip-path: inset(24% 0 0 0); } } .vf-histo { position: absolute; right: 30px; bottom: 44px; width: 220px; height: 84px; padding: 6px; border: 1px solid rgba(243, 241, 236, .35); background: rgba(0, 0, 0, .35); backdrop-filter: blur(4px); } .vf-histo svg { width: 100%; height: 100%; } .vf-histo path { fill: rgba(243, 241, 236, .62); transition: d .25s linear; } .vf-scroll { position: absolute; bottom: 12px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 10px; } .vf-scroll__line { position: relative; width: 40px; height: 1px; background: rgba(243, 241, 236, .25); overflow: hidden; } .vf-scroll__line::after { content: ""; position: absolute; inset: 0; background: var(--fg); animation: scroll-line 2.2s var(--ease-io) infinite; } @keyframes scroll-line { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } } .hero__content { position: relative; z-index: 2; padding: 0 clamp(28px, 4.4vw, 64px) clamp(52px, 8vh, 96px); will-change: opacity, transform; } .hero__eyebrow { font-weight: 400; display: flex; justify-content: space-between; gap: 16px; max-width: 980px; font-size: 12px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg); text-shadow: 0 1px 12px rgba(0, 0, 0, .45); margin-bottom: clamp(16px, 2.4vh, 28px); animation: fade-in 1s ease calc(var(--intro-delay) + .1s) both; } .hero__title { font-size: clamp(3.1rem, 9.8vw, 12rem); font-weight: 600; letter-spacing: -.058em; line-height: .9; } .hero__title .line { display: block; overflow: hidden; padding-bottom: .06em; margin-bottom: -.06em; } .hero__title .line > span { display: inline-block; transform: translateY(108%); animation: line-up 1.25s var(--ease) calc(var(--intro-delay) + var(--i, 0) * .09s) forwards; } .hero__title .line:nth-child(2) > span { --i: 1; } .hero__title em { font-size: 1.08em; letter-spacing: -.03em; padding-right: .05em; } @keyframes line-up { to { transform: none; } } .hero__bottom { display: flex; flex-direction: column; align-items: flex-start; gap: 26px; margin-top: clamp(24px, 4.5vh, 52px); animation: rise 1.2s var(--ease) calc(var(--intro-delay) + .35s) both; } @keyframes rise { from { opacity: 0; transform: translateY(24px); } to { opacity: 1; transform: none; } } .hero__lead { max-width: 44ch; color: var(--fg-2); font-size: clamp(1rem, 1.2vw, 1.15rem); line-height: 1.5; } .hero__actions { display: flex; gap: 10px; flex-wrap: wrap; } /* ---------- sekcje ---------- */ .section { padding-block: clamp(96px, 12vw, 190px); } .section__head { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 360px); column-gap: 48px; row-gap: 20px; align-items: end; margin-bottom: clamp(40px, 5.5vw, 80px); } .section__index { grid-column: 1 / -1; font-size: 13px; color: var(--muted); } .section__title { font-size: clamp(2.7rem, 7.6vw, 8.4rem); font-weight: 600; letter-spacing: -.056em; line-height: .92; } .section__title em, .contact__title em, .footer__cta em { font-size: 1.06em; letter-spacing: -.03em; } .section__aside { color: var(--fg-2); font-size: 15px; line-height: 1.55; padding-bottom: .6em; } .section__stat { margin-top: 14px; color: var(--muted); font-size: 12px; text-transform: uppercase; letter-spacing: .07em; } .empty { padding-block: clamp(80px, 10vw, 160px); border-bottom: 1px solid var(--line); } .empty__text { color: var(--fg-2); max-width: 46ch; margin-top: 28px; font-size: 1.1rem; } /* ---------- FAQ ---------- */ .faq__list { border-top: 1px solid var(--line); } .faq__list details { border-bottom: 1px solid var(--line); } .faq__list summary { list-style: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 24px; padding: clamp(18px, 2.2vw, 28px) 0; font-size: clamp(1.15rem, 2vw, 1.7rem); font-weight: 500; letter-spacing: -.025em; transition: color .25s; } .faq__list summary::-webkit-details-marker { display: none; } .faq__list summary::after { content: "+"; font: 400 1.4em/1 var(--mono); color: var(--muted); transition: transform .35s var(--ease), color .25s; } .faq__list details[open] summary::after { transform: rotate(45deg); color: var(--accent); } .faq__list summary:hover { color: var(--fg-2); } .faq__list details p { max-width: 70ch; color: var(--fg-2); padding: 0 0 clamp(20px, 2.4vw, 30px); line-height: 1.6; } .contact__area { color: var(--muted); font-size: 14px; margin-bottom: 28px; } /* treść portfolio wstawiona przez serwer (dla wyszukiwarek i bez JavaScriptu) — z JS zastępuje ją galeria */ .prerender { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; } .prerender a { display: block; } .prerender img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; border-radius: var(--radius); background: var(--bg-3); } .prerender span { display: block; margin-top: 8px; font-weight: 500; } .prerender small { display: block; color: var(--muted); font: 12px var(--mono); margin-top: 4px; } .js .prerender { display: none; } /* ---------- kategorie: menu kamery ---------- */ .osd-menu { display: flex; align-items: stretch; margin-bottom: 14px; min-height: 54px; border: 1px solid var(--line-2); border-radius: 6px; background: rgba(243, 241, 236, .025); font-size: 12.5px; letter-spacing: .07em; text-transform: uppercase; } .osd-menu__k { display: flex; align-items: center; padding: 0 18px; color: var(--muted); border-right: 1px solid var(--line); } .osd-menu__arrow { width: 44px; display: grid; place-items: center; color: var(--muted); font-size: 10px; transition: color .2s, background .2s; } .osd-menu__arrow:hover { color: var(--fg); background: rgba(243, 241, 236, .05); } .osd-menu__arrow + .filters, .filters + .osd-menu__arrow { border-left: 1px solid var(--line); } .osd-menu.is-single .osd-menu__arrow { display: none; } .filters { display: flex; flex: 1; min-width: 0; overflow-x: auto; scrollbar-width: none; } .filters::-webkit-scrollbar { display: none; } .filter { display: inline-flex; align-items: center; gap: 8px; padding: 0 20px; white-space: nowrap; border-right: 1px solid var(--line); color: var(--fg-2); text-transform: inherit; letter-spacing: inherit; transition: background .25s, color .25s, box-shadow .25s; } .filter sup { font-size: 10px; color: var(--muted); top: 0; } .filter:hover { color: var(--fg); background: rgba(243, 241, 236, .04); } .filter.is-active { color: #ff7a63; background: rgba(255, 59, 31, .13); box-shadow: inset 0 -2px 0 var(--accent); } .filter.is-active sup { color: #ff7a63; } .view-toggle { display: flex; flex-shrink: 0; margin-left: auto; border-left: 1px solid var(--line); } .view-toggle button { display: inline-flex; align-items: center; gap: 8px; padding: 0 18px; font-size: 12px; letter-spacing: .07em; text-transform: uppercase; color: var(--muted); transition: background .25s, color .25s; } .view-toggle button + button { border-left: 1px solid var(--line); } .view-toggle svg { width: 12px; height: 12px; fill: currentColor; } .view-toggle button.is-active { color: var(--fg); background: rgba(243, 241, 236, .06); } /* ---------- siatka (układ wyliczany w JS) ---------- */ .grid { position: relative; } .grid.is-animated { transition: height .9s var(--ease); } .card { position: absolute; left: 0; top: 0; width: var(--w); height: var(--h); transform: translate3d(var(--x), var(--y), 0) scale(var(--s, 1)); opacity: var(--o, 1); } .grid.is-animated .card { transition: transform .9s var(--ease), width .9s var(--ease), height .9s var(--ease), opacity .5s ease; } .card.is-out { --s: .94; --o: 0; pointer-events: none; } .card__link { position: relative; display: block; width: 100%; height: 100%; overflow: hidden; border-radius: var(--radius); isolation: isolate; transition: clip-path 1.2s var(--ease) var(--d, 0s); } .js .card:not(.is-in) .card__link { clip-path: inset(100% 0 0 0 round var(--radius)); } .card.is-in .card__link { clip-path: inset(0 0 0 0 round var(--radius)); } .card__media { position: absolute; inset: 0; background-color: var(--c, var(--bg-3)); background-size: cover; background-position: center; } .card__media::before { content: ""; position: absolute; inset: 0; backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); } .card__media > img, .card__media > video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .card__media > img { opacity: 0; transform: scale(1.12); transition: opacity .9s ease, transform 1.6s var(--ease); } .card__media > img.is-loaded { opacity: 1; transform: scale(1); } .card.is-in .card__media > img.is-loaded { transform: scale(1); } .card__link:hover .card__media > img.is-loaded { transform: scale(1.04); } /* kafel filmu */ .vcard__preview { opacity: 0; transition: opacity .5s ease; } .vcard.is-playing .vcard__preview { opacity: 1; } .vcard__shade { position: absolute; inset: 0; z-index: 1; background: linear-gradient(to top, rgba(0, 0, 0, .78) 0%, rgba(0, 0, 0, .25) 38%, rgba(0, 0, 0, 0) 60%), linear-gradient(to bottom, rgba(0, 0, 0, .35), transparent 25%); transition: opacity .5s; } .vcard__top, .vcard__info { position: absolute; left: 0; right: 0; z-index: 2; display: flex; justify-content: space-between; gap: 14px; padding: clamp(14px, 1.5vw, 22px); } .vcard__top { top: 0; align-items: center; font-size: 11px; letter-spacing: .08em; color: rgba(243, 241, 236, .8); } .vcard__badges { display: flex; gap: 6px; } .vcard__badges b { font-weight: 400; padding: 3px 7px; border: 1px solid rgba(243, 241, 236, .35); border-radius: 4px; font-size: 10px; background: rgba(10, 10, 10, .25); backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px); } .vcard__info { bottom: 0; align-items: flex-end; } .vcard__text { display: flex; flex-direction: column; gap: 6px; min-width: 0; } .vcard__title { font-size: clamp(1.05rem, 1.55vw, 1.6rem); font-weight: 500; letter-spacing: -.025em; line-height: 1.12; transition: transform .6s var(--ease); } .vcard__meta { font-size: 11px; letter-spacing: .07em; text-transform: uppercase; color: rgba(243, 241, 236, .68); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .vcard__dur { font-size: 11px; letter-spacing: .06em; color: rgba(243, 241, 236, .85); flex-shrink: 0; display: inline-flex; align-items: center; gap: 8px; } .vcard__dur::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--accent); opacity: 0; transition: opacity .3s; } .vcard.is-playing .vcard__dur::before { opacity: 1; animation: rec 1.6s infinite; } .vcard.is-small .vcard__meta { display: none; } .vcard.is-small .vcard__title { font-size: 1rem; } .vcard.is-small .vcard__top [data-idx] { display: none; } .vcard__link:hover .vcard__title { transform: translateY(-3px); } /* kafel zdjęcia */ .pcard__cap { position: absolute; left: 12px; bottom: 12px; right: 12px; z-index: 2; font-size: 13px; color: #fff; text-shadow: 0 1px 12px rgba(0, 0, 0, .6); opacity: 0; transform: translateY(6px); transition: opacity .4s, transform .5s var(--ease); } .card__link:hover .pcard__cap { opacity: 1; transform: none; } .more { display: flex; justify-content: center; margin-top: clamp(32px, 4vw, 56px); } .more:not(:has(button:not([hidden]))) { display: none; } /* ---------- widok listy (indeks filmów) ---------- */ .index-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .index-row a { display: grid; grid-template-columns: 56px minmax(0, 2.4fr) minmax(0, 1.2fr) minmax(0, 1fr) 64px 72px; gap: 20px; align-items: baseline; padding: clamp(18px, 2vw, 28px) 0; border-bottom: 1px solid var(--line); transition: padding .6s var(--ease), color .35s; } .index-row .t { font-size: clamp(1.3rem, 2.7vw, 2.6rem); font-weight: 500; letter-spacing: -.04em; line-height: 1.1; } .index-row .mono { font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--muted); } .index-row .c { color: var(--fg-2); } .index-row .d { text-align: right; } .index-list:hover .index-row a { color: rgba(243, 241, 236, .35); } .index-list .index-row a:hover { color: var(--fg); padding-left: 18px; } .float-preview { position: fixed; left: 0; top: 0; z-index: 40; pointer-events: none; width: min(30vw, 440px); aspect-ratio: var(--ar, 16 / 9); max-height: 60vh; border-radius: var(--radius); overflow: hidden; background: var(--bg-3) center / cover; opacity: 0; transition: opacity .35s, width .4s var(--ease); } .float-preview.is-on { opacity: 1; } .float-preview video { width: 100%; height: 100%; object-fit: cover; } /* ---------- o mnie ---------- */ .about__grid { display: grid; grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); gap: clamp(40px, 6vw, 120px); align-items: end; } .about__statement { font-size: clamp(1.65rem, 3.3vw, 3.5rem); line-height: 1.12; letter-spacing: -.04em; font-weight: 500; } .js .about__statement .w { opacity: .16; transition: opacity .4s ease; } .js .about__statement .w.is-lit { opacity: 1; } .about__side p { color: var(--fg-2); font-size: clamp(1rem, 1.15vw, 1.12rem); max-width: 44ch; } .stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin: 40px 0 0; padding-top: 26px; border-top: 1px solid var(--line); } .stats dt { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .07em; } .stats dd { margin: 8px 0 0; font-size: clamp(2.3rem, 4.2vw, 3.8rem); font-weight: 600; letter-spacing: -.055em; line-height: 1; font-variant-numeric: tabular-nums; } .services { margin-top: clamp(90px, 11vw, 170px); } .services__list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); } .services__list li { position: relative; isolation: isolate; display: grid; grid-template-columns: 80px minmax(0, 1.3fr) minmax(0, 1fr); gap: 24px; align-items: baseline; padding: clamp(22px, 2.6vw, 38px) clamp(0px, 1vw, 16px); border-bottom: 1px solid var(--line); transition: color .5s var(--ease); } .services__list li::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--fg); transform: scaleY(0); transform-origin: bottom; transition: transform .6s var(--ease); } .services__list li:hover { color: var(--bg); } .services__list li:hover::before { transform: scaleY(1); } .services__list .mono { font-size: 12px; color: var(--muted); transition: color .5s; } .services__list h4 { font-size: clamp(1.5rem, 3.3vw, 3.1rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.05; transition: transform .6s var(--ease); } .services__list li:hover h4 { transform: translateX(10px); } .services__list p { color: var(--muted); max-width: 42ch; transition: color .5s; } .services__list li:hover p, .services__list li:hover .mono { color: rgba(10, 10, 10, .7); } .process { margin-top: clamp(80px, 10vw, 150px); } .process__list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 14px; } .process__list li { border-top: 1px solid var(--line-2); padding-top: 20px; } .process__list .mono { font-size: 12px; color: var(--accent); } .process__list h4 { font-size: 1.35rem; font-weight: 500; letter-spacing: -.03em; margin: 16px 0 8px; } .process__list p { color: var(--muted); font-size: 14.5px; } /* ---------- kontakt ---------- */ .contact { border-top: 1px solid var(--line); } .contact__head .section__index { display: block; margin-bottom: 20px; } .contact__title { font-size: clamp(2.9rem, 8.6vw, 9.6rem); font-weight: 600; letter-spacing: -.058em; line-height: .92; } .contact__grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.55fr); gap: clamp(48px, 7vw, 130px); margin-top: clamp(56px, 7vw, 110px); } .contact__aside { display: flex; flex-direction: column; align-items: flex-start; } .contact__mail { font-size: clamp(1.45rem, 2.5vw, 2.4rem); font-weight: 500; letter-spacing: -.035em; line-height: 1.2; background: linear-gradient(var(--fg), var(--fg)) left bottom / 0 1px no-repeat, linear-gradient(var(--line-2), var(--line-2)) left bottom / 100% 1px no-repeat; padding-bottom: 6px; transition: background-size .6s var(--ease); word-break: break-word; } .contact__mail:hover { background-size: 100% 1px, 100% 1px; } .copy-btn { margin-top: 16px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 8px 0; transition: color .3s; } .copy-btn:hover { color: var(--fg); } .socials-wrap { margin-top: 44px; } .socials-wrap:not(:has(a:not([href=""]))) { display: none; } .socials { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; } .socials li:has(a[href=""]) { display: none; } .socials a { display: inline-flex; align-items: center; height: 40px; padding: 0 16px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 14px; transition: background .3s, color .3s; } .socials a:hover { background: var(--fg); color: var(--bg); } .contact__note { margin-top: auto; padding-top: 44px; color: var(--muted); max-width: 34ch; font-size: 14.5px; } .form { position: relative; } .form__row--2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 32px; } .field { display: flex; flex-direction: column; gap: 8px; margin: 0 0 30px; padding: 0; border: 0; min-width: 0; } .field > label, .field > legend { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); padding: 0; } .field > legend { margin-bottom: 14px; } .field input, .field textarea { width: 100%; background: transparent; color: var(--fg); border: 0; border-bottom: 1px solid var(--line-2); border-radius: 0; font-size: clamp(1.1rem, 1.4vw, 1.35rem); letter-spacing: -.015em; padding: 8px 0 12px; outline: none; transition: border-color .35s; } .field textarea { resize: vertical; min-height: 140px; line-height: 1.45; } .field input:focus, .field textarea:focus { border-color: var(--fg); } .field ::placeholder { color: rgba(243, 241, 236, .26); } .field.has-error input, .field.has-error textarea { border-color: var(--accent); } .field__error { color: var(--accent); font-size: 13px; } .field__error:empty { display: none; } .chips { display: flex; flex-wrap: wrap; gap: 8px; } .chip { position: relative; } .chip input { position: absolute; opacity: 0; width: 1px; height: 1px; pointer-events: none; } .chip span { display: inline-flex; align-items: center; height: 42px; padding: 0 18px; border: 1px solid var(--line-2); border-radius: 999px; font-size: 14px; cursor: pointer; user-select: none; transition: background .3s, color .3s, border-color .3s; } .chip span:hover { border-color: var(--fg); } .chip input:checked + span { background: var(--fg); color: var(--bg); border-color: var(--fg); } .chip input:focus-visible + span { outline: 2px solid var(--fg); outline-offset: 2px; } .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form__foot { display: flex; flex-direction: column; align-items: flex-start; gap: 22px; margin-top: 8px; } .consent { display: flex; gap: 14px; align-items: flex-start; font-size: 14px; color: var(--fg-2); cursor: pointer; max-width: 60ch; } .consent a { text-decoration: underline; text-underline-offset: 3px; } .consent input { appearance: none; -webkit-appearance: none; flex-shrink: 0; margin: 1px 0 0; width: 20px; height: 20px; border: 1px solid var(--line-2); border-radius: 5px; cursor: pointer; display: grid; place-items: center; transition: background .25s, border-color .25s; } .consent input::after { content: ""; width: 10px; height: 6px; border-left: 2px solid var(--bg); border-bottom: 2px solid var(--bg); transform: rotate(-45deg) translate(1px, -1px) scale(0); transition: transform .3s var(--ease); } .consent input:checked { background: var(--fg); border-color: var(--fg); } .consent input:checked::after { transform: rotate(-45deg) translate(1px, -1px) scale(1); } .has-error .consent input, .consent.has-error input { border-color: var(--accent); } .btn--submit { height: 64px; padding: 0 10px 0 30px; gap: 18px; font-size: 16px; background: var(--fg); color: var(--bg); } .btn--submit .btn__icon { width: 46px; height: 46px; background: var(--bg); color: var(--fg); } .btn--submit .btn__icon svg { fill: none; width: 20px; height: 20px; } .btn--submit:hover .btn__icon { transform: translateX(4px); } .form.is-sending .btn--submit { pointer-events: none; opacity: .75; } .form.is-sending .btn--submit .btn__icon svg { display: none; } .form.is-sending .btn--submit .btn__icon::after { content: ""; width: 18px; height: 18px; border-radius: 50%; border: 2px solid currentColor; border-right-color: transparent; animation: spin .7s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .form__status { margin-top: 22px; } .form__status:empty { display: none; } .form__status .notice { padding: 18px 20px; border: 1px solid var(--line-2); border-radius: 10px; color: var(--fg-2); font-size: 15px; } .form__status .notice a { color: var(--fg); text-decoration: underline; text-underline-offset: 3px; } .form__status .notice--error { border-color: rgba(255, 59, 31, .5); } .form-success { padding: clamp(28px, 4vw, 48px); border: 1px solid var(--line-2); border-radius: 14px; animation: rise .9s var(--ease) both; } .form-success__check { width: 64px; height: 64px; border-radius: 50%; background: var(--fg); color: var(--bg); display: grid; place-items: center; margin-bottom: 28px; } .form-success__check svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-dasharray: 30; stroke-dashoffset: 30; animation: draw .7s var(--ease) .25s forwards; } @keyframes draw { to { stroke-dashoffset: 0; } } .form-success h3 { font-size: clamp(1.8rem, 3.4vw, 3rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.05; } .form-success p { color: var(--fg-2); margin: 14px 0 28px; max-width: 46ch; } /* ---------- stopka ---------- */ .footer { border-top: 1px solid var(--line); padding-top: clamp(80px, 10vw, 150px); overflow: hidden; } .footer__top { display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; flex-wrap: wrap; } .footer__cta { font-size: clamp(1.7rem, 3.6vw, 3.4rem); font-weight: 500; letter-spacing: -.045em; line-height: 1.05; max-width: 17ch; } .footer__logo { margin-top: clamp(56px, 8vw, 130px); color: var(--fg); } .footer__logo svg { width: 100%; height: auto; } .js .footer__logo { opacity: 0; transform: translateY(12%); transition: opacity 1.2s ease, transform 1.4s var(--ease); } .js .footer__logo.is-in { opacity: 1; transform: none; } .footer__bottom { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px 28px; margin-top: clamp(28px, 3vw, 44px); padding: 26px 0 34px; border-top: 1px solid var(--line); font-size: 12px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); } .footer__bottom a { transition: color .3s; } .footer__bottom a:hover { color: var(--fg); } /* ---------- okna dialogowe ---------- */ dialog { padding: 0; margin: 0; border: 0; width: 100%; height: 100%; max-width: none; max-height: none; background: transparent; color: var(--fg); overflow: hidden; } dialog::backdrop { background: rgba(6, 6, 6, .96); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); } dialog[open] { animation: dlg-in .55s var(--ease) both; } dialog[open]::backdrop { animation: fade-in .4s ease both; } @keyframes dlg-in { from { opacity: 0; transform: translateY(18px) scale(.985); } to { opacity: 1; transform: none; } } /* odtwarzacz */ .player[open] { display: flex; flex-direction: column; } .player__top, .lightbox__top { display: flex; align-items: center; justify-content: space-between; gap: 16px; height: var(--header-h); padding: 0 var(--pad); flex-shrink: 0; } .player__crumb { display: flex; gap: 14px; font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); } .player__crumb span:empty { display: none; } .player__body { flex: 1; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--pad) 32px; display: flex; flex-direction: column; gap: clamp(20px, 3vh, 36px); } .player__stage { display: grid; place-items: center; flex-shrink: 0; } .player__frame { --ar: 1.7778; --maxh: calc(100dvh - var(--header-h) - 150px); position: relative; width: min(100%, calc(var(--maxh) * var(--ar))); aspect-ratio: var(--ar); background: #000; border-radius: var(--radius); overflow: hidden; } .player__frame video { width: 100%; height: 100%; object-fit: contain; background: #000; } /* film z YouTube: ramka youtube-nocookie zamiast własnych kontrolek */ .player__yt { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; background: #000; } .player__frame.is-youtube video, .player__frame.is-youtube .player__big, .player__frame.is-youtube .player__spinner, .player__frame.is-youtube .controls { display: none; } .player__frame:fullscreen { width: 100%; height: 100%; border-radius: 0; aspect-ratio: auto; } .player__big { position: absolute; inset: 0; margin: auto; width: 88px; height: 88px; border-radius: 50%; z-index: 2; display: grid; place-items: center; background: rgba(243, 241, 236, .94); color: #000; transition: transform .45s var(--ease), opacity .35s; } .player__big svg { width: 30px; height: 30px; fill: currentColor; margin-left: 4px; } .player__big:hover { transform: scale(1.06); } .player__frame.is-playing .player__big { opacity: 0; transform: scale(.8); pointer-events: none; } .player__spinner { position: absolute; inset: 0; margin: auto; width: 46px; height: 46px; border-radius: 50%; border: 2px solid rgba(255, 255, 255, .25); border-top-color: #fff; animation: spin .8s linear infinite; opacity: 0; pointer-events: none; transition: opacity .3s; z-index: 2; } .player__frame.is-waiting .player__spinner { opacity: 1; } .controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; align-items: center; gap: 10px; padding: 48px 14px 12px; background: linear-gradient(to top, rgba(0, 0, 0, .75), transparent); transition: opacity .45s, transform .45s var(--ease); } .player__frame.is-idle .controls { opacity: 0; transform: translateY(10px); } .player__frame.is-idle { cursor: none; } .ctl { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; color: #fff; flex-shrink: 0; transition: background .25s; } .ctl:hover { background: rgba(255, 255, 255, .14); } .ctl svg { width: 20px; height: 20px; fill: currentColor; } .i-pause, .i-mute { display: none !important; } .is-playing .i-play { display: none !important; } .is-playing .i-pause { display: block !important; } .is-muted .i-vol { display: none !important; } .is-muted .i-mute { display: block !important; } .ctl-time { font-size: 12px; color: rgba(255, 255, 255, .85); font-variant-numeric: tabular-nums; min-width: 42px; text-align: center; } .bar { position: relative; flex: 1; height: 30px; display: flex; align-items: center; cursor: pointer; touch-action: none; } .bar__track { position: relative; width: 100%; height: 3px; border-radius: 3px; background: rgba(255, 255, 255, .22); overflow: hidden; transition: height .2s; } .bar:hover .bar__track, .bar.is-drag .bar__track { height: 5px; } .bar__buf, .bar__fill { position: absolute; left: 0; top: 0; bottom: 0; width: 0; } .bar__buf { background: rgba(255, 255, 255, .3); } .bar__fill { background: var(--accent); } .bar__tip { position: absolute; bottom: 30px; left: 0; transform: translateX(-50%); padding: 4px 7px; border-radius: 4px; background: #fff; color: #000; font-size: 11px; opacity: 0; pointer-events: none; transition: opacity .2s; } .bar:hover .bar__tip, .bar.is-drag .bar__tip { opacity: 1; } .vol { width: 84px; accent-color: #fff; cursor: pointer; } .player__info { width: 100%; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px 56px; align-items: start; } .player__client { font-size: 12px; text-transform: uppercase; letter-spacing: .08em; color: var(--muted); margin-bottom: 8px; } .player__client:empty { display: none; } .player__title { font-size: clamp(1.7rem, 3.2vw, 3rem); font-weight: 600; letter-spacing: -.045em; line-height: 1.02; } .player__meta { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 16px 20px; margin: 0; } .player__meta dt { font-family: var(--mono); font-size: 11px; text-transform: uppercase; letter-spacing: .07em; color: var(--muted); } .player__meta dd { margin: 4px 0 0; font-size: 15px; color: var(--fg-2); } .player__desc { grid-column: 1 / -1; color: var(--fg-2); white-space: pre-line; max-width: 72ch; } .player__desc:empty { display: none; } .player__nav { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; padding-top: 6px; } .player__nav a { text-decoration: none; } /* film pionowy: opis obok wideo */ @media (min-width: 900px) { .player.is-portrait .player__body { flex-direction: row; align-items: center; justify-content: center; gap: clamp(32px, 5vw, 80px); } .player.is-portrait .player__frame { --maxh: calc(100dvh - var(--header-h) - 40px); } /* pionowa ramka YouTube nie ma własnych wymiarów (jak