/* * DAA Labs — static landing page * Distilled from daa_labs_platform/assets/css/app.css * Brand spec: see daa_labs_platform/BRAND.md * * Design intent: * - Dark default (Ink #0F1923), Bone (#F8F5F0) light mode override * - Instrument Serif for display, DM Sans for UI, Space Mono for labels * - Cards: Playground (sky accent) and Auditorium (citrus accent) * - Theme toggled via [data-theme="dark"|"light"] on */ @import url('https://fonts.googleapis.com/css2?family=Instrument+Serif:ital@0;1&family=DM+Sans:ital,opsz,wght@0,9..40,300;0,9..40,400;0,9..40,500;0,9..40,600;1,9..40,300&family=Space+Mono:wght@400;700&display=swap'); /* ── Brand tokens ── */ :root { /* Core dark scale */ --color-ink: #0F1923; --color-slate: #1E2D3D; --color-steel: #2E4A63; /* Light/neutral scale */ --color-fog: #F0EDE8; --color-bone: #F8F5F0; /* Accents */ --color-labs-blue: #1A5BAB; --color-labs-sky: #3A9BD5; --color-citrus: #E8B84B; --color-amber: #C97D2E; --color-mint: #2BB88A; /* Type stack */ --font-sans: 'DM Sans', system-ui, -apple-system, BlinkMacSystemFont, sans-serif; --font-serif: 'Instrument Serif', Georgia, serif; --font-mono: 'Space Mono', 'Courier New', monospace; } /* ── Reset-ish ── */ *, *::before, *::after { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: var(--font-sans); color: var(--color-bone); background-color: var(--color-ink); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } a { color: inherit; text-decoration: none; } img, svg { display: block; max-width: 100%; } button { font-family: inherit; } /* ── Page shell ── */ .daa-home { position: relative; min-height: 100vh; display: flex; flex-direction: column; background-color: var(--color-ink); } .grid-bg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(rgba(58, 155, 213, 0.06) 1px, transparent 1px), linear-gradient(90deg, rgba(58, 155, 213, 0.06) 1px, transparent 1px); background-size: 48px 48px; } .shell-inner { position: relative; z-index: 10; display: flex; flex-direction: column; flex: 1; } /* ── Header / wordmark / theme toggle ── */ .site-header { display: flex; align-items: center; justify-content: space-between; padding: 1.5rem 2rem; } .daa-labs-wordmark { display: inline-flex; align-items: baseline; gap: 0.5rem; cursor: default; } a.daa-labs-wordmark { cursor: pointer; } .wordmark-daa { font-family: var(--font-sans); font-size: 1.375rem; font-weight: 700; letter-spacing: -0.03em; color: #ffffff; } .wordmark-labs { font-family: var(--font-mono); font-size: 0.875rem; font-weight: 400; letter-spacing: 0.22em; color: var(--color-labs-sky); } .home-theme-toggle { display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: 6px; border: 1px solid rgba(58, 155, 213, 0.25); color: rgba(248, 245, 240, 0.55); background: transparent; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .home-theme-toggle:hover { border-color: rgba(58, 155, 213, 0.6); color: var(--color-bone); background: rgba(58, 155, 213, 0.08); } .home-theme-toggle .icon { width: 1rem; height: 1rem; } /* Dark mode (default): show sun, hide moon */ .dark-mode-icon { display: inline-flex; } .light-mode-icon { display: none; } /* ── Eyebrow label ── */ .label-eyebrow { font-family: var(--font-mono); font-size: 11px; font-weight: 400; letter-spacing: 0.18em; text-transform: uppercase; color: var(--color-labs-sky); margin: 0; } .label-eyebrow.is-citrus { color: var(--color-citrus); } /* ── Typography ── */ .title-page { font-family: var(--font-serif); font-size: clamp(2.2rem, 4vw, 3.5rem); line-height: 1.1; font-weight: 400; margin: 0; color: var(--color-bone); } .title-card { font-family: var(--font-serif); font-size: 1.4rem; line-height: 1.2; font-weight: 400; margin: 0; color: rgb(230 250 255 / 90%); } .body-default { font-family: var(--font-sans); font-size: 0.9375rem; font-weight: 400; line-height: 1.65; } .body-small { font-family: var(--font-sans); font-size: 0.8125rem; font-weight: 400; line-height: 1.6; } .body-light { font-family: var(--font-sans); font-size: 1rem; font-weight: 300; line-height: 1.75; } .home-subtitle { color: rgba(248, 245, 240, 0.55); } .home-card-body { color: rgb(230 250 255 / 90%); } .home-footer { color: rgba(248, 245, 240, 0.25); } /* ── Hero ── */ .hero { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding: .5rem 1.5rem; text-align: center; } .hero .label-eyebrow { margin-bottom: 1.5rem; } .hero .title-page { margin-bottom: 1.5rem; max-width: 600px; } .hero .home-subtitle { max-width: 420px; margin: 0 0 4rem; } /* Italic emphasis inside hero title — Instrument Serif italic is the editorial flourish called out in BRAND.md §3 */ .title-page em { font-style: italic; } /* ── Section card grid ── */ .cards-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; width: 100%; max-width: 680px; margin: 0 auto; } @media (min-width: 640px) { .cards-grid { grid-template-columns: 1fr 1fr; } } /* ── Section entry cards ── */ .section-card { position: relative; display: flex; flex-direction: column; gap: 1.25rem; padding: 2rem; border-radius: 1rem; overflow: hidden; text-align: left; transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease; } .section-card:hover { transform: translateY(-4px); } .section-card .accent-bar { position: absolute; top: 0; bottom: 0; left: 0; width: 1px; opacity: 0.4; transition: opacity 0.2s ease; } .section-card:hover .accent-bar { opacity: 1; } .section-card .card-body { flex: 1; } .is-disabled .card-body div{ filter:blur(1); } .section-card .card-body .label-eyebrow { margin-bottom: 0.5rem; } .section-card .card-body .title-card { margin-bottom: 0.5rem; } .section-card .card-cta { font-family: var(--font-sans); font-size: 0.875rem; font-weight: 500; opacity: 0.6; transition: opacity 0.15s ease; } .section-card:hover .card-cta { opacity: 1; } /* Playground (sky accent) */ .playground-card { background: rgba(58, 155, 213, 0.06); border: 1px solid rgba(58, 155, 213, 0.18); } .playground-card:hover { border-color: rgba(58, 155, 213, 0.4); box-shadow: 0 8px 32px rgba(58, 155, 213, 0.08); } .playground-card .accent-bar { background: var(--color-labs-sky); } .playground-card .card-cta { color: var(--color-labs-sky); } /* Disabled Playground (Coming Soon) */ .playground-card.is-disabled { cursor: default; opacity: 0.55; } .section-blurred{ filter:blur(.8px) } .playground-card.is-disabled:hover { transform: none; border-color: rgba(58, 155, 213, 0.18); box-shadow: none; } .playground-card.is-disabled:hover .accent-bar { opacity: 0.4; } .playground-card.is-disabled:hover .card-cta { opacity: 0.6; } .coming-soon-badge { display: inline-flex; align-items: center; gap: .4rem; padding: 0.35rem 0.6rem; border: 1px solid rgba(24, 147, 218, 0.792); border-radius: 999px; font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: #62c4ff; background: rgb(39 59 70 / 43%); } /* Auditorium (citrus accent) */ .auditorium-card { background: rgb(239 187 66 / 23%); border: 1px solid rgba(232, 184, 75, 0.18); } .auditorium-card:hover { border-color: rgba(232, 184, 75, 0.4); box-shadow: 0 8px 32px rgba(232, 184, 75, 0.08); border:1px solid rgba(232, 185, 75, 0.523); } .auditorium-card .accent-bar { background: var(--color-citrus); } .auditorium-card .card-cta { color: var(--color-citrus); } /* ── Auditorium page layout ── */ .auditorium-main { flex: 1; width: 100%; max-width: 64rem; margin: 0 auto; padding: 0rem 1.5rem; } .auditorium-intro { text-align: center; margin-bottom: 3rem; } .auditorium-intro .label-eyebrow { margin-bottom: 1rem; } .auditorium-intro .title-page { margin-bottom: 1rem; } .auditorium-intro .home-subtitle { max-width: 28rem; margin: 0 auto; } .auditorium-grid { display: grid; grid-template-columns: 1fr; gap: 1.25rem; } @media (min-width: 640px) { .auditorium-grid { grid-template-columns: 1fr 1fr; } } .auditorium-empty { text-align: center; padding: 5rem 0; } /* ── Footer ── */ .site-footer { padding: 1.5rem; text-align: center; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; } /* ──────────────────────────────────────────────────────────── * Light mode overrides * ──────────────────────────────────────────────────────────── */ [data-theme="light"] body { background-color: var(--color-bone); color: var(--color-ink); } [data-theme="light"] .daa-home { background-color: var(--color-bone); } [data-theme="light"] .grid-bg { background-image: linear-gradient(rgba(26, 91, 171, 0.05) 1px, transparent 1px), linear-gradient(90deg, rgba(26, 91, 171, 0.05) 1px, transparent 1px); } [data-theme="light"] .wordmark-daa { color: var(--color-ink); } [data-theme="light"] .wordmark-labs { color: var(--color-labs-blue); } [data-theme="light"] .label-eyebrow { color: var(--color-labs-blue); } [data-theme="light"] .label-eyebrow.is-citrus { color: var(--color-amber); } [data-theme="light"] .title-page, [data-theme="light"] .title-card { color: var(--color-ink); } [data-theme="light"] .home-subtitle { color: rgba(15, 25, 35, 0.6); } [data-theme="light"] .home-card-body { color: rgba(15, 25, 35, 0.55); } [data-theme="light"] .home-footer { color: rgba(15, 25, 35, 0.35); } [data-theme="light"] .playground-card { background: rgba(26, 91, 171, 0.05); border-color: rgba(26, 91, 171, 0.18); } [data-theme="light"] .playground-card:hover { border-color: rgba(26, 91, 171, 0.35); box-shadow: 0 8px 32px rgba(26, 91, 171, 0.07); } [data-theme="light"] .playground-card .accent-bar { background: var(--color-labs-blue); } [data-theme="light"] .playground-card .card-cta { color: var(--color-labs-blue); } [data-theme="light"] .coming-soon-badge { border-color: rgba(26, 91, 171, 0.3); color: var(--color-labs-blue); background: rgba(26, 91, 171, 0.06); } [data-theme="light"] .auditorium-card { background: rgba(201, 125, 46, 0.05); border-color: rgba(201, 125, 46, 0.2); } [data-theme="light"] .auditorium-card:hover { border-color: rgba(201, 125, 46, 0.4); box-shadow: 0 8px 32px rgba(201, 125, 46, 0.07); } [data-theme="light"] .auditorium-card .accent-bar { background: var(--color-amber); } [data-theme="light"] .auditorium-card .card-cta { color: var(--color-amber); } [data-theme="light"] .home-theme-toggle { border-color: rgba(15, 25, 35, 0.2); color: rgba(15, 25, 35, 0.55); } [data-theme="light"] .home-theme-toggle:hover { border-color: rgba(15, 25, 35, 0.45); color: var(--color-ink); background: rgba(15, 25, 35, 0.06); } [data-theme="light"] .dark-mode-icon { display: none; } [data-theme="light"] .light-mode-icon { display: inline-flex; } /* Reduce motion preference */ @media (prefers-reduced-motion: reduce) { .section-card, .home-theme-toggle, .accent-bar, .card-cta { transition: none !important; } .section-card:hover { transform: none; } }