/* Emergent Enterprise — shared styles Each page declares its own --accent and --bg via [data-page] on */ @import url('https://fonts.googleapis.com/css2?family=Newsreader:ital,opsz,wght@0,6..72,400;0,6..72,500;0,6..72,600;1,6..72,400&family=JetBrains+Mono:wght@400;500&display=swap'); *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; } :root { --ink: #1a1814; --ink-2: #4a4640; --ink-3: #837e76; --ink-4: #b8b3a9; --rule: rgba(26, 24, 20, 0.10); --rule-strong: rgba(26, 24, 20, 0.22); --max: 980px; --max-narrow: 680px; --serif: 'Newsreader', 'Iowan Old Style', Georgia, serif; --sans: -apple-system, BlinkMacSystemFont, 'Helvetica Neue', Helvetica, Arial, sans-serif; --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace; } /* Per-page palettes — minimal, tonal */ [data-page="home"] { --bg: #f4f3e6; --bg-2: #ebe9d2; --accent: #4a4d18; --accent-soft: rgba(74,77,24,0.10); } [data-page="canvas"] { --bg: #eef0f3; --bg-2: #e3e7ed; --accent: #2d3a4a; --accent-soft: rgba(45,58,74,0.07); } [data-page="training"] { --bg: #ecefe8; --bg-2: #dfe4d9; --accent: #3a4a30; --accent-soft: rgba(58,74,48,0.07); } [data-page="practice"] { --bg: #f1ebe5; --bg-2: #e6ddd2; --accent: #5a3a26; --accent-soft: rgba(90,58,38,0.07); } [data-page="book"] { --bg: #efebee; --bg-2: #e3dde2; --accent: #3e2a3a; --accent-soft: rgba(62,42,58,0.07); } [data-page="about"] { --bg: #f3ede5; --bg-2: #e8dfd1; --accent: #5a4a36; --accent-soft: rgba(90,74,54,0.07); } [data-page="contact"] { --bg: #ebe9e5; --bg-2: #ddd9d2; --accent: #1f1d1a; --accent-soft: rgba(31,29,26,0.06); } [data-page="literacy"] { --bg: #f0efe8; --bg-2: #e4e2d8; --accent: #4a4038; --accent-soft: rgba(74,64,56,0.07); } [data-page="sessions"] { --bg: #f0ece2; --bg-2: #e5dfce; --accent: #4a4020; --accent-soft: rgba(74,64,32,0.07); } [data-page="profile"] { --bg: #faf7e1; --bg-2: #f2e9b8; --accent: #1a1814; --accent-soft: rgba(26, 24, 20, 0.06); } html { background: var(--bg); } body { font-family: var(--serif); color: var(--ink); background: var(--bg); line-height: 1.6; -webkit-font-smoothing: antialiased; font-feature-settings: "kern", "liga", "calt"; min-height: 100vh; } a { color: inherit; text-decoration: none; } a:not(.btn):not(.nav-links a):not(.brand):hover { color: var(--accent); } /* ───────── Nav ───────── */ .nav { position: sticky; top: 0; z-index: 50; background: var(--bg); border-bottom: 0.5px solid var(--rule); backdrop-filter: saturate(140%) blur(8px); } .nav-inner { max-width: var(--max); margin: 0 auto; display: flex; align-items: center; justify-content: space-between; padding: 18px 32px; gap: 24px; } .brand { font-family: var(--serif); font-size: 16px; font-weight: 500; letter-spacing: -0.01em; display: flex; align-items: center; gap: 10px; } .brand-mark { display: inline-block; flex-shrink: 0; vertical-align: middle; object-fit: contain; } .nav .brand-mark { width: 45px; height: 45px; } .footer-name .brand-mark { width: 32px; height: 32px; } font-weight: 500; letter-spacing: -0.01em; color: var(--ink); display: flex; align-items: center; gap: 10px; } .footer-name { display: flex; align-items: center; gap: 8px; } .nav-links { display: flex; gap: 4px; align-items: center; } .nav-links a { font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-3); padding: 8px 12px; border-radius: 4px; transition: color .2s, background .2s; } .nav-links a:hover { color: var(--ink); } .nav-links a.active { color: var(--accent); background: var(--accent-soft); } .hamburger { display: none; background: none; border: none; cursor: pointer; padding: 6px; } .hamburger span { display: block; width: 22px; height: 1.5px; background: var(--ink-2); margin: 5px 0; } /* ───────── Layout ───────── */ .wrap { max-width: var(--max); margin: 0 auto; padding: 0 32px; } .wrap-narrow { max-width: var(--max-narrow); margin: 0 auto; padding: 0 32px; } /* ───────── Page header ───────── */ .page-head { padding: 96px 32px 64px; border-bottom: 0.5px solid var(--rule); } .page-head .wrap-narrow { padding: 0; } .eyebrow { font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--accent); display: flex; align-items: center; gap: 12px; margin-bottom: 32px; } .eyebrow::before { content: ''; width: 24px; height: 1px; background: var(--accent); } .page-title { font-family: var(--serif); font-weight: 400; font-size: clamp(36px, 5.5vw, 56px); line-height: 1.08; letter-spacing: -0.02em; color: var(--ink); margin-bottom: 24px; text-wrap: balance; } .page-title em { font-style: italic; color: var(--accent); } .page-lede { font-family: var(--serif); font-size: 19px; line-height: 1.55; color: var(--ink-2); max-width: 580px; text-wrap: pretty; } /* ───────── Sections ───────── */ .section { padding: 80px 32px; border-bottom: 0.5px solid var(--rule); } .section:last-of-type { border-bottom: none; } .section.tinted { background: var(--bg-2); } .section-eyebrow { font-family: var(--mono); font-size: 10px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--ink-3); margin-bottom: 16px; } .section-title { font-family: var(--serif); font-weight: 400; font-size: clamp(26px, 3.5vw, 34px); line-height: 1.15; letter-spacing: -0.015em; margin-bottom: 16px; text-wrap: balance; } .section-lede { font-size: 17px; color: var(--ink-2); line-height: 1.6; max-width: 580px; margin-bottom: 36px; text-wrap: pretty; } p + p { margin-top: 1em; } /* ───────── Buttons ───────── */ .btn { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.04em; text-transform: uppercase; padding: 14px 22px; border: 0.5px solid var(--accent); color: var(--accent); background: transparent; border-radius: 2px; transition: all .2s; cursor: pointer; font-weight: 500; } .btn:hover { background: var(--accent); color: var(--bg); } .btn.primary { background: var(--accent); color: var(--bg); } .btn.primary:hover { background: var(--ink); border-color: var(--ink); } .btn .arrow { transition: transform .2s; } .btn:hover .arrow { transform: translateX(3px); } /* ───────── Cards / lists ───────── */ .card { border: 0.5px solid var(--rule-strong); border-radius: 4px; padding: 28px; background: var(--bg); transition: border-color .2s, transform .2s; } .card:hover { border-color: var(--accent); } .card-num { font-family: var(--mono); font-size: 11px; color: var(--accent); letter-spacing: 0.1em; margin-bottom: 16px; } .card h3 { font-family: var(--serif); font-weight: 500; font-size: 20px; line-height: 1.25; letter-spacing: -0.01em; margin-bottom: 10px; } .card p { font-size: 15px; color: var(--ink-2); line-height: 1.6; } .card .card-link { display: inline-flex; align-items: center; gap: 6px; margin-top: 18px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--accent); border-bottom: 0.5px solid var(--accent); padding-bottom: 2px; } /* ───────── Footer ───────── */ .footer { padding: 64px 32px 48px; background: var(--accent); color: rgba(255,255,255,0.72); } .footer .wrap { max-width: var(--max); } .footer-grid { display: grid; grid-template-columns: 1.2fr 1fr 1fr; gap: 48px; align-items: start; } .footer h5 { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: rgba(255,255,255,0.45); margin-bottom: 14px; font-weight: 500; } .footer-name { font-family: var(--serif); font-size: 18px; color: #fff; margin-bottom: 6px; font-weight: 500; } .footer p { font-size: 14px; line-height: 1.7; } .footer a { color: rgba(255,255,255,0.72); display: block; font-size: 13px; padding: 4px 0; transition: color .2s; } .footer a:hover { color: #fff; } .footer-bottom { border-top: 0.5px solid rgba(255,255,255,0.15); margin-top: 48px; padding-top: 24px; font-size: 11px; color: rgba(255,255,255,0.4); line-height: 1.7; } /* ───────── Utility ───────── */ .divider-mark { width: 24px; height: 1px; background: var(--accent); margin: 0 0 20px; } .placeholder { background: repeating-linear-gradient(135deg, transparent 0 14px, var(--accent-soft) 14px 15px); border: 0.5px solid var(--rule); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-3); text-align: center; padding: 24px; } /* ───────── Responsive ───────── */ @media (max-width: 760px) { .nav-inner { padding: 14px 20px; } .nav-links { display: none; position: absolute; top: 100%; left: 0; right: 0; flex-direction: column; align-items: stretch; gap: 0; padding: 12px 20px 20px; background: var(--bg); border-bottom: 0.5px solid var(--rule); } .nav-links.open { display: flex; } .nav-links a { padding: 12px 8px; } .hamburger { display: block; } .page-head { padding: 60px 20px 48px; } .section { padding: 56px 20px; } .wrap, .wrap-narrow { padding: 0 20px; } .footer { padding: 48px 20px 32px; } .footer-grid { grid-template-columns: 1fr; gap: 32px; } }