/* =================================================== Moonlighting - Site Styles (Jenkins-inspired layout) Modeled after Project Jenova =================================================== */ :root { /* Accent — overridden per-user via an inline style on . */ --jh-accent: #2563eb; --jh-accent-rgb: 37, 99, 235; --jh-header-bg: #1f2937; --jh-sidebar-bg: #f9fafb; --jh-sidebar-border: #e5e7eb; --jh-sidebar-hover: #eff6ff; --jh-sidebar-active: #dbeafe; --jh-body-bg: #ffffff; --jh-surface-2: #f9fafb; /* card headers, stat cards, wells */ --jh-card-bg: #ffffff; /* kanban / timeline chips */ --jh-border: #d1d5db; --jh-text: #1f2937; --jh-text-muted: #6b7280; --jh-link: var(--jh-accent); --jh-link-hover: color-mix(in srgb, var(--jh-accent) 80%, black); --jh-primary: var(--jh-accent); --jh-success: #16a34a; --jh-error: #dc2626; --jh-warning: #d97706; /* Feed the accent into Bootstrap so primary buttons + links follow it. */ --bs-primary: var(--jh-accent); --bs-primary-rgb: var(--jh-accent-rgb); --bs-link-color: var(--jh-accent); --bs-link-color-rgb: var(--jh-accent-rgb); --bs-link-hover-color: var(--jh-link-hover); } /* Dark theme: Bootstrap flips its own components via data-bs-theme="dark"; here we flip the custom --jh-* surfaces to match. */ [data-bs-theme="dark"] { --jh-header-bg: #0b1120; --jh-sidebar-bg: #131c2e; --jh-sidebar-border: #334155; --jh-sidebar-hover: #1e293b; --jh-sidebar-active: #1e3a5f; --jh-body-bg: #0f172a; --jh-surface-2: #172033; --jh-card-bg: #1e293b; --jh-border: #334155; --jh-text: #e5e7eb; --jh-text-muted: #94a3b8; } /* Accent-driven Bootstrap buttons (their bg is compiled, so re-point the vars). */ .btn-primary { --bs-btn-bg: var(--jh-accent); --bs-btn-border-color: var(--jh-accent); --bs-btn-hover-bg: color-mix(in srgb, var(--jh-accent) 85%, black); --bs-btn-hover-border-color: color-mix(in srgb, var(--jh-accent) 80%, black); --bs-btn-active-bg: color-mix(in srgb, var(--jh-accent) 75%, black); --bs-btn-active-border-color: color-mix(in srgb, var(--jh-accent) 70%, black); --bs-btn-disabled-bg: var(--jh-accent); --bs-btn-disabled-border-color: var(--jh-accent); } .btn-outline-primary { --bs-btn-color: var(--jh-accent); --bs-btn-border-color: var(--jh-accent); --bs-btn-hover-bg: var(--jh-accent); --bs-btn-hover-border-color: var(--jh-accent); --bs-btn-active-bg: var(--jh-accent); --bs-btn-active-border-color: var(--jh-accent); } .bg-primary { background-color: var(--jh-accent) !important; } .text-primary { color: var(--jh-accent) !important; } .border-primary { border-color: var(--jh-accent) !important; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; height: 100%; font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, sans-serif; font-size: 14px; color: var(--jh-text); background: var(--jh-body-bg); } /* === Header === */ .jh-header { display: flex; align-items: center; height: 48px; background: var(--jh-header-bg); color: #fff; padding: 0 16px; position: fixed; top: 0; left: 0; right: 0; z-index: 1000; } .jh-logo { font-size: 18px; font-weight: 700; color: #fff; text-decoration: none; margin-right: 24px; display: flex; align-items: center; gap: 8px; } .jh-logo:hover { color: #93c5fd; } .jh-breadcrumb { font-size: 13px; color: #9ca3af; } .jh-breadcrumb .separator { margin: 0 6px; color: #6b7280; } /* === Body Layout === */ .jh-body { display: flex; margin-top: 48px; height: calc(100vh - 48px); } /* === Sidebar === */ .jh-sidebar { width: 240px; min-width: 240px; background: var(--jh-sidebar-bg); border-right: 1px solid var(--jh-sidebar-border); overflow-y: auto; padding: 12px 0; } .sidebar-nav { list-style: none; margin: 0; padding: 0; } .sidebar-nav li a { display: flex; align-items: center; gap: 10px; padding: 10px 20px; color: var(--jh-text); text-decoration: none; font-size: 13px; font-weight: 500; border-left: 3px solid transparent; transition: all 0.15s ease; } .sidebar-nav li a:hover { background: var(--jh-sidebar-hover); color: var(--jh-link); } .sidebar-nav li.active a { background: var(--jh-sidebar-active); color: var(--jh-link); border-left-color: var(--jh-primary); font-weight: 600; } .sidebar-nav li a i { font-size: 16px; width: 20px; text-align: center; } /* === Main Content === */ .jh-main { flex: 1; padding: 24px 32px; overflow-y: auto; background: var(--jh-body-bg); } /* === Stat Cards === */ .stat-card { background: var(--jh-surface-2); border: 1px solid var(--jh-border); border-radius: 8px; padding: 20px; text-align: center; } .stat-card-primary { border-left: 4px solid var(--jh-primary); } .stat-card-success { border-left: 4px solid var(--jh-success); } .stat-card-danger { border-left: 4px solid var(--jh-error); } .stat-value { font-size: 32px; font-weight: 700; color: var(--jh-text); } .stat-sub { font-size: 11px; color: var(--jh-text-muted); margin-top: 2px; } .stat-label { font-size: 12px; color: var(--jh-text-muted); text-transform: uppercase; letter-spacing: 0.5px; margin-top: 4px; } /* === Cards === */ .card { border: 1px solid var(--jh-border); border-radius: 8px; box-shadow: 0 1px 3px rgba(0,0,0,0.04); } .card-header { background: var(--jh-surface-2); font-weight: 600; font-size: 13px; padding: 10px 16px; border-bottom: 1px solid var(--jh-border); } /* === Status Badges === */ .badge.status-scheduled { background: var(--jh-primary); } .badge.status-completed { background: var(--jh-success); } .badge.status-cancelled { background: #9ca3af; } .badge.status-awaitingresponse { background: var(--jh-warning); color: #1f2937; } .badge.status-offerreceived { background: #059669; } .badge.status-rejected { background: var(--jh-error); } /* === Tables === */ .table th { font-size: 11px; text-transform: uppercase; letter-spacing: 0.5px; color: var(--jh-text-muted); font-weight: 600; border-bottom-width: 2px; } .table td { vertical-align: middle; } /* === Forms === */ .form-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.3px; color: var(--jh-text-muted); } /* === Alerts === */ .alert { font-size: 13px; } /* === Links === */ a { color: var(--jh-link); } a:hover { color: var(--jh-link-hover); } /* === Kanban Board === */ .kanban-board { display: flex; gap: 12px; overflow-x: auto; padding-bottom: 8px; } .kanban-column { /* Share the width when the board is busy, but never balloon: with only one or two populated columns (plus ghosted empties), an uncapped flex-grow stretched a single-card column across half the screen. */ flex: 1 1 0; min-width: 220px; max-width: 340px; background: var(--jh-surface-2); border-radius: 8px; padding: 8px; display: flex; flex-direction: column; } .kanban-column-header { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px; padding: 6px 8px; margin-bottom: 8px; } /* Empty columns stay droppable but stop competing for attention or width: they shrink and fade until a card lands in them. Wide enough that the longest header (NEGOTIATING) stays on one line — wrapped headers put every column's drop well at a different height, which read as a broken layout. */ .kanban-column-empty { flex: 0 1 160px; min-width: 150px; opacity: 0.55; } .kanban-column-empty .kanban-column-header { white-space: nowrap; } /* Touch devices: btn-sm renders ~27px tall, well under the ~44px a fingertip needs. Coarse-pointer media keeps desktop density untouched. */ @media (pointer: coarse) { .btn-sm { padding: 0.5rem 0.75rem; min-height: 44px; } } .kanban-card-list { flex: 1; min-height: 120px; /* comfortable drop target without towering gray wells */ } /* Faint hint when a column has no visible cards */ .kanban-card-list:not(:has(.kanban-card:not([style*="display: none"])))::after { content: "Drop here"; display: block; text-align: center; padding: 24px 0; font-size: 12px; color: #9ca3af; border: 1px dashed #d1d5db; border-radius: 6px; } .kanban-count { background: #e5e7eb; color: #4b5563; border-radius: 10px; padding: 1px 8px; font-size: 11px; font-weight: 600; } /* Sat in the same stage for 14+ days */ .kanban-days.kanban-stale { color: #b45309 !important; font-weight: 600; } /* First-run empty state */ .jh-empty-state { text-align: center; padding: 64px 16px; background: var(--jh-surface-2); border: 1px dashed var(--jh-border); border-radius: 8px; } /* Direct child only — icons inside the CTA button keep their normal size */ .jh-empty-state > i { font-size: 2.5rem; color: #cbd5e1; } .kanban-card { background: var(--jh-card-bg); border: 1px solid var(--jh-border); border-radius: 6px; padding: 10px 12px; margin-bottom: 8px; cursor: grab; position: relative; transition: box-shadow 0.15s ease; } .kanban-card { cursor: grab; } .kanban-card:active { cursor: grabbing; } .kanban-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); } .kanban-card.outcome-active { border-left: 3px solid var(--jh-success); } .kanban-card.outcome-accepted { border-left: 3px solid #2563eb; } .kanban-card.outcome-rejected { border-left: 3px solid var(--jh-error); } .kanban-card.outcome-withdrawn { border-left: 3px solid #9ca3af; } .kanban-card.outcome-ghosted { border-left: 3px solid #9ca3af; } a.kanban-card-company { font-weight: 600; font-size: 13px; margin-bottom: 2px; color: inherit; text-decoration: none; display: block; } a.kanban-card-company:hover { color: var(--jh-primary); text-decoration: underline; } .kanban-card-role { font-size: 12px; color: var(--jh-text-muted); margin-bottom: 6px; } .kanban-card-meta { display: flex; gap: 6px; align-items: center; font-size: 11px; } .kanban-card .stretched-link::after { content: ''; position: absolute; top: 0; left: 0; right: 0; bottom: 0; } .kanban-ghost { opacity: 0.4; background: #dbeafe; } /* === Pipeline Stage Badges === */ .badge.stage-researching { background: #6b7280; } .badge.stage-applied { background: #2563eb; } .badge.stage-interviewing { background: #7c3aed; } .badge.stage-offer { background: #059669; } .badge.stage-negotiating { background: #be185d; } /* === Interview Round Badges === */ .badge.round-phonescreen { background: #8b5cf6; font-size: 0.7em; } .badge.round-technical { background: #d97706; color: #1f2937; font-size: 0.7em; } .badge.round-behavioral { background: #0891b2; font-size: 0.7em; } .badge.round-panel { background: #4f46e5; font-size: 0.7em; } .badge.round-onsite { background: #0d9488; font-size: 0.7em; } .badge.round-takehome { background: #ca8a04; color: #1f2937; font-size: 0.7em; } .badge.round-final { background: #dc2626; font-size: 0.7em; } .badge.round-other { background: #6b7280; font-size: 0.7em; } /* === Outcome Badges === */ .badge.outcome-badge-active { background: var(--jh-success); } .badge.outcome-badge-accepted { background: #2563eb; } .badge.outcome-badge-rejected { background: var(--jh-error); } .badge.outcome-badge-withdrawn { background: #6b7280; } .badge.outcome-badge-ghosted { background: #9ca3af; } /* === Interview Timeline === */ .interview-timeline { position: relative; padding-left: 28px; } .interview-timeline::before { content: ''; position: absolute; left: 10px; top: 8px; bottom: 8px; width: 2px; background: var(--jh-border); } .timeline-item { position: relative; padding-bottom: 16px; } .timeline-item:last-child { padding-bottom: 0; } .timeline-dot { position: absolute; left: -24px; top: 4px; width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--jh-border); background: var(--jh-card-bg); display: flex; align-items: center; justify-content: center; font-size: 9px; z-index: 1; } .timeline-dot-completed { background: var(--jh-success); border-color: var(--jh-success); color: #fff; } .timeline-dot-scheduled { background: var(--jh-primary); border-color: var(--jh-primary); } .timeline-dot-other { background: #e5e7eb; border-color: #d1d5db; } .timeline-content { padding: 4px 0; } /* ===== Contact Type Badges ===== */ .contact-type-recruiter { background: #7c3aed; color: #fff; } .contact-type-hiringmanager { background: #2563eb; color: #fff; } .contact-type-referral { background: #059669; color: #fff; } .contact-type-other { background: #6b7280; color: #fff; } /* ===== Interaction Type Badges ===== */ .interaction-type-email { background: #3b82f6; color: #fff; } .interaction-type-phone { background: #10b981; color: #fff; } .interaction-type-videocall { background: #8b5cf6; color: #fff; } .interaction-type-inperson { background: #f59e0b; color: #fff; } .interaction-type-linkedinmessage { background: #0a66c2; color: #fff; } .interaction-type-textmessage { background: #6366f1; color: #fff; } .interaction-type-other { background: #6b7280; color: #fff; } .interaction-item { border-bottom: 1px solid var(--jh-border); padding-bottom: 12px; } .interaction-item:last-child { border-bottom: none; padding-bottom: 0; } /* Account links (login/logout) in the fixed header */ .jh-account { margin-left: auto; display: flex; align-items: center; gap: 16px; font-size: 0.85rem; } .jh-account-link, .jh-account-link:hover { color: rgba(255, 255, 255, 0.85); text-decoration: none; } .jh-account-link:hover { color: #fff; } /* Anonymous pages (login/register): centered, comfortable width */ .jh-anon-container { width: 100%; max-width: 920px; margin: 6vh auto 0; } /* Sidebar section headers */ .sidebar-nav li.sidebar-section { padding: 14px 20px 4px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.8px; color: var(--jh-text-muted); user-select: none; } /* An empty section label acts as a divider (used before Settings) */ .sidebar-nav li.sidebar-section:empty { padding: 6px 20px; border-bottom: 1px solid var(--jh-sidebar-border); margin-bottom: 6px; } /* Job source badges — one color per source so the feed shows provenance */ .badge.jh-src { font-size: 10px; font-weight: 600; letter-spacing: 0.3px; } .jh-src-remotive { background: #6f42c1; } .jh-src-remoteok { background: #d63384; } .jh-src-arbeitnow { background: #fd7e14; } .jh-src-themuse { background: #20c997; } .jh-src-weworkremotely { background: #0dcaf0; color: #073642; } .jh-src-himalayas { background: #6610f2; } .jh-src-jobicy { background: #198754; } .jh-src-greenhouse { background: #2e8b57; } .jh-src-lever { background: #495057; } .jh-src-indeed { background: #2557a7; } .jh-src-linkedin { background: #0a66c2; } .jh-src-apifyimport { background: #6c757d; } .badge.jh-src:not([class*="jh-src-"]) { background: #6c757d; } .jh-src-ashby { background: #7045af; } .jh-src-workable { background: #26a4a4; } .jh-src-workableboard { background: #1a7f7f; } /* =================================================== Personalization — all driven by attributes on =================================================== */ /* UI scale: the app uses px units, so zoom the content region for a real size bump without refactoring every rule to rem. */ html[data-scale="large"] .jh-main { zoom: 1.12; } html[data-scale="larger"] .jh-main { zoom: 1.25; } /* Density: tighten the generous default paddings. */ html[data-density="compact"] .jh-main { padding: 14px 18px; } html[data-density="compact"] .card-body { padding: 0.6rem 0.85rem; } html[data-density="compact"] .card-header { padding: 6px 12px; } html[data-density="compact"] .stat-card { padding: 12px; } html[data-density="compact"] .table > :not(caption) > * > * { padding: 0.3rem 0.45rem; } html[data-density="compact"] .sidebar-nav li a { padding: 7px 20px; } html[data-density="compact"] .list-group-item { padding-top: 0.4rem; padding-bottom: 0.4rem; } /* High contrast: harder borders, darker muted text, underlined links. */ html[data-contrast="high"] { --jh-border: #111827; --jh-text-muted: #374151; } html[data-contrast="high"][data-bs-theme="dark"] { --jh-border: #cbd5e1; --jh-text-muted: #cbd5e1; } html[data-contrast="high"] .card { border-width: 2px; } html[data-contrast="high"] .jh-main a:not(.btn) { text-decoration: underline; } /* Reduced motion: honor the OS preference, and a manual override. */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } } html[data-motion="reduced"] *, html[data-motion="reduced"] *::before, html[data-motion="reduced"] *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } /* OLED / true-black dark flavor. */ [data-bs-theme="dark"][data-dark="black"] { --jh-header-bg: #000000; --jh-sidebar-bg: #050507; --jh-sidebar-border: #1c1c20; --jh-sidebar-hover: #121216; --jh-body-bg: #000000; --jh-surface-2: #0b0b0e; --jh-card-bg: #0d0d11; --jh-border: #26262b; --bs-body-bg: #000000; --bs-card-bg: #0d0d11; --bs-tertiary-bg: #0b0b0e; } /* Collapsible icon-only sidebar. */ html.jh-sidebar-collapsed .jh-sidebar { width: 54px; min-width: 54px; } html.jh-sidebar-collapsed .sidebar-nav li a { padding: 10px 0; justify-content: center; gap: 0; font-size: 0; } html.jh-sidebar-collapsed .sidebar-nav li a i { font-size: 17px; } html.jh-sidebar-collapsed .sidebar-nav li.sidebar-section:not(:empty) { font-size: 0; padding: 4px 0; } /* Initials avatar in the header. */ .jh-avatar { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: 50%; background: var(--jh-accent); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: 0.3px; flex-shrink: 0; } img.jh-avatar { object-fit: cover; } /* uploaded pictures crop to the circle */ .jh-avatar-lg { width: 64px; height: 64px; font-size: 24px; } /* Backdrop behind the mobile sidebar drawer. */ .jh-sidebar-backdrop { display: none; } /* Company-name typeahead dropdown (site.js: data-company-suggest). */ .jh-suggest { position: absolute; top: 100%; left: 0; right: 0; z-index: 1060; background: var(--jh-card-bg); border: 1px solid var(--jh-border); border-radius: 0 0 8px 8px; box-shadow: 0 6px 16px rgba(0, 0, 0, 0.12); max-height: 280px; overflow-y: auto; } .jh-suggest-item { padding: 7px 12px; cursor: pointer; display: flex; flex-direction: column; gap: 1px; } .jh-suggest-item:hover { background: var(--jh-sidebar-hover); } .jh-suggest-name { font-weight: 600; font-size: 13px; } .jh-suggest-meta { font-size: 11px; color: var(--jh-text-muted); } /* =================================================== Mobile / tablet — the fixed sidebar becomes an off-canvas drawer; content goes full width. =================================================== */ @media (max-width: 767.98px) { /* Sidebar slides in from the left as an overlay (full 240px, ignoring the desktop icon-only collapse state). */ .jh-sidebar, html.jh-sidebar-collapsed .jh-sidebar { position: fixed; top: 48px; left: 0; bottom: 0; width: 250px; min-width: 250px; z-index: 1050; transform: translateX(-100%); transition: transform 0.22s ease; box-shadow: 2px 0 12px rgba(0, 0, 0, 0.25); } html.jh-sidebar-open .jh-sidebar { transform: translateX(0); } /* Undo the desktop icon-only styling inside the drawer. */ html.jh-sidebar-collapsed .sidebar-nav li a { padding: 10px 20px; justify-content: flex-start; gap: 10px; font-size: 13px; } html.jh-sidebar-collapsed .sidebar-nav li.sidebar-section:not(:empty) { font-size: 10px; padding: 14px 20px 4px; } .jh-sidebar-backdrop { display: none; position: fixed; inset: 48px 0 0 0; background: rgba(0, 0, 0, 0.45); z-index: 1040; } html.jh-sidebar-open .jh-sidebar-backdrop { display: block; } .jh-main { padding: 16px 14px; } .jh-header { padding: 0 10px; } .jh-logo { font-size: 16px; margin-right: 12px; } .jh-breadcrumb { display: none; } /* Keep wide content from forcing the page to scroll sideways. */ .table-responsive { -webkit-overflow-scrolling: touch; } .stat-value { font-size: 26px; } } /* The app shell is a fixed-height frame with its own inner scroll pane, which is right for a dashboard and wrong for a long marketing page: the document never grows, so the browser's own scrolling, scroll restoration, and mobile address-bar behaviour all stop working. Full-bleed pages hand scrolling back to the document. */ html[data-fullbleed="true"], html[data-fullbleed="true"] body { height: auto; min-height: 100%; } html[data-fullbleed="true"] .jh-body { height: auto; min-height: calc(100vh - 48px); } html[data-fullbleed="true"] .jh-main { overflow: visible; padding: 0; } /* =================================================================== Landing page (/welcome). The only public page in the app, so it is the only place that gets marketing-scale type and full-bleed sections. Everything below is scoped to .jh-land- to keep it from leaking into the signed-in UI. =================================================================== */ .jh-land-hero { max-width: 780px; margin: 8vh auto 0; padding: 0 1.25rem; text-align: center; } .jh-land-hero h1 { font-size: clamp(2rem, 5vw, 3.1rem); font-weight: 700; line-height: 1.15; letter-spacing: -0.02em; margin-bottom: 1.25rem; } .jh-land-lead { font-size: clamp(1.05rem, 2vw, 1.25rem); line-height: 1.65; color: var(--jh-text-muted); margin-bottom: 2rem; } .jh-land-cta { display: flex; gap: 0.75rem; justify-content: center; flex-wrap: wrap; } .jh-land-note { margin-top: 1rem; font-size: 0.9rem; color: var(--jh-text-muted); } .jh-land-section { max-width: 1080px; margin: 0 auto; padding: 5rem 1.25rem 0; } .jh-land-section h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 650; letter-spacing: -0.01em; margin-bottom: 0.5rem; text-align: center; } .jh-land-sub { text-align: center; color: var(--jh-text-muted); margin-bottom: 2rem; } .jh-land-section > h2 + .jh-land-grid, .jh-land-section > h2 + .jh-land-stance-grid, .jh-land-section > h2 + .jh-land-plans { margin-top: 2.5rem; } .jh-land-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; } .jh-land-card { background: var(--jh-surface-2); border: 1px solid var(--jh-border); border-radius: 12px; padding: 1.5rem; } .jh-land-card i { font-size: 1.5rem; color: var(--jh-accent); display: block; margin-bottom: 0.75rem; } .jh-land-card h3 { font-size: 1.1rem; font-weight: 640; margin-bottom: 0.6rem; } .jh-land-card p, .jh-land-stance-grid p { color: var(--jh-text-muted); line-height: 1.65; margin: 0; font-size: 0.95rem; } .jh-land-stance-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 2rem; } .jh-land-stance-grid h3 { font-size: 1.05rem; font-weight: 640; margin-bottom: 0.6rem; } .jh-land-plans { display: grid; grid-template-columns: repeat(auto-fit, minmax(270px, 1fr)); gap: 1.5rem; align-items: start; } .jh-land-plan { position: relative; background: var(--jh-surface-2); border: 1px solid var(--jh-border); border-radius: 12px; padding: 1.75rem 1.5rem; display: flex; flex-direction: column; } /* The tier we expect most people on, so it should read as the default rather than the upsell. */ .jh-land-plan-featured { border-color: var(--jh-accent); box-shadow: 0 0 0 1px var(--jh-accent); } .jh-land-tag { position: absolute; top: -0.7rem; left: 50%; transform: translateX(-50%); background: var(--jh-accent); color: #fff; font-size: 0.72rem; font-weight: 600; letter-spacing: 0.02em; padding: 0.2rem 0.7rem; border-radius: 999px; white-space: nowrap; } .jh-land-plan h3 { font-size: 1.05rem; font-weight: 640; margin-bottom: 0.25rem; } .jh-land-price { font-size: 2.25rem; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 1rem; } .jh-land-price span { font-size: 0.95rem; font-weight: 500; color: var(--jh-text-muted); } .jh-land-plan ul { list-style: none; padding: 0; margin: 0 0 1.5rem; flex-grow: 1; } .jh-land-plan li { position: relative; padding-left: 1.4rem; margin-bottom: 0.6rem; color: var(--jh-text-muted); line-height: 1.5; font-size: 0.92rem; } .jh-land-plan li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 0.5rem; height: 0.5rem; border-radius: 50%; background: var(--jh-accent); } .jh-land-footer { max-width: 1080px; margin: 5rem auto 0; padding: 2rem 1.25rem 3rem; border-top: 1px solid var(--jh-border); text-align: center; color: var(--jh-text-muted); font-size: 0.88rem; } .jh-land-footer p { margin: 0; } @media (max-width: 575.98px) { .jh-land-hero { margin-top: 4vh; } .jh-land-section { padding-top: 3.5rem; } .jh-land-cta .btn { width: 100%; } } /* Kanban card close menu. Sits top-right, out of the way until hovered, so the card still reads as company + role at a glance. */ .kanban-card { position: relative; } .kanban-card-close { position: absolute; top: 2px; right: 4px; opacity: 0; transition: opacity .12s ease; } .kanban-card:hover .kanban-card-close, .kanban-card-close.show, .kanban-card-close:focus-within { opacity: 1; } /* Touch has no hover, so leave it visible there rather than unreachable. */ @media (hover: none) { .kanban-card-close { opacity: .6; } } /* Field help icon. Sits inline with the label and stays quiet until wanted, so a form with one on every field does not read as a row of alerts. */ .jh-field-help { color: var(--jh-text-muted); text-decoration: none; font-size: 0.9em; line-height: 1; vertical-align: baseline; } .jh-field-help:hover, .jh-field-help:focus-visible { color: var(--jh-accent); } /* Popovers render at the end of , outside the themed app shell, so they need the surface colours applied directly or they come out light-on-light in dark mode. */ .popover { background: var(--jh-surface-2); border-color: var(--jh-border); } .popover .popover-header { background: var(--jh-surface-2); border-bottom-color: var(--jh-border); color: var(--jh-text); font-size: 0.85rem; font-weight: 640; } .popover .popover-body { color: var(--jh-text-muted); font-size: 0.82rem; line-height: 1.55; } .popover .popover-arrow::after { border-top-color: var(--jh-surface-2); } /* --- Collapsible cards (data-jh-collapse, wired in site.js) --------------- */ .jh-collapsible { cursor: pointer; user-select: none; } /* intro.js tour tooltip: its stock skin is a white card, and in dark mode the app's light text color inherits into it — pale grey on white, unreadable. Repaint the whole tooltip (arrows included: each direction paints exactly one border) with the app's own surface tokens. */ html[data-bs-theme="dark"] .introjs-tooltip { background: var(--jh-surface-2); color: var(--jh-text); } html[data-bs-theme="dark"] .introjs-tooltip-title { color: var(--jh-text); } html[data-bs-theme="dark"] .introjs-skipbutton { color: var(--jh-text-muted); } html[data-bs-theme="dark"] .introjs-button { background: var(--jh-card-bg); color: var(--jh-text); border: 1px solid var(--jh-border); text-shadow: none; } html[data-bs-theme="dark"] .introjs-button:hover, html[data-bs-theme="dark"] .introjs-button:focus { background: var(--jh-sidebar-hover); color: var(--jh-text); } html[data-bs-theme="dark"] .introjs-progress { background: var(--jh-border); } html[data-bs-theme="dark"] .introjs-arrow.top, html[data-bs-theme="dark"] .introjs-arrow.top-middle, html[data-bs-theme="dark"] .introjs-arrow.top-right { border-bottom-color: var(--jh-surface-2); } html[data-bs-theme="dark"] .introjs-arrow.bottom, html[data-bs-theme="dark"] .introjs-arrow.bottom-middle, html[data-bs-theme="dark"] .introjs-arrow.bottom-right { border-top-color: var(--jh-surface-2); } html[data-bs-theme="dark"] .introjs-arrow.left, html[data-bs-theme="dark"] .introjs-arrow.left-bottom { border-right-color: var(--jh-surface-2); } html[data-bs-theme="dark"] .introjs-arrow.right, html[data-bs-theme="dark"] .introjs-arrow.right-bottom { border-left-color: var(--jh-surface-2); } /* AI Tools hub tiles: whole card is the link. */ .jh-tool-tile { color: var(--jh-text); border: 1px solid var(--jh-border); } .jh-tool-tile:hover { border-color: var(--jh-accent); color: var(--jh-text); } .jh-tool-tile .bi { color: var(--jh-accent); } .jh-collapse-icon { transition: transform .15s ease; opacity: .6; } .sidebar-nav li.jh-sidebar-group { cursor: pointer; user-select: none; } .sidebar-nav li.jh-sidebar-group .jh-collapse-icon { float: right; font-size: 10px; } .sidebar-nav li.jh-group-collapsed .jh-collapse-icon { transform: rotate(-90deg); } /* Flex headers get the icon inside a right-side action group (site.js); plain headers float it right on its own. */ .card-header.jh-collapsible:not(.d-flex) .jh-collapse-icon { float: right; margin-top: .2rem; margin-left: .75rem; } .card.jh-collapsed > :not(.card-header) { display: none !important; } .card.jh-collapsed .jh-collapse-icon { transform: rotate(-90deg); }