/* Marketing Page Styles & Utilities */
@import url("./tokens.c1295e5e1e54.css");
/*
Important: Use dark-friendly defaults since :root tokens default to dark.
Explicitly override for light theme. This prevents white text on light bg
when no data-theme is set yet (first load before toggle script runs).
*/
body:not(.app-body) {
background: var(--color-bg-base);
color: var(--color-fg-primary);
font-family: system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,Cantarell,'Open Sans','Helvetica Neue',sans-serif;
-webkit-font-smoothing: antialiased;
}
/* Light theme override */
html[data-theme='light'] body:not(.app-body) {
background: #ffffff;
color: var(--color-fg-primary);
}
/* Force readable text in light theme within white cards/sections */
html[data-theme='light'] .bg-white { color: var(--color-fg-primary,#1e252c); }
html[data-theme='light'] .bg-white .text-muted { color: #66737f !important; }
/* Ensure bg-white always has dark text (even in dark theme) */
.bg-white { background-color: #ffffff !important; color: #1e252c !important; }
.bg-white .text-muted { color: #5a6672 !important; }
.bg-white h1, .bg-white h2, .bg-white h3, .bg-white h4, .bg-white h5, .bg-white h6 { color: #1e252c !important; }
.bg-white .lead { color: #5a6672 !important; }
/* Utility classes */
.u-flex-center { display:flex; justify-content:center; align-items:center; }
.u-flex-wrap { flex-wrap:wrap; }
.u-gap-16 { gap:16px; }
.u-gap-24 { gap:24px; }
.u-gap-32 { gap:32px; }
.u-w-280 { width:280px; }
.u-img-cover-200 { width:100%; height:200px; object-fit:cover; }
.max-w-480 { max-width:480px; }
.is-disabled { opacity:.55; cursor:not-allowed; pointer-events:none; }
/* Feature Card — marketing-only surface; the .card-tile base it used to
extend was dead app-shell CSS and has been removed. */
.feature-card { border-radius: var(--radius-md, var(--radius)); }
.feature-card h3 { font-size:1rem; margin:0.75rem 0 .4rem; font-weight:600; }
.feature-card p { font-size:.75rem; line-height:1.1rem; margin:0; }
/* Hero Section */
.hero-intro { padding:4rem 0 3rem; background: radial-gradient(circle at 30% 20%, var(--color-bg-alt) , var(--color-bg-base) 70%); }
html[data-theme='light'] .hero-intro { background: radial-gradient(circle at 30% 20%, var(--color-bg-base,#ffffff), var(--color-bg-alt,#eef2f5) 70%); }
.hero-intro .lead { max-width:640px; }
.hero-intro h1 { line-height:1.15; }
/* Sections */
.section-py { padding:3.5rem 0; }
/* In dark: keep alt sections on a darker surface for contrast with light text */
.section-alt { background: var(--color-bg-surface); }
/* In light: alt sections are plain white */
html[data-theme='light'] .section-alt { background:#ffffff; }
/* Feature card hover */
.feature-card { transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.feature-card:hover { transform: translateY(-3px); box-shadow: var(--shadow-md); }
/* Contact form inputs — ensure legibility in both themes */
#contactForm .form-control {
background: var(--color-bg-alt);
border-color: var(--color-border);
color: var(--color-fg-primary);
}
#contactForm .form-control:focus {
border-color: var(--color-accent);
box-shadow: var(--shadow-focus);
}
html[data-theme='light'] #contactForm .form-control {
background: #ffffff;
}
#contactForm .form-label {
color: var(--color-fg-primary);
}
/* Modal surface variant */
.modal-dark-surface { background: var(--color-bg-alt); color: var(--color-fg-primary); border:1px solid var(--color-border); }
/* Footer */
/* Dark default pairs dark surface with light text for readability */
.site-footer { background: var(--color-bg-surface); color: var(--color-fg-primary); }
/* Light: white footer and dark text from light token map */
html[data-theme='light'] .site-footer { background:#ffffff; }
.site-footer .muted { color: var(--color-fg-secondary); }
/* Navbar brand logo theme swap. Template renders both ![]()
s so the correct
one paints without a flash on theme switch; data-theme on picks. */
.logo-light,
.logo-dark { display: none; }
html[data-theme='dark'] .logo-dark { display: inline-block; }
html[data-theme='light'] .logo-light { display: inline-block; }
/* Light Theme: Navbar contrast fixes on marketing pages */
html[data-theme='light'] .navbar.navbar-dark.bg-dark {
background: #ffffff !important;
border-bottom: 1px solid var(--color-border, #d2d9e1);
}
html[data-theme='light'] .navbar.navbar-dark .navbar-brand,
html[data-theme='light'] .navbar.navbar-dark .nav-link {
color: #2e3135 !important;
}
html[data-theme='light'] .navbar.navbar-dark .nav-link:hover,
html[data-theme='light'] .navbar.navbar-dark .nav-link:focus {
color: #111 !important;
}
/* Ensure navbar toggler has visible icon on light background */
html[data-theme='light'] .navbar.navbar-dark .navbar-toggler {
border-color: var(--color-border, #cfd7df);
}
html[data-theme='light'] .navbar.navbar-dark .navbar-toggler-icon {
filter: invert(0.9) grayscale(1);
}
/* Light Theme: Outline button legibility on bright surfaces */
html[data-theme='light'] .btn-outline-light {
color: #2e3135;
border-color: #cfd7df;
}
html[data-theme='light'] .btn-outline-light:hover,
html[data-theme='light'] .btn-outline-light:focus {
background: rgba(0,0,0,.05);
border-color: #b9c3ce;
color: #111;
}
/* Make secondary outline buttons consistent on white */
html[data-theme='light'] .btn-outline-secondary {
color: #2e3135;
border-color: #cfd7df;
}
html[data-theme='light'] .btn-outline-secondary:hover,
html[data-theme='light'] .btn-outline-secondary:focus {
background: rgba(0,0,0,.05);
border-color: #b9c3ce;
color: #111;
}
/* ───────────────────────────────────────────────────────────────────────────
BOOTSTRAP GRID RESTORATION
airep.css ships design-kit primitives staged for "when Phase 5 removes the
Bootstrap CDN":
.row { display: flex; gap: var(--space-3); align-items: center; }
Bootstrap is still loaded, and airep.css loads after it, so that rule wins
on every Bootstrap grid row in the site. It breaks them two ways:
* gap — Bootstrap columns are percentage widths (col-lg-4 = 33.3333%) and
carry their gutters as internal padding, so three of them exactly fill
the row. A real 12px gap makes 3 × 33.3333% + 24px overflow, and the
third column wraps. Every 3-up grid silently rendered 2-up, and every
2-up grid rendered 1-up, with the last column's width left as dead space.
* align-items: center — Bootstrap relies on the default stretch so h-100
cards in a row share a top edge and match heights. Centring left cards
of unequal height visibly stepped against each other.
:has() confines this to rows that are genuinely Bootstrap grids. /contact/
uses the kit's flex .row for its chip strip, and that must keep its gap.
Scoped to body.marketing on purpose: the same collision exists across the
app shell, but re-flowing every grid in the ERP is not a marketing change.
─────────────────────────────────────────────────────────────────────────── */
body.marketing .row:has(> [class^="col-"]),
body.marketing .row:has(> [class*=" col-"]),
body.marketing .row:has(> .col) {
gap: 0;
align-items: stretch;
}
/* ───────────────────────────────────────────────────────────────────────────
UI vs NO-UI EXECUTION MODES — shared by /features/ and /how-it-works/
Nova ships two execution modes (configuration/forms.py ::
NOVA_EXECUTION_MODE_CHOICES) and the product already colours them: accent
blue for "drive the UI", amber for "no UI". Reusing those two colours here
means the marketing pages and the live UI / NO-UI toggle on the home-page
demo read as one feature rather than three unrelated widgets.
Dark-friendly defaults with a light override, per the note at the top of
this file — a bare :root value would be wrong before the theme script runs.
─────────────────────────────────────────────────────────────────────────── */
:root { --mkt-noui: #e0a04a; --mkt-noui-soft: rgba(224, 160, 74, 0.14); }
html[data-theme='light'] { --mkt-noui: #a75c10; --mkt-noui-soft: rgba(167, 92, 16, 0.10); }
.mode-card {
background: var(--color-bg-surface);
border: 1px solid var(--color-border);
border-top: 3px solid var(--color-accent);
}
.mode-card--noui { border-top-color: var(--mkt-noui); }
.mode-card .mode-icon { color: var(--color-accent); }
.mode-card--noui .mode-icon { color: var(--mkt-noui); }
/* Pill marking which mode is the default and which is the power option. */
.mode-badge {
display: inline-block;
padding: 0.15rem 0.6rem;
border-radius: 100px;
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
background: color-mix(in srgb, var(--color-accent) 14%, transparent);
color: var(--color-accent);
}
.mode-card--noui .mode-badge { background: var(--mkt-noui-soft); color: var(--mkt-noui); }
/* Transcript block — a real NO-UI exchange. Monospace because that is what
the mode feels like to use; the point of the section is "you type, it
drafts, you confirm", and prose cannot show that as fast as the lines can. */
.noui-transcript {
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: .5rem;
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.82rem;
line-height: 1.65;
/* Long command lines must scroll inside the block, never widen the page. */
overflow-x: auto;
}
.noui-transcript .nt-line { display: flex; gap: 0.85rem; white-space: pre; }
.noui-transcript .nt-who {
flex: 0 0 3.2rem;
font-weight: 700;
text-transform: uppercase;
font-size: 0.68rem;
letter-spacing: 0.06em;
padding-top: 0.22rem;
}
.noui-transcript .nt-you { color: var(--color-fg-secondary); }
.noui-transcript .nt-nova { color: var(--mkt-noui); }
.noui-transcript .nt-text { min-width: 0; }
.noui-transcript .nt-ok { color: #22c55e; }
.noui-transcript .nt-dim { color: var(--color-fg-secondary); }
.noui-transcript .nt-key {
border: 1px solid var(--color-border);
border-radius: 4px;
padding: 0 .35rem;
font-size: 0.76rem;
}
@media (max-width: 575px) {
.noui-transcript { font-size: 0.72rem; }
.noui-transcript .nt-who { flex-basis: 2.6rem; font-size: 0.6rem; }
/* A 75-character command cannot fit a phone at any readable size, so the
block scrolls sideways. Fade its right edge so that reads as "there is
more this way" rather than as a clipped line. */
.noui-transcript {
-webkit-mask-image: linear-gradient(to right, #000 88%, transparent);
mask-image: linear-gradient(to right, #000 88%, transparent);
}
}
/* Inline command examples inside the mode notes. Bootstrap's default
is pink and breaks mid-token, which turned "/skill payment_apply ..." into
three ragged magenta lines against an amber/blue section. Give it its own
line, the transcript's typeface, and a horizontal scroll so a long command
never re-wraps or widens the card. */
.mode-note code {
display: block;
margin: .5rem 0;
padding: .45rem .6rem;
background: var(--color-bg-alt);
border: 1px solid var(--color-border);
border-radius: .35rem;
color: var(--color-fg-primary);
font-family: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
font-size: 0.74rem;
white-space: pre;
overflow-x: auto;
}