:root{ --title: "Cormorant SC", Georgia, serif; --sans: "Inter", system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif; --script:"Great Vibes", cursive; --white: rgba(255,255,255,.96); --gold: #d8b26a; --ease: cubic-bezier(.2,.8,.2,1); --revealDur: .85s; --max: 1180px; --heroPar: 0px; --storyPar: 0px; /* set by PHP inline style on */ --hero-bg: none; --story-bg: none; } *{ box-sizing:border-box; } html,body{ height:100%; margin:0; } body{ background:#050607; color: var(--white); font-family: var(--sans); overflow-x:hidden; } html{ scroll-behavior:smooth; scroll-snap-type: y mandatory; overscroll-behavior-y: none; } .hero, .story{ scroll-snap-align: start; scroll-snap-stop: always; } .grain{ position:fixed; inset:0; z-index:9999; pointer-events:none; opacity:.06; mix-blend-mode: overlay; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='260' height='260'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='260' height='260' filter='url(%23n)' opacity='.55'/%3E%3C/svg%3E"); background-size:260px 260px; animation: grainMove 6s steps(6) infinite; } @keyframes grainMove{ 0%{ transform:translate3d(0,0,0); } 20%{ transform:translate3d(-1%,1%,0); } 40%{ transform:translate3d(2%,-1%,0); } 60%{ transform:translate3d(-2%,-2%,0); } 80%{ transform:translate3d(1%,2%,0); } 100%{ transform:translate3d(0,0,0); } } .hero, .story{ position:relative; min-height: 100vh; min-height: 100svh; overflow:hidden; isolation:isolate; } .hero{ display:grid; place-items:center; } .heroBg{ position:absolute; inset:0; z-index:0; background: var(--hero-bg) center/cover no-repeat; transform: translate3d(0,var(--heroPar),0) scale(1.09); filter: saturate(1.06) contrast(1.04) brightness(1.02) sepia(.05); animation: slowZoomHero 26s ease-in-out infinite alternate; will-change: transform; } @keyframes slowZoomHero{ from{ transform: translate3d(0,var(--heroPar),0) scale(1.09); } to { transform: translate3d(0,var(--heroPar),0) scale(1.15); } } .heroOverlay{ position:absolute; inset:0; z-index:1; pointer-events:none; background: radial-gradient(1200px 720px at 50% 14%, rgba(0,0,0,.06), transparent 62%), radial-gradient(900px 520px at 50% 55%, rgba(0,0,0,.18), transparent 70%), linear-gradient(180deg, rgba(6,7,8,.08) 0%, rgba(6,7,8,.26) 52%, rgba(6,7,8,.56) 82%, rgba(6,7,8,.78) 100%); } .heroTransition{ position:absolute; left:0; right:0; bottom:0; height: 18vh; z-index:2; pointer-events:none; background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,.22) 40%, rgba(0,0,0,.62) 100%); } .wrap{ position:relative; width:min(var(--max),92vw); margin:0 auto; padding:58px 0 48px; z-index:3; text-align:center; } /* Top-right language selector */ .langBar{ position:fixed; top:calc(16px + env(safe-area-inset-top)); right:calc(16px + env(safe-area-inset-right)); z-index:10000; user-select:none; opacity:.92; transform: translateY(0); transition: opacity .35s var(--ease), transform .35s var(--ease); } .langBar.is-hidden{ opacity:0; transform: translateY(-6px); pointer-events:none; } .langPill{ display:inline-flex; align-items:center; gap:8px; padding:8px 10px; border-radius:999px; background: rgba(10,12,14,.22); border: 1px solid rgba(255,255,255,.10); box-shadow: 0 18px 60px rgba(0,0,0,.32), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(18px) saturate(155%); -webkit-backdrop-filter: blur(18px) saturate(155%); } .langLink{ width:34px; height:28px; border-radius:999px; display:inline-flex; align-items:center; justify-content:center; text-decoration:none; border:1px solid transparent; background: transparent; transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease); } .langLink:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06); } .langLink.isActive{ border-color: rgba(216,178,106,.45); background: rgba(216,178,106,.08); box-shadow: 0 8px 22px rgba(0,0,0,.25); } .flagSvg{ width:18px; height:18px; display:block; filter: saturate(.98) contrast(1.03); } .ciBadge{ font-family: var(--title); font-weight: 700; letter-spacing: .18em; font-size: 12px; color: rgba(255,255,255,.92); padding-left: 1px; text-shadow: 0 10px 26px rgba(0,0,0,.35); } /* Top-left: Premium hamburger button */ .menuBtnWrap{ position:fixed; top:calc(16px + env(safe-area-inset-top)); left:calc(16px + env(safe-area-inset-left)); z-index:10002; user-select:none; opacity:.92; transform: translateY(0); transition: opacity .35s var(--ease), transform .35s var(--ease); } .menuBtnWrap.is-hidden{ opacity:0; transform: translateY(-6px); pointer-events:none; } .hamburgerBtn{ width:44px; height:44px; display:inline-flex; align-items:center; justify-content:center; border-radius: 999px; border:1px solid rgba(255,255,255,.12); background: rgba(10,12,14,.22); color: rgba(255,255,255,.92); cursor:pointer; box-shadow: 0 18px 60px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06); backdrop-filter: blur(18px) saturate(155%); -webkit-backdrop-filter: blur(18px) saturate(155%); transition: transform .18s var(--ease), background .18s var(--ease), border-color .18s var(--ease); padding:0; } .hamburgerBtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.06); border-color: rgba(216,178,106,.30); } .burger{ width:18px; height:12px; display:flex; flex-direction:column; justify-content:space-between; } .burger i{ display:block; height:2px; border-radius: 99px; background: rgba(255,255,255,.92); box-shadow: 0 10px 26px rgba(0,0,0,.18); opacity: .92; } .hamburgerBtn:focus-visible{ outline: none; box-shadow: 0 18px 60px rgba(0,0,0,.30), inset 0 1px 0 rgba(255,255,255,.06), 0 0 0 4px rgba(216,178,106,.16); border-color: rgba(216,178,106,.34); } /* ===== LUXURY DRAWER ===== */ .drawerOverlay{ position:fixed; inset:0; z-index:18000; display:none; background: rgba(2,6,23,.58); backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px); } .drawerOverlay.is-open{ display:block; } .drawer{ position:fixed; top:0; left:0; bottom:0; width:min(420px, 86vw); z-index:18001; transform: translate3d(-102%,0,0); transition: transform .38s var(--ease); border-right:1px solid rgba(255,255,255,.12); background: radial-gradient(1000px 560px at 20% 0%, rgba(255,255,255,.10), transparent 56%), linear-gradient(180deg, rgba(10,12,14,.76), rgba(10,12,14,.42)); box-shadow: 20px 0 80px rgba(0,0,0,.50); backdrop-filter: blur(18px) saturate(155%); -webkit-backdrop-filter: blur(18px) saturate(155%); padding: calc(14px + env(safe-area-inset-top)) 14px calc(14px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left)); display:flex; flex-direction:column; gap:12px; } .drawer.is-open{ transform:none; } .drawerHead{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding: 8px 6px 10px; } .drawerTitle{ display:flex; align-items:center; gap:10px; min-width:0; } .drawerTitle strong{ font-family: var(--title); letter-spacing:.20em; text-transform:uppercase; font-size: 13px; color: rgba(255,255,255,.92); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } .drawerClose{ height:40px; min-width:40px; padding:0 12px; border-radius: 14px; border:1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color:#fff; cursor:pointer; font-weight:700; transition: transform .15s var(--ease), background .15s var(--ease); } .drawerClose:hover{ transform: translateY(-1px); background: rgba(255,255,255,.14); } .drawerSection{ margin-top: 2px; padding: 0 6px; display:flex; flex-direction:column; gap:10px; min-height:0; } .drawerLabel{ font-size: 11px; letter-spacing:.26em; text-transform:uppercase; color: rgba(216,178,106,.86); padding: 10px 6px 4px; } .drawerList{ display:flex; flex-direction:column; gap:10px; overflow:auto; padding-right: 6px; -webkit-overflow-scrolling: touch; border-top: 1px solid rgba(255,255,255,.08); padding-top: 12px; } .drawerItem{ display:flex; align-items:center; gap:12px; padding: 12px 12px; border-radius: 18px; border:1px solid rgba(255,255,255,.12); background: rgba(255,255,255,.06); text-decoration:none; color: rgba(255,255,255,.92); transition: transform .16s var(--ease), background .16s var(--ease), border-color .16s var(--ease); } .drawerItem:hover{ transform: translateY(-1px); background: rgba(255,255,255,.10); border-color: rgba(216,178,106,.28); } /* Updated to cover "moved from inline" requirements */ .drawerIcon{ width:36px; height:36px; flex:0 0 36px; display:grid; place-items:center; border-radius:12px; /* keep your premium look */ background: radial-gradient(circle at 30% 20%, rgba(255,255,255,.20), rgba(255,255,255,.06)); border: 1px solid rgba(255,255,255,.12); box-shadow: inset 0 1px 0 rgba(255,255,255,.10), inset 0 0 0 1px rgba(255,255,255,.08); color: rgba(255,255,255,.92); font-weight: 900; } /* NEW: moved from inline */ .drawerLogo{ width:26px; height:26px; object-fit:contain; display:block; filter: drop-shadow(0 2px 6px rgba(0,0,0,.35)); } .drawerText{ display:flex; flex-direction:column; justify-content:center; min-height:36px; min-width:0; gap:2px; } .drawerText span{ font-weight: 650; font-size: 14px; line-height: 1.2; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; } /* Force hide (moved from inline) */ .drawerHint{ display:none !important; } .brandWrap{ display:inline-block; padding:8px 14px; border-radius:999px; background: radial-gradient(ellipse at center, rgba(0,0,0,.24), rgba(0,0,0,0) 70%); } .brandTop{ font-size:12px; letter-spacing:.32em; text-transform:uppercase; color:rgba(255,255,255,.985); text-shadow: 0 1px 2px rgba(0,0,0,.45), 0 14px 38px rgba(0,0,0,.32); } .brandSub{ font-size:11px; letter-spacing:.34em; text-transform:uppercase; color:rgba(255,255,255,.96); margin-top:4px; text-shadow: 0 1px 2px rgba(0,0,0,.42), 0 14px 34px rgba(0,0,0,.30); } .title{ margin:24px auto 0; font-family:var(--title); font-weight:500; font-size:clamp(56px,7.5vw,112px); letter-spacing:.20em; text-transform:uppercase; line-height:1.02; color:var(--white); text-shadow:0 18px 60px rgba(0,0,0,.34); } .hairline{ width:540px; max-width:86vw; height:1px; margin:18px auto; background:linear-gradient(90deg,transparent,rgba(216,178,106,.78),transparent); } .tagline{ max-width:76ch; margin:0 auto; font-size:15px; line-height:1.65; color:rgba(255,255,255,.86); } .scriptLine{ margin-top:18px; font-family:var(--script); font-size:clamp(30px,4vw,54px); color:rgba(255,255,255,.92); text-shadow:0 18px 60px rgba(0,0,0,.32); } .actions{ margin-top:26px; display:flex; justify-content:center; gap:12px; flex-wrap:wrap; } .btn{ border:1px solid rgba(255,255,255,.18); background:rgba(0,0,0,.16); color:#fff; padding:11px 18px; border-radius:999px; font-size:13px; font-weight:600; text-decoration:none; transition:transform .2s var(--ease), background .2s var(--ease); will-change: transform; } .btn:hover{ background:rgba(0,0,0,.28); transform: translateY(-1px); } .btnPrimary{ background:linear-gradient(135deg,rgba(122,31,43,.95),rgba(216,178,106,.85)); border-color:rgba(216,178,106,.35); } .scrollCue{ margin-top:28px; font-size:11px; letter-spacing:.26em; text-transform:uppercase; color:rgba(255,255,255,.70); } /* ===== MODALS (shared) ===== */ .modal{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:20000; background: rgba(2,6,23,.86); padding: calc(14px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left)); } .modal.is-open{ display:flex; } .modalPanel{ width:min(980px, 96vw); max-height: min(84svh, 860px); border-radius: 26px; overflow:hidden; border:1px solid rgba(255,255,255,.14); background: radial-gradient(1200px 520px at 20% 0%, rgba(255,255,255,.10), transparent 56%), linear-gradient(180deg, rgba(10,12,14,.72), rgba(10,12,14,.38)); box-shadow: 0 30px 110px rgba(0,0,0,.55); backdrop-filter: blur(18px) saturate(155%); -webkit-backdrop-filter: blur(18px) saturate(155%); position:relative; } .modalHead{ position: sticky; top: 0; z-index: 5; padding:12px 14px; display:flex; align-items:center; justify-content:space-between; gap:10px; border-bottom: 1px solid rgba(255,255,255,.10); background: linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,.10)); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); } .modalTitle{ display:flex; flex-direction:column; gap:2px; min-width:0; text-align:left; } .modalTitle strong{ font-family: var(--title); letter-spacing:.16em; text-transform:uppercase; font-weight:600; font-size: 13px; color: rgba(255,255,255,.92); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 62vw; } .modalTitle small{ color: rgba(255,255,255,.66); font-size: 12px; letter-spacing: .06em; } .modalActions{ display:flex; gap:10px; align-items:center; flex-wrap:wrap; justify-content:flex-end; } .readerToggle{ display:inline-flex; align-items:center; gap:10px; padding: 10px 12px; border-radius: 999px; border: 1px solid rgba(255,255,255,.16); background: rgba(0,0,0,.18); color: rgba(255,255,255,.90); cursor:pointer; font-weight:650; transition: transform .15s var(--ease), background .15s var(--ease); user-select:none; font-size: 13px; white-space:nowrap; } .readerToggle:hover{ transform: translateY(-1px); background: rgba(0,0,0,.26); } .toggleDot{ width:10px; height:10px; border-radius:999px; background: rgba(255,255,255,.28); box-shadow: inset 0 1px 0 rgba(255,255,255,.12); } .readerToggle.is-on .toggleDot{ background: rgba(216,178,106,.82); box-shadow: 0 0 0 4px rgba(216,178,106,.14); } .iconBtn{ height:40px; min-width:40px; padding:0 12px; border-radius: 14px; border:1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color:#fff; cursor:pointer; font-weight:650; transition: transform .15s var(--ease), background .15s var(--ease); } .iconBtn:hover{ transform: translateY(-1px); background: rgba(255,255,255,.14); } .modalBody{ padding: 14px 14px 18px; overflow:auto; max-height: calc(min(84svh, 860px) - 64px); -webkit-overflow-scrolling: touch; } .dedicaScript{ font-family: var(--script); font-size: clamp(24px, 3.2vw, 46px); line-height: 1.62; color: rgba(255,255,255,.92); text-shadow: 0 16px 60px rgba(0,0,0,.40); letter-spacing:.02em; text-align:center; padding: 8px 6px 16px; } .dedicaReadable{ font-family: var(--sans); font-size: 16px; line-height: 1.78; color: rgba(255,255,255,.92); text-shadow: none; letter-spacing: 0; font-weight: 450; text-align:left; padding: 2px 4px 10px; white-space: pre-wrap; } /* ===== Gallery modal (premium cards) ===== */ .galleryPanel{ opacity:0; transform: translateY(10px) scale(.99); } @keyframes softIn { from{opacity:0;transform:translateY(8px) scale(.985);} to{opacity:1;transform:translateY(0) scale(1);} } .modal.is-open .galleryPanel{ animation: softIn .35s var(--ease) forwards; } .gGrid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap:16px; padding: 10px 4px 2px; } .gItem{ opacity:0; transform: translateY(10px) scale(.99); border-radius: 22px; border: 1px solid rgba(255,255,255,.12); background: linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.05)); box-shadow: 0 26px 90px rgba(0,0,0,.30); overflow:hidden; cursor:pointer; transition: transform .18s var(--ease), border-color .18s var(--ease), background .18s var(--ease); outline:none; } @keyframes tileIn { from{opacity:0;transform:translateY(10px) scale(.985);} to{opacity:1;transform:translateY(0) scale(1);} } .gItem.is-in{ animation: tileIn .45s var(--ease) forwards; } .gItem:hover{ transform: translateY(-2px); border-color: rgba(216,178,106,.32); background: linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.06)); } .gItem:focus-visible{ outline:none; box-shadow: 0 26px 90px rgba(0,0,0,.30), 0 0 0 4px rgba(216,178,106,.16); border-color: rgba(216,178,106,.36); } .gThumb{ position:relative; border-radius: 22px 22px 14px 14px; overflow:hidden; border-bottom: 1px solid rgba(255,255,255,.10); background: rgba(0,0,0,.22); } .gImg{ width:100%; height: 170px; object-fit: cover; display:block; transform: scale(1.02); filter: saturate(1.02) contrast(1.03); } .gInfo{ display:flex; align-items:center; justify-content:space-between; gap:12px; padding: 12px 14px 14px; } .gCaption{ font-size: 12px; font-weight: 800; letter-spacing: .12em; text-transform: uppercase; color: rgba(255,255,255,.88); white-space: nowrap; overflow:hidden; text-overflow: ellipsis; } .gOpen{ padding: 8px 12px; border-radius: 999px; border: 1px solid rgba(216,178,106,.30); background: rgba(216,178,106,.10); color: rgba(255,255,255,.92); font-size: 11px; font-weight: 900; letter-spacing: .18em; text-transform: uppercase; box-shadow: 0 14px 36px rgba(0,0,0,.25); transition: opacity .18s var(--ease), transform .18s var(--ease); user-select:none; } /* Desktop: button only on hover (ultra-clean) */ @media (hover:hover) and (pointer:fine){ .gOpen{ opacity:0; transform: translateY(1px); } .gItem:hover .gOpen, .gItem:focus-within .gOpen{ opacity:1; transform:none; } } /* Mobile: always visible */ @media (hover:none), (pointer:coarse){ .gOpen{ opacity:1; transform:none; } } .emptyNote{ border-radius: 18px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.18); padding: 14px; color: rgba(255,255,255,.80); letter-spacing:.02em; } /* ===== Contact modal form ===== */ .notice{ border-radius: 18px; border:1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.18); padding: 12px 14px; margin: 0 0 12px; font-weight: 650; letter-spacing: .02em; } .notice.ok{ border-color: rgba(216,178,106,.35); background: rgba(216,178,106,.10); } .notice.err{ border-color: rgba(255,255,255,.18); background: rgba(255,255,255,.06); } .contactForm{ display:flex; flex-direction:column; gap:12px; } .fLabel{ display:flex; flex-direction:column; gap:8px; color: rgba(255,255,255,.86); font-size: 12px; letter-spacing: .10em; text-transform: uppercase; } .fInput, .fTextarea{ width:100%; border-radius: 16px; border: 1px solid rgba(255,255,255,.14); background: rgba(0,0,0,.18); color: rgba(255,255,255,.92); padding: 12px 12px; font-size: 14px; letter-spacing: normal; text-transform: none; outline: none; transition: border-color .18s var(--ease), box-shadow .18s var(--ease), background .18s var(--ease); } .fTextarea{ resize: vertical; min-height: 140px; } .fInput:focus, .fTextarea:focus{ border-color: rgba(216,178,106,.34); box-shadow: 0 0 0 4px rgba(216,178,106,.14); background: rgba(0,0,0,.22); } .fActions{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; margin-top: 6px; } .mailLink{ color: rgba(216,178,106,.92); text-decoration: none; font-weight: 800; letter-spacing: .04em; } .mailLink:hover{ text-decoration: underline; } .hp{ display:none; } /* ===== Lightbox ===== */ .lightbox{ position:fixed; inset:0; display:none; align-items:center; justify-content:center; z-index:21000; background: rgba(2,6,23,.92); padding: calc(14px + env(safe-area-inset-top)) calc(14px + env(safe-area-inset-right)) calc(14px + env(safe-area-inset-bottom)) calc(14px + env(safe-area-inset-left)); } .lightbox.is-open{ display:flex; } .lbPanel{ width: min(1100px, 96vw); max-height: min(86svh, 900px); border-radius: 26px; overflow:hidden; border:1px solid rgba(255,255,255,.14); background: radial-gradient(1200px 520px at 20% 0%, rgba(255,255,255,.10), transparent 56%), linear-gradient(180deg, rgba(10,12,14,.76), rgba(10,12,14,.42)); box-shadow: 0 30px 110px rgba(0,0,0,.60); backdrop-filter: blur(18px) saturate(155%); -webkit-backdrop-filter: blur(18px) saturate(155%); position:relative; opacity:0; transform: translateY(8px) scale(.99); } .lightbox.is-open .lbPanel{ animation: softIn .28s var(--ease) forwards; } .lbTop{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border-bottom: 1px solid rgba(255,255,255,.10); background: linear-gradient(180deg, rgba(0,0,0,.26), rgba(0,0,0,.10)); backdrop-filter: blur(16px) saturate(140%); -webkit-backdrop-filter: blur(16px) saturate(140%); } .lbCaption{ font-family: var(--title); letter-spacing:.14em; text-transform:uppercase; font-weight:600; font-size: 13px; color: rgba(255,255,255,.92); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; max-width: 62vw; } .lbNav{ height:40px; min-width:40px; padding:0 12px; border-radius: 14px; border:1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color:#fff; cursor:pointer; font-weight:800; transition: transform .15s var(--ease), background .15s var(--ease); user-select:none; } .lbNav:hover{ transform: translateY(-1px); background: rgba(255,255,255,.14); } .lbNavGroup{ display:flex; gap:10px; align-items:center; transition: opacity .18s var(--ease); } /* Desktop: show nav only on hover (ultra-clean) */ @media (hover:hover) and (pointer:fine){ .lbNavGroup{ opacity:0; pointer-events:none; } .lbPanel:hover .lbNavGroup{ opacity:1; pointer-events:auto; } .lbNavGroup:focus-within{ opacity:1; pointer-events:auto; } } /* Mobile: always visible */ @media (hover:none), (pointer:coarse){ .lbNavGroup{ opacity:1; pointer-events:auto; } } .lbClose{ height:40px; min-width:40px; padding:0 12px; border-radius: 14px; border:1px solid rgba(255,255,255,.16); background: rgba(255,255,255,.08); color:#fff; cursor:pointer; font-weight:650; transition: transform .15s var(--ease), background .15s var(--ease); } .lbClose:hover{ transform: translateY(-1px); background: rgba(255,255,255,.14); } .lbBody{ padding: 12px; display:flex; align-items:center; justify-content:center; max-height: calc(min(86svh, 900px) - 64px); } .lbImg{ width: 100%; height: auto; max-height: calc(min(86svh, 900px) - 88px); object-fit: contain; border-radius: 18px; border: 1px solid rgba(255,255,255,.12); background: rgba(0,0,0,.18); box-shadow: 0 26px 90px rgba(0,0,0,.35); } /* Story section */ .story{ display:block; background:#050607; } .storyBg{ position:absolute; inset:0; z-index:0; background: var(--story-bg) center/cover no-repeat; transform: translate3d(0,var(--storyPar),0) scale(1.09); filter: saturate(1.05) contrast(1.03) brightness(.98) sepia(.10); animation: slowZoomStory 30s ease-in-out infinite alternate; will-change: transform; } @keyframes slowZoomStory{ from{ transform: translate3d(0,var(--storyPar),0) scale(1.09); } to { transform: translate3d(0,var(--storyPar),0) scale(1.15); } } .storyTransition{ position:absolute; left:0; right:0; top:0; height: 18vh; z-index:1; pointer-events:none; background: linear-gradient(180deg, rgba(0,0,0,.70) 0%, rgba(0,0,0,.28) 55%, rgba(0,0,0,0) 100%); } .storyOverlay{ position:absolute; inset:0; z-index:1; pointer-events:none; background: radial-gradient(1200px 700px at 50% 10%, rgba(0,0,0,.12), transparent 64%), linear-gradient(0deg, rgba(6,7,8,.82) 0%, rgba(6,7,8,.58) 44%, rgba(6,7,8,.26) 72%, rgba(6,7,8,0) 100%); } .chapter{ position:relative; z-index:3; text-align:center; padding: 26px 0 10px; } .chapter .label{ display:inline-flex; align-items:center; gap:14px; font-size:12px; letter-spacing:.38em; text-transform:uppercase; color:rgba(255,255,255,.96); text-shadow: 0 2px 8px rgba(0,0,0,.55), 0 18px 50px rgba(0,0,0,.45); } .chapter .dot{ width:7px; height:7px; border-radius:50%; background: radial-gradient(circle at 30% 30%, #f3d99a, #caa24a); box-shadow: 0 0 0 4px rgba(216,178,106,.18), 0 6px 18px rgba(0,0,0,.45); } .chapter .rule{ height:1px; width:min(560px,86vw); margin:14px auto 0; background: linear-gradient(90deg, transparent, rgba(216,178,106,.95), transparent); box-shadow: 0 10px 35px rgba(0,0,0,.45); opacity:1; } .storyWrap{ position:relative; z-index:3; width:min(var(--max),92vw); margin: 0 auto; padding: 18px 0 40px; display:flex; flex-direction:column; gap:26px; } .panel{ max-width:860px; padding:30px 32px; border-radius:20px; background: linear-gradient(180deg, rgba(255,255,255,.14), rgba(255,255,255,.10)); border:1px solid rgba(255,255,255,.14); box-shadow: 0 26px 90px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,255,255,.10); backdrop-filter: blur(18px) saturate(150%); -webkit-backdrop-filter: blur(18px) saturate(150%); opacity:0; transform:translateY(14px); transition: opacity var(--revealDur) var(--ease), transform var(--revealDur) var(--ease); will-change: opacity, transform; } .panel.left{ margin-right:auto; } .panel.right{ margin-left:auto; } .panel.is-visible{ opacity:1; transform:none; } .mini{ font-size:11px; letter-spacing:.22em; text-transform:uppercase; color:rgba(216,178,106,.88); margin-bottom:8px; } .h2{ font-family:var(--title); font-size:30px; font-weight:500; margin:0 0 10px; } .titleRule{ width:64px; height:1px; background:linear-gradient(90deg,rgba(216,178,106,.95),transparent); margin-bottom:14px; opacity:.95; } .p{ font-size:15px; line-height:1.72; color:rgba(255,255,255,.82); margin:0; } /* lock scroll when modal/drawer open */ body.is-locked{ overflow:hidden; } /* Reduced motion */ @media (prefers-reduced-motion: reduce){ html{ scroll-snap-type: none; } .heroBg,.storyBg{ animation:none; transform:scale(1.09); } .panel{ opacity:1; transform:none; transition:none; } .grain{ display:none; } .langBar, .menuBtnWrap, .drawer, .drawerOverlay{ transition:none; } .galleryPanel, .lbPanel, .gItem{ opacity:1; transform:none; animation:none !important; } } /* Small devices */ @media (max-width:700px){ .title{ letter-spacing:.16em; } .panel{ padding:20px 18px; } .h2{ font-size:26px; } .langBar{ right:calc(12px + env(safe-area-inset-right)); top:calc(12px + env(safe-area-inset-top)); } .menuBtnWrap{ left:calc(12px + env(safe-area-inset-left)); top:calc(12px + env(safe-area-inset-top)); } .langPill{ padding:7px 9px; gap:7px; } .langLink{ width:32px; height:26px; } .flagSvg{ width:17px; height:17px; } .hamburgerBtn{ width:42px; height:42px; } .burger{ width:17px; height:11px; } .modalPanel{ border-radius: 20px; width: 100%; max-height: 88svh; } .modalBody{ padding: 12px 12px 16px; max-height: calc(88svh - 60px); } .modalTitle strong{ font-size: 12px; max-width: 56vw; } .readerToggle{ padding: 9px 10px; font-size: 12px; gap:8px; } .iconBtn{ height:38px; min-width:38px; border-radius: 12px; padding:0 10px; } .dedicaScript{ font-size: clamp(22px, 7vw, 34px); line-height: 1.72; text-align: left; padding: 6px 2px 10px; } .dedicaReadable{ font-size: 15px; line-height: 1.78; } .gGrid{ grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap:12px; } .gImg{ height: 160px; } } /* ========================================= CONTACT MODAL: less transparent (better readability) ========================================= */ /* Backdrop: a little dim so text pops, still premium */ #contactModal.modal.is-open{ background: rgba(2,6,23,.32) !important; /* increase from ~.06 */ } /* Panel: darker glass tint */ #contactModal .modalPanel{ background: radial-gradient(1200px 520px at 20% 0%, rgba(255,255,255,.10), transparent 56%), linear-gradient(180deg, rgba(10,12,14,.58), rgba(10,12,14,.28)) !important; border: 1px solid rgba(255,255,255,.16) !important; box-shadow: 0 30px 110px rgba(0,0,0,.55) !important; backdrop-filter: blur(18px) saturate(155%) !important; -webkit-backdrop-filter: blur(18px) saturate(155%) !important; } /* Header bar inside the modal: slightly stronger */ #contactModal .modalHead{ background: linear-gradient(180deg, rgba(0,0,0,.38), rgba(0,0,0,.16)) !important; border-bottom: 1px solid rgba(255,255,255,.12) !important; } /* Inputs: more solid so you can read while typing */ #contactModal .fInput, #contactModal .fTextarea{ background: rgba(0,0,0,.26) !important; border: 1px solid rgba(255,255,255,.16) !important; } /* Placeholder a bit brighter */ #contactModal .fInput::placeholder, #contactModal .fTextarea::placeholder{ color: rgba(255,255,255,.62) !important; } /* ========================================================= GALLERY MODAL: make page background more visible (less dark) ========================================================= */ /* 1) Reduce the dark dimmer behind the gallery */ #galleryModal.modal.is-open{ background: rgba(2,6,23,.22) !important; /* was .86 on .modal */ backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* 2) Make the gallery panel true "ultra glass" */ #galleryModal .modalPanel.galleryPanel{ background: radial-gradient(1200px 520px at 20% 0%, rgba(255,255,255,.14), transparent 56%), linear-gradient(180deg, rgba(10,12,14,.42), rgba(10,12,14,.14)) !important; border: 1px solid rgba(255,255,255,.16) !important; box-shadow: 0 30px 110px rgba(0,0,0,.38) !important; backdrop-filter: blur(22px) saturate(175%) !important; -webkit-backdrop-filter: blur(22px) saturate(175%) !important; } /* 3) Lighten the always-on page overlays WHILE gallery is open (uses your existing body.is-locked class) */ body.is-locked #galleryModal.is-open ~ * .heroOverlay, body.is-locked #galleryModal.is-open ~ * .storyOverlay{ opacity: .22 !important; }