/* * NorthThread design tokens, "ledger paper" (project brief Section 3a). * * All theming happens here by overriding Bootstrap 5.3 CSS variables at the * token and component-variable level. Never scatter hex values through views; * never fork Bootstrap. New styles belong in a commented section below. */ /* ===== Tokens ===== */ :root { --ink: #1B2733; /* near-black blue-slate, body text, table figures */ --paper: #FAFAF7; /* warm off-white, marketing pages */ --canvas: #EEF1F4; /* cool light gray, the app's working background */ --surface: #FFFFFF; /* cards, tables */ --accent: #0F5C5A; /* deep teal, primary buttons, links, active nav */ --accent-hover: #0B4644; --credit: #1D6F42; /* ledger green, money recovered, passing checks */ --debit: #A33323; /* ledger red, shortfalls, blockers */ --amber: #B07C1F; /* warnings, waived exceptions (accents/large use) */ --amber-ink: #8A6118; /* amber darkened for small text, keeps WCAG AA on paper */ --hairline: #E6E4DD; /* 1px borders instead of shadows */ /* Map tokens onto Bootstrap */ --bs-body-bg: var(--paper); --bs-body-color: var(--ink); --bs-emphasis-color: var(--ink); --bs-border-color: var(--hairline); --bs-border-radius: 6px; --bs-link-color: var(--accent); --bs-link-color-rgb: 15, 92, 90; --bs-link-hover-color: var(--accent-hover); --bs-link-hover-color-rgb: 11, 70, 68; --bs-primary: var(--accent); --bs-primary-rgb: 15, 92, 90; --bs-success: var(--credit); --bs-success-rgb: 29, 111, 66; --bs-danger: var(--debit); --bs-danger-rgb: 163, 51, 35; --bs-warning: var(--amber); --bs-warning-rgb: 176, 124, 31; } /* The brand ribbon gradient (same stops as the logo), the product's one decorative signature: the hero pipeline rail, usage meters, and money the engine found. Everything else stays in status colors. */ :root { --nt-gradient: linear-gradient(100deg, #163A5F 0%, #1E7F86 45%, #2FB57C 100%); } /* ===== Dark theme ===== Token flips only; components derive from tokens and color-mix, so most of the app follows. Toggled from the topbar (controllers/theme_controller.js), persisted in localStorage, applied to before first paint. */ [data-bs-theme="dark"] { --ink: #E4E9EF; --paper: #14181E; --canvas: #0E1116; --surface: #1A1F26; --accent: #3AAFA9; --accent-hover: #52C4BE; --credit: #3FA96E; --debit: #D4604F; --amber: #C79136; --amber-ink: #D9A94A; --hairline: #2A313B; --bs-link-color-rgb: 58, 175, 169; --bs-link-hover-color-rgb: 82, 196, 190; --bs-primary-rgb: 58, 175, 169; } [data-bs-theme="dark"] .card { border-color: color-mix(in srgb, var(--ink) 10%, transparent); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 12px 32px -18px rgba(0, 0, 0, 0.6); } [data-bs-theme="dark"] .btn-primary { color: #0E1116; } /* Bootstrap component variables (compiled colors don't follow --bs-primary) */ .btn-primary { --bs-btn-bg: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent-hover); --bs-btn-hover-border-color: var(--accent-hover); --bs-btn-active-bg: var(--accent-hover); --bs-btn-active-border-color: var(--accent-hover); --bs-btn-disabled-bg: var(--accent); --bs-btn-disabled-border-color: var(--accent); } .btn-outline-primary { --bs-btn-color: var(--accent); --bs-btn-border-color: var(--accent); --bs-btn-hover-bg: var(--accent); --bs-btn-hover-border-color: var(--accent); --bs-btn-active-bg: var(--accent); --bs-btn-active-border-color: var(--accent); } .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); } /* ===== Base ===== */ .card, .table { background-color: var(--surface); } /* Cards float on the canvas with layered soft shadows, not drawn borders. The faint ink border is only there so cards keep an edge on pale screens. */ .card { --bs-card-border-radius: 14px; --bs-card-inner-border-radius: 13px; border: 1px solid color-mix(in srgb, var(--ink) 5%, transparent); box-shadow: 0 1px 2px rgba(27, 39, 51, 0.04), 0 12px 32px -18px rgba(27, 39, 51, 0.16); } /* Quiet table chrome: muted uppercase headers, whisper-faint row rules. Cells inherit the card's white, never the page background. */ .card .table { --bs-border-color: color-mix(in srgb, var(--ink) 6%, transparent); --bs-table-bg: transparent; } .card .table thead th { font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; color: color-mix(in srgb, var(--ink) 50%, transparent); border-bottom-width: 1px; } .card .table-hover > tbody > tr:hover > * { background: color-mix(in srgb, var(--accent) 4%, transparent); box-shadow: none; } /* Pill badges, soft-tinted. */ .badge { border-radius: 999px; padding: 0.38em 0.75em; font-weight: 600; letter-spacing: 0.01em; } /* Softer control corners across the app. */ .btn { --bs-btn-border-radius: 0.55rem; } .form-control, .form-select { border-radius: 0.55rem; } /* Tabular numerals wherever money or counts appear (non-negotiable). */ .num { font-variant-numeric: tabular-nums; text-align: right; } /* Sticky headers on data tables (brief Section 3a). */ .card table thead th { position: sticky; top: 0; background: var(--surface); z-index: 2; } /* ===== App shell ===== */ .nt-shell { display: flex; min-height: 100vh; } .nt-sidebar { width: 224px; --bs-offcanvas-width: 264px; /* offcanvas mode below lg; desktop stays 224px */ flex-shrink: 0; background: var(--surface); border-right: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); padding: 1rem 0.75rem; display: flex; flex-direction: column; } .nt-wordmark { font-weight: 650; font-size: 1.05rem; letter-spacing: 0.01em; color: var(--ink); text-decoration: none; padding: 0.25rem 0.75rem 1.1rem; display: block; } .nt-wordmark:hover { color: var(--accent); } .nt-nav .nav-link { color: color-mix(in srgb, var(--ink) 78%, transparent); border-radius: 9px; padding: 0.45rem 0.75rem; font-size: 0.925rem; } .nt-nav .nav-link:hover { background: color-mix(in srgb, var(--ink) 4%, transparent); color: var(--ink); } .nt-nav .nav-link.active { background: color-mix(in srgb, var(--accent) 7%, transparent); color: var(--accent); font-weight: 600; } .nt-nav .nav-link.disabled { color: color-mix(in srgb, var(--ink) 40%, transparent); } .nt-main { flex-grow: 1; min-width: 0; display: flex; flex-direction: column; background: var(--canvas); } .nt-topbar { background: var(--surface); border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); padding: 0.5rem 1.5rem; display: flex; align-items: center; justify-content: space-between; min-height: 52px; } .nt-content { padding: 1.5rem; max-width: 1400px; width: 100%; } /* Single period-picker pill: "March 2026" + calendar icon. */ .nt-datepick { display: inline-flex; align-items: center; gap: 0.7rem; background: var(--surface); border: 1px solid color-mix(in srgb, var(--ink) 12%, transparent); border-radius: 10px; padding: 0.45rem 0.9rem; font-weight: 600; font-size: 0.9rem; color: var(--ink); box-shadow: 0 1px 2px rgba(27, 39, 51, 0.05); } .nt-datepick:hover { border-color: color-mix(in srgb, var(--ink) 22%, transparent); } .nt-datepick i { color: color-mix(in srgb, var(--ink) 55%, transparent); } .nt-month-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.35rem; } .nt-month-cell { text-align: center; padding: 0.35rem 0.25rem; border-radius: 8px; font-size: 0.83rem; color: var(--ink); text-decoration: none; } .nt-month-cell:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); } .nt-month-active { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); font-weight: 600; } /* Topbar bell and user chip. */ .nt-bell { border: none; padding: 0.35rem 0.5rem; font-size: 1.15rem; color: color-mix(in srgb, var(--ink) 65%, transparent); border-radius: 10px; } .nt-bell:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); color: var(--ink); } .nt-bell-badge { position: absolute; top: 0; right: 0; background: var(--debit); color: #fff; font-size: 0.62rem; font-weight: 600; line-height: 1; padding: 0.22em 0.45em; border-radius: 999px; border: 2px solid var(--surface); } .nt-userchip { border: none; padding: 0.25rem 0.5rem; border-radius: 10px; } .nt-userchip:hover { background: color-mix(in srgb, var(--ink) 5%, transparent); } .nt-avatar { width: 2.1rem; height: 2.1rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; font-weight: 650; letter-spacing: 0.02em; color: #fff; background: linear-gradient(135deg, #163A5F, var(--accent) 60%, #149B62); } /* ===== Auth screens (centered card on paper) ===== */ .nt-auth { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 2rem 1rem; background: var(--canvas); } .nt-auth-card { width: 100%; max-width: 420px; } /* ===== Severity badges (validation exceptions) ===== */ .badge.nt-blocker { background: color-mix(in srgb, var(--debit) 12%, transparent); color: var(--debit); border: 1px solid color-mix(in srgb, var(--debit) 35%, transparent); } .badge.nt-ok { background: color-mix(in srgb, var(--credit) 12%, transparent); color: var(--credit); border: 1px solid color-mix(in srgb, var(--credit) 35%, transparent); } .badge.nt-warning { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber-ink); border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); } /* ===== Reconciliation Delta strip (the one deliberate moment of drama) ===== */ .nt-delta-strip { background: var(--surface); border: 1px solid var(--hairline); border-left: 4px solid var(--debit); border-radius: var(--bs-border-radius); padding: 1rem 1.5rem; } .nt-delta-strip.nt-delta-clear { border-left-color: var(--credit); } .nt-delta-strip .nt-delta-figure { font-size: 2rem; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--debit); } .nt-delta-strip.nt-delta-clear .nt-delta-figure { color: var(--credit); } /* ===== Empty states ===== */ .nt-empty { text-align: center; padding: 4rem 2rem; color: color-mix(in srgb, var(--ink) 75%, transparent); } /* ===== Marketing site ===== */ /* Display face: Fraunces (SIL OFL, self-hosted). Marketing pages only; the app keeps the system stack per the brief. */ @font-face { font-family: "Fraunces"; src: url("/assets/fraunces-600-fd14a0a0.woff2") format("woff2"); font-weight: 600; font-style: normal; font-display: swap; } @font-face { font-family: "Fraunces"; src: url("/assets/fraunces-600-italic-8a947094.woff2") format("woff2"); font-weight: 600; font-style: italic; font-display: swap; } .nt-marketing { display: flex; flex-direction: column; min-height: 100vh; } .nt-marketing h1, .nt-marketing h2 { font-family: "Fraunces", Georgia, "Times New Roman", serif; font-weight: 600; } .nt-marketing h2 { font-size: clamp(1.7rem, 3vw, 2.3rem); letter-spacing: -0.01em; } /* Vertical rhythm: whitespace does the separating, not boxes and bands. */ .nt-section { padding-block: clamp(4rem, 9vw, 7rem); } .nt-section-head { max-width: 640px; margin-inline: auto; text-align: center; margin-bottom: clamp(2.5rem, 5vw, 4.5rem); } .nt-section-head p { color: color-mix(in srgb, var(--ink) 62%, transparent); font-size: 1.05rem; margin-bottom: 0; } /* The one flourish inside headlines: serif italic in ledger red. */ .nt-marketing h1 em, .nt-marketing h2 em { font-style: italic; color: var(--debit); } .nt-navbar { background: color-mix(in srgb, var(--paper) 92%, transparent); backdrop-filter: blur(8px); border-bottom: 1px solid var(--hairline); /* Ledger rule across the very top: teal into green, like a bound register. */ border-top: 3px solid var(--accent); padding-block: 0.9rem; } .nt-navbar .navbar-brand { font-size: 1.35rem; } .nt-navbar .nav-link { color: var(--ink); font-size: 1.05rem; padding-inline: 0.95rem; } .nt-navbar .btn { font-size: 0.95rem; } .nt-navbar .nav-link.active { color: var(--accent); font-weight: 600; } .nt-brand { font-weight: 650; letter-spacing: 0.01em; color: var(--ink); display: inline-flex; align-items: center; gap: 0.5rem; text-decoration: none; } .nt-brand:hover { color: var(--accent); } /* Brand mark: the ribbon-N logo (app/assets/images/logo.png). */ .nt-brand-logo { height: 2.1rem; width: auto; flex-shrink: 0; } /* Bigger on the marketing nav and auth pages, where the brand leads. */ .nt-navbar .nt-brand-logo { height: 2.7rem; } .nt-auth .nt-brand-logo { height: 2.9rem; } .nt-eyebrow { text-transform: uppercase; letter-spacing: 0.12em; font-size: 0.75rem; font-weight: 650; color: var(--accent); margin-bottom: 0.75rem; } .nt-display { font-size: clamp(2rem, 4vw, 2.9rem); font-weight: 600; line-height: 1.18; letter-spacing: -0.01em; color: var(--ink); } .nt-display-sm { font-size: clamp(1.8rem, 3.5vw, 2.5rem); font-weight: 650; line-height: 1.15; letter-spacing: -0.01em; color: var(--ink); } .nt-photo { border-radius: 10px; border: 1px solid var(--hairline); object-fit: cover; aspect-ratio: 4 / 3; } .nt-band { background: var(--surface); border-block: 1px solid var(--hairline); } .nt-pillar { padding: 0.5rem; height: 100%; max-width: 340px; margin-inline: auto; } .nt-pillar-icon { font-size: 1.5rem; color: var(--accent); display: inline-block; margin-bottom: 0.75rem; } .nt-steps { padding-left: 0; list-style: none; counter-reset: step; margin-bottom: 1.5rem; } .nt-steps li { counter-increment: step; position: relative; padding-left: 3rem; margin-bottom: 1rem; } .nt-steps li::before { content: counter(step); position: absolute; left: 0; top: -0.15rem; width: 2rem; height: 2rem; border-radius: 50%; background: color-mix(in srgb, var(--accent) 10%, transparent); color: var(--accent); font-weight: 650; display: flex; align-items: center; justify-content: center; font-variant-numeric: tabular-nums; } /* Pricing */ .nt-price-card { border: 1px solid var(--hairline); border-radius: 10px; background: var(--surface); padding: 1.75rem; height: 100%; position: relative; } .nt-price-featured { border-color: var(--accent); box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 12%, transparent); } .nt-price-flag { position: absolute; top: -0.7rem; left: 1.5rem; background: var(--accent); color: #fff; font-size: 0.7rem; font-weight: 650; letter-spacing: 0.06em; text-transform: uppercase; padding: 0.2rem 0.6rem; border-radius: 999px; } .nt-price { font-size: 2.25rem; font-weight: 650; color: var(--ink); margin-bottom: 1rem; text-align: left; /* .num right-aligns; prices anchor left in their card */ } .nt-price-period { font-size: 0.95rem; font-weight: 400; color: color-mix(in srgb, var(--ink) 60%, transparent); } .nt-price-list { list-style: none; padding-left: 0; margin-bottom: 1.5rem; font-size: 0.9rem; } .nt-price-list li { margin-bottom: 0.5rem; padding-left: 1.5rem; position: relative; /* hanging indent: wrapped lines align after the check */ } .nt-price-list .bi { color: var(--credit); position: absolute; left: 0; } /* About values / contact rows */ .nt-value { display: flex; gap: 0.9rem; align-items: flex-start; } .nt-value .bi { font-size: 1.25rem; color: var(--accent); margin-top: 0.1rem; } /* Footer: dark ink grounds the page. */ .nt-footer { background: var(--ink); color: color-mix(in srgb, var(--paper) 80%, transparent); } .nt-footer .nt-brand { color: var(--paper); } .nt-footer .text-secondary { color: color-mix(in srgb, var(--paper) 55%, transparent) !important; } .nt-footer-heading { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.1em; color: color-mix(in srgb, var(--paper) 50%, transparent); margin-bottom: 0.75rem; } .nt-footer a { color: color-mix(in srgb, var(--paper) 85%, transparent); text-decoration: none; } .nt-footer a:hover { color: #fff; } .nt-footer li { margin-bottom: 0.4rem; } .nt-footer .border-top { border-color: color-mix(in srgb, var(--paper) 15%, transparent) !important; } /* ===== Home: light hero, headline left, real dashboard shot right ===== */ /* Soft washes borrow the logo ribbon's navy-teal-mint, kept faint on paper, over flowing thread-lines: the bordereau as a woven current. */ .nt-hero-light { background: radial-gradient(ellipse 55% 60% at 82% 20%, color-mix(in srgb, #35D08E 10%, transparent), transparent 70%), radial-gradient(ellipse 50% 55% at 12% 85%, color-mix(in srgb, var(--accent) 9%, transparent), transparent 72%), url("data:image/svg+xml;utf8,") bottom center / 100% auto no-repeat, var(--paper); border-bottom: 1px solid var(--hairline); overflow: hidden; } /* Headline flourish in the logo ribbon's navy-teal-mint. Specificity must beat ".nt-marketing h1 em" (the ledger-red default flourish). */ .nt-marketing h1 em.nt-gradient-text, .nt-marketing h2 em.nt-gradient-text { background: linear-gradient(100deg, #163A5F 0%, #1E7F86 45%, #2FB57C 100%); -webkit-background-clip: text; background-clip: text; color: transparent; } /* The app shot: a faithful miniature of the real dashboard. */ .nt-app-shot { display: flex; background: var(--surface); border: 1px solid var(--hairline); border-radius: 14px; overflow: hidden; box-shadow: 0 1px 2px rgba(15, 33, 32, 0.06), 0 24px 70px -24px rgba(15, 33, 32, 0.35); } .nt-app-side { flex: 0 0 168px; flex-direction: column; gap: 0.15rem; padding: 0.9rem 0.6rem; background: #fff; border-right: 1px solid var(--hairline); font-size: 0.8rem; } .nt-app-side-brand { display: flex; align-items: center; gap: 0.4rem; font-weight: 650; font-size: 0.85rem; padding: 0.15rem 0.5rem 0.8rem; color: var(--ink); } .nt-app-side-logo { height: 1.1rem; width: auto; } .nt-app-side-link { display: flex; align-items: center; gap: 0.45rem; padding: 0.35rem 0.55rem; border-radius: 7px; color: color-mix(in srgb, var(--ink) 72%, transparent); } .nt-app-side-link i { font-size: 0.85rem; } .nt-app-side-active { background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent-ink, var(--accent)); font-weight: 600; } .nt-app-main { flex: 1 1 auto; min-width: 0; padding: 1rem; background: var(--canvas); } .nt-app-tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.6rem; } .nt-app-tile { background: var(--surface); border: 1px solid var(--hairline); border-radius: 9px; padding: 0.55rem 0.65rem; min-width: 0; } .nt-app-tile-label { font-size: 0.68rem; color: color-mix(in srgb, var(--ink) 55%, transparent); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .nt-app-tile-value { font-size: 1.15rem; font-weight: 650; color: var(--ink); line-height: 1.3; } .nt-app-tile-note { font-size: 0.68rem; color: color-mix(in srgb, var(--ink) 55%, transparent); white-space: nowrap; } .nt-app-tablecard { background: var(--surface); border: 1px solid var(--hairline); border-radius: 9px; overflow: hidden; } @media (max-width: 575px) { .nt-app-tiles { grid-template-columns: repeat(2, 1fr); } } /* Full-width one-sentence promise band. */ .nt-claim-band { background: var(--surface); border-block: 1px solid var(--hairline); padding-block: clamp(2.5rem, 6vw, 4rem); } .nt-claim { font-family: "Fraunces", Georgia, "Times New Roman", serif; font-size: clamp(1.5rem, 3vw, 2.2rem); font-weight: 600; line-height: 1.3; color: var(--ink); max-width: 820px; margin-inline: auto; } .nt-claim em { font-style: italic; color: var(--debit); } /* Four-step pipeline strip under the hero, hairline-separated. */ .nt-step-strip { display: grid; grid-template-columns: repeat(4, 1fr); border-block: 1px solid var(--hairline); } .nt-step { display: flex; align-items: center; gap: 0.75rem; padding: 1.1rem 1rem; } .nt-step + .nt-step { border-left: 1px solid var(--hairline); } .nt-step i { font-size: 1.35rem; color: var(--accent); } .nt-step strong { display: block; font-size: 0.95rem; } .nt-step span { font-size: 0.8rem; color: color-mix(in srgb, var(--ink) 60%, transparent); } @media (max-width: 767px) { .nt-step-strip { grid-template-columns: 1fr 1fr; } .nt-step:nth-child(3) { border-left: none; } .nt-step:nth-child(n+3) { border-top: 1px solid var(--hairline); } } /* ===== Mono ledger labels (eyebrows, stat labels, CTA buttons) ===== */ .nt-mono { font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace; text-transform: uppercase; letter-spacing: 0.14em; font-size: 0.78rem; font-weight: 500; } .nt-eyebrow { font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace; font-weight: 500; } .btn.nt-mono { letter-spacing: 0.1em; padding-block: 0.65rem; } /* ===== Big stat band ===== */ .nt-stat-figure { font-family: "Fraunces", Georgia, serif; font-size: clamp(2.75rem, 6vw, 4.5rem); font-weight: 600; line-height: 1; color: var(--accent); font-variant-numeric: tabular-nums; } .nt-stat-figure.nt-stat-debit { color: var(--debit); } .nt-stat-label { color: color-mix(in srgb, var(--ink) 60%, transparent); margin-top: 0.6rem; } /* ===== Scroll reveal ===== */ [data-controller~="reveal"] { opacity: 0; transform: translateY(18px); transition: opacity 0.7s ease, transform 0.7s ease; } [data-controller~="reveal"].is-in { opacity: 1; transform: none; } @media (prefers-reduced-motion: reduce) { [data-controller~="reveal"] { opacity: 1; transform: none; transition: none; } } /* ===== Full-bleed photo CTA band ===== */ .nt-cta-photo { position: relative; border-radius: 18px; overflow: hidden; color: var(--paper); } .nt-cta-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; } .nt-cta-photo::before { content: ""; position: absolute; inset: 0; background: linear-gradient(100deg, rgba(7, 18, 17, 0.94) 20%, rgba(7, 18, 17, 0.55)); z-index: 1; } .nt-cta-photo > .nt-cta-photo-body { position: relative; z-index: 2; padding: clamp(2.5rem, 6vw, 5rem); max-width: 620px; } .nt-cta-photo h2 { color: #fff; } .nt-cta-photo p { color: color-mix(in srgb, var(--paper) 78%, transparent); } /* ===== Icon tiles (color against the paper) ===== */ .nt-icon-tile { width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; margin-bottom: 0.9rem; background: color-mix(in srgb, var(--accent) 12%, transparent); color: var(--accent); } .nt-icon-tile-credit { background: color-mix(in srgb, var(--credit) 12%, transparent); color: var(--credit); } .nt-icon-tile-debit { background: color-mix(in srgb, var(--debit) 10%, transparent); color: var(--debit); } .nt-icon-tile-amber { background: color-mix(in srgb, var(--amber) 14%, transparent); color: var(--amber-ink); } /* ===== Product window mockup (the hero shows the product, not a photo) ===== */ .nt-window { max-width: 880px; background: var(--surface); border: 1px solid var(--hairline); border-radius: 12px; box-shadow: 0 24px 60px -24px color-mix(in srgb, var(--ink) 35%, transparent); overflow: hidden; text-align: left; } .nt-window-bar { display: flex; align-items: center; gap: 0.4rem; padding: 0.6rem 1rem; border-bottom: 1px solid var(--hairline); background: color-mix(in srgb, var(--paper) 60%, var(--surface)); } .nt-window-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--hairline); } .nt-window-url { margin-left: 0.75rem; font-size: 0.75rem; color: color-mix(in srgb, var(--ink) 55%, transparent); background: var(--surface); border: 1px solid var(--hairline); border-radius: 999px; padding: 0.15rem 0.75rem; font-variant-numeric: tabular-nums; } .nt-window-body { padding: 1.25rem 1.5rem; } .nt-window-table th, .nt-window-table td { padding-block: 0.5rem; } .nt-chip { display: inline-block; font-size: 0.75rem; border: 1px solid var(--hairline); border-radius: 6px; padding: 0.15rem 0.6rem; color: var(--accent); border-color: color-mix(in srgb, var(--accent) 40%, transparent); } /* ===== Pain vignettes ===== */ /* Borderless: the red timestamp is enough signal; whitespace does the rest. */ .nt-vignette { padding-inline: 0.5rem; height: 100%; font-size: 1rem; color: color-mix(in srgb, var(--ink) 80%, transparent); max-width: 360px; margin-inline: auto; } .nt-vignette-time { font-variant-numeric: tabular-nums; font-weight: 650; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; color: var(--debit); margin-bottom: 0.6rem; } /* ===== Old way vs NorthThread ===== */ .nt-compare { border-radius: 10px; padding: 1.75rem; height: 100%; border: 1px solid var(--hairline); } .nt-compare ul { list-style: none; padding-left: 0; margin-bottom: 0; } .nt-compare li { display: flex; gap: 0.65rem; align-items: baseline; margin-bottom: 0.75rem; font-size: 0.95rem; } .nt-compare li:last-child { margin-bottom: 0; } .nt-compare-old { background: transparent; } .nt-compare-old .bi { color: color-mix(in srgb, var(--debit) 70%, transparent); font-size: 0.8rem; } .nt-compare-old li { color: color-mix(in srgb, var(--ink) 75%, transparent); } .nt-compare-new { background: var(--surface); border-color: color-mix(in srgb, var(--accent) 45%, var(--hairline)); box-shadow: 0 8px 24px color-mix(in srgb, var(--accent) 10%, transparent); } .nt-compare-new .bi { color: var(--credit); font-size: 0.9rem; } /* ===== Dark money band (calculator) ===== */ .nt-dark { background: linear-gradient(160deg, #0B3B39, #123); color: var(--paper); } .nt-dark h2 { color: #fff; } .nt-dark-muted { color: color-mix(in srgb, var(--paper) 72%, transparent); } .nt-dark-card { background: color-mix(in srgb, #fff 6%, transparent); border: 1px solid color-mix(in srgb, #fff 18%, transparent); border-radius: 12px; padding: 2.5rem 2rem; } .nt-dark-figure { font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 650; color: #fff; text-align: center; line-height: 1.1; margin-block: 0.5rem; } .nt-dark-rule { border-color: color-mix(in srgb, #fff 20%, transparent); opacity: 1; } .nt-slider-label { display: flex; justify-content: space-between; font-size: 0.85rem; margin-bottom: 0.25rem; color: #fff; } .nt-slider-label .num { color: #fff; font-weight: 650; } .nt-range { margin-bottom: 1.25rem; } .nt-range::-webkit-slider-thumb { background: var(--paper); } .nt-range::-moz-range-thumb { background: var(--paper); } .nt-range::-webkit-slider-runnable-track { background: color-mix(in srgb, #fff 25%, transparent); } .nt-range::-moz-range-track { background: color-mix(in srgb, #fff 25%, transparent); } /* ===== Step cards & feature checks ===== */ /* Borderless steps: number, tile, text, air. */ .nt-step-card { padding: 0.5rem 0.75rem; height: 100%; position: relative; } .nt-step-num { position: absolute; top: 0; right: 0.75rem; font-family: "Fraunces", Georgia, serif; font-size: 2rem; font-weight: 600; color: color-mix(in srgb, var(--ink) 10%, transparent); line-height: 1; } .nt-check-item { display: flex; gap: 0.7rem; align-items: baseline; padding-block: 0.45rem; font-size: 0.95rem; color: color-mix(in srgb, var(--ink) 82%, transparent); } .nt-check-item .bi { color: var(--credit); } /* Honeypot: visually gone, still in the DOM for bots. */ .nt-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* Accordion in brand colors */ .accordion-button:not(.collapsed) { background: color-mix(in srgb, var(--accent) 8%, transparent); color: var(--accent); } .accordion-button:focus { box-shadow: 0 0 0 0.2rem color-mix(in srgb, var(--accent) 25%, transparent); } /* ===== App shell refinements ===== */ .nt-nav .nav-link .bi { margin-right: 0.55rem; opacity: 0.75; } .nt-nav .nav-link.active .bi { opacity: 1; } /* Sidebar section labels as tiny tinted pill eyebrows. */ .nt-nav-section { width: fit-content; margin: 1rem 0.5rem 0.35rem; padding: 0.14rem 0.55rem; border-radius: 999px; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.1em; background: color-mix(in srgb, var(--accent) 9%, transparent); color: color-mix(in srgb, var(--accent) 80%, var(--ink)); } .nt-sidebar-footer { margin-top: auto; padding: 0.75rem; border-top: 1px solid var(--hairline); font-size: 0.75rem; color: color-mix(in srgb, var(--ink) 50%, transparent); } /* ===== Dashboard: KPI cards, status badges, charts, empty states ===== */ /* Text block pinned to the top so titles line up across tiles even when captions wrap differently; only the icon bubble centers vertically. */ .nt-kpi { display: flex; justify-content: space-between; align-items: flex-start; gap: 0.75rem; } .nt-kpi-bubble { flex-shrink: 0; align-self: center; width: 3.3rem; height: 3.3rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.5rem; color: var(--bubble); background: color-mix(in srgb, var(--bubble) 14%, transparent); } /* Tabular numerals stay, but KPI figures sit flush left under their label. */ .nt-kpi .num { text-align: left; } /* Solid inner disc for glyphs with no filled variant (the dollar sign). */ .nt-kpi-coin { width: 1.95rem; height: 1.95rem; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.2rem; background: var(--bubble); color: #fff; } .badge.nt-muted { background: color-mix(in srgb, var(--ink) 7%, transparent); color: color-mix(in srgb, var(--ink) 55%, transparent); } .badge.nt-inprogress { background: color-mix(in srgb, #2F6DB3 14%, transparent); color: #245683; } .badge.nt-sent { background: color-mix(in srgb, var(--accent) 14%, transparent); color: var(--accent); } .nt-legend-dot { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 50%; background: var(--dot); margin-right: 0.4rem; } .nt-empty { color: color-mix(in srgb, var(--ink) 55%, transparent); font-size: 0.85rem; padding: 1.25rem 0.5rem; text-align: center; } .nt-hairline-row + .nt-hairline-row { border-top: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); } .nt-daterange summary { cursor: pointer; color: var(--accent); list-style: none; } /* ===== Trial banners ===== */ .nt-trial-alert { background: color-mix(in srgb, var(--amber) 12%, transparent); border: 1px solid color-mix(in srgb, var(--amber) 40%, transparent); color: var(--ink); } .nt-trial-alert-ended { background: color-mix(in srgb, var(--debit) 8%, transparent); border-color: color-mix(in srgb, var(--debit) 35%, transparent); } /* Bootstrap has no min-w-0 utility (it is a Tailwind name), but the layouts rely on it for flex children that must shrink and truncate. Define it. */ .min-w-0 { min-width: 0; } /* ===== App shell on small screens ===== */ /* Below lg the sidebar becomes a Bootstrap offcanvas opened from the topbar hamburger; paddings tighten so cards get the width. */ .nt-navtoggle { border: 0; padding: 0.15rem 0.4rem; font-size: 1.35rem; line-height: 1; color: var(--ink); } @media (max-width: 991.98px) { .nt-topbar { padding-inline: 0.75rem; } .nt-content { padding: 1rem 0.75rem; } } /* One quiet legal line at the bottom of every signed-in screen. */ .nt-app-footer { margin-top: auto; padding: 1.25rem 1.5rem 1rem; font-size: 0.78rem; text-align: center; color: color-mix(in srgb, var(--ink) 45%, transparent); } .nt-app-footer a { color: inherit; text-decoration-color: color-mix(in srgb, var(--ink) 25%, transparent); } .nt-app-footer a:hover { color: var(--accent); } .nt-datepick span { white-space: nowrap; } /* ===== Binder form: collapsible validation rules ===== */ .nt-rules { border-top: 1px solid var(--hairline); padding-top: 0.85rem; margin-bottom: 1rem; } .nt-rules-summary { cursor: pointer; font-weight: 600; font-size: 0.95rem; } .nt-rules-summary:hover { color: var(--accent); } /* ===== Flash fade-out ===== */ /* Success notices dismiss themselves (controllers/autodismiss_controller.js). */ .nt-flash-fading { opacity: 0; transition: opacity 0.5s ease; } /* ===== Field info tips ===== */ /* Circled "i" beside a form label; hover or focus shows the tooltip. */ .nt-info-tip { background: none; border: 0; padding: 0; margin-left: 0.3rem; font-size: 0.85em; line-height: 1; vertical-align: baseline; color: color-mix(in srgb, var(--ink) 45%, transparent); } .nt-info-tip:hover, .nt-info-tip:focus-visible { color: var(--accent); } /* ===== Modern polish: gradient accents, sparklines, chips, glow, insights ===== */ /* Headline figures in the brand gradient (the homepage's recovered-revenue treatment, applied to money the engine found). */ .nt-gradient-number { background: var(--nt-gradient); -webkit-background-clip: text; background-clip: text; color: transparent; } [data-bs-theme="dark"] .nt-gradient-number { --nt-gradient: linear-gradient(100deg, #5FA8E8 0%, #43BDB6 45%, #57D99C 100%); } /* Plan usage meter (Settings). */ .nt-usage-track { height: 8px; border-radius: 999px; background: color-mix(in srgb, var(--ink) 8%, transparent); overflow: hidden; } .nt-usage-fill { height: 100%; border-radius: 999px; background: var(--nt-gradient); } /* Monospace reference chips: binder references, policy numbers. */ .nt-ref { font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace; font-size: 0.78em; padding: 0.12rem 0.45rem; border-radius: 6px; background: color-mix(in srgb, var(--accent) 8%, transparent); color: color-mix(in srgb, var(--accent) 85%, var(--ink)); text-decoration: none; white-space: nowrap; } a.nt-ref:hover { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); } /* Soft pulsing glow on in-flight statuses: the engine is working. */ @keyframes nt-working { 0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); } 50% { box-shadow: 0 0 10px 1px color-mix(in srgb, var(--accent) 45%, transparent); } } .badge.nt-inprogress { animation: nt-working 2.2s ease-in-out infinite; } /* Page titles, slightly larger and tighter. */ .nt-page-title { font-weight: 650; letter-spacing: -0.015em; } /* Theme toggle in the topbar. */ .nt-themetoggle { border: 0; padding: 0.3rem 0.5rem; font-size: 1.05rem; line-height: 1; color: color-mix(in srgb, var(--ink) 60%, transparent); } .nt-themetoggle:hover { color: var(--accent); } .nt-themetoggle .bi-sun { display: none; } [data-bs-theme="dark"] .nt-themetoggle .bi-sun { display: inline; } [data-bs-theme="dark"] .nt-themetoggle .bi-moon-stars { display: none; } /* ===== Dashboard redesign: hero pipeline, ops console, health rail ===== */ .nt-hero .card-body { padding: 1.1rem 1.6rem 1rem; } .nt-hero-sub { font-size: 0.85rem; color: color-mix(in srgb, var(--ink) 45%, transparent); } /* Right-aligned technical metadata: "6 BINDERS / 3 PROVIDERS". */ .nt-hero-meta { font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace; font-size: 0.72rem; letter-spacing: 0.12em; color: color-mix(in srgb, var(--ink) 55%, transparent); } .nt-hero-meta .num { font-weight: 650; color: var(--ink); } /* The period pipeline: circle badges, labels, and file/binder counts. */ .nt-pipeline { display: flex; align-items: flex-start; max-width: 620px; } .nt-stage { position: relative; z-index: 1; min-width: 74px; } .nt-stage-circle { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 50%; font-weight: 650; font-size: 1rem; border: 2px solid color-mix(in srgb, var(--ink) 22%, transparent); color: color-mix(in srgb, var(--ink) 60%, transparent); background: var(--surface); } .nt-stage-part { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); } .nt-stage-full { border-color: var(--accent); color: #fff; background: var(--accent); } [data-bs-theme="dark"] .nt-stage-full { color: #0E1116; } .nt-stage-label { font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--ink); font-weight: 600; } .nt-stage-sub { font-size: 0.68rem; color: color-mix(in srgb, var(--ink) 52%, transparent); text-align: center; white-space: nowrap; } /* The continuous line behind the pipeline; each segment tucks under the circles beside it and fills teal once the stage to its left completes. */ .nt-stage-link { flex: 1 1 1.5rem; height: 2px; margin: 19px -30px 0; background: color-mix(in srgb, var(--ink) 14%, transparent); } .nt-stage-link-done { background: var(--accent); } /* Section labels in the technical voice. */ .nt-section-label { font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace; font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: color-mix(in srgb, var(--ink) 55%, transparent); } /* Operations console: header row plus hairline-separated grid rows, each with a teal accent bar, monospace reference, and a five-step progress. */ .nt-ops-grid { display: grid; grid-template-columns: 1.4fr 1fr 1.05fr 0.7fr 0.6fr 92px; gap: 0.9rem; align-items: center; } .nt-ops-head { font-size: 0.68rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; color: color-mix(in srgb, var(--ink) 48%, transparent); padding: 0.35rem 0.75rem; } .nt-ops-line { position: relative; padding: 0.65rem 0.75rem; border-radius: 8px; border-top: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); } .nt-ops-footer { border-top: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); padding: 0.7rem 0.75rem 0.1rem; } .nt-ops-line::before { content: ""; position: absolute; left: 0; top: 0.7rem; bottom: 0.7rem; width: 3px; border-radius: 999px; background: color-mix(in srgb, var(--accent) 55%, transparent); } /* The bar carries the NorthThread status convention: teal healthy or done, blue processing, amber attention, red exception. */ .nt-ops-line.nt-bar-muted::before { background: color-mix(in srgb, var(--ink) 18%, transparent); } .nt-ops-line.nt-bar-info::before { background: #2F6DB3; } .nt-ops-line.nt-bar-amber::before { background: var(--amber); } .nt-ops-line.nt-bar-ok::before, .nt-ops-line.nt-bar-sent::before { background: var(--accent); } .nt-ops-line:hover { background: color-mix(in srgb, var(--accent) 3%, transparent); } @media (max-width: 1399.98px) { .nt-col-provider { display: none; } .nt-ops-grid { grid-template-columns: 1.5fr 1fr 0.7fr 0.6fr 92px; } } @media (max-width: 991.98px) { .nt-ops-grid { grid-template-columns: 1.5fr 1fr 92px; } .nt-col-optional { display: none; } } .nt-step-dots { display: flex; gap: 7px; justify-content: flex-end; align-items: center; } .nt-step-dot { width: 9px; height: 9px; border-radius: 50%; background: color-mix(in srgb, var(--ink) 12%, transparent); } .nt-step-done { background: var(--credit); } .nt-step-current { background: var(--surface); box-shadow: 0 0 0 2px color-mix(in srgb, var(--ink) 30%, transparent) inset, 0 0 0 1px var(--surface); outline: 1.5px solid color-mix(in srgb, var(--ink) 35%, transparent); outline-offset: 1px; width: 8px; height: 8px; } /* Search field with an inset icon. */ .nt-search { position: relative; } .nt-search .bi-search { position: absolute; left: 0.6rem; top: 50%; transform: translateY(-50%); font-size: 0.8rem; color: color-mix(in srgb, var(--ink) 40%, transparent); } .nt-search input { padding-left: 1.9rem; width: 190px; } .nt-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: 0.35rem; vertical-align: baseline; background: color-mix(in srgb, var(--ink) 25%, transparent); } .nt-tone-muted { background: color-mix(in srgb, var(--ink) 25%, transparent); } .nt-tone-info { background: #2F6DB3; } .nt-tone-amber { background: var(--amber); } .nt-tone-ok { background: var(--credit); } .nt-tone-sent { background: var(--accent); } /* Rail cards run tighter than content cards. */ .nt-rail-card .card-body { padding: 0.9rem 1.1rem; } /* Data health stat trio, hairline separated. */ .nt-health-stats { display: flex; border-top: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); padding-top: 0.7rem; } .nt-health-stats > div { flex: 1; padding-inline: 0.4rem; } .nt-health-stats > div:first-child { padding-left: 0; } .nt-health-stats > div + div { border-left: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); padding-left: 0.75rem; } .nt-health-num { font-weight: 650; font-size: 0.95rem; text-align: left; } .nt-health-cap { font-size: 0.7rem; color: color-mix(in srgb, var(--ink) 52%, transparent); } /* Small tinted icon squares in rail lists. */ .nt-mini-icon { flex-shrink: 0; width: 26px; height: 26px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font-size: 0.78rem; color: var(--accent); background: color-mix(in srgb, var(--accent) 8%, transparent); } /* Hero story labels over the flow graphic; the hero's left content yields the space so the pipeline never runs underneath. */ .nt-story { position: absolute; right: 1.5rem; top: 1.1rem; width: 430px; } @media (min-width: 1200px) { .nt-hero-left { max-width: calc(100% - 462px); } } .nt-story-label { font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace; font-size: 0.62rem; font-weight: 650; text-transform: uppercase; letter-spacing: 0.1em; color: color-mix(in srgb, var(--ink) 70%, transparent); max-width: 188px; } .nt-story-label span { display: block; font-family: var(--bs-body-font-family); font-size: 0.72rem; font-weight: 400; text-transform: none; letter-spacing: 0; color: color-mix(in srgb, var(--ink) 50%, transparent); margin-top: 0.15rem; } .nt-story-label-right { color: var(--accent); } .nt-structured-pill { font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace; font-size: 0.62rem; font-weight: 650; letter-spacing: 0.14em; padding: 0.2rem 0.6rem; border-radius: 999px; color: var(--credit); background: color-mix(in srgb, var(--credit) 12%, transparent); } .nt-recon-cta { border-left: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); padding-left: 2rem; } @media (max-width: 767.98px) { .nt-recon-cta { border-left: 0; padding-left: calc(var(--bs-gutter-x) * 0.5); } } /* Sidebar tagline above the account footer. */ .nt-sidebar-tagline { padding: 0.75rem; font-size: 0.8rem; line-height: 1.45; color: color-mix(in srgb, var(--ink) 55%, transparent); } /* Footer system status dot. */ .nt-status-ok { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--credit); margin-right: 0.35rem; vertical-align: baseline; } /* Health rail: quiet when clear, loud when not. */ .nt-health-check { width: 34px; height: 34px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 1.1rem; color: var(--credit); background: color-mix(in srgb, var(--credit) 12%, transparent); } .nt-health-alert { font-size: 2rem; font-weight: 650; line-height: 1; color: var(--debit); } .nt-rail-section + .nt-rail-section { border-top: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); margin-top: 1.1rem; padding-top: 1.1rem; } /* The data-flow motif: ragged source rows becoming an aligned ledger. */ .nt-dataflow { position: absolute; right: 1.75rem; bottom: 1rem; opacity: 0.85; pointer-events: none; } .nt-dataflow-inline { display: block; margin: 1.25rem auto 0.75rem; opacity: 0.9; } /* Data fragments stream from raw to structured. Killed by reduced motion. */ .nt-flowline { stroke-dasharray: 3 6; animation: nt-flow 2.8s linear infinite; } @keyframes nt-flow { to { stroke-dashoffset: -18; } } /* Attention strip: what needs doing, with somewhere to go. */ .nt-attention { border-left: 3px solid var(--amber); background: color-mix(in srgb, var(--amber) 4%, var(--surface)); } .nt-attention-icon { color: var(--amber); font-size: 1.15rem; } .nt-attention-title { font-weight: 650; font-size: 0.88rem; color: var(--amber-ink); } [data-bs-theme="dark"] .nt-attention-title { color: var(--amber); } /* Each attention item is its own link: quiet ink, arrow warms on hover. */ .nt-attention-row { color: var(--ink); border-radius: 6px; } .nt-attention-row .bi-arrow-right { color: color-mix(in srgb, var(--ink) 40%, transparent); } .nt-attention-row:hover { color: var(--accent); } .nt-attention-row:hover .bi-arrow-right { color: var(--accent); } /* ===== File page: guided steps and preview table ===== */ /* File identity glyph in the hero. */ .nt-file-glyph { flex-shrink: 0; width: 46px; height: 46px; border-radius: 12px; display: inline-flex; align-items: center; justify-content: center; font-size: 1.35rem; color: var(--accent); background: color-mix(in srgb, var(--accent) 9%, transparent); } /* The file's journey: small circle pipeline, same language as the hero. */ .nt-fsteps { display: flex; align-items: flex-start; max-width: 620px; } .nt-fstep { text-align: center; min-width: 66px; } .nt-fstep-circle { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-size: 0.85rem; border: 2px solid color-mix(in srgb, var(--ink) 18%, transparent); color: color-mix(in srgb, var(--ink) 45%, transparent); background: var(--surface); } .nt-fstep-done { border-color: var(--accent); background: var(--accent); color: #fff; } [data-bs-theme="dark"] .nt-fstep-done { color: #0E1116; } .nt-fstep-active { border-color: color-mix(in srgb, var(--accent) 55%, transparent); color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, var(--surface)); animation: nt-working 1.8s ease-in-out infinite; } .nt-fstep-label { margin-top: 0.35rem; font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace; font-size: 0.6rem; text-transform: uppercase; letter-spacing: 0.1em; color: color-mix(in srgb, var(--ink) 55%, transparent); } .nt-fstep-link { flex: 1 1 1.2rem; height: 2px; margin: 14px -26px 0; background: color-mix(in srgb, var(--ink) 12%, transparent); } .nt-fstep-link-done { background: var(--accent); } /* Divider between the side-by-side manual steps. */ @media (min-width: 768px) { .nt-flow-divide { border-left: 1px solid color-mix(in srgb, var(--ink) 7%, transparent); } } /* The suggested-setup panel: quiet teal confidence, one confirm. */ .nt-suggested { border-left: 3px solid var(--accent); background: color-mix(in srgb, var(--accent) 3%, var(--surface)); } .nt-flow-step { display: flex; gap: 0.9rem; padding-block: 0.85rem; } .nt-flow-step + .nt-flow-step { border-top: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); } .nt-flow-num { flex-shrink: 0; width: 26px; height: 26px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 650; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); margin-top: 0.1rem; } /* Raw file preview: the file's own header row as the table head, numeric cells right aligned, faint zebra striping. */ .nt-preview tbody tr:nth-child(even) > * { background: color-mix(in srgb, var(--ink) 2%, transparent); } .nt-preview td, .nt-preview th { white-space: nowrap; } .nt-preview { font-size: 0.84rem; } /* ===== Upload dropzone ===== */ .nt-dropzone { border: 1.5px dashed color-mix(in srgb, var(--accent) 40%, transparent); border-radius: 14px; padding: 2.6rem 1.5rem; text-align: center; cursor: pointer; background: radial-gradient(color-mix(in srgb, var(--ink) 8%, transparent) 1px, transparent 1px) 0 0 / 14px 14px, color-mix(in srgb, var(--accent) 2%, var(--surface)); transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease; } .nt-dropzone:hover, .nt-dropzone:focus-visible, .nt-dropzone-active { border-color: var(--accent); box-shadow: 0 0 0 4px color-mix(in srgb, var(--accent) 10%, transparent), 0 0 28px color-mix(in srgb, var(--accent) 18%, transparent); } .nt-dropzone-active { background-color: color-mix(in srgb, var(--accent) 6%, var(--surface)); } .nt-dropzone-icon { display: inline-flex; align-items: center; justify-content: center; width: 58px; height: 58px; border-radius: 50%; font-size: 1.7rem; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent); box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 5%, transparent); } .nt-dropzone-active .nt-dropzone-icon { animation: nt-working 1.6s ease-in-out infinite; } .nt-dropzone-meta { font-family: ui-monospace, "SF Mono", "Cascadia Mono", "Roboto Mono", Menlo, monospace; font-size: 0.64rem; letter-spacing: 0.14em; color: color-mix(in srgb, var(--ink) 45%, transparent); } .nt-file-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.5rem 0.25rem; border-bottom: 1px solid color-mix(in srgb, var(--ink) 6%, transparent); font-size: 0.88rem; } .nt-file-item .bi-file-earmark-spreadsheet { color: var(--accent); } .nt-file-name { flex-grow: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .nt-file-size { color: color-mix(in srgb, var(--ink) 50%, transparent); font-size: 0.8rem; } .nt-file-remove { border: 0; background: none; padding: 0.1rem 0.3rem; color: color-mix(in srgb, var(--ink) 45%, transparent); border-radius: 6px; } .nt-file-remove:hover { color: var(--debit); background: color-mix(in srgb, var(--debit) 8%, transparent); } /* ===== Reduced motion ===== */ @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }