/* ========================================================================== VÁKUUM - custom styles Complements css/tailwind.css (purged compiled Tailwind: only classes already present in index.html exist there, so every new style lives here). Holds: scroll-snap, the background video layers, the hero intro, reveals, galleries, the artwork detail modal, and the V Á K U U M space. ========================================================================== */ :root { --hero-top: 36%; /* (1) hero content block vertical position, from the top */ --bg-overlay: 0.1; /* (2) max darkness of the centered (site-wide) background overlay (0 to 1) */ --hero-overlay: 0.5; /* (3) hero-only dark layer behind the wordmark: brings the video to ~half strength and keeps the title readable (0 to 1) */ /* Shared display scale for the standalone narrative beats, so the hero tagline, quote bridge and closing rhyme instead of drifting. */ --vk-beat-sm: clamp(1.45rem, 3.4vw, 2.1rem); --vk-beat-md: clamp(1.7rem, 4vw, 2.5rem); --vk-beat-lg: clamp(1.8rem, 4.4vw, 2.7rem); --vk-line: rgba(255, 255, 255, .14); /* hairline borders everywhere */ --vk-ease: cubic-bezier(.22, .61, .36, 1); /* the site's easing family */ } html { margin: 0; padding: 0; background: #000; color-scheme: dark; } body { margin: 0; padding: 0; background: transparent; /* let #bg-fallback / #myVideo show through */ font-family: 'Raleway', ui-sans-serif, system-ui, -apple-system, sans-serif; color: #fff; } ::selection { background: rgba(255, 255, 255, .85); color: #000; } /* Custom Tailwind family the original used (safety net if absent from bundle) */ .font-header { font-family: 'Raleway', ui-sans-serif, sans-serif; } /* Quiet, consistent keyboard focus on every control (mouse clicks stay ring-free). */ a:focus-visible, button:focus-visible { outline: 1px solid rgba(255, 255, 255, .75); outline-offset: 3px; } /* ---- full-page scroll-snap container -------------------------------------- */ html { overflow: hidden; } #scroll-container { height: 100vh; height: 100dvh; width: 100vw; overflow-y: scroll; scroll-snap-type: y mandatory; scroll-behavior: smooth; scrollbar-width: none; /* Firefox */ -ms-overflow-style: none; /* old Edge */ } #scroll-container::-webkit-scrollbar { display: none; } /* WebKit */ /* Sections size to the dynamic viewport (100dvh) so iOS toolbars never clip the snapped screen; taller-than-viewport sections stay scrollable. */ .section { scroll-snap-align: start; position: relative; /* keeps each section's chevron anchored to itself */ height: auto; min-height: 100vh; min-height: 100dvh; } /* ---- fixed background: poster layer + video ------------------------------- */ /* #bg-fallback always shows the poster frame; the shipped video plays on top. */ #bg-fallback { position: fixed; inset: 0; z-index: -2; background: #000 url('../img/bg-poster.jpg') center center / cover no-repeat; } #myVideo { z-index: -1; } /* ========================================================================== Hero intro: timed black-to-reveal. Pure CSS on a fixed schedule, independent of video load, so the hero never sticks on black. The opening (hidden) state is mirrored inline in ; prefers-reduced-motion shows everything at once. ========================================================================== */ /* Wordmark: the single source of truth for the mark's type. Lifted off the busy background with a soft shadow plus a faint top highlight so it reads as raised, not flat. nowrap + the small clamp floor guarantee one line on narrow phones. */ .hero-wordmark { font-size: clamp(2.25rem, 12.5vw, 7rem); font-weight: 600; letter-spacing: .04em; line-height: 1.02; white-space: nowrap; text-shadow: 0 1px 0 rgba(255, 255, 255, .10), 0 6px 28px rgba(0, 0, 0, .55); } /* Quoted tagline: the hero's spoken line, quiet but stable over bright frames. */ .hero-sub { margin-top: 1.4rem; font-size: var(--vk-beat-sm); line-height: 1.35; font-weight: 300; letter-spacing: .01em; color: rgba(255, 255, 255, .7); text-shadow: 0 1px 12px rgba(0, 0, 0, .6); } .hero-sub em { font-style: italic; } /* Raise the hero content block into the upper third (single value: --hero-top). Absolute within the full-height section; the chevron stays anchored at the bottom. */ .hero-content { position: absolute; left: 0; right: 0; top: var(--hero-top); transform: translateY(-50%); z-index: 1; } /* Hero-only dark layer: sits above the fixed background video but below the wordmark, so the video reads at ~half strength while the title stays crisp. Strength is the single value --hero-overlay. */ .hero-scrim { position: absolute; inset: 0; z-index: 0; pointer-events: none; background: rgba(0, 0, 0, var(--hero-overlay)); } /* Foreground eases in, staggered: wordmark (d1), tagline (d2), CTA (d3). */ .hero-in { opacity: 0; animation: vk-hero-in 1.17s var(--vk-ease) both; } .hero-in.d1 { animation-delay: .15s; } .hero-in.d2 { animation-delay: .6s; } .hero-in.d3 { animation-delay: 1s; } .hero-in.d4 { animation-delay: 1.4s; } @keyframes vk-hero-in { from { opacity: 0; transform: translateY(16px) scale(.965); } to { opacity: 1; transform: none; } } /* Scroll chevron fades in after the CTA; opacity rides the wrapper so the bob stays. */ .hero-fade-late { opacity: 0; animation: vk-hero-fade 1.1s ease 1.75s both; } @keyframes vk-hero-fade { from { opacity: 0; } to { opacity: 1; } } /* Background (video over its poster fallback) eases in once the text has settled. */ #bg-fallback, #myVideo { opacity: 0; animation: vk-hero-bg 2s ease 2.2s both; } @keyframes vk-hero-bg { from { opacity: 0; } to { opacity: 1; } } /* Site-wide darkening overlay above the video: concentrated through the vertical middle (where content sits) and feathered to fully transparent at top and bottom, so it reads as soft depth, not a band. Single adjustable value: --bg-overlay. */ #bg-scrim { position: fixed; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to bottom, rgba(0,0,0,0) 0%, rgba(0,0,0, calc(var(--bg-overlay) * 0.18)) 20%, rgba(0,0,0, calc(var(--bg-overlay) * 0.65)) 38%, rgba(0,0,0, var(--bg-overlay)) 50%, rgba(0,0,0, calc(var(--bg-overlay) * 0.65)) 62%, rgba(0,0,0, calc(var(--bg-overlay) * 0.18)) 80%, rgba(0,0,0,0) 100%); } /* ---- scroll reveal (slow fade; scoped to .js so no-JS still shows content) -- */ .js .reveal { opacity: 0; transform: translateY(40px); transition: opacity 1.56s ease, transform 1.56s ease; } .js .reveal.is-visible { opacity: 1; transform: none; } .js .reveal-scale { transform: scale(.6); } .js .reveal-scale.is-visible { transform: scale(1); } /* ---- galleries ------------------------------------------------------------ */ .gallery-grid { width: 100%; } .gallery-item { position: relative; display: block; padding: 0; margin: 0; border: 0; background: none; cursor: pointer; overflow: hidden; border-radius: 2px; } .gallery-img { width: 100%; height: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; transition: transform .5s ease, filter .5s ease; } .gallery-item:hover .gallery-img, .gallery-item:focus-visible .gallery-img { transform: scale(1.07); filter: brightness(1.12); } /* Hover caption: index + title, set by js/main.js from the catalog. */ .tile-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 1.6rem .45rem .4rem; background: linear-gradient(to top, rgba(0, 0, 0, .82), rgba(0, 0, 0, 0)); font-size: .55rem; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .92); text-align: left; opacity: 0; transition: opacity .45s ease; pointer-events: none; } .gallery-item:hover .tile-cap, .gallery-item:focus-visible .tile-cap { opacity: 1; } /* Doorway into the virtual gallery, in the same family as the Reach Out button. */ .vk-enter-space { margin-top: 1.6rem; padding: .65rem 1.7rem; border: 1px solid rgba(255, 255, 255, .85); background: none; color: #fff; font-family: inherit; font-size: .68rem; font-weight: 500; letter-spacing: .26em; text-transform: uppercase; text-indent: .26em; cursor: pointer; transition: background-color .3s ease, color .3s ease; } .vk-enter-space:hover { background-color: #fff; color: #000; } /* ---- navbar (slides down once past the hero) ------------------------------- */ #vakuum-navbar { top: 0; background: rgba(0, 0, 0, .82); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border-bottom: 1px solid var(--vk-line); transform: translateY(-100%); visibility: hidden; transition: transform .5s var(--vk-ease), visibility 0s linear .5s; } #vakuum-navbar.is-shown { transform: none; visibility: visible; transition: transform .5s var(--vk-ease); } #menu-button { transition: opacity .3s ease; opacity: .8; } #menu-button:hover, #menu-button[aria-expanded="true"] { opacity: 1; } #vk-menu { display: block; width: 16rem; padding: .4rem 0; background: rgba(0, 0, 0, .94); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); border: 1px solid var(--vk-line); opacity: 0; visibility: hidden; transform: scale(.96) translateY(-.3rem); transition: opacity .25s ease, transform .25s ease, visibility 0s linear .25s; } #vk-menu.open { opacity: 1; visibility: visible; transform: none; transition: opacity .25s ease, transform .25s ease; } #vk-menu a { display: block; padding: .6rem 1.1rem; font-size: .68rem; font-weight: 500; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .85); text-decoration: none; white-space: nowrap; transition: background-color .25s ease, color .25s ease; } #vk-menu a:hover { background: #fff; color: #000; } /* ---- misc ------------------------------------------------------------------ */ /* One bob, one rhythm: both scroll chevrons share vk-bob. The hero one centers itself (its zero-width wrapper sits on the section centerline). */ .scroll-hint { cursor: pointer; left: 50%; margin-left: -14px; padding: 0; border: 0; background: none; animation: vk-bob 1.8s ease-in-out infinite; } .send-inquiry { letter-spacing: .26em; text-indent: .26em; transition: background-color .3s ease, color .3s ease; } .send-inquiry:hover { background-color: #fff; color: #000; } /* Thin, subtle, persistent scroll-progress rail on the right edge. */ #vk-progress { position: fixed; top: 0; right: 0; z-index: 20; width: 2px; height: 100vh; background: rgba(255, 255, 255, .07); } #vk-progress-bar { display: block; width: 100%; height: 0; background: rgba(255, 255, 255, .45); transition: height .12s linear; } /* ========================================================================== Narrative helpers: copy-driven layout on top of the original shell. Reuses existing tokens only: Raleway, #fff + opacity, .reveal fade. ========================================================================== */ /* Centered, measured wrapper for standalone beats (quote bridge, closing). */ .vk-solo { max-width: 44rem; margin: 0; padding: 0 1.5rem; text-align: center; } /* Quiet framing dot for the statement beats: the exact same middle dot the section titles use (.vk-state-ix), nothing more. One above the statement, one closing it. */ .vk-dot { margin: 0; font-family: 'Raleway', ui-sans-serif, sans-serif; font-weight: 300; font-size: clamp(1.35rem, 3vw, 1.85rem); line-height: 1; color: rgba(255, 255, 255, .58); } .vk-bridge .vk-dot { margin-bottom: 2.1rem; } .vk-bridge .vk-dot-after { margin: 2.1rem 0 0; } .vk-bridge .vk-dot-after + .vk-bridge-note { margin-top: 2.1rem; } .vk-closing .vk-dot { margin-bottom: 1.8rem; } .vk-closing .vk-dot-after { margin: 0 0 .3rem; } /* About keeps portrait + two columns; pad the top so the centered copy clears the fixed navbar instead of hiding under it. */ .vk-about { height: auto; padding-top: 4.5rem; padding-bottom: 2rem; } .vk-about .vk-about-title { margin-bottom: 1.6rem; } .vk-portrait { box-shadow: 0 18px 50px rgba(0, 0, 0, .55); } /* Reusable down-chevron (quote bridge). Shares vk-bob with the hero chevron. */ .vk-chevron { position: absolute; bottom: 2rem; left: 50%; margin-left: -14px; width: 28px; height: 28px; padding: 0; border: 0; background: none; color: rgba(255, 255, 255, .7); cursor: pointer; animation: vk-bob 1.8s ease-in-out infinite; } @keyframes vk-bob { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(8px); } } /* Text-heavy sections grow with their copy instead of clipping at one viewport, and pad the top so the first line clears the fixed navbar. Applies to the galleries too, so all 24 tiles stay reachable on phones. */ .vk-tall { height: auto; min-height: 100vh; min-height: 100dvh; padding-top: 5.5rem; padding-bottom: 3.5rem; } /* Quote bridge: two equal-size statement lines (names italic, the mirrored keyword bold), then a large high-contrast bold turn, then a small gray legibility note. */ .vk-bridge { color: #fff; } .vk-bridge p { margin: 0; font-family: 'Raleway', ui-sans-serif, sans-serif; } .vk-bridge .vk-bridge-line { font-weight: 400; font-size: var(--vk-beat-md); line-height: 1.4; color: #fff; } .vk-bridge .vk-bridge-line + .vk-bridge-line { margin-top: .45rem; } .vk-bridge .vk-bridge-line em { font-style: italic; } .vk-bridge .vk-bridge-line strong { font-weight: 700; letter-spacing: .03em; } /* Turn: the beat the section exists for, so it lands a step above its setup. */ .vk-bridge .vk-bridge-turn { margin-top: 2rem; font-weight: 400; font-size: var(--vk-beat-lg); line-height: 1.4; color: #fff; } .vk-bridge .vk-bridge-turn strong { font-weight: 700; } /* Legibility note: left-aligned on the verse measure, set lower, quiet grey. */ .vk-bridge .vk-bridge-note { margin: 3.2rem auto 0; max-width: 32rem; text-align: left; font-weight: 400; font-size: clamp(.9rem, 1.6vw, 1.02rem); line-height: 1.65; color: rgba(255, 255, 255, .68); } /* Inline link inside prose (vakuum.app). Reuses white + underline, no new color. */ .vk-link { text-decoration: underline; text-underline-offset: 3px; color: #fff; transition: opacity .3s ease; } .vk-link:hover { opacity: .75; } /* The spaced mark inside justified prose: one unbreakable box, so inter-word justification can never stretch the spaces between its letters. */ .vk-mark { display: inline-block; white-space: nowrap; } /* Double-sided (justified) alignment for prose that is not inside .vk-verse (e.g. the About two-column text). Hyphenation keeps narrow measures even. */ .vk-justify { text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } /* ========================================================================== State sections (01 / 02 / 03 and WHAT COMES NEXT): a quiet, premium layout. Uppercase letter-spaced title with a muted index, then a centered verse column with generous line height. ========================================================================== */ .vk-state-wrap { display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 1.25rem; max-width: 100%; } /* Title: centered, uppercase, letter-spaced. text-indent balances the trailing tracking space so the centered line sits on its optical center. */ .vk-state-title { font-family: 'Raleway', ui-sans-serif, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; text-indent: .18em; font-size: clamp(1.35rem, 3vw, 1.85rem); color: #fff; margin: 0 0 2.2rem; } /* Muted index ("01 ·") in front of the title, one tier below it. */ .vk-state-ix { font-weight: 300; color: rgba(255, 255, 255, .58); } /* Verse body: normalized to match the ABOUT section's body text exactly - size (text-sm / md:text-base = .875rem / 1rem), line-height (leading-relaxed 1.625), measure (md:max-w-[50%] of max-w-5xl = 32rem), paragraph spacing (mb-5 = 1.25rem), and justified alignment. Bold = concept, italic = intimate phrase. */ .vk-verse { max-width: 32rem; text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; hyphens: auto; overflow-wrap: break-word; } .vk-verse p { margin: 0 0 1.25rem; font-size: .875rem; line-height: 1.625; color: rgba(255, 255, 255, .9); } @media (min-width: 768px) { .vk-verse p { font-size: 1rem; } } .vk-verse p:last-child { margin-bottom: 0; } .vk-verse strong { font-weight: 700; color: #fff; } .vk-verse em { font-style: italic; color: #fff; } /* Inline link sits at body size so the paragraph reads uniformly (like ABOUT). */ .vk-verse .vk-link { font-size: inherit; } /* Series title placed directly above the paintings / video (center, full caps, typographic quotes in the markup). */ .vk-series { font-family: 'Raleway', ui-sans-serif, sans-serif; font-weight: 700; text-transform: uppercase; letter-spacing: .18em; text-indent: .18em; font-size: clamp(1.1rem, 2.4vw, 1.5rem); line-height: 1.3; color: #fff; text-align: center; margin: 0 0 1.5rem; } /* The video wrapper: 85vw, but never taller than the viewport can hold (navbar + series title + breathing room budgeted at 10rem). */ .vk-video { aspect-ratio: 16 / 9; width: min(85vw, calc((100vh - 10rem) * 16 / 9)); width: min(85vw, calc((100dvh - 10rem) * 16 / 9)); } .vk-video iframe { border: 0; } /* Closing beat: three quiet parts, generous spacing, the last line the emphasis. */ .vk-closing-line { margin: 0 0 1.7rem; font-family: 'Raleway', ui-sans-serif, sans-serif; font-weight: 300; font-size: var(--vk-beat-sm); line-height: 1.45; color: rgba(255, 255, 255, .78); } .vk-closing-final { margin: 1.1rem 0 0; font-family: 'Raleway', ui-sans-serif, sans-serif; font-style: italic; font-weight: 600; font-size: var(--vk-beat-lg); line-height: 1.4; color: #fff; } /* ---- socials (white footer): palette lives here, not inline ---------------- */ #socials { background-color: #fff; } .vk-socials-label { color: rgba(0, 0, 0, .7); } #socials .send-inquiry { border-color: #111; color: #111; } #socials .send-inquiry:hover { background-color: #111; color: #fff; } #socials .transition-transform { transition-duration: .3s; transition-timing-function: ease; } /* ========================================================================== Artwork detail view (#vk-work-modal): image on the stage, curatorial notes on a quiet side panel. Replaces the old bare lightbox. ========================================================================== */ #vk-work-modal { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; opacity: 0; visibility: hidden; transition: opacity .45s ease, visibility 0s linear .45s; } #vk-work-modal.open { opacity: 1; visibility: visible; transition: opacity .45s ease; } #vk-work-modal[hidden] { display: none; } .vkm-backdrop { position: absolute; inset: 0; background: rgba(2, 2, 2, .965); -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); } .vkm-panel { position: relative; display: flex; align-items: center; gap: 2.6rem; max-width: min(92vw, 1180px); max-height: 88vh; padding: 0 3.4rem; } .vkm-stage { margin: 0; min-width: 0; display: flex; align-items: center; justify-content: center; } .vkm-stage img { max-width: 100%; max-height: 82vh; display: block; box-shadow: 0 30px 80px rgba(0, 0, 0, .8); border: 1px solid rgba(255, 255, 255, .06); transform: scale(.975); transition: transform .45s var(--vk-ease); } #vk-work-modal.open .vkm-stage img { transform: none; } .vkm-info { flex: 0 0 300px; max-width: 300px; border-left: 1px solid var(--vk-line); padding: .4rem 0 .4rem 2rem; } .vkm-eyebrow { margin: 0 0 1.1rem; font-size: .62rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .5); } .vkm-title { margin: 0 0 1.2rem; font-size: clamp(1.3rem, 2.4vw, 1.8rem); font-weight: 600; letter-spacing: .14em; text-indent: 0; text-transform: uppercase; line-height: 1.25; color: #fff; } .vkm-statement { margin: 0 0 1.4rem; font-size: .875rem; line-height: 1.7; color: rgba(255, 255, 255, .88); text-align: justify; text-justify: inter-word; -webkit-hyphens: auto; hyphens: auto; } .vkm-mood { margin: 0 0 1.4rem; font-style: italic; font-size: .78rem; letter-spacing: .06em; color: rgba(255, 255, 255, .48); } .vkm-medium { margin: 0; padding-top: 1.1rem; border-top: 1px solid var(--vk-line); font-size: .66rem; font-weight: 500; letter-spacing: .18em; text-transform: uppercase; color: rgba(255, 255, 255, .6); } /* Source credit under the medium (digital works reworking a physical tile). */ .vkm-after { display: block; margin-top: .45rem; font-size: .6rem; font-weight: 400; letter-spacing: .18em; color: rgba(255, 255, 255, .4); } #vk-work-modal .vkm-nav, #vk-work-modal .vkm-close, #vk-space .vks-close { position: absolute; z-index: 2; display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; padding: 0; border: 0; background: none; color: #fff; cursor: pointer; opacity: .55; transition: opacity .25s ease; } #vk-work-modal .vkm-nav:hover, #vk-work-modal .vkm-nav:focus-visible, #vk-work-modal .vkm-close:hover, #vk-work-modal .vkm-close:focus-visible, #vk-space .vks-close:hover, #vk-space .vks-close:focus-visible { opacity: 1; } .vkm-close { top: 1rem; right: 1.2rem; } .vkm-prev { left: .6rem; top: 50%; margin-top: -22px; } .vkm-next { right: .6rem; top: 50%; margin-top: -22px; } /* Stacked layout on small screens: image above, notes below. */ @media (max-width: 860px) { .vkm-panel { flex-direction: column; align-items: stretch; gap: 1.4rem; padding: 0 1.4rem; max-height: none; width: 100%; overflow-y: auto; max-height: 100vh; max-height: 100dvh; padding-top: 4.2rem; padding-bottom: 2.5rem; } .vkm-stage img { max-height: 48vh; margin: 0 auto; } .vkm-info { flex: none; max-width: 30rem; width: 100%; margin: 0 auto; border-left: 0; border-top: 1px solid var(--vk-line); padding: 1.4rem 0 0; } .vkm-prev { left: .1rem; top: 32vh; } .vkm-next { right: .1rem; top: 32vh; } } /* ========================================================================== V Á K U U M SPACE (#vk-space): a black-void gallery corridor in CSS 3D. The world node holds one .vks-work per painting, hung alternately on the left and right walls, plus a far end wall. js/main.js drives the camera. ========================================================================== */ #vk-space { position: fixed; inset: 0; z-index: 80; background: #020202; opacity: 0; visibility: hidden; transition: opacity .6s ease, visibility 0s linear .6s; } #vk-space.open { opacity: 1; visibility: visible; transition: opacity .6s ease; } #vk-space[hidden] { display: none; } /* Soft depth: a faint pool of light in the middle distance, vignetted edges. */ .vks-fog { position: absolute; inset: 0; pointer-events: none; z-index: 1; background: radial-gradient(ellipse 90% 55% at 50% 46%, rgba(255, 255, 255, .05), transparent 65%), linear-gradient(to bottom, rgba(0, 0, 0, .78) 0%, transparent 22%, transparent 70%, rgba(0, 0, 0, .82) 100%); } .vks-top { position: absolute; top: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 1.15rem 4.6rem 1.15rem 1.5rem; /* right padding clears the close button */ } .vks-brand { margin: 0; font-size: .82rem; font-weight: 600; letter-spacing: .18em; color: rgba(255, 255, 255, .9); } .vks-brand-sub { font-weight: 300; color: rgba(255, 255, 255, .5); margin-left: .35rem; } .vks-series { display: flex; gap: 1.4rem; } .vks-series-btn { padding: .3rem 0; border: 0; background: none; cursor: pointer; font-family: inherit; font-size: .64rem; font-weight: 500; letter-spacing: .22em; text-transform: uppercase; color: rgba(255, 255, 255, .4); border-bottom: 1px solid transparent; transition: color .3s ease, border-color .3s ease; } .vks-series-btn:hover { color: rgba(255, 255, 255, .75); } .vks-series-btn.is-active { color: #fff; border-bottom-color: rgba(255, 255, 255, .6); } .vks-close { top: .8rem; right: 1rem; } .vks-viewport { position: absolute; inset: 0; z-index: 2; perspective: 1150px; overflow: hidden; cursor: grab; touch-action: none; /* the corridor owns its gestures */ } .vks-viewport.is-dragging { cursor: grabbing; } .vks-world { position: absolute; left: 50%; top: 50%; transform-style: preserve-3d; will-change: transform; } /* One hung work: float frame, spotlight from above, caption plate below, a soft reflection on the floor (WebKit/Blink; a graceful no-op elsewhere). */ .vks-work { position: absolute; left: 0; top: 0; width: var(--vks-w, 300px); margin: 0; padding: 10px; border: 1px solid rgba(255, 255, 255, .10); background: #060606; cursor: pointer; transition: opacity .8s ease, border-color .3s ease; box-shadow: 0 24px 60px rgba(0, 0, 0, .75); } .vks-work:hover, .vks-work:focus-visible { border-color: rgba(255, 255, 255, .38); } .vks-work img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; -webkit-box-reflect: below 14px linear-gradient(transparent 68%, rgba(255, 255, 255, .09)); } .vks-work::before { content: ''; position: absolute; left: 50%; bottom: 92%; transform: translateX(-50%); width: 170%; height: 70%; background: radial-gradient(ellipse 55% 90% at 50% 100%, rgba(255, 255, 255, .10), transparent 62%); pointer-events: none; } .vks-plate { display: block; margin-top: .85rem; font-size: .58rem; font-weight: 600; letter-spacing: .16em; text-transform: uppercase; color: rgba(255, 255, 255, .78); text-align: left; } .vks-plate .vks-plate-ix { font-weight: 300; color: rgba(255, 255, 255, .45); margin-right: .4rem; } /* End of the hall: the complete series as one piece (6 x 4 grid + plate). Clicking it opens a purchase inquiry mail. */ .vks-wall { position: absolute; left: 0; top: 0; width: min(74vw, 860px); margin: 0; padding: 14px; border: 1px solid rgba(255, 255, 255, .10); background: #060606; cursor: pointer; box-shadow: 0 34px 100px rgba(0, 0, 0, .82); transition: border-color .3s ease; } .vks-wall:hover, .vks-wall:focus-visible { border-color: rgba(255, 255, 255, .38); } .vks-wall::before { content: ''; position: absolute; left: 50%; bottom: 96%; transform: translateX(-50%); width: 130%; height: 55%; background: radial-gradient(ellipse 60% 90% at 50% 100%, rgba(255, 255, 255, .09), transparent 62%); pointer-events: none; } .vks-wall-grid { display: grid; grid-template-columns: repeat(6, 1fr); gap: 4px; } .vks-wall-grid img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; } .vks-wall-plate { margin-top: 1rem; padding-bottom: .2rem; text-align: center; color: rgba(255, 255, 255, .85); } .vks-wall-sub { display: block; margin-top: .4rem; font-size: .55rem; font-weight: 400; letter-spacing: .2em; text-transform: uppercase; color: rgba(255, 255, 255, .45); } @media (max-width: 640px) { .vks-wall { width: 86vw; } } /* Far behind it: the mark, barely there. */ .vks-end { position: absolute; left: 0; top: 0; font-size: clamp(3rem, 8vw, 6.5rem); font-weight: 600; letter-spacing: .08em; white-space: nowrap; color: rgba(255, 255, 255, .07); pointer-events: none; } .vks-foot { position: absolute; bottom: 0; left: 0; right: 0; z-index: 3; display: flex; align-items: center; justify-content: space-between; padding: 1.1rem 1.5rem; } .vks-hint { margin: 0; font-size: .6rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: rgba(255, 255, 255, .38); } .vks-counter { margin: 0; font-size: .66rem; font-weight: 500; letter-spacing: .22em; color: rgba(255, 255, 255, .7); } @media (max-width: 640px) { .vks-brand { display: none; } .vks-series { gap: .9rem; } .vks-hint { max-width: 62vw; } } /* ========================================================================== Small-viewport refinements ========================================================================== */ /* Portrait phones: cap the About portrait so the section stays one calm screen. */ @media (max-width: 767px) { .vk-about .vk-portrait { max-height: 34vh; margin-bottom: .5rem; } } /* Landscape phones / short windows: pull the hero stack up and shrink it so it clears the bottom chevron; compact the white footer. */ @media (max-height: 500px) { :root { --hero-top: 44%; } .hero-wordmark { font-size: clamp(2rem, 16vh, 4.5rem); } .hero-sub { font-size: 1.25rem; margin-top: .8rem; } .hero-content .send-inquiry { margin-top: 1.25rem; } #socials .p-8 { padding: 1rem; } #socials .mb-8 { margin-bottom: 1rem; } #socials .max-h-\[40vh\] { max-height: 26vh; } } /* ========================================================================== Reduced motion: skip the timed intro, all loops and slides; keep everything visible and legible. js/main.js also pauses the background video. ========================================================================== */ @media (prefers-reduced-motion: reduce) { .hero-in, .hero-fade-late, #bg-fallback, #myVideo { animation: none; opacity: 1; } .js .reveal, .js .reveal-scale { opacity: 1; transform: none; transition: none; } .scroll-hint, .vk-chevron { animation: none; } #scroll-container { scroll-behavior: auto; } .gallery-img, .send-inquiry, .vk-enter-space, #vakuum-navbar, #vk-menu, #vk-work-modal, .vkm-stage img, #vk-space, .vks-work { transition: none; } .gallery-item:hover .gallery-img, .gallery-item:focus-visible .gallery-img { transform: none; } }