/* ============================================================= Sherlock AI — dedicated page Forced dark theme via data-theme="dark" on . Uses tokens from ds/tokens.css + dark theme from ds/theme-dark.css. ============================================================= */ .sherlock-body { background: var(--aise-bg); color: var(--aise-text); min-height: 100vh; } /* Green named-verdict — matches the hero SVG accent so it feels like the same product-family. Kept as a local variable so we can tune here without touching tokens. */ .sherlock-body { --sh-green: oklch(0.72 0.14 155); --sh-green-dim: color-mix(in srgb, var(--sh-green) 60%, transparent); --sh-panel-bg: oklch(15% 0.008 265); --sh-panel-border: rgba(139, 124, 248, 0.16); --sh-panel-glow: rgba(139, 124, 248, 0.10); } /* ── Hero ────────────────────────────────────────────────── */ .sherlock-hero { position: relative; padding: 96px 20px 40px; overflow: hidden; } /* Aurora: three overlapping radial gradients using the Sherlock palette (blue at top-left, hot pink at bottom-right, purple mid). Fills the whole hero, not just a top glow. */ .sherlock-hero__glow { position: absolute; inset: 0; background: radial-gradient(ellipse 1200px 500px at 15% -10%, color-mix(in srgb, var(--sh-c1, #4d5cf5) 32%, transparent), transparent 60%), radial-gradient(ellipse 900px 400px at 85% 110%, color-mix(in srgb, var(--sh-c5, #ff5cbc) 28%, transparent), transparent 60%), radial-gradient(ellipse 700px 320px at 55% 45%, color-mix(in srgb, var(--sh-c3, #a943ec) 22%, transparent), transparent 60%); pointer-events: none; } .sherlock-hero__inner { position: relative; max-width: 900px; margin: 0 auto; text-align: center; } .sherlock-hero__eyebrow { display: inline-flex; align-items: center; gap: 8px; padding: 6px 14px; border: 1px solid var(--aise-border-strong); border-radius: 999px; background: var(--aise-overlay-subtle); font-family: var(--aise-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aise-text-muted); margin-bottom: var(--aise-space-6); } .sherlock-hero__eyebrow svg { flex: none; color: var(--aise-accent-300); } .sherlock-hero__h1 { font-family: var(--aise-sans); font-size: clamp(36px, 5vw, 60px); font-weight: 700; line-height: 1.05; letter-spacing: -0.03em; color: var(--aise-text); margin: 0 0 var(--aise-space-5) 0; } .sherlock-hero__sub { font-family: var(--aise-sans); font-size: 17px; line-height: 1.55; color: var(--aise-text-muted); max-width: 640px; margin: 0 auto; } /* ── The panel ───────────────────────────────────────────── */ .sherlock-panel-section { padding: 40px 20px 80px; } .sherlock-panel-section__inner { max-width: 900px; margin: 0 auto; } .sherlock-panel { background: var(--sh-panel-bg); border: 1px solid var(--sh-panel-border); border-radius: 14px; overflow: hidden; box-shadow: 0 20px 60px -30px var(--sh-panel-glow), 0 0 0 1px rgba(255, 255, 255, 0.02) inset; } .sherlock-panel__header { display: flex; align-items: center; gap: 8px; padding: 12px 16px; border-bottom: 1px solid var(--aise-border); background: rgba(255, 255, 255, 0.015); } .sherlock-panel__dot { width: 10px; height: 10px; border-radius: 50%; border: 1px solid rgba(255, 255, 255, 0.18); } .sherlock-panel__title { margin-left: auto; font-family: var(--aise-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--aise-text-subtle); } .sherlock-panel__body { padding: 24px 24px 20px; } .sherlock-panel__query { display: flex; align-items: baseline; gap: 8px; font-family: var(--aise-mono); font-size: 15px; color: var(--aise-text); margin-bottom: 20px; flex-wrap: wrap; } .sherlock-panel__prompt { color: var(--aise-accent-300); font-weight: 600; } .sherlock-panel__query-text { color: var(--aise-text); } .sherlock-panel__cursor { display: inline-block; width: 8px; height: 15px; background: var(--aise-accent-300); vertical-align: text-bottom; animation: sherlock-blink 1s steps(2, start) infinite; transform: translateY(2px); } @keyframes sherlock-blink { to { visibility: hidden; } } .sherlock-panel__rows { display: flex; flex-direction: column; gap: 2px; } .sherlock-row { display: grid; grid-template-columns: 20px 90px 14px 90px 1fr; align-items: center; gap: 10px; padding: 10px 8px; font-family: var(--aise-mono); font-size: 13px; border-radius: 6px; transition: background 0.2s; } .sherlock-row:hover { background: rgba(255, 255, 255, 0.02); } .sherlock-row__logo { width: 18px; height: 18px; display: inline-flex; align-items: center; justify-content: center; } .sherlock-row__logo img { width: 16px; height: 16px; object-fit: contain; } .sherlock-row__logo--white img { filter: brightness(0) invert(1); opacity: 0.85; } .sherlock-row__logo--invert img { filter: brightness(0) invert(1); opacity: 0.85; } .sherlock-row__engine { color: var(--aise-text); font-weight: 500; } .sherlock-row__verdict { width: 8px; height: 8px; border-radius: 50%; justify-self: center; border: 1px solid var(--aise-text-subtle); background: transparent; } .sherlock-row__verdict--named { background: var(--sh-green); border-color: var(--sh-green); box-shadow: 0 0 8px var(--sh-green-dim); } .sherlock-row__label { color: var(--sh-green); font-size: 12px; } .sherlock-row__label--muted { color: var(--aise-text-subtle); font-style: italic; } .sherlock-row__brands { color: var(--aise-text-muted); font-size: 12.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sherlock-row__brands em { font-style: normal; color: var(--aise-text-subtle); padding: 0 4px; } .sherlock-panel__footer { display: flex; align-items: center; gap: 12px; padding: 14px 24px; border-top: 1px solid var(--aise-border); background: rgba(255, 255, 255, 0.015); font-family: var(--aise-mono); font-size: 12.5px; flex-wrap: wrap; } .sherlock-panel__you { color: var(--aise-text-subtle); } .sherlock-panel__verdict { color: oklch(0.72 0.14 30); font-weight: 600; padding: 3px 8px; border-radius: 4px; background: color-mix(in srgb, oklch(0.72 0.14 30) 12%, transparent); } .sherlock-panel__sov { margin-left: auto; color: var(--aise-text-muted); } .sherlock-panel__sov strong { color: var(--aise-text); font-weight: 600; } /* ── Also tested strip ───────────────────────────────────── */ .sherlock-also { margin-top: 28px; padding: 14px 20px; border: 1px dashed var(--aise-border); border-radius: 10px; background: rgba(255, 255, 255, 0.015); display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; font-family: var(--aise-mono); font-size: 12px; color: var(--aise-text-subtle); } .sherlock-also__label { color: var(--aise-text-muted); text-transform: uppercase; letter-spacing: 0.08em; font-size: 10px; font-weight: 600; } .sherlock-also__q { color: var(--aise-text-muted); } .sherlock-also__sep { opacity: 0.4; } .sherlock-also__more { color: var(--aise-accent-300); font-weight: 600; } /* ── How it works ────────────────────────────────────────── */ .sherlock-how { padding: 80px 20px; border-top: 1px solid var(--aise-border); } .sherlock-how__inner { max-width: 1080px; margin: 0 auto; } .sherlock-how__label { font-family: var(--aise-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aise-accent-300); margin-bottom: var(--aise-space-4); } .sherlock-how__heading { font-family: var(--aise-sans); font-size: clamp(28px, 3.8vw, 42px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--aise-text); margin: 0 0 var(--aise-space-10) 0; max-width: 720px; } .sherlock-how__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; } .sherlock-how__step { padding: 24px 20px; border: 1px solid var(--aise-border); border-radius: 12px; background: rgba(255, 255, 255, 0.015); transition: background 0.2s, border-color 0.2s; } .sherlock-how__step:hover { background: rgba(255, 255, 255, 0.03); border-color: var(--aise-border-strong); } .sherlock-how__num { font-family: var(--aise-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--aise-accent-300); margin-bottom: var(--aise-space-4); } .sherlock-how__title { font-family: var(--aise-sans); font-size: 16px; font-weight: 600; color: var(--aise-text); margin-bottom: var(--aise-space-3); line-height: 1.3; } .sherlock-how__desc { font-size: 13.5px; line-height: 1.6; color: var(--aise-text-muted); margin: 0; } /* ── CTA ─────────────────────────────────────────────────── */ .sherlock-cta { position: relative; padding: 100px 20px 120px; border-top: 1px solid var(--aise-border); overflow: hidden; } .sherlock-cta__glow { position: absolute; bottom: -300px; left: 50%; transform: translateX(-50%); width: 900px; height: 500px; background: radial-gradient(closest-side, rgba(139,124,248,0.15), transparent 70%); pointer-events: none; } .sherlock-cta__inner { position: relative; max-width: 720px; margin: 0 auto; text-align: center; } .sherlock-cta__h2 { font-family: var(--aise-sans); font-size: clamp(32px, 4.5vw, 48px); font-weight: 700; letter-spacing: -0.03em; line-height: 1.1; color: var(--aise-text); margin: 0 0 var(--aise-space-5) 0; } .sherlock-cta__sub { font-size: 16px; line-height: 1.55; color: var(--aise-text-muted); max-width: 560px; margin: 0 auto var(--aise-space-7); } .sherlock-cta__hint { margin-top: var(--aise-space-5); font-family: var(--aise-mono); font-size: 12px; color: var(--aise-text-subtle); } /* ── Active nav link ─────────────────────────────────────── */ .nav__link--active { color: var(--aise-text); position: relative; } .nav__link--active::after { content: ""; position: absolute; bottom: -4px; left: 0; right: 0; height: 2px; background: var(--aise-accent-500); border-radius: 2px; } /* ── What Sherlock produces (the Report) ─────────────────── */ .sherlock-report { padding: 88px 20px 32px; border-top: 1px solid var(--aise-border); } .sherlock-report__inner { max-width: 1080px; margin: 0 auto; } .sherlock-report__label { font-family: var(--aise-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aise-accent-300); margin-bottom: var(--aise-space-4); } .sherlock-report__heading { font-family: var(--aise-sans); font-size: clamp(28px, 3.8vw, 42px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--aise-text); margin: 0 0 var(--aise-space-4) 0; } .sherlock-report__sub { color: var(--aise-text-muted); font-size: 16px; line-height: 1.6; max-width: 640px; margin: 0 0 var(--aise-space-10) 0; } .sherlock-report__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; } .sherlock-report__item { padding: 24px 20px; border: 1px solid var(--aise-border); border-radius: 12px; background: rgba(255, 255, 255, 0.015); transition: background 0.2s, border-color 0.2s; } .sherlock-report__item:hover { background: rgba(255, 255, 255, 0.03); border-color: var(--aise-border-strong); } .sherlock-report__num { font-family: var(--aise-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.1em; color: var(--aise-accent-300); margin-bottom: var(--aise-space-4); } .sherlock-report__title { font-family: var(--aise-sans); font-size: 15px; font-weight: 600; color: var(--aise-text); margin-bottom: var(--aise-space-3); line-height: 1.3; } .sherlock-report__desc { font-size: 13px; line-height: 1.55; color: var(--aise-text-muted); margin: 0; } .sherlock-report__verify { margin-top: var(--aise-space-8); font-family: var(--aise-mono); font-size: 12px; color: var(--aise-text-subtle); letter-spacing: 0.02em; } /* ── How Sherlock runs during the program ────────────────── */ .sherlock-role { padding: 64px 20px; border-top: 1px solid var(--aise-border); } .sherlock-role__inner { max-width: 1080px; margin: 0 auto; } .sherlock-role__label { font-family: var(--aise-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aise-accent-300); margin-bottom: var(--aise-space-4); } .sherlock-role__heading { font-family: var(--aise-sans); font-size: clamp(28px, 3.8vw, 42px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--aise-text); margin: 0 0 var(--aise-space-10) 0; max-width: 720px; } .sherlock-role__list { display: flex; flex-direction: column; border-top: 1px solid var(--aise-border); } .sherlock-role__row { display: grid; grid-template-columns: 160px 1fr; gap: 24px; padding: 20px 0; border-bottom: 1px solid var(--aise-border); align-items: baseline; } .sherlock-role__when { font-family: var(--aise-mono); font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--aise-accent-300); } .sherlock-role__what { color: var(--aise-text); font-size: 15.5px; line-height: 1.55; } /* ── 5 engines strip ─────────────────────────────────────── */ .sherlock-engines { padding: 64px 20px; border-top: 1px solid var(--aise-border); } .sherlock-engines__inner { max-width: 1080px; margin: 0 auto; } .sherlock-engines__label { font-family: var(--aise-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aise-accent-300); margin-bottom: var(--aise-space-4); } .sherlock-engines__heading { font-family: var(--aise-sans); font-size: clamp(28px, 3.8vw, 42px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.15; color: var(--aise-text); margin: 0 0 var(--aise-space-10) 0; } .sherlock-engines__grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; } .sherlock-engines__cell { padding: 20px 16px; border: 1px solid var(--aise-border); border-radius: 12px; background: rgba(255, 255, 255, 0.015); display: flex; flex-direction: column; gap: 10px; } .sherlock-engines__logo { width: 28px; height: 28px; display: inline-flex; align-items: center; justify-content: center; } .sherlock-engines__logo img { width: 100%; height: 100%; object-fit: contain; } .sherlock-engines__name { font-family: var(--aise-sans); font-size: 14.5px; font-weight: 600; color: var(--aise-text); } .sherlock-engines__note { font-size: 12.5px; line-height: 1.5; color: var(--aise-text-muted); } /* ── Honesty — what Sherlock does NOT do ─────────────────── */ .sherlock-honesty { padding: 64px 20px 80px; border-top: 1px solid var(--aise-border); } .sherlock-honesty__inner { max-width: 780px; margin: 0 auto; } .sherlock-honesty__label { font-family: var(--aise-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase; color: var(--aise-text-subtle); margin-bottom: var(--aise-space-4); } .sherlock-honesty__heading { font-family: var(--aise-sans); font-size: clamp(26px, 3.4vw, 36px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.2; color: var(--aise-text); margin: 0 0 var(--aise-space-6) 0; } .sherlock-honesty__body { color: var(--aise-text-muted); font-size: 16px; line-height: 1.65; margin: 0; } /* ── Mobile ──────────────────────────────────────────────── */ @media (max-width: 720px) { .sherlock-hero { padding: 72px 20px 32px; } .sherlock-hero__h1 { font-size: 32px; line-height: 1.1; } .sherlock-hero__sub { font-size: 15px; } .sherlock-panel__body { padding: 18px 14px 14px; } .sherlock-panel__query { font-size: 13px; } .sherlock-row { grid-template-columns: 18px 1fr auto; grid-template-rows: auto auto; row-gap: 4px; padding: 10px 6px; font-size: 12px; } .sherlock-row__engine { grid-column: 2; } .sherlock-row__verdict { grid-column: 3; } .sherlock-row__label { grid-column: 2 / 4; grid-row: 2; font-size: 11px; } .sherlock-row__brands { grid-column: 2 / 4; grid-row: 3; font-size: 11.5px; white-space: normal; } .sherlock-row[data-named="false"] .sherlock-row__brands { display: none; } .sherlock-panel__footer { padding: 12px 16px; font-size: 11.5px; gap: 8px; } .sherlock-panel__sov { margin-left: 0; width: 100%; } .sherlock-also { font-size: 11px; padding: 12px 14px; } .sherlock-how { padding: 56px 20px; } .sherlock-how__grid { grid-template-columns: 1fr; gap: 12px; } .sherlock-report { padding: 56px 20px 24px; } .sherlock-report__grid { grid-template-columns: 1fr; gap: 12px; } .sherlock-role { padding: 48px 20px; } .sherlock-role__row { grid-template-columns: 1fr; gap: 6px; padding: 16px 0; } .sherlock-engines { padding: 48px 20px; } .sherlock-engines__grid { grid-template-columns: 1fr 1fr; gap: 10px; } .sherlock-honesty { padding: 48px 20px 64px; } .sherlock-honesty__body { font-size: 15px; } .sherlock-cta { padding: 72px 20px 88px; } .sherlock-cta__h2 { font-size: 30px; } }