/* --------------------------------------------------------------------------- B03M static marketing-site — boem.top On-brand with the app style guide: neobrutalism + BBS/demoscene. Theme via data-theme attribute (light/dark) — set by the inline theme-init in + app.js. Self-contained: fonts via Google Fonts. --------------------------------------------------------------------------- */ :root { --paper: #FFF8E7; --cream: #F5EBC8; --ink: #1A1612; --ink-60: rgba(26, 22, 18, 0.6); --ink-85: rgba(26, 22, 18, 0.85); --amber: #FFB627; --terracotta: #D6553D; --olive: #7A8B3E; --font-display: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif; --font-sans: "Space Grotesk", ui-sans-serif, system-ui, sans-serif; --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; --shadow: 4px 4px 0 var(--ink); --shadow-lg: 6px 6px 0 var(--ink); --radius: 6px; /* = Tailwind rounded-md, like the /intro components */ } /* Warm dark (style-guide §2.x) — no neutral grey. */ :root[data-theme="dark"] { --paper: #1F1A14; --cream: #2B241B; --ink: #FFF4DA; --ink-60: rgba(255, 244, 218, 0.65); --ink-85: rgba(255, 244, 218, 0.85); --amber: #FFC44A; --terracotta: #F08D6E; --olive: #A4C77A; } /* No-JS / pre-script fallback: follow the OS until there is an explicit choice. */ @media (prefers-color-scheme: dark) { :root:not([data-theme]) { --paper: #1F1A14; --cream: #2B241B; --ink: #FFF4DA; --ink-60: rgba(255, 244, 218, 0.65); --ink-85: rgba(255, 244, 218, 0.85); --amber: #FFC44A; --terracotta: #F08D6E; --olive: #A4C77A; } } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--cream); color: var(--ink); font-family: var(--font-sans); line-height: 1.6; -webkit-font-smoothing: antialiased; } a { color: inherit; } .wrap { width: 100%; max-width: 64rem; margin: 0 auto; padding: 0 1rem; } @media (min-width: 768px) { .wrap { padding: 0 2rem; } } /* --- Top bar -------------------------------------------------------------- */ .topbar { position: sticky; top: 0; z-index: 40; border-bottom: 2px solid var(--ink); background: color-mix(in srgb, var(--amber) 95%, transparent); backdrop-filter: blur(4px); } .topbar__inner { display: flex; align-items: center; justify-content: space-between; padding: 0.65rem 0; gap: 0.5rem; } .logo { font-family: var(--font-display); font-weight: 800; font-size: 1.6rem; letter-spacing: -0.02em; text-decoration: none; } .topbar__actions { display: flex; align-items: center; gap: 0.5rem; } /* Icon-button (theme cycle) — 44px touch-target */ .icon-btn { display: inline-flex; align-items: center; justify-content: center; width: 2.75rem; height: 2.75rem; border: 2px solid var(--ink); background: var(--paper); color: var(--ink); box-shadow: var(--shadow); cursor: pointer; font-size: 1.1rem; line-height: 1; transition: transform 0.15s ease, box-shadow 0.15s ease; } .icon-btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); } .icon-btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); } /* Language toggle */ .lang-toggle { display: inline-flex; height: 2.75rem; border: 2px solid var(--ink); box-shadow: var(--shadow); overflow: hidden; } .lang-toggle button { border: 0; background: var(--paper); color: var(--ink-60); font-family: var(--font-mono); font-weight: 700; font-size: 0.8rem; padding: 0 0.75rem; cursor: pointer; } .lang-toggle button[aria-pressed="true"] { background: var(--amber); color: var(--ink); } /* --- Buttons (brut) ------------------------------------------------------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem; height: 2.75rem; padding: 0 1rem; border: 2px solid var(--ink); background: var(--amber); color: var(--ink); font-family: var(--font-mono); font-weight: 700; font-size: 0.875rem; text-decoration: none; box-shadow: var(--shadow); cursor: pointer; transition: transform 0.15s ease, box-shadow 0.15s ease; } .btn:hover { transform: translate(-2px, -2px); box-shadow: var(--shadow-lg); } .btn:active { transform: translate(2px, 2px); box-shadow: 0 0 0 var(--ink); } .btn--paper { background: var(--paper); } .btn[disabled] { opacity: 0.5; cursor: default; transform: none; box-shadow: var(--shadow); } @media (prefers-reduced-motion: reduce) { .btn, .icon-btn { transition: none; } .btn:hover, .btn:active, .icon-btn:hover, .icon-btn:active { transform: none; box-shadow: var(--shadow); } } /* --- Cards ---------------------------------------------------------------- */ .card { border: 2px solid var(--ink); background: var(--paper); box-shadow: var(--shadow); padding: 1.25rem; } .card--amber { background: var(--amber); } main { padding: 2rem 0; } @media (min-width: 768px) { main { padding: 4rem 0; } } section { margin-bottom: 4rem; } /* --- Hero ----------------------------------------------------------------- */ .hero { text-align: center; } .hero h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2.25rem, 7vw, 3.9rem); line-height: 1.05; margin: 0 0 1rem; } .hero .tagline { font-family: var(--font-mono); color: var(--ink-85); font-size: 1.05rem; margin: 0 auto 1rem; max-width: 36rem; } .hero .intro { font-size: 1.05rem; color: var(--ink-85); margin: 0 auto 1.5rem; max-width: 38rem; } .cta-row { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; } /* --- Section heading (BBS) ----------------------------------------------- */ .section-head { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 4vw, 2.25rem); letter-spacing: -0.01em; margin: 0 0 1.5rem; text-align: center; } .sticker { display: block; text-align: center; font-family: var(--font-mono); color: var(--ink-60); letter-spacing: 0.3em; margin: 0 0 1rem; } .lead { text-align: center; max-width: 48rem; margin: 0 auto 1.5rem; font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink-85); } /* --- Grids ---------------------------------------------------------------- */ .grid { display: grid; grid-template-columns: 1fr; gap: 1rem; list-style: none; margin: 0; padding: 0; } @media (min-width: 640px) { .grid--2 { grid-template-columns: 1fr 1fr; } } @media (min-width: 768px) { .grid--3 { grid-template-columns: repeat(3, 1fr); } } .module h3 { font-family: var(--font-display); font-weight: 800; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.08em; margin: 0 0 0.5rem; display: flex; align-items: center; gap: 0.5rem; } .module p { font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink-85); margin: 0; } .emoji { font-size: 1.25rem; line-height: 1; } /* --- Demo card ------------------------------------------------------------ */ .demo h2 { font-family: var(--font-display); font-weight: 800; font-size: clamp(1.5rem, 4vw, 2rem); margin: 0 0 0.25rem; } .demo__intro { font-family: var(--font-mono); font-size: 0.85rem; color: var(--ink-85); margin: 0 0 1rem; } .cred { border: 2px solid var(--ink); background: var(--paper); padding: 1rem; font-family: var(--font-mono); font-size: 0.85rem; } .cred__label { font-weight: 700; text-transform: uppercase; letter-spacing: 0.04em; color: var(--ink-60); margin: 0 0 0.5rem; } .cred__line .k { color: var(--ink-60); } .cred__line .v { font-weight: 700; } .demo__foot { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.75rem; margin-top: 1.25rem; } .demo__note { font-family: var(--font-mono); font-size: 0.75rem; color: var(--ink-60); margin: 0; } /* --- Why-list ------------------------------------------------------------- */ .checklist { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.5rem; } .checklist li { display: flex; gap: 0.75rem; font-family: var(--font-mono); font-size: 0.9rem; } .checklist .tick { color: var(--olive); font-weight: 700; } /* --- Safety --------------------------------------------------------------- */ .notify { border: 2px solid var(--ink); background: color-mix(in srgb, var(--amber) 30%, var(--paper)); box-shadow: var(--shadow); padding: 1rem; font-family: var(--font-mono); font-size: 0.85rem; margin-top: 1rem; } /* --- FAQ (native details) ------------------------------------------------- */ .faq { display: grid; gap: 0.5rem; } details.card { padding: 0; } details.card > summary { list-style: none; cursor: pointer; padding: 1rem 1.25rem; font-family: var(--font-display); font-weight: 700; font-size: 1.05rem; display: flex; justify-content: space-between; align-items: center; gap: 0.75rem; } details.card > summary::-webkit-details-marker { display: none; } details.card > summary::after { content: "▾"; font-family: var(--font-mono); } details.card[open] > summary::after { content: "▴"; } details.card .answer { border-top: 2px solid color-mix(in srgb, var(--ink) 20%, transparent); padding: 1rem 1.25rem; font-family: var(--font-mono); font-size: 0.9rem; color: var(--ink-85); } /* --- Waitlist ------------------------------------------------------------- */ .waitlist__intro { margin: 0 0 1.25rem; color: var(--ink-85); } .waitlist form { display: flex; flex-direction: column; gap: 0.75rem; } @media (min-width: 640px) { .waitlist form { flex-direction: row; align-items: stretch; } } .waitlist input { height: 2.75rem; flex: 1; border: 2px solid var(--ink); background: var(--cream); padding: 0 0.75rem; font-family: var(--font-mono); font-size: 0.875rem; color: var(--ink); } .waitlist input::placeholder { color: var(--ink-60); } .waitlist input:focus { outline: 2px solid var(--amber); outline-offset: 0; } .feedback { margin: 0.75rem 0 0; font-family: var(--font-mono); font-size: 0.875rem; } .feedback--success { color: var(--olive); } .feedback--info { color: var(--ink-60); } .feedback--error { color: var(--terracotta); } /* --- Prose (privacy) ------------------------------------------------------ */ .prose h1 { font-family: var(--font-display); font-weight: 800; font-size: clamp(2rem, 6vw, 3rem); margin: 0 0 0.5rem; } .prose h2 { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; margin: 2rem 0 0.5rem; } .prose p, .prose li { color: var(--ink-85); } .prose ul { padding-left: 1.25rem; } .prose a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .prose .meta { font-family: var(--font-mono); color: var(--ink-60); margin-top: 0; } /* --- Footer --------------------------------------------------------------- */ .footer { border-top: 2px solid var(--ink); background: var(--ink); color: color-mix(in srgb, var(--paper) 75%, transparent); font-family: var(--font-mono); font-size: 0.8rem; padding: 1.5rem 0; } .footer .wrap { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; align-items: center; } .footer a { color: var(--amber); text-decoration: none; } .footer a:hover { text-decoration: underline; text-underline-offset: 3px; } noscript .ns { display: block; max-width: 40rem; margin: 3rem auto; padding: 0 1rem; font-family: var(--font-mono); } /* --- Spoke v2-look: rounded corners (rounded-md = 6px) ------------------- The /intro components use `rounded-md` everywhere; this static site was on border-radius 0 (sharp). One rule rounds all boxes/buttons/inputs/toggles. Deliberately NOT rounded: the topbar/footer strips (full-bleed) and the ASCII sticker (pure text). */ .card, .btn, .icon-btn, .lang-toggle, .cred, .notify, .waitlist input, details.card { border-radius: var(--radius); } details.card { overflow: hidden; } /* --- Owner-preset font-weights (set by app.js via getPublicTheme; no-op if the preset sets no numeric weight → defaults remain) -------- */ body { font-weight: var(--font-sans-weight, 400); } .logo, .hero h1, .section-head, .module h3, .demo h2 { font-weight: var(--font-display-weight, 800); } details.card > summary { font-weight: var(--font-display-weight, 700); }