/* ============================================================================ CONTROL-PANEL EFFECTS + THE PANEL UI ITSELF The panel writes data-attrs / inline CSS vars on ; these rules react. Loads after layouts.css so [data-cw] / [data-card] win over per-layout rules. ============================================================================ */ /* ---- content width (panel override of the per-layout container width) ----- */ html[data-cw="boxed"] .wlre-container{max-width:min(1200px,92vw);} html[data-cw="wide"] .wlre-container{max-width:98vw;} html[data-cw="full"] .wlre-container{max-width:100%;padding-inline:clamp(.5rem,1.4vw,1.4rem);} /* ---- card style ----------------------------------------------------------- */ html[data-card="flat"] .wlre-pcard{box-shadow:none;border-color:var(--c-border);} html[data-card="elevated"] .wlre-pcard{box-shadow:var(--card-shadow);} html[data-card="elevated"] .wlre-pcard:hover{box-shadow:var(--shadow-3);} html[data-card="3d"] .wlre-pcard{box-shadow:var(--card-shadow,var(--shadow-3));transform-style:preserve-3d;transition:transform .15s var(--ease-base),box-shadow .25s var(--ease-base);will-change:transform;} html[data-card="3d"] .wlre-pcard:hover{box-shadow:var(--shadow-4);} html[data-card="3d"] .wlre-pcard .wlre-pcard__media img{transform:none;} /* overlay: turn the standard 'below' card into an image-fill card with text on a scrim */ html[data-card="overlay"] .wlre-pcard{position:relative;aspect-ratio:3/4;} html[data-card="overlay"] .wlre-pcard .wlre-pcard__media{position:absolute;inset:0;aspect-ratio:auto;z-index:1;} html[data-card="overlay"] .wlre-pcard .wlre-pcard__media img{height:100%;} html[data-card="overlay"] .wlre-pcard .wlre-pcard__body{position:relative;z-index:2;margin-top:auto;color:#fff;background:linear-gradient(180deg,transparent 8%,rgba(0,0,0,.82));padding-top:calc(var(--space-7) * var(--den,1));} html[data-card="overlay"] .wlre-pcard .wlre-pcard__title a, html[data-card="overlay"] .wlre-pcard .wlre-pcard__title, html[data-card="overlay"] .wlre-pcard .wlre-pcard__loc, html[data-card="overlay"] .wlre-pcard .wlre-pcard__type, html[data-card="overlay"] .wlre-pcard .wlre-pcard__price, html[data-card="overlay"] .wlre-pcard .wlre-pcard__row, html[data-card="overlay"] .wlre-pcard .wlre-pcard__specs{color:#fff;} html[data-card="overlay"] .wlre-pcard .wlre-pcard__row, html[data-card="overlay"] .wlre-pcard .wlre-pcard__specs{color:rgba(255,255,255,.9);} html[data-card="overlay"] .wlre-pcard .wlre-pcard__view{color:rgba(255,255,255,.95);opacity:1;} html[data-card="overlay"] .wlre-pcard .wlre-pcard__specs li{background:rgba(255,255,255,.16);color:#fff;} /* the standalone 'below' price pill would hide under the body gradient — move it to the top-right corner */ html[data-card="overlay"] .wlre-pcard--below .wlre-pcard__price{top:.6rem;right:.6rem;left:auto;bottom:auto;z-index:3;} /* horizontal cards stay side-by-side even in overlay mode (don't squash them into a 3:4 box) */ html[data-card="overlay"] .wlre-pcard--horizontal{aspect-ratio:auto;} html[data-card="overlay"] .wlre-pcard--horizontal .wlre-pcard__media{position:relative;inset:auto;} html[data-card="overlay"] .wlre-pcard--horizontal .wlre-pcard__body{margin-top:0;background:none;color:inherit;padding-top:var(--space-3);} html[data-card="overlay"] .wlre-pcard--horizontal .wlre-pcard__title, html[data-card="overlay"] .wlre-pcard--horizontal .wlre-pcard__loc, html[data-card="overlay"] .wlre-pcard--horizontal .wlre-pcard__view, html[data-card="overlay"] .wlre-pcard--horizontal .wlre-pcard__row{color:inherit;} /* ---- motion off ----------------------------------------------------------- */ html[data-motion="off"] *, html[data-motion="off"] *::before, html[data-motion="off"] *::after{ animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important;scroll-behavior:auto!important; } html[data-motion="off"] .wlre-reveal{opacity:1!important;transform:none!important;} /* ---- card body padding scales a little with density ----------------------- */ .wlre-pcard__body{padding:calc(var(--space-3) * max(.8, var(--den,1)));} /* ============================================================================ THE PANEL DRAWER ============================================================================ */ .wlre-panel{ position:fixed;top:0;right:0;bottom:0;width:min(330px,92vw);z-index:100000; background:#1b1d22;color:#e8eaed;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;font-size:13px;line-height:1.45; box-shadow:-8px 0 40px rgba(0,0,0,.4);transform:translateX(100%);transition:transform .28s cubic-bezier(.2,.7,.2,1); display:flex;flex-direction:column; } .wlre-panel.is-open{transform:none;} .wlre-panel *{box-sizing:border-box;} .wlre-panel__tab{ position:fixed;right:0;top:50%;transform:translateY(-50%);z-index:99999; background:#1b1d22;color:#fff;border:0;border-radius:8px 0 0 8px;padding:14px 9px;cursor:pointer; writing-mode:vertical-rl;text-orientation:mixed;font:600 12px/1 system-ui,sans-serif;letter-spacing:.08em;box-shadow:-4px 0 16px rgba(0,0,0,.3); } .wlre-panel.is-open ~ .wlre-panel__tab,.wlre-panel.is-open + .wlre-panel__tab{display:none;} .wlre-panel__head{display:flex;align-items:center;justify-content:space-between;padding:12px 14px;border-bottom:1px solid #34373d;flex:0 0 auto;} .wlre-panel__head strong{font-size:13px;letter-spacing:.04em;} .wlre-panel__close{background:none;border:0;color:#9aa0a8;font-size:20px;cursor:pointer;line-height:1;padding:0 4px;} .wlre-panel__close:hover{color:#fff;} .wlre-panel__body{overflow-y:auto;padding:12px 14px 20px;flex:1;} .wlre-panel__grp{margin-bottom:14px;} .wlre-panel__grp > label{display:block;font-size:11px;text-transform:uppercase;letter-spacing:.09em;color:#9aa0a8;margin-bottom:6px;font-weight:600;} .wlre-panel select{width:100%;background:#26282e;color:#e8eaed;border:1px solid #3a3d44;border-radius:6px;padding:7px 8px;font:inherit;} .wlre-panel__seg{display:flex;gap:4px;flex-wrap:wrap;} .wlre-panel__seg button{flex:1 1 auto;min-width:auto;background:#26282e;color:#cfd2d8;border:1px solid #3a3d44;border-radius:6px;padding:6px 4px;cursor:pointer;font:inherit;font-size:11.5px;} .wlre-panel__seg button.is-active{background:#3d6bff;border-color:#3d6bff;color:#fff;} .wlre-panel__seg button:hover{border-color:#5a5e66;} .wlre-panel input[type=range]{width:100%;accent-color:#3d6bff;} .wlre-panel__row{display:flex;align-items:center;gap:8px;} .wlre-panel__row output{font-size:11px;color:#9aa0a8;min-width:34px;text-align:right;} .wlre-panel__swatches{display:grid;grid-template-columns:repeat(auto-fill,minmax(34px,1fr));gap:5px;} .wlre-panel__swatches button{aspect-ratio:1;border-radius:6px;border:2px solid transparent;cursor:pointer;padding:0;background-clip:padding-box;} .wlre-panel__swatches button.is-active{border-color:#fff;box-shadow:0 0 0 2px #3d6bff;} .wlre-panel__actions{display:flex;gap:6px;margin-top:6px;} .wlre-panel__actions button{flex:1;background:#3d6bff;color:#fff;border:0;border-radius:6px;padding:8px 4px;cursor:pointer;font:inherit;font-size:11.5px;font-weight:600;} .wlre-panel__actions button.wlre-panel__sec{background:#2c2f36;color:#cfd2d8;} .wlre-panel__actions button:hover{filter:brightness(1.08);} .wlre-panel__toggle{display:inline-flex;align-items:center;gap:8px;cursor:pointer;} .wlre-panel__toggle input{accent-color:#3d6bff;width:16px;height:16px;} .wlre-panel__note{font-size:10.5px;color:#7d828a;margin-top:2px;} @media (max-width:560px){.wlre-panel{width:100vw;}} /* keep the panel out of the way of the page when open (push nothing — it overlays) */ @media print{.wlre-panel,.wlre-panel__tab{display:none;}} /* ---- featured-listings carousel (panel: Featured = Carousel) --------------- */ .wlre-listing--carousel{ display:flex !important;flex-wrap:nowrap;overflow-x:auto;overscroll-behavior-x:contain; scroll-snap-type:x mandatory;gap:calc(var(--space-5) * var(--den,1));padding-bottom:var(--space-2); -webkit-overflow-scrolling:touch;scrollbar-width:thin; } .wlre-listing--carousel > *{flex:0 0 calc(min(330px, 82vw) * var(--den,1));scroll-snap-align:start;} .wlre-listing--carousel::-webkit-scrollbar{height:8px;} .wlre-listing--carousel::-webkit-scrollbar-thumb{background:var(--c-border);border-radius:99px;} /* ============================================================================ PANEL v2 — combo chip, collapsible sections, presets, mobile bottom-sheet ============================================================================ */ .wlre-panel__combo{ font-size:11px;line-height:1.55;color:#cfd2d8;background:#26282e;border:1px solid #34373d;border-radius:6px; padding:8px 10px;margin-bottom:12px;white-space:pre-line;letter-spacing:.03em;font-variant:small-caps; } .wlre-panel__sect{border-top:1px solid #2c2f35;} .wlre-panel__sect:first-of-type{border-top:0;} .wlre-panel__sect > summary{ list-style:none;cursor:pointer;padding:10px 2px;font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:#cfd2d8; display:flex;align-items:center;justify-content:space-between;user-select:none; } .wlre-panel__sect > summary::-webkit-details-marker{display:none;} .wlre-panel__sect > summary::after{content:"▸";color:#7d828a;font-size:11px;transition:transform .18s ease;} .wlre-panel__sect[open] > summary::after{transform:rotate(90deg);} .wlre-panel__sect > summary:hover{color:#fff;} .wlre-panel__sect[open]{padding-bottom:6px;} .wlre-panel__sect .wlre-panel__grp:last-child{margin-bottom:6px;} .wlre-panel__presets{display:grid;grid-template-columns:repeat(3,1fr);gap:5px;} .wlre-panel__presets button{ background:#26282e;color:#dfe2e8;border:1px solid #3a3d44;border-radius:6px;padding:8px 4px;cursor:pointer;font:inherit;font-size:11.5px;font-weight:600; } .wlre-panel__presets button:hover{background:#3d6bff;border-color:#3d6bff;color:#fff;} .wlre-panel__actions + .wlre-panel__actions{margin-top:6px;} /* mobile: panel becomes a bottom sheet, tab sits bottom-right */ @media (max-width:560px){ .wlre-panel{ top:auto;left:0;right:0;bottom:0;width:100vw;max-height:82vh;height:auto; border-radius:14px 14px 0 0;box-shadow:0 -10px 40px rgba(0,0,0,.45); transform:translateY(100%); } .wlre-panel.is-open{transform:none;} .wlre-panel__tab{ top:auto;bottom:14px;right:14px;transform:none;writing-mode:horizontal-tb;text-orientation:initial; border-radius:999px;padding:11px 16px;font-size:13px;box-shadow:0 6px 20px rgba(0,0,0,.35); } .wlre-panel__body{max-height:calc(82vh - 46px);} .wlre-panel__presets{grid-template-columns:repeat(2,1fr);} }