/* =========================================================================== LeadFuel Console — LAYOUT ONLY (now on the --lf-* token contract). The console chrome is the shared north-star .lf-nav (see base.html + leadfuel-ui.css). This file carries the console's page layout: container, hero, launcher tiles, cards, forms and tables — all built on --lf-* tokens so light/dark flip automatically via data-theme on . =========================================================================== */ /* The console is a long scrolling document, not the fixed-height chat shell, so relax the body height intake.css sets to 100% and let the page grow. */ html, body.console-body { height: auto; min-height: 100%; } body.console-body { background: var(--lf-bg); color: var(--lf-ink); } /* ── Page layout ───────────────────────────────────────────────────────────*/ .console-container { max-width: 1080px; margin: 0 auto; padding: var(--lf-space-10) var(--lf-space-6) var(--lf-space-16); } .console-flash-wrap { display: flex; flex-direction: column; gap: var(--lf-space-2); margin-bottom: var(--lf-space-5); } .console-footer { display: flex; justify-content: space-between; flex-wrap: wrap; gap: var(--lf-space-3); max-width: 1080px; margin: var(--lf-space-6) auto 0; padding: var(--lf-space-5) var(--lf-space-6) var(--lf-space-10); border-top: 1px solid var(--lf-border); font-size: var(--lf-fs-xs); color: var(--lf-muted-soft); } .console-footer a { color: var(--lf-muted-soft); text-decoration: none; } .console-footer a:hover { color: var(--lf-ink-soft); } .console-footer-links { display: flex; gap: var(--lf-space-4); flex-wrap: wrap; } .console-h1 { margin: 0 0 var(--lf-space-2); font-size: var(--lf-fs-2xl); font-weight: var(--lf-fw-extrabold); letter-spacing: -0.02em; color: var(--lf-ink); } .console-lead { margin: 0; font-size: var(--lf-fs-md); line-height: var(--lf-lh-relaxed); color: var(--lf-muted); } .console-lead strong { color: var(--lf-ink); font-weight: var(--lf-fw-semibold); } .console-muted { color: var(--lf-muted); } .console-inline-link { color: var(--lf-accent); font-weight: var(--lf-fw-semibold); text-decoration: none; } .console-inline-link:hover { text-decoration: underline; } .console-hero { margin-bottom: var(--lf-space-8); } .console-page-head { margin-bottom: var(--lf-space-7, 28px); } .console-badge { background: var(--lf-accent-soft); color: var(--lf-accent); border: 1px solid var(--lf-accent-line); font-size: var(--lf-fs-xs); font-weight: var(--lf-fw-bold); padding: 3px 8px; border-radius: var(--lf-radius-pill); text-transform: uppercase; letter-spacing: .06em; } /* ── Launcher tiles ──────────────────────────────────────────────────────── Legacy .console-tile kept as a thin alias of the shared .lf-tile look so any page still emitting it stays on-token. Prefer .lf-tile in new markup. */ .console-tiles { display: grid; gap: var(--lf-space-4); grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); } .console-tile { display: flex; flex-direction: column; background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: var(--lf-radius); padding: var(--lf-space-6); box-shadow: var(--lf-shadow); transition: border-color var(--lf-transition), transform var(--lf-transition); } .console-tile:hover { border-color: var(--lf-accent); transform: translateY(-2px); } .console-tile-soon { opacity: .65; } .console-tile-soon:hover { transform: none; border-color: var(--lf-border); } .console-tile-title { margin: 0 0 var(--lf-space-2); font-size: var(--lf-fs-lg); font-weight: var(--lf-fw-bold); color: var(--lf-ink); } .console-tile-blurb { margin: 0 0 var(--lf-space-5); flex: 1; font-size: var(--lf-fs-sm); line-height: var(--lf-lh-normal); color: var(--lf-muted); } .console-tile-action { margin-top: auto; } /* ── Cards ─────────────────────────────────────────────────────────────────*/ .console-card { background: var(--lf-surface); border: 1px solid var(--lf-border); border-radius: var(--lf-radius); padding: var(--lf-space-6); margin-bottom: var(--lf-space-5); box-shadow: var(--lf-shadow); } .console-card-title { margin: 0 0 var(--lf-space-4); font-size: var(--lf-fs-lg); font-weight: var(--lf-fw-bold); color: var(--lf-ink); } /* ── Forms ─────────────────────────────────────────────────────────────────*/ .console-form { display: grid; gap: var(--lf-space-4); grid-template-columns: 1fr 1fr; align-items: end; } .console-form label { display: flex; flex-direction: column; gap: var(--lf-space-2); font-size: var(--lf-fs-sm); font-weight: var(--lf-fw-semibold); color: var(--lf-ink); } .console-form label.full { grid-column: 1 / -1; } .console-form input, .console-form select, .console-form textarea { background: var(--lf-surface); border: 1px solid var(--lf-border); color: var(--lf-ink); border-radius: var(--lf-radius-sm); padding: 10px 12px; font-family: inherit; font-size: var(--lf-fs-sm); outline: none; transition: border-color var(--lf-transition), box-shadow var(--lf-transition); } .console-form textarea { resize: vertical; line-height: var(--lf-lh-normal); } .console-form input::placeholder, .console-form textarea::placeholder { color: var(--lf-muted-soft); } .console-form input:focus, .console-form select:focus, .console-form textarea:focus { border-color: var(--lf-accent); box-shadow: var(--lf-shadow-focus); } .console-form .console-form-submit { grid-column: 1 / -1; } /* ── Tables ────────────────────────────────────────────────────────────────*/ .console-table-wrap { overflow-x: auto; } .console-table { width: 100%; border-collapse: collapse; font-size: var(--lf-fs-sm); } .console-table th, .console-table td { text-align: left; padding: var(--lf-space-3) var(--lf-space-3); border-bottom: 1px solid var(--lf-border-soft); vertical-align: top; } .console-table thead th { color: var(--lf-muted); font-weight: var(--lf-fw-semibold); font-size: var(--lf-fs-xs); letter-spacing: .04em; text-transform: uppercase; background: var(--lf-bg-soft); border-bottom: 1px solid var(--lf-border); } .console-table tbody td { color: var(--lf-ink); word-break: break-word; } .console-table tbody tr:last-child td { border-bottom: none; } .console-table a { color: var(--lf-accent); text-decoration: none; font-weight: var(--lf-fw-semibold); } .console-table a:hover { text-decoration: underline; } /* ── Responsive ────────────────────────────────────────────────────────────*/ @media (max-width: 760px) { .console-container { padding: var(--lf-space-6) var(--lf-space-4) var(--lf-space-12); } .console-h1 { font-size: var(--lf-fs-xl); } .console-form { grid-template-columns: 1fr; } .console-tiles { grid-template-columns: 1fr; } }