/* ================================================================ POUR LA REVOLUCIÓN — Premium Stylesheet PLR-SCROLLYTELLING-V1 One continuous immersive scrollytelling journey. All business content lives inside its scene chapter. Child theme of Twenty Twenty-Three. ================================================================ */ /* ── Custom Properties ───────────────────────────────────────── */ :root { --plr-black: #0a0806; --plr-dark: #12100d; --plr-surface: #1a1612; --plr-surface-2: #211d18; --plr-cream: #f0e6cc; --plr-cream-dim: #c8b896; --plr-gold: #c9973a; --plr-gold-lt: #e8a84a; --plr-muted: #7a6f5e; --plr-white: #faf7f0; --plr-font-display: 'Cormorant Garamond', Georgia, serif; --plr-font-body: 'Jost', system-ui, sans-serif; --plr-nav-h: 72px; --plr-radius: 4px; --plr-ease: 0.35s cubic-bezier(0.4, 0, 0.2, 1); /* Film grain — shared across all scenes */ --plr-grain: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='1'/%3E%3C/svg%3E"); } /* ── Reset & Base ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { scroll-behavior: smooth; scroll-padding-top: var(--plr-nav-h); overflow-x: hidden; width: 100%; } /* * TT3 theme.json (useRootPaddingAwareAlignments: true) injects * padding onto via global styles. Override all four sides * to prevent the layout from being pushed off the top edge. */ body { margin: 0; padding: 0; } body.plr-site { background-color: var(--plr-black); color: var(--plr-cream); font-family: var(--plr-font-body); font-size: 1rem; line-height: 1.7; -webkit-font-smoothing: antialiased; overflow-x: hidden; width: 100%; margin: 0; padding: 0 !important; /* overrides any WP global-styles inline rule */ min-height: 100svh; } /* Neutralise TT3 block wrappers on the front page */ body.plr-site .wp-site-blocks, body.plr-site .wp-block-template-part { all: unset; display: block; } img { max-width: 100%; height: auto; display: block; } ul { list-style: none; } a { color: var(--plr-gold); text-decoration: none; transition: color var(--plr-ease); } a:hover { color: var(--plr-gold-lt); } /* ── Journey Wrapper ─────────────────────────────────────────── */ .plr-journey { width: 100%; max-width: 100%; overflow-x: hidden; background-color: var(--plr-black); } /* ── WordPress Admin Bar — nav offset ───────────────────────── */ /* * When logged in, WP adds html { margin-top: 32px } and a fixed * admin bar at top: 0. Without this, our fixed nav renders BEHIND * the admin bar (our z-index: 100 vs WP's 99999). * Push the nav below the admin bar so it is always fully visible. */ .admin-bar .plr-nav { top: 32px; } @media screen and (max-width: 782px) { .admin-bar .plr-nav { top: 46px; } } /* Adjust scroll-snap target to account for admin bar height */ html.admin-bar { scroll-padding-top: calc(var(--plr-nav-h) + 32px); } @media screen and (max-width: 782px) { html.admin-bar { scroll-padding-top: calc(var(--plr-nav-h) + 46px); } } /* ════════════════════════════════════════════════════════════════ NAV ════════════════════════════════════════════════════════════════ */ .plr-nav { position: fixed; top: 0; left: 0; right: 0; z-index: 100; height: var(--plr-nav-h); transition: background var(--plr-ease), box-shadow var(--plr-ease); } .plr-nav.is-scrolled { background: rgba(10, 8, 6, 0.96); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); box-shadow: 0 1px 0 rgba(201, 151, 58, 0.18); } .plr-nav__inner { display: flex; align-items: center; justify-content: space-between; height: 100%; max-width: 1280px; margin: 0 auto; padding: 0 2rem; } .plr-nav__logo-link { display: flex; align-items: center; } .plr-nav__logo { width: 40px; height: 40px; object-fit: contain; transition: opacity var(--plr-ease); } .plr-nav__logo:hover { opacity: 0.75; } .plr-nav__links { display: flex; align-items: center; gap: 2.5rem; } .plr-nav__links a { font-family: var(--plr-font-body); font-size: 0.76rem; font-weight: 500; letter-spacing: 0.15em; text-transform: uppercase; color: var(--plr-cream-dim); transition: color var(--plr-ease); } .plr-nav__links a:hover { color: var(--plr-gold); } .plr-nav__cta { padding: 0.4rem 1.1rem; border: 1px solid var(--plr-gold); border-radius: var(--plr-radius); color: var(--plr-gold) !important; transition: background var(--plr-ease), color var(--plr-ease) !important; } .plr-nav__cta:hover { background: var(--plr-gold); color: var(--plr-black) !important; } /* Hamburger */ .plr-nav__hamburger { display: none; flex-direction: column; gap: 5px; background: none; border: none; cursor: pointer; padding: 8px; flex-shrink: 0; } .plr-nav__hamburger span { display: block; width: 22px; height: 1.5px; background: var(--plr-cream); transition: transform var(--plr-ease), opacity var(--plr-ease); } .plr-nav__hamburger[aria-expanded="true"] span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); } .plr-nav__hamburger[aria-expanded="true"] span:nth-child(2) { opacity: 0; } .plr-nav__hamburger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); } /* Mobile menu panel */ .plr-mobile-menu { display: none; position: absolute; top: 100%; left: 0; right: 0; background: rgba(10, 8, 6, 0.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); padding: 1.25rem 2rem 2rem; border-top: 1px solid rgba(201, 151, 58, 0.18); } .plr-mobile-menu.is-open { display: block; } .plr-mobile-menu ul { display: flex; flex-direction: column; } .plr-mobile-menu a { display: block; padding: 0.8rem 0; font-size: 0.95rem; font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase; color: var(--plr-cream); border-bottom: 1px solid rgba(240, 230, 204, 0.07); transition: color var(--plr-ease); } .plr-mobile-menu a:hover { color: var(--plr-gold); } /* ════════════════════════════════════════════════════════════════ BUTTONS ════════════════════════════════════════════════════════════════ */ .plr-btn { display: inline-flex; align-items: center; justify-content: center; padding: 0.85rem 2rem; font-family: var(--plr-font-body); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.16em; text-transform: uppercase; border-radius: var(--plr-radius); cursor: pointer; position: relative; overflow: hidden; transition: color var(--plr-ease), background var(--plr-ease), border-color var(--plr-ease), box-shadow var(--plr-ease); } .plr-btn--primary { background: var(--plr-gold); color: var(--plr-black); border: 1px solid var(--plr-gold); } .plr-btn--primary:hover { background: var(--plr-gold-lt); border-color: var(--plr-gold-lt); color: var(--plr-black); box-shadow: 0 8px 30px rgba(201, 151, 58, 0.38); } .plr-btn--ghost { background: transparent; color: var(--plr-cream); border: 1px solid rgba(240, 230, 204, 0.32); } .plr-btn--ghost:hover { border-color: var(--plr-cream); color: var(--plr-white); } .plr-btn--large { padding: 1.05rem 2.75rem; font-size: 0.78rem; } /* Shared link style */ .plr-link { color: var(--plr-gold); text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color var(--plr-ease); font-size: 0.88rem; } .plr-link:hover { text-decoration-color: var(--plr-gold); } /* Social links */ .plr-social { display: flex; gap: 1.5rem; margin-top: 1rem; } .plr-social__link { font-size: 0.74rem; font-weight: 500; letter-spacing: 0.12em; text-transform: uppercase; color: var(--plr-cream-dim); transition: color var(--plr-ease); } .plr-social__link:hover { color: var(--plr-gold); } /* ════════════════════════════════════════════════════════════════ SCENE SYSTEM — BASE Five full-screen atmospheric rooms. Each scene is an immersive environment containing real content. ════════════════════════════════════════════════════════════════ */ .plr-scene { position: relative; width: 100%; min-height: 100svh; display: flex; align-items: center; justify-content: center; overflow: hidden; } /* Background stack — absolute, fills scene */ .plr-scene__bg { position: absolute; inset: 0; pointer-events: none; z-index: 0; } /* ── Scene background image — real room photo ───────────────── Sits behind all gradient overlay layers. background-image set per-scene below. background-color is the dark fallback when image is missing. Oversized via inset so scale + yPercent parallax never expose a bare edge within the parent overflow:hidden clip. ──────────────────────────────────────────────────────────────── */ .plr-scene__image { position: absolute; inset: -10%; background-size: cover; background-position: center center; background-repeat: no-repeat; transform-origin: center center; will-change: transform; } /* Individual atmosphere layers */ .plr-layer { position: absolute; inset: 0; pointer-events: none; } /* Vignette — edge darkening, always above other layers */ .plr-layer--vignette { background: radial-gradient(ellipse 115% 115% at 50% 50%, transparent 35%, rgba(5, 3, 2, 0.80) 100%); z-index: 5; } /* Film grain — atmospheric texture across all scenes */ .plr-scene__grain { position: absolute; inset: 0; z-index: 6; opacity: 0.038; background-image: var(--plr-grain); background-size: 256px 256px; pointer-events: none; } /* Soft cross-fade between scenes */ .plr-scene__fade-top { position: absolute; top: 0; left: 0; right: 0; height: 18vh; background: linear-gradient(to bottom, var(--plr-black), transparent); z-index: 7; pointer-events: none; } .plr-scene__fade-bottom { position: absolute; bottom: 0; left: 0; right: 0; height: 18vh; background: linear-gradient(to top, var(--plr-black), transparent); z-index: 7; pointer-events: none; } /* Content zone — above all atmosphere */ .plr-scene__content { position: relative; z-index: 10; width: 100%; max-width: 1300px; margin: 0 auto; padding: calc(var(--plr-nav-h) + 4rem) max(1.5rem, 6vw) 5rem; display: flex; flex-direction: column; gap: 2.5rem; } /* Admin bar: add its height to the content top padding */ .admin-bar .plr-scene__content { padding-top: calc(var(--plr-nav-h) + 4rem + 32px); } @media screen and (max-width: 782px) { .admin-bar .plr-scene__content { padding-top: calc(var(--plr-nav-h) + 3rem + 46px); } } .plr-scene__content--center { align-items: center; text-align: center; } /* Left layout: children constrained to left column, atmospheric right side visible */ .plr-scene__content--left { align-items: flex-start; text-align: left; } .plr-scene__content--left > * { max-width: clamp(300px, 46%, 560px); } /* Right layout: children constrained to right column, atmospheric left side visible */ .plr-scene__content--right { align-items: flex-end; text-align: left; } .plr-scene__content--right > * { max-width: clamp(300px, 46%, 560px); } /* ── Scene Header ─────────────────────────────────────────────── */ .plr-scene__header { display: flex; flex-direction: column; } /* ════════════════════════════════════════════════════════════════ TYPOGRAPHY — shared across all scenes ════════════════════════════════════════════════════════════════ */ .plr-eyebrow { font-family: var(--plr-font-body); font-size: 0.68rem; font-weight: 500; letter-spacing: 0.28em; text-transform: uppercase; color: var(--plr-gold); margin-bottom: 0.6rem; } .plr-headline { font-family: var(--plr-font-display); font-size: clamp(2.5rem, 5vw, 4.5rem); font-weight: 300; line-height: 1.07; color: var(--plr-white); letter-spacing: -0.01em; } .plr-headline--hero { font-size: clamp(3.25rem, 7.5vw, 6.5rem); } .plr-headline em { font-style: italic; color: var(--plr-gold); } .plr-subheadline { font-family: var(--plr-font-display); font-size: clamp(1.15rem, 2.2vw, 1.55rem); font-weight: 300; font-style: italic; color: var(--plr-cream-dim); letter-spacing: 0.04em; margin-top: 0.2rem; } .plr-tagline { font-family: var(--plr-font-body); font-size: clamp(0.9rem, 1.6vw, 1.05rem); font-weight: 300; color: var(--plr-cream-dim); line-height: 1.9; } .plr-body { font-size: clamp(0.9rem, 1.5vw, 1.02rem); font-weight: 300; color: var(--plr-cream-dim); line-height: 1.9; max-width: 520px; margin-top: 0.25rem; } .plr-body--center { text-align: center; margin-left: auto; margin-right: auto; } /* Decorative rule */ .plr-rule { width: 44px; height: 1px; background: linear-gradient(to right, var(--plr-gold), transparent); margin: 0.8rem 0 1.1rem; flex-shrink: 0; } .plr-rule--center { background: linear-gradient(to right, transparent, var(--plr-gold), transparent); width: 72px; margin-left: auto; margin-right: auto; } /* Italic stat line */ .plr-stat { font-family: var(--plr-font-display); font-size: 0.84rem; font-style: italic; letter-spacing: 0.05em; color: var(--plr-muted); padding-top: 1.5rem; border-top: 1px solid rgba(201, 151, 58, 0.12); } /* Pull quote */ .plr-quote { font-family: var(--plr-font-display); font-size: clamp(1.2rem, 2vw, 1.55rem); font-style: italic; font-weight: 300; color: var(--plr-gold); line-height: 1.45; letter-spacing: 0.01em; padding: 1.25rem 0 1.25rem 1.5rem; border-left: 1px solid rgba(201, 151, 58, 0.30); margin: 0; } /* ════════════════════════════════════════════════════════════════ SCENE 1 — ENTRANCE / STAIR DESCENT Cold indigo vault above. Warm amber cellar below. Sconce lights on left and right stone walls. ════════════════════════════════════════════════════════════════ */ .plr-scene--entrance { background: linear-gradient( 180deg, #07060a 0%, #0e0b08 38%, #161008 65%, #1c1409 100% ); } /* Scene 1 — real room photo + dark fallback */ .plr-scene--entrance .plr-scene__image { background-image: url('../img/scenes/scene-01-cellar-entrance.png'); background-color: #07060a; background-position: center 30%; } /* Upper vault cold + lower cellar warm glow — overlay on photo */ .plr-scene--entrance .plr-layer--base { background: radial-gradient(ellipse 75% 38% at 50% 0%, rgba(12, 8, 22, 0.48) 0%, transparent 62%), radial-gradient(ellipse 90% 32% at 50% 100%, rgba(201, 151, 58, 0.16) 0%, transparent 65%); } /* Amber wall sconces — left and right */ .plr-scene--entrance .plr-layer--sconces { background: radial-gradient(ellipse 18% 42% at 3% 48%, rgba(201, 151, 58, 0.18) 0%, transparent 70%), radial-gradient(ellipse 18% 42% at 97% 48%, rgba(201, 151, 58, 0.15) 0%, transparent 70%), radial-gradient(circle 5% at 3.5% 47%, rgba(232, 168, 74, 0.32) 0%, transparent 100%), radial-gradient(circle 5% at 96.5% 47%, rgba(232, 168, 74, 0.28) 0%, transparent 100%); } /* Warm amber rising from the cellar below the stairs */ .plr-scene--entrance .plr-layer--cellar-glow { background: radial-gradient(ellipse 60% 28% at 50% 102%, rgba(201, 151, 58, 0.22) 0%, transparent 55%), radial-gradient(ellipse 40% 18% at 50% 102%, rgba(232, 168, 74, 0.14) 0%, transparent 48%); } /* Entrance content layout */ .plr-entrance__inner { display: flex; flex-direction: column; align-items: center; gap: 0; width: 100%; } .plr-entrance__logo-wrap { margin-bottom: 2.25rem; } .plr-entrance__logo { width: clamp(130px, 18vw, 210px); height: auto; filter: drop-shadow(0 8px 52px rgba(201, 151, 58, 0.30)); } .plr-entrance__text { display: flex; flex-direction: column; align-items: center; gap: 1rem; } /* CTA row */ .plr-ctas { display: flex; gap: 1rem; flex-wrap: wrap; justify-content: center; margin-top: 0.5rem; } /* Scroll descent hint — pinned at bottom of scene 1 */ .plr-scroll-hint { position: absolute; bottom: 2.25rem; left: 50%; transform: translateX(-50%); z-index: 10; display: flex; flex-direction: column; align-items: center; gap: 0.5rem; opacity: 0.42; pointer-events: none; } .plr-scroll-hint__line { display: block; width: 1px; height: 42px; background: linear-gradient(to bottom, var(--plr-gold), transparent); animation: hintPulse 2.2s ease-in-out infinite; } .plr-scroll-hint__label { font-size: 0.60rem; letter-spacing: 0.24em; text-transform: uppercase; color: var(--plr-muted); } @keyframes hintPulse { 0%, 100% { opacity: 0.35; transform: scaleY(1); } 50% { opacity: 0.90; transform: scaleY(1.1); } } /* ════════════════════════════════════════════════════════════════ SCENE 2 — THE BOTTLE CELLAR Arched oak-and-stone vault. Warm copper ambient. Bottle shelves lining the walls. ════════════════════════════════════════════════════════════════ */ .plr-scene--cellar { background: linear-gradient( 158deg, #100c07 0%, #160f08 30%, #1c1409 55%, #140e06 100% ); } /* Scene 2 — real room photo + dark fallback */ .plr-scene--cellar .plr-scene__image { background-image: url('../img/scenes/scene-02-bottle-cellar.png'); background-color: #100c07; background-position: center center; } .plr-scene--cellar .plr-layer--base { background: radial-gradient(ellipse 90% 40% at 50% 0%, rgba(6, 4, 2, 0.52) 0%, transparent 52%), radial-gradient(ellipse 82% 50% at 50% 62%, rgba(201, 151, 58, 0.09) 0%, transparent 65%); } /* Vaulted arch shadow at ceiling — darker to suggest arched stone */ .plr-scene--cellar .plr-layer--arch { background: radial-gradient(ellipse 65% 24% at 50% -2%, rgba(8, 5, 3, 0.62) 0%, rgba(14, 9, 5, 0.42) 45%, transparent 62%); } /* Horizontal shelf glow + warm side walls */ .plr-scene--cellar .plr-layer--shelf-glow { background: linear-gradient(to right, rgba(201, 151, 58, 0.09) 0%, transparent 18%), linear-gradient(to left, rgba(201, 151, 58, 0.08) 0%, transparent 18%), linear-gradient(to bottom, transparent 20%, rgba(201, 151, 58, 0.05) 23%, transparent 26%, transparent 46%, rgba(201, 151, 58, 0.04) 49%, transparent 52%, transparent 70%, rgba(201, 151, 58, 0.03) 73%, transparent 76% ); } /* Category list */ .plr-categories { display: flex; flex-direction: column; gap: 1.4rem; } .plr-category { display: flex; align-items: flex-start; gap: 1.25rem; } .plr-category__mark { color: var(--plr-gold); font-family: var(--plr-font-display); font-size: 1.1rem; font-weight: 300; line-height: 1.4; flex-shrink: 0; margin-top: 0.12rem; } .plr-category__name { font-family: var(--plr-font-display); font-size: 1.2rem; font-weight: 400; color: var(--plr-white); margin-bottom: 0.22rem; } .plr-category__note { font-size: 0.87rem; font-weight: 300; color: var(--plr-cream-dim); line-height: 1.75; } /* ════════════════════════════════════════════════════════════════ SCENE 3 — THE LOUNGE / LIBRARY / SMOKING ROOM Dark mahogany. Reading lamp right side. Book-spine texture along the lower shelf line. ════════════════════════════════════════════════════════════════ */ .plr-scene--lounge { background: linear-gradient( 155deg, #0d0a08 0%, #15100c 35%, #1c1510 65%, #110d0a 100% ); } /* Scene 3 — real room photo + dark fallback */ .plr-scene--lounge .plr-scene__image { background-image: url('../img/scenes/scene-03-library-lounge.png'); background-color: #0d0a08; background-position: center center; } .plr-scene--lounge .plr-layer--base { background: radial-gradient(ellipse 80% 32% at 50% 0%, rgba(8, 5, 4, 0.50) 0%, transparent 58%), radial-gradient(ellipse 70% 28% at 50% 100%, rgba(100, 60, 25, 0.10) 0%, transparent 62%); } /* Reading lamp — warm concentrated light, upper-right */ .plr-scene--lounge .plr-layer--lamp { background: radial-gradient(ellipse 28% 50% at 76% 34%, rgba(201, 151, 58, 0.22) 0%, rgba(201, 151, 58, 0.07) 45%, transparent 72%), radial-gradient(circle 7% at 76% 29%, rgba(232, 168, 74, 0.40) 0%, transparent 100%), radial-gradient(ellipse 38% 25% at 76% 44%, rgba(201, 151, 58, 0.08) 0%, transparent 65%); } /* Book spines — horizontal stripe pattern at lower-third shelf */ .plr-scene--lounge .plr-layer--books { background-image: repeating-linear-gradient( to right, transparent 0px, transparent 13px, rgba(130,68,26,0.09) 13px, rgba(130,68,26,0.09) 25px, transparent 25px, transparent 42px, rgba(95, 50,18,0.08) 42px, rgba(95, 50,18,0.08) 57px, transparent 57px, transparent 70px, rgba(150,80,30,0.10) 70px, rgba(150,80,30,0.10) 84px, transparent 84px, transparent 100px, rgba(75, 40,14,0.07) 100px, rgba(75, 40,14,0.07) 115px, transparent 115px, transparent 132px, rgba(120,62,22,0.08) 132px, rgba(120,62,22,0.08) 148px, transparent 148px, transparent 165px, rgba(100,55,20,0.09) 165px, rgba(100,55,20,0.09) 178px, transparent 178px, transparent 194px ); background-position: 0 73%; background-size: 194px 19vh; background-repeat: repeat-x; opacity: 0.60; } /* Feature 2×2 grid — for Staff Picks, Gift Boxes, Tastings, Small-Batch */ .plr-features { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; width: 100%; } .plr-feature { padding: 1.25rem 1.4rem; background: rgba(10, 8, 6, 0.32); border: 1px solid rgba(201, 151, 58, 0.12); border-radius: var(--plr-radius); } .plr-feature__title { font-family: var(--plr-font-display); font-size: 1.1rem; font-weight: 400; color: var(--plr-white); margin-bottom: 0.35rem; } .plr-feature__note { font-size: 0.83rem; font-weight: 300; color: var(--plr-cream-dim); line-height: 1.75; } /* ════════════════════════════════════════════════════════════════ SCENE 4 — THE VINTAGE BAR ROOM Rich mahogany. Brass fixtures. Back-shelf bottle glow. Warm social atmosphere — refined but welcoming. ════════════════════════════════════════════════════════════════ */ .plr-scene--bar { background: linear-gradient( 150deg, #110d08 0%, #18120a 35%, #20160c 60%, #150f08 100% ); } /* Scene 4 — real room photo + dark fallback */ .plr-scene--bar .plr-scene__image { background-image: url('../img/scenes/scene-04-vintage-bar.png'); background-color: #110d08; background-position: center center; } .plr-scene--bar .plr-layer--base { background: radial-gradient(ellipse 88% 32% at 50% 0%, rgba(7, 5, 3, 0.52) 0%, transparent 55%), radial-gradient(ellipse 100% 22% at 50% 100%, rgba(150, 78, 35, 0.13) 0%, transparent 62%); } /* Brass back-shelf glow + side pillar sconces */ .plr-scene--bar .plr-layer--brass { background: radial-gradient(ellipse 68% 40% at 50% 22%, rgba(201, 151, 58, 0.14) 0%, transparent 62%), radial-gradient(ellipse 12% 78% at 1.5% 55%, rgba(201, 151, 58, 0.09) 0%, transparent 68%), radial-gradient(ellipse 12% 78% at 98.5% 55%, rgba(201, 151, 58, 0.08) 0%, transparent 68%), radial-gradient(ellipse 45% 38% at 50% 50%, rgba(201, 151, 58, 0.06) 0%, transparent 65%); } /* Back-bar bottle shelf horizontal lines */ .plr-scene--bar .plr-layer--bar-shelves { background: linear-gradient(to bottom, transparent 16%, rgba(201, 151, 58, 0.08) 18%, rgba(201, 151, 58, 0.03) 19%, transparent 21%, transparent 26%, rgba(201, 151, 58, 0.06) 28%, rgba(201, 151, 58, 0.02) 29%, transparent 31% ); } /* Bar feature grid — 2×2, centered */ .plr-bar-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; max-width: 820px; width: 100%; margin-top: 1rem; } .plr-bar-item { padding: 1.75rem 1.5rem 1.75rem 0; border-top: 1px solid rgba(201, 151, 58, 0.14); } .plr-bar-item:nth-child(odd) { border-right: 1px solid rgba(201, 151, 58, 0.10); padding-right: 1.5rem; } .plr-bar-item:nth-child(even) { padding-left: 1.5rem; padding-right: 0; } .plr-bar-item__title { font-family: var(--plr-font-display); font-size: 1.12rem; font-weight: 400; color: var(--plr-white); margin-bottom: 0.35rem; } .plr-bar-item__note { font-size: 0.85rem; font-weight: 300; color: var(--plr-cream-dim); line-height: 1.75; } /* ════════════════════════════════════════════════════════════════ SCENE 5 — FINAL BRAND / VISIT THE SHOP Darkest room. Golden halo. Strongest logo moment. The journey ends with an invitation. ════════════════════════════════════════════════════════════════ */ .plr-scene--visit { background: linear-gradient( 180deg, #0a0806 0%, #100c08 45%, #0f0b06 100% ); } /* Scene 5 — real room photo + dark fallback */ .plr-scene--visit .plr-scene__image { background-image: url('../img/scenes/scene-05-final-brand-room.png'); background-color: #0a0806; background-position: center center; } .plr-scene--visit .plr-layer--base { background: radial-gradient(ellipse 85% 35% at 50% 0%, rgba(6, 4, 2, 0.52) 0%, transparent 60%); } /* Golden halo — the signature closing light */ .plr-scene--visit .plr-layer--halo { background: radial-gradient(ellipse 55% 55% at 50% 50%, rgba(201, 151, 58, 0.11) 0%, rgba(201, 151, 58, 0.04) 50%, transparent 70%), radial-gradient(ellipse 35% 35% at 50% 44%, rgba(201, 151, 58, 0.09) 0%, transparent 55%); } /* Final brand block */ .plr-visit__brand { display: flex; flex-direction: column; align-items: center; gap: 1.1rem; margin-bottom: 2.5rem; } .plr-visit__logo { width: clamp(90px, 12vw, 145px); height: auto; filter: drop-shadow(0 8px 56px rgba(201, 151, 58, 0.28)); margin-bottom: 0.25rem; } .plr-visit__brand-name { font-family: var(--plr-font-display); font-size: 0.85rem; font-weight: 400; letter-spacing: 0.24em; text-transform: uppercase; color: var(--plr-gold); } .plr-visit__headline { font-family: var(--plr-font-display); font-size: clamp(1.85rem, 3.8vw, 3.25rem); font-weight: 300; line-height: 1.15; color: var(--plr-white); text-align: center; letter-spacing: -0.01em; } .plr-visit__headline em { font-style: italic; color: var(--plr-gold); } .plr-visit__phrase { font-family: var(--plr-font-display); font-size: 1.02rem; font-style: italic; font-weight: 300; color: var(--plr-muted); letter-spacing: 0.04em; } /* Visit info 3-column grid */ .plr-visit__info { display: grid; grid-template-columns: repeat(3, 1fr); gap: 3rem; width: 100%; max-width: 900px; padding: 2.75rem 0; border-top: 1px solid rgba(201, 151, 58, 0.12); border-bottom: 1px solid rgba(201, 151, 58, 0.12); text-align: left; margin-bottom: 2.5rem; } .plr-visit__block-title { font-family: var(--plr-font-body); font-size: 0.65rem; font-weight: 600; letter-spacing: 0.22em; text-transform: uppercase; color: var(--plr-gold); margin-bottom: 1rem; } .plr-visit__hours { display: flex; flex-direction: column; gap: 0.4rem; } .plr-visit__hours li { display: flex; justify-content: space-between; font-size: 0.84rem; font-weight: 300; color: var(--plr-cream-dim); padding-bottom: 0.4rem; border-bottom: 1px solid rgba(240, 230, 204, 0.06); } .plr-visit__note { font-size: 0.78rem; color: var(--plr-muted); margin-top: 0.75rem; line-height: 1.65; } .plr-visit__address { font-style: normal; font-size: 0.9rem; font-weight: 300; color: var(--plr-cream-dim); line-height: 1.85; margin-bottom: 0.75rem; } .plr-visit__tbd { color: var(--plr-muted); font-style: italic; font-size: 0.82rem; } .plr-visit__phone { font-size: 0.88rem; font-weight: 300; color: var(--plr-muted); font-style: italic; margin-bottom: 0.5rem; } /* Final CTA */ .plr-visit__cta { display: flex; flex-direction: column; align-items: center; gap: 1rem; } .plr-visit__cta-note { font-size: 0.78rem; color: var(--plr-muted); text-align: center; line-height: 1.65; max-width: 420px; } /* ════════════════════════════════════════════════════════════════ FOOTER ════════════════════════════════════════════════════════════════ */ .plr-footer { padding: 4rem 2rem; background-color: var(--plr-surface); border-top: 1px solid rgba(201, 151, 58, 0.10); } .plr-footer__inner { max-width: 580px; margin: 0 auto; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 0.9rem; } .plr-footer__logo { width: 48px; height: 48px; object-fit: contain; opacity: 0.70; } .plr-footer__name { font-family: var(--plr-font-display); font-size: 1rem; font-weight: 400; color: var(--plr-white); letter-spacing: 0.04em; } .plr-footer__tagline { font-size: 0.66rem; font-weight: 500; letter-spacing: 0.24em; text-transform: uppercase; color: var(--plr-gold); } .plr-footer__phrase { font-family: var(--plr-font-display); font-size: 0.9rem; font-style: italic; color: var(--plr-muted); letter-spacing: 0.04em; } .plr-footer__legal { font-size: 0.74rem; color: var(--plr-muted); line-height: 1.7; max-width: 480px; } /* ════════════════════════════════════════════════════════════════ GSAP INITIAL STATE HINTS will-change registers GPU compositing layers before JS runs. Do NOT set opacity:0 here — GSAP handles that via autoAlpha. If JS fails, all content stays visible (no hidden fallback). ════════════════════════════════════════════════════════════════ */ #s1-logo, #s1-eyebrow, #s1-headline, #s1-sub, #s1-tagline, #s1-ctas, #s1-hint, .js-reveal, .js-stagger > * { will-change: transform, opacity; } .plr-layer { will-change: transform; } .plr-scene__image { will-change: transform; } /* ════════════════════════════════════════════════════════════════ RESPONSIVE ════════════════════════════════════════════════════════════════ */ /* Tablet: switch to hamburger, full-width left/right layouts */ @media (max-width: 900px) { .plr-nav__links { display: none; } .plr-nav__hamburger { display: flex; } .plr-scene__content--left, .plr-scene__content--right { align-items: flex-start; text-align: left; } .plr-scene__content--left > *, .plr-scene__content--right > * { max-width: 100%; } .plr-bar-grid { grid-template-columns: 1fr; max-width: 100%; } .plr-bar-item { border-right: none !important; padding-right: 0 !important; padding-left: 0 !important; } .plr-visit__info { grid-template-columns: 1fr; gap: 2.25rem; text-align: left; } } /* Mobile: no parallax on image or layers (performance), layout adjustments */ @media (max-width: 768px) { /* Reduce oversize — no animation travel needed on mobile */ .plr-scene__image { inset: -3%; will-change: auto; } /* Mobile image variants: add mobile-specific crops here when available. Until then, desktop images fill the background at cover — they look fine. Do NOT add url() overrides here unless the files exist in assets/img/scenes/mobile/. */ .plr-layer { will-change: auto; } .plr-scene__content--center { text-align: center; align-items: center; } .plr-scene__content--left, .plr-scene__content--right { text-align: left; align-items: flex-start; } .plr-features { grid-template-columns: 1fr; } .plr-quote { padding-left: 1.1rem; } } /* Small mobile */ @media (max-width: 600px) { .plr-scene__content { padding-top: calc(var(--plr-nav-h) + 2.5rem); padding-bottom: 4rem; padding-left: 5vw; padding-right: 5vw; gap: 2rem; } .plr-scene__fade-top, .plr-scene__fade-bottom { height: 10vh; } .plr-ctas { flex-direction: column; align-items: center; width: 100%; } .plr-btn { width: 100%; max-width: 280px; justify-content: center; } .plr-visit__info { gap: 2rem; padding: 2rem 0; } } /* Narrow phones */ @media (max-width: 400px) { .plr-scene__content { padding-left: 4vw; padding-right: 4vw; } } /* ════════════════════════════════════════════════════════════════ REDUCED MOTION All scroll animations disabled. All content immediately visible. ════════════════════════════════════════════════════════════════ */ @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .plr-scroll-hint__line { animation: none; } /* Override any GSAP autoAlpha: 0 initial states */ #s1-logo, #s1-eyebrow, #s1-headline, #s1-sub, #s1-tagline, #s1-ctas, #s1-hint, .js-reveal, .js-stagger > *, .plr-nav { opacity: 1 !important; visibility: visible !important; transform: none !important; } /* No parallax transforms on background layers or scene images */ .plr-layer, .plr-scene__image { transform: none !important; will-change: auto !important; } }