/* ========================================================================== Photographic Edition N°002 »ROI — Nevidno« — slog casa (predpona roi-) Uvid: voda in steklo sta prozorna — fotografiramo svetlobo, ne predmeta. Sedem luči: uvod (nitka) · trak luči (naslovnica) · blisk magnezija · plasti svetlobe · lupa 1 : 1 · iz teme v saten · prostori skozi steklenico. Fotografije so dokaz; vse ostalo jim služi. Pripenjanje je CSS sticky, JS bere samo napredek (main.js). Brez gibanja: mirne različice vsega. ========================================================================== */ /* ---- osnova ---- */ *, *::before, *::after { box-sizing: border-box; } html { background: #020407; -webkit-text-size-adjust: 100%; } body { margin: 0; background: #020407; color: var(--color-ink); font: 400 1.0625rem/1.75 var(--font-body); -webkit-font-smoothing: antialiased; overflow-x: hidden; } img { display: block; max-width: 100%; height: auto; } a { color: inherit; } h1, h2, h3, p, figure, ul, ol, dl, dd { margin: 0; } button { font: inherit; } .label { font: 500 var(--size-label)/1.4 var(--font-display); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-accent); } html.has-motion .rv { will-change: opacity, transform; } .ed-plate { background: #05080d; } .ed-plate img { transform-origin: 50% 50%; } .ed-cap { font-size: 0.8125rem; } .ed-cap span { color: var(--color-ink-dim); } .ed-chapter__lead { font-size: clamp(1.125rem, 0.45vw + 1rem, 1.35rem); } .ed-chapter__delo { margin-top: var(--space-md); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.35rem 1.1rem; max-width: 60ch; font-family: var(--font-display); text-transform: uppercase; letter-spacing: var(--tracking-widest); font-size: var(--size-label); } .ed-chapter__delo b { font-weight: 400; color: var(--color-accent); } .ed-chapter__delo span { color: var(--color-ink); } .ed-chapter__delo em { display: block; font-style: normal; } /* vsaka postavka v svoji vrstici (brez pike na koncu vrstice) */ .roi-nelom { white-space: nowrap; } .ed-colophon, .c-signature, body .ds-footer { background: #020407; } /* kazalo s povezavami (pomik brez #oznake, main.js) */ .ed-index__list li { padding: 0; } .ed-index__list a { display: flex; align-items: baseline; gap: var(--space-sm); width: 100%; padding-block: var(--space-2xs); text-decoration: none; } .ed-index__list a:hover .ed-index__name, .ed-index__list a:focus-visible .ed-index__name { color: var(--color-accent-soft); } .ed-index__name { transition: color var(--dur-fast) ease; } .ed-index__hint { font-size: 0.875rem; color: var(--color-ink-dim); } /* brez zrna čez stran: temna ozadja fotografij in filma ostanejo čista */ /* ========================================================================== UVOD — zlata nitka se dviga z nalaganjem, nato postane trak luči ========================================================================== */ .roi-uvod { position: fixed; inset: 0; z-index: 10000; display: grid; place-items: center; background: #020407; transition: opacity 1s var(--ease-out), visibility 1s; } .roi-uvod.is-konec { opacity: 0; visibility: hidden; } html:not(.has-motion) .roi-uvod { display: none; } .roi-uvod__nit { position: relative; display: block; width: 1px; height: 42vh; background: rgba(245, 244, 242, 0.07); } .roi-uvod__nit i { position: absolute; left: 0; bottom: 0; width: 1px; height: calc(var(--n, 0) * 100%); background: linear-gradient(0deg, #b1926f, #fff4e2); box-shadow: 0 0 22px 3px rgba(201, 171, 134, 0.55); transition: height 0.25s linear; } .roi-uvod__st { position: absolute; left: 50%; bottom: 9vh; transform: translateX(-50%); font: 400 0.8125rem/1 var(--font-display); letter-spacing: 0.4em; color: var(--color-accent-soft); } /* ========================================================================== SVETLOBNI TRAK — instrument ob desnem robu ========================================================================== */ .roi-os { position: fixed; z-index: 70; right: clamp(0.9rem, 1.6vw, 1.8rem); top: 50%; height: min(54vh, 28rem); transform: translateY(-50%); opacity: 0; pointer-events: none; transition: opacity 0.6s ease; } .roi-os.is-viden { opacity: 1; pointer-events: auto; } .roi-os__crta { position: absolute; right: 0; top: 0; bottom: 0; width: 1px; background: rgba(245, 244, 242, 0.16); } .roi-os__crta i { position: absolute; left: -0.5px; top: 0; width: 2px; height: calc(var(--p, 0) * 100%); background: linear-gradient(180deg, #b1926f, #fff1dc); box-shadow: 0 0 14px rgba(201, 171, 134, 0.75); } .roi-os ol { list-style: none; margin: 0; padding: 0; height: 100%; display: flex; flex-direction: column; justify-content: space-between; } .roi-os a { position: relative; display: flex; align-items: center; justify-content: flex-end; gap: 0.7rem; padding: 0.35rem 1rem 0.35rem 0; text-decoration: none; font: 500 0.75rem/1 var(--font-display); letter-spacing: 0.24em; text-transform: uppercase; color: rgba(245, 244, 242, 0.5); text-shadow: 0 1px 10px rgba(0, 0, 0, 0.7); } .roi-os a::after { content: ""; position: absolute; right: -3px; top: 50%; width: 7px; height: 1px; background: currentColor; } .roi-os a span, .roi-os a b { font-weight: 500; opacity: 0; transform: translateX(6px); transition: opacity 0.4s ease, transform 0.4s var(--ease-out); } .roi-os a.is-on { color: var(--color-accent-soft); } .roi-os:hover a span, .roi-os:hover a b, .roi-os a:focus-visible span, .roi-os a:focus-visible b { opacity: 1; transform: none; } /* številke samo ob lebdenju (ne ležijo čez vsebino) */ .roi-os a.is-on::after { width: 13px; right: -6px; background: var(--color-accent-soft); } .roi-os:hover { background: linear-gradient(270deg, rgba(2, 4, 7, 0.85), rgba(2, 4, 7, 0)); } @media (max-width: 1100px) { .roi-os { display: none; } } /* ========================================================================== NASLOVNICA — prava fotografija ROI-1; trak luči (miška/prst), drsenje prižge celo fotografijo ========================================================================== */ .roi-hero { position: relative; height: 100vh; height: 100svh; min-height: 560px; background: #020407; } html.has-motion .roi-hero { height: 190vh; height: 190lvh; } .roi-hero__sticky { --lx: 60%; --lw: 13vw; position: relative; height: 100vh; height: 100svh; min-height: 560px; overflow: hidden; background: #020407; touch-action: pan-y; } html.has-motion .roi-hero__sticky { position: sticky; top: 0; } .roi-hero__noc, .roi-hero__dan, .roi-hero__dan img { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; } .roi-hero__noc, .roi-hero__dan img { object-fit: cover; object-position: 55% 50%; } .roi-hero__noc { filter: brightness(0.1) saturate(0.6); } html:not(.has-motion) .roi-hero__noc { display: none; } html.has-motion .roi-hero__dan { -webkit-mask-image: linear-gradient(90deg, transparent calc(var(--lx) - var(--lw)), rgba(0, 0, 0, 0.55) calc(var(--lx) - var(--lw) * 0.55), #000 calc(var(--lx) - var(--lw) * 0.18), #000 calc(var(--lx) + var(--lw) * 0.18), rgba(0, 0, 0, 0.55) calc(var(--lx) + var(--lw) * 0.55), transparent calc(var(--lx) + var(--lw))); mask-image: linear-gradient(90deg, transparent calc(var(--lx) - var(--lw)), rgba(0, 0, 0, 0.55) calc(var(--lx) - var(--lw) * 0.55), #000 calc(var(--lx) - var(--lw) * 0.18), #000 calc(var(--lx) + var(--lw) * 0.18), rgba(0, 0, 0, 0.55) calc(var(--lx) + var(--lw) * 0.55), transparent calc(var(--lx) + var(--lw))); } .roi-hero__sij { position: absolute; top: 0; bottom: 0; left: var(--lx); width: 1px; pointer-events: none; background: linear-gradient(180deg, rgba(255, 244, 226, 0) 0%, rgba(255, 244, 226, 0.55) 35%, rgba(255, 244, 226, 0.55) 65%, rgba(255, 244, 226, 0) 100%); box-shadow: 0 0 60px 14px rgba(201, 171, 134, 0.12); opacity: var(--sij, 0); } html:not(.has-motion) .roi-hero__sij { display: none; } .roi-hero__shade { position: absolute; inset: 0; pointer-events: none; background: linear-gradient(180deg, rgba(2, 4, 7, 0.6) 0%, rgba(2, 4, 7, 0) 24%, rgba(2, 4, 7, 0) 50%, rgba(2, 4, 7, 0.9) 100%); } .roi-hero .ed-cover__masthead, .roi-hero .ed-cover__title, .roi-hero .ed-cover__meta { z-index: 2; } .roi-hero .ed-cover__name { text-shadow: 0 2px 40px rgba(0, 0, 0, 0.5); } .roi-hero .ed-cover__sub { color: rgba(245, 244, 242, 0.88); text-shadow: 0 1px 18px rgba(0, 0, 0, 0.7); font-size: clamp(1.125rem, 0.5vw + 1rem, 1.4rem); } html.has-motion .roi-hero .ed-cover__masthead, html.has-motion .roi-hero .ed-cover__title, html.has-motion .roi-hero .ed-cover__meta { opacity: 0; } .roi-hero__namig { position: absolute; z-index: 2; left: 50%; bottom: 5.4rem; bottom: calc(100lvh - 100svh + 5.4rem); transform: translateX(-50%); display: flex; align-items: center; gap: 0.9rem; white-space: nowrap; font: 500 var(--size-label)/1 var(--font-display); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: rgba(245, 244, 242, 0.78); opacity: 0; } .roi-hero__namig span { position: relative; width: 2.6rem; height: 1px; overflow: hidden; background: rgba(245, 244, 242, 0.25); } .roi-hero__namig span::after { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 1px; background: var(--color-accent); animation: roiTok 2.4s var(--ease-in-out) infinite; } @keyframes roiTok { 0% { left: -40%; } 70%, 100% { left: 100%; } } .roi-hero__namig-prst { display: none; } @media (hover: none), (pointer: coarse) { .roi-hero__namig-mis { display: none; } .roi-hero__namig-prst { display: inline; } } html:not(.has-motion) .roi-hero__namig { display: none; } .roi-hero__napis { position: absolute; z-index: 2; right: max(var(--container-pad), 7rem); bottom: clamp(5.5rem, 14svh, 9rem); display: flex; flex-direction: column; align-items: flex-end; text-align: right; gap: 0.45rem; font-family: var(--font-display); text-transform: uppercase; opacity: 0; pointer-events: none; } .roi-hero__napis b { font-weight: 600; font-size: clamp(1.8rem, 2.6vw, 2.8rem); letter-spacing: 0.26em; color: var(--color-ink); line-height: 1; } .roi-hero__napis span { font-weight: 400; font-size: 0.8125rem; letter-spacing: var(--tracking-widest); color: var(--color-accent-soft); } html:not(.has-motion) .roi-hero__napis { display: none; } /* naslov levo (izdelek ostane prost), na pokončnem zaslonu sredina spodaj */ @media (min-aspect-ratio: 1/1) { .roi-hero .ed-cover__title { left: max(var(--container-pad), calc((100vw - 1600px) / 2 + var(--container-pad))); right: auto; bottom: 17svh; max-width: min(40rem, 44vw); padding: 0; text-align: left; } .roi-hero .ed-cover__name { font-size: clamp(3.6rem, 7.4vw, 8.4rem); } .roi-hero__shade { background: linear-gradient(90deg, rgba(2, 4, 7, 0.78) 0%, rgba(2, 4, 7, 0.35) 30%, rgba(2, 4, 7, 0) 52%), linear-gradient(180deg, rgba(2, 4, 7, 0.6) 0%, rgba(2, 4, 7, 0) 24%, rgba(2, 4, 7, 0) 55%, rgba(2, 4, 7, 0.88) 100%); } } @media (max-width: 700px) { .roi-hero .ed-cover__meta span:nth-child(n + 3) { display: none; } .roi-hero__namig { width: calc(100vw - 2 * var(--container-pad)); justify-content: center; white-space: normal; text-align: center; font-size: 0.75rem; letter-spacing: 0.18em; line-height: 1.5; } .roi-hero__namig span { flex: none; } } @media (max-aspect-ratio: 1/1) { .roi-hero__noc, .roi-hero__dan img { object-position: 45% 50%; } .roi-hero .ed-cover__title { bottom: 22svh; } .roi-hero__napis { right: auto; left: 50%; transform: translateX(-50%); align-items: center; text-align: center; bottom: 12svh; } } .roi-vrsta { display: block; } @media (max-width: 700px) { .roi-vrsta { display: inline; } } @media (max-height: 500px) { .roi-hero .ed-cover__name { font-size: 3.6rem; } .roi-hero .ed-cover__title { bottom: 20svh; } .roi-hero__namig { display: none; } } /* ========================================================================== 01 · BLISK MAGNEZIJA ========================================================================== */ .roi-blisk { padding: 0 0 var(--space-section); } .roi-blisk__oder { position: relative; width: 100%; height: min(calc(100vw * 1314 / 1980), 100svh); margin: 0 auto; /* čez celo širino; višja od zaslona se obreže zgoraj (prazno temno ozadje) */ overflow: hidden; background: #020407; user-select: none; -webkit-user-select: none; touch-action: pan-y; } .roi-blisk__foto, .roi-blisk__negativ { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 70%; opacity: 0; } .roi-blisk__negativ { mix-blend-mode: screen; } .roi-blisk__svetloba { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at 50% 46%, #ffffff 0%, #fff8ee 38%, #f2e7d6 100%); } .roi-blisk__element { --naboj: 0; position: absolute; left: 50%; top: 44%; width: clamp(9.5rem, 15vw, 13rem); aspect-ratio: 1; transform: translate(-50%, -50%) scale(calc(1 + var(--naboj) * 0.04)); display: grid; grid-template-rows: auto 1fr auto auto; padding: 0.9rem 1rem; border: 1px solid rgba(201, 171, 134, calc(0.55 + var(--naboj) * 0.45)); background: radial-gradient(circle at 50% 55%, rgba(255, 246, 232, calc(var(--naboj) * 0.32)), rgba(2, 4, 7, 0) 70%); box-shadow: 0 0 calc(var(--naboj) * 90px) calc(var(--naboj) * 14px) rgba(255, 244, 226, calc(var(--naboj) * 0.55)); font-family: var(--font-display); color: var(--color-accent-soft); transition: opacity 0.5s ease; } .roi-blisk__z { font: 400 0.9375rem/1 var(--font-display); letter-spacing: 0.08em; } .roi-blisk__mg { align-self: center; justify-self: center; font: 600 clamp(3.6rem, 6vw, 5.2rem)/1 var(--font-display); letter-spacing: -0.01em; color: color-mix(in srgb, #c9ab86 calc(100% - var(--naboj) * 100%), #ffffff); text-shadow: 0 0 calc(var(--naboj) * 30px) rgba(255, 246, 232, 0.9); } .roi-blisk__ime { justify-self: center; font: 500 0.75rem/1.4 var(--font-display); letter-spacing: 0.32em; text-transform: uppercase; color: var(--color-ink); } .roi-blisk__masa { justify-self: center; margin-top: 0.15rem; font: 400 0.75rem/1.4 var(--font-display); letter-spacing: 0.2em; color: var(--color-ink-dim); } .roi-blisk__gumb { position: absolute; left: 50%; top: calc(44% + clamp(6.2rem, 9.8vw, 8.4rem)); transform: translateX(-50%); display: inline-flex; align-items: center; gap: 0.9rem; min-height: 48px; padding: 0.4rem 1.2rem 0.4rem 0.5rem; border: 1px solid rgba(245, 244, 242, 0.32); background: rgba(2, 4, 7, 0.4); color: var(--color-ink); font: 500 var(--size-label)/1.2 var(--font-display); letter-spacing: var(--tracking-widest); text-transform: uppercase; white-space: nowrap; cursor: pointer; transition: opacity 0.5s ease, border-color 0.3s ease; touch-action: none; -webkit-touch-callout: none; } .roi-blisk__gumb:hover, .roi-blisk__gumb:focus-visible { border-color: var(--color-accent); } .roi-blisk__krog { width: 34px; height: 34px; transform: rotate(-90deg); } .roi-blisk__krog circle { fill: none; stroke: rgba(245, 244, 242, 0.2); stroke-width: 2; } .roi-blisk__krog .roi-blisk__polnilo { stroke: #fff1dc; stroke-dasharray: 1; stroke-dashoffset: calc(1 - var(--naboj, 0)); } .roi-blisk__gumb-prst { display: none; } @media (hover: none), (pointer: coarse) { .roi-blisk__gumb-mis { display: none; } .roi-blisk__gumb-prst { display: inline; } } .roi-blisk__po { position: absolute; left: clamp(1rem, 3vw, 2.2rem); right: clamp(1rem, 3vw, 2.2rem); bottom: clamp(0.9rem, 2.6vw, 1.8rem); display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1.6rem; font: 500 0.75rem/1.3 var(--font-display); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: rgba(245, 244, 242, 0.85); text-shadow: 0 1px 12px rgba(0, 0, 0, 0.8); opacity: 0; pointer-events: none; transition: opacity 0.9s ease; } .roi-blisk__po span:first-child { color: var(--color-accent-soft); } .roi-blisk__znova { margin-left: auto; padding: 0.55rem 0.9rem; border: 1px solid rgba(245, 244, 242, 0.4); background: rgba(2, 4, 7, 0.45); color: var(--color-ink); font: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; } .roi-blisk__znova:hover, .roi-blisk__znova:focus-visible { border-color: var(--color-accent); } .roi-blisk.is-po .roi-blisk__po { opacity: 1; pointer-events: auto; } .roi-blisk.is-po .roi-blisk__element, .roi-blisk.is-po .roi-blisk__gumb, .roi-blisk.is-blisk .roi-blisk__element, .roi-blisk.is-blisk .roi-blisk__gumb { opacity: 0; pointer-events: none; } /* brez gibanja: fotografija je vidna, element v kotu */ html:not(.has-motion) .roi-blisk__foto { opacity: 1; } html:not(.has-motion) .roi-blisk__gumb, html:not(.has-motion) .roi-blisk__negativ, html:not(.has-motion) .roi-blisk__znova { display: none; } html:not(.has-motion) .roi-blisk__element { left: auto; right: 1.2rem; top: 1.2rem; transform: none; width: 7.5rem; background: rgba(2, 4, 7, 0.6); } html:not(.has-motion) .roi-blisk__element .roi-blisk__mg { font-size: 2.6rem; } html:not(.has-motion) .roi-blisk__po { opacity: 1; } @media (max-width: 700px) { .roi-blisk { padding-inline: 0; } .roi-blisk__oder { aspect-ratio: 1 / 1; } .roi-blisk__foto, .roi-blisk__negativ { object-position: 24% 50%; } .roi-blisk__element { top: 38%; width: 8.6rem; } .roi-blisk__element .roi-blisk__mg { font-size: 3.2rem; } .roi-blisk__gumb { top: calc(38% + 5.6rem); } .roi-blisk__znova { margin-left: 0; } } /* ========================================================================== 02 · FILM — ena luč za steklenico (film 35, širok kader; drsenje previja 60 sličic) ========================================================================== */ .roi-film { position: relative; background: #020407; } html.has-motion .roi-film { height: 260vh; height: 260lvh; } .roi-film__sticky { display: grid; align-content: center; justify-items: center; gap: var(--space-md); max-width: var(--container-max); margin: 0 auto; padding: var(--space-lg) var(--container-pad); } html.has-motion .roi-film__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; padding-block: clamp(4.5rem, 9svh, 6rem) clamp(1.5rem, 4svh, 3rem); } @media (min-width: 1101px) { .roi-film__sticky { padding-inline: 7rem; } } .roi-film__oder { position: relative; width: min(100%, calc(66svh * 1464 / 1080)); aspect-ratio: 1464 / 1080; overflow: hidden; background: #020407; } .roi-film__mirno, .roi-film__platno { position: absolute; inset: 0; width: 100%; height: 100%; max-width: none; object-fit: cover; } .roi-film__platno { display: block; } .roi-film.is-platno .roi-film__mirno { visibility: hidden; } /* robovi kadra se mehko prelijejo v temo strani (ni vidnega pravokotnika) */ .roi-film__oder, html.has-motion .roi-plasti__platno { -webkit-mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); -webkit-mask-composite: source-in; mask-image: linear-gradient(90deg, transparent, #000 16%, #000 84%, transparent), linear-gradient(180deg, transparent, #000 10%, #000 90%, transparent); mask-composite: intersect; } .roi-film__napis { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: baseline; column-gap: var(--space-md); row-gap: 0.8rem; width: min(100%, calc(66svh * 1464 / 1080)); } .roi-film__napis .label { font-size: 0.8125rem; } .roi-film__txt { max-width: 52ch; font-size: 1.125rem; line-height: 1.6; color: var(--color-ink-dim); } .roi-film__meter { grid-column: 1 / -1; position: relative; display: block; height: 2px; background: var(--color-line); } .roi-film__meter i { position: absolute; left: 0; top: 0; bottom: 0; width: calc(var(--p, 0) * 100%); background: linear-gradient(90deg, #b1926f, #fff1dc); } html:not(.has-motion) .roi-film__meter { display: none; } @media (max-aspect-ratio: 1/1) { .roi-film__oder { width: min(100%, calc(58svh * 4 / 5)); aspect-ratio: 4 / 5; } .roi-film__mirno { object-position: 53% 50%; } .roi-film__napis { width: min(100%, calc(58svh * 4 / 5)); grid-template-columns: minmax(0, 1fr); } } /* ležeč telefon: kader levo, besedilo desno */ @media (max-height: 500px) and (min-aspect-ratio: 1/1) { html.has-motion .roi-film__sticky { grid-template-columns: auto minmax(0, 1fr); align-items: center; justify-items: start; padding-block: 3.6rem 1rem; column-gap: var(--space-md); } .roi-film__oder { width: calc(72svh * 1464 / 1080); } .roi-film__napis { width: 100%; grid-template-columns: minmax(0, 1fr); } .roi-film__txt { font-size: 1.0625rem; } } /* ========================================================================== 02 · PLASTI SVETLOBE (platno, 'lighter') ========================================================================== */ .roi-plasti { position: relative; background: #020407; } html.has-motion .roi-plasti { height: 420vh; height: 420lvh; } .roi-plasti__sticky { display: grid; grid-template-columns: minmax(0, 1fr) minmax(18rem, 30rem); align-items: center; gap: var(--space-lg); max-width: var(--container-max); margin: 0 auto; padding: var(--space-lg) var(--container-pad); } html.has-motion .roi-plasti__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; padding-block: clamp(4.5rem, 9svh, 6rem) clamp(1.5rem, 4svh, 3rem); padding-right: max(var(--container-pad), 7rem); } .roi-plasti__oder { position: relative; height: 100%; min-height: 0; display: flex; justify-content: center; align-items: center; } .roi-plasti__mirno { width: auto; max-width: 100%; max-height: 82svh; } html:not(.has-motion) .roi-plasti__mirno { max-height: none; width: min(100%, 44rem); } .roi-plasti__platno { position: absolute; display: block; } .roi-plasti.is-platno .roi-plasti__mirno { visibility: hidden; } .roi-plasti__copy .label { margin-bottom: var(--space-sm); } .roi-plasti__seznam { list-style: none; padding: 0; margin: 0; } .roi-plasti__seznam li { display: grid; grid-template-columns: 2.6rem 1fr; column-gap: 0.4rem; padding-block: 1.1rem; border-top: 1px solid var(--color-line); transition: opacity 0.5s ease, border-color 0.5s ease; } .roi-plasti__seznam li:last-child { border-bottom: 1px solid var(--color-line); } .roi-plasti__seznam span { grid-row: span 2; font: 500 0.8125rem/1.9 var(--font-display); letter-spacing: var(--tracking-widest); color: var(--color-accent); } .roi-plasti__seznam b { font: 600 clamp(1.5rem, 1.2vw + 1rem, 2.1rem)/1.1 var(--font-display); letter-spacing: var(--tracking-tight); text-transform: uppercase; color: var(--color-ink); } .roi-plasti__seznam i { margin-top: 0.4rem; font-style: normal; font-size: 1.0625rem; line-height: 1.6; color: var(--color-ink-dim); } html.has-motion .roi-plasti__seznam li { opacity: 0.78; } html.has-motion .roi-plasti__seznam li.is-on { opacity: 1; } .roi-plasti__meter { position: relative; height: 2px; margin-top: var(--space-sm); background: var(--color-line); } .roi-plasti__meter span { position: absolute; left: 0; top: 0; bottom: 0; width: 0; background: linear-gradient(90deg, #b1926f, #fff1dc); } html:not(.has-motion) .roi-plasti__meter { display: none; } .roi-plasti__opomba { margin-top: var(--space-xs); font-size: 0.9375rem; line-height: 1.6; color: var(--color-ink-dim); } .roi-plasti__vrstica { display: none; } @media (max-aspect-ratio: 1/1) { .roi-plasti__sticky { grid-template-columns: minmax(0, 1fr); gap: var(--space-sm); } html.has-motion .roi-plasti__sticky { grid-template-rows: minmax(0, 1fr) auto; padding: 4.25rem var(--container-pad) 1.1rem; gap: 0.9rem; } .roi-plasti__mirno { max-height: 52svh; } html.has-motion .roi-plasti__copy .label, html.has-motion .roi-plasti__opomba { display: none; } html.has-motion .roi-plasti__seznam { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0.5rem; } html.has-motion .roi-plasti__seznam li { display: block; padding: 0.55rem 0 0; border-top: 2px solid var(--color-line); border-bottom: 0; } html.has-motion .roi-plasti__seznam li.is-on { border-top-color: var(--color-accent); } html.has-motion .roi-plasti__seznam span { display: block; line-height: 1.4; } html.has-motion .roi-plasti__seznam b { display: block; font-size: 1rem; letter-spacing: 0; } html.has-motion .roi-plasti__seznam i { display: none; } html.has-motion .roi-plasti__vrstica { display: block; margin-top: 0.4rem; min-height: 3.3em; font-size: 1.0625rem; line-height: 1.55; color: var(--color-ink-dim); } html.has-motion .roi-plasti__meter { display: none; } } /* ========================================================================== 03 · STEKLO — lupa 1 : 1 (miška) in detajli ========================================================================== */ .roi-lupa { max-width: min(var(--container-max), 1100px); margin: var(--space-lg) auto 0; padding-inline: var(--container-pad); } .roi-lupa__oder { position: relative; aspect-ratio: 1980 / 2132; } @media (hover: hover) and (pointer: fine) { .roi-lupa__oder { cursor: none; } } .roi-lupa__steklo { position: absolute; z-index: 2; left: 0; top: 0; width: clamp(12rem, 18vw, 17rem); height: clamp(12rem, 18vw, 17rem); border-radius: 50%; pointer-events: none; opacity: 0; transform: translate(-50%, -50%) scale(0.85); transition: opacity 0.3s ease, transform 0.35s var(--ease-out); background-repeat: no-repeat; background-color: #020407; box-shadow: 0 0 0 1px rgba(201, 171, 134, 0.8), 0 0 0 7px rgba(2, 4, 7, 0.35), 0 26px 70px rgba(0, 0, 0, 0.65); } .roi-lupa__oder.is-lupa .roi-lupa__steklo { opacity: 1; transform: translate(-50%, -50%) scale(1); } html.roi-lupa-on .ds-cursor { opacity: 0 !important; } .roi-lupa__namig, .roi-lupa__namig-prst { display: none; } @media (hover: hover) and (pointer: fine) { .roi-lupa__namig { display: inline; } } @media not all and (hover: hover) { .roi-lupa__namig-prst { display: inline; } } .roi-detajli { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--space-sm); max-width: min(var(--container-max), 1100px); margin: var(--space-lg) auto 0; padding-inline: var(--container-pad); } .roi-detajli .ed-plate { aspect-ratio: 1; } @media (max-width: 640px) { .roi-detajli { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; } .roi-detajli figure:last-child { grid-column: span 2; } .roi-detajli figure:last-child .ed-plate { aspect-ratio: 2 / 1; } } /* ========================================================================== 04 · DARILO — iz teme v saten ========================================================================== */ .roi-darilo { position: relative; } .roi-darilo__sticky { display: none; } html.has-motion .roi-darilo { height: 260vh; height: 260lvh; } html.has-motion .roi-darilo__sticky { position: sticky; top: 0; display: block; height: 100vh; height: 100svh; overflow: hidden; } .roi-darilo__a, .roi-darilo__b { position: absolute; width: min(90vw, 138svh, 1500px); aspect-ratio: 1980 / 1317; left: 50%; top: 51%; transform: translate(-50%, -50%); } .roi-darilo__b { clip-path: inset(0 100% 0 0); } .roi-darilo__trak { position: absolute; z-index: 3; top: 50%; left: 0; width: 3px; height: min(62vw, 92svh, 1000px); transform: translate(-50%, -50%); pointer-events: none; opacity: 0; background: linear-gradient(180deg, rgba(255, 246, 232, 0) 0%, #fff6e8 22%, #ffffff 50%, #fff6e8 78%, rgba(255, 246, 232, 0) 100%); box-shadow: 0 0 40px 10px rgba(255, 240, 220, 0.35), 0 0 120px 40px rgba(201, 171, 134, 0.18); } .roi-darilo__faze { position: absolute; z-index: 3; left: 50%; bottom: clamp(1rem, 4svh, 2.2rem); transform: translateX(-50%); display: flex; gap: 2.2rem; font: 500 0.8125rem/1 var(--font-display); letter-spacing: var(--tracking-widest); text-transform: uppercase; color: var(--color-ink-faint); } .roi-darilo__faze span { transition: color 0.4s ease; } .roi-darilo__faze span.is-on { color: var(--color-accent-soft); } .roi-darilo__mirno { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); max-width: var(--container-max); margin: var(--space-lg) auto 0; padding-inline: var(--container-pad); } .roi-darilo__mirno .ed-plate { aspect-ratio: 1980 / 1317; } html.has-motion .roi-darilo__mirno { display: none; } @media (max-width: 760px) { .roi-darilo__mirno { grid-template-columns: minmax(0, 1fr); } } .roi-darilo-slogan { padding-top: var(--space-section); } .roi-darilo-slogan .ed-slogan__line em { display: inline-block; } /* ========================================================================== 05 · FILM V OKVIRU (snippet »okvir se odpre«) ========================================================================== */ .okvir { position: relative; overflow: hidden; aspect-ratio: 16 / 9; max-height: 100vh; width: 100%; background: #020407; } .okvir video, .okvir .okvir__poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .okvir .okvir__poster { z-index: 0; } .okvir video { z-index: 1; opacity: 0; transition: opacity 0.9s ease; } .okvir.is-predvaja video { opacity: 1; } .okvir__play { position: absolute; z-index: 2; left: 50%; top: 50%; transform: translate(-50%, -50%); display: none; align-items: center; gap: 0.9rem; min-height: 48px; padding: 0 1.4rem; white-space: nowrap; border: 1px solid rgba(245, 244, 242, 0.5); border-radius: 0; background: rgba(7, 8, 9, 0.55); color: #f5f4f2; font: 500 var(--size-label)/1 var(--font-display); letter-spacing: var(--tracking-widest); text-transform: uppercase; cursor: pointer; } .okvir.is-dotik .okvir__play { display: inline-flex; } .okvir.is-predvaja .okvir__play { display: none; } .okvir__cap { position: absolute; z-index: 2; left: var(--container-pad); right: var(--container-pad); bottom: clamp(1.2rem, 4svh, 2.4rem); display: flex; flex-wrap: wrap; gap: 0.4rem 1.4rem; align-items: baseline; font-family: var(--font-display); text-transform: uppercase; pointer-events: none; } .okvir__cap b { font-weight: 500; font-size: var(--size-label); letter-spacing: var(--tracking-widest); color: var(--color-accent-soft); } .okvir__cap span { font-weight: 500; font-size: 0.95rem; letter-spacing: 0.06em; color: #f5f4f2; text-shadow: 0 1px 12px rgba(0, 0, 0, 0.6); } .okvir__cap i { font-style: normal; font-size: var(--size-label); letter-spacing: var(--tracking-wide); color: rgba(245, 244, 242, 0.82); } .okvir::after { content: ""; position: absolute; inset: 0; z-index: 1; pointer-events: none; background: linear-gradient(180deg, rgba(2, 4, 7, 0) 58%, rgba(2, 4, 7, 0.72) 100%); } .roi-bleed { position: relative; margin-block: var(--space-lg) var(--space-section); } .roi-bleed .okvir { max-height: 92vh; } @media (max-width: 640px) { .okvir__cap { gap: 0.2rem 0.9rem; } .okvir__cap i { flex-basis: 100%; } } /* ========================================================================== 06 · SKOZI STEKLENICO — sedem prostorov, vsak se odpre skozi silhueto ========================================================================== */ .roi-skozi { position: relative; background: #020407; --maska: url("data:image/svg+xml;utf8,"); } html.has-motion .roi-skozi { height: 640vh; height: 640lvh; } .roi-skozi__sticky { position: relative; } html.has-motion .roi-skozi__sticky { position: sticky; top: 0; height: 100vh; height: 100svh; overflow: hidden; } .roi-skozi__oder { position: relative; } html.has-motion .roi-skozi__oder { position: absolute; inset: 0; } html.has-motion .roi-skozi__prizor { position: absolute; inset: 0; visibility: hidden; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; } html.has-motion .roi-skozi__prizor img { width: 100%; height: 100%; max-width: none; object-fit: cover; object-position: var(--x, 50%) 50%; } html.has-motion .roi-skozi__prizor.is-osnova { visibility: visible; -webkit-mask-image: none; mask-image: none; } html.has-motion .roi-skozi__prizor.is-raste { visibility: visible; -webkit-mask-image: var(--maska); mask-image: var(--maska); -webkit-mask-size: var(--mw) var(--mh); mask-size: var(--mw) var(--mh); -webkit-mask-position: var(--mx) var(--my); mask-position: var(--mx) var(--my); } .roi-skozi__obris { position: absolute; z-index: 2; left: 0; top: 0; width: 0; height: 0; overflow: visible; pointer-events: none; opacity: 0; } .roi-skozi__obris path { fill: none; stroke: #ecd5b0; stroke-width: 1.5; filter: drop-shadow(0 0 8px rgba(201, 171, 134, 0.85)); } html:not(.has-motion) .roi-skozi__obris { display: none; } .roi-skozi__napis { position: absolute; z-index: 3; left: var(--container-pad); bottom: clamp(1.4rem, 5svh, 3rem); display: flex; flex-direction: column; gap: 0.4rem; font-family: var(--font-display); text-transform: uppercase; text-shadow: 0 1px 18px rgba(0, 0, 0, 0.75); pointer-events: none; transition: opacity 0.4s ease; } .roi-skozi__st { font: 400 0.8125rem/1 var(--font-display); letter-spacing: var(--tracking-widest); color: var(--color-accent-soft); } .roi-skozi__ime { font: 600 clamp(2rem, 3.6vw, 3.6rem)/1 var(--font-display); letter-spacing: var(--tracking-tight); color: #f5f4f2; } .roi-skozi__pod { font-style: normal; font: 400 0.8125rem/1.3 var(--font-display); letter-spacing: var(--tracking-wide); color: rgba(245, 244, 242, 0.85); } .roi-skozi__razkritje { position: absolute; z-index: 3; right: max(var(--container-pad), 7rem); top: clamp(4.8rem, 10svh, 6rem); max-width: 25rem; padding: 0.7rem 0.9rem; text-align: left; font-size: 1.0625rem; line-height: 1.5; text-wrap: balance; color: #f1efeb; background: rgba(2, 4, 7, 0.72); } html.has-motion .roi-skozi__napis { opacity: 0; } html.has-motion .roi-skozi.is-aktiven .roi-skozi__napis { opacity: 1; } html.has-motion .roi-skozi.is-konec .roi-skozi__napis { opacity: 0; } html.has-motion .roi-skozi__razkritje { opacity: var(--raz, 0); } @media (max-width: 760px) { .roi-skozi__razkritje { left: var(--container-pad); right: var(--container-pad); top: 4.6rem; max-width: none; font-size: 1rem; text-align: left; left: calc(var(--container-pad) - 0.9rem); } .roi-skozi__napis { max-width: calc(100% - 2 * var(--container-pad) - 5.5rem); } } /* brez gibanja: mreža */ html:not(.has-motion) .roi-skozi__oder { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-md); max-width: var(--container-max); margin: 0 auto; padding: 0 var(--container-pad); } html:not(.has-motion) .roi-skozi__napis { display: none; } html:not(.has-motion) .roi-skozi__razkritje { position: static; margin: var(--space-md) auto 0; padding-inline: var(--container-pad); max-width: 40rem; text-align: center; } /* ========================================================================== SERIJA, ZA PREMIUM ZNAMKE, KONEC ========================================================================== */ .roi-serija { max-width: var(--container-max); margin: 0 auto; padding: var(--space-section) var(--container-pad) var(--space-lg); } .roi-serija__glava { max-width: 46rem; margin-bottom: var(--space-lg); } .roi-serija__naslov { margin-top: var(--space-xs); font: 700 var(--size-h1)/var(--leading-tight) var(--font-display); letter-spacing: var(--tracking-tight); text-transform: uppercase; } .roi-serija__naslov em { font-style: normal; color: var(--color-accent); } .roi-serija__txt { margin-top: var(--space-sm); font-size: clamp(1.125rem, 0.45vw + 1rem, 1.35rem); color: var(--color-ink-dim); max-width: 44ch; } .roi-serija__mreza { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: var(--space-md) var(--space-sm); align-items: start; } .roi-serija__mreza figure:nth-child(1) { grid-column: 1 / span 7; } .roi-serija__mreza figure:nth-child(1) .ed-plate { aspect-ratio: 1980 / 1189; } .roi-serija__mreza figure:nth-child(2) { grid-column: 8 / span 5; margin-top: clamp(3rem, 10vw, 9rem); } .roi-serija__mreza figure:nth-child(2) .ed-plate { aspect-ratio: 1980 / 1314; } .roi-serija__mreza figure:nth-child(3) { grid-column: 2 / span 5; } .roi-serija__mreza figure:nth-child(3) .ed-plate { aspect-ratio: 1980 / 2132; } .roi-serija__mreza figure:nth-child(4) { grid-column: 7 / span 5; margin-top: clamp(4rem, 12vw, 11rem); } .roi-serija__mreza figure:nth-child(4) .ed-plate { aspect-ratio: 1980 / 2734; } .roi-serija__mreza figure:nth-child(5) { grid-column: 1 / span 6; } .roi-serija__mreza figure:nth-child(5) .ed-plate { aspect-ratio: 1979 / 1313; } .roi-serija__mreza figure:nth-child(6) { grid-column: 7 / span 6; margin-top: clamp(2rem, 6vw, 5rem); } .roi-serija__mreza figure:nth-child(6) .ed-plate { aspect-ratio: 1980 / 1317; } @media (max-width: 760px) { .roi-serija__mreza { grid-template-columns: minmax(0, 1fr); } .roi-serija__mreza figure { grid-column: 1 !important; margin-top: 0 !important; } } .roi-za { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--space-lg); max-width: var(--container-max); margin: 0 auto; padding: var(--space-section) var(--container-pad); border-top: 1px solid var(--color-line); } .roi-za__naslov { margin-top: var(--space-xs); font: 700 var(--size-h1)/var(--leading-tight) var(--font-display); letter-spacing: var(--tracking-tight); text-transform: uppercase; } .roi-za__naslov em { font-style: normal; color: var(--color-accent); } .roi-za__txt { margin-top: var(--space-sm); font-size: clamp(1.125rem, 0.45vw + 1rem, 1.35rem); color: var(--color-ink-dim); max-width: 44ch; } .roi-za__seznam { list-style: none; margin: 0; padding: 0; align-self: end; } .roi-za__seznam li { display: grid; grid-template-columns: 2.6rem 1fr; column-gap: 0.4rem; padding-block: 1.05rem; border-top: 1px solid var(--color-line); } .roi-za__seznam li:last-child { border-bottom: 1px solid var(--color-line); } .roi-za__seznam span { grid-row: span 2; font: 500 0.8125rem/1.9 var(--font-display); letter-spacing: var(--tracking-widest); color: var(--color-accent); } .roi-za__seznam b { font: 600 clamp(1.25rem, 0.8vw + 1rem, 1.6rem)/1.2 var(--font-display); text-transform: uppercase; letter-spacing: 0.01em; } .roi-za__seznam i { margin-top: 0.3rem; font-style: normal; font-size: 1.0625rem; color: var(--color-ink-dim); } @media (max-width: 900px) { .roi-za { grid-template-columns: minmax(0, 1fr); } } .roi-cta { min-height: 88svh; } /* prostor za zlato črto nad napisom in pod gumbom */ .roi-cta .c-cta__media img { object-position: 50% 45%; } .ed-slogan__note, .ed-colophon__note { font-size: clamp(1.0625rem, 0.4vw + 0.95rem, 1.3rem); } .ed-index__list, .ed-slogan__label, .ed-colophon__list li { font-size: max(0.8125rem, var(--size-small)); } /* snop traku luči pri darilu (širok mehak pas, viden tudi čez beli saten) */ .roi-darilo__trak::before { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 22vw; transform: translateX(-50%); background: linear-gradient(90deg, rgba(255, 244, 226, 0) 0%, rgba(255, 244, 226, 0.16) 42%, rgba(255, 255, 255, 0.34) 50%, rgba(255, 244, 226, 0.16) 58%, rgba(255, 244, 226, 0) 100%); mix-blend-mode: screen; } .roi-darilo__trak::after { content: ""; position: absolute; top: 0; bottom: 0; left: 50%; width: 1px; transform: translateX(-50%); background: #fffaf1; box-shadow: 0 0 2px 1px rgba(201, 171, 134, 0.9); } .roi-detajli { max-width: min(var(--container-max), 1320px); } .roi-legenda .ed-slogan__line { max-width: 18ch; } .roi-detajli .ed-cap { flex-wrap: wrap; gap: 0.3rem 0.8rem; } /* ========================================================================== POPRAVKI PO KONTROLI OBLIKE (16. 10.) ========================================================================== */ main i, .roi-hero__namig i { font-style: normal; } main p { text-wrap: pretty; } /* glava ostane berljiva nad svetlimi prizori */ .roi-skozi__sticky::before, html.has-motion .roi-darilo__sticky::before { content: ""; position: absolute; z-index: 2; left: 0; right: 0; top: 0; height: 150px; pointer-events: none; background: linear-gradient(180deg, rgba(2, 4, 7, 0.78), rgba(2, 4, 7, 0)); } .roi-skozi__sticky::after { content: ""; position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 34%; pointer-events: none; background: linear-gradient(0deg, rgba(2, 4, 7, 0.82), rgba(2, 4, 7, 0)); } html:not(.has-motion) .roi-skozi__sticky::before, html:not(.has-motion) .roi-skozi__sticky::after { display: none; } /* telefon: naslov pod steklenico, spodaj mehka tema */ @media (max-aspect-ratio: 1/1) { /* črke ROI (22–59 % višine fotografije) med napis edicije in naslov: merilo in zamik računa main.js (hPokonci); robova fotografije se zgoraj in spodaj mehko prelijeta v temo */ .roi-hero__noc, .roi-hero__dan img { transform-origin: 45% 0; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 74%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 12%, #000 74%, transparent 100%); } .roi-hero__shade { background: linear-gradient(180deg, rgba(2, 4, 7, 0.55) 0%, rgba(2, 4, 7, 0) 22%, rgba(2, 4, 7, 0) 46%, rgba(2, 4, 7, 0.82) 66%, rgba(2, 4, 7, 0.96) 100%); } } /* ležeči telefon */ @media (max-height: 500px) { .roi-hero, .roi-hero__sticky { min-height: 0; } .roi-hero .ed-cover__title { bottom: 16svh; } .roi-hero .ed-cover__masthead { display: none; } .roi-hero .ed-cover__sub { margin-top: 0.4rem; font-size: 1rem; } html.has-motion .roi-plasti__sticky { grid-template-columns: auto minmax(0, 1fr); padding-block: 3.6rem 0.8rem; gap: 1.6rem; } .roi-plasti__mirno { max-height: 78svh; } html.has-motion .roi-plasti__seznam li { padding-block: 0.45rem; } html.has-motion .roi-plasti__seznam b { font-size: 1.15rem; } html.has-motion .roi-plasti__seznam i, html.has-motion .roi-plasti__copy .label, html.has-motion .roi-plasti__opomba { display: none; } } /* lupa: cela fotografija na enem zaslonu */ .roi-lupa { max-width: min(var(--container-max), 1100px, calc(86svh * 0.929 + 2 * var(--container-pad))); } /* berljivost drobnih napisov */ .ed-index__hint { font-size: 0.9375rem; } .roi-detajli .ed-cap, .roi-lupa .ed-cap, .roi-serija .ed-cap, .roi-darilo .ed-cap { font-size: 0.875rem; } .roi-darilo__faze { font-size: 0.875rem; } .roi-skozi__st, .roi-skozi__pod { font-size: 0.875rem; } .ed-chapter__kicker, .ed-index__label, .roi-plasti__copy .label, .roi-serija .label, .roi-za .label, .okvir__cap b, .ed-slogan__label { font-size: 0.8125rem; } .ed-colophon__list li span:first-child { color: var(--color-ink-dim); text-align: left; } .ed-colophon__list li span:last-child { text-align: right; } .c-signature__roles, .c-signature__meta { color: var(--color-ink-dim); } .ed-colophon { padding-bottom: calc(var(--space-section) + 4rem); } /* blisk na telefonu: cela fotografija, gumb spodaj v odru */ @media (max-width: 700px) { /* fotografija 3 : 2 zgoraj, pod njo temen pas za gumb (pred bliskom) in napisa (po njem) */ .roi-blisk__oder { aspect-ratio: auto; height: calc((100vw - 0px) * 1314 / 1980 + 6.2rem); } .roi-blisk__foto, .roi-blisk__negativ, .roi-blisk__svetloba { top: 0; bottom: auto; height: calc(100% - 6.2rem); object-position: 50% 50%; } .roi-blisk__element { top: calc((100% - 6.2rem) / 2); width: 6.8rem; padding: 0.5rem 0.6rem; } .roi-blisk__element .roi-blisk__mg { font-size: 2.4rem; } .roi-blisk__element .roi-blisk__ime, .roi-blisk__element .roi-blisk__masa { font-size: 0.75rem; letter-spacing: 0.16em; } .roi-blisk__gumb { top: auto; bottom: 1.1rem; min-height: 48px; padding: 0.3rem 0.9rem 0.3rem 0.4rem; font-size: 0.75rem; letter-spacing: 0.14em; } .roi-blisk__krog { width: 28px; height: 28px; } .roi-blisk__po { bottom: 0.9rem; gap: 0.4rem 1rem; font-size: 0.75rem; letter-spacing: 0.14em; } .roi-blisk__znova { font-size: 0.75rem; } /* film: gumb spodaj na sredini, napis zgoraj, manj praznine */ .okvir.is-dotik .okvir__play { top: auto; bottom: 0.9rem; transform: translateX(-50%); } .okvir__cap { top: 0.8rem; bottom: auto; } .roi-bleed { margin-block: var(--space-md) var(--space-lg); } } /* CTA: brez izdelka pod besedilom — samo trak luči v temi */ .roi-cta__luc { background: radial-gradient(ellipse 60% 70% at 50% 50%, rgba(20, 36, 64, 0.55), rgba(2, 4, 7, 0) 70%), #020407; } .roi-cta__luc::after { display: none; } .roi-cta__luc span { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; --a: 18%; --b: 86%; -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 64px, #000 calc(var(--a) - 28px), transparent var(--a), transparent var(--b), #000 calc(var(--b) + 28px), #000 calc(100% - 64px), transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 64px, #000 calc(var(--a) - 28px), transparent var(--a), transparent var(--b), #000 calc(var(--b) + 28px), #000 calc(100% - 64px), transparent 100%); /* --a, --b: main.js (nad napisom, pod gumbom) */ transform: translateX(-50%); background: linear-gradient(180deg, rgba(255, 244, 226, 0), rgba(255, 244, 226, 0.5) 30%, rgba(255, 244, 226, 0.5) 70%, rgba(255, 244, 226, 0)); box-shadow: 0 0 80px 18px rgba(201, 171, 134, 0.1); } .roi-cta .c-btn { padding: 1.1rem 2.4rem; font-size: 0.875rem; border-color: var(--color-accent); } /* 2. krog oblike */ i { font-style: normal; } .roi-os a { text-shadow: 0 0 6px rgba(2, 4, 7, 0.95), 0 0 14px rgba(2, 4, 7, 0.9); } .roi-os__crta { background: rgba(2, 4, 7, 0.5); box-shadow: 0 0 0 1px rgba(245, 244, 242, 0.16); } .roi-darilo__faze { padding: 0.65rem 1.1rem; background: rgba(2, 4, 7, 0.72); color: rgba(245, 244, 242, 0.62); } @media (max-height: 500px) { .roi-hero .ed-cover__title { bottom: 21svh; } } /* ležeč telefon: razkritje levo zgoraj, stran od steklenice v sredini */ @media (max-height: 500px) and (min-aspect-ratio: 1/1) { .roi-skozi__razkritje { left: calc(var(--container-pad) - 0.9rem); right: auto; top: 3.6rem; max-width: 16rem; text-align: left; font-size: 0.9375rem; } } /* namig in napis naslovnice: na ozkem zaslonu vsak del v svoji vrstici (pika samo v eni vrstici) */ .roi-hero__namig b, .roi-hero__napis em { font: inherit; font-style: normal; letter-spacing: inherit; } @media (max-width: 700px) { .roi-hero__namig b, .roi-hero__napis em { display: block; } .roi-hero__namig .roi-pika, .roi-hero__napis .roi-pika { display: none; } } /* detajli: na ozkem zaslonu napis v dveh vrsticah brez pike (ne začne ali konča se s piko) */ .roi-detajli .ed-cap em { font-style: normal; } @media (max-width: 640px) { .roi-detajli .ed-cap em { display: block; } .roi-detajli .ed-cap .roi-pika { display: none; } } @media (max-width: 900px) { .roi-detajli .ed-cap { flex-direction: column; align-items: flex-start; gap: 0.35rem; } } /* 100 % vedno pod napisom */ /* kazalo na telefonu: v okviru strani (številke niso več odrezane ob robu) */ @media (max-width: 700px) { .ed-index { padding-inline: var(--container-pad); } .ed-index__list { display: block; width: 100%; } .ed-index__hint { text-align: right; } } /* telefon: temen mehak sij za naslovom (črke na etiketi ne motijo branja) */ @media (max-aspect-ratio: 1/1) { .roi-hero .ed-cover__title::before { content: ""; position: absolute; z-index: -1; left: -12%; right: -12%; top: -18%; bottom: -22%; pointer-events: none; background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(2, 4, 7, 0.72), rgba(2, 4, 7, 0.45) 55%, rgba(2, 4, 7, 0) 100%); } } /* ===== TELEFON: gladko drsenje (16. 10. 2026) — krajši pripeti odseki, maska vizualizacij kot slika (PNG), brez filtrov na premikajočih plasteh ===== */ @media (max-width: 760px), (max-height: 500px) and (min-aspect-ratio: 1/1) { html.has-motion .roi-hero { height: 150vh; height: 150lvh; } html.has-motion .roi-film { height: 170vh; height: 170lvh; } html.has-motion .roi-plasti { height: 260vh; height: 260lvh; } html.has-motion .roi-darilo { height: 170vh; height: 170lvh; } html.has-motion .roi-skozi { height: 420vh; height: 420lvh; --maska: url("/cases/roi/assets/img/steklenica-maska.png"); } .roi-skozi__obris path { filter: none; stroke-width: 2; } .roi-hero .ed-cover__meta { -webkit-backdrop-filter: none; backdrop-filter: none; } }