/* ========================================================================== Zavie — desktop layout (>=1024px only). Additive; mobile is untouched. Pairs with desktop.js. Link in after style.css. ========================================================================== */ @media (min-width:1024px){ html{ background:#0a0908; } body{ max-width:none; margin:0; padding-left:232px; padding-bottom:0; min-height:100vh; } nav{ --u:0.5795px; top:0; bottom:0; left:0; width:232px; max-width:232px; height:100vh; flex-direction:column; justify-content:flex-start; align-items:stretch; gap:4px; padding:24px 16px; border-top:none; border-right:1px solid #241f1b; background:rgba(10,9,8,.96); transform:none; } .navbrand{ display:block; padding:4px 12px 22px; } .navbrand img{ width:118px; height:auto; display:block; } nav button{ flex:0 0 auto; flex-direction:row; justify-content:flex-start; align-items:center; gap:15px; width:100%; padding:13px 14px; border-radius:12px; font-size:13px; letter-spacing:.05em; color:#b7ad9e; transition:background .15s ease,color .15s ease; } nav button:hover{ background:rgba(246,240,228,.06); color:var(--cream); transform:none; } nav button:active{ transform:none; } nav button.on{ background:rgba(255,84,54,.12); color:var(--coral); } nav button .ni-ic{ width:22px; height:22px; flex:0 0 auto; } nav button span{ font-size:13px; } nav .mk{ flex:0 0 auto; gap:15px; margin:6px 0; } nav .mk .mkplus{ width:34px; height:34px; margin-top:0; box-shadow:0 4px 12px rgba(255,84,54,.35); } nav .mk .mkplus svg{ width:18px; height:18px; } nav .mk .mklabel{ font-size:13px; color:#b7ad9e; } nav .mk.on .mklabel{ color:var(--coral); } .screen{ max-width:760px; margin-left:auto; margin-right:auto; } #feed{ max-width:1040px; margin:0 auto; padding:0 40px; } .feed{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:26px 26px; padding-top:6px; } .feed > .feedsec-h, .feed > .et-h, .feed > .feedmsg, .feed > #f1NightSlot, .feed > .et-row{ grid-column:1 / -1; } .feed > .ticket{ margin:0 !important; } .feed > .et-row{ margin-bottom:8px; } .feed > .feedsec-h{ position:static; } #feed .k4brand{ display:none; } #feed .endnote{ max-width:1040px; margin-left:0; text-align:left; } } /* ===== capsule frame + floating sidebar ===== */ @media (min-width:1024px){ html{ background:#000 !important; } body{ position:relative; margin:12px; min-height:calc(100vh - 24px); border-radius:20px; box-shadow:0 0 0 1px rgba(255,255,255,.10), 0 30px 90px rgba(0,0,0,.9); } nav{ left:12px; top:12px; bottom:12px; height:auto; border-radius:20px 0 0 20px; } #map.mapscreen{ left:244px; right:12px; top:12px; bottom:12px; width:auto; max-width:none; transform:none; --mapnav:24px; border-radius:0 20px 20px 0; box-shadow:inset 0 0 0 1px rgba(246,240,228,.05); } .navbrand{ padding:34px 12px 14px; } #feed .k4top{ padding-top:18px; } } /* ===== sidebar footer (Get the app / How it works / Support / credit) ===== */ @media (min-width:1024px){ nav{ padding-bottom:22px; } .navfoot{ margin-top:auto; padding-top:16px; border-top:1px solid #241f1b; display:flex; flex-direction:column; gap:2px; position:relative; } .navfoot button{ display:flex; align-items:center; gap:12px; width:100%; padding:11px 14px; border-radius:12px; background:none; border:0; cursor:pointer; color:#8f8676; font-size:12.5px; font-weight:600; letter-spacing:.04em; font-family:'Inter',system-ui,sans-serif; transition:background .15s ease,color .15s ease; text-align:left; } .navfoot button:hover{ background:rgba(246,240,228,.06); color:var(--cream); } .navfoot button svg{ width:19px; height:19px; flex:0 0 auto; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; } a.navget{ display:flex; align-items:center; gap:12px; width:100%; padding:11px 14px; border-radius:12px; background:var(--coral); border:1px solid var(--coral); cursor:pointer; color:#fff; font-size:12.5px; font-weight:700; letter-spacing:.04em; font-family:'Inter',system-ui,-apple-system,sans-serif; transition:background .15s ease,color .15s ease; text-align:left; text-decoration:none; margin-bottom:4px; position:relative; overflow:visible; box-shadow:0 8px 20px rgba(255,84,54,.35); } a.navget:hover{ background:#ff6647; color:#fff; } a.navget svg{ width:18px; height:18px; flex:0 0 auto; stroke:#fff; stroke-width:1.9; fill:none; stroke-linecap:round; stroke-linejoin:round; } a.navget .navget-new{ position:absolute; top:-8px; right:-6px; background:#fff; color:var(--coral); font-size:8.5px; font-weight:800; letter-spacing:.08em; padding:2px 7px; border-radius:999px; text-transform:uppercase; box-shadow:0 3px 8px rgba(0,0,0,.45); } a.navsupport{ display:flex; align-items:center; gap:12px; width:100%; padding:11px 14px; border-radius:12px; background:none; border:0; cursor:pointer; color:#8f8676; font-size:12.5px; font-weight:600; letter-spacing:.04em; font-family:'Inter',system-ui,sans-serif; transition:background .15s ease,color .15s ease; text-align:left; text-decoration:none; } a.navsupport:hover{ background:rgba(246,240,228,.06); color:var(--cream); } a.navsupport svg{ width:19px; height:19px; flex:0 0 auto; stroke:currentColor; stroke-width:1.8; fill:none; stroke-linecap:round; stroke-linejoin:round; } a.navcredit{ display:block; padding:12px 14px 0; font-size:11px; line-height:1.5; color:#6f695d; text-decoration:none; letter-spacing:.02em; } a.navcredit b{ color:#9a9082; font-weight:600; } a.navcredit:hover, a.navcredit:hover b{ color:var(--cream); } } @media (max-width:1023px){ .navfoot{ display:none !important; } } /* ===== sidebar city selector ===== */ .navcity{ display:none; } @media (min-width:1024px){ #feed .k4cityband{ display:none; } .navcity{ display:flex; align-items:center; gap:6px; margin:0 12px 18px; padding:10px 11px; border-radius:11px; background:rgba(246,240,228,.04); border:1px solid #2a241f; cursor:pointer; color:var(--cream); font-size:12.5px; font-weight:600; letter-spacing:.01em; width:calc(100% - 24px); font-family:'Inter',system-ui,-apple-system,sans-serif; transition:background .15s ease; text-transform:none; } .navcity:hover{ background:rgba(246,240,228,.08); } .navcity .zc-ic{ color:var(--coral); display:flex; flex:0 0 auto; } .navcity .zc-ic svg{ width:14px; height:14px; } .navcity .zc-nm{ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-transform:none; } .navcity .zc-arw{ margin-left:auto; color:#8f8676; flex:0 0 auto; font-size:10px; } } @media (max-width:1023px){ .navcity{ display:none !important; } } /* ===== feed top bar + LIVE console (cream tube) + gecko ===== */ @media (min-width:1024px){ #feed .k4top{ display:flex; align-items:center; justify-content:space-between; gap:16px; padding-top:16px; max-width:none; margin:0 0 10px; } #feed .k4top .kcband{ margin:0 !important; max-width:none !important; justify-content:flex-start !important; flex:0 1 auto; padding:0 !important; } #feed .k4actions{ flex:0 0 auto; } #feed .kocan{ display:flex !important; align-items:center !important; justify-content:center !important; gap:10px !important; max-width:720px !important; margin:0 auto !important; width:auto !important; padding:8px 18px !important; background:var(--cream) !important; border:1px solid rgba(0,0,0,.10) !important; box-shadow:0 2px 0 rgba(0,0,0,.55), 0 6px 8px rgba(0,0,0,.35), 0 18px 34px rgba(0,0,0,.4), inset 0 1.5px 0 rgba(255,255,255,.7) !important; } #feed .kctimes{ flex:1 1 0 !important; justify-content:center !important; } #feed .kccats{ flex:1 1 0 !important; justify-content:center !important; overflow:visible !important; margin:0 !important; padding:2px 0 !important; } /* vertical tear divider between times and categories */ #feed .kcperf{ display:block !important; position:relative; flex:0 0 auto; width:0; height:26px; margin:0; border-top:0 !important; border-left:1.5px dashed rgba(23,21,18,.28) !important; } #feed .kcperf::before{ top:-6.5px; left:-6.5px; right:auto; background:#0d0a08 !important; box-shadow:none !important; } #feed .kcperf::after{ top:auto; bottom:-6.5px; left:-6.5px; right:auto; background:#0d0a08 !important; box-shadow:none !important; } /* time buttons + category chips: dark on cream */ #feed .kctime{ color:rgba(23,21,18,.5) !important; } #feed .kctime.on{ background:var(--ink) !important; color:var(--cream) !important; } #feed .kccat{ background:rgba(23,21,18,.07) !important; color:var(--ink) !important; } #feed .kccat.on{ background:var(--ink) !important; color:var(--cream) !important; } /* gecko pinned top-right, right of the console */ #feed > .kcgecko{ position:absolute !important; top:58px !important; right:40px !important; left:auto !important; bottom:auto !important; margin:0 !important; width:60px !important; z-index:6 !important; transform:rotate(6deg); } } /* ===== map ===== */ @media (min-width:1024px){ #map.mapscreen .map-topbar{ top:20px; padding:11px 22px; font-size:15px; gap:7px; border-radius:14px; background:rgba(12,10,9,.9); border:1px solid rgba(246,240,228,.16); box-shadow:0 12px 34px rgba(0,0,0,.55); } #map.mapscreen .map-topbar .mtb-city, #map.mapscreen .map-topbar .mtb-n{ font-size:15px; } #map.mapscreen .map-topbar .mtb-lbl{ font-size:13.5px; } #map.mapscreen .mapcats{ top:64px; } #map.mapscreen .mapwhen{ top:112px; } /* summary card centered on the viewport, keep slide-up animation */ #map.mapscreen .map-plancard{ position:fixed; left:50%; right:auto; bottom:34px; width:min(470px, calc(100vw - 48px)); transform:translate(-50%,170%); box-shadow:0 18px 44px rgba(0,0,0,.55); } #map.mapscreen .map-plancard.show{ transform:translate(-50%,0); } #map.mapscreen .mpc-gecko{ width:66px; background:#fff; } #map.mapscreen .mpc-gecko img{ object-fit:contain !important; object-position:center !important; padding:6px 3px; } } /* ===== nights: Instagram-Stories coverflow ===== */ @media (min-width:1024px){ #nights{ max-width:none !important; padding:0 !important; min-height:calc(100vh - 24px); display:flex; flex-direction:column; } #nights:not(.active){ display:none !important; } #nights.active{ display:flex !important; } #nights .nights-head{ max-width:1080px; margin:0 auto; padding:0 24px; } #nights .nights-body{ position:relative; max-width:none !important; padding:0 !important; flex:1 1 auto; display:flex; flex-direction:column; justify-content:center; } #nights #nightsList{ display:none !important; } #nights .nights-sep{ display:none !important; } #nights .nights-flow{ display:flex; gap:28px; align-items:center; overflow-x:auto; scroll-snap-type:x mandatory; padding:16px calc(50% - 205px) 28px; scrollbar-width:none; } #nights .nights-flow::-webkit-scrollbar{ display:none; } #nights .nights-flow .nc-card{ flex:0 0 410px !important; width:410px !important; margin:0 !important; scroll-snap-align:center; opacity:.62; filter:brightness(.72); transform:scale(.83); transition:transform .35s ease, opacity .35s ease, filter .35s ease; } #nights .nights-flow .nc-card.is-center{ opacity:1; filter:none; transform:scale(1); } #nights .nights-flow .ns-strip{ aspect-ratio:5/4 !important; } #nights .nights-flow .ns-slide{ flex:0 0 100% !important; } #nights .nights-flow .ns-strip::before, #nights .nights-flow .ns-strip::after{ display:none !important; } #nights .nights-flow .nc-card.is-center .ns-strip{ cursor:pointer; } #nights .nf-arrow{ position:fixed; top:50%; transform:translateY(-50%); z-index:20; width:46px; height:46px; border-radius:50%; border:1px solid rgba(246,240,228,.22); background:rgba(18,15,13,.82); color:var(--cream); font-size:26px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; -webkit-backdrop-filter:blur(6px); backdrop-filter:blur(6px); box-shadow:0 8px 24px rgba(0,0,0,.5); } #nights .nf-arrow:hover{ background:rgba(30,26,22,.96); } #nights .nf-prev{ left:260px; } #nights .nf-next{ right:26px; } } /* ===== profile: two columns + collapsible plan cards ===== */ @media (min-width:1024px){ #profile{ max-width:1080px !important; padding:0 24px; } #profile .pwrap.vprofile{ columns:auto !important; max-width:none; } #profile .vp-head{ column-span:all; } #profile .vp-hero{ column-span:all; position:relative; overflow:hidden; padding:16px 24px !important; } #profile .vp-hero::before{ content:""; position:absolute; inset:0; z-index:0; background:var(--vp-cover,none) center/cover no-repeat; filter:blur(30px) brightness(.45); transform:scale(1.25); opacity:.55; } #profile .vp-hero > *{ position:relative; z-index:1; } #profile .vp-hero .vp-seal{ position:absolute !important; top:22px !important; right:26px !important; left:auto !important; z-index:2; } #profile .vp-avwrap, #profile .vp-avatar{ width:74px !important; height:74px !important; } #profile .vp-name{ font-size:24px; } #profile .vp-chips{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; } #profile .vp-chips > *{ display:inline-flex !important; align-items:center; gap:7px; margin:0 !important; background:rgba(246,240,228,.06); border:1px solid rgba(246,240,228,.10); border-radius:999px; padding:5px 12px; font-size:12px; line-height:1; } #profile .vp-chips .vp-ig{ color:var(--coral-text,#ff7a5c); text-decoration:none; } #profile .vp-photos{ grid-template-columns:repeat(3,1fr) !important; gap:8px !important; } #profile .vp-cols{ display:grid; grid-template-columns:1.12fr 0.88fr; gap:24px; align-items:start; margin-top:24px; } #profile .vp-col{ display:flex; flex-direction:column; gap:24px; min-width:0; } #profile .vp-col .vp-card{ margin:0 !important; break-inside:auto; } #profile .vp-collapsible .vp-cardh{ cursor:pointer; display:flex; align-items:center; justify-content:space-between; } #profile .vp-collapsible .vp-cardh::after{ content:'\2304'; font-size:18px; color:#8f8676; transition:transform .2s; margin-left:8px; } #profile .vp-collapsible:not(.collapsed) .vp-cardh::after{ transform:rotate(180deg); } #profile .vp-collapsible.collapsed > *:not(.vp-cardh){ display:none !important; } } /* ===== plan detail: two-row / two-column ===== */ @media (min-width:1024px){ #detail.active{ display:block !important; max-width:1060px !important; margin:0 auto; padding:14px 24px 10px; } #detail .dhead, #detail .dbody{ max-width:none !important; width:auto !important; } #detail .dhead-top{ display:flex; align-items:center; justify-content:space-between; gap:24px; flex-wrap:wrap; } #detail .dhead-title{ min-width:0; } #detail .dhead-top .dvenue{ margin:0 0 4px !important; text-align:right; white-space:nowrap; } #detail .dtitle{ font-size:30px !important; line-height:1.05 !important; } #detail .dtimerow{ margin-top:2px !important; } #detail .dhead-pills{ display:flex; flex-wrap:wrap; align-items:center; gap:10px; margin-top:12px; } #detail .dhead-pills > *{ margin:0 !important; } #detail .dhead-pills > #dConds{ display:contents; } #detail .dhead .ddivider{ margin:14px 0 !important; } #detail .dbody{ display:block !important; padding-bottom:0 !important; margin-bottom:0 !important; min-height:0 !important; } #detail .d-hostabout{ display:grid; grid-template-columns:1fr 1fr; gap:16px; align-items:stretch; margin:0 0 14px !important; } #detail .d-hostabout > *{ margin:0 !important; height:100%; } #detail .dhostrow{ margin-bottom:10px !important; } #detail .d-lobbychat{ display:grid; grid-template-columns:1fr 1fr; gap:18px; align-items:start; margin:0 0 14px !important; } #detail .d-lobbychat > *{ margin:0 !important; } #detail .d-lobbychat > .sheet{ height:236px !important; overflow-y:auto; } #detail .joinbarwrap{ position:static !important; bottom:auto !important; width:100%; margin:0 0 14px !important; } #detail .joinbarwrap .joinbar{ width:100% !important; } #detail .dbody > .seewho{ display:block !important; text-align:center !important; margin:0 !important; position:static !important; } #detail .dbody > .joinnote{ display:block !important; text-align:center !important; margin:6px 0 0 !important; position:static !important; } #detail .d-bottomback{ display:none !important; } } /* ===== create plan: single-row categories + two columns ===== */ @media (min-width:1024px){ #create.active{ max-width:1080px !important; } #create #createForm{ max-width:none !important; margin:0 auto !important; padding:0 24px !important; } #create .ncp{ max-width:none !important; } #create .ncp-cols{ display:grid; grid-template-columns:1fr 1fr; gap:28px; align-items:start; margin-top:6px; } #create .ncp-colL{ display:flex; flex-direction:column; gap:18px; min-width:0; } #create .ncp-colR{ position:sticky; top:16px; align-self:start; min-width:0; } #create .ncp-colL > .ncp-field, #create .ncp-colR > .ncp-field{ margin:0 !important; } #create .ncp-colR > .ncp-field{ background:rgba(255,255,255,.02); border:1px solid rgba(255,255,255,.06); border-radius:16px; padding:18px !important; } #create .ncp > .ncp-field:last-child{ margin-top:22px !important; } #create .ncp > .ncp-field:first-of-type{ margin-bottom:20px !important; } #create [data-catgrid]{ display:grid !important; grid-template-columns:repeat(8,1fr) !important; gap:10px !important; } #create [data-catgrid] > *{ width:auto !important; min-width:0 !important; } } /* keep injected sidebar bits invisible if a desktop window is dragged narrow */ @media (max-width:1023px){ .navbrand, a.navget, .navfoot-gecko{ display:none !important; } }