/* ============================================================================
Vedika Intelligence — Product Page Component Layer
----------------------------------------------------------------------------
This file is the PRODUCT-PAGE component layer that sits ON TOP of the design
tokens defined in css/redesign.css. It does NOT redefine the palette — every
colour is consumed via var(--primary-purple), var(--accent-pink), etc.
Aesthetic direction: "luminous laboratory". Light, generous surfaces with the
signature violet→pink gradient as the one bold accent, a GitHub-dark terminal
for code, crisp HTTP method chips, and a refined device frame (phone / browser)
for the live try-it preview.
Consumed tokens (from redesign.css :root):
--primary-purple #7C3AED --primary-dark #5B21B6 --primary-light #A78BFA
--accent-pink #EC4899 --accent-orange #F97316
--success-green #10B981 --warning-yellow #F59E0B --error-red #EF4444
--bg #FAFAFA --surface #FFFFFF
--text-primary #111827 --text-secondary #6B7280 --border #E5E7EB
--dark-bg #0F172A
--hero-gradient, --card-gradient, --glass-bg
--shadow-sm/md/lg/glow, --radius-sm/md/lg/full
Fonts (loaded via in the page ):
headings 'Plus Jakarta Sans' 700 / 800
body 'DM Sans'
code/mono 'Fragment Mono'
labels 'Sintony'
============================================================================ */
/* ---------------------------------------------------------------------------
0 · Product-page local tokens (NEW namespaced vars only — palette untouched)
--------------------------------------------------------------------------- */
:root {
/* Indic-safe fallback stacks (Devanagari / Tamil / Telugu / Bengali …) */
--pp-font-head: 'Plus Jakarta Sans', 'Noto Sans Devanagari', 'Noto Sans', system-ui, -apple-system, Segoe UI, sans-serif;
--pp-font-body: 'DM Sans', 'Noto Sans Devanagari', 'Noto Sans Tamil', 'Noto Sans', system-ui, -apple-system, Segoe UI, sans-serif;
--pp-font-mono: 'Fragment Mono', ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", monospace;
--pp-font-label: 'Sintony', 'DM Sans', system-ui, sans-serif;
/* Terminal / code-block palette (GitHub dark — explicit per spec) */
--pp-term-bg: #0d1117;
--pp-term-header: #161b22;
--pp-term-text: #c9d1d9;
--pp-term-muted: #484f58;
--pp-term-line: #21262d; /* subtle internal divider on the dark surface */
/* Focus ring (token from redesign.css btn:focus-visible) */
--pp-focus-ring: 0 0 0 3px rgba(124, 58, 237, 0.25);
/* Tinted surfaces derived from the palette (alpha overlays, not new hues) */
--pp-purple-wash: rgba(124, 58, 237, 0.06);
--pp-purple-wash2: rgba(124, 58, 237, 0.10);
--pp-pink-wash: rgba(236, 72, 153, 0.08);
--pp-line-soft: rgba(17, 24, 39, 0.06);
/* Lift distance reused across hover transforms */
--pp-lift: -4px;
}
/* ---------------------------------------------------------------------------
1 · Base — Indic-safe line-height, body/heading typography
--------------------------------------------------------------------------- */
body {
/* Indic-safe: tall lines keep Devanagari/Tamil matras + conjuncts legible */
line-height: 1.7;
}
.pp-page {
font-family: var(--pp-font-body);
color: var(--text-primary);
background: var(--bg);
-webkit-font-smoothing: antialiased;
text-rendering: optimizeLegibility;
}
.pp-page h1,
.pp-page h2,
.pp-page h3,
.pp-page h4 {
font-family: var(--pp-font-head);
color: var(--text-primary);
letter-spacing: -0.02em;
line-height: 1.12;
}
.pp-section {
max-width: 1180px;
margin: 0 auto;
padding: 3.5rem 1.25rem;
}
.pp-section + .pp-section { padding-top: 1rem; }
/* ---------------------------------------------------------------------------
2 · HERO — .pp-hero / .pp-eyebrow
--------------------------------------------------------------------------- */
.pp-hero {
position: relative;
max-width: 1180px;
margin: 0 auto;
padding: 4.5rem 1.25rem 2.5rem;
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
gap: 3rem;
align-items: center;
overflow: hidden;
}
/* Atmospheric gradient halo behind the hero copy */
.pp-hero::before {
content: "";
position: absolute;
top: -30%;
left: -8%;
width: 460px;
height: 460px;
background: var(--primary-purple, #7C3AED);
filter: blur(120px);
opacity: 0.16;
border-radius: var(--radius-full);
pointer-events: none;
z-index: 0;
}
.pp-hero > * { position: relative; z-index: 1; }
.pp-hero__copy { max-width: 36rem; }
.pp-hero h1 {
font-family: var(--pp-font-head);
font-weight: 800;
font-size: clamp(2.25rem, 5vw, 3.5rem);
line-height: 1.06;
margin: 0.75rem 0 1rem;
}
.pp-hero h1 .pp-grad {
background: var(--primary-purple, #7C3AED);
-webkit-background-clip: text;
background-clip: text;
-webkit-text-fill-color: transparent;
color: transparent;
}
.pp-hero__lede {
font-family: var(--pp-font-body);
font-size: clamp(1rem, 1.4vw, 1.18rem);
color: var(--text-secondary);
line-height: 1.7;
margin: 0 0 1.75rem;
}
.pp-hero__media { min-width: 0; }
/* The eyebrow — labels font, gradient pill with leading dot */
.pp-eyebrow {
display: inline-flex;
align-items: center;
gap: 0.5rem;
font-family: var(--pp-font-label);
font-size: 0.72rem;
font-weight: 700;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--primary-dark);
background: var(--pp-purple-wash2);
border: 1px solid rgba(124, 58, 237, 0.18);
border-radius: var(--radius-full);
padding: 0.35rem 0.85rem;
}
.pp-eyebrow::before {
content: "";
width: 0.5rem;
height: 0.5rem;
border-radius: var(--radius-full);
background: var(--primary-purple, #7C3AED);
box-shadow: 0 0 10px rgba(124, 58, 237, 0.5);
}
/* ---------------------------------------------------------------------------
3 · COUNT PILL — .pp-count-pill (endpoint counts, "N languages", etc.)
--------------------------------------------------------------------------- */
.pp-count-pill {
display: inline-flex;
align-items: baseline;
gap: 0.4rem;
font-family: var(--pp-font-label);
font-size: 0.8rem;
font-weight: 600;
color: var(--text-secondary);
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-full);
padding: 0.3rem 0.8rem;
box-shadow: var(--shadow-sm);
}
.pp-count-pill strong {
font-family: var(--pp-font-head);
font-weight: 800;
font-size: 0.95rem;
color: var(--primary-purple);
}
/* ---------------------------------------------------------------------------
4 · SEARCH — .pp-search (endpoint filter input)
--------------------------------------------------------------------------- */
.pp-search {
position: relative;
display: flex;
align-items: center;
}
.pp-search__icon {
position: absolute;
left: 0.95rem;
width: 1rem;
height: 1rem;
color: var(--text-secondary);
pointer-events: none;
}
.pp-search input,
.pp-search .pp-search__input {
width: 100%;
font-family: var(--pp-font-body);
font-size: 0.95rem;
color: var(--text-primary);
background: var(--surface);
border: 2px solid var(--border);
border-radius: var(--radius-md);
padding: 0.7rem 1rem 0.7rem 2.6rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pp-search input::placeholder { color: var(--text-secondary); }
.pp-search input:focus,
.pp-search .pp-search__input:focus {
outline: none;
border-color: var(--primary-purple);
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.10);
}
/* ---------------------------------------------------------------------------
5 · ENDPOINT LIST — .pp-endpoint-list / -group / -row + method chips
--------------------------------------------------------------------------- */
.pp-endpoint-list {
display: flex;
flex-direction: column;
gap: 1.5rem;
margin-top: 1.5rem;
}
.pp-endpoint-group {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
overflow: hidden;
}
.pp-endpoint-group__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 0.75rem;
padding: 1rem 1.25rem;
background: var(--pp-purple-wash);
border-bottom: 1px solid var(--pp-line-soft);
}
.pp-endpoint-group__title {
font-family: var(--pp-font-head);
font-weight: 700;
font-size: 1.02rem;
color: var(--text-primary);
margin: 0;
}
/* The rows wrapper behaves like a table on wide screens, cards on narrow ones */
.pp-endpoint-group__rows { display: flex; flex-direction: column; }
.pp-endpoint-row {
display: grid;
grid-template-columns: 4.5rem minmax(0, 1.6fr) minmax(0, 2fr) auto;
align-items: center;
gap: 1rem;
padding: 0.85rem 1.25rem;
border-top: 1px solid var(--pp-line-soft);
font-family: var(--pp-font-body);
text-decoration: none;
color: inherit;
cursor: pointer;
transition: background 0.18s ease;
}
.pp-endpoint-group__rows .pp-endpoint-row:first-child { border-top: none; }
.pp-endpoint-row:hover { background: var(--pp-purple-wash); }
.pp-endpoint-row:focus-visible {
outline: none;
box-shadow: inset var(--pp-focus-ring);
}
.pp-endpoint-row__path {
font-family: var(--pp-font-mono);
font-size: 0.86rem;
font-weight: 400;
color: var(--text-primary);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.pp-endpoint-row__path .pp-path-base { color: var(--text-secondary); }
.pp-endpoint-row__summary {
font-size: 0.86rem;
color: var(--text-secondary);
line-height: 1.5;
}
.pp-endpoint-row__action {
justify-self: end;
font-family: var(--pp-font-label);
font-size: 0.78rem;
font-weight: 700;
color: var(--primary-purple);
white-space: nowrap;
}
/* HTTP METHOD CHIPS — GET green / POST blue / DELETE red.
Builds on the .http-* hooks already in redesign.css, but gives a self-contained
chip so these classes also work without the .http-badge base class present. */
.http-get,
.http-post,
.http-put,
.http-patch,
.http-delete {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 3.4rem;
font-family: var(--pp-font-mono);
font-size: 0.68rem;
font-weight: 700;
letter-spacing: 0.04em;
line-height: 1;
padding: 0.32rem 0.5rem;
border-radius: var(--radius-sm);
text-transform: uppercase;
}
.http-get { background: #D1FAE5; color: #065F46; } /* success-green family */
.http-post { background: #DBEAFE; color: #1E40AF; } /* blue */
.http-put,
.http-patch { background: #FEF3C7; color: #92400E; } /* amber (secondary) */
.http-delete { background: #FEE2E2; color: #991B1B; } /* error-red family */
/* ---------------------------------------------------------------------------
6 · TRY-IT PANEL — .pp-tryit / __controls + mode toggle + key/lang/run
--------------------------------------------------------------------------- */
.pp-tryit {
background: var(--surface);
border: 1px solid var(--border);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-md);
overflow: hidden;
}
.pp-tryit__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 1rem;
flex-wrap: wrap;
padding: 1.1rem 1.35rem;
border-bottom: 1px solid var(--pp-line-soft);
background: var(--pp-purple-wash);
}
.pp-tryit__title {
font-family: var(--pp-font-head);
font-weight: 700;
font-size: 1.05rem;
margin: 0;
display: flex;
align-items: center;
gap: 0.55rem;
}
.pp-tryit__body { padding: 1.35rem; }
/* Controls: a responsive grid that stacks to a single column on mobile */
.pp-tryit__controls {
display: grid;
grid-template-columns: auto 1fr auto auto;
align-items: center;
gap: 0.9rem;
margin-bottom: 1.1rem;
}
/* SANDBOX / PROD segmented control — .pp-mode-toggle */
.pp-mode-toggle {
display: inline-flex;
align-items: center;
padding: 0.25rem;
background: var(--bg);
border: 1px solid var(--border);
border-radius: var(--radius-full);
gap: 0.15rem;
}
.pp-mode-toggle button,
.pp-mode-toggle .pp-mode-toggle__opt {
appearance: none;
border: none;
cursor: pointer;
font-family: var(--pp-font-label);
font-size: 0.78rem;
font-weight: 700;
letter-spacing: 0.03em;
color: var(--text-secondary);
background: transparent;
border-radius: var(--radius-full);
padding: 0.42rem 1rem;
transition: color 0.2s ease, background 0.2s ease, box-shadow 0.2s ease;
}
.pp-mode-toggle button:hover,
.pp-mode-toggle .pp-mode-toggle__opt:hover { color: var(--text-primary); }
.pp-mode-toggle button[aria-pressed="true"],
.pp-mode-toggle button.is-active,
.pp-mode-toggle .pp-mode-toggle__opt.is-active {
color: #fff;
background: var(--primary-purple, #7C3AED);
box-shadow: var(--shadow-sm);
}
/* The "prod" half flips to a solid violet when selected to signal real billing */
.pp-mode-toggle button[data-mode="prod"][aria-pressed="true"],
.pp-mode-toggle button[data-mode="prod"].is-active {
background: var(--primary-dark);
}
.pp-mode-toggle button:focus-visible,
.pp-mode-toggle .pp-mode-toggle__opt:focus-visible {
outline: none;
box-shadow: var(--pp-focus-ring);
}
/* API KEY FIELD — .pp-key-field */
.pp-key-field {
position: relative;
display: flex;
align-items: center;
min-width: 0;
}
.pp-key-field input,
.pp-key-field .pp-key-field__input {
width: 100%;
font-family: var(--pp-font-mono);
font-size: 0.85rem;
color: var(--text-primary);
background: var(--surface);
border: 2px solid var(--border);
border-radius: var(--radius-md);
padding: 0.6rem 0.85rem;
transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.pp-key-field input::placeholder { color: var(--text-secondary); font-family: var(--pp-font-body); }
.pp-key-field input:focus {
outline: none;
border-color: var(--primary-purple);
box-shadow: 0 0 0 3px rgba(124, 58, 237, 0.10);
}
/* Disabled in sandbox mode (no key needed) */
.pp-key-field.is-disabled input,
.pp-key-field input:disabled {
background: var(--bg);
color: var(--text-secondary);
cursor: not-allowed;
}
/* LANG SELECT — .pp-lang-select (custom-styled native