/* AI for Normies — shared styles */ :root { --cream: #FAF6EF; --warm-white: #FFFDF8; --stone: #E8E0D2; --stone-soft: #F1EADC; --ink: #1F1B16; --ink-soft: #3A342C; --warm-grey: #6B6256; --warm-grey-light: #8F8779; --rule: #D9CFBC; /* accent — amber by default, overridable via data-accent */ --accent: #C77A2B; --accent-soft: #E0A050; --accent-tint: #F6E6CF; --max-read: 680px; --max-content: 980px; --max-wide: 1120px; --font-serif: "Fraunces", "Cormorant Garamond", "Georgia", serif; --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif; } /* accent variants, switched via [data-accent] on */ html[data-accent="honey"] { --accent: #B88029; --accent-soft: #E4A948; --accent-tint: #F4E4C4; } html[data-accent="ochre"] { --accent: #A76A1E; --accent-soft: #CC8A36; --accent-tint: #EEDCB8; } /* candlelit dark mode */ html[data-mode="candlelit"] { --cream: #1C1713; --warm-white: #211B16; --stone: #2C241C; --stone-soft: #241E18; --ink: #F2E8D6; --ink-soft: #D6CAB3; --warm-grey: #B6A68E; --warm-grey-light: #8C7E68; --rule: #3A3026; --accent-tint: #3A2A17; } * { box-sizing: border-box; } html, body { margin: 0; padding: 0; } body { background: var(--cream); color: var(--ink); font-family: var(--font-sans); font-size: 18px; line-height: 1.65; font-feature-settings: "ss01", "cv11"; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* ============ typography ============ */ h1, h2, h3, h4 { font-family: var(--font-serif); font-weight: 450; color: var(--ink); letter-spacing: -0.01em; margin: 0; font-variation-settings: "opsz" 144, "SOFT" 30; text-wrap: balance; } h1 { font-size: clamp(40px, 6vw, 72px); line-height: 1.03; font-variation-settings: "opsz" 144, "SOFT" 50; letter-spacing: -0.02em; } h2 { font-size: clamp(28px, 3.4vw, 40px); line-height: 1.12; font-variation-settings: "opsz" 72, "SOFT" 40; } h3 { font-size: 22px; line-height: 1.25; font-variation-settings: "opsz" 36, "SOFT" 30; } p { margin: 0 0 1.1em; color: var(--ink-soft); text-wrap: pretty; } p.lead { font-size: clamp(20px, 2vw, 24px); line-height: 1.5; color: var(--ink-soft); } a { color: var(--ink); text-decoration: underline; text-decoration-color: var(--accent); text-decoration-thickness: 1.5px; text-underline-offset: 4px; transition: color .15s ease, text-decoration-color .15s ease; } a:hover { color: var(--accent); text-decoration-color: var(--accent); } .eyebrow { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--warm-grey); font-weight: 500; margin: 0 0 18px; } small, .meta { font-size: 14px; color: var(--warm-grey); letter-spacing: 0.01em; } hr { border: 0; border-top: 1px solid var(--rule); margin: 56px 0; } .rule-soft { border-top: 1px solid var(--rule); } /* ============ layout ============ */ .wrap { max-width: var(--max-wide); margin: 0 auto; padding: 0 32px; } .wrap-narrow { max-width: var(--max-content); margin: 0 auto; padding: 0 32px; } .wrap-read { max-width: var(--max-read); margin: 0 auto; padding: 0 32px; } section { padding: 80px 0; } @media (min-width: 900px) { section { padding: 112px 0; } } /* ============ header / nav ============ */ .site-header { padding: 28px 0; border-bottom: 1px solid var(--rule); background: var(--cream); position: sticky; top: 0; z-index: 50; backdrop-filter: saturate(1.05); } .site-header .wrap { display: flex; align-items: center; justify-content: space-between; gap: 24px; } .wordmark { font-family: var(--font-serif); font-weight: 500; font-size: 22px; letter-spacing: -0.01em; color: var(--ink); text-decoration: none; font-variation-settings: "opsz" 72, "SOFT" 50; } .wordmark .amp { color: var(--accent); font-style: italic; } .wordmark:hover { color: var(--ink); } nav.primary { display: flex; gap: 32px; align-items: center; } nav.primary a { font-family: var(--font-sans); font-size: 15px; text-decoration: none; color: var(--ink-soft); letter-spacing: 0.005em; } nav.primary a:hover { color: var(--accent); } nav.primary a.current { color: var(--ink); position: relative; } nav.primary a.current::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--accent); } @media (max-width: 640px) { nav.primary { gap: 18px; } nav.primary a:not(.nav-cta) { display: none; } } .nav-cta { background: var(--ink); color: var(--cream) !important; padding: 10px 16px; border-radius: 999px; text-decoration: none; font-size: 14px; transition: background .15s ease; } .nav-cta:hover { background: var(--accent); color: var(--warm-white) !important; } /* ============ footer ============ */ .site-footer { border-top: 1px solid var(--rule); padding: 64px 0 48px; margin-top: 64px; color: var(--warm-grey); font-size: 15px; } .site-footer .wrap { display: grid; grid-template-columns: 1.3fr 1fr 1fr; gap: 48px; align-items: start; } @media (max-width: 720px) { .site-footer .wrap { grid-template-columns: 1fr; gap: 32px; } } .site-footer h4 { font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ink); font-weight: 600; margin-bottom: 14px; } .site-footer a { display: block; color: var(--ink-soft); text-decoration: none; padding: 4px 0; } .site-footer a:hover { color: var(--accent); } .site-footer .fineprint { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--rule); display: flex; justify-content: space-between; flex-wrap: wrap; gap: 12px; font-size: 13px; } /* ============ buttons + inputs ============ */ .btn { display: inline-flex; align-items: center; gap: 10px; background: var(--ink); color: var(--cream); border: 0; padding: 14px 22px; border-radius: 999px; font-family: var(--font-sans); font-size: 15px; font-weight: 500; letter-spacing: 0.005em; text-decoration: none; cursor: pointer; transition: background .15s ease, transform .15s ease; } .btn:hover { background: var(--accent); color: var(--warm-white); transform: translateY(-1px); } .btn-ghost { background: transparent; color: var(--ink); border: 1px solid var(--ink); } .btn-ghost:hover { background: var(--ink); color: var(--cream); transform: translateY(-1px); } .btn-amber { background: var(--accent); color: var(--warm-white); } .btn-amber:hover { background: var(--ink); color: var(--cream); } .arrow { display: inline-block; transition: transform .2s ease; } .btn:hover .arrow, a.arrow-link:hover .arrow { transform: translateX(3px); } .arrow-link { display: inline-flex; align-items: center; gap: 8px; font-family: var(--font-sans); font-size: 15px; color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--accent); padding-bottom: 2px; } .arrow-link:hover { color: var(--accent); } /* newsletter form */ .news-form { display: flex; gap: 8px; background: var(--warm-white); padding: 8px; border: 1px solid var(--rule); border-radius: 999px; max-width: 480px; transition: border-color .15s ease, box-shadow .15s ease; } .news-form:focus-within { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); } .news-form input { flex: 1; border: 0; background: transparent; padding: 10px 18px; font-family: var(--font-sans); font-size: 16px; color: var(--ink); outline: 0; min-width: 0; } .news-form input::placeholder { color: var(--warm-grey-light); } .news-form button { background: var(--ink); color: var(--cream); border: 0; border-radius: 999px; padding: 10px 20px; font-family: var(--font-sans); font-size: 15px; font-weight: 500; cursor: pointer; transition: background .15s ease; white-space: nowrap; } .news-form button:hover { background: var(--accent); color: var(--warm-white); } .news-note { font-size: 13px; color: var(--warm-grey); margin-top: 12px; } /* text input / textarea */ .field { display: block; margin-bottom: 18px; } .field label { display: block; font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--warm-grey); margin-bottom: 8px; font-weight: 500; } .field input[type="text"], .field input[type="email"], .field input[type="tel"], .field textarea, .field select { width: 100%; background: var(--warm-white); border: 1px solid var(--rule); border-radius: 12px; padding: 14px 16px; font-family: var(--font-sans); font-size: 16px; color: var(--ink); outline: 0; transition: border-color .15s ease, box-shadow .15s ease; } .field textarea { min-height: 120px; resize: vertical; } .field input:focus, .field textarea:focus, .field select:focus { border-color: var(--accent); box-shadow: 0 0 0 4px var(--accent-tint); } /* ============ cards + blog item ============ */ .post-list { display: flex; flex-direction: column; } .post-item { display: grid; grid-template-columns: 92px 1fr auto; gap: 32px; padding: 28px 0; border-top: 1px solid var(--rule); align-items: baseline; text-decoration: none; color: inherit; transition: padding-left .2s ease; } .post-item:first-child { border-top: 0; } .post-item:hover { padding-left: 8px; } .post-item:hover h3 { color: var(--accent); } .post-item .num { font-family: var(--font-serif); font-style: italic; color: var(--accent); font-size: 18px; } .post-item h3 { font-size: clamp(22px, 2.2vw, 28px); transition: color .15s ease; font-variation-settings: "opsz" 48, "SOFT" 30; } .post-item .post-meta { font-family: var(--font-sans); font-size: 13px; color: var(--warm-grey); letter-spacing: 0.02em; white-space: nowrap; } .post-item p { margin: 6px 0 0; color: var(--warm-grey); font-size: 16px; } @media (max-width: 640px) { .post-item { grid-template-columns: 60px 1fr; } .post-item .post-meta { grid-column: 2; } } /* callout card */ .callout { background: var(--stone-soft); border: 1px solid var(--rule); border-radius: 20px; padding: 48px; display: grid; grid-template-columns: 1.3fr 1fr; gap: 48px; align-items: center; position: relative; overflow: hidden; } .callout::before { content: ""; position: absolute; top: -80px; right: -60px; width: 220px; height: 220px; border-radius: 50%; background: var(--accent-tint); opacity: 0.55; pointer-events: none; } .callout > * { position: relative; } @media (max-width: 720px) { .callout { grid-template-columns: 1fr; padding: 32px; } } /* tag/chip */ .chip { display: inline-flex; align-items: center; gap: 6px; background: var(--accent-tint); color: var(--ink); padding: 6px 12px; border-radius: 999px; font-size: 13px; font-weight: 500; letter-spacing: 0.01em; } .chip .dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); } /* badge circle */ .date-badge { background: var(--warm-white); border: 1px solid var(--rule); border-radius: 14px; padding: 14px 16px; min-width: 78px; text-align: center; font-family: var(--font-serif); } .date-badge .month { display: block; font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); font-weight: 600; margin-bottom: 2px; } .date-badge .day { font-size: 28px; line-height: 1; color: var(--ink); } .date-badge .dow { display: block; font-family: var(--font-sans); font-size: 11px; color: var(--warm-grey); margin-top: 4px; letter-spacing: 0.05em; } /* ============ tweaks panel ============ */ #tweaks-panel { position: fixed; bottom: 24px; right: 24px; background: var(--warm-white); border: 1px solid var(--rule); border-radius: 16px; padding: 18px 20px; width: 260px; z-index: 100; box-shadow: 0 10px 30px rgba(31, 27, 22, 0.08); font-family: var(--font-sans); font-size: 14px; display: none; } #tweaks-panel.visible { display: block; } #tweaks-panel h5 { font-family: var(--font-serif); font-size: 18px; font-weight: 500; margin: 0 0 4px; color: var(--ink); } #tweaks-panel .tp-sub { font-size: 12px; color: var(--warm-grey); margin-bottom: 14px; } #tweaks-panel .tp-row { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; } #tweaks-panel .tp-label { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--warm-grey); width: 100%; margin-bottom: 4px; font-weight: 600; } #tweaks-panel button.swatch { border: 1px solid var(--rule); background: var(--warm-white); border-radius: 999px; padding: 6px 12px; font-size: 12px; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; color: var(--ink); font-family: var(--font-sans); } #tweaks-panel button.swatch:hover { border-color: var(--ink); } #tweaks-panel button.swatch.active { background: var(--ink); color: var(--cream); border-color: var(--ink); } #tweaks-panel button.swatch .sw { width: 10px; height: 10px; border-radius: 50%; } #tweaks-panel .tp-close { position: absolute; top: 10px; right: 12px; background: transparent; border: 0; color: var(--warm-grey); cursor: pointer; font-size: 18px; line-height: 1; } /* ============ hero-specific ============ */ .hero { padding: 80px 0 40px; position: relative; } @media (min-width: 900px) { .hero { padding: 120px 0 80px; } } .hero .hero-inner { max-width: 900px; } .hero h1 .ink-accent { font-style: italic; color: var(--accent); font-variation-settings: "opsz" 144, "SOFT" 100; font-weight: 400; } .hero .intro { max-width: 560px; margin-top: 28px; font-size: 20px; color: var(--ink-soft); line-height: 1.55; } .hero .cta-row { display: flex; gap: 16px; align-items: center; margin-top: 36px; flex-wrap: wrap; } /* decorative mark: simple hand-set flourish */ .mark { display: inline-block; width: 28px; height: 1px; background: var(--accent); vertical-align: middle; margin: 0 10px 4px 0; } /* prose for blog */ .prose { font-size: 19px; line-height: 1.72; color: var(--ink-soft); } .prose p { margin: 0 0 1.3em; } .prose h2 { margin: 2em 0 0.5em; font-size: 32px; color: var(--ink); } .prose h3 { margin: 1.5em 0 0.4em; font-size: 22px; color: var(--ink); } .prose blockquote { border-left: 3px solid var(--accent); padding: 4px 0 4px 28px; margin: 1.5em 0; font-family: var(--font-serif); font-size: 24px; line-height: 1.4; color: var(--ink); font-style: italic; font-variation-settings: "opsz" 72, "SOFT" 60; } .prose ul { padding-left: 22px; } .prose ul li { margin-bottom: 0.5em; } .prose a { color: var(--ink); text-decoration-color: var(--accent); } .prose strong { color: var(--ink); font-weight: 600; } /* drop cap */ .prose > p:first-of-type::first-letter { font-family: var(--font-serif); font-size: 5.5em; line-height: 0.85; float: left; margin: 0.08em 0.08em 0 0; color: var(--accent); font-weight: 400; font-variation-settings: "opsz" 144, "SOFT" 100; } /* session list */ .session { display: grid; grid-template-columns: 100px 1fr auto; gap: 32px; padding: 28px 0; border-top: 1px solid var(--rule); align-items: start; } .session:last-child { border-bottom: 1px solid var(--rule); } .session h3 { font-size: 24px; margin-bottom: 6px; font-variation-settings: "opsz" 48, "SOFT" 30; } .session p { font-size: 16px; margin: 0; color: var(--warm-grey); } .session .session-status { font-family: var(--font-sans); font-size: 13px; color: var(--warm-grey); white-space: nowrap; text-align: right; } .session .spots { color: var(--accent); font-weight: 600; } .session .spots.full { color: var(--warm-grey); font-weight: 400; } @media (max-width: 640px) { .session { grid-template-columns: 1fr; gap: 12px; } .session .session-status { text-align: left; } } /* two-column detail */ .two-col { display: grid; grid-template-columns: 1fr 1.4fr; gap: 80px; align-items: start; } @media (max-width: 820px) { .two-col { grid-template-columns: 1fr; gap: 40px; } } /* placeholder block (minimal imagery approach) */ .placeholder { background: repeating-linear-gradient( 45deg, var(--stone-soft), var(--stone-soft) 10px, var(--stone) 10px, var(--stone) 20px ); border-radius: 12px; aspect-ratio: 4 / 3; display: flex; align-items: center; justify-content: center; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: var(--warm-grey); text-align: center; padding: 16px; } /* section header */ .section-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 40px; gap: 24px; flex-wrap: wrap; } /* facts list (workshop) */ .facts { display: grid; gap: 24px; } .fact { display: flex; gap: 18px; align-items: baseline; } .fact .fact-label { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--warm-grey); font-weight: 600; min-width: 90px; padding-top: 4px; } .fact .fact-value { font-family: var(--font-serif); font-size: 20px; color: var(--ink); font-variation-settings: "opsz" 36, "SOFT" 30; } .fact .fact-value em { color: var(--accent); font-style: italic; } /* "what you won't find" list */ .wont-find { display: grid; grid-template-columns: repeat(3, 1fr); gap: 24px; margin-top: 24px; } @media (max-width: 720px) { .wont-find { grid-template-columns: 1fr; } } .wont-find .wf { padding: 24px; background: var(--warm-white); border: 1px solid var(--rule); border-radius: 16px; } .wont-find .wf .x { font-family: var(--font-serif); font-size: 28px; color: var(--accent); font-style: italic; display: block; margin-bottom: 8px; } .wont-find .wf h4 { font-family: var(--font-serif); font-size: 20px; font-weight: 500; color: var(--ink); margin: 0 0 6px; font-variation-settings: "opsz" 36, "SOFT" 30; } .wont-find .wf p { margin: 0; font-size: 15px; color: var(--warm-grey); } /* quote row */ .pullquote { font-family: var(--font-serif); font-size: clamp(28px, 3.2vw, 40px); line-height: 1.2; color: var(--ink); font-variation-settings: "opsz" 72, "SOFT" 60; max-width: 780px; text-wrap: balance; } .pullquote .attr { display: block; font-family: var(--font-sans); font-size: 14px; color: var(--warm-grey); margin-top: 24px; letter-spacing: 0.02em; }