/* Welcome Property Management — theming + control panel. The page markup uses inline styles that reference these CSS variables. Three independent axes are driven by data-* attributes on : data-color, data-style, data-accent, data-compact. */ *{box-sizing:border-box;margin:0;padding:0;} html{scroll-behavior:smooth;} body{font-family:var(--font-body);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;} ::selection{background:var(--accent);color:#fff;} :root{ --surface:#ffffff; --font-body:'Public Sans',system-ui,sans-serif; --sec-pad:112px; } /* Fallback tokens (green + heritage + gold) so the page is styled even before any data-* applies */ html{ --bg:#f6f3ec; --ink:#1b2531; --ink-soft:#525c68; --line:#e7e1d4; --navy:#1e3d2f; --navy-deep:#13281f; --hero-bg:linear-gradient(150deg,#1e3d2f 0%,#13281f 100%); --accent:#b0894f; --accent-ink:#84632e; --accent-12:rgba(176,137,79,.13); --accent-18:rgba(176,137,79,.2); --accent-40:rgba(176,137,79,.42); --radius:4px; --font-display:'Source Serif 4',Georgia,serif; } /* ---- Brand color axis ---- */ html[data-color="green"]{ --navy:#1e3d2f; --navy-deep:#13281f; --hero-bg:linear-gradient(150deg,#1e3d2f 0%,#13281f 100%); } html[data-color="blue"]{ --navy:#16324f; --navy-deep:#0f2438; --hero-bg:linear-gradient(150deg,#16324f 0%,#0f2438 100%); } html[data-color="charcoal"]{ --navy:#2b3138; --navy-deep:#1b1f24; --hero-bg:linear-gradient(150deg,#2b3138 0%,#1b1f24 100%); } /* ---- Style direction axis (type + radius + neutrals) ---- */ html[data-style="heritage"]{ --font-display:'Source Serif 4',Georgia,serif; --radius:4px; --bg:#f6f3ec; --line:#e7e1d4; --ink:#1b2531; --ink-soft:#525c68; } html[data-style="institutional"]{ --font-display:'Archivo',system-ui,sans-serif; --radius:3px; --bg:#f3f6fa; --line:#e2e8f0; --ink:#0f1b2a; --ink-soft:#4a5868; } html[data-style="tech"]{ --font-display:'Archivo',system-ui,sans-serif; --radius:16px; --bg:#fbfcfe; --line:#e8edf4; --ink:#0b1220; --ink-soft:#52617a; } /* ---- Accent axis (same chroma/lightness, varied hue) ---- */ html[data-accent="gold"]{ --accent:#b0894f; --accent-ink:#84632e; --accent-12:rgba(176,137,79,.13); --accent-18:rgba(176,137,79,.2); --accent-40:rgba(176,137,79,.42); } html[data-accent="copper"]{ --accent:#b06a4f; --accent-ink:#854431; --accent-12:rgba(176,106,79,.13); --accent-18:rgba(176,106,79,.2); --accent-40:rgba(176,106,79,.42); } html[data-accent="sage"]{ --accent:#7f9460; --accent-ink:#566640; --accent-12:rgba(127,148,96,.14); --accent-18:rgba(127,148,96,.22); --accent-40:rgba(127,148,96,.44); } /* ---- Spacing axis ---- */ html[data-compact="true"]{ --sec-pad:76px; } @keyframes wpmrise{from{opacity:0;transform:translateY(14px);}to{opacity:1;transform:translateY(0);}} /* ===== Customize panel ===== */ .tw{position:fixed;right:20px;bottom:20px;z-index:1000;font-family:var(--font-body);} .tw-fab{display:inline-flex;align-items:center;gap:8px;background:#1b2531;color:#fff;border:none;padding:12px 18px;border-radius:100px;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.22);} .tw-fab:hover{background:#0f1620;} .tw-panel{position:absolute;right:0;bottom:56px;width:286px;background:#fff;border-radius:14px;box-shadow:0 24px 60px rgba(0,0,0,.28);padding:18px;border:1px solid #ecebe5;} .tw-panel[hidden]{display:none;} .tw-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:16px;} .tw-head span{font-weight:700;font-size:15px;color:#1b2531;} .tw-x{border:none;background:none;font-size:20px;cursor:pointer;color:#9a9ea6;line-height:1;padding:0 2px;} .tw-group{margin-bottom:16px;} .tw-group>label{display:block;font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.08em;color:#9a9ea6;margin-bottom:9px;} .tw-swatches{display:flex;gap:12px;} .tw-swatches button{width:34px;height:34px;border-radius:50%;border:none;cursor:pointer;outline:2px solid transparent;outline-offset:2px;padding:0;} .tw-swatches button[aria-pressed="true"]{outline-color:#1b2531;} .tw-seg{display:flex;background:#f1efe9;border-radius:9px;padding:3px;gap:2px;} .tw-seg button{flex:1;border:none;background:none;padding:8px 4px;font-size:12px;font-weight:600;color:#6b7078;border-radius:6px;cursor:pointer;} .tw-seg button[aria-pressed="true"]{background:#fff;color:#1b2531;box-shadow:0 1px 3px rgba(0,0,0,.14);} .tw-row{display:flex;justify-content:space-between;align-items:center;} .tw-row>label{margin-bottom:0;} .tw-toggle{width:44px;height:26px;border-radius:100px;background:#d8d5cc;border:none;position:relative;cursor:pointer;transition:background .15s;flex:none;} .tw-toggle::after{content:"";position:absolute;top:3px;left:3px;width:20px;height:20px;border-radius:50%;background:#fff;transition:transform .15s;box-shadow:0 1px 2px rgba(0,0,0,.25);} .tw-toggle[aria-checked="true"]{background:#1b2531;} .tw-toggle[aria-checked="true"]::after{transform:translateX(18px);} .tw-reset{width:100%;margin-top:2px;background:none;border:1px solid #e6e3db;color:#6b7078;padding:9px;border-radius:8px;font-size:13px;font-weight:600;cursor:pointer;} .tw-reset:hover{background:#faf9f6;} @media print{ .tw{display:none;} } @media (max-width:640px){ .tw-panel{width:calc(100vw - 40px);} } /* FAQ accordion (native
) */ details > summary{list-style:none;} details > summary::-webkit-details-marker{display:none;} .faq-plus{transition:transform .2s ease;} details[open] .faq-plus{transform:rotate(45deg);} /* ========================================================================= Responsive / mobile layout The page markup uses inline styles, so these rules target the inline "signatures" via attribute selectors + !important to override them. One file covers all pages (they share these patterns). ========================================================================= */ @media (max-width:768px){ /* tighten vertical section rhythm */ html{ --sec-pad:64px !important; } /* slimmer side gutters on every centered container */ [style*="max-width:1240px"]{ padding-left:20px !important; padding-right:20px !important; } /* collapse multi-column grids -> single column */ [style*="grid-template-columns:repeat(2,1fr)"], [style*="grid-template-columns:repeat(3,1fr)"], [style*="grid-template-columns:.85fr 1.15fr"], [style*="grid-template-columns:1fr 1fr"]{ grid-template-columns:1fr !important; } /* stats band -> 2-up, drop the vertical dividers */ [style*="grid-template-columns:repeat(4,1fr)"]{ grid-template-columns:1fr 1fr !important; } [style*="border-left:1px solid var(--line)"]{ border-left:0 !important; } /* footer -> 2-up */ [style*="grid-template-columns:1.5fr 1fr 1fr 1fr"]{ grid-template-columns:1fr 1fr !important; } /* two-column hero / overview rows -> stack with full-width children */ [style*="display:flex;gap:64px"]{ flex-wrap:wrap !important; gap:36px !important; align-items:flex-start !important; } [style*="flex:1.05 1 0"], [style*="flex:.95 1 0"], [style*="flex:1 1 360px"], [style*="flex:1 1 430px"]{ flex-basis:100% !important; width:100% !important; min-width:0 !important; } /* trim the homepage hero's tall padding */ [style*="padding:96px 40px 104px"]{ padding-top:60px !important; padding-bottom:64px !important; } /* roomier card padding on the proposal form */ [style*="padding:36px"]{ padding:22px !important; } /* mobile nav: hamburger-controlled dropdown */ .wpm-burger{ display:inline-flex !important; } header a[style*="padding:11px 20px"]{ display:none !important; } /* hide the desktop CTA on phones */ nav[style*="gap:26px"]{ display:none !important; } /* nav closed by default */ html[data-nav="open"] nav[style*="gap:26px"]{ display:flex !important; flex-direction:column !important; align-items:stretch !important; position:absolute !important; top:100% !important; left:0 !important; right:0 !important; background:var(--surface) !important; border-bottom:1px solid var(--line) !important; box-shadow:0 16px 30px rgba(0,0,0,.12) !important; padding:8px 20px 14px !important; gap:0 !important; } html[data-nav="open"] nav[style*="gap:26px"] a{ padding:13px 4px !important; font-size:16px !important; border-bottom:1px solid var(--line) !important; } html[data-nav="open"] nav[style*="gap:26px"] a:last-child{ border-bottom:0 !important; } } /* Hamburger button — hidden on desktop (shown on phones by the rule above). Injected by app.js. */ .wpm-burger{ display:none; flex:none; flex-direction:column; justify-content:center; gap:5px; width:44px; height:40px; padding:0 9px; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); cursor:pointer; } .wpm-burger span{ display:block; width:100%; height:2px; background:var(--ink); border-radius:2px; transition:transform .2s ease, opacity .2s ease; } html[data-nav="open"] .wpm-burger span:nth-child(1){ transform:translateY(7px) rotate(45deg); } html[data-nav="open"] .wpm-burger span:nth-child(2){ opacity:0; } html[data-nav="open"] .wpm-burger span:nth-child(3){ transform:translateY(-7px) rotate(-45deg); } /* ========================================================================= Logo mark variants — switchable from the Customize panel (data-logo on ). Targets the header mark in the upper-left. "square" = original look (no rule). Marks stay theme-aware: they recolor with the active brand color. ========================================================================= */ html[data-logo="rounded"] [style*="width:42px;height:42px;border-radius:var(--radius);background:var(--navy)"]{ border-radius:13px !important; } html[data-logo="circle"] [style*="width:42px;height:42px;border-radius:var(--radius);background:var(--navy)"]{ background:transparent !important; border:2px solid var(--navy) !important; color:var(--navy) !important; border-radius:50% !important; }