Files
vibn-frontend/app/styles/justine/01-homepage.css
Mark Henderson 651ddf1e11 Rip out Theia, ship P5.1 attach E2E + Justine UI work-in-progress
Theia rip-out:
- Delete app/api/theia-auth/route.ts (Traefik ForwardAuth shim)
- Delete app/api/projects/[projectId]/workspace/route.ts and
  app/api/projects/prewarm/route.ts (Cloud Run Theia provisioning)
- Delete lib/cloud-run-workspace.ts and lib/coolify-workspace.ts
- Strip provisionTheiaWorkspace + theiaWorkspaceUrl/theiaAppUuid/
  theiaError from app/api/projects/create/route.ts response
- Remove Theia callbackUrl branch in app/auth/page.tsx
- Drop "Open in Theia" button + xterm/Theia PTY copy in build/page.tsx
- Drop theiaWorkspaceUrl from deployment/page.tsx Project type
- Strip Theia IDE line + theia-code-os from advisor + agent-chat
  context strings
- Scrub Theia mention from lib/auth/workspace-auth.ts comment

P5.1 (custom apex domains + DNS):
- lib/coolify.ts + lib/opensrs.ts: nameserver normalization, OpenSRS
  XML auth, Cloud DNS plumbing
- scripts/smoke-attach-e2e.ts: full prod GCP + sandbox OpenSRS +
  prod Coolify smoke covering register/zone/A/NS/PATCH/cleanup

In-progress (Justine onboarding/build, MVP setup, agent telemetry):
- New (justine)/stories, project (home) layouts, mvp-setup, run, tasks
  routes + supporting components
- Project shell + sidebar + nav refactor for the Stackless palette
- Agent session API hardening (sessions, events, stream, approve,
  retry, stop) + atlas-chat, advisor, design-surfaces refresh
- New scripts/sync-db-url-from-coolify.mjs +
  scripts/prisma-db-push.mjs + docker-compose.local-db.yml for
  local Prisma workflows
- lib/dev-bypass.ts, lib/chat-context-refs.ts, lib/prd-sections.ts
- Misc: stories CSS, debug/prisma route, modal-theme, BuildLivePlanPanel

Made-with: Cursor
2026-04-22 18:05:01 -07:00

357 lines
8.1 KiB
CSS
Raw Blame History

This file contains ambiguous Unicode characters
This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.
/**
* Verbatim from justine/01_homepage.html <style>, scoped under [data-justine].
* Do not mix Tailwind/shadcn tokens on surfaces inside this root.
*/
[data-justine] {
--ink: #1a1a1a;
--ink2: #2c2c2a;
--ink3: #444441;
--mid: #6b7280;
--muted: #9ca3af;
--stone: #b4b2a9;
--parch: #d3d1c7;
--cream: #f1efe8;
--paper: #f7f4ee;
--white: #ffffff;
--border: #e5e7eb;
--serif: var(--font-justine-jakarta), "Plus Jakarta Sans", sans-serif;
--sans: var(--font-justine-jakarta), "Plus Jakarta Sans", sans-serif;
font-family: var(--sans);
background: linear-gradient(to bottom, #fafafe, #f0eeff);
min-height: 100vh;
color: var(--ink);
}
[data-justine] > main {
flex: 1;
width: 100%;
}
/* Only Justines static homepage needs the full * reset; it beats Tailwind utilities if applied to main. */
[data-justine] .justine-home-page * {
box-sizing: border-box;
margin: 0;
padding: 0;
}
[data-justine] .f {
font-family: var(--serif);
}
[data-justine] nav {
background: rgba(250, 250, 250, 0.95);
border-bottom: 1px solid var(--border);
padding: 0 52px;
height: 62px;
display: flex;
align-items: center;
justify-content: space-between;
position: sticky;
top: 0;
z-index: 50;
}
[data-justine] .nav-links {
display: flex;
gap: 32px;
align-items: center;
}
[data-justine] .btn-ink {
background: linear-gradient(135deg, #2e2a5e, #4338ca);
color: #ffffff;
border: none;
border-radius: 8px;
padding: 9px 22px;
font-family: var(--sans);
font-size: 13.5px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 10px 25px rgba(30, 27, 75, 0.15);
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
[data-justine] .btn-ink:hover {
box-shadow: 0 10px 25px rgba(30, 27, 75, 0.15), 0 0 0 6px rgba(99, 102, 241, 0.15);
transform: translateY(-1px);
}
[data-justine] .btn-ink-lg {
background: linear-gradient(135deg, #2e2a5e, #4338ca);
color: #ffffff;
border: none;
border-radius: 10px;
padding: 15px 36px;
font-family: var(--sans);
font-size: 15px;
font-weight: 600;
cursor: pointer;
box-shadow: 0 10px 25px rgba(30, 27, 75, 0.15);
transition: box-shadow 0.2s ease, transform 0.2s ease;
}
[data-justine] .btn-ink-lg:hover {
box-shadow: 0 10px 25px rgba(30, 27, 75, 0.15), 0 0 0 6px rgba(99, 102, 241, 0.15);
transform: translateY(-1px);
}
[data-justine] .gradient-em {
background: linear-gradient(to right, #6366f1, #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-style: italic;
}
[data-justine] .gradient-text {
background: linear-gradient(to right, #6366f1, #8b5cf6);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
[data-justine] .gradient-num {
background: linear-gradient(135deg, #2e2a5e, #4338ca);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
[data-justine] .empathy-card {
background: var(--white);
border: 1px solid var(--border);
border-left: 3px solid rgba(99, 102, 241, 0.8);
border-radius: 12px;
padding: 18px 20px;
display: flex;
gap: 14px;
align-items: flex-start;
box-shadow: 0 10px 30px rgba(30, 27, 75, 0.05);
transition: border-color 0.2s ease, background 0.2s ease;
}
[data-justine] .empathy-card:hover {
border-color: #6366f1;
background: #fafaff;
}
[data-justine] .hero-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 96px;
align-items: center;
}
[data-justine] .empathy-grid {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 72px;
align-items: center;
}
[data-justine] .phase-grid {
display: grid;
grid-template-columns: 1fr 1fr;
border: 1px solid rgba(99, 102, 241, 0.2);
border-radius: 14px;
overflow: hidden;
}
[data-justine] .wyg-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
[data-justine] .quote-grid {
display: grid;
grid-template-columns: 1fr 1.6fr 1fr;
gap: 28px;
align-items: center;
margin-bottom: 20px;
}
[data-justine] .stats-grid {
display: grid;
grid-template-columns: 1fr 1fr 1fr 1fr;
}
[data-justine] .footer-tagline {
display: block;
font-size: 12px;
color: var(--muted);
margin-top: 4px;
font-family: var(--sans);
}
[data-justine] .hamburger {
display: none;
flex-direction: column;
gap: 5px;
background: none;
border: none;
cursor: pointer;
padding: 6px;
}
[data-justine] .hamburger span {
display: block;
width: 22px;
height: 2px;
background: var(--ink);
border-radius: 2px;
transition: transform 0.25s ease, opacity 0.25s ease;
}
[data-justine] .hamburger.open span:nth-child(1) {
transform: translateY(7px) rotate(45deg);
}
[data-justine] .hamburger.open span:nth-child(2) {
opacity: 0;
}
[data-justine] .hamburger.open span:nth-child(3) {
transform: translateY(-7px) rotate(-45deg);
}
[data-justine] .mobile-menu {
display: none;
position: fixed;
top: 62px;
left: 0;
right: 0;
background: rgba(250, 250, 250, 0.98);
border-bottom: 1px solid var(--border);
padding: 20px 24px 28px;
z-index: 49;
flex-direction: column;
gap: 0;
box-shadow: 0 8px 24px rgba(30, 27, 75, 0.08);
}
[data-justine] .mobile-menu.open {
display: flex;
}
[data-justine] .mobile-menu a {
font-size: 15px;
color: var(--ink);
text-decoration: none;
padding: 13px 0;
border-bottom: 1px solid var(--border);
font-weight: 500;
}
[data-justine] .mobile-menu a:last-of-type {
border-bottom: none;
}
[data-justine] .mobile-menu .mobile-menu-cta {
margin-top: 18px;
}
[data-justine] footer {
background: rgba(250, 250, 250, 0.95);
border-top: 1px solid var(--border);
padding: 32px 52px;
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
}
[data-justine] .footer-links {
display: flex;
gap: 28px;
}
@media (max-width: 768px) {
[data-justine] nav {
padding: 0 20px;
}
[data-justine] .nav-links {
display: none;
}
[data-justine] .nav-right-btns {
display: none !important;
}
[data-justine] .hamburger {
display: flex;
}
[data-justine] .hero-grid {
grid-template-columns: 1fr;
gap: 44px;
}
[data-justine] .hero-section {
padding: 52px 24px 48px !important;
}
[data-justine] .empathy-section {
padding: 56px 24px !important;
}
[data-justine] .empathy-grid {
grid-template-columns: 1fr;
gap: 36px;
}
[data-justine] .how-section {
padding: 64px 24px !important;
}
[data-justine] .phase-grid {
grid-template-columns: 1fr;
}
[data-justine] .phase-grid > div {
border-right: none !important;
padding: 28px 24px !important;
}
[data-justine] .wyg-grid {
grid-template-columns: 1fr;
}
[data-justine] .wyg-grid > div {
border-right: none !important;
border-bottom: 1px solid var(--border);
padding: 32px 24px !important;
}
[data-justine] .wyg-grid > div:last-child {
border-bottom: none;
}
[data-justine] .wyg-section {
padding: 0 24px !important;
}
[data-justine] .quote-grid {
grid-template-columns: 1fr;
}
[data-justine] .quote-side {
display: none !important;
}
[data-justine] .quote-section {
padding: 32px 24px 28px !important;
}
[data-justine] .stats-grid {
grid-template-columns: 1fr 1fr;
}
[data-justine] .stats-grid > div {
padding: 28px 16px !important;
}
[data-justine] .stats-grid > div:nth-child(odd) {
padding-left: 0 !important;
}
[data-justine] .stats-grid > div:nth-child(3),
[data-justine] .stats-grid > div:nth-child(4) {
border-top: 1px solid var(--border);
}
[data-justine] .stats-grid > div:nth-child(even) {
border-right: none !important;
}
[data-justine] .stats-section {
padding: 0 24px !important;
}
[data-justine] .cta-section {
padding: 56px 20px !important;
}
[data-justine] .cta-card {
padding: 44px 28px !important;
}
[data-justine] .hero-h1 {
font-size: 40px !important;
line-height: 1.1 !important;
}
[data-justine] .hero-sub {
font-size: 15px !important;
}
[data-justine] footer {
display: flex !important;
flex-direction: column;
gap: 20px;
text-align: center;
padding: 32px 24px !important;
}
[data-justine] .footer-links {
flex-wrap: wrap;
justify-content: center;
}
}