/* ================================================================
DESIGN SYSTEM
================================================================ */
* { box-sizing: border-box; margin: 0; padding: 0; }
:root {
--bg: #FCF9F8;
--cream: #FCF9F6;
--overlay: rgba(28, 22, 17, 0.45); /* REN-461: warm charcoal modal backdrop */
--overlay-heavy: rgba(28, 22, 17, 0.85); /* REN-461: lightbox backdrop, same hue */
--warning-ring: rgba(168, 92, 20, 0.28); /* REN-461: amber pill border */
--surface: #FFFFFF;
--surface-alt: #F7F4F0;
--surface-container-low: #f6f3f2;
--surface-container-high: #eae7e7;
--border: #E8E2DA;
--border-light: #F0EBE4;
--outline-variant: rgba(28,27,27,0.15);
--orange: #F97316;
--orange-hover: #EA6C0A;
--orange-light: #FFF4ED;
--orange-ring: rgba(249,115,22,0.25);
--tertiary: #4a7c59;
--tertiary-container: #c8e6c9;
--text: #1A1A1A;
--text-primary: var(--text);
--text-secondary: #6B6B6B;
--muted: #9A9490;
--success: #6B9970;
--success-light:#E4EDE5;
--info: #2B5FBF;
--info-light: #EFF6FF;
--warning: #A85C14;
--warning-light:#FFFBEB;
--danger: #B03C36;
--danger-light: rgba(176,60,54,0.12);
/* Aliases used by bid-badge health/licensed chips */
--amber: #A85C14;
--muted-red: #B03C36;
--navy: #2B5FBF;
--radius: 16px;
--radius-md: 10px;
--radius-sm: 8px;
--radius-xl: 0.75rem;
--radius-full: 9999px;
--shadow-sm: 0 2px 8px rgba(28,27,27,0.04);
--shadow-md: 0 4px 16px rgba(28,27,27,0.05);
--shadow-lg: 0 12px 40px rgba(28,27,27,0.06);
--shadow-orange:0 8px 24px rgba(249,115,22,0.18);
--transition: 0.2s cubic-bezier(0.4,0,0.2,1);
/* ── IJ-pass DS: rf-* canonical alias tokens ── */
--rf-orange: #F97316;
--rf-bg: #FCF9F8;
--rf-sage: #5C6B54;
--rf-danger: #8C2520;
--rf-text: #1A1A1A;
--rf-border: #E8E2DA;
--rf-font-sans: 'Manrope', ui-sans-serif, system-ui, sans-serif;
--rf-r-md: 12px;
--rf-r-xl: 20px;
/* ── K-pass: complete rf-* token set ── */
/* Semantic aliases (lighter K-pass values) */
--rf-success: #6B9970;
--rf-success-light: #E4EDE5;
--rf-danger: #B03C36;
--rf-danger-light: #F3E3E0;
--rf-info: #2B5FBF;
--rf-info-light: #E7ECF5;
--rf-warning: #A85C14;
--rf-warning-light: #F6EDDA;
/* Surface tokens */
--rf-surface: #FFFFFF;
--rf-surface-alt: #F6F3F2;
--rf-surface-recessed:#EAE7E7;
/* Text */
--rf-text-secondary: #6B6B6B;
--rf-muted: #9A9490;
/* Orange extras */
--rf-orange-hover: #EA6C0A;
--rf-orange-light: #FFF4ED;
--rf-orange-ring: rgba(249,115,22,0.25);
/* Sage */
--rf-sage-light: #E8EDE5;
--rf-sage-muted: #8A9882;
/* Radii (complete set) */
--rf-r-xs: 4px;
--rf-r-sm: 8px;
--rf-r-pill: 10px;
--rf-r-lg: 16px;
--rf-r-2xl: 24px;
--rf-r-full: 9999px;
/* Shadows */
--rf-shadow-card: 0 2px 12px rgba(28,27,27,0.04);
--rf-shadow-ambient: 0 4px 24px rgba(28,27,27,0.05);
--rf-shadow-raised: 0 4px 16px rgba(28,27,27,0.10);
--rf-shadow-cta: 0 6px 20px rgba(249,115,22,0.28), 0 2px 6px rgba(28,27,27,0.08);
--rf-shadow-focus: 0 0 0 3px rgba(249,115,22,0.25);
/* Motion */
--rf-dur-fast: 150ms;
--rf-dur-base: 300ms;
--rf-dur-slow: 500ms;
--rf-ease-out: cubic-bezier(0.22, 1, 0.36, 1);
--rf-ease-soft: cubic-bezier(0.3, 0, 0.2, 1);
/* Spacing */
--rf-sp-xs: 4px;
--rf-sp-sm: 8px;
--rf-sp-md: 12px;
--rf-sp-lg: 16px;
--rf-sp-xl: 24px;
--rf-sp-2xl: 32px;
--rf-sp-3xl: 48px;
/* Font weights */
--rf-fw-light: 300;
--rf-fw-regular: 400;
--rf-fw-medium: 500;
--rf-fw-semibold: 600;
--rf-fw-bold: 700;
--rf-fw-extrabold: 800;
/* Font sizes */
--rf-fs-xs: 11px;
--rf-fs-sm: 13px;
--rf-fs-base: 15px;
--rf-fs-md: 16px;
--rf-fs-lg: 18px;
--rf-fs-xl: 20px;
--rf-fs-2xl: 24px;
--rf-fs-3xl: 30px;
--rf-fs-4xl: 36px;
/* Line heights */
--rf-lh-tight: 1.2;
--rf-lh-normal: 1.5;
--rf-lh-relaxed: 1.6;
/* Density */
--rf-density: 1;
--rf-row-h: calc(56px * var(--rf-density));
--rf-pad-card: calc(20px * var(--rf-density));
/* ── L-pass: remaining DS tokens ── */
/* Surface variants */
--rf-surface-card: #FFFFFF;
--rf-surface-section: #F6F3F2;
/* Border extras */
--rf-border-light: #F0EBE4;
--rf-outline-variant: rgba(28,27,27,0.15);
/* Font sizes (web hero) */
--rf-fs-5xl: 48px;
--rf-fs-6xl: 64px;
/* Letter spacing */
--rf-ls-display: -1px;
--rf-ls-headline: -0.5px;
--rf-ls-body: 0;
/* Spacing legacy aliases */
--rf-sp-4xl: 48px;
--rf-sp-5xl: 48px;
--rf-sp-6xl: 64px;
/* Shadow nav */
--rf-shadow-nav: 0 -4px 16px rgba(28,27,27,0.04);
/* Motion — spring */
--rf-ease-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
}
/* Persona density overrides (DS spec) */
[data-persona="homeowner"] { --rf-density: 1.05; }
[data-persona="investor"] { --rf-density: 0.95; }
[data-persona="contractor"] { --rf-density: 0.85; }
/* Phase C Pass 3: disable browser scroll-anchoring so revealing a
~4000px persona section does NOT auto-bump window.scrollY. Without
this, switchLandingPersona's snap-to-hero-bottom fix in Pass 2 has
no effect (the viewport already jumped far past the target before
the snap can fire). */
html { scroll-behavior: smooth; overflow-anchor: none; }
body {
background: var(--bg);
overflow-anchor: none;
color: var(--text);
font-family: 'Manrope', system-ui, -apple-system, sans-serif;
line-height: 1.6;
min-height: 100vh;
-webkit-font-smoothing: antialiased;
}
a { color: inherit; text-decoration: none; }
img { max-width: 100%; display: block; }
button { font-family: inherit; cursor: pointer; }
ul { list-style: none; }
/* ================================================================
SCROLLBAR
================================================================ */
::-webkit-scrollbar { width: 8px; }
::-webkit-scrollbar-track { background: var(--bg); }
::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }
::-webkit-scrollbar-thumb:hover { background: var(--muted); }
/* ================================================================
UTILITY
================================================================ */
.hidden { display: none !important; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0,0,0,0); }
/* ================================================================
ANIMATIONS
================================================================ */
@keyframes fadeInUp {
from { opacity: 0; transform: translateY(24px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes fadeIn {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes slideUp {
from { opacity: 0; transform: translateY(40px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
@keyframes scaleIn {
from { opacity: 0; transform: scale(0.95); }
to { opacity: 1; transform: scale(1); }
}
@keyframes pulse {
0% { box-shadow: 0 0 0 0 rgba(239,68,68,0.6); }
70% { box-shadow: 0 0 0 12px rgba(239,68,68,0); }
100% { box-shadow: 0 0 0 0 rgba(239,68,68,0); }
}
.anim-fade-in { opacity: 1; transform: none; }
.anim-fade-in.visible { opacity: 1; transform: none; }
/* ================================================================
BUTTONS
================================================================ */
.btn {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 14px 28px; border-radius: var(--rf-r-md, 12px); font-size: 15px; font-weight: 600;
border: none; transition: all var(--transition); white-space: nowrap;
line-height: 1.4;
}
.btn-sm { padding: 10px 20px; font-size: 13px; }
.btn-lg { padding: 18px 36px; font-size: 17px; border-radius: var(--rf-r-md, 12px); }
.btn-primary {
background: var(--orange); color: #fff;
box-shadow: 0 2px 8px rgba(249,115,22,0.25);
}
.btn-primary:hover {
background: var(--orange-hover);
box-shadow: var(--shadow-orange);
transform: translateY(-1px);
}
.btn-primary:active { transform: translateY(0); }
.btn-ghost {
background: transparent; color: var(--text);
border: 1.5px solid var(--outline-variant);
}
.btn-ghost:hover { border-color: var(--orange); color: var(--orange); }
/* REN-525: Share is the viral affordance — give it an orange-tinted treatment
so it stands out from neutral ghost actions without competing with the
primary bid CTA. */
.btn-share {
background: var(--orange-light); color: var(--orange);
border: 1.5px solid var(--orange);
}
.btn-share svg { color: var(--orange); }
.btn-share:hover { background: var(--orange); color: #fff; }
.btn-share:hover svg { color: #fff; }
/* ── K-pass: Emil interaction layer ── */
/* Easing curves */
:root {
--ease-out: cubic-bezier(0.23, 1, 0.32, 1);
--ease-in-out: cubic-bezier(0.77, 0, 0.175, 1);
}
/* Button press feel — all buttons */
.btn, button {
transition: transform 160ms var(--ease-out), opacity 160ms var(--ease-out), background-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
}
.btn:active, button:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) {
.btn:hover, button:hover { opacity: 0.88; }
}
/* Loading state */
.btn--loading { pointer-events: none; opacity: 0.75; }
.btn--loading .spinner { display: inline-block; }
.spinner {
display: none;
width: 16px; height: 16px;
border: 2px solid rgba(255,255,255,0.3);
border-top-color: white;
border-radius: 50%;
animation: spin 0.6s linear infinite;
}
/* Section enter animation */
.section--entering {
animation: sectionIn 220ms var(--ease-out) forwards;
}
@keyframes sectionIn {
from { opacity: 0; transform: translateY(6px) scale(0.98); }
to { opacity: 1; transform: translateY(0) scale(1); }
}
.btn-text { background: transparent; color: var(--text-secondary); border: none; padding: 8px 12px; }
.btn-text:hover { color: var(--orange); }
.btn-success { background: var(--success); color: #fff; }
.btn-success:hover { background: #15803d; }
.btn-warning-outline { background: transparent; color: var(--warning); border: 1.5px solid var(--warning); }
.btn-warning-outline:hover { background: var(--warning-light); }
.w-full { width: 100%; }
/* ================================================================
NAV
================================================================ */
.nav {
display: flex; align-items: center; justify-content: space-between;
padding: 16px 40px;
position: sticky; top: 0; z-index: 100;
background: rgba(252,249,246,0.75);
backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
border-bottom: 1px solid var(--rf-border, #E8E2DA);
}
.logo {
font-size: 22px; font-weight: 800; letter-spacing: -0.5px;
color: var(--text); cursor: pointer; user-select: none;
}
.logo span { color: var(--orange); }
.nav-right { display: flex; align-items: center; gap: 12px; }
.nav-links { display: flex; align-items: center; gap: 28px; }
.nav-link {
font-size: 14px; font-weight: 500; color: var(--text-secondary);
padding: 6px 0; position: relative; transition: color var(--transition); cursor: pointer;
}
.nav-link:hover, .nav-link.active { color: var(--text); }
.nav-link.active::after {
content: ''; position: absolute; bottom: -2px; left: 0; right: 0;
height: 2px; background: var(--orange); border-radius: 1px;
}
.nav-hamburger {
display: none;
width: 42px;
height: 42px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface);
color: var(--text);
align-items: center;
justify-content: center;
cursor: pointer;
transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.nav-hamburger:hover {
background: #FFF7ED;
border-color: rgba(249,115,22,0.35);
color: var(--orange);
}
.nav-hamburger:focus-visible,
.nav-drawer__close:focus-visible,
.nav-drawer__link:focus-visible {
outline: 3px solid rgba(249,115,22,0.28);
outline-offset: 2px;
}
.nav-drawer {
display: none;
position: fixed;
inset: 0;
z-index: 1400;
pointer-events: none;
}
.nav-drawer__overlay {
position: absolute;
inset: 0;
background: rgba(0,0,0,0.4);
opacity: 0;
transition: opacity 220ms var(--ease-out, ease-out);
}
.nav-drawer__panel {
position: absolute;
top: 0;
right: 0;
width: min(300px, calc(100vw - 32px));
height: 100dvh;
background: var(--surface);
transform: translateX(100%);
transition: transform 220ms var(--ease-out, ease-out);
display: flex;
flex-direction: column;
padding: 18px;
box-sizing: border-box;
}
.nav-drawer.is-open {
pointer-events: auto;
}
.nav-drawer.is-open .nav-drawer__overlay {
opacity: 1;
}
.nav-drawer.is-open .nav-drawer__panel {
transform: translateX(0);
border-left: 1px solid var(--border);
box-shadow: -18px 0 40px rgba(28,25,23,0.16);
}
.nav-drawer__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding-bottom: 16px;
border-bottom: 1px solid var(--border-light);
}
.nav-drawer__head .logo {
font-size: 20px;
cursor: default;
}
.nav-drawer__close {
width: 36px;
height: 36px;
border: 1px solid var(--border);
border-radius: 999px;
background: var(--surface-alt);
color: var(--text-secondary);
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 24px;
line-height: 1;
cursor: pointer;
}
.nav-drawer__links {
display: flex;
flex-direction: column;
gap: 6px;
padding-top: 18px;
}
.nav-drawer__link {
min-height: 46px;
width: 100%;
display: flex;
align-items: center;
gap: 12px;
padding: 11px 12px;
border: 1px solid transparent;
border-radius: 10px;
background: transparent;
color: var(--text);
font: inherit;
font-size: 15px;
font-weight: 700;
text-align: left;
cursor: pointer;
transition: background var(--transition), border-color var(--transition), color var(--transition);
}
.nav-drawer__link:hover {
background: var(--surface-alt);
}
.nav-drawer__link--active {
background: #FFF7ED;
border-color: rgba(249,115,22,0.25);
color: var(--orange);
}
.nav-drawer__link--cta {
background: var(--orange);
color: #fff;
justify-content: center;
margin-top: 2px;
}
.nav-drawer__link--cta:hover {
background: #EA580C;
color: #fff;
}
.nav-drawer__divider {
height: 1px;
background: var(--border-light);
margin: 8px 0;
}
.nav-drawer__lang-row {
min-height: 46px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 8px 12px;
border-radius: 10px;
background: var(--surface-alt);
}
body.nav-drawer-open {
overflow: hidden;
}
@media (min-width: 641px) {
.nav-drawer { display: none !important; }
}
@media (max-width: 640px) {
.nav--drawer-enabled {
padding: 10px 14px;
gap: 10px;
}
.nav--drawer-enabled .nav-links,
.nav--drawer-enabled .nav-bell,
.nav--drawer-enabled .user-menu-wrap {
display: none !important;
}
.nav--drawer-enabled .nav-right {
flex: 0 0 auto;
margin-left: auto;
}
.nav--drawer-enabled .nav-hamburger {
display: inline-flex;
}
.nav--drawer-enabled .logo {
font-size: 20px;
min-width: 0;
}
.nav-drawer {
display: block;
}
}
.portal-badge {
background: var(--orange-light); color: var(--orange);
font-size: 12px; font-weight: 700; padding: 5px 12px;
border-radius: 20px; text-transform: uppercase; letter-spacing: 0.5px;
border: 1px solid rgba(249,115,22,0.2);
}
.user-menu { display: flex; align-items: center; gap: 8px; cursor: pointer; transition: opacity var(--transition); }
.user-menu:hover { opacity: 0.8; }
.user-avatar {
width: 34px; height: 34px; border-radius: 50%;
background: var(--orange); color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 700; font-size: 14px;
}
.user-name { font-size: 14px; font-weight: 500; color: var(--text); }
/* ================================================================
HERO / LANDING PAGE
================================================================ */
.landing-page { overflow-x: clip; }
/* ── Dark Hero Wrapper — prevents white notch ── */
#landing .dark-hero-wrapper {
background: #141210;
}
/* ── Landing Nav (v2 — dark transparent with persona tabs) ── */
#landing > .dark-hero-wrapper > .nav {
background: transparent;
border-bottom: 1px solid rgba(255,255,255,0.08);
transition: background 0.35s ease, box-shadow 0.35s ease, backdrop-filter 0.35s ease, border-color 0.35s ease;
}
#landing > .dark-hero-wrapper > .nav .logo { color: #fff; transition: color 0.35s ease; }
#landing > .dark-hero-wrapper > .nav .nav-center {
position: absolute; left: 50%; transform: translateX(-50%);
display: flex; align-items: center; gap: 0;
}
#landing > .dark-hero-wrapper > .nav .nav-tab {
font-size: 14px; font-weight: 500; color: rgba(255,255,255,0.85);
padding: 8px 20px; position: relative; cursor: pointer;
transition: color var(--transition);
border: none; background: none; font-family: inherit;
}
#landing > .dark-hero-wrapper > .nav .nav-tab:hover { color: #fff; }
#landing > .dark-hero-wrapper > .nav .nav-tab.active { color: #fff; font-weight: 600; }
#landing > .dark-hero-wrapper > .nav .nav-tab.active::after {
content: ''; position: absolute; bottom: 0; left: 20px; right: 20px;
height: 2px; background: var(--orange); border-radius: 1px;
}
#landing > .dark-hero-wrapper > .nav .btn-text { color: rgba(255,255,255,0.9); transition: color 0.35s ease; }
#landing > .dark-hero-wrapper > .nav .btn-text:hover { color: #fff; }
#landing > .dark-hero-wrapper > .nav .btn-primary { background: var(--orange); color: #fff; }
/* Scrolled state */
#landing > .dark-hero-wrapper > .nav.scrolled {
background: rgba(252,249,246,0.72);
backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
border-bottom: none;
box-shadow: 0 1px 0 var(--outline-variant);
}
#landing > .dark-hero-wrapper > .nav.scrolled .logo { color: var(--text); }
#landing > .dark-hero-wrapper > .nav.scrolled .nav-tab { color: var(--text-secondary); }
#landing > .dark-hero-wrapper > .nav.scrolled .nav-tab:hover { color: var(--text); }
#landing > .dark-hero-wrapper > .nav.scrolled .nav-tab.active { color: var(--text); }
#landing > .dark-hero-wrapper > .nav.scrolled .nav-tab.active::after { background: var(--orange); }
#landing > .dark-hero-wrapper > .nav.scrolled .btn-text { color: var(--orange); font-weight: 700; }
#landing > .dark-hero-wrapper > .nav.scrolled .btn-text:hover { color: var(--orange-hover); }
/* ── Hero Banner (full-bleed photo) ── */
.hero-banner {
position: relative;
width: 100%; min-height: 92vh;
display: flex; flex-direction: column;
align-items: center; justify-content: center;
padding: 100px 40px 80px; text-align: center;
margin-top: -73px;
overflow: hidden;
background-color: #141210;
}
.hero-banner::before {
content: ''; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(
180deg,
rgba(20,18,15,0.62) 0%,
rgba(20,18,15,0.38) 35%,
rgba(20,18,15,0.42) 65%,
rgba(20,18,15,0.72) 100%
);
}
.hero-banner > * { position: relative; z-index: 2; }
.hero-banner > .hero-banner-bg {
position: absolute; inset: 0; z-index: 0;
}
.hero-banner-bg img {
width: 100%; height: 100%;
object-fit: cover; object-position: center 40%;
}
.hero-banner .hero-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
background: rgba(255,255,255,0.12); color: #fff;
font-size: 13px; font-weight: 600; padding: 6px 16px;
border-radius: 20px; margin-bottom: 24px;
border: 1px solid rgba(255,255,255,0.18);
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
animation: fadeInUp 0.6s ease both;
}
.hero-banner h1 {
font-size: clamp(36px, 5vw, 56px);
font-weight: 800; letter-spacing: -1.5px; line-height: 1.1;
margin-bottom: 20px; color: #fff;
max-width: 780px;
text-shadow: 0 2px 20px rgba(0,0,0,0.15);
animation: fadeInUp 0.6s ease 0.1s both;
}
.hero-banner h1 .accent { color: var(--orange); }
.contractor-hero-title {
font-size: clamp(40px, 5.5vw, 64px) !important;
}
.hero-banner .hero-sub {
font-size: 18px; color: rgba(255,255,255,0.88); max-width: 640px;
margin: 0 auto 40px; line-height: 1.7; font-weight: 400;
text-shadow: 0 1px 8px rgba(0,0,0,0.12);
animation: fadeInUp 0.6s ease 0.2s both;
}
.hero-banner .hero-btns {
display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
animation: fadeInUp 0.6s ease 0.3s both;
}
.hero-banner .hero-btns .btn-ghost {
background: rgba(255,255,255,0.1); color: #fff;
border: 1.5px solid rgba(255,255,255,0.35);
backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
}
.hero-banner .hero-btns .btn-ghost:hover {
background: rgba(255,255,255,0.2); border-color: rgba(255,255,255,0.6);
}
/* ── REN-154: Hero CTA row (single primary button) ── */
.hero-banner .hero-cta-row {
display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
margin-top: 8px;
animation: fadeInUp 0.6s ease 0.3s both;
}
.hero-banner .hero-cta-row .btn-lg {
padding: 16px 36px;
font-size: 17px;
font-weight: 700;
letter-spacing: 0.01em;
box-shadow: 0 6px 24px rgba(249,115,22,0.32), 0 2px 8px rgba(0,0,0,0.18);
}
/* ── REN-154: Hero scroll cue (bouncing chevron) ──
Centered via left:0/right:0/margin:auto + width:max-content because
transform-based centering (translateX(-50%)) gets clobbered by the
fadeInUp animation's `to` state (transform: translateY(0)). */
.hero-banner .hero-scroll-cue {
position: absolute;
left: 0; right: 0; bottom: 36px;
margin: 0 auto;
width: max-content;
max-width: 100%;
display: flex; flex-direction: column; align-items: center; gap: 6px;
color: rgba(255,255,255,0.78);
font-size: 13px; font-weight: 500; letter-spacing: 0.04em;
text-decoration: none;
cursor: pointer;
z-index: 3;
animation: fadeInUp 0.6s ease 0.6s both;
transition: color 0.2s ease;
}
.hero-banner .hero-scroll-cue:hover { color: #fff; }
.hero-banner .hero-scroll-cue .hero-scroll-cue-text {
text-transform: uppercase;
text-shadow: 0 1px 6px rgba(0,0,0,0.4);
}
.hero-banner .hero-scroll-cue .hero-scroll-cue-chev {
width: 22px; height: 22px;
animation: scrollCueBounce 1.8s ease-in-out infinite;
filter: drop-shadow(0 1px 4px rgba(0,0,0,0.3));
}
@keyframes scrollCueBounce {
0%, 20%, 100% { transform: translateY(0); opacity: 0.85; }
50% { transform: translateY(8px); opacity: 1; }
80% { transform: translateY(0); opacity: 0.85; }
}
/* ── Persona Prompt Label ── */
.persona-prompt {
font-size: 15px;
font-weight: 600;
color: rgba(255,255,255,0.9);
margin-bottom: 16px;
letter-spacing: 0.01em;
animation: fadeInUp 0.6s ease 0.25s both;
}
/* ── Persona Selector Buttons ── */
.persona-selector {
display: flex; gap: 16px; justify-content: center; flex-wrap: wrap;
animation: fadeInUp 0.6s ease 0.3s both, selectorAttract 1.8s ease 1.8s both;
}
@keyframes selectorAttract {
0% { filter: drop-shadow(0 0 0px rgba(249,115,22,0)); }
50% { filter: drop-shadow(0 0 16px rgba(249,115,22,0.45)); }
100% { filter: drop-shadow(0 0 0px rgba(249,115,22,0)); }
}
@keyframes confirmPulse {
0% { box-shadow: 0 0 0 0 rgba(249,115,22,0.5); }
50% { box-shadow: 0 0 0 10px rgba(249,115,22,0); }
100% { box-shadow: 0 0 0 0 rgba(249,115,22,0); }
}
@keyframes sectionFadeIn {
from { opacity: 0; transform: translateY(16px); }
to { opacity: 1; transform: translateY(0); }
}
@keyframes sectionFadeOut {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-8px); }
}
@keyframes heroCopyOut {
to { opacity: 0; transform: translateY(-6px); }
}
@keyframes heroCopyIn {
from { opacity: 0; transform: translateY(6px); }
to { opacity: 1; transform: translateY(0); }
}
.hero-copy-exit { animation: heroCopyOut 0.2s ease forwards; }
.hero-copy-enter { animation: heroCopyIn 0.3s ease forwards; }
@keyframes gateFadeOut {
from { opacity: 1; transform: translateY(0); }
to { opacity: 0; transform: translateY(-12px); }
}
@keyframes sectionSlideIn {
from { opacity: 0; transform: translateY(20px); }
to { opacity: 1; transform: translateY(0); }
}
.persona-btn {
display: inline-flex; align-items: center; gap: 10px;
padding: 16px 32px;
background: rgba(255,255,255,0.1);
color: #fff;
border: 1.5px solid rgba(255,255,255,0.3);
border-radius: var(--radius-full);
font-family: inherit; font-size: 16px; font-weight: 600;
cursor: pointer;
backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
transition: all 0.25s ease;
}
.persona-btn:hover {
background: rgba(255,255,255,0.18);
border-color: rgba(255,255,255,0.5);
transform: translateY(-1px);
}
.persona-btn.active {
background: var(--orange);
border-color: var(--orange);
color: #fff;
transform: scale(1.02);
box-shadow: 0 0 24px rgba(249,115,22,0.4), 0 4px 12px rgba(249,115,22,0.25);
}
.persona-btn.active:hover {
background: var(--orange-hover);
border-color: var(--orange-hover);
}
.persona-btn.pulse-confirm {
animation: confirmPulse 0.5s ease;
}
.persona-btn svg {
width: 22px; height: 22px; flex-shrink: 0;
}
.hero-banner .trust-row {
margin-top: 28px; display: flex; gap: 28px; justify-content: center;
flex-wrap: wrap; font-size: 14px; color: rgba(255,255,255,0.8);
animation: fadeInUp 0.6s ease 0.4s both;
}
.trust-item { display: flex; align-items: center; gap: 6px; }
.trust-check {
width: 20px; height: 20px; border-radius: 50%; background: rgba(255,255,255,0.15);
color: #fff; display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; flex-shrink: 0;
}
/* ── Persona Sections — content area ── */
.persona-section {
display: none;
opacity: 0;
}
.persona-section.active {
display: block;
animation: sectionFadeIn 0.5s ease 0.25s both;
}
.persona-section.exiting {
display: block;
animation: sectionFadeOut 0.3s ease forwards;
}
/* ── Persona Hero (2-col split) ── */
.persona-hero {
padding: 80px 40px;
background: var(--bg);
}
.persona-hero-grid {
max-width: 1100px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
align-items: center;
}
.persona-hero-text h2 {
font-size: clamp(30px, 4vw, 44px);
font-weight: 800; letter-spacing: -0.02em; line-height: 1.1;
margin-bottom: 20px; color: var(--text);
}
.persona-hero-text h2 .accent { color: var(--orange); }
.persona-hero-text .hero-sub {
font-size: 16px; color: var(--text-secondary);
line-height: 1.7; margin-bottom: 32px; max-width: 500px;
}
.persona-hero-text .hero-btns {
display: flex; gap: 14px; flex-wrap: wrap;
}
.persona-hero-text .btn-ghost {
background: transparent; color: var(--text);
border: 1.5px solid var(--outline-variant);
backdrop-filter: none;
}
.persona-hero-text .btn-ghost:hover {
border-color: var(--orange); color: var(--orange);
background: transparent;
}
/* Contractor headline override */
.contractor-headline {
font-size: clamp(36px, 5vw, 52px) !important;
font-weight: 800 !important;
}
/* ── Video Slot ── */
.video-slot {
background: #1A1A1A;
aspect-ratio: 16/9;
border-radius: var(--radius);
display: flex; flex-direction: column;
align-items: center; justify-content: center;
gap: 12px;
overflow: hidden;
position: relative;
}
.video-slot .play-icon {
width: 56px; height: 56px;
opacity: 0.5;
transition: opacity var(--transition);
}
.video-slot:hover .play-icon { opacity: 0.7; }
.video-slot .video-label {
font-size: 13px; color: rgba(255,255,255,0.45);
font-weight: 500; text-align: center; padding: 0 16px;
}
.rf-scroll-video-slot {
background: #101010;
isolation: isolate;
}
.rf-scroll-video-slot::after {
content: '';
position: absolute;
inset: 0;
pointer-events: none;
box-shadow: inset 0 0 0 1px rgba(255,255,255,0.06);
z-index: 2;
}
.video-slot:has(video) .play-icon,
.video-slot:has(video) .video-label { display: none; }
.video-slot video {
width: 100%; height: 100%; object-fit: cover;
position: absolute; inset: 0;
}
.rf-scroll-video {
pointer-events: none;
background: #101010;
}
/* ── How It Works (numbered steps with video slots) ──
REN-250: background unified to var(--bg) so persona-stack → hiw → projects
reads as one solid cream surface (no seam between sections). */
.hiw-section {
padding: 80px 40px; background: var(--bg);
}
.hiw-inner { max-width: 1100px; margin: 0 auto; }
.hiw-header { margin-bottom: 48px; }
.hiw-header h2 { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; }
.hiw-header p { font-size: 15px; color: var(--text-secondary); margin-top: 8px; max-width: 560px; }
.hiw-step {
margin-bottom: 72px;
display: flex;
flex-direction: column;
gap: 24px;
}
.hiw-step:last-child { margin-bottom: 0; }
.hiw-step-text { padding: 0; }
.hiw-step .video-slot {
width: 100%;
aspect-ratio: 16/7;
border-radius: var(--radius);
}
.hiw-step-num {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 50%;
background: var(--orange); color: #fff;
font-weight: 800; font-size: 15px; margin-bottom: 14px;
}
.hiw-step-text h3 { font-size: 22px; font-weight: 700; margin-bottom: 10px; letter-spacing: -0.01em; }
.hiw-step-text p { font-size: 15px; color: var(--text-secondary); line-height: 1.7; }
/* ── REN-154: Persona Stack (centered vertical layout) ── */
.persona-stack {
padding: 88px 40px 72px;
background: var(--bg);
display: flex; flex-direction: column; align-items: center;
text-align: center;
}
.persona-stack-h2 {
font-size: clamp(32px, 4.5vw, 48px);
font-weight: 800; letter-spacing: -0.02em; line-height: 1.08;
margin: 0 0 16px;
color: var(--text);
max-width: 940px;
}
.persona-stack-h2 .accent { color: var(--orange); }
.persona-stack-tagline {
font-size: 17px; color: var(--text-secondary);
line-height: 1.65; max-width: 640px;
margin: 0 0 36px;
}
.persona-stack-video {
width: 100%; max-width: 1240px;
aspect-ratio: 16/9;
border-radius: 18px;
overflow: hidden;
background: #1A1A1A;
box-shadow: 0 18px 56px rgba(15,12,8,0.18), 0 4px 14px rgba(15,12,8,0.10);
margin-bottom: 36px;
position: relative;
}
.persona-stack-h2 + .persona-stack-video { margin-top: 18px; }
.persona-stack-video iframe {
position: absolute; inset: 0;
width: 100%; height: 100%;
border: 0;
}
/* REN-154: placeholder shown while the Cloudflare Stream UID isn't set */
.rf-stream-placeholder {
position: absolute; inset: 0;
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 14px;
background: linear-gradient(135deg, #1A1A1A 0%, #232323 100%);
color: rgba(255,255,255,0.55);
}
.rf-stream-placeholder svg {
width: 56px; height: 56px;
opacity: 0.35;
stroke: #fff;
}
.rf-stream-placeholder-label {
font-size: 13px; font-weight: 500; letter-spacing: 0.04em;
text-transform: uppercase;
color: rgba(255,255,255,0.45);
}
.persona-stack-video video {
position: absolute; inset: 0;
width: 100%; height: 100%;
object-fit: cover;
}
.persona-stack-ctas {
display: flex; gap: 14px; justify-content: center; flex-wrap: wrap;
margin-top: 4px;
}
.persona-stack-ctas .btn { min-width: 200px; }
.persona-stack-ctas .btn-ghost {
background: transparent; color: var(--text);
border: 1.5px solid var(--outline-variant);
}
.persona-stack-ctas .btn-ghost:hover {
border-color: var(--orange); color: var(--orange);
}
/* ── REN-154: How-it-works grid (no per-step videos) ── */
.hiw-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
gap: 20px;
margin-top: 8px;
}
.hiw-card {
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: var(--radius);
padding: 28px 24px;
display: flex; flex-direction: column;
transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}
.hiw-card:hover {
transform: translateY(-2px);
border-color: var(--orange);
box-shadow: 0 8px 28px rgba(15,12,8,0.08);
}
.hiw-card .hiw-step-num {
display: inline-flex; align-items: center; justify-content: center;
width: 36px; height: 36px; border-radius: 50%;
background: var(--orange); color: #fff;
font-weight: 800; font-size: 15px;
margin-bottom: 14px;
}
.hiw-card h3 {
font-size: 19px; font-weight: 700;
margin: 0 0 8px; letter-spacing: -0.01em;
color: var(--text);
}
.hiw-card p {
font-size: 14.5px; color: var(--text-secondary);
line-height: 1.6; margin: 0;
}
/* ── Feature Chips (Investor section) ── */
.feature-chips {
display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px;
}
.feature-chip {
display: inline-flex; align-items: center; gap: 5px;
padding: 6px 14px;
background: var(--surface);
border: 1px solid var(--border-light);
border-radius: var(--radius-full);
font-size: 13px; font-weight: 500; color: var(--text-secondary);
}
.feature-chip svg { width: 14px; height: 14px; opacity: 0.6; }
/* ── Strength Badges (Contractor section) ── */
.strength-badges {
display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px;
}
.strength-badge {
display: inline-flex; align-items: center;
padding: 6px 14px;
background: var(--orange-light);
color: var(--orange);
border-radius: var(--radius-full);
font-size: 13px; font-weight: 600;
}
/* ── Site Visit Mockup (Contractor section) ── */
.site-visit-mock {
display: flex; align-items: center; gap: 10px;
margin-top: 20px; padding: 12px 16px;
background: var(--surface);
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
width: fit-content;
}
.site-visit-mock .checkbox-mock {
width: 20px; height: 20px;
border: 2px solid var(--border);
border-radius: 4px;
flex-shrink: 0;
}
.site-visit-mock span {
font-size: 14px; font-weight: 500; color: var(--text);
}
.strength-label {
font-size: 13px; font-weight: 600; color: var(--text);
margin-top: 20px; margin-bottom: 8px;
}
/* ── Contractor — Projects Preview ── */
.projects-preview-section {
padding: 80px 40px;
background: var(--bg);
}
.projects-preview-inner { max-width: 1100px; margin: 0 auto; }
.projects-preview-header {
display: flex; justify-content: space-between; align-items: flex-end;
margin-bottom: 40px; flex-wrap: wrap; gap: 16px;
}
.projects-preview-header h2 {
font-size: 32px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 6px;
}
.projects-preview-header p { font-size: 15px; color: var(--text-secondary); }
/* REN-250: landing-page project cards. Scoped via .project-cards-grid so
they don't collide with the contractor "Your Estimate" .project-card
rules further down. Real-estate-listing feel — bigger card, hover lift,
prominent estimates-filled pill, branded gradient fallback. */
.project-cards-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 28px;
margin-bottom: 48px;
}
.project-cards-grid .project-card {
background: #ffffff;
border: 1px solid rgba(15, 23, 42, 0.06);
border-radius: 20px;
overflow: hidden;
cursor: pointer;
/* explicit align-items + justify-content override the global .project-card
estimate-card rule (display:flex; align-items:center; justify-content:space-between)
which would otherwise collapse the photo div to its content width and prevent
aspect-ratio from computing the height. */
display: flex; flex-direction: column;
align-items: stretch; justify-content: flex-start;
padding: 0; margin: 0;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
transition: box-shadow 240ms ease, transform 240ms ease, border-color 240ms ease;
}
.project-cards-grid .project-card-photo,
.project-cards-grid .project-card-photo--placeholder {
width: 100%;
}
.project-cards-grid .project-card:hover {
box-shadow: 0 18px 40px rgba(15, 23, 42, 0.14), 0 0 0 1px rgba(249, 115, 22, 0.10);
transform: translateY(-4px);
border-color: rgba(249, 115, 22, 0.22);
}
.project-cards-grid .project-card-photo {
position: relative;
aspect-ratio: 4/3;
overflow: hidden;
background: #efe8df;
border-bottom: 1px solid rgba(15, 23, 42, 0.04);
}
.project-cards-grid .project-card-photo img {
width: 100%; height: 100%; object-fit: cover; display: block;
transition: transform 0.55s cubic-bezier(.2,.6,.2,1);
}
.project-cards-grid .project-card:hover .project-card-photo img { transform: scale(1.06); }
.project-cards-grid .project-card-photo--placeholder { aspect-ratio: 4/3; }
.project-cards-grid .rf-photo-placeholder--gradient {
position: absolute; inset: 0;
background:
radial-gradient(ellipse at 25% 0%, rgba(255, 237, 213, 0.92) 0%, transparent 55%),
radial-gradient(ellipse at 78% 100%, rgba(254, 215, 170, 0.78) 0%, transparent 60%),
linear-gradient(135deg, #FFF7ED 0%, #FCE2C0 100%);
display: flex; align-items: center; justify-content: center;
}
.project-cards-grid .rf-photo-placeholder-badge {
font-family: 'Manrope', system-ui, sans-serif;
font-size: 22px; font-weight: 800; letter-spacing: 0.01em;
color: rgba(124, 45, 18, 0.62);
text-transform: uppercase;
padding: 11px 22px;
border: 1.5px solid rgba(194, 65, 12, 0.22);
border-radius: 999px;
background: rgba(255, 255, 255, 0.55);
backdrop-filter: blur(8px);
-webkit-backdrop-filter: blur(8px);
}
.project-cards-grid .project-badge {
position: absolute; top: 14px; left: 14px;
background: rgba(15, 23, 42, 0.62); color: #fff;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
text-transform: uppercase;
padding: 6px 11px;
border-radius: 999px;
backdrop-filter: blur(6px);
-webkit-backdrop-filter: blur(6px);
}
.project-cards-grid .project-card-body {
padding: 20px 22px 22px;
display: flex; flex-direction: column; gap: 4px;
flex: 1;
}
.project-cards-grid .project-card-title {
font-family: 'Manrope', system-ui, sans-serif;
font-size: 19px; font-weight: 700; letter-spacing: -0.015em;
color: #111827;
margin: 0 0 4px; line-height: 1.25;
}
.project-cards-grid .project-location {
font-size: 13.5px; font-weight: 500;
color: #6b7280;
margin: 0 0 14px;
letter-spacing: 0.005em;
}
.project-cards-grid .project-meta {
display: flex; justify-content: space-between; align-items: center;
gap: 12px; margin-top: auto;
}
.project-cards-grid .project-budget {
font-family: 'Manrope', system-ui, sans-serif;
font-size: 17px; font-weight: 800;
color: #F97316;
letter-spacing: -0.01em;
}
.project-cards-grid .project-bids {
font-size: 12px; font-weight: 600;
color: #9a3412;
background: rgba(249, 115, 22, 0.12);
border: 1px solid rgba(249, 115, 22, 0.25);
padding: 6px 12px;
border-radius: 999px;
letter-spacing: 0.01em;
white-space: nowrap;
}
.projects-cta {
text-align: center; padding: 40px 32px;
background: var(--surface-alt);
border-radius: var(--radius);
}
.projects-cta p { font-size: 16px; color: var(--text-secondary); margin-bottom: 20px; }
/* ── Homeowner — Before/After Gallery ── */
.gallery-section {
padding: 80px 40px;
background: var(--surface);
}
.gallery-inner { max-width: 1200px; margin: 0 auto; }
.gallery-header { margin-bottom: 48px; }
.gallery-header h2 { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
.gallery-header p { font-size: 15px; color: var(--text-secondary); }
.gallery-grid {
display: flex;
flex-direction: column;
gap: 32px;
margin-bottom: 40px;
}
.gallery-item {
background: var(--bg);
border: 1px solid var(--border-light);
border-radius: var(--radius);
overflow: hidden;
transition: box-shadow var(--transition), transform var(--transition);
}
.gallery-item:hover {
box-shadow: var(--shadow-lg);
transform: translateY(-2px);
}
.before-after {
display: grid; grid-template-columns: 1fr 1fr;
gap: 4px; height: 420px;
}
.ba-side { position: relative; overflow: hidden; }
.ba-side img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.4s ease; }
.gallery-item:hover .ba-side img { transform: scale(1.04); }
/* REN-243: scoped to .ba-side (gallery before/after pairs) so it doesn't
leak into the explainer .art-media-slot--beforeafter context. The bare
`.ba-label { bottom: 6px; left: 6px }` rule was stretching the explainer
labels to fill nearly the whole pane (giant blurred blob bug). */
.ba-side .ba-label {
position: absolute; bottom: 6px; left: 6px;
background: rgba(0,0,0,0.62); color: #fff;
font-size: 11px; font-weight: 700; padding: 3px 8px;
border-radius: var(--radius-full);
text-transform: uppercase; letter-spacing: 0.5px;
}
.ba-side .ba-after { background: rgba(249,115,22,0.75); }
.gallery-item-info { padding: 16px; }
.gallery-item-info h4 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.gallery-location { font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; }
.gallery-price-row { display: flex; justify-content: space-between; align-items: center; }
.gallery-price { font-size: 14px; font-weight: 700; color: var(--orange); }
.gallery-rating { font-size: 13px; color: var(--text-secondary); }
.gallery-cta { text-align: center; padding-top: 8px; }
/* ── More Arrow Button ── */
.more-arrow-btn {
background: transparent;
border: 1.5px solid var(--border);
color: var(--text-secondary);
font-family: inherit;
font-size: 14px;
font-weight: 600;
padding: 8px 18px;
border-radius: var(--radius-full);
cursor: pointer;
transition: all var(--transition);
white-space: nowrap;
}
.more-arrow-btn:hover {
border-color: var(--orange);
color: var(--orange);
}
/* ── Persona Gate ── */
.persona-gate {
padding: 60px 20px 80px;
text-align: center;
background: #FCF9F6;
display: flex;
flex-direction: column;
align-items: center;
}
.persona-gate.hidden {
animation: gateFadeOut 0.3s ease forwards;
pointer-events: none;
}
/* ── Inline Analyzer (hero page) ── */
.inline-analyzer { background: var(--surface); border-radius: var(--radius); padding: 32px; box-shadow: var(--shadow-md); }
.inline-analyzer .upload-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.inline-analyzer .upload-grid .upload-zone { min-height: 120px; padding: 16px; }
.inline-analyzer .generate-btn { margin-top: 20px; }
.inline-analyzer-results { margin-top: 24px; animation: fadeIn 0.4s ease; }
/* ── Generate Button (production match) ── */
.generate-btn {
width: 100%; padding: 16px 24px; border: none; border-radius: 999px;
background: var(--orange); color: #fff; font-family: 'Manrope', sans-serif;
font-size: 16px; font-weight: 700; cursor: pointer; transition: all 0.25s ease;
box-shadow: 0 2px 8px rgba(249,115,22,0.28); display: flex; align-items: center;
justify-content: center; gap: 10px;
}
.generate-btn:hover:not(:disabled) { background: #EA6C0A; transform: translateY(-2px); box-shadow: 0 8px 24px rgba(249,115,22,0.32); }
.generate-btn:active:not(:disabled) { transform: translateY(0); box-shadow: 0 2px 8px rgba(249,115,22,0.18); }
.generate-btn:disabled { opacity: 0.45; cursor: not-allowed; background: #9A9490; box-shadow: none; }
/* ── Button Spinner ── */
@keyframes btnSpin { to { transform: rotate(360deg); } }
.btn-spinner { width: 16px; height: 16px; border: 2px solid rgba(255,255,255,0.35); border-top-color: #fff;
border-radius: 50%; display: inline-block; animation: btnSpin 0.7s linear infinite; flex-shrink: 0; }
/* ── Preview Strip (file thumbnails) ── */
.preview-strip { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; min-height: 0; padding: 8px 0; align-items: flex-start; }
.preview-item { position: relative; width: 84px; height: 84px; border-radius: 10px; overflow: hidden; border: 1px solid var(--border); flex-shrink: 0; }
.preview-item img, .preview-item video { width: 100%; height: 100%; object-fit: cover; display: block; }
/* ── Scope Photo Column (production-parity drag/drop in line items) ── */
/* Task 2 fix: photos were 80px (too small). Production uses 140px. */
.l2-table td.scope-photo-cell { vertical-align: middle; min-width: 160px; padding: 10px; border-bottom: none; position: relative; }
/* Task 2 fix: empty cells (no photos, drop zone hidden) should collapse to text height — do NOT force 140px */
.scope-photo-cell-inner { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-start; min-width: 150px; }
.scope-photo-cell-inner:empty { min-width: 0; padding: 0; }
.scope-photo-cell .scope-l2-thumb { width: 140px; height: 140px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); cursor: grab; touch-action: none; -webkit-user-drag: none; user-select: none; transition: transform 0.15s, opacity 0.15s; }
.scope-photo-cell .scope-l2-thumb:hover { transform: scale(1.04); border-color: var(--orange); }
.scope-photo-cell .scope-l2-thumb:active { cursor: grabbing; }
.scope-photo-cell .scope-l2-thumb.dragging { opacity: 0.35; transform: scale(0.95); }
.scope-photo-cell .scope-photo-drop { width: 140px; height: 140px; border-radius: 8px; border: 2px dashed var(--border); display: none; align-items: center; justify-content: center; color: var(--muted); font-size: 12px; text-align: center; padding: 6px; }
body.scope-dragging-photo .scope-photo-cell .scope-photo-drop { display: flex; border-color: var(--orange); background: var(--orange-light); }
.scope-photo-cell.scope-drag-over { outline: 2px dashed var(--orange); outline-offset: 4px; background: var(--orange-light); border-radius: 8px; }
.scope-photo-cell.scope-drag-over .scope-photo-drop { border-color: var(--orange); background: var(--orange-light); }
/* Pointer-drag visuals (setupScopePhotoDragDrop): floating clone follows the
cursor; ghost previews the second slot a row will grow into; full = the
destination already has 2 photos so the drop is rejected. */
.scope-drag-clone { position: fixed; z-index: 9999; pointer-events: none; border-radius: 8px; border: 1px solid var(--orange); box-shadow: 0 10px 28px rgba(0,0,0,0.28); background-size: cover; background-position: center; opacity: 0.92; transform: rotate(-2deg); }
.scope-drop-ghost { width: 140px; height: 140px; flex-shrink: 0; border-radius: 8px; border: 2px dashed var(--orange); background: var(--orange-light); }
.l2-table td.scope-photo-cell.scope-drag-full { outline: 2px dashed var(--danger); outline-offset: 4px; background: var(--danger-light); border-radius: 8px; }
/* Mobile — shrink thumbs on narrow screens */
@media (max-width: 700px) {
.l2-table td.scope-photo-cell { min-width: 100px; }
.scope-photo-cell-inner { min-height: 80px; min-width: 90px; gap: 6px; }
.scope-photo-cell .scope-l2-thumb { width: 80px; height: 80px; border-radius: 6px; }
.scope-photo-cell .scope-photo-drop { width: 80px; height: 80px; border-radius: 6px; }
.scope-drop-ghost { width: 80px; height: 80px; border-radius: 6px; }
}
/* ── Top-of-baseline photo strip (between summary + chips) ── */
/* Task 2 fix: placeholders were 80x80. Match production 140x140. */
.scope-photos-strip { display: flex; gap: 10px; flex-wrap: wrap; margin: 16px 0; }
.scope-photos-strip .scope-photo-wrap { position: relative; width: 140px; height: 140px; }
.scope-photos-strip .scope-photo-top { width: 140px; height: 140px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); transition: transform 0.15s; cursor: pointer; display: block; }
.scope-photos-strip .scope-photo-wrap:hover .scope-photo-top { transform: scale(1.04); border-color: var(--orange); }
.scope-photos-strip .scope-photo-top-add { width: 140px; height: 140px; border: 2px dashed var(--border); border-radius: 8px; display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--muted); font-size: 13px; text-align: center; background: var(--surface-alt); transition: border-color 0.2s, background 0.2s; }
.scope-photos-strip .scope-photo-top-add:hover { border-color: var(--orange); background: var(--orange-light); color: var(--orange); }
/* REN-123 fix 3: hover-to-reveal black X for removing a baseline photo. */
.scope-photos-strip .scope-photo-remove {
position: absolute; top: 6px; right: 6px; width: 22px; height: 22px;
border-radius: 50%; background: rgba(0,0,0,0.78); color: #fff; border: none;
font-size: 16px; line-height: 1; cursor: pointer; padding: 0;
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity 0.15s, background 0.15s;
z-index: 2;
}
.scope-photos-strip .scope-photo-wrap:hover .scope-photo-remove { opacity: 1; }
.scope-photos-strip .scope-photo-remove:hover { background: #000; }
/* Always-on for touch devices that have no hover state. */
@media (hover: none) { .scope-photos-strip .scope-photo-remove { opacity: 1; } }
@media (max-width: 700px) {
.scope-photos-strip .scope-photo-wrap,
.scope-photos-strip .scope-photo-top, .scope-photos-strip .scope-photo-top-add { width: 100px; height: 100px; }
}
/* ── ">5 photos" collapse: first 4 + a "More →" card that opens the lightbox ── */
/* Keeps a photo-heavy Scope to a single row (the multi-row blob was slow to paint). */
.scope-photos-strip .scope-photo-more {
width: 140px; height: 140px; border-radius: 8px;
border: 1px solid var(--border); background: var(--surface-alt);
display: flex; flex-direction: column; align-items: center; justify-content: center;
gap: 4px; cursor: pointer; color: var(--text); padding: 0;
transition: border-color 0.2s, background 0.2s, color 0.2s;
}
.scope-photos-strip .scope-photo-more:hover { border-color: var(--orange); background: var(--orange-light); color: var(--orange); }
.scope-photos-strip .scope-photo-more-count { font-size: 24px; font-weight: 700; line-height: 1; }
.scope-photos-strip .scope-photo-more-label { display: inline-flex; align-items: center; gap: 3px; font-size: 13px; font-weight: 600; }
@media (max-width: 700px) {
.scope-photos-strip .scope-photo-more { width: 100px; height: 100px; }
.scope-photos-strip .scope-photo-more-count { font-size: 20px; }
}
/* ── Per-photo X on line-item thumbs (mirror of the baseline strip's remove-X) ── */
.scope-l2-photo-wrap { position: relative; display: inline-block; line-height: 0; }
.scope-l2-photo-remove {
position: absolute; top: 6px; right: 6px; width: 22px; height: 22px;
border-radius: 50%; background: rgba(0,0,0,0.78); color: #fff; border: none;
font-size: 16px; line-height: 1; cursor: pointer; padding: 0;
display: flex; align-items: center; justify-content: center;
opacity: 0; transition: opacity 0.15s, background 0.15s;
z-index: 2;
}
.scope-l2-photo-wrap:hover .scope-l2-photo-remove { opacity: 1; }
.scope-l2-photo-remove:hover { background: #000; }
@media (hover: none) { .scope-l2-photo-remove { opacity: 1; } }
/* ── Hover-to-reveal delete pill on a Scope line-item row ── */
/* Empty button body + CSS ::before glyph so the literal × can't corrupt the
harvested area_or_count cell value (pseudo-elements are excluded from textContent). */
.l2-table tbody tr { position: relative; }
/* Anchor the row-delete X to its host cell, not the (position:relative on
is unreliable cross-browser, which left the X floating mid-row). The
button lives in .scope-photo-cell when photos exist, else in the area cell —
which is :last-child only when there's no photo column, so this targets
exactly the no-photo rows and reserves space so the X clears the area text. */
.l2-table td.ta-right:last-child { position: relative; padding-right: 38px; }
.scope-row-delete {
position: absolute; top: 50%; right: 8px; transform: translateY(-50%);
width: 24px; height: 24px; border-radius: 50%;
background: var(--surface-alt); color: var(--muted); border: 1px solid var(--border);
opacity: 0; cursor: pointer; padding: 0; z-index: 3;
display: flex; align-items: center; justify-content: center;
transition: opacity 0.15s, background 0.15s, color 0.15s, border-color 0.15s;
}
.scope-row-delete::before { content: '\00d7'; font-size: 17px; line-height: 1; }
.l2-table tbody tr:hover .scope-row-delete { opacity: 1; }
.scope-row-delete:hover { background: var(--danger); color: #fff; border-color: var(--danger); }
@media (hover: none) { .scope-row-delete { opacity: 1; } }
.preview-item .pi-remove { position: absolute; top: 2px; right: 2px; width: 18px; height: 18px; border-radius: 50%;
background: rgba(0,0,0,0.6); color: #fff; border: none; font-size: 12px; cursor: pointer;
display: flex; align-items: center; justify-content: center; line-height: 1; }
/* ── Loading Screen (matches production exactly) ── */
.loading-screen { display: none; min-height: 70vh; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 40px 20px; }
.loading-screen.active { display: flex; }
.loading-brand { font-size: 28px; font-weight: 700; letter-spacing: -0.3px; margin-bottom: 8px; }
.loading-brand span { color: var(--orange); }
.loading-sub { font-size: 15px; color: var(--text-secondary); margin-bottom: 40px; }
.loading-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 28px; max-width: 520px; width: 100%; }
.step-list { display: flex; flex-direction: column; gap: 0; }
.step { display: flex; align-items: center; gap: 14px; padding: 16px 0; border-bottom: 1px solid var(--border-light); position: relative; }
.step:last-child { border-bottom: none; }
.step-indicator { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
font-size: 13px; font-weight: 600; color: var(--muted); border: 2px solid var(--border); flex-shrink: 0; transition: all 0.3s; }
.step.active .step-indicator { border-color: var(--orange); color: var(--orange); }
.step.done .step-indicator { border-color: var(--success); background: var(--success); color: #fff; }
.step.error .step-indicator { border-color: var(--danger); background: var(--danger); color: #fff; }
.step-text { flex: 1; text-align: left; }
.step-text .step-title { font-size: 14px; font-weight: 600; color: var(--text); }
.step-text .step-sub { font-size: 12px; color: var(--muted); margin-top: 2px; min-height: 16px; }
.progress-bar-wrap { height: 4px; background: var(--surface-container-high); border-radius: 2px; overflow: hidden; margin-top: 6px; display: none; }
.step.active .progress-bar-wrap { display: block; }
.progress-bar-inner { height: 100%; border-radius: 2px; transition: width 0.3s; }
.progress-bar-inner.real { background: var(--orange); }
.progress-bar-inner.shimmer { width: 100%; background: linear-gradient(90deg, var(--border) 25%, var(--orange-light) 50%, var(--border) 75%);
background-size: 200% 100%; animation: shimmer 1.5s infinite; }
@keyframes shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
.elapsed-timer { text-align: center; font-size: 13px; color: var(--muted); margin-top: 18px; font-variant-numeric: tabular-nums; }
.eta-display { text-align: center; font-size: 13px; color: var(--muted); margin-top: 4px; font-variant-numeric: tabular-nums; min-height: 18px; }
.loading-rotating-msg { font-size: 14px; color: var(--text-secondary); margin-top: 12px; min-height: 20px; font-style: italic; text-align: center; }
/* ── Clarifying Questions (inline in results) ── */
.clarify-section { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 32px 28px; max-width: 560px; width: 100%; margin: 0 auto; text-align: center; }
.clarify-section h3 { font-size: 22px; font-weight: 700; margin-bottom: 6px; }
.clarify-section .clarify-subheader { font-size: 14px; color: var(--text-secondary); margin-bottom: 28px; }
.clarify-section .clarify-progress { font-size: 12px; color: var(--muted); margin-bottom: 18px; text-transform: uppercase; letter-spacing: 0.5px; font-weight: 600; }
.clarify-section .clarify-ref { font-size: 12px; font-weight: 600; color: var(--orange); margin-bottom: 6px; }
.clarify-section .clarify-question { font-size: 16px; font-weight: 500; color: var(--text); margin-bottom: 18px; line-height: 1.5; text-align: left; }
.clarify-section .clarify-answer { width: 100%; padding: 12px 14px; border: 1px solid var(--border); border-radius: var(--radius-md);
font-family: inherit; font-size: 14px; color: var(--text); background: var(--surface); transition: border-color 0.2s; resize: vertical; min-height: 60px; }
.clarify-section .clarify-answer:focus { outline: none; border-color: var(--orange); }
.clarify-section .clarify-nav { display: flex; justify-content: space-between; align-items: center; margin-top: 24px; gap: 12px; }
.clarify-section .clarify-skip { padding: 10px 24px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface);
font-family: inherit; font-size: 14px; font-weight: 500; color: var(--text-secondary); cursor: pointer; transition: all 0.2s; }
.clarify-section .clarify-skip:hover { border-color: var(--orange); color: var(--orange); }
.clarify-section .clarify-next { padding: 10px 24px; border: none; border-radius: var(--radius-md); background: var(--orange);
color: #fff; font-family: inherit; font-size: 14px; font-weight: 600; cursor: pointer; transition: background 0.2s; }
.clarify-section .clarify-next:hover { background: var(--orange-hover); transform: translateY(-1px); }
/* ── L3 Section (scope results) — matches production exactly ── */
/* Task 4: production uses icon + ul with hover reveal × delete, outline-based focus */
.l3-section { margin-bottom: 24px; }
.l3-section h4 { font-size: 15px; font-weight: 600; margin-bottom: 10px; display: flex; align-items: center; gap: 8px; color: var(--text); }
.l3-section h4 svg { width: 18px; height: 18px; color: var(--orange); flex-shrink: 0; }
.l3-list { list-style: none; padding: 0; margin: 0; }
.l3-list li.l3-item { padding: 4px 0; border-bottom: 1px solid var(--border-light); font-size: 13px; line-height: 1.5; color: var(--text); display: flex; align-items: center; position: relative; }
.l3-list li.l3-item:last-child { border-bottom: none; }
.l3-list .l3-text { flex: 1; outline: 2px solid transparent; outline-offset: -2px; transition: outline-color 0.2s, background 0.2s; border-radius: 4px; line-height: 1.5; cursor: text; min-width: 0; padding: 8px 12px; }
.l3-list .l3-text:focus { outline: 2px solid var(--orange); outline-offset: -2px; background: var(--surface-alt); }
.l3-list .l3-delete { display: none; background: none; border: none; cursor: pointer; color: var(--muted); font-size: 18px; line-height: 1; padding: 2px 6px; border-radius: 4px; flex-shrink: 0; transition: color 0.15s, background 0.15s; margin-left: 6px; }
.l3-list .l3-delete:hover { color: var(--danger); background: #FEE2E2; }
.l3-list li.l3-item:hover .l3-delete { display: flex; align-items: center; justify-content: center; }
.l3-add { display: none; background: none; border: 1px dashed var(--border); cursor: pointer; color: var(--muted); font-size: 12px; padding: 4px 10px; border-radius: 6px; margin-top: 6px; transition: color 0.15s, border-color 0.15s, background 0.15s; align-items: center; gap: 4px; }
.l3-add:hover { color: var(--orange); border-color: var(--orange); background: rgba(249,115,22,0.04); }
.l3-add svg { vertical-align: middle; }
.l3-section:hover .l3-add { display: inline-flex; }
/* REN-259 cycle 2: L2 "Add line item" lives directly inside .scope-room-section
and must be visible WITHOUT a hover trigger (the cycle-1 reuse of .l3-add
inherited its display:none rule and was permanently invisible). Mirrors
.l3-add visual styling but with display:inline-flex baseline. Hidden on
posted/published baselines via the existing .baseline-posted rule below. */
.l2-add { display: inline-flex; background: none; border: 1px dashed var(--border); cursor: pointer; color: var(--muted); font-size: 12px; padding: 4px 10px; border-radius: 6px; margin-top: 8px; transition: color 0.15s, border-color 0.15s, background 0.15s; align-items: center; gap: 4px; }
.l2-add:hover { color: var(--orange); border-color: var(--orange); background: rgba(249,115,22,0.04); }
.l2-add svg { vertical-align: middle; }
.l3-text[placeholder]:empty::before { content: attr(placeholder); color: var(--muted); font-style: italic; pointer-events: none; }
/* ── REN-219: Section 4 Materials List — dedicated classes, RF-themed ── */
/* L4 reuses the scope-card shell but its X / Add buttons need their own
scoping because .l3-list / .l3-section hover rules don't apply here. */
.l4-card .l4-delete { background: #fff; border: 1px solid var(--border); cursor: pointer;
color: var(--muted); font-size: 16px; line-height: 1; width: 26px; height: 26px;
border-radius: 6px; display: inline-flex; align-items: center; justify-content: center;
transition: color 0.15s, border-color 0.15s, background 0.15s; }
.l4-card .l4-delete:hover { color: var(--orange); border-color: var(--orange); background: var(--orange-light); }
.l4-card .l4-add { display: inline-flex; align-items: center; gap: 6px;
background: #fff; border: 1px dashed var(--border); cursor: pointer;
color: var(--text-secondary); font-size: 13px; padding: 8px 14px; border-radius: 8px;
margin-top: 14px; transition: color 0.15s, border-color 0.15s, background 0.15s; }
.l4-card .l4-add:hover { color: var(--orange); border-color: var(--orange); background: var(--orange-light); }
.l4-card .l4-add svg { vertical-align: middle; }
.l4-card .l4-empty-hint { font-size: 12px; color: var(--text-secondary); margin-top: 8px; line-height: 1.5; }
/* REN-219 follow-up: dedicated styling for contenteditable cells so they
(1) span the full column width even when empty (block display, not inline)
(2) drop the global [contenteditable]::after pencil affordance — felt cluttered
(3) carry a cleaner orange focus ring consistent with the rest of the form. */
.l4-card .l4-table td { padding: 6px 8px; vertical-align: middle; }
.l4-card .l4-field {
display: block; width: 100%; min-height: 22px;
padding: 6px 10px; margin: 0;
border: 1px solid transparent; border-radius: 6px;
background: transparent; cursor: text; line-height: 1.4;
transition: background 0.15s, border-color 0.15s, box-shadow 0.15s;
}
.l4-card .l4-field:hover { background: var(--surface); border-color: var(--border); }
.l4-card .l4-field:focus {
outline: none; background: var(--surface);
border-color: var(--orange); box-shadow: 0 0 0 2px var(--orange-ring);
}
/* Kill the generic [contenteditable]::after pencil for L4 cells. */
.l4-card .l4-field::after,
.l4-card .l4-field:hover::after,
.l4-card .l4-field:focus::after { content: none !important; display: none !important; opacity: 0 !important; background: none !important; }
.inline-analyzer-results .scope-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 28px; margin-bottom: 16px; }
/* ── I1-I4: Cost Tracking Ledger ── */
.ledger-summary { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 16px 20px; margin-bottom: 16px; }
.ledger-summary-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-bottom: 12px; }
.ledger-summary-cell { text-align: center; padding: 10px 8px; background: var(--bg); border-radius: var(--radius-sm); }
.ledger-summary-label { font-size: 10px; font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: 0.05em; }
.ledger-summary-value { font-size: 18px; font-weight: 800; color: var(--text); margin-top: 4px; }
.ledger-summary-detail { display: flex; flex-wrap: wrap; gap: 12px 20px; font-size: 12px; color: var(--text-secondary); padding-top: 8px; border-top: 1px solid var(--border-light); }
.ledger-summary-detail span { white-space: nowrap; }
.ledger-summary-detail .pending-reimburse { color: var(--warning); font-weight: 600; }
.ledger-timeline { display: flex; flex-direction: column; gap: 10px; padding: 4px 0; }
.ledger-entry { display: flex; gap: 12px; max-width: 85%; }
.ledger-entry-left { align-self: flex-start; }
.ledger-entry-right { align-self: flex-end; flex-direction: row-reverse; }
.ledger-avatar { width: 32px; height: 32px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--surface); flex-shrink: 0; }
.ledger-avatar-contractor { background: var(--info); }
.ledger-avatar-investor { background: var(--orange); }
.ledger-bubble { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 12px 16px; min-width: 200px; position: relative; }
.ledger-entry-right .ledger-bubble { background: var(--orange-light); border-color: var(--orange); }
.ledger-bubble-header { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.ledger-badge { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; padding: 2px 8px; border-radius: 10px; }
.ledger-badge-payment { background: var(--success-light); color: var(--success); }
.ledger-badge-materials { background: var(--info-light); color: var(--info); }
.ledger-badge-equipment { background: var(--warning-light); color: var(--warning); }
.ledger-badge-permit { background: var(--warning-light); color: var(--warning); }
.ledger-badge-other { background: var(--bg); color: var(--text-secondary); }
.ledger-badge-reimbursement_confirmed { background: var(--success-light); color: var(--success); }
.ledger-badge-adjustment { background: var(--danger-light); color: var(--danger); }
.ledger-amount { font-size: 16px; font-weight: 800; color: var(--text); margin-left: auto; }
.ledger-amount-payment { color: var(--success); }
.ledger-description { font-size: 13px; color: var(--text-secondary); margin-bottom: 6px; line-height: 1.4; }
.ledger-receipt-thumb { display: block; width: 120px; height: 90px; object-fit: cover; border-radius: 8px; border: 1px solid var(--border); margin: 4px 0 8px; cursor: zoom-in; transition: box-shadow 0.15s var(--ease-out), transform 0.15s var(--ease-out); }
.ledger-receipt-thumb:hover { box-shadow: 0 4px 14px rgba(0,0,0,0.14); transform: scale(1.02); }
.ledger-receipt-thumb:focus-visible { outline: 2px solid var(--orange); outline-offset: 2px; }
.ledger-fin-chain { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 14px; }
.ledger-fin-step { display: flex; flex-direction: column; gap: 2px; min-width: 90px; }
.ledger-fin-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.4px; color: var(--muted); }
.ledger-fin-value { font-size: 16px; font-weight: 800; color: var(--text); }
.ledger-fin-arrow { color: var(--muted); font-size: 15px; flex-shrink: 0; }
#rf-receipt-lightbox { display: none; position: fixed; inset: 0; z-index: 10050; background: rgba(20, 16, 12, 0.82); align-items: center; justify-content: center; cursor: zoom-out; opacity: 0; transition: opacity 0.18s var(--ease-out); }
#rf-receipt-lightbox.open { opacity: 1; }
#rf-receipt-lightbox img { max-width: 92vw; max-height: 92vh; min-width: 240px; min-height: 180px; object-fit: contain; background: var(--surface); border-radius: 10px; box-shadow: 0 12px 40px rgba(0,0,0,0.45); }
.ledger-meta { font-size: 11px; color: var(--muted); }
.ledger-reimburse-tag { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 600; padding: 3px 10px; border-radius: 10px; margin-top: 6px; }
.ledger-reimburse-pending { background: var(--warning-light); color: var(--warning); border: 1px solid var(--warning); }
.ledger-reimburse-confirmed { background: var(--success-light); color: var(--success); border: 1px solid var(--success); }
.ledger-reimburse-btn { font-size: 11px; font-weight: 700; padding: 4px 12px; border-radius: 8px; border: 1px solid var(--success); background: var(--success-light); color: var(--success); cursor: pointer; margin-top: 6px; transition: background 0.15s var(--ease-out), color 0.15s var(--ease-out), transform 0.1s; }
.ledger-reimburse-btn:hover { background: var(--success); color: var(--surface); }
.ledger-reimburse-btn:active { transform: scale(0.97); }
.ledger-empty { padding: 40px 16px; text-align: center; color: var(--muted); font-size: 14px; }
.ledger-empty-title { font-size: 15px; color: var(--text); font-weight: 600; margin-bottom: 4px; }
.ledger-add-entry-bar { display: flex; justify-content: center; padding: 12px 0 4px; }
.ledger-reimburse-row { display: flex; align-items: center; gap: 8px; margin-top: 4px; padding: 6px 10px; background: var(--warning-light); border-radius: 8px; border: 1px dashed var(--warning); }
.ledger-reimburse-row label { font-size: 12px; color: var(--warning); cursor: pointer; user-select: none; }
.ledger-reimburse-row input[type="checkbox"] { accent-color: var(--orange); }
/* ── Phase 1: cost-tracker overhaul ── */
/* 4-card perspective grid */
.ledger-summary-grid-4 {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 10px;
margin-bottom: 12px;
}
@media (max-width: 720px) { .ledger-summary-grid-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.ledger-summary-grid-4 .ledger-summary-cell {
text-align: left;
padding: 12px 14px;
background: var(--bg);
border: 1px solid var(--border-light, var(--border));
border-radius: var(--radius-sm);
transition: border-color 160ms var(--ease-out), background-color 160ms var(--ease-out);
}
.ledger-summary-grid-4 .ledger-summary-cell:hover { border-color: var(--border); background: var(--surface); }
.ledger-summary-grid-4 .ledger-summary-label {
font-size: 10px;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.06em;
line-height: 1.3;
}
.ledger-summary-grid-4 .ledger-summary-value {
font-size: 20px;
font-weight: 800;
color: var(--text);
margin-top: 6px;
letter-spacing: -0.01em;
font-variant-numeric: tabular-nums;
}
.ledger-summary-sub { font-size: 12px; color: var(--muted); margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--border-light, var(--border)); }
.ledger-summary-sub strong { color: var(--text); font-weight: 700; font-variant-numeric: tabular-nums; }
/* Agreed labor total card — surface-native, slim accent */
.ledger-agreed-labor {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
padding: 14px 18px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius);
margin-bottom: 12px;
flex-wrap: wrap;
transition: border-color 200ms var(--ease-out), box-shadow 200ms var(--ease-out);
}
.ledger-agreed-labor:hover { border-color: var(--border); box-shadow: var(--shadow-sm); }
.ledger-agreed-labor-info { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ledger-agreed-labor-label {
font-size: 10px;
font-weight: 700;
color: var(--muted);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.ledger-agreed-labor-value {
font-size: 24px;
font-weight: 800;
color: var(--text);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
line-height: 1.1;
}
.ledger-agreed-labor-meta { font-size: 12px; color: var(--text-secondary); }
.ledger-agreed-labor-btn {
font-size: 12px;
font-weight: 700;
padding: 8px 16px;
border-radius: 8px;
border: 1px solid var(--border);
background: var(--surface);
color: var(--text);
cursor: pointer;
transition: border-color 160ms var(--ease-out), color 160ms var(--ease-out), background 160ms var(--ease-out), transform 160ms var(--ease-out);
font-family: inherit;
}
.ledger-agreed-labor-btn:hover { border-color: var(--orange); color: var(--orange); background: var(--orange-light); }
.ledger-agreed-labor-btn:active { transform: scale(0.97); }
/* Pending labor-total banner */
.ledger-pending-banner {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
padding: 10px 14px;
background: var(--warning-light);
border: 1px solid var(--warning);
border-radius: var(--radius-sm);
margin-top: 10px;
width: 100%;
flex-wrap: wrap;
font-size: 13px;
color: var(--warning);
line-height: 1.4;
}
.ledger-pending-banner strong { color: var(--warning); font-weight: 700; font-variant-numeric: tabular-nums; }
.ledger-pending-banner-actions { display: flex; gap: 8px; }
.ledger-pending-approve,
.ledger-pending-reject {
font-size: 12px;
font-weight: 700;
padding: 6px 14px;
border-radius: 8px;
cursor: pointer;
font-family: inherit;
transition: background 160ms var(--ease-out), border-color 160ms var(--ease-out), transform 160ms var(--ease-out);
}
.ledger-pending-approve { border: 1px solid var(--success); background: var(--success-light); color: var(--success); }
.ledger-pending-approve:hover { background: var(--success); color: var(--surface); }
.ledger-pending-reject { border: 1px solid var(--danger); background: var(--surface); color: var(--danger); }
.ledger-pending-reject:hover { background: var(--danger-light); }
.ledger-pending-approve:active,
.ledger-pending-reject:active { transform: scale(0.97); }
/* Ledger entry badges + voided */
.ledger-badge-labor { background: var(--info-light); color: var(--info); }
.ledger-badge-charge { background: var(--warning-light); color: var(--warning); }
.ledger-entry-voided { opacity: 0.55; }
.ledger-entry-voided .ledger-bubble { text-decoration: line-through; }
/* ── Job History feed ── */
.history-event-list { display: flex; flex-direction: column; gap: 8px; padding: 4px 0; }
.history-event {
display: flex;
gap: 12px;
padding: 14px 16px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
transition: border-color 160ms var(--ease-out), box-shadow 160ms var(--ease-out);
animation: historyEventIn 220ms var(--ease-out) both;
}
.history-event:hover { border-color: var(--border); box-shadow: var(--shadow-sm); }
.history-event-pending { background: var(--warning-light); border-color: var(--warning); }
.history-event-approved { background: var(--success-light); border-color: var(--success); }
.history-event-rejected { background: var(--danger-light); border-color: var(--danger); }
.history-event-icon {
width: 36px;
height: 36px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
font-size: 15px;
flex-shrink: 0;
background: var(--bg);
border: 1px solid var(--border);
}
.history-event-pending .history-event-icon { background: var(--surface); border-color: var(--warning); color: var(--warning); }
.history-event-approved .history-event-icon { background: var(--surface); border-color: var(--success); color: var(--success); }
.history-event-rejected .history-event-icon { background: var(--surface); border-color: var(--danger); color: var(--danger); }
.history-event-body { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.history-event-title { font-size: 13px; font-weight: 700; color: var(--text); letter-spacing: -0.005em; }
.history-event-detail { font-size: 13px; color: var(--text-secondary); line-height: 1.45; font-variant-numeric: tabular-nums; }
.history-event-detail strong { color: var(--text); font-weight: 700; }
.history-event-meta { font-size: 11px; color: var(--muted); margin-top: 2px; }
.history-event-actions { display: flex; gap: 8px; margin-top: 8px; flex-wrap: wrap; }
@keyframes historyEventIn {
from { opacity: 0; transform: translateY(4px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── Phase 2: Visual polish ── */
/* ledger-agreed-row: flex column wrapper for the agreed-labor card */
.ledger-agreed-row { display: flex; flex-direction: column; width: 100%; margin-bottom: 12px; }
/* Orange inset-shadow left accent strip on agreed-labor card */
.ledger-agreed-labor { box-shadow: inset 4px 0 0 var(--orange); }
.ledger-agreed-labor:hover { box-shadow: inset 4px 0 0 var(--orange), var(--shadow-sm); }
/* Owed-variant cell: inset left accent + warning-tinted value */
.ledger-summary-cell--owed { box-shadow: inset 3px 0 0 var(--orange); }
.ledger-summary-cell--owed .ledger-summary-value { color: var(--warning); }
/* Staggered entrance for 4-card summary cells */
@keyframes cellSlideIn {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
.ledger-summary-grid-4 .ledger-summary-cell {
animation: cellSlideIn 260ms var(--rf-ease-out) both;
}
.ledger-summary-grid-4 .ledger-summary-cell:nth-child(1) { animation-delay: 0ms; }
.ledger-summary-grid-4 .ledger-summary-cell:nth-child(2) { animation-delay: 50ms; }
.ledger-summary-grid-4 .ledger-summary-cell:nth-child(3) { animation-delay: 100ms; }
.ledger-summary-grid-4 .ledger-summary-cell:nth-child(4) { animation-delay: 150ms; }
/* History event staggered entrance */
.history-event:nth-child(1) { animation-delay: 0ms; }
.history-event:nth-child(2) { animation-delay: 35ms; }
.history-event:nth-child(3) { animation-delay: 70ms; }
.history-event:nth-child(4) { animation-delay: 105ms; }
.history-event:nth-child(5) { animation-delay: 140ms; }
.history-event:nth-child(6) { animation-delay: 175ms; }
.history-event:nth-child(7) { animation-delay: 210ms; }
.history-event:nth-child(8) { animation-delay: 245ms; }
/* History vertical connector line */
.history-event-list { position: relative; }
.history-event-list::before {
content: '';
position: absolute;
left: 35px;
top: 52px;
bottom: 36px;
width: 1px;
background: var(--border);
pointer-events: none;
z-index: 0;
}
.history-event { position: relative; z-index: 1; }
/* Larger history event icons (36 → 40px) */
.history-event-icon { width: 40px; height: 40px; font-size: 16px; }
/* Emil layer: spring press on add-entry buttons */
.ledger-add-entry-bar button:active,
.ledger-add-entry-bar .btn:active { transform: scale(0.97); }
/* L2 table — analyzer-style columns */
.l2-table-analyzer th:nth-child(1), .l2-table-analyzer td:nth-child(1) { width: 21%; }
.l2-table-analyzer th:nth-child(2), .l2-table-analyzer td:nth-child(2) { width: 39%; }
.l2-table-analyzer th:nth-child(3), .l2-table-analyzer td:nth-child(3) { width: 17%; }
/* Editable title focus */
#reportTitle[contenteditable="true"] { outline: none; border-radius: 4px; padding: 2px 4px; transition: box-shadow 0.2s ease; }
#reportTitle[contenteditable="true"]:focus { box-shadow: 0 0 0 2px var(--orange-ring); }
.gate-question {
font-size: clamp(24px, 3vw, 36px);
font-weight: 800;
letter-spacing: -0.02em;
color: var(--text);
margin-bottom: 56px;
}
.gate-cards {
display: flex;
gap: 24px;
justify-content: center;
flex-wrap: wrap;
max-width: 960px;
}
.gate-card {
display: flex;
flex-direction: column;
align-items: center;
gap: 14px;
padding: 44px 32px;
width: 280px;
background: var(--surface);
border: 2px solid var(--border);
border-radius: var(--radius);
cursor: pointer;
transition: all 0.25s ease;
font-family: inherit;
text-align: center;
}
.gate-card:hover {
border-color: var(--orange);
box-shadow: 0 8px 32px rgba(249,115,22,0.18);
transform: translateY(-4px);
}
.gate-card svg {
color: var(--orange);
stroke: var(--orange);
flex-shrink: 0;
}
.gate-card span {
font-size: 20px;
font-weight: 700;
color: var(--text);
}
.gate-card p {
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
margin: 0;
}
/* REN-154: persistent role selector — selected state */
.gate-card.selected {
border-color: var(--orange);
background: #FFF4EC;
box-shadow: 0 6px 24px rgba(249,115,22,0.18);
transform: translateY(-2px);
}
.gate-card.selected span {
font-weight: 800;
color: var(--text);
}
.gate-card.selected svg {
transform: scale(1.04);
}
/* ── Investor — Platform Deep Dive ── */
.platform-deep-section {
padding: 80px 40px;
background: var(--bg);
}
.platform-deep-inner { max-width: 1240px; margin: 0 auto; }
.platform-deep-inner > h2 {
font-size: 32px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 10px;
}
.platform-deep-sub { font-size: 15px; color: var(--text-secondary); margin-bottom: 48px; }
.platform-video-full {
width: 100%;
aspect-ratio: 16/9;
margin-top: 0;
}
/* ── Investor — Flips Section ── */
.flips-section { padding: 80px 40px; background: var(--surface-container-low); }
.flips-inner { max-width: 1100px; margin: 0 auto; }
.flips-header { margin-bottom: 40px; }
.flips-header h2 { font-size: 32px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 8px; }
.flips-header p { font-size: 15px; color: var(--text-secondary); }
/* ── Investor — Testimonial Shells ── */
.testimonials-section { padding: 80px 40px; background: var(--surface); }
.testimonials-inner { max-width: 1100px; margin: 0 auto; text-align: center; }
.testimonials-inner > h2 { font-size: 32px; font-weight: 800; margin-bottom: 8px; }
.testimonials-sub { font-size: 15px; color: var(--text-secondary); margin-bottom: 48px; }
.testimonial-shells-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
.testimonial-shell {
background: var(--bg);
border: 1px solid var(--border-light);
border-radius: var(--radius); padding: 24px;
display: flex; flex-direction: column; gap: 14px; text-align: left;
}
.testimonial-avatar-ph {
width: 48px; height: 48px; border-radius: 50%;
background: var(--surface-container-high);
}
.testimonial-lines { display: flex; flex-direction: column; gap: 8px; }
.t-line { height: 12px; border-radius: 6px; background: var(--surface-container-high); }
.t-long { width: 90%; }
.t-med { width: 70%; }
.t-short { width: 50%; }
.testimonial-name-ph { height: 12px; width: 110px; border-radius: 6px; background: var(--surface-container-high); margin-top: 6px; }
/* ── Bottom CTA (cream bg) ── */
.cta-cream {
text-align: center; padding: 80px 40px;
background: var(--surface-container-low);
}
.cta-cream h2 {
font-size: clamp(28px, 4vw, 44px);
font-weight: 800; letter-spacing: -0.02em;
margin-bottom: 12px; color: var(--text);
}
.cta-cream h2 em {
font-style: italic; color: var(--orange);
text-decoration: underline; text-decoration-color: var(--orange);
text-underline-offset: 4px;
}
.cta-cream p {
font-size: 16px; color: var(--text-secondary);
max-width: 520px; margin: 0 auto 32px; line-height: 1.6;
}
.cta-cream .btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
/* ── Simple Footer (REN-196: ONE solid bright-white bar) ── */
.footer-simple {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 40px;
padding: 24px 40px;
background: #FFFFFF;
flex-wrap: wrap;
}
.footer-logo-col {
display: flex;
align-items: center;
gap: 20px;
flex-shrink: 0;
}
.footer-links-row {
display: flex;
flex-wrap: wrap;
gap: 8px 32px;
align-items: flex-start;
padding-top: 4px;
}
.footer-links-row a {
font-size: 14px;
color: var(--text-secondary);
transition: color var(--transition);
}
.footer-links-row a:hover { color: var(--orange); }
.footer-bottom {
text-align: center; padding: 20px 40px;
font-size: 13px; color: var(--text-secondary);
background: #FFFFFF;
}
.cta-banner {
position: relative; width: 100%;
padding: 100px 40px; text-align: center;
overflow: hidden;
}
.cta-banner::before {
content: ''; position: absolute; inset: 0; z-index: 1;
background: linear-gradient(
180deg,
rgba(20,18,15,0.7) 0%,
rgba(20,18,15,0.55) 50%,
rgba(20,18,15,0.75) 100%
);
}
.cta-banner > * { position: relative; z-index: 2; }
.cta-banner > .cta-banner-bg {
position: absolute; inset: 0; z-index: 0;
}
.cta-banner-bg img {
width: 100%; height: 100%;
object-fit: cover; object-position: center;
}
.cta-banner h2 {
font-size: clamp(28px, 4vw, 42px);
font-weight: 800; color: #fff; letter-spacing: -1px;
margin-bottom: 12px;
text-shadow: 0 2px 16px rgba(0,0,0,0.15);
}
.cta-banner p {
font-size: 17px; color: rgba(255,255,255,0.85);
max-width: 520px; margin: 0 auto 32px; line-height: 1.6;
}
.cta-banner .btn-primary {
box-shadow: 0 4px 20px rgba(249,115,22,0.35);
}
/* ================================================================
MODERN ARTISAN — HOMEOWNER HERO (split layout — contractorHero page)
================================================================ */
.hero-split {
display: grid; grid-template-columns: 1fr 1fr; gap: 0;
min-height: 80vh; align-items: center;
padding: 0 0 0 clamp(24px,5vw,80px);
background: var(--bg); overflow: hidden;
}
.hero-split-text {
padding: 60px 0 60px 0;
max-width: 560px;
animation: fadeInUp 0.6s ease both;
}
.hero-split-text .hero-eyebrow {
display: inline-flex; align-items: center; gap: 8px;
background: var(--orange-light); color: var(--orange);
font-size: 12px; font-weight: 700; padding: 6px 16px;
border-radius: var(--radius-full); margin-bottom: 28px;
text-transform: uppercase; letter-spacing: 1px;
}
.hero-split-text h1 {
font-size: clamp(36px, 4.5vw, 56px);
font-weight: 800; letter-spacing: -0.02em; line-height: 1.05;
margin-bottom: 20px; color: var(--text);
}
.hero-split-text h1 .accent { color: var(--orange); }
.hero-split-text .hero-sub {
font-size: 16px; color: var(--text-secondary);
line-height: 1.7; margin-bottom: 32px; max-width: 480px;
}
.hero-split-text .hero-btns {
display: flex; gap: 14px; flex-wrap: wrap;
margin-bottom: 20px;
}
.hero-split-text .hero-links {
display: flex; flex-wrap: wrap; gap: 8px 16px;
font-size: 13px; color: var(--muted);
}
.hero-split-text .hero-links a {
color: var(--text-secondary); text-decoration: underline;
text-underline-offset: 2px; transition: color var(--transition);
}
.hero-split-text .hero-links a:hover { color: var(--orange); }
.hero-split-image {
position: relative; height: 100%; min-height: 500px;
overflow: hidden;
animation: fadeInUp 0.6s ease 0.15s both;
}
.hero-split-image img {
width: 100%; height: 100%; object-fit: cover;
object-position: center;
}
@media (max-width: 860px) {
.hero-split { grid-template-columns: 1fr; padding: 0 24px; }
.hero-split-text { padding: 40px 0; max-width: 100%; }
.hero-split-image { min-height: 320px; border-radius: var(--radius); overflow: hidden; margin-bottom: 24px; order: -1; }
}
/* ── Process Cards Row ── */
.process-section {
max-width: 1100px; margin: 0 auto; padding: 64px 40px;
}
.process-grid {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px;
}
.process-card {
background: var(--surface); border: none;
border-radius: var(--radius); padding: 28px;
transition: all 0.3s ease; box-shadow: var(--shadow-sm);
}
.process-card:hover { transform: translateY(-4px); box-shadow: var(--shadow-md); }
.process-icon {
width: 56px; height: 56px; border-radius: 14px;
display: flex; align-items: center; justify-content: center;
margin-bottom: 16px; font-size: 24px;
}
.process-icon.orange { background: var(--orange-light); color: var(--orange); }
.process-icon.sage { background: var(--tertiary-container); color: var(--tertiary); }
.process-icon.warm { background: #FDE68A; color: #92400E; }
.process-card h4 {
font-size: 16px; font-weight: 700; margin-bottom: 8px;
letter-spacing: -0.01em;
}
.process-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
@media (max-width: 700px) { .process-grid { grid-template-columns: 1fr; } }
/* ── Gallery Section ── */
/* ── contractorHero gallery (4-col image grid with overlay labels) ── */
#contractorHero .gallery-section {
max-width: 1100px; margin: 0 auto; padding: 64px 40px;
}
#contractorHero .gallery-header { text-align: center; margin-bottom: 40px; }
#contractorHero .gallery-header h2 {
font-size: clamp(28px, 3.5vw, 40px);
font-weight: 800; letter-spacing: -0.02em; margin-bottom: 10px;
}
#contractorHero .gallery-header p { font-size: 15px; color: var(--text-secondary); max-width: 520px; margin: 0 auto; }
#contractorHero .gallery-grid {
display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px;
}
#contractorHero .gallery-item {
position: relative; border-radius: var(--radius);
overflow: hidden; aspect-ratio: 4/3;
transition: transform 0.3s ease, box-shadow 0.3s ease;
}
#contractorHero .gallery-item:hover { transform: translateY(-3px); box-shadow: var(--shadow-lg); }
#contractorHero .gallery-item img { width: 100%; height: 100%; object-fit: cover; }
#contractorHero .gallery-item .gallery-label {
position: absolute; bottom: 0; left: 0; right: 0;
background: linear-gradient(transparent, rgba(0,0,0,0.65));
padding: 32px 14px 14px; color: #fff;
}
.gallery-label h5 { font-size: 14px; font-weight: 700; margin-bottom: 2px; }
.gallery-label span { font-size: 12px; opacity: 0.85; }
@media (max-width: 860px) { #contractorHero .gallery-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 500px) { #contractorHero .gallery-grid { grid-template-columns: 1fr; } }
/* ── How It Works — contractorHero only (numbered steps with images, 2-col grid) ── */
#contractorHero .hiw-step {
display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
align-items: center; margin-bottom: 48px;
}
#contractorHero .hiw-step:nth-child(even) { direction: rtl; }
#contractorHero .hiw-step:nth-child(even) > * { direction: ltr; }
#contractorHero .hiw-step-text { padding: 16px 0; }
.hiw-step-image {
border-radius: var(--radius); overflow: hidden;
aspect-ratio: 4/3; box-shadow: var(--shadow-md);
}
.hiw-step-image img { width: 100%; height: 100%; object-fit: cover; }
@media (max-width: 700px) {
#contractorHero .hiw-step { grid-template-columns: 1fr; gap: 20px; }
#contractorHero .hiw-step:nth-child(even) { direction: ltr; }
}
/* ── Multi-column Footer (contractorHero) ── */
.footer-columns {
max-width: 1100px; margin: 0 auto;
display: grid; grid-template-columns: 2fr repeat(3, 1fr); gap: 40px;
text-align: left; padding: 48px 40px;
background: var(--surface-container-low);
}
.footer-col h5 {
font-size: 13px; font-weight: 700; text-transform: uppercase;
letter-spacing: 1px; color: var(--text); margin-bottom: 16px;
}
.footer-col a {
display: block; font-size: 14px; color: var(--text-secondary);
padding: 3px 0; transition: color var(--transition);
}
.footer-col a:hover { color: var(--orange); }
.footer-bottom {
text-align: center; padding: 20px 40px;
font-size: 13px; color: var(--muted);
background: #FFFFFF;
}
@media (max-width: 700px) {
.footer-columns { grid-template-columns: 1fr 1fr; gap: 24px; }
}
/* ── Contractor Bento Grid ── */
.bento-section {
max-width: 1100px; margin: 0 auto; padding: 80px 40px;
}
.bento-header { margin-bottom: 48px; }
.bento-header h2 {
font-size: clamp(28px, 3.5vw, 40px);
font-weight: 800; letter-spacing: -0.02em;
}
.bento-header h2 .accent { color: var(--orange); }
.bento-header p { font-size: 15px; color: var(--text-secondary); margin-top: 8px; max-width: 560px; }
.bento-grid {
display: grid;
grid-template-columns: 1fr 1fr;
grid-template-rows: auto auto;
gap: 20px;
}
.bento-card {
background: var(--surface); border: none;
border-radius: var(--radius); padding: 32px;
box-shadow: var(--shadow-sm); transition: all 0.3s ease;
overflow: hidden; position: relative;
}
.bento-card:hover { box-shadow: var(--shadow-md); }
.bento-card h4 { font-size: 18px; font-weight: 700; margin-bottom: 10px; }
.bento-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.bento-card.featured {
background: var(--orange); color: #fff;
display: flex; flex-direction: column; justify-content: center;
}
.bento-card.featured h4 { color: #fff; }
.bento-card.featured p { color: rgba(255,255,255,0.85); }
.bento-badge {
display: inline-flex; padding: 6px 14px;
background: var(--tertiary-container); color: var(--tertiary);
font-size: 20px; font-weight: 800; border-radius: var(--radius-full);
margin-top: 12px;
}
@media (max-width: 700px) {
.bento-grid { grid-template-columns: 1fr; }
}
/* ── Contractor Projects Preview Cards ── */
.projects-preview {
max-width: 1100px; margin: 0 auto; padding: 48px 40px 80px;
}
.projects-preview-header {
display: flex; justify-content: space-between; align-items: flex-end;
margin-bottom: 32px;
}
.projects-preview-header h2 {
font-size: 28px; font-weight: 800; letter-spacing: -0.02em;
}
.projects-preview-header a { color: var(--orange); font-weight: 600; font-size: 14px; }
.preview-cards {
display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px;
}
.preview-card {
background: var(--surface); border: none;
border-radius: var(--radius); overflow: hidden;
box-shadow: var(--shadow-sm); transition: all 0.3s ease;
}
.preview-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
.preview-card-img {
width: 100%; height: 180px; object-fit: cover;
}
.preview-card-body { padding: 16px 20px; }
.preview-card-body h5 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.preview-card-meta {
font-size: 12px; color: var(--muted);
display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}
.preview-card-budget { font-size: 15px; font-weight: 700; color: var(--text); }
@media (max-width: 700px) { .preview-cards { grid-template-columns: 1fr; } }
/* ── Mastery / Values Section ── */
.mastery-section {
padding: 80px 40px; background: var(--surface-container-low);
}
.mastery-inner {
max-width: 1100px; margin: 0 auto;
display: grid; grid-template-columns: 1fr 1fr; gap: 48px;
align-items: center;
}
.mastery-image {
position: relative; border-radius: var(--radius);
overflow: hidden; aspect-ratio: 4/3;
}
.mastery-image img { width: 100%; height: 100%; object-fit: cover; }
.mastery-text h2 {
font-size: clamp(26px, 3vw, 36px);
font-weight: 800; letter-spacing: -0.02em; margin-bottom: 28px;
}
.mastery-text h2 .accent { color: var(--orange); }
.mastery-item { display: flex; gap: 14px; margin-bottom: 20px; }
.mastery-item-icon {
width: 44px; height: 44px; border-radius: 12px;
background: var(--orange-light); color: var(--orange);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
}
.mastery-item h4 { font-size: 16px; font-weight: 700; margin-bottom: 4px; }
.mastery-item p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
@media (max-width: 700px) {
.mastery-inner { grid-template-columns: 1fr; }
}
/* ── Orange CTA Banner ── */
.cta-orange {
margin: 0 40px 0; border-radius: var(--radius);
background: linear-gradient(135deg, var(--orange-hover), var(--orange));
text-align: center; padding: 60px 40px;
color: #fff;
}
.cta-orange h2 { font-size: 32px; font-weight: 800; margin-bottom: 10px; }
.cta-orange p { font-size: 15px; opacity: 0.9; max-width: 480px; margin: 0 auto 28px; }
.cta-orange .btn-row { display: flex; gap: 14px; justify-content: center; flex-wrap: wrap; }
.cta-orange .btn-white {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 14px 28px; border-radius: var(--radius-full);
background: #fff; color: var(--orange);
font-size: 15px; font-weight: 600; border: none;
cursor: pointer; transition: all var(--transition);
}
.cta-orange .btn-white:hover { transform: translateY(-1px); box-shadow: 0 4px 16px rgba(0,0,0,0.12); }
.cta-orange .btn-ghost-white {
display: inline-flex; align-items: center; justify-content: center; gap: 8px;
padding: 14px 28px; border-radius: var(--radius-full);
background: transparent; color: #fff;
font-size: 15px; font-weight: 600;
border: 1.5px solid rgba(255,255,255,0.4);
cursor: pointer; transition: all var(--transition);
}
.cta-orange .btn-ghost-white:hover { background: rgba(255,255,255,0.1); border-color: rgba(255,255,255,0.7); }
/* How It Works */
.how-section { max-width: 1000px; margin: 80px auto; padding: 0 40px; }
.section-eyebrow {
text-transform: uppercase; font-size: 12px; font-weight: 700;
letter-spacing: 2px; color: var(--orange); margin-bottom: 10px;
}
.section-title { font-size: 36px; font-weight: 800; letter-spacing: -0.02em; margin-bottom: 12px; color: var(--text); }
.section-sub { font-size: 16px; color: var(--text-secondary); margin-bottom: 48px; max-width: 520px; }
.steps-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; }
@media (max-width: 700px) { .steps-grid { grid-template-columns: 1fr; } }
.step-card {
background: var(--surface); border: none;
border-radius: var(--radius); padding: 32px;
transition: all 0.3s ease; position: relative; overflow: hidden;
box-shadow: var(--shadow-sm);
}
.step-card::before {
content: ''; position: absolute; top: 0; left: 0; right: 0; height: 3px;
background: transparent; transition: background 0.3s;
}
.step-card:hover::before { background: var(--orange); }
.step-card:hover { transform: translateY(-6px); box-shadow: var(--shadow-lg); }
.step-num {
width: 40px; height: 40px; border-radius: 12px;
background: var(--orange); color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 17px; margin-bottom: 20px;
}
.step-card h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.step-card p { color: var(--text-secondary); font-size: 14px; line-height: 1.7; }
/* Social proof */
.social-proof { max-width: 900px; margin: 0 auto 80px; padding: 0 40px; text-align: center; }
.proof-grid { display: flex; gap: 40px; justify-content: center; flex-wrap: wrap; margin-top: 32px; }
.proof-stat { text-align: center; }
.proof-num { font-size: 36px; font-weight: 800; color: var(--orange); }
.proof-label { font-size: 14px; color: var(--text-secondary); margin-top: 4px; }
.footer {
border-top: none; padding: 48px 40px;
background: var(--surface-container-low);
text-align: center; color: var(--text-secondary); font-size: 14px;
}
/* ================================================================
MODAL
================================================================ */
.modal-overlay {
position: fixed; inset: 0;
background: var(--overlay); backdrop-filter: blur(6px);
z-index: 1000; display: flex; align-items: center; justify-content: center;
padding: 20px; animation: fadeIn 0.2s ease;
}
.modal {
background: var(--surface); border: none;
border-radius: var(--radius); width: 100%; max-width: 420px;
padding: 36px; box-shadow: 0 24px 64px rgba(28,27,27,0.12);
animation: slideUp 0.35s ease;
}
.modal-wide { max-width: 800px; max-height: 90vh; overflow-y: auto; }
.modal--contractor { max-width: 560px; }
.modal-title { font-size: 24px; font-weight: 700; margin-bottom: 6px; }
.modal-sub { color: var(--text-secondary); font-size: 14px; margin-bottom: 24px; }
/* Contractor onboarding survey — 5-step progress bar */
.cstep-progress-wrap { margin: 0 0 22px 0; }
.cstep-progress-row {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 8px;
}
.cstep-progress-label {
font-size: 12px; font-weight: 700; color: var(--text-secondary);
letter-spacing: 0.04em; text-transform: uppercase;
}
.cstep-progress-count {
font-size: 12px; font-weight: 600; color: var(--muted);
}
.cstep-progress-bar {
width: 100%; height: 6px; background: #F1ECE4;
border-radius: 999px; overflow: hidden;
}
.cstep-progress-fill {
height: 100%; background: var(--orange);
border-radius: 999px;
transition: width 0.35s ease;
}
.contractor-survey-step { animation: fadeIn 0.25s ease; }
.cstep-nav { display: flex; gap: 10px; margin-top: 8px; }
.cstep-nav .btn { flex: 1; }
.cstep-field-error {
font-size: 12px; color: var(--danger); margin-top: 4px; display: none;
}
.cstep-field-error.show { display: block; }
/* Step 3 — Specialty checkbox grid */
.cstep-specialty-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
margin-bottom: 8px;
}
@media (max-width: 600px) {
.cstep-specialty-grid { grid-template-columns: 1fr; }
}
.cstep-specialty-card {
display: flex;
align-items: center;
gap: 10px;
padding: 12px 14px;
border: 2px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
cursor: pointer;
transition: all var(--transition);
font-size: 13px;
font-weight: 600;
color: var(--text);
user-select: none;
min-height: 48px;
}
.cstep-specialty-card:hover {
border-color: var(--orange);
background: var(--orange-light);
}
.cstep-specialty-card input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--orange);
flex-shrink: 0;
margin: 0;
cursor: pointer;
}
.cstep-specialty-card.checked {
border-color: var(--orange);
background: var(--orange-light);
box-shadow: 0 1px 4px rgba(249,115,22,0.10);
}
/* Step 4 — License row + Step 5 — Insurance toggle */
.cstep-license-row {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 10px;
}
@media (max-width: 600px) {
.cstep-license-row { grid-template-columns: 1fr; }
}
.cstep-attest-card {
display: flex;
align-items: flex-start;
gap: 12px;
padding: 14px 16px;
background: var(--surface-alt);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
margin-top: 8px;
margin-bottom: 16px;
}
.cstep-attest-card input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--orange);
margin: 2px 0 0 0;
flex-shrink: 0;
cursor: pointer;
}
.cstep-attest-card label {
font-size: 12px;
line-height: 1.55;
color: var(--text-secondary);
cursor: pointer;
}
.cstep-insurance-item {
border: 2px solid var(--border);
border-radius: var(--radius-sm);
padding: 14px 16px;
margin-bottom: 10px;
transition: all var(--transition);
background: var(--surface);
}
.cstep-insurance-item.checked {
border-color: var(--orange);
background: var(--orange-light);
}
.cstep-insurance-row {
display: flex;
align-items: center;
gap: 10px;
cursor: pointer;
font-size: 14px;
font-weight: 600;
color: var(--text);
user-select: none;
}
.cstep-insurance-row input[type="checkbox"] {
width: 18px;
height: 18px;
accent-color: var(--orange);
cursor: pointer;
}
.cstep-insurance-policy {
display: none;
margin-top: 10px;
}
.cstep-insurance-item.checked .cstep-insurance-policy {
display: block;
}
.cstep-submit-error {
display: none;
background: #FEF2F2;
border: 1px solid #FECACA;
color: #991B1B;
padding: 10px 14px;
border-radius: var(--radius-sm);
font-size: 13px;
font-weight: 500;
margin-bottom: 14px;
}
.cstep-submit-error.show { display: block; }
.tabs { display: flex; border-bottom: 1px solid var(--border); margin-bottom: 24px; }
.tab {
flex: 1; text-align: center; padding: 12px; font-weight: 600; font-size: 14px;
cursor: pointer; color: var(--muted); border-bottom: 2px solid transparent;
transition: all var(--transition);
}
.tab:hover { color: var(--text-secondary); }
.tab.active { color: var(--text); border-bottom-color: var(--orange); }
/* Onboarding Role Selection Cards */
.onboarding-role-cards {
display: flex; flex-direction: column; gap: 12px; margin-bottom: 20px;
}
.onboarding-role-card {
display: flex; align-items: center; gap: 14px;
padding: 16px 18px; border-radius: var(--radius-md);
border: 2px solid var(--border);
background: var(--surface);
cursor: pointer; transition: all var(--transition);
}
.onboarding-role-card:hover {
border-color: var(--orange); background: var(--orange-light);
box-shadow: 0 2px 12px rgba(249,115,22,0.08);
}
.onboarding-role-card:active {
transform: scale(0.985);
}
.onboarding-role-card:focus-visible {
outline: 2px solid var(--orange); outline-offset: 2px;
}
.onboarding-role-card.selected {
border-color: var(--orange); background: var(--orange-light);
box-shadow: 0 0 0 3px var(--orange-ring);
}
.onboarding-role-icon {
font-size: 28px; flex-shrink: 0; width: 44px; height: 44px;
display: flex; align-items: center; justify-content: center;
background: var(--surface-alt); border-radius: var(--radius-sm);
}
.onboarding-role-card.selected .onboarding-role-icon {
background: rgba(249,115,22,0.12);
}
.onboarding-role-label {
font-size: 15px; font-weight: 700; color: var(--text); line-height: 1.3;
}
.onboarding-role-desc {
font-size: 13px; color: var(--text-secondary); line-height: 1.4; margin-top: 2px;
}
/* Investor upgrade button */
.investor-upgrade-card {
display: flex; align-items: center; gap: 14px;
padding: 16px 20px; border-radius: var(--radius-md);
border: 1.5px dashed var(--orange);
background: var(--orange-light);
cursor: pointer; transition: all var(--transition);
margin-top: 20px;
}
.investor-upgrade-card:hover {
background: #FFF0E3; border-style: solid;
box-shadow: var(--shadow-sm);
}
.investor-upgrade-card:active {
transform: scale(0.98);
}
.form-group { margin-bottom: 20px; }
.form-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-secondary); margin-bottom: 6px; }
.form-label .optional { font-weight: 400; color: var(--muted); text-transform: none; letter-spacing: 0; }
.form-input {
width: 100%; background: var(--surface-alt); border: 1.5px solid var(--border);
color: var(--text); padding: 12px 14px; border-radius: var(--radius-sm);
font-family: inherit; font-size: 14px; transition: all var(--transition);
}
.form-input:focus { outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-ring); }
.form-input::placeholder { color: var(--muted); opacity: 0.5; }
select.form-input {
appearance: none; cursor: pointer;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='%236B6B6B' viewBox='0 0 16 16'%3E%3Cpath d='M4.5 6l3.5 4 3.5-4z'/%3E%3C/svg%3E");
background-repeat: no-repeat; background-position: right 12px center; padding-right: 36px;
}
textarea.form-input { resize: vertical; min-height: 100px; line-height: 1.6; }
.form-error { background: #FEF2F2; border: 1px solid #FECACA; color: var(--danger); border-radius: var(--radius-sm); padding: 10px 14px; font-size: 13px; margin-bottom: 16px; display: none; }
.form-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 20px; margin-bottom: 20px; }
.form-footer { display: flex; justify-content: flex-end; gap: 10px; margin-top: 24px; }
.form-divider { text-align: center; margin-top: 20px; font-size: 14px; color: var(--text-secondary); }
.form-divider a { color: var(--orange); font-weight: 600; }
.form-divider a:hover { text-decoration: underline; }
.checkbox-label { display: flex; align-items: center; gap: 10px; font-size: 13px; font-weight: 400; color: var(--text); cursor: pointer; }
.checkbox-label input[type="checkbox"] { width: auto; accent-color: var(--orange); }
/* ================================================================
HOMEOWNER DASHBOARD
================================================================ */
.dashboard { max-width: 1100px; margin: 0 auto; padding: 40px; }
.step-progress { display: flex; gap: 6px; margin-bottom: 36px; }
.step-dot { height: 10px; flex: 1; border-radius: 5px; background: var(--border); transition: background 0.4s ease; }
.step-dot.active { background: var(--orange); }
.step-dot.done { background: var(--success); }
.form-container { background: var(--surface); border: none; border-radius: var(--radius); padding: 40px; box-shadow: var(--shadow-md); }
.form-step { display: none; opacity: 0; transform: translateX(30px); transition: opacity 0.35s ease, transform 0.35s ease; }
.form-step.active { display: block; opacity: 1; transform: translateX(0); animation: none; }
.form-step.exiting { opacity: 0; transform: translateX(-30px); }
/* Survey progress bar */
.survey-progress { display: flex; align-items: center; gap: 8px; margin-bottom: 32px; }
.survey-progress-bar { flex: 1; height: 4px; background: var(--border); border-radius: 2px; overflow: hidden; }
.survey-progress-fill { height: 100%; background: var(--orange); border-radius: 2px; transition: width 0.4s ease; }
.survey-step-label { font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
/* Budget input formatting */
.budget-input-wrap { position: relative; }
.budget-input-wrap input { padding-left: 20px; font-size: 20px; font-weight: 700; letter-spacing: 0.5px; }
/* Quality slider smooth */
.quality-slider-wrap { padding: 8px 0; }
.quality-slider-wrap input[type="range"] { -webkit-appearance: none; width: 100%; height: 8px; border-radius: 4px; background: linear-gradient(to right, #E8E2DA, var(--orange)); outline: none; cursor: pointer; }
.quality-slider-wrap input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--orange); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(249,115,22,0.35); cursor: pointer; transition: transform 0.15s ease; }
.quality-slider-wrap input[type="range"]::-webkit-slider-thumb:hover { transform: scale(1.15); }
.quality-slider-wrap input[type="range"]::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--orange); border: 3px solid #fff; box-shadow: 0 2px 8px rgba(249,115,22,0.35); cursor: pointer; }
/* Radio card style */
.radio-card { display: flex; align-items: flex-start; gap: 14px; padding: 18px 20px; background: var(--surface-alt); border: 1.5px solid var(--border); border-radius: var(--radius-sm); cursor: pointer; transition: all var(--transition); }
.radio-card:hover { border-color: var(--orange); background: var(--orange-light); }
.radio-card.selected { border-color: var(--orange); background: var(--orange-light); }
.radio-card input[type="radio"] { accent-color: var(--orange); margin-top: 2px; flex-shrink: 0; }
.radio-card-label { font-size: 15px; font-weight: 600; color: var(--text); }
.radio-card-desc { font-size: 13px; color: var(--text-secondary); margin-top: 2px; }
/* Survey step centered layout */
.survey-step-content { max-width: 560px; margin: 0 auto; }
.survey-step-question { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.survey-step-hint { color: var(--text-secondary); font-size: 15px; margin-bottom: 28px; }
.step-heading { font-size: 24px; font-weight: 700; margin-bottom: 6px; }
.step-sub { color: var(--text-secondary); font-size: 15px; margin-bottom: 28px; }
.checkbox-grid {
background: var(--surface-alt); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 16px;
display: grid; grid-template-columns: 1fr 1fr; gap: 10px;
}
@media (max-width: 500px) { .checkbox-grid { grid-template-columns: 1fr; } }
.type-checkbox { display: flex; align-items: center; gap: 8px; font-size: 14px; color: var(--text); cursor: pointer; }
.type-checkbox input { width: auto; accent-color: var(--orange); }
.upload-zone {
border: 2px dashed var(--border); border-radius: var(--radius-sm);
padding: 32px; text-align: center; cursor: pointer;
transition: all var(--transition); margin-bottom: 12px; position: relative;
background: var(--surface-alt);
}
.upload-zone:hover { border-color: var(--orange); background: var(--orange-light); }
.upload-zone.uploaded { border-color: var(--success); border-style: solid; }
.upload-zone input[type="file"] { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.upload-icon { font-size: 32px; margin-bottom: 8px; opacity: 0.6; color: var(--text-secondary); display: flex; align-items: center; justify-content: center; }
.upload-label { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.upload-hint { font-size: 12px; color: var(--muted); }
.upload-tip {
background: var(--warning-light); border: 1px solid #FDE68A;
border-radius: var(--radius-sm); padding: 10px 14px;
font-size: 13px; color: var(--warning); margin-bottom: 20px;
display: flex; align-items: center; gap: 8px;
}
.mic-btn {
display: inline-flex; align-items: center; gap: 8px;
padding: 10px 20px; border-radius: var(--radius-sm);
background: var(--surface-alt); border: 1.5px solid var(--border);
color: var(--text); font-size: 14px; font-weight: 600;
cursor: pointer; transition: all var(--transition); margin-bottom: 8px;
}
.mic-btn:hover { border-color: var(--orange); color: var(--orange); }
.mic-btn.recording { background: #FEF2F2; border-color: #DC2626; color: #DC2626; animation: pulse 1.5s infinite; }
.mic-status { font-size: 12px; color: var(--muted); margin-bottom: 24px; }
.video-preview {
margin-top: 12px; border-radius: var(--radius-sm); overflow: hidden;
background: var(--surface-alt); border: 1px solid var(--border);
max-width: 320px; display: none;
}
.video-preview video { width: 100%; max-height: 180px; object-fit: cover; }
.scope-fee-notice {
background: var(--orange-light); border: 1px solid rgba(249,115,22,0.25);
border-radius: var(--radius-sm); padding: 12px 16px; margin-bottom: 20px;
font-size: 14px; color: var(--text); display: flex; align-items: center; gap: 10px;
}
.scope-fee-notice strong { color: var(--orange); }
/* ================================================================
SCOPE REPORT (Homeowner view)
================================================================ */
.scope-card {
background: var(--surface); border: none;
border-radius: var(--radius); padding: 32px; margin-bottom: 24px;
box-shadow: var(--shadow-md);
}
.scope-header { display: flex; align-items: center; gap: 12px; margin-bottom: 6px; }
.scope-header h3 { font-size: 20px; font-weight: 700; }
.scope-badge {
background: var(--orange-light); color: var(--orange);
font-size: 11px; font-weight: 700; padding: 3px 10px;
border-radius: 4px; text-transform: uppercase; letter-spacing: 0.5px;
border: 1px solid rgba(249,115,22,0.2);
}
.scope-meta { color: var(--text-secondary); font-size: 13px; margin-bottom: 16px; }
.scope-overview { font-size: 15px; line-height: 1.7; margin-bottom: 16px; }
.scope-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.chip { background: var(--surface-container-low); border: none; border-radius: var(--radius-full); padding: 6px 14px; font-size: 13px; color: var(--text-secondary); }
.scope-toggle {
color: var(--orange); font-weight: 600; font-size: 14px;
cursor: pointer; display: inline-flex; align-items: center; gap: 6px;
margin-bottom: 16px; padding: 6px 0; transition: opacity var(--transition);
}
.scope-toggle:hover { opacity: 0.8; }
.scope-table-wrap { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
/* 3-column L2 layout: Task (35%), Notes (50%), Area/ct (15%) */
.l2-table th:nth-child(1), .l2-table td:nth-child(1) { width: 21%; }
.l2-table th:nth-child(2), .l2-table td:nth-child(2) { width: 39%; font-size: 15px; line-height: 1.5; }
.l2-table th:nth-child(3), .l2-table td:nth-child(3) { width: 17%; white-space: nowrap; text-align: right; }
.l2-table td { font-size: 15px; }
.l2-photo-thumb { width: 140px; height: 140px; border-radius: 8px; object-fit: cover; }
thead th {
text-align: left; color: var(--text-secondary); font-weight: 600;
padding: 10px 14px; border-bottom: 2px solid var(--border);
font-size: 12px; text-transform: uppercase; letter-spacing: 0.5px;
}
tbody tr { transition: background var(--transition); }
tbody tr:hover { background: var(--surface-alt); }
tbody td { padding: 14px; border-bottom: 1px solid var(--border-light); color: var(--text-secondary); }
tbody td:first-child { color: var(--text); font-weight: 500; }
tfoot td { padding: 14px; font-weight: 700; font-size: 15px; }
.l3-section { margin-bottom: 28px; }
.l3-section h4 { font-size: 17px; font-weight: 700; margin-bottom: 10px; color: var(--text); }
.l3-section p { font-size: 14px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 10px; }
.l3-section ul { padding-left: 20px; list-style: disc; }
.l3-section li { font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; line-height: 1.6; }
.l3-section li strong { color: var(--text); }
/* Photo placeholders in scope */
.scope-photos { display: flex; gap: 8px; margin: 16px 0; overflow: hidden; border-radius: var(--radius-sm); }
.scope-photo-placeholder {
flex: 1; max-width: 200px; height: 100px; background: var(--surface-alt); border: 1px solid var(--border-light);
border-radius: 6px; display: flex; align-items: center; justify-content: center;
font-size: 11px; color: var(--muted);
}
/* ================================================================
CONTRACTOR PORTAL
================================================================ */
.contractor-page { max-width: 1200px; margin: 0 auto; padding: 40px; }
.contractor-header { margin-bottom: 32px; }
.contractor-header h2 { font-size: 30px; font-weight: 800; letter-spacing: -0.5px; margin-bottom: 6px; }
.contractor-sub { color: var(--text-secondary); font-size: 15px; }
.filter-bar { display: flex; gap: 8px; margin-bottom: 28px; flex-wrap: wrap; }
.filter-pill {
background: var(--surface); border: 1.5px solid var(--border);
border-radius: 24px; padding: 8px 18px;
font-size: 14px; font-weight: 600; color: var(--text-secondary);
cursor: pointer; transition: all var(--transition);
}
.filter-pill:hover { border-color: var(--orange); color: var(--orange); }
.filter-pill.active { background: var(--orange); color: #fff; border-color: var(--orange); }
/* Filter dropdown panel */
/* Filter chips — always-visible, Amazon-style */
.filter-chip {
display: inline-flex; align-items: center; gap: 4px;
background: var(--surface); border: 1.5px solid var(--border);
border-radius: 20px; padding: 5px 14px;
font-size: 12px; font-weight: 600; color: var(--text-secondary);
cursor: pointer; transition: all 0.15s ease; font-family: inherit;
white-space: nowrap;
}
.filter-chip:hover { border-color: var(--orange); color: var(--orange); }
.filter-chip.active {
background: var(--orange); border-color: var(--orange);
color: #fff;
}
.filter-chip.active:hover {
background: #e8660e; border-color: #e8660e; color: #fff;
}
/* K1: Filter sidebar responsive hide */
@media (max-width: 900px) {
#filterSidebar { display: none !important; }
}
.job-grid { display: flex; flex-direction: column; gap: 14px; max-width: 1650px; }
@media (max-width: 640px) { .upload-grid-3col { grid-template-columns: 1fr !important; } }
/* ── REN-260: mobile direct-scan video block ─────────────────────────────
Mobile cell-data uploads of full-resolution video fail ~50% of the time
(single PUT, no chunking, no resume). Hide the video uploader at ≤860px
and replace with messaging that points users to either a desktop browser
or the upcoming iOS app. Photo upload still works on mobile, and the QR
phone-scan flow (mobile.html with session_id) is a separate file that
does NOT use these classes, so it is unaffected. */
.mobile-video-block-fallback { display: none; }
@media (max-width: 860px) {
/* REN-260 cycle 3 / REN-400: genuine responsive layout — collapse both parent
grids to single column at ≤860px so the remaining photo zones stack vertically
instead of leaving an empty third column. This is a pure width concern and
stays width-based. Hero `.upload-grid` (line 1294) only has a 3-col rule with
no mobile override; survey `.upload-grid-3col` (line 2770) only collapses at
≤640px so 641-860 was still 3-col. Extend single-column up to 860px on both.
`.upload-grid-3col`'s inline style on the survey wrapper requires `!important`. */
.inline-analyzer .upload-grid { grid-template-columns: 1fr; }
.upload-grid-3col { grid-template-columns: 1fr !important; }
}
/* REN-400: the video *block* itself keys off the UA/touch signal (rf-ua-mobile),
NOT viewport width — narrowing a desktop window must not hide the uploader. */
html.rf-ua-mobile .video-upload-block { display: none !important; }
html.rf-ua-mobile .mobile-video-block-fallback {
display: block;
/* `1 / -1` is still correct in single-column mode — equates to col 1 → col 2
which is the full row. Kept for resilience if the parent grid ever changes. */
grid-column: 1 / -1;
padding: 20px 18px;
border: 1px dashed var(--border);
border-radius: 12px;
background: var(--surface);
text-align: center;
}
html.rf-ua-mobile .mobile-video-block-fallback .mvb-heading {
font-weight: 700;
font-size: 14px;
margin-bottom: 6px;
color: var(--text);
letter-spacing: -0.01em;
}
html.rf-ua-mobile .mobile-video-block-fallback .mvb-body {
font-size: 13px;
color: var(--text-secondary);
line-height: 1.5;
}
/* ── REN-283: full project-scan block on mobile ──────────────────────
Even with REN-260 hiding video upload, mobile users could still proceed
through the scan with photos + text description. The resulting baseline
is poor quality and "more likely to confuse people or sell it short".
At ≤860px, hide the entire project-scan upload step (zones, video
preview, Next button) and replace with a 3-step explainer card pointing
the user to a computer. Investor blank-template path (REN-242) stays
visible since it doesn't require media upload. Selectors are scoped to
#hero-step-1 + #ho-step-1 so post-scan surfaces are unaffected. */
.mobile-project-scan-block { display: none; }
/* REN-400: gate the full project-scan block on the UA/touch signal
(rf-ua-mobile), NOT viewport width. A desktop user who narrows their window
below 860px must keep the full scan UI — only real phones/tablets get the
"use a computer" explainer. */
html.rf-ua-mobile #hero-step-1 .upload-grid,
html.rf-ua-mobile #hero-step-1 > .survey-step-content > .form-footer,
/* Survey scan (homeowner / investor / contractor-scanner new-scan). */
html.rf-ua-mobile #ho-step-1 .upload-grid-3col,
html.rf-ua-mobile #ho-step-1 .video-preview,
html.rf-ua-mobile #ho-step-1 > .survey-step-content > .form-footer {
display: none !important;
}
html.rf-ua-mobile .mobile-project-scan-block {
display: block;
padding: 24px 22px;
margin-top: 12px;
border: 1px dashed var(--border);
border-radius: 12px;
background: var(--surface);
}
html.rf-ua-mobile .mobile-project-scan-block .mpsb-heading {
font-weight: 700;
font-size: 16px;
margin-bottom: 14px;
color: var(--text);
letter-spacing: -0.01em;
text-align: center;
}
html.rf-ua-mobile .mobile-project-scan-block .mpsb-steps {
margin: 0;
padding-left: 22px;
font-size: 14px;
color: var(--text-secondary);
line-height: 1.6;
}
html.rf-ua-mobile .mobile-project-scan-block .mpsb-steps li {
margin-bottom: 8px;
}
html.rf-ua-mobile .mobile-project-scan-block .mpsb-steps li:last-child {
margin-bottom: 0;
}
.job-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--rf-r-md, 12px); overflow: hidden;
transition: box-shadow 200ms var(--ease-out), transform 160ms var(--ease-out);
position: relative; cursor: pointer;
display: flex; flex-direction: column;
box-shadow: var(--rf-shadow-card);
}
.job-card:hover { box-shadow: var(--shadow-md); transform: translateY(-1px); }
.job-card:active { transform: scale(0.99); }
.job-card-inner {
display: flex; gap: 20px; padding: 24px; flex: 1;
}
@media (max-width: 740px) { .job-card-inner { flex-direction: column; } }
.job-card-photos {
display: flex; flex-direction: column; gap: 6px; flex-shrink: 0; width: 200px;
}
@media (max-width: 740px) { .job-card-photos { width: 100%; flex-direction: row; } }
.job-card-photo-lg {
width: 100%; height: 120px; background: var(--surface-alt); border: 1px solid var(--border-light);
border-radius: 8px; display: flex; align-items: center; justify-content: center;
font-size: 11px; color: var(--muted);
}
.job-card-photo-row { display: flex; gap: 6px; }
.job-card-photo-sm {
flex: 1; height: 56px; background: var(--surface-alt); border: 1px solid var(--border-light);
border-radius: 6px; display: flex; align-items: center; justify-content: center;
font-size: 10px; color: var(--muted);
}
.job-card-body { flex: 1; min-width: 0; }
.job-card-top { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.category-badge { font-size: 11px; font-weight: 700; padding: 3px 9px; border-radius: 6px; text-transform: uppercase; letter-spacing: 0.4px; }
/* Every trade has its own distinct color — no two share the same hue */
.cat-kitchen { background: rgba(249,115,22,0.10); color: #C2550A; } /* orange */
.cat-bathroom { background: rgba(107,153,112,0.14); color: #3B5F3F; } /* sage */
.cat-flooring { background: rgba(124,58,237,0.10); color: #6D28D9; } /* violet */
.cat-painting { background: rgba(225,29,72,0.10); color: #BE123C; } /* rose */
.cat-deck { background: rgba(217,119,6,0.10); color: #92400E; } /* amber */
.cat-roofing { background: rgba(2,132,199,0.10); color: #0369A1; } /* sky */
.cat-hvac { background: rgba(194,65,12,0.10); color: #9A3412; } /* burnt orange */
.cat-electrical { background: rgba(79,70,229,0.10); color: #3730A3; } /* indigo */
.cat-plumbing { background: rgba(8,145,178,0.10); color: #0E7490; } /* teal */
.cat-windows { background: rgba(71,85,105,0.10); color: #334155; } /* slate */
.cat-siding { background: rgba(120,113,108,0.10); color: #57534E; } /* stone */
.cat-landscaping { background: rgba(77,124,15,0.12); color: #3F6212; } /* lime */
.cat-basement { background: rgba(146,64,14,0.10); color: #7C2D12; } /* brown */
.cat-garage { background: rgba(55,65,81,0.10); color: #1F2937; } /* charcoal */
.cat-drywall { background: rgba(219,39,119,0.10); color: #9D174D; } /* pink */
.cat-masonry { background: rgba(87,83,78,0.10); color: #44403C; } /* warm gray */
.cat-carpentry { background: rgba(180,83,9,0.10); color: #92400E; } /* wood */
.cat-demo { background: rgba(220,38,38,0.10); color: #B91C1C; } /* red */
.cat-multi { background: rgba(180,83,9,0.10); color: #92400E; } /* multi-trade */
.cat-other { background: var(--surface-alt); color: var(--text-secondary); }
.badge-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.badge-overflow { font-size: 11px; font-weight: 700; color: var(--text-secondary); padding: 4px 8px; background: var(--surface-alt); border-radius: 6px; }
.job-time { font-size: 12px; color: var(--muted); }
.job-budget { font-size: 22px; font-weight: 800; color: var(--orange); margin-bottom: 6px; }
.job-overview { font-size: 14px; line-height: 1.65; color: var(--text); margin-bottom: 12px; }
.job-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 0; }
.job-chip { background: var(--surface-alt); border: 1px solid var(--border-light); border-radius: 20px; padding: 4px 12px; font-size: 12px; color: var(--text-secondary); }
.job-bids-inline {
font-size: 13px; color: var(--text-secondary); margin-top: 10px;
display: flex; align-items: center; gap: 10px;
}
.job-bids-inline .sep { width: 4px; height: 4px; border-radius: 50%; background: var(--border); }
.job-card-footer {
display: flex; justify-content: space-between; align-items: center;
padding: 14px 24px; border-top: none;
background: var(--surface-container-low);
}
.job-bids { font-size: 13px; color: var(--text-secondary); }
/* Already-bid overlay on job cards */
.job-bid-badge {
position: absolute; top: 12px; right: 12px; z-index: 10;
background: var(--success-light); color: var(--success);
border: 1px solid #BBF7D0; border-radius: 6px;
padding: 4px 10px; font-size: 11px; font-weight: 700;
display: inline-flex; align-items: center; gap: 4px;
text-transform: uppercase; letter-spacing: 0.3px;
}
/* ================================================================
JOB DETAIL PAGE (contractor views full scope)
================================================================ */
.detail-back {
display: inline-flex; align-items: center; gap: 6px;
font-size: 14px; font-weight: 600; color: var(--text-secondary);
cursor: pointer; margin-bottom: 24px; transition: color var(--transition);
}
.detail-back:hover { color: var(--orange); }
.detail-actions { display: flex; gap: 10px; margin-top: 20px; flex-wrap: wrap; }
/* ================================================================
BID PROGRESS BAR
================================================================ */
.bid-progress { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.bid-progress-bar {
flex: 1; height: 6px; background: var(--border); border-radius: 3px;
overflow: hidden; max-width: 120px;
}
.bid-progress-fill {
height: 100%; border-radius: 3px; transition: width 0.3s ease;
background: var(--success);
}
.bid-progress-fill.urgent { background: var(--warning); }
.bid-progress-fill.closed { background: var(--danger); }
.bid-progress-label { font-size: 12px; font-weight: 600; color: var(--text-secondary); white-space: nowrap; }
/* ================================================================
CT FEED CARD — multi-photo taller list layout (contractor feed)
================================================================ */
.ct-feed-inner { display: flex; gap: 0; padding: 0; align-items: stretch; min-height: 216px; }
/* Photo grid — left flush with card, no inner radius (card has overflow:hidden + border-radius) */
.ct-feed-photos {
width: 50%; min-width: 225px; flex-shrink: 0;
display: grid; gap: 2px; overflow: hidden; background: #E5DED8;
}
/* 0 or 1 photo: single photo fills full area */
.ct-feed-photos.cfp-0,
.ct-feed-photos.cfp-1 { grid-template-columns: 1fr; grid-template-rows: 1fr; }
/* 2 photos: side-by-side, each full height */
.ct-feed-photos.cfp-2 { grid-template-columns: 1fr 1fr; grid-template-rows: 1fr; }
/* 3+ photos: big main left (full height) + 2 small stacked right */
.ct-feed-photos.cfp-3p { grid-template-columns: 60% 40%; grid-template-rows: 1fr 1fr; }
.ct-feed-photos.cfp-3p .ct-fp:first-child { grid-column: 1; grid-row: 1/-1; }
.ct-feed-photos.cfp-3p .ct-fp:nth-child(2) { grid-column: 2; grid-row: 1; }
.ct-feed-photos.cfp-3p .ct-fp:nth-child(3) { grid-column: 2; grid-row: 2; }
.ct-feed-photos.cfp-3p .ct-fp:nth-child(n+4) { display: none; }
.ct-fp { overflow: hidden; background: var(--bg); position: relative; }
/* Media is absolutely positioned so a tall (portrait) photo/video can't push
the card height — the text body + .ct-feed-inner min-height define card height,
and object-fit:cover crops the frame to the square-ish cell. */
.ct-fp img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.ct-fp--placeholder {
width: 100%; height: 100%; display: flex; align-items: center; justify-content: center;
background: var(--bg); color: var(--border);
}
/* REN-141: video-keyframe cover photo (when project has no images but has a walkthrough) */
.ct-fp--video { background: #000; }
.ct-fp--video video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; pointer-events: none; }
.ct-fp__video-badge {
position: absolute; top: 8px; right: 8px;
background: rgba(0,0,0,0.6); color: #fff;
width: 22px; height: 22px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
pointer-events: none;
}
/* Text/body — right side */
.ct-feed-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 8px; padding: 18px 20px; justify-content: center; }
.ct-feed-row-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; }
.ct-feed-title { font-size: 16px; font-weight: 700; color: var(--text); line-height: 1.3; }
/* REN-147: stacked meta block to the right of the title — first line is "X days
ago" (posted time), second line surfaces the homeowner's target completion
date so contractors see urgency right next to the title without scanning
the chip row below. */
.ct-feed-meta { display: flex; flex-direction: column; align-items: flex-end; gap: 2px; flex-shrink: 0; padding-top: 2px; }
.ct-feed-time { font-size: 12px; color: var(--muted); white-space: nowrap; }
.ct-feed-target { font-size: 11px; font-weight: 600; color: var(--orange); white-space: nowrap; letter-spacing: 0.01em; }
.ct-feed-badges { display: flex; flex-wrap: wrap; gap: 4px; }
.ct-feed-summary {
font-size: 13px; line-height: 1.45; color: var(--text-secondary);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; text-overflow: ellipsis;
}
.ct-feed-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ct-feed-chip {
font-size: 12px; font-weight: 500; color: var(--text-secondary);
background: var(--bg); border: 1px solid var(--border);
border-radius: 20px; padding: 2px 10px; white-space: nowrap;
}
.ct-feed-chip--budget { color: var(--orange); border-color: rgba(249,115,22,0.25); background: rgba(249,115,22,0.06); font-weight: 600; }
.ct-feed-footer { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ct-bid-pill { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 12px; white-space: nowrap; }
.ct-bid-pill--open { background: var(--bg); border: 1px solid var(--border); color: var(--text-secondary); }
.ct-bid-pill--urgent { background: rgba(168,92,20,0.08); border: 1px solid rgba(168,92,20,0.2); color: var(--warning); }
.ct-bid-pill--closed { background: rgba(176,60,54,0.08); border: 1px solid rgba(176,60,54,0.2); color: var(--danger); }
.ct-bid-sent { font-size: 11px; font-weight: 700; color: var(--success); display: inline-flex; align-items: center; gap: 4px; }
@media (max-width: 480px) {
.ct-feed-inner { min-height: 130px; }
.ct-feed-photos { width: 38%; min-width: 110px; }
.ct-feed-body { padding: 12px; gap: 6px; }
.ct-feed-title { font-size: 14px; }
}
/* ================================================================
PRICE THIS JOB — LINE ITEM PRICING (REN-237)
Contractor-private per-line worksheet. Two states: priced or blank.
Focus ring driven by :focus-within on the wrapper so the $ glyph
and the number share a single visible affordance.
================================================================ */
.price-col { text-align: right; }
.price-col.visible { display: table-cell !important; }
th.price-col.visible, td.price-col.visible { display: table-cell !important; }
.price-input-wrap {
display: inline-flex; align-items: center; gap: 4px;
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
padding: 6px 10px; min-width: 96px;
justify-content: flex-end;
transition: border-color var(--transition), box-shadow var(--transition);
}
.price-input-wrap:hover { border-color: rgba(249,115,22,0.45); }
.price-input-wrap:focus-within {
border-color: var(--orange);
box-shadow: 0 0 0 3px var(--orange-ring);
}
.price-input-wrap__currency {
color: var(--muted); font-size: 13px; font-weight: 700;
line-height: 1; user-select: none;
}
.price-input-wrap input[type="number"] {
border: none; outline: none; background: transparent;
width: 64px; text-align: right;
font-size: 14px; font-weight: 600;
color: var(--text); padding: 0;
font-family: inherit;
-moz-appearance: textfield;
}
.price-input-wrap input[type="number"]::-webkit-inner-spin-button,
.price-input-wrap input[type="number"]::-webkit-outer-spin-button {
-webkit-appearance: none; margin: 0;
}
.price-input-wrap input[type="number"]::placeholder {
color: var(--muted); font-weight: 500;
}
/* Running total bar — always visible, contractor-private. */
#pricingTotalBar {
display: flex; justify-content: space-between; align-items: center;
padding: 16px 0; border-top: 2px solid var(--orange);
margin-top: 16px; gap: 12px; flex-wrap: wrap;
}
#pricingTotalBar.visible { display: flex !important; }
.pricing-total-bar__label {
display: flex; flex-direction: column; gap: 2px;
}
#pricingTotalCaption {
font-size: 12px; color: var(--muted);
font-weight: 500; min-height: 16px;
letter-spacing: 0.01em;
}
/* REN-239: contractor-private draft microcopy sits just below the running
total. Quiet, calm — its job is reassurance, not emphasis. */
.pricing-total-draft-note {
font-size: 12px; color: var(--muted);
font-weight: 500; padding-top: 6px;
letter-spacing: 0.01em; line-height: 1.4;
}
/* ================================================================
PROFILE PAGES
================================================================ */
.profile-page { max-width: 800px; margin: 0 auto; padding: 40px; }
.profile-card {
background: var(--surface); border: none;
border-radius: var(--radius); padding: 32px; margin-bottom: 24px;
box-shadow: var(--shadow-sm);
}
.profile-header { display: flex; align-items: center; gap: 20px; margin-bottom: 24px; }
.profile-avatar-lg {
width: 72px; height: 72px; border-radius: 50%;
background: var(--orange); color: #fff;
display: flex; align-items: center; justify-content: center;
font-weight: 800; font-size: 28px; flex-shrink: 0;
}
.profile-info h3 { font-size: 22px; font-weight: 700; margin-bottom: 2px; }
.profile-info p { font-size: 14px; color: var(--text-secondary); }
.profile-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 600px) { .profile-grid { grid-template-columns: 1fr; } }
.profile-field { margin-bottom: 16px; }
.profile-field-label { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted); margin-bottom: 4px; }
.profile-field-value { font-size: 15px; color: var(--text); }
.past-job-card {
background: var(--surface-alt); border: 1px solid var(--border-light);
border-radius: var(--radius-sm); padding: 16px; margin-bottom: 12px;
display: flex; gap: 16px; align-items: center;
}
.past-job-photo {
width: 80px; height: 60px; background: var(--border-light); border-radius: 6px;
display: flex; align-items: center; justify-content: center;
font-size: 10px; color: var(--muted); flex-shrink: 0;
}
.past-job-info { flex: 1; }
.past-job-title { font-size: 14px; font-weight: 600; margin-bottom: 2px; }
.past-job-desc { font-size: 13px; color: var(--text-secondary); margin-bottom: 4px; }
.past-job-amount { font-size: 14px; font-weight: 700; color: var(--orange); }
/* ================================================================
MY BIDS PAGE
================================================================ */
.bids-section { margin-bottom: 32px; }
.bids-section-title {
font-size: 16px; font-weight: 700; margin-bottom: 16px;
display: flex; align-items: center; gap: 10px;
}
.bids-section-title .count {
background: var(--surface-alt); border: 1px solid var(--border);
border-radius: 12px; padding: 2px 10px; font-size: 12px; color: var(--text-secondary);
}
.bid-card {
background: var(--surface); border: none;
border-radius: var(--rf-r-xl, 20px); padding: 20px; margin-bottom: 12px;
display: flex; justify-content: space-between; align-items: center;
transition: all var(--transition); box-shadow: var(--shadow-sm);
}
.bid-card:hover { border-color: var(--orange); box-shadow: var(--shadow-sm); }
.bid-card-left { flex: 1; }
.bid-card-title { font-size: 15px; font-weight: 600; margin-bottom: 4px; }
.bid-card-meta { font-size: 13px; color: var(--text-secondary); }
.bid-card-right { text-align: right; }
.bid-card-amount { font-size: 18px; font-weight: 800; color: var(--orange); }
.bid-status {
display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px;
border-radius: 4px; text-transform: uppercase; letter-spacing: 0.3px; margin-top: 4px;
}
.bid-pending { background: var(--warning-light); color: var(--warning); }
.bid-won { background: var(--success-light); color: var(--success); }
.bid-missed { background: #FEF2F2; color: var(--danger); }
.missed-toggle {
display: flex; align-items: center; gap: 8px; cursor: pointer;
font-size: 14px; font-weight: 600; color: var(--text-secondary);
margin-bottom: 12px; transition: color var(--transition);
}
.missed-toggle:hover { color: var(--text); }
/* ================================================================
MESSAGES PLACEHOLDER
================================================================ */
.placeholder-page {
max-width: 600px; margin: 80px auto; text-align: center; padding: 40px;
}
.placeholder-icon { font-size: 56px; margin-bottom: 20px; opacity: 0.5; display: flex; align-items: center; justify-content: center; }
.placeholder-title { font-size: 24px; font-weight: 700; margin-bottom: 8px; }
.placeholder-text { font-size: 15px; color: var(--text-secondary); line-height: 1.7; max-width: 400px; margin: 0 auto; }
/* ================================================================
REVIEWS
================================================================ */
.review-placeholder {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 32px; margin-top: 32px;
}
.review-title { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.review-sub { font-size: 14px; color: var(--text-secondary); margin-bottom: 20px; }
.review-categories { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; }
@media (max-width: 600px) { .review-categories { grid-template-columns: 1fr; } }
.review-column h5 { font-size: 14px; font-weight: 700; margin-bottom: 12px; color: var(--orange); text-transform: uppercase; letter-spacing: 0.5px; }
.review-item { display: flex; align-items: center; justify-content: space-between; padding: 10px 0; border-bottom: 1px solid var(--border-light); }
.review-item-label { font-size: 14px; font-weight: 500; }
.review-stars { display: flex; gap: 3px; color: #FDE68A; font-size: 16px; }
.review-stars .filled { color: var(--orange); }
/* ================================================================
SUCCESS / CONTACT EXCHANGE
================================================================ */
.success-card {
background: var(--success-light); border: 1px solid #BBF7D0;
border-radius: var(--radius); padding: 40px; text-align: center;
margin-top: 32px;
}
.success-icon { font-size: 48px; margin-bottom: 16px; display: flex; align-items: center; justify-content: center; }
.success-title { font-size: 24px; font-weight: 700; margin-bottom: 8px; color: var(--success); }
.success-text { font-size: 15px; color: var(--text-secondary); max-width: 480px; margin: 0 auto 24px; line-height: 1.7; }
.success-details {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 20px; margin: 0 auto 24px;
max-width: 400px; text-align: left;
}
.success-detail-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border-light); font-size: 14px; }
.success-detail-row:last-child { border-bottom: none; }
.success-detail-label { color: var(--text-secondary); }
.success-detail-value { font-weight: 600; }
.contact-explainer {
background: var(--info-light); border: 1px solid #BFDBFE;
border-radius: var(--radius-sm); padding: 16px; margin-top: 20px;
font-size: 13px; color: var(--info); text-align: left; max-width: 480px; margin-left: auto; margin-right: auto;
}
/* QR */
.qr-modal-body { text-align: center; }
.qr-modal-body img { margin: 0 auto 16px; border-radius: var(--radius-sm); }
.qr-steps { background: var(--surface-alt); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 16px; text-align: left; font-size: 13px; color: var(--text-secondary); margin-bottom: 20px; }
.qr-steps div { margin-bottom: 6px; }
.qr-steps div:last-child { margin-bottom: 0; }
/* L7: QR upload loading indicator — pulse dots shown while polling */
.qr-poll-indicator {
display: inline-flex;
align-items: center;
gap: 5px;
margin-top: 8px;
}
.qr-poll-dot {
width: 7px;
height: 7px;
border-radius: 50%;
background: var(--orange);
animation: qrPollPulse 1.4s ease-in-out infinite;
}
.qr-poll-dot:nth-child(2) { animation-delay: 0.2s; }
.qr-poll-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes qrPollPulse {
0%, 100% { opacity: 0.25; transform: scale(0.8); }
50% { opacity: 1; transform: scale(1.1); }
}
/* ================================================================
PROFILE DROPDOWN
================================================================ */
.user-menu-wrap {
position: relative;
display: flex;
align-items: center;
gap: 12px;
}
.dropdown-menu {
display: none; position: absolute; top: calc(100% + 8px); right: 0;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-sm); box-shadow: var(--shadow-lg);
min-width: 160px; z-index: 200; overflow: hidden;
animation: fadeIn 0.15s ease;
}
.dropdown-menu.open { display: block; }
.dropdown-item {
display: flex; align-items: center; gap: 10px;
padding: 12px 16px; font-size: 14px; font-weight: 500;
color: var(--text); cursor: pointer; transition: background 0.15s;
border: none; background: none; width: 100%; text-align: left;
}
.dropdown-item:hover { background: var(--surface-alt); }
.dropdown-item svg { flex-shrink: 0; }
.dropdown-divider { height: 1px; background: var(--border-light); margin: 0; }
/* REN-163: language toggle row inside the contractor's profile dropdown.
Single source of truth for UI display language now that per-page
lang-cluster widgets have been stripped (REN-162). Stays open when the
toggle is clicked so the user sees the active state flip. */
.dropdown-lang-row {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; padding: 10px 16px;
}
.dropdown-lang-label {
font-size: 13px; font-weight: 600; color: var(--muted);
text-transform: uppercase; letter-spacing: 0.04em;
}
/* ================================================================
BID COLLECTION CARDS (Homeowner viewing incoming bids)
================================================================ */
.bid-collection { margin-top: 24px; }
.bid-collection-title { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.bid-collection-sub { font-size: 14px; color: var(--text-secondary); margin-bottom: 20px; }
.bid-offer-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 24px; margin-bottom: 16px;
cursor: pointer; transition: all 0.25s ease;
}
.bid-offer-card:hover { border-color: var(--orange); box-shadow: var(--shadow-md); }
.bid-offer-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.bid-offer-name { font-size: 16px; font-weight: 700; }
.bid-offer-amount { font-size: 22px; font-weight: 800; color: var(--orange); line-height: 1.1; }
/* Polish pass: footer row for the Select button — soft divider + right
align on desktop, full-width button on narrow cards. */
.bid-offer-footer {
margin-top: 18px;
padding-top: 14px;
border-top: 1px solid var(--border);
display: flex;
justify-content: flex-end;
}
@media (max-width: 520px) {
.bid-offer-footer { justify-content: stretch; }
.bid-offer-footer .btn { width: 100%; }
}
/* OD1: compact chip row — all identity pills (health, business, insured,
licensed, RF Verified) align on ONE horizontal row; wrap to a second
row only when the card is too narrow to fit. */
.bid-offer-chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 8px;
}
.bid-offer-chips > * { flex-shrink: 0; }
/* OD1: two-column card body — left column stacks the Contractor Strengths
card and (optionally) a Project Assumptions card; right column holds
the Select button, pinned to the bottom so its bottom edge aligns with
the bottom of the card stack. */
.bid-offer-body {
display: flex;
gap: 16px;
margin-top: 14px;
align-items: stretch;
}
.bid-offer-body-left {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: 12px;
}
.bid-offer-body-right {
flex: 0 0 auto;
display: flex;
flex-direction: column;
justify-content: flex-end;
align-items: flex-end;
}
.bid-offer-body-right .btn { white-space: nowrap; }
/* OD1: canonical Contractor Strengths / Project Assumptions card style —
one class, reused across both cards so they render identical. */
.bid-offer-strengths-card {
padding: 12px 14px;
background: var(--bg-soft, #FCF9F6);
border: 1px solid var(--border);
border-radius: 10px;
align-self: flex-start;
max-width: 100%;
}
.bid-offer-strengths-card .strengths-label {
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-secondary);
margin-bottom: 4px;
}
.bid-offer-strengths-card ul { list-style: none; padding: 0; margin: 0; }
.bid-offer-strengths-card li {
display: flex;
align-items: flex-start;
gap: 8px;
padding: 6px 0;
font-size: 13px;
color: var(--text-primary);
line-height: 1.45;
}
@media (max-width: 640px) {
.bid-offer-body { flex-direction: column; align-items: stretch; }
.bid-offer-body-right { align-items: stretch; }
.bid-offer-body-right .btn { width: 100%; }
}
.bid-offer-meta { display: flex; flex-wrap: wrap; gap: 16px; font-size: 13px; color: var(--text-secondary); margin-bottom: 10px; }
.bid-offer-meta span { display: flex; align-items: center; gap: 4px; }
.bid-type-badge {
display: inline-block; font-size: 11px; font-weight: 700; padding: 3px 10px;
border-radius: 4px; text-transform: uppercase; letter-spacing: 0.3px;
}
.bid-type-tentative { background: var(--warning-light); color: var(--warning); }
.bid-type-final { background: var(--success-light); color: var(--success); }
.bid-offer-cover { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin-top: 8px; }
.bid-offer-stars { display: flex; gap: 12px; margin-top: 8px; flex-wrap: wrap; }
.bid-offer-star-item { font-size: 12px; color: var(--text-secondary); display: flex; align-items: center; gap: 4px; }
.bid-offer-star-item .filled { color: var(--orange); }
.bid-offer-expanded {
max-height: 0; overflow: hidden; transition: max-height 0.4s ease;
}
.bid-offer-expanded.open { max-height: 600px; }
.bid-offer-expanded-inner { padding-top: 16px; border-top: 1px solid var(--border-light); margin-top: 12px; }
.bid-offer-profile-summary {
background: var(--surface-alt); border: 1px solid var(--border-light);
border-radius: var(--radius-sm); padding: 16px; font-size: 13px;
color: var(--text-secondary); line-height: 1.7; margin-bottom: 12px;
}
/* ================================================================
OD2 / Q12 — CONTRACTOR MY ESTIMATES CARD
Q12 refresh: 96px photo column (88 mobile), Manrope, literal Q-pass
hex on status chips, hover lift, compact intentional initials chip,
tightened vertical spacing.
================================================================ */
/* OD2: max-width container for My Estimates list */
#myBidsContainer { max-width: 720px; margin: 0 auto; }
.my-bid-card {
display: flex; gap: 0; align-items: stretch;
margin-bottom: 12px; padding: 0;
border: 1px solid var(--border); border-radius: 12px;
background: #fff; overflow: hidden;
font-family: 'Manrope', system-ui, sans-serif;
/* T-pass: token-based easing + transform for press feedback */
transition: box-shadow 220ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
background 150ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
border-color 200ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1)),
transform 160ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
@media (hover: hover) and (pointer: fine) {
.my-bid-card:hover {
/* T-pass: deeper lift balances the wider 240px photo block */
box-shadow: 0 6px 18px rgba(28,27,27,0.08);
border-color: #DDD5C9;
background: #FCF9F6;
}
}
/* T-pass: hairline press feedback — subtle because card is a list row, not a button */
.my-bid-card:active { transform: scale(0.997); }
/* Q12: tinted variants — Q-pass canonical hex, gentle saturation */
.my-bid-card--pending { background: #FFF8EE; }
.my-bid-card--connected { background: #E8F0E5; }
.my-bid-card--missed { background: #F7F4F0; opacity: 0.92; }
.my-bid-card--missed:hover { opacity: 1; }
.my-bid-card--expired { background: #F7F4F0; opacity: 0.7; }
.my-bid-card__photo {
/* T-pass: 5be2a6b widening — 96→240px desktop matches Active Jobs / feed treatment */
width: 240px; min-height: 160px; flex-shrink: 0;
background: #FFF4ED;
display: flex; align-items: center; justify-content: center;
overflow: hidden;
position: relative;
}
.my-bid-card__photo img {
width: 100%; height: 100%; object-fit: cover; display: block;
}
/* Q12: compact intentional initials chip when project has zero photos */
.my-bid-card__initials {
width: 36px; height: 36px; border-radius: 50%;
background: #F97316; color: #fff;
display: flex; align-items: center; justify-content: center;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 13px; font-weight: 700; letter-spacing: -0.3px;
}
.my-bid-card__body {
flex: 1; padding: 12px 14px;
background: transparent;
display: flex; flex-direction: column; gap: 4px;
min-width: 0;
}
.my-bid-card__head {
display: flex; justify-content: space-between; align-items: flex-start;
gap: 12px;
}
.my-bid-card__title {
font-family: 'Manrope', system-ui, sans-serif;
font-size: 15px; font-weight: 600; color: #1A1A1A;
/* T-pass: 2-line clamp + tighter tracking matches feed/Active Jobs pattern */
line-height: 1.3; letter-spacing: -0.1px;
overflow: hidden; text-overflow: ellipsis;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
}
.my-bid-card__amount {
font-family: 'Manrope', system-ui, sans-serif;
font-size: 16px; font-weight: 700; color: #F97316;
line-height: 1; flex-shrink: 0; white-space: nowrap;
/* T-pass: tighten the orange numeric column for confident readout */
letter-spacing: -0.3px;
}
.my-bid-card--missed .my-bid-card__amount {
color: #9A9490; text-decoration: line-through;
}
.my-bid-card__meta {
font-family: 'Manrope', system-ui, sans-serif;
font-size: 12px; font-weight: 400; color: #6B6B6B;
display: flex; flex-wrap: wrap; gap: 4px 8px;
line-height: 1.4;
}
.my-bid-card__meta .dot { color: var(--border); }
.my-bid-card__slots {
font-family: 'Manrope', system-ui, sans-serif;
font-size: 12px; font-weight: 600;
color: #A85C14; display: flex; align-items: center; gap: 4px;
}
.my-bid-card__slots--full { color: #B03C36; }
/* Q12: status pills — literal Q-pass hex, defeat any --warning/--success
global shadowing, stronger contrast + tinted border */
.my-bid-status-pill {
display: inline-flex; align-items: center; gap: 5px;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 10.5px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.5px;
padding: 3px 9px; border-radius: 999px;
white-space: nowrap;
flex-shrink: 0;
border: 1px solid transparent;
}
.my-bid-status-pill .dot-mark {
width: 5px; height: 5px; border-radius: 50%; background: currentColor;
}
.my-bid-status-pill--pending { background: #FBE9CC; color: #A85C14; border-color: rgba(168,92,20,0.18); }
.my-bid-status-pill--connected { background: #D5E5D2; color: #6B9970; border-color: rgba(107,153,112,0.22); }
.my-bid-status-pill--missed { background: #F3DAD7; color: #B03C36; border-color: rgba(176,60,54,0.18); }
.my-bid-status-pill--expired { background: #ECE6DD; color: #8A8786; border-color: rgba(138,135,134,0.22); }
.my-bid-card__cta {
margin-top: 2px;
font-family: 'Manrope', system-ui, sans-serif;
color: #F97316; font-size: 12px; font-weight: 600;
display: flex; align-items: center; gap: 4px;
}
.my-bid-card--missed .my-bid-card__cta { color: #9A9490; }
/* OD2: sub-row (meta + pill on same line), stats-row, extra, view-link */
.my-bid-card__subrow {
display: flex; align-items: center; justify-content: space-between;
gap: 8px; margin-top: 2px;
}
.my-bid-card__stats-row {
display: flex; flex-wrap: wrap; gap: 4px 16px;
margin-top: 8px; padding-top: 8px;
border-top: 1px solid rgba(0,0,0,0.06);
}
.my-bid-card__stat { display: flex; flex-direction: column; gap: 1px; }
.my-bid-stat-lbl {
font-family: 'Manrope', system-ui, sans-serif;
font-size: 10px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.4px; color: var(--muted);
}
.my-bid-stat-val {
font-family: 'Manrope', system-ui, sans-serif;
font-size: 13px; font-weight: 600; color: var(--text);
}
.my-bid-card__extra {
margin-top: 10px; padding-top: 10px;
border-top: 1px solid rgba(0,0,0,0.06);
}
.my-bid-card__view-link {
display: inline-block; margin-top: 10px;
font-family: 'Manrope', system-ui, sans-serif;
font-size: 13px; font-weight: 600; color: #F97316;
text-decoration: none;
/* T-pass: tonal hover shift for direct interaction feedback */
transition: color 150ms var(--ease-out, cubic-bezier(0.23, 1, 0.32, 1));
}
.my-bid-card__view-link:hover { color: #C24F0E; text-decoration: underline; }
.my-bid-card__detail {
display: none;
padding: 14px 16px 16px 16px;
border-top: 1px solid var(--border);
background: #fff;
animation: paymentFadeIn 0.3s var(--ease-out, ease-out);
}
/* Wrapper that hosts the card + its detail block so detail spans full width */
.my-bid-wrap { margin-bottom: 12px; border-radius: 12px; overflow: hidden; border: 1px solid var(--border); }
.my-bid-wrap .my-bid-card { margin-bottom: 0; border: none; border-radius: 0; }
@media (max-width: 560px) {
/* T-pass: mobile photo widening matches 5be2a6b production values */
.my-bid-card__photo { width: 160px; min-height: 140px; }
.my-bid-card__initials { width: 32px; height: 32px; font-size: 12px; }
.my-bid-card__title { font-size: 14px; }
.my-bid-card__amount { font-size: 15px; }
}
/* ================================================================
JOB PROGRESS / UPDATES
================================================================ */
.progress-timeline { margin-top: 20px; }
.progress-update {
display: flex; gap: 16px; padding: 16px 0;
border-bottom: 1px solid var(--border-light);
}
.progress-update:last-child { border-bottom: none; }
.progress-date { font-size: 12px; color: var(--muted); min-width: 80px; padding-top: 2px; }
.progress-content { flex: 1; }
.progress-text { font-size: 14px; color: var(--text); margin-bottom: 6px; line-height: 1.6; }
.progress-photos { display: flex; gap: 6px; }
.progress-photo-placeholder {
width: 60px; height: 45px; background: var(--surface-alt);
border: 1px solid var(--border-light); border-radius: 4px;
display: flex; align-items: center; justify-content: center;
font-size: 9px; color: var(--muted);
}
/* ================================================================
INTERACTIVE STAR RATING
================================================================ */
.star-rating { display: flex; gap: 4px; }
.star-rating .star {
font-size: 22px; cursor: pointer; color: #FDE68A;
transition: color 0.15s, transform 0.15s; user-select: none;
}
.star-rating .star:hover { transform: scale(1.15); }
.star-rating .star.selected { color: var(--orange); }
/* ================================================================
RADIO GROUP FOR BID PREF
================================================================ */
.radio-group { display: flex; flex-direction: column; gap: 10px; }
.radio-option {
display: flex; align-items: center; gap: 10px;
font-size: 14px; color: var(--text); cursor: pointer;
padding: 10px 14px; background: var(--surface-alt);
border: 1.5px solid var(--border); border-radius: var(--radius-sm);
transition: all var(--transition);
}
.radio-option:hover { border-color: var(--orange); }
.radio-option input[type="radio"] { accent-color: var(--orange); width: auto; }
.radio-option.selected { border-color: var(--orange); background: var(--orange-light); }
.intent-section { margin-top:8px; padding:12px 16px; background:var(--surface-alt); border:1px solid var(--border); border-radius:var(--radius-sm); }
.intent-slider { -webkit-appearance:none; appearance:none; width:100%; height:6px; border-radius:3px; background:linear-gradient(to right,#94A3B8,#F97316,#7C3AED); outline:none; cursor:pointer; }
.intent-slider::-webkit-slider-thumb { -webkit-appearance:none; appearance:none; width:24px; height:24px; border-radius:50%; background:var(--surface); border:3px solid var(--orange); box-shadow:var(--shadow-sm); cursor:pointer; }
.intent-slider::-moz-range-thumb { width:24px; height:24px; border-radius:50%; background:var(--surface); border:3px solid var(--orange); box-shadow:var(--shadow-sm); cursor:pointer; }
.chip-btn { display:inline-flex; align-items:center; padding:8px 14px; border:1.5px solid var(--border); border-radius:20px; font-size:13px; font-weight:500; color:var(--text-secondary); background:var(--surface); cursor:pointer; transition:all 0.2s; font-family:inherit; }
.chip-btn:hover { border-color:var(--orange); color:var(--orange); }
.chip-btn.selected { border-color:var(--orange); background:var(--orange-light); color:var(--orange); font-weight:600; }
/* ================================================================
BID TOGGLE (tentative vs final)
================================================================ */
.bid-type-toggle { display: flex; gap: 10px; margin-bottom: 16px; }
.bid-type-option {
flex: 1; padding: 12px 16px; border: 1.5px solid var(--border);
border-radius: var(--radius-sm); text-align: center; cursor: pointer;
font-size: 13px; font-weight: 600; transition: all var(--transition);
background: var(--surface-alt); color: var(--text-secondary);
}
.bid-type-option:hover { border-color: var(--orange); }
.bid-type-option.active { border-color: var(--orange); background: var(--orange-light); color: var(--orange); }
.bid-type-option small { display: block; font-weight: 400; font-size: 11px; margin-top: 2px; color: var(--muted); }
/* ================================================================
CONFIRMATION MODAL
================================================================ */
.confirm-modal {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); width: 100%; max-width: 380px;
padding: 32px; box-shadow: var(--shadow-lg);
animation: slideUp 0.25s ease; text-align: center;
}
.confirm-modal h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.confirm-modal p { font-size: 14px; color: var(--text-secondary); margin-bottom: 24px; }
.confirm-modal .confirm-btns { display: flex; gap: 10px; justify-content: center; }
/* REN-195: destructive-action variant (red fill) for rfConfirm({ danger:true }). */
.btn-danger {
background: var(--danger); color: #fff; border: 1px solid var(--danger);
padding: 10px 20px; border-radius: 8px; font-weight: 600; font-size: 14px;
cursor: pointer; transition: background 140ms, transform 80ms;
}
.btn-danger:hover { background: #8E2F2A; border-color: #8E2F2A; }
.btn-danger:active { transform: scale(0.97); }
.btn-danger:focus-visible { outline: 2px solid var(--danger); outline-offset: 2px; }
/* ================================================================
VISUAL SHOWCASE (Hero replacement)
================================================================ */
.visual-showcase {
max-width: 1060px; margin: 80px auto 0; padding: 0 40px;
}
.showcase-grid {
display: grid; grid-template-columns: 1.2fr 1fr; gap: 32px;
align-items: center;
}
@media (max-width: 700px) { .showcase-grid { grid-template-columns: 1fr; } }
.showcase-images {
display: flex; flex-direction: column; gap: 12px;
}
.showcase-img {
border-radius: var(--radius); overflow: hidden;
box-shadow: var(--shadow-md); position: relative;
height: 210px;
}
.showcase-img img {
width: 100%; height: 100%;
object-fit: cover;
}
.showcase-img-label {
position: absolute; bottom: 10px; left: 12px;
background: rgba(0,0,0,0.6); color: #fff;
font-size: 11px; font-weight: 600; padding: 4px 10px;
border-radius: 6px; letter-spacing: 0.3px;
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
.showcase-img.after { border: 2px solid var(--success); }
.showcase-img.after .showcase-img-label { background: rgba(22,163,74,0.8); }
.showcase-text h3 { font-size: 24px; font-weight: 800; margin-bottom: 12px; letter-spacing: -0.3px; }
.showcase-text p { font-size: 15px; color: var(--text-secondary); line-height: 1.7; margin-bottom: 16px; }
.showcase-checklist { list-style: none; padding: 0; }
.showcase-checklist li {
display: flex; align-items: center; gap: 8px;
font-size: 14px; color: var(--text); padding: 6px 0;
}
.showcase-checklist li .check-icon {
width: 20px; height: 20px; border-radius: 50%; background: var(--success-light);
color: var(--success); display: flex; align-items: center; justify-content: center;
font-size: 11px; font-weight: 700; flex-shrink: 0;
}
/* ================================================================
PHOTO GALLERY (jobsite photography)
================================================================ */
.photo-gallery {
max-width: 1080px; margin: 80px auto 0; padding: 0 40px;
}
.photo-gallery-header {
text-align: center; margin-bottom: 36px;
}
.photo-gallery-header h3 {
font-size: 26px; font-weight: 800; letter-spacing: -0.3px; margin-bottom: 8px;
}
.photo-gallery-header p {
font-size: 15px; color: var(--text-secondary); max-width: 560px; margin: 0 auto;
}
.photo-grid {
display: grid; grid-template-columns: repeat(2, 1fr); gap: 16px;
}
.photo-grid .photo-slot {
border-radius: var(--radius); overflow: hidden;
aspect-ratio: 16/10; position: relative;
box-shadow: var(--shadow-sm);
transition: transform 0.25s ease, box-shadow 0.25s ease;
min-height: 220px;
}
.photo-grid .photo-slot:hover {
transform: translateY(-3px);
box-shadow: var(--shadow-lg);
}
.photo-grid .photo-slot img {
width: 100%; height: 100%;
object-fit: cover; display: block;
}
.photo-grid .photo-slot.tall {
grid-row: span 2; aspect-ratio: auto;
}
.photo-grid .photo-slot .photo-label {
position: absolute; bottom: 10px; left: 12px;
background: rgba(0,0,0,0.55); color: #fff;
font-weight: 600; font-size: 11px; text-transform: uppercase;
letter-spacing: 0.5px; padding: 4px 10px; border-radius: 6px;
backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
}
@media (max-width: 700px) {
.photo-grid { grid-template-columns: 1fr; gap: 14px; }
.photo-grid .photo-slot { min-height: 200px; }
.photo-grid .photo-slot.tall { grid-row: span 1; }
}
/* ================================================================
BID CONFIRMATION (native in-page)
================================================================ */
.bid-confirm-card {
background: var(--success-light); border: 1px solid #BBF7D0;
border-radius: var(--radius); padding: 32px 32px 24px; text-align: center; margin-bottom: 24px;
}
.bid-confirm-card h3 { font-size: 20px; font-weight: 700; color: var(--success); margin-bottom: 8px; }
.bid-confirm-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; }
.bid-confirm-details {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 16px; margin: 16px auto 0;
max-width: 360px; text-align: left;
}
/* ================================================================
EMAIL VERIFICATION STEP
================================================================ */
.verify-step { text-align: center; }
.verify-step .verify-icon { margin-bottom: 16px; }
.verify-step h3 { font-size: 20px; font-weight: 700; margin-bottom: 6px; }
.verify-step p { font-size: 14px; color: var(--text-secondary); margin-bottom: 20px; }
.verify-code-input {
width: 200px; text-align: center; font-size: 24px; font-weight: 700;
letter-spacing: 8px; margin: 0 auto 16px; display: block;
}
/* ================================================================
INLINE EDITABLE
================================================================ */
[contenteditable] {
cursor: text; border-radius: 4px; padding: 2px 4px; margin: -2px -4px;
transition: background 0.15s, box-shadow 0.15s;
position: relative;
}
[contenteditable]:hover { background: var(--orange-light); }
[contenteditable]:focus {
outline: none; box-shadow: 0 0 0 2px var(--orange-ring); background: var(--surface);
}
[contenteditable]::after {
content: ''; position: absolute; top: 2px; right: 2px; width: 14px; height: 14px;
opacity: 0; transition: opacity 0.15s;
background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23F97316' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M17 3a2.85 2.83 0 1 1 4 4L7.5 20.5 2 22l1.5-5.5Z'/%3E%3C/svg%3E");
background-size: contain; background-repeat: no-repeat;
}
[contenteditable]:hover::after { opacity: 0.7; }
[contenteditable]:focus::after { opacity: 0; }
td[contenteditable] { margin: 0; }
td[contenteditable]:hover { background: var(--orange-light); }
/* REN-231 AC1: when baseline is locked (posted/sent), the attribute selector
above still matches contenteditable="false". Override every visual cue so
locked cells look like plain text — no pencil icon, no hover background,
no focus ring, default cursor.
!important defends against UA-derived editing cursor and any other late
cursor declarations that would otherwise leak through the cascade for
elements that carry the contenteditable attribute even when set to false. */
[contenteditable="false"] { cursor: default !important; }
[contenteditable="false"]:hover { background: transparent !important; }
[contenteditable="false"]::after { display: none !important; content: none !important; }
[contenteditable="false"]:hover::after,
[contenteditable="false"]:focus::after { opacity: 0 !important; display: none !important; }
[contenteditable="false"]:focus { box-shadow: none !important; background: transparent !important; outline: none !important; }
td[contenteditable="false"] { margin: 0 !important; cursor: default !important; }
td[contenteditable="false"]:hover { background: transparent !important; }
.editable-hint {
font-size: 11px; color: var(--muted); font-style: italic;
margin-bottom: 8px; display: flex; align-items: center; gap: 4px;
}
.editable-hint svg { flex-shrink: 0; }
/* ================================================================
SCOPE CHATBOT
================================================================ */
/* ── PASS G2: Photo Lightbox (ported from production analyzer) ── */
.rf-lightbox { position: fixed; inset: 0; background: rgba(28,22,17,0.96); z-index: 2000; display: none; align-items: center; justify-content: center; flex-direction: column; }
.rf-lightbox.visible { display: flex; }
.rf-lightbox img { max-width: 90vw; max-height: 80vh; border-radius: 8px; object-fit: contain; }
.rf-lb-counter { color: rgba(255,255,255,0.7); font-size: 14px; margin-top: 14px; }
/* REN-124: position via top:calc(50% - 24px) instead of transform:translateY(-50%)
so the global `button:active { transform: scale(0.97) }` rule (styles.css:264)
no longer clobbers the centering transform and drops the button ~24px on press. */
.rf-lb-arrow { position: fixed; top: calc(50% - 24px); background: rgba(255,255,255,0.12); border: none; color: #fff; font-size: 28px; line-height: 1; padding: 0; width: 48px; height: 48px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background 0.2s; }
.rf-lb-arrow:hover { background: rgba(255,255,255,0.25); }
.rf-lb-arrow:active { background: rgba(255,255,255,0.35); }
.rf-lb-arrow:focus { outline: none; }
.rf-lb-arrow.left { left: 20px; }
.rf-lb-arrow.right { right: 20px; }
.rf-lb-close { position: fixed; top: 20px; right: 20px; background: rgba(255,255,255,0.12); border: none; color: #fff; font-size: 24px; width: 42px; height: 42px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.chat-fab {
position: fixed; bottom: 28px; right: 28px; z-index: 500;
width: 52px; height: 52px; border-radius: 50%;
background: var(--orange); color: #fff; border: none;
box-shadow: var(--shadow-orange);
display: flex; align-items: center; justify-content: center;
cursor: pointer; transition: all var(--transition);
}
.chat-fab:hover { background: var(--orange-hover); transform: scale(1.08); }
.chat-panel {
position: fixed; bottom: 92px; right: 28px; z-index: 500;
width: 380px; max-height: 460px;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: var(--shadow-lg);
display: flex; flex-direction: column;
animation: slideUp 0.25s ease;
}
.chat-panel-header {
padding: 16px 20px; border-bottom: 1px solid var(--border);
display: flex; justify-content: space-between; align-items: center;
}
.chat-panel-header h4 { font-size: 15px; font-weight: 700; }
.chat-panel-close {
background: none; border: none; color: var(--muted); cursor: pointer;
padding: 4px; border-radius: 4px; transition: color var(--transition);
}
.chat-panel-close:hover { color: var(--text); }
.chat-messages {
flex: 1; overflow-y: auto; padding: 16px 20px;
display: flex; flex-direction: column; gap: 12px;
max-height: 300px; min-height: 120px;
}
.chat-msg {
max-width: 85%; padding: 10px 14px; border-radius: 12px;
font-size: 13px; line-height: 1.5;
}
.chat-msg.user {
align-self: flex-end; background: var(--orange); color: #fff;
border-bottom-right-radius: 4px;
}
.chat-msg.bot {
align-self: flex-start; background: var(--surface-alt); color: var(--text);
border: 1px solid var(--border-light); border-bottom-left-radius: 4px;
}
.chat-input-bar {
display: flex; gap: 8px; padding: 12px 16px;
border-top: 1px solid var(--border);
}
.chat-input-bar input {
flex: 1; border: 1.5px solid var(--border); border-radius: var(--radius-sm);
padding: 8px 12px; font-family: inherit; font-size: 13px;
background: var(--surface-alt); transition: border-color var(--transition);
}
.chat-input-bar input:focus { outline: none; border-color: var(--orange); }
.chat-input-bar button {
background: var(--orange); color: #fff; border: none;
border-radius: var(--radius-sm); padding: 8px 14px;
font-size: 13px; font-weight: 600; cursor: pointer;
transition: background var(--transition);
}
.chat-input-bar button:hover { background: var(--orange-hover); }
/* ================================================================
CUSTOM RADIO (no bleed)
================================================================ */
.radio-option input[type="radio"] {
appearance: none; -webkit-appearance: none;
width: 18px; height: 18px; border-radius: 50%;
border: 2px solid var(--border); background: var(--surface);
cursor: pointer; transition: all 0.15s; flex-shrink: 0;
position: relative; display: inline-block; vertical-align: middle;
}
.radio-option input[type="radio"]:checked {
border-color: var(--orange);
}
.radio-option input[type="radio"]:checked::after {
content: ''; position: absolute;
top: 3px; left: 3px; width: 8px; height: 8px;
border-radius: 50%; background: var(--orange);
}
/* ================================================================
MAP VIEW
================================================================ */
.view-toggle {
display: inline-flex; border: 1.5px solid var(--border);
border-radius: var(--radius-sm); overflow: hidden; margin-bottom: 20px;
}
/* OD4 — when the view-toggle sits in the contractor-header flex row next
to the Filters button, drop the bottom margin so both controls baseline
cleanly under the heading. */
.contractor-header .view-toggle { margin-bottom: 0; }
/* OD4 — Feed Filters button. Peer of the view-toggle segment:
matching 1.5px border, 8px 18px padding, 13px/600 label, 14px icon. */
.feed-filter-btn {
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
padding: 8px 18px; font-size: 13px; font-weight: 600;
background: var(--surface); color: var(--text);
border: 1.5px solid var(--border);
border-radius: var(--radius-sm);
cursor: pointer; font-family: inherit;
/* REN-145E: stabilize width across EN ('Filters') ↔ ES ('Filtros') so
the language toggle never reflows the header row. */
min-width: 110px;
transition: border-color 160ms var(--ease-out),
background-color 160ms var(--ease-out),
transform 160ms var(--ease-out);
}
.feed-filter-btn svg { width: 14px; height: 14px; }
.feed-filter-btn:hover { border-color: var(--orange); }
.feed-filter-btn:active { transform: scale(0.97); }
.feed-filter-btn.is-active {
background: var(--orange); color: #fff; border-color: var(--orange);
}
.view-toggle-btn {
padding: 8px 18px; font-size: 13px; font-weight: 600;
background: var(--surface); color: var(--text-secondary);
border: none; cursor: pointer; transition: all var(--transition);
display: inline-flex; align-items: center; justify-content: center; gap: 6px;
/* REN-145E: stabilize width across EN ('Grid'/'Map') ↔ ES
('Cuadrícula'/'Mapa'). 130px holds the longest label comfortably,
keeps both buttons equal width, and stops the segmented control
from jumping when language flips. */
min-width: 130px;
}
.view-toggle-btn:not(:last-child) { border-right: 1.5px solid var(--border); }
.view-toggle-btn.active { background: var(--orange); color: #fff; }
.view-toggle-btn:hover:not(.active) { background: var(--surface-alt); }
.map-container {
width: 100%; height: calc(100vh - 220px); min-height: 500px; border-radius: var(--radius);
border: 1px solid var(--border); background: var(--surface-alt);
position: relative; overflow: hidden; margin-bottom: 20px;
}
/* Rich map tooltip */
.map-rich-tooltip {
background: #fff !important; border: 1px solid var(--border) !important;
border-radius: 12px !important; box-shadow: 0 8px 24px rgba(0,0,0,0.14) !important;
padding: 0 !important; max-width: 450px !important;
white-space: normal !important;
word-wrap: break-word !important; overflow-wrap: break-word !important;
word-break: break-word !important;
}
.map-rich-tooltip .leaflet-tooltip-content {
padding: 0;
white-space: normal !important;
word-wrap: break-word !important; overflow-wrap: break-word !important;
word-break: break-word !important;
max-width: 450px;
}
.map-tooltip-rich {
padding: 18px 20px; font-family: 'Manrope', sans-serif;
min-width: 338px; max-width: 100%; box-sizing: border-box;
white-space: normal;
word-wrap: break-word; overflow-wrap: break-word; word-break: break-word;
}
.map-tooltip-rich > * { max-width: 100%; min-width: 0; }
.map-rich-tooltip::before { border-top-color: #fff !important; }
/* ================================================================
HOMEOWNER PROJECTS DASHBOARD
================================================================ */
.projects-header {
display: flex; justify-content: space-between; align-items: center;
margin-bottom: 28px;
}
.projects-header h2 { font-size: 28px; font-weight: 800; letter-spacing: -0.5px; }
.project-stage { margin-bottom: 28px; }
.project-stage-title {
font-size: 14px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.5px; color: var(--muted); margin-bottom: 12px;
display: flex; align-items: center; gap: 8px;
}
.project-stage-title .stage-dot {
width: 8px; height: 8px; border-radius: 50%;
}
.stage-starting .stage-dot { background: var(--warning); }
.stage-ongoing .stage-dot { background: var(--info); }
.stage-completed .stage-dot { background: var(--success); }
.project-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--rf-r-xl, 20px); padding: 18px 20px;
margin-bottom: 10px; display: flex; justify-content: space-between;
align-items: center; cursor: pointer; transition: all var(--transition);
}
.project-card:hover { border-color: var(--orange); box-shadow: var(--shadow-sm); }
.project-card-left { flex: 1; }
.project-card-title { font-size: 15px; font-weight: 600; margin-bottom: 3px; }
.project-card-meta { font-size: 13px; color: var(--text-secondary); }
.project-card-status {
font-size: 11px; font-weight: 700; padding: 3px 10px;
border-radius: 4px; text-transform: uppercase; letter-spacing: 0.3px;
}
.status-starting { background: var(--warning-light); color: var(--warning); }
.status-ongoing { background: var(--info-light); color: var(--info); }
.status-completed { background: var(--success-light); color: var(--success); }
.empty-projects {
text-align: center; padding: 48px 24px;
background: var(--surface-alt); border: 2px dashed var(--border);
border-radius: var(--radius); color: var(--text-secondary);
}
.empty-projects h3 { font-size: 18px; font-weight: 700; color: var(--text); margin-bottom: 8px; }
.empty-projects p { font-size: 14px; margin-bottom: 20px; }
/* ================================================================
HOMEOWNER MY PROJECTS — REDESIGNED CARD GRID
================================================================ */
.ho-mp-toolbar {
display: flex; align-items: center; justify-content: space-between;
margin-bottom: 20px; gap: 12px; flex-wrap: wrap;
}
.ho-mp-toolbar-left { display: flex; align-items: center; gap: 8px; }
.ho-mp-toolbar-right { display: flex; align-items: center; gap: 8px; }
.ho-project-grid {
display: grid;
grid-template-columns: repeat(2, 1fr);
gap: 20px;
}
.ho-project-grid[data-count="1"] {
grid-template-columns: minmax(0, 580px);
}
@media (max-width: 680px) {
.ho-project-grid { grid-template-columns: 1fr; }
}
.ho-project-card {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--rf-r-md, 12px);
box-shadow: var(--rf-shadow-card);
cursor: pointer;
overflow: hidden;
display: flex;
flex-direction: column;
transition: box-shadow 160ms cubic-bezier(0.23,1,0.32,1), transform 160ms cubic-bezier(0.23,1,0.32,1);
animation: sectionIn 220ms cubic-bezier(0.23,1,0.32,1) both;
}
@media (hover: hover) and (pointer: fine) {
.ho-project-card:hover { box-shadow: 0 4px 16px rgba(0,0,0,0.12), 0 0 0 2px rgba(249,115,22,0.50); transform: translateY(-1px); }
}
.ho-project-card:active { transform: scale(0.98); }
.ho-card-photo {
position: relative;
height: 148px;
background: var(--surface-alt, #F0EBE3);
display: flex; align-items: center; justify-content: center;
flex-shrink: 0;
border-bottom: 1px solid var(--border);
}
.ho-card-status-pill {
position: absolute; top: 12px; right: 12px;
font-size: 11px; font-weight: 700; padding: 4px 10px;
border-radius: 999px; text-transform: uppercase; letter-spacing: 0.4px;
white-space: nowrap;
}
.ho-card-delete-btn {
position: absolute; top: 10px; left: 10px;
background: rgba(255,255,255,0.9);
border: 1px solid var(--border);
border-radius: 8px;
width: 32px; height: 32px;
display: flex; align-items: center; justify-content: center;
color: var(--danger, #B03C36);
cursor: pointer;
transition: opacity 160ms cubic-bezier(0.23,1,0.32,1), transform 160ms cubic-bezier(0.23,1,0.32,1);
z-index: 2;
}
@media (hover: hover) and (pointer: fine) {
.ho-card-delete-btn:hover { opacity: 0.8; }
}
.ho-card-delete-btn:active { transform: scale(0.95); }
.ho-card-body {
padding: 16px 20px;
flex: 1;
display: flex;
flex-direction: column;
gap: 6px;
}
.ho-card-title {
font-size: 15px; font-weight: 700; color: var(--text);
line-height: 1.3; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ho-card-meta {
font-size: 13px; color: var(--text-secondary);
}
.ho-card-desc {
font-size: 13px; color: var(--text-secondary);
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; margin-top: 2px;
}
.ho-card-progress {
margin-top: 8px; padding-top: 12px;
border-top: 1px solid var(--border-light, #F0EBE3);
}
.ho-card-progress-slots {
display: flex; gap: 4px; margin-bottom: 6px;
}
.ho-card-progress-slot {
flex: 1; height: 6px; border-radius: 3px;
background: #E5E7EB;
transition: background 0.3s;
}
.ho-card-progress-slot.filled { background: var(--orange, #F97316); }
.ho-card-progress-label {
font-size: 12px; font-weight: 600;
}
.ho-card-footer {
padding: 12px 20px 16px;
display: flex; align-items: center; gap: 8px;
border-top: 1px solid var(--border-light, #F0EBE3);
}
/* Connected project contact row */
.ho-card-contact {
padding: 12px 20px 14px;
font-size: 13px; color: var(--text-secondary);
border-top: 1px solid var(--border-light, #F0EBE3);
background: var(--surface-alt, #FCF9F6);
}
/* REN-148: Mobile overrides for ho-project-card — placed AFTER base
rules so equal-specificity selectors win source-order at narrow widths.
Lets card titles wrap to two lines, shrinks the cover photo, and
tightens body/footer padding so the card feels right-sized on phones. */
@media (max-width: 640px) {
.ho-card-photo { height: 116px; }
.ho-card-title {
white-space: normal;
display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
overflow: hidden; text-overflow: ellipsis;
line-height: 1.25;
font-size: 15px;
}
.ho-card-body { padding: 12px 16px; gap: 4px; }
.ho-card-footer { padding: 10px 16px 12px; flex-wrap: wrap; }
.ho-card-meta { font-size: 12px; line-height: 1.35; }
}
/* ================================================================
BID SELECTION CONFIRM MODAL
================================================================ */
.bid-select-confirm {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); width: 100%; max-width: 440px;
padding: 32px; box-shadow: var(--shadow-lg);
animation: slideUp 0.25s ease;
}
.bid-select-confirm h3 { font-size: 18px; font-weight: 700; margin-bottom: 8px; }
.bid-select-confirm p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 20px; }
.bid-select-confirm .warn-box {
background: var(--warning-light); border: 1px solid #FDE68A;
border-radius: var(--radius-sm); padding: 12px 14px;
font-size: 13px; color: var(--warning); margin-bottom: 20px;
display: flex; align-items: flex-start; gap: 8px;
}
.bid-select-confirm .confirm-btns { display: flex; gap: 10px; justify-content: flex-end; }
/* Print styles removed — PDF uses new-window approach instead */
/* ================================================================
RESPONSIVE
================================================================ */
/* Phase C: hide landing nav center tabs at medium widths to prevent overlap with nav-right Login/Create Account buttons */
@media (max-width: 1100px) {
#landing > .dark-hero-wrapper > .nav .nav-center { display: none; }
}
@media (max-width: 768px) {
.nav { padding: 14px 20px; }
.hero-banner { padding: 80px 20px 60px; min-height: 85vh; }
.hero-banner h1 { font-size: 32px; }
.hero-banner .hero-sub { font-size: 16px; }
.persona-selector { gap: 10px; }
.persona-btn { padding: 12px 20px; font-size: 14px; }
.persona-hero { padding: 48px 20px; }
.persona-hero-grid { grid-template-columns: 1fr; gap: 32px; }
.hiw-section { padding: 48px 20px; }
.hiw-step .video-slot { aspect-ratio: 16/9; }
/* REN-154: persona stack + hiw grid responsive */
.persona-stack { padding: 56px 20px 48px; }
.persona-stack-h2 { font-size: 28px; }
.persona-stack-tagline { font-size: 15.5px; margin-bottom: 28px; }
.persona-stack-video { border-radius: 14px; margin-bottom: 28px; }
.persona-stack-ctas { flex-direction: column; align-items: stretch; width: 100%; max-width: 320px; }
.persona-stack-ctas .btn { width: 100%; }
.hiw-grid { grid-template-columns: 1fr; gap: 14px; }
.hiw-card { padding: 22px 20px; }
.hero-banner .hero-scroll-cue { bottom: 20px; font-size: 12px; }
.hero-banner .hero-cta-row .btn-lg { padding: 14px 26px; font-size: 16px; }
.gallery-section { padding: 48px 20px; }
.before-after { height: 280px; }
.gate-cards { flex-direction: column; align-items: center; }
.gate-card { width: 100%; max-width: 320px; }
.persona-gate { padding: 60px 20px 80px; min-height: auto; }
.projects-preview-section { padding: 48px 20px; }
.project-cards-grid { grid-template-columns: 1fr; }
.testimonial-shells-grid { grid-template-columns: 1fr; }
.platform-deep-section { padding: 48px 20px; }
.flips-section { padding: 48px 20px; }
.testimonials-section { padding: 48px 20px; }
#landing > .dark-hero-wrapper > .nav .nav-center { display: none; }
.footer-simple { flex-direction: column; gap: 20px; }
.hero-visual { padding: 0 20px; margin-top: -32px; }
.how-section, .social-proof { padding: 0 20px; }
.dashboard, .contractor-page, .profile-page { padding: 24px 16px; }
.form-container { padding: 24px; }
.hero-banner .hero-btns { flex-direction: column; align-items: center; }
.hero-banner .hero-btns .btn { width: 100%; max-width: 280px; }
.image-divider { height: 220px; margin: 60px 0; }
.cta-banner { padding: 60px 20px; }
.visual-showcase { padding: 0 20px; }
.photo-gallery { padding: 0 20px; }
.showcase-img { height: 170px; }
.job-grid { grid-template-columns: 1fr; }
/* REN-11: previously `.nav-links { display: none; }` left mobile portrait
with no way to navigate (no hamburger or bottom tab bar exists). Keep
links visible as a horizontally-scrollable strip with tighter spacing. */
.nav { gap: 8px; }
.nav-links {
display: flex;
gap: 16px;
overflow-x: auto;
overflow-y: hidden;
flex: 1 1 auto;
min-width: 0;
scrollbar-width: none;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}
.nav-links::-webkit-scrollbar { display: none; }
.nav-links .nav-link { flex: 0 0 auto; font-size: 13px; white-space: nowrap; }
.nav-right { flex: 0 0 auto; gap: 8px; }
.profile-header { flex-direction: column; text-align: center; }
.profile-grid { grid-template-columns: 1fr; }
}
/* ================================================================
SCARCITY INDICATORS
================================================================ */
.scarcity-pill {
display: inline-flex; align-items: center; gap: 4px;
font-size: 12px; font-weight: 700; padding: 3px 10px;
border-radius: 12px; letter-spacing: 0.2px;
}
.scarcity-open { background: var(--surface-alt); color: var(--text-secondary); }
.scarcity-urgent { background: #FFF4ED; color: var(--orange); border: 1px solid rgba(249,115,22,0.25); }
.scarcity-closed { background: #FEF2F2; color: var(--danger); border: 1px solid #FECACA; }
/* ================================================================
LOW-BID WARNING
================================================================ */
.low-bid-warning {
background: var(--warning-light); border: 1px solid #FDE68A;
border-radius: var(--radius-sm); padding: 10px 14px;
font-size: 13px; color: var(--warning); margin-top: 10px;
display: flex; align-items: flex-start; gap: 8px; line-height: 1.5;
}
.low-bid-warning svg { flex-shrink: 0; margin-top: 2px; }
.market-estimate-ref {
background: var(--info-light); border: 1px solid #BFDBFE;
border-radius: var(--radius-sm); padding: 10px 14px;
font-size: 13px; color: var(--info); margin-bottom: 16px;
display: flex; align-items: center; gap: 8px;
}
/* ================================================================
TRUST BADGES (bid cards & profile)
================================================================ */
.trust-badges { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.trust-badge {
display: inline-flex; align-items: center; gap: 4px;
font-size: 11px; font-weight: 700; padding: 3px 10px;
border-radius: 20px; letter-spacing: 0.2px;
}
.trust-badge-insurance { background: var(--success-light); color: var(--success); border: 1px solid #BBF7D0; }
.trust-badge-toprated { background: var(--orange-light); color: var(--orange); border: 1px solid rgba(249,115,22,0.2); }
.trust-badge-jobs { background: var(--surface-alt); color: var(--text-secondary); border: 1px solid var(--border); }
/* ================================================================
STRUCTURED VALUE PROPOSITION (Mad Libs)
================================================================ */
.svp-section { margin-bottom: 14px; }
.svp-section-title {
font-size: 12px; font-weight: 700; color: var(--text-secondary);
text-transform: uppercase; letter-spacing: 0.5px; margin-bottom: 8px;
}
.svp-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 6px;
}
@media (max-width: 500px) { .svp-grid { grid-template-columns: 1fr; } }
.svp-checkbox {
display: flex; align-items: center; gap: 8px;
font-size: 13px; color: var(--text); cursor: pointer;
padding: 6px 10px; background: var(--surface-alt);
border: 1px solid var(--border-light); border-radius: var(--radius-sm);
transition: all var(--transition);
}
.svp-checkbox:hover { border-color: var(--orange); }
.svp-checkbox input[type="checkbox"] { accent-color: var(--orange); width: 16px; height: 16px; }
/* ================================================================
BID FLOOR ERROR
================================================================ */
.bid-floor-error {
background: #FEF2F2; border: 1px solid #FECACA; color: var(--danger);
border-radius: var(--radius-sm); padding: 12px 14px; font-size: 13px;
margin-bottom: 16px; display: flex; align-items: flex-start; gap: 8px;
line-height: 1.5;
}
.bid-floor-error svg { flex-shrink: 0; margin-top: 2px; }
/* ================================================================
SANITY CHECK
================================================================ */
.sanity-check-box {
background: var(--warning-light); border: 1px solid #FDE68A;
border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 16px;
}
.sanity-check-box label {
display: flex; align-items: flex-start; gap: 10px;
font-size: 13px; color: var(--text); cursor: pointer; line-height: 1.6;
}
.sanity-check-box input[type="checkbox"] {
accent-color: var(--orange); width: 18px; height: 18px; margin-top: 3px; flex-shrink: 0;
}
.btn:disabled, .btn[disabled] {
opacity: 0.45; cursor: not-allowed; pointer-events: none;
}
/* ================================================================
LEAD FEE / INVOICE CARDS
================================================================ */
.fee-card {
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); padding: 32px; text-align: center;
box-shadow: var(--shadow-sm); max-width: 520px; margin: 0 auto;
}
.fee-card h3 { font-size: 22px; font-weight: 700; margin-bottom: 8px; }
.fee-card p { font-size: 14px; color: var(--text-secondary); line-height: 1.6; margin-bottom: 20px; }
.fee-amount {
font-size: 40px; font-weight: 800; color: var(--orange); margin-bottom: 6px;
}
.fee-breakdown { font-size: 13px; color: var(--text-secondary); margin-bottom: 20px; }
.fee-methods { display: flex; flex-direction: column; gap: 8px; margin-bottom: 20px; text-align: left; max-width: 340px; margin-left: auto; margin-right: auto; }
.fee-no-refund {
font-size: 11px; color: var(--muted); margin-top: 12px; font-style: italic;
}
/* ================================================================
ACCOUNT HEALTH
================================================================ */
.health-bar {
display: flex; align-items: center; gap: 12px; margin-bottom: 12px;
}
.health-label { font-size: 15px; font-weight: 700; }
.health-badge {
display: inline-flex; align-items: center; gap: 4px;
font-size: 12px; font-weight: 700; padding: 4px 12px;
border-radius: 20px;
}
.health-excellent { background: var(--success-light); color: var(--success); border: 1px solid #BBF7D0; }
.health-stats { font-size: 14px; color: var(--text-secondary); margin-bottom: 8px; }
.health-explainer { font-size: 12px; color: var(--muted); line-height: 1.6; }
/* ================================================================
NOTIFICATION PREFS
================================================================ */
.pref-row { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; flex-wrap: wrap; }
.pref-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); min-width: 130px; }
.pref-value { font-size: 14px; color: var(--text); }
.pref-chip-grid { display: flex; flex-wrap: wrap; gap: 6px; }
.pref-chip {
background: var(--orange-light); color: var(--orange);
border: 1px solid rgba(249,115,22,0.2); border-radius: 20px;
padding: 4px 12px; font-size: 12px; font-weight: 600;
}
/* Modal scroll — needed for multi-field contractor setup step */
.modal { max-height: 90vh; overflow-y: auto; }
/* Contractor-only signup extra fields */
#companyGroup { display: none; }
/* Specialty checkbox grid */
.specialty-grid {
display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 4px;
}
.specialty-chip {
display: flex; align-items: center; gap: 8px;
padding: 9px 12px; border: 1.5px solid var(--border);
border-radius: var(--radius-sm); font-size: 13px; cursor: pointer;
background: var(--surface-alt); transition: all var(--transition);
user-select: none;
}
.specialty-chip:hover { border-color: var(--orange); }
.specialty-chip input[type="checkbox"] {
accent-color: var(--orange); width: 15px; height: 15px; flex-shrink: 0;
}
.specialty-chip:has(input:checked) {
border-color: var(--orange); background: var(--orange-light);
color: var(--orange); font-weight: 600;
}
/* ID verification step */
.id-verify-card {
background: var(--surface-alt); border: 1.5px solid var(--border);
border-radius: var(--radius); padding: 20px; margin: 16px 0;
}
.id-verify-badge {
display: inline-flex; align-items: center; gap: 5px;
padding: 3px 10px; border-radius: 20px; font-size: 11px; font-weight: 700;
}
.id-verify-badge.pending { background: #FEF3C7; color: #92400E; }
.id-verify-badge.verified { background: var(--success-light); color: var(--success); }
.id-verify-docs {
display: flex; gap: 10px; margin-bottom: 16px;
}
.id-verify-doc-item {
flex: 1; background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 14px; text-align: center;
}
.id-verify-doc-item .doc-icon { font-size: 24px; margin-bottom: 6px; }
.id-verify-doc-item .doc-label { font-size: 12px; font-weight: 600; }
.id-verify-doc-item .doc-sub { font-size: 11px; color: var(--muted); }
.persona-logo {
display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 700;
}
.persona-logo .persona-p {
width: 22px; height: 22px; background: #181F2E; border-radius: 4px;
display: flex; align-items: center; justify-content: center;
color: #fff; font-size: 13px; font-weight: 800;
}
/* ================================================================
CONTRACTOR TOOLS SUITE — CSS
Pass 1: Full desktop sidebar layout, all 8 tools, Supabase CRUD,
PDF export, won-bid scope templates, file uploads.
================================================================ */
/* ── Tools Shell ── */
/* Pass 7-9: injection fixes throughout, print validation, scope print escaping,
category order, won-bids UX, invoice hint reset, costing toggle */
#contractorTools { min-height: 100vh; }
/* Scanner mode: form lives inside contractorTools — constrain width like .dashboard */
body.scanner-contractor-mode #projectFormContainer {
max-width: 1100px;
margin: 0 auto;
padding: 40px;
}
/* K8 / REN-129: Contractor Tools shell.
Previously `max-width: 1400px; margin: 0 auto;` centered the whole shell,
which left a cream gutter to the LEFT of the white sidebar at viewports
>1400px. The sidebar should sit flush against the left edge of the
viewport (Linear/Notion/Slack pattern). Cap .ct-main internally so the
content column keeps the same visual width as before. */
.ct-shell {
display: flex; align-items: flex-start;
width: 100%;
}
.ct-sidebar {
width: 240px; flex-shrink: 0;
background: var(--surface); border-right: 1px solid var(--border);
padding: 24px 0;
overflow-y: auto;
display: flex; flex-direction: column;
position: sticky; top: 0;
height: 100vh;
}
.ct-sidebar-brand {
padding: 0 20px 20px; border-bottom: 1px solid var(--border-light);
margin-bottom: 12px;
}
.ct-sidebar-brand h2 {
font-size: 16px; font-weight: 800; color: var(--text); letter-spacing: -0.3px;
}
.ct-sidebar-brand p {
font-size: 12px; color: var(--muted); margin-top: 2px;
}
.ct-nav-item {
display: flex; align-items: center; gap: 10px;
padding: 10px 20px; font-size: 14px; font-weight: 500;
color: var(--text-secondary); cursor: pointer;
transition: all var(--transition); border-radius: 0;
border: none; background: none; width: 100%; text-align: left;
}
.ct-nav-item:hover { background: var(--surface-alt); color: var(--text); }
.ct-nav-item.active {
background: var(--orange-light); color: var(--orange);
font-weight: 600; border-right: 2px solid var(--orange);
}
/* K11: DS icon spec — Lucide stroke-width 1.5, round caps */
.ct-nav-item svg { flex-shrink: 0; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.persona-btn svg, .hiw-icon svg, .btn svg:not([fill]) { stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.feature-chip svg { stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; fill: none; }
.ct-main {
flex: 1; min-width: 0; padding: 36px 40px;
background: var(--bg);
/* REN-129: cap content column at the original 1160px (1400 shell - 240
sidebar) so the sidebar can be flush left without main running wide
on huge displays. */
max-width: 1160px;
}
.ct-tool-view { display: none; }
.ct-tool-view.ct-active { display: block; animation: fadeInUp 0.3s ease; }
/* ── Tools Hub Cards ── */
.ct-hub-grid {
display: grid; gap: 16px; margin-top: 24px;
align-items: stretch;
}
/* REN-160: use auto-fit minmax so cards wrap cleanly at any container
width (laptop split-screen at ~1024px, tablet at ~768px, mobile at
~360px) without overflow or per-word text compression. The min sizes
(280px primary, 220px secondary) preserve icon + title + 2-line body
legibility before the grid drops a column. */
/* Primary tier: 3 prominent orange-outlined tools (Scanner, Active Jobs, Circles) */
.ct-hub-grid--primary { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
/* Secondary tier: 4 supporting tools, smaller visual weight */
.ct-hub-grid--secondary { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); margin-top: 16px; }
.ct-hub-section-label {
font-size: 12px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.5px; color: var(--text-secondary);
margin: 32px 0 4px;
}
.ct-hub-card {
background: var(--surface); border-radius: var(--radius);
padding: 24px; cursor: pointer;
box-shadow: var(--shadow-sm);
transition: all 0.25s ease; display: flex; gap: 16px; align-items: flex-start;
height: 100%;
}
.ct-hub-card { border-left: 3px solid transparent; } /* prevent hover layout shift */
.ct-hub-card:hover {
transform: translateY(-3px); box-shadow: var(--shadow-md);
border-left-color: var(--orange);
}
/* Primary cards get a permanent left accent so they read as the prominent trio */
.ct-hub-card--primary { border-left-color: var(--orange); }
.ct-hub-icon {
width: 48px; height: 48px; border-radius: 12px;
display: flex; align-items: center; justify-content: center;
font-size: 22px; flex-shrink: 0;
}
.ct-hub-card h4 { font-size: 15px; font-weight: 700; margin-bottom: 4px; }
.ct-hub-card p { font-size: 13px; color: var(--text-secondary); line-height: 1.5; }
/* ── Tool Header ── */
.ct-tool-header {
display: flex; justify-content: space-between; align-items: flex-start;
margin-bottom: 28px; flex-wrap: wrap; gap: 12px;
}
.ct-tool-header h2 { font-size: 26px; font-weight: 800; letter-spacing: -0.5px; }
.ct-tool-header p { font-size: 14px; color: var(--text-secondary); margin-top: 4px; }
/* REN-520: tool-header action button groups wrap instead of clipping off the
right edge on narrow widths (mobile had New/Save Draft/Export PDF unreachable —
the group was ~641px wide in a 390px viewport with overflow hidden). Harmless
on desktop: only wraps when the row can't fit. Scoped to tool headers so the
global .flex-row-10 utility is untouched. */
.ct-tool-header .flex-row-10 { flex-wrap: wrap; }
/* ── REN-43: Contractor Tools mobile layout ── */
/* At narrow widths the 240px sidebar squeezed .ct-main to ~80px, forcing
per-word text wrap inside hub cards. Stack the shell, make the sidebar
a horizontal scrolling chip-nav at top, and collapse the hub grids. */
@media (max-width: 860px) {
.ct-shell { flex-direction: column; }
.ct-sidebar {
width: 100%; height: auto; position: static;
flex-direction: row; flex-wrap: nowrap;
overflow-x: auto; overflow-y: hidden;
padding: 8px 12px; gap: 6px;
border-right: none; border-bottom: 1px solid var(--border);
-webkit-overflow-scrolling: touch;
}
.ct-sidebar-brand { display: none; }
.ct-nav-item {
flex-shrink: 0; width: auto;
padding: 8px 14px; border-radius: 999px;
font-size: 13px; white-space: nowrap;
}
.ct-nav-item.active {
background: var(--orange-light); color: var(--orange);
border-right: none;
}
/* Sidebar footer wrapper ("Back to Project Feed") */
.ct-sidebar > div[style*="margin-top:auto"] {
margin-top: 0 !important; padding: 0 !important;
border-top: none !important; flex-shrink: 0;
}
.ct-main {
max-width: 100%; padding: 20px 16px;
}
.ct-tool-header h2 { font-size: 22px; }
/* REN-160: at narrow widths the auto-fit minmax above already wraps,
but tighten card padding for the smaller chrome. */
.ct-hub-card { padding: 16px; gap: 12px; }
.ct-hub-icon { width: 40px; height: 40px; }
}
/* REN-160: ultra-narrow safety net — drop minmax floor so a single card
per row never overflows on phones (auto-fit otherwise refuses to wrap
below 220px even when container is < 220px). */
@media (max-width: 480px) {
.ct-hub-grid--primary { grid-template-columns: 1fr; }
.ct-hub-grid--secondary { grid-template-columns: 1fr; }
}
/* ── Data Tables ── */
.ct-table-wrap { overflow-x: auto; margin-top: 20px; }
.ct-table {
width: 100%; border-collapse: collapse; font-size: 14px;
background: var(--surface); border-radius: var(--radius);
overflow: hidden; box-shadow: var(--shadow-sm);
}
.ct-table thead th {
background: var(--surface-alt); text-align: left;
padding: 12px 16px; font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.5px;
color: var(--text-secondary); border-bottom: 2px solid var(--border);
}
.ct-table tbody tr { border-bottom: 1px solid var(--border-light); }
.ct-table tbody tr:last-child { border-bottom: none; }
.ct-table tbody tr:hover { background: var(--surface-alt); }
.ct-table td { padding: 14px 16px; vertical-align: middle; }
/* ── Empty State ── */
.ct-empty {
text-align: center; padding: 60px 24px;
background: var(--surface); border-radius: var(--radius);
box-shadow: var(--shadow-sm);
}
.ct-empty-icon { font-size: 48px; margin-bottom: 16px; opacity: 0.5; }
.ct-empty h3 { font-size: 18px; font-weight: 700; margin-bottom: 6px; }
.ct-empty p { font-size: 14px; color: var(--text-secondary); max-width: 400px; margin: 0 auto 20px; }
/* ── Metric Boxes ── */
.ct-metrics { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 14px; margin-bottom: 24px; }
.ct-metric {
background: var(--surface); border-radius: var(--radius-md);
padding: 16px 20px; box-shadow: var(--shadow-sm);
}
.ct-metric-val { font-size: 22px; font-weight: 800; color: var(--orange); }
.ct-metric-lbl { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ct-metric.green .ct-metric-val { color: var(--success); }
.ct-metric.red .ct-metric-val { color: var(--danger); }
/* ── Scope Builder ── */
.ct-scope-items { margin-top: 16px; }
.ct-scope-row {
display: grid; grid-template-columns: 2fr 3fr 1.5fr auto;
gap: 10px; align-items: start; margin-bottom: 10px;
}
.ct-scope-row input, .ct-scope-row textarea {
background: var(--surface-alt); border: 1.5px solid var(--border);
border-radius: var(--radius-sm); padding: 9px 12px;
font-family: inherit; font-size: 13px; color: var(--text);
transition: border-color var(--transition); width: 100%;
}
.ct-scope-row input:focus, .ct-scope-row textarea:focus {
outline: none; border-color: var(--orange); box-shadow: 0 0 0 3px var(--orange-ring);
}
.ct-scope-row textarea { min-height: 70px; resize: vertical; }
.ct-scope-del {
width: 32px; height: 32px; border-radius: 50%;
background: #FEF2F2; color: var(--danger); border: none;
cursor: pointer; display: flex; align-items: center; justify-content: center;
font-size: 16px; flex-shrink: 0; margin-top: 6px;
transition: background var(--transition);
}
.ct-scope-del:hover { background: #FECACA; }
.ct-scope-totals {
background: var(--surface-alt); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 16px 20px; margin-top: 16px;
}
/* ── Invoice / Lien Waiver Preview ── */
/* REN-240 (5/17): preview AND PDF use Outfit per brand spec (CLAUDE.md).
Outfit is the brand display face used across the rest of the app —
matching it here keeps the Estimate preview / printed PDF consistent
with the scanner card, homepage, and contractor dashboard. */
.ct-doc-preview, .ct-doc-preview * {
font-family: 'Outfit', system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
}
.ct-doc-preview {
background: #fff; border: 1px solid var(--border);
border-radius: var(--radius); padding: 40px;
box-shadow: var(--shadow-sm); font-size: 13px; line-height: 1.6;
color: #1A1A1A;
max-width: 612px; /* US Letter width at 72dpi */
min-height: 792px; /* US Letter height at 72dpi */
aspect-ratio: 8.5 / 11;
overflow-y: auto;
}
.ct-doc-preview table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 12px; }
.ct-doc-preview th {
background: #F7F4F0; text-align: left;
padding: 9px 12px; font-size: 11px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.05em;
border: 1px solid #E8E2DA; color: #1A1A1A;
}
.ct-doc-preview td {
padding: 9px 12px; border: 1px solid #E8E2DA; vertical-align: top;
}
.ct-doc-preview tr.total-row td,
.ct-doc-preview .doc-total-row td {
background: #FFF7ED; font-size: 13px;
}
.ct-doc-preview .doc-total {
font-size: 18px; font-weight: 800; color: var(--orange); margin-top: 8px;
}
.ct-doc-preview h4.sub-label,
.ct-doc-preview .sub-label {
font-size: 12px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.05em; color: #1A1A1A; margin: 0 0 6px;
}
.ct-doc-preview h5.sub-label {
font-size: 11px; font-weight: 700; letter-spacing: 0.02em;
color: #1A1A1A; margin: 6px 0 2px; text-transform: none;
}
.ct-doc-preview ul { margin: 0 0 8px; padding-left: 18px; }
.ct-doc-preview li { margin-bottom: 2px; font-size: 12px; line-height: 1.5; }
.ct-doc-preview p { margin: 0 0 6px; }
/* REN-254 (5/18) — true source of mobile invoice overflow:
`.ct-doc-preview` carries `min-height: 792px` + `aspect-ratio: 8.5/11`
(US-Letter at 72dpi). Even with `max-width: 100%` set at 800px, the
aspect-ratio + min-height combination forces an implicit MIN-WIDTH
of 792 * 8.5/11 ≈ 612px. On a 360–414px phone viewport, the box
stays ~612px wide regardless and pushes the page sideways. The fix:
at every mobile breakpoint, drop both `min-height` and the
`aspect-ratio` constraint so content drives the height and width
can actually shrink to 100% of the parent. */
@media (max-width: 800px) {
.ct-doc-preview {
padding: 24px 16px;
max-width: 100%;
min-height: 0;
aspect-ratio: auto;
}
}
@media (max-width: 480px) {
.ct-doc-preview {
padding: 16px 10px;
font-size: 12px;
min-height: 0;
aspect-ratio: auto;
max-width: 100%;
}
.ct-doc-preview th, .ct-doc-preview td { padding: 6px 8px; font-size: 11px; }
.ct-doc-preview .doc-total { font-size: 15px; }
}
/* ── REN-240 tail (5/17): live preview is now a single long scrollable
document, mirroring how the PDF print-preview renders. The earlier
transform:scale() approach locked the preview to one visible page,
which clipped material arrangement / workmanship under the fold.
Outer wrap caps height and scrolls; inner flows at natural size. */
.ct-doc-preview-wrap {
position: relative;
width: 100%;
max-width: 612px;
max-height: calc(100vh - 220px);
margin: 0 auto;
background: #fff;
border: 1px solid var(--border);
border-radius: var(--radius);
box-shadow: var(--shadow-sm);
overflow-y: auto;
overflow-x: hidden;
}
.ct-doc-preview-wrap > .ct-doc-preview {
position: static;
width: 100%;
height: auto;
max-width: none;
min-height: 0;
aspect-ratio: auto;
border: none;
border-radius: 0;
box-shadow: none;
background: transparent;
overflow: visible;
transform: none;
}
@media (max-width: 800px) {
.ct-doc-preview-wrap { max-width: 100%; max-height: 70vh; }
}
/* ── Progress View Toggle ── */
.ct-prog-view-btn.active { background: var(--orange-light); color: var(--orange); border-color: var(--orange); }
/* ── Progress Timeline ── */
.ct-timeline { margin-top: 0; }
.ct-timeline-item {
display: flex; gap: 16px; padding: 16px 0;
border-bottom: 1px solid var(--border-light);
}
.ct-timeline-item:last-child { border-bottom: none; }
.ct-timeline-dot {
width: 36px; height: 36px; border-radius: 50%;
display: flex; align-items: center; justify-content: center;
font-size: 14px; flex-shrink: 0;
}
.ct-timeline-dot.not-started { background: var(--surface-alt); color: var(--muted); border: 2px solid var(--border); }
.ct-timeline-dot.in-progress { background: var(--warning-light); color: var(--warning); border: 2px solid var(--warning); }
.ct-timeline-dot.completed { background: var(--success-light); color: var(--success); border: 2px solid var(--success); }
.ct-timeline-content { flex: 1; }
.ct-timeline-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
.ct-timeline-job { font-size: 13px; font-weight: 700; color: var(--text); }
.ct-timeline-date { font-size: 12px; color: var(--muted); }
.ct-timeline-note { font-size: 13px; color: var(--text-secondary); line-height: 1.6; }
.ct-timeline-photo { margin-top: 8px; }
.ct-timeline-photo img {
max-height: 80px; border-radius: 6px; border: 1px solid var(--border-light);
}
/* ── Status Badge ── */
.ct-status {
display: inline-block; font-size: 11px; font-weight: 700;
padding: 3px 10px; border-radius: 20px; text-transform: uppercase; letter-spacing: 0.3px;
}
.ct-status.not-started { background: var(--surface-alt); color: var(--muted); border: 1px solid var(--border); }
.ct-status.in-progress { background: var(--warning-light); color: var(--warning); }
.ct-status.completed { background: var(--success-light); color: var(--success); }
.ct-status.expired { background: #FEF2F2; color: var(--danger); }
.ct-status.expiring { background: var(--warning-light); color: var(--warning); }
.ct-status.valid { background: var(--success-light); color: var(--success); }
.ct-status.coi { background: var(--success-light); color: var(--success); }
.ct-status.license { background: var(--info-light); color: var(--info); }
.ct-status.w9 { background: #F5F3FF; color: #7C3AED; }
.ct-status.contract { background: var(--orange-light); color: var(--orange); }
.ct-status.materials { background: var(--orange-light); color: var(--orange); }
.ct-status.labor { background: var(--info-light); color: var(--info); }
.ct-status.equipment { background: var(--warning-light); color: var(--warning); }
.ct-status.other { background: var(--surface-alt); color: var(--text-secondary); border: 1px solid var(--border); }
/* ── Expense Chart Bars ── */
.ct-cat-bar { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.ct-cat-bar-label { font-size: 13px; color: var(--text-secondary); min-width: 80px; }
.ct-cat-bar-track {
flex: 1; height: 8px; background: var(--border); border-radius: 4px; overflow: hidden;
}
.ct-cat-bar-fill { height: 100%; border-radius: 4px; transition: width 0.5s ease; }
.ct-cat-bar-amt { font-size: 13px; font-weight: 700; min-width: 70px; text-align: right; }
/* REN-255: Lien Waiver Preview Box + Document Vault CSS removed (tools deleted) */
/* ── Loading / Error states ── */
.ct-loading {
display: flex; align-items: center; gap: 10px;
padding: 24px; color: var(--text-secondary); font-size: 14px;
}
.ct-spinner {
width: 18px; height: 18px; border: 2.5px solid var(--border);
border-top-color: var(--orange); border-radius: 50%;
animation: ctSpin 0.7s linear infinite; flex-shrink: 0;
}
@keyframes ctSpin { to { transform: rotate(360deg); } }
.ct-error {
background: #FEF2F2; border: 1px solid #FECACA;
border-radius: var(--radius-sm); padding: 12px 16px;
font-size: 13px; color: var(--danger); display: flex; align-items: center; gap: 8px;
}
/* ── Scanner Home — saved baselines list ── */
.ct-scanner-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(320px, 1fr));
gap: 16px;
margin-top: 16px;
}
.ct-scanner-card {
background: var(--surface);
border: 1px solid var(--border);
border-left: 3px solid var(--orange);
border-radius: var(--radius);
padding: 18px 20px;
box-shadow: var(--shadow-sm);
display: flex;
flex-direction: column;
gap: 14px;
transition: box-shadow var(--transition), transform 160ms var(--ease-out, ease-out);
}
.ct-scanner-card:hover { box-shadow: var(--shadow-md); }
.ct-scanner-card-body { flex: 1; min-width: 0; }
.ct-scanner-card-body h4 {
font-size: 16px;
font-weight: 700;
color: var(--text);
margin: 0 0 4px;
line-height: 1.3;
overflow-wrap: anywhere;
}
.ct-scanner-card-sub {
font-size: 13px;
color: var(--text-secondary);
margin: 0 0 8px;
}
.ct-scanner-card-desc {
font-size: 13px;
color: var(--muted);
line-height: 1.45;
margin: 0 0 10px;
}
.ct-scanner-card-meta {
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.4px;
color: var(--muted);
}
.ct-scanner-card-actions {
display: flex;
gap: 8px;
align-items: center;
padding-top: 10px;
border-top: 1px solid var(--border);
}
.ct-scanner-card-actions .btn { flex: 0 0 auto; }
.ct-scanner-card-actions .btn-text { color: var(--danger); }
/* ── Panel with two-column form+preview layout ── */
/* Form gets more breathing room than preview — preview is a thumbnail. */
.ct-two-col {
display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); gap: 28px; align-items: start;
}
@media (max-width: 1100px) { .ct-two-col { grid-template-columns: 1fr; } }
/* Estimate Builder line-items row — Task Description gets the most room. */
.sow-line-row {
display: grid !important;
grid-template-columns: 1.4fr 3fr 1.3fr 1.3fr auto !important;
gap: 10px;
align-items: center;
}
.sow-line-row .form-input { width: 100%; min-width: 0; }
/* Kill the 1-penny number-spinner on the Price input. Keep numeric keypad on mobile. */
.sow-line-row input[type="number"]::-webkit-outer-spin-button,
.sow-line-row input[type="number"]::-webkit-inner-spin-button {
-webkit-appearance: none;
appearance: none;
margin: 0;
}
.sow-line-row input[type="number"] {
-moz-appearance: textfield !important;
-webkit-appearance: textfield !important;
appearance: textfield !important;
}
/* REN-486 (item b): textareas auto-grow (JS) — kill the per-box scrollbar
and resize handle ("slider") so all the text is visible. */
.ct-scope-row textarea { resize: none; overflow: hidden; min-height: 44px; }
/* REN-486 (item b): line-item rows render like the Scope-of-Work table —
one bordered card per line with equal-height cells. Desktop only; the
<=640px block below restyles rows into stacked labelled cards. Targets
data rows (.ct-scope-row); the header (.sow-line-head) keeps plain labels. */
@media (min-width: 641px) {
.ct-scope-row.sow-line-row {
gap: 0 !important;
align-items: stretch;
border: 1px solid var(--border);
border-radius: var(--radius-sm);
background: var(--surface);
margin-bottom: 10px;
overflow: hidden;
}
/* Each field fills its cell; the row border + per-cell right borders draw
the table grid. No individual radius/shadow. */
.ct-scope-row.sow-line-row > textarea,
.ct-scope-row.sow-line-row > input,
.ct-scope-row.sow-line-row > .sow-price-cell {
border: none !important;
border-right: 1px solid var(--border) !important;
border-radius: 0 !important;
background: transparent !important;
box-shadow: none !important;
margin: 0;
}
/* Area + Task: text top-left. */
.ct-scope-row.sow-line-row > textarea {
text-align: left; vertical-align: top; line-height: 1.45;
}
/* Measurement: single line, centered in its tall cell. */
.ct-scope-row.sow-line-row > input.sow-cell-measure { text-align: center; height: 100%; }
/* Price cell: centered vertically + horizontally. */
.ct-scope-row.sow-line-row > .sow-price-cell {
justify-content: center; align-items: center; padding: 8px 10px; gap: 5px;
}
.ct-scope-row.sow-line-row .sow-price-input-wrap { justify-content: center; }
.ct-scope-row.sow-line-row .sow-price-input-wrap input { text-align: center; }
.ct-scope-row.sow-line-row .sow-price-icon { align-self: center; }
/* Focus highlight without the 3px ring (it would spill past the table border). */
.ct-scope-row.sow-line-row > textarea:focus,
.ct-scope-row.sow-line-row > input:focus,
.ct-scope-row.sow-line-row > .sow-price-cell:focus-within {
outline: none;
background: var(--orange-light) !important;
box-shadow: inset 0 0 0 2px var(--orange) !important;
}
/* Delete button sits in the last cell, vertically centered, with breathing room. */
.ct-scope-row.sow-line-row > .ct-scope-del { align-self: center; margin: 0 8px; }
/* Column header aligns over the gap:0 cells — labels padded to the cell
text inset; Measurement + Price centered to match their cells. */
.sow-line-head.sow-line-row { gap: 0 !important; }
.sow-line-head > span:nth-child(1),
.sow-line-head > span:nth-child(2) { padding-left: 14px; }
.sow-line-head > span:nth-child(3),
.sow-line-head > span:nth-child(4) { text-align: center; }
}
.ct-form-card {
background: var(--surface); border-radius: var(--radius);
padding: 28px; box-shadow: var(--shadow-sm);
}
.ct-section-label {
font-size: 12px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.5px; color: var(--muted); margin-bottom: 12px; margin-top: 20px;
}
.ct-section-label:first-child { margin-top: 0; }
/* Won-bid template selector */
.ct-template-select {
background: var(--orange-light); border: 1.5px solid rgba(249,115,22,0.3);
border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 20px;
}
.ct-template-select label {
font-size: 13px; font-weight: 600; color: var(--orange); display: block; margin-bottom: 8px;
}
/* ════════ REN-487: full-width Estimate Builder ════════ */
/* Running total bar — prominent at top, updates on every price edit.
Uses orange-tint surface + orange text rather than a solid-orange fill
so it doesn't compete with the single orange Export-PDF CTA (one-orange
rule). */
/* REN-521: stale-price re-price banner. Soft attention cue (not an error) —
brand orange accent on the warm app background; wraps on narrow widths. */
/* REN-539: estimate branding controls (mode toggle + custom panel) */
.sow-brand { margin-top: 4px; }
.sow-brand__modes { display: flex; gap: 12px; flex-wrap: wrap; }
.sow-brand__mode {
flex: 1 1 200px; text-align: left; cursor: pointer;
display: flex; flex-direction: column; gap: 2px;
background: var(--surface); border: 1.5px solid var(--border);
border-radius: var(--radius); padding: 12px 14px;
transition: var(--transition);
}
.sow-brand__mode:hover { border-color: rgba(249,115,22,0.45); }
.sow-brand__mode.is-active {
border-color: var(--orange); background: var(--orange-light);
box-shadow: 0 0 0 1px var(--orange) inset;
}
.sow-brand__mode-title { font-size: 14px; font-weight: 700; color: var(--text); }
.sow-brand__mode-hint { font-size: 12px; color: var(--text-secondary); }
.sow-brand__panel {
margin-top: 14px; padding: 16px; background: var(--surface);
border: 1px solid var(--border); border-radius: var(--radius);
display: flex; flex-direction: column; gap: 16px;
}
.sow-brand__field { display: flex; flex-direction: column; gap: 6px; }
.sow-brand__logo { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.sow-brand__logo-img {
max-height: 44px; max-width: 180px; object-fit: contain;
border: 1px solid var(--border); border-radius: var(--radius-sm);
padding: 4px 8px; background: #fff;
}
.sow-brand__upload { cursor: pointer; }
.sow-brand__logo-remove {
background: transparent; border: none; cursor: pointer;
font-size: 13px; font-weight: 600; color: var(--text-secondary);
text-decoration: underline; padding: 4px;
}
.sow-brand__logo-remove:hover { color: var(--orange); }
.sow-brand__accent { display: flex; align-items: center; gap: 10px; }
.sow-brand__accent input[type="color"] {
width: 44px; height: 36px; padding: 2px; cursor: pointer;
border: 1px solid var(--border); border-radius: var(--radius-sm); background: #fff;
}
.sow-brand__accent-hex {
font-size: 13px; font-weight: 600; color: var(--text-secondary);
font-variant-numeric: tabular-nums; text-transform: uppercase;
}
.ct-scope-reprice {
display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
background: var(--orange-light);
border: 1.5px solid rgba(249,115,22,0.35);
border-radius: var(--radius); padding: 13px 16px; margin-bottom: 16px;
}
.ct-scope-reprice__icon {
flex: 0 0 auto; width: 20px; height: 20px; color: var(--orange);
}
.ct-scope-reprice__text {
flex: 1 1 220px; font-size: 14px; line-height: 1.4; font-weight: 600;
color: var(--text-primary);
}
.ct-scope-reprice__actions {
flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px;
}
.ct-scope-reprice__dismiss {
display: inline-flex; align-items: center; justify-content: center;
width: 30px; height: 30px; padding: 0; border: none; cursor: pointer;
background: transparent; color: var(--text-secondary); border-radius: 8px;
transition: background 0.15s ease, color 0.15s ease;
}
.ct-scope-reprice__dismiss:hover { background: rgba(0,0,0,0.06); color: var(--text-primary); }
.ct-scope-reprice__dismiss svg { width: 16px; height: 16px; }
@media (max-width: 560px) {
.ct-scope-reprice__actions { flex: 1 1 100%; justify-content: space-between; }
}
/* ════════ Estimate console — unified hero (total) + actions row ════════
Replaces the separate orange total bar + template-select boxes with one
calm card: a centered total hero on top, a hairline rule, then the
source dropdown + New + Auto-price controls. Orange-tint surface (not a
solid fill) so the single solid-orange Auto-price button stays the one
orange CTA. */
.ct-scope-console {
background: var(--orange-light);
border: 1.5px solid rgba(249,115,22,0.3);
border-radius: var(--radius);
padding: 22px 22px 18px; margin-bottom: 20px;
}
/* Total hero: centered label over a big centered value + stepper. */
.ct-scope-total-bar {
display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.ct-scope-total-bar__label {
font-size: 15px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.8px; color: var(--orange);
display: inline-flex; align-items: center; gap: 7px;
}
.ct-scope-total-bar__value {
font-size: 40px; font-weight: 800; color: var(--orange);
line-height: 1; font-variant-numeric: tabular-nums;
}
/* Total over its labor/materials split caption — centered in the hero. */
.ct-scope-total-bar__amounts {
display: flex; flex-direction: column; align-items: center; gap: 4px;
}
.ct-scope-total-bar__split {
font-size: 12px; font-weight: 600; color: var(--text-secondary);
letter-spacing: 0.2px; font-variant-numeric: tabular-nums; line-height: 1;
}
/* Hairline rule between the total hero and the actions row. */
.ct-scope-console__divider {
height: 1px; background: rgba(249,115,22,0.22);
margin: 16px -22px 0;
}
/* Actions: source dropdown grows, New + Auto-price sit to its right. */
.ct-scope-console__actions {
display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
margin-top: 16px;
}
.ct-scope-console__actions .ct-scope-source {
flex: 1 1 240px; min-width: 0; max-width: none;
}
/* New-estimate split: button + start-blank / start-from-existing popover. */
.ct-scope-new { position: relative; display: inline-flex; }
.ct-scope-new__menu {
position: absolute; top: calc(100% + 8px); left: 0; z-index: 70;
min-width: 264px; padding: 6px;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,0.18));
display: none; flex-direction: column; gap: 2px;
}
.ct-scope-new.is-open .ct-scope-new__menu { display: flex; }
.ct-scope-new__item {
display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
width: 100%; text-align: left; padding: 10px 12px;
border: none; background: transparent; border-radius: var(--radius-sm);
cursor: pointer; transition: background var(--transition);
}
.ct-scope-new__item:hover, .ct-scope-new__item:focus-visible {
background: var(--orange-light); outline: none;
}
.ct-scope-new__item-title { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.ct-scope-new__item-hint { font-size: 12px; color: var(--text-secondary); line-height: 1.35; }
@media (max-width: 560px) {
.ct-scope-console__actions > * { flex: 1 1 100%; }
.ct-scope-new { display: flex; }
.ct-scope-new > .btn { width: 100%; }
.ct-scope-new__menu { left: 0; right: 0; min-width: 0; }
}
/* REN-519: total value + its ▲▼ stepper share a row. */
.ct-scope-total-row { display: inline-flex; align-items: center; gap: 10px; }
/* Total stepper is taller than the per-line one to match the 30px value. */
.sow-spin--total { align-self: center; }
.sow-spin--total .sow-spin-btn { width: 30px; min-height: 18px; }
/* REN-519: info "ⓘ" with a hover/focus tooltip explaining the total adjuster. */
.ct-scope-total-info {
position: relative; display: inline-flex; align-items: center; justify-content: center;
color: var(--orange); opacity: 0.75; cursor: help; line-height: 0;
}
.ct-scope-total-info:hover, .ct-scope-total-info:focus-visible { opacity: 1; outline: none; }
.ct-scope-total-info__pop {
position: absolute; top: calc(100% + 8px); left: 50%; z-index: 60;
width: 260px; max-width: 78vw; padding: 10px 12px; border-radius: var(--radius-sm);
background: var(--text-primary); color: #fff;
font-size: 12px; font-weight: 500; line-height: 1.45; letter-spacing: 0.1px;
text-transform: none; box-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,0.18));
opacity: 0; visibility: hidden; transform: translateX(-50%) translateY(-3px);
transition: opacity var(--transition), transform var(--transition), visibility var(--transition);
pointer-events: none;
}
.ct-scope-total-info:hover .ct-scope-total-info__pop,
.ct-scope-total-info:focus-within .ct-scope-total-info__pop,
.ct-scope-total-info:focus-visible .ct-scope-total-info__pop {
opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
/* REN-490/519: per-row price cell wraps the input + its ⚡/✏️ status icon so
the input stays the 4th grid child (desktop ratios + mobile grid-areas both
key off nth-child / descendant selectors). */
.sow-price-cell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sow-price-cell input { width: 100%; }
/* REN-519: price input + ▲▼ stepper share one row; input grows, stepper fixed. */
.sow-price-input-wrap { display: flex; align-items: stretch; gap: 6px; width: 100%; min-width: 0; position: relative; }
.sow-price-input-wrap input { flex: 1 1 auto; min-width: 0; width: auto; }
/* ── REN-524: per-line auto-price ring. Orange (#F97316) spinner inside the
price box while that line is being priced; clears the moment its price
lands. is-pricing also dims the input + hides the ▲▼ stepper so the ring
owns the box. Respects reduced motion. ── */
.sow-price-spin {
display: none;
position: absolute;
top: 50%; right: 10px;
width: 16px; height: 16px;
margin-top: -8px;
border: 2px solid rgba(249, 115, 22, 0.25);
border-top-color: #F97316;
border-radius: 50%;
pointer-events: none;
animation: sowPriceSpin 0.7s linear infinite;
}
.sow-price-input-wrap.is-pricing .sow-price-spin { display: block; }
.sow-price-input-wrap.is-pricing input[type="number"] { color: #B0A89E; }
.sow-price-input-wrap.is-pricing .sow-spin { visibility: hidden; }
@keyframes sowPriceSpin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
.sow-price-spin { animation-duration: 1.6s; }
}
/* ── REN-519: ▲▼ stepper (line / room / total). Two stacked chevron buttons
with hold-to-repeat. Neutral grey — never orange (one-orange rule). ── */
.sow-spin {
flex: 0 0 auto; display: inline-flex; flex-direction: column;
border: 1px solid var(--border); border-radius: var(--radius-sm);
overflow: hidden; align-self: stretch;
}
.sow-spin-btn {
display: inline-flex; align-items: center; justify-content: center;
width: 24px; min-height: 16px; flex: 1 1 0; padding: 0; margin: 0;
background: var(--surface); color: var(--muted); cursor: pointer;
border: none; -webkit-user-select: none; user-select: none;
transition: background var(--transition), color var(--transition);
}
.sow-spin-btn + .sow-spin-btn { border-top: 1px solid var(--border); }
.sow-spin-btn:hover { background: var(--surface-alt); color: var(--text-secondary); }
.sow-spin-btn:active { background: var(--border); color: var(--text-primary); }
.sow-spin-btn svg { display: block; }
/* ── REN-519: ⚡ auto-priced / ✏️ edited status icon under the price. ── */
.sow-price-icon { display: inline-flex; align-items: center; justify-content: center; min-height: 15px; }
.sow-price-icon-btn { display: inline-flex; align-items: center; justify-content: center; line-height: 0; }
/* One-orange: ⚡ auto is the passive default (neutral grey); ✏️ edited is the
contractor's own action, so it earns the single brand accent. No amber/green. */
.sow-price-icon-btn.is-auto { color: var(--muted); } /* lightning — auto-priced, passive */
.sow-price-icon-btn.is-edited { color: var(--orange); } /* pencil — your number, brand accent */
/* ── REN-519: room/area section header with subtotal + room ▲▼ stepper. ── */
.sow-room-head {
display: flex; align-items: center; justify-content: space-between; gap: 12px;
margin: 18px 0 8px; padding: 0 2px;
}
.sow-room-head:first-child { margin-top: 4px; }
.sow-room-name {
font-size: 13px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.5px; color: var(--text-primary);
}
.sow-room-right { display: inline-flex; align-items: center; gap: 8px; }
.sow-room-subtotal {
font-size: 15px; font-weight: 800; color: var(--text-primary);
font-variant-numeric: tabular-nums;
}
/* ════════ REN-540: feed (project-detail) pricing UI ════════
The project-feed job detail reuses the builder's ⚡/✏️ icons, ▲▼ steppers
(.sow-spin*), and room-subtotal styles as-is. These rules add only the
feed-specific containers: the header toolbar (Pricing Questionnaire link +
info tooltip + Auto price button stacked above the line items) and the
per-line price cell that pairs the existing .price-input-wrap with a line
stepper. */
.scope-header--feed-pricing {
justify-content: space-between; align-items: flex-start;
flex-wrap: wrap; row-gap: 10px;
}
.feed-pricing-toolbar {
display: flex; flex-direction: column; align-items: flex-end; gap: 8px;
}
.feed-pricing-toolbar__top { display: inline-flex; align-items: center; gap: 8px; }
/* The shared info tooltip is centered (left:50%) for the builder's total row;
in the right-aligned feed toolbar that clips off-screen, so anchor it to
the right edge instead. */
.feed-pricing-toolbar .ct-scope-total-info__pop {
left: auto; right: 0; transform: translateX(0) translateY(-3px);
}
.feed-pricing-toolbar .ct-scope-total-info:hover .ct-scope-total-info__pop,
.feed-pricing-toolbar .ct-scope-total-info:focus-within .ct-scope-total-info__pop,
.feed-pricing-toolbar .ct-scope-total-info:focus-visible .ct-scope-total-info__pop {
transform: translateX(0) translateY(0);
}
/* Per-line price cell: price input + line stepper on one row, ⚡/✏️ icon
below, right-aligned to match the right-aligned price column. */
.feed-price-cell { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: 0; }
.feed-price-row { display: inline-flex; align-items: stretch; gap: 6px; min-width: 0; }
.feed-price-row .price-input-wrap { flex: 0 1 auto; }
.feed-price-icon { min-height: 15px; }
/* Total value + its ▲▼ stepper share a row (mirror of .ct-scope-total-row). */
.feed-total-row { display: inline-flex; align-items: center; gap: 10px; }
/* Form card spans the full panel width (no more 2-col split). */
.ct-form-card--full { width: 100%; max-width: 100%; }
/* Preview relocated below the form: full-width, collapsible. */
.ct-scope-preview-section { margin-top: 24px; }
.ct-scope-preview-toggle {
display: flex; align-items: center; gap: 8px; width: 100%;
background: none; border: none; cursor: pointer; padding: 0 0 12px;
font-family: inherit; font-size: 12px; font-weight: 700;
text-transform: uppercase; letter-spacing: 0.5px; color: var(--muted);
}
.ct-scope-preview-toggle__chev { transition: transform var(--transition); flex-shrink: 0; }
.ct-scope-preview-toggle[aria-expanded="false"] .ct-scope-preview-toggle__chev { transform: rotate(-90deg); }
.ct-scope-preview-body { display: block; }
.ct-scope-preview-body[hidden] { display: none; }
/* REN-486 (item h): below the form the preview spans the full form width
and renders at a real portrait page proportion (8.5:11) instead of the
cramped 612px thumbnail the right rail used. The page grows past the
portrait minimum when content is long; no inner cap, no scroll clip. */
.ct-scope-preview-section .ct-doc-preview-wrap {
max-width: 100%; max-height: none; overflow: visible;
}
.ct-scope-preview-section .ct-doc-preview-wrap > .ct-doc-preview {
aspect-ratio: 8.5 / 11; min-height: 0;
}
/* Bigger, nicer line-item inputs now that the form owns the full width. */
.ct-scope-row input, .ct-scope-row textarea,
.sow-line-row .form-input {
padding: 12px 14px !important; font-size: 15px !important;
}
.ct-scope-row textarea { min-height: 56px; }
/* Phone: stack each line item into a labelled card; hide the desktop
column-header row. Keeps the builder usable with no horizontal scroll. */
@media (max-width: 640px) {
.sow-line-head { display: none !important; }
.ct-scope-row.sow-line-row,
.sow-line-row {
grid-template-columns: 1fr 1fr auto !important;
grid-template-areas:
"area area del"
"task task task"
"meas price price" !important;
gap: 8px !important; align-items: start;
padding: 14px !important; margin-bottom: 14px;
background: var(--surface-alt); border: 1px solid var(--border);
border-radius: var(--radius-sm);
}
.ct-scope-row.sow-line-row > *:nth-child(1) { grid-area: area; }
.ct-scope-row.sow-line-row > *:nth-child(2) { grid-area: task; }
.ct-scope-row.sow-line-row > *:nth-child(3) { grid-area: meas; }
.ct-scope-row.sow-line-row > *:nth-child(4) { grid-area: price; }
.ct-scope-row.sow-line-row > .ct-scope-del { grid-area: del; justify-self: end; margin-top: 0; }
/* REN-519: enlarge ▲▼ tap targets on phones (was 24–30px wide → easy mis-taps).
Stacked stepper tracks the ~47px input height, so each button ≈ 23px tall × 44px wide. */
.sow-spin-btn,
.sow-spin--total .sow-spin-btn { width: 44px; min-height: 22px; }
}
/* ════════ REN-488: Pricing Setup survey ════════ */
.ct-pricing-calibrated {
font-size: 13px; color: var(--muted); margin-bottom: 16px;
}
/* REN-486 (item f): Save-Rates confirm/error pill — sits inline next to the
Save button at the top of the page. Green = saved, red = failed. Never
orange (Save button owns the one orange here). */
.ct-pricing-savemsg {
display: inline-flex; align-items: center; gap: 6px;
font-size: 13px; font-weight: 600; line-height: 1.2;
padding: 7px 14px; border-radius: 999px; white-space: nowrap;
}
.ct-pricing-savemsg--ok {
color: #15803d; background: rgba(22,163,74,0.12); border: 1px solid rgba(22,163,74,0.3);
}
.ct-pricing-savemsg--err {
color: var(--danger); background: #FEF2F2; border: 1px solid #FECACA;
}
.ct-savemsg-check {
display: inline-flex; align-items: center; justify-content: center;
width: 16px; height: 16px; border-radius: 50%;
background: #15803d; color: #fff; font-size: 11px; font-weight: 800; line-height: 1;
}
.ct-pricing-intro {
background: var(--surface-alt); border: 1px solid var(--border);
border-radius: var(--radius-sm); padding: 14px 16px; margin-bottom: 20px;
font-size: 14px; color: var(--text-secondary); line-height: 1.5;
}
.ct-field-help {
font-size: 12px; color: var(--muted); margin: 2px 0 10px;
}
/* Multi-select trade chips. Selected = subtle orange fill; only the Save
button is solid orange, so chips use orange-tint (one-orange rule). */
.ct-pricing-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.ct-pricing-chip {
font-family: inherit; font-size: 14px; font-weight: 600;
color: var(--text-secondary); background: var(--surface-alt);
border: 1.5px solid var(--border); border-radius: 999px;
padding: 9px 16px; cursor: pointer; transition: all var(--transition);
}
.ct-pricing-chip:hover { border-color: var(--orange); color: var(--orange); }
.ct-pricing-chip[aria-pressed="true"] {
background: var(--orange-light); border-color: var(--orange); color: var(--orange);
}
/* Show-markup toggle row. */
.ct-pricing-toggle {
display: flex; align-items: center; gap: 10px; cursor: pointer;
font-size: 14px; color: var(--text-primary);
}
.ct-pricing-toggle input { width: 18px; height: 18px; accent-color: var(--orange); cursor: pointer; }
/* REN-489: per-trade unit rates. One group per selected trade; each row is
a labeled $-prefixed input with a unit suffix. Two-up on desktop,
single-column on phone. */
.ct-unit-rate-group { margin-top: 18px; }
.ct-unit-rate-group:first-child { margin-top: 8px; }
.ct-unit-rate-trade {
font-size: 13px; font-weight: 700; color: var(--text-primary);
text-transform: uppercase; letter-spacing: 0.4px; margin-bottom: 10px;
}
.ct-unit-rate-rows {
display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 20px;
}
.ct-unit-rate-row { display: flex; flex-direction: column; gap: 4px; }
.ct-unit-rate-label { font-size: 13px; color: var(--text-secondary); font-weight: 500; }
.ct-unit-rate-input {
display: flex; align-items: center; gap: 0;
border: 1.5px solid var(--border); border-radius: var(--radius-sm);
background: var(--surface); transition: border-color var(--transition);
}
.ct-unit-rate-input:focus-within { border-color: var(--orange); }
.ct-unit-rate-dollar { padding: 0 4px 0 12px; color: var(--muted); font-size: 14px; }
.ct-unit-rate-input input.form-input {
border: none; background: transparent; flex: 1; min-width: 0;
padding-left: 2px; padding-right: 2px; box-shadow: none;
}
.ct-unit-rate-input input.form-input:focus { border: none; box-shadow: none; outline: none; }
.ct-unit-rate-suffix { padding: 0 12px 0 2px; color: var(--muted); font-size: 13px; white-space: nowrap; }
@media (max-width: 860px) {
.ct-unit-rate-rows { grid-template-columns: 1fr; }
}
/* Feature g: per-trade auto-pricing switch. Sits in the trade group header;
when off, the group's rates dim and the builder skips this trade. */
.ct-unit-rate-grouphead {
display: flex; align-items: center; justify-content: space-between;
gap: 12px; margin-bottom: 10px;
}
.ct-unit-rate-grouphead .ct-unit-rate-trade { margin-bottom: 0; }
.ct-auto-toggle {
display: inline-flex; align-items: center; gap: 8px; cursor: pointer;
background: none; border: none; padding: 2px; font-family: inherit;
-webkit-tap-highlight-color: transparent; flex: none;
}
.ct-auto-toggle__txt {
font-size: 12px; font-weight: 600; letter-spacing: 0.2px; color: var(--muted);
transition: color var(--transition);
}
.ct-auto-toggle[aria-checked="true"] .ct-auto-toggle__txt { color: var(--orange); }
.ct-auto-toggle__track {
position: relative; width: 36px; height: 20px; border-radius: 999px;
background: var(--border); transition: background var(--transition); flex: none;
}
.ct-auto-toggle[aria-checked="true"] .ct-auto-toggle__track { background: var(--orange); }
.ct-auto-toggle__thumb {
position: absolute; top: 2px; left: 2px; width: 16px; height: 16px;
border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(28,27,27,0.22);
transition: transform var(--transition);
}
.ct-auto-toggle[aria-checked="true"] .ct-auto-toggle__thumb { transform: translateX(16px); }
.ct-auto-toggle:focus-visible { outline: none; }
.ct-auto-toggle:focus-visible .ct-auto-toggle__track {
box-shadow: 0 0 0 3px rgba(249,115,22,0.30);
}
.ct-unit-rate-rows.is-auto-off { opacity: 0.5; }
/* ════════ Pricing catalogs: hub cards + builder switcher + modal ════════ */
/* Hub grid: one premium card per catalog + a dashed "+ New catalog" tile. */
.ct-catalog-grid {
display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
gap: 14px;
}
.ct-catalog-card {
position: relative; display: flex; flex-direction: column; gap: 9px;
text-align: left; background: var(--surface);
border: 1.5px solid var(--border); border-radius: var(--radius);
padding: 18px; cursor: pointer;
transition: border-color var(--transition), box-shadow var(--transition);
}
.ct-catalog-card:hover, .ct-catalog-card:focus-visible {
border-color: var(--orange);
box-shadow: 0 4px 14px rgba(249,115,22,0.10); outline: none;
}
.ct-catalog-card__top {
display: flex; align-items: flex-start; justify-content: space-between; gap: 8px;
}
.ct-catalog-card__name {
font-size: 16px; font-weight: 700; color: var(--text-primary);
overflow-wrap: anywhere; line-height: 1.3;
}
.ct-catalog-pill {
align-self: flex-start; font-size: 11px; font-weight: 700;
letter-spacing: 0.4px; text-transform: uppercase;
padding: 4px 10px; border-radius: 999px;
background: var(--surface-alt); border: 1px solid var(--border);
color: var(--text-secondary);
}
.ct-catalog-pill--premium {
background: var(--orange-light); border-color: var(--orange); color: var(--orange);
}
.ct-catalog-pill--budget {
background: rgba(22,163,74,0.10); border-color: rgba(22,163,74,0.35); color: #15803d;
}
.ct-catalog-card__updated { font-size: 12px; color: var(--muted); }
.ct-catalog-card--new {
align-items: center; justify-content: center; text-align: center;
border-style: dashed; background: var(--surface-alt);
color: var(--text-secondary); font-family: inherit;
font-size: 14px; font-weight: 700; min-height: 128px; gap: 6px;
}
.ct-catalog-card--new:hover, .ct-catalog-card--new:focus-visible { color: var(--orange); }
.ct-catalog-new__plus { font-size: 22px; line-height: 1; font-weight: 700; }
.ct-catalog-card__hint {
font-size: 12px; font-weight: 500; color: var(--muted);
max-width: 210px; line-height: 1.4;
}
/* Card kebab menu (Edit / Rename / Delete). */
.ct-catalog-card__menuwrap { position: relative; flex: none; }
.ct-catalog-card__menu-btn {
border: none; background: transparent; cursor: pointer;
color: var(--muted); padding: 4px 6px; border-radius: var(--radius-sm); line-height: 0;
transition: background var(--transition), color var(--transition);
}
.ct-catalog-card__menu-btn:hover, .ct-catalog-card__menu-btn:focus-visible {
background: var(--orange-light); color: var(--orange); outline: none;
}
.ct-catalog-card__menu {
position: absolute; top: calc(100% + 6px); right: 0; z-index: 70;
min-width: 150px; padding: 6px;
background: var(--surface); border: 1px solid var(--border);
border-radius: var(--radius); box-shadow: var(--shadow-md, 0 6px 20px rgba(0,0,0,0.18));
display: none; flex-direction: column; gap: 2px;
}
.ct-catalog-card__menuwrap.is-open .ct-catalog-card__menu { display: flex; }
.ct-catalog-card__menu-item {
width: 100%; text-align: left; padding: 9px 12px;
border: none; background: transparent; border-radius: var(--radius-sm);
cursor: pointer; font-family: inherit; font-size: 13px; font-weight: 600;
color: var(--text-primary); transition: background var(--transition);
}
.ct-catalog-card__menu-item:hover, .ct-catalog-card__menu-item:focus-visible {
background: var(--orange-light); outline: none;
}
.ct-catalog-card__menu-item--danger { color: var(--danger); }
/* Hub loading / error state block. */
.ct-catalog-hub-state {
padding: 28px; text-align: center; color: var(--muted); font-size: 14px;
background: var(--surface-alt); border: 1px solid var(--border);
border-radius: var(--radius);
}
/* Builder catalog switcher — occupies the old pricing-level slot in the
estimate console actions row. Hidden below 2 catalogs. */
.ct-scope-catalog { display: inline-flex; align-items: center; gap: 8px; flex: 0 1 auto; }
.ct-scope-catalog__label {
font-size: 12px; font-weight: 700; text-transform: uppercase;
letter-spacing: 0.4px; color: var(--muted); white-space: nowrap;
}
.ct-scope-catalog__select { max-width: 200px; min-width: 130px; }
@media (max-width: 560px) {
.ct-scope-catalog { flex: 1 1 100%; }
.ct-scope-catalog__select { max-width: none; flex: 1; }
}
/* Catalog modal: choice list + name input (shares .confirm-modal chrome). */
.ct-catmodal { text-align: left; }
.ct-catmodal__choices { display: flex; flex-direction: column; gap: 8px; margin: 4px 0 18px; }
.ct-catmodal__choice {
display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
text-align: left; width: 100%; padding: 12px 14px;
background: var(--surface-alt); border: 1.5px solid var(--border);
border-radius: var(--radius-sm); cursor: pointer; font-family: inherit;
transition: border-color var(--transition), background var(--transition);
}
.ct-catmodal__choice:hover, .ct-catmodal__choice:focus-visible {
border-color: var(--orange); background: var(--orange-light); outline: none;
}
.ct-catmodal__choice-label { font-size: 14px; font-weight: 700; color: var(--text-primary); }
.ct-catmodal__choice-hint { font-size: 12px; color: var(--text-secondary); }
.ct-catmodal__input { margin: 4px 0 18px; width: 100%; }
.ct-catmodal .confirm-btns { justify-content: flex-end; }
/* REN-254: invoice generator (and other contractor tools that share
.ct-form-card / .ct-template-select / .ct-doc-preview) overflowed the
viewport on mobile. The form card kept its 28px desktop padding, the
won-bid select was capped at 400px which still exceeded a 360px phone,
and the live invoice preview's inline 2-col Bill-To / Due grid never
collapsed. Reduce padding at the 860px breakpoint, force the won-bid
select and inline preview grids to full-width / stacked at narrow
widths, and let the preview table wrap text instead of forcing a
horizontal scroll. */
@media (max-width: 860px) {
/* REN-254 (5/19 cycle 2): root-level clip — belt-and-braces against any
inline-styled child anywhere inside contractor tools blowing past the
viewport. Individual children already get overflow-x rules above; this
is the last line of defense. */
#contractorTools, .ct-tool-view { overflow-x: hidden; max-width: 100%; }
.ct-form-card { padding: 16px; }
.ct-template-select { padding: 12px; }
/* The Won-bid