Files
vibn-frontend/app/styles/justine/01-homepage.css
Mark Henderson 6f79a88abd fix(gitea-bot): add write:organization scope so bot can create repos
Without this the bot PAT 403s on POST /orgs/{org}/repos, which is
the single most important operation — creating new project repos
inside the workspace's Gitea org.

Made-with: Cursor
2026-04-21 11:05:55 -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;
}
}