/* ========================================================================== Electrified Mobile — Quick Estimates & Invoices Industrial-electric design system. Hand-crafted, self-contained. ========================================================================== */ /* Montserrat is loaded from in _Layout.cshtml */ :root { /* Brand */ --brand-black: #0A0A0A; --brand-iron: #1A1A1A; --brand-graphite: #262626; --brand-carbon: #525252; --brand-steel: #A3A3A3; --brand-bone: #F5F4EE; --brand-paper: #FAFAF7; --brand-line: #E5E4DD; /* Accents — green sampled from the new logo */ --brand-lime: #7AC142; --brand-lime-glow:#92D55A; --brand-lime-deep:#5FA02F; /* Primary — blue sampled from the new logo (tuned for WCAG AA on white) */ --brand-blue: #1B6EDE; --brand-blue-glow:#3D84EC; --brand-blue-deep:#114E9E; --brand-danger: #DC2626; --brand-warning: #F59E0B; /* Type — single family, vary weights for hierarchy */ --font-display: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-body: 'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; --font-mono: 'Montserrat', ui-monospace, SFMono-Regular, Menlo, monospace; /* Surface */ --surface: var(--brand-bone); --surface-elev: #FFFFFF; --ink: var(--brand-black); --ink-soft: var(--brand-carbon); --ink-muted: var(--brand-steel); --line: var(--brand-line); --accent: var(--brand-lime); /* Geometry */ --radius-sm: 2px; --radius: 4px; --radius-lg: 8px; /* Motion */ --ease: cubic-bezier(.2,.8,.2,1); } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; background: var(--surface); color: var(--ink); font-family: var(--font-body); overflow-x: clip; font-size: 15px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body { min-height: 100vh; background-image: radial-gradient(circle at 100% 0%, rgba(27, 110, 222, 0.04), transparent 40%), radial-gradient(circle at 0% 100%, rgba(10, 10, 10, 0.03), transparent 50%), repeating-linear-gradient(0deg, transparent 0 48px, rgba(38,38,38,0.02) 48px 49px), repeating-linear-gradient(90deg, transparent 0 48px, rgba(38,38,38,0.02) 48px 49px); background-attachment: fixed; } a { color: var(--ink); text-decoration: none; transition: color 120ms var(--ease); } a:hover { color: var(--brand-blue-deep); } ::selection { background: var(--brand-lime); color: var(--brand-black); } /* Typography ----------------------------------------------------- */ h1, h2, h3, h4, h5 { font-family: var(--font-display); font-weight: 700; letter-spacing: -0.02em; margin: 0; line-height: 1.05; } h1 { font-size: clamp(2.4rem, 5vw, 4rem); font-weight: 800; } h2 { font-size: clamp(1.6rem, 3vw, 2.2rem); } h3 { font-size: 1.25rem; letter-spacing: -0.015em; } .eyebrow { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); } .eyebrow-lime { color: var(--brand-lime-deep); } .code { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.04em; } .tabular { font-variant-numeric: tabular-nums; } /* Layout shell --------------------------------------------------- */ .app-shell { display: grid; grid-template-columns: 240px 1fr; min-height: 100vh; } .sidebar { background: var(--brand-black); color: var(--brand-bone); padding: 1.75rem 1.25rem 1.25rem; display: flex; flex-direction: column; gap: 1.25rem; position: sticky; top: 0; height: 100vh; border-right: 1px solid #000; } .sidebar__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0.35rem; padding-bottom: 1rem; border-bottom: 1px solid #1F1F1F; } .sidebar__brand img { width: 100%; max-width: 180px; height: auto; display: block; } .sidebar__brand-text { font-family: var(--font-display); font-weight: 800; font-size: 1rem; letter-spacing: -0.01em; color: var(--brand-bone); line-height: 1.05; } .sidebar__brand-text small { display: block; font-family: var(--font-mono); font-size: 0.65rem; font-weight: 400; color: var(--brand-lime); letter-spacing: 0.15em; text-transform: uppercase; margin-top: 0.25rem; } /* Tagline beneath the wordmark logo. Default is for LIGHT surfaces (marketing nav). Dark surfaces (sidebar, auth-shell) override below to use bone for legibility. */ .brand-tagline { font-family: var(--font-body); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--brand-blue); line-height: 1; } .marketing-nav__brand .brand-tagline { font-size: 0.7rem; letter-spacing: 0.1em; } .auth-shell__brand .brand-tagline { font-size: 0.85rem; letter-spacing: 0.14em; color: var(--brand-bone); } .sidebar__brand .brand-tagline { color: var(--brand-bone); } @media (prefers-color-scheme: dark) { .marketing-nav__brand .brand-tagline { color: var(--brand-bone); } } .sidebar__group { display: flex; flex-direction: column; gap: 0.15rem; } .sidebar__group-label { font-family: var(--font-mono); font-size: 0.65rem; font-weight: 500; letter-spacing: 0.18em; text-transform: uppercase; color: #6E6E6E; padding: 0 0.65rem 0.4rem; } .nav-link { display: flex; align-items: center; gap: 0.6rem; padding: 0.55rem 0.65rem; color: #C4C4C2; font-size: 0.92rem; font-weight: 500; border-radius: var(--radius-sm); position: relative; transition: all 140ms var(--ease); } .nav-link:hover { color: var(--brand-bone); background: #181818; } .nav-link.is-active { color: var(--brand-bone); background: #141414; } .nav-link.is-active::before { content: ""; position: absolute; left: -1.25rem; top: 50%; transform: translateY(-50%); width: 3px; height: 1.4em; background: var(--brand-lime); } .sidebar__footer { margin-top: auto; padding-top: 1rem; border-top: 1px solid #1F1F1F; font-family: var(--font-mono); font-size: 0.7rem; color: #6E6E6E; letter-spacing: 0.05em; } .sidebar__footer span { color: var(--brand-lime); } /* Main content area */ .main { padding: 2.5rem 3rem 4rem; max-width: 1200px; } .main--narrow { max-width: 880px; } .page-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 2rem; padding-bottom: 1.25rem; border-bottom: 1px solid var(--line); margin-bottom: 2rem; } .page-header h1 { font-size: 2.4rem; } .page-header__meta { display: flex; gap: 0.5rem; align-items: center; } /* Buttons -------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.7rem 1.1rem; border: 1px solid var(--ink); background: var(--ink); color: var(--brand-bone); font-family: var(--font-body); font-weight: 600; font-size: 0.88rem; letter-spacing: -0.005em; border-radius: var(--radius-sm); cursor: pointer; transition: all 160ms var(--ease); position: relative; overflow: hidden; } .btn:hover { background: var(--brand-iron); transform: translateY(-1px); box-shadow: 0 4px 0 0 var(--brand-lime); } .btn:active { transform: translateY(0); box-shadow: 0 2px 0 0 var(--brand-lime); } .btn--primary { background: var(--brand-blue); border-color: var(--brand-blue); color: #FFFFFF; } .btn--primary:hover { background: var(--brand-blue); /* keep at 4.85:1 contrast for white text */ border-color: var(--brand-blue-deep); /* darker border signals interaction */ box-shadow: 0 4px 0 0 var(--brand-black); } .btn--primary:active { box-shadow: 0 2px 0 0 var(--brand-black); } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn--ghost:hover { background: var(--surface-elev); border-color: var(--ink); box-shadow: 0 4px 0 0 var(--brand-lime); } .btn--danger { background: transparent; color: var(--brand-danger); border-color: var(--brand-danger); } .btn--danger:hover { background: var(--brand-danger); color: white; box-shadow: 0 4px 0 0 var(--brand-black); } .btn--sm { padding: 0.45rem 0.8rem; font-size: 0.78rem; } .btn-group { display: inline-flex; gap: 0.5rem; } .link-arrow { display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.05em; color: var(--ink); text-transform: uppercase; padding-bottom: 2px; border-bottom: 1px solid var(--ink); transition: all 140ms var(--ease); } .link-arrow:hover { color: var(--brand-lime-deep); border-color: var(--brand-lime-deep); gap: 0.6rem; } /* Cards & surfaces ---------------------------------------------- */ .card { background: var(--surface-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.5rem; position: relative; } .tile-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .tile { background: var(--surface-elev); border: 1px solid var(--line); border-radius: var(--radius); padding: 1.25rem 1.4rem; position: relative; overflow: hidden; } .tile__label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); } .tile__value { font-family: var(--font-display); font-weight: 800; font-size: 2.4rem; letter-spacing: -0.03em; margin-top: 0.4rem; } .tile::after { content: ""; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; background: var(--brand-lime); transform: scaleX(0); transform-origin: left; transition: transform 380ms var(--ease); } .tile:hover::after { transform: scaleX(1); } .tile--link { display: block; text-decoration: none; color: inherit; transition: border-color 160ms var(--ease), transform 160ms var(--ease); } .tile--link:hover { border-color: var(--ink); transform: translateY(-1px); } .tile--link:focus-visible { outline: 2px solid var(--brand-lime); outline-offset: 2px; } /* Form: Customer-form, designed for the brief ------------------- */ .form-page { display: grid; grid-template-columns: 220px 1fr; gap: 3rem; align-items: start; } .section-rail { position: sticky; top: 2.5rem; display: flex; flex-direction: column; gap: 0.4rem; border-left: 1px solid var(--line); padding-left: 1rem; } .section-rail__item { display: flex; align-items: baseline; gap: 0.6rem; padding: 0.4rem 0; cursor: pointer; color: var(--ink-soft); font-size: 0.85rem; font-weight: 500; border-left: 2px solid transparent; margin-left: -1.06rem; padding-left: 0.95rem; transition: all 160ms var(--ease); } .section-rail__item:hover { color: var(--ink); } .section-rail__item.is-active { color: var(--ink); border-left-color: var(--brand-lime); } .section-rail__num { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.05em; color: var(--brand-lime-deep); } .form-section { background: var(--surface-elev); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 1.25rem; overflow: hidden; } .form-section__head { display: flex; align-items: center; justify-content: space-between; padding: 1.15rem 1.5rem; cursor: pointer; border-bottom: 1px solid transparent; transition: border-color 160ms var(--ease); user-select: none; } .form-section[open] .form-section__head, .form-section.is-open .form-section__head { border-bottom-color: var(--line); } .form-section__head-left { display: flex; align-items: center; gap: 0.85rem; } /* Inline rgba for accents below: 122,193,66 = --brand-lime (#7AC142). If the lime variable is retuned, sweep these too. */ .form-section__num { font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.12em; color: var(--brand-lime-deep); background: rgba(122, 193, 66, 0.08); padding: 0.18rem 0.45rem; border-radius: var(--radius-sm); border: 1px solid rgba(122, 193, 66, 0.25); } .form-section__title { font-family: var(--font-display); font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; } .form-section__hint { font-size: 0.82rem; color: var(--ink-soft); } .form-section__chevron { width: 18px; height: 18px; border: 1.5px solid var(--ink-soft); border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; transition: all 200ms var(--ease); font-size: 0.7rem; color: var(--ink-soft); background: var(--surface-elev); } .form-section.is-open .form-section__chevron { background: var(--brand-lime); border-color: var(--brand-lime); color: var(--brand-black); transform: rotate(180deg); } .form-section__body { padding: 1.5rem; display: none; } .form-section.is-open .form-section__body { display: block; } .field-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: 1rem 1rem; } .field { display: flex; flex-direction: column; gap: 0.35rem; } .field--col-2 { grid-column: span 2; } .field--col-3 { grid-column: span 3; } .field--col-4 { grid-column: span 4; } .field--col-5 { grid-column: span 5; } .field--col-6 { grid-column: span 6; } .field--col-8 { grid-column: span 8; } .field--col-12 { grid-column: span 12; } @media (max-width: 880px) { .field-grid { grid-template-columns: repeat(6, 1fr); } .field--col-2, .field--col-3, .field--col-4 { grid-column: span 3; } .field--col-5, .field--col-6, .field--col-8, .field--col-12 { grid-column: span 6; } } .field label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); } .field label .req { color: var(--brand-lime-deep); margin-left: 0.2rem; } .input, .textarea, .select { width: 100%; font-family: var(--font-body); font-size: 0.95rem; padding: 0.65rem 0.75rem; border: 1px solid var(--line); background: var(--brand-paper); color: var(--ink); border-radius: var(--radius-sm); transition: border-color 160ms var(--ease), box-shadow 160ms var(--ease), background 160ms var(--ease); } .input:hover, .textarea:hover, .select:hover { border-color: var(--ink-muted); background: #fff; } .input:focus, .textarea:focus, .select:focus { outline: none; border-color: var(--brand-lime); box-shadow: 0 0 0 3px rgba(122, 193, 66, 0.15); background: #fff; } .textarea { min-height: 110px; resize: vertical; } .checkbox-row { display: inline-flex; align-items: center; gap: 0.55rem; font-size: 0.92rem; color: var(--ink); cursor: pointer; user-select: none; } .checkbox-row input[type="checkbox"] { display: none; } .checkbox-row .box { width: 18px; height: 18px; border: 1.5px solid var(--ink); background: var(--brand-paper); border-radius: var(--radius-sm); display: inline-flex; align-items: center; justify-content: center; transition: all 140ms var(--ease); } .checkbox-row input:checked + .box { background: var(--brand-lime); border-color: var(--brand-lime); } .checkbox-row input:checked + .box::after { content: ""; width: 8px; height: 5px; border-left: 2px solid var(--brand-black); border-bottom: 2px solid var(--brand-black); transform: rotate(-45deg) translate(1px,-1px); } .add-line-btn { background: none; border: none; padding: 0.4rem 0; color: var(--brand-lime-deep); font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.05em; text-transform: uppercase; cursor: pointer; display: inline-flex; align-items: center; gap: 0.35rem; } .add-line-btn:hover { color: var(--brand-black); } .dropzone { margin-top: 0.5rem; border: 1.5px dashed var(--line); background: var(--brand-paper); border-radius: var(--radius); padding: 1.5rem; text-align: center; cursor: pointer; transition: all 160ms var(--ease); } .dropzone:hover { border-color: var(--brand-lime); background: #fff; } .dropzone__cta { color: var(--brand-lime-deep); font-weight: 600; font-size: 0.95rem; } .dropzone__hint { font-family: var(--font-mono); font-size: 0.72rem; color: var(--ink-soft); letter-spacing: 0.06em; margin-top: 0.4rem; } .form-actions { position: sticky; bottom: 0; background: linear-gradient(to top, var(--surface) 70%, transparent); padding: 1.25rem 0 0.5rem; display: flex; justify-content: flex-end; gap: 0.6rem; border-top: 1px solid var(--line); margin-top: 1.5rem; } /* Status chips & tables ---------------------------------------- */ .chip { display: inline-flex; align-items: center; gap: 0.4rem; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.1em; text-transform: uppercase; padding: 0.18rem 0.55rem; border-radius: var(--radius-sm); border: 1px solid var(--line); background: var(--surface-elev); color: var(--ink-soft); } .chip--draft { color: var(--ink-soft); } .chip--sent { color: #1E40AF; border-color: rgba(30,64,175,.35); background: rgba(30,64,175,0.06); } .chip--paid { color: var(--brand-lime-deep); border-color: rgba(122,193,66,.4); background: rgba(122,193,66,0.08); } .chip--overdue { color: var(--brand-danger); border-color: rgba(220,38,38,.35); background: rgba(220,38,38,0.06); } .data-table { width: 100%; border-collapse: collapse; background: var(--surface-elev); border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; } .data-table th, .data-table td { padding: 0.85rem 1rem; text-align: left; font-size: 0.92rem; border-bottom: 1px solid var(--line); } .data-table th { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; background: var(--brand-paper); } .data-table tbody tr { transition: background 120ms var(--ease); } .data-table tbody tr:hover { background: rgba(122, 193, 66, 0.04); } .data-table .num { text-align: right; font-variant-numeric: tabular-nums; font-family: var(--font-mono); font-size: 0.9rem; } /* Horizontal-scroll wrapper for wide tables on tablet portrait widths. On phones (≤767.98px) the data-table transforms to stacked cards via the rule further below, so the wrapper's overflow-x is a no-op there. */ .data-table-scroll { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; } .data-table-scroll > .data-table { min-width: 720px; } @media (max-width: 767.98px) { .data-table-scroll > .data-table { min-width: 0; } } /* Tablet (768–1199.98px): squeeze cell padding + font sizes so wide tables like Invoices and Payments fit without horizontal scroll. The upper bound covers iPad Pro portrait (1024px) and similar widths where the sidebar stays visible (240px) and shrinks the content area to ~688–860px. The action cell collapses to a single right-arrow glyph to preserve room for the data columns; desktop keeps the full "Edit →" label. */ @media (min-width: 768px) and (max-width: 1199.98px) { .data-table th, .data-table td { padding: 0.45rem 0.55rem; font-size: 0.85rem; } .data-table th { font-size: 0.62rem; letter-spacing: 0.08em; } .data-table .num { font-size: 0.82rem; } .data-table tbody tr td:last-child { padding-left: 0.2rem; padding-right: 0.55rem; } .data-table .link-arrow { font-size: 0.72rem; gap: 0; border-bottom: none; } .data-table .link-arrow .link-arrow__label { display: none; } .data-table-scroll > .data-table { min-width: 0; } } .empty-state { text-align: center; padding: 4rem 2rem; background: var(--surface-elev); border: 1px dashed var(--line); border-radius: var(--radius); } .empty-state h3 { margin-bottom: 0.5rem; } .empty-state p { color: var(--ink-soft); margin: 0 0 1.25rem; } /* Validation ---------------------------------------------------- */ .validation { color: var(--brand-danger); font-size: 0.8rem; font-family: var(--font-mono); } .input.input-validation-error, .textarea.input-validation-error, .select.input-validation-error { border-color: var(--brand-danger); box-shadow: 0 0 0 3px rgba(220,38,38,0.1); } .alert { padding: 0.85rem 1rem; border-radius: var(--radius); font-size: 0.9rem; margin-bottom: 1rem; } .alert-error { background: rgba(220,38,38,0.06); border: 1px solid rgba(220,38,38,0.25); color: #991B1B; } .alert-success { background: rgba(122,193,66,0.08); border: 1px solid rgba(122,193,66,0.3); color: var(--brand-lime-deep); } /* Auth pages --------------------------------------------------- */ .auth-shell { min-height: 100vh; display: grid; grid-template-columns: 1fr 1.1fr; } .auth-shell__panel { background: var(--brand-black); color: var(--brand-bone); padding: 3rem 3.5rem; display: flex; flex-direction: column; justify-content: space-between; position: relative; overflow: hidden; } .auth-shell__panel::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(0deg, transparent 0 38px, rgba(255,255,255,0.025) 38px 39px), repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,0.025) 38px 39px); pointer-events: none; } .auth-shell__panel * { position: relative; } .auth-shell__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0.4rem; } .auth-shell__brand img { width: 200px; height: auto; } .auth-shell__quote { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.01em; font-weight: 600; margin-top: 2rem; } .auth-shell__quote span { color: var(--brand-lime); } .auth-shell__form { display: flex; align-items: center; justify-content: center; padding: 3rem; background: var(--surface); } .auth-shell__form-inner { width: 100%; max-width: 420px; } /* Landing-specific --------------------------------------------- */ .marketing-shell { min-height: 100vh; background: var(--surface); } .marketing-nav { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 3rem; border-bottom: 1px solid var(--line); background: var(--surface); position: sticky; top: 0; z-index: 10; backdrop-filter: blur(8px); } .marketing-nav__brand { display: flex; flex-direction: column; align-items: flex-start; gap: 0.2rem; line-height: 1; } .marketing-nav__brand img { height: 32px; width: auto; } .marketing-nav__brand-text { font-family: var(--font-display); font-weight: 800; font-size: 1rem; line-height: 1; } .marketing-nav__brand-text small { display: block; font-family: var(--font-mono); font-size: 0.6rem; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-lime-deep); margin-top: 3px; } .hero { padding: 5rem 3rem 6rem; max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 4rem; align-items: center; } .hero__eyebrow { display: inline-flex; align-items: center; gap: 0.6rem; font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1.5rem; } .hero__eyebrow .pulse { width: 8px; height: 8px; border-radius: 50%; background: var(--brand-lime); box-shadow: 0 0 0 0 rgba(122,193,66,0.5); animation: pulse 1.8s infinite; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(122,193,66,0.5); } 70% { box-shadow: 0 0 0 12px rgba(122,193,66,0); } 100% { box-shadow: 0 0 0 0 rgba(122,193,66,0); } } .hero h1 { font-size: clamp(2.6rem, 5.8vw, 4.6rem); font-weight: 800; letter-spacing: -0.035em; line-height: 0.98; } .hero h1 .accent { background: linear-gradient(120deg, var(--brand-lime) 0%, var(--brand-lime-glow) 100%); background-clip: text; -webkit-background-clip: text; color: transparent; } .hero p.lede { font-size: 1.15rem; color: var(--ink-soft); margin: 1.5rem 0 2.25rem; max-width: 540px; line-height: 1.55; } .hero__cta { display: flex; gap: 0.7rem; flex-wrap: wrap; } .hero__price-card { background: var(--brand-black); color: var(--brand-bone); padding: 2rem; border-radius: var(--radius); position: relative; overflow: hidden; } .hero__price-card::before { content: ""; position: absolute; inset: 0; background-image: repeating-linear-gradient(45deg, transparent 0 14px, rgba(255,255,255,0.03) 14px 15px); pointer-events: none; } .hero__price-card .label { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-lime); margin-bottom: 0.5rem; } .hero__price-card .price { font-family: var(--font-display); font-size: 5rem; font-weight: 800; letter-spacing: -0.04em; line-height: 1; } .hero__price-card .price small { font-size: 1rem; font-weight: 500; color: var(--brand-steel); margin-left: 0.4rem; letter-spacing: 0; } .hero__price-card ul { list-style: none; padding: 0; margin: 1.5rem 0 0; } .hero__price-card li { display: flex; align-items: center; gap: 0.6rem; padding: 0.4rem 0; font-size: 0.95rem; color: var(--brand-bone); border-bottom: 1px solid #1F1F1F; } .hero__price-card li::before { content: "→"; color: var(--brand-lime); font-family: var(--font-mono); } .hero__price-card li:last-child { border-bottom: none; } .section-band { padding: 4rem 3rem; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--surface-elev); } .section-band--dark { background: var(--brand-black); color: var(--brand-bone); border: none; } .section-band__inner { max-width: 1200px; margin: 0 auto; } .section-band h2 { font-size: clamp(1.8rem, 3.5vw, 2.6rem); } .feature-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-top: 2.5rem; } .feature { padding: 1.75rem; background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); position: relative; transition: all 200ms var(--ease); } .feature:hover { transform: translateY(-3px); border-color: var(--ink); box-shadow: 0 8px 0 0 var(--brand-lime); } .feature__num { font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.12em; color: var(--brand-lime-deep); margin-bottom: 1rem; } .feature h3 { margin-bottom: 0.5rem; font-size: 1.15rem; } .feature p { color: var(--ink-soft); margin: 0; font-size: 0.95rem; } .marketing-footer { padding: 2.5rem 3rem; background: var(--brand-black); color: var(--brand-steel); font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.05em; text-align: center; border-top: 3px solid var(--brand-lime); } /* Page reveal animation ---------------------------------------- */ .reveal { opacity: 0; transform: translateY(8px); animation: reveal 600ms var(--ease) forwards; } .reveal-1 { animation-delay: 60ms; } .reveal-2 { animation-delay: 140ms; } .reveal-3 { animation-delay: 220ms; } .reveal-4 { animation-delay: 300ms; } @keyframes reveal { to { opacity: 1; transform: translateY(0); } } /* Responsive --------------------------------------------------- */ @media (max-width: 980px) { .app-shell { grid-template-columns: 1fr; } .sidebar { position: static; height: auto; } .main { padding: 1.5rem 1.25rem 4rem; } .form-page { grid-template-columns: 1fr; } .section-rail { display: none; } .auth-shell { grid-template-columns: 1fr; } .auth-shell__panel { padding: 2rem; } .hero { grid-template-columns: 1fr; padding: 3rem 1.5rem 4rem; gap: 2.5rem; } .feature-grid { grid-template-columns: 1fr; } .tile-grid { grid-template-columns: 1fr; } .marketing-nav { padding: 1rem 1.5rem; gap: 0.75rem; } .marketing-nav > nav { gap: 0.4rem !important; } .section-band { padding: 3rem 1.5rem; } .marketing-footer { padding: 2rem 1.5rem; } } /* Phone-narrow: compress nav, drop in-page anchor links so right-side CTAs fit */ @media (max-width: 600px) { .marketing-nav { padding: 0.85rem 1rem; gap: 0.5rem; } .marketing-nav > nav { gap: 0.4rem !important; flex-wrap: nowrap; } .marketing-nav .link-arrow { display: none; } .marketing-nav__brand img { height: 28px; } .marketing-nav__brand .brand-tagline { font-size: 0.6rem; } .marketing-nav .btn--sm { padding: 0.4rem 0.65rem; font-size: 0.72rem; white-space: nowrap; } .hero { padding: 2.5rem 1.25rem 3.5rem; } .section-band { padding: 2.5rem 1.25rem; } .marketing-footer { padding: 1.75rem 1.25rem; font-size: 0.7rem; } } /* Sub-360px (legacy small phones): drop tagline so the CTA still fits */ @media (max-width: 380px) { .marketing-nav { padding: 0.75rem 0.75rem; } .marketing-nav__brand .brand-tagline { display: none; } .marketing-nav .btn--sm { padding: 0.4rem 0.55rem; font-size: 0.7rem; } } /* Dark mode ----------------------------------------------------- */ @media (prefers-color-scheme: dark) { :root { --surface: #0E1116; --surface-elev: #161A22; --ink: #E6E8EC; --ink-soft: #9AA3B2; --ink-muted: #5E6675; --line: #232936; --brand-paper: #1A1F2A; } body { background-image: radial-gradient(circle at 100% 0%, rgba(122, 193, 66, 0.06), transparent 40%), radial-gradient(circle at 0% 100%, rgba(96, 165, 250, 0.05), transparent 50%), repeating-linear-gradient(0deg, transparent 0 48px, rgba(255,255,255,0.02) 48px 49px), repeating-linear-gradient(90deg, transparent 0 48px, rgba(255,255,255,0.02) 48px 49px); } .sidebar { background: #06080C; border-right-color: #0B0F15; } .sidebar__brand { border-bottom-color: #1A2030; } .sidebar__brand-text { color: #E6E8EC; } .nav-link { color: #8B95A4; } .nav-link:hover { background: #11161E; color: #E6E8EC; } .nav-link.is-active { background: #11161E; color: #E6E8EC; } .sidebar__footer { border-top-color: #1A2030; color: #5E6675; } .btn { background: #E6E8EC; color: #06080C; border-color: #E6E8EC; } .btn:hover { background: #FFFFFF; } .btn--ghost { background: transparent; color: var(--ink); border-color: var(--line); } .btn--ghost:hover { background: var(--surface-elev); border-color: var(--ink); } .input, .textarea, .select { background: var(--brand-paper); border-color: var(--line); color: var(--ink); } .input:hover, .textarea:hover, .select:hover { background: #1F2532; border-color: var(--ink-muted); } .input:focus, .textarea:focus, .select:focus { background: #1F2532; border-color: var(--brand-lime); box-shadow: 0 0 0 3px rgba(122, 193, 66, 0.18); } .form-section, .card, .tile, .feature, .data-table, .empty-state, .hero__price-card { background: var(--surface-elev); border-color: var(--line); } .data-table th { background: #0F131B; color: var(--ink-soft); } .data-table tbody tr:hover { background: rgba(122, 193, 66, 0.06); } .auth-shell__panel { background: #06080C; } .auth-shell__panel::before { background-image: repeating-linear-gradient(0deg, transparent 0 38px, rgba(255,255,255,0.04) 38px 39px), repeating-linear-gradient(90deg, transparent 0 38px, rgba(255,255,255,0.04) 38px 39px); } .auth-shell__form { background: var(--surface); } .marketing-nav { background: rgba(14, 17, 22, 0.85); border-bottom-color: var(--line); } .section-band { background: var(--surface-elev); border-color: var(--line); } .section-band--dark { background: #06080C; } .marketing-footer { background: #06080C; border-top-color: var(--brand-lime); } .checkbox-row .box { background: var(--brand-paper); border-color: var(--ink-soft); } .checkbox-row input:checked + .box { background: var(--brand-lime); border-color: var(--brand-lime); } .dropzone { background: var(--brand-paper); border-color: var(--line); } .dropzone:hover { background: #1F2532; border-color: var(--brand-lime); } .form-actions { background: linear-gradient(to top, var(--surface) 70%, transparent); border-top-color: var(--line); } .form-section__num { background: rgba(122, 193, 66, 0.12); border-color: rgba(122, 193, 66, 0.3); } .form-section__chevron { background: var(--surface-elev); border-color: var(--ink-soft); color: var(--ink-soft); } .alert-error { background: rgba(220,38,38,0.12); border-color: rgba(220,38,38,0.4); color: #F87171; } .alert-success { background: rgba(122,193,66,0.12); border-color: rgba(122,193,66,0.4); color: var(--brand-lime); } /* Status filter chips: pale ink on light hover bg becomes unreadable in dark mode. Use the brand green for non-active chips so they stay legible against both the surface and the hardcoded white hover background. */ .status-filter__chip { color: var(--brand-lime); } .status-filter__chip:hover { color: var(--brand-lime-deep); } } /* Estimate / Invoice line-item editor ------------------------------- */ .line-items { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin: 1rem 0 0.5rem; } .line-items thead th { text-align: left; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; border-bottom: 1px solid var(--line); padding: 0.55rem 0.5rem; } .line-items thead th.num, .line-items tbody td.num { text-align: right; } .line-items tbody td { border-bottom: 1px solid var(--line); padding: 0.5rem 0.4rem; vertical-align: top; } .line-items tbody td.handle { cursor: grab; color: var(--ink-muted); user-select: none; padding: 0.55rem 0.3rem 0.5rem 0; } .line-items input.input, .line-items select.select { padding: 0.45rem 0.55rem; font-size: 0.9rem; } .line-items .product-cell { position: relative; min-width: 220px; } .line-items .product-cell .typeahead-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 10; background: var(--surface-elev); border: 1px solid var(--ink); max-height: 240px; overflow-y: auto; box-shadow: 0 4px 0 0 var(--brand-black); } .line-items .product-cell .typeahead-row { padding: 0.5rem 0.7rem; cursor: pointer; border-bottom: 1px solid var(--line); display: flex; justify-content: space-between; gap: 1rem; font-size: 0.86rem; } .line-items .product-cell .typeahead-row:hover, .line-items .product-cell .typeahead-row.is-active { background: var(--brand-bone); } .line-items .product-cell .typeahead-row .rate { color: var(--ink-soft); font-variant-numeric: tabular-nums; } .line-items .row-amount { font-variant-numeric: tabular-nums; font-weight: 600; padding-top: 0.85rem; } .line-items .row-actions button { background: none; border: none; color: var(--ink-muted); cursor: pointer; font-size: 1rem; padding: 0.4rem 0.5rem; } .line-items .row-actions button:hover { color: var(--brand-danger); } .line-items-actions { display: flex; gap: 0.5rem; margin: 0.6rem 0 1.5rem; } /* Larger line-item rows used on Estimate / Invoice forms */ .line-items--lg { font-size: 1rem; } .line-items--lg thead th { font-size: 0.78rem; letter-spacing: 0.18em; padding: 0.75rem 0.65rem; } .line-items--lg tbody td { padding: 0.75rem 0.55rem; } .line-items--lg input.input, .line-items--lg select.select { padding: 0.85rem 0.85rem; font-size: 1rem; min-height: 2.85rem; } .line-items--lg .row-amount { font-size: 1.05rem; padding-top: 1.15rem; } .line-items--lg .product-cell { min-width: 240px; } /* Auto-grow Description textareas inside line-item rows */ .line-row__desc { font-family: var(--font-body); resize: vertical; min-height: 2.85rem; line-height: 1.4; overflow: hidden; white-space: pre-wrap; } .line-row__desc:focus { overflow: auto; } /* Estimate form vertical stack (full-width sections) */ .estimate-form-stack { display: block; } /* Full-width totals panel that mirrors the line-items section feel */ .totals-section .form-section__body { padding-top: 0; } .totals-panel--full { display: block; padding: 0; border: none; background: transparent; } .totals-panel--full .totals-panel__row { display: grid; grid-template-columns: 1fr 14rem; align-items: center; padding: 0.85rem 0.55rem; border-bottom: 1px solid var(--line); border-top: none; font-size: 1rem; margin: 0; } .totals-panel--full .totals-panel__row span:first-child { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-soft); font-weight: 500; } .totals-panel--full .totals-panel__row span:last-child { text-align: right; font-variant-numeric: tabular-nums; font-weight: 600; } .totals-panel--full .totals-panel__row.is-total { border-top: 2px solid var(--ink); border-bottom: none; margin-top: 0.4rem; padding-top: 1rem; padding-bottom: 0.6rem; font-size: 1.25rem; } .totals-panel--full .totals-panel__row.is-total span:first-child { color: var(--ink); font-size: 0.9rem; letter-spacing: 0.16em; } .totals-panel--full .totals-panel__row.is-total span:last-child { font-size: 1.5rem; } .totals-panel--full .totals-panel__edit-toggle { margin: 0.9rem 0 0 0.55rem; } .totals-panel__editable--grid { display: none; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 0.85rem; margin-top: 0.9rem; padding: 0.9rem 0.55rem 0.4rem; border-top: 1px dashed var(--line); } .totals-panel__editable--grid.is-open { display: grid; } .totals-panel__editable--grid .field { margin-bottom: 0; } .totals-panel__editable--grid .field input, .totals-panel__editable--grid .field select { padding: 0.7rem 0.75rem; font-size: 0.95rem; min-height: 2.5rem; background: var(--brand-paper); } @media (max-width: 720px) { .totals-panel--full .totals-panel__row { grid-template-columns: 1fr auto; } .totals-panel__editable--grid { grid-template-columns: repeat(2, 1fr); } } /* Password show/hide field --------------------------------------- */ .password-field { position: relative; display: flex; align-items: stretch; } .password-field .input { padding-right: 4.4rem; } .password-field__toggle { position: absolute; top: 50%; right: 0.45rem; transform: translateY(-50%); background: transparent; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 0.3rem 0.6rem; cursor: pointer; font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink-soft); transition: color 140ms var(--ease), border-color 140ms var(--ease), background 140ms var(--ease); } .password-field__toggle:hover { color: var(--ink); border-color: var(--ink); background: var(--brand-paper); } .password-field__toggle:focus-visible { outline: 2px solid var(--brand-lime); outline-offset: 2px; } .password-field__toggle[aria-pressed="true"] { color: var(--brand-lime-deep); border-color: var(--brand-lime-deep); } /* Totals panel ---------------------------------------------------- */ .totals-panel { background: var(--surface-elev); border: 1px solid var(--ink); padding: 1.25rem; font-variant-numeric: tabular-nums; } .totals-panel__row { display: flex; justify-content: space-between; padding: 0.4rem 0; border-bottom: 1px dashed var(--line); font-size: 0.92rem; } .totals-panel__row:last-child { border-bottom: none; } .totals-panel__row.is-total { border-top: 2px solid var(--ink); border-bottom: none; margin-top: 0.5rem; padding-top: 0.7rem; font-size: 1.1rem; font-weight: 700; } .totals-panel__edit-toggle { background: none; border: none; padding: 0; cursor: pointer; color: var(--brand-blue-deep); font-size: 0.8rem; font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; margin-top: 0.6rem; } .totals-panel__edit-toggle:hover { color: var(--brand-blue); text-decoration: underline; } .totals-panel__editable { display: none; margin-top: 0.6rem; } .totals-panel__editable.is-open { display: block; } .totals-panel__editable .field { margin-bottom: 0.6rem; } .totals-panel__editable .field label { display: block; font-size: 0.75rem; font-family: var(--font-mono); letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 0.2rem; } .totals-panel__editable .field input, .totals-panel__editable .field select { width: 100%; padding: 0.45rem 0.55rem; font-size: 0.9rem; background: var(--surface); border: 1px solid var(--ink); font-family: var(--font-body); } /* Customer preview block on the estimate form ------------------------ */ .customer-preview { border: 1px solid var(--line); padding: 0.9rem 1rem; background: var(--brand-paper); font-size: 0.9rem; margin-top: 0.5rem; } .customer-preview .name { font-weight: 700; } .customer-preview .lines { color: var(--ink-soft); white-space: pre-wrap; margin-top: 0.3rem; } .customer-preview .actions { margin-top: 0.5rem; } .customer-preview .actions a { font-family: var(--font-mono); font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--brand-blue-deep); } /* Status badges -------------------------------------------------- */ .status-badge { display: inline-block; padding: 0.18rem 0.5rem; font-size: 0.72rem; font-family: var(--font-mono); letter-spacing: 0.1em; text-transform: uppercase; border: 1px solid var(--ink); background: var(--surface-elev); } .status-badge.is-draft { color: var(--ink-soft); } .status-badge.is-sent { color: var(--brand-blue-deep); border-color: var(--brand-blue-deep); } .status-badge.is-approved { color: var(--brand-lime-deep); border-color: var(--brand-lime-deep); } .status-badge.is-declined { color: var(--brand-danger); border-color: var(--brand-danger); } .status-badge.is-invoiced { background: var(--ink); color: var(--brand-bone); } .status-badge.is-paid { background: var(--brand-lime-deep); color: var(--brand-bone); border-color: var(--brand-lime-deep); } .status-badge.is-partiallypaid { color: var(--brand-lime-deep); border-color: var(--brand-lime-deep); background: var(--brand-paper); } .status-badge.is-overdue { background: var(--brand-danger); color: #fff; border-color: var(--brand-danger); } .status-badge.is-void { color: var(--ink-muted); border-color: var(--ink-muted); background: var(--brand-paper); text-decoration: line-through; } /* Invoiced banner on Estimate Details */ .invoiced-banner { display: flex; align-items: center; gap: 0.8rem; margin: 0 0 1.2rem; padding: 0.85rem 1.1rem; border-left: 4px solid var(--brand-lime-deep); background: linear-gradient(90deg, rgba(122, 193, 66, 0.10), rgba(122, 193, 66, 0) 60%); border-radius: var(--radius-sm); color: var(--ink); font-size: 0.95rem; } .invoiced-banner__label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.16em; text-transform: uppercase; padding: 0.25rem 0.55rem; background: var(--brand-lime-deep); color: var(--brand-bone); border-radius: 999px; } .invoiced-banner a:hover { text-decoration: underline; } /* Status filter chips (Invoices Index) */ .status-filter__chip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.35rem 0.7rem; border: 1px solid var(--line); border-radius: 999px; background: var(--brand-paper); font-family: var(--font-mono); font-size: 0.72rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink); text-decoration: none; transition: border-color 140ms var(--ease), color 140ms var(--ease), background 140ms var(--ease); } .status-filter__chip span { display: inline-flex; align-items: center; justify-content: center; min-width: 1.4rem; height: 1.1rem; padding: 0 0.35rem; font-size: 0.7rem; border-radius: 999px; background: var(--ink); color: var(--brand-bone); } .status-filter__chip:hover { border-color: var(--ink); color: var(--ink); background: #fff; } .status-filter__chip.is-active { background: var(--ink); border-color: var(--ink); color: var(--brand-bone); } .status-filter__chip.is-active span { background: var(--brand-lime); color: var(--brand-black); } /* Print styles for estimate / invoice details ---------------------- */ @media print { @page { size: Letter; margin: 0.4in; } html, body { background: white !important; color: #000 !important; } body { font-size: 11px; line-height: 1.35; } .sidebar, .appbar, .drawer-backdrop, .sub-banner, .form-actions, .page-header__meta, .alert, .page-header { display: none !important; } .app-shell { grid-template-columns: 1fr; } .main { padding: 0 !important; } .no-print { display: none !important; } .print-only { display: block !important; } .reveal { opacity: 1 !important; animation: none !important; transform: none !important; } /* Force data-tables back to real table layout. Without this, the mobile ".data-table -> stacked cards" rules at @media (max-width: 767.98px) win on narrow print viewports and each renders on its own line. */ .data-table { display: table !important; width: 100% !important; } .data-table thead { display: table-header-group !important; } .data-table tbody { display: table-row-group !important; } .data-table tr { display: table-row !important; } .data-table th, .data-table td { display: table-cell !important; width: auto !important; padding: 0.3rem 0.4rem !important; } .data-table tbody tr { background: transparent !important; border: 0 !important; border-radius: 0 !important; padding: 0 !important; margin: 0 !important; } .data-table tbody tr td::before { content: none !important; display: none !important; } /* Force everything dark on paper */ body, p, div, span, td, th, li, a, h1, h2, h3, h4, h5, .eyebrow, .meta-strip__label, .meta-strip__value, .address-box__lines, .activity-cell__desc, .totals-panel, .totals-panel__row, .estimate-doc__contact, .signature-block__field { color: #000 !important; } a { text-decoration: none !important; } /* Tighten the printed estimate document */ article.reveal { padding: 0.6rem 0.4rem !important; border: none !important; background: white !important; } .estimate-doc__header { grid-template-columns: 1fr 1.2fr 1fr; gap: 0.75rem; margin-bottom: 0.6rem; } .estimate-doc__logo { max-height: 56px; max-width: 150px; } .estimate-doc__contact { font-size: 10.5px; line-height: 1.3; } .estimate-doc__contact-name { font-size: 12px; } .estimate-doc__title .eyebrow { font-size: 9px; letter-spacing: 0.14em; } .estimate-doc__title > div:nth-of-type(2) { font-size: 16px !important; } .address-strip { gap: 0.5rem; margin-bottom: 0.6rem; } .address-box { padding: 0.45rem 0.55rem; background: white !important; border: 1px solid #000 !important; border-radius: 0; } .address-box .eyebrow { font-size: 9px; letter-spacing: 0.14em; } .address-box__name { font-size: 11.5px; margin-top: 0.1rem; } .address-box__lines { font-size: 10.5px; margin-top: 0.1rem; } .meta-strip { margin-bottom: 0.6rem; border: 1px solid #000 !important; border-radius: 0; } .meta-strip__cell { padding: 0.35rem 0.55rem; border-right: 1px solid #000 !important; } .meta-strip__label { font-size: 9px; letter-spacing: 0.12em; } .meta-strip__value { font-size: 11.5px; margin-top: 0.05rem; } .data-table { margin-bottom: 0.6rem !important; font-size: 10.5px; } .data-table th, .data-table td { padding: 0.3rem 0.4rem !important; border-bottom-color: #000 !important; } .data-table thead th { background: #fff !important; color: #000 !important; border-bottom: 1px solid #000 !important; font-size: 9.5px; letter-spacing: 0.1em; } .data-table .num { font-size: 10.5px; } .activity-cell__name { font-size: 11px; } .activity-cell__desc { font-size: 10px; margin-top: 0.05rem; } /* Totals — keep right-aligned and dense on print */ .totals-panel { border: 1px solid #000 !important; background: white !important; border-radius: 0; padding: 0.4rem 0.6rem; min-width: 220px !important; font-size: 10.5px; } .totals-panel__row { padding: 0.18rem 0; border-bottom-color: #000 !important; } .totals-panel__row.is-total { font-size: 12px; padding-top: 0.3rem; } .totals-panel__edit-toggle, .totals-panel__editable { display: none !important; } section { margin-bottom: 0.5rem !important; } section .eyebrow { font-size: 9px; letter-spacing: 0.14em; margin-bottom: 0.15rem !important; } section p { font-size: 10.5px; } .signature-block { margin-top: 1rem; padding-top: 0.6rem; gap: 1rem; border-top-color: #000 !important; } .signature-block__field { font-size: 10px; border-bottom-color: #000 !important; } /* Avoid orphaned splits */ .data-table, .totals-panel, .signature-block, .address-box { page-break-inside: avoid; } thead { display: table-header-group; } tr { page-break-inside: avoid; } } .print-only { display: none; } /* Sidebar workspace badge — plain text label, no container box */ .workspace-badge { display: block; margin: 0.2rem 0 0.6rem; padding: 0; border: none; background: transparent; } .workspace-badge__name { display: block; font-weight: 600; font-size: 0.9rem; color: var(--brand-bone); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* Estimate Details redesign --------------------------------------- */ .estimate-doc__header { display: grid; grid-template-columns: 1fr 1.2fr 1fr; gap: 1.5rem; align-items: start; margin-bottom: 1.5rem; } .estimate-doc__logo { display: block; max-height: 80px; max-width: 200px; object-fit: contain; } .estimate-doc__contact { font-size: 0.9rem; line-height: 1.55; } .estimate-doc__contact-name { font-weight: 700; font-size: 1.05rem; } .estimate-doc__title { text-align: right; } .address-strip { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; margin-bottom: 1.5rem; } .address-box { border: 1px solid var(--line); padding: 0.9rem 1rem; border-radius: var(--radius-sm); background: var(--brand-paper); } .address-box__name { font-weight: 700; margin-top: 0.3rem; } .address-box__lines { color: var(--ink-soft); white-space: pre-wrap; font-size: 0.9rem; margin-top: 0.2rem; } .meta-strip { display: grid; grid-template-columns: repeat(3, 1fr); border: 1px solid var(--line); margin-bottom: 1.5rem; border-radius: var(--radius-sm); overflow: hidden; } .meta-strip__cell { padding: 0.7rem 1rem; border-right: 1px solid var(--line); } .meta-strip__cell:last-child { border-right: none; } .meta-strip__label { font-family: var(--font-mono); font-size: 0.7rem; letter-spacing: 0.08em; color: var(--ink-soft); text-transform: uppercase; } .meta-strip__value { font-weight: 600; margin-top: 0.2rem; } .activity-cell__name { font-weight: 700; } .activity-cell__desc { color: var(--ink-soft); font-size: 0.9rem; margin-top: 0.2rem; white-space: pre-wrap; } .signature-block { display: grid; grid-template-columns: 1fr 1fr; gap: 2rem; margin-top: 3rem; padding-top: 1.5rem; border-top: 1px solid var(--line); } .signature-block__field { border-bottom: 1px solid var(--ink); padding-bottom: 0.2rem; font-family: var(--font-mono); font-size: 0.8rem; letter-spacing: 0.05em; color: var(--ink-soft); } /* Settings: key-value display list ----------------------------- */ .settings-kv { display: grid; grid-template-columns: max-content 1fr; gap: 0.4rem 1.2rem; margin: 0; } .settings-kv dt { font-family: var(--font-mono); font-size: 0.78rem; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-soft); } .settings-kv dd { margin: 0; } .status-badge.is-active { color: var(--brand-lime-deep); border-color: var(--brand-lime-deep); } .status-badge.is-activewithwarning { color: var(--brand-warning, #B45309); border-color: var(--brand-warning, #B45309); } .status-badge.is-locked { color: var(--brand-danger); border-color: var(--brand-danger); } /* Subscription banners ----------------------------------------- */ .sub-banner { display: flex; align-items: center; gap: 0.8rem; padding: 0.7rem 1rem; margin: 0 0 1rem; border-radius: var(--radius-sm); font-size: 0.9rem; } .sub-banner strong { font-weight: 700; } .sub-banner--locked { background: rgba(220, 38, 38, 0.10); border-left: 4px solid var(--brand-danger); color: var(--ink); } .sub-banner--warning { background: rgba(180, 83, 9, 0.10); border-left: 4px solid #B45309; color: var(--ink); } /* ========================================================================== Mobile/tablet responsive — applies only below 1024px. Desktop layout is preserved byte-for-byte. ========================================================================== */ /* New mobile elements are hidden by default (desktop has no app bar). */ .appbar, .drawer-backdrop, .drawer-close { display: none; } @media (max-width: 1023.98px) { /* ---- Top app bar ---- */ .appbar { display: flex; align-items: center; gap: 0.75rem; position: fixed; top: 0; left: 0; right: 0; height: 56px; padding: 0 0.75rem; padding-top: env(safe-area-inset-top); background: var(--brand-iron); border-bottom: 1px solid var(--brand-graphite); z-index: 50; } .appbar__menu { background: none; border: none; cursor: pointer; width: 44px; height: 44px; display: flex; align-items: center; justify-content: center; padding: 0; -webkit-tap-highlight-color: transparent; } .appbar__menu-icon { display: inline-block; width: 22px; height: 16px; position: relative; } .appbar__menu-icon span { position: absolute; left: 0; right: 0; height: 2px; background: var(--brand-bone); border-radius: 1px; } .appbar__menu-icon span:nth-child(1) { top: 0; } .appbar__menu-icon span:nth-child(2) { top: 7px; } .appbar__menu-icon span:nth-child(3) { top: 14px; } .appbar__brand { display: flex; align-items: center; flex: 0 0 auto; } .appbar__brand img { height: 32px; width: auto; display: block; } .appbar__spacer { flex: 1; } /* ---- App shell adjustments ---- */ .app-shell { display: block; padding-top: calc(56px + env(safe-area-inset-top)); } /* ---- Sidebar becomes a drawer ---- */ .sidebar { position: fixed; top: 0; bottom: 0; left: 0; width: 280px; max-width: 85vw; transform: translateX(-100%); transition: transform 220ms var(--ease, ease-out); z-index: 100; overflow-y: auto; padding-top: calc(0.75rem + env(safe-area-inset-top)); } .sidebar.is-open { transform: translateX(0); } .drawer-close { display: block; position: absolute; top: 0.5rem; right: 0.5rem; width: 44px; height: 44px; background: none; border: none; color: var(--brand-bone); font-size: 1.75rem; line-height: 1; cursor: pointer; -webkit-tap-highlight-color: transparent; } /* ---- Backdrop ---- */ .drawer-backdrop { display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.45); opacity: 0; pointer-events: none; transition: opacity 220ms var(--ease, ease-out); z-index: 90; } .drawer-backdrop.is-visible { opacity: 1; pointer-events: auto; } .drawer-backdrop[hidden] { display: none !important; } /* ---- Main content area ---- */ .main { max-width: none; padding: 1rem; padding-bottom: calc(1rem + env(safe-area-inset-bottom)); } /* ---- Body scroll lock when drawer open ---- */ body.drawer-open { overflow: hidden; } } @media (max-width: 1023.98px) { /* ---- Field grid collapse ---- */ .field-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.75rem; } .field-grid .field--col-3, .field-grid .field--col-4, .field-grid .field--col-6, .field-grid .field--col-8, .field-grid .field--col-9, .field-grid .field--col-12 { grid-column: span 2; } /* ---- Inputs: 44px tap target + 16px font (prevents iOS auto-zoom) ---- */ .input, input[type="text"], input[type="email"], input[type="tel"], input[type="number"], input[type="date"], input[type="password"], select, textarea { min-height: 44px; font-size: 16px; } /* ---- Sticky bottom action bar on Edit/Create pages ---- */ .form-actions { position: sticky; bottom: 0; left: 0; right: 0; background: var(--surface-elev); border-top: 1px solid var(--line); padding: 0.75rem 1rem; padding-bottom: calc(0.75rem + env(safe-area-inset-bottom)); margin: 1rem -1rem -1rem -1rem; box-shadow: 0 -2px 8px rgba(0,0,0,0.06); z-index: 30; display: flex; gap: 0.5rem; flex-wrap: wrap; } .form-actions .btn { flex: 1 1 auto; min-height: 44px; } } @media (max-width: 599.98px) { /* ---- Single column at phone widths ---- */ .field-grid { grid-template-columns: 1fr; } .field-grid > * { grid-column: 1 / -1 !important; } } @media (max-width: 767.98px) { /* ---- Line items: table -> cards ---- */ .line-items { border: none; box-shadow: none; } .line-items thead { display: none; } .line-items table, .line-items tbody, .line-items tr, .line-items td { display: block; width: 100%; } .line-items tr.line-row { background: var(--surface-elev); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 0.75rem; padding: 0.75rem; position: relative; } .line-items td { padding: 0.4rem 0; border: none; } .line-items td.handle { display: none; } .line-items td.product-cell::before { content: "Product / service"; } .line-items td:nth-of-type(3)::before { content: "Description"; } .line-items td:nth-of-type(4)::before { content: "Qty"; } .line-items td:nth-of-type(5)::before { content: "Rate"; } .line-items td:nth-of-type(6)::before { content: "Amount"; } .line-items td::before { display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink-muted); margin-bottom: 0.2rem; } .line-items td.row-amount { font-weight: 600; font-size: 1.1rem; color: var(--ink); } .line-items td.row-actions { text-align: right; padding-top: 0.6rem; border-top: 1px dashed var(--line); margin-top: 0.4rem; } .line-items td.row-actions button { min-height: 44px; padding: 0.5rem 1rem; } /* Qty | Rate | Amount on a single row inside each card */ .line-items tr.line-row td:nth-of-type(4), .line-items tr.line-row td:nth-of-type(5), .line-items tr.line-row td:nth-of-type(6) { display: inline-block; width: 33.333%; vertical-align: top; padding-right: 0.5rem; } .line-items tr.line-row td:nth-of-type(6) { padding-right: 0; text-align: right; } } @media (max-width: 767.98px) { /* ---- Index page tables -> cards ---- */ .data-table, .data-table thead, .data-table tbody, .data-table tr, .data-table td, .data-table th { display: block; width: 100%; } .data-table thead { display: none; } .data-table tbody tr { background: var(--surface-elev); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 0.6rem; padding: 0.75rem; } .data-table tbody tr td { padding: 0.25rem 0; border: none; } .data-table tbody tr td::before { content: attr(data-label); display: block; font-size: 0.7rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--ink-muted); margin-bottom: 0.15rem; } .data-table tbody tr td:empty, .data-table tbody tr td:not([data-label])::before { display: none; } } @media (max-width: 767.98px) { /* ---- Dashboard tiles: single column on phone ---- */ .tile-grid { grid-template-columns: 1fr !important; gap: 0.75rem; } } @media (max-width: 1023.98px) and (min-width: 768px) { /* ---- Tablet portrait: 2-column tiles ---- */ .tile-grid { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; } } @media (max-width: 767.98px) { /* ---- Estimate/Invoice Details: page-header stacks; meta toolbar scrolls ---- */ .page-header { flex-direction: column; gap: 0.75rem; } .page-header__meta { position: sticky; top: 56px; /* App bar height */ z-index: 25; background: var(--surface); padding: 0.5rem 1rem; margin: 0 -1rem; display: flex; gap: 0.5rem; flex-wrap: wrap; /* Wrap onto multiple rows so every button stays visible */ align-items: center; } .page-header__meta .btn, .page-header__meta form { flex: 0 0 auto; min-height: 44px; } .page-header__meta form .btn { width: 100%; } /* List search bar: take the full row on mobile so it doesn't overflow */ .page-header__meta .list-search { flex: 1 1 100%; min-width: 0; } .page-header__meta .list-search input[type="search"] { flex: 1 1 auto; width: auto; min-width: 0; } .page-header__meta .list-search__btn { width: auto; flex: 0 0 auto; } /* ---- Document body: header stacks; smaller surrounding padding ---- */ .estimate-doc__header { flex-direction: column; align-items: flex-start; gap: 0.75rem; } .estimate-doc__header > * { width: 100%; } article.reveal { padding: 1rem !important; } } @media (max-width: 1023.98px) { /* ---- Global tap target minimum ---- */ .btn, .nav-link, a.btn { min-height: 44px; padding: 0.65rem 1rem; } /* ---- Disable iOS tap-highlight halo; rely on :active state ---- */ a, button, .nav-link, .btn, [role="button"] { -webkit-tap-highlight-color: transparent; } /* ---- Prevent text selection on navigation labels ---- */ .nav-link, .appbar__brand, .sidebar__group-label { -webkit-user-select: none; user-select: none; } /* ---- Banners full-width and readable ---- */ .sub-banner { padding: 0.75rem 1rem; flex-wrap: wrap; gap: 0.5rem; } } /* ========================================================================== Blog index & articles ========================================================================== */ /* Blog index: grid of article cards */ .article-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 1.5rem; } .article-card { display: flex; flex-direction: column; gap: 0.85rem; padding: 1.75rem 1.5rem 1.5rem; background: var(--surface-elev); border: 1px solid var(--line); border-radius: var(--radius); color: var(--ink); transition: transform 180ms var(--ease), box-shadow 180ms var(--ease), border-color 180ms var(--ease); text-decoration: none; position: relative; } .article-card:hover { transform: translateY(-2px); border-color: var(--brand-blue); box-shadow: 0 12px 32px -16px rgba(27, 110, 222, 0.35), 0 4px 0 0 var(--brand-lime); } .article-card:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 3px; } .article-card__meta { font-family: var(--font-mono); font-size: 0.72rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-lime-deep); } .article-card__title { font-family: var(--font-display); font-size: 1.35rem; line-height: 1.15; letter-spacing: -0.015em; font-weight: 700; color: var(--ink); margin: 0; } .article-card__excerpt { color: var(--ink-soft); font-size: 0.95rem; line-height: 1.55; margin: 0; } .article-card__link { margin-top: auto; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--brand-blue); padding-top: 0.4rem; } /* Article shell — single-column reading layout */ .article-shell { max-width: 760px; margin: 0 auto; padding: 4rem 1.5rem 5rem; } .article-header { margin-bottom: 2.5rem; border-bottom: 1px solid var(--line); padding-bottom: 2rem; } .article-back { display: inline-block; font-family: var(--font-mono); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink-soft); margin-bottom: 1.25rem; text-decoration: none; border-bottom: 1px solid transparent; transition: color 140ms var(--ease), border-color 140ms var(--ease); } .article-back:hover { color: var(--brand-blue-deep); border-bottom-color: var(--brand-blue-deep); } .article-meta { font-family: var(--font-mono); font-size: 0.74rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: var(--brand-lime-deep); margin-bottom: 1rem; } .article-shell h1 { font-size: clamp(2rem, 4.5vw, 3.2rem); line-height: 1.05; letter-spacing: -0.025em; margin: 0 0 1.25rem; } .article-deck { font-size: 1.2rem; line-height: 1.55; color: var(--ink-soft); font-weight: 500; margin: 0; max-width: 64ch; } /* Prose — readable body typography */ .prose { font-size: 1.05rem; line-height: 1.75; color: var(--ink); } .prose > * + * { margin-top: 1.2rem; } .prose p { margin: 0; } .prose h2 { font-size: 1.75rem; line-height: 1.2; letter-spacing: -0.02em; margin: 3rem 0 1rem; padding-top: 1rem; border-top: 1px solid var(--line); } .prose h3 { font-size: 1.2rem; line-height: 1.3; margin: 2rem 0 0.6rem; letter-spacing: -0.01em; } .prose ul, .prose ol { margin: 0 0 0 0.25rem; padding-left: 1.5rem; } .prose li { margin: 0.5rem 0; padding-left: 0.25rem; } .prose li::marker { color: var(--brand-lime-deep); font-weight: 700; } .prose strong { color: var(--ink); font-weight: 700; } .prose em { font-style: italic; color: var(--ink-soft); } .prose a { color: var(--brand-blue-deep); border-bottom: 1px solid var(--brand-blue); text-decoration: none; transition: background 120ms var(--ease), color 120ms var(--ease); } .prose a:hover { background: rgba(27, 110, 222, 0.08); color: var(--brand-blue-deep); } .prose blockquote { margin: 1.4rem 0; padding: 1rem 1.25rem; background: var(--brand-paper); border-left: 3px solid var(--brand-lime); color: var(--ink-soft); font-size: 0.98rem; border-radius: 0 var(--radius) var(--radius) 0; } .prose blockquote strong { color: var(--ink); } /* Article comparison table */ .article-table { width: 100%; border-collapse: collapse; font-size: 0.92rem; margin: 1.5rem 0; } .article-table th, .article-table td { text-align: left; padding: 0.7rem 0.85rem; border-bottom: 1px solid var(--line); vertical-align: top; } .article-table th { background: var(--brand-paper); font-weight: 700; letter-spacing: 0.02em; font-size: 0.8rem; text-transform: uppercase; color: var(--ink-soft); border-bottom: 2px solid var(--ink); } .article-table tbody tr:hover { background: rgba(122, 193, 66, 0.04); } .article-table strong { color: var(--ink); } /* Article CTA card */ .article-cta { margin: 3.5rem 0 0; padding: 2rem 1.75rem; background: var(--brand-black); color: var(--brand-bone); border-radius: var(--radius); text-align: center; box-shadow: 0 12px 32px -16px rgba(10, 10, 10, 0.4); } .article-cta h3 { color: var(--brand-bone); margin: 0 0 0.5rem; font-size: 1.4rem; letter-spacing: -0.01em; } .article-cta p { color: var(--brand-steel); margin: 0 0 1.25rem; font-size: 0.95rem; } /* Related articles list */ .article-related { margin-top: 3rem; padding-top: 2rem; border-top: 1px solid var(--line); } .article-related ul { list-style: none; padding: 0; margin: 0.8rem 0 0; display: flex; flex-direction: column; gap: 0.5rem; } .article-related li a { display: block; padding: 0.75rem 0.85rem; color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); font-size: 0.95rem; font-weight: 600; transition: border-color 140ms var(--ease), background 140ms var(--ease), color 140ms var(--ease); } .article-related li a:hover { border-color: var(--brand-blue); background: var(--brand-paper); color: var(--brand-blue-deep); } /* Mobile tightening */ @@media (max-width: 720px) { .article-shell { padding: 2.5rem 1rem 3rem; } .article-shell h1 { font-size: 2rem; } .article-deck { font-size: 1.05rem; } .prose { font-size: 1rem; line-height: 1.7; } .prose h2 { font-size: 1.45rem; margin-top: 2.25rem; } .article-table { font-size: 0.85rem; } .article-table th, .article-table td { padding: 0.55rem 0.6rem; } } /* Dark-mode adjustments */ @@media (prefers-color-scheme: dark) { .article-card { background: #0E1116; border-color: #1F2429; } .article-card:hover { border-color: var(--brand-blue); } .article-card__title { color: var(--brand-bone); } .article-card__excerpt { color: #B0B3B8; } .prose blockquote { background: #0E1116; } .article-table th { background: #0E1116; } .article-related li a { border-color: #1F2429; } .article-related li a:hover { background: #0E1116; color: var(--brand-blue-glow); } } /* ========================================================== Customer Activity tabs (used on /Customers/Edit/{id}) ========================================================== */ .activity-section { margin-top: 2.4rem; background: var(--surface-elev); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 1.6rem; box-shadow: 0 1px 0 rgba(10, 10, 10, 0.02), 0 8px 24px -16px rgba(10, 10, 10, 0.08); } .activity-section__head { margin-bottom: 1.2rem; } .activity-tabs { display: flex; flex-wrap: wrap; gap: 0.4rem; border-bottom: 1px solid var(--line); margin-bottom: 1rem; } .activity-tab { appearance: none; background: none; border: 0; border-bottom: 2px solid transparent; padding: 0.6rem 0.9rem; font: inherit; font-weight: 600; color: var(--ink-soft); cursor: pointer; transition: color 120ms var(--ease), border-color 120ms var(--ease); } .activity-tab:hover { color: var(--ink); } .activity-tab:focus-visible { outline: 2px solid var(--brand-blue); outline-offset: 2px; border-radius: var(--radius-sm); } .activity-tab.is-active { color: var(--ink); border-bottom-color: var(--brand-lime); } .activity-tab__count { display: inline-block; margin-left: 0.35rem; padding: 0 0.4rem; font-size: 0.8em; background: var(--brand-bone); border-radius: 999px; color: var(--ink-soft); } .activity-tab.is-active .activity-tab__count { background: var(--brand-lime); color: var(--brand-black); } .activity-panel { display: none; } .activity-panel.is-active { display: block; } /* ========================================================== Per-row Activity links on /Customers index ========================================================== */ .row-activity { display: inline-flex; flex-wrap: wrap; gap: 0.4rem 0.8rem; font-size: 0.9em; } .row-activity__link { color: var(--brand-blue-deep); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; } .row-activity__link:hover { color: var(--brand-blue); } .row-activity__muted { color: var(--ink-muted); } /* ========================================================== List search input + filter chip (Customers/Estimates/Invoices/Payments) ========================================================== */ .list-search { display: flex; align-items: center; gap: 0.4rem; } .list-search input[type="search"] { appearance: none; width: 22rem; max-width: 100%; padding: 0.5rem 0.7rem; font: inherit; background: var(--surface-elev); color: var(--ink); border: 1px solid var(--line); border-radius: var(--radius); transition: border-color 120ms var(--ease), box-shadow 120ms var(--ease); } .list-search input[type="search"]:focus-visible { outline: none; border-color: var(--brand-blue); box-shadow: 0 0 0 3px rgba(27, 110, 222, 0.18); } .list-search__btn { appearance: none; background: var(--ink); color: var(--surface-elev); border: 0; border-radius: var(--radius); padding: 0.5rem 0.9rem; font: inherit; font-weight: 600; cursor: pointer; transition: background 120ms var(--ease); } .list-search__btn:hover { background: var(--brand-iron); } .filter-chip { display: inline-flex; align-items: center; gap: 0.4rem; margin: 0.4rem 0 1rem; padding: 0.35rem 0.7rem; background: var(--brand-bone); border: 1px solid var(--line); border-radius: 999px; font-size: 0.85em; color: var(--ink-soft); } .filter-chip a { color: var(--brand-blue-deep); text-decoration: underline; }