/* AIPIP site chrome — shared across all aipip.art pages.
*
* Compliance marquee, top nav, and footer. Lifted from the original
* Claude design output so it's identical on every page. Future nav
* changes happen here once, not 9 times.
*
* Requires /css/tokens.css to be loaded first (uses CSS custom properties
* defined there).
*
* Usage:
*
*
*/
/* ───────────────── compliance marquee ───────────────── */
.compliance {
border-bottom: 1px solid var(--border);
background: rgba(7, 9, 12, 0.85);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-dim);
letter-spacing: 0.08em;
overflow: hidden;
position: sticky;
top: 0;
z-index: 50;
}
.marquee {
display: flex;
white-space: nowrap;
padding: 9px 0;
animation: scroll 60s linear infinite;
gap: 48px;
}
.marquee span { color: var(--text-dim); flex-shrink: 0; }
.marquee .alert { color: var(--accent-yellow); }
.marquee .crit { color: var(--accent-red); }
.marquee .sep { color: var(--text-faint); }
@keyframes scroll {
from { transform: translateX(0); }
to { transform: translateX(-50%); }
}
@keyframes pulse {
0%, 100% { opacity: 1; }
50% { opacity: 0.3; }
}
/* ───────────────── top nav ───────────────── */
.nav-wrap {
max-width: 1180px;
margin: 0 auto;
padding: 0 32px;
position: relative;
z-index: 2;
}
.nav {
display: flex;
align-items: center;
justify-content: space-between;
padding: 28px 0 0;
flex-wrap: wrap;
gap: 12px;
}
.nav .brand {
display: flex;
align-items: center;
gap: 10px;
font-family: var(--font-mono);
font-size: 14px;
letter-spacing: 0.24em;
color: var(--text-strong);
font-weight: 800;
text-decoration: none;
}
.nav .brand:hover { text-decoration: none; }
.nav .brand .mark {
width: 26px; height: 26px;
color: var(--text-strong);
display: inline-flex;
align-items: center;
justify-content: center;
}
.nav .brand .mark svg { width: 100%; height: 100%; display: block; }
.nav .links {
display: flex;
align-items: center;
gap: 4px;
flex-wrap: wrap;
}
.nav .links a {
font-family: var(--font-mono);
font-size: 12px;
color: var(--text-muted);
padding: 8px 14px;
letter-spacing: 0.06em;
text-transform: uppercase;
border: 1px solid transparent;
text-decoration: none;
}
.nav .links a:hover {
color: var(--text-strong);
border-color: var(--border);
text-decoration: none;
}
.nav .links a.active,
body[data-page="keynote"] .nav .links a[data-nav="keynote"],
body[data-page="glassdoor"] .nav .links a[data-nav="glassdoor"],
body[data-page="quiz"] .nav .links a[data-nav="quiz"],
body[data-page="handbook"] .nav .links a[data-nav="handbook"],
body[data-page="org-chart"] .nav .links a[data-nav="org-chart"],
body[data-page="leaked-emails"] .nav .links a[data-nav="leaked-emails"],
body[data-page="press"] .nav .links a[data-nav="press"],
body[data-page="about"] .nav .links a[data-nav="about"] {
color: var(--accent-yellow);
border-color: var(--border);
}
.nav .links .login {
color: var(--text-dim);
border: 1px solid var(--border);
margin-left: 8px;
}
.nav .links .login:hover {
color: var(--accent-yellow);
border-color: var(--accent-yellow);
}
/* ───────────────── footer ───────────────── */
.site-footer {
margin-top: 64px;
padding: 40px 0 32px;
border-top: 1px solid var(--border);
display: flex;
flex-direction: column;
align-items: center;
gap: 18px;
max-width: 1180px;
margin-left: auto;
margin-right: auto;
padding-left: 32px;
padding-right: 32px;
}
.site-footer .footer-links {
display: flex;
flex-wrap: wrap;
gap: 0;
justify-content: center;
}
.site-footer .footer-links a {
color: var(--text-dim);
font-size: 12px;
padding: 0 14px;
border-right: 1px solid var(--text-faint);
letter-spacing: 0.04em;
text-decoration: none;
}
.site-footer .footer-links a:last-child { border-right: 0; }
.site-footer .footer-links a:hover {
color: var(--accent-yellow);
text-decoration: none;
}
.site-footer .copy {
font-family: var(--font-mono);
font-size: 11px;
color: var(--text-faint);
letter-spacing: 0.04em;
text-align: center;
}
/* ───────────────── App Store button (canonical) ─────────────────
* Single-source white "Download on the App Store" pill used across
* every page that has an App Store CTA. To use:
*
*
*
*
*
Download on the
*
App Store
*