/* ========================================================================== * ModSeed — page-landing.css (landing page ONLY; loaded AFTER style.css) * --------------------------------------------------------------------------- * Ports the exact look of the workspace landing (src/components/platform/ * landing.tsx). Contains: * 1. The arbitrary-value Tailwind utilities landing.tsx uses that the * shared subset in style.css doesn't define (same class names, so the * markup ports 1:1 from the JSX). * 2. Small fidelity overrides where a shared component class in style.css * diverges from the workspace's shadcn/ui rendering (Card radius, * Badge metrics, button paddings, the FAQ accordion's open list look). * All overrides are scoped to #main so no other page is affected. * ========================================================================== */ /* ── 1. Missing Tailwind utilities (arbitrary values used by the markup) ──── */ .h-full { height: 100%; } .mt-auto { margin-top: auto; } .leading-snug { line-height: 1.375; } .py-px { padding-top: 1px; padding-bottom: 1px; } .py-6 { padding-top: 24px; padding-bottom: 24px; } .text-\[7px\] { font-size: 7px; } .sm\:text-\[8px\] { font-size: 8px; } .sm\:text-\[10px\] { font-size: 10px; } .sm\:aspect-\[16\/10\] { aspect-ratio: 16 / 10; } .w-\[26\%\] { width: 26%; } .left-\[6\%\] { left: 6%; } .left-\[34\%\] { left: 34%; } .left-\[38\%\] { left: 38%; } .left-\[70\%\] { left: 70%; } .top-\[6\%\] { top: 6%; } .top-\[8\%\] { top: 8%; } .top-\[27\%\] { top: 27%; } .top-\[36\%\] { top: 36%; } .top-\[50\%\] { top: 50%; } .top-\[74\%\] { top: 74%; } .text-muted-foreground\/60 { color: color-mix(in oklab, var(--muted-foreground) 60%, transparent); } .underline { text-decoration: underline; } .underline-offset-2 { text-underline-offset: 2px; } .hover\:text-foreground:hover { color: var(--foreground); } /* icon sizing — style.css's .icon (16px) wins over .size-* by source order, so re-assert the JSX icon sizes with higher specificity */ .icon.size-2 { width: 8px; height: 8px; } .icon.size-2\.5 { width: 10px; height: 10px; } .icon.size-3 { width: 12px; height: 12px; } .icon.size-3\.5 { width: 14px; height: 14px; } .icon.size-4 { width: 16px; height: 16px; } .icon.size-5 { width: 20px; height: 20px; } /* ── Hero / CTA glow accents (workspace arbitrary values) ─────────────────── */ .hero-glow-1 { top: -96px; left: 50%; transform: translateX(-50%); width: 576px; height: 576px; /* size-[36rem] */ } .hero-glow-2 { top: 160px; right: -128px; /* top-40 -right-32 */ width: 384px; height: 384px; /* size-96 */ } .cta-glow { top: -80px; left: 50%; transform: translateX(-50%); /* -top-20 */ width: 384px; height: 384px; /* size-96 */ } /* ── 2. Fidelity overrides (scoped to the landing page's
) ──────────── */ /* workspace Card = rounded-xl (radius + 4px); style.css .card uses --radius */ #main .card { border-radius: calc(var(--radius) + 4px); } /* workspace Badge = rounded-md px-2 py-0.5 text-xs font-medium */ #main .badge { border-radius: calc(var(--radius) - 2px); padding: 2px 8px; font-weight: 500; line-height: 16px; /* renders 22px tall like the source */ } /* style.css .card re-asserts border-color + box-shadow AFTER the border-*/ /* shadow-* utilities (source order), which would flatten the plan-card */ /* tone borders/shadows — re-apply them with higher specificity */ #main .border-border\/70 { border-color: color-mix(in oklab, var(--border) 70%, transparent); } #main .border-amber-500\/50 { border-color: color-mix(in oklab, var(--amber-500) 50%, transparent); } #main .border-violet-500\/40 { border-color: color-mix(in oklab, var(--violet-500) 40%, transparent); } #main .card.shadow-lg { box-shadow: 0 10px 15px -3px oklch(0 0 0 / 0.1), 0 4px 6px -4px oklch(0 0 0 / 0.1); } #main .card.shadow-lg.shadow-amber-500\/5 { box-shadow: 0 10px 15px -3px oklch(0 0 0 / 0.1), 0 4px 6px -4px oklch(0 0 0 / 0.1), 0 10px 15px -3px color-mix(in oklab, var(--amber-500) 5%, transparent); } #main .card.shadow-lg.shadow-violet-500\/5 { box-shadow: 0 10px 15px -3px oklch(0 0 0 / 0.1), 0 4px 6px -4px oklch(0 0 0 / 0.1), 0 10px 15px -3px color-mix(in oklab, var(--violet-500) 5%, transparent); } /* one-time extra tiles: CardContent p-5 (20px) — .card-content's 24px wins */ #main .card-content.p-5 { padding: 20px; } /* In the workspace's cascade, .bg-grid resolves AFTER the gradient utility, so the final CTA panel shows the GRID texture (the amber wash comes from the blurred glow blob inside, not the gradient). style.css orders them the other way — re-assert the grid on panels carrying both classes. */ #main .bg-grid.bg-gradient-to-br { background-image: linear-gradient(to right, oklch(1 0 0 / 0.035) 1px, transparent 1px), linear-gradient(to bottom, oklch(1 0 0 / 0.035) 1px, transparent 1px); background-size: 32px 32px; } :root:not(.dark) #main .bg-grid.bg-gradient-to-br { background-image: linear-gradient(to right, oklch(0.21 0.006 285.885 / 0.05) 1px, transparent 1px), linear-gradient(to bottom, oklch(0.21 0.006 285.885 / 0.05) 1px, transparent 1px); } /* shadcn buttons: size-lg is px-6 but px-4 when it contains an icon (has-[>svg]:px-4), hero buttons are h-12 px-8-with-icon → 16px rendered */ #main .btn-lg { padding-left: 24px; padding-right: 24px; } #main .btn-lg:has(> .icon) { padding-left: 16px; padding-right: 16px; } #main .btn-hero { height: 48px; padding-left: 16px; padding-right: 16px; font-size: 16px; } /* FAQ accordion — the workspace shadcn Accordion renders an OPEN list: no outer box, items divided by border-b (last: none), trigger py-4 with no horizontal padding, content pb-4, 16px trigger gap */ #main .accordion { border: none; border-radius: 0; background: transparent; } #main .accordion-item + .accordion-item { border-top: none; } #main .accordion-item { border-bottom: 1px solid var(--border); } #main .accordion-item:last-child { border-bottom: none; } #main .accordion-trigger { padding: 16px 0; gap: 16px; } #main .accordion-content { padding: 0 0 16px; }