/* Launch visual system — for ages 18-30. Dark slate, single lime accent, Space Grotesk display + Inter body. No skeuomorphic shadows, no mascots, no emojis decorating chrome. Peer-to-peer not parental. */ @import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;600;700&family=Inter:wght@400;500;600;700&display=swap'); :root { /* Dark mode (default) */ --l-bg: #0a0e14; --l-surface: #131922; --l-surface-2: #1a212d; --l-line: #232b3a; --l-ink: #e8ecf3; --l-ink-soft: #8a96aa; --l-ink-mute: #5d6678; --l-accent: #c4f74a; /* lime */ --l-accent-d: #9bc824; --l-accent-on: #0a0e14; /* text color when sitting ON the accent */ --l-warn: #ff6b6b; /* coral-red for debt warnings */ --l-good: #4ade80; /* mint for wins */ /* "Spotlight" tokens — surfaces that stay dark in BOTH themes. These are the result boxes, the principles block, and the dark lesson callouts. The lime accent reads best on dark and we want it to remain the wow color in either theme. */ --l-spot-bg: #131922; --l-spot-bg-2: #1a212d; --l-spot-line: #232b3a; --l-spot-ink: #e8ecf3; --l-spot-ink-soft: rgba(232, 236, 243, 0.78); --l-spot-ink-mute: #5d6678; } /* Light mode override — kicks in when data-theme="light" is set on . */ :root[data-theme="light"] { --l-bg: #f6f4ec; /* warm cream — echoes adult Navy-on-Linen */ --l-surface: #ffffff; --l-surface-2: #f0ece1; --l-line: #d8d3c4; --l-ink: #1a1f2e; --l-ink-soft: #5b6478; --l-ink-mute: #8a90a0; --l-accent: #4a9b21; /* darker green for contrast on light */ --l-accent-d: #2d6010; --l-accent-on: #ffffff; } /* Slate — cooler dark, cyan accent (tech-y) */ :root[data-theme="slate"] { --l-bg: #0a0f14; --l-surface: #131c26; --l-surface-2: #1c2735; --l-line: #2a3a4f; --l-ink: #d6deea; --l-ink-soft: #8898ab; --l-ink-mute: #5d6e83; --l-accent: #5fbcd3; --l-accent-d: #3a9bb5; --l-accent-on: #0a0f14; } /* Cream — warm light, amber accent (sepia-ish) */ :root[data-theme="cream"] { --l-bg: #f9f3e3; --l-surface: #fefaef; --l-surface-2: #f0e8d5; --l-line: #d8cdb5; --l-ink: #3a2e1a; --l-ink-soft: #6b5d44; --l-ink-mute: #918366; --l-accent: #8b6914; --l-accent-d: #5e4609; --l-accent-on: #fefaef; } /* Plum — dark with pink/rose accent */ :root[data-theme="plum"] { --l-bg: #15101a; --l-surface: #221735; --l-surface-2: #2a223e; --l-line: #3a2d4a; --l-ink: #f0eaff; --l-ink-soft: #b5acd6; --l-ink-mute: #7a6e9c; --l-accent: #d889a3; --l-accent-d: #b8627d; --l-accent-on: #15101a; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { font-family: 'Inter', system-ui, sans-serif; background-color: var(--l-bg); color: var(--l-ink); line-height: 1.55; min-height: 100vh; -webkit-font-smoothing: antialiased; /* Subtle backdrop: dot grid only, no gradient blobs (the previous lime blob in the top-right read as a rendering artifact above the hero text). */ background-image: radial-gradient(circle, var(--l-pattern-dot, rgba(255,255,255,0.025)) 1px, transparent 1.5px); background-size: 26px 26px; background-attachment: fixed; } :root[data-theme="light"], :root[data-theme="cream"] { --l-pattern-dot: rgba(14,20,40,0.05); } h1, h2, h3, .display { font-family: 'Space Grotesk', sans-serif; letter-spacing: -0.02em; } /* ── Floating side widgets (visible only on wide viewports) ────────── */ .l-side { display: none; } /* Show only when the viewport is wide enough that the 200px sidebar PLUS breathing room fits beside the widest content area (the home hero at 1100px max). 1540px = 1100 + 200*2 + ~40px breathing. Below that, sidebars hide rather than overlap. */ @media (min-width: 1540px) { .l-side { display: block; position: fixed; top: 180px; /* clear of the sticky topbar + hero */ width: 200px; z-index: 1; /* behind the topbar */ max-height: calc(100vh - 220px); overflow-y: auto; scrollbar-width: thin; } /* Anchor to the 1100px content max-width so sidebars never overlap the hero or grids even on Launch's wider index page. */ .l-side-left { left: max(1rem, calc(50% - 550px - 220px)); } .l-side-right { right: max(1rem, calc(50% - 550px - 220px)); } } .l-side-stat { background: var(--l-surface); border: 1px solid var(--l-line); border-left: 3px solid var(--l-accent); border-radius: 8px; padding: 0.7rem 0.85rem; margin-bottom: 0.55rem; transition: transform 0.15s, border-color 0.15s; } .l-side-stat:hover { transform: translateX(2px); border-color: var(--l-accent); } .l-side-stat-label { font-family: 'Space Grotesk', sans-serif; font-size: 0.66rem; text-transform: uppercase; letter-spacing: 0.14em; color: var(--l-ink-mute); line-height: 1.3; } .l-side-stat-value { font-family: 'Space Grotesk', sans-serif; font-size: 1.45rem; font-weight: 700; color: var(--l-accent); margin-top: 0.15rem; line-height: 1.05; letter-spacing: -0.02em; } .l-side-stat-sub { font-size: 0.72rem; color: var(--l-ink-mute); margin-top: 0.15rem; } .l-side-quote { font-family: 'Space Grotesk', sans-serif; font-weight: 600; font-size: 1.4rem; line-height: 1.25; color: var(--l-ink); letter-spacing: -0.015em; padding-left: 0.85rem; border-left: 3px solid var(--l-accent); } .l-side-quote em { font-style: normal; color: var(--l-accent); } .l-side-attribution { margin-top: 0.85rem; padding-left: 0.5rem; font-size: 0.78rem; color: var(--l-ink-mute); font-family: 'Inter', sans-serif; font-weight: 400; } /* ── Top bar ── */ .l-topbar { background: color-mix(in srgb, var(--l-bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--l-line); padding: 0.85rem 1.5rem; display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 100; } .l-topbar-right { display: flex; align-items: center; gap: 0.5rem; position: relative; } /* Theme picker — small button that opens a popover with theme options. */ /* ── Subnav strip — horizontal pill bar below the topbar ── */ .l-subnav { background: color-mix(in srgb, var(--l-bg) 88%, transparent); backdrop-filter: blur(10px); border-bottom: 1px solid var(--l-line); padding: 0.55rem 1.5rem; display: flex; gap: 0.35rem; overflow-x: auto; scrollbar-width: none; /* Firefox */ position: sticky; top: 56px; /* just below the sticky .l-topbar */ z-index: 99; white-space: nowrap; } .l-subnav::-webkit-scrollbar { display: none; } /* Chrome/Safari */ .l-subnav-item { flex-shrink: 0; display: inline-flex; align-items: center; padding: 0.4rem 0.85rem; background: transparent; border: 1px solid transparent; color: var(--l-ink-soft); border-radius: 999px; font-family: inherit; font-weight: 500; font-size: 0.85rem; text-decoration: none; transition: color 0.1s, background 0.1s, border-color 0.1s; } .l-subnav-item:hover { color: var(--l-ink); background: var(--l-surface); border-color: var(--l-line); } .l-subnav-item.active { color: var(--l-accent-on, var(--l-bg)); background: var(--l-accent); font-weight: 600; border-color: var(--l-accent); } .l-theme-picker { position: relative; } .l-theme-btn { display: inline-flex; align-items: center; gap: 0.45rem; background: transparent; border: 1px solid var(--l-line); color: var(--l-ink-soft); padding: 0.35rem 0.75rem; border-radius: 6px; font-family: inherit; font-size: 0.82rem; font-weight: 500; cursor: pointer; line-height: 1; } .l-theme-btn:hover { background: var(--l-surface); color: var(--l-ink); } .l-theme-swatch { width: 14px; height: 14px; border-radius: 3px; background: var(--l-accent); border: 1px solid var(--l-line); flex-shrink: 0; } .l-theme-menu { position: absolute; top: calc(100% + 6px); right: 0; min-width: 180px; background: var(--l-surface); border: 1px solid var(--l-line); border-radius: 8px; padding: 0.35rem; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.4); z-index: 200; display: none; } .l-theme-picker.open .l-theme-menu { display: block; } .l-theme-option { display: flex; align-items: center; gap: 0.55rem; width: 100%; padding: 0.45rem 0.6rem; background: transparent; border: none; border-radius: 5px; color: var(--l-ink); font-family: inherit; font-size: 0.88rem; cursor: pointer; text-align: left; } .l-theme-option:hover { background: var(--l-surface-2); } .l-theme-option.active { background: var(--l-surface-2); } .l-theme-option-swatch { width: 18px; height: 18px; border-radius: 4px; flex-shrink: 0; border: 1px solid rgba(255,255,255,0.1); box-shadow: inset 0 0 0 3px var(--l-line); } .l-theme-option-name { flex: 1; } .l-theme-option-check { color: var(--l-accent); font-weight: 700; opacity: 0; } .l-theme-option.active .l-theme-option-check { opacity: 1; } .l-brand { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.15rem; color: var(--l-ink); text-decoration: none; letter-spacing: -0.02em; display: flex; align-items: baseline; gap: 0.35rem; } .l-brand-mark { color: var(--l-accent); font-size: 1.3rem; line-height: 1; } .l-brand-sub { color: var(--l-ink-mute); font-size: 0.78rem; font-weight: 500; } .l-switch { display: inline-flex; align-items: center; gap: 0.35rem; background: transparent; border: 1px solid var(--l-line); color: var(--l-ink-soft); padding: 0.4rem 0.85rem; border-radius: 6px; font-family: inherit; font-weight: 500; font-size: 0.82rem; text-decoration: none; } .l-switch:hover { background: var(--l-surface); color: var(--l-ink); } /* ── Hero ── */ .l-hero { text-align: left; padding: 3rem 1.5rem 1.5rem; max-width: 1100px; margin: 0 auto; } .l-eyebrow { color: var(--l-accent); font-size: 0.78rem; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; margin-bottom: 0.65rem; } .l-hero h1 { font-size: clamp(2.25rem, 5.5vw, 3.75rem); font-weight: 700; margin: 0 0 0.85rem; line-height: 1.04; max-width: 820px; } .l-hero h1 .accent { color: var(--l-accent); } .l-hero p { color: var(--l-ink-soft); font-size: 1.1rem; margin: 0; max-width: 640px; } /* ── Section label ── */ .l-section-label { max-width: 1100px; margin: 2rem auto 0.85rem; padding: 0 1.5rem; font-family: 'Space Grotesk', sans-serif; font-size: 0.76rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; color: var(--l-ink-mute); display: flex; align-items: center; gap: 0.65rem; } .l-section-label::after { content: ''; flex: 1; height: 1px; background: var(--l-line); } /* ── Card grid ── */ .l-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 0.85rem; max-width: 1100px; margin: 0 auto; padding: 0 1.5rem; } .l-card { background: var(--l-surface); border: 1px solid var(--l-line); border-radius: 10px; padding: 1.35rem 1.2rem 1.5rem; text-decoration: none; color: var(--l-ink); display: block; transition: border-color 0.15s, background 0.15s, transform 0.1s; position: relative; } .l-card:hover { border-color: var(--l-accent); background: var(--l-surface-2); transform: translateY(-1px); } .l-card::before { content: '→'; position: absolute; top: 1.1rem; right: 1.1rem; color: var(--l-ink-mute); font-size: 1.1rem; transition: color 0.15s, transform 0.15s; } .l-card:hover::before { color: var(--l-accent); transform: translateX(3px); } .l-card h3 { font-size: 1.15rem; font-weight: 600; margin: 0 1.5rem 0.35rem 0; } .l-card p { color: var(--l-ink-soft); font-size: 0.92rem; margin: 0; line-height: 1.5; } .l-card-tag { display: inline-block; padding: 0.18rem 0.5rem; background: var(--l-surface-2); border: 1px solid var(--l-line); color: var(--l-ink-soft); font-size: 0.68rem; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; border-radius: 4px; margin-bottom: 0.75rem; } .l-card-tag-warn { color: var(--l-warn); border-color: var(--l-warn); } .l-card-tag-good { color: var(--l-accent); border-color: var(--l-accent); } /* ── Tool page layout ── */ .l-tool { max-width: 720px; margin: 0 auto; padding: 2rem 1.5rem; } .l-tool h1 { font-size: 2rem; margin: 0 0 0.5rem; font-weight: 700; } .l-tool-sub { color: var(--l-ink-soft); margin: 0 0 1.75rem; font-size: 1rem; } .l-panel { background: var(--l-surface); border: 1px solid var(--l-line); border-radius: 10px; padding: 1.35rem; margin-bottom: 1rem; } .l-field { margin-bottom: 0.95rem; } .l-field:last-child { margin-bottom: 0; } .l-field label { display: block; font-weight: 500; margin-bottom: 0.4rem; font-size: 0.9rem; color: var(--l-ink); } .l-field-hint { margin: 0.35rem 0 0; color: var(--l-ink-mute); font-size: 0.8rem; } .l-input, .l-select { width: 100%; padding: 0.7rem 0.85rem; background: var(--l-bg); border: 1px solid var(--l-line); border-radius: 6px; color: var(--l-ink); font-family: inherit; font-size: 1rem; } .l-input:focus, .l-select:focus { outline: none; border-color: var(--l-accent); box-shadow: 0 0 0 3px rgba(196, 247, 74, 0.15); } .l-btn { display: inline-block; padding: 0.5rem 0.95rem; background: var(--l-surface-2); color: var(--l-ink); border: 1px solid var(--l-line); border-radius: 6px; font-family: inherit; font-weight: 500; font-size: 0.86rem; cursor: pointer; text-decoration: none; transition: all 0.1s; } .l-btn:hover { border-color: var(--l-accent); color: var(--l-accent); } .l-btn-pri { background: var(--l-accent); color: var(--l-bg); border-color: var(--l-accent); font-weight: 600; } .l-btn-pri:hover { background: var(--l-accent-d); color: var(--l-bg); } .l-btn-row { display: flex; gap: 0.4rem; flex-wrap: wrap; } /* Headline result — "spotlight" surface, stays dark in both themes */ .l-result { background: linear-gradient(135deg, var(--l-spot-bg), var(--l-spot-bg-2)); border: 1px solid var(--l-spot-line); border-left: 3px solid #c4f74a; /* always-lime */ border-radius: 10px; padding: 1.5rem; margin-bottom: 1rem; color: var(--l-spot-ink); } .l-result-label { color: var(--l-spot-ink-mute); font-size: 0.74rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.18em; } .l-result-value { font-family: 'Space Grotesk', sans-serif; font-size: clamp(2.3rem, 6vw, 3.2rem); font-weight: 700; color: #c4f74a; margin: 0.3rem 0; line-height: 1; } .l-result-value.warn { color: var(--l-warn); } .l-result-detail { color: var(--l-spot-ink-soft); font-size: 0.94rem; } /* Stat grid */ .l-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 0.5rem; margin: 1rem 0; } .l-stat { background: var(--l-surface); border: 1px solid var(--l-line); border-radius: 8px; padding: 0.85rem; } .l-stat-label { color: var(--l-ink-mute); font-size: 0.7rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.12em; } .l-stat-value { font-family: 'Space Grotesk', sans-serif; font-size: 1.5rem; font-weight: 700; margin-top: 0.2rem; } .l-stat-value.good { color: var(--l-good); } .l-stat-value.warn { color: var(--l-warn); } /* Tables */ .l-table { width: 100%; border-collapse: collapse; font-size: 0.9rem; } .l-table th, .l-table td { padding: 0.55rem 0.5rem; border-bottom: 1px solid var(--l-line); text-align: left; } .l-table th { color: var(--l-ink-mute); font-size: 0.74rem; text-transform: uppercase; letter-spacing: 0.1em; font-weight: 600; } .l-table td.right { text-align: right; } .l-table tr.highlight { background: rgba(196, 247, 74, 0.06); } /* Pull-quote / lesson callout — spotlight surface */ .l-lesson { background: var(--l-spot-bg); border: 1px solid var(--l-spot-line); border-left: 3px solid var(--l-warn); border-radius: 8px; padding: 1rem 1.2rem; margin: 1rem 0; font-size: 0.94rem; line-height: 1.55; color: var(--l-spot-ink); } .l-lesson strong { display: block; font-family: 'Space Grotesk', sans-serif; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--l-warn); margin-bottom: 0.4rem; } .l-lesson.good { border-left-color: #c4f74a; } .l-lesson.good strong { color: #c4f74a; } /* Maker note (home) */ .l-maker { max-width: 1100px; margin: 1rem auto 0; padding: 1.25rem 1.5rem; background: var(--l-surface); border: 1px solid var(--l-line); border-left: 3px solid var(--l-warn); border-radius: 8px; } .l-maker-head { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: var(--l-warn); margin-bottom: 0.45rem; } .l-maker p { margin: 0; color: var(--l-ink); font-size: 0.96rem; line-height: 1.6; } /* Principles — spotlight surface, stays dark in both themes */ .l-principles { max-width: 1100px; margin: 1rem auto; padding: 1.25rem 1.5rem; background: var(--l-spot-bg); border: 1px solid var(--l-spot-line); border-radius: 8px; color: var(--l-spot-ink); } .l-principles-title { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 0.72rem; letter-spacing: 0.18em; text-transform: uppercase; color: #c4f74a; margin-bottom: 0.85rem; } .l-principle { padding: 0.45rem 0; border-top: 1px solid var(--l-spot-line); font-size: 0.94rem; color: var(--l-spot-ink); } .l-principle:first-of-type { border-top: none; } .l-principle b { color: #c4f74a; margin-right: 0.4rem; } .l-foot { text-align: center; padding: 2rem 1.5rem; color: var(--l-ink-mute); font-size: 0.82rem; } .l-foot a { color: inherit; }