/* ============================================================ Violin & DJ Show — shared stylesheet (all pages) Premium dark + champagne gold, editorial serif display. Per-page accent tints via body theme classes: t-beach / t-hotel / t-rest ============================================================ */ :root{ --bg:#0d0a10; --bg2:#120e15; --card:#18121a; --line:#2b2231; --gold:#c9a24b; --gold2:#e9d296; --cream:#f5eee1; --text:#ece2d4; --muted:#a2978b; --serif:'Cormorant Garamond',Georgia,'Times New Roman',serif; --sans:'Manrope','Segoe UI',system-ui,-apple-system,Arial,sans-serif; --nav-h:76px; /* accent tint (page glow + media placeholder gradient) */ --tint:rgba(201,162,75,.17); --mg1:#251b10; --mg2:#130d13; } body.t-beach{--tint:rgba(230,122,80,.16); --mg1:#2c1710; --mg2:#130d13} body.t-hotel{--tint:rgba(110,150,195,.15); --mg1:#152130; --mg2:#0f0d14} body.t-rest {--tint:rgba(182,86,102,.16); --mg1:#2a1219; --mg2:#130d13} *{margin:0;padding:0;box-sizing:border-box} html{scroll-behavior:smooth} body{background:var(--bg);color:var(--text);font-family:var(--sans);line-height:1.65;overflow-x:hidden} a{color:inherit;text-decoration:none} img,video{max-width:100%;display:block} .wrap{max-width:1140px;margin:0 auto;padding:0 26px} h1,h2,h3{font-family:var(--serif);font-weight:500;letter-spacing:.3px;line-height:1.08} h1 em,h2 em{font-style:italic;color:var(--gold2)} section{padding:96px 0} section.tight{padding-top:28px} .kick{font-family:var(--sans);text-transform:uppercase;letter-spacing:4px;font-size:11px;color:var(--gold);margin-bottom:16px;font-weight:600} .line{width:56px;height:1px;background:var(--gold);margin:0 0 22px} h2.t{font-size:clamp(30px,4.5vw,48px)} .sub{color:var(--muted);font-size:16px;margin:16px 0 44px;max-width:560px;line-height:1.75} .center{text-align:center;max-width:640px;margin:0 auto 44px} .center .sub{margin-left:auto;margin-right:auto} .note{font-size:12.5px;color:var(--muted);letter-spacing:.4px} /* reveal on scroll (JS adds .js to ; without JS everything stays visible) */ .js .reveal{opacity:0;transform:translateY(24px);transition:opacity .9s ease,transform .9s ease} .js .reveal.in{opacity:1;transform:none} /* ---------- buttons ---------- */ .btn{display:inline-block;border:1px solid var(--gold);color:var(--gold2);background:none; padding:13px 26px;border-radius:2px;font-size:12px;letter-spacing:2px;text-transform:uppercase; cursor:pointer;transition:.25s;font-family:var(--sans);font-weight:600;text-align:center;white-space:nowrap} .btn:hover{background:var(--gold);color:#151016} .btn.solid{background:var(--gold);color:#151016} .btn.solid:hover{background:var(--gold2);border-color:var(--gold2)} .btn.ghost{border-color:var(--line);color:var(--muted)} .btn.ghost:hover{border-color:var(--gold);color:var(--gold2);background:none} /* ---------- header / nav ---------- */ header{position:sticky;top:0;z-index:60;background:rgba(13,10,16,.82);backdrop-filter:blur(12px);border-bottom:1px solid var(--line)} .nav{display:flex;align-items:center;justify-content:space-between;height:var(--nav-h);gap:18px} .logo{font-family:var(--serif);font-size:21px;letter-spacing:2px;white-space:nowrap} .logo em{font-style:italic;color:var(--gold2)} .nav-links{display:flex;gap:18px;font-size:12px;letter-spacing:1px;text-transform:uppercase;color:var(--muted)} .nav-links a{padding:6px 0;border-bottom:1px solid transparent;transition:.2s;white-space:nowrap} .nav-links a:hover{color:var(--cream)} .nav-links a.active{color:var(--gold2);border-bottom-color:var(--gold)} .nav-actions{display:flex;align-items:center;gap:12px} .lang{background:none;border:1px solid var(--line);color:var(--muted);border-radius:2px;padding:8px 12px; font-size:11px;letter-spacing:1.5px;font-weight:700;cursor:pointer;font-family:var(--sans);transition:.2s} .lang:hover{border-color:var(--gold);color:var(--gold2)} .burger{display:none;background:none;border:none;color:var(--cream);font-size:24px;cursor:pointer;line-height:1;padding:4px} .mobile-menu{position:fixed;top:var(--nav-h);left:0;right:0;z-index:59;background:rgba(13,10,16,.97); border-bottom:1px solid var(--line);padding:8px 26px 24px;display:none;flex-direction:column} body.menu-open .mobile-menu{display:flex} .mobile-menu a{padding:14px 0;border-bottom:1px solid var(--line);font-size:13px;letter-spacing:2px;text-transform:uppercase;color:var(--cream)} .mobile-menu a:last-of-type{border-bottom:none} .mobile-menu .btn{margin-top:14px} /* six nav items need a little more room before the burger takes over */ @media(max-width:1240px){.nav-links{gap:13px;font-size:11.5px}} @media(max-width:1100px){ .nav-links{display:none} .nav-actions .btn{display:none} .burger{display:block} } /* ---------- home hero ---------- */ .hero{padding:0;min-height:calc(100vh - var(--nav-h));display:flex;align-items:center;position:relative;overflow:hidden; background:linear-gradient(180deg,#1a1220,var(--bg) 72%)} .hero::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(58% 75% at 80% 22%,var(--tint),transparent 62%)} .hero-grid{position:relative;z-index:2;display:grid;grid-template-columns:1.1fr .9fr;gap:56px;align-items:center;padding:72px 0} .hero h1{font-size:clamp(44px,7vw,84px);margin:6px 0 24px} .hero p{font-size:clamp(16px,2vw,19px);color:var(--muted);max-width:520px;margin-bottom:34px;line-height:1.75} .hero-btns{display:flex;gap:14px;flex-wrap:wrap} .meta{margin-top:44px;display:flex;gap:32px;flex-wrap:wrap} .meta div{border-left:1px solid var(--line);padding-left:16px} .meta b{display:block;font-family:var(--serif);color:var(--gold2);font-size:24px;font-weight:500} .meta span{font-size:11px;color:var(--muted);letter-spacing:1.5px} @media(max-width:900px){.hero-grid{grid-template-columns:1fr;gap:40px;padding:56px 0}} /* ---------- sub-page hero ---------- */ .page-hero{padding:110px 0 56px;position:relative;overflow:hidden; background:linear-gradient(180deg,#181021,var(--bg) 80%)} .page-hero::before{content:"";position:absolute;inset:0;pointer-events:none; background:radial-gradient(55% 70% at 82% 8%,var(--tint),transparent 62%)} .page-hero .wrap{position:relative;z-index:2} .crumb{font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold);margin-bottom:18px;font-weight:600} .crumb a{color:var(--muted)} .crumb a:hover{color:var(--gold2)} .page-hero h1{font-size:clamp(38px,6vw,70px);margin:0 0 22px;max-width:820px} .page-hero p.lead{font-size:clamp(16px,2vw,19px);color:var(--muted);max-width:600px;margin-bottom:32px;line-height:1.75} .page-hero .media{margin-top:56px} /* ---------- media placeholder slots ---------- */ .media{position:relative;border:1px solid var(--line);overflow:hidden;border-radius:5px; background:linear-gradient(165deg,var(--mg1),var(--mg2))} .media.a169{aspect-ratio:16/9} .media.a219{aspect-ratio:21/9} .media.a45{aspect-ratio:4/5} .media.a34{aspect-ratio:3/4} .media.a11{aspect-ratio:1/1} .vgroup{font-family:var(--serif);font-style:italic;font-size:23px;color:var(--gold2);margin:40px 0 16px;letter-spacing:.4px} .vgroup:first-of-type{margin-top:26px} /* full-image hero (no crop) — used for outfit photos */ .media.imgfit{aspect-ratio:auto;width:auto;border:0;overflow:visible;background:none} .media.imgfit img{position:static;inset:auto;width:auto;max-width:100%;height:100%;object-fit:contain;display:block;margin:0 auto;border:1px solid var(--line);border-radius:5px} /* outfit coverflow — centered look large, neighbours peeking, swipe/arrows */ .cover{--sw:min(80vw,340px);position:relative;margin:16px auto 0} .cover-track{display:flex;gap:10px;overflow-x:auto;scroll-snap-type:x mandatory;-webkit-overflow-scrolling:touch; padding:24px calc((100% - var(--sw))/2);scrollbar-width:none} .cover-track::-webkit-scrollbar{display:none} .cover-slide{position:relative;flex:0 0 auto;width:var(--sw);scroll-snap-align:center; transform:scale(.9);opacity:.5;transition:transform .45s cubic-bezier(.2,.7,.2,1),opacity .45s} .cover-slide.active{transform:scale(1);opacity:1} .cover-slide img{width:100%;height:auto;display:block;border:1px solid var(--line);border-radius:6px; box-shadow:0 24px 60px -22px rgba(0,0,0,.7)} .cover-slide .lno{position:absolute;top:12px;left:14px;font-family:var(--serif);font-style:italic;font-size:22px;color:#fff; text-shadow:0 2px 12px rgba(0,0,0,.6);opacity:0;transition:opacity .4s} .cover-slide .lname{position:absolute;left:0;right:0;bottom:0;padding:34px 14px 14px;text-align:center; font-size:12px;letter-spacing:2.5px;text-transform:uppercase;color:var(--gold2); background:linear-gradient(to top,rgba(8,5,10,.8),transparent);opacity:0;transition:opacity .4s} .cover-slide.active .lno,.cover-slide.active .lname{opacity:.97} @media(min-width:760px){.cover{--sw:min(60vw,320px)}} .cover-arrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:46px;height:46px;border-radius:50%; border:1px solid rgba(255,255,255,.25);background:rgba(14,9,16,.6);color:#fff;font-size:22px;line-height:1;cursor:pointer; display:none;align-items:center;justify-content:center;transition:.2s} .cover-arrow:hover{border-color:var(--gold);color:var(--gold2);background:rgba(14,9,16,.85)} .cover-arrow.prev{left:6px}.cover-arrow.next{right:6px} @media(hover:hover) and (min-width:760px){.cover-arrow{display:flex}} .cover-dots{display:flex;gap:8px;justify-content:center;flex-wrap:wrap;margin-top:16px} .cover-dots i{width:7px;height:7px;border-radius:50%;background:var(--line);cursor:pointer;transition:.25s} .cover-dots i.on{background:var(--gold);transform:scale(1.3)} .field label .minihint{margin-left:10px;font-size:10.5px;letter-spacing:1px;text-transform:uppercase;color:var(--gold2);text-decoration:none;border-bottom:1px solid rgba(233,196,106,.45);white-space:nowrap} .field label .minihint:hover{color:var(--cream);border-color:var(--gold)} /* multi-select dropdown (outfit picker) */ .msel{position:relative;margin-top:8px} .msel-toggle{width:100%;text-align:left;background:var(--bg);border:1px solid var(--line);border-radius:2px;padding:13px 40px 13px 14px;color:var(--muted);cursor:pointer;font-family:var(--sans);font-size:14px} .msel-toggle::after{content:"▾";position:absolute;right:14px;top:50%;transform:translateY(-50%);color:var(--gold2);pointer-events:none} .msel.open .msel-toggle,.msel-toggle:focus{outline:none;border-color:var(--gold)} .msel-panel{position:absolute;left:0;right:0;top:calc(100% + 6px);z-index:30;background:#171019;border:1px solid var(--line);border-radius:8px;max-height:264px;overflow:auto;display:none;box-shadow:0 18px 50px rgba(0,0,0,.55)} .msel.open .msel-panel{display:block} .msel-panel label{display:flex;align-items:center;gap:10px;padding:11px 14px;cursor:pointer;font-size:14px;color:var(--cream)} .msel-panel label:hover{background:rgba(233,196,106,.14)} .msel-panel input{width:16px;height:16px;accent-color:var(--gold);margin:0;flex:0 0 auto} /* always-visible Reserve CTA on mobile (header button is hidden there) */ .reserve-float{position:fixed;left:16px;bottom:22px;z-index:60;display:none;align-items:center; background:var(--gold);color:#151016;font-weight:700;font-size:11.5px;letter-spacing:1px;text-transform:uppercase; padding:13px 18px;border-radius:999px;text-decoration:none;white-space:nowrap; transition:opacity .3s,transform .3s;animation:rfpulse 2.4s ease-out infinite} .reserve-float:hover{background:var(--gold2)} .reserve-float.hide{opacity:0;transform:translateY(14px);pointer-events:none} @keyframes rfpulse{ 0%{box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 0 0 rgba(233,196,106,.6)} 70%,100%{box-shadow:0 8px 24px rgba(0,0,0,.4),0 0 0 16px rgba(233,196,106,0)}} @media(max-width:760px){.reserve-float{display:inline-flex}} @media(prefers-reduced-motion:reduce){.reserve-float{animation:none}} .cover-hint{text-align:center;margin-top:8px;font-size:11px;letter-spacing:3px;text-transform:uppercase;color:var(--gold2);animation:swipehint 1.9s ease-in-out infinite} @keyframes swipehint{0%,100%{transform:translateX(-5px);opacity:.6}50%{transform:translateX(5px);opacity:1}} @media(hover:hover) and (min-width:760px){.cover-hint{display:none}} .media.ctp{cursor:pointer} .ctp-badge{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:66px;height:66px;border-radius:50%; background:rgba(233,196,106,.95);box-shadow:0 8px 26px rgba(0,0,0,.45);pointer-events:none;z-index:4; transition:transform .3s cubic-bezier(.2,.7,.2,1), background .3s, opacity .25s} /* pulsing "sonar" ring that draws the eye and signals it's tappable */ .ctp-badge::before{content:"";position:absolute;left:50%;top:50%;width:100%;height:100%;border-radius:50%; border:2px solid rgba(233,196,106,.65);transform:translate(-50%,-50%);animation:ctpring 2.2s ease-out infinite;pointer-events:none} /* play triangle */ .ctp-badge::after{content:"";position:absolute;left:54%;top:50%;transform:translate(-50%,-50%); border-style:solid;border-width:11px 0 11px 18px;border-color:transparent transparent transparent #1a1420} @keyframes ctpring{0%{transform:translate(-50%,-50%) scale(1);opacity:.7}100%{transform:translate(-50%,-50%) scale(1.8);opacity:0}} .media.ctp:hover .ctp-badge{background:var(--gold2);transform:translate(-50%,-50%) scale(1.14);box-shadow:0 10px 30px rgba(0,0,0,.5)} .media.ctp.playing .ctp-badge{opacity:0} .ctp-poster{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:1;pointer-events:none;transition:opacity .35s ease} .media.ctp.vplaying .ctp-poster{opacity:0} .ctp-badge{z-index:2} @media(prefers-reduced-motion:reduce){.ctp-badge::before{animation:none}} @media(max-width:700px){.media.a219{aspect-ratio:16/9}} .media .play{position:absolute;inset:0;margin:auto;width:62px;height:62px;border:1px solid var(--gold); border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold2); font-size:16px;padding-left:5px;opacity:.85;background:rgba(13,10,16,.25)} .media figcaption{position:absolute;left:0;right:0;bottom:0;display:flex;justify-content:space-between; align-items:center;gap:10px;padding:12px 14px;font-size:12px;letter-spacing:1px;color:var(--cream); background:linear-gradient(transparent,rgba(0,0,0,.62))} .chip{font-size:9.5px;letter-spacing:1.5px;text-transform:uppercase;border:1px solid var(--line); padding:3px 8px;color:var(--muted);border-radius:2px;font-style:normal;white-space:nowrap;background:rgba(13,10,16,.5)} /* ---------- grids ---------- */ .grid{display:grid;gap:22px} .g2{grid-template-columns:1fr 1fr} .g3{grid-template-columns:repeat(3,1fr)} .g4{grid-template-columns:repeat(4,1fr)} @media(max-width:900px){.g4{grid-template-columns:repeat(2,1fr)}.g3{grid-template-columns:1fr}.g2{grid-template-columns:1fr}} @media(max-width:540px){.g4{grid-template-columns:1fr}} /* hairline editorial grid (formats / offer cards) */ .hairgrid{display:grid;gap:1px;background:var(--line);border:1px solid var(--line)} .hairgrid.g2,.hairgrid.g3,.hairgrid.g4{gap:1px} .hairgrid>div{background:var(--bg);padding:36px 28px;transition:background .3s} .hairgrid>div:hover{background:var(--card)} .hairgrid .no{font-family:var(--serif);color:var(--gold);font-size:15px} .hairgrid h3{font-size:23px;margin:14px 0 10px} .hairgrid p{color:var(--muted);font-size:14.5px;line-height:1.7} /* ---------- event cards (home) ---------- */ a.ev{position:relative;aspect-ratio:3/4;display:flex;align-items:flex-end;overflow:hidden;border:1px solid var(--line)} a.ev::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 38%,rgba(0,0,0,.82))} a.ev .ov{position:relative;z-index:2;padding:24px;width:100%} a.ev h3{font-size:24px;color:var(--cream);transition:color .25s} a.ev .ov span{display:block;font-size:11.5px;color:var(--gold2);letter-spacing:1.5px;margin-top:4px;text-transform:uppercase} a.ev .go{display:inline-block;margin-top:14px;font-size:11px;letter-spacing:2px;text-transform:uppercase; color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:3px;transition:.25s} a.ev:hover h3{color:var(--gold2)} a.ev:hover .go{color:var(--gold2);border-bottom-color:var(--gold)} .ev-w{background:linear-gradient(165deg,#332512,#150e13)} .ev-b{background:linear-gradient(165deg,#33190f,#150e13)} .ev-h{background:linear-gradient(165deg,#162233,#0f0d14)} .ev-r{background:linear-gradient(165deg,#31141d,#150e13)} /* ---------- editorial split ---------- */ .split{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:60px} @media(max-width:860px){.split{grid-template-columns:1fr;gap:36px}} /* ---------- flow / timeline ---------- */ .flow{list-style:none;max-width:820px} .flow li{display:grid;grid-template-columns:70px 1fr;gap:20px;padding:28px 0;border-bottom:1px solid var(--line)} .flow li:first-child{border-top:1px solid var(--line)} .flow .tno{font-family:var(--serif);color:var(--gold);font-size:20px;font-style:italic} .flow h3{font-size:22px;margin-bottom:6px} .flow p{color:var(--muted);font-size:14.5px;line-height:1.7;max-width:600px} @media(max-width:540px){.flow li{grid-template-columns:46px 1fr;gap:14px}} /* ---------- packages ---------- */ .pack{border:1px solid var(--line);background:var(--card);padding:34px 30px;display:flex;flex-direction:column;gap:14px;position:relative} .pack.hot{border-color:var(--gold)} .pack .tag{position:absolute;top:-11px;left:28px;background:var(--gold);color:#151016;font-size:9.5px; letter-spacing:1.5px;text-transform:uppercase;font-weight:800;padding:4px 10px;border-radius:2px} .pack h3{font-size:25px} .pack .pdesc{color:var(--muted);font-size:14px;line-height:1.65} .feat{list-style:none;margin:4px 0 8px;display:flex;flex-direction:column;gap:9px} .feat li{position:relative;padding-left:20px;color:var(--text);font-size:14px;line-height:1.55} .feat li::before{content:"✦";position:absolute;left:0;top:2px;color:var(--gold);font-size:10px} .price{margin-top:auto;display:flex;align-items:baseline;gap:12px;border-top:1px solid var(--line);padding-top:18px;flex-wrap:wrap} .price b{font-family:var(--serif);font-size:30px;color:var(--gold2);font-weight:500;letter-spacing:1px} .pack .btn{margin-top:6px} /* ---------- package tiers (paketler.html + home teaser) ---------- */ .pkg-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:28px;max-width:960px;margin:0 auto} @media(max-width:640px){.pkg-grid{grid-template-columns:1fr}} /* .pkg-card extends .pack: tier name, then the photos, then the offer text, then the price */ .pkg-card{padding:28px 24px;gap:9px;transition:border-color .25s} .pkg-card:hover{border-color:var(--gold)} .pkg-no{font-family:var(--serif);font-style:italic;color:var(--gold);font-size:14px;letter-spacing:1.5px} .pkg-card h3{font-size:29px;margin:-4px 0 0} .pkg-sub{font-size:12px;letter-spacing:1.6px;text-transform:uppercase;color:var(--gold2);line-height:1.7} /* photo strip — every shot of the package, in the same 4:5 tile the other sections use */ .pkg-card .slideshow{aspect-ratio:4/5;background:linear-gradient(165deg,var(--mg1),var(--mg2));margin:5px 0 3px} .pkg-card .slideshow .dots{bottom:10px} .pkg-card .pdesc{font-size:16.5px;color:var(--text);line-height:1.72} .pkg-meta{font-size:14.5px;color:var(--muted);letter-spacing:.3px;line-height:1.55} .pkg-card .price{padding-top:16px;gap:8px} .pkg-card .price b{font-size:32px} .pkg-from{font-size:10.5px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);display:block;width:100%} .pkg-link{font-size:11px;letter-spacing:1px;text-transform:uppercase;color:var(--gold2); border-bottom:1px solid rgba(233,196,106,.45);align-self:flex-start;transition:.2s} .pkg-link:hover{color:var(--cream);border-color:var(--gold)} /* comparison table — scrolls sideways on narrow screens, first column pinned */ .pkg-tablewrap{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);background:var(--card)} table.pkg-compare{border-collapse:collapse;width:100%;min-width:660px;font-size:14px} .pkg-compare th,.pkg-compare td{padding:14px 16px;border-bottom:1px solid var(--line);text-align:center;white-space:nowrap} .pkg-compare thead th{font-family:var(--serif);font-size:17px;color:var(--gold2);font-weight:500;letter-spacing:.5px} .pkg-compare thead th small{display:block;font-family:var(--sans);font-size:9.5px;letter-spacing:1.5px; text-transform:uppercase;color:var(--muted);margin-top:4px} .pkg-compare tbody th{text-align:left;font-size:11px;letter-spacing:1.5px;text-transform:uppercase; color:var(--muted);font-weight:600;position:sticky;left:0;background:var(--card)} .pkg-compare thead th:first-child{position:sticky;left:0;background:var(--card);z-index:2} .pkg-compare tbody tr:last-child th,.pkg-compare tbody tr:last-child td{border-bottom:0} .pkg-compare .hot{background:rgba(201,162,75,.07)} .pkg-compare .yes{color:var(--gold2);font-size:15px} .pkg-compare .no{color:#5c525f} .pkg-compare .pv{color:var(--text)} .pkg-compare tbody tr:last-child .pv{font-family:var(--serif);font-size:19px;color:var(--gold2)} /* home teaser strip (reuses .hairgrid, but the tiles are links) */ .hairgrid>a{display:block;background:var(--bg);padding:36px 28px;transition:background .3s} .hairgrid>a:hover{background:var(--card)} .pkg-mini-price{font-family:var(--serif);color:var(--gold2);font-size:23px;letter-spacing:.5px;margin-top:12px;display:block} .pkg-mini-price small{display:block;font-family:var(--sans);font-size:9.5px;letter-spacing:1.5px; text-transform:uppercase;color:var(--muted);margin-bottom:2px} .hairgrid>a .go{display:inline-block;margin-top:14px;font-size:11px;letter-spacing:2px;text-transform:uppercase; color:var(--muted);border-bottom:1px solid var(--line);padding-bottom:3px;transition:.25s;font-style:normal} .hairgrid>a:hover .go{color:var(--gold2);border-bottom-color:var(--gold)} @media(prefers-reduced-motion:reduce){.pkg-card,.pkg-card:hover{transition:none;transform:none}} /* ---------- quotes ---------- */ .quote{background:var(--card);border:1px solid var(--line);padding:34px} .quote p{font-family:var(--serif);font-style:italic;font-size:19px;line-height:1.55;margin-bottom:18px;color:var(--cream)} .quote .who{font-size:11.5px;letter-spacing:2px;text-transform:uppercase;color:var(--gold)} /* ---------- FAQ ---------- */ .faq{border:1px solid var(--line);background:var(--card);margin-bottom:12px} .faq summary{cursor:pointer;padding:18px 22px;font-size:15px;color:var(--cream);list-style:none; display:flex;justify-content:space-between;align-items:center;gap:16px;font-weight:600} .faq summary::-webkit-details-marker{display:none} .faq summary::after{content:"+";color:var(--gold);font-size:20px;font-weight:400;transition:transform .25s;line-height:1} .faq[open] summary::after{transform:rotate(45deg)} .faq p{padding:0 22px 20px;color:var(--muted);font-size:14.5px;line-height:1.7;max-width:640px} /* ---------- stats band ---------- */ .stats{background:var(--bg2);border-top:1px solid var(--line);border-bottom:1px solid var(--line)} .stat-row{display:flex;justify-content:space-around;flex-wrap:wrap;gap:28px;text-align:center} .stat b{display:block;font-family:var(--serif);color:var(--gold2);font-size:clamp(30px,4.5vw,44px);font-weight:500} .stat span{font-size:11px;color:var(--muted);letter-spacing:2px;text-transform:uppercase} /* ---------- clients ---------- */ .clogos{display:flex;flex-wrap:wrap;gap:14px;justify-content:center} .cl{border:1px solid var(--line);padding:15px 28px;color:var(--muted);letter-spacing:2px;font-size:11.5px;text-transform:uppercase;transition:.2s} a.cl:hover{color:var(--gold2);border-color:var(--gold)} /* ---------- trio feature row ---------- */ .trio{display:grid;grid-template-columns:repeat(3,1fr);gap:22px} @media(max-width:860px){.trio{grid-template-columns:1fr}} .titem{border:1px solid var(--line);background:var(--card);padding:28px 24px} .titem h3{font-size:20px;margin-bottom:8px} .titem p{color:var(--muted);font-size:14px;line-height:1.7} /* ---------- booking form ---------- */ .book{background:var(--bg2);border-top:1px solid var(--line)} .card{background:var(--card);border:1px solid var(--line);padding:42px;max-width:780px;margin:0 auto} @media(max-width:560px){.card{padding:28px 20px}} .fg{display:grid;grid-template-columns:1fr 1fr;gap:18px} .field{display:flex;flex-direction:column;gap:7px;margin-bottom:18px} .field.full{grid-column:1/-1} label{font-size:11px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);font-weight:600} input,select,textarea{background:var(--bg);border:1px solid var(--line);border-radius:2px;padding:13px 14px; color:var(--cream);font-size:15px;font-family:var(--sans);width:100%} input:focus,select:focus,textarea:focus{outline:none;border-color:var(--gold)} textarea{min-height:92px;resize:vertical} .req{color:var(--gold)} @media(max-width:560px){.fg{grid-template-columns:1fr}} .form-cta{text-align:center;margin-top:10px} .fnote{color:#6f6459;font-size:12px;letter-spacing:.4px;margin-top:12px} /* ---------- footer ---------- */ footer{background:#0a070c;border-top:1px solid var(--line);padding:56px 0 42px} .foot-top{display:flex;justify-content:space-between;gap:30px;flex-wrap:wrap;align-items:flex-start; padding-bottom:28px;border-bottom:1px solid var(--line)} .foot-links{display:flex;gap:20px;flex-wrap:wrap;font-size:12px;letter-spacing:1.5px;text-transform:uppercase;color:var(--muted);padding-top:6px} .foot-links a:hover{color:var(--gold2)} .foot-bottom{display:flex;gap:12px;flex-wrap:wrap;margin-top:26px} footer .fnote{margin-top:10px} /* ---------- floating WhatsApp ---------- */ .wa-float{position:fixed;right:20px;bottom:20px;width:54px;height:54px;border-radius:50%;background:#25d366; display:flex;align-items:center;justify-content:center;z-index:70;box-shadow:0 10px 26px rgba(0,0,0,.45);transition:transform .2s} .wa-float:hover{transform:translateY(-3px)} .wa-float svg{width:26px;height:26px;fill:#fff} /* ---------- real media (video / image fills) ---------- */ .media video,.media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;border:0} .media.fit{background-size:cover;background-position:center} .media.fit::before{content:"";position:absolute;inset:0;z-index:1;background:rgba(12,10,16,.42); backdrop-filter:blur(30px);-webkit-backdrop-filter:blur(30px)} .media.fit video{object-fit:contain;z-index:2;background:transparent} .page-hero .media.fit{max-height:80vh} .media video{cursor:pointer;background:#000} /* ============ v2: hero fill (no blur), reel row, vertical stack, slideshow ============ */ /* hero/media fill the cell edge-to-edge, no letterbox blur */ .media.cover video,.media.cover img{object-fit:cover} .media.cover::before{display:none} /* ---- reel row (Option A) ---- */ .reelrow{position:relative;margin-top:8px} .reeltrack{display:flex;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scroll-behavior:smooth; padding:10px 2px 20px;-webkit-overflow-scrolling:touch} .reeltrack::-webkit-scrollbar{height:6px} .reeltrack::-webkit-scrollbar-thumb{background:var(--line);border-radius:3px} .reelcard{flex:0 0 auto;width:300px;max-width:78vw;aspect-ratio:9/16;scroll-snap-align:center;position:relative; overflow:hidden;border:1px solid var(--line);background:#000;transition:transform .3s,box-shadow .3s,border-color .3s} .reelcard video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .reelcard.active{transform:scale(1.05);box-shadow:0 20px 46px rgba(0,0,0,.55);border-color:var(--gold);z-index:2} .reelbtn{position:absolute;top:50%;transform:translateY(-50%);z-index:6;width:48px;height:48px;border-radius:50%; border:1px solid var(--line);background:rgba(13,10,16,.8);color:var(--gold2);font-size:20px;cursor:pointer; display:flex;align-items:center;justify-content:center;transition:.2s} .reelbtn.prev{left:-8px}.reelbtn.next{right:-8px} .reelbtn:hover{border-color:var(--gold);background:rgba(13,10,16,.98)} @media(max-width:600px){.reelbtn{display:none}} /* ---- vertical stack, hover-to-play (Option B) ---- */ .vstack{display:flex;flex-direction:column;align-items:center;gap:28px} .vcard{width:340px;max-width:88vw;aspect-ratio:9/16;position:relative;overflow:hidden;border:1px solid var(--line); background:#000;cursor:pointer;transition:transform .35s,box-shadow .35s,border-color .35s} .vcard video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .vcard::after{content:"▶";position:absolute;inset:0;margin:auto;width:56px;height:56px;border:1px solid var(--gold); border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--gold2);background:rgba(13,10,16,.35); font-size:15px;padding-left:4px;opacity:.9;transition:opacity .3s} .vcard:hover{transform:scale(1.03);box-shadow:0 20px 46px rgba(0,0,0,.55);border-color:var(--gold)} .vcard.playing::after{opacity:0} /* ---- auto photo slideshow (landing) ---- */ .slideshow{position:relative;aspect-ratio:16/9;overflow:hidden;border:1px solid var(--line);background:#000} @media(max-width:700px){.slideshow{aspect-ratio:4/5}} .slideshow img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1.2s ease} .slideshow img.on{opacity:1} .slideshow .dots{position:absolute;left:0;right:0;bottom:14px;display:flex;gap:8px;justify-content:center;z-index:3} .slideshow .dots i{width:7px;height:7px;border-radius:50%;background:rgba(255,255,255,.4);transition:.3s} .slideshow .dots i.on{background:var(--gold2);width:20px;border-radius:4px} .slideshow .dots i{cursor:pointer} /* manual switch arrows (like the Outfits page) — desktop hover; mobile uses swipe + dots */ .slideshow .sarrow{position:absolute;top:50%;transform:translateY(-50%);z-index:4;width:40px;height:40px; border-radius:50%;display:none;align-items:center;justify-content:center;border:1px solid var(--line); background:rgba(14,9,16,.72);color:var(--cream);font-family:var(--serif);font-size:24px;line-height:1; padding-bottom:3px;cursor:pointer;transition:.2s;-webkit-tap-highlight-color:transparent} .slideshow .sarrow:hover{border-color:var(--gold);color:var(--gold2);background:rgba(14,9,16,.92)} .slideshow .sarrow.prev{left:8px} .slideshow .sarrow.next{right:8px} @media(hover:hover) and (min-width:760px){.slideshow:hover .sarrow{display:flex}} /* packages: show the whole photo (never crop the performer) + snappy fade */ .pkg-card .slideshow img{object-fit:contain;transition:opacity .5s ease} /* event-page hero: contained vertical clip, no blur */ .page-hero .media.phero{max-width:460px} /* ============ v3 fixes: single-reel, vertical media, sound hint, event-card imagery ============ */ /* reel: one card centered, slivers of neighbours, arrow to advance */ .reelrow{max-width:440px;margin:0 auto} .reeltrack{gap:12px} .reelcard{flex:0 0 84%;width:auto;max-width:none} /* true vertical media (no crop, no bars) */ .media.a916{aspect-ratio:9/16} .hero .media.a916{height:min(66vh,520px);width:auto;margin:0 auto} .split .media.a916{width:330px;max-width:100%;margin:0 auto} .page-hero .media.phero{max-width:320px} /* sound hint badge */ .soundhint{position:absolute;left:50%;bottom:14px;transform:translateX(-50%);z-index:6;display:flex;align-items:center;gap:7px; background:rgba(13,10,16,.72);border:1px solid var(--line);color:var(--cream);font-size:11px;letter-spacing:1px; padding:7px 12px;border-radius:30px;pointer-events:none;transition:opacity .5s;white-space:nowrap;backdrop-filter:blur(4px)} .soundhint svg{width:15px;height:15px;fill:var(--gold2);stroke:var(--gold2)} .has-sound .soundhint{opacity:0} /* event cards get a real photo behind the label */ a.ev .evbg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;z-index:0} a.ev::before{z-index:1} a.ev .ov{z-index:2} /* ============================================================ MOBILE OPTIMIZATION ============================================================ */ html{overflow-x:hidden} *{min-width:0} @media (max-width:760px){ .wrap{padding:0 18px} section{padding:58px 0} section.tight{padding-top:20px} h2.t{font-size:clamp(26px,7.5vw,34px)} .sub{font-size:15px;margin:14px 0 28px;line-height:1.6} /* home hero */ .hero{min-height:auto} .hero-grid{grid-template-columns:1fr;gap:24px;padding:30px 0 42px} .hero h1{font-size:clamp(32px,8.5vw,44px);margin:4px 0 16px} .hero p{font-size:15.5px;margin-bottom:24px} .hero-btns{flex-direction:column;align-items:stretch} .hero-btns .btn{width:100%} .hero .media.a916{height:auto;width:100%;max-width:330px;margin:0 auto;aspect-ratio:9/16} .meta{gap:14px;margin-top:26px} .meta div{padding-left:12px} .meta b{font-size:19px} .meta span{font-size:10px} /* sub-page hero */ .page-hero{padding:78px 0 38px} .page-hero h1{font-size:clamp(28px,8vw,40px)} .page-hero p.lead{font-size:15.5px} .page-hero .media{margin-top:34px} .page-hero .media.phero{width:100%;max-width:320px;margin:34px 0 0} /* about split */ .split{gap:24px} .split .media.a916{width:100%;max-width:330px} /* formats / flow / packages */ .hairgrid>div{padding:24px 20px} .hairgrid h3{font-size:21px} .flow li{grid-template-columns:38px 1fr;gap:12px;padding:20px 0} .flow h3{font-size:19px} .pack{padding:26px 22px} .titem{padding:24px 20px} /* stats */ .stat-row{gap:16px 22px} .stat b{font-size:30px} .stat span{font-size:10px} /* clients */ .cl{padding:12px 18px;font-size:11px} /* reviews */ .quote{padding:26px 22px} .quote p{font-size:17px} /* nav */ .nav{gap:10px} .logo{font-size:17px;letter-spacing:1.5px} /* booking form */ .book .card{padding:24px 16px} .fg{grid-template-columns:1fr;gap:0} /* galleries full-width */ .reelrow{max-width:100%} .reelcard{flex:0 0 82%} .vcard{width:100%;max-width:340px} /* footer */ .foot-top{flex-direction:column;gap:14px} .foot-bottom{gap:8px} .wa-float{right:14px;bottom:14px;width:50px;height:50px} } @media (max-width:400px){ .hero h1{font-size:30px} .meta{gap:12px} .meta div:nth-child(3){padding-left:12px} } /* ===== v4: mobile nav (Reserve stays) + hero centering + meta ===== */ @media (max-width:960px){ .nav-actions{gap:8px} .nav-actions .btn{display:inline-block;padding:9px 13px;font-size:10px;letter-spacing:1.2px} .lang{padding:7px 9px} } @media (max-width:760px){ .logo{font-size:16px;letter-spacing:1px} .nav-actions .btn{display:none} /* Reserve lives in the ☰ menu + hero on mobile */ .hero-grid>div{text-align:center} .hero .meta{display:grid;grid-template-columns:repeat(3,1fr);justify-items:center;text-align:center;gap:18px 10px;flex-wrap:nowrap} .hero .meta div{border-left:none;padding-left:0} .hero .media.a916{margin:22px auto 0} } /* ===== v5: always-visible fixed header + side gutters ===== */ header{position:fixed;left:0;right:0;top:0} body{padding-top:var(--nav-h)} html{scroll-padding-top:calc(var(--nav-h) + 10px)} /* more space on the sides (no edge-to-edge hugging) */ .wrap{padding-left:28px;padding-right:28px} @media (max-width:760px){ .wrap{padding-left:22px;padding-right:22px} } @media (max-width:400px){ .wrap{padding-left:18px;padding-right:18px} } /* ---------- sub-page hero: text left, vertical video right ---------- */ .page-hero .wrap.ph-two{display:grid;grid-template-columns:1.05fr .95fr;gap:48px;align-items:center} .page-hero .ph-copy{min-width:0} .page-hero .wrap.ph-two .media{margin-top:0} .page-hero .wrap.ph-two .media.phero{height:min(62vh,540px);width:auto;max-width:100%;margin:0 auto} @media(max-width:900px){ .page-hero .wrap.ph-two{grid-template-columns:1fr;gap:26px} .page-hero .wrap.ph-two .media.phero{height:auto;width:100%;max-width:320px;margin:8px auto 0} }