/* ============================================================ PROJECT SINGLE — SHARED SYSTEM STYLESHEET --project-accent = PRIMARY (set per project on ) --green = SECONDARY (lightrays, site-wide) ============================================================ */ :root { --project-accent: #24FF72; } /* ============================================================ HERO ============================================================ */ .ps-hero { position: relative; height: 100vh; min-height: 560px; overflow: hidden; display: flex; align-items: flex-end; cursor: pointer; } .ps-hero-grid { position: absolute; inset: 0; display: grid; } .ps-tile { position: relative; transform-style: preserve-3d; } /* ---- Flip blur effect ---- */ /* Applied during the flip animation — tiles blur at mid-point then clear */ .ps-tile-front, .ps-tile-back { position: absolute; inset: 0; backface-visibility: hidden; -webkit-backface-visibility: hidden; will-change: filter; } .ps-tile.flip-blur { animation: ps-tile-blur var(--flip-dur, 400ms) cubic-bezier(0.42,0,0.22,1) forwards; } @keyframes ps-tile-blur { 0% { filter: blur(0px); } 45% { filter: blur(6px); } 55% { filter: blur(6px); } 100% { filter: blur(0px); } } /* Transparent clickable layer sits above the grid/overlay but below content. Catches clicks on the hero background without intercepting content clicks. */ .ps-hero-click-layer { position: absolute; inset: 0; z-index: 3; cursor: pointer; } .ps-tile-back { transform: rotateY(180deg); } .ps-tile.flipped { transform: rotateY(180deg); } .ps-hero-overlay { position: absolute; inset: 0; z-index: 2; background: linear-gradient( to bottom, rgba(10,10,15,0.04) 0%, rgba(10,10,15,0.0) 35%, rgba(10,10,15,0.72) 72%, rgba(10,10,15,1.0) 100% ); pointer-events: none; } .ps-dots { position: absolute; bottom: 7rem; right: 2.5rem; z-index: 10; display: flex; gap: 0.5rem; align-items: center; pointer-events: auto; } .ps-dot { width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,0.25); border: none; cursor: pointer; transition: all 0.35s ease; padding: 0; } .ps-dot.active { background: var(--project-accent); width: 22px; border-radius: 3px; } /* Content block — fully pointer-events:none so every click anywhere on the hero background falls through to ps-hero-click-layer (z-index 3). Only the dots (z-index 10, pointer-events:auto) remain interactive. */ .ps-hero-content { position: relative; z-index: 5; padding: 0 64px 4.5rem; width: 100%; max-width: 1400px; margin: 0 auto; pointer-events: none; } /* No pointer-events re-enabled on children — text/tags/tools are display-only */ .ps-hero-tag { display: inline-block; font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; padding: 0.28rem 0.85rem; border-radius: 3px; margin-bottom: 1.1rem; color: var(--green, #24FF72); border: 1px solid var(--green, #24FF72); background: color-mix(in srgb, var(--green, #24FF72) 10%, transparent); } .ps-hero-title { font-family: 'Sugar Snow', cursive; font-size: clamp(3rem, 7.5vw, 6.5rem); font-weight: normal; line-height: 1.0; letter-spacing: 0.01em; margin-bottom: 2rem; color: var(--text-light); } .ps-hero-title em { color: var(--project-accent); font-style: normal; } .ps-hero-meta { display: flex; gap: 2.5rem; flex-wrap: wrap; } .ps-hero-meta-label { display: block; font-size: 0.66rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.2rem; } .ps-hero-meta-value { font-size: 0.95rem; color: var(--text-light); font-weight: 500; } .ps-hero-tools { display: flex; flex-wrap: wrap; gap: 0.45rem; margin-top: 1.4rem; } .ps-hero-tool { font-size: 0.7rem; letter-spacing: 0.08em; color: rgba(255,255,255,0.50); border: 1px solid rgba(255,255,255,0.1); padding: 0.25rem 0.75rem; border-radius: 100px; font-family: 'Roboto', sans-serif; transition: color 0.2s, border-color 0.2s; } .ps-hero-tool:hover { color: var(--project-accent); border-color: var(--project-accent); } /* ============================================================ LAYOUT ============================================================ */ .ps-main { padding-top: 0; } .ps-container { max-width: 1200px; margin: 0 auto; padding: 0 64px; } .ps-section { padding: 5.5rem 0; border-bottom: 1px solid var(--border-subtle); } .ps-section:last-child { border-bottom: none; } .ps-section-label { font-size: 0.66rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--project-accent); margin-bottom: 1rem; display: block; } .ps-section-title { font-family: 'Sugar Snow', cursive; font-size: clamp(1.9rem, 3.2vw, 2.8rem); font-weight: normal; line-height: 1.15; margin-bottom: 1.2rem; color: var(--text-light); } .ps-body-text { font-size: 1.05rem; color: var(--text-gray); line-height: 1.92; max-width: 720px; margin-bottom: 1.2rem; /* No margin:auto — left-aligned as an element, same as section title */ } .ps-body-text:last-child { margin-bottom: 0; } .ps-body-text strong { color: var(--text-light); font-weight: 600; } .ps-body-text em { color: var(--project-accent); font-style: normal; } /* ============================================================ META GRID Fixed 4-column layout so there are never empty trailing cells. Status cell shows a pulsing LED (Active) or steady LED (Completed). ============================================================ */ .ps-meta-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; background: var(--border-subtle); border: 1px solid var(--border-subtle); border-radius: 8px; overflow: hidden; margin-top: 2.5rem; } /* Variants for fewer cells */ .ps-meta-grid.ps-meta-2 { grid-template-columns: repeat(2, 1fr); } .ps-meta-grid.ps-meta-3 { grid-template-columns: repeat(3, 1fr); } .ps-meta-cell { background: var(--card-bg); padding: 1.2rem 1.6rem; display: flex; flex-direction: column; gap: 0.35rem; align-items: center; text-align: center; } .ps-meta-cell-label { font-size: 0.64rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text-dim); display: block; } .ps-meta-cell-value { font-size: 0.94rem; color: var(--text-light); font-weight: 500; display: flex; align-items: center; justify-content: center; gap: 0.5rem; } /* ---- Status LED ---- */ .ps-status-led { display: inline-block; width: 7px; height: 7px; border-radius: 50%; flex-shrink: 0; } /* Active: pulsing green dot */ .ps-status-led.active { background: #24FF72; animation: ps-led-pulse 1.8s ease-in-out infinite; } /* Completed: steady accent, no animation */ .ps-status-led.completed { background: var(--project-accent); box-shadow: 0 0 5px var(--project-accent); } @keyframes ps-led-pulse { 0% { box-shadow: 0 0 0 0 rgba(36, 255, 114, 0.7); } 55% { box-shadow: 0 0 0 6px rgba(36, 255, 114, 0.0); } 100% { box-shadow: 0 0 0 0 rgba(36, 255, 114, 0.0); } } @media (max-width: 640px) { .ps-meta-grid, .ps-meta-grid.ps-meta-3 { grid-template-columns: repeat(2, 1fr); } } /* ============================================================ PIPELINE — each stage has a text side and an optional visual side. Text-only stages span the full width. Alternates: odd = text left / image right, even = image left / text right. ============================================================ */ .ps-pipeline { margin-top: 3rem; border: 1px solid var(--border-subtle); border-radius: 12px; overflow: hidden; } .ps-pipeline-step { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--border-subtle); min-height: 300px; } .ps-pipeline-step:last-child { border-bottom: none; } /* Text-only step = single column */ .ps-pipeline-step.ps-step-text-only { grid-template-columns: 1fr; min-height: auto; } /* Flipped layout — image on left */ .ps-pipeline-step.ps-step-flipped .ps-step-text { order: 2; border-left: 1px solid var(--border-subtle); border-right: none; } .ps-pipeline-step.ps-step-flipped .ps-step-visual { order: 1; } .ps-step-text { padding: 3rem 3.5rem; display: flex; flex-direction: column; justify-content: center; border-right: 1px solid var(--border-subtle); } .ps-pipeline-step.ps-step-text-only .ps-step-text { border-right: none; max-width: 760px; padding: 2.8rem 3.5rem; } .ps-step-num { font-size: 0.64rem; font-weight: 700; letter-spacing: 0.14em; font-family: 'Roboto', sans-serif; color: var(--project-accent); margin-bottom: 0.8rem; display: block; } .ps-step-title { font-family: 'Sugar Snow', cursive; font-size: 1.3rem; font-weight: normal; color: var(--text-light); margin-bottom: 0.8rem; line-height: 1.25; } .ps-step-desc { font-size: 0.95rem; color: var(--text-gray); line-height: 1.85; } .ps-step-desc strong { color: var(--text-light); font-weight: 600; } .ps-step-desc em { color: var(--project-accent); font-style: normal; } /* Visual side */ .ps-step-visual { position: relative; overflow: hidden; background: var(--card-bg); cursor: pointer; } .ps-step-visual img { width: 100%; height: 100%; object-fit: cover; display: block; position: absolute; inset: 0; transition: transform 0.6s ease; } .ps-pipeline-step:hover .ps-step-visual img { transform: scale(1.04); } /* Texture quad — 2x2 grid inside the visual pane */ .ps-step-texture-grid { position: absolute; inset: 0; display: grid; grid-template-columns: 1fr 1fr; grid-template-rows: 1fr 1fr; gap: 2px; background: var(--border-subtle); } .ps-step-texture-tile { position: relative; overflow: hidden; cursor: pointer; } .ps-step-texture-tile img, .ps-step-texture-tile > div { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.4s ease; } .ps-step-texture-tile:hover img, .ps-step-texture-tile:hover > div { transform: scale(1.06); } .ps-step-texture-label { position: absolute; bottom: 0; left: 0; right: 0; font-size: 0.58rem; letter-spacing: 0.12em; text-transform: uppercase; color: rgba(255,255,255,0.55); background: rgba(10,10,15,0.78); padding: 0.28rem 0.5rem; pointer-events: none; z-index: 2; } /* Hover expand overlay on visual and texture tiles */ .ps-step-visual-overlay { position: absolute; inset: 0; z-index: 3; background: rgba(0,0,0,0.28); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; font-size: 1.5rem; color: var(--project-accent); pointer-events: none; } .ps-step-visual:hover .ps-step-visual-overlay { opacity: 1; } .ps-step-texture-tile .ps-tile-overlay { position: absolute; inset: 0; z-index: 3; background: rgba(0,0,0,0.28); display: flex; align-items: center; justify-content: center; opacity: 0; transition: opacity 0.3s; font-size: 1.1rem; color: var(--project-accent); pointer-events: none; } .ps-step-texture-tile:hover .ps-tile-overlay { opacity: 1; } @media (max-width: 860px) { .ps-pipeline-step { grid-template-columns: 1fr; min-height: auto; } .ps-pipeline-step.ps-step-flipped .ps-step-text { order: 1; border-left: none; border-bottom: 1px solid var(--border-subtle); } .ps-pipeline-step.ps-step-flipped .ps-step-visual { order: 2; } .ps-step-text { border-right: none; border-bottom: 1px solid var(--border-subtle); padding: 2.5rem 2rem; } .ps-step-visual { min-height: 260px; } } @media (max-width: 540px) { .ps-step-text { padding: 2rem 1.5rem; } .ps-step-visual { min-height: 220px; } } /* ============================================================ FINAL PIECES — asymmetric editorial grid, no overlapping. Root cause of overlap: grid-auto-rows:52px means each card occupies (row-span × 52px) of height, but the grid rows shared between adjacent cards can collide if the row numbers overlap. Fix: drop grid-auto-rows entirely and give each card an explicit pixel height. The card is position:relative with height set, so it always takes up real space in the grid flow. Images inside use position:absolute + object-fit:cover so they always fill exactly the card's real dimensions — no stretching, no overflow. When you add real images, they will cover the card area proportionally regardless of their original aspect ratio. ============================================================ */ .ps-final-grid { margin-top: 3rem; display: grid; grid-template-columns: repeat(12, 1fr); /* NO grid-auto-rows — each card has an explicit height */ gap: 0.75rem; align-items: start; /* prevents rows stretching to match neighbours */ } .ps-final-card { position: relative; overflow: hidden; border-radius: 10px; background: var(--card-bg); cursor: pointer; /* height is set per-card below */ } .ps-final-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; /* proportional fill — never stretches */ display: block; transition: transform 0.7s cubic-bezier(0.25,0.46,0.45,0.94); } .ps-final-card:hover img { transform: scale(1.05); } .ps-final-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 55%; background: linear-gradient(to top, rgba(8,8,12,0.92) 0%, transparent 100%); pointer-events: none; z-index: 1; transition: height 0.35s ease; } .ps-final-card:hover::after { height: 65%; } .ps-final-card-info { position: absolute; bottom: 0; left: 0; right: 0; padding: 1.3rem 1.5rem; z-index: 2; } .ps-final-card-name { display: block; font-family: 'Sugar Snow', cursive; font-size: 1.05rem; font-weight: normal; color: var(--text-light); margin-bottom: 0.3rem; line-height: 1.2; } .ps-final-card-type { display: inline-block; font-size: 0.6rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--project-accent); border: 1px solid var(--project-accent); padding: 0.15rem 0.55rem; border-radius: 2px; } .ps-final-placeholder { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.1); pointer-events: none; z-index: 0; } /* 5-card asymmetric layout. Each card gets: grid-column span + explicit height. Cards sit in rows sequentially — no grid-row overlaps. Row 1: cards 1 + 2 side by side (different heights = masonry feel) Row 2: cards 3 + 4 + 5 in thirds (slightly different heights) */ .ps-final-card:nth-child(1) { grid-column: 1 / 8; height: 460px; } .ps-final-card:nth-child(2) { grid-column: 8 / 13; height: 500px; /* taller = portrait feel, masonry offset */ } .ps-final-card:nth-child(3) { grid-column: 1 / 5; height: 320px; } .ps-final-card:nth-child(4) { grid-column: 5 / 9; height: 350px; /* slightly taller = asymmetric bottom row */ } .ps-final-card:nth-child(5) { grid-column: 9 / 13; height: 320px; } /* 4-card variant */ .ps-final-grid.ps-final-4 .ps-final-card:nth-child(1) { grid-column: 1 / 7; height: 440px; } .ps-final-grid.ps-final-4 .ps-final-card:nth-child(2) { grid-column: 7 / 13; height: 480px; } .ps-final-grid.ps-final-4 .ps-final-card:nth-child(3) { grid-column: 1 / 7; height: 320px; } .ps-final-grid.ps-final-4 .ps-final-card:nth-child(4) { grid-column: 7 / 13; height: 320px; } @media (max-width: 900px) { .ps-final-grid { grid-template-columns: repeat(2, 1fr); } .ps-final-card:nth-child(n) { grid-column: span 1 !important; height: 300px; } .ps-final-card:nth-child(1) { grid-column: span 2 !important; height: 380px; } .ps-final-grid.ps-final-4 .ps-final-card:nth-child(n) { grid-column: span 1 !important; height: 300px; } } @media (max-width: 540px) { .ps-final-grid { grid-template-columns: 1fr; } .ps-final-card:nth-child(n) { grid-column: span 1 !important; height: 280px; } } /* ============================================================ BEFORE / AFTER SLIDER — rebuilt from scratch LOGIC: • "Before" (Reference Photo) fills the full container as a base layer. • "After" (Mesh) sits on top and is clipped from the LEFT: clip-path: inset(0 0 0 X%) → shows right portion Dragging right (X% decreasing) reveals more of After. Dragging left (X% increasing) reveals more of Before. • Container height is driven by the natural image aspect ratio, measured once per image via JS and set as a CSS custom property. • The seam uses a real cross-fade: a narrow opacity-gradient strip on both panels blends them together smoothly. • Badges are inside their own panel so they clip away with it: .ps-ba-before .ps-ba-badge → bottom-left, clips away leftward .ps-ba-after .ps-ba-badge → bottom-right, clips away rightward ============================================================ */ /* Outer wrapper — no fixed aspect ratio here; JS sets --ba-aspect */ .ps-ba-wrap { position: relative; width: 70%; margin-left: auto; margin-right: auto; border-radius: 10px; overflow: hidden; cursor: col-resize; margin-top: 2rem; user-select: none; touch-action: none; border: 1px solid var(--border-subtle); background: var(--card-bg); } /* Height box — aspect ratio driven by JS via --ba-aspect (default 16/9) */ .ps-ba-sizer { position: relative; width: 100%; padding-top: var(--ba-aspect, 56.25%); } /* All children positioned inside the sizer */ .ps-ba-inner { position: absolute; inset: 0; } /* Both panels fill the inner box */ .ps-ba-before, .ps-ba-after { position: absolute; inset: 0; overflow: hidden; } /* Images fill their panel exactly */ .ps-ba-before img, .ps-ba-after img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; } /* AFTER panel: revealed from the right using mask-image. mask-image with a gradient gives a real soft fade at the seam — not a hard cut. The mask fades transparent→opaque over 60px at the seam position. JS sets the mask directly via inline style on the element. Default mask = 50% split. */ .ps-ba-after { -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent calc(50% - 30px), black calc(50% + 30px), black 100% ); mask-image: linear-gradient(to right, transparent 0%, transparent calc(50% - 30px), black calc(50% + 30px), black 100% ); } /* Badge shared styles */ .ps-ba-badge { position: absolute; bottom: 0.85rem; font-size: 0.64rem; letter-spacing: 0.16em; text-transform: uppercase; background: rgba(0, 0, 0, 0.72); backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px); padding: 0.3rem 0.7rem; border-radius: 3px; pointer-events: none; color: rgba(255, 255, 255, 0.9); z-index: 4; border: 1px solid rgba(255, 255, 255, 0.1); } /* Before = bottom-left (visible when before panel is showing) */ .ps-ba-before .ps-ba-badge { left: 0.9rem; } /* After = bottom-right (clips away with the after panel) */ .ps-ba-after .ps-ba-badge { right: 0.9rem; } /* Divider line */ .ps-ba-divider { position: absolute; top: 0; bottom: 0; left: 50%; width: 2px; background: rgba(255, 255, 255, 0.9); transform: translateX(-50%); pointer-events: none; z-index: 6; box-shadow: 0 0 8px rgba(0, 0, 0, 0.6); } /* Drag handle */ .ps-ba-handle { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 44px; height: 44px; background: white; border-radius: 50%; display: flex; align-items: center; justify-content: center; pointer-events: none; box-shadow: 0 2px 18px rgba(0, 0, 0, 0.55); font-size: 1rem; color: #0a0a0f; z-index: 7; transition: transform 0.15s ease, box-shadow 0.15s ease; } /* Hint arrows inside handle */ .ps-ba-handle::before, .ps-ba-handle::after { content: '‹'; font-size: 1rem; color: #0a0a0f; font-weight: 700; line-height: 1; } .ps-ba-handle::after { content: '›'; } /* ============================================================ VIDEO EMBED ============================================================ */ .ps-video-wrap { position: relative; width: 100%; border-radius: 8px; overflow: hidden; margin-top: 2rem; background: var(--card-bg); border: 1px solid var(--border-subtle); cursor: pointer; } .ps-video-ratio { position: relative; width: 100%; } .ps-video-ratio::before { content: ''; display: block; padding-top: 56.25%; } .ps-video-inner { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } .ps-video-inner img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; } .ps-video-play { position: relative; z-index: 2; width: 68px; height: 68px; border-radius: 50%; border: 2px solid var(--project-accent); display: flex; align-items: center; justify-content: center; font-size: 1.4rem; color: var(--project-accent); transition: all 0.3s ease; background: rgba(0,0,0,0.4); } .ps-video-wrap:hover .ps-video-play { background: var(--project-accent); color: var(--bg-dark); transform: scale(1.08); } .ps-video-label { position: absolute; bottom: 1.2rem; left: 1.4rem; z-index: 2; font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: rgba(255,255,255,0.35); } .ps-video-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; display: block; } /* ============================================================ 3D VIEWER ============================================================ */ .ps-3d-wrap { position: relative; width: 100%; border-radius: 8px; overflow: hidden; margin-top: 2rem; border: 1px solid var(--border-subtle); background: var(--card-bg); } .ps-3d-ratio { position: relative; width: 100%; } .ps-3d-ratio::before { content: ''; display: block; padding-top: 56.25%; } .ps-3d-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; } /* ============================================================ IFRAME EMBED ============================================================ */ .ps-iframe-wrap { position: relative; width: 100%; border-radius: 8px; overflow: hidden; margin-top: 2rem; border: 1px solid var(--border-subtle); background: var(--card-bg); } .ps-iframe-ratio { position: relative; width: 100%; } .ps-iframe-ratio::before { content: ''; display: block; padding-top: var(--iframe-ratio, 62.5%); } .ps-iframe-wrap iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: none; display: block; } /* ============================================================ LIGHTBOX ============================================================ */ .ps-lightbox { position: fixed; inset: 0; z-index: 9999; background: rgba(0,0,0,0.96); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; padding: 2rem; } .ps-lightbox.active { opacity: 1; pointer-events: all; } .ps-lightbox-inner { position: relative; max-width: 88vw; max-height: 88vh; width: 1000px; transform: scale(0.93); transition: transform 0.3s ease; } .ps-lightbox.active .ps-lightbox-inner { transform: scale(1); } .ps-lightbox-inner img { width: 100%; height: auto; max-height: 85vh; object-fit: contain; border-radius: 4px; display: block; } .ps-lightbox-close { position: absolute; top: -2.8rem; right: 0; background: none; border: none; color: rgba(255,255,255,0.45); font-size: 1.4rem; cursor: pointer; transition: color 0.2s; } .ps-lightbox-close:hover { color: white; } .ps-lightbox-caption { position: absolute; bottom: -2.2rem; left: 0; font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); } .ps-lightbox-prev, .ps-lightbox-next { position: absolute; top: 50%; transform: translateY(-50%); background: rgba(255,255,255,0.07); border: 1px solid rgba(255,255,255,0.12); color: white; width: 44px; height: 44px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: all 0.2s; font-size: 1.1rem; } .ps-lightbox-prev { left: -3.5rem; } .ps-lightbox-next { right: -3.5rem; } .ps-lightbox-prev:hover, .ps-lightbox-next:hover { background: var(--project-accent); color: var(--bg-dark); border-color: var(--project-accent); } /* ============================================================ VIDEO LIGHTBOX Separate from the image lightbox — video only plays inside here. Closing it pauses + resets the player so nothing leaks out. ============================================================ */ .ps-video-lightbox { position: fixed; inset: 0; z-index: 10000; background: rgba(0, 0, 0, 0.97); display: flex; align-items: center; justify-content: center; opacity: 0; pointer-events: none; transition: opacity 0.3s ease; padding: 2rem; } .ps-video-lightbox.active { opacity: 1; pointer-events: all; } .ps-video-lightbox-inner { position: relative; width: min(92vw, 1100px); transform: scale(0.94); transition: transform 0.3s ease; } .ps-video-lightbox.active .ps-video-lightbox-inner { transform: scale(1); } .ps-video-lightbox-inner video { display: block; width: 100%; height: auto; max-height: 85vh; border-radius: 6px; background: #000; outline: none; } .ps-video-lightbox-close { position: absolute; top: -2.8rem; right: 0; background: none; border: none; color: rgba(255, 255, 255, 0.45); font-size: 1.4rem; cursor: pointer; transition: color 0.2s; line-height: 1; padding: 0; } .ps-video-lightbox-close:hover { color: white; } /* ============================================================ PROJECT NAV ============================================================ */ .ps-project-nav { display: grid; grid-template-columns: 1fr 1fr; gap: 1px; background: var(--border-subtle); border-top: 1px solid var(--border-subtle); } .ps-nav-card { position: relative; overflow: hidden; text-decoration: none; color: var(--text-light); display: flex; flex-direction: column; justify-content: flex-end; padding: 2.5rem 2.8rem; min-height: 200px; background: var(--bg-dark); transition: background 0.35s ease; } .ps-nav-thumb { position: absolute; inset: 0; opacity: 0; transition: opacity 0.4s ease; } .ps-nav-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; } .ps-nav-card:hover .ps-nav-thumb { opacity: 0.22; } .ps-nav-card::after { content: ''; position: absolute; inset: 0; background: linear-gradient(to top, rgba(10,10,15,0.96) 0%, rgba(10,10,15,0.5) 60%, transparent 100%); pointer-events: none; } .ps-nav-content { position: relative; z-index: 2; } .ps-nav-dir { display: block; font-size: 0.66rem; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text-dim); margin-bottom: 0.45rem; } .ps-nav-title { display: block; font-family: 'Sugar Snow', cursive; font-size: 1.35rem; font-weight: normal; margin-bottom: 0.7rem; color: var(--text-light); transition: color 0.3s ease; } .ps-nav-arrow { display: inline-block; font-size: 1.1rem; color: var(--text-dim); transition: transform 0.3s ease, color 0.3s ease; } .ps-nav-card.ps-nav-next .ps-nav-content { text-align: right; } .ps-nav-card:hover .ps-nav-arrow { transform: translateX(6px); } .ps-nav-card.ps-nav-prev:hover .ps-nav-arrow { transform: translateX(-6px); } /* Next / prev: project accent */ .ps-nav-card:hover { background: color-mix(in srgb, var(--project-accent) 7%, var(--bg-dark)); } .ps-nav-card:hover .ps-nav-title, .ps-nav-card:hover .ps-nav-arrow { color: var(--project-accent); } /* Back to projects: --green */ .ps-nav-card.ps-nav-back:hover { background: color-mix(in srgb, var(--green, #24FF72) 7%, var(--bg-dark)); } .ps-nav-card.ps-nav-back:hover .ps-nav-title, .ps-nav-card.ps-nav-back:hover .ps-nav-arrow { color: var(--green, #24FF72); } @media (max-width: 640px) { .ps-project-nav { grid-template-columns: 1fr; } .ps-nav-card.ps-nav-next .ps-nav-content { text-align: left; } } /* ============================================================ SCROLL REVEAL + BLUR-IN ============================================================ */ .ps-reveal { opacity: 0; transform: translateY(28px); transition: opacity 0.75s ease, transform 0.75s ease; } .ps-reveal.visible { opacity: 1; transform: none; } .ps-blur-in { opacity: 0; filter: blur(10px); transform: translateY(20px); } .ps-blur-in.ps-blur-visible { opacity: 1; filter: blur(0); transform: translateY(0); } /* ============================================================ RESPONSIVE ============================================================ */ @media (max-width: 1024px) { .ps-container { padding: 0 40px; } .ps-hero-content { padding: 0 40px 4rem; } } @media (max-width: 768px) { .ps-hero-content { padding: 0 24px 3rem; } .ps-hero-meta { gap: 1.4rem; } .ps-container { padding: 0 24px; } .ps-section { padding: 3.5rem 0; } .ps-lightbox-prev { left: -2rem; } .ps-lightbox-next { right: -2rem; } .ps-nav-card { padding: 2rem 1.5rem; min-height: 160px; } .ps-ba-wrap { width: 100%; } } @media (max-width: 480px) { .ps-hero-title { font-size: 2.4rem; } .ps-meta-grid { grid-template-columns: 1fr 1fr; } .ps-container { padding: 0 18px; } .ps-hero-content { padding: 0 18px 2.5rem; } } /* ============================================================ SHARED UTILITY BLOCKS — used across project subpages ============================================================ */ /* Generic image with caption */ .ps-img { width: 100%; height: auto; display: block; border-radius: 8px; border: 1px solid var(--border-subtle); transition: transform 0.4s ease; cursor: zoom-in; } .ps-media-block { position: relative; } .ps-media-block:hover .ps-img { transform: scale(1.01); } .ps-caption { display: block; margin-top: 0.7rem; font-size: 0.78rem; color: var(--text-dim); font-family: 'Roboto', sans-serif; letter-spacing: 0.04em; } /* Subsection title (smaller than ps-section-title) */ .ps-subsection-title { font-family: 'Sugar Snow', cursive; font-size: 1.5rem; font-weight: normal; color: var(--text-light); margin: 2.5rem 0 0.8rem; } /* Two column image layout */ .ps-two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; margin-top: 2rem; } /* Callout / info card */ .ps-callout { background: var(--card-bg); border: 1px solid var(--border-subtle); border-radius: 12px; padding: 2rem 2.4rem; margin-top: 2.5rem; border-left: 3px solid var(--project-accent, var(--green)); } .ps-callout-title { font-family: 'Sugar Snow', cursive; font-size: 1.2rem; font-weight: normal; color: var(--text-light); margin-bottom: 1.4rem; } .ps-callout-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.2rem; } .ps-callout-item { display: flex; flex-direction: column; gap: 0.3rem; } .ps-callout-label { font-size: 0.65rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--project-accent, var(--green)); font-family: 'Roboto', sans-serif; } .ps-callout-value { font-size: 0.88rem; color: var(--text-gray); line-height: 1.6; } /* Before / after comparison row */ .ps-compare-row { display: grid; grid-template-columns: 1fr 40px 1fr; align-items: center; gap: 1.5rem; margin-top: 2rem; } .ps-compare-block { display: flex; flex-direction: column; gap: 0.5rem; } .ps-compare-label { display: inline-block; font-size: 0.6rem; letter-spacing: 0.16em; text-transform: uppercase; font-family: 'Roboto', sans-serif; padding: 0.2rem 0.7rem; border-radius: 2px; margin-bottom: 0.4rem; width: fit-content; } .ps-compare-label.before { background: rgba(255,255,255,0.07); color: var(--text-dim); } .ps-compare-label.after { background: color-mix(in srgb, var(--project-accent, var(--green)) 15%, transparent); color: var(--project-accent, var(--green)); } .ps-compare-divider { display: flex; align-items: center; justify-content: center; color: var(--text-dim); } .ps-compare-img { max-height: 340px; object-fit: contain; background: #111; } /* Gallery placeholder grid */ .ps-gallery-grid { display: grid; gap: 1rem; margin-top: 1.5rem; } .ps-gallery-grid.ps-gallery-3 { grid-template-columns: repeat(3, 1fr); } .ps-gallery-grid.ps-gallery-4 { grid-template-columns: repeat(4, 1fr); } .ps-gallery-placeholder { aspect-ratio: 1 / 1; background: var(--card-bg); border: 1px dashed rgba(255,255,255,0.1); border-radius: 8px; display: flex; align-items: center; justify-content: center; } .ps-gallery-placeholder span { font-size: 0.68rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text-dim); font-family: 'Roboto', sans-serif; } /* Lightbox trigger cursor */ .ps-lightbox-trigger { cursor: zoom-in; } /* Responsive */ @media (max-width: 768px) { .ps-two-col { grid-template-columns: 1fr; } .ps-callout-grid { grid-template-columns: 1fr; } .ps-compare-row { grid-template-columns: 1fr; } .ps-compare-divider { transform: rotate(90deg); } .ps-gallery-grid.ps-gallery-4 { grid-template-columns: repeat(2, 1fr); } .ps-gallery-grid.ps-gallery-3 { grid-template-columns: repeat(2, 1fr); } } @media (max-width: 480px) { .ps-gallery-grid.ps-gallery-3, .ps-gallery-grid.ps-gallery-4 { grid-template-columns: 1fr 1fr; } .ps-callout { padding: 1.4rem 1.4rem; } }