/* villa-compare-finish.css — Phase 4 elevation (villa + compare). Owner: agent B. ═══════════════════════════════════════════════════════════════════════════ Billion-dollar finish pass for the VILLA (Plan Studio) and COMPARE screens. Loaded LAST in , so equal-specificity !important rules here win by source order over styles.css / villa-tune.css. Scope: presentation only. No markup, no JS, no test hooks touched. Language: calm light beige + Eden-green ink + hairline olive. ═══════════════════════════════════════════════════════════════════════════ */ :root{ --fin-hairline:var(--e-line-strong); /* reads on beige AND on glass */ --fin-hairline-soft:var(--e-line); --fin-glass:var(--e-glass-strong); /* .84 — holds 10px caps over any render */ --fin-glass-deep:rgba(255,242,235,.94); --fin-sand:var(--e-surface-2); /* SURFACE role — active tab fill */ --fin-ink:var(--e-ink-strong); /* dark ink ON that sand fill */ --fin-gold:rgba(109,96,61,.85); /* olive replaces the bronze rule */ --fin-bone:var(--e-ink); /* TYPE role — was cream-on-dark */ } /* ═══════════════════════ SCREEN 1 · VILLA (#villaView) ═══════════════════════ */ /* (a) The drawing deserves the wall: give the plan pane a touch more width so the 2000×1414 sheet (width-bound) reads larger; splitter still owns --lpane (JS sets it inline, which always overrides this default). */ @media (orientation:landscape){ .villa-view{--lpane:56%} } /* (a) Drafting-wall surface — plan as large as fits, pinned confidently. Surface already flexes between heading and level tabs (villa-tune) and centers its sheet, giving EQUAL top/bottom margins; here we reclaim the side padding, dress the void as a drafting wall, and pin the sheet. */ @media (orientation:landscape){ .villa-view .drawing-surface{ padding:clamp(2px,.6cqw,6px)!important; } } .villa-view .drawing-surface{position:relative;isolation:isolate} .villa-view .drawing-surface::before{ /* faint drafting grid, barely-there */ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background: repeating-linear-gradient(0deg,rgba(63,89,58,.06) 0 1px,transparent 1px 52px), repeating-linear-gradient(90deg,rgba(63,89,58,.06) 0 1px,transparent 1px 52px); -webkit-mask-image:radial-gradient(85% 85% at 50% 50%,#000 30%,transparent 100%); mask-image:radial-gradient(85% 85% at 50% 50%,#000 30%,transparent 100%); } .villa-view .drawing-surface::after{ /* soft wall vignette behind the sheet */ content:"";position:absolute;inset:0;z-index:0;pointer-events:none; background:radial-gradient(70% 62% at 50% 50%,rgba(228,201,176,.16),transparent 72%); } /* The sheet is absolutely centered in the surface: percentage max-height on a grid item in an auto row is cyclic (silently ignored — the pre-existing portrait clip), while an abs-positioned replaced element resolves cleanly against the surface box at ANY orientation or splitter position. */ .villa-view .drawing-surface img{ position:absolute;inset:0;margin:auto;z-index:1; width:auto;height:auto; max-width:calc(100% - 12px)!important; max-height:calc(100% - 12px)!important; border:1px solid var(--e-line); box-shadow:0 34px 80px rgba(63,89,58,.18),0 8px 22px rgba(63,89,58,.12); } /* (b) Local scrim behind the headline copy — top-left corner, gone by ~55%. Sits above .villa-shade (z1) and below the copy blocks (z3). */ .villa-view .villa-canvas::before{ content:"";position:absolute;inset:0;z-index:2;pointer-events:none; background: radial-gradient(88% 72% at 0% 0%,rgba(255,242,235,.80) 0%,rgba(255,242,235,.55) 30%,rgba(255,242,235,.20) 46%,transparent 58%), linear-gradient(160deg,rgba(255,242,235,.44) 0%,rgba(255,242,235,.16) 34%,transparent 52%); } /* copy clears the fixed EDEN brand chip (chip bottom ≈ 71px from viewport top) */ @media (orientation:landscape){ .villa-view .villa-title{margin-top:clamp(42px,5cqw,62px)!important} } .villa-view .villa-title h2{text-shadow:0 2px 26px rgba(255,242,235,.85)} .villa-view .villa-title .kicker{text-shadow:0 1px 12px rgba(255,242,235,.9)} .villa-view .villa-title>p:last-child{color:var(--e-ink);text-shadow:0 1px 14px rgba(255,242,235,.88);font-size:12px} /* (c) Switcher → refined segmented control: two joined groups (A|B · EAST|WEST), 46px tall, hairline borders, caps 10px/.18em; active = warm sand, dark ink. */ .villa-view .villa-switcher{gap:0!important;align-items:center} .villa-view .villa-switcher button{ position:relative; height:46px!important;min-height:46px!important; padding:0 clamp(14px,2.4cqw,22px)!important; font-size:10px!important;letter-spacing:.18em!important;text-transform:uppercase; border:1px solid var(--fin-hairline)!important;border-radius:0!important; background-color:var(--fin-glass)!important;background-image:none!important; background-blend-mode:normal!important; backdrop-filter:blur(14px) saturate(112%);-webkit-backdrop-filter:blur(14px) saturate(112%); box-shadow:0 0 0 1px rgba(63,89,58,.08),0 10px 26px rgba(63,89,58,.10)!important; color:var(--fin-bone)!important; transition:background-color .28s var(--ease),color .28s var(--ease),border-color .28s var(--ease); white-space:nowrap; } .villa-view .villa-switcher button+button{margin-left:-1px} /* collapse shared hairline inside a group */ .villa-view .villa-switcher button:nth-of-type(1){border-radius:12px 0 0 12px!important} .villa-view .villa-switcher button:nth-of-type(2){border-radius:0 12px 12px 0!important} .villa-view .villa-switcher button:nth-of-type(3){border-radius:12px 0 0 12px!important} .villa-view .villa-switcher button:nth-of-type(4){border-radius:0 12px 12px 0!important} .villa-view .villa-switcher button:hover:not(.is-active){background-color:rgba(63,89,58,.07)!important} .villa-view .villa-switcher button.is-active{ z-index:1; background-color:var(--fin-sand)!important; background-image:var(--matte-grain)!important;background-blend-mode:soft-light!important; background-size:150px 150px!important; border-color:var(--e-line-strong)!important; color:var(--fin-ink)!important; box-shadow:inset 0 1px 0 rgba(255,252,244,.5),0 10px 26px rgba(63,89,58,.10)!important; } /* the divider becomes the quiet gap between the two groups */ .villa-view .villa-switcher span{ width:1px!important;height:20px!important;align-self:center; background:var(--e-line-strong)!important;margin:0 16px!important; } /* (d) Floor tabs — keep size, refine finish. Radius 10, hairline, calm active: sand fill + dark ink + thin gold top rule. No glow. */ .villa-view .level-stack{border:1px solid var(--fin-hairline-soft)!important} .villa-view .level-stack button{ border:1px solid var(--e-line)!important; border-radius:10px!important; box-shadow:none!important; transition:background-color .25s var(--ease),color .25s var(--ease), border-color .25s var(--ease),box-shadow .25s var(--ease); } .villa-view .level-stack button.is-active{ background-color:var(--fin-sand)!important; background-image:var(--matte-grain)!important;background-blend-mode:soft-light!important; color:var(--fin-ink)!important; border-color:var(--e-line-strong)!important; box-shadow:inset 0 2px 0 0 var(--fin-gold)!important; /* thin olive top rule */ } .villa-view .level-stack button.is-active span{color:var(--fin-ink)} .villa-view .level-stack button.is-active small{color:var(--e-ink)!important} .villa-view .level-stack button.is-active .lvl-chev{opacity:.85} /* (e) Actions row — one aligned 52px height, hairline secondaries, BOOK keeps its beige-matte primary finish. Landscape only (portrait keeps the compact stacked studio metrics). */ @media (orientation:landscape){ .villa-view .drawing-actions button{ height:52px!important;min-height:52px!important;max-height:52px; font-size:10px!important;letter-spacing:.16em!important; padding-block:0!important; } .villa-view .drawing-actions button:not(.primary-action){ border:1px solid var(--fin-hairline)!important; background-color:var(--fin-glass-deep)!important; background-image:none!important;background-blend-mode:normal!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 24px rgba(63,89,58,.10)!important; color:var(--fin-bone)!important; transition:background-color .25s var(--ease),border-color .25s var(--ease); } .villa-view .drawing-actions button:not(.primary-action):hover{ background-color:rgba(63,89,58,.07)!important;border-color:var(--e-line-strong)!important; } } /* (a·portrait) Pre-existing fix: in portrait the drawing-surface had an indefinite height, so the plan's max-height:100% collapsed and the sheet ran under the floor tabs (clipped). Flex the studio column — same mechanism villa-tune uses in landscape — so the plan always fits. */ @media (orientation:portrait){ .villa-view .drawing-studio{display:flex;flex-direction:column;gap:8px} .villa-view .panel-heading{flex:0 0 auto} .villa-view .drawing-surface{flex:1 1 auto;height:auto!important;min-height:0;margin:0!important} .villa-view .level-stack,.villa-view .drawing-actions{flex:0 0 auto;margin:0!important} } /* ═══════════════════════ SCREEN 2 · COMPARE (#compareView) ═══════════════════════ */ /* (0) CLIENT · "Compare plans: remove all extra text". The editorial band (.compare-heading — kicker + headline + helper sentence) and the decorative "versus" word were deleted from the markup, so the copy geometry that styles.css laid out for them is now void. Reclaim it: · the sync-levels toggle moves up into the app's top chrome row, optically centred between the fixed brand chip (left) and Saved chip (right); · the two plan windows take the whole stage below that row — wider columns and a slimmer spine, so each drawing renders larger. These override styles.css:309-316 and finish-kit.css:156 (both !important). */ .compare-view .compare-heading{display:none!important} /* belt-and-braces if markup returns */ .compare-view .compare-grid{ left:1.6%!important;right:1.6%!important; top:76px!important;bottom:76px!important; /* 76px clears the fixed top chips; equal inset keeps the pair optically centred */ grid-template-columns:1fr 22px 1fr!important; align-items:center; } .compare-view .sync-control{ left:50%!important;right:auto!important; top:27px!important;bottom:auto!important; transform:translateX(-50%); display:flex!important;align-items:center;gap:12px; z-index:6; } .compare-view .sync-control span{white-space:nowrap} @media (orientation:portrait){ .compare-view .sync-control{top:25px!important} /* match the portrait chip row */ } /* NOTE — the windows keep hugging their content (see (a)) instead of stretching into the freed height: the presenter FAB is fixed bottom-right and its dial keeps a live ~147x177px hit area there, so a full-height right-hand window would bury its level tabs and zoom chips under it. Hugging + centring keeps every control tappable and both windows symmetrical, and the reclaimed room goes into WIDTH (grid insets 3%→1.6%, spine 44→22px, panel padding 16→14px), which is what actually enlarges a 1.414 landscape plan sheet. */ /* (a) Kill the dead bands: each panel hugs its content (selects · plan · levels · meta) and centers in the grid track — margins equal and tight. If content ever exceeds the track, max-height caps it and the plan row shrinks (object-fit contain, never cropped). */ .compare-view .compare-side{ align-self:center; max-height:100%; padding:14px; box-shadow:0 30px 70px rgba(63,89,58,.12); } .compare-view .compare-plan{margin:14px 0!important;padding:0!important;min-height:0} .compare-view .compare-plan img{ border:1px solid var(--e-line); box-shadow:0 26px 60px rgba(63,89,58,.15),0 6px 18px rgba(63,89,58,.10); } /* (b) Selects — fully custom closed state: dark glass, hairline, caps type, inline-SVG bone chevron. Markup/JS untouched. */ .compare-view .compare-selectors{gap:8px} .compare-view .compare-selectors select{ appearance:none!important;-webkit-appearance:none!important; height:46px!important; padding:0 36px 0 15px!important; background-color:var(--fin-glass)!important; background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='7' viewBox='0 0 12 7'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%233f593a' stroke-width='1.1' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E")!important; background-repeat:no-repeat!important; background-position:right 16px center!important; background-size:11px 7px!important; background-blend-mode:normal!important; border:1px solid var(--fin-hairline)!important;border-radius:12px!important; color:var(--fin-bone)!important; font-size:10px!important;letter-spacing:.18em!important;text-transform:uppercase!important; box-shadow:inset 0 1px 0 rgba(255,255,255,.5),0 10px 24px rgba(63,89,58,.10)!important; backdrop-filter:blur(12px) saturate(110%);-webkit-backdrop-filter:blur(12px) saturate(110%); transition:border-color .25s var(--ease),background-color .25s var(--ease); cursor:pointer; } .compare-view .compare-selectors select:hover{border-color:var(--e-line-strong)!important} /* (c) The spine between the two windows — a single fine hairline that fades out at both ends. The serif "versus" marker it used to be interrupted by was removed with the rest of the copy, so the two halves now meet (gap:0). */ .compare-view .compare-axis{ display:flex!important;flex-direction:column;align-items:center;justify-content:center; gap:0;padding:10px 0; align-self:stretch; /* the span used to give it height; keep the spine full-track so the two halves still read (they fade to nothing at both ends) */ } .compare-view .compare-axis::before, .compare-view .compare-axis::after{ content:"";width:1px;flex:1 1 auto;min-height:0; } .compare-view .compare-axis::before{ background:linear-gradient(180deg,transparent,rgba(63,89,58,.20) 60%,rgba(63,89,58,.26)); } .compare-view .compare-axis::after{ background:linear-gradient(0deg,transparent,rgba(63,89,58,.20) 60%,rgba(63,89,58,.26)); } /* (d) Level buttons — same refined tab treatment as the villa studio. */ .compare-view .compare-levels{border:1px solid var(--fin-hairline-soft)!important;gap:1px;padding:0} .compare-view .compare-levels button{ height:44px!important; font-size:10px!important;letter-spacing:.14em!important;text-transform:uppercase; border:1px solid var(--e-line)!important; border-radius:10px!important; box-shadow:none!important; transition:background-color .25s var(--ease),color .25s var(--ease), border-color .25s var(--ease),box-shadow .25s var(--ease); } .compare-view .compare-levels button.is-active{ background-color:var(--fin-sand)!important; background-image:var(--matte-grain)!important;background-blend-mode:soft-light!important; color:var(--fin-ink)!important; border-color:var(--e-line-strong)!important; box-shadow:inset 0 2px 0 0 var(--fin-gold)!important; /* thin olive top rule */ } /* meta line: legible, quiet */ .compare-view .compare-meta{font-size:10px!important;letter-spacing:.14em;color:var(--e-ink);margin-top:12px} /* (f) Per-window plan zoom — pinch/wheel/double-tap zoom the sheet IN PLACE and pan when zoomed, fully scoped to each window. touch-action:none lets the pinch gesture through; overflow:hidden clips the zoomed sheet inside the window. Corner +/- chips mirror the masterplan model-tools affordance; ≥44px touch targets. */ .compare-view .compare-plan{position:relative;touch-action:none;cursor:zoom-in;overflow:hidden} .compare-view .compare-plan img{transition:transform .12s var(--ease);will-change:transform} .compare-view .compare-zoom{ position:absolute;right:10px;bottom:10px;z-index:4;display:flex;gap:0; border:1px solid var(--fin-hairline);border-radius:12px;overflow:hidden; background:var(--fin-glass-deep); backdrop-filter:blur(12px) saturate(112%);-webkit-backdrop-filter:blur(12px) saturate(112%); box-shadow:0 0 0 1px rgba(63,89,58,.09),0 10px 24px rgba(63,89,58,.15); } .compare-view .compare-zoom button{ width:44px;height:44px;min-width:44px;min-height:44px; display:grid;place-items:center; color:var(--fin-bone);font-size:20px;line-height:1;font-weight:300; background:transparent;border:0;cursor:pointer; transition:background-color .2s var(--ease); } .compare-view .compare-zoom button:first-child{border-right:1px solid var(--fin-hairline-soft)} .compare-view .compare-zoom button:hover{background:rgba(63,89,58,.08)} .compare-view .compare-zoom button:active{background:rgba(63,89,58,.14)} /* (e) Toast — refined light-glass chip, hairline + green ink. Consistent app-wide by design (element is shared), look only; show/hide untouched. */ #toast{ background:rgba(255,242,235,.94); color:var(--e-ink-strong); /* NOT --fin-sand: that token is a SURFACE role */ border:1px solid var(--e-line-strong); border-radius:12px; padding:14px 24px; font-size:10px;letter-spacing:.2em; box-shadow:0 0 0 1px rgba(63,89,58,.09),0 22px 50px rgba(63,89,58,.16),inset 0 1px 0 rgba(255,255,255,.6); backdrop-filter:blur(16px) saturate(115%);-webkit-backdrop-filter:blur(16px) saturate(115%); }