/* ============================================================ © 2026 WIN TUN NAING — All Rights Reserved Website : wintunnaing.com Contact : win.tun.naing@outlook.com Designed & developed by Madderquill This XML template is the exclusive intellectual property of Win Tun Naing. Unauthorized copying, modification, distribution or use of this file, in whole or in part, is strictly prohibited without prior written permission from the author. Protected by copyright law. All design, code and content within this file belong to Win Tun Naing. ============================================================ */ /* wintunnaing.com — Portable site v1.0 · styles = Blogger theme , design unchanged. Changes from the theme: (1) Jost is self-hosted (/assets/fonts, SIL Open Font License) instead of Google Fonts; (2) 'Jost Fallback' (Arial, size-adjusted to Jost's metrics) is added after 'Jost' in every font stack so the font swap does not move the layout; (3) two rules at the end for

. */ @font-face{font-family:'Jost';font-style:normal;font-weight:400;font-display:swap;src:url(/assets/fonts/jost-latin-400-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Jost';font-style:normal;font-weight:500;font-display:swap;src:url(/assets/fonts/jost-latin-500-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:'Jost';font-style:normal;font-weight:600;font-display:swap;src:url(/assets/fonts/jost-latin-600-normal.woff2) format('woff2');unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} /* size-adjust measured on the site's own text, Jost vs Arial; overrides = Jost ascent 1.070 / descent 0.375 ÷ size-adjust */ @font-face{font-family:'Jost Fallback';font-weight:400;src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:95.62%;ascent-override:111.90%;descent-override:39.22%;line-gap-override:0%} @font-face{font-family:'Jost Fallback';font-weight:500;src:local('Arial'),local('Helvetica'),local('Liberation Sans');size-adjust:99.59%;ascent-override:107.44%;descent-override:37.65%;line-gap-override:0%} /* ============================================================ WINTUNNAING.COM — PHOTOGRAPHY PORTFOLIO Pure Black & White — no accent color (CONFIRMED) Font: Jost 400 + 500 only (CONFIRMED) ============================================================ */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } :root { --bg: #000000; /* Black background — CONFIRMED */ --text: #ffffff; /* White text — CONFIRMED */ --muted: #777777; /* Muted gray for inactive states (no color accent) */ --footer-h: 80px; --frame: 48px; /* NEGATIVE SPACE — equal margin on all 4 sides of the photo (top, left, right, and the gap above the footer line). Adjust this ONE value to tune the whole frame. */ } html, body { margin: 0; padding: 0; height: 100vh; height: 100dvh; /* iOS fix: dynamic viewport height — keeps the bottom frame gap visible above the mobile browser bar */ width: 100vw; font-family: 'Jost', 'Jost Fallback', sans-serif; background: var(--bg); color: var(--text); overflow: hidden; position: fixed; } /* Global Interaction Principle — scrollbar hidden sitewide */ * { scrollbar-width: none; -ms-overflow-style: none; } *::-webkit-scrollbar { display: none; } .hidden-section { display: none; } /* ============================================================ HOME PAGE — framed hero slideshow (matches current live site) Photo sits inside a black frame with EQUAL negative space on all 4 sides: top / left / right = var(--frame), and the gap between the photo and the footer line = var(--frame) too. No header bar. Autoplay only — no arrows, no dots (CONFIRMED) ============================================================ */ .main-content { display: none; } .main-content.active { display: block; } #home-page { position: absolute; top: var(--frame); left: var(--frame); right: var(--frame); bottom: calc(var(--footer-h) + var(--frame)); z-index: 1; background: var(--bg); overflow: hidden; } #hero-slider { position: relative; width: 100%; height: 100%; } /* ============================================================ INTERIOR PAGES — sitewide rule (CONFIRMED 17 Jul 2026): every page sits inside the same frame with EQUAL negative space on all 4 sides (var(--frame)), footer fixed below. Content scrolls inside the frame; scrollbar hidden. ============================================================ */ .page-frame { position: absolute; top: var(--frame); left: var(--frame); right: var(--frame); bottom: calc(var(--footer-h) + var(--frame)); z-index: 1; background: var(--bg); overflow-y: auto; overflow-x: hidden; } /* ============================================================ ABOUT ME PAGE — centered layout (CONFIRMED) Circular frame top (photo vs logo PENDING — placeholder logo mark used) → ABOUT ME label → name → justified bio → SEE MY WORK CTA (activates when Main Gallery ships) ============================================================ */ .about-wrap { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 30px 20px; } .about-circle { width: 120px; height: 120px; border-radius: 50%; display: flex; align-items: center; justify-content: center; margin-bottom: 26px; } .about-circle svg, .about-circle img { width: 100%; height: 100%; display: block; } .about-label { font-family: 'Jost', 'Jost Fallback', sans-serif; font-weight: 400; font-size: 12px; letter-spacing: 4px; text-transform: uppercase; color: var(--muted); margin-bottom: 10px; } .about-name { font-family: 'Jost', 'Jost Fallback', sans-serif; font-weight: 500; font-size: 24px; letter-spacing: 4px; text-transform: uppercase; color: var(--text); margin-bottom: 30px; } .about-bio { max-width: 880px; /* matches the Contact form edges (CONFIRMED 18 Jul) — overrides the earlier 480-600px rule */ width: 100%; margin: 0 auto 38px; } .about-bio p { font-family: 'Jost', 'Jost Fallback', sans-serif; font-weight: 400; font-size: 16px; /* desktop reading standard */ line-height: 1.9; color: #d6d6d6; text-align: justify; /* justified — straight left AND right edges (CONFIRMED) */ margin-bottom: 16px; } .about-bio p:last-child { margin-bottom: 0; } .about-bio .mm-name { color: var(--muted); font-size: 15px; } .about-bio h3 { font-family: 'Jost', 'Jost Fallback', sans-serif; font-weight: 500; font-size: 16px; letter-spacing: 2px; text-transform: uppercase; color: var(--text); text-align: left; border-bottom: 1px solid #3c3c3c; padding-bottom: 8px; margin: 34px 0 14px; } .about-bio h3.bio-mm { font-family: 'Jost', 'Jost Fallback', 'Myanmar Text', 'Noto Sans Myanmar', sans-serif; font-size: 15px; /* matches the Terms Myanmar headers */ letter-spacing: 1px; text-transform: none; border-bottom: none; margin: 20px 0 10px; } .about-bio a { color: #ffffff; font-weight: 600; text-decoration: none; /* sitewide link rule */ transition: opacity 0.2s ease; } .about-bio a:hover, .about-bio a:active { opacity: 0.55; } .about-bio a .arr { font-weight: 400; } .about-bio p.bio-mm { font-family: 'Jost', 'Jost Fallback', 'Myanmar Text', 'Noto Sans Myanmar', sans-serif; line-height: 2.1; /* Myanmar script needs taller lines */ } /* CTA — CAPS per Selective Caps rule; pure B&W states only */ .cta-btn { display: inline-block; font-family: 'Jost', 'Jost Fallback', sans-serif; font-weight: 400; font-size: 14px; letter-spacing: 3px; text-transform: uppercase; color: var(--text); border: 1px solid #ffffff; border-radius: 10px; /* sitewide 10px fillet rule */ padding: 13px 34px; text-decoration: none; cursor: pointer; transition: background 0.25s ease, color 0.25s ease; -webkit-tap-highlight-color: transparent; } .cta-btn:hover, .cta-btn:active { background: #ffffff; color: #000000; } /* Madderquill credit — sits under the About page CTA. No border, #bdbdbd on black (~11:1 contrast) so it reads clearly but stays quieter than the button above it. */ .mq-credit { margin-top: 26px; font-family: 'Jost', 'Jost Fallback', sans-serif; font-weight: 400; font-size: 11px; letter-spacing: 1.5px; color: #bdbdbd; } /* ============================================================ MAIN GALLERY PAGE — OPTION 2 (LIVE, per 20 Jul revision) 3 swipeable groups (Series/Single/Smart), each own URL. Structure: Screen 1 = HEAD ZONE (no autoplay slider anymore — 5 curated tiles per group doing that group's signature motion, auto-cycled with stagger, pauses on user interaction). Screen 2 (scroll down) = plain 15-tile grid, NO effect — simple, fast, complete category list. Switcher = tiny text-only links (visible-UI exception, like Awards toggle). ============================================================ */ .mg-wrap { min-height:100%; display: flex; flex-direction: column; align-items: center; padding: 40px 0; } .mg-inner { width: 100%; } .mg-head { display:flex; align-items:center; justify-content:center; margin-bottom: 18px; } .mg-switch { display:flex; gap:28px; } .mg-sw { font-family:'Jost','Jost Fallback',sans-serif; font-weight:600; font-size:13px; letter-spacing:2px; text-transform:uppercase; text-decoration:none; color:var(--muted); cursor:pointer; transition:color .2s ease; } .mg-sw.on { color:#fff; } .mg-sw:hover { color:#fff; } /* ---- HEAD ZONE v2: ONE pile per group (5 stacked cards), ported directly from the client's original wintunnaing.net reference (rotation-based Arc Fan / Slide Reveal / Scatter), extrapolated from 3 cards to 5 — endpoints match the reference exactly, middle cards interpolated. Auto-plays (opens/closes on a timer) AND responds to real hover/tap, which takes over and pauses the auto-cycle (confirmed: Both). ---- */ .mg-headzone { position:relative; width:100%; height:92vh; min-height:560px; margin-bottom:26px; display:flex; align-items:center; justify-content:center; padding-bottom:9vh; /* fix: shifts the flex-centered pile UP a bit so the open spread (which reaches further down than up) clears the grid section below — confirmed for all 3 groups */ overflow:hidden; } /* Ghost background typography — FIXED: now clipped exactly at the frame edges (same edges as the footer line) so long words like "SMARTPHONE" can never bleed past the frame margins, and sized down to a safe scale (confirmed fix). */ /* Dot grid — ONE simple linear gradient (top sparse/invisible → bottom dense/visible), per client's reference image. Built as a single repeating dot pattern + CSS mask-image gradient so the fade is a true continuous function (no banding/grouped rows — confirmed fix). Muted grey, not pure white. Contained exactly within the frame margins (no visible border — confirmed: "boundary means no need the line"). */ .hz-dots { position:absolute; left:0; right:0; top:0; bottom:0; z-index:0; background-image: radial-gradient(circle, rgba(150,150,150,0.85) 1.6px, transparent 1.6px); background-size: 15px 15px; background-position: 0 0; -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 100%); mask-image: linear-gradient(to bottom, transparent 0%, #000 100%); pointer-events:none; } /* Ghost text and title header REMOVED (confirmed: client does not want a vertical text replacement either — the head zone above the pile is intentionally left blank). */ .mg-pile { position:relative; z-index:1; width:320px; height:414px; } .pc { position:absolute; left:0; width:100%; height:100%; cursor:pointer; overflow:hidden; border-radius:2px; transition: transform .5s cubic-bezier(.22,.61,.36,1), box-shadow .5s ease; } .pc img { width:100%; height:100%; object-fit:cover; display:block; opacity:.85; transition:opacity .2s ease; } .pc:hover img { opacity:1; } /* rest: fanned stack, 7 cards, per client reference's rest-state steps (client-confirmed 5→7 card count) */ .pc[data-i='0'] { top:80px; transform:rotate(-9deg); z-index:1; } .pc[data-i='1'] { top:68px; transform:rotate(-6deg); z-index:2; } .pc[data-i='2'] { top:57px; transform:rotate(-3deg); z-index:3; } .pc[data-i='3'] { top:46px; transform:rotate(0deg); z-index:4; } .pc[data-i='4'] { top:34px; transform:rotate(3deg); z-index:5; } .pc[data-i='5'] { top:23px; transform:rotate(6deg); z-index:6; } .pc[data-i='6'] { top:11px; transform:rotate(9deg); z-index:7; } /* SERIES — Sine Wave, NORMALIZED overlap (fix, confirmed): client caught inconsistent overlap between the 3 effects — Sine's smaller vertical range made adjacent cards sit further apart (less overlap) than Diagonal/Staircase's larger vertical range (more overlap). All 3 are now scaled so every adjacent pair sits the same 2D distance apart (~45-50% overlap target), same motion SHAPE as the exact reference, just rebalanced. */ .mg-pile.eff-ring.open .pc[data-i='0'], .mg-pile.eff-ring:hover .pc[data-i='0'] { transform: translate(-32vw, 7vh) rotate(-14deg); box-shadow:0 10px 22px rgba(0,0,0,.4); } .mg-pile.eff-ring.open .pc[data-i='1'], .mg-pile.eff-ring:hover .pc[data-i='1'] { transform: translate(-21vw, -5vh) rotate(-8deg); box-shadow:0 10px 22px rgba(0,0,0,.4); } .mg-pile.eff-ring.open .pc[data-i='2'], .mg-pile.eff-ring:hover .pc[data-i='2'] { transform: translate(-11vw, 5vh) rotate(-3deg); box-shadow:0 10px 22px rgba(0,0,0,.4); } .mg-pile.eff-ring.open .pc[data-i='3'], .mg-pile.eff-ring:hover .pc[data-i='3'] { transform: translate(0vw, -7vh) rotate(0deg); box-shadow:0 10px 22px rgba(0,0,0,.4); } .mg-pile.eff-ring.open .pc[data-i='4'], .mg-pile.eff-ring:hover .pc[data-i='4'] { transform: translate(11vw, 5vh) rotate(3deg); box-shadow:0 10px 22px rgba(0,0,0,.4); } .mg-pile.eff-ring.open .pc[data-i='5'], .mg-pile.eff-ring:hover .pc[data-i='5'] { transform: translate(21vw, -5vh) rotate(8deg); box-shadow:0 10px 22px rgba(0,0,0,.4); } .mg-pile.eff-ring.open .pc[data-i='6'], .mg-pile.eff-ring:hover .pc[data-i='6'] { transform: translate(32vw, 7vh) rotate(14deg); box-shadow:0 10px 22px rgba(0,0,0,.4); } /* SINGLE — Straight Diagonal, normalized overlap (see above). */ .mg-pile.eff-throw.open .pc[data-i='0'], .mg-pile.eff-throw:hover .pc[data-i='0'] { transform: translate(37vw, 17vh) rotate(12deg); box-shadow:0 10px 22px rgba(0,0,0,.4); } .mg-pile.eff-throw.open .pc[data-i='1'], .mg-pile.eff-throw:hover .pc[data-i='1'] { transform: translate(25vw, 11vh) rotate(8deg); box-shadow:0 10px 22px rgba(0,0,0,.4); } .mg-pile.eff-throw.open .pc[data-i='2'], .mg-pile.eff-throw:hover .pc[data-i='2'] { transform: translate(12vw, 6vh) rotate(4deg); box-shadow:0 10px 22px rgba(0,0,0,.4); } .mg-pile.eff-throw.open .pc[data-i='3'], .mg-pile.eff-throw:hover .pc[data-i='3'] { transform: translate(0vw, 0vh) rotate(0deg); box-shadow:0 10px 22px rgba(0,0,0,.4); } .mg-pile.eff-throw.open .pc[data-i='4'], .mg-pile.eff-throw:hover .pc[data-i='4'] { transform: translate(-12vw, -6vh) rotate(-4deg); box-shadow:0 10px 22px rgba(0,0,0,.4); } .mg-pile.eff-throw.open .pc[data-i='5'], .mg-pile.eff-throw:hover .pc[data-i='5'] { transform: translate(-25vw, -11vh) rotate(-8deg); box-shadow:0 10px 22px rgba(0,0,0,.4); } .mg-pile.eff-throw.open .pc[data-i='6'], .mg-pile.eff-throw:hover .pc[data-i='6'] { transform: translate(-37vw, -17vh) rotate(-12deg); box-shadow:0 10px 22px rgba(0,0,0,.4); } /* SMARTPHONE — Staircase, normalized overlap (see above). */ .mg-pile.eff-fan.open .pc[data-i='0'], .mg-pile.eff-fan:hover .pc[data-i='0'] { transform: translate(-37vw, 17vh) rotate(-14deg); box-shadow:0 10px 22px rgba(0,0,0,.4); } .mg-pile.eff-fan.open .pc[data-i='1'], .mg-pile.eff-fan:hover .pc[data-i='1'] { transform: translate(-25vw, 11vh) rotate(-9deg); box-shadow:0 10px 22px rgba(0,0,0,.4); } .mg-pile.eff-fan.open .pc[data-i='2'], .mg-pile.eff-fan:hover .pc[data-i='2'] { transform: translate(-12vw, 6vh) rotate(-4deg); box-shadow:0 10px 22px rgba(0,0,0,.4); } .mg-pile.eff-fan.open .pc[data-i='3'], .mg-pile.eff-fan:hover .pc[data-i='3'] { transform: translate(0vw, 0vh) rotate(0deg); box-shadow:0 10px 22px rgba(0,0,0,.4); } .mg-pile.eff-fan.open .pc[data-i='4'], .mg-pile.eff-fan:hover .pc[data-i='4'] { transform: translate(12vw, -6vh) rotate(4deg); box-shadow:0 10px 22px rgba(0,0,0,.4); } .mg-pile.eff-fan.open .pc[data-i='5'], .mg-pile.eff-fan:hover .pc[data-i='5'] { transform: translate(25vw, -11vh) rotate(9deg); box-shadow:0 10px 22px rgba(0,0,0,.4); } .mg-pile.eff-fan.open .pc[data-i='6'], .mg-pile.eff-fan:hover .pc[data-i='6'] { transform: translate(37vw, -17vh) rotate(14deg); box-shadow:0 10px 22px rgba(0,0,0,.4); } .hz-cap { position:absolute; left:8px; bottom:6px; right:8px; z-index:20; font-family:'Jost','Jost Fallback',sans-serif; font-weight:500; font-size:11px; letter-spacing:1px; color:#fff; text-transform:uppercase; text-shadow:0 1px 8px rgba(0,0,0,.9); opacity:0; transition:opacity .3s ease; pointer-events:none; } .mg-pile.open .pc .hz-cap, .mg-pile:hover .pc .hz-cap { opacity:1; } /* ---- GRID: plain, no effect (confirmed) — simple hover only, matches the rest of the site's quiet thumbnail convention ---- */ .mg-grid { display:grid; grid-template-columns:repeat(3,1fr); grid-template-rows:repeat(5,1fr); gap:4px; width:100%; aspect-ratio:3/5; } .mg-tile { position:relative; overflow:hidden; cursor:pointer; } .mg-card { position:absolute; inset:0; overflow:hidden; } .mg-card img { width:100%; height:100%; object-fit:cover; display:block; opacity:.88; transition:opacity .2s ease; } .mg-card.back { display:none; } /* stacked-card look retired with the effect — flat plain tile now */ .mg-tile:hover .mg-card.front img { opacity:1; } .mg-scrim { position:absolute; inset:0; z-index:3; display:flex; align-items:center; justify-content:center; background: rgba(0,0,0,0.45); opacity:0; transition:opacity .25s ease; font-family:'Jost','Jost Fallback',sans-serif; font-weight:500; font-size:13px; letter-spacing:2px; color:#fff; text-align:center; text-transform:uppercase; } .mg-tile:hover .mg-scrim { opacity:1; } /* ============================================================ ◆◆ OPTION 1 — SAVED FOR FUTURE USE, NOT ACTIVE ◆◆ This is the earlier "hero autoplay slider + Spotlight Breakout grid effect" version, kept here on request (client: "I also want to keep option 1 because I will use on feature"). It is pure CSS text inside this comment — it does nothing while commented out. Also includes the clarity fix that was agreed but never shipped (dim 0.32→0.12, blur, dark scrim, shadow). TO REACTIVATE LATER: give these rules back their real class names (remove this comment wrapper), restore the .mg-hero markup in the page HTML, and swap the Head Zone/plain-grid markup back to the tile structure with .mg-card.back present. Ask and a full swap can be done in one pass. .mg-hero { position:relative; width:100%; padding-top:44%; overflow:hidden; margin-bottom: 22px; } .mg-hero img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; opacity:0; transition:opacity 1.2s ease; } .mg-hero img.on { opacity:1; } .mg-tile-LEGACY { position:relative; overflow:visible; cursor:pointer; transition: transform .32s ease, opacity .25s ease; transform-origin: center center; z-index:1; } .mg-tile-LEGACY:hover, .mg-tile-LEGACY.pop { transform: scale(1.85); z-index:50; box-shadow: 0 20px 60px rgba(0,0,0,0.85); /* clarity fix: edge separation */ } .mg-grid-LEGACY::before { /* clarity fix: dark scrim behind the popped tile */ content:''; position:absolute; inset:0; z-index:40; background:rgba(0,0,0,0.6); opacity:0; transition:opacity .25s ease; pointer-events:none; } .mg-grid-LEGACY.dimming::before { opacity:1; } .mg-grid-LEGACY:hover .mg-tile-LEGACY:not(:hover), .mg-grid-LEGACY.dimming .mg-tile-LEGACY:not(.pop) { opacity:.12; /* clarity fix: was .32, now much dimmer */ filter: blur(3px); /* clarity fix: blur separates background clearly */ } .mg-card-LEGACY { position:absolute; inset:0; overflow:hidden; transition: transform .32s ease; } .mg-card-LEGACY img { width:100%; height:100%; object-fit:cover; display:block; } .mg-card-LEGACY.back { transform: translate(6px,6px); z-index:1; filter:brightness(0.65); } .mg-card-LEGACY.front { z-index:2; } .mg-tile-LEGACY.eff-fan:hover .mg-card-LEGACY.front, .mg-tile-LEGACY.eff-fan.pop .mg-card-LEGACY.front { transform: translate(-16px,-11px); } .mg-tile-LEGACY.eff-slide:hover .mg-card-LEGACY.front, .mg-tile-LEGACY.eff-slide.pop .mg-card-LEGACY.front { transform: translate(0,18px); } .mg-tile-LEGACY.eff-scatter:hover .mg-card-LEGACY.front, .mg-tile-LEGACY.eff-scatter.pop .mg-card-LEGACY.front { transform: translate(18px,-13px); } ◆◆ END OPTION 1 (saved, inactive) ◆◆ ============================================================ */ /* ============================================================ SUB-GALLERY PAGE (per Sub-Gallery Design Notes 05, CONFIRMED) One permanent URL per category. Dynamic Mosaic: every 5th photo is large, continuous vertical scroll, no pagination. Flow/Thumbs toggle (visible-UI exception). Reused template for all 45 categories — only content differs. ============================================================ */ .sg-wrap { min-height:100%; display:flex; flex-direction:column; align-items:center; padding:40px 0; } .sg-inner { width:100%; } /* Sub-Gallery Flow view dot grid — same dot motif as Main Gallery's Head Zone (site-wide visual consistency), but UNIFORM (no top-to-bottom gradient fade) since this is a long scrolling list, not a single screen. Darker/more muted than Main Gallery's, and no mask — deliberately different from the plain-black Awards Flow background (confirmed). */ .sg-wrap.flow-view .sg-flow { position:relative; background-image: radial-gradient(circle, rgba(110,110,110,0.55) 1.4px, transparent 1.4px); background-size: 15px 15px; background-position: 0 0; } .sg-head { display:flex; align-items:center; justify-content:space-between; margin-bottom:22px; } .sg-title { font-family:'Jost','Jost Fallback',sans-serif; font-weight:500; font-size:24px; letter-spacing:4px; color:var(--text); text-transform:uppercase; } .sg-toggle { display:flex; gap:16px; } .sg-tgl { font-family:'Jost','Jost Fallback',sans-serif; font-weight:400; font-size:13px; letter-spacing:1px; color:var(--muted); cursor:pointer; } .sg-tgl.on { color:#fff; } .sg-mosaic { display:grid; grid-template-columns:repeat(4,1fr); grid-auto-rows:180px; grid-auto-flow:dense; gap:4px; } .sg-cell { position:relative; overflow:hidden; cursor:pointer; } .sg-cell.big { grid-column:span 2; grid-row:span 2; } /* every 5th photo (confirmed ratio) */ .sg-cell img { width:100%; height:100%; object-fit:cover; display:block; opacity:.85; transition:opacity .25s ease; background:#151515; color:transparent; } .sg-cell:hover img { opacity:1; } /* Placeholder cell for categories with fewer than 5 real photos (confirmed): completes the first 5-cell mosaic unit with a blank, subtle dark-grey cell — no "Coming Soon" text, no photo, not clickable, so it reads as "more to come" without competing with the real photos. */ .sg-cell.placeholder { background-color:#111; background-image:radial-gradient(circle, rgba(70,70,70,0.35) 1.4px, transparent 1.4px); background-size:15px 15px; cursor:default; } /* empty frame: dark frame + dark dots (CONFIRMED 24 Oct, option B) */ .sg-cap { position:absolute; left:12px; bottom:10px; right:12px; /* fixed rule-of-thirds lower-left */ font-family:'Jost','Jost Fallback',sans-serif; font-weight:500; color:#fff; text-shadow:0 1px 8px rgba(0,0,0,.9); pointer-events:none; } .sg-cell.big .sg-cap { font-size:15px; } .sg-cell:not(.big) .sg-cap { font-size:11px; } /* Sub-gallery Flow view */ .sg-wrap.flow-view .sg-mosaic { display:none; } .sg-wrap .sg-flow { display:none; } .sg-wrap.flow-view .sg-flow { display:block; } .sg-flow-item { margin-bottom: 40px; position:relative; } /* 40px = sitewide Flow gap standard (CONFIRMED 24 Oct 2026) */ .sg-flow-item img { height:auto; display:block; transition: margin .3s ease; background:#151515; color:transparent; } /* 3-Position Cycle (client-confirmed, Gallery-only — Awards Flow's zigzag stays completely separate/untouched): photo 1 sits left, photo 2 center, photo 3 right, then repeats. */ .sg-flow-item.sg-fl-l img { width:62%; margin-left:0; margin-right:auto; } .sg-flow-item.sg-fl-r img { width:62%; margin-left:auto; margin-right:0; } .sg-flow-item.sg-fl-c img { width:72%; margin-left:auto; margin-right:auto; } /* Portrait covers (class from the build): never taller than the screen, same rule as Project Flow (CONFIRMED 24 Oct). The item shrinks to the photo so the caption stays centred on it. */ .sg-flow-item.sg-port { width:fit-content; max-width:62%; } .sg-flow-item.sg-port.sg-fl-l { margin-right:auto; } .sg-flow-item.sg-port.sg-fl-r { margin-left:auto; } .sg-flow-item.sg-port.sg-fl-c { max-width:72%; margin-left:auto; margin-right:auto; } .sg-flow-item.sg-port img { width:auto; max-width:100%; max-height:88vh; margin:0; } .sg-flow .sg-flow-item.sg-port .sg-flow-cap { left:0; right:0; } .sg-flow-cap { position:absolute; bottom:33%; /* hybrid: centered horiz, lower-third vert */ text-align:center; font-family:'Jost','Jost Fallback',sans-serif; font-weight:500; font-size:16px; color:#fff; text-shadow:0 1px 10px rgba(0,0,0,.9); letter-spacing:1px; text-transform:uppercase; } .sg-flow-item.sg-fl-l .sg-flow-cap { left:0; right:38%; } .sg-flow-item.sg-fl-r .sg-flow-cap { left:38%; right:0; } .sg-flow-item.sg-fl-c .sg-flow-cap { left:14%; right:14%; } /* Flow view blank placeholder (confirmed): same idea as the Thumbs placeholder — a blank dark cell, no text, for categories with very few real photos. */ .sg-flow-item.placeholder { background-color:#111; background-image:radial-gradient(circle, rgba(70,70,70,0.35) 1.4px, transparent 1.4px); background-size:15px 15px; aspect-ratio:3/2; height:auto; } /* same size as the real photos (JS sets the real ratio) — CONFIRMED 24 Oct, option A */ .sg-flow-item.placeholder.sg-fl-l { width:62%; } .sg-flow-item.placeholder.sg-fl-r { width:62%; margin-left:auto; } .sg-flow-item.placeholder.sg-fl-c { width:72%; margin-left:auto; margin-right:auto; } /* ============================================================ PROJECT PAGE (per Project Page Design Notes 02, CONFIRMED) Hero (left) + up to 9-photo grid (right), toggle above title, centered title/social/description block, full-bleed lightbox. ============================================================ */ .pj-wrap { min-height:100%; display:flex; flex-direction:column; align-items:center; padding:40px 0; } .pj-inner { width:100%; } .pj-toggle-row { display:flex; justify-content:center; gap:18px; margin-bottom:20px; } .pj-tgl { font-family:'Jost','Jost Fallback',sans-serif; font-weight:400; font-size:13px; letter-spacing:2px; color:var(--muted); cursor:pointer; } .pj-tgl.on { color:#fff; } .pj-layout { display:flex; gap:4px; align-items:start; } .pj-hero { flex:0 0 48.5%; position:relative; cursor:pointer; overflow:hidden; aspect-ratio:1.318; } .pj-hero img { width:100%; height:100%; object-fit:cover; display:block; } .pj-grid { flex:1; display:grid; grid-template-columns:repeat(3,1fr); grid-auto-rows:min-content; align-content:start; gap:4px; } /* fix (confirmed): Grid's own 3-row aspect-ratio content defines the natural total height of .pj-layout — Hero then STRETCHES (align-items:stretch, no aspect-ratio of its own) to match that exact height, so both columns' bottoms align perfectly, same as the client's reference screenshot. */ .pj-grid .pj-cell { position:relative; cursor:pointer; overflow:hidden; aspect-ratio:7/5; } .pj-grid .pj-cell img { width:100%; height:100%; object-fit:cover; display:block; opacity:.88; transition:opacity .2s ease; } .pj-grid .pj-cell:hover img { opacity:1; } /* Empty frames in Thumbs (CONFIRMED 24 Oct): 2-9 photos -> fill the 3x3 grid with dot frames; 1 photo -> one big dot frame beside it. Not clickable, not part of the lightbox. */ .pj-ph { aspect-ratio:7/5; background-color:#111; background-image:radial-gradient(circle, rgba(70,70,70,0.35) 1.4px, transparent 1.4px); background-size:15px 15px; cursor:default; } .pj-grid.pj-g1 { display:block; align-self:stretch; } .pj-grid.pj-g1 .pj-ph-big { aspect-ratio:auto; height:100%; } /* Info block — matches the client's live reference (Red Chillies project page): title + social icons sit INLINE on one row, description is a wider justified/centered paragraph below, not a narrow 640px column. */ .pj-info { text-align:center; margin-top:34px; max-width:1000px; margin-left:auto; margin-right:auto; } .pj-title-row { display:flex; align-items:center; justify-content:center; gap:14px; margin-bottom:18px; } .pj-title { font-family:'Jost','Jost Fallback',sans-serif; font-weight:500; font-size:20px; letter-spacing:3px; text-transform:uppercase; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width:60%; /* fix (confirmed): long titles truncate, full name stays in the image alt tag */ } .pj-social { display:flex; justify-content:center; gap:14px; } .pj-social a { width:30px; height:30px; border-radius:50%; border:1px solid rgba(255,255,255,0.85); display:flex; align-items:center; justify-content:center; opacity:0.7; transition:opacity 0.25s ease, filter 0.25s ease; -webkit-tap-highlight-color:transparent; } .pj-social a:hover { opacity:1; } .pj-social svg { width:14px; height:14px; fill:#fff; } /* Share icons in Flow row 1 (Batch 1c) — left-aligned like the title */ .pjr-sp .pj-social { justify-content:flex-start; margin:0 0 16px; } .pj-desc { font-family:'Jost','Jost Fallback',sans-serif; font-weight:400; font-size:14px; line-height:1.8; color:#c9c9c9; } .pj-readmore { margin-top:10px; } /* Project Flow view — "MIX" (CONFIRMED 24 Oct 2026, replaces the Masonry Overlap, which covered part of the real photos). Each row: photo 64% touching the FRAME edge (never past the green frame line — sitewide rule), alternating left/right; the free 36% holds text. Row 1 = title, description, Read More, VIEW I / N. Other rows = faint big Roman numeral + small VIEW label, on the photo's bottom line. 40px between rows. No crop, no overlap. Scoped per .pj-wrap (the JS toggles flow-view). */ .pj-wrap.flow-view .pj-layout { display:none; } .pj-wrap .pj-flow { display:none; } .pj-wrap.flow-view .pj-flow { display:block; position:relative; width:100%; padding:40px 0; } .pj-wrap.flow-view .pj-flow::before { content:''; position:absolute; inset:0; z-index:0; background-image: radial-gradient(circle, rgba(70,70,70,0.35) 1.4px, transparent 1.4px); background-size: 15px 15px; pointer-events:none; } .pj-wrap.flow-view .pj-info { display:none; } /* its content is shown in row 1 */ .pjr { position:relative; z-index:1; display:flex; align-items:flex-end; margin-bottom:40px; } .pjr:last-child { margin-bottom:0; } .pjr.R { flex-direction:row-reverse; } .pjr.first { align-items:flex-start; } .pjr .pj-flow-item { flex:none; width:64%; display:flex; } .pjr.R .pj-flow-item { justify-content:flex-end; } .pjr .pj-flow-item img { display:block; max-width:100%; max-height:88vh; width:auto; height:auto; cursor:pointer; background:#151515; } .pjr-sp { flex:1; min-width:0; padding:0 48px; box-sizing:border-box; } .pjr.R .pjr-sp { text-align:right; } .pjr-title { font-family:'Jost','Jost Fallback',sans-serif; font-weight:500; font-size:20px; letter-spacing:3px; text-transform:uppercase; color:#fff; line-height:1.5; margin-bottom:14px; } .pjr-desc, .pjr-sp .pj-full { font-family:'Jost','Jost Fallback',sans-serif; font-weight:400; font-size:14px; line-height:1.8; color:#c9c9c9; } .pjr-count { font-family:'Jost','Jost Fallback',sans-serif; font-weight:400; font-size:11px; letter-spacing:2px; color:#777; margin-top:28px; } .pjr-num { font-family:'Jost','Jost Fallback',sans-serif; font-weight:500; font-size:110px; line-height:.85; letter-spacing:4px; color:#fff; opacity:0; transform:translateY(16px); transition:opacity .9s ease, transform .9s ease; } .pjr.in .pjr-num { opacity:.09; transform:none; } .pjr-lb { font-family:'Jost','Jost Fallback',sans-serif; font-weight:400; font-size:11px; letter-spacing:2px; color:#777; margin-top:12px; } @media (prefers-reduced-motion: reduce) { .pjr-num { transition:none; } } /* Read More (CONFIRMED 24 Oct): tap toggles the full text in place */ .pj-full { display:none; } .rm-open .pj-full { display:block; } .rm-open .pj-desc, .rm-open .pjr-desc { display:none; } /* Project lightbox: full-bleed, NO arrows/close/counter (confirmed) — swipe/tap only */ #pj-lightbox { position:fixed; inset:0; z-index:2700; background:#000; display:none; flex-direction:column; align-items:center; justify-content:center; gap:16px; /* fix (confirmed, copied from Awards Lightbox's proven sizing pattern): direct viewport-unit box for the image instead of an indirect flex-space calculation, which was leaving the photo noticeably smaller than Awards' equivalent. */ } #pj-lightbox.open { display:flex; } /* Dot grid — FULL screen background (confirmed fix: was only on .pj-lb-imgwrap, so the text-panel area and the space below the photo in the Center layout had no dots at all). Now covers the entire lightbox regardless of which of the 3 layouts is active or whether image/text is in front. Very dark/muted (much darker than Main Gallery's version) so it stays clearly background — the photo must always read as the foreground. */ #pj-lightbox::before { content:''; position:absolute; inset:0; z-index:0; background-image: radial-gradient(circle, rgba(70,70,70,0.35) 1.4px, transparent 1.4px); background-size: 15px 15px; pointer-events:none; } #pj-lightbox .pj-lb-imgwrap { position:relative; z-index:1; width:94vw; height:80vh; display:flex; align-items:center; justify-content:center; } #pj-lightbox img { position:relative; z-index:1; height:80vh; max-width:94vw; width:auto; object-fit:contain; cursor:pointer; } .pj-lb-info { position:relative; z-index:1; text-align:center; margin-top:10px; max-width:640px; } .pj-lb-view { font-family:'Jost','Jost Fallback',sans-serif; font-weight:400; font-size:11px; letter-spacing:2px; color:#777; margin-bottom:4px; } .pj-lb-title { font-family:'Jost','Jost Fallback',sans-serif; font-weight:500; font-size:14px; letter-spacing:2px; text-transform:uppercase; color:#fff; margin-bottom:4px; } .pj-lb-snippet { font-family:'Jost','Jost Fallback',sans-serif; font-weight:400; font-size:12px; line-height:1.5; color:#9a9a9a; } /* 3-cycle Left/Right/Center layout (client-confirmed, desktop only — different from Awards' plain centered stack): VIEW 1 = text left, VIEW 2 = text right, VIEW 3 = center, VIEW 4 = left again... Image always keeps the larger 2/3 share; only the Center variant reverts to a full-width stacked photo. */ #pj-lightbox.pj-lb-left, #pj-lightbox.pj-lb-right { flex-direction:row; gap:40px; } #pj-lightbox.pj-lb-left .pj-lb-imgwrap, #pj-lightbox.pj-lb-right .pj-lb-imgwrap { width:60vw; flex:none; } #pj-lightbox.pj-lb-left .pj-lb-info, #pj-lightbox.pj-lb-right .pj-lb-info { width:28vw; max-width:28vw; margin-top:0; align-self:flex-end; margin-bottom:18vh; } #pj-lightbox.pj-lb-left .pj-lb-info { order:-1; text-align:left; } #pj-lightbox.pj-lb-right .pj-lb-info { text-align:right; } #pj-lightbox.pj-lb-left img, #pj-lightbox.pj-lb-right img { max-width:60vw; } /* ============================================================ AWARDS PAGE v4 (CONFIRMED 18 Jul): 1 screen = 1 group. Container = full frame width, fixed 2:1 ratio, SAME on all devices. Inside: treemap auto-division for ANY award count — winner cover always the biggest cell. BETTERPHOTO groups show 1 cover only. Click any cover = group lightbox with ALL awards. Thumbs default / Flow zigzag. ============================================================ */ .awards-wrap { min-height: 100%; display: flex; flex-direction: column; align-items: center; padding: 40px 0; /* edge fix: horizontal inset removed — page-frame's own --frame margin now the ONLY left/right inset, so content aligns exactly with the footer line ends (silent fix, proportions/design unchanged, per client's "No" to changing Awards) */ } .awards-inner { width: 100%; } /* PHOTO PAGES = FULL FRAME WIDTH */ /* Sitewide text-link rule (no underline · white · bold · icon) */ .txt-link { color: #ffffff; font-weight: 600; text-decoration: none; cursor: pointer; transition: opacity 0.2s ease; } .txt-link:hover, .txt-link:active { opacity: 0.55; } .txt-link.lb-off { color: #555555; cursor: default; pointer-events: none; } .lnk-ic { width: 17px; height: 17px; vertical-align: -4px; margin-left: 7px; } .lb-off .lnk-ic rect { stroke: #555555; } .lb-off .lnk-ic path { stroke: #555555; } /* Header row — AWARDS left, frameless toggle right */ .aw-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; } .aw-page-title { font-family: 'Jost', 'Jost Fallback', sans-serif; font-weight: 500; font-size: 24px; letter-spacing: 4px; text-transform: uppercase; color: var(--text); text-align: left; } .aw-toggle { display: flex; gap: 18px; } .aw-tgl { display: flex; align-items: center; gap: 6px; cursor: pointer; color: var(--muted); font-family: 'Jost', 'Jost Fallback', sans-serif; font-weight: 400; font-size: 13px; letter-spacing: 1px; transition: color 0.2s ease; -webkit-tap-highlight-color: transparent; } .aw-tgl svg { width: 13px; height: 13px; fill: currentColor; } .aw-tgl.on { color: #ffffff; } .aw-tgl:hover { color: #ffffff; } .aw-year { font-family: 'Jost', 'Jost Fallback', sans-serif; font-weight: 500; font-size: 22px; letter-spacing: 3px; color: var(--text); text-align: left; margin: 64px 0 6px; padding-top: 26px; border-top: 1px solid #2c2c2c; /* fix: clearer year interval (confirmed) */ } .aw-year:first-of-type { border-top: none; margin-top: 0; padding-top: 0; } .aw-comp-name { font-family: 'Jost', 'Jost Fallback', sans-serif; font-weight: 400; font-size: 13px; letter-spacing: 2.5px; text-transform: uppercase; color: #bdbdbd; text-align: left; margin: 26px 0 10px; } /* TREEMAP CONTAINER — fixed 2:1, identical layout on every device */ .tm-wrap { position: relative; width: 100%; padding-top: 50%; /* 2:1 ratio lock */ } .tm-cell { position: absolute; overflow: hidden; cursor: pointer; border: 2px solid #000000; /* 4px visual gap between cells */ } .tm-cell img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: 0.85; transition: opacity 0.25s ease; } .tm-cell:hover img { opacity: 1; } .jt-badge { position: absolute; top: 7px; right: 7px; font-family: 'Jost', 'Jost Fallback', sans-serif; font-weight: 400; font-size: 8px; letter-spacing: 1.5px; color: #eeeeee; background: rgba(0,0,0,0.45); border: 1px solid rgba(255,255,255,0.55); padding: 2px 7px; border-radius: 3px; pointer-events: none; } .jt-title { position: absolute; bottom: 24px; left: 10px; right: 10px; font-family: 'Jost', 'Jost Fallback', sans-serif; font-weight: 500; font-size: 12px; letter-spacing: 1px; line-height: 1.3; color: #ffffff; text-shadow: 0 1px 8px rgba(0,0,0,0.9); pointer-events: none; /* fix (confirmed): moved from top-left to bottom-left so it never shares a corner with the tier badge (top-right) — eliminates the text collision some badges (e.g. "NOMINEE", "2ND PLACE") caused when their actual rendered width exceeded the old fixed 70px reserve. Long titles still clamp to 2 lines with an ellipsis. */ display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .jt-comp { position: absolute; bottom: 8px; left: 10px; font-family: 'Jost', 'Jost Fallback', sans-serif; font-weight: 400; font-size: 9px; letter-spacing: 2px; text-transform: uppercase; color: #dddddd; text-shadow: 0 1px 8px rgba(0,0,0,0.9); pointer-events: none; } /* FLOW VIEW — zigzag, photo edge flush with the frame edge, caption follows the photo side. Hidden in thumbs. FIXED: left/right is now assigned by JS across the WHOLE page (fl-L / fl-R classes), not CSS nth-child — nth-child restarted at 1 for every award-body group, so the zigzag broke (sometimes 2 lefts in a row) at every group boundary. */ .fl-list { display: none; } #awards-page.flow-view .tm-wrap { display: none; } #awards-page.flow-view .fl-list { display: block; } .fl-item { margin-bottom: 40px; cursor: pointer; } .fl-item img { display: block; max-width: 72%; max-height: 72vh; width: auto; height: auto; background: #000; } /* BATCH 3a: DOT frame = award without a photo (self-portrait rule / photo not found) */ .aw-dot { background-color:#111; background-image:radial-gradient(circle, rgba(70,70,70,0.35) 1.4px, transparent 1.4px); background-size:15px 15px; } .tm-cell .aw-dot { width:100%; height:100%; } .fl-item .aw-dot { width:72%; aspect-ratio:3/2; max-height:72vh; } .fl-item.fl-L .aw-dot { margin-right:auto; } .fl-item.fl-R .aw-dot { margin-left:auto; } #aw-lb-dot { display:none; height:80vh; aspect-ratio:3/2; max-width:94vw; cursor:pointer; background-color:#111; background-image:radial-gradient(circle, rgba(70,70,70,0.35) 1.4px, transparent 1.4px); background-size:15px 15px; } .fl-item.fl-L img { margin-right: auto; } /* photo LEFT edge = frame edge */ .fl-item.fl-R img { margin-left: auto; } /* photo RIGHT edge = frame edge */ .fl-cap { font-family: 'Jost', 'Jost Fallback', sans-serif; font-weight: 400; font-size: 13px; line-height: 1.7; color: #9a9a9a; padding-top: 10px; } .fl-item.fl-L .fl-cap { text-align: left; } .fl-item.fl-R .fl-cap { text-align: right; } .fl-cap-t { color: #ffffff; font-weight: 500; font-size: 15px; } /* BATCH 3b (Ako 25 Oct, "B + C dark"): photo + free side column. Level = big outline letters; timeline = dark line that fills while scrolling. Colours stay dark so the eye goes to the photo, not the line. */ .fl-item { display: flex; align-items: flex-end; } .fl-item.fl-R { flex-direction: row-reverse; } .fl-item > img, .fl-item > .aw-dot { flex: 0 0 auto; } .fl-item.fl-L > img, .fl-item.fl-L > .aw-dot, .fl-item.fl-R > img, .fl-item.fl-R > .aw-dot { margin: 0; } .fl-side { flex: 1 1 0; min-width: 0; align-self: stretch; position: relative; display: flex; flex-direction: column; justify-content: flex-end; padding: 0 0 0 40px; } .fl-item.fl-R .fl-side { padding: 0 40px 0 0; text-align: right; } .fl-side .fl-cap { padding-top: 0; } .fl-tl { position: absolute; top: 0; bottom: 0; width: 1px; background: #161616; } .fl-item.fl-L .fl-tl { left: 12px; } .fl-item.fl-R .fl-tl { right: 12px; } .fl-tl i { position: absolute; left: 0; top: 0; width: 1px; height: 0; background: #4a4a4a; } .fl-tl s { position: absolute; left: -3px; top: 0; width: 7px; height: 7px; border-radius: 50%; background: #000; border: 1px solid #3a3a3a; box-sizing: border-box; } .fl-lvl { font-family: 'Jost', 'Jost Fallback', sans-serif; font-weight: 600; font-size: clamp(26px, 4vw, 60px); line-height: 1; letter-spacing: 2px; color: transparent; -webkit-text-stroke: 1px rgba(255,255,255,0.22); margin-bottom: 18px; overflow-wrap: anywhere; } /* Flow view: stronger Year / Award-body separators so a visitor scrolling always knows which year/category they're in (confirmed fix — applies in both Flow and Thumbs) */ #awards-page.flow-view .aw-year { border-top: 1px solid #3c3c3c; padding-top: 28px; margin-top: 64px; font-size: 26px; } #awards-page.flow-view .aw-year:first-of-type { border-top: none; margin-top: 0; } #awards-page.flow-view .aw-comp-name { margin-top: 40px; padding-bottom: 6px; border-bottom: 1px solid #262626; } /* LIGHTBOX — biggest possible (like the WordPress reference): height-driven so the photo fills the screen. NO arrows, NO counter. Click photo = next award in the group. Background = close. */ #aw-lightbox { position: fixed; inset: 0; z-index: 2600; background: rgba(0,0,0,0.97); display: none; align-items: center; justify-content: center; flex-direction: column; padding: 16px; } #aw-lightbox.open { display: flex; } #aw-lb-img { height: 80vh; /* BIG — photo is the hero */ max-width: 94vw; width: auto; object-fit: contain; cursor: pointer; } .aw-lb-info { text-align: center; margin-top: 14px; max-width: 720px; } .aw-lb-title { font-family: 'Jost', 'Jost Fallback', sans-serif; font-weight: 500; font-size: 17px; letter-spacing: 2px; color: #ffffff; margin-bottom: 6px; } .aw-lb-meta { font-family: 'Jost', 'Jost Fallback', sans-serif; font-weight: 400; font-size: 13px; letter-spacing: 1px; color: #bdbdbd; margin-bottom: 12px; } .aw-lb-links { display: flex; gap: 26px; justify-content: center; flex-wrap: wrap; } .aw-lb-link { font-family: 'Jost', 'Jost Fallback', sans-serif; font-weight: 600; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: #ffffff; text-decoration: none; cursor: pointer; transition: opacity 0.2s ease; } .aw-lb-link:hover, .aw-lb-link:active { opacity: 0.55; } .aw-lb-link.lb-off { color: #555555; cursor: default; pointer-events: none !important; opacity: 1 !important; } /* BATCH 3d */ /* ============================================================ GET IN TOUCH PAGE — all 7 fields kept (CONFIRMED) Pure B&W restyle of the working wintunnaing.net form ============================================================ */ .contact-wrap { min-height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 40px 20px; } .contact-inner { width: 100%; max-width: 880px; } /* ~46% of a desktop screen — WP thirds composition */ /* DESKTOP: title + subtitle left-aligned at the form's left edge, title baseline sits on the upper-third line, submit near the lower-third line (CONFIRMED — follows WordPress composition) */ #contact-page .page-title { text-align: left; } #contact-page .page-sub { text-align: left; margin-bottom: 30px; } #contact-page .tos-row { justify-content: flex-start; } #contact-page .submit-row { text-align: left; } .page-title { font-family: 'Jost', 'Jost Fallback', sans-serif; font-weight: 500; font-size: 24px; letter-spacing: 4px; text-transform: uppercase; color: var(--text); text-align: center; margin-bottom: 10px; } .page-sub { font-family: 'Jost', 'Jost Fallback', sans-serif; font-weight: 400; font-size: 14px; color: var(--muted); text-align: center; margin-bottom: 34px; } .contact-form input[type='text'], .contact-form input[type='email'], .contact-form input[type='tel'], .contact-form textarea { width: 100%; background: transparent; border: 1px solid #3c3c3c; color: var(--text); font-family: 'Jost', 'Jost Fallback', sans-serif; font-weight: 400; font-size: 16px; /* form input standard */ padding: 12px 14px; outline: none; border-radius: 10px; /* SITEWIDE RULE (CONFIRMED): 10px fillet echoes the round logo */ transition: border-color 0.25s ease; -webkit-appearance: none; } .contact-form input:focus, .contact-form textarea:focus { border-color: #ffffff; } .contact-form input::placeholder, .contact-form textarea::placeholder { color: #6b6b6b; } .contact-form input.invalid, .contact-form textarea.invalid { border-color: #ffffff; background: rgba(255,255,255,0.06); } .form-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin-bottom: 14px; } .form-rowp { display: grid; grid-template-columns: 1fr 2fr; gap: 14px; margin-bottom: 14px; } .form-row1 { margin-bottom: 14px; } .botcheck { display: none; } .field-error, .form-error { display: none; font-family: 'Jost', 'Jost Fallback', sans-serif; font-size: 12px; color: #ffffff; background: rgba(255,255,255,0.08); border-left: 2px solid #ffffff; padding: 6px 10px; margin: -6px 0 14px; } /* BATCH 3e: hCaptcha security check (free, via Web3Forms) */ .wtn-hc { display: flex; justify-content: center; margin: 18px 0 6px; min-height: 78px; max-width: 100%; overflow: hidden; } #contact-page .wtn-hc { justify-content: flex-start; margin: 20px 0 24px; } #pr-enq .wtn-hc { margin: 4px 0 8px; } .tos-row { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 22px 0 24px; } .tos-row input[type='checkbox'] { width: 17px; height: 17px; cursor: pointer; accent-color: #ffffff; } .tos-row label { font-family: 'Jost', 'Jost Fallback', sans-serif; font-weight: 400; font-size: 14px; color: #cfcfcf; cursor: pointer; } .tos-row label span { color: #ffffff; font-weight: 600; cursor: pointer; transition: opacity 0.2s ease; } .tos-row label span:hover, .tos-row label span:active { opacity: 0.55; } .submit-row { text-align: center; } .submit-btn { font-family: 'Jost', 'Jost Fallback', sans-serif; font-weight: 400; font-size: 14px; letter-spacing: 3px; text-transform: uppercase; color: var(--text); background: transparent; border: 1px solid #ffffff; border-radius: 10px; padding: 13px 34px; cursor: pointer; transition: background 0.25s ease, color 0.25s ease; -webkit-tap-highlight-color: transparent; } .submit-btn:hover, .submit-btn:active { background: #ffffff; color: #000000; } .submit-btn:disabled { border-color: #555555; color: #555555; background: transparent; cursor: default; } .form-success { display: none; text-align: center; padding: 30px 0; } .success-icon { width: 54px; height: 54px; border-radius: 50%; border: 1px solid #ffffff; color: #ffffff; font-size: 24px; line-height: 52px; margin: 0 auto 20px; font-family: 'Jost', 'Jost Fallback', sans-serif; } .success-title { font-family: 'Jost', 'Jost Fallback', sans-serif; font-weight: 500; font-size: 17px; letter-spacing: 3px; text-transform: uppercase; color: var(--text); margin-bottom: 14px; } .success-text { font-family: 'Jost', 'Jost Fallback', sans-serif; font-size: 14px; line-height: 1.9; color: #bdbdbd; } /* ============================================================ TERMS OF SERVICE — fullscreen in-page overlay (CONFIRMED) URL never changes; the Contact form stays in the DOM so all typed data is preserved. Close via BACK TO CONTACT. ============================================================ */ #terms-overlay { position: fixed; inset: 0; z-index: 2500; /* above pages+footer, below the menu overlay */ background: var(--bg); display: none; overflow-y: auto; overflow-x: hidden; } #terms-overlay.open { display: block; } .terms-inner { max-width: 880px; /* matches the Contact form edges — rule-of-thirds (CONFIRMED) */ margin: 0 auto; padding: calc(var(--frame) + 20px) 24px 80px; } .terms-title { font-family: 'Jost', 'Jost Fallback', sans-serif; font-weight: 500; font-size: 22px; /* desktop reading standard */ letter-spacing: 3px; text-transform: uppercase; color: var(--text); text-align: center; /* centered — single focal point */ margin-bottom: 26px; } .terms-nav { text-align: center; margin-bottom: 36px; } .terms-nav a { display: inline-block; font-family: 'Jost', 'Jost Fallback', sans-serif; font-weight: 400; font-size: 12px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); text-decoration: none; margin: 4px 10px; cursor: pointer; transition: color 0.2s ease; } .terms-nav a:hover { color: var(--text); } .terms-sec h3 { font-family: 'Jost', 'Jost Fallback', sans-serif; font-weight: 500; font-size: 16px; /* desktop reading standard */ letter-spacing: 2px; text-transform: uppercase; color: var(--text); text-align: left; /* left-aligned — legal convention */ border-bottom: 1px solid #3c3c3c; padding-bottom: 8px; margin: 34px 0 14px; } .terms-sec h4 { font-family: 'Jost', 'Jost Fallback', 'Myanmar Text', 'Noto Sans Myanmar', sans-serif; font-weight: 500; font-size: 15px; /* Myanmar script needs slightly larger */ color: var(--text); text-align: left; margin: 20px 0 10px; } .terms-sec p, .terms-intro-p { font-family: 'Jost', 'Jost Fallback', 'Myanmar Text', 'Noto Sans Myanmar', sans-serif; font-weight: 400; font-size: 16px; line-height: 2.0; color: #c9c9c9; /* 16px = desktop reading standard */ text-align: justify; /* justified — same rule as About bio */ margin-bottom: 12px; } .terms-back { text-align: center; margin-top: 50px; } .terms-back a { font-family: 'Jost', 'Jost Fallback', sans-serif; font-weight: 600; /* sitewide link rule: no underline */ font-size: 13px; letter-spacing: 3px; text-transform: uppercase; color: var(--text); text-decoration: none; cursor: pointer; transition: opacity 0.2s ease; } .terms-back a:hover, .terms-back a:active { opacity: 0.55; } .home-slide { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 1.4s ease; } .home-slide.on { opacity: 1; } /* ============================================================ FOOTER — fixed/sticky at viewport bottom at all times Frame: logo left · copyright center · social icons right Top border: WHITE (CONFIRMED refinement) ============================================================ */ footer { position: fixed; left: 0; right: 0; bottom: 0; height: var(--footer-h); z-index: 2000; display: flex; align-items: center; justify-content: center; background: var(--bg); /* photo ends above the footer — framed layout */ } .footer-inner { width: calc(100% - (var(--frame) * 2)); /* footer line aligns with the photo's left/right edges */ height: 100%; display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; border-top: 1px solid #ffffff; } /* --- LOGO — placeholder geometric circular SVG (circle + triangle) Real WTN logo mark to be swapped in before launch (CONFIRMED) --- Round shape, NO ring/border added. Rest: slow breathing opacity. Hover/tap: scale up + brighten. */ .logo-btn { justify-self: start; width: 44px; height: 44px; cursor: pointer; display: flex; align-items: center; justify-content: center; animation: breathe 4.5s ease-in-out infinite; transition: transform 0.35s ease, filter 0.35s ease; -webkit-tap-highlight-color: transparent; } .logo-btn:hover, .logo-btn:active { animation: none; opacity: 1; transform: scale(1.14); filter: brightness(1.35); } @keyframes breathe { 0%, 100% { opacity: 0.55; } 50% { opacity: 0.95; } } .logo-btn svg, .logo-btn img { width: 100%; height: 100%; display: block; } /* real WTN logo, white via Cloudinary e_colorize (24 Oct) */ /* --- COPYRIGHT — centered, ALL CAPS per Selective Caps rule --- */ .copyright { justify-self: center; font-family: 'Jost', 'Jost Fallback', sans-serif; font-weight: 400; font-size: 11px; letter-spacing: 2.5px; text-transform: uppercase; color: var(--text); white-space: nowrap; } /* --- SOCIAL ICONS — round 30px badges, real brand SVG marks, static at rest (no breathing), brighten on hover only --- */ .socials { justify-self: end; display: flex; gap: 12px; } .soc { width: 30px; height: 30px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.85); display: flex; align-items: center; justify-content: center; opacity: 0.7; transition: opacity 0.25s ease, filter 0.25s ease; -webkit-tap-highlight-color: transparent; } .soc:hover, .soc:active { opacity: 1; filter: brightness(1.3); } .soc svg { width: 14px; height: 14px; display: block; fill: #ffffff; } /* ============================================================ MENU — centered fullscreen overlay (CONFIRMED) Open: press the logo only. Close: tap/click anywhere. No X icon, no hint text. Text 19px. Active = white, inactive/unbuilt = muted gray. No underline. ============================================================ */ #menu-overlay { position: fixed; inset: 0; z-index: 3000; background: rgba(0,0,0,0.93); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 28px; opacity: 0; visibility: hidden; transition: opacity 0.35s ease, visibility 0.35s ease; cursor: pointer; } #menu-overlay.open { opacity: 1; visibility: visible; } .menu-item { font-family: 'Jost', 'Jost Fallback', sans-serif; font-weight: 400; font-size: 19px; letter-spacing: 4px; text-transform: uppercase; text-decoration: none; color: var(--muted); transition: color 0.25s ease; } .menu-item.m-active { color: var(--text); } .menu-item.m-link { cursor: pointer; transition: color 0.15s ease, transform 0.15s ease; } .menu-item.m-link:hover { color: var(--text); } .menu-item.m-link:active, .menu-item.m-link.pressing { /* press feedback on ALL devices (confirmed) */ color: var(--text); transform: scale(1.06); } /* ============================================================ ACCESSIBILITY — reduced motion respected ============================================================ */ @media (prefers-reduced-motion: reduce) { .logo-btn { animation: none; opacity: 0.85; } .home-slide { transition: none; } #menu-overlay { transition: none; } } /* ============================================================ PRINTS PAGE (in progress) — Catalog grid + Product Detail + Room-preview overlay. Full 1x.com-style print-type/size feature set (CONFIRMED to build now, per client — some options to be hidden later once Print & Delivery / Singapore vendor capability is confirmed in a separate discussion). Distinct from every other gallery page (Main Gallery/Sub-Gallery/Awards/Project): visible border + ~10px gap + caption BELOW the photo, for a "product card" commercial feel (per Prints_Page_Design_Notes_02.docx §2). ============================================================ */ .pr-page { width: 100%; } .pr-page-title { font-size: 26px; letter-spacing: 3px; text-transform: uppercase; margin-bottom: 6px; } .pr-page-sub { font-size: 13px; color: var(--muted); margin-bottom: 30px; } /* ---- Catalog grid: large + 2-stacked, mirrored per group, repeating down the page (client's reference chart pattern) ---- */ .pr-catalog { display: flex; flex-direction: column; gap: 10px; } .pr-group { display: grid; grid-template-columns: 2fr 1fr; grid-template-rows: 1fr 1fr; gap: 10px; height: 520px; } .pr-group.mirror { grid-template-columns: 1fr 2fr; } .pr-group .pr-card.large { grid-column: 1; grid-row: 1 / 3; } .pr-group.mirror .pr-card.large { grid-column: 2; } .pr-group .pr-card.small:nth-of-type(2) { grid-column: 2; grid-row: 1; } .pr-group .pr-card.small:nth-of-type(3) { grid-column: 2; grid-row: 2; } .pr-group.mirror .pr-card.small:nth-of-type(2) { grid-column: 1; grid-row: 1; } .pr-group.mirror .pr-card.small:nth-of-type(3) { grid-column: 1; grid-row: 2; } .pr-card { display: flex; flex-direction: column; border: 1px solid #333; background: #0d0d0d; cursor: pointer; overflow: hidden; } .pr-card-img { flex: 1; overflow: hidden; } .pr-card-img img { width: 100%; height: 100%; object-fit: cover; display: block; } .pr-card-cap { padding: 10px 12px; border-top: 1px solid #333; } .pr-card-name { font-size: 12px; letter-spacing: 1px; text-transform: uppercase; color: var(--text); } .pr-card-price { font-size: 11px; color: var(--muted); margin-top: 3px; } /* ---- Product Detail view ---- */ .pr-catalog-view, .pr-detail-view { display: none; } .pr-page.catalog-mode .pr-catalog-view { display: block; } .pr-page.detail-mode .pr-detail-view { display: block; } .pr-back { font-size: 12px; letter-spacing: 1px; color: var(--muted); cursor: pointer; margin-bottom: 24px; display: inline-block; } .pr-back:hover { color: var(--text); } .pr-detail-layout { display: block; } .pr-detail-top { display: flex; gap: 30px; align-items: stretch; } .pr-thumbs { display: flex; flex-direction: column; justify-content: space-between; width: 74px; flex-shrink: 0; } .pr-thumbs img { width: 74px; height: 74px; object-fit: cover; cursor: pointer; border: 1px solid #333; display: block; background: #1c1c1c; } .pr-thumbs img.active { border-color: var(--text); } /* BATCH 2: series photo picker — column scrolls when photos + rooms do not fit */ .pr-thumbs { overflow-y: auto; gap: 8px; scrollbar-width: none; } .pr-thumbs::-webkit-scrollbar { display: none; } .pr-thumbs img, .pr-thumbs .pr-room-thumb { flex-shrink: 0; } /* BATCH 2: Frameless type — full first row, no white border (Ako) */ .pr-type-btn.pr-type-fl { grid-column: 1 / -1; } .pr-type-btn.pr-type-fl.active { border-color: #333; color: #fff; } .pr-type-sub { font-size: 9px; letter-spacing: 1.5px; color: #9a9a9a; margin-top: 4px; text-transform: uppercase; } #pr-sample-tag { font-family: 'Jost', 'Jost Fallback', sans-serif; font-size: 10px; letter-spacing: 1.5px; color: #c08a2e; text-transform: uppercase; margin: 2px 0 6px; } /* BATCH 2: Coming soon popup */ #pr-soon { position: fixed; inset: 0; z-index: 2800; background: rgba(0,0,0,.72); display: none; align-items: center; justify-content: center; padding: 20px; } #pr-soon.open { display: flex; } .pr-soon-box { background: #0b0b0b; border: 1px solid #333; padding: 40px 44px; max-width: 460px; text-align: center; font-family: 'Jost', 'Jost Fallback', sans-serif; } .pr-soon-type { font-size: 12px; letter-spacing: 3px; color: #888; text-transform: uppercase; margin-bottom: 12px; } .pr-soon-title { font-size: 22px; letter-spacing: 3px; color: #fff; text-transform: uppercase; margin-bottom: 16px; } .pr-soon-text { font-size: 14px; line-height: 1.8; color: #c9c9c9; margin-bottom: 26px; } .pr-soon-text b { color: #fff; font-weight: 500; } .pr-soon-btns { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; } .pr-soon-btn { border: 1px solid #fff; padding: 10px 18px; font-size: 12px; letter-spacing: 2px; color: #fff; text-transform: uppercase; cursor: pointer; } .pr-soon-btn.ghost { border-color: #444; color: #aaa; } /* BATCH 3c: print enquiry form (same look as the Coming soon box) */ #pr-enq { position: fixed; inset: 0; z-index: 2800; background: rgba(0,0,0,.78); display: none; align-items: center; justify-content: center; padding: 20px; overflow-y: auto; } #pr-enq.open { display: flex; } #pr-enq .pr-soon-box { max-width: 520px; width: 100%; text-align: left; padding: 34px 36px; } #pr-enq .pr-soon-title { text-align: center; } .pr-enq-sum { font-size: 13px; line-height: 1.8; color: #c9c9c9; border-top: 1px solid #262626; border-bottom: 1px solid #262626; padding: 12px 0; margin-bottom: 18px; } .pr-enq-sum b { color: #fff; font-weight: 500; } .pr-enq-row { display: flex; gap: 10px; } .pr-enq-row > * { flex: 1; min-width: 0; } #pr-enq input, #pr-enq textarea { width: 100%; box-sizing: border-box; background: #111; border: 1px solid #333; color: #eee; font: 400 14px 'Jost', 'Jost Fallback', sans-serif; padding: 10px 12px; margin-bottom: 10px; outline: none; } #pr-enq input:focus, #pr-enq textarea:focus { border-color: #777; } #pr-enq textarea { min-height: 90px; resize: vertical; } #pr-enq .botcheck { display: none; } .pr-enq-msg { font-size: 13px; color: #c9c9c9; line-height: 1.7; min-height: 20px; margin: 4px 0 12px; } .pr-enq-msg.err { color: #e08a8a; } #pr-enq .pr-soon-btns { margin-top: 6px; } @media (max-width: 640px) { #pr-enq .pr-soon-box { padding: 26px 20px; } .pr-enq-row { display: block; } } .pr-room-thumb { width: 74px; height: 74px; position: relative; cursor: pointer; border: 1px solid #333; overflow: hidden; flex-shrink: 0; } .pr-room-thumb.active { border-color: var(--text); } .pr-room-thumb-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .pr-room-thumb-pic { position: absolute; transform: translateX(-50%); object-fit: cover; border: 1px solid #f2f2f2; box-shadow: 0 2px 5px rgba(0,0,0,0.4); } .pr-main-col { flex: 1; min-width: 0; } .pr-main-img-wrap { cursor: pointer; height: 46vh; overflow: hidden; } .pr-main-img-wrap img { width: 100%; height: 100%; object-fit: cover; display: block; border: 1px solid #333; } /* ---- Extra print-type fields (e.g. Canvas Wrap / Canvas Type) sit as their own row directly below the image — confirmed final layout. Varies by print type; only affects this middle column's height, never the right info column's. ---- */ #pr-extra-fields { display: flex; gap: 14px; margin-top: 10px; } #pr-extra-fields .pr-field { flex: 1; margin-bottom: 0; } /* ---- Frame / Top Mat / Bottom Mat / Dimensions row — matches the 1x.com reference layout (client screenshot). Explicit background prevents any bleed-through from the image above. ---- */ .pr-swatch-row { display: flex; gap: 14px; margin-top: 10px; } .pr-swatch-box { flex: 1; min-width: 0; } .pr-swatch-label { font-size: 9px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 4px; } .pr-swatch-preview { border: 1px solid #333; background: #1c1c1c; height: 44px; display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--muted); text-align: center; } .pr-swatch-dims { flex: 1.3; } .pr-swatch-dims .pr-swatch-preview { padding: 10px 12px; } .pr-swatch-dims-text { flex-direction: column; align-items: center; text-align: center; justify-content: center; padding: 0; font-size: 10px; color: var(--text); line-height: 1.6; } /* ---- Right info column: five blocks spread evenly across the full column height (space-between) so Add to Cart lands on the exact same bottom line as the Frame/Mat/Dimensions row and the last thumbnail — confirmed final layout. No single large empty gap; the natural spacing between blocks grows a little instead. ---- */ .pr-info { width: 300px; flex-shrink: 0; display: flex; flex-direction: column; justify-content: space-between; } .pr-info-top { } .pr-title { font-size: 20px; letter-spacing: 2px; text-transform: uppercase; margin-bottom: 8px; } .pr-price { font-size: 22px; } .pr-type-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; } .pr-type-btn { border: 1px solid #333; padding: 12px 4px; text-align: center; font-size: 11px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; color: var(--muted); } .pr-type-btn.active { border-color: var(--text); color: var(--text); } .pr-type-btn:hover { color: var(--text); } .pr-field { margin-bottom: 0; } .pr-field label { display: block; font-size: 10px; letter-spacing: 1px; text-transform: uppercase; color: var(--muted); margin-bottom: 5px; } .pr-field select { width: 100%; background: #0d0d0d; border: 1px solid #333; color: var(--text); padding: 10px; font-family: 'Jost', 'Jost Fallback', sans-serif; font-size: 13px; cursor: pointer; } .pr-field-shape { } .pr-info-bottom { } .pr-add-cart { width: 100%; padding: 15px; background: var(--text); color: var(--bg); border: none; font-family: 'Jost', 'Jost Fallback', sans-serif; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; font-size: 13px; cursor: pointer; transition: transform .15s ease; } .pr-add-cart:hover { opacity: 0.85; } .pr-add-cart.pulse { transform: scale(0.96); } .pr-cart-note { font-size: 11px; color: var(--muted); margin-top: 10px; text-align: center; } /* ---- Catalog: scroll-reveal + cinematic zoom hover ---- */ .pr-card { opacity: 0; transform: translateY(24px); transition: opacity .5s ease, transform .5s ease; } .pr-card.revealed { opacity: 1; transform: translateY(0); } .pr-card-img { position: relative; } .pr-card-img img { transition: transform .6s ease; } .pr-card:hover .pr-card-img img { transform: scale(1.06); } /* ---- Limited Edition live counter ---- */ /* ---- Header nav: Prev/Next product + Favorites count (matches reference spec's header row) ---- */ .pr-header-nav { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; } .pr-nav-btn { font-size: 11px; letter-spacing: 1px; color: var(--muted); cursor: pointer; } .pr-nav-btn:hover { color: var(--text); } .pr-fav-count { font-size: 11px; color: var(--muted); margin-left: auto; } /* ---- Show Price Details / Add to Favorites links ---- */ .pr-price-links { display: flex; gap: 16px; margin-top: 6px; } .pr-link { font-size: 11px; color: var(--muted); text-decoration: underline; cursor: pointer; } .pr-link:hover { color: var(--text); } .pr-price-breakdown { font-size: 11px; color: var(--muted); margin-top: 8px; line-height: 1.6; display: none; } .pr-price-breakdown.open { display: block; } /* ---- "View on your wall" button, overlaid on the main image ---- */ .pr-wall-btn { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,0.7); border: 1px solid #444; color: var(--text); font-size: 10px; letter-spacing: 0.5px; padding: 8px 12px; cursor: pointer; text-transform: uppercase; } .pr-wall-btn:hover { background: rgba(0,0,0,0.9); border-color: #666; } /* ---- Social share icons below the main image ---- */ .pr-social-share { display: flex; gap: 10px; margin-top: 12px; justify-content: center; } /* ---- "View this on your wall" email-gate modal — reuses the Terms of Service overlay's fullscreen in-page pattern ---- */ #pr-wall-modal { position: fixed; inset: 0; z-index: 2650; background: rgba(0,0,0,0.85); display: none; align-items: center; justify-content: center; padding: 20px; } #pr-wall-modal.open { display: flex; } .pr-wall-modal-box { position: relative; background: #111; border: 1px solid #333; max-width: 420px; width: 100%; padding: 32px 28px; text-align: center; } .pr-wall-modal-close { position: absolute; top: 14px; right: 16px; cursor: pointer; color: var(--muted); font-size: 14px; } .pr-wall-modal-close:hover { color: var(--text); } .pr-wall-modal-title { font-size: 16px; letter-spacing: 1px; margin-bottom: 12px; } .pr-wall-modal-sub { font-size: 12px; color: var(--muted); line-height: 1.6; margin-bottom: 20px; } .pr-wall-modal-input { width: 100%; background: #0d0d0d; border: 1px solid #333; color: var(--text); padding: 12px; font-family: 'Jost', 'Jost Fallback', sans-serif; font-size: 13px; margin-bottom: 14px; } .pr-wall-modal-btn { width: 100%; padding: 14px; background: var(--text); color: var(--bg); border: none; font-family: 'Jost', 'Jost Fallback', sans-serif; font-weight: 500; letter-spacing: 1px; text-transform: uppercase; font-size: 12px; cursor: pointer; } .pr-wall-modal-btn:hover { opacity: 0.85; } .pr-wall-modal-note { font-size: 11px; color: var(--muted); margin-top: 12px; } /* ---- Product Details Accordion (below the fold) ---- */ .pr-accordion { margin-top: 40px; border-top: 1px solid #222; text-align: center; } /* BATCH 2c: centred, lines to the frame */ .pr-accordion-item { border-bottom: 1px solid #222; } .pr-accordion-head { padding: 16px 0; font-size: 12px; letter-spacing: 1px; cursor: pointer; color: var(--text); display: flex; justify-content: center; gap: 14px; align-items: center; } .pr-accordion-head::after { content: '+'; color: var(--muted); font-size: 16px; } .pr-accordion-head.open::after { content: '\2212'; } .pr-accordion-body { display: none; padding: 0 0 18px; font-size: 13px; color: var(--muted); line-height: 1.7; } .pr-accordion-body.open { display: block; } .pr-accordion-body { max-width: 880px; margin-left: auto; margin-right: auto; } .pr-edition { margin-top: 10px; } .pr-edition-bar { width: 100%; height: 5px; background: #2a2a2a; margin-bottom: 8px; } .pr-edition-fill { height: 100%; background: var(--text); transition: width .4s ease; } .pr-edition-text { font-size: 12px; color: var(--text); } .pr-edition-urgent { font-size: 11px; color: #c99a9a; margin-top: 3px; } /* ---- Price update pulse (count-up target) ---- */ .pr-price { transition: opacity .15s ease; } .pr-price.updating { opacity: 0.4; } /* ---- Cursor-follow spotlight on the main product image ---- */ .pr-main-img-wrap { position: relative; transition: margin .3s ease; } .pr-spotlight { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle 160px at var(--sx,50%) var(--sy,50%), rgba(255,255,255,0.12), transparent 70%); transition: opacity .2s ease; } .pr-main-img-wrap:hover .pr-spotlight { opacity: 1; } /* ---- Per print-type visual treatment on the main image — approximates how each material actually presents, since real per-type photography isn't available yet. Canvas: a simulated 3D wrapped-edge box shadow. Framed: a thick black frame with a white mat border. Wood: a warm wood-tone border. Metal/Acrylic: a subtle diagonal glossy sheen overlay. Art Print: plain (baseline, matches the original hairline border). ---- */ .pr-main-img-wrap.type-canvas-print { box-shadow: 14px 14px 0 -4px #1a1a1a, 14px 14px 0 0 #0a0a0a; } .pr-main-img-wrap.type-canvas-print img { border-color: #444; } .pr-main-img-wrap.type-framed-print img { border: 22px solid #0a0a0a; box-shadow: inset 0 0 0 10px #f2f2f2; padding: 10px; background: #f2f2f2; } .pr-main-img-wrap.type-wood-print img { border: 10px solid #6b4a30; } .pr-main-img-wrap.type-metal-print, .pr-main-img-wrap.type-acrylic-print { position: relative; } .pr-main-img-wrap.type-metal-print::after, .pr-main-img-wrap.type-acrylic-print::after { content: ''; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,0.16) 50%, transparent 60%); } /* ---- You May Also Like ---- */ .pr-related { margin-top: 40px; } .pr-related-title { font-size: 13px; letter-spacing: 2px; text-transform: uppercase; color: var(--muted); margin-bottom: 14px; } .pr-related-row { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; } .pr-related-card { border: 1px solid #333; cursor: pointer; } .pr-related-card img { width: 100%; height: 120px; object-fit: cover; display: block; transition: transform .5s ease; } .pr-related-card:hover img { transform: scale(1.06); } .pr-related-card-cap { padding: 8px 10px; border-top: 1px solid #333; } .pr-related-card-name { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; } .pr-related-card-price { font-size: 10px; color: var(--muted); margin-top: 2px; } /* ---- Sticky mini cart bar (mobile) ---- */ .pr-sticky-bar { position: fixed; left: 0; right: 0; bottom: calc(var(--footer-h) - 2px); z-index: 400; background: #0d0d0d; border-top: 1px solid #333; padding: 12px var(--frame); display: none; align-items: center; justify-content: space-between; gap: 12px; transform: translateY(100%); transition: transform .25s ease; } .pr-sticky-bar.show { transform: translateY(0); } .pr-sticky-price { font-size: 14px; } .pr-sticky-btn { background: var(--text); color: var(--bg); border: none; padding: 10px 20px; font-family: 'Jost', 'Jost Fallback', sans-serif; font-size: 12px; letter-spacing: 1px; text-transform: uppercase; cursor: pointer; } /* ---- Room-preview overlay — reuses the Terms of Service overlay's exact technical pattern (fullscreen, in-page, URL unchanged, dismissed via tap-outside or a back link) ---- */ #pr-room-overlay { position: fixed; inset: 0; z-index: 2500; background: rgba(0,0,0,0.82); display: none; align-items: center; justify-content: center; padding: 24px; } #pr-room-overlay.open { display: flex; } .pr-room-scene { position: relative; display: inline-block; line-height: 0; } .pr-room-bg { display: block; width: auto; height: auto; max-width: min(900px, 80vw); max-height: 75vh; /* BATCH 2c: more space around (Ako) */ } .pr-room-scene { cursor: pointer; } .pr-room-mounted { position: absolute; box-shadow: 0 4px 10px rgba(0,0,0,0.25); border: none; object-fit: cover; } /* ---- Dynamic frame styles for the room-preview overlay — matches the visitor's Frame dropdown selection. Wood uses a real wood-grain photo as a border-image (realistic texture, no extra transparent-PNG asset to keep aligned). Black/White use plain solid borders. "None"/unrecognized falls back to a thin neutral border. ---- */ .pr-room-mounted.frame-wood { border-width: 16px; border-style: solid; border-image: url('https://images.pexels.com/photos/4709011/pexels-photo-4709011.jpeg?w=400') 30 round; } .pr-room-mounted.frame-black { border: 14px solid #111; } .pr-room-mounted.frame-white { border: 14px solid #f4f4f4; } .pr-room-mounted.frame-gold { border-width: 14px; border-style: solid; border-color: #b8964f; } .pr-room-mounted.frame-none { border: 10px solid #1c1c1c; } .pr-room-close { position: absolute; top: -34px; right: 0; color: #fff; font-size: 16px; cursor: pointer; opacity: 0.8; } .pr-room-close:hover { opacity: 1; } .pr-room-arrow { position: absolute; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; border: 1px solid rgba(255,255,255,0.4); border-radius: 50%; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; background: rgba(0,0,0,0.3); } .pr-room-arrow:hover { background: rgba(0,0,0,0.6); } .pr-room-prev { left: -60px; } .pr-room-next { right: -60px; } /* ---- Simple tap-to-close lightbox for the main product image ---- */ #pr-lightbox { position: fixed; inset: 0; z-index: 2600; background: rgba(0,0,0,0.96); display: none; align-items: center; justify-content: center; cursor: pointer; } #pr-lightbox.open { display: flex; } #pr-lightbox img { max-width: 80vw; max-height: 75vh; object-fit: contain; cursor: default; } /* BATCH 2c: more space around (Ako) */ /* ============================================================ RESPONSIVE — footer margins tighten on small screens ============================================================ */ @media (max-width: 640px) { :root { --frame: 20px; } /* smaller equal frame on mobile — photo stays dominant */ .footer-inner { width: calc(100% - (var(--frame) * 2)); column-gap: 14px; } .copyright { font-size: 9px; letter-spacing: 1px; } .socials { gap: 6px; } .soc { width: 26px; height: 26px; } .soc svg { width: 12px; height: 12px; } .logo-btn { width: 40px; height: 40px; } /* MOBILE EDGE ALIGNMENT (CONFIRMED — green-line guide): About bio edges and Contact form edges sit exactly on the footer white line's left/right ends (= var(--frame)). The page-frame already provides the 20px inset, so inner side paddings go to 0 here. */ .about-wrap { padding: 30px 0; } .contact-wrap { padding: 30px 0; } .terms-inner { padding-left: var(--frame); padding-right: var(--frame); } /* Approved mobile sizes locked — desktop audit must not affect mobile */ .about-bio p { font-size: 15px; } .about-bio .mm-name { font-size: 14px; } .page-sub { font-size: 13px; } .contact-form input[type='text'], .contact-form input[type='email'], .contact-form input[type='tel'], .contact-form textarea { font-size: 14px; } .tos-row label { font-size: 13px; } .submit-btn { font-size: 13px; } .cta-btn { font-size: 13px; } /* Awards page mobile — SAME layout, same 2:1 ratio, scaled */ .awards-wrap { padding: 30px 0; } .jt-title { font-size: 9px; bottom: 22px; } .jt-badge { font-size: 7px; padding: 1px 5px; } .jt-comp { display: none; } .aw-year { font-size: 17px; } .fl-item img { max-width: 86%; } .fl-item .aw-dot { width: 86%; } .fl-item, .fl-item.fl-R { display: block; } .fl-item.fl-L > img, .fl-item.fl-L > .aw-dot { margin-right: auto; } .fl-item.fl-R > img, .fl-item.fl-R > .aw-dot { margin-left: auto; } .fl-side, .fl-item.fl-R .fl-side { display: block; padding: 10px 0 0; } /* BATCH 3c (Ako 25 Oct): dark timeline on phones too — in the free strip beside the 86% photo */ .fl-item { position: relative; } .fl-side, .fl-item.fl-R .fl-side { position: static; } .fl-tl { display: block; top: 0; bottom: 0; } .fl-item.fl-L .fl-tl { left: auto; right: 7%; } .fl-item.fl-R .fl-tl { right: auto; left: 7%; } .fl-lvl { font-size: 30px; margin: 6px 0 4px; } #aw-lb-img { height: auto; max-height: 76vh; max-width: 96vw; } .aw-lb-info { margin-top: 34px; } /* mobile: description sits a little lower (confirmed) */ .aw-lb-links { flex-direction: column; gap: 16px; align-items: center; } .lnk-ic { width: 15px; height: 15px; } /* Main Gallery mobile — pile scales down; horizontal travel re-capped in px (vw values would push cards off-screen on a narrow phone) so the curve/cluster/cascade still read cleanly (v3, per hand sketches) */ .mg-headzone { height:64vh; min-height:400px; } .mg-pile { width:210px; height:272px; transform:scale(.9); } .hz-cap { font-size:9px; } /* Motion overrides removed (fix, confirmed): the effect rules above now use vw for BOTH axes, so the same rules already produce an identical-shaped, proportionally smaller motion on mobile automatically — no separate table needed anymore. */ .mg-grid { gap:3px; } .mg-scrim { opacity:1; background:rgba(0,0,0,0.35); font-size:10px; } /* mobile: always visible (confirmed) */ /* Sub-Gallery mobile */ .sg-mosaic { grid-template-columns:repeat(2,1fr); grid-auto-rows:130px; } .sg-cell.big { grid-column:span 2; grid-row:span 2; } .sg-cell:not(.big) .sg-cap { font-size:10px; } /* Project page mobile: hero on top, grid below (stacked) */ .pj-layout { flex-direction:column; } .pj-hero { flex:none; width:100%; aspect-ratio:6/7; } .pj-grid { grid-template-columns:repeat(2,1fr); } /* mobile: show a frame only to finish an odd last row; no big frame */ .pj-ph { display:none; } .pj-ph.pj-ph-m { display:block; } .pj-grid.pj-g1 { display:none; } /* fix (confirmed, mobile bug): Title and Social icons shared one row and the desktop truncation rule (nowrap/ellipsis/ max-width:60%) cut long titles short, e.g. "WINDMILL S...". Mobile now stacks Title above Social icons and lets the title wrap across up to 2 lines instead of truncating. Desktop rule (.pj-title, line ~490) is untouched. */ .pj-title-row { flex-direction:column; gap:10px; margin-bottom:14px; } .pj-title { white-space:normal; overflow:visible; text-overflow:clip; max-width:100%; } /* Project Flow MIX mobile (CONFIRMED 24 Oct): text on top, photos 86% touching the frame edge, alternating, VIEW label under each, numerals hidden, 40px gap. */ .pjr { display:block; margin-bottom:40px; } .pjr .pj-flow-item { width:86%; } .pjr.R .pj-flow-item { margin-left:auto; } .pjr .pj-flow-item img { width:100%; max-height:none; } .pjr-sp { padding:10px 0 0; } .pjr-num { display:none; } .pjr-lb { margin-top:0; } .pjr.first { display:flex; flex-direction:column; } .pjr.first .pjr-sp { order:-1; padding:0 0 24px; text-align:center; } .pjr-sp .pj-social { justify-content:center; } .pjr-title { font-size:17px; } /* Project Lightbox mobile: always stacked/center (confirmed — the Left/Right/Center 3-cycle is desktop-only; mobile has no room for a side-by-side split). */ #pj-lightbox.pj-lb-left, #pj-lightbox.pj-lb-right { flex-direction:column; gap:10px; } #pj-lightbox.pj-lb-left .pj-lb-imgwrap, #pj-lightbox.pj-lb-right .pj-lb-imgwrap { width:94vw; } #pj-lightbox.pj-lb-left .pj-lb-info, #pj-lightbox.pj-lb-right .pj-lb-info { width:auto; max-width:94vw; order:0; text-align:center; align-self:auto; margin-bottom:0; } #pj-lightbox.pj-lb-left img, #pj-lightbox.pj-lb-right img { max-width:94vw; } /* fix (confirmed, mobile bug): lightbox info text (VIEW/Title/ Description) sat too close to the bottom edge — the centered flex group had no breathing room below on short viewports. Small bottom padding nudges the whole centered group up a little. Desktop untouched (no padding set there). */ #pj-lightbox { padding-bottom: 4vh; } /* Terms overlay: keep the already-approved mobile sizes */ .terms-title { font-size: 20px; } .terms-nav a { font-size: 11px; } .terms-sec h3 { font-size: 14px; } .terms-sec h4 { font-size: 14px; } .terms-sec p, .terms-intro-p { font-size: 14px; } /* Mobile keeps the centered composition (as approved on Pro Max) */ #contact-page .page-title, #contact-page .page-sub { text-align: center; } #contact-page .tos-row { justify-content: center; } #contact-page .wtn-hc { justify-content: center; } #contact-page .submit-row { text-align: center; } /* Prints Page mobile: catalog groups stack to a single column (large + 2 small, all full-width, in order) instead of the 2-column large+stacked layout; product detail stacks thumbnails above the main image instead of beside it. */ .pr-group, .pr-group.mirror { grid-template-columns: 1fr; grid-template-rows: none; height: auto; gap: 10px; } .pr-group .pr-card.large, .pr-group.mirror .pr-card.large, .pr-group .pr-card.small:nth-of-type(2), .pr-group.mirror .pr-card.small:nth-of-type(2), .pr-group .pr-card.small:nth-of-type(3), .pr-group.mirror .pr-card.small:nth-of-type(3) { grid-column: 1; grid-row: auto; } .pr-card.large .pr-card-img { aspect-ratio: 4/3; } .pr-card.small .pr-card-img { aspect-ratio: 16/9; } .pr-detail-top { flex-direction: column; align-items: stretch; } .pr-thumbs { flex-direction: row; justify-content: flex-start; gap: 8px; width: 100%; overflow-x: auto; overflow-y: hidden; height: auto !important; } /* BATCH 2: photos + rooms scroll sideways */ .pr-related-row { grid-template-columns: repeat(2, 1fr); } .pr-sticky-bar { display: flex; } .pr-thumbs img { width: 60px; height: 60px; flex-shrink: 0; } .pr-info { width: 100%; justify-content: flex-start; gap: 14px; } .pr-info-top { margin-bottom: 4px; } #pr-extra-fields { flex-wrap: wrap; } /* fix (confirmed, mobile bug): Dimensions text ("Image: ...cm / Overall: ...cm") wraps onto more lines on a narrow screen than the fixed 44px swatch box allowed, so it overflowed past the box edge. Swatch row now wraps to 2-per-row (more width per box, less wrapping) and boxes grow to fit their content instead of clipping it. */ .pr-swatch-row { flex-wrap: wrap; gap: 10px; } .pr-swatch-box { flex: 1 1 calc(50% - 5px); min-width: calc(50% - 5px); } .pr-swatch-preview { height: auto; min-height: 44px; padding: 8px; } } /* ---- Portable: page titles are

(was
). :where() has zero specificity, so every existing class rule still wins; this only removes the browser's default h1 look. ---- */ :where(h1){margin:0;font:inherit;letter-spacing:inherit;text-transform:inherit} /* ---- Portable: visually hidden

for pages with no visible title (Home, Main Gallery) ---- */ .wtn-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}