/* Tokens. The default palette follows theme.mode; an explicit data-theme on (set by the toggle / saved preference) overrides it. */ :root { --max: 80rem; --radius: 0.5rem; --nav-h: 3.4rem; /* approx main-nav height; the subnav sticks below it */ color-scheme: dark light; --bg: #0e1116; --surface: #151a21; --fg: #e6e8eb; --muted: #8a93a0; --rule: #1f262f; --accent: #c8a96a; --prose: #cdd2d8; } :root[data-theme="dark"] { color-scheme: dark; --bg: #0e1116; --surface: #151a21; --fg: #e6e8eb; --muted: #8a93a0; --rule: #1f262f; --accent: #c8a96a; --prose: #cdd2d8; } :root[data-theme="light"] { color-scheme: light; --bg: #f7f8fa; --surface: #ffffff; --fg: #171b21; --muted: #5b6671; --rule: #e3e7ec; --accent: #8a6d2f; --prose: #2c333c; } /* Web Awesome theming: map the CETA brand tokens onto Web Awesome's design tokens so wa-* components inherit the house style and follow the light/dark toggle (they reference our --accent/--surface/etc., which switch per theme). */ :root { --wa-color-brand-fill-loud: var(--accent); --wa-color-brand-fill-normal: var(--accent); --wa-color-brand-fill-quiet: color-mix(in srgb, var(--accent) 16%, transparent); --wa-color-brand-border-loud: var(--accent); --wa-color-brand-border-normal: var(--accent); --wa-color-brand-on-loud: var(--bg); --wa-color-brand-on-normal: var(--bg); --wa-color-brand-on-quiet: var(--accent); --wa-color-surface-default: var(--surface); --wa-color-surface-raised: var(--surface); --wa-color-surface-lowered: var(--bg); --wa-color-surface-border: var(--rule); --wa-color-text-normal: var(--fg); --wa-color-text-quiet: var(--muted); --wa-color-text-link: var(--accent); --wa-font-family-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --wa-font-family-heading: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; --wa-border-radius-m: var(--radius); } /* Brand (e.g. "Get in touch") buttons: force the label to the page-background colour so it always contrasts the gold fill — dark text on the light-gold of dark mode, light text on the deep-gold of light mode. WA's default on-colour was washing the label out. */ wa-button[variant="brand"]::part(base) { color: var(--bg); font-weight: 600; } * { box-sizing: border-box; } html { scroll-behavior: smooth; scroll-padding-top: calc(var(--nav-h) + 2.75rem); } html, body { margin: 0; padding: 0; } body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; background: var(--bg); color: var(--fg); line-height: 1.6; -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: 'Space Grotesk', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif; } a { color: var(--fg); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 1px; } a:hover { color: var(--accent); } .container { max-width: var(--max); margin: 0 auto; padding: 0 1.5rem; } /* Form controls — themed for both palettes (color-scheme handles native UI). */ input, select, textarea { background: var(--surface); color: var(--fg); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.55rem 0.65rem; font: inherit; } input::placeholder, textarea::placeholder { color: var(--muted); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--accent); } label { color: var(--muted); } /* Light/dark toggle button (icon via ::before so no JS needed for the glyph). */ .theme-toggle { /* Web Awesome's native styles force buttons to the tall form-control HEIGHT (height: var(--wa-form-control-height)); reset it so the toggle — and the nav row it sits in — stays compact. */ height: auto; block-size: auto; min-height: 0; min-block-size: 0; background: transparent; border: 1px solid var(--rule); color: var(--muted); border-radius: var(--radius); padding: 0.3rem 0.55rem; cursor: pointer; font: inherit; line-height: 1; } .theme-toggle:hover { color: var(--accent); border-color: var(--accent); } .theme-toggle::before { content: "\2600"; } /* ☀ in dark — switch to light */ :root[data-theme="light"] .theme-toggle::before { content: "\263E"; } /* ☾ in light */ /* Logged-in user menu (shown from the edge ForwardAuth identity). */ .user-menu::part(trigger) { border-bottom: none; color: var(--muted); } .user-menu::part(trigger):hover { color: var(--accent); } /* Nav */ .nav { position: sticky; top: 0; z-index: 10; background: color-mix(in srgb, var(--bg) 88%, transparent); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--rule); } .nav-inner { display: flex; align-items: center; gap: 1.25rem; /* Pin to an exact height so --nav-h is the real height (the subnav sticks at that offset). Otherwise font-metric changes — e.g. Web Awesome's base styles — make the nav taller than --nav-h and the subnav hides under it. (The stacked layout below relaxes this to two rows.) */ height: var(--nav-h); padding: 0 1.5rem; max-width: var(--max); margin: 0 auto; } /* Brand on the left; everything after it (links + toggle) clusters on the right. */ .brand { margin-right: auto; } .brand { font-size: 1.1rem; text-transform: uppercase; border-bottom: none; display: inline-flex; align-items: center; gap: 0.65em; color: var(--fg); } .brand-mark { color: var(--accent); letter-spacing: 0.3em; font-weight: 800; } .brand-sep { color: var(--muted); font-weight: 300; opacity: 0.7; } .brand-sub { color: var(--fg); letter-spacing: 0.2em; font-weight: 400; } .brand:hover .brand-mark { color: var(--accent); } .brand:hover .brand-sub { color: var(--fg); } .nav-links { display: flex; align-items: center; gap: 1.75rem; } .nav-links a { border-bottom: none; color: var(--muted); font-size: 0.95rem; text-transform: uppercase; letter-spacing: 0.06em; } .nav-links a:hover { color: var(--fg); } .nav-links a.active { color: var(--accent); } /* current page */ /* Stacked nav (opt-in via theme token nav_layout: stacked): the brand + toggle stay on the top row; the links drop to a full-width second row. For data apps with many sections that won't fit one line. */ /* Compact top row (brand + toggle); links sit directly below with a divider. */ /* column-gap keeps brand<->toggle spacing; row-gap:0 stops the base `gap` from adding a big space between the brand row and the wrapped links row. */ .nav--stacked .nav-inner { flex-wrap: wrap; height: auto; min-height: 0; align-items: center; column-gap: 1.25rem; row-gap: 0; padding-top: 0.5rem; padding-bottom: 0; } .nav--stacked .nav-links { order: 1; flex-basis: 100%; flex-wrap: wrap; row-gap: 0.4rem; margin-top: 0.25rem; padding: 0.45rem 0 0.55rem; border-top: 1px solid var(--rule); } /* Full-width nav (theme token nav_width: full): span the viewport rather than the content max-width. */ .nav--full .nav-inner, .nav--full .subnav-inner { max-width: none; } /* Right-aligned nav links: a zero-width flex spacer pushes everything after it to the far end (e.g. Staff / Planner). Works in the stacked/full-width row, which already spans the bar; single-row navs keep their right-hand cluster. */ .nav-links .nav-gap { margin-left: auto; } .side-menu { border-bottom: 1px solid var(--rule); } .side-menu nav { max-width: var(--max); margin: 0 auto; padding: 0.75rem 1.5rem; display: flex; gap: 1rem; } /* In-page sticky section tabs — auto-built from anchored sections (page view). */ .subnav { position: sticky; top: calc(var(--nav-h) + 1px); /* +1px clears the nav's bottom border */ z-index: 9; background: color-mix(in srgb, var(--bg) 92%, transparent); backdrop-filter: saturate(160%) blur(10px); border-bottom: 1px solid var(--rule); } .subnav-inner { max-width: var(--max); margin: 0 auto; padding: 0.5rem 1.5rem; display: flex; gap: 1.25rem; overflow-x: auto; white-space: nowrap; } .subnav a { border-bottom: 2px solid transparent; padding-bottom: 0.15rem; color: var(--muted); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; } .subnav a:hover { color: var(--accent); } .subnav a.active { color: var(--accent); border-bottom-color: var(--accent); } /* current section */ /* Sections — separated by whitespace, no dividers. Unanchored blocks are sub-elements that hug the key section above them; a key section (one with an id, i.e. a sub-tab target) or a CTA opens a new block with more top space. */ section { padding: 0.5rem 0; } section[id], section.cta { padding-top: 3.75rem; } section h2 { font-size: 1.6rem; line-height: 1.2; letter-spacing: 0.05em; text-transform: uppercase; color: var(--accent); margin: 0 0 1rem; font-weight: 600; } /* Subheading: a lesser title nested under the key section above it. Smaller, sentence case, and in body text colour so it doesn't read as a peer of the gold uppercase section titles. */ section h2.subhead { font-size: 1.4rem; line-height: 1.25; letter-spacing: normal; text-transform: none; color: var(--text); margin: 0 0 1.25rem; font-weight: 600; } /* Hero */ .hero { padding: 7rem 0 6rem; } .hero h1 { font-size: clamp(2rem, 5.5vw, 3.5rem); line-height: 1.15; letter-spacing: -0.015em; font-weight: 600; margin: 0 0 1.5rem; max-width: 28ch; } .hero p { font-size: 1.15rem; color: var(--muted); max-width: 50ch; margin: 0 0 2rem; } /* Two-column hero: content left, theme-aware visual right. Fills the old dead right gutter; stacks (visual first) on small screens. */ .hero-inner { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(2rem, 5vw, 4rem); align-items: center; } .hero-eyebrow { color: var(--accent); text-transform: uppercase; letter-spacing: .08em; font-size: .8rem; font-weight: 600; margin: 0 0 1rem; } .hero-lead { font-size: 1.15rem; color: var(--prose); max-width: 46ch; margin: 0 0 1.75rem; } /* readable, not the faint caption grey (AA) */ .hero-actions { display: flex; gap: 1rem; flex-wrap: wrap; margin: 1.75rem 0; } .hero-trust { color: var(--muted); font-size: .95rem; max-width: 46ch; margin: 0; } .hero-visual { display: flex; justify-content: center; } .hero-visual img { max-width: min(320px, 80%); height: auto; } /* Native (non-WA) hero action fallbacks; WA apps emit wa-button instead. */ .button--brand { display: inline-block; border: 1px solid var(--accent); border-radius: var(--radius); padding: 0.7rem 1.4rem; background: var(--accent); color: var(--bg); } .button--plain { display: inline-block; border: 1px solid transparent; border-radius: var(--radius); padding: 0.7rem 1.4rem; color: var(--accent); } @media (max-width: 800px) { .hero-inner { grid-template-columns: 1fr; } .hero-visual { order: -1; } } /* Brand logo block — centred; show the version that suits the active palette. Default (no data-theme, i.e. theme.mode) shows the dark-palette logo; the data-theme overrides swap them when the user toggles. */ .logo-block { padding: 2.5rem 0 0.5rem; } .logo-block .container { display: flex; justify-content: flex-start; } .brand-logo { width: 60%; max-width: 540px; height: auto; } .brand-logo--light { display: none; } .brand-logo--dark { display: block; } :root[data-theme="light"] .brand-logo--light { display: block; } :root[data-theme="light"] .brand-logo--dark { display: none; } :root[data-theme="dark"] .brand-logo--light { display: none; } :root[data-theme="dark"] .brand-logo--dark { display: block; } /* Prose */ .prose { max-width: var(--max); } .prose h3 { margin: 2rem 0 0.5rem; font-size: 1.1rem; font-weight: 600; } .prose p { margin: 0 0 1.25rem; color: var(--prose); } .prose ul { color: var(--prose); padding-left: 1.25rem; margin: 0 0 1.25rem; } .prose li { margin: 0.25rem 0; } /* Feature grid — two cards per row on desktop (so titles don't wrap and the cards sit wider); collapses to one column on narrow screens below. */ .feature-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 1.75rem; } .feature h3 { margin: 0 0 0.45rem; font-size: 1.2rem; font-weight: 600; line-height: 1.3; } .feature p { margin: 0; color: var(--prose); } /* The reader's pain, as a muted italic quote above the title, with a hairline rule separating it from the response so each card reads clearly as problem → answer. Class-on-class so it beats the generic `.feature p` above. */ .feature .feature-problem { margin: 0 0 0.9rem; padding-bottom: 0.9rem; border-bottom: 1px solid var(--rule); color: var(--muted); font-style: italic; font-size: 0.92rem; line-height: 1.5; } /* Sectors accordion (wa-details / native
): collapsible per trade, each with a labelled problem / response pair. */ .accordion { display: flex; flex-direction: column; gap: 1rem; } .accordion details.sector { border: 1px solid var(--rule); border-radius: var(--radius); padding: 1rem 1.25rem; background: color-mix(in srgb, var(--surface) 55%, transparent); } .accordion details.sector summary { cursor: pointer; font-weight: 600; } .accordion wa-details::part(base) { border-color: var(--rule); } .sector-label { color: var(--accent); font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; margin: 1rem 0 0.25rem; } .sector-label:first-child, .sector-label:first-of-type { margin-top: 0; } /* AI section: a quieter q/a grid (deliberately not cards) + a callout note. */ .section-lead { color: var(--prose); } /* AI section paragraphs share the prose reading width (theme.t.prose_max) so they line up with every other section; the examples grid + callout below stay full width. */ .ai-section .container > p { max-width: var(--max); } .ai-prompt-label { color: var(--accent); text-transform: uppercase; letter-spacing: 0.06em; font-size: 0.8rem; font-weight: 600; margin: 1.5rem 0 0.5rem; } .ai-examples { display: grid; grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr)); gap: 1.25rem; margin: 0.75rem 0 2rem; } .ai-example-q { font-weight: 600; color: var(--fg); margin: 0 0 0.35rem; } .ai-example-a { color: var(--muted); margin: 0; } .ai-section .callout { border: 1px solid var(--accent); border-radius: var(--radius); padding: 1rem 1.25rem; color: var(--prose); background: color-mix(in srgb, var(--accent) 8%, transparent); } /* Icons (Font Awesome). Optional per section/feature; rendered inline at the start of the title, inheriting the heading's colour. Decorative (aria-hidden). */ .section-icon, .feature-icon { color: inherit; font-size: 0.9em; margin-right: 0.5em; } /* Read-only view filter bar + pager. */ .filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 0.75rem; margin: 0 0 1.25rem; } .filters wa-input, .filters wa-select { min-width: 12rem; } .pager { display: flex; align-items: center; gap: 1rem; margin: 1.25rem 0 0; } /* Read-only view pages: clear the nav with comfortable top space. */ section.view-list, section.view-detail { padding-top: 2rem; } /* Dashboard */ .dashboard .welcome { margin: 0 0 1.75rem; } .tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(7.5rem, 1fr)); gap: 0.75rem; margin: 0 0 1.75rem; } .tile { text-align: center; } .tile-n { display: block; font-size: 1.9rem; font-weight: 700; color: var(--accent); line-height: 1.1; } .tile-l { display: block; font-size: 0.78rem; color: var(--muted); text-transform: uppercase; letter-spacing: 0.04em; } .metrics { display: grid; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)); gap: 1rem; margin: 0 0 2rem; } .metric-n { display: block; font-size: 1.6rem; font-weight: 700; } .metric-l { display: block; color: var(--muted); font-size: 0.85rem; } .metric-sub { margin-left: 0.4em; } .tasklist { list-style: none; padding: 0; margin: 0 0 2rem; } .task { display: flex; align-items: flex-start; gap: 0.5rem; padding: 0.5rem 0; border-bottom: 1px solid var(--rule); } .task.done .task-title { text-decoration: line-through; color: var(--muted); } .task-main { flex: 1; } .task-meta { font-size: 0.8rem; } .task-meta .overdue, p.overdue { color: #e06c75; } .task-toggle { margin: 0; } .task-pri { margin-left: auto; } .view-all { font-size: 0.8rem; font-weight: 400; margin-left: 0.75rem; } .dash-footer { margin-top: 2.5rem; font-size: 0.8rem; } /* Force the native checkbox to render (Web Awesome's native styles can blank it) — left of the task, clearly visible, accent-coloured. */ .task { align-items: center; } .task-toggle { margin: 0; display: flex; } .task-toggle input[type="checkbox"] { appearance: auto; -webkit-appearance: auto; width: 1.15rem; height: 1.15rem; accent-color: var(--accent); cursor: pointer; } /* Badge/enum columns squared to the right edge of any table. */ th.col-badge, td.col-badge { text-align: right; } /* Table / Board view switcher. */ .view-toggle { display: flex; gap: 0.4rem; margin: 0 0 1.25rem; } .view-toggle a { font-size: 0.85rem; border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.3rem 0.85rem; color: var(--muted); } .view-toggle a:hover { color: var(--fg); } .view-toggle a.active { color: var(--accent); border-color: var(--accent); } /* Kanban board. */ .kanban { display: flex; gap: 1rem; overflow-x: auto; padding-bottom: 1rem; align-items: flex-start; } .kanban-col { flex: 0 0 16rem; background: color-mix(in srgb, var(--surface) 55%, transparent); border: 1px solid var(--rule); border-radius: var(--radius); padding: 0.65rem; } .kanban-head { display: flex; justify-content: space-between; align-items: center; font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); margin: 0 0 0.65rem; } .kanban-cards { display: flex; flex-direction: column; gap: 0.6rem; min-height: 2.5rem; } .kanban-card { cursor: grab; } .kanban-card:active { cursor: grabbing; } .kanban-card.dragging { opacity: 0.45; } .kanban-col.over { outline: 2px dashed var(--accent); outline-offset: 3px; } .kc-title { font-weight: 600; margin-bottom: 0.2rem; } .kc-line { font-size: 0.82rem; color: var(--muted); } /* Calendar (planner): a month grid of day cells, records as event chips. */ section.view-calendar { padding-top: 2rem; } .cal-bar { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 0.75rem; margin: 0 0 1rem; } .cal-month { font-size: 1.1rem; font-weight: 600; color: var(--fg); } .cal-nav { display: flex; gap: 0.4rem; } .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 1px; background: var(--rule); border: 1px solid var(--rule); border-radius: var(--radius); overflow: hidden; } .cal-dow { background: color-mix(in srgb, var(--surface) 60%, transparent); padding: 0.5rem; text-align: center; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); } .cal-cell { background: var(--surface); min-height: 7rem; padding: 0.4rem; display: flex; flex-direction: column; gap: 0.25rem; } .cal-cell.cal-out { background: color-mix(in srgb, var(--surface) 45%, var(--bg)); } .cal-cell.cal-out .cal-daynum { opacity: 0.4; } .cal-cell.cal-today { box-shadow: inset 0 0 0 2px var(--accent); } .cal-daynum { font-size: 0.78rem; color: var(--muted); text-align: right; } .cal-today .cal-daynum { color: var(--accent); font-weight: 700; } .cal-event { display: block; font-size: 0.76rem; padding: 0.2rem 0.4rem; border-radius: calc(var(--radius) * 0.6); background: color-mix(in srgb, var(--accent) 18%, transparent); border-left: 3px solid var(--accent); color: var(--fg); overflow: hidden; } .cal-event .cal-ev-title { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .cal-event .cal-ev-line { display: block; font-size: 0.92em; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } a.cal-event:hover { background: color-mix(in srgb, var(--accent) 30%, transparent); } .cal-ev-success { background: color-mix(in srgb, var(--wa-color-success-fill-loud, #4a8) 18%, transparent); border-left-color: var(--wa-color-success-fill-loud, #4a8); } .cal-ev-warning { background: color-mix(in srgb, var(--wa-color-warning-fill-loud, #c93) 18%, transparent); border-left-color: var(--wa-color-warning-fill-loud, #c93); } .cal-ev-danger { background: color-mix(in srgb, var(--wa-color-danger-fill-loud, #c44) 18%, transparent); border-left-color: var(--wa-color-danger-fill-loud, #c44); } .cal-ev-neutral { background: color-mix(in srgb, var(--muted) 18%, transparent); border-left-color: var(--muted); } @media (max-width: 720px) { .cal-cell { min-height: 4.5rem; } .cal-event { font-size: 0.68rem; } } /* Planner Month/Week toggle + by-job/by-person row toggle. */ .cal-viewtoggle, .cal-rowtoggle { display: inline-flex; gap: 0.4rem; align-items: center; margin: 0 0 0.9rem; } .cal-rowtoggle .muted { margin-right: 0.15rem; font-size: 0.85rem; } .cal-vt { display: inline-block; padding: 0.25rem 0.75rem; border: 1px solid var(--rule); border-radius: var(--radius); color: var(--muted); font-size: 0.85rem; } .cal-vt:hover { color: var(--fg); } .cal-vt.active { background: var(--accent); color: var(--bg); border-color: var(--accent); } /* Week (gantt) view: rows (job/person) x Mon..Sun. Each booking is a chip; the per-day cells (with gaps) give the gantt look with padding between bookings. */ .week-scroll { overflow-x: auto; border: 1px solid var(--rule); border-radius: var(--radius); } .week-grid { display: grid; grid-template-columns: minmax(7rem, 12rem) repeat(7, minmax(7rem, 1fr)); gap: 1px; background: var(--rule); min-width: 52rem; } .wk-corner, .wk-dayhead { background: color-mix(in srgb, var(--surface) 60%, transparent); padding: 0.5rem; font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); position: sticky; top: 0; } .wk-dayhead { text-align: center; } .wk-dayhead .wk-dow { font-weight: 600; } .wk-dayhead .wk-dom { margin-left: 0.3rem; opacity: 0.8; } .wk-dayhead.wk-today { color: var(--accent); } .wk-rowlabel { background: var(--surface); padding: 0.5rem; font-size: 0.88rem; font-weight: 600; display: flex; align-items: center; } .wk-rowlabel a { border: none; } .wk-cell { background: var(--surface); min-height: 2.6rem; padding: 0.3rem; display: flex; flex-direction: column; gap: 0.3rem; } .wk-cell.wk-today { background: color-mix(in srgb, var(--accent) 8%, var(--surface)); } .wk-empty { grid-column: 1 / -1; background: var(--surface); padding: 1.5rem; text-align: center; } /* Detail page: record fields as a responsive definition grid, optionally split into labelled groups for easier scanning. */ .detail-fields { display: grid; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); gap: 0.9rem 2.5rem; margin: 0 0 1.5rem; } .detail-fields .field dt { color: var(--muted); font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; margin: 0; } .detail-fields .field dd { margin: 0.15rem 0 0; color: var(--prose); } /* Group heading: a quiet section divider above each cluster of fields. */ .view-detail .field-group { margin: 1.75rem 0 0.85rem; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.07em; color: var(--accent); border-bottom: 1px solid var(--rule); padding-bottom: 0.45rem; } .view-detail .field-group:first-of-type { margin-top: 0.5rem; } .view-detail h3 { margin: 2rem 0 0.6rem; font-size: 1.05rem; } /* Count badges that follow a caption (tab labels, list/detail headings). */ wa-tab wa-badge, section h2 wa-badge { margin-inline-start: 0.5em; } /* Call to action */ .cta .container { text-align: center; } .cta p { color: var(--prose); } /* Closing CTA band: full-width surface panel before the footer. */ .cta--band { background: var(--surface); padding-block: clamp(3rem, 7vw, 5rem); margin-top: 2rem; } .cta--band .container { max-width: 46rem; } .cta--band p { color: var(--muted); margin: 0.75rem 0 1.75rem; } a.button { display: inline-block; margin-top: 0.5rem; border: 1px solid var(--accent); border-radius: var(--radius); padding: 0.7rem 1.4rem; color: var(--accent); } a.button:hover { background: var(--accent); color: var(--bg); } button.button { display: inline-block; margin-top: 0.5rem; border: 1px solid var(--accent); border-radius: var(--radius); padding: 0.7rem 1.4rem; color: var(--accent); background: transparent; cursor: pointer; font: inherit; } button.button:hover { background: var(--accent); color: var(--bg); } /* Contact form — left-aligned, single column, capped width. The honeypot is visually hidden (bots fill it; people never see it). */ .contact-form { display: flex; flex-direction: column; gap: 1rem; max-width: 34rem; margin: 1.5rem 0 0; } .contact-form label { display: flex; flex-direction: column; gap: 0.35rem; color: var(--muted); font-size: 0.9rem; } .contact-form input, .contact-form textarea, .contact-form wa-input, .contact-form wa-textarea { width: 100%; } .contact-form .hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; } .form-success { color: var(--accent); font-weight: 600; margin: 1.5rem 0 0; } /* Toggled by the shared-session nav script (hide login link / reveal user menu). */ .is-hidden { display: none !important; } /* Stats */ .stats { display: flex; flex-wrap: wrap; gap: 2.5rem; } .stat-value { font-size: 2.2rem; font-weight: 700; color: var(--accent); line-height: 1.1; } .stat-label { color: var(--muted); font-size: 0.9rem; } /* Tables */ .table-wrap { overflow-x: auto; margin: 0 0 1.5rem; } table { width: 100%; border-collapse: collapse; font-size: 0.92rem; color: var(--prose); } th, td { text-align: left; padding: 0.65rem 0.75rem; border-bottom: 1px solid var(--rule); vertical-align: top; } th { color: var(--fg); font-weight: 600; background: var(--surface); white-space: nowrap; } /* Sortable column headers: look like headings, not body links; hover hints. */ th a.sort-link { color: inherit; border-bottom: none; cursor: pointer; display: inline-flex; align-items: center; gap: 0.15em; } th a.sort-link:hover { color: var(--accent); } tbody tr:last-child td { border-bottom: none; } /* Footer */ footer { border-top: 1px solid var(--rule); padding: 2.5rem 0 3rem; color: var(--muted); font-size: 0.85rem; } footer .container { display: flex; flex-wrap: wrap; gap: 1rem; justify-content: space-between; align-items: baseline; } footer a { border-bottom: none; color: var(--muted); } footer a:hover { color: var(--accent); } .foot-links { display: flex; gap: 1.5rem; } @media (max-width: 600px) { html { scroll-padding-top: 3.75rem; } .feature-grid { grid-template-columns: 1fr; } /* The stacked mobile nav is tall and variable; let it scroll away and pin only the section tabs at the very top. */ .nav { position: static; } .subnav { top: 0; } .nav-inner { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 0.85rem 1.25rem; } .nav-links { gap: 1.25rem; width: 100%; padding-top: 0.5rem; border-top: 1px solid var(--rule); } .hero { padding: 4.5rem 0; } section[id], section.cta { padding-top: 2.5rem; } }