/* ═══════════════════════════════════════════════════════════
ENSO CLIENT PORTAL V3 – Dashboard
═══════════════════════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--black: #000000;
--dark: #1E1E1E;
--gray: #59585A;
--gray-dark: #616161;
--gray-light: #E7E6E8;
--brown: #95674C;
--brown-dark: #77523D;
--brown-light: #C4A693;
--orange: #FF7000;
--white: #FFFFFF;
--off-white: #F4F0E9;
--off-white-light: #F9F5EE;
--off-white-dark: #EAE2D9;
--green: #4CAE50;
--green-dark: #2D7A4F;
--yellow: #F6CD33;
--error: #D40000;
--font: 'Manrope', sans-serif;
--font-accent: 'Cormorant Garamond', serif;
--sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
--sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px;
--sp-10: 40px; --sp-12: 48px;
--radius-sm: 6px; --radius-md: 8px; --radius-lg: 12px; --radius-xl: 16px; --radius-full: 9999px;
--shadow-sm: 0 1px 2px rgba(0,0,0,0.06);
--shadow-md: 0 4px 12px rgba(0,0,0,0.08);
--shadow-lg: 0 8px 30px rgba(0,0,0,0.12);
--sidebar-w: 264px;
--ribbon-h: 64px;
--timeline-h: 124px;
}
body {
font-family: var(--font);
color: var(--dark);
background: var(--white);
font-size: 14px;
line-height: 1.5;
-webkit-font-smoothing: antialiased;
}
button { font-family: var(--font); }
.app-shell { display: flex; min-height: 100vh; }
/* ─── Sidebar ─── */
.sidebar {
width: var(--sidebar-w);
background: var(--off-white);
border-right: 1px solid var(--off-white-dark);
display: flex; flex-direction: column;
padding: var(--sp-5);
gap: var(--sp-5);
position: sticky; top: 0; height: 100vh;
flex-shrink: 0;
overflow-y: auto;
}
.sb-logo { font-size: 30px; font-weight: 700; color: var(--dark); letter-spacing: -0.02em; }
.sb-project {
background: var(--white);
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-lg);
padding: var(--sp-2) var(--sp-3);
display: flex;
align-items: center;
gap: var(--sp-3);
}
.sb-project-photo {
width: 64px;
aspect-ratio: 4 / 3;
border-radius: var(--radius-sm);
background: linear-gradient(135deg, #d9c5b1 0%, #b8997d 50%, #8a6747 100%);
flex-shrink: 0;
position: relative;
overflow: hidden;
}
.sb-project-photo::after {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(0,0,0,0.18) 100%);
}
.sb-project-text { flex: 1; min-width: 0; }
.sb-project-label { font-size: 10px; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: 0.06em; }
.sb-project-address { font-size: 13px; font-weight: 600; color: var(--dark); line-height: 1.3; margin-top: 4px; }
.sb-section-label { font-size: 10px; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: 0.06em; padding: 0 var(--sp-2); margin-bottom: 6px; }
.sb-nav { display: flex; flex-direction: column; gap: 2px; }
.sb-item {
display: flex; align-items: center; gap: var(--sp-3);
padding: 10px var(--sp-3);
border-radius: var(--radius-md);
font-size: 13.5px; font-weight: 500; color: var(--gray);
cursor: pointer; transition: all 0.15s;
background: none; border: none; text-align: left;
width: 100%;
font-family: var(--font);
}
.sb-item:hover { background: var(--off-white-dark); color: var(--dark); }
.sb-item.active { background: var(--off-white-dark); color: var(--dark); font-weight: 600; }
.sb-item svg { flex-shrink: 0; }
.sb-item-lock { margin-left: auto; color: var(--gray); }
.sb-item-badge {
margin-left: auto;
font-size: 10.5px;
font-weight: 700;
color: var(--brown);
background: var(--off-white);
padding: 2px 7px;
border-radius: 10px;
letter-spacing: 0.02em;
font-variant-numeric: tabular-nums;
}
.sb-item.active .sb-item-badge {
background: var(--white);
color: var(--brown-dark);
}
.sb-item.locked { color: var(--gray); cursor: pointer; }
.sb-item.locked:hover { background: var(--off-white-dark); }
/* Selections nav item swaps badge ↔ lock based on .locked. When unlocked, the badge
shows progress (e.g. "14/24"); when locked, the lock icon replaces it. */
[data-selections-nav].locked [data-selections-badge] { display: none; }
[data-selections-nav]:not(.locked) [data-selections-lock] { display: none; }
.sb-item-label { display: inline; }
.sb-item-sub {
font-size: 13.5px;
color: var(--gray);
font-weight: 400;
margin-left: 1px;
}
.sb-item.active .sb-item-sub { color: var(--gray); }
.sb-divider { border: none; border-top: 1px solid var(--off-white-dark); margin: 4px 0; }
.sb-divider-top { margin: var(--sp-1) 0 var(--sp-2); }
.sb-team {
display: flex; flex-direction: column; gap: 8px;
padding: var(--sp-3);
background: var(--white);
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-md);
}
.sb-team-member { display: flex; align-items: center; gap: 8px; }
.sb-team-avatar { width: 28px; height: 28px; border-radius: 50%; background: var(--brown); color: white; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 600; }
.sb-team-info { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.sb-team-name { font-size: 12px; font-weight: 600; color: var(--dark); }
.sb-team-role { font-size: 10px; color: var(--gray); }
.sb-bottom {
margin-top: auto;
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.sb-user-wrapper { position: relative; }
.sb-user {
display: flex; align-items: center; gap: 10px;
padding: var(--sp-2);
border-radius: var(--radius-md);
cursor: pointer;
border: none;
background: var(--off-white-light);
width: 100%;
font-family: var(--font);
text-align: left;
transition: background 0.15s;
}
.sb-user:hover { background: var(--off-white-dark); }
.sb-user-wrapper.open .sb-user { background: var(--off-white-dark); }
.sb-user-avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--brown); color: white; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 600; flex-shrink: 0; }
.sb-user-info { flex: 1; min-width: 0; }
.sb-user-name { font-size: 13px; font-weight: 600; color: var(--dark); }
.sb-user-sub { font-size: 11px; color: var(--gray); }
.sb-user-chevron {
color: var(--gray);
transition: transform 0.2s;
flex-shrink: 0;
}
.sb-user-wrapper.open .sb-user-chevron { transform: rotate(180deg); }
.sb-user-menu {
position: absolute;
bottom: calc(100% + 6px);
left: 0; right: 0;
background: var(--white);
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-md);
box-shadow: 0 12px 32px rgba(0,0,0,0.1);
padding: 4px;
display: none;
flex-direction: column;
z-index: 20;
}
.sb-user-wrapper.open .sb-user-menu { display: flex; }
.sb-user-menu-item {
display: flex; align-items: center; gap: 12px;
padding: 10px 12px;
border: none;
background: none;
cursor: pointer;
border-radius: var(--radius-sm);
font-family: var(--font);
text-align: left;
font-size: 14px;
color: var(--dark);
font-weight: 500;
}
.sb-user-menu-item:hover { background: var(--off-white-light); }
.sb-user-menu-item svg {
color: var(--gray);
flex-shrink: 0;
}
/* ─── Main (white background, full width) ─── */
.main { flex: 1; min-width: 0; background: var(--white); }
/* ─── Ribbon (full width) ─── */
.ribbon {
background: var(--white);
border-bottom: 1px solid var(--off-white-dark);
padding: var(--sp-4) var(--sp-7);
display: flex; align-items: center; justify-content: space-between;
gap: var(--sp-5);
position: sticky; top: 0; z-index: 20;
height: var(--ribbon-h);
}
.ribbon-next { display: flex; align-items: center; gap: var(--sp-3); }
.ribbon-next-icon {
width: 36px; height: 36px;
border-radius: var(--radius-md);
background: var(--off-white);
color: var(--brown);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.ribbon-next-text { display: flex; flex-direction: column; line-height: 1.2; }
.ribbon-next-label { font-size: 10px; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: 0.06em; }
.ribbon-next-detail { font-size: 14px; font-weight: 600; color: var(--dark); margin-top: 2px; }
.ribbon-next-detail .countdown { color: var(--brown); font-weight: 600; }
.ribbon-btn-add {
display: inline-flex; align-items: center; gap: 6px;
padding: 8px 14px;
background: var(--white);
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-md);
color: var(--brown);
font-size: 13px; font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.ribbon-btn-add:hover {
background: var(--off-white);
border-color: var(--brown-light);
}
.ribbon-btn-add .price {
color: var(--gray);
font-size: 13px;
font-weight: 600;
}
/* ─── Timeline (full width) ─── */
.timeline-nav {
background: var(--white);
border-bottom: 1px solid var(--off-white-dark);
padding: var(--sp-5) var(--sp-12) var(--sp-6);
position: sticky; top: var(--ribbon-h); z-index: 19;
}
.timeline-rail {
position: relative;
display: flex;
align-items: flex-start;
}
.timeline-line {
position: absolute;
top: 16px;
left: calc(100% / 5 / 2);
right: calc(100% / 5 / 2);
height: 2px;
background: var(--off-white-dark);
z-index: 0;
}
.timeline-line-fill {
position: absolute;
top: 16px;
left: calc(100% / 5 / 2);
height: 2px;
background: var(--green);
z-index: 1;
transition: width 0.4s ease;
}
.timeline-node {
flex: 1;
display: flex; flex-direction: column; align-items: center;
position: relative; z-index: 2;
cursor: pointer;
background: none; border: none;
font-family: var(--font);
padding: 0;
}
/* DC5 was removed – the permits-required scenario now keeps 5 nodes (IP · DC1 · DC2
· DC3 · DC4) and moves the Contract Signing tag earlier in the timeline rather
than adding a sixth call. See setPermits() in the JS for the tag-position logic. */
.timeline-node-circle {
width: 32px; height: 32px;
border-radius: 50%;
background: var(--white);
border: 2px solid var(--off-white-dark);
display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 700;
color: var(--gray);
transition: all 0.2s;
}
.timeline-node.completed .timeline-node-circle { background: var(--green); border-color: var(--green); color: white; }
.timeline-node.today .timeline-node-circle {
background: var(--brown); border-color: var(--brown); color: white;
box-shadow: 0 0 0 4px var(--white), 0 0 0 6px var(--brown-light);
}
.timeline-node.today.today-deselected .timeline-node-circle {
background: var(--white);
border-color: var(--brown);
color: var(--brown);
box-shadow: none;
}
.timeline-node.today.today-deselected .timeline-node-date {
color: var(--gray);
font-weight: 600;
}
.timeline-node.upcoming .timeline-node-circle { background: var(--white); border-color: var(--off-white-dark); color: var(--gray); }
.timeline-node.locked .timeline-node-circle {
background: var(--gray-light);
border-color: var(--gray-light);
color: var(--gray);
/* Same-color halo brings the visual diameter up to match selected/completed
circles (which have a 6px outer ring), so locked nodes don't appear smaller
when sitting next to a selected node. */
box-shadow: 0 0 0 6px var(--gray-light);
}
.timeline-node.selected .timeline-node-circle {
box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--brown);
}
.timeline-node.selected.completed .timeline-node-circle {
box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--green);
}
.timeline-node.selected::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 36px;
height: 3px;
background: var(--brown);
border-radius: 2px;
}
.timeline-node.selected.completed::after {
background: var(--green);
}
.timeline-node-meta {
display: flex; flex-direction: column; align-items: center;
margin-top: 10px;
text-align: center;
max-width: 100%;
}
.timeline-node-label {
font-size: 12px;
font-weight: 600;
color: var(--gray);
line-height: 1.25;
max-width: 100%;
/* Allow wrapping for longer labels like "Initial Proposal" / "Final Delivery"
so they stack inside their column rather than overflowing horizontally. */
}
.timeline-node.completed .timeline-node-label,
.timeline-node.today .timeline-node-label { color: var(--dark); }
.timeline-node.selected .timeline-node-label { color: var(--brown); font-weight: 700; }
.timeline-node-date {
font-size: 10.5px;
color: var(--gray);
text-transform: uppercase;
letter-spacing: 0.04em;
font-weight: 600;
margin-top: 2px;
}
.timeline-node.today .timeline-node-date { color: var(--brown); font-weight: 700; }
.timeline-node.selected .timeline-node-date { color: var(--brown); font-weight: 700; }
.timeline-node.selected.completed .timeline-node-label,
.timeline-node.selected.completed .timeline-node-date { color: var(--green-dark); }
/* Stage tag – small pill below the date, used to label nodes whose function is special
(e.g. "Contract Signing" for Final Delivery). */
.timeline-node-tag {
display: inline-block;
margin-top: 4px;
font-size: 9.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--brown);
background: var(--off-white);
padding: 2px 6px;
border-radius: 3px;
white-space: nowrap;
}
.timeline-node.today .timeline-node-tag,
.timeline-node.selected .timeline-node-tag {
color: var(--brown-dark);
background: var(--off-white-dark);
}
/* ─── View containers ─── */
.view { display: none; }
.view.active { display: block; }
.content-area {
max-width: 1180px;
margin: 0 auto;
padding: var(--sp-6) var(--sp-7) 80px;
}
/* ─── Action Items ─── */
.action-items {
background: var(--white);
border: 1px solid var(--off-white-dark);
border-left: 4px solid var(--brown);
border-radius: var(--radius-lg);
padding: var(--sp-5);
margin-bottom: var(--sp-5);
}
.action-items.hidden { display: none; }
.action-items-header {
display: flex;
align-items: center;
gap: var(--sp-4);
margin-bottom: var(--sp-5);
}
.action-items-countdown-box {
background: var(--brown);
color: white;
border-radius: var(--radius-md);
padding: 10px 14px;
text-align: center;
flex-shrink: 0;
min-width: 68px;
display: flex;
flex-direction: column;
align-items: center;
line-height: 1;
}
.action-items-countdown-num {
font-size: 30px;
font-weight: 800;
letter-spacing: -0.02em;
}
.action-items-countdown-label {
font-size: 9.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
margin-top: 5px;
opacity: 0.9;
}
.action-items-countdown-box.compact .action-items-countdown-num {
font-size: 18px;
}
.action-items-title-group {
display: flex;
flex-direction: column;
}
.action-items-title {
font-size: 22px;
font-weight: 700;
color: var(--dark);
line-height: 1.2;
}
.action-items-subtitle {
font-size: 13.5px;
color: var(--gray);
margin-top: 3px;
}
.action-items-list { display: flex; flex-direction: column; gap: 6px; }
.action-item {
display: flex; align-items: flex-start; gap: var(--sp-3);
padding: 10px 12px;
background: var(--off-white-light);
border: 1px solid transparent;
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.15s;
}
.action-item:hover { border-color: var(--off-white-dark); background: var(--off-white); }
.action-item-check {
width: 20px; height: 20px;
border: 1.5px solid var(--off-white-dark);
border-radius: 50%;
background: var(--white);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0; margin-top: 1px;
color: transparent;
transition: all 0.15s;
}
.action-item.done .action-item-check { background: var(--green); border-color: var(--green); color: white; }
.action-item.done .action-item-text { color: var(--gray); text-decoration: line-through; }
.action-item-text { font-size: 13.5px; line-height: 1.4; color: var(--dark); }
.action-item-link {
display: inline-block;
margin-left: 6px;
font-size: 13px;
font-weight: 700;
color: var(--brown);
text-decoration: none;
border-bottom: 1px solid rgba(149, 103, 76, 0.35);
padding-bottom: 1px;
cursor: pointer;
white-space: nowrap;
transition: color 0.15s, border-color 0.15s;
}
.action-item-link:hover { color: var(--brown-dark); border-bottom-color: var(--brown-dark); }
.action-item.done .action-item-link { color: var(--gray); border-bottom-color: transparent; }
/* Icon-only variant – replaces text links like "Review in Selections →" with a small
visual marker. The paint-palette icon symbolizes "this is a selection decision",
mirroring the Selections sidebar nav item. Clicking still navigates to the
Selections page; the icon is functionally equivalent to the prior text link, just
visually quieter so it pairs cleanly alongside the Show Details link. */
.action-item-icon-link {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
margin-left: 4px;
border-radius: var(--radius-sm);
color: var(--brown);
background: transparent;
cursor: pointer;
vertical-align: -5px;
transition: background 0.15s, color 0.15s;
}
.action-item-icon-link:hover {
background: var(--off-white);
color: var(--brown-dark);
}
.action-item.done .action-item-icon-link { color: var(--gray); opacity: 0.6; }
.action-item-source {
font-size: 10.5px; color: var(--gray); font-weight: 600;
text-transform: uppercase; letter-spacing: 0.04em;
padding: 2px 6px;
background: var(--white);
border: 1px solid var(--off-white-dark);
border-radius: 4px;
margin-left: auto;
white-space: nowrap;
flex-shrink: 0;
}
/* ─── Tab pane ─── */
.tab-pane { display: none; }
.tab-pane.active { display: block; }
/* ─── Iteration main column ─── */
.iter-main { display: flex; flex-direction: column; gap: var(--sp-8); min-width: 0; }
/* ─── Iteration Header ─── */
.iter-header {
margin-bottom: var(--sp-5);
}
.iter-title-block { display: flex; flex-direction: column; gap: var(--sp-2); }
.iter-title { font-size: 32px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; }
.iter-title .accent {
font-family: var(--font-accent);
font-weight: 500;
font-style: italic;
font-size: 52px;
letter-spacing: -0.01em;
line-height: 1;
}
.iter-meta-row {
display: flex; align-items: center; gap: var(--sp-3);
flex-wrap: wrap;
}
.iter-subtitle { font-size: 14px; color: var(--gray); }
/* ─── Card ─── */
.card {
background: var(--white);
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-lg);
}
.card-hdr {
padding: var(--sp-4) var(--sp-5);
border-bottom: 1px solid var(--off-white-dark);
display: flex; align-items: center; justify-content: space-between;
gap: var(--sp-3);
}
.card-hdr-title {
display: flex; align-items: center; gap: var(--sp-3);
font-size: 13px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.04em;
color: var(--dark);
}
.card-hdr-title svg { color: var(--brown); }
.card-body { padding: var(--sp-5); }
/* ─── Badges ─── */
.badge {
display: inline-flex; align-items: center; gap: 4px;
padding: 4px 10px;
border-radius: var(--radius-full);
font-size: 10.5px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em;
}
.badge-complete { background: rgba(76,174,80,0.12); color: var(--green-dark); }
.badge-today { background: rgba(149,103,76,0.12); color: var(--brown); }
.badge-upcoming { background: var(--off-white-dark); color: var(--gray); }
.badge-locked { background: var(--gray-light); color: var(--gray); }
.badge-allowance { background: var(--off-white); color: var(--brown); }
.badge-fixed { background: var(--gray-light); color: var(--gray); }
.badge-ai {
background: linear-gradient(135deg, var(--off-white) 0%, var(--off-white-dark) 100%);
color: var(--brown);
border: 1px solid var(--off-white-dark);
}
.badge-ai svg { color: var(--brown); flex-shrink: 0; }
.badge-admin {
background: var(--dark); color: white;
font-size: 9px;
padding: 3px 7px;
}
/* ─── Buttons ─── */
.btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 8px;
padding: 10px 16px;
border-radius: var(--radius-md);
font-family: var(--font); font-size: 13.5px; font-weight: 600;
cursor: pointer; border: none;
transition: all 0.15s;
text-decoration: none; line-height: 1;
}
.btn-primary { background: var(--brown); color: var(--white); }
.btn-primary:hover { background: var(--brown-dark); }
.btn-secondary { background: var(--white); color: var(--dark); border: 1px solid var(--off-white-dark); }
.btn-secondary:hover { background: var(--off-white-dark); }
.btn-ghost { background: transparent; color: var(--brown); }
.btn-ghost:hover { background: var(--off-white); }
.btn-sm { padding: 6px 10px; font-size: 12px; }
/* ─── CTA Banner (pre-purchase) ───
Lives at the BOTTOM of the Initial Proposal pane. Hidden by default; shown only
when the client hasn't purchased yet (body.pre-purchase). Because it sits inside
the initial-proposal tab-pane, it's automatically scoped to that tab – it never
appears on other iteration tabs. */
.cta-banner {
background: var(--dark);
color: white;
border-radius: var(--radius-lg);
padding: var(--sp-5) var(--sp-6);
display: flex; align-items: center; gap: var(--sp-5);
margin-top: var(--sp-6);
position: relative;
overflow: hidden;
}
.cta-banner::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 88% 35%, rgba(149,103,76,0.22), transparent 45%),
radial-gradient(circle at 12% 80%, rgba(149,103,76,0.12), transparent 45%);
pointer-events: none;
}
.cta-banner > * { position: relative; z-index: 1; }
/* Default hidden; only revealed in pre-purchase. */
.cta-banner { display: none; }
body.pre-purchase .cta-banner { display: flex; }
.cta-banner-icon {
width: 56px; height: 56px;
border-radius: var(--radius-lg);
background: rgba(149, 103, 76, 0.25);
color: var(--brown-light);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.cta-banner-content { flex: 1; min-width: 0; }
.cta-banner-kicker {
font-size: 10px; font-weight: 700; color: var(--brown-light);
text-transform: uppercase; letter-spacing: 0.08em;
margin-bottom: 4px;
}
.cta-banner-title {
font-size: 22px; font-weight: 700; color: white;
letter-spacing: -0.01em;
font-family: var(--font);
line-height: 1.2;
}
.cta-banner-title .accent {
font-family: var(--font-accent);
font-style: italic;
font-weight: 500;
font-size: 32px;
line-height: 1;
color: var(--brown-light);
}
.cta-banner-desc {
font-size: 13.5px;
color: rgba(255,255,255,0.7);
margin-top: 6px;
line-height: 1.5;
max-width: 540px;
}
.cta-banner-cta {
display: flex;
flex-direction: column;
align-items: stretch;
gap: 0;
flex-shrink: 0;
min-width: 280px;
}
.cta-banner-button {
flex-shrink: 0;
white-space: nowrap;
margin-top: var(--sp-4);
width: 100%;
justify-content: center;
}
.cta-banner-price {
font-size: 38px;
font-weight: 700;
color: white;
font-variant-numeric: tabular-nums;
line-height: 1;
margin-top: 4px;
letter-spacing: -0.01em;
}
.cta-banner-price-label {
font-size: 10.5px; color: rgba(255,255,255,0.5);
text-transform: uppercase; letter-spacing: 0.06em;
font-weight: 700;
}
.cta-banner-price-breakdown {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: var(--sp-4);
padding-top: var(--sp-3);
border-top: 1px solid rgba(255,255,255,0.14);
}
.cta-price-line {
display: flex;
justify-content: space-between;
gap: 12px;
font-size: 12px;
color: rgba(255,255,255,0.7);
font-weight: 500;
font-variant-numeric: tabular-nums;
}
.cta-price-line span:last-child {
color: rgba(255,255,255,0.95);
font-weight: 600;
}
/* Credit-to-construction note – sits immediately under the headline price as the
first reinforcement. Small check icon in brown-light, white text at lower opacity. */
.cta-banner-credit-note {
display: flex;
align-items: center;
gap: 6px;
margin-top: 8px;
font-size: 11.5px;
color: rgba(255,255,255,0.75);
font-weight: 500;
line-height: 1.4;
}
.cta-banner-credit-note svg {
flex-shrink: 0;
color: var(--brown-light);
}
@media (max-width: 720px) {
.cta-banner { flex-direction: column; align-items: flex-start; }
.cta-banner-cta { width: 100%; }
}
/* ─── Locked-node popover (pre-purchase timeline) ───
Anchored beneath a locked design-call node when clicked. Explains the lock and
routes into the purchase flow. Positioned via JS (fixed-ish using page coords);
small upward arrow points at the node. */
.locked-node-popover {
position: absolute;
width: 268px;
background: var(--dark);
color: white;
border-radius: var(--radius-md);
padding: var(--sp-4);
box-shadow: 0 12px 32px rgba(0,0,0,0.28);
z-index: 1500;
opacity: 0;
transform: translateY(-6px) scale(0.97);
transform-origin: top center;
transition: opacity 0.14s ease-out, transform 0.14s ease-out;
}
.locked-node-popover.open {
opacity: 1;
transform: translateY(0) scale(1);
}
.locked-node-popover-arrow {
position: absolute;
top: -6px;
width: 12px;
height: 12px;
background: var(--dark);
transform: rotate(45deg);
border-radius: 2px;
}
.locked-node-popover-head {
display: flex;
align-items: center;
gap: 7px;
margin-bottom: 7px;
}
.locked-node-popover-lock {
display: flex;
align-items: center;
justify-content: center;
width: 22px; height: 22px;
border-radius: 50%;
background: rgba(149,103,76,0.28);
color: var(--brown-light);
flex-shrink: 0;
}
.locked-node-popover-title {
font-size: 13px;
font-weight: 700;
color: white;
}
.locked-node-popover-body {
font-size: 12px;
line-height: 1.5;
color: rgba(255,255,255,0.72);
margin-bottom: var(--sp-3);
}
.locked-node-popover-btn {
width: 100%;
padding: 9px 12px;
font-size: 12.5px;
font-weight: 700;
}
/* Locked timeline nodes: signal non-selectable but still invite the click that
opens the popover. Cursor stays pointer (it IS clickable – it just opens info,
not a page). Hover lifts the lock icon subtly. The active state (popover open)
holds a brown ring so the connection between node and popover is legible. */
.timeline-node.locked { cursor: pointer; }
.timeline-node.locked:hover .timeline-node-circle {
background: var(--white);
border-color: var(--brown);
color: var(--brown);
box-shadow: 0 0 0 6px var(--brown-light);
}
.timeline-node.locked-node-active .timeline-node-circle {
background: var(--white);
border-color: var(--brown);
color: var(--brown);
/* Layer a brown ring at the same 6px radius the locked halo uses, so the
circle keeps its visual diameter while clearly reading as active. */
box-shadow: 0 0 0 3px var(--white), 0 0 0 6px var(--brown);
}
/* ─── Sticky Admin Agenda ─── */
.agenda-card {
background: var(--white);
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-lg);
display: none;
}
body.role-admin .agenda-card { display: block; }
body.role-admin .agenda-card.hidden { display: none; }
.agenda-card-hdr {
padding: var(--sp-3) var(--sp-4);
border-bottom: 1px solid var(--off-white-dark);
display: flex; align-items: center; justify-content: space-between;
}
.agenda-card-hdr-title {
display: flex; align-items: center; gap: 8px;
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.05em;
color: var(--dark);
}
.agenda-card-hdr-title svg { color: var(--brown); }
.agenda-card-body {
padding: var(--sp-3) var(--sp-4);
display: flex; flex-direction: column; gap: 2px;
}
.agenda-bullet {
display: flex; align-items: flex-start; gap: 10px;
padding: 7px 0;
font-size: 13px;
line-height: 1.4;
color: var(--dark);
}
.agenda-check {
width: 16px; height: 16px;
border: 1.5px solid var(--gray-light);
border-radius: 4px;
background: var(--white);
display: flex;
align-items: center; justify-content: center;
flex-shrink: 0; margin-top: 1px;
color: transparent;
cursor: pointer;
transition: all 0.15s;
}
.agenda-check:hover { border-color: var(--slate); }
.agenda-bullet.done .agenda-check { background: var(--green); border-color: var(--green); color: white; }
.agenda-bullet.done .agenda-text { color: var(--gray); text-decoration: line-through; }
.agenda-bullet.done .agenda-text .action-item-link { color: var(--gray); border-bottom-color: transparent; text-decoration: line-through; }
/* Editable agenda text: full width up to the right-side note affordance. */
.agenda-text { flex: 1; cursor: text; border-radius: 4px; padding: 1px 5px; margin: -1px 0 -1px -5px; }
.agenda-text:focus { outline: none; background: rgba(119, 133, 139, 0.10); box-shadow: inset 0 0 0 1px var(--slate); }
/* Inline notes icon – appears right after the text only when the item has notes
(replaces the old "Show Details" link). Click to open the notes editor. */
.agenda-note-icon {
flex-shrink: 0;
display: none;
align-items: center; justify-content: center;
width: 22px; height: 22px; margin-left: 3px;
border: none; background: transparent;
color: var(--slate); cursor: pointer; border-radius: 5px;
transition: background 0.12s, color 0.12s;
}
.agenda-bullet.has-note .agenda-note-icon { display: inline-flex; }
.agenda-note-icon:hover { background: rgba(119, 133, 139, 0.14); color: var(--dark); }
.agenda-bullet.done .agenda-note-icon { color: var(--gray-light); }
/* Far-right "add note" affordance – shown on row hover/focus when there is no note
yet. Once a note exists, the inline icon takes over and this hides. */
.agenda-add-note {
flex-shrink: 0; margin-left: auto;
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 10px;
border: 1px dashed var(--gray-light); border-radius: 999px;
background: transparent; color: var(--slate);
font-size: 11px; font-weight: 600; font-family: var(--font);
cursor: pointer; opacity: 0; transition: opacity 0.12s, border-color 0.12s, color 0.12s;
}
.agenda-bullet:hover .agenda-add-note,
.agenda-bullet:focus-within .agenda-add-note { opacity: 1; }
.agenda-add-note:hover { border-color: var(--slate); color: var(--dark); }
.agenda-bullet.has-note .agenda-add-note { display: none; }
/* Add-agenda-item affordance (the agenda card only renders for admins). */
.agenda-add {
display: flex; align-items: center; gap: 8px;
margin-top: 4px;
padding: 7px 5px;
border: none; background: transparent;
color: var(--slate);
font-size: 12.5px; font-weight: 600; font-family: var(--font);
cursor: pointer; width: 100%; text-align: left;
border-radius: var(--radius-sm);
transition: background 0.15s, color 0.15s;
}
.agenda-add svg { flex-shrink: 0; }
.agenda-add:hover { color: var(--dark); background: var(--off-white); }
/* Agenda notes editor (rendered inside the shared right-side panel). */
.agenda-notes-editor { display: flex; flex-direction: column; }
.agenda-notes-label { font-size: 12px; font-weight: 700; color: var(--dark); margin-bottom: 8px; }
.agenda-notes-textarea {
width: 100%; box-sizing: border-box;
min-height: 240px; resize: vertical;
padding: 12px 13px;
border: 1px solid var(--off-white-dark); border-radius: var(--radius-md);
font-size: 14px; line-height: 1.55; font-family: var(--font); color: var(--dark);
}
.agenda-notes-textarea:focus { outline: none; border-color: var(--slate); box-shadow: 0 0 0 3px rgba(119,133,139,0.12); }
.agenda-notes-hint { font-size: 11.5px; color: var(--gray); margin-top: 10px; line-height: 1.4; }
.agenda-src {
font-size: 9.5px; color: var(--gray); font-weight: 600;
text-transform: uppercase; letter-spacing: 0.04em;
padding: 1px 5px;
background: var(--off-white);
border-radius: 4px;
white-space: nowrap;
flex-shrink: 0;
margin-top: 1px;
}
/* ─── Budget Table ─── */
.budget-summary {
display: flex; align-items: center; justify-content: space-between;
padding: var(--sp-4) var(--sp-5);
background: var(--off-white-light);
border-bottom: 1px solid var(--off-white-dark);
gap: var(--sp-4); flex-wrap: wrap;
}
.budget-summary-total { font-size: 13px; color: var(--gray); }
.budget-summary-total strong {
font-size: 22px; color: var(--dark); font-weight: 700;
display: block;
font-variant-numeric: tabular-nums;
}
.budget-summary-diff { font-size: 12.5px; color: var(--gray); display: flex; align-items: center; gap: 6px; }
.budget-summary-diff .delta-up { color: var(--orange); font-weight: 700; }
.budget-summary-diff .delta-down { color: var(--green); font-weight: 700; }
.budget-table { width: 100%; border-collapse: collapse; }
.budget-table th {
text-align: left;
font-size: 10.5px; font-weight: 700; color: var(--gray);
text-transform: uppercase; letter-spacing: 0.06em;
padding: 10px var(--sp-5);
background: var(--white);
border-bottom: 1px solid var(--off-white-dark);
}
.budget-table th.num { text-align: right; }
.budget-table td {
padding: var(--sp-4) var(--sp-5);
border-bottom: 1px solid var(--off-white-dark);
vertical-align: top;
font-size: 13.5px;
}
.budget-table td.num { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; }
.budget-table tr:last-child td { border-bottom: none; }
.budget-table tr.changed td { background: rgba(255,112,0,0.04); }
.budget-table tr.changed td.num { color: var(--orange); }
.budget-item-name { font-weight: 600; color: var(--dark); display: block; margin-bottom: 2px; }
.budget-item-scope { font-size: 12.5px; color: var(--gray); line-height: 1.4; }
.budget-delta { font-size: 11.5px; font-weight: 600; margin-top: 4px; display: inline-block; }
.budget-delta.up { color: var(--orange); }
.budget-delta.down { color: var(--green); }
.budget-delta.new { color: var(--orange); font-weight: 700; }
.budget-section-row td {
background: var(--off-white-light) !important;
font-size: 11px; font-weight: 700;
color: var(--brown);
text-transform: uppercase; letter-spacing: 0.06em;
padding: 8px var(--sp-5) !important;
}
.budget-total-row td {
background: var(--off-white) !important;
font-size: 14px; font-weight: 700;
color: var(--dark);
border-top: 2px solid var(--off-white-dark);
}
/* ─── Section break between Plans/Renderings and Budget ─── */
.section-break {
border: none;
border-top: 1px solid var(--off-white-dark);
margin: 0;
width: 100%;
}
/* ─── Download PDF button (budget header) ─── */
.btn-download {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
background: var(--white);
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-md);
color: var(--dark);
font-size: 12.5px;
font-weight: 600;
cursor: pointer;
font-family: var(--font);
transition: all 0.15s;
}
.btn-download:hover {
background: var(--off-white-light);
border-color: var(--brown-light);
color: var(--brown);
}
.btn-download svg { flex-shrink: 0; }
.btn-icon {
display: inline-flex;
align-items: center;
justify-content: center;
padding: 7px;
background: var(--white);
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-md);
color: var(--dark);
cursor: pointer;
font-family: var(--font);
transition: all 0.15s;
}
.btn-icon:hover {
background: var(--off-white-light);
border-color: var(--brown-light);
color: var(--brown);
}
.budget-card-actions {
display: inline-flex;
align-items: center;
gap: 8px;
}
/* ─── Comment system on line items ─── */
.lineitem {
position: relative;
}
.lineitem-comment-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px; height: 24px;
background: transparent;
border: none;
cursor: pointer;
border-radius: var(--radius-sm);
color: var(--gray);
flex-shrink: 0;
opacity: 0.5;
transition: opacity 0.15s, background 0.15s, color 0.15s;
font-family: var(--font);
position: relative;
}
.lineitem-comment-spacer {
display: inline-block;
width: 24px;
height: 24px;
flex-shrink: 0;
}
.lineitem:hover .lineitem-comment-btn { opacity: 0.65; }
.lineitem-comment-btn:hover { opacity: 1 !important; background: var(--off-white-light); color: var(--brown); }
.lineitem-comment-btn.has-comments {
opacity: 1;
color: var(--brown);
}
.lineitem-comment-count {
position: absolute;
top: -2px; right: -3px;
background: var(--brown);
color: white;
font-size: 8px;
font-weight: 700;
border-radius: 999px;
min-width: 13px; height: 13px;
display: flex; align-items: center; justify-content: center;
padding: 0 3px;
line-height: 1;
}
/* ─── Line-item comment thread ───
A focused discussion attached to a single budget line item. The client leaves a
question or note about that item; the Enso team reviews it before the next call
and can reply inline. Visually it's a threaded conversation (chat bubbles, client
vs team distinguished) with a calm composer at the bottom. A brown left rail ties
the thread to the line item above it. Identical across Initial Proposal and every
design call (all CSS-driven). */
/* ─── In-context feedback (Budget line items + Selections categories) ─── */
/* Reads as a feedback record, not a chat: no avatars, no bubbles, no send-arrow,
no "seen." Each note shows author + time. The admin (the designer) can tag a
note In next update or delete it; both are admin-only. The client sees notes
plus any In next update tags applied. */
/* The feedback region is an inset white panel nested under its line item: a small
Feedback header strip (faint brown) over a body of notes + composer. Reads as a
contained sub-section, distinct from the flat line items. */
.lineitem-comments {
display: none;
margin: 8px var(--sp-5) 14px;
background: var(--white);
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.lineitem-comments.expanded { display: block; }
/* In the iteration budget rows, line items are indented 60px past the panel's
base inset (for the bullet/room rail). Match that so the panel lines up with
the brown bullets rather than overhanging to the left. */
.iter-room-lineitems .lineitem-comments { margin-left: calc(var(--sp-5) + 60px); }
.fb-panel-head {
display: flex; align-items: center; gap: 7px;
padding: 8px 13px;
background: rgba(149, 103, 76, 0.06);
border-bottom: 1px solid var(--off-white-dark);
font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
color: var(--brown-dark);
}
.fb-panel-head svg { color: var(--brown); flex-shrink: 0; }
.lineitem-comments-inner { padding: 4px 13px 12px; }
.comment-thread { display: block; }
/* A note (client or designer) is a divider-separated row inside the panel; the
panel itself is the container, so notes carry no card border of their own. */
.comment { padding: 11px 0; border-bottom: 1px solid var(--off-white-dark); }
.comment-meta { display: flex; align-items: baseline; gap: 8px; margin-bottom: 4px; }
.comment-author { font-size: 11.5px; font-weight: 700; color: var(--dark); }
.comment-time {
margin-left: auto;
font-size: 11px; color: var(--gray);
font-variant-numeric: tabular-nums; white-space: nowrap;
}
.comment-text { font-size: 12.5px; color: var(--dark); line-height: 1.5; }
/* Foot holds the In next update pill (client + admin) and admin controls. It
collapses entirely when there is nothing to show (client view, untagged), so
plain notes sit tight with no reserved space. */
.comment-foot { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
body.role-client .comment:not(.tagged) .comment-foot { display: none; }
.comment-status {
display: none; align-items: center; gap: 5px;
font-size: 9.5px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em;
padding: 3px 9px; border-radius: var(--radius-full);
background: rgba(76,174,80,0.12); color: var(--green-dark); white-space: nowrap;
}
.comment.tagged .comment-status { display: inline-flex; }
/* Admin: mark a note for the next update (slate admin chrome). */
.fb-mark {
display: none; align-items: center; gap: 5px;
font-family: var(--font); font-size: 11px; font-weight: 700; color: var(--slate);
background: transparent; border: 1px dashed var(--gray-light); border-radius: var(--radius-md);
padding: 4px 10px; cursor: pointer;
}
.fb-mark:hover { border-color: var(--slate); background: rgba(119,133,139,0.06); }
body.role-admin .comment:not(.tagged) .fb-mark { display: inline-flex; }
.fb-untag {
display: none; border: none; background: transparent; color: var(--gray);
font-family: var(--font); font-size: 11px; cursor: pointer; text-decoration: underline;
}
body.role-admin .comment.tagged .fb-untag { display: inline; }
.fb-delete {
display: none; margin-left: auto;
border: none; background: transparent; color: var(--gray); cursor: pointer;
width: 26px; height: 26px; border-radius: var(--radius-sm);
align-items: center; justify-content: center;
}
.fb-delete:hover { background: rgba(212,0,0,0.08); color: var(--error); }
body.role-admin .fb-delete { display: inline-flex; }
/* Composer */
.comment-composer { }
/* 24-hour heads-up: a calm amber notice ABOVE the field, shown only when the next
call is within 24h (CSS-gated by body.call-imminent). */
.comment-input-warning {
display: none; align-items: center; gap: 8px; margin-bottom: var(--sp-3);
padding: 8px 12px;
background: rgba(255, 112, 0, 0.07); border: 1px solid rgba(255, 112, 0, 0.28);
border-radius: var(--radius-md);
font-size: 11.5px; color: var(--dark); line-height: 1.4;
}
.comment-input-warning svg { color: var(--orange); flex-shrink: 0; }
body.call-imminent .comment-input-warning { display: flex; }
.fb-composer { padding-top: 11px; }
.comment-input {
width: 100%; box-sizing: border-box;
border: 1px solid var(--off-white-dark); border-radius: var(--radius-sm);
outline: none; resize: none; background: var(--white);
padding: 9px 11px;
font-family: var(--font); font-size: 12.5px; color: var(--dark); line-height: 1.5;
min-height: 38px; max-height: 140px; overflow-y: auto;
}
.comment-input:focus { border-color: var(--brown-light); box-shadow: 0 0 0 2px rgba(149,103,76,0.10); }
.comment-input::placeholder { color: var(--gray); }
.fb-composer-foot {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
margin-top: 9px;
}
.comment-input-hint { font-size: 11px; color: var(--gray); line-height: 1.4; max-width: 60%; }
body.call-imminent .comment-input-hint { display: none; }
.fb-add {
flex-shrink: 0; background: var(--brown); color: var(--white); border: none;
border-radius: var(--radius-md); padding: 7px 15px;
font-family: var(--font); font-size: 12px; font-weight: 700; cursor: pointer;
}
.fb-add:hover { background: var(--brown-dark); }
/* ─── Budget card title: larger, sentence case, matching Miro preview title ─── */
.budget-card .card-hdr {
padding: var(--sp-4) var(--sp-5);
background: var(--brown);
border-bottom-color: var(--brown);
border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}
.budget-card .card-hdr-title {
font-size: 16px;
font-weight: 700;
color: var(--white);
text-transform: none;
letter-spacing: 0;
}
/* ─── Iteration Budget – 3-value summary + room rollups ─── */
.iter-summary {
padding: var(--sp-6) var(--sp-6) var(--sp-5);
background: var(--off-white-light);
border-bottom: 1px solid var(--off-white-dark);
}
/* Asymmetric variant – context on the left, headline estimate anchored on the right.
Used on DC1 (no prior iteration to compare against) and any other iteration that
prefers an annotated-headline layout over a multi-column change-tracking view. */
.iter-summary-asymmetric {
display: grid;
grid-template-columns: 1fr auto;
gap: var(--sp-6);
align-items: center;
}
.iter-summary-context {
max-width: 460px;
}
.iter-summary-context-eyebrow {
font-size: 10px;
font-weight: 700;
color: var(--gray);
text-transform: uppercase;
letter-spacing: 0.08em;
margin-bottom: 6px;
}
.iter-summary-context-blurb {
font-size: 12.5px;
color: var(--gray);
line-height: 1.55;
margin: 0;
}
/* Right-anchored estimate column. Label sits above, big range value, small
allowance range in muted brown immediately under the range. */
.iter-summary-anchor {
text-align: right;
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 4px;
flex-shrink: 0;
}
.iter-summary-anchor .iter-summary-label {
text-align: right;
}
.iter-summary-allowance-note {
font-size: 12px;
font-weight: 600;
color: var(--brown);
font-variant-numeric: tabular-nums;
margin-top: 2px;
}
/* Comparison summary row (DC2/3/4): three estimate columns separated by an arrow
and an equals glyph. Columns are TOP-aligned (align-items: start) so the big
value lines sit on the same horizontal baseline across all three columns. The
middle column carries an extra allowance-note line beneath its value; top-
alignment lets that note hang below without pushing the middle value down out
of line with the left/right values. The arrow/equals glyphs are nudged down to
sit centered on the value line rather than the label line. */
.iter-summary-row {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
align-items: start;
gap: var(--sp-4);
}
.iter-summary-col {
text-align: center;
display: flex; flex-direction: column;
gap: 6px;
}
.iter-summary-label {
font-size: 10px;
font-weight: 700;
color: var(--gray);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.iter-summary-value {
font-size: 22px;
font-weight: 700;
color: var(--dark);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
line-height: 1.1;
white-space: nowrap;
}
.iter-summary-value.savings { color: var(--brown); }
.iter-summary-arrow {
color: var(--brown);
display: inline-flex;
align-items: center;
opacity: 0.85;
/* Push down so the glyph centers on the value line (clears the label row). */
margin-top: 20px;
}
.iter-summary-equals {
color: var(--brown);
display: inline-flex;
align-items: center;
opacity: 0.85;
margin-top: 20px;
}
.iter-summary-range {
text-align: center;
font-size: 12px;
color: var(--gray);
margin-top: var(--sp-4);
}
.iter-rooms { display: flex; flex-direction: column; }
/* ─── Phase 2 – Future Consideration ───
Phase 2 items live in their own bucket appended below the Phase 1 rooms. Visually the
rooms and line items are styled IDENTICALLY to Phase 1 – same room-code badge, same
pricing weight, same change-state support (added / updated / removed). The only
differentiation is the section header above (dashed divider + eyebrow label + range
total), which signals that what follows is not part of the contract being signed.
Clients commenting on a Phase 2 item flags interest; the team migrates it on the next
iteration via the standard "removed in Phase 2" + "added in Phase 1" change pattern. */
.phase-2-section {
border-top: 2px dashed var(--off-white-dark);
}
.phase-2-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--sp-5);
padding: var(--sp-6) var(--sp-5) var(--sp-4);
}
.phase-2-header-text { flex: 1; min-width: 0; }
.phase-2-title {
font-size: 14px;
font-weight: 700;
color: var(--dark);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.phase-2-subtitle {
font-size: 13px;
color: var(--gray);
margin-top: 8px;
line-height: 1.5;
font-style: italic;
max-width: 580px;
}
/* Post-signing: comment buttons on Phase 2 items hide, since migration is no longer
a no-cost integration – it would now require a change order. */
.phase-2-section.scope-locked .iter-room-block.phase-2 .lineitem-comment-btn,
.phase-2-section.scope-locked .iter-room-block.phase-2 .lineitem-comments {
display: none !important;
}
.phase-2-total {
font-size: 20px;
font-weight: 700;
color: var(--dark);
font-variant-numeric: tabular-nums;
white-space: nowrap;
text-align: right;
}
.phase-2-total-label {
display: block;
font-size: 11px;
font-weight: 700;
color: var(--gray);
text-transform: uppercase;
letter-spacing: 0.07em;
margin-bottom: 4px;
opacity: 0.8;
}
/* Allowance range under the Phase 2 estimate – mirrors the DC1/DC2 inline
allowance note (small, brown, right-aligned beneath the range value). */
.phase-2-allowance-note {
display: block;
font-size: 12px;
font-weight: 600;
color: var(--brown);
font-variant-numeric: tabular-nums;
margin-top: 3px;
}
/* Custom migration label – used in place of "removed" when an item moves to Phase 1.
Styled via the shared .lineitem-removed-label rule above. */
.iter-room-block {
border-bottom: 1px solid var(--off-white-dark);
}
.iter-room-block:last-child { border-bottom: none; }
.iter-room {
display: flex;
align-items: flex-start;
gap: var(--sp-4);
padding: var(--sp-4) var(--sp-5);
transition: background 0.12s;
cursor: pointer;
user-select: none;
}
.iter-room:hover { background: var(--off-white-light); }
.room-code {
display: inline-flex;
align-items: center; justify-content: center;
font-size: 10px;
font-weight: 700;
color: var(--gray);
background: var(--off-white);
border: 1px solid var(--off-white-dark);
border-radius: 4px;
padding: 4px 8px;
font-variant-numeric: tabular-nums;
flex-shrink: 0;
margin-top: 2px;
min-width: 38px;
}
.iter-room-info { flex: 1; min-width: 0; }
.iter-room-name {
font-size: 14px;
font-weight: 600;
color: var(--dark);
margin-bottom: 3px;
}
.iter-room-scope {
font-size: 12.5px;
color: var(--gray);
line-height: 1.5;
}
.iter-room-amounts {
text-align: right;
flex-shrink: 0;
min-width: 100px;
}
.iter-room-change {
font-size: 16px;
font-weight: 700;
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.iter-room-change.add { color: var(--dark); }
.iter-room-change.save { color: var(--brown); }
.iter-room-change.none {
color: var(--gray);
font-weight: 500;
font-size: 13px;
line-height: 1.1;
}
.iter-room-change.new-tag {
display: inline-block;
background: var(--brown);
color: white;
font-size: 10px;
font-weight: 700;
padding: 3px 8px;
border-radius: var(--radius-full);
letter-spacing: 0.06em;
}
.iter-room-now {
font-size: 11.5px;
color: var(--gray);
margin-top: 4px;
font-variant-numeric: tabular-nums;
}
/* Room total – used on iterations that show ONLY the current price with no change
tracking (e.g., DC1, where there's no prior iteration to compare against and
change indicators don't apply). Visually the primary value for the room. */
.iter-room-total {
font-size: 16px;
font-weight: 700;
color: var(--dark);
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.expand-icon {
margin-left: var(--sp-3);
margin-top: 4px;
color: var(--gray);
transition: transform 0.2s;
flex-shrink: 0;
}
.iter-room-block.expanded .expand-icon,
.option-room-block.expanded .expand-icon {
transform: rotate(180deg);
}
/* ─── Line items (expanded room) ─── */
.iter-room-lineitems {
display: none;
border-top: 1px solid var(--off-white-dark);
}
.iter-room-block.expanded .iter-room-lineitems { display: block; }
.lineitem {
display: flex;
align-items: center;
gap: 10px;
padding: 9px var(--sp-5) 9px calc(var(--sp-5) + 60px);
font-size: 12.5px;
border-bottom: 1px solid var(--off-white-dark);
position: relative;
}
.lineitem:last-child { border-bottom: none; }
.lineitem::before {
content: '•';
color: var(--brown);
font-size: 19px;
line-height: 1;
flex-shrink: 0;
}
.lineitem-name { color: var(--dark); }
/* The allowance tag now sits immediately after the name (to the right of the
words, not next to the price). Give it a little breathing room from the name. */
.lineitem-tag-allowance { margin-left: 0; }
/* Right-align the price group. Whether the line item uses a bare .lineitem-price
or a .lineitem-prices wrapper, the FIRST price-bearing element that is a direct
child of .lineitem gets pushed to the far right. The eye-icon button (added by
JS) sits after it. */
.lineitem > .lineitem-prices,
.lineitem > .lineitem-price { margin-left: auto; }
.lineitem-prices {
display: inline-flex;
align-items: center;
gap: 8px;
flex-shrink: 0;
}
.lineitem-price-old {
text-decoration: line-through;
color: var(--gray);
font-variant-numeric: tabular-nums;
font-weight: 500;
}
.lineitem-tag {
display: inline-flex;
align-items: center;
background: var(--gray-light);
color: var(--gray);
font-size: 9px;
font-weight: 700;
padding: 2px 7px;
border-radius: var(--radius-full);
text-transform: uppercase;
letter-spacing: 0.06em;
flex-shrink: 0;
}
/* Change-state tag variants used on DC2+ to mark what moved since the prior call:
New (green) sits just to the LEFT of the price inside .lineitem-prices; Updated
(brown) accompanies a struck-through old price. Removed items use the
.lineitem-removed row treatment (strikethrough name) rather than a tag. */
.lineitem-tag-new {
background: rgba(45, 122, 79, 0.12);
color: var(--green-dark);
}
.lineitem-tag-updated {
background: var(--off-white);
color: var(--brown);
border: 1px solid var(--brown-light);
}
/* Allowance tag – a soft, on-brand chip (gentle brown tint, no border) marking
placeholder/budget-flex items. The line item itself reads like any other (no italic,
normal text color, normal brown bullet); only the tag distinguishes it. */
.lineitem-tag-allowance {
background: rgba(149, 103, 76, 0.12);
color: var(--brown-dark);
border: none;
}
.lineitem-removed-label, .lineitem-updated-label, .lineitem-moved-label {
font-style: italic;
color: var(--gray);
font-size: 11.5px;
font-weight: 500;
flex-shrink: 0;
}
.lineitem-removed .lineitem-name {
text-decoration: line-through;
color: var(--gray);
}
.lineitem-price {
font-weight: 600;
color: var(--dark);
font-variant-numeric: tabular-nums;
flex-shrink: 0;
}
/* ─── Line-item context info icon ───
Each line item gets a small "i" info icon, sitting just to the right of the item
name, that only appears on hover. Hovering the icon reveals a client-friendly
explanation of the line item (sourced from the iteration JSON in production; from
the lineItemContext registry in this prototype). It's intentionally hover-only
and tooltip-based rather than inline text, so clients read items one at a time
rather than copy-pasting the whole budget elsewhere. Injected by
attachLineItemContext() on load. */
.lineitem-info {
flex-shrink: 0;
width: 18px; height: 18px;
margin-left: -6px;
border: none;
background: transparent;
color: var(--gray);
border-radius: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
cursor: help;
opacity: 0.45;
transition: opacity 0.12s, background 0.12s, color 0.12s;
position: relative;
vertical-align: middle;
}
.lineitem:hover .lineitem-info { opacity: 0.6; }
.lineitem-info:hover { opacity: 1 !important; background: var(--off-white); color: var(--brown); }
/* Tooltip bubble – revealed on icon hover/focus, anchored to the icon (which now
sits near the name on the left). Left-aligned above the icon. */
.lineitem-info-tip {
position: absolute;
bottom: calc(100% + 8px);
left: -6px;
width: 280px;
max-width: 60vw;
background: var(--dark);
color: white;
font-size: 12px;
line-height: 1.5;
font-weight: 400;
text-align: left;
padding: 10px 12px;
border-radius: var(--radius-sm);
box-shadow: 0 8px 24px rgba(0,0,0,0.22);
opacity: 0;
transform: translateY(4px);
transition: opacity 0.14s, transform 0.14s;
pointer-events: none;
z-index: 60;
}
.lineitem-info-tip::after {
content: '';
position: absolute;
top: 100%;
left: 12px;
border: 6px solid transparent;
border-top-color: var(--dark);
}
.lineitem-info:hover .lineitem-info-tip,
.lineitem-info:focus-visible .lineitem-info-tip {
opacity: 1;
transform: translateY(0);
}
.lineitem-info-tip-title {
font-weight: 700;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--brown-light);
margin-bottom: 4px;
}
/* ─── Initial Proposal – Options A/B/C ─── */
.options-grid { display: flex; flex-direction: column; }
.options-header {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: var(--sp-3);
padding: var(--sp-5) var(--sp-10) var(--sp-5) var(--sp-5);
background: var(--off-white-light);
border-bottom: 1px solid var(--off-white-dark);
}
.options-header-cell { display: flex; flex-direction: column; gap: 4px; }
.option-col { text-align: center; }
.option-letter-circle {
width: 36px;
height: 36px;
border-radius: 50%;
background: var(--brown);
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 16px;
font-weight: 700;
margin: 0 auto 8px;
font-family: var(--font);
}
.option-tag {
font-size: 10px;
font-weight: 700;
color: var(--gray);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.option-tag.option-recommended { color: var(--brown); }
.option-name {
font-size: 13.5px;
font-weight: 700;
color: var(--dark);
line-height: 1.3;
}
.option-total-range {
font-size: 16px;
color: var(--dark);
font-weight: 700;
font-variant-numeric: tabular-nums;
margin-top: 5px;
letter-spacing: -0.01em;
}
.option-room-block {
border-bottom: 1px solid var(--off-white-dark);
}
.option-room-block:last-of-type { border-bottom: none; }
.option-room {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: var(--sp-3);
padding: var(--sp-4) var(--sp-10) var(--sp-4) var(--sp-5);
cursor: pointer;
align-items: center;
transition: background 0.12s;
user-select: none;
}
.option-room:hover { background: var(--off-white-light); }
.option-room-name {
display: flex; align-items: center; gap: 10px;
font-size: 14px;
font-weight: 600;
color: var(--dark);
}
.option-price {
text-align: center;
font-size: 15px;
font-weight: 700;
color: var(--dark);
font-variant-numeric: tabular-nums;
}
.option-price.recommended { color: var(--dark); }
.option-room-lineitems {
display: none;
border-top: 1px solid var(--off-white-dark);
}
.option-room-block.expanded .option-room-lineitems { display: block; }
.option-lineitem {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: var(--sp-3);
padding: 8px var(--sp-10) 8px var(--sp-5);
font-size: 12.5px;
border-bottom: 1px solid var(--off-white-dark);
align-items: center;
position: relative;
}
/* Comment button on option-lineitem sits absolutely on the right edge, in the padding zone,
so it doesn't disrupt the 4-column grid alignment with the header and totals rows */
.option-lineitem > .lineitem-comment-btn {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
opacity: 0.5;
}
.option-lineitem:hover > .lineitem-comment-btn { opacity: 0.65; }
.option-lineitem > .lineitem-comment-btn.has-comments { opacity: 1; }
.option-lineitem:last-child { border-bottom: none; }
.option-lineitem-name {
display: flex; align-items: center; gap: 10px;
color: var(--dark);
/* Indent the lineitem's first cell internally so the bullet visually aligns with the
room-code badge on the row above. Using padding inside the grid cell (rather than the
row's left padding) keeps the 4-column grid distribution identical between rooms and
lineitems – so the three price columns line up vertically. */
padding-left: 48px;
}
.option-lineitem-name::before {
content: '•';
color: var(--brown);
font-size: 19px;
line-height: 1;
flex-shrink: 0;
}
.option-lineitem-price {
text-align: center;
font-variant-numeric: tabular-nums;
color: var(--dark);
}
.options-totals {
display: grid;
grid-template-columns: 1.5fr 1fr 1fr 1fr;
gap: var(--sp-3);
padding: var(--sp-5) var(--sp-10) var(--sp-5) var(--sp-5);
background: var(--off-white-light);
border-top: 2px solid var(--off-white-dark);
align-items: center;
}
.options-totals-label {
font-size: 11px;
color: var(--gray);
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
}
.options-total-value {
text-align: center;
font-size: 16px;
font-weight: 700;
color: var(--dark);
font-variant-numeric: tabular-nums;
}
.options-total-value.recommended { color: var(--dark); }
/* ─── Miro Preview (above budget) ─── */
.miro-preview {
display: block;
width: 100%;
background: var(--white);
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-lg);
overflow: hidden;
cursor: pointer;
position: relative;
font-family: var(--font);
text-align: left;
text-decoration: none;
color: inherit;
transition: transform 0.2s ease, box-shadow 0.2s ease;
padding: 0;
}
.miro-preview:hover {
transform: translateY(-2px);
box-shadow: 0 16px 36px rgba(0,0,0,0.1);
}
.miro-preview-image {
aspect-ratio: 16 / 8;
background: linear-gradient(135deg, #F4F0E9, #EAE2D9);
position: relative;
overflow: hidden;
display: flex; align-items: stretch; justify-content: center;
padding: var(--sp-4);
gap: var(--sp-3);
}
.miro-preview-image::before {
content: '';
position: absolute; inset: 0;
background-image:
radial-gradient(circle at 25% 35%, rgba(149,103,76,0.06), transparent 55%),
radial-gradient(circle at 75% 65%, rgba(149,103,76,0.04), transparent 55%);
pointer-events: none;
}
/* Stylized "Miro frame" cards inside the preview image */
.miro-mock-frame {
background: var(--white);
border-radius: 4px;
display: flex; flex-direction: column;
box-shadow: 0 4px 16px rgba(0,0,0,0.08), 0 1px 3px rgba(0,0,0,0.04);
flex: 1;
height: 100%;
position: relative; z-index: 1;
overflow: hidden;
min-width: 0;
}
.miro-mock-frame-header {
padding: 6px 10px;
font-size: 9.5px;
font-weight: 700;
color: var(--gray);
text-transform: uppercase;
letter-spacing: 0.06em;
background: var(--off-white-light);
border-bottom: 1px solid var(--off-white-dark);
flex-shrink: 0;
}
.miro-mock-frame-body {
flex: 1;
display: flex; align-items: center; justify-content: center;
padding: var(--sp-3);
min-height: 0;
position: relative;
overflow: hidden;
}
.miro-mock-frame-body svg {
width: 100%; height: 100%;
color: var(--brown);
opacity: 0.55;
}
/* Rendering mock - looks like a 3D kitchen rendering */
.miro-mock-rendering {
width: 100%; height: 100%;
background:
linear-gradient(180deg, #e8d4be 0%, #c4a693 35%, #8b6a52 65%, #5c4734 100%);
position: relative;
border-radius: 2px;
overflow: hidden;
}
.miro-mock-rendering::before {
content: '';
position: absolute;
top: 12%; left: 55%;
width: 30%; height: 38%;
background: linear-gradient(180deg, rgba(255,255,255,0.5), rgba(255,255,255,0.15));
border-radius: 1px;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.2);
}
.miro-mock-rendering::after {
content: '';
position: absolute;
bottom: 0; left: 8%; right: 8%;
height: 28%;
background: linear-gradient(180deg, rgba(40,30,20,0.35), rgba(0,0,0,0.55));
}
.miro-preview-bar {
padding: var(--sp-4) var(--sp-5);
display: flex; align-items: center; justify-content: space-between;
gap: var(--sp-3);
background: var(--brown);
border-bottom: 1px solid var(--brown);
}
.miro-preview-title {
font-size: 16px;
font-weight: 700;
color: var(--white);
}
.miro-preview-bar .miro-edit-btn { border-color: rgba(255,255,255,0.55); color: var(--white); background: transparent; }
.miro-preview-bar .miro-edit-btn:hover { border-color: var(--white); color: var(--white); background: rgba(255,255,255,0.14); }
.miro-preview-cta {
display: inline-flex; align-items: center; gap: 6px;
padding: 7px 12px;
background: var(--white);
border: 1px solid var(--off-white-dark);
color: var(--dark);
border-radius: var(--radius-md);
font-size: 12.5px;
font-weight: 600;
transition: all 0.15s;
}
.miro-preview:hover .miro-preview-cta {
background: var(--off-white-light);
border-color: var(--brown-light);
color: var(--brown);
}
@media (max-width: 720px) {
.miro-mock-frame:nth-child(3) { display: none; }
}
/* ─── To-Do + Agenda row (top of dashboard) ─── */
.todo-agenda-row {
display: grid;
grid-template-columns: 1fr;
gap: var(--sp-4);
margin-bottom: var(--sp-5);
align-items: start;
}
body.role-admin .todo-agenda-row {
grid-template-columns: 1.4fr 1fr;
}
/* ─── Property page ─── */
.property-hero {
display: flex;
flex-direction: column;
gap: var(--sp-4);
margin-bottom: var(--sp-5);
}
.matterport-frame {
aspect-ratio: 16 / 9;
background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
border-radius: var(--radius-lg);
display: flex; flex-direction: column; align-items: center; justify-content: center;
color: white;
position: relative; overflow: hidden;
}
.matterport-frame::before {
content: '';
position: absolute; inset: 0;
background-image: radial-gradient(circle at 30% 40%, rgba(149,103,76,0.2), transparent 50%), radial-gradient(circle at 70% 60%, rgba(76,174,80,0.1), transparent 50%);
}
.matterport-frame > * { position: relative; z-index: 1; }
.matterport-icon { width: 64px; height: 64px; border-radius: 50%; background: rgba(255,255,255,0.1); display: flex; align-items: center; justify-content: center; margin-bottom: var(--sp-3); }
.matterport-label { font-size: 16px; font-weight: 700; }
.matterport-sub { font-size: 12.5px; color: rgba(255,255,255,0.6); margin-top: 4px; }
.matterport-cta {
margin-top: var(--sp-5);
display: inline-flex; align-items: center; gap: 6px;
padding: 10px 16px;
background: rgba(255,255,255,0.1);
border: 1px solid rgba(255,255,255,0.2);
border-radius: var(--radius-md);
color: white;
font-size: 13px; font-weight: 600;
cursor: pointer;
}
.matterport-cta:hover { background: rgba(255,255,255,0.18); }
.property-stats {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: var(--sp-3);
}
.stat-card {
background: var(--white);
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-md);
padding: var(--sp-3);
}
.stat-card-label { font-size: 10px; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: 0.06em; }
.stat-card-value { font-size: 16px; font-weight: 700; color: var(--dark); margin-top: 3px; }
/* ─── Iteration content readiness toggle ─── */
/* When tab-pane has .is-ready, show the ready content; otherwise show the locked placeholder. */
.iter-content-locked, .iter-content-ready { display: none; }
.tab-pane:not(.is-ready) .iter-content-locked { display: block; }
.tab-pane.is-ready .iter-content-ready { display: block; }
/* ═══════════════════════════════════════════════════════════════════
TIMELINE SECTION (renders under Budget & Scope on iteration tabs)
═══════════════════════════════════════════════════════════════════ */
.timeline-section {
background: white;
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-lg);
overflow: hidden;
}
.timeline-section-hdr {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-4) var(--sp-5);
background: var(--brown);
border-bottom: 1px solid var(--brown);
}
.timeline-section-title { font-size: 16px; font-weight: 700; color: var(--white); }
/* Top: Construction Start → Duration → Project Completion (screenshot 3 style) */
.timeline-duration {
display: grid;
grid-template-columns: 1fr auto 1fr auto 1fr;
align-items: center;
gap: var(--sp-4);
padding: var(--sp-5);
background: var(--off-white-light);
border-bottom: 1px solid var(--off-white-dark);
}
.timeline-duration-col { display: flex; flex-direction: column; gap: 3px; }
.timeline-duration-col.right { align-items: flex-end; text-align: right; }
.timeline-duration-col.center { align-items: center; text-align: center; }
.timeline-duration-label {
font-size: 10px; font-weight: 700; color: var(--gray);
text-transform: uppercase; letter-spacing: 0.06em;
}
.timeline-duration-date { font-size: 22px; font-weight: 700; color: var(--dark); line-height: 1.15; }
.timeline-duration-weeks { font-size: 22px; font-weight: 700; color: var(--brown); line-height: 1.15; }
.timeline-duration-arrow { width: 44px; color: var(--brown); opacity: 0.85; display: flex; align-items: center; justify-content: center; }
/* Milestone row with payment badges (screenshot 2 style, non-collapsible) */
.timeline-milestones-wrap { padding: var(--sp-5) var(--sp-5) var(--sp-6); }
.timeline-milestones-label {
font-size: 10px; font-weight: 700; color: var(--gray);
text-transform: uppercase; letter-spacing: 0.06em;
margin-bottom: var(--sp-3);
}
.timeline-milestones {
display: flex;
align-items: flex-start;
justify-content: space-between;
position: relative;
gap: 4px;
}
.timeline-milestones::before {
content: '';
position: absolute;
top: 17px;
left: 5%;
right: 5%;
height: 1.5px;
background: var(--off-white-dark);
z-index: 0;
}
.milestone {
display: flex; flex-direction: column; align-items: center; gap: 6px;
position: relative; z-index: 1; flex: 1; max-width: 150px;
}
.milestone-circle {
width: 36px; height: 36px; border-radius: 50%;
background: white; border: 1.5px solid var(--off-white-dark);
color: var(--gray);
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 14px;
}
.milestone.active .milestone-circle { background: var(--brown); border-color: var(--brown); color: white; }
.milestone.complete .milestone-circle { background: var(--green-dark); border-color: var(--green-dark); color: white; }
.milestone-name { font-size: 12px; font-weight: 700; color: var(--dark); text-align: center; line-height: 1.25; margin-top: 2px; }
.milestone-date { font-size: 11px; color: var(--gray); }
.milestone-payment {
display: inline-flex; align-items: center; gap: 4px;
background: var(--brown); color: white;
font-size: 10px; font-weight: 700;
padding: 2px 8px; border-radius: var(--radius-full);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.milestone-payment-amount { font-weight: 800; }
.milestone-payment-pct { opacity: 0.85; font-weight: 600; }
.milestone-payment-pct::before { content: '·'; margin-right: 4px; opacity: 0.6; }
/* Payment-phase color variants – match Gantt phase shades so the
construction schedule and payment milestones share the same visual code.
Permit Filed (40%) is pre-construction and uses cream – it kicks off the
project before any Gantt phases begin. */
.milestone-payment.payment-default {
background: var(--off-white);
color: var(--brown-dark);
border: 1px solid var(--off-white-dark);
padding: 1px 6px;
}
.milestone-payment.payment-rough { background: var(--brown-light); }
.milestone-payment.payment-substantial { background: var(--brown); }
.milestone-payment.payment-punch { background: var(--brown-dark); }
.milestone-target {
display: inline-flex; align-items: center;
background: var(--off-white); color: var(--gray);
font-size: 9px; font-weight: 700;
padding: 2px 6px; border-radius: var(--radius-full);
text-transform: uppercase; letter-spacing: 0.04em;
}
/* View toggle (Gantt | Calendar) */
.schedule-block {
border-top: 1px solid var(--off-white-dark);
}
.schedule-toggle-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-4) var(--sp-5);
border-bottom: 1px solid var(--off-white-dark);
}
.schedule-toggle-title { font-size: 15px; font-weight: 700; color: var(--dark); }
.schedule-toggle {
display: inline-flex;
background: var(--off-white);
border-radius: var(--radius-full);
padding: 3px;
gap: 0;
}
.schedule-toggle-btn {
padding: 6px 16px;
background: transparent;
border: none;
border-radius: var(--radius-full);
font-size: 12.5px;
font-weight: 600;
color: var(--gray);
cursor: pointer;
font-family: var(--font);
}
.schedule-toggle-btn.active { background: var(--brown); color: white; }
/* ─── Gantt view (reworked: full project timeline) ───
The chart now spans the WHOLE project, not just construction: a pre-construction
zone (Design Phase + Permitting) sits to the left of Construction Start, and the
week axis is re-based so Construction Start = Week 0 (negative weeks before,
positive after). Numbered vertical reference lines drop at each milestone and
carry a chip matching the milestone number in the cards above, tying the two
together. A subtle slate tint marks the pre-construction region.
Coordinate system: everything is positioned by percentage of TOTAL project days
within an equal-width track. The axis track, the overlay (lines + zone tint),
and each row's bar track are all the 1fr column of a `200px 1fr` grid, so their
left% values line up exactly. */
.gantt-view { padding: var(--sp-3) var(--sp-5) var(--sp-5); overflow-x: auto; }
.gantt-inner { min-width: 1120px; } /* fallback; per-render width set inline */
/* Week axis. The first cell ("Phase" corner) is sticky-left so it stays pinned with
the task-name column while the week track scrolls horizontally. */
.gantt-axis {
display: grid;
grid-template-columns: 200px 1fr;
margin-bottom: 2px;
}
.gantt-axis-corner {
position: sticky;
left: 0;
z-index: 7;
background: var(--white);
border-right: 1px solid var(--off-white-dark);
box-shadow: 3px 0 6px -3px rgba(0,0,0,0.08);
display: flex;
align-items: flex-end;
padding: 0 var(--sp-3) 6px 0;
font-size: 10px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--gray);
}
.gantt-axis-track {
position: relative;
height: 34px;
}
.gantt-week {
position: absolute;
top: 0;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
white-space: nowrap;
}
.gantt-week-num { font-size: 11px; font-weight: 700; color: var(--gray); }
.gantt-week.precon .gantt-week-num { color: var(--slate); }
.gantt-week-date { font-size: 9px; color: var(--gray); opacity: 0.75; font-variant-numeric: tabular-nums; }
/* W0 = Construction Start. Emphasized (brown) and sitting exactly on the boundary
line rather than centered over a week span. */
.gantt-week-zero .gantt-week-num { color: var(--brown); }
.gantt-week-zero .gantt-week-date { color: var(--brown); opacity: 0.85; font-weight: 600; }
/* Body: holds the overlay (zone tint + milestone lines) and the task rows */
.gantt-body {
position: relative;
padding-top: 24px; /* room for the numbered milestone chips at the top */
border-top: 1px solid var(--off-white-dark);
}
.gantt-overlay {
position: absolute;
top: 0; bottom: 0;
left: 200px; right: 0;
pointer-events: none;
z-index: 1;
}
/* Pre-construction tint region (Design + Permitting). No right border here – the
Construction Start milestone line sits at the same x and marks the boundary, so
a border would double it. */
.gantt-zone-precon {
position: absolute;
top: 0; bottom: 0;
background: rgba(119, 133, 139, 0.06);
}
.gantt-zone-label {
position: absolute;
bottom: 6px;
font-size: 8.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.1em;
color: var(--slate);
opacity: 0.55;
transform: translateX(-50%);
white-space: nowrap;
}
/* Milestone reference line + numbered chip */
.gantt-mline {
position: absolute;
top: 20px; bottom: 0;
width: 0;
border-left: 1px dashed var(--brown-light);
}
.gantt-mline.precon { border-left-color: rgba(119, 133, 139, 0.5); }
/* Construction Start: a single clean solid line (not heavy). It doubles as the
pre-construction zone's right edge and aligns with the W0 axis tick. */
.gantt-mline.start {
border-left: 1.5px solid var(--brown);
}
.gantt-mline-chip {
position: absolute;
top: -20px;
left: 0;
transform: translateX(-50%);
width: 18px; height: 18px;
border-radius: 50%;
background: var(--white);
border: 1.5px solid var(--brown-light);
color: var(--brown);
font-size: 10px;
font-weight: 700;
display: flex; align-items: center; justify-content: center;
font-variant-numeric: tabular-nums;
}
.gantt-mline.precon .gantt-mline-chip { border-color: var(--slate); color: var(--slate); }
.gantt-mline.start .gantt-mline-chip { background: var(--brown); border-color: var(--brown); color: white; }
/* Task rows */
.gantt-rows { position: relative; z-index: 2; }
.gantt-task-row {
display: grid;
grid-template-columns: 200px 1fr;
align-items: center;
/* Slightly stronger separators so the row lines stay visible through the slate
tint in the pre-construction zone. */
border-bottom: 1px solid var(--off-white-dark);
}
.gantt-task-row:last-child { border-bottom: none; }
.gantt-task-name {
position: sticky;
left: 0;
z-index: 6;
background: var(--white);
border-right: 1px solid var(--off-white-dark);
box-shadow: 3px 0 6px -3px rgba(0,0,0,0.08);
font-size: 12px;
color: var(--dark);
padding: 9px var(--sp-3) 9px var(--sp-2);
}
.gantt-task-name.precon-name { color: var(--slate); font-weight: 600; }
.gantt-row-track {
position: relative;
height: 32px;
}
.gantt-bar {
position: absolute;
top: 50%;
transform: translateY(-50%);
height: 22px;
background: var(--brown);
color: white;
border-radius: 4px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10.5px;
font-weight: 700;
white-space: nowrap;
padding: 0 4px;
overflow: hidden;
/* left + width applied inline as % of the track */
}
.gantt-bar.cat-rough { background: var(--brown-light); }
.gantt-bar.cat-substantial { background: var(--brown); }
.gantt-bar.cat-punch { background: var(--brown-dark); }
/* Pre-construction bars use slate tones to separate them from construction work */
.gantt-bar.cat-design { background: var(--slate); }
.gantt-bar.cat-permit { background: #9aa7ac; }
/* Calendar view */
.calendar-view { padding: var(--sp-4) var(--sp-5) var(--sp-5); display: none; }
.timeline-pane.calendar-active .gantt-view { display: none; }
.timeline-pane.calendar-active .calendar-view { display: block; }
.calendar-nav {
display: flex; align-items: center; justify-content: center;
gap: var(--sp-4); margin-bottom: var(--sp-5);
}
.calendar-nav-btn {
width: 32px; height: 32px; border-radius: 50%;
background: white; border: 1.5px solid var(--off-white-dark);
color: var(--gray); cursor: pointer;
display: inline-flex; align-items: center; justify-content: center;
transition: border-color 0.15s, color 0.15s;
}
.calendar-nav-btn:hover { border-color: var(--brown-light); color: var(--brown); }
.calendar-month-title { font-size: 19px; font-weight: 700; color: var(--dark); min-width: 240px; text-align: center; letter-spacing: -0.01em; }
.calendar-grid-wrap { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-5); }
.calendar-grid-col-label {
font-size: 12px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.08em; color: var(--gray);
text-align: center; margin-bottom: var(--sp-3);
}
.calendar-grid {
display: grid; grid-template-columns: repeat(6, 1fr);
border-left: 1px solid var(--off-white-dark);
border-top: 1px solid var(--off-white-dark);
border-radius: 8px; overflow: hidden;
background: var(--white);
}
.calendar-day-name {
font-size: 10px; font-weight: 700; color: var(--gray);
text-transform: uppercase; letter-spacing: 0.04em; text-align: left;
padding: 8px 10px; background: var(--off-white-light);
border-right: 1px solid var(--off-white-dark);
}
.calendar-day-name:last-child { border-right: none; }
.calendar-cell {
min-height: 104px;
padding: 5px 7px;
border-right: 1px solid var(--off-white-dark);
border-bottom: 1px solid var(--off-white-dark);
position: relative;
font-size: 11px;
background: white;
}
.calendar-cell:nth-child(6n) { border-right: none; }
.calendar-cell.empty { background: var(--off-white-light); }
.calendar-day-num { font-weight: 700; color: var(--dark); font-size: 12px; }
/* Task bars: each spans one or more days within a single work-week (Mon-Sat) via
grid-column, stacked by lane via margin-top. Sundays are omitted from the grid, so
a multi-week task breaks into one continuous segment per week. Per-task colors are
set inline (calendarColor) so each trade reads as its own band, like a real schedule. */
.calendar-task-bar {
align-self: start;
margin-top: calc(24px + var(--lane, 0) * 16px);
height: 15px;
border-radius: 3px;
color: white;
font-size: 9.5px;
font-weight: 600;
padding: 0 6px;
display: flex;
align-items: center;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
background: var(--brown);
position: relative;
z-index: 1;
box-shadow: 0 1px 1px rgba(0,0,0,0.06);
}
/* ─── Final Delivery: Contract (left) + Payment Schedule (right) ─── */
.fd-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-5);
}
@media (max-width: 980px) {
.fd-grid { grid-template-columns: 1fr; }
}
.fd-card { display: flex; flex-direction: column; }
.fd-card-body {
padding: var(--sp-5);
display: flex;
flex-direction: column;
gap: var(--sp-4);
flex: 1;
}
.fd-desc {
font-size: 13.5px;
color: var(--gray);
line-height: 1.5;
margin: 0;
}
.fd-summary {
background: var(--off-white-light);
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-md);
padding: var(--sp-3) var(--sp-4);
display: flex;
flex-direction: column;
}
.fd-summary-row {
display: flex;
align-items: center;
justify-content: space-between;
padding: 9px 0;
border-bottom: 1px solid var(--off-white-dark);
}
.fd-summary-row:last-child { border-bottom: none; }
.fd-summary-label {
font-size: 11.5px;
font-weight: 700;
color: var(--gray);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.fd-summary-value {
font-size: 15px;
font-weight: 700;
color: var(--dark);
font-variant-numeric: tabular-nums;
}
/* Payment schedule rows */
.fd-payments {
display: flex;
flex-direction: column;
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-md);
overflow: hidden;
}
.fd-payment-row {
display: grid;
grid-template-columns: 28px 1fr auto auto;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
border-bottom: 1px solid var(--off-white-dark);
background: var(--white);
}
.fd-payment-num {
width: 24px; height: 24px;
border-radius: 50%;
background: var(--off-white);
border: 1.5px solid var(--off-white-dark);
color: var(--gray);
display: flex; align-items: center; justify-content: center;
font-size: 11.5px; font-weight: 700;
}
.fd-payment-info { min-width: 0; }
.fd-payment-name {
font-size: 13px;
font-weight: 700;
color: var(--dark);
line-height: 1.2;
}
.fd-payment-sub {
font-size: 11px;
color: var(--gray);
margin-top: 2px;
}
.fd-payment-amount {
font-size: 13.5px;
font-weight: 700;
color: var(--dark);
font-variant-numeric: tabular-nums;
}
.fd-payment-pct {
display: inline-flex; align-items: center; gap: 3px;
background: var(--brown); color: white;
font-size: 10px; font-weight: 700;
padding: 2px 7px; border-radius: var(--radius-full);
font-variant-numeric: tabular-nums;
}
.fd-payment-pct.payment-default {
background: var(--off-white);
color: var(--brown-dark);
border: 1px solid var(--off-white-dark);
padding: 1px 6px;
}
.fd-payment-pct.payment-rough { background: var(--brown-light); }
.fd-payment-pct.payment-substantial { background: var(--brown); }
.fd-payment-pct.payment-punch { background: var(--brown-dark); }
.fd-payment-total {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-3) var(--sp-4);
background: var(--off-white-light);
}
.fd-payment-total-label {
font-size: 12px;
font-weight: 700;
color: var(--gray);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.fd-payment-total-amount {
font-size: 18px;
font-weight: 700;
color: var(--brown-dark);
font-variant-numeric: tabular-nums;
}
/* Final Delivery action buttons + state */
.fd-action {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
margin-top: auto;
}
.btn-block { width: 100%; }
.fd-action[disabled] {
background: var(--off-white) !important;
color: var(--gray) !important;
border-color: var(--off-white-dark) !important;
cursor: not-allowed;
pointer-events: none;
}
.fd-action[disabled] .fd-action-icon-locked { display: inline-block; }
.fd-action:not([disabled]) .fd-action-icon-locked { display: none; }
.fd-action.fd-action-done {
background: var(--off-white-light) !important;
color: var(--brown-dark) !important;
border: 1px solid var(--off-white-dark) !important;
cursor: default;
pointer-events: none;
}
.fd-action.fd-action-done::before {
content: '';
width: 14px;
height: 14px;
display: inline-block;
background: var(--green-dark);
-webkit-mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
mask: url("data:image/svg+xml;utf8,") center/contain no-repeat;
margin-right: 2px;
}
.fd-action-hint {
font-size: 11.5px;
color: var(--gray);
text-align: center;
margin-top: -8px;
font-style: italic;
}
.fd-action:not([disabled]) ~ .fd-action-hint { display: none; }
/* "Preview the contract template" – small ghost link that opens a modal explaining
what the standard construction contract covers. Available in all FD states so the
client can read the terms before signing (or reference them after). */
.fd-contract-preview {
display: inline-flex;
align-items: center;
gap: var(--sp-2);
margin-top: var(--sp-1);
align-self: center;
font-size: 12px;
font-weight: 500;
color: var(--brown);
text-decoration: none;
padding: var(--sp-1) var(--sp-2);
border-radius: var(--radius-sm);
transition: background 120ms ease;
}
.fd-contract-preview:hover {
color: var(--brown-dark);
text-decoration: underline;
background: var(--off-white-light);
}
.fd-contract-preview svg {
flex-shrink: 0;
opacity: 0.85;
}
/* Contract preview modal – lists what the standard template covers. */
.contract-preview-intro {
margin: 0 0 var(--sp-4);
font-size: 13.5px;
color: var(--gray);
line-height: 1.55;
}
.contract-preview-sections {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.contract-preview-sections li {
padding-left: var(--sp-5);
position: relative;
font-size: 13px;
line-height: 1.5;
color: var(--dark);
}
.contract-preview-sections li::before {
content: '';
position: absolute;
left: var(--sp-2);
top: 9px;
width: 5px;
height: 5px;
border-radius: 50%;
background: var(--brown);
}
.contract-preview-sections strong {
font-weight: 600;
color: var(--dark);
}
.contract-preview-footer-note {
margin: var(--sp-4) 0 0;
font-size: 11.5px;
color: var(--gray);
font-style: italic;
text-align: center;
}
/* Mark as Paid sits directly under Wire Instructions, visible only in state 6 (Signed).
When visible, it's the primary CTA – wire then confirm. */
.fd-action-confirm { margin-top: -6px; }
.fd-action-confirm.hidden { display: none !important; }
/* Wire instructions dialog (side panel) lives outside the main content flow and slides in
from the right when the user clicks Wire Instructions on the Final Delivery payment card. */
/* ─── Locked phase state (used for Construction, Closeout, Design Call 3, Final Delivery) ─── */
.locked-state {
background: var(--white);
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-lg);
padding: var(--sp-12) var(--sp-6);
text-align: center;
max-width: 560px;
margin: var(--sp-8) auto;
}
.locked-icon { width: 64px; height: 64px; border-radius: 50%; background: var(--off-white); color: var(--gray); display: inline-flex; align-items: center; justify-content: center; margin-bottom: var(--sp-4); }
.locked-title { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.locked-desc { font-size: 14px; color: var(--gray); line-height: 1.5; margin-bottom: var(--sp-5); }
.locked-cta-row { display: flex; gap: var(--sp-3); justify-content: center; flex-wrap: wrap; }
/* ─── View headers (Property, Construction, Closeout) ─── */
.view-header {
background: var(--white);
border-bottom: 1px solid var(--off-white-dark);
padding: var(--sp-6) var(--sp-7);
}
.view-header-inner {
max-width: 1180px;
margin: 0 auto;
display: flex;
align-items: flex-start;
gap: var(--sp-4);
}
.view-header-main { flex: 1; min-width: 0; }
.view-kicker { font-size: 11px; font-weight: 700; color: var(--brown); text-transform: uppercase; letter-spacing: 0.08em; }
.view-title { font-size: 32px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.1; margin-top: 4px; }
.view-title .accent { font-family: var(--font-accent); font-weight: 500; font-style: italic; }
.view-subtitle { font-size: 14px; color: var(--gray); margin-top: 4px; }
.view-subtitle-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
margin-top: 4px;
flex-wrap: wrap;
}
.view-subtitle-row .view-subtitle { margin-top: 0; }
.view-header-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 7px 12px;
background: var(--white);
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-full);
font-size: 12px;
font-weight: 600;
color: var(--dark);
white-space: nowrap;
}
.view-header-tag svg { color: var(--gray); flex-shrink: 0; }
/* ─── Property page additions ─── */
.photo-collage {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-3);
}
.photo-tile {
aspect-ratio: 16 / 9;
border-radius: var(--radius-md);
overflow: hidden;
position: relative;
cursor: pointer;
transition: transform 0.15s, box-shadow 0.15s;
background: var(--off-white-dark);
}
.photo-tile:hover { transform: scale(1.015); box-shadow: var(--shadow-md); }
.photo-tile-bg {
position: absolute; inset: 0;
background-size: cover;
background-position: center;
}
.photo-tile-bg::after {
content: '';
position: absolute; inset: 0;
background: linear-gradient(180deg, transparent 50%, rgba(0,0,0,0.45) 100%);
}
.photo-tile-label {
position: absolute;
bottom: 8px; left: 10px;
font-size: 11px;
font-weight: 700;
color: white;
text-transform: uppercase;
letter-spacing: 0.06em;
z-index: 1;
}
/* Gradient placeholders for "photos" of each room */
.photo-tile-kitchen { background: linear-gradient(135deg, #d9c5b1 0%, #b8997d 50%, #8a6747 100%); }
.photo-tile-bath { background: linear-gradient(135deg, #C8D3D7 0%, #95A3A8 60%, #6B7B82 100%); }
.photo-tile-living { background: linear-gradient(135deg, #d6cdc1 0%, #ada499 50%, #7d736a 100%); }
.photo-tile-dining { background: linear-gradient(135deg, #B9A38B 0%, #8A745C 100%); }
.photo-tile-bedroom { background: linear-gradient(135deg, #d4c4b6 0%, #b39d8a 50%, #87705e 100%); }
.photo-tile-exterior { background: linear-gradient(135deg, #9eaa9c 0%, #6e7b6d 50%, #4a5648 100%); }
/* Add subtle "interior" suggestion via inset shape */
.photo-tile-bg::before {
content: '';
position: absolute;
bottom: 0; left: 0; right: 0;
height: 35%;
background: linear-gradient(180deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.25) 100%);
}
/* ─── As-Is Photo Lightbox ─── */
.lightbox {
display: none;
position: fixed;
inset: 0;
background: rgba(0,0,0,0.88);
z-index: 1000;
align-items: center;
justify-content: center;
padding: 80px;
animation: fadeIn 0.15s ease-out;
}
.lightbox.open { display: flex; }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
.lightbox-content {
width: 100%;
max-width: 1100px;
display: flex;
flex-direction: column;
gap: 16px;
align-items: center;
}
.lightbox-image {
width: 100%;
aspect-ratio: 16 / 9;
max-height: 75vh;
border-radius: var(--radius-lg);
cursor: default;
pointer-events: none;
}
.lightbox-image:hover { transform: none; box-shadow: none; }
.lightbox-meta {
display: flex;
align-items: center;
justify-content: space-between;
width: 100%;
color: white;
pointer-events: none;
}
.lightbox-caption {
font-size: 15px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.lightbox-counter {
font-size: 12px;
color: rgba(255,255,255,0.6);
font-variant-numeric: tabular-nums;
}
.lightbox-close, .lightbox-nav {
position: absolute;
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.15);
color: white;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
border-radius: 50%;
transition: background 0.15s, border-color 0.15s;
font-family: var(--font);
}
.lightbox-close { top: 24px; right: 24px; width: 40px; height: 40px; }
.lightbox-nav { top: 50%; transform: translateY(-50%); width: 52px; height: 52px; }
.lightbox-prev { left: 24px; }
.lightbox-next { right: 24px; }
.lightbox-close:hover, .lightbox-nav:hover {
background: rgba(255,255,255,0.18);
border-color: rgba(255,255,255,0.3);
}
/* Walkthrough Notes */
.notes-section {
padding: var(--sp-4) 0;
border-bottom: 1px dashed var(--off-white-dark);
}
.notes-section:first-child { padding-top: 0; }
.notes-section:last-child { border-bottom: none; padding-bottom: 0; }
.notes-section-title {
font-size: 11px;
font-weight: 700;
color: var(--brown);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--sp-3);
}
.notes-list { display: flex; flex-direction: column; gap: 8px; }
.notes-list-item {
display: flex; align-items: flex-start; gap: 10px;
font-size: 13.5px;
line-height: 1.5;
color: var(--dark);
}
.notes-list-item::before {
content: '';
width: 4px; height: 4px;
border-radius: 50%;
background: var(--brown);
margin-top: 9px;
flex-shrink: 0;
}
/* Measurements table */
.measurements-table {
width: 100%;
border-collapse: collapse;
}
.measurements-table th {
text-align: left;
font-size: 10.5px;
font-weight: 700;
color: var(--gray);
text-transform: uppercase;
letter-spacing: 0.06em;
padding: 10px var(--sp-5);
background: var(--off-white-light);
border-bottom: 1px solid var(--off-white-dark);
}
.measurements-table th:last-child,
.measurements-table td:last-child { text-align: right; }
.measurements-table td {
padding: var(--sp-3) var(--sp-5);
border-bottom: 1px solid var(--off-white-dark);
font-size: 13.5px;
font-variant-numeric: tabular-nums;
}
.measurements-table tr:last-child td { border-bottom: none; }
.measurements-table .room-name { font-weight: 600; color: var(--dark); }
.measurements-note {
padding: 10px var(--sp-5);
background: var(--off-white-light);
border-top: 1px solid var(--off-white-dark);
font-size: 11.5px;
color: var(--gray);
display: flex; align-items: center; gap: 6px;
}
@media (max-width: 900px) {
.photo-collage { grid-template-columns: repeat(2, 1fr); }
}
/* ─── Documents view ─── */
.docs-toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
margin-bottom: var(--sp-5);
flex-wrap: wrap;
}
.docs-search {
flex: 1;
max-width: 360px;
position: relative;
}
.docs-search-input {
width: 100%;
padding: 10px 14px 10px 38px;
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-md);
font-family: var(--font);
font-size: 13.5px;
color: var(--dark);
background: var(--white);
outline: none;
transition: all 0.15s;
}
.docs-search-input:focus { border-color: var(--brown); box-shadow: 0 0 0 2px rgba(149,103,76,0.12); }
.docs-search-input::placeholder { color: var(--gray); }
.docs-search-icon {
position: absolute;
left: 12px; top: 50%;
transform: translateY(-50%);
color: var(--gray);
pointer-events: none;
}
.docs-count {
font-size: 12.5px; color: var(--gray);
}
.docs-count strong { color: var(--dark); font-weight: 700; }
.docs-section { margin-bottom: var(--sp-6); }
.docs-section-header {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: var(--sp-3);
}
.docs-section-title {
display: flex; align-items: center; gap: var(--sp-2);
font-size: 11px; font-weight: 700;
color: var(--dark);
text-transform: uppercase; letter-spacing: 0.06em;
}
.docs-section-title svg { color: var(--brown); }
.docs-section-count {
font-size: 11px; color: var(--gray); font-weight: 600;
padding: 2px 8px;
background: var(--off-white);
border-radius: var(--radius-full);
}
.docs-list {
display: flex; flex-direction: column;
background: var(--white);
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-lg);
overflow: hidden;
}
.doc-row {
display: flex; align-items: center; gap: var(--sp-4);
padding: var(--sp-4) var(--sp-5);
border-bottom: 1px solid var(--off-white-dark);
cursor: pointer;
transition: background 0.12s;
}
.doc-row:last-child { border-bottom: none; }
.doc-row:hover { background: var(--off-white-light); }
.doc-icon {
width: 40px; height: 40px;
border-radius: var(--radius-md);
background: var(--off-white);
color: var(--brown);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
position: relative;
}
.doc-icon-ext {
position: absolute;
bottom: -2px; right: -4px;
background: var(--brown);
color: white;
font-size: 8px; font-weight: 700;
padding: 1px 4px;
border-radius: 3px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.doc-info { flex: 1; min-width: 0; }
.doc-name {
font-size: 14px; font-weight: 600; color: var(--dark);
display: flex; align-items: center; gap: 8px;
flex-wrap: wrap;
}
.doc-meta {
font-size: 12px; color: var(--gray);
margin-top: 2px;
}
.doc-badge-new {
background: var(--orange); color: white;
font-size: 9.5px; font-weight: 700;
padding: 2px 6px;
border-radius: 4px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.doc-actions {
display: flex; gap: 4px;
flex-shrink: 0;
}
.doc-action-btn {
width: 32px; height: 32px;
border-radius: var(--radius-md);
background: var(--white);
border: 1px solid var(--off-white-dark);
color: var(--gray);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all 0.15s;
}
.doc-action-btn:hover { background: var(--off-white); color: var(--dark); border-color: var(--brown-light); }
/* ─── Selections view ─── */
/* Locked state – covers the Selections page until Final Delivery / contract signing.
Single centered card explaining when the page becomes available and why. */
.selections-locked-state {
display: none;
max-width: 620px;
margin: var(--sp-8) auto;
padding: var(--sp-7) var(--sp-7) var(--sp-6);
background: var(--white);
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-lg);
text-align: center;
}
body.selections-locked .selections-locked-state { display: block; }
body.selections-locked [data-selections-content] { display: none; }
.selections-locked-variant { display: none; }
body.selections-prepurchase .selections-locked-state [data-locked-variant="prepurchase"] { display: block; }
body.selections-phase-locked .selections-locked-state [data-locked-variant="phase"] { display: block; }
.selections-locked-icon {
width: 56px; height: 56px;
border-radius: 50%;
background: var(--off-white);
color: var(--brown);
display: flex; align-items: center; justify-content: center;
margin: 0 auto var(--sp-4);
}
.selections-locked-title {
font-size: 20px;
font-weight: 700;
color: var(--dark);
margin-bottom: var(--sp-3);
letter-spacing: -0.01em;
}
.selections-locked-desc {
font-size: 14px;
color: var(--gray);
line-height: 1.55;
max-width: 480px;
margin: 0 auto var(--sp-5);
}
.selections-locked-when {
display: inline-block;
padding: 6px 14px;
font-size: 12px;
font-weight: 700;
color: var(--brown-dark);
background: var(--off-white);
border: 1px solid var(--brown-light);
border-radius: 999px;
letter-spacing: 0.02em;
}
/* Header stats banner – selection progress + allowance, shown in the page header
beside the title. Gated off in the locked state. */
.selections-header-inner {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--sp-6);
flex-wrap: wrap;
}
.selections-headstats {
display: flex;
align-items: stretch;
gap: var(--sp-6);
flex-shrink: 0;
}
body.selections-locked .selections-headstats { display: none; }
/* With the title removed, the header carries only the stats; hide the whole header
in the locked state so there's no empty bar above the lock card. */
body.selections-locked .view[data-view="selections"] .view-header { display: none; }
.selections-headstat { min-width: 160px; }
.selections-headstat-top { display: flex; align-items: baseline; gap: 6px; }
.selections-headstat-num {
font-size: 24px;
font-weight: 700;
color: var(--dark);
line-height: 1;
font-variant-numeric: tabular-nums;
}
.selections-headstat-of { font-size: 13px; font-weight: 600; color: var(--gray); }
.selections-headstat-label {
font-size: 11px;
color: var(--gray);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: 700;
margin-top: 4px;
}
.selections-headstat-bar {
height: 4px;
background: var(--off-white-dark);
border-radius: 999px;
overflow: hidden;
margin-top: 8px;
}
.selections-headstat-bar span {
display: block;
height: 100%;
background: var(--brown);
border-radius: 999px;
}
.selections-headstat-deadline {
align-self: center;
font-size: 12.5px;
font-weight: 700;
color: var(--brown);
padding-left: var(--sp-6);
border-left: 1px solid var(--off-white-dark);
white-space: nowrap;
}
/* Slim finalize-by help note above the room list. */
.selections-helpnote {
display: flex;
align-items: center;
gap: 8px;
font-size: 12px;
color: var(--gray);
margin-bottom: var(--sp-4);
}
.selections-helpnote svg { color: var(--slate); flex-shrink: 0; }
/* Segmented filter toggle – 3 options with a sliding thumb behind the active one. */
.selections-toolbar { margin-bottom: var(--sp-5); }
.sel-segmented {
position: relative;
display: inline-flex;
background: var(--off-white);
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-full);
padding: 3px;
gap: 0;
}
.sel-segmented-thumb {
position: absolute;
top: 3px; bottom: 3px;
left: 3px;
border-radius: var(--radius-full);
background: var(--white);
box-shadow: 0 1px 3px rgba(0,0,0,0.12);
transition: left 0.22s cubic-bezier(0.4,0,0.2,1), width 0.22s cubic-bezier(0.4,0,0.2,1);
z-index: 0;
}
.sel-segment {
position: relative;
z-index: 1;
display: inline-flex;
align-items: center;
gap: 7px;
padding: 8px var(--sp-4);
border: none;
background: transparent;
color: var(--gray);
font-size: 13px;
font-weight: 600;
cursor: pointer;
font-family: var(--font);
white-space: nowrap;
transition: color 0.15s;
}
.sel-segment.active { color: var(--dark); }
.sel-segment-count {
font-size: 11px;
font-weight: 700;
padding: 1px 7px;
border-radius: 9px;
background: var(--off-white-dark);
color: var(--gray);
font-variant-numeric: tabular-nums;
}
.sel-segment.active .sel-segment-count { background: var(--brown); color: var(--white); }
/* The "Selected" count turns green only while that toggle is active; otherwise it
uses the same tan as the other tabs' counts. */
.sel-segment.active[data-filter="selected"] .sel-segment-count { background: var(--green); color: var(--white); }
/* Layout: sticky room-nav rail + room list. */
.selections-layout {
display: grid;
grid-template-columns: 208px 1fr;
gap: var(--sp-6);
align-items: start;
}
/* Room nav = a vertical timeline. A connector line runs through a node per room;
the active room (set by scroll-spy) fills brown. Sticky so it follows; the box
fills down to the bottom of the viewport. Long lists scroll inside the box so
every room stays reachable down to the last one. */
.selections-roomnav {
position: sticky;
top: var(--sp-4);
display: flex;
flex-direction: column;
max-height: calc(100vh - var(--sp-8));
overflow-y: auto;
padding-right: 2px;
}
.roomnav-title {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.08em;
color: var(--gray);
padding: 0 0 var(--sp-3) 2px;
}
.roomnav-track { position: relative; }
/* The timeline spine is drawn per item: each room's node connects DOWN to the next
room's node. The last room has no connector, so the line stops at its node instead
of overrunning past it. node center ≈ 21px from the item top; node-column center
x ≈ 9px (spine width 2 at left:8). The node's white ring masks the line behind it. */
.roomnav-item:not(:last-child)::after {
content: "";
position: absolute;
left: 8px;
top: 21px;
width: 2px;
height: 100%;
background: var(--off-white-dark);
border-radius: 2px;
z-index: 0;
}
.roomnav-item {
position: relative;
display: flex;
align-items: flex-start;
gap: 9px;
width: 100%;
text-align: left;
padding: 13px 8px 13px 0;
border: none;
background: transparent;
cursor: pointer;
font-family: var(--font);
color: var(--dark);
min-height: 56px;
}
/* Node (dot) on the spine */
.roomnav-node {
position: relative;
z-index: 1;
flex-shrink: 0;
width: 18px;
display: flex;
justify-content: center;
padding-top: 2px;
}
.roomnav-node::before {
content: "";
width: 13px; height: 13px;
border-radius: 50%;
background: var(--white);
border: 2px solid var(--off-white-dark);
box-shadow: 0 0 0 3px var(--white);
transition: background 0.15s, border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}
.roomnav-item:hover .roomnav-node::before { border-color: var(--brown-light); }
.roomnav-item.active .roomnav-node::before {
background: var(--brown);
border-color: var(--brown);
transform: scale(1.18);
}
/* A "complete" room (all selections made) gets a filled green node. */
.roomnav-item.complete .roomnav-node::before {
background: var(--green);
border-color: var(--green);
}
.roomnav-item-body { min-width: 0; flex: 1; display: flex; flex-direction: column; }
.roomnav-item-name {
font-size: 15px;
font-weight: 600;
color: var(--gray);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
transition: color 0.15s;
}
.roomnav-item:hover .roomnav-item-name { color: var(--dark); }
.roomnav-item.active .roomnav-item-name { color: var(--brown); font-weight: 700; }
.roomnav-item-progress {
font-size: 12px;
color: var(--gray);
margin-top: 3px;
font-variant-numeric: tabular-nums;
opacity: 0.85;
}
@media (max-width: 1100px) {
/* Collapse to a horizontal chip row across the top on narrow screens. */
.selections-layout { grid-template-columns: 1fr; }
.selections-roomnav {
position: static;
max-height: none;
margin-bottom: var(--sp-4);
}
.roomnav-title { display: none; }
.roomnav-track { display: flex; flex-wrap: wrap; gap: var(--sp-2); }
.roomnav-track::before { display: none; }
.roomnav-item:not(:last-child)::after { display: none; }
.roomnav-item {
width: auto;
min-height: 0;
padding: 7px 12px;
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-full);
background: var(--white);
}
.roomnav-item.active { border-color: var(--brown-light); background: var(--off-white-light); }
.roomnav-node { display: none; }
.roomnav-item-progress { display: none; }
}
/* >4 options → horizontal carousel with arrows. */
.sel-options-carousel { position: relative; padding: var(--sp-4) var(--sp-5); }
.sel-carousel-track {
display: flex;
gap: var(--sp-3);
overflow-x: auto;
scroll-behavior: smooth;
scroll-snap-type: x proximity;
scrollbar-width: none; /* native bar hidden; custom slider below is always visible */
}
.sel-carousel-track::-webkit-scrollbar { display: none; }
/* Show 3 full cards plus ~a third of the 4th, so it's obvious there's more to
reveal. Peek width is baked into the flex-basis: 3.35 cards across the track. */
.sel-carousel-track > .sel-option-card {
flex: 0 0 calc((100% - 3.35 * var(--sp-3)) / 3.35);
scroll-snap-align: start;
}
/* Custom slider – always visible (only rendered for carousels, i.e. >3 options).
Click anywhere on the track to jump; drag the thumb to scroll. */
.sel-carousel-scrollbar {
position: relative;
height: 6px;
margin: 12px var(--sp-2) 0;
background: var(--off-white);
border-radius: 999px;
cursor: pointer;
}
.sel-carousel-thumb {
position: absolute;
top: 0; left: 0; height: 100%;
min-width: 28px;
border-radius: 999px;
background: var(--off-white-dark);
transition: background 0.15s;
cursor: grab;
}
.sel-carousel-scrollbar:hover .sel-carousel-thumb { background: var(--brown-light); }
.sel-carousel-thumb:active { background: var(--brown); cursor: grabbing; }
.sel-carousel-arrow {
position: absolute;
top: calc(50% - 9px);
transform: translateY(-50%);
width: 34px; height: 34px;
border-radius: 50%;
background: var(--white);
border: 1px solid var(--off-white-dark);
box-shadow: var(--shadow-sm);
color: var(--brown);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
z-index: 3;
transition: background 0.15s, opacity 0.15s;
}
.sel-carousel-arrow:hover:not(:disabled) { background: var(--off-white-light); }
.sel-carousel-arrow:disabled { opacity: 0.25; cursor: default; }
.sel-carousel-prev { left: 6px; }
.sel-carousel-next { right: 6px; }
/* Category-level comments – one thread per category card (not per option). */
.sel-category-comment-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 5px 10px;
border: 1px solid var(--off-white-dark);
background: var(--white);
border-radius: var(--radius-full);
color: var(--gray);
font-family: var(--font);
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.15s;
}
.sel-category-comment-btn:hover { border-color: var(--brown-light); color: var(--brown); }
.sel-category-comment-btn.has-comments { color: var(--brown); border-color: var(--brown-light); background: var(--off-white-light); }
.sel-category-comment-btn svg { flex-shrink: 0; }
.sel-category-comments {
display: none;
margin: 0 var(--sp-5) var(--sp-5);
background: var(--white);
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-md);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.sel-category-comments.expanded { display: block; }
/* Comment affordance lives in a footer bar at the bottom of each category card. */
.sel-category-footer {
display: flex;
padding: 0 var(--sp-5) var(--sp-4);
}
/* Filter state – driven by a class on .view[data-view="selections"]. Targets
.sel-category data attributes (set per-category in the new options-grid layout). */
.view[data-view="selections"][data-sel-filter="open"] .sel-category[data-sel-state="selected"] { display: none; }
.view[data-view="selections"][data-sel-filter="selected"] .sel-category[data-sel-state="open"] { display: none; }
.view[data-view="selections"][data-sel-filter="over"] .sel-category:not([data-sel-over="true"]) { display: none; }
/* Hide empty rooms – when all categories in a room are filtered out, hide the room */
.view[data-view="selections"][data-sel-filter="open"] .selections-room:not(:has(.sel-category[data-sel-state="open"])) { display: none; }
.view[data-view="selections"][data-sel-filter="selected"] .selections-room:not(:has(.sel-category[data-sel-state="selected"])) { display: none; }
.view[data-view="selections"][data-sel-filter="over"] .selections-room:not(:has(.sel-category[data-sel-over="true"])) { display: none; }
/* ─── Selections item comments ───
Small comment button shows on hover; click expands an inline composer below
the item. Existing comments render in a thread above the composer. */
.selections-item {
position: relative;
}
.selections-item-comment-btn {
position: absolute;
top: 50%;
right: 200px;
transform: translateY(-50%);
width: 26px; height: 26px;
border: none;
background: var(--white);
border: 1px solid var(--off-white-dark);
border-radius: 50%;
color: var(--gray);
cursor: pointer;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font);
transition: all 0.15s;
}
.selections-item:hover .selections-item-comment-btn { opacity: 0.6; }
.selections-item-comment-btn:hover { opacity: 1 !important; color: var(--brown); border-color: var(--brown-light); }
.selections-item-comment-btn.has-comments {
opacity: 1;
background: var(--brown-light);
border-color: var(--brown);
color: var(--brown-dark);
}
.selections-item-comment-count {
position: absolute;
top: -4px;
right: -4px;
background: var(--brown);
color: var(--white);
font-size: 9px;
font-weight: 700;
padding: 1px 5px;
border-radius: 8px;
min-width: 14px;
text-align: center;
line-height: 1.3;
}
/* Inline comment thread – sits below the selections-item */
.selections-item-thread {
grid-column: 1 / -1;
margin-top: var(--sp-3);
padding: var(--sp-3) var(--sp-4);
background: var(--off-white-light);
border-radius: var(--radius-sm);
border-left: 3px solid var(--brown-light);
}
.selections-item-thread.hidden { display: none; }
.selections-thread-comment {
display: flex;
gap: var(--sp-2);
padding: 6px 0;
border-bottom: 1px dashed var(--off-white-dark);
font-size: 12.5px;
line-height: 1.5;
}
.selections-thread-comment:last-of-type { border-bottom: none; }
.selections-thread-author {
font-weight: 700;
color: var(--dark);
flex-shrink: 0;
}
.selections-thread-when {
font-size: 10.5px;
color: var(--gray);
margin-left: 4px;
font-weight: 600;
}
.selections-thread-text { color: var(--dark); }
.selections-thread-composer {
display: flex;
gap: var(--sp-2);
margin-top: var(--sp-2);
padding-top: var(--sp-2);
border-top: 1px solid var(--off-white-dark);
}
.selections-thread-textarea {
flex: 1;
border: 1px solid var(--off-white-dark);
background: var(--white);
border-radius: var(--radius-sm);
padding: 6px 10px;
font-family: var(--font);
font-size: 12.5px;
resize: vertical;
min-height: 32px;
outline: none;
color: var(--dark);
}
.selections-thread-textarea:focus { border-color: var(--brown); }
.selections-thread-submit {
background: var(--brown);
color: var(--white);
border: none;
border-radius: var(--radius-sm);
padding: 0 var(--sp-3);
font-size: 12px;
font-weight: 700;
cursor: pointer;
font-family: var(--font);
}
.selections-thread-submit:hover { background: var(--brown-dark); }
.selections-thread-submit:disabled { opacity: 0.4; cursor: not-allowed; }
/* Room blocks */
.selections-room {
background: var(--white);
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-md);
margin-bottom: var(--sp-5);
}
/* The card no longer uses overflow:hidden (so the header can stick), so round the
last category's bottom corners to keep the card's rounded shape. */
.selections-room .sel-category:last-child {
border-bottom-left-radius: var(--radius-md);
border-bottom-right-radius: var(--radius-md);
overflow: hidden;
}
.selections-room-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-4);
padding: var(--sp-4) var(--sp-5);
background: var(--brown);
border-bottom: 1px solid var(--brown);
/* Stick to the top of the viewport while scrolling through the room, so the
client always knows which room they're in. Top corners rounded to match the
card (the card no longer clips via overflow). */
border-radius: var(--radius-md) var(--radius-md) 0 0;
position: sticky;
top: 0;
z-index: 5;
}
.selections-room-name {
display: flex;
align-items: center;
gap: var(--sp-3);
}
.selections-room-code {
display: inline-flex;
align-items: center; justify-content: center;
font-size: 11px;
font-weight: 700;
color: var(--off-white);
background: rgba(255,255,255,0.08);
border: 1px solid rgba(255,255,255,0.18);
border-radius: 4px;
padding: 4px 8px;
font-variant-numeric: tabular-nums;
min-width: 38px;
}
.selections-room-title {
font-family: var(--font-accent);
font-style: italic;
font-size: 24px;
font-weight: 600;
color: var(--white);
letter-spacing: 0.01em;
}
.selections-room-meta {
display: flex;
align-items: center;
gap: var(--sp-4);
font-size: 12.5px;
font-variant-numeric: tabular-nums;
}
.selections-room-progress { color: rgba(255,255,255,0.65); font-weight: 600; }
.selections-room-budget { color: var(--off-white); font-weight: 700; }
.selections-list {
display: flex;
flex-direction: column;
}
.selections-item {
display: grid;
grid-template-columns: 24px 1fr 180px;
gap: var(--sp-4);
align-items: center;
padding: var(--sp-3) var(--sp-5);
border-bottom: 1px solid var(--off-white-dark);
}
.selections-item:last-child { border-bottom: none; }
.selections-item-status {
width: 22px; height: 22px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
background: var(--green);
color: var(--white);
flex-shrink: 0;
}
.selections-item-status-open {
background: var(--white);
border: 1.5px dashed var(--brown);
color: var(--brown);
font-size: 12px;
font-weight: 700;
}
.selections-item-info { min-width: 0; }
.selections-item-cat {
font-size: 11.5px;
font-weight: 700;
color: var(--gray);
text-transform: uppercase;
letter-spacing: 0.05em;
margin-bottom: 2px;
}
.selections-item-pick {
font-size: 13.5px;
color: var(--dark);
font-weight: 500;
line-height: 1.35;
}
.selections-item-pick-empty {
color: var(--gray);
font-style: italic;
font-weight: 500;
}
.selections-item-allowance {
text-align: right;
font-variant-numeric: tabular-nums;
}
.selections-item-amount {
font-size: 14px;
font-weight: 700;
color: var(--dark);
}
.selections-item-amount-empty {
font-size: 14px;
color: var(--off-white-dark);
font-weight: 600;
}
.selections-item-allowance-label {
font-size: 11px;
color: var(--gray);
margin-top: 1px;
}
.selections-item-over {
display: inline-block;
font-size: 10.5px;
font-weight: 700;
color: var(--error);
background: rgba(212,0,0,0.08);
padding: 1px 6px;
border-radius: 4px;
margin-top: 4px;
letter-spacing: 0.02em;
}
/* ─── In-person Visit Card ───
Sits above the Sample Order Guide on the Selections page. Single-row card with
icon + copy + CTA button. Always visible (not collapsible) – the visit is a
primary action the client should take during the design phase. */
.visit-card {
display: flex;
align-items: center;
gap: var(--sp-4);
padding: var(--sp-4) var(--sp-5);
background: var(--white);
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-md);
margin-bottom: var(--sp-3);
}
.visit-card-icon {
flex-shrink: 0;
width: 40px; height: 40px;
border-radius: 50%;
background: var(--brown-light);
color: var(--brown-dark);
display: flex;
align-items: center;
justify-content: center;
}
.visit-card-text { flex: 1; min-width: 0; }
.visit-card-title {
font-size: 15px;
font-weight: 700;
color: var(--dark);
margin-bottom: 3px;
}
.visit-card-desc {
font-size: 12.5px;
color: var(--gray);
line-height: 1.45;
}
.visit-card-cta {
flex-shrink: 0;
white-space: nowrap;
}
/* ─── Selection Categories (multi-option grid pattern) ───
New Selections layout: each room contains .sel-category blocks, and each
category renders 2+ product options as image cards in a grid. The selected
option gets a green border + corner check. Hovered options get a brown
border to invite interaction (production: click to express a preference or
open the product in a side panel; prototype is read-only).
Filter behavior operates at the category level via data-sel-state attribute
on .sel-category (CSS rules around line 2940). */
.sel-category {
background: var(--white);
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-md);
margin-bottom: var(--sp-4);
overflow: hidden;
}
/* Brief highlight when a to-do "Go to selection" link scrolls the client here. */
.sel-category.sel-flash { animation: selFlash 1.9s ease-out; }
@keyframes selFlash {
0%, 18% { box-shadow: inset 0 0 0 2px var(--brown); background: rgba(149, 103, 76, 0.08); }
100% { box-shadow: inset 0 0 0 2px transparent; background: var(--white); }
}
.sel-category-header {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--sp-4) var(--sp-5);
background: var(--white);
border-bottom: 1px solid var(--off-white);
gap: var(--sp-4);
}
.sel-category-head-left {
display: flex;
align-items: center;
gap: var(--sp-3);
min-width: 0;
}
.sel-category-name {
font-size: 15px;
font-weight: 700;
color: var(--dark);
}
.sel-category-status {
display: inline-flex;
align-items: center;
gap: 4px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.04em;
padding: 3px 8px;
border-radius: var(--radius-sm);
}
.sel-category-status svg { flex-shrink: 0; }
.sel-category-status-selected { background: var(--green-light, #DDEFE2); color: var(--green-dark); }
.sel-category-status-over { background: var(--brown-light); color: var(--brown-dark); }
.sel-category-status-open { background: var(--off-white-dark); color: var(--gray); }
.sel-category-allowance {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 2px;
white-space: nowrap;
font-variant-numeric: tabular-nums;
}
.sel-category-amount {
font-size: 16px;
font-weight: 700;
color: var(--dark);
}
.sel-category-amount-empty {
font-size: 18px;
font-weight: 700;
color: var(--gray);
line-height: 1;
}
.sel-category-amount-over {
color: var(--brown-dark);
}
.sel-category-allowance-of {
font-size: 11px;
color: var(--gray);
font-weight: 500;
}
/* Options grid: 3 across (categories with >3 options become a carousel via JS).
Scales down at narrow widths. */
.sel-options-grid {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: var(--sp-3);
padding: var(--sp-4) var(--sp-5);
}
@media (max-width: 980px) { .sel-options-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 600px) { .sel-options-grid { grid-template-columns: 1fr; } }
/* Option card – image on top, body below. Selected state = green border +
light green tint background + visible corner check. Hover = brown border. */
.sel-option-card {
position: relative;
border: 2px solid var(--off-white-dark);
border-radius: var(--radius-md);
background: var(--white);
overflow: hidden;
transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
display: flex;
flex-direction: column;
}
.sel-option-card:hover {
border-color: var(--brown);
box-shadow: var(--shadow-sm);
}
.sel-option-selected {
border-color: var(--green);
background: rgba(76, 174, 80, 0.05);
}
.sel-option-selected:hover {
border-color: var(--green-dark);
}
.sel-option-img {
width: 100%;
aspect-ratio: 4 / 3;
position: relative;
background: linear-gradient(135deg, var(--off-white-dark) 0%, var(--off-white) 50%, var(--off-white-dark) 100%);
}
/* Prototype-only gradient placeholders per category. Production replaces
these classes with 
tags (admin uploads product photos via
JobTread or a catalog integration). Distinct gradients help differentiate
cards during demos without real images. */
.sel-img-cabinetry-1 { background: linear-gradient(135deg, #F0E8D8 0%, #E8DEC8 50%, #D8CDB5 100%); }
.sel-img-cabinetry-2 { background: linear-gradient(135deg, #E8E0CF 0%, #D9CFB8 50%, #C8BCA0 100%); }
.sel-img-cabinetry-3 { background: linear-gradient(135deg, #ECE7DA 0%, #DDD4BD 50%, #C0B59A 100%); }
.sel-img-stone-1 { background: linear-gradient(135deg, #F2EEE6 0%, #E0D6C2 50%, #EFE9DC 100%); }
.sel-img-stone-2 { background: linear-gradient(135deg, #EBE6DE 0%, #C8C0B0 50%, #DDD5C7 100%); }
.sel-img-stone-3 { background: linear-gradient(135deg, #F5F2EC 0%, #DBD3C0 50%, #EBE5D8 100%); }
.sel-img-range-1 { background: linear-gradient(135deg, #3B3D42 0%, #5C6068 50%, #2D2F33 100%); }
.sel-img-range-2 { background: linear-gradient(135deg, #4A4D52 0%, #6C7078 50%, #38393E 100%); }
.sel-img-range-3 { background: linear-gradient(135deg, #B69875 0%, #8E7553 50%, #6B5638 100%); }
.sel-img-tile-1 { background: linear-gradient(135deg, #D8C5A8 0%, #C2A983 50%, #B89770 100%); }
.sel-img-tile-2 { background: linear-gradient(135deg, #E5DBC8 0%, #D4C6AC 50%, #C2B391 100%); }
.sel-img-hardware-1 { background: linear-gradient(135deg, #B0926A 0%, #8B6E48 50%, #6F5635 100%); }
.sel-img-hardware-2 { background: linear-gradient(135deg, #C4C8CC 0%, #9CA1A6 50%, #6D7177 100%); }
.sel-img-hardware-3 { background: linear-gradient(135deg, #7A5A3F 0%, #553D28 50%, #38271A 100%); }
.sel-img-vanity-1 { background: linear-gradient(135deg, #D5C0A0 0%, #B49874 50%, #8A7250 100%); }
.sel-img-vanity-2 { background: linear-gradient(135deg, #E8E2D6 0%, #D2C9B6 50%, #B5AC95 100%); }
.sel-img-floortile-1 { background: linear-gradient(135deg, #EBE6DC 0%, #D2CABA 50%, #B9B09A 100%); }
.sel-img-floortile-2 { background: linear-gradient(135deg, #B6B4B0 0%, #969590 50%, #6F6E6A 100%); }
.sel-img-floortile-3 { background: linear-gradient(135deg, #D6CFC0 0%, #B7AE99 50%, #918875 100%); }
.sel-img-faucet-1 { background: linear-gradient(135deg, #C4C8CC 0%, #9CA1A6 50%, #6D7177 100%); }
.sel-img-faucet-2 { background: linear-gradient(135deg, #D8D6D1 0%, #ADAAA3 50%, #7D7A73 100%); }
.sel-img-floor-1 { background: linear-gradient(135deg, #C9A878 0%, #A0824F 50%, #7A5F32 100%); }
.sel-img-floor-2 { background: linear-gradient(135deg, #D4B889 0%, #AC9460 50%, #836B3A 100%); }
.sel-img-paint-1 { background: linear-gradient(135deg, #F8F4EC 0%, #ECE5D5 50%, #DCD2BC 100%); }
.sel-img-paint-2 { background: linear-gradient(135deg, #FAF6EE 0%, #F0E8D5 50%, #DAC9A6 100%); }
.sel-option-badge {
position: absolute;
top: 8px;
left: 8px;
background: var(--brown);
color: var(--white);
font-size: 9.5px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.05em;
padding: 3px 7px;
border-radius: var(--radius-sm);
z-index: 1;
}
.sel-option-check {
position: absolute;
top: 8px;
right: 8px;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--green);
color: var(--white);
display: none;
align-items: center;
justify-content: center;
box-shadow: 0 1px 3px rgba(0,0,0,0.18);
z-index: 1;
}
.sel-option-selected .sel-option-check { display: flex; }
.sel-option-card { cursor: pointer; }
.sel-option-card .sel-option-link { cursor: pointer; }
.sel-option-body {
padding: var(--sp-3) var(--sp-3) var(--sp-3);
display: flex;
flex-direction: column;
gap: 3px;
flex: 1;
min-width: 0;
}
.sel-option-brand {
font-size: 10.5px;
font-weight: 700;
color: var(--gray);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.sel-option-name {
font-size: 13.5px;
font-weight: 700;
color: var(--dark);
line-height: 1.3;
}
.sel-option-desc {
font-size: 11.5px;
color: var(--gray);
line-height: 1.45;
margin-top: 2px;
flex: 1;
}
.sel-option-meta {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: var(--sp-2);
gap: var(--sp-2);
}
.sel-option-price {
font-size: 14px;
font-weight: 800;
color: var(--dark);
font-variant-numeric: tabular-nums;
}
.sel-option-link {
font-size: 11px;
font-weight: 600;
color: var(--brown);
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 4px;
}
/* Vertical text roll on hover: the label rolls up and an identical copy rolls in
from below (matches the marketing site's link hover). */
.sol-roll { display: inline-block; overflow: hidden; height: 1.4em; line-height: 1.4em; }
.sol-roll span { display: block; transition: transform 0.32s cubic-bezier(0.6, 0, 0.2, 1); }
.sel-option-link:hover .sol-roll span { transform: translateY(-1.4em); }
.sol-caret { flex-shrink: 0; transition: transform 0.32s cubic-bezier(0.6, 0, 0.2, 1); }
.sel-option-link:hover .sol-caret { transform: translateX(2px); }
/* ─── Sample Order Guide ───
Collapsible card with curated sample sources. Sits between summary and filters
in the Selections view. Uses / for native expand/collapse
without JS – the chevron rotates when open via :open selector. */
.sample-guide {
background: var(--white);
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-md);
margin-bottom: var(--sp-5);
overflow: hidden;
}
.sample-guide[open] {
border-color: var(--brown-light);
}
.sample-guide-summary {
display: flex;
align-items: center;
gap: var(--sp-4);
padding: var(--sp-4) var(--sp-5);
cursor: pointer;
list-style: none;
user-select: none;
background: var(--white);
transition: background 0.15s;
}
.sample-guide-summary::-webkit-details-marker { display: none; }
.sample-guide-summary:hover { background: var(--off-white-light); }
.sample-guide-summary-icon {
flex-shrink: 0;
width: 40px; height: 40px;
border-radius: 50%;
background: var(--off-white);
color: var(--brown);
display: flex; align-items: center; justify-content: center;
}
.sample-guide[open] .sample-guide-summary-icon {
background: var(--brown-light);
color: var(--white);
}
.sample-guide-summary-text { flex: 1; min-width: 0; }
.sample-guide-summary-title {
font-size: 15px;
font-weight: 700;
color: var(--dark);
margin-bottom: 3px;
}
.sample-guide-summary-desc {
font-size: 12.5px;
color: var(--gray);
line-height: 1.45;
}
.sample-guide-summary-meta {
display: flex;
align-items: center;
gap: var(--sp-3);
flex-shrink: 0;
}
.sample-guide-summary-count {
font-size: 11.5px;
font-weight: 700;
color: var(--brown);
background: var(--off-white);
padding: 4px 10px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.04em;
}
.sample-guide-summary-chevron {
color: var(--gray);
transition: transform 0.2s;
}
.sample-guide[open] .sample-guide-summary-chevron { transform: rotate(180deg); }
.sample-guide-body {
padding: 0 var(--sp-5) var(--sp-5);
border-top: 1px solid var(--off-white-dark);
}
/* Intro */
.sample-guide-intro {
padding: var(--sp-5) 0 var(--sp-4);
}
.sample-guide-intro p {
font-size: 13px;
color: var(--gray);
line-height: 1.5;
margin: 0 0 var(--sp-3);
max-width: 720px;
}
.sample-guide-intro p:last-child { margin-bottom: 0; }
.sample-guide-intro strong { color: var(--dark); font-weight: 700; }
.sample-guide-intro-note {
font-size: 12px !important;
font-style: italic;
color: var(--gray);
padding-top: var(--sp-3);
border-top: 1px dashed var(--off-white-dark);
}
.sample-guide-link {
color: var(--brown);
font-weight: 600;
text-decoration: underline;
}
.sample-guide-link:hover { color: var(--brown-dark); }
/* Sample categories */
.sample-cat {
padding: var(--sp-4) 0;
border-top: 1px solid var(--off-white-dark);
}
.sample-cat-header { margin-bottom: var(--sp-3); }
.sample-cat-name {
font-size: 14px;
font-weight: 700;
color: var(--dark);
margin-bottom: 4px;
}
.sample-cat-note {
font-size: 12.5px;
color: var(--gray);
line-height: 1.5;
max-width: 760px;
}
/* Source cards */
.sample-cat-sources {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--sp-3);
}
.sample-source {
display: block;
padding: var(--sp-4);
background: var(--off-white-light);
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-sm);
text-decoration: none;
color: inherit;
transition: all 0.15s;
cursor: pointer;
}
.sample-source:hover {
background: var(--white);
border-color: var(--brown-light);
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0,0,0,0.04);
}
.sample-source-info {
cursor: default;
background: var(--white);
border-style: dashed;
}
.sample-source-info:hover {
transform: none;
box-shadow: none;
background: var(--white);
border-color: var(--brown-light);
}
.sample-source-name {
font-size: 13.5px;
font-weight: 700;
color: var(--dark);
margin-bottom: 4px;
}
.sample-source-desc {
font-size: 12px;
color: var(--gray);
line-height: 1.45;
margin-bottom: var(--sp-2);
}
.sample-source-action {
font-size: 11.5px;
font-weight: 700;
color: var(--brown);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.sample-source-info .sample-source-action {
color: var(--gray);
font-style: italic;
text-transform: none;
letter-spacing: normal;
font-weight: 600;
}
/* ─── Purchase Design Plan Flow ───
Full-viewport overlay with two-step stepper. Step 1: agreement + signature.
Step 2: Stripe-style payment. Used by the pre-purchase CTA banner button. */
/* Full-page purchase flow. Layout strategy: the .purchase-flow root is a fixed
flex column with overflow:hidden, so the whole page never scrolls. Only the
active .pf-step-content scrolls internally. Topbar, stepper, and footer all
sit in the flex column with flex-shrink:0, anchoring them firmly without
relying on position:sticky (which is fragile when scroll containers nest). */
.purchase-flow {
position: fixed;
inset: 0;
background: var(--off-white-light);
z-index: 2000;
display: flex;
flex-direction: column;
overflow: hidden;
}
.purchase-flow.hidden { display: none; }
.pf-shell {
flex: 1;
display: flex;
flex-direction: column;
min-height: 0;
width: 100%;
position: relative; /* anchor for absolutely-positioned loading overlay */
}
/* Top bar – anchored at the top of the flex column. Three-column grid: back
button on left, brand + title centered, spacer on right for visual balance. */
.pf-topbar {
flex-shrink: 0;
display: grid;
grid-template-columns: 180px 1fr 180px;
align-items: center;
gap: var(--sp-4);
padding: var(--sp-5) var(--sp-7);
background: var(--white);
border-bottom: 1px solid var(--off-white-dark);
z-index: 50;
box-shadow: 0 1px 0 rgba(0,0,0,0.02);
}
.pf-topbar-center {
display: flex;
align-items: baseline;
justify-content: center;
gap: var(--sp-4);
min-width: 0;
}
.pf-topbar-brand {
font-size: 32px;
font-weight: 700;
letter-spacing: -0.03em;
color: var(--dark);
line-height: 1;
}
/* Brand shows the Enso Homes logo (replaces the former "enso" wordmark text). */
.pf-topbar-brand img { display: block; height: 34px; width: auto; }
.pf-topbar-title {
font-size: 18px;
font-weight: 600;
color: var(--gray);
border-left: 1px solid var(--off-white-dark);
padding-left: var(--sp-4);
line-height: 1.2;
}
.pf-topbar-spacer {
/* Empty 180px column on the right to balance the back button column on the left,
keeping the centered brand+title visually centered. */
}
.pf-back-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px 8px 10px;
background: transparent;
border: 1px solid var(--off-white-dark);
border-radius: 999px;
font-family: var(--font);
font-size: 13px;
font-weight: 600;
color: var(--dark);
cursor: pointer;
transition: all 0.15s;
width: fit-content;
}
.pf-back-btn:hover {
background: var(--off-white);
border-color: var(--gray-light);
}
/* Legacy close button – used only by the Add a Design Call flow header, which sits inside
the page content rather than the topbar. Kept for that surface; the main purchase flow
uses the back button above. */
.pf-close {
width: 36px; height: 36px;
border-radius: 50%;
border: none;
background: var(--off-white);
color: var(--gray);
cursor: pointer;
display: flex; align-items: center; justify-content: center;
transition: all 0.15s;
}
.pf-close:hover { background: var(--off-white-dark); color: var(--dark); }
/* Stepper – anchored under the topbar, flex-shrink:0 so it never collapses. */
.pf-stepper {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
gap: var(--sp-4);
padding: var(--sp-6) var(--sp-7);
background: var(--white);
border-bottom: 1px solid var(--off-white-dark);
}
.pf-step {
display: flex;
align-items: center;
gap: var(--sp-3);
opacity: 0.5;
transition: opacity 0.2s;
}
.pf-step-active { opacity: 1; }
/* Completed steps stay legible (not dimmed like upcoming ones) and invite a click
back to that step. */
.pf-step-complete { opacity: 1; }
.pf-step-clickable { cursor: pointer; }
.pf-step-clickable:hover .pf-step-num {
box-shadow: 0 0 0 4px var(--off-white-light), 0 0 0 6px var(--green);
}
.pf-step-clickable:hover .pf-step-label { color: var(--green-dark); }
.pf-step-num {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--off-white-dark);
color: var(--gray);
display: flex; align-items: center; justify-content: center;
font-weight: 700;
font-size: 13px;
transition: all 0.2s;
}
.pf-step-active .pf-step-num {
background: var(--brown);
color: var(--white);
box-shadow: 0 0 0 4px var(--off-white-light), 0 0 0 6px var(--brown-light);
}
/* Completed step: white checkmark in a green circle, matching the timeline node
completed checkmarks elsewhere in the portal. */
.pf-step-complete .pf-step-num {
background: var(--green);
color: var(--white);
}
.pf-step-complete .pf-step-num svg { display: block; }
.pf-step-label {
font-size: 14px;
font-weight: 600;
color: var(--dark);
}
.pf-step-line {
width: 200px;
height: 2px;
background: var(--off-white-dark);
position: relative;
border-radius: 2px;
overflow: hidden;
}
.pf-step-line-fill {
position: absolute;
inset: 0;
width: 0;
/* Green fill so the completed connector matches the green completed circles. */
background: var(--green);
transition: width 0.4s ease;
}
/* Step content */
/* Step content panels. Only the ACTIVE panel is rendered (display:flex); the
others are display:none. The whole panel scrolls as one region (.pf-step-body),
and the action buttons live inline at the END of the content (.pf-step-actions)
rather than in a sticky footer. This makes each step a normal scrolling page:
the left column is sticky so it stays in view, the right column drives the
scroll, and the Continue/Pay/Finish button sits naturally at the bottom. */
.pf-step-content {
display: none;
padding: 0;
flex-direction: column;
}
.pf-step-content-active {
display: flex;
flex: 1;
min-height: 0;
}
.pf-step-body {
flex: 1;
overflow-y: auto;
min-height: 0;
padding: var(--sp-7);
}
/* Inline action bar at the bottom of each step's content. Replaces the old
sticky .pf-footer. Sits at the end of the scroll region, centered to the
step's max content width, with a hairline divider above. */
.pf-step-actions {
max-width: 1280px;
margin: var(--sp-7) auto 0;
padding-top: var(--sp-5);
border-top: 1px solid var(--off-white-dark);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-5);
}
.pf-step-actions-meta {
font-size: 12px;
color: var(--gray);
flex: 1;
max-width: 600px;
line-height: 1.45;
}
.pf-step-actions-buttons {
display: flex;
gap: var(--sp-3);
flex-shrink: 0;
}
.pf-section-eyebrow {
font-size: 11px;
font-weight: 700;
color: var(--brown);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.pf-section-title {
font-size: 26px;
font-weight: 700;
letter-spacing: -0.01em;
margin: 4px 0 var(--sp-5);
color: var(--dark);
}
/* Two-column layout for Step 1. LEFT (plain-English summary) is the orientation
layer; RIGHT (agreement + signature) is the action layer with more content density. */
.pf-two-col {
display: grid;
grid-template-columns: 1fr 1.15fr;
gap: var(--sp-7);
max-width: 1280px;
margin: 0 auto;
}
/* Agreement column */
.pf-agreement-col { display: flex; flex-direction: column; }
.pf-agreement-scroll {
background: var(--white);
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-md);
padding: var(--sp-5) var(--sp-6);
max-height: 600px;
overflow-y: auto;
font-size: 13.5px;
line-height: 1.55;
color: var(--dark);
}
.pf-agreement-scroll p { margin: 0 0 var(--sp-3); }
.pf-agreement-scroll p:last-child { margin-bottom: 0; }
.pf-agreement-scroll strong { font-weight: 700; }
.pf-agreement-end {
text-align: center;
color: var(--gray);
font-style: italic;
font-size: 12px;
margin-top: var(--sp-4) !important;
}
/* Signature block – wraps signer roster, signature pads, and consent.
Single-signer pattern. Production may render a second .pf-signer-row + pad pair when project.additionalContacts.canCoSign is true; the JS is structured to support that. */
.pf-signature-block {
margin-top: var(--sp-5);
background: var(--white);
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-md);
padding: var(--sp-5);
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
/* Signer row – single signer for the design plan agreement.
Production-pattern note: if a project requires a co-signer (e.g., two listed owners),
the data layer can render a second .pf-signer-row + .pf-signature-pad pair. The current
single-row pattern is the default. */
.pf-signer-row {
display: flex;
align-items: center;
gap: var(--sp-3);
padding: var(--sp-3);
background: var(--off-white-light);
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-sm);
}
.pf-signer-num {
width: 28px; height: 28px;
border-radius: 50%;
background: var(--brown);
color: var(--white);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.pf-signer-info { flex: 1; min-width: 0; }
.pf-signer-name {
font-size: 14px;
font-weight: 700;
color: var(--dark);
}
.pf-signer-role {
font-size: 11.5px;
color: var(--gray);
margin-top: 1px;
}
/* Individual signature pad – one or two of these stack inside the block */
.pf-signature-pad {
display: flex;
flex-direction: column;
gap: var(--sp-2);
}
.pf-signature-pad-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-3);
}
.pf-signature-pad-label {
font-size: 12px;
font-weight: 700;
color: var(--gray);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.pf-signature-canvas-wrap {
position: relative;
background: var(--off-white-light);
border: 1.5px dashed var(--off-white-dark);
border-radius: var(--radius-sm);
height: 140px;
cursor: crosshair;
}
.pf-signature-canvas {
display: block;
width: 100%;
height: 100%;
border-radius: var(--radius-sm);
}
.pf-signature-empty {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
font-size: 13px;
color: var(--gray);
font-style: italic;
pointer-events: none;
transition: opacity 0.15s;
}
.pf-signature-empty.hidden { opacity: 0; }
.pf-signature-actions {
display: flex;
align-items: center;
justify-content: flex-end;
}
.pf-signature-clear {
font-size: 11.5px;
font-weight: 600;
color: var(--brown);
background: none;
border: none;
cursor: pointer;
padding: 4px 8px;
border-radius: 4px;
font-family: var(--font);
}
.pf-signature-clear:hover { background: var(--off-white); color: var(--brown-dark); }
/* Consent row – sits at the bottom of the signature block */
.pf-consent-row {
padding-top: var(--sp-3);
border-top: 1px solid var(--off-white-dark);
}
.pf-signature-consent {
display: flex;
align-items: flex-start;
gap: var(--sp-2);
font-size: 12.5px;
color: var(--gray);
cursor: pointer;
line-height: 1.4;
}
.pf-signature-consent input[type="checkbox"] {
flex-shrink: 0;
margin-top: 2px;
width: 16px;
height: 16px;
cursor: pointer;
accent-color: var(--brown);
}
/* Summary column */
/* Summary column – dark panel that mirrors the pre-purchase CTA banner aesthetic
(the user clicked through from that dark banner; this is the natural continuation).
Internal padding contains the white summary cards. */
/* Left orientation panel (Step 1). Sticky so it stays in view while the
agreement + signature column on the right scrolls. align-self:start keeps it
sized to its content rather than stretching to the grid row height, so it can
slide naturally as the page scrolls. */
.pf-summary-col {
display: flex;
flex-direction: column;
background: var(--dark);
border-radius: var(--radius-lg);
padding: var(--sp-6) var(--sp-6) var(--sp-5);
position: sticky;
top: 0;
align-self: start;
overflow: hidden;
}
/* Subtle radial brown glow in the corners – same trick as the CTA banner */
.pf-summary-col::before {
content: '';
position: absolute;
inset: 0;
background-image:
radial-gradient(circle at 90% 10%, rgba(149,103,76,0.22), transparent 45%),
radial-gradient(circle at 10% 95%, rgba(149,103,76,0.14), transparent 45%);
pointer-events: none;
}
.pf-summary-col > * { position: relative; z-index: 1; }
/* Override the section eyebrow + title colors for the dark panel context */
.pf-summary-col .pf-section-eyebrow { color: var(--brown-light); }
.pf-summary-col .pf-section-title { color: white; margin-bottom: var(--sp-4); }
.pf-summary-card {
display: flex;
gap: var(--sp-3);
background: var(--white);
border: 1px solid rgba(255,255,255,0.08);
border-radius: var(--radius-md);
padding: var(--sp-3) var(--sp-4);
margin-bottom: var(--sp-2);
box-shadow: 0 1px 0 rgba(0,0,0,0.05);
}
.pf-summary-card:last-child { margin-bottom: 0; }
.pf-summary-card-icon {
flex-shrink: 0;
width: 34px; height: 34px;
border-radius: 50%;
background: var(--off-white);
color: var(--brown);
display: flex; align-items: center; justify-content: center;
}
.pf-summary-card-icon svg { width: 17px; height: 17px; }
.pf-summary-card-title {
font-size: 13px;
font-weight: 700;
color: var(--dark);
margin-bottom: 2px;
line-height: 1.3;
}
.pf-summary-card-desc {
font-size: 11.5px;
color: var(--gray);
line-height: 1.45;
}
/* Footer (used in all steps) – sticky at the bottom of the scroll viewport */
.pf-footer {
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--sp-5);
padding: var(--sp-5) var(--sp-7);
background: var(--white);
border-top: 1px solid var(--off-white-dark);
z-index: 40;
box-shadow: 0 -1px 0 rgba(0,0,0,0.02);
}
.pf-footer-meta {
font-size: 12px;
color: var(--gray);
flex: 1;
max-width: 540px;
line-height: 1.45;
}
.pf-footer-actions {
display: flex;
gap: var(--sp-3);
flex-shrink: 0;
}
/* Step 2 – Payment */
.pf-payment-wrap {
max-width: 1180px;
margin: 0 auto;
}
.pf-payment-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-7);
align-items: start;
}
/* Left order-summary column on the Pay Deposit step. Sticky so it stays in view
while the payment form on the right scrolls. */
.pf-payment-summary {
position: sticky;
top: 0;
align-self: start;
}
.pf-order-card {
background: var(--white);
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-md);
padding: var(--sp-5) var(--sp-6);
}
.pf-order-row {
display: flex;
justify-content: space-between;
align-items: flex-start;
gap: var(--sp-4);
padding: var(--sp-3) 0;
}
.pf-order-row + .pf-order-row { border-top: 1px solid var(--off-white-dark); }
.pf-order-row-name {
font-size: 14.5px;
font-weight: 700;
color: var(--dark);
margin-bottom: 4px;
}
.pf-order-row-desc {
font-size: 12.5px;
color: var(--gray);
line-height: 1.45;
}
.pf-order-row-price {
font-size: 16px;
font-weight: 700;
color: var(--dark);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.pf-order-divider {
border-top: 2px solid var(--dark);
margin: var(--sp-3) 0 var(--sp-2);
}
.pf-order-total {
display: flex;
justify-content: space-between;
align-items: center;
padding: var(--sp-2) 0 var(--sp-3);
}
.pf-order-total-label {
font-size: 14px;
font-weight: 700;
color: var(--dark);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.pf-order-total-amount {
font-size: 28px;
font-weight: 700;
color: var(--brown);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
/* Fee explainer – two-line block below the order card explaining what credits
to construction and what doesn't. Two side-by-side rows, each with a small
icon (check for credit, info for pass-through). Cleaner than the previous
single dense paragraph. */
.pf-fee-explainer {
margin-top: var(--sp-4);
display: flex;
flex-direction: column;
gap: var(--sp-3);
}
.pf-fee-explainer-row {
display: flex;
gap: var(--sp-3);
align-items: flex-start;
padding: var(--sp-3) var(--sp-4);
background: var(--off-white-light);
border-radius: var(--radius-sm);
font-size: 12.5px;
color: var(--gray);
line-height: 1.5;
}
.pf-fee-explainer-icon {
flex-shrink: 0;
width: 20px; height: 20px;
border-radius: 50%;
display: flex; align-items: center; justify-content: center;
margin-top: 1px;
}
.pf-fee-explainer-icon-credit {
background: var(--green);
color: white;
}
.pf-fee-explainer-icon-pass {
background: var(--off-white-dark);
color: var(--gray);
}
.pf-fee-explainer-text strong { color: var(--dark); font-weight: 700; }
/* Billing address – sits inside the Stripe card body after the cardholder/email fields. */
.pf-billing-header {
font-size: 11px;
font-weight: 700;
color: var(--gray);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-top: var(--sp-3);
padding-top: var(--sp-4);
border-top: 1px dashed var(--off-white-dark);
}
.pf-input-row-billing {
grid-template-columns: 2fr 1fr 1fr;
}
/* Stripe-style payment card */
.pf-stripe-card {
background: var(--white);
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-md);
overflow: hidden;
}
.pf-stripe-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-3) var(--sp-5);
background: var(--off-white-light);
border-bottom: 1px solid var(--off-white-dark);
}
.pf-stripe-tabs {
display: flex;
gap: var(--sp-1);
}
.pf-stripe-tab {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 6px var(--sp-3);
border-radius: var(--radius-sm);
background: none;
border: none;
font-size: 13px;
font-weight: 600;
color: var(--gray);
cursor: pointer;
font-family: var(--font);
}
.pf-stripe-tab:hover { background: var(--off-white); color: var(--dark); }
.pf-stripe-tab-active {
background: var(--white);
color: var(--dark);
box-shadow: 0 1px 3px rgba(0,0,0,0.08);
}
.pf-stripe-secured {
display: flex;
align-items: center;
gap: 4px;
font-size: 11px;
color: var(--gray);
font-weight: 600;
}
.pf-stripe-body {
padding: var(--sp-5);
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.pf-input-label {
display: flex;
flex-direction: column;
gap: 6px;
font-size: 12.5px;
font-weight: 700;
color: var(--dark);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.pf-input-row {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: var(--sp-3);
}
.pf-input-wrap { position: relative; }
.pf-input {
width: 100%;
height: 42px;
padding: 0 var(--sp-3);
border: 1.5px solid var(--off-white-dark);
border-radius: var(--radius-sm);
font-size: 14px;
font-family: var(--font);
color: var(--dark);
background: var(--white);
letter-spacing: normal;
text-transform: none;
font-weight: 500;
transition: border-color 0.15s;
}
.pf-input:focus {
outline: none;
border-color: var(--brown);
}
.pf-input-icons {
position: absolute;
right: var(--sp-2);
top: 50%;
transform: translateY(-50%);
display: flex;
gap: 4px;
}
.pf-card-brand {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 9px;
font-weight: 800;
letter-spacing: 0.05em;
color: var(--gray);
background: var(--off-white);
padding: 3px 5px;
border-radius: 3px;
}
/* ─── STEP 3 – Schedule Calls ───
Cadence picker (with mini-calendar visualizers) + inline 3-day scheduler for the first call. */
.pf-schedule-wrap {
max-width: 920px;
margin: 0 auto;
}
.pf-schedule-intro {
text-align: center;
margin-bottom: var(--sp-7);
}
.pf-section-lede {
font-size: 14.5px;
color: var(--gray);
line-height: 1.55;
margin: var(--sp-3) auto 0;
max-width: 580px;
}
.pf-section-note {
font-size: 12.5px;
color: var(--brown);
font-weight: 600;
margin: 6px auto 0;
max-width: 580px;
}
/* Cadence picker – two side-by-side radio cards */
.pf-cadence-picker {
display: grid;
grid-template-columns: 1fr 1fr;
gap: var(--sp-4);
margin-bottom: var(--sp-6);
}
.pf-cadence-option {
display: flex;
gap: var(--sp-3);
padding: var(--sp-5);
background: var(--white);
border: 1.5px solid var(--off-white-dark);
border-radius: var(--radius-md);
cursor: pointer;
transition: all 0.15s;
}
.pf-cadence-option:hover { border-color: var(--brown-light); }
.pf-cadence-option-selected {
border-color: var(--brown);
box-shadow: 0 0 0 3px var(--off-white);
}
.pf-cadence-option input[type="radio"] {
flex-shrink: 0;
width: 18px;
height: 18px;
cursor: pointer;
accent-color: var(--brown);
margin-top: 2px;
}
.pf-cadence-option-body { flex: 1; min-width: 0; }
.pf-cadence-option-header {
margin-bottom: var(--sp-2);
}
.pf-cadence-option-title {
font-size: 16px;
font-weight: 700;
color: var(--dark);
}
.pf-cadence-option-tagline {
font-size: 12px;
color: var(--brown);
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.04em;
margin-top: 2px;
}
.pf-cadence-option-desc {
font-size: 12.5px;
color: var(--gray);
line-height: 1.5;
margin-bottom: var(--sp-4);
}
/* Mini-calendar visualizer inside each cadence card.
Horizontal strip of 5 call markers connected by lines, with date labels below.
The two cadences look visually similar in structure; the date labels carry the
rhythm difference (Standard: 7 days apart, Accelerated: 3-4 days apart). */
.cadence-mini-cal {
display: flex;
align-items: center;
padding: var(--sp-3) 0;
margin-bottom: var(--sp-3);
border-top: 1px dashed var(--off-white-dark);
border-bottom: 1px dashed var(--off-white-dark);
}
.cmc-call {
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
flex-shrink: 0;
}
.cmc-dot {
width: 12px;
height: 12px;
border-radius: 50%;
background: var(--brown);
border: 2px solid var(--white);
box-shadow: 0 0 0 1.5px var(--brown);
}
.cmc-dot-final {
/* The contract-signing call gets a different visual to indicate its terminal role */
background: var(--dark);
box-shadow: 0 0 0 1.5px var(--dark);
}
.cmc-call-label {
font-size: 9.5px;
font-weight: 700;
color: var(--gray);
text-transform: uppercase;
letter-spacing: 0.04em;
margin-top: 4px;
}
.cmc-call-date {
font-size: 11px;
font-weight: 600;
color: var(--dark);
font-variant-numeric: tabular-nums;
}
.cmc-line {
flex: 1;
height: 1.5px;
background: var(--off-white-dark);
margin: 0 -1px;
/* Push the line up so it visually connects through the center of the dots */
align-self: flex-start;
margin-top: 8px;
}
/* Per-card design-phase duration meta. Sits at the bottom of each cadence card so
the client sees how long each option's design phase runs without having to
select a cadence. Brown clock icon + short line. */
.pf-cadence-option-meta {
display: flex;
align-items: center;
gap: 7px;
margin-top: var(--sp-3);
padding-top: var(--sp-3);
border-top: 1px solid var(--off-white-dark);
font-size: 12px;
color: var(--gray);
}
.pf-cadence-option-meta svg { flex-shrink: 0; color: var(--brown); }
.pf-cadence-option-meta strong { color: var(--dark); font-weight: 700; }
/* ─── All-calls scheduler (four call blocks) ─── */
.pf-allcalls-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--sp-5);
margin-bottom: var(--sp-5);
}
.pf-allcalls-header .pf-section-title { margin-bottom: 6px; }
.pf-allcalls-header .pf-section-lede {
font-size: 13.5px;
color: var(--gray);
line-height: 1.5;
max-width: 560px;
margin: 0;
}
.pf-callblocks {
display: flex;
flex-direction: column;
gap: var(--sp-4);
}
.pf-callblock {
background: var(--white);
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-md);
padding: var(--sp-5) var(--sp-6);
transition: border-color 0.15s, box-shadow 0.15s;
}
/* A call with a chosen time gets a quiet green confirmation treatment. */
.pf-callblock-set {
border-color: rgba(45, 122, 79, 0.4);
box-shadow: 0 0 0 2px rgba(45, 122, 79, 0.06);
}
.pf-callblock-head {
display: flex;
align-items: center;
gap: var(--sp-3);
padding-bottom: var(--sp-4);
margin-bottom: var(--sp-4);
border-bottom: 1px solid var(--off-white-dark);
}
.pf-callblock-num {
flex-shrink: 0;
width: 30px; height: 30px;
border-radius: 50%;
background: var(--brown);
color: white;
display: flex; align-items: center; justify-content: center;
font-size: 14px;
font-weight: 700;
}
.pf-callblock-set .pf-callblock-num { background: var(--green); }
.pf-callblock-headtext { flex: 1; min-width: 0; }
.pf-callblock-title {
font-size: 15px;
font-weight: 700;
color: var(--dark);
}
.pf-callblock-status {
font-size: 12.5px;
color: var(--gray);
margin-top: 1px;
}
.pf-callblock-set .pf-callblock-status {
color: var(--green-dark);
font-weight: 600;
}
.pf-callblock-check {
flex-shrink: 0;
width: 26px; height: 26px;
border-radius: 50%;
background: var(--green);
color: white;
display: flex; align-items: center; justify-content: center;
}
/* In the call blocks the day picker + time picker sit closer together than in
the old single-call layout. Tighten the day picker's bottom margin. */
.pf-callblock .pf-day-picker { margin-bottom: var(--sp-4); }
/* ─── Inline scheduler for the first call ─── */
.pf-firstcall {
background: var(--white);
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-md);
padding: var(--sp-5) var(--sp-6);
margin-bottom: var(--sp-4);
}
.pf-firstcall-header {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--sp-4);
padding-bottom: var(--sp-4);
border-bottom: 1px solid var(--off-white-dark);
margin-bottom: var(--sp-4);
}
.pf-firstcall-eyebrow {
font-size: 10.5px;
font-weight: 700;
color: var(--brown);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.pf-firstcall-title {
font-size: 16px;
font-weight: 700;
color: var(--dark);
margin-top: 4px;
}
.pf-firstcall-designer {
display: flex;
align-items: center;
gap: var(--sp-3);
flex-shrink: 0;
}
.pf-firstcall-designer-avatar {
width: 36px; height: 36px;
border-radius: 50%;
background: var(--brown);
color: white;
display: flex; align-items: center; justify-content: center;
font-size: 12px;
font-weight: 700;
letter-spacing: 0.04em;
}
.pf-firstcall-designer-name {
font-size: 13px;
font-weight: 700;
color: var(--dark);
}
.pf-firstcall-designer-role {
font-size: 11px;
color: var(--gray);
}
/* Two-person team block (design lead + pre-con manager) in the schedule header. */
.pf-allcalls-team {
display: flex;
flex-direction: column;
gap: var(--sp-3);
flex-shrink: 0;
}
.pf-avatar-precon { background: var(--slate); }
/* Day picker – 3 day cards in a row, suggested middle one pre-selected */
.pf-day-picker {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
gap: var(--sp-3);
margin-bottom: var(--sp-5);
}
.pf-day-card {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding: var(--sp-4) var(--sp-3);
background: var(--off-white-light);
border: 1.5px solid var(--off-white-dark);
border-radius: var(--radius-md);
cursor: pointer;
font-family: var(--font);
transition: all 0.15s;
}
.pf-day-card:hover { border-color: var(--brown-light); }
.pf-day-card-selected {
border-color: var(--brown);
background: var(--white);
box-shadow: 0 0 0 3px var(--off-white);
}
.pf-day-card-name {
font-size: 11px;
font-weight: 700;
color: var(--gray);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.pf-day-card-date {
font-size: 22px;
font-weight: 700;
color: var(--dark);
font-variant-numeric: tabular-nums;
letter-spacing: -0.01em;
}
.pf-day-card-tag {
position: absolute;
top: -8px;
left: 50%;
transform: translateX(-50%);
font-size: 9.5px;
font-weight: 700;
color: white;
background: var(--brown);
padding: 2px 8px;
border-radius: 999px;
text-transform: uppercase;
letter-spacing: 0.05em;
white-space: nowrap;
}
/* Time picker */
.pf-time-picker-label {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: var(--sp-3);
font-size: 12px;
font-weight: 700;
color: var(--gray);
text-transform: uppercase;
letter-spacing: 0.06em;
margin-bottom: var(--sp-3);
}
.pf-time-picker-day {
color: var(--dark);
text-transform: none;
letter-spacing: 0;
font-weight: 700;
margin-left: 4px;
}
/* Time zone, relocated out of the designer block to the right of the day label. */
.pf-time-picker-tz {
color: var(--gray);
text-transform: none;
letter-spacing: 0;
font-weight: 600;
font-size: 11px;
flex-shrink: 0;
}
/* Time-slot carousel: a fixed window showing 6 slots, with a sliding track behind
it and prev/next arrows that advance by 3. The track is wider than the window
(one column per slot) and shifts via translateX. */
.pf-time-carousel {
display: flex;
align-items: center;
gap: var(--sp-2);
}
.pf-time-arrow {
flex-shrink: 0;
width: 28px; height: 36px;
border: 1.5px solid var(--off-white-dark);
background: var(--white);
border-radius: var(--radius-sm);
color: var(--brown);
display: flex; align-items: center; justify-content: center;
cursor: pointer;
transition: all 0.15s;
}
.pf-time-arrow:hover:not(:disabled) { border-color: var(--brown-light); background: var(--off-white-light); }
.pf-time-arrow:disabled { opacity: 0.3; cursor: default; }
.pf-time-slots-window {
flex: 1;
display: flex;
gap: var(--sp-2);
overflow-x: hidden;
scroll-behavior: smooth;
}
.pf-time-slot {
/* Six slots fill the window; the rest overflow and are revealed by scrolling. */
flex: 0 0 calc((100% - 5 * var(--sp-2)) / 6);
padding: 10px var(--sp-2);
background: var(--white);
border: 1.5px solid var(--off-white-dark);
border-radius: var(--radius-sm);
font-family: var(--font);
font-size: 13px;
font-weight: 600;
color: var(--dark);
cursor: pointer;
transition: border-color 0.15s, background 0.15s, color 0.15s;
font-variant-numeric: tabular-nums;
white-space: nowrap;
text-align: center;
}
.pf-time-slot:hover { border-color: var(--brown-light); background: var(--off-white-light); }
.pf-time-slot-selected {
background: var(--brown);
border-color: var(--brown);
color: white;
}
/* Confirmation state – replaces the time picker once a slot is selected */
.pf-firstcall-confirmation {
display: flex;
align-items: center;
gap: var(--sp-4);
padding: var(--sp-4) var(--sp-5);
background: rgba(76, 174, 80, 0.06);
border: 1px solid rgba(76, 174, 80, 0.25);
border-radius: var(--radius-md);
}
.pf-firstcall-confirmation.hidden { display: none; }
.pf-firstcall-confirmation-icon {
flex-shrink: 0;
width: 36px; height: 36px;
border-radius: 50%;
background: var(--green);
color: white;
display: flex;
align-items: center;
justify-content: center;
}
.pf-firstcall-confirmation-text { flex: 1; }
.pf-firstcall-confirmation-title {
font-size: 14.5px;
font-weight: 700;
color: var(--green-dark);
margin-bottom: 2px;
}
.pf-firstcall-confirmation-desc {
font-size: 12.5px;
color: var(--gray);
line-height: 1.4;
}
/* ─── Add a Design Call page (.ac-* classes) ───
Mid-project add-on purchase flow. Mirrors the main Purchase Design Plan flow's
chrome (uses .purchase-flow / .pf-shell / .pf-topbar / .pf-stepper / .pf-footer
classes directly). The .ac-* classes here cover Add-a-Call-specific content:
the "What's included" list and the payment-authorization consent checkbox. */
/* "What's included" list – used in Add a Call Step 1's left summary column,
beneath the order card + fee explainer. Lives in its own wrapper so the
eyebrow gets a bit of breathing room above the bulleted list. */
.ac-included-list-wrap {
margin-top: var(--sp-5);
}
.ac-included-eyebrow {
margin-bottom: var(--sp-3);
}
.ac-included-list {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
gap: 6px;
}
.ac-included-list li {
position: relative;
padding-left: 20px;
font-size: 13px;
color: var(--dark);
line-height: 1.5;
}
.ac-included-list li::before {
content: '';
position: absolute;
left: 4px;
top: 7px;
width: 6px; height: 6px;
background: var(--brown);
border-radius: 50%;
}
/* Payment-authorization disclaimer – plain text below the billing fields.
No checkbox: submitting payment implicitly authorizes the charge (same
pattern as Stripe Checkout). Quieter visual weight than the form inputs,
subtle off-white background so it reads as supplementary copy. */
.pf-payment-disclaimer {
margin-top: var(--sp-4);
padding: var(--sp-3) var(--sp-4);
background: var(--off-white-light);
border-left: 2px solid var(--off-white-dark);
border-radius: var(--radius-sm);
font-size: 12px;
color: var(--gray);
line-height: 1.5;
}
/* Primary CTA button – used in the footer on both purchase flows. A bigger,
more prominent version of .btn-primary so the call to action stands out
alongside the smaller secondary buttons. Applied to "Pay $X", "Finish &
Schedule", and any other commit-the-transaction primary actions. */
.pf-btn-cta {
padding: 14px 28px;
font-size: 15px;
font-weight: 700;
letter-spacing: 0.01em;
min-width: 180px;
border-radius: var(--radius-md);
}
/* Loading overlay – covers the flow shell while a simulated payment or
scheduling API call completes. Positioned absolute over .pf-shell so it
covers topbar + content + footer. Production replaces the setTimeout
call with the real Stripe / Cal.com promise resolution. */
.pf-loading-overlay {
position: absolute;
inset: 0;
background: rgba(255, 255, 255, 0.96);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: var(--sp-4);
z-index: 100;
animation: pf-loading-fade-in 0.15s ease-out;
}
.pf-loading-overlay.hidden { display: none; }
@keyframes pf-loading-fade-in {
from { opacity: 0; }
to { opacity: 1; }
}
.pf-loading-spinner {
width: 48px;
height: 48px;
border: 3px solid var(--off-white-dark);
border-top-color: var(--brown);
border-radius: 50%;
animation: pf-loading-spin 0.85s linear infinite;
}
@keyframes pf-loading-spin {
to { transform: rotate(360deg); }
}
.pf-loading-text {
font-size: 15px;
font-weight: 700;
color: var(--dark);
}
.pf-loading-subtext {
font-size: 12.5px;
color: var(--gray);
margin-top: -8px;
}
/* Responsive – collapse to single column under 900px */
@media (max-width: 900px) {
.pf-two-col, .pf-payment-grid, .pf-cadence-picker { grid-template-columns: 1fr; }
.pf-step-line { width: 80px; }
.pf-schedule-first { flex-direction: column; align-items: stretch; }
.pf-day-picker { grid-template-columns: 1fr; }
.pf-time-slots { grid-template-columns: repeat(3, 1fr); }
.pf-firstcall-header { flex-direction: column; align-items: flex-start; }
}
.modal-overlay {
position: fixed; inset: 0;
background: rgba(0,0,0,0.5);
backdrop-filter: blur(2px);
display: flex; align-items: center; justify-content: center;
padding: var(--sp-4);
z-index: 1000;
}
.modal-overlay.hidden { display: none; }
.modal { background: var(--white); border-radius: var(--radius-xl); width: 100%; max-width: 480px; max-height: 90vh; overflow-y: auto; box-shadow: var(--shadow-lg); }
.modal-header { padding: var(--sp-6) var(--sp-6) var(--sp-4); display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-4); }
.modal-title { font-size: 20px; font-weight: 700; line-height: 1.2; }
.modal-desc { font-size: 13.5px; color: var(--gray); margin-top: 4px; line-height: 1.4; }
.modal-close { background: none; border: none; width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--gray); flex-shrink: 0; }
.modal-close:hover { background: var(--off-white); color: var(--dark); }
.modal-body { padding: 0 var(--sp-6) var(--sp-6); }
.modal-footer { padding: var(--sp-5) var(--sp-6); border-top: 1px solid var(--off-white-dark); display: flex; justify-content: flex-end; gap: var(--sp-3); }
.price-callout { background: var(--off-white-light); border: 1px solid var(--off-white-dark); border-radius: var(--radius-lg); padding: var(--sp-4); margin-bottom: var(--sp-4); }
.price-callout-label { font-size: 11px; font-weight: 700; color: var(--gray); text-transform: uppercase; letter-spacing: 0.06em; }
.price-callout-amount { font-size: 32px; font-weight: 700; color: var(--brown); font-variant-numeric: tabular-nums; margin: 2px 0; }
.price-callout-desc { font-size: 12.5px; color: var(--gray); line-height: 1.4; }
.price-callout-note {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: var(--sp-3);
padding-top: var(--sp-3);
border-top: 1px solid var(--off-white-dark);
font-size: 12.5px;
color: var(--brown-dark);
font-weight: 500;
line-height: 1.45;
}
.price-callout-note::before {
content: '↻';
flex-shrink: 0;
font-size: 14px;
color: var(--brown);
font-weight: 700;
margin-top: -1px;
}
/* ─── Ribbon: Need to reschedule? inline link ───
Sits inline with the next-call date as a quiet, italic-hyperlink-style affordance.
Deliberately understated so clients don't get nudged toward rescheduling – it's there
as an escape valve for legitimate conflicts, not a primary action. Hidden in pre-purchase
state via body.pre-purchase, since no calls are scheduled yet. */
.ribbon-reschedule-link {
display: inline;
margin-left: 10px;
font-size: 12px;
font-style: italic;
font-weight: 500;
color: var(--gray);
text-decoration: none;
border-bottom: 1px solid rgba(0,0,0,0.15);
padding-bottom: 1px;
transition: color 0.15s, border-color 0.15s;
}
.ribbon-reschedule-link:hover {
color: var(--brown);
border-bottom-color: var(--brown);
}
body.pre-purchase .ribbon-reschedule-link { display: none; }
/* ─── Wire Instructions Dialog ─── */
.modal.modal-wide { max-width: 560px; }
.wire-amount-callout {
background: linear-gradient(135deg, var(--off-white) 0%, var(--off-white-light) 100%);
border: 1.5px solid var(--brown-light);
border-radius: var(--radius-lg);
padding: var(--sp-4) var(--sp-5);
margin-bottom: var(--sp-4);
text-align: center;
}
.wire-amount-label {
font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.06em;
color: var(--brown-dark);
}
.wire-amount-value {
font-size: 32px; font-weight: 700; color: var(--brown-dark);
font-variant-numeric: tabular-nums;
margin: 4px 0 2px;
}
.wire-amount-note { font-size: 12px; color: var(--gray); }
.wire-details {
display: flex; flex-direction: column;
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-lg);
overflow: hidden;
margin-bottom: var(--sp-4);
}
.wire-detail-row {
display: grid;
grid-template-columns: 160px 1fr;
align-items: center;
gap: var(--sp-3);
padding: 10px var(--sp-4);
border-bottom: 1px solid var(--off-white-dark);
background: var(--white);
}
.wire-detail-row:last-child { border-bottom: none; }
.wire-detail-label {
font-size: 11px; font-weight: 700; color: var(--gray);
text-transform: uppercase; letter-spacing: 0.05em;
}
.wire-detail-value { font-size: 14px; color: var(--dark); font-weight: 600; }
.wire-detail-mono {
font-family: 'SF Mono', 'Monaco', 'Inconsolata', 'Roboto Mono', 'Courier New', monospace;
font-size: 13.5px;
letter-spacing: 0.04em;
user-select: all;
}
.wire-note {
display: flex; align-items: flex-start; gap: 8px;
font-size: 12px; color: var(--gray); line-height: 1.45;
background: var(--off-white-light);
border-radius: var(--radius-md);
padding: 10px var(--sp-3);
}
.wire-note svg { flex-shrink: 0; margin-top: 2px; color: var(--brown); }
/* ─── Context Panel ─── */
/* Slide-in right rail. Fixed position so it overlays the main content without
shifting layout. translateX off-screen by default; .open class slides it in. */
.ctx-backdrop {
position: fixed;
inset: 0;
background: rgba(30, 30, 30, 0.32);
z-index: 950;
opacity: 0;
transition: opacity 0.22s ease;
pointer-events: none;
}
.ctx-backdrop:not(.hidden) {
opacity: 1;
pointer-events: auto;
}
.ctx-panel {
position: fixed;
top: 0; right: 0;
width: 480px;
height: 100vh;
background: var(--white);
box-shadow: -16px 0 40px rgba(0,0,0,0.12);
display: flex;
flex-direction: column;
transform: translateX(100%);
transition: transform 0.28s cubic-bezier(0.32, 0.72, 0.36, 1);
z-index: 960;
font-family: var(--font);
}
.ctx-panel.open {
transform: translateX(0);
}
.ctx-panel-header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--sp-5) var(--sp-6);
border-bottom: 1px solid var(--off-white-dark);
flex-shrink: 0;
}
.ctx-panel-title {
font-size: 17px;
font-weight: 700;
color: var(--dark);
letter-spacing: -0.01em;
margin: 0;
font-family: var(--font);
line-height: 1.3;
padding-right: var(--sp-4);
}
.ctx-panel-title-edit { cursor: text; border-radius: 6px; padding: 2px 7px; margin: -2px 5px -2px -7px; outline: none; }
.ctx-panel-title-edit:focus { background: rgba(119, 133, 139, 0.10); box-shadow: inset 0 0 0 1px var(--slate); }
.ctx-panel-close {
background: none;
border: none;
color: var(--gray);
cursor: pointer;
width: 32px; height: 32px;
border-radius: var(--radius-sm);
display: flex;
align-items: center;
justify-content: center;
transition: background 0.12s, color 0.12s;
flex-shrink: 0;
}
.ctx-panel-close:hover {
background: var(--off-white);
color: var(--dark);
}
.ctx-panel-body {
flex: 1;
overflow-y: auto;
padding: var(--sp-5) var(--sp-6) var(--sp-7);
}
/* Body content rendering – read-only rich text. Production may extend with more
block types (quotes, callouts, etc.); these cover the v1 set. */
.ctx-panel-body h3 {
font-size: 14px;
font-weight: 700;
color: var(--dark);
margin: var(--sp-5) 0 var(--sp-2);
letter-spacing: -0.005em;
font-family: var(--font);
}
.ctx-panel-body h3:first-child { margin-top: 0; }
.ctx-panel-body p {
font-size: 13.5px;
line-height: 1.6;
color: var(--dark);
margin: 0 0 var(--sp-3);
}
.ctx-panel-body ul {
font-size: 13.5px;
line-height: 1.6;
color: var(--dark);
padding-left: var(--sp-5);
margin: 0 0 var(--sp-3);
}
.ctx-panel-body ul li { margin-bottom: 4px; }
.ctx-panel-body ul li::marker { color: var(--brown); }
/* Inline image block – image + caption. Image fills available width; caption sits
below. Production replaces .ctx-img-placeholder with tags using
admin-uploaded photos. */
.ctx-img-block {
margin: var(--sp-4) 0;
border-radius: var(--radius-md);
overflow: hidden;
border: 1px solid var(--off-white-dark);
}
.ctx-img-placeholder {
aspect-ratio: 16 / 10;
background: linear-gradient(135deg, #F4F0E9, #E8DDD0);
display: flex;
align-items: center;
justify-content: center;
position: relative;
}
.ctx-img-placeholder svg { color: var(--brown); opacity: 0.7; }
.ctx-img-caption {
font-size: 11.5px;
color: var(--gray);
padding: 10px var(--sp-4);
background: var(--off-white-light);
border-top: 1px solid var(--off-white-dark);
line-height: 1.4;
}
/* Mobile takeover – full-width panel below 600px, no backdrop offset since the
panel covers the entire viewport. */
@media (max-width: 600px) {
.ctx-panel {
width: 100%;
box-shadow: none;
}
.ctx-backdrop {
/* Backdrop still present for tap-to-close, even though panel covers full screen */
display: none;
}
}
/* ─── Website Preview mode ─── */
/* Public, no-login preview of the portal for the marketing site. Shows a populated
example project with all pages unlocked, but disables anything transactional or
account-bound: adding feedback, rescheduling, Add a Design Call, downloads, and the
admin view. In production this mode is forced on and the demo panel is removed. */
/* Grayed and non-functional in preview: the feature stays visible so prospects see
it exists, but it can't be used. Add a Design Call stays fully clickable (only the
final payment is blocked); comments stay openable (only the composer is disabled). */
body.preview-mode .ribbon-reschedule-link,
body.preview-mode .fd-contract-preview,
body.preview-mode .btn-download,
body.preview-mode .comment-composer,
body.preview-mode .doc-row,
body.preview-mode .sb-user-menu-item,
body.preview-mode .pf-pay-final {
opacity: 0.5 !important;
pointer-events: none !important;
cursor: default !important;
}
.pf-pay-note { display: none; font-size: 12px; color: var(--gray); }
body.preview-mode .pf-pay-note { display: block; }
.pf-pay-col { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
body.preview-mode .cta-banner { display: none !important; } /* purchase CTA is never shown (mid-project anyway) */
/* Persistent example-preview indicator + conversion CTA. Fixed, so it never disturbs
the portal layout. Hidden unless preview mode is on. */
.preview-cta {
display: none;
position: fixed;
bottom: 20px; left: 50%; transform: translateX(-50%);
align-items: center;
background: var(--dark); color: var(--white);
padding: 10px 18px;
border-radius: var(--radius-full);
box-shadow: var(--shadow-lg);
z-index: 9998; font-size: 13px;
}
body.preview-mode .preview-cta { display: flex; }
.preview-cta-label { display: flex; align-items: center; gap: 8px; color: rgba(255,255,255,0.9); }
.preview-cta-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--brown-light); flex-shrink: 0; }
.demo-row-preview .demo-row-label { color: var(--brown-light); }
/* ─── Demo Controls ─── */
.demo-controls {
position: fixed;
bottom: 16px; right: 16px;
background: var(--dark); color: var(--white);
padding: var(--sp-4);
border-radius: var(--radius-lg);
font-size: 11.5px;
z-index: 9999;
width: 280px;
box-shadow: var(--shadow-lg);
}
.demo-controls.collapsed { width: auto; padding: 10px var(--sp-3); }
.demo-controls.collapsed > *:not(.demo-header) { display: none; }
.demo-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.demo-title { font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; font-weight: 700; color: rgba(255,255,255,0.5); }
.demo-toggle-btn { background: none; border: none; color: rgba(255,255,255,0.6); cursor: pointer; padding: 0; }
.demo-row { margin-bottom: 10px; }
.demo-row:last-child { margin-bottom: 0; }
.demo-row-label { font-size: 10px; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.05em; margin-bottom: 4px; font-weight: 700; }
.demo-options { display: flex; gap: 3px; flex-wrap: wrap; }
.demo-opt {
background: rgba(255,255,255,0.08);
border: 1px solid transparent;
color: rgba(255,255,255,0.7);
padding: 4px 8px;
border-radius: 4px;
font-size: 11px;
cursor: pointer;
font-family: var(--font);
}
.demo-opt:hover { background: rgba(255,255,255,0.15); color: white; }
.demo-opt.active { background: var(--brown); color: white; border-color: var(--brown); }
/* ─── Helpers ─── */
.hidden { display: none !important; }
.text-gray { color: var(--gray); }
body.role-admin .admin-only-inline { display: inline-flex; }
body:not(.role-admin) .admin-only-inline { display: none !important; }
body.role-admin .admin-only { display: flex; }
body:not(.role-admin) .admin-only { display: none !important; }
/* ─── Admin-only Miro editing ───
A small dashed "Edit" button sits to the left of "Open in Miro". Clicking it opens
a dialog with a drag-and-drop / browse image upload and the board URL field.
Hidden entirely for clients. */
.miro-edit-btn {
display: inline-flex; align-items: center; justify-content: center;
gap: 6px;
padding: 6px 16px;
margin-left: auto;
border: 2px dashed var(--off-white-dark);
border-radius: 10px;
background: var(--white);
color: var(--gray);
font-size: 12.5px; font-weight: 700; font-family: var(--font);
cursor: pointer;
transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.miro-edit-btn:hover { border-color: var(--slate); color: var(--slate); background: rgba(119,133,139,0.06); }
/* Uploaded image fills the preview (replacing the mock frames). */
.miro-preview-image.has-upload { display: block; padding: 0; gap: 0; }
.miro-preview-image.has-upload img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* Edit dialog */
.miro-modal-overlay {
position: fixed; inset: 0; z-index: 1000;
background: rgba(30, 30, 30, 0.45);
display: none; align-items: center; justify-content: center;
padding: var(--sp-4);
}
.miro-modal-overlay.open { display: flex; }
.miro-modal {
background: var(--white);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
width: 100%; max-width: 480px;
overflow: hidden;
}
.miro-modal-header {
display: flex; align-items: center; justify-content: space-between;
padding: var(--sp-4) var(--sp-5);
border-bottom: 1px solid var(--off-white-dark);
}
.miro-modal-header h3 { font-size: 16px; font-weight: 700; color: var(--dark); margin: 0; }
.miro-modal-eyebrow { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--slate); margin-bottom: 2px; }
.miro-modal-close {
border: none; background: transparent; cursor: pointer; color: var(--gray);
width: 36px; height: 36px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
}
.miro-modal-close:hover { background: var(--off-white); color: var(--dark); }
.miro-modal-body { padding: var(--sp-5); }
.miro-modal-label { display: block; font-size: 12px; font-weight: 700; color: var(--dark); margin-bottom: 6px; }
.miro-modal-url {
width: 100%; box-sizing: border-box;
padding: 9px 11px;
border: 1px solid var(--off-white-dark);
border-radius: var(--radius-sm);
font-size: 13px; font-family: var(--font); color: var(--dark);
margin-bottom: var(--sp-4);
}
.miro-modal-url:focus { outline: none; border-color: var(--slate); }
.miro-dropzone {
border: 2px dashed var(--off-white-dark);
border-radius: var(--radius-md);
padding: var(--sp-5);
text-align: center;
cursor: pointer;
color: var(--gray);
font-size: 13px;
transition: border-color 0.15s, background 0.15s;
}
.miro-dropzone:hover, .miro-dropzone.dragover { border-color: var(--slate); background: rgba(119,133,139,0.06); }
.miro-dropzone svg { color: var(--slate); margin-bottom: 8px; }
.miro-dropzone strong { color: var(--slate); font-weight: 700; }
.miro-drop-preview { margin-top: var(--sp-3); display: none; }
.miro-drop-preview.show { display: block; }
.miro-drop-preview img { max-width: 100%; max-height: 150px; border-radius: var(--radius-sm); border: 1px solid var(--off-white-dark); }
.miro-drop-filename { font-size: 11.5px; color: var(--gray); margin-top: 6px; }
.miro-modal-footer {
display: flex; justify-content: flex-end; gap: var(--sp-2);
padding: var(--sp-4) var(--sp-5);
border-top: 1px solid var(--off-white-dark);
background: var(--off-white-light);
}
.miro-modal-btn {
padding: 8px 16px; border-radius: var(--radius-md);
font-size: 13px; font-weight: 600; font-family: var(--font); cursor: pointer;
border: 1px solid var(--off-white-dark); background: var(--white); color: var(--dark);
transition: all 0.15s;
}
.miro-modal-btn:hover { background: var(--off-white); }
.miro-modal-btn.primary { background: var(--brown); border-color: var(--brown); color: var(--white); }
.miro-modal-btn.primary:hover { background: var(--brown-dark); }
/* Admin upload dialogs (As-Is Photos, Documents) reuse the Miro modal chrome.
The queue lists each chosen file; photo rows add a free-text label input. */
.upload-queue { margin-top: var(--sp-3); display: flex; flex-direction: column; gap: var(--sp-2); max-height: 280px; overflow-y: auto; }
.upload-queue:empty { display: none; }
.upload-queue-row {
display: flex; align-items: flex-start; gap: var(--sp-3);
padding: 8px; border: 1px solid var(--off-white-dark); border-radius: var(--radius-sm); background: var(--off-white-light);
}
.upload-queue-thumb { width: 46px; height: 46px; flex-shrink: 0; border-radius: var(--radius-sm); object-fit: cover; background: var(--off-white-dark); }
.upload-queue-fileicon {
width: 46px; height: 46px; flex-shrink: 0; border-radius: var(--radius-sm);
display: flex; align-items: center; justify-content: center; background: var(--off-white-dark); color: var(--slate);
}
.upload-queue-body { flex: 1; min-width: 0; }
.upload-queue-name { font-size: 12.5px; font-weight: 600; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.upload-queue-meta { font-size: 11px; color: var(--gray); margin-top: 2px; }
.upload-queue-label-input {
width: 100%; box-sizing: border-box; margin-top: 5px;
padding: 6px 9px; border: 1px solid var(--off-white-dark); border-radius: var(--radius-sm);
font-size: 12.5px; font-family: var(--font); color: var(--dark);
}
.upload-queue-label-input:focus { outline: none; border-color: var(--slate); }
.upload-queue-remove {
flex-shrink: 0; border: none; background: transparent; cursor: pointer; color: var(--gray);
width: 28px; height: 28px; border-radius: var(--radius-sm); display: flex; align-items: center; justify-content: center;
}
.upload-queue-remove:hover { background: var(--off-white-dark); color: var(--error); }
.upload-empty-hint { font-size: 11.5px; color: var(--gray); margin-top: var(--sp-2); }
select.miro-modal-url { appearance: auto; background: var(--white); cursor: pointer; }
@media (max-width: 1024px) {
body.role-admin .todo-agenda-row { grid-template-columns: 1fr; }
.property-stats { grid-template-columns: repeat(3, 1fr); }
.matterport-frame { aspect-ratio: 16 / 10; }
}
@media (max-width: 640px) {
.property-stats { grid-template-columns: repeat(2, 1fr); }
}