/* sandbox.css (cleaned) — minimal CSS to make sandbox bg components work */ .bg, .bg-stage, .bg-page { position: absolute; inset: 0; overflow: hidden; } .bg canvas, .bg-stage canvas { display: block; width: 100% !important; height: 100% !important; } /* sandbox.css — auto-extracted from sandbox bg-N/page.tsx */ .bg, .bg-stage, .bg-page { position: absolute; inset: 0; overflow: hidden; } .bg canvas, .bg-stage canvas { display: block; width: 100% !important; height: 100% !important; } .bg-page { position: relative; } /* Floating page header */ .page-header { position: fixed; bottom: 24px; left: 24px; z-index: 90; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); mix-blend-mode: difference; pointer-events: none; } .page-header__title { font-family: var(--serif); font-size: 24px; letter-spacing: -0.02em; line-height: 1; margin: 0; color: white; mix-blend-mode: difference; } .bg-stage { position: absolute; inset: 0; } .bg { position: absolute; inset: 0; overflow: hidden; } .caption { position: relative; z-index: 5; padding: 28px 40px; background: rgba(10, 9, 8, 0.5); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; color: white; max-width: 460px; margin: 24px; } .caption--light { background: rgba(255, 255, 255, 0.7); border-color: rgba(20, 20, 19, 0.08); color: #141413; } .caption__src { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; } .caption__title { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.02em; margin: 0 0 10px; } .caption__desc { font-size: 14px; opacity: 0.75; line-height: 1.5; margin: 0; } /* ========== 1. MESH GRADIENT — FAST ========== */ .mesh-blob { position: absolute; border-radius: 50%; filter: blur(70px); mix-blend-mode: multiply; will-change: transform; } .mesh-blob--1 { width: 70vw; height: 70vw; left: -10vw; top: -20vh; background: radial-gradient(circle, var(--mesh-c1, rgba(184,148,101,0.7)), transparent 60%); animation: drift1 calc(9s * var(--mesh-speed, 1)) ease-in-out infinite; } .mesh-blob--2 { width: 60vw; height: 60vw; right: -15vw; top: 10vh; background: radial-gradient(circle, var(--mesh-c2, rgba(232,196,207,0.8)), transparent 60%); animation: drift2 calc(11s * var(--mesh-speed, 1)) ease-in-out infinite; } .mesh-blob--3 { width: 55vw; height: 55vw; left: 30vw; bottom: -20vh; background: radial-gradient(circle, var(--mesh-c3, rgba(180,200,184,0.75)), transparent 60%); animation: drift3 calc(10s * var(--mesh-speed, 1)) ease-in-out infinite; } .mesh-blob--4 { width: 45vw; height: 45vw; left: -10vw; bottom: 5vh; background: radial-gradient(circle, var(--mesh-c4, rgba(200,216,232,0.7)), transparent 60%); animation: drift4 calc(12s * var(--mesh-speed, 1)) ease-in-out infinite; } .mesh-blob--5 { width: 35vw; height: 35vw; right: 5vw; bottom: 20vh; background: radial-gradient(circle, var(--mesh-c5, rgba(243,200,168,0.6)), transparent 60%); animation: drift5 calc(8s * var(--mesh-speed, 1)) ease-in-out infinite; } .mesh-blob--6 { width: 40vw; height: 40vw; left: 40vw; top: 30vh; background: radial-gradient(circle, var(--mesh-c6, rgba(212,165,116,0.55)), transparent 60%); animation: drift6 calc(7s * var(--mesh-speed, 1)) ease-in-out infinite; } .mesh-blob--7 { width: 30vw; height: 30vw; right: 30vw; top: -10vh; background: radial-gradient(circle, var(--mesh-c7, rgba(255,210,175,0.6)), transparent 60%); animation: drift7 calc(13s * var(--mesh-speed, 1)) ease-in-out infinite; } .mesh-noise { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.07; mix-blend-mode: multiply; } @keyframes drift1 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(15vw, 18vh, 0) scale(1.15); } } @keyframes drift2 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-18vw, -12vh, 0) scale(0.85); } } @keyframes drift3 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-12vw, 18vh, 0) scale(1.18); } } @keyframes drift4 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(20vw, -14vh, 0) scale(0.9); } } @keyframes drift5 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-14vw, 22vh, 0) scale(1.1); } } @keyframes drift6 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(12vw, -20vh, 0) scale(1.2); } } @keyframes drift7 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-22vw, 14vh, 0) scale(0.85); } } /* 2. RETRO */ .retro-sky { position: absolute; inset: 0 0 50% 0; background: radial-gradient(ellipse at 50% 100%, var(--retro-sky-horizon, rgba(255,80,170,0.4)), transparent 60%), radial-gradient(ellipse at 30% 80%, var(--retro-sky-top, rgba(120,60,220,0.5)), transparent 50%); } .retro-sun { position: absolute; left: 50%; bottom: 45%; width: 380px; height: 380px; transform: translateX(-50%); background: radial-gradient(circle, var(--retro-sun-top, #ff6abc), var(--retro-sun-bottom, #ff2d8a) 50%, transparent 70%); filter: blur(2px); border-radius: 50%; box-shadow: 0 0 80px 10px rgba(255,100,180,0.5); } .retro-sun::before { content:''; position: absolute; left:0; right:0; top:50%; height:4px; background: rgba(10,8,32,1); box-shadow: 0 14px 0 0 rgba(10,8,32,1), 0 28px 0 0 rgba(10,8,32,1), 0 44px 0 0 rgba(10,8,32,1), 0 64px 0 0 rgba(10,8,32,1); } .retro-grid { position: absolute; left: -50%; right: -50%; bottom: -50%; height: 100%; background-image: linear-gradient(var(--retro-grid-color, rgba(255,0,200,0.5)) 1px, transparent 1px), linear-gradient(90deg, var(--retro-grid-color, rgba(255,0,200,0.5)) 1px, transparent 1px); background-size: 60px 60px; transform: perspective(400px) rotateX(60deg); transform-origin: 50% 0%; animation: retro-scroll 4s linear infinite; } @keyframes retro-scroll { to { background-position: 0 60px; } } /* 3. STARS / 4. BLOB / 6. BUBBLES — общие R3F */ .bg-stars canvas, .bg-blob canvas, .bg-bubbles canvas, .bg-iridescent canvas, .bg-stripe-mesh canvas { display: block; width: 100% !important; height: 100% !important; } .blob-vignette { position: absolute; inset: 0; background: radial-gradient(circle, transparent 30%, rgba(10,9,8,0.7) 90%); pointer-events: none; } /* 5. AURORA */ /* aurora curtain — blend и blur через CSS-переменные, чтобы light-сайт мог переопределить */ .aurora-curtain { position: absolute; inset: 0; mix-blend-mode: var(--aurora-blend, screen); opacity: var(--aurora-opacity, 0.7); filter: blur(var(--aurora-blur, 60px)); will-change: transform; } .aurora-curtain--1 { background: linear-gradient(135deg, transparent 30%, var(--aurora-c1, rgba(80,220,160,0.5)) 50%, transparent 70%); animation: aurora-shift1 calc(12s * var(--aurora-speed, 1)) ease-in-out infinite; } .aurora-curtain--2 { background: linear-gradient(45deg, transparent 30%, var(--aurora-c2, rgba(120,80,220,0.4)) 50%, transparent 70%); animation: aurora-shift2 calc(16s * var(--aurora-speed, 1)) ease-in-out infinite; } .aurora-curtain--3 { background: linear-gradient(60deg, transparent 40%, var(--aurora-c3, rgba(255,180,100,0.3)) 60%, transparent 80%); animation: aurora-shift3 calc(20s * var(--aurora-speed, 1)) ease-in-out infinite; } @keyframes aurora-shift1 { 0%,100% { transform: translate3d(-30%,0,0) skew(-15deg); } 50% { transform: translate3d(30%,0,0) skew(15deg); } } @keyframes aurora-shift2 { 0%,100% { transform: translate3d(20%,-10%,0) skew(10deg); } 50% { transform: translate3d(-20%,10%,0) skew(-10deg); } } @keyframes aurora-shift3 { 0%,100% { transform: translate3d(-10%,20%,0) skew(-5deg); } 50% { transform: translate3d(20%,-20%,0) skew(20deg); } } .aurora-stars { position: absolute; inset: 0; } .aurora-star { position: absolute; width: 1.5px; height: 1.5px; background: var(--aurora-star-color, white); border-radius: 50%; animation: twinkle ease-in-out infinite; } @keyframes twinkle { 0%,100% { opacity: 0.2; } 50% { opacity: 1; } } /* 6. VORTEX */ .vortex-canvas { width: 100%; height: 100%; display: block; } /* 7. IRIDESCENT */ /* 8. DOTS */ .dots-wrap { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(40, 1fr); grid-template-rows: repeat(24, 1fr); padding: 40px; gap: 0; } .bg-dots { background: var(--dot-bg, transparent); } .dot { align-self: center; justify-self: center; width: 4px; height: 4px; background: var(--dot-color, var(--gold)); border-radius: 50%; opacity: 0.2; animation: dot-pulse calc(3.6s * var(--dot-speed, 1)) ease-in-out infinite; } @keyframes dot-pulse { 0%,100% { opacity: 0.15; transform: scale(0.8); } 50% { opacity: 1; transform: scale(1.4); box-shadow: 0 0 8px 2px rgba(184,148,101,0.4); } } /* 9. STRIPE MESH WebGL */ /* 10. CAUSTICS */ .caustics-layer { position: absolute; inset: -10%; mix-blend-mode: screen; opacity: 0.85; } .caustics-layer--1 { background: radial-gradient(circle at 30% 30%, var(--caustics-c1, rgba(160, 220, 255, 0.5)) 0%, transparent 30%), radial-gradient(circle at 70% 60%, var(--caustics-c1, rgba(180, 240, 255, 0.5)) 0%, transparent 30%), radial-gradient(circle at 50% 80%, var(--caustics-c1, rgba(140, 200, 255, 0.5)) 0%, transparent 30%); animation: caustics-1 calc(6s * var(--caustics-speed, 1)) ease-in-out infinite; } .caustics-layer--2 { background: radial-gradient(circle at 50% 30%, var(--caustics-c2, rgba(200, 240, 255, 0.5)) 0%, transparent 25%), radial-gradient(circle at 80% 70%, var(--caustics-c2, rgba(160, 230, 255, 0.5)) 0%, transparent 28%), radial-gradient(circle at 20% 50%, var(--caustics-c2, rgba(180, 230, 255, 0.5)) 0%, transparent 25%); animation: caustics-2 calc(8s * var(--caustics-speed, 1)) ease-in-out infinite reverse; filter: blur(2px); } .caustics-layer--3 { background: radial-gradient(circle at 40% 70%, var(--caustics-c3, rgba(220, 250, 255, 0.4)) 0%, transparent 20%), radial-gradient(circle at 60% 20%, var(--caustics-c3, rgba(200, 240, 255, 0.4)) 0%, transparent 22%); animation: caustics-3 calc(10s * var(--caustics-speed, 1)) ease-in-out infinite; } @keyframes caustics-1 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(40px, 20px, 0) scale(1.1); } } @keyframes caustics-2 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-40px, -30px, 0) scale(0.92); } } @keyframes caustics-3 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(20px, -25px, 0) scale(1.05); } } /* 13. LIQUID MORPH */ .liquid-blob { position: absolute; border-radius: 50%; filter: blur(60px); mix-blend-mode: color; will-change: transform; } .liquid-blob--a { width: 60vw; height: 60vw; left: -10vw; top: -10vh; background: radial-gradient(circle, var(--liquid-c1, #ff6b9d), transparent 60%); animation: liquid-a calc(5s * var(--liquid-speed, 1)) ease-in-out infinite; } .liquid-blob--b { width: 55vw; height: 55vw; right: -10vw; top: 20vh; background: radial-gradient(circle, var(--liquid-c2, #4dd0e1), transparent 60%); animation: liquid-b calc(7s * var(--liquid-speed, 1)) ease-in-out infinite; } .liquid-blob--c { width: 50vw; height: 50vw; left: 20vw; bottom: -10vh; background: radial-gradient(circle, var(--liquid-c3, #ffeb3b), transparent 60%); animation: liquid-c calc(6s * var(--liquid-speed, 1)) ease-in-out infinite; } .liquid-blob--d { width: 45vw; height: 45vw; right: 25vw; bottom: 10vh; background: radial-gradient(circle, var(--liquid-c4, #ab47bc), transparent 60%); animation: liquid-d calc(8s * var(--liquid-speed, 1)) ease-in-out infinite; } @keyframes liquid-a { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(20vw, 25vh, 0) scale(1.2); } } @keyframes liquid-b { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-25vw, -10vh, 0) scale(0.85); } } @keyframes liquid-c { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(15vw, -25vh, 0) scale(1.15); } } @keyframes liquid-d { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-20vw, 18vh, 0) scale(0.9); } } /* 15. WAVY SVG */ .wavy-svg { position: absolute; inset: 0; width: 100%; height: 100%; } .wavy-path { stroke-dasharray: 2000; stroke-dashoffset: 0; animation: wavy calc(8s * var(--wavy-speed, 1)) linear infinite; } .wavy-path--1 { animation-duration: calc(6s * var(--wavy-speed, 1)); } .wavy-path--2 { animation-duration: calc(9s * var(--wavy-speed, 1)); animation-direction: reverse; } .wavy-path--3 { animation-duration: calc(12s * var(--wavy-speed, 1)); } @keyframes wavy { from { stroke-dashoffset: 4000; } to { stroke-dashoffset: 0; } } .bg-page { position: relative; } .page-header { position: fixed; bottom: 24px; left: 24px; z-index: 90; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); mix-blend-mode: difference; pointer-events: none; } .page-header__title { font-family: var(--serif); font-size: 24px; letter-spacing: -0.02em; line-height: 1; margin: 0; color: white; mix-blend-mode: difference; } .bg-stage { position: absolute; inset: 0; } .bg { position: absolute; inset: 0; overflow: hidden; } .caption { position: relative; z-index: 5; padding: 28px 40px; background: rgba(10, 9, 8, 0.55); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; color: white; max-width: 460px; margin: 24px; } .caption--light { background: rgba(255, 255, 255, 0.7); border-color: rgba(20, 20, 19, 0.08); color: #141413; } .caption__src { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; } .caption__title { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.02em; margin: 0 0 10px; } .caption__desc { font-size: 14px; opacity: 0.75; line-height: 1.5; margin: 0; } .wavy-canvas { width: 100%; height: 100%; display: block; } .bg-globe canvas, .bg-wavy canvas { display: block; width: 100% !important; height: 100% !important; } .lines-svg, .beam-svg { width: 100%; height: 100%; } /* === BOXES === CSS-vars для bg_2 BackgroundBoxes — позволяют менять цвета без правки CSS. Дефолты совпадают со старыми хардкодами (обратная совместимость). */ .boxes-grid { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(var(--boxes-cols, 30), 1fr); grid-template-rows: repeat(var(--boxes-rows, 18), 1fr); } .boxes-cell { border: 1px solid var(--boxes-border, rgba(184, 148, 101, 0.12)); transition: background 300ms var(--ease-out), border-color 300ms var(--ease-out); } .boxes-cell:hover { background: var(--boxes-hover-bg, rgba(184, 148, 101, 0.18)); border-color: var(--boxes-hover-border, rgba(184, 148, 101, 0.5)); transition: background 80ms var(--ease-out), border-color 80ms var(--ease-out); } .boxes-mask { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 30%, var(--boxes-mask-edge, rgba(10, 9, 8, 0.85)) 90%); pointer-events: none; } /* === LINES === */ .lines-path { stroke-dasharray: 800; stroke-dashoffset: 800; animation: line-draw infinite linear; } @keyframes line-draw { 0% { stroke-dashoffset: 800; } 50% { stroke-dashoffset: 0; } 100% { stroke-dashoffset: -800; } } /* === WAVY === */ /* === DOT PATTERN === */ .dotpattern-bg { position: absolute; inset: 0; background-image: radial-gradient(var(--dotpattern-color, rgba(184, 148, 101, 0.7)) var(--dotpattern-size, 1.5px), transparent var(--dotpattern-size, 1.5px)); background-size: var(--dotpattern-step, 20px) var(--dotpattern-step, 20px); } .dotpattern-mask { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 0%, var(--dotpattern-mask-edge, rgba(250, 248, 242, 0.95)) 70%); pointer-events: none; } /* === GRID PATTERN === */ .gridpattern-bg { position: absolute; inset: 0; background-image: linear-gradient(var(--gridpattern-line, rgba(20, 20, 19, 0.06)) 1px, transparent 1px), linear-gradient(90deg, var(--gridpattern-line, rgba(20, 20, 19, 0.06)) 1px, transparent 1px); background-size: var(--gridpattern-step, 40px) var(--gridpattern-step, 40px); } .gridpattern-mask { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 0%, var(--gridpattern-mask-edge, rgba(255, 255, 255, 0.85)) 70%); pointer-events: none; } /* === ANIMATED GRID === */ .anim-grid-cells { position: absolute; inset: 0; display: grid; } .anim-grid-cell { background: var(--anim-grid-base, rgba(184, 148, 101, 0.08)); border: 1px solid var(--anim-grid-border, rgba(184, 148, 101, 0.04)); animation: anim-grid-flicker ease-in-out infinite; } @keyframes anim-grid-flicker { 0%, 100% { background: var(--anim-grid-base, rgba(184, 148, 101, 0.04)); } 50% { background: var(--anim-grid-peak, rgba(184, 148, 101, 0.35)); border-color: var(--anim-grid-peak-border, rgba(184, 148, 101, 0.5)); } } /* === BEAM === */ .beam-svg { padding: 24px; } .beam-flow { animation: beam-trip 4s linear infinite; } @keyframes beam-trip { from { stroke-dashoffset: 2000; } to { stroke-dashoffset: 0; } } /* === GLOBE === */ /* === VORTEX ACE === */ .bg-page { position: relative; } .page-header { position: fixed; bottom: 24px; left: 24px; z-index: 90; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); mix-blend-mode: difference; pointer-events: none; } .page-header__title { font-family: var(--serif); font-size: 24px; letter-spacing: -0.02em; line-height: 1; margin: 0; color: white; mix-blend-mode: difference; } .bg-stage { position: absolute; inset: 0; } .bg { position: absolute; inset: 0; overflow: hidden; } .caption { position: relative; z-index: 5; padding: 28px 40px; background: rgba(10, 9, 8, 0.55); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; color: white; max-width: 460px; margin: 24px; } .caption--light { background: rgba(255, 255, 255, 0.7); border-color: rgba(20,20,19,0.08); color: #141413; } .caption__src { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; } .caption__title { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.02em; margin: 0 0 10px; } .caption__desc { font-size: 14px; opacity: 0.75; line-height: 1.5; margin: 0; } .full-canvas { width: 100%; height: 100%; display: block; } /* === DRIFTING NOISE === */ .noise-svg { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0.4; } .noise-overlay { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 30%, rgba(10,9,8,0.85) 95%); pointer-events: none; } /* === CONIC CAROUSEL === */ .conic-layer { position: absolute; inset: -50%; mix-blend-mode: screen; opacity: 0.7; filter: blur(20px); } .conic-layer--1 { background: conic-gradient(from 0deg, transparent, var(--conic-c1a, #B89465), transparent 60%, var(--conic-c1b, #FFD49A), transparent); animation: conic-spin1 30s linear infinite; } .conic-layer--2 { background: conic-gradient(from 90deg, transparent, var(--conic-c2a, #4dd0e1), transparent 70%, var(--conic-c2b, #B6C8B8), transparent); animation: conic-spin2 45s linear infinite reverse; } .conic-layer--3 { background: conic-gradient(from 180deg, transparent, var(--conic-c3a, #E8C4CF), transparent 65%, var(--conic-c3b, #ab47bc), transparent); animation: conic-spin1 60s linear infinite; } .conic-vignette { position: absolute; inset: 0; background: radial-gradient(circle, transparent 30%, var(--conic-vignette-edge, #0a0908) 100%); pointer-events: none; } @keyframes conic-spin1 { to { transform: rotate(360deg); } } @keyframes conic-spin2 { to { transform: rotate(-360deg); } } /* === STRIPES === */ .stripes-layer { position: absolute; inset: -50%; } .stripes-layer--coarse { background-image: repeating-linear-gradient(45deg, transparent 0, transparent 40px, var(--stripes-coarse, rgba(184,148,101,0.18)) 40px, var(--stripes-coarse, rgba(184,148,101,0.18)) 42px); animation: stripe-shift1 12s linear infinite; } .stripes-layer--mid { background-image: repeating-linear-gradient(45deg, transparent 0, transparent 18px, var(--stripes-mid, rgba(184,148,101,0.12)) 18px, var(--stripes-mid, rgba(184,148,101,0.12)) 19px); animation: stripe-shift2 8s linear infinite reverse; } .stripes-layer--fine { background-image: repeating-linear-gradient(45deg, transparent 0, transparent 6px, var(--stripes-fine, rgba(184,148,101,0.08)) 6px, var(--stripes-fine, rgba(184,148,101,0.08)) 7px); animation: stripe-shift1 4s linear infinite; } @keyframes stripe-shift1 { to { transform: translate3d(60px, 60px, 0); } } @keyframes stripe-shift2 { to { transform: translate3d(-60px, -60px, 0); } } /* === BOIDS === */ /* === CONFETTI === */ /* === MATRIX === */ /* === WAVE TILES === */ .wave-tiles-grid { position: absolute; inset: 0; display: grid; padding: 32px; gap: 0; } .wave-tile { align-self: stretch; justify-self: stretch; background: var(--wave-tile-bg, rgba(184, 148, 101, 0.12)); border: 1px solid var(--wave-tile-bord, rgba(184, 148, 101, 0.06)); animation: wave-tile-pulse 2.6s ease-in-out infinite; } @keyframes wave-tile-pulse { 0%, 100% { opacity: 0.15; transform: scale(0.98); } 50% { opacity: 0.9; transform: scale(1); background: var(--wave-tile-peak, rgba(184, 148, 101, 0.4)); } } /* === HEX === */ .bg-hex { padding: 0; overflow: hidden;} .hex-grid { position: absolute; inset: -50px; display: flex; flex-direction: column; align-items: center; } .hex-row { display: flex; gap: 12px; margin-top: -33px; } .hex { width: 100px; height: 116px; background: var(--hex-base, rgba(184, 148, 101, 0.15)); clip-path: polygon(50% 0%, 100% 25%, 100% 75%, 50% 100%, 0% 75%, 0% 25%); animation: hex-pulse 3s ease-in-out infinite; } @keyframes hex-pulse { 0%, 100% { background: var(--hex-base, rgba(184, 148, 101, 0.08)); transform: scale(0.96); } 50% { background: var(--hex-peak, rgba(184, 148, 101, 0.55)); transform: scale(1); } } .bg-page { position: relative; } .page-header { position: fixed; bottom: 24px; left: 24px; z-index: 90; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); mix-blend-mode: difference; pointer-events: none; } .page-header__title { font-family: var(--serif); font-size: 24px; letter-spacing: -0.02em; line-height: 1; margin: 0; color: white; mix-blend-mode: difference; } .bg-stage { position: absolute; inset: 0; } .bg { position: absolute; inset: 0; overflow: hidden; } .caption { position: relative; z-index: 5; padding: 28px 40px; background: rgba(10,9,8,0.55); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; color: white; max-width: 460px; margin: 24px; } .caption--light { background: rgba(255,255,255,0.7); border-color: rgba(20,20,19,0.08); color: #141413; } .caption__src { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; } .caption__title { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.02em; margin: 0 0 10px; } .caption__desc { font-size: 14px; opacity: 0.75; line-height: 1.5; margin: 0; } .caption-pin { position: sticky; top: 50vh; z-index: 5; transform: translateY(-50%); display: flex; justify-content: flex-start; padding: 0 24px; } canvas { display: block !important; width: 100% !important; height: 100% !important; } /* === SECTION helpers for scroll-driven (PagePin3D / ScrollCam) === */ .section { position: relative; } .section--tall { min-height: 250vh; } .bg-pin-3d { position: sticky; top: 0; height: 100vh; overflow: hidden; } /* === CAUSTIC === */ /* === AURORA GLSL === */ /* === VORTEX 3D === */ /* === SCROLL CAM === */ .progress-bar { margin-top: 16px; height: 2px; background: rgba(255,255,255,0.1); border-radius: 999px; overflow: hidden; } .progress-bar__fill { height: 100%; background: var(--gold); transition: width 80ms linear; } /* === TRANSMISSION === */ /* === PLASMA === */ /* === GLITCH === */ .bg-page { position: relative; } .page-header { position: fixed; bottom: 24px; left: 24px; z-index: 90; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); mix-blend-mode: difference; pointer-events: none; } .page-header__title { font-family: var(--serif); font-size: 24px; letter-spacing: -0.02em; line-height: 1; margin: 0; color: white; mix-blend-mode: difference; } .bg-stage { position: absolute; inset: 0; } .bg { position: absolute; inset: 0; overflow: hidden; } .caption { position: relative; z-index: 5; padding: 28px 40px; background: rgba(10,9,8,0.55); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; color: white; max-width: 460px; margin: 24px; } .caption--light { background: rgba(255,255,255,0.7); border-color: rgba(20,20,19,0.08); color: #141413; } .caption__src { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; } .caption__title { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.02em; margin: 0 0 10px; } .caption__desc { font-size: 14px; opacity: 0.75; line-height: 1.5; margin: 0; } .caption-pin { position: sticky; top: 50vh; z-index: 5; transform: translateY(-50%); display: flex; justify-content: flex-start; padding: 0 24px; } .progress-bar { margin-top: 16px; height: 2px; background: rgba(255,255,255,0.1); border-radius: 999px; overflow: hidden; } .progress-bar__fill { height: 100%; background: var(--gold); transition: width 80ms linear; } canvas { display: block !important; width: 100% !important; height: 100% !important; } .full-canvas { width: 100%; height: 100%; display: block; } /* === SVG PATH === */ .path-svg { width: 100%; height: 100%; padding: 40px; } /* === PIN 3D === */ /* === FOIL === */ .foil-base { position: absolute; inset: -40%; background: conic-gradient(from 0deg, #ff4d6d 0%, #ff8a4d 14%, #ffd44d 28%, #4dff8a 42%, #4dc4ff 57%, #8a4dff 71%, #ff4dc4 85%, #ff4d6d 100%); filter: saturate(1.5) blur(40px); animation: foil-spin 5s linear infinite; } @keyframes foil-spin { to { transform: rotate(360deg); } } .foil-sheen { position: absolute; inset: 0; background: linear-gradient(120deg, transparent 35%, rgba(255,255,255,0.35) 50%, transparent 65%); mix-blend-mode: overlay; animation: foil-sheen 4s ease-in-out infinite alternate; } @keyframes foil-sheen { from { transform: translate3d(-30%, -30%, 0); } to { transform: translate3d(30%, 30%, 0); } } .foil-grain { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.5' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.6 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.15; mix-blend-mode: multiply; } /* === FLUID === */ /* === POSTFX === */ /* === PARALLAX === */ .parallax-layer { position: absolute; left: 0; right: 0; bottom: 0; height: 70%; will-change: transform; } .parallax-layer--sky { top: 0; bottom: auto; height: 100%; background: radial-gradient(ellipse at 50% 30%, rgba(255, 220, 150, 0.35), transparent 60%); } .parallax-layer svg { width: 100%; height: 100%; display: block; } .parallax-stars { position: absolute; inset: 0; pointer-events: none; } .parallax-star { position: absolute; width: 1.5px; height: 1.5px; background: white; border-radius: 50%; animation: twinkle ease-in-out infinite; animation-duration: 2s; } @keyframes twinkle { 0%, 100% { opacity: 0.2; } 50% { opacity: 1; } } /* === PIXEL SORT === */ .bg-page { position: relative; } .page-header { position: fixed; bottom: 24px; left: 24px; z-index: 90; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); mix-blend-mode: difference; pointer-events: none; } .page-header__title { font-family: var(--serif); font-size: 24px; letter-spacing: -0.02em; line-height: 1; margin: 0; color: white; mix-blend-mode: difference; } .bg-stage { position: absolute; inset: 0; } .bg { position: absolute; inset: 0; overflow: hidden; } .caption { position: relative; z-index: 5; padding: 28px 40px; background: rgba(10,9,8,0.55); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; color: white; max-width: 460px; margin: 24px; } .caption--light { background: rgba(255,255,255,0.7); border-color: rgba(20,20,19,0.08); color: #141413; } .caption__src { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; } .caption__title { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.02em; margin: 0 0 10px; } .caption__desc { font-size: 14px; opacity: 0.75; line-height: 1.5; margin: 0; } .full-canvas { width: 100%; height: 100%; display: block; } /* === SNOW === */ /* === RAIN === */ /* === FIREFLIES === */ /* === PETALS === */ /* === WATERCOLOR === */ .wc-paper { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 400 400' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='paper'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.04' numOctaves='5' seed='5'/%3E%3CfeColorMatrix values='0 0 0 0 0.85 0 0 0 0 0.78 0 0 0 0 0.68 0 0 0 0.5 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23paper)'/%3E%3C/svg%3E"); opacity: 0.4; } .wc-blob { position: absolute; border-radius: 50%; filter: blur(40px); mix-blend-mode: multiply; } .wc-blob--1 { width: 50vw; height: 50vw; left: -10vw; top: -15vh; background: radial-gradient(circle, rgba(220, 100, 90, 0.6) 0%, rgba(220, 100, 90, 0.2) 50%, transparent 70%); animation: wc-drift1 22s ease-in-out infinite; } .wc-blob--2 { width: 45vw; height: 45vw; right: -10vw; top: 5vh; background: radial-gradient(circle, rgba(100, 130, 200, 0.5) 0%, rgba(100, 130, 200, 0.2) 50%, transparent 70%); animation: wc-drift2 26s ease-in-out infinite; } .wc-blob--3 { width: 40vw; height: 40vw; left: 30vw; bottom: -10vh; background: radial-gradient(circle, rgba(180, 200, 100, 0.55) 0%, rgba(180, 200, 100, 0.2) 50%, transparent 70%); animation: wc-drift3 28s ease-in-out infinite; } .wc-blob--4 { width: 35vw; height: 35vw; left: 5vw; bottom: 10vh; background: radial-gradient(circle, rgba(220, 180, 100, 0.5) 0%, rgba(220, 180, 100, 0.2) 50%, transparent 70%); animation: wc-drift4 24s ease-in-out infinite; } .wc-blob--5 { width: 30vw; height: 30vw; right: 15vw; bottom: 20vh; background: radial-gradient(circle, rgba(170, 90, 130, 0.5) 0%, rgba(170, 90, 130, 0.2) 50%, transparent 70%); animation: wc-drift5 30s ease-in-out infinite; } .wc-blob--6 { width: 25vw; height: 25vw; left: 50vw; top: 30vh; background: radial-gradient(circle, rgba(120, 200, 200, 0.45) 0%, rgba(120, 200, 200, 0.2) 50%, transparent 70%); animation: wc-drift6 20s ease-in-out infinite; } .wc-paper-overlay { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='roughen'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.2' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0.4 0 0 0 0 0.3 0 0 0 0 0.25 0 0 0 0.7 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23roughen)'/%3E%3C/svg%3E"); opacity: 0.15; mix-blend-mode: multiply; } @keyframes wc-drift1 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(15vw, 12vh, 0) scale(1.1); } } @keyframes wc-drift2 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-12vw, 18vh, 0) scale(0.9); } } @keyframes wc-drift3 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-18vw, -12vh, 0) scale(1.1); } } @keyframes wc-drift4 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(20vw, -15vh, 0) scale(0.95); } } @keyframes wc-drift5 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(-12vw, -20vh, 0) scale(1.15); } } @keyframes wc-drift6 { 0%,100% { transform: translate3d(0,0,0) scale(1); } 50% { transform: translate3d(15vw, 15vh, 0) scale(0.9); } } /* === VORONOI === */ /* === PENDULUM === */ /* === KALEIDO === */ .bg-page { position: relative; } .page-header { position: fixed; bottom: 24px; left: 24px; z-index: 90; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); mix-blend-mode: difference; pointer-events: none; } .page-header__title { font-family: var(--serif); font-size: 24px; letter-spacing: -0.02em; line-height: 1; margin: 0; color: white; mix-blend-mode: difference; } .bg-stage { position: absolute; inset: 0; } .bg { position: absolute; inset: 0; overflow: hidden; } .caption { position: relative; z-index: 5; padding: 28px 40px; background: rgba(10,9,8,0.55); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; color: white; max-width: 460px; margin: 24px; } .caption__src { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; } .caption__title { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.02em; margin: 0 0 10px; } .caption__desc { font-size: 14px; opacity: 0.75; line-height: 1.5; margin: 0; } .full-canvas { width: 100%; height: 100%; display: block; } .bg-page { position: relative; } .page-header { position: fixed; bottom: 24px; left: 24px; z-index: 90; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); mix-blend-mode: difference; pointer-events: none; } .page-header__title { font-family: var(--serif); font-size: 24px; letter-spacing: -0.02em; line-height: 1; margin: 0; color: white; mix-blend-mode: difference; } .bg-stage { position: absolute; inset: 0; } .bg { position: absolute; inset: 0; overflow: hidden; } .caption { position: relative; z-index: 5; padding: 28px 40px; background: rgba(10,9,8,0.55); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; color: white; max-width: 460px; margin: 24px; } .caption__src { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; } .caption__title { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.02em; margin: 0 0 10px; } .caption__desc { font-size: 14px; opacity: 0.75; line-height: 1.5; margin: 0; } .full-canvas { width: 100%; height: 100%; display: block; } .leak { position: absolute; inset: -50%; mix-blend-mode: screen; filter: blur(80px); opacity: 0.7; } .leak--1 { background: radial-gradient(ellipse at 30% 40%, rgba(255, 80, 60, 0.7), transparent 50%); animation: leak-shift1 8s ease-in-out infinite; } .leak--2 { background: radial-gradient(ellipse at 70% 30%, rgba(120, 80, 220, 0.6), transparent 50%); animation: leak-shift2 11s ease-in-out infinite; } .leak--3 { background: radial-gradient(ellipse at 50% 70%, rgba(255, 220, 100, 0.5), transparent 50%); animation: leak-shift3 9s ease-in-out infinite; } .leak--4 { background: radial-gradient(ellipse at 20% 80%, rgba(80, 200, 120, 0.5), transparent 50%); animation: leak-shift1 13s ease-in-out infinite reverse; } @keyframes leak-shift1 { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(40%, 30%, 0); } } @keyframes leak-shift2 { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(-30%, 40%, 0); } } @keyframes leak-shift3 { 0%,100% { transform: translate3d(0,0,0); } 50% { transform: translate3d(20%, -30%, 0); } } .leak-grain { position: absolute; inset: 0; background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='1.8' numOctaves='3'/%3E%3CfeColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 0.4 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); opacity: 0.18; mix-blend-mode: overlay; } .bg-page { position: relative; } .page-header { position: fixed; bottom: 24px; left: 24px; z-index: 90; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); mix-blend-mode: difference; pointer-events: none; } .page-header__title { font-family: var(--serif); font-size: 24px; letter-spacing: -0.02em; line-height: 1; margin: 0; color: white; mix-blend-mode: difference; } .bg-stage { position: absolute; inset: 0; } .bg { position: absolute; inset: 0; overflow: hidden; } .caption { position: relative; z-index: 5; padding: 28px 40px; background: rgba(10,9,8,0.55); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; color: white; max-width: 460px; margin: 24px; } .caption--light { background: rgba(255,255,255,0.7); border-color: rgba(20,20,19,0.08); color: #141413; } .caption__src { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; } .caption__title { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.02em; margin: 0 0 10px; } .caption__desc { font-size: 14px; opacity: 0.75; line-height: 1.5; margin: 0; } .full-canvas { width: 100%; height: 100%; display: block; } canvas { display: block !important; } .bg-dna canvas, .bg-wireframe canvas { width: 100% !important; height: 100% !important; } .bg-page { position: relative; } .page-header { position: fixed; bottom: 24px; left: 24px; z-index: 90; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255,255,255,0.6); mix-blend-mode: difference; pointer-events: none; } .page-header__title { font-family: var(--serif); font-size: 24px; letter-spacing: -0.02em; line-height: 1; margin: 0; color: white; mix-blend-mode: difference; } .bg-stage { position: absolute; inset: 0; } .bg { position: absolute; inset: 0; overflow: hidden; } .caption { position: relative; z-index: 5; padding: 28px 40px; background: rgba(10,9,8,0.55); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; color: white; max-width: 460px; margin: 24px; } .caption--light { background: rgba(255,255,255,0.7); border-color: rgba(20,20,19,0.08); color: #141413; } .caption__src { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; } .caption__title { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.02em; margin: 0 0 10px; } .caption__desc { font-size: 14px; opacity: 0.75; line-height: 1.5; margin: 0; } .full-canvas { width: 100%; height: 100%; display: block; } /* === ORIGAMI === */ .origami-paper { position: absolute; left: 50%; top: 50%; width: 280px; height: 280px; margin: -140px 0 0 -140px; background: linear-gradient(135deg, #FFD49A, #B89465); transform-origin: center; animation: origami-fold 8s ease-in-out infinite; box-shadow: 0 10px 40px rgba(184, 148, 101, 0.3); } .origami-paper--2 { background: linear-gradient(135deg, #E8C4CF, #B89465); } .origami-paper--3 { background: linear-gradient(135deg, #B6C8B8, #4dc4ff); } .origami-paper--4 { background: linear-gradient(135deg, #C8D8E8, #FFD49A); } .origami-paper--5 { background: linear-gradient(135deg, #F3C8A8, #ab47bc); } @keyframes origami-fold { 0% { transform: rotate(0deg) scale(1) skewX(0deg) skewY(0deg); border-radius: 0; } 25% { transform: rotate(45deg) scale(0.7) skewX(20deg) skewY(0deg); border-radius: 20% 0 0 0; } 50% { transform: rotate(90deg) scale(0.5) skewX(0deg) skewY(20deg); border-radius: 30% 0 30% 0; } 75% { transform: rotate(135deg) scale(0.8) skewX(-15deg) skewY(0deg); border-radius: 0 30% 0 30%; } 100% { transform: rotate(180deg) scale(1) skewX(0deg) skewY(0deg); border-radius: 0; } } .bg-page { position: relative; } /* === Custom cursor === */ .cursor-dot { position: fixed; top: 0; left: 0; width: 8px; height: 8px; border-radius: 50%; background: white; mix-blend-mode: difference; pointer-events: none; z-index: 200; transform: translate3d(-50%, -50%, 0); transition: width 200ms var(--ease-out), height 200ms var(--ease-out); } .cursor-ring { position: fixed; top: 0; left: 0; width: 36px; height: 36px; border: 1px solid var(--gold); border-radius: 50%; mix-blend-mode: difference; pointer-events: none; z-index: 199; transform: translate3d(-50%, -50%, 0); } /* === Floating page header === */ .page-header { position: fixed; bottom: 24px; left: 24px; z-index: 90; font-family: var(--mono); font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: rgba(255, 255, 255, 0.6); mix-blend-mode: difference; pointer-events: none; } .page-header__title { font-family: var(--serif); font-size: 24px; letter-spacing: -0.02em; line-height: 1; margin: 0; color: white; mix-blend-mode: difference; } /* === Hint === */ .hint { position: fixed; bottom: 24px; right: 24px; z-index: 90; font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255, 220, 150, 0.7); padding: 8px 14px; border: 1px solid rgba(255, 220, 150, 0.3); border-radius: 999px; pointer-events: none; animation: hint-pulse 2s ease-in-out infinite; } @keyframes hint-pulse { 0%,100% { opacity: 0.7; } 50% { opacity: 1; } } .bg-stage { position: absolute; inset: 0; } .bg { position: absolute; inset: 0; overflow: hidden; } .caption { position: relative; z-index: 5; padding: 28px 40px; background: rgba(10, 9, 8, 0.55); backdrop-filter: blur(14px); border: 1px solid rgba(255, 255, 255, 0.08); border-radius: 14px; color: white; max-width: 460px; margin: 24px; } .caption--light { background: rgba(255, 255, 255, 0.7); border-color: rgba(20, 20, 19, 0.08); color: #141413; } .caption__src { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); margin: 0 0 10px; } .caption__title { font-family: var(--serif); font-weight: 400; font-size: 40px; line-height: 1; letter-spacing: -0.02em; margin: 0 0 10px; } .caption__desc { font-size: 14px; opacity: 0.75; line-height: 1.5; margin: 0; } /* === BG specifics === */ .cursor-canvas { width: 100%; height: 100%; display: block; } .bg-iridescent canvas, .bg-disp canvas, .bg-tilt canvas { display: block; width: 100% !important; height: 100% !important; } /* === COLOR REACTIVE === */ .bg-color { --c1: #ff6b9d; --c2: #4dd0e1; --c3: #ffeb3b; --cx: 50%; --cy: 50%; transition: background 100ms linear;} .color-blob { position: absolute; border-radius: 50%; filter: blur(80px); mix-blend-mode: multiply; transition: background 60ms linear, transform 200ms var(--ease-out); } .color-blob--a { width: 50vw; height: 50vw; background: radial-gradient(circle, var(--c1), transparent 60%); left: 0; top: 0; transform: translate3d(calc(var(--cx) - 25vw), calc(var(--cy) - 25vw), 0); } .color-blob--b { width: 45vw; height: 45vw; background: radial-gradient(circle, var(--c2), transparent 60%); left: 0; top: 0; transform: translate3d(calc(var(--cx) - 22vw - 100px), calc(var(--cy) - 22vw + 50px), 0); } .color-blob--c { width: 40vw; height: 40vw; background: radial-gradient(circle, var(--c3), transparent 60%); left: 0; top: 0; transform: translate3d(calc(var(--cx) - 20vw + 80px), calc(var(--cy) - 20vw - 80px), 0); } .bgc-head { padding: 120px 32px 40px; max-width: 900px; margin: 0 auto; text-align: center; } .bgc-head h1 { font-family: var(--serif); font-weight: 400; font-size: clamp(48px, 7vw, 96px); line-height: 1; letter-spacing: -0.02em; margin: 0 0 16px; } .bgc-head p { color: rgba(255,255,255,0.6); font-size: 16px; line-height: 1.55; max-width: 640px; margin: 0 auto; } .grid { display: grid; grid-template-columns: 1fr; gap: 24px; padding: 0 32px 80px; max-width: 1200px; margin: 0 auto; } @media (min-width: 900px) { .grid { grid-template-columns: 1fr 1fr; } } /* ============ 1. HOVER BORDER ============ Light-safe by default: эффект (рамка conic-gradient) + опаковая прокладка `--hb-bg` (по умолчанию палитровый --bg или белый). Modifier `.hb-card--dark` восстанавливает старый тёмный showcase-вид. */ .hb-card { position: relative; padding: 4px; border-radius: 16px; overflow: visible; isolation: isolate; } .hb-card--clickable { cursor: pointer; } /* clip-path inset(25% round 16px) клипает 200%-овый conic-эффект обратно к границе .hb-card (inset:-50% даёт 200% размер, 25% inset = 50% обратно = parent box). Без этого outer overflow:visible пускает gold за карточку. */ .hb-border { position: absolute; inset: -50%; z-index: 1; background: conic-gradient(from 0deg, transparent 70%, var(--gold) 85%, #FFD49A 95%, transparent 100%); animation: hb-spin 12s linear infinite; clip-path: inset(25% round 16px); } .hb-card:hover .hb-border { animation-duration: 4s; background: conic-gradient(from 0deg, transparent 70%, #4dc4ff 80%, #ff6b9d 90%, var(--gold) 95%, transparent 100%); } @keyframes hb-spin { to { transform: rotate(1turn); } } .hb-content { position: relative; z-index: 2; background: var(--hb-bg, var(--bg, #ffffff)); border-radius: 13px; } /* dark modifier — оригинальный showcase-вид */ .hb-card--dark { min-height: 240px; } .hb-card--dark .hb-content { position: absolute; inset: 4px; background: #0a0908; padding: 28px; display: flex; flex-direction: column; justify-content: center; } .hb-card--dark .hb-content h4 { font-family: var(--serif); font-size: 32px; margin: 8px 0; color: white; } .hb-card--dark .hb-content p { color: rgba(255,255,255,0.7); font-size: 14px; line-height: 1.55; margin: 0; } .hb-tag, .da-tag, .wb-tag, .tr-tag, .ev-tag, .cf-tag, .cp-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); } /* ============ 2. DIRECTION AWARE ============ Light-safe by default: только overlay-эффект + transparent родитель. Modifier `.da-card--dark` = тёмный фон + mix-blend для показа. */ /* outer overflow:visible — детские badge'ы (-top-3 left-7) не клипаются; .da-overlay имеет inset:0 + transform только в пределах своей box → стабильно. */ .da-card { position: relative; border-radius: 16px; overflow: visible; } .da-card > .da-overlay { border-radius: 16px; } .da-card--clickable { cursor: pointer; } .da-overlay { position: absolute; inset: 0; background: linear-gradient(135deg, var(--gold), #FFD49A); opacity: 0; transition: transform 400ms var(--ease-out), opacity 300ms var(--ease-out); transform: translate3d(0, -100%, 0); pointer-events: none; } .da-card[data-dir="top"] .da-overlay { opacity: 1; transform: translate3d(0, 0, 0); } .da-card[data-dir="top"]:not(:hover) .da-overlay { transform: translate3d(0, -100%, 0); } .da-card[data-dir="bottom"] .da-overlay { opacity: 1; transform: translate3d(0, 0, 0); transition: transform 400ms var(--ease-out), opacity 300ms var(--ease-out); } .da-card[data-dir="bottom"]:not(:hover) .da-overlay { transform: translate3d(0, 100%, 0); } .da-card[data-dir="left"] .da-overlay { opacity: 1; transform: translate3d(0, 0, 0); } .da-card[data-dir="left"]:not(:hover) .da-overlay { transform: translate3d(-100%, 0, 0); } .da-card[data-dir="right"] .da-overlay { opacity: 1; transform: translate3d(0, 0, 0); } .da-card[data-dir="right"]:not(:hover) .da-overlay { transform: translate3d(100%, 0, 0); } .da-content { position: relative; z-index: 2; } .da-hint { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--gold); } /* dark modifier */ .da-card--dark { padding: 28px; min-height: 240px; background: #1a0e08; } .da-card--dark .da-content { mix-blend-mode: difference; } .da-card--dark .da-content h4 { font-family: var(--serif); font-size: 32px; margin: 8px 0; color: white; } .da-card--dark .da-content p { color: rgba(255,255,255,0.85); font-size: 14px; line-height: 1.55; margin: 0; } .da-card--dark .da-hint { margin-top: 12px; } /* ============ 3. WOBBLE ============ Light-safe by default: только 3D-tilt-эффект, без своего bg/тени. Modifier `.wb-card--dark` = коричневый gradient bg + drop-shadow. */ .wb-stage { perspective: 1000px; padding: 20px; } .wb-card { position: relative; border-radius: 20px; transform-style: preserve-3d; transition: transform 200ms var(--ease-out); will-change: transform; } .wb-card--clickable { cursor: pointer; } .wb-bg { display: none; } .wb-content { position: relative; z-index: 1; transform-style: preserve-3d; transition: transform 200ms var(--ease-out); } /* dark modifier */ .wb-card--dark { padding: 36px; min-height: 200px; box-shadow: 0 30px 60px rgba(0,0,0,0.4); } .wb-card--dark .wb-bg { display: block; position: absolute; inset: 0; background: linear-gradient(135deg, #B89465, #8a6840); border-radius: 20px; } .wb-card--dark .wb-content h4 { font-family: var(--serif); font-size: 32px; margin: 8px 0; color: white; } .wb-card--dark .wb-content p { color: rgba(255,255,255,0.8); font-size: 14px; line-height: 1.55; margin: 0; } /* ============ 4. LENS ============ .lens-stage { position: relative; min-height: 280px; border-radius: 16px; overflow: hidden; cursor: none; background: #0a0908; } .lens-base, .lens-zoom { background-image: radial-gradient(circle at 20% 30%, #B89465 0%, transparent 25%), radial-gradient(circle at 70% 60%, #E8C4CF 0%, transparent 30%), radial-gradient(circle at 50% 80%, #B6C8B8 0%, transparent 25%), radial-gradient(circle at 90% 20%, #FFD49A 0%, transparent 20%), linear-gradient(135deg, #2a1f15, #18120c); background-size: 100% 100%; } .lens-base { position: absolute; inset: 0; } .lens-overlay { position: absolute; bottom: 16px; left: 16px; font-family: var(--mono); font-size: 11px; color: white; padding: 8px 12px; background: rgba(0,0,0,0.5); border-radius: 8px; pointer-events: none; } .lens-lens { position: absolute; width: 160px; height: 160px; border-radius: 50%; overflow: hidden; border: 3px solid white; box-shadow: 0 8px 30px rgba(0,0,0,0.5), inset 0 0 12px rgba(255,255,255,0.3); pointer-events: none; } .lens-zoom { position: absolute; inset: 0; background-size: 200% 200%; } /* ============ 5. TEXT REVEAL ============ Концепт = контраст base/reveal текста. Обязателен variant: --dark (default) или --light. Без variant фон transparent = эффект сломается (нет contrast plane). */ .tr-card { position: relative; padding: 36px; border-radius: 16px; min-height: 280px; overflow: hidden; cursor: none; } .tr-base, .tr-overlay { position: absolute; inset: 0; padding: 36px; display: flex; flex-direction: column; justify-content: center; align-items: center; } .tr-text { font-family: var(--serif); font-size: clamp(32px, 5vw, 56px); margin: 0; text-align: center; } .tr-tag { position: absolute; top: 20px; left: 20px; } .tr-cursor-pos { position: absolute; width: 14px; height: 14px; border-radius: 50%; background: white; transform: translate(-50%, -50%); pointer-events: none; box-shadow: 0 0 12px rgba(0,0,0,0.4); } /* dark variant (default) */ .tr-card--dark { background: linear-gradient(135deg, #18120c, #0a0908); } .tr-card--dark .tr-overlay { background: linear-gradient(135deg, var(--gold), #FFD49A); } .tr-card--dark .tr-text { color: rgba(255,255,255,0.5); } .tr-card--dark .tr-text--reveal { color: #0a0908; font-style: italic; } /* light variant — контраст наоборот */ .tr-card--light { background: var(--bg, #faf6ee); } .tr-card--light .tr-overlay { background: linear-gradient(135deg, #1a0e08, #0a0908); } .tr-card--light .tr-text { color: rgba(0,0,0,0.4); } .tr-card--light .tr-text--reveal { color: var(--gold, #B89465); font-style: italic; } /* ============ 6. EVERVAULT ============ Матрица читается ТОЛЬКО на тёмном — поэтому variant="dark" по умолчанию. variant="auto" = матрица muted dark на наследуемом фоне. */ /* outer overflow:visible — matrix и spotlight = inset:0, контент по flex внутри */ .ev-card { position: relative; border-radius: 16px; overflow: visible; } .ev-card--clickable { cursor: pointer; } .ev-matrix { position: absolute; inset: 0; font-family: var(--mono); font-size: 12px; transition: opacity 300ms var(--ease-out); padding: 4px; line-height: 1.2; } .ev-row { display: flex; justify-content: space-between; padding: 0 6px; } .ev-char { display: inline-block; } .ev-spotlight { position: absolute; inset: 0; pointer-events: none; } .ev-content { position: relative; z-index: 5; } /* dark variant (default) */ .ev-card--dark { min-height: 280px; background: #02050d; padding: 28px; } .ev-card--dark .ev-matrix { color: rgba(80, 200, 100, 0.55); } .ev-card--dark .ev-spotlight { mix-blend-mode: lighten; } .ev-card--dark .ev-content { padding: 12px; max-width: 320px; } .ev-card--dark .ev-content h4 { font-family: var(--serif); font-size: 32px; margin: 8px 0; color: white; } .ev-card--dark .ev-content p { color: rgba(255,255,255,0.7); font-size: 14px; line-height: 1.55; margin: 0; } /* auto/light variant — матрица muted dark, spotlight multiply */ .ev-card--auto .ev-matrix { color: rgba(40, 90, 60, 0.30); } .ev-card--auto .ev-spotlight { mix-blend-mode: multiply; } /* ============ 7. CONFETTI ============ Light-safe by default: контейнер для конфетти, без своего bg. Modifier `.cf-card--dark` = тёмный градиент-фон. */ .cf-card { position: relative; border-radius: 16px; overflow: hidden; cursor: pointer; } .cf-particle { position: absolute; pointer-events: none; border-radius: 2px; will-change: transform, opacity; } /* dark modifier */ .cf-card--dark { padding: 28px; min-height: 280px; background: linear-gradient(135deg, #1a0e08, #0a0908); } .cf-card--dark .cf-content h4 { font-family: var(--serif); font-size: 32px; margin: 8px 0; color: white; } .cf-card--dark .cf-content p { color: rgba(255,255,255,0.7); font-size: 14px; line-height: 1.55; margin: 0; } /* ============ 8. CURSOR PAINT ============ */ .cp-card { position: relative; min-height: 320px; border-radius: 16px; overflow: hidden; background: #02050d; cursor: crosshair; } .cp-canvas { width: 100%; height: 100%; display: block; position: absolute; inset: 0; } .cp-overlay { position: absolute; bottom: 16px; left: 16px; padding: 16px 20px; background: rgba(10,9,8,0.7); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; max-width: 320px; pointer-events: none; } .cp-overlay h4 { font-family: var(--serif); font-size: 22px; margin: 6px 0; color: white; } .cp-overlay p { color: rgba(255,255,255,0.65); font-size: 13px; margin: 0 0 12px; } .cp-btn { padding: 8px 14px; background: var(--gold); color: #0a0908; border: none; border-radius: 999px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; pointer-events: all; } /* ============ 9. BORDER BEAM ============ Pattern из HoverBorder: padding 2px на parent, ::before с rotating conic-gradient (узкая 12% дуга = "точка"), .bb-content inset через padding gap. Light-safe. */ .bb-card { position: relative; padding: 2px; border-radius: 16px; overflow: visible; isolation: isolate; } .bb-card::before { content: ""; position: absolute; inset: -50%; z-index: 1; background: conic-gradient( from 0deg, transparent 0%, transparent 88%, var(--bb-color, var(--gold)) 92%, #FFD49A 96%, transparent 100% ); animation: bb-spin var(--bb-duration, 4s) linear infinite; pointer-events: none; /* клипает 200%-эффект к parent box (см. .hb-border выше) */ clip-path: inset(25% round 16px); } @keyframes bb-spin { to { transform: rotate(1turn); } } .bb-content { position: relative; z-index: 2; border-radius: 14px; background: var(--bg, #ffffff); } /* ============ 10. METEOR CARD ============ Метеоры в overlay z-index 10 поверх контента, mix-blend-mode multiply (видны на любом bg, не обструкция тексту). */ /* outer overflow:visible (badges не клипятся), но meteors animate translate(-600px,600px) → клипаются на .mt-overlay */ .mt-card { position: relative; border-radius: 16px; overflow: visible; isolation: isolate; } .mt-content { position: relative; z-index: 1; } .mt-overlay { position: absolute; inset: 0; z-index: 10; pointer-events: none; mix-blend-mode: multiply; overflow: hidden; border-radius: 16px; } .mt-meteor { position: absolute; width: 2px; height: 2px; border-radius: 9999px; background: var(--gold); animation: mt-fall linear infinite; } .mt-meteor::before { content: ""; position: absolute; top: 50%; right: 0; width: 60px; height: 1px; background: linear-gradient(90deg, var(--gold), transparent); transform: translateY(-50%); } @keyframes mt-fall { 0% { transform: translate(0, 0) rotate(215deg); opacity: 0; } 10% { opacity: 1; } 90% { opacity: 1; } 100% { transform: translate(-600px, 600px) rotate(215deg); opacity: 0; } } /* ============ 11. SHINE BORDER ============ Аналогично BorderBeam но slice шире (60° дуга) и плавнее → "shine sweep". */ .sb-card { position: relative; padding: 2px; border-radius: 16px; overflow: visible; isolation: isolate; } .sb-card::before { content: ""; position: absolute; inset: -50%; z-index: 1; background: conic-gradient( from 0deg, transparent 0%, transparent 65%, rgba(184, 148, 101, 0.35) 75%, #FFD49A 85%, rgba(184, 148, 101, 0.35) 95%, transparent 100% ); animation: sb-spin var(--sb-duration, 5s) linear infinite; pointer-events: none; /* клипает 200%-эффект к parent box (см. .hb-border выше) */ clip-path: inset(25% round 16px); } @keyframes sb-spin { to { transform: rotate(1turn); } } .sb-content { position: relative; z-index: 2; border-radius: 14px; background: var(--bg, #ffffff); } /* ============ 12. GLOWING STARS ============ Звёзды в overlay z-index 10 + mix-blend multiply. На белом видны gold-точки, на тексте темнеют, не обструкция. */ /* outer overflow:visible — звёзды позиционированы по top/left% внутри overlay (inset:0), естественно остаются в parent box → не leak */ .gs-card { position: relative; border-radius: 16px; overflow: visible; isolation: isolate; } .gs-content { position: relative; z-index: 1; } .gs-overlay { position: absolute; inset: 0; z-index: 10; pointer-events: none; mix-blend-mode: multiply; } .gs-star { position: absolute; border-radius: 50%; background: var(--gold); box-shadow: 0 0 4px var(--gold); animation: gs-twinkle ease-in-out infinite; opacity: 0.7; } @keyframes gs-twinkle { 0%, 100% { opacity: 0.15; transform: scale(0.5); } 50% { opacity: 0.85; transform: scale(1.4); } } .gs-card:hover .gs-star { background: #FFD49A; box-shadow: 0 0 8px #FFD49A, 0 0 12px var(--gold); } /* ============ 13. MAGNETIC CARD ============ Pure translate, без rotation. JS на onMouseMove устанавливает transform. */ .mg-stage { position: relative; padding: 20px; } .mg-card { position: relative; border-radius: 16px; transition: transform 300ms var(--ease-out); will-change: transform; } .mg-card--clickable { cursor: pointer; } /* ============ 14. MAGIC CARD ============ Spotlight (radial gradient) + grid-pattern reveal под курсором, overlay z-index 10/11 + mix-blend multiply. */ /* outer overflow:visible — spotlight/pattern имеют inset:0, рендерят в parent box */ .mc-card { position: relative; border-radius: 16px; overflow: visible; isolation: isolate; } .mc-content { position: relative; z-index: 1; } .mc-spotlight { position: absolute; inset: 0; z-index: 10; background: radial-gradient(280px circle at var(--mc-x, 50%) var(--mc-y, 50%), rgba(184, 148, 101, 0.55), transparent 70%); opacity: var(--mc-opacity, 0); transition: opacity 300ms var(--ease-out); pointer-events: none; mix-blend-mode: multiply; } .mc-pattern { position: absolute; inset: 0; z-index: 11; background-image: linear-gradient(rgba(184, 148, 101, 0.5) 1px, transparent 1px), linear-gradient(90deg, rgba(184, 148, 101, 0.5) 1px, transparent 1px); background-size: 24px 24px; mask-image: radial-gradient(220px circle at var(--mc-x, 50%) var(--mc-y, 50%), #000 0%, transparent 70%); -webkit-mask-image: radial-gradient(220px circle at var(--mc-x, 50%) var(--mc-y, 50%), #000 0%, transparent 70%); opacity: var(--mc-opacity, 0); transition: opacity 200ms var(--ease-out); pointer-events: none; mix-blend-mode: multiply; } .bg-page { position: relative; } .demo { padding: 96px max(24px, 4vw); max-width: 1200px; margin: 0 auto; min-height: 100vh; position: relative; } .demo-tall { min-height: 200vh; } .demo-title { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 5vw, 64px); line-height: 1; letter-spacing: -0.02em; margin: 60px 0 16px; } .demo-text { color: #6E6A63; font-size: 16px; max-width: 560px; line-height: 1.55; margin: 0 0 40px; } /* === STICKY SCROLL === */ .sticky-scroll { display: grid; grid-template-columns: 1fr; gap: 32px; margin-top: 40px; } @media (min-width: 900px) { .sticky-scroll { grid-template-columns: 5fr 7fr; gap: 48px; align-items: start; } } .sticky-scroll__left { display: flex; flex-direction: column; gap: 80px; padding: 100px 0; } .sticky-step { transition: opacity 400ms var(--ease-out); } .sticky-step__num { font-family: var(--serif); font-size: 80px; line-height: 1; color: var(--gold); } .sticky-step__title { font-family: var(--serif); font-size: 44px; margin: 8px 0 14px; line-height: 1; } .sticky-scroll__right { position: sticky; top: 96px; height: 70vh; } .sticky-pic { width: 100%; height: 100%; border-radius: 16px; display: flex; align-items: center; justify-content: center; color: white; font-family: var(--serif); font-size: 48px; transition: background 600ms var(--ease-out); } /* === CARD STACK === */ .card-stack-wrap { position: relative; height: 280px; max-width: 480px; margin: 40px 0; } .stack-card { position: absolute; left: 0; right: 0; background: white; border: 1px solid rgba(20,20,19,0.08); border-radius: 16px; padding: 28px; box-shadow: 0 10px 40px rgba(0,0,0,0.08); transform-origin: top center; } .stack-card__role { font-family: var(--mono); font-size: 10px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); } .stack-card__name { font-size: 14px; color: #6E6A63; } /* === MODAL === */ .modal-trigger { padding: 16px 28px; background: #141413; color: white; border: none; border-radius: 999px; font-family: inherit; font-size: 12px; font-weight: 500; letter-spacing: 0.16em; text-transform: uppercase; cursor: pointer; transition: transform 100ms var(--ease-out); } .modal-trigger:active { transform: scale(0.97); } .modal-backdrop { position: fixed; inset: 0; z-index: 200; background: rgba(10,9,8,0.65); backdrop-filter: blur(8px); display: flex; align-items: center; justify-content: center; padding: 24px; } .modal-card { background: white; border-radius: 20px; padding: 40px; max-width: 460px; width: 100%; will-change: transform, opacity; } .modal-tag { font-family: var(--mono); font-size: 11px; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--gold); } .modal-title { font-family: var(--serif); font-size: 36px; margin: 8px 0 12px; } .modal-text { color: #2A2825; font-size: 16px; line-height: 1.55; } .modal-actions { display: flex; gap: 12px; margin-top: 28px; } .modal-btn { padding: 12px 22px; border-radius: 999px; background: #FAF8F2; color: #141413; border: 1px solid rgba(20,20,19,0.1); font-size: 13px; font-weight: 500; cursor: pointer; transition: all 100ms var(--ease-out); } .modal-btn:active { transform: scale(0.97); } .modal-btn--primary { background: #141413; color: white; border-color: #141413; } /* === PIN === */ .pin-stage { position: relative; height: 360px; width: 100%; background: linear-gradient(180deg, #f0e4d2, #e0d4c2); border-radius: 16px; display: flex; align-items: center; justify-content: center; } .pin { position: relative; display: flex; flex-direction: column; align-items: center; animation: pin-float 4s ease-in-out infinite; } @keyframes pin-float { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } } .pin__head { position: relative; width: 60px; height: 60px; } .pin__dot { position: absolute; inset: 0; background: radial-gradient(circle, var(--gold), #6e5430); border: 3px solid white; border-radius: 50%; box-shadow: 0 8px 20px rgba(0,0,0,0.2); } .pin__ring { position: absolute; inset: -8px; border: 2px solid var(--gold); border-radius: 50%; opacity: 0; animation: pin-ring 2s ease-out infinite; } @keyframes pin-ring { 0% { transform: scale(0.8); opacity: 0.8; } 100% { transform: scale(2); opacity: 0; } } .pin__shadow { width: 24px; height: 6px; background: radial-gradient(ellipse, rgba(0,0,0,0.3), transparent 70%); border-radius: 50%; margin-top: 16px; animation: pin-shadow 4s ease-in-out infinite; } @keyframes pin-shadow { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.8); opacity: 0.6; } } .pin__label { margin-top: 24px; font-size: 14px; line-height: 1.3; text-align: center; color: #141413; } /* === TRACING === */ /* tracing-section авто-растёт под содержимое, без принудительного 200vh */ .tracing-section { min-height: 0; padding: 96px max(24px, 4vw); } .tracing-grid { display: grid; grid-template-columns: 60px 1fr; gap: 32px; margin-top: 40px; position: relative; } .tracing-rail { position: relative; height: 100%; min-height: 100%; } .tracing-svg { position: absolute; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; } /* Шаги с равномерным вертикальным ритмом — каждый занимает ~50vh так что весь контент скроллится плавно вместе с rail */ .tracing-content { display: flex; flex-direction: column; gap: 0; padding-bottom: 80px; } .tracing-step-wrap { position: relative; min-height: 50vh; padding: 24px 0 24px 32px; display: flex; flex-direction: column; justify-content: center; } /* Точка-маркер слева у каждого шага — живёт на линии rail */ .tracing-dot { position: absolute; left: -50px; top: 50%; transform: translateY(-50%); width: 14px; height: 14px; border-radius: 50%; background: #FFD49A; box-shadow: 0 0 0 4px rgba(255,212,154,0.18), 0 0 12px rgba(255,212,154,0.5); } .tracing-step { color: inherit; } .tracing-step h4 { font-family: var(--serif); font-size: 36px; margin: 0 0 12px; } .tracing-step p { color: #2A2825; font-size: 17px; line-height: 1.55; max-width: 540px; } /* === MAP === */ .map-stage { background: linear-gradient(135deg, #0a0908, #18120c); border-radius: 16px; padding: 32px; margin-top: 24px; } .map-svg { width: 100%; height: auto; display: block; } @keyframes arc-flow { from { stroke-dashoffset: 1000; } to { stroke-dashoffset: 0; } } /* === LOADER === */ .loader-stage { background: linear-gradient(135deg, #fff, #faf8f2); border: 1px solid rgba(20,20,19,0.08); border-radius: 16px; padding: 40px; margin-top: 24px; max-width: 480px; } .loader-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 18px; } .loader-item { display: flex; align-items: center; gap: 16px; transition: opacity 300ms var(--ease-out); } .loader-item--pending { opacity: 0.35; } .loader-item--active { opacity: 1; } .loader-item--done { opacity: 0.7; } .loader-dot { width: 28px; height: 28px; border-radius: 50%; background: rgba(20,20,19,0.05); border: 1px solid rgba(20,20,19,0.15); display: flex; align-items: center; justify-content: center; flex-shrink: 0; } .loader-item--done .loader-dot { background: var(--gold); border-color: var(--gold); color: white; } .loader-item--active .loader-dot { background: rgba(184,148,101,0.15); border-color: var(--gold); } .loader-check { font-size: 14px; } .loader-spinner { width: 16px; height: 16px; border: 2px solid rgba(184,148,101,0.3); border-top-color: var(--gold); border-radius: 50%; animation: spinner 0.8s linear infinite; } @keyframes spinner { to { transform: rotate(360deg); } } .loader-label { font-size: 17px; font-family: var(--serif); } /* === HIGHLIGHT === */ .hh-wrap { padding: 60px 0; } .hh-headline { font-family: var(--serif); font-weight: 400; font-size: clamp(40px, 5.5vw, 80px); line-height: 1.05; letter-spacing: -0.02em; color: #141413; } .hh-mark { position: relative; display: inline-block; padding: 0 6px; } .hh-mark__bg { position: absolute; inset: 0; background: linear-gradient(120deg, var(--gold) 0%, #FFD49A 50%, var(--gold) 100%); border-radius: 6px; z-index: 0; transform-origin: left; animation: hh-sweep 3s ease-out forwards 0.6s; transform: scaleX(0); } @keyframes hh-sweep { to { transform: scaleX(1); } } .hh-mark__text { position: relative; z-index: 1; color: #18120c; } /* ============================================================ DIV_CURSOR_2 — 15 wrapper-эффектов (расширение) ============================================================ */ /* === 1. BORDER TRAIL === */ .bt-card { position: relative; padding: 2px; border-radius: 16px; background: linear-gradient(var(--bg, #fff), var(--bg, #fff)) padding-box, conic-gradient(from var(--bt-angle, 0deg), transparent 0%, var(--bt-color, #FFD49A) 8%, transparent 16%) border-box; border: 2px solid transparent; animation: bt-rotate var(--bt-duration, 6s) linear infinite; isolation: isolate; } @keyframes bt-rotate { to { --bt-angle: 360deg; } } @property --bt-angle { syntax: ''; initial-value: 0deg; inherits: false; } .bt-content { position: relative; z-index: 2; } /* === 2. GRADIENT BORDER ROTATE === */ .gbr-card { position: relative; padding: var(--gbr-bw, 1px); border-radius: 16px; isolation: isolate; background: conic-gradient(from var(--gbr-angle, 0deg), var(--gbr-c1), var(--gbr-c2), var(--gbr-c1)); animation: gbr-spin var(--gbr-duration, 4s) linear infinite; } @keyframes gbr-spin { to { --gbr-angle: 360deg; } } @property --gbr-angle { syntax: ''; initial-value: 0deg; inherits: false; } .gbr-content { position: relative; z-index: 2; background: var(--bg, #fff); border-radius: calc(16px - var(--gbr-bw, 1px)); } /* === 3. DASHED ANIMATED BORDER === */ .dab-card { position: relative; border-radius: 16px; padding: 1px; } .dab-svg { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; } .dab-svg rect { fill: none; stroke: var(--dab-color, #B89465); stroke-width: 1.5; stroke-dasharray: var(--dab-dash, 8px) var(--dab-dash, 8px); animation: dab-march var(--dab-duration, 30s) linear infinite; } @keyframes dab-march { to { stroke-dashoffset: -100; } } .dab-content { position: relative; z-index: 2; padding: 2px; } /* === 4. DOUBLE BORDER GLOW === */ .dbg-card { position: relative; padding: 4px; border-radius: 18px; isolation: isolate; background: conic-gradient(from var(--dbg-a1, 0deg), transparent 70%, var(--dbg-c1, #FFD49A), transparent 90%); animation: dbg-spin1 var(--dbg-d1, 6s) linear infinite; } @keyframes dbg-spin1 { to { --dbg-a1: 360deg; } } @property --dbg-a1 { syntax: ''; initial-value: 0deg; inherits: false; } .dbg-card::before { content: ""; position: absolute; inset: 1px; border-radius: 17px; padding: 2px; background: conic-gradient(from var(--dbg-a2, 180deg), transparent 70%, var(--dbg-c2, #B5DDD5), transparent 90%); animation: dbg-spin2 var(--dbg-d2, 9s) linear infinite reverse; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events: none; } @keyframes dbg-spin2 { to { --dbg-a2: 540deg; } } @property --dbg-a2 { syntax: ''; initial-value: 180deg; inherits: false; } .dbg-content { position: relative; z-index: 2; background: var(--bg, #fff); border-radius: 14px; } /* === 5. NEON OUTLINE === */ .no-card { position: relative; border: 1.5px solid var(--no-color, #FFD49A); border-radius: 16px; box-shadow: 0 0 var(--no-glow, 16px) var(--no-color, #FFD49A), inset 0 0 8px rgba(0,0,0,0); animation: no-pulse 2.4s ease-in-out infinite; } @keyframes no-pulse { 0%,100% { box-shadow: 0 0 var(--no-glow, 16px) rgba(255,212,154,0.35), inset 0 0 8px rgba(0,0,0,0); } 50% { box-shadow: 0 0 calc(var(--no-glow, 16px) * 1.8) rgba(255,212,154,0.7), inset 0 0 12px rgba(255,212,154,0.15); } } .no-card--dark { background: #0A0908; color: white; } .no-content { position: relative; } /* === 6. CORNER BRACKET === */ .cb-card { position: relative; padding: var(--cb-size, 24px); } .cb-corner { position: absolute; width: var(--cb-size, 24px); height: var(--cb-size, 24px); pointer-events: none; } .cb-corner--tl { top: 0; left: 0; border-top: var(--cb-th, 2px) solid var(--cb-color, #FF8E76); border-left: var(--cb-th, 2px) solid var(--cb-color, #FF8E76); } .cb-corner--tr { top: 0; right: 0; border-top: var(--cb-th, 2px) solid var(--cb-color, #FF8E76); border-right: var(--cb-th, 2px) solid var(--cb-color, #FF8E76); } .cb-corner--bl { bottom: 0; left: 0; border-bottom: var(--cb-th, 2px) solid var(--cb-color, #FF8E76); border-left: var(--cb-th, 2px) solid var(--cb-color, #FF8E76); } .cb-corner--br { bottom: 0; right: 0; border-bottom: var(--cb-th, 2px) solid var(--cb-color, #FF8E76); border-right: var(--cb-th, 2px) solid var(--cb-color, #FF8E76); } .cb-content { position: relative; z-index: 2; } /* === 7. SPARKLE CARD === */ .spk-card { position: relative; border-radius: 16px; isolation: isolate; overflow: visible; } .spk-content { position: relative; z-index: 1; } .spk-overlay { position: absolute; inset: 0; pointer-events: none; opacity: 0; transition: opacity 300ms; z-index: 10; } .spk-card:hover .spk-overlay { opacity: 1; } .spk-star { position: absolute; color: var(--spk-color, #FFD49A); animation: spk-twinkle 1.4s ease-in-out infinite; font-size: 18px; line-height: 1; filter: drop-shadow(0 0 4px var(--spk-color, #FFD49A)); } @keyframes spk-twinkle { 0%,100% { transform: scale(0.7) rotate(0deg); opacity: 0.5; } 50% { transform: scale(1.1) rotate(180deg); opacity: 1; } } /* === 8. GLITCH LINES === */ .gl-card { position: relative; border-radius: 16px; isolation: isolate; overflow: hidden; } .gl-content { position: relative; z-index: 1; } .gl-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 10; mix-blend-mode: multiply; } .gl-line { position: absolute; left: -10%; width: 120%; background: var(--gl-color, #FF6B9D); opacity: 0; animation: gl-flicker var(--gl-int, 4s) infinite; } @keyframes gl-flicker { 0%,90%,100% { opacity: 0; transform: translateX(0); } 92% { opacity: 0.4; transform: translateX(8px); } 94% { opacity: 0; transform: translateX(-8px); } 96% { opacity: 0.35; transform: translateX(4px); } } /* === 9. ASTERISK FLOAT === */ .af-card { position: relative; border-radius: 16px; isolation: isolate; overflow: visible; } .af-content { position: relative; z-index: 1; } .af-overlay { position: absolute; inset: -20px 0 0 0; pointer-events: none; z-index: 10; overflow: visible; } .af-star { position: absolute; top: -10%; color: var(--af-color, #FFD49A); animation: af-rise linear infinite; opacity: 0.7; } @keyframes af-rise { 0% { transform: translateY(120%) rotate(0deg); opacity: 0; } 15% { opacity: 0.8; } 85% { opacity: 0.6; } 100% { transform: translateY(-100%) rotate(360deg); opacity: 0; } } /* === 10. DOTS RAIN === */ .dr-card { position: relative; border-radius: 16px; isolation: isolate; overflow: hidden; } .dr-content { position: relative; z-index: 1; } .dr-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 10; opacity: 0; transition: opacity 200ms; } .dr-card:hover .dr-overlay { opacity: 1; } .dr-dot { position: absolute; top: -10px; border-radius: 50%; background: var(--dr-color, #FF8E76); animation: dr-fall linear infinite; box-shadow: 0 0 6px var(--dr-color, #FF8E76); } @keyframes dr-fall { 0% { transform: translateY(-20px); opacity: 0; } 15% { opacity: 0.9; } 100% { transform: translateY(220px); opacity: 0; } } /* === 11. STATIC NOISE === */ .sn-card { position: relative; border-radius: 16px; isolation: isolate; overflow: hidden; } .sn-content { position: relative; z-index: 1; } .sn-overlay { position: absolute; inset: 0; pointer-events: none; z-index: 10; opacity: var(--sn-op, 0.06); background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='2' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E"); mix-blend-mode: multiply; animation: sn-shift 0.5s steps(4) infinite; } .sn-card--dark .sn-overlay { mix-blend-mode: screen; } @keyframes sn-shift { 0% { transform: translate(0, 0); } 25% { transform: translate(-2%, 1%); } 50% { transform: translate(2%, -1%); } 75% { transform: translate(-1%, 2%); } } /* === 12. GRADIENT FOLLOW === */ .gf-card { position: relative; border-radius: 16px; isolation: isolate; overflow: hidden; } .gf-content { position: relative; z-index: 1; } .gf-spotlight { position: absolute; inset: 0; pointer-events: none; z-index: 5; transition: opacity 200ms; } /* === 13. DIAGONAL SWEEP === */ .ds-card { position: relative; border-radius: 16px; isolation: isolate; overflow: hidden; } .ds-content { position: relative; z-index: 1; } .ds-sweep { position: absolute; inset: 0; z-index: 5; pointer-events: none; background: linear-gradient(115deg, transparent 40%, var(--ds-color, #FFD49A) 50%, transparent 60%); transform: translateX(-100%); opacity: 0; } .ds-card:hover .ds-sweep { opacity: 0.5; transform: translateX(100%); transition: transform var(--ds-dur, 0.8s) cubic-bezier(0.23, 1, 0.32, 1), opacity 200ms; } /* === 14. CONIC SPOTLIGHT === */ .cs-card { position: relative; border-radius: 16px; isolation: isolate; overflow: hidden; } .cs-content { position: relative; z-index: 2; } .cs-overlay { position: absolute; inset: -50%; z-index: 1; pointer-events: none; background: var(--cs-grad); opacity: 0; filter: blur(40px); transition: opacity 400ms; } .cs-card:hover .cs-overlay { opacity: 0.35; animation: cs-spin 8s linear infinite; } @keyframes cs-spin { to { transform: rotate(360deg); } } /* === 15. INVERTED HOVER === */ .ih-card { position: relative; border-radius: 16px; transition: filter 400ms cubic-bezier(0.23, 1, 0.32, 1); } .ih-card:hover { filter: invert(1) hue-rotate(180deg); } .ih-content { position: relative; } /* ============================================================ DIV_CURSOR_3 — 14 wrapper-эффектов (transform / 3D / spec) ============================================================ */ /* === 1. PERSPECTIVE LIFT === */ .pl-stage { perspective: 1000px; padding: 16px; } .pl-card { position: relative; transform-style: preserve-3d; transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1); will-change: transform; } .pl-content { position: relative; } /* === 2. TILT GLOW === */ .tg-stage { padding: 12px; perspective: 1000px; } .tg-card { position: relative; border-radius: 16px; transition: transform 200ms, box-shadow 200ms; will-change: transform, box-shadow; } /* === 3. SCALE SNAP === */ .ss-card { position: relative; border-radius: 16px; transition: transform var(--ss-dur, 0.35s) cubic-bezier(0.34, 1.56, 0.64, 1); } .ss-card:hover { transform: scale(var(--ss-scale, 1.04)); } .ss-content { position: relative; } /* === 4. SLIDE CONTENT REVEAL === */ .scr-card { position: relative; border-radius: 16px; overflow: hidden; min-height: 180px; } .scr-front, .scr-back { position: relative; transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1); padding: 20px; } .scr-back { position: absolute; inset: 0; } .scr-card--up .scr-back { transform: translateY(100%); } .scr-card--up:hover .scr-front { transform: translateY(-100%); } .scr-card--up:hover .scr-back { transform: translateY(0); } .scr-card--left .scr-back { transform: translateX(100%); } .scr-card--left:hover .scr-front { transform: translateX(-100%); } .scr-card--left:hover .scr-back { transform: translateX(0); } /* === 5. DEPTH STACK === */ .dst-stage { position: relative; padding: 14px 14px 18px 14px; } .dst-card { position: relative; border-radius: 16px; } .dst-layer { position: absolute; left: 0; right: 0; border-radius: 16px; background: var(--dst-color, #FFD49A); pointer-events: none; } .dst-layer--1 { top: 6px; left: 4px; right: 4px; bottom: -10px; opacity: 0.35; z-index: -1; } .dst-layer--2 { top: 12px; left: 8px; right: 8px; bottom: -16px; opacity: 0.18; z-index: -2; } .dst-content { position: relative; z-index: 2; background: var(--bg, #fff); border-radius: 16px; box-shadow: 0 4px 16px rgba(0,0,0,0.08); } .dst-card--dark .dst-content { background: #1a1a1a; color: white; } /* === 6. MAGNETIC EDGE === */ .me-card { position: relative; border-radius: 16px; transition: clip-path 200ms cubic-bezier(0.23, 1, 0.32, 1); } /* === 7. FOLD OPEN === */ .fo-card { position: relative; border-radius: 16px; transform: perspective(800px) rotateX(var(--fo-deg, 30deg)); transform-origin: top center; transition: transform 500ms cubic-bezier(0.23, 1, 0.32, 1); } .fo-card:hover { transform: perspective(800px) rotateX(0deg); } .fo-content { position: relative; } /* === 8. SCROLL SCALE-IN === */ .ssi-card { position: relative; border-radius: 16px; transform-origin: center; } /* === 9. HOVER HALO CARD === */ .hh-card { position: relative; border-radius: 16px; transition: box-shadow 400ms; } .hh-card:hover { box-shadow: 0 0 var(--hh-size, 100px) var(--hh-color, rgba(255,212,154,0.5)); } .hh-content { position: relative; } /* === 10. GRADIENT MESH BG === */ .gmb-card { position: relative; border-radius: 16px; overflow: hidden; background: var(--gmb-bg); } .gmb-content { position: relative; } /* === 11. ANIMATED GRADIENT BG === */ .agb-card { position: relative; border-radius: 16px; overflow: hidden; background: var(--agb-grad); background-size: 200% 200%; animation: agb-shift var(--agb-dur, 8s) ease-in-out infinite alternate; } @keyframes agb-shift { 0% { background-position: 0% 50%; } 100% { background-position: 100% 50%; } } .agb-content { position: relative; } /* === 12. GHOST OUTLINE === */ .go-card { position: relative; border-radius: 16px; border: 1.5px solid var(--go-color, #FFD49A); background: transparent; transition: background 400ms cubic-bezier(0.23, 1, 0.32, 1); } .go-card:hover { background: var(--go-fill, rgba(255,212,154,0.12)); } .go-card--dark { color: var(--go-color, #FFD49A); } .go-content { position: relative; } /* === 13. GLASS CARD === */ .gc-card { position: relative; border-radius: 16px; background: var(--gc-bg, rgba(255,255,255,0.08)); backdrop-filter: blur(var(--gc-blur, 12px)); -webkit-backdrop-filter: blur(var(--gc-blur, 12px)); border: 1px solid var(--gc-border, rgba(255,255,255,0.25)); box-shadow: 0 8px 32px rgba(0,0,0,0.08); } .gc-card--dark { background: rgba(10,10,10,0.4); border-color: rgba(255,255,255,0.1); } /* === 14. NEUMORPH CARD === */ .neu-card { position: relative; border-radius: 18px; background: var(--bg, #EAE7E0); padding: 24px; } .neu-card--convex { box-shadow: 8px 8px 20px rgba(120, 100, 80, 0.18), -8px -8px 20px rgba(255, 250, 240, 0.65); } .neu-card--concave { box-shadow: inset 6px 6px 14px rgba(120, 100, 80, 0.16), inset -6px -6px 14px rgba(255, 250, 240, 0.6); } .neu-card--flat { box-shadow: 3px 3px 8px rgba(120, 100, 80, 0.1), -3px -3px 8px rgba(255, 250, 240, 0.5); } /* ============================================================ BLOCKS_4 — Print / Brutalist (6 эффектов) ============================================================ */ /* === 1. CMYK MARKS === */ .cmyk-card { position: relative; } .cmyk-crop { position: absolute; pointer-events: none; width: var(--cmyk-sz, 18px); height: var(--cmyk-sz, 18px); } .cmyk-crop--tl { top: 0; left: 0; border-top: 1px solid var(--cmyk-color, #000); border-left: 1px solid var(--cmyk-color, #000); } .cmyk-crop--tr { top: 0; right: 0; border-top: 1px solid var(--cmyk-color, #000); border-right: 1px solid var(--cmyk-color, #000); } .cmyk-crop--bl { bottom: 22px; left: 0; border-bottom: 1px solid var(--cmyk-color, #000); border-left: 1px solid var(--cmyk-color, #000); } .cmyk-crop--br { bottom: 22px; right: 0; border-bottom: 1px solid var(--cmyk-color, #000); border-right: 1px solid var(--cmyk-color, #000); } .cmyk-reg { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-family: monospace; font-size: 22px; color: var(--cmyk-color, #000); line-height: 1; pointer-events: none; } .cmyk-strip { position: absolute; bottom: 4px; left: 50%; transform: translateX(-50%); display: flex; gap: 2px; pointer-events: none; } .cmyk-strip span { width: 14px; height: 14px; display: block; } .cmyk-c { background: #00AEEF; } .cmyk-m { background: #EC008C; } .cmyk-y { background: #FFF200; } .cmyk-k { background: #000000; } .cmyk-content { position: relative; z-index: 1; } /* === 2. ASCII ART === */ .ascii-card { position: relative; padding: 24px; border-radius: 8px; background: var(--bg, #faf6ee); overflow: hidden; min-height: 200px; display: grid; place-items: center; font-family: var(--mono, "JetBrains Mono", monospace); cursor: default; } .ascii-grid { position: absolute; inset: 0; pointer-events: none; font-family: var(--mono, "JetBrains Mono", monospace); font-size: 11px; line-height: 1.05; color: var(--ink, #18120c); opacity: 0; transition: opacity 300ms ease; white-space: pre; margin: 0; padding: 16px; overflow: hidden; } .ascii-text { position: relative; z-index: 2; font-family: var(--mono, "JetBrains Mono", monospace); font-size: clamp(40px, 8vw, 80px); font-weight: 900; letter-spacing: -0.04em; margin: 0; color: var(--ink, #18120c); transition: text-shadow 300ms ease, transform 300ms ease; } .ascii-text--hover { text-shadow: 2px 0 var(--ink, #18120c), -2px 0 var(--ink, #18120c), 0 2px var(--ink, #18120c), 0 -2px var(--ink, #18120c); transform: scale(1.02); } /* === 3. DATAMOSHING RGB === */ .mosh-card { position: relative; display: inline-block; isolation: isolate; } .mosh-layer { position: absolute; inset: 0; pointer-events: none; mix-blend-mode: screen; animation: mosh-glitch 5s steps(20) infinite; } .mosh-r { color: var(--mosh-r, #FF0066); filter: drop-shadow(var(--mosh-x, 4px) 0 0 var(--mosh-r, #FF0066)); transform: translateX(calc(-1 * var(--mosh-x, 4px))); } .mosh-c { color: var(--mosh-c, #00FFFF); filter: drop-shadow(calc(-1 * var(--mosh-x, 4px)) 0 0 var(--mosh-c, #00FFFF)); transform: translateX(var(--mosh-x, 4px)); } @keyframes mosh-glitch { 0%, 87%, 100% { opacity: 0; } 88%, 92% { opacity: 0.7; transform: translateX(calc(-1 * var(--mosh-x, 4px))); } 93%, 97% { opacity: 0.8; transform: translateX(var(--mosh-x, 4px)); } } .mosh-content { position: relative; z-index: 2; } /* === 4. VHS DISTORTION === */ .vhs-card { position: relative; overflow: hidden; border-radius: 6px; isolation: isolate; } .vhs-content { position: relative; z-index: 1; } .vhs-scanlines { position: absolute; inset: 0; pointer-events: none; z-index: 5; background: repeating-linear-gradient( to bottom, transparent 0px, transparent 2px, rgba(255,255,255,0.06) 2px, rgba(255,255,255,0.06) 3px ); animation: vhs-roll var(--vhs-speed, 4s) linear infinite; mix-blend-mode: overlay; } @keyframes vhs-roll { to { background-position: 0 -6px; } } .vhs-tracking { position: absolute; left: 0; right: 0; height: 20%; top: 0; z-index: 6; pointer-events: none; background: linear-gradient(to bottom, transparent 40%, rgba(255,255,255,0.15) 50%, transparent 60%); animation: vhs-track 4s ease-in-out infinite; } @keyframes vhs-track { 0%, 100% { transform: translateY(0); opacity: 0.3; } 50% { transform: translateY(400%); opacity: 0.5; } } .vhs-vignette { position: absolute; inset: 0; pointer-events: none; z-index: 7; background: radial-gradient(ellipse at center, transparent 50%, rgba(0,0,0,0.25) 100%); } /* === 5. LETTERPRESS === */ .letterpress { font-family: var(--serif, serif); font-size: clamp(48px, 9vw, 120px); font-weight: 900; letter-spacing: -0.03em; margin: 0; line-height: 1; } .letterpress--light { color: #d4cfc4; text-shadow: calc(-1px * var(--lp-depth, 2)) calc(-1px * var(--lp-depth, 2)) 0 rgba(255,255,255,0.7), calc(1px * var(--lp-depth, 2)) calc(1px * var(--lp-depth, 2)) 1px rgba(0,0,0,0.18); } .letterpress--dark { color: #2a2520; background: transparent; text-shadow: calc(1px * var(--lp-depth, 2)) calc(1px * var(--lp-depth, 2)) 0 rgba(0,0,0,0.7), calc(-1px * var(--lp-depth, 2)) calc(-1px * var(--lp-depth, 2)) 1px rgba(255,255,255,0.05); } /* === 6. TWIN SHADOW CARD === */ .twin-shadow { position: relative; border-radius: 4px; background: var(--bg, #ffffff); box-shadow: var(--ts-off, 8px) var(--ts-off, 8px) 0 var(--ts-c1, #FF6B9D), calc(var(--ts-off, 8px) * 2) calc(var(--ts-off, 8px) * 2) 0 var(--ts-c2, #FFD49A); transition: transform 200ms cubic-bezier(0.23, 1, 0.32, 1), box-shadow 200ms; } .twin-shadow:hover { transform: translate(calc(-1 * var(--ts-off, 8px) / 2), calc(-1 * var(--ts-off, 8px) / 2)); box-shadow: calc(var(--ts-off, 8px) * 1.5) calc(var(--ts-off, 8px) * 1.5) 0 var(--ts-c1, #FF6B9D), calc(var(--ts-off, 8px) * 2.5) calc(var(--ts-off, 8px) * 2.5) 0 var(--ts-c2, #FFD49A); } .twin-content { position: relative; padding: 24px; } /* ============================================================ SECTIONS_1 — Premium ready-to-use sections (4) ============================================================ */ /* === 1. PREMIUM HERO === */ .premium-hero { position: relative; overflow: hidden; padding: clamp(60px, 10vh, 120px) clamp(20px, 5vw, 80px); background: linear-gradient(180deg, #faf6ee 0%, #f3e8d2 100%); color: #18120c; isolation: isolate; } .ph-bg { position: absolute; inset: 0; z-index: 0; overflow: hidden; opacity: 0.55; } .ph-aurora { position: absolute; border-radius: 50%; filter: blur(80px); mix-blend-mode: multiply; animation: ph-drift 20s ease-in-out infinite alternate; } .ph-aurora--1 { top: -10%; left: -10%; width: 60vw; height: 60vw; background: radial-gradient(circle, var(--ph-accent, #FF6B9D) 0%, transparent 70%); } .ph-aurora--2 { top: 30%; right: -15%; width: 50vw; height: 50vw; background: radial-gradient(circle, #FFD49A 0%, transparent 70%); animation-delay: -7s; } .ph-aurora--3 { bottom: -20%; left: 30%; width: 40vw; height: 40vw; background: radial-gradient(circle, #B5DDD5 0%, transparent 70%); animation-delay: -14s; } @keyframes ph-drift { 0%, 100% { transform: translate(0, 0) scale(1); } 50% { transform: translate(8%, 4%) scale(1.1); } } .ph-grid { position: relative; z-index: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: center; max-width: 1280px; margin: 0 auto; } @media (max-width: 900px) { .ph-grid { grid-template-columns: 1fr; gap: 40px; } } .ph-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(24, 18, 12, 0.06); font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: #18120c; margin-bottom: 24px; } .ph-eyebrow-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--ph-accent, #FF6B9D); animation: ph-pulse 2s ease-in-out infinite; } @keyframes ph-pulse { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.4; transform: scale(1.4); } } .ph-headline { font-family: var(--serif, serif); font-size: clamp(40px, 6vw, 72px); font-weight: 900; line-height: 1.04; letter-spacing: -0.03em; margin: 0 0 24px; color: #18120c; } .ph-headline-word { display: inline-block; background: linear-gradient(135deg, #18120c 0%, #3D3A4F 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .ph-subline { font-size: clamp(15px, 1.4vw, 18px); line-height: 1.6; color: #6B6580; margin: 0 0 32px; max-width: 480px; } .ph-cta-row { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 32px; } .mg-btn { padding: 14px 28px; border-radius: 999px; font-family: inherit; font-size: 15px; font-weight: 700; border: 1.5px solid #18120c; background: transparent; color: #18120c; cursor: pointer; transition: transform 200ms cubic-bezier(0.23,1,0.32,1), background 200ms; } .mg-btn:hover { background: rgba(24,18,12,0.06); } .mg-btn--primary { background: #18120c; color: #fff; box-shadow: 0 12px 32px rgba(24,18,12,0.18); } .mg-btn--primary:hover { background: #2a1f15; } .ph-social { display: flex; align-items: center; gap: 16px; } .ph-avatars { display: flex; } .ph-avatar { width: 32px; height: 32px; border-radius: 50%; border: 2px solid #faf6ee; margin-left: -10px; background-size: cover; background-position: center; } .ph-avatar:first-child { margin-left: 0; } .ph-social-text { font-size: 13px; color: #6B6580; font-weight: 500; } .ph-mockup { position: relative; perspective: 1200px; } .ph-mockup-frame { position: relative; border-radius: 16px; padding: 16px; background: #1a1a1a; box-shadow: 0 40px 80px rgba(24,18,12,0.22), 0 8px 24px rgba(24,18,12,0.08); transform: rotateY(-8deg) rotateX(4deg); transform-origin: center; transition: transform 600ms cubic-bezier(0.23,1,0.32,1); } .ph-mockup-frame:hover { transform: rotateY(-4deg) rotateX(2deg); } .ph-mockup-frame img { width: 100%; display: block; border-radius: 4px; } .ph-mockup-glow { position: absolute; inset: -20%; pointer-events: none; z-index: -1; background: radial-gradient(ellipse at center, var(--ph-accent, #FF6B9D) 0%, transparent 60%); opacity: 0.18; filter: blur(40px); } /* === 2. PREMIUM PRICING === */ .premium-pricing { position: relative; overflow: hidden; padding: clamp(60px, 10vh, 120px) clamp(20px, 5vw, 80px); background: var(--bg, #faf6ee); color: #18120c; } .pp-mesh-bg { position: absolute; inset: 0; z-index: 0; opacity: 0.25; background: radial-gradient(circle at 20% 20%, var(--pp-accent, #FF6B9D) 0%, transparent 40%), radial-gradient(circle at 80% 30%, #FFD49A 0%, transparent 40%), radial-gradient(circle at 50% 80%, #B5DDD5 0%, transparent 40%); filter: blur(40px); } .pp-header { position: relative; z-index: 1; text-align: center; margin-bottom: 60px; } .pp-header h2 { font-family: var(--serif, serif); font-size: clamp(36px, 5vw, 56px); font-weight: 900; margin: 0 0 16px; letter-spacing: -0.02em; } .pp-header p { font-size: 17px; color: #6B6580; margin: 0; max-width: 560px; margin-left: auto; margin-right: auto; } .pp-grid { position: relative; z-index: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; max-width: 1200px; margin: 0 auto; } @media (max-width: 900px) { .pp-grid { grid-template-columns: 1fr; } } .pp-tier { position: relative; padding: 32px 28px; border-radius: 20px; background: #fff; border: 1px solid rgba(24,18,12,0.06); box-shadow: 0 4px 16px rgba(24,18,12,0.04); transition: transform 300ms cubic-bezier(0.23,1,0.32,1), box-shadow 300ms; } .pp-tier:hover { transform: translateY(-6px); box-shadow: 0 20px 40px rgba(24,18,12,0.1); } .pp-tier--highlight { background: linear-gradient(180deg, #ffffff 0%, #fff3e8 100%); border: 2px solid var(--pp-accent, #FF6B9D); box-shadow: 0 12px 40px rgba(255, 107, 157, 0.18); transform: translateY(-12px); } .pp-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--pp-accent, #FF6B9D); color: #fff; padding: 6px 14px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; } .pp-tier-name { font-size: 14px; font-weight: 700; color: #6B6580; text-transform: uppercase; letter-spacing: 0.08em; margin-bottom: 8px; } .pp-tier-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 12px; } .pp-tier-amount { font-family: var(--serif, serif); font-size: 56px; font-weight: 900; color: #18120c; line-height: 1; } .pp-tier-period { font-size: 16px; color: #6B6580; font-weight: 500; } .pp-tier-desc { font-size: 14px; color: #6B6580; margin: 0 0 24px; line-height: 1.5; } .pp-tier-features { list-style: none; padding: 0; margin: 0 0 28px; display: flex; flex-direction: column; gap: 10px; } .pp-tier-features li { font-size: 14px; color: #18120c; display: flex; align-items: center; gap: 10px; } .pp-check { width: 18px; height: 18px; border-radius: 50%; background: rgba(0,200,100,0.12); color: #00a050; display: inline-grid; place-items: center; font-size: 11px; font-weight: 700; } .pp-tier-cta { width: 100%; padding: 14px; border-radius: 12px; font-size: 15px; font-weight: 700; border: 1.5px solid #18120c; background: transparent; color: #18120c; cursor: pointer; transition: background 200ms; } .pp-tier-cta:hover { background: rgba(24,18,12,0.06); } .pp-tier-cta--highlight { background: var(--pp-accent, #FF6B9D); color: #fff; border-color: transparent; box-shadow: 0 8px 24px rgba(255,107,157,0.35); } .pp-tier-cta--highlight:hover { background: #ee4f88; } /* === 3. PREMIUM FEATURES (Bento) === */ .premium-features { padding: clamp(60px, 10vh, 120px) clamp(20px, 5vw, 80px); background: var(--bg, #faf6ee); color: #18120c; } .pf-title { font-family: var(--serif, serif); font-size: clamp(36px, 5vw, 56px); font-weight: 900; text-align: center; margin: 0 0 60px; letter-spacing: -0.02em; } .pf-bento { display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: minmax(160px, auto); gap: 16px; max-width: 1200px; margin: 0 auto; } @media (max-width: 900px) { .pf-bento { grid-template-columns: repeat(2, 1fr); } } .pf-card { position: relative; padding: 24px; border-radius: 18px; background: #fff; border: 1px solid rgba(24,18,12,0.06); overflow: hidden; isolation: isolate; transition: transform 300ms, box-shadow 300ms; } .pf-card:hover { transform: translateY(-4px); box-shadow: 0 20px 40px rgba(24,18,12,0.08); } .pf-card--lg { grid-column: span 2; grid-row: span 2; } .pf-card--md { grid-column: span 2; } .pf-card--sm { grid-column: span 1; } .pf-card-icon { display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; border-radius: 12px; background: rgba(255,107,157,0.1); font-size: 24px; margin-bottom: 16px; } .pf-card h3 { font-family: var(--serif, serif); font-size: 20px; font-weight: 700; margin: 0 0 8px; color: #18120c; } .pf-card p { font-size: 14px; color: #6B6580; margin: 0; line-height: 1.5; } .pf-card-halo { position: absolute; inset: -50%; z-index: -1; pointer-events: none; background: radial-gradient(circle, var(--pf-card-accent, var(--pf-accent, #FF6B9D)) 0%, transparent 60%); opacity: 0; filter: blur(40px); transition: opacity 300ms; } .pf-card:hover .pf-card-halo { opacity: 0.4; } /* === 4. PREMIUM CTA === */ .premium-cta { position: relative; overflow: hidden; padding: clamp(80px, 12vh, 140px) clamp(20px, 5vw, 80px); background: linear-gradient(135deg, #1a1a1a 0%, #18120c 100%); color: #fff; text-align: center; isolation: isolate; } .pc-confetti { position: absolute; inset: 0; pointer-events: none; z-index: 0; overflow: hidden; } .pc-content { position: relative; z-index: 1; max-width: 720px; margin: 0 auto; } .pc-eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border-radius: 999px; background: rgba(255,255,255,0.1); font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--pc-accent, #FF6B9D); margin-bottom: 24px; } .pc-pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--pc-accent, #FF6B9D); animation: ph-pulse 2s ease-in-out infinite; } .pc-headline { font-family: var(--serif, serif); font-size: clamp(40px, 6vw, 80px); font-weight: 900; margin: 0 0 20px; line-height: 1; letter-spacing: -0.03em; } .pc-subline { font-size: 18px; color: rgba(255,255,255,0.75); margin: 0 0 32px; } .pc-cta-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; margin-bottom: 48px; } .pc-cta { padding: 16px 32px; border-radius: 999px; font-family: inherit; font-size: 16px; font-weight: 700; border: 1.5px solid rgba(255,255,255,0.3); background: transparent; color: #fff; cursor: pointer; transition: background 200ms, transform 200ms; } .pc-cta:hover { background: rgba(255,255,255,0.1); } .pc-cta--primary { background: var(--pc-accent, #FF6B9D); color: #fff; border-color: transparent; box-shadow: 0 12px 32px rgba(255,107,157,0.4); } .pc-cta--primary:hover { background: #ee4f88; transform: translateY(-2px); } .pc-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.1); } .pc-stat { display: flex; flex-direction: column; align-items: center; gap: 4px; } .pc-stat .pp-tier-amount { color: #fff; font-size: 40px; background: linear-gradient(135deg, #fff 0%, var(--pc-accent, #FF6B9D) 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .pc-stat span:last-child { font-size: 13px; color: rgba(255,255,255,0.6); text-transform: uppercase; letter-spacing: 0.08em; font-weight: 600; } /* ============================================================ SECTIONS_2 — 5 более секций ============================================================ */ /* === 1. PREMIUM HERO SPLIT (brutalist) === */ .pp-split { position: relative; padding: clamp(60px, 10vh, 100px) clamp(20px, 5vw, 80px); background: #faf6ee; color: #18120c; overflow: hidden; } .pps-halftone { position: absolute; inset: 0; background-image: radial-gradient(circle, rgba(24,18,12,0.18) 1px, transparent 1.5px); background-size: 22px 22px; mask-image: radial-gradient(ellipse at 75% 45%, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at 75% 45%, #000 30%, transparent 80%); pointer-events: none; opacity: 0.55; } .pps-grid { display: grid; grid-template-columns: 1.2fr 1fr; gap: 60px; align-items: center; max-width: 1400px; margin: 0 auto; } @media (max-width: 900px) { .pps-grid { grid-template-columns: 1fr; } } .pps-tag { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--pps-accent, #FF6B9D); margin-bottom: 32px; } .pps-tag-line { width: 32px; height: 1px; background: var(--pps-accent, #FF6B9D); } .pps-headline { font-family: var(--serif, serif); font-size: clamp(44px, 8vw, 96px); font-weight: 900; line-height: 1.02; letter-spacing: -0.04em; margin: 0 0 32px; color: #18120c; } .pps-highlight { font-style: italic; font-weight: 900; background: linear-gradient(135deg, var(--pps-accent, #FF6B9D), #FFD49A); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; } .pps-subline { font-size: clamp(16px, 1.4vw, 19px); line-height: 1.55; color: #6B6580; margin: 0 0 40px; max-width: 480px; } .pps-cta-row { display: flex; gap: 14px; flex-wrap: wrap; } .pps-cta { padding: 16px 32px; font-family: inherit; font-size: 15px; font-weight: 700; border: 2px solid #18120c; background: transparent; color: #18120c; cursor: pointer; border-radius: 0; transition: background 200ms, color 200ms; } .pps-cta:hover { background: #18120c; color: #faf6ee; } .pps-cta--primary { background: #18120c; color: #faf6ee; } .pps-cta--primary:hover { background: var(--pps-accent, #FF6B9D); border-color: var(--pps-accent, #FF6B9D); } .pps-visual { position: relative; } .pps-visual img { width: 100%; height: auto; display: block; filter: contrast(1.05) saturate(1.1); box-shadow: 24px 24px 0 var(--pps-accent, #FF6B9D); } .pps-visual-tag { position: absolute; bottom: -32px; right: 0; font-family: var(--mono, monospace); font-size: 14px; letter-spacing: 0.1em; color: #18120c; } /* === 2. PREMIUM STATS === */ .pp-stats { padding: clamp(60px, 10vh, 100px) clamp(20px, 5vw, 80px); background: #faf6ee; color: #18120c; } .pps-stats-tag { display: block; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #6B6580; margin-bottom: 16px; text-align: center; } .pps-stats-title { font-family: var(--serif, serif); font-size: clamp(36px, 5vw, 56px); font-weight: 900; text-align: center; margin: 0 0 60px; letter-spacing: -0.02em; } .pps-stats-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 32px; max-width: 1200px; margin: 0 auto; } @media (max-width: 900px) { .pps-stats-grid { grid-template-columns: repeat(2, 1fr); } } .pps-kpi { position: relative; padding: 32px 0 0; display: flex; flex-direction: column; gap: 8px; } .pps-kpi-bar { position: absolute; top: 0; left: 0; right: 0; height: 2px; background: var(--pps-kpi-accent, #FF6B9D); } .pps-kpi-value { font-family: var(--serif, serif); font-size: clamp(48px, 5vw, 72px); font-weight: 900; color: #18120c; line-height: 1; letter-spacing: -0.03em; } .pps-kpi-label { font-size: 15px; font-weight: 700; color: #18120c; margin-top: 8px; } .pps-kpi-sublabel { font-size: 13px; color: #6B6580; } /* === 3. PREMIUM TESTIMONIALS (marquee) === */ .pp-testimonials { padding: clamp(60px, 10vh, 100px) 0; background: #faf6ee; color: #18120c; overflow: hidden; } .ppt-header { text-align: center; padding: 0 24px; margin-bottom: 60px; } .ppt-header h2 { font-family: var(--serif, serif); font-size: clamp(36px, 5vw, 56px); font-weight: 900; margin: 0 0 16px; letter-spacing: -0.02em; } .ppt-header p { font-size: 17px; color: #6B6580; margin: 0; } .ppt-marquee { position: relative; overflow: hidden; } .ppt-track { display: flex; gap: 24px; width: max-content; animation: ppt-scroll linear infinite; } @keyframes ppt-scroll { from { transform: translateX(0); } to { transform: translateX(-50%); } } .ppt-card { flex-shrink: 0; width: 380px; padding: 28px; background: #fff; border-radius: 18px; border: 1px solid rgba(24,18,12,0.08); box-shadow: 0 4px 20px rgba(24,18,12,0.04); display: flex; flex-direction: column; gap: 16px; } .ppt-stars { color: #FFD49A; letter-spacing: 2px; font-size: 16px; } .ppt-quote { font-size: 16px; line-height: 1.55; color: #18120c; margin: 0; } .ppt-author { display: flex; align-items: center; gap: 12px; margin-top: auto; } .ppt-avatar { width: 44px; height: 44px; border-radius: 50%; background-size: cover; background-position: center; flex-shrink: 0; } .ppt-name { font-size: 14px; font-weight: 700; color: #18120c; } .ppt-role { font-size: 13px; color: #6B6580; } /* === 4. PREMIUM LOGO CLOUD === */ .pp-logos { padding: clamp(50px, 8vh, 80px) 0; background: #faf6ee; color: #18120c; } .ppl-caption { text-align: center; font-family: var(--mono, monospace); font-size: 12px; letter-spacing: 0.12em; text-transform: uppercase; color: #6B6580; margin: 0 0 40px; } .ppl-marquee { position: relative; overflow: hidden; } .ppl-track { display: flex; gap: 48px; width: max-content; animation: ppt-scroll linear infinite; padding: 0 24px; } .ppl-item { flex-shrink: 0; font-family: var(--serif, serif); font-size: clamp(20px, 2.5vw, 32px); font-weight: 700; color: #18120c; padding: 12px 24px; letter-spacing: -0.01em; } .pp-logos--mono .ppl-item { filter: grayscale(100%); opacity: 0.55; transition: opacity 200ms, filter 200ms; } .pp-logos--mono .ppl-item:hover { opacity: 1; filter: grayscale(0); } .ppl-fade { position: absolute; top: 0; bottom: 0; width: 120px; pointer-events: none; z-index: 2; } .ppl-fade--left { left: 0; background: linear-gradient(to right, #faf6ee, transparent); } .ppl-fade--right { right: 0; background: linear-gradient(to left, #faf6ee, transparent); } /* === 5. PREMIUM FAQ === */ .pp-faq { padding: clamp(60px, 10vh, 100px) clamp(20px, 5vw, 80px); background: #faf6ee; color: #18120c; } .ppf-grid { display: grid; grid-template-columns: 1fr 1.5fr; gap: 80px; max-width: 1200px; margin: 0 auto; } @media (max-width: 900px) { .ppf-grid { grid-template-columns: 1fr; gap: 32px; } } .ppf-left { position: sticky; top: 32px; align-self: start; } .ppf-tag { display: inline-block; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #6B6580; margin-bottom: 16px; } .ppf-left h2 { font-family: var(--serif, serif); font-size: clamp(36px, 5vw, 56px); font-weight: 900; margin: 0 0 16px; letter-spacing: -0.02em; } .ppf-left p { font-size: 16px; color: #6B6580; margin: 0; } .ppf-right { display: flex; flex-direction: column; gap: 12px; } .ppf-item { border: 1px solid rgba(24,18,12,0.1); border-radius: 14px; background: #fff; overflow: hidden; transition: border-color 200ms, box-shadow 200ms; } .ppf-item--open { border-color: rgba(24,18,12,0.25); box-shadow: 0 8px 24px rgba(24,18,12,0.06); } .ppf-q { width: 100%; padding: 20px 24px; background: transparent; border: none; cursor: pointer; display: flex; justify-content: space-between; align-items: center; font-family: inherit; font-size: 16px; font-weight: 700; color: #18120c; text-align: left; } .ppf-icon { font-family: var(--mono, monospace); font-size: 22px; font-weight: 300; color: #6B6580; flex-shrink: 0; margin-left: 16px; } .ppf-a { font-size: 15px; line-height: 1.6; color: #6B6580; margin: 0; padding: 0 24px 24px; } /* ============================================================ SECTIONS_3 — PremiumNav + 5 секций (e-commerce / mobile / ai) ============================================================ */ /* --- PremiumNav (sticky tabs) --- */ .pnav { position: sticky; top: 0; z-index: 50; width: 100%; background: rgba(250, 246, 238, 0.85); backdrop-filter: saturate(180%) blur(14px); -webkit-backdrop-filter: saturate(180%) blur(14px); border-bottom: 1px solid rgba(24,18,12,0.07); } .pnav-inner { max-width: 1400px; margin: 0 auto; padding: 12px 24px; display: flex; align-items: center; gap: 24px; } .pnav-brand { font-family: var(--mono, "JetBrains Mono", monospace); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: #18120c; flex-shrink: 0; } .pnav-tabs { display: flex; gap: 4px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .pnav-tabs::-webkit-scrollbar { display: none; } .pnav-tab { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: 999px; text-decoration: none; font-size: 13px; font-weight: 600; color: rgba(24,18,12,0.65); background: transparent; transition: all 180ms ease; white-space: nowrap; } .pnav-tab:hover { color: #18120c; background: rgba(24,18,12,0.06); } .pnav-tab.is-active { color: #faf6ee; background: #18120c; } .pnav-ico { font-size: 14px; line-height: 1; } /* --- PremiumProductHero (e-commerce) --- */ .pph { background: #faf6ee; color: #18120c; padding: 80px 24px; } .pph-inner { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.2fr 1fr; gap: 56px; align-items: center; } .pph-photo-wrap { display: contents; } .pph-photo-wrap .tg-stage { padding: 0; } .pph-photo-wrap .tg-card { border-radius: 24px; overflow: hidden; } .pph-photo { position: relative; border-radius: 24px; overflow: hidden; aspect-ratio: 4/5; background: #ece4d4; } .pph-photo img { width: 100%; height: 100%; object-fit: cover; display: block; } .pph-foil { position: absolute; inset: 0; mix-blend-mode: overlay; opacity: 0.4; pointer-events: none; } .pph-badge { position: absolute; top: 20px; left: 20px; padding: 8px 14px; background: #18120c; color: #faf6ee; font-family: var(--mono, monospace); font-size: 11px; font-weight: 700; letter-spacing: 0.12em; border-radius: 999px; } .pph-brand { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--accent, #C99A5C); margin-bottom: 14px; } .pph-title { font-family: var(--serif, "Playfair Display", Georgia, serif); font-size: 48px; font-weight: 700; margin: 0 0 16px; line-height: 1.05; letter-spacing: -0.02em; } .pph-desc { font-size: 16px; line-height: 1.6; color: rgba(24,18,12,0.7); margin: 0 0 28px; max-width: 480px; } .pph-row { margin-bottom: 18px; } .pph-row-label { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: rgba(24,18,12,0.55); margin-bottom: 10px; } .pph-swatches { display: flex; gap: 10px; align-items: center; } .pph-swatch { width: 36px; height: 36px; border-radius: 999px; border: 2px solid rgba(24,18,12,0.12); cursor: pointer; padding: 0; transition: transform 160ms ease, border-color 160ms ease; } .pph-swatch:hover { transform: scale(1.08); } .pph-swatch.is-on { border-color: var(--accent, #C99A5C); transform: scale(1.1); } .pph-swatch-name { margin-left: 8px; font-size: 13px; color: rgba(24,18,12,0.75); } .pph-sizes { display: flex; gap: 8px; flex-wrap: wrap; } .pph-size { padding: 10px 16px; font-family: var(--mono, monospace); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; background: #fff; color: #18120c; border: 1px solid rgba(24,18,12,0.12); border-radius: 8px; cursor: pointer; transition: all 160ms ease; } .pph-size:hover { border-color: rgba(24,18,12,0.4); } .pph-size.is-on { background: #18120c; color: #faf6ee; border-color: #18120c; } .pph-prices { display: flex; align-items: baseline; gap: 14px; margin: 24px 0 22px; } .pph-price { font-family: var(--serif, serif); font-size: 38px; font-weight: 700; color: #18120c; } .pph-price-old { font-size: 18px; color: rgba(24,18,12,0.45); text-decoration: line-through; } .pph-ctas { display: flex; gap: 12px; margin-bottom: 28px; } .pph-cta { flex: 1; padding: 16px 24px; background: #18120c; color: #faf6ee; border: none; border-radius: 12px; font-family: inherit; font-size: 15px; font-weight: 700; letter-spacing: 0.02em; cursor: pointer; transition: transform 160ms ease, box-shadow 160ms ease; } .pph-cta:hover { transform: translateY(-2px); box-shadow: 0 14px 28px rgba(24,18,12,0.18); } .pph-cta-ghost { padding: 16px 20px; background: transparent; color: #18120c; border: 1px solid rgba(24,18,12,0.2); border-radius: 12px; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; } .pph-trust { display: grid; grid-template-columns: 1fr; gap: 8px; padding-top: 20px; border-top: 1px solid rgba(24,18,12,0.08); } .pph-trust-item { display: flex; gap: 10px; align-items: center; font-size: 13px; color: rgba(24,18,12,0.7); } .pph-trust-ico { font-size: 16px; } @media (max-width: 880px) { .pph-inner { grid-template-columns: 1fr; gap: 32px; } .pph-title { font-size: 34px; } } /* --- PremiumProductGrid (3-up cards) --- */ .ppg { background: #faf6ee; padding: 80px 24px; } .ppg-head { max-width: 1280px; margin: 0 auto 40px; text-align: center; } .ppg-tag { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(24,18,12,0.55); margin-bottom: 14px; } .ppg-title { font-family: var(--serif, serif); font-size: 40px; font-weight: 700; margin: 0 0 12px; letter-spacing: -0.02em; } .ppg-sub { font-size: 15px; color: rgba(24,18,12,0.65); margin: 0; } .ppg-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; } .ppg-card { background: #fff; border-radius: 18px; overflow: hidden; border: 1px solid rgba(24,18,12,0.06); transition: transform 240ms cubic-bezier(.2,.7,.3,1), box-shadow 240ms ease; } .ppg-card:hover { transform: translateY(-6px); box-shadow: 0 20px 48px rgba(24,18,12,0.12); } .ppg-photo { position: relative; aspect-ratio: 4/5; overflow: hidden; background: #ece4d4; } .ppg-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 480ms cubic-bezier(.2,.7,.3,1); } .ppg-card:hover .ppg-photo img { transform: scale(1.04); } .ppg-badge { position: absolute; top: 14px; left: 14px; padding: 6px 10px; color: #fff; font-family: var(--mono, monospace); font-size: 11px; font-weight: 700; letter-spacing: 0.1em; border-radius: 6px; } .ppg-quick { position: absolute; bottom: 14px; left: 50%; transform: translateX(-50%) translateY(20px); padding: 12px 22px; background: rgba(24,18,12,0.95); color: #faf6ee; border: none; border-radius: 999px; font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer; opacity: 0; transition: opacity 240ms ease, transform 240ms ease; white-space: nowrap; } .ppg-card:hover .ppg-quick { opacity: 1; transform: translateX(-50%) translateY(0); } .ppg-info { padding: 18px 20px 22px; } .ppg-cat { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.12em; color: rgba(24,18,12,0.5); margin-bottom: 6px; } .ppg-name { font-size: 16px; font-weight: 700; color: #18120c; margin-bottom: 8px; line-height: 1.35; } .ppg-prices { display: flex; align-items: baseline; gap: 10px; } .ppg-price { font-family: var(--serif, serif); font-size: 22px; font-weight: 700; color: #18120c; } .ppg-price-old { font-size: 14px; color: rgba(24,18,12,0.4); text-decoration: line-through; } .ppg-foot { max-width: 1280px; margin: 32px auto 0; text-align: center; } .ppg-link { font-family: var(--mono, monospace); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: #18120c; text-decoration: none; padding: 12px 0; border-bottom: 2px solid #18120c; } /* --- PremiumMobileShowcase (mobile-app hero) --- */ .pms { position: relative; background: linear-gradient(180deg, #0F0B16 0%, #1A1226 100%); color: #fff; padding: 100px 24px; overflow: hidden; } .pms-aurora { position: absolute; inset: 0; pointer-events: none; opacity: 0.85; } .pms-inner { position: relative; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 0.9fr; gap: 56px; align-items: center; } .pms-eyebrow { display: inline-block; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; color: rgba(255,255,255,0.7); padding: 6px 12px; border: 1px solid rgba(255,255,255,0.15); border-radius: 999px; margin-bottom: 22px; } .pms-headline { font-family: var(--serif, serif); font-size: 56px; font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; margin: 0 0 18px; } .pms-sub { font-size: 17px; line-height: 1.6; color: rgba(255,255,255,0.72); margin: 0 0 32px; max-width: 520px; } .pms-stores { display: flex; gap: 12px; margin-bottom: 36px; flex-wrap: wrap; } .pms-store { display: inline-flex; align-items: center; gap: 12px; padding: 12px 22px; background: #fff; color: #18120c; text-decoration: none; border-radius: 14px; transition: transform 200ms ease; } .pms-store:hover { transform: translateY(-2px); } .pms-store-ico { font-size: 22px; line-height: 1; } .pms-store-sm { display: block; font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; opacity: 0.7; } .pms-store-lg { display: block; font-size: 17px; font-weight: 700; letter-spacing: -0.01em; } .pms-stats { display: flex; gap: 22px; align-items: center; padding-top: 28px; border-top: 1px solid rgba(255,255,255,0.1); } .pms-stat-v { font-family: var(--serif, serif); font-size: 22px; font-weight: 700; } .pms-stat-l { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.65; margin-top: 2px; } .pms-stat-sep { width: 1px; height: 32px; background: rgba(255,255,255,0.15); } .pms-phones { position: relative; height: 620px; } .pms-phone { position: absolute; width: 260px; height: 560px; background: #08060e; border-radius: 38px; border: 8px solid #1c1830; box-shadow: 0 40px 80px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.05) inset; overflow: hidden; } .pms-phone-back { left: 8%; top: 4%; transform: rotate(-8deg); opacity: 0.7; } .pms-phone-front { right: 0; top: 30px; transform: rotate(4deg); z-index: 2; } .pms-screen { position: absolute; inset: 0; border-radius: 30px; overflow: hidden; } .pms-screen img { width: 100%; height: 100%; object-fit: cover; display: block; } .pms-notch { position: absolute; top: 14px; left: 50%; transform: translateX(-50%); width: 70px; height: 22px; background: #08060e; border-radius: 999px; z-index: 3; } @media (max-width: 880px) { .pms-inner { grid-template-columns: 1fr; } .pms-headline { font-size: 40px; } .pms-phones { height: 480px; max-width: 520px; margin: 0 auto; } .pms-phone { width: 220px; height: 470px; } } /* --- PremiumAITerminal (AI/dev hero) --- */ .pat { position: relative; background: #0B0E13; color: #E8EDF2; padding: 100px 24px; overflow: hidden; } .pat-fluid { position: absolute; inset: 0; opacity: 0.35; pointer-events: none; } .pat-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(255,255,255,0.04) 1px, transparent 1px), linear-gradient(90deg, rgba(255,255,255,0.04) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse at top, #000 30%, transparent 80%); -webkit-mask-image: radial-gradient(ellipse at top, #000 30%, transparent 80%); pointer-events: none; } .pat-inner { position: relative; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.05fr; gap: 56px; align-items: center; } .pat-eyebrow { display: inline-block; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent, #5BE39E); padding: 6px 12px; border: 1px solid color-mix(in srgb, var(--accent, #5BE39E) 40%, transparent); border-radius: 999px; margin-bottom: 22px; } .pat-headline { font-family: var(--serif, "Playfair Display", Georgia, serif); font-size: 56px; font-weight: 800; line-height: 1.04; letter-spacing: -0.02em; margin: 0 0 20px; } .pat-highlight { background: linear-gradient(120deg, var(--accent, #5BE39E), #5BC3E3); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: italic; } .pat-sub { font-size: 17px; line-height: 1.6; color: rgba(232,237,242,0.72); margin: 0 0 32px; max-width: 520px; } .pat-ctas { display: flex; gap: 14px; align-items: center; margin-bottom: 24px; flex-wrap: wrap; } .pat-install { display: inline-flex; align-items: center; gap: 10px; padding: 12px 14px 12px 18px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; font-family: var(--mono, monospace); font-size: 14px; color: #E8EDF2; } .pat-install-pre { color: var(--accent, #5BE39E); } .pat-install code { font-family: inherit; color: #E8EDF2; } .pat-copy { margin-left: 6px; padding: 5px 10px; background: rgba(255,255,255,0.07); border: none; border-radius: 6px; font-family: var(--mono, monospace); font-size: 11px; color: rgba(232,237,242,0.7); cursor: pointer; letter-spacing: 0.08em; text-transform: uppercase; } .pat-copy:hover { background: rgba(255,255,255,0.12); color: #fff; } .pat-docs { font-family: var(--mono, monospace); font-size: 13px; font-weight: 700; letter-spacing: 0.08em; color: var(--accent, #5BE39E); text-decoration: none; } .pat-trust { display: flex; gap: 8px; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(232,237,242,0.5); flex-wrap: wrap; } .pat-term { background: #14181F; border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px rgba(0,0,0,0.5), 0 0 80px color-mix(in srgb, var(--accent, #5BE39E) 18%, transparent); } .pat-term-bar { display: flex; align-items: center; gap: 8px; padding: 12px 16px; background: #1B2029; border-bottom: 1px solid rgba(255,255,255,0.06); } .pat-dot { width: 12px; height: 12px; border-radius: 999px; } .pat-dot-r { background: #FF5F57; } .pat-dot-y { background: #FEBC2E; } .pat-dot-g { background: #28C840; } .pat-term-title { margin-left: 12px; font-family: var(--mono, monospace); font-size: 12px; color: rgba(232,237,242,0.55); } .pat-term-body { padding: 20px 22px; font-family: var(--mono, "JetBrains Mono", monospace); font-size: 13px; line-height: 1.7; min-height: 280px; position: relative; } .pat-line { white-space: pre-wrap; } .pat-line-prompt { color: #E8EDF2; } .pat-line-stdout { color: rgba(232,237,242,0.75); } .pat-line-comment { color: rgba(232,237,242,0.4); font-style: italic; } .pat-line-err { color: #FF8585; } .pat-caret { display: inline-block; width: 8px; height: 14px; background: var(--accent, #5BE39E); margin-left: 8px; vertical-align: middle; animation: pat-blink 1s steps(2) infinite; } @keyframes pat-blink { 50% { opacity: 0; } } @media (max-width: 880px) { .pat-inner { grid-template-columns: 1fr; } .pat-headline { font-size: 38px; } } /* --- PremiumIntegrations (4×3 grid) --- */ .pin { background: #0F1217; color: #E8EDF2; padding: 100px 24px; } .pin-head { max-width: 1280px; margin: 0 auto 48px; text-align: center; } .pin-tag { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--accent, #5BE39E); margin-bottom: 14px; } .pin-title { font-family: var(--serif, serif); font-size: 40px; font-weight: 700; margin: 0 0 12px; letter-spacing: -0.02em; } .pin-sub { font-size: 15px; color: rgba(232,237,242,0.65); margin: 0; max-width: 540px; margin: 0 auto; } .pin-grid { max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; } .pin-card { position: relative; padding: 22px 20px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.06); border-radius: 14px; transition: all 220ms ease; cursor: pointer; } .pin-card:hover { background: rgba(255,255,255,0.05); border-color: color-mix(in srgb, var(--accent, #5BE39E) 35%, transparent); box-shadow: 0 8px 28px color-mix(in srgb, var(--accent, #5BE39E) 15%, transparent); transform: translateY(-3px); } .pin-logo { width: 44px; height: 44px; border-radius: 10px; background: linear-gradient(135deg, rgba(255,255,255,0.08), rgba(255,255,255,0.02)); border: 1px solid rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; font-family: var(--mono, monospace); font-size: 14px; font-weight: 700; color: #E8EDF2; margin-bottom: 14px; } .pin-name { font-size: 15px; font-weight: 700; color: #E8EDF2; margin-bottom: 3px; } .pin-cat { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(232,237,242,0.45); } .pin-arrow { position: absolute; top: 22px; right: 20px; color: rgba(232,237,242,0.3); font-size: 16px; transition: transform 200ms ease, color 200ms ease; } .pin-card:hover .pin-arrow { color: var(--accent, #5BE39E); transform: translateX(3px); } @media (max-width: 980px) { .pin-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 720px) { .pin-grid { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ SCREENS_1 — отдельные премиум-экраны для витрины /premium-1 ============================================================ */ /* --- Premium Screen Lookbook (fashion editorial) --- */ .psl { position: relative; min-height: 100vh; background: #18120c; color: #fff; display: flex; overflow: hidden; } .psl-photo { position: relative; flex: 1; overflow: hidden; background: #1a1a1f; } .psl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 1200ms cubic-bezier(.2,.7,.3,1); filter: saturate(0.85) contrast(0.95); } .psl-photo:hover img { transform: scale(1.05); } .psl-foil { position: absolute; inset: 0; mix-blend-mode: overlay; opacity: 0.22; pointer-events: none; } .psl-tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(15,10,5,0.5) 0%, rgba(15,10,5,0.15) 40%, rgba(15,10,5,0.55) 100%); pointer-events: none; } .psl-divider { position: absolute; top: 8%; bottom: 8%; left: 50%; width: 1px; background: rgba(255,255,255,0.18); transform: translateX(-50%); pointer-events: none; z-index: 2; } .psl-overlay { position: absolute; inset: 0; display: grid; grid-template-rows: auto 1fr auto; padding: 48px 56px; z-index: 3; pointer-events: none; } .psl-overlay > * { pointer-events: auto; } .psl-meta-top { display: flex; justify-content: space-between; font-family: var(--mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.7); } .psl-center { align-self: center; text-align: center; } .psl-eyebrow { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.32em; color: rgba(255,255,255,0.7); margin-bottom: 28px; } .psl-brand { font-family: var(--serif, "Playfair Display", Georgia, serif); font-size: clamp(80px, 14vw, 200px); font-weight: 800; line-height: 0.85; letter-spacing: -0.04em; margin: 0; text-shadow: 0 4px 20px rgba(0,0,0,0.35); } .psl-look { margin-top: 28px; font-family: var(--mono, monospace); font-size: 13px; letter-spacing: 0.32em; color: rgba(255,255,255,0.85); } .psl-meta-bottom { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.85); } .psl-meta-bottom > span:first-child { text-align: left; } .psl-meta-bottom > span:last-child { text-align: right; } .psl-cta { display: inline-flex; align-items: center; gap: 12px; padding: 14px 28px; border: 1px solid rgba(255,255,255,0.4); border-radius: 999px; text-decoration: none; color: #fff; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.22em; background: rgba(255,255,255,0.04); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: background 240ms ease, transform 240ms ease, border-color 240ms ease; } .psl-cta:hover { background: rgba(255,255,255,0.16); border-color: rgba(255,255,255,0.8); transform: translateY(-2px); } .psl-arrow { display: inline-block; font-size: 14px; transition: transform 240ms ease; } .psl-cta:hover .psl-arrow { transform: translateX(4px); } .psl-marquee { position: absolute; bottom: 0; left: 0; right: 0; background: #f5f1ea; color: #18120c; overflow: hidden; z-index: 4; border-top: 1px solid rgba(24,18,12,0.08); } .psl-marquee-track { display: inline-flex; white-space: nowrap; padding: 14px 0; font-family: var(--serif, serif); font-style: italic; font-size: 18px; letter-spacing: 0.04em; animation: psl-marq 40s linear infinite; } .psl-marquee-track > span { padding-right: 32px; } .psl-marquee-track em { font-style: normal; opacity: 0.4; margin: 0 12px; } @keyframes psl-marq { from { transform: translateX(0); } to { transform: translateX(-50%); } } @media (max-width: 880px) { .psl-overlay { padding: 32px 24px; } .psl-brand { font-size: clamp(60px, 18vw, 100px); } .psl-meta-top, .psl-meta-bottom { font-size: 9px; } .psl-meta-bottom { grid-template-columns: 1fr; gap: 16px; text-align: center; } .psl-meta-bottom > span:first-child, .psl-meta-bottom > span:last-child { text-align: center; } } /* --- Premium Screen Restaurant (michelin tasting menu) --- */ .psr { position: relative; min-height: 100vh; background: #0c0907; color: #f5ede1; display: grid; grid-template-columns: 0.4fr 0.6fr; overflow: hidden; } .psr-photo { position: relative; overflow: hidden; background: #0c0907; order: 2; } .psr-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.05) contrast(1.04); } .psr-foil { position: absolute; inset: 0; mix-blend-mode: overlay; opacity: 0.28; pointer-events: none; } .psr-photo-vignette { position: absolute; inset: 0; background: radial-gradient(100% 70% at 70% 50%, transparent 0%, transparent 40%, rgba(12,9,7,0.5) 100%), linear-gradient(90deg, rgba(12,9,7,0.5) 0%, transparent 30%); pointer-events: none; } .psr-content { position: relative; order: 1; display: grid; grid-template-rows: auto 1fr auto; padding: 56px 56px 100px; z-index: 2; } .psr-michelin { display: inline-flex; align-items: center; gap: 14px; font-family: var(--mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.28em; color: #C9A36E; align-self: start; } .psr-stars { font-size: 14px; letter-spacing: 0.1em; color: #C9A36E; } .psr-mid { align-self: center; padding: 32px 0; } .psr-course-line { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.28em; color: #C9A36E; margin-bottom: 18px; } .psr-course-line em { font-style: normal; opacity: 0.5; margin: 0 8px; } .psr-restaurant { font-family: var(--mono, monospace); font-size: 13px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(245,237,225,0.55); margin-bottom: 24px; } .psr-dish { font-family: var(--serif, "Playfair Display", Georgia, serif); font-size: clamp(36px, 4.4vw, 64px); font-weight: 700; line-height: 1.04; letter-spacing: -0.02em; margin: 0 0 26px; color: #f5ede1; } .psr-italic { font-style: italic; color: #C9A36E; font-weight: 500; } .psr-desc { font-size: 15px; line-height: 1.65; color: rgba(245,237,225,0.72); margin: 0; max-width: 540px; } .psr-bottom { align-self: end; } .psr-tasting { padding-top: 32px; border-top: 1px solid rgba(201,163,110,0.25); display: flex; align-items: flex-end; justify-content: space-between; gap: 24px; flex-wrap: wrap; } .psr-tasting-label { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.32em; color: rgba(245,237,225,0.5); margin-bottom: 6px; } .psr-tasting-price { font-family: var(--serif, serif); font-size: 22px; letter-spacing: 0.04em; color: #f5ede1; } .psr-tasting-price em { font-style: normal; color: #C9A36E; margin: 0 8px; } .psr-cta { display: inline-flex; align-items: center; gap: 12px; padding: 16px 30px; background: #C9A36E; color: #0c0907; text-decoration: none; font-family: var(--mono, monospace); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; border-radius: 0; transition: background 240ms ease, transform 240ms ease; } .psr-cta:hover { background: #d9b486; transform: translateY(-2px); } .psr-cta .psr-arrow { transition: transform 240ms ease; } .psr-cta:hover .psr-arrow { transform: translateX(4px); } .psr-progress { position: absolute; bottom: 0; left: 0; right: 0; display: grid; grid-template-columns: repeat(9, 1fr); z-index: 4; background: rgba(12,9,7,0.92); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); border-top: 1px solid rgba(201,163,110,0.15); } .psr-step { padding: 14px 8px; text-align: center; border-right: 1px solid rgba(245,237,225,0.06); color: rgba(245,237,225,0.4); transition: color 240ms ease, background 240ms ease; } .psr-step:last-child { border-right: none; } .psr-step:hover { color: rgba(245,237,225,0.85); background: rgba(201,163,110,0.04); } .psr-step-n { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.2em; margin-bottom: 2px; } .psr-step-k { font-family: var(--mono, monospace); font-size: 9px; letter-spacing: 0.22em; opacity: 0.7; } .psr-step.is-active { color: #C9A36E; background: rgba(201,163,110,0.06); position: relative; } .psr-step.is-active::after { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 2px; background: #C9A36E; } @media (max-width: 980px) { .psr { grid-template-columns: 1fr; min-height: auto; } .psr-photo { order: 1; height: 40vh; min-height: 320px; } .psr-content { order: 2; padding: 32px 24px 100px; } .psr-dish { font-size: clamp(30px, 7vw, 42px); } .psr-progress { grid-template-columns: repeat(9, 1fr); } .psr-step-k { display: none; } } /* ============================================================ SCREENS_2 — 6 экранов для витрины /premium-2 ============================================================ */ /* --- 1. WATCH — luxury horology --- */ .psw { position: relative; min-height: 100vh; background: #14141a; color: #d4d4dc; padding: 40px 56px 32px; overflow: hidden; display: grid; grid-template-rows: 1fr auto; gap: 32px; } .psw-bg { position: absolute; inset: 0; pointer-events: none; } .psw-foil { position: absolute; inset: 0; mix-blend-mode: overlay; opacity: 0.32; pointer-events: none; } .psd-stars { position: absolute; inset: 0; opacity: 0.55; pointer-events: none; } .psc-glitch { position: absolute; inset: 0; opacity: 0.45; mix-blend-mode: screen; pointer-events: none; } .psa-parallax { position: absolute; inset: 0; opacity: 0.4; pointer-events: none; mix-blend-mode: multiply; } .pss-fluid { position: absolute; inset: 0; mix-blend-mode: screen; opacity: 0.55; pointer-events: none; } .psm-vortex { position: absolute; inset: 0; mix-blend-mode: screen; opacity: 0.6; pointer-events: none; } .psw-glow { position: absolute; left: 50%; top: 50%; width: 720px; height: 720px; transform: translate(-50%, -50%); background: radial-gradient(closest-side, rgba(184,151,102,0.35) 0%, rgba(184,151,102,0.08) 35%, transparent 70%); filter: blur(10px); } .psw-grid { position: relative; display: grid; grid-template-columns: 1fr 1.4fr 1fr; gap: 32px; align-items: center; min-height: 0; } .psw-side { font-family: var(--mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.18em; color: rgba(212,212,220,0.6); text-transform: uppercase; } .psw-side-l { align-self: stretch; display: flex; flex-direction: column; gap: 24px; } .psw-brand { font-family: var(--serif, "Playfair Display", Georgia, serif); font-size: 26px; font-weight: 700; line-height: 1.05; color: #f0f0f4; letter-spacing: -0.01em; text-transform: none; } .psw-since { font-size: 10px; opacity: 0.5; letter-spacing: 0.22em; } .psw-meta { margin-top: auto; } .psw-meta-row { display: flex; justify-content: space-between; gap: 12px; padding: 8px 0; border-bottom: 1px solid rgba(212,212,220,0.08); font-size: 10px; } .psw-meta-row > span:first-child { opacity: 0.5; } .psw-meta-row > span:last-child { color: #B89766; } .psw-photo { position: relative; display: flex; justify-content: center; align-items: center; height: 100%; min-height: 460px; } .psw-photo img { max-width: 100%; max-height: 70vh; object-fit: contain; filter: drop-shadow(0 20px 60px rgba(0,0,0,0.6)) drop-shadow(0 0 30px rgba(184,151,102,0.18)); transition: transform 800ms cubic-bezier(.2,.7,.3,1); } .psw-photo:hover img { transform: scale(1.04); } .psw-side-r { align-self: start; } .psw-spec-title { font-size: 10px; letter-spacing: 0.32em; color: #B89766; margin-bottom: 18px; } .psw-specs { list-style: none; margin: 0; padding: 0; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.06em; } .psw-specs li { display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; padding: 9px 0; border-bottom: 1px solid rgba(212,212,220,0.08); } .psw-specs li span { opacity: 0.5; text-transform: uppercase; letter-spacing: 0.18em; } .psw-specs li strong { font-weight: 500; color: #f0f0f4; } .psw-foot { position: relative; display: grid; grid-template-columns: 1fr auto; align-items: end; gap: 24px; padding-top: 24px; border-top: 1px solid rgba(212,212,220,0.1); } .psw-model { display: flex; align-items: baseline; gap: 14px; } .psw-model-line { font-family: var(--serif, serif); font-size: clamp(32px, 4vw, 50px); font-weight: 700; letter-spacing: -0.02em; color: #f0f0f4; } .psw-model-num { font-family: var(--mono, monospace); font-size: 22px; color: #B89766; letter-spacing: 0.04em; } .psw-foot-r { display: flex; align-items: center; gap: 28px; } .psw-price { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.22em; color: rgba(212,212,220,0.55); } .psw-price strong { color: #f0f0f4; font-weight: 600; letter-spacing: 0.04em; font-size: 18px; } .psw-cta { display: inline-flex; align-items: center; gap: 14px; padding: 16px 30px; border: 1px solid rgba(184,151,102,0.5); color: #B89766; text-decoration: none; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.28em; background: transparent; transition: background 240ms ease, color 240ms ease, border-color 240ms ease; } .psw-cta em { font-style: normal; transition: transform 240ms ease; } .psw-cta:hover { background: #B89766; color: #14141a; border-color: #B89766; } .psw-cta:hover em { transform: translateX(4px); } @media (max-width: 1024px) { .psw { padding: 32px 24px; } .psw-grid { grid-template-columns: 1fr; grid-template-rows: auto auto auto; } .psw-side-l, .psw-side-r { flex-direction: column; } .psw-photo { min-height: 320px; } } /* --- 2. DASHBOARD — fintech --- */ .psd { position: relative; min-height: 100vh; background: #0a0e14; color: #E8EDF2; padding: 40px 32px; overflow: hidden; display: flex; align-items: center; } .psd-grid-bg { position: absolute; inset: 0; background-image: linear-gradient(rgba(91,227,158,0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(91,227,158,0.05) 1px, transparent 1px); background-size: 40px 40px; mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); } .psd-glow { position: absolute; top: 10%; right: 5%; width: 600px; height: 600px; background: radial-gradient(closest-side, rgba(91,227,158,0.18), transparent 70%); filter: blur(8px); pointer-events: none; } .psd-shell { position: relative; width: 100%; max-width: 1280px; margin: 0 auto; background: rgba(20,26,36,0.6); border: 1px solid rgba(255,255,255,0.06); border-radius: 24px; backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: 0 50px 120px rgba(0,0,0,0.4); overflow: hidden; } .psd-top { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 32px; padding: 20px 28px; border-bottom: 1px solid rgba(255,255,255,0.06); } .psd-logo { font-family: var(--mono, monospace); font-size: 13px; letter-spacing: 0.16em; font-weight: 700; display: inline-flex; align-items: center; gap: 10px; } .psd-logo em { font-style: normal; opacity: 0.4; } .psd-dot { width: 8px; height: 8px; border-radius: 999px; background: #5BE39E; box-shadow: 0 0 10px #5BE39E; } .psd-tabs { display: flex; gap: 4px; justify-self: center; } .psd-tabs span { padding: 8px 16px; font-family: var(--mono, monospace); font-size: 12px; letter-spacing: 0.12em; color: rgba(232,237,242,0.5); border-radius: 8px; cursor: pointer; transition: all 200ms; } .psd-tabs span:hover { color: #fff; background: rgba(255,255,255,0.04); } .psd-tabs span.is-on { color: #fff; background: rgba(91,227,158,0.12); } .psd-user { display: flex; align-items: center; gap: 14px; } .psd-bell { width: 36px; height: 36px; border-radius: 999px; background: rgba(255,255,255,0.04); display: grid; place-items: center; font-size: 16px; color: rgba(232,237,242,0.7); } .psd-avatar { width: 36px; height: 36px; border-radius: 999px; background: linear-gradient(135deg, #5BE39E, #5BC3E3); } .psd-cols { display: grid; grid-template-columns: 1.5fr 1fr; gap: 0; } .psd-main { padding: 36px 32px; border-right: 1px solid rgba(255,255,255,0.06); } .psd-balance-label { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.22em; color: rgba(232,237,242,0.5); margin-bottom: 12px; } .psd-balance { font-family: var(--serif, serif); font-size: clamp(40px, 6vw, 72px); font-weight: 700; line-height: 1.0; letter-spacing: -0.02em; margin-bottom: 16px; } .psd-cents { color: rgba(232,237,242,0.5); font-size: 0.55em; } .psd-balance-meta { display: flex; gap: 16px; align-items: center; font-family: var(--mono, monospace); font-size: 13px; letter-spacing: 0.06em; margin-bottom: 32px; } .psd-pos { color: #5BE39E; } .psd-period { color: rgba(232,237,242,0.4); font-size: 11px; letter-spacing: 0.18em; } .psd-chart { height: 180px; background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.04); border-radius: 14px; padding: 16px; position: relative; } .psd-chart svg { width: 100%; height: 100%; display: block; } .psd-chart-x { display: flex; justify-content: space-between; font-family: var(--mono, monospace); font-size: 9px; letter-spacing: 0.18em; color: rgba(232,237,242,0.35); margin-top: 8px; } .psd-side { padding: 36px 28px; display: flex; flex-direction: column; } .psd-side-title { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.22em; color: rgba(232,237,242,0.5); margin-bottom: 16px; } .psd-positions { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; flex: 1; } .psd-positions li { display: grid; grid-template-columns: 1fr auto; padding: 12px 14px; background: rgba(255,255,255,0.025); border: 1px solid rgba(255,255,255,0.04); border-radius: 10px; transition: background 200ms; } .psd-positions li:hover { background: rgba(255,255,255,0.05); } .psd-pos-sym { font-family: var(--mono, monospace); font-size: 13px; font-weight: 700; letter-spacing: 0.04em; } .psd-pos-name { font-size: 11px; color: rgba(232,237,242,0.5); margin-top: 2px; } .psd-pos-r { text-align: right; } .psd-pos-price { font-family: var(--mono, monospace); font-size: 13px; font-weight: 600; } .psd-pos-chg { font-family: var(--mono, monospace); font-size: 11px; margin-top: 2px; letter-spacing: 0.04em; } .psd-pos-chg.is-pos { color: #5BE39E; } .psd-pos-chg.is-neg { color: #FF6B6B; } .psd-cta { margin-top: 16px; padding: 14px; background: #5BE39E; color: #0a0e14; border: none; border-radius: 10px; font-family: var(--mono, monospace); font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; cursor: pointer; transition: all 220ms; } .psd-cta:hover { background: #fff; transform: translateY(-1px); box-shadow: 0 8px 24px rgba(91,227,158,0.3); } @media (max-width: 960px) { .psd-top { grid-template-columns: 1fr; gap: 16px; } .psd-tabs { justify-self: stretch; overflow-x: auto; } .psd-cols { grid-template-columns: 1fr; } .psd-main { border-right: none; border-bottom: 1px solid rgba(255,255,255,0.06); } } /* --- 3. CONFERENCE — brutalist countdown --- */ .psc { position: relative; min-height: 100vh; background: #f5f1ea; color: #18120c; padding: 40px 56px; overflow: hidden; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 28px; } .psc-noise { position: absolute; inset: 0; background-image: radial-gradient(circle at 25% 30%, rgba(194,75,75,0.06), transparent 50%), radial-gradient(circle at 75% 70%, rgba(24,18,12,0.05), transparent 50%); pointer-events: none; } .psc-top { position: relative; display: flex; justify-content: space-between; align-items: center; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(24,18,12,0.65); } .psc-loc em { font-style: normal; opacity: 0.4; margin: 0 8px; } .psc-title { position: relative; text-align: center; } .psc-title h1 { font-family: var(--serif, serif); font-size: clamp(64px, 11vw, 160px); font-weight: 900; line-height: 0.88; letter-spacing: -0.04em; margin: 0; color: #18120c; } .psc-title h1 span { display: block; position: relative; } .psc-title h1 span::before { content: ""; position: absolute; left: -2px; top: 4px; right: -2px; bottom: -4px; background: linear-gradient(90deg, transparent, rgba(194,75,75,0.18), transparent); z-index: -1; filter: blur(8px); } .psc-italic { font-style: italic; color: #C24B4B; font-weight: 700; } .psc-theme { margin-top: 18px; font-family: var(--mono, monospace); font-size: 13px; letter-spacing: 0.28em; color: rgba(24,18,12,0.55); text-transform: uppercase; } .psc-countdown { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; max-width: 720px; margin: 0 auto; width: 100%; } .psc-unit { padding: 20px 12px; background: #18120c; color: #f5f1ea; border-radius: 4px; text-align: center; box-shadow: 4px 4px 0 #C24B4B; } .psc-unit-v { font-family: var(--serif, serif); font-size: clamp(36px, 5vw, 56px); font-weight: 800; line-height: 1; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; } .psc-unit-l { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.32em; opacity: 0.55; margin-top: 6px; } .psc-speakers { position: relative; max-width: 1280px; margin: 0 auto; width: 100%; } .psc-sp-head { display: flex; justify-content: space-between; align-items: end; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.22em; color: rgba(24,18,12,0.55); margin-bottom: 14px; } .psc-sp-head a { color: #18120c; text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 1px; } .psc-sp-list { display: grid; grid-template-columns: repeat(6, 1fr); gap: 14px; } .psc-sp { background: #fff; border: 1px solid rgba(24,18,12,0.08); padding: 14px; transition: transform 240ms, box-shadow 240ms; } .psc-sp:hover { transform: translateY(-2px); box-shadow: 4px 4px 0 #18120c; } .psc-sp-img { width: 100%; aspect-ratio: 1; background-size: cover; background-position: center; filter: grayscale(0.7) contrast(1.1); margin-bottom: 10px; } .psc-sp-n { font-size: 13px; font-weight: 700; line-height: 1.2; margin-bottom: 3px; } .psc-sp-r { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.1em; color: rgba(24,18,12,0.55); } .psc-foot { position: relative; display: flex; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid rgba(24,18,12,0.12); max-width: 1280px; margin: 0 auto; width: 100%; } .psc-tier-l { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.22em; color: rgba(24,18,12,0.55); display: block; } .psc-tier-p { font-family: var(--serif, serif); font-size: 32px; font-weight: 700; color: #C24B4B; } .psc-cta { display: inline-flex; align-items: center; gap: 14px; padding: 18px 36px; background: #C24B4B; color: #fff; text-decoration: none; font-family: var(--mono, monospace); font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 700; border-radius: 0; transition: transform 240ms, background 240ms; box-shadow: 4px 4px 0 #18120c; } .psc-cta em { font-style: normal; transition: transform 240ms; } .psc-cta:hover { transform: translate(-2px, -2px); box-shadow: 6px 6px 0 #18120c; } .psc-cta:hover em { transform: translateX(4px); } @media (max-width: 1024px) { .psc { padding: 32px 24px; } .psc-sp-list { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 640px) { .psc-countdown { grid-template-columns: repeat(2, 1fr); } .psc-sp-list { grid-template-columns: repeat(2, 1fr); } .psc-foot { flex-direction: column; gap: 16px; align-items: stretch; } } /* --- 4. ARCHITECTURE — editorial studio --- */ .psa { position: relative; min-height: 100vh; background: #ede5d8; color: #2b231b; overflow: hidden; } .psa-photo { position: absolute; inset: 0 50% 0 0; } .psa-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.85) contrast(1.05); } .psa-photo-tint { position: absolute; inset: 0; background: linear-gradient(90deg, transparent 60%, rgba(237,229,216,0.9)); } .psa-paper { position: absolute; inset: 0; background: radial-gradient(circle at 20% 80%, rgba(0,0,0,0.04), transparent 50%), radial-gradient(circle at 70% 20%, rgba(0,0,0,0.03), transparent 50%); pointer-events: none; } .psa-grid { position: relative; display: grid; grid-template-columns: 1fr 1fr; min-height: 100vh; padding: 40px 56px; gap: 32px; } .psa-meta { grid-column: 1; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(43,35,27,0.7); display: flex; flex-direction: column; gap: 6px; align-self: start; } .psa-mark { color: #594636; } .psa-loc em { font-style: normal; opacity: 0.4; margin: 0 8px; } .psa-title { grid-column: 2; align-self: center; } .psa-title h1 { font-family: var(--serif, serif); font-size: clamp(60px, 8vw, 120px); font-weight: 800; line-height: 0.92; letter-spacing: -0.03em; margin: 0 0 24px; color: #2b231b; } .psa-title h1 span { display: block; } .psa-italic { font-style: italic; font-weight: 500; color: #594636; } .psa-desc { font-size: 16px; line-height: 1.55; color: rgba(43,35,27,0.78); margin: 0 0 28px; max-width: 480px; } .psa-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin-bottom: 32px; max-width: 480px; } .psa-stats > div { text-align: left; border-top: 1px solid rgba(43,35,27,0.15); padding-top: 10px; } .psa-stats strong { display: block; font-family: var(--serif, serif); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: #2b231b; } .psa-stats span { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.22em; color: rgba(43,35,27,0.5); margin-top: 2px; display: block; } .psa-cta { display: inline-flex; align-items: center; gap: 12px; padding: 14px 26px; border: 1px solid #2b231b; color: #2b231b; text-decoration: none; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; transition: background 240ms, color 240ms; } .psa-cta em { font-style: normal; transition: transform 240ms; } .psa-cta:hover { background: #2b231b; color: #ede5d8; } .psa-cta:hover em { transform: translateX(4px); } .psa-others { grid-column: 2; align-self: end; margin-top: 32px; } .psa-others-h { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.32em; color: rgba(43,35,27,0.5); margin-bottom: 12px; } .psa-others-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .psa-thumb { display: block; text-decoration: none; color: #2b231b; transition: transform 200ms; } .psa-thumb:hover { transform: translateY(-2px); } .psa-thumb-img { width: 100%; aspect-ratio: 1.2; background-size: cover; background-position: center; filter: saturate(0.85); margin-bottom: 8px; } .psa-thumb-n { font-size: 12px; font-weight: 600; line-height: 1.2; } .psa-thumb-y { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.2em; color: rgba(43,35,27,0.5); margin-top: 2px; } @media (max-width: 980px) { .psa-photo { inset: 0 0 60% 0; } .psa-photo-tint { background: linear-gradient(180deg, transparent 50%, rgba(237,229,216,0.95)); } .psa-grid { grid-template-columns: 1fr; padding: 32px 24px; padding-top: 35vh; } .psa-meta, .psa-title, .psa-others { grid-column: 1; } .psa-others-grid { grid-template-columns: repeat(2, 1fr); } } /* --- 5. SPA — retreat serene --- */ .pss { position: relative; min-height: 100vh; background: #4A5A4A; color: #f5f1ea; overflow: hidden; } .pss-photo { position: absolute; inset: 0; } .pss-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.7) contrast(1.05) brightness(0.85); transition: transform 4000ms cubic-bezier(.2,.7,.3,1); } .pss:hover .pss-photo img { transform: scale(1.02); } .pss-photo-tint { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(74,90,74,0.78) 0%, rgba(74,90,74,0.45) 50%, rgba(74,90,74,0.85) 100%); } .pss-overlay { position: relative; display: grid; grid-template-rows: auto 1fr auto; padding: 48px 56px; min-height: 100vh; z-index: 2; } .pss-top { display: flex; justify-content: space-between; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(245,241,234,0.85); } .pss-mark-r { opacity: 0.6; } .pss-mid { align-self: center; max-width: 760px; } .pss-eyebrow { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.32em; color: rgba(245,241,234,0.7); margin-bottom: 26px; } .pss-title { font-family: var(--serif, serif); font-size: clamp(56px, 8vw, 120px); font-weight: 600; line-height: 0.92; letter-spacing: -0.02em; margin: 0 0 28px; color: #f5f1ea; } .pss-title span { display: block; } .pss-italic { font-style: italic; color: #C9A36E; font-weight: 400; } .pss-sub { font-size: 17px; line-height: 1.6; color: rgba(245,241,234,0.85); max-width: 520px; margin: 0 0 36px; } .pss-ctas { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .pss-cta { padding: 16px 32px; background: #f5f1ea; color: #2b3a2b; text-decoration: none; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 700; border-radius: 999px; transition: transform 240ms, background 240ms; } .pss-cta:hover { transform: translateY(-2px); background: #fff; } .pss-cta-g { font-family: var(--mono, monospace); font-size: 12px; letter-spacing: 0.22em; color: rgba(245,241,234,0.85); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; } .pss-quote { align-self: end; display: grid; grid-template-columns: auto 1fr auto; gap: 20px; align-items: end; padding: 24px 0 0; border-top: 1px solid rgba(245,241,234,0.18); max-width: 880px; } .pss-q-mark { font-family: var(--serif, serif); font-size: 64px; line-height: 0.7; color: #C9A36E; font-style: italic; } .pss-q-text { font-family: var(--serif, serif); font-style: italic; font-size: 17px; line-height: 1.55; color: rgba(245,241,234,0.92); max-width: 540px; } .pss-q-author { text-align: right; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.18em; color: rgba(245,241,234,0.7); } .pss-q-name { color: #f5f1ea; font-weight: 700; margin-bottom: 4px; } @media (max-width: 880px) { .pss-overlay { padding: 32px 24px; } .pss-quote { grid-template-columns: 1fr; gap: 12px; } .pss-q-author { text-align: left; } } /* --- 6. MUSIC — album / label --- */ .psm { position: relative; min-height: 100vh; background: #0a0a0f; color: #f5f1ea; overflow: hidden; display: flex; align-items: center; padding: 48px 56px; } .psm-bg { position: absolute; inset: 0; } .psm-bg img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.8) blur(2px); } .psm-bg-tint { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,107,157,0.25) 0%, transparent 40%), linear-gradient(180deg, rgba(10,10,15,0.7) 0%, rgba(10,10,15,0.9) 100%); } .psm-grid { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; gap: 64px; align-items: center; max-width: 1280px; margin: 0 auto; width: 100%; } .psm-cover { display: flex; justify-content: center; } .psm-cover-card { width: 100%; max-width: 460px; transform: perspective(1400px) rotateY(-8deg) rotateX(4deg); box-shadow: 0 40px 100px rgba(0,0,0,0.7), -20px 30px 80px rgba(255,107,157,0.18); transition: transform 800ms cubic-bezier(.2,.7,.3,1); } .psm-cover-card:hover { transform: perspective(1400px) rotateY(-4deg) rotateX(2deg) translateY(-6px); } .psm-cover-card img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; filter: saturate(1.1) contrast(1.05); } .psm-cover-meta { display: flex; justify-content: space-between; padding: 12px 16px; background: #18120c; color: rgba(245,241,234,0.65); font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.22em; } .psm-side { display: flex; flex-direction: column; } .psm-eyebrow { display: inline-block; padding: 6px 12px; border: 1px solid #FF6B9D; color: #FF6B9D; font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.32em; border-radius: 999px; margin-bottom: 22px; align-self: start; } .psm-artist { font-family: var(--serif, serif); font-size: clamp(60px, 8vw, 120px); font-weight: 900; line-height: 0.88; letter-spacing: -0.04em; margin-bottom: 8px; color: #f5f1ea; } .psm-album { font-family: var(--serif, serif); font-style: italic; font-size: 28px; color: #FF6B9D; margin-bottom: 18px; } .psm-desc { font-size: 14px; line-height: 1.6; color: rgba(245,241,234,0.72); max-width: 480px; margin: 0 0 28px; } .psm-tracks { display: flex; flex-direction: column; border-top: 1px solid rgba(245,241,234,0.1); margin-bottom: 24px; } .psm-track { display: grid; grid-template-columns: auto 1fr auto auto; gap: 14px; align-items: center; padding: 10px 0; border-bottom: 1px solid rgba(245,241,234,0.06); font-family: var(--mono, monospace); font-size: 13px; color: rgba(245,241,234,0.75); transition: color 200ms, padding-left 200ms; } .psm-track:hover { color: #fff; padding-left: 6px; } .psm-tr-n { color: rgba(245,241,234,0.4); font-size: 11px; letter-spacing: 0.15em; } .psm-tr-t { color: inherit; letter-spacing: 0.02em; } .psm-tr-d { color: rgba(245,241,234,0.45); font-size: 11px; letter-spacing: 0.06em; } .psm-track.is-playing { color: #FF6B9D; } .psm-track.is-playing .psm-tr-n, .psm-track.is-playing .psm-tr-d { color: #FF6B9D; } .psm-waves { display: inline-flex; align-items: end; gap: 2px; height: 14px; } .psm-waves span { width: 3px; background: #FF6B9D; border-radius: 1px; animation: psm-wave 900ms ease-in-out infinite; } .psm-waves span:nth-child(1) { animation-delay: 0ms; } .psm-waves span:nth-child(2) { animation-delay: 120ms; } .psm-waves span:nth-child(3) { animation-delay: 240ms; } .psm-waves span:nth-child(4) { animation-delay: 360ms; } .psm-waves span:nth-child(5) { animation-delay: 480ms; } @keyframes psm-wave { 0%, 100% { transform: scaleY(0.3); } 50% { transform: scaleY(1); } } .psm-ctas { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .psm-cta { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border-radius: 999px; text-decoration: none; font-family: var(--mono, monospace); font-size: 12px; letter-spacing: 0.14em; font-weight: 700; transition: transform 220ms; } .psm-cta:hover { transform: translateY(-2px); } .psm-cta-sp { background: #1DB954; color: #000; } .psm-cta-am { background: #fff; color: #000; } .psm-cta-g { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.22em; color: rgba(245,241,234,0.75); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; } @media (max-width: 980px) { .psm { padding: 32px 24px; } .psm-grid { grid-template-columns: 1fr; gap: 32px; } .psm-cover-card { max-width: 320px; transform: none; } } /* ============================================================ SCREENS_3 — 6 экранов для витрины /premium-3 ============================================================ */ /* --- 1. MAGAZINE — editorial cover + TOC --- */ .psmg { position: relative; min-height: 100vh; background: #f5f1ea; color: #18120c; display: grid; grid-template-columns: 1fr 1fr; overflow: hidden; } .psmg-cover { position: relative; background: #d8c7a4; overflow: hidden; min-height: 100vh; } .psmg-cover img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.85) contrast(1.1); } .psmg-cover-tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(216,199,164,0.35) 0%, rgba(40,30,18,0.7) 100%); } .psmg-cover-overlay { position: absolute; inset: 40px; display: grid; grid-template-rows: auto 1fr auto; color: #fff; } .psmg-mast { font-family: var(--serif, "Playfair Display", Georgia, serif); font-size: clamp(48px, 7vw, 84px); font-weight: 700; letter-spacing: 0.04em; line-height: 1; text-align: center; } .psmg-issue { align-self: end; display: flex; justify-content: center; gap: 12px; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.3em; text-transform: uppercase; padding-top: 12px; border-top: 1px solid rgba(255,255,255,0.4); } .psmg-issue em { font-style: normal; opacity: 0.5; } .psmg-cover-headlines { align-self: end; padding-top: 32px; border-top: 1px solid rgba(255,255,255,0.3); font-family: var(--serif, serif); font-style: italic; font-size: 16px; line-height: 1.5; text-align: center; } .psmg-cover-headlines span { display: inline; padding: 0 4px; } .psmg-cover-headlines span:nth-child(2n) { opacity: 0.5; } .psmg-side { display: grid; grid-template-rows: auto auto 1fr auto auto; padding: 40px 56px; gap: 28px; } .psmg-top { display: flex; justify-content: space-between; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(24,18,12,0.5); } .psmg-top em { font-style: normal; opacity: 0.4; margin: 0 6px; } .psmg-issue-block { display: flex; align-items: baseline; gap: 16px; padding-bottom: 24px; border-bottom: 1px solid rgba(24,18,12,0.15); } .psmg-issue-num { font-family: var(--serif, serif); font-size: 96px; font-weight: 800; line-height: 0.85; letter-spacing: -0.04em; } .psmg-issue-label { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.32em; color: rgba(24,18,12,0.55); } .psmg-mid-eyebrow { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.32em; color: rgba(24,18,12,0.5); text-transform: uppercase; margin-bottom: 18px; } .psmg-mid-title { font-family: var(--serif, serif); font-size: clamp(44px, 5.4vw, 72px); font-weight: 700; line-height: 0.95; letter-spacing: -0.02em; margin: 0 0 18px; } .psmg-italic { font-style: italic; font-weight: 500; } .psmg-mid-desc { font-size: 15px; line-height: 1.6; color: rgba(24,18,12,0.7); max-width: 460px; margin: 0; } .psmg-toc-h { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.32em; color: rgba(24,18,12,0.45); margin-bottom: 10px; } .psmg-toc ul { list-style: none; margin: 0; padding: 0; } .psmg-toc li { display: grid; grid-template-columns: 56px 1fr auto; gap: 16px; padding: 10px 0; border-bottom: 1px solid rgba(24,18,12,0.08); font-size: 13px; } .psmg-toc-p { font-family: var(--mono, monospace); font-size: 11px; color: rgba(24,18,12,0.5); letter-spacing: 0.06em; } .psmg-toc-t { font-family: var(--serif, serif); font-style: italic; color: #18120c; } .psmg-toc-k { font-family: var(--mono, monospace); font-size: 9px; letter-spacing: 0.22em; color: rgba(24,18,12,0.4); } .psmg-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid rgba(24,18,12,0.15); font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.16em; color: rgba(24,18,12,0.6); } .psmg-foot em { font-style: normal; opacity: 0.4; } .psmg-cta { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; background: #18120c; color: #f5f1ea; text-decoration: none; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; transition: background 240ms; } .psmg-cta em { font-style: normal; transition: transform 240ms; } .psmg-cta:hover { background: #C24B4B; } .psmg-cta:hover em { transform: translateX(4px); } @media (max-width: 980px) { .psmg { grid-template-columns: 1fr; } .psmg-cover { min-height: 60vh; } .psmg-side { padding: 32px 24px; } } /* --- 2. NFT — collection grid --- */ .psn { position: relative; min-height: 100vh; background: #0a0814; color: #E8E0FF; display: grid; grid-template-columns: 1fr 1.4fr; overflow: hidden; padding: 48px 48px 48px; gap: 48px; } .psn-aurora { position: absolute; inset: 0; opacity: 0.75; pointer-events: none; } .psn-iridescent { position: absolute; inset: 0; mix-blend-mode: screen; opacity: 0.18; pointer-events: none; } .psmg-foil { position: absolute; inset: 0; mix-blend-mode: overlay; opacity: 0.28; pointer-events: none; } .psco-aurora { position: absolute; inset: 0; opacity: 0.45; pointer-events: none; } .pscl-particles { position: absolute; inset: 0; mix-blend-mode: screen; opacity: 0.5; pointer-events: none; } .psma-parallax { position: absolute; inset: 0; opacity: 0.45; mix-blend-mode: screen; pointer-events: none; } .psre-parallax { position: absolute; inset: 0; opacity: 0.4; mix-blend-mode: multiply; pointer-events: none; } .psn-side { position: relative; display: grid; grid-template-rows: auto auto auto auto auto 1fr; gap: 22px; align-content: start; } .psn-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; background: rgba(80,210,255,0.1); border: 1px solid rgba(80,210,255,0.3); border-radius: 999px; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.18em; color: #80E0FF; justify-self: start; } .psn-dot { width: 8px; height: 8px; background: #80E0FF; border-radius: 999px; box-shadow: 0 0 8px #80E0FF; } .psn-title { font-family: var(--serif, serif); font-size: clamp(56px, 7vw, 96px); font-weight: 900; line-height: 0.88; letter-spacing: -0.04em; margin: 0; color: #fff; } .psn-grad { background: linear-gradient(120deg, #AA50FF 0%, #50D2FF 100%); -webkit-background-clip: text; background-clip: text; color: transparent; font-style: italic; } .psn-desc { font-size: 15px; line-height: 1.6; color: rgba(232,224,255,0.7); max-width: 460px; margin: 0; } .psn-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; padding: 20px 0; border-top: 1px solid rgba(232,224,255,0.12); border-bottom: 1px solid rgba(232,224,255,0.12); } .psn-stat-l { font-family: var(--mono, monospace); font-size: 9px; letter-spacing: 0.22em; color: rgba(232,224,255,0.5); margin-bottom: 4px; } .psn-stat-v { font-family: var(--serif, serif); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; color: #fff; } .psn-stat-v em { font-style: normal; font-size: 14px; color: rgba(232,224,255,0.55); font-family: var(--mono, monospace); letter-spacing: 0.04em; margin-left: 4px; } .psn-ctas { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; } .psn-cta { padding: 16px 28px; background: linear-gradient(120deg, #AA50FF, #50D2FF); color: #0a0814; border: none; border-radius: 12px; font-family: var(--mono, monospace); font-size: 13px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; cursor: pointer; transition: transform 220ms, box-shadow 220ms; } .psn-cta:hover { transform: translateY(-2px); box-shadow: 0 12px 32px rgba(170,80,255,0.4); } .psn-cta-g { font-family: var(--mono, monospace); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: #fff; text-decoration: none; border-bottom: 1px solid rgba(255,255,255,0.4); padding-bottom: 2px; } .psn-foot { align-self: end; display: flex; align-items: center; gap: 10px; font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.22em; color: rgba(232,224,255,0.45); text-transform: uppercase; } .psn-foot code { font-family: inherit; color: #fff; padding: 4px 8px; background: rgba(255,255,255,0.06); border-radius: 4px; } .psn-grid { position: relative; display: grid; grid-template-columns: repeat(4, 1fr); grid-auto-rows: min-content; gap: 12px; align-content: start; } .psn-card { display: flex; flex-direction: column; background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 6px; transition: transform 240ms, border-color 240ms; } .psn-card:hover { transform: translateY(-3px); border-color: rgba(170,80,255,0.5); } .psn-card.psn-rare-legendary { border-color: rgba(255,210,80,0.45); } .psn-card.psn-rare-epic { border-color: rgba(170,80,255,0.45); } .psn-tile { position: relative; width: 100%; border-radius: 8px; overflow: hidden; margin-bottom: 8px; } .psn-token { position: absolute; bottom: 8px; left: 10px; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.1em; color: rgba(255,255,255,0.85); text-shadow: 0 1px 4px rgba(0,0,0,0.4); } .psn-card-meta { display: flex; justify-content: space-between; padding: 4px 6px 6px; font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.14em; color: rgba(232,224,255,0.6); } .psn-card-meta span:last-child { color: #fff; } .psn-card.psn-rare-legendary .psn-card-meta span:first-child { color: #FFD250; } .psn-card.psn-rare-epic .psn-card-meta span:first-child { color: #AA50FF; } .psn-card.psn-rare-rare .psn-card-meta span:first-child { color: #50D2FF; } @media (max-width: 1100px) { .psn { grid-template-columns: 1fr; padding: 32px 24px; gap: 32px; } .psn-grid { grid-template-columns: repeat(3, 1fr); } } @media (max-width: 600px) { .psn-grid { grid-template-columns: repeat(2, 1fr); } } /* --- 3. COURSE — online course --- */ .psco { position: relative; min-height: 100vh; background: #faf6ee; color: #18120c; display: grid; grid-template-columns: 0.85fr 1fr; overflow: hidden; } .psco-noise { position: absolute; inset: 0; background: radial-gradient(circle at 30% 70%, rgba(194,75,75,0.05), transparent 60%); pointer-events: none; } .psco-tutor { position: relative; overflow: hidden; } .psco-photo { position: relative; width: 100%; height: 100%; min-height: 100vh; } .psco-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.85); } .psco-photo-tag { position: absolute; bottom: 28px; left: 28px; padding: 14px 22px; background: rgba(24,18,12,0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #faf6ee; border-radius: 6px; } .psco-photo-name { font-family: var(--serif, serif); font-size: 17px; font-weight: 700; margin-bottom: 2px; } .psco-photo-role { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.18em; opacity: 0.7; } .psco-side { display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 24px; padding: 40px 56px; } .psco-top { display: flex; justify-content: space-between; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(24,18,12,0.55); } .psco-title { font-family: var(--serif, serif); font-size: clamp(40px, 5.5vw, 72px); font-weight: 700; line-height: 0.95; letter-spacing: -0.02em; margin: 0; } .psco-italic { font-style: italic; color: #C24B4B; font-weight: 500; } .psco-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 18px 0; border-top: 1px solid rgba(24,18,12,0.15); border-bottom: 1px solid rgba(24,18,12,0.15); } .psco-stats > div { display: flex; flex-direction: column; gap: 3px; } .psco-stats strong { font-family: var(--serif, serif); font-size: 22px; font-weight: 700; letter-spacing: -0.02em; } .psco-stats span { font-family: var(--mono, monospace); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(24,18,12,0.55); } .psco-modules-h { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.32em; color: rgba(24,18,12,0.5); margin-bottom: 10px; } .psco-modules ul { list-style: none; margin: 0; padding: 0; } .psco-modules li { display: grid; grid-template-columns: 48px 1fr auto; gap: 14px; padding: 10px 0; border-bottom: 1px solid rgba(24,18,12,0.08); align-items: center; font-size: 13px; transition: background 200ms; } .psco-modules li:hover { background: rgba(24,18,12,0.03); } .psco-mod-n { font-family: var(--mono, monospace); font-size: 11px; color: #C24B4B; letter-spacing: 0.06em; } .psco-mod-t { color: #18120c; } .psco-mod-d { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.12em; color: rgba(24,18,12,0.5); } .psco-foot { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 24px; padding-top: 18px; border-top: 1px solid rgba(24,18,12,0.15); } .psco-price-l { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.22em; color: rgba(24,18,12,0.55); margin-bottom: 4px; } .psco-price-v { font-family: var(--serif, serif); font-size: 36px; font-weight: 700; letter-spacing: -0.02em; line-height: 1; } .psco-price-v em { font-style: normal; font-size: 18px; color: rgba(24,18,12,0.55); margin-left: 4px; } .psco-price-x { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.12em; color: rgba(24,18,12,0.45); margin-top: 4px; } .psco-cta { display: inline-flex; align-items: center; gap: 14px; padding: 18px 36px; background: #C24B4B; color: #fff; text-decoration: none; font-family: var(--mono, monospace); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; border-radius: 999px; transition: background 240ms, transform 240ms; box-shadow: 0 8px 24px rgba(194,75,75,0.3); } .psco-cta em { font-style: normal; transition: transform 240ms; } .psco-cta:hover { background: #18120c; transform: translateY(-2px); } .psco-cta:hover em { transform: translateX(4px); } @media (max-width: 980px) { .psco { grid-template-columns: 1fr; } .psco-photo { min-height: 40vh; } .psco-side { padding: 32px 24px; } } /* --- 4. CLINIC — medical --- */ .pscl { position: relative; min-height: 100vh; background: #f8fafc; color: #0E2A39; display: grid; grid-template-columns: 0.95fr 1.05fr; overflow: hidden; } .pscl-photo { position: relative; overflow: hidden; min-height: 100vh; background: #d6e0e6; } .pscl-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.9) brightness(1.02); } .pscl-photo-tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(248,250,252,0.0) 60%, rgba(248,250,252,0.4) 100%); } .pscl-content { display: grid; grid-template-rows: auto 1fr auto; padding: 40px 56px; gap: 28px; } .pscl-top { display: flex; justify-content: space-between; align-items: center; } .pscl-logo { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono, monospace); font-size: 14px; letter-spacing: 0.22em; font-weight: 700; color: #0E2A39; } .pscl-cross { width: 30px; height: 30px; background: #2B7BBE; color: #fff; display: grid; place-items: center; font-weight: 800; font-size: 18px; border-radius: 6px; } .pscl-license { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.14em; color: rgba(14,42,57,0.55); } .pscl-license em { font-style: normal; opacity: 0.4; margin: 0 6px; } .pscl-eyebrow { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: #2B7BBE; margin-bottom: 18px; } .pscl-title { font-family: var(--serif, serif); font-size: clamp(48px, 6.5vw, 88px); font-weight: 700; line-height: 0.96; letter-spacing: -0.02em; margin: 0 0 22px; } .pscl-italic { font-style: italic; color: #2B7BBE; } .pscl-desc { font-size: 16px; line-height: 1.6; color: rgba(14,42,57,0.78); max-width: 540px; margin: 0 0 28px; } .pscl-services { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; max-width: 580px; } .pscl-svc { display: grid; grid-template-columns: 42px 1fr; gap: 12px; padding: 14px 16px; background: #fff; border: 1px solid rgba(14,42,57,0.08); border-radius: 10px; transition: transform 200ms, box-shadow 200ms; } .pscl-svc:hover { transform: translateY(-2px); box-shadow: 0 12px 28px rgba(14,42,57,0.08); } .pscl-svc-ico { width: 42px; height: 42px; background: #E8F1F8; color: #2B7BBE; border-radius: 999px; display: grid; place-items: center; font-size: 20px; font-weight: 700; } .pscl-svc-t { font-size: 14px; font-weight: 700; margin-bottom: 2px; } .pscl-svc-d { font-size: 12px; color: rgba(14,42,57,0.6); line-height: 1.4; } .pscl-foot { display: grid; grid-template-rows: auto auto; gap: 18px; padding-top: 20px; border-top: 1px solid rgba(14,42,57,0.1); } .pscl-form { display: grid; grid-template-columns: 1fr 1fr auto; gap: 10px; } .pscl-input { padding: 14px 16px; font-family: inherit; font-size: 14px; border: 1px solid rgba(14,42,57,0.15); background: #fff; border-radius: 8px; color: #0E2A39; } .pscl-input::placeholder { color: rgba(14,42,57,0.4); } .pscl-input:focus { outline: none; border-color: #2B7BBE; } .pscl-cta { padding: 14px 28px; background: #2B7BBE; color: #fff; border: none; border-radius: 8px; font-family: inherit; font-size: 14px; font-weight: 700; letter-spacing: 0.04em; cursor: pointer; transition: background 240ms, transform 240ms; } .pscl-cta:hover { background: #1d5a92; transform: translateY(-1px); } .pscl-trust { display: flex; gap: 24px; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.06em; color: rgba(14,42,57,0.6); flex-wrap: wrap; } .pscl-trust strong { color: #2B7BBE; font-weight: 700; } @media (max-width: 1024px) { .pscl { grid-template-columns: 1fr; } .pscl-photo { min-height: 35vh; } .pscl-content { padding: 32px 24px; } .pscl-services { grid-template-columns: 1fr; } .pscl-form { grid-template-columns: 1fr; } } /* --- 5. MARATHON — sport race --- */ .psma { position: relative; min-height: 100vh; background: #1a1611; color: #f5f1ea; overflow: hidden; display: flex; align-items: stretch; } .psma-photo { position: absolute; inset: 0; } .psma-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.7) contrast(1.1) brightness(0.55); } .psma-photo-tint { position: absolute; inset: 0; background: linear-gradient(135deg, rgba(255,90,30,0.18) 0%, transparent 50%), linear-gradient(180deg, rgba(26,22,17,0.3) 0%, rgba(26,22,17,0.9) 100%); } .psma-grid { position: relative; display: grid; grid-template-rows: auto auto auto 1fr auto; gap: 28px; padding: 40px 56px; width: 100%; z-index: 2; } .psma-mark { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.32em; color: #FF5A1E; align-self: start; } .psma-title { display: flex; flex-direction: column; font-family: var(--serif, serif); font-weight: 900; letter-spacing: -0.05em; line-height: 0.85; margin: 0; } .psma-line { font-size: clamp(72px, 13vw, 192px); display: block; color: #f5f1ea; } .psma-italic { font-style: italic; color: #FF5A1E; font-weight: 800; } .psma-year { font-family: var(--mono, monospace); font-size: clamp(24px, 3vw, 40px); letter-spacing: 0.32em; color: rgba(245,241,234,0.85); font-weight: 400; align-self: flex-start; margin-top: 12px; } .psma-date { display: flex; justify-content: space-between; align-items: end; padding: 18px 0; border-top: 1px solid rgba(245,241,234,0.18); border-bottom: 1px solid rgba(245,241,234,0.18); font-family: var(--serif, serif); font-size: 24px; font-weight: 600; } .psma-date-m { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.22em; color: rgba(245,241,234,0.55); margin-top: 4px; text-transform: uppercase; } .psma-date-r { text-align: right; } .psma-distances { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; align-self: end; } .psma-dist { padding: 22px 18px; background: rgba(245,241,234,0.05); border: 1px solid rgba(245,241,234,0.12); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform 240ms, border-color 240ms, background 240ms; } .psma-dist:hover { transform: translateY(-3px); border-color: rgba(255,90,30,0.6); } .psma-dist.is-feat { background: rgba(255,90,30,0.12); border-color: rgba(255,90,30,0.5); } .psma-dist-km { font-family: var(--serif, serif); font-size: 44px; font-weight: 800; letter-spacing: -0.04em; line-height: 1; margin-bottom: 8px; color: #f5f1ea; } .psma-dist.is-feat .psma-dist-km { color: #FF5A1E; } .psma-dist-d { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(245,241,234,0.65); margin-bottom: 14px; } .psma-dist-meta { display: flex; justify-content: space-between; align-items: end; padding-top: 10px; border-top: 1px solid rgba(245,241,234,0.1); font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.06em; color: rgba(245,241,234,0.7); } .psma-dist-p { font-family: var(--serif, serif); font-size: 16px; font-weight: 700; color: #f5f1ea; letter-spacing: -0.01em; } .psma-dist.is-feat .psma-dist-p { color: #FF5A1E; } .psma-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 18px; border-top: 1px solid rgba(245,241,234,0.18); flex-wrap: wrap; gap: 16px; } .psma-tier-l { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.32em; color: rgba(245,241,234,0.55); margin-bottom: 6px; } .psma-tier-v { font-family: var(--serif, serif); font-size: 18px; font-weight: 600; color: #FF5A1E; } .psma-cta { display: inline-flex; align-items: center; gap: 14px; padding: 18px 36px; background: #FF5A1E; color: #1a1611; text-decoration: none; font-family: var(--mono, monospace); font-size: 13px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 800; border-radius: 0; clip-path: polygon(0 0, calc(100% - 16px) 0, 100% 50%, calc(100% - 16px) 100%, 0 100%); transition: transform 240ms, background 240ms; } .psma-cta em { font-style: normal; transition: transform 240ms; } .psma-cta:hover { transform: translateX(4px); background: #ff7340; } .psma-cta:hover em { transform: translateX(6px); } @media (max-width: 980px) { .psma-grid { padding: 32px 24px; } .psma-distances { grid-template-columns: repeat(2, 1fr); } .psma-foot { flex-direction: column; align-items: stretch; } } /* --- 6. REAL ESTATE — premium property --- */ .psre { position: relative; min-height: 100vh; background: #f5f1ea; color: #2b231b; display: grid; grid-template-columns: 1.4fr 1fr; overflow: hidden; } .psre-photo { position: relative; overflow: hidden; } .psre-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.95); transition: transform 6000ms cubic-bezier(.2,.7,.3,1); } .psre:hover .psre-photo img { transform: scale(1.03); } .psre-photo-tint { position: absolute; inset: 0; background: linear-gradient(0deg, rgba(43,35,27,0.45) 0%, transparent 50%); } .psre-photo-counter { position: absolute; bottom: 32px; left: 32px; display: inline-flex; align-items: center; gap: 14px; padding: 10px 18px; background: rgba(255,255,255,0.95); font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.22em; color: #2b231b; border-radius: 999px; } .psre-photo-arrow { font-size: 14px; } .psre-card { display: grid; grid-template-rows: auto auto auto auto auto auto auto; gap: 22px; padding: 40px 56px; background: #f5f1ea; } .psre-top { display: flex; justify-content: space-between; font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.32em; text-transform: uppercase; color: rgba(43,35,27,0.5); } .psre-top span:first-child { color: #C24B4B; } .psre-title { font-family: var(--serif, serif); font-size: clamp(48px, 6vw, 72px); font-weight: 700; line-height: 0.95; letter-spacing: -0.02em; margin: 0; } .psre-italic { font-style: italic; color: #8d7a5a; font-weight: 500; } .psre-loc { font-family: var(--mono, monospace); font-size: 13px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(43,35,27,0.65); } .psre-loc em { font-style: normal; opacity: 0.4; margin: 0 8px; } .psre-price { padding: 18px 0; border-top: 1px solid rgba(43,35,27,0.15); border-bottom: 1px solid rgba(43,35,27,0.15); } .psre-price-v { font-family: var(--serif, serif); font-size: 44px; font-weight: 800; letter-spacing: -0.03em; line-height: 1; color: #2b231b; } .psre-price-x { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.14em; color: rgba(43,35,27,0.55); margin-top: 6px; } .psre-price-x em { font-style: normal; opacity: 0.4; margin: 0 6px; } .psre-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px 18px; } .psre-specs > div { border-top: 1px solid rgba(43,35,27,0.12); padding-top: 8px; } .psre-specs strong { font-family: var(--serif, serif); font-size: 22px; font-weight: 700; display: block; } .psre-specs span { font-family: var(--mono, monospace); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(43,35,27,0.55); margin-top: 2px; display: block; } .psre-feats { display: flex; flex-wrap: wrap; gap: 8px 14px; font-family: var(--serif, serif); font-style: italic; font-size: 14px; color: rgba(43,35,27,0.75); padding: 12px 0; } .psre-feats span:not(:first-child):not(:last-child) { /* dot separators */ } .psre-foot { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; padding-top: 18px; border-top: 1px solid rgba(43,35,27,0.15); } .psre-agent { display: flex; align-items: center; gap: 14px; } .psre-agent-img { width: 44px; height: 44px; border-radius: 999px; background: linear-gradient(135deg, #8d7a5a, #5a4838), url("https://i.pravatar.cc/64?img=45") center/cover; } .psre-agent-n { font-size: 14px; font-weight: 700; color: #2b231b; } .psre-agent-r { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.18em; color: rgba(43,35,27,0.55); } .psre-cta { display: inline-flex; align-items: center; gap: 12px; padding: 16px 28px; background: #2b231b; color: #f5f1ea; text-decoration: none; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; transition: background 240ms; } .psre-cta em { font-style: normal; transition: transform 240ms; } .psre-cta:hover { background: #C24B4B; } .psre-cta:hover em { transform: translateX(4px); } @media (max-width: 1024px) { .psre { grid-template-columns: 1fr; } .psre-photo { min-height: 50vh; } .psre-card { padding: 32px 24px; } .psre-specs { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ SCREENS_4 — 6 экранов для витрины /premium-4 ============================================================ */ /* --- 1. COFFEE — specialty bean --- */ .psc4 { position: relative; min-height: 100vh; background: #efe7d8; color: #2b1f15; display: grid; grid-template-columns: 1.05fr 1fr; overflow: hidden; } .psc4-photo { position: relative; overflow: hidden; min-height: 100vh; background: #3a2a1c; } .psc4-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.1) contrast(1.05); } .psc4-photo-tint { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 60%, rgba(43,31,21,0.4) 100%); } .psc4-photo-tag { position: absolute; bottom: 24px; left: 24px; display: inline-flex; align-items: center; gap: 10px; padding: 10px 16px; background: rgba(43,31,21,0.85); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); color: #efe7d8; border-radius: 999px; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.18em; } .psc4-tag-dot { width: 7px; height: 7px; background: #C8995C; border-radius: 999px; } .psc4-side { display: grid; grid-template-rows: auto auto auto auto auto; gap: 24px; padding: 40px 56px; align-content: start; } .psc4-top { display: flex; justify-content: space-between; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(43,31,21,0.5); } .psc4-mark { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.28em; color: #C8995C; margin-bottom: 12px; } .psc4-mark em { font-style: normal; opacity: 0.4; } .psc4-title { font-family: var(--serif, serif); font-size: clamp(52px, 7vw, 96px); font-weight: 700; line-height: 0.92; letter-spacing: -0.03em; margin: 0 0 14px; color: #2b1f15; } .psc4-italic { font-style: italic; color: #C8995C; font-weight: 500; } .psc4-meta { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.18em; color: rgba(43,31,21,0.65); } .psc4-meta span:nth-child(2n) { opacity: 0.4; margin: 0 6px; } .psc4-notes, .psc4-brew { padding-top: 18px; border-top: 1px solid rgba(43,31,21,0.15); } .psc4-notes-h, .psc4-brew-h { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.32em; color: rgba(43,31,21,0.5); margin-bottom: 10px; } .psc4-notes-list { display: flex; gap: 8px; flex-wrap: wrap; } .psc4-notes-list span { padding: 7px 14px; background: #fff; border: 1px solid rgba(43,31,21,0.1); border-radius: 999px; font-family: var(--serif, serif); font-style: italic; font-size: 14px; color: #2b1f15; } .psc4-brew-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .psc4-brew-grid > div { border-top: 1px solid #C8995C; padding-top: 8px; } .psc4-brew-grid strong { font-family: var(--serif, serif); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; display: block; } .psc4-brew-grid em { font-style: normal; font-size: 14px; color: rgba(43,31,21,0.55); margin-left: 4px; } .psc4-brew-grid span { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.22em; color: rgba(43,31,21,0.55); display: block; margin-top: 4px; } .psc4-foot { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 20px; padding-top: 18px; border-top: 1px solid rgba(43,31,21,0.15); } .psc4-price-l { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.22em; color: rgba(43,31,21,0.55); margin-bottom: 4px; } .psc4-price-v { font-family: var(--serif, serif); font-size: 36px; font-weight: 700; letter-spacing: -0.02em; } .psc4-price-v em { font-style: normal; font-size: 18px; color: rgba(43,31,21,0.55); margin-left: 4px; } .psc4-cta { display: inline-flex; align-items: center; gap: 14px; padding: 16px 30px; background: #2b1f15; color: #efe7d8; text-decoration: none; font-family: var(--mono, monospace); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 700; border-radius: 999px; transition: background 240ms; } .psc4-cta em { font-style: normal; transition: transform 240ms; } .psc4-cta:hover { background: #C8995C; color: #2b1f15; } .psc4-cta:hover em { transform: translateX(4px); } @media (max-width: 980px) { .psc4 { grid-template-columns: 1fr; } .psc4-photo { min-height: 45vh; } .psc4-side { padding: 32px 24px; } .psc4-brew-grid { grid-template-columns: repeat(2, 1fr); } } /* --- 2. TATTOO — studio --- */ .pst4 { position: relative; min-height: 100vh; background: #0a0a0a; color: #f0e8e0; overflow: hidden; display: grid; grid-template-rows: auto auto 1fr; gap: 28px; padding: 40px 56px; } .pst4-grain { position: absolute; inset: 0; background: radial-gradient(circle at 30% 30%, rgba(190,40,40,0.08), transparent 50%), radial-gradient(circle at 70% 70%, rgba(190,40,40,0.06), transparent 50%); pointer-events: none; } .pst4-top { position: relative; display: flex; justify-content: space-between; align-items: center; } .pst4-logo { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono, monospace); font-size: 16px; letter-spacing: 0.32em; font-weight: 700; } .pst4-logo-mark { font-size: 20px; color: #BE2828; } .pst4-meta { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(240,232,224,0.6); } .pst4-meta em { font-style: normal; opacity: 0.4; margin: 0 8px; } .pst4-hero { position: relative; text-align: left; } .pst4-title { font-family: var(--serif, serif); font-size: clamp(72px, 12vw, 200px); font-weight: 900; letter-spacing: -0.04em; line-height: 0.85; margin: 0; display: flex; align-items: baseline; gap: 22px; flex-wrap: wrap; } .pst4-title span:nth-child(1), .pst4-title span:nth-child(3) { color: #f0e8e0; } .pst4-italic { font-style: italic; color: #BE2828; font-weight: 700; text-transform: lowercase; } .pst4-slogan { font-family: var(--mono, monospace); font-size: 13px; letter-spacing: 0.22em; color: rgba(240,232,224,0.6); margin-top: 18px; } .pst4-cols { position: relative; display: grid; grid-template-columns: 1.4fr 1fr; gap: 28px; align-items: start; } .pst4-flash-h, .pst4-masters-h { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.32em; color: rgba(240,232,224,0.5); margin-bottom: 12px; } .pst4-flash-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; } .pst4-flash-card { position: relative; aspect-ratio: 0.85; overflow: hidden; background: #161616; border: 1px solid rgba(255,255,255,0.06); transition: transform 220ms, border-color 220ms; } .pst4-flash-card:hover { transform: scale(1.02); border-color: #BE2828; } .pst4-flash-card img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(0.85) contrast(1.2); } .pst4-flash-n { position: absolute; bottom: 8px; right: 10px; font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.18em; color: rgba(255,255,255,0.6); text-shadow: 0 1px 4px rgba(0,0,0,0.6); } .pst4-masters-list { display: flex; flex-direction: column; margin-bottom: 22px; } .pst4-master { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; padding: 14px 0; border-bottom: 1px solid rgba(240,232,224,0.08); } .pst4-master-init { width: 56px; height: 56px; background: #BE2828; color: #fff; font-family: var(--serif, serif); font-size: 20px; font-weight: 700; display: grid; place-items: center; letter-spacing: 0.04em; } .pst4-master-n { font-size: 15px; font-weight: 700; } .pst4-master-s { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.18em; color: rgba(240,232,224,0.6); margin-top: 3px; text-transform: uppercase; } .pst4-cta { display: inline-flex; align-items: center; gap: 14px; width: 100%; padding: 18px 24px; background: #BE2828; color: #fff; text-decoration: none; font-family: var(--mono, monospace); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; font-weight: 800; justify-content: space-between; border-radius: 0; margin-bottom: 12px; transition: background 240ms; } .pst4-cta em { font-style: normal; transition: transform 240ms; } .pst4-cta:hover { background: #ee3838; } .pst4-cta:hover em { transform: translateX(4px); } .pst4-trust { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.14em; color: rgba(240,232,224,0.5); text-transform: uppercase; } @media (max-width: 980px) { .pst4 { padding: 32px 24px; } .pst4-cols { grid-template-columns: 1fr; } .pst4-flash-grid { grid-template-columns: repeat(2, 1fr); } } /* --- 3. PODCAST — show --- */ .psp4 { position: relative; min-height: 100vh; background: #0e0e18; color: #E8E5FF; overflow: hidden; display: flex; align-items: center; padding: 48px 56px; } .psp4-bg { position: absolute; inset: 0; background: radial-gradient(40% 40% at 30% 30%, rgba(255,89,151,0.18), transparent 70%), radial-gradient(40% 40% at 70% 70%, rgba(124,92,255,0.2), transparent 70%); filter: blur(30px); } .psp4-grid { position: relative; display: grid; grid-template-columns: 0.85fr 1.15fr; gap: 56px; max-width: 1280px; margin: 0 auto; width: 100%; align-items: center; } .psp4-art { display: flex; flex-direction: column; gap: 24px; } .psp4-art-card { position: relative; aspect-ratio: 1; overflow: hidden; border-radius: 8px; box-shadow: 0 30px 80px rgba(0,0,0,0.6), -20px 20px 60px rgba(124,92,255,0.25); } .psp4-art-card img { width: 100%; height: 100%; object-fit: cover; display: block; filter: contrast(1.1) saturate(1.2); } .psp4-art-overlay { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(14,14,24,0.2) 0%, rgba(14,14,24,0.85) 100%); display: grid; grid-template-rows: 1fr auto; padding: 28px; } .psp4-art-show { align-self: end; font-family: var(--serif, serif); font-size: clamp(40px, 5vw, 72px); font-weight: 800; letter-spacing: -0.04em; line-height: 0.9; color: #fff; text-shadow: 0 2px 16px rgba(0,0,0,0.5); } .psp4-art-tag { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.32em; color: #FF5997; margin-top: 8px; } .psp4-host { display: grid; grid-template-columns: 56px 1fr; gap: 14px; align-items: center; } .psp4-host-img { width: 56px; height: 56px; border-radius: 999px; background: linear-gradient(135deg, #FF5997, #7C5CFF) center/cover, url("https://i.pravatar.cc/64?img=11"); } .psp4-host-n { font-size: 14px; font-weight: 700; } .psp4-host-r { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.18em; color: rgba(232,229,255,0.55); margin-top: 2px; text-transform: uppercase; } .psp4-host-r em { font-style: normal; opacity: 0.4; margin: 0 4px; } .psp4-side { display: flex; flex-direction: column; } .psp4-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.28em; color: #FF5997; margin-bottom: 20px; align-self: start; } .psp4-live-dot { width: 8px; height: 8px; background: #FF5997; border-radius: 999px; box-shadow: 0 0 8px #FF5997; } .psp4-title { font-family: var(--serif, serif); font-size: clamp(40px, 5.5vw, 72px); font-weight: 800; letter-spacing: -0.03em; line-height: 0.95; margin: 0 0 16px; } .psp4-italic { font-style: italic; color: #FF5997; font-weight: 500; } .psp4-desc { font-size: 15px; line-height: 1.6; color: rgba(232,229,255,0.7); max-width: 540px; margin: 0 0 26px; } .psp4-ep-h { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.32em; color: rgba(232,229,255,0.5); padding-top: 16px; border-top: 1px solid rgba(232,229,255,0.1); margin-bottom: 10px; } .psp4-ep { display: grid; grid-template-columns: 44px 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-bottom: 1px solid rgba(232,229,255,0.06); transition: background 200ms, padding-left 200ms; } .psp4-ep:hover { padding-left: 4px; background: rgba(255,255,255,0.02); } .psp4-ep-n { font-family: var(--mono, monospace); font-size: 11px; color: rgba(232,229,255,0.45); letter-spacing: 0.1em; } .psp4-ep-t { font-size: 14px; font-weight: 600; line-height: 1.3; } .psp4-ep-g { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.14em; color: rgba(232,229,255,0.55); margin-top: 3px; text-transform: uppercase; } .psp4-ep-d { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.04em; color: rgba(232,229,255,0.5); } .psp4-ep.is-playing { background: rgba(255,89,151,0.06); padding-left: 10px; border-radius: 6px; } .psp4-ep.is-playing .psp4-ep-n, .psp4-ep.is-playing .psp4-ep-t { color: #FF5997; } .psp4-ep-play { display: inline-flex; align-items: end; gap: 3px; height: 14px; } .psp4-ep-bar { width: 3px; background: #FF5997; animation: psp4-w 800ms ease-in-out infinite; } .psp4-ep-bar:nth-child(2) { animation-delay: 150ms; } .psp4-ep-bar:nth-child(3) { animation-delay: 300ms; } @keyframes psp4-w { 0%, 100% { transform: scaleY(0.3); transform-origin: bottom; } 50% { transform: scaleY(1); transform-origin: bottom; } } .psp4-listen { display: flex; align-items: center; gap: 12px; margin-top: 24px; flex-wrap: wrap; } .psp4-listen-h { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.32em; color: rgba(232,229,255,0.5); margin-right: 4px; } .psp4-listen-b { padding: 10px 18px; border-radius: 999px; text-decoration: none; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.16em; font-weight: 700; transition: transform 220ms; } .psp4-listen-b:hover { transform: translateY(-2px); } .psp4-spot { background: #1DB954; color: #000; } .psp4-apple { background: #fff; color: #000; } .psp4-yt { background: #FF0033; color: #fff; } .psp4-listen-g { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.22em; color: rgba(232,229,255,0.7); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; } @media (max-width: 1024px) { .psp4 { padding: 32px 24px; } .psp4-grid { grid-template-columns: 1fr; gap: 32px; } } /* --- 4. WINE — vintage --- */ .psw4 { position: relative; min-height: 100vh; background: #1f0d0f; color: #f0e0d3; overflow: hidden; display: grid; grid-template-columns: 0.9fr 1.1fr; align-items: stretch; } .psw4-bg { position: absolute; inset: 0; background: radial-gradient(50% 60% at 30% 50%, rgba(139,30,40,0.35) 0%, transparent 70%), radial-gradient(40% 50% at 80% 30%, rgba(220,180,80,0.12) 0%, transparent 70%); pointer-events: none; } .psw4-vignette { position: absolute; inset: 0; background: radial-gradient(ellipse at center, transparent 30%, rgba(31,13,15,0.7) 100%); } .psw4-bottle { position: relative; display: flex; justify-content: center; align-items: center; padding: 40px 24px; min-height: 100vh; } .psw4-bottle img { max-width: 60%; max-height: 80vh; object-fit: contain; filter: drop-shadow(0 30px 60px rgba(0,0,0,0.7)) saturate(1.05); transition: transform 800ms cubic-bezier(.2,.7,.3,1); } .psw4-bottle:hover img { transform: translateY(-6px); } .psw4-side { position: relative; display: grid; grid-template-rows: auto 1fr auto; gap: 28px; padding: 40px 56px; } .psw4-top { display: flex; justify-content: space-between; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.28em; text-transform: uppercase; color: rgba(240,224,211,0.55); } .psw4-top em { font-style: normal; opacity: 0.4; margin: 0 6px; } .psw4-eyebrow { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.32em; color: #DCB450; margin-bottom: 14px; } .psw4-title { font-family: var(--serif, serif); font-size: clamp(64px, 8vw, 120px); font-weight: 700; letter-spacing: -0.04em; line-height: 0.9; margin: 0 0 18px; display: flex; align-items: baseline; gap: 20px; flex-wrap: wrap; } .psw4-year { color: #DCB450; font-weight: 800; } .psw4-italic { font-style: italic; font-weight: 500; color: #f0e0d3; } .psw4-desc { font-size: 15px; line-height: 1.6; color: rgba(240,224,211,0.78); max-width: 520px; margin: 0 0 28px; } .psw4-terroir { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 24px; padding: 18px 0; border-top: 1px solid rgba(240,224,211,0.18); border-bottom: 1px solid rgba(240,224,211,0.18); margin-bottom: 22px; } .psw4-terroir > div { display: flex; flex-direction: column; gap: 4px; } .psw4-terroir span { font-family: var(--mono, monospace); font-size: 9px; letter-spacing: 0.28em; color: rgba(240,224,211,0.5); } .psw4-terroir strong { font-family: var(--serif, serif); font-style: italic; font-size: 15px; font-weight: 600; color: #f0e0d3; } .psw4-tasting-h { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.32em; color: rgba(240,224,211,0.5); margin-bottom: 10px; } .psw4-tasting-grid { display: flex; gap: 10px; flex-wrap: wrap; } .psw4-tasting-grid span { padding: 8px 14px; border: 1px solid rgba(220,180,80,0.4); border-radius: 999px; font-family: var(--serif, serif); font-style: italic; font-size: 14px; color: #DCB450; } .psw4-foot { display: flex; align-items: end; justify-content: space-between; padding-top: 18px; border-top: 1px solid rgba(240,224,211,0.18); gap: 24px; flex-wrap: wrap; } .psw4-price-l { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.32em; color: rgba(240,224,211,0.55); margin-bottom: 6px; text-transform: uppercase; } .psw4-price-v { font-family: var(--serif, serif); font-size: 44px; font-weight: 800; letter-spacing: -0.03em; color: #f0e0d3; line-height: 1; } .psw4-price-x { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.18em; color: rgba(240,224,211,0.55); margin-top: 6px; } .psw4-cta { display: inline-flex; align-items: center; gap: 14px; padding: 18px 36px; background: transparent; border: 1px solid #DCB450; color: #DCB450; text-decoration: none; font-family: var(--mono, monospace); font-size: 12px; letter-spacing: 0.32em; text-transform: uppercase; font-weight: 700; transition: background 240ms, color 240ms; } .psw4-cta em { font-style: normal; transition: transform 240ms; } .psw4-cta:hover { background: #DCB450; color: #1f0d0f; } .psw4-cta:hover em { transform: translateX(4px); } @media (max-width: 980px) { .psw4 { grid-template-columns: 1fr; } .psw4-bottle { min-height: 45vh; } .psw4-side { padding: 32px 24px; } } /* --- 5. GAME — indie press kit --- */ .psg4 { position: relative; min-height: 100vh; background: #050816; color: #E0E8FF; overflow: hidden; display: grid; grid-template-rows: auto 1fr auto; padding: 40px 56px; gap: 28px; } .psg4-photo { position: absolute; inset: 0; } .psg4-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(0.7) brightness(0.6) contrast(1.05); } .psg4-photo-tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(5,8,22,0.7) 0%, rgba(5,8,22,0.85) 60%, rgba(5,8,22,0.97) 100%), radial-gradient(50% 40% at 50% 30%, rgba(80,180,255,0.18) 0%, transparent 60%); } .psg4-photo-grain { position: absolute; inset: 0; background-image: repeating-linear-gradient(90deg, rgba(80,180,255,0.04) 0 1px, transparent 1px 80px), repeating-linear-gradient(0deg, rgba(80,180,255,0.04) 0 1px, transparent 1px 80px); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 80%); } .psg4-top { position: relative; display: flex; justify-content: space-between; align-items: center; z-index: 2; } .psg4-logo { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono, monospace); font-size: 14px; letter-spacing: 0.32em; font-weight: 700; } .psg4-logo-mark { color: #50B4FF; font-size: 18px; } .psg4-meta { display: inline-flex; gap: 10px; font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.28em; color: rgba(224,232,255,0.5); } .psg4-mid { position: relative; align-self: center; max-width: 920px; z-index: 2; } .psg4-tag { display: inline-block; padding: 6px 12px; border: 1px solid rgba(80,180,255,0.4); border-radius: 999px; font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.32em; color: #50B4FF; margin-bottom: 22px; } .psg4-title { font-family: var(--serif, serif); font-size: clamp(80px, 14vw, 220px); font-weight: 900; letter-spacing: -0.05em; line-height: 0.85; margin: 0 0 22px; } .psg4-stroke { display: block; color: transparent; -webkit-text-stroke: 2px #50B4FF; } .psg4-desc { font-size: 17px; line-height: 1.55; color: rgba(224,232,255,0.78); max-width: 580px; margin: 0 0 28px; } .psg4-feats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin-bottom: 22px; } .psg4-feats > div { padding: 14px 16px; background: rgba(80,180,255,0.06); border: 1px solid rgba(80,180,255,0.2); border-radius: 8px; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .psg4-feats strong { font-family: var(--serif, serif); font-size: 26px; font-weight: 700; letter-spacing: -0.02em; color: #fff; display: block; } .psg4-feats span { font-family: var(--mono, monospace); font-size: 9px; letter-spacing: 0.22em; color: rgba(224,232,255,0.55); display: block; margin-top: 4px; } .psg4-reviews { display: flex; gap: 12px; align-items: center; font-family: var(--mono, monospace); font-size: 12px; letter-spacing: 0.06em; color: rgba(224,232,255,0.65); flex-wrap: wrap; } .psg4-rev-stars { color: #FFD250; letter-spacing: 0.04em; font-size: 14px; } .psg4-foot { position: relative; display: flex; justify-content: space-between; align-items: center; padding-top: 20px; border-top: 1px solid rgba(224,232,255,0.12); z-index: 2; flex-wrap: wrap; gap: 16px; } .psg4-release-l { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.32em; color: rgba(224,232,255,0.55); margin-bottom: 6px; } .psg4-release-v { font-family: var(--serif, serif); font-size: 22px; font-weight: 700; color: #50B4FF; letter-spacing: -0.01em; } .psg4-ctas { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .psg4-cta { padding: 14px 24px; border-radius: 8px; text-decoration: none; font-family: var(--mono, monospace); font-size: 12px; letter-spacing: 0.18em; font-weight: 700; transition: transform 220ms; } .psg4-cta:hover { transform: translateY(-2px); } .psg4-steam { background: #1B2838; color: #fff; } .psg4-epic { background: #fff; color: #000; } .psg4-cta-g { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.22em; color: rgba(224,232,255,0.7); text-decoration: none; border-bottom: 1px solid currentColor; padding-bottom: 2px; } @media (max-width: 980px) { .psg4 { padding: 32px 24px; } .psg4-feats { grid-template-columns: repeat(2, 1fr); } .psg4-foot { flex-direction: column; align-items: stretch; } } /* --- 6. AUCTION — vintage car --- */ .psau { position: relative; min-height: 100vh; background: #ede8df; color: #1a1a1a; overflow: hidden; display: grid; grid-template-rows: auto 1fr; padding: 32px 56px 40px; gap: 24px; } .psc4-foil { position: absolute; inset: 0; mix-blend-mode: overlay; opacity: 0.28; pointer-events: none; } .pst4-glitch { position: absolute; inset: 0; mix-blend-mode: screen; opacity: 0.4; pointer-events: none; } .psp4-vortex { position: absolute; inset: 0; mix-blend-mode: screen; opacity: 0.55; pointer-events: none; } .psw4-foil { position: absolute; inset: 0; mix-blend-mode: overlay; opacity: 0.35; pointer-events: none; } .psg4-parallax { position: absolute; inset: 0; mix-blend-mode: screen; opacity: 0.45; pointer-events: none; } .psau-foil { position: absolute; inset: 0; mix-blend-mode: overlay; opacity: 0.18; pointer-events: none; } .psau-paper { position: absolute; inset: 0; background: repeating-linear-gradient(0deg, rgba(0,0,0,0.02) 0 1px, transparent 1px 2px), radial-gradient(circle at 20% 30%, rgba(140,30,30,0.04), transparent 50%); pointer-events: none; } .psau-top { position: relative; display: flex; justify-content: space-between; align-items: end; padding-bottom: 16px; border-bottom: 1px solid #1a1a1a; } .psau-mark { font-family: var(--serif, serif); font-size: 24px; font-weight: 700; letter-spacing: -0.01em; } .psau-edition { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.22em; color: rgba(26,26,26,0.65); text-transform: uppercase; } .psau-grid { position: relative; display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px; align-items: stretch; } .psau-photo { position: relative; overflow: hidden; background: #1a1a1a; } .psau-photo img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.05); } .psau-photo-overlay { position: absolute; top: 20px; left: 20px; } .psau-lot { display: inline-flex; flex-direction: column; padding: 14px 22px; background: #fff; font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.32em; color: rgba(26,26,26,0.6); } .psau-lot strong { font-family: var(--serif, serif); font-size: 56px; font-weight: 800; color: #C24B4B; letter-spacing: -0.04em; line-height: 0.95; } .psau-side { position: relative; display: grid; grid-template-rows: auto auto auto auto auto auto; gap: 22px; } .psau-cat { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.32em; color: rgba(26,26,26,0.55); text-transform: uppercase; } .psau-title { font-family: var(--serif, serif); font-size: clamp(40px, 5vw, 64px); font-weight: 800; letter-spacing: -0.03em; line-height: 0.95; margin: 0; } .psau-italic { font-style: italic; color: #C24B4B; font-weight: 600; } .psau-subtitle { font-family: var(--mono, monospace); font-size: 13px; letter-spacing: 0.18em; color: rgba(26,26,26,0.65); text-transform: uppercase; } .psau-subtitle em { font-style: normal; opacity: 0.4; margin: 0 6px; } .psau-specs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px 18px; padding: 16px 0; border-top: 1px solid rgba(26,26,26,0.15); border-bottom: 1px solid rgba(26,26,26,0.15); } .psau-spec-l { font-family: var(--mono, monospace); font-size: 9px; letter-spacing: 0.28em; color: rgba(26,26,26,0.5); } .psau-spec-v { font-family: var(--serif, serif); font-size: 15px; font-weight: 600; margin-top: 2px; } .psau-history-h { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.32em; color: rgba(26,26,26,0.5); margin-bottom: 8px; } .psau-history ul { list-style: none; margin: 0; padding: 0; } .psau-history li { display: grid; grid-template-columns: 70px 1fr; gap: 12px; padding: 6px 0; font-family: var(--serif, serif); font-size: 14px; font-style: italic; color: rgba(26,26,26,0.78); } .psau-history li span { font-family: var(--mono, monospace); font-style: normal; font-size: 11px; color: #C24B4B; letter-spacing: 0.04em; } .psau-foot { display: flex; justify-content: space-between; align-items: end; padding-top: 18px; border-top: 1px solid rgba(26,26,26,0.15); gap: 18px; flex-wrap: wrap; } .psau-estimate-l { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.32em; color: rgba(26,26,26,0.55); margin-bottom: 6px; } .psau-estimate-v { font-family: var(--serif, serif); font-size: 28px; font-weight: 700; letter-spacing: -0.02em; } .psau-estimate-x { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.14em; color: rgba(26,26,26,0.55); margin-top: 4px; } .psau-cta { display: inline-flex; align-items: center; gap: 14px; padding: 18px 36px; background: #C24B4B; color: #fff; text-decoration: none; font-family: var(--mono, monospace); font-size: 12px; letter-spacing: 0.28em; text-transform: uppercase; font-weight: 700; transition: background 240ms, transform 240ms; } .psau-cta em { font-style: normal; transition: transform 240ms; } .psau-cta:hover { background: #1a1a1a; transform: translateY(-2px); } .psau-cta:hover em { transform: translateX(4px); } @media (max-width: 1024px) { .psau { padding: 24px 24px 32px; } .psau-grid { grid-template-columns: 1fr; } .psau-photo { min-height: 45vh; } .psau-specs { grid-template-columns: repeat(2, 1fr); } } /* ========================================================== MODAL — universal dialog + LeadForm ========================================================== Variants: .so-modal--centered — стандарт light card .so-modal--glass — dark glass с blur backdrop .so-modal--bottom-sheet — снизу на мобиле .so-modal--side-drawer — справа .so-modal--alert — мини-alert ========================================================== */ .so-cta-modal-root { display: contents; } .so-modal-root { position: fixed; inset: 0; z-index: 9999; display: flex; align-items: center; justify-content: center; --so-modal-radius: 18px; --so-modal-pad: 32px; --so-modal-ink: #18120c; --so-modal-bg: #fff; --so-modal-accent: #18120c; animation: so-modal-in 200ms ease-out; } @keyframes so-modal-in { from { opacity: 0; } to { opacity: 1; } } .so-modal-backdrop { position: absolute; inset: 0; background: rgba(20, 14, 8, 0.55); cursor: pointer; } .so-modal-dialog { position: relative; background: var(--so-modal-bg); color: var(--so-modal-ink); border-radius: var(--so-modal-radius); padding: var(--so-modal-pad); width: min(520px, calc(100vw - 32px)); max-height: calc(100vh - 48px); overflow-y: auto; box-shadow: 0 30px 80px rgba(20, 14, 8, 0.32), 0 8px 24px rgba(20, 14, 8, 0.12); animation: so-modal-pop 220ms cubic-bezier(0.2, 0.9, 0.3, 1.1); outline: none; } .so-modal-root[data-size="sm"] .so-modal-dialog { width: min(380px, calc(100vw - 32px)); } .so-modal-root[data-size="lg"] .so-modal-dialog { width: min(720px, calc(100vw - 32px)); } .so-modal-root[data-size="xl"] .so-modal-dialog { width: min(800px, calc(100vw - 32px)); padding: 0; /* form-screens сами рулят паддингами и композицией */ } @keyframes so-modal-pop { from { transform: translateY(16px) scale(0.96); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } } .so-modal-close { position: absolute; top: 14px; right: 16px; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; border: none; background: rgba(20, 14, 8, 0.06); color: inherit; cursor: pointer; font-size: 24px; line-height: 1; transition: background 160ms, transform 160ms; } .so-modal-close:hover { background: rgba(20, 14, 8, 0.12); transform: rotate(90deg); } .so-modal-head { margin-bottom: 22px; padding-right: 40px; } .so-modal-eyebrow { font-family: var(--mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.55; margin-bottom: 10px; } .so-modal-title { font-family: var(--serif, "Playfair Display", serif); font-size: 28px; font-weight: 700; line-height: 1.15; margin: 0; } .so-modal-body { font-size: 15px; line-height: 1.55; } /* ---------- variant: GLASS (dark blurred) ---------- */ .so-modal--glass { --so-modal-ink: #faf6ee; --so-modal-bg: rgba(18, 14, 22, 0.78); --so-modal-accent: #C99A5C; } .so-modal--glass .so-modal-backdrop { background: rgba(8, 6, 12, 0.7); } .so-modal--glass .so-modal-dialog { border: 1px solid rgba(255, 255, 255, 0.12); backdrop-filter: blur(28px) saturate(140%); -webkit-backdrop-filter: blur(28px) saturate(140%); box-shadow: 0 30px 80px rgba(0, 0, 0, 0.6); } .so-modal--glass .so-modal-close { background: rgba(255, 255, 255, 0.08); color: rgba(255, 255, 255, 0.85); } .so-modal--glass .so-modal-close:hover { background: rgba(255, 255, 255, 0.16); } /* ---------- variant: BOTTOM-SHEET ---------- */ .so-modal--bottom-sheet { align-items: flex-end; justify-content: stretch; } .so-modal--bottom-sheet .so-modal-dialog { width: 100%; border-radius: 24px 24px 0 0; max-height: 88vh; animation: so-modal-sheet 240ms cubic-bezier(0.2, 0.9, 0.3, 1.1); } .so-modal--bottom-sheet .so-modal-dialog::before { content: ""; position: absolute; top: 10px; left: 50%; transform: translateX(-50%); width: 44px; height: 4px; border-radius: 99px; background: rgba(20, 14, 8, 0.16); } @keyframes so-modal-sheet { from { transform: translateY(100%); } to { transform: translateY(0); } } /* ---------- variant: SIDE-DRAWER ---------- */ .so-modal--side-drawer { align-items: stretch; justify-content: flex-end; } .so-modal--side-drawer .so-modal-dialog { width: min(440px, 100vw); height: 100vh; max-height: none; border-radius: 0; animation: so-modal-drawer 260ms cubic-bezier(0.2, 0.9, 0.3, 1.05); } @keyframes so-modal-drawer { from { transform: translateX(100%); } to { transform: translateX(0); } } /* ---------- variant: ALERT (mini) ---------- */ .so-modal--alert .so-modal-dialog { width: min(360px, calc(100vw - 32px)); text-align: center; padding: 36px 28px; } @media (max-width: 640px) { .so-modal--centered .so-modal-dialog, .so-modal--glass .so-modal-dialog { border-radius: 22px 22px 0 0; align-self: flex-end; width: 100%; max-height: 92vh; animation: so-modal-sheet 240ms cubic-bezier(0.2, 0.9, 0.3, 1.1); } .so-modal--centered, .so-modal--glass { align-items: flex-end; } } /* ========================================================== LEAD FORM (внутри Modal или standalone) ========================================================== */ .so-lf { --so-lf-accent: var(--so-modal-accent, #18120c); --so-lf-ink: var(--so-modal-ink, #18120c); display: flex; flex-direction: column; gap: 14px; color: var(--so-lf-ink); } .so-modal--glass .so-lf { --so-lf-ink: #faf6ee; } .so-lf-intro { margin-bottom: 6px; } .so-lf-title { font-family: var(--serif, "Playfair Display", serif); font-size: 22px; font-weight: 700; margin: 0 0 6px; line-height: 1.2; } .so-modal-head + .so-modal-body .so-lf-title { display: none; } .so-modal-head + .so-modal-body .so-lf-intro { display: none; } .so-lf-sub { margin: 0; opacity: 0.7; font-size: 14px; line-height: 1.55; } .so-lf-honeypot { position: absolute !important; left: -9999px !important; width: 1px !important; height: 1px !important; opacity: 0 !important; pointer-events: none !important; } .so-lf-row { display: flex; flex-direction: column; gap: 6px; } .so-lf-label { font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; opacity: 0.65; font-weight: 500; } .so-lf-input { width: 100%; padding: 12px 14px; border-radius: 10px; border: 1px solid rgba(24, 18, 12, 0.18); background: transparent; color: inherit; font: inherit; font-size: 15px; transition: border-color 160ms, box-shadow 160ms; font-family: inherit; -webkit-appearance: none; appearance: none; } .so-modal--glass .so-lf-input { border-color: rgba(255, 255, 255, 0.18); background: rgba(255, 255, 255, 0.04); } .so-lf-input::placeholder { color: rgba(24, 18, 12, 0.4); } .so-modal--glass .so-lf-input::placeholder { color: rgba(255, 255, 255, 0.4); } .so-lf-input:focus { outline: none; border-color: var(--so-lf-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--so-lf-accent) 18%, transparent); } .so-lf-textarea { resize: vertical; min-height: 80px; } .so-lf-consent { display: flex; gap: 10px; font-size: 13px; line-height: 1.5; opacity: 0.85; cursor: pointer; } .so-lf-consent input { margin-top: 3px; flex: none; accent-color: var(--so-lf-accent); } .so-lf-consent a { color: inherit; text-decoration: underline; } .so-lf-error { background: rgba(220, 60, 50, 0.1); color: #C24B4B; padding: 10px 12px; border-radius: 8px; font-size: 13px; } .so-modal--glass .so-lf-error { background: rgba(255, 120, 110, 0.12); color: #FF9B95; } .so-lf-submit { margin-top: 6px; padding: 14px 22px; border: none; border-radius: 12px; background: var(--so-lf-accent); color: #fff; font-weight: 600; font-size: 15px; letter-spacing: 0.02em; cursor: pointer; transition: transform 160ms, box-shadow 160ms, opacity 160ms; } .so-lf-submit:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 30px color-mix(in srgb, var(--so-lf-accent) 35%, transparent); } .so-lf-submit:disabled { opacity: 0.45; cursor: not-allowed; } .so-modal--glass .so-lf-submit { color: #18120c; background: #faf6ee; } .so-modal--glass .so-lf-submit:hover:not(:disabled) { background: var(--so-lf-accent); color: #fff; } /* ---------- success state ---------- */ .so-lf--success { text-align: center; padding: 20px 8px 8px; display: flex; flex-direction: column; align-items: center; gap: 14px; } .so-lf-check { width: 64px; height: 64px; display: grid; place-items: center; border-radius: 50%; background: color-mix(in srgb, var(--so-lf-accent, #18120c) 14%, transparent); color: var(--so-lf-accent, #18120c); font-size: 30px; font-weight: 600; animation: so-lf-check-in 320ms cubic-bezier(0.2, 0.9, 0.3, 1.4); } .so-modal--glass .so-lf-check { background: rgba(255,255,255,0.1); color: #faf6ee; } @keyframes so-lf-check-in { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } } .so-lf-success-title { font-family: var(--serif, serif); font-size: 26px; font-weight: 700; } .so-lf-success-msg { opacity: 0.7; margin: 0; max-width: 320px; line-height: 1.5; } /* ---------- LeadForm: валидация / обязательные поля ---------- */ .so-lf-req { color: #C24B4B; font-weight: 700; margin-left: 2px; } .so-modal--glass .so-lf-req { color: #FF8676; } .so-lf-opt { opacity: 0.55; font-weight: 400; font-size: 11px; text-transform: none; letter-spacing: 0; margin-left: 4px; } .so-lf-input--err { border-color: #C24B4B !important; box-shadow: 0 0 0 3px rgba(194, 75, 75, 0.14); } .so-modal--glass .so-lf-input--err { border-color: #FF8676 !important; box-shadow: 0 0 0 3px rgba(255, 134, 118, 0.18); } .so-lf-hint { display: block; margin-top: 4px; font-size: 12px; color: #C24B4B; line-height: 1.4; text-transform: none; letter-spacing: 0; font-weight: 500; } .so-modal--glass .so-lf-hint { color: #FF8676; } /* Success-state close button (FormSuccessState) */ .so-lf-success-btn { margin-top: 8px; padding: 10px 22px; border-radius: 10px; border: 1px solid rgba(24, 18, 12, 0.18); background: transparent; color: inherit; cursor: pointer; font-weight: 600; font: inherit; } .so-modal--glass .so-lf-success-btn { border-color: rgba(255, 255, 255, 0.2); } /* ========================================================== FORM SCREENS — premium-композиции форм Правила perf_bg_results.md: - keyframes только transform/opacity - НЕТ filter:blur в animation, mix-blend-mode, canvas-в-keyframes - backdrop-blur статический (используется в Modal--glass — ОК) ========================================================== */ /* ---------------------------------------------------------- FS_Minimal — clean white, центрированная узкая форма ---------------------------------------------------------- */ .fs-min { background: #fff; color: #18120c; padding: 56px 48px 40px; border-radius: 18px; position: relative; overflow: hidden; --fs-min-accent: #18120c; } .fs-min-inner--success { padding: 20px 0; } .fs-min-head { text-align: center; max-width: 460px; margin: 0 auto 28px; } .fs-min-eyebrow { font-family: var(--mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.5; margin-bottom: 18px; } .fs-min-title { font-family: var(--serif, "Playfair Display", serif); font-size: 38px; font-weight: 700; line-height: 1.1; margin: 0 0 14px; letter-spacing: -0.01em; } .fs-min-sub { font-size: 15px; line-height: 1.6; opacity: 0.7; margin: 0 0 22px; } .fs-min-divider { width: 44px; height: 2px; background: var(--fs-min-accent); margin: 0 auto; } .fs-min-form { max-width: 420px; margin: 0 auto; gap: 14px; display: flex; flex-direction: column; } .fs-min-foot { text-align: center; font-size: 12px; opacity: 0.45; margin-top: 14px; font-family: var(--mono, "JetBrains Mono", monospace); letter-spacing: 0.04em; } @media (max-width: 640px) { .fs-min { padding: 32px 24px 24px; } .fs-min-title { font-size: 30px; } } /* ---------------------------------------------------------- FS_GlassDark — dark + static blur + neon accent ---------------------------------------------------------- */ .fs-gd { position: relative; color: #faf6ee; --fs-gd-accent: #5BE39E; background: linear-gradient(160deg, #0c0a14 0%, #1a1626 100%); padding: 0; border-radius: 18px; overflow: hidden; } .fs-gd-inner { position: relative; padding: 48px 44px 36px; z-index: 1; } .fs-gd-inner--success { padding: 60px 40px; text-align: center; } /* Статический glow — radial-gradient, не animation */ .fs-gd-glow { position: absolute; top: -20%; left: -10%; right: -10%; height: 60%; background: radial-gradient(60% 80% at 30% 30%, color-mix(in srgb, var(--fs-gd-accent) 22%, transparent) 0%, transparent 60%); pointer-events: none; z-index: 0; } .fs-gd-head { position: relative; z-index: 1; margin-bottom: 28px; } .fs-gd-badge { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 10px; border-radius: 999px; background: rgba(255, 255, 255, 0.06); border: 1px solid rgba(255, 255, 255, 0.12); font-family: var(--mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; margin-bottom: 22px; } .fs-gd-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--fs-gd-accent); box-shadow: 0 0 8px color-mix(in srgb, var(--fs-gd-accent) 70%, transparent); animation: fs-gd-pulse 1.6s ease-in-out infinite; /* opacity-only — perf-safe */ } @keyframes fs-gd-pulse { 0%, 100% { opacity: 0.9; transform: scale(1); } 50% { opacity: 0.45; transform: scale(0.85); } } .fs-gd-eyebrow { font-family: var(--mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.55; margin-bottom: 12px; } .fs-gd-title { font-family: var(--serif, "Playfair Display", serif); font-size: 42px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 14px; } .fs-gd-sub { font-size: 15px; line-height: 1.55; opacity: 0.7; margin: 0 0 24px; max-width: 480px; } .fs-gd-stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; padding: 16px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 8px; } .fs-gd-stat-v { font-family: var(--serif, "Playfair Display", serif); font-size: 22px; font-weight: 700; color: var(--fs-gd-accent); margin-bottom: 4px; } .fs-gd-stat-l { font-family: var(--mono, "JetBrains Mono", monospace); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.55; } .fs-gd-form { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 14px; margin-top: 24px; color: #faf6ee; } .fs-gd-form .so-lf-input { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.14); color: #faf6ee; } .fs-gd-form .so-lf-input::placeholder { color: rgba(255, 255, 255, 0.35); } .fs-gd-form .so-lf-label { opacity: 0.65; } .fs-gd-form .so-lf-consent { opacity: 0.75; } .fs-gd-form .so-lf-consent a { color: var(--fs-gd-accent); } .fs-gd-cta { margin-top: 8px; padding: 16px 24px; border-radius: 12px; border: none; background: var(--fs-gd-accent); color: #0c0a14; font-weight: 700; font-size: 15px; letter-spacing: 0.04em; cursor: pointer; transition: transform 180ms, box-shadow 180ms, background 180ms; font-family: inherit; } .fs-gd-cta:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 34px color-mix(in srgb, var(--fs-gd-accent) 40%, transparent); } .fs-gd-cta:disabled { opacity: 0.45; cursor: not-allowed; } @media (max-width: 640px) { .fs-gd-inner { padding: 32px 24px 24px; } .fs-gd-title { font-size: 32px; } .fs-gd-stats { grid-template-columns: 1fr 1fr; } .fs-gd-stats .fs-gd-stat:nth-child(3) { grid-column: 1 / -1; border-top: 1px solid rgba(255,255,255,0.06); padding-top: 10px; } } /* ---------------------------------------------------------- FS_SplitPhoto — photo + form (editorial) ---------------------------------------------------------- */ .fs-sp { display: grid; grid-template-columns: 1.05fr 1fr; min-height: 540px; border-radius: 18px; overflow: hidden; background: #faf6ee; color: #18120c; --fs-sp-accent: #C99A5C; } .fs-sp--photo-right { grid-template-columns: 1fr 1.05fr; } .fs-sp--photo-right .fs-sp-photo { order: 2; } .fs-sp--photo-right .fs-sp-pane { order: 1; } .fs-sp-photo { position: relative; background: #1a1a1f; min-height: 320px; overflow: hidden; } .fs-sp-photo img { width: 100%; height: 100%; object-fit: cover; position: absolute; inset: 0; /* hover-zoom — НЕ infinite, perf-safe */ } .fs-sp:hover .fs-sp-photo img { transform: scale(1.04); transition: transform 600ms ease-out; } .fs-sp-photo-tint { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(8, 6, 4, 0.65) 100%); pointer-events: none; } .fs-sp-photo-meta { position: absolute; bottom: 24px; left: 24px; right: 24px; color: #faf6ee; z-index: 2; } .fs-sp-photo-eyebrow { font-family: var(--mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 8px; opacity: 0.86; } .fs-sp-photo-tag { font-family: var(--serif, "Playfair Display", serif); font-size: 18px; font-style: italic; font-weight: 400; opacity: 0.94; } .fs-sp-pane { padding: 44px 38px 36px; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden; } .fs-sp-head, .fs-sp-form { position: relative; z-index: 1; } .fs-sp-head { margin-bottom: 22px; } .fs-sp-title { font-family: var(--serif, "Playfair Display", serif); font-size: 34px; font-weight: 700; line-height: 1.1; margin: 0 0 10px; letter-spacing: -0.01em; } .fs-sp-sub { font-size: 14px; line-height: 1.55; opacity: 0.7; margin: 0; } .fs-sp-form { display: flex; flex-direction: column; gap: 12px; } @media (max-width: 720px) { .fs-sp { grid-template-columns: 1fr; min-height: auto; } .fs-sp--photo-right { grid-template-columns: 1fr; } .fs-sp--photo-right .fs-sp-photo { order: 1; } .fs-sp--photo-right .fs-sp-pane { order: 2; } .fs-sp-photo { min-height: 220px; } .fs-sp-pane { padding: 28px 24px 24px; } .fs-sp-title { font-size: 28px; } } /* ========================================================== FORM FX — лёгкие эффекты для form-screens Правила perf_bg_results.md: • keyframes — только transform / opacity • НЕТ filter:blur в animation, mix-blend-mode на крупном overlay ========================================================== */ /* ---------- CursorSpotlight ---------- */ .fx-spot { position: absolute; inset: 0; pointer-events: none; z-index: 0; background: radial-gradient( var(--fx-spot-size, 280px) circle at var(--fx-cx, 50%) var(--fx-cy, 50%), var(--fx-spot-color, rgba(255,255,255,0.35)) 0%, transparent 70% ); transition: opacity 240ms; will-change: opacity; } /* ---------- StageLight ---------- */ .fx-stage { position: absolute; pointer-events: none; z-index: 0; width: 140%; height: 65%; left: -20%; top: -20%; background: radial-gradient( ellipse 60% 80% at 50% 0%, var(--fx-stage-color, rgba(255,255,255,0.5)) 0%, transparent 70% ); opacity: calc(0.6 * var(--fx-stage-intensity, 1)); animation: fx-stage-shimmer 6s ease-in-out infinite; } .fx-stage--top-left { background: radial-gradient( ellipse 50% 70% at 30% 0%, var(--fx-stage-color) 0%, transparent 70% ); } .fx-stage--top-right { background: radial-gradient( ellipse 50% 70% at 70% 0%, var(--fx-stage-color) 0%, transparent 70% ); } @keyframes fx-stage-shimmer { 0%, 100% { opacity: calc(0.55 * var(--fx-stage-intensity, 1)); } 50% { opacity: calc(0.85 * var(--fx-stage-intensity, 1)); } } /* ---------- PaperBits ---------- */ .fx-bits { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; } .fx-bit { position: absolute; bottom: -10px; border-radius: 50%; animation: fx-bit-drift linear infinite; will-change: transform, opacity; } @keyframes fx-bit-drift { 0% { transform: translate3d(0, 0, 0); opacity: 0; } 10% { opacity: var(--fx-bit-op, 0.5); } 90% { opacity: var(--fx-bit-op, 0.5); } 100% { transform: translate3d(20px, -120vh, 0); opacity: 0; } } /* ---------- HoverBorderGradient ---------- */ @property --fx-hbg-angle { syntax: ""; inherits: false; initial-value: 0deg; } .fx-hbg { position: relative; display: inline-block; border-radius: var(--fx-hbg-radius, 12px); padding: var(--fx-hbg-thickness, 2px); background: var(--fx-hbg-grad); --fx-hbg-angle: 0deg; } .fx-hbg:hover, .fx-hbg--always { animation: fx-hbg-spin 3.6s linear infinite; } @keyframes fx-hbg-spin { to { --fx-hbg-angle: 360deg; } } .fx-hbg-inner { display: block; background: var(--fx-hbg-bg, #18120c); border-radius: calc(var(--fx-hbg-radius, 12px) - var(--fx-hbg-thickness, 2px)); } /* Fallback для браузеров без @property — рамка просто статичная gradient, без вращения. Безопасно деградирует. */ /* ---------- WavyDecor ---------- */ .fx-wavy { position: absolute; left: 0; right: 0; pointer-events: none; overflow: hidden; z-index: 0; } .fx-wavy--bottom { bottom: 0; } .fx-wavy--top { top: 0; transform: rotate(180deg); } .fx-wavy svg { display: block; animation: fx-wavy-drift 18s linear infinite; } @keyframes fx-wavy-drift { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } /* ---------- ConfettiBurst ---------- */ .fx-confetti { position: absolute; inset: 0; pointer-events: none; overflow: hidden; } .fx-conf-p { position: absolute; left: var(--fx-conf-x, 50%); top: var(--fx-conf-y, 50%); transform: translate(-50%, -50%); animation: fx-conf-fly cubic-bezier(0.22, 0.61, 0.36, 1) forwards; will-change: transform, opacity; border-radius: 1px; } .fx-conf-p--circle { border-radius: 50%; } .fx-conf-p--stripe { border-radius: 1px; } @keyframes fx-conf-fly { 0% { transform: translate(-50%, -50%) rotate(0deg); opacity: 1; } 60% { transform: translate( calc(-50% + var(--fx-conf-dx, 0px)), calc(-50% + var(--fx-conf-dy, 0px)) ) rotate(calc(var(--fx-conf-rot, 0deg) * 0.7)); opacity: 1; } 100% { /* Падение под gravity — добавляем +260px к dy */ transform: translate( calc(-50% + var(--fx-conf-dx, 0px) * 1.1), calc(-50% + var(--fx-conf-dy, 0px) + 260px) ) rotate(var(--fx-conf-rot, 0deg)); opacity: 0; } } /* ========================================================== FS_EditorialSerif — fullscreen serif + marquee (magazine) ========================================================== */ .fs-ed { position: relative; background: #faf6ee; color: #18120c; padding: 0; border-radius: 18px; overflow: hidden; --fs-ed-accent: #BE2828; } .fs-ed-inner { position: relative; z-index: 1; padding: 48px 56px 0; } .fs-ed-inner--success { padding: 60px 40px; text-align: center; } .fs-ed-top { display: flex; align-items: center; gap: 14px; font-family: var(--mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.6; margin-bottom: 28px; } .fs-ed-dot { color: var(--fs-ed-accent); font-size: 6px; } .fs-ed-title { font-family: var(--serif, "Playfair Display", serif); font-size: 76px; font-weight: 700; line-height: 0.98; letter-spacing: -0.03em; margin: 0 0 16px; } .fs-ed-title em { color: var(--fs-ed-accent); font-style: italic; font-weight: 400; } .fs-ed-sub { font-size: 15px; line-height: 1.55; opacity: 0.65; margin: 0 0 32px; max-width: 480px; } .fs-ed-form { display: flex; flex-direction: column; gap: 14px; padding-bottom: 32px; } .fs-ed-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .fs-ed-grid .so-lf-row { margin: 0; } .fs-ed-form .so-lf-input { border-radius: 0; border: none; border-bottom: 1.5px solid rgba(24, 18, 12, 0.2); padding: 12px 0; background: transparent; font-size: 16px; } .fs-ed-form .so-lf-input:focus { border-bottom-color: var(--fs-ed-accent); box-shadow: none; } .fs-ed-form .so-lf-input--err { border-bottom-color: #C24B4B !important; box-shadow: none; } .fs-ed-form .so-lf-submit { align-self: flex-start; background: #18120c; padding: 14px 32px; border-radius: 0; margin-top: 12px; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; } .fs-ed-form .so-lf-submit:hover:not(:disabled) { background: var(--fs-ed-accent); box-shadow: none; } .fs-ed-marquee { margin: 0 -56px; background: #18120c; color: #faf6ee; padding: 14px 0; overflow: hidden; } .fs-ed-marquee-track { display: inline-flex; white-space: nowrap; animation: fs-ed-marquee 32s linear infinite; will-change: transform; } .fs-ed-marquee-track span { font-family: var(--serif, serif); font-size: 22px; font-style: italic; padding-right: 32px; flex: none; } @keyframes fs-ed-marquee { from { transform: translate3d(0, 0, 0); } to { transform: translate3d(-50%, 0, 0); } } @media (max-width: 720px) { .fs-ed-inner { padding: 32px 24px 0; } .fs-ed-title { font-size: 48px; } .fs-ed-grid { grid-template-columns: 1fr; } .fs-ed-marquee { margin: 0 -24px; } .fs-ed-marquee-track span { font-size: 18px; padding-right: 24px; } } /* ========================================================== FS_Brutalist — mono + offset shadow + sharp ========================================================== */ .fs-br { position: relative; background: #18120c; color: #faf6ee; padding: 0; border-radius: 18px; overflow: hidden; font-family: var(--mono, "JetBrains Mono", monospace); --fs-br-accent: #FFE94D; } .fs-br-inner { position: relative; z-index: 1; padding: 48px 44px 40px; } .fs-br-inner--success { padding: 60px 40px; text-align: center; } .fs-br-stamp { display: inline-block; border: 2px solid var(--fs-br-accent); color: var(--fs-br-accent); padding: 4px 12px; font-size: 10px; letter-spacing: 0.22em; margin-bottom: 32px; transform: rotate(-2deg); } .fs-br-title { font-family: var(--mono, "JetBrains Mono", monospace); font-size: 38px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 14px; text-transform: uppercase; color: var(--fs-br-accent); text-shadow: 4px 4px 0 #BE2828; } .fs-br-sub { font-size: 13px; opacity: 0.7; margin: 0 0 28px; } .fs-br-form { display: flex; flex-direction: column; gap: 12px; color: #faf6ee; } .fs-br-form .so-lf-label { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; } .fs-br-form .so-lf-input { border-radius: 0; background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.2); color: #faf6ee; font-family: var(--mono, monospace); } .fs-br-form .so-lf-input::placeholder { color: rgba(255, 255, 255, 0.35); } .fs-br-form .so-lf-input:focus { border-color: var(--fs-br-accent); box-shadow: 4px 4px 0 0 rgba(255, 233, 77, 0.35); } .fs-br-form .so-lf-consent { opacity: 0.8; font-size: 11px; letter-spacing: 0.06em; } .fs-br-form .so-lf-consent a { color: var(--fs-br-accent); } .fs-br-cta-wrap { display: block; margin-top: 12px; align-self: flex-start; } .fs-br-cta { display: block; background: var(--fs-br-accent); color: #18120c; border: none; padding: 14px 28px; font-family: var(--mono, monospace); font-weight: 800; font-size: 14px; letter-spacing: 0.12em; text-transform: uppercase; cursor: pointer; width: 100%; transition: transform 160ms; } .fs-br-cta:hover:not(:disabled) { transform: translate(-2px, -2px); } .fs-br-cta:disabled { opacity: 0.4; cursor: not-allowed; } @media (max-width: 640px) { .fs-br-inner { padding: 32px 24px 28px; } .fs-br-title { font-size: 30px; } } /* ========================================================== FS_BookingCalendar — calendar + slots + form ========================================================== */ .fs-bc { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; min-height: 560px; background: #faf6ee; color: #18120c; border-radius: 18px; overflow: hidden; --fs-bc-accent: #2E5F4F; } .fs-bc-success { grid-column: 1 / -1; padding: 60px 40px; text-align: center; } .fs-bc-cal { padding: 36px 32px; background: #fff; border-right: 1px solid rgba(24, 18, 12, 0.08); overflow-y: auto; max-height: 78vh; position: relative; z-index: 1; } .fs-bc-eyebrow { font-family: var(--mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.55; margin-bottom: 14px; } .fs-bc-title { font-family: var(--serif, serif); font-size: 30px; font-weight: 700; line-height: 1.1; margin: 0 0 10px; } .fs-bc-sub { font-size: 14px; opacity: 0.65; margin: 0 0 26px; line-height: 1.5; } .fs-bc-section-label { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.5; margin: 24px 0 10px; } .fs-bc-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; } .fs-bc-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; padding: 10px 4px; border-radius: 8px; background: transparent; border: 1px solid rgba(24, 18, 12, 0.08); color: inherit; cursor: pointer; font: inherit; transition: border-color 160ms, background 160ms, transform 160ms; } .fs-bc-day:hover:not(.is-closed) { border-color: var(--fs-bc-accent); transform: translateY(-2px); } .fs-bc-day.is-active { background: var(--fs-bc-accent); border-color: var(--fs-bc-accent); color: #fff; } .fs-bc-day.is-closed { opacity: 0.35; cursor: not-allowed; text-decoration: line-through; } .fs-bc-day-wd { font-family: var(--mono, monospace); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; } .fs-bc-day-num { font-size: 13px; font-weight: 600; } .fs-bc-day-today, .fs-bc-day-closed { position: absolute; bottom: -16px; font-family: var(--mono, monospace); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fs-bc-accent); white-space: nowrap; } .fs-bc-day.is-closed .fs-bc-day-closed { color: #C24B4B; } .fs-bc-slots { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .fs-bc-slot { padding: 12px 8px; border-radius: 8px; border: 1px solid rgba(24, 18, 12, 0.1); background: transparent; font: inherit; font-family: var(--mono, monospace); font-size: 13px; letter-spacing: 0.02em; cursor: pointer; transition: border-color 160ms, background 160ms, transform 160ms; } .fs-bc-slot:hover { border-color: var(--fs-bc-accent); transform: translateY(-1px); } .fs-bc-slot.is-active { background: var(--fs-bc-accent); border-color: var(--fs-bc-accent); color: #fff; } .fs-bc-pane { padding: 36px 32px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; } .fs-bc-form { display: flex; flex-direction: column; gap: 12px; } .fs-bc-summary { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border-radius: 10px; background: var(--fs-bc-accent); color: #fff; margin-bottom: 6px; } .fs-bc-summary-lbl { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.8; } .fs-bc-summary-val { font-family: var(--serif, serif); font-size: 20px; display: flex; align-items: center; gap: 10px; } .fs-bc-summary-val span { opacity: 0.55; } .fs-bc-cta { margin-top: 8px; padding: 14px 22px; border-radius: 12px; border: none; background: var(--fs-bc-accent); color: #fff; font-weight: 600; font-size: 14px; letter-spacing: 0.02em; cursor: pointer; transition: transform 160ms, box-shadow 160ms; font-family: inherit; } .fs-bc-cta:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 12px 30px color-mix(in srgb, var(--fs-bc-accent) 35%, transparent); } .fs-bc-cta:disabled { opacity: 0.5; cursor: not-allowed; } @media (max-width: 720px) { .fs-bc { grid-template-columns: 1fr; min-height: auto; } .fs-bc-cal { border-right: none; border-bottom: 1px solid rgba(24, 18, 12, 0.08); padding: 28px 22px; max-height: none; } .fs-bc-pane { padding: 28px 22px; } .fs-bc-days { grid-template-columns: repeat(4, 1fr); } .fs-bc-slots { grid-template-columns: repeat(3, 1fr); } } /* ========================================================== FS_WaitlistNeon — stroke title + neon glow CTA ========================================================== */ .fs-wn { position: relative; background: linear-gradient(160deg, #060812 0%, #0c0a18 60%, #1a0c20 100%); color: #faf6ee; border-radius: 18px; overflow: hidden; --fs-wn-accent: #5BE39E; } .fs-wn-inner { position: relative; z-index: 1; padding: 56px 48px 44px; } .fs-wn-inner--success { padding: 60px 40px; text-align: center; } .fs-wn-eyebrow { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.85; margin-bottom: 24px; } .fs-wn-blip { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--fs-wn-accent); box-shadow: 0 0 10px var(--fs-wn-accent); animation: fs-wn-blip 1.4s ease-in-out infinite; } @keyframes fs-wn-blip { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.35; transform: scale(0.7); } } /* Stroke-only outline title + наложенный фрагмент для глубины */ .fs-wn-title { position: relative; font-family: var(--serif, "Playfair Display", serif); font-size: 64px; font-weight: 800; line-height: 0.95; letter-spacing: -0.04em; margin: 0 0 16px; text-transform: uppercase; } .fs-wn-title-stroke, .fs-wn-title-fill { display: block; position: relative; } .fs-wn-title-stroke { color: transparent; -webkit-text-stroke: 1.5px var(--fs-wn-accent); } .fs-wn-title-fill { position: absolute; inset: 0; color: var(--fs-wn-accent); opacity: 0.16; transform: translate(6px, 6px); pointer-events: none; } .fs-wn-sub { font-size: 14px; opacity: 0.72; margin: 0 0 18px; line-height: 1.5; } .fs-wn-counter { font-family: var(--mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fs-wn-accent); padding: 8px 0 24px; border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); margin-bottom: 24px; } .fs-wn-form { display: flex; flex-direction: column; gap: 14px; } .fs-wn-form .so-lf-input { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.14); color: #faf6ee; } .fs-wn-form .so-lf-input::placeholder { color: rgba(255, 255, 255, 0.32); } .fs-wn-form .so-lf-label { opacity: 0.7; } .fs-wn-form .so-lf-consent { opacity: 0.78; } .fs-wn-form .so-lf-consent a { color: var(--fs-wn-accent); } .fs-wn-cta-wrap { display: block; align-self: stretch; margin-top: 8px; } .fs-wn-cta { display: block; width: 100%; background: #0c0a18; color: var(--fs-wn-accent); border: none; padding: 16px 24px; font-family: var(--mono, monospace); font-size: 14px; letter-spacing: 0.1em; text-transform: uppercase; font-weight: 700; cursor: pointer; transition: background 160ms, color 160ms; } .fs-wn-cta:hover:not(:disabled) { background: var(--fs-wn-accent); color: #0c0a18; } .fs-wn-cta:disabled { opacity: 0.4; cursor: not-allowed; } @media (max-width: 640px) { .fs-wn-inner { padding: 32px 24px 28px; } .fs-wn-title { font-size: 44px; } } /* ========================================================== FS_SpaSage — sage italic + reviewer quote ========================================================== */ .fs-ss { position: relative; background: linear-gradient(180deg, #eef0e8 0%, #e4e8d8 100%); color: #2a2f25; border-radius: 18px; overflow: hidden; --fs-ss-accent: #7B8C72; } .fs-ss-inner { position: relative; z-index: 1; padding: 48px 44px 40px; } .fs-ss-inner--success { padding: 60px 40px; text-align: center; } .fs-ss-eyebrow { font-family: var(--mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.55; margin-bottom: 16px; } .fs-ss-title { font-family: var(--serif, "Playfair Display", serif); font-size: 54px; font-weight: 600; line-height: 1; letter-spacing: -0.02em; margin: 0 0 14px; } .fs-ss-title em { font-style: italic; color: var(--fs-ss-accent); font-weight: 400; } .fs-ss-sub { font-size: 15px; line-height: 1.55; opacity: 0.7; margin: 0 0 32px; max-width: 460px; } .fs-ss-grid { display: grid; grid-template-columns: 1.15fr 0.85fr; gap: 32px; align-items: start; } .fs-ss-form { display: flex; flex-direction: column; gap: 12px; color: #2a2f25; } .fs-ss-form .so-lf-input { background: rgba(255, 255, 255, 0.6); border-color: rgba(42, 47, 37, 0.18); } .fs-ss-form .so-lf-input:focus { border-color: var(--fs-ss-accent); box-shadow: 0 0 0 3px rgba(123, 140, 114, 0.18); background: #fff; } .fs-ss-quote { background: rgba(255, 255, 255, 0.45); border: 1px solid rgba(42, 47, 37, 0.1); border-radius: 14px; padding: 24px 22px; position: relative; } .fs-ss-quote-mark { font-family: var(--serif, serif); font-size: 80px; line-height: 0.5; color: var(--fs-ss-accent); opacity: 0.6; margin-bottom: 8px; } .fs-ss-quote-text { font-family: var(--serif, serif); font-style: italic; font-size: 17px; line-height: 1.5; margin: 0 0 18px; } .fs-ss-quote-author { display: flex; align-items: center; gap: 12px; padding-top: 14px; border-top: 1px solid rgba(42, 47, 37, 0.1); } .fs-ss-quote-author img { width: 38px; height: 38px; border-radius: 50%; object-fit: cover; } .fs-ss-quote-name { font-weight: 600; font-size: 14px; } .fs-ss-quote-role { font-size: 11px; opacity: 0.6; margin-top: 1px; } @media (max-width: 720px) { .fs-ss-inner { padding: 32px 24px 28px; } .fs-ss-title { font-size: 40px; } .fs-ss-grid { grid-template-columns: 1fr; gap: 20px; } } /* ========================================================== FS_AuctionLuxe — gold-on-dark + big bid + urgency ========================================================== */ .fs-au { position: relative; background: radial-gradient(ellipse at top, #2a1f12 0%, #0c0a08 100%); color: #faf6ee; border-radius: 18px; overflow: hidden; --fs-au-accent: #C8995C; } .fs-au-inner { position: relative; z-index: 1; padding: 48px 44px 40px; } .fs-au-inner--success { padding: 60px 40px; text-align: center; } .fs-au-head { display: flex; justify-content: space-between; gap: 20px; margin-bottom: 28px; font-family: var(--mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; } .fs-au-lot { display: inline-flex; align-items: center; gap: 8px; color: var(--fs-au-accent); } .fs-au-lot-dot { width: 8px; height: 8px; background: #BE2828; border-radius: 50%; animation: fs-wn-blip 1.4s ease-in-out infinite; } .fs-au-ends { color: #FF8E76; opacity: 0.9; } .fs-au-title { font-family: var(--serif, "Playfair Display", serif); font-size: 48px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 10px; color: var(--fs-au-accent); } .fs-au-sub { font-size: 14px; opacity: 0.75; margin: 0 0 14px; line-height: 1.5; } .fs-au-estimate { font-family: var(--mono, monospace); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.55; margin-bottom: 24px; } .fs-au-form { display: flex; flex-direction: column; gap: 14px; } .fs-au-bid { position: relative; display: flex; align-items: baseline; gap: 8px; padding: 24px 22px 16px; border-radius: 14px; background: rgba(200, 153, 92, 0.08); border: 1px solid rgba(200, 153, 92, 0.25); margin-bottom: 4px; } .fs-au-bid-currency { font-family: var(--serif, serif); font-size: 36px; color: var(--fs-au-accent); opacity: 0.85; } .fs-au-bid-input { background: transparent; border: none; outline: none; flex: 1; font-family: var(--serif, serif); font-size: 40px; color: var(--fs-au-accent); letter-spacing: -0.01em; font-weight: 600; } .fs-au-bid-input.is-low { color: #FF8E76; } .fs-au-bid-input::placeholder { color: rgba(200, 153, 92, 0.4); } .fs-au-bid-min { position: absolute; bottom: 6px; right: 22px; font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.45; } .fs-au-bid-warn { font-size: 12px; color: #FF8E76; margin-top: -8px; } .fs-au-form .so-lf-input { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.14); color: #faf6ee; } .fs-au-form .so-lf-input::placeholder { color: rgba(255, 255, 255, 0.32); } .fs-au-form .so-lf-label { opacity: 0.65; } .fs-au-form .so-lf-consent { opacity: 0.78; } .fs-au-form .so-lf-consent a { color: var(--fs-au-accent); } .fs-au-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .fs-au-grid .so-lf-row { margin: 0; } .fs-au-cta-wrap { display: block; align-self: stretch; margin-top: 8px; } .fs-au-cta { display: block; width: 100%; background: var(--fs-au-accent); color: #18120c; border: none; padding: 16px 24px; font-family: inherit; font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: background 160ms, transform 160ms; } .fs-au-cta:hover:not(:disabled) { transform: translateY(-1px); } .fs-au-cta:disabled { opacity: 0.4; cursor: not-allowed; } @media (max-width: 640px) { .fs-au-inner { padding: 32px 24px 28px; } .fs-au-title { font-size: 36px; } .fs-au-grid { grid-template-columns: 1fr; } .fs-au-bid-input { font-size: 30px; } .fs-au-bid-currency { font-size: 28px; } } /* ========================================================== FS_PlayfulKids — pastel + bouncy ========================================================== */ .fs-pk { position: relative; background: linear-gradient(160deg, #FFF3F9 0%, #FFE7DF 60%, #FFDCE8 100%); color: #3D1F2E; border-radius: 18px; overflow: hidden; --fs-pk-accent: #FF8EBF; } .fs-pk-inner { position: relative; z-index: 1; padding: 48px 44px 40px; } .fs-pk-inner--success { padding: 50px 32px; text-align: center; } .fs-pk-emoji { font-size: 64px; margin-bottom: 8px; animation: fs-pk-bounce 1.2s ease-in-out infinite; } @keyframes fs-pk-bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-12px); } } .fs-pk-blob { position: absolute; width: 280px; height: 280px; border-radius: 50%; pointer-events: none; z-index: 0; filter: none; /* perf-safe: НЕТ filter:blur (опасный в keyframes), используем opacity */ opacity: 0.55; } .fs-pk-blob--tl { top: -120px; left: -100px; background: radial-gradient(circle, #FFD86B 0%, transparent 70%); animation: fs-pk-float-a 14s ease-in-out infinite; } .fs-pk-blob--br { bottom: -120px; right: -100px; background: radial-gradient(circle, #B58EFF 0%, transparent 70%); animation: fs-pk-float-b 16s ease-in-out infinite; } @keyframes fs-pk-float-a { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(30px, 20px, 0); } } @keyframes fs-pk-float-b { 0%, 100% { transform: translate3d(0, 0, 0); } 50% { transform: translate3d(-25px, -15px, 0); } } .fs-pk-eyebrow { display: inline-flex; align-items: center; gap: 8px; background: #fff; color: var(--fs-pk-accent); padding: 8px 16px; border-radius: 999px; font-weight: 700; font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; box-shadow: 0 4px 12px rgba(255, 142, 191, 0.18); margin-bottom: 18px; } .fs-pk-title { font-family: var(--serif, "Playfair Display", serif); font-size: 46px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 12px; color: #3D1F2E; } .fs-pk-sub { font-size: 15px; line-height: 1.55; opacity: 0.7; margin: 0 0 28px; } .fs-pk-form { display: flex; flex-direction: column; gap: 14px; } .fs-pk-form .so-lf-input { border-radius: 14px; background: #fff; border-color: rgba(61, 31, 46, 0.12); font-size: 15px; padding: 14px 16px; } .fs-pk-form .so-lf-input:focus { border-color: var(--fs-pk-accent); box-shadow: 0 0 0 4px rgba(255, 142, 191, 0.18); } .fs-pk-form .so-lf-label { font-weight: 600; text-transform: none; letter-spacing: 0.02em; font-size: 13px; opacity: 0.85; } .fs-pk-form .so-lf-consent a { color: var(--fs-pk-accent); } .fs-pk-cta { margin-top: 8px; padding: 16px 24px; border-radius: 14px; border: none; background: linear-gradient(135deg, var(--fs-pk-accent) 0%, #FFD86B 100%); color: #fff; font-weight: 700; font-size: 15px; letter-spacing: 0.01em; cursor: pointer; transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 200ms; font-family: inherit; box-shadow: 0 8px 20px rgba(255, 142, 191, 0.32); } .fs-pk-cta:hover:not(:disabled) { transform: translateY(-3px) scale(1.02); box-shadow: 0 16px 36px rgba(255, 142, 191, 0.45); } .fs-pk-cta:disabled { opacity: 0.45; cursor: not-allowed; } @media (max-width: 640px) { .fs-pk-inner { padding: 32px 24px 28px; } .fs-pk-title { font-size: 34px; } } /* ========================================================== FS_PricingTier (11) — 3 tiers + Get a quote form ========================================================== */ .fs-pt { position: relative; display: grid; grid-template-columns: 1.05fr 1fr; background: #faf6ee; color: #18120c; border-radius: 18px; overflow: hidden; --fs-pt-accent: #7C5CFF; min-height: 560px; } .fs-pt-success { grid-column: 1 / -1; padding: 60px 40px; text-align: center; } .fs-pt-tiers { background: linear-gradient(180deg, #f3f0e8 0%, #ecebe7 100%); padding: 36px 28px; border-right: 1px solid rgba(24, 18, 12, 0.08); overflow-y: auto; max-height: 84vh; } .fs-pt-eyebrow { font-family: var(--mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.55; margin-bottom: 18px; } .fs-pt-tiers-grid { display: flex; flex-direction: column; gap: 12px; } .fs-pt-tier { position: relative; text-align: left; background: #fff; border: 1px solid rgba(24, 18, 12, 0.1); border-radius: 14px; padding: 16px 18px; cursor: pointer; font: inherit; color: inherit; transition: border-color 180ms, transform 180ms, box-shadow 180ms; } .fs-pt-tier:hover { border-color: var(--fs-pt-accent); transform: translateY(-2px); box-shadow: 0 16px 28px rgba(124, 92, 255, 0.12); } .fs-pt-tier.is-active { border-color: var(--fs-pt-accent); background: color-mix(in srgb, var(--fs-pt-accent) 6%, #fff); box-shadow: 0 0 0 2px var(--fs-pt-accent); } .fs-pt-tier.is-highlight { border-color: var(--fs-pt-accent); } .fs-pt-tier-badge { position: absolute; top: -10px; right: 14px; background: var(--fs-pt-accent); color: #fff; font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; font-weight: 700; font-family: var(--mono, monospace); } .fs-pt-tier-name { font-family: var(--serif, serif); font-size: 20px; font-weight: 700; margin-bottom: 4px; } .fs-pt-tier-price { display: flex; align-items: baseline; gap: 4px; margin-bottom: 6px; } .fs-pt-tier-price-amount { font-family: var(--serif, serif); font-size: 26px; font-weight: 700; color: var(--fs-pt-accent); } .fs-pt-tier-price-unit { font-size: 12px; opacity: 0.6; } .fs-pt-tier-desc { font-size: 12px; opacity: 0.7; margin-bottom: 10px; line-height: 1.45; } .fs-pt-tier-feats { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; font-size: 12px; } .fs-pt-tier-feats li { display: flex; align-items: center; gap: 6px; opacity: 0.85; } .fs-pt-tier-feats span { color: var(--fs-pt-accent); font-weight: 700; } .fs-pt-pane { padding: 36px 32px; display: flex; flex-direction: column; justify-content: center; position: relative; z-index: 1; } .fs-pt-title { font-family: var(--serif, "Playfair Display", serif); font-size: 32px; font-weight: 700; line-height: 1.1; margin: 0 0 10px; } .fs-pt-sub { font-size: 14px; opacity: 0.7; margin: 0 0 22px; line-height: 1.55; } .fs-pt-form { display: flex; flex-direction: column; gap: 12px; } @media (max-width: 720px) { .fs-pt { grid-template-columns: 1fr; min-height: auto; } .fs-pt-tiers { border-right: none; border-bottom: 1px solid rgba(24,18,12,0.08); padding: 28px 22px; max-height: none; } .fs-pt-pane { padding: 28px 22px; } } /* ========================================================== FS_SpeakerInquiry (12) — speaker grid + form ========================================================== */ .fs-sp4 { position: relative; background: #faf6ee; color: #18120c; border-radius: 18px; overflow: hidden; --fs-sp4-accent: #18120c; } .fs-sp4-inner { position: relative; z-index: 1; padding: 44px 38px 36px; } .fs-sp4-success { padding: 60px 40px; text-align: center; } .fs-sp4-eyebrow { font-family: var(--mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.55; margin-bottom: 14px; } .fs-sp4-title { font-family: var(--serif, "Playfair Display", serif); font-size: 38px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; margin: 0 0 10px; } .fs-sp4-sub { font-size: 14px; opacity: 0.7; margin: 0 0 24px; line-height: 1.55; } .fs-sp4-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 24px; } .fs-sp4-card { text-align: left; background: #fff; border: 1px solid rgba(24, 18, 12, 0.08); border-radius: 12px; padding: 14px; cursor: pointer; font: inherit; color: inherit; transition: border-color 180ms, transform 180ms; } .fs-sp4-card:hover { border-color: var(--fs-sp4-accent); transform: translateY(-2px); } .fs-sp4-card.is-active { border-color: var(--fs-sp4-accent); box-shadow: 0 0 0 2px var(--fs-sp4-accent); } .fs-sp4-avatar { width: 100%; aspect-ratio: 1; border-radius: 8px; overflow: hidden; background: #ecebe7; margin-bottom: 8px; } .fs-sp4-avatar img { width: 100%; height: 100%; object-fit: cover; transition: transform 600ms ease-out; } .fs-sp4-card:hover .fs-sp4-avatar img { transform: scale(1.06); } .fs-sp4-name { font-weight: 600; font-size: 13px; margin-bottom: 2px; } .fs-sp4-role { font-size: 11px; opacity: 0.55; font-family: var(--mono, monospace); letter-spacing: 0.04em; } .fs-sp4-form { display: flex; flex-direction: column; gap: 12px; } .fs-sp4-grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .fs-sp4-grid-2 .so-lf-row { margin: 0; } @media (max-width: 640px) { .fs-sp4-inner { padding: 28px 22px; } .fs-sp4-title { font-size: 30px; } .fs-sp4-grid { grid-template-columns: 1fr 1fr; } .fs-sp4-grid-2 { grid-template-columns: 1fr; } } /* ========================================================== FS_VillaCalendar (13) — photo carousel + range calendar ========================================================== */ .fs-vc { position: relative; display: grid; grid-template-columns: 1fr 1.1fr; background: #faf6ee; color: #18120c; border-radius: 18px; overflow: hidden; --fs-vc-accent: #C8995C; min-height: 600px; } .fs-vc-success { grid-column: 1 / -1; padding: 60px 40px; text-align: center; } .fs-vc-photo { position: relative; background: #1a1a1f; min-height: 320px; } .fs-vc-photo-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 700ms ease-in-out; } .fs-vc-photo-img.is-active { opacity: 1; } .fs-vc-photo-tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,6,4,0.2) 0%, transparent 30%, rgba(8,6,4,0.7) 100%); pointer-events: none; } .fs-vc-photo-meta { position: absolute; bottom: 24px; left: 24px; right: 24px; color: #faf6ee; z-index: 2; } .fs-vc-eyebrow { font-family: var(--mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 8px; opacity: 0.86; } .fs-vc-price { font-family: var(--serif, "Playfair Display", serif); font-size: 22px; font-style: italic; font-weight: 400; margin-bottom: 14px; } .fs-vc-dots { display: flex; gap: 6px; } .fs-vc-dot { width: 8px; height: 8px; border-radius: 50%; background: rgba(255, 255, 255, 0.32); border: none; padding: 0; cursor: pointer; transition: background 200ms, width 200ms; } .fs-vc-dot.is-active { background: #fff; width: 20px; border-radius: 4px; } .fs-vc-pane { padding: 36px 32px 28px; display: flex; flex-direction: column; justify-content: flex-start; position: relative; overflow-y: auto; max-height: 84vh; } .fs-vc-title { font-family: var(--serif, "Playfair Display", serif); font-size: 30px; font-weight: 700; line-height: 1.1; margin: 0 0 8px; letter-spacing: -0.01em; } .fs-vc-sub { font-size: 13px; opacity: 0.7; margin: 0 0 18px; line-height: 1.55; } .fs-vc-label { font-family: var(--mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--fs-vc-accent); margin-bottom: 8px; } .fs-vc-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 20px; } .fs-vc-day { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; padding: 8px 2px; border-radius: 8px; background: transparent; border: 1px solid rgba(24, 18, 12, 0.08); color: inherit; cursor: pointer; font: inherit; transition: border-color 160ms, background 160ms; } .fs-vc-day:hover:not(.is-booked) { border-color: var(--fs-vc-accent); } .fs-vc-day.is-range { background: color-mix(in srgb, var(--fs-vc-accent) 22%, transparent); border-color: var(--fs-vc-accent); } .fs-vc-day.is-start, .fs-vc-day.is-end { background: var(--fs-vc-accent); color: #fff; border-color: var(--fs-vc-accent); } .fs-vc-day.is-booked { opacity: 0.3; cursor: not-allowed; text-decoration: line-through; } .fs-vc-day-wd { font-family: var(--mono, monospace); font-size: 8px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.6; } .fs-vc-day-num { font-size: 11px; font-weight: 600; } .fs-vc-form { display: flex; flex-direction: column; gap: 10px; } .fs-vc-cta { margin-top: 6px; padding: 14px 22px; border-radius: 12px; border: none; background: var(--fs-vc-accent); color: #fff; font-weight: 700; font-size: 14px; letter-spacing: 0.02em; cursor: pointer; transition: transform 160ms, box-shadow 160ms; font-family: inherit; } .fs-vc-cta:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 14px 30px rgba(200, 153, 92, 0.32); } .fs-vc-cta:disabled { opacity: 0.45; cursor: not-allowed; } @media (max-width: 720px) { .fs-vc { grid-template-columns: 1fr; min-height: auto; } .fs-vc-photo { min-height: 220px; } .fs-vc-pane { padding: 28px 22px 24px; max-height: none; } } /* ========================================================== FS_PortfolioContact (14) — mosaic-grid + minimal form ========================================================== */ .fs-pc { position: relative; background: #18120c; color: #faf6ee; border-radius: 18px; overflow: hidden; min-height: 600px; --fs-pc-accent: #FAF6EE; } .fs-pc-success { padding: 60px 40px; text-align: center; position: relative; z-index: 2; } .fs-pc-mosaic { position: absolute; inset: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(3, 1fr); z-index: 0; } .fs-pc-tile { overflow: hidden; position: relative; } .fs-pc-tile img { width: 100%; height: 100%; object-fit: cover; transition: transform 1.4s ease-out; } .fs-pc:hover .fs-pc-tile:nth-child(odd) img { transform: scale(1.06); } .fs-pc:hover .fs-pc-tile:nth-child(even) img { transform: scale(1.03); } .fs-pc-tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,6,4,0.45) 0%, rgba(8,6,4,0.75) 70%, rgba(8,6,4,0.9) 100%); z-index: 1; pointer-events: none; } .fs-pc-inner { position: relative; z-index: 2; padding: 60px 44px 44px; max-width: 560px; margin: 0 auto; } .fs-pc-eyebrow { font-family: var(--mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.7; margin-bottom: 18px; } .fs-pc-title { font-family: var(--serif, "Playfair Display", serif); font-size: 56px; font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 12px; } .fs-pc-title em { font-style: italic; font-weight: 400; color: #C99A5C; } .fs-pc-sub { font-size: 14px; opacity: 0.75; margin: 0 0 28px; max-width: 420px; line-height: 1.55; } .fs-pc-form { display: flex; flex-direction: column; gap: 12px; } .fs-pc-form .so-lf-input { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.15); color: #faf6ee; } .fs-pc-form .so-lf-input::placeholder { color: rgba(255, 255, 255, 0.32); } .fs-pc-form .so-lf-label { opacity: 0.7; } .fs-pc-form .so-lf-consent { opacity: 0.78; } .fs-pc-form .so-lf-consent a { color: #C99A5C; } .fs-pc-cta-wrap { display: block; align-self: stretch; margin-top: 8px; } .fs-pc-cta { display: block; width: 100%; background: #FAF6EE; color: #18120c; border: none; padding: 14px 22px; font-family: inherit; font-weight: 700; font-size: 14px; letter-spacing: 0.04em; cursor: pointer; transition: background 200ms, color 200ms; } .fs-pc-cta:hover:not(:disabled) { background: #C99A5C; color: #fff; } .fs-pc-cta:disabled { opacity: 0.4; cursor: not-allowed; } @media (max-width: 640px) { .fs-pc { min-height: 540px; } .fs-pc-inner { padding: 36px 24px 28px; } .fs-pc-title { font-size: 40px; } .fs-pc-mosaic { grid-template-columns: repeat(2, 1fr); grid-template-rows: repeat(5, 1fr); } .fs-pc-tile:nth-child(n+9) { display: none; } } /* ========================================================== FS_VenueBooking (15) — hero photo + stats + booking ========================================================== */ .fs-vb { position: relative; background: #18120c; color: #faf6ee; border-radius: 18px; overflow: hidden; --fs-vb-accent: #FF8E76; } .fs-vb-success { padding: 60px 40px; text-align: center; } .fs-vb-hero { position: relative; min-height: 280px; background: #0c0a08; } .fs-vb-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.85; } .fs-vb-hero-tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(8,6,4,0.2) 0%, rgba(8,6,4,0.85) 100%); pointer-events: none; } .fs-vb-hero-meta { position: absolute; left: 40px; right: 40px; bottom: 26px; z-index: 1; } .fs-vb-eyebrow { font-family: var(--mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; margin-bottom: 12px; opacity: 0.85; } .fs-vb-title { font-family: var(--serif, "Playfair Display", serif); font-size: 44px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 8px; } .fs-vb-sub { font-size: 14px; opacity: 0.78; margin: 0; max-width: 520px; line-height: 1.5; } .fs-vb-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0; background: #0c0a08; border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .fs-vb-stat { padding: 18px 16px; text-align: center; border-right: 1px solid rgba(255, 255, 255, 0.06); } .fs-vb-stat:last-child { border-right: none; } .fs-vb-stat-v { font-family: var(--serif, serif); font-size: 18px; font-weight: 700; color: var(--fs-vb-accent); margin-bottom: 4px; } .fs-vb-stat-l { font-family: var(--mono, monospace); font-size: 9px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.55; } .fs-vb-pane { padding: 32px 40px 36px; } .fs-vb-form { display: flex; flex-direction: column; gap: 12px; color: #faf6ee; } .fs-vb-form .so-lf-input { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.14); color: #faf6ee; } .fs-vb-form .so-lf-input::placeholder { color: rgba(255, 255, 255, 0.35); } .fs-vb-form .so-lf-label { opacity: 0.65; } .fs-vb-form .so-lf-consent { opacity: 0.78; } .fs-vb-form .so-lf-consent a { color: var(--fs-vb-accent); } .fs-vb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .fs-vb-grid .so-lf-row { margin: 0; } .fs-vb-form .so-lf-submit { background: var(--fs-vb-accent); color: #18120c; font-weight: 700; } @media (max-width: 640px) { .fs-vb-hero-meta { left: 24px; right: 24px; bottom: 20px; } .fs-vb-title { font-size: 32px; } .fs-vb-stats { grid-template-columns: 1fr 1fr; } .fs-vb-stat { border-bottom: 1px solid rgba(255,255,255,0.06); } .fs-vb-stat:nth-child(2) { border-right: none; } .fs-vb-pane { padding: 24px 22px 28px; } .fs-vb-grid { grid-template-columns: 1fr; } } /* ========================================================== FS_WeddingInquiry (16) — couples photo + blush palette ========================================================== */ .fs-wd { position: relative; display: grid; grid-template-columns: 1fr 1fr; background: linear-gradient(180deg, #FFF8F5 0%, #F5E1D8 100%); color: #5C3D3D; border-radius: 18px; overflow: hidden; min-height: 600px; --fs-wd-accent: #D4A5A5; } .fs-wd-success { grid-column: 1 / -1; padding: 60px 40px; text-align: center; } .fs-wd-photo { position: relative; background: #2a1a1a; min-height: 320px; } .fs-wd-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .fs-wd-photo-tint { position: absolute; inset: 0; background: linear-gradient(180deg, transparent 40%, rgba(40, 25, 25, 0.55) 100%); pointer-events: none; } .fs-wd-photo-stamp { position: absolute; bottom: 24px; left: 24px; right: 24px; display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255, 248, 245, 0.92); z-index: 2; } .fs-wd-pane { padding: 40px 36px 32px; position: relative; z-index: 2; overflow-y: auto; max-height: 84vh; } .fs-wd-eyebrow { font-family: var(--mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.55; margin-bottom: 16px; } .fs-wd-title { font-family: var(--serif, "Playfair Display", serif); font-size: 44px; font-weight: 600; line-height: 1.02; letter-spacing: -0.02em; margin: 0 0 14px; } .fs-wd-title em { font-style: italic; color: var(--fs-wd-accent); font-weight: 400; } .fs-wd-sub { font-size: 14px; line-height: 1.55; opacity: 0.75; margin: 0 0 24px; } .fs-wd-form { display: flex; flex-direction: column; gap: 12px; } .fs-wd-form .so-lf-input { background: rgba(255, 255, 255, 0.6); border-color: rgba(92, 61, 61, 0.16); } .fs-wd-form .so-lf-input:focus { border-color: var(--fs-wd-accent); background: #fff; } .fs-wd-form .so-lf-submit { background: var(--fs-wd-accent); color: #fff; } .fs-wd-form .so-lf-submit:hover:not(:disabled) { background: #B98B8B; box-shadow: 0 14px 28px rgba(212, 165, 165, 0.4); } .fs-wd-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .fs-wd-grid .so-lf-row { margin: 0; } @media (max-width: 720px) { .fs-wd { grid-template-columns: 1fr; min-height: auto; } .fs-wd-photo { min-height: 220px; } .fs-wd-pane { padding: 28px 22px 24px; max-height: none; } .fs-wd-title { font-size: 32px; } .fs-wd-grid { grid-template-columns: 1fr; } } /* ========================================================== FS_InvestmentFund (17) — numbers panel + accredited check ========================================================== */ .fs-if { position: relative; background: linear-gradient(180deg, #14110a 0%, #1f1810 100%); color: #faf6ee; border-radius: 18px; overflow: hidden; --fs-if-accent: #C8995C; } .fs-if-inner { position: relative; z-index: 1; padding: 44px 40px 36px; } .fs-if-success { padding: 60px 40px; text-align: center; } .fs-if-head { margin-bottom: 28px; } .fs-if-eyebrow { font-family: var(--mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fs-if-accent); margin-bottom: 14px; } .fs-if-title { font-family: var(--serif, "Playfair Display", serif); font-size: 38px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 10px; } .fs-if-sub { font-size: 14px; opacity: 0.7; margin: 0; line-height: 1.55; } .fs-if-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; margin-bottom: 18px; padding: 22px 0; border-top: 1px solid rgba(255, 255, 255, 0.08); border-bottom: 1px solid rgba(255, 255, 255, 0.08); } .fs-if-stat { padding: 0 6px; } .fs-if-stat-v { font-family: var(--serif, serif); font-size: 24px; font-weight: 700; color: var(--fs-if-accent); margin-bottom: 4px; letter-spacing: -0.01em; } .fs-if-stat-l { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; opacity: 0.65; margin-bottom: 2px; } .fs-if-stat-sl { font-size: 11px; opacity: 0.45; } .fs-if-min { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--fs-if-accent); margin-bottom: 24px; display: inline-flex; align-items: center; gap: 8px; } .fs-if-form { display: flex; flex-direction: column; gap: 14px; } .fs-if-form .so-lf-input { background: rgba(255, 255, 255, 0.04); border-color: rgba(255, 255, 255, 0.14); color: #faf6ee; } .fs-if-form .so-lf-input::placeholder { color: rgba(255, 255, 255, 0.32); } .fs-if-form .so-lf-label { opacity: 0.7; } .fs-if-form .so-lf-consent { opacity: 0.78; } .fs-if-form .so-lf-consent a { color: var(--fs-if-accent); } .fs-if-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .fs-if-grid .so-lf-row { margin: 0; } .fs-if-accred { display: flex; gap: 10px; padding: 14px 16px; border: 1px solid rgba(200, 153, 92, 0.32); border-radius: 10px; background: rgba(200, 153, 92, 0.06); font-size: 12px; line-height: 1.55; cursor: pointer; align-items: flex-start; } .fs-if-accred input { margin-top: 2px; flex: none; accent-color: var(--fs-if-accent); } .fs-if-cta-wrap { display: block; margin-top: 8px; } .fs-if-cta { display: block; width: 100%; background: var(--fs-if-accent); color: #18120c; border: none; padding: 16px 24px; font-family: inherit; font-weight: 700; font-size: 14px; letter-spacing: 0.08em; text-transform: uppercase; cursor: pointer; transition: transform 160ms; } .fs-if-cta:hover:not(:disabled) { transform: translateY(-1px); } .fs-if-cta:disabled { opacity: 0.4; cursor: not-allowed; } @media (max-width: 640px) { .fs-if-inner { padding: 32px 24px 28px; } .fs-if-title { font-size: 30px; } .fs-if-stats { grid-template-columns: 1fr; } .fs-if-grid { grid-template-columns: 1fr; } } /* ========================================================== FS_NewsletterMagazine (18) — issue cover + subscribe ========================================================== */ .fs-nm { position: relative; display: grid; grid-template-columns: 0.85fr 1.15fr; background: #faf6ee; color: #18120c; border-radius: 18px; overflow: hidden; min-height: 540px; --fs-nm-accent: #BE2828; } .fs-nm-success { grid-column: 1 / -1; padding: 60px 40px; text-align: center; } .fs-nm-cover { position: relative; background: #2a1a1a; min-height: 320px; } .fs-nm-cover img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; filter: contrast(1.05); } .fs-nm-cover-tint { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24, 18, 12, 0.15) 0%, rgba(24, 18, 12, 0.75) 100%); } .fs-nm-cover-meta { position: absolute; bottom: 28px; left: 28px; right: 28px; color: #faf6ee; z-index: 2; } .fs-nm-cover-issue { font-family: var(--mono, "JetBrains Mono", monospace); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.78; margin-bottom: 10px; } .fs-nm-cover-headline { font-family: var(--serif, "Playfair Display", serif); font-size: 30px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin-bottom: 8px; } .fs-nm-cover-tagline { font-family: var(--serif, serif); font-size: 14px; font-style: italic; opacity: 0.85; } /* Paper-fold deco line */ .fs-nm-cover-fold { position: absolute; top: 0; right: 16px; bottom: 0; width: 2px; background: rgba(255, 255, 255, 0.12); z-index: 2; } .fs-nm-pane { padding: 44px 40px 32px; display: flex; flex-direction: column; } .fs-nm-title { font-family: var(--serif, "Playfair Display", serif); font-size: 48px; font-weight: 700; line-height: 1.02; letter-spacing: -0.03em; margin: 0 0 12px; } .fs-nm-title em { font-style: italic; color: var(--fs-nm-accent); font-weight: 400; } .fs-nm-sub { font-size: 14px; line-height: 1.55; opacity: 0.7; margin: 0 0 22px; max-width: 460px; } .fs-nm-list { list-style: none; padding: 0; margin: 0 0 24px; display: flex; flex-direction: column; gap: 6px; font-size: 12px; font-family: var(--mono, monospace); letter-spacing: 0.04em; opacity: 0.7; } .fs-nm-list li::before { content: "→ "; color: var(--fs-nm-accent); font-weight: 700; } .fs-nm-form { display: flex; flex-direction: column; gap: 12px; } .fs-nm-form .so-lf-input { border-radius: 0; border: none; border-bottom: 1.5px solid rgba(24, 18, 12, 0.2); padding: 12px 0; background: transparent; font-size: 16px; } .fs-nm-form .so-lf-input:focus { border-bottom-color: var(--fs-nm-accent); box-shadow: none; } .fs-nm-form .so-lf-submit { background: #18120c; color: #faf6ee; padding: 14px 28px; border-radius: 0; letter-spacing: 0.08em; text-transform: uppercase; font-size: 12px; align-self: flex-start; margin-top: 6px; } .fs-nm-form .so-lf-submit:hover:not(:disabled) { background: var(--fs-nm-accent); box-shadow: none; } .fs-nm-foot { font-size: 11px; opacity: 0.5; font-family: var(--mono, monospace); letter-spacing: 0.04em; margin-top: 10px; } @media (max-width: 720px) { .fs-nm { grid-template-columns: 1fr; min-height: auto; } .fs-nm-cover { min-height: 220px; } .fs-nm-pane { padding: 28px 24px 24px; } .fs-nm-title { font-size: 36px; } } /* ========================================================== FS_CoworkingTour (19) — SVG floor-plan + tour form ========================================================== */ .fs-ct { position: relative; display: grid; grid-template-columns: 1.1fr 1fr; background: #faf6ee; color: #18120c; border-radius: 18px; overflow: hidden; --fs-ct-accent: #5BE39E; min-height: 540px; } .fs-ct-success { grid-column: 1 / -1; padding: 60px 40px; text-align: center; } .fs-ct-plan { background: linear-gradient(180deg, #f6f3eb 0%, #ecebe7 100%); padding: 36px 32px; border-right: 1px solid rgba(24, 18, 12, 0.08); display: flex; flex-direction: column; } .fs-ct-eyebrow { font-family: var(--mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; opacity: 0.55; margin-bottom: 12px; } .fs-ct-plan-label { font-family: var(--mono, monospace); font-size: 12px; letter-spacing: 0.04em; color: var(--fs-ct-accent); font-weight: 700; margin-bottom: 16px; min-height: 18px; } .fs-ct-svg { display: block; width: 100%; max-width: 360px; margin: 0 auto 22px; color: #18120c; } .fs-ct-perks { display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto; } .fs-ct-perk { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border-radius: 999px; background: #fff; border: 1px solid rgba(24, 18, 12, 0.1); font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.06em; text-transform: uppercase; } .fs-ct-perk span { color: var(--fs-ct-accent); font-weight: 700; } .fs-ct-pane { padding: 36px 32px; display: flex; flex-direction: column; justify-content: center; } .fs-ct-title { font-family: var(--serif, "Playfair Display", serif); font-size: 32px; font-weight: 700; line-height: 1.1; margin: 0 0 8px; } .fs-ct-sub { font-size: 13px; opacity: 0.7; margin: 0 0 18px; line-height: 1.5; } .fs-ct-form { display: flex; flex-direction: column; gap: 12px; } .fs-ct-cta-wrap { display: block; margin-top: 8px; } .fs-ct-cta { display: block; width: 100%; background: #18120c; color: var(--fs-ct-accent); border: none; padding: 14px 22px; font-family: inherit; font-weight: 700; font-size: 14px; letter-spacing: 0.04em; cursor: pointer; transition: background 200ms, color 200ms; } .fs-ct-cta:hover:not(:disabled) { background: var(--fs-ct-accent); color: #18120c; } .fs-ct-cta:disabled { opacity: 0.4; cursor: not-allowed; } @media (max-width: 720px) { .fs-ct { grid-template-columns: 1fr; min-height: auto; } .fs-ct-plan { border-right: none; border-bottom: 1px solid rgba(24,18,12,0.08); padding: 24px 22px; } .fs-ct-pane { padding: 24px 22px 28px; } .fs-ct-title { font-size: 26px; } } /* ========================================================== FS_Donation (20) — goal progress + suggested amounts ========================================================== */ .fs-dn { position: relative; background: linear-gradient(180deg, #FFF8F2 0%, #FFE5DC 100%); color: #3D2218; border-radius: 18px; overflow: hidden; --fs-dn-accent: #FF8E76; } .fs-dn-inner { position: relative; z-index: 1; padding: 44px 40px 36px; } .fs-dn-success { padding: 60px 40px; text-align: center; position: relative; z-index: 1; } .fs-dn-eyebrow { font-family: var(--mono, "JetBrains Mono", monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--fs-dn-accent); margin-bottom: 14px; } .fs-dn-title { font-family: var(--serif, "Playfair Display", serif); font-size: 36px; font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 10px; color: #3D2218; } .fs-dn-sub { font-size: 14px; opacity: 0.7; margin: 0 0 22px; line-height: 1.55; max-width: 500px; } .fs-dn-progress-wrap { margin-bottom: 22px; } .fs-dn-progress-track { height: 12px; background: rgba(255, 142, 118, 0.18); border-radius: 999px; overflow: hidden; } .fs-dn-progress-fill { height: 100%; background: linear-gradient(90deg, var(--fs-dn-accent) 0%, #FFD49A 100%); border-radius: 999px; transition: width 600ms ease-out; } .fs-dn-progress-meta { display: flex; justify-content: space-between; margin-top: 8px; font-family: var(--mono, monospace); font-size: 12px; letter-spacing: 0.04em; } .fs-dn-progress-raised { font-weight: 700; color: var(--fs-dn-accent); } .fs-dn-progress-goal { opacity: 0.5; } .fs-dn-progress-pct { font-weight: 700; color: var(--fs-dn-accent); } .fs-dn-amounts { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 22px; } .fs-dn-amount { flex: 1 1 calc(25% - 6px); min-width: 70px; padding: 12px 12px; border: 1.5px solid rgba(61, 34, 24, 0.14); border-radius: 12px; background: rgba(255, 255, 255, 0.6); font-family: var(--serif, serif); font-size: 18px; font-weight: 700; color: #3D2218; cursor: pointer; transition: border-color 160ms, background 160ms, transform 160ms; } .fs-dn-amount:hover { border-color: var(--fs-dn-accent); transform: translateY(-2px); } .fs-dn-amount.is-active { background: var(--fs-dn-accent); border-color: var(--fs-dn-accent); color: #fff; } .fs-dn-amount-custom { flex: 2 1 100%; display: flex; align-items: center; gap: 6px; padding: 12px 14px; border: 1.5px solid rgba(61, 34, 24, 0.14); border-radius: 12px; background: rgba(255, 255, 255, 0.6); } .fs-dn-amount-custom span { font-family: var(--serif, serif); font-size: 18px; font-weight: 700; color: var(--fs-dn-accent); } .fs-dn-amount-custom input { flex: 1; background: transparent; border: none; outline: none; font-family: inherit; font-size: 15px; color: #3D2218; } .fs-dn-amount-custom input::placeholder { color: rgba(61, 34, 24, 0.4); } .fs-dn-form { display: flex; flex-direction: column; gap: 12px; position: relative; z-index: 1; } .fs-dn-form .so-lf-input { background: rgba(255, 255, 255, 0.6); border-color: rgba(61, 34, 24, 0.14); } .fs-dn-form .so-lf-input:focus { border-color: var(--fs-dn-accent); background: #fff; } .fs-dn-cta { margin-top: 6px; padding: 16px 24px; border-radius: 14px; border: none; background: linear-gradient(135deg, var(--fs-dn-accent) 0%, #FFD49A 100%); color: #fff; font-weight: 700; font-size: 15px; letter-spacing: 0.02em; cursor: pointer; transition: transform 200ms cubic-bezier(0.34, 1.56, 0.64, 1), box-shadow 200ms; font-family: inherit; box-shadow: 0 8px 20px rgba(255, 142, 118, 0.28); } .fs-dn-cta:hover:not(:disabled) { transform: translateY(-2px); box-shadow: 0 14px 32px rgba(255, 142, 118, 0.42); } .fs-dn-cta:disabled { opacity: 0.45; cursor: not-allowed; } .fs-dn-trust { text-align: center; font-size: 11px; opacity: 0.55; margin-top: 14px; font-family: var(--mono, monospace); letter-spacing: 0.04em; } @media (max-width: 640px) { .fs-dn-inner { padding: 32px 24px 28px; } .fs-dn-title { font-size: 28px; } .fs-dn-amount { flex: 1 1 calc(50% - 4px); } } /* ========================================================== PREMIUM-5 SCREENS — 3D and parallax-driven compositions ========================================================== */ /* -------------- 1. AGENCY (pag5) -- dark space studio --------------- */ .pag5 { position: relative; min-height: 100vh; background: linear-gradient(180deg, #0a0712 0%, #110820 100%); color: #f3eef8; padding: 110px 32px 100px; overflow: hidden; } .pag5-aurora { position: absolute; inset: 0; opacity: 0.65; pointer-events: none; } .pag5-scene { position: absolute; top: 50%; right: -120px; transform: translateY(-50%); width: 720px; height: 720px; pointer-events: none; opacity: 0.85; } .pag5-inner { position: relative; max-width: 1280px; margin: 0 auto; display: grid; gap: 56px; } .pag5-top { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.7; } .pag5-logo { display: inline-flex; align-items: center; gap: 10px; font-weight: 700; } .pag5-logo-mark { color: #7C5CFF; font-size: 16px; } .pag5-eyebrow { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.22em; color: #7C5CFF; margin-bottom: 18px; } .pag5-title { font-family: var(--serif, serif); font-size: clamp(48px, 7vw, 96px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; margin: 0; max-width: 740px; } .pag5-italic { font-style: italic; font-weight: 300; color: #FFD49A; } .pag5-desc { font-size: 18px; line-height: 1.55; max-width: 540px; opacity: 0.78; margin: 28px 0 0; } .pag5-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 24px; max-width: 760px; margin-top: 16px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); } .pag5-stats strong { display: block; font-family: var(--serif, serif); font-size: 38px; font-weight: 600; letter-spacing: -0.02em; } .pag5-stats span { display: block; font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.18em; opacity: 0.55; margin-top: 6px; } .pag5-ctas { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; } .pag5-cta { background: #7C5CFF; color: #fff; padding: 16px 26px; border-radius: 8px; font-weight: 600; font-size: 15px; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; transition: transform 250ms, background 250ms; } .pag5-cta:hover { background: #9576FF; transform: translateY(-2px); } .pag5-cta-g { background: transparent; color: #f3eef8; padding: 16px 26px; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; font-size: 14px; text-decoration: none; transition: border 250ms; } .pag5-cta-g:hover { border-color: rgba(255,255,255,0.5); } .pag5-foot { display: flex; gap: 14px; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.18em; opacity: 0.5; padding-top: 20px; } @media (max-width: 768px) { .pag5-scene { right: -200px; width: 520px; height: 520px; opacity: 0.45; } .pag5-title { font-size: clamp(40px, 11vw, 64px); } .pag5-stats { grid-template-columns: repeat(2, 1fr); } } /* -------------- 2. EXPEDITION (pex5) -- outdoor parallax ------------ */ .pex5 { position: relative; min-height: 200vh; background: linear-gradient(180deg, #0d1320 0%, #1a2235 80%, #0a0d18 100%); color: #eef2f8; overflow: hidden; } .pex5-parallax { position: absolute; inset: 0; pointer-events: none; } .pex5-content { position: sticky; top: 0; height: 100vh; display: flex; align-items: center; padding: 80px 32px; box-sizing: border-box; } .pex5-content > * { position: relative; z-index: 2; } .pex5-top { position: absolute; top: 40px; left: 32px; right: 32px; display: flex; justify-content: space-between; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.65; } .pex5-mid { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1fr 0.9fr; gap: 80px; width: 100%; } .pex5-eyebrow { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.22em; color: #FFD49A; margin-bottom: 18px; } .pex5-title { font-family: var(--serif, serif); font-size: clamp(56px, 8vw, 110px); font-weight: 700; line-height: 0.95; letter-spacing: -0.02em; margin: 0; } .pex5-italic { font-style: italic; font-weight: 300; color: #B5DDD5; } .pex5-desc { font-size: 17px; line-height: 1.55; max-width: 480px; opacity: 0.82; margin: 30px 0 0; } .pex5-route { background: rgba(15,20,30,0.55); backdrop-filter: blur(14px); border: 1px solid rgba(255,255,255,0.08); border-radius: 14px; padding: 28px; align-self: end; } .pex5-route-h { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.2em; opacity: 0.55; margin-bottom: 14px; } .pex5-route-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 10px; } .pex5-route-list li { display: grid; grid-template-columns: 64px 1fr; gap: 12px; font-size: 14px; opacity: 0.88; } .pex5-route-list span { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.14em; color: #FFD49A; opacity: 0.7; } .pex5-foot { grid-column: 1 / -1; display: flex; justify-content: space-between; align-items: flex-end; gap: 28px; margin-top: 40px; padding-top: 24px; border-top: 1px solid rgba(255,255,255,0.08); flex-wrap: wrap; } .pex5-price-l { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.2em; opacity: 0.55; } .pex5-price-v { font-family: var(--serif, serif); font-size: 44px; font-weight: 600; line-height: 1; margin: 6px 0; } .pex5-price-x { font-size: 12px; opacity: 0.6; } .pex5-cta { background: #FFD49A; color: #0a0908; padding: 16px 28px; border-radius: 8px; font-weight: 700; font-size: 15px; text-decoration: none; display: inline-flex; gap: 8px; align-items: center; transition: transform 250ms, background 250ms; } .pex5-cta:hover { background: #fff; transform: translateY(-2px); } @media (max-width: 768px) { .pex5 { min-height: 250vh; } .pex5-mid { grid-template-columns: 1fr; gap: 32px; } .pex5-title { font-size: clamp(44px, 12vw, 72px); } .pex5-foot { flex-direction: column; align-items: flex-start; } } /* -------------- 3. PARFUMERIE (ppf5) -- dark luxury ---------------- */ .ppf5 { position: relative; min-height: 100vh; background: linear-gradient(135deg, #16100a 0%, #2a1d12 60%, #0a0604 100%); color: #f5ecd6; padding: 100px 32px; overflow: hidden; } .ppf5-foil { position: absolute; inset: 0; mix-blend-mode: overlay; opacity: 0.32; pointer-events: none; } .ppf5-grid { position: relative; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 0.9fr 1.1fr; gap: 80px; align-items: center; } .ppf5-scene { position: relative; aspect-ratio: 1/1; max-width: 560px; justify-self: center; } .ppf5-side { display: grid; gap: 36px; } .ppf5-top { display: flex; justify-content: space-between; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.18em; opacity: 0.55; } .ppf5-eyebrow { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.22em; color: #C99A5C; margin-bottom: 18px; } .ppf5-title { font-family: var(--serif, serif); font-size: clamp(56px, 7vw, 96px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; margin: 0; } .ppf5-italic { font-style: italic; font-weight: 300; color: #C99A5C; } .ppf5-desc { font-size: 17px; line-height: 1.6; opacity: 0.78; max-width: 480px; } .ppf5-notes-h { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.2em; opacity: 0.5; margin-bottom: 16px; } .ppf5-notes-grid { display: grid; gap: 14px; } .ppf5-notes-grid > div { display: grid; grid-template-columns: 80px 1fr; align-items: center; gap: 12px; padding: 14px 0; border-top: 1px solid rgba(245,236,214,0.1); } .ppf5-notes-grid span { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.2em; opacity: 0.55; } .ppf5-notes-grid strong { font-size: 15px; font-weight: 400; letter-spacing: 0.02em; } .ppf5-foot { display: flex; justify-content: space-between; align-items: flex-end; padding-top: 24px; border-top: 1px solid rgba(245,236,214,0.12); gap: 24px; flex-wrap: wrap; } .ppf5-price-l { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.18em; opacity: 0.55; } .ppf5-price-v { font-family: var(--serif, serif); font-size: 40px; font-weight: 600; margin-top: 6px; } .ppf5-cta { background: #C99A5C; color: #0a0604; padding: 16px 26px; border-radius: 8px; font-weight: 700; font-size: 15px; text-decoration: none; transition: background 250ms, transform 250ms; display: inline-flex; gap: 8px; align-items: center; } .ppf5-cta:hover { background: #FFD49A; transform: translateY(-2px); } @media (max-width: 768px) { .ppf5-grid { grid-template-columns: 1fr; gap: 40px; } .ppf5-title { font-size: clamp(44px, 12vw, 64px); } } /* -------------- 4. GALLERY (pgl5) -- PagePin3D wrap ---------------- */ .pgl5-wrap { position: relative; background: #0a0608; color: #fff; } .pgl5-overlay { position: absolute; top: 0; left: 0; right: 0; z-index: 6; padding: 60px 32px 0; pointer-events: none; } .pgl5-top { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.2em; text-transform: uppercase; opacity: 0.55; max-width: 1280px; margin: 0 auto 30px; } .pgl5-title { font-family: var(--serif, serif); font-size: clamp(72px, 12vw, 180px); font-weight: 600; line-height: 0.95; letter-spacing: -0.02em; margin: 0; max-width: 1280px; margin-inline: auto; display: flex; flex-direction: column; } .pgl5-italic { font-style: italic; font-weight: 200; color: #FFD49A; margin-left: 6vw; } .pgl5-desc { font-family: var(--mono, monospace); font-size: 12px; letter-spacing: 0.18em; opacity: 0.5; text-transform: uppercase; max-width: 1280px; margin: 20px auto 0; } .pgl5-foot { position: relative; z-index: 4; background: #0a0608; padding: 32px; border-top: 1px solid rgba(255,255,255,0.08); display: flex; justify-content: space-between; align-items: center; gap: 24px; flex-wrap: wrap; } .pgl5-info { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.18em; opacity: 0.6; display: flex; gap: 14px; } .pgl5-cta { background: #FFD49A; color: #0a0608; padding: 14px 24px; border-radius: 8px; font-weight: 700; font-size: 14px; text-decoration: none; transition: background 200ms, transform 200ms; } .pgl5-cta:hover { background: #fff; transform: translateY(-2px); } @media (max-width: 768px) { .pgl5-title { font-size: clamp(56px, 18vw, 110px); } .pgl5-overlay { padding: 32px 20px 0; } } /* -------------- 5. CYBER MUSIC (pcm5) -- PostFX + FluidSim --------- */ .pcm5 { position: relative; min-height: 100vh; background: #050010; color: #f3eef8; padding: 100px 32px; overflow: hidden; } .pcm5-postfx { position: absolute; inset: 0; opacity: 0.85; pointer-events: none; } .pcm5-fluid { position: absolute; inset: 0; mix-blend-mode: screen; opacity: 0.5; pointer-events: none; } .pcm5-grid { position: relative; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 0.95fr 1.05fr; gap: 80px; align-items: center; } .pcm5-cover-card { position: relative; aspect-ratio: 1/1; border-radius: 16px; overflow: hidden; box-shadow: 0 30px 80px rgba(124,92,255,0.35); transform: rotate(-2deg); transition: transform 600ms cubic-bezier(0.23,1,0.32,1); } .pcm5-cover-card:hover { transform: rotate(0deg) translateY(-8px); } .pcm5-cover-card img { width: 100%; height: 100%; object-fit: cover; display: block; filter: saturate(1.2) contrast(1.05); } .pcm5-cover-meta { position: absolute; bottom: 0; left: 0; right: 0; padding: 18px 22px; background: linear-gradient(0deg, rgba(0,0,0,0.85), transparent); font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.18em; opacity: 0.9; } .pcm5-cover-meta > div:first-child { font-weight: 700; margin-bottom: 4px; } .pcm5-side { display: grid; gap: 30px; } .pcm5-eyebrow { display: inline-flex; align-items: center; gap: 10px; padding: 8px 14px; background: rgba(124,92,255,0.18); border: 1px solid rgba(124,92,255,0.5); border-radius: 999px; width: fit-content; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.18em; } .pcm5-dot { width: 8px; height: 8px; background: #FF6B9D; border-radius: 50%; box-shadow: 0 0 12px #FF6B9D; animation: pcm5-blink 1.2s infinite; } @keyframes pcm5-blink { 50% { opacity: 0.3; } } .pcm5-title { font-family: var(--serif, serif); font-size: clamp(48px, 6.5vw, 84px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; margin: 0; } .pcm5-italic { font-style: italic; font-weight: 300; color: #FF6B9D; } .pcm5-desc { font-size: 17px; line-height: 1.55; opacity: 0.78; max-width: 480px; } .pcm5-tracks { background: rgba(15,8,28,0.65); backdrop-filter: blur(14px); border: 1px solid rgba(124,92,255,0.25); border-radius: 14px; padding: 22px 26px; } .pcm5-tr-h { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.2em; opacity: 0.55; margin-bottom: 14px; } .pcm5-tr { display: grid; grid-template-columns: 40px 1fr 80px; gap: 14px; padding: 10px 0; border-top: 1px solid rgba(124,92,255,0.1); align-items: center; } .pcm5-tr:first-of-type { border-top: 0; } .pcm5-tr.is-playing { color: #FFD49A; } .pcm5-tr.is-playing::before { content: "▶"; color: #FF6B9D; } .pcm5-tr-n { font-family: var(--mono, monospace); font-size: 11px; opacity: 0.55; } .pcm5-tr-t { font-size: 15px; font-weight: 500; } .pcm5-tr-d { font-family: var(--mono, monospace); font-size: 11px; opacity: 0.55; text-align: right; } .pcm5-listen { display: flex; gap: 12px; flex-wrap: wrap; } .pcm5-listen-b { padding: 12px 18px; background: rgba(255,255,255,0.06); border: 1px solid rgba(255,255,255,0.1); border-radius: 8px; color: #f3eef8; font-size: 13px; font-weight: 500; text-decoration: none; transition: background 200ms, border 200ms; } .pcm5-listen-b:hover { background: rgba(124,92,255,0.2); border-color: rgba(124,92,255,0.5); } .pcm5-listen-g { padding: 12px 18px; background: #FFD49A; color: #0a0908; border-radius: 8px; font-size: 13px; font-weight: 700; text-decoration: none; } @media (max-width: 768px) { .pcm5-grid { grid-template-columns: 1fr; gap: 48px; } .pcm5-title { font-size: clamp(36px, 11vw, 56px); } } /* -------------- 6. ARCHITECTURE (par5) -- Aurora light + tilt ------ */ .par5 { position: relative; min-height: 100vh; background: #faf5ec; color: #18120c; padding: 100px 32px; overflow: hidden; } .par5-aurora { position: absolute; inset: 0; opacity: 0.5; pointer-events: none; } .par5-inner { position: relative; max-width: 1280px; margin: 0 auto; display: grid; gap: 64px; } .par5-top { display: flex; justify-content: space-between; align-items: center; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; opacity: 0.65; } .par5-logo { display: inline-flex; gap: 10px; align-items: center; font-weight: 700; } .par5-mark { font-size: 14px; color: #C99A5C; } .par5-eyebrow { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.22em; color: #C99A5C; margin-bottom: 18px; } .par5-title { font-family: var(--serif, serif); font-size: clamp(48px, 7vw, 96px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; margin: 0; max-width: 800px; } .par5-italic { font-style: italic; font-weight: 300; color: #C99A5C; } .par5-desc { font-size: 17px; line-height: 1.6; max-width: 560px; opacity: 0.75; margin-top: 26px; } .par5-projects { display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px; } .par5-card { position: relative; display: grid; gap: 18px; padding: 22px; background: #fff; border-radius: 16px; box-shadow: 0 4px 20px rgba(24,18,12,0.08); text-decoration: none; color: #18120c; transition: transform 400ms cubic-bezier(0.23,1,0.32,1), box-shadow 400ms; transform-style: preserve-3d; perspective: 1000px; } .par5-card:hover { transform: perspective(1000px) rotateY(-3deg) rotateX(3deg) translateY(-6px); box-shadow: 0 30px 60px rgba(201,154,92,0.25); } .par5-card-img { aspect-ratio: 4/3; border-radius: 10px; background-size: cover; background-position: center; } .par5-card-info { display: grid; gap: 6px; padding: 0 4px 4px; } .par5-card-n { font-family: var(--serif, serif); font-size: 22px; font-weight: 600; } .par5-card-meta { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.14em; opacity: 0.55; text-transform: uppercase; } .par5-card-award { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.2em; color: #C99A5C; text-transform: uppercase; margin-top: 4px; } .par5-card-glow { position: absolute; inset: 0; border-radius: 16px; background: radial-gradient(ellipse at 30% 0%, rgba(201,154,92,0.15), transparent 60%); opacity: 0; transition: opacity 400ms; pointer-events: none; } .par5-card:hover .par5-card-glow { opacity: 1; } .par5-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 28px; border-top: 1px solid rgba(24,18,12,0.1); flex-wrap: wrap; gap: 20px; } .par5-tier { display: grid; gap: 6px; } .par5-tier-l { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.18em; opacity: 0.55; text-transform: uppercase; } .par5-tier-r { font-size: 14px; } .par5-cta { background: #18120c; color: #faf5ec; padding: 16px 26px; border-radius: 8px; font-weight: 700; font-size: 15px; text-decoration: none; transition: background 250ms, transform 250ms; display: inline-flex; gap: 8px; align-items: center; } .par5-cta:hover { background: #C99A5C; color: #0a0604; transform: translateY(-2px); } @media (max-width: 768px) { .par5-projects { grid-template-columns: 1fr; } .par5-title { font-size: clamp(40px, 11vw, 64px); } .par5-foot { flex-direction: column; align-items: flex-start; } } /* ========================================================== PREMIUM-5 v2 — Logistics (real Viewer3D) + Expedition V2 parallax ========================================================== */ /* -------------- 2. LOGISTICS (plg5) -- real GLB Viewer3D ----------- */ .plg5 { position: relative; min-height: 100vh; background: linear-gradient(135deg, #0F1118 0%, #1A1F2E 100%); color: #e8edf5; padding: 100px 32px; overflow: hidden; } .plg5-grid { position: relative; max-width: 1280px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 80px; align-items: center; } .plg5-side { display: grid; gap: 36px; } .plg5-top { display: flex; justify-content: space-between; gap: 16px; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.18em; opacity: 0.55; flex-wrap: wrap; } .plg5-eyebrow { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.22em; color: #7CB7FF; margin-bottom: 18px; } .plg5-title { font-family: var(--serif, serif); font-size: clamp(48px, 6.5vw, 88px); font-weight: 700; line-height: 1; letter-spacing: -0.02em; margin: 0; } .plg5-italic { font-style: italic; font-weight: 300; color: #7CB7FF; } .plg5-desc { font-size: 17px; line-height: 1.6; opacity: 0.78; max-width: 520px; margin-top: 24px; } .plg5-specs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px 28px; padding: 22px 0; border-top: 1px solid rgba(255,255,255,0.08); border-bottom: 1px solid rgba(255,255,255,0.08); } .plg5-specs > div { display: grid; grid-template-columns: 90px 1fr; gap: 14px; align-items: center; } .plg5-specs span { font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.2em; opacity: 0.5; } .plg5-specs strong { font-size: 14px; font-weight: 500; } .plg5-trust { display: flex; gap: 12px; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.16em; opacity: 0.6; flex-wrap: wrap; } .plg5-foot { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; } .plg5-cta { background: #7CB7FF; color: #0F1118; padding: 16px 26px; border-radius: 8px; font-weight: 700; font-size: 15px; text-decoration: none; transition: background 200ms, transform 200ms; display: inline-flex; gap: 8px; align-items: center; } .plg5-cta:hover { background: #fff; transform: translateY(-2px); } .plg5-cta-g { background: transparent; color: #e8edf5; padding: 16px 26px; border: 1px solid rgba(255,255,255,0.2); border-radius: 8px; font-size: 14px; text-decoration: none; } .plg5-scene { position: relative; } .plg5-scene canvas { outline: none; } .plg5-scene-meta { position: absolute; bottom: 12px; left: 12px; font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.18em; opacity: 0.7; background: rgba(15,17,24,0.6); backdrop-filter: blur(10px); padding: 6px 12px; border-radius: 999px; display: inline-flex; align-items: center; gap: 8px; } .plg5-scene-dot { width: 6px; height: 6px; background: #5BE39E; border-radius: 50%; box-shadow: 0 0 8px #5BE39E; animation: plg5-blink 1.5s infinite; } @keyframes plg5-blink { 50% { opacity: 0.3; } } @media (max-width: 900px) { .plg5-grid { grid-template-columns: 1fr; gap: 40px; } .plg5-title { font-size: clamp(40px, 11vw, 64px); } } /* -------------- 3. EXPEDITION V2 (pex5v2) -- real parallax-V2 ----- */ .pex5v2 { position: relative; background: #0a0908; color: #f5ede1; padding: 100px 32px; overflow: hidden; } .pex5v2-inner { position: relative; max-width: 1500px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1.3fr; gap: 80px; align-items: center; } .pex5v2-text { display: grid; gap: 24px; } .pex5v2-eyebrow { display: inline-flex; align-items: center; gap: 12px; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.22em; text-transform: uppercase; color: #FFD49A; } .pex5v2-line { display: inline-block; width: 48px; height: 1px; background: #FFD49A; } .pex5v2-title { font-family: var(--serif, serif); font-size: clamp(40px, 5.2vw, 64px); font-weight: 700; line-height: 1.05; letter-spacing: -0.02em; margin: 0; max-width: 520px; } .pex5v2-italic { font-style: italic; font-weight: 300; color: #FFD49A; } .pex5v2-desc { font-size: 16px; line-height: 1.6; opacity: 0.82; max-width: 520px; margin: 0; } .pex5v2-steps { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; opacity: 0.75; } .pex5v2-steps li { display: flex; align-items: center; gap: 12px; } .pex5v2-steps span { width: 6px; height: 6px; background: #FFD49A; border-radius: 50%; flex-shrink: 0; } .pex5v2-hint { font-family: var(--mono, monospace); font-size: 11px; letter-spacing: 0.18em; opacity: 0.55; text-transform: uppercase; margin-top: 16px; } .pex5v2-stage { position: relative; aspect-ratio: 4/3; width: 100%; border-radius: 24px; overflow: hidden; border: 1px solid rgba(255,255,255,0.08); box-shadow: 0 40px 120px rgba(0,0,0,0.4); background: #000; } .pex5v2-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 1; user-select: none; pointer-events: none; } .pex5v2-layer { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; user-select: none; pointer-events: none; transition: opacity 700ms; } .pex5v2-vignette { position: absolute; inset: 0; z-index: 10; pointer-events: none; box-shadow: inset 0 0 120px rgba(0,0,0,0.35); } .pex5v2-badge { position: absolute; bottom: 12px; left: 12px; z-index: 20; font-family: var(--mono, monospace); font-size: 10px; letter-spacing: 0.28em; color: rgba(255,255,255,0.85); background: rgba(0,0,0,0.4); backdrop-filter: blur(8px); padding: 6px 14px; border-radius: 999px; text-transform: uppercase; } @media (max-width: 900px) { .pex5v2-inner { grid-template-columns: 1fr; gap: 32px; } .pex5v2-title { font-size: clamp(32px, 9vw, 48px); } }