html { --mobile-scale: 0.51; --mobile-padding-offset: 1.29; --spotlight-radius: 560px; --dim-strength: 0.58; --dim-radius: 700px; } body { --swatch-1: rgba(0, 0, 0, 0.85); --swatch-2: rgba(0, 0, 0, 0.75); --swatch-3: rgba(0, 0, 0, 0.6); --swatch-4: rgba(0, 0, 0, 0.4); --swatch-5: rgba(0, 0, 0, 0.25); --swatch-6: rgba(149, 90, 64, 0.85); --colorfilter-color: rgb(3,218,138); --colorfilter-color-opacity: 0.91; --colorfilter-mix: hard-light; --colorfilter-grayscale: 0.5; --swatch-7: rgba(129, 61, 32, 0.85); } body.mobile { } a:active, .linked:active, .zoomable::part(media):active { opacity: 0.7; } .page a.active { } sub { position: relative; vertical-align: baseline; top: 0.3em; } sup { position: relative; vertical-align: baseline; top: -0.4em; } .small-caps { font-variant: small-caps; text-transform: lowercase; } ol { margin: 0; padding: 0 0 0 2.5em; } ul { margin: 0; padding: 0 0 0 2.0em; } ul.lineated { margin: 0; padding: 0; list-style-type: none; margin: 0 0 0 3em; text-indent: -3em; } blockquote { margin: 0; padding: 0 0 0 2em; } hr { background: var(--ink); border: 0; height: 1px; display: block; margin-top: 0.4rem; margin-bottom: 0.5rem; } .content { } bodycopy { font-size: 4.95rem; font-weight: 400; color: rgba(129, 61, 32, 0.85); font-family: "Neue Haas Grotesk"; font-style: normal; line-height: 1.5; letter-spacing: 0; display: block; } .mobile bodycopy { font-size: 5.00rem; } bodycopy a { color: rgba(129, 61, 32, 0.85); border-bottom: 0px solid rgba(127, 127, 127, 0.2); text-decoration: underline; } bodycopy a:hover { } h1 { font-size: 5.15rem; color: rgba(129, 61, 32, 0.85); font-family: "Instrument Serif";; font-style: normal; line-height: 0.95; letter-spacing: 0.088em; display: inline-block; margin: 0; font-weight: 400; } .mobile h1 { font-size: 9.15rem; } h1 a { color: rgba(129, 61, 32, 0.85); border-bottom: 0px solid rgba(127, 127, 127, 0.2); text-decoration: underline; } h1 a:hover { } h2 { font-size: 1.20rem; font-weight: 500; color: rgba(129, 61, 32, 0.85); font-family: "Favorit Variable"; font-style: normal; line-height: 3.15; letter-spacing: 0; margin: 0; font-variation-settings: 'slnt' 0; } .mobile h2 { font-size: 3.10rem; } h2 a { color: rgba(129, 61, 32, 0.85); border-bottom: 0px solid rgba(127, 127, 127, 0.2); text-decoration: underline; } h2 a:hover { } .caption { font-size: 1.1rem; font-weight: 500; color: rgba(129, 61, 32, 0.85); font-family: "Favorit Variable"; font-style: normal; line-height: 1.2; letter-spacing: 0; display: block; font-variation-settings: 'slnt' 0; } .mobile .caption { font-size: 0.90rem; } .caption a { color: rgba(129, 61, 32, 0.85); border-bottom: 0px solid rgba(127, 127, 127, 0.2); text-decoration: underline; } .caption a:hover { } media-item .caption { margin-top: .5em; } gallery-grid .caption, gallery-columnized .caption, gallery-justify .caption { margin-bottom: 2em; } [thumbnail-index] .caption { text-align: center; } [thumbnail-index] .caption .tags { margin-top: 0.25em; } .page { justify-content: flex-start; background-color: rgba(0, 0, 0, 0.85); } .page-content { width: 100%; padding: 1.5rem; text-align: center; padding-top: 2.7rem; } .mobile [id] .page-layout { padding: 0; max-width: 100%; } .mobile [id] .page-content { border: 0; border-radius: 0; } .page-layout { align-items: flex-start; max-width: 100%; } media-item::part(media) { border: 0; padding: 0; border-width: 0rem; border-color: rgba(0, 0, 0, 0.2); border-style: solid; border-radius: 0.3rem; filter: drop-shadow(0.3rem 0.3rem 0.5rem rgba(0, 0, 0, 0.12)); will-change: filter; } .quick-view { height: 100%; width: 100%; padding: 3rem; margin-top: auto; margin-right: auto; margin-bottom: auto; margin-left: auto; } .quick-view-background { background-color: rgba(0, 0, 0, 0.05); } .quick-view .caption { color: rgba(255, 255, 255, 1.0); padding: 20px 0; text-align: center; transition: 100ms opacity ease-in-out; position: absolute; bottom: 0; left: 0; right: 0; } .quick-view .caption-background { padding: 0.5rem 1rem; display: inline-block; background: rgba(0, 0, 0, 0.5); border-radius: .5rem; text-align: left; max-width: 50rem; } .mobile .quick-view { width: 100%; height: 100%; margin: 0; padding: 10px; } .mobile .quick-view .caption { padding: 10px 0; } .nadpis { --text-style: "nadpis"; font-size: 4.90rem; color: rgba(129, 61, 32, 0.85); font-family: "Instrument Serif"; font-style: normal; line-height: 10; letter-spacing: 0.220em; display: block; font-weight: 400; } .mobile .nadpis { font-size: 5.30rem; } .nadpis a { color: rgba(129, 61, 32, 0.85); border-bottom: 0px solid rgba(127, 127, 127, 0.2); text-decoration: none; } .nadpis a:hover { } .bodycopy-popisky { --text-style: "Bodycopy popisky"; font-size: 2.40rem; font-weight: 400; color: rgba(129, 61, 32, 0.85); font-family: "Neue Haas Grotesk"; font-style: normal; line-height: 1.5; letter-spacing: 0; display: block; } .mobile .bodycopy-popisky { font-size: 3.80rem; } .bodycopy-popisky a { color: rgba(129, 61, 32, 0.85); border-bottom: 0px solid rgba(127, 127, 127, 0.2); text-decoration: underline; } .bodycopy-popisky a:hover { } .heading-3 { --text-style: "Heading 3"; font-size: 4.40rem; font-weight: 400; color: rgba(129, 61, 32, 0.85); font-family: "Instrument Serif"; font-style: normal; line-height: 1.6; letter-spacing: 0.073em; display: block; } .mobile .heading-3 { font-size: 4.20rem; } .heading-3 a { color: rgba(129, 61, 32, 0.85); border-bottom: 0px solid rgba(127, 127, 127, 0.2); text-decoration: none; } .heading-3 a:hover { } .bodycopy-texty { --text-style: "Bodycopy texty"; font-size: 2.00rem; font-weight: 400; color: rgba(129, 61, 32, 0.85); font-family: "Neue Haas Grotesk"; font-style: normal; line-height: 1.5; letter-spacing: 0; display: block; } .mobile .bodycopy-texty { font-size: 5.00rem; } .bodycopy-texty a { color: rgba(129, 61, 32, 0.85); border-bottom: 0px solid rgba(127, 127, 127, 0.2); text-decoration: underline; } .bodycopy-texty a:hover { } .mobile .quick-view .caption-background { max-width: 100vw; } ::part(slideshow-nav) { --button-size: 30px; --button-inset: 20px; --button-icon-color: rgba(230, 220, 210, 0.95); --button-icon-stroke-width: 1.5px; --button-icon-stroke-linecap: none; --button-background-color: rgba(87, 87, 87, 0); --button-background-radius: 50%; --button-active-opacity: 0.7; } gallery-slideshow::part(slideshow-nav) { --button-inset: 15px; } .quick-view::part(slideshow-nav) { } .wallpaper-slideshow::part(slideshow-nav) { } .mobile ::part(slideshow-nav) { --button-inset: 10px; } .mobile .quick-view::part(slideshow-nav) { --button-inset: 25px; } shop-product { font-size: 1.2rem; max-width: 22rem; font-family: "Diatype Variable"; font-style: normal; font-weight: 400; font-variation-settings: 'slnt' 0, 'MONO' 0; letter-spacing: 0em; margin-bottom: 1em; } shop-product::part(price) { color: rgba(0, 0, 0, 0.75); line-height: 1.1; margin-bottom: 0.5em; } shop-product::part(dropdown) { width: 100%; color: rgba(0, 0, 0, 0.85); border: 1px solid rgba(0, 0, 0, 0.2); background-color: rgba(255, 255, 255, 0.0); background-image: url(https://static.cargo.site/assets/images/select-line-arrows.svg); background-repeat: no-repeat; background-position: top 0em right .1em; line-height: 1.2; padding: 0.58em 2em 0.55em 0.9em; border-radius: 10em; margin-bottom: 0.5em; } shop-product::part(button) { background: rgba(0, 0, 0, 0.15); color: rgba(0, 0, 0, 0.75); text-align: left; line-height: normal; padding: 0.5em 1em; cursor: pointer; border-radius: 10em; } shop-product::part(button):active { opacity: .7; } audio-player { --text-color: rgba(0, 0, 0, 0.85); --text-padding: 0 1.2em 0 1.0em; --background-color: rgba(255, 255, 255, 0); --buffer-background-color: rgba(0, 0, 0, 0.03); --progress-background-color: rgba(0, 0, 0, 0.075); --border-lines: 1px solid rgba(0, 0, 0, 0.2); font-size: 1.2rem; width: 32rem; height: 2.75em; font-family: "Diatype Variable"; font-style: normal; font-weight: 400; font-variation-settings: 'slnt' 0, 'MONO' 0; line-height: normal; letter-spacing: 0em; margin-bottom: 0.5em; border-radius: 10em; } audio-player::part(button) { --icon-color: rgba(0, 0, 0, 0.85); --icon-size: 32%; --play-text: ''; --pause-text: ''; width: 3.15em; display: inline-flex; justify-content: center; cursor: pointer; } audio-player::part(play-icon) { padding-left: 0.6em; } audio-player::part(pause-icon) { padding-left: 0.4em; } audio-player::part(progress-indicator) { border-right: 1px solid rgba(0, 0, 0, 0); height: 100%; cursor: ew-resize; } audio-player::part(separator) { border-right: var(--border-lines); } body.mobile audio-player { max-width: 100%; } .mobile .content { border: 0; margin: 0; } media-item { --scroll-animation-mode: animation; } /* ===================================================================== JAN ŠLÉŠKA – VLASTNÍ STYLY Nahoře nechávám styly, které generuje Cargo (textové styly apod.). Pod touto čarou je všechno vlastní, seřazené podle částí webu. ===================================================================== */ /* ===================================================================== 1 · ZÁKLAD: barva, pozadí, písmo ===================================================================== */ :root { --ink: rgba(174, 81, 60, 0.9); /* hlavní barva webu – uhlík 25 (#AE513C) */ --kalnia-w: 250; /* tloušťka písma Kalnia na celém webu: 200 = tenčí, 300 = silnější */ --font-popisky: "Geist", "Helvetica Neue", sans-serif; /* písmo popisků, štítků a nadpisů sekcí */ --claim-w: 300; /* tloušťka claimu MY MUSIC…: 250 = jako zbytek, 300 = o chlup silnější */ } html, body { background-color: rgb(10, 10, 10); } * { font-synthesis: none; } bodycopy, bodycopy a, h1, h1 a, h2, h2 a, .caption, .caption a, .nadpis, .nadpis a, .bodycopy-popisky, .bodycopy-popisky a, .heading-3, .heading-3 a, .bodycopy-texty, .bodycopy-texty a, .video-hover-text { color: var(--ink); } /* vyrovnání prostrkání při zarovnání na střed */ .nadpis { padding-left: 0.22em; } .heading-3 { padding-left: 0.073em; } h1 { padding-left: 0.088em; } /* nadpisy na podstránkách a mobilní menu – Kalnia */ html body h1, html body h1 a, html body .nadpis, html body .nadpis a, html body .heading-3, html body .heading-3 a, html body .video-hover-text, html body .mobile-nav a { font-family: "Kalnia", serif !important; font-weight: var(--kalnia-w) !important; font-variation-settings: "wght" var(--kalnia-w), "wdth" 100 !important; } /* odkazy */ a { text-decoration-thickness: 2px; text-underline-offset: 0.12em; } @media (hover: hover) and (pointer: fine) { a { transition: color 0.9s ease-in-out, text-decoration-color 0.9s ease-in-out, text-shadow 0.9s ease-in-out !important; } } /* ===================================================================== 2 · KURZOR (svítící tečka) ===================================================================== */ *, media-item::part(media) { cursor: none !important; } body::after { content: ""; position: fixed; top: 0; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; box-sizing: border-box; border: 1.5px solid transparent; border-radius: 50%; background: rgba(255, 244, 236, 0.95); box-shadow: 0 0 12px 4px rgba(255, 244, 236, 0.5); pointer-events: none; z-index: 2147483647; transform: translate(var(--cursor-x, -100px), var(--cursor-y, -100px)); transition: transform 0.08s ease-out, width 0.35s ease, height 0.35s ease, margin 0.35s ease, background 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease; } /* homepage: tečka s jemnou září */ body:has(.home-v2)::after { opacity: 1; background: rgba(255, 244, 236, 0.95); box-shadow: 0 0 16px 5px rgba(255, 244, 236, 0.55); } /* nad odkazem, tlačítkem, fotkou nebo přehrávačem se tečka zvětší */ body:has( a:hover, .linked:hover, [href]:hover, button:hover, media-item.zoomable:hover, .film-still-wrap:hover, .page[page-url="commercial-subpage"] gallery-columnized media-item:hover, .home-v2 .hv-listen:hover )::after { width: 28px; height: 28px; margin: -14px 0 0 -14px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 16px 4px rgba(255, 244, 236, 0.9), 0 0 48px 20px rgba(255, 244, 236, 0.5); opacity: 1; } /* ===================================================================== 3 · SVĚTLO: přísvit kurzoru a fotka v pozadí ===================================================================== */ /* registrace proměnné, aby šla plynule animovat */ @property --dim-radius { syntax: ''; inherits: true; initial-value: 700px; } body, .backdrop { transition: --dim-radius 0.5s ease; } /* bílý přísvit kolem kurzoru */ .spotlight-overlay { position: fixed; inset: 0; pointer-events: none; z-index: 999; mix-blend-mode: screen; filter: blur(20px); background: radial-gradient( circle 500px at var(--x, 50%) var(--y, 50%), rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.42) 8%, rgba(255, 255, 255, 0.32) 18%, rgba(255, 255, 255, 0.22) 30%, rgba(255, 255, 255, 0.14) 44%, rgba(255, 255, 255, 0.08) 60%, rgba(255, 255, 255, 0.04) 78%, rgba(255, 255, 255, 0.015) 90%, transparent 100% ); transition: background 0.15s ease, opacity 0.5s ease; } /* fotka v pozadí: kurzor ji v místě odkrývá */ .backdrop { -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-image: radial-gradient( circle var(--dim-radius) at var(--x, 50%) var(--y, 50%), rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.98) 12%, rgba(0, 0, 0, 0.94) 24%, rgba(0, 0, 0, 0.88) 36%, rgba(0, 0, 0, 0.82) 48%, rgba(0, 0, 0, 0.76) 60%, rgba(0, 0, 0, 0.72) 72%, rgba(0, 0, 0, 0.68) 84%, rgba(0, 0, 0, 0.66) 100% ); mask-image: radial-gradient( circle var(--dim-radius) at var(--x, 50%) var(--y, 50%), rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.98) 12%, rgba(0, 0, 0, 0.94) 24%, rgba(0, 0, 0, 0.88) 36%, rgba(0, 0, 0, 0.82) 48%, rgba(0, 0, 0, 0.76) 60%, rgba(0, 0, 0, 0.72) 72%, rgba(0, 0, 0, 0.68) 84%, rgba(0, 0, 0, 0.66) 100% ); } /* podstránky: fotka rozmazaná a ztmavená */ .page:not(:has(.home-v2)) .backdrop { filter: blur(14px) brightness(0.55); transform: scale(1.06); } /* homepage: fotka v plné síle */ .page:has(.home-v2) .backdrop { opacity: 1; } /* přísvit je pod hero slabší */ body.past-hero .spotlight-overlay { opacity: 0.25 !important; } @media (hover: hover) and (pointer: fine) { /* homepage a About: fotka připnutá k obrazovce */ .page:has(.home-v2) .backdrop, .page:has(.about-page) .backdrop { position: fixed !important; top: 0 !important; left: 0 !important; right: 0 !important; bottom: 0 !important; height: auto !important; } /* homepage: kurzor fotku odkrývá, ne zamlžuje */ .page:has(.home-v2) .backdrop { opacity: 1 !important; -webkit-mask-image: radial-gradient( circle var(--dim-radius) at var(--x, 50%) var(--y, 50%), rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.95) 20%, rgba(0, 0, 0, 0.88) 50%, rgba(0, 0, 0, 0.6) 100% ) !important; mask-image: radial-gradient( circle var(--dim-radius) at var(--x, 50%) var(--y, 50%), rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.95) 20%, rgba(0, 0, 0, 0.88) 50%, rgba(0, 0, 0, 0.6) 100% ) !important; } body:has(.home-v2) .spotlight-overlay { mix-blend-mode: overlay; } } /* ===================================================================== 4 · HLAVIČKA (horní menu) ===================================================================== */ [id="X4279915566"] a { text-decoration: none !important; border-bottom: 0 !important; } /* písmo hlavičky – Geist jako popisky */ [id="X4279915566"] .page-content, [id="X4279915566"] .page-content * { font-family: var(--font-popisky) !important; font-weight: 300 !important; letter-spacing: 0.01em !important; } /* nad odkazem v hlavičce zhasne odkrytí fotky i přísvit */ body:has([id="X4279915566"] a:hover), body:has([id="X4279915566"] a:hover) .backdrop { --dim-radius: 1px !important; } body:has([id="X4279915566"] a:hover) .spotlight-overlay { opacity: 0; } /* …a kurzor je bílý prstenec bez záře */ body:has([id="X4279915566"] a:hover)::after { background: transparent !important; border-color: rgba(255, 255, 255, 0.9); box-shadow: none !important; } /* jednotná velikost, nikdy se nezalomí */ @media (hover: hover) and (pointer: fine) { [id="X4279915566"] .page-content, [id="X4279915566"] .page-content * { font-size: clamp(16px, 1.15vw, 28px) !important; /* velikost menu = velikost role EUROPEAN COMPOSER */ line-height: 1.3 !important; } [id="X4279915566"] a { white-space: nowrap; } } /* ===================================================================== 5 · MOBILNÍ MENU (hamburger) ===================================================================== */ .menu-icon { display: none; position: fixed; top: 12rem; left: 50%; transform: translateX(-50%); width: 34px; height: 22px; z-index: 100000; } body.home .menu-icon { display: block; } .menu-icon span { position: absolute; left: 0; width: 100%; height: 2px; background: var(--ink); transition: transform 0.35s ease, top 0.35s ease; } .menu-icon span:nth-child(1) { top: 4px; } .menu-icon span:nth-child(2) { top: 16px; } /* dvě čáry se změní v křížek */ body.menu-open .menu-icon span:nth-child(1) { top: 10px; transform: rotate(45deg); } body.menu-open .menu-icon span:nth-child(2) { top: 10px; transform: rotate(-45deg); } .mobile-nav { position: fixed; inset: 0; background: rgb(10, 10, 10); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1.4rem; opacity: 0; pointer-events: none; transition: opacity 0.35s ease; z-index: 99990; } body.menu-open .mobile-nav { opacity: 1; pointer-events: auto; } .mobile-nav a { font-size: clamp(32px, 9vw, 56px) !important; color: var(--ink) !important; text-decoration: none !important; letter-spacing: 0.04em !important; } /* rozsvícení odkazu při najetí (musí být až za barvou menu) */ @media (hover: hover) and (pointer: fine) { a:hover { color: rgba(205, 130, 105, 0.95) !important; text-decoration-color: currentColor; text-shadow: 0 0 10px rgba(255, 244, 236, 0.15); } } /* ===================================================================== 6 · PODSTRÁNKY FILMS A COMMERCIALS ===================================================================== */ /* video s názvem při najetí */ .video-hover-wrap { position: relative; overflow: hidden; } .video-hover-text { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; text-align: center; box-sizing: border-box; padding: 0 6%; background: rgba(0, 0, 0, 0.45); color: var(--ink); font-size: clamp(2rem, 6vw, 7rem); letter-spacing: 0.04em; line-height: 1.15; opacity: 0; transition: opacity 1.4s ease; pointer-events: none; } /* fotky filmů a reklam: tma kolem kurzoru + teplé světlo */ .film-still-wrap, .page[page-url="commercial-subpage"] gallery-columnized media-item { position: relative; overflow: hidden; cursor: pointer; } .film-still-wrap::before, .page[page-url="commercial-subpage"] gallery-columnized media-item::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: rgba(0, 0, 0, 0.5); opacity: 0; transition: opacity 0.6s ease; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; -webkit-mask-size: 100% 100%; mask-size: 100% 100%; -webkit-mask-image: radial-gradient( circle var(--dim-radius) at var(--fx, 50%) var(--fy, 50%), transparent 0%, transparent 25%, black 90% ); mask-image: radial-gradient( circle var(--dim-radius) at var(--fx, 50%) var(--fy, 50%), transparent 0%, transparent 25%, black 90% ); } .film-still-wrap::after, .page[page-url="commercial-subpage"] gallery-columnized media-item::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 0.6s ease, background 0.15s ease; background: radial-gradient( circle var(--dim-radius) at var(--fx, 50%) var(--fy, 50%), rgba(255, 244, 236, 0.16) 0%, rgba(255, 244, 236, 0.07) 40%, transparent 75% ); } .film-still-wrap { width: fit-content; margin: 0 auto 5rem; } .spotify-embed, .soundcloud-embed { margin-top: 5rem; margin-bottom: 5rem; } gallery-columnized media-item { width: auto !important; margin: 0 0 1rem 0 !important; } /* commercials: názvy při najetí vždy na jeden řádek */ .page[page-url="commercial-subpage"] gallery-columnized media-item { container-type: inline-size; } .page[page-url="commercial-subpage"] gallery-columnized media-item .caption, .page[page-url="commercial-subpage"] gallery-columnized media-item .caption * { white-space: nowrap; font-size: clamp(1.2rem, 7.5cqi, 10rem) !important; } /* commercials: slabší záře kvůli čitelnosti popisků */ body:has(.page[page-url="commercial-subpage"]) .spotlight-overlay { opacity: 0.3; } body:has(.page[page-url="commercial-subpage"])::after { box-shadow: 0 0 10px 2px rgba(255, 244, 236, 0.4) !important; } @media (hover: hover) and (pointer: fine) { .video-hover-wrap:hover .video-hover-text { opacity: 1; } .film-still-wrap:hover::before, .film-still-wrap:hover::after, .page[page-url="commercial-subpage"] gallery-columnized media-item:hover::after { opacity: 1; } /* commercials: ztmaví se jen fotka, popisek zůstává v plné barvě */ .page[page-url="commercial-subpage"] gallery-columnized media-item:hover::before { opacity: 0; } .page[page-url="commercial-subpage"] gallery-columnized media-item:hover::after { opacity: 0.4; } .page[page-url="commercial-subpage"] gallery-columnized media-item::part(media) { transition: filter 0.6s ease; } .page[page-url="commercial-subpage"] gallery-columnized media-item:hover::part(media) { filter: brightness(0.5) drop-shadow(0.3rem 0.3rem 0.5rem rgba(0, 0, 0, 0.12)); } } /* ===================================================================== 7 · VIMEO PŘEHRÁVAČ NAD STRÁNKOU ===================================================================== */ .vimeo-lightbox { position: fixed; inset: 0; z-index: 99996; display: flex; align-items: center; justify-content: center; background: rgba(5, 5, 5, 0.94); opacity: 0; transition: opacity 0.5s ease; } .vimeo-lightbox.is-open { opacity: 1; } .vimeo-lightbox-frame { width: min(90vw, 150vh); aspect-ratio: 16 / 9; } .vimeo-lightbox-frame iframe { display: block; width: 100%; height: 100%; border: 0; } /* křížek pro zavření */ .vimeo-lightbox-close { position: absolute; top: 1.5rem; right: 1.5rem; width: 56px; height: 56px; font-size: 0 !important; text-indent: -9999px; overflow: hidden; white-space: nowrap; color: var(--ink); text-decoration: none !important; } .vimeo-lightbox-close::before, .vimeo-lightbox-close::after { content: ""; position: absolute; top: 50%; left: 50%; width: 40px; height: 2px; margin: -1px 0 0 -20px; background: currentColor; } .vimeo-lightbox-close::before { transform: rotate(45deg); } .vimeo-lightbox-close::after { transform: rotate(-45deg); } /* ===================================================================== 8 · STRÁNKA ABOUT ===================================================================== */ /* fotka bez rozostření, tmavá, kurzor ji v místě rozsvítí */ .page:has(.about-page) .backdrop { filter: none !important; transform: none !important; opacity: 0.31; } body:has(.about-page) .spotlight-overlay { opacity: 1; mix-blend-mode: overlay; } /* nadpis přesně k pravému okraji */ .about-page .nadpis { padding-left: 0; margin-right: -0.22em; } @media (hover: hover) and (pointer: fine) { .page:has(.about-page) .backdrop { opacity: 1; -webkit-mask-image: radial-gradient( circle var(--dim-radius) at var(--x, 50%) var(--y, 50%), rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.85) 20%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0.31) 100% ) !important; mask-image: radial-gradient( circle var(--dim-radius) at var(--x, 50%) var(--y, 50%), rgba(0, 0, 0, 1) 0%, rgba(0, 0, 0, 0.85) 20%, rgba(0, 0, 0, 0.55) 50%, rgba(0, 0, 0, 0.31) 100% ) !important; } .about-page { width: 100%; } /* nadpis: šířka nastavená tak, aby B leželo v ose stránky pod šipkou */ .about-page .about-title { width: 71.5% !important; margin-left: auto; } .about-page .about-title column-set { width: 100% !important; } /* text: úzký sloupec u pravého okraje */ .about-page .bodycopy-popisky { max-width: 38em; margin-left: auto; } } /* ===================================================================== 9 · PLYNULÉ SCROLOVÁNÍ (Lenis) ===================================================================== */ .lenis.lenis-smooth { scroll-behavior: auto !important; } .lenis.lenis-stopped { overflow: hidden; } /* ===================================================================== 10 · HOMEPAGE (.home-v2) – HERO ===================================================================== */ .home-v2 .hv-hero { position: relative; min-height: var(--viewport-height, 100vh); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; box-sizing: border-box; padding: 6vh 0 12vh; } .home-v2 .hv-hero > * { position: relative; z-index: 1; } /* přechod fotky do tmy dole */ .home-v2 .hv-hero::after { content: ""; position: absolute; left: 50%; bottom: 0; width: 100vw; height: 38vh; transform: translateX(-50%); z-index: 0; pointer-events: none; background: linear-gradient( to bottom, rgba(10, 10, 10, 0) 0%, rgba(10, 10, 10, 0.55) 55%, rgb(10, 10, 10) 100% ); } /* --- jméno: tmavá vrstva + rozsvícená vrstva pod kurzorem ---------- */ html body .home-v2 .hv-name, html body .home-v2 .hv-name span { font-family: "Kalnia", serif !important; font-weight: var(--kalnia-w) !important; font-variation-settings: "wght" var(--kalnia-w), "wdth" 100 !important; font-style: normal !important; text-transform: uppercase !important; letter-spacing: 0.02em !important; } html body .home-v2 .hv-name { position: relative; display: block; margin: 0 !important; padding: 0 0 0 0.02em !important; font-size: clamp(100px, min(14.5vw, 32vh), 520px) !important; /* velikost jména */ line-height: 1 !important; white-space: nowrap; text-align: center; } .home-v2 .hv-name span { font-size: 1em !important; line-height: inherit !important; } .home-v2 .hv-name-dim { display: block; color: rgba(174, 81, 60, 0.17); /* viditelnost jména ve tmě */ } .home-v2 .hv-name-lit { color: rgb(240, 190, 160); transform: translateX(-0.03em) !important; /* dvojexpozice */ } /* --- my music can light up what's hidden within your film ---------- */ .home-v2.home-v2.home-v2 .hv-claim.hv-claim, .home-v2.home-v2.home-v2 .hv-claim.hv-claim * { font-family: "Kalnia", serif !important; font-weight: var(--claim-w) !important; font-variation-settings: "wght" var(--claim-w), "wdth" 100 !important; font-style: normal !important; font-stretch: 100% !important; text-transform: uppercase !important; letter-spacing: 0.02em !important; } .home-v2.home-v2.home-v2 .hv-claim.hv-claim { display: block; margin: 0; padding-left: 0.22em !important; font-size: max(15px, min(1.5vw, 2.9vh)) !important; /* velikost claimu */ line-height: 1.55 !important; color: var(--ink); } .home-v2.home-v2.home-v2 .hv-claim.hv-claim * { font-size: 1em !important; line-height: inherit !important; } /* light up */ .home-v2 .hv-glow { color: rgba(232, 186, 160, 0.96); text-shadow: 0 0 28px rgba(255, 214, 186, 0.35), 0 0 70px rgba(255, 190, 150, 0.18); transition: color 0.9s ease, text-shadow 0.9s ease; } /* --- role pod jménem: EUROPEAN COMPOSER · FILM & COMMERCIALS -------- */ .home-v2 .hv-role { display: block; margin: 0; font-family: "Kalnia", serif !important; font-weight: var(--kalnia-w) !important; font-variation-settings: "wght" var(--kalnia-w), "wdth" 100 !important; font-size: clamp(16px, 1.15vw, 28px) !important; /* velikost role */ letter-spacing: 0.24em !important; padding-left: 0.24em !important; text-transform: uppercase !important; line-height: 1.4 !important; color: rgba(232, 186, 160, 0.9); /* světlejší měď než claim */ } /* --- odkazy FILM a COMMERCIALS v roli: podtržení a rozsvícení jen při najetí --- */ .home-v2 .hv-role a { font: inherit !important; font-size: 1em !important; letter-spacing: inherit !important; text-transform: inherit !important; color: inherit !important; text-decoration: none !important; text-shadow: none; transition: color 0.6s ease, text-shadow 0.6s ease !important; } .home-v2 .hv-role a:hover { color: rgb(255, 236, 222) !important; text-shadow: 0 0 18px rgba(255, 214, 186, 0.55); text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 0.32em !important; } /* --- SCROLL --------------------------------------------------------- */ .home-v2 .hv-hero .hv-scroll { position: absolute; z-index: 1; } .home-v2 .hv-scroll { position: absolute; left: 50%; bottom: 4vh; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 10px; font-family: var(--font-popisky); font-size: 12px; letter-spacing: 0.32em; padding-left: 0.32em; text-transform: uppercase; text-decoration: none !important; color: var(--ink); opacity: 0.8; } .home-v2 .hv-scroll::after { content: ""; display: block; width: 1px; height: 40px; background: currentColor; } /* --- hero na počítači ----------------------------------------------- */ @media (hover: hover) and (pointer: fine) { .home-v2 { --name-stretch: 1.15; /* výška jména: 1 = původní, 1.15 = o 15 % vyšší */ } /* poloha hero: padding-top = mezera pod menu, padding-bottom = čím víc, tím výš celá skupina */ .home-v2 .hv-hero { padding-top: 9vh !important; padding-bottom: 14vh !important; } /* jméno protažené do výšky */ html body .home-v2 .hv-name { transform: scaleY(var(--name-stretch)); transform-origin: 50% 0; margin-bottom: calc((var(--name-stretch) - 1) * 1em) !important; } .home-v2 .hv-role { margin-top: min(0.4vw, 0.8vh) !important; /* odstup role od jména */ margin-bottom: min(1.3vw, 2.4vh) !important; /* odstup role od claimu */ } .home-v2 .hv-name-lit { position: absolute; top: -0.6em !important; bottom: -0.6em !important; left: -0.4em !important; right: -0.4em !important; padding: 0.6em 0.4em 0; box-sizing: border-box; pointer-events: none; text-shadow: 0 0 40px rgba(255, 200, 160, 0.35); /* světlo pod kurzorem: 25vw = velikost kužele */ -webkit-mask-image: radial-gradient( 25vw calc(25vw / var(--name-stretch)) at calc(var(--nx, 55%) + 0.44em) calc(var(--ny, 50%) / var(--name-stretch) + 0.6em), #000 0%, rgba(0, 0, 0, 0.6) 35%, transparent 75% ) !important; mask-image: radial-gradient( 25vw calc(25vw / var(--name-stretch)) at calc(var(--nx, 55%) + 0.44em) calc(var(--ny, 50%) / var(--name-stretch) + 0.6em), #000 0%, rgba(0, 0, 0, 0.6) 35%, transparent 75% ) !important; } .home-v2.home-v2.home-v2 .hv-claim.hv-claim { margin-top: min(1.8vw, 3.4vh) !important; } .home-v2 .hv-glow:hover { color: rgba(250, 228, 212, 1); text-shadow: 0 0 34px rgba(255, 226, 204, 0.55), 0 0 90px rgba(255, 196, 160, 0.3); } .home-v2 .hv-scroll { font-family: var(--font-popisky) !important; font-weight: 400 !important; font-style: normal !important; font-size: 14px !important; line-height: 1.5 !important; letter-spacing: 0.28em !important; padding-left: 0.28em !important; text-transform: uppercase !important; } } /* ===================================================================== 11 · HOMEPAGE – SEKCE POD HERO (společné) ===================================================================== */ /* tmavý podklad přes celou šířku */ .home-v2 .hv-sections { position: relative; z-index: 1; background: rgb(10, 10, 10); box-shadow: 0 0 0 100vmax rgb(10, 10, 10); clip-path: inset(0 -100vmax -100vmax); padding-bottom: 120px; } .home-v2 .hv-section { max-width: 1360px; margin: 0 auto; padding-top: 160px; text-align: center; } /* nadpis sekce (SELECTED WORK, LISTEN…) */ .home-v2 .hv-label { display: block; margin: 0 0 70px; padding-left: 0.32em; font-family: var(--font-popisky); font-weight: 300; font-size: 34px; line-height: 1.2; letter-spacing: 0.32em; color: var(--ink); } /* odkaz pod sekcí (ALL FILMS, MUSIC, ABOUT…) */ .home-v2 .hv-link { display: inline-block; margin: 64px 22px 0; font-size: 30px; color: var(--ink); text-underline-offset: 0.14em; text-transform: uppercase !important; letter-spacing: 0.1em !important; } /* všechny výrazné texty homepage – Kalnia */ html body .home-v2 .hv-card-name, html body .home-v2 .hv-card-name *, html body .home-v2 .hv-link, html body .home-v2 .hv-award-name, html body .home-v2 .hv-award-name *, html body .home-v2 .hv-clients, html body .home-v2 .hv-clients *, html body .home-v2 .hv-contact-head, html body .home-v2 .hv-contact-head *, html body .home-v2 .hv-email, html body .home-v2 .hv-quote, html body .home-v2 .hv-quote *, html body .home-v2 .hv-contact-sub, html body .home-v2 .hv-contact-sub * { font-family: "Kalnia", serif !important; font-weight: var(--kalnia-w) !important; font-variation-settings: "wght" var(--kalnia-w), "wdth" 100 !important; font-style: normal !important; } /* ===================================================================== 12 · SELECTED WORK (dva sloupce FILM / COMMERCIAL) ===================================================================== */ /* poznámka pod nadpisem: BEST HEARD ON HEADPHONES OR GOOD SPEAKERS */ .home-v2 .hv-hint { display: block; margin: -40px 0 56px; text-align: center; font-family: var(--font-popisky) !important; font-weight: 400 !important; font-size: clamp(12px, 0.75vw, 16px) !important; /* velikost poznámky */ letter-spacing: 0.32em !important; padding-left: 0.32em !important; text-transform: uppercase !important; line-height: 1.5 !important; color: var(--ink); opacity: 0.75; } .home-v2 .hv-col-label { display: block; margin: 0 0 28px; font-family: var(--font-popisky); font-weight: 400; font-size: 15px; letter-spacing: 0.28em; padding-left: 0.28em; text-transform: uppercase; text-align: center; color: var(--ink); opacity: 0.85; } .home-v2 #hv-work .hv-col-link { display: block; width: auto !important; margin: 8px 0 0 !important; text-align: center !important; } .home-v2 .hv-card { margin-bottom: 64px; } /* fotka */ .home-v2 .hv-still { position: relative; overflow: hidden; border-radius: 0.3rem; isolation: isolate; } .home-v2 .hv-still media-item { display: block; width: 100% !important; margin: 0 !important; } .home-v2 .hv-still media-item::part(media) { filter: none; transition: filter 0.6s ease; } /* tma kolem světla – pod kurzorem je fotka v plné síle */ .home-v2 .hv-still::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: rgba(0, 0, 0, 0.7); opacity: 0; transition: opacity 0.6s ease; -webkit-mask-image: radial-gradient( circle 420px at var(--fx, 50%) var(--fy, 50%), transparent 0%, transparent 20%, black 85% ); mask-image: radial-gradient( circle 420px at var(--fx, 50%) var(--fy, 50%), transparent 0%, transparent 20%, black 85% ); } /* teplé světlo pod kurzorem */ .home-v2 .hv-still::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; mix-blend-mode: normal !important; background: radial-gradient( circle 420px at var(--fx, 50%) var(--fy, 50%), rgba(255, 236, 220, 0.14) 0%, rgba(255, 236, 220, 0.05) 40%, transparent 75% ) !important; } /* název na fotce se nezobrazuje – je pod ní */ .home-v2 .hv-title { display: none !important; } /* název projektu a popisky pod fotkou */ .home-v2 .hv-card-name { display: block; margin-top: 22px; font-size: 34px; line-height: 1.15; text-transform: uppercase !important; letter-spacing: 0.06em !important; color: var(--ink); } .home-v2 .hv-meta { display: block; margin-top: 18px; font-family: var(--font-popisky); font-weight: 300; font-size: 17px; line-height: 1.45; color: var(--ink); opacity: 0.9; } .home-v2 .hv-card-name + .hv-meta { margin-top: 6px !important; } .home-v2 .hv-note { display: block; margin-top: 6px; font-family: var(--font-popisky); font-weight: 300; font-style: normal; font-size: 20px; line-height: 1.3; color: var(--ink); opacity: 0.78; } @media (hover: hover) and (pointer: fine) { .home-v2 .hv-still:hover::before, .home-v2 .hv-still:hover::after { opacity: 1; } /* bílý přísvit stránky nad fotkou vypnout */ body:has(.home-v2 .hv-still:hover) .spotlight-overlay { opacity: 0 !important; } } /* ===================================================================== 13 · LISTEN (vlastní přehrávač – vzhled řádků je v globálním HTML) ===================================================================== */ .home-v2 .hv-listen { max-width: 980px; margin: 0 auto; text-align: left; } /* původní přehrávače Carga schovat – místo nich se kreslí vlastní */ .home-v2 .hv-listen audio-player:is([src], [data-src]):not([src=""]) { display: none !important; } .home-v2 .hv-sub { display: block; margin: -52px 0 56px; text-align: center; font-family: var(--font-popisky); font-weight: 300; font-style: normal; font-size: 22px; color: var(--ink); opacity: 0.75; } /* ===================================================================== 14 · RECOGNITION ===================================================================== */ .home-v2 .hv-award { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 0 auto 50px; } .home-v2 .hv-award media-item { width: 180px !important; margin: 0 0 4px !important; } .home-v2 .hv-award media-item::part(media) { filter: none; border-radius: 0; } .home-v2 .hv-award-name { font-size: 40px; line-height: 1.1; text-transform: uppercase !important; letter-spacing: 0.06em !important; color: var(--ink); text-decoration: none !important; } .home-v2 .hv-award-status { font-family: var(--font-popisky); font-weight: 400; font-size: 13px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink); opacity: 0.85; } .home-v2 .hv-award-project { font-family: var(--font-popisky); font-weight: 300; font-style: normal; font-size: 20px; color: var(--ink); opacity: 0.75; } /* ===================================================================== 15 · WORKED WITH, ABOUT, KONTAKT ===================================================================== */ .home-v2 .hv-clients { display: block; max-width: 1100px; margin: 0 auto; font-size: 40px; line-height: 1.45; text-transform: uppercase !important; letter-spacing: 0.06em !important; color: var(--ink); } .home-v2 .hv-about { text-align: left; } .home-v2 .hv-about .hv-label { text-align: left; padding-left: 0; margin-bottom: 26px; } .home-v2 .hv-about-text { display: block; max-width: 34em; font-family: var(--font-popisky); font-weight: 300; font-size: 21px; line-height: 1.6; color: var(--ink); } /* odkazy v textu stejně velké jako okolní text */ .home-v2 .hv-about-text a, .home-v2 .hv-about-text * { font-size: inherit !important; font-family: inherit !important; line-height: inherit !important; } .home-v2 .hv-about-text a { text-decoration-thickness: 1px !important; text-underline-offset: 0.18em !important; } /* citát: verzálky, svislá linka a podpis */ .home-v2 .hv-quote { display: block; margin-top: 26px; padding-left: 28px; border-left: 1px solid rgba(174, 81, 60, 0.45); font-size: 34px; line-height: 1.3; text-transform: uppercase !important; letter-spacing: 0.06em !important; text-wrap: balance; color: var(--ink); } .home-v2 .hv-quote::after { content: "— Jan Šléška"; display: block; margin-top: 18px; font-family: var(--font-popisky); font-weight: 400; font-size: 15px; letter-spacing: 0.28em; text-transform: uppercase; opacity: 0.72; } .home-v2 .hv-contact { padding-top: 200px; } .home-v2 .hv-contact-head { display: block; margin: 0; padding-left: 0; font-size: clamp(46px, 6.4vw, 92px); line-height: 1 !important; text-transform: uppercase !important; letter-spacing: 0.04em !important; color: var(--ink); } .home-v2 .hv-contact-sub { display: block; margin-top: 28px; font-size: 26px; text-transform: none !important; letter-spacing: 0.02em !important; color: var(--ink); opacity: 0.8; } .home-v2 .hv-email { display: inline-block; margin-top: 44px; font-size: clamp(26px, 3.4vw, 48px); text-transform: none !important; letter-spacing: 0.04em !important; color: var(--ink); text-decoration-thickness: 2px; text-underline-offset: 0.16em; } /* ===================================================================== 16 · POSTUPNÉ OBJEVOVÁNÍ OBSAHU (musí být až za styly sekcí) ===================================================================== */ .home-v2 .hv-reveal { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease var(--hv-d, 0ms), transform 0.7s cubic-bezier(0.2, 0.7, 0.2, 1) var(--hv-d, 0ms), background 0.4s ease; } .home-v2 .hv-reveal.is-visible { opacity: 1; transform: none; } .home-v2 .hv-sub.is-visible { opacity: 0.75; } .home-v2 .hv-contact-sub.is-visible { opacity: 0.8; } .home-v2 .hv-hint.is-visible { opacity: 0.75; } /* ===================================================================== 17 · HOMEPAGE NA POČÍTAČI – velikosti rostou s šířkou okna ===================================================================== */ @media (hover: hover) and (pointer: fine) { .home-v2 { --t-dim: 0.72; /* průhlednost drobných popisků (i v přehrávači) */ } /* rozvržení: sekce téměř přes celou šířku, velké pauzy */ .home-v2 .hv-sections { padding-bottom: 200px !important; } .home-v2 .hv-section { max-width: none !important; padding-top: 240px !important; padding-left: 6.5vw; padding-right: 6.5vw; } .home-v2 #hv-work.hv-section { padding-left: 5vw; padding-right: 5vw; } .home-v2 .hv-contact { padding-top: 312px !important; } /* nadpisy sekcí */ .home-v2 .hv-label { font-family: var(--font-popisky) !important; font-weight: 300 !important; font-style: normal !important; font-size: clamp(28px, 1.9vw, 46px) !important; line-height: 1.5 !important; letter-spacing: 0.28em !important; padding-left: 0.28em !important; text-transform: uppercase !important; margin-bottom: clamp(70px, 4.5vw, 110px) !important; } .home-v2 .hv-about .hv-label { padding-left: 0 !important; margin-bottom: 28px !important; } /* odkazy pod sekcemi */ .home-v2 .hv-link { font-size: clamp(30px, 2vw, 48px) !important; margin-top: clamp(64px, 4vw, 100px) !important; } /* drobné popisky (Geist Light) */ .home-v2 .hv-meta, .home-v2 .hv-note, .home-v2 .hv-sub, .home-v2 .hv-award-project, .home-v2 .hv-about-text { font-family: var(--font-popisky) !important; font-weight: 300 !important; font-style: normal !important; letter-spacing: 0.01em !important; line-height: 1.5 !important; } /* SELECTED WORK */ .home-v2 #hv-work column-unit { padding: 0 1.5vw; } .home-v2 #hv-work .hv-col-label { font-size: clamp(14px, 0.8vw, 18px); margin-bottom: clamp(28px, 2.2vw, 48px); } .home-v2 #hv-work .hv-card { margin-bottom: clamp(90px, 7vw, 160px) !important; } .home-v2 .hv-card-name { font-size: clamp(22px, 1.55vw, 36px) !important; /* velikost názvů filmů */ margin-top: clamp(16px, 1.1vw, 26px) !important; } .home-v2 .hv-meta, .home-v2 .hv-note { font-size: clamp(17px, 1.05vw, 24px) !important; } .home-v2 .hv-meta { opacity: 1 !important; } .home-v2 .hv-note { margin-top: 2px !important; opacity: var(--t-dim) !important; } /* světlo při najetí roste s fotkou */ .home-v2 .hv-still::before { -webkit-mask-image: radial-gradient( circle 26vw at var(--fx, 50%) var(--fy, 50%), transparent 0%, transparent 20%, black 85% ) !important; mask-image: radial-gradient( circle 26vw at var(--fx, 50%) var(--fy, 50%), transparent 0%, transparent 20%, black 85% ) !important; } .home-v2 .hv-still::after { background: radial-gradient( circle 26vw at var(--fx, 50%) var(--fy, 50%), rgba(255, 236, 220, 0.14) 0%, rgba(255, 236, 220, 0.05) 40%, transparent 75% ) !important; } /* LISTEN – regulátory vlastního přehrávače */ .home-v2 .hv-listen { max-width: none !important; --t-content: clamp(30px, 2.1vw, 52px); /* název skladby */ --trk-meta: clamp(15px, 0.9vw, 20px); /* popisek pod názvem */ --trk-time: clamp(15px, 0.9vw, 20px); /* čas */ --trk-pad-y: clamp(22px, 1.6vw, 36px); /* výška řádku */ --trk-gap: clamp(22px, 1.6vw, 40px); /* mezery ve řádku */ --trk-vol: clamp(110px, 8vw, 180px); /* šířka hlasitosti */ } .home-v2 .hv-sub { font-size: clamp(19px, 1.05vw, 24px) !important; margin: -40px 0 48px !important; } /* RECOGNITION – kompaktní řádky */ .home-v2 .hv-award { display: grid; grid-template-columns: clamp(110px, 7vw, 170px) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) !important; align-items: center; gap: clamp(32px, 2.5vw, 64px) !important; max-width: none !important; margin: 0 auto; padding: clamp(28px, 1.8vw, 44px) 0 !important; border-bottom: 1px solid rgba(174, 81, 60, 0.22); text-align: left; } .home-v2 .hv-award media-item { width: clamp(110px, 7vw, 170px) !important; margin: 0 !important; } .home-v2 .hv-award-name { font-size: clamp(32px, 2.1vw, 52px) !important; } .home-v2 .hv-award-status { font-family: var(--font-popisky) !important; font-weight: 400 !important; font-style: normal !important; font-size: clamp(14px, 0.85vw, 19px) !important; line-height: 1.5 !important; letter-spacing: 0.28em !important; text-transform: uppercase !important; } .home-v2 .hv-award-project { font-size: clamp(19px, 1.05vw, 24px) !important; opacity: var(--t-dim) !important; } /* WORKED WITH */ .home-v2 .hv-clients { max-width: 80vw !important; font-size: clamp(40px, 2.6vw, 70px) !important; line-height: 1.6 !important; } /* ABOUT */ .home-v2 .hv-about-text { font-size: clamp(22px, 1.35vw, 30px) !important; line-height: 1.6 !important; } .home-v2 .hv-quote { font-size: clamp(26px, 1.8vw, 44px) !important; line-height: 1.3 !important; letter-spacing: 0.08em !important; margin-top: clamp(40px, 3.3vw, 80px) !important; } /* KONTAKT */ .home-v2 .hv-contact-head { font-size: clamp(55px, 6vw, 150px) !important; } .home-v2 .hv-contact-sub { font-size: clamp(28px, 1.7vw, 42px) !important; } .home-v2 .hv-email { font-size: clamp(32px, 2.8vw, 72px) !important; } } /* ===================================================================== 18 · TELEFON ===================================================================== */ @media (hover: none) and (pointer: coarse) { /* bez kurzoru: žádná tečka, přísvit ani maska fotky */ body::after, .spotlight-overlay { display: none; } .backdrop { -webkit-mask-image: none; mask-image: none; } html, body { overflow-x: clip !important; } .page { overflow-x: clip; } [id="R3841172768"].page { display: none !important; background: transparent !important; } [id="R3841172768"] .page-content { background: transparent !important; } /* video na podstránkách: název stále viditelný, když je video ve středu */ .video-hover-text { font-size: clamp(22px, 6vw, 42px) !important; letter-spacing: 0.04em; line-height: 1.15; padding: 0 8%; white-space: nowrap; opacity: 0; transition: opacity 0.7s ease; } .video-hover-wrap.in-view .video-hover-text { opacity: 1; } /* About a homepage: posouvá se jen okno mezi lištami Safari */ html:has(.home-v2), body:has(.home-v2), html:has(.about-page), body:has(.about-page) { height: 100% !important; overflow: hidden !important; } .page:has(.home-v2), .page:has(.about-page) { position: fixed !important; top: 0 !important; bottom: 0 !important; left: 0; right: 0; height: auto !important; overflow-y: auto !important; overscroll-behavior: contain; } .page:has(.home-v2) .backdrop, .page:has(.about-page) .backdrop { position: fixed !important; top: 0 !important; bottom: 0 !important; height: auto !important; } .mobile .page:has(.home-v2) .page-content { padding-top: 0 !important; } /* About: vše na střed */ .about-page { text-align: center !important; } .about-page .nadpis { padding-left: 0.22em; margin-right: 0; } /* HERO */ .home-v2 .hv-hero { padding: 22vh 0 12vh; justify-content: flex-start; } .home-v2 .hv-name-dim { color: rgba(174, 81, 60, 0.35); } .home-v2 .hv-name-lit { position: absolute; inset: 0; opacity: 0.7; } .home-v2.home-v2.home-v2 .hv-claim.hv-claim { margin-top: 5vw !important; } .home-v2 .hv-role { margin: 4vw 0 3vw !important; font-size: 13px !important; letter-spacing: 0.2em !important; padding-left: 0.2em !important; } .home-v2 .hv-scroll { font-size: 10px; } /* SEKCE */ .home-v2 .hv-section { padding-top: 100px; } .home-v2 .hv-contact { padding-top: 110px; } .home-v2 .hv-label { font-size: 22px; letter-spacing: 0.3em; margin-bottom: 40px; } .home-v2 .hv-link { margin: 40px 12px 0; font-size: 22px; } /* SELECTED WORK */ .home-v2 .hv-card { margin-bottom: 48px; } .home-v2 .hv-card-name { font-size: 24px; margin-top: 16px; } .home-v2 .hv-meta { font-size: 14px; } .home-v2 .hv-note { font-size: 16px; } .home-v2 .hv-still media-item::part(media) { filter: brightness(0.6); } /* LISTEN */ .home-v2 .hv-sub { margin: -28px 0 30px; font-size: 17px; } /* RECOGNITION */ .home-v2 .hv-award { margin-bottom: 26px; } .home-v2 .hv-award media-item { width: 90px !important; } .home-v2 .hv-award-name { font-size: 25px; } .home-v2 .hv-award-status { font-size: 10px; } .home-v2 .hv-award-project { font-size: 15px; } /* WORKED WITH, ABOUT, KONTAKT */ .home-v2 .hv-clients { font-size: 24px; } .home-v2 .hv-about, .home-v2 .hv-about .hv-label { text-align: center; } .home-v2 .hv-about .hv-label { padding-left: 0.3em; } .home-v2 .hv-about-text { font-size: 16px; } .home-v2 .hv-quote { font-size: 24px; } .home-v2 .hv-contact-sub { font-size: 18px; } } /* === HERO: vzdušnější rozvržení (počítač) === */ @media (hover: hover) and (pointer: fine) { .home-v2 .hv-role { margin-top: min(2.6vw, 4.8vh) !important; /* mezera jméno → role */ margin-bottom: 0 !important; } .home-v2.home-v2.home-v2 .hv-claim.hv-claim { margin-top: min(5.2vw, 9.6vh) !important; /* mezera role → claim */ line-height: 2.1 !important; /* mezera mezi řádky claimu */ } } /* === FILM a COMMERCIALS: podtržení vždy viditelné === */ .home-v2 .hv-role a { --ul-alpha: 0.45; /* viditelnost čáry v klidu: 0.3 = jemnější, 0.7 = výraznější */ text-decoration: none !important; background-image: linear-gradient(rgba(232, 186, 160, var(--ul-alpha)), rgba(232, 186, 160, var(--ul-alpha))) !important; background-repeat: no-repeat !important; background-size: calc(100% - 0.24em) 1px !important; /* délka čáry (končí u posledního písmene) a tloušťka */ background-position: left bottom !important; padding-bottom: 0.12em !important; /* odstup čáry od písma */ } .home-v2 .hv-role a:hover { text-decoration: none !important; background-image: linear-gradient(rgb(255, 236, 222), rgb(255, 236, 222)) !important; /* při najetí se čára rozsvítí */ } /* === SELECTED WORK: varianta C3 – sjednocení s hero (počítač) === */ @media (hover: hover) and (pointer: fine) { /* mezery */ .home-v2 #hv-work .hv-label { margin-bottom: clamp(40px, 2.6vw, 64px) !important; } .home-v2 #hv-work .hv-hint { margin: -16px 0 clamp(44px, 2.8vw, 64px) !important; } .home-v2 #hv-work .hv-col-label { margin-bottom: clamp(22px, 1.5vw, 34px) !important; } .home-v2 #hv-work .hv-card { margin-bottom: clamp(56px, 4vw, 92px) !important; } .home-v2 #hv-work .hv-card-name { margin-top: clamp(18px, 1.2vw, 28px) !important; } /* poznámka o sluchátkách: verzálky jako ve variantě B */ .home-v2 #hv-work .hv-hint { font-size: clamp(13px, 0.85vw, 18px) !important; /* velikost poznámky */ color: rgba(232, 186, 160, 0.75) !important; opacity: 1 !important; } /* FILM / COMMERCIAL: Kalnia jako role v hero */ .home-v2 #hv-work .hv-col-label { font-family: "Kalnia", serif !important; font-weight: var(--kalnia-w) !important; font-variation-settings: "wght" var(--kalnia-w), "wdth" 100 !important; font-size: clamp(16px, 1.15vw, 28px) !important; letter-spacing: 0.24em !important; padding-left: 0.24em !important; color: rgba(232, 186, 160, 0.9) !important; opacity: 1 !important; } /* fakta a ocenění: tlumená světlá měď, malý rozdíl mezi řádky */ .home-v2 #hv-work .hv-meta { font-size: clamp(18px, 1.1vw, 24px) !important; /* velikost faktů */ font-weight: 350 !important; color: rgba(226, 178, 152, 0.9) !important; /* barva faktů */ opacity: 1 !important; } .home-v2 #hv-work .hv-note { font-size: clamp(16px, 0.98vw, 21px) !important; /* velikost ocenění */ font-weight: 300 !important; color: rgba(212, 156, 128, 0.8) !important; /* barva ocenění – o tón tlumenější */ opacity: 1 !important; margin-top: 4px !important; } } /* === RECOGNITION: loga cen o trochu větší (počítač) === */ @media (hover: hover) and (pointer: fine) { .home-v2 .hv-award { grid-template-columns: var(--award-logo) minmax(0, 1.5fr) minmax(0, 1fr) minmax(0, 1fr) !important; } .home-v2 .hv-award media-item { width: var(--award-logo) !important; } .home-v2 { --award-logo: clamp(126px, 8vw, 196px); /* velikost loga: původně clamp(110px, 7vw, 170px) */ } } /* === LISTEN, RECOGNITION, WORKED WITH, ABOUT: čitelnější popisky (počítač) === */ @media (hover: hover) and (pointer: fine) { /* LISTEN – podnadpis a řádky přehrávače */ .home-v2 .hv-sub { color: rgba(226, 178, 152, 0.8) !important; /* „without leaving the page“ */ opacity: 1 !important; } .home-v2 .hv-listen { --trk-meta: clamp(16px, 0.98vw, 21px); /* velikost popisku pod skladbou */ --trk-meta-color: rgba(226, 178, 152, 0.85); /* barva popisku pod skladbou */ --trk-meta-case: none; /* none = malá písmena, uppercase = verzálky */ --trk-meta-ls: 0.01em; --trk-time-color: rgba(226, 178, 152, 0.75); /* barva času */ --t-dim: 1; } /* RECOGNITION – status a projekt */ .home-v2 .hv-award-status { color: rgba(226, 178, 152, 0.9) !important; /* NOMINEE, GOLD · 2026 … */ opacity: 1 !important; letter-spacing: 0.2em !important; white-space: nowrap; /* status se nezalomí */ } .home-v2 .hv-award-project { color: rgba(212, 156, 128, 0.85) !important; /* Restore Point · Best Music … */ opacity: 1 !important; } .home-v2 .hv-award-name { text-wrap: balance; /* dlouhé názvy cen se lámou vyváženě */ } /* WORKED WITH – každý klient drží pohromadě, tečka zůstává na konci řádku */ .home-v2 .hv-clients { text-wrap: balance; } .home-v2 .hv-client { white-space: nowrap; } /* ABOUT – text v tlumené světlé mědi */ .home-v2 .hv-about-text { color: rgba(226, 178, 152, 0.88) !important; } .home-v2 .hv-about-text a { color: rgba(240, 206, 184, 0.95) !important; } } /* WORKED WITH – klienti mají vždy velikost celého řádku (i na telefonu) */ .home-v2 .hv-client { font-size: inherit !important; line-height: inherit !important; } /* ===================================================================== 4b · HLAVIČKA PŘILEPENÁ NAHOŘE + ROZMAZÁNÍ POD NÍ (rozmazávací vrstvu .hdr-blur a třídu "scrolled" vytváří skript v globálním HTML) ===================================================================== */ /* header zůstane přilepený nahoře (vlastní rozměry a odsazení z Carga se nemění) */ [id="X4279915566"] { position: fixed !important; z-index: 1000 !important; pointer-events: none; } [id="X4279915566"] a { pointer-events: auto; } /* rozostření obsahu pod menu – objeví se až po začátku scrollování síla: blur(...), výška: height, ztmavení: rgba(...) */ .hdr-blur { position: fixed; top: 0; left: 0; right: 0; height: 4.6rem; z-index: 999; pointer-events: none; -webkit-backdrop-filter: blur(28px); backdrop-filter: blur(28px); background: rgba(10, 10, 10, 0.18); -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%); mask-image: linear-gradient(to bottom, #000 0, #000 55%, transparent 100%); opacity: 0; transition: opacity 0.35s ease; } body.scrolled .hdr-blur { opacity: 1; } /* ===== HOMEPAGE: tmavší fotka na pozadí (čitelnost) ===== 1 = původní jas, nižší = tmavší. Doporučené rozmezí 0.7 – 0.9 */ .page:has(.home-v2) .backdrop { filter: brightness(0.9) !important; } @media (hover: hover) and (pointer: fine) { html body .home-v2 #hv-work .hv-card-name,html body .home-v2 #hv-work .hv-meta,html body .home-v2 #hv-work .hv-note{text-align:left!important} html body .home-v2 #hv-work .hv-card-name{font-size:clamp(19px,1.3vw,28px)!important;letter-spacing:.1em!important;margin-top:clamp(14px,1vw,22px)!important} html body .home-v2 #hv-work .hv-meta{font-size:clamp(14px,.85vw,17px)!important;font-weight:300!important;color:rgba(200,140,112,.78)!important;margin-top:6px!important} html body .home-v2 #hv-work .hv-note{font-size:clamp(13px,.78vw,16px)!important;font-weight:300!important;color:rgba(200,140,112,.62)!important;margin-top:2px!important} } /* ===== PALETA: 3 odstíny pro celý web (přidej úplně na konec CSS) ===== Výjimka: hero řádek „EUROPEAN COMPOSER · FILM & COMMERCIALS“ (.hv-role) zůstává beze změny. Odstín 1 = nadpisy, názvy, odkazy · 2 = čitelné texty a fakta · 3 = tlumené poznámky a čas */ html { --tone-1: rgba(174, 81, 60, 0.9); /* sytá měď – názvy, nadpisy, odkazy */ --tone-2: rgba(200, 140, 112, 0.78); /* světlá měď – fakta, popisky, texty */ --tone-3: rgba(200, 140, 112, 0.62); /* tlumená měď – poznámky, ocenění, čas */ --ink: var(--tone-1); } /* odstín 1 */ html body .home-v2 .hv-label, html body .home-v2 .hv-card-name, html body .home-v2 .hv-link, html body .home-v2 .hv-award-name, html body .home-v2 .hv-award-name *, html body .home-v2 .hv-clients, html body .home-v2 .hv-clients *, html body .home-v2 .hv-contact-head, html body .home-v2 .hv-contact-head *, html body .home-v2 .hv-contact-sub, html body .home-v2 .hv-email, html body .home-v2 .hv-quote, html body .home-v2 .hv-quote *, html body .home-v2 .hv-claim, html body .home-v2 .hv-title, html body .home-v2 .hv-scroll { color: var(--tone-1) !important; } /* odstín 2 */ html body .home-v2 #hv-work .hv-col-label, html body .home-v2 #hv-work .hv-meta, html body .home-v2 .hv-award-status, html body .home-v2 .hv-award-project, html body .home-v2 .hv-about-text, html body .home-v2 .hv-about-text a { color: var(--tone-2) !important; } html body .home-v2 .hv-about-text a { text-decoration: underline; text-underline-offset: 0.18em; } /* odstín 3 */ html body .home-v2 #hv-work .hv-note, html body .home-v2 #hv-work .hv-hint, html body .home-v2 .hv-sub { color: var(--tone-3) !important; } /* přehrávač (LISTEN) */ html body .home-v2 .hv-listen { --trk-meta-color: var(--tone-2); --trk-time-color: var(--tone-3); } /* najetí na odkaz: stejná měď, plná sytost (bez dalšího odstínu) */ @media (hover: hover) and (pointer: fine) { html body a:hover { color: rgb(200, 140, 112) !important; } } /* ===== ČITELNOST NA NOTEBOOKU: větší písmo + světlejší odstíny (přidej úplně na konec CSS) ===== */ html { --tone-2: rgba(200, 140, 112, 0.9); /* bylo 0.78 */ --tone-3: rgba(200, 140, 112, 0.78); /* bylo 0.62 */ } @media (hover: hover) and (pointer: fine) { /* HERO: řádek EUROPEAN COMPOSER – větší, silnější tah a jemný stín pro oddělení od fotky */ html body .home-v2 .hv-role { font-size: clamp(18px, 1.4vw, 30px) !important; font-weight: 300 !important; font-variation-settings: "wght" 300, "wdth" 100 !important; text-shadow: 0 0 16px rgba(0, 0, 0, 0.55); } /* menu drží stejnou velikost jako role */ [id="X4279915566"] .page-content, [id="X4279915566"] .page-content * { font-size: clamp(18px, 1.4vw, 30px) !important; } /* HERO: claim – jen větší písmo, barva zůstává původní rezavá */ html body .home-v2.home-v2.home-v2 .hv-claim.hv-claim { font-size: max(18px, min(1.85vw, 3.5vh)) !important; } html body .home-v2.home-v2.home-v2 .hv-claim.hv-claim .hv-glow { color: rgba(240, 206, 184, 1) !important; } /* SELECTED WORK: názvy a popisky pod videi – větší */ html body .home-v2 #hv-work .hv-card-name { font-size: clamp(25px, 1.95vw, 42px) !important; font-weight: 300 !important; font-variation-settings: "wght" 300, "wdth" 100 !important; } html body .home-v2 #hv-work .hv-meta { font-size: clamp(17px, 1.1vw, 23px) !important; font-weight: 350 !important; } html body .home-v2 #hv-work .hv-note { font-size: clamp(15.5px, 0.97vw, 20px) !important; font-weight: 350 !important; } } /* ===== SELECTED WORK: bez poznámky o sluchátkách, větší kategorie v rezavé barvě (přidej na konec CSS) ===== */ html body .home-v2 #hv-work .hv-hint { display: none !important; } html body .home-v2 #hv-work .hv-col-label { color: var(--tone-1) !important; /* rezavá */ font-size: clamp(20px, 1.5vw, 32px) !important; /* velikost FILM / COMMERCIAL */ letter-spacing: 0.3em !important; font-weight: 300 !important; font-variation-settings: "wght" 300, "wdth" 100 !important; } /* ===== hero_H1_claim-pod-jmenem – přidej úplně na konec CSS (použij JEN JEDNU z variant H1/H2/H3) ===== */ @media (hover: hover) and (pointer: fine) { html body .home-v2 .hv-name-dim { color: rgba(174, 81, 60, 0.30) !important; } } /* H1: claim hned pod jménem, role až pod ním */ @media (hover: hover) and (pointer: fine) { html body .home-v2 .hv-hero .hv-name { order: 1; } html body .home-v2 .hv-hero .hv-claim { order: 2; } html body .home-v2 .hv-hero .hv-role { order: 3; } html body .home-v2 .hv-hero .hv-scroll { order: 4; } html body .home-v2.home-v2.home-v2 .hv-claim.hv-claim { margin-top: min(2.4vw, 4.4vh) !important; font-size: max(20px, min(2.3vw, 4.2vh)) !important; line-height: 1.9 !important; } html body .home-v2 .hv-role { margin-top: min(2.2vw, 4vh) !important; margin-bottom: 0 !important; } } /* ===== HERO: „LIGHT UP“ se při najetí kurzoru rozzáří (přidej úplně na konec CSS) ===== */ @media (hover: hover) and (pointer: fine) { html body .home-v2 .hv-claim .hv-glow { position: relative; z-index: 1; cursor: default; transition: color 0.7s ease, text-shadow 0.7s ease; } /* měkké světlo za slovy */ html body .home-v2 .hv-claim .hv-glow::before { content: ""; position: absolute; z-index: -1; inset: -1.6em -1.4em; background: radial-gradient(ellipse at center, rgba(255, 196, 150, 0.30) 0%, rgba(255, 170, 120, 0.12) 40%, rgba(255, 170, 120, 0) 70%); opacity: 0; transition: opacity 0.8s ease; pointer-events: none; } html body .home-v2 .hv-claim .hv-glow:hover { color: rgb(255, 238, 222) !important; text-shadow: 0 0 6px rgba(255, 226, 200, 0.85), 0 0 22px rgba(255, 196, 150, 0.75), 0 0 56px rgba(255, 160, 110, 0.55), 0 0 120px rgba(255, 140, 90, 0.35) !important; } html body .home-v2 .hv-claim .hv-glow:hover::before { opacity: 1; } } /* ===== HERO: nad claimem tma, nad „LIGHT UP“ klasický kužel světla ===== */ @media (hover: hover) and (pointer: fine) { body:has(.home-v2 .hv-claim:hover):not(:has(.home-v2 .hv-glow:hover)), body:has(.home-v2 .hv-claim:hover):not(:has(.home-v2 .hv-glow:hover)) .backdrop { --dim-radius: 1px !important; /* tma nad claimem */ } body:has(.home-v2 .hv-claim:hover):not(:has(.home-v2 .hv-glow:hover)) .spotlight-overlay { opacity: 0 !important; /* bez přísvitu nad claimem */ } } /* ===== HERO: „LIGHT UP“ bez záře navíc při najetí (přidej úplně na konec CSS) ===== */ @media (hover: hover) and (pointer: fine) { html body .home-v2 .hv-claim .hv-glow:hover { color: rgba(232, 186, 160, 0.96) !important; text-shadow: 0 0 28px rgba(255, 214, 186, 0.35), 0 0 70px rgba(255, 190, 150, 0.18) !important; } html body .home-v2 .hv-claim .hv-glow::before { content: none !important; } } /* === SELECTED WORK: hierarchie popisků + nadpis uprostřed (počítač) === */ @media (hover: hover) and (pointer: fine) { /* barvy z hero: název = rez (--tone-1), kredit = světlá měď jako EUROPEAN COMPOSER, ocenění = tatáž měď tlumeněji */ /* nadpis: stejná mezera nad ním (od menu) a pod ním (k FILMS / COMMERCIAL) */ html body .home-v2 #hv-work.hv-section { --hl-gap: clamp(56px, 4.6vw, 92px); padding-top: calc(var(--hl-gap) + 5px + clamp(84px, 6.4vw, 110px)) !important; } html body .home-v2 #hv-work .hv-label { margin-bottom: calc(var(--hl-gap) - 11px) !important; } /* základní kredit: světlá měď z hero, o ~8 % větší */ html body .home-v2 #hv-work .hv-meta { font-size: clamp(18.5px, 1.19vw, 25px) !important; color: rgba(232, 186, 160, 0.9) !important; /* = .hv-role v hero */ margin-top: 8px !important; } /* ocenění: odstup navíc a tišší odstín */ html body .home-v2 #hv-work .hv-note { font-size: clamp(16.5px, 1.05vw, 22px) !important; color: rgba(232, 186, 160, 0.68) !important; /* stejná měď, tišší */ margin-top: clamp(10px, .8vw, 14px) !important; } } /* === FILM / COMMERCIAL: užší prostrkání, serif zůstává === */ html body .home-v2 #hv-work .hv-col-label { letter-spacing: 0.21em !important; font-size: clamp(18.5px, 1.4vw, 30px) !important; padding-left: 0.21em !important; } /* === SELECTED WORK: dorovnání středu nadpisu (přidej úplně na konec CSS) === */ @media (hover: hover) and (pointer: fine) { html body .home-v2 #hv-work.hv-section { padding-top: calc(var(--hl-gap) + 5px + clamp(84px, 6.4vw, 110px) - 1.75vw) !important; } html body .home-v2 #hv-work .hv-label { margin-bottom: calc(var(--hl-gap) - 11px + 1.75vw) !important; } } /* === ALL FILMS / ALL COMMERCIALS / ALL MUSIC / FULL BIO: stejná velikost jako FILM / COMMERCIAL === */ @media (hover: hover) and (pointer: fine) { html body .home-v2 .hv-link, html body .home-v2 #hv-work .hv-col-link { font-size: clamp(18.5px, 1.4vw, 30px) !important; /* = velikost FILM / COMMERCIAL */ } } /* ===================================================================== HLAVIČKA: fade out při scrollu dolů, fade in při scrollu nahoru (třídu "hdr-hidden" přidává skript v globálním HTML) rychlost zmizení/objevení: 0.45s ===================================================================== */ [id="X4279915566"], .hdr-blur { transition: opacity 0.45s ease, visibility 0s linear 0s !important; } body.hdr-hidden [id="X4279915566"], body.hdr-hidden .hdr-blur { opacity: 0 !important; visibility: hidden !important; transition: opacity 0.45s ease, visibility 0s linear 0.45s !important; } body.hdr-hidden [id="X4279915566"] a { pointer-events: none !important; } /* ===================================================================== NÁVRH 12 · OKRAJOVÝ SLOUPEC (jen počítač) nadpisy sekcí svisle v levém okraji, obsah ve dvou sloupcích, mezera mezi sloupci přesně na ose stránky, tabulky LISTEN / RECOGNITION, WORKED WITH velkým písmem doleva. Hero se nemění. Vkládá se na úplný konec CSS. Řádky přehrávače patří do globálního HTML. ===================================================================== */ @media (hover: hover) and (pointer: fine) { /* ---------- ladění: všechny míry na jednom místě ---------- */ html body .home-v2 { --v-okraj: 4.23vw; /* levý okraj ke svislému nadpisu (64 px na 1512) */ --v-obsah: 12.17vw; /* odsazení obsahu zleva i zprava (184 px) – drží mezeru na ose */ --v-mezera: 13.23vw; /* mezera mezi sekcemi (200 px) */ --v-sloupce: 2.65vw; /* mezera mezi dvěma sloupci (40 px) */ --v-nadpis: clamp(18px, 1.59vw, 34px); /* svislý nadpis sekce (24 px) */ --v-nazev: clamp(18px, 1.455vw, 30px); /* název díla (22 px) */ --v-radek: clamp(17px, 1.32vw, 28px); /* název skladby / ocenění (20 px) */ --v-text: clamp(14.5px, 0.99vw, 21px); /* kredity, popisky, časy (15 px) */ --v-maly: clamp(11.5px, 0.8vw, 17px); /* štítky FILM / COMMERCIAL, poznámky (12 px) */ --v-odkaz: clamp(12px, 0.86vw, 18px); /* ALL FILMS, ALL MUSIC… (13 px) */ --v-med: rgba(232, 186, 160, 0.9); /* světlá měď z hero */ --v-med-tisi: rgba(232, 186, 160, 0.62); /* tišší měď */ } /* ---------- sekce: stejné odsazení vlevo i vpravo ---------- */ html body .home-v2 .hv-sections { padding-bottom: 0 !important; } html body .home-v2 .hv-sections > .hv-section, html body .home-v2 #hv-work.hv-section { position: relative !important; max-width: none !important; margin: 0 !important; padding: 0 var(--v-obsah) var(--v-mezera) !important; text-align: left !important; } html body .home-v2 #hv-work.hv-section { padding-top: var(--v-mezera) !important; } /* ---------- svislý nadpis v okraji (čte se zdola nahoru) ---------- */ html body .home-v2 .hv-section .hv-label, html body .home-v2 #hv-work .hv-label, html body .home-v2 .hv-about .hv-label, html body .home-v2 .hv-contact::before { position: absolute !important; left: var(--v-okraj) !important; margin: 0 !important; padding: 0 !important; writing-mode: vertical-rl !important; transform: rotate(180deg) !important; white-space: nowrap !important; font-family: "Kalnia", serif !important; font-weight: 250 !important; font-variation-settings: "wght" 250, "wdth" 100 !important; font-size: var(--v-nadpis) !important; line-height: 1 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; text-align: right !important; color: var(--ink) !important; } /* KONTAKT nemá v HTML nadpis – doplní se tady */ html body .home-v2 .hv-contact::before { content: "Contact"; } /* drobná poznámka svisle hned vedle nadpisu */ html body .home-v2 #hv-work .hv-hint, html body .home-v2 .hv-section .hv-sub { position: absolute !important; left: calc(var(--v-okraj) + var(--v-nadpis) + 14px) !important; margin: 0 !important; padding: 0 !important; max-width: none !important; writing-mode: vertical-rl !important; transform: rotate(180deg) !important; white-space: nowrap !important; font-family: "Geist", sans-serif !important; font-weight: 300 !important; font-size: var(--v-maly) !important; line-height: 1 !important; letter-spacing: 0.04em !important; text-transform: none !important; text-align: right !important; color: var(--v-med-tisi) !important; opacity: 1 !important; } /* poznámku „Best heard on headphones…“ máš v CSS skrytou (display: none). Pokud ji chceš svisle vedle nadpisu jako v návrhu, smaž na dalším řádku komentářové značky na začátku a na konci. */ /* html body .home-v2 #hv-work .hv-hint { display: block !important; } */ /* ---------- SELECTED WORK ---------- */ html body .home-v2 #hv-work column-set { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: var(--v-sloupce) !important; padding: 0 !important; margin: 0 !important; width: auto !important; } html body .home-v2 #hv-work column-unit { grid-column: auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; } html body .home-v2 #hv-work .hv-col-label { display: block !important; margin: 0 0 clamp(14px, 1.32vw, 28px) !important; padding: 0 !important; font-family: "Geist", sans-serif !important; font-weight: 400 !important; font-size: var(--v-maly) !important; letter-spacing: 0.24em !important; text-transform: uppercase !important; text-align: left !important; color: var(--v-med-tisi) !important; opacity: 1 !important; } html body .home-v2 #hv-work .hv-card { margin: 0 !important; text-align: left !important; } html body .home-v2 #hv-work .hv-card + .hv-card { margin-top: 4.76vw !important; /* 72 px mezi kartami nad sebou */ } html body .home-v2 #hv-work .hv-card-name { display: block !important; margin: 1.85vw 0 0 !important; /* 28 px pod fotkou */ font-size: var(--v-nazev) !important; line-height: 1.15 !important; letter-spacing: 0.06em !important; text-align: left !important; color: var(--ink) !important; } html body .home-v2 #hv-work .hv-meta, html body .home-v2 #hv-work .hv-note { display: block !important; font-family: "Geist", sans-serif !important; font-weight: 300 !important; font-size: var(--v-text) !important; line-height: 1.5 !important; letter-spacing: 0.005em !important; text-transform: none !important; text-align: left !important; opacity: 1 !important; } html body .home-v2 #hv-work .hv-meta { margin: 0.8vw 0 0 !important; /* 12 px pod názvem */ color: var(--v-med) !important; } html body .home-v2 #hv-work .hv-card-name + .hv-meta { margin-top: 0.8vw !important; } html body .home-v2 #hv-work .hv-note { margin: 0 !important; color: var(--v-med-tisi) !important; } /* ---------- odkazy ALL FILMS / ALL COMMERCIALS / ALL MUSIC / FULL BIO ---------- */ html body .home-v2 .hv-section .hv-link, html body .home-v2 #hv-work .hv-col-link { display: block !important; width: auto !important; margin: 3.17vw 0 0 !important; /* 48 px */ padding: 0 !important; font-family: "Geist", sans-serif !important; font-weight: 400 !important; font-variation-settings: normal !important; font-size: var(--v-odkaz) !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; text-align: left !important; text-decoration: none !important; color: var(--ink) !important; } html body .home-v2 .hv-section .hv-link:hover, html body .home-v2 #hv-work .hv-col-link:hover { text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 0.5em !important; } /* ---------- LISTEN (vzhled řádků doplňuje globální HTML) ---------- */ html body .home-v2 .hv-listen { max-width: none !important; margin: 0 !important; padding: 0 !important; --v-sloupce-px: var(--v-sloupce); } html body .home-v2 .hv-listen + .hv-link { margin-top: 0.8vw !important; } /* ---------- RECOGNITION jako tabulka ---------- */ html body .home-v2 #hv-recognition .hv-award { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: var(--v-sloupce) !important; align-items: baseline !important; margin: 0 !important; padding: 0 0 2.38vw !important; /* 36 px mezi řádky */ gap: 0 var(--v-sloupce) !important; text-align: left !important; border: 0 !important; background: none !important; } html body .home-v2 #hv-recognition .hv-award media-item { display: none !important; } html body .home-v2 #hv-recognition .hv-award-name { grid-column: 1 !important; grid-row: 1 !important; font-size: var(--v-radek) !important; line-height: 1.2 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; text-decoration: none !important; color: var(--ink) !important; } html body .home-v2 #hv-recognition .hv-award-project, html body .home-v2 #hv-recognition .hv-award-status { grid-column: 2 !important; grid-row: 1 !important; font-family: "Geist", sans-serif !important; font-weight: 300 !important; font-size: var(--v-text) !important; line-height: 1.4 !important; letter-spacing: 0.005em !important; text-transform: none !important; color: var(--v-med-tisi) !important; opacity: 1 !important; } html body .home-v2 #hv-recognition .hv-award-project { justify-self: start !important; padding-right: 13em !important; /* místo pro ocenění vpravo */ } html body .home-v2 #hv-recognition .hv-award-status { justify-self: end !important; text-align: right !important; } /* ---------- WORKED WITH: velké písmo, doleva ---------- */ html body .home-v2 .hv-clients { display: block !important; max-width: none !important; margin: -0.66vw 0 0 !important; text-align: left !important; font-size: clamp(30px, 2.65vw, 56px) !important; /* 40 px – jako dosud */ line-height: 1.6 !important; letter-spacing: 0.06em !important; } html body .home-v2 .hv-clients .hv-client { white-space: nowrap !important; } /* ---------- ABOUT: fotka vlevo, text vpravo ---------- */ html body .home-v2 .hv-about column-set { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: var(--v-sloupce) !important; align-items: start !important; padding: 0 !important; margin: 0 !important; position: static !important; } html body .home-v2 .hv-about column-unit { grid-column: auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; position: static !important; transform: none !important; } html body .home-v2 .hv-about-text { max-width: none !important; margin: 0 !important; font-family: "Geist", sans-serif !important; font-weight: 300 !important; font-size: clamp(16px, 1.12vw, 24px) !important; /* 17 px */ line-height: 1.7 !important; color: var(--v-med) !important; opacity: 1 !important; } html body .home-v2 .hv-about-text a { color: var(--ink) !important; text-decoration: none !important; } html body .home-v2 .hv-quote { margin: 3.17vw 0 0 !important; padding: 0 !important; border: 0 !important; font-size: var(--v-nazev) !important; line-height: 1.35 !important; letter-spacing: 0.05em !important; text-wrap: balance; } html body .home-v2 .hv-quote::after { content: none !important; } /* ---------- CONTACT ---------- */ html body .home-v2 .hv-sections > .hv-contact { text-align: left !important; } html body .home-v2 .hv-contact-head { margin: 0 !important; padding: 0 !important; font-size: clamp(32px, 2.9vw, 62px) !important; /* 44 px */ line-height: 1.2 !important; letter-spacing: 0.08em !important; text-align: left !important; } html body .home-v2 .hv-contact-sub { margin: 1.59vw 0 0 !important; font-family: "Geist", sans-serif !important; font-weight: 300 !important; font-variation-settings: normal !important; font-size: var(--v-text) !important; letter-spacing: 0.005em !important; color: var(--v-med-tisi) !important; opacity: 1 !important; text-align: left !important; } html body .home-v2 .hv-email { margin: 2.65vw 0 0 !important; font-size: var(--v-nazev) !important; letter-spacing: 0.06em !important; text-decoration: none !important; border-bottom: 1px solid rgba(174, 81, 60, 0.45) !important; padding-bottom: 6px !important; } } /* ===================================================================== NÁVRH 12 · OKRAJOVÝ SLOUPEC (jen počítač) nadpisy sekcí svisle v levém okraji, obsah ve dvou sloupcích, mezera mezi sloupci přesně na ose stránky, tabulky LISTEN / RECOGNITION, WORKED WITH velkým písmem doleva. Hero se nemění. Vkládá se na úplný konec CSS. Řádky přehrávače patří do globálního HTML. ===================================================================== */ @media (hover: hover) and (pointer: fine) { /* ---------- ladění: všechny míry na jednom místě ---------- */ html body .home-v2 { --v-okraj: 4.23vw; /* levý okraj ke svislému nadpisu (64 px na 1512) */ --v-obsah: 12.17vw; /* odsazení obsahu zleva i zprava (184 px) – drží mezeru na ose */ --v-mezera: 13.23vw; /* mezera mezi sekcemi (200 px) */ --v-sloupce: 2.65vw; /* mezera mezi dvěma sloupci (40 px) */ --v-nadpis: clamp(18px, 1.59vw, 34px); /* svislý nadpis sekce (24 px) */ --v-nazev: clamp(18px, 1.455vw, 30px); /* název díla (22 px) */ --v-radek: clamp(17px, 1.32vw, 28px); /* název skladby / ocenění (20 px) */ --v-text: clamp(14.5px, 0.99vw, 21px); /* kredity, popisky, časy (15 px) */ --v-maly: clamp(11.5px, 0.8vw, 17px); /* štítky FILM / COMMERCIAL, poznámky (12 px) */ --v-odkaz: clamp(12px, 0.86vw, 18px); /* ALL FILMS, ALL MUSIC… (13 px) */ --v-med: rgba(232, 186, 160, 0.9); /* světlá měď z hero */ --v-med-tisi: rgba(232, 186, 160, 0.62); /* tišší měď */ } /* ---------- sekce: stejné odsazení vlevo i vpravo ---------- */ html body .home-v2 .hv-sections { padding-bottom: 0 !important; } html body .home-v2 .hv-sections > .hv-section, html body .home-v2 #hv-work.hv-section { position: relative !important; max-width: none !important; margin: 0 !important; padding: 0 var(--v-obsah) var(--v-mezera) !important; text-align: left !important; } html body .home-v2 #hv-work.hv-section { padding-top: var(--v-mezera) !important; } /* ---------- svislý nadpis v okraji (čte se zdola nahoru) ---------- */ html body .home-v2 .hv-section .hv-label, html body .home-v2 #hv-work .hv-label, html body .home-v2 .hv-about .hv-label, html body .home-v2 .hv-contact::before { position: absolute !important; left: var(--v-okraj) !important; margin: 0 !important; padding: 0 !important; writing-mode: vertical-rl !important; transform: rotate(180deg) !important; white-space: nowrap !important; font-family: "Kalnia", serif !important; font-weight: 250 !important; font-variation-settings: "wght" 250, "wdth" 100 !important; font-size: var(--v-nadpis) !important; line-height: 1 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; text-align: right !important; color: var(--ink) !important; } /* KONTAKT nemá v HTML nadpis – doplní se tady */ html body .home-v2 .hv-contact::before { content: "Contact"; } /* drobná poznámka svisle hned vedle nadpisu */ html body .home-v2 #hv-work .hv-hint, html body .home-v2 .hv-section .hv-sub { position: absolute !important; left: calc(var(--v-okraj) + var(--v-nadpis) + 14px) !important; margin: 0 !important; padding: 0 !important; max-width: none !important; writing-mode: vertical-rl !important; transform: rotate(180deg) !important; white-space: nowrap !important; font-family: "Geist", sans-serif !important; font-weight: 300 !important; font-size: var(--v-maly) !important; line-height: 1 !important; letter-spacing: 0.04em !important; text-transform: none !important; text-align: right !important; color: var(--v-med-tisi) !important; opacity: 1 !important; } /* poznámku „Best heard on headphones…“ máš v CSS skrytou (display: none). Pokud ji chceš svisle vedle nadpisu jako v návrhu, smaž na dalším řádku komentářové značky na začátku a na konci. */ /* html body .home-v2 #hv-work .hv-hint { display: block !important; } */ /* ---------- SELECTED WORK ---------- */ html body .home-v2 #hv-work column-set { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: var(--v-sloupce) !important; padding: 0 !important; margin: 0 !important; width: auto !important; } html body .home-v2 #hv-work column-unit { grid-column: auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; } html body .home-v2 #hv-work .hv-col-label { display: block !important; margin: 0 0 clamp(14px, 1.32vw, 28px) !important; padding: 0 !important; font-family: "Geist", sans-serif !important; font-weight: 400 !important; font-size: var(--v-maly) !important; letter-spacing: 0.24em !important; text-transform: uppercase !important; text-align: left !important; color: var(--v-med-tisi) !important; opacity: 1 !important; } html body .home-v2 #hv-work .hv-card { margin: 0 !important; text-align: left !important; } html body .home-v2 #hv-work .hv-card + .hv-card { margin-top: 4.76vw !important; /* 72 px mezi kartami nad sebou */ } html body .home-v2 #hv-work .hv-card-name { display: block !important; margin: 1.85vw 0 0 !important; /* 28 px pod fotkou */ font-size: var(--v-nazev) !important; line-height: 1.15 !important; letter-spacing: 0.06em !important; text-align: left !important; color: var(--ink) !important; } html body .home-v2 #hv-work .hv-meta, html body .home-v2 #hv-work .hv-note { display: block !important; font-family: "Geist", sans-serif !important; font-weight: 300 !important; font-size: var(--v-text) !important; line-height: 1.5 !important; letter-spacing: 0.005em !important; text-transform: none !important; text-align: left !important; opacity: 1 !important; } html body .home-v2 #hv-work .hv-meta { margin: 0.8vw 0 0 !important; /* 12 px pod názvem */ color: var(--v-med) !important; } html body .home-v2 #hv-work .hv-card-name + .hv-meta { margin-top: 0.8vw !important; } html body .home-v2 #hv-work .hv-note { margin: 0 !important; color: var(--v-med-tisi) !important; } /* ---------- odkazy ALL FILMS / ALL COMMERCIALS / ALL MUSIC / FULL BIO ---------- */ html body .home-v2 .hv-section .hv-link, html body .home-v2 #hv-work .hv-col-link { display: block !important; width: auto !important; margin: 3.17vw 0 0 !important; /* 48 px */ padding: 0 !important; font-family: "Geist", sans-serif !important; font-weight: 400 !important; font-variation-settings: normal !important; font-size: var(--v-odkaz) !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; text-align: left !important; text-decoration: none !important; color: var(--ink) !important; } html body .home-v2 .hv-section .hv-link:hover, html body .home-v2 #hv-work .hv-col-link:hover { text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 0.5em !important; } /* ---------- LISTEN (vzhled řádků doplňuje globální HTML) ---------- */ html body .home-v2 .hv-listen { max-width: none !important; margin: 0 !important; padding: 0 !important; --v-sloupce-px: var(--v-sloupce); } html body .home-v2 .hv-listen + .hv-link { margin-top: 3.17vw !important; } /* ---------- RECOGNITION jako tabulka: logo · soutěž | projekt · ocenění ---------- */ html body .home-v2 #hv-recognition .hv-award { display: grid !important; /* logo + název = levý sloupec, projekt a ocenění = pravý sloupec (začíná na stejné ose jako fotky) */ grid-template-columns: var(--award-logo, clamp(126px, 8vw, 196px)) minmax(0, 1fr) calc(50% - var(--v-sloupce) / 2) !important; column-gap: var(--v-sloupce) !important; gap: 0 var(--v-sloupce) !important; align-items: center !important; margin: 0 !important; padding: 1.19vw 0 !important; /* 18 px nad i pod řádkem */ border-top: 0 !important; border-bottom: 1px solid rgba(174, 81, 60, 0.25) !important; /* linka mezi řádky */ text-align: left !important; background: none !important; } html body .home-v2 #hv-recognition .hv-award media-item { display: block !important; grid-column: 1 !important; grid-row: 1 !important; width: var(--award-logo, clamp(126px, 8vw, 196px)) !important; margin: 0 !important; } html body .home-v2 #hv-recognition .hv-award-name { grid-column: 2 !important; grid-row: 1 !important; font-size: var(--v-radek) !important; line-height: 1.2 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; text-decoration: none !important; color: var(--ink) !important; } html body .home-v2 #hv-recognition .hv-award-project, html body .home-v2 #hv-recognition .hv-award-status { grid-column: 3 !important; grid-row: 1 !important; font-family: "Geist", sans-serif !important; font-weight: 300 !important; font-size: var(--v-text) !important; line-height: 1.4 !important; letter-spacing: 0.005em !important; text-transform: none !important; color: var(--v-med-tisi) !important; opacity: 1 !important; } html body .home-v2 #hv-recognition .hv-award-project { justify-self: start !important; padding-right: 13em !important; /* místo pro ocenění vpravo */ } html body .home-v2 #hv-recognition .hv-award-status { justify-self: end !important; text-align: right !important; } /* ---------- WORKED WITH: velké písmo, doleva ---------- */ html body .home-v2 .hv-clients { display: block !important; max-width: none !important; margin: -0.66vw 0 0 !important; text-align: left !important; font-size: clamp(30px, 2.65vw, 56px) !important; /* 40 px – jako dosud */ line-height: 1.6 !important; letter-spacing: 0.06em !important; } html body .home-v2 .hv-clients .hv-client { white-space: nowrap !important; } /* ---------- ABOUT: fotka vlevo, text vpravo ---------- */ html body .home-v2 .hv-about column-set { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: var(--v-sloupce) !important; align-items: start !important; padding: 0 !important; margin: 0 !important; position: static !important; } html body .home-v2 .hv-about column-unit { grid-column: auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; position: static !important; transform: none !important; } html body .home-v2 .hv-about-text { max-width: none !important; margin: 0 !important; font-family: "Geist", sans-serif !important; font-weight: 300 !important; font-size: clamp(16px, 1.12vw, 24px) !important; /* 17 px */ line-height: 1.7 !important; color: var(--v-med) !important; opacity: 1 !important; } html body .home-v2 .hv-about-text a { color: var(--ink) !important; text-decoration: underline !important; /* podtržení jako dosud */ text-decoration-thickness: 1px !important; text-underline-offset: 0.18em !important; } /* citát: svislá linka a podpis „— Jan Šléška“ zůstávají jako dosud */ html body .home-v2 .hv-quote { margin: 3.17vw 0 0 !important; padding: 0 0 0 1.85vw !important; /* 28 px od linky */ border-left: 1px solid rgba(174, 81, 60, 0.45) !important; font-size: var(--v-nazev) !important; line-height: 1.35 !important; letter-spacing: 0.05em !important; text-wrap: balance; } html body .home-v2 .hv-quote::after { margin-top: 1.06vw !important; font-size: var(--v-maly) !important; } /* ---------- CONTACT ---------- */ html body .home-v2 .hv-sections > .hv-contact { text-align: left !important; } html body .home-v2 .hv-contact-head { margin: 0 !important; padding: 0 !important; font-size: clamp(32px, 2.9vw, 62px) !important; /* 44 px */ line-height: 1.2 !important; letter-spacing: 0.08em !important; text-align: left !important; } html body .home-v2 .hv-contact-sub { margin: 1.59vw 0 0 !important; font-family: "Geist", sans-serif !important; font-weight: 300 !important; font-variation-settings: normal !important; font-size: var(--v-text) !important; letter-spacing: 0.005em !important; color: var(--v-med-tisi) !important; opacity: 1 !important; text-align: left !important; } html body .home-v2 .hv-email { margin: 2.65vw 0 0 !important; font-size: var(--v-nazev) !important; letter-spacing: 0.06em !important; text-decoration: none !important; border-bottom: 1px solid rgba(174, 81, 60, 0.45) !important; padding-bottom: 6px !important; } } /* ===================================================================== NÁVRH 12 · OKRAJOVÝ SLOUPEC (jen počítač) nadpisy sekcí svisle v levém okraji, obsah ve dvou sloupcích, mezera mezi sloupci přesně na ose stránky, tabulky LISTEN / RECOGNITION, WORKED WITH velkým písmem doleva. Hero se nemění. Vkládá se na úplný konec CSS. Řádky přehrávače patří do globálního HTML. ===================================================================== */ @media (hover: hover) and (pointer: fine) { /* ---------- ladění: všechny míry na jednom místě ---------- */ html body .home-v2 { --v-okraj: 4.23vw; /* levý okraj ke svislému nadpisu (64 px na 1512) */ --v-obsah: 12.17vw; /* odsazení obsahu zleva i zprava (184 px) – drží mezeru na ose */ --v-mezera: 13.23vw; /* mezera mezi sekcemi (200 px) */ --v-sloupce: 2.65vw; /* mezera mezi dvěma sloupci (40 px) */ --v-nadpis: clamp(18px, 1.59vw, 34px); /* svislý nadpis sekce (24 px) */ --v-nazev: clamp(18px, 1.455vw, 30px); /* název díla (22 px) */ --v-radek: clamp(17px, 1.32vw, 28px); /* název skladby / ocenění (20 px) */ --v-text: clamp(14.5px, 0.99vw, 21px); /* kredity, popisky, časy (15 px) */ --v-maly: clamp(11.5px, 0.8vw, 17px); /* štítky FILM / COMMERCIAL, poznámky (12 px) */ --v-odkaz: clamp(12px, 0.86vw, 18px); /* ALL FILMS, ALL MUSIC… (13 px) */ --v-med: rgba(232, 186, 160, 0.9); /* světlá měď z hero */ --v-med-tisi: rgba(232, 186, 160, 0.62); /* tišší měď */ } /* ---------- sekce: stejné odsazení vlevo i vpravo ---------- */ html body .home-v2 .hv-sections { padding-bottom: 0 !important; } html body .home-v2 .hv-sections > .hv-section, html body .home-v2 #hv-work.hv-section { position: relative !important; max-width: none !important; margin: 0 !important; padding: 0 var(--v-obsah) var(--v-mezera) !important; text-align: left !important; } html body .home-v2 #hv-work.hv-section { padding-top: var(--v-mezera) !important; } /* ---------- svislý nadpis v okraji (čte se zdola nahoru) ---------- */ html body .home-v2 .hv-section .hv-label, html body .home-v2 #hv-work .hv-label, html body .home-v2 .hv-about .hv-label, html body .home-v2 .hv-contact::before { position: absolute !important; left: var(--v-okraj) !important; margin: 0 !important; padding: 0 !important; writing-mode: vertical-rl !important; transform: rotate(180deg) !important; white-space: nowrap !important; font-family: "Kalnia", serif !important; font-weight: 250 !important; font-variation-settings: "wght" 250, "wdth" 100 !important; font-size: var(--v-nadpis) !important; line-height: 1 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; text-align: right !important; color: var(--ink) !important; } /* KONTAKT nemá v HTML nadpis – doplní se tady */ html body .home-v2 .hv-contact::before { content: "Contact"; } /* drobná poznámka svisle hned vedle nadpisu */ html body .home-v2 #hv-work .hv-hint, html body .home-v2 .hv-section .hv-sub { position: absolute !important; left: calc(var(--v-okraj) + var(--v-nadpis) + 14px) !important; margin: 0 !important; padding: 0 !important; max-width: none !important; writing-mode: vertical-rl !important; transform: rotate(180deg) !important; white-space: nowrap !important; font-family: "Geist", sans-serif !important; font-weight: 300 !important; font-size: var(--v-maly) !important; line-height: 1 !important; letter-spacing: 0.04em !important; text-transform: none !important; text-align: right !important; color: var(--v-med-tisi) !important; opacity: 1 !important; } /* poznámku „Best heard on headphones…“ máš v CSS skrytou (display: none). Pokud ji chceš svisle vedle nadpisu jako v návrhu, smaž na dalším řádku komentářové značky na začátku a na konci. */ /* html body .home-v2 #hv-work .hv-hint { display: block !important; } */ /* ---------- SELECTED WORK ---------- */ html body .home-v2 #hv-work column-set { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: var(--v-sloupce) !important; padding: 0 !important; margin: 0 !important; width: auto !important; } html body .home-v2 #hv-work column-unit { grid-column: auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; } html body .home-v2 #hv-work .hv-col-label { display: block !important; margin: 0 0 clamp(14px, 1.32vw, 28px) !important; padding: 0 !important; font-family: "Geist", sans-serif !important; font-weight: 400 !important; font-size: var(--v-maly) !important; letter-spacing: 0.24em !important; text-transform: uppercase !important; text-align: left !important; color: var(--v-med-tisi) !important; opacity: 1 !important; } html body .home-v2 #hv-work .hv-card { margin: 0 !important; text-align: left !important; } html body .home-v2 #hv-work .hv-card + .hv-card { margin-top: 4.76vw !important; /* 72 px mezi kartami nad sebou */ } html body .home-v2 #hv-work .hv-card-name { display: block !important; margin: 1.85vw 0 0 !important; /* 28 px pod fotkou */ font-size: var(--v-nazev) !important; line-height: 1.15 !important; letter-spacing: 0.06em !important; text-align: left !important; color: var(--ink) !important; } html body .home-v2 #hv-work .hv-meta, html body .home-v2 #hv-work .hv-note { display: block !important; font-family: "Geist", sans-serif !important; font-weight: 300 !important; font-size: var(--v-text) !important; line-height: 1.5 !important; letter-spacing: 0.005em !important; text-transform: none !important; text-align: left !important; opacity: 1 !important; } html body .home-v2 #hv-work .hv-meta { margin: 0.8vw 0 0 !important; /* 12 px pod názvem */ color: var(--v-med) !important; } html body .home-v2 #hv-work .hv-card-name + .hv-meta { margin-top: 0.8vw !important; } html body .home-v2 #hv-work .hv-note { margin: 0 !important; color: var(--v-med-tisi) !important; } /* ---------- odkazy ALL FILMS / ALL COMMERCIALS / ALL MUSIC / FULL BIO ---------- */ html body .home-v2 .hv-section .hv-link, html body .home-v2 #hv-work .hv-col-link { display: block !important; width: auto !important; margin: 3.17vw 0 0 !important; /* 48 px */ padding: 0 !important; font-family: "Geist", sans-serif !important; font-weight: 400 !important; font-variation-settings: normal !important; font-size: var(--v-odkaz) !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; text-align: left !important; text-decoration: none !important; color: var(--ink) !important; } html body .home-v2 .hv-section .hv-link:hover, html body .home-v2 #hv-work .hv-col-link:hover { text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 0.5em !important; } /* ---------- LISTEN: původní přehrávač, jen přes celou šířku obsahu ---------- */ html body .home-v2 .hv-listen { max-width: none !important; margin: 0 !important; padding: 0 !important; --t-content: clamp(25px, 1.75vw, 44px); /* název skladby – o kousek menší, aby se vešel celý */ --trk-vol: clamp(90px, 6.5vw, 150px); /* šířka hlasitosti */ } html body .home-v2 .hv-listen + .hv-link { margin-top: 3.17vw !important; } /* ---------- RECOGNITION jako tabulka: logo · soutěž | projekt · ocenění ---------- */ html body .home-v2 #hv-recognition .hv-award { display: grid !important; /* logo + název = levý sloupec, projekt a ocenění = pravý sloupec (začíná na stejné ose jako fotky) */ grid-template-columns: var(--award-logo, clamp(126px, 8vw, 196px)) minmax(0, 1fr) calc(50% - var(--v-sloupce) / 2) !important; column-gap: var(--v-sloupce) !important; gap: 0 var(--v-sloupce) !important; align-items: center !important; margin: 0 !important; padding: 1.19vw 0 !important; /* 18 px nad i pod řádkem */ border-top: 0 !important; border-bottom: 1px solid rgba(174, 81, 60, 0.25) !important; /* linka mezi řádky */ text-align: left !important; background: none !important; } html body .home-v2 #hv-recognition .hv-award media-item { display: block !important; grid-column: 1 !important; grid-row: 1 !important; width: var(--award-logo, clamp(126px, 8vw, 196px)) !important; margin: 0 !important; } html body .home-v2 #hv-recognition .hv-award-name { grid-column: 2 !important; grid-row: 1 !important; font-size: var(--v-radek) !important; line-height: 1.2 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; text-decoration: none !important; color: var(--ink) !important; } html body .home-v2 #hv-recognition .hv-award-project, html body .home-v2 #hv-recognition .hv-award-status { grid-column: 3 !important; grid-row: 1 !important; font-family: "Geist", sans-serif !important; font-weight: 300 !important; font-size: var(--v-text) !important; line-height: 1.4 !important; letter-spacing: 0.005em !important; text-transform: none !important; color: var(--v-med-tisi) !important; opacity: 1 !important; } html body .home-v2 #hv-recognition .hv-award-project { justify-self: start !important; padding-right: 13em !important; /* místo pro ocenění vpravo */ } html body .home-v2 #hv-recognition .hv-award-status { justify-self: end !important; text-align: right !important; } /* ---------- WORKED WITH: velké písmo, doleva ---------- */ html body .home-v2 .hv-clients { display: block !important; max-width: none !important; margin: -0.66vw 0 0 !important; text-align: left !important; font-size: clamp(30px, 2.65vw, 56px) !important; /* 40 px – jako dosud */ line-height: 1.6 !important; letter-spacing: 0.06em !important; } html body .home-v2 .hv-clients .hv-client { white-space: nowrap !important; } /* ---------- ABOUT: fotka vlevo, text vpravo ---------- */ html body .home-v2 .hv-about column-set { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: var(--v-sloupce) !important; align-items: start !important; padding: 0 !important; margin: 0 !important; position: static !important; } html body .home-v2 .hv-about column-unit { grid-column: auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; position: static !important; transform: none !important; } html body .home-v2 .hv-about-text { max-width: none !important; margin: 0 !important; font-family: "Geist", sans-serif !important; font-weight: 300 !important; font-size: clamp(16px, 1.12vw, 24px) !important; /* 17 px */ line-height: 1.7 !important; color: var(--v-med) !important; opacity: 1 !important; } html body .home-v2 .hv-about-text a { color: var(--ink) !important; text-decoration: underline !important; /* podtržení jako dosud */ text-decoration-thickness: 1px !important; text-underline-offset: 0.18em !important; } /* citát: svislá linka a podpis „— Jan Šléška“ zůstávají jako dosud */ html body .home-v2 .hv-quote { margin: 3.17vw 0 0 !important; padding: 0 0 0 1.85vw !important; /* 28 px od linky */ border-left: 1px solid rgba(174, 81, 60, 0.45) !important; font-size: var(--v-nazev) !important; line-height: 1.35 !important; letter-spacing: 0.05em !important; text-wrap: balance; } html body .home-v2 .hv-quote::after { margin-top: 1.06vw !important; font-size: var(--v-maly) !important; } /* ---------- CONTACT ---------- */ html body .home-v2 .hv-sections > .hv-contact { text-align: left !important; } html body .home-v2 .hv-contact-head { margin: 0 !important; padding: 0 !important; font-size: clamp(32px, 2.9vw, 62px) !important; /* 44 px */ line-height: 1.2 !important; letter-spacing: 0.08em !important; text-align: left !important; } html body .home-v2 .hv-contact-sub { margin: 1.59vw 0 0 !important; font-family: "Geist", sans-serif !important; font-weight: 300 !important; font-variation-settings: normal !important; font-size: var(--v-text) !important; letter-spacing: 0.005em !important; color: var(--v-med-tisi) !important; opacity: 1 !important; text-align: left !important; } html body .home-v2 .hv-email { margin: 2.65vw 0 0 !important; font-size: var(--v-nazev) !important; letter-spacing: 0.06em !important; text-decoration: none !important; border-bottom: 1px solid rgba(174, 81, 60, 0.45) !important; padding-bottom: 6px !important; } } /* ===================================================================== NÁVRH 12 · OKRAJOVÝ SLOUPEC (jen počítač) nadpisy sekcí svisle v levém okraji, obsah ve dvou sloupcích, mezera mezi sloupci přesně na ose stránky, tabulky LISTEN / RECOGNITION, WORKED WITH velkým písmem doleva. Hero se nemění. Vkládá se na úplný konec CSS. Řádky přehrávače patří do globálního HTML. ===================================================================== */ @media (hover: hover) and (pointer: fine) { /* ---------- ladění: všechny míry na jednom místě ---------- */ html body .home-v2 { --v-okraj: 4.23vw; /* levý okraj ke svislému nadpisu (64 px na 1512) */ --v-obsah: 12.17vw; /* odsazení obsahu zleva i zprava (184 px) – drží mezeru na ose */ --v-mezera: 13.23vw; /* mezera mezi sekcemi (200 px) */ --v-sloupce: 2.65vw; /* mezera mezi dvěma sloupci (40 px) */ --v-nadpis: clamp(18px, 1.59vw, 34px); /* svislý nadpis sekce (24 px) */ --v-titul: clamp(22px, 1.75vw, 44px); /* JEDNOTNÁ velikost všech názvů: díla, skladby, ocenění, klienti, kontakt (26 px) */ --v-titul-ls: 0.1em; /* jednotné prostrkání názvů (stejné jako v přehrávači) */ --v-nazev: clamp(18px, 1.455vw, 30px); /* citát, e-mail (22 px) */ --v-radek: clamp(17px, 1.32vw, 28px); /* název skladby / ocenění (20 px) */ --v-text: clamp(14.5px, 0.99vw, 21px); /* kredity, popisky, časy (15 px) */ --v-maly: clamp(11.5px, 0.8vw, 17px); /* štítky FILM / COMMERCIAL, poznámky (12 px) */ --v-odkaz: clamp(12px, 0.86vw, 18px); /* ALL FILMS, ALL MUSIC… (13 px) */ --v-med: rgba(232, 186, 160, 0.9); /* světlá měď z hero */ --v-med-tisi: rgba(232, 186, 160, 0.62); /* tišší měď */ } /* ---------- sekce: stejné odsazení vlevo i vpravo ---------- */ html body .home-v2 .hv-sections { padding-bottom: 0 !important; } html body .home-v2 .hv-sections > .hv-section, html body .home-v2 #hv-work.hv-section { position: relative !important; max-width: none !important; margin: 0 !important; padding: 0 var(--v-obsah) var(--v-mezera) !important; text-align: left !important; } html body .home-v2 #hv-work.hv-section { padding-top: var(--v-mezera) !important; } /* ---------- svislý nadpis v okraji (čte se zdola nahoru) ---------- */ html body .home-v2 .hv-section .hv-label, html body .home-v2 #hv-work .hv-label, html body .home-v2 .hv-about .hv-label, html body .home-v2 .hv-contact::before { position: absolute !important; left: var(--v-okraj) !important; margin: 0 !important; padding: 0 !important; writing-mode: vertical-rl !important; transform: rotate(180deg) !important; white-space: nowrap !important; font-family: "Kalnia", serif !important; font-weight: 250 !important; font-variation-settings: "wght" 250, "wdth" 100 !important; font-size: var(--v-nadpis) !important; line-height: 1 !important; letter-spacing: 0.14em !important; text-transform: uppercase !important; text-align: right !important; color: var(--ink) !important; } /* KONTAKT nemá v HTML nadpis – doplní se tady */ html body .home-v2 .hv-contact::before { content: "Contact"; } /* drobná poznámka svisle hned vedle nadpisu */ html body .home-v2 #hv-work .hv-hint, html body .home-v2 .hv-section .hv-sub { position: absolute !important; left: calc(var(--v-okraj) + var(--v-nadpis) + 14px) !important; margin: 0 !important; padding: 0 !important; max-width: none !important; writing-mode: vertical-rl !important; transform: rotate(180deg) !important; white-space: nowrap !important; font-family: "Geist", sans-serif !important; font-weight: 300 !important; font-size: var(--v-maly) !important; line-height: 1 !important; letter-spacing: 0.04em !important; text-transform: none !important; text-align: right !important; color: var(--v-med-tisi) !important; opacity: 1 !important; } /* poznámku „Best heard on headphones…“ máš v CSS skrytou (display: none). Pokud ji chceš svisle vedle nadpisu jako v návrhu, smaž na dalším řádku komentářové značky na začátku a na konci. */ /* html body .home-v2 #hv-work .hv-hint { display: block !important; } */ /* ---------- SELECTED WORK ---------- */ html body .home-v2 #hv-work column-set { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: var(--v-sloupce) !important; padding: 0 !important; margin: 0 !important; width: auto !important; } html body .home-v2 #hv-work column-unit { grid-column: auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; } html body .home-v2 #hv-work .hv-col-label { display: block !important; margin: 0 0 clamp(14px, 1.32vw, 28px) !important; padding: 0 !important; font-family: "Geist", sans-serif !important; font-weight: 400 !important; font-size: var(--v-maly) !important; letter-spacing: 0.24em !important; text-transform: uppercase !important; text-align: left !important; color: var(--v-med-tisi) !important; opacity: 1 !important; } html body .home-v2 #hv-work .hv-card { margin: 0 !important; text-align: left !important; } html body .home-v2 #hv-work .hv-card + .hv-card { margin-top: 4.76vw !important; /* 72 px mezi kartami nad sebou */ } html body .home-v2 #hv-work .hv-card-name { display: block !important; margin: 1.85vw 0 0 !important; /* 28 px pod fotkou */ font-size: var(--v-titul) !important; line-height: 1.15 !important; letter-spacing: var(--v-titul-ls) !important; text-align: left !important; color: var(--ink) !important; } html body .home-v2 #hv-work .hv-meta, html body .home-v2 #hv-work .hv-note { display: block !important; font-family: "Geist", sans-serif !important; font-weight: 300 !important; font-size: var(--v-text) !important; line-height: 1.5 !important; letter-spacing: 0.005em !important; text-transform: none !important; text-align: left !important; opacity: 1 !important; } html body .home-v2 #hv-work .hv-meta { margin: 0.8vw 0 0 !important; /* 12 px pod názvem */ color: var(--v-med) !important; } html body .home-v2 #hv-work .hv-card-name + .hv-meta { margin-top: 0.8vw !important; } html body .home-v2 #hv-work .hv-note { margin: 0 !important; color: var(--v-med-tisi) !important; } /* ---------- odkazy ALL FILMS / ALL COMMERCIALS / ALL MUSIC / FULL BIO ---------- */ html body .home-v2 .hv-section .hv-link, html body .home-v2 #hv-work .hv-col-link { display: block !important; width: auto !important; margin: 3.17vw 0 0 !important; /* 48 px */ padding: 0 !important; font-family: "Geist", sans-serif !important; font-weight: 400 !important; font-variation-settings: normal !important; font-size: var(--v-odkaz) !important; letter-spacing: 0.2em !important; text-transform: uppercase !important; text-align: left !important; text-decoration: none !important; color: var(--ink) !important; } html body .home-v2 .hv-section .hv-link:hover, html body .home-v2 #hv-work .hv-col-link:hover { text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 0.5em !important; } /* ---------- LISTEN: původní přehrávač, jen přes celou šířku obsahu ---------- */ html body .home-v2 .hv-listen { max-width: none !important; margin: 0 !important; padding: 0 !important; --t-content: var(--v-titul); /* název skladby = stejná velikost jako ostatní názvy */ --trk-vol: clamp(90px, 6.5vw, 150px); /* šířka hlasitosti */ } html body .home-v2 .hv-listen + .hv-link { margin-top: 3.17vw !important; } /* ---------- RECOGNITION jako tabulka: logo · soutěž | projekt · ocenění ---------- */ html body .home-v2 #hv-recognition .hv-award { display: grid !important; /* logo | název soutěže a pod ním projekt | ocenění vpravo – stejná stavba jako řádek přehrávače */ grid-template-columns: var(--award-logo, clamp(126px, 8vw, 196px)) minmax(0, 1fr) auto !important; grid-template-rows: auto auto !important; column-gap: var(--v-sloupce) !important; row-gap: 0.4vw !important; align-items: center !important; margin: 0 !important; padding: 1.59vw 0 !important; /* 24 px nad i pod řádkem – jako v přehrávači */ border-top: 0 !important; border-bottom: 1px solid rgba(174, 81, 60, 0.25) !important; /* linka mezi řádky */ text-align: left !important; background: none !important; } html body .home-v2 #hv-recognition .hv-award media-item { display: block !important; grid-column: 1 !important; grid-row: 1 / span 2 !important; width: var(--award-logo, clamp(126px, 8vw, 196px)) !important; margin: 0 !important; } html body .home-v2 #hv-recognition .hv-award .hv-award-name { grid-column: 2 !important; grid-row: 1 !important; align-self: end !important; font-size: var(--v-titul) !important; line-height: 1.15 !important; letter-spacing: var(--v-titul-ls) !important; text-transform: uppercase !important; text-decoration: none !important; color: var(--ink) !important; } html body .home-v2 #hv-recognition .hv-award .hv-award-project, html body .home-v2 #hv-recognition .hv-award .hv-award-status { font-family: "Geist", sans-serif !important; font-weight: 300 !important; font-size: var(--v-text) !important; line-height: 1.4 !important; letter-spacing: 0.005em !important; text-transform: none !important; color: var(--v-med-tisi) !important; opacity: 1 !important; padding: 0 !important; } html body .home-v2 #hv-recognition .hv-award .hv-award-project { grid-column: 2 !important; grid-row: 2 !important; align-self: start !important; justify-self: start !important; } html body .home-v2 #hv-recognition .hv-award .hv-award-status { grid-column: 3 !important; grid-row: 1 / span 2 !important; align-self: center !important; justify-self: end !important; text-align: right !important; } /* ---------- WORKED WITH: velké písmo, doleva ---------- */ html body .home-v2 .hv-clients { display: block !important; max-width: none !important; margin: -0.66vw 0 0 !important; text-align: left !important; font-size: var(--v-titul) !important; /* stejná velikost jako ostatní názvy */ line-height: 1.75 !important; letter-spacing: var(--v-titul-ls) !important; } html body .home-v2 .hv-clients .hv-client { white-space: nowrap !important; } /* ---------- ABOUT: fotka vlevo, text vpravo ---------- */ html body .home-v2 .hv-about column-set { display: grid !important; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important; column-gap: var(--v-sloupce) !important; align-items: start !important; padding: 0 !important; margin: 0 !important; position: static !important; } html body .home-v2 .hv-about column-unit { grid-column: auto !important; width: auto !important; margin: 0 !important; padding: 0 !important; position: static !important; transform: none !important; } html body .home-v2 .hv-about-text { max-width: none !important; margin: 0 !important; font-family: "Geist", sans-serif !important; font-weight: 300 !important; font-size: clamp(16px, 1.12vw, 24px) !important; /* 17 px */ line-height: 1.7 !important; color: var(--v-med) !important; opacity: 1 !important; } html body .home-v2 .hv-about-text a { color: var(--ink) !important; text-decoration: underline !important; /* podtržení jako dosud */ text-decoration-thickness: 1px !important; text-underline-offset: 0.18em !important; } /* citát: svislá linka a podpis „— Jan Šléška“ zůstávají jako dosud */ html body .home-v2 .hv-quote { margin: 3.17vw 0 0 !important; padding: 0 0 0 1.85vw !important; /* 28 px od linky */ border-left: 1px solid rgba(174, 81, 60, 0.45) !important; font-size: var(--v-nazev) !important; line-height: 1.35 !important; letter-spacing: 0.05em !important; text-wrap: balance; } html body .home-v2 .hv-quote::after { margin-top: 1.06vw !important; font-size: var(--v-maly) !important; } /* ---------- CONTACT ---------- */ html body .home-v2 .hv-sections > .hv-contact { text-align: left !important; } html body .home-v2 .hv-contact-head { margin: 0 !important; padding: 0 !important; font-size: var(--v-titul) !important; /* stejná velikost jako ostatní názvy */ line-height: 1.3 !important; letter-spacing: var(--v-titul-ls) !important; text-align: left !important; } html body .home-v2 .hv-contact-sub { margin: 1.59vw 0 0 !important; font-family: "Geist", sans-serif !important; font-weight: 300 !important; font-variation-settings: normal !important; font-size: var(--v-text) !important; letter-spacing: 0.005em !important; color: var(--v-med-tisi) !important; opacity: 1 !important; text-align: left !important; } html body .home-v2 .hv-email { margin: 2.65vw 0 0 !important; font-size: var(--v-nazev) !important; letter-spacing: 0.06em !important; text-decoration: none !important; border-bottom: 1px solid rgba(174, 81, 60, 0.45) !important; padding-bottom: 6px !important; } } /* ===================================================================== NÁVRH 12 – užší okraje: galerie i ostatní sekce se roztáhnou do stran, mezera mezi videi zůstává přesně na ose stránky (jen počítač) ===================================================================== */ @media (hover: hover) and (pointer: fine) { html body .home-v2 { --v-okraj: 2.65vw !important; /* svislý nadpis od kraje okna (40 px na 1512) – původně 4.23vw */ --v-obsah: 7.4vw !important; /* obsah od kraje zleva i zprava (112 px) – původně 12.17vw */ } } /* ===================================================================== KURZOR = PLAY (varianta F) – jen tam, kde se kliknutím opravdu pustí video (obrázky a odkazy vedoucí na Vimeo – ty otevírá přehrávač z globálního HTML) velikost: border-left (délka) a border-top/bottom (výška) · záře: drop-shadow ===================================================================== */ @media (hover: hover) and (pointer: fine) { body::after { transition: transform 0.08s ease-out, width 0.35s ease, height 0.35s ease, margin 0.35s ease, background 0.35s ease, border-color 0.35s ease, border-width 0.35s ease, border-radius 0.35s ease, box-shadow 0.35s ease, filter 0.35s ease, opacity 0.35s ease !important; } body:has(media-item[href*="vimeo.com"]:hover, a[href*="vimeo.com"]:hover)::after { width: 0 !important; height: 0 !important; margin: -11px 0 0 -8px !important; /* střed trojúhelníku sedí na místě kurzoru */ background: transparent !important; border-radius: 0 !important; border-style: solid !important; border-width: 11px 0 11px 20px !important; /* výška 22 px, délka 20 px */ border-color: transparent transparent transparent rgba(255, 248, 242, 0.96) !important; box-shadow: none !important; filter: drop-shadow(0 0 8px rgba(255, 240, 225, 0.75)) drop-shadow(0 0 22px rgba(255, 240, 225, 0.35)) !important; opacity: 1 !important; } } /* ===================================================================== NÁZVY POD FOTKAMI (Restore Point, Post Bellum…) reagují jako fotky – při najetí na fotku NEBO na název se název rozsvítí teplým světlem – nad názvem se kurzor zvětší jako nad odkazem; kliknutí otevře stejnou stránku jako fotka (zajišťuje skript v globálním HTML) ===================================================================== */ @media (hover: hover) and (pointer: fine) { html body .home-v2 #hv-work .hv-card-name { transition: color 0.5s ease, text-shadow 0.5s ease !important; } html body .home-v2 #hv-work .hv-card:has(.hv-still:hover) .hv-card-name, html body .home-v2 #hv-work .hv-card-name:hover { color: rgba(232, 186, 160, 0.96) !important; /* světlá měď jako „light up“ v hero */ text-shadow: 0 0 28px rgba(255, 214, 186, 0.35), 0 0 70px rgba(255, 190, 150, 0.18) !important; } /* nad názvem: kurzor jako nad odkazem */ body:has(.home-v2 #hv-work .hv-card-name:hover)::after { width: 28px; height: 28px; margin: -14px 0 0 -14px; background: rgba(255, 255, 255, 0.9); box-shadow: 0 0 16px 4px rgba(255, 244, 236, 0.9), 0 0 48px 20px rgba(255, 244, 236, 0.5); opacity: 1; } /* nad názvem se rozsvítí i fotka (světlo uprostřed) */ html body .home-v2 #hv-work .hv-card:has(.hv-card-name:hover) .hv-still { --fx: 50%; --fy: 50%; } html body .home-v2 #hv-work .hv-card:has(.hv-card-name:hover) .hv-still::before, html body .home-v2 #hv-work .hv-card:has(.hv-card-name:hover) .hv-still::after { opacity: 1; } } /* ===================================================================== PŘICHYCENÝ PŘEHRÁVAČ – svisle v pravém okraji (zrcadlí svislé nadpisy) hudba hraje dál i při přechodu na podstránky; prvek vytváří skript přehrávače v globálním HTML ===================================================================== */ .hv-dock { position: fixed; right: 2.65vw; /* stejně daleko od kraje jako svislé nadpisy vlevo */ bottom: 40px; z-index: 100000; display: flex; flex-direction: column; align-items: center; gap: 16px; opacity: 0; visibility: hidden; transform: translateY(14px); pointer-events: none; transition: opacity 0.6s ease, transform 0.6s ease, visibility 0s linear 0.6s; } .hv-dock.is-open { opacity: 1; visibility: visible; transform: none; pointer-events: auto; transition: opacity 0.6s ease, transform 0.6s ease; } :where(.hv-dock) button { all: unset; display: block; position: relative; } /* název skladby a stav – svisle, čte se zdola nahoru jako nadpisy sekcí */ .hv-dock-t { writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; display: flex; align-items: center; gap: 14px; max-height: 62vh; overflow: hidden; } .hv-dock-name { font-family: "Kalnia", serif; font-weight: 250; font-variation-settings: "wght" 250, "wdth" 100; font-size: clamp(14px, 1.06vw, 22px); letter-spacing: 0.1em; text-transform: uppercase; color: rgba(174, 81, 60, 0.95); } .hv-dock-meta { font-family: "Geist", sans-serif; font-weight: 300; font-size: clamp(11px, 0.8vw, 15px); letter-spacing: 0.04em; color: rgba(232, 186, 160, 0.62); font-variant-numeric: tabular-nums; } /* svislá linka průběhu – kliknutím se dá přeskočit */ .hv-dock-ln { position: relative; width: 11px; height: 90px; } .hv-dock-ln::before, .hv-dock-ln b { content: ""; position: absolute; left: 5px; bottom: 0; width: 1px; } .hv-dock-ln::before { top: 0; background: rgba(174, 81, 60, 0.25); } .hv-dock-ln b { height: var(--p, 0%); background: rgba(174, 81, 60, 0.95); } /* pauza / přehrát */ .hv-dock-pp { width: 12px; height: 14px; } .hv-dock-pp::before, .hv-dock-pp::after { content: ""; position: absolute; top: 0; bottom: 0; background: rgba(174, 81, 60, 0.95); } .hv-dock-pp::before { /* zastaveno: trojúhelník */ left: 1px; right: 0; clip-path: polygon(0 0, 100% 50%, 0 100%); } .hv-dock-pp::after { display: none; } .hv-dock.is-playing .hv-dock-pp::before { /* hraje: dvě čárky */ left: 2px; right: auto; width: 3px; clip-path: none; } .hv-dock.is-playing .hv-dock-pp::after { display: block; right: 2px; width: 3px; } /* zavřít */ .hv-dock-x { width: 12px; height: 12px; opacity: 0.55; transition: opacity 0.3s ease; } .hv-dock-x:hover { opacity: 1; } .hv-dock-x::before, .hv-dock-x::after { content: ""; position: absolute; left: 5.5px; top: -1px; width: 1px; height: 14px; background: rgba(232, 186, 160, 0.9); transform: rotate(45deg); } .hv-dock-x::after { transform: rotate(-45deg); } /* telefon: malá vodorovná lišta dole vpravo */ @media (hover: none) and (pointer: coarse) { .hv-dock { right: 12px; bottom: 12px; left: 12px; flex-direction: row-reverse; justify-content: flex-end; gap: 14px; padding: 12px 16px; background: rgba(12, 11, 10, 0.9); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border: 1px solid rgba(174, 81, 60, 0.3); border-radius: 999px; } .hv-dock-t { writing-mode: horizontal-tb; transform: none; flex: 1; min-width: 0; gap: 10px; } .hv-dock-name { overflow: hidden; text-overflow: ellipsis; } .hv-dock-ln { display: none; } .hv-dock-x { order: -1; } } /* hlasitost v přichyceném přehrávači (svislý posuvník + ztlumit) */ .hv-dock-vol { position: relative; display: block; width: 14px; height: 70px; margin-top: 4px; touch-action: none; outline: none; } .hv-dock-vol::before { /* dráha */ content: ""; position: absolute; left: 6.5px; top: 0; bottom: 0; width: 1px; background: rgba(174, 81, 60, 0.3); } .hv-dock-vol b { /* nastavená hlasitost */ position: absolute; left: 6.5px; bottom: 0; width: 1px; height: var(--v, 90%); background: rgba(174, 81, 60, 0.95); } .hv-dock-vol i { /* táhlo */ position: absolute; left: 2px; bottom: var(--v, 90%); width: 10px; height: 10px; margin-bottom: -5px; border-radius: 50%; background: rgba(174, 81, 60, 0.95); transition: transform 0.2s ease; } .hv-dock-vol:hover i, .hv-dock-vol:focus-visible i { transform: scale(1.25); } .hv-dock-mute { /* reproduktor; přeškrtnutý, když je ztlumeno */ width: 16px; height: 14px; opacity: 0.75; transition: opacity 0.3s ease; } .hv-dock-mute:hover { opacity: 1; } .hv-dock-mute::before { content: ""; position: absolute; left: 0; top: 0; width: 16px; height: 14px; background: rgba(232, 186, 160, 0.75); clip-path: polygon(0 32%, 28% 32%, 62% 0, 62% 100%, 28% 68%, 0 68%); } .hv-dock-mute::after { content: ""; position: absolute; left: 7px; top: -2px; width: 1px; height: 18px; background: rgba(232, 186, 160, 0.9); transform: rotate(-45deg); opacity: 0; transition: opacity 0.2s ease; } .hv-dock.is-muted .hv-dock-mute::after { opacity: 1; } @media (hover: none) and (pointer: coarse) { .hv-dock-vol, .hv-dock-mute { display: none; /* na telefonu se hlasitost ovládá tlačítky telefonu */ } } /* ===================================================================== PÍSMENO J – vlastní tvar bez kapky (varianta 3, hluboký ocas) – nové J platí jen ve jméně v hero a v e-mailu v kontaktu – písmo „Sleska J“ obsahuje jediné písmeno J, nakreslené podle Kalnie (váha 250); Kalnia je pod licencí SIL Open Font License 1.1, která úpravy dovoluje – upravená verze proto nese vlastní název – e-mail se píše verzálkami jako ostatní nápisy webu ===================================================================== */ @font-face { font-family: "Sleska J"; src: url(data:font/woff2;base64,d09GMgABAAAAAAPAAA8AAAAACQAAAANrAAEa4QAAAAAAAAAAAAAAAAAAAAAAAAAAGyAcKgZgP1NUQVQyADQRCAp0dAE2AiQDCAsGAAQgBYtAByAMBxv0BxGFZFJ8cWAbCw9vSZoV/Q3nHHx2LslSGMwKd0eo5Dw8vz/+W/vc8yEwqUJM1kwj04sjZrEBQHD/L9mVqibVv0+sANTZ8Wp4Krz2FuO77nfPveP/f8t6Aa5rUmCp73vX1ms8X5PXsqjAxgZamE4PA00ssUgs80SSlRU2+l7VRJyoOBWJ4UsFymuosRg5euJMZWX4/39AoLzW2kqq/SpvXLZls7ra6yCnof5SinQozcWEaZ9YrHt0NNQhCjo+6DXjjc+1/ivhcZreFBC/pLfQVCGEshJqCrSUtq9ZuyWwfeWWtRFCIheinJUgoXi5EK9l1hRZCBwfw9ns/n9ZAMYHVwH5CGRk1Ec75EkKkXOuvKRSrrihYq60ZG3tDUsqpB0lJTPfbXxSFLOnvOlbrn86/+r8stcXPvxj0QPvvnn+skGnzhx3FhNWdZgxttumKd9SCewQiPpf/bTPiCVVBv5atih+hM+Xvjl8//ONDsr/fyg+Sm+htAQCeuHUUKMyeYowMH3rp8YD5fVJZcWYIFzTb+Eqy+EVFhCqegWSyj6BQkef9mYllFI/ymJpkTcXysoHOpaD8nEsZkMFfdO3UFHToiFUiubFQKisd17cW9UdqimbzxjqqZivRILIb0Mon59jufavvqI1oBlPjiJIAagoqagARxIDFlAqpyCw5WgxhghAz1UgaY4HvkhBYHgdRUWCEkhXkQJCyxRxjkKhDEM5KKcVXW/5d/RkMBwimAL0N387SDFeAoG5PUa4SiGnrKCspK5rbWNtpOvwoKTkzhjHU7QcANQ74dwWWvIKjUNMgFWvF4R/wWsRuGkcRRGaAXfF0P13Us65h53EiQ1QVYD2FHpg6Ag1OS2U71EHC8g7DojXrIM8mhzdkEJQoCFklAex9ArAOUMEOgLnQM3ov6c8QwGJmnIzoXpbCimRA/Y+/W0jWoomPU+LDD7AM+biRM4182A4yxzlhlFwXvSBiWs+znSvkEm6/7QFgp4VUiybLmIj+ZR6DfEjuXlofEo8zAKvvUMOi+YikWFynjdeFwIVXCCU7dzBzBLYMIY6fP8SI/y1kNxAobzN3EMSiW6gpOrTQ9i4Z7eYH3QASfYIIzYCafJIKhwMxbWBjbGl1VPM+ir1XooRutSB1vYvyqDUO/ArKkbx4v+9j/NR) format("woff2"); unicode-range: U+004A; /* jen velké J – ostatní písmena zůstávají z Kalnie */ font-display: block; } html body .home-v2 .hv-name, html body .home-v2 .hv-name span, html body .home-v2 .hv-name .hv-name-dim, html body .home-v2 .hv-name .hv-name-lit, html body .home-v2 .hv-email { font-family: "Sleska J", "Kalnia", serif !important; } html body .home-v2 .hv-email { text-transform: uppercase !important; letter-spacing: 0.1em !important; /* stejné prostrkání jako ostatní verzálkové nápisy */ } /* ===================================================================== LISTEN – varianta 4 (miniatura záběru, kategorie, režie, popis, kulaté play) vzhled řádků je ve skriptu přehrávače v globálním HTML; tady jen míry ===================================================================== */ @media (hover: hover) and (pointer: fine) { html body .home-v2 .hv-listen { --trk-thumb: 9.9vw; /* šířka miniatury (150 px na 1512) */ --trk-gap: 1.85vw; /* mezery mezi sloupci řádku (28 px) */ --trk-pad-y: 1.19vw; /* odsazení nad a pod obsahem řádku (18 px) */ --trk-cat: clamp(10.5px, 0.73vw, 15px); /* FILM / COMMERCIAL */ --trk-meta: clamp(12.5px, 0.86vw, 18px); /* dir. … · rok */ --trk-desc: clamp(13.5px, 0.93vw, 19px); /* popis skladby */ --trk-time: clamp(13px, 0.93vw, 19px); /* délka */ --trk-meta-color: rgba(232, 186, 160, 0.62); --trk-desc-color: rgba(232, 186, 160, 0.72); --trk-time-color: rgba(232, 186, 160, 0.62); } } /* ===================================================================== PŘICHYCENÝ PŘEHRÁVAČ – větší (asi o 30 %) vkládá se ZA blok přichyceného přehrávače; jen počítač ===================================================================== */ @media (hover: hover) and (pointer: fine) { .hv-dock { gap: 22px !important; } .hv-dock-t { flex-direction: column !important; /* název a „now playing“ ve dvou souběžných svislých řádcích */ align-items: flex-start !important; gap: 8px !important; max-height: calc(100vh - 470px) !important; } .hv-dock-name { font-size: clamp(18px, 1.4vw, 28px) !important; /* název skladby (původně 14–22 px) */ } .hv-dock-meta { font-size: clamp(13px, 0.95vw, 18px) !important; /* now playing · čas */ } .hv-dock-ln { width: 15px !important; height: 130px !important; /* linka průběhu (původně 90 px) */ } .hv-dock-ln::before, .hv-dock-ln b { left: 7px !important; } .hv-dock-pp { /* play / pauza */ width: 16px !important; height: 19px !important; } .hv-dock.is-playing .hv-dock-pp::before { left: 2px !important; width: 4px !important; } .hv-dock.is-playing .hv-dock-pp::after { right: 2px !important; width: 4px !important; } .hv-dock-x { /* zavřít */ width: 16px !important; height: 16px !important; } .hv-dock-x::before, .hv-dock-x::after { left: 7.5px !important; height: 19px !important; } .hv-dock-vol { /* hlasitost */ width: 18px !important; height: 100px !important; } .hv-dock-vol::before, .hv-dock-vol b { left: 8.5px !important; } .hv-dock-vol i { left: 2.5px !important; width: 13px !important; height: 13px !important; margin-bottom: -6.5px !important; } .hv-dock-mute, .hv-dock-mute::before { width: 20px !important; height: 17px !important; } .hv-dock-mute::after { left: 9px !important; height: 22px !important; } } /* ===================================================================== PŘICHYCENÝ PŘEHRÁVAČ – na úvodní obrazovce homepage nesahá do jména dokud je vidět hero, přehrávač je nízký (bez názvu skladby, kratší linky); jakmile odscrolluješ pod hero, název se plynule rozvine (třídu „past-hero“ přidává skript v globálním HTML) ===================================================================== */ @media (hover: hover) and (pointer: fine) { .hv-dock-t, .hv-dock-ln, .hv-dock-vol { transition: max-height 0.6s ease, height 0.6s ease, opacity 0.4s ease !important; } body:has(.home-v2):not(.past-hero) .hv-dock-t { max-height: 0 !important; /* název skladby schovaný, dokud je vidět velké jméno */ opacity: 0 !important; } body:has(.home-v2):not(.past-hero) .hv-dock-ln { height: min(130px, 9vh) !important; } body:has(.home-v2):not(.past-hero) .hv-dock-vol { height: min(100px, 8vh) !important; } } /* ===================================================================== MEZERA mezi úvodní obrazovkou (GO DEEPER) a SELECTED WORK – menší původně 13.23vw (200 px na 1512), teď 5.3vw (80 px); jen počítač ===================================================================== */ @media (hover: hover) and (pointer: fine) { html body .home-v2 #hv-work.hv-section { padding-top: 5.3vw !important; } } /* ===================================================================== MOBIL · HOMEPAGE – čistá úprava pro telefon (přidej úplně na konec CSS) – platí jen na dotykovém telefonu, počítač se nemění – vše s !important, aby to přebilo starší mobilní pravidla i styly Carga – velikosti v px: čím větší číslo, tím větší písmo / mezera ===================================================================== */ @media (hover: none) and (pointer: coarse) { html body .home-v2 { --m-okraj: 6px; /* boční okraj obsahu navíc k okraji Carga */ --m-sekce: 84px; /* mezera mezi sekcemi */ --m-nadpis: 19px; /* SELECTED WORK, LISTEN, RECOGNITION… */ } /* ---------- HAMBURGER: nahoru, aby nepřekrýval jméno ---------- */ html body.home .menu-icon { top: 26px !important; } /* ---------- HERO ---------- */ html body .home-v2 .hv-hero { padding: 19vh var(--m-okraj) 14vh !important; justify-content: flex-start !important; } /* jméno na dva řádky (JAN / ŠLÉŠKA), vždy celé na šířku displeje */ html body .home-v2 .hv-name { font-size: 21vw !important; /* velikost jména */ line-height: 1.04 !important; white-space: normal !important; letter-spacing: 0.02em !important; padding: 0 !important; transform: none !important; margin: 0 !important; } html body .home-v2 .hv-name span { font-size: 1em !important; line-height: inherit !important; } html body .home-v2 .hv-name .hv-name-lit { position: absolute !important; inset: 0 !important; transform: translateX(-0.025em) !important; /* jemná dvojexpozice */ opacity: 0.55 !important; } html body .home-v2 .hv-role { margin: 26px auto 0 !important; max-width: 19em; font-size: 11.5px !important; letter-spacing: 0.22em !important; padding-left: 0.22em !important; line-height: 2 !important; } html body .home-v2.home-v2.home-v2 .hv-claim.hv-claim { margin-top: 30px !important; font-size: 14px !important; line-height: 1.9 !important; letter-spacing: 0.06em !important; padding-left: 0.06em !important; } html body .home-v2 .hv-scroll { bottom: 5vh !important; font-size: 10px !important; letter-spacing: 0.3em !important; } /* ---------- SEKCE: okraje a mezery ---------- */ html body .home-v2 .hv-sections { padding-bottom: 110px !important; /* místo pro lištu přehrávače dole */ } html body .home-v2 .hv-section { max-width: none !important; width: auto !important; box-sizing: border-box !important; padding: var(--m-sekce) var(--m-okraj) 0 !important; text-align: center !important; } html body .home-v2 #hv-work.hv-section { padding-top: 64px !important; } /* nadpisy sekcí: menší, nikdy se nerozdělí (RECOGNITIO / N) */ html body .home-v2 .hv-label { position: static !important; writing-mode: horizontal-tb !important; transform: none !important; display: block !important; margin: 0 0 34px !important; padding: 0 0 0 0.3em !important; font-size: var(--m-nadpis) !important; line-height: 1.3 !important; letter-spacing: 0.3em !important; white-space: nowrap !important; text-align: center !important; } html body .home-v2 .hv-sub, html body .home-v2 .hv-hint { margin: -20px 0 26px !important; font-size: 14px !important; } /* odkazy ALL FILMS / ALL COMMERCIALS / ALL MUSIC / FULL BIO */ html body .home-v2 .hv-link { margin: 30px 0 0 !important; font-size: 17px !important; letter-spacing: 0.14em !important; text-decoration-thickness: 1px !important; text-underline-offset: 0.35em !important; } /* ---------- SELECTED WORK ---------- */ html body .home-v2 #hv-work column-unit { padding: 0 !important; } html body .home-v2 #hv-work column-unit + column-unit { margin-top: 64px !important; /* odstup ALL FILMS → COMMERCIAL */ } html body .home-v2 #hv-work .hv-col-label { margin: 0 0 20px !important; font-size: 11px !important; letter-spacing: 0.3em !important; } html body .home-v2 #hv-work .hv-card { margin-bottom: 40px !important; } html body .home-v2 #hv-work .hv-card-name { margin-top: 14px !important; font-size: 19px !important; line-height: 1.3 !important; letter-spacing: 0.1em !important; text-align: center !important; } html body .home-v2 #hv-work .hv-meta { margin-top: 6px !important; font-size: 13px !important; line-height: 1.5 !important; text-align: center !important; } html body .home-v2 #hv-work .hv-note { margin-top: 2px !important; font-size: 13px !important; line-height: 1.5 !important; text-align: center !important; } /* ---------- LISTEN ---------- */ html body .home-v2 .hv-listen { max-width: none !important; margin: 0 !important; } /* ---------- RECOGNITION: kompaktní řádky s linkou ---------- */ html body .home-v2 #hv-recognition .hv-award { display: grid !important; grid-template-columns: var(--m-ocen-logo, 100px) minmax(0, 1fr) !important; grid-template-areas: "logo name" "logo status" "logo project" !important; align-items: center !important; column-gap: 18px !important; row-gap: 3px !important; margin: 0 !important; padding: 18px 0 !important; border-bottom: 1px solid rgba(174, 81, 60, 0.22) !important; text-align: left !important; } html body .home-v2 #hv-recognition .hv-award:first-of-type { border-top: 1px solid rgba(174, 81, 60, 0.22) !important; } html body .home-v2 #hv-recognition .hv-award media-item { grid-area: logo !important; width: var(--m-ocen-logo, 100px) !important; /* velikost loga ocenění na mobilu (54 → 84 → 100 px) */ margin: 0 !important; } html body .home-v2 #hv-recognition .hv-award-name { grid-area: name !important; font-size: 17px !important; line-height: 1.3 !important; letter-spacing: 0.08em !important; } html body .home-v2 #hv-recognition .hv-award-status { grid-area: status !important; font-size: 9.5px !important; letter-spacing: 0.22em !important; line-height: 1.5 !important; } html body .home-v2 #hv-recognition .hv-award-project { grid-area: project !important; font-size: 13px !important; line-height: 1.45 !important; } /* ---------- WORKED WITH ---------- */ html body .home-v2 .hv-clients { max-width: none !important; font-size: 18px !important; line-height: 1.85 !important; letter-spacing: 0.08em !important; } html body .home-v2 .hv-clients .hv-client { white-space: nowrap !important; /* tečka zůstane u jména, nezačne řádek */ } /* ---------- ABOUT ---------- */ html body .home-v2 .hv-about column-unit { padding: 0 !important; } html body .home-v2 .hv-about column-unit + column-unit { margin-top: 34px !important; } html body .home-v2 .hv-about .hv-label { margin-bottom: 22px !important; } html body .home-v2 .hv-about-text { max-width: none !important; font-size: 15px !important; line-height: 1.65 !important; text-align: center !important; } /* citát: místo svislé linky krátká vodorovná nad ním (sedí k vystředění) */ html body .home-v2 .hv-quote { margin: 40px auto 0 !important; padding: 30px 0 0 !important; border-left: 0 !important; border-top: 0 !important; position: relative !important; font-size: 19px !important; line-height: 1.45 !important; letter-spacing: 0.08em !important; text-align: center !important; } html body .home-v2 .hv-quote::before { content: "" !important; position: absolute !important; top: 0 !important; left: 50% !important; width: 40px !important; height: 1px !important; margin-left: -20px !important; background: rgba(174, 81, 60, 0.55) !important; } html body .home-v2 .hv-quote::after { margin-top: 16px !important; font-size: 10px !important; letter-spacing: 0.3em !important; } /* ---------- CONTACT ---------- */ html body .home-v2 .hv-sections > .hv-contact { padding-top: 110px !important; text-align: center !important; } html body .home-v2 .hv-contact-head { font-size: 11vw !important; line-height: 1.12 !important; letter-spacing: 0.06em !important; text-align: center !important; } html body .home-v2 .hv-contact-sub { margin-top: 22px !important; font-family: "Geist", "Helvetica Neue", sans-serif !important; font-weight: 300 !important; font-variation-settings: normal !important; font-size: 15px !important; letter-spacing: 0.01em !important; text-align: center !important; } html body .home-v2 .hv-email { margin-top: 32px !important; font-size: 5vw !important; /* e-mail vždy na jeden řádek */ letter-spacing: 0.1em !important; text-decoration-thickness: 1px !important; text-underline-offset: 0.35em !important; white-space: nowrap !important; } } /* ===================================================================== MOBIL · SVĚTELNÁ TEČKA V HERO (přidej úplně na konec CSS, ZA mobilní blok) – tečka jako kurzor na počítači sama pomalu klouže přes hero, hlavně přes jméno, a rozsvěcí ho stejně jako kurzor na desktopu – pohyb řídí skript „skript_mobil_svetlo-na-jmene.html“ v globálním HTML – dotkneš-li se hero prstem, světlo chvíli sleduje prst ===================================================================== */ @media (hover: none) and (pointer: coarse) { /* jméno ve tmě – rozsvítí se jen tam, kde je světlo */ html body .home-v2 .hv-name .hv-name-dim { color: var(--tone-1, rgba(174, 81, 60, 0.9)) !important; /* jméno bez světla: stejná barva jako claim */ } html body .home-v2 .hv-name .hv-name-lit { opacity: 1 !important; color: rgb(240, 190, 160) !important; text-shadow: 0 0 30px rgba(255, 200, 160, 0.35) !important; /* velikost světelného kužele: 34vw (šířka) a 26vw (výška) */ -webkit-mask-image: radial-gradient(34vw 26vw at var(--nx, -50%) var(--ny, -50%), #000 0%, rgba(0, 0, 0, 0.6) 35%, transparent 75%) !important; mask-image: radial-gradient(34vw 26vw at var(--nx, -50%) var(--ny, -50%), #000 0%, rgba(0, 0, 0, 0.6) 35%, transparent 75%) !important; } /* FOTKA V HERO: mimo světlo ztmavená, tečka ji odkrývá – kreslí to skript do plátna .hv-halo (síla tmy a velikost kruhu: TMA a SVIT na začátku skriptu) */ body .spotlight-overlay { display: none !important; /* celoobrazovkový přísvit z desktopu na telefonu nepoužívat */ } .page:has(.home-v2) .backdrop { -webkit-mask-image: none !important; mask-image: none !important; /* bez mléčného oparu: hlubší černé a víc kontrastu (fotka je rozmazaná, stíny má zvednuté) contrast: 1 = původní, víc = sytější tmy */ filter: brightness(0.8) contrast(1.18) saturate(1.05) !important; } .hv-halo { position: fixed; inset: 0; width: 100%; height: 100%; pointer-events: none; } /* MLÉČNÉ SKLO přes fotku v hero – tečka ho v kruhu kolem sebe odkrývá rozmazání: blur(…) · mléčnost: barva pozadí (poslední číslo = síla) · zrno: obrázek šumu */ .hv-frost { position: fixed; inset: 0; pointer-events: none; opacity: 0; transition: opacity 1.2s ease; -webkit-backdrop-filter: blur(9px) saturate(0.75); backdrop-filter: blur(9px) saturate(0.75); background-color: rgba(226, 222, 218, 0.13); background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .07 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); -webkit-mask-image: radial-gradient(circle var(--gr, 200px) at var(--gx, -50%) var(--gy, -50%), transparent 0%, transparent 28%, rgba(0, 0, 0, 0.55) 60%, #000 100%); mask-image: radial-gradient(circle var(--gr, 200px) at var(--gx, -50%) var(--gy, -50%), transparent 0%, transparent 28%, rgba(0, 0, 0, 0.55) 60%, #000 100%); } body.hv-glide-on .hv-frost { opacity: 0.7; /* síla skla: 1 = plné, 0.7 = 70 %, 0 = bez skla */ } /* ROZJASNĚNÍ fotky pod tečkou – víc než originál, bez mléčného oparu (režim color-dodge: světla zesílí, černá zůstanou černá – žádný opar) velikost: width/height (a polovina v margin) · síla: barva rgba(130,110,94) – světlejší barva = silnější rozjasnění */ .hv-boost { position: fixed; top: 0; left: 0; width: 520px; height: 520px; margin: -260px 0 0 -260px; border-radius: 50%; pointer-events: none; background: radial-gradient(circle closest-side, rgba(130, 110, 94, 0.9) 0%, rgba(130, 110, 94, 0.55) 35%, rgba(130, 110, 94, 0.18) 70%, rgba(130, 110, 94, 0) 100%); mix-blend-mode: color-dodge; opacity: 0; transition: opacity 1.2s ease; will-change: transform; } body.hv-glide-on .hv-boost { opacity: 1; } /* úspora paměti: fotky na telefonu nemají vlastní GPU vrstvu ani stín (Cargo je dává všem) */ html body media-item::part(media) { will-change: auto !important; } /* větší claim a EUROPEAN COMPOSER */ html body .home-v2 .hv-role { max-width: 17.5em !important; /* zalomí se za „·“: FILM & COMMERCIALS na druhém řádku */ margin: 30px auto 0 !important; font-size: 3.5vw !important; /* EUROPEAN COMPOSER · FILM & COMMERCIALS */ letter-spacing: 0.2em !important; padding-left: 0.2em !important; line-height: 1.9 !important; } html body .home-v2.home-v2.home-v2 .hv-claim.hv-claim { margin-top: 34px !important; font-size: 5.4vw !important; /* claim */ letter-spacing: 0.06em !important; padding-left: 0.06em !important; line-height: 1.6 !important; white-space: nowrap !important; /* každý řádek claimu celý */ } /* LIGHT UP v claimu: pod tečkou se rozsvítí stejně jako jméno (barva v klidu = dosavadní, pod světlem téměř bílá; záře roste, čím blíž tečka je) */ html body .home-v2 .hv-claim .hv-glow { color: transparent !important; -webkit-text-fill-color: transparent !important; background-image: radial-gradient(circle 30vw at var(--lx, -999px) var(--ly, -999px), rgb(255, 246, 238) 0%, rgb(248, 214, 190) 28%, rgba(232, 186, 160, 0.78) 72%) !important; background-color: rgba(232, 186, 160, 0.78); /* LIGHT UP ve tmě (bez světla) */ -webkit-background-clip: text !important; background-clip: text !important; text-shadow: none !important; filter: drop-shadow(0 0 calc(var(--lg, 0) * 26px) rgba(255, 220, 196, calc(var(--lg, 0) * 0.75))); /* záře pod světlem */ transition: none !important; } /* claim na telefonu ve čtyřech řádcích: MY MUSIC / CAN LIGHT UP / WHAT’S HIDDEN / WITHIN YOUR FILM (zalomení dělají prázdné v HTML homepage) */ html body .home-v2 .hv-claim .hv-br-m { display: block !important; } /* tečka – stejná jako kurzor na počítači */ .hv-glider { position: fixed; top: 0; left: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; background: rgba(255, 244, 236, 0.95); box-shadow: 0 0 16px 5px rgba(255, 244, 236, 0.55), 0 0 70px 28px rgba(255, 236, 220, 0.10); /* jemná záře kolem */ pointer-events: none; z-index: 2147483000; opacity: 0; transition: opacity 1.2s ease; will-change: transform; } .hv-glider.is-on { opacity: 1; } /* ROZSVÍCENÍ ODKAZŮ pod tečkou – vodítko, kam se dá tapnout (třídu hv-lit přidává skript; doznívání: 0.9s) */ html body a, html body .home-v2 .hv-card-name, html body .home-v2 .hv-award-name { transition: color 0.9s ease, text-shadow 0.9s ease, text-decoration-color 0.9s ease !important; } html body a.hv-lit, html body .hv-lit .hv-card-name, html body .home-v2 .hv-card-name.hv-lit, html body .home-v2 .hv-award-name.hv-lit, html body .home-v2 a.hv-lit * { color: rgb(240, 190, 160) !important; text-shadow: 0 0 18px rgba(255, 214, 186, 0.45) !important; } html body media-item::part(media) { transition: filter 0.9s ease; } html body media-item.hv-lit::part(media), html body .hv-lit media-item::part(media) { filter: brightness(1.12) saturate(1.05) !important; /* fotka se pod tečkou rozjasní */ } html body .home-v2 .hv-card.hv-lit .hv-still media-item::part(media) { filter: brightness(0.95) !important; /* ztmavené fotky na homepage se rozsvítí */ } /* FOTKA POD TEČKOU: kolem světla se zatmaví, pod tečkou je v plné síle – jako kurzor na počítači (vrstvy ::before = tma, ::after = teplé světlo; poloha světla --fx/--fy nastavuje skript) */ html body .home-v2 .hv-still.hv-lit-photo media-item::part(media) { filter: none !important; /* ztmavená mobilní fotka se rozsvítí */ } html body .home-v2 .hv-still.hv-lit-photo::before, html body .home-v2 .hv-still.hv-lit-photo::after, html body .film-still-wrap.hv-lit-photo::before, html body .film-still-wrap.hv-lit-photo::after { opacity: 1 !important; } html body .home-v2 .hv-still::before { /* velikost světla na fotce: 62vw (menší číslo = menší světlý kruh, víc tmy kolem) */ -webkit-mask-image: radial-gradient(circle 62vw at var(--fx, 50%) var(--fy, 50%), transparent 0%, transparent 20%, black 85%) !important; mask-image: radial-gradient(circle 62vw at var(--fx, 50%) var(--fy, 50%), transparent 0%, transparent 20%, black 85%) !important; } html body .home-v2 .hv-still::after { background: radial-gradient(circle 62vw at var(--fx, 50%) var(--fy, 50%), rgba(255, 236, 220, 0.14) 0%, rgba(255, 236, 220, 0.05) 40%, transparent 75%) !important; } /* commercials: jako na počítači – fotka ztmavne, popisek zůstane čitelný */ html body .page[page-url="commercial-subpage"] gallery-columnized media-item.hv-lit-photo::part(media) { filter: brightness(0.5) !important; } html body .page[page-url="commercial-subpage"] gallery-columnized media-item.hv-lit-photo::after { opacity: 0.4 !important; } /* tečka nad odkazem lehce zjasní a zvětší záři */ .hv-glider { transition: opacity 1.2s ease, box-shadow 0.9s ease; } .hv-glider.is-over { box-shadow: 0 0 20px 7px rgba(255, 244, 236, 0.7), 0 0 90px 36px rgba(255, 236, 220, 0.16); } } /* na počítači zalomení pro telefon nic nedělají */ .home-v2 .hv-claim .hv-br-m { display: none; } /* ===================================================================== MOBIL · RYTMUS STRÁNKY (přidej úplně na konec CSS) – varianta B · hudební (každá úroveň zhruba ×1,5) mezery podle významu, od nejtěsnější po největší: 1 nadpis → podtitul · 2 nadpis → obsah · 3 položka ↔ položka · 4 obsah → odkaz ALL… 5 skupina ↔ skupina uvnitř kapitoly · 6 kapitola ↔ kapitola · 7 před kontaktem ===================================================================== */ @media (hover: none) and (pointer: coarse) { html body .home-v2 { --r1: 10px; /* 1 · nadpis sekce → podtitul (without leaving the page) */ --r2: 24px; /* 2 · nadpis / podtitul → obsah */ --r3: 36px; /* 3 · mezi kartami filmů a reklam */ --r4: 36px; /* 4 · obsah → ALL FILMS / ALL MUSIC / FULL BIO */ --r5: 80px; /* 5 · FILM → COMMERCIAL · fotka → ABOUT */ --r6: 180px; /* 6 · mezi kapitolami (hero → WORK → LISTEN → RECOGNITION → WORKED WITH → ABOUT) */ --r7: 240px; /* 7 · před kontaktem */ } /* 1–2 · nadpis, podtitul, obsah */ html body .home-v2 .hv-label { margin-bottom: var(--r2) !important; } html body .home-v2 .hv-section:has(.hv-sub) .hv-label, html body .home-v2 #hv-work:has(.hv-hint) .hv-label { margin-bottom: var(--r1) !important; } html body .home-v2 .hv-sub, html body .home-v2 #hv-work .hv-hint { margin: 0 0 var(--r2) !important; } html body .home-v2 #hv-work .hv-col-label { margin: 0 0 calc(var(--r2) * 0.6) !important; } /* 3 · položky */ html body .home-v2 #hv-work .hv-card { margin-bottom: var(--r3) !important; } /* 4 · odkaz ALL… */ html body .home-v2 .hv-link { margin: var(--r4) 0 0 !important; } html body .home-v2 #hv-work .hv-col-link { margin-top: calc(var(--r4) - var(--r3)) !important; /* poslední karta už má pod sebou mezeru 3 */ } /* 5 · skupiny uvnitř kapitoly */ html body .home-v2 #hv-work column-unit + column-unit { margin-top: var(--r5) !important; } html body .home-v2 .hv-about column-unit + column-unit { margin-top: calc(var(--r5) * 0.6) !important; } /* 6 · kapitoly */ html body .home-v2 .hv-sections > .hv-section { position: relative !important; } html body .home-v2 #hv-work.hv-section { padding-top: calc(var(--r6) * 0.5) !important; /* pod hero stačí půl – hero končí přechodem do tmy */ } html body .home-v2 .hv-section:has(.hv-listen), html body .home-v2 #hv-recognition.hv-section, html body .home-v2 .hv-section:has(.hv-clients), html body .home-v2 .hv-section.hv-about { padding-top: var(--r6) !important; } /* 7 · kontakt */ html body .home-v2 .hv-sections > .hv-contact { padding-top: var(--r7) !important; } html body .home-v2 .hv-sections { padding-bottom: 120px !important; /* konec stránky (místo pro přehrávač) */ } /* světelná tečka: jemnější záře, bez šedého kruhu kolem */ .hv-glider { box-shadow: 0 0 14px 4px rgba(255, 244, 236, 0.55), 0 0 36px 8px rgba(255, 236, 220, 0.08) !important; } .hv-glider.is-over { box-shadow: 0 0 18px 6px rgba(255, 244, 236, 0.7), 0 0 48px 12px rgba(255, 236, 220, 0.12) !important; } } /* ===================================================================== MOBIL · TUČNĚJŠÍ PÍSMO kvůli čitelnosti (přidej úplně na konec CSS) – Kalnia: 250 → 300 (nadpisy, názvy, claim 300 → 340) – Geist: 300 → 400 (popisky, texty, menu) – jméno JAN ŠLÉŠKA a e-mail zůstávají 250: vlastní písmeno J existuje jen v této tloušťce – tloušťku změníš v proměnných níže ===================================================================== */ @media (hover: none) and (pointer: coarse) { :root { --m-kalnia: 300; /* tloušťka Kalnie na telefonu (původně 250) */ --m-claim: 340; /* tloušťka claimu MY MUSIC… (původně 300) */ --m-geist: 400; /* tloušťka Geistu na telefonu (původně 300) */ --kalnia-w: var(--m-kalnia); --claim-w: var(--m-claim); } /* Kalnia */ html body h1, html body h1 a, html body .nadpis, html body .nadpis a, html body .heading-3, html body .heading-3 a, html body .video-hover-text, html body .mobile-nav a, html body .home-v2 .hv-role, html body .home-v2 .hv-role a, html body .home-v2 .hv-label, html body .home-v2 .hv-card-name, html body .home-v2 .hv-card-name *, html body .home-v2 .hv-link, html body .home-v2 .hv-award-name, html body .home-v2 .hv-award-name *, html body .home-v2 .hv-clients, html body .home-v2 .hv-clients *, html body .home-v2 .hv-quote, html body .home-v2 .hv-quote *, html body .home-v2 .hv-contact-head, html body .home-v2 .hv-contact-head * { font-weight: var(--m-kalnia) !important; font-variation-settings: "wght" var(--m-kalnia), "wdth" 100 !important; } html body .home-v2.home-v2.home-v2 .hv-claim.hv-claim, html body .home-v2.home-v2.home-v2 .hv-claim.hv-claim * { font-weight: var(--m-claim) !important; font-variation-settings: "wght" var(--m-claim), "wdth" 100 !important; } /* jméno a e-mail: beze změny (vlastní J je jen v tloušťce 250) */ html body .home-v2 .hv-name, html body .home-v2 .hv-name span, html body .home-v2 .hv-email { font-weight: 250 !important; font-variation-settings: "wght" 250, "wdth" 100 !important; } /* Geist */ html body bodycopy, html body .bodycopy-popisky, html body .bodycopy-texty, html body [id="X4279915566"] .page-content, html body [id="X4279915566"] .page-content *, html body .home-v2 .hv-hint, html body .home-v2 .hv-sub, html body .home-v2 #hv-work .hv-col-label, html body .home-v2 .hv-meta, html body .home-v2 .hv-note, html body .home-v2 .hv-award-status, html body .home-v2 .hv-award-project, html body .home-v2 .hv-about-text, html body .home-v2 .hv-about-text a, html body .home-v2 .hv-contact-sub, html body .home-v2 .hv-scroll, html body .home-v2 .hv-quote::after, .hv-dock-name, .hv-dock-meta, .cookie-bar { font-weight: var(--m-geist) !important; font-variation-settings: normal !important; } } /* ===================================================================== MOBIL · VĚTŠÍ NADPISY SEKCÍ A KATEGORIÍ (přidej úplně na konec CSS, za blok rytmu) – SELECTED WORK, LISTEN, RECOGNITION, WORKED WITH, ABOUT: 19 → 25 px – FILM / COMMERCIAL: 11 → 13 px · „without leaving the page“: 14 → 16 px – menší mezera mezi výčtem značek (WORKED WITH) a fotkou v ABOUT ===================================================================== */ @media (hover: none) and (pointer: coarse) { html body .home-v2 .hv-label { font-size: 25px !important; /* nadpisy sekcí */ letter-spacing: 0.26em !important; padding-left: 0.26em !important; } html body .home-v2 #hv-work .hv-col-label { font-size: 13px !important; /* FILM / COMMERCIAL */ letter-spacing: 0.28em !important; padding-left: 0.28em !important; } html body .home-v2 .hv-sub, html body .home-v2 #hv-work .hv-hint { font-size: 16px !important; /* without leaving the page */ } /* WORKED WITH → fotka v ABOUT */ html body .home-v2 .hv-section.hv-about { padding-top: 110px !important; /* dosud 180 px */ } } /* ===================================================================== PODSTRÁNKA FILMS – varianta C „kapitoly“ (přidej úplně na konec CSS) – každý film jako velký záběr, text vlevo ve tmě – vlevo okraj pro svislý nadpis MUSIC FOR FILM, vpravo okraj pro přehrávač – klik na obrázek nebo PROJECT otevře podstránku filmu ===================================================================== */ .films-v2 { --fv-okraj-l: 112px; /* levý okraj (svislý nadpis) */ --fv-okraj-r: 112px; /* pravý okraj (přichycený přehrávač) */ --fv-mezera: 70px; /* mezera mezi filmy */ position: relative; text-align: left; padding: 40px var(--fv-okraj-r) 140px var(--fv-okraj-l); font-size: 16px; /* základ – Cargo jinak dává obří písmo a mezery mezi odkazy */ line-height: 1.5; } /* svislý nadpis v levém okraji */ html body .films-v2 .fv-label { position: absolute !important; left: 40px; top: 60px; margin: 0 !important; padding: 0 !important; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-family: "Kalnia", serif !important; font-weight: 250 !important; font-variation-settings: "wght" 250, "wdth" 100 !important; font-size: 26px !important; line-height: 1 !important; letter-spacing: 0.28em !important; text-transform: uppercase !important; color: var(--ink) !important; } /* film = záběr + text přes něj */ .films-v2 .fv-film { position: relative; margin: 0 0 var(--fv-mezera); border-radius: 4px; overflow: hidden; isolation: isolate; } .films-v2 .fv-film media-item { display: block !important; width: 100% !important; margin: 0 !important; } .films-v2 .fv-film media-item::part(media) { border-radius: 0; filter: none; } /* tma zleva a zespodu, aby byl text čitelný (klikání na obrázek neblokuje) */ .films-v2 .fv-film::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to right, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.5) 40%, rgba(10, 10, 10, 0) 72%), linear-gradient(to top, rgba(10, 10, 10, 0.7) 0%, transparent 35%); } .films-v2 .fv-text { position: absolute; z-index: 2; left: 64px; bottom: 12%; max-width: 540px; pointer-events: none; /* klik prochází na obrázek … */ } .films-v2 .fv-text a { pointer-events: auto; /* … kromě odkazů */ } /* texty */ html body .films-v2 .fv-cat { display: block; font-family: "Geist", sans-serif !important; font-weight: 400 !important; font-size: 12px !important; letter-spacing: 0.26em !important; text-transform: uppercase !important; color: var(--ink) !important; } html body .films-v2 .fv-title { display: block; margin: 18px 0 !important; font-family: "Kalnia", serif !important; font-weight: 250 !important; font-variation-settings: "wght" 250, "wdth" 100 !important; font-size: clamp(44px, 4.5vw, 84px) !important; /* název filmu */ line-height: 1.05 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--ink) !important; transition: color 0.9s ease, text-shadow 0.9s ease; } .films-v2 .fv-film:hover .fv-title { color: rgb(240, 190, 160) !important; /* název se při najetí rozsvítí */ text-shadow: 0 0 24px rgba(255, 214, 186, 0.25); } html body .films-v2 .fv-meta { display: block; font-family: "Geist", sans-serif !important; font-weight: 300 !important; font-size: 16px !important; line-height: 1.5 !important; color: rgba(200, 140, 112, 0.78) !important; } html body .films-v2 .fv-desc { display: block; margin: 22px 0 30px; font-family: "Geist", sans-serif !important; font-weight: 300 !important; font-size: 17px !important; line-height: 1.6 !important; color: rgba(200, 140, 112, 0.78) !important; } html body .films-v2 .fv-links a { display: inline-block; margin-right: 28px; padding-bottom: 3px; font-family: "Kalnia", serif !important; font-weight: 250 !important; font-variation-settings: "wght" 250, "wdth" 100 !important; font-size: 15px !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; text-decoration: none !important; border-bottom: 1px solid rgba(174, 81, 60, 0.55) !important; color: var(--ink) !important; } html body .films-v2 .fv-links a:hover { color: rgb(240, 190, 160) !important; border-bottom-color: currentColor !important; } /* na stránce FILMS: fotka v pozadí stránky se nepoužije, jen tma */ .page:has(.films-v2) .backdrop { display: none !important; } .page:has(.films-v2) .page-content { padding-left: 0 !important; padding-right: 0 !important; } /* ---------- TLAČÍTKO ZPĚT (dole vlevo, zrcadlově k přehrávači) ---------- vkládá ho skript „skript_tlacitko-zpet.html“ v globálním HTML na všech podstránkách kromě homepage */ .hv-back { position: fixed; left: 38px; bottom: 40px; z-index: 9990; display: flex; flex-direction: column; align-items: center; gap: 12px; color: rgb(240, 190, 160) !important; text-decoration: none !important; opacity: 0; transition: opacity 0.8s ease; } .hv-back.is-on { opacity: 1; } .hv-back span { writing-mode: vertical-rl; transform: rotate(180deg); font-family: "Geist", sans-serif; font-weight: 400; font-size: 12px; letter-spacing: 0.26em; text-transform: uppercase; white-space: nowrap; } .hv-back i { display: flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 50%; border: 1px solid rgba(174, 81, 60, 0.7); transition: border-color 0.4s ease, background 0.4s ease; } .hv-back:hover i { border-color: rgb(240, 190, 160); background: rgba(174, 81, 60, 0.12); } /* ---------- TELEFON: filmy pod sebou, text pod obrázkem ---------- */ @media (hover: none) and (pointer: coarse) { .films-v2 { padding: 84px 20px 120px; } html body .films-v2 .fv-label { position: static !important; writing-mode: horizontal-tb; transform: none; text-align: center; font-size: 25px !important; letter-spacing: 0.26em !important; margin: 0 0 40px !important; } .films-v2 .fv-film { overflow: visible; margin-bottom: 64px; } .films-v2 .fv-film::before { display: none; } .films-v2 .fv-film media-item::part(media) { border-radius: 4px; } .films-v2 .fv-text { position: static; max-width: none; margin-top: 18px; text-align: center; } html body .films-v2 .fv-title { font-size: 28px !important; margin: 10px 0 8px !important; } html body .films-v2 .fv-meta { font-size: 13px !important; } html body .films-v2 .fv-desc { font-size: 15px !important; margin: 14px 0 18px; } html body .films-v2 .fv-links a { margin: 0 8px; font-size: 13px !important; letter-spacing: 0.1em !important; } .hv-back { display: none !important; } /* na telefonu je menu */ } /* ===================================================================== PODSTRÁNKA FILMS – ZATMAVENÉ FOTKY, KURZOR JE ROZSVĚCUJE (přidej úplně na konec CSS, ZA blok „PODSTRÁNKA FILMS – varianta C“) – fotky jsou v klidu ztmavené, pod kurzorem se v kruhu rozsvítí naplno a přidá se jemné teplé světlo (jako fotky na homepage) – polohu světla posílá první skript v globálním HTML – jen počítač; na telefonu zůstávají fotky jak jsou ===================================================================== */ @property --fv-r { syntax: ''; inherits: true; initial-value: 0px; } @media (hover: hover) and (pointer: fine) { .films-v2 .fv-film { --fv-tma: 0.55; /* síla zatmavení fotky: 0 = vůbec, 0.55 = výrazně, 0.8 = skoro černá */ --fv-kruh: 30vw; /* velikost rozsvíceného kruhu pod kurzorem */ --fv-r: 0px; transition: --fv-r 0.7s ease; } .films-v2 .fv-film:hover { --fv-r: var(--fv-kruh); } /* tma přes fotku – pod kurzorem v ní vznikne světlý kruh */ .films-v2 .fv-film::after { content: ""; position: absolute; inset: 0; z-index: 1; /* pod textem, nad fotkou */ pointer-events: none; background: rgba(5, 5, 5, var(--fv-tma)); -webkit-mask-image: radial-gradient(circle calc(var(--fv-r) + 1px) at var(--fx, 50%) var(--fy, 50%), transparent 0%, transparent 25%, black 90%); mask-image: radial-gradient(circle calc(var(--fv-r) + 1px) at var(--fx, 50%) var(--fy, 50%), transparent 0%, transparent 25%, black 90%); } /* teplé světlo pod kurzorem (přidané k tmě zleva pro čitelnost textu) */ .films-v2 .fv-film::before { background: radial-gradient(circle calc(var(--fv-r) + 1px) at var(--fx, 50%) var(--fy, 50%), rgba(255, 236, 220, 0.12) 0%, rgba(255, 236, 220, 0.04) 40%, transparent 75%), linear-gradient(to right, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.5) 40%, rgba(10, 10, 10, 0) 72%), linear-gradient(to top, rgba(10, 10, 10, 0.7) 0%, transparent 35%); z-index: 2; } .films-v2 .fv-text { z-index: 3; } /* šedý přísvit stránky nad fotkou vypnout – světlo dělá fotka sama */ body:has(.films-v2 .fv-film:hover) .spotlight-overlay { opacity: 0 !important; } } /* ===================================================================== PODSTRÁNKA FILMS – TEXT BLÍŽ K LEVÉMU DOLNÍMU ROHU, MENŠÍ NÁZEV (přidej úplně na konec CSS) – jen počítač ===================================================================== */ @media (hover: hover) and (pointer: fine) { .films-v2 .fv-text { left: 40px !important; /* odstup od levého okraje fotky */ bottom: 36px !important; /* odstup od spodního okraje fotky */ max-width: 460px !important; /* šířka textu – užší = méně zasahuje do fotky */ } html body .films-v2 .fv-cat { font-size: 11px !important; /* FEATURE FILM, SHORT FILM… */ letter-spacing: 0.24em !important; } html body .films-v2 .fv-title { font-size: clamp(32px, 3vw, 56px) !important; /* název filmu */ margin: 12px 0 12px !important; } html body .films-v2 .fv-meta { font-size: 15px !important; } html body .films-v2 .fv-desc { font-size: 15px !important; margin: 14px 0 20px !important; } html body .films-v2 .fv-desc:last-child { margin-bottom: 0 !important; /* Proces a Golem nemají odkazy */ } } /* ===================================================================== BALÍK ÚPRAV 15. 10. – přidej celý úplně na konec CSS 1 · ABOUT: svislý nadpis zpět do levého okraje 2 · menu stejně velké na všech stránkách · FILMS: vzduch pod menu, širší galerie, větší popisky 3 · hero: kurzor fotku rozjasní nad originál (vrstvu vkládá skript v globálním HTML) ===================================================================== */ /* ===================================================================== HOMEPAGE · SVISLÝ NADPIS ABOUT ZPĚT DO LEVÉHO OKRAJE (přidej úplně na konec CSS) – nadpis se měří od sekce, ne od sloupce s fotkou: sloupce Carga nesmí vytvářet vlastní „rámec“ pro umístění (pozice, transformace, filtr, containment) – jen počítač ===================================================================== */ @media (hover: hover) and (pointer: fine) { html body .home-v2 .hv-section.hv-about { position: relative !important; } html body .home-v2 .hv-about column-set, html body .home-v2 .hv-about column-unit, html body .home-v2 .hv-about column-unit.hv-reveal, html body .home-v2 .hv-about column-unit.hv-reveal.is-visible { position: static !important; transform: none !important; filter: none !important; perspective: none !important; will-change: auto !important; contain: none !important; container-type: normal !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } html body .home-v2 .hv-about .hv-label { position: absolute !important; left: var(--v-okraj, 4.23vw) !important; transform: rotate(180deg) !important; } } /* ===================================================================== PODSTRÁNKY · MENŠÍ MENU, VZDUCH POD MENU, ŠIRŠÍ GALERIE FILMŮ (přidej úplně na konec CSS, za ostatní bloky FILMS) – jen počítač ===================================================================== */ @media (hover: hover) and (pointer: fine) { /* MENU: stejná velikost na všech stránkách (o kousek větší než dřív na homepage) */ html body [id="X4279915566"] .page-content, html body [id="X4279915566"] .page-content * { font-size: clamp(17px, 1.3vw, 30px) !important; /* velikost menu na všech stránkách */ letter-spacing: 0.02em !important; } /* FILMS: širší galerie a nadechnutí pod menu */ html body .films-v2 { --fv-okraj-l: 76px; /* levý okraj (svislý nadpis) – dřív 112 */ --fv-okraj-r: 76px; /* pravý okraj (přehrávač) – dřív 112 */ padding-top: clamp(90px, 8vw, 170px) !important; /* vzduch mezi menu a první fotkou */ } html body .films-v2 .fv-label { left: 28px !important; /* svislý nadpis blíž k okraji okna */ top: clamp(90px, 8vw, 170px) !important; /* začíná v úrovni první fotky */ } /* popisky větší (název filmu zůstává) */ html body .films-v2 .fv-cat { font-size: 12.5px !important; } html body .films-v2 .fv-meta { font-size: 17px !important; } html body .films-v2 .fv-desc { font-size: 17px !important; line-height: 1.6 !important; } html body .films-v2 .fv-text { max-width: 520px !important; } html body .films-v2 .fv-links a { font-size: 16px !important; } } /* ===================================================================== HOMEPAGE · HERO NA POČÍTAČI – KURZOR FOTKU ROZJASNÍ NAD ORIGINÁL (přidej úplně na konec CSS; vrstvu vkládá skript na konci globálního HTML) – režim color-dodge: světla zesílí, černé zůstanou černé, žádný mléčný opar – platí jen v hero; pod hero (při scrollu) zhasne ===================================================================== */ @media (hover: hover) and (pointer: fine) { .hv-boost-d { position: fixed; top: 0; left: 0; width: 44vw; /* velikost rozjasněného kruhu */ height: 44vw; margin: -22vw 0 0 -22vw; /* vždy polovina velikosti */ border-radius: 50%; pointer-events: none; /* SÍLA: světlejší barva = silnější rozjasnění (např. 150,130,112 = víc, 90,78,68 = jemněji) */ background: radial-gradient(circle closest-side, rgba(95, 82, 71, 0.85) 0%, rgba(95, 82, 71, 0.5) 35%, rgba(95, 82, 71, 0.15) 70%, rgba(95, 82, 71, 0) 100%); mix-blend-mode: color-dodge; opacity: 0; transition: opacity 0.8s ease; will-change: transform; } .hv-boost-d.is-on { opacity: 1; } /* pod hero, nad odkazem v menu a nad fotkami v sekcích zhasne */ body.past-hero .hv-boost-d.is-on, body:has([id="X4279915566"] a:hover) .hv-boost-d.is-on, body:has(.home-v2 .hv-still:hover) .hv-boost-d.is-on { opacity: 0; } } /* ===================================================================== PODSTRÁNKA FILMS – TELEFON (přidej úplně na konec CSS) – klidnější rytmus: menší název, drobnější popisky, užší text – fotka · štítek · název · režie · popis · odkazy, vše na střed – mezi filmy velká pauza, uvnitř filmu těsně ===================================================================== */ @media (hover: none) and (pointer: coarse) { html body .films-v2 { padding: 96px 22px 140px !important; /* nahoře místo pro menu, po stranách okraj */ text-align: center !important; } /* MUSIC FOR FILM */ html body .films-v2 .fv-label { display: block !important; width: 100% !important; margin: 0 0 44px !important; padding-left: 0.3em !important; /* vyrovná prostrkání, aby byl nápis opravdu na středu */ text-align: center !important; font-size: 17px !important; letter-spacing: 0.3em !important; line-height: 1.4 !important; } /* film */ html body .films-v2 .fv-film { margin: 0 0 88px !important; /* pauza mezi filmy */ } html body .films-v2 .fv-film:last-child { margin-bottom: 0 !important; } html body .films-v2 .fv-text { max-width: 34em !important; margin: 22px auto 0 !important; padding: 0 6px !important; } /* FEATURE FILM, SHORT FILM… */ html body .films-v2 .fv-cat { font-size: 10px !important; letter-spacing: 0.28em !important; padding-left: 0.28em !important; } /* název filmu */ html body .films-v2 .fv-title { margin: 10px 0 8px !important; font-size: 23px !important; line-height: 1.25 !important; letter-spacing: 0.08em !important; padding-left: 0.08em !important; text-wrap: balance; /* dva řádky vyvážené, ne jedno slovo pod čarou */ } /* režie · rok · … */ html body .films-v2 .fv-meta { font-size: 12.5px !important; line-height: 1.5 !important; letter-spacing: 0.02em !important; text-wrap: balance; } /* popis */ html body .films-v2 .fv-desc { margin: 14px auto 0 !important; max-width: 30em !important; font-size: 14px !important; line-height: 1.6 !important; color: rgba(200, 140, 112, 0.62) !important; /* tišší než název a režie */ } /* PROJECT · WATCH SHOWREEL · LISTEN */ html body .films-v2 .fv-links { display: flex !important; flex-wrap: wrap; justify-content: center; gap: 10px 22px; margin-top: 20px !important; } html body .films-v2 .fv-links a { margin: 0 !important; font-size: 12px !important; letter-spacing: 0.16em !important; padding-bottom: 2px !important; } } /* ===================================================================== PODSTRÁNKA FILMS – VYSOKÁ FOTKA (Proces) NA STŘED (přidej úplně na konec CSS) – Cargo vysoké fotky zmenší na výšku obrazovky; skript v globálním HTML pak rámeček zúží na šířku fotky (třída fv-fit) a tady se postaví na střed ===================================================================== */ @media (hover: hover) and (pointer: fine) { html body .films-v2 .fv-film.fv-fit { margin-left: auto !important; margin-right: auto !important; } /* dvouřádkové názvy vyváženě: „FRANZ KAFKA · / THE TRIAL“, ne „… THE / TRIAL“ */ html body .films-v2 .fv-title { text-wrap: balance; } } /* PROCES a GOLEM (nápis přímo v obraze): užší sloupec textu, název na 3 řádky, aby text nezasahoval do titulku ve fotce – jen počítač */ @media (hover: hover) and (pointer: fine) { html body .films-v2 .fv-film:has(media-item[hash="Z3181118359238603676977342231230"]) .fv-text, html body .films-v2 .fv-film:has(media-item[hash="T3181118161913782320506268594878"]) .fv-text { max-width: 330px !important; /* šířka sloupce textu */ bottom: 34px !important; } html body .films-v2 .fv-film:has(media-item[hash="Z3181118359238603676977342231230"]) .fv-title, html body .films-v2 .fv-film:has(media-item[hash="T3181118161913782320506268594878"]) .fv-title { text-wrap: wrap; } html body .films-v2 .fv-film:has(media-item[hash="Z3181118359238603676977342231230"]) .fv-desc, html body .films-v2 .fv-film:has(media-item[hash="T3181118161913782320506268594878"]) .fv-desc { font-size: 15px !important; } } /* ===================================================================== TLAČÍTKO ZPĚT O ÚROVEŇ + MENU NA TELEFONU (přidej úplně na konec CSS) – počítač: tlačítko dole vlevo jako dosud, popisek BACK (bez historie BACK HOME) – telefon: malé kulaté tlačítko se šipkou dole vlevo + ikona menu (dvě čárky) nahoře na středu na všech stránkách, ne jen na homepage ===================================================================== */ .hv-back { pointer-events: none; /* schované tlačítko (na homepage) nejde omylem kliknout */ } .hv-back.is-on { pointer-events: auto; } @media (hover: none) and (pointer: coarse) { /* tlačítko zpět na telefonu */ html body .hv-back { display: flex !important; left: 16px !important; bottom: 22px !important; gap: 0 !important; } html body .hv-back span { display: none !important; /* na telefonu jen kolečko se šipkou */ } html body .hv-back i { width: 42px !important; height: 42px !important; background: rgba(10, 10, 10, 0.72); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); border-color: rgba(174, 81, 60, 0.8) !important; } /* když je otevřené menu, tlačítko zpět se schová */ body.menu-open .hv-back { opacity: 0 !important; pointer-events: none !important; } /* ikona menu (dvě čárky) na všech stránkách */ html body .menu-icon { display: block !important; top: 26px !important; } } /* ===================================================================== ZTLUMENÍ SVĚTLA KURZORU + JEDNA ŠIPKA ZPĚT NA TELEFONU (přidej úplně na konec CSS, ZA blok „TLAČÍTKO ZPĚT O ÚROVEŇ + MENU NA TELEFONU“) ===================================================================== */ /* ---------- 1 · světlo kurzoru slabší ---------- */ /* šedobílý přísvit kolem kurzoru na celém webu: 1 = jako dosud, 0.75 = o 25 % slabší */ html body .spotlight-overlay { opacity: 0.75 !important; } @media (hover: hover) and (pointer: fine) { /* rozjasnění fotky v hero pod kurzorem: 1 = jako dosud, 0.75 = o 25 % slabší */ html body .hv-boost-d.is-on { opacity: 0.75 !important; } } @media (hover: none) and (pointer: coarse) { /* rozjasnění fotky pod světelnou tečkou na telefonu */ html body.hv-glide-on .hv-boost { opacity: 0.75 !important; /* o 25 % slabší */ } } /* ---------- 2 · telefon: jen jedna šipka zpět ---------- */ @media (hover: none) and (pointer: coarse) { /* šipka zpět na telefonu: tenká šipka z linek nahoře pod ikonou menu (bez kolečka a popisku) */ html body .hv-back { display: block !important; top: 56px !important; bottom: auto !important; left: 50% !important; transform: translateX(-50%); z-index: 2147481500 !important; padding: 8px 10px !important; /* větší plocha pro ťuknutí */ color: var(--ink) !important; } html body .hv-back span { display: none !important; } html body .hv-back i { display: block !important; width: auto !important; height: auto !important; border: 0 !important; border-radius: 0 !important; background: none !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; } html body .hv-back svg { display: block; width: 34px; height: 24px; } html body .hv-back svg path { stroke-width: 0.6px; /* tloušťka linky jako u dvou čárek menu */ } /* ikona menu vždy nad vším ostatním, aby šla ťuknout */ html body .menu-icon { z-index: 2147482000 !important; } html body .mobile-nav { z-index: 2147481000 !important; } } /* ===================================================================== TELEFON · MENU A ŠIPKA PŘI SCROLLOVÁNÍ (přidej úplně na konec CSS) – při scrollu dolů se ikona menu i šipka zpět jemně schovají (obsah je volný) – při scrollu nahoru se vrátí na tmavém pruhu, takže nikdy neleží přímo na textu – stejně se už chová horní menu na počítači (třídy scrolled / hdr-hidden přidává skript) ===================================================================== */ @media (hover: none) and (pointer: coarse) { html body .menu-icon, html body .hv-back { transition: opacity 0.45s ease, visibility 0s linear 0s !important; } /* scroll dolů: schovat */ html body.hdr-hidden:not(.menu-open) .menu-icon, html body.hdr-hidden:not(.menu-open) .hv-back { opacity: 0 !important; visibility: hidden !important; pointer-events: none !important; transition: opacity 0.45s ease, visibility 0s linear 0.45s !important; } /* scroll nahoru: tmavý pruh pod menu a šipkou */ html body .hdr-blur { height: 116px !important; /* výška pruhu – kryje menu i šipku */ background: rgba(10, 10, 10, 0.86) !important; /* tma pruhu: 0.86 = skoro neprůhledný */ -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important; -webkit-mask-image: linear-gradient(to bottom, #000 0, #000 70%, transparent 100%) !important; mask-image: linear-gradient(to bottom, #000 0, #000 70%, transparent 100%) !important; z-index: 2147480000 !important; /* nad obsahem, pod menu a šipkou */ } /* na homepage (bez šipky) stačí nižší pruh */ html body:has(.home-v2) .hdr-blur { height: 84px !important; } } /* ===================================================================== TELEFON · SVĚTELNÁ TEČKA NA FOTKÁCH FILMŮ (přidej úplně na konec CSS) – když tečka vletí na fotku na stránce FILMS, fotka kolem ní ztmavne a tečka ji v kruhu osvětlí – stejně jako fotky na homepage a kurzor na počítači – poloha světla (--fx / --fy) a třídu hv-lit-photo nastavuje skript tečky v globálním HTML ===================================================================== */ @media (hover: none) and (pointer: coarse) { html body .films-v2 .fv-film media-item { position: relative !important; overflow: hidden !important; border-radius: 4px; } /* tma kolem světla */ html body .films-v2 .fv-film media-item::before { content: ""; position: absolute; inset: 0; z-index: 3; pointer-events: none; background: rgba(0, 0, 0, 0.6); /* síla zatmavení: 0.6 = výrazně, 0.4 = jemně */ opacity: 0; transition: opacity 0.9s ease; -webkit-mask-image: radial-gradient(circle 42vw at var(--fx, 50%) var(--fy, 50%), transparent 0%, transparent 20%, black 85%); /* 42vw = velikost světlého kruhu */ mask-image: radial-gradient(circle 42vw at var(--fx, 50%) var(--fy, 50%), transparent 0%, transparent 20%, black 85%); } /* teplé světlo pod tečkou */ html body .films-v2 .fv-film media-item::after { content: ""; position: absolute; inset: 0; z-index: 4; pointer-events: none; opacity: 0; transition: opacity 0.9s ease; background: radial-gradient(circle 42vw at var(--fx, 50%) var(--fy, 50%), rgba(255, 236, 220, 0.14) 0%, rgba(255, 236, 220, 0.05) 40%, transparent 75%); } html body .films-v2 .fv-film media-item.hv-lit-photo::before, html body .films-v2 .fv-film media-item.hv-lit-photo::after { opacity: 1; } } /* ===================================================================== TELEFON · IKONA MENU VŽDY PO RUCE (přidej úplně na konec CSS) – na homepage ikona dřív odjela nahoru spolu s hero; teď zůstává připnutá nahoře a chová se jako na podstránkách: při scrollu dolů se schová, při scrollu nahoru se vrátí na tmavém pruhu ===================================================================== */ @media (hover: none) and (pointer: coarse) { html body .menu-icon { margin-top: 0 !important; /* zruší posouvání ikony spolu se stránkou */ } } /* ===================================================================== PODSTRÁNKA RESTORE POINT (a vzor pro další filmy) – přidej úplně na konec CSS – úvodní obraz = Music Showreel, záměr, zvuková paleta, studio, Listen, teaser a trailer, recenze, ocenění a tvůrci, další film – třídy začínají „rp-“, obal stránky je

===================================================================== */ .rp-page { --rp-okraj: 76px; /* levý a pravý okraj (stejně jako FILMS) */ --rp-pauza: 150px; /* mezera mezi kapitolami */ --rp-med: rgb(240, 190, 160); /* světlá měď (názvy, citáty) */ --rp-t2: rgba(200, 140, 112, 0.78); /* čitelný text */ --rp-t3: rgba(200, 140, 112, 0.6); /* tiché popisky */ --rp-linka: rgba(174, 81, 60, 0.25); position: relative; text-align: left; padding: clamp(90px, 8vw, 170px) var(--rp-okraj) 140px; font-size: 16px; line-height: 1.5; } .page:has(.rp-page) .backdrop { display: none !important; } .page:has(.rp-page) .page-content { padding-left: 0 !important; padding-right: 0 !important; } .rp-page span { display: block; } /* společné písmo */ html body .rp-page .rp-cat, html body .rp-page .rp-num, html body .rp-page .rp-src, html body .rp-page .rp-lab { font-family: "Geist", sans-serif !important; font-weight: 400 !important; font-size: 12.5px !important; letter-spacing: 0.26em !important; text-transform: uppercase !important; line-height: 1.5 !important; color: var(--ink) !important; } html body .rp-page .rp-lab { font-weight: 300 !important; font-size: 13px !important; letter-spacing: 0.3em !important; margin-bottom: 34px; } html body .rp-page .rp-txt, html body .rp-page .rp-meta, html body .rp-page .rp-credits { font-family: "Geist", sans-serif !important; font-weight: 300 !important; font-size: 17px !important; line-height: 1.65 !important; color: var(--rp-t2) !important; } html body .rp-page .rp-title, html body .rp-page .rp-sub, html body .rp-page .rp-lead, html body .rp-page .rp-h, html body .rp-page .rp-quote, html body .rp-page .rp-next-title, html body .rp-page .rp-links a { font-family: "Kalnia", serif !important; font-weight: 250 !important; font-variation-settings: "wght" 250, "wdth" 100 !important; text-transform: uppercase !important; } /* svislý nadpis v levém okraji */ html body .rp-page .rp-vlabel { position: absolute !important; left: 28px; top: clamp(90px, 8vw, 170px); margin: 0 !important; padding: 0 !important; writing-mode: vertical-rl; transform: rotate(180deg); white-space: nowrap; font-family: "Kalnia", serif !important; font-weight: 250 !important; font-size: 22px !important; line-height: 1 !important; letter-spacing: 0.28em !important; text-transform: uppercase !important; color: var(--ink) !important; } /* ---------- 1 · úvodní obraz = Music Showreel ---------- */ .rp-page .rp-hero { position: relative; border-radius: 4px; overflow: hidden; isolation: isolate; } .rp-page .rp-hero media-item { display: block !important; width: 100% !important; margin: 0 !important; } .rp-page .rp-hero media-item::part(media) { border-radius: 0; filter: none; } .rp-page .rp-hero::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to right, rgba(10, 10, 10, 0.88) 0%, rgba(10, 10, 10, 0.45) 36%, rgba(10, 10, 10, 0) 66%), linear-gradient(to top, rgba(10, 10, 10, 0.75) 0%, transparent 40%); } .rp-page .rp-play { position: absolute; z-index: 2; left: 62%; top: 46%; transform: translate(-50%, -50%); display: flex !important; flex-direction: column; align-items: center; gap: 18px; pointer-events: none; /* klik projde na video pod tím */ } .rp-page .rp-play i { position: relative; display: block; width: 96px; height: 96px; border-radius: 50%; border: 1px solid rgba(255, 236, 220, 0.75); background: rgba(10, 10, 10, 0.25); box-shadow: 0 0 40px rgba(255, 214, 186, 0.18); transition: transform 0.6s ease, box-shadow 0.6s ease; } .rp-page .rp-play i::after { content: ""; position: absolute; left: 38px; top: 31px; border-style: solid; border-width: 17px 0 17px 28px; border-color: transparent transparent transparent rgba(255, 244, 236, 0.95); } .rp-page .rp-hero:hover .rp-play i { transform: scale(1.06); box-shadow: 0 0 60px rgba(255, 214, 186, 0.32); } html body .rp-page .rp-play span { font-family: "Geist", sans-serif !important; font-size: 12.5px !important; letter-spacing: 0.32em !important; text-transform: uppercase !important; color: var(--rp-med) !important; } .rp-page .rp-hero-text { position: absolute; z-index: 2; left: 44px; bottom: 44px; max-width: 600px; pointer-events: none; } .rp-page .rp-hero-text a { pointer-events: auto; } html body .rp-page .rp-title { margin: 16px 0 10px !important; font-size: clamp(56px, 5.7vw, 104px) !important; line-height: 1.02 !important; letter-spacing: 0.06em !important; color: var(--rp-med) !important; max-width: 6.5em; } html body .rp-page .rp-sub { margin-bottom: 16px; font-size: 20px !important; letter-spacing: 0.3em !important; color: var(--rp-t2) !important; } /* odkazy (LISTEN, NETFLIX, SPOTIFY…) */ .rp-page .rp-links { margin-top: 30px; } html body .rp-page .rp-links a { display: inline-block; margin-right: 30px; padding-bottom: 3px; font-size: 16px !important; letter-spacing: 0.14em !important; text-decoration: none !important; border-bottom: 1px solid rgba(174, 81, 60, 0.55) !important; color: var(--ink) !important; } html body .rp-page .rp-links a:hover { color: var(--rp-med) !important; border-bottom-color: currentColor !important; } html body .rp-page .rp-links-s a { font-size: 13px !important; } /* ---------- kapitoly ---------- */ .rp-page .rp-sec { padding-top: var(--rp-pauza); } .rp-page .rp-cols2 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 40px; } .rp-page .rp-cols3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: 44px; row-gap: 50px; } .rp-page .rp-col { border-top: 1px solid var(--rp-linka); padding-top: 26px; } html body .rp-page .rp-h { margin: 12px 0 14px; font-size: 30px !important; line-height: 1.2 !important; letter-spacing: 0.08em !important; color: var(--ink) !important; } /* ---------- 2 · záměr ---------- */ .rp-page .rp-intent { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); column-gap: 80px; align-items: start; } html body .rp-page .rp-lead { font-size: clamp(32px, 2.9vw, 52px) !important; line-height: 1.25 !important; letter-spacing: 0.05em !important; color: var(--rp-med) !important; text-wrap: balance; } html body .rp-page .rp-note { margin: 8px 0 22px; font-family: "Geist", sans-serif !important; font-weight: 300 !important; font-size: 19px !important; line-height: 1.6 !important; color: var(--rp-med) !important; opacity: 0.85; } /* ---------- 3 · studio ---------- */ .rp-page .rp-gallery media-item::part(media) { border-radius: 4px; filter: saturate(0.85) brightness(0.85); transition: filter 0.6s ease; } .rp-page .rp-gallery media-item:hover::part(media) { filter: none; } /* ---------- 4 · Listen (řádky kreslí přehrávač v globálním HTML) ---------- */ .rp-page .hv-listen { --t-content: clamp(24px, 1.75vw, 40px); --trk-meta: clamp(14px, 0.9vw, 18px); --trk-time: clamp(14px, 0.9vw, 18px); --trk-pad-y: clamp(20px, 1.4vw, 30px); --trk-gap: clamp(22px, 1.6vw, 36px); --trk-meta-color: var(--tone-2, rgba(200, 140, 112, 0.9)); --trk-time-color: var(--tone-3, rgba(200, 140, 112, 0.6)); max-width: none; text-align: left; } .rp-page .hv-listen audio-player:is([src], [data-src]):not([src=""]), .rp-page .hv-listen > media-item:not([slot]) { display: none !important; } .rp-page #rp-listen .rp-links { margin-top: 34px; } /* ---------- 5 · teaser a trailer ---------- */ .rp-page .rp-intro { margin: -14px 0 30px; } .rp-page .rp-still { position: relative; border-radius: 4px; overflow: hidden; } .rp-page .rp-still media-item { display: block !important; width: 100% !important; margin: 0 !important; } .rp-page .rp-still media-item::part(media) { border-radius: 0; filter: saturate(0.7) brightness(0.8); transition: filter 0.6s ease; } .rp-page .rp-video:hover .rp-still media-item::part(media) { filter: none; } .rp-page .rp-tri { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); border-style: solid; border-width: 14px 0 14px 24px; border-color: transparent transparent transparent rgba(255, 244, 236, 0.9); filter: drop-shadow(0 0 10px rgba(255, 236, 220, 0.6)); pointer-events: none; } .rp-page .rp-video .rp-h { margin: 22px 0 6px; font-size: 26px !important; } .rp-page .rp-video .rp-links { margin-top: 16px; } /* ---------- 6 · recenze ---------- */ html body .rp-page .rp-quote { font-size: 22px !important; line-height: 1.4 !important; letter-spacing: 0.05em !important; color: var(--rp-med) !important; } html body .rp-page .rp-src { margin-top: 16px; color: var(--rp-t2) !important; } /* ---------- 7 · ocenění a tvůrci ---------- */ .rp-page .rp-facts { column-gap: 80px; } .rp-page .rp-award { display: flex; align-items: center; gap: 28px; border-top: 1px solid var(--rp-linka); padding-top: 26px; } .rp-page .rp-award media-item { width: 110px !important; margin: 0 !important; flex: 0 0 auto; } .rp-page .rp-award media-item::part(media) { filter: none; border-radius: 0; } .rp-page .rp-award .rp-h { margin: 0 0 8px; font-size: 34px !important; } .rp-page .rp-credits { display: grid; grid-template-columns: 150px 1fr; row-gap: 10px; border-top: 1px solid var(--rp-linka); padding-top: 22px; } .rp-page .rp-credits span:nth-child(odd) { color: var(--rp-t3); } html body .rp-page .rp-credits a { color: inherit !important; text-decoration: underline !important; text-decoration-thickness: 1px !important; text-underline-offset: 0.18em !important; } /* ---------- 8 · další film ---------- */ .rp-page .rp-next { position: relative; } .rp-page .rp-next media-item { display: block !important; width: 100% !important; height: 300px !important; margin: 0 !important; overflow: hidden; border-radius: 4px; } .rp-page .rp-next media-item::part(media) { width: 100% !important; height: 300px !important; object-fit: cover !important; border-radius: 4px; filter: brightness(0.55); transition: filter 0.8s ease; } .rp-page .rp-next:hover media-item::part(media) { filter: brightness(0.8); } .rp-page .rp-next-text { position: absolute; left: 44px; bottom: 90px; pointer-events: none; } html body .rp-page .rp-next-title { margin-top: 12px; font-size: 56px !important; line-height: 1 !important; letter-spacing: 0.06em !important; color: var(--ink) !important; transition: color 0.8s ease; } .rp-page .rp-next:hover .rp-next-title { color: var(--rp-med) !important; } /* ===================================================================== TELEFON – vše pod sebou, na střed, menší písmo ===================================================================== */ @media (hover: none) and (pointer: coarse) { .rp-page { --rp-pauza: 84px; padding: 116px 22px 120px; text-align: center; } html body .rp-page .rp-vlabel { display: none !important; } .rp-page .rp-hero::before { display: none; } .rp-page .rp-play { top: auto; bottom: auto; left: 50%; top: calc((100vw - 44px) * 0.28); /* střed náhledu 16:9 */ gap: 0; } .rp-page .rp-play i { width: 58px; height: 58px; } .rp-page .rp-play i::after { left: 22px; top: 18px; border-width: 11px 0 11px 18px; } html body .rp-page .rp-play span { display: none !important; } .rp-page .rp-hero { overflow: visible; } .rp-page .rp-hero-text { position: static; max-width: none; margin-top: 30px; } html body .rp-page .rp-title { max-width: none; font-size: 40px !important; letter-spacing: 0.08em !important; margin: 12px 0 8px !important; } html body .rp-page .rp-sub { font-size: 13px !important; } html body .rp-page .rp-cat, html body .rp-page .rp-num, html body .rp-page .rp-src, html body .rp-page .rp-lab { font-size: 10px !important; letter-spacing: 0.28em !important; } html body .rp-page .rp-lab { font-size: 11px !important; margin-bottom: 22px; } html body .rp-page .rp-txt, html body .rp-page .rp-meta, html body .rp-page .rp-credits { font-size: 14.5px !important; } html body .rp-page .rp-links a { margin: 0 11px; font-size: 12px !important; letter-spacing: 0.16em !important; } .rp-page .rp-links { margin-top: 22px; } .rp-page .rp-intent, .rp-page .rp-cols2, .rp-page .rp-cols3 { display: block; } html body .rp-page .rp-lead { font-size: 24px !important; line-height: 1.35 !important; } html body .rp-page .rp-note { margin: 22px 0 16px; font-size: 14.5px !important; } .rp-page .rp-intent .rp-txt, .rp-page .rp-col .rp-txt { text-align: left; } .rp-page .rp-col { padding: 22px 0 30px; text-align: left; } html body .rp-page .rp-h { font-size: 22px !important; margin: 8px 0 10px; } .rp-page .rp-press .rp-col { text-align: center; padding: 20px 0 24px; } html body .rp-page .rp-quote { font-size: 16px !important; line-height: 1.45 !important; } html body .rp-page .rp-src { margin-top: 10px; } .rp-page .rp-video { margin-bottom: 34px; } .rp-page .rp-video .rp-h { margin: 14px 0 4px; font-size: 20px !important; } .rp-page .rp-facts > div + div { margin-top: var(--rp-pauza); } .rp-page .rp-award { flex-direction: column; gap: 14px; border-top: 0; } .rp-page .rp-award media-item { width: 84px !important; } .rp-page .rp-award .rp-h { font-size: 22px !important; } .rp-page .rp-credits { grid-template-columns: auto auto; justify-content: center; column-gap: 14px; text-align: left; } .rp-page .rp-next media-item, .rp-page .rp-next media-item::part(media) { height: 170px !important; } .rp-page .rp-next-text { left: 22px; bottom: 46px; text-align: left; } html body .rp-page .rp-next-title { font-size: 30px !important; margin-top: 8px; } } /* ===================================================================== RESTORE POINT · MOBIL – NÁZEV V OBRAZE (varianta B) (přidej úplně na konec CSS, ZA blok „PODSTRÁNKA RESTORE POINT“) – Music showreel / Teaser / Trailer napsané vlevo dole přímo v obraze, jako názvy filmů na FILMS; žádné kolečko ani trojúhelník – pod obrazem jen skladba a drobné „Listen to the music“ – na počítači se nic nemění ===================================================================== */ .rp-page .rp-in { display: none !important; } @media (hover: none) and (pointer: coarse) { .rp-page .rp-hero-img, .rp-page .rp-still { position: relative; border-radius: 3px; overflow: hidden; } /* jemné ztmavení spodku obrazu kvůli čitelnosti názvu */ .rp-page .rp-hero-img::after, .rp-page .rp-still::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to top, rgba(10, 10, 10, 0.7) 0%, rgba(10, 10, 10, 0) 55%); } html body .rp-page .rp-in { display: block !important; position: absolute; z-index: 2; left: 16px; bottom: 12px; pointer-events: none; /* klik projde na video */ font-family: "Kalnia", serif !important; font-weight: 250 !important; font-variation-settings: "wght" 250, "wdth" 100 !important; font-size: 17px !important; line-height: 1 !important; letter-spacing: 0.12em !important; text-transform: uppercase !important; color: rgb(240, 190, 160) !important; text-align: left; } /* kolečko s play, trojúhelník a název pod obrazem pryč */ .rp-page .rp-play, .rp-page .rp-tri, html body .rp-page .rp-video .rp-h { display: none !important; } .rp-page .rp-hero-text { margin-top: 50px; } /* teaser a trailer: větší odstup, pod obrazem jen skladba + odkaz */ .rp-page .rp-video { margin-bottom: 76px; } .rp-page .rp-video:last-child { margin-bottom: 0; } html body .rp-page .rp-video .rp-meta { display: block; margin-top: 14px; font-size: 14px !important; } .rp-page .rp-video .rp-links { margin-top: 6px; } html body .rp-page .rp-links-s a { margin: 0 !important; padding: 0 !important; border: 0 !important; font-family: "Geist", sans-serif !important; font-weight: 400 !important; font-size: 10px !important; letter-spacing: 0.3em !important; text-transform: uppercase !important; color: rgba(200, 140, 112, 0.6) !important; } } /* ===================================================================== RESTORE POINT · MOBIL – VŠECHNO NA STŘED (jako zbytek webu na mobilu) (přidej úplně na konec CSS, ZA blok „RESTORE POINT · MOBIL – NÁZEV V OBRAZE“; blok „VŠECHNO ZAROVNANÉ DOLEVA“ NEvkládej, případně ho smaž) – nadpisy, odstavce, paleta, citáty, tvůrci i názvy v obraze na střed – tvůrci pod sebou: role malým písmem, pod ní jméno – řádky přehrávače Listen zůstávají, jak jsou – na počítači se nic nemění ===================================================================== */ @media (hover: none) and (pointer: coarse) { html body .rp-page, html body .rp-page .rp-hero-text, html body .rp-page .rp-sec, html body .rp-page .rp-intent .rp-txt, html body .rp-page .rp-col, html body .rp-page .rp-col .rp-txt, html body .rp-page .rp-press .rp-col, html body .rp-page .rp-video, html body .rp-page .rp-facts, html body .rp-page .rp-next-text { text-align: center !important; } html body .rp-page .rp-txt { text-wrap: pretty; } /* názvy v obraze: dole uprostřed */ html body .rp-page .rp-in { left: 0; right: 0; text-align: center !important; } /* ocenění */ .rp-page .rp-award { align-items: center; } /* tvůrci: role nad jménem, vše na střed */ .rp-page .rp-credits { display: block; text-align: center; } .rp-page .rp-credits span:nth-child(odd) { margin-top: 16px; font-size: 10px; letter-spacing: 0.28em; text-transform: uppercase; } .rp-page .rp-credits span:first-child { margin-top: 0; } /* další film: text uprostřed obrázku */ .rp-page .rp-next-text { left: 0; right: 0; top: calc(var(--rp-pauza) + 85px); /* odstup sekce + polovina výšky obrázku (170px) */ bottom: auto; transform: translateY(-50%); } } /* ===================================================================== SVISLÝ NADPIS V LEVÉM OKRAJI – PRAVIDLO PRO VŠECHNY PODSTRÁNKY (přidej úplně na konec CSS; předchozí dvě verze tohoto bloku SMAŽ) – pevný nadpis kreslí skript „svislý nadpis pevný“ v globálním HTML – platí pro FILMS (.fv-label), Restore Point a stránky podle něj (.rp-vlabel) a pro jakoukoli další podstránku s

Commercials

– počítač: nadpis stojí v okraji, obsah se posouvá vedle něj – telefon: nadpis nahoře na střed, vodorovně ===================================================================== */ /* vzhled nadpisu (stejný jako na FILMS a Restore Point) */ html body .sub-vlabel, .hv-vlabel { margin: 0 !important; padding: 0 !important; white-space: nowrap; font-family: "Kalnia", serif !important; font-weight: 250 !important; font-variation-settings: "wght" 250, "wdth" 100 !important; font-size: 22px !important; line-height: 1 !important; letter-spacing: 0.28em !important; text-transform: uppercase !important; color: var(--ink, rgba(174, 81, 60, 0.9)) !important; } /* pevná kopie v okraji (vkládá ji skript přímo do ) */ .hv-vlabel { position: fixed; left: 28px; top: clamp(90px, 8vw, 170px); z-index: 9980; writing-mode: vertical-rl; transform: rotate(180deg); pointer-events: none; opacity: 0; transition: opacity 0.6s ease; } .hv-vlabel.is-on { opacity: 1; } @media (hover: hover) and (pointer: fine) { /* původní nadpisy ve stránce schovat – místo nich je pevná kopie */ html body .rp-page .rp-vlabel, html body .films-v2 .fv-label, html body .sub-vlabel { visibility: hidden !important; } } @media (hover: none) and (pointer: coarse) { .hv-vlabel { display: none !important; } html body .sub-vlabel { display: block !important; width: 100% !important; margin: 0 0 44px !important; padding-left: 0.3em !important; text-align: center !important; font-size: 17px !important; letter-spacing: 0.3em !important; white-space: normal; } } /* ===================================================================== RESTORE POINT · ZVUKOVÁ PALETA NA ČTYŘI SLOUPCE (Metal, Machines, Orchestra, Voices) – přidej úplně na konec CSS – počítač: 4 sloupce vedle sebe; užší okno: 2 + 2 – telefon: pod sebou jako dřív ===================================================================== */ @media (hover: hover) and (pointer: fine) { .rp-page .rp-cols3.rp-pal { grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 36px; } } @media (hover: hover) and (pointer: fine) and (max-width: 1100px) { .rp-page .rp-cols3.rp-pal { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ===================================================================== HEADER MENU · MENŠÍ PÍSMO NA VŠECH STRÁNKÁCH (přidej úplně na konec CSS) – o zhruba 15 % menší než dosud (bylo 1.3vw) – velikost doladíš prostředním číslem: 1.1vw = teď, 1.2vw = o kousek větší, 1vw = ještě menší – jen počítač (na telefonu je menu schované v ikoně) ===================================================================== */ @media (hover: hover) and (pointer: fine) { html body [id="X4279915566"] .page-content, html body [id="X4279915566"] .page-content * { font-size: clamp(15px, 1.1vw, 26px) !important; } } /* ===================================================================== KURZOR · ZÁŘE JEN NAD ODKAZEM (přidej úplně na konec CSS) – v klidu je kurzor čistá světlá tečka bez záře – záře se objeví, jen když kurzor najede na něco klikacího (odkaz, tlačítko, fotku s prolinkem, přehrávač, recenzi…) – kurzor „play“ nad videem zůstává, jak je – totéž platí pro velký měkký přísvit kolem kurzoru: v klidu zhasne, nad klikacím prvkem se plynule rozsvítí – VÝJIMKA: hero na homepage zůstává přesně jako dosud (tečka i přísvit) – světlo, které rozsvěcuje fotky (FILMS, hero, galerie), se nemění – jen počítač ===================================================================== */ @media (hover: hover) and (pointer: fine) { /* v klidu: tečka má jen lehkou bílou záři (původní nastavení) – velký přísvit je vypnutý níž */ /* nad klikacím prvkem: záře (stejná jako dosud) */ html body:has( a:hover, .linked:hover, [href]:hover, button:hover, media-item.zoomable:hover, .film-still-wrap:hover, .page[page-url="commercial-subpage"] gallery-columnized media-item:hover, .hv-listen:hover, .home-v2 #hv-work .hv-card-name:hover ):not(:has(media-item[href*="vimeo.com"]:hover, a[href*="vimeo.com"]:hover))::after { box-shadow: 0 0 16px 4px rgba(255, 244, 236, 0.9), 0 0 48px 20px rgba(255, 244, 236, 0.5) !important; } /* výjimka: hero na homepage – tečka se září jako dosud */ html body:has(.home-v2 .hv-hero:hover):not(:has(media-item[href*="vimeo.com"]:hover, a[href*="vimeo.com"]:hover))::after { box-shadow: 0 0 16px 5px rgba(255, 244, 236, 0.55) !important; } } /* ---------- velký přísvit kolem kurzoru: jen nad klikacím prvkem ---------- */ @media (hover: hover) and (pointer: fine) { /* v klidu zhasnutý (mimo hero na homepage) */ html body:not(:has(.home-v2 .hv-hero:hover)) .spotlight-overlay { opacity: 0 !important; } /* nad odkazem, tlačítkem, přehrávačem… se rozsvítí (0.75 = síla jako dosud; nad fotkami a v menu zůstává vypnutý jako dřív) */ html body:has( a:hover, .linked:hover, [href]:hover, button:hover, .hv-listen:hover, .home-v2 #hv-work .hv-card-name:hover ):not(:has( .home-v2 .hv-hero:hover, [id="X4279915566"] a:hover, .films-v2 .fv-film:hover, .home-v2 .hv-still:hover )) .spotlight-overlay { opacity: 0.75 !important; } } /* ===================================================================== RESTORE POINT · CELÁ RECENZE JE PROKLIK NA ZDROJ (přidej úplně na konec CSS; pokud už tam máš předchozí verzi „RECENZE S ODKAZEM NA ZDROJ“, nahraď ji) – klik kamkoli do citátu nebo na název média otevře celou recenzi v nové záložce – při najetí se citát i název média rozsvítí ===================================================================== */ html body .rp-page a.rp-review { display: block; color: inherit !important; text-decoration: none !important; } html body .rp-page a.rp-review .rp-quote, html body .rp-page a.rp-review .rp-src { transition: color 0.5s ease, text-shadow 0.5s ease; } @media (hover: hover) and (pointer: fine) { html body .rp-page a.rp-review:hover .rp-quote { color: rgb(255, 222, 200) !important; text-shadow: 0 0 28px rgba(255, 214, 186, 0.3); } html body .rp-page a.rp-review:hover .rp-src { color: rgb(240, 190, 160) !important; } } /* ===================================================================== 1 · KURZOR NAD HEADER MENU – VĚTŠÍ PRSTENEC 2 · RESTORE POINT (počítač) – BEZ KOLEČKA S PLAY (přidej úplně na konec CSS) ===================================================================== */ @media (hover: hover) and (pointer: fine) { /* 1 · nad odkazem v menu je kurzor tenký prázdný prstenec tak velký, aby se do něj písmena vešla celá (velikost roste s písmem menu) */ html body:has([id="X4279915566"] a:hover)::after { width: clamp(46px, 3.3vw, 78px) !important; height: clamp(46px, 3.3vw, 78px) !important; margin: calc(clamp(46px, 3.3vw, 78px) / -2) 0 0 calc(clamp(46px, 3.3vw, 78px) / -2) !important; border-width: 1px !important; border-color: rgba(255, 244, 236, 0.85) !important; background: transparent !important; } /* 2 · Restore Point: úvodní video bez kolečka s ikonou play – zůstává jen nápis; že jde o video, ukáže kurzor (změní se v play) */ html body .rp-page .rp-play i { display: none !important; } html body .rp-page .rp-play span { font-family: "Kalnia", serif !important; font-weight: 250 !important; font-variation-settings: "wght" 250, "wdth" 100 !important; font-size: 22px !important; letter-spacing: 0.24em !important; color: rgb(240, 190, 160) !important; transition: color 0.6s ease, text-shadow 0.6s ease; } html body .rp-page .rp-hero:hover .rp-play span { color: rgb(255, 228, 210) !important; text-shadow: 0 0 28px rgba(255, 214, 186, 0.35); } /* teaser a trailer: bez trojúhelníku uprostřed obrázku */ html body .rp-page .rp-tri { display: none !important; } } /* ===================================================================== KLIKACÍ FOTKY NA CELÉM WEBU: ZATMAVÍ SE A KURZOR JE ROZSVĚCUJE (přidej úplně na konec CSS; patří k němu úprava prvního skriptu v globálním HTML – verze e) – platí pro každou fotku s prolinkem (video, podstránka…), která ještě nemá vlastní světlo: úvodní obraz Restore Point, teaser, trailer, další film, fotky na podstránkách filmů a reklam… – FILMS, fotky na homepage a galerie COMMERCIALS mají světlo vlastní, těch se blok netýká – jen počítač ===================================================================== */ @property --mi-r { syntax: ''; inherits: true; initial-value: 0px; } @media (hover: hover) and (pointer: fine) { :is(media-item.linked, media-item[href]):not( .films-v2 .fv-film media-item, .home-v2 .hv-still media-item, .film-still-wrap media-item, .page[page-url="commercial-subpage"] gallery-columnized media-item ) { --mi-tma: 0.55; /* síla zatmavení: 0 = vůbec, 0.55 = jako FILMS */ --mi-kruh: min(30vw, 520px); /* velikost rozsvíceného kruhu */ --mi-r: 0px; position: relative; isolation: isolate; transition: --mi-r 0.7s ease; } :is(media-item.linked, media-item[href]):not( .films-v2 .fv-film media-item, .home-v2 .hv-still media-item, .film-still-wrap media-item, .page[page-url="commercial-subpage"] gallery-columnized media-item ):hover { --mi-r: var(--mi-kruh); } /* tma přes fotku, pod kurzorem v ní vznikne světlý kruh */ :is(media-item.linked, media-item[href]):not( .films-v2 .fv-film media-item, .home-v2 .hv-still media-item, .film-still-wrap media-item, .page[page-url="commercial-subpage"] gallery-columnized media-item )::before { content: ""; position: absolute; inset: 0; z-index: 5; pointer-events: none; border-radius: inherit; background: rgba(5, 5, 5, var(--mi-tma)); opacity: 0; transition: opacity 0.6s ease; -webkit-mask-image: radial-gradient(circle calc(var(--mi-r) + 1px) at var(--fx, 50%) var(--fy, 50%), transparent 0%, transparent 25%, black 90%); mask-image: radial-gradient(circle calc(var(--mi-r) + 1px) at var(--fx, 50%) var(--fy, 50%), transparent 0%, transparent 25%, black 90%); } /* teplé světlo pod kurzorem */ :is(media-item.linked, media-item[href]):not( .films-v2 .fv-film media-item, .home-v2 .hv-still media-item, .film-still-wrap media-item, .page[page-url="commercial-subpage"] gallery-columnized media-item )::after { content: ""; position: absolute; inset: 0; z-index: 6; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; background: radial-gradient(circle calc(var(--mi-r) + 1px) at var(--fx, 50%) var(--fy, 50%), rgba(255, 236, 220, 0.12) 0%, rgba(255, 236, 220, 0.04) 40%, transparent 75%); } :is(media-item.linked, media-item[href]):not( .films-v2 .fv-film media-item, .home-v2 .hv-still media-item, .film-still-wrap media-item, .page[page-url="commercial-subpage"] gallery-columnized media-item ):hover::before, :is(media-item.linked, media-item[href]):not( .films-v2 .fv-film media-item, .home-v2 .hv-still media-item, .film-still-wrap media-item, .page[page-url="commercial-subpage"] gallery-columnized media-item ):hover::after { opacity: 1; } /* šedobílý přísvit stránky nad takovou fotkou vypnout – světlo dělá fotka sama (jako na FILMS) */ html:not(#hv-a):not(#hv-b) body:has(:is(media-item.linked, media-item[href]):not( .films-v2 .fv-film media-item, .home-v2 .hv-still media-item, .film-still-wrap media-item, .page[page-url="commercial-subpage"] gallery-columnized media-item ):hover) .spotlight-overlay { opacity: 0 !important; } } /* ===================================================================== KURZOR · JEMNÁ ZÁŘE JDE ZA TEČKOU S MALÝM ZPOŽDĚNÍM (přidej úplně na konec CSS; patří k němu skript „kurzor – zpožděná záře“ na konci globálního HTML – verze f) – tečka zůstává přesně na kurzoru, záře kolem ní je samostatná a tečku jemně dohání (velikost zpoždění = K ve skriptu) – stavy záře jsou stejné jako dosud: lehká v klidu, silnější nad odkazem, prstenec v menu, žádná nad videem (kurzor play) – jen počítač ===================================================================== */ .hv-halo { display: none; } @media (hover: hover) and (pointer: fine) { /* záře už nepatří tečce – tečka je čistá */ html:not(#hv-a):not(#hv-b):not(#hv-c) body::after, html body:has(.home-v2)::after, html body:has(.page[page-url="commercial-subpage"])::after, html:not(#hv-a):not(#hv-b):not(#hv-c) body:has(a:hover, .linked:hover, [href]:hover, button:hover, .hv-listen:hover, #hv-work .hv-card-name:hover, .home-v2 .hv-hero:hover)::after, html:not(#hv-a):not(#hv-b):not(#hv-c) body:has([id="X4279915566"] a:hover)::after { box-shadow: none !important; } /* záře: v klidu (stejná jako dosud) */ .hv-halo { display: block; position: fixed; left: 0; top: 0; width: 14px; height: 14px; margin: -7px 0 0 -7px; border-radius: 50%; pointer-events: none; z-index: 2147483646; /* těsně pod tečkou */ background: rgba(255, 244, 236, 0.4); box-shadow: 0 0 12px 4px rgba(255, 244, 236, 0.5); will-change: transform; transition: width 0.35s ease, height 0.35s ease, margin 0.35s ease, background 0.35s ease, box-shadow 0.35s ease, opacity 0.35s ease; } html body:has(.home-v2) .hv-halo { box-shadow: 0 0 16px 5px rgba(255, 244, 236, 0.55); } html body:has(.page[page-url="commercial-subpage"]) .hv-halo { box-shadow: 0 0 10px 2px rgba(255, 244, 236, 0.4); } /* nad klikacím prvkem: silnější záře (stejná jako dosud) */ html body:has( a:hover, .linked:hover, [href]:hover, button:hover, media-item.zoomable:hover, .film-still-wrap:hover, .page[page-url="commercial-subpage"] gallery-columnized media-item:hover, .hv-listen:hover, .home-v2 #hv-work .hv-card-name:hover ) .hv-halo.hv-halo { width: 28px; height: 28px; margin: -14px 0 0 -14px; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 16px 4px rgba(255, 244, 236, 0.9), 0 0 48px 20px rgba(255, 244, 236, 0.5); } /* nad menu: záře kolem velkého prstence, uvnitř prázdno (písmena zůstanou čitelná) */ html:not(#hv-a):not(#hv-b):not(#hv-c) body:has([id="X4279915566"] a:hover) .hv-halo { width: clamp(46px, 3.3vw, 78px); height: clamp(46px, 3.3vw, 78px); margin: calc(clamp(46px, 3.3vw, 78px) / -2) 0 0 calc(clamp(46px, 3.3vw, 78px) / -2); background: transparent; } /* nad videem (kurzor play): bez záře, trojúhelník má vlastní */ html:not(#hv-a):not(#hv-b):not(#hv-c):not(#hv-d) body:has(media-item[href*="vimeo.com"]:hover, a[href*="vimeo.com"]:hover) .hv-halo { opacity: 0; } } /* ===================================================================== RESTORE POINT · OCENĚNÍ CZECH LION VĚTŠÍ (přidej úplně na konec CSS) – rozložení zůstává (soška vlevo, nápis vpravo), jen je vše větší – velikost sošky: width u media-item, velikost nápisu: font-size u .rp-h ===================================================================== */ html body .rp-page .rp-award { gap: 44px; } html body .rp-page .rp-award media-item { width: 200px !important; /* soška – bylo 110 px */ max-width: none !important; flex: 0 0 auto; } html body .rp-page .rp-award media-item::part(media) { width: 100% !important; height: auto !important; } html body .rp-page .rp-award .rp-h { font-size: 50px !important; /* nápis CZECH LION – bylo 34 px */ margin: 0 0 12px !important; } html body .rp-page .rp-award .rp-cat { font-size: 14px !important; /* NOMINEE · 2023 · BEST MUSIC – bylo 12,5 px */ } @media (hover: none) and (pointer: coarse) { html body .rp-page .rp-award { gap: 18px; } html body .rp-page .rp-award media-item { width: 130px !important; /* soška na telefonu – bylo 84 px */ } html body .rp-page .rp-award .rp-h { font-size: 30px !important; /* bylo 22 px */ margin: 0 0 8px !important; } html body .rp-page .rp-award .rp-cat { font-size: 11px !important; } } /* ===================================================================== RESTORE POINT · SOŠKA NA STŘED POD SLOVEM „RECOGNITION“ (přidej úplně na konec CSS, ZA blok „OCENĚNÍ CZECH LION VĚTŠÍ“) – soška je v obrázku uprostřed, obrázek se posune doleva tak, aby osa sošky ležela pod středem slova RECOGNITION – nápis CZECH LION zůstává na svém místě – jen počítač (na telefonu je vše na střed, tam už to sedí) ===================================================================== */ @media (hover: hover) and (pointer: fine) { html body .rp-page .rp-award { --rp-posun: calc(4.8 * 13px - 100px); /* střed slova RECOGNITION − polovina obrázku (200 px) */ gap: calc(44px - var(--rp-posun)); } html body .rp-page .rp-award media-item { margin-left: var(--rp-posun) !important; } } /* ===================================================================== MOBIL · SVĚTELNÁ TEČKA NAD ODKAZEM SE ZVĚTŠÍ JAKO KURZOR NA POČÍTAČI (přidej úplně na konec CSS) – když tečka přeletí přes cokoli, na co jde tapnout (odkaz, fotka s prolinkem, recenze, skladba…), plynule se zvětší na dvojnásobek a rozzáří se – stejně jako kurzor nad odkazem na počítači – platí na celém webu, jen telefon ===================================================================== */ @media (hover: none) and (pointer: coarse) { html body .hv-glider { transition: opacity 1.2s ease, width 0.6s ease, height 0.6s ease, margin 0.6s ease, background 0.6s ease, box-shadow 0.9s ease !important; } html body .hv-glider.is-over { width: 28px !important; height: 28px !important; margin: -14px 0 0 -14px !important; background: rgba(255, 255, 255, 0.9) !important; box-shadow: 0 0 16px 4px rgba(255, 244, 236, 0.9), 0 0 48px 20px rgba(255, 244, 236, 0.5) !important; } } /* ============================================================ ANETA · VĚTŠÍ TEXT ZÁMĚRU (append-only, na konec CSS) – platí jen tam, kde má blok třídu rp-intent-big (Aneta) – Restore Point a ostatní stránky se nemění typografická škála: základ textu 17 px, krok ×1,25 17 → 21 (odstavec) → 26 (úvodní věta „Writing music…") velký nadpis (Kalnia, 2,9vw ≈ 44 px) zůstává nahoře ============================================================ */ html body .rp-page .rp-intent-big .rp-note { margin: 10px 0 26px; font-size: 26px !important; line-height: 1.4 !important; opacity: 1; } html body .rp-page .rp-intent-big .rp-txt { font-size: 21px !important; line-height: 1.6 !important; color: rgba(215, 160, 130, 0.88) !important; } @media (hover: none) and (pointer: coarse) { html body .rp-page .rp-intent-big .rp-note { margin: 26px 0 16px; font-size: 19px !important; line-height: 1.45 !important; } html body .rp-page .rp-intent-big .rp-txt { font-size: 18px !important; line-height: 1.6 !important; } } /* ===================================================================== TLAČÍTKO BACK · KURZOR REAGUJE STEJNĚ JAKO NAD HEADER MENU (přidej úplně na konec CSS; jen počítač) – nad tlačítkem je kurzor tenký prázdný prstenec (stejná velikost jako v menu), bez bílé záře uprostřed, bez přísvitu a bez odkrývání fotky pod ním – popisek tlačítka se mění podle stránky (skript): BACK TO FILMS / BACK TO HERO… ===================================================================== */ @media (hover: hover) and (pointer: fine) { /* zhasne odkrytí fotky a přísvit (jako v menu) */ html:not(#hv-a):not(#hv-b):not(#hv-c) body:has(.hv-back.is-on:hover), html:not(#hv-a):not(#hv-b):not(#hv-c) body:has(.hv-back.is-on:hover) .backdrop { --dim-radius: 1px !important; } html:not(#hv-a):not(#hv-b):not(#hv-c) body:has(.hv-back.is-on:hover) .spotlight-overlay { opacity: 0 !important; } html:not(#hv-a):not(#hv-b):not(#hv-c) body:has(.hv-back.is-on:hover) .hv-boost-d.is-on { opacity: 0 !important; } /* tečka se změní v tenký prázdný prstenec */ html:not(#hv-a):not(#hv-b):not(#hv-c) body:has(.hv-back.is-on:hover)::after { width: clamp(46px, 3.3vw, 78px) !important; height: clamp(46px, 3.3vw, 78px) !important; margin: calc(clamp(46px, 3.3vw, 78px) / -2) 0 0 calc(clamp(46px, 3.3vw, 78px) / -2) !important; border-width: 1px !important; border-color: rgba(255, 244, 236, 0.85) !important; background: transparent !important; box-shadow: none !important; } /* záře kolem prstence, uvnitř prázdno */ html:not(#hv-a):not(#hv-b):not(#hv-c) body:has(.hv-back.is-on:hover) .hv-halo.hv-halo { width: clamp(46px, 3.3vw, 78px); height: clamp(46px, 3.3vw, 78px); margin: calc(clamp(46px, 3.3vw, 78px) / -2) 0 0 calc(clamp(46px, 3.3vw, 78px) / -2); background: transparent; } /* kroužek se šipkou se nad tlačítkem nerozsvěcuje – prstenec kurzoru ho obepíná */ .hv-back.is-on:hover i { background: transparent; } } /* ===================================================================== DRAMATURGICKÁ MAPA – sekce THE MUSICAL SHAPE OF A FILM na homepage (přidej úplně na konec CSS; nic stávajícího nepřepisuje, všechny selektory začínají .hv-shape a patří jen téhle sekci) – na počítači: svislý nadpis v okraji dělá stávající CSS sekcí, mapa se roztáhne od svislého nadpisu k pravému okraji – na telefonu: vystředěno, mapa se dá posouvat do stran ===================================================================== */ html body .home-v2 .hv-shape-lead, html body .home-v2 .hv-shape-text, html body .home-v2 .hv-shape-note { display: block; } /* věta nad mapou – Kalnia verzálky jako ostatní výrazné texty */ html body .home-v2 .hv-shape-lead { max-width: 22em; font-family: "Kalnia", serif !important; font-weight: var(--kalnia-w) !important; font-variation-settings: "wght" var(--kalnia-w), "wdth" 100 !important; font-style: normal !important; font-size: clamp(26px, 2.1vw, 50px) !important; line-height: 1.3 !important; letter-spacing: 0.06em !important; text-transform: uppercase !important; color: var(--v-med, rgba(232, 186, 160, 0.9)) !important; text-wrap: balance; } /* odstavec – Geist Light, stejná velikost a barva jako text v ABOUT */ html body .home-v2 .hv-shape-text { max-width: 40em; margin: clamp(22px, 1.7vw, 40px) 0 0 !important; font-family: "Geist", sans-serif !important; font-weight: 300 !important; font-style: normal !important; font-size: clamp(16px, 1.12vw, 24px) !important; line-height: 1.7 !important; letter-spacing: 0.005em !important; color: var(--tone-2) !important; } /* mapa: širší než sloupec textu – od svislého nadpisu k pravému okraji */ html body .home-v2 .hv-shape-map { margin-top: clamp(48px, 4vw, 96px); margin-left: calc(var(--v-okraj, 64px) + var(--v-nadpis, 24px) + 30px - var(--v-obsah, 184px)); margin-right: calc(var(--v-okraj, 64px) - var(--v-obsah, 184px)); } html body .home-v2 .hv-shape-scroll { border: 1px solid rgba(174, 81, 60, 0.22); border-radius: 4px; background: #121110; padding: clamp(10px, 1.2vw, 24px); } html body .home-v2 .hv-shape-scroll img { display: block; width: 100%; height: auto; pointer-events: none; } html body .home-v2 .hv-shape-note { margin-top: 16px; font-family: "Geist", sans-serif !important; font-weight: 300 !important; font-size: var(--v-maly, 12px) !important; letter-spacing: 0.04em !important; line-height: 1.5 !important; color: var(--v-med-tisi, rgba(232, 186, 160, 0.62)) !important; } /* ---------- telefon: vše na střed, mapa se posouvá do stran ---------- */ @media (hover: none) and (pointer: coarse) { /* dlouhý nadpis sekce se na úzkém displeji zalomí na dva řádky */ html body .home-v2 #hv-shape .hv-label { white-space: normal !important; line-height: 1.5 !important; font-size: 21px !important; letter-spacing: 0.22em !important; padding-left: 0.22em !important; text-wrap: balance; } html body .home-v2 .hv-shape-lead { max-width: none; margin-left: auto; margin-right: auto; font-size: 21px !important; letter-spacing: 0.05em !important; text-align: center !important; } html body .home-v2 .hv-shape-text { max-width: none; margin: 22px 0 0 !important; font-size: 15px !important; line-height: 1.65 !important; text-align: center !important; } html body .home-v2 .hv-shape-map { margin: 40px 0 0; } html body .home-v2 .hv-shape-scroll { padding: 8px; overflow-x: auto; -webkit-overflow-scrolling: touch; } html body .home-v2 .hv-shape-scroll img { width: 860px; /* v celé šířce displeje je mapa nečitelná – posouvá se do stran */ max-width: none; } html body .home-v2 .hv-shape-note { font-size: 11.5px !important; text-align: center !important; } } /* ---------- mapa vložená jako obrázek z Carga (media-item) ---------- */ html body .home-v2 .hv-shape-scroll media-item { display: block; width: 100% !important; max-width: none !important; margin: 0 !important; pointer-events: none; } html body .home-v2 .hv-shape-scroll media-item::part(media) { filter: none !important; border-radius: 0 !important; } @media (hover: none) and (pointer: coarse) { html body .home-v2 .hv-shape-scroll media-item { width: 860px !important; /* v celé šířce displeje je mapa nečitelná – posouvá se do stran */ } } /* ===================================================================== EVERYTHING WE MISSED – nadpis v hero se nesmí lámat uprostřed slova (platí jen pro podstránku "everything"; Restore Point a Aneta se nemění) ===================================================================== */ html body .page[page-url="everything"] .rp-page .rp-title { max-width: 9.5em !important; text-wrap: balance; overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; } /* ===================================================================== PODSTRÁNKA COMMERCIALS – ZKUŠEBNÍ VARIANTY D, E, F (přidej úplně na konec CSS; nic stávajícího nepřepisuje) – vlož do stránky JEN JEDNO HTML: commercials-D / -E / -F; varianty se rozlišují třídou cm-d, cm-e, cm-f na vnější obálce – D: pásy přes celou šířku · E: mozaika, text při najetí · F: seznam vlevo, velký náhled vpravo – F: automatické listování seznamem dělá skript v globálním HTML (verze f) – světlo kurzoru nad fotkami dělá stávající pravidlo pro klikací fotky – na telefonu jsou všechny tři stejné: fotky pod sebou, název pod fotkou ===================================================================== */ /* společný základ */ .page:has(.cm-v2) .backdrop { display: none !important; } .page:has(.cm-v2) .page-content { padding-left: 0 !important; padding-right: 0 !important; } html body .cm-v2 { position: relative; text-align: left; padding: clamp(90px, 8vw, 170px) 76px 140px; font-size: 16px; line-height: 1.5; } .cm-v2 .cm-item { position: relative; } .cm-v2 media-item { display: block !important; width: 100% !important; margin: 0 !important; } .cm-v2 media-item::part(media) { border-radius: 0; filter: none; } html body .cm-v2 .cm-name { display: block; font-family: "Kalnia", serif !important; font-weight: 250 !important; font-variation-settings: "wght" 250, "wdth" 100 !important; text-transform: uppercase !important; letter-spacing: 0.06em !important; line-height: 1.1 !important; text-decoration: none !important; color: var(--ink, rgba(174, 81, 60, 0.9)) !important; transition: color 0.9s ease, text-shadow 0.9s ease, opacity 0.5s ease; } html body .cm-v2 .cm-meta, html body .cm-v2 .cm-note { display: block; font-family: "Geist", sans-serif !important; font-weight: 300 !important; font-size: 17px !important; line-height: 1.5 !important; color: rgba(200, 140, 112, 0.78) !important; } html body .cm-v2 .cm-note { margin-top: 2px; font-size: 16px !important; color: rgba(200, 140, 112, 0.62) !important; } @media (hover: hover) and (pointer: fine) { /* ---------- D · PÁSY PŘES CELOU ŠÍŘKU ---------- */ .cm-d .cm-item { height: clamp(220px, 20.5vw, 340px); margin-bottom: 10px; border-radius: 3px; overflow: hidden; isolation: isolate; } .cm-d media-item { position: absolute !important; inset: 0; height: 100% !important; } .cm-d media-item::part(media) { width: 100% !important; height: 100% !important; object-fit: cover !important; } .cm-d .cm-item::before { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(to right, rgba(10, 10, 10, 0.88) 0%, rgba(10, 10, 10, 0.5) 38%, rgba(10, 10, 10, 0) 70%); } .cm-d .cm-text { position: absolute; z-index: 2; left: 48px; top: 50%; transform: translateY(-50%); max-width: 70%; pointer-events: none; } html body .cm-d .cm-name { font-size: clamp(34px, 3.9vw, 68px) !important; pointer-events: none; } html body .cm-d .cm-meta { margin-top: 12px; } html body .cm-d .cm-item:hover .cm-name { color: rgb(240, 190, 160) !important; text-shadow: 0 0 24px rgba(255, 214, 186, 0.25); } /* ---------- E · MOZAIKA, TEXT PŘI NAJETÍ ---------- */ .cm-e .cm-grid { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: clamp(150px, 14.2vw, 240px); grid-auto-flow: dense; gap: 10px; } .cm-e .cm-item { overflow: hidden; border-radius: 3px; isolation: isolate; } .cm-e .cm-item:nth-child(1) { grid-column: span 2; grid-row: span 2; } .cm-e .cm-item:nth-child(6), .cm-e .cm-item:nth-child(11), .cm-e .cm-item:nth-child(14) { grid-column: span 2; } .cm-e media-item { position: absolute !important; inset: 0; height: 100% !important; } .cm-e media-item::part(media) { width: 100% !important; height: 100% !important; object-fit: cover !important; } .cm-e .cm-text { position: absolute; inset: 0; z-index: 2; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 20px; background: rgba(10, 10, 10, 0.5); opacity: 0; transition: opacity 0.5s ease; pointer-events: none; } .cm-e .cm-item:hover .cm-text { opacity: 1; } html body .cm-e .cm-name { font-size: clamp(22px, 2.2vw, 38px) !important; color: rgb(240, 190, 160) !important; text-shadow: 0 0 24px rgba(255, 214, 186, 0.25); pointer-events: none; } html body .cm-e .cm-meta { margin-top: 10px; font-size: 14px !important; } html body .cm-e .cm-note { font-size: 13px !important; } /* ---------- F · SEZNAM A VELKÝ NÁHLED ---------- */ .cm-f .cm-cols { display: grid; grid-template-columns: 5fr 7fr; gap: 64px; align-items: start; } .cm-f .cm-list .cm-item { padding: 15px 0; border-bottom: 1px solid rgba(174, 81, 60, 0.18); transition: border-color 0.5s ease; } .cm-f .cm-list .cm-item:hover, .cm-f .cm-list .cm-item.is-auto { border-bottom-color: rgba(240, 190, 160, 0.5); } html body .cm-f .cm-name { font-size: clamp(20px, 1.7vw, 30px) !important; opacity: 0.55; } html body .cm-f .cm-item:hover .cm-name, html body .cm-f .cm-item.is-auto .cm-name { opacity: 1; color: rgb(240, 190, 160) !important; } /* náhled přichycený vedle seznamu (poměr stran 16:9) */ .cm-f .cm-pv { position: sticky; top: clamp(90px, 8vw, 170px); aspect-ratio: 16 / 9; } .cm-f .cm-pvi { position: absolute; inset: 0; opacity: 0; pointer-events: none; transition: opacity 0.45s ease; } .cm-f media-item { position: absolute !important; inset: 0; height: 100% !important; pointer-events: none; } .cm-f media-item::part(media) { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 4px; } .cm-f .cm-info { position: absolute; left: 0; right: 0; top: calc(100% + 24px); } html body .cm-f .cm-pt { display: block; margin-bottom: 8px; font-family: "Kalnia", serif !important; font-weight: 250 !important; font-variation-settings: "wght" 250, "wdth" 100 !important; font-size: clamp(26px, 2.6vw, 46px) !important; line-height: 1.1; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(240, 190, 160); } /* v klidu je vidět první spot; při najetí na jméno ten, na který se ukazuje */ .cm-f:not(:has(.cm-list .cm-item:hover, .cm-list .cm-item.is-auto)) .cm-pv .cm-pvi:nth-child(1), .cm-f:has(.cm-list .cm-item:nth-child(1):hover) .cm-pv .cm-pvi:nth-child(1), .cm-f:has(.cm-list .cm-item.is-auto:nth-child(1)) .cm-pv .cm-pvi:nth-child(1), .cm-f:has(.cm-list .cm-item:nth-child(2):hover) .cm-pv .cm-pvi:nth-child(2), .cm-f:has(.cm-list .cm-item.is-auto:nth-child(2)) .cm-pv .cm-pvi:nth-child(2), .cm-f:has(.cm-list .cm-item:nth-child(3):hover) .cm-pv .cm-pvi:nth-child(3), .cm-f:has(.cm-list .cm-item.is-auto:nth-child(3)) .cm-pv .cm-pvi:nth-child(3), .cm-f:has(.cm-list .cm-item:nth-child(4):hover) .cm-pv .cm-pvi:nth-child(4), .cm-f:has(.cm-list .cm-item.is-auto:nth-child(4)) .cm-pv .cm-pvi:nth-child(4), .cm-f:has(.cm-list .cm-item:nth-child(5):hover) .cm-pv .cm-pvi:nth-child(5), .cm-f:has(.cm-list .cm-item.is-auto:nth-child(5)) .cm-pv .cm-pvi:nth-child(5), .cm-f:has(.cm-list .cm-item:nth-child(6):hover) .cm-pv .cm-pvi:nth-child(6), .cm-f:has(.cm-list .cm-item.is-auto:nth-child(6)) .cm-pv .cm-pvi:nth-child(6), .cm-f:has(.cm-list .cm-item:nth-child(7):hover) .cm-pv .cm-pvi:nth-child(7), .cm-f:has(.cm-list .cm-item.is-auto:nth-child(7)) .cm-pv .cm-pvi:nth-child(7), .cm-f:has(.cm-list .cm-item:nth-child(8):hover) .cm-pv .cm-pvi:nth-child(8), .cm-f:has(.cm-list .cm-item.is-auto:nth-child(8)) .cm-pv .cm-pvi:nth-child(8), .cm-f:has(.cm-list .cm-item:nth-child(9):hover) .cm-pv .cm-pvi:nth-child(9), .cm-f:has(.cm-list .cm-item.is-auto:nth-child(9)) .cm-pv .cm-pvi:nth-child(9), .cm-f:has(.cm-list .cm-item:nth-child(10):hover) .cm-pv .cm-pvi:nth-child(10), .cm-f:has(.cm-list .cm-item.is-auto:nth-child(10)) .cm-pv .cm-pvi:nth-child(10), .cm-f:has(.cm-list .cm-item:nth-child(11):hover) .cm-pv .cm-pvi:nth-child(11), .cm-f:has(.cm-list .cm-item.is-auto:nth-child(11)) .cm-pv .cm-pvi:nth-child(11), .cm-f:has(.cm-list .cm-item:nth-child(12):hover) .cm-pv .cm-pvi:nth-child(12), .cm-f:has(.cm-list .cm-item.is-auto:nth-child(12)) .cm-pv .cm-pvi:nth-child(12), .cm-f:has(.cm-list .cm-item:nth-child(13):hover) .cm-pv .cm-pvi:nth-child(13), .cm-f:has(.cm-list .cm-item.is-auto:nth-child(13)) .cm-pv .cm-pvi:nth-child(13), .cm-f:has(.cm-list .cm-item:nth-child(14):hover) .cm-pv .cm-pvi:nth-child(14), .cm-f:has(.cm-list .cm-item.is-auto:nth-child(14)) .cm-pv .cm-pvi:nth-child(14) { opacity: 1; } /* automatické listování (skript „COMMERCIALS F – automatické listování“): tečka a záře se nad položkou chovají jako nad odkazem */ html body:has(.cm-f .cm-item.is-auto)::after { width: 28px; height: 28px; margin: -14px 0 0 -14px; background: rgba(255, 255, 255, 0.9); } html body:has(.cm-f .cm-item.is-auto) .hv-halo.hv-halo { width: 28px; height: 28px; margin: -14px 0 0 -14px; background: rgba(255, 255, 255, 0.55); box-shadow: 0 0 16px 4px rgba(255, 244, 236, 0.9), 0 0 48px 20px rgba(255, 244, 236, 0.5); } } /* ---------- TELEFON: fotky pod sebou, název pod fotkou, vše na střed ---------- */ @media (hover: none) and (pointer: coarse) { html body .cm-v2 { padding: 96px 22px 140px !important; text-align: center !important; } html body .cm-v2 .cm-item { position: static !important; height: auto !important; margin: 0 0 56px !important; overflow: visible !important; border-radius: 0 !important; } .cm-v2 .cm-item::before { display: none !important; } .cm-v2 .cm-grid { display: block !important; } .cm-v2 media-item { position: static !important; height: auto !important; } .cm-v2 media-item::part(media) { width: 100% !important; height: auto !important; object-fit: initial !important; border-radius: 4px; } .cm-v2 .cm-text { position: static !important; transform: none !important; opacity: 1 !important; background: none !important; max-width: none !important; padding: 0 6px !important; margin-top: 16px; display: block !important; } html body .cm-v2 .cm-name { font-size: 24px !important; opacity: 1 !important; text-align: center; } html body .cm-v2 .cm-meta { margin-top: 8px; font-size: 13px !important; } html body .cm-v2 .cm-note { font-size: 13px !important; } /* varianta F: na telefonu jen seznam jmen (klepnutí otevře spot) */ .cm-f .cm-cols { display: block !important; } .cm-f .cm-pv { display: none !important; } html body .cm-f .cm-list .cm-item { margin: 0 !important; padding: 16px 0 !important; border-bottom: 1px solid rgba(174, 81, 60, 0.18); } html body .cm-f .cm-name { font-size: 21px !important; } } /* ===================================================================== COMMERCIALS – ŠÍŘKA OBSAHU STEJNÁ JAKO FILMS (přidej úplně na konec CSS) – seznam + náhled mají stejné krajní body jako fotky ve FILMS: šířka se řídí výškou okna (poměr ≈ 1,53), takže vpravo zůstane místo pro přehrávač a vlevo pro svislý nadpis; nikdy užší okraj než 76 px – jen počítač (mobil se nemění) ===================================================================== */ @media (hover: hover) and (pointer: fine) { html body .cm-v2 { padding-left: max(76px, calc((100vw - 153.2vh) / 2)) !important; padding-right: max(76px, calc((100vw - 153.2vh) / 2)) !important; } } /* ===================================================================== PODSTRÁNKA ROYAL MAIL – čtyři spoty vedle sebe (přidej úplně na konec CSS) – využívá stávající styl podstránek projektů (rp-…), přidává jen řadu čtyř spotů a čtyři sloupce nástrojů; jen počítač, mobil zatím jako ostatní podstránky ===================================================================== */ .rp-page .rp-pal4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); column-gap: 36px; } .rp-page .rp-pal4 .rp-h { font-size: 26px !important; } .rp-page .rp-films4 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); /* čtyři spoty ve dvou řadách – každý dostane velký prostor */ column-gap: 64px; row-gap: 80px; } .rp-page .rp-film { display: flex; flex-direction: column; border-top: 1px solid var(--rp-linka); padding-top: 26px; } .rp-page .rp-film media-item { display: block !important; width: 100% !important; margin: 0 0 26px !important; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 4px; } .rp-page .rp-film media-item::part(media) { width: 100% !important; height: 100% !important; object-fit: cover !important; border-radius: 4px; filter: saturate(0.85) brightness(0.85); transition: filter 0.6s ease; } .rp-page .rp-film media-item:hover::part(media) { filter: none; } .rp-page .rp-film .rp-h { font-size: clamp(26px, 2.1vw, 40px) !important; margin: 0 0 14px; } html body .rp-page.rp-rm .rp-title { max-width: 9.5em; /* ROYAL MAIL / CHRISTMAS na dva řádky */ text-wrap: balance; } @media (hover: none) and (pointer: coarse) { .rp-page .rp-pal4, .rp-page .rp-films4 { grid-template-columns: 1fr; row-gap: 56px; text-align: center; } } /* ===================================================================== NADPISY SE NIKDY NEZALOMÍ UPROSTŘED SLOVA (přidej úplně na konec CSS; platí pro všechny podstránky, FILMS, COMMERCIALS i homepage) – nadpisy se lámou jen mezi slovy; když je slovo delší než sloupec, raději přesáhne sloupec, než aby se rozpadlo (EVERYTHI / NG) ===================================================================== */ html body :is(.rp-page, .films-v2, .home-v2, .cm-v2) :is(h1, h2, h3, h4, .rp-title, .rp-lead, .rp-h, .rp-sub, .rp-next-title, .rp-cat, .fv-title, .fv-cat, .cm-pt, .cm-name, .hv-vlabel) { overflow-wrap: normal !important; word-break: normal !important; hyphens: none !important; -webkit-hyphens: none !important; } @media (hover: hover) and (pointer: fine) { html body .rp-page .rp-hero-text { max-width: min(900px, calc(100% - 88px)); /* titulek ve fotce má místo i na dlouhá slova (CHRISTMAS, EVERYTHING) */ } } /* ===================================================================== PODSTRÁNKA POST BELLUM – ocenění pod hlavní fotkou + název na dva řádky (přidej úplně na konec CSS; ostatní podstránky se nemění) ===================================================================== */ html body .rp-page.rp-pb .rp-title { max-width: 9.5em; /* POST BELLUM / WW2 na dva řádky */ } .rp-page .rp-award { display: flex; align-items: center; gap: 32px; padding-top: calc(var(--rp-pauza) * 0.7); } html body .rp-page .rp-award media-item { flex: none; display: block !important; width: clamp(120px, 10vw, 190px) !important; min-width: 0 !important; margin: 0 !important; } .rp-page .rp-award .rp-lab, .rp-page .rp-award .rp-note { display: block; } .rp-page .rp-award .rp-note { margin: 8px 0 0; } @media (hover: none) and (pointer: coarse) { .rp-page .rp-award { flex-direction: column; gap: 18px; text-align: center; } html body .rp-page .rp-award media-item { margin: 0 auto !important; width: 130px !important; } } /* ===================================================================== NÁZEV NA DVA ŘÁDKY U DLOUHÝCH NÁZVŮ (SLOVAK RADIO / 100 YEARS) (přidej úplně na konec CSS; stačí dát obsahu stránky třídu rp-wide, hodí se i pro další podstránky s dlouhým názvem) ===================================================================== */ html body .rp-page.rp-wide .rp-title { max-width: 9.5em; } /* ===================================================================== PALETA NÁSTROJŮ – PĚT SLOUPCŮ (ČESKÁ SPOŘITELNA) (přidej úplně na konec CSS) ===================================================================== */ .rp-page .rp-pal5 { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); column-gap: 28px; } .rp-page .rp-pal5 .rp-h { font-size: clamp(20px, 1.7vw, 26px) !important; } @media (hover: none) and (pointer: coarse) { .rp-page .rp-pal5 { grid-template-columns: 1fr; row-gap: 56px; text-align: center; } .rp-page .rp-pal5 .rp-h { font-size: 26px !important; } } /* ===================================================================== ABOUT JAN – VARIANTA B: JEMNÁ, ČTENÁŘSKÁ (přidej úplně na konec CSS; nepoužívej spolu s blokem blok_bio.css – je to jeho náhrada) – celý text beze změny a v původním pořadí, bez štítků, čísel a seznamů – velké, dobře čitelné písmo, široké řádkování, citáty jako ticho mezi odstavci – obsah vpravo od obličeje, fotka v pozadí jako dřív ===================================================================== */ .page:has(.rp-about) .backdrop { display: block !important; } .page:has(.rp-about) .backdrop::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(90deg, rgba(0, 0, 0, 0) 0%, rgba(0, 0, 0, 0) 30%, rgba(0, 0, 0, 0.45) 46%, rgba(0, 0, 0, 0.58) 100%); } /* ---------- nadpis ---------- */ html body .rp-page.rp-about .ab2-title { margin: 0 -0.055em 0 -0.011em !important; /* optická korekce: viditelný okraj písmen A a T/N přesně na osách sloupce */ padding: clamp(10px, 2vw, 40px) 0 0 !important; font-family: "Sleska J", "Kalnia", serif !important; /* vlastní J ve slově JAN */ font-weight: 250 !important; font-variation-settings: "wght" 250, "wdth" 100 !important; font-size: clamp(70px, 10.4vw, 210px) !important; line-height: 0.98 !important; text-transform: uppercase !important; color: var(--ink) !important; overflow-wrap: normal; word-break: normal; } html body .rp-page.rp-about .ab2-title span { display: flex !important; font-family: "Sleska J", "Kalnia", serif !important; } html body .rp-page.rp-about .ab2-title i { font-style: normal; } html body .rp-page.rp-about .ab2-l1 { justify-content: space-between; } html body .rp-page.rp-about .ab2-l2 { justify-content: flex-end; gap: 0.28em; } /* ---------- text ---------- */ /* nadpis i text sdílejí jeden sloupec: levý i pravý okraj mají společný */ html body .rp-page.rp-about .ab2-col { width: min(100%, 960px); margin-left: auto; } html body .rp-page.rp-about .ab2-text { margin-top: clamp(110px, 12vw, 210px); font-size: clamp(20px, 1.6vw, 26px); /* všechny rozměry textu se odvozují odsud */ } html body .rp-page.rp-about .ab2-text p { margin: 0 0 1.7em; font-family: "Geist", sans-serif !important; font-weight: 300 !important; font-size: 1em !important; line-height: 1.72 !important; letter-spacing: 0.005em; color: rgba(240, 190, 160, 0.88) !important; text-wrap: pretty; } html body .rp-page.rp-about .ab2-text .ab2-first { font-size: 1.3em !important; line-height: 1.55 !important; color: var(--rp-med) !important; } /* věta o cíli: samostatná, v písmu nadpisů, s velkým vzduchem kolem */ html body .rp-page.rp-about .ab2-text .ab2-aim { margin: 2.6em 0 2.8em; font-family: "Kalnia", serif !important; font-weight: 250 !important; font-variation-settings: "wght" 250, "wdth" 100 !important; text-transform: uppercase !important; font-size: 1.9em !important; line-height: 1.25 !important; letter-spacing: 0.05em !important; color: var(--ink) !important; text-wrap: balance; } /* citáty: ticho mezi odstavci, vysazené doleva přes okraj sloupce */ html body .rp-page.rp-about .ab2-text .ab2-quote { margin: 3.2em 0 3.4em 0; max-width: 14em; font-family: "Kalnia", serif !important; font-weight: 250 !important; font-variation-settings: "wght" 250, "wdth" 100 !important; text-transform: uppercase !important; font-size: 1.75em !important; line-height: 1.28 !important; letter-spacing: 0.05em !important; color: var(--rp-med) !important; text-wrap: balance; } html body .rp-page.rp-about .ab2-text .ab2-last { margin-top: 3.2em; margin-bottom: 0; } /* jemné objevení odstavců při posouvání (tam, kde to prohlížeč umí; jinak se nic nedělá) */ @supports (animation-timeline: view()) { html body .rp-page.rp-about .ab2-text p { animation: ab2-in linear both; animation-timeline: view(); animation-range: entry 0% entry 45%; } @keyframes ab2-in { from { opacity: 0.12; transform: translateY(18px); } to { opacity: 1; transform: none; } } } /* ---------- počítač: obsah vpravo od obličeje ---------- */ @media (hover: hover) and (pointer: fine) { html body .rp-page.rp-about { box-sizing: border-box; width: 100%; padding-left: max(39vw, 440px); /* vpravo vždy volno pro přichycený přehrávač (stojí 2,65 vw od kraje a je ~90 px široký); ve velkých oknech navíc stejný okraj jako FILMS a COMMERCIALS */ padding-right: max(76px, calc((100vw - 153.2vh) / 2), calc(2.65vw + 120px)) !important; } } /* ---------- mobil: vše na střed ---------- */ @media (hover: none) and (pointer: coarse) { html body .rp-page.rp-about .ab2-title { font-size: clamp(56px, 17vw, 90px) !important; padding-top: 0 !important; } html body .rp-page.rp-about .ab2-l2 { justify-content: center; } html body .rp-page.rp-about .ab2-text { margin: 70px auto 0; text-align: center; } html body .rp-page.rp-about .ab2-text { font-size: 16px; /* menší běžný text (dřív 19 px); nadpisové věty níž si drží původní velikost */ } html body .rp-page.rp-about .ab2-text .ab2-first { font-size: 1.14em !important; /* úvodní odstavec ≈ 18 px (dřív ≈ 21 px) */ } html body .rp-page.rp-about .ab2-text .ab2-aim, html body .rp-page.rp-about .ab2-text .ab2-quote { margin-left: auto; margin-right: auto; font-size: 1.72em !important; /* ≈ 27,5 px – stejně jako dřív */ } /* pojistka: pevné velikosti přímo na odstavcích (nezávislé na děděné velikosti a s vyšší silou) */ html body .rp-page.rp-about .ab2-col .ab2-text p { font-size: 16px !important; } html body .rp-page.rp-about .ab2-col .ab2-text p.ab2-first { font-size: 18px !important; } html body .rp-page.rp-about .ab2-col .ab2-text p.ab2-aim, html body .rp-page.rp-about .ab2-col .ab2-text p.ab2-quote { font-size: 27.5px !important; } } /* ===================================================================== COMMERCIALS – náhled vždy přesně 16:9, popisky vždy POD fotkou (přidej úplně na konec CSS; jen počítač, mobil se nemění) – i když je zdrojová fotka vyšší než 16:9, ořízne se (cover) a nepřeteče – nadpis i popisky se řadí pod sebe pod fotkou, nic se nepřekrývá ===================================================================== */ @media (hover: hover) and (pointer: fine) { .cm-f .cm-pvi { top: 0; left: 0; right: 0; bottom: auto; width: 100%; } .cm-f .cm-pvi > media-item { position: relative !important; display: block !important; width: 100% !important; height: auto !important; aspect-ratio: 16 / 9 !important; overflow: hidden !important; border-radius: 4px; } .cm-f .cm-pvi > media-item::part(media) { position: absolute !important; inset: 0 !important; width: 100% !important; height: 100% !important; max-width: none !important; object-fit: cover !important; } .cm-f .cm-pvi .cm-info { position: static !important; margin-top: 24px; } .cm-f .cm-pvi .cm-info > span { display: block; } } /* ===================================================================== BACK TO … + svislý nadpis na jedné ose (přidej úplně na konec CSS) – kolečko se šipkou a svislý nadpis (BESPOKE MUSIC FOR COMMERCIALS, FILMS…) mají společný střed 39 px od levého okraje – jen počítač (na telefonu se nadpis nezobrazuje a šipka má vlastní místo) ===================================================================== */ @media (hover: hover) and (pointer: fine) { html body .hv-back { left: 22px !important; /* střed kolečka (34 px) = 39 px, jako střed nadpisu */ } } /* BOOK TRAILER (15. náhled) je svislý formát – celý se vejde, neořezává se (po stranách zůstane černá) */ @media (hover: hover) and (pointer: fine) { .cm-f .cm-pvi:nth-child(15) > media-item::part(media) { object-fit: contain !important; object-position: left center !important; background-size: contain !important; background-position: left center !important; background-repeat: no-repeat !important; border-radius: 0; } } /* ===================================================================== SAMOHYBNÉ SVĚTLO NA FILMS (počítač) – přidej úplně na konec CSS – když se světlo hýbe samo (skript přidá třídu hv-auto), fotka filmu se rozsvítí stejně, jako když na ni najedeš myší ===================================================================== */ @media (hover: hover) and (pointer: fine) { .films-v2 .fv-film.hv-auto { --fv-r: var(--fv-kruh); } body:has(.films-v2 .fv-film.hv-auto) .spotlight-overlay { opacity: 0 !important; } } /* ===================================================================== JEDNOTNÁ VELIKOST PÍSMA V PALETÁCH (zvukové palety všech projektů) (přidej úplně na konec CSS) – nadpisy položek palety (Clarinets, Synth bass, 808 beats…) mají všude stejnou velikost, bez ohledu na to, kolik je sloupců (3, 4 nebo 5) – počítač 26 px · telefon 22 px (změna jen těchto dvou čísel) ===================================================================== */ @media (hover: hover) and (pointer: fine) { html body .rp-page :is(.rp-pal, .rp-col) .rp-h { font-size: 26px !important; line-height: 1.2 !important; } } @media (hover: none) and (pointer: coarse) { html body .rp-page :is(.rp-pal, .rp-col) .rp-h { font-size: 22px !important; line-height: 1.2 !important; } } /* ===================================================================== HERO · NAD CLAIMEM SVĚTLO KURZORU ZHASNE (přidej úplně na konec CSS) – nad slovy „my music can … what's hidden within your film“ zhasne i rozjasnění fotky pod kurzorem (dosud zhasínala jen tma a přísvit, rozjasnění zůstávalo) – nad „light up“ světlo zůstává, jako dosud – platí pro myš i pro samohybné světlo (třída is-auto-hover ji dává skript) ===================================================================== */ @media (hover: hover) and (pointer: fine) { body:is(:has(.home-v2 .hv-claim:hover), :has(.home-v2 .hv-claim.is-auto-hover)):not(:is(:has(.home-v2 .hv-glow:hover), :has(.home-v2 .hv-glow.is-auto-hover))) .hv-boost-d.is-on { opacity: 0 !important; } /* samohybné světlo v hero: šedobílý přísvit se rozsvítí jako při najetí myší na hero */ html body:has(.home-v2 .hv-hero.is-auto-hover) .spotlight-overlay { opacity: 0.75 !important; } /* totéž pro tmu a přísvit při samohybném světle (myš to má už dříve přes :hover) */ body:has(.home-v2 .hv-claim.is-auto-hover):not(:has(.home-v2 .hv-glow.is-auto-hover)), body:has(.home-v2 .hv-claim.is-auto-hover):not(:has(.home-v2 .hv-glow.is-auto-hover)) .backdrop { --dim-radius: 1px !important; } body:has(.home-v2 .hv-claim.is-auto-hover):not(:has(.home-v2 .hv-glow.is-auto-hover)) .spotlight-overlay { opacity: 0 !important; } } /* ===================================================================== LOGO ADC CZECH CREATIVE AWARDS VĚTŠÍ – JEDNA VELIKOST VŠUDE (přidej úplně na konec CSS) – platí pro každý blok ocenění, kde je logo ADC (Post Bellum a všechny další stránky s oceněním ADC), takže má všude stejnou velikost – velikost loga: proměnná --adc-logo u počítače a u telefonu (změň jen tato dvě čísla) – logo sedí na levém okraji obsahu (bez posunu doleva, který platí jen pro sošku Czech Lion) ===================================================================== */ @media (hover: hover) and (pointer: fine) { html body .rp-page .rp-award:has(media-item[hash="T3157921673861793573344161346238"]) { --adc-logo: clamp(230px, 18vw, 360px); /* bylo clamp(120px, 10vw, 190px) */ gap: 44px; } html body .rp-page .rp-award:has(media-item[hash="T3157921673861793573344161346238"]) media-item { width: var(--adc-logo) !important; max-width: none !important; margin: 0 !important; } html body .rp-page .rp-award:has(media-item[hash="T3157921673861793573344161346238"]) media-item::part(media) { width: 100% !important; height: auto !important; } } @media (hover: none) and (pointer: coarse) { html body .rp-page .rp-award:has(media-item[hash="T3157921673861793573344161346238"]) { --adc-logo: 200px; /* bylo 130 px */ } html body .rp-page .rp-award:has(media-item[hash="T3157921673861793573344161346238"]) media-item { width: var(--adc-logo) !important; max-width: 80% !important; margin: 0 auto !important; } } /* ===================================================================== SAMOHYBNÝ KURZOR · FOTKY A VIDEA NA PODSTRÁNKÁCH (Post Bellum, Restore Point, Aneta…) (přidej úplně na konec CSS; patří k němu aktualizovaný skript samohybného kurzoru v globálním HTML) – samohybné světlo teď fotku zatmaví a rozsvítí pod sebou stejně jako tvoje myš – skript dává fotce třídu is-auto-hover, tady jsou stejná pravidla jako pro :hover ===================================================================== */ @media (hover: hover) and (pointer: fine) { :is(media-item.linked, media-item[href]):not( .films-v2 .fv-film media-item, .home-v2 .hv-still media-item, .film-still-wrap media-item, .page[page-url="commercial-subpage"] gallery-columnized media-item ).is-auto-hover { --mi-r: var(--mi-kruh); } :is(media-item.linked, media-item[href]):not( .films-v2 .fv-film media-item, .home-v2 .hv-still media-item, .film-still-wrap media-item, .page[page-url="commercial-subpage"] gallery-columnized media-item ).is-auto-hover::before, :is(media-item.linked, media-item[href]):not( .films-v2 .fv-film media-item, .home-v2 .hv-still media-item, .film-still-wrap media-item, .page[page-url="commercial-subpage"] gallery-columnized media-item ).is-auto-hover::after { opacity: 1; } html:not(#hv-a):not(#hv-b) body:has(:is(media-item.linked, media-item[href]):not( .films-v2 .fv-film media-item, .home-v2 .hv-still media-item, .film-still-wrap media-item, .page[page-url="commercial-subpage"] gallery-columnized media-item ).is-auto-hover) .spotlight-overlay { opacity: 0 !important; } .rp-page .rp-hero.is-auto-hover .rp-play i { transform: scale(1.06); box-shadow: 0 0 60px rgba(255, 214, 186, 0.32); } html body .rp-page .rp-hero.is-auto-hover .rp-play span { color: rgb(255, 228, 210) !important; text-shadow: 0 0 28px rgba(255, 214, 186, 0.35); } .rp-page .rp-video.is-auto-hover .rp-still media-item::part(media), .rp-page .rp-gallery media-item.is-auto-hover::part(media), .rp-page .rp-film media-item.is-auto-hover::part(media) { filter: none; } } /* ===================================================================== „NEXT PROJECT" DOLE NA STRÁNCE PROJEKTU – FOTKA POZADÍ TMAVŠÍ (přidej úplně na konec CSS; platí pro všechny filmy i reklamy s odkazem na další projekt) – v klidu je fotka výrazně tmavší (0.28, bylo 0.55), aby název byl čitelný – jakmile kurzor najede na fotku (myš i samohybný kurzor), rozsvítí se pod ním kruh jako všude jinde a fotka se zesvětlí ===================================================================== */ .rp-page .rp-next media-item::part(media) { filter: brightness(0.28); } .rp-page .rp-next:hover media-item::part(media), .rp-page .rp-next.is-auto-hover media-item::part(media) { filter: brightness(0.8); } .rp-page .rp-next.is-auto-hover .rp-next-title { color: var(--rp-med) !important; } /* ===================================================================== COMMERCIALS · TELEFON: JEDNODUCHÁ GALERIE – jedna reklama přes celý displej, pod ní popisek (přidej úplně na konec CSS; jen telefon, počítač se nemění) – místo seznamu jmen se pod sebou zobrazí všechny reklamy, každá na celou šířku displeje ve svém přirozeném poměru stran (nic se neořezává ani nedoplňuje černými pruhy) – mezera mezi reklamami je všude stejná – klepnutí na fotku nebo popisek otevře stejný odkaz jako dosud (zajišťuje skript v globálním HTML) – nadpis BESPOKE MUSIC FOR COMMERCIALS je větší ===================================================================== */ @media (hover: none) and (pointer: coarse) { html body .cm-f { padding: 96px 0 140px !important; } html body .cm-v2 .sub-vlabel { font-size: 22px !important; letter-spacing: 0.2em !important; line-height: 1.25 !important; margin-bottom: 52px !important; padding: 0 22px 0 calc(22px + 0.2em) !important; box-sizing: border-box !important; } html body .cm-f .cm-list { display: none !important; } html body .cm-f .cm-cols { display: block !important; } html body .cm-f .cm-pv { display: block !important; position: static !important; aspect-ratio: auto !important; height: auto !important; } html body .cm-f .cm-pvi { position: relative !important; inset: auto !important; opacity: 1 !important; pointer-events: auto !important; margin: 0 0 14px !important; padding: 0 !important; text-align: center; cursor: pointer; } html body .cm-f .cm-pvi > media-item { position: static !important; display: block !important; width: 100% !important; height: auto !important; aspect-ratio: auto !important; overflow: visible !important; margin: 0 !important; border-radius: 0 !important; pointer-events: none; } html body .cm-f .cm-pvi > media-item::part(media) { position: static !important; display: block !important; width: 100% !important; height: auto !important; max-width: 100% !important; object-fit: initial !important; object-position: initial !important; border-radius: 0 !important; } html body .cm-f .cm-pvi .cm-info > span { display: block; } } /* ===================================================================== COMMERCIALS · TELEFON, VARIANTA C: POPISEK PŘES FOTKU, FOTKA SE ZATMAVÍ JEN UPROSTŘED DISPLEJE (přidej úplně na konec CSS, ZA blok „COMMERCIALS · TELEFON: JEDNODUCHÁ GALERIE“; patří k němu skript „COMMERCIALS mobil – galerie“ v globálním HTML) – reklama uprostřed displeje se zatmaví a přes ni se zobrazí popisek (název, rok · režie · agentura, Bespoke music) – ostatní reklamy jsou čistá fotka bez textu; při posouvání se prolínají – popisek je vždy přesně na středu fotky (vodorovně i svisle) – jen telefon, počítač se nemění ===================================================================== */ @media (hover: none) and (pointer: coarse) { /* zatmavení fotky (jen uprostřed displeje) */ html body .cm-f .cm-pvi::after { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(5, 5, 5, 0.68); opacity: 0; transition: opacity 0.6s ease; pointer-events: none; z-index: 2; } html body .cm-f .cm-pvi.is-center::after { opacity: 1; } /* popisek přes fotku, na střed */ html body .cm-f .cm-pvi .cm-info { position: absolute !important; top: 0; right: 0; bottom: 0; left: 0; width: auto !important; margin: 0 !important; padding: 0 22px !important; box-sizing: border-box; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; z-index: 3; opacity: 0; transition: opacity 0.6s ease; pointer-events: none; } html body .cm-f .cm-pvi.is-center .cm-info { opacity: 1; } html body .cm-f .cm-pvi .cm-info > span { display: block; width: 100%; text-align: center !important; text-indent: 0 !important; } html body .cm-f .cm-pt { font-family: "Kalnia", serif !important; font-weight: 250 !important; font-variation-settings: "wght" 250, "wdth" 100 !important; font-size: 22px !important; line-height: 1.15; letter-spacing: 0.06em; text-transform: uppercase; color: rgb(240, 190, 160); margin: 0 0 8px; padding-left: 0.06em; /* vyrovná mezeru za posledním písmenem, ať je název opticky na středu */ } html body .cm-f .cm-meta, html body .cm-f .cm-note { color: rgba(240, 190, 160, 0.85); font-size: 12.5px !important; line-height: 1.45; margin: 0; } html body .cm-f .cm-note { margin-top: 4px; } } /* ===================================================================== COMMERCIALS · TELEFON: POLETUJÍCÍ SVĚTELNÁ KULIČKA ROZSVÍTÍ ZATMAVENOU FOTKU (přidej úplně na konec CSS, ZA blok varianty C; patří k němu aktualizovaný skript ve globálním HTML) – když kulička přeletí přes zatmavenou reklamu uprostřed displeje, v tmě pod ní se otevře světlý kruh (stejně jako na FILMS a na homepage); popisek zůstává nad světlem – pod textem popisku zůstává tmavý podklad, takže kulička čitelnost nezhoršuje – velikost světla: 48vw (menší číslo = menší světlý kruh) – jen telefon, počítač se nemění ===================================================================== */ @media (hover: none) and (pointer: coarse) { html body .cm-f .cm-pvi.is-center.hv-lit-photo::after { -webkit-mask-image: radial-gradient(circle 48vw at var(--fx, 50%) var(--fy, 50%), transparent 0%, transparent 22%, black 88%); mask-image: radial-gradient(circle 48vw at var(--fx, 50%) var(--fy, 50%), transparent 0%, transparent 22%, black 88%); } /* jemné teplé světlo pod kuličkou */ html body .cm-f .cm-pvi::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; pointer-events: none; opacity: 0; transition: opacity 0.6s ease; background: radial-gradient(circle 48vw at var(--fx, 50%) var(--fy, 50%), rgba(255, 236, 220, 0.14) 0%, rgba(255, 236, 220, 0.05) 40%, transparent 75%); } html body .cm-f .cm-pvi.is-center.hv-lit-photo::before { opacity: 1; } /* čitelnost: pod textem zůstává tmavý „polštář“, takže i když kulička přeletí přes popisek, písmo je dobře čitelné */ html body .cm-f .cm-pvi.is-center .cm-info { background: radial-gradient(ellipse 92% 62% at 50% 50%, rgba(5, 5, 5, 0.72) 0%, rgba(5, 5, 5, 0.6) 55%, rgba(5, 5, 5, 0) 100%); } html body .cm-f .cm-pvi .cm-info > span { text-shadow: 0 0 10px rgba(0, 0, 0, 0.9), 0 0 22px rgba(0, 0, 0, 0.7); } /* fotka pod kuličkou se nezesvětluje celá (světlo dělá kruh) */ html body .cm-f .cm-pvi.hv-lit > media-item::part(media) { filter: none !important; } } /* ===================================================================== MOBILNÍ MENU · VLASTNÍ J + EFEKT OTEVÍRÁNÍ A ZAVÍRÁNÍ (přidej úplně na konec CSS; jen telefon, počítač se nemění) – písmeno J v menu (JAN) je Janovo vlastní J (písmo „Sleska J“), ostatní písmena zůstávají z Kalnie – otevření: tmavá plocha se rozlije kruhem z ikony menu přes celou obrazovku, jemně se rozsvítí teplé světlo a odkazy se postupně vynoří zdola (vždy o chvilku později) – zavření: odkazy zmizí a kruh se zase sbalí zpět k ikoně – kdo má v telefonu zapnuté „omezit pohyb“, dostane jen jemné prolnutí – rychlost: čísla 1.6s (otevření) a 1s (zavření); odkazy naskakují po 0.15s ===================================================================== */ @media (hover: none) and (pointer: coarse) { html body .mobile-nav a, html body .mobile-nav a * { font-family: "Sleska J", "Kalnia", serif !important; } html body .mobile-nav { --menu-x: 50%; --menu-y: calc(12rem + 11px); /* střed ikony menu */ opacity: 1 !important; visibility: hidden; -webkit-clip-path: circle(0px at var(--menu-x) var(--menu-y)); clip-path: circle(0px at var(--menu-x) var(--menu-y)); transition: clip-path 1s cubic-bezier(0.65, 0, 0.35, 1), -webkit-clip-path 1s cubic-bezier(0.65, 0, 0.35, 1), visibility 0s linear 1s !important; } html body.menu-open .mobile-nav { visibility: visible; -webkit-clip-path: circle(150vmax at var(--menu-x) var(--menu-y)); clip-path: circle(150vmax at var(--menu-x) var(--menu-y)); transition: clip-path 1.6s cubic-bezier(0.22, 0.8, 0.2, 1), -webkit-clip-path 1.6s cubic-bezier(0.22, 0.8, 0.2, 1), visibility 0s !important; } /* teplé světlo, které se rozsvítí z ikony menu */ html body .mobile-nav::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; background: radial-gradient(circle at var(--menu-x) var(--menu-y), rgba(174, 81, 60, 0.22) 0%, rgba(174, 81, 60, 0.07) 38%, transparent 70%); opacity: 0; transition: opacity 0.4s ease; } html body.menu-open .mobile-nav::before { opacity: 1; transition: opacity 1.8s ease 0.3s; } /* odkazy se vynoří zdola jeden po druhém */ html body .mobile-nav a { opacity: 0; transform: translateY(22px); -webkit-filter: blur(6px); filter: blur(6px); transition: opacity 0.4s ease, transform 0.4s ease, filter 0.4s ease !important; } html body.menu-open .mobile-nav a { opacity: 1; transform: none; -webkit-filter: none; filter: none; transition: opacity 1.1s ease, transform 1.3s cubic-bezier(0.2, 0.8, 0.2, 1), filter 1.1s ease !important; } html body.menu-open .mobile-nav a:nth-child(1) { transition-delay: 0.5s !important; } html body.menu-open .mobile-nav a:nth-child(2) { transition-delay: 0.65s !important; } html body.menu-open .mobile-nav a:nth-child(3) { transition-delay: 0.8s !important; } html body.menu-open .mobile-nav a:nth-child(4) { transition-delay: 0.95s !important; } html body.menu-open .mobile-nav a:nth-child(5) { transition-delay: 1.1s !important; } html body.menu-open .mobile-nav a:nth-child(6) { transition-delay: 1.25s !important; } html body.menu-open .mobile-nav a:nth-child(7) { transition-delay: 1.4s !important; } } @media (hover: none) and (pointer: coarse) and (prefers-reduced-motion: reduce) { html body .mobile-nav, html body.menu-open .mobile-nav { -webkit-clip-path: none; clip-path: none; transition: opacity 0.3s ease, visibility 0s linear 0.3s !important; } html body .mobile-nav { opacity: 0 !important; } html body.menu-open .mobile-nav { opacity: 1 !important; transition: opacity 0.3s ease !important; } html body .mobile-nav a, html body.menu-open .mobile-nav a { transform: none; filter: none; transition-delay: 0s !important; } } /* ===================================================================== TELEFON · fotka z hero nepronikne na horním okraji po odscrollování Přidej úplně na konec CSS. ===================================================================== */ @media (hover: none) and (pointer: coarse) { /* 1 · pod hero se fotka v pozadí úplně schová – nahoře při scrollu a při tahu lišt Safari zůstane jen plná tma (třídu past-hero nastavuje skript v globálním HTML) */ html body.past-hero .page:has(.home-v2) .backdrop { opacity: 0 !important; transition: opacity 0.35s ease !important; } html body:has(.home-v2) .page { background-color: rgb(10, 10, 10); } } /* ===================================================================== TELEFON · matné sklo (pilulka) kolem ikony menu a šipky zpět – místo černého pruhu Přidej úplně na konec CSS. Pilulka je vlastní vrstva (html::before), je vidět, kdykoli je vidět menu a stránka není úplně nahoře; při scrollu dolů mizí s menu. Ladění: --sklo-tma (0 = čiré sklo, 0.5 = tmavší), --sklo-blur (síla rozmazání) ===================================================================== */ @media (hover: none) and (pointer: coarse) { html { --sklo-tma: 0.28; --sklo-blur: 16px; } html body .hdr-blur { display: none !important; } /* starý černý pruh pryč */ html::before { content: ""; position: fixed; top: 12px; left: 50%; width: 78px; height: 94px; /* podstránky: ikona menu + šipka */ transform: translateX(-50%); border-radius: 40px; z-index: 2147480500; /* pod menu, šipkou i rozbaleným menu */ pointer-events: none; background: rgba(10, 10, 10, var(--sklo-tma)); border: 1px solid rgba(174, 81, 60, 0.28); -webkit-backdrop-filter: blur(var(--sklo-blur)); backdrop-filter: blur(var(--sklo-blur)); opacity: 0; transition: opacity 0.35s ease; } html:has(.home-v2)::before { top: 14px; height: 44px; /* homepage: jen ikona menu */ } html:has(body.scrolled:not(.hdr-hidden):not(.menu-open))::before { opacity: 1; } } /* ===================================================================== POČÍTAČ · MAPA „THE MUSICAL SHAPE OF A FILM“ 1) nadpis se láme za čárkou: „BEFORE I WRITE A NOTE," / „THE DIRECTOR GETS ONE PAGE." 2) mapa končí dřív, aby nelezla pod připnutý přehrávač u pravého okraje Přidej úplně na konec CSS. ===================================================================== */ @media (hover: hover) and (pointer: fine) { html body .home-v2 .hv-shape-lead { max-width: none !important; } html body .home-v2 .hv-shape-lead .hv-shape-l { display: block; } html body .home-v2 .hv-shape-map { margin-right: calc(var(--v-okraj, 64px) - var(--v-obsah, 184px) + 4.4vw) !important; /* větší číslo = mapa užší zprava */ } } /* POST BELLUM (sound design): dvě ocenění vedle sebe, čistě – logo vlevo, vedle něj název a text těsně pod sebou Přidej úplně na konec CSS. */ .rp-page .pbsd-awards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 64px; } .rp-page .pbsd-aw { display: flex; align-items: center; gap: 36px; border-top: 1px solid var(--rp-linka); padding-top: 28px; } html body .rp-page .pbsd-aw media-item { flex: none; display: block !important; width: 230px !important; /* velikost loga */ min-width: 0 !important; margin: 0 !important; } .rp-page .pbsd-aw .rp-lab, .rp-page .pbsd-aw .rp-note { display: block; margin: 0; } .rp-page .pbsd-aw .rp-note { margin-top: 10px; font-size: 1.2em; /* text pod názvem o 20 % větší */ } @media (hover: none) and (pointer: coarse) { .rp-page .pbsd-awards { grid-template-columns: 1fr; row-gap: 36px; } .rp-page .pbsd-aw { flex-direction: column; gap: 18px; text-align: center; } html body .rp-page .pbsd-aw media-item { margin: 0 auto !important; width: 190px !important; } } /* PODSTRÁNKY S PESTRÝM NÁHLEDEM (třída rp-dark na obalu stránky): fotka v hero je v klidu výrazně tmavší, aby byl nadpis čitelný; jakmile kurzor (myš i samohybný) najede na hero, fotka se rozsvítí jako všude jinde. Přidej úplně na konec CSS. Ladění: brightness(0.4) = fotka v klidu (nižší = tmavší), brightness(0.85) = po najetí kurzorem. */ @media (hover: hover) and (pointer: fine) { .rp-page.rp-dark .rp-hero media-item::part(media) { filter: brightness(0.4); transition: filter 0.6s ease; } .rp-page.rp-dark .rp-hero:hover media-item::part(media), .rp-page.rp-dark .rp-hero.is-auto-hover media-item::part(media) { filter: brightness(0.85); } .rp-page.rp-dark .rp-hero::before { background: linear-gradient(to right, rgba(10, 10, 10, 0.9) 0%, rgba(10, 10, 10, 0.65) 45%, rgba(10, 10, 10, 0) 80%), linear-gradient(to top, rgba(10, 10, 10, 0.8) 0%, transparent 50%); transition: opacity 0.6s ease; } .rp-page.rp-dark .rp-hero:hover::before, .rp-page.rp-dark .rp-hero.is-auto-hover::before { opacity: 0.6; /* po najetí kurzorem se i tma pod textem trochu zjemní */ } } /* nadpis, který se nesmí zalomit uprostřed (např. „Life Check-up" na jednom řádku) – jen na počítači, na mobilu se smí lámat */ @media (hover: hover) and (pointer: fine) { .rp-page .rp-title .rp-nw { white-space: nowrap; } } /* paleta o dvou sloupcích (třída rp-pal2) */ @media (hover: hover) and (pointer: fine) { .rp-page .rp-cols3.rp-pal2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* COMMERCIALS: patnáctý spot (Preventive Life Check-up) – stejné chování při najetí a při automatickém listování jako ostatní */ @media (hover: hover) and (pointer: fine) { .cm-f:has(.cm-list .cm-item:nth-child(15):hover) .cm-pv .cm-pvi:nth-child(15), .cm-f:has(.cm-list .cm-item.is-auto:nth-child(15)) .cm-pv .cm-pvi:nth-child(15) { opacity: 1; } } /* COMMERCIALS: šestnáctý spot (Year of Czech Music vložen za Preventive) – stejné chování při najetí a při automatickém listování */ @media (hover: hover) and (pointer: fine) { .cm-f:has(.cm-list .cm-item:nth-child(16):hover) .cm-pv .cm-pvi:nth-child(16), .cm-f:has(.cm-list .cm-item.is-auto:nth-child(16)) .cm-pv .cm-pvi:nth-child(16) { opacity: 1; } } /* ===================================================================== COMMERCIALS · TELEFON: POPISEK PŘES FOTKU NA CELOU ŠÍŘKU (přidej úplně na konec CSS; jen telefon, počítač se nemění) – název, rok · režie · agentura a poznámka se roztáhnou téměř od okraje k okraji fotky – odstup od okraje fotky: 8px (změníš v řádku „padding“; menší číslo = širší text) ===================================================================== */ @media (hover: none) and (pointer: coarse) { html body .cm-f .cm-pvi .cm-info { padding: 0 8px !important; } html body .cm-f .cm-pvi .cm-info > span, html body .cm-f .cm-pt, html body .cm-f .cm-meta, html body .cm-f .cm-note { width: 100% !important; max-width: none !important; } } /* ===================================================================== HOMEPAGE · TELEFON: ŠIPKA PŘES DRAMATURGICKOU MAPU (varianta C – tři šipky) (přidej úplně na konec CSS; patří k ní nový skript na konci globálního HTML; jen telefon) – u pravého okraje mapy tři šipky, každá o něco sytější, jemně se vlní doprava – mapa se u okraje lehce ztmaví; šipka zmizí, jakmile návštěvník mapu poprvé posune ===================================================================== */ html body .home-v2 .hv-swipe { display: none; } /* telefon: buď podle hover/pointer, nebo podle třídy hv-touch (nastaví skript – pro prohlížeče uvnitř aplikací jako Instagram) */ @media (hover: none) and (pointer: coarse) { html body .home-v2 .hv-shape-map { position: relative; } html body .home-v2 .hv-swipe { position: absolute; right: 1px; top: 0; /* výšku a polohu doplní skript podle rámečku mapy */ width: 72px; display: flex; align-items: center; justify-content: flex-end; padding-right: 12px; box-sizing: border-box; border-radius: 0 4px 4px 0; background: linear-gradient(90deg, rgba(18, 17, 16, 0), rgba(18, 17, 16, 0.82)); color: #f0bea0; pointer-events: none; z-index: 5; opacity: 1; transition: opacity 0.5s ease; } html body .home-v2 .hv-swipe.is-gone { opacity: 0; } html body .home-v2 .hv-swipe svg { width: 18px; height: 34px; margin-left: -5px; flex: none; opacity: 0.3; animation: hv-swipe-wave 1.8s ease-in-out infinite; } html body .home-v2 .hv-swipe svg:nth-child(2) { animation-delay: 0.2s; } html body .home-v2 .hv-swipe svg:nth-child(3) { animation-delay: 0.4s; } } /* (stejná pravidla pro třídu hv-touch) */ html.hv-touch body .home-v2 .hv-shape-map { position: relative; } html.hv-touch body .home-v2 .hv-swipe { position: absolute; right: 1px; top: 0; /* výšku a polohu doplní skript podle rámečku mapy */ width: 72px; display: flex; align-items: center; justify-content: flex-end; padding-right: 12px; box-sizing: border-box; border-radius: 0 4px 4px 0; background: linear-gradient(90deg, rgba(18, 17, 16, 0), rgba(18, 17, 16, 0.82)); color: #f0bea0; pointer-events: none; z-index: 5; opacity: 1; transition: opacity 0.5s ease; } html.hv-touch body .home-v2 .hv-swipe.is-gone { opacity: 0; } html.hv-touch body .home-v2 .hv-swipe svg { width: 18px; height: 34px; margin-left: -5px; flex: none; opacity: 0.3; animation: hv-swipe-wave 1.8s ease-in-out infinite; } html.hv-touch body .home-v2 .hv-swipe svg:nth-child(2) { animation-delay: 0.2s; } html.hv-touch body .home-v2 .hv-swipe svg:nth-child(3) { animation-delay: 0.4s; } @keyframes hv-swipe-wave { 0%, 100% { opacity: 0.25; transform: translateX(0); } 40% { opacity: 1; transform: translateX(5px); } } @media (prefers-reduced-motion: reduce) { html body .home-v2 .hv-swipe svg { animation: none; } html.hv-touch body .home-v2 .hv-swipe svg { animation: none; } html body .home-v2 .hv-swipe svg:nth-child(2) { opacity: 0.6; } html body .home-v2 .hv-swipe svg:nth-child(3) { opacity: 1; } } /* ===================================================================== TELEFON · VĚTŠÍ NÁZVY, VĚTŠÍ NADPISY STRÁNEK, HOME V MENU, ZALOMENÍ POPISKŮ (přidej úplně na konec CSS; patří k němu nový skript na konci globálního HTML; jen telefon) 1) název reklamy (COMMERCIALS) i filmu (FILMS) je větší a dlouhý název se vyváženě zalomí 2) nadpisy BESPOKE MUSIC FOR COMMERCIALS a MUSIC FOR FILM jsou větší než názvy pod nimi 3) HOME nahoře v menu (vkládá skript, jen mimo úvodní stránku) 4) řádek „rok · režie · agentura“ a poznámka se zalamují jen za tečkou ·, takže se nikdy nerozbije jméno, a nejsou širší než název (šířku názvu změří skript, proměnná --cap-w); pod ~62 % šířky se nezužují, jinak by u krátkých názvů (TELEKOM, KKCG) vznikl sloupeček Velikosti: názvy 6.2vw (≈ 24 px na iPhonu, nejvíc 28 px), nadpisy 6.6vw / 7vw ===================================================================== */ @media (hover: none) and (pointer: coarse) { /* 1 · názvy */ html body .cm-f .cm-pt { font-size: clamp(22px, 6.2vw, 28px) !important; text-wrap: balance; } html body .films-v2 .fv-title { font-size: clamp(22px, 6.2vw, 28px) !important; } /* 2 · nadpisy stránek */ html body .cm-v2 .sub-vlabel { font-size: 6.6vw !important; letter-spacing: 0.14em !important; padding: 0 22px 0 calc(22px + 0.14em) !important; } html body .films-v2 .fv-label { font-size: 7vw !important; letter-spacing: 0.2em !important; padding-left: 0.2em !important; } /* 4 · zalomení popisků */ html body .cm-f .cm-pvi .cm-info > span.cm-meta, html body .cm-f .cm-pvi .cm-info > span.cm-note { width: auto !important; max-width: clamp(58%, var(--cap-w, 100%), 80%) !important; /* nejméně 58 %, nejvíc 80 % šířky; jinak podle názvu */ margin-left: auto !important; margin-right: auto !important; text-wrap: balance; } html body .films-v2 .fv-meta { max-width: clamp(60%, var(--cap-w, 100%), 85%) !important; margin-left: auto !important; margin-right: auto !important; text-wrap: balance; } /* 3 · HOME v menu: vynoří se jako první, ostatní odkazy o chvilku později */ html body.menu-open .mobile-nav a:nth-child(8) { transition-delay: 1.55s !important; } html body .mobile-nav a.mn-home-off { display: none !important; } } /* ===================================================================== TELEFON · HOMEPAGE: názvy filmů a reklam pod fotkami (SELECTED WORK) trochu větší (přidej úplně na konec CSS; jen telefon; původně 19 px, teď ≈ 22 px na iPhonu, nejvíc 25 px) ===================================================================== */ @media (hover: none) and (pointer: coarse) { html body .home-v2 #hv-work .hv-card-name { font-size: clamp(20px, 5.7vw, 25px) !important; } } /* ===================================================================== TELEFON · NÁZVY SE NIKDY NEZALAMUJÍ (reklamy, filmy, názvy na homepage) (přidej úplně na konec CSS; patří k němu skript na konci globálního HTML; jen telefon) – název je vždy na jednom řádku; dlouhý název skript zmenší přesně tak, aby se vešel (nejméně na 15 px), krátké názvy zůstávají velké ===================================================================== */ @media (hover: none) and (pointer: coarse) { html body .cm-f .cm-pt, html body .films-v2 .fv-title, html body .home-v2 #hv-work .hv-card-name { white-space: nowrap !important; text-wrap: nowrap !important; } } /* ===================================================================== FOOTER NA KONCI COMMERCIALS A FILMS – JEN TELEFON (přidej úplně na konec CSS; patří k němu blok

na konci HTML stránek COMMERCIALS a FILMS a malý skript „FOOTER · back to top“ v globálním HTML; na počítači se footer vůbec nezobrazí) ===================================================================== */ .jf { display: none; } @media (hover: none) and (pointer: coarse) { html body .jf { display: block; position: relative; box-sizing: border-box; width: 100%; max-width: 100%; overflow: hidden; margin: 70px 0 0; padding: 120px 16px 50px; text-align: center; color: #f0bea0; font-size: 16px; -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } html body .cm-f:has(.jf) { padding-bottom: 0 !important; } html body .films-v2:has(.jf) { padding-bottom: 0; } html body .jf * { box-sizing: border-box; } html body .jf a { text-decoration: none !important; } html body .jf::before { content: ""; position: absolute; left: 50%; top: 215px; width: 100vw; height: 100vw; transform: translate(-50%, -50%); background: radial-gradient(circle closest-side, rgba(174, 81, 60, 0.26) 0%, rgba(174, 81, 60, 0.08) 45%, rgba(174, 81, 60, 0) 100%); pointer-events: none; } html body .jf > * { position: relative; } html body .jf .jf-q { margin: 0; font-family: "Sleska J", "Kalnia", serif !important; font-weight: 300 !important; font-variation-settings: "wght" 300, "wdth" 100 !important; font-size: min(34px, 8.6vw) !important; line-height: 1.2 !important; letter-spacing: 0.08em !important; text-transform: uppercase; color: #f0bea0 !important; } html body .jf .jf-q .jf-m { display: inline !important; /* na podstránkách má .rp-page span { display: block } – to by slovo MIND? zalomilo na zvláštní řádek */ font: inherit !important; font-size: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; font-style: normal !important; color: #ae513c !important; } html body .jf .jf-e { margin: 34px auto 0; font-size: min(17px, 4.3vw) !important; line-height: 1.2 !important; } html body .jf .jf-e a { display: inline-block; max-width: 100%; padding-bottom: 7px; font-family: "Sleska J", "Kalnia", serif !important; font-weight: 300 !important; font-variation-settings: "wght" 300, "wdth" 100 !important; font-size: min(17px, 4.3vw) !important; line-height: 1.2 !important; letter-spacing: 0.1em !important; text-transform: uppercase; color: #ae513c !important; border-bottom: 1px solid rgba(174, 81, 60, 0.55); } /* šipka nahoru: stejná ikona jako šipka zpět pod menu, otočená nahoru */ html body .jf .jf-up { margin-top: 74px; } html body .jf .jf-top { display: inline-block; padding: 8px 10px; color: #f0bea0; cursor: pointer; line-height: 0; } html body .jf .jf-top svg { display: block; width: 34px !important; height: 24px !important; max-width: none; transform: rotate(90deg); overflow: visible; } html body .jf .jf-top svg path { stroke-width: 0.6px; fill: none; stroke: currentColor; } } /* ===================================================================== ABOUT · TELEFON: POLETUJÍCÍ TEČKA ROZSVÍCENÍ FOTKU V POZADÍ (přidej úplně na konec CSS; patří k němu aktualizovaný skript ve globálním HTML; jen telefon) – fotka je jinak tmavá (31 %), kolem tečky se v kruhu rozsvítí; nejvíc na ~62 %, ne víc, aby text nad fotkou zůstal čitelný – velikost světla: 58vw (menší číslo = menší kruh), jas ve středu: 0.62 (menší = tmavší) ===================================================================== */ @media (hover: none) and (pointer: coarse) { html body .page:has(.about-page, .rp-about) .backdrop { opacity: 1 !important; -webkit-mask-image: radial-gradient(circle 58vw at var(--ab-x, 50%) var(--ab-y, 50%), rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.31) 100%) !important; mask-image: radial-gradient(circle 58vw at var(--ab-x, 50%) var(--ab-y, 50%), rgba(0, 0, 0, 0.62) 0%, rgba(0, 0, 0, 0.5) 30%, rgba(0, 0, 0, 0.31) 100%) !important; } } /* ABOUT: odkaz v textu (např. „dramaturgy“) má stejnou velikost, řez a řádkování jako okolní text – jen podtržení zůstává */ html body .rp-page.rp-about .ab2-text p a, html body .rp-page.rp-about .ab2-text p a * { font-size: inherit !important; font-family: inherit !important; font-weight: inherit !important; font-variation-settings: inherit !important; letter-spacing: inherit !important; line-height: inherit !important; text-transform: none !important; } /* ABOUT: odstavec hned za větou „His aim…“ („He loves music with fewer notes…“) má kolem sebe víc ticha (větší číslo = víc vzduchu; platí pro mobil i počítač). Pozor: svislé okraje se u sousedních prvků nesčítají, platí ten větší – proto je spodní okraj velký (citát pod ním má vlastní horní okraj ≈ 3,2 × velikost jeho písma) */ html body .rp-page.rp-about .ab2-text .ab2-aim + p { margin-top: 0; margin-bottom: 8em; line-height: 1.9 !important; } html body .rp-page.rp-about .ab2-text .ab2-aim { margin-bottom: 4em; } /* ABOUT: věta „He loves music with fewer notes…“ – rozestup písmen se ke konci postupně rozvolňuje (věta se nadechuje) – rozestup každého slova je v HTML jako --ls (0,01 … 0,91); --k je násobek pro velikost zařízení – na telefonu je rozvolnění slabší, aby se věta vešla a zalomila rozumně */ html body .rp-page.rp-about .ab2-text p.ab2-breathe { --k: 1; --g: 1.6em; /* růst mezery mezi řádky ke konci věty */ line-height: 2.3 !important; } html body .rp-page.rp-about .ab2-text p.ab2-breathe .bw { display: inline-block !important; letter-spacing: calc(var(--ls, 0.01) * 1em * var(--k)) !important; margin-right: calc(0.3em + var(--ls, 0.01) * 1.2em * var(--k)); white-space: nowrap; padding-bottom: calc(var(--t, 0) * var(--t, 0) * var(--t, 0) * var(--g, 1.6em)); /* řádky ke konci věty jsou od sebe čím dál dál */ /* ztenčování tahu (450 → 100) a barva z broskvové do terakoty; --t = pozice slova ve větě 0…1 */ font-weight: calc(450 - 350 * var(--t, 0)) !important; color: rgb(calc(240 - 66 * var(--t, 0)), calc(190 - 109 * var(--t, 0)), calc(160 - 100 * var(--t, 0))) !important; } @media (hover: none) and (pointer: coarse) { html body .rp-page.rp-about .ab2-text p.ab2-breathe { --k: 0.5; --g: 0.8em; line-height: 2.1 !important; } /* na telefonu menší ztenčení, aby konec věty zůstal čitelný */ html body .rp-page.rp-about .ab2-text p.ab2-breathe .bw { font-weight: calc(450 - 230 * var(--t, 0)) !important; } } /* ===================================================================== FOOTER NA KONCI BIO – POČÍTAČ (na COMMERCIALS a FILMS se na počítači dál nezobrazuje) (přidej úplně na konec CSS; používá stejný blok

na konci HTML stránky BIO) ===================================================================== */ @media (hover: hover) and (pointer: fine) { html body .rp-page.rp-about .jf { display: block; position: relative; box-sizing: border-box; width: 100%; overflow: hidden; margin: 80px 0 0; padding: 130px 0 130px; text-align: center; color: #f0bea0; font-size: 16px; } html body .rp-page.rp-about .jf * { box-sizing: border-box; } html body .rp-page.rp-about .jf a { text-decoration: none !important; } html body .rp-page.rp-about .jf::before { content: ""; position: absolute; left: 50%; top: 50%; width: 380px; height: 380px; transform: translate(-50%, -50%); background: radial-gradient(circle closest-side, rgba(174, 81, 60, 0.26) 0%, rgba(174, 81, 60, 0.08) 45%, rgba(174, 81, 60, 0) 100%); pointer-events: none; } html body .rp-page.rp-about .jf > * { position: relative; } html body .rp-page.rp-about .jf .jf-q { margin: 0; font-family: "Sleska J", "Kalnia", serif !important; font-weight: 300 !important; font-variation-settings: "wght" 300, "wdth" 100 !important; font-size: 52px !important; line-height: 1.2 !important; letter-spacing: 0.08em !important; text-transform: uppercase; color: #f0bea0 !important; white-space: nowrap; } html body .rp-page.rp-about .jf .jf-q br { display: none; } /* na počítači nadpis v jednom řádku */ html body .rp-page.rp-about .jf .jf-q .jf-m { display: inline !important; font: inherit !important; font-size: inherit !important; letter-spacing: inherit !important; text-transform: inherit !important; font-style: normal !important; color: #ae513c !important; } html body .rp-page.rp-about .jf .jf-e { margin: 50px auto 0; line-height: 1.2 !important; } html body .rp-page.rp-about .jf .jf-e a { display: inline-block; padding-bottom: 8px; font-family: "Sleska J", "Kalnia", serif !important; font-weight: 300 !important; font-variation-settings: "wght" 300, "wdth" 100 !important; font-size: 21px !important; line-height: 1.2 !important; letter-spacing: 0.1em !important; text-transform: uppercase; color: #ae513c !important; border-bottom: 1px solid rgba(174, 81, 60, 0.55); transition: color .3s; } html body .rp-page.rp-about .jf .jf-e a:hover { color: #f0bea0 !important; } html body .rp-page.rp-about .jf .jf-up { display: none; } /* na počítači bez šipky nahoru */ html body .rp-page.rp-about .jf .jf-top { display: inline-block; padding: 8px 10px; color: #f0bea0; cursor: pointer; line-height: 0; } html body .rp-page.rp-about .jf .jf-top svg { display: block; width: 38px !important; height: 27px !important; max-width: none; transform: rotate(90deg); overflow: visible; } html body .rp-page.rp-about .jf .jf-top svg path { stroke-width: 0.6px; fill: none; stroke: currentColor; } }

Home

Films · Commercials · Music · About Jan · Instagram

Email

Films · Wrapped

Berlin Film ScoringCompetition

Berlin Film Scoring
Competition