/* A24 Labs — Styles Theme variables follow shadcn/ui convention (HSL space-separated) Theme applied via class on */ /* ── Reset ─────────────────────────────────────────────── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } html { -webkit-text-size-adjust: 100%; } body { font-family: var(--font-body, system-ui, sans-serif); background: hsl(var(--background)); color: hsl(var(--foreground)); line-height: 1.6; min-height: 100vh; display: flex; flex-direction: column; } a { color: hsl(var(--accent)); text-decoration: none; } a:hover { text-decoration: underline; } img { max-width: 100%; } /* ── Themes ────────────────────────────────────────────── */ .a24-classic { --background: 0 0% 98%; --foreground: 0 0% 0%; --card: 0 0% 100%; --card-foreground: 0 0% 0%; --muted: 0 0% 93%; --muted-foreground: 0 0% 40%; --accent: 0 100% 44%; --accent-foreground: 0 0% 100%; --border: 0 0% 85%; --radius: 0px; --font-heading: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; --font-body: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; } .modern-dark { --background: 0 0% 4%; --foreground: 0 0% 93%; --card: 0 0% 7%; --card-foreground: 0 0% 93%; --muted: 0 0% 14%; --muted-foreground: 0 0% 64%; --accent: 217 91% 60%; --accent-foreground: 0 0% 100%; --border: 0 0% 18%; --radius: 0.5rem; --font-heading: "Inter", system-ui, sans-serif; --font-body: "Inter", system-ui, sans-serif; } .editorial { --background: 30 33% 94%; --foreground: 18 8% 16%; --card: 30 33% 97%; --card-foreground: 18 8% 16%; --muted: 30 20% 87%; --muted-foreground: 18 8% 35%; --accent: 10 55% 51%; --accent-foreground: 0 0% 100%; --border: 30 15% 80%; --radius: 0px; --font-heading: "Playfair Display", Georgia, serif; --font-body: "Inter", Georgia, serif; } /* ── Layout ────────────────────────────────────────────── */ header { position: sticky; top: 0; z-index: 50; border-bottom: 1px solid hsl(var(--border)); background: hsl(var(--background) / 0.95); backdrop-filter: blur(8px); } .header-inner { max-width: 1500px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 0 4vw; height: 64px; } .logo { font-size: 1.25rem; font-weight: 700; color: hsl(var(--foreground)); letter-spacing: -0.02em; } .logo:hover { text-decoration: none; } nav { display: flex; gap: 1.5rem; } nav a { font-size: 0.875rem; font-weight: 500; color: hsl(var(--muted-foreground)); } nav a:hover { color: hsl(var(--foreground)); text-decoration: none; } .login-menu { position: relative; } .login-menu button { font-size: 0.875rem; padding: 6px 16px; background: hsl(var(--card)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); cursor: pointer; font-weight: 500; } .login-menu button:hover { background: hsl(var(--muted)); } .login-dropdown { position: absolute; right: 0; top: 100%; margin-top: 8px; min-width: 12rem; background: hsl(var(--card)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); box-shadow: 0 4px 12px rgba(0,0,0,0.1); z-index: 100; } .login-dropdown a { display: block; padding: 10px 16px; font-size: 0.875rem; color: hsl(var(--foreground)); border-radius: var(--radius); } .login-dropdown a:hover { background: hsl(var(--muted)); text-decoration: none; } main { flex: 1; } footer { border-top: 1px solid hsl(var(--border)); } .footer-inner { max-width: 1500px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 2rem 4vw; gap: 1rem; flex-wrap: wrap; } footer p { font-size: 0.875rem; color: hsl(var(--muted-foreground)); } footer nav { display: flex; gap: 1.5rem; } footer nav a { font-size: 0.875rem; color: hsl(var(--muted-foreground)); } /* ── Content sections ──────────────────────────────────── */ .hero { max-width: 1500px; margin: 0 auto; padding: 6rem 4vw 4rem; } .hero h1 { font-family: var(--font-heading); font-size: clamp(2rem, 5vw, 3.5rem); font-weight: 700; letter-spacing: -0.02em; max-width: 48rem; } .hero p { margin-top: 1.5rem; font-size: 1.125rem; color: hsl(var(--muted-foreground)); max-width: 40rem; } .pillars { max-width: 1500px; margin: 0 auto; padding: 0 4vw 4rem; } .pillars h2 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; margin-bottom: 2rem; } .pillar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 1.5rem; } .about-brief { border-top: 1px solid hsl(var(--border)); } .about-brief { max-width: 1500px; margin: 0 auto; padding: 4rem 4vw; } .about-brief h2 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; margin-bottom: 1rem; } .about-brief p { color: hsl(var(--muted-foreground)); max-width: 40rem; } .about-brief a { margin-top: 1.5rem; display: inline-block; font-size: 0.875rem; font-weight: 500; } /* ── Cards ─────────────────────────────────────────────── */ .card { display: block; padding: 1.5rem; background: hsl(var(--card)); color: hsl(var(--card-foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); transition: border-color 0.2s; } .card:hover { border-color: hsl(var(--accent)); text-decoration: none; } .pillar-icon { display: inline-flex; align-items: center; justify-content: center; width: 2.5rem; height: 2.5rem; margin-bottom: 0.75rem; border-radius: var(--radius); background: hsl(var(--accent) / 0.1); color: hsl(var(--accent)); } .card h3 { font-family: var(--font-heading); font-size: 1.125rem; font-weight: 600; margin-bottom: 0.5rem; } .card p { font-size: 0.875rem; color: hsl(var(--muted-foreground)); } .card .meta { font-size: 0.75rem; color: hsl(var(--muted-foreground)); margin-top: 0.5rem; } /* ── Prose (article content) ───────────────────────────── */ .prose { max-width: 65ch; } .prose h1 { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 700; margin-bottom: 1rem; } .prose h2 { font-family: var(--font-heading); font-size: 1.5rem; font-weight: 600; margin: 2rem 0 1rem; } .prose h3 { font-family: var(--font-heading); font-size: 1.25rem; font-weight: 600; margin: 1.5rem 0 0.75rem; } .prose p { margin-bottom: 1rem; } .prose strong { font-weight: 600; } .prose ul, .prose ol { margin: 0 0 1rem 1.5rem; } .prose li { margin-bottom: 0.25rem; } .prose code { font-size: 0.875em; background: hsl(var(--muted)); padding: 0.15em 0.3em; border-radius: 3px; } /* ── Page layouts ──────────────────────────────────────── */ .pillar-page, .about-page, .contact-page, .blog-page, .blog-post, .error-page { max-width: 1500px; margin: 0 auto; padding: 4rem 4vw; } .pillar-page h1, .about-page h1, .blog-post h1 { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 700; margin-bottom: 1.5rem; } .vision { margin-top: 3rem; padding-top: 3rem; border-top: 1px solid hsl(var(--border)); } .blog-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 1.5rem; } .coming-soon { color: hsl(var(--muted-foreground)); font-style: italic; } /* ── FAQ ───────────────────────────────────────────────── */ .faq-item { margin: 1rem 0; border: 1px solid hsl(var(--border)); border-radius: var(--radius); } .faq-item summary { padding: 1rem; cursor: pointer; font-weight: 500; } .faq-item summary:hover { background: hsl(var(--muted)); } .faq-item p { padding: 0 1rem 1rem; color: hsl(var(--muted-foreground)); } /* ── Contact form ──────────────────────────────────────── */ .contact-page h1 { font-family: var(--font-heading); font-size: 2.25rem; font-weight: 700; margin-bottom: 0.5rem; } .contact-page > p { color: hsl(var(--muted-foreground)); margin-bottom: 2rem; } #contact-form { max-width: 32rem; } .form-group { margin-bottom: 1rem; } .form-group label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.25rem; } .form-group input, .form-group textarea { width: 100%; padding: 0.5rem 0.75rem; background: hsl(var(--card)); color: hsl(var(--foreground)); border: 1px solid hsl(var(--border)); border-radius: var(--radius); font-family: inherit; font-size: 0.875rem; } .form-group input:focus, .form-group textarea:focus { outline: 2px solid hsl(var(--accent)); outline-offset: 1px; } #contact-form button { padding: 0.5rem 1.5rem; font-size: 0.875rem; font-weight: 500; background: hsl(var(--foreground)); color: hsl(var(--background)); border: none; border-radius: var(--radius); cursor: pointer; } #contact-form button:hover { opacity: 0.9; } #form-status { margin-top: 0.75rem; font-size: 0.875rem; color: hsl(var(--accent)); } /* ── Error page ────────────────────────────────────────── */ .error-page { text-align: center; padding: 8rem 4vw; } .error-page h1 { font-size: 4rem; font-weight: 700; } .error-page p { margin: 1rem 0; color: hsl(var(--muted-foreground)); } /* ── Blog post ─────────────────────────────────────────── */ .blog-post header { margin-bottom: 2rem; } .blog-post .meta { font-size: 0.875rem; color: hsl(var(--muted-foreground)); margin-top: 0.5rem; } /* ── Responsive ────────────────────────────────────────── */ @media (max-width: 768px) { .header-inner nav { display: none; } .pillar-grid, .blog-grid { grid-template-columns: 1fr; } .footer-inner { flex-direction: column; text-align: center; } }