/* ========================================================================== Hakika — Landing page styles Built on the project's own design tokens (styles.css @theme layer), so it inherits the KTUI palette and follows light/dark automatically via the `.dark` class that theme-init.js adds to . All classes are prefixed `lp-` to avoid collisions with KTUI/Tailwind. ========================================================================== */ :root { --lp-container: 1200px; --lp-gutter: 1.5rem; --lp-section-y: 6rem; /* Brand tints derived from the theme primary so they adapt to light/dark. */ --lp-primary-soft: color-mix(in oklab, var(--primary) 10%, var(--background)); --lp-primary-softer: color-mix(in oklab, var(--primary) 6%, var(--background)); --lp-ring: color-mix(in oklab, var(--primary) 22%, transparent); /* Success family (verified badges, checklists) from the theme green scale, so badge text, border and tint always come from one hue. */ --lp-success: var(--color-green-600); --lp-success-border: color-mix(in oklab, var(--lp-success) 40%, transparent); --lp-success-soft: color-mix(in oklab, var(--lp-success) 10%, var(--background)); } .dark { --lp-success: var(--color-green-500); } * { box-sizing: border-box; } html { scroll-behavior: smooth; } body { margin: 0; font-family: "Inter", ui-sans-serif, system-ui, sans-serif; color: var(--foreground); background: var(--background); line-height: 1.6; -webkit-font-smoothing: antialiased; } img { max-width: 100%; display: block; } a { color: inherit; text-decoration: none; } /* ---- Layout helpers ---------------------------------------------------- */ .lp-container { width: 100%; max-width: var(--lp-container); margin-inline: auto; padding-inline: var(--lp-gutter); } .lp-section { padding-block: var(--lp-section-y); } .lp-section--tight { padding-block: 3.5rem; } .lp-eyebrow { display: inline-flex; align-items: center; gap: .4rem; font-size: .8rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--primary); background: var(--lp-primary-soft); border: 1px solid var(--lp-ring); padding: .3rem .7rem; border-radius: 999px; } .lp-h1 { font-size: clamp(2.2rem, 5vw + 1rem, 3.75rem); line-height: 1.08; letter-spacing: -.02em; font-weight: 700; color: var(--foreground); margin: 0 0 1.1rem; } .lp-h2 { font-size: clamp(1.7rem, 2.5vw + 1rem, 2.6rem); line-height: 1.15; letter-spacing: -.02em; font-weight: 700; color: var(--foreground); margin: 0 0 .75rem; } .lp-h3 { font-size: 1.15rem; font-weight: 600; color: var(--foreground); margin: 0 0 .4rem; } .lp-lead { font-size: 1.12rem; color: var(--muted-foreground); margin: 0 0 1.75rem; max-width: 46ch; } .lp-muted { color: var(--muted-foreground); } .lp-section-head { max-width: 40rem; margin: 0 auto 3rem; text-align: center; } .lp-section-head .lp-lead { margin-inline: auto; } /* ---- Buttons (mirror KTUI look, self-contained) ------------------------ */ .lp-btn { display: inline-flex; align-items: center; justify-content: center; gap: .5rem; font-weight: 600; font-size: .95rem; line-height: 1; padding: .85rem 1.4rem; border-radius: var(--radius); border: 1px solid transparent; cursor: pointer; transition: transform .12s ease, background .15s ease, border-color .15s ease, box-shadow .15s ease; white-space: nowrap; } .lp-btn:active { transform: translateY(1px); } .lp-btn:focus-visible, .lp-icon-btn:focus-visible, .lp-tab:focus-visible, .lp-clear-btn:focus-visible { outline: none; box-shadow: 0 0 0 3px var(--lp-ring); } a:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; border-radius: 2px; } .lp-btn-primary { background: var(--primary); color: var(--primary-foreground); box-shadow: 0 8px 20px -8px var(--lp-ring); } .lp-btn-primary:hover { background: color-mix(in oklab, var(--primary) 88%, black); } .lp-btn-outline { background: transparent; color: var(--foreground); border-color: var(--border); } .lp-btn-outline:hover { background: var(--muted); } .lp-btn-ghost { background: transparent; color: var(--foreground); } .lp-btn-ghost:hover { background: var(--muted); } .lp-btn-lg { padding: 1rem 1.7rem; font-size: 1rem; } .lp-btn-block { width: 100%; } .lp-btn-disabled { opacity: 0.4; pointer-events: none; } /* ---- Pager (public browse) --------------------------------------------- */ .lp-pager { display: flex; align-items: center; justify-content: space-between; gap: 0.75rem; flex-wrap: wrap; margin-top: 1.75rem; } .lp-pager-status { font-size: 0.875rem; color: var(--muted-foreground); } .lp-pager-nav { display: flex; align-items: center; gap: 0.5rem; } /* ---- Header / nav ------------------------------------------------------ */ .lp-header { position: sticky; top: 0; z-index: 50; background: color-mix(in oklab, var(--background) 82%, transparent); backdrop-filter: saturate(180%) blur(12px); border-bottom: 1px solid var(--border); } .lp-nav { display: flex; align-items: center; justify-content: space-between; gap: 1rem; height: 68px; } /* Wordmark: the repo logo is a Metronic placeholder, so render a clean Hakika mark. */ .lp-brand { display: inline-flex; align-items: center; gap: .55rem; font-weight: 800; font-size: 1.3rem; letter-spacing: -.02em; color: var(--foreground); } .lp-brand-mark { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 9px; background: var(--primary); color: var(--primary-foreground); font-size: 1.1rem; } .lp-nav-links { display: flex; align-items: center; gap: 1.6rem; } .lp-nav-links a { font-size: .95rem; font-weight: 500; color: var(--muted-foreground); transition: color .15s ease; } .lp-nav-links a:hover { color: var(--foreground); } .lp-nav-links a[aria-current="page"] { color: var(--foreground); font-weight: 600; } .lp-mobile-menu a[aria-current="page"] { color: var(--primary); } .lp-nav-actions { display: flex; align-items: center; gap: .6rem; } .lp-icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: var(--radius); border: 1px solid var(--border); background: transparent; color: var(--foreground); cursor: pointer; } .lp-icon-btn:hover { background: var(--muted); } .lp-theme-toggle .lp-sun { display: none; } .dark .lp-theme-toggle .lp-sun { display: block; } .dark .lp-theme-toggle .lp-moon { display: none; } .lp-burger { display: none; } /* ---- Hero -------------------------------------------------------------- */ .lp-hero { position: relative; overflow: hidden; background: radial-gradient(60rem 40rem at 80% -10%, var(--lp-primary-soft), transparent 60%), var(--background); } .lp-hero-grid { display: grid; grid-template-columns: 1.05fr .95fr; gap: 3.5rem; align-items: center; padding-block: 5rem 6rem; } .lp-hero-cta { display: flex; flex-wrap: wrap; gap: .8rem; margin-bottom: 1.75rem; } .lp-trust-row { display: flex; flex-wrap: wrap; gap: 1.2rem 1.5rem; } .lp-trust-row span { display: inline-flex; align-items: center; gap: .45rem; font-size: .9rem; font-weight: 500; color: var(--muted-foreground); } .lp-trust-row i { color: var(--primary); font-size: 1.05rem; } /* Hero preview: a live-looking worker trust card */ .lp-preview { position: relative; background: var(--background); border: 1px solid var(--border); border-radius: calc(var(--radius) * 2.5); padding: 1.5rem; box-shadow: 0 40px 80px -40px rgba(0,0,0,.35), 0 0 0 1px color-mix(in oklab, var(--border) 40%, transparent); } .lp-preview-head { display: flex; align-items: center; gap: 1rem; margin-bottom: 1.25rem; } .lp-preview-avatar { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; border: 3px solid var(--lp-primary-soft); } .lp-preview .lp-avatar-initial { width: 64px; height: 64px; font-size: 1.2rem; } .lp-preview-name { font-weight: 700; font-size: 1.1rem; color: var(--foreground); display: flex; align-items: center; gap: .4rem; } .lp-preview-role { font-size: .9rem; color: var(--muted-foreground); } .lp-stars { color: var(--color-yellow-600); font-size: .95rem; letter-spacing: .05em; } .lp-preview-stat-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: .75rem; margin-bottom: 1.25rem; } .lp-stat-card { text-align: center; background: var(--muted); border-radius: var(--radius); padding: .75rem .5rem; } .lp-stat-num { font-size: 1.35rem; font-weight: 700; color: var(--primary); line-height: 1.1; } .lp-stat-label { font-size: .72rem; color: var(--muted-foreground); text-transform: uppercase; letter-spacing: .04em; } .lp-chip-row { display: flex; flex-wrap: wrap; gap: .45rem; } .lp-chip { display: inline-flex; align-items: center; gap: .35rem; font-size: .78rem; font-weight: 500; padding: .3rem .6rem; border-radius: 999px; background: var(--lp-primary-soft); color: var(--primary); border: 1px solid var(--lp-ring); } .lp-badge-verified { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 600; color: var(--lp-success); border: 1px solid var(--lp-success-border); border-radius: .4rem; padding: .15rem .45rem; background: var(--lp-success-soft); } /* Verification checklist (hero card) */ .lp-verify-list { list-style: none; padding: 0; margin: 0 0 1.25rem; display: grid; gap: .55rem; } .lp-verify-list li { display: flex; align-items: center; gap: .55rem; font-size: .9rem; color: var(--foreground); } .lp-verify-list li i { color: var(--lp-success); font-size: 1.05rem; } .lp-preview-bureau { display: inline-flex; align-items: center; gap: .35rem; font-size: .82rem; color: var(--muted-foreground); margin-top: .2rem; } .lp-preview-bureau i { color: var(--primary); } /* ---- Logo / trust strip ------------------------------------------------ */ .lp-strip { border-block: 1px solid var(--border); background: var(--lp-primary-softer); } .lp-strip-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1rem 3rem; padding-block: 1.5rem; } .lp-strip-item { display: inline-flex; align-items: center; gap: .5rem; font-weight: 600; color: var(--muted-foreground); font-size: .95rem; } .lp-strip-item i { color: var(--primary); font-size: 1.3rem; } /* ---- Feature grid ------------------------------------------------------ */ .lp-grid { display: grid; gap: 1.5rem; } .lp-grid-3 { grid-template-columns: repeat(3, 1fr); } .lp-grid-4 { grid-template-columns: repeat(4, 1fr); } .lp-grid-2 { grid-template-columns: repeat(2, 1fr); } .lp-card { background: var(--background); border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.5); padding: 1.6rem; transition: transform .15s ease, box-shadow .15s ease, border-color .15s ease; } .lp-card:hover { transform: translateY(-3px); box-shadow: 0 24px 48px -28px rgba(0,0,0,.35); border-color: var(--lp-ring); } .lp-feature-icon { width: 48px; height: 48px; border-radius: var(--radius); display: inline-flex; align-items: center; justify-content: center; background: var(--lp-primary-soft); color: var(--primary); font-size: 1.4rem; margin-bottom: 1rem; } /* ---- How it works ------------------------------------------------------ */ .lp-steps { counter-reset: step; } .lp-step-num { width: 40px; height: 40px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; background: var(--primary); color: var(--primary-foreground); font-weight: 700; margin-bottom: 1rem; } .lp-tabs { display: inline-flex; gap: .35rem; padding: .3rem; background: var(--muted); border-radius: 999px; margin: 0 auto 2.5rem; } .lp-tab { border: 0; background: transparent; cursor: pointer; font-weight: 600; font-size: .9rem; color: var(--muted-foreground); padding: .55rem 1.1rem; border-radius: 999px; transition: all .15s ease; } .lp-tab.is-active { background: var(--background); color: var(--foreground); box-shadow: 0 2px 8px -3px rgba(0,0,0,.25); } .lp-tabpanel { display: none; } .lp-tabpanel.is-active { display: grid; } /* ---- Audience panels --------------------------------------------------- */ .lp-audience-card { position: relative; overflow: hidden; border: 1px solid var(--border); border-radius: calc(var(--radius) * 1.5); padding: 1.75rem; background: radial-gradient(24rem 16rem at 100% 0%, var(--lp-primary-soft), transparent 70%), var(--background); } .lp-audience-card ul { list-style: none; padding: 0; margin: 1rem 0 1.5rem; display: grid; gap: .6rem; } .lp-audience-card li { display: flex; align-items: flex-start; gap: .5rem; color: var(--muted-foreground); font-size: .95rem; } .lp-audience-card li i { color: var(--primary); margin-top: .15rem; } /* ---- Stats band -------------------------------------------------------- */ .lp-statsband { background: var(--primary); color: var(--primary-foreground); border-radius: calc(var(--radius) * 2); } .lp-statsband .lp-grid-4 { gap: 1rem; text-align: center; padding: 2.5rem 1rem; } .lp-big-num { font-size: clamp(2rem, 3vw, 2.75rem); font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; } .lp-big-label { opacity: .85; font-size: .9rem; margin-top: .35rem; } /* ---- Final CTA --------------------------------------------------------- */ .lp-cta-band { text-align: center; border: 1px solid var(--border); border-radius: calc(var(--radius) * 2); padding: 3.5rem 1.5rem; background: radial-gradient(40rem 20rem at 50% 0%, var(--lp-primary-soft), transparent 70%), var(--background); } .lp-cta-band .lp-hero-cta { justify-content: center; } /* ---- Footer ------------------------------------------------------------ */ .lp-footer { border-top: 1px solid var(--border); background: var(--lp-primary-softer); } .lp-footer-grid { display: grid; grid-template-columns: 1.5fr repeat(3, 1fr); gap: 2.5rem; padding-block: 3.5rem; } .lp-footer h4 { font-size: .8rem; text-transform: uppercase; letter-spacing: .05em; color: var(--muted-foreground); margin: 0 0 1rem; } .lp-footer ul { list-style: none; padding: 0; margin: 0; display: grid; gap: .6rem; } .lp-footer a { color: var(--foreground); font-size: .92rem; } .lp-footer a:hover { color: var(--primary); } .lp-footer-bottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem; padding-block: 1.5rem; border-top: 1px solid var(--border); font-size: .88rem; color: var(--muted-foreground); } /* ---- Contact page ------------------------------------------------------ */ .lp-contact-grid { display: grid; grid-template-columns: .9fr 1.1fr; gap: 3rem; align-items: start; } .lp-contact-item { display: flex; gap: 1rem; align-items: flex-start; margin-bottom: 1.5rem; } .lp-contact-item .lp-feature-icon { margin-bottom: 0; flex: 0 0 auto; } .lp-field { display: flex; flex-direction: column; gap: .4rem; margin-bottom: 1.1rem; } .lp-field label { font-size: .88rem; font-weight: 500; color: var(--foreground); } .lp-field input, .lp-field select, .lp-field textarea { width: 100%; font: inherit; color: var(--foreground); background: var(--background); border: 1px solid var(--input); border-radius: var(--radius); padding: .7rem .85rem; transition: border-color .15s ease, box-shadow .15s ease; } .lp-field textarea { resize: vertical; min-height: 130px; padding: .8rem; } .lp-field input:focus, .lp-field select:focus, .lp-field textarea:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--lp-ring); } .lp-form-note { font-size: .82rem; color: var(--muted-foreground); margin-top: .25rem; } .lp-alert { display: none; align-items: center; gap: .5rem; background: var(--lp-success-soft); border: 1px solid var(--lp-success-border); color: var(--lp-success); padding: .8rem 1rem; border-radius: var(--radius); margin-bottom: 1.25rem; font-weight: 500; } .lp-alert.is-visible { display: flex; } .lp-alert--error { background: color-mix(in oklab, var(--destructive) 10%, var(--background)); border-color: color-mix(in oklab, var(--destructive) 40%, transparent); color: var(--destructive); } /* ---- Mobile menu drawer ------------------------------------------------ */ .lp-mobile-menu { display: none; border-top: 1px solid var(--border); background: var(--background); padding: 1rem var(--lp-gutter) 1.5rem; } .lp-mobile-menu.is-open { display: block; } .lp-mobile-menu a { display: block; padding: .7rem 0; font-weight: 500; color: var(--foreground); border-bottom: 1px solid var(--border); } .lp-mobile-menu .lp-mobile-actions { display: grid; gap: .6rem; margin-top: 1rem; } /* ---- Browse workers ---------------------------------------------------- */ .lp-page-head { padding-block: 3rem 1.25rem; } .lp-filterbar { margin-bottom: 2rem; } .lp-filter-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem; margin-bottom: 1.1rem; } .lp-result-count { font-weight: 600; color: var(--foreground); } .lp-result-count b { color: var(--primary); } .lp-clear-btn { background: none; border: 0; color: var(--primary); cursor: pointer; font-weight: 600; font-size: .9rem; display: inline-flex; align-items: center; gap: .35rem; } .lp-clear-btn:hover { text-decoration: underline; } .lp-filter-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; } .lp-filter-search { grid-column: 1 / -1; } /* Submit button sits in a field cell with no label; push it to the bottom so it lines up with the other controls' inputs. */ .lp-filter-actions { justify-content: flex-end; } .lp-filter-actions .lp-btn { margin-top: auto; } .lp-worker-card { display: flex; flex-direction: column; } .lp-worker-top { display: flex; gap: 1rem; align-items: center; margin-bottom: 1.1rem; } .lp-avatar-initial { width: 56px; height: 56px; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.05rem; background: var(--lp-primary-soft); color: var(--primary); border: 1px solid var(--lp-ring); } .lp-worker-name { font-weight: 700; color: var(--foreground); display: flex; align-items: center; gap: .4rem; } .lp-worker-role { font-size: .88rem; color: var(--muted-foreground); } .lp-worker-bureau { font-size: .8rem; color: var(--muted-foreground); display: inline-flex; align-items: center; gap: .3rem; margin-top: .15rem; } .lp-worker-bureau i { color: var(--primary); } .lp-worker-meta { display: grid; grid-template-columns: 1fr 1fr; gap: .5rem .75rem; margin-bottom: 1rem; } .lp-worker-meta span { display: flex; gap: .4rem; align-items: center; font-size: .85rem; color: var(--muted-foreground); } .lp-worker-meta i { color: var(--primary); font-size: 1rem; flex: 0 0 auto; } .lp-verify-pills { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1.2rem; } .lp-verify-pill { display: inline-flex; align-items: center; gap: .3rem; font-size: .72rem; font-weight: 500; color: var(--lp-success); background: var(--lp-success-soft); border: 1px solid var(--lp-success-border); border-radius: 999px; padding: .2rem .5rem; } .lp-worker-card .lp-btn { margin-top: auto; } [data-lp-item].is-hidden { display: none; } .lp-no-results { display: none; text-align: center; padding: 3.5rem 1rem; color: var(--muted-foreground); } .lp-no-results.is-visible { display: block; } .lp-no-results i { font-size: 2.5rem; color: var(--muted-foreground); display: block; margin-bottom: .75rem; } /* ---- Bureau cards ------------------------------------------------------ */ .lp-avatar-initial.lp-square { border-radius: 12px; } .lp-bureau-spec { display: flex; flex-wrap: wrap; gap: .35rem; margin-bottom: 1.2rem; } /* ---- Breadcrumb -------------------------------------------------------- */ .lp-breadcrumb { display: flex; flex-wrap: wrap; gap: .45rem; align-items: center; font-size: .85rem; color: var(--muted-foreground); margin-bottom: 1.5rem; } .lp-breadcrumb a { color: var(--muted-foreground); } .lp-breadcrumb a:hover { color: var(--primary); } .lp-breadcrumb i { font-size: .7rem; opacity: .6; } .lp-breadcrumb .current { color: var(--foreground); font-weight: 600; } /* ---- Profile header (bureau / worker detail) --------------------------- */ .lp-profile-header { display: flex; gap: 1.5rem; align-items: center; flex-wrap: wrap; } .lp-avatar-lg { width: 96px; height: 96px; border-radius: 50%; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.9rem; background: var(--lp-primary-soft); color: var(--primary); border: 1px solid var(--lp-ring); } .lp-avatar-lg.lp-square { border-radius: 22px; } .lp-profile-main { flex: 1 1 320px; } .lp-profile-name { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; font-size: 1.7rem; font-weight: 700; color: var(--foreground); margin: 0 0 .5rem; } .lp-profile-meta { display: flex; flex-wrap: wrap; gap: .45rem 1.25rem; color: var(--muted-foreground); font-size: .92rem; } .lp-profile-meta span { display: inline-flex; align-items: center; gap: .4rem; } .lp-profile-meta i { color: var(--primary); } .lp-profile-stats { display: flex; flex-wrap: wrap; gap: 1.5rem 2.5rem; margin-top: 1.25rem; } .lp-profile-stats .n { font-size: 1.5rem; font-weight: 700; color: var(--primary); line-height: 1; font-variant-numeric: tabular-nums; } .lp-profile-stats .l { font-size: .8rem; color: var(--muted-foreground); } /* ---- Detail layout ----------------------------------------------------- */ .lp-detail-grid { display: grid; grid-template-columns: 1.65fr 1fr; gap: 2rem; align-items: start; } .lp-detail-section { margin-bottom: 1.75rem; } .lp-detail-section:last-child { margin-bottom: 0; } .lp-kv { display: grid; grid-template-columns: 150px 1fr; gap: .65rem 1rem; margin: 0; } .lp-kv dt { color: var(--muted-foreground); font-size: .9rem; } .lp-kv dd { margin: 0; color: var(--foreground); font-size: .92rem; font-weight: 500; } .lp-sidebar { position: sticky; top: 88px; display: grid; gap: 1.25rem; } /* Contact-gated card */ .lp-locked-card { text-align: center; } .lp-locked-icon { width: 56px; height: 56px; border-radius: 50%; background: var(--lp-primary-soft); color: var(--primary); display: inline-flex; align-items: center; justify-content: center; font-size: 1.6rem; margin: 0 auto .85rem; } .lp-masked { letter-spacing: .12em; color: var(--muted-foreground); font-weight: 600; } /* ---- Page-level variants (replace per-page inline styles) -------------- */ .lp-h1--page { font-size: clamp(2rem, 4vw + 1rem, 3rem); } .lp-lead--wide { max-width: 60ch; } .lp-section--flush { padding-top: 0; } .lp-section--page { padding-block: 2.5rem 3.5rem; } .lp-section--tinted { background: var(--lp-primary-softer); } .lp-hero-wash { background: radial-gradient(50rem 30rem at 80% -10%, var(--lp-primary-soft), transparent 60%), var(--background); } .lp-section-head--tight { margin-bottom: 2.5rem; } .lp-section-head--left { text-align: left; max-width: none; margin: 0 0 1.5rem; } .lp-section-head--left .lp-h2 { margin-bottom: .25rem; } .lp-section-head--left p { margin: 0; } .lp-tabs-wrap { text-align: center; } .lp-split { align-items: center; gap: 3rem; } .lp-grid--tight { gap: 1rem; } /* Horizontal card: icon block beside text (trust checks, callouts). */ .lp-card--row { display: flex; gap: 1rem; align-items: flex-start; } .lp-card--row .lp-feature-icon { margin-bottom: 0; flex: 0 0 auto; } .lp-card .lp-h3 + p { margin: 0; } .lp-card .lp-verify-list:last-child { margin-bottom: 0; } /* Small advisory card: bare icon + fine print. */ .lp-tip-card { display: flex; gap: 1rem; align-items: flex-start; } .lp-tip-card > i { color: var(--primary); font-size: 1.5rem; flex: 0 0 auto; } .lp-tip-card p { margin: 0; font-size: .88rem; } .lp-link { color: var(--primary); font-weight: 600; } .lp-link:hover { text-decoration: underline; } .lp-page-note { text-align: center; margin-top: 2rem; } .lp-statsband-note { text-align: center; margin-top: .75rem; } .lp-profile-card { margin-bottom: 1.5rem; } .lp-profile-bureau { margin-top: .75rem; } .lp-detail-intro { margin-bottom: 2.5rem; } .lp-contact-item p { margin: 0; } .lp-contact-link:hover, .lp-contact-link:focus-visible { color: var(--primary); text-decoration: underline; } .lp-cta-band .lp-lead { margin-inline: auto; } .lp-footer .lp-brand { margin-bottom: 1rem; } .lp-footer-blurb { max-width: 34ch; } /* Worker-detail sidebar */ .lp-side-bureau { display: flex; gap: .75rem; align-items: center; margin-bottom: 1rem; } .lp-side-bureau .lp-worker-name { font-size: 1rem; } .lp-locked-card .lp-h3 + p { margin: .25rem 0 1rem; } .lp-locked-card .lp-masked { display: block; margin-bottom: 1.25rem; } .lp-locked-card .lp-form-note { margin-top: .75rem; } /* Hover lift signals "clickable" — suppress it on static containers. */ .lp-filterbar:hover, .lp-profile-card:hover, .lp-detail-section:hover, .lp-detail-intro .lp-card:hover, .lp-sidebar .lp-card:hover, .lp-form-card:hover, .lp-card--row:hover, .lp-tip-card:hover { transform: none; box-shadow: none; border-color: var(--border); } /* ---- Reveal-on-scroll -------------------------------------------------- */ .lp-reveal { opacity: 0; transform: translateY(16px); transition: opacity .6s ease, transform .6s ease; } .lp-reveal.is-in { opacity: 1; transform: none; } /* ── Legal pages (terms, privacy) and the acceptance gate ────────────────── */ .lp-container-narrow { max-width: 760px; } .lp-legal { max-width: 760px; margin: 0 auto; } .lp-legal .lp-h2 { margin-top: 2rem; margin-bottom: .5rem; } .lp-legal p { color: var(--muted-foreground); line-height: 1.7; margin-bottom: .9rem; } .lp-legal p strong { color: var(--foreground); } /* An unmistakable band for content that is not yet in force. Deliberately loud: draft legal text that reads as finished is how placeholders reach production. */ .lp-notice { display: flex; gap: .6rem; align-items: flex-start; background: var(--muted); border: 1px solid var(--border); color: var(--foreground); padding: .9rem 1.1rem; border-radius: var(--radius); margin-bottom: 1.5rem; font-size: .9rem; line-height: 1.6; } .lp-notice-warn { background: color-mix(in oklab, var(--destructive) 10%, var(--background)); border-color: color-mix(in oklab, var(--destructive) 40%, transparent); } .lp-notice-warn strong { color: var(--destructive); } /* Placeholder paragraphs: visibly provisional, never mistakable for drafted copy. */ .lp-draft { border-left: 3px solid color-mix(in oklab, var(--destructive) 45%, transparent); padding-left: .9rem; font-style: italic; } .lp-check { display: flex; gap: .6rem; align-items: flex-start; margin-bottom: 1.1rem; font-size: .92rem; } .lp-check input { margin-top: .2rem; width: 1rem; height: 1rem; accent-color: var(--primary); flex-shrink: 0; } .lp-muted-small { font-size: .82rem; color: var(--muted-foreground); } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } .lp-reveal { opacity: 1; transform: none; transition: none; } .lp-btn, .lp-card, .lp-tab { transition: none; } .lp-card:hover { transform: none; } } /* ---- Responsive -------------------------------------------------------- */ @media (max-width: 992px) { .lp-hero-grid { grid-template-columns: 1fr; gap: 2.5rem; padding-block: 3rem 4rem; } .lp-grid-4 { grid-template-columns: repeat(2, 1fr); } .lp-footer-grid { grid-template-columns: 1fr 1fr; gap: 2rem; } .lp-contact-grid { grid-template-columns: 1fr; gap: 2rem; } #worker-results.lp-grid-3 { grid-template-columns: repeat(2, 1fr); } .lp-filter-grid { grid-template-columns: repeat(2, 1fr); } .lp-detail-grid { grid-template-columns: 1fr; } .lp-sidebar { position: static; } } @media (max-width: 768px) { :root { --lp-section-y: 4rem; } .lp-nav-links, .lp-nav-actions .lp-nav-desktop { display: none; } .lp-burger { display: inline-flex; } .lp-grid-3, .lp-grid-2, .lp-grid-4 { grid-template-columns: 1fr; } #worker-results.lp-grid-3 { grid-template-columns: 1fr; } .lp-filter-grid { grid-template-columns: 1fr; } .lp-preview-stat-grid { grid-template-columns: repeat(3, 1fr); } .lp-footer-grid { grid-template-columns: 1fr; } .lp-tabpanel.is-active { grid-template-columns: 1fr !important; } .lp-kv { grid-template-columns: 1fr; gap: .2rem; } .lp-kv dt { margin-top: .6rem; } .lp-profile-name { font-size: 1.4rem; } }